jev-devtools 0.2.0 → 0.4.0

package/lib/src/DiagramContent.js

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

package/lib/src/FlowDetailsPanel.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+/** Keep metadata out of the canvas until requested; size it within the flow workspace. */
+export declare function FlowDetailsPanel({ children, selection, onLayoutChange, inline, }: {
+    children: ReactNode;
+    selection?: string;
+    onLayoutChange: () => void;
+    inline?: boolean;
+}): import("react").JSX.Element;

package/lib/src/FlowDetailsPanel.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+/** Keep metadata out of the canvas until requested; size it within the flow workspace. */
+export function FlowDetailsPanel({ children, selection, onLayoutChange, inline = false, }) {
+    const id = useId();
+    const panel = useRef(null);
+    const drag = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [height, setHeight] = useState(240);
+    const [max, setMax] = useState(0);
+    const min = Math.min(96, max);
+    const visibleHeight = Math.max(min, Math.min(max, height));
+    useEffect(() => {
+        const workspace = panel.current?.parentElement;
+        if (!workspace)
+            return;
+        const measure = () => {
+            // Inline panels grow the canvas instead of taking space from a fixed viewport.
+            // Exclude the panel itself so resizing cannot grow its own upper bound.
+            const available = workspace.clientHeight -
+                (inline ? panel.current?.offsetHeight ?? 0 : 0);
+            // Leave room for the bar/divider and a usable canvas, including short drawers.
+            setMax(Math.max(0, available - Math.min(140, available * 0.45) - 44));
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(workspace);
+        return () => observer.disconnect();
+    }, [inline]);
+    const resize = (next) => {
+        onLayoutChange();
+        setHeight(Math.max(min, Math.min(max, next)));
+    };
+    return (_jsxs("div", { className: "flow-details-panel", ref: panel, "data-diagram-scroll": true, children: [open && (_jsx("div", { className: "flow-details-resize", role: "separator", tabIndex: 0, "aria-label": "Resize flow details", "aria-orientation": "horizontal", "aria-controls": id, "aria-valuemin": Math.round(min), "aria-valuemax": Math.round(max), "aria-valuenow": Math.round(visibleHeight), "aria-valuetext": `${Math.round(visibleHeight)} pixels high`, onPointerDown: (event) => {
+                    if (event.button !== 0)
+                        return;
+                    event.preventDefault();
+                    event.currentTarget.focus({ preventScroll: true });
+                    event.currentTarget.setPointerCapture(event.pointerId);
+                    drag.current = {
+                        y: event.clientY,
+                        height: visibleHeight,
+                        // Inline item details share the outer canvas zoom.
+                        scale: event.currentTarget.getBoundingClientRect().height /
+                            event.currentTarget.offsetHeight || 1,
+                    };
+                }, onPointerMove: (event) => {
+                    if (drag.current)
+                        resize(drag.current.height +
+                            (drag.current.y - event.clientY) / drag.current.scale);
+                }, onPointerUp: (event) => {
+                    drag.current = null;
+                    if (event.currentTarget.hasPointerCapture(event.pointerId))
+                        event.currentTarget.releasePointerCapture(event.pointerId);
+                }, onPointerCancel: () => {
+                    drag.current = null;
+                }, onLostPointerCapture: () => {
+                    drag.current = null;
+                }, onKeyDown: (event) => {
+                    const increment = event.shiftKey ? 80 : 20;
+                    const next = event.key === "ArrowUp"
+                        ? visibleHeight + increment
+                        : event.key === "ArrowDown"
+                            ? visibleHeight - increment
+                            : event.key === "Home"
+                                ? min
+                                : event.key === "End"
+                                    ? max
+                                    : undefined;
+                    if (next !== undefined) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        resize(next);
+                    }
+                }, children: _jsx("span", {}) })), _jsxs("div", { className: "flow-details-bar", children: [_jsx("button", { "aria-expanded": open, "aria-controls": id, onClick: () => {
+                            onLayoutChange();
+                            setOpen(!open);
+                        }, children: open ? "Hide details" : "Show details" }), selection && _jsx("span", { title: selection, children: selection })] }), _jsx("div", { id: id, hidden: !open, className: "flow-details-body", role: "region", "aria-label": "Flow details", tabIndex: 0, style: { height: visibleHeight }, children: open && children })] }));
+}

package/lib/src/FlowOverview.d.ts

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

package/lib/src/FlowOverview.js

