@harness-fe/runtime 3.0.1

package/src/commands.ts

@@ -0,0 +1,335 @@
+/**
+ * Built-in command handlers run in the page. Each receives parsed args and
+ * returns a serializable result that gets shipped back in a ResponseFrame.
+ */
+
+import {
+    COMMAND,
+    type ClickArgs,
+    type EvaluateArgs,
+    type NavigateArgs,
+    type ReloadArgs,
+    type ScreenshotArgs,
+    type ScrollArgs,
+    type SetHtmlArgs,
+    type SetStyleArgs,
+    type Selector,
+    type TypeArgs,
+    type WaitForArgs,
+} from '@harness-fe/protocol';
+import { snapdom } from '@zumer/snapdom';
+import { resolveSelector } from './selectors.js';
+import type { CaptureStore } from './capture.js';
+
+export interface CommandContext {
+    capture: CaptureStore;
+}
+
+export type CommandHandler = (args: unknown, ctx: CommandContext) => Promise<unknown>;
+
+const HTML_TRUNCATE = 4000;
+
+function describeNoMatch(selector: Selector): string {
+    const fields = Object.entries(selector)
+        .filter(([, v]) => v !== undefined)
+        .map(([k, v]) => `${k}=${JSON.stringify(v)}`)
+        .join(' ');
+    return `no element matched selector: ${fields}`;
+}
+
+export const commandHandlers: Record<string, CommandHandler> = {
+    [COMMAND.PAGE_CLICK]: async (raw) => {
+        const args = raw as ClickArgs;
+        const result = resolveSelector(args.selector);
+        if (!result.element) throw new Error(describeNoMatch(args.selector));
+        const target = result.element as HTMLElement;
+
+        // When the resolved element is not itself an <a>, walk up to find the
+        // nearest anchor ancestor. This handles the common case where a text
+        // selector matches a child <span> inside a React Router <Link>, which
+        // would otherwise fire a click that bypasses the router's onClick handler.
+        let clickTarget: HTMLElement = target;
+        if (target.tagName !== 'A') {
+            const anchor = target.closest('a');
+            if (anchor) clickTarget = anchor as HTMLElement;
+        }
+
+        // Dispatch a proper MouseEvent instead of calling .click() so that
+        // framework routers (React Router, Vue Router) receive a bubbling event
+        // with the correct button/modifier state they check before navigating.
+        clickTarget.dispatchEvent(
+            new MouseEvent('click', {
+                bubbles: true,
+                cancelable: true,
+                view: window,
+                button: args.button === 'right' ? 2 : args.button === 'middle' ? 1 : 0,
+            }),
+        );
+        return { via: result.via, tag: clickTarget.tagName.toLowerCase() };
+    },
+
+    [COMMAND.PAGE_TYPE]: async (raw) => {
+        const args = raw as TypeArgs;
+        const result = resolveSelector(args.selector);
+        if (!result.element) throw new Error(describeNoMatch(args.selector));
+        const target = result.element as HTMLInputElement | HTMLTextAreaElement;
+        if (typeof target.value !== 'string') {
+            throw new Error('page.type: target element does not support .value');
+        }
+        // React (and Vue's controlled inputs) install setters/trackers on
+        // input.value. Setting `.value = '...'` directly bypasses them, so
+        // their state never updates. Use the native prototype setter so the
+        // framework's tracker registers the change, then dispatch a bubbling
+        // 'input' + 'change' event.
+        const proto =
+            target instanceof HTMLInputElement
+                ? HTMLInputElement.prototype
+                : HTMLTextAreaElement.prototype;
+        const nativeSetter = Object.getOwnPropertyDescriptor(proto, 'value')?.set;
+        const next = args.clear !== false ? args.value : target.value + args.value;
+        if (nativeSetter) nativeSetter.call(target, next);
+        else target.value = next;
+        target.dispatchEvent(new Event('input', { bubbles: true }));
+        target.dispatchEvent(new Event('change', { bubbles: true }));
+        return { via: result.via, value: target.value };
+    },
+
+    [COMMAND.PAGE_EVALUATE]: async (raw) => {
+        const args = raw as EvaluateArgs;
+        // eslint-disable-next-line no-new-func
+        const fn = new Function(`return (async () => { return (${args.expr}); })();`) as () => Promise<unknown>;
+        const value = await fn();
+        return { value: safeJson(value) };
+    },
+
+    [COMMAND.PAGE_WAIT_FOR]: async (raw) => {
+        const args = raw as WaitForArgs;
+        const timeoutMs = args.timeoutMs ?? 10_000;
+        const deadline = Date.now() + timeoutMs;
+        const isBuiltin = args.predicate === 'network.idle' || args.predicate === 'dom.ready';
+        // eslint-disable-next-line no-new-func
+        const probe = !isBuiltin
+            ? (new Function(`return Boolean(${args.predicate})`) as () => boolean)
+            : undefined;
+
+        while (Date.now() < deadline) {
+            if (args.predicate === 'dom.ready' && document.readyState === 'complete') {
+                return { ok: true, after: Date.now() };
+            }
+            if (args.predicate === 'network.idle') {
+                // Crude heuristic — we don't have a real idle tracker yet.
+                await new Promise((r) => setTimeout(r, 200));
+                return { ok: true, after: Date.now() };
+            }
+            if (probe && probe()) return { ok: true, after: Date.now() };
+            await new Promise((r) => setTimeout(r, 50));
+        }
+        throw new Error(`page.wait_for: predicate "${args.predicate}" did not become truthy in ${timeoutMs}ms`);
+    },
+
+    [COMMAND.PAGE_SCREENSHOT]: async (raw) => {
+        const args = raw as ScreenshotArgs;
+        const format = args.format ?? 'webp';
+        const maxWidth = args.maxWidth ?? 1280;
+        // Default to opaque white so transparent pages don't render a blank
+        // screenshot. Callers can pass `null` to opt back into transparency.
+        // JPEG has no alpha channel so the field is effectively always set.
+        const backgroundColor =
+            args.backgroundColor === null
+                ? undefined
+                : (args.backgroundColor ?? (format === 'jpeg' ? '#fff' : '#ffffff'));
+
+        let target: Element;
+        let via = 'document';
+        if (args.selector) {
+            const result = resolveSelector(args.selector);
+            if (!result.element) throw new Error(describeNoMatch(args.selector));
+            target = result.element;
+            via = result.via;
+        } else {
+            target = document.documentElement;
+        }
+
+        const rect = target.getBoundingClientRect();
+        const naturalWidth = Math.max(1, Math.round(rect.width || target.clientWidth || window.innerWidth));
+        const width = naturalWidth > maxWidth ? maxWidth : naturalWidth;
+
+        // Hide our own overlay during capture so the screenshot reflects the
+        // real page state. Without this, the floating "H" FAB and any open
+        // info card would always end up in the corner of every shot.
+        const overlayHost = document.getElementById('__harness_fe_overlay__') as HTMLElement | null;
+        const prevVisibility = overlayHost?.style.visibility ?? '';
+        if (overlayHost) overlayHost.style.visibility = 'hidden';
+
+        try {
+            const result = await snapdom(target as HTMLElement, {
+                fast: true,
+                width,
+                backgroundColor,
+            });
+            const canvas = await result.toCanvas();
+            const mime = format === 'jpeg' ? 'image/jpeg' : `image/${format}`;
+            const quality = format === 'png' ? undefined : 0.85;
+            const dataUrl = canvas.toDataURL(mime, quality);
+            return {
+                via,
+                format,
+                width: canvas.width,
+                height: canvas.height,
+                dataUrl,
+            };
+        } finally {
+            if (overlayHost) overlayHost.style.visibility = prevVisibility;
+        }
+    },
+
+    [COMMAND.PAGE_DOM_QUERY]: async (raw) => {
+        const args = raw as { selector: Selector; limit?: number };
+        const limit = args.limit ?? 5;
+        const matches: Array<{ html: string; tag: string; via: string }> = [];
+        // Try each selector field independently — we want all matches up to limit.
+        if (args.selector.css) {
+            const list = document.querySelectorAll(args.selector.css);
+            for (let i = 0; i < list.length && matches.length < limit; i++) {
+                matches.push({
+                    html: truncate((list[i] as Element).outerHTML, HTML_TRUNCATE),
+                    tag: (list[i] as Element).tagName.toLowerCase(),
+                    via: 'css',
+                });
+            }
+        }
+        if (matches.length < limit) {
+            const result = resolveSelector(args.selector);
+            if (result.element) {
+                matches.push({
+                    html: truncate(result.element.outerHTML, HTML_TRUNCATE),
+                    tag: result.element.tagName.toLowerCase(),
+                    via: result.via,
+                });
+            }
+        }
+        return { matches };
+    },
+
+    [COMMAND.PAGE_SCROLL]: async (raw) => {
+        const args = raw as ScrollArgs;
+        const behavior = args.behavior ?? 'smooth';
+        if (args.selector) {
+            const result = resolveSelector(args.selector);
+            if (!result.element) throw new Error(describeNoMatch(args.selector));
+            (result.element as HTMLElement).scrollIntoView({ behavior, block: 'center' });
+            return { via: result.via, scrolledIntoView: true };
+        }
+        window.scrollTo({ top: args.y ?? 0, left: args.x ?? 0, behavior });
+        return { scrollX: window.scrollX, scrollY: window.scrollY };
+    },
+
+    [COMMAND.PAGE_NAVIGATE]: async (raw) => {
+        const args = raw as NavigateArgs;
+        const method = args.method ?? 'href';
+        const before = location.href;
+        if (method === 'href') {
+            location.href = args.url;
+            return { method, from: before, to: args.url };
+        }
+        if (method === 'push') {
+            history.pushState({}, '', args.url);
+        } else {
+            history.replaceState({}, '', args.url);
+        }
+        // Notify SPA routers that listen on popstate
+        window.dispatchEvent(new PopStateEvent('popstate', { state: history.state }));
+        return { method, from: before, to: location.href };
+    },
+
+    [COMMAND.PAGE_RELOAD]: async (raw) => {
+        const args = raw as ReloadArgs;
+        if (args.hard) {
+            // Hard reload — bypass cache
+            location.reload();
+        } else {
+            location.reload();
+        }
+        return { reloading: true };
+    },
+
+    [COMMAND.PAGE_SET_HTML]: async (raw) => {
+        const args = raw as SetHtmlArgs;
+        const result = resolveSelector(args.selector);
+        if (!result.element) throw new Error(describeNoMatch(args.selector));
+        const el = result.element as HTMLElement;
+        const target = args.target ?? 'innerHTML';
+        const before = target === 'innerHTML' ? el.innerHTML : el.outerHTML;
+        if (target === 'innerHTML') {
+            el.innerHTML = args.html;
+            return { via: result.via, target, before: truncate(before, 500) };
+        }
+        // outerHTML replacement — the element is removed from the DOM; return the new element tag
+        const tag = el.tagName.toLowerCase();
+        el.outerHTML = args.html;
+        return { via: result.via, target, replacedTag: tag, before: truncate(before, 500) };
+    },
+
+    [COMMAND.PAGE_SET_STYLE]: async (raw) => {
+        const args = raw as SetStyleArgs;
+
+        // Global injection mode: { rule: "<raw css>" }
+        if (!args.selector) {
+            const rule = args.styles['rule'];
+            if (!rule) throw new Error('page.set_style: pass { rule: "<css>" } when no selector is provided');
+            const styleId = '__hfe_injected_style__';
+            let styleEl = document.getElementById(styleId) as HTMLStyleElement | null;
+            if (!styleEl) {
+                styleEl = document.createElement('style');
+                styleEl.id = styleId;
+                document.head.appendChild(styleEl);
+            }
+            styleEl.textContent += `\n${rule}`;
+            return { injected: true, rule };
+        }
+
+        // Element inline-style mode
+        const result = resolveSelector(args.selector);
+        if (!result.element) throw new Error(describeNoMatch(args.selector));
+        const el = result.element as HTMLElement;
+        const merge = args.merge !== false; // default true
+        if (!merge) el.removeAttribute('style');
+        const applied: Record<string, string> = {};
+        for (const [prop, value] of Object.entries(args.styles)) {
+            // Accept both camelCase and kebab-case
+            const camel = prop.replace(/-([a-z])/g, (_, c: string) => c.toUpperCase());
+            (el.style as unknown as Record<string, string>)[camel] = value;
+            applied[camel] = value;
+        }
+        return { via: result.via, applied, currentStyle: el.getAttribute('style') };
+    },
+
+    [COMMAND.CONSOLE_TAIL]: async (raw, ctx) => {
+        const args = raw as { n: number };
+        return { entries: ctx.capture.console.tail(args.n) };
+    },
+
+    [COMMAND.NETWORK_TAIL]: async (raw, ctx) => {
+        const args = raw as { n: number };
+        return { entries: ctx.capture.network.tail(args.n) };
+    },
+
+    [COMMAND.ERRORS_TAIL]: async (raw, ctx) => {
+        const args = raw as { n: number };
+        return { entries: ctx.capture.errors.tail(args.n) };
+    },
+};
+
+function truncate(s: string, n: number): string {
+    if (s.length <= n) return s;
+    return `${s.slice(0, n)}… (truncated, total ${s.length} chars)`;
+}
+
+function safeJson(value: unknown): unknown {
+    if (value === undefined) return null;
+    try {
+        return JSON.parse(JSON.stringify(value));
+    } catch {
+        return String(value);
+    }
+}

