@reticlehq/browser 2.11.0 → 2.13.0

package/dist/observers/network.js

@@ -1,12 +1,12 @@
 import { BlindSpotKind, EventType, RETICLE_WS_PATH, StreamTransport, StreamDirection, } from '@reticlehq/core';
 import { captureMethod } from '../patching/capture-method.js';
 import { isCapturableType, projectBody, withBodyDeadline } from './network-body.js';
-import { redactUrl } from './network-redact.js';
+import { redactUrl, netUrlFields } from './network-redact.js';
 import { watchStreamedBody } from './network-stream.js';
 import { requireCapturedMethod } from '../util/captured-method.js';
 // Redaction moved to its own cohesive module (network.ts is at its line cap); re-exported so callers
 // and the existing test suite keep importing it from here.
-export { redactUrl };
+export { redactUrl, netUrlFields };
 /** The byte size of a binary frame (ArrayBuffer / Blob / typed-array view), or undefined if unknown. */
 function binaryFrameBytes(data) {
     if (data instanceof ArrayBuffer)
@@ -244,10 +244,17 @@ export function installNetwork(emit, opts = {}) {
         const id = nextId();
         const start = performance.now();
         const method = methodOf(input, init);
-        const url = redactUrl(rawUrl);
+        const urlFields = netUrlFields(rawUrl);
+        const url = urlFields.url;
         const initiatorStack = initiatorFrame();
         const initiatorFields = initiatorStack === undefined ? {} : { initiatorStack };
-        emit(EventType.NET_PENDING, { id, method, url, initiator: 'fetch', ...initiatorFields });
+        emit(EventType.NET_PENDING, {
+            id,
+            method,
+            ...urlFields,
+            initiator: 'fetch',
+            ...initiatorFields,
+        });
         try {
             const res = await callFetch(input, init);
             // The app's fetch resolves HERE — at headers — like a native fetch. durationMs is measured to
@@ -261,7 +268,7 @@ export function installNetwork(emit, opts = {}) {
                 emit(EventType.NET_REQUEST, {
                     id,
                     method,
-                    url,
+                    ...urlFields,
                     status: res.status,
                     ok: statusIsOk(res.status),
                     durationMs: Math.round(headersAt - start),
@@ -376,7 +383,7 @@ export function installNetwork(emit, opts = {}) {
             emit(EventType.NET_PENDING, {
                 id: m.id,
                 method: m.method,
-                url: m.url,
+                ...netUrlFields(m.rawUrl),
                 initiator: 'xhr',
                 ...initiatorFields,
             });
@@ -405,7 +412,7 @@ export function installNetwork(emit, opts = {}) {
                     emit(EventType.NET_REQUEST, {
                         id: cur.id,
                         method: cur.method,
-                        url: cur.url,
+                        ...netUrlFields(cur.rawUrl),
                         status: this.status,
                         ok: statusIsOk(this.status),
                         durationMs: Math.round(performance.now() - cur.start),
@@ -432,17 +439,17 @@ export function installNetwork(emit, opts = {}) {
         window.EventSource = class extends origEventSource {
             constructor(u, init) {
                 super(u, init);
-                const url = redactUrl(String(u));
+                const urlFields = netUrlFields(String(u));
                 emit(EventType.NET_STREAM, {
                     transport: StreamTransport.SSE,
                     direction: StreamDirection.OPEN,
-                    url,
+                    ...urlFields,
                 });
                 this.addEventListener('message', (ev) => {
                     emit(EventType.NET_STREAM, {
                         transport: StreamTransport.SSE,
                         direction: StreamDirection.IN,
-                        url,
+                        ...urlFields,
                         ...frameFields(ev.data, captureBodies),
                     });
                 });
@@ -459,17 +466,17 @@ export function installNetwork(emit, opts = {}) {
                 this.#isBridge = isBridgeSocket(String(u));
                 if (this.#isBridge)
                     return;
-                const url = redactUrl(String(u));
+                const urlFields = netUrlFields(String(u));
                 emit(EventType.NET_STREAM, {
                     transport: StreamTransport.WS,
                     direction: StreamDirection.OPEN,
-                    url,
+                    ...urlFields,
                 });
                 this.addEventListener('message', (ev) => {
                     emit(EventType.NET_STREAM, {
                         transport: StreamTransport.WS,
                         direction: StreamDirection.IN,
-                        url,
+                        ...urlFields,
                         ...frameFields(ev.data, captureBodies),
                     });
                 });
@@ -486,7 +493,7 @@ export function installNetwork(emit, opts = {}) {
                 emit(EventType.NET_STREAM, {
                     transport: StreamTransport.WS,
                     direction: StreamDirection.OUT,
-                    url: redactUrl(this.url),
+                    ...netUrlFields(this.url),
                     ...frameFields(data, captureBodies),
                 });
                 super.send(data);
@@ -504,7 +511,7 @@ export function installNetwork(emit, opts = {}) {
     if (navProto !== null && origBeacon !== undefined) {
         patchedBeacon = function (url, data) {
             const id = nextId();
-            const redacted = redactUrl(String(url));
+            const urlFields = netUrlFields(String(url));
             const initiatorStack = initiatorFrame();
             const sent = origBeacon.call(this, url, data);
             // sendBeacon returns whether the payload was QUEUED, not an HTTP result — the response never
@@ -513,7 +520,7 @@ export function installNetwork(emit, opts = {}) {
             emit(EventType.NET_REQUEST, {
                 id,
                 method: 'POST',
-                url: redacted,
+                ...urlFields,
                 status: 0,
                 ok: sent,
                 queued: sent,
@@ -558,7 +565,7 @@ export function installNetwork(emit, opts = {}) {
                     emit(EventType.NET_REQUEST, {
                         id: nextId(),
                         method: 'GET',
-                        url: redactUrl(rawUrl),
+                        ...netUrlFields(rawUrl),
                         durationMs: Math.round(entry.duration),
                         initiator: type,
                         ...(entry.transferSize > 0 ? { transferSize: entry.transferSize } : {}),

package/dist/observers/scroll.js

@@ -5,6 +5,8 @@ const THROTTLE_MS = 100;
 const REVEAL_SELECTOR = '[data-reticle-reveal], [data-reveal], section';
 /** Observe scroll position + reveal-on-scroll for modern scroll-reactive UIs. */
 export function installScroll(emit) {
+    const ac = new AbortController();
+    const { signal } = ac;
     let lastEmit = 0;
     let lastY = 0;
     let trailingTimer;
@@ -39,7 +41,7 @@ export function installScroll(emit) {
             }, THROTTLE_MS - elapsed);
         }
     };
-    window.addEventListener('scroll', onScroll, { passive: true });
+    window.addEventListener('scroll', onScroll, { passive: true, signal });
     let io;
     if ('function' === typeof IntersectionObserver) {
         io = new IntersectionObserver((entries) => {
@@ -60,7 +62,7 @@ export function installScroll(emit) {
             observer.observe(el);
     }
     return () => {
-        window.removeEventListener('scroll', onScroll);
+        ac.abort();
         if (trailingTimer !== undefined)
             nativeClearTimeout(trailingTimer);
         io?.disconnect();

package/dist/observers/storage.js

@@ -65,7 +65,7 @@ export function readStorage(area) {
         return readArea(safeArea(() => window.localStorage));
     if (area === StorageArea.SESSION)
         return readArea(safeArea(() => window.sessionStorage));
-    if ('cookies' === area)
+    if (StorageArea.COOKIE === area)
         return readCookies();
     return {
         local: readArea(safeArea(() => window.localStorage)),

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

@@ -9,28 +9,14 @@
  */
 /**
  * Brand marks, inlined. The SDK is bundled into someone else's page: it cannot read
- * `assets/logo/*.svg` from disk at runtime and must never fetch from our own domain, so the two
- * artwork files live here as strings (same precedent as SEND_ICON in presenter-controls.ts).
- * Both are minified - editor metadata, clip paths, masks and sub-0.01 precision stripped - and paint
+ * `assets/logo/*.svg` from disk at runtime and must never fetch from our own domain, so the mark
+ * lives here as a string (same precedent as SEND_ICON in presenter-controls.ts).
+ * Minified - editor metadata, clip paths, masks and sub-0.01 precision stripped - and painted
  * with `currentColor` so the mark tracks --reticle-fg instead of hardcoding the export's #FAFAFA.
  */
-/** Accessible name of the HUD - the wordmark is artwork, this is what a screen reader reads. */
+/** Accessible name of the HUD. */
 export declare const BRAND_NAME = "Reticle";
 /** Mark alone (shown in the FAB and compact toolbar). */
 export declare const MARK_SVG: string;
-/** FAB-sized mark for the collapsed circular control. */
-export declare const FAB_MARK_SVG: string;
-/** Mark + "reticle" lettering (legacy wordmark artwork). */
-export declare const WORDMARK_SVG: string;
-/** Compact text label beside the mark in the expanded toolbar. */
-export declare const BRAND_MINI_CLASS = "reticle-brand-mini";
-/** Toolbar brand: mark + Reticle word (always shown together when expanded). */
-export declare const TOOLBAR_BRAND_HTML: string;
-/**
- * Header brand block. Both marks are always in the DOM and CSS picks one off the collapsed
- * attribute, so there is no JS state to keep in sync. The artwork is decorative (aria-hidden);
- * the visually-hidden name is what keeps the HUD identifiable to a screen reader in BOTH states.
- */
-export declare const BRAND_HTML: string;
 /** Collapsed FAB control - Reticle mark only. */
 export declare const FAB_TOGGLE_HTML: string;

package/dist/presenter/presenter-brand.js

@@ -9,30 +9,18 @@
  */
 /**
  * Brand marks, inlined. The SDK is bundled into someone else's page: it cannot read
- * `assets/logo/*.svg` from disk at runtime and must never fetch from our own domain, so the two
- * artwork files live here as strings (same precedent as SEND_ICON in presenter-controls.ts).
- * Both are minified - editor metadata, clip paths, masks and sub-0.01 precision stripped - and paint
+ * `assets/logo/*.svg` from disk at runtime and must never fetch from our own domain, so the mark
+ * lives here as a string (same precedent as SEND_ICON in presenter-controls.ts).
+ * Minified - editor metadata, clip paths, masks and sub-0.01 precision stripped - and painted
  * with `currentColor` so the mark tracks --reticle-fg instead of hardcoding the export's #FAFAFA.
  */
-/** Accessible name of the HUD - the wordmark is artwork, this is what a screen reader reads. */
+/** Accessible name of the HUD. */
 export const BRAND_NAME = 'Reticle';
-/** The two glyph paths of the mark, shared by both marks - the wordmark just offsets them by (1,1). */
+/** The two glyph paths of the mark. */
 const MARK_PATHS = `<path d="M92.82 92.16C93.07 93.4 91.77 94.4 90.63 93.83C89.62 93.33 88.62 92.82 87.63 92.3C71.14 83.78 54.79 72.27 39.61 57.96C39.09 57.49 38.57 56.98 38.06 56.49C22.45 41.52 9.78 25.14 .33 8.52C0.29 8.45 .25 8.38 .2 8.31C-0.44 7.2 .51 5.84 1.79 6.05L24.07 9.71C43.06 12.83 60.63 11.75 75.55 6.53L93.95 .09C95.15-0.33 96.31 .78 95.93 1.98L90.1 20.49C85.37 35.48 84.9 52.97 88.69 71.73L92.83 92.16H92.82Z"/><path d="M58.72 89.23L6.15 92.8C5.24 92.86 4.48 92.13 4.51 91.22L6.56 30.39C6.61 28.91 8.51 28.36 9.35 29.57C16.23 39.43 24.98 52.35 33.01 61.26C41.05 70.17 50.6 78.72 59.62 86.56C60.65 87.45 60.08 89.13 58.72 89.23Z"/>`;
 /** Mark alone (shown in the FAB and compact toolbar). */
 export const MARK_SVG = `<svg class="reticle-mark" viewBox="0 0 96 94" fill="currentColor" aria-hidden="true">${MARK_PATHS}</svg>`;
 /** FAB-sized mark for the collapsed circular control. */
-export const FAB_MARK_SVG = `<svg class="reticle-fab-mark" viewBox="0 0 96 94" fill="currentColor" aria-hidden="true">${MARK_PATHS}</svg>`;
-/** Mark + "reticle" lettering (legacy wordmark artwork). */
-export const WORDMARK_SVG = `<svg class="reticle-wordmark" viewBox="0 0 347 96" fill="currentColor" aria-hidden="true"><g transform="translate(1 1)">${MARK_PATHS}</g><path d="M116.43 78V27.09H136.51C140.35 27.09 143.64 27.78 146.35 29.15C149.09 30.51 151.17 32.44 152.59 34.95C154.04 37.43 154.76 40.36 154.76 43.72C154.76 47.1 154.03 50.01 152.57 52.45C151.11 54.87 149 56.72 146.23 58.01C143.48 59.31 140.15 59.95 136.24 59.95H122.79V51.3H134.5C136.55 51.3 138.26 51.02 139.62 50.46C140.98 49.89 141.99 49.05 142.65 47.92C143.33 46.8 143.67 45.39 143.67 43.72C143.67 42.03 143.33 40.61 142.65 39.45C141.99 38.29 140.97 37.41 139.59 36.81C138.23 36.2 136.52 35.89 134.45 35.89H127.19V78H116.43ZM143.92 54.83L156.57 78H144.69L132.31 54.83H143.92ZM178.95 78.75C175.02 78.75 171.64 77.95 168.81 76.36C165.99 74.75 163.82 72.48 162.29 69.55C160.77 66.6 160.01 63.11 160.01 59.08C160.01 55.16 160.77 51.71 162.29 48.74C163.82 45.78 165.97 43.46 168.73 41.81C171.52 40.15 174.78 39.32 178.53 39.32C181.05 39.32 183.39 39.73 185.56 40.54C187.75 41.33 189.65 42.54 191.28 44.14C192.92 45.75 194.2 47.77 195.11 50.21C196.02 52.63 196.47 55.46 196.47 58.71V61.62H164.23V55.06H186.51C186.51 53.53 186.17 52.18 185.51 51C184.85 49.83 183.93 48.91 182.75 48.25C181.59 47.57 180.24 47.23 178.7 47.23C177.09 47.23 175.67 47.6 174.43 48.34C173.2 49.07 172.24 50.06 171.54 51.3C170.85 52.53 170.49 53.9 170.47 55.4V61.64C170.47 63.53 170.82 65.17 171.52 66.54C172.23 67.92 173.23 68.98 174.52 69.72C175.82 70.47 177.35 70.84 179.12 70.84C180.3 70.84 181.38 70.68 182.35 70.34C183.33 70.01 184.17 69.52 184.87 68.85C185.56 68.19 186.09 67.38 186.46 66.42L196.25 67.06C195.75 69.42 194.73 71.47 193.19 73.23C191.67 74.97 189.7 76.33 187.28 77.3C184.87 78.27 182.1 78.75 178.95 78.75ZM223.69 39.82V47.77H200.7V39.82H223.69ZM205.92 30.67H216.51V66.27C216.51 67.24 216.66 68.01 216.96 68.55C217.26 69.08 217.67 69.46 218.2 69.67C218.75 69.89 219.38 70 220.09 70C220.59 70 221.08 69.95 221.58 69.87C222.08 69.77 222.46 69.7 222.72 69.65L224.39 77.53C223.86 77.69 223.11 77.88 222.15 78.1C221.19 78.33 220.02 78.47 218.65 78.52C216.1 78.62 213.86 78.28 211.94 77.5C210.03 76.72 208.55 75.51 207.49 73.87C206.43 72.23 205.9 70.16 205.92 67.66V30.67ZM230.59 78V39.82H241.18V78H230.59ZM235.91 34.9C234.34 34.9 232.99 34.37 231.86 33.33C230.75 32.27 230.19 31 230.19 29.53C230.19 28.07 230.75 26.82 231.86 25.77C232.99 24.71 234.34 24.18 235.91 24.18C237.49 24.18 238.83 24.71 239.94 25.77C241.07 26.82 241.63 28.07 241.63 29.53C241.63 31 241.07 32.27 239.94 33.33C238.83 34.37 237.49 34.9 235.91 34.9ZM266.92 78.75C263 78.75 259.64 77.92 256.82 76.26C254.02 74.59 251.87 72.27 250.36 69.3C248.87 66.33 248.12 62.92 248.12 59.06C248.12 55.15 248.88 51.72 250.38 48.77C251.91 45.8 254.07 43.49 256.87 41.83C259.67 40.16 263 39.32 266.87 39.32C270.2 39.32 273.11 39.93 275.62 41.14C278.12 42.35 280.1 44.04 281.56 46.23C283.01 48.42 283.82 50.99 283.97 53.94H273.97C273.69 52.03 272.95 50.5 271.74 49.34C270.54 48.16 268.98 47.57 267.04 47.57C265.4 47.57 263.96 48.02 262.74 48.92C261.53 49.79 260.58 51.08 259.9 52.77C259.23 54.46 258.89 56.51 258.89 58.91C258.89 61.35 259.22 63.42 259.88 65.12C260.56 66.83 261.51 68.13 262.74 69.03C263.96 69.92 265.4 70.37 267.04 70.37C268.25 70.37 269.33 70.12 270.3 69.62C271.27 69.13 272.08 68.4 272.71 67.46C273.35 66.5 273.78 65.35 273.97 64.01H283.97C283.8 66.92 283.01 69.49 281.58 71.71C280.17 73.92 278.23 75.64 275.74 76.88C273.25 78.12 270.31 78.75 266.92 78.75ZM301.34 27.09V78H290.75V27.09H301.34ZM327.22 78.75C323.29 78.75 319.91 77.95 317.08 76.36C314.26 74.75 312.09 72.48 310.57 69.55C309.04 66.6 308.28 63.11 308.28 59.08C308.28 55.16 309.04 51.71 310.57 48.74C312.09 45.78 314.24 43.46 317 41.81C319.79 40.15 323.05 39.32 326.8 39.32C329.32 39.32 331.66 39.73 333.83 40.54C336.02 41.33 337.93 42.54 339.55 44.14C341.19 45.75 342.47 47.77 343.38 50.21C344.29 52.63 344.75 55.46 344.75 58.71V61.62H312.5V55.06H334.78C334.78 53.53 334.45 52.18 333.78 51C333.12 49.83 332.2 48.91 331.02 48.25C329.86 47.57 328.51 47.23 326.97 47.23C325.36 47.23 323.94 47.6 322.7 48.34C321.47 49.07 320.51 50.06 319.81 51.3C319.12 52.53 318.76 53.9 318.74 55.4V61.64C318.74 63.53 319.09 65.17 319.79 66.54C320.5 67.92 321.5 68.98 322.8 69.72C324.09 70.47 325.62 70.84 327.39 70.84C328.57 70.84 329.65 70.68 330.63 70.34C331.6 70.01 332.44 69.52 333.14 68.85C333.83 68.19 334.36 67.38 334.73 66.42L344.52 67.06C344.02 69.42 343.01 71.47 341.46 73.23C339.94 74.97 337.97 76.33 335.55 77.3C333.15 78.27 330.37 78.75 327.22 78.75Z"/></svg>`;
-/** Compact text label beside the mark in the expanded toolbar. */
-export const BRAND_MINI_CLASS = 'reticle-brand-mini';
-/** Toolbar brand: mark + Reticle word (always shown together when expanded). */
-export const TOOLBAR_BRAND_HTML = `<span class="reticle-brand reticle-brand--toolbar">${MARK_SVG}<span class="${BRAND_MINI_CLASS}">${BRAND_NAME}</span><span class="reticle-brand-sr">${BRAND_NAME}</span></span>`;
-/**
- * Header brand block. Both marks are always in the DOM and CSS picks one off the collapsed
- * attribute, so there is no JS state to keep in sync. The artwork is decorative (aria-hidden);
- * the visually-hidden name is what keeps the HUD identifiable to a screen reader in BOTH states.
- */
-export const BRAND_HTML = `<span class="reticle-brand">${MARK_SVG}${WORDMARK_SVG}<span class="${BRAND_MINI_CLASS}">${BRAND_NAME}</span><span class="reticle-brand-sr">${BRAND_NAME}</span></span>`;
+const FAB_MARK_SVG = `<svg class="reticle-fab-mark" viewBox="0 0 96 94" fill="currentColor" aria-hidden="true">${MARK_PATHS}</svg>`;
 /** Collapsed FAB control - Reticle mark only. */
 export const FAB_TOGGLE_HTML = `<button type="button" class="reticle-fab" data-reticle-fab aria-label="Start ${BRAND_NAME}" aria-expanded="false">${FAB_MARK_SVG}<span class="reticle-fab-pulse" aria-hidden="true"></span><span data-reticle-mark-count class="reticle-fab-badge" hidden>0</span></button>`;

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

@@ -104,6 +104,15 @@ export declare const GLOW_FADE_MS = 250;
 export declare const GLOW_ON = "1";
 export declare const GLOW_OFF = "0";
 export declare const DATA_ON = "data-on";
+/** The overlay root's state attribute, which the shell styles resolve colour against. */
+export declare const STATE_ATTR = "data-reticle-state";
+/**
+ * Not a SessionState: there is no session. It is the absence of one, said out loud.
+ *
+ * Kept off `SessionState` deliberately — that enum crosses the wire, and this state exists only
+ * because nothing crossed the wire.
+ */
+export declare const UNREACHABLE_STATE = "unreachable";
 /** Overlay-root attribute toggled when the HUD is collapsed to the FAB. */
 export declare const MIN_ATTR = "data-reticle-min";
 /** Overlay-root attribute toggled when the agent chat panel is open. */
@@ -126,10 +135,6 @@ export declare const Placement: {
     readonly ABOVE: "above";
     readonly BELOW: "below";
 };
-export declare const DockAlign: {
-    readonly START: "start";
-    readonly END: "end";
-};
 /** Show/hide annotation markers. */
 export declare const MARKERS_BTN_ATTR = "data-reticle-markers-btn";
 /** Clear every annotation on the page. */
@@ -177,10 +182,8 @@ export declare const LOG_TIMESTAMPS_ATTR = "data-reticle-log-ts";
 /** When 1, the chat panel uses a narrower width. */
 /** When 1, HUD motion is reduced for accessibility. */
 export declare const REDUCE_MOTION_ATTR = "data-reticle-reduce-motion";
-/** Presenter settings card version label (browser package). */
-export declare const PRESENTER_UI_VERSION = "2.7.0";
 /** Docs opened from the settings footer. */
-export declare const MCP_DOCS_URL = "https://github.com/reticlehq/reticle/blob/main/docs/getting-started.md";
+export declare const MCP_DOCS_URL: string;
 /** HUD has been dragged off the default dock - positioned with explicit left/top. */
 export declare const HUD_DRAGGED_ATTR = "data-dragged";
 /** CSS custom properties written when the HUD is dragged. */
@@ -191,5 +194,5 @@ export declare const HUD_DRAG_THRESHOLD_PX = 4;
 /** Minimum gap between a dragged HUD and the viewport edge. */
 export declare const HUD_DOCK_MARGIN_PX = 8;
 /** Interactive nodes inside the drag handle that must not start a drag (not the FAB itself). */
-export declare const HUD_DRAG_IGNORE_SEL = "[data-reticle-pause], [data-reticle-annotate-btn], [data-reticle-markers-btn], [data-reticle-clear-marks], [data-reticle-end], [data-reticle-min-btn], [data-reticle-settings-btn], [data-reticle-settings-panel], [data-reticle-report-btn], [data-reticle-report-panel], [data-reticle-chat-panel], [data-reticle-chat-toggle], [data-reticle-workspace-btn], [data-reticle-workspace-menu], [data-reticle-copy], [data-reticle-export], [data-reticle-send], input, textarea, select, a, .reticle-head-ctl, [data-reticle-tally], .reticle-maxhint";
+export declare const HUD_DRAG_IGNORE_SEL: string;
 export declare const THROTTLED_ATTR = "data-reticle-throttled";

package/dist/presenter/presenter-config.js

@@ -72,6 +72,15 @@ export const GLOW_FADE_MS = 250;
 export const GLOW_ON = '1';
 export const GLOW_OFF = '0';
 export const DATA_ON = 'data-on';
+/** The overlay root's state attribute, which the shell styles resolve colour against. */
+export const STATE_ATTR = 'data-reticle-state';
+/**
+ * Not a SessionState: there is no session. It is the absence of one, said out loud.
+ *
+ * Kept off `SessionState` deliberately — that enum crosses the wire, and this state exists only
+ * because nothing crossed the wire.
+ */
+export const UNREACHABLE_STATE = 'unreachable';
 /** Overlay-root attribute toggled when the HUD is collapsed to the FAB. */
 export const MIN_ATTR = 'data-reticle-min';
 /** Overlay-root attribute toggled when the agent chat panel is open. */
@@ -91,7 +100,6 @@ export const SETTINGS_PLACEMENT_ATTR = 'data-reticle-settings-placement';
 /** Horizontal alignment of dock-anchored panels (start = left, end = right). */
 export const DOCK_ALIGN_ATTR = 'data-reticle-dock-align';
 export const Placement = { ABOVE: 'above', BELOW: 'below' };
-export const DockAlign = { START: 'start', END: 'end' };
 /** Show/hide annotation markers. */
 export const MARKERS_BTN_ATTR = 'data-reticle-markers-btn';
 /** Clear every annotation on the page. */
@@ -139,8 +147,6 @@ export const LOG_TIMESTAMPS_ATTR = 'data-reticle-log-ts';
 /** When 1, the chat panel uses a narrower width. */
 /** When 1, HUD motion is reduced for accessibility. */
 export const REDUCE_MOTION_ATTR = 'data-reticle-reduce-motion';
-/** Presenter settings card version label (browser package). */
-export const PRESENTER_UI_VERSION = '2.7.0';
 /** Docs opened from the settings footer. */
 export const MCP_DOCS_URL = 'https://github.com/reticlehq/reticle/blob/main/docs/getting-started.md';
 /** HUD has been dragged off the default dock - positioned with explicit left/top. */

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

@@ -1,5 +1,4 @@
 import { HumanControlKind, PresenterTone, SessionState } from '@reticlehq/core';
-export declare const PAUSED_BADGE_LABEL = "PAUSED";
 /** Border fade-out delay after a session ends (native timer; presenter-only tunable). */
 export declare const ENDED_FADE_MS = 4000;
 /** Payload the panel hands to its host when the human drives a control. */
@@ -12,8 +11,6 @@ export type ControlHandler = (intent: ControlIntent) => void;
 export declare const CONTROLS_CSS: string;
 /** Icon toolbar: pause, chat, markers, end, clear - copy/export appear after a run ends. */
 export declare const CONTROLS_TOOLBAR_HTML: string;
-/** @deprecated Legacy head markup - replaced by CONTROLS_TOOLBAR_HTML in the morphing shell. */
-export declare const CONTROLS_HEAD_HTML: string;
 /** Banner markup (between head and log, hidden unless ended). */
 export declare const CONTROLS_BANNER_HTML = "<div data-reticle-banner class=\"reticle-banner\">Session ended</div>";
 /** Replay-a-flow row (between log and footer); buttons are filled in by setFlows once flows arrive. */

package/dist/presenter/presenter-controls.js

@@ -26,7 +26,6 @@ const INPUT_PLACEHOLDER = 'Tell the agent something…';
 /** Accessible name for the composer (a placeholder is not an accessible name). */
 const INPUT_ARIA_LABEL = 'Message to the agent';
 const PAUSED_BADGE_TEXT = 'PAUSED';
-export const PAUSED_BADGE_LABEL = PAUSED_BADGE_TEXT;
 const ENDED_BANNER_TEXT = 'Session ended';
 const COPY_LABEL = 'Copy run';
 const EXPORT_LABEL = 'Export';
@@ -177,8 +176,6 @@ export const CONTROLS_TOOLBAR_HTML = [
     `<button type="button" data-reticle-export class="reticle-tb-btn reticle-tb-btn--export" title="${EXPORT_LABEL}" aria-label="${EXPORT_LABEL}" hidden>${hiIconHtml(PresenterIcon.DOWNLOAD, TB)}</button>`,
     '<span data-reticle-export-msg class="reticle-export-msg" aria-live="polite"></span>',
 ].join('');
-/** @deprecated Legacy head markup - replaced by CONTROLS_TOOLBAR_HTML in the morphing shell. */
-export const CONTROLS_HEAD_HTML = CONTROLS_TOOLBAR_HTML;
 /** Banner markup (between head and log, hidden unless ended). */
 export const CONTROLS_BANNER_HTML = `<div data-reticle-banner class="reticle-banner">${ENDED_BANNER_TEXT}</div>`;
 /** Replay-a-flow row (between log and footer); buttons are filled in by setFlows once flows arrive. */

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

@@ -14,4 +14,4 @@ export declare const HUD_LOG_WELL_CLASS = "reticle-hud-log-well";
  * the panel read as a container rather than as one card. It also grew and shrank with its content,
  * so the panel resized on every row; the height is fixed now and the feed scrolls inside it.
  */
-export declare const HUD_LOG_WELL_CSS = "\n.reticle-hud-log-well{\n  /* A settled height, but still allowed to shrink: pinned with flex:none it pushed the composer\n     off the bottom of the panel the moment the rest of the content grew. */\n  /* A flex column, so the feed inside actually FILLS the height: as a plain block the log was only\n     as tall as its rows, which left the empty-state line floating near the top of an otherwise\n     empty panel instead of centred in it. */\n  position:relative;display:flex;flex-direction:column;\n  flex:1 1 auto;height:210px;min-height:96px;max-height:210px;overflow:hidden;\n  contain:layout style paint;\n  margin:0 6px;border-radius:12px;background:transparent;}\n.reticle-hud-log-well > *{position:relative;z-index:1;}";
+export declare const HUD_LOG_WELL_CSS: string;

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

@@ -32,7 +32,19 @@ export declare const REPORT_TEXT: {
     readonly TITLE: "Impact";
     readonly PROJECT: "This project";
     readonly GLOBAL: "Everything on this machine";
-    readonly HERO_DEFECTS: "defects caught before you saw them";
+    /**
+     * What `counts.failed` actually is: a verdict whose declared consequence did not hold.
+     *
+     * It used to read "defects caught before you saw them", which overclaims in the one direction a
+     * verification tool must never overclaim. A failed verdict is not proof of a defect in the app —
+     * it is equally the shape of an assertion that was wrong. Measured in the field: an agent
+     * asserted a clean console on an app with ordinary dev-mode logging, the verdict went red, and
+     * the panel reported a defect nobody had found.
+     *
+     * The honest word is what Reticle DID: it refused to pass them. That is true of the assertion
+     * error and the real bug alike, and it still reads as the tool having done its job.
+     */
+    readonly HERO_DEFECTS: "checks Reticle refused to pass";
     readonly VERDICTS: "Verdicts";
     readonly PASSED: "passed";
     readonly FAILED: "failed";
@@ -48,6 +60,23 @@ export declare const REPORT_TEXT: {
     readonly SAVED_MINUTES: "Time saved";
     readonly ESTIMATE_TAG: "estimate";
     readonly CHART: "Verdicts, last 30 days";
+    readonly DEFECTS: "What broke";
+    readonly DEFECTS_MORE: "Manage all of them on the dashboard";
+    /**
+     * What an UNLINKED user is told, and the only place the product tells them.
+     *
+     * The dashboard link renders only when `dashboardUrl` exists, which means only once a repo is
+     * already linked — so the person most likely to want one, watching this record climb on their own
+     * machine, was never told it existed. The single mention anywhere else is a daemon log line.
+     *
+     * Stated as a FACT about where the record lives, not as a pitch. It sits at the foot of a panel
+     * somebody opened on purpose, so it informs rather than interrupts, and it appears only once
+     * there is a verdict worth keeping — an offer to preserve nothing is just an advert.
+     */
+    readonly LOCAL_ONLY: "This record stops at this machine.";
+    readonly LOCAL_ONLY_ACTION: "reticle login";
+    readonly LOCAL_ONLY_TAIL: "keeps it, and lets a team see it.";
+    readonly DEFECTS_NONE: "Nothing has failed a declared consequence yet.";
     readonly EMPTY: "Nothing recorded yet. Drive the app once and this fills in.";
     readonly SHARE: "Share";
     readonly COPY: "Copy";

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

@@ -32,7 +32,19 @@ export const REPORT_TEXT = {
     TITLE: 'Impact',
     PROJECT: 'This project',
     GLOBAL: 'Everything on this machine',
-    HERO_DEFECTS: 'defects caught before you saw them',
+    /**
+     * What `counts.failed` actually is: a verdict whose declared consequence did not hold.
+     *
+     * It used to read "defects caught before you saw them", which overclaims in the one direction a
+     * verification tool must never overclaim. A failed verdict is not proof of a defect in the app —
+     * it is equally the shape of an assertion that was wrong. Measured in the field: an agent
+     * asserted a clean console on an app with ordinary dev-mode logging, the verdict went red, and
+     * the panel reported a defect nobody had found.
+     *
+     * The honest word is what Reticle DID: it refused to pass them. That is true of the assertion
+     * error and the real bug alike, and it still reads as the tool having done its job.
+     */
+    HERO_DEFECTS: 'checks Reticle refused to pass',
     VERDICTS: 'Verdicts',
     PASSED: 'passed',
     FAILED: 'failed',
@@ -48,6 +60,23 @@ export const REPORT_TEXT = {
     SAVED_MINUTES: 'Time saved',
     ESTIMATE_TAG: 'estimate',
     CHART: 'Verdicts, last 30 days',
+    DEFECTS: 'What broke',
+    DEFECTS_MORE: 'Manage all of them on the dashboard',
+    /**
+     * What an UNLINKED user is told, and the only place the product tells them.
+     *
+     * The dashboard link renders only when `dashboardUrl` exists, which means only once a repo is
+     * already linked — so the person most likely to want one, watching this record climb on their own
+     * machine, was never told it existed. The single mention anywhere else is a daemon log line.
+     *
+     * Stated as a FACT about where the record lives, not as a pitch. It sits at the foot of a panel
+     * somebody opened on purpose, so it informs rather than interrupts, and it appears only once
+     * there is a verdict worth keeping — an offer to preserve nothing is just an advert.
+     */
+    LOCAL_ONLY: 'This record stops at this machine.',
+    LOCAL_ONLY_ACTION: 'reticle login',
+    LOCAL_ONLY_TAIL: 'keeps it, and lets a team see it.',
+    DEFECTS_NONE: 'Nothing has failed a declared consequence yet.',
     EMPTY: 'Nothing recorded yet. Drive the app once and this fills in.',
     SHARE: 'Share',
     COPY: 'Copy',
@@ -88,7 +117,7 @@ export function buildShareText(scope, projectName) {
     const where = projectName !== undefined && projectName.length > 0 ? ` on ${projectName}` : '';
     const lines = [
         `My agent verified its own work ${String(c.verdicts)} times${where}.`,
-        `${String(c.failed)} defects caught before I looked at any of them.`,
+        `${String(c.failed)} checks it refused to pass before I looked at any of them.`,
     ];
     if (c.unknown > 0) {
         lines.push(`${String(c.unknown)} came back "unknown" - it drove the app and could not tell. That is the number I watch.`);

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

@@ -73,6 +73,30 @@ export const REPORT_CSS = `
 [${REPORT_PANEL_ATTR}] .reticle-report-basis{
   display:block;margin-top:2px;color:var(--reticle-c-active);opacity:.8;
   font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;cursor:help;}
+[${REPORT_PANEL_ATTR}] .reticle-report-defects-wrap{margin-top:14px;}
+[${REPORT_PANEL_ATTR}] .reticle-report-defects{
+  display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;}
+/* A left rule rather than a card per row: ten cards in a 320px panel is a wall, and the rule keeps
+   the list scannable as a list — which is what a person is doing when they open this. */
+[${REPORT_PANEL_ATTR}] .reticle-report-defect{
+  display:flex;flex-direction:column;gap:1px;padding:4px 0 4px 8px;
+  border-left:2px solid color-mix(in srgb,#f87171 70%,transparent);}
+[${REPORT_PANEL_ATTR}] .reticle-report-defect-title{
+  font-size:11px;line-height:1.35;overflow-wrap:anywhere;}
+[${REPORT_PANEL_ATTR}] .reticle-report-defect-detail{
+  color:var(--reticle-faint);font-size:10px;line-height:1.35;overflow-wrap:anywhere;}
+[${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;}
+[${REPORT_PANEL_ATTR}] .reticle-report-defects-more{
+  display:inline-block;margin-top:8px;font-size:10px;color:var(--reticle-c-active);
+  text-decoration:none;}
+[${REPORT_PANEL_ATTR}] .reticle-report-defects-more:hover{text-decoration:underline;}
+[${REPORT_PANEL_ATTR}] .reticle-report-local-only{
+  margin:14px 0 0;padding-top:10px;border-top:1px solid var(--reticle-line);
+  color:var(--reticle-faint);font-size:10px;line-height:1.45;}
+[${REPORT_PANEL_ATTR}] .reticle-report-local-only code{
+  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--reticle-c-active);}
 [${REPORT_PANEL_ATTR}] .reticle-report-chart-wrap{margin-top:12px;}
 [${REPORT_PANEL_ATTR}] .reticle-report-section{
   display:block;margin-bottom:6px;color:var(--reticle-faint);font-size:9.5px;

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

@@ -1,6 +1,6 @@
-import type { ImpactScope, ImpactSnapshot } from '@reticlehq/core';
+import { type ImpactScope, type ImpactSnapshot } from '@reticlehq/core';
 export declare function reportPanelHtml(): string;
-export declare function reportBodyHtml(scope: ImpactScope): 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. */
     onBeforeOpen?: () => void;

package/dist/presenter/presenter-report.js

@@ -1,3 +1,4 @@
+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 { REPORT_PANEL_ATTR, REPORT_ATTR, REPORT_CLOSE_ATTR } from './presenter-config.js';
@@ -67,7 +68,80 @@ 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>`;
 }
-export function reportBodyHtml(scope) {
+/**
+ * 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 rows = list
+        .map((d) => {
+        const detail = d.detail === undefined
+            ? ''
+            : `<span class="reticle-report-defect-detail">${esc(d.detail)}</span>`;
+        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>`;
+    })
+        .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)
+        ? ''
+        : `<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) {
     const c = scope.counts;
     if (0 === c.calls)
         return `<p class="reticle-report-empty">${REPORT_TEXT.EMPTY}</p>`;
@@ -90,7 +164,25 @@ export function reportBodyHtml(scope) {
         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>${chart(scope)}`;
+    return `${streak}${hero}${verdicts}<div class="reticle-report-grid">${cards}</div>${defects(scope, dashboardUrl)}${chart(scope)}${localOnly(scope, dashboardUrl)}`;
+}
+/**
+ * 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) {
+    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>`;
 }
 /** The report panel controller: scope toggle, live repaint, share + referral actions. */
 export class PresenterReport {
@@ -194,7 +286,7 @@ export class PresenterReport {
         this.#body.innerHTML =
             scope === undefined
                 ? `<p class="reticle-report-empty">${REPORT_TEXT.EMPTY}</p>`
-                : reportBodyHtml(scope);
+                : reportBodyHtml(scope, this.#snapshot?.dashboardUrl);
     }
     #openShare(url) {
         window.open(url, '_blank', 'noopener,noreferrer');