@reticlehq/browser 2.10.0 → 2.11.0

package/dist/observers/network.js

@@ -256,6 +256,7 @@ export function installNetwork(emit, opts = {}) {
             const contentType = res.headers.get('content-type');
             // The request is done; the BODY may not be. Watch it so settle cannot pass mid-stream.
             watchStreamedBody(emit, res, id, url, contentType, res.headers.get('content-length'));
+            reportedNetUrls.add(rawUrl);
             const emitRequest = (responseBodyFields) => {
                 emit(EventType.NET_REQUEST, {
                     id,
@@ -385,6 +386,7 @@ export function installNetwork(emit, opts = {}) {
                     const cur = meta.get(this);
                     if (cur === undefined)
                         return;
+                    reportedNetUrls.add(cur.rawUrl);
                     const xhrContentType = this.getResponseHeader('content-type');
                     let responseBodyFields = {};
                     // responseText throws unless responseType is '' or 'text' — guard before reading.
@@ -523,7 +525,64 @@ export function installNetwork(emit, opts = {}) {
         };
         navProto.sendBeacon = patchedBeacon;
     }
+    // Document-initiated subresources (link/css/img/script/manifest): fetch and XHR patches never see
+    // these, so a `{net}` predicate over a favicon or manifest used to read `assertion_failed` — "your
+    // change is broken" — when the truthful answer is "not observable". A PerformanceObserver over
+    // `resource` entries reports them with no CDP. Status is the known gap: entries carry one only on
+    // newer Chromium, so the field is emitted ONLY when readable and the evaluation seam downgrades
+    // status assertions it cannot verify instead of guessing.
+    //
+    // Dedup: any URL the patched transports already reported (or later report) is skipped — resource
+    // timing also records fetch/XHR loads. The seen-set is filled eagerly here AND at every
+    // NET_REQUEST emit below, so both orders of arrival stay single-reported.
+    const reportedNetUrls = new Set();
+    let subresourceEvents = 0;
+    const SUBRESOURCE_CAP = 200;
+    let subresourceObserver;
+    if (typeof PerformanceObserver !== 'undefined') {
+        try {
+            const observer = new PerformanceObserver((list) => {
+                for (const raw of list.getEntries()) {
+                    const entry = raw;
+                    if (subresourceEvents >= SUBRESOURCE_CAP)
+                        return;
+                    const type = entry.initiatorType || 'other';
+                    // Patched transports own their records; only document-initiated types are new here.
+                    if ('fetch' === type || 'xmlhttprequest' === type)
+                        continue;
+                    const rawUrl = entry.name;
+                    if (reportedNetUrls.has(rawUrl))
+                        continue;
+                    reportedNetUrls.add(rawUrl);
+                    subresourceEvents += 1;
+                    emit(EventType.NET_REQUEST, {
+                        id: nextId(),
+                        method: 'GET',
+                        url: redactUrl(rawUrl),
+                        durationMs: Math.round(entry.duration),
+                        initiator: type,
+                        ...(entry.transferSize > 0 ? { transferSize: entry.transferSize } : {}),
+                        // responseStatus is Chromium-only; omitted entirely when unreadable so the wire never
+                        // carries a guessed status. Its absence is what the server-side seam reads as unknown.
+                        ...((entry.responseStatus ?? 0) > 0
+                            ? {
+                                status: entry.responseStatus,
+                                ok: (entry.responseStatus ?? 0) >= 200 && (entry.responseStatus ?? 0) < 400,
+                            }
+                            : {}),
+                    });
+                }
+            });
+            subresourceObserver = observer;
+            observer.observe({ type: 'resource', buffered: true });
+            // Disconnected in the disposer below.
+        }
+        catch {
+            // No observer support: document-initiated loads stay unobserved, stated rather than guessed.
+        }
+    }
     return () => {
+        subresourceObserver?.disconnect();
         // Restore each slot ONLY if it still holds OUR wrapper. Between connect() and disconnect() the app
         // (or Sentry/analytics/a router) may have wrapped fetch/XHR/EventSource/WebSocket/sendBeacon ON TOP
         // of ours; blindly writing the original back would silently uninstall their instrumentation — the

package/dist/observers/subresources.d.ts

@@ -0,0 +1,10 @@
+export interface SubresourceObservation {
+    url: string;
+    method: string;
+    status?: number;
+    ok?: boolean;
+    durationMs: number;
+    transferSize?: number;
+    initiatorType: string;
+}
+export declare function collectSubresources(seenUrls: ReadonlySet<string>, nowMs: number, sinceMs: number): SubresourceObservation[];

package/dist/observers/subresources.js

@@ -0,0 +1,63 @@
+import { redactUrl } from './network-redact.js';
+/**
+ * Document-initiated subresource observation.
+ *
+ * fetch/XHR patches never see requests the DOCUMENT makes on its own: `<link rel=icon>`,
+ * `<link rel=manifest>`, stylesheets, `<img src>`, `<script src>`. Those are exactly the loads a
+ * branding change touches, so a `{net}` predicate over them used to return `assertion_failed`
+ * ("your change is broken") when the truthful answer was "not observable" — and an agent trusting
+ * that verdict goes and "fixes" working code.
+ *
+ * `performance.getEntriesByType('resource')` reports these with no CDP and no patching: URL (name),
+ * initiator type (`link`, `css`, `img`, `script`, …), duration, transfer size. The known limitation
+ * is the status code — resource timing does not expose one directly (`responseStatus` exists only
+ * in newer Chromium). Entries carry `status` ONLY when it could be read; predicates asserting a
+ * status over unreadable data are handled at the evaluation seam, which downgrades rather than
+ * guesses.
+ *
+ * Deduplication matters: a fetch/XHR-initiated request ALSO lands in resource timing. Every entry
+ * is checked against the URLs the patched transports already reported this page, and only genuinely
+ * document-initiated loads survive.
+ */
+/** Resource-timing initiator types that mean "the document itself asked", not a patched transport. */
+const DOCUMENT_INITIATORS = new Set(['link', 'css', 'img', 'script', 'manifest', 'other']);
+/** Cap per call — a pathological page must not blow the event budget. */
+const MAX_SUBRESOURCE_EVENTS = 200;
+export function collectSubresources(seenUrls, nowMs, sinceMs) {
+    const out = [];
+    try {
+        const entries = performance.getEntriesByType('resource');
+        for (const entry of entries) {
+            const initiatorType = entry.initiatorType || 'other';
+            // fetch/XHR already have richer records from their own patches.
+            if (!DOCUMENT_INITIATORS.has(initiatorType))
+                continue;
+            const raw = entry.name;
+            if (seenUrls.has(raw))
+                continue;
+            const startMs = nowMs - entry.duration;
+            if (startMs < sinceMs)
+                continue;
+            const obs = {
+                url: redactUrl(raw),
+                method: 'GET',
+                durationMs: Math.round(entry.duration),
+                initiatorType,
+                ...(entry.transferSize > 0 ? { transferSize: entry.transferSize } : {}),
+            };
+            // responseStatus is Chromium-only and may be 0 when unreadable. Present ONLY when it says
+            // something real, so the wire never carries a guessed status.
+            const rs = entry.responseStatus;
+            if ('number' === typeof rs && rs > 0) {
+                obs.status = rs;
+                obs.ok = rs >= 200 && rs < 400;
+            }
+            out.push(obs);
+        }
+    }
+    catch {
+        // No resource-timing support / security error: report nothing, honestly.
+        return [];
+    }
+    return out.slice(0, MAX_SUBRESOURCE_EVENTS);
+}

package/dist/presenter/presenter-controls.js

@@ -223,6 +223,14 @@ export class ControlPanel {
     /** The full replayable-flow list from the last push; re-filtered per page on route change. */
     #flowItems = [];
     #workspaceTeardown;
+    /**
+     * One signal for every listener this controller registers.
+     *
+     * All eight are anonymous closures over `this`, so there was no reference to hand
+     * `removeEventListener` and teardown removed none of them — each kept the controller reachable
+     * for as long as its element lived, and a second mount stacked another set on top.
+     */
+    #listeners;
     #host;
     constructor(host) {
         this.#host = host;
@@ -232,6 +240,8 @@ export class ControlPanel {
     }
     /** Query control refs out of the mounted root and bind the DOM listeners, then paint active. */
     mount(root, glow) {
+        this.#listeners = new AbortController();
+        const { signal } = this.#listeners;
         this.#root = root;
         this.#glow = glow;
         this.#refs = queryControlRefs(root);
@@ -239,17 +249,17 @@ export class ControlPanel {
         if (pauseBtn !== undefined) {
             paintPauseBtn(pauseBtn, this.#state === SessionState.PAUSED);
         }
-        this.#refs.pauseBtn?.addEventListener('click', () => this.#onPauseToggle());
-        this.#refs.endBtn?.addEventListener('click', () => this.#onEnd());
-        this.#refs.sendBtn?.addEventListener('click', () => this.#onSend());
+        this.#refs.pauseBtn?.addEventListener('click', () => this.#onPauseToggle(), { signal });
+        this.#refs.endBtn?.addEventListener('click', () => this.#onEnd(), { signal });
+        this.#refs.sendBtn?.addEventListener('click', () => this.#onSend(), { signal });
         this.#refs.input?.addEventListener('keydown', (e) => {
             // Enter sends; Shift+Enter inserts a newline (falls through to the textarea's default).
             if (e instanceof KeyboardEvent && 'Enter' === e.key && !e.shiftKey) {
                 e.preventDefault();
                 this.#onSend();
             }
-        });
-        this.#refs.input?.addEventListener('input', () => this.#autosize());
+        }, { signal });
+        this.#refs.input?.addEventListener('input', () => this.#autosize(), { signal });
         // Replay-a-flow: one ▶ click re-runs a saved flow (no agent). Delegated so it covers all chips.
         this.#refs.flows?.addEventListener('click', (e) => {
             const target = e.target;
@@ -259,9 +269,9 @@ export class ControlPanel {
             if (name !== null && name !== undefined && name.length > 0) {
                 this.#host.emit(HumanControlKind.REPLAY, name);
             }
-        });
-        this.#refs.copyBtn?.addEventListener('click', () => this.#onCopy());
-        this.#refs.exportBtn?.addEventListener('click', () => this.#onExport());
+        }, { signal });
+        this.#refs.copyBtn?.addEventListener('click', () => this.#onCopy(), { signal });
+        this.#refs.exportBtn?.addEventListener('click', () => this.#onExport(), { signal });
         this.#workspaceTeardown = mountWorkspaceSelector(root);
         this.setState(SessionState.ACTIVE);
     }
@@ -297,6 +307,9 @@ export class ControlPanel {
     }
     /** Clear any pending ended-fade timer (called from Presenter.destroy). */
     teardown() {
+        // All eight registrations, in one call that cannot drift from mount().
+        this.#listeners?.abort();
+        this.#listeners = undefined;
         this.#workspaceTeardown?.();
         this.#workspaceTeardown = undefined;
         if (this.#fadeTimer !== undefined)

package/dist/presenter/presenter-drag.js

@@ -68,8 +68,12 @@ export function installHudPositionGuards(hud, overlay) {
     const scheduleRelayout = () => {
         scheduleSyncDockLayout(hud, overlay);
     };
+    // One signal for all three listeners here. The observers below are NOT covered — neither
+    // ResizeObserver nor MutationObserver accepts one — so they keep their explicit disconnects.
+    const listeners = new AbortController();
+    const { signal } = listeners;
     const onResize = () => scheduleRelayout();
-    window.addEventListener('resize', onResize);
+    window.addEventListener('resize', onResize, { signal });
     let resizeObserver;
     if (typeof ResizeObserver !== 'undefined') {
         resizeObserver = new ResizeObserver(() => scheduleRelayout());
@@ -81,12 +85,10 @@ export function installHudPositionGuards(hud, overlay) {
         attributeFilter: [MIN_ATTR, CHAT_ATTR, SETTINGS_ATTR],
     });
     const onVisualViewportResize = () => scheduleRelayout();
-    window.visualViewport?.addEventListener('resize', onVisualViewportResize);
-    window.visualViewport?.addEventListener('scroll', onVisualViewportResize);
+    window.visualViewport?.addEventListener('resize', onVisualViewportResize, { signal });
+    window.visualViewport?.addEventListener('scroll', onVisualViewportResize, { signal });
     return () => {
-        window.removeEventListener('resize', onResize);
-        window.visualViewport?.removeEventListener('resize', onVisualViewportResize);
-        window.visualViewport?.removeEventListener('scroll', onVisualViewportResize);
+        listeners.abort();
         resizeObserver?.disconnect();
         minObserver.disconnect();
     };
@@ -171,15 +173,16 @@ export function installHudDrag(hud, head, callbacks = {}) {
         releaseCapture(e.pointerId);
         finishDrag();
     };
-    head.addEventListener('pointerdown', onPointerDown);
-    head.addEventListener('pointermove', onPointerMove);
-    head.addEventListener('pointerup', onPointerUp);
-    head.addEventListener('pointercancel', onPointerCancel);
+    // All four pointer phases share one signal: they are added together and must come off
+    // together, and a partial removal would leave a half-live drag.
+    const listeners = new AbortController();
+    const { signal } = listeners;
+    head.addEventListener('pointerdown', onPointerDown, { signal });
+    head.addEventListener('pointermove', onPointerMove, { signal });
+    head.addEventListener('pointerup', onPointerUp, { signal });
+    head.addEventListener('pointercancel', onPointerCancel, { signal });
     return () => {
-        head.removeEventListener('pointerdown', onPointerDown);
-        head.removeEventListener('pointermove', onPointerMove);
-        head.removeEventListener('pointerup', onPointerUp);
-        head.removeEventListener('pointercancel', onPointerCancel);
+        listeners.abort();
         if (dragging)
             releaseCapture(activePointerId ?? 0);
         finishDrag();

package/dist/presenter/presenter-shell.js

@@ -48,6 +48,15 @@ export class HudShell {
      */
     #annotateOn = false;
     #toggleSync;
+    /**
+     * One signal for every listener this shell registers, so teardown cannot drift from mount.
+     *
+     * The click handlers below are anonymous closures over `this`: there is no reference to hand to
+     * `removeEventListener`, so before this they were never removed at all. Mounting twice onto the
+     * same root therefore stacked a second set, and every handler kept the shell reachable for as
+     * long as its element lived.
+     */
+    #listeners;
     #report = new PresenterReport({
         onBeforeOpen: () => {
             // One panel at a time in the slot above the toolbar. The chat, the settings and the report
@@ -155,6 +164,8 @@ export class HudShell {
         this.#annotateBtn?.setAttribute('data-active', on ? '1' : '0');
     }
     mount(root) {
+        this.#listeners = new AbortController();
+        const { signal } = this.#listeners;
         this.#root = root;
         this.#dock = root.querySelector(`[${DOCK_ATTR}]`) ?? undefined;
         const fabEl = root.querySelector(`[${FAB_ATTR}]`);
@@ -170,19 +181,19 @@ export class HudShell {
             e.stopPropagation();
             this.setAnnotateOn(!this.#annotateOn);
             this.#callbacks.onAnnotateToggle?.(this.#annotateOn);
-        });
+        }, { signal });
         const pillEl = root.querySelector(`[${CHAT_PILL_ATTR}]`);
         pillEl?.addEventListener('click', (e) => {
             e.preventDefault();
             e.stopPropagation();
             this.showChat();
-        });
+        }, { signal });
         const chatMinEl = root.querySelector(`[${CHAT_MIN_ATTR}]`);
         chatMinEl?.addEventListener('click', (e) => {
             e.preventDefault();
             e.stopPropagation();
             this.closeChat();
-        });
+        }, { signal });
         const collapseEl = root.querySelector('[data-reticle-min-btn]');
         this.#collapseBtn = collapseEl instanceof HTMLButtonElement ? collapseEl : undefined;
         root.setAttribute(MIN_ATTR, '1');
@@ -204,7 +215,7 @@ export class HudShell {
             e.preventDefault();
             e.stopPropagation();
             this.#report.toggle();
-        });
+        }, { signal });
         this.#fab?.addEventListener('click', (e) => {
             e.stopPropagation();
             if (this.#suppressFabClick) {
@@ -212,15 +223,15 @@ export class HudShell {
                 return;
             }
             this.expand();
-        });
+        }, { signal });
         this.#collapseBtn?.addEventListener('click', (e) => {
             e.stopPropagation();
             this.collapse();
