@reticlehq/browser 3.5.0 → 3.7.0

package/dist/reticle.d.ts

@@ -1,8 +1,12 @@
-import { EventType, RETICLE_URL_PARAM, type ReticleEvent } from '@reticlehq/core';
+import { EventType, RETICLE_URL_PARAM, HudVisibility, type ReticleEvent } from '@reticlehq/core';
 import { type CapabilitiesInput } from './registry/capabilities.js';
 import type { ReticleConnectOptions } from './connect-options.js';
 export type { ReticleConnectOptions };
 export declare function shouldBlockProduction(nodeEnv: string | undefined, allowInProduction: boolean): boolean;
+export declare function withBridgePath(bridgeUrl: string): {
+    url: string;
+    adjusted: boolean;
+};
 export declare function connectionPolicy(pageHostname: string, bridgeUrl: string, allowNonLocalhost: boolean, token: string | undefined, pageProtocol?: string): {
     allowed: boolean;
     reason?: string;
@@ -12,6 +16,11 @@ export { RETICLE_URL_PARAM };
 export declare function reticleParamsFromSearch(search: string): {
     session?: string;
     projectId?: string;
+    hud?: HudVisibility;
+};
+export declare function hudWithoutPanel(hud: HudVisibility | undefined): {
+    remember?: HudVisibility;
+    placed: HudVisibility[];
 };
 export declare function resolveConnectIdentity(options: {
     session?: string;

package/dist/reticle.js

@@ -1,5 +1,7 @@
-import { setPresenterVisible } from './dom/dom-ignore.js';
-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, CONTRACT_PARTS, newDocumentId, NO_EDITS_OBSERVED, PresenterMode, } from '@reticlehq/core';
+import { setPresenterViewer, setPresenterVisible } from './dom/dom-ignore.js';
+import { setOutwardPolicy } from './actions/danger-context.js';
+import { coverageMarkers, notApplicableFor } from './dom/addressing/coverage-markers.js';
+import { EventType, RETICLE_DEFAULT_PORT, RETICLE_PROTOCOL_VERSION, RETICLE_URL_PARAM, RETICLE_WS_PATH, bridgeWsUrl, ReticleCommand, MessageKind, SESSION_AUTO, SessionState, TRANSPORT_LIMITS, buildRedactionPolicy, isLoopbackHostname, isLocalPage, setActiveRedactionPolicy, wireRedactionKeys, RETICLE_ROOT_GLOBAL, RETICLE_SDK_VERSION_GLOBAL, CONTRACT_FINGERPRINT, CONTRACT_PARTS, newDocumentId, NO_EDITS_OBSERVED, PresenterMode, CommandActor, HudCorner, HudVisibility, } from '@reticlehq/core';
 import { rememberSessionLabel } from './session-continuity.js';
 import { editEpoch } from './edit-epoch.js';
 import { createCommandRegistry, RELOAD_CACHE_BUST_PARAM, } from './commands/commands.js';
@@ -10,9 +12,10 @@ import { declaredChannels } from './registry/declared-channels.js';
 import { declaredCommands, declaredPlatform } from './registry/declared-platform.js';
 import { registerCapabilities, setCapabilitiesListener, hasCapabilities, } from './registry/capabilities.js';
 import { installAllObservers, runTeardowns } from './observers/install-all.js';
+import { setTestIdAttr } from './dom/addressing/testid-attr.js';
 import { setNetworkBodyMaxChars } from './observers/net-detail/network-body.js';
 import { installOverlay } from './presenter/chrome/overlay.js';
-import { LOG_KIND, LOG_RESULT } from './presenter/chrome/log-kinds.js';
+import { LOG_ACTOR, LOG_KIND, LOG_RESULT } from './presenter/chrome/log-kinds.js';
 import { actionVerb } from './presenter/chrome/presenter-verbs.js';
 import { str, refLabel, modeForCommand, presentStatus } from './reticle-presenter-helpers.js';
 import { resetClock } from './timers/clock.js';
@@ -22,6 +25,21 @@ import { Annotator } from './review/annotator.js';
 export function shouldBlockProduction(nodeEnv, allowInProduction) {
     return 'production' === nodeEnv && !allowInProduction;
 }
+export function withBridgePath(bridgeUrl) {
+    let parsed;
+    try {
+        parsed = new URL(bridgeUrl);
+    }
+    catch {
+        return { url: bridgeUrl, adjusted: false };
+    }
+    if ((parsed.protocol !== 'ws:' && parsed.protocol !== 'wss:') ||
+        (parsed.pathname !== '' && parsed.pathname !== '/')) {
+        return { url: bridgeUrl, adjusted: false };
+    }
+    parsed.pathname = RETICLE_WS_PATH;
+    return { url: parsed.toString(), adjusted: true };
+}
 export function connectionPolicy(pageHostname, bridgeUrl, allowNonLocalhost, token, pageProtocol = 'http:') {
     let bridge;
     try {
@@ -57,6 +75,8 @@ export function connectionPolicy(pageHostname, bridgeUrl, allowNonLocalhost, tok
     }
     return { allowed: true };
 }
+const MAX_PENDING_NARRATIONS = 20;
+const KILLED_MESSAGE = '[Reticle] killed for this page. Restart your dev server or reload the page to bring it back.';
 const BRIDGE_LOST_SUMMARY = 'Session ended - lost connection to Reticle (the agent is no longer running).';
 export function resolveSessionLabel(option, gen) {
     return option === undefined || option === SESSION_AUTO ? gen() : option;
@@ -78,12 +98,20 @@ export function reticleParamsFromSearch(search) {
     const out = {};
     const session = params.get(RETICLE_URL_PARAM.SESSION);
     const projectId = params.get(RETICLE_URL_PARAM.PROJECT);
+    const hud = oneOf(HudVisibility, params.get(RETICLE_URL_PARAM.HUD));
     if (session !== null && session.length > 0)
         out.session = session;
     if (projectId !== null && projectId.length > 0)
         out.projectId = projectId;
+    if (hud !== undefined)
+        out.hud = hud;
     return out;
 }
+export function hudWithoutPanel(hud) {
+    if (hud === undefined)
+        return { placed: [] };
+    return { remember: hud, placed: HudVisibility.SHOWN === hud ? [] : [hud] };
+}
 export function resolveConnectIdentity(options, search) {
     const url = reticleParamsFromSearch(search);
     const explicitSession = options.session !== undefined && options.session !== SESSION_AUTO ? options.session : undefined;
@@ -116,6 +144,8 @@ export class Reticle {
     #overlay;
     #presenter;
     #pendingPushes = new Map();
+    #pendingNarrations = [];
+    #pendingHud;
     #readPanelSettings;
     #panelRequested = false;
     #bridgeConnected = false;
@@ -142,7 +172,11 @@ export class Reticle {
             return;
         }
         stripReloadCacheBustParam();
-        const url = options.url ?? bridgeWsUrl(RETICLE_DEFAULT_PORT);
+        const bridge = withBridgePath(options.url ?? bridgeWsUrl(RETICLE_DEFAULT_PORT));
+        const url = bridge.url;
+        if (bridge.adjusted) {
+            globalThis.console.warn(`[Reticle] bridge URL has no path; using ${url} (the bridge only accepts WebSocket upgrades on ${RETICLE_WS_PATH}).`);
+        }
         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'}`);
@@ -188,6 +222,7 @@ export class Reticle {
         });
         setCapabilitiesListener(() => this.#transport?.reannounce());
         setPresenterVisible(true === options.exposePresenter);
+        setTestIdAttr(options.testIdAttribute);
         if (options.networkBodyMaxChars !== undefined) {
             setNetworkBodyMaxChars(options.networkBodyMaxChars);
         }
@@ -205,7 +240,8 @@ export class Reticle {
             this.#overlay = installOverlay();
             this.#overlay.update({ connected: true, events: 0 });
         }
-        if (options.present !== false)
+        this.#pendingHud = reticleParamsFromSearch(window.location.search).hud;
+        if (options.present !== false && HudVisibility.REMOVED !== this.#pendingHud)
             this.#fetchAndShowPanel(options);
         if (true === options.recorder) {
             this.#recorder = installRecorder({ emit, now: () => Date.now() });
@@ -215,7 +251,7 @@ export class Reticle {
             this.#annotator = new Annotator({
                 emit,
                 now: () => Date.now(),
-                onMark: (mark) => this.#presenter?.log(LOG_KIND.HUMAN, `🚩 #${String(mark.index)} ${mark.anchor}${mark.source !== undefined ? ` · ${mark.source}` : ''} — ${mark.note}`),
+                onMark: (mark) => this.#presenter?.log(LOG_KIND.HUMAN, `🚩 #${String(mark.index)} ${mark.label}${mark.source !== undefined ? ` · ${mark.source}` : ''} — ${mark.note}`),
                 shouldBlock: () => this.#readPanelSettings?.().blockPageInteractions ?? true,
             });
             this.#annotator.mount();
@@ -249,16 +285,30 @@ export class Reticle {
             if (options.idleEndMs !== undefined)
                 panelOptions.idleEndMs = options.idleEndMs;
             panelOptions.sessionId = this.#session;
+            if (this.#projectId !== undefined)
+                panelOptions.projectId = this.#projectId;
             panelOptions.onControl = (intent) => this.#emit(EventType.HUMAN_CONTROL, intent.text !== undefined
                 ? { kind: intent.kind, text: intent.text }
                 : { kind: intent.kind });
             panelOptions.onHudUse = (use) => this.#emit(EventType.HUD_USED, { ...use });
+            panelOptions.onKill = () => {
+                this.disconnect();
+                nativeWarn(KILLED_MESSAGE);
+            };
             const panel = new Presenter(panelOptions);
             this.#presenter = panel;
             panel.mount();
+            panel.showSdkVersion(this.#sdkVersion);
             for (const buffered of this.#pendingPushes.values())
                 panel.handlePush(buffered);
             this.#pendingPushes.clear();
+            if (0 < this.#pendingNarrations.length)
+                panel.sessionStart();
+            for (const early of this.#pendingNarrations.splice(0))
+                panel.narrate(early.text, early.level, early.actor, early.summary);
+            if (this.#pendingHud !== undefined)
+                panel.placeHud(this.#pendingHud, undefined);
+            this.#pendingHud = undefined;
             void import('./presenter/tour/tour.js').then((tour) => {
                 if (!this.#connected)
                     return;
@@ -384,19 +434,56 @@ export class Reticle {
         };
     }
     async #handleCommand(command) {
+        if (command.name === ReticleCommand.MARKERS) {
+            const markers = coverageMarkers(document);
+            const buildPlugin = this.#sdkVersion !== undefined || this.#sourceMapping !== undefined;
+            const na = notApplicableFor({ buildPlugin, adapters: adapterNames(), markers });
+            return { ok: true, result: { markers, ...(0 === na.length ? {} : { notApplicable: na }) } };
+        }
         if (command.name === ReticleCommand.NARRATE) {
+            if (this.#presenter === undefined && this.#panelRequested) {
+                if (this.#pendingNarrations.length < MAX_PENDING_NARRATIONS)
+                    this.#pendingNarrations.push({
+                        text: str(command.args['text']),
+                        level: str(command.args['level'], 'info'),
+                        actor: narrationActor(command.args),
+                        summary: true === command.args['summary'],
+                    });
+                return { ok: true, result: { shown: false, buffered: true } };
+            }
             this.#presenter?.sessionStart();
-            this.#presenter?.narrate(str(command.args['text']), str(command.args['level'], 'info'));
+            this.#presenter?.narrate(str(command.args['text']), str(command.args['level'], 'info'), narrationActor(command.args), true === command.args['summary']);
             return { ok: true, result: { shown: this.#presenter !== undefined } };
         }
         if (command.name === ReticleCommand.SESSION_CONFIG) {
             const idleEndMs = command.args['idleEndMs'];
             if ('number' === typeof idleEndMs)
                 this.#presenter?.setIdleEndMs(idleEndMs);
-            return { ok: true, result: { applied: this.#presenter !== undefined, idleEndMs } };
+            const hud = oneOf(HudVisibility, command.args['hud']);
+            const corner = oneOf(HudCorner, command.args['corner']);
+            const presenter = this.#presenter;
+            let placed;
+            if (presenter !== undefined)
+                placed = presenter.placeHud(hud, corner);
+            else {
+                const early = hudWithoutPanel(hud);
+                if (early.remember !== undefined)
+                    this.#pendingHud = early.remember;
+                placed = early.placed;
+            }
+            return {
+                ok: true,
+                result: {
+                    applied: this.#presenter !== undefined,
+                    idleEndMs,
+                    ...(0 < placed.length ? { hud: placed } : {}),
+                },
+            };
         }
         if (command.name === ReticleCommand.PRESENTER ||
             command.name === ReticleCommand.FLOWS ||
+            command.name === ReticleCommand.FLOW_PROGRESS ||
+            command.name === ReticleCommand.PLAN ||
             command.name === ReticleCommand.IMPACT) {
             if (this.#presenter === undefined) {
                 this.#pendingPushes.set(command.name, command);
@@ -411,6 +498,8 @@ export class Reticle {
         }
         this.#presenter?.sessionStart();
         await this.#presentBefore(command);
+        setPresenterViewer(CommandActor.HARNESS === command.by);
+        setOutwardPolicy(command.outward?.allowed);
         try {
             const result = await handler(command.args);
             this.#actHandle?.result(LOG_RESULT.PASS);
@@ -421,6 +510,8 @@ export class Reticle {
             return { ok: false, error: error instanceof Error ? error.message : String(error) };
         }
         finally {
+            setPresenterViewer(false);
+            setOutwardPolicy(undefined);
             this.#actHandle = undefined;
             this.#presenter?.scheduleIdle();
         }
@@ -431,10 +522,11 @@ export class Reticle {
             return;
         p.setMode(modeForCommand(command.name));
         this.#actHandle = undefined;
+        const actor = CommandActor.HARNESS === command.by ? LOG_ACTOR.HARNESS : LOG_ACTOR.AGENT;
         if (command.name === ReticleCommand.ACT) {
             const ref = str(command.args['ref']);
             const label = refLabel(ref);
-            this.#actHandle = p.log(LOG_KIND.ACT, `${actionVerb(str(command.args['action']))} ${label}`);
+            this.#actHandle = p.log(LOG_KIND.ACT, `${actionVerb(str(command.args['action']))} ${label}`, undefined, actor);
             await p.beforeAct(ref, str(command.args['action']), label);
         }
         else if (command.name === ReticleCommand.ACT_SEQUENCE) {
@@ -443,14 +535,20 @@ export class Reticle {
                 const s = step;
                 const ref = str(s.ref);
                 const label = refLabel(ref);
-                this.#actHandle = p.log(LOG_KIND.ACT, `${actionVerb(str(s.action))} ${label}`);
+                this.#actHandle = p.log(LOG_KIND.ACT, `${actionVerb(str(s.action))} ${label}`, undefined, actor);
                 await p.beforeAct(ref, str(s.action), label);
             }
         }
         else {
             const label = presentStatus(command.name, command.args);
             p.status(label);
-            p.log(LOG_KIND.READ, label);
+            p.log(LOG_KIND.READ, label, undefined, actor);
         }
     }
 }
+function narrationActor(args) {
+    return CommandActor.HARNESS === args['actor'] ? LOG_ACTOR.HARNESS : LOG_ACTOR.AGENT;
+}
+function oneOf(values, raw) {
+    return Object.values(values).includes(raw) ? raw : undefined;
+}

package/dist/review/annotator-styles.d.ts

@@ -3,4 +3,4 @@ export declare const MARK_SUBMIT = "Add";
 export declare const MARK_CANCEL = "Cancel";
 export declare const MARK_PENDING_GLYPH = "+";
 export declare const ANNOTATOR_CSS: string;
-export declare const ANNOTATOR_ROOT_HTML = "<div data-reticle-mark=\"hi\"><span data-reticle-mark=\"hilabel\"></span></div><div data-reticle-mark=\"sel\" hidden></div>";
+export declare const ANNOTATOR_ROOT_HTML: string;

package/dist/review/annotator.d.ts

@@ -1,4 +1,5 @@
 import { EventType } from '@reticlehq/core';
+import type { MarkForAgent } from './marks-for-agent.js';
 interface MarkReport {
     note: string;
     anchor: string;
@@ -19,12 +20,18 @@ export interface AnnotatorChrome {
     copyRow?: HTMLElement;
     countEl?: HTMLElement;
     onCount?: (count: number) => void;
+    onMarksChange?: (marks: readonly AnnotationItem[]) => void;
+}
+export interface AnnotationItem extends MarkForAgent {
+    id: string;
+    createdAt: number;
 }
 export declare class Annotator {
     #private;
     constructor(deps: AnnotatorDeps);
     get active(): boolean;
     get markCount(): number;
+    annotations(): AnnotationItem[];
     mount(): void;
     setAccent(hex: string): void;
     attachChrome(chrome: AnnotatorChrome): void;

package/dist/review/annotator.js

@@ -1,3 +1,4 @@
+import { readTestId } from '../dom/addressing/testid-attr.js';
 import { isSyntheticInput } from '../actions/synthetic/synthetic-input.js';
 import { EventType } from '@reticlehq/core';
 import { isReticleUi, isReticleOverlay } from '../dom/dom-ignore.js';
@@ -36,6 +37,7 @@ export class Annotator {
     #clearBtn;
     #copyRow;
     #onChromeCount;
+    #onMarksChange;
     #countEl;
     #accent;
     #ac;
@@ -53,6 +55,17 @@ export class Annotator {
     get markCount() {
         return this.#marks.length;
     }
+    annotations() {
+        return this.#marks.map(({ id, createdAt, note, label, anchor, route, source }) => ({
+            id,
+            createdAt,
+            note,
+            label,
+            anchor,
+            route,
+            ...(source === undefined ? {} : { source }),
+        }));
+    }
     mount() {
         if (this.#root !== undefined || 'undefined' === typeof document)
             return;
@@ -99,6 +112,7 @@ export class Annotator {
         this.#clearBtn = chrome.clearBtn;
         this.#copyRow = chrome.copyRow;
         this.#onChromeCount = chrome.onCount;
+        this.#onMarksChange = chrome.onMarksChange;
         this.#countEl = chrome.countEl;
         this.#markersBtn?.addEventListener('click', (e) => {
             e.stopPropagation();
@@ -184,6 +198,7 @@ export class Annotator {
         }
         this.#clearBtn?.toggleAttribute('disabled', 0 === n);
         this.#onChromeCount?.(n);
+        this.#onMarksChange?.(this.annotations());
         if (this.#copyRow !== undefined) {
             this.#copyRow.hidden = 0 === n;
             const text = this.#copyRow.querySelector('[data-reticle-marks-text]');
@@ -406,6 +421,7 @@ export class Annotator {
                 route: editing.route,
             });
             this.#report(note, editing.anchor, editing.label, this.#marks.indexOf(editing) + 1, editing.source);
+            this.#syncChrome();
             this.#closePopover();
             return;
         }
@@ -480,8 +496,10 @@ export class Annotator {
         pin.style.left = `${String((x / window.innerWidth) * 100)}%`;
         pin.style.top = `${String(isFixed ? y : yDoc - window.scrollY)}px`;
         this.#root.appendChild(pin);
+        const createdAt = this.#now();
         const mark = {
-            id: `${resolved.anchor}:${String(this.#now())}:${String(n)}`,
+            id: `${resolved.anchor}:${String(createdAt)}:${String(n)}`,
+            createdAt,
             note,
             label: resolved.label,
             anchor: resolved.anchor,
@@ -593,7 +611,7 @@ function clampPop(x, y) {
     return { left, top };
 }
 function describeEl(el) {
-    const testid = el.getAttribute('data-testid');
+    const testid = readTestId(el);
     if (testid !== null && testid.length > 0)
         return testid;
     const tag = el.tagName.toLowerCase();

package/dist/review/mark-anchor.js

@@ -1,9 +1,9 @@
+import { readTestId } from '../dom/addressing/testid-attr.js';
 import { MarkAnchorStrategy } from '@reticlehq/core';
 import { AnchorStrategy, synthesizeAnchor, } from '../dom/addressing/auto-anchor.js';
 import { getAccessibleName, getRole } from '../dom/a11y.js';
 import { identifyComponent } from '../registry/stores/adapters.js';
 import { sourceFor } from '../dom/addressing/source.js';
-const TESTID_ATTR = 'data-testid';
 const STRATEGY = {
     [AnchorStrategy.TESTID]: MarkAnchorStrategy.TESTID,
     [AnchorStrategy.COMPONENT]: MarkAnchorStrategy.COMPONENT,
@@ -16,7 +16,7 @@ function labelFor(el, role, name) {
     return role.length > 0 ? role : el.tagName.toLowerCase();
 }
 export function resolveMarkAnchor(el) {
-    const testid = el.getAttribute(TESTID_ATTR) ?? undefined;
+    const testid = readTestId(el) ?? undefined;
     const info = identifyComponent(el);
     const component = info?.componentStack[0];
     const source = sourceFor(el, info?.source);

package/dist/session-continuity.js

@@ -1,4 +1,5 @@
-const STORAGE_KEY = '__reticle_session';
+import { ReticleStorageKey } from './storage-keys.js';
+const STORAGE_KEY = ReticleStorageKey.SESSION;
 export function rememberSessionLabel(explicit, store, generate) {
     const read = () => {
         try {

package/dist/storage-keys.d.ts

@@ -0,0 +1,15 @@
+export declare const ReticleStorageKey: {
+    readonly SESSION: "__reticle_session";
+    readonly REF_BASE: "__reticle_ref_base";
+    readonly PRESENTER_LOG: "reticle-presenter-log";
+    readonly PRESENTER_LOG_OWNER: "reticle-presenter-log-owner";
+    readonly PRESENTER_SETTINGS: "reticle-presenter-settings";
+    readonly PRESENTER_MINIMISED: "reticle-presenter-minimised";
+    readonly PRESENTER_VIEW: "reticle-presenter-view";
+    readonly CAROUSEL_DISMISSED: "reticle.carousel.dismissed";
+    readonly ANNOTATION_HISTORY: "reticle.annotations.history.v1";
+};
+export declare const TOUR_SEEN_KEY_PREFIX = "reticle.tour.seen.";
+export declare const PERSONA_KEY_PREFIX = "reticle.harness.persona.";
+export declare const IMPACT_SEEN_KEY_PREFIX = "reticle.impact.seen.";
+export declare function isReticleStorageKey(key: string): boolean;

package/dist/storage-keys.js

@@ -0,0 +1,21 @@
+export const ReticleStorageKey = {
+    SESSION: '__reticle_session',
+    REF_BASE: '__reticle_ref_base',
+    PRESENTER_LOG: 'reticle-presenter-log',
+    PRESENTER_LOG_OWNER: 'reticle-presenter-log-owner',
+    PRESENTER_SETTINGS: 'reticle-presenter-settings',
+    PRESENTER_MINIMISED: 'reticle-presenter-minimised',
+    PRESENTER_VIEW: 'reticle-presenter-view',
+    CAROUSEL_DISMISSED: 'reticle.carousel.dismissed',
+    ANNOTATION_HISTORY: 'reticle.annotations.history.v1',
+};
+export const TOUR_SEEN_KEY_PREFIX = 'reticle.tour.seen.';
+export const PERSONA_KEY_PREFIX = 'reticle.harness.persona.';
+export const IMPACT_SEEN_KEY_PREFIX = 'reticle.impact.seen.';
+const OWN_KEYS = new Set(Object.values(ReticleStorageKey));
+export function isReticleStorageKey(key) {
+    return (OWN_KEYS.has(key) ||
+        key.startsWith(TOUR_SEEN_KEY_PREFIX) ||
+        key.startsWith(PERSONA_KEY_PREFIX) ||
+        key.startsWith(IMPACT_SEEN_KEY_PREFIX));
+}

package/dist/transport/transport.js

@@ -26,6 +26,7 @@ export class Transport {
     #signalQueue = [];
     #insertOrder = 0;
     #closed = false;
+    #refused = false;
     #disconnectedSince;
     #reconnectDelay = RECONNECT_DELAY_MS;
     #lost = false;
@@ -55,6 +56,7 @@ export class Transport {
         this.#reconnectDelay = RECONNECT_DELAY_MS;
         if (this.#ws !== undefined)
             return;
+        this.#refused = false;
         this.#open();
     }
     #open() {
@@ -92,9 +94,9 @@ export class Transport {
         ws.onclose = (event) => {
             this.#ws = undefined;
             if (event.code === WS_POLICY_VIOLATION) {
-                this.#closed = true;
+                this.#refused = true;
                 const reason = event.reason.length > 0 ? event.reason : 'policy violation';
-                nativeWarn(`[reticle] bridge refused the connection: ${reason} — not retrying.`);
+                nativeWarn(`[reticle] bridge refused the connection: ${reason} — not retrying until you come back to this tab.`);
                 this.#deps.onConnectionLost?.();
                 return;
             }
@@ -107,7 +109,7 @@ export class Transport {
         };
     }
     #scheduleReopen() {
-        if (this.#closed)
+        if (this.#closed || this.#refused)
             return;
         const delay = this.#reconnectDelay;
         this.#reconnectDelay = nextReconnectDelay(delay);

package/dist/transport/unreachable-message.d.ts

@@ -1,2 +1,2 @@
 export declare function unreachableMessage(url: string, attempts: number): string;
-export declare function unreachableStripText(url: string, attempts: number): string;
+export declare const UNREACHABLE_HEADLINE = "Can't reach Reticle from this page. Run reticle status to check, or reticle serve to start it.";

package/dist/transport/unreachable-message.js

@@ -5,9 +5,7 @@ export function unreachableMessage(url, attempts) {
         `that is not there from one it is not allowed to reach, so this is not evidence about the ` +
         `daemon. What answers it: run \`npx @reticlehq/server status\` to see whether one is listening ` +
         `and on which port. If your app runs in a container, devcontainer or WSL, the daemon is on a ` +
-        `different host, so set the URL explicitly (Vite: VITE_RETICLE_WS_URL, or ` +
-        `reticle.connect({ url })). An https page cannot open a ws:// socket at all. Still retrying…`);
-}
-export function unreachableStripText(url, attempts) {
-    return `no bridge at ${url} — ${String(attempts)} attempt${1 === attempts ? '' : 's'}`;
+        `different host, so point the page at it: RETICLE_PORT or reticle({ port }) with the Vite ` +
+        `plugin, reticle.connect({ url }) by hand. An https page cannot open a ws:// socket. Still retrying…`);
 }
+export const UNREACHABLE_HEADLINE = "Can't reach Reticle from this page. Run reticle status to check, or reticle serve to start it.";

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@reticlehq/browser",
-  "version": "3.5.0",
+  "version": "3.7.0",
   "description": "Reticle browser SDK — installs observers, builds semantic snapshots, executes actions, talks to the bridge.",
   "type": "module",
   "main": "./dist/index.js",
+  "module": "./dist/reticle-inject.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
@@ -17,7 +18,7 @@
     }
   },
   "dependencies": {
-    "@reticlehq/core": "3.5.0"
+    "@reticlehq/core": "3.7.0"
   },
   "devDependencies": {
     "@iconify-json/heroicons-outline": "^1.2.1",

package/dist/presenter/carousel/offer-card.d.ts

@@ -1,21 +0,0 @@
-export declare const OFFER_ATTR = "data-reticle-offer";
-export declare const OFFER_CLAIM_ATTR = "data-reticle-offer-claim";
-export declare const OFFER_DISMISSED_KEY = "reticle.harnessOffer.dismissed";
-export declare const OFFER_TEXT: {
-    readonly HEADLINE: "Get Harness free for 3 months";
-    readonly BODY: "Explores your app and saves every journey as a free replay.";
-    readonly CLAIM: "Claim now";
-    readonly DISMISS: "Not now";
-    readonly claimed: (days: number) => string;
-    readonly ending: (days: number) => string;
-};
-export declare function offerDismissed(storage: Pick<Storage, 'getItem'> | undefined): boolean;
-export interface OfferState {
-    claimed: boolean;
-    daysRemaining?: number | undefined;
-    claimUrl?: string | undefined;
-    eligible?: boolean | undefined;
-    drivable?: boolean | undefined;
-}
-export declare function offerHtml(offer: OfferState | undefined, dismissed: boolean): string;
-export declare const OFFER_CSS = "\n.reticle-offer{margin:8px 10px;padding:10px 12px;border:1px solid var(--reticle-line,#2a2f3a);border-radius:10px;background:var(--reticle-surface-inset,rgba(255,255,255,.03));}\n.reticle-offer-title{display:block;font-weight:600;font-size:12px;padding-right:18px;}\n.reticle-offer-body{margin:6px 0 8px;font-size:11px;line-height:1.45;opacity:.8;}\n.reticle-offer-claim{display:inline-block;font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;background:var(--reticle-accent,#4f7cff);color:#fff;text-decoration:none;}\n.reticle-offer-claimed{margin:6px 10px;font-size:10px;opacity:.6;}\n";

package/dist/presenter/carousel/offer-card.js

@@ -1,55 +0,0 @@
-export const OFFER_ATTR = 'data-reticle-offer';
-export const OFFER_CLAIM_ATTR = 'data-reticle-offer-claim';
-export const OFFER_DISMISSED_KEY = 'reticle.harnessOffer.dismissed';
-export const OFFER_TEXT = {
-    HEADLINE: 'Get Harness free for 3 months',
-    BODY: 'Explores your app and saves every journey as a free replay.',
-    CLAIM: 'Claim now',
-    DISMISS: 'Not now',
-    claimed: (days) => `Harness active — ${String(days)} days left`,
-    ending: (days) => 1 >= days
-        ? 'Harness free period ends today'
-        : `Harness free period ends in ${String(days)} days`,
-};
-const ENDING_SOON_DAYS = 14;
-export function offerDismissed(storage) {
-    try {
-        return '1' === storage?.getItem(OFFER_DISMISSED_KEY);
-    }
-    catch {
-        return false;
-    }
-}
-const escape = (text) => text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-export function offerHtml(offer, dismissed) {
-    if (offer === undefined)
-        return '';
-    if (offer.claimed) {
-        const days = offer.daysRemaining;
-        if (days === undefined || 0 > days)
-            return '';
-        const text = ENDING_SOON_DAYS >= days ? OFFER_TEXT.ending(days) : OFFER_TEXT.claimed(days);
-        return `<div ${OFFER_ATTR} class="reticle-offer reticle-offer-claimed">${escape(text)}</div>`;
-    }
-    if (false === offer.eligible)
-        return '';
-    if (false === offer.drivable)
-        return '';
-    if (dismissed)
-        return '';
-    const url = offer.claimUrl;
-    if (url === undefined || 0 === url.length)
-        return '';
-    return `<div ${OFFER_ATTR} class="reticle-offer" role="note">
-      <span class="reticle-offer-title">${escape(OFFER_TEXT.HEADLINE)}</span>
-      <p class="reticle-offer-body">${escape(OFFER_TEXT.BODY)}</p>
-      <a ${OFFER_CLAIM_ATTR} class="reticle-offer-claim" href="${escape(url)}" target="_blank" rel="noopener noreferrer">${escape(OFFER_TEXT.CLAIM)}</a>
-    </div>`;
-}
-export const OFFER_CSS = `
-.reticle-offer{margin:8px 10px;padding:10px 12px;border:1px solid var(--reticle-line,#2a2f3a);border-radius:10px;background:var(--reticle-surface-inset,rgba(255,255,255,.03));}
-.reticle-offer-title{display:block;font-weight:600;font-size:12px;padding-right:18px;}
-.reticle-offer-body{margin:6px 0 8px;font-size:11px;line-height:1.45;opacity:.8;}
-.reticle-offer-claim{display:inline-block;font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;background:var(--reticle-accent,#4f7cff);color:#fff;text-decoration:none;}
-.reticle-offer-claimed{margin:6px 10px;font-size:10px;opacity:.6;}
-`;