@reticlehq/browser 2.7.0 → 2.9.0

package/dist/presenter/presenter-log.js

@@ -1,6 +1,8 @@
 import { PresenterMode } from '@reticlehq/core';
+import { nativeSetTimeout } from '../timers/native-timers.js';
+import { PresenterIcon, PRESENTER_ICON_SIZE, hiIcon, } from './presenter-icons.js';
 // Activity-log UI for the presenter HUD: a persistent, timestamped, scrollable transcript of
-// every read/act/narration. All strings here are presenter-only UI (chips, glyphs, attrs) — they
+// every read/act/narration. All strings here are presenter-only UI (chips, glyphs, attrs) - they
 // never cross the browser↔bridge↔agent wire, so they stay as named consts (not protocol consts).
 // All nodes carry data-reticle-* attrs so they're excluded from snapshots (see dom-ignore.ts).
 /** Default cap on accumulated activity-log rows (bounds DOM). Presenter-local UI tunable. */
@@ -12,12 +14,14 @@ export const LOG_KIND = {
     NARRATION: 'narration',
     HUMAN: 'human',
 };
-/** Prefix for a human-authored activity row ("🧑 you: <text>"). Presenter-only UI. */
-export const HUMAN_ROW_PREFIX = '🧑 you: ';
 /** Act-row outcome glyph keys (presenter-only UI). */
 export const LOG_RESULT = { PASS: 'pass', FAIL: 'fail' };
 const LOG_CHIP = { read: 'READ', act: 'ACT', narration: '', human: '' };
