@reticlehq/browser 3.6.0 → 3.7.0

package/dist/presenter/presenter-controls.js

@@ -6,7 +6,6 @@ import { PresenterIcon, PRESENTER_ICON_SIZE, hiIcon, hiIconHtml } from './icons/
 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';
@@ -21,9 +20,6 @@ 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 FLOWS_ALL_LABEL = 'See all';
-const SEE_LOGS_LABEL = 'See the logs';
 const PROGRESS_LINGER_MS = 6000;
 const PROGRESS_GLYPH = {
     [FlowProgressStatus.PLAYING]: '⏵',
@@ -41,7 +37,6 @@ function parseFlowProgress(args) {
 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',
@@ -53,9 +48,9 @@ export function flowTitle(name) {
     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;align-items:center;min-width:0;}
+[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;}
@@ -64,6 +59,7 @@ export const CONTROLS_CSS = `
   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,
@@ -87,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;}
@@ -123,13 +119,6 @@ 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;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);}
@@ -139,10 +128,6 @@ export const CONTROLS_CSS = `
 @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;}
@@ -180,8 +165,7 @@ const TB = PRESENTER_ICON_SIZE.TOOLBAR;
 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"><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>`;
+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,
@@ -190,22 +174,10 @@ 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 {
-    #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,
@@ -213,7 +185,6 @@ export class ControlPanel {
         copyBtn: undefined,
         exportBtn: undefined,
         exportMsg: undefined,
-        flows: undefined,
         allFlows: undefined,
     };
     #state = SessionState.ACTIVE;
@@ -253,31 +224,10 @@ export class ControlPanel {
                 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);
             }
         };
-        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.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);
@@ -353,15 +303,9 @@ export class ControlPanel {
         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]') ?? []) {
+        {
+            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) {
@@ -414,31 +358,13 @@ export class ControlPanel {
         this.#renderFlows();
     }
     #renderFlows() {
-        const el = this.#refs.flows;
-        if (el === undefined)
-            return;
         const all = this.#refs.allFlows;
-        const doc = el.ownerDocument;
+        if (all === undefined)
+            return;
+        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);
-        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}`;
-            btn.disabled = !enabled;
-            if (!enabled)
-                btn.title = 'Open the page where this flow starts to replay it';
-            container.appendChild(btn);
-        };
+        all.replaceChildren();
         const addRow = (container, flow, enabled) => {
             const btn = doc.createElement('button');
             btn.type = 'button';
@@ -462,11 +388,7 @@ export class ControlPanel {
             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';

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

@@ -9,7 +9,7 @@ export const PRESENTER_DESIGN_TOKENS_CSS = `
   --reticle-hud-radius-md:10px;
   --reticle-hud-radius-lg:14px;
   --reticle-hud-radius-pill:9999px;
-  --reticle-hud-size-xs:10px;
+  --reticle-hud-size-xs:11px;
   --reticle-hud-size-sm:12px;
   --reticle-hud-size-base:13px;
   --reticle-hud-icon-size:18px;

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

@@ -4,7 +4,7 @@ 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 DETAIL: "Free Harness credits to start.";
     readonly CTA: "Sign in";
 };
 export declare const RAIL_HTML: string;

package/dist/presenter/presenter-frame.js

