@reticlehq/browser 3.1.0 → 3.2.0

package/dist/actions/actions-dom.d.ts

@@ -4,6 +4,7 @@ interface ClickGeometry {
     scrolledIntoView: boolean;
 }
 export declare const NO_GEOMETRY: ClickGeometry;
+export declare function mouseEventFor(el: Element, type: string, init?: MouseEventInit): MouseEvent;
 export declare function fireClickSequence(el: HTMLElement, hold?: {
     ms: number;
     sleep: (ms: number) => Promise<void>;

package/dist/actions/actions-dom.js

@@ -7,11 +7,20 @@ export const NO_GEOMETRY = {
     occludedBy: null,
     scrolledIntoView: false,
 };
+export function mouseEventFor(el, type, init = {}) {
+    return new MouseEvent(type, { ...init, view: el.ownerDocument.defaultView });
+}
+function pointerEventFor(el, type, init) {
+    const full = { ...init, view: el.ownerDocument.defaultView };
+    return 'function' === typeof PointerEvent
+        ? new PointerEvent(type, full)
+        : new MouseEvent(type, full);
+}
 export async function fireClickSequence(el, hold) {
     const doc = el.ownerDocument;
     const from = doc.activeElement ?? doc.body;
     firePointer(el, 'pointerdown', from);
-    asSyntheticInput(() => el.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, cancelable: true })));
+    asSyntheticInput(() => el.dispatchEvent(mouseEventFor(el, 'mousedown', { bubbles: true, cancelable: true })));
     if (el.tabIndex >= 0 && 'function' === typeof el.focus)
         el.focus();
     let heldMs = 0;
@@ -21,8 +30,8 @@ export async function fireClickSequence(el, hold) {
         heldMs = hold.now() - startedAt;
     }
     firePointer(el, 'pointerup', from);
-    asSyntheticInput(() => el.dispatchEvent(new MouseEvent('mouseup', { bubbles: true, cancelable: true })));
-    const notPrevented = asSyntheticInput(() => el.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true })));
+    asSyntheticInput(() => el.dispatchEvent(mouseEventFor(el, 'mouseup', { bubbles: true, cancelable: true })));
+    const notPrevented = asSyntheticInput(() => el.dispatchEvent(mouseEventFor(el, 'click', { bubbles: true, cancelable: true })));
     return { prevented: !notPrevented, heldMs };
 }
 function isMeasurable(rect) {
@@ -57,24 +66,10 @@ export function clickGeometry(el) {
     return { ...hitTest(el, rect), scrolledIntoView };
 }
 export function firePointer(el, type, relatedTarget = null) {
-    asSyntheticInput(() => {
-        if ('function' === typeof PointerEvent) {
-            el.dispatchEvent(new PointerEvent(type, { bubbles: true, cancelable: true, relatedTarget }));
-        }
-        else {
-            el.dispatchEvent(new MouseEvent(type, { bubbles: true, cancelable: true, relatedTarget }));
-        }
-    });
+    asSyntheticInput(() => el.dispatchEvent(pointerEventFor(el, type, { bubbles: true, cancelable: true, relatedTarget })));
 }
 export function firePointerNonBubbling(el, type, relatedTarget = null) {
-    asSyntheticInput(() => {
-        if ('function' === typeof PointerEvent) {
-            el.dispatchEvent(new PointerEvent(type, { bubbles: false, cancelable: true, relatedTarget }));
-        }
-        else {
-            el.dispatchEvent(new MouseEvent(type, { bubbles: false, cancelable: true, relatedTarget }));
-        }
-    });
+    asSyntheticInput(() => el.dispatchEvent(pointerEventFor(el, type, { bubbles: false, cancelable: true, relatedTarget })));
 }
 function makeDataTransfer(data) {
     if (typeof DataTransfer !== 'function')
@@ -117,12 +112,9 @@ export async function dragElement(source, target, data) {
             button: 0,
             ...(related !== undefined ? { relatedTarget: related } : {}),
         };
-        if ('function' === typeof PointerEvent && type.startsWith('pointer')) {
-            el.dispatchEvent(new PointerEvent(type, { ...init, pointerId: 1, isPrimary: true }));
-        }
-        else {
-            el.dispatchEvent(new MouseEvent(type, init));
-        }
+        el.dispatchEvent(type.startsWith('pointer')
+            ? pointerEventFor(el, type, { ...init, pointerId: 1, isPrimary: true })
+            : mouseEventFor(el, type, init));
     };
     const sourceRect = source.getBoundingClientRect();
     const destRect = target !== null ? dest.getBoundingClientRect() : null;
@@ -190,24 +182,18 @@ export async function fireTapSequence(el, hold) {
     }
     asSyntheticInput(() => el.dispatchEvent(makeTouchEvent('touchend', [])));
     firePointerTouch(el, 'pointerup');
-    const clicked = asSyntheticInput(() => el.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true })));
+    const clicked = asSyntheticInput(() => el.dispatchEvent(mouseEventFor(el, 'click', { bubbles: true, cancelable: true })));
     return { prevented: !clicked, heldMs };
 }
 function firePointerTouch(el, type) {
-    asSyntheticInput(() => {
-        if ('function' === typeof PointerEvent) {
-            el.dispatchEvent(new PointerEvent(type, {
-                bubbles: true,
-                cancelable: true,
-                pointerType: 'touch',
-                isPrimary: true,
-                width: 23,
-                height: 23,
-            }));
-            return;
-        }
-        el.dispatchEvent(new MouseEvent(type, { bubbles: true, cancelable: true }));
-    });
+    asSyntheticInput(() => el.dispatchEvent(pointerEventFor(el, type, {
+        bubbles: true,
+        cancelable: true,
+        pointerType: 'touch',
+        isPrimary: true,
+        width: 23,
+        height: 23,
+    })));
 }
 function touchListFor(el) {
     if ('function' !== typeof Touch || 'function' !== typeof el.getBoundingClientRect)

package/dist/actions/actions.js

@@ -124,7 +124,7 @@ function assertActionAllowed(el, action, args) {
         throw new Error(`potentially destructive action blocked; retry with args.${DANGEROUS_ACTION_CONFIRM_ARG}=true`);
     }
 }
