@reticlehq/browser 2.13.1 → 3.1.0

package/dist/presenter/presenter-config.js

@@ -1,163 +1,76 @@
-/**
- * Presenter tunables + option surface. Split out of presenter.ts so that file is just the controller
- * under the size cap; these are pure declarations (interfaces + named constants), no behavior. None
- * cross the browser↔bridge↔agent wire, so they live here, not in @reticlehq/core.
- */
-/**
- * Border behavior.
- * - 'session': base border persists connect→disconnect; the busy machine drives only the shimmer.
- * - 'busy': back-compat - the busy machine toggles the base border on/off.
- */
 export const BorderMode = { SESSION: 'session', BUSY: 'busy' };
 export const DEFAULT_BORDER_MODE = BorderMode.SESSION;
 export const DATA_BUSY = 'data-busy';
 export const BUSY_ON = '1';
 export const BUSY_OFF = '0';
 export const DEFAULT_PACE = 450;
-/**
- * The pace to actually use: the default in a browser a human is watching, zero in an automated one.
- *
- * The HUD paces `beforeAct` so a person can see the cursor reach the element before it fires. In a
- * headless browser that is 450ms of nothing, charged to the agent, on every action. Measured with
- * RETICLE_TRACE across the e2e battery: 42 `act` round-trips, 40 of them in a 452–460ms band -
- * a fixed cost, not app work - 19.7 SECONDS in total, 98.5% of all time the battery spent in the
- * browser, while every other command ran in 1–4ms.
- *
- * `navigator.webdriver` is the discriminator because it is exactly the question being asked: true
- * under automation (Playwright, CDP, the browser pool's leased tabs, CI), false in the dev browser
- * a human has open - the case the HUD exists for, which keeps its pacing untouched.
- *
- * An EXPLICIT `paceMs` always wins: a recorded demo runs under automation and still wants the glide,
- * and an option that quietly ignores what the caller asked for is worse than no option.
- */
 export function effectivePaceMs(requested, nav = 'undefined' === typeof navigator ? undefined : navigator) {
     if (requested !== undefined)
         return requested;
     return true === nav?.webdriver ? 0 : DEFAULT_PACE;
 }
-/**
- * Glow state machine phases (exposed via glowPhase for tests). A burst of activity flips the
- * border IN once on the first activity, holds steady (the slow reticle-pulse breathing keeps running
- * uninterrupted - no per-action restart/strobe), then fades OUT once after a quiet window.
- */
 export const GlowPhase = {
     IDLE: 'idle',
     BUSY: 'busy',
     FADING: 'fading',
 };
-/** Quiet window before busy -> fading. */
 export const IDLE_AFTER_MS = 700;
-/** Liveness heartbeat: how often the act strip refreshes its "idle · {duration}" clock. */
 export const HEARTBEAT_MS = 1000;
-/**
- * After this much quiet, the act strip stops showing the last action and starts a LIVE, ticking
- * "◌ idle · {duration} since last action" - so a watcher can tell a 3s think from a dead agent
- * (the killer gap: a frozen panel used to look identical whether the agent paused or stopped).
- */
 export const IDLE_NOTICE_MS = 4000;
-/** Act-strip copy (presenter-only UI). */
 export const ACT_STRIP = {
     READY: 'Ready',
-    IDLE_PREFIX: 'idle · ',
+    PLANNING_PREFIX: 'planning next action · ',
+    STOPPED: 'stopped',
+    STOPPED_PREFIX: 'stopped · ',
     NOW: 'now',
     SINCE_LAST: ' since last action',
 };
-/** Default session-idle-end: after this much quiet the session auto-ends (glow off, panel persists
- * for analysis). Agent-tweakable via reticle_session { idleEndMs } for the app's needs. */
 export const IDLE_END_MS = 300_000;
-/** Floor for a tweaked idle-end so the agent can't set a uselessly tiny window. */
 export const IDLE_END_MIN_MS = 5_000;
-/** Must match the glow CSS opacity transition.25s) so phase reaches idle after the fade paints. */
 export const GLOW_FADE_MS = 250;
 export const GLOW_ON = '1';
 export const GLOW_OFF = '0';
 export const DATA_ON = 'data-on';
-/** The overlay root's state attribute, which the shell styles resolve colour against. */
 export const STATE_ATTR = 'data-reticle-state';
-/**
- * Not a SessionState: there is no session. It is the absence of one, said out loud.
- *
- * Kept off `SessionState` deliberately — that enum crosses the wire, and this state exists only
- * because nothing crossed the wire.
- */
 export const UNREACHABLE_STATE = 'unreachable';
-/** Overlay-root attribute toggled when the HUD is collapsed to the FAB. */
 export const MIN_ATTR = 'data-reticle-min';
-/** Overlay-root attribute toggled when the agent chat panel is open. */
 export const CHAT_ATTR = 'data-reticle-chat';
