@reticlehq/browser 3.4.0 → 3.6.0

package/dist/presenter/presenter-shell.js

@@ -3,34 +3,53 @@ 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, MINIMISED_STORAGE_KEY, } from './presenter-config.js';
+import { CHAT_MIN_ATTR, CHAT_PILL_ATTR, REPORT_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 { DATA_RETICLE_LOG, settleLogAtLatest } from './chrome/presenter-log.js';
+import { paintRail, RAIL_HTML, RAIL_PROMO_ATTR } from './presenter-frame.js';
+import { FAB_TOGGLE_HTML, MARK_SVG } from './chrome/presenter-brand.js';
+import { 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';
 import { HUD_SURFACE_CLASS, HUD_LOG_WELL_CLASS } from './chrome/presenter-hud-chrome.js';
-import { CONTROLS_TOOLBAR_HTML } from './presenter-controls.js';
+import { ChatViews, CHAT_VIEWS_NAV_HTML, ANNOTATIONS_HTML, FLOWS_PAGE_HTML, platformBase, } from './presenter-chat-views.js';
 import { PresenterSettingsPanel, settingsPanelHtml, } from './presenter-settings.js';
 const DRAG_HANDLE_CLASS = 'reticle-toolbar-drag';
 const TRANSITION_LOCK_MS = 120;
-const ANNOTATE_LABEL = 'Annotate';
 const CHAT_MIN_LABEL = 'Minimise chat';
 const CHAT_PILL_LABEL = 'Open agent chat';
-const REPORT_LABEL = 'Impact';
 const SETTINGS_LABEL = 'Settings';
+const AGENT_LOG_TITLE = 'Reticle';
 const EXIT_LABEL = 'Exit';
+function paintPromo(root, offer, notices = [], base) {
+    const target = root.querySelector(`[${RAIL_PROMO_ATTR}]`);
+    if (null === target)
+        return;
+    let dismissed = false;
+    try {
+        dismissed = offerDismissed(window.localStorage);
+    }
+    catch {
+    }
+    let storage;
+    try {
+        storage = window.sessionStorage;
+    }
+    catch {
+        storage = undefined;
+    }
+    paintCarousel(target, panelSlides(offer, dismissed, notices, base), storage);
+}
 export class HudShell {
     #root;
     #dock;
     #fab;
     #chatPanel;
-    #chatToggle;
     #collapseBtn;
     #settings;
+    #chatViews;
     #dragTeardown;
     #layoutTeardown;
     #transitionLock = false;
@@ -48,9 +67,44 @@ export class HudShell {
     });
     #callbacks;
     #pushedAccount;
+    #pushedOffer;
+    #pushedNotices = [];
+    #pushedHarness;
+    #promoBase;
     #accountTeardown;
     paintHarness(config) {
+        this.#pushedHarness = config;
         this.#settings.paintHarness(config);
+        this.#chatViews.paintHarness(config);
+        this.#repaintPromoIfMoved();
+    }
+    #promoLinks() {
+        return platformBase(this.#pushedHarness, this.#pushedAccount?.account ?? { signedIn: false });
+    }
+    #repaintPromoIfMoved() {
+        const base = this.#promoLinks();
+        if (this.#root === undefined || base === this.#promoBase)
+            return;
+        this.#promoBase = base;
+        paintPromo(this.#root, this.#pushedOffer, this.#pushedNotices, base);
+    }
+    paintImpact(verdicts) {
+        this.#chatViews.paintImpact(verdicts);
+    }
+    paintAnnotations(items) {
+        this.#chatViews.paintAnnotations(items);
+    }
+    openView(view) {
+        if ('activity' === view)
+            this.showChat();
+        else {
+            if (this.isCollapsed())
+                this.expand();
+            this.closeChat();
+            this.#settings.close();
+            this.#report.close();
+        }
+        this.#chatViews.open(view);
     }
     paintAccount(account, dashboardUrl, details = {}) {
         this.#pushedAccount = { account, dashboardUrl, details };
@@ -58,65 +112,66 @@ export class HudShell {
             return;
         paintToolbarAccount(this.#root, account, dashboardUrl, details);
         paintSettingsAccount(this.#root, account, dashboardUrl, details);
+        paintRail(this.#root, account);
+        this.#chatViews.paintAccount(account);
+        this.#repaintPromoIfMoved();
     }
-    #pushedOffer;
-    paintOffer(offer) {
+    paintOffer(offer, notices = []) {
         this.#pushedOffer = offer;
-        this.#paintCarousel();
-    }
-    #paintCarousel() {
-        const log = this.#root?.querySelector(`[${DATA_RETICLE_LOG}]`);
-        if (!(log instanceof HTMLElement))
-            return;
-        const declined = offerDismissed(this.#storage());
-        paintCarousel(log, panelSlides(this.#pushedOffer, declined), this.#sessionStorage());
-    }
-    #sessionStorage() {
-        try {
-            return globalThis.sessionStorage;
-        }
-        catch {
-            return undefined;
-        }
-    }
-    #storage() {
-        try {
-            return globalThis.localStorage;
-        }
-        catch {
-            return undefined;
-        }
+        this.#pushedNotices = notices;
+        this.#promoBase = this.#promoLinks();
+        if (this.#root !== undefined)
+            paintPromo(this.#root, offer, notices, this.#promoBase);
     }
     constructor(callbacks = {}) {
         this.#callbacks = callbacks;
+        this.#chatViews = new ChatViews((enabled) => callbacks.onHarness?.(enabled), () => {
+            this.#chatViews.closePage();
+            this.closeChat();
+            this.#report.open();
+        }, (view) => {
+            if ('activity' === view) {
+                this.#chatViews.open(view);
+                this.showChat();
+                return;
+            }
+            if (this.isCollapsed())
+                this.expand();
+            this.closeChat();
+            this.#settings.close();
+            this.#report.close();
+        });
         this.#settings = new PresenterSettingsPanel({
             ...callbacks.settings,
             onBeforeOpen: () => {
                 this.closeChat();
+                this.#chatViews.closePage();
                 this.#report.close();
                 callbacks.settings?.onBeforeOpen?.();
             },
         });
     }
     static dockHtml(actStripHtml, bannerHtml, logAttr, flowsHtml, footHtml) {
-        const annotate = hiToggleIconHtml(PresenterIcon.ANNOTATE, PRESENTER_ICON_SIZE.TOOLBAR);
-        const chart = hiToggleIconHtml(PresenterIcon.CHART, PRESENTER_ICON_SIZE.TOOLBAR);
         const gear = hiToggleIconHtml(PresenterIcon.GEAR, PRESENTER_ICON_SIZE.TOOLBAR);
         const exit = hiIconHtml(PresenterIcon.REMOVE, PRESENTER_ICON_SIZE.TOOLBAR);
-        return `<div ${DOCK_ATTR}>
-      <div ${CHAT_PANEL_ATTR} class="reticle-chat-panel ${HUD_SURFACE_CLASS}" role="region" aria-label="Reticle session" aria-hidden="true">
+        return `<div ${DOCK_ATTR} role="complementary" aria-label="Reticle">
+      <div ${CHAT_PANEL_ATTR} class="reticle-chat-panel ${HUD_SURFACE_CLASS}" role="region" aria-label="Agent Log" aria-hidden="true">
         <div class="reticle-chat-head">
-          <span class="reticle-chat-brand">${MARK_SVG}<span class="reticle-chat-brandname">${BRAND_NAME}</span></span>
+          <span class="reticle-chat-brand">${MARK_SVG}<span class="reticle-chat-brandname">${AGENT_LOG_TITLE}</span></span>
           <span ${TOOLBAR_ACCOUNT_ATTR} class="reticle-head-account"></span>
         </div>
         <button type="button" ${CHAT_MIN_ATTR} class="reticle-chat-min" title="${CHAT_MIN_LABEL}" aria-label="${CHAT_MIN_LABEL}">${hiIconHtml(PresenterIcon.CARET_DOWN, PRESENTER_ICON_SIZE.TOOLBAR)}</button>
         ${actStripHtml}
         <span class="reticle-tally" data-reticle-tally hidden></span>
-        ${bannerHtml}
-        <div class="${HUD_LOG_WELL_CLASS}"><div ${logAttr}></div></div>
-        ${flowsHtml}
+        <section class="reticle-chat-view" role="region" aria-label="Agent Log">
+          ${bannerHtml}
+          <div class="${HUD_LOG_WELL_CLASS}"><div ${logAttr}></div></div>
+          ${flowsHtml}
+        </section>
         ${footHtml}
       </div>
+      ${FLOWS_PAGE_HTML}
+      ${ANNOTATIONS_HTML}
       <button type="button" ${CHAT_PILL_ATTR} class="reticle-chat-pill" title="${CHAT_PILL_LABEL}" aria-label="${CHAT_PILL_LABEL}">
         ${MARK_SVG}
         <span class="reticle-chat-pill-text" data-reticle-chat-pill-text></span>
@@ -125,21 +180,13 @@ export class HudShell {
       </button>
       ${settingsPanelHtml()}
       ${reportPanelHtml()}
+      ${RAIL_HTML}
       <div data-reticle-hud>
         <div class="reticle-hud-deco" aria-hidden="true"></div>
         ${FAB_TOGGLE_HTML}
         <div class="reticle-toolbar ${DRAG_HANDLE_CLASS}" role="toolbar" aria-label="Reticle controls">
-          <div class="reticle-toolbar-actions">${CONTROLS_TOOLBAR_HTML}</div>
-          <span class="reticle-tb-sep" aria-hidden="true"></span>
           <div class="reticle-toolbar-chrome">
-            <div class="reticle-tb-wrap">
-              <button type="button" ${ANNOTATE_BTN_ATTR} class="reticle-tb-btn reticle-tb-btn--toggle" title="${ANNOTATE_LABEL}" aria-label="${ANNOTATE_LABEL}" aria-pressed="false" data-active="0">${annotate}</button>
-              <span class="reticle-tb-tip">${ANNOTATE_LABEL}</span>
-            </div>
-            <div class="reticle-tb-wrap">
-              <button type="button" ${REPORT_BTN_ATTR} class="reticle-tb-btn reticle-tb-btn--toggle" title="${REPORT_LABEL}" aria-label="${REPORT_LABEL}" aria-pressed="false" data-active="0">${chart}</button>
-              <span class="reticle-tb-tip">${REPORT_LABEL}</span>
-            </div>
+            ${CHAT_VIEWS_NAV_HTML}
             <div class="reticle-tb-wrap">
               <button type="button" ${SETTINGS_BTN_ATTR} class="reticle-tb-btn reticle-tb-btn--toggle" title="${SETTINGS_LABEL}" aria-label="${SETTINGS_LABEL}" aria-pressed="false" data-active="0">${gear}</button>
               <span class="reticle-tb-tip">${SETTINGS_LABEL}</span>
@@ -167,7 +214,15 @@ export class HudShell {
         };
         lit(CHAT_TOGGLE_ATTR, '1' === root.getAttribute(CHAT_ATTR));
         lit(SETTINGS_BTN_ATTR, '1' === root.getAttribute(SETTINGS_ATTR));
-        lit(REPORT_BTN_ATTR, '1' === root.getAttribute(REPORT_ATTR));
+        const impact = root.querySelector('[data-reticle-chat-impact]');
+        if (impact !== null) {
+            const on = '1' === root.getAttribute(REPORT_ATTR);
+            impact.setAttribute('data-active', on ? '1' : '0');
+            if (on)
+                impact.setAttribute('aria-current', 'page');
+            else
+                impact.removeAttribute('aria-current');
+        }
     }
     isAnnotateOn() {
         return this.#annotateOn;
@@ -176,6 +231,14 @@ export class HudShell {
         this.#annotateOn = on;
         this.#annotateBtn?.setAttribute('aria-pressed', on ? 'true' : 'false');
         this.#annotateBtn?.setAttribute('data-active', on ? '1' : '0');
+        this.#annotateBtn?.setAttribute('aria-label', on ? 'Stop adding notes' : 'Add notes');
+        this.#annotateBtn?.setAttribute('title', on ? 'Stop adding notes' : 'Add notes');
+        const label = this.#annotateBtn?.querySelector('[data-reticle-notes-toggle-label]');
+        if (label !== null && label !== undefined)
+            label.textContent = on ? 'Stop adding notes' : 'Add notes';
+        this.#root
+            ?.querySelector('[data-reticle-chat-view-btn="annotations"]')
+            ?.setAttribute('data-capture', on ? '1' : '0');
     }
     mount(root) {
         this.#listeners = new AbortController();
@@ -186,10 +249,9 @@ export class HudShell {
         this.#fab = fabEl instanceof HTMLButtonElement ? fabEl : undefined;
         const chatPanelEl = root.querySelector(`[${CHAT_PANEL_ATTR}]`);
         this.#chatPanel = chatPanelEl instanceof HTMLElement ? chatPanelEl : undefined;
-        const chatToggleEl = root.querySelector(`[${CHAT_TOGGLE_ATTR}]`);
-        this.#chatToggle = chatToggleEl instanceof HTMLElement ? chatToggleEl : undefined;
         const annotateEl = root.querySelector(`[${ANNOTATE_BTN_ATTR}]`);
         this.#annotateBtn = annotateEl instanceof HTMLButtonElement ? annotateEl : undefined;
+        this.setAnnotateOn(this.#annotateOn);
         this.#annotateBtn?.addEventListener('click', (e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -215,17 +277,15 @@ export class HudShell {
         root.removeAttribute(CHAT_ATTR);
         this.#settings.mount(root);
         this.#report.mount(root);
+        this.#chatViews.mount(root);
+        this.#promoBase = this.#promoLinks();
+        paintPromo(root, this.#pushedOffer, this.#pushedNotices, this.#promoBase);
         this.#toggleSync = new MutationObserver(() => this.#syncToolbarToggles());
         this.#toggleSync.observe(root, {
             attributes: true,
             attributeFilter: [CHAT_ATTR, SETTINGS_ATTR, REPORT_ATTR],
         });
         this.#syncToolbarToggles();
-        root.querySelector(`[${REPORT_BTN_ATTR}]`)?.addEventListener('click', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            this.#report.toggle();
-        }, { signal });
         this.#fab?.addEventListener('click', (e) => {
             e.stopPropagation();
             if (this.#suppressFabClick) {
@@ -238,10 +298,6 @@ export class HudShell {
             e.stopPropagation();
             this.collapse();
         }, { signal });
-        this.#chatToggle?.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.toggleChat();
-        }, { signal });
         const toolbarDrag = root.querySelector(`.${DRAG_HANDLE_CLASS}`);
         const dragHandles = [this.#fab, toolbarDrag].filter((el) => el instanceof HTMLElement);
         if (this.#dock !== undefined && dragHandles.length > 0) {
@@ -250,20 +306,18 @@ export class HudShell {
                     this.#suppressFabClick = true;
                 },
                 onDragEnd: (moved) => {
-                    if (moved && this.isCollapsed())
-                        this.#suppressFabClick = true;
+                    this.#suppressFabClick = moved && this.isCollapsed();
                 },
             });
             this.#layoutTeardown = installHudPositionGuards(this.#dock, root);
         }
         document.addEventListener('pointerdown', this.#onDocPointerDown, { signal });
         document.addEventListener('keydown', this.#onKeyDown, { signal });
-        this.#accountTeardown = mountAccountControl(root);
+        this.#accountTeardown = mountAccountControl(root, () => this.#callbacks.onSignIn?.());
         if (this.#pushedAccount !== undefined) {
             const pushed = this.#pushedAccount;
             this.paintAccount(pushed.account, pushed.dashboardUrl, pushed.details);
         }
-        this.#paintCarousel();
     }
     teardown() {
         this.#accountTeardown?.();
@@ -277,11 +331,11 @@ export class HudShell {
         this.#layoutTeardown?.();
         this.#layoutTeardown = undefined;
         this.#settings.teardown();
+        this.#chatViews.teardown();
         this.#root = undefined;
         this.#dock = undefined;
         this.#fab = undefined;
         this.#chatPanel = undefined;
-        this.#chatToggle = undefined;
         this.#collapseBtn = undefined;
     }
     isCollapsed() {
@@ -323,6 +377,8 @@ export class HudShell {
         if (this.isCollapsed())
             this.expand();
         this.#settings.close();
+        this.#chatViews.closePage();
+        this.#chatViews.open('activity');
         if (this.isChatOpen())
             return;
         this.#root.setAttribute(CHAT_ATTR, '1');
@@ -330,8 +386,6 @@ export class HudShell {
         if (log !== null)
             settleLogAtLatest(log);
         this.#chatPanel?.setAttribute('aria-hidden', 'false');
-        this.#chatToggle?.setAttribute('data-active', '1');
-        this.#chatToggle?.setAttribute('aria-pressed', 'true');
         this.#callbacks.onChatOpen?.();
         if (this.#dock !== undefined)
             scheduleSyncDockLayout(this.#dock, this.#root);
@@ -341,8 +395,6 @@ export class HudShell {
             return;
         this.#root.removeAttribute(CHAT_ATTR);
         this.#chatPanel?.setAttribute('aria-hidden', 'true');
-        this.#chatToggle?.setAttribute('data-active', '0');
-        this.#chatToggle?.setAttribute('aria-pressed', 'false');
         this.#callbacks.onChatClose?.();
         if (this.#dock !== undefined)
             scheduleSyncDockLayout(this.#dock, this.#root);

package/dist/presenter/presenter-styles.js

@@ -9,8 +9,13 @@ import { REPORT_CSS } from './presenter-report-styles.js';
 import { OFFER_CSS } from './carousel/offer-card.js';
 import { TALK_CSS } from './carousel/talk-card.js';
 import { CAROUSEL_CSS } from './carousel/carousel.js';
+import { CHAT_VIEWS_CSS } from './presenter-chat-views.js';
+import { PLAN_CSS } from './presenter-plan.js';
+import { FRAME_CSS } from './presenter-frame.js';
+import { PRESENTER_DESIGN_TOKENS_CSS } from './presenter-design-tokens.js';
 export { Z_OVERLAY };
 export const PRESENTER_CSS = `
+${PRESENTER_DESIGN_TOKENS_CSS}
 [data-reticle-overlay]{position:fixed;inset:0;pointer-events:none;z-index:${String(Z_OVERLAY)};}
 /**
  * The session glow: the page itself says an agent is here, and BREATHES while it is working.
@@ -70,4 +75,7 @@ ${OFFER_CSS}
 ${TALK_CSS}
 ${CAROUSEL_CSS}
 ${LOG_CSS}
-${CONTROLS_CSS}`;
+${CHAT_VIEWS_CSS}
+${PLAN_CSS}
+${CONTROLS_CSS}
+${FRAME_CSS}`;

package/dist/presenter/presenter.d.ts

@@ -1,5 +1,5 @@
-import { PresenterMode, SessionState, type PresenterTone } from '@reticlehq/core';
-import { type LogKind, type LogResult, type LogHandle } from './chrome/presenter-log.js';
+import { HudCorner, HudVisibility, PresenterMode, SessionState, type PresenterTone } from '@reticlehq/core';
+import { type LogActor, type LogKind, type LogResult, type LogHandle } from './chrome/presenter-log.js';
 import { type PresenterOptions } from './presenter-config.js';
 import { type PresenterRunState } from './presenter-run-state.js';
 import { type ControlHandler } from './presenter-controls.js';
@@ -35,9 +35,10 @@ export declare class Presenter {
     get mode(): PresenterMode;
     setMode(mode: PresenterMode): void;
     status(text: string): void;
+    placeHud(visibility: HudVisibility | undefined, corner: HudCorner | undefined): string[];
     setIdleEndMs(ms: number): void;
     runState(): PresenterRunState | Record<string, unknown>;
-    log(kind: LogKind, text: string, result?: LogResult): LogHandle | undefined;
+    log(kind: LogKind, text: string, result?: LogResult, actor?: LogActor): LogHandle | undefined;
     narrate(text: string, level?: string): LogHandle | undefined;
     setThrottled(throttled: boolean): void;
     beforeAct(refId: string, action: string, label: string): Promise<void>;

package/dist/presenter/presenter.js

@@ -1,4 +1,4 @@
-import { ActionType, HumanControlKind, ReticleCommand, PresenterMode, SessionState, isPresenterTone, isSessionState, } from '@reticlehq/core';
+import { ActionType, HudCorner, HudVisibility, HumanControlKind, ReticleCommand, PresenterMode, SessionState, isPresenterTone, isSessionState, } from '@reticlehq/core';
 import { refs } from '../dom/addressing/refs.js';
 import { unreachableStripText } from '../transport/unreachable-message.js';
 import { actionVerb } from './chrome/presenter-verbs.js';
@@ -7,17 +7,21 @@ import { LOG_KIND, CHIP_LABEL, DATA_RETICLE_LOG, clampLogMax, formatElapsed, hum
 import { PRESENTER_CSS } from './presenter-styles.js';
 import { HudShell } from './presenter-shell.js';
 import { parseImpactSnapshot } from './chrome/presenter-report-copy.js';
-import { BorderMode, DEFAULT_BORDER_MODE, DATA_BUSY, BUSY_OFF, effectivePaceMs, IDLE_AFTER_MS, HEARTBEAT_MS, IDLE_NOTICE_MS, IDLE_END_MS, IDLE_END_MIN_MS, ACT_STRIP, STATE_ATTR, UNREACHABLE_STATE, GLOW_FADE_MS, GLOW_ON, GLOW_OFF, DATA_ON, THROTTLED_ATTR, LIVENESS_ATTR, MARKERS_BTN_ATTR, CLEAR_MARKS_ATTR, COPY_MARKS_ATTR, MARKS_ROW_ATTR, MARK_COUNT_ATTR, } from './presenter-config.js';
+import { scheduleSyncDockLayout } from './presenter-dock-layout.js';
+import { applyHudPosition, clampHudPosition, hudLayoutBox, resetHudDockPosition, } from './presenter-hud-position.js';
+import { BorderMode, DEFAULT_BORDER_MODE, DOCK_ATTR, HIDDEN_UNTIL_RESTART_ATTR, DATA_BUSY, BUSY_OFF, effectivePaceMs, IDLE_AFTER_MS, HEARTBEAT_MS, IDLE_NOTICE_MS, IDLE_END_MS, IDLE_END_MIN_MS, ACT_STRIP, STATE_ATTR, UNREACHABLE_STATE, GLOW_FADE_MS, GLOW_ON, GLOW_OFF, DATA_ON, THROTTLED_ATTR, LIVENESS_ATTR, MARKERS_BTN_ATTR, CLEAR_MARKS_ATTR, COPY_MARKS_ATTR, MARKS_ROW_ATTR, MARK_COUNT_ATTR, } from './presenter-config.js';
 import { buildRunState } from './presenter-run-state.js';
 import { moveCursor, ringAround, spawnRipple, pace } from './chrome/presenter-effects.js';
 import { GlowController } from './presenter-glow.js';
 import { PresenterIcon, PRESENTER_ICON_SIZE, hiIcon } from './icons/presenter-icons.js';
 import { renderTally } from './chrome/presenter-tally.js';
-import { CONTROLS_BANNER_HTML, CONTROLS_FLOWS_HTML, CONTROLS_MARKS_HTML, CONTROLS_FOOT_HTML, ENDED_FADE_MS, ControlPanel, } from './presenter-controls.js';
+import { CONTROLS_BANNER_HTML, CONTROLS_FLOWS_HTML, CONTROLS_MARKS_HTML, CONTROLS_FOOT_HTML, CONTROLS_STATUS_HTML, ENDED_FADE_MS, ControlPanel, } from './presenter-controls.js';
 import { statusTheme, blockerHtml, getPresenterSettings, OutputDetail, syncPageBlocker, } from './presenter-settings.js';
 import { Annotator } from '../review/annotator.js';
 import { shouldAutoOpenChat } from './presenter-shell.js';
 import { installHudTelemetry } from './hud-telemetry.js';
+import { PLAN_HTML, PlanBoard, parsePlanView } from './presenter-plan.js';
+import { claimLog, readRememberedLog, rememberLog, } from './chrome/log-memory.js';
 const COPIED_FLASH_MS = 1600;
 export { GlowPhase } from './presenter-config.js';
 export { LOG_KIND, LOG_RESULT } from './chrome/presenter-log.js';
@@ -51,6 +55,8 @@ export class Presenter {
     #sessionActive = false;
     #logMax;
     #log;
+    #plan = new PlanBoard();
+    #remembered = [];
     #logBaseMs;
     #onControl;
     #onHudUse;
@@ -92,12 +98,15 @@ export class Presenter {
             onAnnotateToggle: () => this.#syncAnnotator(),
             onCollapse: () => this.#syncAnnotator(),
             onSyncNow: () => this.#onControl?.({ kind: HumanControlKind.SYNC }),
+            onSignIn: () => this.#onControl?.({ kind: HumanControlKind.SIGNIN }),
+            onHarness: (enabled) => this.#onControl?.({ kind: HumanControlKind.HARNESS, text: enabled ? 'on' : 'off' }),
             settings: {
                 onBeforeOpen: () => {
                     if (this.#shell.isCollapsed())
                         this.#shell.expand();
                 },
                 onHideUntilRestart: () => this.#applyHideUntilRestart(),
+                onKill: () => options.onKill?.(),
                 onSettingsChange: (s) => this.#onSettingsChange(s),
                 onHarness: (enabled) => this.#onControl?.({ kind: HumanControlKind.HARNESS, text: enabled ? 'on' : 'off' }),
             },
@@ -122,12 +131,24 @@ export class Presenter {
         const a = command.args;
         if (command.name === ReticleCommand.FLOWS)
             return void this.#panel.setFlows(a['flows']);
+        if (command.name === ReticleCommand.FLOW_PROGRESS)
+            return void this.#panel.setFlowProgress(a);
+        if (command.name === ReticleCommand.PLAN) {
+            const view = parsePlanView(a);
+            if (view !== undefined)
+                this.#plan.paint(view);
+            return;
+        }
         if (command.name === ReticleCommand.IMPACT) {
             const snapshot = parseImpactSnapshot(a['snapshot']);
             if (snapshot !== undefined) {
                 this.#shell.report.setSnapshot(snapshot);
-                this.#shell.paintOffer(snapshot.harnessOffer);
+                this.#shell.paintOffer(snapshot.harnessOffer, snapshot.notices);
                 this.#shell.paintHarness(snapshot.harnessConfig);
+                this.#shell.paintImpact(snapshot.project.counts.verdicts);
+                const owner = true === snapshot.account?.signedIn ? snapshot.account.email : undefined;
+                if (claimLog(owner))
+                    this.#clearRunLog();
                 this.#shell.paintAccount(snapshot.account, snapshot.dashboardUrl, {
                     projectName: snapshot.projectName,
                     dashboardUrl: snapshot.dashboardUrl,
@@ -159,13 +180,13 @@ export class Presenter {
         document.head.appendChild(style);
         const root = document.createElement('div');
         root.setAttribute('data-reticle-overlay', '');
-        const actStrip = `<div class="reticle-act-strip" data-liveness="idle"><span class="reticle-act-dot" aria-hidden="true"></span><span class="reticle-act">${ACT_STRIP.READY}</span><span class="reticle-chip" data-reticle-chip></span></div>`;
+        const actStrip = `<div class="reticle-act-strip" data-liveness="idle"><span class="reticle-act-dot" aria-hidden="true"></span><span class="reticle-act">${ACT_STRIP.READY}</span>${CONTROLS_BANNER_HTML}<span class="reticle-chip" data-reticle-chip></span><div class="reticle-act-actions">${CONTROLS_STATUS_HTML}</div></div>`;
         root.innerHTML = `
       ${blockerHtml()}
       <div data-reticle-glow></div>
       <div data-reticle-cursor></div>
       <div data-reticle-ring></div>
-      ${HudShell.dockHtml(actStrip, CONTROLS_BANNER_HTML, DATA_RETICLE_LOG, CONTROLS_MARKS_HTML + CONTROLS_FLOWS_HTML, CONTROLS_FOOT_HTML)}`;
+      ${HudShell.dockHtml(actStrip, PLAN_HTML, DATA_RETICLE_LOG, CONTROLS_MARKS_HTML + CONTROLS_FLOWS_HTML, CONTROLS_FOOT_HTML)}`;
         document.body.appendChild(root);
         this.#root = root;
         this.#glow = root.querySelector('[data-reticle-glow]') ?? undefined;
@@ -185,12 +206,32 @@ export class Presenter {
         syncPageBlocker(root, getPresenterSettings(), false);
         this.#glowCtl.setElements(this.#glow, this.#cursor);
         this.#panel.mount(root, this.#glow);
+        this.#plan.mount(root);
         if (this.#onHudUse !== undefined) {
             this.#hudTelemetryTeardown = installHudTelemetry(document, root, this.#onHudUse);
         }
         this.setMode(this.#mode);
+        this.#restoreLog();
         this.#renderTally();
     }
+    #restoreLog() {
+        const log = this.#log;
+        if (log === undefined || 0 < this.#remembered.length)
+            return;
+        for (const row of readRememberedLog().slice(-this.#logMax)) {
+            const handle = appendLogRow(log, row.kind, row.text, row.ts, this.#logMax, row.actor);
+            if (row.result !== undefined)
+                handle.result(row.result);
+            this.#logBaseMs = this.#now() - row.at;
+            this.#runLog.push({
+                at: row.at,
+                kind: row.kind,
+                text: row.text,
+                ...(row.result === undefined ? {} : { result: row.result }),
+            });
+            this.#remembered.push(row);
+        }
+    }
     bindAnnotator(annotator) {
         this.#annotator = annotator;
         const root = this.#root;
@@ -207,9 +248,10 @@ export class Presenter {
         let marks = annotator.markCount;
         chrome.onCount = (n) => {
             if (0 === marks && n > 0)
-                this.#shell.openChat();
+                this.#shell.openView('annotations');
             marks = n;
         };
+        chrome.onMarksChange = (items) => this.#shell.paintAnnotations(items);
         if (copy instanceof HTMLElement) {
             copy.addEventListener('click', (e) => {
                 e.stopPropagation();
@@ -253,6 +295,8 @@ export class Presenter {
         this.#sessionActive = false;
         this.#logBaseMs = undefined;
         this.#log = undefined;
+        this.#remembered = [];
+        rememberLog([]);
         this.#root?.remove();
         document.querySelectorAll('style[data-reticle-overlay]').forEach((s) => s.remove());
         this.#root = undefined;
@@ -414,6 +458,37 @@ export class Presenter {
             this.#heartbeatTimer = undefined;
         }
     }
+    placeHud(visibility, corner) {
+        const root = this.#root;
+        if (root === undefined)
+            return [];
+        const applied = [];
+        if (HudVisibility.REMOVED === visibility) {
+            this.destroy();
+            return [visibility];
+        }
+        if (HudVisibility.HIDDEN === visibility)
+            root.setAttribute(HIDDEN_UNTIL_RESTART_ATTR, '1');
+        if (HudVisibility.SHOWN === visibility)
+            root.removeAttribute(HIDDEN_UNTIL_RESTART_ATTR);
+        if (visibility !== undefined)
+            applied.push(visibility);
+        const dock = root.querySelector(`[${DOCK_ATTR}]`);
+        if (corner !== undefined && dock instanceof HTMLElement) {
+            if (HudCorner.BOTTOM_RIGHT === corner)
+                resetHudDockPosition(dock);
+            else {
+                const box = hudLayoutBox(dock);
+                const left = corner.endsWith('left') ? 0 : window.innerWidth;
+                const top = corner.startsWith('top') ? 0 : window.innerHeight;
+                const at = clampHudPosition(left, top, box.width, box.height, window.innerWidth, window.innerHeight);
+                applyHudPosition(dock, at.left, at.top);
+            }
+            applied.push(corner);
+            scheduleSyncDockLayout(dock, root);
+        }
+        return applied;
+    }
     setIdleEndMs(ms) {
         if (!Number.isFinite(ms))
             return;
@@ -446,6 +521,8 @@ export class Presenter {
     }
     #clearRunLog() {
         this.#runLog = [];
+        this.#remembered = [];
+        rememberLog([]);
         this.#tallied = { passes: 0, fails: 0 };
         if (this.#log !== undefined)
             clearLogRows(this.#log);
@@ -463,12 +540,9 @@ export class Presenter {
         else {
             this.#renderTally();
         }
-        if (this.#root !== undefined) {
-            const live = SessionState.ACTIVE === this.#panel.state && !this.#shell.isCollapsed();
-            syncPageBlocker(this.#root, settings, live);
-        }
+        this.#syncAnnotator();
     }
-    log(kind, text, result) {
+    log(kind, text, result, actor) {
         const ms = this.#now();
         this.#glowCtl.markActivity(ms);
         if (this.#log === undefined)
@@ -484,9 +558,21 @@ export class Presenter {
         while (this.#runLog.length > this.#logMax)
             this.#runLog.shift();
         const ts = formatElapsed(ms - this.#logBaseMs);
-        const handle = appendLogRow(this.#log, kind, trimmed, ts, this.#logMax);
+        const handle = appendLogRow(this.#log, kind, trimmed, ts, this.#logMax, actor);
         if (result !== undefined)
             handle.result(result);
+        const kept = {
+            kind,
+            text: trimmed,
+            ts,
+            at: ms - this.#logBaseMs,
+            ...(actor === undefined ? {} : { actor }),
+            ...(result === undefined ? {} : { result }),
+        };
+        this.#remembered.push(kept);
+        while (this.#remembered.length > this.#logMax)
+            this.#remembered.shift();
+        rememberLog(this.#remembered);
         if (this.#shell.isCollapsed())
             this.#shell.pulseFab(true);
         this.#renderTally();
@@ -494,6 +580,8 @@ export class Presenter {
             result: (r) => {
                 handle.result(r);
                 entry.result = r;
+                kept.result = r;
+                rememberLog(this.#remembered);
                 this.#renderTally();
             },
         };

package/dist/presenter/tour/tour.d.ts

@@ -1,5 +1,8 @@
 import { isLastSlide } from './tour-view.js';
-export declare const TOUR_SEEN_KEY_PREFIX = "reticle.tour.seen.";
+import { TourAnchor } from '@reticlehq/core/tour';
+import { TOUR_SEEN_KEY_PREFIX } from '../../storage-keys.js';
+export { TOUR_SEEN_KEY_PREFIX };
+export declare const HUD_CONTROL_SELECTORS: Readonly<Partial<Record<TourAnchor, string>>>;
 export declare const tourSeenKey: (projectId: string) => string;
 export interface TourStorage {
     getItem: (key: string) => string | null;