@reticlehq/browser 3.2.0 → 3.3.0

package/dist/presenter/presenter-settings.js

@@ -4,6 +4,7 @@ import { HUD_SURFACE_CLASS } from './chrome/presenter-hud-chrome.js';
 import { resetHudDockPosition } from './presenter-drag.js';
 import { findDock, scheduleSyncDockLayout } from './presenter-dock-layout.js';
 import { SETTINGS_CSS } from './presenter-settings-styles.js';
+import { DISCOVERY_CALL_URL, FOUNDER_EMAIL, FOUNDER_MAILTO } from '@reticlehq/core';
 import { accountControlHtml } from './presenter-account.js';
 export { SETTINGS_CSS };
 export const OutputDetail = {
@@ -11,14 +12,14 @@ export const OutputDetail = {
     STANDARD: 'standard',
     VERBOSE: 'verbose',
 };
-export const StatusThemeId = {
+const StatusThemeId = {
     SIGNAL: 'signal',
     TRAFFIC: 'traffic',
     MONO: 'mono',
     NEON: 'neon',
     EMBER: 'ember',
 };
-export const STATUS_THEMES = [
+const STATUS_THEMES = [
     {
         id: StatusThemeId.SIGNAL,
         label: 'Signal',
@@ -132,7 +133,7 @@ function settingsHelpIcon() {
 }
 function settingsLabel(text, helpTitle) {
     const help = settingsHelpIcon();
-    return `<span class="reticle-settings-label">${text}<button type="button" class="reticle-settings-help" title="${helpTitle}" aria-label="${helpTitle}">${help}</button></span>`;
+    return `<span class="reticle-settings-label">${text}<button type="button" class="reticle-settings-help" data-reticle-settings-help title="${helpTitle}" aria-label="${helpTitle}">${help}</button></span>`;
 }
 function settingsToggleRow(key, label, helpTitle, extra = '') {
     return `<div class="reticle-settings-row" ${extra}>
@@ -181,6 +182,12 @@ export function paintSettingsAccount(root, account, dashboardUrl, details = {})
     row.hidden = 0 === html.length;
     slot.innerHTML = html;
 }
+const FEEDBACK_TEXT = {
+    EMAIL: 'Email the founder',
+    EMAIL_TITLE: `Write to ${FOUNDER_EMAIL}: a problem, a wish, anything`,
+    CALL: 'Book a call',
+    CALL_TITLE: 'Pick a time to talk it through',
+};
 export function settingsPanelHtml() {
     const close = hiIconHtml(PresenterIcon.REMOVE, PRESENTER_ICON_SIZE.MIN);
     const caret = hiIconHtml(PresenterIcon.CARET_RIGHT, PRESENTER_ICON_SIZE.HELP);
@@ -228,11 +235,13 @@ export function settingsPanelHtml() {
       <div class="reticle-settings-foot">
         <button type="button" class="reticle-settings-reset" data-reticle-settings-reset>Reset HUD position</button>
         <button type="button" class="reticle-settings-link" data-reticle-settings-mcp>Manage MCP &amp; Webhooks<span class="reticle-settings-link-caret" aria-hidden="true">${caret}</span></button>
+        <a class="reticle-settings-link" data-reticle-feedback-email href="${FOUNDER_MAILTO}" target="_blank" rel="noopener noreferrer" title="${FEEDBACK_TEXT.EMAIL_TITLE}">${FEEDBACK_TEXT.EMAIL}<span class="reticle-settings-link-caret" aria-hidden="true">${caret}</span></a>
+        <a class="reticle-settings-link" data-reticle-feedback-call href="${DISCOVERY_CALL_URL}" target="_blank" rel="noopener noreferrer" title="${FEEDBACK_TEXT.CALL_TITLE}">${FEEDBACK_TEXT.CALL}<span class="reticle-settings-link-caret" aria-hidden="true">${caret}</span></a>
       </div>
     </div>
   </div>`;
 }
-export function applyPresenterSettings(root, settings) {
+function applyPresenterSettings(root, settings) {
     const theme = statusTheme(settings.statusThemeId);
     root.style.setProperty('--reticle-mark-accent', theme.active);
     root.style.setProperty('--reticle-accent', theme.active);

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

@@ -246,6 +246,10 @@ export const SHELL_CSS = `
   transition:opacity .2s var(--reticle-shell-ease),transform .18s var(--reticle-shell-ease);}
 [${OVERLAY}][${MIN_ATTR}="0"] [${HUD}] .reticle-toolbar{
   display:flex;opacity:1;transform:scale(1);pointer-events:auto;}
+/* The HUD block is transformed, which makes it a stacking context at level 0 inside the dock, so a
+   tooltip's z-index only ranked it within the block and it drew behind the chat and settings panels,
+   its siblings. Lift the block while a tooltip can show. */
+[${HUD}]:hover,[${HUD}]:focus-within{z-index:${String(Z_HUD_TOOLTIP)};}
 [${HUD}] .reticle-toolbar-drag{cursor:grab;touch-action:none;user-select:none;}
 [${HUD}] .reticle-toolbar-drag.reticle-drag-handle--dragging{cursor:grabbing;}
 [${HUD}] .reticle-toolbar-actions{

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

@@ -2,7 +2,7 @@ import type { HarnessConfig } from '@reticlehq/core';
 import { PresenterReport } from './presenter-report.js';
 import type { AccountState } from '@reticlehq/core';
 import { type AccountDetails } from './presenter-account.js';
-import { type OfferState } from './presenter-offer.js';
+import { type OfferState } from './carousel/offer-card.js';
 import { type SettingsHost } from './presenter-settings.js';
 interface HudShellCallbacks {
     onChatOpen?: () => void;
@@ -35,4 +35,7 @@ export declare class HudShell {
     showChat(): void;
     pulseFab(active: boolean): void;
 }
+export declare function wasMinimised(): boolean;
+export declare function rememberMinimised(minimised: boolean): void;
+export declare function shouldAutoOpenChat(autoOpenChat: boolean): boolean;
 export {};

package/dist/presenter/presenter-shell.js

@@ -1,11 +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 { OFFER_SLOT_ATTR, paintOffer } from './presenter-offer.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';
@@ -59,9 +62,22 @@ export class HudShell {
     #pushedOffer;
     paintOffer(offer) {
         this.#pushedOffer = offer;
-        if (this.#root === undefined)
+        this.#paintCarousel();
+    }
+    #paintCarousel() {
+        const log = this.#root?.querySelector(`[${DATA_RETICLE_LOG}]`);
+        if (!(log instanceof HTMLElement))
             return;
-        paintOffer(this.#root, offer, this.#storage());
+        const declined = offerDismissed(this.#storage());
+        paintCarousel(log, panelSlides(this.#pushedOffer, declined), this.#sessionStorage());
+    }
+    #sessionStorage() {
+        try {
+            return globalThis.sessionStorage;
+        }
+        catch {
+            return undefined;
+        }
     }
     #storage() {
         try {
@@ -97,7 +113,6 @@ export class HudShell {
         ${actStripHtml}
         <span class="reticle-tally" data-reticle-tally hidden></span>
         ${bannerHtml}
-        <div ${OFFER_SLOT_ATTR}></div>
         <div class="${HUD_LOG_WELL_CLASS}"><div ${logAttr}></div></div>
         ${flowsHtml}
         ${footHtml}
@@ -248,8 +263,7 @@ export class HudShell {
             const pushed = this.#pushedAccount;
             this.paintAccount(pushed.account, pushed.dashboardUrl, pushed.details);
         }
-        if (this.#pushedOffer !== undefined)
-            this.paintOffer(this.#pushedOffer);
+        this.#paintCarousel();
     }
     teardown() {
         this.#accountTeardown?.();
@@ -283,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?.();
@@ -297,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?.();
@@ -367,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 ||
@@ -375,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,7 +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 './presenter-offer.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)};}
@@ -65,5 +67,7 @@ ${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) => {
@@ -159,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;
@@ -179,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();
     }
@@ -190,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)
@@ -201,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);
@@ -213,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;
@@ -237,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();
         }
     }
@@ -250,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() {
@@ -413,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() {
@@ -477,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.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;
@@ -220,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();

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 {};