-import { NO_GEOMETRY, fireClickSequence, fireTapSequence, clickGeometry, firePointer, firePointerNonBubbling, dragElement, } from './actions-dom.js';
+import { NO_GEOMETRY, fireClickSequence, fireTapSequence, clickGeometry, firePointer, firePointerNonBubbling, dragElement, mouseEventFor, } from './actions-dom.js';
 import { scrollFrom } from './scroll.js';
 function enabledOf(el) {
     return !getStates(el).includes(ElementState.DISABLED);
@@ -167,16 +167,16 @@ function asFiniteNumber(raw) {
 async function dispatchOther(el, action, args) {
     switch (action) {
         case ActionType.DBLCLICK:
-            return !asSyntheticInput(() => el.dispatchEvent(new MouseEvent('dblclick', { bubbles: true, cancelable: true })));
+            return !asSyntheticInput(() => el.dispatchEvent(mouseEventFor(el, 'dblclick', { bubbles: true, cancelable: true })));
         case ActionType.HOVER: {
             const doc = el.ownerDocument;
             const from = doc.activeElement ?? doc.body;
             firePointer(el, 'pointerover', from);
-            el.dispatchEvent(new MouseEvent('mouseover', { bubbles: true, relatedTarget: from }));
+            el.dispatchEvent(mouseEventFor(el, 'mouseover', { bubbles: true, relatedTarget: from }));
             firePointerNonBubbling(el, 'pointerenter', from);
-            el.dispatchEvent(new MouseEvent('mouseenter', { relatedTarget: from }));
+            el.dispatchEvent(mouseEventFor(el, 'mouseenter', { relatedTarget: from }));
             firePointer(el, 'pointermove', from);
-            const moved = el.dispatchEvent(new MouseEvent('mousemove', { bubbles: true, cancelable: true }));
+            const moved = el.dispatchEvent(mouseEventFor(el, 'mousemove', { bubbles: true, cancelable: true }));
             const holdMs = clampHold(args['holdMs']);
             if (holdMs > 0)
                 await sleep(holdMs);
@@ -252,7 +252,11 @@ async function dispatchOther(el, action, args) {
             }
             if (alreadyAtCheckedState(el, action))
                 return false;
-            const event = new MouseEvent('click', { bubbles: true, cancelable: true, composed: true });
+            const event = mouseEventFor(el, 'click', {
+                bubbles: true,
+                cancelable: true,
+                composed: true,
+            });
             const notPrevented = asSyntheticInput(() => el.dispatchEvent(event));
             return !notPrevented || event.defaultPrevented;
         }

package/dist/dom/query.js

@@ -1,5 +1,5 @@
 import { DATA_RETICLE_SOURCE_ATTR, ElementState, QueryBy, REDACTED_VALUE, TRANSPORT_LIMITS, } from '@reticlehq/core';
-import { isFrame, isHtmlElement, isInput, isSelect, isTextArea } from './realm.js';
+import { isElement, isFrame, isHtmlElement, isInput, isSelect, isTextArea } from './realm.js';
 import { capturedRootOf } from './shadow-registry.js';
 import { getAccessibleName, getRole, describe, getStates, isInViewport, isVisible, } from './a11y.js';
 import { isIgnored, isReticleOverlay } from './dom-ignore.js';
@@ -27,20 +27,35 @@ function fuzzyVisibleText(actual, expected) {
 function exactVisibleText(actual, expected) {
     return normaliseVisibleText(actual) === normaliseVisibleText(expected);
 }
+const NON_RENDERED_TAGS = ['script', 'style', 'template', 'noscript'];
+function isNonRendered(el) {
+    return NON_RENDERED_TAGS.includes(el.tagName.toLowerCase());
+}
 function directText(el) {
     if (isInput(el)) {
         const type = el.type.toLowerCase();
         if ('submit' === type || 'button' === type || 'reset' === type)
             return el.value;
     }
-    const tag = el.tagName.toLowerCase();
-    if ('script' === tag || 'style' === tag)
+    if (isNonRendered(el))
         return '';
     return Array.from(el.childNodes)
         .filter((node) => Node.TEXT_NODE === node.nodeType)
         .map((node) => node.textContent ?? '')
         .join('');
 }
+function visibleTextOf(el, memo) {
+    if (isNonRendered(el) || isIgnored(el) || !isVisible(el, memo))
+        return '';
+    let text = '';
+    for (const node of Array.from(el.childNodes)) {
+        if (Node.TEXT_NODE === node.nodeType)
+            text += node.textContent ?? '';
+        else if (isElement(node))
+            text += visibleTextOf(node, memo);
+    }
+    return text;
+}
 function semanticNameTarget(el) {
     if (isInput(el) || isTextArea(el) || isSelect(el))
         return true;
@@ -205,7 +220,8 @@ function findCandidates(query) {
     if (true === query.self) {
         if (query.scope === undefined)
             return { candidates: [], scopeMissing };
-        if (query.text !== undefined && !fuzzyVisibleText(container.textContent ?? '', query.text)) {
+        if (query.text !== undefined &&
+            !fuzzyVisibleText(visibleTextOf(container, new Map()), query.text)) {
             return { candidates: [], scopeMissing };
         }
         return { candidates: isIgnored(container) ? [] : [container], scopeMissing };
@@ -342,10 +358,11 @@ function buildPresentRegions(query) {
 function splitTextOwner(container, wanted) {
     let best;
     let bestDepth = -1;
+    const memo = new Map();
     for (const el of elementsUnder(container)) {
         if (isIgnored(el))
             continue;
-        if (!fuzzyVisibleText(el.textContent ?? '', wanted))
+        if (!fuzzyVisibleText(visibleTextOf(el, memo), wanted))
             continue;
         let depth = 0;
         for (let parent = el.parentElement; parent !== null; parent = parent.parentElement)

package/dist/observers/departure.js

@@ -35,15 +35,23 @@ export function installDeparture(emit) {
                 return;
             const href = anchor.getAttribute('href') ?? '';
             const here = document.location.href;
-            if (!isDeparture(href, anchor.hasAttribute('download'), here))
+            const download = anchor.hasAttribute('download');
+            if (!isDeparture(href, download, here))
                 return;
-            seq += 1;
-            emit(EventType.NET_PENDING, {
-                id: `nav-${String(seq)}`,
-                method: 'GET',
-                url: new URL(href, here).toString(),
-                initiator: NetInitiator.NAVIGATION,
-                ...(anchor.hasAttribute('download') ? { download: true } : {}),
+            const url = new URL(href, here).toString();
+            queueMicrotask(() => {
+                observeSafely(() => {
+                    if (event.defaultPrevented)
+                        return;
+                    seq += 1;
+                    emit(EventType.NET_PENDING, {
+                        id: `nav-${String(seq)}`,
+                        method: 'GET',
+                        url,
+                        initiator: NetInitiator.NAVIGATION,
+                        ...(download ? { download: true } : {}),
+                    });
+                });
             });
         });
     };

package/dist/observers/network.js

@@ -1,4 +1,4 @@
-import { BlindSpotKind, EventType, RETICLE_WS_PATH, StreamTransport, StreamDirection, } from '@reticlehq/core';
+import { BlindSpotKind, EventType, REQUEST_SHAPE_FIELD, REQUEST_SHAPE_NONE, RETICLE_WS_PATH, StreamTransport, StreamDirection, fnv1a, } from '@reticlehq/core';
 import { captureMethod } from '../patching/capture-method.js';
 import { observeSafely, observeValue } from './types.js';
 import { isCapturableType, projectBody, projectErrorBody, shouldCaptureErrorBody, withBodyDeadline, } from './net-detail/network-body.js';
@@ -31,26 +31,66 @@ function frameFields(data, captureBodies) {
     }
     return out;
 }
+const ShapeToken = { NULL: '0', STRING: 's', NUMBER: 'n', BOOLEAN: 'b', OTHER: '?' };
+function shapeOf(value) {
+    if (null === value)
+        return ShapeToken.NULL;
+    if (Array.isArray(value))
+        return `[${value.map(shapeOf).join(',')}]`;
+    if ('object' === typeof value) {
+        const fields = value;
+        return `{${Object.keys(fields)
+            .sort()
+            .map((key) => `${key}:${shapeOf(fields[key])}`)
+            .join(',')}}`;
+    }
+    if ('string' === typeof value)
+        return ShapeToken.STRING;
+    if ('number' === typeof value)
+        return ShapeToken.NUMBER;
+    if ('boolean' === typeof value)
+        return ShapeToken.BOOLEAN;
+    return ShapeToken.OTHER;
+}
+function fingerprintBody(shape, length) {
+    return fnv1a(`${shape}#${String(length)}`);
+}
+function jsonShape(text) {
+    try {
+        return shapeOf(JSON.parse(text));
+    }
+    catch {
+        return ShapeToken.OTHER;
+    }
+}
 function projectRequestBody(body, captureBodies) {
-    if (!captureBodies)
-        return {};
     let text;
     let contentType = 'application/json';
+    let shape = REQUEST_SHAPE_NONE;
     if ('string' === typeof body) {
         text = body;
+        if (text.length > 0)
+            shape = fingerprintBody(jsonShape(text), text.length);
     }
     else if (typeof URLSearchParams !== 'undefined' && body instanceof URLSearchParams) {
         text = body.toString();
         contentType = 'application/x-www-form-urlencoded';
+        if (text.length > 0) {
+            const fields = Object.fromEntries(new URLSearchParams(text));
+            shape = fingerprintBody(shapeOf(fields), text.length);
+        }
     }
     else if (body !== undefined && body !== null) {
-        const shape = body.constructor?.name ?? typeof body;
-        return { requestBodyType: shape };
+        const kind = body.constructor?.name ?? typeof body;
+        return captureBodies ? { requestBodyType: kind } : {};
     }
-    if (text === undefined || 0 === text.length)
-        return {};
+    const fields = { [REQUEST_SHAPE_FIELD]: shape };
+    if (!captureBodies || text === undefined || 0 === text.length)
+        return fields;
     const { body: out, truncated } = projectBody(text, contentType);
-    return truncated ? { requestBody: out, requestBodyTruncated: true } : { requestBody: out };
+    return truncated
+        ? { ...fields, requestBody: out, requestBodyTruncated: true }
+        : { ...fields, requestBody: out };
 }
 function statusIsOk(status) {
     return status >= 200 && status < 400;
@@ -428,6 +468,7 @@ export function installNetwork(emit, opts = {}) {
                     durationMs: 0,
                     initiator: 'beacon',
                     ...(initiatorStack === undefined ? {} : { initiatorStack }),
+                    ...projectRequestBody(data, false),
                 });
             });
             return sent;

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

@@ -0,0 +1,25 @@
+export declare const OFFER_ATTR = "data-reticle-offer";
+export declare const OFFER_SLOT_ATTR = "data-reticle-offer-slot";
+export declare const OFFER_CLAIM_ATTR = "data-reticle-offer-claim";
+export declare const OFFER_DISMISS_ATTR = "data-reticle-offer-dismiss";
+export declare const OFFER_DISMISSED_KEY = "reticle.harnessOffer.dismissed";
+export declare const OFFER_TEXT: {
+    readonly HEADLINE: "Reticle drives your app for you";
+    readonly BODY: "The harness explores your app, proves what works, and saves every journey as a test that replays for free. Built on Jev — no model API key needed.";
+    readonly FREE: "Free for 3 months";
+    readonly CLAIM: "Claim now";
+    readonly DISMISS: "Not now";
+    readonly claimed: (days: number) => string;
+    readonly ending: (days: number) => string;
+};
+export declare function offerDismissed(storage: Pick<Storage, 'getItem'> | undefined): boolean;
+export declare function dismissOffer(storage: Pick<Storage, 'setItem'> | undefined): void;
+export interface OfferState {
+    claimed: boolean;
+    daysRemaining?: number | undefined;
+    claimUrl?: string | undefined;
+    eligible?: boolean | undefined;
+}
+export declare function offerHtml(offer: OfferState | undefined, dismissed: boolean): string;
+export declare function paintOffer(root: ParentNode, offer: OfferState | undefined, storage: Pick<Storage, 'getItem' | 'setItem'> | undefined): void;
+export declare const OFFER_CSS = "\n.reticle-offer{margin:8px 10px;padding:10px 12px;border:1px solid var(--reticle-line,#2a2f3a);border-radius:10px;background:var(--reticle-surface-inset,rgba(255,255,255,.03));}\n.reticle-offer-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}\n.reticle-offer-title{font-weight:600;font-size:12px;}\n.reticle-offer-free{font-size:10px;padding:2px 6px;border-radius:999px;background:var(--reticle-accent,#4f7cff);color:#fff;white-space:nowrap;}\n.reticle-offer-body{margin:6px 0 8px;font-size:11px;line-height:1.45;opacity:.8;}\n.reticle-offer-actions{display:flex;align-items:center;gap:8px;}\n.reticle-offer-claim{font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;background:var(--reticle-accent,#4f7cff);color:#fff;text-decoration:none;}\n.reticle-offer-dismiss{font-size:11px;padding:4px 8px;border-radius:6px;background:none;border:0;color:inherit;opacity:.6;cursor:pointer;}\n.reticle-offer-dismiss:hover{opacity:1;}\n.reticle-offer-claimed{margin:6px 10px;font-size:10px;opacity:.6;}\n";

package/dist/presenter/presenter-offer.js

@@ -0,0 +1,87 @@
+export const OFFER_ATTR = 'data-reticle-offer';
+export const OFFER_SLOT_ATTR = 'data-reticle-offer-slot';
+export const OFFER_CLAIM_ATTR = 'data-reticle-offer-claim';
+export const OFFER_DISMISS_ATTR = 'data-reticle-offer-dismiss';
+export const OFFER_DISMISSED_KEY = 'reticle.harnessOffer.dismissed';
+export const OFFER_TEXT = {
+    HEADLINE: 'Reticle drives your app for you',
+    BODY: 'The harness explores your app, proves what works, and saves every journey as a test that replays for free. Built on Jev — no model API key needed.',
+    FREE: 'Free for 3 months',
+    CLAIM: 'Claim now',
+    DISMISS: 'Not now',
+    claimed: (days) => `Harness active — ${String(days)} days left`,
+    ending: (days) => 1 >= days
+        ? 'Harness free period ends today'
+        : `Harness free period ends in ${String(days)} days`,
+};
+const ENDING_SOON_DAYS = 14;
+export function offerDismissed(storage) {
+    try {
+        return '1' === storage?.getItem(OFFER_DISMISSED_KEY);
+    }
+    catch {
+        return false;
+    }
+}
+export function dismissOffer(storage) {
+    try {
+        storage?.setItem(OFFER_DISMISSED_KEY, '1');
+    }
+    catch {
+    }
+}
+const escape = (text) => text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+export function offerHtml(offer, dismissed) {
+    if (offer === undefined)
+        return '';
+    if (offer.claimed) {
+        const days = offer.daysRemaining;
+        if (days === undefined || 0 > days)
+            return '';
+        const text = ENDING_SOON_DAYS >= days ? OFFER_TEXT.ending(days) : OFFER_TEXT.claimed(days);
+        return `<div ${OFFER_ATTR} class="reticle-offer reticle-offer-claimed">${escape(text)}</div>`;
+    }
+    if (false === offer.eligible)
+        return '';
+    if (dismissed)
+        return '';
+    const url = offer.claimUrl;
+    if (url === undefined || 0 === url.length)
+        return '';
+    return `<div ${OFFER_ATTR} class="reticle-offer" role="note">
+      <div class="reticle-offer-head">
+        <span class="reticle-offer-title">${escape(OFFER_TEXT.HEADLINE)}</span>
+        <span class="reticle-offer-free">${escape(OFFER_TEXT.FREE)}</span>
+      </div>
+      <p class="reticle-offer-body">${escape(OFFER_TEXT.BODY)}</p>
+      <div class="reticle-offer-actions">
+        <a ${OFFER_CLAIM_ATTR} class="reticle-offer-claim" href="${escape(url)}" target="_blank" rel="noopener noreferrer">${escape(OFFER_TEXT.CLAIM)}</a>
+        <button type="button" ${OFFER_DISMISS_ATTR} class="reticle-offer-dismiss">${escape(OFFER_TEXT.DISMISS)}</button>
+      </div>
+    </div>`;
+}
+export function paintOffer(root, offer, storage) {
+    const slot = root.querySelector(`[${OFFER_SLOT_ATTR}]`);
+    if (!(slot instanceof HTMLElement))
+        return;
+    slot.innerHTML = offerHtml(offer, offerDismissed(storage));
+    const dismiss = slot.querySelector(`[${OFFER_DISMISS_ATTR}]`);
+    dismiss?.addEventListener('click', (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        dismissOffer(storage);
+        slot.innerHTML = '';
+    });
+}
+export const OFFER_CSS = `
+.reticle-offer{margin:8px 10px;padding:10px 12px;border:1px solid var(--reticle-line,#2a2f3a);border-radius:10px;background:var(--reticle-surface-inset,rgba(255,255,255,.03));}
+.reticle-offer-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
+.reticle-offer-title{font-weight:600;font-size:12px;}
+.reticle-offer-free{font-size:10px;padding:2px 6px;border-radius:999px;background:var(--reticle-accent,#4f7cff);color:#fff;white-space:nowrap;}
+.reticle-offer-body{margin:6px 0 8px;font-size:11px;line-height:1.45;opacity:.8;}
+.reticle-offer-actions{display:flex;align-items:center;gap:8px;}
+.reticle-offer-claim{font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;background:var(--reticle-accent,#4f7cff);color:#fff;text-decoration:none;}
+.reticle-offer-dismiss{font-size:11px;padding:4px 8px;border-radius:6px;background:none;border:0;color:inherit;opacity:.6;cursor:pointer;}
+.reticle-offer-dismiss:hover{opacity:1;}
+.reticle-offer-claimed{margin:6px 10px;font-size:10px;opacity:.6;}
+`;

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

@@ -68,6 +68,10 @@ export const REPORT_CSS = `
   display:block;margin-top:2px;color:var(--reticle-c-active);opacity:.8;
   font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;cursor:help;}
 [${REPORT_PANEL_ATTR}] .reticle-report-defects-wrap{margin-top:14px;}
+/* The heading and its push control on one line, so the button reads as belonging to this section
+   rather than floating above the list. */
+[${REPORT_PANEL_ATTR}] .reticle-report-defects-head{
+  display:flex;align-items:center;justify-content:space-between;gap:8px;}
 [${REPORT_PANEL_ATTR}] .reticle-report-defects{
   display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;}
 /* A left rule rather than a card per row: ten cards in a 320px panel is a wall, and the rule keeps

package/dist/presenter/presenter-report.js

@@ -79,7 +79,8 @@ function defects(scope, dashboardUrl) {
     const more = !linked
         ? ''
         : `<a class="reticle-report-defects-more" href="${esc(dashboardUrl)}" target="_blank" rel="noreferrer noopener">${REPORT_TEXT.DEFECTS_MORE}${scope.counts.failed > list.length ? ` (${String(scope.counts.failed)})` : ''}</a>`;
-    return `<div class="reticle-report-defects-wrap"><span class="reticle-report-section">${REPORT_TEXT.DEFECTS}</span><ul class="reticle-report-defects">${rows}</ul>${more}</div>`;
+    const sync = syncButtonHtml(dashboardUrl);
+    return `<div class="reticle-report-defects-wrap"><div class="reticle-report-defects-head"><span class="reticle-report-section">${REPORT_TEXT.DEFECTS}</span>${sync}</div><ul class="reticle-report-defects">${rows}</ul>${more}</div>`;
 }
 export function reportBodyHtml(scope, dashboardUrl, account, projectName) {
     const c = scope.counts;

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

@@ -1,3 +1,4 @@
+import type { HarnessConfig } from '@reticlehq/core';
 import { SETTINGS_CSS } from './presenter-settings-styles.js';
 import type { AccountState } from '@reticlehq/core';
 import { type AccountDetails } from './presenter-account.js';
@@ -41,10 +42,12 @@ export interface PresenterSettings {
 export declare function getPresenterSettings(): PresenterSettings;
 export declare function loadPresenterSettings(): PresenterSettings;
 export declare const SETTINGS_ACCOUNT_ATTR = "data-reticle-settings-account";
+export declare function paintHarnessRow(root: ParentNode, config: HarnessConfig | undefined): void;
 export declare function paintSettingsAccount(root: HTMLElement, account: AccountState | undefined, dashboardUrl: string | undefined, details?: AccountDetails): void;
 export declare function settingsPanelHtml(): string;
 export interface SettingsHost {
     onHideUntilRestart?: () => void;
+    onHarness?: (enabled: boolean) => void;
     onSettingsChange?: (settings: PresenterSettings) => void;
     onBeforeOpen?: () => void;
 }
@@ -56,6 +59,7 @@ export declare class PresenterSettingsPanel {
     constructor(host?: SettingsHost);
     contains(node: Node): boolean;
     mount(root: HTMLElement): void;
+    paintHarness(config: HarnessConfig | undefined): void;
     teardown(): void;
     isOpen(): boolean;
     open(): void;

package/dist/presenter/presenter-settings.js

@@ -149,7 +149,29 @@ function settingsCheckRow(key, label, checked) {
 }
 export const SETTINGS_ACCOUNT_ATTR = 'data-reticle-settings-account';
 const SETTINGS_ACCOUNT_ROW_ATTR = 'data-reticle-settings-account-row';
+const SETTINGS_HARNESS_ROW_ATTR = 'data-reticle-settings-harness-row';
+const HARNESS_HELP = 'Let Reticle drive this app by itself to find defects. Set here or in your dashboard — both write to the same place.';
+const HARNESS_LOCKED_HELP = 'Autonomous driving runs on Reticle’s model spend, so it needs a plan or the free period. Claim it from the chat panel.';
 const ACCOUNT_HELP = 'Whether this machine is signed in to a Reticle workspace. Signing in happens in your terminal.';
+export function paintHarnessRow(root, config) {
+    const row = root.querySelector(`[${SETTINGS_HARNESS_ROW_ATTR}]`);
+    if (!(row instanceof HTMLElement))
+        return;
+    if (config === undefined) {
+        row.hidden = true;
+        return;
+    }
+    row.hidden = false;
+    const toggle = row.querySelector(`[${SETTING_KEY_ATTR}="harnessEnabled"]`);
+    if (!(toggle instanceof HTMLElement))
+        return;
+    const usable = config.harnessEntitled;
+    toggle.setAttribute('aria-checked', config.harnessEnabled && usable ? 'true' : 'false');
+    toggle.setAttribute('aria-disabled', usable ? 'false' : 'true');
+    const help = row.querySelector('[data-reticle-help]');
+    if (help instanceof HTMLElement)
+        help.title = usable ? HARNESS_HELP : HARNESS_LOCKED_HELP;
+}
 export function paintSettingsAccount(root, account, dashboardUrl, details = {}) {
     const row = root.querySelector(`[${SETTINGS_ACCOUNT_ROW_ATTR}]`);
     const slot = root.querySelector(`[${SETTINGS_ACCOUNT_ATTR}]`);
@@ -165,6 +187,7 @@ export function settingsPanelHtml() {
     const outputHelp = 'How much detail is included when you copy or export the run';
     const reactHelp = 'Include React component paths in exported run state when available';
     const hideHelp = 'Hide the Reticle HUD until you reload the page';
+    const harnessHelp = HARNESS_HELP;
     const tallyHelp = 'Show the pass/fail score pill in the toolbar';
     const timestampsHelp = 'Show relative timestamps on each activity-log row';
     const autoChatHelp = 'On by default. Opens the agent chat by itself when a session starts and when you expand the HUD. Off leaves the toolbar bare until you ask for the chat.';
@@ -191,6 +214,7 @@ export function settingsPanelHtml() {
         ${settingsCheckRow('blockPageInteractions', 'Block page interactions', true)}
         ${settingsCheckRow('clearOnCopy', 'Clear on copy/send', false)}
         ${settingsToggleRow('hideUntilRestart', 'Hide Until Restart', hideHelp)}
+        ${settingsToggleRow('harnessEnabled', 'Autonomous driving', harnessHelp, `${SETTINGS_HARNESS_ROW_ATTR} hidden`)}
         ${settingsToggleRow('reduceMotion', 'Reduce motion', motionHelp)}
         <div class="reticle-settings-section">Account</div>
         <div class="reticle-settings-row" ${SETTINGS_ACCOUNT_ROW_ATTR} hidden>
@@ -286,7 +310,14 @@ export class PresenterSettingsPanel {
                 if (!(toggle instanceof HTMLElement))
                     return;
                 const key = toggle.getAttribute(SETTING_KEY_ATTR);
-                if ('reactComponents' === key) {
+                if ('harnessEnabled' === key) {
+                    if ('true' === toggle.getAttribute('aria-disabled'))
+                        return;
+                    const next = 'true' !== toggle.getAttribute('aria-checked');
+                    toggle.setAttribute('aria-checked', next ? 'true' : 'false');
+                    this.#host.onHarness?.(next);
+                }
+                else if ('reactComponents' === key) {
                     this.#update({ reactComponents: !activeSettings.reactComponents });
                 }
                 else if ('hideUntilRestart' === key) {
@@ -368,6 +399,12 @@ export class PresenterSettingsPanel {
         applyPresenterSettings(root, activeSettings);
         this.#host.onSettingsChange?.(activeSettings);
     }
+    paintHarness(config) {
+        const root = this.#panel;
+        if (root === undefined)
+            return;
+        paintHarnessRow(root, config);
+    }
     teardown() {
         this.#root = undefined;
         this.#panel = undefined;

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

@@ -83,6 +83,18 @@ export const SHELL_CSS = `
   right:auto;left:0;}
 [${OVERLAY}][${CHAT_ATTR}="1"] [${CHAT_PANEL}]{
   display:flex;pointer-events:auto;}
+/**
+ * Idle, and not blocking the page: the card is not in use.
+ *
+ * The log fills the panel and sets pointer-events itself, so a click meant for a control sitting
+ * under the card landed on an empty transcript. Playwright named that div. The card passes the
+ * event through. The buttons stay clickable, which is the chrome a person still needs (#992).
+ */
+[${OVERLAY}][data-reticle-mode="idle"][data-reticle-block="0"] [${CHAT_PANEL}],
+[${OVERLAY}][data-reticle-mode="idle"][data-reticle-block="0"] [${CHAT_PANEL}] [data-reticle-log]{
+  pointer-events:none;}
+[${OVERLAY}][data-reticle-mode="idle"][data-reticle-block="0"] [${CHAT_PANEL}] :is(button,a,input,select,textarea){
+  pointer-events:auto;}
 /**
  * Minimising the chat leaves a CAPSULE, not a hole: the same glass, the same state dot, the last
  * thing the agent did - sitting directly above the toolbar capsule and reopening the panel when

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

@@ -1,6 +1,8 @@
+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 SettingsHost } from './presenter-settings.js';
 interface HudShellCallbacks {
     onChatOpen?: () => void;
@@ -13,7 +15,9 @@ interface HudShellCallbacks {
 }
 export declare class HudShell {
     #private;
+    paintHarness(config: HarnessConfig | undefined): void;
     paintAccount(account: AccountState | undefined, dashboardUrl: string | undefined, details?: AccountDetails): void;
+    paintOffer(offer: OfferState | undefined): void;
     constructor(callbacks?: HudShellCallbacks);
     static dockHtml(actStripHtml: string, bannerHtml: string, logAttr: string, flowsHtml: string, footHtml: string): string;
     get report(): PresenterReport;

package/dist/presenter/presenter-shell.js

@@ -3,6 +3,7 @@ import { paintToolbarAccount, TOOLBAR_ACCOUNT_ATTR } from './presenter-workspace
 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 { BRAND_NAME, FAB_TOGGLE_HTML, MARK_SVG } from './chrome/presenter-brand.js';
 import { settleLogAtLatest } from './chrome/presenter-log.js';
 import { installHudDragHandles, installHudPositionGuards } from './presenter-drag.js';
@@ -45,6 +46,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 +56,21 @@ export class HudShell {
         paintToolbarAccount(this.#root, account, dashboardUrl, details);
         paintSettingsAccount(this.#root, account, dashboardUrl, details);
     }
+    #pushedOffer;
+    paintOffer(offer) {
+        this.#pushedOffer = offer;
+        if (this.#root === undefined)
+            return;
+        paintOffer(this.#root, offer, this.#storage());
+    }
+    #storage() {
+        try {
+            return globalThis.localStorage;
+        }
+        catch {
+            return undefined;
+        }
+    }
     constructor(callbacks = {}) {
         this.#callbacks = callbacks;
         this.#settings = new PresenterSettingsPanel({
@@ -78,6 +97,7 @@ 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}
@@ -228,6 +248,8 @@ export class HudShell {
             const pushed = this.#pushedAccount;
             this.paintAccount(pushed.account, pushed.dashboardUrl, pushed.details);
         }
+        if (this.#pushedOffer !== undefined)
+            this.paintOffer(this.#pushedOffer);
     }
     teardown() {
         this.#accountTeardown?.();

package/dist/presenter/presenter-styles.js

@@ -6,6 +6,7 @@ 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';
 export { Z_OVERLAY };
 export const PRESENTER_CSS = `
 [data-reticle-overlay]{position:fixed;inset:0;pointer-events:none;z-index:${String(Z_OVERLAY)};}
@@ -63,5 +64,6 @@ ${SHELL_CSS}
 ${SETTINGS_CSS}
 ${REPORT_CSS}
 ${ACCOUNT_CSS}
+${OFFER_CSS}
 ${LOG_CSS}
 ${CONTROLS_CSS}`;

package/dist/presenter/presenter.js

@@ -93,6 +93,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 +120,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,

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.js

@@ -92,15 +92,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)
@@ -229,6 +241,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/reticle.js

@@ -255,7 +255,9 @@ export class Reticle {
                 panel.handlePush(buffered);
             this.#pendingPushes.clear();
             void import('./presenter/tour/tour.js').then((tour) => {
-                tour.mountTour({
+                if (!this.#connected)
+                    return;
+                const shown = tour.mountTour({
                     document,
                     storage: tour.safeLocalStorage(),
                     projectId: reticleParamsFromSearch(window.location.search).projectId ?? window.location.origin,
@@ -272,6 +274,8 @@ export class Reticle {
                         selection.addRange(range);
                     },
                 });
+                if (shown !== undefined)
+                    this.#teardowns.push(shown.destroy);
             });
             if (this.#bridgeConnected)
                 panel.sessionStart();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reticlehq/browser",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Reticle browser SDK — installs observers, builds semantic snapshots, executes actions, talks to the bridge.",
   "type": "module",
   "main": "./dist/index.js",
@@ -13,7 +13,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@reticlehq/core": "3.1.0"
+    "@reticlehq/core": "3.2.0"
   },
   "devDependencies": {
     "@iconify-json/heroicons-outline": "^1.2.1",