-/** Fixed dock wrapper that stacks chat above the morphing HUD shell. */
 export const DOCK_ATTR = 'data-reticle-dock';
-/** Collapsed circular control that expands the toolbar. */
 export const FAB_ATTR = 'data-reticle-fab';
-/** Toolbar chat toggle button. */
 export const CHAT_TOGGLE_ATTR = 'data-reticle-chat-toggle';
-/** Agent chat panel anchored to the dock. */
 export const CHAT_PANEL_ATTR = 'data-reticle-chat-panel';
-/** Chat panel opens above or below the HUD bar depending on viewport space. */
 export const CHAT_PLACEMENT_ATTR = 'data-reticle-chat-placement';
-/** Settings card opens above or below the HUD bar depending on viewport space. */
 export const SETTINGS_PLACEMENT_ATTR = 'data-reticle-settings-placement';
-/** Horizontal alignment of dock-anchored panels (start = left, end = right). */
 export const DOCK_ALIGN_ATTR = 'data-reticle-dock-align';
 export const Placement = { ABOVE: 'above', BELOW: 'below' };
-/** Show/hide annotation markers. */
 export const MARKERS_BTN_ATTR = 'data-reticle-markers-btn';
-/** Clear every annotation on the page. */
 export const CLEAR_MARKS_ATTR = 'data-reticle-clear-marks';
-/** Collapsed FAB annotation-count badge. */
 export const MARK_COUNT_ATTR = 'data-reticle-mark-count';
-/**
- * Turn annotation on and off from the toolbar.
- *
- * Annotation used to be reachable only as a side effect of expanding the HUD, which meant there was
- * no way to keep the HUD open and stop annotating, and nothing on screen said the mode existed at
- * all. It is a mode the user chooses, so it gets a control they can see and press.
- */
 export const ANNOTATE_BTN_ATTR = 'data-reticle-annotate-btn';
-/** Minimise the agent chat back to the toolbar, without collapsing the whole HUD. */
 export const CHAT_MIN_ATTR = 'data-reticle-chat-min';
-/** Overlay flag: is the impact report on screen. */
 export const REPORT_ATTR = 'data-reticle-report';
-/** The report panel itself. */
 export const REPORT_PANEL_ATTR = 'data-reticle-report-panel';
-/** The report's close button. */
 export const REPORT_CLOSE_ATTR = 'data-reticle-report-close';
-/** The toolbar button that opens the report. */
 export const REPORT_BTN_ATTR = 'data-reticle-report-btn';
-/** The capsule that stands in for the chat while it is minimised - state dot + last action. */
 export const CHAT_PILL_ATTR = 'data-reticle-chat-pill';
-/** Settings gear is open - the card sits above the dock. */
 export const SETTINGS_ATTR = 'data-reticle-settings';
 export const SETTINGS_BTN_ATTR = 'data-reticle-settings-btn';
 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';
-/** Accent swatch applied to the dock chrome. */
-/** Overlay flag: is the page-edge glow wanted at all (user setting). */
 export const AMBIENT_GLOW_ATTR = 'data-reticle-ambient-glow';
-/** Overlay mirror of the activity strip's liveness, so CSS can pick the ACTIVE status colour. */
 export const LIVENESS_ATTR = 'data-reticle-live';
-/** When 1, a transparent blocker captures page pointer events. */
 export const BLOCK_ATTR = 'data-reticle-block';
-/** When 1, the dock is hidden until the page reloads. */
 export const HIDDEN_UNTIL_RESTART_ATTR = 'data-reticle-hidden';
-/** When 0, activity-log timestamps are hidden. */
 export const LOG_TIMESTAMPS_ATTR = 'data-reticle-log-ts';
-/** When 1, the chat panel uses a narrower width. */
-/** When 1, HUD motion is reduced for accessibility. */
 export const REDUCE_MOTION_ATTR = 'data-reticle-reduce-motion';
-/** Docs opened from the settings footer. */
 export const MCP_DOCS_URL = 'https://github.com/reticlehq/reticle/blob/main/docs/getting-started.md';
-/** HUD has been dragged off the default dock - positioned with explicit left/top. */
 export const HUD_DRAGGED_ATTR = 'data-dragged';
-/** CSS custom properties written when the HUD is dragged. */
 export const HUD_POS_X_VAR = '--reticle-hud-x';
 export const HUD_POS_Y_VAR = '--reticle-hud-y';
-/** Pointer movement below this threshold is treated as a click, not a drag. */
 export const HUD_DRAG_THRESHOLD_PX = 4;
-/** Minimum gap between a dragged HUD and the viewport edge. */
 export const HUD_DOCK_MARGIN_PX = 8;
-/** Interactive nodes inside the drag handle that must not start a drag (not the FAB itself). */
-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], [data-reticle-send], 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-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

@@ -1,21 +1,10 @@
 import { HumanControlKind, PresenterTone, SessionState } from '@reticlehq/core';
