@reticlehq/browser 2.8.0 → 2.9.0

package/dist/presenter/presenter.js

@@ -2,18 +2,22 @@ import { ActionType, ReticleCommand, PresenterMode, SessionState, isPresenterTon
 import { refs } from '../dom/refs.js';
 import { actionVerb } from './presenter-verbs.js';
 import { nativeSetTimeout, nativeClearTimeout, nativeNow } from '../timers/native-timers.js';
-import { LOG_KIND, CHIP_LABEL, DATA_RETICLE_LOG, HUMAN_ROW_PREFIX, clampLogMax, formatElapsed, humanDuration, appendLogRow, } from './presenter-log.js';
+import { LOG_KIND, CHIP_LABEL, DATA_RETICLE_LOG, clampLogMax, formatElapsed, humanDuration, appendLogRow, } from './presenter-log.js';
 import { PRESENTER_CSS } from './presenter-styles.js';
-import { BRAND_HTML } from './presenter-brand.js';
-import { BorderMode, DEFAULT_BORDER_MODE, DATA_BUSY, BUSY_OFF, effectivePaceMs, GlowPhase, IDLE_AFTER_MS, HEARTBEAT_MS, IDLE_NOTICE_MS, IDLE_END_MS, IDLE_END_MIN_MS, GLOW_FADE_MS, GLOW_ON, GLOW_OFF, DATA_ON, MIN_ATTR, THROTTLED_ATTR, } from './presenter-config.js';
+import { HudShell } from './presenter-shell.js';
+import { parseImpactSnapshot } from './presenter-report-copy.js';
+import { BorderMode, DEFAULT_BORDER_MODE, DATA_BUSY, BUSY_OFF, effectivePaceMs, IDLE_AFTER_MS, HEARTBEAT_MS, IDLE_NOTICE_MS, IDLE_END_MS, IDLE_END_MIN_MS, ACT_STRIP, GLOW_FADE_MS, GLOW_ON, GLOW_OFF, DATA_ON, THROTTLED_ATTR, LIVENESS_ATTR, MARKERS_BTN_ATTR, CLEAR_MARKS_ATTR, MARK_COUNT_ATTR, } from './presenter-config.js';
 import { buildRunState } from './presenter-run-state.js';
 import { moveCursor, ringAround, spawnRipple, pace } from './presenter-effects.js';
 import { GlowController } from './presenter-glow.js';
+import { PresenterIcon, PRESENTER_ICON_SIZE, hiIcon } from './presenter-icons.js';
 import { renderTally } from './presenter-tally.js';
-import { CONTROLS_HEAD_HTML, CONTROLS_BANNER_HTML, CONTROLS_FLOWS_HTML, CONTROLS_FOOT_HTML, ENDED_FADE_MS, ControlPanel, } from './presenter-controls.js';
+import { CONTROLS_BANNER_HTML, CONTROLS_FLOWS_HTML, CONTROLS_FOOT_HTML, ENDED_FADE_MS, ControlPanel, } from './presenter-controls.js';
+import { statusTheme, blockerHtml, getPresenterSettings, OutputDetail, syncPageBlocker, } from './presenter-settings.js';
+import { Annotator } from '../review/annotator.js';
 // Re-export the config surface so the public import path (`./presenter.js`) is unchanged.
 export { GlowPhase } from './presenter-config.js';
-export { LOG_KIND, LOG_RESULT, } from './presenter-log.js';
+export { LOG_KIND, LOG_RESULT } from './presenter-log.js';
 // Presenter / transparency layer: a human watches the agent work. Glowing border while
 // active, a synthetic cursor that flies to targets, click/hover/type effects, and a HUD that
 // shows the current action + the agent's narrated intent. All nodes carry data-reticle-* attrs
@@ -26,11 +30,15 @@ export class Presenter {
     #ring;
     #hud;
     #actLine;
+    #actStrip;
+    /** Label inside the minimised-chat capsule; mirrors the act strip. */
+    #chatPillText;
+    /** Age of the last action, shown in the capsule's own slot. */
+    #chatPillTime;
     #chip;
-    /** Live verdict tally (✓N ✗M) in the header — the running testing score the human watches. */
+    /** Live verdict tally (✓N ✗M) in the header - the running testing score the human watches. */
     #tally;
     #tallied = { passes: 0, fails: 0 };
-    #liveLine;
     #mode = PresenterMode.IDLE;
     #now;
     #heartbeatMs;
@@ -57,6 +65,8 @@ export class Presenter {
     // Live-control panel: the two-way control surface (Pause/Resume + End + message Send).
     #onControl;
     #panel;
+    #shell;
+    #annotator;
     constructor(options = {}) {
         this.#paceMs = effectivePaceMs(options.paceMs);
         this.#now = options.now ?? nativeNow;
@@ -77,10 +87,26 @@ export class Presenter {
         this.#panel = new ControlPanel({
             emit: (kind, text) => this.#onControl?.(text !== undefined ? { kind, text } : { kind }),
             logHuman: (text) => {
-                this.log(LOG_KIND.HUMAN, HUMAN_ROW_PREFIX + text);
+                this.log(LOG_KIND.HUMAN, text);
             },
             endedFadeMs: options.endedFadeMs ?? ENDED_FADE_MS,
             runState: () => this.runState(),
+            clearRunLog: () => this.#clearRunLog(),
+            onStateChange: () => this.#syncAnnotator(),
+        });
+        this.#shell = new HudShell({
+            onChatOpen: () => this.#shell.pulseFab(false),
+            onExpand: () => this.#syncAnnotator(),
+            onAnnotateToggle: () => this.#syncAnnotator(),
+            onCollapse: () => this.#syncAnnotator(),
+            settings: {
+                onBeforeOpen: () => {
+                    if (this.#shell.isCollapsed())
+                        this.#shell.expand();
+                },
+                onHideUntilRestart: () => this.#applyHideUntilRestart(),
+                onSettingsChange: (s) => this.#onSettingsChange(s),
+            },
         });
     }
     /** Setter so reticle.ts can wire the control callback after construction. */
@@ -110,6 +136,12 @@ export class Presenter {
         const a = command.args;
         if (command.name === ReticleCommand.FLOWS)
             return void this.#panel.setFlows(a['flows']);
+        if (command.name === ReticleCommand.IMPACT) {
+            const snapshot = parseImpactSnapshot(a['snapshot']);
+            if (snapshot !== undefined)
+                this.#shell.report.setSnapshot(snapshot);
+            return;
+        }
         const state = a['state'];
         const tone = a['tone'];
         const text = 'string' === typeof a['text'] && a['text'].length > 0 ? a['text'] : undefined;
@@ -133,18 +165,13 @@ export class Presenter {
         document.head.appendChild(style);
         const root = document.createElement('div');
         root.setAttribute('data-reticle-overlay', '');
+        const actStrip = `<div class="reticle-act-strip" data-liveness="idle"><span class="reticle-act-dot" aria-hidden="true"></span><span class="reticle-act">${ACT_STRIP.READY}</span></div>`;
         root.innerHTML = `
+      ${blockerHtml()}
       <div data-reticle-glow></div>
       <div data-reticle-cursor></div>
       <div data-reticle-ring></div>
-      <div data-reticle-hud>
-        <div class="reticle-hud-head">${BRAND_HTML}<span class="reticle-chip" data-reticle-chip></span><span class="reticle-tally" data-reticle-tally hidden></span><span class="reticle-live"></span><span class="reticle-head-sp"></span><button type="button" data-reticle-min-btn title="Minimise" aria-label="Minimise the panel">⌄</button>${CONTROLS_HEAD_HTML}<span class="reticle-maxhint" aria-hidden="true">⌃</span></div>
-        <div class="reticle-act-strip"><span class="reticle-act">idle</span></div>
-        ${CONTROLS_BANNER_HTML}
-        <div ${DATA_RETICLE_LOG}></div>
-        ${CONTROLS_FLOWS_HTML}
-        ${CONTROLS_FOOT_HTML}
-      </div>`;
+      ${HudShell.dockHtml(actStrip, CONTROLS_BANNER_HTML, DATA_RETICLE_LOG, CONTROLS_FLOWS_HTML, CONTROLS_FOOT_HTML)}`;
         document.body.appendChild(root);
         this.#root = root;
         this.#glow = root.querySelector('[data-reticle-glow]') ?? undefined;
@@ -152,30 +179,60 @@ export class Presenter {
         this.#ring = root.querySelector('[data-reticle-ring]') ?? undefined;
         this.#hud = root.querySelector('[data-reticle-hud]') ?? undefined;
         this.#actLine = root.querySelector('.reticle-act') ?? undefined;
+        this.#actStrip = root.querySelector('.reticle-act-strip') ?? undefined;
+        this.#chatPillText =
+            root.querySelector('[data-reticle-chat-pill-text]') ?? undefined;
+        this.#chatPillTime =
+            root.querySelector('[data-reticle-chat-pill-time]') ?? undefined;
         this.#log = root.querySelector(`[${DATA_RETICLE_LOG}]`) ?? undefined;
         this.#chip = root.querySelector('[data-reticle-chip]') ?? undefined;
         this.#tally = root.querySelector('[data-reticle-tally]') ?? undefined;
-        this.#liveLine = root.querySelector('.reticle-live') ?? undefined;
-        // Minimise → collapse the panel to a bar (only the live line streams). Click the bar to restore.
-        const setMin = (on) => root.setAttribute(MIN_ATTR, on ? '1' : '0');
-        root.querySelector('[data-reticle-min-btn]')?.addEventListener('click', (e) => {
-            e.stopPropagation(); // don't let the head's maximise handler immediately re-open it
-            setMin(true);
-        });
-        root.querySelector('.reticle-hud-head')?.addEventListener('click', () => {
-            if ('1' === root.getAttribute(MIN_ATTR))
-                setMin(false); // clicking the minimised bar restores
-        });
+        this.#shell.mount(root);
+        syncPageBlocker(root, getPresenterSettings(), false);
         this.#glowCtl.setElements(this.#glow, this.#cursor);
         // The panel queries its refs, binds listeners, and paints the initial active state.
         this.#panel.mount(root, this.#glow);
         this.setMode(this.#mode);
+        this.#renderTally();
+    }
+    /** Wire annotation chrome; expanding the HUD enters annotate mode. */
+    bindAnnotator(annotator) {
+        this.#annotator = annotator;
+        const root = this.#root;
+        if (root === undefined)
+            return;
+        const markers = root.querySelector(`[${MARKERS_BTN_ATTR}]`);
+        const clear = root.querySelector(`[${CLEAR_MARKS_ATTR}]`);
+        const count = root.querySelector(`[${MARK_COUNT_ATTR}]`);
+        const chrome = {};
+        if (markers instanceof HTMLElement)
+            chrome.markersBtn = markers;
+        if (clear instanceof HTMLElement)
+            chrome.clearBtn = clear;
+        if (count instanceof HTMLElement)
+            chrome.countEl = count;
+        annotator.attachChrome(chrome);
+        annotator.setAccent(statusTheme(getPresenterSettings().statusThemeId).active);
+        this.#syncAnnotator();
+    }
+    /** Annotate whenever the HUD is open and the person asked for it - agent or no agent. */
+    #syncAnnotator() {
+        // Two things have to agree, and both are the user's: the HUD is open, and annotate is switched
+        // on. Session state used to be a third, so the mode was refused the moment the agent
+        // disconnected - which is precisely when someone opens the HUD to record what they just saw.
+        // The button still lit up, so the refusal was invisible: no outline, no composer, no reason.
+        const live = !this.#shell.isCollapsed() && this.#shell.isAnnotateOn();
+        this.#annotator?.toggle(live);
+        if (this.#root !== undefined) {
+            syncPageBlocker(this.#root, getPresenterSettings(), live);
+        }
     }
     destroy() {
         this.#glowCtl.teardown();
         if (this.#heartbeatTimer !== undefined)
             nativeClearTimeout(this.#heartbeatTimer);
         this.#heartbeatTimer = undefined;
+        this.#shell.teardown();
         this.#panel.teardown();
         this.#sessionActive = false;
         this.#logBaseMs = undefined;
@@ -202,10 +259,14 @@ export class Presenter {
         this.#showSession();
         this.#glowCtl.resetActivity(this.#now());
         this.#startHeartbeat();
+        if (getPresenterSettings().autoOpenChat) {
+            this.#shell.openChat();
+        }
     }
-    /** Turn the base border (session mode) + the HUD/log on — the visible "session is live" state. */
+    /** Turn the base border (session mode) + the HUD/log on - the visible "session is live" state. */
     #showSession() {
-        // The activity log/HUD persists the WHOLE session, like the border — it never fades on idle.
+        const dock = this.#root?.querySelector('[data-reticle-dock]');
+        dock?.setAttribute(DATA_ON, GLOW_ON);
         this.#hud?.setAttribute(DATA_ON, GLOW_ON);
         // Base border persists in 'session' mode; 'busy' mode leaves it to the busy machine.
         if (this.#borderMode === BorderMode.SESSION)
@@ -231,14 +292,17 @@ export class Presenter {
             nativeClearTimeout(this.#heartbeatTimer);
             this.#heartbeatTimer = undefined;
         }
+        const dock = this.#root?.querySelector('[data-reticle-dock]');
+        dock?.setAttribute(DATA_ON, GLOW_OFF);
         this.#hud?.setAttribute(DATA_ON, GLOW_OFF);
+        this.#shell.collapse();
         if (this.#borderMode === BorderMode.SESSION) {
             this.#glow?.setAttribute(DATA_ON, GLOW_OFF);
             this.#glow?.setAttribute(DATA_BUSY, BUSY_OFF);
         }
     }
     /**
-     * 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.
      */
@@ -265,23 +329,63 @@ export class Presenter {
         this.#mode = mode;
         this.#root?.setAttribute('data-reticle-mode', mode);
         if (this.#chip !== undefined) {
-            this.#chip.textContent = CHIP_LABEL[mode];
+            const label = CHIP_LABEL[mode];
             this.#chip.setAttribute('data-mode', mode);
+            this.#chip.replaceChildren();
+            if (label.length > 0) {
+                const icon = mode === PresenterMode.READING
+                    ? PresenterIcon.VIEW
+                    : mode === PresenterMode.ACTING
+                        ? PresenterIcon.POINTER
+                        : undefined;
+                if (icon !== undefined)
+                    this.#chip.appendChild(hiIcon(icon, PRESENTER_ICON_SIZE.CHIP));
+                const labelEl = document.createElement('span');
+                labelEl.className = 'reticle-chip-label';
+                labelEl.textContent = label;
+                this.#chip.appendChild(labelEl);
+            }
         }
-        // READING has no real pointer to show (synthetic-hover pointer is native-only) — hide the cursor.
+        // READING has no real pointer to show (synthetic-hover pointer is native-only) - hide the cursor.
         if (mode === PresenterMode.READING)
             this.#cursor?.setAttribute(DATA_ON, GLOW_OFF);
     }
     status(text) {
         this.markActivity();
+        if (this.#chatPillTime !== undefined)
+            this.#chatPillTime.textContent = ACT_STRIP.NOW;
         this.#lastActionText = text;
+        this.#paintActStrip(text, false);
+    }
+    /**
+     * Sync act-strip text + the live/idle state.
+     *
+     * The liveness is mirrored onto the overlay root as well as the strip, because that is what the
+     * status COLOUR resolves against: the page glow, the collapsed FAB's halo and the minimised
+     * capsule all live outside the strip and still have to say whether the agent is working.
+     */
+    #paintActStrip(text, idle) {
         if (this.#actLine !== undefined)
             this.#actLine.textContent = text;
+        const liveness = idle ? 'idle' : 'active';
+        if (this.#actStrip !== undefined)
+            this.#actStrip.setAttribute('data-liveness', liveness);
+        this.#root?.setAttribute(LIVENESS_ATTR, liveness);
+        if (this.#chatPillText !== undefined) {
+            // The capsule reads "logo | what the agent did | how long ago | expand", so it takes the
+            // ACTION, never the composed "idle · 12s since last action" line the strip shows: the age
+            // lives in its own slot next to it.
+            this.#chatPillText.textContent = idle
+                ? this.#lastActionText !== ''
+                    ? this.#lastActionText
+                    : ACT_STRIP.READY
+                : text;
+        }
     }
     /**
-     * Liveness heartbeat (native 1s timer — never rAF, so it ticks in a foreground tab regardless of
+     * Liveness heartbeat (native 1s timer - never rAF, so it ticks in a foreground tab regardless of
      * agent activity). Once the agent has been quiet for IDLE_NOTICE_MS, the act strip shows a LIVE,
-     * growing "◌ idle · {duration} since last action" — the signal that was missing when a stopped
+     * growing "◌ idle · {duration} since last action" - the signal that was missing when a stopped
      * agent left the panel frozen and indistinguishable from one still thinking.
      */
     #startHeartbeat() {
@@ -297,16 +401,18 @@ export class Presenter {
         if (!this.#sessionActive || this.#actLine === undefined)
             return;
         if (this.state === SessionState.ENDED)
-            return; // already ended — leave the summary
+            return; // already ended - leave the summary
         const idleMs = this.#now() - this.#glowCtl.lastActivityMs();
         if (idleMs >= this.#idleEndMs) {
             this.#endIdle(idleMs); // crossed the idle-end window → auto-end (glow off, panel kept)
             return;
         }
         if (idleMs < this.#idleNoticeMs)
-            return; // still active (or a brief think) — keep the action text
-        const since = this.#lastActionText !== '' ? ` since last action` : '';
-        this.#actLine.textContent = `◌ idle · ${humanDuration(idleMs)}${since}`;
+            return; // still active (or a brief think) - keep the action text
+        const since = this.#lastActionText !== '' ? ACT_STRIP.SINCE_LAST : '';
+        this.#paintActStrip(`${ACT_STRIP.IDLE_PREFIX}${humanDuration(idleMs)}${since}`, true);
+        if (this.#chatPillTime !== undefined)
+            this.#chatPillTime.textContent = humanDuration(idleMs);
     }
     /** Auto-end after the idle window: stamp the end, drive the panel to ENDED, stop the heartbeat. */
     #endIdle(idleMs) {
@@ -324,12 +430,12 @@ export class Presenter {
         this.#idleEndMs = Math.max(IDLE_END_MIN_MS, Math.floor(ms));
     }
     /**
-     * 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() {
-        return buildRunState({
+        const base = buildRunState({
             sessionId: this.#sessionId,
             state: this.state,
             startMs: this.#startMs,
@@ -337,6 +443,45 @@ export class Presenter {
             now: this.#now(),
             runLog: this.#runLog,
         });
+        const settings = getPresenterSettings();
+        if (settings.outputDetail === OutputDetail.MINIMAL) {
+            return {
+                session: base.session,
+                url: base.url,
+                state: base.state,
+                startedMs: base.startedMs,
+                durationMs: base.durationMs,
+                counts: base.counts,
+            };
+        }
+        if (settings.outputDetail === OutputDetail.VERBOSE && settings.reactComponents) {
+            return { ...base, includeReactComponents: true };
+        }
+        return base;
+    }
+    #clearRunLog() {
+        this.#runLog = [];
+        this.#tallied = { passes: 0, fails: 0 };
+        if (this.#log !== undefined)
+            this.#log.replaceChildren();
+        this.#renderTally();
+    }
+    #applyHideUntilRestart() {
+        this.#root?.setAttribute('data-reticle-hidden', '1');
+        this.#shell.collapse();
+    }
+    #onSettingsChange(settings) {
+        this.#annotator?.setAccent(statusTheme(settings.statusThemeId).active);
+        if (!settings.showTally) {
+            this.#tally?.setAttribute('hidden', '');
+        }
+        else {
+            this.#renderTally();
+        }
+        if (this.#root !== undefined) {
+            const live = SessionState.ACTIVE === this.#panel.state && !this.#shell.isCollapsed();
+            syncPageBlocker(this.#root, settings, live);
+        }
     }
     /**
      * Append an activity-log row. Accumulates (never overwrites): each call adds a timestamped row
@@ -363,10 +508,9 @@ export class Presenter {
         const handle = appendLogRow(this.#log, kind, trimmed, ts, this.#logMax);
         if (result !== undefined)
             handle.result(result);
-        // Feed the minimised-bar live line so the latest activity always shows when collapsed.
-        if (this.#liveLine !== undefined)
-            this.#liveLine.textContent = trimmed;
-        this.#renderTally(); // a row that landed with a verdict updates the header score immediately
+        if (this.#shell.isCollapsed())
+            this.#shell.pulseFab(true);
+        this.#renderTally();
         // Wrap the handle so a later outcome stamp updates BOTH the DOM glyph and the run-log entry.
         return {
             result: (r) => {
@@ -378,6 +522,10 @@ export class Presenter {
     }
     /** Repaint the header verdict tally from the run log; the side that grew gets a one-shot pop. */
     #renderTally() {
+        if (!getPresenterSettings().showTally) {
+            this.#tally?.setAttribute('hidden', '');
+            return;
+        }
         this.#tallied = renderTally(this.#tally, this.#runLog, this.#tallied);
     }
     /** Back-compat: narration appends to the live log (append-only, never overwrites). */
@@ -394,14 +542,14 @@ export class Presenter {
     }
     /**
      * 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) {
         this.#root?.setAttribute(THROTTLED_ATTR, throttled ? '1' : '0');
         if (throttled && this.#actLine !== undefined) {
             this.#actLine.textContent =
-                'Tab backgrounded — actions throttled. Bring tab to front or use `reticle drive`.';
+                'Tab backgrounded - actions throttled. Bring tab to front or use `reticle drive`.';
         }
     }
     /** Fly the cursor to an element, play the action's effect, then pace for the human. */

package/dist/reticle.d.ts

@@ -5,7 +5,7 @@ export type { ReticleConnectOptions };
 /**
  * Runtime backstop for the dev-only SDK: block connecting when the build reports production, unless
  * explicitly overridden. Pure so it's testable; connect reads NODE_ENV safely (process may be absent
- * in a raw browser). This is defense-in-depth — the primary guard is the consumer gating the import
+ * in a raw browser). This is defense-in-depth - the primary guard is the consumer gating the import
  * behind `import.meta.env.DEV` so the SDK is dead-code-eliminated from prod bundles entirely.
  */
 export declare function shouldBlockProduction(nodeEnv: string | undefined, allowInProduction: boolean): boolean;
@@ -45,7 +45,7 @@ export declare function resolveConnectIdentity(options: {
 };
 /**
  * Assemble an event envelope. Pure: `seq` (monotonic per session) and `t` (elapsed clock) are
- * injected, never read here — so it is unit-testable and honors the clock-injection rule. The
+ * injected, never read here - so it is unit-testable and honors the clock-injection rule. The
  * causing action's id is attributed server-side by the settle window, so it is not stamped here.
  */
 export declare function buildEvent(args: {

package/dist/reticle.js

@@ -8,6 +8,7 @@ import { registerCapabilities, setCapabilitiesListener, hasCapabilities, } from
 import { installAllObservers } from './observers/install-all.js';
 import { installOverlay } from './presenter/overlay.js';
 import { Presenter, LOG_KIND, LOG_RESULT, } from './presenter/presenter.js';
+import { getPresenterSettings } from './presenter/presenter-settings.js';
 import { actionVerb } from './presenter/presenter-verbs.js';
 import { str, refLabel, modeForCommand, presentStatus } from './reticle-presenter-helpers.js';
 import { resetClock } from './timers/clock.js';
@@ -17,7 +18,7 @@ import { Annotator } from './review/annotator.js';
 /**
  * Runtime backstop for the dev-only SDK: block connecting when the build reports production, unless
  * explicitly overridden. Pure so it's testable; connect reads NODE_ENV safely (process may be absent
- * in a raw browser). This is defense-in-depth — the primary guard is the consumer gating the import
+ * in a raw browser). This is defense-in-depth - the primary guard is the consumer gating the import
  * behind `import.meta.env.DEV` so the SDK is dead-code-eliminated from prod bundles entirely.
  */
 export function shouldBlockProduction(nodeEnv, allowInProduction) {
@@ -61,7 +62,7 @@ pageProtocol = 'http:') {
     return { allowed: true };
 }
 /** HUD summary when the SDK self-ends a session because the bridge (server/agent) became unreachable. */
-const BRIDGE_LOST_SUMMARY = 'Session ended — lost connection to Reticle (the agent is no longer running).';
+const BRIDGE_LOST_SUMMARY = 'Session ended - lost connection to Reticle (the agent is no longer running).';
 /**
  * Resolve the session label. An absent label or the `auto` sentinel yields a fresh per-tab id (via
  * the injected generator) so multi-tab / new-tab routes never collide; any other label is used
@@ -82,7 +83,7 @@ function stripReloadCacheBustParam() {
         window.history.replaceState(window.history.state, '', current.toString());
     }
     catch {
-        /* best-effort URL hygiene — never block connect() on it */
+        /* best-effort URL hygiene - never block connect() on it */
     }
 }
 /**
@@ -117,7 +118,7 @@ export function resolveConnectIdentity(options, search) {
 }
 /**
  * Assemble an event envelope. Pure: `seq` (monotonic per session) and `t` (elapsed clock) are
- * injected, never read here — so it is unit-testable and honors the clock-injection rule. The
+ * injected, never read here - so it is unit-testable and honors the clock-injection rule. The
  * causing action's id is attributed server-side by the settle window, so it is not stamped here.
  */
 export function buildEvent(args) {
@@ -168,7 +169,7 @@ export class Reticle {
             return;
         }
         // A `hard` REFRESH left a cache-busting `_reticle_reload=<nonce>` in the address bar. Strip it now
-        // (before the route observer installs, so it emits no spurious ROUTE_CHANGE) — otherwise every hard
+        // (before the route observer installs, so it emits no spurious ROUTE_CHANGE) - otherwise every hard
         // reload permanently pollutes the URL the app and the agent see.
         stripReloadCacheBustParam();
         const url = options.url ?? bridgeWsUrl(RETICLE_DEFAULT_PORT);
@@ -178,7 +179,7 @@ export class Reticle {
             return;
         }
         // Publish the project root for the adapters' source relativisation. Done HERE, in library code,
-        // so the app-side connect stays plain JavaScript — see ReticleConnectOptions.root.
+        // so the app-side connect stays plain JavaScript - see ReticleConnectOptions.root.
         if (options.root !== undefined && options.root.length > 0) {
             globalThis[RETICLE_ROOT_GLOBAL] = options.root;
         }
@@ -193,7 +194,7 @@ export class Reticle {
         // options win, but the `auto` sentinel defers to the URL param so leases correlate.
         const identity = resolveConnectIdentity(options, window.location.search);
         // Remembered per TAB, so a reload rejoins the same session instead of appearing as a new one and
-        // stranding the agent's handle — see session-continuity. An explicit id (connect option, or the
+        // stranding the agent's handle - see session-continuity. An explicit id (connect option, or the
         // lease's URL param) still wins.
         const explicitSession = resolveSessionLabel(identity.session, () => '');
         this.#session = rememberSessionLabel(explicitSession.length > 0 ? explicitSession : undefined, 'undefined' === typeof globalThis.sessionStorage ? undefined : globalThis.sessionStorage, () => 'function' === typeof globalThis.crypto?.randomUUID
@@ -212,18 +213,18 @@ export class Reticle {
             url,
             hello: () => this.#hello(),
             handleCommand: (command) => this.#handleCommand(command),
-            // Show the presenter HUD as soon as the agent bridge connects — the user immediately sees
+            // Show the presenter HUD as soon as the agent bridge connects - the user immediately sees
             // the glow border and narration panel, even before the first tool call lands.
             onConnected: () => this.#presenter?.sessionStart(),
             // Liveness fallback: if the bridge stays unreachable (the agent killed the server process),
-            // no server-pushed end can arrive — so end the run we're presenting ourselves. A returning
+            // no server-pushed end can arrive - so end the run we're presenting ourselves. A returning
             // agent revives it via the normal sessionStart path on its next command.
             onConnectionLost: () => {
                 // Restore real timers. A frozen clock is driven by the agent through the bridge; once the
                 // bridge is gone nothing can ever advance it, so leaving it installed pins Date.now and
                 // queues every setTimeout into a scheduler that will never run. Concretely that kills every
                 // lodash debounce/throttle in the app (now - lastCall stays 0), so search boxes, autosave
-                // and resize handlers stop firing until a reload — with nothing on screen explaining why.
+                // and resize handlers stop firing until a reload - with nothing on screen explaining why.
                 resetClock();
                 if (true === this.#presenter?.sessionActive) {
                     this.#presenter.setState(SessionState.ENDED, BRIDGE_LOST_SUMMARY);
@@ -269,23 +270,24 @@ export class Reticle {
                 : { kind: intent.kind });
             this.#presenter = new Presenter(presenterOptions);
             // Mount the overlay. The session (glow + HUD) activates on bridge connect via onConnected,
-            // so the presenter is visible as soon as the agent is reachable — not just on first command.
+            // so the presenter is visible as soon as the agent is reachable - not just on first command.
             this.#presenter.mount();
         }
         if (true === options.recorder) {
             this.#recorder = installRecorder({ emit, now: () => Date.now() });
             this.#recorder.mount();
         }
-        // The "Flag a bug" annotator rides with the presenter (the human surface) unless explicitly off.
+        // The page annotator rides with the presenter (the human surface) unless explicitly off.
         if (options.annotate ?? options.present !== false) {
             const presenter = this.#presenter;
             this.#annotator = new Annotator({
                 emit,
                 now: () => Date.now(),
-                // Echo the flag into the live panel so the human watches their bug report land in the log.
-                onMark: (note, label) => presenter?.log(LOG_KIND.HUMAN, `🚩 ${label}: ${note}`),
+                onMark: (mark) => presenter?.log(LOG_KIND.HUMAN, `🚩 #${String(mark.index)} ${mark.anchor}${mark.source !== undefined ? ` · ${mark.source}` : ''} — ${mark.note}`),
+                shouldBlock: () => getPresenterSettings().blockPageInteractions,
             });
             this.#annotator.mount();
+            this.#presenter?.bindAnnotator(this.#annotator);
         }
         this.#transport.connect();
         this.#connected = true;
