@reticlehq/browser 2.8.0 → 2.9.0

package/dist/presenter/presenter-styles.js

@@ -1,137 +1,73 @@
 import { LOG_CSS } from './presenter-log.js';
 import { CONTROLS_CSS } from './presenter-controls.js';
+import { SHELL_CSS } from './presenter-shell-styles.js';
+import { SETTINGS_CSS } from './presenter-settings-styles.js';
+import { HUD_CHROME_CSS, HUD_LOG_WELL_CSS } from './presenter-hud-chrome.js';
+import { REPORT_CSS } from './presenter-report-styles.js';
 /**
- * All presenter overlay CSS — the glow border, synthetic cursor/ring/ripple, and the glassy HUD.
- * Split out of presenter.ts so that file stays a cohesive controller under the size cap; this is
- * pure style data (no behavior). LOG_CSS + CONTROLS_CSS are composed in at the end as before.
+ * All presenter overlay CSS - glow border, synthetic cursor/ring/ripple, and the floating HUD shell.
+ * Split across shell-styles + controls + log modules so each file stays under the size cap.
  */
-// No web-font @import: a dev-only SDK must not make the host page issue a cross-origin request to
-// fonts.googleapis.com (and trip a `style-src 'self'` CSP with a console violation) just for HUD
-// polish. The font var below already prefers Inter if present and falls back to the system stack
-// otherwise — so the overlay stays self-contained and never touches the network.
+/**
+ * The presenter overlay's stacking layer. Exported because the annotator has to sit ABOVE it: the
+ * overlay holds the page blocker, and anything below this number is covered by that shield - which
+ * is what buried the annotate composer and made its Cancel/Add buttons unclickable.
+ */
+export const Z_OVERLAY = 2147483600;
 export const PRESENTER_CSS = `
-[data-reticle-glow]{position:fixed;inset:0;pointer-events:none;z-index:2147483600;opacity:0;
-  transition:opacity .25s ease;box-shadow:inset 0 0 0 3px rgba(99,102,241,.9),inset 0 0 28px 6px rgba(99,102,241,.45);}
-[data-reticle-glow][data-on="1"]{opacity:1;animation:reticle-pulse 1.6s ease-in-out infinite;}
+[data-reticle-overlay]{position:fixed;inset:0;pointer-events:none;z-index:${String(Z_OVERLAY)};}
+/**
+ * The session glow: the page itself says an agent is here, and BREATHES while it is working.
+ *
+ * A white 1px hairline with no animation replaced the accent-coloured, pulsing border, and the one
+ * signal you could read without looking at the HUD - "something is driving my app right now" -
+ * disappeared with it. The accent follows the HUD's own swatch (--reticle-mark-accent, set on the
+ * overlay root), so glow, cursor and dock stay one colour.
+ */
+[data-reticle-glow]{position:fixed;inset:0;pointer-events:none;z-index:${String(Z_OVERLAY)};opacity:0;
+  --reticle-glow:var(--reticle-state,var(--reticle-mark-accent,#6366f1));
+  transition:opacity .25s ease;
+  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--reticle-glow) 70%,transparent),
+    inset 0 0 22px 4px color-mix(in srgb,var(--reticle-glow) 26%,transparent);}
+[data-reticle-glow][data-on="1"]{opacity:1;animation:reticle-pulse 2.4s ease-in-out infinite;}
 [data-reticle-glow][data-on="1"][data-busy="1"]{animation:reticle-shimmer 1.1s ease-in-out infinite;}
-@keyframes reticle-pulse{0%,100%{box-shadow:inset 0 0 0 3px rgba(99,102,241,.9),inset 0 0 22px 4px rgba(99,102,241,.35)}
-  50%{box-shadow:inset 0 0 0 3px rgba(124,127,242,1),inset 0 0 40px 10px rgba(99,102,241,.6)}}
-@keyframes reticle-shimmer{0%,100%{box-shadow:inset 0 0 0 3px rgba(124,127,242,1),inset 0 0 34px 8px rgba(99,102,241,.55)}
-  50%{box-shadow:inset 0 0 0 3px rgba(140,142,255,1),inset 0 0 48px 12px rgba(99,102,241,.7)}}
-[data-reticle-cursor]{position:fixed;top:0;left:0;width:22px;height:22px;margin:-11px 0 0 -11px;
-  border:2px solid #6366f1;border-radius:50%;background:rgba(99,102,241,.25);pointer-events:none;
+@keyframes reticle-pulse{
+  0%,100%{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--reticle-glow) 60%,transparent),
+    inset 0 0 18px 3px color-mix(in srgb,var(--reticle-glow) 18%,transparent)}
+  50%{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--reticle-glow) 80%,transparent),
+    inset 0 0 30px 6px color-mix(in srgb,var(--reticle-glow) 32%,transparent)}}
+@keyframes reticle-shimmer{
+  0%,100%{box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--reticle-glow) 85%,transparent),
+    inset 0 0 30px 7px color-mix(in srgb,var(--reticle-glow) 42%,transparent)}
+  50%{box-shadow:inset 0 0 0 3px var(--reticle-glow),
+    inset 0 0 46px 12px color-mix(in srgb,var(--reticle-glow) 58%,transparent)}}
+[data-reticle-overlay][data-reticle-reduce-motion="1"] [data-reticle-glow][data-on="1"]{animation:none;}
+/* The page glow is the one signal that paints over the USER's app, so it is theirs to switch off.
+   Every other signal - dot, panel, capsule, FAB halo - stays. */
+[data-reticle-overlay][data-reticle-ambient-glow="0"] [data-reticle-glow]{display:none;}
+[data-reticle-cursor]{position:fixed;top:0;left:0;width:20px;height:20px;margin:-10px 0 0 -10px;
+  border:2px solid #fafafa;border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none;
   z-index:2147483646;opacity:0;transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .2s ease;}
 [data-reticle-cursor][data-on="1"]{opacity:1;}
-[data-reticle-cursor]::after{content:"";position:absolute;inset:7px;border-radius:50%;background:#6366f1;}
-[data-reticle-ripple]{position:fixed;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
-  background:rgba(99,102,241,.5);pointer-events:none;z-index:2147483645;animation:reticle-ripple .5s ease-out forwards;}
-@keyframes reticle-ripple{from{transform:scale(.4);opacity:.8}to{transform:scale(5);opacity:0}}
-[data-reticle-ring]{position:fixed;pointer-events:none;z-index:2147483644;border:2px solid #22c55e;border-radius:8px;
-  box-shadow:0 0 0 3px rgba(34,197,94,.25);opacity:0;transition:opacity .15s ease;}
+[data-reticle-cursor]::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#fafafa;}
+[data-reticle-ripple]{position:fixed;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
+  background:rgba(255,255,255,.35);pointer-events:none;z-index:2147483645;animation:reticle-ripple .45s ease-out forwards;}
+@keyframes reticle-ripple{from{transform:scale(.5);opacity:.7}to{transform:scale(4);opacity:0}}
+[data-reticle-ring]{position:fixed;pointer-events:none;z-index:2147483644;border:1px solid rgba(255,255,255,.55);border-radius:6px;
+  box-shadow:none;opacity:0;transition:opacity .15s ease;}
 [data-reticle-ring][data-on="1"]{opacity:1;}
-[data-reticle-hud]{
-  --reticle-accent:#7c83ff;--reticle-accent-soft:rgba(124,131,255,.16);
-  --reticle-bg:rgba(13,15,22,.92);--reticle-bg2:rgba(19,22,32,.88);
-  --reticle-fg:#e9ebf2;--reticle-muted:#9aa0b2;--reticle-faint:#6a7186;
-  --reticle-line:rgba(255,255,255,.09);--reticle-line2:rgba(255,255,255,.05);
-  --reticle-read:#54d2e6;--reticle-ok:#3dd7a6;--reticle-bad:#ff7a7a;
-  --reticle-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
-  position:fixed;left:50%;right:auto;bottom:20px;box-sizing:border-box;
-  width:384px;height:468px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);
-  display:flex;flex-direction:column;overflow:hidden;text-align:left;z-index:2147483647;pointer-events:none;
-  font-family:var(--reticle-font);font-size:13px;line-height:1.5;color:var(--reticle-fg);-webkit-font-smoothing:antialiased;
-  background:linear-gradient(180deg,var(--reticle-bg),var(--reticle-bg2));
-  /* No backdrop-filter here, deliberately. blur(24px) on this panel was measured as the single most
-     expensive thing the whole SDK does: a backdrop blur must re-sample everything behind it whenever
-     that content changes, and on a page repainting at 60fps that is continuous full-panel work. On
-     the hostile fixture it cost +4.0pp of main thread — five times the rest of the presenter, and
-     more than every observer combined. Removing it took total main-thread time from 2.15s to 1.67s
-     over an 8s window. The panel background is ~85% opaque, so the glass effect it bought was
-     marginal. If you want it back, add it here and expect to pay that. */
-  border:1px solid var(--reticle-line);border-radius:20px;
-  box-shadow:0 28px 70px -18px rgba(0,0,0,.66),0 0 0 1px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07),0 0 54px -22px var(--reticle-accent);
-  opacity:0;transform:translateX(-50%) translateY(14px) scale(.985);
-  transition:opacity .3s ease,transform .42s cubic-bezier(.16,1,.3,1),height .42s cubic-bezier(.16,1,.3,1),border-radius .42s ease,box-shadow .35s ease;}
-[data-reticle-overlay][data-reticle-state="paused"] [data-reticle-hud]{--reticle-accent:#f6b44c;--reticle-accent-soft:rgba(246,180,76,.16);}
-[data-reticle-overlay][data-reticle-state="ended"] [data-reticle-hud]{--reticle-accent:#3dd7a6;--reticle-accent-soft:rgba(61,215,166,.14);}
-[data-reticle-hud]::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
-  background:radial-gradient(130% 90% at 50% 0%,var(--reticle-accent-soft),transparent 60%);}
-[data-reticle-hud]>*{position:relative;}
-[data-reticle-hud][data-on="1"]{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
-/* Click-through: the glassy panel itself never blocks the app — only its interactive controls
-   capture clicks (buttons / inputs), so a human can click straight through the HUD to the page.
-   The log auto-scrolls, so it stays click-through too (drag-scroll is traded for click-through). */
-[data-reticle-hud] button,[data-reticle-hud] input,[data-reticle-hud] textarea,
-[data-reticle-hud] select,[data-reticle-hud] [contenteditable]{pointer-events:auto;}
-/* When minimised to a pill, the whole bar is the (single) click target to restore. */
-[data-reticle-overlay][data-reticle-min="1"] [data-reticle-hud][data-on="1"]{pointer-events:auto;}
-[data-reticle-hud] .reticle-hud-head{display:flex;align-items:center;gap:8px;flex:none;
-  padding:12px 12px 12px 15px;border-bottom:1px solid var(--reticle-line2);}
-/* Brand block: both marks always in the DOM, CSS picks one off data-reticle-min (see below) so the
-   collapsed/expanded swap needs no JS state. Artwork paints with currentColor, so it inherits
-   --reticle-fg and reads correctly on any HUD surface instead of baking in the export's #FAFAFA. */
-[data-reticle-hud] .reticle-brand{display:inline-flex;align-items:center;flex:none;color:var(--reticle-fg);}
-[data-reticle-hud] .reticle-mark{display:none;height:18px;width:auto;flex:none;}
-[data-reticle-hud] .reticle-wordmark{display:block;height:16px;width:auto;flex:none;}
-/* Visually hidden, still announced — the marks are aria-hidden artwork, this names the HUD. */
-[data-reticle-hud] .reticle-brand-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
-  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
-[data-reticle-hud] .reticle-head-sp{flex:1;}
-[data-reticle-hud] .reticle-live{display:none;flex:1;min-width:0;color:var(--reticle-muted);font-size:12.5px;
-  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
-[data-reticle-hud] .reticle-maxhint{display:none;flex:none;color:var(--reticle-faint);font-size:13px;line-height:1;}
-[data-reticle-hud] .reticle-act-strip{flex:none;padding:7px 15px;border-bottom:1px solid var(--reticle-line2);background:rgba(0,0,0,.14);}
-[data-reticle-hud] .reticle-act{display:block;color:var(--reticle-muted);font-size:11.5px;
-  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
-[data-reticle-hud] [data-reticle-min-btn]{flex:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
-  width:26px;height:26px;border-radius:8px;border:1px solid var(--reticle-line);background:rgba(255,255,255,.04);
-  color:var(--reticle-muted);font-size:15px;line-height:1;transition:background .15s,color .15s,transform .1s;}
-[data-reticle-hud] [data-reticle-min-btn]:hover{color:var(--reticle-fg);background:rgba(255,255,255,.08);}
-[data-reticle-hud] [data-reticle-min-btn]:active{transform:scale(.94);}
-[data-reticle-hud] .reticle-pass{color:var(--reticle-ok);}[data-reticle-hud] .reticle-fail{color:var(--reticle-bad);}
-[data-reticle-hud] .reticle-tally{flex:none;display:inline-flex;align-items:center;gap:8px;font-size:11.5px;
-  font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.01em;}
-[data-reticle-hud] .reticle-tally[hidden]{display:none;}
-[data-reticle-hud] .reticle-tally .reticle-t-pass{color:var(--reticle-ok);}
-[data-reticle-hud] .reticle-tally .reticle-t-fail{color:var(--reticle-bad);}
-[data-reticle-hud] .reticle-tally [data-z="1"]{opacity:.4;}
-@keyframes reticle-tally-pop{0%{transform:scale(1)}38%{transform:scale(1.3)}100%{transform:scale(1)}}
-[data-reticle-hud] .reticle-tally [data-bump="1"]{display:inline-block;animation:reticle-tally-pop .36s cubic-bezier(.16,1,.3,1);}
-[data-reticle-hud] .reticle-chip{display:none;flex:none;font-size:9px;font-weight:600;letter-spacing:.08em;
-  padding:2px 7px;border-radius:6px;vertical-align:middle;}
-[data-reticle-hud] .reticle-chip[data-mode="reading"]{display:inline-block;color:var(--reticle-read);
-  background:rgba(84,210,230,.12);border:1px solid rgba(84,210,230,.32);}
-[data-reticle-hud] .reticle-chip[data-mode="acting"]{display:inline-block;color:var(--reticle-accent);
-  background:var(--reticle-accent-soft);border:1px solid var(--reticle-accent);}
-[data-reticle-hud] .reticle-chip[data-mode="idle"]{display:none;}
-[data-reticle-overlay][data-reticle-min="1"] [data-reticle-hud]{height:50px;border-radius:25px;cursor:pointer;}
-[data-reticle-overlay][data-reticle-min="1"] [data-reticle-hud] .reticle-hud-head{border-bottom:none;height:50px;padding:0 12px 0 16px;}
-[data-reticle-overlay][data-reticle-min="1"] [data-reticle-hud] .reticle-chip,
-[data-reticle-overlay][data-reticle-min="1"] [data-reticle-hud] .reticle-head-sp,
-[data-reticle-overlay][data-reticle-min="1"] [data-reticle-hud] [data-reticle-min-btn],
-[data-reticle-overlay][data-reticle-min="1"] [data-reticle-hud] .reticle-ctl,
-[data-reticle-overlay][data-reticle-min="1"] [data-reticle-hud] .reticle-badge,
-[data-reticle-overlay][data-reticle-min="1"] [data-reticle-hud] .reticle-act-strip,
-[data-reticle-overlay][data-reticle-min="1"] [data-reticle-hud] [data-reticle-log],
-[data-reticle-overlay][data-reticle-min="1"] [data-reticle-hud] [data-reticle-foot],
-[data-reticle-overlay][data-reticle-min="1"] [data-reticle-hud] .reticle-banner{display:none;}
-/* Collapsed to a pill: mark only, beside the dot. Expanded: the full wordmark. */
-[data-reticle-overlay][data-reticle-min="1"] [data-reticle-hud] .reticle-wordmark{display:none;}
-[data-reticle-overlay][data-reticle-min="1"] [data-reticle-hud] .reticle-mark{display:block;}
-[data-reticle-overlay][data-reticle-min="1"] [data-reticle-hud] .reticle-live{display:block;}
-[data-reticle-overlay][data-reticle-min="1"] [data-reticle-hud] .reticle-maxhint{display:inline-flex;}
-[data-reticle-mode="reading"] [data-reticle-glow][data-on="1"]{
-  box-shadow:inset 0 0 0 3px rgba(34,211,238,.9),inset 0 0 28px 6px rgba(34,211,238,.4);}
-[data-reticle-mode="reading"] [data-reticle-ring]{border-color:#22d3ee;
-  box-shadow:0 0 0 3px rgba(34,211,238,.25);}
+[data-reticle-mode="reading"] [data-reticle-glow][data-on="1"]{box-shadow:inset 0 0 0 2px rgba(255,255,255,.22);}
+[data-reticle-mode="reading"] [data-reticle-ring]{border-color:rgba(255,255,255,.7);box-shadow:none;}
 [data-reticle-overlay][data-reticle-throttled="1"] [data-reticle-glow][data-on="1"]{
-  box-shadow:inset 0 0 0 3px rgba(251,191,36,.9),inset 0 0 28px 6px rgba(251,191,36,.45);}
-[data-reticle-overlay][data-reticle-throttled="1"] [data-reticle-hud]{--reticle-accent:#fbbf24;--reticle-accent-soft:rgba(251,191,36,.16);}
-/* The two INFINITE animations — the header dot and the border glow — are pure decoration and were
-   blinking regardless of the user's motion preference. Everything else the presenter animates is a
-   one-shot (ripple, tally pop) or a transition, which reduce-motion tolerates. */
-@media (prefers-reduced-motion:reduce){
-  [data-reticle-glow][data-on="1"],
-  [data-reticle-glow][data-on="1"][data-busy="1"]{animation:none;}}
+  box-shadow:inset 0 0 0 2px rgba(255,255,255,.18);}
+[data-reticle-overlay] .reticle-hi-icon,
+[data-reticle-overlay] .reticle-sl-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0;color:inherit;overflow:visible;}
+[data-reticle-overlay] .reticle-hi-icon svg,
+[data-reticle-overlay] .reticle-sl-icon svg{display:block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible;}
+${HUD_CHROME_CSS}
+${HUD_LOG_WELL_CSS}
+${SHELL_CSS}
+${SETTINGS_CSS}
+${REPORT_CSS}
 ${LOG_CSS}
 ${CONTROLS_CSS}`;

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

