@reticlehq/browser 2.7.0 → 2.9.0

package/dist/presenter/presenter-drag.js

@@ -0,0 +1,198 @@
+import { HUD_DOCK_MARGIN_PX, HUD_DRAG_IGNORE_SEL, HUD_DRAG_THRESHOLD_PX, HUD_DRAGGED_ATTR, HUD_POS_X_VAR, HUD_POS_Y_VAR, MIN_ATTR, CHAT_ATTR, SETTINGS_ATTR, } from './presenter-config.js';
+import { scheduleSyncDockLayout } from './presenter-dock-layout.js';
+const DRAG_HANDLE_DRAGGING_CLASS = 'reticle-drag-handle--dragging';
+/** Whether the HUD is off the default bottom-right dock. */
+export function isHudDragged(hud) {
+    return '1' === hud.getAttribute(HUD_DRAGGED_ATTR);
+}
+/** Clamp a HUD position so the full panel stays inside the viewport. */
+export function clampHudPosition(left, top, width, height, viewportWidth, viewportHeight, margin = HUD_DOCK_MARGIN_PX) {
+    const minLeft = margin;
+    const minTop = margin;
+    const maxLeft = Math.max(minLeft, viewportWidth - width - margin);
+    const maxTop = Math.max(minTop, viewportHeight - height - margin);
+    return {
+        left: Math.max(minLeft, Math.min(left, maxLeft)),
+        top: Math.max(minTop, Math.min(top, maxTop)),
+    };
+}
+/** Paint an explicit left/top position (switches the HUD off the default bottom-right dock). */
+export function applyHudPosition(hud, left, top) {
+    hud.setAttribute(HUD_DRAGGED_ATTR, '1');
+    hud.style.setProperty(HUD_POS_X_VAR, `${String(left)}px`);
+    hud.style.setProperty(HUD_POS_Y_VAR, `${String(top)}px`);
+}
+/** Return the HUD to the default bottom-right dock. */
+export function resetHudDockPosition(hud) {
+    hud.removeAttribute(HUD_DRAGGED_ATTR);
+    hud.style.removeProperty(HUD_POS_X_VAR);
+    hud.style.removeProperty(HUD_POS_Y_VAR);
+}
+/** Return the HUD's laid-out box (rounded to whole pixels for stable clamping). */
+export function hudLayoutBox(hud) {
+    const rect = hud.getBoundingClientRect();
+    return {
+        left: rect.left,
+        top: rect.top,
+        width: rect.width,
+        height: rect.height,
+    };
+}
+/** Read the dragged HUD's authored position (CSS vars), falling back to layout box. */
+export function readHudPosition(hud) {
+    const x = hud.style.getPropertyValue(HUD_POS_X_VAR);
+    const y = hud.style.getPropertyValue(HUD_POS_Y_VAR);
+    if (x !== '' && y !== '') {
+        return { left: Number.parseFloat(x), top: Number.parseFloat(y) };
+    }
+    const rect = hud.getBoundingClientRect();
+    return { left: rect.left, top: rect.top };
+}
+/**
+ * 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 function relayoutHudPosition(hud) {
+    if (!isHudDragged(hud))
+        return;
+    const { left, top } = readHudPosition(hud);
+    const { width, height } = hudLayoutBox(hud);
+    const next = clampHudPosition(left, top, width, height, window.innerWidth, window.innerHeight);
+    applyHudPosition(hud, next.left, next.top);
+}
+/**
+ * Keep a dragged HUD inside the viewport when the window or panel size changes
+ * (minimise ↔ expand, tally appearing, viewport resize).
+ */
+export function installHudPositionGuards(hud, overlay) {
+    const scheduleRelayout = () => {
+        scheduleSyncDockLayout(hud, overlay);
+    };
+    const onResize = () => scheduleRelayout();
+    window.addEventListener('resize', onResize);
+    let resizeObserver;
+    if (typeof ResizeObserver !== 'undefined') {
+        resizeObserver = new ResizeObserver(() => scheduleRelayout());
+        resizeObserver.observe(hud);
+    }
+    const minObserver = new MutationObserver(() => scheduleRelayout());
+    minObserver.observe(overlay, {
+        attributes: true,
+        attributeFilter: [MIN_ATTR, CHAT_ATTR, SETTINGS_ATTR],
+    });
+    const onVisualViewportResize = () => scheduleRelayout();
+    window.visualViewport?.addEventListener('resize', onVisualViewportResize);
+    window.visualViewport?.addEventListener('scroll', onVisualViewportResize);
+    return () => {
+        window.removeEventListener('resize', onResize);
+        window.visualViewport?.removeEventListener('resize', onVisualViewportResize);
+        window.visualViewport?.removeEventListener('scroll', onVisualViewportResize);
+        resizeObserver?.disconnect();
+        minObserver.disconnect();
+    };
+}
+/**
+ * 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 function installHudDrag(hud, head, callbacks = {}) {
+    let dragging = false;
+    let startX = 0;
+    let startY = 0;
+    let startLeft = 0;
+    let startTop = 0;
+    let moved = false;
+    let activePointerId;
+    const finishDrag = () => {
+        const didMove = moved;
+        dragging = false;
+        head.classList.remove(DRAG_HANDLE_DRAGGING_CLASS);
+        activePointerId = undefined;
+        moved = false;
+        if (didMove) {
+            const overlay = hud.parentElement;
+            if (overlay instanceof HTMLElement)
+                scheduleSyncDockLayout(hud, overlay);
+            else
+                relayoutHudPosition(hud);
+        }
+        callbacks.onDragEnd?.(didMove);
+    };
+    const onPointerDown = (e) => {
+        if (e.button !== 0)
+            return;
+        const target = e.target;
+        if (!(target instanceof Element))
+            return;
+        if (target.closest(HUD_DRAG_IGNORE_SEL) !== null)
+            return;
+        const rect = hud.getBoundingClientRect();
+        startX = e.clientX;
+        startY = e.clientY;
+        startLeft = rect.left;
+        startTop = rect.top;
+        dragging = true;
+        moved = false;
+        activePointerId = e.pointerId;
+        head.classList.add(DRAG_HANDLE_DRAGGING_CLASS);
+        if ('function' === typeof head.setPointerCapture)
+            head.setPointerCapture(e.pointerId);
+        e.preventDefault();
+    };
+    const onPointerMove = (e) => {
+        if (!dragging || e.pointerId !== activePointerId)
+            return;
+        const dx = e.clientX - startX;
+        const dy = e.clientY - startY;
+        if (!moved && Math.abs(dx) < HUD_DRAG_THRESHOLD_PX && Math.abs(dy) < HUD_DRAG_THRESHOLD_PX)
+            return;
+        moved = true;
+        callbacks.onDragMove?.();
+        const box = hudLayoutBox(hud);
+        const next = clampHudPosition(startLeft + dx, startTop + dy, box.width, box.height, window.innerWidth, window.innerHeight);
+        applyHudPosition(hud, next.left, next.top);
+        e.preventDefault();
+    };
+    const releaseCapture = (pointerId) => {
+        if ('function' === typeof head.releasePointerCapture)
+            head.releasePointerCapture(pointerId);
+    };
+    const onPointerUp = (e) => {
+        if (!dragging || e.pointerId !== activePointerId)
+            return;
+        if (moved)
+            e.preventDefault();
+        releaseCapture(e.pointerId);
+        finishDrag();
+    };
+    const onPointerCancel = (e) => {
+        if (!dragging || e.pointerId !== activePointerId)
+            return;
+        releaseCapture(e.pointerId);
+        finishDrag();
+    };
+    head.addEventListener('pointerdown', onPointerDown);
+    head.addEventListener('pointermove', onPointerMove);
+    head.addEventListener('pointerup', onPointerUp);
+    head.addEventListener('pointercancel', onPointerCancel);
+    return () => {
+        head.removeEventListener('pointerdown', onPointerDown);
+        head.removeEventListener('pointermove', onPointerMove);
+        head.removeEventListener('pointerup', onPointerUp);
+        head.removeEventListener('pointercancel', onPointerCancel);
+        if (dragging)
+            releaseCapture(activePointerId ?? 0);
+        finishDrag();
+    };
+}
+/**
+ * Drag the presenter HUD from multiple handles (FAB when collapsed, toolbar brand when expanded).
+ * Returns a teardown that removes listeners from every handle.
+ */
+export function installHudDragHandles(hud, handles, callbacks = {}) {
+    const teardowns = handles.map((handle) => installHudDrag(hud, handle, callbacks));
+    return () => {
+        for (const teardown of teardowns)
+            teardown();
+    };
+}

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

