jev-devtools 0.2.0 → 0.4.0

package/lib/flow/runtime.d.ts

@@ -0,0 +1,5 @@
+import type { Json } from "../src/protocol.js";
+/** Detached JSON snapshot, without capture truncation or lossy JSON.stringify. */
+export declare function jsonSnapshot(value: unknown, seen?: Set<object>, depth?: number): Json;
+/** Cancellation ends awaiting, even when user code ignores the cooperative signal. */
+export declare function runCallback(callback: (signal: AbortSignal) => unknown, parent: AbortSignal, timeoutMs?: number): Promise<unknown>;

package/lib/flow/runtime.js

@@ -0,0 +1,81 @@
+/** Detached JSON snapshot, without capture truncation or lossy JSON.stringify. */
+export function jsonSnapshot(value, seen = new Set(), depth = 0) {
+    if (depth > 40)
+        throw new TypeError("Task data nesting exceeds 40");
+    if (value === null || typeof value === "string" || typeof value === "boolean")
+        return value;
+    if (typeof value === "number" && Number.isFinite(value))
+        return value;
+    if (!value ||
+        typeof value !== "object" ||
+        (!Array.isArray(value) &&
+            Object.getPrototypeOf(value) !== Object.prototype &&
+            Object.getPrototypeOf(value) !== null))
+        throw new TypeError("Task inputs and outputs must be JSON-compatible");
+    if (seen.has(value))
+        throw new TypeError("Task data cannot contain cycles");
+    if (Object.getOwnPropertySymbols(value).length)
+        throw new TypeError("Task data cannot contain symbol keys");
+    seen.add(value);
+    try {
+        if (Array.isArray(value))
+            return Array.from(value, (v) => jsonSnapshot(v, seen, depth + 1));
+        return Object.fromEntries(Object.entries(value).map(([k, v]) => [
+            k,
+            jsonSnapshot(v, seen, depth + 1),
+        ]));
+    }
+    finally {
+        seen.delete(value);
+    }
+}
+/** Cancellation ends awaiting, even when user code ignores the cooperative signal. */
+export function runCallback(callback, parent, timeoutMs) {
+    const controller = new AbortController();
+    const started = performance.now();
+    return new Promise((resolve, reject) => {
+        let timer;
+        let settled = false;
+        const cleanup = () => {
+            clearTimeout(timer);
+            parent.removeEventListener("abort", cancel);
+        };
+        const finish = (error, value, failed = false) => {
+            if (settled)
+                return;
+            settled = true;
+            cleanup();
+            if (failed)
+                reject(error);
+            else
+                resolve(value);
+        };
+        const stop = (error) => {
+            controller.abort(error);
+            finish(error, undefined, true);
+        };
+        const cancel = () => stop(new DOMException("Flow cancelled", "AbortError"));
+        if (parent.aborted) {
+            cancel();
+            return;
+        }
+        parent.addEventListener("abort", cancel, { once: true });
+        if (timeoutMs !== undefined)
+            timer = setTimeout(() => stop(new DOMException("Task timed out", "TimeoutError")), timeoutMs);
+        Promise.resolve()
+            .then(() => {
+            if (controller.signal.aborted)
+                throw controller.signal.reason;
+            return callback(controller.signal);
+        })
+            .then((value) => {
+            // CPU-bound callbacks cannot be interrupted, but their late result must
+            // still not advance the flow after the configured deadline.
+            if (timeoutMs !== undefined &&
+                performance.now() - started >= timeoutMs)
+                stop(new DOMException("Task timed out", "TimeoutError"));
+            else
+                finish(undefined, value);
+        }, (error) => finish(error, undefined, true));
+    });
+}

package/lib/server/flows.d.ts