@@ -1,19 +1,16 @@
 import { type LogResult } from './presenter-log.js';
-/** Running verdict counts the header tally shows — the testing score the human watches grow. */
+/**
+ * Paint the live verdict tally into a YouTube-style segmented pill (pass | fail).
+ */
+export declare function renderTally(el: HTMLElement | undefined, runLog: {
+    result?: LogResult;
+}[], prev: TallyCounts): TallyCounts;
+/** Running verdict counts the header tally shows - the testing score the human watches grow. */
 export interface TallyCounts {
     passes: number;
     fails: number;
 }
-/** Count pass/fail verdicts across the run log. Pure — no DOM, unit-testable. */
+/** Count pass/fail verdicts across the run log. Pure - no DOM, unit-testable. */
 export declare function countVerdicts(runLog: {
     result?: LogResult;
 }[]): TallyCounts;
-/**
- * Paint the live verdict tally (✓N ✗M) into the header element from the run log. Hidden until the
- * first verdict lands; the side that just GREW gets a one-shot pop so the human FEELS the green (or
- * red) arrive — the score they watch climb as the agent verifies. Returns the new counts so the
- * caller tracks what grew for the next paint. Split out of presenter.ts to keep the controller lean.
- */
-export declare function renderTally(el: HTMLElement | undefined, runLog: {
-    result?: LogResult;
-}[], prev: TallyCounts): TallyCounts;