package/src/dashboardUrl.test.ts

@@ -0,0 +1,59 @@
+import { describe, expect, it } from 'vitest';
+import { deriveDashboardUrl } from './dashboardUrl.js';
+
+describe('deriveDashboardUrl', () => {
+    it('swaps ws:// to http:// and points at /dashboard/', () => {
+        expect(deriveDashboardUrl({ mcpUrl: 'ws://127.0.0.1:47729' })).toBe(
+            'http://127.0.0.1:47729/dashboard/',
+        );
+    });
+
+    it('swaps wss:// to https:// (production / LAN with TLS)', () => {
+        expect(deriveDashboardUrl({ mcpUrl: 'wss://harness.lan:47729' })).toBe(
+            'https://harness.lan:47729/dashboard/',
+        );
+    });
+
+    it('carries the token query through verbatim', () => {
+        expect(
+            deriveDashboardUrl({ mcpUrl: 'ws://127.0.0.1:47729?token=abc' }),
+        ).toBe('http://127.0.0.1:47729/dashboard/?token=abc');
+    });
+
+    it('URL-encodes the token (defensive against weird HARNESS_FE_TOKEN values)', () => {
+        expect(
+            deriveDashboardUrl({ mcpUrl: 'ws://127.0.0.1:47729?token=a%20b%26c' }),
+        ).toBe('http://127.0.0.1:47729/dashboard/?token=a%20b%26c');
+    });
+
+    it('deep-links to /dashboard/sessions/:id when sessionId is provided', () => {
+        expect(
+            deriveDashboardUrl({
+                mcpUrl: 'ws://127.0.0.1:47729?token=abc',
+                sessionId: 'sess-1',
+            }),
+        ).toBe('http://127.0.0.1:47729/dashboard/sessions/sess-1?token=abc');
+    });
+
+    it('URL-encodes the session id', () => {
+        expect(
+            deriveDashboardUrl({
+                mcpUrl: 'ws://127.0.0.1:47729',
+                sessionId: 'a/b c',
+            }),
+        ).toBe('http://127.0.0.1:47729/dashboard/sessions/a%2Fb%20c');
+    });
+
+    it('strips other query/hash from the WS URL — only token is forwarded', () => {
+        expect(
+            deriveDashboardUrl({
+                mcpUrl: 'ws://127.0.0.1:47729/?token=abc&other=secret#hash',
+            }),
+        ).toBe('http://127.0.0.1:47729/dashboard/?token=abc');
+    });
+
+    it('returns undefined for empty or invalid input', () => {
+        expect(deriveDashboardUrl({ mcpUrl: '' })).toBeUndefined();
+        expect(deriveDashboardUrl({ mcpUrl: 'not-a-url' })).toBeUndefined();
+    });
+});

