jev-devtools 0.1.3 → 0.3.0

package/lib/src/DiagramContent.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo, useState } from "react";
+const PAGE_SIZE = 12;
+function TextValue({ value }) {
+    const [expanded, setExpanded] = useState(false);
+    const long = value.length > 140 || value.split("\n").length > 3;
+    return (_jsxs("span", { className: "diagram-text-value", children: [_jsx("span", { className: long && !expanded ? "diagram-text-preview" : undefined, children: value === "" ? (_jsx("span", { className: "diagram-value-empty", children: "empty string" })) : long && !expanded ? (`${value.slice(0, 140)}${value.length > 140 ? "…" : ""}`) : (value) }), long && (_jsx("button", { type: "button", className: "diagram-content-toggle", "aria-expanded": expanded, onClick: () => setExpanded(!expanded), children: expanded ? "Less text" : "Full text" }))] }));
+}
+function Properties({ value }) {
+    const [visible, setVisible] = useState(PAGE_SIZE);
+    const entries = useMemo(() => Object.entries(value), [value]);
+    if (!entries.length)
+        return (_jsx("span", { className: "diagram-value-empty", children: Array.isArray(value) ? "[] Empty array" : "{} Empty object" }));
+    return (_jsxs("div", { className: "diagram-properties", children: [entries.slice(0, visible).map(([name, child]) => (_jsx(Property, { name: name, value: child }, name))), visible < entries.length && (_jsxs("button", { type: "button", className: "diagram-content-toggle", onClick: () => setVisible((count) => count + PAGE_SIZE), children: ["Show ", Math.min(PAGE_SIZE, entries.length - visible), " more (", entries.length - visible, " remaining)"] })), visible > PAGE_SIZE && (_jsx("button", { type: "button", className: "diagram-content-toggle", onClick: () => setVisible(PAGE_SIZE), children: "Fewer properties" }))] }));
+}
+function Scalar({ value }) {
+    if (typeof value === "string")
+        return _jsx(TextValue, { value: value });
+    return (_jsx("span", { className: `diagram-value-${value === null || value === undefined ? "empty" : typeof value}`, children: value === undefined ? "Not captured" : String(value) }));
+}
+function Property({ name, value }) {
+    const [expanded, setExpanded] = useState(false);
+    const object = value !== null && typeof value === "object";
+    if (!object)
+        return (_jsxs("div", { className: `diagram-property ${typeof value === "string" ? "diagram-property-text" : ""}`, children: [_jsx("span", { className: "diagram-property-key", children: name || '""' }), _jsx(Scalar, { value: value })] }));
+    const count = Object.keys(value).length;
+    return (_jsxs("div", { className: "diagram-property-group", children: [_jsxs("button", { type: "button", className: "diagram-property-disclosure", "aria-label": `${expanded ? "Collapse" : "Expand"} ${name || '""'}`, "aria-expanded": expanded, onClick: () => setExpanded(!expanded), children: [_jsx("span", { "aria-hidden": "true", className: "diagram-property-caret", children: expanded ? "▾" : "▸" }), _jsx("span", { className: "diagram-property-key", children: name || '""' }), _jsx("span", { className: "diagram-property-type", children: Array.isArray(value) ? `[${count}]` : `{${count}}` })] }), expanded && (_jsx("div", { className: "diagram-property-children", children: _jsx(Properties, { value: value }) }))] }));
+}
+/** Bounded, lazy property rendering inside a fixed-size diagram card. */
+export const DiagramContent = memo(function DiagramContent({ value, label, }) {
+    return (_jsx("div", { className: "diagram-content", "data-diagram-scroll": true, role: "region", "aria-label": label, tabIndex: 0, children: value !== null && typeof value === "object" ? (_jsx(Properties, { value: value })) : (_jsx(Scalar, { value: value })) }));
+});

package/lib/src/FlowOverview.d.ts

@@ -0,0 +1,7 @@
+import type { FlowDefinition, FlowRun } from "./flow-protocol.js";
+import type { Trace } from "./protocol.js";
+export declare const FlowOverview: import("react").MemoExoticComponent<({ definition, run, traces, }: {
+    definition: FlowDefinition;
+    run: FlowRun;
+    traces: Trace[];
+}) => import("react").JSX.Element>;

package/lib/src/FlowOverview.js

