@reticlehq/browser 2.14.0 → 3.1.0

package/dist/observers/dialogs.js

@@ -1,6 +1,6 @@
 import { EventType } from '@reticlehq/core';
 import { observeSafely } from './types.js';
-import { isSyntheticInput } from '../actions/synthetic-input.js';
+import { isSyntheticInput } from '../actions/synthetic/synthetic-input.js';
 const DECLINED = { alert: undefined, confirm: false, prompt: null };
 const KINDS = ['alert', 'confirm', 'prompt'];
 export function installDialogs(emit) {

package/dist/observers/dom.js

@@ -1,6 +1,6 @@
 import { EventType, TruncationChannel } from '@reticlehq/core';
 import { getAccessibleName, getRole, isVisible } from '../dom/a11y.js';
-import { refs } from '../dom/refs.js';
+import { refs } from '../dom/addressing/refs.js';
 function regionKeyOf(target) {
     const el = isElement(target) ? target : null;
     if (null === el)
@@ -39,6 +39,26 @@ const MAX_PER_BATCH = 40;
 function isMeaningful(role, name) {
     return role !== 'generic' || name.length > 0;
 }
+const MOUNT_SCAN_LIMIT = 40;
+function describeMount(node) {
+    const role = getRole(node);
+    const name = getAccessibleName(node);
+    if (isMeaningful(role, name))
+        return { role, name, el: node };
+    let scanned = 0;
+    for (const child of node.querySelectorAll('*')) {
+        if (scanned >= MOUNT_SCAN_LIMIT)
+            return undefined;
+        scanned += 1;
+        if (isReticleOverlay(child))
+            continue;
+        const childRole = getRole(child);
+        const childName = getAccessibleName(child);
+        if (isMeaningful(childRole, childName))
+            return { role: childRole, name: childName, el: child };
+    }
+    return undefined;
+}
 const TEXT_NODE = 3;
 function textOf(nodes) {
     let out = '';
@@ -112,12 +132,12 @@ export function installDom(emit) {
                 }
                 if (isReticleOverlay(node))
                     continue;
-                const role = getRole(node);
-                const name = getAccessibleName(node);
-                if (!isMeaningful(role, name))
+                const mounted = describeMount(node);
+                if (mounted === undefined)
                     continue;
+                const { role, name } = mounted;
                 added += 1;
-                const ref = refs.refFor(node);
+                const ref = refs.refFor(mounted.el);
                 emit(EventType.DOM_ADDED, { role, name, region: regionKeyOf(record.target) }, ref);
                 if (DIALOG_ROLES.has(role) ||
                     LIVE_ROLES.has(role) ||
@@ -135,10 +155,10 @@ export function installDom(emit) {
                 }
                 if (isReticleOverlay(node))
                     continue;
-                const role = getRole(node);
-                const name = getAccessibleName(node);
-                if (!isMeaningful(role, name))
+                const gone = describeMount(node);
+                if (gone === undefined)
                     continue;
+                const { role, name } = gone;
                 removed += 1;
                 emit(EventType.DOM_REMOVED, { role, name, region: regionKeyOf(record.target) });
             }

package/dist/observers/download.js

@@ -1,6 +1,6 @@
 import { EventType } from '@reticlehq/core';
 import { captureMethod } from '../patching/capture-method.js';
-import { projectBody } from './network-body.js';
+import { projectBody } from './net-detail/network-body.js';
 import { observeSafely, observeValue } from './types.js';
 const TEXTUAL = /text\/|json|csv|xml|ndjson|javascript/i;
 const PREVIEW_CHARS = 2000;

package/dist/observers/health.js

@@ -1,5 +1,5 @@
 import { BrowserBrand, EventType, HealthReason, RETICLE_IPC_GLOBAL, SESSION_HEALTH, } from '@reticlehq/core';
-import { nativeSetInterval } from '../timers/native-timers.js';
+import { nativeSetInterval } from '../timers/native/native-timers.js';
 function detectRuntime() {
     const w = window;
     if (w['__TAURI_INTERNALS__'] !== undefined || w['__TAURI__'] !== undefined)

package/dist/observers/{network-body.js → net-detail/network-body.js}

@@ -1,6 +1,6 @@
 import { REDACTED_VALUE } from '@reticlehq/core';
-import { isSensitiveKey, safeStringify, scrubKnownSecrets } from '../security/serialization.js';
-import { nativeClearTimeout, nativeSetTimeout } from '../timers/native-timers.js';
+import { isSensitiveKey, safeStringify, scrubKnownSecrets } from '../../security/serialization.js';
+import { nativeClearTimeout, nativeSetTimeout } from '../../timers/native/native-timers.js';
 const CAPTURABLE_CONTENT = /application\/json|text\/|application\/xml|x-www-form-urlencoded|graphql/i;
 const STREAMING_CONTENT = /event-stream|x-ndjson|application\/stream/i;
 const ENDLESS_BY_DESIGN = /event-stream/i;

package/dist/observers/network-stream.js

@@ -1,6 +1,6 @@
 import { EventType, StreamDirection, StreamTransport } from '@reticlehq/core';
-import { isStreamingBody } from './network-body.js';
-import { nativeClearTimeout, nativeSetTimeout } from '../timers/native-timers.js';
+import { isStreamingBody } from './net-detail/network-body.js';
+import { nativeClearTimeout, nativeSetTimeout } from '../timers/native/native-timers.js';
 const STREAM_WATCH_MS = 10_000;
 export function watchStreamedBody(emit, res, id, url, contentType, contentLength) {
     if (!isStreamingBody(contentType, contentLength))

package/dist/observers/network.d.ts

@@ -1,5 +1,5 @@
 import { type Emit, type Teardown } from './types.js';
-import { redactUrl, netUrlFields } from './network-redact.js';
+import { redactUrl, netUrlFields } from './net-detail/network-redact.js';
 export { redactUrl, netUrlFields };
 type NetResponseReinterpreter = (url: string, header: (name: string) => string | null) => Record<string, unknown> | undefined;
 interface NetworkOptions {

package/dist/observers/network.js

@@ -1,8 +1,8 @@
 import { BlindSpotKind, EventType, RETICLE_WS_PATH, StreamTransport, StreamDirection, } from '@reticlehq/core';
 import { captureMethod } from '../patching/capture-method.js';
 import { observeSafely, observeValue } from './types.js';
-import { isCapturableType, projectBody, projectErrorBody, shouldCaptureErrorBody, withBodyDeadline, } from './network-body.js';
-import { redactUrl, netUrlFields } from './network-redact.js';
+import { isCapturableType, projectBody, projectErrorBody, shouldCaptureErrorBody, withBodyDeadline, } from './net-detail/network-body.js';
+import { redactUrl, netUrlFields } from './net-detail/network-redact.js';
 import { watchStreamedBody } from './network-stream.js';
 import { requireCapturedMethod } from '../util/captured-method.js';
 export { redactUrl, netUrlFields };

package/dist/observers/scroll.js

@@ -1,6 +1,6 @@
 import { EventType, ScrollDirection } from '@reticlehq/core';
-import { refs } from '../dom/refs.js';
-import { nativeSetTimeout, nativeClearTimeout } from '../timers/native-timers.js';
+import { refs } from '../dom/addressing/refs.js';
+import { nativeSetTimeout, nativeClearTimeout } from '../timers/native/native-timers.js';
 const THROTTLE_MS = 100;
 const REVEAL_SELECTOR = '[data-reticle-reveal], [data-reveal], section';
 export function installScroll(emit) {

package/dist/presenter/chrome/layers.d.ts

@@ -0,0 +1,2 @@
+export declare const Z_OVERLAY = 2147483600;
+export declare const Z_TOUR: number;

package/dist/presenter/chrome/layers.js

@@ -0,0 +1,2 @@
+export const Z_OVERLAY = 2147483600;
+export const Z_TOUR = Z_OVERLAY + 30;

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

@@ -0,0 +1,12 @@
+export declare const LOG_KIND: {
+    readonly READ: "read";
+    readonly ACT: "act";
+    readonly NARRATION: "narration";
+    readonly HUMAN: "human";
+};
+export type LogKind = (typeof LOG_KIND)[keyof typeof LOG_KIND];
+export declare const LOG_RESULT: {
+    readonly PASS: "pass";
+    readonly FAIL: "fail";
+};
+export type LogResult = (typeof LOG_RESULT)[keyof typeof LOG_RESULT];

package/dist/presenter/chrome/log-kinds.js

@@ -0,0 +1,7 @@
+export const LOG_KIND = {
+    READ: 'read',
+    ACT: 'act',
+    NARRATION: 'narration',
+    HUMAN: 'human',
+};
+export const LOG_RESULT = { PASS: 'pass', FAIL: 'fail' };

package/dist/presenter/{presenter-effects.js → chrome/presenter-effects.js}

@@ -1,4 +1,4 @@
-import { nativeSetTimeout } from '../timers/native-timers.js';
+import { nativeSetTimeout } from '../../timers/native/native-timers.js';
 export function moveCursor(cursor, x, y) {
     if (cursor === undefined)
         return;

package/dist/presenter/{presenter-log.d.ts → chrome/presenter-log.d.ts}

@@ -1,16 +1,7 @@
 import { PresenterMode } from '@reticlehq/core';
-export declare const LOG_KIND: {
-    readonly READ: "read";
-    readonly ACT: "act";
-    readonly NARRATION: "narration";
-    readonly HUMAN: "human";
-};
-export type LogKind = (typeof LOG_KIND)[keyof typeof LOG_KIND];
-export declare const LOG_RESULT: {
-    readonly PASS: "pass";
-    readonly FAIL: "fail";
-};
-export type LogResult = (typeof LOG_RESULT)[keyof typeof LOG_RESULT];
+import { LOG_KIND, LOG_RESULT, type LogKind, type LogResult } from './log-kinds.js';
+export { LOG_KIND, LOG_RESULT };
+export type { LogKind, LogResult };
 export declare const CHIP_LABEL: Record<PresenterMode, string>;
 export declare const DATA_RETICLE_LOG = "data-reticle-log";
 export declare const LOG_TIME_ATTR = "data-reticle-log-time";

package/dist/presenter/{presenter-log.js → chrome/presenter-log.js}

@@ -1,14 +1,9 @@
 import { PresenterMode } from '@reticlehq/core';
-import { nativeSetTimeout } from '../timers/native-timers.js';
-import { PresenterIcon, PRESENTER_ICON_SIZE, hiIcon, } from './presenter-icons.js';
+import { LOG_KIND, LOG_RESULT } from './log-kinds.js';
+import { nativeSetTimeout } from '../../timers/native/native-timers.js';
+import { PresenterIcon, PRESENTER_ICON_SIZE, hiIcon, } from '../icons/presenter-icons.js';
 const DEFAULT_LOG_MAX = 50;
-export const LOG_KIND = {
-    READ: 'read',
-    ACT: 'act',
-    NARRATION: 'narration',
-    HUMAN: 'human',
-};
-export const LOG_RESULT = { PASS: 'pass', FAIL: 'fail' };
+export { LOG_KIND, LOG_RESULT };
 const LOG_CHIP = { read: 'READ', act: 'ACT', narration: '', human: '' };
 const LOG_CHIP_ICON = {
     read: PresenterIcon.VIEW,

package/dist/presenter/chrome/presenter-safe-html.d.ts

@@ -0,0 +1,2 @@
+export declare function esc(value: string): string;
+export declare function isSafeDashboardUrl(raw: string): boolean;

package/dist/presenter/chrome/presenter-safe-html.js

@@ -0,0 +1,16 @@
+export function esc(value) {
+    return value
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+export function isSafeDashboardUrl(raw) {
+    try {
+        const scheme = new URL(raw).protocol;
+        return 'https:' === scheme || 'http:' === scheme;
+    }
+    catch {
+        return false;
+    }
+}

package/dist/presenter/{presenter-tally.js → chrome/presenter-tally.js}

@@ -1,5 +1,5 @@
 import { LOG_RESULT } from './presenter-log.js';
-import { PresenterIcon, PRESENTER_ICON_SIZE, hiIcon } from './presenter-icons.js';
+import { PresenterIcon, PRESENTER_ICON_SIZE, hiIcon } from '../icons/presenter-icons.js';
 export function renderTally(el, runLog, prev) {
     const next = countVerdicts(runLog);
     if (el === undefined)

package/dist/presenter/{presenter-heroicons-data.d.ts → icons/presenter-heroicons-data.d.ts}

@@ -18,6 +18,7 @@ declare const BODIES: {
     help: string;
     'caret-right': string;
     annotate: string;
+    sync: string;
 };
 export declare const HERO_ICON_BODIES: Record<keyof typeof BODIES, string>;
 export type HeroIconBodyKey = keyof typeof BODIES;

package/dist/presenter/{presenter-heroicons-data.js → icons/presenter-heroicons-data.js}

@@ -18,6 +18,7 @@ const BODIES = {
     help: '<path d="M8.228 9c.549-1.165 2.03-2 3.772-2c2.21 0 4 1.343 4 3c0 1.4-1.278 2.575-3.006 2.907c-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"/>',
     'caret-right': '<path d="m9 5l7 7l-7 7"/>',
     annotate: '<path d="m16.862 4.487l1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"/>',
+    sync: '<path d="M4.5 12c0-1.232.046-2.453.138-3.662a4.006 4.006 0 0 1 3.7-3.7a48.678 48.678 0 0 1 7.324 0a4.006 4.006 0 0 1 3.7 3.7c.017.22.032.441.046.662M4.5 12l-3-3m3 3l3-3m12 3c0 1.232-.046 2.453-.138 3.662a4.006 4.006 0 0 1-3.7 3.7a48.657 48.657 0 0 1-7.324 0a4.006 4.006 0 0 1-3.7-3.7c-.017-.22-.032-.441-.046-.662M19.5 12l-3 3m3-3l3 3"/>',
 };
 export const HERO_ICON_BODIES = BODIES;
 const SOLID_BODIES = {

package/dist/presenter/{presenter-icons.d.ts → icons/presenter-icons.d.ts}

@@ -19,6 +19,7 @@ export declare const PresenterIcon: {
     readonly HELP: "help";
     readonly CARET_RIGHT: "caret-right";
     readonly ANNOTATE: "annotate";
+    readonly SYNC: "sync";
 };
 export type PresenterIconName = (typeof PresenterIcon)[keyof typeof PresenterIcon];
 export declare const PRESENTER_ICON_SIZE: {

package/dist/presenter/{presenter-icons.js → icons/presenter-icons.js}

@@ -19,6 +19,7 @@ export const PresenterIcon = {
     HELP: 'help',
     CARET_RIGHT: 'caret-right',
     ANNOTATE: 'annotate',
+    SYNC: 'sync',
 };
 export const PRESENTER_ICON_SIZE = {
     CHIP: 11,

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

@@ -0,0 +1 @@
+export declare const ACCOUNT_CSS: string;

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

@@ -0,0 +1,99 @@
+import { HUD_DROP_SHADOW, HUD_SURFACE_PAINT } from './chrome/presenter-hud-chrome.js';
+const AVATAR = 20;
+const AVATAR_LG = 28;
+export const ACCOUNT_CSS = `
+/* The control establishes its own stacking context, and a high one.
+   Its menu is absolutely positioned inside a panel whose other children (the log well, the act strip)
+   are themselves positioned with their own z-index, so a z-index on the MENU alone was being compared
+   inside the wrong context and lost to a sibling with a lower number. Raising it here, on the thing
+   that contains the menu, is what actually puts the menu above them. 9 clears the workspace menu's 8,
+   which is the highest in-panel chrome. */
+/* The header row has to out-stack the log well, or nothing inside it can.
+   .reticle-chat-head is position:relative with z-index:2, so it IS a stacking context and the number
+   below is scoped inside it -- while the log well is a SIBLING, also at z-index:2, and later in DOM
+   order. Equal z, later sibling wins, so the well painted over the whole header and took the open
+   menu with it. The menu measured correctly and was invisible, which is the shape of bug that reads
+   as "the dropdown does not work". Raising the header is what lets its children escape; the two only
+   overlap while a menu is open, so nothing else moves. */
+.reticle-chat-head{z-index:3;}
+.reticle-account{position:relative;z-index:9;display:inline-flex;align-items:center;gap:6px;flex:none;}
+.reticle-account-avatar{
+  display:inline-flex;align-items:center;justify-content:center;
+  width:${String(AVATAR)}px;height:${String(AVATAR)}px;border-radius:999px;
+  font-size:9px;font-weight:600;letter-spacing:.02em;
+  background:rgba(255,255,255,.12);color:rgba(255,255,255,.92);user-select:none;}
+.reticle-account-avatar--lg{
+  width:${String(AVATAR_LG)}px;height:${String(AVATAR_LG)}px;font-size:11px;}
+
+/* The trigger is the avatar plus a hit area, never a second visual element: an avatar that looks
+   like a button reads as an action, and this one opens a menu about a state. */
+.reticle-account-trigger{
+  display:inline-flex;align-items:center;justify-content:center;
+  padding:0;border:none;background:transparent;cursor:pointer;line-height:0;border-radius:999px;
+  transition:box-shadow .12s,opacity .12s;}
+.reticle-account-trigger:hover{opacity:.85;}
+.reticle-account-trigger:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(255,255,255,.35);}
+.reticle-account-trigger[aria-expanded="true"]{box-shadow:0 0 0 2px rgba(255,255,255,.28);}
+
+.reticle-account-signin{
+  border:none;border-radius:6px;padding:2px 9px;cursor:pointer;font:inherit;font-size:10.5px;
+  background:rgba(255,255,255,.06);color:rgba(255,255,255,.75);transition:background .12s,color .12s;}
+.reticle-account-signin:hover{background:rgba(255,255,255,.12);color:#fff;}
+
+/* Anchored to the control and opening DOWNWARD.
+   Not upward, which is what it looked like it wanted: all three surfaces mount this near the TOP of
+   a panel whose own overflow is hidden for its rounded corners, so a menu opening upward is laid
+   out correctly and then clipped away entirely -- present to the probe, invisible to the eye. Panels
+   grow downward and have the height, so down is the direction that stays inside the box. */
+.reticle-account-menu{
+  position:absolute;right:0;top:calc(100% + 8px);z-index:6;
+  min-width:212px;max-width:280px;padding:10px;box-sizing:border-box;
+  display:flex;flex-direction:column;gap:8px;
+  border-radius:10px;
+  /* The HUD's own surface tokens, not a colour invented here. A menu with its own near-black is a
+     second design language in the same panel, and a translucent one lets the panel's empty-state text
+     read straight through the rows -- which is what the first version did. */
+  ${HUD_SURFACE_PAINT}
+  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),${HUD_DROP_SHADOW};
+  font-size:11px;color:rgba(255,255,255,.78);text-align:left;}
+.reticle-account-menu[hidden]{display:none;}
+
+.reticle-account-head{display:flex;align-items:center;gap:8px;min-width:0;}
+.reticle-account-who{display:flex;flex-direction:column;min-width:0;gap:1px;}
+.reticle-account-org{
+  font-size:11.5px;font-weight:600;color:rgba(255,255,255,.95);
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.reticle-account-email{
+  font-size:10.5px;color:rgba(255,255,255,.55);
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+
+.reticle-account-rows{
+  display:flex;flex-direction:column;gap:4px;
+  padding-top:8px;border-top:1px solid rgba(255,255,255,.08);}
+.reticle-account-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
+.reticle-account-k{color:rgba(255,255,255,.5);flex:none;}
+.reticle-account-v{
+  color:rgba(255,255,255,.88);min-width:0;
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+  font-variant-numeric:tabular-nums;}
+
+.reticle-account-actions{
+  display:flex;flex-direction:column;gap:2px;
+  padding-top:8px;border-top:1px solid rgba(255,255,255,.08);}
+.reticle-account-action{
+  display:flex;align-items:center;gap:6px;width:100%;box-sizing:border-box;
+  padding:5px 6px;border:none;border-radius:6px;cursor:pointer;
+  font:inherit;font-size:11px;text-align:left;text-decoration:none;
+  background:transparent;color:rgba(255,255,255,.8);transition:background .12s,color .12s;}
+.reticle-account-action:hover{background:rgba(255,255,255,.08);color:#fff;}
+.reticle-account-action:focus-visible{outline:none;background:rgba(255,255,255,.1);color:#fff;}
+/* The unlinked hint is a sentence, not a verb: it wraps rather than truncating, because a clipped
+   instruction is worse than a tall menu. */
+.reticle-account-action--hint{
+  color:rgba(255,255,255,.5);font-size:10.5px;line-height:1.35;white-space:normal;cursor:pointer;}
+
+.reticle-account-dashboard{
+  display:inline-flex;align-items:center;justify-content:center;
+  border:none;background:transparent;color:rgba(255,255,255,.6);cursor:pointer;line-height:0;padding:2px;}
+.reticle-account-dashboard:hover{color:#fff;}
+`;

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

@@ -0,0 +1,40 @@
+import type { AccountState } from '@reticlehq/core';
+export declare const ACCOUNT_ROOT_ATTR = "data-reticle-account";
+export declare const ACCOUNT_SIGNIN_ATTR = "data-reticle-account-signin";
+export declare const SYNC_BTN_ATTR = "data-reticle-sync-now";
+export declare const ACCOUNT_TRIGGER_ATTR = "data-reticle-account-trigger";
+export declare const ACCOUNT_MENU_ATTR = "data-reticle-account-menu";
+export declare const ACCOUNT_SIGNOUT_ATTR = "data-reticle-account-signout";
+export declare const ACCOUNT_TEXT: {
+    readonly SIGNED_OUT: "Sign in";
+    readonly SIGNIN_TITLE: "Run `reticle login` in your terminal — click to copy the command";
+    readonly SIGNIN_COMMAND: "reticle login";
+    readonly DASHBOARD_TITLE: "Open this project on the dashboard";
+    readonly SYNC_TITLE: "Push to the dashboard now, instead of waiting for the next sync";
+    readonly COPIED: "Copied";
+    readonly AVATAR_FALLBACK: "•";
+    readonly MENU_LABEL: "Reticle account";
+    readonly TRIGGER_TITLE: "Your Reticle account";
+    readonly SIGNED_IN_AS: "Signed in";
+    readonly DASHBOARD_ACTION: "Open dashboard";
+    readonly LINK_HINT: "Not linked — run `reticle link` to keep a record on the dashboard";
+    readonly LINK_COMMAND: "reticle link";
+    readonly SIGNOUT_ACTION: "Sign out";
+    readonly SIGNOUT_TITLE: "Run `reticle logout` in your terminal — click to copy the command";
+    readonly SIGNOUT_COMMAND: "reticle logout";
+    readonly PROJECT_LABEL: "Project";
+    readonly HOST_LABEL: "Host";
+    readonly VERDICTS_LABEL: "Verdicts";
+    readonly DEFECTS_LABEL: "Defects found";
+};
+export interface AccountDetails {
+    projectName?: string | undefined;
+    dashboardUrl?: string | undefined;
+    verdicts?: number | undefined;
+    defects?: number | undefined;
+}
+export declare function accountInitials(org: string | undefined): string;
+export declare function accountControlHtml(account: AccountState | undefined, details?: AccountDetails, offerSignIn?: boolean): string;
+export declare function accountCapsuleHtml(account: AccountState | undefined, dashboardUrl?: string, offerSignIn?: boolean): string;
+export declare function syncButtonHtml(dashboardUrl: string | undefined): string;
+export declare function mountAccountControl(root: HTMLElement): () => void;

package/dist/presenter/presenter-account.js

@@ -0,0 +1,178 @@
+import { hiIconHtml, PRESENTER_ICON_SIZE, PresenterIcon } from './icons/presenter-icons.js';
+import { esc, isSafeDashboardUrl } from './chrome/presenter-safe-html.js';
+export const ACCOUNT_ROOT_ATTR = 'data-reticle-account';
+export const ACCOUNT_SIGNIN_ATTR = 'data-reticle-account-signin';
+export const SYNC_BTN_ATTR = 'data-reticle-sync-now';
+export const ACCOUNT_TRIGGER_ATTR = 'data-reticle-account-trigger';
+export const ACCOUNT_MENU_ATTR = 'data-reticle-account-menu';
+export const ACCOUNT_SIGNOUT_ATTR = 'data-reticle-account-signout';
+export const ACCOUNT_TEXT = {
+    SIGNED_OUT: 'Sign in',
+    SIGNIN_TITLE: 'Run `reticle login` in your terminal — click to copy the command',
+    SIGNIN_COMMAND: 'reticle login',
+    DASHBOARD_TITLE: 'Open this project on the dashboard',
+    SYNC_TITLE: 'Push to the dashboard now, instead of waiting for the next sync',
+    COPIED: 'Copied',
+    AVATAR_FALLBACK: '•',
+    MENU_LABEL: 'Reticle account',
+    TRIGGER_TITLE: 'Your Reticle account',
+    SIGNED_IN_AS: 'Signed in',
+    DASHBOARD_ACTION: 'Open dashboard',
+    LINK_HINT: 'Not linked — run `reticle link` to keep a record on the dashboard',
+    LINK_COMMAND: 'reticle link',
+    SIGNOUT_ACTION: 'Sign out',
+    SIGNOUT_TITLE: 'Run `reticle logout` in your terminal — click to copy the command',
+    SIGNOUT_COMMAND: 'reticle logout',
+    PROJECT_LABEL: 'Project',
+    HOST_LABEL: 'Host',
+    VERDICTS_LABEL: 'Verdicts',
+    DEFECTS_LABEL: 'Defects found',
+};
+const ACCOUNT_COPIED_MS = 1200;
+export function accountInitials(org) {
+    const words = (org ?? '')
+        .trim()
+        .split(/[\s._-]+/)
+        .filter((word) => word.length > 0);
+    const letters = words
+        .slice(0, 2)
+        .map((word) => [...word][0] ?? '')
+        .join('');
+    return letters.length > 0 ? letters.toUpperCase() : ACCOUNT_TEXT.AVATAR_FALLBACK;
+}
+export function accountControlHtml(account, details = {}, offerSignIn = false) {
+    if (account === undefined)
+        return '';
+    if (!account.signedIn) {
+        if (!offerSignIn)
+            return '';
+        return `<div class="reticle-account" ${ACCOUNT_ROOT_ATTR}><button type="button" class="reticle-account-signin" ${ACCOUNT_SIGNIN_ATTR} title="${ACCOUNT_TEXT.SIGNIN_TITLE}" aria-label="${ACCOUNT_TEXT.SIGNIN_TITLE}">${ACCOUNT_TEXT.SIGNED_OUT}</button></div>`;
+    }
+    const org = account.org ?? '';
+    const label = org.length > 0 ? esc(org) : ACCOUNT_TEXT.SIGNED_IN_AS;
+    const avatar = `<span class="reticle-account-avatar" aria-hidden="true">${esc(accountInitials(account.org))}</span>`;
+    const trigger = `<button type="button" class="reticle-account-trigger" ${ACCOUNT_TRIGGER_ATTR}` +
+        ` aria-haspopup="true" aria-expanded="false" title="${ACCOUNT_TEXT.TRIGGER_TITLE}"` +
+        ` aria-label="${ACCOUNT_TEXT.TRIGGER_TITLE}: ${label}">${avatar}</button>`;
+    return `<div class="reticle-account" ${ACCOUNT_ROOT_ATTR}>${trigger}${accountMenuHtml(account, details)}</div>`;
+}
+function detailRow(key, value) {
+    if (value === undefined || 0 === value.length)
+        return '';
+    return `<div class="reticle-account-row"><span class="reticle-account-k">${esc(key)}</span><span class="reticle-account-v" title="${esc(value)}">${esc(value)}</span></div>`;
+}
+function accountMenuHtml(account, details) {
+    const org = account.org ?? '';
+    const identity = `<div class="reticle-account-head">` +
+        `<span class="reticle-account-avatar reticle-account-avatar--lg" aria-hidden="true">${esc(accountInitials(account.org))}</span>` +
+        `<span class="reticle-account-who">` +
+        `<span class="reticle-account-org">${org.length > 0 ? esc(org) : ACCOUNT_TEXT.SIGNED_IN_AS}</span>` +
+        (account.email !== undefined && account.email.length > 0
+            ? `<span class="reticle-account-email" title="${esc(account.email)}">${esc(account.email)}</span>`
+            : `<span class="reticle-account-email">${ACCOUNT_TEXT.SIGNED_IN_AS}</span>`) +
+        `</span></div>`;
+    const rows = detailRow(ACCOUNT_TEXT.HOST_LABEL, account.host) +
+        detailRow(ACCOUNT_TEXT.PROJECT_LABEL, details.projectName) +
+        detailRow(ACCOUNT_TEXT.VERDICTS_LABEL, details.verdicts !== undefined ? String(details.verdicts) : undefined) +
+        detailRow(ACCOUNT_TEXT.DEFECTS_LABEL, details.defects !== undefined ? String(details.defects) : undefined);
+    const linked = details.dashboardUrl !== undefined && isSafeDashboardUrl(details.dashboardUrl);
+    const dashboard = linked
+        ? `<a class="reticle-account-action" href="${esc(details.dashboardUrl ?? '')}" target="_blank" rel="noreferrer noopener" title="${ACCOUNT_TEXT.DASHBOARD_TITLE}">${hiIconHtml(PresenterIcon.VIEW, PRESENTER_ICON_SIZE.HELP)}<span>${ACCOUNT_TEXT.DASHBOARD_ACTION}</span></a>`
+        :
+            `<button type="button" class="reticle-account-action reticle-account-action--hint" ${ACCOUNT_SIGNIN_ATTR} data-reticle-copy="${ACCOUNT_TEXT.LINK_COMMAND}" title="${ACCOUNT_TEXT.LINK_HINT}"><span>${ACCOUNT_TEXT.LINK_HINT}</span></button>`;
+    const signOut = `<button type="button" class="reticle-account-action" ${ACCOUNT_SIGNOUT_ATTR} data-reticle-copy="${ACCOUNT_TEXT.SIGNOUT_COMMAND}" title="${ACCOUNT_TEXT.SIGNOUT_TITLE}"><span>${ACCOUNT_TEXT.SIGNOUT_ACTION}</span></button>`;
+    return (`<div class="reticle-account-menu" ${ACCOUNT_MENU_ATTR} role="menu" aria-label="${ACCOUNT_TEXT.MENU_LABEL}" aria-hidden="true" hidden>` +
+        identity +
+        (rows.length > 0 ? `<div class="reticle-account-rows">${rows}</div>` : '') +
+        `<div class="reticle-account-actions">${dashboard}${signOut}</div>` +
+        `</div>`);
+}
+export function accountCapsuleHtml(account, dashboardUrl, offerSignIn = false) {
+    return accountControlHtml(account, { dashboardUrl }, offerSignIn);
+}
+export function syncButtonHtml(dashboardUrl) {
+    if (dashboardUrl === undefined || !isSafeDashboardUrl(dashboardUrl))
+        return '';
+    return `<button type="button" class="reticle-sync-now" ${SYNC_BTN_ATTR} title="${ACCOUNT_TEXT.SYNC_TITLE}" aria-label="${ACCOUNT_TEXT.SYNC_TITLE}">${hiIconHtml(PresenterIcon.SYNC, PRESENTER_ICON_SIZE.HELP)}</button>`;
+}
+export function mountAccountControl(root) {
+    const controller = new AbortController();
+    const { signal } = controller;
+    const closeAll = (except) => {
+        for (const menu of root.querySelectorAll(`[${ACCOUNT_MENU_ATTR}]`)) {
+            if (menu === except)
+                continue;
+            menu.setAttribute('hidden', '');
+            menu.setAttribute('aria-hidden', 'true');
+        }
+        for (const trigger of root.querySelectorAll(`[${ACCOUNT_TRIGGER_ATTR}]`)) {
+            if (except !== undefined && trigger.parentElement === except.parentElement)
+                continue;
+            trigger.setAttribute('aria-expanded', 'false');
+        }
+    };
+    const flashCopied = (el) => {
+        const label = el.querySelector('span') ?? el;
+        const previous = label.textContent;
+        label.textContent = ACCOUNT_TEXT.COPIED;
+        setTimeout(() => {
+            label.textContent = previous;
+        }, ACCOUNT_COPIED_MS);
+    };
+    root.addEventListener('click', (event) => {
+        const target = event.target;
+        if (!(target instanceof Element))
+            return;
+        const trigger = target.closest(`[${ACCOUNT_TRIGGER_ATTR}]`);
+        if (trigger instanceof HTMLElement) {
+            event.preventDefault();
+            event.stopPropagation();
+            const menu = trigger.parentElement?.querySelector(`[${ACCOUNT_MENU_ATTR}]`);
+            if (!(menu instanceof HTMLElement))
+                return;
+            const wasOpen = !menu.hasAttribute('hidden');
+            closeAll();
+            if (wasOpen)
+                return;
+            menu.removeAttribute('hidden');
+            menu.setAttribute('aria-hidden', 'false');
+            trigger.setAttribute('aria-expanded', 'true');
+            return;
+        }
+        const copier = target.closest('[data-reticle-copy]');
+        if (copier instanceof HTMLElement) {
+            event.preventDefault();
+            event.stopPropagation();
+            const command = copier.getAttribute('data-reticle-copy') ?? '';
+            if (command.length > 0)
+                void navigator.clipboard?.writeText(command).catch(() => undefined);
+            flashCopied(copier);
+            return;
+        }
+        const signin = target.closest(`[${ACCOUNT_SIGNIN_ATTR}]`);
+        if (signin instanceof HTMLElement) {
+            event.preventDefault();
+            event.stopPropagation();
+            void navigator.clipboard?.writeText(ACCOUNT_TEXT.SIGNIN_COMMAND).catch(() => undefined);
+            flashCopied(signin);
+            return;
+        }
+        closeAll();
+    }, { signal });
+    document.addEventListener('pointerdown', (event) => {
+        const target = event.target;
+        if (target instanceof Node && root.contains(target))
+            return;
+        closeAll();
+    }, { signal });
+    document.addEventListener('keydown', (event) => {
+        if ('Escape' !== event.key)
+            return;
+        const open = root.querySelector(`[${ACCOUNT_MENU_ATTR}]:not([hidden])`);
+        if (null === open)
+            return;
+        event.stopPropagation();
+        closeAll();
+    }, { signal });
+    return () => controller.abort();
+}

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

@@ -1,4 +1,4 @@
-import type { ControlHandler } from './presenter-controls.js';
+import type { HumanControlKind } from '@reticlehq/core';
 export declare const BorderMode: {
     readonly SESSION: "session";
     readonly BUSY: "busy";
@@ -36,7 +36,9 @@ export declare const HEARTBEAT_MS = 1000;
 export declare const IDLE_NOTICE_MS = 4000;
 export declare const ACT_STRIP: {
     readonly READY: "Ready";
-    readonly IDLE_PREFIX: "idle · ";
+    readonly PLANNING_PREFIX: "planning next action · ";
+    readonly STOPPED: "stopped";
+    readonly STOPPED_PREFIX: "stopped · ";
     readonly NOW: "now";
     readonly SINCE_LAST: " since last action";
 };
@@ -92,3 +94,8 @@ export declare const HUD_DOCK_MARGIN_PX = 8;
 export declare const HUD_DRAG_IGNORE_SEL: string;
 export declare const THROTTLED_ATTR = "data-reticle-throttled";
 export declare const Z_HUD_TOOLTIP = 100;
+export interface ControlIntent {
+    kind: HumanControlKind;
+    text?: string;
+}
+export type ControlHandler = (intent: ControlIntent) => void;