package/src/dashboardUrl.ts

@@ -0,0 +1,36 @@
+/**
+ * Convert the runtime's `mcpUrl` (a WebSocket URL the plugin gave us) into
+ * the dashboard URL the same daemon serves.
+ *
+ * The daemon binds one HTTP+WS port; the dashboard lives at
+ * `<http-scheme>://<host>:<port>/dashboard/`. The token, if any, is
+ * carried in the query string so the browser is pre-authenticated on
+ * first hit (after which mcp-server hands it off to a cookie — see
+ * `packages/mcp-server/src/dashboardSpa.ts`).
+ *
+ * Optionally deep-links into a session's detail page when `sessionId` is
+ * provided.
+ */
+export interface DashboardUrlInput {
+    mcpUrl: string;
+    sessionId?: string;
+}
+
+export function deriveDashboardUrl(input: DashboardUrlInput): string | undefined {
+    if (!input.mcpUrl) return undefined;
+    let url: URL;
+    try {
+        url = new URL(input.mcpUrl);
+    } catch {
+        return undefined;
+    }
+    const httpScheme = url.protocol === 'wss:' ? 'https:' : 'http:';
+    const path = input.sessionId
+        ? `/dashboard/sessions/${encodeURIComponent(input.sessionId)}`
+        : '/dashboard/';
+    const token = url.searchParams.get('token');
+    const search = token ? `?token=${encodeURIComponent(token)}` : '';
+    // Build manually so we don't leak any extra query/hash from the WS URL
+    // (rare, but be defensive — the agent only ever sees what we hand it).
+    return `${httpScheme}//${url.host}${path}${search}`;
+}

