@reticlehq/browser 2.14.0 → 3.1.0

package/dist/presenter/presenter-config.js

@@ -19,7 +19,9 @@ export const HEARTBEAT_MS = 1000;
 export const IDLE_NOTICE_MS = 4000;
 export const ACT_STRIP = {
     READY: 'Ready',
-    IDLE_PREFIX: 'idle · ',
+    PLANNING_PREFIX: 'planning next action · ',
+    STOPPED: 'stopped',
+    STOPPED_PREFIX: 'stopped · ',
     NOW: 'now',
     SINCE_LAST: ' since last action',
 };

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

@@ -1,10 +1,6 @@
 import { HumanControlKind, PresenterTone, SessionState } from '@reticlehq/core';
+export type { ControlIntent, ControlHandler } from './presenter-config.js';
 export declare const ENDED_FADE_MS = 4000;
-export interface ControlIntent {
-    kind: HumanControlKind;
-    text?: string;
-}
-export type ControlHandler = (intent: ControlIntent) => void;
 export declare const CONTROLS_CSS: string;
 export declare const CONTROLS_TOOLBAR_HTML: string;
 export declare const CONTROLS_BANNER_HTML = "<div data-reticle-banner class=\"reticle-banner\">Session ended</div>";
@@ -28,4 +24,3 @@ export declare class ControlPanel {
     refilterFlows(): void;
     setState(state: SessionState, text?: string, tone?: PresenterTone): void;
 }
-export {};

package/dist/presenter/presenter-controls.js

@@ -1,7 +1,7 @@
 import { HumanControlKind, PresenterTone, SessionState } from '@reticlehq/core';
-import { nativeSetTimeout, nativeClearTimeout } from '../timers/native-timers.js';
+import { nativeSetTimeout, nativeClearTimeout } from '../timers/native/native-timers.js';
 import { CHAT_TOGGLE_ATTR, CLEAR_MARKS_ATTR, MARKERS_BTN_ATTR } from './presenter-config.js';
-import { PresenterIcon, PRESENTER_ICON_SIZE, hiIcon, hiIconHtml, hiToggleIconHtml, } from './presenter-icons.js';
+import { PresenterIcon, PRESENTER_ICON_SIZE, hiIcon, hiIconHtml, hiToggleIconHtml, } from './icons/presenter-icons.js';
 import { getPresenterSettings } from './presenter-settings.js';
 import { mountWorkspaceSelector, workspaceRowHtml } from './presenter-workspace.js';
 const DATA_RETICLE_STATE = 'data-reticle-state';
