@reticlehq/browser 3.5.0 → 3.6.0

package/dist/presenter/presenter-controls.js

@@ -1,9 +1,12 @@
-import { HumanControlKind, PresenterTone, SessionState } from '@reticlehq/core';
+import { readTestId, testIdSelector } from '../dom/addressing/testid-attr.js';
+import { FlowProgressStatus, HumanControlKind, PresenterTone, SessionState, } from '@reticlehq/core';
 import { nativeSetTimeout, nativeClearTimeout } from '../timers/native/native-timers.js';
-import { CHAT_TOGGLE_ATTR, CLEAR_MARKS_ATTR, COPY_MARKS_ATTR, MARKERS_BTN_ATTR, MARKS_ROW_ATTR, } from './presenter-config.js';
-import { PresenterIcon, PRESENTER_ICON_SIZE, hiIcon, hiIconHtml, hiToggleIconHtml, } from './icons/presenter-icons.js';
+import { COPY_MARKS_ATTR, MARKS_ROW_ATTR } from './presenter-config.js';
+import { PresenterIcon, PRESENTER_ICON_SIZE, hiIcon, hiIconHtml } from './icons/presenter-icons.js';
 import { getPresenterSettings } from './presenter-settings.js';
 import { mountWorkspaceSelector, workspaceRowHtml } from './presenter-workspace.js';
+import { CHAT_VIEWS_HTML } from './presenter-chat-views.js';
+import { ReticleStorageKey } from '../storage-keys.js';
 const DATA_RETICLE_STATE = 'data-reticle-state';
 const DATA_RETICLE_TONE = 'data-reticle-tone';
 const DATA_ON = 'data-on';
@@ -19,14 +22,43 @@ const ENDED_BANNER_TEXT = 'Session ended';
 const COPY_LABEL = 'Copy run';
 const EXPORT_LABEL = 'Export';
 const FLOWS_LABEL = 'Replay a flow';
+const FLOWS_ALL_LABEL = 'See all';
+const SEE_LOGS_LABEL = 'See the logs';
+const PROGRESS_LINGER_MS = 6000;
+const PROGRESS_GLYPH = {
+    [FlowProgressStatus.PLAYING]: '⏵',
+    [FlowProgressStatus.PASSED]: '✓',
+    [FlowProgressStatus.FAILED]: '✗',
+};
+function parseFlowProgress(args) {
+    const { name, done, total, status } = args;
+    if ('string' !== typeof name || 'number' !== typeof done || 'number' !== typeof total)
+        return undefined;
+    if (!Object.values(FlowProgressStatus).includes(status))
+        return undefined;
+    return { name, done, total, status: status };
+}
 const COPIED_TEXT = 'Copied ✓';
 const RUN_FILENAME = 'reticle-run.json';
 export const ENDED_FADE_MS = 4000;
+const RECENT_PLAYS_KEY = ReticleStorageKey.RECENT_PLAYS;
+const FLOW_TEXT = {
+    REPLAYABLE: 'Replay without an agent',
+    ELSEWHERE: 'Starts on another page',
+    EMPTY_TITLE: 'No saved flows yet',
+    EMPTY_HINT: 'Every journey your agent verifies is saved here, ready to replay in one click.',
+};
+export function flowTitle(name) {
+    const words = name.replace(/[-_]+/g, ' ').trim();
+    return 0 === words.length ? name : words.charAt(0).toUpperCase() + words.slice(1);
+}
 export const CONTROLS_CSS = `
 [data-reticle-chat-panel] [data-reticle-foot]{flex:none;padding:8px 10px 10px;border-top:1px solid rgba(255,255,255,.07);
   background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.55) 100%);pointer-events:auto;}
+[data-reticle-chat-panel] .reticle-foot-workspace-row{display:flex;align-items:center;min-width:0;}
 [data-reticle-chat-panel] .reticle-hud-log-well{margin:0 0 4px;}
 [data-reticle-chat-panel] .reticle-workspace-wrap{position:relative;align-self:flex-start;max-width:100%;}
+[data-reticle-chat-panel] .reticle-workspace-wrap[hidden]{display:none;}
 [data-reticle-chat-panel] .reticle-workspace{
   display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:3px 8px 3px 6px;border-radius:999px;cursor:pointer;
   border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:rgba(255,255,255,.78);
@@ -37,6 +69,10 @@ export const CONTROLS_CSS = `
 [data-reticle-chat-panel] .reticle-workspace-icon,
 [data-reticle-chat-panel] .reticle-workspace-caret{display:inline-flex;align-items:center;opacity:.72;flex:none;}
 [data-reticle-chat-panel] .reticle-workspace-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(200px,calc(100vw - 120px));}
