jev-devtools 0.1.3 → 0.3.0

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.d.ts

@@ -1,4 +1,7 @@
 import type { Trace } from "./protocol.js";
-export declare function TraceDiagram({ trace }: {
+export declare function TraceDiagram({ trace, embedded, onHeightChange, }: {
     trace: Trace;
+    /** Render in a parent diagram's coordinates, without a nested camera. */
+    embedded?: boolean;
+    onHeightChange?: (height: number) => void;
 }): import("react").JSX.Element;

package/lib/src/TraceDiagram.js

@@ -1,19 +1,21 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useDiagramViewport } from "./useDiagramViewport.js";
-import { findImage, flowAnswer, stateText } from "./flow-model.js";
+import { findImage, flowAnswer } from "./flow-model.js";
+import { DiagramContent } from "./DiagramContent.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,44 +25,128 @@ function Result({ answer, image }) {
                                     height: pct(answer.box.bottom - answer.box.top),
                                 } }))] }), _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(""), [flow, setFlow] = useState(true);
+export function TraceDiagram({ trace, embedded = false, onHeightChange, }) {
+    const root = useRef(null);
+    useLayoutEffect(() => {
+        if (!embedded || !root.current || !onHeightChange)
+            return;
+        const element = root.current;
+        const observer = new ResizeObserver(() => {
+            // Closed drawers and skipped offscreen content cannot replace retained bounds.
+            if (element.offsetHeight > 0)
+                onHeightChange(element.offsetHeight);
+        });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [embedded, onHeightChange]);
+    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 { viewport, canvas, zoom, zoomBy, fit } = useDiagramViewport(1120, height, key);
+    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", 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" })] })] }), _jsx("div", { 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, className: path.active ? "active" : "" }), flow &&
+    return (_jsxs("div", { ref: root, className: `lab-flow ${compact ? "lab-flow-compact" : ""} ${embedded ? "lab-flow-embedded" : ""}`, 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" })), !embedded && (_jsxs(_Fragment, { children: [_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: embedded ? "lab-flow-surface" : "lab-flow-viewport", ref: embedded ? undefined : viewport, style: embedded ? { height } : undefined, tabIndex: embedded ? undefined : 0, role: "group", "aria-label": embedded
+                    ? "Jev request diagram"
+                    : "Jev diagram. Drag to pan, scroll or pinch to zoom. Arrow keys pan, plus and minus zoom, zero fits.", children: _jsxs("div", { ref: embedded ? undefined : 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: {
+                                            !["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 lab-content-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(DiagramContent, { value: trace.request.state, label: "State properties" }, trace.id))] }), _jsxs("article", { className: "lab-card lab-content-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(DiagramContent, { value: question.instructions, label: "Question instructions" }, `${trace.id}:${key}`)] }), _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: {
+                            }, 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 ${"probability" in output ? "lab-noul-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 * 136,
+                                top: 40 + i * spacing,
                                 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 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."] })] }));
+                                minHeight: compact ? 96 : 104,
+                                animationDelay: enteringDelay(i),
+                                ...("probability" in output &&
+                                    Number.isFinite(output.probability)
+                                    ? {
+                                        "--lab-noul-probability": Math.max(0, Math.min(1, output.probability)),
+                                    }
+                                    : {}),
+                            }, 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 && !embedded && (_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/condition-inputs.d.ts

@@ -0,0 +1,9 @@
+import type { Json, Trace } from "./protocol.js";
+import type { FlowRun } from "./flow-protocol.js";
+export type ConditionInput = {
+    reference: string;
+    name: string;
+    value: string;
+};
+export declare function conditionInputs(rule: Json, run: FlowRun, traces: Map<string, Trace>, stepNames?: Map<string, string>): ConditionInput[];
+export declare function conditionRequirement(rule: Json, inputs: ConditionInput[]): string;

package/lib/src/condition-inputs.js

@@ -0,0 +1,100 @@
+import { formatFlowCondition, formatConditionLiteral, } from "./flow-condition.js";
+export function conditionInputs(rule, run, traces, stepNames = new Map()) {
+    const inputs = new Map();
+    const sources = new Map();
+    const visit = (node, depth = 0) => {
+        if (depth > 16 || !node || typeof node !== "object" || Array.isArray(node))
+            return;
+        if (node.op === "reference" &&
+            typeof node.label === "string" &&
+            !inputs.has(node.label)) {
+            const name = typeof node.name === "string" ? node.name : "Input";
+            const readable = name
+                .replace(/[_-]+/g, " ")
+                .replace(/([a-z])([A-Z])/g, "$1 $2");
+            const trace = typeof node.stepId === "string"
+                ? traces.get(run.steps[node.stepId]?.traceId ?? "")
+                : undefined;
+            let value = trace?.result;
+            let available = !!trace?.result;
+            if (!Array.isArray(node.path) ||
+                !node.path.every((key) => typeof key === "string"))
+                available = false;
+            else
+                for (const key of node.path) {
+                    if (!available ||
+                        !value ||
+                        typeof value !== "object" ||
+                        !Object.hasOwn(value, String(key))) {
+                        available = false;
+                        break;
+                    }
+                    value = value[String(key)];
+                }
+            const text = !available
+                ? "Not captured"
+                : node.probability === true &&
+                    typeof value === "number" &&
+                    Number.isFinite(value)
+                    ? formatConditionLiteral(value, true)
+                    : typeof value === "object" && value !== null
+                        ? "Structured value"
+                        : String(value);
+            if (typeof node.stepId === "string")
+                sources.set(node.label, stepNames.get(node.stepId) ?? node.stepId);
+            inputs.set(node.label, {
+                reference: node.label,
+                name: readable.charAt(0).toUpperCase() + readable.slice(1),
+                value: text,
+            });
+        }
+        if (Array.isArray(node.args))
+            for (const arg of node.args)
+                visit(arg, depth + 1);
+    };
+    visit(rule);
+    const list = [...inputs.values()];
+    return list.map((input) => list.filter((other) => other.name === input.name).length > 1
+        ? {
+            ...input,
+            name: `${input.name} · ${sources.get(input.reference) ?? input.reference}`,
+        }
+        : input);
+}
+export function conditionRequirement(rule, inputs) {
+    const names = new Map(inputs.map((input) => [input.reference, input.name]));
+    // A single reference-to-literal comparison already has its subject in Incoming.
+    if (rule &&
+        typeof rule === "object" &&
+        !Array.isArray(rule) &&
+        Array.isArray(rule.args) &&
+        rule.args.length === 2) {
+        const [left, right] = rule.args;
+        if (left &&
+            right &&
+            typeof left === "object" &&
+            typeof right === "object" &&
+            !Array.isArray(left) &&
+            !Array.isArray(right) &&
+            left.op === "reference" &&
+            right.op === "literal" &&
+            ["gte", "lt", "eq"].includes(String(rule.op))) {
+            return `${rule.op === "gte" ? "At least" : rule.op === "lt" ? "Less than" : "Equal to"} ${formatConditionLiteral(right.value, left.probability === true)}`;
+        }
+    }
+    const rename = (node, depth = 0) => {
+        if (depth > 16 || !node || typeof node !== "object" || Array.isArray(node))
+            return node;
+        if (node.op === "reference")
+            return {
+                ...node,
+                label: typeof node.label === "string"
+                    ? (names.get(node.label) ?? "Input")
+                    : "Input",
+            };
+        if (Array.isArray(node.args))
+            return { ...node, args: node.args.map((arg) => rename(arg, depth + 1)) };
+        return node;
+    };
+    return formatFlowCondition(rename(rule));
+}

package/lib/src/flow-condition.d.ts

@@ -0,0 +1,4 @@
+import type { Json } from "./protocol.js";
+export declare function formatConditionLiteral(value: Json, probability?: boolean): string;
+/** Format captured rules only; never evaluate or infer the branch result. */
+export declare function formatFlowCondition(value: Json, depth?: number): string;

package/lib/src/flow-condition.js

@@ -0,0 +1,47 @@
+export function formatConditionLiteral(value, probability = false) {
+    if (probability && typeof value === "number" && value >= 0 && value <= 1) {
+        const [coefficient, exponent = "0"] = String(value).split("e");
+        return `${Number(`${coefficient}e${Number(exponent) + 2}`)}%`;
+    }
+    return JSON.stringify(value) ?? "[value unavailable]";
+}
+/** Format captured rules only; never evaluate or infer the branch result. */
+export function formatFlowCondition(value, depth = 0) {
+    if (depth > 16)
+        return "[rule truncated]";
+    if (!value || typeof value !== "object" || Array.isArray(value))
+        return typeof value === "string" ? value : "[rule unavailable]";
+    if (value.op === "reference")
+        return typeof value.label === "string"
+            ? value.label
+            : "[reference unavailable]";
+    if (value.op === "literal")
+        return formatConditionLiteral(value.value);
+    if (!Array.isArray(value.args))
+        return "[rule unavailable]";
+    const args = value.args;
+    const format = (v) => formatFlowCondition(v, depth + 1);
+    if (value.op === "not")
+        return `NOT (${format(args[0])})`;
+    if (value.op === "all" || value.op === "any") {
+        if (!args.length)
+            return value.op === "all"
+                ? "TRUE (no conditions)"
+                : "FALSE (no conditions)";
+        return `(${args.map(format).join(value.op === "all" ? " AND " : " OR ")})`;
+    }
+    if (!["eq", "lt", "gte"].includes(String(value.op)) || args.length !== 2)
+        return "[rule unavailable]";
+    const probability = args.some((arg) => arg &&
+        typeof arg === "object" &&
+        !Array.isArray(arg) &&
+        arg.op === "reference" &&
+        arg.probability === true);
+    const operand = (arg) => arg &&
+        typeof arg === "object" &&
+        !Array.isArray(arg) &&
+        arg.op === "literal"
+        ? formatConditionLiteral(arg.value, probability)
+        : format(arg);
+    return `${operand(args[0])} ${value.op === "eq" ? "=" : value.op === "lt" ? "<" : "≥"} ${operand(args[1])}`;
+}

package/lib/src/flow-model.d.ts

@@ -1,9 +1,14 @@
-import type { AnswerView, Json, Trace } from "./protocol.js";
+import type { AnswerView, Json } from "./protocol.js";
 export declare function findImage(value: Json): string | undefined;
 export declare function flowAnswer(answer?: AnswerView): {
     label: string;
     detail: string;
     active: boolean;
     eyebrow: string;
+}[] | {
+    label: string;
+    detail: string;
+    active: boolean;
+    eyebrow: string;
+    probability: number;
 }[];
-export declare function stateText(trace: Trace): string;