@@ -57,6 +57,11 @@ export const CONTROLS_CSS = `
   background:rgba(255,255,255,.06);color:rgba(255,255,255,.7);cursor:pointer;line-height:0;transition:background .12s,color .12s;}
 [data-reticle-chat-panel] .reticle-workspace-copy:hover:not(:disabled){background:rgba(255,255,255,.12);color:#fff;}
 [data-reticle-chat-panel] .reticle-workspace-copy:disabled{opacity:.35;cursor:not-allowed;}
+/* The account capsule, to the right of the menu title. Matches the local idiom in this block:
+   the workspace menu predates the design tokens used in the report panel and states its own
+   greys, so a token here would be the only one and would not match its neighbours. */
+[data-reticle-chat-panel] .reticle-workspace-menu-actions{
+  display:flex;align-items:center;gap:6px;}
 [data-reticle-chat-panel] .reticle-workspace-menu-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:4px 0;}
 [data-reticle-chat-panel] .reticle-workspace-menu-k{flex:none;color:rgba(255,255,255,.42);}
 [data-reticle-chat-panel] .reticle-workspace-menu-v{min-width:0;text-align:right;color:rgba(255,255,255,.9);font-weight:500;word-break:break-all;}

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

@@ -1,5 +1,5 @@
 import { CHAT_ATTR, CHAT_PANEL_ATTR, CHAT_PLACEMENT_ATTR, DOCK_ALIGN_ATTR, DOCK_ATTR, HUD_DOCK_MARGIN_PX, Placement, SETTINGS_ATTR, SETTINGS_PANEL_ATTR, SETTINGS_PLACEMENT_ATTR, } from './presenter-config.js';
-import { applyHudPosition, isHudDragged, readHudPosition, relayoutHudPosition, } from './presenter-drag.js';
+import { applyHudPosition, isHudDragged, readHudPosition, relayoutHudPosition, } from './presenter-hud-position.js';
 const HUD_ATTR = 'data-reticle-hud';
 const DOCK_PANEL_GAP_PX = 8;
 const DOCK_SETTINGS_GAP_PX = 12;

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

@@ -1,26 +1,8 @@
+export { applyHudPosition, isHudDragged, readHudPosition, relayoutHudPosition, clampHudPosition, hudLayoutBox, resetHudDockPosition, } from './presenter-hud-position.js';
 interface HudDragCallbacks {
     onDragMove?: () => void;
     onDragEnd?: (moved: boolean) => void;
 }
-export declare function isHudDragged(hud: HTMLElement): boolean;
-export declare function clampHudPosition(left: number, top: number, width: number, height: number, viewportWidth: number, viewportHeight: number, margin?: number): {
-    left: number;
-    top: number;
-};
-export declare function applyHudPosition(hud: HTMLElement, left: number, top: number): void;
-export declare function resetHudDockPosition(hud: HTMLElement): void;
-export declare function hudLayoutBox(hud: HTMLElement): {
-    left: number;
-    top: number;
-    width: number;
-    height: number;
-};
-export declare function readHudPosition(hud: HTMLElement): {
-    left: number;
-    top: number;
-};
-export declare function relayoutHudPosition(hud: HTMLElement): void;
 export declare function installHudPositionGuards(hud: HTMLElement, overlay: HTMLElement): () => void;
 export declare function installHudDrag(hud: HTMLElement, head: HTMLElement, callbacks?: HudDragCallbacks): () => void;
 export declare function installHudDragHandles(hud: HTMLElement, handles: HTMLElement[], callbacks?: HudDragCallbacks): () => void;
-export {};

package/dist/presenter/presenter-drag.js

@@ -1,55 +1,8 @@
-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 { HUD_DRAG_IGNORE_SEL, HUD_DRAG_THRESHOLD_PX, MIN_ATTR, CHAT_ATTR, SETTINGS_ATTR, } from './presenter-config.js';
 import { scheduleSyncDockLayout } from './presenter-dock-layout.js';
+import { applyHudPosition, clampHudPosition, hudLayoutBox, relayoutHudPosition, } from './presenter-hud-position.js';
+export { applyHudPosition, isHudDragged, readHudPosition, relayoutHudPosition, clampHudPosition, hudLayoutBox, resetHudDockPosition, } from './presenter-hud-position.js';
 const DRAG_HANDLE_DRAGGING_CLASS = 'reticle-drag-handle--dragging';
-export function isHudDragged(hud) {
-    return '1' === hud.getAttribute(HUD_DRAGGED_ATTR);
-}
-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)),
-    };
-}
-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`);
-}
-export function resetHudDockPosition(hud) {
-    hud.removeAttribute(HUD_DRAGGED_ATTR);
-    hud.style.removeProperty(HUD_POS_X_VAR);
-    hud.style.removeProperty(HUD_POS_Y_VAR);
-}
-export function hudLayoutBox(hud) {
-    const rect = hud.getBoundingClientRect();
-    return {
-        left: rect.left,
-        top: rect.top,
-        width: rect.width,
-        height: rect.height,
-    };
-}
-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 };
-}
-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);
-}
 export function installHudPositionGuards(hud, overlay) {
     const scheduleRelayout = () => {
         scheduleSyncDockLayout(hud, overlay);

package/dist/presenter/presenter-glow.js

@@ -1,5 +1,5 @@
 import { PresenterMode } from '@reticlehq/core';
-import { nativeSetTimeout, nativeClearTimeout } from '../timers/native-timers.js';
+import { nativeSetTimeout, nativeClearTimeout } from '../timers/native/native-timers.js';
 import { GlowPhase, BorderMode, DATA_BUSY, BUSY_ON, BUSY_OFF, GLOW_ON, GLOW_OFF, DATA_ON, } from './presenter-config.js';
 export class GlowController {
     #phase = GlowPhase.IDLE;

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

@@ -0,0 +1,18 @@
+export declare function isHudDragged(hud: HTMLElement): boolean;
+export declare function clampHudPosition(left: number, top: number, width: number, height: number, viewportWidth: number, viewportHeight: number, margin?: number): {
+    left: number;
+    top: number;
+};
+export declare function applyHudPosition(hud: HTMLElement, left: number, top: number): void;
+export declare function resetHudDockPosition(hud: HTMLElement): void;
+export declare function hudLayoutBox(hud: HTMLElement): {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+export declare function readHudPosition(hud: HTMLElement): {
+    left: number;
+    top: number;
+};
+export declare function relayoutHudPosition(hud: HTMLElement): void;

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

@@ -0,0 +1,50 @@
+import { HUD_DOCK_MARGIN_PX, HUD_DRAGGED_ATTR, HUD_POS_X_VAR, HUD_POS_Y_VAR, } from './presenter-config.js';
+export function isHudDragged(hud) {
+    return '1' === hud.getAttribute(HUD_DRAGGED_ATTR);
+}
+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)),
+    };
+}
+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`);
+}
+export function resetHudDockPosition(hud) {
+    hud.removeAttribute(HUD_DRAGGED_ATTR);
+    hud.style.removeProperty(HUD_POS_X_VAR);
+    hud.style.removeProperty(HUD_POS_Y_VAR);
+}
+export function hudLayoutBox(hud) {
+    const rect = hud.getBoundingClientRect();
+    return {
+        left: rect.left,
+        top: rect.top,
+        width: rect.width,
+        height: rect.height,
+    };
+}
+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 };
+}
+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);
+}

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

@@ -1,4 +1,4 @@
-import { HUD_DROP_SHADOW } from './presenter-hud-chrome.js';
+import { HUD_DROP_SHADOW } from './chrome/presenter-hud-chrome.js';
 import { DOCK_ALIGN_ATTR, DOCK_ATTR, REPORT_ATTR, REPORT_PANEL_ATTR } from './presenter-config.js';
 const OVERLAY = 'data-reticle-overlay';
 export const REPORT_CSS = `