-        });
+        }, { signal });
         this.#chatToggle?.addEventListener('click', (e) => {
             e.stopPropagation();
             this.toggleChat();
-        });
+        }, { signal });
         const toolbarDrag = root.querySelector(`.${DRAG_HANDLE_CLASS}`);
         const dragHandles = [this.#fab, toolbarDrag].filter((el) => el instanceof HTMLElement);
         if (this.#dock !== undefined && dragHandles.length > 0) {
@@ -235,12 +246,19 @@ export class HudShell {
             });
             this.#layoutTeardown = installHudPositionGuards(this.#dock, root);
         }
-        document.addEventListener('pointerdown', this.#onDocPointerDown);
-        document.addEventListener('keydown', this.#onKeyDown);
+        document.addEventListener('pointerdown', this.#onDocPointerDown, { signal });
+        document.addEventListener('keydown', this.#onKeyDown, { signal });
     }
     teardown() {
-        document.removeEventListener('pointerdown', this.#onDocPointerDown);
-        document.removeEventListener('keydown', this.#onKeyDown);
+        // One call for all nine registrations. It cannot fall out of step with mount() the way a list
+        // of removeEventListener calls can, which is the whole point.
+        this.#listeners?.abort();
+        this.#listeners = undefined;
+        // NOT covered by the signal: a MutationObserver takes no `signal` option. This disconnect was
+        // missing entirely, so the observer kept `root` — and through it the shell — alive after
+        // teardown, and a re-mount left the previous one still firing.
+        this.#toggleSync?.disconnect();
+        this.#toggleSync = undefined;
         this.#dragTeardown?.();
         this.#dragTeardown = undefined;
         this.#layoutTeardown?.();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reticlehq/browser",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "description": "Reticle browser SDK — installs observers, builds semantic snapshots, executes actions, talks to the bridge.",
   "type": "module",
   "main": "./dist/index.js",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@testing-library/dom": "^10.4.1",
-    "@reticlehq/core": "2.10.0"
+    "@reticlehq/core": "2.11.0"
   },
   "devDependencies": {
     "@iconify-json/heroicons-outline": "^1.2.1",