jev-devtools 0.5.4 → 0.5.5

package/lib/src/TraceDiagram.js

@@ -1,24 +1,26 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CaptureFields, PartialBox } from "./CaptureFields.js";
+import { captureFieldUnavailable, captureQuestionEntries, unavailableCaptureFields, traceCaptureView, } from "./capture-view.js";
 import { useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useDiagramViewport } from "./useDiagramViewport.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, probabilities, }) {
+function Result({ answer, image, probabilities, scaleAvailable, }) {
     if (!answer)
         return _jsx("p", { className: "lab-copy", children: "No answer received." });
     return (_jsxs(_Fragment, { children: [answer.probabilities &&
                 (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} · ${typeof answer.legend[key] === "string" ? answer.legend[key] : JSON.stringify(answer.legend[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", 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: {
+                                    : "", 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)] }), scaleAvailable ? (_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: {
+                                } }), Object.keys(answer.probabilities ?? {}).map((k) => (_jsx("small", { children: k }, k)))] })) : (_jsx("p", { className: "muted", children: "Score scale unavailable in this capture." }))] })), 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: {
                                     left: pct(answer.box.left),
                                     top: pct(answer.box.top),
                                     width: pct(answer.box.right - answer.box.left),
@@ -26,6 +28,7 @@ function Result({ answer, image, probabilities, }) {
                                 } }))] }), _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, embedded = false, onHeightChange, }) {
+    trace = traceCaptureView(trace);
     const root = useRef(null);
     useLayoutEffect(() => {
         if (!embedded || !root.current || !onHeightChange)
@@ -40,10 +43,18 @@ export function TraceDiagram({ trace, embedded = false, onHeightChange, }) {
         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) ??
+    const entries = captureQuestionEntries(trace), [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), allProbabilities = useMemo(() => Object.entries(answer?.probabilities ?? {}).sort((a, b) => b[1] - a[1]), [answer?.probabilities]);
+    const probabilitiesUnavailable = captureFieldUnavailable(trace, [
+        "result",
+        "answers",
+        key,
+        "probabilities",
+    ]) ||
+        unavailableCaptureFields(trace, ["result", "answers", key, "probabilities"])
+            .length > 0;
     const compact = answer?.type === "choice" && allProbabilities.length > 6;
     const shownProbabilities = compact
         ? allProbabilities.slice(0, 3)
@@ -69,23 +80,39 @@ export function TraceDiagram({ trace, embedded = false, onHeightChange, }) {
         : 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 unavailableCount = unavailableCaptureFields(trace, [
+        "result",
+        "answers",
+        key,
+    ]).length;
+    const resultHeight = unavailableCount * 44 +
+        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 + (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." });
+        return captureFieldUnavailable(trace, ["request", "questions"]) ? (_jsx(CaptureFields, { trace: trace, path: captureFieldUnavailable(trace, ["request"])
+                ? ["request"]
+                : ["request", "questions"] })) : (_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 },
+        {
+            id: "state",
+            d: sourcePath(122),
+            active: !captureFieldUnavailable(trace, ["request", "state"]),
+        },
+        {
+            id: "question",
+            d: sourcePath(378),
+            active: !captureFieldUnavailable(trace, ["request", "questions", key]),
+        },
         ...outputs.map((output, i) => ({
             id: `output-${key}-${output.label}`,
             delay: enteringDelay(i),
@@ -101,23 +128,23 @@ export function TraceDiagram({ trace, embedded = false, onHeightChange, }) {
                                     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: () => {
+                                    : `${probabilitiesUnavailable ? "Available" : "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
+                                        }, 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, captureNotice: _jsx(CaptureFields, { trace: trace, path: ["result", "answers", key, "probabilities"] }) }, 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 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: {
+                                            !["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" }), captureFieldUnavailable(trace, ["request", "state"]) ? (_jsx(CaptureFields, { trace: trace, path: ["request", "state"] })) : 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(CaptureFields, { trace: trace, path: ["request", "questions", key] }), _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 }), 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: () => {
+                            }, 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(CaptureFields, { trace: trace, path: ["result", "answers", key] }), _jsx(PartialBox, { trace: trace, name: key }), !captureFieldUnavailable(trace, ["result", "answers", key]) && (_jsx(Result, { answer: answer, image: image, probabilities: compact ? shownProbabilities : undefined, scaleAvailable: !probabilitiesUnavailable }))] }), 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: {

package/lib/src/capture-view.d.ts

@@ -0,0 +1,17 @@
+import type { Json, QuestionView, Trace } from "./protocol.js";
+type CapturedTrace = Omit<Trace, "request" | "result"> & {
+    request: Json;
+    result?: Json;
+};
+/** Project captured JSON, never the original SDK data. Also accepts legacy
+ * captures whose content did not satisfy the old asserted declarations.
+ * The transport parser remains responsible for the structural Trace envelope. */
+export declare function projectTraceCapture(trace: CapturedTrace): Trace;
+type Path = readonly string[];
+/** Read only the captured copy, including legacy and whole-value replacements. */
+export declare function capturedValue(trace: Trace, path: Path): Json | undefined;
+export declare function captureQuestionEntries(trace: Trace): [string, QuestionView][];
+export declare function captureFieldUnavailable(trace: Trace, path: Path): boolean;
+export declare function unavailableCaptureFields(trace: Trace, prefix: Path): Path[];
+export declare function traceCaptureView(trace: Trace): Trace;
+export {};

package/lib/src/capture-view.js

@@ -0,0 +1,266 @@
+const isJsonObject = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
+const isFiniteNumber = (value) => typeof value === "number" && Number.isFinite(value);
+function isQuestionView(value) {
+    return isJsonObject(value) && typeof value.type === "string";
+}
+function isAnswerView(value) {
+    if (!isJsonObject(value) || typeof value.type !== "string")
+        return false;
+    if (value.choice !== undefined && typeof value.choice !== "string")
+        return false;
+    for (const key of ["score", "noul", "confidence"])
+        if (value[key] !== undefined && !isFiniteNumber(value[key]))
+            return false;
+    if (value.probabilities !== undefined &&
+        (!isJsonObject(value.probabilities) ||
+            !Object.values(value.probabilities).every(isFiniteNumber)))
+        return false;
+    if (value.legend !== undefined && !isJsonObject(value.legend))
+        return false;
+    const box = value.box;
+    if (box !== undefined &&
+        (!isJsonObject(box) ||
+            !["left", "top", "right", "bottom"].every((key) => isFiniteNumber(box[key])) ||
+            !Object.values(box).every(isFiniteNumber)))
+        return false;
+    return true;
+}
+function isRequestView(value) {
+    return (isJsonObject(value) &&
+        typeof value.model === "string" &&
+        value.state !== undefined &&
+        isJsonObject(value.questions) &&
+        Object.values(value.questions).every(isQuestionView));
+}
+function isResultView(value) {
+    return (isJsonObject(value) &&
+        typeof value.model === "string" &&
+        isJsonObject(value.answers) &&
+        Object.values(value.answers).every(isAnswerView) &&
+        (value.usage === undefined ||
+            (isJsonObject(value.usage) &&
+                isFiniteNumber(value.usage.input_tokens) &&
+                isFiniteNumber(value.usage.output_tokens))));
+}
+function hasStructuredCapture(trace) {
+    return (isRequestView(trace.request) &&
+        (trace.result === undefined || isResultView(trace.result)));
+}
+/** Project captured JSON, never the original SDK data. Also accepts legacy
+ * captures whose content did not satisfy the old asserted declarations.
+ * The transport parser remains responsible for the structural Trace envelope. */
+export function projectTraceCapture(trace) {
+    if (hasStructuredCapture(trace))
+        return trace;
+    const requestView = isRequestView(trace.request) ? trace.request : undefined;
+    const resultView = trace.result !== undefined && isResultView(trace.result)
+        ? trace.result
+        : undefined;
+    const capture = { ...trace.capture };
+    const warnings = new Set(trace.captureWarnings);
+    if (!requestView) {
+        capture.request = trace.request;
+        warnings.add("Request structured view unavailable; see redacted capture in Raw.");
+    }
+    if (trace.result !== undefined && !resultView) {
+        capture.result = trace.result;
+        warnings.add("Response structured view unavailable; see redacted capture in Raw.");
+    }
+    return {
+        ...trace,
+        request: requestView ?? { model: "", state: null, questions: {} },
+        result: resultView,
+        ...(Object.keys(capture).length ? { capture } : {}),
+        captureWarnings: [...warnings],
+    };
+}
+const missing = new WeakMap();
+const startsWith = (path, prefix) => prefix.every((part, index) => path[index] === part);
+/** Read only the captured copy, including legacy and whole-value replacements. */
+export function capturedValue(trace, path) {
+    const [section, ...parts] = path;
+    let value = section === "request"
+        ? (trace.capture?.request ?? trace.request)
+        : (trace.capture?.result ?? trace.result);
+    // Null is an explicit capture, not a missing capture.
+    if (section === "request" && trace.capture?.request === null)
+        value = null;
+    if (section === "result" && trace.capture?.result === null)
+        value = null;
+    for (const key of parts)
+        value = isJsonObject(value) ? value[key] : undefined;
+    return value;
+}
+export function captureQuestionEntries(trace) {
+    const questions = { ...trace.request.questions };
+    if (trace.capture?.request !== undefined)
+        for (const name of Object.keys(trace.result?.answers ?? {}))
+            if (!Object.hasOwn(questions, name))
+                Object.defineProperty(questions, name, {
+                    value: { type: "Unavailable" },
+                    enumerable: true,
+                });
+    return Object.entries(questions);
+}
+export function captureFieldUnavailable(trace, path) {
+    return (missing.get(traceCaptureView(trace)) ?? []).some((entry) => startsWith(path, entry));
+}
+export function unavailableCaptureFields(trace, prefix) {
+    return (missing.get(traceCaptureView(trace)) ?? []).filter((entry) => startsWith(entry, prefix));
+}
+// The wire view remains conservative for public consumers and replay. The
+// browser can display valid siblings because every omitted field has a path.
+function partialCaptureView(trace) {
+    const paths = [];
+    const absent = (path) => {
+        paths.push(path);
+    };
+    const object = (value, path) => {
+        if (isJsonObject(value))
+            return value;
+        absent(path);
+        return {};
+    };
+    const text = (value, path, fallback = "") => {
+        if (typeof value === "string")
+            return value;
+        absent(path);
+        return fallback;
+    };
+    const request = capturedValue(trace, ["request"]);
+    const result = capturedValue(trace, ["result"]);
+    const r = object(request, ["request"]);
+    const questions = object(r.questions, ["request", "questions"]);
+    const requestView = {
+        ...r,
+        model: text(r.model, ["request", "model"]),
+        state: r.state ?? null,
+        questions: Object.fromEntries(Object.entries(questions).map(([key, value]) => {
+            const path = ["request", "questions", key];
+            const q = object(value, path);
+            return [
+                key,
+                { ...q, type: text(q.type, [...path, "type"], "Unavailable") },
+            ];
+        })),
+    };
+    if (r.state === undefined)
+        absent(["request", "state"]);
+    let resultView;
+    if (result !== undefined) {
+        const r = object(result, ["result"]);
+        const answers = object(r.answers, ["result", "answers"]);
+        resultView = {
+            model: text(r.model, ["result", "model"]),
+            answers: Object.fromEntries(Object.entries(answers).map(([key, value]) => {
+                const path = ["result", "answers", key];
+                const a = object(value, path);
+                const answer = {
+                    type: text(a.type, [...path, "type"], "Unavailable"),
+                };
+                if (a.choice !== undefined) {
+                    if (typeof a.choice === "string")
+                        answer.choice = a.choice;
+                    else
+                        absent([...path, "choice"]);
+                }
+                for (const field of ["score", "noul", "confidence"]) {
+                    if (a[field] === undefined)
+                        continue;
+                    if (isFiniteNumber(a[field]))
+                        answer[field] = a[field];
+                    else
+                        absent([...path, field]);
+                }
+                if (a.probabilities !== undefined) {
+                    const probabilities = object(a.probabilities, [
+                        ...path,
+                        "probabilities",
+                    ]);
+                    answer.probabilities = Object.fromEntries(Object.entries(probabilities).flatMap(([label, value]) => {
+                        if (isFiniteNumber(value))
+                            return [[label, value]];
+                        absent([...path, "probabilities", label]);
+                        return [];
+                    }));
+                }
+                if (a.legend !== undefined) {
+                    if (isJsonObject(a.legend))
+                        answer.legend = a.legend;
+                    else
+                        absent([...path, "legend"]);
+                }
+                if (a.box !== undefined) {
+                    const box = object(a.box, [...path, "box"]);
+                    for (const field of new Set([
+                        "left",
+                        "top",
+                        "right",
+                        "bottom",
+                        ...Object.keys(box),
+                    ])) {
+                        if (!isFiniteNumber(box[field]))
+                            absent([...path, "box", field]);
+                    }
+                    if (isFiniteNumber(box.left) &&
+                        isFiniteNumber(box.top) &&
+                        isFiniteNumber(box.right) &&
+                        isFiniteNumber(box.bottom)) {
+                        answer.box = {
+                            left: box.left,
+                            top: box.top,
+                            right: box.right,
+                            bottom: box.bottom,
+                        };
+                    }
+                }
+                return [key, answer];
+            })),
+        };
+        if (r.usage !== undefined) {
+            const usage = object(r.usage, ["result", "usage"]);
+            for (const field of ["input_tokens", "output_tokens"])
+                if (!isFiniteNumber(usage[field]))
+                    absent(["result", "usage", field]);
+            if (isFiniteNumber(usage.input_tokens) &&
+                isFiniteNumber(usage.output_tokens))
+                resultView.usage = {
+                    input_tokens: usage.input_tokens,
+                    output_tokens: usage.output_tokens,
+                };
+        }
+    }
+    if (trace.capture?.request !== undefined)
+        for (const key of Object.keys(resultView?.answers ?? {}))
+            if (!Object.hasOwn(questions, key))
+                absent(["request", "questions", key]);
+    // Collapse descendant failures when their entire parent is unavailable.
+    const pathKeys = new Set(paths.map((path) => JSON.stringify(path)));
+    const unavailable = paths.filter((path) => !path.some((_, index) => pathKeys.has(JSON.stringify(path.slice(0, index)))));
+    const view = {
+        ...trace,
+        request: trace.capture?.request === undefined ? trace.request : requestView,
+        result: trace.capture?.result === undefined ? trace.result : resultView,
+        captureWarnings: trace.captureWarnings.map((warning) => warning ===
+            "Request structured view unavailable; see redacted capture in Raw." ||
+            warning ===
+                "Response structured view unavailable; see redacted capture in Raw."
+            ? "Some captured fields are unavailable. See Raw for captured content."
+            : warning),
+    };
+    view.captureWarnings = [...new Set(view.captureWarnings)];
+    missing.set(view, unavailable);
+    return view;
+}
+// Browser snapshots are immutable. Share the projection across consumers.
+const views = new WeakMap();
+export function traceCaptureView(trace) {
+    const cached = views.get(trace);
+    if (cached)
+        return cached;
+    const structured = projectTraceCapture(trace);
+    const view = structured.capture ? partialCaptureView(structured) : structured;
+    views.set(trace, view);
+    views.set(view, view);
+    return view;
+}

package/lib/src/condition-inputs.js

@@ -15,8 +15,12 @@ export function conditionInputs(rule, run, traces, stepNames = new Map()) {
             const trace = typeof node.stepId === "string"
                 ? traces.get(run.steps[node.stepId]?.traceId ?? "")
                 : undefined;
-            let value = trace?.result;
-            let available = !!trace?.result;
+            // Incoming labels display captured JSON; they never evaluate a rule or
+            // require the numeric answer shape used by the request diagrams.
+            let value = trace?.capture?.result !== undefined
+                ? trace.capture.result
+                : trace?.result;
+            let available = value !== undefined;
             if (node.source === "task" && typeof node.stepId === "string") {
                 const data = run.steps[node.stepId]?.data;
                 available =
@@ -87,7 +91,8 @@ export function conditionRequirement(rule, inputs) {
             !Array.isArray(right) &&
             left.op === "reference" &&
             right.op === "literal" &&
-            ["gte", "lt", "gt", "eq"].includes(String(rule.op))) {
+            typeof rule.op === "string" &&
+            ["gte", "lt", "gt", "eq"].includes(rule.op)) {
             return `${rule.op === "gte" ? "At least" : rule.op === "lt" ? "Less than" : rule.op === "gt" ? "Greater than" : "Equal to"} ${formatConditionLiteral(right.value, left.probability === true)}`;
         }
     }
@@ -98,7 +103,7 @@ export function conditionRequirement(rule, inputs) {
             return {
                 ...node,
                 label: typeof node.label === "string"
-                    ? names.get(node.label) ?? "Input"
+                    ? (names.get(node.label) ?? "Input")
                     : "Input",
             };
         if (Array.isArray(node.args))

package/lib/src/display-redaction.js

@@ -1,3 +1,4 @@
+import { traceCaptureView } from "./capture-view.js";
 // Presentation only. Credential and application redaction happen in the server
 // recorder; these personal fields are still present in the received captures.
 const sensitiveKeys = new Set([
@@ -64,16 +65,22 @@ export function createDisplayRedactor() {
     // Mask their contents, not the entry itself because its name resembles PII.
     const question = (value) => fields(value, { criteria: contents });
     const answer = (value) => fields(value, { probabilities: contents, legend: contents });
+    const request = (value) => fields(value, {
+        questions: (items) => mapValues(items, question),
+        assets: contents,
+    });
+    const result = (value) => fields(value, { answers: (items) => mapValues(items, answer) });
     const trace = memoize((value) => {
-        const request = fields(value.request, {
-            questions: (items) => mapValues(items, question),
-            assets: contents,
-        }), result = fields(value.result, {
-            answers: (items) => mapValues(items, answer),
-        });
-        return request === value.request && result === value.result
+        value = traceCaptureView(value);
+        // Fallback JSON keeps the same SDK map roles as structured views, even
+        // when a sibling field has been replaced. Personal content still masks.
+        const capture = value.capture && fields(value.capture, { request, result });
+        const maskedRequest = request(value.request), maskedResult = result(value.result);
+        return maskedRequest === value.request &&
+            maskedResult === value.result &&
+            capture === value.capture
             ? value
-            : { ...value, request, result };
+            : { ...value, request: maskedRequest, result: maskedResult, capture };
     });
     const run = memoize((value) => {
         let changed = false;

package/lib/src/flow-condition.js

@@ -30,7 +30,8 @@ export function formatFlowCondition(value, depth = 0) {
                 : "FALSE (no conditions)";
         return `(${args.map(format).join(value.op === "all" ? " AND " : " OR ")})`;
     }
-    if (!["eq", "lt", "gt", "gte"].includes(String(value.op)) ||
+    if (typeof value.op !== "string" ||
+        !["eq", "lt", "gt", "gte"].includes(value.op) ||
         args.length !== 2)
         return "[rule unavailable]";
     const probability = args.some((arg) => arg &&

package/lib/src/flow-fixture.js

@@ -1,3 +1,4 @@
+import { projectTraceCapture } from "./capture-view.js";
 /** Builds a replay fixture from the captured answers of a run's completed jev steps, including map and loop items. */
 export function flowFixture(definition, run, traces) {
     const steps = {}, missing = [], warnings = new Set();
@@ -11,14 +12,15 @@ export function flowFixture(definition, run, traces) {
                         collect(node.itemDefinition, item.run, `${prefix}${node.id}/${item.index}/`);
             if (node.kind !== "jev" || step?.status !== "completed")
                 continue;
-            const trace = step.traceId ? traces.get(step.traceId) : undefined;
-            if (!trace?.result) {
+            const captured = step.traceId ? traces.get(step.traceId) : undefined;
+            const trace = captured && projectTraceCapture(captured);
+            for (const warning of trace?.captureWarnings ?? [])
+                warnings.add(warning);
+            if (!trace?.result || trace.capture?.result !== undefined) {
                 missing.push(prefix + node.id);
                 continue;
             }
             steps[prefix + node.id] = structuredClone(trace.result);
-            for (const warning of trace.captureWarnings)
-                warnings.add(warning);
         }
     };
     collect(definition, run, "");

package/lib/src/flow-model.js

@@ -21,10 +21,10 @@ export function flowAnswer(answer) {
             active: label === answer.choice,
             eyebrow: label === answer.choice ? "RETURNED CHOICE" : "ALTERNATIVE",
         }));
-    if (answer.type === "score")
+    if (answer.type === "score" && answer.score !== undefined)
         return [
             {
-                label: `Score ${answer.score ?? "unavailable"}`,
+                label: `Score ${answer.score}`,
                 detail: "Returned by Jev",
                 active: true,
                 eyebrow: "RETURNED SCORE",
@@ -47,7 +47,7 @@ export function flowAnswer(answer) {
                 probability: 1 - answer.noul,
             },
         ];
-    if (answer.type === "box")
+    if (answer.type === "box" && answer.box)
         return [
             {
                 label: "Region coordinates",

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

@@ -0,0 +1,6 @@
+import type { FlowDefinition, FlowRun } from "./flow-protocol.js";
+/** Validate an entire event in staging maps before publishing either cache. */
+export declare function parseFlowUpdate(input: unknown, currentRuns: ReadonlyMap<string, FlowRun>, currentDefinitions: ReadonlyMap<string, FlowDefinition>): {
+    runs: Map<string, FlowRun>;
+    definitions: Map<string, FlowDefinition>;
+};