@reticlehq/browser 2.14.0 → 3.2.0

package/dist/presenter/presenter-offer.js

@@ -0,0 +1,87 @@
+export const OFFER_ATTR = 'data-reticle-offer';
+export const OFFER_SLOT_ATTR = 'data-reticle-offer-slot';
+export const OFFER_CLAIM_ATTR = 'data-reticle-offer-claim';
+export const OFFER_DISMISS_ATTR = 'data-reticle-offer-dismiss';
+export const OFFER_DISMISSED_KEY = 'reticle.harnessOffer.dismissed';
+export const OFFER_TEXT = {
+    HEADLINE: 'Reticle drives your app for you',
+    BODY: 'The harness explores your app, proves what works, and saves every journey as a test that replays for free. Built on Jev — no model API key needed.',
+    FREE: 'Free for 3 months',
+    CLAIM: 'Claim now',
+    DISMISS: 'Not now',
+    claimed: (days) => `Harness active — ${String(days)} days left`,
+    ending: (days) => 1 >= days
+        ? 'Harness free period ends today'
+        : `Harness free period ends in ${String(days)} days`,
+};
+const ENDING_SOON_DAYS = 14;
+export function offerDismissed(storage) {
+    try {
+        return '1' === storage?.getItem(OFFER_DISMISSED_KEY);
+    }
+    catch {
+        return false;
+    }
+}
+export function dismissOffer(storage) {
+    try {
+        storage?.setItem(OFFER_DISMISSED_KEY, '1');
+    }
+    catch {
+    }
+}
+const escape = (text) => text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+export function offerHtml(offer, dismissed) {
+    if (offer === undefined)
+        return '';
+    if (offer.claimed) {
+        const days = offer.daysRemaining;
+        if (days === undefined || 0 > days)
+            return '';
+        const text = ENDING_SOON_DAYS >= days ? OFFER_TEXT.ending(days) : OFFER_TEXT.claimed(days);
+        return `<div ${OFFER_ATTR} class="reticle-offer reticle-offer-claimed">${escape(text)}</div>`;
+    }
+    if (false === offer.eligible)
+        return '';
+    if (dismissed)
+        return '';
+    const url = offer.claimUrl;
+    if (url === undefined || 0 === url.length)
+        return '';
+    return `<div ${OFFER_ATTR} class="reticle-offer" role="note">
+      <div class="reticle-offer-head">
+        <span class="reticle-offer-title">${escape(OFFER_TEXT.HEADLINE)}</span>
+        <span class="reticle-offer-free">${escape(OFFER_TEXT.FREE)}</span>
+      </div>
+      <p class="reticle-offer-body">${escape(OFFER_TEXT.BODY)}</p>
+      <div class="reticle-offer-actions">
+        <a ${OFFER_CLAIM_ATTR} class="reticle-offer-claim" href="${escape(url)}" target="_blank" rel="noopener noreferrer">${escape(OFFER_TEXT.CLAIM)}</a>
+        <button type="button" ${OFFER_DISMISS_ATTR} class="reticle-offer-dismiss">${escape(OFFER_TEXT.DISMISS)}</button>
+      </div>
+    </div>`;
+}
+export function paintOffer(root, offer, storage) {
+    const slot = root.querySelector(`[${OFFER_SLOT_ATTR}]`);
+    if (!(slot instanceof HTMLElement))
+        return;
+    slot.innerHTML = offerHtml(offer, offerDismissed(storage));
+    const dismiss = slot.querySelector(`[${OFFER_DISMISS_ATTR}]`);
+    dismiss?.addEventListener('click', (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        dismissOffer(storage);
+        slot.innerHTML = '';
+    });
+}
+export const OFFER_CSS = `
+.reticle-offer{margin:8px 10px;padding:10px 12px;border:1px solid var(--reticle-line,#2a2f3a);border-radius:10px;background:var(--reticle-surface-inset,rgba(255,255,255,.03));}
+.reticle-offer-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
+.reticle-offer-title{font-weight:600;font-size:12px;}
+.reticle-offer-free{font-size:10px;padding:2px 6px;border-radius:999px;background:var(--reticle-accent,#4f7cff);color:#fff;white-space:nowrap;}
+.reticle-offer-body{margin:6px 0 8px;font-size:11px;line-height:1.45;opacity:.8;}
+.reticle-offer-actions{display:flex;align-items:center;gap:8px;}
+.reticle-offer-claim{font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;background:var(--reticle-accent,#4f7cff);color:#fff;text-decoration:none;}
+.reticle-offer-dismiss{font-size:11px;padding:4px 8px;border-radius:6px;background:none;border:0;color:inherit;opacity:.6;cursor:pointer;}
+.reticle-offer-dismiss:hover{opacity:1;}
+.reticle-offer-claimed{margin:6px 10px;font-size:10px;opacity:.6;}
+`;

package/dist/presenter/presenter-report-styles.js