package/dist/presenter/presenter-tally.js

@@ -1,21 +1,7 @@
 import { LOG_RESULT } from './presenter-log.js';
-/** Count pass/fail verdicts across the run log. Pure — no DOM, unit-testable. */
-export function countVerdicts(runLog) {
-    let passes = 0;
-    let fails = 0;
-    for (const e of runLog) {
-        if (e.result === LOG_RESULT.PASS)
-            passes += 1;
-        else if (e.result === LOG_RESULT.FAIL)
-            fails += 1;
-    }
-    return { passes, fails };
-}
+import { PresenterIcon, PRESENTER_ICON_SIZE, hiIcon } from './presenter-icons.js';
 /**
- * Paint the live verdict tally (✓N ✗M) into the header element from the run log. Hidden until the
- * first verdict lands; the side that just GREW gets a one-shot pop so the human FEELS the green (or
- * red) arrive — the score they watch climb as the agent verifies. Returns the new counts so the
- * caller tracks what grew for the next paint. Split out of presenter.ts to keep the controller lean.
+ * Paint the live verdict tally into a YouTube-style segmented pill (pass | fail).
  */
 export function renderTally(el, runLog, prev) {
     const next = countVerdicts(runLog);
@@ -23,15 +9,54 @@ export function renderTally(el, runLog, prev) {
         return next;
     if (0 === next.passes && 0 === next.fails) {
         el.setAttribute('hidden', '');
+        el.replaceChildren();
         return next;
     }
-    const bumpPass = next.passes > prev.passes ? ' data-bump="1"' : '';
-    const bumpFail = next.fails > prev.fails ? ' data-bump="1"' : '';
-    const dimP = 0 === next.passes ? ' data-z="1"' : '';
-    const dimF = 0 === next.fails ? ' data-z="1"' : '';
+    const doc = el.ownerDocument;
     el.removeAttribute('hidden');
-    el.innerHTML =
-        `<span class="reticle-t-pass"${dimP}${bumpPass}>✓ ${String(next.passes)}</span>` +
-            `<span class="reticle-t-fail"${dimF}${bumpFail}>✗ ${String(next.fails)}</span>`;
+    el.className = 'reticle-tally reticle-pill-group reticle-head-ctl';
+    el.replaceChildren();
+    const pass = doc.createElement('span');
+    pass.className = 'reticle-t-pass reticle-pill-segment';
+    if (0 === next.passes)
+        pass.setAttribute('data-z', '1');
+    if (next.passes > prev.passes)
+        pass.setAttribute('data-bump', '1');
+    pass.append(hiIcon(PresenterIcon.CHECK, PRESENTER_ICON_SIZE.TALLY));
+    if (next.passes > 0) {
+        const passN = doc.createElement('span');
+        passN.className = 'reticle-pill-count';
+        passN.textContent = String(next.passes);
+        pass.append(passN);
+    }
+    const sep = doc.createElement('span');
+    sep.className = 'reticle-pill-sep';
+    sep.setAttribute('aria-hidden', 'true');
+    const fail = doc.createElement('span');
+    fail.className = 'reticle-t-fail reticle-pill-segment';
+    if (0 === next.fails)
+        fail.setAttribute('data-z', '1');
+    if (next.fails > prev.fails)
+        fail.setAttribute('data-bump', '1');
+    fail.append(hiIcon(PresenterIcon.REMOVE, PRESENTER_ICON_SIZE.TALLY));
+    if (next.fails > 0) {
+        const failN = doc.createElement('span');
+        failN.className = 'reticle-pill-count';
+        failN.textContent = String(next.fails);
+        fail.append(failN);
+    }
+    el.append(pass, sep, fail);
     return next;
 }
+/** Count pass/fail verdicts across the run log. Pure - no DOM, unit-testable. */
+export function countVerdicts(runLog) {
+    let passes = 0;
+    let fails = 0;
+    for (const e of runLog) {
+        if (e.result === LOG_RESULT.PASS)
+            passes += 1;
+        else if (e.result === LOG_RESULT.FAIL)
+            fails += 1;
+    }
+    return { passes, fails };
+}

package/dist/presenter/presenter-test-helpers.d.ts

@@ -3,7 +3,7 @@ export declare const FAST_IDLE_MS = 20;
 export declare const FAST_FADE_MS = 5;
 export declare const flush: () => Promise<void>;
 export declare const wait: (ms: number) => Promise<void>;
-/** Poll a predicate until true or timeout — robust to real-timer lateness under load (no flake). */
+/** Poll a predicate until true or timeout - robust to real-timer lateness under load (no flake). */
 export declare const until: (pred: () => boolean, ms?: number) => Promise<boolean>;
 export declare const dataOn: () => string | null;
 export declare const dataBusy: () => string | null;

package/dist/presenter/presenter-test-helpers.js

@@ -3,7 +3,7 @@ export const FAST_IDLE_MS = 20;
 export const FAST_FADE_MS = 5;
 export const flush = () => new Promise((r) => setTimeout(r, 0));
 export const wait = (ms) => new Promise((r) => setTimeout(r, ms));
-/** Poll a predicate until true or timeout — robust to real-timer lateness under load (no flake). */
+/** Poll a predicate until true or timeout - robust to real-timer lateness under load (no flake). */
 export const until = async (pred, ms = 1000) => {
     const t0 = Date.now();
     while (!pred()) {

package/dist/presenter/presenter-verbs.js

@@ -1,9 +1,9 @@
 // Present-tense verb for an action label in the presenter HUD (cursor status + act-log row).
-// Presenter-only UI copy — never a wire string. Shared by presenter.ts (cursor) and reticle.ts
+// Presenter-only UI copy - never a wire string. Shared by presenter.ts (cursor) and reticle.ts
 // (act-log row) so the two stay in lockstep.
 //
 // The CASES are wire values though, and they are core's ActionType. Spelled as free strings here,
-// a rename in core left this switch silently falling through to `default` — which returns the raw
+// a rename in core left this switch silently falling through to `default` - which returns the raw
 // action name, so the HUD degrades to "webmcp Save" instead of a verb and nothing fails.
 import { ActionType } from '@reticlehq/core';
 export function actionVerb(action) {

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

@@ -0,0 +1,15 @@
+/** Read the Vite-injected repo root, when present. */
+export declare function readWorkspaceRoot(): string | undefined;
+/** Last path segment for compact display (Codex/Cursor-style chip). */
+export declare function workspaceFolderLabel(root: string): string;
+/** Project id from the URL lease stamp, when present. */
+export declare function readProjectIdFromUrl(): string | undefined;
+export declare function workspaceSummary(): {
+    folder: string;
+    root?: string;
+    projectId?: string;
+};
+/** Workspace chip + detail menu - sits above the composer row. */
+export declare function workspaceRowHtml(): string;
+export declare function paintWorkspace(root: HTMLElement): void;
+export declare function mountWorkspaceSelector(root: HTMLElement): () => void;

package/dist/presenter/presenter-workspace.js

@@ -0,0 +1,180 @@
+import { RETICLE_ROOT_GLOBAL, RETICLE_URL_PARAM } from '@reticlehq/core';
+import { PresenterIcon, PRESENTER_ICON_SIZE, hiIconHtml } from './presenter-icons.js';
+const WORKSPACE_BTN_ATTR = 'data-reticle-workspace-btn';
+const WORKSPACE_MENU_ATTR = 'data-reticle-workspace-menu';
+const WORKSPACE_NAME_ATTR = 'data-reticle-workspace-name';
+const WORKSPACE_PATH_ATTR = 'data-reticle-workspace-path';
+const WORKSPACE_PROJECT_ATTR = 'data-reticle-workspace-project';
+const WORKSPACE_COPY_ATTR = 'data-reticle-workspace-copy';
+const WORKSPACE_LABEL = 'Workspace';
+const PROJECT_LABEL = 'Project';
+const COPY_PATH_LABEL = 'Copy path';
+const COPIED_PATH_LABEL = 'Copied';
+const WORKSPACE_FALLBACK = 'This page';
+/** Read the Vite-injected repo root, when present. */
+export function readWorkspaceRoot() {
+    const value = globalThis[RETICLE_ROOT_GLOBAL];
+    return 'string' === typeof value && value.length > 0 ? value : undefined;
+}
+/** Last path segment for compact display (Codex/Cursor-style chip). */
+export function workspaceFolderLabel(root) {
+    const normalized = root.replace(/\\/g, '/').replace(/\/+$/, '');
+    const parts = normalized.split('/').filter((part) => part.length > 0);
+    const last = parts[parts.length - 1];
+    return last !== undefined && last.length > 0 ? last : WORKSPACE_FALLBACK;
+}
+/** Project id from the URL lease stamp, when present. */
+export function readProjectIdFromUrl() {
+    if ('undefined' === typeof window)
+        return undefined;
+    const id = new URLSearchParams(window.location.search).get(RETICLE_URL_PARAM.PROJECT);
+    return id !== null && id.length > 0 ? id : undefined;
+}
+export function workspaceSummary() {
+    const root = readWorkspaceRoot();
+    const projectId = readProjectIdFromUrl();
+    const folder = root !== undefined ? workspaceFolderLabel(root) : WORKSPACE_FALLBACK;
+    if (root === undefined && projectId === undefined)
+        return { folder };
+    const out = { folder };
+    if (root !== undefined)
+        out.root = root;
+    if (projectId !== undefined)
+        out.projectId = projectId;
+    return out;
+}
+/** Workspace chip + detail menu - sits above the composer row. */
+export function workspaceRowHtml() {
+    const folderIcon = hiIconHtml(PresenterIcon.LAYOUT, PRESENTER_ICON_SIZE.HELP);
+    const caret = hiIconHtml(PresenterIcon.CARET_DOWN, PRESENTER_ICON_SIZE.HELP);
+    const copyIcon = hiIconHtml(PresenterIcon.COPY, PRESENTER_ICON_SIZE.HELP);
+    return `<div class="reticle-workspace-wrap">
+    <button type="button" class="reticle-workspace" ${WORKSPACE_BTN_ATTR} aria-haspopup="true" aria-expanded="false" title="${WORKSPACE_LABEL}">
+      <span class="reticle-workspace-icon" aria-hidden="true">${folderIcon}</span>
+      <span class="reticle-workspace-name" ${WORKSPACE_NAME_ATTR}>${WORKSPACE_FALLBACK}</span>
+      <span class="reticle-workspace-caret" aria-hidden="true">${caret}</span>
+    </button>
+    <div class="reticle-workspace-menu" ${WORKSPACE_MENU_ATTR} role="dialog" aria-label="${WORKSPACE_LABEL}" aria-hidden="true" hidden>
+      <div class="reticle-workspace-menu-head">
+        <div class="reticle-workspace-menu-title">${WORKSPACE_LABEL}</div>
+        <button type="button" class="reticle-workspace-copy" ${WORKSPACE_COPY_ATTR} title="${COPY_PATH_LABEL}" aria-label="${COPY_PATH_LABEL}">${copyIcon}</button>
+      </div>
+      <div class="reticle-workspace-menu-row"><span class="reticle-workspace-menu-k">Folder</span><span class="reticle-workspace-menu-v" data-reticle-workspace-folder></span></div>
+      <div class="reticle-workspace-menu-row"><span class="reticle-workspace-menu-k">Path</span><span class="reticle-workspace-menu-v reticle-workspace-menu-path" ${WORKSPACE_PATH_ATTR}></span></div>
+      <div class="reticle-workspace-menu-row" data-reticle-workspace-project-row hidden><span class="reticle-workspace-menu-k">${PROJECT_LABEL}</span><span class="reticle-workspace-menu-v" ${WORKSPACE_PROJECT_ATTR}></span></div>
+    </div>
+  </div>`;
+}
+export function paintWorkspace(root) {
+    const summary = workspaceSummary();
+    // Nothing to say - no injected repo root, no leased project id - so the chip says nothing. It
+    // used to render its fallback, "This page", which names no workspace and is exactly as true of
+    // every page. The chip earns its slot only when it can tell you WHICH checkout is being driven.
+    const wrap = root.querySelector('.reticle-workspace-wrap');
+    if (wrap instanceof HTMLElement) {
+        const known = summary.root !== undefined || summary.projectId !== undefined;
+        wrap.toggleAttribute('hidden', !known);
+    }
+    const chipName = root.querySelector(`[${WORKSPACE_BTN_ATTR}] [${WORKSPACE_NAME_ATTR}]`);
+    if (chipName instanceof HTMLElement)
+        chipName.textContent = summary.folder;
+    const folderEl = root.querySelector('[data-reticle-workspace-folder]');
+    if (folderEl instanceof HTMLElement)
+        folderEl.textContent = summary.folder;
+    const pathEl = root.querySelector(`[${WORKSPACE_PATH_ATTR}]`);
+    if (pathEl instanceof HTMLElement) {
+        pathEl.textContent = summary.root ?? '-';
+        pathEl.title = summary.root ?? '';
+    }
+    const projectEl = root.querySelector(`[${WORKSPACE_PROJECT_ATTR}]`);
+    const projectRow = root.querySelector('[data-reticle-workspace-project-row]');
+    const copyBtn = root.querySelector(`[${WORKSPACE_COPY_ATTR}]`);
+    if (summary.projectId !== undefined) {
+        projectRow?.removeAttribute('hidden');
+        if (projectEl instanceof HTMLElement)
+            projectEl.textContent = summary.projectId;
+    }
+    else {
+        projectRow?.setAttribute('hidden', '');
+        if (projectEl instanceof HTMLElement)
+            projectEl.textContent = '';
+    }
+    if (copyBtn instanceof HTMLButtonElement) {
+        copyBtn.disabled = summary.root === undefined;
+    }
+    const btn = root.querySelector(`[${WORKSPACE_BTN_ATTR}]`);
+    if (btn instanceof HTMLElement && summary.root !== undefined) {
+        btn.title = `${WORKSPACE_LABEL}: ${summary.root}`;
+    }
+}
+export function mountWorkspaceSelector(root) {
+    paintWorkspace(root);
+    const btn = root.querySelector(`[${WORKSPACE_BTN_ATTR}]`);
+    const menu = root.querySelector(`[${WORKSPACE_MENU_ATTR}]`);
+    const copyBtn = root.querySelector(`[${WORKSPACE_COPY_ATTR}]`);
+    if (!(btn instanceof HTMLElement) || !(menu instanceof HTMLElement))
+        return () => undefined;
+    const close = () => {
+        menu.setAttribute('aria-hidden', 'true');
+        menu.setAttribute('hidden', '');
+        btn.setAttribute('aria-expanded', 'false');
+    };
+    const open = () => {
+        paintWorkspace(root);
+        menu.removeAttribute('hidden');
+        menu.setAttribute('aria-hidden', 'false');
+        btn.setAttribute('aria-expanded', 'true');
+    };
+    const toggle = () => {
+        if ('true' === menu.getAttribute('aria-hidden') || menu.hasAttribute('hidden'))
+            open();
+        else
+            close();
+    };
+    const onBtnClick = (e) => {
+        e.stopPropagation();
+        toggle();
+    };
+    const onDocPointer = (e) => {
+        const target = e.target;
+        if (!(target instanceof Node))
+            return;
+        if (btn.contains(target) || menu.contains(target))
+            return;
+        close();
+    };
+    const onKeyDown = (e) => {
+        if ('Escape' !== e.key)
+            return;
+        if ('true' === menu.getAttribute('aria-hidden') || menu.hasAttribute('hidden'))
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        close();
+    };
+    const onCopy = (e) => {
+        e.stopPropagation();
+        const path = workspaceSummary().root;
+        if (path === undefined)
+            return;
+        void navigator.clipboard?.writeText(path);
+        if (copyBtn instanceof HTMLButtonElement) {
+            const prior = copyBtn.title;
+            copyBtn.title = COPIED_PATH_LABEL;
+            window.setTimeout(() => {
+                copyBtn.title = prior;
+            }, 1200);
+        }
+    };
+    btn.addEventListener('click', onBtnClick);
+    menu.addEventListener('pointerdown', (e) => e.stopPropagation());
+    copyBtn?.addEventListener('click', onCopy);
+    document.addEventListener('pointerdown', onDocPointer);
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+        btn.removeEventListener('click', onBtnClick);
+        copyBtn?.removeEventListener('click', onCopy);
+        document.removeEventListener('pointerdown', onDocPointer);
+        document.removeEventListener('keydown', onKeyDown);
+    };
+}

package/dist/presenter/presenter.d.ts

@@ -1,11 +1,14 @@
-import { PresenterMode, type PresenterTone, SessionState } from '@reticlehq/core';
+import { PresenterMode, SessionState, type PresenterTone } from '@reticlehq/core';
 import { type LogKind, type LogResult, type LogHandle } from './presenter-log.js';
-import { GlowPhase, type PresenterOptions } from './presenter-config.js';
+import { type PresenterOptions } from './presenter-config.js';
 import { type PresenterRunState } from './presenter-run-state.js';
 import { type ControlHandler } from './presenter-controls.js';
-export type { ControlHandler, ControlIntent } from './presenter-controls.js';
-export { GlowPhase, type PresenterOptions } from './presenter-config.js';
-export { LOG_KIND, LOG_RESULT, type LogKind, type LogResult, type LogHandle, } from './presenter-log.js';
+import { Annotator } from '../review/annotator.js';
+export { GlowPhase } from './presenter-config.js';
+export type { PresenterOptions } from './presenter-config.js';
+export { LOG_KIND, LOG_RESULT } from './presenter-log.js';
+export type { LogHandle } from './presenter-log.js';
+export type { ControlIntent, ControlHandler } from './presenter-controls.js';
 export declare class Presenter {
     #private;
     constructor(options?: PresenterOptions);
@@ -30,6 +33,8 @@ export declare class Presenter {
     get logMax(): number;
     set logMax(n: number);
     mount(): void;
+    /** Wire annotation chrome; expanding the HUD enters annotate mode. */
+    bindAnnotator(annotator: Annotator): void;
     destroy(): void;
     /**
      * Session start: in 'session' border mode this fades the base border IN and keeps it on until
@@ -42,7 +47,7 @@ export declare class Presenter {
      */
     sessionEnd(): void;
     /**
-     * Record agent activity. Idempotent while busy — only the first activity from idle/fading flips
+     * Record agent activity. Idempotent while busy - only the first activity from idle/fading flips
      * the glow on, so a burst never restarts the reticle-pulse animation (no strobe). Subsequent calls
      * just refresh the last-activity timestamp and re-arm the idle check.
      */
@@ -50,7 +55,7 @@ export declare class Presenter {
     /** Re-arm the quiet-window idle check (kept for reticle.ts's finally block). */
     scheduleIdle(): void;
     /** Test/diagnostic accessor for the current glow phase. */
-    glowPhase(): GlowPhase;
+    glowPhase(): import("./presenter-config.js").GlowPhase;
     /** Current intent (reading vs acting), exposed for tests + the watcher. */
     get mode(): PresenterMode;
     /**
@@ -62,11 +67,11 @@ export declare class Presenter {
     /** Agent-tunable idle-end window (reticle_session). Floored so it can't be set uselessly small. */
     setIdleEndMs(ms: number): void;
     /**
-     * The exported "run state" for the Copy/Export buttons — everything the page holds about this
+     * The exported "run state" for the Copy/Export buttons - everything the page holds about this
      * run: session id, url, duration, capability surface, per-kind counts, and the full activity log.
      * (The full network/console ring-buffer lives server-side; this is the in-page run summary.)
      */
-    runState(): PresenterRunState;
+    runState(): PresenterRunState | Record<string, unknown>;
     /**
      * Append an activity-log row. Accumulates (never overwrites): each call adds a timestamped row
      * with a mode chip + text. Returns a handle to stamp the row's outcome glyph (✓/✗) later, or
@@ -77,7 +82,7 @@ export declare class Presenter {
     narrate(text: string, level?: string): LogHandle | undefined;
     /**
      * Mirror the server's session.throttled state onto the HUD border. When throttled (tab
-     * backgrounded or stale), the border turns amber so the developer knows actions are no-oping —
+     * backgrounded or stale), the border turns amber so the developer knows actions are no-oping -
      * the same signal the agent already reads from result.session.throttled.
      */
     setThrottled(throttled: boolean): void;