jev-devtools 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Diego Arias
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,65 @@
-# Temporary Holding Version
+# Jev DevTools
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[![npm version](https://img.shields.io/npm/v/jev-devtools/latest?color=E551BA&labelColor=0D0A0F&logo=npm)](https://www.npmjs.com/package/jev-devtools)
+
+A React drawer and Node adapter for inspecting TypeSafe Jev requests with animated diagrams. Includes request history, context, questions, typed answers, transport attempts, and raw snapshots.
+
+**Experimental 0.1.x.** React 18/19 and Node 22.12+ are supported. APIs may change before 1.0. Verification uses sample responses through the real TypeSafe SDK, not live inference.
+
+## Demo
+
+![Full 28-second Jev DevTools demo showing sample results, the request drawer, and animated diagrams.](https://raw.githubusercontent.com/diegoag64/jev-devtools/main/docs/assets/jev-devtools-preview.gif)
+
+The full sample recording loops above. [Download the MP4 (530 KB)](https://github.com/diegoag64/jev-devtools/raw/refs/heads/main/docs/assets/jev-devtools-demo.mp4).
+
+## Install
+
+Install from npm:
+
+```sh
+npm install jev-devtools
+```
+
+To try unpublished local changes instead:
+
+```sh
+# From the jev-devtools repository root:
+npm ci
+npm run pack:devtools
+# From the consuming app:
+npm install /absolute/path/to/jev-devtools-0.1.1.tgz
+```
+
+Mount once:
+
+```tsx
+import { JevDevtools } from 'jev-devtools';
+import 'jev-devtools/styles.css';
+
+<JevDevtools enabled={import.meta.env.DEV} defaultOpen={false} />
+```
+
+Create one shared Node adapter and instrumented client:
+
+```ts
+import { createJevDevtools } from 'jev-devtools/server';
+
+const inspector = createJevDevtools({
+  enabled: process.env.NODE_ENV === 'development',
+  origin: 'http://localhost:3000',
+});
+const jev = inspector.createClient({ apiKey: process.env.TYPESAFE_API_KEY });
+app.use(inspector.middleware); // Mount at root, before fallback handlers.
+// Call jev.systemOne(...) in your application's handlers.
+// Call inspector.dispose() on shutdown.
+```
+
+Only calls through that client are captured. The React component subscribes via same-origin SSE. Both sides default to disabled. API keys remain server-side. Browser code is SSR-safe and styles are scoped; no Tailwind or shadcn installation is required.
+
+History is bounded to 50 calls in memory by default. API routes and inspector endpoints must share an adapter instance; distributed processes and edge runtimes are not supported. Non-loopback use requires explicit authorization. Captures include bounded/redacted context and answers, not hidden model reasoning.
+
+For Next.js App Router, use `getJevDevtools(appKey, optionsFactory)` from `/server` to share an adapter across server reloads, expose `handleNodeRoute` through an optional catch-all Route Handler, and mount the root component in a client boundary. See the [Next.js guide](https://github.com/diegoag64/jev-devtools/blob/main/docs/nextjs.md) and runnable example. No Next dependency is required by this package.
+
+[Full integration guide](https://github.com/diegoag64/jev-devtools/blob/main/docs/integration.md) · [Repository and playground](https://github.com/diegoag64/jev-devtools)
+
+MIT for project code. See bundled LICENSE and THIRD_PARTY_NOTICES.txt for original design attribution and TypeSafe branding.

package/THIRD_PARTY_NOTICES.txt

@@ -0,0 +1,50 @@
+Jev DevTools — design provenance
+
+Palette and typography adapted from Diagram Design:
+https://github.com/cathrynlavery/diagram-design
+Source snapshot: f2f4d49ea8d632f17cf196ba26599277a93f767b
+
+MIT License
+
+Copyright (c) 2025 Cathryn Lavery
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+Fonts
+
+Instrument Serif, Geist, and Geist Mono are loaded from Google Fonts.
+They are distributed by their upstream authors under the SIL Open Font License.
+No font binaries are bundled with this project.
+https://github.com/google/fonts/tree/main/ofl/instrumentserif
+https://github.com/google/fonts/tree/main/ofl/geist
+https://github.com/google/fonts/tree/main/ofl/geistmono
+
+The inspector implementation originated in Diagram Motion Lab:
+https://github.com/diegoag64/diagram-motion-lab
+
+TypeSafe branding
+
+The TypeSafe logo is reproduced from https://docs.typesafe.ai/ (via the
+original lab's docs replica). The logo and TypeSafe/Jev names remain the
+property of their respective owners; the project MIT license does not grant
+trademark rights or imply endorsement.
+
+The playground uses shadcn/ui components. Its MIT notice is preserved in
+apps/playground/SHADCN_LICENSE.md. Those components are not bundled in the
+DevTools package. No TanStack DevTools shell is included.

package/lib/server/index.d.ts

@@ -0,0 +1,42 @@
+import type { IncomingMessage, ServerResponse } from "node:http";
+import { TypeSafeClient } from "@typesafe-ai/sdk";
+import { type CaptureOptions } from "./recorder.js";
+export { JevRecorder } from "./recorder.js";
+export type { CaptureOptions } from "./recorder.js";
+export type JevDevtoolsServerOptions = CaptureOptions & {
+    /** Explicit opt-in; disabled by default. */
+    enabled?: boolean;
+    origin: string;
+    endpoint?: string;
+    /** Required for non-loopback origins. Apply your application's authentication. */
+    authorize?: (request: Request) => boolean | Promise<boolean>;
+    /** Server-derived scope. Defaults to a shared local-development history. */
+    getSession?: (request: Request) => string | Promise<string>;
+};
+export type ClientMetadata = {
+    label?: string;
+    source?: "sample" | "live";
+};
+/** Node runtime adapter: framework-neutral Request/Response plus Node middleware. */
+export declare function createJevDevtools(options: JevDevtoolsServerOptions): {
+    handle: (request: Request) => Promise<Response>;
+    /**
+     * For Node framework routes whose Request URL uses an internal hostname.
+     * Require the actual Host header to match the configured public authority;
+     * never trust forwarded host/protocol headers. Origin checks still apply.
+     */
+    handleNodeRoute(request: Request): Promise<Response>;
+    middleware: (req: IncomingMessage, res: ServerResponse, next: () => void) => Promise<void>;
+    createClient(clientOptions: ConstructorParameters<typeof TypeSafeClient>[0], meta?: ClientMetadata): TypeSafeClient;
+    /** Needed only when getSession is customized. Wrap the application's request handler. */
+    run<T>(request: Request, callback: () => T | Promise<T>): Promise<T>;
+    dispose(): void;
+};
+type Adapter = ReturnType<typeof createJevDevtools>;
+/**
+ * Reuse one adapter across server module reloads in the same Node realm.
+ * Use a stable app-specific key. The first options factory wins until dispose
+ * or process restart; restart after editing configuration/auth/redaction callbacks.
+ * This does not share history between workers or serverless instances.
+ */
+export declare function getJevDevtools(key: string, createOptions: () => JevDevtoolsServerOptions): Adapter;

package/lib/server/index.js

@@ -0,0 +1,207 @@
+import { AsyncLocalStorage } from "node:async_hooks";
+import { Readable } from "node:stream";
+import { pipeline } from "node:stream/promises";
+import { TypeSafeClient } from "@typesafe-ai/sdk";
+import { JevRecorder } from "./recorder.js";
+export { JevRecorder } from "./recorder.js";
+const json = (data, status = 200) => Response.json(data, { status, headers: { "cache-control": "no-store" } });
+/** Node runtime adapter: framework-neutral Request/Response plus Node middleware. */
+export function createJevDevtools(options) {
+    const origin = new URL(options.origin).origin;
+    const endpoint = (options.endpoint ?? "/api/jev-devtools").replace(/\/$/, "");
+    if (!endpoint.startsWith("/") ||
+        endpoint.startsWith("//") ||
+        /[?#]/.test(endpoint))
+        throw new Error("endpoint must be an absolute path without a query or fragment");
+    const local = ["localhost", "127.0.0.1", "[::1]"].includes(new URL(origin).hostname);
+    if (options.enabled && !local && !options.authorize)
+        throw new Error("Non-loopback inspector endpoints require authorize");
+    const recorder = new JevRecorder(options), scope = new AsyncLocalStorage();
+    const streams = new Set();
+    let disposed = false;
+    const enabled = () => options.enabled === true && !disposed;
+    const sessionFor = async (request) => {
+        const session = (await options.getSession?.(request)) ?? "local";
+        if (typeof session !== "string" || !session || session.length > 200)
+            throw new Error("Invalid inspector scope");
+        return session;
+    };
+    async function handle(request) {
+        const url = new URL(request.url);
+        if (!enabled() ||
+            !(url.pathname === endpoint || url.pathname.startsWith(endpoint + "/")))
+            return json({ error: "Not found" }, 404);
+        if (url.origin !== origin ||
+            (request.headers.get("origin") &&
+                request.headers.get("origin") !== origin) ||
+            request.headers.get("sec-fetch-site") === "cross-site")
+            return json({ error: "Same-origin requests required" }, 403);
+        if (options.authorize && !(await options.authorize(request)))
+            return json({ error: "Unauthorized" }, 403);
+        const session = await sessionFor(request);
+        if (url.pathname === endpoint && request.method === "GET")
+            return json({ version: 1, enabled: true });
+        if (url.pathname === endpoint + "/clear") {
+            if (request.method !== "DELETE")
+                return json({ error: "Method not allowed" }, 405);
+            if (request.headers.get("origin") !== origin)
+                return json({ error: "Same-origin requests required" }, 403);
+            recorder.clear(session);
+            return json({ ok: true });
+        }
+        if (url.pathname !== endpoint + "/events")
+            return json({ error: "Not found" }, 404);
+        if (request.method !== "GET")
+            return json({ error: "Method not allowed" }, 405);
+        const encoder = new TextEncoder();
+        let cleanup = () => { }, flush = () => { };
+        const stream = new ReadableStream({
+            start(controller) {
+                let closed = false, dirty = true;
+                flush = () => {
+                    if (closed || !dirty || (controller.desiredSize ?? 0) <= 0)
+                        return;
+                    dirty = false;
+                    controller.enqueue(encoder.encode(`event: snapshot\ndata: ${JSON.stringify({ version: 1, traces: recorder.snapshot(session) })}\n\n`));
+                };
+                const unsubscribe = recorder.subscribe(() => {
+                    dirty = true;
+                    flush();
+                });
+                const heartbeat = setInterval(() => {
+                    if (!closed && (controller.desiredSize ?? 0) > 0)
+                        controller.enqueue(encoder.encode(": keepalive\n\n"));
+                }, 15_000);
+                cleanup = () => {
+                    if (closed)
+                        return;
+                    closed = true;
+                    unsubscribe();
+                    clearInterval(heartbeat);
+                    request.signal.removeEventListener("abort", cleanup);
+                    streams.delete(cleanup);
+                    try {
+                        controller.close();
+                    }
+                    catch {
+                        /* Already cancelled by the consumer. */
+                    }
+                };
+                streams.add(cleanup);
+                request.signal.addEventListener("abort", cleanup, { once: true });
+                if (request.signal.aborted)
+                    cleanup();
+                else
+                    flush();
+            },
+            pull() {
+                flush();
+            },
+            cancel() {
+                cleanup();
+            },
+        });
+        return new Response(stream, {
+            headers: {
+                "content-type": "text/event-stream",
+                "cache-control": "no-store",
+                "x-accel-buffering": "no",
+            },
+        });
+    }
+    async function middleware(req, res, next) {
+        const path = (req.url ?? "").split("?")[0];
+        if (path !== endpoint && !path.startsWith(endpoint + "/")) {
+            next();
+            return;
+        }
+        const abort = new AbortController();
+        res.once("close", () => abort.abort());
+        try {
+            const headers = new Headers();
+            for (const [key, value] of Object.entries(req.headers))
+                if (value !== undefined)
+                    headers.set(key, Array.isArray(value) ? value.join(",") : value);
+            const request = new Request(new URL(req.url, `${new URL(origin).protocol}//${req.headers.host}`), { method: req.method, headers, signal: abort.signal });
+            const response = await handle(request);
+            res.writeHead(response.status, Object.fromEntries(response.headers));
+            if (response.body)
+                await pipeline(Readable.fromWeb(response.body), res);
+            else
+                res.end();
+        }
+        catch {
+            if (!res.headersSent && !res.destroyed)
+                res
+                    .writeHead(500, { "content-type": "application/json" })
+                    .end('{"error":"Inspector unavailable"}');
+            else
+                res.destroy();
+        }
+    }
+    return {
+        handle,
+        /**
+         * For Node framework routes whose Request URL uses an internal hostname.
+         * Require the actual Host header to match the configured public authority;
+         * never trust forwarded host/protocol headers. Origin checks still apply.
+         */
+        handleNodeRoute(request) {
+            if (!enabled())
+                return handle(request);
+            if (request.headers.get("host") !== new URL(origin).host)
+                return Promise.resolve(json({ error: "Same-origin requests required" }, 403));
+            const url = new URL(request.url);
+            return handle(new Request(origin + url.pathname + url.search, request));
+        },
+        middleware,
+        createClient(clientOptions, meta = {}) {
+            // A disabled adapter is a normal SDK client: no recording or fetch wrapper.
+            if (!enabled())
+                return new TypeSafeClient(clientOptions);
+            const client = new TypeSafeClient({
+                ...clientOptions,
+                fetch: recorder.transport(clientOptions?.fetch ?? globalThis.fetch),
+            });
+            return recorder.instrument(client, () => ({
+                session: scope.getStore() ?? "local",
+                label: meta.label ?? "Jev request",
+                source: meta.source ?? "live",
+            }));
+        },
+        /** Needed only when getSession is customized. Wrap the application's request handler. */
+        async run(request, callback) {
+            return scope.run(await sessionFor(request), callback);
+        },
+        dispose() {
+            disposed = true;
+            for (const close of [...streams])
+                close();
+        },
+    };
+}
+const sharedAdaptersKey = Symbol.for("jev-devtools/adapters/v1");
+/**
+ * Reuse one adapter across server module reloads in the same Node realm.
+ * Use a stable app-specific key. The first options factory wins until dispose
+ * or process restart; restart after editing configuration/auth/redaction callbacks.
+ * This does not share history between workers or serverless instances.
+ */
+export function getJevDevtools(key, createOptions) {
+    if (!key.trim())
+        throw new Error("A non-empty application key is required");
+    const shared = globalThis;
+    const adapters = (shared[sharedAdaptersKey] ??= new Map());
+    const existing = adapters.get(key);
+    if (existing)
+        return existing;
+    const adapter = createJevDevtools(createOptions());
+    const dispose = adapter.dispose;
+    adapter.dispose = () => {
+        dispose();
+        if (adapters.get(key) === adapter)
+            adapters.delete(key);
+    };
+    adapters.set(key, adapter);
+    return adapter;
+}

package/lib/server/recorder.d.ts

@@ -0,0 +1,30 @@
+import { TypeSafeClient } from "@typesafe-ai/sdk";
+import type { Fetch } from "@typesafe-ai/sdk";
+import type { Trace } from "../src/protocol.js";
+export type CaptureOptions = {
+    limit?: number;
+    redact?: (path: string[], value: unknown) => unknown;
+};
+export declare class JevRecorder {
+    private options;
+    private traces;
+    private listeners;
+    private context;
+    private limit;
+    constructor(options?: CaptureOptions);
+    snapshot(session: string): Trace[];
+    subscribe(listener: () => void): () => void;
+    clear(session: string): void;
+    private notify;
+    private update;
+    transport(fetcher: Fetch): Fetch;
+    instrument<T extends TypeSafeClient>(client: T, meta: {
+        session: string;
+        label: string;
+        source: "sample" | "live";
+    } | (() => {
+        session: string;
+        label: string;
+        source: "sample" | "live";
+    })): T;
+}

package/lib/server/recorder.js

@@ -0,0 +1,226 @@
+import { AsyncLocalStorage } from "node:async_hooks";
+import { randomUUID } from "node:crypto";
+import { Image } from "@typesafe-ai/sdk";
+const secretKey = /^(authorization|cookie|set-cookie|api[-_]?key|password|secret|access[-_]?token|refresh[-_]?token)$/i;
+const safeMessage = (value) => value.replace(/Bearer\s+\S+/gi, "Bearer [redacted]").slice(0, 500);
+// Snapshot before the caller can mutate its request. Bounded and cycle-safe;
+// image handles become explicit previews/references instead of opaque SDK objects.
+function capture(value, warnings, redact) {
+    const seen = new WeakSet();
+    let budget = 96_000;
+    const visit = (input, path, depth) => {
+        if (secretKey.test(path.at(-1) || ""))
+            return "[redacted]";
+        if (redact)
+            input = redact(path, input);
+        budget -= 8 + (path.at(-1)?.length ?? 0);
+        if (budget <= 0 || depth > 12) {
+            warnings.add("Capture size/depth limit reached.");
+            return "[truncated]";
+        }
+        if (input === null || input === undefined)
+            return null;
+        if (typeof input === "string") {
+            const text = input.slice(0, Math.min(budget, 16_000));
+            budget -= text.length;
+            if (text.length < input.length)
+                warnings.add("Long text truncated in capture.");
+            return text;
+        }
+        if (typeof input === "boolean")
+            return input;
+        if (typeof input === "number")
+            return Number.isFinite(input) ? input : String(input);
+        if (typeof input !== "object")
+            return String(input);
+        if (seen.has(input))
+            return "[circular/repeated reference]";
+        seen.add(input);
+        if (input instanceof Image) {
+            const bytes = input.data, result = {
+                kind: "image",
+                ref: String(input),
+                bytes: bytes instanceof Blob ? bytes.size : bytes.byteLength,
+            };
+            if (bytes instanceof Uint8Array &&
+                bytes.byteLength < 48_000 &&
+                budget > bytes.byteLength * 1.4) {
+                const format = bytes[0] === 137 && bytes[1] === 80
+                    ? "png"
+                    : bytes[0] === 255 && bytes[1] === 216
+                        ? "jpeg"
+                        : null;
+                if (format) {
+                    result.preview = `data:image/${format};base64,${Buffer.from(bytes).toString("base64")}`;
+                    budget -= bytes.byteLength * 1.4;
+                }
+            }
+            if (!result.preview)
+                warnings.add("Image preview omitted (Blob, unsupported format, or size limit).");
+            return result;
+        }
+        if (Array.isArray(input)) {
+            if (input.length > 150)
+                warnings.add("Long collection truncated in capture.");
+            return input
+                .slice(0, 150)
+                .map((v, i) => visit(v, [...path, String(i)], depth + 1));
+        }
+        const entries = Object.entries(input);
+        if (entries.length > 150)
+            warnings.add("Long collection truncated in capture.");
+        return Object.fromEntries(entries
+            .slice(0, 150)
+            .map(([key, v]) => [key, visit(v, [...path, key], depth + 1)]));
+    };
+    return visit(value, [], 0);
+}
+export class JevRecorder {
+    options;
+    traces = new Map();
+    listeners = new Set();
+    context = new AsyncLocalStorage();
+    limit;
+    constructor(options = {}) {
+        this.options = options;
+        this.limit = Math.max(1, Math.min(200, options.limit ?? 50));
+    }
+    snapshot(session) {
+        return structuredClone([...this.traces.values()].filter((t) => t.session === session).reverse());
+    }
+    subscribe(listener) {
+        this.listeners.add(listener);
+        return () => {
+            this.listeners.delete(listener);
+        };
+    }
+    clear(session) {
+        for (const [id, t] of this.traces)
+            if (t.session === session)
+                this.traces.delete(id);
+        this.notify();
+    }
+    notify() {
+        for (const listener of this.listeners) {
+            try {
+                listener();
+            }
+            catch {
+                /* Observers must not affect inference. */
+            }
+        }
+    }
+    update(id, update) {
+        const t = this.traces.get(id);
+        if (t) {
+            update(t);
+            this.notify();
+        }
+    }
+    // Use this in TypeSafeClient's supported `fetch` option. It observes attempts
+    // only and returns the original Response without reading or changing its body.
+    transport(fetcher) {
+        return async (url, init) => {
+            const id = this.context.getStore();
+            if (!id)
+                return fetcher(url, init);
+            const attempt = {
+                number: (this.traces.get(id)?.attempts.length ?? 0) + 1,
+            }, started = performance.now();
+            this.update(id, (t) => {
+                t.attempts.push(attempt);
+            });
+            try {
+                const response = await fetcher(url, init);
+                this.update(id, () => {
+                    attempt.durationMs = performance.now() - started;
+                    attempt.status = response.status;
+                });
+                return response;
+            }
+            catch (error) {
+                this.update(id, () => {
+                    attempt.durationMs = performance.now() - started;
+                    attempt.error =
+                        error instanceof Error ? error.name : "TransportError";
+                });
+                throw error;
+            }
+        };
+    }
+    // Preserve the SDK's original APIPromise (including map/withResponse/asResponse)
+    // and method receiver. The inspector reads a clone, never the caller's body.
+    instrument(client, meta) {
+        return new Proxy(client, {
+            get: (target, property) => {
+                if (property !== "systemOne") {
+                    const value = Reflect.get(target, property, target);
+                    return typeof value === "function" ? value.bind(target) : value;
+                }
+                return (request, options) => {
+                    const id = randomUUID(), started = performance.now(), warnings = new Set();
+                    let captured;
+                    try {
+                        captured = capture({ ...request, model: request.model ?? client.defaultModel }, warnings, this.options.redact);
+                    }
+                    catch {
+                        captured = {
+                            model: client.defaultModel,
+                            state: "[capture unavailable]",
+                            questions: {},
+                        };
+                        warnings.add("Input snapshot failed; request continues normally.");
+                    }
+                    this.traces.set(id, {
+                        version: 1,
+                        id,
+                        ...(typeof meta === "function" ? meta() : meta),
+                        startedAt: Date.now(),
+                        status: "pending",
+                        request: captured,
+                        attempts: [],
+                        captureWarnings: [...warnings],
+                    });
+                    while (this.traces.size > this.limit)
+                        this.traces.delete(this.traces.keys().next().value);
+                    this.notify();
+                    const fail = (error) => this.update(id, (t) => {
+                        const e = error;
+                        t.status = e.name === "APIUserAbortError" ? "cancelled" : "error";
+                        t.durationMs = performance.now() - started;
+                        t.error = {
+                            name: e.name || "Error",
+                            message: safeMessage(e.message || "Request failed"),
+                            status: e.status,
+                        };
+                        t.requestId = e.requestId;
+                    });
+                    try {
+                        const promise = this.context.run(id, () => target.systemOne(request, options));
+                        void promise
+                            .asResponse()
+                            .then(async (response) => {
+                            const data = await response.clone().json();
+                            this.update(id, (t) => {
+                                t.status = "success";
+                                t.durationMs = performance.now() - started;
+                                t.requestId =
+                                    response.headers.get("x-typesafe-request-id") ?? undefined;
+                                t.result = capture(data, warnings, this.options.redact);
+                                t.captureWarnings = [...warnings];
+                            });
+                        }, fail)
+                            .catch((error) => {
+                            fail(error);
+                        });
+                        return promise;
+                    }
+                    catch (error) {
+                        fail(error);
+                        throw error;
+                    }
+                };
+            },
+        });
+    }
+}

package/lib/src/ConnectedInspector.d.ts

@@ -0,0 +1,2 @@
+import type { JevDevtoolsProps } from "./index.js";
+export default function ConnectedInspector({ endpoint, defaultOpen, }: Omit<JevDevtoolsProps, "enabled">): import("react").JSX.Element;