@reticlehq/browser 2.4.0 → 2.5.0

package/dist/presenter/presenter-styles.js

@@ -7,8 +7,8 @@ import { CONTROLS_CSS } from './presenter-controls.js';
  */
 // No web-font @import: a dev-only SDK must not make the host page issue a cross-origin request to
 // fonts.googleapis.com (and trip a `style-src 'self'` CSP with a console violation) just for HUD
-// polish. The font vars below already prefer Inter/IBM Plex Serif if present and fall back to the
-// system stack otherwise — so the overlay stays self-contained and never touches the network.
+// polish. The font var below already prefers Inter if present and falls back to the system stack
+// otherwise — so the overlay stays self-contained and never touches the network.
 export const PRESENTER_CSS = `
 [data-reticle-glow]{position:fixed;inset:0;pointer-events:none;z-index:2147483600;opacity:0;
   transition:opacity .25s ease;box-shadow:inset 0 0 0 3px rgba(99,102,241,.9),inset 0 0 28px 6px rgba(99,102,241,.45);}
@@ -36,7 +36,6 @@ export const PRESENTER_CSS = `
   --reticle-line:rgba(255,255,255,.09);--reticle-line2:rgba(255,255,255,.05);
   --reticle-read:#54d2e6;--reticle-ok:#3dd7a6;--reticle-bad:#ff7a7a;
   --reticle-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
-  --reticle-serif:"IBM Plex Serif",Georgia,"Times New Roman",serif;
   position:fixed;left:50%;right:auto;bottom:20px;box-sizing:border-box;
   width:384px;height:468px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);
   display:flex;flex-direction:column;overflow:hidden;text-align:left;z-index:2147483647;pointer-events:none;
@@ -68,11 +67,15 @@ export const PRESENTER_CSS = `
 [data-reticle-overlay][data-reticle-min="1"] [data-reticle-hud][data-on="1"]{pointer-events:auto;}
 [data-reticle-hud] .reticle-hud-head{display:flex;align-items:center;gap:8px;flex:none;
   padding:12px 12px 12px 15px;border-bottom:1px solid var(--reticle-line2);}
-[data-reticle-hud] .reticle-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--reticle-accent);
-  animation:reticle-breathe 2.6s ease-in-out infinite;}
-@keyframes reticle-breathe{0%,100%{box-shadow:0 0 0 0 var(--reticle-accent),0 0 7px 1px var(--reticle-accent);opacity:.85}
-  50%{box-shadow:0 0 0 4px var(--reticle-accent-soft),0 0 15px 3px var(--reticle-accent);opacity:1}}
-[data-reticle-hud] .reticle-brand{font-family:var(--reticle-serif);font-weight:500;font-size:15px;letter-spacing:.01em;color:var(--reticle-fg);}
+/* Brand block: both marks always in the DOM, CSS picks one off data-reticle-min (see below) so the
+   collapsed/expanded swap needs no JS state. Artwork paints with currentColor, so it inherits
+   --reticle-fg and reads correctly on any HUD surface instead of baking in the export's #FAFAFA. */
+[data-reticle-hud] .reticle-brand{display:inline-flex;align-items:center;flex:none;color:var(--reticle-fg);}
+[data-reticle-hud] .reticle-mark{display:none;height:18px;width:auto;flex:none;}
+[data-reticle-hud] .reticle-wordmark{display:block;height:16px;width:auto;flex:none;}
+/* Visually hidden, still announced — the marks are aria-hidden artwork, this names the HUD. */
+[data-reticle-hud] .reticle-brand-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
+  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
 [data-reticle-hud] .reticle-head-sp{flex:1;}
 [data-reticle-hud] .reticle-live{display:none;flex:1;min-width:0;color:var(--reticle-muted);font-size:12.5px;
   white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@@ -103,7 +106,6 @@ export const PRESENTER_CSS = `
 [data-reticle-hud] .reticle-chip[data-mode="idle"]{display:none;}
 [data-reticle-overlay][data-reticle-min="1"] [data-reticle-hud]{height:50px;border-radius:25px;cursor:pointer;}
 [data-reticle-overlay][data-reticle-min="1"] [data-reticle-hud] .reticle-hud-head{border-bottom:none;height:50px;padding:0 12px 0 16px;}
-[data-reticle-overlay][data-reticle-min="1"] [data-reticle-hud] .reticle-brand,
 [data-reticle-overlay][data-reticle-min="1"] [data-reticle-hud] .reticle-chip,
 [data-reticle-overlay][data-reticle-min="1"] [data-reticle-hud] .reticle-head-sp,
 [data-reticle-overlay][data-reticle-min="1"] [data-reticle-hud] [data-reticle-min-btn],
