jev-devtools 0.1.2 → 0.2.0

package/lib/src/JevDrawer.js

@@ -2,6 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useEffect, useId, useRef, useState } from "react";
 import { TypeSafeMark } from "./TypeSafeMark.js";
 import { createPortal } from "react-dom";
+import { inspectorStyles } from "./inspector-styles.js";
 const heightKey = "jev-inspector-drawer-height";
 const viewportHeight = () => window.visualViewport?.height ?? window.innerHeight;
 const limits = (viewport) => ({
@@ -24,9 +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 [open, setOpen] = useState(defaultOpen);
+    const [root, setRoot] = useState(null);
     const [expanded, setExpanded] = useState(false);
     const [viewport, setViewport] = useState(viewportHeight);
     const [height, setHeight] = useState(initialHeight);
@@ -37,6 +38,30 @@ 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
+        // lives in the shadow tree, with its own typography and component styles.
+        host.style.cssText =
+            "all: initial !important; position: fixed !important; inset: 0 !important; pointer-events: none !important; z-index: 2147483000 !important;";
+        const shadow = host.attachShadow({ mode: "open" });
+        const style = document.createElement("style");
+        style.textContent = inspectorStyles;
+        shadow.append(style);
+        document.body.append(host);
+        setRoot(shadow);
+        return () => host.remove();
+    }, []);
     useEffect(() => {
         const resize = () => setViewport(viewportHeight());
         window.addEventListener("resize", resize);
@@ -57,16 +82,18 @@ export function JevDrawer({ children, defaultOpen = true, }) {
     useEffect(() => {
         if (interacted.current)
             (open ? closeButton.current : trigger.current)?.focus();
-    }, [open]);
+    }, [open, root]);
     const toggle = (value) => {
         interacted.current = true;
-        setOpen(value);
+        onOpenChange(value);
     };
     const resizeTo = (value) => {
         setExpanded(false);
         setHeight(clamp(value, viewport));
     };
-    return createPortal(_jsxs(_Fragment, { children: [_jsxs("button", { ref: trigger, className: "jev-devtools jev-drawer-trigger", hidden: open, "aria-label": "Open Jev DevTools", "aria-expanded": open, "aria-controls": id, onClick: () => toggle(true), children: [_jsx(TypeSafeMark, {}), " Jev DevTools"] }), _jsxs("section", { ref: panel, id: id, className: "jev-devtools jev-drawer", hidden: !open, "aria-label": "Jev DevTools", style: { height: visibleHeight }, onKeyDown: (event) => {
+    if (!root)
+        return null;
+    return createPortal(_jsxs(_Fragment, { children: [_jsxs("button", { ref: trigger, className: "jev-devtools jev-drawer-trigger", hidden: open, "aria-label": "Open Jev DevTools", "aria-expanded": open, "aria-controls": id, onClick: () => toggle(true), children: [_jsx(TypeSafeMark, {}), " Jev DevTools"] }), _jsxs("div", { ref: panel, id: id, className: "jev-devtools jev-drawer", hidden: !open, role: "region", "aria-label": "Jev DevTools", style: { height: visibleHeight }, onKeyDown: (event) => {
                     if (event.key === "Escape" && !event.defaultPrevented) {
                         event.stopPropagation();
                         toggle(false);
@@ -107,5 +134,5 @@ export function JevDrawer({ children, defaultOpen = true, }) {
                                 event.preventDefault();
                                 resizeTo(next);
                             }
-                        }, children: _jsx("span", {}) }), _jsxs("header", { className: "jev-drawer-header", children: [_jsxs("strong", { children: [_jsx(TypeSafeMark, {}), "Jev DevTools"] }), _jsxs("div", { children: [_jsx("button", { "aria-label": expanded ? "Restore Jev drawer" : "Expand Jev drawer", "aria-pressed": expanded, onClick: () => setExpanded(!expanded), children: expanded ? "Restore" : "Expand" }), _jsx("button", { ref: closeButton, className: "jev-drawer-close", "aria-label": "Close Jev DevTools", title: "Close (Esc)", onClick: () => toggle(false), children: "\u00D7" })] })] }), _jsx("div", { className: "jev-drawer-content", children: children })] })] }), document.body);
+                        }, children: _jsx("span", {}) }), _jsxs("header", { className: "jev-drawer-header", children: [_jsxs("strong", { children: [_jsx(TypeSafeMark, {}), "Jev DevTools"] }), _jsxs("div", { children: [_jsx("button", { "aria-label": expanded ? "Restore Jev drawer" : "Expand Jev drawer", "aria-pressed": expanded, onClick: () => setExpanded(!expanded), children: expanded ? "Restore" : "Expand" }), _jsx("button", { ref: closeButton, className: "jev-drawer-close", "aria-label": "Close Jev DevTools", title: "Close (Esc)", onClick: () => toggle(false), children: "\u00D7" })] })] }), _jsx("div", { className: "jev-drawer-content", children: children })] })] }), root);
 }

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;

