@reticlehq/browser 3.6.0 → 3.7.0

package/dist/presenter/presenter-chat-views.js

@@ -1,15 +1,24 @@
-import { DEFAULT_PLATFORM_URL } from '@reticlehq/core';
+import { DEFAULT_PLATFORM_URL, } from '@reticlehq/core';
+import { PLAN_HTML } from './presenter-plan.js';
 import { marksForAgent } from '../review/marks-for-agent.js';
 import { ANNOTATE_BTN_ATTR, CHAT_TOGGLE_ATTR, CLEAR_MARKS_ATTR, MARKERS_BTN_ATTR, } from './presenter-config.js';
 import { hiIconHtml, hiToggleIconHtml, PRESENTER_ICON_SIZE, PresenterIcon, } from './icons/presenter-icons.js';
 import { HUD_GLASS_PAINT } from './chrome/presenter-hud-chrome.js';
-import { creditsLeft } from './presenter-settings.js';
+import { LAST_ACTOR_ATTR, LOG_ACTOR } from './chrome/presenter-log.js';
+import { HARNESS_COPY_PROMPT_ATTR, HARNESS_LINK_ATTR, HARNESS_LOG_ATTR, HARNESS_OPEN_ATTR, HARNESS_ROW_TEXT, HARNESS_SWITCH_ON_ATTR, HARNESS_TOGGLE_ATTR, creditsShort, harnessFootHtml, harnessRowHtml, HARNESS_ROW_CSS, } from './presenter-harness-row.js';
 import { esc, isSafeDashboardUrl } from './chrome/presenter-safe-html.js';
-import { ReticleStorageKey } from '../storage-keys.js';
+import { morphHtml } from './chrome/presenter-morph.js';
+import { IMPACT_SEEN_KEY_PREFIX, ReticleStorageKey } from '../storage-keys.js';
+import { DEFAULT_PERSONA, PERSONA_PICK_ID, knownPick, personaText, readPick, savePick, } from './presenter-personas.js';
+import { AGENT_LINK_CSS, AGENT_LINK_HTML, AgentLinkView } from './presenter-agent-link.js';
+import { ACCOUNT_SIGNIN_ATTR, TEAM_SAVE_ATTR, TEAM_SLOT_ATTR } from './presenter-account.js';
+const PAGE_VIEWS = ['flows', 'annotations', 'harness'];
 const HISTORY_KEY = ReticleStorageKey.ANNOTATION_HISTORY;
 const HISTORY_LIMIT = 200;
-const HARNESS_SETUP_PATH = '/settings?group=project#model';
+const HARNESS_SETUP_PATH = '/settings?group=project';
+const HARNESS_SETUP_HASH = '#model';
 const HARNESS_PLAN_PATH = '/settings?group=billing';
+const HARNESS_STARTING_MS = 20_000;
 export function platformBase(config, account) {
     const base = [config?.platformUrl, account.host].find((url) => url !== undefined && isSafeDashboardUrl(url));
     return esc((base ?? DEFAULT_PLATFORM_URL).replace(/\/+$/, ''));
@@ -37,6 +46,21 @@ function readHistory() {
         return [];
     }
 }
