@reticlehq/browser 3.6.0 → 3.7.0

package/dist/dom/render-page.js

@@ -0,0 +1,135 @@
+import { isSensitiveKey, STEP_SCREENSHOT } from '@reticlehq/core';
+import { RETICLE_OVERLAY } from './dom-ignore.js';
+export const MASK = '••••••••';
+const BUDGET_CHARS = 240_000;
+const CHUNK_CHARS = 60_000;
+const SHRINK = 0.75;
+const MAX_ATTEMPTS = 4;
+const LOAD_TIMEOUT_MS = 5_000;
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const FALLBACK_BACKGROUND = '#ffffff';
+const JPEG_MIME = 'image/jpeg';
+const DATA_URL_PREFIX = /^data:[^,]*,/;
+function isSecretField(el) {
+    if (el instanceof HTMLInputElement && 'password' === el.type)
+        return true;
+    return [el.name, el.id, el.getAttribute('autocomplete') ?? ''].some((key) => key.length > 0 && isSensitiveKey(key));
+}
+function carryState(from, to) {
+    if (from instanceof HTMLInputElement || from instanceof HTMLTextAreaElement) {
+        const value = isSecretField(from) && from.value.length > 0 ? MASK : from.value;
+        if (from instanceof HTMLTextAreaElement)
+            to.textContent = value;
+        else
+            to.setAttribute('value', value);
+    }
+    if (from instanceof HTMLInputElement) {
+        if (from.checked)
+            to.setAttribute('checked', '');
+        else
+            to.removeAttribute('checked');
+    }
+    if (from instanceof HTMLOptionElement) {
+        if (from.selected)
+            to.setAttribute('selected', '');
+        else
+            to.removeAttribute('selected');
+    }
+}
+function readableCss(doc) {
+    const sheets = [...Array.from(doc.styleSheets), ...(doc.adoptedStyleSheets ?? [])];
+    const parts = [];
+    for (const sheet of sheets) {
+        try {
+            for (const rule of Array.from(sheet.cssRules))
+                parts.push(rule.cssText);
+        }
+        catch {
+        }
+    }
+    return parts.join('\n');
+}
+export function cloneForRender(doc) {
+    const root = doc.documentElement;
+    const clone = root.cloneNode(true);
+    const live = root.querySelectorAll('*');
+    const copied = clone.querySelectorAll('*');
+    live.forEach((el, i) => {
+        const twin = copied[i];
+        if (twin !== undefined)
+            carryState(el, twin);
+    });
+    const dropped = [RETICLE_OVERLAY, 'script', 'noscript', 'link[rel~="stylesheet"]', 'style'];
+    clone.querySelectorAll(dropped.join(',')).forEach((el) => el.remove());
+    const style = doc.createElement('style');
+    style.textContent = readableCss(doc);
+    (clone.querySelector('head') ?? clone).append(style);
+    return clone;
+}
+function backgroundOf(doc) {
+    const view = doc.defaultView;
+    for (const el of [doc.body, doc.documentElement]) {
+        if (null === view || null === el)
+            continue;
+        const colour = view.getComputedStyle(el).backgroundColor;
+        if (colour.length > 0 && 'transparent' !== colour && 'rgba(0, 0, 0, 0)' !== colour)
+            return colour;
+    }
+    return FALLBACK_BACKGROUND;
+}
+function loadImage(url) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        const timer = setTimeout(() => reject(new Error('the page did not render in time')), LOAD_TIMEOUT_MS);
+        img.onload = () => {
+            clearTimeout(timer);
+            resolve(img);
+        };
+        img.onerror = () => {
+            clearTimeout(timer);
+            reject(new Error('the page could not be drawn as an image'));
+        };
+        img.src = url;
+    });
+}
+function chunked(base64) {
+    const out = [];
+    for (let i = 0; i < base64.length; i += CHUNK_CHARS)
+        out.push(base64.slice(i, i + CHUNK_CHARS));
+    return out;
+}
+export async function renderPage() {
+    try {
+        const width = Math.max(1, window.innerWidth);
+        const height = Math.max(1, window.innerHeight);
+        const clone = cloneForRender(document);
+        clone.style.transform = `translate(${String(-window.scrollX)}px, ${String(-window.scrollY)}px)`;
+        const xhtml = new XMLSerializer().serializeToString(clone);
+        const svg = `<svg xmlns="${SVG_NS}" width="${String(width)}" height="${String(height)}">` +
+            `<foreignObject x="0" y="0" width="100%" height="100%">${xhtml}</foreignObject></svg>`;
+        const img = await loadImage(`data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`);
+        const background = backgroundOf(document);
+        let scale = Math.min(1, STEP_SCREENSHOT.MAX_SIDE_PX / Math.max(width, height));
+        for (let attempt = 0; attempt < MAX_ATTEMPTS; attempt += 1, scale *= SHRINK) {
+            const canvas = document.createElement('canvas');
+            canvas.width = Math.max(1, Math.round(width * scale));
+            canvas.height = Math.max(1, Math.round(height * scale));
+            const ctx = canvas.getContext('2d');
+            if (null === ctx)
+                return { ok: false, reason: 'this page has no 2D canvas to draw into' };
+            ctx.fillStyle = background;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+            const base64 = canvas
+                .toDataURL(JPEG_MIME, STEP_SCREENSHOT.JPEG_QUALITY)
+                .replace(DATA_URL_PREFIX, '');
+            if (base64.length <= BUDGET_CHARS) {
+                return { ok: true, width: canvas.width, height: canvas.height, chunks: chunked(base64) };
+            }
+        }
+        return { ok: false, reason: 'the rendered page was too large to send, even scaled down' };
+    }
+    catch (error) {
+        return { ok: false, reason: error instanceof Error ? error.message : String(error) };
+    }
+}

