@reticlehq/browser 2.13.1 → 3.1.0

package/dist/presenter/presenter-run-state.js

@@ -1,11 +1,6 @@
 import { SessionState } from '@reticlehq/core';
-import { LOG_KIND, LOG_RESULT } from './presenter-log.js';
+import { LOG_KIND, LOG_RESULT } from './chrome/presenter-log.js';
 import { getCapabilities } from '../registry/capabilities.js';
-/**
- * Compute the exported run-state from the controller's live fields: per-kind + pass/fail counts over
- * the activity log, the session duration, and the current capability surface. Extracted from
- * presenter.ts so the controller stays under the size cap; the counting is the same as before.
- */
 export function buildRunState(input) {
     const start = input.startMs ?? input.now;
     const counts = { reads: 0, acts: 0, narrations: 0, human: 0, passes: 0, fails: 0 };

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

@@ -1,2 +1 @@
-/** Compact settings card - dock-anchored above the HUD pill. */
 export declare const SETTINGS_CSS: string;

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

@@ -1,6 +1,5 @@
 import { SETTINGS_PANEL_ATTR, SETTINGS_ATTR, DOCK_ATTR, DOCK_ALIGN_ATTR, SETTINGS_PLACEMENT_ATTR, } from './presenter-config.js';
-import { HUD_DROP_SHADOW, HUD_SURFACE_CLASS, HUD_SURFACE_PAINT } from './presenter-hud-chrome.js';
-/** Compact settings card - dock-anchored above the HUD pill. */
+import { HUD_DROP_SHADOW, HUD_SURFACE_CLASS, HUD_SURFACE_PAINT, } from './chrome/presenter-hud-chrome.js';
 export const SETTINGS_CSS = `
 [${'data-reticle-overlay'}][${SETTINGS_ATTR}="1"] [${'data-reticle-chat-panel'}]{
   display:none !important;visibility:hidden !important;pointer-events:none !important;}
@@ -150,4 +149,5 @@ export const SETTINGS_CSS = `
   display:none;pointer-events:none;}
 [${'data-reticle-overlay'}][data-reticle-hidden="1"] [${DOCK_ATTR}],
 [${'data-reticle-overlay'}][data-reticle-hidden="1"] [${SETTINGS_PANEL_ATTR}]{display:none !important;}