@@ -1,5 +1,5 @@
 /**
- * Synthetic-cursor + click effects — the visible "the agent is acting here" motion. Pure DOM helpers
+ * Synthetic-cursor + click effects - the visible "the agent is acting here" motion. Pure DOM helpers
  * extracted from presenter.ts so the controller stays under the size cap; each is a no-op when its
  * element is absent (the panel may not be mounted). Behavior is unchanged from the inlined methods.
  */

package/dist/presenter/presenter-effects.js

@@ -1,6 +1,6 @@
 import { nativeSetTimeout } from '../timers/native-timers.js';
 /**
- * Synthetic-cursor + click effects — the visible "the agent is acting here" motion. Pure DOM helpers
+ * Synthetic-cursor + click effects - the visible "the agent is acting here" motion. Pure DOM helpers
  * extracted from presenter.ts so the controller stays under the size cap; each is a no-op when its
  * element is absent (the panel may not be mounted). Behavior is unchanged from the inlined methods.
  */

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

@@ -10,12 +10,12 @@ interface GlowDeps {
     setMode: (mode: PresenterMode) => void;
 }
 /**
- * The glow / activity state machine — drives the border shimmer + synthetic-cursor visibility from
+ * The glow / activity state machine - drives the border shimmer + synthetic-cursor visibility from
  * agent-activity timing. Extracted from presenter.ts so the controller file stays under the size cap;
  * behavior is byte-for-byte the same. It holds references to the same `#glow`/`#cursor` nodes the
- * Presenter does (both call setAttribute on those elements — the Presenter owns the SESSION border via
+ * Presenter does (both call setAttribute on those elements - the Presenter owns the SESSION border via
  * data-on; this owns the BUSY shimmer via data-busy). A burst flips the glow IN once, holds it (the
- * slow reticle-pulse keeps breathing — no per-action restart/strobe), then fades it OUT once after a quiet
+ * slow reticle-pulse keeps breathing - no per-action restart/strobe), then fades it OUT once after a quiet
  * window.
  */
 export declare class GlowController {
@@ -25,12 +25,12 @@ export declare class GlowController {
     setElements(glow: HTMLElement | undefined, cursor: HTMLElement | undefined): void;
     /** Current glow phase (test/diagnostic accessor). */
     phase(): GlowPhase;
-    /** Last activity timestamp — read by the Presenter's liveness heartbeat. */
+    /** Last activity timestamp - read by the Presenter's liveness heartbeat. */
     lastActivityMs(): number;
     /** Set the activity baseline WITHOUT entering busy (sessionStart / revive). */
     resetActivity(ms: number): void;
     /**
-     * Record agent activity. Idempotent while busy — only the first activity from idle/fading flips the
+     * Record agent activity. Idempotent while busy - only the first activity from idle/fading flips the
      * glow on (no strobe). `ms` lets log read the clock exactly once per row.
      */
     markActivity(ms?: number): void;

package/dist/presenter/presenter-glow.js

@@ -2,12 +2,12 @@ import { PresenterMode } from '@reticlehq/core';
 import { nativeSetTimeout, nativeClearTimeout } from '../timers/native-timers.js';
 import { GlowPhase, BorderMode, DATA_BUSY, BUSY_ON, BUSY_OFF, GLOW_ON, GLOW_OFF, DATA_ON, } from './presenter-config.js';
 /**
- * The glow / activity state machine — drives the border shimmer + synthetic-cursor visibility from
+ * The glow / activity state machine - drives the border shimmer + synthetic-cursor visibility from
  * agent-activity timing. Extracted from presenter.ts so the controller file stays under the size cap;
  * behavior is byte-for-byte the same. It holds references to the same `#glow`/`#cursor` nodes the
- * Presenter does (both call setAttribute on those elements — the Presenter owns the SESSION border via
+ * Presenter does (both call setAttribute on those elements - the Presenter owns the SESSION border via
  * data-on; this owns the BUSY shimmer via data-busy). A burst flips the glow IN once, holds it (the
- * slow reticle-pulse keeps breathing — no per-action restart/strobe), then fades it OUT once after a quiet
+ * slow reticle-pulse keeps breathing - no per-action restart/strobe), then fades it OUT once after a quiet
  * window.
  */
 export class GlowController {
@@ -38,7 +38,7 @@ export class GlowController {
     phase() {
         return this.#phase;
     }
-    /** Last activity timestamp — read by the Presenter's liveness heartbeat. */
+    /** Last activity timestamp - read by the Presenter's liveness heartbeat. */
     lastActivityMs() {
         return this.#lastActivityMs;
     }
@@ -47,7 +47,7 @@ export class GlowController {
         this.#lastActivityMs = ms;
     }
     /**
-     * Record agent activity. Idempotent while busy — only the first activity from idle/fading flips the
+     * Record agent activity. Idempotent while busy - only the first activity from idle/fading flips the
      * glow on (no strobe). `ms` lets log read the clock exactly once per row.
      */
     markActivity(ms = this.#now()) {
@@ -83,7 +83,7 @@ export class GlowController {
             // back-compat: the busy machine owns the base border.
             this.#glow?.setAttribute(DATA_ON, GLOW_ON);
         }
-        // The HUD/log is session-owned (sessionStart/End), NOT toggled here — it stays put on idle.
+        // The HUD/log is session-owned (sessionStart/End), NOT toggled here - it stays put on idle.
         this.#cursor?.setAttribute(DATA_ON, GLOW_ON);
     }
     #armIdleCheck() {
@@ -113,7 +113,7 @@ export class GlowController {
             // back-compat: fade the base border out.
             this.#glow?.setAttribute(DATA_ON, GLOW_OFF);
         }
-        // Do NOT hide the HUD/log on idle — it persists for the whole session (sessionStart/End).
+        // Do NOT hide the HUD/log on idle - it persists for the whole session (sessionStart/End).
         this.#cursor?.setAttribute(DATA_ON, GLOW_OFF);
         this.#setMode(PresenterMode.IDLE); // clear the READING/ACTING chip when going quiet
         this.#fadeTimer = nativeSetTimeout(() => {

package/dist/presenter/presenter-heroicons-data.d.ts

@@ -0,0 +1,41 @@
+/** Generated by scripts/embed-heroicons.mjs - do not edit by hand. */
+/** Heroicons outline - MIT, https://heroicons.com */
+declare const BODIES: {
+    view: string;
+    pointer: string;
+    send: string;
+    chart: string;
+    'caret-down': string;
+    check: string;
+    remove: string;
+    pause: string;
+    play: string;
+    stop: string;
+    copy: string;
+    download: string;
+    message: string;
+    gear: string;
+    layout: string;
+    trash: string;
+    help: string;
+    'caret-right': string;
+    annotate: string;
+};
+/**
+ * No `as const` on the values: it would inline every icon's path data into the emitted `.d.ts` as a
+ * literal type, publishing the whole icon set twice for type information no caller can use. The KEYS
+ * are still literal, which is the part `HeroIconBodyKey` needs.
+ */
+export declare const HERO_ICON_BODIES: Record<keyof typeof BODIES, string>;
+export type HeroIconBodyKey = keyof typeof BODIES;
+/** Solid variants for toolbar toggles - shown when data-active="1". */
+declare const SOLID_BODIES: {
+    chart: string;
+    annotate: string;
+    message: string;
+    view: string;
+    gear: string;
+};
+export declare const HERO_ICON_SOLID_BODIES: Record<keyof typeof SOLID_BODIES, string>;
+export type HeroIconSolidBodyKey = keyof typeof SOLID_BODIES;
+export {};

package/dist/presenter/presenter-heroicons-data.js

@@ -0,0 +1,38 @@
+/** Generated by scripts/embed-heroicons.mjs - do not edit by hand. */
+/** Heroicons outline - MIT, https://heroicons.com */
+const BODIES = {
+    view: '<g><path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0"/><path d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7s-8.268-2.943-9.542-7"/></g>',
+    pointer: '<path d="M15.042 21.672L13.684 16.6m0 0l-2.51 2.225l.569-9.47l5.227 7.917l-3.286-.672ZM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59"/>',
+    send: '<path d="M6 12 3.269 3.126A59.768 59.768 0 0 1 21.485 12 59.77 59.77 0 0 1 3.27 20.876L5.999 12Zm0 0h7.5"/>',
+    chart: '<path d="M9 19v-6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2m0 0V9a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v10m-6 0a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2m0 0V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2"/>',
+    'caret-down': '<path d="m19 9l-7 7l-7-7"/>',
+    check: '<path d="m5 13l4 4L19 7"/>',
+    remove: '<path d="m4.5 19.5l15-15m-15 0l15 15"/>',
+    pause: '<path d="M10 9v6m4-6v6m7-3a9 9 0 1 1-18 0a9 9 0 0 1 18 0"/>',
+    play: '<g><path d="m14.752 11.168l-3.197-2.132A1 1 0 0 0 10 9.87v4.263a1 1 0 0 0 1.555.832l3.197-2.132a1 1 0 0 0 0-1.664"/><path d="M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"/></g>',
+    stop: '<g><path d="M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"/><path d="M9 10a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z"/></g>',
+    copy: '<path d="M8 7v8a2 2 0 0 0 2 2h6M8 7V5a2 2 0 0 1 2-2h4.586a1 1 0 0 1 .707.293l4.414 4.414a1 1 0 0 1 .293.707V15a2 2 0 0 1-2 2h-2M8 7H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-2"/>',
+    download: '<path d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/>',
+    message: '<path d="M8.625 9.75a.375.375 0 1 1-.75 0a.375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0a.375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0a.375.375 0 0 1 .75 0Zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227c1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332a48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"/>',
+    gear: '<g><path d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87c.074.04.147.083.22.127c.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 0 1 0 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 0 1 0-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124c.072-.044.146-.087.22-.128c.332-.183.582-.495.644-.869l.214-1.281Z"/><path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"/></g>',
+    layout: '<path d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6Zm0 9.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6Zm0 9.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z"/>',
+    trash: '<path d="m19 7l-.867 12.142A2 2 0 0 1 16.138 21H7.862a2 2 0 0 1-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v3M4 7h16"/>',
+    help: '<path d="M8.228 9c.549-1.165 2.03-2 3.772-2c2.21 0 4 1.343 4 3c0 1.4-1.278 2.575-3.006 2.907c-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"/>',
+    'caret-right': '<path d="m9 5l7 7l-7 7"/>',
+    annotate: '<path d="m16.862 4.487l1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"/>',
+};
+/**
+ * No `as const` on the values: it would inline every icon's path data into the emitted `.d.ts` as a
+ * literal type, publishing the whole icon set twice for type information no caller can use. The KEYS
+ * are still literal, which is the part `HeroIconBodyKey` needs.
+ */
+export const HERO_ICON_BODIES = BODIES;
+/** Solid variants for toolbar toggles - shown when data-active="1". */
+const SOLID_BODIES = {
+    chart: '<path fill="currentColor" d="M2 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zm6-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1zm6-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1z"/>',
+    annotate: '<path fill="currentColor" fill-rule="evenodd" d="m5.433 13.916l1.262-3.154a4 4 0 0 1 .885-1.343L14.5 2.5a2.121 2.121 0 1 1 3 3l-6.92 6.919c-.383.383-.84.684-1.343.885l-3.154 1.262a.5.5 0 0 1-.65-.65ZM2.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0 0 10 3H3.75A2.75 2.75 0 0 0 1 5.75v10.5A2.75 2.75 0 0 0 3.75 19h10.5A2.75 2.75 0 0 0 17 16.25V10a.75.75 0 0 0-1.5 0v6.25c0 .69-.56 1.25-1.25 1.25H3.75c-.69 0-1.25-.56-1.25-1.25V5.75Z" clip-rule="evenodd"/>',
+    message: '<path fill="currentColor" fill-rule="evenodd" d="M10 2c-2.236 0-4.43.18-6.57.524C1.993 2.755 1 4.014 1 5.426v5.148c0 1.413.993 2.67 2.43 2.902c.848.137 1.705.248 2.57.331v3.443a.75.75 0 0 0 1.28.53l3.58-3.579a.78.78 0 0 1 .527-.224a41.202 41.202 0 0 0 5.183-.5c1.437-.232 2.43-1.49 2.43-2.903V5.426c0-1.413-.993-2.67-2.43-2.902A41.289 41.289 0 0 0 10 2Zm0 7a1 1 0 1 0 0-2a1 1 0 0 0 0 2ZM8 8a1 1 0 1 1-2 0a1 1 0 0 1 2 0Zm5 1a1 1 0 1 0 0-2a1 1 0 0 0 0 2Z" clip-rule="evenodd"/>',
+    view: '<g fill="currentColor"><path d="M10 12a2 2 0 1 0 0-4a2 2 0 0 0 0 4"/><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10M14 10a4 4 0 1 1-8 0a4 4 0 0 1 8 0" clip-rule="evenodd"/></g>',
+    gear: '<path fill="currentColor" fill-rule="evenodd" d="M7.84 1.804A1 1 0 0 1 8.82 1h2.36a1 1 0 0 1 .98.804l.331 1.652a6.993 6.993 0 0 1 1.929 1.115l1.598-.54a1 1 0 0 1 1.186.447l1.18 2.044a1 1 0 0 1-.205 1.251l-1.267 1.113a7.047 7.047 0 0 1 0 2.228l1.267 1.113a1 1 0 0 1 .206 1.25l-1.18 2.045a1 1 0 0 1-1.187.447l-1.598-.54a6.993 6.993 0 0 1-1.929 1.115l-.33 1.652a1 1 0 0 1-.98.804H8.82a1 1 0 0 1-.98-.804l-.331-1.652a6.993 6.993 0 0 1-1.929-1.115l-1.598.54a1 1 0 0 1-1.186-.447l-1.18-2.044a1 1 0 0 1 .205-1.251l1.267-1.114a7.05 7.05 0 0 1 0-2.227L1.821 7.773a1 1 0 0 1-.206-1.25l1.18-2.045a1 1 0 0 1 1.187-.447l1.598.54a6.993 6.993 0 0 1 1.93-1.115l.33-1.652ZM10 13a3 3 0 1 0 0-6a3 3 0 0 0 0 6Z" clip-rule="evenodd"/>',
+};
+export const HERO_ICON_SOLID_BODIES = SOLID_BODIES;

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

@@ -0,0 +1,17 @@
+/** Shared polished-black surfaces used across HUD chrome panels. */
+export declare const HUD_SURFACE_CLASS = "reticle-hud-surface";
+/** Layered near-black base — no embedded image assets. */
+export declare const HUD_SURFACE_FILL: string;
+export declare const HUD_SURFACE_PAINT: string;
+export declare const HUD_DROP_SHADOW: string;
+export declare const HUD_CHROME_CSS: string;
+/** Inset well for the activity log — sits inside the chat card. */
+export declare const HUD_LOG_WELL_CLASS = "reticle-hud-log-well";
+/**
+ * The activity feed sits ON the panel, not in a black box cut out of it.
+ *
+ * The inset well was a second surface inside a surface - two borders, two backgrounds - and it made
+ * the panel read as a container rather than as one card. It also grew and shrank with its content,
+ * so the panel resized on every row; the height is fixed now and the feed scrolls inside it.
+ */
+export declare const HUD_LOG_WELL_CSS = "\n.reticle-hud-log-well{\n  /* A settled height, but still allowed to shrink: pinned with flex:none it pushed the composer\n     off the bottom of the panel the moment the rest of the content grew. */\n  /* A flex column, so the feed inside actually FILLS the height: as a plain block the log was only\n     as tall as its rows, which left the empty-state line floating near the top of an otherwise\n     empty panel instead of centred in it. */\n  position:relative;display:flex;flex-direction:column;\n  flex:1 1 auto;height:210px;min-height:96px;max-height:210px;overflow:hidden;\n  contain:layout style paint;\n  margin:0 6px;border-radius:12px;background:transparent;}\n.reticle-hud-log-well > *{position:relative;z-index:1;}";

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

@@ -0,0 +1,41 @@
+/** Shared polished-black surfaces used across HUD chrome panels. */
+export const HUD_SURFACE_CLASS = 'reticle-hud-surface';
+/** Layered near-black base — no embedded image assets. */
+export const HUD_SURFACE_FILL = `linear-gradient(165deg,#121218 0%,#09090c 42%,#000 100%)`;
+export const HUD_SURFACE_PAINT = `background:${HUD_SURFACE_FILL};box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 0 1px rgba(255,255,255,.09);`;
+export const HUD_DROP_SHADOW = '0 16px 40px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.08)';
+export const HUD_CHROME_CSS = `
+.${HUD_SURFACE_CLASS}{
+  position:relative;overflow:hidden;
+  contain:layout style paint;
+  ${HUD_SURFACE_PAINT}
+}
+.${HUD_SURFACE_CLASS}::before,
+[data-reticle-hud] .reticle-hud-deco::after{
+  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:1;
+  background:
+    radial-gradient(ellipse 120% 70% at 50% -18%,rgba(255,255,255,.07),transparent 52%),
+    linear-gradient(180deg,rgba(255,255,255,.035) 0%,transparent 36%,rgba(0,0,0,.12) 100%);
+}
+.${HUD_SURFACE_CLASS} > *{position:relative;z-index:2;}`;
+/** Inset well for the activity log — sits inside the chat card. */
+export const HUD_LOG_WELL_CLASS = 'reticle-hud-log-well';
+/**
+ * The activity feed sits ON the panel, not in a black box cut out of it.
+ *
+ * The inset well was a second surface inside a surface - two borders, two backgrounds - and it made
+ * the panel read as a container rather than as one card. It also grew and shrank with its content,
+ * so the panel resized on every row; the height is fixed now and the feed scrolls inside it.
+ */
+export const HUD_LOG_WELL_CSS = `
+.${HUD_LOG_WELL_CLASS}{
+  /* A settled height, but still allowed to shrink: pinned with flex:none it pushed the composer
+     off the bottom of the panel the moment the rest of the content grew. */
+  /* A flex column, so the feed inside actually FILLS the height: as a plain block the log was only
+     as tall as its rows, which left the empty-state line floating near the top of an otherwise
+     empty panel instead of centred in it. */
+  position:relative;display:flex;flex-direction:column;
+  flex:1 1 auto;height:210px;min-height:96px;max-height:210px;overflow:hidden;
+  contain:layout style paint;
+  margin:0 6px;border-radius:12px;background:transparent;}
+.${HUD_LOG_WELL_CLASS} > *{position:relative;z-index:1;}`;

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

@@ -0,0 +1,44 @@
+import { type HeroIconBodyKey, type HeroIconSolidBodyKey } from './presenter-heroicons-data.js';
+/** Presenter icon keys used by the HUD. */
+export declare const PresenterIcon: {
+    readonly VIEW: "view";
+    readonly POINTER: "pointer";
+    readonly SEND: "send";
+    readonly CHART: "chart";
+    readonly CARET_DOWN: "caret-down";
+    readonly CHECK: "check";
+    readonly REMOVE: "remove";
+    readonly PAUSE: "pause";
+    readonly PLAY: "play";
+    readonly STOP: "stop";
+    readonly COPY: "copy";
+    readonly DOWNLOAD: "download";
+    readonly MESSAGE: "message";
+    readonly GEAR: "gear";
+    readonly LAYOUT: "layout";
+    readonly TRASH: "trash";
+    readonly HELP: "help";
+    readonly CARET_RIGHT: "caret-right";
+    readonly ANNOTATE: "annotate";
+};
+export type PresenterIconName = (typeof PresenterIcon)[keyof typeof PresenterIcon];
+/** Shared HUD icon sizes (px) - one knob for visual density. */
+export declare const PRESENTER_ICON_SIZE: {
+    readonly CHIP: 11;
+    readonly LOG: 11;
+    readonly TALLY: 12;
+    readonly CTL: 10;
+    readonly SEND: 14;
+    readonly MIN: 12;
+    readonly HELP: 12;
+    readonly TOOLBAR: 18;
+    readonly FAB: 22;
+};
+/** Create an inline Heroicons outline SVG (24px grid, currentColor stroke). */
+export declare function hiIcon(name: HeroIconBodyKey, sizePx?: number): HTMLSpanElement;
+/** Replace a parent's children with a Heroicon. */
+export declare function setHiIcon(parent: HTMLElement, name: HeroIconBodyKey, sizePx?: number): void;
+/** Inline SVG markup for static HUD templates - survives mount order and dep-cache staleness. */
+export declare function hiIconHtml(name: HeroIconBodyKey, sizePx?: number): string;
+/** Outline + solid pair for toolbar toggles - solid layer shows when the button is active. */
+export declare function hiToggleIconHtml(name: HeroIconSolidBodyKey, sizePx?: number): string;

package/dist/presenter/presenter-icons.js

@@ -0,0 +1,100 @@
+import { HERO_ICON_BODIES, HERO_ICON_SOLID_BODIES, } from './presenter-heroicons-data.js';
+/** Presenter icon keys used by the HUD. */
+export const PresenterIcon = {
+    VIEW: 'view',
+    POINTER: 'pointer',
+    SEND: 'send',
+    CHART: 'chart',
+    CARET_DOWN: 'caret-down',
+    CHECK: 'check',
+    REMOVE: 'remove',
+    PAUSE: 'pause',
+    PLAY: 'play',
+    STOP: 'stop',
+    COPY: 'copy',
+    DOWNLOAD: 'download',
+    MESSAGE: 'message',
+    GEAR: 'gear',
+    LAYOUT: 'layout',
+    TRASH: 'trash',
+    HELP: 'help',
+    CARET_RIGHT: 'caret-right',
+    ANNOTATE: 'annotate',
+};
+/** Shared HUD icon sizes (px) - one knob for visual density. */
+export const PRESENTER_ICON_SIZE = {
+    CHIP: 11,
+    LOG: 11,
+    TALLY: 12,
+    CTL: 10,
+    SEND: 14,
+    MIN: 12,
+    HELP: 12,
+    TOOLBAR: 18,
+    FAB: 22,
+};
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const HERO_VIEWBOX = '0 0 24 24';
+const svgCache = new Map();
+function buildSvg(name, sizePx) {
+    const cacheKey = `${name}:${String(sizePx)}`;
+    const cached = svgCache.get(cacheKey);
+    if (cached !== undefined) {
+        return document.importNode(cached, true);
+    }
+    const body = HERO_ICON_BODIES[name];
+    if (body === undefined) {
+        throw new Error(`missing heroicon body: ${String(name)}`);
+    }
+    const parsed = new DOMParser().parseFromString(`<svg xmlns="${SVG_NS}" viewBox="${HERO_VIEWBOX}" fill="none">${body}</svg>`, 'image/svg+xml');
+    const root = parsed.documentElement;
+    const svg = root instanceof SVGSVGElement
+        ? document.importNode(root, true)
+        : document.createElementNS(SVG_NS, 'svg');
+    svg.setAttribute('viewBox', HERO_VIEWBOX);
+    svg.setAttribute('width', String(sizePx));
+    svg.setAttribute('height', String(sizePx));
+    svg.setAttribute('fill', 'none');
+    if (!(root instanceof SVGSVGElement)) {
+        svg.innerHTML = body;
+    }
+    svgCache.set(cacheKey, svg);
+    return document.importNode(svg, true);
+}
+/** Create an inline Heroicons outline SVG (24px grid, currentColor stroke). */
+export function hiIcon(name, sizePx = 16) {
+    const wrap = document.createElement('span');
+    wrap.className = 'reticle-hi-icon';
+    wrap.setAttribute('aria-hidden', 'true');
+    wrap.style.width = `${String(sizePx)}px`;
+    wrap.style.height = `${String(sizePx)}px`;
+    wrap.appendChild(buildSvg(name, sizePx));
+    return wrap;
+}
+/** Replace a parent's children with a Heroicon. */
+export function setHiIcon(parent, name, sizePx = 16) {
+    parent.replaceChildren(hiIcon(name, sizePx));
+}
+/** Inline SVG markup for static HUD templates - survives mount order and dep-cache staleness. */
+export function hiIconHtml(name, sizePx = 16) {
+    const body = HERO_ICON_BODIES[name];
+    if (body === undefined) {
+        throw new Error(`missing heroicon body: ${String(name)}`);
+    }
+    return `<span class="reticle-hi-icon" aria-hidden="true" style="width:${String(sizePx)}px;height:${String(sizePx)}px"><svg xmlns="${SVG_NS}" viewBox="${HERO_VIEWBOX}" width="${String(sizePx)}" height="${String(sizePx)}" fill="none">${body}</svg></span>`;
+}
+/** Outline + solid pair for toolbar toggles - solid layer shows when the button is active. */
+export function hiToggleIconHtml(name, sizePx = 16) {
+    const outline = HERO_ICON_BODIES[name];
+    const solid = HERO_ICON_SOLID_BODIES[name];
+    if (outline === undefined || solid === undefined) {
+        throw new Error(`missing heroicon toggle pair: ${String(name)}`);
+    }
+    const size = String(sizePx);
+    return (`<span class="reticle-hi-toggle" aria-hidden="true" style="width:${size}px;height:${size}px">` +
+        `<span class="reticle-hi-icon reticle-hi-icon--outline" style="width:${size}px;height:${size}px">` +
+        `<svg xmlns="${SVG_NS}" viewBox="${HERO_VIEWBOX}" width="${size}" height="${size}" fill="none">${outline}</svg></span>` +
+        `<span class="reticle-hi-icon reticle-hi-icon--solid" style="width:${size}px;height:${size}px">` +
+        `<svg xmlns="${SVG_NS}" viewBox="${HERO_VIEWBOX}" width="${size}" height="${size}" fill="currentColor">${solid}</svg></span>` +
+        `</span>`);
+}

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

@@ -7,19 +7,41 @@ export declare const LOG_KIND: {
     readonly HUMAN: "human";
 };
 export type LogKind = (typeof LOG_KIND)[keyof typeof LOG_KIND];
-/** Prefix for a human-authored activity row ("🧑 you: <text>"). Presenter-only UI. */
-export declare const HUMAN_ROW_PREFIX = "\uD83E\uDDD1 you: ";
 /** Act-row outcome glyph keys (presenter-only UI). */
 export declare const LOG_RESULT: {
     readonly PASS: "pass";
     readonly FAIL: "fail";
 };
 export type LogResult = (typeof LOG_RESULT)[keyof typeof LOG_RESULT];
-/** HUD chip copy keyed by presenter mode (UI text, browser-local — not a wire string). */
+/** HUD chip copy keyed by presenter mode (UI text, browser-local - not a wire string). */
 export declare const CHIP_LABEL: Record<PresenterMode, string>;
 export declare const DATA_RETICLE_LOG = "data-reticle-log";
+/**
+ * The attribute on ONE log line's timestamp. Deliberately not `data-reticle-log-ts`: that name is
+ * the overlay-level SETTING (show timestamps y/n) and the overlay root carries it, so a bare
+ * `[data-reticle-log-ts]{opacity:.85}` here matched the overlay itself and made the entire HUD -
+ * chat panel included - 85% transparent, with the page legible straight through it.
+ */
+export declare const LOG_TIME_ATTR = "data-reticle-log-time";
 /** CSS for the log feed (injected with the rest of the presenter stylesheet; vars inherit from the card). */
-export declare const LOG_CSS = "\n[data-reticle-log]{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;\n  gap:7px;padding:12px 14px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent;}\n[data-reticle-log]::-webkit-scrollbar{width:9px;}\n[data-reticle-log]::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:9px;border:2px solid transparent;background-clip:content-box;}\n[data-reticle-log]::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.26);background-clip:content-box;}\n[data-reticle-log-row]{display:flex;align-items:baseline;gap:8px;font-size:12px;line-height:1.45;\n  animation:reticle-row-in .26s cubic-bezier(.16,1,.3,1);}\n@keyframes reticle-row-in{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}\n[data-reticle-log-ts]{flex:none;color:var(--reticle-faint);font-size:10px;font-variant-numeric:tabular-nums;padding-top:1px;}\n[data-reticle-log] .reticle-log-text{flex:1;min-width:0;color:#d6dae4;overflow-wrap:anywhere;word-break:break-word;}\n[data-reticle-log] .reticle-res{flex:none;font-weight:700;}\n[data-reticle-log-row][data-kind=\"human\"]{align-self:flex-end;max-width:88%;\n  background:var(--reticle-accent-soft);border:1px solid var(--reticle-accent);border-radius:13px 13px 4px 13px;padding:6px 11px;}\n[data-reticle-log-row][data-kind=\"human\"] [data-reticle-log-ts]{display:none;}\n[data-reticle-log-row][data-kind=\"human\"] .reticle-log-text{color:var(--reticle-fg);}\n";
+export declare const LOG_CSS: string;
+/**
+ * Pin the feed to its newest row.
+ *
+ * Called on append AND when the chat is opened, because a hidden panel has no layout: rows added
+ * while it was minimised could not scroll it, so opening it showed the OLDEST row and the latest
+ * activity - the reason to open it - was somewhere below the fold.
+ */
+export declare function scrollLogToLatest(container: HTMLElement): void;
+/**
+ * Pin the feed to its newest row once the panel has actually laid out.
+ *
+ * A single frame is not enough on open: the rows carry `content-visibility:auto`, so their real
+ * heights arrive after the first paint and `scrollHeight` keeps growing under a scroll that has
+ * already happened - the feed landed a third of the way down instead of at the end. Two frames
+ * plus one settle pass costs nothing and lands on the last row.
+ */
+export declare function settleLogAtLatest(container: HTMLElement): void;
 /** Handle returned from logRow/Presenter.log so the caller can stamp the outcome glyph later. */
 export interface LogHandle {
     result(r: LogResult): void;
@@ -27,7 +49,7 @@ export interface LogHandle {
 /** Clamp a logMax option to a sane positive integer, falling back to the default. */
 export declare function clampLogMax(n: number | undefined): number;
 /**
- * Pure, human-readable duration ("3s", "47s", "2m", "1h 4m") — no clock read, so it stays
+ * Pure, human-readable duration ("3s", "47s", "2m", "1h 4m") - no clock read, so it stays
  * deterministic in tests. Used for both the per-row timestamp (time since session start) and the
  * live "idle · {duration} since last action" heartbeat. Sub-second reads as "0s".
  */