@reticlehq/browser 3.6.0 → 3.8.0

package/dist/observers/network.js

@@ -1,7 +1,7 @@
-import { BlindSpotKind, EventType, NEXT_ACTION_FIELD, NEXT_ACTION_HEADER, REQUEST_SHAPE_FIELD, REQUEST_SHAPE_NONE, RETICLE_WS_PATH, StreamTransport, StreamDirection, fnv1a, } from '@reticlehq/core';
+import { BlindSpotKind, EventType, NEXT_ACTION_FIELD, NEXT_ACTION_HEADER, REQUEST_SHAPE_FIELD, REQUEST_SHAPE_NONE, RETICLE_WS_PATH, ResponseBodyReason, 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';
+import { isCapturableType, projectBody, projectErrorBody, shouldCaptureErrorBody, skippedBodyReason, withBodyDeadline, } from './net-detail/network-body.js';
 import { redactUrl, netUrlFields } from './net-detail/network-redact.js';
 import { watchStreamedBody } from './network-stream.js';
 import { requireCapturedMethod } from '../util/captured-method.js';
@@ -63,15 +63,64 @@ function jsonShape(text) {
         return ShapeToken.OTHER;
     }
 }
+const MAX_DECODED_BODY_BYTES = 1 << 20;
+const TAB = 0x09;
+const LINE_FEED = 0x0a;
+const CARRIAGE_RETURN = 0x0d;
+const FIRST_PRINTABLE = 0x20;
+const DELETE = 0x7f;
+function hasControlCharacter(text) {
+    for (let i = 0; i < text.length; i += 1) {
+        const code = text.charCodeAt(i);
+        if (code === DELETE)
+            return true;
+        if (code < FIRST_PRINTABLE && code !== TAB && code !== LINE_FEED && code !== CARRIAGE_RETURN) {
+            return true;
+        }
+    }
+    return false;
+}
+function textOfBytes(body) {
+    if (!(body instanceof ArrayBuffer || ArrayBuffer.isView(body)))
+        return undefined;
+    if (body.byteLength > MAX_DECODED_BODY_BYTES)
+        return undefined;
+    try {
+        const text = new TextDecoder('utf-8', { fatal: true }).decode(body);
+        return hasControlCharacter(text) ? undefined : text;
+    }
+    catch {
+        return undefined;
+    }
+}
+function formShape(form) {
+    const fields = [];
+    let length = 0;
+    form.forEach((value, name) => {
+        if ('string' === typeof value)
+            length += value.length;
+        fields.push(JSON.stringify([name, 'string' === typeof value ? 0 : [value.type, value.size]]));
+    });
+    return 0 === fields.length ? undefined : fingerprintBody(fields.sort().join(), length);
+}
 function projectRequestBody(body, captureBodies) {
     let text;
     let contentType = 'application/json';
     let shape = REQUEST_SHAPE_NONE;
-    if ('string' === typeof body) {
-        text = body;
+    const bytesText = textOfBytes(body);
+    const typeOf = () => body.constructor?.name ?? typeof body;
+    if ('string' === typeof body || bytesText !== undefined) {
+        text = bytesText ?? body;
         if (text.length > 0)
             shape = fingerprintBody(jsonShape(text), text.length);
     }
+    else if (typeof FormData !== 'undefined' && body instanceof FormData) {
+        const form = formShape(body);
+        return {
+            ...(form === undefined ? {} : { [REQUEST_SHAPE_FIELD]: form }),
+            ...(captureBodies ? { requestBodyType: typeOf() } : {}),
+        };
+    }
     else if (typeof URLSearchParams !== 'undefined' && body instanceof URLSearchParams) {
         text = body.toString();
         contentType = 'application/x-www-form-urlencoded';
@@ -81,8 +130,7 @@ function projectRequestBody(body, captureBodies) {
         }
     }
     else if (body !== undefined && body !== null) {
-        const kind = body.constructor?.name ?? typeof body;
-        return captureBodies ? { requestBodyType: kind } : {};
+        return captureBodies ? { requestBodyType: typeOf() } : {};
     }
     const fields = { [REQUEST_SHAPE_FIELD]: shape };
     if (!captureBodies || text === undefined || 0 === text.length)
@@ -182,7 +230,13 @@ function isNativeFetch(fn) {
     }
 }
 const OURS = new WeakSet();
+const PAGE_CAPTURE = Symbol.for('reticle.network');
+const pageSlots = () => window;
 export function installNetwork(emit, opts = {}) {
+    if (undefined !== pageSlots()[PAGE_CAPTURE])
+        return () => undefined;
+    const owner = {};
+    pageSlots()[PAGE_CAPTURE] = owner;
     const captureBodies = true === opts.captureBodies;
     const captureErrorBodies = false !== opts.captureErrorBodies;
     const reinterpret = opts.reinterpret;
@@ -202,6 +256,7 @@ export function installNetwork(emit, opts = {}) {
         const method = methodOf(input, init);
         const nextAction = nextActionOf(input, init);
         const nextActionFields = nextAction === undefined ? {} : { [NEXT_ACTION_FIELD]: nextAction };
+        const bodyFields = observeValue(() => projectRequestBody(init?.body, captureBodies)) ?? {};
         const urlFields = netUrlFields(rawUrl);
         const url = urlFields.url;
         const initiatorStack = observeValue(() => initiatorFrame());
@@ -236,7 +291,7 @@ export function installNetwork(emit, opts = {}) {
                         ...initiatorFields,
                         ...resourceTiming(rawUrl),
                         ...netResponseMeta(res.statusText, contentType, res.headers.get('content-length')),
-                        ...projectRequestBody(init?.body, captureBodies),
+                        ...bodyFields,
                         ...nextActionFields,
                         ...responseBodyFields,
                         ...(reinterpret?.(url, (name) => res.headers.get(name)) ?? {}),
@@ -252,7 +307,9 @@ export function installNetwork(emit, opts = {}) {
                 catch {
                 }
                 void (async () => {
-                    let responseBodyFields = {};
+                    let responseBodyFields = captureBodies
+                        ? { responseBodyReason: ResponseBodyReason.UNREADABLE }
+                        : {};
                     if (clone !== undefined) {
                         try {
                             const text = await withBodyDeadline(clone.text());
@@ -263,7 +320,7 @@ export function installNetwork(emit, opts = {}) {
                                 responseBodyFields = {
                                     responseBody: body,
                                     ...(truncated ? { responseBodyTruncated: true } : {}),
-                                    ...(captureBodies ? {} : { responseBodyReason: 'error-status' }),
+                                    ...(captureBodies ? {} : { responseBodyReason: ResponseBodyReason.ERROR_STATUS }),
                                 };
                             }
                         }
@@ -278,7 +335,8 @@ export function installNetwork(emit, opts = {}) {
                 })().catch(() => undefined);
             }
             else {
-                emitRequest({});
+                const skipped = captureBodies ? skippedBodyReason(contentType) : undefined;
+                emitRequest(skipped === undefined ? {} : { responseBodyReason: skipped });
             }
             return res;
         }
@@ -326,7 +384,7 @@ export function installNetwork(emit, opts = {}) {
             const m = meta.get(this);
             if (m !== undefined) {
                 m.start = performance.now();
-                m.reqBody = body ?? null;
+                m.reqFields = observeValue(() => projectRequestBody(body ?? null, captureBodies)) ?? {};
                 m.initiatorStack = initiatorFrame();
                 const initiatorFields = m.initiatorStack === undefined ? {} : { initiatorStack: m.initiatorStack };
                 emit(EventType.NET_PENDING, {
@@ -348,6 +406,13 @@ export function installNetwork(emit, opts = {}) {
                             let responseBodyFields = {};
                             const textReadable = '' === this.responseType || 'text' === this.responseType;
                             const wantXhrErrorBody = shouldCaptureErrorBody(this.status, captureErrorBodies);
+                            if (captureBodies) {
+                                const skipped = isCapturableType(xhrContentType)
+                                    ? ResponseBodyReason.UNREADABLE
+                                    : skippedBodyReason(xhrContentType);
+                                if (skipped !== undefined)
+                                    responseBodyFields = { responseBodyReason: skipped };
+                            }
                             if ((captureBodies || wantXhrErrorBody) &&
                                 textReadable &&
                                 isCapturableType(xhrContentType)) {
@@ -358,7 +423,9 @@ export function installNetwork(emit, opts = {}) {
                                     responseBodyFields = {
                                         responseBody: rb,
                                         ...(truncated ? { responseBodyTruncated: true } : {}),
-                                        ...(captureBodies ? {} : { responseBodyReason: 'error-status' }),
+                                        ...(captureBodies
+                                            ? {}
+                                            : { responseBodyReason: ResponseBodyReason.ERROR_STATUS }),
                                     };
                                 }
                                 catch {
@@ -375,7 +442,7 @@ export function installNetwork(emit, opts = {}) {
                                 ...(cur.initiatorStack === undefined ? {} : { initiatorStack: cur.initiatorStack }),
                                 ...resourceTiming(cur.rawUrl),
                                 ...netResponseMeta(this.statusText, xhrContentType, this.getResponseHeader('content-length')),
-                                ...projectRequestBody(cur.reqBody, captureBodies),
+                                ...cur.reqFields,
                                 ...responseBodyFields,
                             });
                         });
@@ -530,6 +597,8 @@ export function installNetwork(emit, opts = {}) {
         }
     }
     return () => {
+        if (pageSlots()[PAGE_CAPTURE] === owner)
+            delete pageSlots()[PAGE_CAPTURE];
         subresourceObserver?.disconnect();
         if (window.fetch === patchedFetch)
             window.fetch = origFetch;

package/dist/observers/perf.js

@@ -1,4 +1,50 @@
 import { EventType, PerfMetric } from '@reticlehq/core';
+import { refs } from '../dom/addressing/refs.js';
+import { getTestIdAttr, readTestId } from '../dom/addressing/testid-attr.js';
+import { isReticleOverlay } from '../dom/dom-ignore.js';
+import { isElement } from '../dom/realm.js';
+const areaOf = (r) => r === undefined ? 0 : Math.max(0, r.width) * Math.max(0, r.height);
+function cssIdent(value) {
+    const css = globalThis.CSS;
+    if ('function' === typeof css?.escape)
+        return css.escape(value);
+    let out = '';
+    for (const [i, ch] of [...value].entries()) {
+        const startsWithDigit = /\d/.test(ch) && (0 === i || (1 === i && value.startsWith('-')));
+        if (startsWithDigit)
+            out += `\\${ch.charCodeAt(0).toString(16)} `;
+        else if (/[\w-]/.test(ch))
+            out += ch;
+        else
+            out += `\\${ch}`;
+    }
+    return out;
+}
+function shortSelector(el) {
+    const testid = readTestId(el);
+    if (null !== testid)
+        return `[${getTestIdAttr()}="${testid.replace(/["\\]/g, '\\$&')}"]`;
+    const tag = el.tagName.toLowerCase();
+    if (0 < el.id.length)
+        return `${tag}#${cssIdent(el.id)}`;
+    const cls = el.classList.item(0);
+    return null === cls ? tag : `${tag}.${cssIdent(cls)}`;
+}
+function largestShifted(sources) {
+    let best;
+    for (const source of sources ?? []) {
+        const node = source.node ?? null;
+        const el = null === node ? null : isElement(node) ? node : node.parentElement;
+        if (null === el || isReticleOverlay(el))
+            continue;
+        const area = Math.max(areaOf(source.previousRect), areaOf(source.currentRect));
+        if (best === undefined || area > best.area)
+            best = { el, area };
+    }
+    return best === undefined
+        ? undefined
+        : { ref: refs.refFor(best.el), selector: shortSelector(best.el) };
+}
 export function installPerf(emit) {
     if (typeof PerformanceObserver !== 'function')
         return () => undefined;
@@ -29,7 +75,13 @@ export function installPerf(emit) {
         if (true === ls.hadRecentInput)
             return;
         cls += ls.value ?? 0;
-        emit(EventType.PERF, { metric: PerfMetric.CLS, value: cls, at: Math.round(e.startTime) });
+        const shifted = largestShifted(ls.sources);
+        emit(EventType.PERF, {
+            metric: PerfMetric.CLS,
+            value: cls,
+            at: Math.round(e.startTime),
+            ...(shifted === undefined ? {} : { shifted }),
+        });
     });
     observe('longtask', (e) => {
         emit(EventType.PERF, {

package/dist/observers/route.d.ts

@@ -1,2 +1,4 @@
 import { type Emit, type Teardown } from './types.js';
+export declare function declareRoutes(patterns: readonly string[]): void;
+export declare function patternOf(pathname: string): string | undefined;
 export declare function installRoute(emit: Emit): Teardown;

package/dist/observers/route.js

@@ -1,6 +1,7 @@
-import { EventType } from '@reticlehq/core';
+import { EventType, ROUTE_CHANGE_HOW_FIELD, RouteChangeHow } from '@reticlehq/core';
 import { observeSafely } from './types.js';
 import { captureMethod } from '../patching/capture-method.js';
+import { redactUrl } from '@reticlehq/core';
 function snapshotLocation() {
     return {
         pathname: location.pathname,
@@ -9,6 +10,32 @@ function snapshotLocation() {
         href: location.href,
     };
 }
+let declared = [];
+export function declareRoutes(patterns) {
+    declared = patterns.map((pattern) => ({ pattern, parts: pattern.split('/').filter(Boolean) }));
+}
+function nextPattern() {
+    const raw = globalThis.next?.router?.pathname;
+    if ('string' !== typeof raw || !raw.startsWith('/'))
+        return undefined;
+    return raw.replace(/\[\.\.\.[^\]]+\]/g, '*').replace(/\[([^\]]+)\]/g, ':$1');
+}
+export function patternOf(pathname) {
+    const segments = pathname.split('/').filter(Boolean);
+    let best;
+    for (const { pattern, parts } of declared) {
+        const rest = '*' === parts.at(-1);
+        const fixed = rest ? parts.slice(0, -1) : parts;
+        if (rest ? segments.length < fixed.length : segments.length !== fixed.length)
+            continue;
+        if (!fixed.every((part, i) => part.startsWith(':') || part === segments[i]))
+            continue;
+        const params = parts.filter((part) => part.startsWith(':') || '*' === part).length;
+        if (best === undefined || params < best.params)
+            best = { pattern, params };
+    }
+    return best?.pattern ?? nextPattern();
+}
 export function installRoute(emit) {
     const ac = new AbortController();
     const origPush = captureMethod(history, 'pushState');
@@ -16,35 +43,38 @@ export function installRoute(emit) {
     const callPush = origPush.bind(history);
     const callReplace = origReplace.bind(history);
     let lastHref = location.href;
-    const fire = (from) => {
+    const fire = (from, how) => {
         observeSafely(() => {
             const to = snapshotLocation();
             if (to.href === from)
                 return;
             lastHref = to.href;
+            const pattern = patternOf(to.pathname);
             emit(EventType.ROUTE_CHANGE, {
-                from,
-                to: to.href,
+                from: redactUrl(from),
+                to: redactUrl(to.href),
                 pathname: to.pathname,
-                search: to.search,
-                hash: to.hash,
+                ...(pattern === undefined ? {} : { pattern }),
+                search: redactUrl(to.search),
+                hash: redactUrl(to.hash),
+                [ROUTE_CHANGE_HOW_FIELD]: how,
             });
         });
     };
     const patchedPush = (data, unused, url) => {
         const from = location.href;
         callPush(data, unused, url ?? null);
-        fire(from);
+        fire(from, RouteChangeHow.PUSH);
     };
     const patchedReplace = (data, unused, url) => {
         const from = location.href;
         callReplace(data, unused, url ?? null);
-        fire(from);
+        fire(from, RouteChangeHow.REPLACE);
     };
     history.pushState = patchedPush;
     history.replaceState = patchedReplace;
     const onNav = () => {
-        fire(lastHref);
+        fire(lastHref, RouteChangeHow.POP);
     };
     window.addEventListener('popstate', onNav, { signal: ac.signal });
     window.addEventListener('hashchange', onNav, { signal: ac.signal });

package/dist/presenter/carousel/carousel.js

@@ -135,7 +135,7 @@ function startRotation(log, root, count) {
 export const CAROUSEL_CSS = `
 .reticle-carousel{position:relative;margin:8px 10px;padding:10px 12px 8px;border:1px solid var(--reticle-line,#2a2f3a);border-radius:10px;background:var(--reticle-surface-inset,rgba(255,255,255,.03));}
 .reticle-carousel-track{height:100px;overflow:hidden;}
-.reticle-carousel-slide .reticle-offer,.reticle-carousel-slide .reticle-talk{margin:0;padding:0;border:0;background:none;}
+.reticle-carousel-slide .reticle-talk{margin:0;padding:0;border:0;background:none;}
 .reticle-carousel-close{position:absolute;top:4px;right:6px;width:20px;height:20px;padding:0;border:0;background:none;color:inherit;opacity:.55;cursor:pointer;font-size:14px;line-height:20px;}
 .reticle-carousel-close:hover{opacity:1;}
 .reticle-carousel-dots{display:flex;justify-content:center;gap:6px;margin-top:6px;}
@@ -144,10 +144,5 @@ export const CAROUSEL_CSS = `
 .reticle-carousel-controls{display:flex;align-items:center;gap:8px;margin-top:6px;}
 .reticle-carousel-arrow{width:24px;height:24px;flex:none;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--reticle-line);border-radius:6px;background:rgba(255,255,255,.04);color:var(--reticle-fg);font:inherit;font-size:18px;line-height:1;cursor:pointer;}
 .reticle-carousel-arrow:hover{border-color:var(--reticle-accent);background:var(--reticle-accent-soft);}
-.reticle-carousel-position{margin-left:auto;color:var(--reticle-muted);font-size:10px;font-variant-numeric:tabular-nums;white-space:nowrap;}
-.reticle-carousel-slide .reticle-offer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 8px;margin:0;padding:0;border:0;background:none;}
-.reticle-carousel-slide .reticle-offer-title{grid-column:1/-1;overflow:hidden;padding:0;font-size:11px;text-overflow:ellipsis;white-space:nowrap;}
-.reticle-carousel-slide .reticle-offer-body{grid-column:1;grid-row:2;margin:0;overflow:hidden;font-size:10px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap;}
-.reticle-carousel-slide .reticle-offer-claim{grid-column:2;grid-row:2;padding:3px 7px;font-size:10px;white-space:nowrap;}
-.reticle-carousel-slide .reticle-offer-claimed{overflow:hidden;margin:0;text-overflow:ellipsis;white-space:nowrap;}
+.reticle-carousel-position{margin-left:auto;color:var(--reticle-muted);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;}
 `;

package/dist/presenter/carousel/panel-slides.d.ts

@@ -1,8 +1,6 @@
-import { type OfferState } from './offer-card.js';
 import type { Slide } from './carousel.js';
 export declare const SLIDE_ID: {
-    readonly HARNESS: "harness-journeys";
     readonly REPLAY: "replay-confidence";
-    readonly OFFER: "harness-offer";
+    readonly NOTES: "notes-for-agent";
 };
-export declare function panelSlides(offer: OfferState | undefined, offerDeclined: boolean, notices?: readonly unknown[], base?: string): Slide[];
+export declare function panelSlides(notices?: readonly unknown[], base?: string): Slide[];

package/dist/presenter/carousel/panel-slides.js

@@ -1,23 +1,29 @@
-import { offerHtml } from './offer-card.js';
 import { HudNoticeSchema } from '@reticlehq/core/hud';
 import { esc } from '../chrome/presenter-safe-html.js';
 import { DEFAULT_PLATFORM_URL } from '@reticlehq/core';
 const HARNESS_PATH = '/settings?group=billing';
 export const SLIDE_ID = {
-    HARNESS: 'harness-journeys',
     REPLAY: 'replay-confidence',
-    OFFER: 'harness-offer',
+    NOTES: 'notes-for-agent',
+};
+const SLIDE_TEXT = {
+    REPLAY_TITLE: 'Replay what your agent verified',
+    REPLAY_DETAIL: 'Saved flows re-run after each edit.',
+    REPLAY_LINK: 'See how →',
+    NOTES_TITLE: 'Point your agent at anything',
+    NOTES_DETAIL: 'Open Notes, then click an element.',
 };
 const valueSlides = (base) => [
     {
-        id: SLIDE_ID.HARNESS,
-        html: `<div class="reticle-promo-copy"><span class="reticle-promo-kicker">RETICLE HARNESS</span><strong class="reticle-promo-title">Let Reticle drive your app for you</strong><span class="reticle-promo-detail">Describe a user; it drives the journey and saves it to replay.</span><a data-reticle-promo-link class="reticle-promo-link" href="${base}${HARNESS_PATH}" target="_blank" rel="noopener noreferrer">Explore →</a></div>`,
+        id: SLIDE_ID.REPLAY,
+        html: `<div class="reticle-promo-copy"><strong class="reticle-promo-title">${SLIDE_TEXT.REPLAY_TITLE}</strong><span class="reticle-promo-detail">${SLIDE_TEXT.REPLAY_DETAIL}</span><a data-reticle-promo-link class="reticle-promo-link" href="${base}${HARNESS_PATH}" target="_blank" rel="noopener noreferrer">${SLIDE_TEXT.REPLAY_LINK}</a></div>`,
     },
     {
-        id: SLIDE_ID.REPLAY,
-        html: `<div class="reticle-promo-copy"><span class="reticle-promo-kicker">FROM RUN TO REGRESSION</span><strong class="reticle-promo-title">Keep every journey replayable</strong><span class="reticle-promo-detail">Catch what changes before users do.</span><a data-reticle-promo-link class="reticle-promo-link" href="${base}${HARNESS_PATH}" target="_blank" rel="noopener noreferrer">See how →</a></div>`,
+        id: SLIDE_ID.NOTES,
+        html: `<div class="reticle-promo-copy"><strong class="reticle-promo-title">${SLIDE_TEXT.NOTES_TITLE}</strong><span class="reticle-promo-detail">${SLIDE_TEXT.NOTES_DETAIL}</span></div>`,
     },
 ];
+const HARNESS_NOTICE_PREFIX = 'harness';
 const NOTICE_SLIDE_PREFIX = 'notice-';
 function noticeSlide(notice) {
     const kicker = notice.kicker === undefined
@@ -25,7 +31,7 @@ function noticeSlide(notice) {
         : `<span class="reticle-promo-kicker">${esc(notice.kicker)}</span>`;
     const detail = notice.detail === undefined
         ? ''
-        : `<span class="reticle-promo-detail">${esc(notice.detail)}</span>`;
+        : `<span class="reticle-promo-detail" title="${esc(notice.detail)}">${esc(notice.detail)}</span>`;
     const link = notice.cta === undefined
         ? ''
         : `<a data-reticle-promo-link class="reticle-promo-link" href="${esc(notice.cta.url)}" target="_blank" rel="noopener noreferrer">${esc(notice.cta.label)} →</a>`;
@@ -34,14 +40,10 @@ function noticeSlide(notice) {
         html: `<div class="reticle-promo-copy">${kicker}<strong class="reticle-promo-title">${esc(notice.title)}</strong>${detail}${link}</div>`,
     };
 }
-export function panelSlides(offer, offerDeclined, notices = [], base = DEFAULT_PLATFORM_URL) {
-    const harnessOffer = offerHtml(offer, offerDeclined);
+export function panelSlides(notices = [], base = DEFAULT_PLATFORM_URL) {
     const valid = notices.flatMap((n) => {
         const parsed = HudNoticeSchema.safeParse(n);
-        return parsed.success ? [parsed.data] : [];
+        return parsed.success && !parsed.data.id.startsWith(HARNESS_NOTICE_PREFIX) ? [parsed.data] : [];
     });
-    return [
-        ...('' === harnessOffer ? [] : [{ id: SLIDE_ID.OFFER, html: harnessOffer }]),
-        ...(0 < valid.length ? valid.map(noticeSlide) : valueSlides(base)),
-    ];
+    return 0 < valid.length ? valid.map(noticeSlide) : [...valueSlides(base)];
 }

package/dist/presenter/chrome/log-memory.d.ts

@@ -5,6 +5,7 @@ export interface RememberedRow {
     ts: string;
     at: number;
     actor?: LogActor;
+    summary?: true;
     result?: LogResult;
 }
 export declare function readRememberedLog(): RememberedRow[];

package/dist/presenter/chrome/presenter-log.d.ts

@@ -3,8 +3,15 @@ import { LOG_ACTOR, LOG_KIND, LOG_RESULT, type LogActor, type LogKind, type LogR
 export { LOG_ACTOR, LOG_KIND, LOG_RESULT };
 export type { LogActor, LogKind, LogResult };
 export declare const CHIP_LABEL: Record<PresenterMode, string>;
+export declare const LAST_ACTOR_ATTR = "data-reticle-log-actor";
 export declare const DATA_RETICLE_LOG = "data-reticle-log";
 export declare const LOG_TIME_ATTR = "data-reticle-log-time";
+export declare const LOG_EMPTY_TEXT: {
+    readonly TITLE: "Reticle checks your app from the inside.";
+    readonly OFFLINE_TITLE: "Not connected yet.";
+    readonly OFFLINE_BODY: "Once Reticle is running, this page connects by itself and the steps show here.";
+    readonly BODY: "Ask your coding agent to verify a change with Reticle: each step shows here, live.\\AOr open Harness below: Reticle clicks through the app as the person you pick and reports what breaks.";
+};
 export declare const LOG_CSS: string;
 export declare const LOG_SCROLLABLE_ATTR = "data-reticle-log-scrollable";
 export declare function settleLogAtLatest(container: HTMLElement): void;

package/dist/presenter/chrome/presenter-log.js

@@ -25,7 +25,7 @@ const HANDOVER_TEXT = {
     agent: 'Your agent is driving',
     harness: 'Reticle Harness is driving',
 };
-const LAST_ACTOR_ATTR = 'data-reticle-log-actor';
+export const LAST_ACTOR_ATTR = 'data-reticle-log-actor';
 const DATA_ACTOR = 'data-actor';
 const DATA_STATE = 'data-state';
 const HANDOVER_KIND = 'handover';
@@ -35,18 +35,29 @@ const DATA_RETICLE_LOG_ROW = 'data-reticle-log-row';
 export const LOG_TIME_ATTR = 'data-reticle-log-time';
 const DATA_KIND = 'data-kind';
 const LOG_TEXT_CLASS = 'reticle-log-text';
+const REPEAT_ATTR = 'data-reticle-repeat';
+const LOG_REPEAT_CLASS = 'reticle-log-repeat';
 const LOG_RES_CLASS = 'reticle-res';
 const LOG_CHIP_CLASS = 'reticle-chip';
-const LOG_EMPTY_HINT = 'Agent activity will appear here';
+export const LOG_EMPTY_TEXT = {
+    TITLE: 'Reticle checks your app from the inside.',
+    OFFLINE_TITLE: 'Not connected yet.',
+    OFFLINE_BODY: 'Once Reticle is running, this page connects by itself and the steps show here.',
+    BODY: 'Ask your coding agent to verify a change with Reticle: each step shows here, live.\\AOr open Harness below: Reticle clicks through the app as the person you pick and reports what breaks.',
+};
 const LOG_SETTLE_MS = 160;
 export const LOG_CSS = `
 [data-reticle-log]{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;touch-action:pan-y;
   display:flex;flex-direction:column;
   gap:4px;padding:8px 10px 10px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent;
   background:transparent;}
-[data-reticle-log]:empty{align-items:center;justify-content:center;}
-[data-reticle-log]:empty::after{content:"${LOG_EMPTY_HINT}";display:block;padding:24px 16px;text-align:center;
-  color:var(--reticle-faint);font-size:11.5px;line-height:1.5;letter-spacing:.01em;}
+[data-reticle-log]:empty{align-items:center;justify-content:center;gap:6px;padding:16px 18px;}
+[data-reticle-log]:empty::before{content:"${LOG_EMPTY_TEXT.TITLE}";display:block;text-align:center;
+  color:var(--reticle-hud-text);font-size:var(--reticle-hud-size-base);font-weight:600;line-height:1.4;}
+[data-reticle-log]:empty::after{content:"${LOG_EMPTY_TEXT.BODY}";display:block;max-width:260px;text-align:center;white-space:pre-line;
+  color:var(--reticle-hud-text-muted);font-size:var(--reticle-hud-size-sm);line-height:1.5;}
+[data-reticle-state="unreachable"] [data-reticle-log]:empty::before{content:"${LOG_EMPTY_TEXT.OFFLINE_TITLE}";}
+[data-reticle-state="unreachable"] [data-reticle-log]:empty::after{content:"${LOG_EMPTY_TEXT.OFFLINE_BODY}";}
 [data-reticle-log]::-webkit-scrollbar{width:8px;}
 [data-reticle-log]::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:8px;border:2px solid transparent;background-clip:content-box;}
 [data-reticle-log]::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.26);background-clip:content-box;}
@@ -69,8 +80,9 @@ export const LOG_CSS = `
 [data-reticle-log] [data-reticle-log-row] .reticle-chip-label{
   position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
 [data-reticle-log] [data-reticle-log-row][data-kind="read"] .reticle-chip{opacity:.5;}
-[${LOG_TIME_ATTR}]{flex:none;color:var(--reticle-faint);font-size:9px;font-variant-numeric:tabular-nums;padding-top:2px;min-width:2em;opacity:.85;}
+[${LOG_TIME_ATTR}]{flex:none;color:var(--reticle-faint);font-size:11px;font-variant-numeric:tabular-nums;padding-top:2px;min-width:2em;opacity:.85;}
 [data-reticle-log] .reticle-log-text{flex:1;min-width:0;color:var(--reticle-muted);overflow-wrap:anywhere;word-break:break-word;}
+[data-reticle-log] .reticle-log-repeat{flex:none;color:var(--reticle-muted);font-variant-numeric:tabular-nums;opacity:.7;}
 [data-reticle-log] .reticle-res{flex:none;font-size:7.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--reticle-bad);opacity:.75;padding-top:2px;}
 [data-reticle-log] .reticle-res.reticle-pass{display:none;}
 [data-reticle-log-row][data-kind="human"]{align-self:flex-end;max-width:78%;margin:6px 0 2px;
@@ -85,14 +97,14 @@ export const LOG_CSS = `
 [data-reticle-log-row][data-state="running"] .reticle-res{display:inline-block;width:6px;height:6px;margin-top:5px;
   border-radius:50%;background:var(--reticle-c-active);opacity:1;animation:reticle-row-pulse 1s ease-in-out infinite;}
 @keyframes reticle-row-pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
-[data-reticle-log] .reticle-res.reticle-pass{display:inline;color:#4ade80;font-size:10px;opacity:.9;}
+[data-reticle-log] .reticle-res.reticle-pass{display:inline;color:#4ade80;font-size:11px;opacity:.9;}
 [data-reticle-log] .reticle-res.reticle-fail{color:#fca5a5;background:rgba(239,68,68,.16);border-radius:999px;padding:1px 6px;font-size:8px;opacity:1;}
 /* The Harness's rows wear its own colour, so two drivers never read as one. */
 [data-reticle-log-row][data-actor="harness"]{--reticle-row-accent:#a78bfa;}
 [data-reticle-log-row][data-actor="harness"] .reticle-chip{color:#a78bfa;}
 [data-reticle-log-row][data-actor="harness"]:not([data-kind="handover"]){box-shadow:inset 2px 0 0 color-mix(in srgb,#a78bfa 55%,transparent);padding-left:8px;}
 [data-reticle-log-row][data-kind="handover"]{align-items:center;gap:8px;margin:8px 0 4px;padding:0;
-  font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--reticle-row-accent,var(--reticle-c-active));}
+  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--reticle-row-accent,var(--reticle-c-active));}
 [data-reticle-log-row][data-kind="handover"]::before,[data-reticle-log-row][data-kind="handover"]::after{
   content:"";flex:1;height:1px;background:color-mix(in srgb,var(--reticle-row-accent,var(--reticle-c-active)) 40%,transparent);}
 [data-reticle-log-row][data-kind="handover"] .reticle-log-text{flex:none;color:inherit;}
@@ -144,6 +156,23 @@ export function formatElapsed(ms) {
     return humanDuration(ms);
 }
 export function appendLogRow(container, kind, text, ts, logMax, actor = LOG_ACTOR.AGENT) {
+    const repeated = kind === LOG_KIND.READ ? sameReadAsLast(container, text, actor) : undefined;
+    if (repeated !== undefined) {
+        const times = Number(repeated.getAttribute(REPEAT_ATTR) ?? '1') + 1;
+        repeated.setAttribute(REPEAT_ATTR, String(times));
+        let count = repeated.querySelector(`.${LOG_REPEAT_CLASS}`);
+        if (null === count) {
+            count = document.createElement('span');
+            count.className = LOG_REPEAT_CLASS;
+            repeated.querySelector(`.${LOG_TEXT_CLASS}`)?.after(count);
+        }
+        count.textContent = `×${String(times)}`;
+        const time = repeated.querySelector(`[${LOG_TIME_ATTR}]`);
+        if (null !== time)
+            time.textContent = ts;
+        const res = repeated.querySelector(`.${LOG_RES_CLASS}`);
+        return null === res ? { result: () => undefined } : rowHandle(repeated, res);
+    }
     const driven = kind === LOG_KIND.ACT || kind === LOG_KIND.READ;
     if (driven && (container.getAttribute(LAST_ACTOR_ATTR) ?? LOG_ACTOR.AGENT) !== actor) {
         const divider = document.createElement('div');
@@ -200,6 +229,17 @@ export function appendLogRow(container, kind, text, ts, logMax, actor = LOG_ACTO
     requestAnimationFrame(() => {
         scrollLogToLatest(container);
     });
+    return rowHandle(row, resEl);
+}
+function sameReadAsLast(container, text, actor) {
+    const last = container.lastElementChild;
+    if (!(last instanceof HTMLElement) || !last.hasAttribute(DATA_RETICLE_LOG_ROW))
+        return undefined;
+    if (last.getAttribute(DATA_KIND) !== LOG_KIND.READ || last.getAttribute(DATA_ACTOR) !== actor)
+        return undefined;
+    return last.querySelector(`.${LOG_TEXT_CLASS}`)?.textContent === text ? last : undefined;
+}
+function rowHandle(row, resEl) {
     return {
         result: (r) => {
             row.setAttribute(DATA_STATE, r);

package/dist/presenter/chrome/presenter-morph.d.ts

@@ -0,0 +1 @@
+export declare function morphHtml(target: Element, html: string): void;

package/dist/presenter/chrome/presenter-morph.js

@@ -0,0 +1,34 @@
+export function morphHtml(target, html) {
+    const next = document.createElement('template');
+    next.innerHTML = html;
+    morphChildren(target, next.content);
+}
+function morphChildren(from, to) {
+    const have = [...from.childNodes];
+    const want = [...to.childNodes];
+    want.forEach((node, i) => {
+        const old = have[i];
+        if (old === undefined)
+            from.appendChild(node);
+        else if (old.nodeType === node.nodeType && old.nodeName === node.nodeName)
+            morphNode(old, node);
+        else
+            from.replaceChild(node, old);
+    });
+    for (const extra of have.slice(want.length))
+        from.removeChild(extra);
+}
+function morphNode(old, node) {
+    if (!(old instanceof Element) || !(node instanceof Element)) {
+        if (old.nodeValue !== node.nodeValue)
+            old.nodeValue = node.nodeValue;
+        return;
+    }
+    for (const { name } of [...old.attributes])
+        if (!node.hasAttribute(name))
+            old.removeAttribute(name);
+    for (const { name, value } of [...node.attributes])
+        if (old.getAttribute(name) !== value)
+            old.setAttribute(name, value);
+    morphChildren(old, node);
+}