@reticlehq/browser 3.5.0 → 3.7.0

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

@@ -1,5 +1,7 @@
 import type { HarnessConfig } from '@reticlehq/core';
+import type { HarnessGateView } from './presenter-harness-row.js';
 import { SETTINGS_CSS } from './presenter-settings-styles.js';
+import { type Credits } from '@reticlehq/core/hud';
 import type { AccountState } from '@reticlehq/core';
 import { type AccountDetails } from './presenter-account.js';
 export { SETTINGS_CSS };
@@ -41,11 +43,15 @@ 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 const HARNESS_LOCKED_HELP = "The Harness is not available to this workspace right now: see Plan in your Reticle dashboard.";
+export declare function creditsLeft(credits: Credits | undefined): string;
+export declare function paintHarnessRow(root: ParentNode, config: HarnessConfig | undefined, gate?: HarnessGateView): void;
 export declare function paintSettingsAccount(root: HTMLElement, account: AccountState | undefined, dashboardUrl: string | undefined, details?: AccountDetails): void;
+export declare function paintSdkVersion(root: ParentNode, version: string | undefined): void;
 export declare function settingsPanelHtml(): string;
 export interface SettingsHost {
     onHideUntilRestart?: () => void;
+    onKill?: () => void;
     onHarness?: (enabled: boolean) => void;
     onSettingsChange?: (settings: PresenterSettings) => void;
     onBeforeOpen?: () => void;
@@ -57,7 +63,7 @@ export declare class PresenterSettingsPanel {
     constructor(host?: SettingsHost);
     contains(node: Node): boolean;
     mount(root: HTMLElement): void;
-    paintHarness(config: HarnessConfig | undefined): void;
+    paintHarness(config: HarnessConfig | undefined, gate?: HarnessGateView): void;
     teardown(): void;
     isOpen(): boolean;
     open(): void;

package/dist/presenter/presenter-settings.js

@@ -4,8 +4,9 @@ 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 { creditsLeftText, creditsSpent, creditsUsedText } from '@reticlehq/core/hud';
 import { DISCOVERY_CALL_URL, FOUNDER_EMAIL, FOUNDER_MAILTO } from '@reticlehq/core';
-import { accountControlHtml } from './presenter-account.js';
+import { ACCOUNT_TEXT, accountControlHtml, paintAccountSlot, } from './presenter-account.js';
 export { SETTINGS_CSS };
 export const OutputDetail = {
     MINIMAL: 'minimal',
@@ -131,30 +132,59 @@ function patchSettings(patch) {
 function settingsHelpIcon() {
     return hiIconHtml(PresenterIcon.HELP, PRESENTER_ICON_SIZE.HELP);
 }
-function settingsLabel(text, helpTitle) {
+const SETTING_TEXT = {
+    outputDetail: ['Output detail', 'How much a copied run includes.'],
+    autoOpenChat: ['Open the log automatically', 'Opens this panel when a session starts.'],
+    showTimestamps: ['Show timestamps', 'Shows how long ago each log row happened.'],
+    showTally: ['Show pass/fail count', 'A score pill for this session in the toolbar.'],
+    reactComponents: ['React component names', 'Adds component names to copied runs.'],
+    blockPageInteractions: [
+        'Block page while adding notes',
+        'Clicks pin a note instead of using the app.',
+    ],
+    clearOnCopy: ['Clear notes after copying', 'Starts fresh once your notes are copied.'],
+    hideUntilRestart: ['Hide until reload', 'Hides the HUD until this page reloads.'],
+    harnessEnabled: [
+        'Allow Reticle to drive',
+        'Off by default. Unlocks at 80% instrumentation; lets Run Harness test this project.',
+    ],
+    reduceMotion: ['Reduce motion', 'Fewer HUD animations.'],
+    ambientGlow: ['Page glow', 'Tints the page edges while a session runs.'],
+    workspace: ['Workspace', 'The Reticle account this machine is signed in to.'],
+};
+function settingsLabel(text, helpTitle, desc = '') {
     const help = settingsHelpIcon();
-    return `<span class="reticle-settings-label">${text}<button type="button" class="reticle-settings-help" data-reticle-settings-help title="${helpTitle}" aria-label="${helpTitle}">${help}</button></span>`;
+    const line = '' === desc ? '' : `<span class="reticle-settings-desc">${desc}</span>`;
+    return `<span class="reticle-settings-labelcol"><span class="reticle-settings-label">${text}<button type="button" class="reticle-settings-help" data-reticle-settings-help title="${helpTitle}" aria-label="${helpTitle}">${help}</button></span>${line}</span>`;
 }
-function settingsToggleRow(key, label, helpTitle, extra = '') {
+function settingsToggleRow(key, helpTitle, extra = '') {
+    const [label, desc] = SETTING_TEXT[key];
     return `<div class="reticle-settings-row" ${extra}>
-    ${settingsLabel(label, helpTitle)}
+    ${settingsLabel(label, helpTitle, desc)}
     <button type="button" class="reticle-settings-toggle" ${SETTING_KEY_ATTR}="${key}" role="switch" aria-checked="false"></button>
   </div>`;
 }
-function settingsCheckRow(key, label, checked) {
+function settingsCheckRow(key, checked) {
+    const [label, desc] = SETTING_TEXT[key];
     const on = checked ? 'true' : 'false';
     return `<label class="reticle-settings-checkrow" data-reticle-check-row="${key}">
     <span class="reticle-settings-check" data-reticle-check="${key}" role="checkbox" aria-checked="${on}" tabindex="0"></span>
-    <span class="reticle-settings-check-label">${label}</span>
+    <span class="reticle-settings-labelcol"><span class="reticle-settings-check-label">${label}</span><span class="reticle-settings-desc">${desc}</span></span>
   </label>`;
 }
 export const SETTINGS_ACCOUNT_ATTR = 'data-reticle-settings-account';
 const SETTINGS_ACCOUNT_ROW_ATTR = 'data-reticle-settings-account-row';
+const HELP_TEXT_ATTR = 'data-reticle-settings-helptext';
 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 HARNESS_HELP = 'Let Reticle test this app by itself to find defects, from Run Harness or from your coding agent. Off blocks every run. Set here or in your dashboard — both write to the same place.';
+export const HARNESS_LOCKED_HELP = 'The Harness is not available to this workspace right now: see Plan in your Reticle dashboard.';
+export function creditsLeft(credits) {
+    if (credits === undefined)
+        return '';
+    return creditsSpent(credits) ? creditsUsedText(credits).said : creditsLeftText(credits);
+}
+const ACCOUNT_HELP = `Whether this machine is signed in to a Reticle workspace. Press ${ACCOUNT_TEXT.SIGNED_OUT} to sign in through your browser.`;
+export function paintHarnessRow(root, config, gate) {
     const row = root.querySelector(`[${SETTINGS_HARNESS_ROW_ATTR}]`);
     if (!(row instanceof HTMLElement))
         return;
@@ -166,12 +196,20 @@ export function paintHarnessRow(root, config) {
     const toggle = row.querySelector(`[${SETTING_KEY_ATTR}="harnessEnabled"]`);
     if (!(toggle instanceof HTMLElement))
         return;
-    const usable = config.harnessEntitled;
+    const locked = gate !== undefined && !gate.unlocked ? gate.reason : undefined;
+    const usable = config.harnessEntitled && locked === undefined;
     toggle.setAttribute('aria-checked', config.harnessEnabled && usable ? 'true' : 'false');
     toggle.setAttribute('aria-disabled', usable ? 'false' : 'true');
-    const help = row.querySelector('[data-reticle-help]');
+    const help = row.querySelector('[data-reticle-settings-help]');
+    const credits = creditsLeft(config.credits);
     if (help instanceof HTMLElement)
-        help.title = usable ? HARNESS_HELP : HARNESS_LOCKED_HELP;
+        help.title =
+            locked ??
+                (usable
+                    ? [HARNESS_HELP, credits].filter((t) => 0 < t.length).join(' ')
+                    : creditsSpent(config.credits)
+                        ? credits
+                        : HARNESS_LOCKED_HELP);
 }
 export function paintSettingsAccount(root, account, dashboardUrl, details = {}) {
     const row = root.querySelector(`[${SETTINGS_ACCOUNT_ROW_ATTR}]`);
@@ -180,7 +218,7 @@ export function paintSettingsAccount(root, account, dashboardUrl, details = {})
         return;
     const html = accountControlHtml(account, { ...details, dashboardUrl }, true);
     row.hidden = 0 === html.length;
-    slot.innerHTML = html;
+    paintAccountSlot(slot, html);
 }
 const FEEDBACK_TEXT = {
     EMAIL: 'Email the founder',
@@ -188,6 +226,23 @@ const FEEDBACK_TEXT = {
     CALL: 'Book a call',
     CALL_TITLE: 'Pick a time to talk it through',
 };
+const KILL_ATTR = 'data-reticle-settings-kill';
+const KILL_TEXT = {
+    LABEL: 'Kill Reticle',
+    ARMED: 'Click again to kill Reticle',
+    WARNING: 'Disconnects Reticle from this page: no HUD, no agent, nothing recorded. To bring it back, restart your dev server or reload the page.',
+};
+const SDK_VERSION_ATTR = 'data-reticle-sdk-version';
+const SDK_VERSION_TEXT = {
+    UNKNOWN: 'Reticle SDK version unknown',
+    KNOWN: (version) => `Reticle SDK ${version}`,
+};
+export function paintSdkVersion(root, version) {
+    const line = root.querySelector(`[${SDK_VERSION_ATTR}]`);
+    if (line !== null)
+        line.textContent =
+            version === undefined ? SDK_VERSION_TEXT.UNKNOWN : SDK_VERSION_TEXT.KNOWN(version);
+}
 export function settingsPanelHtml() {
     const close = hiIconHtml(PresenterIcon.REMOVE, PRESENTER_ICON_SIZE.MIN);
     const caret = hiIconHtml(PresenterIcon.CARET_RIGHT, PRESENTER_ICON_SIZE.HELP);
@@ -209,34 +264,40 @@ export function settingsPanelHtml() {
       <div class="reticle-settings-body">
         <div class="reticle-settings-section">Session</div>
         <div class="reticle-settings-row">
-          ${settingsLabel('Output Detail', outputHelp)}
+          ${settingsLabel(SETTING_TEXT.outputDetail[0], outputHelp, SETTING_TEXT.outputDetail[1])}
           <button type="button" class="reticle-settings-cycle" data-reticle-settings-cycle="outputDetail"><span data-reticle-cycle-label></span><span class="reticle-settings-dots" data-reticle-cycle-dots></span></button>
         </div>
-        ${settingsToggleRow('autoOpenChat', 'Auto-open chat', autoChatHelp)}
-        ${settingsToggleRow('showTimestamps', 'Show timestamps', timestampsHelp)}
-        ${settingsToggleRow('showTally', 'Show verdict tally', tallyHelp)}
+        ${settingsToggleRow('autoOpenChat', autoChatHelp)}
+        ${settingsToggleRow('showTimestamps', timestampsHelp)}
+        ${settingsToggleRow('showTally', tallyHelp)}
         <div class="reticle-settings-section">Inspector</div>
-        ${settingsToggleRow('reactComponents', 'React Components', reactHelp, 'data-reticle-settings-react-row')}
+        ${settingsToggleRow('reactComponents', reactHelp, 'data-reticle-settings-react-row')}
         <div class="reticle-settings-section">Interaction</div>
-        ${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)}
+        ${settingsCheckRow('blockPageInteractions', true)}
+        ${settingsCheckRow('clearOnCopy', false)}
+        ${settingsToggleRow('hideUntilRestart', hideHelp)}
+        ${settingsToggleRow('harnessEnabled', harnessHelp, `${SETTINGS_HARNESS_ROW_ATTR} hidden`)}
+        ${settingsToggleRow('reduceMotion', motionHelp)}
         <div class="reticle-settings-section">Account</div>
         <div class="reticle-settings-row" ${SETTINGS_ACCOUNT_ROW_ATTR} hidden>
-          ${settingsLabel('Workspace', ACCOUNT_HELP)}
+          ${settingsLabel(SETTING_TEXT.workspace[0], ACCOUNT_HELP, SETTING_TEXT.workspace[1])}
           <span ${SETTINGS_ACCOUNT_ATTR}></span>
         </div>
         <div class="reticle-settings-section">Status theme</div>
-        ${settingsToggleRow('ambientGlow', 'Page glow', glowHelp)}
+        ${settingsToggleRow('ambientGlow', glowHelp)}
         <div class="reticle-settings-themes" data-reticle-settings-themes></div>
-      </div>
-      <div class="reticle-settings-foot">
+        <div class="reticle-settings-section">Help</div>
+        <div class="reticle-settings-foot">
         <button type="button" class="reticle-settings-reset" data-reticle-settings-reset>Reset HUD position</button>
-        <button type="button" class="reticle-settings-link" data-reticle-settings-mcp>Manage MCP &amp; Webhooks<span class="reticle-settings-link-caret" aria-hidden="true">${caret}</span></button>
+        <button type="button" class="reticle-settings-link" data-reticle-settings-mcp>MCP setup guide<span class="reticle-settings-link-caret" aria-hidden="true">${caret}</span></button>
         <a class="reticle-settings-link" data-reticle-feedback-email href="${FOUNDER_MAILTO}" target="_blank" rel="noopener noreferrer" title="${FEEDBACK_TEXT.EMAIL_TITLE}">${FEEDBACK_TEXT.EMAIL}<span class="reticle-settings-link-caret" aria-hidden="true">${caret}</span></a>
         <a class="reticle-settings-link" data-reticle-feedback-call href="${DISCOVERY_CALL_URL}" target="_blank" rel="noopener noreferrer" title="${FEEDBACK_TEXT.CALL_TITLE}">${FEEDBACK_TEXT.CALL}<span class="reticle-settings-link-caret" aria-hidden="true">${caret}</span></a>
+        <p class="reticle-settings-kill-sub" ${SDK_VERSION_ATTR}>${SDK_VERSION_TEXT.UNKNOWN}</p>
+        <div class="reticle-settings-kill-row">
+          <button type="button" class="reticle-settings-kill" ${KILL_ATTR}><span data-reticle-kill-label>${KILL_TEXT.LABEL}</span></button>
+          <p class="reticle-settings-kill-sub">${KILL_TEXT.WARNING}</p>
+        </div>
+        </div>
       </div>
     </div>
   </div>`;
@@ -294,10 +355,13 @@ export class PresenterSettingsPanel {
             setHiIcon(closeBtn, PresenterIcon.REMOVE, PRESENTER_ICON_SIZE.MIN);
         }
         if (this.#btn !== undefined) {
+            const label = this.#btn.querySelector('.reticle-nav-label');
             setHiIcon(this.#btn, PresenterIcon.GEAR, PRESENTER_ICON_SIZE.TOOLBAR);
+            if (null !== label)
+                this.#btn.append(label);
             this.#btn.addEventListener('click', (e) => {
                 e.stopPropagation();
-                this.toggle();
+                this.open();
             });
         }
         root
@@ -310,8 +374,24 @@ export class PresenterSettingsPanel {
                 this.#update({ outputDetail: next.value });
         });
         for (const help of root.querySelectorAll('.reticle-settings-help')) {
+            help.setAttribute('aria-expanded', 'false');
             help.addEventListener('click', (e) => {
                 e.stopPropagation();
+                const row = help.closest('.reticle-settings-row');
+                if (null === row)
+                    return;
+                const shown = row.querySelector(`[${HELP_TEXT_ATTR}]`);
+                if (null !== shown) {
+                    shown.remove();
+                    help.setAttribute('aria-expanded', 'false');
+                    return;
+                }
+                const text = document.createElement('p');
+                text.className = 'reticle-settings-helptext';
+                text.setAttribute(HELP_TEXT_ATTR, '');
+                text.textContent = help.getAttribute('title') ?? '';
+                row.appendChild(text);
+                help.setAttribute('aria-expanded', 'true');
             });
         }
         for (const toggle of root.querySelectorAll(`[${SETTING_KEY_ATTR}]`)) {
@@ -399,6 +479,20 @@ export class PresenterSettingsPanel {
             if (dock instanceof HTMLElement)
                 resetHudDockPosition(dock);
         });
+        root.querySelector(`[${KILL_ATTR}]`)?.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const kill = e.currentTarget;
+            if (!(kill instanceof HTMLElement))
+                return;
+            if ('1' === kill.getAttribute('data-armed')) {
+                this.#host.onKill?.();
+                return;
+            }
+            kill.setAttribute('data-armed', '1');
+            const label = kill.querySelector('[data-reticle-kill-label]');
+            if (label !== null)
+                label.textContent = KILL_TEXT.ARMED;
+        });
         closeBtn?.addEventListener('click', (e) => {
             e.stopPropagation();
             this.close();
@@ -408,11 +502,11 @@ export class PresenterSettingsPanel {
         applyPresenterSettings(root, activeSettings);
         this.#host.onSettingsChange?.(activeSettings);
     }
-    paintHarness(config) {
+    paintHarness(config, gate) {
         const root = this.#panel;
         if (root === undefined)
             return;
-        paintHarnessRow(root, config);
+        paintHarnessRow(root, config, gate);
     }
     teardown() {
         this.#root = undefined;
@@ -434,6 +528,13 @@ export class PresenterSettingsPanel {
     close() {
         if (this.#root === undefined)
             return;
+        const kill = this.#panel?.querySelector(`[${KILL_ATTR}]`);
+        if (kill instanceof HTMLElement) {
+            kill.removeAttribute('data-armed');
+            const label = kill.querySelector('[data-reticle-kill-label]');
+            if (label !== null)
+                label.textContent = KILL_TEXT.LABEL;
+        }
         this.#root.setAttribute(SETTINGS_ATTR, '0');
         this.#panel?.setAttribute('aria-hidden', 'true');
         this.#btn?.setAttribute('data-active', '0');

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

@@ -1,7 +1,7 @@
 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 './chrome/presenter-hud-chrome.js';
+import { HUD_DROP_SHADOW, HUD_GLASS_PAINT, 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';
@@ -23,57 +23,48 @@ export const SHELL_CSS = `
 [${OVERLAY}][${STATE}="paused"]{--reticle-state:var(--reticle-c-idle);}
 [${OVERLAY}][${STATE}="ended"]{--reticle-state:var(--reticle-c-ended);}
 [${DOCK_ATTR}]{
-  --reticle-surface:rgba(255,255,255,.06);
+  --reticle-surface:color-mix(in srgb,var(--reticle-hud-surface) 78%,transparent);
   /* No literal here: --reticle-accent is published on the overlay from the chosen status theme.
      Redefining it on the dock made every accented control - toolbar toggles, focus rings, the send
      button - stay blue no matter which theme was picked, because the dock's value won for its own
      subtree. The fallback only matters if the presenter is mounted without settings. */
   --reticle-accent:var(--reticle-c-active,#3b82f6);
   --reticle-accent-soft:color-mix(in srgb,var(--reticle-accent) 18%,transparent);
-  --reticle-bg:#050506;--reticle-bg2:#0c0c10;
-  --reticle-fg:#fff;--reticle-muted:rgba(255,255,255,.85);--reticle-faint:rgba(255,255,255,.5);
-  --reticle-line:rgba(255,255,255,.12);--reticle-line2:rgba(255,255,255,.08);
+  --reticle-bg:var(--reticle-hud-ground);--reticle-bg2:var(--reticle-hud-surface);
+  --reticle-fg:var(--reticle-hud-text);--reticle-muted:var(--reticle-hud-text-muted);--reticle-faint:var(--reticle-hud-text-faint);
+  --reticle-line:var(--reticle-hud-border-strong);--reticle-line2:color-mix(in srgb,var(--reticle-hud-border) 70%,transparent);
   --reticle-read:#d4d4d4;--reticle-ok:#fafafa;--reticle-bad:#f5f5f5;
-  --reticle-font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
-  --reticle-shell-ease:cubic-bezier(.22,1,.36,1);
+  --reticle-font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
+  --reticle-shell-ease:var(--reticle-hud-ease);
   --reticle-shell-fast:.22s var(--reticle-shell-ease);
   --reticle-mark-accent:var(--reticle-accent);
   position:fixed;right:20px;bottom:20px;left:auto;
   z-index:2147483647;pointer-events:none;display:flex;flex-direction:column;align-items:flex-end;gap:8px;
   overflow:visible;max-width:calc(100vw - 24px);font-family:var(--reticle-font);-webkit-font-smoothing:antialiased;
-  /**
-   * ONE width for the dock and the chat above it. They were 420px and 320px, so the toolbar
-   * overhung the panel it belongs to and the pair read as two unrelated widgets.
-   */
-  /* ONE width for the chat, the capsule and the toolbar. It used to be 440 with a "compact" 340
-     toggle; 340 is the size that actually reads well beside an app, so it is simply the size. */
-  --reticle-dock-w:340px;
+  /* ONE width for the chat, the capsule and the toolbar: the dock-width token. Two widths made the
+     toolbar overhang the panel it belongs to, and the pair read as two unrelated widgets. */
+  --reticle-dock-w:var(--reticle-hud-dock-width,320px);
   /* The log is the reason the panel exists, so it gets the height rather than the chrome. */
-  --reticle-chat-h:660px;
+  --reticle-chat-h:var(--reticle-hud-panel-height,440px);
   opacity:0;transform:translate3d(0,8px,0);transition:opacity var(--reticle-shell-fast),transform var(--reticle-shell-fast);}
 [${DOCK_ATTR}][data-dragged="1"]{left:var(--reticle-hud-x);top:var(--reticle-hud-y);bottom:auto;right:auto;transform:none;}
 [${DOCK_ATTR}][data-dragged="1"][data-on="1"]{transform:none;}
 [${DOCK_ATTR}][data-on="1"]{opacity:1;transform:translate3d(0,0,0);pointer-events:none;}
 [${DOCK_ATTR}][data-on="0"]{opacity:0;pointer-events:none;}
 /**
- * The panel is GLASS, tinted by the state colour, with the glow sitting behind it - restored from
- * the version before this one, where a flat near-black card had replaced it. Kept at ~92% opacity
- * rather than a real backdrop-filter: blur(24px) here was measured as the single most expensive
- * thing in the whole SDK (+4pp of main thread on the hostile fixture), and the tint buys the look
- * without the bill.
+ * The panel is painted by HUD_GLASS_PAINT: an opaque navy fill, lit by the state colour, with that
+ * colour glowing behind it. No backdrop-filter: blur(24px) here was measured as the single most
+ * expensive thing in the whole SDK.
  */
 [${CHAT_PANEL}]{
-  background:
-    radial-gradient(130% 90% at 50% 0%,color-mix(in srgb,var(--reticle-c-active) 18%,transparent),transparent 62%),
-    linear-gradient(180deg,rgba(13,15,22,.96),rgba(19,22,32,.94));
-  border:1px solid color-mix(in srgb,var(--reticle-c-active) 26%,rgba(255,255,255,.1));
+  ${HUD_GLASS_PAINT}
   display:none;position:absolute;right:0;left:auto;bottom:calc(100% + 8px);top:auto;z-index:5;
   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;text-align:left;
   color:var(--reticle-fg);font-size:13px;line-height:1.5;
-  border-radius:16px;
-  box-shadow:${HUD_DROP_SHADOW},0 0 54px -18px var(--reticle-c-active);
+  border-radius:var(--reticle-hud-radius-lg);
   contain:layout style paint;
   transform:translateZ(0);
   pointer-events:none;}
@@ -83,6 +74,9 @@ export const SHELL_CSS = `
   right:auto;left:0;}
 [${OVERLAY}][${CHAT_ATTR}="1"] [${CHAT_PANEL}]{
   display:flex;pointer-events:auto;}
+[${CHAT_PANEL}][hidden]{display:none!important;}
+[${DOCK_ATTR}][${CHAT_PLACEMENT_ATTR}="below"] [data-reticle-page-panel]{bottom:auto;top:calc(100% + 8px);}
+[${DOCK_ATTR}][${DOCK_ALIGN_ATTR}="start"] [data-reticle-page-panel]{right:auto;left:0;}
 /**
  * Idle, and not blocking the page: the card is not in use.
  *
@@ -93,6 +87,9 @@ export const SHELL_CSS = `
 [${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;}
+/* ...except a log with more than it shows: a feed nobody can scroll back through is not a log. */
+[${OVERLAY}][data-reticle-mode="idle"][data-reticle-block="0"] [${CHAT_PANEL}] [data-reticle-log][data-reticle-log-scrollable]{
+  pointer-events:auto;}
 [${OVERLAY}][data-reticle-mode="idle"][data-reticle-block="0"] [${CHAT_PANEL}] :is(button,a,input,select,textarea){
   pointer-events:auto;}
 /**
@@ -134,8 +131,18 @@ export const SHELL_CSS = `
    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;}
+/* The quiet way to the platform: one line of small text before the avatar, cut short before it pushes. */
+[${CHAT_PANEL}] .reticle-head-team{margin-left:auto;min-width:0;display:inline-flex;}
+[${CHAT_PANEL}] .reticle-head-team:empty{display:none;}
+[${CHAT_PANEL}] .reticle-head-team:not(:empty) + .reticle-head-account{margin-left:0;}
+[${CHAT_PANEL}] .reticle-team-link{min-width:0;max-width:100%;overflow:hidden;padding:0;border:0;background:none;cursor:pointer;font:inherit;font-size:var(--reticle-hud-size-xs);font-weight:500;color:var(--reticle-hud-text-muted);text-decoration:none;white-space:nowrap;text-overflow:ellipsis;}
+[${CHAT_PANEL}] .reticle-team-link span{display:block;overflow:hidden;text-overflow:ellipsis;}
+[${CHAT_PANEL}] .reticle-team-link:hover{color:var(--reticle-hud-brand);}
+[${CHAT_PANEL}] .reticle-team-link:focus-visible{outline:2px solid var(--reticle-hud-brand);outline-offset:2px;border-radius:var(--reticle-hud-radius-sm);}
 [${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;}
+[${CHAT_PANEL}] .reticle-view-heading{display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-height:28px;box-sizing:border-box;padding:6px 12px 4px;border-bottom:1px solid var(--reticle-hud-border);}
+[${CHAT_PANEL}] .reticle-view-heading strong{font-size:11px;font-weight:600;}
 /* No state word here: the activity strip immediately below already says "idle · 21s", and the
    dot in front of it carries the same colour. One fact, one place. */
 [${CHAT_PILL_ATTR}] .reticle-chat-pill-text{
@@ -255,13 +262,13 @@ export const SHELL_CSS = `
 [${HUD}] .reticle-toolbar-actions{
   display:inline-flex;align-items:center;gap:2px;flex:none;
   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-toolbar-chrome{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:center;gap:var(--reticle-hud-space-1);flex:1;min-width:0;}
 [${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;
-  width:32px;height:32px;padding:0;border:none;border-radius:50%;cursor:pointer;
+  width:var(--reticle-hud-control-size);height:var(--reticle-hud-control-size);padding:0;border:none;border-radius:var(--reticle-hud-radius-pill);cursor:pointer;
   background:transparent;color:rgba(255,255,255,.85);line-height:0;
   transition:background-color .15s ease,color .15s ease,transform .1s ease,opacity .2s ease;}
 [${HUD}] .reticle-tb-btn:hover{background:rgba(255,255,255,.12);color:#fff;}
@@ -294,18 +301,6 @@ export const SHELL_CSS = `
   color:#fff;background:rgba(255,255,255,.14);}
 [${HUD}] .reticle-tb-btn[data-danger]:hover:not(:disabled){color:#ff383c;
   background:color-mix(in srgb, #ff383c 25%, transparent);}
-/**
- * The toolbar is a FIXED number of slots.
- *
- * 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;}
-[${OVERLAY}][${STATE}="ended"] [${HUD}] [data-reticle-pause],
-[${OVERLAY}][${STATE}="ended"] [${HUD}] [data-reticle-end]{display:none;}
 [${HUD}] .reticle-tb-tip{
   position:absolute;bottom:calc(100% + 14px);left:50%;transform:translateX(-50%) scale(.95);
   padding:6px 10px;background:#1a1a1a;color:rgba(255,255,255,.9);font-size:12px;font-weight:500;
@@ -359,7 +354,7 @@ export const SHELL_CSS = `
 [${HUD}] .reticle-hi-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0;color:inherit;}
 [${HUD}] .reticle-hi-icon svg{display:block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
 [${HUD}] .reticle-live{display:none;}
-[${CHAT_PANEL}] .reticle-act-strip{flex:none;display:flex;align-items:center;gap:8px;padding:10px 14px;
+[${CHAT_PANEL}] .reticle-act-strip{flex:none;display:flex;align-items:center;gap:7px;min-height:36px;box-sizing:border-box;padding:4px 12px;
   border-bottom:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.22);}
 [${CHAT_PANEL}] .reticle-act-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--reticle-faint);
   box-shadow:0 0 0 2px rgba(255,255,255,.04);transition:background .2s,box-shadow .2s;}
@@ -382,11 +377,22 @@ export const SHELL_CSS = `
  */
 [${OVERLAY}][${STATE}="unreachable"]{--reticle-state:var(--reticle-faint);}
 [${OVERLAY}][${STATE}="unreachable"] [${CHAT_PANEL}] .reticle-act-dot{animation:none;}
+/* The one status that is a sentence to act on: two lines, full contrast, the detail on hover. */
+[${OVERLAY}][${STATE}="unreachable"] [${CHAT_PANEL}] .reticle-act{white-space:normal;line-height:1.35;color:var(--reticle-fg);cursor:help;}
 [${OVERLAY}][${STATE}="paused"] [${CHAT_PANEL}] .reticle-act-dot,
 [${OVERLAY}][${STATE}="ended"] [${CHAT_PANEL}] .reticle-act-dot{animation:none;}
 @keyframes reticle-idle-pulse{0%,100%{opacity:.45;transform:scale(.92)}50%{opacity:1;transform:scale(1)}}
 [${CHAT_PANEL}] .reticle-act{display:block;flex:1;min-width:0;color:var(--reticle-muted);font-size:11px;
   font-variant-numeric:tabular-nums;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+[${CHAT_PANEL}] .reticle-act-actions{display:flex;align-items:center;gap:4px;flex:none;margin-left:auto;}
+[${CHAT_PANEL}] .reticle-status-btn{position:relative;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
+  border:1px solid var(--reticle-line);border-radius:var(--reticle-hud-radius-sm);background:transparent;color:var(--reticle-muted);cursor:pointer;}
+[${CHAT_PANEL}] .reticle-status-btn[hidden]{display:none;}
+[${CHAT_PANEL}] .reticle-status-btn:hover:not(:disabled){background:var(--reticle-hud-hover);color:var(--reticle-fg);}
+[${CHAT_PANEL}] .reticle-status-btn:focus-visible{outline:2px solid var(--reticle-accent);outline-offset:2px;}
+[${CHAT_PANEL}] .reticle-status-btn:disabled{opacity:.35;cursor:not-allowed;}
+[${CHAT_PANEL}] .reticle-status-stop:hover:not(:disabled){color:var(--reticle-state);border-color:var(--reticle-state);}
+[${CHAT_PANEL}] .reticle-act-actions .reticle-pause-badge{display:none;position:static;transform:none;padding:2px 5px;font-size:8px;}
 [${CHAT_PANEL}] .reticle-act-strip[data-liveness="active"] .reticle-act{color:var(--reticle-fg);}
 [${HUD}] .reticle-pass{color:var(--reticle-ok);}[${HUD}] .reticle-fail{color:var(--reticle-bad);}
 /**
@@ -408,6 +414,6 @@ export const SHELL_CSS = `
   --reticle-accent:var(--reticle-state);
   --reticle-accent-soft:color-mix(in srgb,var(--reticle-state) 18%,transparent);}
 @media (max-width:480px){
-  [${CHAT_PANEL}]{width:min(100vw - 24px,320px);max-height:min(360px,calc(100vh - 100px));}
+  [${CHAT_PANEL}]{width:min(100vw - 24px,320px);max-height:min(440px,calc(100vh - 100px));}
   [${OVERLAY}][${MIN_ATTR}="0"] [${HUD}]{max-width:calc(100vw - 24px);}
 }`;

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

@@ -1,8 +1,10 @@
-import type { HarnessConfig } from '@reticlehq/core';
+import type { AgentLink, HarnessConfig, HarnessDrive } from '@reticlehq/core';
+import type { HarnessGateView } from './presenter-harness-row.js';
 import { PresenterReport } from './presenter-report.js';
 import type { AccountState } from '@reticlehq/core';
 import { type AccountDetails } from './presenter-account.js';
-import { type OfferState } from './carousel/offer-card.js';
+import { type ChatView } from './presenter-chat-views.js';
+import type { AnnotationItem } from '../review/annotator.js';
 import { type SettingsHost } from './presenter-settings.js';
 interface HudShellCallbacks {
     onChatOpen?: () => void;
@@ -11,13 +13,24 @@ interface HudShellCallbacks {
     onAnnotateToggle?: (on: boolean) => void;
     onCollapse?: () => void;
     onSyncNow?: () => void;
+    onHarness?: (enabled: boolean) => void;
+    onHarnessRun?: (persona?: string) => void;
+    onHarnessStop?: () => void;
+    onHarnessLink?: () => void;
+    onSignIn?: () => void;
     settings?: SettingsHost;
 }
 export declare class HudShell {
     #private;
-    paintHarness(config: HarnessConfig | undefined): void;
+    setProjectId(projectId: string | undefined): void;
+    paintHarnessDrive(drive: HarnessDrive | undefined): void;
+    paintAgent(link: AgentLink | undefined): void;
+    paintHarness(config: HarnessConfig | undefined, gate?: HarnessGateView): void;
+    paintImpact(verdicts: number): void;
+    paintAnnotations(items: readonly AnnotationItem[]): void;
+    openView(view: ChatView): void;
     paintAccount(account: AccountState | undefined, dashboardUrl: string | undefined, details?: AccountDetails): void;
-    paintOffer(offer: OfferState | undefined): void;
+    paintNotices(notices?: readonly unknown[]): void;
     constructor(callbacks?: HudShellCallbacks);
     static dockHtml(actStripHtml: string, bannerHtml: string, logAttr: string, flowsHtml: string, footHtml: string): string;
     get report(): PresenterReport;