jev-devtools 0.3.0 → 0.4.1

package/lib/src/FlowOverview.js

@@ -6,18 +6,46 @@ 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 headingHeight = node.description ? 104 : 64;
-    const measure = useCallback((height) => onResize(node.id, height + headingHeight), [node.id, onResize, headingHeight]);
-    return (_jsxs("article", { className: `flow-step flow-request ${selected ? "selected" : ""}`, "data-status": status, "aria-label": `Request ${node.id}`, style: { left: x, top: y, width: 1120 }, children: [_jsxs("button", { className: "flow-request-heading", style: { height: headingHeight }, "aria-label": `Step ${node.id}, jev, ${status}`, "aria-pressed": selected, onClick: () => onSelect(node.id), children: [_jsxs("span", { children: [_jsx("span", { className: "eyebrow", children: "Jev request" }), _jsx("strong", { children: node.title ?? node.id }), node.description && (_jsx("span", { className: "flow-request-description", children: node.description }))] }), _jsxs("span", { children: [status, trace.durationMs !== undefined
+    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, onHeightChange: measure })] }));
+                                : ""] })] }), _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, onSelect, lanes, inputs, }) {
+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()
@@ -27,43 +55,77 @@ const Card = memo(function Card({ node, status, decision, selected, bounds, onSe
         : node.kind === "output" && status === "completed"
             ? "Returned outcome"
             : status;
-    return (_jsxs("button", { className: `flow-step ${selected ? "selected" : ""}`, "data-status": status, style: {
-            left: bounds.x,
-            top: bounds.y,
-            width: bounds.width,
-            height: bounds.height,
-        }, "aria-label": `Step ${node.id}, ${node.kind}, ${status}`, "aria-pressed": selected, onClick: () => onSelect(node.id), children: [_jsxs("span", { className: "flow-card-heading", children: [_jsx("span", { className: "flow-kind-icon", "aria-hidden": "true", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: join ? (_jsx("path", { d: "M4 5h4l5 7h7M4 19h4l5-7m4-3 3 3-3 3" })) : node.kind === "output" ? (_jsxs(_Fragment, { children: [_jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "4" }), _jsx("path", { d: "m8 12 3 3 5-6" })] })) : (_jsx("path", { d: "m12 3 9 9-9 9-9-9zM8 12h8" })) }) }), _jsx("span", { className: "eyebrow", children: join
-                            ? "Parallel checks"
-                            : node.kind === "branch"
-                                ? "Condition"
-                                : node.kind }), node.kind === "output" && (_jsx("span", { className: "flow-status", children: stateLabel }))] }), _jsx("strong", { children: node.title ?? (join ? joinTitle(lanes.length) : node.id) }), node.description && (_jsx("span", { className: "flow-step-description", children: node.description })), node.kind === "branch" &&
-                (node.conditionRule !== undefined || node.condition) && (_jsxs("span", { className: "flow-condition-rule", children: [inputs && inputs.length > 0 && (_jsxs("span", { className: "flow-condition-incoming", children: [_jsx("span", { className: "flow-condition-label", children: inputs.length === 1 ? "Incoming value" : "Incoming values" }), inputs.slice(0, 3).map((input) => (_jsxs("span", { className: "flow-condition-input", children: [_jsx("span", { children: input.name }), _jsx("b", { children: input.value })] }, input.reference))), inputs.length > 3 && (_jsxs("small", { children: [inputs.length - 3, " more inputs \u00B7 select to inspect"] }))] })), _jsx("span", { className: "flow-condition-label", children: "Requirement" }), _jsx("code", { children: node.conditionRule !== undefined
-                            ? conditionRequirement(node.conditionRule, inputs ?? [])
-                            : node.condition })] })), join && (_jsxs(_Fragment, { children: [_jsxs("span", { className: "flow-join-summary", children: [joinTitle(lanes.length), " ", _jsxs("span", { children: [finished, "/", lanes.length] })] }), _jsxs("span", { className: "flow-lanes", children: [lanes.slice(0, 4).map((lane) => (_jsxs("span", { className: "flow-lane", "data-status": lane.status, children: [_jsxs("span", { children: [_jsx("span", { "aria-hidden": "true", children: lane.status === "completed"
-                                                    ? "✓"
-                                                    : lane.status === "error"
-                                                        ? "!"
-                                                        : "○" }), " ", lane.name] }), _jsx("small", { children: lane.status })] }, lane.name))), lanes.length > 4 && (_jsxs("small", { children: [lanes.length - 4, " more \u00B7 select to see all checks"] }))] })] })), _jsxs("span", { className: "flow-card-footer", children: [_jsx("code", { children: node.id }), _jsx("small", { children: join
-                            ? status === "completed"
-                                ? "All finished · continue"
-                                : stateLabel
-                            : node.kind === "output"
-                                ? route?.endsWith(":then")
-                                    ? "Then route"
-                                    : route?.endsWith(":else")
-                                        ? "Else route"
-                                        : "Final outcome"
+    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 })] }), node.kind === "jev" && (_jsx("small", { children: status === "untaken"
-                    ? "This request was not run."
-                    : "Request details are not captured yet or no longer retained." }))] }));
+                                    : 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, }) {
+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
@@ -90,7 +152,8 @@ export const FlowOverview = memo(function FlowOverview({ definition, run, traces
         const parents = new Map(definition.nodes.map((node) => [node.id, ancestors(node.id)]));
         return new Map(definition.nodes.map((node) => [
             node.id,
-            node.dependencies.filter((id) => !node.dependencies.some((other) => other !== id && parents.get(other)?.has(id))),
+            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
@@ -135,6 +198,7 @@ export const FlowOverview = memo(function FlowOverview({ definition, run, traces
             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);
@@ -142,17 +206,20 @@ export const FlowOverview = memo(function FlowOverview({ definition, run, traces
             for (const node of nodes) {
                 const captured = node.kind === "jev" &&
                     tracesById.has(run.steps[node.id]?.traceId ?? "");
-                const w = captured ? 1120 : 360, h = captured
-                    ? (heights[node.id] ?? 640)
-                    : node.kind === "parallel"
-                        ? 190 +
-                            (node.description ? 64 : 0) +
-                            Math.min(4, (node.lanes ?? node.dependencies).length) * 32
-                        : (node.description ? 244 : 172) +
-                            (node.kind === "branch"
-                                ? 110 +
-                                    Math.min(3, inputsByStep.get(node.id)?.length ?? 0) * 24
-                                : 0);
+                const 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);
@@ -167,31 +234,84 @@ export const FlowOverview = memo(function FlowOverview({ definition, run, traces
             }
             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,
-            width: Math.max(700, x - 120),
-            height: Math.max(400, ...[...points.values()].map((p) => p.y + p.height + 40)),
+            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]);
-    const { viewport, canvas, zoom, zoomBy, fit, preserveCamera, focusArea } = useDiagramViewport(layout.width, layout.height, run.id);
+    }, [
+        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 (started.current)
+        if (inline || started.current)
             return;
         const first = layout.points.get(selected);
         if (first) {
             started.current = true;
             focusArea(first);
         }
-    }, [layout, selected, focusArea]);
+    }, [layout, selected, focusArea, inline]);
     const selectStep = (id) => {
         setSelected(id);
         const bounds = layout.points.get(id);
-        if (bounds)
+        if (bounds && !inline)
             focusArea(bounds);
     };
     const node = definition.nodes.find((n) => n.id === selected);
@@ -199,30 +319,122 @@ export const FlowOverview = memo(function FlowOverview({ definition, run, traces
     const trace = step?.traceId
         ? traces.find((t) => t.id === step.traceId)
         : undefined;
-    return (_jsxs("section", { className: "request-detail whole-flow", "aria-label": "Whole flow", children: [_jsxs("header", { className: "detail-header", children: [_jsxs("div", { children: [_jsxs("span", { className: "eyebrow", children: ["Flow run \u00B7 ", run.status] }), _jsx("h2", { children: run.name })] }), _jsxs("div", { children: [run.outcome ? (_jsxs("strong", { children: ["Outcome: ", run.outcome] })) : ((run.error ?? "Execution paths")), _jsx("small", { className: "muted", children: run.durationMs !== undefined
-                                    ? ` · ${Math.round(run.durationMs)} ms`
-                                    : "" })] })] }), _jsxs("div", { className: "lab-flow-toolbar", children: [_jsxs("div", { children: [_jsx("button", { "aria-label": "Zoom flow out", onClick: () => zoomBy(1 / 1.2), children: "\u2212" }), _jsxs("output", { "aria-label": "Flow zoom", children: [zoom, "%"] }), _jsx("button", { "aria-label": "Zoom flow in", onClick: () => zoomBy(1.2), children: "+" }), _jsx("button", { onClick: fit, children: "Fit flow" }), _jsx("button", { disabled: !selected, onClick: () => selectStep(selected), children: "Focus step" })] }), _jsxs("label", { children: ["Step", _jsxs("select", { "aria-label": "Flow step", value: selected, onChange: (e) => selectStep(e.target.value), children: [_jsx("option", { value: "", children: "Select a step" }), definition.nodes.map((n) => (_jsxs("option", { value: n.id, children: [n.title ? `${n.title} (${n.id})` : n.id, " \u00B7", " ", run.steps[n.id]?.status ?? "waiting"] }, n.id)))] })] })] }), _jsx("div", { className: "flow-overview-viewport diagram-viewport", ref: viewport, tabIndex: 0, "aria-label": "Flow canvas", role: "region", children: _jsxs("div", { ref: canvas, className: "flow-overview-canvas", style: { width: layout.width, height: layout.height }, children: [_jsxs("svg", { width: layout.width, height: layout.height, "aria-hidden": "true", className: "flow-connections", children: [_jsx("defs", { children: _jsx("marker", { id: `arrow-${run.id}`, viewBox: "0 0 10 10", refX: "8", refY: "5", markerWidth: "5", markerHeight: "5", orient: "auto", children: _jsx("path", { d: "M0 0L10 5L0 10z", fill: "currentColor" }) }) }), definition.nodes.flatMap((n) => (links.get(n.id) ?? []).map((id) => {
-                                    const a = layout.points.get(id), b = layout.points.get(n.id);
-                                    if (!a || !b)
-                                        return null;
-                                    const active = ["running", "completed"].includes(run.steps[n.id]?.status);
-                                    return (_jsx("path", { d: `M${a.x + a.width},${a.y + a.height / 2} C${a.x + a.width + 80},${a.y + a.height / 2} ${b.x - 80},${b.y + b.height / 2} ${b.x},${b.y + b.height / 2}`, stroke: active ? "#E551BA" : "currentColor", opacity: active ? 1 : 0.35, fill: "none", strokeWidth: "2", markerEnd: `url(#arrow-${run.id})` }, `${id}-${n.id}`));
-                                }))] }), definition.nodes.map((n) => {
-                            const p = layout.points.get(n.id);
-                            if (!p)
-                                return null;
-                            const captured = tracesById.get(run.steps[n.id]?.traceId ?? "");
-                            return n.kind === "jev" && captured ? (_jsx(RequestNode, { node: n, trace: captured, status: run.steps[n.id]?.status ?? "waiting", selected: selected === n.id, x: p.x, y: p.y, onSelect: setSelected, onResize: onResize }, n.id)) : (_jsx(Card, { node: n, status: run.steps[n.id]?.status ?? "waiting", decision: run.steps[n.id]?.decision, selected: selected === n.id, bounds: p, onSelect: setSelected, inputs: inputsByStep.get(n.id), lanes: parallelLanes.get(n.id) ?? [] }, n.id));
-                        })] }) }), _jsxs("div", { className: "flow-selection", children: [node && step ? (_jsxs(_Fragment, { children: [_jsxs("strong", { children: [node.title ?? node.id, " \u00B7 ", step.status] }), _jsx("span", { className: "muted", children: step.durationMs !== undefined
-                                    ? ` · ${Math.round(step.durationMs)} ms`
-                                    : "" }), node.description && _jsx("p", { children: node.description }), node.kind === "parallel" && (_jsxs("p", { children: ["These paths run at the same time:", " ", (node.lanes ?? node.dependencies).join(", "), ". The next step starts only after all finish successfully. This marker waits for their results; it does not make another Jev request."] })), node.kind === "parallel" && (_jsx("ul", { className: "flow-lane-details", children: parallelLanes.get(node.id)?.map((lane) => (_jsxs("li", { children: [lane.name, " \u00B7 ", lane.status] }, lane.name))) })), (inputsByStep.get(node.id)?.length ?? 0) > 0 && (_jsx("dl", { className: "flow-input-details", children: inputsByStep.get(node.id)?.map((input) => (_jsxs("div", { children: [_jsxs("dt", { children: [input.name, " ", _jsx("code", { children: input.reference })] }), _jsx("dd", { children: input.value })] }, input.reference))) })), (node.conditionRule !== undefined || node.condition) && (_jsxs("p", { children: [_jsx("code", { children: node.conditionRule !== undefined
-                                            ? formatFlowCondition(node.conditionRule)
-                                            : node.condition }), " ", "\u00B7", " ", step.decision === undefined
-                                        ? "Not evaluated"
-                                        : step.decision
-                                            ? "Passed · then route"
-                                            : "Not met · else route"] })), _jsx("p", { className: "muted", children: node.path.length ? node.path.join(" / ") : "Main path" }), step.error && _jsx("p", { role: "alert", children: step.error }), node.kind === "jev" &&
-                                (trace ? (_jsx("button", { onClick: () => setDetails(!details), children: details ? "Hide request details" : "Inspect request" })) : (_jsx("p", { children: step.traceId
-                                        ? "Request capture was cleared or evicted."
-                                        : "No captured request linked yet. Use a client created by this inspector." })))] })) : (_jsx("p", { className: "muted", children: "Each request diagram shows its context, question and answer. Use its question picker for other answers. Lines between requests show execution dependencies." })), run.value !== undefined && (_jsxs("details", { children: [_jsx("summary", { children: "Captured outcome value" }), _jsx(JsonBlock, { value: run.value })] }))] }), details && trace && (_jsx("div", { className: "flow-request-detail", children: _jsx(RequestDetail, { trace: trace }) }))] }));
+    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/JevDrawer.js

@@ -50,10 +50,8 @@ export function JevDrawer({ children, open, onOpenChange, }) {
     }, [open, root]);
     useEffect(() => {
         const host = document.createElement("jev-devtools-root");
-        // The host is the only element exposed to page selectors. The overlay itself
-        // lives in the shadow tree, with its own typography and component styles.
-        host.style.cssText =
-            "all: initial !important; position: fixed !important; inset: 0 !important; pointer-events: none !important; z-index: 2147483000 !important;";
+        // The shadow stylesheet resets the exposed host through :host(), keeping
+        // page styles out without an expanded inline reset on the host element.
         const shadow = host.attachShadow({ mode: "open" });
         const style = document.createElement("style");
         style.textContent = inspectorStyles;

package/lib/src/condition-inputs.js

@@ -17,6 +17,15 @@ export function conditionInputs(rule, run, traces, stepNames = new Map()) {
                 : undefined;
             let value = trace?.result;
             let available = !!trace?.result;
+            if (node.source === "task" && typeof node.stepId === "string") {
+                const data = run.steps[node.stepId]?.data;
+                available =
+                    !!data &&
+                        typeof data === "object" &&
+                        !Array.isArray(data) &&
+                        Object.hasOwn(data, "output");
+                value = available ? data.output : undefined;
+            }
             if (!Array.isArray(node.path) ||
                 !node.path.every((key) => typeof key === "string"))
                 available = false;
@@ -78,8 +87,8 @@ export function conditionRequirement(rule, inputs) {
             !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)}`;
+            ["gte", "lt", "gt", "eq"].includes(String(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)}`;
         }
     }
     const rename = (node, depth = 0) => {
@@ -89,7 +98,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/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", "gte"].includes(String(value.op)) || args.length !== 2)
+    if (!["eq", "lt", "gt", "gte"].includes(String(value.op)) ||
+        args.length !== 2)
         return "[rule unavailable]";
     const probability = args.some((arg) => arg &&
         typeof arg === "object" &&
@@ -43,5 +44,5 @@ export function formatFlowCondition(value, depth = 0) {
         arg.op === "literal"
         ? formatConditionLiteral(arg.value, probability)
         : format(arg);
-    return `${operand(args[0])} ${value.op === "eq" ? "=" : value.op === "lt" ? "<" : "≥"} ${operand(args[1])}`;
+    return `${operand(args[0])} ${value.op === "eq" ? "=" : value.op === "lt" ? "<" : value.op === "gt" ? ">" : "≥"} ${operand(args[1])}`;
 }