@reticlehq/browser 3.5.0 → 3.7.0

package/dist/presenter/presenter-config.js

@@ -1,3 +1,4 @@
+import { ReticleStorageKey } from '../storage-keys.js';
 export const BorderMode = { SESSION: 'session', BUSY: 'busy' };
 export const DEFAULT_BORDER_MODE = BorderMode.SESSION;
 export const DATA_BUSY = 'data-busy';
@@ -24,6 +25,7 @@ export const ACT_STRIP = {
     STOPPED_PREFIX: 'stopped · ',
     NOW: 'now',
     SINCE_LAST: ' since last action',
+    harnessTesting: (steps) => `Testing · Harness · ${String(steps)} step${1 === steps ? '' : 's'}`,
 };
 export const IDLE_END_MS = 300_000;
 export const IDLE_END_MIN_MS = 5_000;
@@ -60,8 +62,8 @@ export const SETTINGS_BTN_ATTR = 'data-reticle-settings-btn';
 export const SETTINGS_PANEL_ATTR = 'data-reticle-settings-panel';
 export const SETTINGS_CLOSE_ATTR = 'data-reticle-settings-close';
 export const SETTING_KEY_ATTR = 'data-reticle-setting';
-export const SETTINGS_STORAGE_KEY = 'reticle-presenter-settings';
-export const MINIMISED_STORAGE_KEY = 'reticle-presenter-minimised';
+export const SETTINGS_STORAGE_KEY = ReticleStorageKey.PRESENTER_SETTINGS;
+export const MINIMISED_STORAGE_KEY = ReticleStorageKey.PRESENTER_MINIMISED;
 export const AMBIENT_GLOW_ATTR = 'data-reticle-ambient-glow';
 export const LIVENESS_ATTR = 'data-reticle-live';
 export const BLOCK_ATTR = 'data-reticle-block';
@@ -74,6 +76,6 @@ export const HUD_POS_X_VAR = '--reticle-hud-x';
 export const HUD_POS_Y_VAR = '--reticle-hud-y';
 export const HUD_DRAG_THRESHOLD_PX = 4;
 export const HUD_DOCK_MARGIN_PX = 8;
-export const HUD_DRAG_IGNORE_SEL = '[data-reticle-pause], [data-reticle-annotate-btn], [data-reticle-markers-btn], [data-reticle-clear-marks], [data-reticle-copy-marks], [data-reticle-end], [data-reticle-min-btn], [data-reticle-settings-btn], [data-reticle-settings-panel], [data-reticle-report-btn], [data-reticle-report-panel], [data-reticle-chat-panel], [data-reticle-chat-toggle], [data-reticle-workspace-btn], [data-reticle-workspace-menu], [data-reticle-copy], [data-reticle-export], input, textarea, select, a, .reticle-head-ctl, [data-reticle-tally], .reticle-maxhint';
+export const HUD_DRAG_IGNORE_SEL = '[data-reticle-pause], [data-reticle-annotate-btn], [data-reticle-markers-btn], [data-reticle-clear-marks], [data-reticle-copy-marks], [data-reticle-end], [data-reticle-min-btn], [data-reticle-settings-btn], [data-reticle-settings-panel], [data-reticle-report-btn], [data-reticle-report-panel], [data-reticle-chat-panel], [data-reticle-chat-toggle], [data-reticle-workspace-btn], [data-reticle-workspace-menu], [data-reticle-copy], [data-reticle-export], .reticle-toolbar-chrome button, .reticle-toolbar-actions button, input, textarea, select, a, .reticle-head-ctl, [data-reticle-tally], .reticle-maxhint';
 export const THROTTLED_ATTR = 'data-reticle-throttled';
 export const Z_HUD_TOOLTIP = 100;

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

@@ -1,11 +1,11 @@
 import { HumanControlKind, PresenterTone, SessionState } from '@reticlehq/core';
 export type { ControlIntent, ControlHandler } from './presenter-config.js';
 export declare const ENDED_FADE_MS = 4000;
+export declare function flowTitle(name: string): string;
 export declare const CONTROLS_CSS: string;
-export declare const CONTROLS_TOOLBAR_HTML: string;
+export declare const CONTROLS_STATUS_HTML: string;
 export declare const CONTROLS_BANNER_HTML = "<div data-reticle-banner class=\"reticle-banner\">Session ended</div>";
 export declare const CONTROLS_MARKS_HTML: string;