+
 `;

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

@@ -1,20 +1,13 @@
 import { SETTINGS_CSS } from './presenter-settings-styles.js';
+import type { AccountState } from '@reticlehq/core';
+import { type AccountDetails } from './presenter-account.js';
 export { SETTINGS_CSS };
-/** How much detail lands in copied/exported run state. */
 export declare const OutputDetail: {
     readonly MINIMAL: "minimal";
     readonly STANDARD: "standard";
     readonly VERBOSE: "verbose";
 };
 export type OutputDetail = (typeof OutputDetail)[keyof typeof OutputDetail];
-/**
- * Status themes: ONE choice, three colours.
- *
- * This was four separate pickers - a chrome accent plus a swatch row per state - which is 28
- * decisions to land on a set that works together. A theme is a combination we have already checked
- * reads as a progression (working -> waiting -> done) and against a dark app, so the choice is
- * "which mood", not "which four hex values".
- */
 export declare const StatusThemeId: {
     readonly SIGNAL: "signal";
     readonly TRAFFIC: "traffic";
@@ -23,7 +16,7 @@ export declare const StatusThemeId: {
     readonly EMBER: "ember";
 };
 export type StatusThemeId = (typeof StatusThemeId)[keyof typeof StatusThemeId];
-export interface StatusTheme {
+interface StatusTheme {
     id: StatusThemeId;
     label: string;
     active: string;
@@ -34,13 +27,7 @@ export declare const STATUS_THEMES: readonly StatusTheme[];
 export declare function statusTheme(id: StatusThemeId): StatusTheme;
 export interface PresenterSettings {
     outputDetail: OutputDetail;
-    /**
-     * The colours the HUD signals session state with - the dot, the panel wash, the page glow, the
-     * FAB halo and the annotation marks all read from whichever one is current. One choice, because
-     * the three have to work as a set and against the user's own app.
-     */
     statusThemeId: StatusThemeId;
-    /** The page-edge glow. Off leaves every other signal (dot, panel, FAB) in place. */
     ambientGlow: boolean;
     reactComponents: boolean;
     hideUntilRestart: boolean;
@@ -53,21 +40,16 @@ export interface PresenterSettings {
 }
 export declare function getPresenterSettings(): PresenterSettings;
 export declare function loadPresenterSettings(): PresenterSettings;
-/** Settings panel markup - anchored above the gear in the toolbar. */
+export declare const SETTINGS_ACCOUNT_ATTR = "data-reticle-settings-account";
+export declare function paintSettingsAccount(root: HTMLElement, account: AccountState | undefined, dashboardUrl: string | undefined, details?: AccountDetails): void;
 export declare function settingsPanelHtml(): string;
 export interface SettingsHost {
     onHideUntilRestart?: () => void;
     onSettingsChange?: (settings: PresenterSettings) => void;
     onBeforeOpen?: () => void;
 }
-/** Apply persisted settings onto the overlay + dock. */
 export declare function applyPresenterSettings(root: HTMLElement, settings: PresenterSettings): void;
-/**
- * Toggle the full-page blocker. Only active while annotate mode is live AND the user opted in -
- * never on a collapsed FAB, so real hover/click on the host app still works.
- */
 export declare function syncPageBlocker(root: HTMLElement, settings: PresenterSettings, annotateLive: boolean): void;
-/** Blocker node - sits under Reticle UI, above the host page. */
 export declare function blockerHtml(): string;
 export declare class PresenterSettingsPanel {
     #private;

package/dist/presenter/presenter-settings.js

@@ -1,24 +1,16 @@
 import { SETTINGS_ATTR, SETTINGS_BTN_ATTR, SETTINGS_PANEL_ATTR, SETTINGS_CLOSE_ATTR, SETTING_KEY_ATTR, SETTINGS_STORAGE_KEY, AMBIENT_GLOW_ATTR, BLOCK_ATTR, HIDDEN_UNTIL_RESTART_ATTR, LOG_TIMESTAMPS_ATTR, REDUCE_MOTION_ATTR, DOCK_ATTR, MCP_DOCS_URL, } from './presenter-config.js';
-import { PresenterIcon, PRESENTER_ICON_SIZE, setHiIcon, hiIconHtml } from './presenter-icons.js';
-import { HUD_SURFACE_CLASS } from './presenter-hud-chrome.js';
+import { PresenterIcon, PRESENTER_ICON_SIZE, setHiIcon, hiIconHtml, } from './icons/presenter-icons.js';
+import { HUD_SURFACE_CLASS } from './chrome/presenter-hud-chrome.js';
 import { resetHudDockPosition } from './presenter-drag.js';
 import { findDock, scheduleSyncDockLayout } from './presenter-dock-layout.js';
 import { SETTINGS_CSS } from './presenter-settings-styles.js';
+import { accountControlHtml } from './presenter-account.js';
 export { SETTINGS_CSS };
-/** How much detail lands in copied/exported run state. */
 export const OutputDetail = {
     MINIMAL: 'minimal',
     STANDARD: 'standard',
     VERBOSE: 'verbose',
 };
-/**
- * Status themes: ONE choice, three colours.
- *
- * This was four separate pickers - a chrome accent plus a swatch row per state - which is 28
- * decisions to land on a set that works together. A theme is a combination we have already checked
- * reads as a progression (working -> waiting -> done) and against a dark app, so the choice is
- * "which mood", not "which four hex values".
- */
 export const StatusThemeId = {
     SIGNAL: 'signal',
     TRAFFIC: 'traffic',
@@ -70,14 +62,6 @@ const DEFAULT_SETTINGS = {
     blockPageInteractions: true,
     showTally: false,
     showTimestamps: true,
-    // ON by default: the chat IS the HUD's content, and shipping it off meant the default experience
-    // was a bare toolbar until somebody found the toggle. `expand()` has always opened the chat for
-    // the same reason; this is the other half — session start, with no click at all.
-    //
-    // Safe to default because `openChat()` expands a collapsed HUD, and session start is the one
-    // moment where that is what you want. A user who prefers the bare toolbar turns this off and it
-    // stays off: a stored `false` is honoured over the default, which is pinned in
-    // presenter-chat-default.test.ts so the product cannot change somebody's answer behind their back.
     autoOpenChat: true,
     reduceMotion: false,
 };
@@ -101,10 +85,6 @@ export function loadPresenterSettings() {
                 ? o['outputDetail']
                 : DEFAULT_SETTINGS.outputDetail,
             reactComponents: true === o['reactComponents'],
-            // NOT read back from storage. "Until restart" has to mean until restart: persisted, it
-            // survived the reload that was supposed to undo it, and the only way back was clearing
-            // localStorage by hand - the HUD was simply gone, including the settings panel that turned
-            // it off. It is a this-page-only switch, so it lives only in memory.
             hideUntilRestart: false,
             statusThemeId: isStatusThemeId(o['statusThemeId'])
                 ? o['statusThemeId']
@@ -140,7 +120,6 @@ function persistSettings(next) {
         localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(next));
     }
     catch {
-        /* quota / private mode - settings still apply for this page */
     }
 }
 function patchSettings(patch) {
@@ -168,7 +147,18 @@ function settingsCheckRow(key, label, checked) {
     <span class="reticle-settings-check-label">${label}</span>
   </label>`;
 }