+@media (max-width:480px){
+  [data-reticle-chat-panel] .reticle-workspace-wrap{flex:none;}
+  [data-reticle-chat-panel] .reticle-workspace-name{max-width:88px;}
+}
 [data-reticle-chat-panel] .reticle-workspace[aria-expanded="true"] .reticle-workspace-caret{transform:rotate(180deg);}
 [data-reticle-chat-panel] .reticle-workspace-caret{transition:transform .18s ease;}
 [data-reticle-chat-panel] .reticle-workspace-menu{
@@ -65,9 +101,9 @@ export const CONTROLS_CSS = `
 [data-reticle-chat-panel] .reticle-workspace-menu-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:4px 0;}
 [data-reticle-chat-panel] .reticle-workspace-menu-k{flex:none;color:rgba(255,255,255,.42);}
 [data-reticle-chat-panel] .reticle-workspace-menu-v{min-width:0;text-align:right;color:rgba(255,255,255,.9);font-weight:500;word-break:break-all;}
-[data-reticle-chat-panel] .reticle-banner{display:none;flex:none;align-items:center;gap:8px;padding:10px 14px;color:var(--reticle-fg);
-  font-size:12px;font-weight:500;border-bottom:1px solid var(--reticle-line2);background:var(--reticle-surface);}
-[data-reticle-overlay][data-reticle-state="ended"] [data-reticle-chat-panel] .reticle-banner{display:block;}
+[data-reticle-chat-panel] .reticle-banner{display:none;flex:none;align-items:center;gap:8px;min-height:38px;box-sizing:border-box;padding:8px 14px;
+  color:var(--reticle-hud-text);font-size:12px;font-weight:600;border-bottom:1px solid var(--reticle-hud-border);background:var(--reticle-hud-inset);line-height:1.35;}
+[data-reticle-overlay][data-reticle-state="ended"] [data-reticle-chat-panel] .reticle-banner{display:flex;}
 [data-reticle-overlay][data-reticle-state="paused"] [data-reticle-glow][data-on="1"]{
   box-shadow:inset 0 0 0 2px rgba(255,255,255,.2);}
 [data-reticle-overlay][data-reticle-state="ended"] [data-reticle-glow][data-on="1"]{
@@ -87,13 +123,30 @@ export const CONTROLS_CSS = `
 [data-reticle-overlay][data-reticle-tone="ask"] [data-reticle-glow][data-on="1"],
 [data-reticle-overlay][data-reticle-tone="warn"] [data-reticle-glow][data-on="1"]{
   box-shadow:inset 0 0 0 2px rgba(255,255,255,.22);}
-[data-reticle-chat-panel] .reticle-flows{display:none;flex:none;flex-wrap:wrap;align-content:flex-start;gap:6px;
-  padding:9px 12px;border-top:1px solid var(--reticle-line2);max-height:88px;overflow-y:auto;overscroll-behavior:contain;
-  pointer-events:auto;touch-action:pan-y;}
-[data-reticle-chat-panel] .reticle-flows[data-has="1"]{display:flex;}
-[data-reticle-chat-panel] .reticle-flows::-webkit-scrollbar{width:9px;}
-[data-reticle-chat-panel] .reticle-flows::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:9px;border:2px solid transparent;background-clip:content-box;}
-[data-reticle-chat-panel] .reticle-flows-cap{flex:0 0 100%;margin-bottom:1px;color:var(--reticle-faint);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;}
+[data-reticle-chat-panel] .reticle-flows{display:none;flex:none;min-width:0;padding:8px 12px;border-top:1px solid var(--reticle-line2);pointer-events:auto;}
+[data-reticle-chat-panel] .reticle-flows[data-has="1"]{display:block;}
+[data-reticle-chat-panel] .reticle-flows-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:5px;}
+[data-reticle-chat-panel] .reticle-flows-all{border:0;padding:0;background:none;cursor:pointer;color:var(--reticle-c-active);font:inherit;font-size:10.5px;font-weight:500;}
+[data-reticle-chat-panel] .reticle-flows-all:hover{text-decoration:underline;}
+[data-reticle-chat-panel] .reticle-flows-links{display:inline-flex;gap:10px;}
+[data-reticle-chat-panel] .reticle-flows-all[hidden]{display:none;}
+/* A replay the person started: the chip becomes a player, its bar filling step by step. */
+[data-reticle-chat-panel] :is(.reticle-flow,.reticle-flow-row)[data-state]{position:relative;overflow:hidden;
+  border-color:color-mix(in srgb,var(--reticle-c-active) 55%,transparent);color:var(--reticle-fg);}
+[data-reticle-chat-panel] :is(.reticle-flow,.reticle-flow-row)[data-state]::after{content:"";position:absolute;left:0;bottom:0;height:2px;
+  width:var(--reticle-flow-progress,4%);background:var(--reticle-c-active);transition:width .25s var(--reticle-hud-ease,ease);}
+[data-reticle-chat-panel] :is(.reticle-flow,.reticle-flow-row)[data-state="playing"]::after{animation:reticle-flow-pulse 1.2s ease-in-out infinite;}
+@keyframes reticle-flow-pulse{50%{opacity:.55}}
+[data-reticle-chat-panel] :is(.reticle-flow,.reticle-flow-row)[data-state="passed"]::after{background:#4ade80;}
+[data-reticle-chat-panel] :is(.reticle-flow,.reticle-flow-row)[data-state="failed"]::after{background:#f87171;}
+[data-reticle-chat-panel] .reticle-flows-cap{display:block;color:var(--reticle-faint);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;}
+[data-reticle-chat-panel] .reticle-flow-strip{display:flex;gap:6px;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-inline:contain;pointer-events:auto;}
+[data-reticle-chat-panel] .reticle-flow-strip::-webkit-scrollbar{display:none;}
+[data-reticle-chat-panel] .reticle-flow-strip .reticle-flow{flex:none;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+[data-reticle-chat-panel] .reticle-all-flows{flex:1;min-height:0;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;align-items:stretch;gap:5px;}
+[data-reticle-chat-panel] .reticle-all-flows .reticle-flow{width:100%;height:auto;min-height:32px;text-align:left;justify-content:flex-start;}
+[data-reticle-chat-panel] .reticle-all-flows .reticle-flow:disabled{opacity:.45;cursor:not-allowed;}
+[data-reticle-chat-panel] .reticle-flows-empty{padding:25px 8px;color:var(--reticle-faint);font-size:11px;text-align:center;}
 [data-reticle-chat-panel] .reticle-flow{pointer-events:auto;cursor:pointer;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;
   border-radius:7px;border:1px solid var(--reticle-line);background:rgba(255,255,255,.04);color:var(--reticle-muted);
   font-family:var(--reticle-font);font-size:11px;font-weight:500;transition:background .15s,color .15s,border-color .15s,transform .1s;}
@@ -122,35 +175,13 @@ function paintPauseBtn(btn, paused) {
     btn.classList.toggle('reticle-tb-btn--primary', paused);
     btn.setAttribute('data-active', paused ? '1' : '0');
 }
-const CHAT_LABEL = 'Agent chat';
-const MARKERS_LABEL = 'Hide markers';
-const CLEAR_MARKS_LABEL = 'Clear all';
 const COPY_MARKS_LABEL = 'Copy for your agent';
 const TB = PRESENTER_ICON_SIZE.TOOLBAR;
-function tbWrap(btn, tip, kbd) {
-    const shortcut = kbd === undefined ? '' : `<span class="reticle-tb-kbd">${kbd}</span>`;
-    return `<div class="reticle-tb-wrap">${btn}<span class="reticle-tb-tip">${tip}${shortcut}</span></div>`;
-}
-function pauseToolbarHtml() {
-    const btn = `<button type="button" data-reticle-pause class="reticle-tb-btn" title="${CONTROL_LABEL.PAUSE}" aria-label="${CONTROL_LABEL.PAUSE}">${hiIconHtml(PresenterIcon.PAUSE, TB)}</button>`;
-    const badge = `<span data-reticle-badge class="reticle-pause-badge">${PAUSED_BADGE_TEXT}</span>`;
-    const tip = `<span class="reticle-tb-tip">${CONTROL_LABEL.PAUSE}</span>`;
-    return `<div class="reticle-tb-wrap reticle-tb-wrap--pause">${btn}${badge}${tip}</div>`;
-}
-export const CONTROLS_TOOLBAR_HTML = [
-    pauseToolbarHtml(),
-    tbWrap(`<button type="button" ${CHAT_TOGGLE_ATTR} class="reticle-tb-btn reticle-tb-btn--toggle" title="${CHAT_LABEL}" aria-label="${CHAT_LABEL}" aria-pressed="false" data-active="0">${hiToggleIconHtml(PresenterIcon.MESSAGE, TB)}</button>`, CHAT_LABEL),
-    tbWrap(`<button type="button" ${MARKERS_BTN_ATTR} class="reticle-tb-btn reticle-tb-btn--toggle" title="${MARKERS_LABEL}" aria-label="${MARKERS_LABEL}" aria-pressed="false" data-active="0" disabled>${hiToggleIconHtml(PresenterIcon.VIEW, TB)}</button>`, MARKERS_LABEL, 'H'),
-    tbWrap(`<button type="button" data-reticle-end class="reticle-tb-btn" title="${CONTROL_LABEL.END}" aria-label="${CONTROL_LABEL.END}">${hiIconHtml(PresenterIcon.STOP, TB)}</button>`, CONTROL_LABEL.END),
-    tbWrap(`<button type="button" ${CLEAR_MARKS_ATTR} class="reticle-tb-btn" title="${CLEAR_MARKS_LABEL}" aria-label="${CLEAR_MARKS_LABEL}" data-danger disabled>${hiIconHtml(PresenterIcon.TRASH, TB)}</button>`, CLEAR_MARKS_LABEL, 'X'),
-    `<button type="button" data-reticle-copy class="reticle-tb-btn reticle-tb-btn--export" title="${COPY_LABEL}" aria-label="${COPY_LABEL}" hidden>${hiIconHtml(PresenterIcon.COPY, TB)}</button>`,
-    `<button type="button" data-reticle-export class="reticle-tb-btn reticle-tb-btn--export" title="${EXPORT_LABEL}" aria-label="${EXPORT_LABEL}" hidden>${hiIconHtml(PresenterIcon.DOWNLOAD, TB)}</button>`,
-    '<span data-reticle-export-msg class="reticle-export-msg" aria-live="polite"></span>',
-].join('');
+export const CONTROLS_STATUS_HTML = `<button type="button" data-reticle-pause class="reticle-status-btn" title="${CONTROL_LABEL.PAUSE}" aria-label="${CONTROL_LABEL.PAUSE}">${hiIconHtml(PresenterIcon.PAUSE, TB)}</button><span data-reticle-badge class="reticle-pause-badge">${PAUSED_BADGE_TEXT}</span><button type="button" data-reticle-end class="reticle-status-btn reticle-status-stop" title="${CONTROL_LABEL.END}" aria-label="${CONTROL_LABEL.END}">${hiIconHtml(PresenterIcon.STOP, TB)}</button><button type="button" data-reticle-copy class="reticle-status-btn" title="${COPY_LABEL}" aria-label="${COPY_LABEL}" hidden>${hiIconHtml(PresenterIcon.COPY, TB)}</button><button type="button" data-reticle-export class="reticle-status-btn" title="${EXPORT_LABEL}" aria-label="${EXPORT_LABEL}" hidden>${hiIconHtml(PresenterIcon.DOWNLOAD, TB)}</button><span data-reticle-export-msg class="reticle-export-msg" aria-live="polite"></span>`;
 export const CONTROLS_BANNER_HTML = `<div data-reticle-banner class="reticle-banner">${ENDED_BANNER_TEXT}</div>`;
 export const CONTROLS_MARKS_HTML = `<div ${MARKS_ROW_ATTR} class="reticle-marks-row" hidden><span data-reticle-marks-text class="reticle-marks-text"></span><button type="button" ${COPY_MARKS_ATTR} class="reticle-marks-copy" title="${COPY_MARKS_LABEL}">${hiIconHtml(PresenterIcon.COPY, PRESENTER_ICON_SIZE.HELP)}<span>${COPY_MARKS_LABEL}</span></button></div>`;
-export const CONTROLS_FLOWS_HTML = `<div data-reticle-flows class="reticle-flows"><span class="reticle-flows-cap">${FLOWS_LABEL}</span></div>`;
-export const CONTROLS_FOOT_HTML = `<div data-reticle-foot><div class="reticle-foot-stack">${workspaceRowHtml()}</div></div>`;
+export const CONTROLS_FLOWS_HTML = `<div data-reticle-flows class="reticle-flows"><div class="reticle-flows-head"><span class="reticle-flows-cap">${FLOWS_LABEL}</span><span class="reticle-flows-links"><button type="button" data-reticle-see-logs class="reticle-flows-all" hidden>${SEE_LOGS_LABEL} →</button><button type="button" data-reticle-flows-all class="reticle-flows-all">${FLOWS_ALL_LABEL} →</button></span></div><div data-reticle-flow-strip class="reticle-flow-strip"></div></div>`;
+export const CONTROLS_FOOT_HTML = `<div data-reticle-foot><div class="reticle-foot-stack"><div class="reticle-foot-workspace-row">${workspaceRowHtml()}${CHAT_VIEWS_HTML}</div></div></div>`;
 function queryControlRefs(root) {
     return {
         pauseBtn: root.querySelector('[data-reticle-pause]') ?? undefined,
@@ -160,9 +191,21 @@ function queryControlRefs(root) {
         exportBtn: root.querySelector('[data-reticle-export]') ?? undefined,
         exportMsg: root.querySelector('[data-reticle-export-msg]') ?? undefined,
         flows: root.querySelector('[data-reticle-flows]') ?? undefined,
+        allFlows: root.querySelector('[data-reticle-all-flows]') ?? undefined,
     };
 }
 export class ControlPanel {
+    #recentPlays = (() => {
+        try {
+            const raw = JSON.parse(localStorage.getItem(RECENT_PLAYS_KEY) ?? '{}');
+            return 'object' === typeof raw && raw !== null && !Array.isArray(raw)
+                ? raw
+                : {};
+        }
+        catch {
+            return {};
+        }
+    })();
     #refs = {
         pauseBtn: undefined,
         endBtn: undefined,
@@ -171,12 +214,15 @@ export class ControlPanel {
         exportBtn: undefined,
         exportMsg: undefined,
         flows: undefined,
+        allFlows: undefined,
     };
     #state = SessionState.ACTIVE;
     #fadeTimer;
     #root;
     #glow;
     #flowItems = [];
+    #progress;
+    #progressTimer;
     #workspaceTeardown;
     #listeners;
     #host;
@@ -198,18 +244,44 @@ export class ControlPanel {
         }
         this.#refs.pauseBtn?.addEventListener('click', () => this.#onPauseToggle(), { signal });
         this.#refs.endBtn?.addEventListener('click', () => this.#onEnd(), { signal });
-        this.#refs.flows?.addEventListener('click', (e) => {
+        const onReplay = (e) => {
             const target = e.target;
             if (!(target instanceof HTMLElement))
                 return;
-            const name = target.closest('[data-reticle-replay]')?.getAttribute('data-reticle-replay');
-            if (name !== null && name !== undefined && name.length > 0) {
+            const button = target.closest('[data-reticle-replay]');
+            if (null === button || button.disabled)
+                return;
+            const name = button.getAttribute('data-reticle-replay');
+            if (name !== null && name.length > 0) {
+                this.#recentPlays[name] = Date.now();
+                try {
+                    localStorage.setItem(RECENT_PLAYS_KEY, JSON.stringify(this.#recentPlays));
+                }
+                catch {
+                }
+                this.#renderFlows();
                 this.#host.emit(HumanControlKind.REPLAY, name);
             }
-        }, { signal });
+        };
+        for (const container of [this.#refs.flows, this.#refs.allFlows])
+            container?.addEventListener('click', onReplay, { signal });
+        this.#refs.flows?.querySelector('[data-reticle-flow-strip]')?.addEventListener('wheel', (e) => {
+            const strip = e.currentTarget;
+            if (0 !== e.deltaX || strip.scrollWidth <= strip.clientWidth)
+                return;
+            strip.scrollLeft += e.deltaY;
+            e.preventDefault();
+        }, { signal, passive: false });
+        this.#refs.flows
+            ?.querySelector('[data-reticle-see-logs]')
+            ?.addEventListener('click', () => root.querySelector('[data-reticle-chat-view-btn="activity"]')?.click(), { signal });
+        this.#refs.flows
+            ?.querySelector('[data-reticle-flows-all]')
+            ?.addEventListener('click', () => root.querySelector('[data-reticle-chat-view-btn="flows"]')?.click(), { signal });
         this.#refs.copyBtn?.addEventListener('click', () => this.#onCopy(), { signal });
         this.#refs.exportBtn?.addEventListener('click', () => this.#onExport(), { signal });
         this.#workspaceTeardown = mountWorkspaceSelector(root);
+        this.#renderFlows();
         this.setState(SessionState.ACTIVE);
     }
     #runJson() {
@@ -264,6 +336,56 @@ export class ControlPanel {
         this.#host.emit(HumanControlKind.END);
         this.setState(SessionState.ENDED);
     }
+    setFlowProgress(args) {
+        const progress = parseFlowProgress(args);
+        if (progress === undefined)
+            return;
+        this.#progress = progress;
+        if (this.#progressTimer !== undefined)
+            nativeClearTimeout(this.#progressTimer);
+        this.#progressTimer =
+            FlowProgressStatus.PLAYING === progress.status
+                ? undefined
+                : nativeSetTimeout(() => {
+                    this.#progress = undefined;
+                    this.#paintProgress();
+                }, PROGRESS_LINGER_MS);
+        this.#paintProgress();
+    }
+    #paintProgress() {
+        const root = this.#refs.flows?.ownerDocument;
+        if (root === undefined)
+            return;
+        const progress = this.#progress;
+        const seeLogs = this.#refs.flows?.querySelector('[data-reticle-see-logs]');
+        if (seeLogs !== null && seeLogs !== undefined)
+            seeLogs.hidden = progress === undefined;
+        for (const container of [this.#refs.flows, this.#refs.allFlows]) {
+            for (const btn of container?.querySelectorAll('[data-reticle-replay]') ?? []) {
+                const name = btn.getAttribute('data-reticle-replay') ?? '';
+                const mine = progress !== undefined && progress.name === name;
+                if (!mine) {
+                    btn.removeAttribute('data-state');
+                    btn.style.removeProperty('--reticle-flow-progress');
+                    if (btn.classList.contains('reticle-flow'))
+                        btn.textContent = `▶ ${name}`;
+                    continue;
+                }
+                const share = 0 < progress.total ? Math.round((100 * progress.done) / progress.total) : 4;
+                btn.setAttribute('data-state', progress.status);
+                btn.style.setProperty('--reticle-flow-progress', `${String(Math.max(4, share))}%`);
+                const glyph = PROGRESS_GLYPH[progress.status];
+                if (btn.classList.contains('reticle-flow'))
+                    btn.textContent = `${glyph} ${name}`;
+                const play = btn.querySelector('.reticle-flow-play');
+                if (play !== null)
+                    play.textContent = glyph;
+                const meta = btn.querySelector('.reticle-flow-meta');
+                if (meta !== null && 0 < progress.total)
+                    meta.textContent = `Step ${String(progress.done)} of ${String(progress.total)}`;
+            }
+        }
+    }
     setFlows(flows) {
         const list = Array.isArray(flows) ? flows : [];
         this.#flowItems = list
@@ -276,7 +398,12 @@ export class ControlPanel {
                 if (typeof name !== 'string' || 0 === name.length)
                     return null;
                 const start = rec['start'];
-                return 'string' === typeof start && start.length > 0 ? { name, start } : { name };
+                const createdAt = rec['createdAt'];
+                return {
+                    name,
+                    ...('string' === typeof start && start.length > 0 ? { start } : {}),
+                    ...('number' === typeof createdAt && Number.isFinite(createdAt) ? { createdAt } : {}),
+                };
             }
             return null;
         })
@@ -290,19 +417,72 @@ export class ControlPanel {
         const el = this.#refs.flows;
         if (el === undefined)
             return;
+        const all = this.#refs.allFlows;
         const doc = el.ownerDocument;
-        const testids = new Set(Array.from(doc.querySelectorAll('[data-testid]')).map((n) => n.getAttribute('data-testid')));
-        const visible = this.#flowItems.filter((f) => f.start === undefined || testids.has(f.start));
-        el.querySelectorAll('[data-reticle-replay]').forEach((b) => b.remove());
-        for (const flow of visible) {
+        const testids = new Set(Array.from(doc.querySelectorAll(testIdSelector())).map((n) => readTestId(n)));
+        const playable = (f) => f.start === undefined || testids.has(f.start);
+        const recent = [...this.#flowItems]
+            .filter(playable)
+            .sort((a, b) => (this.#recentPlays[b.name] ?? b.createdAt ?? 0) -
+            (this.#recentPlays[a.name] ?? a.createdAt ?? 0));
+        const strip = el.querySelector('[data-reticle-flow-strip]');
+        strip?.replaceChildren();
+        all?.replaceChildren();
+        const addButton = (container, flow, enabled) => {
             const btn = doc.createElement('button');
             btn.type = 'button';
             btn.className = 'reticle-flow';
             btn.setAttribute('data-reticle-replay', flow.name);
             btn.textContent = `▶ ${flow.name}`;
-            el.appendChild(btn);
+            btn.disabled = !enabled;
+            if (!enabled)
+                btn.title = 'Open the page where this flow starts to replay it';
+            container.appendChild(btn);
+        };
+        const addRow = (container, flow, enabled) => {
+            const btn = doc.createElement('button');
+            btn.type = 'button';
+            btn.className = 'reticle-flow-row';
+            btn.setAttribute('data-reticle-replay', flow.name);
+            btn.title = flow.name;
+            btn.disabled = !enabled;
+            const play = doc.createElement('span');
+            play.className = 'reticle-flow-play';
+            play.setAttribute('aria-hidden', 'true');
+            play.textContent = '▶';
+            const text = doc.createElement('span');
+            text.className = 'reticle-flow-text';
+            const name = doc.createElement('span');
+            name.className = 'reticle-flow-name';
+            name.textContent = flowTitle(flow.name);
+            const meta = doc.createElement('span');
+            meta.className = 'reticle-flow-meta';
+            meta.textContent = enabled ? FLOW_TEXT.REPLAYABLE : FLOW_TEXT.ELSEWHERE;
+            text.append(name, meta);
+            btn.append(play, text);
+            container.appendChild(btn);
+        };
+        for (const flow of recent.slice(0, 3))
+            if (strip !== null)
+                addButton(strip, flow, true);
+        el.setAttribute('data-has', recent.length > 0 ? '1' : '0');
+        if (all !== undefined) {
+            if (0 === this.#flowItems.length) {
+                const empty = doc.createElement('div');
+                empty.className = 'reticle-flows-empty';
+                const title = doc.createElement('strong');
+                title.textContent = FLOW_TEXT.EMPTY_TITLE;
+                const hint = doc.createElement('span');
+                hint.textContent = FLOW_TEXT.EMPTY_HINT;
+                empty.append(title, hint);
+                all.appendChild(empty);
+            }
+            else {
+                for (const flow of [...this.#flowItems].sort((a, b) => (b.createdAt ?? 0) - (a.createdAt ?? 0)))
+                    addRow(all, flow, playable(flow));
+            }
         }
-        el.setAttribute('data-has', visible.length > 0 ? '1' : '0');
+        this.#paintProgress();
     }
     setState(state, text, tone) {
         this.#state = state;
@@ -320,10 +500,10 @@ export class ControlPanel {
         const ended = state === SessionState.ENDED;
         if (refs.pauseBtn !== undefined) {
             paintPauseBtn(refs.pauseBtn, state === SessionState.PAUSED);
-            refs.pauseBtn.disabled = ended;
+            refs.pauseBtn.hidden = ended;
         }
         if (refs.endBtn !== undefined)
-            refs.endBtn.disabled = ended;
+            refs.endBtn.hidden = ended;
         if (refs.copyBtn !== undefined) {
             if (ended)
                 refs.copyBtn.removeAttribute('hidden');

package/dist/presenter/presenter-design-tokens.d.ts

@@ -0,0 +1 @@
+export declare const PRESENTER_DESIGN_TOKENS_CSS: string;

package/dist/presenter/presenter-design-tokens.js

@@ -0,0 +1,34 @@
+export const PRESENTER_DESIGN_TOKENS_CSS = `
+[data-reticle-overlay]{
+  --reticle-hud-space-0:0px;
+  --reticle-hud-space-1:4px;
+  --reticle-hud-space-2:8px;
+  --reticle-hud-space-3:12px;
+  --reticle-hud-space-4:16px;
+  --reticle-hud-radius-sm:6px;
+  --reticle-hud-radius-md:10px;
+  --reticle-hud-radius-lg:14px;
+  --reticle-hud-radius-pill:9999px;
+  --reticle-hud-size-xs:10px;
+  --reticle-hud-size-sm:12px;
+  --reticle-hud-size-base:13px;
+  --reticle-hud-icon-size:18px;
+  --reticle-hud-control-size:36px;
+  --reticle-hud-control-gap:4px;
+  /* Compact: the HUD sits over the user's own app. 400×560 covered too much of it. */
+  --reticle-hud-dock-width:320px;
+  --reticle-hud-panel-height:440px;
+  --reticle-hud-ground:#0b0b0c;
+  --reticle-hud-surface:#151417;
+  --reticle-hud-inset:#232227;
+  --reticle-hud-hover:#1e1d22;
+  --reticle-hud-border:#29282d;
+  --reticle-hud-border-strong:#3a3941;
+  --reticle-hud-text:#f5f3ef;
+  --reticle-hud-text-muted:#a6a29a;
+  --reticle-hud-text-faint:#8b867d;
+  --reticle-hud-brand:#f0872e;
+  --reticle-hud-brand-soft:#2a1b0d;
+  --reticle-hud-ease:cubic-bezier(.4,0,.2,1);
+}
+`;

package/dist/presenter/presenter-dock-layout.js

@@ -5,7 +5,7 @@ const DOCK_PANEL_GAP_PX = 8;
 const DOCK_SETTINGS_GAP_PX = 12;
 const HUD_BAR_HEIGHT_PX = 44;
 const CHAT_MIN_HEIGHT_PX = 160;
-const CHAT_DEFAULT_MAX_HEIGHT_PX = 420;
+const CHAT_DEFAULT_MAX_HEIGHT_PX = 440;
 const SETTINGS_DEFAULT_MAX_HEIGHT_PX = 520;
 const SETTINGS_MIN_HEIGHT_PX = 200;
 function unionRects(rects) {

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

@@ -0,0 +1,12 @@
+import type { AccountState } from '@reticlehq/core';
+export declare const RAIL_ATTR = "data-reticle-rail";
+export declare const RAIL_SIGNIN_ATTR = "data-reticle-rail-signin";
+export declare const RAIL_PROMO_ATTR = "data-reticle-rail-promo";
+export declare const RAIL_TEXT: {
+    readonly TITLE: "Sign in to try Reticle Harness";
+    readonly DETAIL: "Free credits every month for autonomous end-to-end checks";
+    readonly CTA: "Sign in";
+};
+export declare const RAIL_HTML: string;
+export declare function paintRail(root: HTMLElement, account: AccountState | undefined): void;
+export declare const FRAME_CSS: string;