-/** HUD chip copy keyed by presenter mode (UI text, browser-local — not a wire string). */
+const LOG_CHIP_ICON = {
+    read: PresenterIcon.VIEW,
+    act: PresenterIcon.POINTER,
+};
+/** HUD chip copy keyed by presenter mode (UI text, browser-local - not a wire string). */
 export const CHIP_LABEL = {
     [PresenterMode.IDLE]: '',
     [PresenterMode.READING]: 'READING',
@@ -30,33 +34,90 @@ const LOG_CHIP_MODE = {
     narration: PresenterMode.IDLE,
     human: PresenterMode.IDLE,
 };
-const RESULT_GLYPH = { pass: '✓', fail: '✗' };
+const RESULT_GLYPH = { pass: '', fail: 'Fail' };
 const RESULT_CLASS = { pass: 'reticle-pass', fail: 'reticle-fail' };
 export const DATA_RETICLE_LOG = 'data-reticle-log';
 const DATA_RETICLE_LOG_ROW = 'data-reticle-log-row';
-const DATA_RETICLE_LOG_TS = 'data-reticle-log-ts';
+/**
+ * The attribute on ONE log line's timestamp. Deliberately not `data-reticle-log-ts`: that name is
+ * the overlay-level SETTING (show timestamps y/n) and the overlay root carries it, so a bare
+ * `[data-reticle-log-ts]{opacity:.85}` here matched the overlay itself and made the entire HUD -
+ * chat panel included - 85% transparent, with the page legible straight through it.
+ */
+export const LOG_TIME_ATTR = 'data-reticle-log-time';
 const DATA_KIND = 'data-kind';
 const LOG_TEXT_CLASS = 'reticle-log-text';
 const LOG_RES_CLASS = 'reticle-res';
 const LOG_CHIP_CLASS = 'reticle-chip';
+const LOG_EMPTY_HINT = 'Agent activity will appear here';
+/** How long to keep re-pinning the feed after the panel opens, while rows render their real size. */
+const LOG_SETTLE_MS = 160;
 /** CSS for the log feed (injected with the rest of the presenter stylesheet; vars inherit from the card). */
 export const LOG_CSS = `
-[data-reticle-log]{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;
-  gap:7px;padding:12px 14px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent;}
-[data-reticle-log]::-webkit-scrollbar{width:9px;}
-[data-reticle-log]::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:9px;border:2px solid transparent;background-clip:content-box;}
+[data-reticle-log]{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;touch-action:pan-y;
+  display:flex;flex-direction:column;
+  gap:4px;padding:8px 10px 10px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent;
+  background:transparent;}
+[data-reticle-log]:empty{align-items:center;justify-content:center;}
+[data-reticle-log]:empty::after{content:"${LOG_EMPTY_HINT}";display:block;padding:24px 16px;text-align:center;
+  color:var(--reticle-faint);font-size:11.5px;line-height:1.5;letter-spacing:.01em;}
+[data-reticle-log]::-webkit-scrollbar{width:8px;}
+[data-reticle-log]::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:8px;border:2px solid transparent;background-clip:content-box;}
 [data-reticle-log]::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.26);background-clip:content-box;}
-[data-reticle-log-row]{display:flex;align-items:baseline;gap:8px;font-size:12px;line-height:1.45;
-  animation:reticle-row-in .26s cubic-bezier(.16,1,.3,1);}
-@keyframes reticle-row-in{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}
-[data-reticle-log-ts]{flex:none;color:var(--reticle-faint);font-size:10px;font-variant-numeric:tabular-nums;padding-top:1px;}
-[data-reticle-log] .reticle-log-text{flex:1;min-width:0;color:#d6dae4;overflow-wrap:anywhere;word-break:break-word;}
-[data-reticle-log] .reticle-res{flex:none;font-weight:700;}
-[data-reticle-log-row][data-kind="human"]{align-self:flex-end;max-width:88%;
-  background:var(--reticle-accent-soft);border:1px solid var(--reticle-accent);border-radius:13px 13px 4px 13px;padding:6px 11px;}
-[data-reticle-log-row][data-kind="human"] [data-reticle-log-ts]{display:none;}
-[data-reticle-log-row][data-kind="human"] .reticle-log-text{color:var(--reticle-fg);}
+[data-reticle-log-row]{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;line-height:1.45;
+  padding:4px 2px;background:transparent;border:none;border-radius:0;
+  content-visibility:auto;contain-intrinsic-size:auto 28px;}
+[data-reticle-log-row][data-kind="narration"]{padding:6px 2px;color:var(--reticle-muted);font-size:11px;font-style:italic;}
+/**
+ * The kind marker is an ICON, not a pill.
+ *
+ * A row is "what the agent did"; wrapping READ / ACT in an uppercase capsule made the label louder
+ * than the action next to it, and forty of them down a panel read as a wall of badges. The icon
+ * carries the same distinction in the appearance colour and gets out of the way of the text.
+ */
+[data-reticle-log] [data-reticle-log-row] .reticle-chip{display:inline-flex;align-items:center;
+  flex:none;padding:0;border:none;background:none;box-shadow:none;border-radius:0;
+  color:var(--reticle-c-active);opacity:.85;line-height:0;padding-top:2px;}
+[data-reticle-log] [data-reticle-log-row] .reticle-chip svg{display:block;fill:none;stroke:currentColor;
+  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
+[data-reticle-log] [data-reticle-log-row] .reticle-chip-label{
+  position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
+[data-reticle-log] [data-reticle-log-row][data-kind="read"] .reticle-chip{opacity:.5;}
+[${LOG_TIME_ATTR}]{flex:none;color:var(--reticle-faint);font-size:9px;font-variant-numeric:tabular-nums;padding-top:2px;min-width:2em;opacity:.85;}
+[data-reticle-log] .reticle-log-text{flex:1;min-width:0;color:var(--reticle-muted);overflow-wrap:anywhere;word-break:break-word;}
+[data-reticle-log] .reticle-res{flex:none;font-size:7.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--reticle-bad);opacity:.75;padding-top:2px;}
+[data-reticle-log] .reticle-res.reticle-pass{display:none;}
+[data-reticle-log-row][data-kind="human"]{align-self:flex-end;max-width:78%;margin:6px 0 2px;
+  padding:8px 12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
+  border-radius:16px 16px 4px 16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
+[data-reticle-log-row][data-kind="human"] .reticle-log-text{color:var(--reticle-fg);font-size:12px;line-height:1.45;}
 `;
+/**
+ * Pin the feed to its newest row.
+ *
+ * Called on append AND when the chat is opened, because a hidden panel has no layout: rows added
+ * while it was minimised could not scroll it, so opening it showed the OLDEST row and the latest
+ * activity - the reason to open it - was somewhere below the fold.
+ */
+export function scrollLogToLatest(container) {
+    container.scrollTop = container.scrollHeight;
+}
+/**
+ * Pin the feed to its newest row once the panel has actually laid out.
+ *
+ * A single frame is not enough on open: the rows carry `content-visibility:auto`, so their real
+ * heights arrive after the first paint and `scrollHeight` keeps growing under a scroll that has
+ * already happened - the feed landed a third of the way down instead of at the end. Two frames
+ * plus one settle pass costs nothing and lands on the last row.
+ */
+export function settleLogAtLatest(container) {
+    scrollLogToLatest(container);
+    requestAnimationFrame(() => {
+        scrollLogToLatest(container);
+        requestAnimationFrame(() => scrollLogToLatest(container));
+    });
+    nativeSetTimeout(() => scrollLogToLatest(container), LOG_SETTLE_MS);
+}
 /** Clamp a logMax option to a sane positive integer, falling back to the default. */
 export function clampLogMax(n) {
     if (n === undefined || !Number.isFinite(n) || n <= 0)
@@ -64,7 +125,7 @@ export function clampLogMax(n) {
     return Math.floor(n);
 }
 /**
- * Pure, human-readable duration ("3s", "47s", "2m", "1h 4m") — no clock read, so it stays
+ * Pure, human-readable duration ("3s", "47s", "2m", "1h 4m") - no clock read, so it stays
  * deterministic in tests. Used for both the per-row timestamp (time since session start) and the
  * live "idle · {duration} since last action" heartbeat. Sub-second reads as "0s".
  */
@@ -92,24 +153,49 @@ export function appendLogRow(container, kind, text, ts, logMax) {
     row.setAttribute(DATA_RETICLE_LOG_ROW, '');
     row.setAttribute(DATA_KIND, kind); // styles the human row as an accent chat bubble
     const tsEl = document.createElement('span');
-    tsEl.setAttribute(DATA_RETICLE_LOG_TS, '');
+    tsEl.setAttribute(LOG_TIME_ATTR, '');
     tsEl.textContent = ts;
-    const chip = document.createElement('span');
-    chip.className = LOG_CHIP_CLASS;
-    chip.setAttribute('data-mode', LOG_CHIP_MODE[kind]);
-    chip.textContent = LOG_CHIP[kind];
+    const rowNodes = [];
+    if (kind !== LOG_KIND.HUMAN)
+        rowNodes.push(tsEl);
+    const chipLabelText = LOG_CHIP[kind];
+    const chipIcon = LOG_CHIP_ICON[kind];
+    if (chipLabelText.length > 0 || chipIcon !== undefined) {
+        const chip = document.createElement('span');
+        chip.className = LOG_CHIP_CLASS;
+        chip.setAttribute('data-mode', LOG_CHIP_MODE[kind]);
+        if (chipIcon !== undefined)
+            chip.appendChild(hiIcon(chipIcon, PRESENTER_ICON_SIZE.LOG));
+        if (chipLabelText.length > 0) {
+            const chipLabel = document.createElement('span');
+            chipLabel.className = 'reticle-chip-label';
+            chipLabel.textContent = chipLabelText;
+            chip.appendChild(chipLabel);
+        }
+        rowNodes.push(chip);
+    }
     const textEl = document.createElement('span');
     textEl.className = LOG_TEXT_CLASS;
     textEl.textContent = text;
     const resEl = document.createElement('span');
     resEl.className = LOG_RES_CLASS;
-    row.append(tsEl, chip, textEl, resEl);
+    rowNodes.push(textEl);
+    if (kind !== LOG_KIND.HUMAN)
+        rowNodes.push(resEl);
+    row.append(...rowNodes);
     container.appendChild(row);
     while (container.childElementCount > logMax)
         container.firstElementChild?.remove();
-    container.scrollTop = container.scrollHeight;
+    requestAnimationFrame(() => {
+        scrollLogToLatest(container);
+    });
     return {
         result: (r) => {
+            if (r === LOG_RESULT.PASS) {
+                resEl.textContent = '';
+                resEl.className = `${LOG_RES_CLASS} ${RESULT_CLASS.pass}`;
+                return;
+            }
             resEl.textContent = ` ${RESULT_GLYPH[r]}`;
             resEl.className = `${LOG_RES_CLASS} ${RESULT_CLASS[r]}`;
         },

package/dist/presenter/presenter-report-copy.d.ts

@@ -0,0 +1,83 @@
+import { type ImpactScope, type ImpactSnapshot } from '@reticlehq/core';
+/**
+ * What the report SAYS, kept away from how it looks.
+ *
+ * The wording here is the product's only claim about its own worth, so it is written once, in one
+ * place, and tested. Two audiences, two registers:
+ *
+ *  - The REPORT is private. It is the user's own data, so it can carry everything, estimates
+ *    included, as long as each estimate shows what it is measured against.
+ *  - The SHARE card is public, and the research on developer stat-cards is blunt about what happens
+ *    to a public card that leads with vendor savings: estimated token/time savings are the most
+ *    mocked class of number in AI tooling (JetBrains measured ~10% against a viral 65% claim), and
+ *    percentiles without a denominator get called misleading. So the card leads with what the
+ *    user's own setup CAUGHT, and publishes its unknowns - the credibility move, and the thing a
+ *    scoreboard would never do.
+ */
+/** Reticle's own links, as they appear in the report footer. */
+export declare const REPORT_LINKS: {
+    readonly DOCS: "https://docs.reticle.sh";
+    readonly SITE: "https://reticle.sh";
+    readonly GITHUB: "https://github.com/reticlehq/reticle";
+    readonly DISCORD: "https://discord.gg/BwAbzv9ZRz";
+};
+/**
+ * The X handle used for `via=` on a share.
+ *
+ * Empty until somebody who owns the account fills it in, and the share URL omits the parameter
+ * while it is - a guessed handle credits a stranger, and there is no way for code to know.
+ */
+export declare const SHARE_VIA_HANDLE = "";
+export declare const REPORT_TEXT: {
+    readonly TITLE: "Impact";
+    readonly PROJECT: "This project";
+    readonly GLOBAL: "Everything on this machine";
+    readonly HERO_DEFECTS: "defects caught before you saw them";
+    readonly VERDICTS: "Verdicts";
+    readonly PASSED: "passed";
+    readonly FAILED: "failed";
+    readonly UNKNOWN: "unknown";
+    readonly UNKNOWN_HELP: "Reticle drove the app and could not tell what happened. Not a pass - shown, not hidden.";
+    readonly CALLS: "Tool calls";
+    readonly TOKENS: "Tokens returned";
+    readonly DRIVING: "Time driving";
+    readonly SESSIONS: "Sessions";
+    readonly STREAK: "day streak";
+    readonly LONGEST: "Longest run";
+    readonly SAVED_TOKENS: "Tokens saved";
+    readonly SAVED_MINUTES: "Time saved";
+    readonly ESTIMATE_TAG: "estimate";
+    readonly CHART: "Verdicts, last 30 days";
+    readonly EMPTY: "Nothing recorded yet. Drive the app once and this fills in.";
+    readonly SHARE: "Share";
+    readonly COPY: "Copy";
+    readonly COPIED: "Copied";
+    readonly REFER: "Send to a friend";
+};
+/** "4.2k", "1.3M" - a number a person reads at a glance rather than counts digits in. */
+export declare function compactNumber(n: number): string;
+/** "2h 14m", "47m", "38s" - the same duration vocabulary the activity strip uses. */
+export declare function compactDuration(ms: number): string;
+/**
+ * The post itself.
+ *
+ * Leads with defects caught, then the verdict split INCLUDING unknowns, then the superlative. No
+ * estimated savings, no percentile, no leaderboard: those are the four things the evidence says get
+ * a dev-tool card mocked rather than shared.
+ */
+export declare function buildShareText(scope: ImpactScope, projectName?: string): string;
+/** X share intent. `via` is omitted while no handle is configured. */
+export declare function buildXShareUrl(text: string): string;
+/**
+ * LinkedIn share.
+ *
+ * `share-offsite` takes a url and NOTHING else - the title/summary parameters were deprecated in
+ * 2018 and are ignored, so the caption has to reach the composer some other way. The report copies
+ * it to the clipboard before opening this, which is the only path that works without asking the
+ * user for posting permissions.
+ */
+export declare function buildLinkedInShareUrl(): string;
+/** What a referral says: the tool, not the sender's numbers. */
+export declare function buildReferralText(): string;
+/** Narrow an unknown push payload to a snapshot. Invalid shapes are ignored, never rendered. */
+export declare function parseImpactSnapshot(value: unknown): ImpactSnapshot | undefined;

package/dist/presenter/presenter-report-copy.js

@@ -0,0 +1,127 @@
+import { ImpactSnapshotSchema } from '@reticlehq/core';
+/**
+ * What the report SAYS, kept away from how it looks.
+ *
+ * The wording here is the product's only claim about its own worth, so it is written once, in one
+ * place, and tested. Two audiences, two registers:
+ *
+ *  - The REPORT is private. It is the user's own data, so it can carry everything, estimates
+ *    included, as long as each estimate shows what it is measured against.
+ *  - The SHARE card is public, and the research on developer stat-cards is blunt about what happens
+ *    to a public card that leads with vendor savings: estimated token/time savings are the most
+ *    mocked class of number in AI tooling (JetBrains measured ~10% against a viral 65% claim), and
+ *    percentiles without a denominator get called misleading. So the card leads with what the
+ *    user's own setup CAUGHT, and publishes its unknowns - the credibility move, and the thing a
+ *    scoreboard would never do.
+ */
+/** Reticle's own links, as they appear in the report footer. */
+export const REPORT_LINKS = {
+    DOCS: 'https://docs.reticle.sh',
+    SITE: 'https://reticle.sh',
+    GITHUB: 'https://github.com/reticlehq/reticle',
+    DISCORD: 'https://discord.gg/BwAbzv9ZRz',
+};
+/**
+ * The X handle used for `via=` on a share.
+ *
+ * Empty until somebody who owns the account fills it in, and the share URL omits the parameter
+ * while it is - a guessed handle credits a stranger, and there is no way for code to know.
+ */
+export const SHARE_VIA_HANDLE = '';
+export const REPORT_TEXT = {
+    TITLE: 'Impact',
+    PROJECT: 'This project',
+    GLOBAL: 'Everything on this machine',
+    HERO_DEFECTS: 'defects caught before you saw them',
+    VERDICTS: 'Verdicts',
+    PASSED: 'passed',
+    FAILED: 'failed',
+    UNKNOWN: 'unknown',
+    UNKNOWN_HELP: 'Reticle drove the app and could not tell what happened. Not a pass - shown, not hidden.',
+    CALLS: 'Tool calls',
+    TOKENS: 'Tokens returned',
+    DRIVING: 'Time driving',
+    SESSIONS: 'Sessions',
+    STREAK: 'day streak',
+    LONGEST: 'Longest run',
+    SAVED_TOKENS: 'Tokens saved',
+    SAVED_MINUTES: 'Time saved',
+    ESTIMATE_TAG: 'estimate',
+    CHART: 'Verdicts, last 30 days',
+    EMPTY: 'Nothing recorded yet. Drive the app once and this fills in.',
+    SHARE: 'Share',
+    COPY: 'Copy',
+    COPIED: 'Copied',
+    REFER: 'Send to a friend',
+};
+/** "4.2k", "1.3M" - a number a person reads at a glance rather than counts digits in. */
+export function compactNumber(n) {
+    if (n < 1000)
+        return String(Math.round(n));
+    if (n < 1_000_000)
+        return `${trim(n / 1000)}k`;
+    return `${trim(n / 1_000_000)}M`;
+}
+function trim(n) {
+    return n >= 10 ? String(Math.round(n)) : String(Math.round(n * 10) / 10);
+}
+/** "2h 14m", "47m", "38s" - the same duration vocabulary the activity strip uses. */
+export function compactDuration(ms) {
+    const s = Math.floor(ms / 1000);
+    if (s < 60)
+        return `${String(s)}s`;
+    const m = Math.floor(s / 60);
+    if (m < 60)
+        return `${String(m)}m`;
+    const h = Math.floor(m / 60);
+    return 0 === m % 60 ? `${String(h)}h` : `${String(h)}h ${String(m % 60)}m`;
+}
+/**
+ * The post itself.
+ *
+ * Leads with defects caught, then the verdict split INCLUDING unknowns, then the superlative. No
+ * estimated savings, no percentile, no leaderboard: those are the four things the evidence says get
+ * a dev-tool card mocked rather than shared.
+ */
+export function buildShareText(scope, projectName) {
+    const c = scope.counts;
+    const where = projectName !== undefined && projectName.length > 0 ? ` on ${projectName}` : '';
+    const lines = [
+        `My agent verified its own work ${String(c.verdicts)} times${where}.`,
+        `${String(c.failed)} defects caught before I looked at any of them.`,
+    ];
+    if (c.unknown > 0) {
+        lines.push(`${String(c.unknown)} came back "unknown" - it drove the app and could not tell. That is the number I watch.`);
+    }
+    if (scope.records.longestRunMs > 0) {
+        lines.push(`Longest unattended run: ${compactDuration(scope.records.longestRunMs)}.`);
+    }
+    return lines.join('\n');
+}
+/** X share intent. `via` is omitted while no handle is configured. */
+export function buildXShareUrl(text) {
+    const params = new URLSearchParams({ text, url: REPORT_LINKS.SITE });
+    if (SHARE_VIA_HANDLE.length > 0)
+        params.set('via', SHARE_VIA_HANDLE);
+    return `https://twitter.com/intent/tweet?${params.toString()}`;
+}
+/**
+ * LinkedIn share.
+ *
+ * `share-offsite` takes a url and NOTHING else - the title/summary parameters were deprecated in
+ * 2018 and are ignored, so the caption has to reach the composer some other way. The report copies
+ * it to the clipboard before opening this, which is the only path that works without asking the
+ * user for posting permissions.
+ */
+export function buildLinkedInShareUrl() {
+    return `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(REPORT_LINKS.SITE)}`;
+}
+/** What a referral says: the tool, not the sender's numbers. */
+export function buildReferralText() {
+    return `I have been verifying my agent's work from inside the running app with Reticle - it returns pass/fail with the file:line to fix. ${REPORT_LINKS.SITE}`;
+}
+/** Narrow an unknown push payload to a snapshot. Invalid shapes are ignored, never rendered. */
+export function parseImpactSnapshot(value) {
+    const parsed = ImpactSnapshotSchema.safeParse(value);
+    return parsed.success ? parsed.data : undefined;
+}

package/dist/presenter/presenter-report-styles.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The impact report's surface.
+ *
+ * Same glass as the chat panel and anchored in the same slot above the toolbar, because it is the
+ * same object seen a different way: what this session is doing, and what every session has done.
+ */
+export declare const REPORT_CSS: string;

package/dist/presenter/presenter-report-styles.js

@@ -0,0 +1,102 @@
+import { HUD_DROP_SHADOW } from './presenter-hud-chrome.js';
+import { DOCK_ALIGN_ATTR, DOCK_ATTR, REPORT_ATTR, REPORT_PANEL_ATTR } from './presenter-config.js';
+const OVERLAY = 'data-reticle-overlay';
+/**
+ * The impact report's surface.
+ *
+ * Same glass as the chat panel and anchored in the same slot above the toolbar, because it is the
+ * same object seen a different way: what this session is doing, and what every session has done.
+ */
+export const REPORT_CSS = `
+[${REPORT_PANEL_ATTR}]{
+  position:absolute;right:0;left:auto;bottom:calc(100% + 12px);z-index:31;
+  box-sizing:border-box;display:flex;flex-direction:column;width:var(--reticle-dock-w);
+  max-width:min(var(--reticle-dock-w),calc(100vw - 16px));max-height:calc(100vh - 140px);
+  opacity:0;visibility:hidden;transform:translate3d(0,6px,0) scale(.98);pointer-events:none;
+  border-radius:16px;border:1px solid color-mix(in srgb,var(--reticle-c-active) 26%,rgba(255,255,255,.1));
+  background:
+    radial-gradient(130% 90% at 50% 0%,color-mix(in srgb,var(--reticle-c-active) 18%,transparent),transparent 62%),
+    linear-gradient(180deg,rgba(13,15,22,.96),rgba(19,22,32,.94));
+  box-shadow:${HUD_DROP_SHADOW},0 0 54px -18px var(--reticle-c-active);
+  color:var(--reticle-fg);font-family:var(--reticle-font);
+  transition:opacity .18s ease,transform .18s ease,visibility .18s;}
+[${DOCK_ATTR}][${DOCK_ALIGN_ATTR}="start"] [${REPORT_PANEL_ATTR}]{right:auto;left:0;}
+[${OVERLAY}][${REPORT_ATTR}="1"] [${REPORT_PANEL_ATTR}]{
+  opacity:1;visibility:visible;transform:translate3d(0,0,0) scale(1);pointer-events:auto;}
+[${REPORT_PANEL_ATTR}] .reticle-report-inner{
+  display:flex;flex-direction:column;min-height:0;overflow:hidden;}
+[${REPORT_PANEL_ATTR}] .reticle-report-head{
+  flex:none;display:flex;align-items:center;gap:8px;padding:11px 12px 9px 14px;
+  border-bottom:1px solid rgba(255,255,255,.06);}
+[${REPORT_PANEL_ATTR}] .reticle-report-title{font-size:12.5px;font-weight:600;}
+[${REPORT_PANEL_ATTR}] .reticle-report-scope{
+  margin-left:auto;padding:3px 9px;border-radius:999px;cursor:pointer;
+  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);
+  color:var(--reticle-muted);font:inherit;font-size:10.5px;}
+[${REPORT_PANEL_ATTR}] .reticle-report-scope:hover{background:rgba(255,255,255,.08);color:var(--reticle-fg);}
+[${REPORT_PANEL_ATTR}] .reticle-report-close{
+  flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
+  border:none;background:transparent;color:var(--reticle-faint);cursor:pointer;line-height:0;}
+[${REPORT_PANEL_ATTR}] .reticle-report-close svg{display:block;fill:none;stroke:currentColor;stroke-width:1.6;}
+[${REPORT_PANEL_ATTR}] .reticle-report-body{
+  min-height:0;overflow-y:auto;padding:12px 14px 6px;
+  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent;}
+[${REPORT_PANEL_ATTR}] .reticle-report-empty{
+  margin:0;padding:22px 6px;text-align:center;color:var(--reticle-faint);font-size:11.5px;}
+/* The streak sits above the hero, as a flame and a number: it is the one stat that is about
+   TODAY, so it reads first and never competes with the count it sits over. */
+[${REPORT_PANEL_ATTR}] .reticle-report-streak{
+  display:inline-flex;align-items:baseline;gap:5px;margin-bottom:8px;padding:3px 9px;
+  border-radius:999px;background:rgba(255,255,255,.05);
+  border:1px solid color-mix(in srgb,var(--reticle-c-active) 22%,transparent);
+  font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;}
+[${REPORT_PANEL_ATTR}] .reticle-report-streak-label{
+  color:var(--reticle-faint);font-size:9.5px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;}
+[${REPORT_PANEL_ATTR}] .reticle-report-hero{display:flex;flex-direction:column;gap:2px;margin-bottom:10px;}
+[${REPORT_PANEL_ATTR}] .reticle-report-hero-value{
+  font-size:34px;font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--reticle-c-active);}
+[${REPORT_PANEL_ATTR}] .reticle-report-hero-label{color:var(--reticle-muted);font-size:11.5px;}
+[${REPORT_PANEL_ATTR}] .reticle-report-verdicts{display:flex;gap:6px;margin-bottom:12px;}
+[${REPORT_PANEL_ATTR}] .reticle-report-verdict{
+  flex:1;padding:5px 8px;border-radius:8px;font-size:10.5px;text-align:center;
+  background:rgba(255,255,255,.05);color:var(--reticle-muted);}
+[${REPORT_PANEL_ATTR}] .reticle-report-verdict[data-kind="fail"]{color:#fca5a5;}
+[${REPORT_PANEL_ATTR}] .reticle-report-verdict[data-kind="unknown"]{color:#fcd34d;}
+[${REPORT_PANEL_ATTR}] .reticle-report-grid{
+  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
+[${REPORT_PANEL_ATTR}] .reticle-report-card{
+  display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:10px;
+  background:rgba(255,255,255,.04);}
+[${REPORT_PANEL_ATTR}] .reticle-report-value{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;}
+[${REPORT_PANEL_ATTR}] .reticle-report-label{color:var(--reticle-faint);font-size:9.5px;line-height:1.3;}
+/* An estimate is labelled as one, and its label carries what it is measured against. */
+[${REPORT_PANEL_ATTR}] .reticle-report-basis{
+  display:block;margin-top:2px;color:var(--reticle-c-active);opacity:.8;
+  font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;cursor:help;}
+[${REPORT_PANEL_ATTR}] .reticle-report-chart-wrap{margin-top:12px;}
+[${REPORT_PANEL_ATTR}] .reticle-report-section{
+  display:block;margin-bottom:6px;color:var(--reticle-faint);font-size:9.5px;
+  letter-spacing:.06em;text-transform:uppercase;}
+/* Thirty fixed slots, not a flex row: one recorded day is one thin bar on a month's axis, and a
+   single stretched block would read as "a month of solid work" on the day you install it. */
+[${REPORT_PANEL_ATTR}] .reticle-report-chart{
+  display:grid;grid-template-columns:repeat(30,1fr);align-items:end;gap:2px;height:44px;padding:0 1px;}
+[${REPORT_PANEL_ATTR}] .reticle-report-bar{
+  min-width:2px;border-radius:2px 2px 0 0;
+  background:color-mix(in srgb,var(--reticle-c-active) 55%,transparent);}
+[${REPORT_PANEL_ATTR}] .reticle-report-bar[data-hot="1"]{background:#f87171;}
+[${REPORT_PANEL_ATTR}] .reticle-report-foot{
+  flex:none;display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px 8px;
+  border-top:1px solid rgba(255,255,255,.06);}
+[${REPORT_PANEL_ATTR}] .reticle-report-share{
+  padding:5px 10px;border-radius:8px;cursor:pointer;font:inherit;font-size:11px;
+  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:var(--reticle-muted);}
+[${REPORT_PANEL_ATTR}] .reticle-report-share:hover{background:rgba(255,255,255,.09);color:var(--reticle-fg);}
+[${REPORT_PANEL_ATTR}] .reticle-report-refer{
+  border-color:color-mix(in srgb,var(--reticle-c-active) 45%,transparent);color:var(--reticle-fg);}
+[${REPORT_PANEL_ATTR}] .reticle-report-links{
+  flex:none;display:flex;gap:12px;padding:0 14px 12px;}
+[${REPORT_PANEL_ATTR}] .reticle-report-links a{
+  color:var(--reticle-faint);font-size:10.5px;text-decoration:none;}
+[${REPORT_PANEL_ATTR}] .reticle-report-links a:hover{color:var(--reticle-fg);text-decoration:underline;}
+`;

package/dist/presenter/presenter-report.d.ts

@@ -0,0 +1,23 @@
+import type { ImpactScope, ImpactSnapshot } from '@reticlehq/core';
+export declare function reportPanelHtml(): string;
+export declare function reportBodyHtml(scope: ImpactScope): string;
+export interface ReportHost {
+    /** Opened from the toolbar and from the chat, so the shell decides what else must close. */
+    onBeforeOpen?: () => void;
+}
+/** The report panel controller: scope toggle, live repaint, share + referral actions. */
+export declare class PresenterReport {
+    #private;
+    constructor(host?: ReportHost);
+    mount(root: HTMLElement): void;
+    /** The record arrived from the daemon. Repaint only if the panel is on screen. */
+    setSnapshot(snapshot: ImpactSnapshot): void;
+    snapshot(): ImpactSnapshot | undefined;
+    isOpen(): boolean;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    contains(node: Node): boolean;
+    /** The post text for whichever scope is showing. */
+    shareText(): string;
+}