@@ -0,0 +1,440 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useDiagramViewport } from "./useDiagramViewport.js";
+import { RequestDetail } from "./JevDevtools.js";
+import { JsonBlock } from "./TraceContent.js";
+import { conditionInputs, conditionRequirement, } from "./condition-inputs.js";
+import { formatFlowCondition } from "./flow-condition.js";
+import { TraceDiagram } from "./TraceDiagram.js";
+import { FlowDetailsPanel } from "./FlowDetailsPanel.js";
+import { DiagramContent } from "./DiagramContent.js";
+// Measure in canvas coordinates: screen rectangles also include the camera zoom.
+function useNodeHeight(id, onResize) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        let previous = 0;
+        const measure = () => {
+            const height = element.offsetHeight;
+            // A closed drawer can hide the flow without unmounting it.
+            if (height > 0 && height !== previous) {
+                previous = height;
+                onResize(id, height);
+            }
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [id, onResize]);
+    return ref;
+}
+const RequestNode = memo(function RequestNode({ node, trace, status, selected, x, y, onSelect, onResize, }) {
+    const ref = useNodeHeight(node.id, onResize);
+    return (_jsxs("article", { ref: ref, className: `flow-step flow-request ${selected ? "selected" : ""}`, "data-status": status, "aria-label": `Request ${node.id}`, style: { left: x, top: y, width: 1120 }, children: [_jsxs("button", { className: "flow-request-heading", "aria-label": `Step ${node.id}, jev, ${status}`, "aria-pressed": selected, onClick: () => onSelect(node.id), children: [_jsxs("span", { children: [_jsx("span", { className: "eyebrow", children: "Jev request" }), _jsx("strong", { children: node.title ?? node.id }), node.description && (_jsx("span", { className: "flow-request-description", children: node.description }))] }), _jsxs("span", { children: [status, trace.durationMs !== undefined
+                                ? ` · ${Math.round(trace.durationMs)} ms`
+                                : ""] })] }), _jsx(TraceDiagram, { trace: trace, embedded: true })] }));
+});
+function joinTitle(count) {
+    return count === 2 ? "Wait for both checks" : `Wait for all ${count} paths`;
+}
+const Card = memo(function Card({ node, status, decision, selected, bounds, onResize, onSelect, lanes, inputs, data, durationMs, collection, loop, collectionView, onCollectionChange, expansionId, }) {
+    const ref = useNodeHeight(node.id, onResize);
+    const join = node.kind === "parallel";
+    const repeated = node.kind === "map" || node.kind === "loop";
+    const unit = node.kind === "loop" ? "Iteration" : "Item";
+    const completedItems = collection?.items.filter((item) => item.status === "completed").length ?? 0;
+    const finished = lanes.filter((lane) => lane.status === "completed").length;
+    const route = [...node.path]
+        .reverse()
+        .find((part) => part.endsWith(":then") || part.endsWith(":else"));
+    const stateLabel = status === "untaken"
+        ? "Not taken"
+        : node.kind === "output" && status === "completed"
+            ? "Returned outcome"
+            : status;
+    const itemIndex = Math.min(collectionView?.index ?? 0, Math.max(0, (collection?.total ?? 0) - 1));
+    const expanded = collectionView?.open ?? false;
+    const valueCard = node.kind === "task" || node.kind === "merge";
+    const hasOutput = data !== null &&
+        typeof data === "object" &&
+        !Array.isArray(data) &&
+        Object.hasOwn(data, "output");
+    const footer = (_jsxs("span", { className: "flow-card-footer", children: [_jsx("code", { children: node.id }), _jsx("small", { children: join
+                    ? status === "completed"
+                        ? "All finished · continue"
+                        : stateLabel
+                    : node.kind === "output"
+                        ? route?.endsWith(":then")
+                            ? "Then route"
+                            : route?.endsWith(":else")
+                                ? "Else route"
+                                : "Final outcome"
+                        : node.kind === "merge" && decision !== undefined
+                            ? `Selected ${decision ? "then" : "else"} value · continue`
+                            : node.kind === "loop"
+                                ? stateLabel
+                                : decision !== undefined
+                                    ? decision
+                                        ? "Condition met · then"
+                                        : "Condition not met · else"
+                                    : stateLabel })] }));
+    return (_jsxs("article", { ref: ref, className: `flow-step ${node.kind === "task" ? "flow-task" : ""} ${selected ? "selected" : ""}`, "data-status": status, style: {
+            left: bounds.x,
+            top: bounds.y,
+            width: bounds.width,
+        }, "aria-label": `${node.kind === "map" ? "Collection" : "Step"} ${node.title ?? node.id}`, children: [_jsxs("button", { className: "flow-card-body", "aria-label": `Step ${node.id}, ${node.kind}, ${status}`, "aria-pressed": selected, onClick: () => onSelect(node.id), children: [_jsxs("span", { className: "flow-card-heading", children: [_jsx("span", { className: "flow-kind-icon", "aria-hidden": "true", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: join || node.kind === "merge" ? (_jsx("path", { d: "M4 5h4l5 7h7M4 19h4l5-7m4-3 3 3-3 3" })) : node.kind === "loop" ? (_jsx("path", { d: "M20 7a8 8 0 1 0 0 10M20 3v5h-5" })) : node.kind === "map" ? (_jsxs(_Fragment, { children: [_jsx("rect", { x: "8", y: "3", width: "12", height: "5", rx: "1" }), _jsx("rect", { x: "8", y: "10", width: "12", height: "5", rx: "1" }), _jsx("rect", { x: "8", y: "17", width: "12", height: "5", rx: "1" }), _jsx("path", { d: "M2 5.5h3m-3 7h3m-3 7h3" })] })) : node.kind === "task" ? (_jsx("path", { d: "m8 6-6 6 6 6m8-12 6 6-6 6m-3-15-2 18" })) : node.kind === "output" ? (_jsxs(_Fragment, { children: [_jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "4" }), _jsx("path", { d: "m8 12 3 3 5-6" })] })) : (_jsx("path", { d: "m12 3 9 9-9 9-9-9zM8 12h8" })) }) }), _jsx("span", { className: "eyebrow", children: join
+                                    ? "Parallel checks"
+                                    : node.kind === "branch" || node.kind === "if"
+                                        ? "Condition"
+                                        : node.kind === "task"
+                                            ? "Function"
+                                            : node.kind === "map"
+                                                ? "Collection"
+                                                : node.kind }), node.kind === "output" && (_jsx("span", { className: "flow-status", children: stateLabel }))] }), _jsx("strong", { children: node.title ?? (join ? joinTitle(lanes.length) : node.id) }), node.description && (_jsx("span", { className: "flow-step-description", children: node.description })), repeated && (_jsxs("span", { className: "flow-map-progress", children: [_jsx("strong", { children: node.kind === "loop"
+                                    ? `${completedItems} iteration${completedItems === 1 ? "" : "s"} completed`
+                                    : collection
+                                        ? `${completedItems} of ${collection.total} complete`
+                                        : "Waiting for collection" }), loop ? (_jsx("span", { children: loop.stopReason === "limit"
+                                    ? "Iteration limit reached · incomplete"
+                                    : loop.stopReason === "condition"
+                                        ? "Condition is false · finished"
+                                        : `Up to ${loop.maxIterations} iteration${loop.maxIterations === 1 ? "" : "s"}` })) : (collection && (_jsxs("span", { children: [collection.items.filter((item) => item.status === "running")
+                                        .length, " ", "running \u00B7", " ", collection.items.filter((item) => item.status === "waiting")
+                                        .length, " ", "queued \u00B7 up to ", collection.concurrency, " concurrent"] }))), node.kind === "loop" && node.conditionRule && (_jsxs("code", { children: ["Continue while ", formatFlowCondition(node.conditionRule)] })), _jsxs("small", { children: ["Explore ", node.kind === "loop" ? "an iteration's" : "an item's", " ", "connected flow below"] })] })), (node.kind === "branch" || node.kind === "if") &&
+                        (node.conditionRule !== undefined || node.condition) && (_jsxs("span", { className: "flow-condition-rule", children: [inputs && inputs.length > 0 && (_jsxs("span", { className: "flow-condition-incoming", children: [_jsx("span", { className: "flow-condition-label", children: inputs.length === 1 ? "Incoming value" : "Incoming values" }), inputs.slice(0, 3).map((input) => (_jsxs("span", { className: "flow-condition-input", children: [_jsx("span", { children: input.name }), _jsx("b", { children: input.value })] }, input.reference))), inputs.length > 3 && (_jsxs("small", { children: [inputs.length - 3, " more inputs \u00B7 select to inspect"] }))] })), _jsx("span", { className: "flow-condition-label", children: "Requirement" }), _jsx("code", { children: node.conditionRule !== undefined
+                                    ? conditionRequirement(node.conditionRule, inputs ?? [])
+                                    : node.condition })] })), join && (_jsxs(_Fragment, { children: [_jsxs("span", { className: "flow-join-summary", children: [joinTitle(lanes.length), " ", _jsxs("span", { children: [finished, "/", lanes.length] })] }), _jsxs("span", { className: "flow-lanes", children: [lanes.slice(0, 4).map((lane) => (_jsxs("span", { className: "flow-lane", "data-status": lane.status, children: [_jsxs("span", { children: [_jsx("span", { "aria-hidden": "true", children: lane.status === "completed"
+                                                            ? "✓"
+                                                            : lane.status === "error"
+                                                                ? "!"
+                                                                : "○" }), " ", lane.name] }), _jsx("small", { children: lane.status })] }, lane.name))), lanes.length > 4 && (_jsxs("small", { children: [lanes.length - 4, " more \u00B7 select to see all checks"] }))] })] })), !valueCard && footer, node.kind === "jev" && (_jsx("small", { children: status === "untaken"
+                            ? "This request was not run."
+                            : "Request details are not captured yet or no longer retained." }))] }), valueCard && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flow-task-preview", children: [_jsx("span", { className: "flow-condition-label", children: "Returned value" }), hasOutput ? (_jsx(DiagramContent, { value: data.output, label: `Returned value for ${node.title ?? node.id}` })) : (_jsx("span", { className: "diagram-value-empty", children: status === "running"
+                                    ? "Running application code…"
+                                    : "No output captured" })), _jsx("small", { children: durationMs === undefined
+                                    ? "Select the heading to inspect inputs and output"
+                                    : `${Math.round(durationMs)} ms · select heading to inspect` })] }), footer] })), repeated && (_jsxs("div", { className: "flow-collection-controls", "data-diagram-scroll": true, children: [_jsxs("label", { children: [node.kind === "loop" ? "Iteration" : "Collection item", _jsxs("select", { "aria-label": `${node.kind === "loop" ? "Iteration" : "Collection item"} for ${node.title ?? node.id}`, value: itemIndex, disabled: !collection?.total, onChange: (event) => onCollectionChange(node.id, {
+                                    index: Number(event.target.value),
+                                    open: expanded,
+                                }), children: [!collection?.total && (_jsx("option", { value: 0, children: node.kind === "loop" ? "No iterations" : "No items" })), collection?.items.map((item) => (_jsxs("option", { value: item.index, children: [unit, " ", item.index + 1, " \u00B7 ", item.status] }, item.index)))] })] }), _jsx("button", { disabled: !collection?.total || !node.itemDefinition, "aria-expanded": expanded, "aria-controls": expanded ? expansionId : undefined, onClick: () => onCollectionChange(node.id, { index: itemIndex, open: !expanded }), children: expanded ? "Hide Flow" : "View Flow" })] }))] }));
+});
+export const FlowOverview = memo(function FlowOverview({ definition, run, traces, inline = false, }) {
+    const [selected, setSelected] = useState(() => definition.nodes.find((n) => n.kind === "jev")?.id ?? "");
+    const [details, setDetails] = useState(false);
+    const [collectionViews, setCollectionViews] = useState({});
+    const [itemSizes, setItemSizes] = useState({});
+    const [heights, setHeights] = useState({});
+    const tracesById = useMemo(() => new Map(traces.map((trace) => [trace.id, trace])), [traces]);
+    const inputsByStep = useMemo(() => new Map(definition.nodes
+        .filter((node) => node.conditionRule !== undefined)
+        .map((node) => [
+        node.id,
+        conditionInputs(node.conditionRule, run, tracesById, new Map(definition.nodes.map((n) => [n.id, n.title ?? n.id]))),
+    ])), [definition, run, tracesById]);
+    // Omit redundant transitive edges so a reference does not draw through an
+    // intervening condition. Execution ordering still includes every dependency.
+    const links = useMemo(() => {
+        const byId = new Map(definition.nodes.map((node) => [node.id, node]));
+        const ancestors = (id) => {
+            const seen = new Set(), pending = [...(byId.get(id)?.dependencies ?? [])];
+            while (pending.length) {
+                const next = pending.pop();
+                if (seen.has(next))
+                    continue;
+                seen.add(next);
+                pending.push(...(byId.get(next)?.dependencies ?? []));
+            }
+            return seen;
+        };
+        const parents = new Map(definition.nodes.map((node) => [node.id, ancestors(node.id)]));
+        return new Map(definition.nodes.map((node) => [
+            node.id,
+            node.dependencies.filter((id) => node.kind === "merge" ||
+                !node.dependencies.some((other) => other !== id && parents.get(other)?.has(id))),
+        ]));
+    }, [definition]);
+    const parallelLanes = useMemo(() => new Map(definition.nodes
+        .filter((n) => n.kind === "parallel")
+        .map((node) => [
+        node.id,
+        (node.lanes ?? node.dependencies).map((name) => {
+            const children = node.lanes
+                ? definition.nodes.filter((child) => child.path.includes(`${node.id}:${name}`))
+                : definition.nodes.filter((child) => child.id === name);
+            const states = children.map((child) => run.steps[child.id]?.status ?? "waiting");
+            const status = run.steps[node.id]?.status === "untaken"
+                ? "untaken"
+                : states.includes("error")
+                    ? "error"
+                    : states.includes("cancelled")
+                        ? "cancelled"
+                        : states.includes("blocked")
+                            ? "blocked"
+                            : run.steps[node.id]?.status === "completed" ||
+                                (states.length > 0 &&
+                                    states.every((state) => state === "completed" || state === "untaken"))
+                                ? "completed"
+                                : states.some((state) => state === "running" || state === "completed")
+                                    ? "running"
+                                    : "waiting";
+            return { name, status };
+        }),
+    ])), [definition, run.steps]);
+    const layout = useMemo(() => {
+        const columns = new Map();
+        let remaining = [...definition.nodes];
+        while (remaining.length) {
+            const ready = remaining.filter((node) => node.dependencies.every((id) => columns.has(id)));
+            if (!ready.length)
+                break;
+            for (const node of ready)
+                columns.set(node.id, node.dependencies.length
+                    ? Math.max(...node.dependencies.map((id) => columns.get(id))) + 1
+                    : 0);
+            const ids = new Set(ready.map((node) => node.id));
+            remaining = remaining.filter((node) => !ids.has(node.id));
+        }
+        const points = new Map();
+        const expansions = new Map();
+        let x = 40;
+        for (let column = 0; column <= Math.max(0, ...columns.values()); column++) {
+            const nodes = definition.nodes.filter((node) => columns.get(node.id) === column);
+            let bottom = 40, width = 280;
+            for (const node of nodes) {
+                const captured = node.kind === "jev" &&
+                    tracesById.has(run.steps[node.id]?.traceId ?? "");
+                const w = captured ? 1120 : 360, h = heights[node.id] ??
+                    (captured
+                        ? 640
+                        : node.kind === "parallel"
+                            ? 190 +
+                                (node.description ? 64 : 0) +
+                                Math.min(4, (node.lanes ?? node.dependencies).length) * 32
+                            : (node.description ? 244 : 172) +
+                                (node.kind === "branch" || node.kind === "if"
+                                    ? 110 +
+                                        Math.min(3, inputsByStep.get(node.id)?.length ?? 0) * 24
+                                    : node.kind === "task" || node.kind === "merge"
+                                        ? 130
+                                        : 0));
+                const parents = (links.get(node.id) ?? [])
+                    .map((id) => points.get(id))
+                    .filter(Boolean);
+                const center = parents.length
+                    ? parents.reduce((sum, p) => sum + p.y + p.height / 2, 0) /
+                        parents.length
+                    : h / 2 + 40;
+                const y = Math.max(bottom, center - h / 2);
+                points.set(node.id, { x, y, width: w, height: h });
+                bottom = y + h + 100;
+                width = Math.max(width, w);
+            }
+            x += width + 160;
+        }
+        // Collection previews occupy a separate row below the original graph.
+        // Their dimensions must never participate in its column or lane spacing.
+        const expansionY = Math.max(...[...points.values()].map((p) => p.y + p.height), 40) + 96;
+        for (const node of definition.nodes) {
+            if (!collectionViews[node.id]?.open ||
+                !node.itemDefinition ||
+                !run.steps[node.id]?.collection?.total)
+                continue;
+            const card = points.get(node.id);
+            if (!card)
+                continue;
+            const size = itemSizes[node.id] ?? { width: 2400, height: 800 };
+            const left = card.x + card.width / 2 - size.width / 2;
+            let top = expansionY;
+            // Center each preview on its collection. Stack overlapping previews
+            // vertically, leaving the original graph and all its coordinates alone.
+            for (const area of expansions.values()) {
+                if (left - 80 < area.x + area.width + 80 &&
+                    left + size.width + 80 > area.x - 80)
+                    top = Math.max(top, area.y + area.height + 96);
+            }
+            expansions.set(node.id, { x: left, y: top, ...size });
+        }
+        // External arrows and centered previews can extend left of canvas zero.
+        const left = Math.min(0, ...[...expansions.values()].map((p) => p.x - 80));
+        const right = Math.max(700, x - 120, ...[...expansions.values()].map((p) => p.x + p.width + 80));
+        return {
+            points,
+            expansions,
+            left,
+            width: right - left,
+            height: Math.max(400, ...[...points.values(), ...expansions.values()].map((p) => p.y + p.height + 40)),
+        };
+    }, [
+        definition,
+        run.steps,
+        tracesById,
+        heights,
+        links,
+        inputsByStep,
+        collectionViews,
+        itemSizes,
+    ]);
+    const { viewport, canvas, zoom, zoomBy, fit, preserveCamera, focusArea } = useDiagramViewport(layout.width, layout.height, run.id, {
+        x: layout.left,
+        y: 0,
+    });
+    const onResize = useCallback((id, height) => {
+        preserveCamera();
+        setHeights((previous) => previous[id] === height ? previous : { ...previous, [id]: height });
+    }, [preserveCamera]);
+    const started = useRef(false);
+    const changeCollection = useCallback((id, view) => {
+        preserveCamera();
+        setSelected(id);
+        started.current = true;
+        setCollectionViews((previous) => ({ ...previous, [id]: view }));
+    }, [preserveCamera]);
+    const resizeItem = useCallback((id, size) => {
+        preserveCamera();
+        setItemSizes((previous) => previous[id]?.width === size.width &&
+            previous[id]?.height === size.height
+            ? previous
+            : { ...previous, [id]: size });
+    }, [preserveCamera]);
+    useEffect(() => {
+        if (inline || started.current)
+            return;
+        const first = layout.points.get(selected);
+        if (first) {
+            started.current = true;
+            focusArea(first);
+        }
+    }, [layout, selected, focusArea, inline]);
+    const selectStep = (id) => {
+        setSelected(id);
+        const bounds = layout.points.get(id);
+        if (bounds && !inline)
+            focusArea(bounds);
+    };
+    const node = definition.nodes.find((n) => n.id === selected);
+    const step = node ? run.steps[node.id] : undefined;
+    const trace = step?.traceId
+        ? traces.find((t) => t.id === step.traceId)
+        : undefined;
+    return (_jsx("div", { className: `flow-overview-stack ${inline ? "flow-inline-overview" : ""}`, style: inline ? { width: layout.width } : undefined, children: _jsxs("section", { className: "request-detail whole-flow", "aria-label": inline ? "Collection item flow" : "Whole flow", children: [!inline && (_jsxs("header", { className: "detail-header", children: [_jsxs("div", { children: [_jsxs("span", { className: "eyebrow", children: ["Flow run \u00B7 ", run.status] }), _jsx("h2", { children: run.name })] }), _jsxs("div", { children: [run.outcome ? (_jsxs("strong", { children: ["Outcome: ", run.outcome] })) : (run.error ?? "Execution paths"), _jsx("small", { className: "muted", children: run.durationMs !== undefined
+                                        ? ` · ${Math.round(run.durationMs)} ms`
+                                        : "" })] })] })), _jsxs("div", { className: "lab-flow-toolbar", children: [!inline && (_jsxs("div", { children: [_jsx("button", { "aria-label": "Zoom flow out", onClick: () => zoomBy(1 / 1.2), children: "\u2212" }), _jsxs("output", { "aria-label": "Flow zoom", children: [zoom, "%"] }), _jsx("button", { "aria-label": "Zoom flow in", onClick: () => zoomBy(1.2), children: "+" }), _jsx("button", { onClick: fit, children: "Fit flow" }), _jsx("button", { disabled: !selected, onClick: () => selectStep(selected), children: "Focus step" })] })), _jsxs("label", { children: ["Step", _jsxs("select", { "aria-label": "Flow step", value: selected, onChange: (e) => selectStep(e.target.value), children: [_jsx("option", { value: "", children: "Select a step" }), definition.nodes.map((n) => (_jsxs("option", { value: n.id, children: [n.title ? `${n.title} (${n.id})` : n.id, " \u00B7", " ", run.steps[n.id]?.status ?? "waiting"] }, n.id)))] })] })] }), _jsxs("div", { className: "flow-workspace", children: [_jsx("div", { className: inline
+                                ? "flow-inline-surface"
+                                : "flow-overview-viewport diagram-viewport", ref: inline ? undefined : viewport, style: inline ? { height: layout.height } : undefined, tabIndex: inline ? undefined : 0, "aria-label": inline ? "Item flow canvas" : "Flow canvas", role: "region", children: _jsxs("div", { ref: inline ? undefined : canvas, className: "flow-overview-canvas", style: {
+                                    width: layout.width,
+                                    height: layout.height,
+                                    // Inline views have no camera to account for negative bounds.
+                                    // Keep nested previews and their external arrows in the frame.
+                                    transform: inline ? `translateX(${-layout.left}px)` : undefined,
+                                }, children: [_jsxs("svg", { width: layout.width, height: layout.height, "aria-hidden": "true", className: "flow-connections", children: [_jsx("defs", { children: _jsx("marker", { id: `arrow-${run.id}`, viewBox: "0 0 10 10", refX: "8", refY: "5", markerWidth: "5", markerHeight: "5", orient: "auto", children: _jsx("path", { d: "M0 0L10 5L0 10z", fill: "currentColor" }) }) }), definition.nodes.flatMap((n) => (links.get(n.id) ?? []).map((id) => {
+                                                const a = layout.points.get(id), b = layout.points.get(n.id);
+                                                if (!a || !b)
+                                                    return null;
+                                                const decision = n.merge
+                                                    ? run.steps[n.merge.condition]?.decision
+                                                    : undefined;
+                                                const active = ["running", "completed"].includes(run.steps[n.id]?.status) &&
+                                                    ["running", "completed"].includes(run.steps[id]?.status) &&
+                                                    (!n.merge ||
+                                                        (decision !== undefined &&
+                                                            id === n.merge[decision ? "then" : "else"]));
+                                                return (_jsx("path", { d: `M${a.x + a.width},${a.y + a.height / 2} C${a.x + a.width + 80},${a.y + a.height / 2} ${b.x - 80},${b.y + b.height / 2} ${b.x},${b.y + b.height / 2}`, stroke: active ? "#E551BA" : "currentColor", opacity: active ? 1 : 0.35, fill: "none", strokeWidth: "2", markerEnd: `url(#arrow-${run.id})` }, `${id}-${n.id}`));
+                                            })), [...layout.expansions].map(([id, area]) => {
+                                                const card = layout.points.get(id);
+                                                const x = card.x + card.width / 2;
+                                                const endX = area.x + area.width / 2;
+                                                const startY = card.y + card.height;
+                                                const bendY = startY + (area.y - startY) / 2;
+                                                return (_jsxs("g", { className: "flow-collection-link", children: [_jsx("path", { d: `M${x},${startY} C${x},${bendY} ${endX},${bendY} ${endX},${area.y}`, fill: "none", stroke: "#E551BA", strokeWidth: "2", strokeDasharray: "6 5", markerEnd: `url(#arrow-${run.id})` }), _jsxs("text", { x: endX + 14, y: area.y - 20, children: [definition.nodes.find((n) => n.id === id)?.kind ===
+                                                                    "loop"
+                                                                    ? "Selected iteration"
+                                                                    : "Selected item", " ", (collectionViews[id]?.index ?? 0) + 1] })] }, id));
+                                            })] }), definition.nodes.map((n) => {
+                                        const p = layout.points.get(n.id);
+                                        if (!p)
+                                            return null;
+                                        const captured = tracesById.get(run.steps[n.id]?.traceId ?? "");
+                                        return n.kind === "jev" && captured ? (_jsx(RequestNode, { node: n, trace: captured, status: run.steps[n.id]?.status ?? "waiting", selected: selected === n.id, x: p.x, y: p.y, onSelect: setSelected, onResize: onResize }, n.id)) : (_jsx(Card, { node: n, status: run.steps[n.id]?.status ?? "waiting", decision: run.steps[n.id]?.decision, selected: selected === n.id, bounds: p, onResize: onResize, onSelect: setSelected, inputs: inputsByStep.get(n.id), data: run.steps[n.id]?.data, durationMs: run.steps[n.id]?.durationMs, lanes: parallelLanes.get(n.id) ?? [], collection: run.steps[n.id]?.collection, loop: run.steps[n.id]?.loop, collectionView: collectionViews[n.id], onCollectionChange: changeCollection, expansionId: `collection-${run.id}-${n.id}` }, n.id));
+                                    }), [...layout.expansions].map(([id, bounds]) => {
+                                        const collectionNode = definition.nodes.find((n) => n.id === id);
+                                        const collection = run.steps[id].collection;
+                                        const index = Math.min(collectionViews[id].index, collection.total - 1);
+                                        return (_jsx(InlineItemFlow, { id: `collection-${run.id}-${id}`, node: collectionNode, collection: collection, index: index, bounds: bounds, traces: traces, onResize: resizeItem, onCollectionChange: changeCollection }, id));
+                                    })] }) }), _jsxs(FlowDetailsPanel, { inline: inline, selection: node?.title ?? node?.id, onLayoutChange: preserveCamera, children: [_jsxs("div", { className: "flow-selection", children: [node && step ? (_jsxs(_Fragment, { children: [_jsxs("strong", { children: [node.title ?? node.id, " \u00B7 ", step.status] }), _jsx("span", { className: "muted", children: step.durationMs !== undefined
+                                                        ? ` · ${Math.round(step.durationMs)} ms`
+                                                        : "" }), node.description && _jsx("p", { children: node.description }), node.kind === "loop" && (_jsxs("div", { className: "flow-task-details", children: [_jsx("p", { children: step.loop?.stopReason === "limit"
+                                                                ? "Iteration limit reached. The final state is incomplete and downstream steps did not run."
+                                                                : step.loop?.stopReason === "condition"
+                                                                    ? "The continuation condition became false. The loop returned its final state."
+                                                                    : "Iterations execute sequentially, carrying state forward." }), _jsx(DiagramContent, { value: step.data ?? null, label: "Loop initial and latest state" })] })), (node.kind === "task" || node.kind === "merge") && (_jsxs("div", { className: "flow-task-details", children: [_jsxs("p", { className: "muted", children: [node.kind === "merge"
+                                                                    ? "Value returned by the selected path. This merge does not make another request."
+                                                                    : "Application function · runs on your server.", " ", "Captured values may be redacted or truncated."] }), step.data &&
+                                                            typeof step.data === "object" &&
+                                                            !Array.isArray(step.data) ? (["input", "output"]
+                                                            .filter((key) => Object.hasOwn(step.data, key))
+                                                            .map((key) => (_jsxs("details", { open: true, children: [_jsx("summary", { children: key === "input"
+                                                                        ? "Function inputs"
+                                                                        : node.kind === "merge"
+                                                                            ? "Selected value"
+                                                                            : "Function output" }), _jsx(DiagramContent, { value: step.data[key], label: node.kind === "merge"
+                                                                        ? "Selected value"
+                                                                        : `Function ${key}` })] }, key)))) : (_jsx("p", { children: typeof step.data === "string"
+                                                                ? step.data
+                                                                : node.kind === "merge"
+                                                                    ? "No selected value captured yet."
+                                                                    : "No function data captured yet." })), step.captureWarnings?.map((warning) => (_jsx("p", { className: "muted", children: warning }, warning)))] })), node.kind === "parallel" && (_jsxs("p", { children: ["These paths run at the same time:", " ", (node.lanes ?? node.dependencies).join(", "), ". The next step starts only after all finish successfully. This marker waits for their results; it does not make another Jev request."] })), node.kind === "parallel" && (_jsx("ul", { className: "flow-lane-details", children: parallelLanes.get(node.id)?.map((lane) => (_jsxs("li", { children: [lane.name, " \u00B7 ", lane.status] }, lane.name))) })), (inputsByStep.get(node.id)?.length ?? 0) > 0 && (_jsx("dl", { className: "flow-input-details", children: inputsByStep.get(node.id)?.map((input) => (_jsxs("div", { children: [_jsxs("dt", { children: [input.name, " ", _jsx("code", { children: input.reference })] }), _jsx("dd", { children: input.value })] }, input.reference))) })), (node.conditionRule !== undefined || node.condition) && (_jsxs("p", { children: [_jsx("code", { children: node.conditionRule !== undefined
+                                                                ? formatFlowCondition(node.conditionRule)
+                                                                : node.condition }), " ", "\u00B7", " ", step.decision === undefined
+                                                            ? "Not evaluated"
+                                                            : step.decision
+                                                                ? node.kind === "loop"
+                                                                    ? "Continue"
+                                                                    : "Passed · then route"
+                                                                : node.kind === "loop"
+                                                                    ? "Stop"
+                                                                    : "Not met · else route"] })), _jsx("p", { className: "muted", children: node.path.length ? node.path.join(" / ") : "Main path" }), step.error && _jsx("p", { role: "alert", children: step.error }), node.kind === "jev" &&
+                                                    (trace ? (_jsx("button", { onClick: () => setDetails(!details), children: details ? "Hide request details" : "Inspect request" })) : (_jsx("p", { children: step.traceId
+                                                            ? "Request capture was cleared or evicted."
+                                                            : "No captured request linked yet. Use a client created by this inspector." })))] })) : (_jsx("p", { className: "muted", children: "Each request diagram shows its context, question and answer. Use its question picker for other answers. Lines between requests show execution dependencies." })), run.value !== undefined && (_jsxs("details", { children: [_jsx("summary", { children: "Captured outcome value" }), _jsx(JsonBlock, { value: run.value })] }))] }), details && trace && (_jsx("div", { className: "flow-request-detail", children: _jsx(RequestDetail, { trace: trace }) }))] })] })] }) }));
+});
+const InlineItemFlow = memo(function InlineItemFlow({ id, node, collection, index, bounds, traces, onResize, onCollectionChange, }) {
+    const ref = useRef(null);
+    const item = collection.items[index];
+    const unit = node.kind === "loop" ? "iteration" : "collection item";
+    const [direction, setDirection] = useState(1);
+    const cycleItem = (direction) => {
+        if (collection.total <= 1)
+            return;
+        setDirection(direction);
+        onCollectionChange(node.id, {
+            index: (index + direction + collection.total) % collection.total,
+            open: true,
+        });
+    };
+    useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        let width = 0, height = 0;
+        const measure = () => {
+            const nextWidth = element.offsetWidth, nextHeight = element.offsetHeight;
+            if (nextWidth > 0 &&
+                nextHeight > 0 &&
+                (width !== nextWidth || height !== nextHeight)) {
+                width = nextWidth;
+                height = nextHeight;
+                onResize(node.id, { width, height });
+            }
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [node.id, onResize]);
+    return (_jsxs("article", { ref: ref, id: id, className: "flow-collection-expansion", "aria-label": `Selected ${unit} flow for ${node.title ?? node.id}`, style: { left: bounds.x, top: bounds.y }, children: [_jsx("button", { className: "flow-item-arrow flow-item-previous", "aria-label": `Previous ${unit}`, "aria-controls": `${id}-item`, title: `Previous ${unit}`, disabled: collection.total <= 1, onClick: () => cycleItem(-1), children: _jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m14 6-6 6 6 6" }) }) }), _jsxs("div", { className: "flow-item-frame", children: [_jsxs("header", { className: "flow-collection-heading", children: [_jsxs("div", { children: [_jsxs("span", { className: "eyebrow", children: ["Selected ", unit] }), _jsxs("h3", { "aria-live": "polite", "aria-atomic": "true", children: [node.title ?? node.id, " \u00B7", " ", node.kind === "loop" ? "Iteration" : "Item", " ", index + 1, " of", " ", collection.total] }), _jsx("small", { children: item?.status ?? "waiting" })] }), _jsx("button", { onClick: () => onCollectionChange(node.id, { index, open: false }), children: "Hide Flow" })] }), _jsx("div", { id: `${id}-item`, className: `flow-item-content ${direction < 0 ? "flow-item-backward" : "flow-item-forward"}`, children: item?.run && node.itemDefinition ? (_jsx(FlowOverview, { definition: node.itemDefinition, run: item.run, traces: traces, inline: true }, item.run.id)) : (_jsx("p", { className: "flow-item-placeholder", children: item?.status === "waiting"
+                                ? "This item is queued. Its flow will appear here when it starts."
+                                : "This item has no captured execution. It may have been cancelled or blocked before starting." })) }, index)] }), _jsx("button", { className: "flow-item-arrow flow-item-next", "aria-label": `Next ${unit}`, "aria-controls": `${id}-item`, title: `Next ${unit}`, disabled: collection.total <= 1, onClick: () => cycleItem(1), children: _jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m10 6 6 6-6 6" }) }) })] }));
+});

package/lib/src/JevDevtools.d.ts

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