@tangle-network/sandbox-ui 0.134.12 → 0.136.0

package/dist/{WorkflowGraph-Dz6aA2Mp.js → WorkflowGraph-Cfm0Ub4F.js}

@@ -1,8 +1,8 @@
-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-CHlf3tni.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 { Maximize2, Minimize2, Plus, X } from "lucide-react";
-import { Background, BaseEdge, Controls, EdgeLabelRenderer, Handle, MarkerType, Panel, Position, ReactFlow, getSmoothStepPath, getViewportForBounds, useEdgesState, useNodesState } from "@xyflow/react";
+import { Expand, Maximize2, Minimize2, Plus, Shrink, X } from "lucide-react";
+import { Background, BaseEdge, Controls, EdgeLabelRenderer, Handle, MarkerType, MiniMap, Panel, Position, ReactFlow, ViewportPortal, getSmoothStepPath, getViewportForBounds, useEdgesState, useNodesState, useStore } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 //#region src/workflows/flow-graph.ts
 /**
@@ -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,13 +89,17 @@ 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;
 	const targetPosition = isLR ? Position.Left : Position.Top;
 	return {
 		error: graph.error,
+		compact,
+		direction,
+		...graph.spacing ? { spacing: graph.spacing } : {},
 		nodes: graph.nodes.map((n) => ({
 			id: n.id,
 			type: "wfNode",
@@ -287,6 +292,520 @@ function clearOfNodeBoxes(point, boxes, direction, half) {
 	return Math.abs(up) <= Math.abs(down) ? up : down;
 }
 //#endregion
+//#region src/workflows/elk-layout.ts
+/** One ELK instance per page. `null` once loading failed, so a host without
+*  the peer pays for one failed import, not one per render. */
+let elkInstance;
+function loadElk() {
+	elkInstance ??= import("elkjs/lib/elk.bundled.js").then((mod) => {
+		const Elk = mod.default;
+		return new Elk();
+	}).catch(() => null);
+	return elkInstance;
+}
+/**
+* Whether the graph is worth the ELK pass: anything but a plain line. A line
+* has nothing to order or route, and `model.ts` folds a long one into rows
+* that read in order, which a layered layout would not improve.
+*/
+function wantsElkLayout(graph) {
+	if (graph.error || graph.nodes.length < 3) return false;
+	const outdegree = /* @__PURE__ */ new Map();
+	const indegree = /* @__PURE__ */ new Map();
+	for (const e of graph.edges) {
+		if (e.data?.whenLabel !== void 0 || e.data?.backEdge) return true;
+		outdegree.set(e.source, (outdegree.get(e.source) ?? 0) + 1);
+		indegree.set(e.target, (indegree.get(e.target) ?? 0) + 1);
+	}
+	for (const n of outdegree.values()) if (n > 1) return true;
+	for (const n of indegree.values()) if (n > 1) return true;
+	return false;
+}
+/**
+* A join that runs when ANY of its inputs fails (`join: any_failed`) is a
+* failure handler, not a step in the flow: the factory's `failed` node is fed
+* by ten steps across every stage. Drawn as ten real edges it pulls the whole
+* layout toward one corner and buries the flow under lines that only matter
+* when something breaks. Its inputs are laid out and drawn as one caption on
+* the node instead; the node itself still lays out and opens like any other.
+*/
+function isFailureSink(graph, nodeId) {
+	return graph.nodes.find((n) => n.id === nodeId)?.data.config?.join === "any_failed" && !graph.edges.some((e) => e.source === nodeId);
+}
+/**
+* ELK options for one flow direction. Every value here was chosen against the
+* shapes the catalogue ships (a 22-step factory with two loops and a ten-way
+* failure join, a four-lane review) rather than taken as defaults:
+*  - model order breaks ties, so a layer reads in the order the author wrote
+*    the steps unless reordering removes a crossing;
+*  - cycle breaking follows the same order, so the edge drawn as the loop's
+*    return is the one that points back up the definition, as the model's own
+*    back-edge classification marks it;
+*  - orthogonal routing keeps every edge on horizontal and vertical runs, and
+*    a guard chip sits on its edge's longest run (see the renderer). Chips are
+*    NOT given to ELK as label boxes: a label is laid out as a node of its own
+*    layer, which on the factory doubled the layer count and the width.
+*/
+function elkLayoutOptions(direction, spacing) {
+	return {
+		"elk.algorithm": "layered",
+		"elk.direction": direction === "LR" ? "RIGHT" : "DOWN",
+		"elk.edgeRouting": "ORTHOGONAL",
+		"elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES",
+		"elk.layered.cycleBreaking.strategy": "MODEL_ORDER",
+		"elk.layered.crossingMinimization.strategy": "LAYER_SWEEP",
+		"elk.layered.nodePlacement.strategy": "BRANDES_KOEPF",
+		"elk.layered.nodePlacement.bk.fixedAlignment": "BALANCED",
+		"elk.layered.feedbackEdges": "true",
+		"elk.layered.spacing.nodeNodeBetweenLayers": String(Math.max(spacing.rank, 40)),
+		"elk.spacing.nodeNode": String(Math.max(spacing.cross, 20)),
+		"elk.spacing.edgeNode": "14",
+		"elk.spacing.edgeEdge": "10",
+		"elk.layered.spacing.edgeNodeBetweenLayers": "14",
+		"elk.layered.spacing.edgeEdgeBetweenLayers": "10",
+		"elk.padding": "[top=0,left=0,bottom=0,right=0]",
+		"elk.separateConnectedComponents": "false"
+	};
+}
+/**
+* Cut a long layered graph into rows stacked toward `aspect` (width / height
+* of the canvas it is drawn in), so a fourteen-layer pipeline uses the
+* panel's height instead of shrinking to fit one strip. ELK picks the cuts
+* and routes the edges that cross them.
+*/
+function wrapOptions(aspect) {
+	return {
+		"elk.aspectRatio": String(aspect),
+		"elk.layered.wrapping.strategy": "MULTI_EDGE",
+		"elk.layered.wrapping.additionalEdgeSpacing": "16",
+		"elk.layered.wrapping.correctionFactor": "1.0"
+	};
+}
+/** The graph in ELK's terms: every node at its authoritative size, and every
+*  edge except a failure sink's inputs. */
+/**
+* Where a node's edges attach, relative to its box: the handle the card
+* draws. A compact node's box is much bigger than its tile (the name sits
+* under it), so routing to the box would stop every edge short of the tile it
+* points at. One port per side, at the handle, makes ELK route to exactly
+* where the card draws its connection point.
+*/
+function handleOffset(width, height, direction, compact) {
+	if (direction === "LR") {
+		const y = compact ? 38 : height / 2;
+		return {
+			inX: 0,
+			inY: y,
+			outX: width,
+			outY: y
+		};
+	}
+	const x = compact ? 38 : width / 2;
+	return {
+		inX: x,
+		inY: 0,
+		outX: x,
+		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.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) && !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
+*  edge with room for a chip, and distinct per edge even when several leave
+*  the same node together. */
+function longestRunMidpoint(points) {
+	let best = 0;
+	let at = {
+		x: points[0].x,
+		y: points[0].y
+	};
+	for (let i = 1; i < points.length; i += 1) {
+		const a = points[i - 1];
+		const b = points[i];
+		const len = Math.hypot(b.x - a.x, b.y - a.y);
+		if (len > best) {
+			best = len;
+			at = {
+				x: (a.x + b.x) / 2,
+				y: (a.y + b.y) / 2
+			};
+		}
+	}
+	return at;
+}
+/** Flatten an ELK edge's sections into one polyline. */
+function edgePoints(edge) {
+	const points = [];
+	for (const section of edge.sections ?? []) points.push(section.startPoint, ...section.bendPoints ?? [], section.endPoint);
+	return points;
+}
+/**
+* Apply an ELK result to the graph: new positions, a route on every edge, and
+* frames around parallel fan-outs. Pure, so the mapping is checkable without
+* running ELK. Returns null when the result does not cover the graph (a node
+* ELK did not place), which the caller treats as "keep the first layout".
+*/
+/** The failure handlers whose inputs this layout folds. */
+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, 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;
+		placed.set(child.id, {
+			x: child.x,
+			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);
+	const sinks = foldedSinks(graph, foldFailureInputs);
+	const sinkInputs = /* @__PURE__ */ new Map();
+	for (const e of graph.edges) if (sinks.has(e.target)) sinkInputs.set(e.target, (sinkInputs.get(e.target) ?? 0) + 1);
+	const nodes = graph.nodes.map((n) => {
+		const inputs = sinkInputs.get(n.id);
+		return {
+			...n,
+			position: placed.get(n.id),
+			...inputs !== void 0 ? { data: {
+				...n.data,
+				subtitle: `If any of ${inputs} step${inputs === 1 ? "" : "s"} fails`
+			} } : {}
+		};
+	});
+	const edges = graph.edges.map((e) => {
+		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;
+		const from = placed.get(e.source);
+		const to = placed.get(e.target);
+		return {
+			...e,
+			type: WF_EDGE_TYPE,
+			data: {
+				...e.data ?? { kind: "spine" },
+				route: {
+					points: points.map((p) => ({
+						x: p.x,
+						y: p.y
+					})),
+					label: longestRunMidpoint(points),
+					from,
+					to
+				}
+			}
+		};
+	});
+	const laidOut = {
+		...graph,
+		nodes,
+		edges,
+		engine: "elk"
+	};
+	const groups = [...gridFrames, ...parallelFrames(laidOut)];
+	return groups.length > 0 ? {
+		...laidOut,
+		groups
+	} : laidOut;
+}
+/** Air between a frame and the cards inside it, and the band its caption sits
+*  in above them. */
+const FRAME_PAD = 10;
+const FRAME_CAPTION = 18;
+/**
+* Frames around PARALLEL fan-outs: two or more steps that start together
+* because the same steps finished, over unguarded edges. A guarded fan-out is
+* a choice, not parallel work, and gets no frame — its edge chips already say
+* which way it goes. Each member is followed down its own lane (a single
+* unguarded successor that only it feeds) so a review-then-verify lane is
+* framed whole rather than just its first step.
+*
+* A frame that would enclose a card outside the fan-out is dropped: a frame
+* 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();
+	for (const e of forward) {
+		preds.set(e.target, [...preds.get(e.target) ?? [], e]);
+		succs.set(e.source, [...succs.get(e.source) ?? [], e]);
+	}
+	const byId = new Map(graph.nodes.map((n) => [n.id, n]));
+	const siblings = /* @__PURE__ */ new Map();
+	for (const n of graph.nodes) {
+		if (triggerNodeIndex(n.id) !== null) continue;
+		const incoming = preds.get(n.id) ?? [];
+		if (incoming.length === 0) continue;
+		if (incoming.some((e) => e.data?.whenLabel !== void 0)) continue;
+		if (n.data.config && "if" in n.data.config) continue;
+		const key = incoming.map((e) => e.source).sort().join("|");
+		siblings.set(key, [...siblings.get(key) ?? [], n.id]);
+	}
+	const frames = [];
+	for (const [key, members] of siblings) {
+		if (members.length < 2) continue;
+		const framed = /* @__PURE__ */ new Set();
+		for (const start of members) {
+			let at = start;
+			framed.add(at);
+			for (let hop = 0; hop < graph.nodes.length; hop += 1) {
+				const out = succs.get(at) ?? [];
+				if (out.length !== 1 || out[0].data?.whenLabel !== void 0) break;
+				const next = out[0].target;
+				if ((preds.get(next) ?? []).length !== 1 || framed.has(next)) break;
+				const config = byId.get(next)?.data.config;
+				if (config && "if" in config) break;
+				framed.add(next);
+				at = next;
+			}
+		}
+		const boxes = [...framed].map((id) => byId.get(id)).filter(Boolean);
+		const x0 = Math.min(...boxes.map((n) => n.position.x)) - FRAME_PAD;
+		const y0 = Math.min(...boxes.map((n) => n.position.y)) - FRAME_PAD - FRAME_CAPTION;
+		const x1 = Math.max(...boxes.map((n) => n.position.x + (n.width ?? 0))) + FRAME_PAD;
+		const y1 = Math.max(...boxes.map((n) => n.position.y + (n.height ?? 0))) + FRAME_PAD;
+		if (graph.nodes.some((n) => {
+			if (framed.has(n.id)) return false;
+			const nx1 = n.position.x + (n.width ?? 0);
+			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,
+			width: x1 - x0,
+			height: y1 - y0,
+			lanes: members.length,
+			agents: boxes.filter((n) => n.data.kind === "agent.run").length
+		});
+	}
+	return frames;
+}
+/**
+* Lay the graph out with ELK. Resolves to null when ELK is unavailable or the
+* layout fails, and the caller keeps the synchronous layout.
+*/
+async function layoutWithElk(graph, direction, compact, canvasAspect = DEFAULT_CANVAS_ASPECT, options = {}) {
+	const fold = options.foldFailureInputs ?? true;
+	const elk = await loadElk();
+	if (!elk) return null;
+	try {
+		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" || 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 {
+		return null;
+	}
+}
+/** The aspect a graph is framed in when the host says nothing: the workflow
+*  page's canvas, about 1100 x 480. */
+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;
+function bounds(graph) {
+	const xs = graph.nodes.flatMap((n) => [n.position.x, n.position.x + (n.width ?? 0)]);
+	const ys = graph.nodes.flatMap((n) => [n.position.y, n.position.y + (n.height ?? 0)]);
+	return {
+		width: Math.max(...xs) - Math.min(...xs),
+		height: Math.max(...ys) - Math.min(...ys)
+	};
+}
+function boundsAspect(graph) {
+	const { width, height } = bounds(graph);
+	return width / Math.max(height, 1);
+}
+/** The scale a graph fits a unit-height canvas of `aspect` at: bigger is a
+*  more readable graph. */
+function fitScale(graph, aspect) {
+	const { width, height } = bounds(graph);
+	return Math.min(aspect / Math.max(width, 1), 1 / Math.max(height, 1));
+}
+//#endregion
 //#region src/workflows/WorkflowGraph.tsx
 /**
 * n8n-style node-graph view of a workflow, rendered from its YAML definition.
@@ -341,6 +860,22 @@ function fitZoomFloor(compact) {
 	return compact ? .55 : .35;
 }
 /**
+* The floor for a graph ELK laid out. ELK wraps a long graph into rows sized
+* for the canvas, so its fit is the whole workflow at once — the shape Drew
+* asked to see — and names stay legible through semantic zoom
+* (useCompactTitleScale). Clamping it at the compact floor instead would crop
+* a layout built to be seen whole.
+*/
+const ELK_FIT_FLOOR = .28;
+/**
+* The fit floor a laid-out graph opens at. Only a left-to-right ELK layout
+* is built to be seen whole; a top-to-bottom one is a phone's column, read by
+* panning down it from the top, so it keeps the readable compact floor.
+*/
+function elkFloor(graph, direction) {
+	return graph.engine === "elk" && direction === "LR" ? ELK_FIT_FLOOR : void 0;
+}
+/**
 * The rectangle the LAID-OUT nodes occupy, in flow coordinates.
 *
 * Read straight off the layouter's own position + size rather than through
@@ -378,6 +913,39 @@ function layoutBounds(nodes) {
 		height: maxY - minY
 	};
 }
+/** What the camera frames: the nodes, and the parallel frames drawn around
+*  them, whose captions sit above the first lane. */
+function graphBounds(graph) {
+	const nodes = layoutBounds(graph.nodes);
+	if (!graph.groups || graph.groups.length === 0) return nodes;
+	const x0 = Math.min(nodes.x, ...graph.groups.map((g) => g.x));
+	const y0 = Math.min(nodes.y, ...graph.groups.map((g) => g.y));
+	const x1 = Math.max(nodes.x + nodes.width, ...graph.groups.map((g) => g.x + g.width));
+	const y1 = Math.max(nodes.y + nodes.height, ...graph.groups.map((g) => g.y + g.height));
+	return {
+		x: x0,
+		y: y0,
+		width: x1 - x0,
+		height: y1 - y0
+	};
+}
+/**
+* The camera a graph opens at: {@link framingViewport} over the graph and its
+* frames, at the floor its layout calls for. A top-to-bottom column wider
+* than a phone is read down its spine, so the camera centres on the entry
+* step rather than on the column's left edge, where only loop returns run.
+*/
+function openingViewport(graph, width, height, compact, direction) {
+	const bounds = graphBounds(graph);
+	const view = framingViewport(bounds, width, height, compact, elkFloor(graph, direction));
+	const entry = graph.nodes[0];
+	if (direction !== "TB" || !entry || bounds.width * view.zoom <= width) return view;
+	const entryCenter = entry.position.x + (entry.width ?? 0) / 2;
+	return {
+		...view,
+		x: width / 2 - entryCenter * view.zoom
+	};
+}
 /**
 * The camera that frames `bounds` inside a `width`×`height` canvas.
 *
@@ -397,8 +965,8 @@ function layoutBounds(nodes) {
 * is already centered with slack on both sides, so `max` returns it untouched,
 * and nothing here has to re-derive React Flow's own reading of `padding`.
 */
-function framingViewport(bounds, width, height, compact) {
-	const fit = getViewportForBounds(bounds, width, height, fitZoomFloor(compact), fitZoomCeiling(compact), FIT_VIEW.padding);
+function framingViewport(bounds, width, height, compact, floor = fitZoomFloor(compact)) {
+	const fit = getViewportForBounds(bounds, width, height, floor, fitZoomCeiling(compact), FIT_VIEW.padding);
 	/** Slide `offset` just far enough that the bounds' leading edge is on canvas. */
 	const anchored = (offset, origin) => offset + Math.max(0, -(offset + origin * fit.zoom));
 	return {
@@ -657,6 +1225,7 @@ function WorkflowNode({ id, data, sourcePosition, targetPosition }) {
 		className: handleClass,
 		style: compact ? compactHandleStyle(sourcePos, isLR) : void 0
 	})] });