-/** Settings panel markup - anchored above the gear in the toolbar. */
+export const SETTINGS_ACCOUNT_ATTR = 'data-reticle-settings-account';
+const SETTINGS_ACCOUNT_ROW_ATTR = 'data-reticle-settings-account-row';
+const ACCOUNT_HELP = 'Whether this machine is signed in to a Reticle workspace. Signing in happens in your terminal.';
+export function paintSettingsAccount(root, account, dashboardUrl, details = {}) {
+    const row = root.querySelector(`[${SETTINGS_ACCOUNT_ROW_ATTR}]`);
+    const slot = root.querySelector(`[${SETTINGS_ACCOUNT_ATTR}]`);
+    if (!(row instanceof HTMLElement) || !(slot instanceof HTMLElement))
+        return;
+    const html = accountControlHtml(account, { ...details, dashboardUrl }, true);
+    row.hidden = 0 === html.length;
+    slot.innerHTML = html;
+}
 export function settingsPanelHtml() {
     const close = hiIconHtml(PresenterIcon.REMOVE, PRESENTER_ICON_SIZE.MIN);
     const caret = hiIconHtml(PresenterIcon.CARET_RIGHT, PRESENTER_ICON_SIZE.HELP);
@@ -180,7 +170,7 @@ export function settingsPanelHtml() {
     const autoChatHelp = 'On by default. Opens the agent chat by itself when a session starts and when you expand the HUD. Off leaves the toolbar bare until you ask for the chat.';
     const motionHelp = 'Reduce HUD animations for accessibility';
     const glowHelp = 'Glow the page edges in the status colour while a session is live. Off keeps the HUD signals and leaves your app alone.';
-    return `<div ${SETTINGS_PANEL_ATTR} class="reticle-settings ${HUD_SURFACE_CLASS}" role="dialog" aria-label="Reticle settings" aria-hidden="true">
+    return `<div ${SETTINGS_PANEL_ATTR} class="reticle-settings ${HUD_SURFACE_CLASS}" role="region" aria-label="Reticle settings" aria-hidden="true">
     <div class="reticle-settings-inner">
       <div class="reticle-settings-head">
         <span class="reticle-settings-title">Settings</span>
@@ -202,6 +192,11 @@ export function settingsPanelHtml() {
         ${settingsCheckRow('clearOnCopy', 'Clear on copy/send', false)}
         ${settingsToggleRow('hideUntilRestart', 'Hide Until Restart', hideHelp)}
         ${settingsToggleRow('reduceMotion', 'Reduce motion', motionHelp)}
+        <div class="reticle-settings-section">Account</div>
+        <div class="reticle-settings-row" ${SETTINGS_ACCOUNT_ROW_ATTR} hidden>
+          ${settingsLabel('Workspace', ACCOUNT_HELP)}
+          <span ${SETTINGS_ACCOUNT_ATTR}></span>
+        </div>
         <div class="reticle-settings-section">Status theme</div>
         ${settingsToggleRow('ambientGlow', 'Page glow', glowHelp)}
         <div class="reticle-settings-themes" data-reticle-settings-themes></div>
@@ -213,7 +208,6 @@ export function settingsPanelHtml() {
     </div>
   </div>`;
 }
-/** Apply persisted settings onto the overlay + dock. */
 export function applyPresenterSettings(root, settings) {
     const theme = statusTheme(settings.statusThemeId);
     root.style.setProperty('--reticle-mark-accent', theme.active);
@@ -235,14 +229,9 @@ export function applyPresenterSettings(root, settings) {
         tally.setAttribute('hidden', '');
     }
 }
-/**
- * Toggle the full-page blocker. Only active while annotate mode is live AND the user opted in -
- * never on a collapsed FAB, so real hover/click on the host app still works.
- */
 export function syncPageBlocker(root, settings, annotateLive) {
     root.setAttribute(BLOCK_ATTR, settings.blockPageInteractions && annotateLive ? '1' : '0');
 }
-/** Blocker node - sits under Reticle UI, above the host page. */
 export function blockerHtml() {
     return '<div data-reticle-blocker aria-hidden="true"></div>';
 }
@@ -470,7 +459,6 @@ export class PresenterSettingsPanel {
             el.textContent = on ? '✓' : '';
         }
     }
-    /** One row of themes: each chip shows the whole set - active, idle, ended - in order. */
     #buildThemes() {
         const host = this.#panel?.querySelector('[data-reticle-settings-themes]');
         if (null === host || undefined === host)

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

@@ -1,10 +1,7 @@
-/**
- * Floating HUD shell styles - FAB, morphing toolbar, and agent chat panel.
- * Split from presenter-styles.ts so the controller stays under the size cap.
- */
-import { LOG_TIME_ATTR } from './presenter-log.js';
+import { LOG_TIME_ATTR } from './chrome/presenter-log.js';
+import { Z_HUD_TOOLTIP } from './presenter-config.js';
 import { CHAT_ATTR, CHAT_PILL_ATTR, CHAT_PLACEMENT_ATTR, DOCK_ALIGN_ATTR, DOCK_ATTR, LOG_TIMESTAMPS_ATTR, MIN_ATTR, REDUCE_MOTION_ATTR, LIVENESS_ATTR, } from './presenter-config.js';
-import { HUD_DROP_SHADOW, HUD_SURFACE_FILL } from './presenter-hud-chrome.js';
+import { HUD_DROP_SHADOW, HUD_SURFACE_FILL } from './chrome/presenter-hud-chrome.js';
 const OVERLAY = 'data-reticle-overlay';
 const HUD = 'data-reticle-hud';
 const CHAT_PANEL = 'data-reticle-chat-panel';
@@ -89,8 +86,8 @@ export const SHELL_CSS = `
 /**
  * Minimising the chat leaves a CAPSULE, not a hole: the same glass, the same state dot, the last
  * thing the agent did - sitting directly above the toolbar capsule and reopening the panel when
- * clicked. Minimise used to leave the toolbar alone above an empty gap, so a minimised session
- * looked identical to no session at all.
+ * clicked. Leaving the toolbar alone above an empty gap would make a minimised session look
+ * identical to no session at all.
  */
 [${CHAT_PILL_ATTR}]{
   display:none;position:absolute;right:0;left:auto;bottom:calc(100% + 8px);z-index:5;
@@ -118,6 +115,13 @@ export const SHELL_CSS = `
   flex:none;display:flex;align-items:center;gap:8px;padding:11px 44px 9px 14px;
   border-bottom:1px solid rgba(255,255,255,.06);}
 [${CHAT_PANEL}] .reticle-chat-brand{display:inline-flex;align-items:center;gap:7px;color:var(--reticle-fg);}
+/* The account capsule lives in the header, not the toolbar. The toolbar row is already 13px over its
+   own width, so a 20px avatar there pushed the close button outside the panel. The header has the
+   space, is visible under exactly the same condition, and is where an account avatar belongs anyway.
+   margin-left:auto right-aligns it; the head reserves 44px of right padding for the caret above it,
+   so the two never overlap. The :empty rule keeps the gap closed when no account state was sent. */
+[${CHAT_PANEL}] .reticle-head-account{margin-left:auto;display:inline-flex;align-items:center;}
+[${CHAT_PANEL}] .reticle-head-account:empty{display:none;}
 [${CHAT_PANEL}] .reticle-chat-brand .reticle-mark{height:14px;width:auto;}
 [${CHAT_PANEL}] .reticle-chat-brandname{font-size:12.5px;font-weight:600;letter-spacing:.01em;}
 /* No state word here: the activity strip immediately below already says "idle · 21s", and the
@@ -237,6 +241,7 @@ export const SHELL_CSS = `
   padding:2px;border-radius:999px;background:rgba(0,0,0,.2);}
 [${HUD}] .reticle-toolbar-chrome{display:inline-flex;align-items:center;gap:2px;flex:none;}
 [${HUD}] .reticle-tb-sep{width:1px;height:14px;background:rgba(255,255,255,.12);margin:0 4px;flex:none;align-self:center;}
+
 [${HUD}] .reticle-tb-wrap{position:relative;display:flex;align-items:center;justify-content:center;overflow:visible;}
 [${HUD}] .reticle-tb-btn{
   flex:none;display:inline-flex;align-items:center;justify-content:center;
@@ -262,10 +267,9 @@ export const SHELL_CSS = `
 [${HUD}] .reticle-hi-toggle .reticle-hi-icon--solid svg{
   transform:scale(1.12);transform-origin:center;}
 /*
- * Active toggles keep the OUTLINE icon. They used to swap to the solid heroicon, which is a filled
- * glyph next to 1.5px strokes everywhere else, so the pressed button read as a heavier typeface
- * rather than as a state. The state is already carried by accent colour and a background above,
- * which is enough and does not change the icon's weight.
+ * Active toggles keep the OUTLINE icon. The solid heroicon is a filled glyph next to 1.5px strokes
+ * everywhere else, so a pressed button reads as a heavier typeface rather than as a state. Accent
+ * colour and the background above already carry the state without changing the icon's weight.
  */
 [${HUD}] .reticle-tb-btn--toggle[data-active="1"] .reticle-hi-icon--outline{opacity:1;}
 [${HUD}] .reticle-tb-btn--toggle .reticle-hi-icon--solid{opacity:0;}
@@ -277,10 +281,10 @@ export const SHELL_CSS = `
 /**
  * The toolbar is a FIXED number of slots.
  *
- * Copy and Export appear when a session ends, and they used to be added to a bar that was already
- * full - eleven icons in a pill sized for nine, so the last one rendered outside the rounded box.
- * They take the two slots that Pause and End vacate: neither can do anything to a session that has
- * already ended, so the bar swaps two dead controls for two live ones and never changes width.
+ * Copy and Export appear when a session ends, and the bar is already full - eleven icons in a pill
+ * sized for nine renders the last one outside the rounded box. They take the two slots Pause and End
+ * vacate: neither can do anything to an ended session, so the bar swaps two dead controls for two
+ * live ones and never changes width.
  */
 [${HUD}] .reticle-tb-btn--export{display:none;}
 [${OVERLAY}][${STATE}="ended"] [${HUD}] .reticle-tb-btn--export{display:inline-flex;}
@@ -289,7 +293,7 @@ export const SHELL_CSS = `
 [${HUD}] .reticle-tb-tip{
   position:absolute;bottom:calc(100% + 14px);left:50%;transform:translateX(-50%) scale(.95);
   padding:6px 10px;background:#1a1a1a;color:rgba(255,255,255,.9);font-size:12px;font-weight:500;
-  border-radius:8px;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;z-index:3;
+  border-radius:8px;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;z-index:${String(Z_HUD_TOOLTIP)};
   box-shadow:0 2px 8px rgba(0,0,0,.3);transition:opacity .135s ease,transform .135s ease,visibility .135s;}
 [${HUD}] .reticle-tb-tip::after{
   content:"";position:absolute;top:calc(100% - 4px);left:50%;transform:translateX(-50%) rotate(45deg);
@@ -310,9 +314,8 @@ export const SHELL_CSS = `
  * The mode, ON the status row rather than under it.
  *
  * The action text beside it is flex:1, so this claims the right edge of the row and takes its space
- * from the elided action text. Nothing above or below moves: the panel used to grow and shrink by
- * the height of this pill on every single tool call, which is what made one status line look like a
- * second UI appearing and leaving.
+ * from the elided action text. Nothing above or below moves: growing and shrinking by the height of
+ * this pill on every tool call makes one status line look like a second UI appearing and leaving.
  */
 [${DOCK_ATTR}] .reticle-chip{display:none;flex:none;align-items:center;gap:4px;font-size:8px;font-weight:600;letter-spacing:.06em;
   height:16px;padding:0 7px;line-height:1;border-radius:999px;text-transform:uppercase;

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

@@ -1,28 +1,23 @@
 import { PresenterReport } from './presenter-report.js';
+import type { AccountState } from '@reticlehq/core';
+import { type AccountDetails } from './presenter-account.js';
 import { type SettingsHost } from './presenter-settings.js';
-export interface HudShellCallbacks {
+interface HudShellCallbacks {
     onChatOpen?: () => void;
     onChatClose?: () => void;
     onExpand?: () => void;
-    /** The user pressed the annotate toggle. `on` is the state they asked for. */
     onAnnotateToggle?: (on: boolean) => void;
     onCollapse?: () => void;
+    onSyncNow?: () => void;
     settings?: SettingsHost;
 }
-/**
- * Morphing HUD shell: circular FAB ↔ icon toolbar, plus the agent chat panel above.
- * Expand enters annotation mode; the page stays clickable except for captured annotate clicks.
- */
 export declare class HudShell {
     #private;
+    paintAccount(account: AccountState | undefined, dashboardUrl: string | undefined, details?: AccountDetails): void;
     constructor(callbacks?: HudShellCallbacks);
-    /** Markup for the dock wrapper (chat panel + morphing HUD shell). */
     static dockHtml(actStripHtml: string, bannerHtml: string, logAttr: string, flowsHtml: string, footHtml: string): string;
-    /** The impact report, so the presenter can feed it and the chat can open it. */
     get report(): PresenterReport;
-    /** Does the user currently want to annotate? */
     isAnnotateOn(): boolean;
-    /** Set the toggle and reflect it on the button, without firing the callback. */
     setAnnotateOn(on: boolean): void;
     mount(root: HTMLElement): void;
     teardown(): void;
@@ -33,14 +28,7 @@ export declare class HudShell {
     openChat(): void;
     closeChat(): void;
     toggleChat(): void;
-    /**
-     * The chat, asked for by a PERSON - so it takes the slot from the report.
-     *
-     * `openChat` is also called by `expand`, which the agent triggers at session start; routing that
-     * through here closed the impact report every time the agent touched the app, which is precisely
-     * when you are reading it.
-     */
     showChat(): void;
-    /** Pulse the FAB when new activity arrives while collapsed. */
     pulseFab(active: boolean): void;
 }
+export {};

package/dist/presenter/presenter-shell.js

@@ -1,27 +1,24 @@
 import { PresenterReport, reportPanelHtml } from './presenter-report.js';
+import { paintToolbarAccount, TOOLBAR_ACCOUNT_ATTR } from './presenter-workspace.js';
+import { mountAccountControl } from './presenter-account.js';
+import { paintSettingsAccount } from './presenter-settings.js';
 import { CHAT_MIN_ATTR, CHAT_PILL_ATTR, REPORT_ATTR, REPORT_BTN_ATTR, ANNOTATE_BTN_ATTR, CHAT_ATTR, CHAT_TOGGLE_ATTR, CHAT_PANEL_ATTR, DOCK_ATTR, FAB_ATTR, MIN_ATTR, SETTINGS_ATTR, SETTINGS_BTN_ATTR, } from './presenter-config.js';
-import { BRAND_NAME, FAB_TOGGLE_HTML, MARK_SVG } from './presenter-brand.js';
-import { settleLogAtLatest } from './presenter-log.js';
+import { BRAND_NAME, 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 './presenter-icons.js';
-import { HUD_SURFACE_CLASS, HUD_LOG_WELL_CLASS } from './presenter-hud-chrome.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 { 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';
-/** The minimised chat capsule's label - it reopens the panel. */
 const CHAT_PILL_LABEL = 'Open agent chat';
-/** The toolbar entry to the impact report. */
 const REPORT_LABEL = 'Impact';
 const SETTINGS_LABEL = 'Settings';
 const EXIT_LABEL = 'Exit';
-/**
- * Morphing HUD shell: circular FAB ↔ icon toolbar, plus the agent chat panel above.
- * Expand enters annotation mode; the page stays clickable except for captured annotate clicks.
- */
 export class HudShell {
     #root;
     #dock;
@@ -35,60 +32,47 @@ export class HudShell {
     #transitionLock = false;
     #suppressFabClick = false;
     #annotateBtn;
-    /**
-     * Whether the USER wants to annotate. Distinct from whether annotation is currently possible,
-     * which also needs a live session and an expanded HUD — this is the half the user controls, and
-     * conflating the two is why there was no way to keep the HUD open without annotating.
-     *
-     * OFF until asked for. It began as `true` to preserve the old behaviour where expanding the HUD
-     * silently entered annotate mode, and that is exactly what made the toolbar icon look permanently
-     * lit: the toolbar is only visible while expanded, so an intent that defaults to on is on every
-     * time you can see it. Annotate mode also captures clicks, so defaulting it on means a click lands
-     * as a mark before anyone asked for one. It is a mode now, and modes are entered deliberately.
-     */
     #annotateOn = false;
     #toggleSync;
-    /**
-     * One signal for every listener this shell registers, so teardown cannot drift from mount.
-     *
-     * The click handlers below are anonymous closures over `this`: there is no reference to hand to
-     * `removeEventListener`, so before this they were never removed at all. Mounting twice onto the
-     * same root therefore stacked a second set, and every handler kept the shell reachable for as
-     * long as its element lived.
-     */
     #listeners;
     #report = new PresenterReport({
         onBeforeOpen: () => {
-            // One panel at a time in the slot above the toolbar. The chat, the settings and the report
-            // all anchor there, so opening one over another stacks two glass cards and reads as a bug.
             this.#settings.close();
             this.closeChat();
         },
+        onSyncNow: () => this.#callbacks.onSyncNow?.(),
     });
     #callbacks;
+    #pushedAccount;
+    #accountTeardown;
+    paintAccount(account, dashboardUrl, details = {}) {
+        this.#pushedAccount = { account, dashboardUrl, details };
+        if (this.#root === undefined)
+            return;
+        paintToolbarAccount(this.#root, account, dashboardUrl, details);
+        paintSettingsAccount(this.#root, account, dashboardUrl, details);
+    }
     constructor(callbacks = {}) {
         this.#callbacks = callbacks;
         this.#settings = new PresenterSettingsPanel({
             ...callbacks.settings,
             onBeforeOpen: () => {
-                // Settings takes the slot from BOTH neighbours. Closing only the chat left the report
-                // sitting behind the settings card - two glass panels stacked in one anchor.
                 this.closeChat();
                 this.#report.close();
                 callbacks.settings?.onBeforeOpen?.();
             },
         });
     }
-    /** Markup for the dock wrapper (chat panel + morphing HUD shell). */
     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="dialog" aria-label="Reticle agent chat" aria-hidden="true">
+      <div ${CHAT_PANEL_ATTR} class="reticle-chat-panel ${HUD_SURFACE_CLASS}" role="region" aria-label="Reticle session" 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 ${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}
@@ -134,11 +118,9 @@ export class HudShell {
       </div>
     </div>`;
     }
-    /** The impact report, so the presenter can feed it and the chat can open it. */
     get report() {
         return this.#report;
     }
-    /** Light exactly the toolbar buttons whose panels are open. */
     #syncToolbarToggles() {
         const root = this.#root;
         if (root === undefined)
@@ -152,11 +134,9 @@ export class HudShell {
         lit(SETTINGS_BTN_ATTR, '1' === root.getAttribute(SETTINGS_ATTR));
         lit(REPORT_BTN_ATTR, '1' === root.getAttribute(REPORT_ATTR));
     }
-    /** Does the user currently want to annotate? */
     isAnnotateOn() {
         return this.#annotateOn;
     }
-    /** Set the toggle and reflect it on the button, without firing the callback. */
     setAnnotateOn(on) {
         this.#annotateOn = on;
         this.#annotateBtn?.setAttribute('aria-pressed', on ? 'true' : 'false');
@@ -200,10 +180,6 @@ export class HudShell {
         root.removeAttribute(CHAT_ATTR);
         this.#settings.mount(root);
         this.#report.mount(root);
-        // The toolbar's lit state FOLLOWS the panels, rather than being set by whoever was clicked.
-        // Set at click time, a button stayed lit after its panel was closed by the panel that replaced
-        // it - two icons active, one panel open. The observer is the only place that can be right for
-        // every path: the toolbar, Escape, click-outside, and one panel closing another.
         this.#toggleSync = new MutationObserver(() => this.#syncToolbarToggles());
         this.#toggleSync.observe(root, {
             attributes: true,
@@ -247,15 +223,17 @@ export class HudShell {
         }
         document.addEventListener('pointerdown', this.#onDocPointerDown, { signal });
         document.addEventListener('keydown', this.#onKeyDown, { signal });
+        this.#accountTeardown = mountAccountControl(root);
+        if (this.#pushedAccount !== undefined) {
+            const pushed = this.#pushedAccount;
+            this.paintAccount(pushed.account, pushed.dashboardUrl, pushed.details);
+        }
     }
     teardown() {
-        // One call for all nine registrations. It cannot fall out of step with mount() the way a list
-        // of removeEventListener calls can, which is the whole point.
+        this.#accountTeardown?.();
+        this.#accountTeardown = undefined;
         this.#listeners?.abort();
         this.#listeners = undefined;
-        // NOT covered by the signal: a MutationObserver takes no `signal` option. This disconnect was
-        // missing entirely, so the observer kept `root` — and through it the shell — alive after
-        // teardown, and a re-mount left the previous one still firing.
         this.#toggleSync?.disconnect();
         this.#toggleSync = undefined;
         this.#dragTeardown?.();
@@ -286,12 +264,6 @@ export class HudShell {
         if (this.#fab !== undefined)
             this.#fab.setAttribute('aria-expanded', 'true');
         this.#callbacks.onExpand?.();
-        // The chat IS the HUD's content: expanding to a toolbar with nothing above it made the agent's
-        // log something you had to know to go looking for. Unconditional on purpose — the way to a bare
-        // toolbar is the chat's own minimise button, not a preference. `Auto-open chat` is a different
-        // question (should it appear with no click at all, at session start) and stays separate, because
-        // wiring expand to it made session start expand the HUD and the FAB never appeared.
-        // `openChat` re-enters `expand` only when collapsed, and MIN_ATTR is already cleared above.
         this.openChat();
         if (this.#dock !== undefined)
             scheduleSyncDockLayout(this.#dock, this.#root);
@@ -316,8 +288,6 @@ export class HudShell {
         if (this.isChatOpen())
             return;
         this.#root.setAttribute(CHAT_ATTR, '1');
-        // The panel had no layout while it was closed, so its feed could not follow the newest row.
-        // Now that it does, put it there before it is looked at.
         const log = this.#root.querySelector('[data-reticle-log]');
         if (log !== null)
             settleLogAtLatest(log);
@@ -327,10 +297,6 @@ export class HudShell {
         this.#callbacks.onChatOpen?.();
         if (this.#dock !== undefined)
             scheduleSyncDockLayout(this.#dock, this.#root);
-        const input = this.#root.querySelector('[data-reticle-input]');
-        if (input !== null && !input.disabled) {
-            requestAnimationFrame(() => input.focus());
-        }
     }
     closeChat() {
         if (this.#root === undefined || !this.isChatOpen())
@@ -349,18 +315,10 @@ export class HudShell {
         else
             this.showChat();
     }
-    /**
-     * The chat, asked for by a PERSON - so it takes the slot from the report.
-     *
-     * `openChat` is also called by `expand`, which the agent triggers at session start; routing that
-     * through here closed the impact report every time the agent touched the app, which is precisely
-     * when you are reading it.
-     */
     showChat() {
         this.#report.close();
         this.openChat();
     }
-    /** Pulse the FAB when new activity arrives while collapsed. */
     pulseFab(active) {
         this.#fab?.setAttribute('data-pulse', active ? '1' : '0');
     }
@@ -370,15 +328,6 @@ export class HudShell {
             this.#transitionLock = false;
         }, TRANSITION_LOCK_MS);
     }
-    /**
-     * A click on the page dismisses the SETTINGS popover - and nothing else.
-     *
-     * The chat used to close here too, which was wrong from three directions: Reticle's own clicks
-     * land on the page (synthetic in-page, or a genuine OS event when it drives through CDP), a click
-     * in annotate mode is placing a mark, and a person clicking around their app while watching the
-     * log is not asking for the log to go away. The chat has three deliberate ways out - its minimise
-     * button, the toolbar toggle, and Escape - and that is all it needs.
-     */
     #onDocPointerDown = (e) => {
         if (this.#root === undefined || this.#dock === undefined)
             return;

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

@@ -1,11 +1,3 @@
-/**
- * All presenter overlay CSS - glow border, synthetic cursor/ring/ripple, and the floating HUD shell.
- * Split across shell-styles + controls + log modules so each file stays under the size cap.
- */
-/**
- * The presenter overlay's stacking layer. Exported because the annotator has to sit ABOVE it: the
- * overlay holds the page blocker, and anything below this number is covered by that shield - which
- * is what buried the annotate composer and made its Cancel/Add buttons unclickable.
- */
-export declare const Z_OVERLAY = 2147483600;
+import { Z_OVERLAY } from './chrome/layers.js';
+export { Z_OVERLAY };
 export declare const PRESENTER_CSS: string;