@reticlehq/browser 3.4.0 → 3.6.0

package/dist/presenter/presenter-settings.js

@@ -5,7 +5,7 @@ import { resetHudDockPosition } from './presenter-drag.js';
 import { findDock, scheduleSyncDockLayout } from './presenter-dock-layout.js';
 import { SETTINGS_CSS } from './presenter-settings-styles.js';
 import { DISCOVERY_CALL_URL, FOUNDER_EMAIL, FOUNDER_MAILTO } from '@reticlehq/core';
-import { accountControlHtml } from './presenter-account.js';
+import { ACCOUNT_TEXT, accountControlHtml, } from './presenter-account.js';
 export { SETTINGS_CSS };
 export const OutputDetail = {
     MINIMAL: 'minimal',
@@ -150,10 +150,19 @@ function settingsCheckRow(key, label, checked) {
 }
 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.';
+const HARNESS_LOCKED_HELP = 'The Harness is not available to this workspace right now. Every workspace gets free Harness credits each month: see Plan in your Reticle dashboard.';
+export function creditsLeft(credits) {
+    if (credits === undefined)
+        return '';
+    const left = Math.max(0, credits.limit - credits.used);
+    return 0 === left
+        ? `All ${String(credits.limit)} Harness credits used this month`
+        : `${String(left)} of ${String(credits.limit)} Harness credits left this month`;
+}
+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) {
     const row = root.querySelector(`[${SETTINGS_HARNESS_ROW_ATTR}]`);
     if (!(row instanceof HTMLElement))
@@ -170,8 +179,11 @@ export function paintHarnessRow(root, config) {
     toggle.setAttribute('aria-checked', config.harnessEnabled && usable ? 'true' : 'false');
     toggle.setAttribute('aria-disabled', usable ? 'false' : 'true');
     const help = row.querySelector('[data-reticle-help]');
+    const credits = creditsLeft(config.credits);
     if (help instanceof HTMLElement)
-        help.title = usable ? HARNESS_HELP : HARNESS_LOCKED_HELP;
+        help.title = usable
+            ? [HARNESS_HELP, credits].filter((t) => 0 < t.length).join(' ')
+            : HARNESS_LOCKED_HELP;
 }
 export function paintSettingsAccount(root, account, dashboardUrl, details = {}) {
     const row = root.querySelector(`[${SETTINGS_ACCOUNT_ROW_ATTR}]`);
@@ -188,6 +200,12 @@ 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.',
+};
 export function settingsPanelHtml() {
     const close = hiIconHtml(PresenterIcon.REMOVE, PRESENTER_ICON_SIZE.MIN);
     const caret = hiIconHtml(PresenterIcon.CARET_RIGHT, PRESENTER_ICON_SIZE.HELP);
@@ -218,9 +236,9 @@ export function settingsPanelHtml() {
         <div class="reticle-settings-section">Inspector</div>
         ${settingsToggleRow('reactComponents', 'React Components', 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)}
+        ${settingsCheckRow('blockPageInteractions', 'Block page while adding notes', true)}
+        ${settingsCheckRow('clearOnCopy', 'Clear notes after copying', false)}
+        ${settingsToggleRow('hideUntilRestart', 'Hide until reload', hideHelp)}
         ${settingsToggleRow('harnessEnabled', 'Autonomous driving', harnessHelp, `${SETTINGS_HARNESS_ROW_ATTR} hidden`)}
         ${settingsToggleRow('reduceMotion', 'Reduce motion', motionHelp)}
         <div class="reticle-settings-section">Account</div>
@@ -231,12 +249,17 @@ export function settingsPanelHtml() {
         <div class="reticle-settings-section">Status theme</div>
         ${settingsToggleRow('ambientGlow', 'Page glow', 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>
+        <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>`;
@@ -297,7 +320,7 @@ export class PresenterSettingsPanel {
             setHiIcon(this.#btn, PresenterIcon.GEAR, PRESENTER_ICON_SIZE.TOOLBAR);
             this.#btn.addEventListener('click', (e) => {
                 e.stopPropagation();
-                this.toggle();
+                this.open();
             });
         }
         root
@@ -310,8 +333,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 +438,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();
@@ -434,6 +487,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,10 @@ 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],
+[${OVERLAY}][data-reticle-mode="idle"][data-reticle-block="0"] [${CHAT_PANEL}] .reticle-flow-strip{
+  pointer-events:auto;}
 [${OVERLAY}][data-reticle-mode="idle"][data-reticle-block="0"] [${CHAT_PANEL}] :is(button,a,input,select,textarea){
   pointer-events:auto;}
 /**
@@ -136,6 +134,8 @@ export const SHELL_CSS = `
 [${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;}
+[${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 +255,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-template-columns:repeat(6,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 +294,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 +347,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;}
@@ -387,6 +375,15 @@ export const SHELL_CSS = `
 @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 +405,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

@@ -3,6 +3,8 @@ 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,18 @@ interface HudShellCallbacks {
     onAnnotateToggle?: (on: boolean) => void;
     onCollapse?: () => void;
     onSyncNow?: () => void;
+    onHarness?: (enabled: boolean) => void;
+    onSignIn?: () => void;
     settings?: SettingsHost;
 }
 export declare class HudShell {
     #private;
     paintHarness(config: HarnessConfig | undefined): 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;
+    paintOffer(offer: OfferState | undefined, notices?: readonly unknown[]): void;
     constructor(callbacks?: HudShellCallbacks);
     static dockHtml(actStripHtml: string, bannerHtml: string, logAttr: string, flowsHtml: string, footHtml: string): string;
     get report(): PresenterReport;