@@ -313,7 +315,7 @@ export class Reticle {
     }
     /** Advertise the app's testable surface so the agent learns it without reading source. */
     describe(input) {
-        registerCapabilities(input); // the registry notifies the transport — see setCapabilitiesListener
+        registerCapabilities(input); // the registry notifies the transport - see setCapabilitiesListener
     }
     /** Live-control: end the session programmatically from the host app (drives the panel to ended). */
     endSession() {
@@ -349,7 +351,7 @@ export class Reticle {
             ref,
         });
         // Guarded because #emit runs INLINE IN THE APP'S CALL STACK: every monkey-patch calls it from
-        // inside the function it replaced. An exception here does not surface as an SDK error — it
+        // inside the function it replaced. An exception here does not surface as an SDK error - it
         // propagates out of history.pushState (crashing a router's navigate), out of localStorage.setItem
         // after the write already succeeded, or out of console.log before the message reaches the console.
         // A dev-only observability SDK must never be able to break the app it is observing.
@@ -367,7 +369,7 @@ export class Reticle {
     };
     /**
      * Resolve the app's redaction config into the ambient policy, and remember the part of it that
-     * travels. A config of `undefined` is not "no policy" — it is the DEFAULT policy, installed
+     * travels. A config of `undefined` is not "no policy" - it is the DEFAULT policy, installed
      * explicitly so a second connect() in the same page (HMR, a re-mount) cannot inherit a rule the
      * previous one set.
      */