package/lib/src/Questions.js

@@ -0,0 +1,174 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useLayoutEffect, useId, useMemo, useRef, useState, } from "react";
+import { defaultRangeExtractor, measureElement, observeElementRect, useVirtualizer, } from "@tanstack/react-virtual";
+import { Answer, findImage, JsonBlock } from "./TraceContent.js";
+const QuestionContent = memo(function QuestionContent({ name, question, answer, image, legendOpen, onLegendChange, }) {
+    return (_jsxs(_Fragment, { children: [_jsxs("header", { children: [_jsx("h3", { children: name }), _jsx("span", { className: "type", children: question.type })] }), _jsx(JsonBlock, { value: question }), _jsx(Answer, { answer: answer, image: image, legendOpen: legendOpen, onLegendToggle: (open) => onLegendChange(name, open) })] }));
+});
+/** Variable-height rows retain full answers; only offscreen DOM is omitted. */
+export function Questions({ trace }) {
+    const helpId = useId();
+    const entries = useMemo(() => Object.entries(trace.request.questions ?? {}).filter(([, q]) => q && typeof q === "object" && typeof q.type === "string"), [trace.request.questions]);
+    const image = useMemo(() => findImage(trace.request.state), [trace.request.state]);
+    const viewport = useRef(null);
+    const sizes = useRef(new Map());
+    const [seeking, setSeekingState] = useState(false);
+    const seekingValue = useRef(false);
+    const setSeeking = useCallback((next) => {
+        // A range update may already be queued by the virtualizer. Avoid enqueuing
+        // the same preview state on every scroll event alongside that React work.
+        if (seekingValue.current === next)
+            return;
+        seekingValue.current = next;
+        setSeekingState(next);
+    }, []);
+    const scrollSample = useRef(null);
+    const scrollIdle = useRef(undefined);
+    const explicitJump = useRef(false);
+    useEffect(() => () => clearTimeout(scrollIdle.current), []);
+    const pendingFocus = useRef(null);
+    const [focused, setFocused] = useState(null);
+    const [destination, setDestination] = useState(0);
+    const [legends, setLegends] = useState(() => new Map());
+    const onLegendChange = useCallback((name, open) => {
+        setLegends((previous) => previous.get(name) === open
+            ? previous
+            : new Map(previous).set(name, open));
+    }, []);
+    const getItemKey = useCallback((index) => entries[index][0], [entries]);
+    const rangeExtractor = useCallback((range) => {
+        const indices = defaultRangeExtractor(range);
+        // Never remove a focused control when it scrolls outside the visible range.
+        if (focused !== null &&
+            focused < entries.length &&
+            !indices.includes(focused))
+            indices.push(focused);
+        return indices.sort((a, b) => a - b);
+    }, [focused, entries.length]);
+    const virtualizer = useVirtualizer({
+        count: entries.length,
+        getScrollElement: () => viewport.current,
+        getItemKey,
+        estimateSize: () => 600,
+        overscan: 1,
+        rangeExtractor,
+        directDomUpdates: true,
+        // A hidden drawer reports zero sizes. Retain its measurements and scroll
+        // range instead of collapsing rows or resetting the reader's position.
+        observeElementRect: (instance, callback) => observeElementRect(instance, (rect) => {
+            if (rect.width > 0 && rect.height > 0)
+                callback(rect);
+        }),
+        measureElement: (element, entry, instance) => {
+            const key = element.dataset.questionKey;
+            // A fast-scroll preview reserves the last measured height. Never replace
+            // the real measurement cache with its temporary placeholder geometry.
+            if (element.dataset.preview === "true")
+                return sizes.current.get(key) || 600;
+            const height = measureElement(element, entry, instance);
+            if (height > 0)
+                sizes.current.set(key, height);
+            return height || sizes.current.get(key) || 600;
+        },
+    });
+    const items = virtualizer.getVirtualItems();
+    const goTo = useCallback((index, focus = false) => {
+        const next = Math.max(0, Math.min(entries.length - 1, index));
+        explicitJump.current = true;
+        setSeeking(false);
+        scrollSample.current = null;
+        setDestination(next);
+        if (focus) {
+            pendingFocus.current = next;
+            setFocused(next);
+        }
+        virtualizer.scrollToIndex(next, { align: "start" });
+    }, [entries.length, virtualizer, setSeeking]);
+    useLayoutEffect(() => {
+        if (pendingFocus.current === null)
+            return;
+        const card = viewport.current?.querySelector(`[data-index="${pendingFocus.current}"] article`);
+        if (card) {
+            card.focus({ preventScroll: true });
+            pendingFocus.current = null;
+        }
+    });
+    // Scroll-range updates must not rebuild the full question picker.
+    const navigation = useMemo(() => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "questions-navigation", children: [_jsxs("label", { children: ["Jump to question", _jsx("select", { "aria-label": "Jump to question", value: Math.min(destination, entries.length - 1), onChange: (event) => goTo(Number(event.target.value)), children: entries.map(([name, q], index) => (_jsxs("option", { value: index, children: [index + 1, ". ", name, " \u00B7 ", q.type] }, name))) })] }), _jsx("button", { "aria-label": "Previous question", disabled: destination === 0, onClick: () => goTo(destination - 1), children: "Previous" }), _jsx("button", { "aria-label": "Next question", disabled: destination >= entries.length - 1, onClick: () => goTo(destination + 1), children: "Next" }), _jsxs("span", { children: [entries.length, " question", entries.length === 1 ? "" : "s"] })] }), _jsx("p", { className: "questions-help muted", id: helpId, children: "\u2191 / \u2193 previous / next \u00B7 Home / End first / last when the list is focused." })] })), [entries, destination, goTo, helpId]);
+    if (!entries.length)
+        return _jsx("p", { className: "muted", children: "No questions available in this capture." });
+    return (_jsxs("div", { className: "questions-list", children: [navigation, _jsx("div", { className: "questions-viewport", ref: viewport, tabIndex: 0, role: "region", "aria-label": "Questions and answers", "aria-describedby": helpId, onScroll: (event) => {
+                    const offset = event.currentTarget.scrollTop;
+                    const time = performance.now();
+                    const previous = scrollSample.current;
+                    clearTimeout(scrollIdle.current);
+                    scrollIdle.current = setTimeout(() => {
+                        scrollSample.current = null;
+                        explicitJump.current = false;
+                        setSeeking(false);
+                    }, 120);
+                    if (explicitJump.current)
+                        return;
+                    if (!previous) {
+                        scrollSample.current = { offset, time, fastDirection: 0 };
+                        return;
+                    }
+                    const elapsed = time - previous.time;
+                    if (elapsed < 8)
+                        return;
+                    const velocity = (Math.abs(offset - previous.offset) / elapsed) * 1000;
+                    // A jump across most of the list is a destination change, not a
+                    // scan. Measurement corrections around its endpoints can otherwise
+                    // look like additional high-speed samples.
+                    // Read cached geometry; querying scrollHeight here can force layout
+                    // immediately after the virtualizer has mounted a new row.
+                    const viewportHeight = virtualizer.scrollRect?.height || 0;
+                    const jump = Math.abs(offset - previous.offset) >
+                        Math.max(viewportHeight, (virtualizer.getTotalSize() - viewportHeight) / 2);
+                    const fastDirection = !jump && velocity > 4000 ? Math.sign(offset - previous.offset) : 0;
+                    scrollSample.current = { offset, time, fastDirection };
+                    // Two fast samples in the same direction distinguish continuous
+                    // scanning from an isolated jump. A lower exit threshold prevents
+                    // flickering as the reader slows down.
+                    if (jump)
+                        setSeeking(false);
+                    else if (fastDirection && fastDirection === previous.fastDirection)
+                        setSeeking(true);
+                    else if (velocity < 1800)
+                        setSeeking(false);
+                }, onFocusCapture: (event) => {
+                    const row = event.target.closest("[data-index]");
+                    if (row) {
+                        const index = Number(row.dataset.index);
+                        setFocused(index);
+                        setDestination(index);
+                    }
+                }, onBlurCapture: (event) => {
+                    if (!event.currentTarget.contains(event.relatedTarget))
+                        setFocused(null);
+                }, onKeyDown: (event) => {
+                    // Inputs, disclosures and scrollable JSON keep their native keys.
+                    if (event.target !== event.currentTarget &&
+                        !event.target.matches("article"))
+                        return;
+                    const next = event.key === "Home"
+                        ? 0
+                        : event.key === "End"
+                            ? entries.length - 1
+                            : event.key === "ArrowDown"
+                                ? destination + 1
+                                : event.key === "ArrowUp"
+                                    ? destination - 1
+                                    : undefined;
+                    if (next !== undefined) {
+                        event.preventDefault();
+                        goTo(next, true);
+                    }
+                }, children: _jsx("div", { role: "list", "aria-label": "Captured questions", className: "questions-spacer", ref: virtualizer.containerRef, children: items.map((item) => {
+                        const [name, question] = entries[item.index];
+                        const preview = seeking && focused !== item.index;
+                        return (_jsx("div", { "data-index": item.index, "data-question-key": name, "data-preview": preview || undefined, style: preview
+                                ? { height: sizes.current.get(name) || 600 }
+                                : undefined, ref: virtualizer.measureElement, className: "questions-row", role: "listitem", "aria-posinset": item.index + 1, "aria-setsize": entries.length, children: _jsx("article", { className: "question-node standalone", tabIndex: -1, "aria-busy": preview || undefined, "aria-label": `Question ${item.index + 1}: ${name}`, children: preview ? (_jsxs("div", { className: "question-scroll-preview", children: [_jsxs("header", { children: [_jsx("h3", { children: name }), _jsx("span", { className: "type", children: question.type })] }), _jsx("p", { className: "muted", children: "Pause scrolling to inspect this answer." })] })) : (_jsx(QuestionContent, { name: name, question: question, answer: trace.result?.answers[name], image: image, legendOpen: !!legends.get(name), onLegendChange: onLegendChange })) }) }, item.key));
+                    }) }) })] }));
+}

