@reticlehq/browser 2.8.0 → 2.9.0

package/dist/presenter/presenter-shell.js

@@ -0,0 +1,408 @@
+import { PresenterReport, reportPanelHtml } from './presenter-report.js';
+import { CHAT_MIN_ATTR, CHAT_PILL_ATTR, REPORT_ATTR, REPORT_BTN_ATTR, ANNOTATE_BTN_ATTR, CHAT_ATTR, CHAT_TOGGLE_ATTR, CHAT_PANEL_ATTR, DOCK_ATTR, FAB_ATTR, MIN_ATTR, HUD_DRAGGED_ATTR, SETTINGS_ATTR, SETTINGS_BTN_ATTR, } from './presenter-config.js';
+import { BRAND_NAME, FAB_TOGGLE_HTML, MARK_SVG } from './presenter-brand.js';
+import { settleLogAtLatest } from './presenter-log.js';
+import { installHudDragHandles, installHudPositionGuards } from './presenter-drag.js';
+import { scheduleSyncDockLayout } from './presenter-dock-layout.js';
+import { hiIconHtml, hiToggleIconHtml, PRESENTER_ICON_SIZE, PresenterIcon, } from './presenter-icons.js';
+import { HUD_SURFACE_CLASS, HUD_LOG_WELL_CLASS } from './presenter-hud-chrome.js';
+import { CONTROLS_TOOLBAR_HTML } from './presenter-controls.js';
+import { PresenterSettingsPanel, settingsPanelHtml, } from './presenter-settings.js';
+const DRAG_HANDLE_CLASS = 'reticle-toolbar-drag';
+const TRANSITION_LOCK_MS = 120;
+const ANNOTATE_LABEL = 'Annotate';
+const CHAT_MIN_LABEL = 'Minimise chat';
+/** The minimised chat capsule's label - it reopens the panel. */
+const CHAT_PILL_LABEL = 'Open agent chat';
+/** The toolbar entry to the impact report. */
+const REPORT_LABEL = 'Impact';
+const SETTINGS_LABEL = 'Settings';
+const EXIT_LABEL = 'Exit';
+/**
+ * Morphing HUD shell: circular FAB ↔ icon toolbar, plus the agent chat panel above.
+ * Expand enters annotation mode; the page stays clickable except for captured annotate clicks.
+ */
+export class HudShell {
+    #root;
+    #dock;
+    #fab;
+    #chatPanel;
+    #chatToggle;
+    #collapseBtn;
+    #settings;
+    #dragTeardown;
+    #layoutTeardown;
+    #transitionLock = false;
+    #suppressFabClick = false;
+    #annotateBtn;
+    /**
+     * Whether the USER wants to annotate. Distinct from whether annotation is currently possible,
+     * which also needs a live session and an expanded HUD — this is the half the user controls, and
+     * conflating the two is why there was no way to keep the HUD open without annotating.
+     *
+     * OFF until asked for. It began as `true` to preserve the old behaviour where expanding the HUD
+     * silently entered annotate mode, and that is exactly what made the toolbar icon look permanently
+     * lit: the toolbar is only visible while expanded, so an intent that defaults to on is on every
+     * time you can see it. Annotate mode also captures clicks, so defaulting it on means a click lands
+     * as a mark before anyone asked for one. It is a mode now, and modes are entered deliberately.
+     */
+    #annotateOn = false;
+    #toggleSync;
+    #report = new PresenterReport({
+        onBeforeOpen: () => {
+            // One panel at a time in the slot above the toolbar. The chat, the settings and the report
+            // all anchor there, so opening one over another stacks two glass cards and reads as a bug.
+            this.#settings.close();
+            this.closeChat();
+        },
+    });
+    #callbacks;
+    constructor(callbacks = {}) {
+        this.#callbacks = callbacks;
+        this.#settings = new PresenterSettingsPanel({
+            ...callbacks.settings,
+            onBeforeOpen: () => {
+                // Settings takes the slot from BOTH neighbours. Closing only the chat left the report
+                // sitting behind the settings card - two glass panels stacked in one anchor.
+                this.closeChat();
+                this.#report.close();
+                callbacks.settings?.onBeforeOpen?.();
+            },
+        });
+    }
+    /** Markup for the dock wrapper (chat panel + morphing HUD shell). */
+    static dockHtml(actStripHtml, bannerHtml, logAttr, flowsHtml, footHtml) {
+        const annotate = hiToggleIconHtml(PresenterIcon.ANNOTATE, PRESENTER_ICON_SIZE.TOOLBAR);
+        const chart = hiToggleIconHtml(PresenterIcon.CHART, PRESENTER_ICON_SIZE.TOOLBAR);
+        const gear = hiToggleIconHtml(PresenterIcon.GEAR, PRESENTER_ICON_SIZE.TOOLBAR);
+        const exit = hiIconHtml(PresenterIcon.REMOVE, PRESENTER_ICON_SIZE.TOOLBAR);
+        return `<div ${DOCK_ATTR}>
+      <div ${CHAT_PANEL_ATTR} class="reticle-chat-panel ${HUD_SURFACE_CLASS}" role="dialog" aria-label="Reticle agent chat" aria-hidden="true">
+        <div class="reticle-chat-head">
+          <span class="reticle-chat-brand">${MARK_SVG}<span class="reticle-chat-brandname">${BRAND_NAME}</span></span>
+        </div>
+        <button type="button" ${CHAT_MIN_ATTR} class="reticle-chat-min" title="${CHAT_MIN_LABEL}" aria-label="${CHAT_MIN_LABEL}">${hiIconHtml(PresenterIcon.CARET_DOWN, PRESENTER_ICON_SIZE.TOOLBAR)}</button>
+        ${actStripHtml}
+        <span class="reticle-tally" data-reticle-tally hidden></span>
+        <span class="reticle-chip" data-reticle-chip></span>
+        ${bannerHtml}
+        <div class="${HUD_LOG_WELL_CLASS}"><div ${logAttr}></div></div>
+        ${flowsHtml}
+        ${footHtml}
+      </div>
+      <button type="button" ${CHAT_PILL_ATTR} class="reticle-chat-pill" title="${CHAT_PILL_LABEL}" aria-label="${CHAT_PILL_LABEL}">
+        ${MARK_SVG}
+        <span class="reticle-chat-pill-text" data-reticle-chat-pill-text></span>
+        <span class="reticle-chat-pill-time" data-reticle-chat-pill-time></span>
+        <span class="reticle-chat-pill-caret" aria-hidden="true">${hiIconHtml(PresenterIcon.CARET_DOWN, PRESENTER_ICON_SIZE.TOOLBAR)}</span>
+      </button>
+      ${settingsPanelHtml()}
+      ${reportPanelHtml()}
+      <div data-reticle-hud>
+        <div class="reticle-hud-deco" aria-hidden="true"></div>
+        ${FAB_TOGGLE_HTML}
+        <div class="reticle-toolbar ${DRAG_HANDLE_CLASS}" role="toolbar" aria-label="Reticle controls">
+          <div class="reticle-toolbar-actions">${CONTROLS_TOOLBAR_HTML}</div>
+          <span class="reticle-tb-sep" aria-hidden="true"></span>
+          <div class="reticle-toolbar-chrome">
+            <div class="reticle-tb-wrap">
+              <button type="button" ${ANNOTATE_BTN_ATTR} class="reticle-tb-btn reticle-tb-btn--toggle" title="${ANNOTATE_LABEL}" aria-label="${ANNOTATE_LABEL}" aria-pressed="false" data-active="0">${annotate}</button>
+              <span class="reticle-tb-tip">${ANNOTATE_LABEL}</span>
+            </div>
+            <div class="reticle-tb-wrap">
+              <button type="button" ${REPORT_BTN_ATTR} class="reticle-tb-btn reticle-tb-btn--toggle" title="${REPORT_LABEL}" aria-label="${REPORT_LABEL}" aria-pressed="false" data-active="0">${chart}</button>
+              <span class="reticle-tb-tip">${REPORT_LABEL}</span>
+            </div>
+            <div class="reticle-tb-wrap">
+              <button type="button" ${SETTINGS_BTN_ATTR} class="reticle-tb-btn reticle-tb-btn--toggle" title="${SETTINGS_LABEL}" aria-label="${SETTINGS_LABEL}" aria-pressed="false" data-active="0">${gear}</button>
+              <span class="reticle-tb-tip">${SETTINGS_LABEL}</span>
+            </div>
+            <div class="reticle-tb-wrap">
+              <button type="button" data-reticle-min-btn class="reticle-tb-btn" title="${EXIT_LABEL}" aria-label="${EXIT_LABEL}">${exit}</button>
+              <span class="reticle-tb-tip">${EXIT_LABEL}<span class="reticle-tb-kbd">Esc</span></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>`;
+    }
+    /** The impact report, so the presenter can feed it and the chat can open it. */
+    get report() {
+        return this.#report;
+    }
+    /** Light exactly the toolbar buttons whose panels are open. */
+    #syncToolbarToggles() {
+        const root = this.#root;
+        if (root === undefined)
+            return;
+        const lit = (btnAttr, on) => {
+            const btn = root.querySelector(`[${btnAttr}]`);
+            btn?.setAttribute('data-active', on ? '1' : '0');
+            btn?.setAttribute('aria-pressed', on ? 'true' : 'false');
+        };
+        lit(CHAT_TOGGLE_ATTR, '1' === root.getAttribute(CHAT_ATTR));
+        lit(SETTINGS_BTN_ATTR, '1' === root.getAttribute(SETTINGS_ATTR));
+        lit(REPORT_BTN_ATTR, '1' === root.getAttribute(REPORT_ATTR));
+    }
+    /** Does the user currently want to annotate? */
+    isAnnotateOn() {
+        return this.#annotateOn;
+    }
+    /** Set the toggle and reflect it on the button, without firing the callback. */
+    setAnnotateOn(on) {
+        this.#annotateOn = on;
+        this.#annotateBtn?.setAttribute('aria-pressed', on ? 'true' : 'false');
+        this.#annotateBtn?.setAttribute('data-active', on ? '1' : '0');
+    }
+    mount(root) {
+        this.#root = root;
+        this.#dock = root.querySelector(`[${DOCK_ATTR}]`) ?? undefined;
+        const fabEl = root.querySelector(`[${FAB_ATTR}]`);
+        this.#fab = fabEl instanceof HTMLButtonElement ? fabEl : undefined;
+        const chatPanelEl = root.querySelector(`[${CHAT_PANEL_ATTR}]`);
+        this.#chatPanel = chatPanelEl instanceof HTMLElement ? chatPanelEl : undefined;
+        const chatToggleEl = root.querySelector(`[${CHAT_TOGGLE_ATTR}]`);
+        this.#chatToggle = chatToggleEl instanceof HTMLElement ? chatToggleEl : undefined;
+        const annotateEl = root.querySelector(`[${ANNOTATE_BTN_ATTR}]`);
+        this.#annotateBtn = annotateEl instanceof HTMLButtonElement ? annotateEl : undefined;
+        this.#annotateBtn?.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.setAnnotateOn(!this.#annotateOn);
+            this.#callbacks.onAnnotateToggle?.(this.#annotateOn);
+        });
+        const pillEl = root.querySelector(`[${CHAT_PILL_ATTR}]`);
+        pillEl?.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.showChat();
+        });
+        const chatMinEl = root.querySelector(`[${CHAT_MIN_ATTR}]`);
+        chatMinEl?.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.closeChat();
+        });
+        const collapseEl = root.querySelector('[data-reticle-min-btn]');
+        this.#collapseBtn = collapseEl instanceof HTMLButtonElement ? collapseEl : undefined;
+        root.setAttribute(MIN_ATTR, '1');
+        root.setAttribute(SETTINGS_ATTR, '0');
+        root.removeAttribute(CHAT_ATTR);
+        this.#settings.mount(root);
+        this.#report.mount(root);
+        // The toolbar's lit state FOLLOWS the panels, rather than being set by whoever was clicked.
+        // Set at click time, a button stayed lit after its panel was closed by the panel that replaced
+        // it - two icons active, one panel open. The observer is the only place that can be right for
+        // every path: the toolbar, Escape, click-outside, and one panel closing another.
+        this.#toggleSync = new MutationObserver(() => this.#syncToolbarToggles());
+        this.#toggleSync.observe(root, {
+            attributes: true,
+            attributeFilter: [CHAT_ATTR, SETTINGS_ATTR, REPORT_ATTR],
+        });
+        this.#syncToolbarToggles();
+        root.querySelector(`[${REPORT_BTN_ATTR}]`)?.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.#report.toggle();
+        });
+        this.#fab?.addEventListener('click', (e) => {
+            e.stopPropagation();
+            if (this.#suppressFabClick) {
+                this.#suppressFabClick = false;
+                return;
+            }
+            this.expand();
+        });
+        this.#collapseBtn?.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.collapse();
+        });
+        this.#chatToggle?.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.toggleChat();
+        });
+        const toolbarDrag = root.querySelector(`.${DRAG_HANDLE_CLASS}`);
+        const dragHandles = [this.#fab, toolbarDrag].filter((el) => el instanceof HTMLElement);
+        if (this.#dock !== undefined && dragHandles.length > 0) {
+            this.#dragTeardown = installHudDragHandles(this.#dock, dragHandles, {
+                onDragMove: () => {
+                    this.#suppressFabClick = true;
+                },
+                onDragEnd: (moved) => {
+                    if (moved && this.isCollapsed())
+                        this.#suppressFabClick = true;
+                },
+            });
+            this.#layoutTeardown = installHudPositionGuards(this.#dock, root);
+        }
+        document.addEventListener('pointerdown', this.#onDocPointerDown);
+        document.addEventListener('keydown', this.#onKeyDown);
+    }
+    teardown() {
+        document.removeEventListener('pointerdown', this.#onDocPointerDown);
+        document.removeEventListener('keydown', this.#onKeyDown);
+        this.#dragTeardown?.();
+        this.#dragTeardown = undefined;
+        this.#layoutTeardown?.();
+        this.#layoutTeardown = undefined;
+        this.#settings.teardown();
+        this.#root = undefined;
+        this.#dock = undefined;
+        this.#fab = undefined;
+        this.#chatPanel = undefined;
+        this.#chatToggle = undefined;
+        this.#collapseBtn = undefined;
+    }
+    isCollapsed() {
+        return '1' === this.#root?.getAttribute(MIN_ATTR);
+    }
+    isChatOpen() {
+        return '1' === this.#root?.getAttribute(CHAT_ATTR);
+    }
+    expand() {
+        if (this.#root === undefined || !this.isCollapsed())
+            return;
+        if (this.#transitionLock)
+            return;
+        this.#lockTransition();
+        this.#root.setAttribute(MIN_ATTR, '0');
+        if (this.#fab !== undefined)
+            this.#fab.setAttribute('aria-expanded', 'true');
+        this.#callbacks.onExpand?.();
+        // The chat IS the HUD's content: expanding to a toolbar with nothing above it made the agent's
+        // log something you had to know to go looking for. Unconditional on purpose — the way to a bare
+        // toolbar is the chat's own minimise button, not a preference. `Auto-open chat` is a different
+        // question (should it appear with no click at all, at session start) and stays separate, because
+        // wiring expand to it made session start expand the HUD and the FAB never appeared.
+        // `openChat` re-enters `expand` only when collapsed, and MIN_ATTR is already cleared above.
+        this.openChat();
+        if (this.#dock !== undefined)
+            scheduleSyncDockLayout(this.#dock, this.#root);
+    }
+    collapse() {
+        if (this.#root === undefined)
+            return;
+        this.#transitionLock = false;
+        this.closeChat();
+        this.#settings.close();
+        this.#root.setAttribute(MIN_ATTR, '1');
+        if (this.#fab !== undefined)
+            this.#fab.setAttribute('aria-expanded', 'false');
+        this.#callbacks.onCollapse?.();
+    }
+    openChat() {
+        if (this.#root === undefined)
+            return;
+        if (this.isCollapsed())
+            this.expand();
+        this.#settings.close();
+        if (this.isChatOpen())
+            return;
+        this.#root.setAttribute(CHAT_ATTR, '1');
+        // The panel had no layout while it was closed, so its feed could not follow the newest row.
+        // Now that it does, put it there before it is looked at.
+        const log = this.#root.querySelector('[data-reticle-log]');
+        if (log !== null)
+            settleLogAtLatest(log);
+        this.#chatPanel?.setAttribute('aria-hidden', 'false');
+        this.#chatToggle?.setAttribute('data-active', '1');
+        this.#chatToggle?.setAttribute('aria-pressed', 'true');
+        this.#callbacks.onChatOpen?.();
+        if (this.#dock !== undefined)
+            scheduleSyncDockLayout(this.#dock, this.#root);
+        const input = this.#root.querySelector('[data-reticle-input]');
+        if (input !== null && !input.disabled) {
+            requestAnimationFrame(() => input.focus());
+        }
+    }
+    closeChat() {
+        if (this.#root === undefined || !this.isChatOpen())
+            return;
+        this.#root.removeAttribute(CHAT_ATTR);
+        this.#chatPanel?.setAttribute('aria-hidden', 'true');
+        this.#chatToggle?.setAttribute('data-active', '0');
+        this.#chatToggle?.setAttribute('aria-pressed', 'false');
+        this.#callbacks.onChatClose?.();
+        if (this.#dock !== undefined)
+            scheduleSyncDockLayout(this.#dock, this.#root);
+    }
+    toggleChat() {
+        if (this.isChatOpen())
+            this.closeChat();
+        else
+            this.showChat();
+    }
+    /**
+     * The chat, asked for by a PERSON - so it takes the slot from the report.
+     *
+     * `openChat` is also called by `expand`, which the agent triggers at session start; routing that
+     * through here closed the impact report every time the agent touched the app, which is precisely
+     * when you are reading it.
+     */
+    showChat() {
+        this.#report.close();
+        this.openChat();
+    }
+    /** Pulse the FAB when new activity arrives while collapsed. */
+    pulseFab(active) {
+        this.#fab?.setAttribute('data-pulse', active ? '1' : '0');
+    }
+    #lockTransition() {
+        this.#transitionLock = true;
+        window.setTimeout(() => {
+            this.#transitionLock = false;
+        }, TRANSITION_LOCK_MS);
+    }
+    /**
+     * A click on the page dismisses the SETTINGS popover - and nothing else.
+     *
+     * The chat used to close here too, which was wrong from three directions: Reticle's own clicks
+     * land on the page (synthetic in-page, or a genuine OS event when it drives through CDP), a click
+     * in annotate mode is placing a mark, and a person clicking around their app while watching the
+     * log is not asking for the log to go away. The chat has three deliberate ways out - its minimise
+     * button, the toolbar toggle, and Escape - and that is all it needs.
+     */
+    #onDocPointerDown = (e) => {
+        if (this.#root === undefined || this.#dock === undefined)
+            return;
+        if (!this.#settings.isOpen())
+            return;
+        const target = e.target;
+        if (!(target instanceof Node))
+            return;
+        if (this.#dock.contains(target))
+            return;
+        if (this.#settings.contains(target))
+            return;
+        this.#settings.close();
+    };
+    #onKeyDown = (e) => {
+        if ('Escape' !== e.key || this.#root === undefined)
+            return;
+        const target = e.target;
+        if (target instanceof HTMLElement &&
+            ('INPUT' === target.tagName ||
+                'TEXTAREA' === target.tagName ||
+                true === target.isContentEditable)) {
+            return;
+        }
+        if (this.isChatOpen()) {
+            e.preventDefault();
+            this.closeChat();
+            return;
+        }
+        if (this.#settings.isOpen()) {
+            e.preventDefault();
+            this.#settings.close();
+            return;
+        }
+        if (!this.isCollapsed()) {
+            e.preventDefault();
+            this.collapse();
+        }
+    };
+}
+/** Whether the dock has been dragged off the default bottom-right position. */
+export function isDockDragged(dock) {
+    return '1' === dock.getAttribute(HUD_DRAGGED_ATTR);
+}

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

@@ -1,6 +1,11 @@
 /**
- * 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.
  */
-export declare const PRESENTER_CSS = "\n[data-reticle-glow]{position:fixed;inset:0;pointer-events:none;z-index:2147483600;opacity:0;\n  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);}\n[data-reticle-glow][data-on=\"1\"]{opacity:1;animation:reticle-pulse 1.6s ease-in-out infinite;}\n[data-reticle-glow][data-on=\"1\"][data-busy=\"1\"]{animation:reticle-shimmer 1.1s ease-in-out infinite;}\n@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)}\n  50%{box-shadow:inset 0 0 0 3px rgba(124,127,242,1),inset 0 0 40px 10px rgba(99,102,241,.6)}}\n@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)}\n  50%{box-shadow:inset 0 0 0 3px rgba(140,142,255,1),inset 0 0 48px 12px rgba(99,102,241,.7)}}\n[data-reticle-cursor]{position:fixed;top:0;left:0;width:22px;height:22px;margin:-11px 0 0 -11px;\n  border:2px solid #6366f1;border-radius:50%;background:rgba(99,102,241,.25);pointer-events:none;\n  z-index:2147483646;opacity:0;transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .2s ease;}\n[data-reticle-cursor][data-on=\"1\"]{opacity:1;}\n[data-reticle-cursor]::after{content:\"\";position:absolute;inset:7px;border-radius:50%;background:#6366f1;}\n[data-reticle-ripple]{position:fixed;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;\n  background:rgba(99,102,241,.5);pointer-events:none;z-index:2147483645;animation:reticle-ripple .5s ease-out forwards;}\n@keyframes reticle-ripple{from{transform:scale(.4);opacity:.8}to{transform:scale(5);opacity:0}}\n[data-reticle-ring]{position:fixed;pointer-events:none;z-index:2147483644;border:2px solid #22c55e;border-radius:8px;\n  box-shadow:0 0 0 3px rgba(34,197,94,.25);opacity:0;transition:opacity .15s ease;}\n[data-reticle-ring][data-on=\"1\"]{opacity:1;}\n[data-reticle-hud]{\n  --reticle-accent:#7c83ff;--reticle-accent-soft:rgba(124,131,255,.16);\n  --reticle-bg:rgba(13,15,22,.92);--reticle-bg2:rgba(19,22,32,.88);\n  --reticle-fg:#e9ebf2;--reticle-muted:#9aa0b2;--reticle-faint:#6a7186;\n  --reticle-line:rgba(255,255,255,.09);--reticle-line2:rgba(255,255,255,.05);\n  --reticle-read:#54d2e6;--reticle-ok:#3dd7a6;--reticle-bad:#ff7a7a;\n  --reticle-font:\"Inter\",system-ui,-apple-system,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif;\n  position:fixed;left:50%;right:auto;bottom:20px;box-sizing:border-box;\n  width:384px;height:468px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);\n  display:flex;flex-direction:column;overflow:hidden;text-align:left;z-index:2147483647;pointer-events:none;\n  font-family:var(--reticle-font);font-size:13px;line-height:1.5;color:var(--reticle-fg);-webkit-font-smoothing:antialiased;\n  background:linear-gradient(180deg,var(--reticle-bg),var(--reticle-bg2));\n  /* No backdrop-filter here, deliberately. blur(24px) on this panel was measured as the single most\n     expensive thing the whole SDK does: a backdrop blur must re-sample everything behind it whenever\n     that content changes, and on a page repainting at 60fps that is continuous full-panel work. On\n     the hostile fixture it cost +4.0pp of main thread \u2014 five times the rest of the presenter, and\n     more than every observer combined. Removing it took total main-thread time from 2.15s to 1.67s\n     over an 8s window. The panel background is ~85% opaque, so the glass effect it bought was\n     marginal. If you want it back, add it here and expect to pay that. */\n  border:1px solid var(--reticle-line);border-radius:20px;\n  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);\n  opacity:0;transform:translateX(-50%) translateY(14px) scale(.985);\n  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;}\n[data-reticle-overlay][data-reticle-state=\"paused\"] [data-reticle-hud]{--reticle-accent:#f6b44c;--reticle-accent-soft:rgba(246,180,76,.16);}\n[data-reticle-overlay][data-reticle-state=\"ended\"] [data-reticle-hud]{--reticle-accent:#3dd7a6;--reticle-accent-soft:rgba(61,215,166,.14);}\n[data-reticle-hud]::before{content:\"\";position:absolute;inset:0;border-radius:inherit;pointer-events:none;\n  background:radial-gradient(130% 90% at 50% 0%,var(--reticle-accent-soft),transparent 60%);}\n[data-reticle-hud]>*{position:relative;}\n[data-reticle-hud][data-on=\"1\"]{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}\n/* Click-through: the glassy panel itself never blocks the app \u2014 only its interactive controls\n   capture clicks (buttons / inputs), so a human can click straight through the HUD to the page.\n   The log auto-scrolls, so it stays click-through too (drag-scroll is traded for click-through). */\n[data-reticle-hud] button,[data-reticle-hud] input,[data-reticle-hud] textarea,\n[data-reticle-hud] select,[data-reticle-hud] [contenteditable]{pointer-events:auto;}\n/* When minimised to a pill, the whole bar is the (single) click target to restore. */\n[data-reticle-overlay][data-reticle-min=\"1\"] [data-reticle-hud][data-on=\"1\"]{pointer-events:auto;}\n[data-reticle-hud] .reticle-hud-head{display:flex;align-items:center;gap:8px;flex:none;\n  padding:12px 12px 12px 15px;border-bottom:1px solid var(--reticle-line2);}\n/* Brand block: both marks always in the DOM, CSS picks one off data-reticle-min (see below) so the\n   collapsed/expanded swap needs no JS state. Artwork paints with currentColor, so it inherits\n   --reticle-fg and reads correctly on any HUD surface instead of baking in the export's #FAFAFA. */\n[data-reticle-hud] .reticle-brand{display:inline-flex;align-items:center;flex:none;color:var(--reticle-fg);}\n[data-reticle-hud] .reticle-mark{display:none;height:18px;width:auto;flex:none;}\n[data-reticle-hud] .reticle-wordmark{display:block;height:16px;width:auto;flex:none;}\n/* Visually hidden, still announced \u2014 the marks are aria-hidden artwork, this names the HUD. */\n[data-reticle-hud] .reticle-brand-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;\n  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}\n[data-reticle-hud] .reticle-head-sp{flex:1;}\n[data-reticle-hud] .reticle-live{display:none;flex:1;min-width:0;color:var(--reticle-muted);font-size:12.5px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n[data-reticle-hud] .reticle-maxhint{display:none;flex:none;color:var(--reticle-faint);font-size:13px;line-height:1;}\n[data-reticle-hud] .reticle-act-strip{flex:none;padding:7px 15px;border-bottom:1px solid var(--reticle-line2);background:rgba(0,0,0,.14);}\n[data-reticle-hud] .reticle-act{display:block;color:var(--reticle-muted);font-size:11.5px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n[data-reticle-hud] [data-reticle-min-btn]{flex:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;\n  width:26px;height:26px;border-radius:8px;border:1px solid var(--reticle-line);background:rgba(255,255,255,.04);\n  color:var(--reticle-muted);font-size:15px;line-height:1;transition:background .15s,color .15s,transform .1s;}\n[data-reticle-hud] [data-reticle-min-btn]:hover{color:var(--reticle-fg);background:rgba(255,255,255,.08);}\n[data-reticle-hud] [data-reticle-min-btn]:active{transform:scale(.94);}\n[data-reticle-hud] .reticle-pass{color:var(--reticle-ok);}[data-reticle-hud] .reticle-fail{color:var(--reticle-bad);}\n[data-reticle-hud] .reticle-tally{flex:none;display:inline-flex;align-items:center;gap:8px;font-size:11.5px;\n  font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.01em;}\n[data-reticle-hud] .reticle-tally[hidden]{display:none;}\n[data-reticle-hud] .reticle-tally .reticle-t-pass{color:var(--reticle-ok);}\n[data-reticle-hud] .reticle-tally .reticle-t-fail{color:var(--reticle-bad);}\n[data-reticle-hud] .reticle-tally [data-z=\"1\"]{opacity:.4;}\n@keyframes reticle-tally-pop{0%{transform:scale(1)}38%{transform:scale(1.3)}100%{transform:scale(1)}}\n[data-reticle-hud] .reticle-tally [data-bump=\"1\"]{display:inline-block;animation:reticle-tally-pop .36s cubic-bezier(.16,1,.3,1);}\n[data-reticle-hud] .reticle-chip{display:none;flex:none;font-size:9px;font-weight:600;letter-spacing:.08em;\n  padding:2px 7px;border-radius:6px;vertical-align:middle;}\n[data-reticle-hud] .reticle-chip[data-mode=\"reading\"]{display:inline-block;color:var(--reticle-read);\n  background:rgba(84,210,230,.12);border:1px solid rgba(84,210,230,.32);}\n[data-reticle-hud] .reticle-chip[data-mode=\"acting\"]{display:inline-block;color:var(--reticle-accent);\n  background:var(--reticle-accent-soft);border:1px solid var(--reticle-accent);}\n[data-reticle-hud] .reticle-chip[data-mode=\"idle\"]{display:none;}\n[data-reticle-overlay][data-reticle-min=\"1\"] [data-reticle-hud]{height:50px;border-radius:25px;cursor:pointer;}\n[data-reticle-overlay][data-reticle-min=\"1\"] [data-reticle-hud] .reticle-hud-head{border-bottom:none;height:50px;padding:0 12px 0 16px;}\n[data-reticle-overlay][data-reticle-min=\"1\"] [data-reticle-hud] .reticle-chip,\n[data-reticle-overlay][data-reticle-min=\"1\"] [data-reticle-hud] .reticle-head-sp,\n[data-reticle-overlay][data-reticle-min=\"1\"] [data-reticle-hud] [data-reticle-min-btn],\n[data-reticle-overlay][data-reticle-min=\"1\"] [data-reticle-hud] .reticle-ctl,\n[data-reticle-overlay][data-reticle-min=\"1\"] [data-reticle-hud] .reticle-badge,\n[data-reticle-overlay][data-reticle-min=\"1\"] [data-reticle-hud] .reticle-act-strip,\n[data-reticle-overlay][data-reticle-min=\"1\"] [data-reticle-hud] [data-reticle-log],\n[data-reticle-overlay][data-reticle-min=\"1\"] [data-reticle-hud] [data-reticle-foot],\n[data-reticle-overlay][data-reticle-min=\"1\"] [data-reticle-hud] .reticle-banner{display:none;}\n/* Collapsed to a pill: mark only, beside the dot. Expanded: the full wordmark. */\n[data-reticle-overlay][data-reticle-min=\"1\"] [data-reticle-hud] .reticle-wordmark{display:none;}\n[data-reticle-overlay][data-reticle-min=\"1\"] [data-reticle-hud] .reticle-mark{display:block;}\n[data-reticle-overlay][data-reticle-min=\"1\"] [data-reticle-hud] .reticle-live{display:block;}\n[data-reticle-overlay][data-reticle-min=\"1\"] [data-reticle-hud] .reticle-maxhint{display:inline-flex;}\n[data-reticle-mode=\"reading\"] [data-reticle-glow][data-on=\"1\"]{\n  box-shadow:inset 0 0 0 3px rgba(34,211,238,.9),inset 0 0 28px 6px rgba(34,211,238,.4);}\n[data-reticle-mode=\"reading\"] [data-reticle-ring]{border-color:#22d3ee;\n  box-shadow:0 0 0 3px rgba(34,211,238,.25);}\n[data-reticle-overlay][data-reticle-throttled=\"1\"] [data-reticle-glow][data-on=\"1\"]{\n  box-shadow:inset 0 0 0 3px rgba(251,191,36,.9),inset 0 0 28px 6px rgba(251,191,36,.45);}\n[data-reticle-overlay][data-reticle-throttled=\"1\"] [data-reticle-hud]{--reticle-accent:#fbbf24;--reticle-accent-soft:rgba(251,191,36,.16);}\n/* The two INFINITE animations \u2014 the header dot and the border glow \u2014 are pure decoration and were\n   blinking regardless of the user's motion preference. Everything else the presenter animates is a\n   one-shot (ripple, tally pop) or a transition, which reduce-motion tolerates. */\n@media (prefers-reduced-motion:reduce){\n  [data-reticle-glow][data-on=\"1\"],\n  [data-reticle-glow][data-on=\"1\"][data-busy=\"1\"]{animation:none;}}\n\n[data-reticle-log]{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;\n  gap:7px;padding:12px 14px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent;}\n[data-reticle-log]::-webkit-scrollbar{width:9px;}\n[data-reticle-log]::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:9px;border:2px solid transparent;background-clip:content-box;}\n[data-reticle-log]::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.26);background-clip:content-box;}\n[data-reticle-log-row]{display:flex;align-items:baseline;gap:8px;font-size:12px;line-height:1.45;\n  animation:reticle-row-in .26s cubic-bezier(.16,1,.3,1);}\n@keyframes reticle-row-in{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}\n[data-reticle-log-ts]{flex:none;color:var(--reticle-faint);font-size:10px;font-variant-numeric:tabular-nums;padding-top:1px;}\n[data-reticle-log] .reticle-log-text{flex:1;min-width:0;color:#d6dae4;overflow-wrap:anywhere;word-break:break-word;}\n[data-reticle-log] .reticle-res{flex:none;font-weight:700;}\n[data-reticle-log-row][data-kind=\"human\"]{align-self:flex-end;max-width:88%;\n  background:var(--reticle-accent-soft);border:1px solid var(--reticle-accent);border-radius:13px 13px 4px 13px;padding:6px 11px;}\n[data-reticle-log-row][data-kind=\"human\"] [data-reticle-log-ts]{display:none;}\n[data-reticle-log-row][data-kind=\"human\"] .reticle-log-text{color:var(--reticle-fg);}\n\n\n[data-reticle-hud] .reticle-ctl{pointer-events:auto;cursor:pointer;flex:none;display:inline-flex;align-items:center;justify-content:center;\n  height:26px;padding:0 11px;border-radius:8px;border:1px solid var(--reticle-line);background:rgba(255,255,255,.04);\n  color:var(--reticle-muted);font-family:var(--reticle-font);font-size:11px;font-weight:500;letter-spacing:.01em;line-height:1;\n  transition:background .15s,color .15s,border-color .15s,transform .1s;}\n[data-reticle-hud] .reticle-ctl:hover{color:var(--reticle-fg);background:rgba(255,255,255,.09);}\n[data-reticle-hud] .reticle-ctl:active{transform:scale(.95);}\n[data-reticle-hud] .reticle-ctl:disabled{opacity:.35;cursor:default;}\n[data-reticle-hud] [data-reticle-end]{color:#ff9aa2;border-color:rgba(255,107,107,.22);}\n[data-reticle-hud] [data-reticle-end]:hover{color:#ff7a7a;border-color:rgba(255,107,107,.5);background:rgba(255,107,107,.1);}\n[data-reticle-hud] .reticle-badge{display:none;align-items:center;flex:none;font-weight:600;letter-spacing:.1em;font-size:9px;\n  color:var(--reticle-accent);border:1px solid var(--reticle-accent);background:var(--reticle-accent-soft);padding:2px 8px;border-radius:999px;}\n[data-reticle-overlay][data-reticle-state=\"paused\"] [data-reticle-badge]{display:inline-flex;}\n[data-reticle-hud] [data-reticle-foot]{flex:none;padding:10px 12px 12px;border-top:1px solid var(--reticle-line2);background:rgba(0,0,0,.16);}\n[data-reticle-hud] .reticle-composer{display:flex;align-items:flex-end;gap:6px;background:rgba(255,255,255,.05);\n  border:1px solid var(--reticle-line);border-radius:14px;padding:5px 6px 5px 14px;transition:border-color .15s,box-shadow .15s;}\n[data-reticle-hud] .reticle-composer:focus-within{border-color:var(--reticle-accent);box-shadow:0 0 0 3px var(--reticle-accent-soft);}\n[data-reticle-hud] .reticle-msg{flex:1;min-width:0;pointer-events:auto;background:transparent;border:none;outline:none;resize:none;\n  box-sizing:border-box;color:var(--reticle-fg);font-family:var(--reticle-font);font-size:13px;line-height:18px;\n  height:28px;min-height:28px;max-height:96px;padding:5px 0;overflow-y:auto;\n  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent;}\n[data-reticle-hud] .reticle-msg::-webkit-scrollbar{width:9px;}\n[data-reticle-hud] .reticle-msg::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:9px;border:2px solid transparent;background-clip:content-box;}\n[data-reticle-hud] .reticle-msg::placeholder{color:var(--reticle-faint);}\n[data-reticle-hud] .reticle-msg:disabled{opacity:.5;}\n[data-reticle-hud] .reticle-send{flex:none;width:30px;height:30px;padding:0;border-radius:10px;border:none;cursor:pointer;pointer-events:auto;\n  background:var(--reticle-accent);color:#0b0d14;display:inline-flex;align-items:center;justify-content:center;transition:filter .15s,transform .1s;}\n[data-reticle-hud] .reticle-send svg{display:block;}\n[data-reticle-hud] .reticle-send:hover{filter:brightness(1.12);}\n[data-reticle-hud] .reticle-send:active{transform:scale(.9);}\n[data-reticle-hud] .reticle-send:disabled{opacity:.4;cursor:default;}\n[data-reticle-hud] .reticle-banner{display:none;flex:none;padding:8px 15px;color:var(--reticle-accent);\n  font-size:11.5px;font-weight:500;border-bottom:1px solid var(--reticle-line2);background:var(--reticle-accent-soft);}\n[data-reticle-overlay][data-reticle-state=\"ended\"] [data-reticle-banner]{display:block;}\n/* Export row: hidden during a live session; revealed when ended so the run can be copied/saved. */\n[data-reticle-hud] .reticle-export{display:none;align-items:center;gap:8px;margin-top:9px;}\n[data-reticle-overlay][data-reticle-state=\"ended\"] [data-reticle-hud] .reticle-export{display:flex;}\n[data-reticle-hud] .reticle-export-msg{color:var(--reticle-ok);font-size:11px;opacity:0;transition:opacity .15s;}\n[data-reticle-hud] .reticle-export-msg[data-show=\"1\"]{opacity:1;}\n[data-reticle-overlay][data-reticle-state=\"paused\"] [data-reticle-glow][data-on=\"1\"]{animation:none;\n  box-shadow:inset 0 0 0 3px rgba(246,180,76,.9),inset 0 0 30px 6px rgba(246,180,76,.4);}\n[data-reticle-overlay][data-reticle-state=\"ended\"] [data-reticle-glow][data-on=\"1\"]{animation:none;\n  box-shadow:inset 0 0 0 2px rgba(61,215,166,.55);}\n/* Handoff tones tell the human the agent's mode at a glance. waiting = calm teal \"your turn\" (no\n   alarm); ask = amber \"answer me\" with a pulse; warn = amber \"agent crashed\" with a pulse. Each leads\n   the banner with an icon and overrides the calm ended-green accent. */\n[data-reticle-overlay][data-reticle-tone=\"waiting\"] [data-reticle-hud]{--reticle-accent:#38bdf8;--reticle-accent-soft:rgba(56,189,248,.16);}\n[data-reticle-overlay][data-reticle-tone=\"waiting\"] [data-reticle-banner]{font-weight:600;color:#7dd3fc;}\n[data-reticle-overlay][data-reticle-tone=\"waiting\"] [data-reticle-banner]::before{content:\"\\270B  \";}\n[data-reticle-overlay][data-reticle-tone=\"waiting\"] [data-reticle-glow][data-on=\"1\"]{animation:none;\n  box-shadow:inset 0 0 0 2px rgba(56,189,248,.5);}\n[data-reticle-overlay][data-reticle-tone=\"ask\"] [data-reticle-hud],\n[data-reticle-overlay][data-reticle-tone=\"warn\"] [data-reticle-hud]{--reticle-accent:#fb923c;--reticle-accent-soft:rgba(251,146,60,.18);}\n[data-reticle-overlay][data-reticle-tone=\"ask\"] [data-reticle-banner],\n[data-reticle-overlay][data-reticle-tone=\"warn\"] [data-reticle-banner]{font-weight:600;color:#fdba74;}\n[data-reticle-overlay][data-reticle-tone=\"ask\"] [data-reticle-banner]::before{content:\"\\2753  \";}\n[data-reticle-overlay][data-reticle-tone=\"warn\"] [data-reticle-banner]::before{content:\"\\26A0\\FE0F  \";}\n[data-reticle-overlay][data-reticle-tone=\"ask\"] [data-reticle-glow][data-on=\"1\"],\n[data-reticle-overlay][data-reticle-tone=\"warn\"] [data-reticle-glow][data-on=\"1\"]{animation:reticle-warn-pulse 1.5s ease-in-out infinite;\n  box-shadow:inset 0 0 0 2px rgba(251,146,60,.7);}\n@keyframes reticle-warn-pulse{0%,100%{box-shadow:inset 0 0 0 2px rgba(251,146,60,.32);}\n  50%{box-shadow:inset 0 0 0 3px rgba(251,146,60,.85),inset 0 0 26px 5px rgba(251,146,60,.34);}}\n/* Replay-a-flow row: the human re-runs a saved flow with no agent. Hidden until flows are pushed.\n   Bounded + self-scrolling: it sits between the flex:1 log and the flex:none composer, so without a\n   height cap a long flow list would squeeze the log to nothing and push the message input past the\n   panel's overflow:hidden clip. flex:none + max-height + overflow-y keep the log and input always\n   visible; extra flow chips scroll inside this section instead of growing the panel. */\n[data-reticle-hud] .reticle-flows{display:none;flex:none;flex-wrap:wrap;align-content:flex-start;gap:6px;\n  padding:9px 12px;border-top:1px solid var(--reticle-line2);max-height:88px;overflow-y:auto;overscroll-behavior:contain;}\n[data-reticle-hud] .reticle-flows[data-has=\"1\"]{display:flex;}\n[data-reticle-hud] .reticle-flows::-webkit-scrollbar{width:9px;}\n[data-reticle-hud] .reticle-flows::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:9px;border:2px solid transparent;background-clip:content-box;}\n[data-reticle-hud] .reticle-flows-cap{flex:0 0 100%;margin-bottom:1px;color:var(--reticle-faint);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;}\n[data-reticle-hud] .reticle-flow{pointer-events:auto;cursor:pointer;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;\n  border-radius:7px;border:1px solid var(--reticle-line);background:rgba(255,255,255,.04);color:var(--reticle-muted);\n  font-family:var(--reticle-font);font-size:11px;font-weight:500;transition:background .15s,color .15s,border-color .15s,transform .1s;}\n[data-reticle-hud] .reticle-flow:hover{color:var(--reticle-fg);background:var(--reticle-accent-soft);border-color:var(--reticle-accent);}\n[data-reticle-hud] .reticle-flow:active{transform:scale(.95);}\n";
+/**
+ * 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 declare const Z_OVERLAY = 2147483600;
+export declare const PRESENTER_CSS: string;