@reticlehq/browser 3.1.0 → 3.3.0

package/dist/presenter/presenter-shell.js

@@ -1,10 +1,14 @@
+import { appModalOpen } from '../dom/dom-ignore.js';
 import { PresenterReport, reportPanelHtml } from './presenter-report.js';
 import { paintToolbarAccount, TOOLBAR_ACCOUNT_ATTR } from './presenter-workspace.js';
 import { mountAccountControl } from './presenter-account.js';
 import { paintSettingsAccount } from './presenter-settings.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, SETTINGS_ATTR, SETTINGS_BTN_ATTR, } from './presenter-config.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, SETTINGS_ATTR, SETTINGS_BTN_ATTR, MINIMISED_STORAGE_KEY, } from './presenter-config.js';
+import { offerDismissed } from './carousel/offer-card.js';
+import { paintCarousel } from './carousel/carousel.js';
+import { panelSlides } from './carousel/panel-slides.js';
 import { BRAND_NAME, FAB_TOGGLE_HTML, MARK_SVG } from './chrome/presenter-brand.js';
-import { settleLogAtLatest } from './chrome/presenter-log.js';
+import { DATA_RETICLE_LOG, settleLogAtLatest } from './chrome/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 './icons/presenter-icons.js';
@@ -45,6 +49,9 @@ export class HudShell {
     #callbacks;
     #pushedAccount;
     #accountTeardown;
+    paintHarness(config) {
+        this.#settings.paintHarness(config);
+    }
     paintAccount(account, dashboardUrl, details = {}) {
         this.#pushedAccount = { account, dashboardUrl, details };
         if (this.#root === undefined)
@@ -52,6 +59,34 @@ export class HudShell {
         paintToolbarAccount(this.#root, account, dashboardUrl, details);
         paintSettingsAccount(this.#root, account, dashboardUrl, details);
     }
+    #pushedOffer;
+    paintOffer(offer) {
+        this.#pushedOffer = offer;
+        this.#paintCarousel();
+    }
+    #paintCarousel() {
+        const log = this.#root?.querySelector(`[${DATA_RETICLE_LOG}]`);
+        if (!(log instanceof HTMLElement))
+            return;
+        const declined = offerDismissed(this.#storage());
+        paintCarousel(log, panelSlides(this.#pushedOffer, declined), this.#sessionStorage());
+    }
+    #sessionStorage() {
+        try {
+            return globalThis.sessionStorage;
+        }
+        catch {
+            return undefined;
+        }
+    }
+    #storage() {
+        try {
+            return globalThis.localStorage;
+        }
+        catch {
+            return undefined;
+        }
+    }
     constructor(callbacks = {}) {
         this.#callbacks = callbacks;
         this.#settings = new PresenterSettingsPanel({
@@ -228,6 +263,7 @@ export class HudShell {
             const pushed = this.#pushedAccount;
             this.paintAccount(pushed.account, pushed.dashboardUrl, pushed.details);
         }
+        this.#paintCarousel();
     }
     teardown() {
         this.#accountTeardown?.();
@@ -261,6 +297,7 @@ export class HudShell {
             return;
         this.#lockTransition();
         this.#root.setAttribute(MIN_ATTR, '0');
+        rememberMinimised(false);
         if (this.#fab !== undefined)
             this.#fab.setAttribute('aria-expanded', 'true');
         this.#callbacks.onExpand?.();
@@ -275,6 +312,7 @@ export class HudShell {
         this.closeChat();
         this.#settings.close();
         this.#root.setAttribute(MIN_ATTR, '1');
+        rememberMinimised(true);
         if (this.#fab !== undefined)
             this.#fab.setAttribute('aria-expanded', 'false');
         this.#callbacks.onCollapse?.();
@@ -345,6 +383,10 @@ export class HudShell {
     #onKeyDown = (e) => {
         if ('Escape' !== e.key || this.#root === undefined)
             return;
+        if (e.defaultPrevented)
+            return;
+        if (appModalOpen(document))
+            return;
         const target = e.target;
         if (target instanceof HTMLElement &&
             ('INPUT' === target.tagName ||
@@ -353,18 +395,36 @@ export class HudShell {
             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();
         }
     };
 }
+export function wasMinimised() {
+    try {
+        return '1' === globalThis.sessionStorage.getItem(MINIMISED_STORAGE_KEY);
+    }
+    catch {
+        return false;
+    }
+}
+export function rememberMinimised(minimised) {
+    try {
+        if (minimised)
+            globalThis.sessionStorage.setItem(MINIMISED_STORAGE_KEY, '1');
+        else
+            globalThis.sessionStorage.removeItem(MINIMISED_STORAGE_KEY);
+    }
+    catch {
+    }
+}
+export function shouldAutoOpenChat(autoOpenChat) {
+    return autoOpenChat && !wasMinimised();
+}

package/dist/presenter/presenter-styles.js

@@ -6,6 +6,9 @@ import { SETTINGS_CSS } from './presenter-settings-styles.js';
 import { ACCOUNT_CSS } from './presenter-account-styles.js';
 import { HUD_CHROME_CSS, HUD_LOG_WELL_CSS } from './chrome/presenter-hud-chrome.js';
 import { REPORT_CSS } from './presenter-report-styles.js';
+import { OFFER_CSS } from './carousel/offer-card.js';
+import { TALK_CSS } from './carousel/talk-card.js';
+import { CAROUSEL_CSS } from './carousel/carousel.js';
 export { Z_OVERLAY };
 export const PRESENTER_CSS = `
 [data-reticle-overlay]{position:fixed;inset:0;pointer-events:none;z-index:${String(Z_OVERLAY)};}
@@ -63,5 +66,8 @@ ${SHELL_CSS}
 ${SETTINGS_CSS}
 ${REPORT_CSS}
 ${ACCOUNT_CSS}
+${OFFER_CSS}
+${TALK_CSS}
+${CAROUSEL_CSS}
 ${LOG_CSS}
 ${CONTROLS_CSS}`;

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

@@ -1,14 +1,7 @@
 import type { AccountState } from '@reticlehq/core';
 import { type AccountDetails } from './presenter-account.js';
 export declare const TOOLBAR_ACCOUNT_ATTR = "data-reticle-toolbar-account";
-export declare function readWorkspaceRoot(): string | undefined;
 export declare function workspaceFolderLabel(root: string): string;
-export declare function readProjectIdFromUrl(): string | undefined;
-export declare function workspaceSummary(): {
-    folder: string;
-    root?: string;
-    projectId?: string;
-};
 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

@@ -14,7 +14,7 @@ const PROJECT_LABEL = 'Project';
 const COPY_PATH_LABEL = 'Copy path';
 const COPIED_PATH_LABEL = 'Copied';
 const WORKSPACE_FALLBACK = 'This page';
-export function readWorkspaceRoot() {
+function readWorkspaceRoot() {
     const value = globalThis[RETICLE_ROOT_GLOBAL];
     return 'string' === typeof value && value.length > 0 ? value : undefined;
 }
@@ -24,13 +24,13 @@ export function workspaceFolderLabel(root) {
     const last = parts[parts.length - 1];
     return last !== undefined && last.length > 0 ? last : WORKSPACE_FALLBACK;
 }
-export function readProjectIdFromUrl() {
+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() {
+function workspaceSummary() {
     const root = readWorkspaceRoot();
     const projectId = readProjectIdFromUrl();
     const folder = root !== undefined ? workspaceFolderLabel(root) : WORKSPACE_FALLBACK;
@@ -106,6 +106,7 @@ export function paintWorkspace(root) {
     }
 }
 export function mountWorkspaceSelector(root) {
+    const ac = new AbortController();
     paintWorkspace(root);
     const btn = root.querySelector(`[${WORKSPACE_BTN_ATTR}]`);
     const menu = root.querySelector(`[${WORKSPACE_MENU_ATTR}]`);
@@ -183,13 +184,12 @@ export function mountWorkspaceSelector(root) {
     btn.addEventListener('click', onBtnClick);
     menu.addEventListener('pointerdown', (e) => e.stopPropagation());
     copyBtn?.addEventListener('click', onCopy);
-    document.addEventListener('pointerdown', onDocPointer);
-    document.addEventListener('keydown', onKeyDown);
+    document.addEventListener('pointerdown', onDocPointer, { signal: ac.signal });
+    document.addEventListener('keydown', onKeyDown, { signal: ac.signal });
     return () => {
         btn.removeEventListener('click', onBtnClick);
         copyBtn?.removeEventListener('click', onCopy);
-        document.removeEventListener('pointerdown', onDocPointer);
-        document.removeEventListener('keydown', onKeyDown);
+        ac.abort();
     };
 }
 export function paintToolbarAccount(root, account, dashboardUrl, details = {}) {

package/dist/presenter/presenter.js

@@ -3,19 +3,22 @@ import { refs } from '../dom/addressing/refs.js';
 import { unreachableStripText } from '../transport/unreachable-message.js';
 import { actionVerb } from './chrome/presenter-verbs.js';
 import { nativeSetTimeout, nativeClearTimeout, nativeNow } from '../timers/native/native-timers.js';
-import { LOG_KIND, CHIP_LABEL, DATA_RETICLE_LOG, clampLogMax, formatElapsed, humanDuration, appendLogRow, } from './chrome/presenter-log.js';
+import { LOG_KIND, CHIP_LABEL, DATA_RETICLE_LOG, clampLogMax, formatElapsed, humanDuration, appendLogRow, clearLogRows, trimLogRows, } from './chrome/presenter-log.js';
 import { PRESENTER_CSS } from './presenter-styles.js';
 import { HudShell } from './presenter-shell.js';
 import { parseImpactSnapshot } from './chrome/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, STATE_ATTR, UNREACHABLE_STATE, 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 { 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, STATE_ATTR, UNREACHABLE_STATE, GLOW_FADE_MS, GLOW_ON, GLOW_OFF, DATA_ON, THROTTLED_ATTR, LIVENESS_ATTR, MARKERS_BTN_ATTR, CLEAR_MARKS_ATTR, COPY_MARKS_ATTR, MARKS_ROW_ATTR, MARK_COUNT_ATTR, } from './presenter-config.js';
 import { buildRunState } from './presenter-run-state.js';
 import { moveCursor, ringAround, spawnRipple, pace } from './chrome/presenter-effects.js';
 import { GlowController } from './presenter-glow.js';
 import { PresenterIcon, PRESENTER_ICON_SIZE, hiIcon } from './icons/presenter-icons.js';
 import { renderTally } from './chrome/presenter-tally.js';
-import { 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_MARKS_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';
+import { shouldAutoOpenChat } from './presenter-shell.js';
+import { installHudTelemetry } from './hud-telemetry.js';
+const COPIED_FLASH_MS = 1600;
 export { GlowPhase } from './presenter-config.js';
 export { LOG_KIND, LOG_RESULT } from './chrome/presenter-log.js';
 export class Presenter {
@@ -50,6 +53,8 @@ export class Presenter {
     #log;
     #logBaseMs;
     #onControl;
+    #onHudUse;
+    #hudTelemetryTeardown;
     #panel;
     #shell;
     #annotator;
@@ -70,6 +75,7 @@ export class Presenter {
         });
         this.#logMax = clampLogMax(options.logMax);
         this.#onControl = options.onControl;
+        this.#onHudUse = options.onHudUse;
         this.#panel = new ControlPanel({
             emit: (kind, text) => this.#onControl?.(text !== undefined ? { kind, text } : { kind }),
             logHuman: (text) => {
@@ -93,6 +99,7 @@ export class Presenter {
                 },
                 onHideUntilRestart: () => this.#applyHideUntilRestart(),
                 onSettingsChange: (s) => this.#onSettingsChange(s),
+                onHarness: (enabled) => this.#onControl?.({ kind: HumanControlKind.HARNESS, text: enabled ? 'on' : 'off' }),
             },
         });
     }
@@ -119,6 +126,8 @@ export class Presenter {
             const snapshot = parseImpactSnapshot(a['snapshot']);
             if (snapshot !== undefined) {
                 this.#shell.report.setSnapshot(snapshot);
+                this.#shell.paintOffer(snapshot.harnessOffer);
+                this.#shell.paintHarness(snapshot.harnessConfig);
                 this.#shell.paintAccount(snapshot.account, snapshot.dashboardUrl, {
                     projectName: snapshot.projectName,
                     dashboardUrl: snapshot.dashboardUrl,
@@ -156,7 +165,7 @@ export class Presenter {
       <div data-reticle-glow></div>
       <div data-reticle-cursor></div>
       <div data-reticle-ring></div>
-      ${HudShell.dockHtml(actStrip, CONTROLS_BANNER_HTML, DATA_RETICLE_LOG, CONTROLS_FLOWS_HTML, CONTROLS_FOOT_HTML)}`;
+      ${HudShell.dockHtml(actStrip, CONTROLS_BANNER_HTML, DATA_RETICLE_LOG, CONTROLS_MARKS_HTML + CONTROLS_FLOWS_HTML, CONTROLS_FOOT_HTML)}`;
         document.body.appendChild(root);
         this.#root = root;
         this.#glow = root.querySelector('[data-reticle-glow]') ?? undefined;
@@ -176,6 +185,9 @@ export class Presenter {
         syncPageBlocker(root, getPresenterSettings(), false);
         this.#glowCtl.setElements(this.#glow, this.#cursor);
         this.#panel.mount(root, this.#glow);
+        if (this.#onHudUse !== undefined) {
+            this.#hudTelemetryTeardown = installHudTelemetry(document, root, this.#onHudUse);
+        }
         this.setMode(this.#mode);
         this.#renderTally();
     }
@@ -187,7 +199,23 @@ export class Presenter {
         const markers = root.querySelector(`[${MARKERS_BTN_ATTR}]`);
         const clear = root.querySelector(`[${CLEAR_MARKS_ATTR}]`);
         const count = root.querySelector(`[${MARK_COUNT_ATTR}]`);
+        const copy = root.querySelector(`[${COPY_MARKS_ATTR}]`);
+        const row = root.querySelector(`[${MARKS_ROW_ATTR}]`);
         const chrome = {};
+        if (row instanceof HTMLElement)
+            chrome.copyRow = row;
+        let marks = annotator.markCount;
+        chrome.onCount = (n) => {
+            if (0 === marks && n > 0)
+                this.#shell.openChat();
+            marks = n;
+        };
+        if (copy instanceof HTMLElement) {
+            copy.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.#copyMarks(annotator, copy);
+            });
+        }
         if (markers instanceof HTMLElement)
             chrome.markersBtn = markers;
         if (clear instanceof HTMLElement)
@@ -198,6 +226,14 @@ export class Presenter {
         annotator.setAccent(statusTheme(getPresenterSettings().statusThemeId).active);
         this.#syncAnnotator();
     }
+    #copyMarks(annotator, btn) {
+        const text = annotator.agentPrompt(window.location.href);
+        void navigator.clipboard?.writeText(text).catch(() => undefined);
+        btn.setAttribute('data-copied', '1');
+        nativeSetTimeout(() => btn.removeAttribute('data-copied'), COPIED_FLASH_MS);
+        if (getPresenterSettings().clearOnCopy)
+            annotator.clearAll();
+    }
     #syncAnnotator() {
         const live = !this.#shell.isCollapsed() && this.#shell.isAnnotateOn();
         this.#annotator?.toggle(live);
@@ -210,6 +246,8 @@ export class Presenter {
         if (this.#heartbeatTimer !== undefined)
             nativeClearTimeout(this.#heartbeatTimer);
         this.#heartbeatTimer = undefined;
+        this.#hudTelemetryTeardown?.();
+        this.#hudTelemetryTeardown = undefined;
         this.#shell.teardown();
         this.#panel.teardown();
         this.#sessionActive = false;
@@ -234,7 +272,7 @@ export class Presenter {
         this.#showSession();
         this.#glowCtl.resetActivity(this.#now());
         this.#startHeartbeat();
-        if (getPresenterSettings().autoOpenChat) {
+        if (shouldAutoOpenChat(getPresenterSettings().autoOpenChat)) {
             this.#shell.openChat();
         }
     }
@@ -247,7 +285,7 @@ export class Presenter {
         this.#hud?.setAttribute(DATA_ON, GLOW_ON);
         this.#lastActionText = unreachableStripText(url, attempts);
         this.#paintActStrip(this.#lastActionText, true);
-        if (getPresenterSettings().autoOpenChat)
+        if (shouldAutoOpenChat(getPresenterSettings().autoOpenChat))
             this.#shell.openChat();
     }
     #showSession() {
@@ -410,7 +448,7 @@ export class Presenter {
         this.#runLog = [];
         this.#tallied = { passes: 0, fails: 0 };
         if (this.#log !== undefined)
-            this.#log.replaceChildren();
+            clearLogRows(this.#log);
         this.#renderTally();
     }
     #applyHideUntilRestart() {
@@ -474,9 +512,7 @@ export class Presenter {
     #pruneLog() {
         if (this.#log === undefined)
             return;
-        while (this.#log.childElementCount > this.#logMax) {
-            this.#log.firstElementChild?.remove();
-        }
+        trimLogRows(this.#log, this.#logMax);
     }
     setThrottled(throttled) {
         this.#root?.setAttribute(THROTTLED_ATTR, throttled ? '1' : '0');

package/dist/presenter/tour/tour-view.js

@@ -111,9 +111,13 @@ export const TOUR_CSS = `
 [${TOUR_ATTR}] .reticle-tour-blocker{position:absolute;pointer-events:auto;z-index:0;}
 /* Ringed slides dim through the ring's own 9999px shadow, which leaves a hole over the thing being
    pointed at. The scrim would cover that hole -- dimming the HUD the slide is ABOUT, and washing
-   the page twice (~80% rather than 55%). Cleared, not removed: it is also what swallows clicks
-   meant for the app underneath, and a tour that lets you click through is not a tour. */
-[${TOUR_ATTR}] .reticle-tour-scrim.is-clear{background:transparent;backdrop-filter:none;}
+   the page twice (~80% rather than 55%).
+   It is cleared for the clicks too, and that half was missing. A scrim blocks only while it is
+   VISIBLY blocking: reported from the field on 3.1.0 by several users, one of whom removed the
+   plugin, because a cleared scrim went on eating every press on a page that looked lit and
+   reachable. An overlay that looks transparent and behaves opaque reads as the app being broken. */
+[${TOUR_ATTR}] .reticle-tour-scrim.is-clear{background:transparent;backdrop-filter:none;
+  pointer-events:none;}
 /* Above the ring, and the z-index is the whole point.
    The ring is appended after the card, and both are positioned with an auto z-index, so the ring
    painted on top of it -- and the ring's dimming IS a 9999px shadow, which therefore fell across the

package/dist/presenter/tour/tour.d.ts

@@ -11,6 +11,9 @@ export interface TourDeps {
     readonly projectId: string;
     readonly isDriving: () => boolean;
     readonly search?: string;
+    readonly navigator?: {
+        readonly webdriver?: boolean;
+    };
     readonly copy?: (text: string) => Promise<boolean> | boolean;
     readonly select?: (element: Element) => void;
 }

package/dist/presenter/tour/tour.js

@@ -1,6 +1,7 @@
 import { COPIED_LABEL, COPY_FLASH_MS, COPY_LABEL, COPY_MANUAL_LABEL, TOUR_ATTR, TOUR_CSS, TOUR_PROMPT_ATTR, TOUR_TARGET_ATTR, holeRects, isInteractive, isLastSlide, nextIndex, slideHtml, tourSlides, } from './tour-view.js';
 import { TourAnchor } from '@reticlehq/core/tour';
 import { RETICLE_URL_PARAM } from '@reticlehq/core';
+import { appModalOpen } from '../../dom/dom-ignore.js';
 export const TOUR_SEEN_KEY_PREFIX = 'reticle.tour.seen.';
 const APP_SELECTORS = ['main', '#root', '#app'];
 const HUD_PARTS = ['[data-reticle-hud]', '[data-reticle-chat-panel]'];
@@ -79,6 +80,8 @@ export function mountTour(deps) {
         return undefined;
     if (openedByReticle(deps.search))
         return undefined;
+    if (true === deps.navigator?.webdriver)
+        return undefined;
     if (tourAlreadySeen(deps.storage, deps.projectId))
         return undefined;
     const doc = deps.document;
@@ -92,15 +95,27 @@ export function mountTour(deps) {
     let index = 0;
     let open = true;
     let detachKeys = () => undefined;
-    const close = () => {
+    let stopWatch = () => undefined;
+    const remove = () => {
         if (!open)
             return;
         open = false;
         detachKeys();
-        markSeen(deps.storage, deps.projectId);
+        stopWatch();
         root.remove();
         style.remove();
     };
+    const close = () => {
+        if (!open)
+            return;
+        markSeen(deps.storage, deps.projectId);
+        remove();
+    };
+    const yieldToDrive = () => {
+        if (!deps.isDriving())
+            return;
+        remove();
+    };
     const draw = () => {
         const slide = slides[index];
         if (undefined === slide)
@@ -208,6 +223,8 @@ export function mountTour(deps) {
     const onKey = (event) => {
         if (!open)
             return;
+        if (appModalOpen(doc))
+            return;
         const step = 'ArrowRight' === event.key ? 1 : 'ArrowLeft' === event.key ? -1 : 0;
         if ('Escape' === event.key) {
             event.preventDefault();
@@ -229,6 +246,13 @@ export function mountTour(deps) {
     };
     draw();
     doc.body.appendChild(root);
+    const overlay = doc.querySelector('[data-reticle-overlay]');
+    if (null !== overlay) {
+        const observer = new MutationObserver(yieldToDrive);
+        observer.observe(overlay, { attributes: true, attributeFilter: ['data-reticle-mode'] });
+        stopWatch = () => observer.disconnect();
+        yieldToDrive();
+    }
     return {
         destroy: close,
         isOpen: () => open,

package/dist/recorder/recorder.js

@@ -1,4 +1,4 @@
-import { ActionType, AnchorKind, AnnotationKind, DEGRADED_ANCHOR_ROLE, EventType, FLOW_FILE_VERSION, FlowStepTool, RecorderPhase, } from '@reticlehq/core';
+import { ActionType, AnchorKind, AnnotationKind, DEGRADED_ANCHOR_ROLE, EventType, FLOW_FILE_VERSION, FlowStepTool, RecorderPhase, PredicateKind, } from '@reticlehq/core';
 import { REDACTED_VALUE } from '@reticlehq/core';
 import { sourceFromDom } from '../dom/addressing/source.js';
 import { getAccessibleName, getRole, isSensitiveField } from '../dom/a11y.js';
@@ -83,17 +83,20 @@ export function compileRecording(name, steps, annotations, createdAt, startPath)
         }
         if (ann.kind === AnnotationKind.SUCCESS_STATE) {
             if (ann.signal !== undefined)
-                success = { signal: ann.signal };
+                success = { kind: PredicateKind.SIGNAL, name: ann.signal };
             continue;
         }
         const target = out.at(-1);
         if (target === undefined)
             continue;
         if (ann.kind === AnnotationKind.ASSERT_SIGNAL && ann.signal !== undefined) {
-            target.expect = { ...target.expect, signal: ann.signal };
+            target.expect = alsoAssert(target.expect, { kind: PredicateKind.SIGNAL, name: ann.signal });
         }
         else if (ann.kind === AnnotationKind.ASSERT_VISIBLE) {
-            target.expect = { ...target.expect, element: anchorToElement(ann.anchor) };
+            target.expect = alsoAssert(target.expect, {
+                kind: PredicateKind.ELEMENT,
+                query: anchorToElement(ann.anchor),
+            });
         }
     }
     const flow = { version: FLOW_FILE_VERSION, name, createdAt, steps: out };
@@ -105,6 +108,14 @@ export function compileRecording(name, steps, annotations, createdAt, startPath)
         flow.success = success;
     return flow;
 }
+function alsoAssert(existing, clause) {
+    if (existing === undefined)
+        return clause;
+    if (existing.kind === PredicateKind.ALL_OF) {
+        return { kind: PredicateKind.ALL_OF, predicates: [...existing.predicates, clause] };
+    }
+    return { kind: PredicateKind.ALL_OF, predicates: [existing, clause] };
+}
 function anchorToElement(anchor) {
     if (anchor.kind === AnchorKind.TESTID)
         return { testid: anchor.value };
@@ -122,7 +133,7 @@ class Recorder {
     #startPath;
     #annotations = [];
     #pendingFill;
-    #teardowns = [];
+    #captureAbort;
     #root;
     #statusEl;
     #menuEl;
@@ -145,9 +156,8 @@ class Recorder {
         this.#installCapture();
     }
     destroy() {
-        for (const t of this.#teardowns)
-            t();
-        this.#teardowns = [];
+        this.#captureAbort?.abort();
+        this.#captureAbort = undefined;
         this.#root?.remove();
         this.#root = undefined;
         this.#statusEl = undefined;
@@ -159,20 +169,13 @@ class Recorder {
         this.#pendingFill = undefined;
     }
     #installCapture() {
-        const onClick = (ev) => this.#onClick(ev);
-        const onInput = (ev) => this.#onInput(ev);
-        const onChange = (ev) => this.#onChange(ev);
-        const onSubmit = (ev) => this.#onSubmit(ev);
-        document.addEventListener('click', onClick, true);
-        document.addEventListener('input', onInput, true);
-        document.addEventListener('change', onChange, true);
-        document.addEventListener('submit', onSubmit, true);
-        this.#teardowns.push(() => {
-            document.removeEventListener('click', onClick, true);
-            document.removeEventListener('input', onInput, true);
-            document.removeEventListener('change', onChange, true);
-            document.removeEventListener('submit', onSubmit, true);
-        });
+        const ac = new AbortController();
+        this.#captureAbort = ac;
+        const opts = { capture: true, signal: ac.signal };
+        document.addEventListener('click', (ev) => this.#onClick(ev), opts);
+        document.addEventListener('input', (ev) => this.#onInput(ev), opts);
+        document.addEventListener('change', (ev) => this.#onChange(ev), opts);
+        document.addEventListener('submit', (ev) => this.#onSubmit(ev), opts);
     }
     #ignore(ev) {
         const target = ev.target;

package/dist/reticle-inject.d.ts

@@ -0,0 +1,2 @@
+// A script evaluated in the page, read by the daemon as text. Nothing here is importable.
+export {};