@reticlehq/browser 3.2.0 → 3.4.0

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/registry/store-adapters.js

@@ -1,5 +1,35 @@
 import { nativeWarn } from '../timers/console/native-console.js';
 import { markAdapterSource } from './stores.js';
+function snapshotLive(value) {
+    try {
+        return copyPlain(value, new WeakMap());
+    }
+    catch {
+        return value;
+    }
+}
+function copyPlain(value, seen) {
+    if ('object' !== typeof value || null === value)
+        return value;
+    const done = seen.get(value);
+    if (done !== undefined)
+        return done;
+    if (Array.isArray(value)) {
+        const out = [];
+        seen.set(value, out);
+        for (const item of value)
+            out.push(copyPlain(item, seen));
+        return out;
+    }
+    const proto = Object.getPrototypeOf(value);
+    if (proto !== Object.prototype && proto !== null)
+        return value;
+    const out = {};
+    seen.set(value, out);
+    for (const [key, item] of Object.entries(value))
+        out[key] = copyPlain(item, seen);
+    return out;
+}
 export function tanstackQueryStore(client) {
     const store = {
         getState: () => {
@@ -106,7 +136,7 @@ export function svelteStore(readable, warn = nativeWarn) {
             let value;
             let called = false;
             stopSubscription(readable.subscribe((next) => {
-                value = next;
+                value = snapshotLive(next);
                 called = true;
             }));
             if (!called && !warnedAboutLazyStore) {
@@ -132,7 +162,7 @@ export function svelteStore(readable, warn = nativeWarn) {
 const PINIA_SUBSCRIBE_OPTIONS = { detached: true, flush: 'sync' };
 export function piniaStore(store) {
     return {
-        getState: () => store.$state,
+        getState: () => snapshotLive(store.$state),
         subscribe: (listener) => store.$subscribe(() => listener(), { ...PINIA_SUBSCRIBE_OPTIONS }),
     };
 }

package/dist/registry/stores/adapters.js

@@ -6,8 +6,14 @@ export function registerAdapter(adapter) {
 }
 export function identifyComponent(el) {
     for (const adapter of adapters) {
-        const info = adapter.identify(el);
-        if (info !== null)
+        let info;
+        try {
+            info = adapter.identify(el);
+        }
+        catch {
+            continue;
+        }
+        if (info !== null && info !== undefined)
             return info;
     }
     return null;

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