@reticlehq/browser 3.2.0 → 3.4.0

package/dist/presenter/carousel/talk-card.js

@@ -0,0 +1,20 @@
+import { DISCOVERY_CALL_URL } from '@reticlehq/core';
+export const TALK_BOOK_ATTR = 'data-reticle-talk-book';
+export const TALK_TEXT = {
+    HEADLINE: 'Talk to Founders',
+    BODY: 'Tell us where Reticle got in your way.',
+    BOOK: 'Book a call',
+};
+const escape = (text) => text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+export function talkCardHtml() {
+    return `<div class="reticle-talk">
+      <span class="reticle-talk-title">${escape(TALK_TEXT.HEADLINE)}</span>
+      <p class="reticle-talk-body">${escape(TALK_TEXT.BODY)}</p>
+      <a ${TALK_BOOK_ATTR} class="reticle-talk-book" href="${escape(DISCOVERY_CALL_URL)}" target="_blank" rel="noopener noreferrer">${escape(TALK_TEXT.BOOK)}</a>
+    </div>`;
+}
+export const TALK_CSS = `
+.reticle-talk-title{display:block;font-weight:600;font-size:12px;padding-right:18px;}
+.reticle-talk-body{margin:6px 0 8px;font-size:11px;line-height:1.45;opacity:.8;}
+.reticle-talk-book{display:inline-block;font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;background:var(--reticle-accent,#4f7cff);color:#fff;text-decoration:none;}
+`;

package/dist/presenter/chrome/presenter-log.d.ts

@@ -6,11 +6,12 @@ export declare const CHIP_LABEL: Record<PresenterMode, string>;
 export declare const DATA_RETICLE_LOG = "data-reticle-log";
 export declare const LOG_TIME_ATTR = "data-reticle-log-time";
 export declare const LOG_CSS: string;
-export declare function scrollLogToLatest(container: HTMLElement): void;
 export declare function settleLogAtLatest(container: HTMLElement): void;
 export interface LogHandle {
     result(r: LogResult): void;
 }
