@reticlehq/browser 3.4.0 → 3.6.0

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

@@ -1,10 +1,47 @@
 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);
+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',
+};
+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"><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>`,
+    },
+];
+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">${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(offer, offerDeclined, notices = [], base = DEFAULT_PLATFORM_URL) {
+    const harnessOffer = offerHtml(offer, offerDeclined);
+    const valid = notices.flatMap((n) => {
+        const parsed = HudNoticeSchema.safeParse(n);
+        return parsed.success ? [parsed.data] : [];
+    });
     return [
-        ...('' === harness ? [] : [{ id: SLIDE_ID.HARNESS, html: harness }]),
-        { id: SLIDE_ID.FOUNDERS, html: talkCardHtml() },
+        ...('' === harnessOffer ? [] : [{ id: SLIDE_ID.OFFER, html: harnessOffer }]),
+        ...(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,12 @@
+import type { LogActor, LogKind, LogResult } from './presenter-log.js';
+export interface RememberedRow {
+    kind: LogKind;
+    text: string;
+    ts: string;
+    at: number;
+    actor?: LogActor;
+    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,12 @@
 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 DATA_RETICLE_LOG = "data-reticle-log";
 export declare const LOG_TIME_ATTR = "data-reticle-log-time";
 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 +16,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,7 +20,15 @@ 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',
+};
+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';
@@ -69,10 +77,34 @@ export const LOG_CSS = `
   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:10px;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));}
+[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 +143,27 @@ 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 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;
@@ -153,8 +202,9 @@ export function appendLogRow(container, kind, text, ts, logMax) {
     });
     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-report-copy.d.ts

@@ -7,8 +7,12 @@ 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 GLOBAL: "All projects";
+    readonly GLOBAL_TITLE: "Every project on this computer";
+    readonly SCOPE_LABEL: "Show impact for";
     readonly HERO_DEFECTS: "checks Reticle refused to pass";
     readonly VERDICTS: "Verdicts";
     readonly PASSED: "passed";
@@ -27,6 +31,8 @@ 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";
@@ -48,3 +54,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,8 +8,12 @@ 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',
+    GLOBAL: 'All projects',
+    GLOBAL_TITLE: 'Every project on this computer',
+    SCOPE_LABEL: 'Show impact for',
     HERO_DEFECTS: 'checks Reticle refused to pass',
     VERDICTS: 'Verdicts',
     PASSED: 'passed',
@@ -28,6 +32,8 @@ 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',
@@ -93,3 +99,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' },
+];

package/dist/presenter/hud-telemetry.js

@@ -3,7 +3,9 @@ import { HudPanel, HudToggle, HudView } from '@reticlehq/core';
 import { isReticleUi } from '../dom/dom-ignore.js';
 import { nativeSetTimeout } from '../timers/native/native-timers.js';
 import { CHAT_ATTR, MIN_ATTR, REPORT_ATTR, SETTINGS_ATTR } from './presenter-config.js';
+import { CAROUSEL_SLIDE_ATTR } from './carousel/carousel.js';
 const PREFIX = 'data-reticle-';
+const PAGE_OPEN_ATTR = 'data-reticle-page-open';
 const TOGGLE_ROLES = new Set(['switch', 'checkbox']);
 export function controlIdOf(el) {
     for (const attr of Array.from(el.attributes)) {
@@ -36,6 +38,11 @@ function viewOf(root) {
     if ('1' === root.getAttribute(REPORT_ATTR)) {
         return { view: HudView.EXPANDED, panel: HudPanel.REPORT };
     }
+    const page = root.getAttribute(PAGE_OPEN_ATTR);
+    if ('flows' === page)
+        return { view: HudView.EXPANDED, panel: HudPanel.FLOWS };
+    if ('annotations' === page)
+        return { view: HudView.EXPANDED, panel: HudPanel.NOTES };
     if ('1' === root.getAttribute(CHAT_ATTR))
         return { view: HudView.EXPANDED, panel: HudPanel.CHAT };
     return { view: HudView.COLLAPSED, panel: HudPanel.NONE };
@@ -73,15 +80,37 @@ export function installHudTelemetry(doc, root, report) {
         last = key;
         send(now);
     };
+    let lastSlide = '';
+    const onSlide = () => {
+        if (HudPanel.CHAT !== viewOf(root).panel)
+            return;
+        const shown = root.querySelector(`[${CAROUSEL_SLIDE_ATTR}]:not([hidden])`);
+        const slide = shown?.getAttribute(CAROUSEL_SLIDE_ATTR) ?? '';
+        if (0 === slide.length || slide === lastSlide)
+            return;
+        lastSlide = slide;
+        send({ slide });
+    };
+    const slides = new MutationObserver(onSlide);
+    slides.observe(root, {
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['data-active', 'hidden'],
+    });
     doc.addEventListener('click', onPress, true);
-    const observer = new MutationObserver(onChange);
+    const observer = new MutationObserver((records) => {
+        onChange();
+        if (0 < records.length)
+            onSlide();
+    });
     observer.observe(root, {
         attributes: true,
-        attributeFilter: [MIN_ATTR, CHAT_ATTR, SETTINGS_ATTR, REPORT_ATTR],
+        attributeFilter: [MIN_ATTR, CHAT_ATTR, SETTINGS_ATTR, REPORT_ATTR, PAGE_OPEN_ATTR],
     });
     onChange();
     return () => {
         doc.removeEventListener('click', onPress, true);
         observer.disconnect();
+        slides.disconnect();
     };
 }

package/dist/presenter/icons/presenter-heroicons-data.d.ts

@@ -14,6 +14,7 @@ declare const BODIES: {
     message: string;
     gear: string;
     layout: string;
+    notes: string;
     trash: string;
     help: string;
     'caret-right': string;

package/dist/presenter/icons/presenter-heroicons-data.js

@@ -6,14 +6,15 @@ const BODIES = {
     'caret-down': '<path d="m19 9l-7 7l-7-7"/>',
     check: '<path d="m5 13l4 4L19 7"/>',
     remove: '<path d="m4.5 19.5l15-15m-15 0l15 15"/>',
-    pause: '<path d="M10 9v6m4-6v6m7-3a9 9 0 1 1-18 0a9 9 0 0 1 18 0"/>',
-    play: '<g><path d="m14.752 11.168l-3.197-2.132A1 1 0 0 0 10 9.87v4.263a1 1 0 0 0 1.555.832l3.197-2.132a1 1 0 0 0 0-1.664"/><path d="M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"/></g>',
-    stop: '<g><path d="M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"/><path d="M9 10a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z"/></g>',
+    pause: '<path d="M8 5v14M16 5v14"/>',
+    play: '<path d="M8 5.75v12.5L18 12 8 5.75Z"/>',
+    stop: '<rect x="6.5" y="6.5" width="11" height="11" rx="2"/>',
     copy: '<path d="M8 7v8a2 2 0 0 0 2 2h6M8 7V5a2 2 0 0 1 2-2h4.586a1 1 0 0 1 .707.293l4.414 4.414a1 1 0 0 1 .293.707V15a2 2 0 0 1-2 2h-2M8 7H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-2"/>',
     download: '<path d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/>',
     message: '<path d="M8.625 9.75a.375.375 0 1 1-.75 0a.375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0a.375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0a.375.375 0 0 1 .75 0Zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227c1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332a48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"/>',
     gear: '<g><path d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87c.074.04.147.083.22.127c.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 0 1 0 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 0 1 0-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124c.072-.044.146-.087.22-.128c.332-.183.582-.495.644-.869l.214-1.281Z"/><path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"/></g>',
     layout: '<path d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6Zm0 9.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6Zm0 9.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z"/>',
+    notes: '<path d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75a2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15a2.25 2.25 0 0 1 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z"/>',
     trash: '<path d="m19 7l-.867 12.142A2 2 0 0 1 16.138 21H7.862a2 2 0 0 1-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v3M4 7h16"/>',
     help: '<path d="M8.228 9c.549-1.165 2.03-2 3.772-2c2.21 0 4 1.343 4 3c0 1.4-1.278 2.575-3.006 2.907c-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"/>',
     'caret-right': '<path d="m9 5l7 7l-7 7"/>',

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

@@ -13,6 +13,7 @@ export declare const PresenterIcon: {
     readonly COPY: "copy";
     readonly DOWNLOAD: "download";
     readonly MESSAGE: "message";
+    readonly NOTES: "notes";
     readonly GEAR: "gear";
     readonly LAYOUT: "layout";
     readonly TRASH: "trash";
@@ -30,6 +31,7 @@ export declare const PRESENTER_ICON_SIZE: {
     readonly SEND: 14;
     readonly MIN: 12;
     readonly HELP: 12;
+    readonly NAV: 18;
     readonly TOOLBAR: 18;
     readonly FAB: 22;
 };

package/dist/presenter/icons/presenter-icons.js

@@ -13,6 +13,7 @@ export const PresenterIcon = {
     COPY: 'copy',
     DOWNLOAD: 'download',
     MESSAGE: 'message',
+    NOTES: 'notes',
     GEAR: 'gear',
     LAYOUT: 'layout',
     TRASH: 'trash',
@@ -29,6 +30,7 @@ export const PRESENTER_ICON_SIZE = {
     SEND: 14,
     MIN: 12,
     HELP: 12,
+    NAV: 18,
     TOOLBAR: 18,
     FAB: 22,
 };

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

@@ -7,7 +7,7 @@ export declare const ACCOUNT_MENU_ATTR = "data-reticle-account-menu";
 export declare const ACCOUNT_SIGNOUT_ATTR = "data-reticle-account-signout";
 export declare const ACCOUNT_TEXT: {
     readonly SIGNED_OUT: "Sign in";
-    readonly SIGNIN_TITLE: "Run `reticle login` in your terminal — click to copy the command";
+    readonly SIGNIN_TITLE: "Sign in through your browser. Also copies `reticle login`, for a terminal";
     readonly SIGNIN_COMMAND: "reticle login";
     readonly DASHBOARD_TITLE: "Open this project on the dashboard";
     readonly SYNC_TITLE: "Push to the dashboard now, instead of waiting for the next sync";
@@ -19,9 +19,10 @@ export declare const ACCOUNT_TEXT: {
     readonly DASHBOARD_ACTION: "Open dashboard";
     readonly LINK_HINT: "Not linked — run `reticle link` to keep a record on the dashboard";
     readonly LINK_COMMAND: "reticle link";
-    readonly SIGNOUT_ACTION: "Sign out";
-    readonly SIGNOUT_TITLE: "Run `reticle logout` in your terminal — click to copy the command";
+    readonly SIGNOUT_ACTION: "Copy sign-out command";
+    readonly SIGNOUT_TITLE: "Copy `reticle logout` to run in your terminal";
     readonly SIGNOUT_COMMAND: "reticle logout";
+    readonly SIGNOUT_COPY_FAILED: "Run reticle logout in terminal";
     readonly PROJECT_LABEL: "Project";
     readonly HOST_LABEL: "Host";
     readonly VERDICTS_LABEL: "Verdicts";
@@ -37,4 +38,4 @@ export declare function accountInitials(org: string | undefined): string;
 export declare function accountControlHtml(account: AccountState | undefined, details?: AccountDetails, offerSignIn?: boolean): string;
 export declare function accountCapsuleHtml(account: AccountState | undefined, dashboardUrl?: string, offerSignIn?: boolean): string;
 export declare function syncButtonHtml(dashboardUrl: string | undefined): string;
-export declare function mountAccountControl(root: HTMLElement): () => void;
+export declare function mountAccountControl(root: HTMLElement, onSignIn?: () => void): () => void;

package/dist/presenter/presenter-account.js

@@ -8,7 +8,7 @@ export const ACCOUNT_MENU_ATTR = 'data-reticle-account-menu';
 export const ACCOUNT_SIGNOUT_ATTR = 'data-reticle-account-signout';
 export const ACCOUNT_TEXT = {
     SIGNED_OUT: 'Sign in',
-    SIGNIN_TITLE: 'Run `reticle login` in your terminal — click to copy the command',
+    SIGNIN_TITLE: 'Sign in through your browser. Also copies `reticle login`, for a terminal',
     SIGNIN_COMMAND: 'reticle login',
     DASHBOARD_TITLE: 'Open this project on the dashboard',
     SYNC_TITLE: 'Push to the dashboard now, instead of waiting for the next sync',
@@ -20,9 +20,10 @@ export const ACCOUNT_TEXT = {
     DASHBOARD_ACTION: 'Open dashboard',
     LINK_HINT: 'Not linked — run `reticle link` to keep a record on the dashboard',
     LINK_COMMAND: 'reticle link',
-    SIGNOUT_ACTION: 'Sign out',
-    SIGNOUT_TITLE: 'Run `reticle logout` in your terminal — click to copy the command',
+    SIGNOUT_ACTION: 'Copy sign-out command',
+    SIGNOUT_TITLE: 'Copy `reticle logout` to run in your terminal',
     SIGNOUT_COMMAND: 'reticle logout',
+    SIGNOUT_COPY_FAILED: 'Run reticle logout in terminal',
     PROJECT_LABEL: 'Project',
     HOST_LABEL: 'Host',
     VERDICTS_LABEL: 'Verdicts',
@@ -95,7 +96,7 @@ export function syncButtonHtml(dashboardUrl) {
         return '';
     return `<button type="button" class="reticle-sync-now" ${SYNC_BTN_ATTR} title="${ACCOUNT_TEXT.SYNC_TITLE}" aria-label="${ACCOUNT_TEXT.SYNC_TITLE}">${hiIconHtml(PresenterIcon.SYNC, PRESENTER_ICON_SIZE.HELP)}</button>`;
 }
-export function mountAccountControl(root) {
+export function mountAccountControl(root, onSignIn) {
     const controller = new AbortController();
     const { signal } = controller;
     const closeAll = (except) => {
@@ -111,14 +112,27 @@ export function mountAccountControl(root) {
             trigger.setAttribute('aria-expanded', 'false');
         }
     };
-    const flashCopied = (el) => {
+    const flashLabel = (el, value) => {
         const label = el.querySelector('span') ?? el;
         const previous = label.textContent;
-        label.textContent = ACCOUNT_TEXT.COPIED;
+        label.textContent = value;
         setTimeout(() => {
             label.textContent = previous;
         }, ACCOUNT_COPIED_MS);
     };
+    const copyCommand = async (command, el) => {
+        try {
+            if (navigator.clipboard === undefined)
+                throw new Error('Clipboard unavailable');
+            await navigator.clipboard.writeText(command);
+            flashLabel(el, ACCOUNT_TEXT.COPIED);
+        }
+        catch {
+            flashLabel(el, command === ACCOUNT_TEXT.SIGNOUT_COMMAND
+                ? ACCOUNT_TEXT.SIGNOUT_COPY_FAILED
+                : `Run ${command} in terminal`);
+        }
+    };
     root.addEventListener('click', (event) => {
         const target = event.target;
         if (!(target instanceof Element))
@@ -145,16 +159,15 @@ export function mountAccountControl(root) {
             event.stopPropagation();
             const command = copier.getAttribute('data-reticle-copy') ?? '';
             if (command.length > 0)
-                void navigator.clipboard?.writeText(command).catch(() => undefined);
-            flashCopied(copier);
+                void copyCommand(command, copier);
             return;
         }
         const signin = target.closest(`[${ACCOUNT_SIGNIN_ATTR}]`);
         if (signin instanceof HTMLElement) {
             event.preventDefault();
             event.stopPropagation();
-            void navigator.clipboard?.writeText(ACCOUNT_TEXT.SIGNIN_COMMAND).catch(() => undefined);
-            flashCopied(signin);
+            onSignIn?.();
+            void copyCommand(ACCOUNT_TEXT.SIGNIN_COMMAND, signin);
             return;
         }
         closeAll();

package/dist/presenter/presenter-chat-views.d.ts

@@ -0,0 +1,21 @@
+import { type AccountState, type HarnessConfig } from '@reticlehq/core';
+import type { AnnotationItem } from '../review/annotator.js';
+export type ChatView = 'activity' | 'flows' | 'annotations';
+export declare function platformBase(config: HarnessConfig | undefined, account: AccountState): string;
+export declare const CHAT_VIEWS_HTML = "\n  <div data-reticle-harness-spot class=\"reticle-harness-spot\" hidden></div>";
+export declare const FLOWS_PAGE_HTML: string;
+export declare const CHAT_VIEWS_NAV_HTML: string;
+export declare const ANNOTATIONS_HTML: string;
+export declare const CHAT_VIEWS_CSS: string;
+export declare class ChatViews {
+    #private;
+    constructor(onHarness: (enabled: boolean) => void, onImpact: () => void, onOpenChat: (view: ChatView) => void);
+    mount(root: HTMLElement): void;
+    teardown(): void;
+    open(view: ChatView): void;
+    closePage(): void;
+    paintAccount(account: AccountState | undefined): void;
+    paintHarness(config: HarnessConfig | undefined): void;
+    paintImpact(verdicts: number): void;
+    paintAnnotations(items: readonly AnnotationItem[]): void;
+}