+function readImpactSeen(projectId) {
+    try {
+        return Number(localStorage.getItem(`${IMPACT_SEEN_KEY_PREFIX}${projectId ?? ''}`) ?? 0) || 0;
+    }
+    catch {
+        return undefined;
+    }
+}
+function saveImpactSeen(projectId, verdicts) {
+    try {
+        localStorage.setItem(`${IMPACT_SEEN_KEY_PREFIX}${projectId ?? ''}`, String(verdicts));
+    }
+    catch {
+    }
+}
 function saveHistory(items) {
     try {
         localStorage.setItem(HISTORY_KEY, JSON.stringify(items.slice(0, HISTORY_LIMIT)));
@@ -44,31 +68,52 @@ function saveHistory(items) {
     catch {
     }
 }
-export const CHAT_VIEWS_HTML = `
+export const CHAT_VIEWS_HTML = `${AGENT_LINK_HTML}
   <div data-reticle-harness-spot class="reticle-harness-spot" hidden></div>`;
 export const FLOWS_PAGE_HTML = `<section data-reticle-page-panel="flows" class="reticle-page-panel reticle-flows-view" role="region" aria-label="Saved Flows" hidden>
   <div class="reticle-page-heading"><span class="reticle-page-titles"><strong>Saved flows</strong><span class="reticle-page-subtitle">Journeys your agent verified, replayable here</span></span><button type="button" data-reticle-page-close aria-label="Close Saved Flows" title="Close">×</button></div>
   <div data-reticle-all-flows class="reticle-all-flows"></div>
 </section>`;
 const NAV_ICON_SIZE = PRESENTER_ICON_SIZE.NAV;
+export const NAV_LABEL = {
+    LOG: 'Log',
+    FLOWS: 'Flows',
+    NOTES: 'Notes',
+    IMPACT: 'Impact',
+    HARNESS: 'Harness',
+    SETTINGS: 'Settings',
+    HIDE: 'Hide',
+};
+const IMPACT_ARIA = { SEEN: 'Open Impact', NEW: 'Open Impact, new results' };
+export const navLabelHtml = (text) => `<span class="reticle-nav-label">${text}</span>`;
 export const CHAT_VIEWS_NAV_HTML = `<nav class="reticle-chat-nav" aria-label="Reticle views">
-  <button type="button" ${CHAT_TOGGLE_ATTR} data-reticle-chat-view-btn="activity" aria-label="Agent log" title="Agent log" aria-current="page">${hiIconHtml(PresenterIcon.MESSAGE, NAV_ICON_SIZE)}</button>
-  <button type="button" data-reticle-chat-view-btn="flows" aria-label="Saved flows" title="Saved flows">${hiIconHtml(PresenterIcon.LAYOUT, NAV_ICON_SIZE)}</button>
-  <button type="button" data-reticle-chat-view-btn="annotations" aria-label="Notes" title="Notes">${hiIconHtml(PresenterIcon.NOTES, NAV_ICON_SIZE)}<span data-reticle-note-count class="reticle-nav-count" hidden></span></button>
-  <button type="button" data-reticle-chat-impact class="reticle-chat-impact" aria-label="Open Impact" title="Impact">${hiIconHtml(PresenterIcon.CHART, NAV_ICON_SIZE)}<span data-reticle-chat-verdicts class="reticle-nav-count"></span></button>
+  <button type="button" ${CHAT_TOGGLE_ATTR} data-reticle-chat-view-btn="activity" aria-label="Agent log" title="Agent log" aria-current="page">${hiIconHtml(PresenterIcon.MESSAGE, NAV_ICON_SIZE)}${navLabelHtml(NAV_LABEL.LOG)}</button>
+  <button type="button" data-reticle-chat-view-btn="harness" aria-label="${HARNESS_ROW_TEXT.PAGE_TITLE}" title="${HARNESS_ROW_TEXT.PAGE_TITLE}" hidden>${hiIconHtml(PresenterIcon.PLAY, NAV_ICON_SIZE)}${navLabelHtml(NAV_LABEL.HARNESS)}</button>
+  <button type="button" data-reticle-chat-view-btn="flows" aria-label="Saved flows" title="Saved flows">${hiIconHtml(PresenterIcon.LAYOUT, NAV_ICON_SIZE)}${navLabelHtml(NAV_LABEL.FLOWS)}</button>
+  <button type="button" data-reticle-chat-view-btn="annotations" aria-label="Notes" title="Notes">${hiIconHtml(PresenterIcon.NOTES, NAV_ICON_SIZE)}<span class="reticle-nav-label">${NAV_LABEL.NOTES}<span data-reticle-note-count class="reticle-nav-count" hidden></span></span></button>
+  <button type="button" data-reticle-chat-impact class="reticle-chat-impact" aria-label="${IMPACT_ARIA.SEEN}" title="Impact">${hiIconHtml(PresenterIcon.CHART, NAV_ICON_SIZE)}${navLabelHtml(NAV_LABEL.IMPACT)}<span data-reticle-impact-dot class="reticle-nav-dot" aria-hidden="true" hidden></span></button>
 </nav>`;
 const ANNOTATION_ACTION_ICON_SIZE = PRESENTER_ICON_SIZE.TOOLBAR;
 const markersLabel = 'Show note markers on the page';
 const clearLabel = 'Clear notes from this page';
 const copyAllLabel = 'Copy all notes';
 const NOTES_TEXT = {
+    SUBTITLE: 'Feedback for your agent',
+    SUBTITLE_FULL: 'Pin feedback on the page for your agent',
     PAGE_EMPTY: 'No notes on this page',
     PAGE_HINT: 'Select Add notes, then click anything on the page to pin feedback for your agent.',
     HISTORY_EMPTY: 'No saved notes yet',
     HISTORY_HINT: 'Notes from every page you annotate are kept here.',
 };
+export const HARNESS_PAGE_HTML = `<section data-reticle-page-panel="harness" class="reticle-page-panel reticle-harness-page" role="region" aria-label="${HARNESS_ROW_TEXT.PAGE_TITLE}" hidden>
+  <div class="reticle-page-heading"><span class="reticle-page-titles"><strong>${HARNESS_ROW_TEXT.PAGE_TITLE}</strong><span class="reticle-page-subtitle">${HARNESS_ROW_TEXT.PAGE_SUBTITLE}</span></span><button type="button" data-reticle-page-close aria-label="Close ${HARNESS_ROW_TEXT.PAGE_TITLE}" title="Close">×</button></div>
+  <div data-reticle-harness-page class="reticle-harness-body"></div>
+  ${PLAN_HTML}
+  <div ${HARNESS_LOG_ATTR} ${LAST_ACTOR_ATTR}="${LOG_ACTOR.HARNESS}" class="reticle-harness-log" aria-live="polite" aria-label="${HARNESS_ROW_TEXT.LOG_LABEL}"></div>
+  <p data-reticle-harness-page-meta class="reticle-foot-meta"></p>
+</section>`;
 export const ANNOTATIONS_HTML = `<section data-reticle-page-panel="annotations" class="reticle-page-panel reticle-annotations-view" role="region" aria-label="Notes" hidden>
-  <div class="reticle-page-heading"><span class="reticle-page-titles"><strong>Notes</strong><span class="reticle-page-subtitle">Pin feedback on the page for your agent</span></span><button type="button" ${ANNOTATE_BTN_ATTR} class="reticle-add-notes reticle-primary-btn" title="Add notes" aria-label="Add notes" aria-pressed="false" data-active="0"><span class="reticle-add-notes-icon">${hiIconHtml(PresenterIcon.ANNOTATE, PRESENTER_ICON_SIZE.TOOLBAR)}</span><span data-reticle-notes-toggle-label>Add notes</span></button><button type="button" data-reticle-page-close aria-label="Close Notes" title="Close">×</button></div>
+  <div class="reticle-page-heading"><span class="reticle-page-titles"><strong>Notes</strong><span class="reticle-page-subtitle" title="${NOTES_TEXT.SUBTITLE_FULL}">${NOTES_TEXT.SUBTITLE}</span></span><button type="button" ${ANNOTATE_BTN_ATTR} class="reticle-add-notes reticle-primary-btn" title="Add notes" aria-label="Add notes" aria-pressed="false" data-active="0"><span class="reticle-add-notes-icon">${hiIconHtml(PresenterIcon.ANNOTATE, PRESENTER_ICON_SIZE.TOOLBAR)}</span><span data-reticle-notes-toggle-label>Add notes</span></button><button type="button" data-reticle-page-close aria-label="Close Notes" title="Close">×</button></div>
   <div class="reticle-annotations-tabs" role="group" aria-label="Notes lists">
     <span class="reticle-segmented"><button type="button" data-reticle-annotation-tab="current" aria-pressed="true">This page</button><button type="button" data-reticle-annotation-tab="history" aria-pressed="false">History</button></span>
     <div data-reticle-current-annotation-actions class="reticle-annotation-actions" aria-label="Current page note actions">
@@ -80,28 +125,32 @@ export const ANNOTATIONS_HTML = `<section data-reticle-page-panel="annotations"
   <div data-reticle-annotation-list class="reticle-annotation-list"></div>
 </section>`;
 export const CHAT_VIEWS_CSS = `
-[data-reticle-chat-panel] .reticle-harness-spot{flex:none;border-bottom:1px solid var(--reticle-hud-border);padding:0 var(--reticle-hud-space-3);}
-[data-reticle-chat-panel] .reticle-harness-spot[hidden]{display:none;}
-[data-reticle-chat-panel] .reticle-harness-row{display:flex;align-items:center;gap:var(--reticle-hud-space-2);min-height:40px;}
-[data-reticle-chat-panel] .reticle-harness-copy{display:flex;flex:1;min-width:0;flex-direction:column;line-height:1.3;}
-[data-reticle-chat-panel] .reticle-harness-copy strong{font-size:var(--reticle-hud-size-sm);font-weight:600;color:var(--reticle-hud-text);}
-[data-reticle-chat-panel] .reticle-harness-copy span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--reticle-hud-size-xs);color:var(--reticle-hud-text-muted);}
-[data-reticle-chat-panel] .reticle-harness-switch{flex:none;width:32px;height:20px;border:0;border-radius:20px;padding:2px;cursor:pointer;background:rgba(255,255,255,.2);}
-[data-reticle-chat-panel] .reticle-harness-switch::after{content:"";display:block;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s;}
-[data-reticle-chat-panel] .reticle-harness-switch[aria-checked="true"]{background:var(--reticle-accent);}
-[data-reticle-chat-panel] .reticle-harness-switch[aria-checked="true"]::after{transform:translateX(12px);}
-[data-reticle-chat-panel] .reticle-harness-switch:disabled{opacity:.45;cursor:not-allowed;}
-[data-reticle-chat-panel] .reticle-harness-link{flex:none;color:var(--reticle-hud-brand);font-size:var(--reticle-hud-size-xs);font-weight:600;text-decoration:none;white-space:nowrap;}
-[data-reticle-chat-panel] .reticle-harness-link:hover{text-decoration:underline;}
+${HARNESS_ROW_CSS}
+${HARNESS_ROW_CSS.replaceAll('[data-reticle-chat-panel]', '[data-reticle-page-panel="harness"]')}
+[data-reticle-page-panel="harness"] .reticle-harness-body{flex:none;display:flex;flex-direction:column;gap:var(--reticle-hud-space-2);padding:var(--reticle-hud-space-3);}
+/* The run as it happens, then its result: the Harness's rows only, scrolling under the controls. */
+[data-reticle-page-panel="harness"] .reticle-harness-log{flex:1;min-height:0;overflow-y:auto;padding:0 var(--reticle-hud-space-3) var(--reticle-hud-space-2);}
+[data-reticle-page-panel="harness"] .reticle-harness-log:empty::before{content:"${HARNESS_ROW_TEXT.LOG_EMPTY}";display:block;padding:var(--reticle-hud-space-2) 0;color:var(--reticle-hud-text-faint);font-size:11px;}
+[data-reticle-page-panel="harness"] .reticle-foot-meta{flex:none;padding:0 var(--reticle-hud-space-3) var(--reticle-hud-space-3);}
+[data-reticle-page-open="harness"] [data-reticle-page-panel="harness"]{display:flex;}
+[data-reticle-page-open="harness"] [data-reticle-chat-panel]{display:none!important;}
 [data-reticle-hud] .reticle-chat-nav{display:contents;}
 [data-reticle-hud] .reticle-chat-nav button{position:relative;width:var(--reticle-hud-control-size);height:var(--reticle-hud-control-size);justify-self:center;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--reticle-hud-radius-md);padding:0;background:transparent;color:var(--reticle-hud-text-muted);cursor:pointer;}
 [data-reticle-hud] .reticle-chat-nav button:hover{background:var(--reticle-hud-hover);color:var(--reticle-hud-text);}
-[data-reticle-hud] .reticle-chat-nav button[data-capture="1"]{color:var(--reticle-accent);box-shadow:inset 0 -2px var(--reticle-accent);}
-[data-reticle-hud] .reticle-chat-nav button[aria-current="page"],[data-reticle-hud] .reticle-chat-nav button[data-active="1"]{background:var(--reticle-hud-inset);color:var(--reticle-hud-text);}
+[data-reticle-hud] .reticle-chat-nav button[aria-current="page"],[data-reticle-hud] .reticle-chat-nav button[data-active="1"]{background:transparent;color:var(--reticle-hud-text);}
+/* The page you are on: a short straight bar under its name, nothing louder. */
+[data-reticle-hud] .reticle-toolbar-chrome :is(.reticle-chat-nav button[aria-current="page"],.reticle-chat-nav button[data-active="1"],.reticle-tb-btn[data-active="1"])::after{content:"";position:absolute;left:50%;bottom:1px;width:16px;height:2px;border-radius:1px;transform:translateX(-50%);background:currentColor;}
 [data-reticle-hud] .reticle-chat-nav .reticle-hi-icon{opacity:.92;}
+[data-reticle-hud] .reticle-chat-nav button[hidden]{display:none;}
+/* An icon with its name under it, small: every page says what it is without a hover. */
+[data-reticle-hud] .reticle-toolbar-chrome .reticle-chat-nav button{flex-direction:column;gap:2px;width:100%;height:auto;min-height:42px;padding:4px 0 3px;}
+[data-reticle-hud] .reticle-nav-label{display:block;font-size:9px;line-height:1;font-weight:500;letter-spacing:.01em;color:inherit;white-space:nowrap;}
 [data-reticle-hud] .reticle-chat-nav .reticle-nav-count:empty{display:none;}
-[data-reticle-hud] .reticle-chat-nav .reticle-nav-count:not(:empty){position:absolute;top:0;right:0;min-width:13px;height:13px;display:inline-flex;align-items:center;justify-content:center;padding:0 3px;border-radius:99px;background:var(--reticle-accent);color:#fff;font-size:8px;font-weight:700;}
+[data-reticle-hud] .reticle-chat-nav .reticle-nav-count:not(:empty){margin-left:3px;font-variant-numeric:tabular-nums;color:var(--reticle-hud-brand);font-weight:600;}
 [data-reticle-hud] .reticle-chat-nav .reticle-nav-count[hidden]{display:none;}
+/* New results since Impact was last opened: a dot on the icon's corner, out of the flow, so no number can push the label. */
+[data-reticle-hud] .reticle-chat-nav .reticle-nav-dot{position:absolute;top:4px;left:calc(50% + 5px);width:7px;height:7px;border-radius:50%;background:var(--reticle-hud-brand);box-shadow:0 0 0 2px var(--reticle-hud-surface);pointer-events:none;}
+[data-reticle-hud] .reticle-chat-nav .reticle-nav-dot[hidden]{display:none;}
 [data-reticle-page-panel]{position:absolute;right:0;left:auto;bottom:calc(100% + 8px);z-index:6;box-sizing:border-box;width:var(--reticle-dock-w);max-width:min(var(--reticle-dock-w),calc(100vw - 16px));height:min(var(--reticle-chat-max-h,var(--reticle-chat-h)),calc(100vh - 120px));max-height:min(var(--reticle-chat-max-h,var(--reticle-chat-h)),calc(100vh - 120px));flex-direction:column;overflow:hidden;border-radius:var(--reticle-hud-radius-lg);${HUD_GLASS_PAINT}color:var(--reticle-hud-text);font-size:13px;line-height:1.5;pointer-events:auto;text-align:left;}
 [data-reticle-page-panel][hidden]{display:none!important;}
 [data-reticle-page-open="annotations"] [data-reticle-page-panel="annotations"],[data-reticle-page-open="flows"] [data-reticle-page-panel="flows"]{display:flex;}
@@ -110,7 +159,7 @@ export const CHAT_VIEWS_CSS = `
 .reticle-page-heading strong{font-size:12px;font-weight:600;}
 .reticle-page-heading button{width:26px;height:26px;border:0;border-radius:6px;background:transparent;color:var(--reticle-hud-text-muted);font:inherit;font-size:19px;line-height:1;cursor:pointer;}
 .reticle-page-heading button:hover{background:var(--reticle-hud-hover);color:var(--reticle-hud-text);}
-.reticle-page-subtitle{flex:none;padding:5px 12px;border-bottom:1px solid var(--reticle-hud-border);color:var(--reticle-hud-text-muted);font-size:10px;}
+.reticle-page-subtitle{flex:none;padding:5px 12px;border-bottom:1px solid var(--reticle-hud-border);color:var(--reticle-hud-text-muted);font-size:11px;}
 .reticle-page-panel .reticle-all-flows,.reticle-page-panel .reticle-annotation-list{flex:1;min-height:0;overflow-y:auto;}
 [data-reticle-page-panel="annotations"] .reticle-annotations-tabs{flex:none;}
 [data-reticle-page-panel="annotations"] .reticle-annotation-list{flex:1;}
@@ -135,27 +184,59 @@ export const CHAT_VIEWS_CSS = `
 [data-reticle-page-panel="annotations"] .reticle-annotation-content{flex:1;min-width:0;}
 [data-reticle-page-panel="annotations"] .reticle-annotation-content strong{display:block;font-size:11px;font-weight:600;overflow-wrap:anywhere;}
 [data-reticle-page-panel="annotations"] .reticle-annotation-content span{display:block;margin-top:3px;font-size:var(--reticle-hud-size-xs);color:var(--reticle-hud-text-muted);overflow-wrap:anywhere;}
-[data-reticle-page-panel="annotations"] .reticle-annotation-item button{flex:none;border:1px solid var(--reticle-line);border-radius:6px;background:rgba(255,255,255,.04);color:var(--reticle-muted);font:inherit;font-size:10px;padding:4px 6px;cursor:pointer;}
+[data-reticle-page-panel="annotations"] .reticle-annotation-item button{flex:none;border:1px solid var(--reticle-line);border-radius:6px;background:rgba(255,255,255,.04);color:var(--reticle-muted);font:inherit;font-size:11px;padding:4px 6px;cursor:pointer;}
 [data-reticle-page-panel="annotations"] .reticle-annotation-item button:hover{color:#fff;background:rgba(255,255,255,.1);}
-`;
+${AGENT_LINK_CSS}`;
+const RUN_CONTROL = '[data-reticle-harness-page] :is([data-reticle-harness-run],[data-reticle-harness-stop])';
+function readViewMemory() {
+    try {
+        const raw = JSON.parse(globalThis.sessionStorage.getItem(ReticleStorageKey.PRESENTER_VIEW) ?? '{}');
+        const r = (null !== raw && 'object' === typeof raw ? raw : {});
+        const view = PAGE_VIEWS.find((v) => v === r.view) ?? 'activity';
+        return { view, runFocused: true === r.runFocused };
+    }
+    catch {
+        return { view: 'activity', runFocused: false };
+    }
+}
+function rememberView(memory) {
+    try {
+        globalThis.sessionStorage.setItem(ReticleStorageKey.PRESENTER_VIEW, JSON.stringify(memory));
+    }
+    catch {
+    }
+}
 export class ChatViews {
     #root;
-    #view = 'activity';
+    #view = readViewMemory().view;
+    #refocusRun = readViewMemory().runFocused;
+    #runFocused = false;
     #annotationTab = 'current';
     #current = [];
     #history = readHistory();
     #account;
     #harness;
-    #pendingHarness;
+    #gate;
     #verdicts = 0;
-    #onHarness;
+    #impactOpen = false;
     #onImpact;
     #onOpenChat;
     #listeners;
-    constructor(onHarness, onImpact, onOpenChat) {
-        this.#onHarness = onHarness;
+    #drive;
+    #driving;
+    #projectId;
+    #personaPick = DEFAULT_PERSONA;
+    #customPersona = '';
+    #harnessHtml = '';
+    #harnessPageHtml = '';
+    #linking = false;
+    #agent = new AgentLinkView();
+    #startedAs;
+    #starting;
+    constructor(onImpact, onOpenChat, drive) {
         this.#onImpact = onImpact;
         this.#onOpenChat = onOpenChat;
+        this.#drive = drive;
     }
     mount(root) {
         this.#root = root;
@@ -169,20 +250,85 @@ export class ChatViews {
         root
             .querySelector('[data-reticle-chat-impact]')
             ?.addEventListener('click', () => this.#onImpact(), { signal });
-        root.querySelector('[data-reticle-harness-spot]')?.addEventListener('click', (event) => {
+        const onHarnessClick = (event) => {
+            const target = event.target;
+            if (!(target instanceof Element))
+                return;
+            if (null !== target.closest(`[${HARNESS_OPEN_ATTR}]`)) {
+                this.#onOpenChat('harness');
+                this.open('harness');
+                return;
+            }
+            if (null !== target.closest(`[${HARNESS_SWITCH_ON_ATTR}]`)) {
+                this.#drive?.setHarness(true);
+                return;
+            }
+            const toggle = target.closest(`[${HARNESS_TOGGLE_ATTR}]`);
+            if (null !== toggle) {
+                const on = 'true' !== toggle.getAttribute('aria-checked');
+                toggle.setAttribute('aria-checked', String(on));
+                this.#drive?.setHarness(on);
+                return;
+            }
+            const linkButton = target.closest(`[${HARNESS_LINK_ATTR}],[${TEAM_SAVE_ATTR}]:not([${ACCOUNT_SIGNIN_ATTR}])`);
+            if (null !== linkButton) {
+                if (linkButton.disabled)
+                    return;
+                this.#linking = true;
+                this.#drive?.link();
+                this.#paintHarness();
+                return;
+            }
+            const run = target.closest('[data-reticle-harness-run]');
+            if (null !== run) {
+                if (run.disabled)
+                    return;
+                this.#startedAs = this.#personaPick;
+                this.#markStarting(true);
+                this.#drive?.run(personaText(this.#personaPick, this.#customPersona));
+                return;
+            }
+            if (null !== target.closest('[data-reticle-harness-stop]')) {
+                this.#drive?.stop();
+                return;
+            }
+            const copy = target.closest(`[${HARNESS_COPY_PROMPT_ATTR}]`);
+            if (null !== copy) {
+                const prompt = this.#gate?.prompt;
+                if (prompt !== undefined)
+                    void navigator.clipboard
+                        ?.writeText(prompt)
+                        .then(() => (copy.textContent = HARNESS_ROW_TEXT.COPIED))
+                        .catch(() => undefined);
+            }
+        };
+        root
+            .querySelector('[data-reticle-harness-spot]')
+            ?.addEventListener('click', onHarnessClick, { signal });
+        root
+            .querySelector('[data-reticle-harness-page]')
+            ?.addEventListener('click', onHarnessClick, { signal });
+        root
+            .querySelector(`[${TEAM_SLOT_ATTR}]`)
+            ?.addEventListener('click', onHarnessClick, { signal });
+        const spot = root.querySelector('[data-reticle-harness-page]');
+        spot?.addEventListener('change', (event) => {
             const target = event.target;
-            if (!(target instanceof Element) ||
-                null === target.closest('[data-reticle-harness-switch]'))
+            if (!(target instanceof HTMLSelectElement))
                 return;
-            const toggle = target.closest('[data-reticle-harness-switch]');
-            if (null === toggle || toggle.disabled)
+            const pick = knownPick(target.value);
+            if (pick === undefined)
                 return;
-            const enabled = toggle.getAttribute('aria-checked') !== 'true';
-            this.#pendingHarness = enabled;
-            toggle.setAttribute('aria-checked', String(enabled));
-            toggle.disabled = true;
-            this.#onHarness(enabled);
+            this.#personaPick = pick;
+            savePick(this.#projectId, pick);
+            this.#paintHarness();
+            this.#root?.querySelector(`#${PERSONA_PICK_ID}`)?.focus();
         }, { signal });