-/** Border fade-out delay after a session ends (native timer; presenter-only tunable). */
+export type { ControlIntent, ControlHandler } from './presenter-config.js';
 export declare const ENDED_FADE_MS = 4000;
-/** Payload the panel hands to its host when the human drives a control. */
-export interface ControlIntent {
-    kind: HumanControlKind;
-    text?: string;
-}
-export type ControlHandler = (intent: ControlIntent) => void;
-/** CSS for the control surface (injected with the rest of the presenter stylesheet). */
 export declare const CONTROLS_CSS: string;
-/** Icon toolbar: pause, chat, markers, end, clear - copy/export appear after a run ends. */
 export declare const CONTROLS_TOOLBAR_HTML: string;
-/** Banner markup (between head and log, hidden unless ended). */
 export declare const CONTROLS_BANNER_HTML = "<div data-reticle-banner class=\"reticle-banner\">Session ended</div>";
-/** Replay-a-flow row (between log and footer); buttons are filled in by setFlows once flows arrive. */
 export declare const CONTROLS_FLOWS_HTML = "<div data-reticle-flows class=\"reticle-flows\"><span class=\"reticle-flows-cap\">Replay a flow</span></div>";
-/** Footer markup: composer only (export icons live in the toolbar). */
 export declare const CONTROLS_FOOT_HTML: string;
 interface ControlPanelHost {
     emit: (kind: HumanControlKind, text?: string) => void;
@@ -25,36 +14,13 @@ interface ControlPanelHost {
     clearRunLog?: () => void;
     onStateChange?: (state: SessionState) => void;
 }
-/**
- * The live-control panel: owns the control element refs, the SessionState, the ended-fade timer,
- * the DOM wiring, and the data-reticle-state visual machine. Split out of Presenter to keep both files
- * under the 500-line cap. A click handler both emits a control AND optimistically applies state; the
- * server's PRESENTER echo re-syncs via setState only (never emits) so a control is delivered once.
- */
 export declare class ControlPanel {
     #private;
     constructor(host: ControlPanelHost);
     get state(): SessionState;
-    /** Query control refs out of the mounted root and bind the DOM listeners, then paint active. */
     mount(root: HTMLElement, glow: HTMLElement | undefined): void;
-    /** Clear any pending ended-fade timer (called from Presenter.destroy). */
     teardown(): void;
-    /** Render the replayable-flow chips from the server push. Each ▶ click re-runs that flow, no agent.
-     * Takes the raw wire value and narrows it here (the panel is the consumer of this push). */
     setFlows(flows: unknown): void;
-    /**
-     * Re-render the replay chips for the CURRENT page. A flow "starts here" iff its first step's anchor
-     * (a testid `start` hint) is present in the live DOM; flows with no start hint (signal/role-first,
-     * un-checkable) always show. Called on connect and on every route change so the list tracks the page -
-     * so you never see (or click) a flow that can't replay from where you are. Existing flows benefit
-     * without re-recording, since the hint is derived from the first step, not stored on the flow.
-     */
     refilterFlows(): void;
-    /**
-     * Drive the panel's visual state. Idempotent; NEVER emits a control - the shared path for both the
-     * optimistic local click and the authoritative server PRESENTER echo. Only the ended-border fade
-     * touches a clock, via the injected native timer.
-     */
     setState(state: SessionState, text?: string, tone?: PresenterTone): void;
 }
-export {};

package/dist/presenter/presenter-controls.js

@@ -1,49 +1,31 @@
 import { HumanControlKind, PresenterTone, SessionState } from '@reticlehq/core';
-import { nativeSetTimeout, nativeClearTimeout } from '../timers/native-timers.js';
+import { nativeSetTimeout, nativeClearTimeout } from '../timers/native/native-timers.js';
 import { CHAT_TOGGLE_ATTR, CLEAR_MARKS_ATTR, MARKERS_BTN_ATTR } from './presenter-config.js';
-import { PresenterIcon, PRESENTER_ICON_SIZE, hiIcon, hiIconHtml, hiToggleIconHtml, } from './presenter-icons.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';
-// Live-control panel: the two-way control surface inside the floating HUD - Pause/Resume + End
-// (header), a message input + Send (footer), and the data-reticle-state visual machine. Split out of
-// presenter.ts to keep both files under the 500-line cap (mirrors the presenter-log.ts split).
-// All nodes carry data-reticle-* attrs so they're excluded from snapshots (see dom-ignore.ts). The
-// strings here are presenter-only UI; the control kinds + state values reuse protocol constants.
-/** data-reticle-state attribute on the overlay root; its value is always a SessionState. */
 const DATA_RETICLE_STATE = 'data-reticle-state';
-/** data-reticle-tone on the overlay root - waiting/ask/warn distinguishes how the agent handed back. */
 const DATA_RETICLE_TONE = 'data-reticle-tone';
 const DATA_ON = 'data-on';
 const GLOW_OFF = '0';
-/** Button copy (presenter-only UI; never a wire string). */
 const CONTROL_LABEL = {
     PAUSE: 'Pause',
     RESUME: 'Resume',
     END: 'End',
     SEND: 'Send',
 };
-const INPUT_PLACEHOLDER = 'Tell the agent something…';
-/** Accessible name for the composer (a placeholder is not an accessible name). */
-const INPUT_ARIA_LABEL = 'Message to the agent';
 const PAUSED_BADGE_TEXT = 'PAUSED';
 const ENDED_BANNER_TEXT = 'Session ended';
 const COPY_LABEL = 'Copy run';
 const EXPORT_LABEL = 'Export';
 const FLOWS_LABEL = 'Replay a flow';
 const COPIED_TEXT = 'Copied ✓';
-/** Download filename for the exported run state. */
 const RUN_FILENAME = 'reticle-run.json';
-/** Border fade-out delay after a session ends (native timer; presenter-only tunable). */
 export const ENDED_FADE_MS = 4000;
-/** Max composer height (px) before it scrolls. One source for both the CSS cap and the JS auto-grow
- * clamp - they measure the same border-box, so the scrollbar appears exactly when growth stops. */
-const MSG_MAX_H = 96;
-/** CSS for the control surface (injected with the rest of the presenter stylesheet). */
 export const CONTROLS_CSS = `
 [data-reticle-chat-panel] [data-reticle-foot]{flex:none;padding:8px 10px 10px;border-top:1px solid rgba(255,255,255,.07);
   background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.55) 100%);pointer-events:auto;}
 [data-reticle-chat-panel] .reticle-hud-log-well{margin:0 0 4px;}
-[data-reticle-chat-panel] .reticle-composer-stack{display:flex;flex-direction:column;gap:6px;}
 [data-reticle-chat-panel] .reticle-workspace-wrap{position:relative;align-self:flex-start;max-width:100%;}
 [data-reticle-chat-panel] .reticle-workspace{
   display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:3px 8px 3px 6px;border-radius:999px;cursor:pointer;
@@ -75,33 +57,14 @@ export const CONTROLS_CSS = `
   background:rgba(255,255,255,.06);color:rgba(255,255,255,.7);cursor:pointer;line-height:0;transition:background .12s,color .12s;}
 [data-reticle-chat-panel] .reticle-workspace-copy:hover:not(:disabled){background:rgba(255,255,255,.12);color:#fff;}
 [data-reticle-chat-panel] .reticle-workspace-copy:disabled{opacity:.35;cursor:not-allowed;}
+/* The account capsule, to the right of the menu title. Matches the local idiom in this block:
+   the workspace menu predates the design tokens used in the report panel and states its own
+   greys, so a token here would be the only one and would not match its neighbours. */
+[data-reticle-chat-panel] .reticle-workspace-menu-actions{
+  display:flex;align-items:center;gap:6px;}
 [data-reticle-chat-panel] .reticle-workspace-menu-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:4px 0;}
 [data-reticle-chat-panel] .reticle-workspace-menu-k{flex:none;color:rgba(255,255,255,.42);}
 [data-reticle-chat-panel] .reticle-workspace-menu-v{min-width:0;text-align:right;color:rgba(255,255,255,.9);font-weight:500;word-break:break-all;}
