@reticlehq/browser 3.7.0 → 3.8.1

package/dist/observers/network.js

@@ -1,42 +1,21 @@
-import { BlindSpotKind, EventType, NEXT_ACTION_FIELD, NEXT_ACTION_HEADER, REQUEST_SHAPE_FIELD, REQUEST_SHAPE_NONE, RETICLE_WS_PATH, StreamTransport, StreamDirection, fnv1a, } from '@reticlehq/core';
+import { BlindSpotKind, EventType, NEXT_ACTION_FIELD, NEXT_ACTION_HEADER, REQUEST_SHAPE_FIELD, REQUEST_SHAPE_NONE, ResponseBodyReason, StreamTransport, StreamDirection, fnv1a, } from '@reticlehq/core';
 import { captureMethod } from '../patching/capture-method.js';
 import { observeSafely, observeValue } from './types.js';
-import { isCapturableType, projectBody, projectErrorBody, shouldCaptureErrorBody, withBodyDeadline, } from './net-detail/network-body.js';
+import { isCapturableType, projectBody, projectErrorBody, shouldCaptureErrorBody, skippedBodyReason, } from './net-detail/network-body.js';
+import { captureResponseBody, isEventStream } from './net-detail/network-response-body.js';
 import { redactUrl, netUrlFields } from './net-detail/network-redact.js';
 import { watchStreamedBody } from './network-stream.js';
+import { frameFields, isBridgeSocket } from './net-detail/network-frames.js';
 import { requireCapturedMethod } from '../util/captured-method.js';
 export { redactUrl, netUrlFields };