+        spot?.addEventListener('input', (event) => {
+            if (event.target instanceof HTMLInputElement)
+                this.#customPersona = event.target.value;
+        }, { signal });
+        this.#agent.mount(root, signal);
         root.querySelectorAll('[data-reticle-annotation-tab]').forEach((button) => button.addEventListener('click', () => {
             this.#annotationTab =
                 'history' === button.getAttribute('data-reticle-annotation-tab')
@@ -214,20 +360,36 @@ export class ChatViews {
             if (item !== undefined)
                 this.#copy([item], 'pageUrl' in item ? item.pageUrl : location.href);
         }, { signal });
+        root.addEventListener('focusin', (event) => this.#noteRunFocus(event.target instanceof Element && event.target.matches(RUN_CONTROL)), { signal });
+        root.addEventListener('focusout', (event) => {
+            const next = event.relatedTarget;
+            this.#noteRunFocus(next instanceof Element && next.matches(RUN_CONTROL));
+        }, { signal });
         this.open(this.#view);
         this.#paintHarness();
         this.paintImpact(this.#verdicts);
         this.#paintAnnotations();
     }
     teardown() {
+        this.#markStarting(false);
         this.#listeners?.abort();
         this.#listeners = undefined;
         this.#root = undefined;
+        this.#harnessHtml = '';
+        this.#harnessPageHtml = '';
+        this.#agent.teardown();
+    }
+    #noteRunFocus(on) {
+        if (on === this.#runFocused)
+            return;
+        this.#runFocused = on;
+        rememberView({ view: this.#view, runFocused: on });
     }
     open(view) {
-        if (view !== 'activity' && view !== 'flows' && view !== 'annotations')
+        if (view !== 'activity' && !PAGE_VIEWS.includes(view))
             return;
         this.#view = view;
+        rememberView({ view, runFocused: this.#runFocused });
         const root = this.#root;
         if (root === undefined)
             return;
@@ -257,24 +419,78 @@ export class ChatViews {
             panel.hidden = true;
         });
         this.#view = 'activity';
+        rememberView({ view: 'activity', runFocused: false });
         root.querySelectorAll('[data-reticle-chat-view-btn]').forEach((button) => {
             button.removeAttribute('aria-current');
         });
     }
+    setProjectId(projectId) {
+        this.#projectId = projectId;
+        this.#personaPick = readPick(projectId);
+        this.#paintHarness();
+        this.#paintImpactDot();
+    }
+    paintAgent(link) {
+        this.#agent.paint(link);
+        this.#paintMeta();
+    }
     paintAccount(account) {
         this.#account = account;
+        const nav = this.#root?.querySelector('[data-reticle-chat-view-btn="harness"]');
+        if (nav !== null && nav !== undefined)
+            nav.hidden = true !== account?.signedIn;
         this.#paintHarness();
     }
-    paintHarness(config) {
+    paintDrive(drive) {
+        this.#driving = drive;
+        if (drive !== undefined)
+            this.#markStarting(false);
+        else if (this.#starting === undefined)
+            this.#startedAs = undefined;
+        this.#paintHarness();
+    }
+    #markStarting(on) {
+        if (this.#starting !== undefined)
+            clearTimeout(this.#starting);
+        this.#starting = on
+            ? setTimeout(() => {
+                this.#starting = undefined;
+                if (this.#driving === undefined)
+                    this.#startedAs = undefined;
+                this.#paintHarness();
+            }, HARNESS_STARTING_MS)
+            : undefined;
+        if (on)
+            this.#paintHarness();
+    }
+    paintHarness(config, gate) {
+        if (config !== undefined)
+            this.#linking = false;
         this.#harness = config;
-        this.#pendingHarness = undefined;
+        this.#gate = gate;
         this.#paintHarness();
     }
     paintImpact(verdicts) {
         this.#verdicts = verdicts;
-        const el = this.#root?.querySelector('[data-reticle-chat-verdicts]');
-        if (el !== null && el !== undefined)
-            el.textContent = verdicts > 0 ? `· ${String(verdicts)}` : '';
+        if (this.#impactOpen)
+            saveImpactSeen(this.#projectId, verdicts);
+        this.#paintImpactDot();
+    }
+    setImpactOpen(open) {
+        this.#impactOpen = open;
+        if (open)
+            saveImpactSeen(this.#projectId, this.#verdicts);
+        this.#paintImpactDot();
+    }
+    #paintImpactDot() {
+        const button = this.#root?.querySelector('[data-reticle-chat-impact]');
+        const dot = button?.querySelector('[data-reticle-impact-dot]');
+        if (button === undefined || null === button || dot === undefined || null === dot)
+            return;
+        const seen = this.#impactOpen ? this.#verdicts : readImpactSeen(this.#projectId);
+        const fresh = seen !== undefined && this.#verdicts > seen;
+        dot.hidden = !fresh;
+        button.setAttribute('aria-label', fresh ? IMPACT_ARIA.NEW : IMPACT_ARIA.SEEN);
     }
     paintAnnotations(items) {
         this.#current = [...items];
@@ -294,34 +510,58 @@ export class ChatViews {
         this.#paintAnnotations();
     }
     #paintHarness() {
-        const spot = this.#root?.querySelector('[data-reticle-harness-spot]');
-        if (null === spot || spot === undefined)
+        const root = this.#root;
+        const spot = root?.querySelector('[data-reticle-harness-spot]');
+        if (root === undefined || null === spot || spot === undefined)
             return;
         const account = this.#account;
         const config = this.#harness;
-        if (account === undefined || !account.signedIn) {
-            spot.hidden = true;
-            return;
-        }
         spot.hidden = false;
-        const base = platformBase(config, account);
-        const setupUrl = `${base}${HARNESS_SETUP_PATH}`;
-        const planUrl = `${base}${HARNESS_PLAN_PATH}`;
-        if (config === undefined) {
-            spot.innerHTML = `<div class="reticle-harness-row"><div class="reticle-harness-copy"><strong>Reticle Harness</strong><span>Link project to enable driving</span></div><button type="button" role="switch" data-reticle-harness-switch class="reticle-harness-switch" aria-label="Reticle Harness autonomous driving" aria-checked="false" aria-disabled="true" disabled></button><a class="reticle-harness-link" href="${setupUrl}" target="_blank" rel="noopener noreferrer">Set up ↗</a></div>`;
-        }
-        else if (!config.harnessEntitled) {
-            spot.innerHTML = `<div class="reticle-harness-row"><div class="reticle-harness-copy"><strong>Reticle Harness</strong><span>Describe a user and Reticle drives the whole journey for you</span></div><a class="reticle-harness-link" href="${planUrl}" target="_blank" rel="noopener noreferrer">See plans ↗</a></div>`;
+        const base = platformBase(config, account ?? { signedIn: false });
+        const project = this.#projectId === undefined ? '' : `&project=${encodeURIComponent(this.#projectId)}`;
+        const state = {
+            account,
+            config,
+            gate: this.#gate,
+            drive: this.#driving,
+            canDrive: this.#drive !== undefined,
+            pick: this.#personaPick,
+            startedAs: this.#startedAs,
+            setupUrl: `${base}${HARNESS_SETUP_PATH}${project}${HARNESS_SETUP_HASH}`,
+            planUrl: `${base}${HARNESS_PLAN_PATH}`,
+            linking: this.#linking,
+            starting: this.#starting !== undefined && this.#driving === undefined,
+        };
+        const foot = harnessFootHtml(state);
+        if (foot !== this.#harnessHtml) {
+            morphHtml(spot, foot);
+            this.#harnessHtml = foot;
         }
-        else if (config.credits !== undefined && config.credits.used >= config.credits.limit) {
-            spot.innerHTML = `<div class="reticle-harness-row"><div class="reticle-harness-copy"><strong>Reticle Harness</strong><span>${creditsLeft(config.credits)}. They renew over 30 days.</span></div><a class="reticle-harness-link" href="${planUrl}" target="_blank" rel="noopener noreferrer">Get more with Pro ↗</a></div>`;
-        }
-        else if (false === config.providerReady) {
-            spot.innerHTML = `<div class="reticle-harness-row"><div class="reticle-harness-copy"><strong>Reticle Harness</strong><span>Choose a model provider to start driving</span></div><a class="reticle-harness-link" href="${setupUrl}" target="_blank" rel="noopener noreferrer">Set up ↗</a></div>`;
-        }
-        else {
-            spot.innerHTML = `<div class="reticle-harness-row"><div class="reticle-harness-copy"><strong>Reticle Harness</strong><span>${config.credits === undefined ? 'Autonomous checks' : creditsLeft(config.credits)}</span></div><button type="button" role="switch" data-reticle-harness-switch class="reticle-harness-switch" aria-label="Reticle Harness autonomous driving" aria-checked="${String(this.#pendingHarness ?? config.harnessEnabled)}" ${this.#pendingHarness === undefined ? '' : 'disabled'}></button></div>`;
+        if (account !== undefined && !account.signedIn && 'harness' === this.#view)
+            this.closePage();
+        const page = root.querySelector('[data-reticle-harness-page]');
+        if (page !== null) {
+            const body = harnessRowHtml(state);
+            if (body !== this.#harnessPageHtml) {
+                morphHtml(page, body);
+                this.#harnessPageHtml = body;
+            }
+            const control = this.#refocusRun ? page.querySelector(RUN_CONTROL) : null;
+            if (null !== control && 'harness' === this.#view) {
+                this.#refocusRun = false;
+                control.focus();
+            }
+            const custom = page.querySelector('[data-reticle-harness-persona]');
+            if (custom !== null && custom.value !== this.#customPersona)
+                custom.value = this.#customPersona;
         }
+        this.#paintMeta();
+    }
+    #paintMeta() {
+        const signedIn = true === this.#account?.signedIn;
+        const pageMeta = this.#root?.querySelector('[data-reticle-harness-page-meta]');
+        if (pageMeta !== null && pageMeta !== undefined)
+            pageMeta.textContent = signedIn ? creditsShort(this.#harness?.credits) : '';
     }
     #visibleAnnotations() {
         return 'history' === this.#annotationTab ? this.#history : this.#current;

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

@@ -18,6 +18,7 @@ export interface PresenterOptions {
     idleNoticeMs?: number;
     idleEndMs?: number;
     sessionId?: string;
+    projectId?: string;
     narrationDwellMs?: number;
     border?: BorderMode;
     logMax?: number;
@@ -43,6 +44,7 @@ export declare const ACT_STRIP: {
     readonly STOPPED_PREFIX: "stopped · ";
     readonly NOW: "now";
     readonly SINCE_LAST: " since last action";
+    readonly harnessTesting: (steps: number) => string;
 };
 export declare const IDLE_END_MS = 300000;
 export declare const IDLE_END_MIN_MS = 5000;

package/dist/presenter/presenter-config.js

@@ -25,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;

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

@@ -6,7 +6,6 @@ export declare const CONTROLS_CSS: 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: string;
 export declare const CONTROLS_FOOT_HTML: string;
 interface ControlPanelHost {
     emit: (kind: HumanControlKind, text?: string) => void;