package/lib/src/TraceContent.d.ts

@@ -0,0 +1,11 @@
+import type { AnswerView, Json } from "./protocol.js";
+export declare function findImage(value: Json): string | undefined;
+export declare function JsonBlock({ value }: {
+    value: unknown;
+}): import("react").JSX.Element;
+export declare function Answer({ answer, image, legendOpen, onLegendToggle, }: {
+    answer?: AnswerView;
+    image?: string;
+    legendOpen: boolean;
+    onLegendToggle: (open: boolean) => void;
+}): import("react").JSX.Element;

package/lib/src/TraceContent.js

@@ -0,0 +1,32 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const pretty = (value) => JSON.stringify(value, null, 2);
+const percent = (value) => `${Math.round(value * 100)}%`;
+export 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;
+    }
+}
+export function JsonBlock({ value }) {
+    return _jsx("pre", { children: pretty(value) });
+}
+export function Answer({ answer, image, legendOpen, onLegendToggle, }) {
+    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", { open: legendOpen, onToggle: (event) => onLegendToggle(event.currentTarget.open), 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) })] }))] }));
+}

package/lib/src/TraceDiagram.js

@@ -1,18 +1,20 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useMemo, useState } from "react";
+import { useDiagramViewport } from "./useDiagramViewport.js";
 import { findImage, flowAnswer, stateText } from "./flow-model.js";
