@reticlehq/browser 2.13.1 → 3.1.0

package/dist/presenter/presenter-drag.js

@@ -1,75 +1,12 @@
-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';
-/** Whether the HUD is off the default bottom-right dock. */
-export function isHudDragged(hud) {
-    return '1' === hud.getAttribute(HUD_DRAGGED_ATTR);
-}
-/** Clamp a HUD position so the full panel stays inside the viewport. */
-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)),
-    };
-}
-/** Paint an explicit left/top position (switches the HUD off the default bottom-right dock). */
-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`);
-}
-/** Return the HUD to the default bottom-right dock. */
-export function resetHudDockPosition(hud) {
-    hud.removeAttribute(HUD_DRAGGED_ATTR);
-    hud.style.removeProperty(HUD_POS_X_VAR);
-    hud.style.removeProperty(HUD_POS_Y_VAR);
-}
-/** Return the HUD's laid-out box (rounded to whole pixels for stable clamping). */
-export function hudLayoutBox(hud) {
-    const rect = hud.getBoundingClientRect();
-    return {
-        left: rect.left,
-        top: rect.top,
-        width: rect.width,
-        height: rect.height,
-    };
-}
-/** Read the dragged HUD's authored position (CSS vars), falling back to layout box. */
-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 };
-}
-/**
- * Re-clamp a dragged HUD after resize, minimise/expand, or any layout-driven size change.
- * No-op when the panel is still on the default dock.
- */
-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);
-}
-/**
- * Keep a dragged HUD inside the viewport when the window or panel size changes
- * (minimise ↔ expand, tally appearing, viewport resize).
- */
 export function installHudPositionGuards(hud, overlay) {
     const scheduleRelayout = () => {
         scheduleSyncDockLayout(hud, overlay);
     };
-    // One signal for all three listeners here. The observers below are NOT covered — neither
-    // ResizeObserver nor MutationObserver accepts one — so they keep their explicit disconnects.
     const listeners = new AbortController();
     const { signal } = listeners;
     const onResize = () => scheduleRelayout();
@@ -93,10 +30,6 @@ export function installHudPositionGuards(hud, overlay) {
         minObserver.disconnect();
     };
 }
-/**
- * Drag the presenter HUD by its header. Returns a teardown that removes listeners.
- * Uses pointer capture so the drag stays smooth even when the cursor leaves the head.
- */
 export function installHudDrag(hud, head, callbacks = {}) {
     let dragging = false;
     let startX = 0;
@@ -173,8 +106,6 @@ export function installHudDrag(hud, head, callbacks = {}) {
         releaseCapture(e.pointerId);
         finishDrag();
     };
-    // All four pointer phases share one signal: they are added together and must come off
-    // together, and a partial removal would leave a half-live drag.
     const listeners = new AbortController();
     const { signal } = listeners;
     head.addEventListener('pointerdown', onPointerDown, { signal });
@@ -188,10 +119,6 @@ export function installHudDrag(hud, head, callbacks = {}) {
         finishDrag();
     };
 }
-/**
- * Drag the presenter HUD from multiple handles (FAB when collapsed, toolbar brand when expanded).
- * Returns a teardown that removes listeners from every handle.
- */
 export function installHudDragHandles(hud, handles, callbacks = {}) {
     const teardowns = handles.map((handle) => installHudDrag(hud, handle, callbacks));
     return () => {

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

@@ -1,42 +1,21 @@
 import { PresenterMode } from '@reticlehq/core';
 import { GlowPhase, BorderMode } from './presenter-config.js';
-/** What the controller needs from the Presenter: the clock, the timing knobs, and a setMode callback. */
 interface GlowDeps {
     now: () => number;
     idleAfterMs: number;
     glowFadeMs: number;
     borderMode: BorderMode;
-    /** Called when the glow fades to idle, so the Presenter clears the READING/ACTING chip. */
     setMode: (mode: PresenterMode) => void;
 }
-/**
- * The glow / activity state machine - drives the border shimmer + synthetic-cursor visibility from
- * agent-activity timing. Extracted from presenter.ts so the controller file stays under the size cap;
- * behavior is byte-for-byte the same. It holds references to the same `#glow`/`#cursor` nodes the
- * Presenter does (both call setAttribute on those elements - the Presenter owns the SESSION border via
- * data-on; this owns the BUSY shimmer via data-busy). A burst flips the glow IN once, holds it (the
- * slow reticle-pulse keeps breathing - no per-action restart/strobe), then fades it OUT once after a quiet
- * window.
- */
 export declare class GlowController {
     #private;
     constructor(deps: GlowDeps);
-    /** Wire the glow + cursor elements after the Presenter mounts the DOM. */
     setElements(glow: HTMLElement | undefined, cursor: HTMLElement | undefined): void;
-    /** Current glow phase (test/diagnostic accessor). */
     phase(): GlowPhase;
-    /** Last activity timestamp - read by the Presenter's liveness heartbeat. */
     lastActivityMs(): number;
-    /** Set the activity baseline WITHOUT entering busy (sessionStart / revive). */
     resetActivity(ms: number): void;
-    /**
-     * Record agent activity. Idempotent while busy - only the first activity from idle/fading flips the
-     * glow on (no strobe). `ms` lets log read the clock exactly once per row.
-     */
     markActivity(ms?: number): void;
-    /** Re-arm the quiet-window idle check (kept for reticle.ts's finally block). */
     scheduleIdle(): void;
-    /** Clear both timers (called from Presenter.destroy). */
     teardown(): void;
 }
 export {};