@@ -123,4 +123,19 @@ export const REPORT_CSS = `
 [${REPORT_PANEL_ATTR}] .reticle-report-links a{
   color:var(--reticle-faint);font-size:10.5px;text-decoration:none;}
 [${REPORT_PANEL_ATTR}] .reticle-report-links a:hover{color:var(--reticle-fg);text-decoration:underline;}
+
+/* Who this record belongs to, and the push-now control. Tokens only — no literal colours. */
+[${REPORT_PANEL_ATTR}] .reticle-report-identity{
+  display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:10px 14px 0;min-height:0;}
+[${REPORT_PANEL_ATTR}] .reticle-report-identity:empty{display:none;}
+[${REPORT_PANEL_ATTR}] .reticle-sync-now{
+  display:inline-flex;align-items:center;justify-content:center;
+  border:none;background:transparent;color:var(--reticle-faint);cursor:pointer;line-height:0;padding:2px;}
+[${REPORT_PANEL_ATTR}] .reticle-sync-now:hover{color:var(--reticle-fg);}
+/* The one moment this control has an opinion: it says it is going, not that it has arrived. */
+[${REPORT_PANEL_ATTR}] .reticle-sync-now[data-syncing="1"]{
+  color:var(--reticle-c-active);animation:reticle-sync-spin 900ms linear infinite;}
+@keyframes reticle-sync-spin{to{transform:rotate(360deg);}}
+@media (prefers-reduced-motion:reduce){
+  [${REPORT_PANEL_ATTR}] .reticle-sync-now[data-syncing="1"]{animation:none;}}
 `;

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

@@ -1,8 +1,9 @@
 import { type AccountState, type ImpactScope, type ImpactSnapshot } from '@reticlehq/core';
 export declare function reportPanelHtml(): string;