package/dist/dom/snapshot.js

@@ -1,6 +1,6 @@
 import { ElementState, SnapshotMode } from '@reticlehq/core';
 import { capturedRootOf } from './shadow-registry.js';
-import { isFrame } from './realm.js';
+import { isElement, isFrame } from './realm.js';
 import { getAccessibleName, getRole, getStates, getValue, isVisible } from './a11y.js';
 import { refs } from './addressing/refs.js';
 import { isIgnored, isReticleOverlay } from './dom-ignore.js';
@@ -30,13 +30,44 @@ function announces(el, role) {
 }
 const TEXT_MAX = 80;
 function directText(el) {
-    let out = '';
+    const parts = readingParts(el);
+    const collapsed = (parts.own ? parts.text : '').replace(/\s+/g, ' ').trim();
+    return collapsed.length > TEXT_MAX ? `${collapsed.slice(0, TEXT_MAX)}…` : collapsed;
+}
+function readingParts(el) {
+    let text = '';
+    let own = false;
     for (const node of el.childNodes) {
-        if (3 === node.nodeType)
-            out += node.textContent ?? '';
+        if (3 === node.nodeType) {
+            text += node.textContent ?? '';
+            own ||= 0 < (node.textContent ?? '').trim().length;
+        }
+        else if (isElement(node) && foldsIntoParent(node)) {
+            const inner = readingParts(node);
+            text += inner.text;
+            own ||= inner.own;
+        }
+        else if (isElement(node) && isInlineIn(node) && INTERACTIVE.has(getRole(node))) {
+            text += getAccessibleName(node);
+        }
     }
-    const collapsed = out.replace(/\s+/g, ' ').trim();
-    return collapsed.length > TEXT_MAX ? `${collapsed.slice(0, TEXT_MAX)}…` : collapsed;
+    return { text, own };
+}
+function isInlineIn(el) {
+    const view = el.ownerDocument.defaultView;
+    const parent = el.parentElement;
+    if (null === view || null === parent)
+        return false;
+    const around = view.getComputedStyle(parent).display;
+    if (around.includes('flex') || around.includes('grid'))
+        return false;
+    return 'inline' === view.getComputedStyle(el).display;
+}
+function foldsIntoParent(el) {
+    if (skipEarly(el) || !isInlineIn(el))
+        return false;
+    const role = getRole(el);
+    return !INTERACTIVE.has(role) && !announces(el, role) && 0 === getAccessibleName(el).length;
 }
 export const MAX_UNREAD_BRANCHES = 50;
 function hiddenByMarkup(el) {
@@ -83,6 +114,7 @@ function layoutSignature(style) {
     }
     return '';
 }