@@ -0,0 +1,228 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useDiagramViewport } from "./useDiagramViewport.js";
+import { RequestDetail } from "./JevDevtools.js";
+import { JsonBlock } from "./TraceContent.js";
+import { conditionInputs, conditionRequirement, } from "./condition-inputs.js";
+import { formatFlowCondition } from "./flow-condition.js";
+import { TraceDiagram } from "./TraceDiagram.js";
+const RequestNode = memo(function RequestNode({ node, trace, status, selected, x, y, onSelect, onResize, }) {
+    const headingHeight = node.description ? 104 : 64;
+    const measure = useCallback((height) => onResize(node.id, height + headingHeight), [node.id, onResize, headingHeight]);
+    return (_jsxs("article", { className: `flow-step flow-request ${selected ? "selected" : ""}`, "data-status": status, "aria-label": `Request ${node.id}`, style: { left: x, top: y, width: 1120 }, children: [_jsxs("button", { className: "flow-request-heading", style: { height: headingHeight }, "aria-label": `Step ${node.id}, jev, ${status}`, "aria-pressed": selected, onClick: () => onSelect(node.id), children: [_jsxs("span", { children: [_jsx("span", { className: "eyebrow", children: "Jev request" }), _jsx("strong", { children: node.title ?? node.id }), node.description && (_jsx("span", { className: "flow-request-description", children: node.description }))] }), _jsxs("span", { children: [status, trace.durationMs !== undefined
+                                ? ` · ${Math.round(trace.durationMs)} ms`
+                                : ""] })] }), _jsx(TraceDiagram, { trace: trace, embedded: true, onHeightChange: measure })] }));
+});
+function joinTitle(count) {
+    return count === 2 ? "Wait for both checks" : `Wait for all ${count} paths`;
+}
+const Card = memo(function Card({ node, status, decision, selected, bounds, onSelect, lanes, inputs, }) {
+    const join = node.kind === "parallel";
+    const finished = lanes.filter((lane) => lane.status === "completed").length;
+    const route = [...node.path]
+        .reverse()
+        .find((part) => part.endsWith(":then") || part.endsWith(":else"));
+    const stateLabel = status === "untaken"
+        ? "Not taken"
+        : node.kind === "output" && status === "completed"
+            ? "Returned outcome"
+            : status;
+    return (_jsxs("button", { className: `flow-step ${selected ? "selected" : ""}`, "data-status": status, style: {
+            left: bounds.x,
+            top: bounds.y,
+            width: bounds.width,
+            height: bounds.height,
+        }, "aria-label": `Step ${node.id}, ${node.kind}, ${status}`, "aria-pressed": selected, onClick: () => onSelect(node.id), children: [_jsxs("span", { className: "flow-card-heading", children: [_jsx("span", { className: "flow-kind-icon", "aria-hidden": "true", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: join ? (_jsx("path", { d: "M4 5h4l5 7h7M4 19h4l5-7m4-3 3 3-3 3" })) : node.kind === "output" ? (_jsxs(_Fragment, { children: [_jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "4" }), _jsx("path", { d: "m8 12 3 3 5-6" })] })) : (_jsx("path", { d: "m12 3 9 9-9 9-9-9zM8 12h8" })) }) }), _jsx("span", { className: "eyebrow", children: join
+                            ? "Parallel checks"
+                            : node.kind === "branch"
+                                ? "Condition"
+                                : node.kind }), node.kind === "output" && (_jsx("span", { className: "flow-status", children: stateLabel }))] }), _jsx("strong", { children: node.title ?? (join ? joinTitle(lanes.length) : node.id) }), node.description && (_jsx("span", { className: "flow-step-description", children: node.description })), node.kind === "branch" &&
+                (node.conditionRule !== undefined || node.condition) && (_jsxs("span", { className: "flow-condition-rule", children: [inputs && inputs.length > 0 && (_jsxs("span", { className: "flow-condition-incoming", children: [_jsx("span", { className: "flow-condition-label", children: inputs.length === 1 ? "Incoming value" : "Incoming values" }), inputs.slice(0, 3).map((input) => (_jsxs("span", { className: "flow-condition-input", children: [_jsx("span", { children: input.name }), _jsx("b", { children: input.value })] }, input.reference))), inputs.length > 3 && (_jsxs("small", { children: [inputs.length - 3, " more inputs \u00B7 select to inspect"] }))] })), _jsx("span", { className: "flow-condition-label", children: "Requirement" }), _jsx("code", { children: node.conditionRule !== undefined
+                            ? conditionRequirement(node.conditionRule, inputs ?? [])
+                            : node.condition })] })), join && (_jsxs(_Fragment, { children: [_jsxs("span", { className: "flow-join-summary", children: [joinTitle(lanes.length), " ", _jsxs("span", { children: [finished, "/", lanes.length] })] }), _jsxs("span", { className: "flow-lanes", children: [lanes.slice(0, 4).map((lane) => (_jsxs("span", { className: "flow-lane", "data-status": lane.status, children: [_jsxs("span", { children: [_jsx("span", { "aria-hidden": "true", children: lane.status === "completed"
+                                                    ? "✓"
+                                                    : lane.status === "error"
+                                                        ? "!"
+                                                        : "○" }), " ", lane.name] }), _jsx("small", { children: lane.status })] }, lane.name))), lanes.length > 4 && (_jsxs("small", { children: [lanes.length - 4, " more \u00B7 select to see all checks"] }))] })] })), _jsxs("span", { className: "flow-card-footer", children: [_jsx("code", { children: node.id }), _jsx("small", { children: join
+                            ? status === "completed"
+                                ? "All finished · continue"
+                                : stateLabel
+                            : node.kind === "output"
+                                ? route?.endsWith(":then")
+                                    ? "Then route"
+                                    : route?.endsWith(":else")
+                                        ? "Else route"
+                                        : "Final outcome"
+                                : decision !== undefined
+                                    ? decision
+                                        ? "Condition met · then"
+                                        : "Condition not met · else"
+                                    : stateLabel })] }), node.kind === "jev" && (_jsx("small", { children: status === "untaken"
+                    ? "This request was not run."
+                    : "Request details are not captured yet or no longer retained." }))] }));
+});
+export const FlowOverview = memo(function FlowOverview({ definition, run, traces, }) {
+    const [selected, setSelected] = useState(() => definition.nodes.find((n) => n.kind === "jev")?.id ?? "");
+    const [details, setDetails] = useState(false);
+    const [heights, setHeights] = useState({});
+    const tracesById = useMemo(() => new Map(traces.map((trace) => [trace.id, trace])), [traces]);
+    const inputsByStep = useMemo(() => new Map(definition.nodes
+        .filter((node) => node.conditionRule !== undefined)
+        .map((node) => [
+        node.id,
+        conditionInputs(node.conditionRule, run, tracesById, new Map(definition.nodes.map((n) => [n.id, n.title ?? n.id]))),
+    ])), [definition, run, tracesById]);
+    // Omit redundant transitive edges so a reference does not draw through an
+    // intervening condition. Execution ordering still includes every dependency.
+    const links = useMemo(() => {
+        const byId = new Map(definition.nodes.map((node) => [node.id, node]));
+        const ancestors = (id) => {
+            const seen = new Set(), pending = [...(byId.get(id)?.dependencies ?? [])];
+            while (pending.length) {
+                const next = pending.pop();
+                if (seen.has(next))
+                    continue;
+                seen.add(next);
+                pending.push(...(byId.get(next)?.dependencies ?? []));
+            }
+            return seen;
+        };
+        const parents = new Map(definition.nodes.map((node) => [node.id, ancestors(node.id)]));
+        return new Map(definition.nodes.map((node) => [
+            node.id,
+            node.dependencies.filter((id) => !node.dependencies.some((other) => other !== id && parents.get(other)?.has(id))),
+        ]));
+    }, [definition]);
+    const parallelLanes = useMemo(() => new Map(definition.nodes
+        .filter((n) => n.kind === "parallel")
+        .map((node) => [
+        node.id,
+        (node.lanes ?? node.dependencies).map((name) => {
+            const children = node.lanes
+                ? definition.nodes.filter((child) => child.path.includes(`${node.id}:${name}`))
+                : definition.nodes.filter((child) => child.id === name);
+            const states = children.map((child) => run.steps[child.id]?.status ?? "waiting");
+            const status = run.steps[node.id]?.status === "untaken"
+                ? "untaken"
+                : states.includes("error")
+                    ? "error"
+                    : states.includes("cancelled")
+                        ? "cancelled"
+                        : states.includes("blocked")
+                            ? "blocked"
+                            : run.steps[node.id]?.status === "completed" ||
+                                (states.length > 0 &&
+                                    states.every((state) => state === "completed" || state === "untaken"))
+                                ? "completed"
+                                : states.some((state) => state === "running" || state === "completed")
+                                    ? "running"
+                                    : "waiting";
+            return { name, status };
+        }),
+    ])), [definition, run.steps]);
+    const layout = useMemo(() => {
+        const columns = new Map();
+        let remaining = [...definition.nodes];
+        while (remaining.length) {
+            const ready = remaining.filter((node) => node.dependencies.every((id) => columns.has(id)));
+            if (!ready.length)
+                break;
+            for (const node of ready)
+                columns.set(node.id, node.dependencies.length
+                    ? Math.max(...node.dependencies.map((id) => columns.get(id))) + 1
+                    : 0);
+            const ids = new Set(ready.map((node) => node.id));
+            remaining = remaining.filter((node) => !ids.has(node.id));
+        }
+        const points = new Map();
+        let x = 40;
+        for (let column = 0; column <= Math.max(0, ...columns.values()); column++) {
+            const nodes = definition.nodes.filter((node) => columns.get(node.id) === column);
+            let bottom = 40, width = 280;
+            for (const node of nodes) {
+                const captured = node.kind === "jev" &&
+                    tracesById.has(run.steps[node.id]?.traceId ?? "");
+                const w = captured ? 1120 : 360, h = captured
+                    ? (heights[node.id] ?? 640)
+                    : node.kind === "parallel"
+                        ? 190 +
+                            (node.description ? 64 : 0) +
+                            Math.min(4, (node.lanes ?? node.dependencies).length) * 32
+                        : (node.description ? 244 : 172) +
+                            (node.kind === "branch"
+                                ? 110 +
+                                    Math.min(3, inputsByStep.get(node.id)?.length ?? 0) * 24
+                                : 0);
+                const parents = (links.get(node.id) ?? [])
+                    .map((id) => points.get(id))
+                    .filter(Boolean);
+                const center = parents.length
+                    ? parents.reduce((sum, p) => sum + p.y + p.height / 2, 0) /
+                        parents.length
+                    : h / 2 + 40;
+                const y = Math.max(bottom, center - h / 2);
+                points.set(node.id, { x, y, width: w, height: h });
+                bottom = y + h + 100;
+                width = Math.max(width, w);
+            }
+            x += width + 160;
+        }
+        return {
+            points,
+            width: Math.max(700, x - 120),
+            height: Math.max(400, ...[...points.values()].map((p) => p.y + p.height + 40)),
+        };
+    }, [definition, run.steps, tracesById, heights, links, inputsByStep]);
+    const { viewport, canvas, zoom, zoomBy, fit, preserveCamera, focusArea } = useDiagramViewport(layout.width, layout.height, run.id);
+    const onResize = useCallback((id, height) => {
+        preserveCamera();
+        setHeights((previous) => previous[id] === height ? previous : { ...previous, [id]: height });
+    }, [preserveCamera]);
+    const started = useRef(false);
+    useEffect(() => {
+        if (started.current)
+            return;
+        const first = layout.points.get(selected);
+        if (first) {
+            started.current = true;
+            focusArea(first);
+        }
+    }, [layout, selected, focusArea]);
+    const selectStep = (id) => {
+        setSelected(id);
+        const bounds = layout.points.get(id);
+        if (bounds)
+            focusArea(bounds);
+    };
+    const node = definition.nodes.find((n) => n.id === selected);
+    const step = node ? run.steps[node.id] : undefined;
+    const trace = step?.traceId
+        ? traces.find((t) => t.id === step.traceId)
+        : undefined;
+    return (_jsxs("section", { className: "request-detail whole-flow", "aria-label": "Whole flow", children: [_jsxs("header", { className: "detail-header", children: [_jsxs("div", { children: [_jsxs("span", { className: "eyebrow", children: ["Flow run \u00B7 ", run.status] }), _jsx("h2", { children: run.name })] }), _jsxs("div", { children: [run.outcome ? (_jsxs("strong", { children: ["Outcome: ", run.outcome] })) : ((run.error ?? "Execution paths")), _jsx("small", { className: "muted", children: run.durationMs !== undefined
+                                    ? ` · ${Math.round(run.durationMs)} ms`
+                                    : "" })] })] }), _jsxs("div", { className: "lab-flow-toolbar", children: [_jsxs("div", { children: [_jsx("button", { "aria-label": "Zoom flow out", onClick: () => zoomBy(1 / 1.2), children: "\u2212" }), _jsxs("output", { "aria-label": "Flow zoom", children: [zoom, "%"] }), _jsx("button", { "aria-label": "Zoom flow in", onClick: () => zoomBy(1.2), children: "+" }), _jsx("button", { onClick: fit, children: "Fit flow" }), _jsx("button", { disabled: !selected, onClick: () => selectStep(selected), children: "Focus step" })] }), _jsxs("label", { children: ["Step", _jsxs("select", { "aria-label": "Flow step", value: selected, onChange: (e) => selectStep(e.target.value), children: [_jsx("option", { value: "", children: "Select a step" }), definition.nodes.map((n) => (_jsxs("option", { value: n.id, children: [n.title ? `${n.title} (${n.id})` : n.id, " \u00B7", " ", run.steps[n.id]?.status ?? "waiting"] }, n.id)))] })] })] }), _jsx("div", { className: "flow-overview-viewport diagram-viewport", ref: viewport, tabIndex: 0, "aria-label": "Flow canvas", role: "region", children: _jsxs("div", { ref: canvas, className: "flow-overview-canvas", style: { width: layout.width, height: layout.height }, children: [_jsxs("svg", { width: layout.width, height: layout.height, "aria-hidden": "true", className: "flow-connections", children: [_jsx("defs", { children: _jsx("marker", { id: `arrow-${run.id}`, viewBox: "0 0 10 10", refX: "8", refY: "5", markerWidth: "5", markerHeight: "5", orient: "auto", children: _jsx("path", { d: "M0 0L10 5L0 10z", fill: "currentColor" }) }) }), definition.nodes.flatMap((n) => (links.get(n.id) ?? []).map((id) => {
+                                    const a = layout.points.get(id), b = layout.points.get(n.id);
+                                    if (!a || !b)
+                                        return null;
+                                    const active = ["running", "completed"].includes(run.steps[n.id]?.status);
+                                    return (_jsx("path", { d: `M${a.x + a.width},${a.y + a.height / 2} C${a.x + a.width + 80},${a.y + a.height / 2} ${b.x - 80},${b.y + b.height / 2} ${b.x},${b.y + b.height / 2}`, stroke: active ? "#E551BA" : "currentColor", opacity: active ? 1 : 0.35, fill: "none", strokeWidth: "2", markerEnd: `url(#arrow-${run.id})` }, `${id}-${n.id}`));
+                                }))] }), definition.nodes.map((n) => {
+                            const p = layout.points.get(n.id);
+                            if (!p)
+                                return null;
+                            const captured = tracesById.get(run.steps[n.id]?.traceId ?? "");
+                            return n.kind === "jev" && captured ? (_jsx(RequestNode, { node: n, trace: captured, status: run.steps[n.id]?.status ?? "waiting", selected: selected === n.id, x: p.x, y: p.y, onSelect: setSelected, onResize: onResize }, n.id)) : (_jsx(Card, { node: n, status: run.steps[n.id]?.status ?? "waiting", decision: run.steps[n.id]?.decision, selected: selected === n.id, bounds: p, onSelect: setSelected, inputs: inputsByStep.get(n.id), lanes: parallelLanes.get(n.id) ?? [] }, n.id));
+                        })] }) }), _jsxs("div", { className: "flow-selection", children: [node && step ? (_jsxs(_Fragment, { children: [_jsxs("strong", { children: [node.title ?? node.id, " \u00B7 ", step.status] }), _jsx("span", { className: "muted", children: step.durationMs !== undefined
+                                    ? ` · ${Math.round(step.durationMs)} ms`
+                                    : "" }), node.description && _jsx("p", { children: node.description }), node.kind === "parallel" && (_jsxs("p", { children: ["These paths run at the same time:", " ", (node.lanes ?? node.dependencies).join(", "), ". The next step starts only after all finish successfully. This marker waits for their results; it does not make another Jev request."] })), node.kind === "parallel" && (_jsx("ul", { className: "flow-lane-details", children: parallelLanes.get(node.id)?.map((lane) => (_jsxs("li", { children: [lane.name, " \u00B7 ", lane.status] }, lane.name))) })), (inputsByStep.get(node.id)?.length ?? 0) > 0 && (_jsx("dl", { className: "flow-input-details", children: inputsByStep.get(node.id)?.map((input) => (_jsxs("div", { children: [_jsxs("dt", { children: [input.name, " ", _jsx("code", { children: input.reference })] }), _jsx("dd", { children: input.value })] }, input.reference))) })), (node.conditionRule !== undefined || node.condition) && (_jsxs("p", { children: [_jsx("code", { children: node.conditionRule !== undefined
+                                            ? formatFlowCondition(node.conditionRule)
+                                            : node.condition }), " ", "\u00B7", " ", step.decision === undefined
+                                        ? "Not evaluated"
+                                        : step.decision
+                                            ? "Passed · then route"
+                                            : "Not met · else route"] })), _jsx("p", { className: "muted", children: node.path.length ? node.path.join(" / ") : "Main path" }), step.error && _jsx("p", { role: "alert", children: step.error }), node.kind === "jev" &&
+                                (trace ? (_jsx("button", { onClick: () => setDetails(!details), children: details ? "Hide request details" : "Inspect request" })) : (_jsx("p", { children: step.traceId
+                                        ? "Request capture was cleared or evicted."
+                                        : "No captured request linked yet. Use a client created by this inspector." })))] })) : (_jsx("p", { className: "muted", children: "Each request diagram shows its context, question and answer. Use its question picker for other answers. Lines between requests show execution dependencies." })), run.value !== undefined && (_jsxs("details", { children: [_jsx("summary", { children: "Captured outcome value" }), _jsx(JsonBlock, { value: run.value })] }))] }), details && trace && (_jsx("div", { className: "flow-request-detail", children: _jsx(RequestDetail, { trace: trace }) }))] }));
+});