@@ -0,0 +1,28 @@
+import type { FlowDefinition, FlowRun, FlowUpdate } from "../src/flow-protocol.js";
+import { type CaptureOptions } from "./recorder.js";
+/** Independent bounded run store. Definitions are retained only while referenced. */
+export declare class FlowRecorder {
+    private options;
+    private runs;
+    private definitions;
+    private sessions;
+    private definitionRevisions;
+    private revisions;
+    private revision;
+    private listeners;
+    private itemCaptures;
+    private taskCaptures;
+    constructor(options: CaptureOptions);
+    subscribe(fn: (sessions: Set<string>) => void): () => void;
+    private notify;
+    start(definition: FlowDefinition, run: FlowRun, session: string): void;
+    private captureRun;
+    update(run: FlowRun): void;
+    private remove;
+    private prune;
+    clear(session: string): void;
+    changes(session: string, cursor?: number): {
+        revision: number;
+        data: FlowUpdate;
+    };
+}

package/lib/server/flows.js

@@ -0,0 +1,187 @@
+import { capture } from "./recorder.js";
+/** Independent bounded run store. Definitions are retained only while referenced. */
+export class FlowRecorder {
+    options;
+    runs = new Map();
+    definitions = new Map();
+    sessions = new Map();
+    definitionRevisions = new Map();
+    revisions = new Map();
+    revision = 0;
+    listeners = new Set();
+    itemCaptures = new WeakMap();
+    taskCaptures = new WeakMap();
+    constructor(options) {
+        this.options = options;
+    }
+    subscribe(fn) {
+        this.listeners.add(fn);
+        return () => {
+            this.listeners.delete(fn);
+        };
+    }
+    notify(sessions) {
+        for (const fn of this.listeners) {
+            try {
+                fn(sessions);
+            }
+            catch { }
+        }
+    }
+    start(definition, run, session) {
+        if (!this.definitions.has(definition.id)) {
+            const stored = structuredClone(definition);
+            const redactRules = (definition, prefix = []) => {
+                for (const node of definition.nodes) {
+                    if (node.itemDefinition)
+                        redactRules(node.itemDefinition, [...prefix, node.id, "items"]);
+                    if (node.conditionRule === undefined)
+                        continue;
+                    try {
+                        node.conditionRule = capture(node.conditionRule, new Set(), this.options.redact
+                            ? (path, value) => this.options.redact(["conditions", ...prefix, node.id, ...path], value)
+                            : undefined);
+                    }
+                    catch {
+                        node.conditionRule = "[rule capture unavailable]";
+                    }
+                }
+            };
+            redactRules(stored);
+            this.definitions.set(definition.id, stored);
+            this.definitionRevisions.set(definition.id, ++this.revision);
+        }
+        this.runs.set(run.id, run);
+        this.sessions.set(run.id, session);
+        this.revisions.set(run.id, ++this.revision);
+        const sessions = new Set([session]);
+        const limit = Math.max(1, Math.min(200, this.options.limit ?? 50));
+        while (this.runs.size > limit) {
+            const id = this.runs.keys().next().value;
+            sessions.add(this.sessions.get(id));
+            this.remove(id);
+        }
+        this.prune();
+        this.notify(sessions);
+    }
+    captureRun(run, prefix = []) {
+        // Child updates are immutable snapshots; unchanged items need no recapture.
+        const previous = prefix.length ? this.itemCaptures.get(run) : undefined;
+        if (previous)
+            return previous;
+        const stored = {
+            ...run,
+            steps: Object.fromEntries(Object.entries(run.steps).map(([id, raw]) => {
+                const step = { ...raw };
+                if (raw.collection)
+                    step.collection = {
+                        ...raw.collection,
+                        items: raw.collection.items.map((item) => ({
+                            ...item,
+                            ...(item.run
+                                ? {
+                                    run: this.captureRun(item.run, [
+                                        ...prefix,
+                                        "steps",
+                                        id,
+                                        "items",
+                                        String(item.index),
+                                    ]),
+                                }
+                                : {}),
+                        })),
+                    };
+                if (step.data === undefined)
+                    return [id, { ...step }];
+                const key = step.data;
+                let captured = key && typeof key === "object"
+                    ? this.taskCaptures.get(key)
+                    : undefined;
+                if (!captured) {
+                    const warnings = new Set();
+                    let data;
+                    try {
+                        data =
+                            capture(step.data, warnings, this.options.redact
+                                ? (path, value) => this.options.redact([...prefix, "steps", id, "data", ...path], value)
+                                : undefined) ?? null;
+                    }
+                    catch {
+                        data = "[capture unavailable]";
+                        warnings.add("Task capture unavailable.");
+                    }
+                    captured = { data, warnings: [...warnings] };
+                    if (key && typeof key === "object")
+                        this.taskCaptures.set(key, captured);
+                }
+                return [
+                    id,
+                    {
+                        ...step,
+                        data: captured.data,
+                        captureWarnings: captured.warnings,
+                    },
+                ];
+            })),
+        };
+        if ("value" in stored) {
+            try {
+                stored.value = capture(stored.value, new Set(), this.options.redact
+                    ? (path, value) => this.options.redact([...prefix, ...path], value)
+                    : undefined);
+            }
+            catch {
+                stored.value = "[capture unavailable]";
+            }
+        }
+        if (prefix.length)
+            this.itemCaptures.set(run, stored);
+        return stored;
+    }
+    update(run) {
+        if (!this.runs.has(run.id))
+            return; // Clear/eviction cannot resurrect pending runs.
+        this.runs.set(run.id, this.captureRun(run));
+        this.revisions.set(run.id, ++this.revision);
+        this.notify(new Set([this.sessions.get(run.id)]));
+    }
+    remove(id) {
+        this.runs.delete(id);
+        this.sessions.delete(id);
+        this.revisions.delete(id);
+    }
+    prune() {
+        const used = new Set([...this.runs.values()].map((r) => r.definitionId));
+        for (const id of this.definitions.keys())
+            if (!used.has(id)) {
+                this.definitions.delete(id);
+                this.definitionRevisions.delete(id);
+            }
+    }
+    clear(session) {
+        for (const id of this.runs.keys())
+            if (this.sessions.get(id) === session)
+                this.remove(id);
+        this.prune();
+        this.revision++;
+        this.notify(new Set([session]));
+    }
+    changes(session, cursor) {
+        const current = [...this.runs.values()]
+            .filter((r) => this.sessions.get(r.id) === session)
+            .reverse();
+        const used = new Set(current.map((r) => r.definitionId));
+        return {
+            revision: this.revision,
+            data: structuredClone({
+                version: 1,
+                definitions: [...used]
+                    .filter((id) => cursor === undefined ||
+                    this.definitionRevisions.get(id) > cursor)
+                    .map((id) => this.definitions.get(id)),
+                upserts: current.filter((r) => cursor === undefined || this.revisions.get(r.id) > cursor),
+                order: current.map((r) => r.id),
+            }),
+        };
+    }
+}

