@tangle-network/sandbox-ui 0.135.0 → 0.136.1

package/dist/{WorkflowGraph-WgonmxDh.js → WorkflowGraph-BcuJ0kgt.js}

@@ -1,4 +1,4 @@
-import { A as triggerNodeIndex, B as fmtTokens, C as COMPACT_NODE_SIZE, D as buildWorkflowGraph, I as shortModel, L as clampPreview, M as worstSeverity, O as isStructuralKind, R as fmtCost, S as statusBorder, _ as emptySlotLabel, a as NodeMark, b as problemSurface, c as RESTING_BORDER, d as STATUS_LABEL, g as edgeColor, h as StatusPill, j as wfEdgeId, l as RESTING_SHADOW, m as StatusFooter, n as classifyOutput, o as ProblemMarker, s as ProblemMessages, t as NodeOutputBody, u as STATUS_COLOR, v as kindAccent, x as problemTitle, y as problemBorder, z as fmtDuration } from "./node-output-Bs51H68g.js";
+import { A as triggerNodeIndex, B as fmtTokens, C as COMPACT_NODE_SIZE, D as buildWorkflowGraph, I as shortModel, L as clampPreview, M as worstSeverity, O as isStructuralKind, R as fmtCost, S as statusBorder, _ as emptySlotLabel, a as NodeMark, b as problemSurface, c as RESTING_BORDER, d as STATUS_LABEL, g as edgeColor, h as StatusPill, j as wfEdgeId, l as RESTING_SHADOW, m as StatusFooter, n as classifyOutput, o as ProblemMarker, s as ProblemMessages, t as NodeOutputBody, u as STATUS_COLOR, v as kindAccent, x as problemTitle, y as problemBorder, z as fmtDuration } from "./node-output-fuk0NV0V.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Expand, Maximize2, Minimize2, Plus, Shrink, X } from "lucide-react";
@@ -48,7 +48,8 @@ const FLOW_GRAPH_OPTION_KEYS = [
 	"compact",
 	"wrap",
 	"edges",
-	"reserveEdgeInsert"
+	"reserveEdgeInsert",
+	"itemCounts"
 ];
 /**
 * Accept either an options object or a bare `nodeState` map as the second arg, so
@@ -88,7 +89,8 @@ function buildFlowGraph(yaml, optionsOrNodeState) {
 		compact,
 		...options.wrap ? { wrap: true } : {},
 		...options.edges ? { edges: options.edges } : {},
-		...options.reserveEdgeInsert ? { reserveEdgeInsert: true } : {}
+		...options.reserveEdgeInsert ? { reserveEdgeInsert: true } : {},
+		...options.itemCounts ? { itemCounts: options.itemCounts } : {}
 	});
 	const isLR = direction === "LR";
 	const sourcePosition = isLR ? Position.Right : Position.Bottom;
@@ -406,50 +408,116 @@ function handleOffset(width, height, direction, compact) {
 		outY: height
 	};
 }
+/** Fewer items than this stay a column of lanes; more become a grid. */
+const GRID_MIN_ITEMS = 5;
+const GRID_GAP = 16;
+function itemGrids(graph, direction) {
+	const grids = [];
+	for (const source of graph.nodes) {
+		if (source.data.kind !== "foreach") continue;
+		const prefix = `${source.id}-b`;
+		const members = graph.nodes.filter((n) => n.id.startsWith(prefix) && /^\d+$/.test(n.id.slice(prefix.length)));
+		if (members.length < GRID_MIN_ITEMS) continue;
+		const ids = new Set(members.map((n) => n.id));
+		const targets = [...new Set(graph.edges.filter((e) => ids.has(e.source) && !ids.has(e.target)).map((e) => e.target))];
+		const cellW = Math.max(...members.map((n) => n.width ?? 0));
+		const cellH = Math.max(...members.map((n) => n.height ?? 0));
+		const cols = direction === "LR" ? Math.ceil(Math.sqrt(members.length * 1.6)) : 2;
+		const rows = Math.ceil(members.length / cols);
+		grids.push({
+			source: source.id,
+			members: members.map((n) => n.id),
+			targets,
+			cols,
+			cellW,
+			cellH,
+			width: cols * cellW + (cols - 1) * GRID_GAP + 2 * FRAME_PAD,
+			height: rows * cellH + (rows - 1) * GRID_GAP + 2 * FRAME_PAD + FRAME_CAPTION
+		});
+	}
+	return grids;
+}
+const gridNodeId = (source) => `grid:${source}`;
 function toElkGraph(graph, direction, wrapAspect, compact = false, foldFailureInputs = true) {
 	const spacing = graph.spacing ?? {
 		rank: 72,
 		cross: 24
 	};
 	const sinks = foldedSinks(graph, foldFailureInputs);
+	const grids = itemGrids(graph, direction);
+	const inGrid = new Set(grids.flatMap((g) => g.members));
+	const isLR = direction === "LR";
+	const nodeChild = (n) => {
+		const width = n.width ?? 0;
+		const height = n.height ?? 0;
+		const at = handleOffset(width, height, direction, compact);
+		return {
+			id: n.id,
+			width,
+			height,
+			layoutOptions: {
+				"elk.portConstraints": "FIXED_POS",
+				...sinks.has(n.id) ? { "elk.layered.layering.layerConstraint": "LAST" } : {}
+			},
+			ports: [{
+				id: `${n.id}:in`,
+				x: at.inX,
+				y: at.inY,
+				width: 0,
+				height: 0
+			}, {
+				id: `${n.id}:out`,
+				x: at.outX,
+				y: at.outY,
+				width: 0,
+				height: 0
+			}]
+		};
+	};
+	const gridChild = (g) => ({
+		id: gridNodeId(g.source),
+		width: g.width,
+		height: g.height,
+		layoutOptions: { "elk.portConstraints": "FIXED_POS" },
+		ports: [{
+			id: `${gridNodeId(g.source)}:in`,
+			x: isLR ? 0 : g.width / 2,
+			y: isLR ? g.height / 2 : 0,
+			width: 0,
+			height: 0
+		}, {
+			id: `${gridNodeId(g.source)}:out`,
+			x: isLR ? g.width : g.width / 2,
+			y: isLR ? g.height / 2 : g.height,
+			width: 0,
+			height: 0
+		}]
+	});
 	return {
 		id: "root",
 		layoutOptions: {
 			...elkLayoutOptions(direction, spacing),
 			...wrapAspect !== void 0 ? wrapOptions(wrapAspect) : {}
 		},
-		children: graph.nodes.map((n) => {
-			const width = n.width ?? 0;
-			const height = n.height ?? 0;
-			const at = handleOffset(width, height, direction, compact);
-			return {
-				id: n.id,
-				width,
-				height,
-				layoutOptions: {
-					"elk.portConstraints": "FIXED_POS",
-					...sinks.has(n.id) ? { "elk.layered.layering.layerConstraint": "LAST" } : {}
-				},
-				ports: [{
-					id: `${n.id}:in`,
-					x: at.inX,
-					y: at.inY,
-					width: 0,
-					height: 0
-				}, {
-					id: `${n.id}:out`,
-					x: at.outX,
-					y: at.outY,
-					width: 0,
-					height: 0
-				}]
-			};
+		children: graph.nodes.flatMap((n) => {
+			const grid = grids.find((g) => g.members[0] === n.id);
+			if (grid) return [gridChild(grid)];
+			if (inGrid.has(n.id)) return [];
+			return [nodeChild(n)];
 		}),
-		edges: graph.edges.filter((e) => !sinks.has(e.target)).map((e) => ({
+		edges: [...graph.edges.filter((e) => !sinks.has(e.target) && !inGrid.has(e.source) && !inGrid.has(e.target)).map((e) => ({
 			id: e.id,
 			sources: [`${e.source}:out`],
 			targets: [`${e.target}:in`]
-		}))
+		})), ...grids.flatMap((g) => [{
+			id: `${gridNodeId(g.source)}:enter`,
+			sources: [`${g.source}:out`],
+			targets: [`${gridNodeId(g.source)}:in`]
+		}, ...g.targets.filter((t) => !sinks.has(t)).map((t) => ({
+			id: `${gridNodeId(g.source)}:leave:${t}`,
+			sources: [`${gridNodeId(g.source)}:out`],
+			targets: [`${t}:in`]
+		}))])]
 	};
 }
 /** The middle of a polyline's longest straight run: the one place on a routed
@@ -492,7 +560,7 @@ function foldedSinks(graph, fold) {
 	if (!fold) return /* @__PURE__ */ new Set();
 	return new Set(graph.nodes.filter((n) => isFailureSink(graph, n.id)).map((n) => n.id));
 }
-function applyElkLayout(graph, laid, foldFailureInputs = true) {
+function applyElkLayout(graph, laid, direction, foldFailureInputs = true) {
 	const placed = /* @__PURE__ */ new Map();
 	for (const child of laid.children ?? []) {
 		if (child.x === void 0 || child.y === void 0) return null;
@@ -501,6 +569,46 @@ function applyElkLayout(graph, laid, foldFailureInputs = true) {
 			y: child.y
 		});
 	}
+	const grids = itemGrids(graph, direction);
+	const gridFrames = [];
+	for (const g of grids) {
+		const box = placed.get(gridNodeId(g.source));
+		if (!box) return null;
+		g.members.forEach((id, k) => {
+			const col = k % g.cols;
+			const row = Math.floor(k / g.cols);
+			placed.set(id, {
+				x: box.x + FRAME_PAD + col * (g.cellW + GRID_GAP),
+				y: box.y + FRAME_PAD + FRAME_CAPTION + row * (g.cellH + GRID_GAP)
+			});
+		});
+		const concurrency = graph.nodes.find((n) => n.id === g.source)?.data.config?.maxConcurrency;
+		const tileInset = graph.compact && graph.direction === "LR" ? (n) => ((n.width ?? 0) - 76) / 2 : () => 0;
+		const nodeById = new Map(graph.nodes.map((n) => [n.id, n]));
+		const connectors = (laid.edges ?? []).filter((e) => e.id.startsWith(`${gridNodeId(g.source)}:`)).map((e) => {
+			const points = edgePoints(e).map((p) => ({
+				x: p.x,
+				y: p.y
+			}));
+			const from = nodeById.get(e.sources[0].replace(/:out$/, ""));
+			const to = nodeById.get(e.targets[0].replace(/:in$/, ""));
+			if (points.length >= 2 && from) points[0].x -= tileInset(from);
+			if (points.length >= 2 && to) points[points.length - 1].x += tileInset(to);
+			return { points };
+		}).filter((c) => c.points.length >= 2);
+		gridFrames.push({
+			id: `frame:${gridNodeId(g.source)}`,
+			x: box.x,
+			y: box.y,
+			width: g.width,
+			height: g.height,
+			lanes: g.members.length,
+			agents: g.members.filter((id) => graph.nodes.find((n) => n.id === id)?.data.kind === "agent.run").length,
+			forEach: typeof concurrency === "number" ? { concurrency } : {},
+			connectors
+		});
+	}
+	const inGrid = new Set(grids.flatMap((g) => g.members));
 	if (graph.nodes.some((n) => !placed.has(n.id))) return null;
 	const routed = /* @__PURE__ */ new Map();
 	for (const e of laid.edges ?? []) routed.set(e.id, e);
@@ -519,10 +627,18 @@ function applyElkLayout(graph, laid, foldFailureInputs = true) {
 		};
 	});
 	const edges = graph.edges.map((e) => {
-		if (sinkInputs.has(e.target)) return {
+		if (inGrid.has(e.source) || inGrid.has(e.target)) return {
 			...e,
 			hidden: true
 		};
+		if (sinkInputs.has(e.target)) return {
+			...e,
+			hidden: true,
+			...e.data ? { data: {
+				...e.data,
+				foldedFailureInput: true
+			} } : {}
+		};
 		const r = routed.get(e.id);
 		const points = r ? edgePoints(r) : [];
 		if (points.length < 2) return e;
@@ -551,7 +667,7 @@ function applyElkLayout(graph, laid, foldFailureInputs = true) {
 		edges,
 		engine: "elk"
 	};
-	const groups = parallelFrames(laidOut);
+	const groups = [...gridFrames, ...parallelFrames(laidOut)];
 	return groups.length > 0 ? {
 		...laidOut,
 		groups
@@ -573,6 +689,7 @@ const FRAME_CAPTION = 18;
 * claiming an unrelated step is worse than no frame.
 */
 function parallelFrames(graph) {
+	const incomingSource = (key) => key.includes("|") ? null : key;
 	const forward = graph.edges.filter((e) => !e.data?.backEdge && !e.hidden);
 	const preds = /* @__PURE__ */ new Map();
 	const succs = /* @__PURE__ */ new Map();
@@ -620,7 +737,11 @@ function parallelFrames(graph) {
 			const ny1 = n.position.y + (n.height ?? 0);
 			return n.position.x < x1 && nx1 > x0 && n.position.y < y1 && ny1 > y0;
 		})) continue;
+		const source = incomingSource(key);
+		const sourceNode = source ? byId.get(source) : void 0;
+		const concurrency = sourceNode?.data.config?.maxConcurrency;
 		frames.push({
+			...sourceNode?.data.kind === "foreach" ? { forEach: typeof concurrency === "number" ? { concurrency } : {} } : {},
 			id: `frame:${key}`,
 			x: x0,
 			y: y0,
@@ -641,11 +762,11 @@ async function layoutWithElk(graph, direction, compact, canvasAspect = DEFAULT_C
 	const elk = await loadElk();
 	if (!elk) return null;
 	try {
-		const plain = applyElkLayout(graph, await elk.layout(toElkGraph(graph, direction, void 0, compact, fold)), fold);
+		const plain = applyElkLayout(graph, await elk.layout(toElkGraph(graph, direction, void 0, compact, fold)), direction, fold);
 		if (!plain) return null;
 		const plainAspect = boundsAspect(plain);
-		if (direction !== "LR" || graph.nodes.length < WRAP_MIN_NODES || plainAspect < canvasAspect * WRAP_WHEN_WIDER) return plain;
-		const wrapped = applyElkLayout(graph, await elk.layout(toElkGraph(graph, direction, canvasAspect, compact, fold)), fold);
+		if (direction !== "LR" || laidOutNodeCount(graph) < WRAP_MIN_NODES || plainAspect < canvasAspect * WRAP_WHEN_WIDER) return plain;
+		const wrapped = applyElkLayout(graph, await elk.layout(toElkGraph(graph, direction, canvasAspect, compact, fold)), direction, fold);
 		if (!wrapped) return plain;
 		return fitScale(wrapped, canvasAspect) > fitScale(plain, canvasAspect) ? wrapped : plain;
 	} catch {
@@ -658,6 +779,11 @@ const DEFAULT_CANVAS_ASPECT = 2.2;
 /** How much wider than its canvas a single band must be before wrapping is
 *  tried. */
 const WRAP_WHEN_WIDER = 1.6;
+/** The nodes ELK places: a grid of items counts once. */
+function laidOutNodeCount(graph) {
+	const grids = itemGrids(graph, "LR");
+	return graph.nodes.length - grids.reduce((sum, g) => sum + g.members.length, 0) + grids.length;
+}
 /** Below this many nodes a graph reads better as one band: cut into rows, a
 *  six-step loop sends its edges across the row break for no gain in size. */
 const WRAP_MIN_NODES = 12;
@@ -812,12 +938,18 @@ function graphBounds(graph) {
 function openingViewport(graph, width, height, compact, direction) {
 	const bounds = graphBounds(graph);
 	const view = framingViewport(bounds, width, height, compact, elkFloor(graph, direction));
+	if (direction !== "TB") return view;
+	const y = bounds.height * view.zoom > height ? Math.max(view.y, 44 - bounds.y * view.zoom) : view.y;
 	const entry = graph.nodes[0];
-	if (direction !== "TB" || !entry || bounds.width * view.zoom <= width) return view;
+	if (!entry || bounds.width * view.zoom <= width) return {
+		...view,
+		y
+	};
 	const entryCenter = entry.position.x + (entry.width ?? 0) / 2;
 	return {
 		...view,
-		x: width / 2 - entryCenter * view.zoom
+		x: width / 2 - entryCenter * view.zoom,
+		y
 	};
 }
 /**
@@ -1551,13 +1683,43 @@ function useCanvasAspect() {
 /** "4 agents in parallel" when each lane is one agent; "4 parallel lanes ·
 *  8 agents" when a lane is a chain (a reviewer and its verifier). */
 function parallelCaption(frame) {
+	if (frame.forEach) {
+		const at = frame.forEach.concurrency;
+		return at !== void 0 && at < frame.lanes ? `${frame.lanes} items · ${at} at a time` : `${frame.lanes} items in parallel`;
+	}
 	if (frame.agents > frame.lanes) return `${frame.lanes} parallel lanes · ${frame.agents} agents`;
 	return frame.agents === frame.lanes ? `${frame.lanes} agents in parallel` : `${frame.lanes} in parallel`;
 }
 /** Frames behind parallel fan-outs, drawn in flow coordinates under the
 *  nodes. Pointer-transparent: a frame annotates, it is never a target. */
 function ParallelFrames({ frames }) {
-	return /* @__PURE__ */ jsx(ViewportPortal, { children: frames.map((frame) => /* @__PURE__ */ jsx("div", {
+	const connectors = frames.flatMap((f) => f.connectors ?? []);
+	return /* @__PURE__ */ jsxs(ViewportPortal, { children: [connectors.length > 0 && /* @__PURE__ */ jsxs("svg", {
+		"aria-hidden": true,
+		className: "pointer-events-none absolute top-0 left-0 overflow-visible",
+		style: { zIndex: -1 },
+		width: 1,
+		height: 1,
+		children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", {
+			id: "wf-grid-arrow",
+			viewBox: "0 0 10 10",
+			refX: "9",
+			refY: "5",
+			markerWidth: "7",
+			markerHeight: "7",
+			orient: "auto-start-reverse",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M 0 0 L 10 5 L 0 10 z",
+				fill: GRID_CONNECTOR_COLOR
+			})
+		}) }), connectors.map((c, k) => /* @__PURE__ */ jsx("path", {
+			d: roundedPolyline(c.points),
+			fill: "none",
+			stroke: GRID_CONNECTOR_COLOR,
+			strokeWidth: 1.75,
+			markerEnd: "url(#wf-grid-arrow)"
+		}, k))]
+	}), frames.map((frame) => /* @__PURE__ */ jsx("div", {
 		"data-testid": "wf-parallel-frame",
 		className: "pointer-events-none absolute rounded-xl border border-primary/30 border-dashed bg-primary/[0.04]",
 		style: {
@@ -1570,7 +1732,7 @@ function ParallelFrames({ frames }) {
 			className: "absolute top-1 left-2.5 font-medium text-[10px] text-primary/80 uppercase tracking-wide",
 			children: parallelCaption(frame)
 		})
-	}, frame.id)) });
+	}, frame.id))] });
 }
 /** Below this zoom a compact node's name is too small to read, so it grows to
 *  hold a readable size on screen; the tile, the layout and the edges keep
@@ -1594,6 +1756,25 @@ function useCompactTitleScale(enabled) {
 		return Math.min(TITLE_MAX_SCALE, Math.round(TITLE_READABLE_ZOOM / zoom * 10) / 10);
 	}, [enabled]));
 }
+/** The highest leaf index per fan-out in a run state, as a stable string.
+*  The model applies counts to `foreach` steps only; a `parallel` already
+*  draws every branch it declares. Null when no step reported more than one
+*  item. */
+function foreachItemCountsKey(nodeState) {
+	if (!nodeState) return null;
+	const counts = {};
+	for (const id of Object.keys(nodeState)) {
+		const match = /^a(\d+)-b(\d+)$/.exec(id);
+		if (!match) continue;
+		const action = Number(match[1]);
+		counts[action] = Math.max(counts[action] ?? 0, Number(match[2]) + 1);
+	}
+	const wide = Object.entries(counts).filter(([, n]) => n > 1);
+	return wide.length > 0 ? JSON.stringify(Object.fromEntries(wide)) : null;
+}
+/** The resting edge colour (edgeColor with no run state), for the lines a
+*  grid frame draws itself. */
+const GRID_CONNECTOR_COLOR = "color-mix(in srgb, hsl(var(--muted-foreground)) 38%, transparent)";
 /** Past this many nodes the full canvas carries a minimap, so a reader zoomed
 *  into one corner of a large graph can see where they are in it. Below it
 *  the wrapped layout fits the canvas whole, and a minimap would only cover
@@ -1817,13 +1998,16 @@ function WorkflowGraph({ yaml, variant = "full", direction: directionProp, defau
 	const framedRef = useRef(false);
 	const [framingCue, setFramingCue] = useState(0);
 	const hasRunOverlay = nodeState !== void 0;
+	const itemCountsKey = useMemo(() => foreachItemCountsKey(nodeState), [nodeState]);
+	const itemCounts = useMemo(() => itemCountsKey ? JSON.parse(itemCountsKey) : void 0, [itemCountsKey]);
 	const { graph: structural, ready: laidOut } = useElkLayout(useMemo(() => buildFlowGraph(yaml, {
 		nodeState: hasRunOverlay ? {} : void 0,
 		direction,
 		compact,
 		wrap,
 		reserveEdgeInsert: insertArmed,
-		...declaredEdges ? { edges: declaredEdges } : {}
+		...declaredEdges ? { edges: declaredEdges } : {},
+		...itemCounts ? { itemCounts } : {}
 	}), [
 		yaml,
 		hasRunOverlay,
@@ -1831,7 +2015,8 @@ function WorkflowGraph({ yaml, variant = "full", direction: directionProp, defau
 		compact,
 		wrap,
 		insertArmed,
-		declaredEdges
+		declaredEdges,
+		itemCounts
 	]), direction, compact, canvasAspect, !editable);
 	const shownCompact = structural.compact ?? compact;
 	const shownDirection = structural.direction ?? direction;
@@ -1846,7 +2031,7 @@ function WorkflowGraph({ yaml, variant = "full", direction: directionProp, defau
 	const styledEdges = useMemo(() => {
 		return decorateAuthoringEdges(buildStyledEdges(structural.edges, nodeState, maxNodeVisits), problemIndex.byEdge, (edge) => insertArmed && isEditableEdge(edge), hasRunOverlay).map((e) => ({
 			...e,
-			...e.hidden && nodeState?.[e.source]?.status === "failed" ? { hidden: false } : {},
+			...e.hidden && e.data?.foldedFailureInput && nodeState?.[e.source]?.status === "failed" ? { hidden: false } : {},
 			deletable: editable ? isEditableEdge(e) : false
 		}));
 	}, [

package/dist/{node-output-Bs51H68g.js → node-output-fuk0NV0V.js}

@@ -1245,13 +1245,18 @@ function buildWorkflowGraph(yaml, options) {
 		addNode(id, data, rank, reserveRunState);
 		if (!declared) for (const from of prevExits) addEdge(from, id, branchLeafIds.has(from) ? "join" : "spine");
 		const rec = asRecord(action);
-		const children = "parallel" in rec ? Array.isArray(asRecord(rec.parallel).branches) ? asRecord(rec.parallel).branches : [] : "foreach" in rec ? [asRecord(rec.foreach).do].filter(Boolean) : [];
+		const children = "parallel" in rec ? Array.isArray(asRecord(rec.parallel).branches) ? asRecord(rec.parallel).branches : [] : "foreach" in rec ? Array.from({ length: asRecord(rec.foreach).do ? Math.max(1, options?.itemCounts?.[i] ?? 1) : 0 }, () => asRecord(rec.foreach).do) : [];
 		if (children.length > 0) {
 			const branchRank = rank + 1;
 			const branchIds = [];
+			const items = "foreach" in rec && children.length > 1;
 			children.forEach((child, j) => {
 				const cid = branchNodeId(i, j);
-				addNode(cid, describeAction(child), branchRank, reserveRunState);
+				const data = describeAction(child);
+				addNode(cid, items ? {
+					...data,
+					subtitle: `Item ${j + 1} of ${children.length}`
+				} : data, branchRank, reserveRunState);
 				addEdge(id, cid, "fork");
 				branchIds.push(cid);
 				branchLeafIds.add(cid);

package/dist/workflows.d.ts

@@ -320,6 +320,13 @@ interface BuildWorkflowGraphOptions {
    * measured afterwards. Defaults to `false`.
    */
   reserveEdgeInsert?: boolean;
+  /**
+   * How many items a settled `foreach` ran, by its action index. A foreach
+   * is one template step until it has run; then each item is a node of its
+   * own, so a fan-out over fourteen issues reads as fourteen lanes with their
+   * own status and cost rather than one tile with a count.
+   */
+  itemCounts?: Readonly<Record<number, number>>;
 }
 /** Build a positioned graph from a workflow YAML string. Never throws —
  *  malformed YAML or an empty definition returns an `error` the UI can fall

package/dist/workflows.js

@@ -1,5 +1,5 @@
 import { i as modelBrandFor, t as ModelBrandStack } from "./model-brand-BSr9on8C.js";
-import { A as triggerNodeIndex, D as buildWorkflowGraph, E as branchNodeId, F as parseActionPath, I as shortModel, N as actionPathLabel, P as humanizeIdentifier, T as actionNodeId, a as NodeMark, d as STATUS_LABEL, f as STATUS_PILL, h as StatusPill, i as KIND_ICON, k as triggerNodeId, n as classifyOutput, p as STATUS_TONE, r as condenseText, t as NodeOutputBody, u as STATUS_COLOR, w as TRIGGER_NODE_ID } from "./node-output-Bs51H68g.js";
+import { A as triggerNodeIndex, D as buildWorkflowGraph, E as branchNodeId, F as parseActionPath, I as shortModel, N as actionPathLabel, P as humanizeIdentifier, T as actionNodeId, a as NodeMark, d as STATUS_LABEL, f as STATUS_PILL, h as StatusPill, i as KIND_ICON, k as triggerNodeId, n as classifyOutput, p as STATUS_TONE, r as condenseText, t as NodeOutputBody, u as STATUS_COLOR, w as TRIGGER_NODE_ID } from "./node-output-fuk0NV0V.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Component, Suspense, lazy, useMemo, useState } from "react";
 //#region src/workflows/WorkflowGraphLazy.tsx
@@ -30,7 +30,7 @@ function retryImport(factory, retries = 2, delayMs = 350) {
 	});
 }
 function lazyWorkflowGraph() {
-	return lazy(() => retryImport(() => import("./WorkflowGraph-WgonmxDh.js").then((m) => ({ default: m.WorkflowGraph }))));
+	return lazy(() => retryImport(() => import("./WorkflowGraph-BcuJ0kgt.js").then((m) => ({ default: m.WorkflowGraph }))));
 }
 var GraphErrorBoundary = class extends Component {
 	state = { hasError: false };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.135.0",
+  "version": "0.136.1",
   "license": "MIT",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {