jev-devtools 0.1.3 → 0.2.0

package/README.md

@@ -1,11 +1,13 @@
 # Jev DevTools
 
-[![npm version 0.1.3](https://img.shields.io/badge/npm-v0.1.3-E551BA?labelColor=0D0A0F&logo=npm)](https://www.npmjs.com/package/jev-devtools/v/0.1.3)
+[![npm version 0.2.0](https://img.shields.io/badge/npm-v0.2.0-E551BA?labelColor=0D0A0F&logo=npm)](https://www.npmjs.com/package/jev-devtools/v/0.2.0)
 
 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.
 
+[Changelog and release history](https://github.com/diegoag64/jev-devtools/blob/main/CHANGELOG.md) — published versions and unreleased work.
+
 ## 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)
@@ -42,7 +44,7 @@ To try unpublished local changes instead:
 npm ci
 npm run pack:devtools
 # From the consuming app:
-npm install /absolute/path/to/jev-devtools-0.1.3.tgz
+npm install /absolute/path/to/jev-devtools-0.2.0.tgz
 ```
 
 Mount once:
@@ -69,7 +71,7 @@ app.use(inspector.middleware); // Mount at root, before fallback 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. The drawer uses a Shadow DOM boundary and its own stylesheet so host page selectors cannot alter its internal layout. Existing stylesheet imports remain supported; no Tailwind or shadcn installation is required. Drag the Flow canvas to pan, scroll/pinch to zoom, or use Fit.
+Only calls through that client are captured. The React component subscribes via same-origin SSE, receiving an initial snapshot followed by changed traces. Older client/server combinations remain compatible through full snapshots. Both sides default to disabled. API keys remain server-side. Browser code is SSR-safe. The drawer uses a Shadow DOM boundary and its own stylesheet so host page selectors cannot alter its internal layout. Existing stylesheet imports remain supported; no Tailwind or shadcn installation is required. Drag the Flow canvas to pan, scroll/pinch to zoom, or use Fit.
 
 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.
 

package/THIRD_PARTY_NOTICES.txt

@@ -48,3 +48,30 @@ 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.
+
+TanStack Virtual
+
+Questions virtualization uses @tanstack/react-virtual and @tanstack/virtual-core.
+https://github.com/TanStack/virtual
+
+MIT License
+
+Copyright (c) 2021-present Tanner Linsley
+
+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/lib/server/index.js

@@ -18,6 +18,57 @@ export function createJevDevtools(options) {
         throw new Error("Non-loopback inspector endpoints require authorize");
     const recorder = new JevRecorder(options), scope = new AsyncLocalStorage();
     const streams = new Set();
+    const pending = new Set();
+    const encoder = new TextEncoder();
+    let scheduled;
+    const encodeUpdate = (session, incremental, cursor) => {
+        if (!incremental)
+            return {
+                bytes: encoder.encode(`event: snapshot\ndata: ${JSON.stringify({ version: 1, traces: recorder.snapshot(session) })}\n\n`),
+                revision: 0,
+            };
+        const { revision, upserts, order } = recorder.changes(session, cursor);
+        const initial = cursor === undefined;
+        const data = initial
+            ? { version: 2, revision, traces: upserts }
+            : { version: 2, base: cursor, revision, upserts, order };
+        return {
+            bytes: encoder.encode(`event: ${initial ? "snapshot" : "delta"}\ndata: ${JSON.stringify(data)}\n\n`),
+            revision,
+        };
+    };
+    function schedule(flush) {
+        pending.add(flush);
+        if (scheduled)
+            return;
+        scheduled = setImmediate(() => {
+            scheduled = undefined;
+            const batch = [...pending];
+            pending.clear();
+            // Cache only for this synchronous delivery turn and only within a session.
+            // Each reader owns its bytes; mutating one Response must not corrupt another.
+            const encoded = new Map();
+            const updateFor = (session, incremental, cursor) => {
+                // Slow readers can have older cursors even in the same session.
+                const key = JSON.stringify([session, incremental, cursor]);
+                let update = encoded.get(key);
+                if (!update) {
+                    update = encodeUpdate(session, incremental, cursor);
+                    encoded.set(key, update);
+                }
+                return { bytes: update.bytes.slice(), revision: update.revision };
+            };
+            for (const deliver of batch)
+                deliver(updateFor);
+        });
+    }
+    function unschedule(flush) {
+        pending.delete(flush);
+        if (!pending.size && scheduled) {
+            clearImmediate(scheduled);
+            scheduled = undefined;
+        }
+    }
     let disposed = false;
     const enabled = () => options.enabled === true && !disposed;
     const sessionFor = async (request) => {
@@ -53,20 +104,36 @@ export function createJevDevtools(options) {
             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 incremental = url.searchParams.get("protocol") === "2";
+        let cursor;
+        let cleanup = () => { }, wake = () => { }, flush = () => { };
         const stream = new ReadableStream({
             start(controller) {
                 let closed = false, dirty = true;
-                flush = () => {
+                flush = (updateFor) => {
                     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`));
+                    try {
+                        const update = updateFor(session, incremental, cursor);
+                        controller.enqueue(update.bytes);
+                        cursor = update.revision;
+                    }
+                    catch {
+                        // Deferred observer failures must not escape into the application's
+                        // event loop or prevent other viewers from receiving their update.
+                        cleanup();
+                    }
+                };
+                wake = () => {
+                    if (!closed && dirty && (controller.desiredSize ?? 0) > 0)
+                        schedule(flush);
                 };
-                const unsubscribe = recorder.subscribe(() => {
+                const unsubscribe = recorder.subscribe((sessions) => {
+                    if (!sessions.has(session))
+                        return;
                     dirty = true;
-                    flush();
+                    wake();
                 });
                 const heartbeat = setInterval(() => {
                     if (!closed && (controller.desiredSize ?? 0) > 0)
@@ -77,6 +144,7 @@ export function createJevDevtools(options) {
                         return;
                     closed = true;
                     unsubscribe();
+                    unschedule(flush);
                     clearInterval(heartbeat);
                     request.signal.removeEventListener("abort", cleanup);
                     streams.delete(cleanup);
@@ -92,10 +160,12 @@ export function createJevDevtools(options) {
                 if (request.signal.aborted)
                     cleanup();
                 else
-                    flush();
+                    flush(encodeUpdate);
             },
             pull() {
-                flush();
+                // Reading must not bypass the batching boundary. A full queue retains
+                // only a dirty flag; the next readable turn delivers current history.
+                wake();
             },
             cancel() {
                 cleanup();

package/lib/server/recorder.d.ts

@@ -9,11 +9,18 @@ export declare class JevRecorder {
     private options;
     private traces;
     private listeners;
+    private revision;
+    private revisions;
     private context;
     private limit;
     constructor(options?: CaptureOptions);
     snapshot(session: string): Trace[];
-    subscribe(listener: () => void): () => void;
+    changes(session: string, after?: number): {
+        revision: number;
+        order: string[];
+        upserts: Trace[];
+    };
+    subscribe(listener: (sessions: ReadonlySet<string>) => void): () => void;
     clear(session: string): void;
     private notify;
     private update;

package/lib/server/recorder.js

@@ -79,6 +79,8 @@ export class JevRecorder {
     options;
     traces = new Map();
     listeners = new Set();
+    revision = 0;
+    revisions = new WeakMap();
     context = new AsyncLocalStorage();
     limit;
     constructor(options = {}) {
@@ -88,6 +90,18 @@ export class JevRecorder {
     snapshot(session) {
         return structuredClone([...this.traces.values()].filter((t) => t.session === session).reverse());
     }
+    // Only changed payloads are cloned. IDs/order are bounded by the retained
+    // history; no tombstone log or per-session history cache is needed.
+    changes(session, after) {
+        const current = [...this.traces.values()]
+            .filter((t) => t.session === session)
+            .reverse();
+        return {
+            revision: this.revision,
+            order: current.map((t) => t.id),
+            upserts: structuredClone(current.filter((t) => after === undefined || this.revisions.get(t) > after)),
+        };
+    }
     subscribe(listener) {
         this.listeners.add(listener);
         return () => {
@@ -95,15 +109,21 @@ export class JevRecorder {
         };
     }
     clear(session) {
+        let changed = false;
         for (const [id, t] of this.traces)
-            if (t.session === session)
+            if (t.session === session) {
                 this.traces.delete(id);
-        this.notify();
+                changed = true;
+            }
+        if (changed) {
+            this.revision++;
+            this.notify(new Set([session]));
+        }
     }
-    notify() {
+    notify(sessions) {
         for (const listener of this.listeners) {
             try {
-                listener();
+                listener(sessions);
             }
             catch {
                 /* Observers must not affect inference. */
@@ -114,7 +134,8 @@ export class JevRecorder {
         const t = this.traces.get(id);
         if (t) {
             update(t);
-            this.notify();
+            this.revisions.set(t, ++this.revision);
+            this.notify(new Set([t.session]));
         }
     }
     // Use this in TypeSafeClient's supported `fetch` option. It observes attempts
@@ -181,9 +202,15 @@ export class JevRecorder {
                         attempts: [],
                         captureWarnings: [...warnings],
                     });
-                    while (this.traces.size > this.limit)
-                        this.traces.delete(this.traces.keys().next().value);
-                    this.notify();
+                    const trace = this.traces.get(id);
+                    this.revisions.set(trace, ++this.revision);
+                    const sessions = new Set([trace.session]);
+                    while (this.traces.size > this.limit) {
+                        const oldest = this.traces.values().next().value;
+                        sessions.add(oldest.session);
+                        this.traces.delete(oldest.id);
+                    }
+                    this.notify(sessions);
                     const fail = (error) => this.update(id, (t) => {
                         const e = error;
                         t.status = e.name === "APIUserAbortError" ? "cancelled" : "error";

package/lib/src/ChoiceProbabilities.d.ts

@@ -0,0 +1,4 @@
+import type { AnswerView } from "./protocol.js";
+export declare function ChoiceProbabilities({ answer }: {
+    answer: AnswerView;
+}): import("react").JSX.Element;

package/lib/src/ChoiceProbabilities.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+export function ChoiceProbabilities({ answer }) {
+    const [search, setSearch] = useState("");
+    const [page, setPage] = useState(0);
+    const rows = useMemo(() => Object.entries(answer.probabilities ?? {}).sort((a, b) => b[1] - a[1]), [answer.probabilities]);
+    const filtered = useMemo(() => {
+        const query = search.trim().toLocaleLowerCase();
+        return rows.filter(([label]) => label.toLocaleLowerCase().includes(query));
+    }, [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) => {
+                                    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
+                                    .slice(current * 20, (current + 1) * 20)
+                                    .map(([label, value]) => (_jsxs("tr", { children: [_jsxs("th", { scope: "row", children: [label, label === answer.choice && (_jsx("span", { className: "lab-choice-returned", children: "Returned choice" }))] }), _jsxs("td", { children: [Number((value * 100).toPrecision(6)), "%"] }), _jsx("td", { children: _jsx("code", { children: String(value) }) })] }, label))) })] }), !filtered.length && _jsx("p", { children: "No matching categories." })] }), _jsxs("div", { className: "lab-choice-pagination", children: [_jsx("button", { disabled: current === 0, onClick: () => setPage(current - 1), children: "Previous categories" }), _jsxs("span", { "aria-live": "polite", children: ["Page ", current + 1, " of ", pages] }), _jsx("button", { disabled: current + 1 >= pages, onClick: () => setPage(current + 1), children: "Next categories" })] })] }));
+}

package/lib/src/ConnectedInspector.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { JevPanel } from "./JevDevtools.js";
 import { JevDrawer } from "./JevDrawer.js";
+import { connectTraceStream } from "./trace-stream.js";
+const RetainedPanel = memo(JevPanel);
 function endpointUrl(endpoint) {
     const url = new URL(endpoint, window.location.origin);
     if (url.origin !== window.location.origin ||
@@ -13,12 +15,34 @@ function endpointUrl(endpoint) {
     return url.href.replace(/\/$/, "");
 }
 export default function ConnectedInspector({ endpoint = "/api/jev-devtools", defaultOpen = true, }) {
-    const [traces, setTraces] = useState([]), [connection, setConnection] = useState("connecting");
+    const [open, setOpen] = useState(defaultOpen);
+    const [visited, setVisited] = useState(defaultOpen);
+    const visible = useRef(defaultOpen);
+    const latest = useRef({ traces: [], connection: "connecting" });
+    const [snapshot, setSnapshot] = useState(latest.current);
+    const toggle = (value) => {
+        visible.current = value;
+        setOpen(value);
+        if (value) {
+            setVisited(true);
+            setSnapshot(latest.current);
+        }
+    };
     useEffect(() => {
-        let alive = true, events;
+        let alive = true, disconnect = () => { };
         const abort = new AbortController();
-        setTraces([]);
-        setConnection("connecting");
+        // 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)
+                return;
+            latest.current = next;
+            if (visible.current)
+                setSnapshot(latest.current);
+        };
+        update({ traces: [], connection: "connecting" });
         void (async () => {
             try {
                 const url = endpointUrl(endpoint);
@@ -35,44 +59,28 @@ export default function ConnectedInspector({ endpoint = "/api/jev-devtools", def
                     throw new Error("Unsupported inspector endpoint");
                 if (!alive)
                     return;
-                events = new EventSource(url + "/events");
-                events.addEventListener("snapshot", (event) => {
-                    if (!alive)
-                        return;
-                    try {
-                        const data = JSON.parse(event.data);
-                        if (data.version !== 1 || !Array.isArray(data.traces))
-                            throw new Error();
-                        setTraces(data.traces);
-                        setConnection("connected");
-                    }
-                    catch {
-                        setConnection("Invalid inspector update");
-                    }
-                });
-                events.onerror = () => {
-                    if (alive)
-                        setConnection("reconnecting");
-                };
+                disconnect = connectTraceStream(url, (traces) => update({ traces }), (connection) => update({ connection }));
             }
             catch (error) {
                 if (alive)
-                    setConnection(error instanceof Error ? error.message : "Inspector unavailable");
+                    update({
+                        connection: error instanceof Error ? error.message : "Inspector unavailable",
+                    });
             }
         })();
         return () => {
             alive = false;
             abort.abort();
-            events?.close();
+            disconnect();
         };
     }, [endpoint]);
-    async function clear() {
+    const clear = useCallback(async () => {
         const response = await fetch(endpointUrl(endpoint) + "/clear", {
             method: "DELETE",
             credentials: "same-origin",
         });
         if (!response.ok)
             throw new Error(`Cannot clear history (${response.status})`);
-    }
-    return (_jsx(JevDrawer, { defaultOpen: defaultOpen, children: _jsx(JevPanel, { traces: traces, connection: connection, onClear: clear }) }));
+    }, [endpoint]);
+    return (_jsx(JevDrawer, { open: open, onOpenChange: toggle, children: visited && _jsx(RetainedPanel, { ...snapshot, onClear: clear }) }));
 }

package/lib/src/JevDevtools.js

@@ -1,58 +1,48 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { lazy, memo, startTransition, Suspense, useMemo, useState, } from "react";
 import { TraceDiagram } from "./TraceDiagram.js";
-const pretty = (value) => JSON.stringify(value, null, 2);
+import { JsonBlock, findImage } from "./TraceContent.js";
+let questionsLoaded = false;
+const Questions = lazy(() => import("./Questions.js").then((module) => {
+    questionsLoaded = true;
+    return { default: module.Questions };
+}));
 const ms = (value) => value === undefined ? "—" : `${Math.round(value)} ms`;
-const percent = (value) => `${Math.round(value * 100)}%`;
-function findImage(value) {
-    if (!value || typeof value !== "object")
-        return;
-    if (!Array.isArray(value) &&
-        typeof value.preview === "string" &&
-        /^data:image\/(png|jpeg);base64,/.test(value.preview))
-        return value.preview;
-    for (const child of Object.values(value)) {
-        const found = findImage(child);
-        if (found)
-            return found;
-    }
-}
-function JsonBlock({ value }) {
-    return _jsx("pre", { children: pretty(value) });
-}
-function Answer({ answer, image }) {
-    if (!answer)
-        return _jsx("p", { className: "muted", children: "No answer received." });
-    return (_jsxs("div", { className: "answer", children: [answer.choice !== undefined && (_jsx("strong", { className: "answer-value", children: answer.choice })), answer.score !== undefined && (_jsxs("strong", { className: "answer-value", children: [answer.score.toFixed(2), " ", _jsx("small", { children: "score" })] })), answer.noul !== undefined && (_jsxs(_Fragment, { children: [_jsxs("strong", { className: "answer-value", children: [percent(answer.noul), " ", _jsx("small", { children: "probability of true" })] }), _jsx("div", { className: "bar", children: _jsx("i", { style: { width: percent(answer.noul) } }) })] })), answer.probabilities &&
-                Object.entries(answer.probabilities).map(([label, value]) => (_jsxs("div", { className: "probability", children: [_jsxs("div", { children: [_jsx("span", { children: label }), _jsx("b", { children: percent(value) })] }), _jsx("div", { className: "bar", children: _jsx("i", { style: { width: percent(value) } }) })] }, label))), answer.legend && (_jsxs("details", { children: [_jsx("summary", { children: "Score legend" }), _jsx(JsonBlock, { value: answer.legend })] })), answer.box && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "box-preview", children: [image ? (_jsx("img", { src: image, alt: "Captured request image" })) : (_jsx("span", { children: "Image preview unavailable" })), _jsx("div", { className: "bounding-box", style: {
-                                    left: percent(answer.box.left),
-                                    top: percent(answer.box.top),
-                                    width: percent(answer.box.right - answer.box.left),
-                                    height: percent(answer.box.bottom - answer.box.top),
-                                } })] }), _jsx("code", { className: "coordinates", children: Object.entries(answer.box)
-                            .map(([k, v]) => `${k} ${v.toFixed(2)}`)
-                            .join(" · ") })] })), answer.confidence !== undefined && (_jsxs("p", { className: "confidence", children: ["Confidence ", _jsx("b", { children: percent(answer.confidence) })] }))] }));
-}
+// Delta updates retain unchanged Trace references. Default shallow comparison
+// skips their render work while changed traces and selection still update.
+const RequestRow = memo(function RequestRow({ trace, selected, onSelect, }) {
+    return (_jsxs("button", { className: `request-row ${selected ? "selected" : ""}`, onClick: () => onSelect(trace.id), children: [_jsx("span", { className: `status-dot ${trace.status}` }), _jsxs("span", { children: [_jsx("strong", { children: trace.label }), _jsxs("small", { children: [new Date(trace.startedAt).toLocaleTimeString(), " \u00B7 ", trace.source, " \u00B7", " ", ms(trace.durationMs)] })] }), _jsx("span", { className: "row-status", children: trace.status })] }));
+});
+const RequestDetail = memo(function RequestDetail({ trace, }) {
+    // Keep tab selection across request switches and clear, as before. Local tab
+    // changes no longer rerender the history list.
+    const [tab, setTab] = useState("Flow");
+    return (_jsx("section", { className: "request-detail", children: trace ? (_jsxs(_Fragment, { children: [_jsxs("header", { className: "detail-header", children: [_jsxs("div", { children: [_jsxs("span", { className: "eyebrow", children: [trace.source, " response \u00B7 ", trace.status] }), _jsx("h2", { children: trace.label })] }), _jsxs("div", { className: "metrics", children: [_jsxs("span", { children: [ms(trace.durationMs), _jsx("small", { children: "Total duration" })] }), _jsxs("span", { children: [trace.attempts.length, _jsx("small", { children: "Attempts" })] }), _jsxs("span", { children: [trace.result?.usage
+                                            ? `${trace.result.usage.input_tokens} / ${trace.result.usage.output_tokens}`
+                                            : "—", _jsx("small", { children: "Tokens in / out" })] })] })] }), _jsxs("div", { className: "detail-meta", children: [_jsx("code", { children: trace.result?.model || trace.request.model }), _jsx("code", { children: trace.requestId ||
+                                (trace.status === "pending"
+                                    ? "Request ID pending"
+                                    : "No request ID") })] }), _jsx("nav", { className: "detail-tabs", "aria-label": "Request views", children: ["Flow", "Questions", "Context", "Transport", "Raw"].map((name) => (_jsx("button", { "aria-pressed": tab === name, onClick: () => {
+                            // Keep the current view while its chunk loads, but don't
+                            // defer subsequent opens once the component is available.
+                            if (name === "Questions" && !questionsLoaded)
+                                startTransition(() => setTab(name));
+                            else
+                                setTab(name);
+                        }, children: name }, name))) }), _jsx("div", { className: `detail-body ${tab === "Flow" ? "detail-body-flow" : tab === "Questions" ? "detail-body-questions" : ""}`, children: _jsxs(Suspense, { fallback: _jsx("p", { className: "muted", role: "status", children: "Loading questions\u2026" }), children: [trace.error && (_jsxs("div", { role: "alert", className: "error-banner", children: [_jsx("strong", { children: trace.error.name }), " ", trace.error.message] })), trace.captureWarnings.map((w) => (_jsx("p", { className: "warning", children: w }, w))), tab === "Flow" && _jsx(TraceDiagram, { trace: trace }, trace.id), tab === "Questions" && (_jsx(Questions, { trace: trace }, trace.id)), tab === "Context" && (_jsxs(_Fragment, { children: [_jsx("p", { className: "muted", children: "Captured before dispatch. Known credential fields and email are redacted; captures are size limited." }), findImage(trace.request.state) && (_jsx("img", { className: "context-image", src: findImage(trace.request.state), alt: "Captured context" })), _jsx(JsonBlock, { value: trace.request.state }), trace.request.assets && (_jsx(JsonBlock, { value: trace.request.assets }))] })), tab === "Transport" && (_jsxs(_Fragment, { children: [_jsx("h3", { children: "HTTP attempts" }), _jsx("p", { className: "muted", children: "Attempt duration ends at response headers. Total duration includes SDK processing and retry waits." }), _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Attempt" }), _jsx("th", { children: "Status" }), _jsx("th", { children: "Duration" })] }) }), _jsx("tbody", { children: trace.attempts.map((a) => (_jsxs("tr", { children: [_jsx("td", { children: a.number }), _jsx("td", { children: a.error || a.status || "Pending" }), _jsx("td", { children: ms(a.durationMs) })] }, a.number))) })] }), !trace.attempts.length && _jsx("p", { children: "No HTTP attempt recorded." })] })), tab === "Raw" && _jsx(JsonBlock, { value: trace })] }) })] })) : (_jsxs("div", { className: "empty-detail", children: [_jsx("span", { className: "empty-symbol", children: "\u21B3" }), _jsx("h2", { children: "Follow a Jev request" }), _jsxs("p", { children: ["Context, parallel questions, typed answers.", _jsx("br", {}), "Run a sample above to see the complete flow."] })] })) }));
+});
 export function JevPanel({ traces, connection, onClear, }) {
     const [selected, setSelected] = useState();
-    const [tab, setTab] = useState("Flow");
     const [search, setSearch] = useState("");
     const [status, setStatus] = useState("all");
     const [error, setError] = useState("");
-    const filtered = traces.filter((t) => (status === "all" || status === t.status) &&
-        `${t.label} ${t.request.model} ${t.id}`
-            .toLowerCase()
-            .includes(search.toLowerCase()));
+    const filtered = useMemo(() => {
+        const query = search.toLowerCase();
+        return traces.filter((t) => (status === "all" || status === t.status) &&
+            `${t.label} ${t.request.model} ${t.id}`.toLowerCase().includes(query));
+    }, [traces, search, status]);
     const trace = filtered.find((t) => t.id === selected) || filtered[0];
-    return (_jsxs("div", { className: "jev-inspector", children: [_jsxs("aside", { className: "request-list", children: [_jsxs("header", { children: [_jsxs("h2", { children: ["Jev requests ", _jsx("span", { children: traces.length })] }), _jsx("button", { onClick: () => void onClear().catch((e) => setError(e.message)), disabled: !traces.length, children: "Clear" })] }), _jsxs("div", { className: "list-filters", children: [_jsx("input", { "aria-label": "Search requests", placeholder: "Search requests\u2026", value: search, onChange: (e) => setSearch(e.target.value) }), _jsx("select", { "aria-label": "Filter request status", value: status, onChange: (e) => setStatus(e.target.value), children: ["all", "pending", "success", "error", "cancelled"].map((s) => (_jsx("option", { children: s }, s))) })] }), _jsxs("div", { className: "request-items", children: [filtered.map((t) => (_jsxs("button", { className: `request-row ${trace?.id === t.id ? "selected" : ""}`, onClick: () => setSelected(t.id), children: [_jsx("span", { className: `status-dot ${t.status}` }), _jsxs("span", { children: [_jsx("strong", { children: t.label }), _jsxs("small", { children: [new Date(t.startedAt).toLocaleTimeString(), " \u00B7 ", t.source, " \u00B7", " ", ms(t.durationMs)] })] }), _jsx("span", { className: "row-status", children: t.status })] }, t.id))), !filtered.length && (_jsx("p", { className: "empty", children: traces.length
+    return (_jsxs("div", { className: "jev-inspector", children: [_jsxs("aside", { className: "request-list", children: [_jsxs("header", { children: [_jsxs("h2", { children: ["Jev requests ", _jsx("span", { children: traces.length })] }), _jsx("button", { onClick: () => void onClear().catch((e) => setError(e.message)), disabled: !traces.length, children: "Clear" })] }), _jsxs("div", { className: "list-filters", children: [_jsx("input", { "aria-label": "Search requests", placeholder: "Search requests\u2026", value: search, onChange: (e) => setSearch(e.target.value) }), _jsx("select", { "aria-label": "Filter request status", value: status, onChange: (e) => setStatus(e.target.value), children: ["all", "pending", "success", "error", "cancelled"].map((s) => (_jsx("option", { children: s }, s))) })] }), _jsxs("div", { className: "request-items", children: [filtered.map((t) => (_jsx(RequestRow, { trace: t, selected: trace?.id === t.id, onSelect: setSelected }, t.id))), !filtered.length && (_jsx("p", { className: "empty", children: traces.length
                                     ? "No matching requests."
-                                    : "Run a scenario to capture your first request." }))] }), (connection !== "connected" || error) && (_jsxs("footer", { children: [connection !== "connected" && (_jsx("span", { role: "status", children: connection })), error && _jsx("p", { role: "alert", children: error })] }))] }), _jsx("section", { className: "request-detail", children: trace ? (_jsxs(_Fragment, { children: [_jsxs("header", { className: "detail-header", children: [_jsxs("div", { children: [_jsxs("span", { className: "eyebrow", children: [trace.source, " response \u00B7 ", trace.status] }), _jsx("h2", { children: trace.label })] }), _jsxs("div", { className: "metrics", children: [_jsxs("span", { children: [ms(trace.durationMs), _jsx("small", { children: "Total duration" })] }), _jsxs("span", { children: [trace.attempts.length, _jsx("small", { children: "Attempts" })] }), _jsxs("span", { children: [trace.result?.usage
-                                                    ? `${trace.result.usage.input_tokens} / ${trace.result.usage.output_tokens}`
-                                                    : "—", _jsx("small", { children: "Tokens in / out" })] })] })] }), _jsxs("div", { className: "detail-meta", children: [_jsx("code", { children: trace.result?.model || trace.request.model }), _jsx("code", { children: trace.requestId ||
-                                        (trace.status === "pending"
-                                            ? "Request ID pending"
-                                            : "No request ID") })] }), _jsx("nav", { className: "detail-tabs", "aria-label": "Request views", children: ["Flow", "Questions", "Context", "Transport", "Raw"].map((name) => (_jsx("button", { "aria-pressed": tab === name, onClick: () => setTab(name), children: name }, name))) }), _jsxs("div", { className: `detail-body ${tab === "Flow" ? "detail-body-flow" : ""}`, children: [trace.error && (_jsxs("div", { role: "alert", className: "error-banner", children: [_jsx("strong", { children: trace.error.name }), " ", trace.error.message] })), trace.captureWarnings.map((w) => (_jsx("p", { className: "warning", children: w }, w))), tab === "Flow" && _jsx(TraceDiagram, { trace: trace }, trace.id), tab === "Questions" &&
-                                    Object.entries(trace.request.questions ?? {})
-                                        .filter(([, q]) => q && typeof q === "object" && typeof q.type === "string")
-                                        .map(([key, q]) => (_jsxs("article", { className: "question-node standalone", children: [_jsxs("header", { children: [_jsx("h3", { children: key }), _jsx("span", { className: "type", children: q.type })] }), _jsx(JsonBlock, { value: q }), _jsx(Answer, { answer: trace.result?.answers[key], image: findImage(trace.request.state) })] }, key))), tab === "Context" && (_jsxs(_Fragment, { children: [_jsx("p", { className: "muted", children: "Captured before dispatch. Known credential fields and email are redacted; captures are size limited." }), findImage(trace.request.state) && (_jsx("img", { className: "context-image", src: findImage(trace.request.state), alt: "Captured context" })), _jsx(JsonBlock, { value: trace.request.state }), trace.request.assets && (_jsx(JsonBlock, { value: trace.request.assets }))] })), tab === "Transport" && (_jsxs(_Fragment, { children: [_jsx("h3", { children: "HTTP attempts" }), _jsx("p", { className: "muted", children: "Attempt duration ends at response headers. Total duration includes SDK processing and retry waits." }), _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Attempt" }), _jsx("th", { children: "Status" }), _jsx("th", { children: "Duration" })] }) }), _jsx("tbody", { children: trace.attempts.map((a) => (_jsxs("tr", { children: [_jsx("td", { children: a.number }), _jsx("td", { children: a.error || a.status || "Pending" }), _jsx("td", { children: ms(a.durationMs) })] }, a.number))) })] }), !trace.attempts.length && _jsx("p", { children: "No HTTP attempt recorded." })] })), tab === "Raw" && _jsx(JsonBlock, { value: trace })] })] })) : (_jsxs("div", { className: "empty-detail", children: [_jsx("span", { className: "empty-symbol", children: "\u21B3" }), _jsx("h2", { children: "Follow a Jev request" }), _jsxs("p", { children: ["Context, parallel questions, typed answers.", _jsx("br", {}), "Run a sample above to see the complete flow."] })] })) })] }));
+                                    : "Run a scenario to capture your first request." }))] }), (connection !== "connected" || error) && (_jsxs("footer", { children: [connection !== "connected" && (_jsx("span", { role: "status", children: connection })), error && _jsx("p", { role: "alert", children: error })] }))] }), _jsx(RequestDetail, { trace: trace })] }));
 }

package/lib/src/JevDrawer.d.ts

@@ -1,6 +1,7 @@
 import { type ReactNode } from "react";
 /** Non-modal drawer: the app remains usable and children stay mounted when closed. */
-export declare function JevDrawer({ children, defaultOpen, }: {
+export declare function JevDrawer({ children, open, onOpenChange, }: {
     children: ReactNode;
-    defaultOpen?: boolean;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
 }): import("react").ReactPortal | null;

package/lib/src/JevDrawer.js

@@ -25,10 +25,9 @@ function initialHeight() {
     return clamp(Math.min(420, viewportHeight() * 0.56), viewportHeight());
 }
 /** Non-modal drawer: the app remains usable and children stay mounted when closed. */
-export function JevDrawer({ children, defaultOpen = true, }) {
+export function JevDrawer({ children, open, onOpenChange, }) {
     const id = useId();
     const [root, setRoot] = useState(null);
-    const [open, setOpen] = useState(defaultOpen);
     const [expanded, setExpanded] = useState(false);
     const [viewport, setViewport] = useState(viewportHeight);
     const [height, setHeight] = useState(initialHeight);
@@ -39,6 +38,16 @@ export function JevDrawer({ children, defaultOpen = true, }) {
     const drag = useRef(null);
     const { min, max } = limits(viewport);
     const visibleHeight = expanded ? max : clamp(height, viewport);
+    useEffect(() => {
+        // Retain the diagram and its camera, but suspend native SVG timelines while
+        // hidden. This does not change the user's Pause/Play flow preference.
+        panel.current?.querySelectorAll("svg").forEach((svg) => {
+            if (open)
+                svg.unpauseAnimations();
+            else
+                svg.pauseAnimations();
+        });
+    }, [open, root]);
     useEffect(() => {
         const host = document.createElement("jev-devtools-root");
         // The host is the only element exposed to page selectors. The overlay itself
@@ -76,7 +85,7 @@ export function JevDrawer({ children, defaultOpen = true, }) {
     }, [open, root]);
     const toggle = (value) => {
         interacted.current = true;
-        setOpen(value);
+        onOpenChange(value);
     };
     const resizeTo = (value) => {
         setExpanded(false);

package/lib/src/Questions.d.ts

@@ -0,0 +1,5 @@
+import type { Trace } from "./protocol.js";
+/** Variable-height rows retain full answers; only offscreen DOM is omitted. */
+export declare function Questions({ trace }: {
+    trace: Trace;
+}): import("react").JSX.Element;