@reticlehq/browser 2.13.1 → 3.1.0

package/dist/presenter/presenter-styles.js

@@ -1,19 +1,12 @@
-import { LOG_CSS } from './presenter-log.js';
+import { Z_OVERLAY } from './chrome/layers.js';
+import { LOG_CSS } from './chrome/presenter-log.js';
 import { CONTROLS_CSS } from './presenter-controls.js';
 import { SHELL_CSS } from './presenter-shell-styles.js';
 import { SETTINGS_CSS } from './presenter-settings-styles.js';
-import { HUD_CHROME_CSS, HUD_LOG_WELL_CSS } from './presenter-hud-chrome.js';
+import { ACCOUNT_CSS } from './presenter-account-styles.js';
+import { HUD_CHROME_CSS, HUD_LOG_WELL_CSS } from './chrome/presenter-hud-chrome.js';
 import { REPORT_CSS } from './presenter-report-styles.js';
-/**
- * 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 const Z_OVERLAY = 2147483600;
+export { Z_OVERLAY };
 export const PRESENTER_CSS = `
 [data-reticle-overlay]{position:fixed;inset:0;pointer-events:none;z-index:${String(Z_OVERLAY)};}
 /**
@@ -69,5 +62,6 @@ ${HUD_LOG_WELL_CSS}
 ${SHELL_CSS}
 ${SETTINGS_CSS}
 ${REPORT_CSS}
+${ACCOUNT_CSS}
 ${LOG_CSS}
 ${CONTROLS_CSS}`;

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

@@ -1,15 +1,15 @@
-/** Read the Vite-injected repo root, when present. */
+import type { AccountState } from '@reticlehq/core';
+import { type AccountDetails } from './presenter-account.js';
+export declare const TOOLBAR_ACCOUNT_ATTR = "data-reticle-toolbar-account";
 export declare function readWorkspaceRoot(): string | undefined;
-/** Last path segment for compact display (Codex/Cursor-style chip). */
 export declare function workspaceFolderLabel(root: string): string;
-/** Project id from the URL lease stamp, when present. */
 export declare function readProjectIdFromUrl(): string | undefined;
 export declare function workspaceSummary(): {
     folder: string;
     root?: string;
     projectId?: string;
 };
-/** Workspace chip + detail menu - sits above the composer row. */
 export declare function workspaceRowHtml(): string;
 export declare function paintWorkspace(root: HTMLElement): void;
 export declare function mountWorkspaceSelector(root: HTMLElement): () => void;
+export declare function paintToolbarAccount(root: HTMLElement, account: AccountState | undefined, dashboardUrl: string | undefined, details?: AccountDetails): void;

package/dist/presenter/presenter-workspace.js

@@ -1,29 +1,29 @@
 import { RETICLE_ROOT_GLOBAL, RETICLE_URL_PARAM } from '@reticlehq/core';
-import { PresenterIcon, PRESENTER_ICON_SIZE, hiIconHtml } from './presenter-icons.js';
+import { PresenterIcon, PRESENTER_ICON_SIZE, hiIconHtml } from './icons/presenter-icons.js';
+import { ACCOUNT_SIGNIN_ATTR, ACCOUNT_TEXT, accountControlHtml, } from './presenter-account.js';
 const WORKSPACE_BTN_ATTR = 'data-reticle-workspace-btn';
 const WORKSPACE_MENU_ATTR = 'data-reticle-workspace-menu';
 const WORKSPACE_NAME_ATTR = 'data-reticle-workspace-name';
 const WORKSPACE_PATH_ATTR = 'data-reticle-workspace-path';
 const WORKSPACE_PROJECT_ATTR = 'data-reticle-workspace-project';
 const WORKSPACE_COPY_ATTR = 'data-reticle-workspace-copy';
+export const TOOLBAR_ACCOUNT_ATTR = 'data-reticle-toolbar-account';
+const COPIED_MS = 1_200;
 const WORKSPACE_LABEL = 'Workspace';
 const PROJECT_LABEL = 'Project';
 const COPY_PATH_LABEL = 'Copy path';
 const COPIED_PATH_LABEL = 'Copied';
 const WORKSPACE_FALLBACK = 'This page';
-/** Read the Vite-injected repo root, when present. */
 export function readWorkspaceRoot() {
     const value = globalThis[RETICLE_ROOT_GLOBAL];
     return 'string' === typeof value && value.length > 0 ? value : undefined;
 }
-/** Last path segment for compact display (Codex/Cursor-style chip). */
 export function workspaceFolderLabel(root) {
     const normalized = root.replace(/\\/g, '/').replace(/\/+$/, '');
     const parts = normalized.split('/').filter((part) => part.length > 0);
     const last = parts[parts.length - 1];
     return last !== undefined && last.length > 0 ? last : WORKSPACE_FALLBACK;
 }