@@ -113,6 +115,9 @@ export const PRESENTER_CSS = `
 [data-reticle-overlay][data-reticle-min="1"] [data-reticle-hud] [data-reticle-log],
 [data-reticle-overlay][data-reticle-min="1"] [data-reticle-hud] [data-reticle-foot],
 [data-reticle-overlay][data-reticle-min="1"] [data-reticle-hud] .reticle-banner{display:none;}
+/* Collapsed to a pill: mark only, beside the dot. Expanded: the full wordmark. */
+[data-reticle-overlay][data-reticle-min="1"] [data-reticle-hud] .reticle-wordmark{display:none;}
+[data-reticle-overlay][data-reticle-min="1"] [data-reticle-hud] .reticle-mark{display:block;}
 [data-reticle-overlay][data-reticle-min="1"] [data-reticle-hud] .reticle-live{display:block;}
 [data-reticle-overlay][data-reticle-min="1"] [data-reticle-hud] .reticle-maxhint{display:inline-flex;}
 [data-reticle-mode="reading"] [data-reticle-glow][data-on="1"]{
@@ -122,5 +127,11 @@ export const PRESENTER_CSS = `
 [data-reticle-overlay][data-reticle-throttled="1"] [data-reticle-glow][data-on="1"]{
   box-shadow:inset 0 0 0 3px rgba(251,191,36,.9),inset 0 0 28px 6px rgba(251,191,36,.45);}
 [data-reticle-overlay][data-reticle-throttled="1"] [data-reticle-hud]{--reticle-accent:#fbbf24;--reticle-accent-soft:rgba(251,191,36,.16);}
+/* The two INFINITE animations — the header dot and the border glow — are pure decoration and were
+   blinking regardless of the user's motion preference. Everything else the presenter animates is a
+   one-shot (ripple, tally pop) or a transition, which reduce-motion tolerates. */
+@media (prefers-reduced-motion:reduce){
+  [data-reticle-glow][data-on="1"],
+  [data-reticle-glow][data-on="1"][data-busy="1"]{animation:none;}}
 ${LOG_CSS}
 ${CONTROLS_CSS}`;

package/dist/presenter/presenter-tally.js

@@ -21,14 +21,14 @@ export function renderTally(el, runLog, prev) {
     const next = countVerdicts(runLog);
     if (el === undefined)
         return next;
-    if (next.passes === 0 && next.fails === 0) {
+    if (0 === next.passes && 0 === next.fails) {
         el.setAttribute('hidden', '');
         return next;
     }
     const bumpPass = next.passes > prev.passes ? ' data-bump="1"' : '';
     const bumpFail = next.fails > prev.fails ? ' data-bump="1"' : '';
-    const dimP = next.passes === 0 ? ' data-z="1"' : '';
-    const dimF = next.fails === 0 ? ' data-z="1"' : '';
+    const dimP = 0 === next.passes ? ' data-z="1"' : '';
+    const dimF = 0 === next.fails ? ' data-z="1"' : '';
     el.removeAttribute('hidden');
     el.innerHTML =
         `<span class="reticle-t-pass"${dimP}${bumpPass}>✓ ${String(next.passes)}</span>` +

package/dist/presenter/presenter-test-helpers.d.ts

@@ -7,9 +7,10 @@ export declare const wait: (ms: number) => Promise<void>;
 export declare const until: (pred: () => boolean, ms?: number) => Promise<boolean>;
 export declare const dataOn: () => string | null;
 export declare const dataBusy: () => string | null;
-export interface GlowFlips {
+interface GlowFlips {
     enters: number;
     exits: number;
     stop: () => void;
 }
 export declare function trackGlowFlips(glow: HTMLElement): GlowFlips;
+export {};

package/dist/presenter/presenter-test-helpers.js

@@ -22,9 +22,9 @@ export function trackGlowFlips(glow) {
             if (r.attributeName !== 'data-on')
                 continue;
             const v = glow.getAttribute('data-on');
-            if (v === '1')
+            if ('1' === v)
                 counts.enters++;
-            if (v === '0')
+            if ('0' === v)
                 counts.exits++;
         }
     });

package/dist/presenter/presenter-verbs.js

@@ -1,26 +1,31 @@
 // Present-tense verb for an action label in the presenter HUD (cursor status + act-log row).
 // Presenter-only UI copy — never a wire string. Shared by presenter.ts (cursor) and reticle.ts
 // (act-log row) so the two stay in lockstep.
+//
+// The CASES are wire values though, and they are core's ActionType. Spelled as free strings here,
+// a rename in core left this switch silently falling through to `default` — which returns the raw
+// action name, so the HUD degrades to "webmcp Save" instead of a verb and nothing fails.
+import { ActionType } from '@reticlehq/core';
 export function actionVerb(action) {
     switch (action) {
-        case 'click':
-        case 'dblclick':
+        case ActionType.CLICK:
+        case ActionType.DBLCLICK:
             return 'Clicking';
-        case 'fill':
-        case 'type':
+        case ActionType.FILL:
+        case ActionType.TYPE:
             return 'Typing into';
-        case 'hover':
+        case ActionType.HOVER:
             return 'Hovering';
-        case 'select':
+        case ActionType.SELECT:
             return 'Selecting';
-        case 'submit':
+        case ActionType.SUBMIT:
             return 'Submitting';
-        case 'check':
-        case 'uncheck':
+        case ActionType.CHECK:
+        case ActionType.UNCHECK:
             return 'Toggling';
-        case 'upload':
+        case ActionType.UPLOAD:
             return 'Uploading to';
-        case 'drag':
+        case ActionType.DRAG:
             return 'Dragging';
         default:
             return action;

package/dist/presenter/presenter.js

@@ -1,10 +1,11 @@
-import { ReticleCommand, PresenterMode, SessionState, isPresenterTone, isSessionState, } from '@reticlehq/core';
+import { ActionType, ReticleCommand, PresenterMode, SessionState, isPresenterTone, isSessionState, } from '@reticlehq/core';
 import { refs } from '../dom/refs.js';
 import { actionVerb } from './presenter-verbs.js';
 import { nativeSetTimeout, nativeClearTimeout, nativeNow } from '../timers/native-timers.js';
 import { LOG_KIND, CHIP_LABEL, DATA_RETICLE_LOG, HUMAN_ROW_PREFIX, clampLogMax, formatElapsed, humanDuration, appendLogRow, } from './presenter-log.js';
 import { PRESENTER_CSS } from './presenter-styles.js';
-import { BorderMode, DEFAULT_BORDER_MODE, DATA_BUSY, BUSY_OFF, DEFAULT_PACE, GlowPhase, IDLE_AFTER_MS, HEARTBEAT_MS, IDLE_NOTICE_MS, IDLE_END_MS, IDLE_END_MIN_MS, GLOW_FADE_MS, GLOW_ON, GLOW_OFF, DATA_ON, MIN_ATTR, THROTTLED_ATTR, } from './presenter-config.js';
+import { BRAND_HTML } from './presenter-brand.js';
+import { BorderMode, DEFAULT_BORDER_MODE, DATA_BUSY, BUSY_OFF, effectivePaceMs, GlowPhase, IDLE_AFTER_MS, HEARTBEAT_MS, IDLE_NOTICE_MS, IDLE_END_MS, IDLE_END_MIN_MS, GLOW_FADE_MS, GLOW_ON, GLOW_OFF, DATA_ON, MIN_ATTR, THROTTLED_ATTR, } from './presenter-config.js';
 import { buildRunState } from './presenter-run-state.js';
 import { moveCursor, ringAround, spawnRipple, pace } from './presenter-effects.js';
 import { GlowController } from './presenter-glow.js';
@@ -57,7 +58,7 @@ export class Presenter {
     #onControl;
     #panel;
     constructor(options = {}) {
-        this.#paceMs = options.paceMs ?? DEFAULT_PACE;
+        this.#paceMs = effectivePaceMs(options.paceMs);
         this.#now = options.now ?? nativeNow;
         this.#heartbeatMs = options.heartbeatMs ?? HEARTBEAT_MS;
         this.#idleNoticeMs = options.idleNoticeMs ?? IDLE_NOTICE_MS;
@@ -111,7 +112,7 @@ export class Presenter {
             return void this.#panel.setFlows(a['flows']);
         const state = a['state'];
         const tone = a['tone'];
-        const text = typeof a['text'] === 'string' && a['text'].length > 0 ? a['text'] : undefined;
+        const text = 'string' === typeof a['text'] && a['text'].length > 0 ? a['text'] : undefined;
         if (isSessionState(state))
             this.setState(state, text, isPresenterTone(tone) ? tone : undefined);
     }
@@ -124,7 +125,7 @@ export class Presenter {
         this.#pruneLog();
     }
     mount() {
-        if (this.#root !== undefined || typeof document === 'undefined')
+        if (this.#root !== undefined || 'undefined' === typeof document)
             return;
         const style = document.createElement('style');
         style.setAttribute('data-reticle-overlay', '');
@@ -137,7 +138,7 @@ export class Presenter {
       <div data-reticle-cursor></div>
       <div data-reticle-ring></div>
       <div data-reticle-hud>
-        <div class="reticle-hud-head"><span class="reticle-dot"></span><span class="reticle-brand">Reticle</span><span class="reticle-chip" data-reticle-chip></span><span class="reticle-tally" data-reticle-tally hidden></span><span class="reticle-live"></span><span class="reticle-head-sp"></span><button type="button" data-reticle-min-btn title="Minimise" aria-label="Minimise the panel">⌄</button>${CONTROLS_HEAD_HTML}<span class="reticle-maxhint" aria-hidden="true">⌃</span></div>
+        <div class="reticle-hud-head">${BRAND_HTML}<span class="reticle-chip" data-reticle-chip></span><span class="reticle-tally" data-reticle-tally hidden></span><span class="reticle-live"></span><span class="reticle-head-sp"></span><button type="button" data-reticle-min-btn title="Minimise" aria-label="Minimise the panel">⌄</button>${CONTROLS_HEAD_HTML}<span class="reticle-maxhint" aria-hidden="true">⌃</span></div>
         <div class="reticle-act-strip"><span class="reticle-act">idle</span></div>
         ${CONTROLS_BANNER_HTML}
         <div ${DATA_RETICLE_LOG}></div>
@@ -162,7 +163,7 @@ export class Presenter {
             setMin(true);
         });
         root.querySelector('.reticle-hud-head')?.addEventListener('click', () => {
-            if (root.getAttribute(MIN_ATTR) === '1')
+            if ('1' === root.getAttribute(MIN_ATTR))
                 setMin(false); // clicking the minimised bar restores
         });
         this.#glowCtl.setElements(this.#glow, this.#cursor);
@@ -348,7 +349,7 @@ export class Presenter {
         if (this.#log === undefined)
             return undefined;
         const trimmed = text.trim();
-        if (trimmed.length === 0)
+        if (0 === trimmed.length)
             return undefined;
         this.#logBaseMs ??= ms;
         // Structured run-log entry (mirrors the DOM row) for the exported run state, capped like the DOM.
@@ -381,7 +382,7 @@ export class Presenter {
     }
     /** Back-compat: narration appends to the live log (append-only, never overwrites). */
     narrate(text, level = 'info') {
-        const line = level === 'info' ? text : `[${level}] ${text}`;
+        const line = 'info' === level ? text : `[${level}] ${text}`;
         return this.log(LOG_KIND.NARRATION, line);
     }
     #pruneLog() {
@@ -417,7 +418,9 @@ export class Presenter {
         moveCursor(this.#cursor, cx, cy);
         ringAround(this.#ring, rect);
         await pace(this.#paceMs);
-        if (action === 'click' || action === 'dblclick' || action === 'submit')
+        if (ActionType.CLICK === action ||
+            ActionType.DBLCLICK === action ||
+            ActionType.SUBMIT === action)
             spawnRipple(this.#root, cx, cy);
     }
 }

package/dist/recorder/recorder.js

@@ -33,6 +33,7 @@ const ANNOTATION_LABEL = {
     [AnnotationKind.ASSERT_SIGNAL]: 'assert signal',
     [AnnotationKind.ASSERT_VISIBLE]: 'assert visible',
     [AnnotationKind.ASSERT_STATE]: 'assert state',
+    [AnnotationKind.ASSERT_NET]: 'assert request',
     [AnnotationKind.MARK_DYNAMIC]: 'mark dynamic',
     [AnnotationKind.SUCCESS_STATE]: 'success state',
     [AnnotationKind.INTENT]: 'intent',
@@ -64,13 +65,13 @@ export function anchorFor(el) {
 function isTextbox(el) {
     if (el instanceof HTMLTextAreaElement)
         return true;
-    return el instanceof HTMLInputElement && inputRole(el) === 'textbox';
+    return el instanceof HTMLInputElement && 'textbox' === inputRole(el);
 }
 function inputRole(el) {
     const type = el.type.toLowerCase();
-    if (type === 'checkbox')
+    if ('checkbox' === type)
         return 'checkbox';
-    if (type === 'radio')
+    if ('radio' === type)
         return 'radio';
     if (['text', 'email', 'tel', 'url', 'search', 'password', ''].includes(type))
         return 'textbox';
@@ -163,7 +164,7 @@ class Recorder {
     mount() {
         if (this.#root !== undefined)
             return;
-        if (typeof document === 'undefined')
+        if ('undefined' === typeof document)
             return;
         this.#buildToolbar();
         this.#installCapture();
@@ -222,7 +223,7 @@ class Recorder {
         // semantic step (CHECK/UNCHECK/SELECT). Recording a CLICK here too would replay any onChange
         // side effect twice (analytics, dependent-field resets), so skip the duplicate.
         if ((target instanceof HTMLInputElement &&
-            (inputRole(target) === 'checkbox' || inputRole(target) === 'radio')) ||
+            ('checkbox' === inputRole(target) || 'radio' === inputRole(target))) ||
             target instanceof HTMLSelectElement) {
             return;
         }
@@ -244,12 +245,12 @@ class Recorder {
         const target = this.#ignore(ev);
         if (target === undefined)
             return;
-        if (target instanceof HTMLInputElement && inputRole(target) === 'checkbox') {
+        if (target instanceof HTMLInputElement && 'checkbox' === inputRole(target)) {
             this.#flushPendingFill();
             this.#steps.push(buildStep(target, target.checked ? ActionType.CHECK : ActionType.UNCHECK));
             return;
         }
-        if (target instanceof HTMLInputElement && inputRole(target) === 'radio') {
+        if (target instanceof HTMLInputElement && 'radio' === inputRole(target)) {
             this.#flushPendingFill();
             this.#steps.push(buildStep(target, ActionType.CHECK));
             return;
@@ -328,7 +329,7 @@ class Recorder {
     #start() {
         // A fresh span — no leakage from a previous Record→Stop cycle.
         this.#steps = [];
-        this.#startPath = typeof location === 'undefined' ? undefined : location.pathname;
+        this.#startPath = 'undefined' === typeof location ? undefined : location.pathname;
         this.#annotations = [];
         this.#pendingFill = undefined;
         this.#draft = undefined;
@@ -340,7 +341,7 @@ class Recorder {
         const name = this.#nameField() ?? this.#deps.defaultName ?? DEFAULT_NAME;
         const flow = compileRecording(name, this.#steps, this.#annotations, this.#deps.now(), this.#startPath);
         this.#deps.emit(EventType.FLOW_RECORDED, { name, flow });
-        this.#setStatus(this.#steps.length === 0 ? RECORDER_EMPTY_MSG : STATUS_IDLE);
+        this.#setStatus(0 === this.#steps.length ? RECORDER_EMPTY_MSG : STATUS_IDLE);
         this.#setPhase(RecorderPhase.IDLE);
         this.#closeMenu();
     }

package/dist/registry/store-adapters.js

@@ -181,7 +181,7 @@ export function recoilStore(atoms, snapshot, subscribe) {
     };
 }
 function stopSubscription(handle) {
-    if (typeof handle === 'function') {
+    if ('function' === typeof handle) {
         handle();
         return;
     }

package/dist/registry/stores.js

@@ -20,12 +20,12 @@ function isStoreLike(source) {
     // Zustand's `create` returns a CALLABLE hook that also carries getState/subscribe, so a store can be
     // typeof 'function' as well as 'object'. What distinguishes it from a plain getter is those two members
     // — never the typeof. (Checking only for 'object' left every Zustand app on pull-only reads.)
-    if (source === null)
+    if (null === source)
         return false;
     if (typeof source !== 'object' && typeof source !== 'function')
         return false;
     const candidate = source;
-    return typeof candidate.getState === 'function' && typeof candidate.subscribe === 'function';
+    return 'function' === typeof candidate.getState && 'function' === typeof candidate.subscribe;
 }
 /**
  * App calls this once per store. PREFER passing the store itself — `registerStore('app', useApp)` —
@@ -43,7 +43,7 @@ export function registerStore(name, source, subscribe) {
         return;
     }
     if (typeof source !== 'function') {
-        const hasSubscribe = typeof source === 'object' && source !== null && 'subscribe' in source;
+        const hasSubscribe = 'object' === typeof source && source !== null && 'subscribe' in source;
         nativeWarn(`[reticle] store "${name}" is neither a getter function nor a {getState, subscribe} store` +
             (hasSubscribe
                 ? ` — it has subscribe but no getState. Wrap it with an adapter or add getState.`

package/dist/reticle-presenter-helpers.js

@@ -1,9 +1,9 @@
-import { ReticleCommand, PresenterMode } from '@reticlehq/core';
+import { ReticleCommand, PresenterMode, QueryBy } from '@reticlehq/core';
 import { refs } from './dom/refs.js';
 import { describe } from './dom/a11y.js';
 /** Coerce an unknown arg to a string, falling back to `fallback` (default empty) when it isn't one. */
 export function str(value, fallback = '') {
-    return typeof value === 'string' ? value : fallback;
+    return 'string' === typeof value ? value : fallback;
 }
 /** A short human label for a ref ("button \"Save\"") for the presenter HUD. */
 export function refLabel(refId) {
@@ -69,7 +69,7 @@ export function presentStatus(commandName, args = {}) {
 }
 /** Compact "what we're looking for" from a query's args (testid/value/name/role/text/label). */
 function queryTarget(q) {
-    const testid = str(q['testid']) ?? (str(q['by']) === 'testid' ? str(q['value']) : undefined);
+    const testid = str(q['testid']) ?? (QueryBy.TESTID === str(q['by']) ? str(q['value']) : undefined);
     if (testid !== undefined)
         return `[testid=${testid}]`;
     const name = str(q['name']);

package/dist/reticle.js

@@ -1,4 +1,5 @@
-import { EventType, RETICLE_DEFAULT_PORT, RETICLE_PROTOCOL_VERSION, RETICLE_URL_PARAM, bridgeWsUrl, ReticleCommand, MessageKind, SESSION_AUTO, SessionState, TRANSPORT_LIMITS, buildRedactionPolicy, isLoopbackHostname, isLocalPage, setActiveRedactionPolicy, wireRedactionKeys, RETICLE_ROOT_GLOBAL, } from '@reticlehq/core';
+import { EventType, RETICLE_DEFAULT_PORT, RETICLE_PROTOCOL_VERSION, RETICLE_URL_PARAM, bridgeWsUrl, ReticleCommand, MessageKind, SESSION_AUTO, SessionState, TRANSPORT_LIMITS, buildRedactionPolicy, isLoopbackHostname, isLocalPage, setActiveRedactionPolicy, wireRedactionKeys, RETICLE_ROOT_GLOBAL, RETICLE_SDK_VERSION_GLOBAL, CONTRACT_FINGERPRINT, } from '@reticlehq/core';
+import { rememberSessionLabel } from './session-continuity.js';
 import { createCommandRegistry, RELOAD_CACHE_BUST_PARAM, } from './commands/commands.js';
 import { Transport } from './transport/transport.js';
 import { adapterNames } from './registry/adapters.js';
@@ -19,7 +20,7 @@ import { Annotator } from './review/annotator.js';
  * behind `import.meta.env.DEV` so the SDK is dead-code-eliminated from prod bundles entirely.
  */
 export function shouldBlockProduction(nodeEnv, allowInProduction) {
-    return nodeEnv === 'production' && !allowInProduction;
+    return 'production' === nodeEnv && !allowInProduction;
 }
 export function connectionPolicy(pageHostname, bridgeUrl, allowNonLocalhost, token, 
 /** The page's protocol. Desktop webviews (file:, app:, tauri:) are local despite a non-loopback host. */
@@ -53,7 +54,7 @@ pageProtocol = 'http:') {
             reason: 'Reticle is disabled outside localhost unless allowNonLocalhost is explicitly enabled',
         };
     }
-    if (token === undefined || token.length === 0) {
+    if (token === undefined || 0 === token.length) {
         return { allowed: false, reason: 'a pairing token is required outside localhost' };
     }
     return { allowed: true };
@@ -145,6 +146,7 @@ export class Reticle {
     #annotator;
     #eventCount = 0;
     #token;
+    #sdkVersion;
     #projectId;
     /** App-declared extra redaction keys, announced in hello so the driven path honours them too. */
     #redactKeys = [];
@@ -153,13 +155,13 @@ export class Reticle {
     connect(options = {}) {
         if (this.#connected)
             return;
-        if (typeof window === 'undefined' || typeof document === 'undefined')
+        if ('undefined' === typeof window || 'undefined' === typeof document)
             return;
         // Dev-only backstop: refuse to activate in a production build (SSR healthcheck, prod bundle opened
         // on localhost). `process` may not exist in a raw browser, so read NODE_ENV off globalThis.
         const proc = globalThis.process;
         const nodeEnv = proc?.env?.NODE_ENV;
-        if (shouldBlockProduction(nodeEnv, options.allowInProduction === true)) {
+        if (shouldBlockProduction(nodeEnv, true === options.allowInProduction)) {
             globalThis.console.warn('[Reticle] disabled in production (NODE_ENV=production). Gate the import behind ' +
                 'import.meta.env.DEV, or pass allowInProduction:true to override.');
             return;
@@ -169,7 +171,7 @@ export class Reticle {
         // reload permanently pollutes the URL the app and the agent see.
         stripReloadCacheBustParam();
         const url = options.url ?? bridgeWsUrl(RETICLE_DEFAULT_PORT);
-        const policy = connectionPolicy(window.location.hostname, url, options.allowNonLocalhost === true, options.token, window.location.protocol);
+        const policy = connectionPolicy(window.location.hostname, url, true === options.allowNonLocalhost, options.token, window.location.protocol);
         if (!policy.allowed) {
             globalThis.console.warn(`[Reticle] ${policy.reason ?? 'connection blocked'}`);
             return;
@@ -179,10 +181,21 @@ export class Reticle {
         if (options.root !== undefined && options.root.length > 0) {
             globalThis[RETICLE_ROOT_GLOBAL] = options.root;
         }
+        // The build plugin defines this; a hand-wired connect can pass it explicitly. Either way an
+        // absent value means UNKNOWN, so the bridge never reports an unknown pair as in sync.
+        const declaredVersion = options.sdkVersion ?? globalThis[RETICLE_SDK_VERSION_GLOBAL];
+        this.#sdkVersion =
+            'string' === typeof declaredVersion && declaredVersion.length > 0
+                ? declaredVersion
+                : undefined;
         // A pooled/headless launcher can stamp identity via namespaced URL params; explicit (non-auto)
         // options win, but the `auto` sentinel defers to the URL param so leases correlate.
         const identity = resolveConnectIdentity(options, window.location.search);
-        this.#session = resolveSessionLabel(identity.session, () => typeof globalThis.crypto?.randomUUID === 'function'
+        // Remembered per TAB, so a reload rejoins the same session instead of appearing as a new one and
+        // stranding the agent's handle — see session-continuity. An explicit id (connect option, or the
+        // lease's URL param) still wins.
+        const explicitSession = resolveSessionLabel(identity.session, () => '');
+        this.#session = rememberSessionLabel(explicitSession.length > 0 ? explicitSession : undefined, 'undefined' === typeof globalThis.sessionStorage ? undefined : globalThis.sessionStorage, () => 'function' === typeof globalThis.crypto?.randomUUID
             ? `s${globalThis.crypto.randomUUID()}`
             : `s${Date.now().toString(36)}`);
         this.#token =
@@ -211,7 +224,7 @@ export class Reticle {
                 // lodash debounce/throttle in the app (now - lastCall stays 0), so search boxes, autosave
                 // and resize handlers stop firing until a reload — with nothing on screen explaining why.
                 resetClock();
-                if (this.#presenter?.sessionActive === true) {
+                if (true === this.#presenter?.sessionActive) {
                     this.#presenter.setState(SessionState.ENDED, BRIDGE_LOST_SUMMARY);
                 }
             },
@@ -229,9 +242,9 @@ export class Reticle {
         setCapabilitiesListener(() => this.#transport?.reannounce());
         const emit = this.#emit;
         this.#teardowns = installAllObservers(emit, {
-            captureBodies: options.captureNetworkBodies === true,
+            captureBodies: true === options.captureNetworkBodies,
         });
-        if (options.overlay === true) {
+        if (true === options.overlay) {
             this.#overlay = installOverlay();
             this.#overlay.update({ connected: true, events: 0 });
         }
@@ -261,7 +274,7 @@ export class Reticle {
             // so the presenter is visible as soon as the agent is reachable — not just on first command.
             this.#presenter.mount();
         }
-        if (options.recorder === true) {
+        if (true === options.recorder) {
             this.#recorder = installRecorder({ emit, now: () => Date.now() });
             this.#recorder.mount();
         }
@@ -375,7 +388,12 @@ export class Reticle {
             adapters: adapterNames(),
             ...(this.#token === undefined ? {} : { token: this.#token }),
             hasCapabilities: hasCapabilities(),
-            ...(this.#redactKeys.length === 0 ? {} : { redactKeys: this.#redactKeys }),
+            // Absent when no build plugin supplied one — "unknown", never "matching".
+            ...(this.#sdkVersion === undefined ? {} : { sdkVersion: this.#sdkVersion }),
+            // Always present: derived from THIS build's core, so it needs no build plugin to supply it.
+            // It is the half of the skew check that works on a hand-wired connect.
+            contract: CONTRACT_FINGERPRINT,
+            ...(0 === this.#redactKeys.length ? {} : { redactKeys: this.#redactKeys }),
         };
     }
     async #handleCommand(command) {
@@ -388,7 +406,7 @@ export class Reticle {
         // SESSION_CONFIG: the agent tunes the session for the app (currently the idle-end window).
         if (command.name === ReticleCommand.SESSION_CONFIG) {
             const idleEndMs = command.args['idleEndMs'];
-            if (typeof idleEndMs === 'number')
+            if ('number' === typeof idleEndMs)
                 this.#presenter?.setIdleEndMs(idleEndMs);
             return { ok: true, result: { applied: this.#presenter !== undefined, idleEndMs } };
         }

package/dist/review/annotator.js

@@ -80,7 +80,7 @@ export class Annotator {
         return this.#markCount;
     }
     mount() {
-        if (this.#root !== undefined || typeof document === 'undefined')
+        if (this.#root !== undefined || 'undefined' === typeof document)
             return;
         const style = document.createElement('style');
         style.setAttribute(MARK_ATTR, 'style');
@@ -193,7 +193,7 @@ export class Annotator {
             return;
         }
         const rect = target.getBoundingClientRect();
-        if (rect.width === 0 && rect.height === 0) {
+        if (0 === rect.width && 0 === rect.height) {
             this.#hi.setAttribute('data-on', '0');
             return;
         }
@@ -239,22 +239,22 @@ export class Annotator {
         const send = pop.querySelector('button[data-send]');
         const submit = () => {
             const note = textarea?.value.trim() ?? '';
-            if (note.length === 0)
+            if (0 === note.length)
                 return; // never send an empty mark
             this.#sendMark(note, resolved, x, y);
             this.#closePopover();
         };
         textarea?.addEventListener('input', () => {
             if (send !== null)
-                send.disabled = textarea.value.trim().length === 0;
+                send.disabled = 0 === textarea.value.trim().length;
         });
         // Keyboard ergonomics devs expect: ⌘/Ctrl+Enter sends, Esc cancels — without leaving the textarea.
         textarea?.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape') {
+            if ('Escape' === e.key) {
                 e.preventDefault();
                 this.#closePopover();
             }
-            else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+            else if ('Enter' === e.key && (e.metaKey || e.ctrlKey)) {
                 e.preventDefault();
                 submit();
             }
@@ -269,7 +269,7 @@ export class Annotator {
             anchor: resolved.anchor,
             strategy: resolved.strategy,
             label: resolved.label,
-            route: typeof location === 'undefined' ? '' : location.pathname + location.search,
+            route: 'undefined' === typeof location ? '' : location.pathname + location.search,
         };
         if (resolved.source !== undefined)
             data['source'] = resolved.source;

package/dist/security/serialization.js

@@ -31,18 +31,18 @@ function sanitize(value, state, depth, key) {
         return TRUNCATED_VALUE;
     }
     state.nodes += 1;
-    if (value === null || typeof value === 'boolean')
+    if (null === value || 'boolean' === typeof value)
         return value;
-    if (typeof value === 'string') {
-        return boundedString(value, state, key?.toLowerCase() === 'error'
+    if ('string' === typeof value) {
+        return boundedString(value, state, 'error' === key?.toLowerCase()
             ? TRANSPORT_LIMITS.MAX_ERROR_LENGTH
             : TRANSPORT_LIMITS.MAX_STRING_LENGTH);
     }
-    if (typeof value === 'number')
+    if ('number' === typeof value)
         return Number.isFinite(value) ? value : null;
-    if (typeof value === 'bigint')
+    if ('bigint' === typeof value)
         return value.toString();
-    if (typeof value === 'undefined' || typeof value === 'function' || typeof value === 'symbol') {
+    if ('undefined' === typeof value || 'function' === typeof value || 'symbol' === typeof value) {
         return OMIT_VALUE;
     }
     // An invalid Date (`new Date(NaN)` / `new Date(undefined)`, easy to land in app state) throws
@@ -65,7 +65,7 @@ function sanitize(value, state, depth, key) {
                 state.droppedItems += value.size - n;
                 break;
             }
-            const sk = boundedString(typeof k === 'string' ? k : String(k), state, MAX_KEY_LENGTH);
+            const sk = boundedString('string' === typeof k ? k : String(k), state, MAX_KEY_LENGTH);
             const sv = sanitize(v, state, depth + 1, sk);
             if (sv !== OMIT_VALUE)
                 out[sk] = sv;
@@ -176,7 +176,7 @@ function sanitize(value, state, depth, key) {
         const read = keys.map((key) => {
             try {
                 const v = value[key];
-                return { key, value: v, scalar: v === null || typeof v !== 'object', ok: true };
+                return { key, value: v, scalar: null === v || typeof v !== 'object', ok: true };
             }
             catch {
                 return { key, value: undefined, scalar: true, ok: false };
@@ -224,7 +224,7 @@ export function sanitizeWithReport(value) {
     };
     const sanitized = sanitize(value, state, 0);
     const out = sanitized === OMIT_VALUE ? null : sanitized;
-    if (state.droppedItems === 0 && state.truncatedValues === 0)
+    if (0 === state.droppedItems && 0 === state.truncatedValues)
         return { value: out };
     const parts = [];
     if (state.droppedItems > 0)

package/dist/session-continuity.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Keep a tab's session id across a reload.
+ *
+ * The id was minted fresh on every `connect()`. A reload is a new document, so the page came back as
+ * a NEW session while the agent still held the old id — and every call after
+ * `reticle_navigate { reload: true }` was refused with "no browser session connected". Reported on 6
+ * of 6 apps; a reload is the most ordinary thing an agent does.
+ *
+ * `sessionStorage` is exactly the right scope: it survives reloads and same-tab navigations, and is
+ * NOT shared with another tab of the same app — so two tabs stay two sessions, which is what the
+ * multi-session tooling assumes.
+ *
+ * An explicit id still wins. `connect({ session })` and the `__reticle_session` URL param a lease
+ * stamps are callers ASSERTING an identity, not asking for one; they are also remembered, so a
+ * leased tab that reloads rejoins its own lease.
+ */
+export declare function rememberSessionLabel(explicit: string | undefined, store: Storage | undefined, generate: () => string): string;