+const overlayStamped = (el) => el.hasAttribute('data-aria-hidden') && 'true' === el.getAttribute('aria-hidden');
 function recordUnread(branches, ctx) {
     for (const branch of branches) {
         if (ctx.unread.length >= MAX_UNREAD_BRANCHES) {
@@ -109,7 +141,11 @@ function pierceChildren(parent) {
     return out;
 }
 function visit(child, depth, ctx, inLive) {
-    if (skipEarly(child)) {
+    const stampedOnly = true === ctx.throughOverlay &&
+        overlayStamped(child) &&
+        !isIgnored(child) &&
+        !(child instanceof HTMLElement && child.hidden);
+    if (!stampedOnly && skipEarly(child)) {
         if (hiddenByMarkup(child))
             ctx.hiddenSkipped += 1;
         return;
@@ -120,6 +156,10 @@ function visit(child, depth, ctx, inLive) {
         ctx.hiddenSkipped += 1;
         return;
     }
+    if (style !== null && 'inline' === style.display && !inLive && foldsIntoParent(child)) {
+        walk(child, depth, ctx, inLive);
+        return;
+    }
     const role = getRole(child);
     const name = getAccessibleName(child);
     const interactive = INTERACTIVE.has(role);
@@ -174,6 +214,7 @@ function collectDialogs(root) {
     }
     return names;
 }
+const MODAL_SELECTOR = '[role="dialog"], [role="alertdialog"], dialog[open], [aria-modal="true"]';
 function overlayHidingPage(root) {
     if (root !== document.body)
         return undefined;
@@ -242,6 +283,13 @@ export function buildSnapshot(options = {}) {
         visit(root, 0, ctx, false);
     else
         walk(root, 0, ctx);
+    if (0 === ctx.nodes && root === document.body) {
+        ctx.throughOverlay = true;
+        for (const child of Array.from(root.children))
+            if (overlayStamped(child) && null !== child.querySelector(MODAL_SELECTOR))
+                visit(child, 0, ctx, false);
+        ctx.throughOverlay = false;
+    }
     return {
         tree: ctx.lines.join('\n'),
         status,

package/dist/observers/dom.js

@@ -1,6 +1,6 @@
 import { readTestId, testIdSelector } from '../dom/addressing/testid-attr.js';
-import { EventType, TruncationChannel } from '@reticlehq/core';
-import { getAccessibleName, getRole, isVisible } from '../dom/a11y.js';
+import { EventType, REDACTED_VALUE, TruncationChannel } from '@reticlehq/core';
+import { getAccessibleName, getRole, isSensitiveField, isVisible } from '../dom/a11y.js';
 import { refs } from '../dom/addressing/refs.js';
 function regionKeyOf(target) {
     const el = isElement(target) ? target : null;
@@ -9,7 +9,7 @@ function regionKeyOf(target) {
     const labelled = el.closest(testIdSelector());
     return (labelled ? readTestId(labelled) : null) ?? refs.refFor(el);
 }
-import { isReticleOverlay } from '../dom/dom-ignore.js';
+import { isUnobserved } from '../dom/dom-ignore.js';
 import { capturedRoots, installShadowRegistry, onShadowRoot } from '../dom/shadow-registry.js';
 import { isElement } from '../dom/realm.js';
 import { observeSameOriginFrames } from './frames.js';
@@ -51,7 +51,7 @@ function describeMount(node) {
         if (scanned >= MOUNT_SCAN_LIMIT)
             return undefined;
         scanned += 1;
-        if (isReticleOverlay(child))
+        if (isUnobserved(child))
             continue;
         const childRole = getRole(child);
         const childName = getAccessibleName(child);
@@ -71,6 +71,18 @@ function textOf(nodes) {
     const trimmed = out.trim();
     return trimmed.length > 0 ? trimmed : undefined;
 }
+const SAFE_ON_SECRET = new Set([
+    'class',
+    'style',
+    'type',
+    'disabled',
+    'readonly',
+    'required',
+    'hidden',
+]);
+function secretAttr(el, attr) {
+    return !SAFE_ON_SECRET.has(attr) && !attr.startsWith('aria-') && isSensitiveField(el);
+}
 export function installDom(emit) {
     const stopRegistry = installShadowRegistry();
     const observer = new MutationObserver((records) => {
@@ -81,14 +93,15 @@ export function installDom(emit) {
         for (const record of records) {
             if ('attributes' === record.type) {
                 const target = record.target;
-                if (isElement(target) && record.attributeName !== null && !isReticleOverlay(target)) {
+                if (isElement(target) && record.attributeName !== null && !isUnobserved(target)) {
                     if (changed >= MAX_PER_BATCH) {
                         dropped += 1;
                         continue;
                     }
                     changed += 1;
-                    const value = capValue(target.getAttribute(record.attributeName));
-                    const old = capValue(record.oldValue);
+                    const hide = secretAttr(target, record.attributeName);
+                    const value = hide ? REDACTED_VALUE : capValue(target.getAttribute(record.attributeName));
+                    const old = hide && null !== record.oldValue ? REDACTED_VALUE : capValue(record.oldValue);
                     emit(EventType.DOM_ATTR, {
                         attr: record.attributeName,
                         ...(value === undefined ? {} : { value }),
@@ -99,27 +112,31 @@ export function installDom(emit) {
             }
             if ('characterData' === record.type) {
                 const parent = record.target.parentElement;
-                if (parent !== null && !isReticleOverlay(parent)) {
+                if (parent !== null && !isUnobserved(parent)) {
                     if (changed >= MAX_PER_BATCH) {
                         dropped += 1;
                         continue;
                     }
                     changed += 1;
-                    const text = (record.target.textContent ?? '').trim().slice(0, 80);
-                    const old = capValue(record.oldValue?.trim() ?? null);
+                    const hide = isSensitiveField(parent);
+                    const text = hide
+                        ? REDACTED_VALUE
+                        : (record.target.textContent ?? '').trim().slice(0, 80);
+                    const old = hide ? undefined : capValue(record.oldValue?.trim() ?? null);
                     emit(EventType.DOM_TEXT, { text, ...(old === undefined ? {} : { old }) }, refs.refFor(parent));
                 }
                 continue;
             }
             if (textOf(record.addedNodes) !== undefined || textOf(record.removedNodes) !== undefined) {
                 const parent = isElement(record.target) ? record.target : null;
-                if (parent !== null && !isReticleOverlay(parent)) {
+                if (parent !== null && !isUnobserved(parent)) {
                     if (changed >= MAX_PER_BATCH)
                         dropped += 1;
                     else {
                         changed += 1;
-                        const text = (parent.textContent ?? '').trim().slice(0, 80);
-                        const old = capValue(textOf(record.removedNodes) ?? null);
+                        const hide = isSensitiveField(parent);
+                        const text = hide ? REDACTED_VALUE : (parent.textContent ?? '').trim().slice(0, 80);
+                        const old = hide ? undefined : capValue(textOf(record.removedNodes) ?? null);
                         emit(EventType.DOM_TEXT, { text, ...(old === undefined ? {} : { old }) }, refs.refFor(parent));
                     }
                 }
@@ -131,7 +148,7 @@ export function installDom(emit) {
                     dropped += 1;
                     continue;
                 }
-                if (isReticleOverlay(node))
+                if (isUnobserved(node))
                     continue;
                 const mounted = describeMount(node);
                 if (mounted === undefined)
@@ -154,8 +171,7 @@ export function installDom(emit) {
                     dropped += 1;
                     continue;
                 }
-                if (isReticleOverlay(node) ||
-                    (isElement(record.target) && isReticleOverlay(record.target))) {
+                if (isUnobserved(node) || (isElement(record.target) && isUnobserved(record.target))) {
                     continue;
                 }
                 const gone = describeMount(node);

package/dist/observers/field.js

@@ -1,9 +1,8 @@
 import { readTestId } from '../dom/addressing/testid-attr.js';
-import { DEFAULT_TESTID_ATTR, EventType, isSensitiveKey } from '@reticlehq/core';
-import { getAccessibleName } from '../dom/a11y.js';
+import { EventType } from '@reticlehq/core';
+import { getAccessibleName, isSensitiveField } from '../dom/a11y.js';
 const MAX_VALUE_LEN = 160;
 const BURST_MS = 150;
-const PAYMENT_AUTOCOMPLETE = /^(cc-|current-password|new-password)/i;
 function isField(target) {
     return (target instanceof HTMLInputElement ||
         target instanceof HTMLTextAreaElement ||
@@ -21,30 +20,13 @@ function fieldName(element) {
     const id = element.getAttribute('id');
     return null !== id && id.length > 0 ? id : element.tagName.toLowerCase();
 }
-function isSecret(element) {
-    if (element instanceof HTMLInputElement && 'password' === element.type)
-        return true;
-    const hint = element.getAttribute('autocomplete');
-    if (null !== hint && PAYMENT_AUTOCOMPLETE.test(hint))
-        return true;
-    for (const key of [
-        element.name,
-        readTestId(element),
-        element.getAttribute(DEFAULT_TESTID_ATTR),
-        element.getAttribute('id'),
-    ]) {
-        if (null !== key && key.length > 0 && isSensitiveKey(key))
-            return true;
-    }
-    return false;
-}
 export function installField(emit) {
     const ac = new AbortController();
     const { signal } = ac;
     const pending = new Map();
     const report = (element, kind) => {
         const value = element.value;
-        const secret = isSecret(element);
+        const secret = isSensitiveField(element);
         emit(EventType.FIELD_CHANGE, {
             field: fieldName(element),
             kind,

package/dist/observers/network.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)
@@ -202,6 +250,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 +285,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)) ?? {}),
@@ -326,7 +375,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, {
@@ -375,7 +424,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,
                             });
                         });

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

@@ -1,4 +1,4 @@
-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';
 function snapshotLocation() {
@@ -16,7 +16,7 @@ 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)
@@ -28,23 +28,24 @@ export function installRoute(emit) {
                 pathname: to.pathname,
                 search: to.search,
                 hash: 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[];