package/dist/presenter/presenter-glow.js

@@ -1,15 +1,6 @@
 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';
-/**
- * The glow / activity state machine - drives the border shimmer + synthetic-cursor visibility from
- * agent-activity timing. Extracted from presenter.ts so the controller file stays under the size cap;
- * behavior is byte-for-byte the same. It holds references to the same `#glow`/`#cursor` nodes the
- * Presenter does (both call setAttribute on those elements - the Presenter owns the SESSION border via
- * data-on; this owns the BUSY shimmer via data-busy). A burst flips the glow IN once, holds it (the
- * slow reticle-pulse keeps breathing - no per-action restart/strobe), then fades it OUT once after a quiet
- * window.
- */
 export class GlowController {
     #phase = GlowPhase.IDLE;
     #lastActivityMs = 0;
@@ -29,38 +20,28 @@ export class GlowController {
         this.#borderMode = deps.borderMode;
         this.#setMode = deps.setMode;
     }
-    /** Wire the glow + cursor elements after the Presenter mounts the DOM. */
     setElements(glow, cursor) {
         this.#glow = glow;
         this.#cursor = cursor;
     }
-    /** Current glow phase (test/diagnostic accessor). */
     phase() {
         return this.#phase;
     }
-    /** Last activity timestamp - read by the Presenter's liveness heartbeat. */
     lastActivityMs() {
         return this.#lastActivityMs;
     }
-    /** Set the activity baseline WITHOUT entering busy (sessionStart / revive). */
     resetActivity(ms) {
         this.#lastActivityMs = ms;
     }
-    /**
-     * Record agent activity. Idempotent while busy - only the first activity from idle/fading flips the
-     * glow on (no strobe). `ms` lets log read the clock exactly once per row.
-     */
     markActivity(ms = this.#now()) {
         this.#lastActivityMs = ms;
         if (this.#phase === GlowPhase.IDLE || this.#phase === GlowPhase.FADING)
             this.#enterBusy();
         this.#armIdleCheck();
     }
-    /** Re-arm the quiet-window idle check (kept for reticle.ts's finally block). */
     scheduleIdle() {
         this.#armIdleCheck();
     }
-    /** Clear both timers (called from Presenter.destroy). */
     teardown() {
         if (this.#idleCheckTimer !== undefined)
             nativeClearTimeout(this.#idleCheckTimer);
@@ -76,14 +57,11 @@ export class GlowController {
         }
         this.#phase = GlowPhase.BUSY;
         if (this.#borderMode === BorderMode.SESSION) {
-            // Session mode: modulate only the shimmer; the base border (data-on) stays session-owned.
             this.#glow?.setAttribute(DATA_BUSY, BUSY_ON);
         }
         else {
-            // back-compat: the busy machine owns the base border.
             this.#glow?.setAttribute(DATA_ON, GLOW_ON);
         }
-        // The HUD/log is session-owned (sessionStart/End), NOT toggled here - it stays put on idle.
         this.#cursor?.setAttribute(DATA_ON, GLOW_ON);
     }
     #armIdleCheck() {
@@ -97,7 +75,6 @@ export class GlowController {
             return;
         const quietFor = this.#now() - this.#lastActivityMs;
         if (quietFor < this.#idleAfterMs) {
-            // Activity landed during the wait; re-arm for only the remaining quiet time.
             this.#idleCheckTimer = nativeSetTimeout(() => this.#checkIdle(), this.#idleAfterMs - quietFor);
             return;
         }
@@ -106,16 +83,13 @@ export class GlowController {
     #beginFade() {
         this.#phase = GlowPhase.FADING;
         if (this.#borderMode === BorderMode.SESSION) {
-            // Session mode: relax the shimmer only; the base border stays on.
             this.#glow?.setAttribute(DATA_BUSY, BUSY_OFF);
         }
         else {
-            // back-compat: fade the base border out.
             this.#glow?.setAttribute(DATA_ON, GLOW_OFF);
         }
-        // Do NOT hide the HUD/log on idle - it persists for the whole session (sessionStart/End).
         this.#cursor?.setAttribute(DATA_ON, GLOW_OFF);
-        this.#setMode(PresenterMode.IDLE); // clear the READING/ACTING chip when going quiet
+        this.#setMode(PresenterMode.IDLE);
         this.#fadeTimer = nativeSetTimeout(() => {
             this.#fadeTimer = undefined;
             if (this.#phase === GlowPhase.FADING)

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.d.ts

@@ -1,7 +1 @@
-/**
- * The impact report's surface.
- *
- * Same glass as the chat panel and anchored in the same slot above the toolbar, because it is the
- * same object seen a different way: what this session is doing, and what every session has done.
- */
 export declare const REPORT_CSS: string;

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

@@ -1,12 +1,6 @@
-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';
-/**
- * The impact report's surface.
- *
- * Same glass as the chat panel and anchored in the same slot above the toolbar, because it is the
- * same object seen a different way: what this session is doing, and what every session has done.
- */
 export const REPORT_CSS = `
 [${REPORT_PANEL_ATTR}]{
   position:absolute;right:0;left:auto;bottom:calc(100% + 12px);z-index:31;
@@ -88,6 +82,12 @@ export const REPORT_CSS = `
 [${REPORT_PANEL_ATTR}] .reticle-report-defect-source{
   color:var(--reticle-faint);font-size:9.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
   overflow-wrap:anywhere;}
+.reticle-report-defect-link{flex:none;display:inline-flex;align-items:center;justify-content:center;
+  width:20px;height:20px;border-radius:6px;color:var(--reticle-faint);pointer-events:auto;
+  opacity:0;transition:opacity .12s ease,color .12s ease,background .12s ease;}
+.reticle-report-defect:hover .reticle-report-defect-link,
+.reticle-report-defect-link:focus-visible{opacity:1;}
+.reticle-report-defect-link:hover{color:var(--reticle-fg);background:rgba(255,255,255,.07);}
 [${REPORT_PANEL_ATTR}] .reticle-report-defects-more{
   display:inline-block;margin-top:8px;font-size:10px;color:var(--reticle-c-active);
   text-decoration:none;}
@@ -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,16 +1,14 @@
-import { type ImpactScope, type ImpactSnapshot } from '@reticlehq/core';
+import { type AccountState, type ImpactScope, type ImpactSnapshot } from '@reticlehq/core';
 export declare function reportPanelHtml(): string;
-export declare function reportBodyHtml(scope: ImpactScope, dashboardUrl?: string): string;
-export interface ReportHost {
-    /** Opened from the toolbar and from the chat, so the shell decides what else must close. */
+export declare function reportBodyHtml(scope: ImpactScope, dashboardUrl?: string, account?: AccountState, projectName?: string): string;
+interface ReportHost {
     onBeforeOpen?: () => void;
+    onSyncNow?: () => void;
 }
-/** The report panel controller: scope toggle, live repaint, share + referral actions. */
 export declare class PresenterReport {
     #private;
     constructor(host?: ReportHost);
     mount(root: HTMLElement): void;
-    /** The record arrived from the daemon. Repaint only if the panel is on screen. */
     setSnapshot(snapshot: ImpactSnapshot): void;
     snapshot(): ImpactSnapshot | undefined;
     isOpen(): boolean;
@@ -18,6 +16,6 @@ export declare class PresenterReport {
     close(): void;
     toggle(): void;
     contains(node: Node): boolean;
-    /** The post text for whichever scope is showing. */
     shareText(): string;
 }
+export {};

package/dist/presenter/presenter-report.js

@@ -1,14 +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 { IMPACT_DEFECT_LIMIT, } from '@reticlehq/core';
+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';
-/**
- * The impact report: what Reticle has actually done for this user.
- *
- * Reads the local record only - the panel is a view over `.reticle/impact.json`, pushed by the
- * daemon, never fetched from us. Two scopes (this project, this machine) behind one toggle.
- */
+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';
@@ -17,7 +13,7 @@ const REFER_ATTR = 'data-reticle-refer';
 const COPIED_FLASH_MS = 1600;
 export function reportPanelHtml() {
     const close = hiIconHtml(PresenterIcon.REMOVE, PRESENTER_ICON_SIZE.MIN);
-    return `<div ${REPORT_PANEL_ATTR} class="reticle-report ${HUD_SURFACE_CLASS}" role="dialog" aria-label="Reticle impact" aria-hidden="true">
+    return `<div ${REPORT_PANEL_ATTR} class="reticle-report ${HUD_SURFACE_CLASS}" role="region" aria-label="Reticle impact" aria-hidden="true">
     <div class="reticle-report-inner">
       <div class="reticle-report-head">
         <span class="reticle-report-title">${REPORT_TEXT.TITLE}</span>
@@ -40,19 +36,12 @@ export function reportPanelHtml() {
     </div>
   </div>`;
 }
-/** A stat card: the number, what it is, and - for an estimate - what it is measured against. */
 function card(value, label, basis) {
     const tag = basis === undefined
         ? ''
         : `<span class="reticle-report-basis" title="${basis}">${REPORT_TEXT.ESTIMATE_TAG}</span>`;
     return `<div class="reticle-report-card"><span class="reticle-report-value">${value}</span><span class="reticle-report-label">${label}${tag}</span></div>`;
 }
-/**
- * A 30-day bar chart of verdicts, as inline spans.
- *
- * Bars rather than a line: a day with no verdicts is a real fact about the week, and a line chart
- * interpolates straight through it.
- */
 function chart(scope) {
     const days = scope.days.slice(-30);
     if (0 === days.length)
@@ -68,61 +57,14 @@ 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>`;
 }
-/**
- * Escape text that came from the app under test.
- *
- * A defect title is an element's accessible name or a verdict's failure reason — both of which are
- * ultimately the CONTENT of somebody else's page, and this panel builds its DOM from an HTML string.
- * Everything else the report renders is a number or a date; this is the first app-derived text to
- * reach it, so the escaping arrives with it.
- */
-function esc(value) {
-    return value
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;');
-}
-/**
- * The short list of what is currently broken.
- *
- * The hero number already says HOW MANY defects Reticle caught; this says WHICH ONES, which is the
- * difference between a statistic and something a person can act on. Deliberately short: a panel in
- * the corner of somebody's app is not a triage queue, and the link at the bottom is where the queue
- * lives. When the project is not linked to a workspace there is no link and no nagging — the free
- * tool is complete on its own.
- */
-/**
- * Whether a dashboard link is safe to render as a clickable href.
- *
- * The url arrives from `.reticle/cloud.json` — a file in somebody's repository, which means it is
- * INPUT. Escaping the quotes stops it breaking out of the attribute but does nothing about the
- * SCHEME, so `javascript:...` produced a link that ran code inside the developer's own application,
- * from a panel Reticle injected there. Only the two schemes a dashboard can actually live on are
- * allowed; anything else renders no link at all, which is the same state as an unlinked project and
- * therefore already a supported one.
- */
-function isSafeDashboardUrl(raw) {
-    try {
-        const scheme = new URL(raw).protocol;
-        return 'https:' === scheme || 'http:' === scheme;
-    }
-    catch {
-        // Not a url at all. A relative path cannot address a dashboard on another origin, so there is
-        // nothing to render and nothing lost by refusing it.
-        return false;
-    }
-}
 function defects(scope, dashboardUrl) {
-    /*
-     * Defaulted here as well as in the schema. Zod's default applies when a record is PARSED, and the
-     * snapshot reaching this panel is pushed straight from the daemon rather than round-tripped
-     * through the schema — so a record written by an older build arrives with no `defects` field at
-     * all and used to throw, taking the whole report down with it.
-     */
     const list = (scope.defects ?? []).slice(0, IMPACT_DEFECT_LIMIT);
     if (0 === list.length)
         return '';
+    const linked = dashboardUrl !== undefined && isSafeDashboardUrl(dashboardUrl);
+    const rowLink = linked
+        ? `<a class="reticle-report-defect-link" href="${esc(dashboardUrl)}" target="_blank" rel="noreferrer noopener" title="${REPORT_TEXT.DEFECT_LINK_TITLE}" aria-label="${REPORT_TEXT.DEFECT_LINK_TITLE}">${hiIconHtml(PresenterIcon.VIEW, PRESENTER_ICON_SIZE.SEND)}</a>`
+        : '';
     const rows = list
         .map((d) => {
         const detail = d.detail === undefined
@@ -131,17 +73,15 @@ function defects(scope, dashboardUrl) {
         const source = d.source === undefined
             ? ''
             : `<span class="reticle-report-defect-source">${esc(d.source)}</span>`;
-        return `<li class="reticle-report-defect"><span class="reticle-report-defect-title">${esc(d.title)}</span>${detail}${source}</li>`;
+        return `<li class="reticle-report-defect"><span class="reticle-report-defect-title">${esc(d.title)}</span>${detail}${source}${rowLink}</li>`;
     })
         .join('');
-    // Only claim there are more when there actually are — `counts.failed` is every defect ever, and
-    // this list is the recent tail of it.
-    const more = dashboardUrl === undefined || !isSafeDashboardUrl(dashboardUrl)
+    const more = !linked
         ? ''
         : `<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) {
+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>`;
@@ -164,27 +104,23 @@ export function reportBodyHtml(scope, dashboardUrl) {
         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)}`;
+    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)}`;
 }
-/**
- * The one line an UNLINKED user is shown about the dashboard.
- *
- * Absent `dashboardUrl` IS the unlinked signal — it is only ever set from a repo's cloud.json — so
- * this needs no new plumbing and cannot be wrong about the state it describes.
- *
- * Gated on a VERDICT, not on tool calls. Somebody who has driven the app but proved nothing has not
- * yet received the thing this offers to preserve, and offering to keep nothing is an advert. Past
- * that bar it is a fact about where their record lives, at the foot of a panel they opened on
- * purpose — which is why it does not need to be dismissible.
- */
-function localOnly(scope, dashboardUrl) {
+function localOnly(scope, dashboardUrl, account) {
     if (dashboardUrl !== undefined)
         return '';
     if (scope.counts.verdicts <= 0)
         return '';
-    return `<p class="reticle-report-local-only">${REPORT_TEXT.LOCAL_ONLY} <code>${REPORT_TEXT.LOCAL_ONLY_ACTION}</code> ${REPORT_TEXT.LOCAL_ONLY_TAIL}</p>`;
+    if (account === undefined)
+        return '';
+    const [lead, action, tail] = account.signedIn
+        ? [REPORT_TEXT.UNLINKED, REPORT_TEXT.UNLINKED_ACTION, REPORT_TEXT.UNLINKED_TAIL]
+        : [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>`;
 }
-/** The report panel controller: scope toggle, live repaint, share + referral actions. */
+const SYNC_SPIN_MS = 1_200;
+const SYNCING_ATTR = 'data-syncing';
 export class PresenterReport {
     #panel;
     #body;
@@ -217,8 +153,6 @@ export class PresenterReport {
         });
         root.querySelector(`[${SHARE_IN_ATTR}]`)?.addEventListener('click', (e) => {
             e.stopPropagation();
-            // LinkedIn ignores every text parameter, so the caption goes to the clipboard first and the
-            // composer opens on the link - the only route that needs no posting permission.
             void this.#copy(this.shareText());
             this.#openShare(buildLinkedInShareUrl());
         });
@@ -230,8 +164,25 @@ 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);
+            }
+        });
     }
-    /** The record arrived from the daemon. Repaint only if the panel is on screen. */
     setSnapshot(snapshot) {
         this.#snapshot = snapshot;
         if (this.isOpen())
@@ -264,7 +215,6 @@ export class PresenterReport {
     contains(node) {
         return true === this.#panel?.contains(node);
     }
-    /** The post text for whichever scope is showing. */
     shareText() {
         const snap = this.#snapshot;
         if (snap === undefined)
@@ -286,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);
+                : reportBodyHtml(scope, this.#snapshot?.dashboardUrl, this.#snapshot?.account, this.#snapshot?.projectName);
     }
     #openShare(url) {
         window.open(url, '_blank', 'noopener,noreferrer');
@@ -296,7 +246,6 @@ export class PresenterReport {
             await navigator.clipboard?.writeText(text);
         }
         catch {
-            // A blocked clipboard is not worth an error dialog over; the text is on screen either way.
         }
         if (button instanceof HTMLElement) {
             const original = button.textContent ?? '';

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

@@ -1,7 +1,6 @@
 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';
-/** The in-page run-state export (Copy/Export buttons). The full event ring-buffer is server-side. */
 export interface PresenterRunState {
     session: string;
     url: string;
@@ -24,7 +23,6 @@ export interface PresenterRunState {
         result?: LogResult;
     }[];
 }
-/** Everything the controller hands the builder - the live fields a run state is computed from. */
 interface RunStateInput {
     sessionId: string;
     state: SessionState;
@@ -38,10 +36,5 @@ interface RunStateInput {
         result?: LogResult;
     }[];
 }
-/**
- * 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 declare function buildRunState(input: RunStateInput): PresenterRunState;
 export {};