package/lib/server/index.d.ts

@@ -8,7 +8,10 @@ export type JevDevtoolsServerOptions = CaptureOptions & {
     enabled?: boolean;
     origin: string;
     endpoint?: string;
-    /** Required for non-loopback origins. Apply your application's authentication. */
+    /**
+     * Required for non-loopback origins. Without it, Node middleware only accepts
+     * loopback connections. 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>;
@@ -19,11 +22,21 @@ export type ClientMetadata = {
 };
 /** Node runtime adapter: framework-neutral Request/Response plus Node middleware. */
 export declare function createJevDevtools(options: JevDevtoolsServerOptions): {
+    startFlow: (definition: import("../src/flow-protocol.js").FlowDefinition, run: import("../src/flow-protocol.js").FlowRun) => {
+        update(run: import("../src/flow-protocol.js").FlowRun): void;
+        request<T>(link: {
+            runId: string;
+            stepId: string;
+            executionId: string;
+        }, onTrace: (id: string) => void, callback: () => T): T;
+    } | undefined;
     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.
+     * A Request does not expose the socket peer and any non-browser client can
+     * set Host, so bind the server to loopback or set authorize.
      */
     handleNodeRoute(request: Request): Promise<Response>;
     middleware: (req: IncomingMessage, res: ServerResponse, next: () => void) => Promise<void>;

package/lib/server/index.js

@@ -1,9 +1,12 @@
+import { FlowRecorder } from "./flows.js";
 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";
+// Host and Origin are client-controlled, so locality is decided by the socket peer.
+const isLoopback = (address = "") => address === "::1" || /^(::ffff:)?127\./.test(address);
 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) {
@@ -17,6 +20,7 @@ export function createJevDevtools(options) {
     if (options.enabled && !local && !options.authorize)
         throw new Error("Non-loopback inspector endpoints require authorize");
     const recorder = new JevRecorder(options), scope = new AsyncLocalStorage();
+    const flows = new FlowRecorder(options);
     const streams = new Set();
     const pending = new Set();
     const encoder = new TextEncoder();
@@ -91,15 +95,84 @@ export function createJevDevtools(options) {
             return json({ error: "Unauthorized" }, 403);
         const session = await sessionFor(request);
         if (url.pathname === endpoint && request.method === "GET")
-            return json({ version: 1, enabled: true });
+            return json({ version: 1, enabled: true, flows: 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);
+            flows.clear(session);
             return json({ ok: true });
         }
+        let flowPull = () => { };
+        if (url.pathname === endpoint + "/flows/events") {
+            if (request.method !== "GET")
+                return json({ error: "Method not allowed" }, 405);
+            let stop = () => { };
+            const body = new ReadableStream({
+                start(controller) {
+                    let closed = false, dirty = true, cursor, timer;
+                    const flush = () => {
+                        timer = undefined;
+                        if (closed || !dirty || (controller.desiredSize ?? 0) <= 0)
+                            return;
+                        dirty = false;
+                        const update = flows.changes(session, cursor);
+                        cursor = update.revision;
+                        controller.enqueue(encoder.encode(`event: flows\ndata: ${JSON.stringify(update.data)}\n\n`));
+                    };
+                    const wake = () => {
+                        if (!closed && dirty && !timer)
+                            timer = setImmediate(flush);
+                    };
+                    const unsubscribe = flows.subscribe((sessions) => {
+                        if (sessions.has(session)) {
+                            dirty = true;
+                            wake();
+                        }
+                    });
+                    const heartbeat = setInterval(() => {
+                        if (!closed && (controller.desiredSize ?? 0) > 0)
+                            controller.enqueue(encoder.encode(": keepalive\n\n"));
+                    }, 15000);
+                    stop = () => {
+                        if (closed)
+                            return;
+                        closed = true;
+                        unsubscribe();
+                        clearImmediate(timer);
+                        clearInterval(heartbeat);
+                        request.signal.removeEventListener("abort", stop);
+                        streams.delete(stop);
+                        try {
+                            controller.close();
+                        }
+                        catch { }
+                    };
+                    streams.add(stop);
+                    request.signal.addEventListener("abort", stop, { once: true });
+                    flowPull = wake;
+                    if (request.signal.aborted)
+                        stop();
+                    else
+                        flush();
+                },
+                pull() {
+                    flowPull();
+                },
+                cancel() {
+                    stop();
+                },
+            });
+            return new Response(body, {
+                headers: {
+                    "content-type": "text/event-stream",
+                    "cache-control": "no-store",
+                    "x-accel-buffering": "no",
+                },
+            });
+        }
         if (url.pathname !== endpoint + "/events")
             return json({ error: "Not found" }, 404);
         if (request.method !== "GET")
@@ -185,6 +258,17 @@ export function createJevDevtools(options) {
             next();
             return;
         }
+        if (enabled() &&
+            !options.authorize &&
+            !isLoopback(req.socket.remoteAddress)) {
+            res
+                .writeHead(403, {
+                "content-type": "application/json",
+                "cache-control": "no-store",
+            })
+                .end('{"error":"Loopback connections required without authorize"}');
+            return;
+        }
         const abort = new AbortController();
         res.once("close", () => abort.abort());
         try {
@@ -209,12 +293,27 @@ export function createJevDevtools(options) {
                 res.destroy();
         }
     }
+    const startFlow = (definition, run) => {
+        if (!enabled())
+            return;
+        flows.start(definition, run, scope.getStore() ?? "local");
+        return {
+            update: (next) => {
+                if (enabled())
+                    flows.update(next);
+            },
+            request: (link, onTrace, callback) => recorder.withFlow(link, onTrace, callback),
+        };
+    };
     return {
+        startFlow,
         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.
+         * A Request does not expose the socket peer and any non-browser client can
+         * set Host, so bind the server to loopback or set authorize.
          */
         handleNodeRoute(request) {
             if (!enabled())

package/lib/server/recorder.d.ts

@@ -1,10 +1,11 @@
 import { TypeSafeClient } from "@typesafe-ai/sdk";
 import type { Fetch } from "@typesafe-ai/sdk";
-import type { Trace } from "../src/protocol.js";
+import type { Json, Trace } from "../src/protocol.js";
 export type CaptureOptions = {
     limit?: number;
     redact?: (path: string[], value: unknown) => unknown;
 };
+export declare function capture(value: unknown, warnings: Set<string>, redact?: CaptureOptions["redact"]): Json;
 export declare class JevRecorder {
     private options;
     private traces;
@@ -12,6 +13,8 @@ export declare class JevRecorder {
     private revision;
     private revisions;
     private context;
+    private flowContext;
+    withFlow<T>(link: NonNullable<Trace["flow"]>, onTrace: (id: string) => void, callback: () => T): T;
     private limit;
     constructor(options?: CaptureOptions);
     snapshot(session: string): Trace[];

package/lib/server/recorder.js

@@ -5,7 +5,7 @@ const secretKey = /^(authorization|cookie|set-cookie|api[-_]?key|password|secret
 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) {
+export function capture(value, warnings, redact) {
     const seen = new WeakSet();
     let budget = 96_000;
     const visit = (input, path, depth) => {
@@ -67,10 +67,15 @@ function capture(value, warnings, redact) {
                 .map((v, i) => visit(v, [...path, String(i)], depth + 1));
         }
         const entries = Object.entries(input);
-        if (entries.length > 150)
+        // Choice maps need room for the full roster; retain the overall byte/depth
+        // budget and the smaller general-purpose object/array limit.
+        const entryLimit = ["criteria", "probabilities"].includes(path.at(-1) ?? "")
+            ? 256
+            : 150;
+        if (entries.length > entryLimit)
             warnings.add("Long collection truncated in capture.");
         return Object.fromEntries(entries
-            .slice(0, 150)
+            .slice(0, entryLimit)
             .map(([key, v]) => [key, visit(v, [...path, key], depth + 1)]));
     };
     return visit(value, [], 0);
@@ -82,6 +87,10 @@ export class JevRecorder {
     revision = 0;
     revisions = new WeakMap();
     context = new AsyncLocalStorage();
+    flowContext = new AsyncLocalStorage();
+    withFlow(link, onTrace, callback) {
+        return this.flowContext.run({ link, onTrace }, callback);
+    }
     limit;
     constructor(options = {}) {
         this.options = options;
@@ -196,6 +205,7 @@ export class JevRecorder {
                         version: 1,
                         id,
                         ...(typeof meta === "function" ? meta() : meta),
+                        flow: this.flowContext.getStore()?.link,
                         startedAt: Date.now(),
                         status: "pending",
                         request: captured,
@@ -203,6 +213,12 @@ export class JevRecorder {
                         captureWarnings: [...warnings],
                     });
                     const trace = this.traces.get(id);
+                    try {
+                        this.flowContext.getStore()?.onTrace(id);
+                    }
+                    catch {
+                        /* Observer only. */
+                    }
                     this.revisions.set(trace, ++this.revision);
                     const sessions = new Set([trace.session]);
                     while (this.traces.size > this.limit) {

package/lib/src/ChoiceProbabilities.js

@@ -10,7 +10,7 @@ export function ChoiceProbabilities({ answer }) {
     }, [rows, search]);
     const pages = Math.max(1, Math.ceil(filtered.length / 20));
     const current = Math.min(page, pages - 1);
-    return (_jsxs("div", { className: "lab-choice-browser", role: "region", "aria-label": "All Choice probabilities", children: [_jsxs("div", { className: "lab-choice-controls", children: [_jsxs("label", { children: ["Search categories", _jsx("input", { autoFocus: true, type: "search", value: search, onChange: (event) => {
+    return (_jsxs("div", { className: "lab-choice-browser", role: "region", "aria-label": "All Choice probabilities", "data-diagram-scroll": "", children: [_jsxs("div", { className: "lab-choice-controls", children: [_jsxs("label", { children: ["Search categories", _jsx("input", { autoFocus: true, type: "search", value: search, onChange: (event) => {
                                     setSearch(event.target.value);
                                     setPage(0);
                                 } })] }), _jsxs("span", { role: "status", children: [filtered.length, " of ", rows.length, " categories \u00B7 highest probability first"] })] }), _jsxs("div", { className: "lab-choice-table-scroll", tabIndex: 0, "aria-label": "Probability table", children: [_jsxs("table", { children: [_jsxs("caption", { children: ["Captured probabilities. Values are not renormalized. Returned choice: ", answer.choice ?? "unavailable", "."] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Category" }), _jsx("th", { scope: "col", children: "Probability" }), _jsx("th", { scope: "col", children: "Exact value (0\u20131)" })] }) }), _jsx("tbody", { children: filtered

package/lib/src/ConnectedInspector.js

@@ -3,6 +3,7 @@ import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { JevPanel } from "./JevDevtools.js";
 import { JevDrawer } from "./JevDrawer.js";
 import { connectTraceStream } from "./trace-stream.js";
+import { connectFlowStream, emptyFlows, } from "./flow-stream.js";
 const RetainedPanel = memo(JevPanel);
 function endpointUrl(endpoint) {
     const url = new URL(endpoint, window.location.origin);
@@ -18,7 +19,11 @@ export default function ConnectedInspector({ endpoint = "/api/jev-devtools", def
     const [open, setOpen] = useState(defaultOpen);
     const [visited, setVisited] = useState(defaultOpen);
     const visible = useRef(defaultOpen);
-    const latest = useRef({ traces: [], connection: "connecting" });
+    const latest = useRef({
+        traces: [],
+        connection: "connecting",
+        flows: emptyFlows,
+    });
     const [snapshot, setSnapshot] = useState(latest.current);
     const toggle = (value) => {
         visible.current = value;
@@ -29,20 +34,21 @@ export default function ConnectedInspector({ endpoint = "/api/jev-devtools", def
         }
     };
     useEffect(() => {
-        let alive = true, disconnect = () => { };
+        let alive = true, disconnect = () => { }, disconnectFlows = () => { };
         const abort = new AbortController();
         // Keep capture current while closed without scheduling React work. Reopening
         // publishes only the latest snapshot; the retained panel keeps its UI state.
         const update = (patch) => {
             const next = { ...latest.current, ...patch };
             if (next.traces === latest.current.traces &&
-                next.connection === latest.current.connection)
+                next.connection === latest.current.connection &&
+                next.flows === latest.current.flows)
                 return;
             latest.current = next;
             if (visible.current)
                 setSnapshot(latest.current);
         };
-        update({ traces: [], connection: "connecting" });
+        update({ traces: [], connection: "connecting", flows: emptyFlows });
         void (async () => {
             try {
                 const url = endpointUrl(endpoint);
@@ -59,6 +65,8 @@ export default function ConnectedInspector({ endpoint = "/api/jev-devtools", def
                     throw new Error("Unsupported inspector endpoint");
                 if (!alive)
                     return;
+                if (config.flows)
+                    disconnectFlows = connectFlowStream(url, (flows) => update({ flows }));
                 disconnect = connectTraceStream(url, (traces) => update({ traces }), (connection) => update({ connection }));
             }
             catch (error) {
@@ -72,6 +80,7 @@ export default function ConnectedInspector({ endpoint = "/api/jev-devtools", def
             alive = false;
             abort.abort();
             disconnect();
+            disconnectFlows();
         };
     }, [endpoint]);
     const clear = useCallback(async () => {

package/lib/src/DiagramContent.d.ts

@@ -0,0 +1,6 @@
+import type { Json } from "./protocol.js";
+/** Bounded, lazy property rendering inside a fixed-size diagram card. */
+export declare const DiagramContent: import("react").MemoExoticComponent<({ value, label, }: {
+    value: Json | undefined;
+    label: string;
+}) => import("react").JSX.Element>;