-export declare function reportBodyHtml(scope: ImpactScope, dashboardUrl?: string, account?: AccountState): string;
+export declare function reportBodyHtml(scope: ImpactScope, dashboardUrl?: string, account?: AccountState, projectName?: string): string;
 interface ReportHost {
     onBeforeOpen?: () => void;
+    onSyncNow?: () => void;
 }
 export declare class PresenterReport {
     #private;

package/dist/presenter/presenter-report.js

@@ -1,8 +1,10 @@
 import { IMPACT_DEFECT_LIMIT, } from '@reticlehq/core';
-import { PresenterIcon, PRESENTER_ICON_SIZE, hiIconHtml } from './presenter-icons.js';
-import { HUD_SURFACE_CLASS } from './presenter-hud-chrome.js';
+import { PresenterIcon, PRESENTER_ICON_SIZE, hiIconHtml } from './icons/presenter-icons.js';
+import { HUD_SURFACE_CLASS } from './chrome/presenter-hud-chrome.js';
+import { esc, isSafeDashboardUrl } from './chrome/presenter-safe-html.js';
+import { ACCOUNT_SIGNIN_ATTR, ACCOUNT_TEXT, SYNC_BTN_ATTR, accountControlHtml, syncButtonHtml, } from './presenter-account.js';
 import { REPORT_PANEL_ATTR, REPORT_ATTR, REPORT_CLOSE_ATTR } from './presenter-config.js';
-import { REPORT_LINKS, REPORT_TEXT, buildLinkedInShareUrl, buildReferralText, buildShareText, buildXShareUrl, compactDuration, compactNumber, } from './presenter-report-copy.js';
+import { REPORT_LINKS, REPORT_TEXT, buildLinkedInShareUrl, buildReferralText, buildShareText, buildXShareUrl, compactDuration, compactNumber, } from './chrome/presenter-report-copy.js';
 const SCOPE_ATTR = 'data-reticle-report-scope';
 const SHARE_X_ATTR = 'data-reticle-share-x';
 const SHARE_IN_ATTR = 'data-reticle-share-in';
@@ -55,22 +57,6 @@ function chart(scope) {
         .join('');
     return `<div class="reticle-report-chart-wrap"><span class="reticle-report-section">${REPORT_TEXT.CHART}</span><div class="reticle-report-chart">${bars}</div></div>`;
 }
-function esc(value) {
-    return value
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;');
-}
-function isSafeDashboardUrl(raw) {
-    try {
-        const scheme = new URL(raw).protocol;
-        return 'https:' === scheme || 'http:' === scheme;
-    }
-    catch {
-        return false;
-    }
-}
 function defects(scope, dashboardUrl) {
     const list = (scope.defects ?? []).slice(0, IMPACT_DEFECT_LIMIT);
     if (0 === list.length)
@@ -95,7 +81,7 @@ function defects(scope, dashboardUrl) {
         : `<a class="reticle-report-defects-more" href="${esc(dashboardUrl)}" target="_blank" rel="noreferrer noopener">${REPORT_TEXT.DEFECTS_MORE}${scope.counts.failed > list.length ? ` (${String(scope.counts.failed)})` : ''}</a>`;
     return `<div class="reticle-report-defects-wrap"><span class="reticle-report-section">${REPORT_TEXT.DEFECTS}</span><ul class="reticle-report-defects">${rows}</ul>${more}</div>`;
 }
-export function reportBodyHtml(scope, dashboardUrl, account) {
+export function reportBodyHtml(scope, dashboardUrl, account, projectName) {
     const c = scope.counts;
     if (0 === c.calls)
         return `<p class="reticle-report-empty">${REPORT_TEXT.EMPTY}</p>`;
@@ -118,7 +104,8 @@ export function reportBodyHtml(scope, dashboardUrl, account) {
         card(compactNumber(scope.savings.tokens.value), REPORT_TEXT.SAVED_TOKENS, scope.savings.tokens.basis),
         card(compactDuration(scope.savings.minutes.value * 60_000), REPORT_TEXT.SAVED_MINUTES, scope.savings.minutes.basis),
     ].join('');
-    return `${streak}${hero}${verdicts}<div class="reticle-report-grid">${cards}</div>${defects(scope, dashboardUrl)}${chart(scope)}${localOnly(scope, dashboardUrl, account)}`;
+    const identity = `<div class="reticle-report-identity">${accountControlHtml(account, { dashboardUrl, projectName, verdicts: c.verdicts, defects: c.failed })}${syncButtonHtml(dashboardUrl)}</div>`;
+    return `${identity}${streak}${hero}${verdicts}<div class="reticle-report-grid">${cards}</div>${defects(scope, dashboardUrl)}${chart(scope)}${localOnly(scope, dashboardUrl, account)}`;
 }
 function localOnly(scope, dashboardUrl, account) {
     if (dashboardUrl !== undefined)
@@ -132,6 +119,8 @@ function localOnly(scope, dashboardUrl, account) {
         : [REPORT_TEXT.LOCAL_ONLY, REPORT_TEXT.LOCAL_ONLY_ACTION, REPORT_TEXT.LOCAL_ONLY_TAIL];
     return `<p class="reticle-report-local-only">${lead} <code>${action}</code> ${tail}</p>`;
 }
+const SYNC_SPIN_MS = 1_200;
+const SYNCING_ATTR = 'data-syncing';
 export class PresenterReport {
     #panel;
     #body;
@@ -175,6 +164,24 @@ export class PresenterReport {
             e.stopPropagation();
             void this.#copy(buildReferralText(), e.currentTarget);
         });
+        root.addEventListener('click', (e) => {
+            const target = e.target;
+            if (!(target instanceof Element))
+                return;
+            const signin = target.closest(`[${ACCOUNT_SIGNIN_ATTR}]`);
+            if (signin !== null) {
+                e.stopPropagation();
+                void this.#copy(ACCOUNT_TEXT.SIGNIN_COMMAND, signin);
+                return;
+            }
+            const sync = target.closest(`[${SYNC_BTN_ATTR}]`);
+            if (sync !== null) {
+                e.stopPropagation();
+                this.#host.onSyncNow?.();
+                sync.setAttribute(SYNCING_ATTR, '1');
+                setTimeout(() => sync.removeAttribute(SYNCING_ATTR), SYNC_SPIN_MS);
+            }
+        });
     }
     setSnapshot(snapshot) {
         this.#snapshot = snapshot;
@@ -229,7 +236,7 @@ export class PresenterReport {
         this.#body.innerHTML =
             scope === undefined
                 ? `<p class="reticle-report-empty">${REPORT_TEXT.EMPTY}</p>`
-                : reportBodyHtml(scope, this.#snapshot?.dashboardUrl, this.#snapshot?.account);
+                : reportBodyHtml(scope, this.#snapshot?.dashboardUrl, this.#snapshot?.account, this.#snapshot?.projectName);
     }
     #openShare(url) {
         window.open(url, '_blank', 'noopener,noreferrer');

package/dist/presenter/presenter-run-state.d.ts

@@ -1,5 +1,5 @@
 import { SessionState } from '@reticlehq/core';
-import { type LogKind, type LogResult } from './presenter-log.js';
+import { type LogKind, type LogResult } from './chrome/presenter-log.js';
 import { type Capabilities } from '../registry/capabilities.js';
 export interface PresenterRunState {
     session: string;

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

@@ -1,5 +1,5 @@
 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';
 export function buildRunState(input) {
     const start = input.startMs ?? input.now;

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

@@ -1,5 +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';
+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;}
@@ -149,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,4 +1,6 @@
 import { SETTINGS_CSS } from './presenter-settings-styles.js';
+import type { AccountState } from '@reticlehq/core';
+import { type AccountDetails } from './presenter-account.js';
 export { SETTINGS_CSS };
 export declare const OutputDetail: {
     readonly MINIMAL: "minimal";
@@ -38,6 +40,8 @@ export interface PresenterSettings {
 }
 export declare function getPresenterSettings(): PresenterSettings;
 export declare function loadPresenterSettings(): PresenterSettings;
+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;

package/dist/presenter/presenter-settings.js

@@ -1,9 +1,10 @@
 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 };
 export const OutputDetail = {
     MINIMAL: 'minimal',
@@ -146,6 +147,18 @@ function settingsCheckRow(key, label, checked) {
     <span class="reticle-settings-check-label">${label}</span>
   </label>`;
 }
+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);
@@ -179,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>

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

@@ -1,7 +1,7 @@
-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';
@@ -86,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;
@@ -115,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
@@ -234,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;
@@ -259,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;}
@@ -274,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;}
@@ -307,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,4 +1,6 @@
 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';
 interface HudShellCallbacks {
     onChatOpen?: () => void;
@@ -6,10 +8,12 @@ interface HudShellCallbacks {
     onExpand?: () => void;
     onAnnotateToggle?: (on: boolean) => void;
     onCollapse?: () => void;
+    onSyncNow?: () => void;
     settings?: SettingsHost;
 }
 export declare class HudShell {
     #private;
+    paintAccount(account: AccountState | undefined, dashboardUrl: string | undefined, details?: AccountDetails): void;
     constructor(callbacks?: HudShellCallbacks);
     static dockHtml(actStripHtml: string, bannerHtml: string, logAttr: string, flowsHtml: string, footHtml: string): string;
     get report(): PresenterReport;

package/dist/presenter/presenter-shell.js

@@ -1,11 +1,14 @@
 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';
@@ -37,8 +40,18 @@ export class HudShell {
             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({
@@ -59,6 +72,7 @@ export class HudShell {
       <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}
@@ -209,8 +223,15 @@ 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() {
+        this.#accountTeardown?.();
+        this.#accountTeardown = undefined;
         this.#listeners?.abort();
         this.#listeners = undefined;
         this.#toggleSync?.disconnect();

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

@@ -1,2 +1,3 @@
-export declare const Z_OVERLAY = 2147483600;
+import { Z_OVERLAY } from './chrome/layers.js';
+export { Z_OVERLAY };
 export declare const PRESENTER_CSS: string;