+import { ChoiceProbabilities } from "./ChoiceProbabilities.js";
 const pct = (v) => `${Math.round(v * 100)}%`;
-function Result({ answer, image }) {
+function Result({ answer, image, probabilities, }) {
     if (!answer)
         return _jsx("p", { className: "lab-copy", children: "No answer received." });
     return (_jsxs(_Fragment, { children: [answer.probabilities &&
-                Object.entries(answer.probabilities).map(([key, value]) => (_jsxs("div", { className: "lab-probability", children: [_jsxs("div", { children: [_jsx("span", { title: typeof answer.legend?.[key] === "string"
+                (probabilities ?? Object.entries(answer.probabilities)).map(([key, value]) => (_jsxs("div", { className: "lab-probability", children: [_jsxs("div", { children: [_jsx("span", { title: typeof answer.legend?.[key] === "string"
                                         ? answer.legend[key]
                                         : key, children: answer.type === "score" && answer.legend?.[key]
                                         ? `${key} · ${answer.legend[key]}`
-                                        : key }), _jsx("code", { children: pct(value) })] }), _jsx("div", { className: "lab-track", children: _jsx("i", { className: answer.type === "choice" && answer.choice !== key
+                                        : key }), _jsxs("code", { title: `Exact probability: ${value}`, children: [Number((value * 100).toPrecision(6)), "%"] })] }), _jsx("div", { className: "lab-track", children: _jsx("i", { className: answer.type === "choice" && answer.choice !== key
                                     ? "lab-alternative"
-                                    : "", style: { width: pct(Math.max(0, Math.min(1, value))) } }) })] }, key))), answer.choice !== undefined && (_jsxs("p", { className: "lab-result", children: ["Selected: ", answer.choice] })), answer.score !== undefined && (_jsxs(_Fragment, { children: [_jsxs("p", { className: "lab-result", children: ["Score ", answer.score.toFixed(2)] }), _jsxs("div", { className: "lab-scale", children: [_jsx("span", { style: {
+                                    : "", style: { width: pct(Math.max(0, Math.min(1, value))) } }) })] }, key))), answer.choice !== undefined && (_jsxs("p", { className: "lab-result", title: `Selected: ${answer.choice}`, children: ["Selected: ", answer.choice] })), answer.score !== undefined && (_jsxs(_Fragment, { children: [_jsxs("p", { className: "lab-result", children: ["Score ", answer.score.toFixed(2)] }), _jsxs("div", { className: "lab-scale", children: [_jsx("span", { style: {
                                     left: pct(Math.max(0, Math.min(1, answer.score /
                                         Math.max(1, Object.keys(answer.probabilities ?? {}).length - 1)))),
                                 } }), Object.keys(answer.probabilities ?? {}).map((k) => (_jsx("small", { children: k }, k)))] })] })), answer.noul !== undefined && (_jsxs(_Fragment, { children: [_jsx("strong", { className: "lab-big", children: pct(answer.noul) }), _jsx("p", { className: "lab-small", children: "probability of true" }), _jsx("div", { className: "lab-track", children: _jsx("i", { style: { width: pct(answer.noul) } }) }), _jsxs("div", { className: "lab-endpoints", children: [_jsx("span", { children: "False" }), _jsx("span", { children: "True" })] })] })), answer.box && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "lab-image", children: [image ? (_jsx("img", { src: image, alt: "Captured image with returned Box overlay" })) : (_jsx("p", { children: "Image preview unavailable" })), image && (_jsx("div", { className: "lab-box", style: {
@@ -23,51 +25,110 @@ function Result({ answer, image }) {
                                 } }))] }), _jsxs("p", { className: "lab-small lab-coordinates", children: ["left ", answer.box.left.toFixed(2), " \u00B7 top ", answer.box.top.toFixed(2), _jsx("br", {}), "right ", answer.box.right.toFixed(2), " \u00B7 bottom", " ", answer.box.bottom.toFixed(2)] })] })), answer.confidence !== undefined && (_jsxs("p", { className: "lab-small", children: ["Confidence ", pct(answer.confidence)] }))] }));
 }
 export function TraceDiagram({ trace }) {
-    const [selected, setSelected] = useState(""), [zoom, setZoom] = useState(0.8), [flow, setFlow] = useState(true);
-    const viewport = useRef(null);
+    const [selected, setSelected] = useState(""), [flow, setFlow] = useState(true), [extraCategories, setExtraCategories] = useState({}), [entering, setEntering] = useState(null), [probabilityView, setProbabilityView] = useState(null);
     const entries = Object.entries(trace.request.questions ?? {}).filter(([, q]) => q && typeof q === "object" && typeof q.type === "string"), [key, question] = entries.find(([key]) => key === selected) ??
         entries[0] ?? ["", undefined];
     const answer = trace.result?.answers[key], image = findImage(trace.request.state) ||
-        (trace.request.assets ? findImage(trace.request.assets) : undefined), outputs = flowAnswer(answer);
-    const resultHeight = Math.max(280, 166 +
-        Object.keys(answer?.probabilities ?? {}).length * 44 +
+        (trace.request.assets ? findImage(trace.request.assets) : undefined), allProbabilities = useMemo(() => Object.entries(answer?.probabilities ?? {}).sort((a, b) => b[1] - a[1]), [answer?.probabilities]);
+    const compact = answer?.type === "choice" && allProbabilities.length > 6;
+    const shownProbabilities = compact
+        ? allProbabilities.slice(0, 3)
+        : allProbabilities;
+    if (compact &&
+        answer.choice !== undefined &&
+        !shownProbabilities.some(([label]) => label === answer.choice)) {
+        const returned = allProbabilities.find(([label]) => label === answer.choice);
+        if (returned)
+            shownProbabilities.push(returned);
+    }
+    if (compact && (extraCategories[key] ?? 0) > 0) {
+        const initialLabels = new Set(shownProbabilities.map(([label]) => label));
+        shownProbabilities.push(...allProbabilities
+            .filter(([label]) => !initialLabels.has(label))
+            .slice(0, extraCategories[key] ?? 0));
+    }
+    const outputs = flowAnswer(compact
+        ? { ...answer, probabilities: Object.fromEntries(shownProbabilities) }
+        : answer);
+    const remaining = compact
+        ? allProbabilities.length - shownProbabilities.length
+        : 0;
+    const spacing = compact ? 112 : 136;
+    const showProbabilities = probabilityView === key && answer?.type === "choice";
+    const resultHeight = Math.max(280, (compact ? 230 : 166) +
+        (compact
+            ? shownProbabilities.length
+            : Object.keys(answer?.probabilities ?? {}).length) *
+            44 +
         (answer?.score !== undefined ? 50 : 0), answer?.box ? 390 : 0);
-    const height = Math.max(520, resultHeight + 90, outputs.length * 136 + 60), ry = Math.max(40, (height - resultHeight) / 2), mid = ry + resultHeight / 2;
-    const fit = () => {
-        if (viewport.current)
-            setZoom(Math.min(1, (viewport.current.clientWidth - 24) / 1120));
-    };
-    useEffect(() => {
-        if (viewport.current)
-            setZoom(Math.min(1, Math.max(0.75, (viewport.current.clientWidth - 24) / 1120)));
-    }, []);
+    const height = Math.max(520, resultHeight + 90, (outputs.length + (remaining ? 1 : 0)) * spacing + 60), ry = compact ? 40 : Math.max(40, (height - resultHeight) / 2), mid = ry + resultHeight / 2;
+    const { viewport, canvas, zoom, zoomBy, fit, preserveCamera } = useDiagramViewport(1120, height, key);
     if (!question)
         return _jsx("p", { className: "muted", children: "No questions available in this capture." });
     const sourcePath = (y) => `M260 ${y} C325 ${y},325 ${mid},390 ${mid}`;
+    const enteringDelay = (index) => entering?.question === key && index >= entering.from && index < entering.to
+        ? `${(index - entering.from) * 55}ms`
+        : undefined;
     const paths = [
         { id: "state", d: sourcePath(122), active: true },
         { id: "question", d: sourcePath(378), active: true },
         ...outputs.map((output, i) => ({
-            id: `output-${i}`,
-            d: `M710 ${mid} C790 ${mid},790 ${92 + i * 136},870 ${92 + i * 136}`,
+            id: `output-${key}-${output.label}`,
+            delay: enteringDelay(i),
+            d: `M710 ${mid} C790 ${mid},790 ${92 + i * spacing},870 ${92 + i * spacing}`,
             active: output.active,
         })),
     ];
-    return (_jsxs("div", { className: "lab-flow", children: [_jsxs("div", { className: "lab-flow-toolbar", children: [_jsxs("label", { children: ["Question", _jsx("select", { "aria-label": "Diagram question", value: key, onChange: (event) => setSelected(event.target.value), children: entries.map(([name, q]) => (_jsxs("option", { value: name, children: [name, " \u00B7 ", q.type] }, name))) })] }), _jsxs("div", { children: [_jsx("button", { "aria-label": "Zoom diagram out", onClick: () => setZoom((v) => Math.max(0.4, v - 0.1)), children: "\u2212" }), _jsxs("output", { "aria-label": "Diagram zoom", children: [Math.round(zoom * 100), "%"] }), _jsx("button", { "aria-label": "Zoom diagram in", onClick: () => setZoom((v) => Math.min(1.5, v + 0.1)), children: "+" }), _jsx("button", { onClick: fit, children: "Fit" }), _jsx("button", { "aria-pressed": flow, onClick: () => setFlow(!flow), children: flow ? "Pause flow" : "Play flow" })] })] }), _jsx("div", { className: "lab-flow-viewport", ref: viewport, tabIndex: 0, "aria-label": "Jev diagram, scroll to explore", children: _jsx("div", { style: { width: 1120 * zoom, height: height * zoom }, children: _jsxs("div", { className: "lab-flow-canvas", style: { width: 1120, height, transform: `scale(${zoom})` }, children: [_jsxs("svg", { className: "lab-connections", width: "1120", height: height, "aria-hidden": "true", children: [paths.map((path) => (_jsxs("g", { children: [_jsx("path", { d: path.d, className: path.active ? "active" : "" }), flow &&
-                                                path.active &&
-                                                !["error", "cancelled"].includes(trace.status) && (_jsx("circle", { r: "3", className: "lab-flow-dot", children: _jsx("animateMotion", { dur: "3.2s", repeatCount: "indefinite", path: path.d }) }))] }, path.id))), _jsx("text", { x: "305", y: mid - 65, children: "state" }), _jsx("text", { x: "300", y: mid + 65, children: "question" })] }), _jsxs("article", { className: "lab-card", style: { left: 20, top: 32, width: 240, height: 180 }, children: [_jsx("span", { className: "lab-eyebrow", children: image ? "IMAGE STATE" : "STATE" }), _jsx("h3", { children: "Shared context" }), image ? (_jsx("img", { className: "lab-source-image", src: image, alt: "Captured image state" })) : (_jsx("p", { className: "lab-copy", title: stateText(trace), children: stateText(trace) }))] }), _jsxs("article", { className: "lab-card", style: { left: 20, top: 288, width: 240, height: 180 }, children: [_jsx("span", { className: "lab-eyebrow", children: "INSTRUCTIONS" }), _jsxs("h3", { children: ["Question \u00B7 ", question.type] }), _jsx("p", { className: "lab-copy", title: typeof question.instructions === "string"
-                                            ? question.instructions
-                                            : JSON.stringify(question.instructions), children: typeof question.instructions === "string"
-                                            ? question.instructions
-                                            : JSON.stringify(question.instructions) })] }), _jsxs("article", { className: "lab-card lab-answer-card", style: {
-                                    left: 390,
-                                    top: ry,
-                                    width: 320,
-                                    minHeight: resultHeight,
-                                }, children: [_jsxs("span", { className: "lab-eyebrow", children: ["JEV \u00B7 ", question.type.toUpperCase()] }), _jsx("h3", { title: key, children: key }), _jsx(Result, { answer: answer, image: image })] }), outputs.map((output, i) => (_jsxs("article", { className: `lab-card lab-output ${output.active ? "" : "lab-idle"}`, style: {
-                                    left: 870,
-                                    top: 40 + i * 136,
-                                    width: 230,
-                                    minHeight: 104,
-                                }, children: [_jsx("span", { className: "lab-eyebrow", children: output.eyebrow }), _jsx("h3", { title: output.label, children: output.label }), _jsx("p", { children: output.detail })] }, i)))] }) }) }), _jsxs("p", { className: "muted", children: [entries.length, " parallel question", entries.length === 1 ? "" : "s", " in one request. Connections show data flow, not model timing. Application routes and thresholds are not captured. Full inputs and criteria are in Questions and Context."] })] }));
+    return (_jsxs("div", { className: `lab-flow ${compact ? "lab-flow-compact" : ""}`, children: [_jsxs("div", { className: "lab-flow-toolbar", children: [_jsxs("label", { children: ["Question", _jsx("select", { "aria-label": "Diagram question", value: key, onChange: (event) => {
+                                    setEntering(null);
+                                    setSelected(event.target.value);
+                                }, children: entries.map(([name, q]) => (_jsxs("option", { value: name, children: [name, " \u00B7 ", q.type] }, name))) })] }), _jsxs("div", { children: [answer?.type === "choice" && (_jsx("button", { "aria-pressed": showProbabilities, onClick: () => {
+                                    setEntering(null);
+                                    setProbabilityView(showProbabilities ? null : key);
+                                }, children: showProbabilities
+                                    ? "Back to overview"
+                                    : `All probabilities (${allProbabilities.length})` })), !showProbabilities && (_jsxs(_Fragment, { children: [compact && (_jsx("button", { disabled: (extraCategories[key] ?? 0) === 0, onClick: () => {
+                                            preserveCamera();
+                                            setEntering(null);
+                                            setExtraCategories((counts) => ({ ...counts, [key]: 0 }));
+                                        }, children: "Show fewer" })), _jsx("button", { "aria-label": "Zoom diagram out", disabled: zoom <= 10, onClick: () => zoomBy(1 / 1.2), children: "\u2212" }), _jsxs("output", { "aria-label": "Diagram zoom", children: [zoom, "%"] }), _jsx("button", { "aria-label": "Zoom diagram in", disabled: zoom >= 400, onClick: () => zoomBy(1.2), children: "+" }), _jsx("button", { onClick: fit, children: "Fit" }), _jsx("button", { "aria-pressed": flow, onClick: () => setFlow(!flow), children: flow ? "Pause flow" : "Play flow" })] }))] })] }), showProbabilities && answer && (_jsx(ChoiceProbabilities, { answer: answer }, key)), _jsx("div", { hidden: showProbabilities, className: "lab-flow-viewport", ref: viewport, tabIndex: 0, role: "group", "aria-label": "Jev diagram. Drag to pan, scroll or pinch to zoom. Arrow keys pan, plus and minus zoom, zero fits.", children: _jsxs("div", { ref: canvas, className: "lab-flow-canvas", style: { width: 1120, height }, children: [_jsxs("svg", { className: "lab-connections", width: "1120", height: height, "aria-hidden": "true", children: [paths.map((path) => (_jsxs("g", { children: [_jsx("path", { d: path.d, pathLength: 1, className: `${path.active ? "active" : ""} ${"delay" in path && path.delay !== undefined ? "lab-branch-enter" : ""}`, style: {
+                                                animationDelay: "delay" in path ? path.delay : undefined,
+                                            } }), flow &&
+                                            !showProbabilities &&
+                                            path.active &&
+                                            !["error", "cancelled"].includes(trace.status) && (_jsx("circle", { r: "3", className: "lab-flow-dot", children: _jsx("animateMotion", { dur: "3.2s", repeatCount: "indefinite", path: path.d }) }))] }, path.id))), _jsx("text", { x: "305", y: mid - 65, children: "state" }), _jsx("text", { x: "300", y: mid + 65, children: "question" })] }), _jsxs("article", { className: "lab-card", style: { left: 20, top: 32, width: 240, height: 180 }, children: [_jsx("span", { className: "lab-eyebrow", children: image ? "IMAGE STATE" : "STATE" }), _jsx("h3", { children: "Shared context" }), image ? (_jsx("img", { className: "lab-source-image", src: image, alt: "Captured image state" })) : (_jsx("p", { className: "lab-copy", title: stateText(trace), children: stateText(trace) }))] }), _jsxs("article", { className: "lab-card", style: { left: 20, top: 288, width: 240, height: 180 }, children: [_jsx("span", { className: "lab-eyebrow", children: "INSTRUCTIONS" }), _jsxs("h3", { children: ["Question \u00B7 ", question.type] }), _jsx("p", { className: "lab-copy", title: typeof question.instructions === "string"
+                                        ? question.instructions
+                                        : JSON.stringify(question.instructions), children: typeof question.instructions === "string"
+                                        ? question.instructions
+                                        : JSON.stringify(question.instructions) })] }), _jsxs("article", { className: "lab-card lab-answer-card", style: {
+                                left: 390,
+                                top: ry,
+                                width: 320,
+                                minHeight: resultHeight,
+                            }, children: [_jsxs("span", { className: "lab-eyebrow", children: ["JEV \u00B7 ", question.type.toUpperCase()] }), _jsx("h3", { title: key, children: key }), compact && (_jsxs("p", { className: "lab-small", children: ["Showing ", shownProbabilities.length, " of ", allProbabilities.length, " ", "probabilities"] })), _jsx(Result, { answer: answer, image: image, probabilities: compact ? shownProbabilities : undefined })] }), outputs.map((output, i) => (_jsxs("article", { className: `lab-card lab-output ${output.active ? "" : "lab-idle"} ${enteringDelay(i) !== undefined ? "lab-card-enter" : ""}`, onAnimationEnd: () => {
+                                if (entering?.question === key && i === entering.to - 1)
+                                    setEntering(null);
+                            }, style: {
+                                left: 870,
+                                top: 40 + i * spacing,
+                                width: 230,
+                                minHeight: compact ? 96 : 104,
+                                animationDelay: enteringDelay(i),
+                            }, children: [_jsx("span", { className: "lab-eyebrow", children: output.eyebrow }), _jsx("h3", { title: output.label, children: output.label }), _jsx("p", { children: output.detail })] }, `${key}-${output.label}`))), remaining > 0 && (_jsxs("article", { className: "lab-card lab-choice-remainder", style: {
+                                left: 870,
+                                top: 40 + outputs.length * spacing,
+                                width: 230,
+                                minHeight: 96,
+                            }, children: [_jsx("span", { className: "lab-eyebrow", children: "MORE CATEGORIES" }), _jsx("button", { onClick: () => {
+                                        preserveCamera();
+                                        setEntering({
+                                            question: key,
+                                            from: outputs.length,
+                                            to: outputs.length + Math.min(3, remaining),
+                                        });
+                                        setExtraCategories((counts) => ({
+                                            ...counts,
+                                            [key]: (counts[key] ?? 0) + 3,
+                                        }));
+                                    }, children: "Show More" }), _jsxs("p", { className: "lab-small", children: [remaining, " remaining \u00B7 Add ", Math.min(3, remaining)] })] }))] }) }), !showProbabilities && (_jsxs("p", { className: "muted lab-flow-caption", children: [_jsx("span", { className: "lab-gesture-hint", children: "Drag to pan \u00B7 Scroll or pinch to zoom \u00B7 0 to fit" }), entries.length, " parallel question", entries.length === 1 ? "" : "s", " in one request. Connections show data flow, not model timing. Application routes and thresholds are not captured. Full inputs and criteria are in Questions and Context."] }))] }));
 }

package/lib/src/diagram-camera.d.ts

@@ -0,0 +1,16 @@
+export type Point = {
+    x: number;
+    y: number;
+};
+export type Camera = Point & {
+    scale: number;
+};
+export type Size = {
+    width: number;
+    height: number;
+};
+export declare const minScale = 0.1;
+export declare const maxScale = 4;
+export declare function fitCamera(view: Size, content: Size): Camera;
+/** Keep the content under `from` under `to`, including while a pinch moves. */
+export declare function zoomCamera(camera: Camera, factor: number, from: Point, to?: Point): Camera;

package/lib/src/diagram-camera.js

@@ -0,0 +1,20 @@
+export const minScale = 0.1;
+export const maxScale = 4;
+const limit = (scale) => Math.max(minScale, Math.min(maxScale, scale));
+export function fitCamera(view, content) {
+    const scale = limit(Math.min((view.width - 48) / content.width, (view.height - 48) / content.height, 1));
+    return {
+        x: (view.width - content.width * scale) / 2,
+        y: (view.height - content.height * scale) / 2,
+        scale,
+    };
+}
+/** Keep the content under `from` under `to`, including while a pinch moves. */
+export function zoomCamera(camera, factor, from, to = from) {
+    const scale = limit(camera.scale * factor);
+    return {
+        x: to.x - ((from.x - camera.x) * scale) / camera.scale,
+        y: to.y - ((from.y - camera.y) * scale) / camera.scale,
+        scale,
+    };
+}

package/lib/src/flow-model.js

@@ -17,7 +17,7 @@ export function flowAnswer(answer) {
     if (answer.type === "choice")
         return Object.entries(answer.probabilities ?? {}).map(([label, probability]) => ({
             label,
-            detail: `${Math.round(probability * 100)}% probability`,
+            detail: `${Number((probability * 100).toPrecision(6))}% probability`,
             active: label === answer.choice,
             eyebrow: label === answer.choice ? "RETURNED CHOICE" : "ALTERNATIVE",
         }));

package/lib/src/index.d.ts

@@ -1,4 +1,4 @@
-export type { Trace, Snapshot, Json, AnswerView, QuestionView, } from "./protocol.js";
+export type { Trace, Snapshot, StreamSnapshot, TraceDelta, Json, AnswerView, QuestionView, } from "./protocol.js";
 export type JevDevtoolsProps = {
     endpoint?: string;
     /** Opt in explicitly, normally with import.meta.env.DEV. */

package/lib/src/inspector-styles.d.ts

@@ -0,0 +1,2 @@
+/** Generated from inspector.css during the package build. */
+export declare const inspectorStyles: string;