@reticlehq/browser 3.5.0 → 3.7.0

package/dist/presenter/carousel/carousel.js

@@ -1,8 +1,12 @@
+import { ReticleStorageKey } from '../../storage-keys.js';
 export const CAROUSEL_ATTR = 'data-reticle-carousel';
 export const CAROUSEL_SLIDE_ATTR = 'data-reticle-carousel-slide';
 export const CAROUSEL_DOT_ATTR = 'data-reticle-carousel-dot';
 export const CAROUSEL_CLOSE_ATTR = 'data-reticle-carousel-close';
-export const CAROUSEL_DISMISSED_KEY = 'reticle.carousel.dismissed';
+export const CAROUSEL_PREV_ATTR = 'data-reticle-carousel-prev';
+export const CAROUSEL_NEXT_ATTR = 'data-reticle-carousel-next';
+export const CAROUSEL_POSITION_ATTR = 'data-reticle-carousel-position';
+export const CAROUSEL_DISMISSED_KEY = ReticleStorageKey.CAROUSEL_DISMISSED;
 const CLOSE_LABEL = 'Close';
 export const ROTATE_MS = 6000;
 const rotations = new WeakMap();
@@ -22,7 +26,11 @@ function prefersReducedMotion() {
 }
 function show(root, index) {
     root.setAttribute('data-active', String(index));
-    root.querySelectorAll(`[${CAROUSEL_SLIDE_ATTR}]`).forEach((slide, i) => {
+    const slides = root.querySelectorAll(`[${CAROUSEL_SLIDE_ATTR}]`);
+    const position = root.querySelector(`[${CAROUSEL_POSITION_ATTR}]`);
+    if (position !== null)
+        position.textContent = `${String(index + 1)} / ${String(slides.length)}`;
+    slides.forEach((slide, i) => {
         slide.hidden = i !== index;
     });
     root.querySelectorAll(`[${CAROUSEL_DOT_ATTR}]`).forEach((dot, i) => {
@@ -37,15 +45,15 @@ export function carouselHtml(slides, active) {
     const track = slides
         .map((slide, i) => `<div ${CAROUSEL_SLIDE_ATTR}="${slide.id}" class="reticle-carousel-slide"${i === current ? '' : ' hidden'}>${slide.html}</div>`)
         .join('');
-    const dots = 1 === slides.length
+    const controls = 1 === slides.length
         ? ''
-        : `<div class="reticle-carousel-dots">${slides
-            .map((slide, i) => `<button type="button" ${CAROUSEL_DOT_ATTR}="${String(i)}" class="reticle-carousel-dot" aria-label="${slide.id}" aria-current="${String(i === current)}"></button>`)
-            .join('')}</div>`;
+        : `<div class="reticle-carousel-controls"><button type="button" ${CAROUSEL_PREV_ATTR} aria-label="Previous message" class="reticle-carousel-arrow">‹</button><div class="reticle-carousel-dots">${slides
+            .map((slide, i) => `<button type="button" ${CAROUSEL_DOT_ATTR}="${String(i)}" class="reticle-carousel-dot" aria-label="Show ${slide.id}" aria-current="${String(i === current)}"></button>`)
+            .join('')}</div><span ${CAROUSEL_POSITION_ATTR} aria-live="polite">${String(current + 1)} / ${String(slides.length)}</span><button type="button" ${CAROUSEL_NEXT_ATTR} aria-label="Next message" class="reticle-carousel-arrow">›</button></div>`;
     return `<div ${CAROUSEL_ATTR} class="reticle-carousel" role="region" aria-label="Reticle" data-active="${String(current)}">
       <button type="button" ${CAROUSEL_CLOSE_ATTR} class="reticle-carousel-close" aria-label="${CLOSE_LABEL}" title="${CLOSE_LABEL}">×</button>
       <div class="reticle-carousel-track">${track}</div>
-      ${dots}
+      ${controls}
     </div>`;
 }
 function dismissed(storage) {
@@ -88,6 +96,16 @@ export function paintCarousel(log, slides, storage) {
             show(root, Number(dot.getAttribute(CAROUSEL_DOT_ATTR)));
         });
     }
+    root.querySelector(`[${CAROUSEL_PREV_ATTR}]`)?.addEventListener('click', (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        show(root, (Number(root.getAttribute('data-active')) + slides.length - 1) % slides.length);
+    });
+    root.querySelector(`[${CAROUSEL_NEXT_ATTR}]`)?.addEventListener('click', (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        show(root, (Number(root.getAttribute('data-active')) + 1) % slides.length);
+    });
     startRotation(log, root, slides.length);
 }
 function startRotation(log, root, count) {
@@ -117,10 +135,14 @@ 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;}
 .reticle-carousel-dot{width:6px;height:6px;padding:0;border:0;border-radius:999px;background:currentColor;opacity:.3;cursor:pointer;}
 .reticle-carousel-dot[aria-current="true"]{opacity:.9;}
+.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:11px;font-variant-numeric:tabular-nums;white-space:nowrap;}
 `;

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

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

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

@@ -1,10 +1,49 @@
-import { offerHtml } from './offer-card.js';
-import { talkCardHtml } from './talk-card.js';
-export const SLIDE_ID = { HARNESS: 'harness', FOUNDERS: 'founders' };
-export function panelSlides(offer, offerDeclined) {
-    const harness = offerHtml(offer, offerDeclined);
-    return [
-        ...('' === harness ? [] : [{ id: SLIDE_ID.HARNESS, html: harness }]),
-        { id: SLIDE_ID.FOUNDERS, html: talkCardHtml() },
-    ];
+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 = {
+    REPLAY: 'replay-confidence',
+    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.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.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
+        ? ''
+        : `<span class="reticle-promo-kicker">${esc(notice.kicker)}</span>`;
+    const detail = notice.detail === undefined
+        ? ''
+        : `<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>`;
+    return {
+        id: `${NOTICE_SLIDE_PREFIX}${notice.id}`,
+        html: `<div class="reticle-promo-copy">${kicker}<strong class="reticle-promo-title">${esc(notice.title)}</strong>${detail}${link}</div>`,
+    };
+}
+export function panelSlides(notices = [], base = DEFAULT_PLATFORM_URL) {
+    const valid = notices.flatMap((n) => {
+        const parsed = HudNoticeSchema.safeParse(n);
+        return parsed.success && !parsed.data.id.startsWith(HARNESS_NOTICE_PREFIX) ? [parsed.data] : [];
+    });
+    return 0 < valid.length ? valid.map(noticeSlide) : [...valueSlides(base)];
 }

package/dist/presenter/carousel/talk-card.d.ts

@@ -5,4 +5,4 @@ export declare const TALK_TEXT: {
     readonly BOOK: "Book a call";
 };
 export declare function talkCardHtml(): string;
-export declare const TALK_CSS = "\n.reticle-talk-title{display:block;font-weight:600;font-size:12px;padding-right:18px;}\n.reticle-talk-body{margin:6px 0 8px;font-size:11px;line-height:1.45;opacity:.8;}\n.reticle-talk-book{display:inline-block;font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;background:var(--reticle-accent,#4f7cff);color:#fff;text-decoration:none;}\n";
+export declare const TALK_CSS: string;

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

@@ -10,3 +10,8 @@ export declare const LOG_RESULT: {
     readonly FAIL: "fail";
 };
 export type LogResult = (typeof LOG_RESULT)[keyof typeof LOG_RESULT];
+export declare const LOG_ACTOR: {
+    readonly AGENT: "agent";
+    readonly HARNESS: "harness";
+};
+export type LogActor = (typeof LOG_ACTOR)[keyof typeof LOG_ACTOR];

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

@@ -5,3 +5,4 @@ export const LOG_KIND = {
     HUMAN: 'human',
 };
 export const LOG_RESULT = { PASS: 'pass', FAIL: 'fail' };
+export const LOG_ACTOR = { AGENT: 'agent', HARNESS: 'harness' };

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

@@ -0,0 +1,13 @@
+import type { LogActor, LogKind, LogResult } from './presenter-log.js';
+export interface RememberedRow {
+    kind: LogKind;
+    text: string;
+    ts: string;
+    at: number;
+    actor?: LogActor;
+    summary?: true;
+    result?: LogResult;
+}
+export declare function readRememberedLog(): RememberedRow[];
+export declare function rememberLog(rows: readonly RememberedRow[]): void;
+export declare function claimLog(owner: string | undefined): boolean;

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

@@ -0,0 +1,39 @@
+import { ReticleStorageKey } from '../../storage-keys.js';
+const LOG_STORAGE_KEY = ReticleStorageKey.PRESENTER_LOG;
+export function readRememberedLog() {
+    try {
+        const raw = JSON.parse(globalThis.sessionStorage.getItem(LOG_STORAGE_KEY) ?? '[]');
+        return Array.isArray(raw)
+            ? raw.filter((row) => 'object' === typeof row &&
+                null !== row &&
+                'string' === typeof row.text &&
+                'string' === typeof row.kind &&
+                'string' === typeof row.ts &&
+                'number' === typeof row.at)
+            : [];
+    }
+    catch {
+        return [];
+    }
+}
+export function rememberLog(rows) {
+    try {
+        globalThis.sessionStorage.setItem(LOG_STORAGE_KEY, JSON.stringify(rows));
+    }
+    catch {
+    }
+}
+export function claimLog(owner) {
+    try {
+        const now = owner ?? '';
+        const before = globalThis.sessionStorage.getItem(ReticleStorageKey.PRESENTER_LOG_OWNER);
+        globalThis.sessionStorage.setItem(ReticleStorageKey.PRESENTER_LOG_OWNER, now);
+        if (null === before || before === now)
+            return false;
+        globalThis.sessionStorage.removeItem(LOG_STORAGE_KEY);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}

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

@@ -2,6 +2,7 @@ export declare const HUD_SURFACE_CLASS = "reticle-hud-surface";
 export declare const HUD_SURFACE_FILL: string;
 export declare const HUD_SURFACE_PAINT: string;
 export declare const HUD_DROP_SHADOW: string;
+export declare const HUD_GLASS_PAINT: string;
 export declare const HUD_CHROME_CSS: string;
 export declare const HUD_LOG_WELL_CLASS = "reticle-hud-log-well";
 export declare const HUD_LOG_WELL_CSS: string;

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

@@ -2,6 +2,12 @@ export const HUD_SURFACE_CLASS = 'reticle-hud-surface';
 export const HUD_SURFACE_FILL = `linear-gradient(165deg,#121218 0%,#09090c 42%,#000 100%)`;
 export const HUD_SURFACE_PAINT = `background:${HUD_SURFACE_FILL};box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 0 1px rgba(255,255,255,.09);`;
 export const HUD_DROP_SHADOW = '0 16px 40px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.08)';
+export const HUD_GLASS_PAINT = [
+    'background:radial-gradient(130% 80% at 50% 0%,color-mix(in srgb,var(--reticle-c-active) 20%,transparent),transparent 62%),',
+    'linear-gradient(180deg,#121a2e,#080b14);',
+    'border:1px solid color-mix(in srgb,var(--reticle-c-active) 30%,rgba(255,255,255,.1));',
+    `box-shadow:${HUD_DROP_SHADOW},0 0 64px -12px color-mix(in srgb,var(--reticle-c-active) 75%,transparent);`,
+].join('');
 export const HUD_CHROME_CSS = `
 .${HUD_SURFACE_CLASS}{
   position:relative;overflow:hidden;
@@ -25,7 +31,7 @@ export const HUD_LOG_WELL_CSS = `
      as tall as its rows, which left the empty-state line floating near the top of an otherwise
      empty panel instead of centred in it. */
   position:relative;display:flex;flex-direction:column;
-  flex:1 1 auto;height:210px;min-height:96px;max-height:210px;overflow:hidden;
+  flex:1 1 auto;height:240px;min-height:120px;max-height:300px;overflow:hidden;
   contain:layout style paint;
   margin:0 6px;border-radius:12px;background:transparent;}
 .${HUD_LOG_WELL_CLASS} > *{position:relative;z-index:1;}`;

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

@@ -1,11 +1,19 @@
 import { PresenterMode } from '@reticlehq/core';
-import { LOG_KIND, LOG_RESULT, type LogKind, type LogResult } from './log-kinds.js';
-export { LOG_KIND, LOG_RESULT };
-export type { LogKind, LogResult };
+import { LOG_ACTOR, LOG_KIND, LOG_RESULT, type LogActor, type LogKind, type LogResult } from './log-kinds.js';
+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;
 export interface LogHandle {
     result(r: LogResult): void;
@@ -15,4 +23,4 @@ export declare function clearLogRows(container: HTMLElement): void;
 export declare function clampLogMax(n: number | undefined): number;
 export declare function humanDuration(ms: number): string;
 export declare function formatElapsed(ms: number): string;
-export declare function appendLogRow(container: HTMLElement, kind: LogKind, text: string, ts: string, logMax: number): LogHandle;
+export declare function appendLogRow(container: HTMLElement, kind: LogKind, text: string, ts: string, logMax: number, actor?: LogActor): LogHandle;

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

@@ -1,9 +1,9 @@
 import { PresenterMode } from '@reticlehq/core';
-import { LOG_KIND, LOG_RESULT } from './log-kinds.js';
+import { LOG_ACTOR, LOG_KIND, LOG_RESULT, } from './log-kinds.js';
 import { nativeSetTimeout } from '../../timers/native/native-timers.js';
 import { PresenterIcon, PRESENTER_ICON_SIZE, hiIcon, } from '../icons/presenter-icons.js';
 const DEFAULT_LOG_MAX = 50;
-export { LOG_KIND, LOG_RESULT };
+export { LOG_ACTOR, LOG_KIND, LOG_RESULT };
 const LOG_CHIP = { read: 'READ', act: 'ACT', narration: '', human: '' };
 const LOG_CHIP_ICON = {
     read: PresenterIcon.VIEW,
@@ -20,25 +20,44 @@ const LOG_CHIP_MODE = {
     narration: PresenterMode.IDLE,
     human: PresenterMode.IDLE,
 };
-const RESULT_GLYPH = { pass: '', fail: 'Fail' };
+const RESULT_GLYPH = { pass: '✓', fail: 'Fail' };
+const HANDOVER_TEXT = {
+    agent: 'Your agent is driving',
+    harness: 'Reticle Harness is driving',
+};
+export const LAST_ACTOR_ATTR = 'data-reticle-log-actor';
+const DATA_ACTOR = 'data-actor';
+const DATA_STATE = 'data-state';
+const HANDOVER_KIND = 'handover';
 const RESULT_CLASS = { pass: 'reticle-pass', fail: 'reticle-fail' };
 export const DATA_RETICLE_LOG = 'data-reticle-log';
 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;}
@@ -61,18 +80,43 @@ 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;
   padding:8px 12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
   border-radius:16px 16px 4px 16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
 [data-reticle-log-row][data-kind="human"] .reticle-log-text{color:var(--reticle-fg);font-size:12px;line-height:1.45;}
+/* Rows arrive, rather than appear: the person watching should see the log move. */
+[data-reticle-log-row]{animation:reticle-row-in .22s var(--reticle-hud-ease,ease) both;}
+@keyframes reticle-row-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
+@media (prefers-reduced-motion:reduce){[data-reticle-log-row]{animation:none;}}
+/* The step in flight pulses until its verdict lands; then it says how it ended. */
+[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: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: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;}
+/* What the Harness or the daemon says about a drive reads as a notice, not an aside. */
+[data-reticle-log-row][data-kind="narration"]{font-style:normal;color:var(--reticle-fg);margin:4px 0;padding:7px 10px;
+  border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);}
 `;
 function scrollLogToLatest(container) {
     container.scrollTop = container.scrollHeight;
+    container.toggleAttribute(LOG_SCROLLABLE_ATTR, container.scrollHeight > container.clientHeight + 1);
 }
+export const LOG_SCROLLABLE_ATTR = 'data-reticle-log-scrollable';
 export function settleLogAtLatest(container) {
     scrollLogToLatest(container);
     requestAnimationFrame(() => {
@@ -111,10 +155,44 @@ export function humanDuration(ms) {
 export function formatElapsed(ms) {
     return humanDuration(ms);
 }
-export function appendLogRow(container, kind, text, ts, logMax) {
+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');
+        divider.setAttribute(DATA_RETICLE_LOG_ROW, '');
+        divider.setAttribute(DATA_KIND, HANDOVER_KIND);
+        divider.setAttribute(DATA_ACTOR, actor);
+        const label = document.createElement('span');
+        label.className = LOG_TEXT_CLASS;
+        label.textContent = HANDOVER_TEXT[actor];
+        divider.appendChild(label);
+        container.appendChild(divider);
+    }
+    if (driven)
+        container.setAttribute(LAST_ACTOR_ATTR, actor);
     const row = document.createElement('div');
     row.setAttribute(DATA_RETICLE_LOG_ROW, '');
     row.setAttribute(DATA_KIND, kind);
+    row.setAttribute(DATA_ACTOR, actor);
+    if (kind === LOG_KIND.ACT)
+        row.setAttribute(DATA_STATE, 'running');
     const tsEl = document.createElement('span');
     tsEl.setAttribute(LOG_TIME_ATTR, '');
     tsEl.textContent = ts;
@@ -151,10 +229,22 @@ export function appendLogRow(container, kind, text, ts, logMax) {
     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);
             if (r === LOG_RESULT.PASS) {
-                resEl.textContent = '';
+                resEl.textContent = RESULT_GLYPH.pass;
                 resEl.className = `${LOG_RES_CLASS} ${RESULT_CLASS.pass}`;
                 return;
             }

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);
+}

package/dist/presenter/chrome/presenter-report-copy.d.ts

@@ -7,9 +7,13 @@ export declare const REPORT_LINKS: {
 };
 export declare const REPORT_TEXT: {
     readonly TITLE: "Impact";
+    readonly COVERAGE: "Reticle Coverage";
+    readonly COVERAGE_HELP: "How much of this app Reticle has reached, touched and proved, from the coverage ledger in .reticle";
     readonly PROJECT: "This project";
-    readonly GLOBAL: "Everything on this machine";
-    readonly HERO_DEFECTS: "checks Reticle refused to pass";
+    readonly GLOBAL: "All projects";
+    readonly GLOBAL_TITLE: "Every project on this computer";
+    readonly SCOPE_LABEL: "Show impact for";
+    readonly heroDefects: (n: number) => string;
     readonly VERDICTS: "Verdicts";
     readonly PASSED: "passed";
     readonly FAILED: "failed";
@@ -27,20 +31,35 @@ export declare const REPORT_TEXT: {
     readonly CHART: "Verdicts, last 30 days";
     readonly DEFECTS: "What broke";
     readonly DEFECTS_MORE: "Manage all of them on the dashboard — triage, assign, and push to GitHub";
+    readonly DEFECTS_SEE_ALL: "See all on the dashboard";
+    readonly DEFECTS_SEE_ALL_TITLE: "Sign up free, link this project, and see every bug Reticle caught";
     readonly DEFECT_LINK_TITLE: "Open on the dashboard to triage or push to GitHub";
     readonly LOCAL_ONLY: "This record stops at this machine.";
-    readonly LOCAL_ONLY_ACTION: "reticle login";
+    readonly LOCAL_ONLY_ACTION: "reticle connect";
     readonly LOCAL_ONLY_TAIL: "keeps it, and lets a team see it.";
     readonly UNLINKED: "Signed in, but this repo is not linked.";
-    readonly UNLINKED_ACTION: "reticle link";
+    readonly UNLINKED_ACTION: "reticle connect";
     readonly UNLINKED_TAIL: "sends this record to your workspace.";
     readonly DEFECTS_NONE: "Nothing has failed a declared consequence yet.";
     readonly EMPTY: "Nothing recorded yet. Drive the app once and this fills in.";
     readonly SHARE: "Share";
     readonly COPY: "Copy";
     readonly COPIED: "Copied";
-    readonly REFER: "Send to a friend";
+    readonly SEE_RUN: "See it in your dashboard";
+    readonly KEY_REFUSED: "Key refused";
+    readonly NOT_SENT: "not synced";
+    readonly NOT_SENT_HELP: "Runs saved on this machine but not on your dashboard yet. Run reticle connect in this project to send them.";
+    readonly INSTRUMENTATION: "What Reticle can see";
+    readonly INSTRUMENTATION_HELP: "What Reticle can see in this app, from its handshake and the gaps its verdicts recorded";
+    readonly covered: (covered: number, total: number) => string;
+    readonly NOT_SEEN_YET: "not checked yet";
+    readonly COPY_PROMPT: "Copy prompt for your coding agent";
+    readonly SHARE_LABEL: "Share";
+    readonly POST_X: "X";
+    readonly POST_IN: "LinkedIn";
+    readonly REFER: "Invite a friend";
 };
+export declare const CAPABILITY_WORDS: Readonly<Record<string, string>>;
 export declare function compactNumber(n: number): string;
 export declare function compactDuration(ms: number): string;
 export declare function buildShareText(scope: ImpactScope, projectName?: string): string;
@@ -48,3 +67,7 @@ export declare function buildXShareUrl(text: string): string;
 export declare function buildLinkedInShareUrl(): string;
 export declare function buildReferralText(): string;
 export declare function parseImpactSnapshot(value: unknown): ImpactSnapshot | undefined;
+export declare const COVERAGE_LEVELS: readonly {
+    key: string;
+    label: string;
+}[];

package/dist/presenter/chrome/presenter-report-copy.js

@@ -8,9 +8,13 @@ export const REPORT_LINKS = {
 const SHARE_VIA_HANDLE = '';
 export const REPORT_TEXT = {
     TITLE: 'Impact',
+    COVERAGE: 'Reticle Coverage',
+    COVERAGE_HELP: 'How much of this app Reticle has reached, touched and proved, from the coverage ledger in .reticle',
     PROJECT: 'This project',
-    GLOBAL: 'Everything on this machine',
-    HERO_DEFECTS: 'checks Reticle refused to pass',
+    GLOBAL: 'All projects',
+    GLOBAL_TITLE: 'Every project on this computer',
+    SCOPE_LABEL: 'Show impact for',
+    heroDefects: (n) => `failed check${1 === n ? '' : 's'} caught before you shipped`,
     VERDICTS: 'Verdicts',
     PASSED: 'passed',
     FAILED: 'failed',
@@ -28,19 +32,43 @@ export const REPORT_TEXT = {
     CHART: 'Verdicts, last 30 days',
     DEFECTS: 'What broke',
     DEFECTS_MORE: 'Manage all of them on the dashboard — triage, assign, and push to GitHub',
+    DEFECTS_SEE_ALL: 'See all on the dashboard',
+    DEFECTS_SEE_ALL_TITLE: 'Sign up free, link this project, and see every bug Reticle caught',
     DEFECT_LINK_TITLE: 'Open on the dashboard to triage or push to GitHub',
     LOCAL_ONLY: 'This record stops at this machine.',
-    LOCAL_ONLY_ACTION: 'reticle login',
+    LOCAL_ONLY_ACTION: 'reticle connect',
     LOCAL_ONLY_TAIL: 'keeps it, and lets a team see it.',
     UNLINKED: 'Signed in, but this repo is not linked.',
-    UNLINKED_ACTION: 'reticle link',
+    UNLINKED_ACTION: 'reticle connect',
     UNLINKED_TAIL: 'sends this record to your workspace.',
     DEFECTS_NONE: 'Nothing has failed a declared consequence yet.',
     EMPTY: 'Nothing recorded yet. Drive the app once and this fills in.',
     SHARE: 'Share',
     COPY: 'Copy',
     COPIED: 'Copied',
-    REFER: 'Send to a friend',
+    SEE_RUN: 'See it in your dashboard',
+    KEY_REFUSED: 'Key refused',
+    NOT_SENT: 'not synced',
+    NOT_SENT_HELP: 'Runs saved on this machine but not on your dashboard yet. Run reticle connect in this project to send them.',
+    INSTRUMENTATION: 'What Reticle can see',
+    INSTRUMENTATION_HELP: 'What Reticle can see in this app, from its handshake and the gaps its verdicts recorded',
+    covered: (covered, total) => `${String(covered)} of ${String(total)}`,
+    NOT_SEEN_YET: 'not checked yet',
+    COPY_PROMPT: 'Copy prompt for your coding agent',
+    SHARE_LABEL: 'Share',
+    POST_X: 'X',
+    POST_IN: 'LinkedIn',
+    REFER: 'Invite a friend',
+};
+export const CAPABILITY_WORDS = {
+    'page connected': 'Page connected',
+    'DOM actions': 'Clicks and typing',
+    network: 'Network requests',
+    console: 'Console errors',
+    'app state (store registered)': 'App state',
+    'signals on mutation': 'Success signals from your code',
+    'file:line source mapping': 'Source file and line',
+    'stable test ids': 'Stable test ids',
 };
 export function compactNumber(n) {
     if (n < 1000)
@@ -93,3 +121,10 @@ export function parseImpactSnapshot(value) {
     const parsed = ImpactSnapshotSchema.safeParse(value);
     return parsed.success ? parsed.data : undefined;
 }
+export const COVERAGE_LEVELS = [
+    { key: 'reached', label: 'routes reached' },
+    { key: 'touched', label: 'controls touched' },
+    { key: 'proved', label: 'controls proved' },
+    { key: 'branched', label: 'write failures driven' },
+    { key: 'executed', label: 'code executed' },
+];