+export declare function trimLogRows(container: HTMLElement, max: number): void;
+export declare function clearLogRows(container: HTMLElement): void;
 export declare function clampLogMax(n: number | undefined): number;
 export declare function humanDuration(ms: number): string;
 export declare function formatElapsed(ms: number): string;

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.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,7 +78,7 @@ 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>`;
+        : `<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>`;
 }

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

@@ -9,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;
@@ -24,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;
@@ -51,7 +50,6 @@ export interface SettingsHost {
     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 {

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}>
@@ -181,6 +182,12 @@ 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);
@@ -228,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);

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

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

@@ -2,7 +2,7 @@ import type { HarnessConfig } from '@reticlehq/core';
 import { PresenterReport } from './presenter-report.js';
 import type { AccountState } from '@reticlehq/core';
 import { type AccountDetails } from './presenter-account.js';
-import { type OfferState } from './presenter-offer.js';
+import { type OfferState } from './carousel/offer-card.js';
 import { type SettingsHost } from './presenter-settings.js';
 interface HudShellCallbacks {
     onChatOpen?: () => void;
@@ -35,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 {};

package/dist/presenter/presenter-shell.js

@@ -1,11 +1,14 @@
+import { appModalOpen } from '../dom/dom-ignore.js';
 import { PresenterReport, reportPanelHtml } from './presenter-report.js';
 import { paintToolbarAccount, TOOLBAR_ACCOUNT_ATTR } from './presenter-workspace.js';
 import { mountAccountControl } from './presenter-account.js';
 import { paintSettingsAccount } from './presenter-settings.js';
-import { CHAT_MIN_ATTR, CHAT_PILL_ATTR, REPORT_ATTR, REPORT_BTN_ATTR, ANNOTATE_BTN_ATTR, CHAT_ATTR, CHAT_TOGGLE_ATTR, CHAT_PANEL_ATTR, DOCK_ATTR, FAB_ATTR, MIN_ATTR, SETTINGS_ATTR, SETTINGS_BTN_ATTR, } from './presenter-config.js';
-import { OFFER_SLOT_ATTR, paintOffer } from './presenter-offer.js';
+import { CHAT_MIN_ATTR, CHAT_PILL_ATTR, REPORT_ATTR, REPORT_BTN_ATTR, ANNOTATE_BTN_ATTR, CHAT_ATTR, CHAT_TOGGLE_ATTR, CHAT_PANEL_ATTR, DOCK_ATTR, FAB_ATTR, MIN_ATTR, SETTINGS_ATTR, SETTINGS_BTN_ATTR, MINIMISED_STORAGE_KEY, } from './presenter-config.js';
+import { offerDismissed } from './carousel/offer-card.js';
+import { paintCarousel } from './carousel/carousel.js';
+import { panelSlides } from './carousel/panel-slides.js';
 import { BRAND_NAME, FAB_TOGGLE_HTML, MARK_SVG } from './chrome/presenter-brand.js';
-import { settleLogAtLatest } from './chrome/presenter-log.js';
+import { DATA_RETICLE_LOG, settleLogAtLatest } from './chrome/presenter-log.js';
 import { installHudDragHandles, installHudPositionGuards } from './presenter-drag.js';
 import { scheduleSyncDockLayout } from './presenter-dock-layout.js';
 import { hiIconHtml, hiToggleIconHtml, PRESENTER_ICON_SIZE, PresenterIcon, } from './icons/presenter-icons.js';
@@ -59,9 +62,22 @@ export class HudShell {
     #pushedOffer;
     paintOffer(offer) {
         this.#pushedOffer = offer;
-        if (this.#root === undefined)
+        this.#paintCarousel();
+    }
+    #paintCarousel() {
+        const log = this.#root?.querySelector(`[${DATA_RETICLE_LOG}]`);
+        if (!(log instanceof HTMLElement))
             return;
-        paintOffer(this.#root, offer, this.#storage());
+        const declined = offerDismissed(this.#storage());
+        paintCarousel(log, panelSlides(this.#pushedOffer, declined), this.#sessionStorage());
+    }
+    #sessionStorage() {
+        try {
+            return globalThis.sessionStorage;
+        }
+        catch {
+            return undefined;
+        }
     }
     #storage() {
         try {
@@ -97,7 +113,6 @@ export class HudShell {
         ${actStripHtml}
         <span class="reticle-tally" data-reticle-tally hidden></span>
         ${bannerHtml}
-        <div ${OFFER_SLOT_ATTR}></div>
         <div class="${HUD_LOG_WELL_CLASS}"><div ${logAttr}></div></div>
         ${flowsHtml}
         ${footHtml}
@@ -248,8 +263,7 @@ export class HudShell {
             const pushed = this.#pushedAccount;
             this.paintAccount(pushed.account, pushed.dashboardUrl, pushed.details);
         }
-        if (this.#pushedOffer !== undefined)
-            this.paintOffer(this.#pushedOffer);
+        this.#paintCarousel();
     }
     teardown() {
         this.#accountTeardown?.();
@@ -283,6 +297,7 @@ export class HudShell {
             return;
         this.#lockTransition();
         this.#root.setAttribute(MIN_ATTR, '0');
+        rememberMinimised(false);
         if (this.#fab !== undefined)
             this.#fab.setAttribute('aria-expanded', 'true');
         this.#callbacks.onExpand?.();
@@ -297,6 +312,7 @@ export class HudShell {
         this.closeChat();
         this.#settings.close();
         this.#root.setAttribute(MIN_ATTR, '1');
+        rememberMinimised(true);
         if (this.#fab !== undefined)
             this.#fab.setAttribute('aria-expanded', 'false');
         this.#callbacks.onCollapse?.();
@@ -367,6 +383,10 @@ export class HudShell {
     #onKeyDown = (e) => {
         if ('Escape' !== e.key || this.#root === undefined)
             return;
+        if (e.defaultPrevented)
+            return;
+        if (appModalOpen(document))
+            return;
         const target = e.target;
         if (target instanceof HTMLElement &&
             ('INPUT' === target.tagName ||
@@ -375,18 +395,36 @@ export class HudShell {
             return;
         }
         if (this.isChatOpen()) {
-            e.preventDefault();
             this.closeChat();
             return;
         }
         if (this.#settings.isOpen()) {
-            e.preventDefault();
             this.#settings.close();
             return;
         }
         if (!this.isCollapsed()) {
-            e.preventDefault();
             this.collapse();
         }
     };
 }
+export function wasMinimised() {
+    try {
+        return '1' === globalThis.sessionStorage.getItem(MINIMISED_STORAGE_KEY);
+    }
+    catch {
+        return false;
+    }
+}
+export function rememberMinimised(minimised) {
+    try {
+        if (minimised)
+            globalThis.sessionStorage.setItem(MINIMISED_STORAGE_KEY, '1');
+        else
+            globalThis.sessionStorage.removeItem(MINIMISED_STORAGE_KEY);
+    }
+    catch {
+    }
+}
+export function shouldAutoOpenChat(autoOpenChat) {
+    return autoOpenChat && !wasMinimised();
+}

package/dist/presenter/presenter-styles.js

@@ -6,7 +6,9 @@ import { SETTINGS_CSS } from './presenter-settings-styles.js';
 import { ACCOUNT_CSS } from './presenter-account-styles.js';
 import { HUD_CHROME_CSS, HUD_LOG_WELL_CSS } from './chrome/presenter-hud-chrome.js';
 import { REPORT_CSS } from './presenter-report-styles.js';
-import { OFFER_CSS } from './presenter-offer.js';
+import { OFFER_CSS } from './carousel/offer-card.js';
+import { TALK_CSS } from './carousel/talk-card.js';
+import { CAROUSEL_CSS } from './carousel/carousel.js';
 export { Z_OVERLAY };
 export const PRESENTER_CSS = `
 [data-reticle-overlay]{position:fixed;inset:0;pointer-events:none;z-index:${String(Z_OVERLAY)};}
@@ -65,5 +67,7 @@ ${SETTINGS_CSS}
 ${REPORT_CSS}
 ${ACCOUNT_CSS}
 ${OFFER_CSS}
+${TALK_CSS}
+${CAROUSEL_CSS}
 ${LOG_CSS}
 ${CONTROLS_CSS}`;

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

@@ -1,14 +1,7 @@
 import type { AccountState } from '@reticlehq/core';
 import { type AccountDetails } from './presenter-account.js';
 export declare const TOOLBAR_ACCOUNT_ATTR = "data-reticle-toolbar-account";
-export declare function readWorkspaceRoot(): string | undefined;
 export declare function workspaceFolderLabel(root: string): string;
-export declare function readProjectIdFromUrl(): string | undefined;
-export declare function workspaceSummary(): {
-    folder: string;
-    root?: string;
-    projectId?: string;
-};
 export declare function workspaceRowHtml(): string;
 export declare function paintWorkspace(root: HTMLElement): void;
 export declare function mountWorkspaceSelector(root: HTMLElement): () => void;