-/** Project id from the URL lease stamp, when present. */
 export function readProjectIdFromUrl() {
     if ('undefined' === typeof window)
         return undefined;
@@ -43,7 +43,6 @@ export function workspaceSummary() {
         out.projectId = projectId;
     return out;
 }
-/** Workspace chip + detail menu - sits above the composer row. */
 export function workspaceRowHtml() {
     const folderIcon = hiIconHtml(PresenterIcon.LAYOUT, PRESENTER_ICON_SIZE.HELP);
     const caret = hiIconHtml(PresenterIcon.CARET_DOWN, PRESENTER_ICON_SIZE.HELP);
@@ -54,10 +53,12 @@ export function workspaceRowHtml() {
       <span class="reticle-workspace-name" ${WORKSPACE_NAME_ATTR}>${WORKSPACE_FALLBACK}</span>
       <span class="reticle-workspace-caret" aria-hidden="true">${caret}</span>
     </button>
-    <div class="reticle-workspace-menu" ${WORKSPACE_MENU_ATTR} role="dialog" aria-label="${WORKSPACE_LABEL}" aria-hidden="true" hidden>
+    <div class="reticle-workspace-menu" ${WORKSPACE_MENU_ATTR} role="region" aria-label="${WORKSPACE_LABEL}" aria-hidden="true" hidden>
       <div class="reticle-workspace-menu-head">
         <div class="reticle-workspace-menu-title">${WORKSPACE_LABEL}</div>
-        <button type="button" class="reticle-workspace-copy" ${WORKSPACE_COPY_ATTR} title="${COPY_PATH_LABEL}" aria-label="${COPY_PATH_LABEL}">${copyIcon}</button>
+        <div class="reticle-workspace-menu-actions">
+          <button type="button" class="reticle-workspace-copy" ${WORKSPACE_COPY_ATTR} title="${COPY_PATH_LABEL}" aria-label="${COPY_PATH_LABEL}">${copyIcon}</button>
+        </div>
       </div>
       <div class="reticle-workspace-menu-row"><span class="reticle-workspace-menu-k">Folder</span><span class="reticle-workspace-menu-v" data-reticle-workspace-folder></span></div>
       <div class="reticle-workspace-menu-row"><span class="reticle-workspace-menu-k">Path</span><span class="reticle-workspace-menu-v reticle-workspace-menu-path" ${WORKSPACE_PATH_ATTR}></span></div>
@@ -67,9 +68,6 @@ export function workspaceRowHtml() {
 }
 export function paintWorkspace(root) {
     const summary = workspaceSummary();
-    // Nothing to say - no injected repo root, no leased project id - so the chip says nothing. It
-    // used to render its fallback, "This page", which names no workspace and is exactly as true of
-    // every page. The chip earns its slot only when it can tell you WHICH checkout is being driven.
     const wrap = root.querySelector('.reticle-workspace-wrap');
     if (wrap instanceof HTMLElement) {
         const known = summary.root !== undefined || summary.projectId !== undefined;
@@ -135,6 +133,22 @@ export function mountWorkspaceSelector(root) {
         e.stopPropagation();
         toggle();
     };
+    const onMenuClick = (e) => {
+        const target = e.target;
+        if (!(target instanceof Element))
+            return;
+        const signin = target.closest(`[${ACCOUNT_SIGNIN_ATTR}]`);
+        if (null === signin)
+            return;
+        e.stopPropagation();
+        void navigator.clipboard?.writeText(ACCOUNT_TEXT.SIGNIN_COMMAND).catch(() => undefined);
+        const previous = signin.textContent;
+        signin.textContent = ACCOUNT_TEXT.COPIED;
+        setTimeout(() => {
+            signin.textContent = previous;
+        }, COPIED_MS);
+    };
+    menu.addEventListener('click', onMenuClick);
     const onDocPointer = (e) => {
         const target = e.target;
         if (!(target instanceof Node))
@@ -178,3 +192,9 @@ export function mountWorkspaceSelector(root) {
         document.removeEventListener('keydown', onKeyDown);
     };
 }
+export function paintToolbarAccount(root, account, dashboardUrl, details = {}) {
+    const slot = root.querySelector(`[${TOOLBAR_ACCOUNT_ATTR}]`);
+    if (!(slot instanceof HTMLElement))
+        return;
+    slot.innerHTML = accountControlHtml(account, { ...details, dashboardUrl }, true);
+}

package/dist/presenter/presenter.d.ts

@@ -1,104 +1,44 @@
 import { PresenterMode, SessionState, type PresenterTone } from '@reticlehq/core';
-import { type LogKind, type LogResult, type LogHandle } from './presenter-log.js';
+import { 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';
 import { Annotator } from '../review/annotator.js';
 export { GlowPhase } from './presenter-config.js';
 export type { PresenterOptions } from './presenter-config.js';
-export { LOG_KIND, LOG_RESULT } from './presenter-log.js';
-export type { LogHandle } from './presenter-log.js';
+export { LOG_KIND, LOG_RESULT } from './chrome/presenter-log.js';
+export type { LogHandle } from './chrome/presenter-log.js';
 export type { ControlIntent, ControlHandler } from './presenter-controls.js';
 export declare class Presenter {
     #private;
     constructor(options?: PresenterOptions);
-    /** Setter so reticle.ts can wire the control callback after construction. */
     setControlHandler(handler: ControlHandler): void;
-    /** Current live-control session state mirrored onto the panel (data-reticle-state). */
     get state(): SessionState;
-    /** Whether a run is currently being presented (false before the agent's first activity / after end). */
     get sessionActive(): boolean;
-    /** Drive the panel's live-control visual state (server-push / agent path; never emits). */
     setState(state: SessionState, text?: string, tone?: PresenterTone): void;
-    /** Apply a bridge→browser presenter push: PRESENTER (state echo) or FLOWS (replay list, the human's
-     * no-agent replay surface). Owns the wire parsing so the SDK dispatcher stays a thin router;
-     * setState-only so an echo can't re-emit. */
-    /** Re-scope the replay-flow chips to the current page (called by the SDK on route change). */
     refilterFlows(): void;
     handlePush(command: {
         name: string;
         args: Record<string, unknown>;
     }): void;
-    /** Current cap on accumulated log rows. */
     get logMax(): number;
     set logMax(n: number);
     mount(): void;
-    /** Wire annotation chrome; expanding the HUD enters annotate mode. */
     bindAnnotator(annotator: Annotator): void;
     destroy(): void;
-    /**
-     * Session start: in 'session' border mode this fades the base border IN and keeps it on until
-     * sessionEnd. Idempotent, and a no-op when unmounted or in 'busy' border mode.
-     */
     sessionStart(): void;
-    /**
-     * The bridge never answered: show that, rather than showing nothing.
-     *
-     * An instrumented page with a dead bridge used to be indistinguishable from a page with no
-     * Reticle in it — overlay mounted, dock off, nothing on screen. The user cannot tell "I forgot to
-     * start the daemon" from "the install did not work", and the commonest cause is the cheapest to
-     * say: the port. So the HUD appears, states the URL it tried, and marks itself unreachable so it
-     * is never mistaken for a live session.
-     *
-     * Not an error dialog and not modal: the page is the user's, and a dev overlay that shouts is one
-     * they turn off. It is the same capsule they would have had, saying the one thing it knows.
-     */
     showUnreachable(url: string, attempts: number): void;
-    /**
-     * Session end: hides the log/HUD and (in 'session' mode) clears the base border. Idempotent; a
-     * no-op without a prior sessionStart or when unmounted.
-     */
     sessionEnd(): void;
-    /**
-     * Record agent activity. Idempotent while busy - only the first activity from idle/fading flips
-     * the glow on, so a burst never restarts the reticle-pulse animation (no strobe). Subsequent calls
-     * just refresh the last-activity timestamp and re-arm the idle check.
-     */
     markActivity(): void;
-    /** Re-arm the quiet-window idle check (kept for reticle.ts's finally block). */
     scheduleIdle(): void;
-    /** Test/diagnostic accessor for the current glow phase. */
     glowPhase(): import("./presenter-config.js").GlowPhase;
-    /** Current intent (reading vs acting), exposed for tests + the watcher. */
     get mode(): PresenterMode;
-    /**
-     * Set the presenter intent. READING shows a cyan scan + chip and hides the cursor; ACTING
-     * keeps the warm cursor/ripple + chip; IDLE clears the chip. Drives color via data-reticle-mode.
-     */
     setMode(mode: PresenterMode): void;
     status(text: string): void;
-    /** Agent-tunable idle-end window (reticle_session). Floored so it can't be set uselessly small. */
     setIdleEndMs(ms: number): void;
-    /**
-     * The exported "run state" for the Copy/Export buttons - everything the page holds about this
-     * run: session id, url, duration, capability surface, per-kind counts, and the full activity log.
-     * (The full network/console ring-buffer lives server-side; this is the in-page run summary.)
-     */
     runState(): PresenterRunState | Record<string, unknown>;
-    /**
-     * Append an activity-log row. Accumulates (never overwrites): each call adds a timestamped row
-     * with a mode chip + text. Returns a handle to stamp the row's outcome glyph (✓/✗) later, or
-     * undefined when unmounted / when the text is empty after trimming.
-     */
     log(kind: LogKind, text: string, result?: LogResult): LogHandle | undefined;
-    /** Back-compat: narration appends to the live log (append-only, never overwrites). */
     narrate(text: string, level?: string): LogHandle | undefined;
-    /**
-     * Mirror the server's session.throttled state onto the HUD border. When throttled (tab
-     * backgrounded or stale), the border turns amber so the developer knows actions are no-oping -
-     * the same signal the agent already reads from result.session.throttled.
-     */
     setThrottled(throttled: boolean): void;
-    /** Fly the cursor to an element, play the action's effect, then pace for the human. */
     beforeAct(refId: string, action: string, label: string): Promise<void>;
 }