+	const titleScale = useCompactTitleScale(compact);
 	if (compact) return /* @__PURE__ */ jsxs("div", {
 		className: `relative flex h-full w-full ${isLR ? "flex-col items-center" : "flex-row items-center"}`,
 		children: [
@@ -712,10 +1281,14 @@ function WorkflowNode({ id, data, sourcePosition, targetPosition }) {
 				children: [
 					/* @__PURE__ */ jsx("div", {
 						className: "truncate font-semibold text-[12px] text-foreground leading-tight",
+						style: titleScale > 1 ? {
+							fontSize: 12 * titleScale,
+							...isLR ? { marginInline: -16 } : {}
+						} : void 0,
 						title: d.title,
 						children: d.title
 					}),
-					subtitle && /* @__PURE__ */ jsx("div", {
+					subtitle && titleScale <= SUBTITLE_MAX_SCALE && /* @__PURE__ */ jsx("div", {
 						className: "truncate text-[11px] text-muted-foreground leading-tight",
 						title: subtitle,
 						children: subtitle
@@ -944,6 +1517,263 @@ function releasedOnCanvas(at, frame) {
 * then never revisited.
 */
 const NodeBoxesContext = createContext([]);
+/** A node's current top-left, read from the store so an edge notices its end
+*  moving (a drag, a tween). Null while the node is not in the store. */
+function useInternalNodePosition(id) {
+	return useStore(useCallback((state) => {
+		const node = state.nodeLookup.get(id);
+		return node ? node.position : null;
+	}, [id]), (a, b) => a === b || a !== null && b !== null && samePoint(a, b));
+}
+function samePoint(a, b) {
+	return Math.abs(a.x - b.x) < .5 && Math.abs(a.y - b.y) < .5;
+}
+/** Corner radius of a routed edge's bends, capped by the shorter of the two
+*  segments that meet there so a tight jog never overshoots. */
+const ROUTE_CORNER = 8;
+/** An orthogonal polyline as an SVG path with rounded bends. */
+function roundedPolyline(points) {
+	if (points.length === 0) return "";
+	let d = `M ${points[0].x} ${points[0].y}`;
+	for (let i = 1; i < points.length - 1; i += 1) {
+		const prev = points[i - 1];
+		const at = points[i];
+		const next = points[i + 1];
+		const inLen = Math.hypot(at.x - prev.x, at.y - prev.y);
+		const outLen = Math.hypot(next.x - at.x, next.y - at.y);
+		const r = Math.min(ROUTE_CORNER, inLen / 2, outLen / 2);
+		if (r < .5) {
+			d += ` L ${at.x} ${at.y}`;
+			continue;
+		}
+		const before = {
+			x: at.x - (at.x - prev.x) / inLen * r,
+			y: at.y - (at.y - prev.y) / inLen * r
+		};
+		const after = {
+			x: at.x + (next.x - at.x) / outLen * r,
+			y: at.y + (next.y - at.y) / outLen * r
+		};
+		d += ` L ${before.x} ${before.y} Q ${at.x} ${at.y} ${after.x} ${after.y}`;
+	}
+	const last = points[points.length - 1];
+	return `${d} L ${last.x} ${last.y}`;
+}
+/** The point halfway along a polyline, where an unlabelled route's insert
+*  control or problem chip sits. */
+function polylineMidpoint(points) {
+	const lengths = points.slice(1).map((p, i) => Math.hypot(p.x - points[i].x, p.y - points[i].y));
+	let remaining = lengths.reduce((sum, len) => sum + len, 0) / 2;
+	for (let i = 0; i < lengths.length; i += 1) {
+		if (remaining <= lengths[i] && lengths[i] > 0) {
+			const t = remaining / lengths[i];
+			return {
+				x: points[i].x + (points[i + 1].x - points[i].x) * t,
+				y: points[i].y + (points[i + 1].y - points[i].y) * t
+			};
+		}
+		remaining -= lengths[i];
+	}
+	return points[points.length - 1] ?? {
+		x: 0,
+		y: 0
+	};
+}
+/**
+* The graph `buildFlowGraph` laid out, re-laid by ELK when it branches,
+* guards or loops (see elk-layout.ts).
+*
+* While ELK works on a new structure the graph ON SCREEN stays, so a relayout
+* is one move from what the reader sees to the new layout — never a detour
+* through an older laid-out graph. Before anything has been shown the canvas
+* stays hidden (`ready` false) rather than flashing a layout it is about to
+* replace, but only until {@link REVEAL_DEADLINE_MS}: ELK that is slow, absent
+* or failing then leaves the synchronous layout on screen, so no failure can
+* leave the canvas blank. `ready` gates the first reveal only.
+*/
+function useElkLayout(base, direction, compact, canvasAspect, foldFailureInputs) {
+	const wanted = wantsElkLayout(base);
+	const [laid, setLaid] = useState(null);
+	const [deadlinePassed, setDeadlinePassed] = useState(false);
+	const shownRef = useRef(null);
+	useEffect(() => {
+		if (!wanted || canvasAspect === null) return;
+		let live = true;
+		layoutWithElk(base, direction, compact, canvasAspect, { foldFailureInputs }).then((graph) => {
+			if (live) setLaid({
+				base,
+				graph: graph ?? base
+			});
+		});
+		return () => {
+			live = false;
+		};
+	}, [
+		base,
+		direction,
+		wanted,
+		canvasAspect,
+		foldFailureInputs
+	]);
+	useEffect(() => {
+		if (deadlinePassed) return;
+		const timer = setTimeout(() => setDeadlinePassed(true), REVEAL_DEADLINE_MS);
+		return () => clearTimeout(timer);
+	}, [deadlinePassed]);
+	let graph;
+	let settled;
+	if (!wanted) {
+		graph = base;
+		settled = true;
+	} else if (laid?.base === base) {
+		graph = laid.graph;
+		settled = true;
+	} else {
+		graph = shownRef.current ?? base;
+		settled = false;
+	}
+	const ready = settled || shownRef.current !== null || deadlinePassed;
+	if (ready) shownRef.current = graph;
+	return {
+		graph,
+		ready
+	};
+}
+/** How long a first ELK layout may keep the canvas hidden before the
+*  synchronous layout is shown instead. */
+const REVEAL_DEADLINE_MS = 600;
+/**
+* The canvas's shape, in three buckets: portrait (a phone), square, and the
+* wide panel the workflow pages use. Bucketed so a resize re-lays the graph
+* out only when its shape class changes, never on every pixel. Null until
+* the canvas has been measured.
+*
+* Returns a CALLBACK ref: the canvas element can mount after the graph does
+* (a first render with no YAML shows a placeholder instead), and a mount-time
+* effect would never see it — leaving the canvas unmeasured and ELK unrun.
+*/
+function useCanvasAspect() {
+	const [aspect, setAspect] = useState(null);
+	const observerRef = useRef(null);
+	return [aspect, useCallback((el) => {
+		observerRef.current?.disconnect();
+		observerRef.current = null;
+		if (!el) return;
+		const measure = () => {
+			const { width, height } = el.getBoundingClientRect();
+			if (width === 0 || height === 0) return;
+			const raw = width / height;
+			setAspect(raw < .9 ? .6 : raw < 1.6 ? 1.2 : 2.2);
+		};
+		measure();
+		if (typeof ResizeObserver === "undefined") {
+			setAspect((current) => current ?? 2.2);
+			return;
+		}
+		observerRef.current = new ResizeObserver(measure);
+		observerRef.current.observe(el);
+	}, [])];
+}
+/** "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 }) {
+	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: {
+			transform: `translate(${frame.x}px, ${frame.y}px)`,
+			width: frame.width,
+			height: frame.height,
+			zIndex: -1
+		},
+		children: /* @__PURE__ */ jsx("span", {
+			className: "absolute top-1 left-2.5 font-medium text-[10px] text-primary/80 uppercase tracking-wide",
+			children: parallelCaption(frame)
+		})
+	}, 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
+*  their scale. Capped so a name never outgrows the corridor beside it. */
+const TITLE_READABLE_ZOOM = .75;
+const TITLE_MAX_SCALE = 2.4;
+/** Past this the subtitle is dropped: two grown lines would crowd the next
+*  row's tiles, and the title is the one a reader scans for. */
+const SUBTITLE_MAX_SCALE = 1.25;
+/**
+* Semantic zoom for a compact node's name. A whole 20-step factory framed in
+* one canvas sits near zoom 0.35, where 12px names render at 4px — the graph's
+* SHAPE reads but no step does. Quantised to tenths so a zoom gesture
+* re-renders a node a handful of times, not on every frame.
+*/
+function useCompactTitleScale(enabled) {
+	return useStore(useCallback((state) => {
+		if (!enabled) return 1;
+		const zoom = state.transform[2];
+		if (zoom >= TITLE_READABLE_ZOOM) return 1;
+		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
+*  part of the graph it summarises. */
+const MINIMAP_MIN_NODES = 40;
 /** Chip styling shared by the guard summary and the cycle badge, so an edge's
 *  two possible annotations read as one pair rather than two designs. */
 const EDGE_CHIP_CLASS = "rounded-full border border-border bg-card/90 px-1.5 py-[1px] text-[10px] leading-tight backdrop-blur";
@@ -959,7 +1789,11 @@ const EDGE_CHIP_CLASS = "rounded-full border border-border bg-card/90 px-1.5 py-
 */
 function WfEdgeRenderer({ id, source, target, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, markerEnd, style }) {
 	const insertStep = useContext(EdgeInsertContext);
-	const [path, labelX, labelY] = getSmoothStepPath({
+	const sourceNode = useInternalNodePosition(source);
+	const targetNode = useInternalNodePosition(target);
+	const route = data?.route;
+	const onRoute = route !== void 0 && sourceNode !== null && targetNode !== null && samePoint(sourceNode, route.from) && samePoint(targetNode, route.to);
+	const [stepPath, stepLabelX, stepLabelY] = getSmoothStepPath({
 		sourceX,
 		sourceY,
 		sourcePosition,
@@ -967,6 +1801,24 @@ function WfEdgeRenderer({ id, source, target, sourceX, sourceY, targetX, targetY
 		targetY,
 		targetPosition
 	});
+	const routePoints = onRoute ? [
+		{
+			x: sourceX,
+			y: sourceY
+		},
+		...route.points.slice(1, -1),
+		{
+			x: targetX,
+			y: targetY
+		}
+	] : [];
+	const path = onRoute ? roundedPolyline(routePoints) : stepPath;
+	const labelAt = onRoute ? route.label ?? polylineMidpoint(routePoints) : {
+		x: stepLabelX,
+		y: stepLabelY
+	};
+	const labelX = labelAt.x;
+	const labelY = labelAt.y;
 	const backEdge = data?.backEdge === true;
 	const whenLabel = data?.whenLabel;
 	const visits = data?.maxNodeVisits;
@@ -1109,7 +1961,7 @@ function decorateAuthoringEdges(edges, byEdge, insertable, hasRunOverlay) {
 		};
 	});
 }
-function WorkflowGraph({ yaml, variant = "full", direction = "LR", defaultCompact, onCompactChange, className, wrap = false, nodeState, edges: declaredEdges, maxNodeVisits, selectedNodeId, onNodeClick, onEdgeConnect, onEdgeDelete, onEdgeClick, onEdgeInsert, onNodeInsert, onTriggerAdd, onTriggerDelete, problems }) {
+function WorkflowGraph({ yaml, variant = "full", direction: directionProp, defaultCompact, onCompactChange, className, wrap = false, nodeState, edges: declaredEdges, maxNodeVisits, selectedNodeId, onNodeClick, onEdgeConnect, onEdgeDelete, onEdgeClick, onEdgeInsert, onNodeInsert, onTriggerAdd, onTriggerDelete, problems }) {
 	const editable = onEdgeConnect !== void 0;
 	const insertOnEdge = editable ? onEdgeInsert : void 0;
 	const insertArmed = insertOnEdge !== void 0;
@@ -1130,20 +1982,26 @@ function WorkflowGraph({ yaml, variant = "full", direction = "LR", defaultCompac
 	* `userCompact`, which is the only thing React may read for that.
 	*/
 	const nextDensityFrom = useRef(userCompact);
+	const [fullscreen, setFullscreen] = useState(false);
 	const compact = isPreview || userCompact;
 	const [displayCompact, setDisplayCompact] = useState(compact);
 	const rfRef = useRef(null);
 	const wrapperRef = useRef(null);
+	const [canvasAspect, measureCanvas] = useCanvasAspect();
+	const direction = directionProp ?? (canvasAspect !== null && canvasAspect < .9 ? "TB" : "LR");
 	const framedRef = useRef(false);
 	const [framingCue, setFramingCue] = useState(0);
 	const hasRunOverlay = nodeState !== void 0;
-	const structural = useMemo(() => buildFlowGraph(yaml, {
+	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,
@@ -1151,8 +2009,11 @@ function WorkflowGraph({ yaml, variant = "full", direction = "LR", defaultCompac
 		compact,
 		wrap,
 		insertArmed,
-		declaredEdges
-	]);
+		declaredEdges,
+		itemCounts
+	]), direction, compact, canvasAspect, !editable);
+	const shownCompact = structural.compact ?? compact;
+	const shownDirection = structural.direction ?? direction;
 	const colorMode = useColorMode(wrapperRef, !structural.error && structural.nodes.length > 0);
 	const nodeBoxes = useMemo(() => structural.nodes.map((node) => ({
 		x: node.position.x,
@@ -1164,6 +2025,7 @@ function WorkflowGraph({ yaml, variant = "full", direction = "LR", defaultCompac
 	const styledEdges = useMemo(() => {
 		return decorateAuthoringEdges(buildStyledEdges(structural.edges, nodeState, maxNodeVisits), problemIndex.byEdge, (edge) => insertArmed && isEditableEdge(edge), hasRunOverlay).map((e) => ({
 			...e,
+			...e.hidden && e.data?.foldedFailureInput && nodeState?.[e.source]?.status === "failed" ? { hidden: false } : {},
 			deletable: editable ? isEditableEdge(e) : false
 		}));
 	}, [
@@ -1193,7 +2055,10 @@ function WorkflowGraph({ yaml, variant = "full", direction = "LR", defaultCompac
 		setNodes
 	]);
 	const didInitialSeedRef = useRef(false);
+	const revealedRef = useRef(laidOut);
 	useEffect(() => {
+		const firstReveal = laidOut && !revealedRef.current;
+		revealedRef.current = laidOut;
 		const withRunState = (nodes) => {
 			const state = nodeStateRef.current;
 			if (!state) return nodes;
@@ -1208,27 +2073,28 @@ function WorkflowGraph({ yaml, variant = "full", direction = "LR", defaultCompac
 		if (!didInitialSeedRef.current) {
 			didInitialSeedRef.current = true;
 			setNodes(withRunState(structural.nodes));
-			setDisplayCompact(compact);
+			setDisplayCompact(shownCompact);
 			return;
 		}
 		const inst = rfRef.current;
 		const frame = wrapperRef.current?.getBoundingClientRect();
 		if (!inst || !frame || frame.width === 0 || frame.height === 0) {
 			setNodes(withRunState(structural.nodes));
-			setDisplayCompact(compact);
+			setDisplayCompact(shownCompact);
 			return;
 		}
-		const endViewport = framingViewport(layoutBounds(structural.nodes), frame.width, frame.height, compact);
+		const endViewport = openingViewport(structural, frame.width, frame.height, shownCompact, shownDirection);
 		framedRef.current = true;
 		const prev = nodesRef.current;
 		const prevById = new Map(prev.map((n) => [n.id, n]));
-		if (!(prev.length === structural.nodes.length && structural.nodes.every((n) => prevById.has(n.id))) || !motionAllowed() || typeof requestAnimationFrame === "undefined") {
+		const sameNodeSet = prev.length === structural.nodes.length && structural.nodes.every((n) => prevById.has(n.id));
+		if (firstReveal || !sameNodeSet || !motionAllowed() || typeof requestAnimationFrame === "undefined") {
 			setNodes(withRunState(structural.nodes));
-			setDisplayCompact(compact);
+			setDisplayCompact(shownCompact);
 			inst.setViewport(endViewport);
 			return;
 		}
-		const flipTimer = setTimeout(() => setDisplayCompact(compact), 220 * (compact ? DENSITY_FLIP_AT.shrink : DENSITY_FLIP_AT.grow));
+		const flipTimer = setTimeout(() => setDisplayCompact(shownCompact), 220 * (shownCompact ? DENSITY_FLIP_AT.shrink : DENSITY_FLIP_AT.grow));
 		const startViewport = inst.getViewport();
 		const startedAt = performance.now();
 		let raf = requestAnimationFrame(function step(now) {
@@ -1267,9 +2133,26 @@ function WorkflowGraph({ yaml, variant = "full", direction = "LR", defaultCompac
 		};
 	}, [
 		structural,
-		compact,
-		setNodes
+		shownCompact,
+		setNodes,
+		laidOut,
+		shownDirection
 	]);
+	const structuralRef = useRef(structural);
+	structuralRef.current = structural;
+	const compactRef = useRef(shownCompact);
+	compactRef.current = shownCompact;
+	const directionRef = useRef(shownDirection);
+	directionRef.current = shownDirection;
+	const reframe = useCallback(() => {
+		requestAnimationFrame(() => {
+			const inst = rfRef.current;
+			const frame = wrapperRef.current?.getBoundingClientRect();
+			if (!inst || !frame || frame.width === 0 || frame.height === 0) return;
+			const graph = structuralRef.current;
+			inst.setViewport(openingViewport(graph, frame.width, frame.height, compactRef.current, directionRef.current));
+		});
+	}, []);
 	/**
 	* Own the INITIAL frame once the instance and canvas have a size. React
 	* Flow's one-time `fitView` can run after this effect and overwrite the
@@ -1281,12 +2164,13 @@ function WorkflowGraph({ yaml, variant = "full", direction = "LR", defaultCompac
 		const inst = rfRef.current;
 		const frame = wrapperRef.current?.getBoundingClientRect();
 		if (!inst || !frame || frame.width === 0 || frame.height === 0) return;
-		inst.setViewport(framingViewport(layoutBounds(structural.nodes), frame.width, frame.height, compact));
+		inst.setViewport(openingViewport(structural, frame.width, frame.height, shownCompact, shownDirection));
 		framedRef.current = true;
 	}, [
 		framingCue,
 		structural,
-		compact
+		shownCompact,
+		shownDirection
 	]);
 	useEffect(() => {
 		const el = wrapperRef.current;
@@ -1301,6 +2185,20 @@ function WorkflowGraph({ yaml, variant = "full", direction = "LR", defaultCompac
 		observer.observe(el);
 		return () => observer.disconnect();
 	}, []);
+	const fullscreenSeen = useRef(fullscreen);
+	useEffect(() => {
+		if (fullscreenSeen.current === fullscreen) return;
+		fullscreenSeen.current = fullscreen;
+		reframe();
+		if (!fullscreen) return;
+		const onKey = (event) => {
+			if (event.key !== "Escape" || event.defaultPrevented) return;
+			if (document.querySelector("[aria-modal=\"true\"]")) return;
+			setFullscreen(false);
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [fullscreen, reframe]);
 	const handleNodeClick = useCallback((_event, node) => {
 		onNodeClick?.(node.id, node.data);
 	}, [onNodeClick]);
@@ -1363,7 +2261,7 @@ function WorkflowGraph({ yaml, variant = "full", direction = "LR", defaultCompac
 		children: structural.error ?? "Nothing to show"
 	});
 	return /* @__PURE__ */ jsx(DirectionContext.Provider, {
-		value: direction,
+		value: shownDirection,
 		children: /* @__PURE__ */ jsx(DensityContext.Provider, {
 			value: displayCompact,
 			children: /* @__PURE__ */ jsx(RunModeContext.Provider, {
@@ -1381,8 +2279,12 @@ function WorkflowGraph({ yaml, variant = "full", direction = "LR", defaultCompac
 									children: /* @__PURE__ */ jsx(EdgeInsertContext.Provider, {
 										value: insertOnEdge ?? null,
 										children: /* @__PURE__ */ jsx("div", {
-											ref: wrapperRef,
-											className: `wf-graph ${className ?? ""}`,
+											ref: (el) => {
+												wrapperRef.current = el;
+												measureCanvas(el);
+											},
+											className: `wf-graph ${laidOut ? "" : "opacity-0"} ${fullscreen ? "!fixed !inset-3 !z-40 !h-auto !w-auto overflow-hidden rounded-xl border border-border bg-background shadow-2xl" : className ?? ""}`,
+											"data-layout": laidOut ? "ready" : "pending",
 											children: /* @__PURE__ */ jsxs(ReactFlow, {
 												nodes,
 												edges,
@@ -1421,42 +2323,70 @@ function WorkflowGraph({ yaml, variant = "full", direction = "LR", defaultCompac
 												preventScrolling: false,
 												minZoom: .2,
 												maxZoom: 1.5,
-												children: [/* @__PURE__ */ jsx(Background, {
-													gap: 18,
-													size: 1.4,
-													color: "hsl(var(--muted-foreground) / 0.38)"
-												}), !isPreview && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Controls, {
-													showInteractive: false,
-													position: "bottom-right",
-													fitViewOptions: { padding: FIT_VIEW.padding }
-												}), /* @__PURE__ */ jsxs(Panel, {
-													position: "top-left",
-													className: "flex items-center gap-1",
-													children: [addTrigger && /* @__PURE__ */ jsxs("button", {
-														type: "button",
-														"data-testid": "wf-trigger-add",
-														onClick: addTrigger,
-														title: "Add a trigger",
-														"aria-label": "Add a trigger",
-														className: "flex items-center gap-1 rounded-md border border-border bg-card/80 px-2 py-1 text-[11px] text-muted-foreground shadow-sm backdrop-blur transition hover:text-foreground",
-														children: [/* @__PURE__ */ jsx(Plus, {
-															size: 12,
-															"aria-hidden": true
-														}), "Trigger"]
-													}), /* @__PURE__ */ jsxs("button", {
-														type: "button",
-														onClick: () => {
-															const next = !nextDensityFrom.current;
-															nextDensityFrom.current = next;
-															setUserCompact(next);
-															onCompactChange?.(next);
+												children: [
+													/* @__PURE__ */ jsx(Background, {
+														gap: 18,
+														size: 1.4,
+														color: "hsl(var(--muted-foreground) / 0.38)"
+													}),
+													structural.groups && structural.groups.length > 0 && /* @__PURE__ */ jsx(ParallelFrames, { frames: structural.groups }),
+													!isPreview && structural.nodes.length > MINIMAP_MIN_NODES && /* @__PURE__ */ jsx(MiniMap, {
+														pannable: true,
+														zoomable: true,
+														position: "bottom-left",
+														style: {
+															width: 168,
+															height: 104
 														},
-														"aria-pressed": userCompact,
-														title: userCompact ? "Expand nodes" : "Collapse nodes",
-														className: "flex items-center gap-1 rounded-md border border-border bg-card/80 px-2 py-1 text-[11px] text-muted-foreground shadow-sm backdrop-blur transition hover:text-foreground",
-														children: [userCompact ? /* @__PURE__ */ jsx(Maximize2, { size: 12 }) : /* @__PURE__ */ jsx(Minimize2, { size: 12 }), userCompact ? "Expand" : "Compact"]
-													})]
-												})] })]
+														className: "!hidden sm:!block",
+														ariaLabel: "Workflow overview"
+													}),
+													!isPreview && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Controls, {
+														showInteractive: false,
+														position: "bottom-right",
+														fitViewOptions: { padding: FIT_VIEW.padding }
+													}), /* @__PURE__ */ jsxs(Panel, {
+														position: "top-left",
+														className: "flex items-center gap-1",
+														children: [
+															addTrigger && /* @__PURE__ */ jsxs("button", {
+																type: "button",
+																"data-testid": "wf-trigger-add",
+																onClick: addTrigger,
+																title: "Add a trigger",
+																"aria-label": "Add a trigger",
+																className: "flex items-center gap-1 rounded-md border border-border bg-card/80 px-2 py-1 text-[11px] text-muted-foreground shadow-sm backdrop-blur transition hover:text-foreground",
+																children: [/* @__PURE__ */ jsx(Plus, {
+																	size: 12,
+																	"aria-hidden": true
+																}), "Trigger"]
+															}),
+															/* @__PURE__ */ jsxs("button", {
+																type: "button",
+																onClick: () => {
+																	const next = !nextDensityFrom.current;
+																	nextDensityFrom.current = next;
+																	setUserCompact(next);
+																	onCompactChange?.(next);
+																},
+																"aria-pressed": userCompact,
+																title: userCompact ? "Expand nodes" : "Collapse nodes",
+																className: "flex items-center gap-1 rounded-md border border-border bg-card/80 px-2 py-1 text-[11px] text-muted-foreground shadow-sm backdrop-blur transition hover:text-foreground",
+																children: [userCompact ? /* @__PURE__ */ jsx(Maximize2, { size: 12 }) : /* @__PURE__ */ jsx(Minimize2, { size: 12 }), userCompact ? "Expand" : "Compact"]
+															}),
+															/* @__PURE__ */ jsxs("button", {
+																type: "button",
+																"data-testid": "wf-fullscreen",
+																onClick: () => setFullscreen((on) => !on),
+																"aria-pressed": fullscreen,
+																title: fullscreen ? "Exit full screen (Esc)" : "Full screen",
+																"aria-label": fullscreen ? "Exit full screen" : "Full screen",
+																className: "flex items-center gap-1 rounded-md border border-border bg-card/80 px-2 py-1 text-[11px] text-muted-foreground shadow-sm backdrop-blur transition hover:text-foreground",
+																children: [fullscreen ? /* @__PURE__ */ jsx(Shrink, { size: 12 }) : /* @__PURE__ */ jsx(Expand, { size: 12 }), fullscreen ? "Exit" : "Full screen"]
+															})
+														]
+													})] })
+												]
 											})
 										})
 									})