@@ -1,4 +1,4 @@
-import { HUD_DROP_SHADOW } from './presenter-hud-chrome.js';
+import { HUD_DROP_SHADOW } from './chrome/presenter-hud-chrome.js';
 import { DOCK_ALIGN_ATTR, DOCK_ATTR, REPORT_ATTR, REPORT_PANEL_ATTR } from './presenter-config.js';
 const OVERLAY = 'data-reticle-overlay';
 export const REPORT_CSS = `
@@ -68,6 +68,10 @@ export const REPORT_CSS = `
   display:block;margin-top:2px;color:var(--reticle-c-active);opacity:.8;
   font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;cursor:help;}
 [${REPORT_PANEL_ATTR}] .reticle-report-defects-wrap{margin-top:14px;}
+/* The heading and its push control on one line, so the button reads as belonging to this section
+   rather than floating above the list. */
+[${REPORT_PANEL_ATTR}] .reticle-report-defects-head{
+  display:flex;align-items:center;justify-content:space-between;gap:8px;}
 [${REPORT_PANEL_ATTR}] .reticle-report-defects{
   display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;}
 /* A left rule rather than a card per row: ten cards in a 320px panel is a wall, and the rule keeps
@@ -123,4 +127,19 @@ export const REPORT_CSS = `
 [${REPORT_PANEL_ATTR}] .reticle-report-links a{
   color:var(--reticle-faint);font-size:10.5px;text-decoration:none;}
 [${REPORT_PANEL_ATTR}] .reticle-report-links a:hover{color:var(--reticle-fg);text-decoration:underline;}
+
+/* Who this record belongs to, and the push-now control. Tokens only — no literal colours. */
+[${REPORT_PANEL_ATTR}] .reticle-report-identity{
+  display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:10px 14px 0;min-height:0;}
+[${REPORT_PANEL_ATTR}] .reticle-report-identity:empty{display:none;}
+[${REPORT_PANEL_ATTR}] .reticle-sync-now{
+  display:inline-flex;align-items:center;justify-content:center;
+  border:none;background:transparent;color:var(--reticle-faint);cursor:pointer;line-height:0;padding:2px;}
+[${REPORT_PANEL_ATTR}] .reticle-sync-now:hover{color:var(--reticle-fg);}
+/* The one moment this control has an opinion: it says it is going, not that it has arrived. */
+[${REPORT_PANEL_ATTR}] .reticle-sync-now[data-syncing="1"]{
+  color:var(--reticle-c-active);animation:reticle-sync-spin 900ms linear infinite;}
+@keyframes reticle-sync-spin{to{transform:rotate(360deg);}}
+@media (prefers-reduced-motion:reduce){
+  [${REPORT_PANEL_ATTR}] .reticle-sync-now[data-syncing="1"]{animation:none;}}
 `;

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

@@ -1,8 +1,9 @@
 import { type AccountState, type ImpactScope, type ImpactSnapshot } from '@reticlehq/core';
 export declare function reportPanelHtml(): string;
-export declare function reportBodyHtml(scope: ImpactScope, dashboardUrl?: string, account?: AccountState): string;
+export declare function reportBodyHtml(scope: ImpactScope, dashboardUrl?: string, account?: AccountState, projectName?: string): string;
 interface ReportHost {
     onBeforeOpen?: () => void;
+    onSyncNow?: () => void;
 }
 export declare class PresenterReport {
     #private;

package/dist/presenter/presenter-report.js

@@ -1,8 +1,10 @@
 import { IMPACT_DEFECT_LIMIT, } from '@reticlehq/core';
-import { PresenterIcon, PRESENTER_ICON_SIZE, hiIconHtml } from './presenter-icons.js';
-import { HUD_SURFACE_CLASS } from './presenter-hud-chrome.js';
+import { PresenterIcon, PRESENTER_ICON_SIZE, hiIconHtml } from './icons/presenter-icons.js';
+import { HUD_SURFACE_CLASS } from './chrome/presenter-hud-chrome.js';
+import { esc, isSafeDashboardUrl } from './chrome/presenter-safe-html.js';
+import { ACCOUNT_SIGNIN_ATTR, ACCOUNT_TEXT, SYNC_BTN_ATTR, accountControlHtml, syncButtonHtml, } from './presenter-account.js';
 import { REPORT_PANEL_ATTR, REPORT_ATTR, REPORT_CLOSE_ATTR } from './presenter-config.js';
-import { REPORT_LINKS, REPORT_TEXT, buildLinkedInShareUrl, buildReferralText, buildShareText, buildXShareUrl, compactDuration, compactNumber, } from './presenter-report-copy.js';
+import { REPORT_LINKS, REPORT_TEXT, buildLinkedInShareUrl, buildReferralText, buildShareText, buildXShareUrl, compactDuration, compactNumber, } from './chrome/presenter-report-copy.js';
 const SCOPE_ATTR = 'data-reticle-report-scope';
 const SHARE_X_ATTR = 'data-reticle-share-x';
 const SHARE_IN_ATTR = 'data-reticle-share-in';
@@ -55,22 +57,6 @@ function chart(scope) {
         .join('');
     return `<div class="reticle-report-chart-wrap"><span class="reticle-report-section">${REPORT_TEXT.CHART}</span><div class="reticle-report-chart">${bars}</div></div>`;
 }
-function esc(value) {
-    return value
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;');
-}
-function isSafeDashboardUrl(raw) {
-    try {
-        const scheme = new URL(raw).protocol;
-        return 'https:' === scheme || 'http:' === scheme;
-    }
-    catch {
-        return false;
-    }
-}
 function defects(scope, dashboardUrl) {
     const list = (scope.defects ?? []).slice(0, IMPACT_DEFECT_LIMIT);
     if (0 === list.length)
@@ -93,9 +79,10 @@ function defects(scope, dashboardUrl) {
     const more = !linked
         ? ''
         : `<a class="reticle-report-defects-more" href="${esc(dashboardUrl)}" target="_blank" rel="noreferrer noopener">${REPORT_TEXT.DEFECTS_MORE}${scope.counts.failed > list.length ? ` (${String(scope.counts.failed)})` : ''}</a>`;
-    return `<div class="reticle-report-defects-wrap"><span class="reticle-report-section">${REPORT_TEXT.DEFECTS}</span><ul class="reticle-report-defects">${rows}</ul>${more}</div>`;
+    const sync = syncButtonHtml(dashboardUrl);
+    return `<div class="reticle-report-defects-wrap"><div class="reticle-report-defects-head"><span class="reticle-report-section">${REPORT_TEXT.DEFECTS}</span>${sync}</div><ul class="reticle-report-defects">${rows}</ul>${more}</div>`;
 }
-export function reportBodyHtml(scope, dashboardUrl, account) {
+export function reportBodyHtml(scope, dashboardUrl, account, projectName) {
     const c = scope.counts;
     if (0 === c.calls)
         return `<p class="reticle-report-empty">${REPORT_TEXT.EMPTY}</p>`;
@@ -118,7 +105,8 @@ export function reportBodyHtml(scope, dashboardUrl, account) {
         card(compactNumber(scope.savings.tokens.value), REPORT_TEXT.SAVED_TOKENS, scope.savings.tokens.basis),
         card(compactDuration(scope.savings.minutes.value * 60_000), REPORT_TEXT.SAVED_MINUTES, scope.savings.minutes.basis),
     ].join('');
-    return `${streak}${hero}${verdicts}<div class="reticle-report-grid">${cards}</div>${defects(scope, dashboardUrl)}${chart(scope)}${localOnly(scope, dashboardUrl, account)}`;
+    const identity = `<div class="reticle-report-identity">${accountControlHtml(account, { dashboardUrl, projectName, verdicts: c.verdicts, defects: c.failed })}${syncButtonHtml(dashboardUrl)}</div>`;
+    return `${identity}${streak}${hero}${verdicts}<div class="reticle-report-grid">${cards}</div>${defects(scope, dashboardUrl)}${chart(scope)}${localOnly(scope, dashboardUrl, account)}`;
 }
 function localOnly(scope, dashboardUrl, account) {
     if (dashboardUrl !== undefined)
@@ -132,6 +120,8 @@ function localOnly(scope, dashboardUrl, account) {
         : [REPORT_TEXT.LOCAL_ONLY, REPORT_TEXT.LOCAL_ONLY_ACTION, REPORT_TEXT.LOCAL_ONLY_TAIL];
     return `<p class="reticle-report-local-only">${lead} <code>${action}</code> ${tail}</p>`;
 }
+const SYNC_SPIN_MS = 1_200;
+const SYNCING_ATTR = 'data-syncing';
 export class PresenterReport {
     #panel;
     #body;
@@ -175,6 +165,24 @@ export class PresenterReport {
             e.stopPropagation();
             void this.#copy(buildReferralText(), e.currentTarget);
         });
+        root.addEventListener('click', (e) => {
+            const target = e.target;
+            if (!(target instanceof Element))
+                return;
+            const signin = target.closest(`[${ACCOUNT_SIGNIN_ATTR}]`);
+            if (signin !== null) {
+                e.stopPropagation();
+                void this.#copy(ACCOUNT_TEXT.SIGNIN_COMMAND, signin);
+                return;
+            }
+            const sync = target.closest(`[${SYNC_BTN_ATTR}]`);
+            if (sync !== null) {
+                e.stopPropagation();
+                this.#host.onSyncNow?.();
+                sync.setAttribute(SYNCING_ATTR, '1');
+                setTimeout(() => sync.removeAttribute(SYNCING_ATTR), SYNC_SPIN_MS);
+            }
+        });
     }
     setSnapshot(snapshot) {
         this.#snapshot = snapshot;
@@ -229,7 +237,7 @@ export class PresenterReport {
         this.#body.innerHTML =
             scope === undefined
                 ? `<p class="reticle-report-empty">${REPORT_TEXT.EMPTY}</p>`
-                : reportBodyHtml(scope, this.#snapshot?.dashboardUrl, this.#snapshot?.account);
+                : reportBodyHtml(scope, this.#snapshot?.dashboardUrl, this.#snapshot?.account, this.#snapshot?.projectName);
     }
     #openShare(url) {
         window.open(url, '_blank', 'noopener,noreferrer');

package/dist/presenter/presenter-run-state.d.ts

@@ -1,5 +1,5 @@
 import { SessionState } from '@reticlehq/core';
-import { type LogKind, type LogResult } from './presenter-log.js';
+import { type LogKind, type LogResult } from './chrome/presenter-log.js';
 import { type Capabilities } from '../registry/capabilities.js';
 export interface PresenterRunState {
     session: string;

package/dist/presenter/presenter-run-state.js

@@ -1,5 +1,5 @@
 import { SessionState } from '@reticlehq/core';
-import { LOG_KIND, LOG_RESULT } from './presenter-log.js';
+import { LOG_KIND, LOG_RESULT } from './chrome/presenter-log.js';
 import { getCapabilities } from '../registry/capabilities.js';
 export function buildRunState(input) {
     const start = input.startMs ?? input.now;

package/dist/presenter/presenter-settings-styles.js

@@ -1,5 +1,5 @@
 import { SETTINGS_PANEL_ATTR, SETTINGS_ATTR, DOCK_ATTR, DOCK_ALIGN_ATTR, SETTINGS_PLACEMENT_ATTR, } from './presenter-config.js';
-import { HUD_DROP_SHADOW, HUD_SURFACE_CLASS, HUD_SURFACE_PAINT } from './presenter-hud-chrome.js';
+import { HUD_DROP_SHADOW, HUD_SURFACE_CLASS, HUD_SURFACE_PAINT, } from './chrome/presenter-hud-chrome.js';
 export const SETTINGS_CSS = `
 [${'data-reticle-overlay'}][${SETTINGS_ATTR}="1"] [${'data-reticle-chat-panel'}]{
   display:none !important;visibility:hidden !important;pointer-events:none !important;}