@@ -386,7 +388,7 @@ export class Reticle {
             adapters: adapterNames(),
             ...(this.#token === undefined ? {} : { token: this.#token }),
             hasCapabilities: hasCapabilities(),
-            // Absent when no build plugin supplied one — "unknown", never "matching".
+            // Absent when no build plugin supplied one - "unknown", never "matching".
             ...(this.#sdkVersion === undefined ? {} : { sdkVersion: this.#sdkVersion }),
             // Always present: derived from THIS build's core, so it needs no build plugin to supply it.
             // It is the half of the skew check that works on a hand-wired connect.
@@ -411,7 +413,9 @@ export class Reticle {
         // Bridge → browser presenter pushes (PRESENTER state echo / FLOWS replay list). The presenter owns
         // the parsing; here we only report whether a panel was mounted to apply it. setState-only, so a
         // PRESENTER echo of a HUMAN_CONTROL can't loop back into a re-emit.
-        if (command.name === ReticleCommand.PRESENTER || command.name === ReticleCommand.FLOWS) {
+        if (command.name === ReticleCommand.PRESENTER ||
+            command.name === ReticleCommand.FLOWS ||
+            command.name === ReticleCommand.IMPACT) {
             this.#presenter?.handlePush(command);
             return { ok: true, result: { applied: this.#presenter !== undefined } };
         }

package/dist/review/annotator-styles.d.ts

@@ -0,0 +1,6 @@
+export declare const MARK_PLACEHOLDER = "What should change?";
+export declare const MARK_SUBMIT = "Add";
+export declare const MARK_CANCEL = "Cancel";
+export declare const MARK_PENDING_GLYPH = "+";
+export declare const ANNOTATOR_CSS: string;
+export declare const ANNOTATOR_ROOT_HTML = "<div data-reticle-mark=\"hi\"><span data-reticle-mark=\"hilabel\"></span></div><div data-reticle-mark=\"sel\" hidden></div>";