package/src/fetchPatch.test.ts

@@ -0,0 +1,203 @@
+// @vitest-environment happy-dom
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { installFetchPatch } from './fetchPatch.js';
+import type { NetworkEntry } from '@harness-fe/protocol';
+
+// happy-dom installs `window.fetch` via Node's undici. We override with a
+// controllable mock per test so we can shape the Response exactly.
+
+let originalFetch: typeof globalThis.fetch;
+let entries: NetworkEntry[];
+let dispose: () => void;
+
+function setMockFetch(impl: typeof globalThis.fetch): void {
+    window.fetch = impl as typeof window.fetch;
+}
+
+function jsonResponse(body: unknown, init: ResponseInit = {}): Response {
+    return new Response(JSON.stringify(body), {
+        status: 200,
+        headers: { 'content-type': 'application/json', ...(init.headers ?? {}) },
+        ...init,
+    });
+}
+
+function sseStream(chunks: string[]): ReadableStream<Uint8Array> {
+    const enc = new TextEncoder();
+    let i = 0;
+    return new ReadableStream({
+        pull(controller) {
+            if (i < chunks.length) {
+                controller.enqueue(enc.encode(chunks[i++]));
+            } else {
+                controller.close();
+            }
+        },
+    });
+}
+
+beforeEach(() => {
+    originalFetch = window.fetch;
+    entries = [];
+});
+
+afterEach(() => {
+    dispose?.();
+    window.fetch = originalFetch;
+});
+
+describe('installFetchPatch — identity', () => {
+    it('keeps fetch.name === "fetch"', () => {
+        setMockFetch(() => Promise.resolve(new Response('ok')));
+        dispose = installFetchPatch({ onEntry: (e) => entries.push(e) });
+        expect(window.fetch.name).toBe('fetch');
+    });
+
+    it('returns the original Response without wrapping', async () => {
+        const original = new Response('hello', { status: 201 });
+        setMockFetch(() => Promise.resolve(original));
+        dispose = installFetchPatch({ onEntry: (e) => entries.push(e) });
+        const got = await window.fetch('http://x/');
+        // business reads the body — capture must not have stolen it
+        await expect(got.text()).resolves.toBe('hello');
+        expect(got.status).toBe(201);
+    });
+
+    it('dispose restores window.fetch', () => {
+        const mock: typeof globalThis.fetch = () => Promise.resolve(new Response());
+        setMockFetch(mock);
+        dispose = installFetchPatch({ onEntry: (e) => entries.push(e) });
+        expect(window.fetch).not.toBe(mock);
+        dispose();
+        dispose = () => {};
+        expect(window.fetch).toBe(mock);
+    });
+
+    it('re-install while patched is a no-op', () => {
+        setMockFetch(() => Promise.resolve(new Response()));
+        const d1 = installFetchPatch({ onEntry: (e) => entries.push(e) });
+        const first = window.fetch;
+        const d2 = installFetchPatch({ onEntry: (e) => entries.push(e) });
+        expect(window.fetch).toBe(first);
+        d2(); // no-op
+        d1();
+    });
+});
+
+describe('installFetchPatch — emission', () => {
+    it('emits a req event eagerly and a res event after completion', async () => {
+        setMockFetch(() => Promise.resolve(jsonResponse({ ok: true })));
+        dispose = installFetchPatch({ onEntry: (e) => entries.push(e) });
+        await window.fetch('http://x/', { method: 'POST', body: '{"k":1}' });
+        // give the body-clone branch a chance to flush
+        await new Promise((r) => setTimeout(r, 10));
+        const ids = new Set(entries.map((e) => e.id));
+        expect(ids.size).toBe(1);
+        const phases = entries.map((e) => e.phase);
+        expect(phases).toContain('req');
+        expect(phases).toContain('res');
+        const res = entries.find((e) => e.phase === 'res')!;
+        expect(res.status).toBe(200);
+        expect(res.responseBody).toEqual({ ok: true });
+    });
+
+    it('captures and caps a large JSON response body', async () => {
+        const huge = 'x'.repeat(2000);
+        setMockFetch(() => Promise.resolve(jsonResponse({ s: huge })));
+        dispose = installFetchPatch({
+            onEntry: (e) => entries.push(e),
+            bodyCap: 500,
+        });
+        await window.fetch('http://x/');
+        await new Promise((r) => setTimeout(r, 10));
+        const res = entries.find((e) => e.phase === 'res')!;
+        expect(res.responseBodyTruncated).toBe(true);
+        // body is the raw truncated text when JSON.parse fails
+        expect(typeof res.responseBody).toBe('string');
+    });
+
+    it('redacts sensitive request headers', async () => {
+        setMockFetch(() => Promise.resolve(new Response('ok')));
+        dispose = installFetchPatch({ onEntry: (e) => entries.push(e) });
+        await window.fetch('http://x/', {
+            method: 'POST',
+            headers: {
+                Authorization: 'Bearer abc.def.ghi',
+                'X-Api-Key': 'sk-12345',
+                'content-type': 'text/plain',
+            },
+            body: 'hi',
+        });
+        await new Promise((r) => setTimeout(r, 10));
+        const req = entries.find((e) => e.phase === 'req' && e.requestHeaders)!;
+        expect(req.requestHeaders!.Authorization).toMatch(/^\[redacted \d+\]$/);
+        expect(req.requestHeaders!['X-Api-Key']).toMatch(/^\[redacted \d+\]$/);
+        // non-sensitive header is preserved
+        expect(req.requestHeaders!['content-type']).toBe('text/plain');
+    });
+
+    it('emits res with error field when underlying fetch rejects', async () => {
+        setMockFetch(() => Promise.reject(new Error('network down')));
+        dispose = installFetchPatch({ onEntry: (e) => entries.push(e) });
+        await expect(window.fetch('http://x/')).rejects.toThrow('network down');
+        await new Promise((r) => setTimeout(r, 10));
+        const res = entries.find((e) => e.phase === 'res')!;
+        expect(res.error).toBe('network down');
+        expect(res.status).toBeUndefined();
+    });
+
+    it('caps an SSE stream and cancels the cloned reader', async () => {
+        const longChunk = 'data: ' + 'x'.repeat(2000) + '\n\n';
+        setMockFetch(() =>
+            Promise.resolve(
+                new Response(sseStream([longChunk, longChunk, longChunk]), {
+                    status: 200,
+                    headers: { 'content-type': 'text/event-stream' },
+                }),
+            ),
+        );
+        dispose = installFetchPatch({
+            onEntry: (e) => entries.push(e),
+            bodyCap: 500,
+        });
+        const res = await window.fetch('http://x/');
+        // business can still read its own stream
+        await res.text();
+        await new Promise((r) => setTimeout(r, 30));
+        const captured = entries.find((e) => e.phase === 'res')!;
+        expect(captured.responseBodyTruncated).toBe(true);
+        expect((captured.responseBody as string).length).toBe(500);
+    });
+
+    it('skips internal traffic when __hfeInternal flag is set', async () => {
+        setMockFetch(() => Promise.resolve(new Response('ok')));
+        dispose = installFetchPatch({ onEntry: (e) => entries.push(e) });
+        await window.fetch('http://x/', {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            ...({ __hfeInternal: true } as any),
+        });
+        await new Promise((r) => setTimeout(r, 10));
+        expect(entries).toHaveLength(0);
+    });
+
+    it('skips denylisted URLs', async () => {
+        setMockFetch(() => Promise.resolve(new Response('ok')));
+        dispose = installFetchPatch({
+            onEntry: (e) => entries.push(e),
+            denylist: [/example/],
+        });
+        await window.fetch('http://example.com/__hfe__');
+        await new Promise((r) => setTimeout(r, 10));
+        expect(entries).toHaveLength(0);
+    });
+
+    it('does not let an onEntry throw crash business fetch', async () => {
+        setMockFetch(() => Promise.resolve(new Response('ok')));
+        dispose = installFetchPatch({
+            onEntry: () => {
+                throw new Error('boom');
+            },
+        });
+        await expect(window.fetch('http://x/')).resolves.toBeInstanceOf(Response);
+    });
+});