@@ -9,7 +9,7 @@ const PAGE_PANEL_ATTR = 'data-reticle-page-panel';
 const OVERLAY = 'data-reticle-overlay';
 export const RAIL_TEXT = {
     TITLE: 'Sign in to try Reticle Harness',
-    DETAIL: 'Free credits every month for autonomous end-to-end checks',
+    DETAIL: 'Free Harness credits to start.',
     CTA: 'Sign in',
 };
 export const RAIL_HTML = `<div ${RAIL_ATTR} class="reticle-rail" role="complementary" aria-label="Reticle">
@@ -53,7 +53,7 @@ export const FRAME_CSS = `
 /*
  * Two rows above the log in every state: the header and the status row. "Session ended" (or the
  * handoff notice) takes the status text's place instead of arriving as a row of its own, and the
- * Harness control sits in the footer beside the project capsule.
+ * Harness block sits in the footer above the project capsule.
  */
 [${OVERLAY}] [${CHAT_PANEL_ATTR}] .reticle-act-strip .reticle-banner{display:none;flex:1;min-width:0;min-height:0;padding:0;border:0;background:none;
   font-size:11px;font-weight:600;line-height:1.3;color:var(--reticle-hud-text);
@@ -61,11 +61,9 @@ export const FRAME_CSS = `
 [${OVERLAY}][data-reticle-state="ended"] [${CHAT_PANEL_ATTR}] .reticle-act-strip .reticle-banner{display:-webkit-box;}
 [${OVERLAY}][data-reticle-state="ended"] [${CHAT_PANEL_ATTR}] .reticle-act-strip .reticle-act{display:none;}
 [${CHAT_PANEL_ATTR}] .reticle-foot-workspace-row{gap:var(--reticle-hud-space-2);}
-[${CHAT_PANEL_ATTR}] [data-reticle-foot] .reticle-harness-spot{flex:none;margin-left:auto;padding:0;border:0;}
-[${CHAT_PANEL_ATTR}] [data-reticle-foot] .reticle-harness-row{min-height:0;gap:var(--reticle-hud-space-2);}
-[${CHAT_PANEL_ATTR}] [data-reticle-foot] .reticle-harness-copy strong{font-size:var(--reticle-hud-size-xs);color:var(--reticle-hud-text-muted);white-space:nowrap;}
-/* The explanation stays for screen readers; sighted users get it from the link it sits beside. */
-[${CHAT_PANEL_ATTR}] [data-reticle-foot] .reticle-harness-copy span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
+/* The Harness block sits above the project capsule, full width: one clear thing to press. */
+[${CHAT_PANEL_ATTR}] [data-reticle-foot] .reticle-foot-stack{display:flex;flex-direction:column;gap:var(--reticle-hud-space-2);}
+[${CHAT_PANEL_ATTR}] [data-reticle-foot] .reticle-foot-workspace-row:has(> .reticle-workspace-wrap[hidden]){display:none;}
 ${BELOW} ${PAGES}{bottom:auto;top:calc(100% + 8px + var(--reticle-rail-h) + var(--reticle-frame-gap));}
 [${DOCK_ATTR}][${DOCK_ALIGN_ATTR}="start"] :is(${PAGES},[${RAIL_ATTR}]){right:auto;left:0;}
 
@@ -107,7 +105,7 @@ ${BELOW} ${PAGES}{bottom:auto;top:calc(100% + 8px + var(--reticle-rail-h) + var(
 [${PAGE_PANEL_ATTR}="flows"] .reticle-flow-row:focus-visible{outline:2px solid var(--reticle-hud-brand);outline-offset:1px;}
 [${PAGE_PANEL_ATTR}="flows"] .reticle-flow-row:disabled{cursor:not-allowed;opacity:.5;}
 [${PAGE_PANEL_ATTR}="flows"] .reticle-flow-play{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
-  border-radius:50%;background:var(--reticle-hud-brand-soft);color:var(--reticle-hud-brand);font-size:10px;}
+  border-radius:50%;background:var(--reticle-hud-brand-soft);color:var(--reticle-hud-brand);font-size:11px;}
 [${PAGE_PANEL_ATTR}="flows"] .reticle-flow-row:disabled .reticle-flow-play{background:var(--reticle-hud-inset);color:var(--reticle-hud-text-faint);}
 [${PAGE_PANEL_ATTR}="flows"] .reticle-flow-text{display:flex;flex:1;min-width:0;flex-direction:column;gap:1px;}
 [${PAGE_PANEL_ATTR}="flows"] .reticle-flow-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--reticle-hud-size-sm);font-weight:600;}
@@ -143,11 +141,11 @@ ${BELOW} ${PAGES}{bottom:auto;top:calc(100% + 8px + var(--reticle-rail-h) + var(
 [${SETTINGS_PANEL_ATTR}] .reticle-settings-reset{background:none;text-align:left;padding-left:14px;font-weight:500;}
 
 /* ── Toolbar: Settings and Exit are tabs like the four beside them, so they light the same way. ── */
-[data-reticle-hud] .reticle-toolbar-chrome .reticle-tb-btn{width:var(--reticle-hud-control-size);height:var(--reticle-hud-control-size);
+[data-reticle-hud] .reticle-toolbar-chrome .reticle-tb-btn{width:100%;height:auto;flex-direction:column;gap:2px;min-height:42px;padding:4px 0 3px;
   border-radius:var(--reticle-hud-radius-md);background:transparent;color:var(--reticle-hud-text-muted);}
 [data-reticle-hud] .reticle-toolbar-chrome .reticle-tb-btn:hover{background:var(--reticle-hud-hover);color:var(--reticle-hud-text);}
 [data-reticle-hud] .reticle-toolbar-chrome .reticle-tb-btn[data-active="1"],
-[data-reticle-hud] .reticle-toolbar-chrome .reticle-tb-btn[data-active="1"]:hover{background:var(--reticle-hud-inset);color:var(--reticle-hud-text);}
+[data-reticle-hud] .reticle-toolbar-chrome .reticle-tb-btn[data-active="1"]:hover{background:transparent;color:var(--reticle-hud-text);}
 
 [${RAIL_ATTR}]{
   display:none;position:absolute;right:0;left:auto;bottom:calc(100% + 8px);z-index:7;

package/dist/presenter/presenter-harness-row.d.ts

@@ -0,0 +1,67 @@
+import { type AccountState, type HarnessConfig, type HarnessDrive } from '@reticlehq/core';
+import { type Credits } from '@reticlehq/core/hud';
+export declare const HARNESS_ROW_TEXT: {
+    readonly RUN: "Run Harness";
+    readonly STARTING: "Starting…";
+    readonly STOP: "Stop";
+    readonly SIGNED_OUT: string;
+    readonly SIGN_IN: "Sign in";
+    readonly UNLINKED: "This project is not on your dashboard yet.";
+    readonly LINK: "Link this project";
+    readonly LINKING: "Linking…";
+    readonly NOT_ENTITLED: "Harness is not on your plan";
+    readonly NO_CREDITS: "No Harness credits left";
+    readonly NO_PROVIDER: "No model provider set";
+    readonly OFF: "Harness is off";
+    readonly canSwitchOn: (percent: number) => string;
+    readonly TURN_ON: "Switch on";
+    readonly COPY_PROMPT: "Copy setup prompt";
+    readonly COPIED: "Copied";
+    readonly SET_UP: "Set up ↗";
+    readonly PLANS: "See plans ↗";
+    readonly PLAN: "Plan ↗";
+    readonly MORE: "Get more ↗";
+    readonly driving: (as: string | undefined, steps: number) => string;
+    readonly NAME: "Harness";
+    readonly TOGGLE: "Reticle Harness on this project";
+    readonly creditsLeft: (left: number, days: number | undefined) => string;
+    readonly FOOT_LINK: "Link project";
+    readonly FOOT_NO_CREDITS: "No credits";
+    readonly FOOT_NOT_ENTITLED: "Not on your plan";
+    readonly FOOT_NO_PROVIDER: "No model provider";
+    readonly footSetup: (percent: number) => string;
+    readonly PAGE_TITLE: "Reticle Harness";
+    readonly LOG_LABEL: "What the Harness did";
+    readonly LOG_EMPTY: "Runs show here, step by step.";
+    readonly PAGE_SUBTITLE: "Tests your app by itself";
+};
+export declare const HARNESS_SWITCH_ON_ATTR = "data-reticle-harness-switch";
+export declare const HARNESS_LINK_ATTR = "data-reticle-harness-link";
+export declare const HARNESS_OPEN_ATTR = "data-reticle-harness-open";
+export declare const HARNESS_LOG_ATTR = "data-reticle-harness-log";
+export declare const HARNESS_TOGGLE_ATTR = "data-reticle-harness-toggle";
+export declare const HARNESS_COPY_PROMPT_ATTR = "data-reticle-harness-copy-prompt";
+export interface HarnessGateView {
+    percent: number;
+    unlocked: boolean;
+    reason?: string;
+    prompt?: string;
+}
+export declare function harnessGateIn(instrumentation: Readonly<Record<string, unknown>> | undefined, config?: HarnessConfig): HarnessGateView | undefined;
+export interface HarnessRowState {
+    account: AccountState | undefined;
+    config: HarnessConfig | undefined;
+    gate?: HarnessGateView | undefined;
+    drive: HarnessDrive | undefined;
+    canDrive: boolean;
+    pick: string;
+    startedAs: string | undefined;
+    setupUrl: string;
+    planUrl: string;
+    linking?: boolean;
+    starting?: boolean;
+}
+export declare function creditsShort(credits: Credits | undefined): string;
+export declare function harnessFootHtml(s: HarnessRowState): string;
+export declare function harnessRowHtml(s: HarnessRowState): string;
+export declare const HARNESS_ROW_CSS = "\n[data-reticle-chat-panel] .reticle-harness-spot{flex:none;display:flex;flex-direction:column;gap:4px;}\n[data-reticle-chat-panel] .reticle-harness-spot[hidden],[data-reticle-chat-panel] .reticle-harness-spot:empty{display:none;}\n[data-reticle-chat-panel] .reticle-harness-row{display:flex;align-items:center;gap:6px;min-height:30px;min-width:0;}\n[data-reticle-chat-panel] .reticle-harness-lead{flex:1;min-width:0;display:flex;align-items:center;gap:6px;}\n[data-reticle-chat-panel] .reticle-harness-said{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--reticle-hud-size-sm);color:var(--reticle-hud-text);}\n[data-reticle-chat-panel] .reticle-harness-row-wrap{flex-wrap:wrap;row-gap:2px;padding:4px 0;}\n[data-reticle-chat-panel] .reticle-harness-row-wrap .reticle-harness-said{flex:1 1 100%;white-space:normal;}\n[data-reticle-chat-panel] .reticle-harness-said code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;}\n[data-reticle-chat-panel] .reticle-harness-as{flex:none;font-size:var(--reticle-hud-size-xs);color:var(--reticle-hud-text-muted);}\n[data-reticle-chat-panel] .reticle-harness-persona{box-sizing:border-box;flex:1;min-width:0;width:100%;height:30px;font:inherit;font-size:var(--reticle-hud-size-sm);color:var(--reticle-hud-text);\n  background:var(--reticle-hud-ground);border:1px solid var(--reticle-hud-border-strong);border-radius:var(--reticle-hud-radius-sm);padding:0 var(--reticle-hud-space-2);}\n[data-reticle-chat-panel] .reticle-harness-spot > .reticle-harness-persona{flex:none;}\n[data-reticle-chat-panel] select.reticle-harness-persona{padding-right:2px;text-overflow:ellipsis;}\n[data-reticle-chat-panel] .reticle-harness-persona::placeholder{color:var(--reticle-hud-text-faint);}\n[data-reticle-chat-panel] .reticle-harness-persona:focus-visible{outline:2px solid var(--reticle-hud-brand);outline-offset:0;}\n[data-reticle-chat-panel] .reticle-harness-run{flex:none;box-sizing:border-box;height:30px;padding:0 12px;border:0;border-radius:var(--reticle-hud-radius-sm);cursor:pointer;white-space:nowrap;\n  background:var(--reticle-hud-brand);color:#160b02;font:inherit;font-size:var(--reticle-hud-size-sm);font-weight:700;}\n[data-reticle-chat-panel] .reticle-harness-run:hover{filter:brightness(1.08);}\n[data-reticle-chat-panel] .reticle-harness-run:focus-visible{outline:2px solid var(--reticle-hud-text);outline-offset:2px;}\n[data-reticle-chat-panel] .reticle-harness-stop{background:transparent;color:var(--reticle-hud-text);border:1px solid var(--reticle-hud-border-strong);}\n[data-reticle-chat-panel] .reticle-harness-link{flex:none;border:0;padding:0;background:none;cursor:pointer;font:inherit;color:var(--reticle-hud-brand);font-size:var(--reticle-hud-size-sm);font-weight:600;text-decoration:none;white-space:nowrap;}\n[data-reticle-chat-panel] .reticle-harness-link:hover{text-decoration:underline;}\n[data-reticle-chat-panel] .reticle-harness-open{flex:1;min-width:0;height:30px;display:flex;align-items:center;gap:8px;padding:0 var(--reticle-hud-space-2);border:0;border-radius:var(--reticle-hud-radius-sm);background:transparent;cursor:pointer;\n  text-align:left;white-space:nowrap;font:inherit;font-size:var(--reticle-hud-size-sm);color:var(--reticle-hud-text);}\n[data-reticle-chat-panel] .reticle-harness-name{flex:none;font-weight:600;}\n[data-reticle-chat-panel] .reticle-harness-state{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--reticle-hud-text-muted);font-size:11px;font-variant-numeric:tabular-nums;}\n[data-reticle-chat-panel] .reticle-harness-chev{flex:none;color:var(--reticle-hud-text-faint);}\n[data-reticle-chat-panel] .reticle-harness-toggle{flex:none;position:relative;width:30px;height:18px;padding:0;border:0;border-radius:9px;cursor:pointer;background:var(--reticle-hud-border-strong);transition:background .15s;}\n[data-reticle-chat-panel] .reticle-harness-toggle[aria-checked=\"true\"]{background:var(--reticle-hud-brand);}\n[data-reticle-chat-panel] .reticle-harness-knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .15s;}\n[data-reticle-chat-panel] .reticle-harness-toggle[aria-checked=\"true\"] .reticle-harness-knob{transform:translateX(12px);}\n[data-reticle-chat-panel] .reticle-harness-toggle:focus-visible{outline:2px solid var(--reticle-hud-text);outline-offset:2px;}\n[data-reticle-chat-panel] .reticle-harness-open:hover{background:var(--reticle-hud-hover);}\n[data-reticle-chat-panel] .reticle-harness-open:focus-visible{outline:2px solid var(--reticle-hud-brand);outline-offset:0;}\n[data-reticle-chat-panel] .reticle-harness-run:disabled,[data-reticle-chat-panel] .reticle-harness-persona:disabled{opacity:.6;cursor:default;}\n[data-reticle-chat-panel] .reticle-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}\n[data-reticle-chat-panel] .reticle-foot-meta{margin:0;font-size:11px;line-height:1.3;color:var(--reticle-hud-text-muted);overflow-wrap:anywhere;}\n[data-reticle-chat-panel] .reticle-foot-meta:empty{display:none;}\n";

package/dist/presenter/presenter-harness-row.js

@@ -0,0 +1,209 @@
+import { CreditKind, } from '@reticlehq/core';
+import { SIGN_UP_PITCH, creditsSpent, creditsUsageText, creditsUsedText, } from '@reticlehq/core/hud';
+import { esc } from './chrome/presenter-safe-html.js';
+import { ACCOUNT_SIGNIN_ATTR } from './presenter-account.js';
+import { personaPickHtml, personaCustomHtml, personaLabel } from './presenter-personas.js';
+export const HARNESS_ROW_TEXT = {
+    RUN: 'Run Harness',
+    STARTING: 'Starting…',
+    STOP: 'Stop',
+    SIGNED_OUT: SIGN_UP_PITCH,
+    SIGN_IN: 'Sign in',
+    UNLINKED: 'This project is not on your dashboard yet.',
+    LINK: 'Link this project',
+    LINKING: 'Linking…',
+    NOT_ENTITLED: 'Harness is not on your plan',
+    NO_CREDITS: 'No Harness credits left',
+    NO_PROVIDER: 'No model provider set',
+    OFF: 'Harness is off',
+    canSwitchOn: (percent) => `Setup score ${String(percent)}%. Harness is off.`,
+    TURN_ON: 'Switch on',
+    COPY_PROMPT: 'Copy setup prompt',
+    COPIED: 'Copied',
+    SET_UP: 'Set up ↗',
+    PLANS: 'See plans ↗',
+    PLAN: 'Plan ↗',
+    MORE: 'Get more ↗',
+    driving: (as, steps) => `Driving${as === undefined ? '' : ` as ${as}`} · ${String(steps)} step${1 === steps ? '' : 's'}`,
+    NAME: 'Harness',
+    TOGGLE: 'Reticle Harness on this project',
+    creditsLeft: (left, days) => `${left.toLocaleString('en-US')} credit${1 === left ? '' : 's'}${days === undefined ? '' : ` · ${String(days)} day${1 === days ? '' : 's'}`}`,
+    FOOT_LINK: 'Link project',
+    FOOT_NO_CREDITS: 'No credits',
+    FOOT_NOT_ENTITLED: 'Not on your plan',
+    FOOT_NO_PROVIDER: 'No model provider',
+    footSetup: (percent) => `Setup ${String(percent)}% · needs 80%`,
+    PAGE_TITLE: 'Reticle Harness',
+    LOG_LABEL: 'What the Harness did',
+    LOG_EMPTY: 'Runs show here, step by step.',
+    PAGE_SUBTITLE: 'Tests your app by itself',
+};
+export const HARNESS_SWITCH_ON_ATTR = 'data-reticle-harness-switch';
+export const HARNESS_LINK_ATTR = 'data-reticle-harness-link';
+export const HARNESS_OPEN_ATTR = 'data-reticle-harness-open';
+export const HARNESS_LOG_ATTR = 'data-reticle-harness-log';
+export const HARNESS_TOGGLE_ATTR = 'data-reticle-harness-toggle';
+export const HARNESS_COPY_PROMPT_ATTR = 'data-reticle-harness-copy-prompt';
+export function harnessGateIn(instrumentation, config) {
+    const local = localGateIn(instrumentation);
+    const platform = config?.gate;
+    if (platform === undefined)
+        return local;
+    const prompt = platform.prompt ?? local?.prompt;
+    const reason = platform.unlocked ? undefined : (platform.reason ?? local?.reason);
+    return {
+        percent: platform.percent ?? local?.percent ?? 0,
+        unlocked: platform.unlocked,
+        ...(reason === undefined ? {} : { reason }),
+        ...(prompt === undefined ? {} : { prompt }),
+    };
+}
+function localGateIn(instrumentation) {
+    const raw = instrumentation?.['harnessGate'];
+    if ('object' !== typeof raw || null === raw)
+        return undefined;
+    const gate = raw;
+    const percent = gate['percent'];
+    const unlocked = gate['unlocked'];
+    if ('number' !== typeof percent || 'boolean' !== typeof unlocked)
+        return undefined;
+    const reason = gate['reason'];
+    const prompt = instrumentation?.['prompt'];
+    return {
+        percent: Math.round(percent),
+        unlocked,
+        ...('string' === typeof reason ? { reason } : {}),
+        ...('string' === typeof prompt ? { prompt } : {}),
+    };
+}
+const row = (inner) => `<div class="reticle-harness-row">${inner}</div>`;
+const wrapRow = (inner) => `<div class="reticle-harness-row reticle-harness-row-wrap">${inner}</div>`;
+const said = (text) => `<span class="reticle-harness-said">${text}</span>`;
+const runRow = (lead, button) => row(`<span class="reticle-harness-lead">${lead}</span>${button}`);
+const STOP_BUTTON = `<button type="button" data-reticle-harness-stop class="reticle-harness-run reticle-harness-stop">${HARNESS_ROW_TEXT.STOP}</button>`;
+const link = (href, label) => `<a class="reticle-harness-link" href="${href}" target="_blank" rel="noopener noreferrer">${label}</a>`;
+export function creditsShort(credits) {
+    return credits === undefined || creditsSpent(credits) ? '' : creditsUsageText(credits);
+}
+function creditsUsedRow(credits, planUrl) {
+    if (credits.kind === undefined)
+        return row(`${said(HARNESS_ROW_TEXT.NO_CREDITS)}${link(planUrl, HARNESS_ROW_TEXT.MORE)}`);
+    const text = creditsUsedText(credits);
+    const action = text.action !== undefined
+        ? link(planUrl, `${text.action} ↗`)
+        : CreditKind.TRIAL === credits.kind
+            ? link(planUrl, HARNESS_ROW_TEXT.PLAN)
+            : '';
+    return wrapRow(`${said(text.said)}${action}`);
+}
+function footState(s) {
+    if (true === s.starting)
+        return HARNESS_ROW_TEXT.STARTING;
+    const gate = s.gate;
+    if (gate !== undefined && !gate.unlocked && gate.reason !== undefined)
+        return HARNESS_ROW_TEXT.footSetup(gate.percent);
+    const config = s.config;
+    if (config === undefined)
+        return HARNESS_ROW_TEXT.FOOT_LINK;
+    if (config.credits !== undefined && creditsSpent(config.credits))
+        return HARNESS_ROW_TEXT.FOOT_NO_CREDITS;
+    if (!config.harnessEntitled)
+        return HARNESS_ROW_TEXT.FOOT_NOT_ENTITLED;
+    if (false === config.providerReady)
+        return HARNESS_ROW_TEXT.FOOT_NO_PROVIDER;
+    const credits = config.credits;
+    return credits === undefined
+        ? ''
+        : HARNESS_ROW_TEXT.creditsLeft(Math.max(0, credits.limit - credits.used), credits.daysLeft);
+}
+function switchable(s) {
+    const config = s.config;
+    if (config === undefined)
+        return false;
+    if (s.gate !== undefined && !s.gate.unlocked && s.gate.reason !== undefined)
+        return false;
+    if (config.credits !== undefined && creditsSpent(config.credits))
+        return false;
+    return config.harnessEntitled && false !== config.providerReady;
+}
+export function harnessFootHtml(s) {
+    if (s.account === undefined || !s.account.signedIn)
+        return '';
+    if (s.drive !== undefined && s.canDrive)
+        return row(`<button type="button" ${HARNESS_OPEN_ATTR} class="reticle-harness-open"><span class="reticle-harness-name">${HARNESS_ROW_TEXT.NAME}</span><span class="reticle-harness-state">${esc(HARNESS_ROW_TEXT.driving(s.startedAs === undefined ? undefined : personaLabel(s.startedAs), s.drive.steps))}</span><span class="reticle-harness-chev" aria-hidden="true">›</span></button>${STOP_BUTTON}`);
+    const on = true === s.config?.harnessEnabled;
+    const credits = s.config?.credits;
+    const title = credits === undefined ? '' : ` title="${esc(creditsUsageText(credits))}"`;
+    const toggle = switchable(s)
+        ? `<button type="button" role="switch" ${HARNESS_TOGGLE_ATTR} class="reticle-harness-toggle" aria-checked="${String(on)}" aria-label="${HARNESS_ROW_TEXT.TOGGLE}"><span class="reticle-harness-knob"></span></button>`
+        : '';
+    return row(`<button type="button" ${HARNESS_OPEN_ATTR} class="reticle-harness-open"${title}><span class="reticle-harness-name">${HARNESS_ROW_TEXT.NAME}</span><span class="reticle-harness-state">${esc(footState(s))}</span><span class="reticle-harness-chev" aria-hidden="true">›</span></button>${toggle}`);
+}
+export function harnessRowHtml(s) {
+    if (s.account === undefined)
+        return '';
+    if (!s.account.signedIn)
+        return wrapRow(`${said(HARNESS_ROW_TEXT.SIGNED_OUT)}<button type="button" ${ACCOUNT_SIGNIN_ATTR} class="reticle-harness-link">${HARNESS_ROW_TEXT.SIGN_IN}</button>`);
+    if (s.drive !== undefined && s.canDrive)
+        return (runRow(said(HARNESS_ROW_TEXT.driving(s.startedAs === undefined ? undefined : personaLabel(s.startedAs), s.drive.steps)), STOP_BUTTON) + personaCustomHtml(s.pick, true));
+    const gate = s.gate;
+    if (gate !== undefined && !gate.unlocked && gate.reason !== undefined)
+        return wrapRow(`${said(esc(gate.reason))}${gate.prompt === undefined
+            ? ''
+            : `<button type="button" ${HARNESS_COPY_PROMPT_ATTR} class="reticle-harness-link">${HARNESS_ROW_TEXT.COPY_PROMPT}</button>`}`);
+    const config = s.config;
+    if (config === undefined)
+        return wrapRow(`${said(HARNESS_ROW_TEXT.UNLINKED)}<button type="button" ${HARNESS_LINK_ATTR} class="reticle-harness-run"${true === s.linking ? ' disabled' : ''}>${true === s.linking ? HARNESS_ROW_TEXT.LINKING : HARNESS_ROW_TEXT.LINK}</button>`);
+    if (config.credits !== undefined && creditsSpent(config.credits))
+        return creditsUsedRow(config.credits, s.planUrl);
+    if (!config.harnessEntitled)
+        return row(`${said(HARNESS_ROW_TEXT.NOT_ENTITLED)}${link(s.planUrl, HARNESS_ROW_TEXT.PLANS)}`);
+    if (false === config.providerReady)
+        return row(`${said(HARNESS_ROW_TEXT.NO_PROVIDER)}${link(s.setupUrl, HARNESS_ROW_TEXT.SET_UP)}`);
+    if (!config.harnessEnabled)
+        return row(`${said(gate === undefined ? HARNESS_ROW_TEXT.OFF : HARNESS_ROW_TEXT.canSwitchOn(gate.percent))}<button type="button" ${HARNESS_SWITCH_ON_ATTR} class="reticle-harness-run">${HARNESS_ROW_TEXT.TURN_ON}</button>`);
+    if (!s.canDrive)
+        return '';
+    const starting = true === s.starting;
+    return (runRow(personaPickHtml(s.pick, starting), `<button type="button" data-reticle-harness-run class="reticle-harness-run"${starting ? ' disabled' : ''}>${starting ? HARNESS_ROW_TEXT.STARTING : HARNESS_ROW_TEXT.RUN}</button>`) + personaCustomHtml(s.pick, starting));
+}
+export const HARNESS_ROW_CSS = `
+[data-reticle-chat-panel] .reticle-harness-spot{flex:none;display:flex;flex-direction:column;gap:4px;}
+[data-reticle-chat-panel] .reticle-harness-spot[hidden],[data-reticle-chat-panel] .reticle-harness-spot:empty{display:none;}
+[data-reticle-chat-panel] .reticle-harness-row{display:flex;align-items:center;gap:6px;min-height:30px;min-width:0;}
+[data-reticle-chat-panel] .reticle-harness-lead{flex:1;min-width:0;display:flex;align-items:center;gap:6px;}
+[data-reticle-chat-panel] .reticle-harness-said{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--reticle-hud-size-sm);color:var(--reticle-hud-text);}
+[data-reticle-chat-panel] .reticle-harness-row-wrap{flex-wrap:wrap;row-gap:2px;padding:4px 0;}
+[data-reticle-chat-panel] .reticle-harness-row-wrap .reticle-harness-said{flex:1 1 100%;white-space:normal;}
+[data-reticle-chat-panel] .reticle-harness-said code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;}
+[data-reticle-chat-panel] .reticle-harness-as{flex:none;font-size:var(--reticle-hud-size-xs);color:var(--reticle-hud-text-muted);}
+[data-reticle-chat-panel] .reticle-harness-persona{box-sizing:border-box;flex:1;min-width:0;width:100%;height:30px;font:inherit;font-size:var(--reticle-hud-size-sm);color:var(--reticle-hud-text);
+  background:var(--reticle-hud-ground);border:1px solid var(--reticle-hud-border-strong);border-radius:var(--reticle-hud-radius-sm);padding:0 var(--reticle-hud-space-2);}
+[data-reticle-chat-panel] .reticle-harness-spot > .reticle-harness-persona{flex:none;}
+[data-reticle-chat-panel] select.reticle-harness-persona{padding-right:2px;text-overflow:ellipsis;}
+[data-reticle-chat-panel] .reticle-harness-persona::placeholder{color:var(--reticle-hud-text-faint);}
+[data-reticle-chat-panel] .reticle-harness-persona:focus-visible{outline:2px solid var(--reticle-hud-brand);outline-offset:0;}
+[data-reticle-chat-panel] .reticle-harness-run{flex:none;box-sizing:border-box;height:30px;padding:0 12px;border:0;border-radius:var(--reticle-hud-radius-sm);cursor:pointer;white-space:nowrap;
+  background:var(--reticle-hud-brand);color:#160b02;font:inherit;font-size:var(--reticle-hud-size-sm);font-weight:700;}
+[data-reticle-chat-panel] .reticle-harness-run:hover{filter:brightness(1.08);}
+[data-reticle-chat-panel] .reticle-harness-run:focus-visible{outline:2px solid var(--reticle-hud-text);outline-offset:2px;}
+[data-reticle-chat-panel] .reticle-harness-stop{background:transparent;color:var(--reticle-hud-text);border:1px solid var(--reticle-hud-border-strong);}
+[data-reticle-chat-panel] .reticle-harness-link{flex:none;border:0;padding:0;background:none;cursor:pointer;font:inherit;color:var(--reticle-hud-brand);font-size:var(--reticle-hud-size-sm);font-weight:600;text-decoration:none;white-space:nowrap;}
+[data-reticle-chat-panel] .reticle-harness-link:hover{text-decoration:underline;}
+[data-reticle-chat-panel] .reticle-harness-open{flex:1;min-width:0;height:30px;display:flex;align-items:center;gap:8px;padding:0 var(--reticle-hud-space-2);border:0;border-radius:var(--reticle-hud-radius-sm);background:transparent;cursor:pointer;
+  text-align:left;white-space:nowrap;font:inherit;font-size:var(--reticle-hud-size-sm);color:var(--reticle-hud-text);}
+[data-reticle-chat-panel] .reticle-harness-name{flex:none;font-weight:600;}
+[data-reticle-chat-panel] .reticle-harness-state{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--reticle-hud-text-muted);font-size:11px;font-variant-numeric:tabular-nums;}
+[data-reticle-chat-panel] .reticle-harness-chev{flex:none;color:var(--reticle-hud-text-faint);}
+[data-reticle-chat-panel] .reticle-harness-toggle{flex:none;position:relative;width:30px;height:18px;padding:0;border:0;border-radius:9px;cursor:pointer;background:var(--reticle-hud-border-strong);transition:background .15s;}
+[data-reticle-chat-panel] .reticle-harness-toggle[aria-checked="true"]{background:var(--reticle-hud-brand);}
+[data-reticle-chat-panel] .reticle-harness-knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .15s;}
+[data-reticle-chat-panel] .reticle-harness-toggle[aria-checked="true"] .reticle-harness-knob{transform:translateX(12px);}
+[data-reticle-chat-panel] .reticle-harness-toggle:focus-visible{outline:2px solid var(--reticle-hud-text);outline-offset:2px;}
+[data-reticle-chat-panel] .reticle-harness-open:hover{background:var(--reticle-hud-hover);}
+[data-reticle-chat-panel] .reticle-harness-open:focus-visible{outline:2px solid var(--reticle-hud-brand);outline-offset:0;}
+[data-reticle-chat-panel] .reticle-harness-run:disabled,[data-reticle-chat-panel] .reticle-harness-persona:disabled{opacity:.6;cursor:default;}
+[data-reticle-chat-panel] .reticle-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
+[data-reticle-chat-panel] .reticle-foot-meta{margin:0;font-size:11px;line-height:1.3;color:var(--reticle-hud-text-muted);overflow-wrap:anywhere;}
+[data-reticle-chat-panel] .reticle-foot-meta:empty{display:none;}
+`;

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

@@ -0,0 +1,35 @@
+export declare const CUSTOM_PERSONA = "custom";
+export declare const PERSONAS: readonly [{
+    readonly id: "first-time";
+    readonly label: "First-time visitor";
+    readonly hint: "starts from the first page, reads the labels and follows the obvious path";
+}, {
+    readonly id: "power-user";
+    readonly label: "Returning power user";
+    readonly hint: "goes straight to the main task, takes shortcuts and repeats it quickly";
+}, {
+    readonly id: "phone";
+    readonly label: "On a phone, slow connection";
+    readonly hint: "small-screen habits: taps, waits on loading, retries when nothing seems to happen";
+}, {
+    readonly id: "keyboard";
+    readonly label: "Keyboard only";
+    readonly hint: "Tab, Enter and Escape only: focus order, traps and controls it cannot reach";
+}, {
+    readonly id: "careless";
+    readonly label: "Careless user (bad and unexpected input)";
+    readonly hint: "empty fields, wrong formats, very long text, double submits, going back mid-flow";
+}, {
+    readonly id: "admin";
+    readonly label: "Admin / settings";
+    readonly hint: "changes settings and permissions, then checks they stick after a reload";
+}];
+export declare const DEFAULT_PERSONA: "first-time";
+export declare const PERSONA_PICK_ID = "reticle-harness-persona-pick";
+export declare function personaText(pick: string, custom: string): string | undefined;
+export declare function personaLabel(pick: string): string;
+export declare function personaPickHtml(pick: string, disabled?: boolean): string;
+export declare function personaCustomHtml(pick: string, disabled?: boolean): string;
+export declare function knownPick(value: string | null | undefined): string | undefined;
+export declare function readPick(projectId: string | undefined): string;
+export declare function savePick(projectId: string | undefined, pick: string): void;