-function binaryFrameBytes(data) {
-    if (data instanceof ArrayBuffer)
-        return data.byteLength;
-    if (typeof Blob !== 'undefined' && data instanceof Blob)
-        return data.size;
-    if (ArrayBuffer.isView(data))
-        return data.byteLength;
-    return undefined;
-}
-function frameFields(data, captureBodies) {
-    if (typeof data !== 'string') {
-        const bytes = binaryFrameBytes(data);
-        return bytes === undefined
-            ? { frameType: typeof data }
-            : { frameType: 'binary', frameBytes: bytes };
-    }
-    const out = { frameBytes: data.length };
-    if (captureBodies) {
-        const { body, truncated } = projectBody(data, 'application/json');
-        out['frame'] = body;
-        if (truncated)
-            out['frameTruncated'] = true;
-    }
-    return out;
-}
 const ShapeToken = { NULL: '0', STRING: 's', NUMBER: 'n', BOOLEAN: 'b', OTHER: '?' };
 function shapeOf(value) {
-    if (null === value)
+    if (null === value) {
         return ShapeToken.NULL;
-    if (Array.isArray(value))
+    }
+    if (Array.isArray(value)) {
         return `[${value.map(shapeOf).join(',')}]`;
+    }
     if ('object' === typeof value) {
         const fields = value;
         return `{${Object.keys(fields)
@@ -44,12 +23,15 @@ function shapeOf(value) {
             .map((key) => `${key}:${shapeOf(fields[key])}`)
             .join(',')}}`;
     }
-    if ('string' === typeof value)
+    if ('string' === typeof value) {
         return ShapeToken.STRING;
-    if ('number' === typeof value)
+    }
+    if ('number' === typeof value) {
         return ShapeToken.NUMBER;
-    if ('boolean' === typeof value)
+    }
+    if ('boolean' === typeof value) {
         return ShapeToken.BOOLEAN;
+    }
     return ShapeToken.OTHER;
 }
 function fingerprintBody(shape, length) {
@@ -72,8 +54,9 @@ const DELETE = 0x7f;
 function hasControlCharacter(text) {
     for (let i = 0; i < text.length; i += 1) {
         const code = text.charCodeAt(i);
-        if (code === DELETE)
+        if (code === DELETE) {
             return true;
+        }
         if (code < FIRST_PRINTABLE && code !== TAB && code !== LINE_FEED && code !== CARRIAGE_RETURN) {
             return true;
         }
@@ -81,10 +64,12 @@ function hasControlCharacter(text) {
     return false;
 }
 function textOfBytes(body) {
-    if (!(body instanceof ArrayBuffer || ArrayBuffer.isView(body)))
+    if (!(body instanceof ArrayBuffer || ArrayBuffer.isView(body))) {
         return undefined;
-    if (body.byteLength > MAX_DECODED_BODY_BYTES)
+    }
+    if (body.byteLength > MAX_DECODED_BODY_BYTES) {
         return undefined;
+    }
     try {
         const text = new TextDecoder('utf-8', { fatal: true }).decode(body);
         return hasControlCharacter(text) ? undefined : text;
@@ -97,8 +82,9 @@ function formShape(form) {
     const fields = [];
     let length = 0;
     form.forEach((value, name) => {
-        if ('string' === typeof value)
+        if ('string' === typeof value) {
             length += value.length;
+        }
         fields.push(JSON.stringify([name, 'string' === typeof value ? 0 : [value.type, value.size]]));
     });
     return 0 === fields.length ? undefined : fingerprintBody(fields.sort().join(), length);
@@ -111,8 +97,9 @@ function projectRequestBody(body, captureBodies) {
     const typeOf = () => body.constructor?.name ?? typeof body;
     if ('string' === typeof body || bytesText !== undefined) {
         text = bytesText ?? body;
-        if (text.length > 0)
+        if (text.length > 0) {
             shape = fingerprintBody(jsonShape(text), text.length);
+        }
     }
     else if (typeof FormData !== 'undefined' && body instanceof FormData) {
         const form = formShape(body);
@@ -133,8 +120,9 @@ function projectRequestBody(body, captureBodies) {
         return captureBodies ? { requestBodyType: typeOf() } : {};
     }
     const fields = { [REQUEST_SHAPE_FIELD]: shape };
-    if (!captureBodies || text === undefined || 0 === text.length)
+    if (!captureBodies || text === undefined || 0 === text.length) {
         return fields;
+    }
     const { body: out, truncated } = projectBody(text, contentType);
     return truncated
         ? { ...fields, requestBody: out, requestBodyTruncated: true }
@@ -145,27 +133,34 @@ function statusIsOk(status) {
 }
 function netResponseMeta(statusText, contentType, contentLength) {
     const out = {};
-    if (statusText !== '')
+    if (statusText !== '') {
         out['statusText'] = statusText;
-    if (contentType !== null && contentType !== '')
+    }
+    if (contentType !== null && contentType !== '') {
         out['contentType'] = contentType;
+    }
     const size = contentLength !== null ? Number.parseInt(contentLength, 10) : Number.NaN;
-    if (Number.isFinite(size))
+    if (Number.isFinite(size)) {
         out['responseSize'] = size;
+    }
     return out;
 }
 function urlOf(input) {
-    if ('string' === typeof input)
+    if ('string' === typeof input) {
         return input;
-    if (input instanceof URL)
+    }
+    if (input instanceof URL) {
         return input.href;
+    }
     return input.url;
 }
 function methodOf(input, init) {
-    if (init?.method !== undefined)
+    if (init?.method !== undefined) {
         return init.method.toUpperCase();
-    if (input instanceof Request)
+    }
+    if (input instanceof Request) {
         return input.method.toUpperCase();
+    }
     return 'GET';
 }
 function nextActionOf(input, init) {
@@ -180,8 +175,9 @@ function nextActionOf(input, init) {
 const NON_APP_FRAME = /@reticlehq|reticle\.ts|network\.ts|transport\.ts|<anonymous>|new Promise|node:internal/i;
 const DEPENDENCY_FRAME = /node_modules|\/\.vite\/deps\//i;
 export function firstAppFrame(stack) {
-    if (stack === undefined)
+    if (stack === undefined) {
         return undefined;
+    }
     const frames = stack
         .split('\n')
         .slice(1)
@@ -194,14 +190,16 @@ function initiatorFrame() {
     return firstAppFrame(new Error().stack);
 }
 export function extractTiming(entry) {
-    if (entry === undefined)
+    if (entry === undefined) {
         return {};
+    }
     const timing = {};
     if (entry.responseStart > 0 && entry.requestStart > 0) {
         timing.ttfbMs = Math.round(entry.responseStart - entry.requestStart);
     }
-    if (entry.transferSize > 0)
+    if (entry.transferSize > 0) {
         timing.transferSize = entry.transferSize;
+    }
     return timing;
 }
 function resourceTiming(rawUrl) {
@@ -213,14 +211,6 @@ function resourceTiming(rawUrl) {
         return {};
     }
 }
-function isBridgeSocket(url) {
-    try {
-        return new URL(url, location.href).pathname === RETICLE_WS_PATH;
-    }
-    catch {
-        return url.includes(RETICLE_WS_PATH);
-    }
-}
 function isNativeFetch(fn) {
     try {
         return Function.prototype.toString.call(fn).includes('native code');
@@ -230,8 +220,16 @@ function isNativeFetch(fn) {
     }
 }
 const OURS = new WeakSet();
+const PAGE_CAPTURE = Symbol.for('reticle.network');
+const pageSlots = () => window;
 export function installNetwork(emit, opts = {}) {
+    if (undefined !== pageSlots()[PAGE_CAPTURE]) {
+        return () => undefined;
+    }
+    const owner = {};
+    pageSlots()[PAGE_CAPTURE] = owner;
     const captureBodies = true === opts.captureBodies;
+    const bodyCapture = new AbortController();
     const captureErrorBodies = false !== opts.captureErrorBodies;
     const reinterpret = opts.reinterpret;
     const origFetch = requireCapturedMethod(window, 'fetch');
@@ -243,8 +241,9 @@ export function installNetwork(emit, opts = {}) {
     const nextId = () => `n${++seq}`;
     window.fetch = async (input, init) => {
         const rawUrl = urlOf(input);
-        if (true === opts.ignore?.(rawUrl))
+        if (true === opts.ignore?.(rawUrl)) {
             return callFetch(input, init);
+        }
         const id = nextId();
         const start = performance.now();
         const method = methodOf(input, init);
@@ -293,41 +292,30 @@ export function installNetwork(emit, opts = {}) {
                 });
             };
             const wantErrorBody = shouldCaptureErrorBody(res.status, captureErrorBodies);
-            if ((captureBodies || wantErrorBody) && isCapturableType(contentType)) {
-                let clone;
-                try {
-                    clone = res.clone();
-                }
-                catch {
-                }
-                void (async () => {
-                    let responseBodyFields = {};
-                    if (clone !== undefined) {
-                        try {
-                            const text = await withBodyDeadline(clone.text());
-                            if (text !== undefined) {
-                                const { body, truncated } = captureBodies
-                                    ? projectBody(text, contentType)
-                                    : projectErrorBody(text, contentType);
-                                responseBodyFields = {
-                                    responseBody: body,
-                                    ...(truncated ? { responseBodyTruncated: true } : {}),
-                                    ...(captureBodies ? {} : { responseBodyReason: 'error-status' }),
-                                };
-                            }
-                        }
-                        catch {
-                        }
-                    }
-                    try {
-                        emitRequest(responseBodyFields);
-                    }
-                    catch {
+            if (captureBodies && isEventStream(contentType)) {
+                emitRequest({ responseBodyReason: ResponseBodyReason.UNREADABLE });
+                void captureResponseBody(res, contentType, true, bodyCapture.signal)
+                    .then((fields) => {
+                    if (typeof fields['responseBody'] !== 'string') {
+                        return;
                     }
-                })().catch(() => undefined);
+                    observeSafely(() => emit(EventType.NET_RESPONSE_BODY, {
+                        id,
+                        method,
+                        ...urlFields,
+                        ...fields,
+                    }));
+                })
+                    .catch(() => undefined);
+            }
+            else if ((captureBodies || wantErrorBody) && isCapturableType(contentType)) {
+                void captureResponseBody(res, contentType, captureBodies, bodyCapture.signal)
+                    .then(emitRequest)
+                    .catch(() => undefined);
             }
             else {
-                emitRequest({});
+                const skipped = captureBodies ? skippedBodyReason(contentType) : undefined;
+                emitRequest(skipped === undefined ? {} : { responseBodyReason: skipped });
             }
             return res;
         }
@@ -390,16 +378,25 @@ export function installNetwork(emit, opts = {}) {
                     this.addEventListener('loadend', () => {
                         observeSafely(() => {
                             const cur = meta.get(this);
-                            if (cur === undefined)
+                            if (cur === undefined) {
                                 return;
+                            }
                             reportedNetUrls.add(cur.rawUrl);
                             const xhrContentType = this.getResponseHeader('content-type');
                             let responseBodyFields = {};
                             const textReadable = '' === this.responseType || 'text' === this.responseType;
                             const wantXhrErrorBody = shouldCaptureErrorBody(this.status, captureErrorBodies);
-                            if ((captureBodies || wantXhrErrorBody) &&
-                                textReadable &&
-                                isCapturableType(xhrContentType)) {
+                            const capturable = isCapturableType(xhrContentType) ||
+                                (captureBodies && isEventStream(xhrContentType));
+                            if (captureBodies) {
+                                const skipped = capturable
+                                    ? ResponseBodyReason.UNREADABLE
+                                    : skippedBodyReason(xhrContentType);
+                                if (skipped !== undefined) {
+                                    responseBodyFields = { responseBodyReason: skipped };
+                                }
+                            }
+                            if ((captureBodies || wantXhrErrorBody) && textReadable && capturable) {
                                 try {
                                     const { body: rb, truncated } = captureBodies
                                         ? projectBody(this.responseText, xhrContentType)
@@ -407,7 +404,9 @@ export function installNetwork(emit, opts = {}) {
                                     responseBodyFields = {
                                         responseBody: rb,
                                         ...(truncated ? { responseBodyTruncated: true } : {}),
-                                        ...(captureBodies ? {} : { responseBodyReason: 'error-status' }),
+                                        ...(captureBodies
+                                            ? {}
+                                            : { responseBodyReason: ResponseBodyReason.ERROR_STATUS }),
                                     };
                                 }
                                 catch {
@@ -471,8 +470,9 @@ export function installNetwork(emit, opts = {}) {
             constructor(u, protocols) {
                 super(u, protocols);
                 this.#isBridge = isBridgeSocket(String(u));
-                if (this.#isBridge)
+                if (this.#isBridge) {
                     return;
+                }
                 observeSafely(() => {
                     const urlFields = netUrlFields(String(u));
                     emit(EventType.NET_STREAM, {
@@ -546,14 +546,17 @@ export function installNetwork(emit, opts = {}) {
             const observer = new PerformanceObserver((list) => {
                 for (const raw of list.getEntries()) {
                     const entry = raw;
-                    if (subresourceEvents >= SUBRESOURCE_CAP)
+                    if (subresourceEvents >= SUBRESOURCE_CAP) {
                         return;
+                    }
                     const type = entry.initiatorType || 'other';
-                    if ('fetch' === type || 'xmlhttprequest' === type)
+                    if ('fetch' === type || 'xmlhttprequest' === type) {
                         continue;
+                    }
                     const rawUrl = entry.name;
-                    if (reportedNetUrls.has(rawUrl))
+                    if (reportedNetUrls.has(rawUrl)) {
                         continue;
+                    }
                     reportedNetUrls.add(rawUrl);
                     subresourceEvents += 1;
                     emit(EventType.NET_REQUEST, {
@@ -579,13 +582,20 @@ export function installNetwork(emit, opts = {}) {
         }
     }
     return () => {
+        if (pageSlots()[PAGE_CAPTURE] === owner) {
+            delete pageSlots()[PAGE_CAPTURE];
+        }
+        bodyCapture.abort();
         subresourceObserver?.disconnect();
-        if (window.fetch === patchedFetch)
+        if (window.fetch === patchedFetch) {
             window.fetch = origFetch;
-        if (captureMethod(proto, 'open') === patchedOpen)
+        }
+        if (captureMethod(proto, 'open') === patchedOpen) {
             proto.open = origOpen;
-        if (captureMethod(proto, 'send') === patchedSend)
+        }
+        if (captureMethod(proto, 'send') === patchedSend) {
             proto.send = origSend;
+        }
         if (patchedEventSource !== undefined && window.EventSource === patchedEventSource) {
             window.EventSource = origEventSource;
         }

package/dist/observers/route.d.ts

@@ -1,2 +1,4 @@
 import { type Emit, type Teardown } from './types.js';
+export declare function declareRoutes(patterns: readonly string[]): void;
+export declare function patternOf(pathname: string): string | undefined;
 export declare function installRoute(emit: Emit): Teardown;

package/dist/observers/route.js

@@ -1,6 +1,7 @@
 import { EventType, ROUTE_CHANGE_HOW_FIELD, RouteChangeHow } from '@reticlehq/core';
 import { observeSafely } from './types.js';
 import { captureMethod } from '../patching/capture-method.js';
+import { redactUrl } from '@reticlehq/core';
 function snapshotLocation() {
     return {
         pathname: location.pathname,
@@ -9,6 +10,32 @@ function snapshotLocation() {
         href: location.href,
     };
 }
+let declared = [];
+export function declareRoutes(patterns) {
+    declared = patterns.map((pattern) => ({ pattern, parts: pattern.split('/').filter(Boolean) }));
+}
+function nextPattern() {
+    const raw = globalThis.next?.router?.pathname;
+    if ('string' !== typeof raw || !raw.startsWith('/'))
+        return undefined;
+    return raw.replace(/\[\.\.\.[^\]]+\]/g, '*').replace(/\[([^\]]+)\]/g, ':$1');
+}
+export function patternOf(pathname) {
+    const segments = pathname.split('/').filter(Boolean);
+    let best;
+    for (const { pattern, parts } of declared) {
+        const rest = '*' === parts.at(-1);
+        const fixed = rest ? parts.slice(0, -1) : parts;
+        if (rest ? segments.length < fixed.length : segments.length !== fixed.length)
+            continue;
+        if (!fixed.every((part, i) => part.startsWith(':') || part === segments[i]))
+            continue;
+        const params = parts.filter((part) => part.startsWith(':') || '*' === part).length;
+        if (best === undefined || params < best.params)
+            best = { pattern, params };
+    }
+    return best?.pattern ?? nextPattern();
+}
 export function installRoute(emit) {
     const ac = new AbortController();
     const origPush = captureMethod(history, 'pushState');
@@ -22,12 +49,14 @@ export function installRoute(emit) {
             if (to.href === from)
                 return;
             lastHref = to.href;
+            const pattern = patternOf(to.pathname);
             emit(EventType.ROUTE_CHANGE, {
-                from,
-                to: to.href,
+                from: redactUrl(from),
+                to: redactUrl(to.href),
                 pathname: to.pathname,
-                search: to.search,
-                hash: to.hash,
+                ...(pattern === undefined ? {} : { pattern }),
+                search: redactUrl(to.search),
+                hash: redactUrl(to.hash),
                 [ROUTE_CHANGE_HOW_FIELD]: how,
             });
         });

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

@@ -49,17 +49,12 @@ export declare const REPORT_TEXT: {
     readonly KEY_REFUSED: "Key refused";
     readonly NOT_SENT: "not synced";
     readonly NOT_SENT_HELP: "Runs saved on this machine but not on your dashboard yet. Run reticle connect in this project to send them.";
-    readonly INSTRUMENTATION: "What Reticle can see";
-    readonly INSTRUMENTATION_HELP: "What Reticle can see in this app, from its handshake and the gaps its verdicts recorded";
-    readonly covered: (covered: number, total: number) => string;
-    readonly NOT_SEEN_YET: "not checked yet";
     readonly COPY_PROMPT: "Copy prompt for your coding agent";
     readonly SHARE_LABEL: "Share";
     readonly POST_X: "X";
     readonly POST_IN: "LinkedIn";
     readonly REFER: "Invite a friend";
 };
-export declare const CAPABILITY_WORDS: Readonly<Record<string, string>>;
 export declare function compactNumber(n: number): string;
 export declare function compactDuration(ms: number): string;
 export declare function buildShareText(scope: ImpactScope, projectName?: string): string;

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

@@ -50,26 +50,12 @@ export const REPORT_TEXT = {
     KEY_REFUSED: 'Key refused',
     NOT_SENT: 'not synced',
     NOT_SENT_HELP: 'Runs saved on this machine but not on your dashboard yet. Run reticle connect in this project to send them.',
-    INSTRUMENTATION: 'What Reticle can see',
-    INSTRUMENTATION_HELP: 'What Reticle can see in this app, from its handshake and the gaps its verdicts recorded',
-    covered: (covered, total) => `${String(covered)} of ${String(total)}`,
-    NOT_SEEN_YET: 'not checked yet',
     COPY_PROMPT: 'Copy prompt for your coding agent',
     SHARE_LABEL: 'Share',
     POST_X: 'X',
     POST_IN: 'LinkedIn',
     REFER: 'Invite a friend',
 };
-export const CAPABILITY_WORDS = {
-    'page connected': 'Page connected',
-    'DOM actions': 'Clicks and typing',
-    network: 'Network requests',
-    console: 'Console errors',
-    'app state (store registered)': 'App state',
-    'signals on mutation': 'Success signals from your code',
-    'file:line source mapping': 'Source file and line',
-    'stable test ids': 'Stable test ids',
-};
 export function compactNumber(n) {
     if (n < 1000)
         return String(Math.round(n));

package/dist/presenter/hud-telemetry.js

@@ -64,7 +64,7 @@ const PROMPTS = [
     {
         surface: HudPromptSurface.RAIL,
         selector: `[${RAIL_SIGNIN_ATTR}]`,
-        shown: (at) => HudView.EXPANDED === at.view,
+        shown: (at) => HudPanel.CHAT === at.panel,
     },
     {
         surface: HudPromptSurface.HARNESS,

package/dist/presenter/presenter-chat-views.d.ts

@@ -1,6 +1,5 @@
-import { type AccountState, type HarnessConfig, type AgentLink, type HarnessDrive } from '@reticlehq/core';
+import { type AccountState, type HarnessConfig, type AgentLink, type HarnessDrive, type LastDrive } from '@reticlehq/core';
 import type { AnnotationItem } from '../review/annotator.js';
-import { type HarnessGateView } from './presenter-harness-row.js';
 export type ChatView = 'activity' | 'flows' | 'annotations' | 'harness';
 export declare function platformBase(config: HarnessConfig | undefined, account: AccountState): string;
 export interface HudDriveHost {
@@ -35,8 +34,8 @@ export declare class ChatViews {
     setProjectId(projectId: string | undefined): void;
     paintAgent(link: AgentLink | undefined): void;
     paintAccount(account: AccountState | undefined): void;
-    paintDrive(drive: HarnessDrive | undefined): void;
-    paintHarness(config: HarnessConfig | undefined, gate?: HarnessGateView): void;
+    paintDrive(drive: HarnessDrive | undefined, last?: LastDrive): void;
+    paintHarness(config: HarnessConfig | undefined): void;
     paintImpact(verdicts: number): void;
     setImpactOpen(open: boolean): void;
     paintAnnotations(items: readonly AnnotationItem[]): void;