-export declare const CONTROLS_FLOWS_HTML = "<div data-reticle-flows class=\"reticle-flows\"><span class=\"reticle-flows-cap\">Replay a flow</span></div>";
 export declare const CONTROLS_FOOT_HTML: string;
 interface ControlPanelHost {
     emit: (kind: HumanControlKind, text?: string) => void;
@@ -21,6 +21,7 @@ export declare class ControlPanel {
     get state(): SessionState;
     mount(root: HTMLElement, glow: HTMLElement | undefined): void;
     teardown(): void;
+    setFlowProgress(args: Record<string, unknown>): void;
     setFlows(flows: unknown): void;
     refilterFlows(): void;
     setState(state: SessionState, text?: string, tone?: PresenterTone): void;

package/dist/presenter/presenter-controls.js

@@ -1,9 +1,11 @@
-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';
 const DATA_RETICLE_STATE = 'data-reticle-state';
 const DATA_RETICLE_TONE = 'data-reticle-tone';
 const DATA_ON = 'data-on';
@@ -18,25 +20,55 @@ const PAUSED_BADGE_TEXT = 'PAUSED';
 const ENDED_BANNER_TEXT = 'Session ended';
 const COPY_LABEL = 'Copy run';
 const EXPORT_LABEL = 'Export';
-const FLOWS_LABEL = 'Replay a flow';
+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 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);
+[data-reticle-chat-panel] [data-reticle-foot]{flex:none;padding:6px 10px 8px;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;flex-wrap:wrap;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);
   font:inherit;font-size:11px;font-weight:500;line-height:1.2;
   box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:background .15s,border-color .15s,color .15s;}
+[data-reticle-chat-panel] .reticle-workspace-k{color:var(--reticle-hud-text-faint);font-weight:400;}
 [data-reticle-chat-panel] .reticle-workspace:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#fff;}
 [data-reticle-chat-panel] .reticle-workspace[aria-expanded="true"]{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff;}
 [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{
@@ -51,7 +83,7 @@ export const CONTROLS_CSS = `
 [data-reticle-chat-panel] .reticle-workspace-menu-head{
   display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
 [data-reticle-chat-panel] .reticle-workspace-menu-title{
-  color:rgba(255,255,255,.42);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;}
+  color:rgba(255,255,255,.42);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;}
 [data-reticle-chat-panel] .reticle-workspace-copy{
   display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:none;border-radius:6px;
   background:rgba(255,255,255,.06);color:rgba(255,255,255,.7);cursor:pointer;line-height:0;transition:background .12s,color .12s;}
@@ -65,9 +97,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 +119,19 @@ 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;}
+/* 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-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 +160,12 @@ 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_FOOT_HTML = `<div data-reticle-foot><div class="reticle-foot-stack">${CHAT_VIEWS_HTML}<div class="reticle-foot-workspace-row">${workspaceRowHtml()}</div></div></div>`;
 function queryControlRefs(root) {
     return {
         pauseBtn: root.querySelector('[data-reticle-pause]') ?? undefined,
@@ -159,7 +174,7 @@ function queryControlRefs(root) {
         copyBtn: root.querySelector('[data-reticle-copy]') ?? undefined,
         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 {
@@ -170,13 +185,15 @@ export class ControlPanel {
         copyBtn: undefined,
         exportBtn: undefined,
         exportMsg: undefined,
-        flows: undefined,
+        allFlows: undefined,
     };
     #state = SessionState.ACTIVE;
     #fadeTimer;
     #root;
     #glow;
     #flowItems = [];
+    #progress;
+    #progressTimer;
     #workspaceTeardown;
     #listeners;
     #host;
@@ -198,18 +215,23 @@ 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.#host.emit(HumanControlKind.REPLAY, name);
             }
-        }, { signal });
+        };
+        this.#refs.allFlows?.addEventListener('click', onReplay, { 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 +286,50 @@ 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 progress = this.#progress;
+        {
+            for (const btn of this.#refs.allFlows?.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 +342,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;
         })
@@ -287,22 +358,53 @@ export class ControlPanel {
         this.#renderFlows();
     }
     #renderFlows() {
-        const el = this.#refs.flows;
-        if (el === undefined)
+        const all = this.#refs.allFlows;
+        if (all === undefined)
             return;
-        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 doc = all.ownerDocument;
+        const testids = new Set(Array.from(doc.querySelectorAll(testIdSelector())).map((n) => readTestId(n)));
+        const playable = (f) => f.start === undefined || testids.has(f.start);
+        all.replaceChildren();
+        const addRow = (container, flow, enabled) => {
             const btn = doc.createElement('button');
             btn.type = 'button';
-            btn.className = 'reticle-flow';
+            btn.className = 'reticle-flow-row';
             btn.setAttribute('data-reticle-replay', flow.name);
-            btn.textContent = `▶ ${flow.name}`;
-            el.appendChild(btn);
+            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);
+        };
+        {
+            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 +422,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:11px;
+  --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 Harness credits to start.";
+    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;