@reticlehq/browser 3.1.0 → 3.3.0

package/dist/presenter/chrome/presenter-log.js

@@ -70,7 +70,7 @@ export const LOG_CSS = `
   border-radius:16px 16px 4px 16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
 [data-reticle-log-row][data-kind="human"] .reticle-log-text{color:var(--reticle-fg);font-size:12px;line-height:1.45;}
 `;
-export function scrollLogToLatest(container) {
+function scrollLogToLatest(container) {
     container.scrollTop = container.scrollHeight;
 }
 export function settleLogAtLatest(container) {
@@ -81,6 +81,18 @@ export function settleLogAtLatest(container) {
     });
     nativeSetTimeout(() => scrollLogToLatest(container), LOG_SETTLE_MS);
 }
+function logRows(container) {
+    return [...container.children].filter((el) => el.hasAttribute(DATA_RETICLE_LOG_ROW));
+}
+export function trimLogRows(container, max) {
+    const rows = logRows(container);
+    for (const row of rows.slice(0, Math.max(0, rows.length - max)))
+        row.remove();
+}
+export function clearLogRows(container) {
+    for (const row of logRows(container))
+        row.remove();
+}
 export function clampLogMax(n) {
     if (n === undefined || !Number.isFinite(n) || n <= 0)
         return DEFAULT_LOG_MAX;
@@ -135,8 +147,7 @@ export function appendLogRow(container, kind, text, ts, logMax) {
         rowNodes.push(resEl);
     row.append(...rowNodes);
     container.appendChild(row);
-    while (container.childElementCount > logMax)
-        container.firstElementChild?.remove();
+    trimLogRows(container, logMax);
     requestAnimationFrame(() => {
         scrollLogToLatest(container);
     });

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

@@ -5,7 +5,6 @@ export declare const REPORT_LINKS: {
     readonly GITHUB: "https://github.com/reticlehq/reticle";
     readonly DISCORD: "https://discord.gg/BwAbzv9ZRz";
 };
-export declare const SHARE_VIA_HANDLE = "";
 export declare const REPORT_TEXT: {
     readonly TITLE: "Impact";
     readonly PROJECT: "This project";

package/dist/presenter/chrome/presenter-report-copy.js

@@ -5,7 +5,7 @@ export const REPORT_LINKS = {
     GITHUB: 'https://github.com/reticlehq/reticle',
     DISCORD: 'https://discord.gg/BwAbzv9ZRz',
 };
-export const SHARE_VIA_HANDLE = '';
+const SHARE_VIA_HANDLE = '';
 export const REPORT_TEXT = {
     TITLE: 'Impact',
     PROJECT: 'This project',

package/dist/presenter/hud-telemetry.d.ts

@@ -0,0 +1,3 @@
+import { type HudUseData } from '@reticlehq/core';
+export declare function controlIdOf(el: Element): string | undefined;
+export declare function installHudTelemetry(doc: Document, root: Element, report: (use: HudUseData) => void): () => void;

package/dist/presenter/hud-telemetry.js

@@ -0,0 +1,87 @@
+import { HUD_KEYED_ATTRS, isHudControl } from '@reticlehq/core/hud';
+import { HudPanel, HudToggle, HudView } from '@reticlehq/core';
+import { isReticleUi } from '../dom/dom-ignore.js';
+import { nativeSetTimeout } from '../timers/native/native-timers.js';
+import { CHAT_ATTR, MIN_ATTR, REPORT_ATTR, SETTINGS_ATTR } from './presenter-config.js';
+const PREFIX = 'data-reticle-';
+const TOGGLE_ROLES = new Set(['switch', 'checkbox']);
+export function controlIdOf(el) {
+    for (const attr of Array.from(el.attributes)) {
+        if (!attr.name.startsWith(PREFIX))
+            continue;
+        const name = attr.name.slice(PREFIX.length);
+        const id = HUD_KEYED_ATTRS.includes(name)
+            ? `${name}.${attr.value}`
+            : name;
+        if (isHudControl(id))
+            return id;
+    }
+    return undefined;
+}
+function controlOf(path) {
+    for (const node of path) {
+        if (!(node instanceof Element))
+            continue;
+        if (controlIdOf(node) !== undefined)
+            return node;
+    }
+    return undefined;
+}
+function viewOf(root) {
+    if ('1' === root.getAttribute(MIN_ATTR))
+        return { view: HudView.BUBBLE, panel: HudPanel.NONE };
+    if ('1' === root.getAttribute(SETTINGS_ATTR)) {
+        return { view: HudView.EXPANDED, panel: HudPanel.SETTINGS };
+    }
+    if ('1' === root.getAttribute(REPORT_ATTR)) {
+        return { view: HudView.EXPANDED, panel: HudPanel.REPORT };
+    }
+    if ('1' === root.getAttribute(CHAT_ATTR))
+        return { view: HudView.EXPANDED, panel: HudPanel.CHAT };
+    return { view: HudView.COLLAPSED, panel: HudPanel.NONE };
+}
+export function installHudTelemetry(doc, root, report) {
+    const send = (use) => {
+        try {
+            report(use);
+        }
+        catch {
+        }
+    };
+    const onPress = (event) => {
+        const el = controlOf(event.composedPath());
+        if (el === undefined || !isReticleUi(el))
+            return;
+        const control = controlIdOf(el);
+        if (control === undefined)
+            return;
+        if (!TOGGLE_ROLES.has(el.getAttribute('role') ?? '')) {
+            send({ control });
+            return;
+        }
+        nativeSetTimeout(() => {
+            const on = 'true' === el.getAttribute('aria-checked');
+            send({ control, toggle: on ? HudToggle.ON : HudToggle.OFF });
+        }, 0);
+    };
+    let last = '';
+    const onChange = () => {
+        const now = viewOf(root);
+        const key = `${now.view}/${now.panel}`;
+        if (key === last)
+            return;
+        last = key;
+        send(now);
+    };
+    doc.addEventListener('click', onPress, true);
+    const observer = new MutationObserver(onChange);
+    observer.observe(root, {
+        attributes: true,
+        attributeFilter: [MIN_ATTR, CHAT_ATTR, SETTINGS_ATTR, REPORT_ATTR],
+    });
+    onChange();
+    return () => {
+        doc.removeEventListener('click', onPress, true);
+        observer.disconnect();
+    };
+}

package/dist/presenter/presenter-account.js

@@ -77,7 +77,7 @@ function accountMenuHtml(account, details) {
         detailRow(ACCOUNT_TEXT.DEFECTS_LABEL, details.defects !== undefined ? String(details.defects) : undefined);
     const linked = details.dashboardUrl !== undefined && isSafeDashboardUrl(details.dashboardUrl);
     const dashboard = linked
-        ? `<a class="reticle-account-action" href="${esc(details.dashboardUrl ?? '')}" target="_blank" rel="noreferrer noopener" title="${ACCOUNT_TEXT.DASHBOARD_TITLE}">${hiIconHtml(PresenterIcon.VIEW, PRESENTER_ICON_SIZE.HELP)}<span>${ACCOUNT_TEXT.DASHBOARD_ACTION}</span></a>`
+        ? `<a class="reticle-account-action" data-reticle-account-dashboard href="${esc(details.dashboardUrl ?? '')}" target="_blank" rel="noreferrer noopener" title="${ACCOUNT_TEXT.DASHBOARD_TITLE}">${hiIconHtml(PresenterIcon.VIEW, PRESENTER_ICON_SIZE.HELP)}<span>${ACCOUNT_TEXT.DASHBOARD_ACTION}</span></a>`
         :
             `<button type="button" class="reticle-account-action reticle-account-action--hint" ${ACCOUNT_SIGNIN_ATTR} data-reticle-copy="${ACCOUNT_TEXT.LINK_COMMAND}" title="${ACCOUNT_TEXT.LINK_HINT}"><span>${ACCOUNT_TEXT.LINK_HINT}</span></button>`;
     const signOut = `<button type="button" class="reticle-account-action" ${ACCOUNT_SIGNOUT_ATTR} data-reticle-copy="${ACCOUNT_TEXT.SIGNOUT_COMMAND}" title="${ACCOUNT_TEXT.SIGNOUT_TITLE}"><span>${ACCOUNT_TEXT.SIGNOUT_ACTION}</span></button>`;

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

@@ -1,4 +1,4 @@
-import type { HumanControlKind } from '@reticlehq/core';
+import type { HudUseData, HumanControlKind } from '@reticlehq/core';
 export declare const BorderMode: {
     readonly SESSION: "session";
     readonly BUSY: "busy";
@@ -21,6 +21,7 @@ export interface PresenterOptions {
     border?: BorderMode;
     logMax?: number;
     onControl?: ControlHandler;
+    onHudUse?: (use: HudUseData) => void;
     endedFadeMs?: number;
 }
 export declare const DEFAULT_PACE = 450;
@@ -65,6 +66,8 @@ export declare const Placement: {
 };
 export declare const MARKERS_BTN_ATTR = "data-reticle-markers-btn";
 export declare const CLEAR_MARKS_ATTR = "data-reticle-clear-marks";
+export declare const COPY_MARKS_ATTR = "data-reticle-copy-marks";
+export declare const MARKS_ROW_ATTR = "data-reticle-marks-row";
 export declare const MARK_COUNT_ATTR = "data-reticle-mark-count";
 export declare const ANNOTATE_BTN_ATTR = "data-reticle-annotate-btn";
 export declare const CHAT_MIN_ATTR = "data-reticle-chat-min";
@@ -79,6 +82,7 @@ export declare const SETTINGS_PANEL_ATTR = "data-reticle-settings-panel";
 export declare const SETTINGS_CLOSE_ATTR = "data-reticle-settings-close";
 export declare const SETTING_KEY_ATTR = "data-reticle-setting";
 export declare const SETTINGS_STORAGE_KEY = "reticle-presenter-settings";
+export declare const MINIMISED_STORAGE_KEY = "reticle-presenter-minimised";
 export declare const AMBIENT_GLOW_ATTR = "data-reticle-ambient-glow";
 export declare const LIVENESS_ATTR = "data-reticle-live";
 export declare const BLOCK_ATTR = "data-reticle-block";

package/dist/presenter/presenter-config.js

@@ -45,6 +45,8 @@ export const DOCK_ALIGN_ATTR = 'data-reticle-dock-align';
 export const Placement = { ABOVE: 'above', BELOW: 'below' };
 export const MARKERS_BTN_ATTR = 'data-reticle-markers-btn';
 export const CLEAR_MARKS_ATTR = 'data-reticle-clear-marks';
+export const COPY_MARKS_ATTR = 'data-reticle-copy-marks';
+export const MARKS_ROW_ATTR = 'data-reticle-marks-row';
 export const MARK_COUNT_ATTR = 'data-reticle-mark-count';
 export const ANNOTATE_BTN_ATTR = 'data-reticle-annotate-btn';
 export const CHAT_MIN_ATTR = 'data-reticle-chat-min';
@@ -59,6 +61,7 @@ export const SETTINGS_PANEL_ATTR = 'data-reticle-settings-panel';
 export const SETTINGS_CLOSE_ATTR = 'data-reticle-settings-close';
 export const SETTING_KEY_ATTR = 'data-reticle-setting';
 export const SETTINGS_STORAGE_KEY = 'reticle-presenter-settings';
+export const MINIMISED_STORAGE_KEY = 'reticle-presenter-minimised';
 export const AMBIENT_GLOW_ATTR = 'data-reticle-ambient-glow';
 export const LIVENESS_ATTR = 'data-reticle-live';
 export const BLOCK_ATTR = 'data-reticle-block';
@@ -71,6 +74,6 @@ export const HUD_POS_X_VAR = '--reticle-hud-x';
 export const HUD_POS_Y_VAR = '--reticle-hud-y';
 export const HUD_DRAG_THRESHOLD_PX = 4;
 export const HUD_DOCK_MARGIN_PX = 8;
-export const HUD_DRAG_IGNORE_SEL = '[data-reticle-pause], [data-reticle-annotate-btn], [data-reticle-markers-btn], [data-reticle-clear-marks], [data-reticle-end], [data-reticle-min-btn], [data-reticle-settings-btn], [data-reticle-settings-panel], [data-reticle-report-btn], [data-reticle-report-panel], [data-reticle-chat-panel], [data-reticle-chat-toggle], [data-reticle-workspace-btn], [data-reticle-workspace-menu], [data-reticle-copy], [data-reticle-export], input, textarea, select, a, .reticle-head-ctl, [data-reticle-tally], .reticle-maxhint';
+export const HUD_DRAG_IGNORE_SEL = '[data-reticle-pause], [data-reticle-annotate-btn], [data-reticle-markers-btn], [data-reticle-clear-marks], [data-reticle-copy-marks], [data-reticle-end], [data-reticle-min-btn], [data-reticle-settings-btn], [data-reticle-settings-panel], [data-reticle-report-btn], [data-reticle-report-panel], [data-reticle-chat-panel], [data-reticle-chat-toggle], [data-reticle-workspace-btn], [data-reticle-workspace-menu], [data-reticle-copy], [data-reticle-export], input, textarea, select, a, .reticle-head-ctl, [data-reticle-tally], .reticle-maxhint';
 export const THROTTLED_ATTR = 'data-reticle-throttled';
 export const Z_HUD_TOOLTIP = 100;

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

@@ -4,6 +4,7 @@ export declare const ENDED_FADE_MS = 4000;
 export declare const CONTROLS_CSS: string;
 export declare const CONTROLS_TOOLBAR_HTML: string;
 export declare const CONTROLS_BANNER_HTML = "<div data-reticle-banner class=\"reticle-banner\">Session ended</div>";
+export declare const CONTROLS_MARKS_HTML: string;
 export declare const CONTROLS_FLOWS_HTML = "<div data-reticle-flows class=\"reticle-flows\"><span class=\"reticle-flows-cap\">Replay a flow</span></div>";
 export declare const CONTROLS_FOOT_HTML: string;
 interface ControlPanelHost {

package/dist/presenter/presenter-controls.js

@@ -1,6 +1,6 @@
 import { HumanControlKind, PresenterTone, SessionState } from '@reticlehq/core';
 import { nativeSetTimeout, nativeClearTimeout } from '../timers/native/native-timers.js';
-import { CHAT_TOGGLE_ATTR, CLEAR_MARKS_ATTR, MARKERS_BTN_ATTR } from './presenter-config.js';
+import { CHAT_TOGGLE_ATTR, CLEAR_MARKS_ATTR, COPY_MARKS_ATTR, MARKERS_BTN_ATTR, MARKS_ROW_ATTR, } from './presenter-config.js';
 import { PresenterIcon, PRESENTER_ICON_SIZE, hiIcon, hiIconHtml, hiToggleIconHtml, } from './icons/presenter-icons.js';
 import { getPresenterSettings } from './presenter-settings.js';
 import { mountWorkspaceSelector, workspaceRowHtml } from './presenter-workspace.js';
@@ -101,6 +101,15 @@ export const CONTROLS_CSS = `
 [data-reticle-chat-panel] .reticle-flow:active{transform:scale(.95);}
 [data-reticle-overlay][data-reticle-state="paused"] [data-reticle-hud] .reticle-tb-btn--primary{
   box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 0 12px rgba(255,255,255,.04);}
+[data-reticle-chat-panel] .reticle-marks-row{display:flex;align-items:center;justify-content:space-between;gap:8px;
+  padding:7px 12px;border-top:1px solid var(--reticle-line2);pointer-events:auto;}
+[data-reticle-chat-panel] .reticle-marks-row[hidden]{display:none;}
+[data-reticle-chat-panel] .reticle-marks-text{color:var(--reticle-muted);font-size:11px;}
+[data-reticle-chat-panel] .reticle-marks-copy{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;
+  border-radius:7px;border:1px solid var(--reticle-line);background:rgba(255,255,255,.04);color:var(--reticle-fg);
+  font-family:var(--reticle-font);font-size:11px;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s;}
+[data-reticle-chat-panel] .reticle-marks-copy:hover{background:var(--reticle-accent-soft);border-color:var(--reticle-accent);}
+[data-reticle-chat-panel] .reticle-marks-copy[data-copied="1"]{color:#22c55e;border-color:#22c55e;}
 [data-reticle-hud] .reticle-export-msg{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
   overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
 `;
@@ -116,6 +125,7 @@ function paintPauseBtn(btn, paused) {
 const CHAT_LABEL = 'Agent chat';
 const MARKERS_LABEL = 'Hide markers';
 const CLEAR_MARKS_LABEL = 'Clear all';
+const COPY_MARKS_LABEL = 'Copy for your agent';
 const TB = PRESENTER_ICON_SIZE.TOOLBAR;
 function tbWrap(btn, tip, kbd) {
     const shortcut = kbd === undefined ? '' : `<span class="reticle-tb-kbd">${kbd}</span>`;
@@ -138,6 +148,7 @@ export const CONTROLS_TOOLBAR_HTML = [
     '<span data-reticle-export-msg class="reticle-export-msg" aria-live="polite"></span>',
 ].join('');
 export const CONTROLS_BANNER_HTML = `<div data-reticle-banner class="reticle-banner">${ENDED_BANNER_TEXT}</div>`;
+export const CONTROLS_MARKS_HTML = `<div ${MARKS_ROW_ATTR} class="reticle-marks-row" hidden><span data-reticle-marks-text class="reticle-marks-text"></span><button type="button" ${COPY_MARKS_ATTR} class="reticle-marks-copy" title="${COPY_MARKS_LABEL}">${hiIconHtml(PresenterIcon.COPY, PRESENTER_ICON_SIZE.HELP)}<span>${COPY_MARKS_LABEL}</span></button></div>`;
 export const CONTROLS_FLOWS_HTML = `<div data-reticle-flows class="reticle-flows"><span class="reticle-flows-cap">${FLOWS_LABEL}</span></div>`;
 export const CONTROLS_FOOT_HTML = `<div data-reticle-foot><div class="reticle-foot-stack">${workspaceRowHtml()}</div></div>`;
 function queryControlRefs(root) {

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

@@ -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

package/dist/presenter/presenter-report.js

@@ -28,10 +28,10 @@ export function reportPanelHtml() {
         <button type="button" ${REFER_ATTR} class="reticle-report-share reticle-report-refer">${REPORT_TEXT.REFER}</button>
       </div>
       <div class="reticle-report-links">
-        <a href="${REPORT_LINKS.DOCS}" target="_blank" rel="noreferrer noopener">Docs</a>
-        <a href="${REPORT_LINKS.GITHUB}" target="_blank" rel="noreferrer noopener">GitHub</a>
-        <a href="${REPORT_LINKS.SITE}" target="_blank" rel="noreferrer noopener">reticle.sh</a>
-        <a href="${REPORT_LINKS.DISCORD}" target="_blank" rel="noreferrer noopener">Discord</a>
+        <a data-reticle-link="docs" href="${REPORT_LINKS.DOCS}" target="_blank" rel="noreferrer noopener">Docs</a>
+        <a data-reticle-link="github" href="${REPORT_LINKS.GITHUB}" target="_blank" rel="noreferrer noopener">GitHub</a>
+        <a data-reticle-link="site" href="${REPORT_LINKS.SITE}" target="_blank" rel="noreferrer noopener">reticle.sh</a>
+        <a data-reticle-link="discord" href="${REPORT_LINKS.DISCORD}" target="_blank" rel="noreferrer noopener">Discord</a>
       </div>
     </div>
   </div>`;
@@ -63,7 +63,7 @@ function defects(scope, dashboardUrl) {
         return '';
     const linked = dashboardUrl !== undefined && isSafeDashboardUrl(dashboardUrl);
     const rowLink = linked
-        ? `<a class="reticle-report-defect-link" href="${esc(dashboardUrl)}" target="_blank" rel="noreferrer noopener" title="${REPORT_TEXT.DEFECT_LINK_TITLE}" aria-label="${REPORT_TEXT.DEFECT_LINK_TITLE}">${hiIconHtml(PresenterIcon.VIEW, PRESENTER_ICON_SIZE.SEND)}</a>`
+        ? `<a class="reticle-report-defect-link" data-reticle-link="defect" href="${esc(dashboardUrl)}" target="_blank" rel="noreferrer noopener" title="${REPORT_TEXT.DEFECT_LINK_TITLE}" aria-label="${REPORT_TEXT.DEFECT_LINK_TITLE}">${hiIconHtml(PresenterIcon.VIEW, PRESENTER_ICON_SIZE.SEND)}</a>`
         : '';
     const rows = list
         .map((d) => {
@@ -78,8 +78,9 @@ function defects(scope, dashboardUrl) {
         .join('');
     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>`;
+        : `<a class="reticle-report-defects-more" data-reticle-link="dashboard" href="${esc(dashboardUrl)}" target="_blank" rel="noreferrer noopener">${REPORT_TEXT.DEFECTS_MORE}${scope.counts.failed > list.length ? ` (${String(scope.counts.failed)})` : ''}</a>`;
+    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, projectName) {
     const c = scope.counts;

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

@@ -120,7 +120,8 @@ export const SETTINGS_CSS = `
 [${SETTINGS_PANEL_ATTR}] .reticle-settings-link{
   width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
   border:none;background:transparent;color:rgba(255,255,255,.82);font:inherit;font-size:13px;
-  padding:11px 14px;cursor:pointer;text-align:left;transition:background .12s,color .12s;}
+  padding:11px 14px;cursor:pointer;text-align:left;transition:background .12s,color .12s;
+  text-decoration:none;box-sizing:border-box;}
 [${SETTINGS_PANEL_ATTR}] .reticle-settings-link-caret{display:inline-flex;align-items:center;flex:none;opacity:.55;}
 [${SETTINGS_PANEL_ATTR}] .reticle-settings-link:hover{background:rgba(255,255,255,.04);color:#fff;}
 [${SETTINGS_PANEL_ATTR}] .reticle-settings-link:focus-visible{outline:2px solid rgba(59,130,246,.55);outline-offset:-2px;}

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

@@ -1,3 +1,4 @@
+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';
@@ -8,14 +9,14 @@ export declare const OutputDetail: {
     readonly VERBOSE: "verbose";
 };
 export type OutputDetail = (typeof OutputDetail)[keyof typeof OutputDetail];
-export declare const StatusThemeId: {
+declare const StatusThemeId: {
     readonly SIGNAL: "signal";
     readonly TRAFFIC: "traffic";
     readonly MONO: "mono";
     readonly NEON: "neon";
     readonly EMBER: "ember";
 };
-export type StatusThemeId = (typeof StatusThemeId)[keyof typeof StatusThemeId];
+type StatusThemeId = (typeof StatusThemeId)[keyof typeof StatusThemeId];
 interface StatusTheme {
     id: StatusThemeId;
     label: string;
@@ -23,7 +24,6 @@ interface StatusTheme {
     idle: string;
     ended: string;
 }
-export declare const STATUS_THEMES: readonly StatusTheme[];
 export declare function statusTheme(id: StatusThemeId): StatusTheme;
 export interface PresenterSettings {
     outputDetail: OutputDetail;
@@ -41,14 +41,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 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;
 }
-export declare function applyPresenterSettings(root: HTMLElement, settings: PresenterSettings): void;
 export declare function syncPageBlocker(root: HTMLElement, settings: PresenterSettings, annotateLive: boolean): void;
 export declare function blockerHtml(): string;
 export declare class PresenterSettingsPanel {
@@ -56,6 +57,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

@@ -4,6 +4,7 @@ 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 { DISCOVERY_CALL_URL, FOUNDER_EMAIL, FOUNDER_MAILTO } from '@reticlehq/core';
 import { accountControlHtml } from './presenter-account.js';
 export { SETTINGS_CSS };
 export const OutputDetail = {
@@ -11,14 +12,14 @@ export const OutputDetail = {
     STANDARD: 'standard',
     VERBOSE: 'verbose',
 };
-export const StatusThemeId = {
+const StatusThemeId = {
     SIGNAL: 'signal',
     TRAFFIC: 'traffic',
     MONO: 'mono',
     NEON: 'neon',
     EMBER: 'ember',
 };
-export const STATUS_THEMES = [
+const STATUS_THEMES = [
     {
         id: StatusThemeId.SIGNAL,
         label: 'Signal',
@@ -132,7 +133,7 @@ function settingsHelpIcon() {
 }
 function settingsLabel(text, helpTitle) {
     const help = settingsHelpIcon();
-    return `<span class="reticle-settings-label">${text}<button type="button" class="reticle-settings-help" title="${helpTitle}" aria-label="${helpTitle}">${help}</button></span>`;
+    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>`;
 }
 function settingsToggleRow(key, label, helpTitle, extra = '') {
     return `<div class="reticle-settings-row" ${extra}>
@@ -149,7 +150,29 @@ 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 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}]`);
@@ -159,12 +182,19 @@ export function paintSettingsAccount(root, account, dashboardUrl, details = {})
     row.hidden = 0 === html.length;
     slot.innerHTML = html;
 }
+const FEEDBACK_TEXT = {
+    EMAIL: 'Email the founder',
+    EMAIL_TITLE: `Write to ${FOUNDER_EMAIL}: a problem, a wish, anything`,
+    CALL: 'Book a call',
+    CALL_TITLE: 'Pick a time to talk it through',
+};
 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.';
@@ -191,6 +221,7 @@ 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>
@@ -204,11 +235,13 @@ export function settingsPanelHtml() {
       <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>
+        <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>
     </div>
   </div>`;
 }
-export function applyPresenterSettings(root, settings) {
+function applyPresenterSettings(root, settings) {
     const theme = statusTheme(settings.statusThemeId);
     root.style.setProperty('--reticle-mark-accent', theme.active);
     root.style.setProperty('--reticle-accent', theme.active);
@@ -286,7 +319,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) {
@@ -368,6 +408,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

@@ -83,6 +83,18 @@ 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
@@ -234,6 +246,10 @@ export const SHELL_CSS = `
   transition:opacity .2s var(--reticle-shell-ease),transform .18s var(--reticle-shell-ease);}
 [${OVERLAY}][${MIN_ATTR}="0"] [${HUD}] .reticle-toolbar{
   display:flex;opacity:1;transform:scale(1);pointer-events:auto;}
+/* The HUD block is transformed, which makes it a stacking context at level 0 inside the dock, so a
+   tooltip's z-index only ranked it within the block and it drew behind the chat and settings panels,
+   its siblings. Lift the block while a tooltip can show. */
+[${HUD}]:hover,[${HUD}]:focus-within{z-index:${String(Z_HUD_TOOLTIP)};}
 [${HUD}] .reticle-toolbar-drag{cursor:grab;touch-action:none;user-select:none;}
 [${HUD}] .reticle-toolbar-drag.reticle-drag-handle--dragging{cursor:grabbing;}
 [${HUD}] .reticle-toolbar-actions{

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

@@ -1,6 +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 './carousel/offer-card.js';
 import { type SettingsHost } from './presenter-settings.js';
 interface HudShellCallbacks {
     onChatOpen?: () => void;
@@ -13,7 +15,9 @@ interface HudShellCallbacks {
 }
 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;
@@ -31,4 +35,7 @@ export declare class HudShell {
     showChat(): void;
     pulseFab(active: boolean): void;
 }
+export declare function wasMinimised(): boolean;
+export declare function rememberMinimised(minimised: boolean): void;
+export declare function shouldAutoOpenChat(autoOpenChat: boolean): boolean;
 export {};