-[data-reticle-chat-panel] .reticle-composer{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.03);
-  border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:4px 4px 4px 14px;
-  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:border-color .2s,box-shadow .2s,background .2s;}
-[data-reticle-chat-panel] .reticle-composer:focus-within{
-  border-color:color-mix(in srgb,var(--reticle-accent) 50%,transparent);background:rgba(255,255,255,.06);
-  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),
-    0 0 0 1px color-mix(in srgb,var(--reticle-accent) 50%,transparent);}
-[data-reticle-chat-panel] .reticle-msg{flex:1;min-width:0;pointer-events:auto;background:transparent;border:none;outline:none;resize:none;
-  box-sizing:border-box;color:var(--reticle-fg);font-family:var(--reticle-font);font-size:12.5px;line-height:18px;
-  height:28px;min-height:28px;max-height:${MSG_MAX_H}px;padding:5px 0;overflow-y:auto;
-  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent;}
-[data-reticle-chat-panel] .reticle-msg::-webkit-scrollbar{width:9px;}
-[data-reticle-chat-panel] .reticle-msg::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:9px;border:2px solid transparent;background-clip:content-box;}
-[data-reticle-chat-panel] .reticle-msg::placeholder{color:var(--reticle-faint);}
-[data-reticle-chat-panel] .reticle-msg:disabled{opacity:.5;}
-[data-reticle-chat-panel] .reticle-send{flex:none;width:28px;height:28px;padding:0;border-radius:50%;border:none;cursor:pointer;pointer-events:auto;
-  background:var(--reticle-accent);color:#ffffff;display:inline-flex;align-items:center;justify-content:center;
-  transition:background .15s,transform .1s,box-shadow .15s;
-  box-shadow:0 1px 3px color-mix(in srgb,var(--reticle-accent) 30%,transparent);}
-[data-reticle-chat-panel] .reticle-send:hover{
-  background:color-mix(in srgb,var(--reticle-accent) 85%,#000);
-  box-shadow:0 2px 6px color-mix(in srgb,var(--reticle-accent) 40%,transparent);}
-[data-reticle-chat-panel] .reticle-send:active{transform:scale(.92);}
-[data-reticle-chat-panel] .reticle-send:disabled{background:#374151;color:#9ca3af;box-shadow:none;opacity:.5;cursor:default;}
 [data-reticle-chat-panel] .reticle-banner{display:none;flex:none;align-items:center;gap:8px;padding:10px 14px;color:var(--reticle-fg);
   font-size:12px;font-weight:500;border-bottom:1px solid var(--reticle-line2);background:var(--reticle-surface);}
 [data-reticle-overlay][data-reticle-state="ended"] [data-reticle-chat-panel] .reticle-banner{display:block;}
@@ -141,7 +104,6 @@ export const CONTROLS_CSS = `
 [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;}
 `;
-/** Swap pause/resume icon + accessible label without visible text clutter in the toolbar. */
 function paintPauseBtn(btn, paused) {
     const iconName = paused ? PresenterIcon.PLAY : PresenterIcon.PAUSE;
     const labelText = paused ? CONTROL_LABEL.RESUME : CONTROL_LABEL.PAUSE;
@@ -165,7 +127,6 @@ function pauseToolbarHtml() {
     const tip = `<span class="reticle-tb-tip">${CONTROL_LABEL.PAUSE}</span>`;
     return `<div class="reticle-tb-wrap reticle-tb-wrap--pause">${btn}${badge}${tip}</div>`;
 }
-/** Icon toolbar: pause, chat, markers, end, clear - copy/export appear after a run ends. */
 export const CONTROLS_TOOLBAR_HTML = [
     pauseToolbarHtml(),
     tbWrap(`<button type="button" ${CHAT_TOGGLE_ATTR} class="reticle-tb-btn reticle-tb-btn--toggle" title="${CHAT_LABEL}" aria-label="${CHAT_LABEL}" aria-pressed="false" data-active="0">${hiToggleIconHtml(PresenterIcon.MESSAGE, TB)}</button>`, CHAT_LABEL),
@@ -176,18 +137,13 @@ export const CONTROLS_TOOLBAR_HTML = [
     `<button type="button" data-reticle-export class="reticle-tb-btn reticle-tb-btn--export" title="${EXPORT_LABEL}" aria-label="${EXPORT_LABEL}" hidden>${hiIconHtml(PresenterIcon.DOWNLOAD, TB)}</button>`,
     '<span data-reticle-export-msg class="reticle-export-msg" aria-live="polite"></span>',
 ].join('');
-/** Banner markup (between head and log, hidden unless ended). */
 export const CONTROLS_BANNER_HTML = `<div data-reticle-banner class="reticle-banner">${ENDED_BANNER_TEXT}</div>`;
-/** Replay-a-flow row (between log and footer); buttons are filled in by setFlows once flows arrive. */
 export const CONTROLS_FLOWS_HTML = `<div data-reticle-flows class="reticle-flows"><span class="reticle-flows-cap">${FLOWS_LABEL}</span></div>`;
-/** Footer markup: composer only (export icons live in the toolbar). */
-export const CONTROLS_FOOT_HTML = `<div data-reticle-foot><div class="reticle-composer-stack">${workspaceRowHtml()}<div class="reticle-composer"><textarea data-reticle-input class="reticle-msg" rows="1" aria-label="${INPUT_ARIA_LABEL}" placeholder="${INPUT_PLACEHOLDER}"></textarea><button type="button" data-reticle-send class="reticle-send" aria-label="${CONTROL_LABEL.SEND}">${hiIconHtml(PresenterIcon.SEND, PRESENTER_ICON_SIZE.SEND)}</button></div></div></div>`;
+export const CONTROLS_FOOT_HTML = `<div data-reticle-foot><div class="reticle-foot-stack">${workspaceRowHtml()}</div></div>`;
 function queryControlRefs(root) {
     return {
         pauseBtn: root.querySelector('[data-reticle-pause]') ?? undefined,
         endBtn: root.querySelector('[data-reticle-end]') ?? undefined,
-        input: root.querySelector('[data-reticle-input]') ?? undefined,
-        sendBtn: root.querySelector('[data-reticle-send]') ?? undefined,
         banner: root.querySelector('[data-reticle-banner]') ?? undefined,
         copyBtn: root.querySelector('[data-reticle-copy]') ?? undefined,
         exportBtn: root.querySelector('[data-reticle-export]') ?? undefined,
@@ -195,18 +151,10 @@ function queryControlRefs(root) {
         flows: root.querySelector('[data-reticle-flows]') ?? undefined,
     };
 }
-/**
- * The live-control panel: owns the control element refs, the SessionState, the ended-fade timer,
- * the DOM wiring, and the data-reticle-state visual machine. Split out of Presenter to keep both files
- * under the 500-line cap. A click handler both emits a control AND optimistically applies state; the
- * server's PRESENTER echo re-syncs via setState only (never emits) so a control is delivered once.
- */
 export class ControlPanel {
     #refs = {
         pauseBtn: undefined,
         endBtn: undefined,
-        input: undefined,
-        sendBtn: undefined,
         banner: undefined,
         copyBtn: undefined,
         exportBtn: undefined,
@@ -217,16 +165,8 @@ export class ControlPanel {
     #fadeTimer;
     #root;
     #glow;
-    /** The full replayable-flow list from the last push; re-filtered per page on route change. */
     #flowItems = [];
     #workspaceTeardown;
-    /**
-     * One signal for every listener this controller registers.
-     *
-     * All eight are anonymous closures over `this`, so there was no reference to hand
-     * `removeEventListener` and teardown removed none of them — each kept the controller reachable
-     * for as long as its element lived, and a second mount stacked another set on top.
-     */
     #listeners;
     #host;
     constructor(host) {
@@ -235,7 +175,6 @@ export class ControlPanel {
     get state() {
         return this.#state;
     }
-    /** Query control refs out of the mounted root and bind the DOM listeners, then paint active. */
     mount(root, glow) {
         this.#listeners = new AbortController();
         const { signal } = this.#listeners;
@@ -248,16 +187,6 @@ export class ControlPanel {
         }
         this.#refs.pauseBtn?.addEventListener('click', () => this.#onPauseToggle(), { signal });
         this.#refs.endBtn?.addEventListener('click', () => this.#onEnd(), { signal });
-        this.#refs.sendBtn?.addEventListener('click', () => this.#onSend(), { signal });
-        this.#refs.input?.addEventListener('keydown', (e) => {
-            // Enter sends; Shift+Enter inserts a newline (falls through to the textarea's default).
-            if (e instanceof KeyboardEvent && 'Enter' === e.key && !e.shiftKey) {
-                e.preventDefault();
-                this.#onSend();
-            }
-        }, { signal });
-        this.#refs.input?.addEventListener('input', () => this.#autosize(), { signal });
-        // Replay-a-flow: one ▶ click re-runs a saved flow (no agent). Delegated so it covers all chips.
         this.#refs.flows?.addEventListener('click', (e) => {
             const target = e.target;
             if (!(target instanceof HTMLElement))
@@ -272,11 +201,9 @@ export class ControlPanel {
         this.#workspaceTeardown = mountWorkspaceSelector(root);
         this.setState(SessionState.ACTIVE);
     }
-    /** Serialize the run state to pretty JSON for Copy/Export. */
     #runJson() {
         return JSON.stringify(this.#host.runState(), null, 2);
     }
-    /** Copy the run state to the clipboard (with a brief "Copied ✓" flash). */
     #onCopy() {
         void navigator.clipboard?.writeText(this.#runJson());
         if (getPresenterSettings().clearOnCopy) {
@@ -289,7 +216,6 @@ export class ControlPanel {
             nativeSetTimeout(() => msg.setAttribute('data-show', '0'), 1600);
         }
     }
-    /** Download the run state as reticle-run.json. */
     #onExport() {
         const blob = new Blob([this.#runJson()], { type: 'application/json' });
         const url = URL.createObjectURL(blob);
@@ -302,9 +228,7 @@ export class ControlPanel {
             this.#host.clearRunLog?.();
         }
     }
-    /** Clear any pending ended-fade timer (called from Presenter.destroy). */
     teardown() {
-        // All eight registrations, in one call that cannot drift from mount().
         this.#listeners?.abort();
         this.#listeners = undefined;
         this.#workspaceTeardown?.();
@@ -329,32 +253,6 @@ export class ControlPanel {
         this.#host.emit(HumanControlKind.END);
         this.setState(SessionState.ENDED);
     }
-    #onSend() {
-        if (this.#state === SessionState.ENDED)
-            return;
-        const text = (this.#refs.input?.value ?? '').trim();
-        if (0 === text.length)
-            return;
-        this.#host.emit(HumanControlKind.MESSAGE, text);
-        this.#host.logHuman(text);
-        if (getPresenterSettings().clearOnCopy) {
-            this.#host.clearRunLog?.();
-        }
-        if (this.#refs.input !== undefined)
-            this.#refs.input.value = '';
-        this.#autosize();
-    }
-    /** Grow the composer to fit its content (up to the CSS max-height), then shrink back - soothing,
-     * no scrollbar until it's genuinely long. Driven on input and after a send clears the field. */
-    #autosize() {
-        const el = this.#refs.input;
-        if (el === undefined)
-            return;
-        el.style.height = 'auto';
-        el.style.height = `${String(Math.min(el.scrollHeight, MSG_MAX_H))}px`;
-    }
-    /** Render the replayable-flow chips from the server push. Each ▶ click re-runs that flow, no agent.
-     * Takes the raw wire value and narrows it here (the panel is the consumer of this push). */
     setFlows(flows) {
         const list = Array.isArray(flows) ? flows : [];
         this.#flowItems = list
@@ -374,13 +272,6 @@ export class ControlPanel {
             .filter((c) => c !== null);
         this.#renderFlows();
     }
-    /**
-     * Re-render the replay chips for the CURRENT page. A flow "starts here" iff its first step's anchor
-     * (a testid `start` hint) is present in the live DOM; flows with no start hint (signal/role-first,
-     * un-checkable) always show. Called on connect and on every route change so the list tracks the page -
-     * so you never see (or click) a flow that can't replay from where you are. Existing flows benefit
-     * without re-recording, since the hint is derived from the first step, not stored on the flow.
-     */
     refilterFlows() {
         this.#renderFlows();
     }
@@ -391,26 +282,20 @@ export class ControlPanel {
         const doc = el.ownerDocument;
         const testids = new Set(Array.from(doc.querySelectorAll('[data-testid]')).map((n) => n.getAttribute('data-testid')));
         const visible = this.#flowItems.filter((f) => f.start === undefined || testids.has(f.start));
-        el.querySelectorAll('[data-reticle-replay]').forEach((b) => b.remove()); // rebuild, keep the caption
+        el.querySelectorAll('[data-reticle-replay]').forEach((b) => b.remove());
         for (const flow of visible) {
             const btn = doc.createElement('button');
             btn.type = 'button';
             btn.className = 'reticle-flow';
-            btn.setAttribute('data-reticle-replay', flow.name); // setAttribute → no markup injection from a name
+            btn.setAttribute('data-reticle-replay', flow.name);
             btn.textContent = `▶ ${flow.name}`;
             el.appendChild(btn);
         }
         el.setAttribute('data-has', visible.length > 0 ? '1' : '0');
     }
-    /**
-     * Drive the panel's visual state. Idempotent; NEVER emits a control - the shared path for both the
-     * optimistic local click and the authoritative server PRESENTER echo. Only the ended-border fade
-     * touches a clock, via the injected native timer.
-     */
     setState(state, text, tone) {
         this.#state = state;
         this.#root?.setAttribute(DATA_RETICLE_STATE, state);
-        // A handoff tone (waiting/ask/warn) drives a distinct panel treatment; calm/undefined = a plain end.
         const handoff = tone !== undefined && tone !== PresenterTone.CALM;
         if (handoff)
             this.#root?.setAttribute(DATA_RETICLE_TONE, tone);
@@ -440,12 +325,6 @@ export class ControlPanel {
             else
                 refs.exportBtn.setAttribute('hidden', '');
         }
-        if (refs.sendBtn !== undefined)
-            refs.sendBtn.disabled = ended;
-        if (refs.input !== undefined)
-            refs.input.disabled = ended;
-        // A calm end leads with "Session ended"; a handoff (waiting/ask/warn) leads with the notice itself,
-        // since the toned styling already conveys "ended" and the notice is the actionable headline.
         if (refs.banner !== undefined) {
             const summary = text !== undefined && text.trim().length > 0 ? text.trim() : '';
             refs.banner.textContent =
@@ -454,8 +333,6 @@ export class ControlPanel {
                     : `${ENDED_BANNER_TEXT}${summary.length > 0 ? ` · ${summary}` : ''}`;
         }
         if (ended) {
-            // End the run: fade out the page BORDER (testing is over) but KEEP the panel so the human can
-            // read the result and Copy/Export the run state. The composer disables; the export row reveals.
             const glow = this.#glow;
             this.#fadeTimer = nativeSetTimeout(() => {
                 glow?.setAttribute(DATA_ON, GLOW_OFF);

package/dist/presenter/presenter-dock-layout.d.ts

@@ -1,6 +1,3 @@
-/** Flip floating panels and reclamp a dragged dock so everything stays on-screen. */
 export declare function syncDockLayout(dock: HTMLElement, overlay: HTMLElement): void;
-/** Batch dock layout work on the next frame (resize, panel open, drag end). */
 export declare function scheduleSyncDockLayout(dock: HTMLElement, overlay: HTMLElement): void;
-/** Resolve the dock node from an overlay root. */
 export declare function findDock(overlay: HTMLElement): HTMLElement | undefined;

package/dist/presenter/presenter-dock-layout.js

@@ -1,5 +1,5 @@
 import { CHAT_ATTR, CHAT_PANEL_ATTR, CHAT_PLACEMENT_ATTR, DOCK_ALIGN_ATTR, DOCK_ATTR, HUD_DOCK_MARGIN_PX, Placement, SETTINGS_ATTR, SETTINGS_PANEL_ATTR, SETTINGS_PLACEMENT_ATTR, } from './presenter-config.js';
-import { applyHudPosition, isHudDragged, readHudPosition, relayoutHudPosition, } from './presenter-drag.js';
+import { applyHudPosition, isHudDragged, readHudPosition, relayoutHudPosition, } from './presenter-hud-position.js';
 const HUD_ATTR = 'data-reticle-hud';
 const DOCK_PANEL_GAP_PX = 8;
 const DOCK_SETTINGS_GAP_PX = 12;
@@ -49,7 +49,6 @@ function visiblePanel(el) {
     const style = window.getComputedStyle(el);
     return 'none' !== style.display && 'hidden' !== style.visibility;
 }
-/** Resolve the HUD bar inside a dock (or the node itself in minimal fixtures). */
 function resolveHudBar(dock) {
     const nested = dock.querySelector(`[${HUD_ATTR}]`);
     if (nested instanceof HTMLElement)
@@ -60,7 +59,6 @@ function resolveHudBar(dock) {
         return dock;
     return undefined;
 }
-/** Flip floating panels and reclamp a dragged dock so everything stays on-screen. */
 export function syncDockLayout(dock, overlay) {
     const hud = resolveHudBar(dock);
     if (hud === undefined)
@@ -153,7 +151,6 @@ export function syncDockLayout(dock, overlay) {
     applyHudPosition(dock, base.left + dx, base.top + dy);
 }
 let syncRafId;
-/** Batch dock layout work on the next frame (resize, panel open, drag end). */
 export function scheduleSyncDockLayout(dock, overlay) {
     if (syncRafId !== undefined)
         cancelAnimationFrame(syncRafId);
@@ -163,7 +160,6 @@ export function scheduleSyncDockLayout(dock, overlay) {
         requestAnimationFrame(() => syncDockLayout(dock, overlay));
     });
 }
-/** Resolve the dock node from an overlay root. */
 export function findDock(overlay) {
     const dock = overlay.querySelector(`[${DOCK_ATTR}]`);
     return dock instanceof HTMLElement ? dock : undefined;

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

@@ -1,48 +1,8 @@
-export interface HudDragCallbacks {
+export { applyHudPosition, isHudDragged, readHudPosition, relayoutHudPosition, clampHudPosition, hudLayoutBox, resetHudDockPosition, } from './presenter-hud-position.js';
+interface HudDragCallbacks {
     onDragMove?: () => void;
-    /** Fires when a drag gesture ends; `moved` is true when the panel actually changed position. */
     onDragEnd?: (moved: boolean) => void;
 }
-/** Whether the HUD is off the default bottom-right dock. */
-export declare function isHudDragged(hud: HTMLElement): boolean;
-/** Clamp a HUD position so the full panel stays inside the viewport. */
-export declare function clampHudPosition(left: number, top: number, width: number, height: number, viewportWidth: number, viewportHeight: number, margin?: number): {
-    left: number;
-    top: number;
-};
-/** Paint an explicit left/top position (switches the HUD off the default bottom-right dock). */
-export declare function applyHudPosition(hud: HTMLElement, left: number, top: number): void;
-/** Return the HUD to the default bottom-right dock. */
-export declare function resetHudDockPosition(hud: HTMLElement): void;
-/** Return the HUD's laid-out box (rounded to whole pixels for stable clamping). */
-export declare function hudLayoutBox(hud: HTMLElement): {
-    left: number;
-    top: number;
-    width: number;
-    height: number;
-};
-/** Read the dragged HUD's authored position (CSS vars), falling back to layout box. */
-export declare function readHudPosition(hud: HTMLElement): {
-    left: number;
-    top: number;
-};
-/**
- * Re-clamp a dragged HUD after resize, minimise/expand, or any layout-driven size change.
- * No-op when the panel is still on the default dock.
- */
-export declare function relayoutHudPosition(hud: HTMLElement): void;
-/**
- * Keep a dragged HUD inside the viewport when the window or panel size changes
- * (minimise ↔ expand, tally appearing, viewport resize).
- */
 export declare function installHudPositionGuards(hud: HTMLElement, overlay: HTMLElement): () => void;
-/**
- * Drag the presenter HUD by its header. Returns a teardown that removes listeners.
- * Uses pointer capture so the drag stays smooth even when the cursor leaves the head.
- */
 export declare function installHudDrag(hud: HTMLElement, head: HTMLElement, callbacks?: HudDragCallbacks): () => void;
-/**
- * Drag the presenter HUD from multiple handles (FAB when collapsed, toolbar brand when expanded).
- * Returns a teardown that removes listeners from every handle.
- */
 export declare function installHudDragHandles(hud: HTMLElement, handles: HTMLElement[], callbacks?: HudDragCallbacks): () => void;