@@ -149,4 +149,5 @@ export const SETTINGS_CSS = `
   display:none;pointer-events:none;}
 [${'data-reticle-overlay'}][data-reticle-hidden="1"] [${DOCK_ATTR}],
 [${'data-reticle-overlay'}][data-reticle-hidden="1"] [${SETTINGS_PANEL_ATTR}]{display:none !important;}
+
 `;

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

@@ -1,4 +1,7 @@
+import type { HarnessConfig } from '@reticlehq/core';
 import { SETTINGS_CSS } from './presenter-settings-styles.js';
+import type { AccountState } from '@reticlehq/core';
+import { type AccountDetails } from './presenter-account.js';
 export { SETTINGS_CSS };
 export declare const OutputDetail: {
     readonly MINIMAL: "minimal";
@@ -38,9 +41,13 @@ export interface PresenterSettings {
 }
 export declare function getPresenterSettings(): PresenterSettings;
 export declare function loadPresenterSettings(): PresenterSettings;
+export declare const SETTINGS_ACCOUNT_ATTR = "data-reticle-settings-account";
+export declare function paintHarnessRow(root: ParentNode, config: HarnessConfig | undefined): void;
+export declare function paintSettingsAccount(root: HTMLElement, account: AccountState | undefined, dashboardUrl: string | undefined, details?: AccountDetails): void;
 export declare function settingsPanelHtml(): string;
 export interface SettingsHost {
     onHideUntilRestart?: () => void;
+    onHarness?: (enabled: boolean) => void;
     onSettingsChange?: (settings: PresenterSettings) => void;
     onBeforeOpen?: () => void;
 }
@@ -52,6 +59,7 @@ export declare class PresenterSettingsPanel {
     constructor(host?: SettingsHost);
     contains(node: Node): boolean;
     mount(root: HTMLElement): void;
+    paintHarness(config: HarnessConfig | undefined): void;
     teardown(): void;
     isOpen(): boolean;
     open(): void;

package/dist/presenter/presenter-settings.js

@@ -1,9 +1,10 @@
 import { SETTINGS_ATTR, SETTINGS_BTN_ATTR, SETTINGS_PANEL_ATTR, SETTINGS_CLOSE_ATTR, SETTING_KEY_ATTR, SETTINGS_STORAGE_KEY, AMBIENT_GLOW_ATTR, BLOCK_ATTR, HIDDEN_UNTIL_RESTART_ATTR, LOG_TIMESTAMPS_ATTR, REDUCE_MOTION_ATTR, DOCK_ATTR, MCP_DOCS_URL, } from './presenter-config.js';
-import { PresenterIcon, PRESENTER_ICON_SIZE, setHiIcon, hiIconHtml } from './presenter-icons.js';
-import { HUD_SURFACE_CLASS } from './presenter-hud-chrome.js';
+import { PresenterIcon, PRESENTER_ICON_SIZE, setHiIcon, hiIconHtml, } from './icons/presenter-icons.js';
+import { HUD_SURFACE_CLASS } from './chrome/presenter-hud-chrome.js';
 import { resetHudDockPosition } from './presenter-drag.js';
 import { findDock, scheduleSyncDockLayout } from './presenter-dock-layout.js';
 import { SETTINGS_CSS } from './presenter-settings-styles.js';
+import { accountControlHtml } from './presenter-account.js';
 export { SETTINGS_CSS };
 export const OutputDetail = {
     MINIMAL: 'minimal',
@@ -146,12 +147,47 @@ function settingsCheckRow(key, label, checked) {
     <span class="reticle-settings-check-label">${label}</span>
   </label>`;
 }
+export const SETTINGS_ACCOUNT_ATTR = 'data-reticle-settings-account';
+const SETTINGS_ACCOUNT_ROW_ATTR = 'data-reticle-settings-account-row';
+const SETTINGS_HARNESS_ROW_ATTR = 'data-reticle-settings-harness-row';
+const HARNESS_HELP = 'Let Reticle drive this app by itself to find defects. Set here or in your dashboard — both write to the same place.';
+const HARNESS_LOCKED_HELP = 'Autonomous driving runs on Reticle’s model spend, so it needs a plan or the free period. Claim it from the chat panel.';
+const ACCOUNT_HELP = 'Whether this machine is signed in to a Reticle workspace. Signing in happens in your terminal.';
+export function paintHarnessRow(root, config) {
+    const row = root.querySelector(`[${SETTINGS_HARNESS_ROW_ATTR}]`);
+    if (!(row instanceof HTMLElement))
+        return;
+    if (config === undefined) {
+        row.hidden = true;
+        return;
+    }
+    row.hidden = false;
+    const toggle = row.querySelector(`[${SETTING_KEY_ATTR}="harnessEnabled"]`);
+    if (!(toggle instanceof HTMLElement))
+        return;
+    const usable = config.harnessEntitled;
+    toggle.setAttribute('aria-checked', config.harnessEnabled && usable ? 'true' : 'false');
+    toggle.setAttribute('aria-disabled', usable ? 'false' : 'true');
+    const help = row.querySelector('[data-reticle-help]');
+    if (help instanceof HTMLElement)
+        help.title = usable ? HARNESS_HELP : HARNESS_LOCKED_HELP;
+}
+export function paintSettingsAccount(root, account, dashboardUrl, details = {}) {
+    const row = root.querySelector(`[${SETTINGS_ACCOUNT_ROW_ATTR}]`);
+    const slot = root.querySelector(`[${SETTINGS_ACCOUNT_ATTR}]`);
+    if (!(row instanceof HTMLElement) || !(slot instanceof HTMLElement))
+        return;
+    const html = accountControlHtml(account, { ...details, dashboardUrl }, true);
+    row.hidden = 0 === html.length;
+    slot.innerHTML = html;
+}
 export function settingsPanelHtml() {
     const close = hiIconHtml(PresenterIcon.REMOVE, PRESENTER_ICON_SIZE.MIN);
     const caret = hiIconHtml(PresenterIcon.CARET_RIGHT, PRESENTER_ICON_SIZE.HELP);
     const outputHelp = 'How much detail is included when you copy or export the run';
     const reactHelp = 'Include React component paths in exported run state when available';
     const hideHelp = 'Hide the Reticle HUD until you reload the page';
+    const harnessHelp = HARNESS_HELP;
     const tallyHelp = 'Show the pass/fail score pill in the toolbar';
     const timestampsHelp = 'Show relative timestamps on each activity-log row';
     const autoChatHelp = 'On by default. Opens the agent chat by itself when a session starts and when you expand the HUD. Off leaves the toolbar bare until you ask for the chat.';
@@ -178,7 +214,13 @@ export function settingsPanelHtml() {
         ${settingsCheckRow('blockPageInteractions', 'Block page interactions', true)}
         ${settingsCheckRow('clearOnCopy', 'Clear on copy/send', false)}
         ${settingsToggleRow('hideUntilRestart', 'Hide Until Restart', hideHelp)}
+        ${settingsToggleRow('harnessEnabled', 'Autonomous driving', harnessHelp, `${SETTINGS_HARNESS_ROW_ATTR} hidden`)}
         ${settingsToggleRow('reduceMotion', 'Reduce motion', motionHelp)}
+        <div class="reticle-settings-section">Account</div>
+        <div class="reticle-settings-row" ${SETTINGS_ACCOUNT_ROW_ATTR} hidden>
+          ${settingsLabel('Workspace', ACCOUNT_HELP)}
+          <span ${SETTINGS_ACCOUNT_ATTR}></span>
+        </div>
         <div class="reticle-settings-section">Status theme</div>
         ${settingsToggleRow('ambientGlow', 'Page glow', glowHelp)}
         <div class="reticle-settings-themes" data-reticle-settings-themes></div>
@@ -268,7 +310,14 @@ export class PresenterSettingsPanel {
                 if (!(toggle instanceof HTMLElement))
                     return;
                 const key = toggle.getAttribute(SETTING_KEY_ATTR);
-                if ('reactComponents' === key) {
+                if ('harnessEnabled' === key) {
+                    if ('true' === toggle.getAttribute('aria-disabled'))
+                        return;
+                    const next = 'true' !== toggle.getAttribute('aria-checked');
+                    toggle.setAttribute('aria-checked', next ? 'true' : 'false');
+                    this.#host.onHarness?.(next);
+                }
+                else if ('reactComponents' === key) {
                     this.#update({ reactComponents: !activeSettings.reactComponents });
                 }
                 else if ('hideUntilRestart' === key) {
@@ -350,6 +399,12 @@ export class PresenterSettingsPanel {
         applyPresenterSettings(root, activeSettings);
         this.#host.onSettingsChange?.(activeSettings);
     }
+    paintHarness(config) {
+        const root = this.#panel;
+        if (root === undefined)
+            return;
+        paintHarnessRow(root, config);
+    }
     teardown() {
         this.#root = undefined;
         this.#panel = undefined;

package/dist/presenter/presenter-shell-styles.js

@@ -1,7 +1,7 @@
-import { LOG_TIME_ATTR } from './presenter-log.js';
+import { LOG_TIME_ATTR } from './chrome/presenter-log.js';
 import { Z_HUD_TOOLTIP } from './presenter-config.js';
 import { CHAT_ATTR, CHAT_PILL_ATTR, CHAT_PLACEMENT_ATTR, DOCK_ALIGN_ATTR, DOCK_ATTR, LOG_TIMESTAMPS_ATTR, MIN_ATTR, REDUCE_MOTION_ATTR, LIVENESS_ATTR, } from './presenter-config.js';
-import { HUD_DROP_SHADOW, HUD_SURFACE_FILL } from './presenter-hud-chrome.js';
+import { HUD_DROP_SHADOW, HUD_SURFACE_FILL } from './chrome/presenter-hud-chrome.js';
 const OVERLAY = 'data-reticle-overlay';
 const HUD = 'data-reticle-hud';
 const CHAT_PANEL = 'data-reticle-chat-panel';
@@ -83,11 +83,23 @@ export const SHELL_CSS = `
   right:auto;left:0;}
 [${OVERLAY}][${CHAT_ATTR}="1"] [${CHAT_PANEL}]{
   display:flex;pointer-events:auto;}
+/**
+ * Idle, and not blocking the page: the card is not in use.
+ *
+ * The log fills the panel and sets pointer-events itself, so a click meant for a control sitting
+ * under the card landed on an empty transcript. Playwright named that div. The card passes the
+ * event through. The buttons stay clickable, which is the chrome a person still needs (#992).
+ */
+[${OVERLAY}][data-reticle-mode="idle"][data-reticle-block="0"] [${CHAT_PANEL}],
+[${OVERLAY}][data-reticle-mode="idle"][data-reticle-block="0"] [${CHAT_PANEL}] [data-reticle-log]{
+  pointer-events:none;}
+[${OVERLAY}][data-reticle-mode="idle"][data-reticle-block="0"] [${CHAT_PANEL}] :is(button,a,input,select,textarea){
+  pointer-events:auto;}
 /**
  * Minimising the chat leaves a CAPSULE, not a hole: the same glass, the same state dot, the last
  * thing the agent did - sitting directly above the toolbar capsule and reopening the panel when
- * clicked. Minimise used to leave the toolbar alone above an empty gap, so a minimised session
- * looked identical to no session at all.
+ * clicked. Leaving the toolbar alone above an empty gap would make a minimised session look
+ * identical to no session at all.
  */
 [${CHAT_PILL_ATTR}]{
   display:none;position:absolute;right:0;left:auto;bottom:calc(100% + 8px);z-index:5;
@@ -115,6 +127,13 @@ export const SHELL_CSS = `
   flex:none;display:flex;align-items:center;gap:8px;padding:11px 44px 9px 14px;
   border-bottom:1px solid rgba(255,255,255,.06);}
 [${CHAT_PANEL}] .reticle-chat-brand{display:inline-flex;align-items:center;gap:7px;color:var(--reticle-fg);}
+/* The account capsule lives in the header, not the toolbar. The toolbar row is already 13px over its
+   own width, so a 20px avatar there pushed the close button outside the panel. The header has the
+   space, is visible under exactly the same condition, and is where an account avatar belongs anyway.
+   margin-left:auto right-aligns it; the head reserves 44px of right padding for the caret above it,
+   so the two never overlap. The :empty rule keeps the gap closed when no account state was sent. */
+[${CHAT_PANEL}] .reticle-head-account{margin-left:auto;display:inline-flex;align-items:center;}
+[${CHAT_PANEL}] .reticle-head-account:empty{display:none;}
 [${CHAT_PANEL}] .reticle-chat-brand .reticle-mark{height:14px;width:auto;}
 [${CHAT_PANEL}] .reticle-chat-brandname{font-size:12.5px;font-weight:600;letter-spacing:.01em;}
 /* No state word here: the activity strip immediately below already says "idle · 21s", and the
@@ -234,6 +253,7 @@ export const SHELL_CSS = `
   padding:2px;border-radius:999px;background:rgba(0,0,0,.2);}
 [${HUD}] .reticle-toolbar-chrome{display:inline-flex;align-items:center;gap:2px;flex:none;}
 [${HUD}] .reticle-tb-sep{width:1px;height:14px;background:rgba(255,255,255,.12);margin:0 4px;flex:none;align-self:center;}
+
 [${HUD}] .reticle-tb-wrap{position:relative;display:flex;align-items:center;justify-content:center;overflow:visible;}
 [${HUD}] .reticle-tb-btn{
   flex:none;display:inline-flex;align-items:center;justify-content:center;
@@ -259,10 +279,9 @@ export const SHELL_CSS = `
 [${HUD}] .reticle-hi-toggle .reticle-hi-icon--solid svg{
   transform:scale(1.12);transform-origin:center;}
 /*
- * Active toggles keep the OUTLINE icon. They used to swap to the solid heroicon, which is a filled
- * glyph next to 1.5px strokes everywhere else, so the pressed button read as a heavier typeface
- * rather than as a state. The state is already carried by accent colour and a background above,
- * which is enough and does not change the icon's weight.
+ * Active toggles keep the OUTLINE icon. The solid heroicon is a filled glyph next to 1.5px strokes
+ * everywhere else, so a pressed button reads as a heavier typeface rather than as a state. Accent
+ * colour and the background above already carry the state without changing the icon's weight.
  */
 [${HUD}] .reticle-tb-btn--toggle[data-active="1"] .reticle-hi-icon--outline{opacity:1;}
 [${HUD}] .reticle-tb-btn--toggle .reticle-hi-icon--solid{opacity:0;}
@@ -274,10 +293,10 @@ export const SHELL_CSS = `
 /**
  * The toolbar is a FIXED number of slots.
  *
- * Copy and Export appear when a session ends, and they used to be added to a bar that was already
- * full - eleven icons in a pill sized for nine, so the last one rendered outside the rounded box.
- * They take the two slots that Pause and End vacate: neither can do anything to a session that has
- * already ended, so the bar swaps two dead controls for two live ones and never changes width.
+ * Copy and Export appear when a session ends, and the bar is already full - eleven icons in a pill
+ * sized for nine renders the last one outside the rounded box. They take the two slots Pause and End
+ * vacate: neither can do anything to an ended session, so the bar swaps two dead controls for two
+ * live ones and never changes width.
  */
 [${HUD}] .reticle-tb-btn--export{display:none;}
 [${OVERLAY}][${STATE}="ended"] [${HUD}] .reticle-tb-btn--export{display:inline-flex;}
@@ -307,9 +326,8 @@ export const SHELL_CSS = `
  * The mode, ON the status row rather than under it.
  *
  * The action text beside it is flex:1, so this claims the right edge of the row and takes its space
- * from the elided action text. Nothing above or below moves: the panel used to grow and shrink by
- * the height of this pill on every single tool call, which is what made one status line look like a
- * second UI appearing and leaving.
+ * from the elided action text. Nothing above or below moves: growing and shrinking by the height of
+ * this pill on every tool call makes one status line look like a second UI appearing and leaving.
  */
 [${DOCK_ATTR}] .reticle-chip{display:none;flex:none;align-items:center;gap:4px;font-size:8px;font-weight:600;letter-spacing:.06em;
   height:16px;padding:0 7px;line-height:1;border-radius:999px;text-transform:uppercase;

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

@@ -1,4 +1,8 @@
+import type { HarnessConfig } from '@reticlehq/core';
 import { PresenterReport } from './presenter-report.js';
+import type { AccountState } from '@reticlehq/core';
+import { type AccountDetails } from './presenter-account.js';
+import { type OfferState } from './presenter-offer.js';
 import { type SettingsHost } from './presenter-settings.js';
 interface HudShellCallbacks {
     onChatOpen?: () => void;
@@ -6,10 +10,14 @@ interface HudShellCallbacks {
     onExpand?: () => void;
     onAnnotateToggle?: (on: boolean) => void;
     onCollapse?: () => void;
+    onSyncNow?: () => void;
     settings?: SettingsHost;
 }
 export declare class HudShell {
     #private;
+    paintHarness(config: HarnessConfig | undefined): void;
+    paintAccount(account: AccountState | undefined, dashboardUrl: string | undefined, details?: AccountDetails): void;
+    paintOffer(offer: OfferState | undefined): void;
     constructor(callbacks?: HudShellCallbacks);
     static dockHtml(actStripHtml: string, bannerHtml: string, logAttr: string, flowsHtml: string, footHtml: string): string;
     get report(): PresenterReport;

package/dist/presenter/presenter-shell.js

@@ -1,11 +1,15 @@
 import { PresenterReport, reportPanelHtml } from './presenter-report.js';
+import { paintToolbarAccount, TOOLBAR_ACCOUNT_ATTR } from './presenter-workspace.js';
+import { mountAccountControl } from './presenter-account.js';
+import { paintSettingsAccount } from './presenter-settings.js';
 import { CHAT_MIN_ATTR, CHAT_PILL_ATTR, REPORT_ATTR, REPORT_BTN_ATTR, ANNOTATE_BTN_ATTR, CHAT_ATTR, CHAT_TOGGLE_ATTR, CHAT_PANEL_ATTR, DOCK_ATTR, FAB_ATTR, MIN_ATTR, SETTINGS_ATTR, SETTINGS_BTN_ATTR, } from './presenter-config.js';
-import { BRAND_NAME, FAB_TOGGLE_HTML, MARK_SVG } from './presenter-brand.js';
-import { settleLogAtLatest } from './presenter-log.js';
+import { OFFER_SLOT_ATTR, paintOffer } from './presenter-offer.js';
+import { BRAND_NAME, FAB_TOGGLE_HTML, MARK_SVG } from './chrome/presenter-brand.js';
+import { settleLogAtLatest } from './chrome/presenter-log.js';
 import { installHudDragHandles, installHudPositionGuards } from './presenter-drag.js';
 import { scheduleSyncDockLayout } from './presenter-dock-layout.js';
-import { hiIconHtml, hiToggleIconHtml, PRESENTER_ICON_SIZE, PresenterIcon, } from './presenter-icons.js';
-import { HUD_SURFACE_CLASS, HUD_LOG_WELL_CLASS } from './presenter-hud-chrome.js';
+import { hiIconHtml, hiToggleIconHtml, PRESENTER_ICON_SIZE, PresenterIcon, } from './icons/presenter-icons.js';
+import { HUD_SURFACE_CLASS, HUD_LOG_WELL_CLASS } from './chrome/presenter-hud-chrome.js';
 import { CONTROLS_TOOLBAR_HTML } from './presenter-controls.js';
 import { PresenterSettingsPanel, settingsPanelHtml, } from './presenter-settings.js';
 const DRAG_HANDLE_CLASS = 'reticle-toolbar-drag';
@@ -37,8 +41,36 @@ export class HudShell {
             this.#settings.close();
             this.closeChat();
         },
+        onSyncNow: () => this.#callbacks.onSyncNow?.(),
     });
     #callbacks;
+    #pushedAccount;
+    #accountTeardown;
+    paintHarness(config) {
+        this.#settings.paintHarness(config);
+    }
+    paintAccount(account, dashboardUrl, details = {}) {
+        this.#pushedAccount = { account, dashboardUrl, details };
+        if (this.#root === undefined)
+            return;
+        paintToolbarAccount(this.#root, account, dashboardUrl, details);
+        paintSettingsAccount(this.#root, account, dashboardUrl, details);
+    }
+    #pushedOffer;
+    paintOffer(offer) {
+        this.#pushedOffer = offer;
+        if (this.#root === undefined)
+            return;
+        paintOffer(this.#root, offer, this.#storage());
+    }
+    #storage() {
+        try {
+            return globalThis.localStorage;
+        }
+        catch {
+            return undefined;
+        }
+    }
     constructor(callbacks = {}) {
         this.#callbacks = callbacks;
         this.#settings = new PresenterSettingsPanel({
@@ -59,11 +91,13 @@ export class HudShell {
       <div ${CHAT_PANEL_ATTR} class="reticle-chat-panel ${HUD_SURFACE_CLASS}" role="region" aria-label="Reticle session" aria-hidden="true">
         <div class="reticle-chat-head">
           <span class="reticle-chat-brand">${MARK_SVG}<span class="reticle-chat-brandname">${BRAND_NAME}</span></span>
+          <span ${TOOLBAR_ACCOUNT_ATTR} class="reticle-head-account"></span>
         </div>
         <button type="button" ${CHAT_MIN_ATTR} class="reticle-chat-min" title="${CHAT_MIN_LABEL}" aria-label="${CHAT_MIN_LABEL}">${hiIconHtml(PresenterIcon.CARET_DOWN, PRESENTER_ICON_SIZE.TOOLBAR)}</button>
         ${actStripHtml}
         <span class="reticle-tally" data-reticle-tally hidden></span>
         ${bannerHtml}
+        <div ${OFFER_SLOT_ATTR}></div>
         <div class="${HUD_LOG_WELL_CLASS}"><div ${logAttr}></div></div>
         ${flowsHtml}
         ${footHtml}
@@ -209,8 +243,17 @@ export class HudShell {
         }
         document.addEventListener('pointerdown', this.#onDocPointerDown, { signal });
         document.addEventListener('keydown', this.#onKeyDown, { signal });
+        this.#accountTeardown = mountAccountControl(root);
+        if (this.#pushedAccount !== undefined) {
+            const pushed = this.#pushedAccount;
+            this.paintAccount(pushed.account, pushed.dashboardUrl, pushed.details);
+        }
+        if (this.#pushedOffer !== undefined)
+            this.paintOffer(this.#pushedOffer);
     }
     teardown() {
+        this.#accountTeardown?.();
+        this.#accountTeardown = undefined;
         this.#listeners?.abort();
         this.#listeners = undefined;
         this.#toggleSync?.disconnect();

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

@@ -1,2 +1,3 @@
-export declare const Z_OVERLAY = 2147483600;
+import { Z_OVERLAY } from './chrome/layers.js';
+export { Z_OVERLAY };
 export declare const PRESENTER_CSS: string;

package/dist/presenter/presenter-styles.js

@@ -1,10 +1,13 @@
-import { LOG_CSS } from './presenter-log.js';
+import { Z_OVERLAY } from './chrome/layers.js';
+import { LOG_CSS } from './chrome/presenter-log.js';
 import { CONTROLS_CSS } from './presenter-controls.js';
 import { SHELL_CSS } from './presenter-shell-styles.js';
 import { SETTINGS_CSS } from './presenter-settings-styles.js';
-import { HUD_CHROME_CSS, HUD_LOG_WELL_CSS } from './presenter-hud-chrome.js';
+import { ACCOUNT_CSS } from './presenter-account-styles.js';
+import { HUD_CHROME_CSS, HUD_LOG_WELL_CSS } from './chrome/presenter-hud-chrome.js';
 import { REPORT_CSS } from './presenter-report-styles.js';
-export const Z_OVERLAY = 2147483600;
+import { OFFER_CSS } from './presenter-offer.js';
+export { Z_OVERLAY };
 export const PRESENTER_CSS = `
 [data-reticle-overlay]{position:fixed;inset:0;pointer-events:none;z-index:${String(Z_OVERLAY)};}
 /**
@@ -60,5 +63,7 @@ ${HUD_LOG_WELL_CSS}
 ${SHELL_CSS}
 ${SETTINGS_CSS}
 ${REPORT_CSS}
+${ACCOUNT_CSS}
+${OFFER_CSS}
 ${LOG_CSS}
 ${CONTROLS_CSS}`;