package/lib/src/JevDevtools.d.ts

@@ -1,6 +1,11 @@
+import { type FlowHistory } from "./flow-stream.js";
 import type { Trace } from "./protocol.js";
-export declare function JevPanel({ traces, connection, onClear, }: {
+export declare const RequestDetail: import("react").MemoExoticComponent<({ trace, }: {
+    trace?: Trace;
+}) => import("react").JSX.Element>;
+export declare function JevPanel({ traces, flows, connection, onClear, }: {
     traces: Trace[];
+    flows?: FlowHistory;
     connection: string;
     onClear: () => Promise<unknown>;
 }): import("react").JSX.Element;

package/lib/src/JevDevtools.js

@@ -1,58 +1,62 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { emptyFlows } from "./flow-stream.js";
+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";
+const FlowOverview = lazy(() => import("./FlowOverview.js").then((module) => ({
+    default: module.FlowOverview,
+})));
+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) })] }))] }));
-}
-export function JevPanel({ traces, connection, onClear, }) {
-    const [selected, setSelected] = useState();
+// 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 })] }));
+});
+export 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, flows = emptyFlows, connection, onClear, }) {
+    const [view, setView] = useState("requests");
+    const [selectedRun, setSelectedRun] = useState();
+    const run = flows.runs.find((r) => r.id === selectedRun) ?? flows.runs[0];
+    const definition = flows.definitions.find((d) => d.id === run?.definitionId);
+    const [selected, setSelected] = useState();
     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: [view === "requests" ? "Jev requests" : "Jev flows", " ", _jsx("span", { children: view === "requests" ? traces.length : flows.runs.length })] }), _jsx("button", { onClick: () => void onClear().catch((e) => setError(e.message)), disabled: !traces.length && !flows.runs.length, children: "Clear" })] }), (flows.runs.length > 0 || view === "flows") && (_jsxs("nav", { className: "detail-tabs", "aria-label": "History type", children: [_jsx("button", { "aria-pressed": view === "requests", onClick: () => setView("requests"), children: "Requests" }), _jsx("button", { "aria-pressed": view === "flows", onClick: () => {
+                                    setView("flows");
+                                    if (run)
+                                        setSelectedRun(run.id);
+                                }, children: "Flows" })] })), view === "requests" && (_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: [view === "flows"
+                                ? flows.runs.map((r) => (_jsxs("button", { className: `request-row ${run?.id === r.id ? "selected" : ""}`, onClick: () => setSelectedRun(r.id), children: [_jsx("span", { className: `status-dot ${r.status}` }), _jsxs("span", { children: [_jsx("strong", { children: r.name }), _jsxs("small", { children: [new Date(r.startedAt).toLocaleTimeString(), " \u00B7", " ", r.outcome ?? r.status] })] }), _jsx("span", { className: "row-status", children: r.status })] }, r.id)))
+                                : filtered.map((t) => (_jsx(RequestRow, { trace: t, selected: trace?.id === t.id, onSelect: setSelected }, t.id))), view === "requests" && !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 })] }))] }), view === "flows" && run && definition ? (_jsx(Suspense, { fallback: _jsx("p", { role: "status", children: "Loading flow\u2026" }), children: _jsx(FlowOverview, { run: run, definition: definition, traces: traces }, run.id) })) : (_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;