@tangle-network/sandbox-ui 0.113.7 → 0.114.0

package/dist/WorkflowGraph-B-NsdYz_.js

@@ -0,0 +1,1961 @@
+import { r as modelBrandFor, t as ModelBrandStack } from "./model-brand-hMyDTUqB.js";
+import { a as buildWorkflowGraph, c as triggerNodeIndex, d as providerLabel, f as shortModel, g as fmtTokens, h as fmtDuration, l as wfEdgeId, m as fmtCost, o as isStructuralKind, p as clampPreview, t as COMPACT_NODE_SIZE, u as worstSeverity } from "./model-I-NIxeM-.js";
+import { t as ProviderIcon } from "./provider-logo-DjqmConF.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { AlertTriangle, Bell, Box, Cable, Camera, Circle, Clock, Code, GitBranch, Maximize2, Minimize2, Plus, Repeat, ScanSearch, Sparkles, UserCheck, Webhook, X, Zap } from "lucide-react";
+import { Background, BaseEdge, Controls, EdgeLabelRenderer, Handle, MarkerType, Panel, Position, ReactFlow, getSmoothStepPath, getViewportForBounds, useEdgesState, useNodesState } from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+//#region src/workflows/flow-graph.ts
+/**
+* React Flow node/edge construction for the workflow graph. Kept separate from
+* the React-Flow-agnostic parsing in `model.ts` and from the component itself so
+* the live `nodeState` merge — the load-bearing wiring of the run view — is pure
+* and unit-testable without rendering React Flow.
+*/
+/** Edge type name for the custom renderer that draws guard chips and cycle
+*  badges. Used ONLY by edges that need one — everything else stays on the
+*  built-in `smoothstep`, so a graph without a declared topology renders
+*  exactly as it always has. */
+const WF_EDGE_TYPE = "wfEdge";
+/** The layouter's compass sides in React Flow's terms — the one place the
+*  RF-agnostic layout vocabulary is translated. */
+const SIDE_POSITION = {
+	left: Position.Left,
+	right: Position.Right,
+	top: Position.Top,
+	bottom: Position.Bottom
+};
+/** A bare run-state map (`buildFlowGraph(yaml, { a0: { status: "running" } })`),
+*  recognized by what it CONTAINS: every value is a run state, i.e. an object with
+*  a `status`. */
+function isNodeStateMap(arg) {
+	const values = Object.values(arg);
+	return values.length > 0 && values.every((v) => v !== null && typeof v === "object" && "status" in v);
+}
+/**
+* Every key {@link BuildFlowGraphOptions} declares. An options object is
+* recognized by carrying one of them, so a key missing here makes the whole
+* object fall through to the run-state test below — which it fails, silently
+* losing ALL of its options rather than the one that was forgotten.
+*
+* The completeness assertion under it turns that into a BUILD error: adding an
+* option without adding it here stops compiling, rather than shipping a graph
+* that quietly ignores the caller. Written as a tuple whose membership the
+* option keys must be assignable to.
+*/
+const FLOW_GRAPH_OPTION_KEYS = [
+	"nodeState",
+	"direction",
+	"compact",
+	"wrap",
+	"edges",
+	"reserveEdgeInsert"
+];
+/**
+* Accept either an options object or a bare `nodeState` map as the second arg, so
+* an older positional caller keeps working instead of silently losing its run
+* state.
+*
+* Both branches are POSITIVE tests — known option keys, or values that are run
+* states. Nothing falls through to "must be a node-state map", because that is how
+* an argument the graph doesn't understand (a dropped option, a typo, a key from a
+* newer version) gets read as run state: `nodeState` would then be defined, which
+* is the signal for "a run overlay is in play", and the graph would silently
+* reserve run rows for a definition that has no run at all. An unrecognized shape
+* is no options, not imaginary run state.
+*/
+function normalizeFlowGraphOptions(arg) {
+	if (!arg) return {};
+	if (FLOW_GRAPH_OPTION_KEYS.some((key) => key in arg)) return arg;
+	return isNodeStateMap(arg) ? { nodeState: arg } : {};
+}
+/**
+* Build the React Flow nodes/edges from workflow YAML, merging any live
+* `nodeState` (keyed by node id) onto the matching node's data so the node
+* component renders status/cost/output without a separate channel. A node with
+* no entry in `nodeState` keeps its static data object unchanged (same
+* reference), so the static-definition preview path is untouched. Each node
+* carries its authoritative size and orientation-driven handle sides so the
+* card renders at exactly the laid-out box and edges enter/leave the right edge.
+*/
+function buildFlowGraph(yaml, optionsOrNodeState) {
+	const options = normalizeFlowGraphOptions(optionsOrNodeState);
+	const nodeState = options.nodeState;
+	const direction = options.direction ?? "LR";
+	const compact = options.compact ?? false;
+	const graph = buildWorkflowGraph(yaml, {
+		reserveRunState: nodeState !== void 0,
+		direction,
+		compact,
+		...options.wrap ? { wrap: true } : {},
+		...options.edges ? { edges: options.edges } : {},
+		...options.reserveEdgeInsert ? { reserveEdgeInsert: true } : {}
+	});
+	const isLR = direction === "LR";
+	const sourcePosition = isLR ? Position.Right : Position.Bottom;
+	const targetPosition = isLR ? Position.Left : Position.Top;
+	return {
+		error: graph.error,
+		nodes: graph.nodes.map((n) => ({
+			id: n.id,
+			type: "wfNode",
+			position: n.position,
+			width: n.width,
+			height: n.height,
+			deletable: false,
+			style: {
+				width: n.width,
+				height: n.height
+			},
+			sourcePosition: n.sourceSide ? SIDE_POSITION[n.sourceSide] : sourcePosition,
+			targetPosition: n.targetSide ? SIDE_POSITION[n.targetSide] : targetPosition,
+			data: nodeState?.[n.id] ? {
+				...n.data,
+				state: nodeState[n.id]
+			} : n.data
+		})),
+		edges: graph.edges.map((e) => {
+			const decorated = e.whenLabel !== void 0 || e.backEdge === true;
+			return {
+				id: e.id,
+				source: e.source,
+				target: e.target,
+				type: decorated ? WF_EDGE_TYPE : "smoothstep",
+				data: {
+					kind: e.kind,
+					...e.whenLabel !== void 0 ? { whenLabel: e.whenLabel } : {},
+					...e.backEdge === true ? { backEdge: true } : {}
+				}
+			};
+		})
+	};
+}
+/** Shallow-equal two run states, so an unchanged node can be skipped on a tick.
+*  Compares over the union of keys rather than a hand-listed field set, so a new
+*  WfNodeState field can't be silently ignored here (which would leave a node
+*  stale when only that field changed). WfNodeState is a flat record of
+*  primitives, so a shallow compare is exact. */
+function sameRunState(a, b) {
+	if (a === b) return true;
+	if (!a || !b) return false;
+	const aKeys = Object.keys(a);
+	const bKeys = Object.keys(b);
+	if (aKeys.length !== bKeys.length) return false;
+	return aKeys.every((k) => a[k] === b[k]);
+}
+/**
+* Merge live `nodeState` onto an EXISTING React Flow node list, returning a new
+* list that updates only each node's `data` and preserves its identity (object
+* reference), position, and React-Flow-measured size. The static structure comes
+* from `baseDataById` (the definition-only node data, keyed by id), NOT from the
+* previous node, so `state` never accumulates across ticks. A node whose state is
+* unchanged is returned AS-IS (same reference) so React Flow doesn't re-render or
+* re-measure it — this is what keeps a poll/SSE tick from blanking the canvas.
+*/
+function mergeRunState(prev, baseDataById, nodeState) {
+	return prev.map((n) => {
+		const base = baseDataById.get(n.id) ?? n.data;
+		const s = nodeState?.[n.id];
+		const nextData = s ? {
+			...base,
+			state: s
+		} : base;
+		return sameRunState(n.data.state, nextData.state) ? n : {
+			...n,
+			data: nextData
+		};
+	});
+}
+/** Group problems by node id and by edge id (see {@link wfEdgeId}). */
+function indexProblems(problems) {
+	const byNode = /* @__PURE__ */ new Map();
+	const byEdge = /* @__PURE__ */ new Map();
+	const named = (value) => typeof value === "string" && value !== "";
+	for (const problem of problems ?? []) {
+		const into = problem.anchor === "node" ? named(problem.node) ? byNode : null : problem.anchor === "edge" && named(problem.from) && named(problem.to) ? byEdge : null;
+		if (!into) continue;
+		const key = problem.anchor === "node" ? problem.node : wfEdgeId(problem.from, problem.to);
+		const at = into.get(key);
+		if (at) at.push(problem);
+		else into.set(key, [problem]);
+	}
+	return {
+		byNode,
+		byEdge
+	};
+}
+/** How far past a node's edge a cluster's own EDGE must sit to clear the card. */
+const INSERT_CLEARANCE = 8;
+/**
+* Half the box a cluster occupies, in flow units, by what it carries.
+*
+* The label layer lives inside the zoomed viewport, so a 20px control is 20
+* units at every zoom and these numbers hold at any scale. They are bounds
+* rather than measurements: the control is a fixed 20px square, and the chip
+* TRUNCATES at Tailwind's `max-w-40`, so 160 is the widest it can ever render.
+* Nothing here has to be measured, which is what keeps the placement
+* collision-free by construction rather than by a measure-then-reflow pass.
+*
+* Both axes are given because the cluster is not square and the flow direction
+* decides which of them is the cross axis: a chip is wide and short, so in "LR"
+* its width spans the corridor while in "TB" that same width is what has to
+* clear the cards.
+*/
+const CLUSTER_HALF_SIZE = {
+	/** The insert control alone: a 20-unit square. */
+	control: {
+		width: 10,
+		height: 10
+	},
+	/**
+	* A problem chip — and, since the two stack in one column, the chip WITH the
+	* control under it, which is the taller of the two and so the one the bound
+	* has to cover. Measured on the rendered page at 160 x 38.5 flow units (the
+	* chip's `max-w-40` cap, over chip + gap + control), and rounded outward: a
+	* bound that understates is a bound that lets the cluster lap over a card.
+	*/
+	chip: {
+		width: 80,
+		height: 20
+	}
+};
+/**
+* How many cards a cluster may step past before the nudge is abandoned.
+*
+* A BOX COUNT rather than a distance, because what has to be cleared scales with
+* the layout: a node is 292 units across, so in "TB" — where that width is the
+* cross axis — moving a control off the card it sits on costs over 160, while
+* the same node in "LR" costs about 50. Any fixed distance is therefore either
+* too small to clear one standard card in one orientation, or too loose to mean
+* anything in the other. Counting cards says what was actually meant: clearing
+* the card you are on is the whole point, the next one is its neighbour in a
+* stacked layer and is cheap, and past that the cluster is crossing a dense
+* fan-out and would end up nowhere near the edge it belongs to — where leaving
+* it overlapping, still clickable through the raised label layer, is the better
+* of two bad answers.
+*/
+const INSERT_MAX_CARDS_CROSSED = 2;
+/**
+* The CROSS-axis shift that moves a point off whatever node boxes it lands in:
+* 0 when it is already clear, and null when it is on a card that cannot be left
+* within the bound. A caller has to be able to tell those two apart — only the
+* second has to give up its pointer events.
+*
+* An edge spanning more than one layer runs THROUGH the layer it skips, so its
+* midpoint — where a control would otherwise sit — is inside an unrelated card.
+* The reserved corridor only ever clears an adjacent-layer edge, because that is
+* the only gap the layout can widen. Nudging along the cross axis keeps the
+* control beside its own edge and off the card it was covering.
+*
+* Both directions are walked, so a stack of cards in the skipped layer is
+* escaped rather than jumped into; the smaller shift wins, and a point that
+* cannot be cleared inside {@link INSERT_MAX_CARDS_CROSSED} keeps its place, and
+* says so by answering null rather than an offset.
+*/
+function clearOfNodeBoxes(point, boxes, direction, half) {
+	const isLR = direction === "LR";
+	const base = isLR ? point.y : point.x;
+	const main = isLR ? point.x : point.y;
+	const padMain = isLR ? half.width : half.height;
+	const padCross = isLR ? half.height : half.width;
+	const column = boxes.filter((b) => {
+		const lo = (isLR ? b.x : b.y) - padMain;
+		const size = (isLR ? b.width : b.height) + padMain * 2;
+		return main >= lo && main <= lo + size;
+	});
+	if (column.length === 0) return 0;
+	const walk = (sign) => {
+		let at = base;
+		for (let crossed = 0; crossed <= INSERT_MAX_CARDS_CROSSED; crossed += 1) {
+			const hit = column.find((b) => {
+				const lo = (isLR ? b.y : b.x) - padCross;
+				const size = (isLR ? b.height : b.width) + padCross * 2;
+				return at >= lo && at <= lo + size;
+			});
+			if (!hit) return at - base;
+			if (crossed === INSERT_MAX_CARDS_CROSSED) return null;
+			const lo = isLR ? hit.y : hit.x;
+			const size = isLR ? hit.height : hit.width;
+			at = sign > 0 ? lo + size + padCross + INSERT_CLEARANCE : lo - padCross - INSERT_CLEARANCE;
+		}
+		return null;
+	};
+	const up = walk(-1);
+	const down = walk(1);
+	if (up === null && down === null) return null;
+	if (up === null) return down;
+	if (down === null) return up;
+	return Math.abs(up) <= Math.abs(down) ? up : down;
+}
+//#endregion
+//#region src/workflows/node-output.tsx
+/** Failure text, in the semantic danger token — which carries a light AND a dark
+*  value. A palette shade (`text-red-400`) only ever reads well in one theme. */
+const ERROR_TEXT = { color: "var(--surface-danger-text)" };
+/** Max key/value pairs a shallow-object output renders before it reports
+*  `truncated` — the card only has room for a couple rows anyway. */
+const MAX_JSON_ENTRIES = 6;
+/**
+* A line that is pure structure — a code fence (with or without a language tag), a
+* table's rule row, a thematic break — and so carries no words to keep.
+*
+* Every test is a SINGLE quantified character class: unambiguous, and linear in the
+* length of the line. Written as one pattern (`[\s|:-]+\|[\s|:-]*`) the two
+* quantifiers would compete for the same `|`, which is the shape that backtracks.
+* Recognize the charset in one pass instead, then ask the cheap questions — is
+* there a pipe? a dash? — with plain string checks.
+*/
+function isStructureOnly(line) {
+	if (/^(```|~~~)/.test(line)) return true;
+	const isBreak = /^([-*_])\1{2,}$/.test(line);
+	if (/^[\s|:-]+$/.test(line) && line.includes("|")) return line.includes("-");
+	return isBreak;
+}
+/**
+* Flatten an agent's markdown answer into the sentence a person would read out
+* of it. On a two-line card preview the syntax IS the noise: a `## Heading` mid
+* paragraph, a `**bold**` run and a bullet's `-` all survive the clamp while the
+* words that carry the meaning get pushed past it. Stripping the markup (never
+* the words) is what turns the preview back into prose — the full text, markup
+* and all, is still rendered by the node's detail view.
+*
+* Structure-only lines (a fence, a table rule) are dropped; everything else keeps
+* its text and is joined into one flowing line.
+*/
+function condenseText(text) {
+	const isListItem = (line) => /^\s*([-*+]\s|\d+[.)]\s)/.test(line);
+	return text.split("\n").map((line) => ({
+		item: isListItem(line),
+		text: line.replace(/^\s{0,3}#{1,6}\s+/, "").replace(/^\s{0,3}>\s?/, "").replace(/^\s*[-*+]\s+(\[[ xX]\]\s+)?/, "").replace(/^\s*\d+[.)]\s+/, "").trim()
+	})).filter(({ text: line }) => line !== "" && !isStructureOnly(line)).map(({ item, text: line }, i) => i > 0 && item ? `· ${line}` : line).join(" ").replace(/(?<=^|\s)(\*\*|~~)(?!\s)(.+?)(?<!\s)\1(?=[\s.,:;!?)\]}"']|$)/g, "$2").replace(/(?<![\w*])\*(?!\s)([^*]+?)(?<!\s)\*(?![\w*])/g, "$1").replace(/`([^`]+)`/g, "$1").replace(/!?\[([^\]]*)\]\([^)]*\)/g, "$1").replace(/\s+/g, " ").trim();
+}
+/** A single JSON value as a compact one-line string for the key/value render.
+*  Scalars render verbatim; a nested object/array collapses to a shape marker so
+*  one row never balloons into a wall of text. */
+function scalar(value) {
+	if (value === null) return "null";
+	if (typeof value === "string") return value;
+	if (typeof value === "number" || typeof value === "boolean") return String(value);
+	if (Array.isArray(value)) return `[${value.length} item${value.length === 1 ? "" : "s"}]`;
+	if (typeof value === "object") return "{…}";
+	return "";
+}
+/**
+* Recover the shape of an output preview string. Only text that *begins* like
+* JSON (`{`/`[`) is parse-attempted, so ordinary prose starting with a brace-free
+* sentence is never mis-parsed. A begins-like-JSON string that fails to parse
+* (the host clamped it mid-value) still renders as `code`, not prose, so it keeps
+* its monospace/data affordance.
+*
+* `condenseMarkdown` says the prose IS markdown and may be flattened for the
+* preview ({@link condenseText}). It is OFF by default, and the caller must only
+* turn it on for text an agent actually authored as markdown. Applied to anything
+* else it does not merely look wrong — it silently REWRITES the text: a stack
+* trace's `__init__.py` loses its underscores, and a shell glob `src/**` pairs
+* with a later `**` and both vanish. An error message is the one string a person
+* reads to find out what broke; it must reach them exactly as it was thrown.
+*/
+function classifyOutput(preview, condenseMarkdown = false) {
+	let trimmed = preview?.trim() ?? "";
+	trimmed = trimmed.replace(/[\uD800-\uDBFF](?![\uDC00-\uDFFF])/g, "").replace(/(?<![\uD800-\uDBFF])[\uDC00-\uDFFF]/g, "").trimEnd();
+	if (trimmed === "") return { kind: "empty" };
+	if (trimmed.startsWith("{") || trimmed.startsWith("[")) try {
+		const parsed = JSON.parse(trimmed);
+		if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+			const all = Object.entries(parsed);
+			const entries = all.slice(0, MAX_JSON_ENTRIES).map(([k, v]) => [k, scalar(v)]);
+			if (entries.length > 0) return {
+				kind: "json",
+				entries,
+				truncated: all.length > entries.length
+			};
+		}
+		return {
+			kind: "code",
+			text: trimmed
+		};
+	} catch {
+		return {
+			kind: "code",
+			text: trimmed
+		};
+	}
+	if (!condenseMarkdown) return {
+		kind: "text",
+		text: trimmed
+	};
+	const condensed = condenseText(trimmed);
+	return condensed === "" ? { kind: "empty" } : {
+		kind: "text",
+		text: condensed
+	};
+}
+/** Line-clamp utility per row budget, so `code`/`text` shapes honor `rows` the
+*  same way the JSON branch does (rather than always clamping to two). Covers the
+*  full range a card can reserve; an unsupported count falls back to the two-line
+*  clamp, which renders FEWER lines than the caller asked for — so a card whose
+*  reservation outgrows this map shows a short body inside a tall well rather
+*  than erroring. Extend the map when a design reserves more.
+*  Class names are literal so the Tailwind scanner emits each utility. */
+const CLAMP_BY_ROWS = {
+	1: "truncate",
+	2: "line-clamp-2",
+	3: "line-clamp-3",
+	4: "line-clamp-4",
+	5: "line-clamp-5",
+	6: "line-clamp-6"
+};
+/**
+* Render a classified output preview's CONTENT (no surrounding frame — each node
+* design supplies its own container/label). `rows` caps the visible lines so the
+* body stays within a card's reserved output space; `tone="error"` colors it for
+* a failure message.
+*
+* `rows="none"` renders the body UNCLAMPED, for a container that scrolls or is
+* sized by its content — a drawer, a detail panel, a selection overlay. It is a
+* word rather than a large number because there is no number that means "do not
+* clamp": a count outside {@link CLAMP_BY_ROWS} falls back to two lines, so
+* `rows={99}` asks for everything and silently shows the least.
+*/
+function NodeOutputBody({ shape, rows = 2, tone = "default" }) {
+	const unclamped = rows === "none";
+	const clampClass = unclamped ? "" : CLAMP_BY_ROWS[rows] ?? "line-clamp-2";
+	const codeWrap = rows === 1 ? "" : "whitespace-pre-wrap break-all";
+	if (shape.kind === "empty") return null;
+	if (shape.kind === "json") {
+		const overflow = unclamped ? shape.truncated : shape.truncated || shape.entries.length > rows;
+		const visible = unclamped ? shape.entries : shape.entries.slice(0, overflow ? Math.max(0, rows - 1) : rows);
+		const isError = tone === "error";
+		const keyStyle = isError ? ERROR_TEXT : void 0;
+		const keyClass = isError ? "" : "text-muted-foreground";
+		const valueClass = isError ? "" : "text-foreground";
+		return /* @__PURE__ */ jsxs("dl", {
+			className: "space-y-0.5 font-mono text-[10.5px] leading-snug",
+			children: [visible.map(([key, value]) => /* @__PURE__ */ jsxs("div", {
+				className: "flex gap-1.5",
+				children: [/* @__PURE__ */ jsx("dt", {
+					className: `max-w-[45%] shrink-0 truncate ${keyClass}`,
+					style: keyStyle,
+					title: key,
+					children: key
+				}), /* @__PURE__ */ jsx("dd", {
+					className: `min-w-0 flex-1 truncate ${valueClass}`,
+					style: isError ? ERROR_TEXT : void 0,
+					title: value,
+					children: value
+				})]
+			}, key)), overflow && /* @__PURE__ */ jsx("div", {
+				className: `text-[10px] ${keyClass}`,
+				style: keyStyle,
+				children: "…"
+			})]
+		});
+	}
+	if (shape.kind === "code") return /* @__PURE__ */ jsx("pre", {
+		className: `${clampClass} ${codeWrap} font-mono text-[10.5px] leading-snug ${tone === "error" ? "" : "text-foreground"}`,
+		style: tone === "error" ? ERROR_TEXT : void 0,
+		title: shape.text,
+		children: shape.text
+	});
+	return /* @__PURE__ */ jsx("p", {
+		className: `${clampClass} text-[11px] leading-snug ${tone === "error" ? "" : "text-foreground"}`,
+		style: tone === "error" ? ERROR_TEXT : void 0,
+		title: shape.text,
+		children: shape.text
+	});
+}
+//#endregion
+//#region src/workflows/node-ui.tsx
+/**
+* Shared presentational atoms for a workflow graph node — the type glyph, the
+* status color/label/badge maps, and the edge coloring. One source of truth so
+* the node card and the edges that point at it read as one system.
+*
+* Colors resolve to the SEMANTIC surface tokens (`--surface-success-text`,
+* `--surface-danger-text`, …), which carry a light AND a dark value tuned for
+* contrast against the card. A literal palette hex (`#22c55e`) or a stock
+* Tailwind shade (`text-red-400`) carries ONE value, so it can only ever hold its
+* contrast in one of the two themes — never use one for a status color.
+*
+* Inline `style` colors here use the RAW brand tokens (`hsl(var(--primary))`,
+* `var(--surface-…)`) — NOT the `--color-*` @theme aliases, which are undefined
+* in a consumer that only imports `tokens.css` (e.g. platform-web), where a
+* `var(--color-*)` would silently resolve to nothing. See the edge-color test.
+*/
+/** Track color behind a progress bar — a faint wash of the muted token. */
+const MUTED_TRACK = "color-mix(in srgb, hsl(var(--muted-foreground)) 22%, transparent)";
+const TONE_ACCENT = {
+	trigger: "hsl(var(--primary))",
+	structural: "var(--surface-warning-text)",
+	action: "hsl(var(--muted-foreground))"
+};
+const STATUS_QUEUED = "hsl(var(--muted-foreground))";
+const STATUS_COLOR = {
+	queued: STATUS_QUEUED,
+	running: "hsl(var(--primary))",
+	waiting: "var(--surface-warning-text)",
+	succeeded: "var(--surface-success-text)",
+	failed: "var(--surface-danger-text)"
+};
+/** An edge is colored by the status of the node it points AT, so the run's
+*  "front" lights up. Neutral for a not-yet-reached (queued) target or the
+*  static definition view (`undefined`). */
+function edgeColor(status) {
+	return status ? STATUS_COLOR[status] : STATUS_QUEUED;
+}
+const STATUS_LABEL = {
+	queued: "Queued",
+	running: "Running",
+	waiting: "Waiting on you",
+	succeeded: "Done",
+	failed: "Failed"
+};
+/** Status pill styling — a tinted well in the status color. Built from the
+*  semantic surface trio (bg/border/text) so the pill keeps its contrast in both
+*  themes rather than washing out in one of them. */
+const STATUS_PILL = {
+	queued: {
+		background: "color-mix(in srgb, hsl(var(--muted-foreground)) 12%, transparent)",
+		color: "hsl(var(--muted-foreground))",
+		borderColor: "color-mix(in srgb, hsl(var(--muted-foreground)) 28%, transparent)"
+	},
+	running: {
+		background: "color-mix(in srgb, hsl(var(--primary)) 14%, transparent)",
+		color: "hsl(var(--primary))",
+		borderColor: "color-mix(in srgb, hsl(var(--primary)) 40%, transparent)"
+	},
+	waiting: {
+		background: "var(--surface-warning-bg)",
+		color: "var(--surface-warning-text)",
+		borderColor: "var(--surface-warning-border)"
+	},
+	succeeded: {
+		background: "var(--surface-success-bg)",
+		color: "var(--surface-success-text)",
+		borderColor: "var(--surface-success-border)"
+	},
+	failed: {
+		background: "var(--surface-danger-bg)",
+		color: "var(--surface-danger-text)",
+		borderColor: "var(--surface-danger-border)"
+	}
+};
+/** The card's border + ring once a node has live run state, so the running node
+*  and the terminal ones read at a glance. Returned as inline style (not classes)
+*  because the status colors are semantic tokens, not palette shades. */
+function statusBorder(status) {
+	const color = STATUS_COLOR[status];
+	switch (status) {
+		case "running":
+		case "waiting": return {
+			borderColor: color,
+			boxShadow: `0 0 0 1px color-mix(in srgb, ${color} 45%, transparent), 0 0 24px -6px ${color}`
+		};
+		case "queued": return { borderColor: "hsl(var(--border))" };
+		default: return {
+			borderColor: color,
+			boxShadow: `0 0 0 1px color-mix(in srgb, ${color} 35%, transparent)`
+		};
+	}
+}
+/** Determinate progress fraction for a node's status: queued reads near-empty,
+*  running and waiting a partial (the run reached this node but has not finished
+*  it), terminal full. Shared so every progress treatment (bar, footer, fill) maps
+*  status → fill identically. A `waiting` bar is deliberately NOT animated by its
+*  callers: the run is stopped there, and a moving bar would say otherwise. */
+function progressFill(status) {
+	return status === "succeeded" || status === "failed" ? "100%" : status === "running" || status === "waiting" ? "58%" : "6%";
+}
+const KIND_ICON = {
+	schedule: Clock,
+	provider_event: Webhook,
+	webhook: Webhook,
+	trigger: Zap,
+	"agent.run": Sparkles,
+	"integration.invoke": Cable,
+	notify: Bell,
+	parallel: GitBranch,
+	foreach: Repeat,
+	decision: UserCheck,
+	"sandbox.spawn": Box,
+	"sandbox.snapshot": Camera,
+	"script.run": Code,
+	"trace.analyze": ScanSearch
+};
+/** An authoring problem's colours — the same semantic surface trio the run
+*  statuses use, so a broken step and a failed one are recognisably the same
+*  family of "something is wrong here" without being the same signal. */
+const PROBLEM_SURFACE_BY_SEVERITY = {
+	error: {
+		background: "var(--surface-danger-bg)",
+		color: "var(--surface-danger-text)",
+		borderColor: "var(--surface-danger-border)"
+	},
+	warning: {
+		background: "var(--surface-warning-bg)",
+		color: "var(--surface-warning-text)",
+		borderColor: "var(--surface-warning-border)"
+	}
+};
+/**
+* The colours a severity is drawn in. A lookup rather than the table itself, so
+* a severity this library has no entry for cannot throw its way out of a render
+* — the same resilience `problemSentence` and `worstSeverity` already give it,
+* and for the same reason: the package is consumed from JavaScript, and one
+* malformed problem must not take the canvas down. An unrecognised severity is
+* drawn as an error, matching how it is named and ranked.
+*/
+function problemSurface(severity) {
+	return PROBLEM_SURFACE_BY_SEVERITY[severity] ?? PROBLEM_SURFACE_BY_SEVERITY.error;
+}
+/** A node's border once it carries an authoring problem. Applied only where the
+*  node has no RUN status to state — a run's border is the more urgent reading
+*  of the same edge of the same box, and a definition being edited has no run. */
+function problemBorder(severity) {
+	const color = problemSurface(severity).color;
+	return {
+		borderColor: color,
+		boxShadow: `0 0 0 1px color-mix(in srgb, ${color} 35%, transparent)`
+	};
+}
+/** How each severity is named where a colour cannot be seen. */
+const SEVERITY_WORD = {
+	error: "Error",
+	warning: "Warning"
+};
+/**
+* One problem as a reader receives it: WHICH KIND it is, then what it says.
+*
+* The kind has to be in the words. A mark shows one aggregate severity — as a
+* colour and a glyph, neither of which a screen reader receives — so an anchor
+* carrying an error and a warning together would otherwise offer no way to tell
+* which of the two is the one blocking the compile.
+*
+* NEWLINES are the only thing rewritten: each line is trimmed and the lines are
+* run together, so a multi-line host message cannot break the one-problem-per-
+* line reading below. Everything else survives — including internal spacing and
+* the trailing punctuation a diagnostic may be ABOUT ("unexpected ;") — because
+* the canvas has to say what the host's own problem list says. Separators are
+* handled at the join instead ({@link joinSentences}).
+*
+* A problem with no message at all is named by its severity alone, rather than
+* by a colon with nothing after it: nothing in {@link WfProblem} requires the
+* text to be non-empty, and "this step has an error" is still worth saying.
+*/
+function problemSentence(problem) {
+	const message = (typeof problem.message === "string" ? problem.message : "").split("\n").map((line) => line.trim()).filter(Boolean).join(" ");
+	const word = SEVERITY_WORD[problem.severity] ?? SEVERITY_WORD.error;
+	return message ? `${word}: ${message}` : word;
+}
+/** Run sentences together for a listener, adding a full stop only where the text
+*  does not already end in one — so "Why?" is followed by a space rather than
+*  "Why?.", and a message ending in a semicolon keeps it. Empty in, empty out:
+*  `reduce` with no seed throws on an empty list, and this is reachable from any
+*  caller holding an empty problem set. */
+function joinSentences(parts) {
+	return parts.reduce((joined, part) => joined ? `${joined}${/[.!?;,]$/.test(joined) ? "" : "."} ${part}` : part, "");
+}
+/** Every problem on one anchor, as the tooltip text a marker hangs on. One per
+*  line, so a step with three faults lists three rather than concatenating them
+*  into a sentence nobody can parse. */
+function problemTitle(problems) {
+	return problems.map(problemSentence).join("\n");
+}
+/**
+* Every message on one anchor, as the text a reader who cannot hover receives.
+* The visible mark has room for a glyph and a count, so the messages themselves
+* would otherwise live only in a `title` — which a pointer opens and a keyboard,
+* a screen reader and a touch device do not. Rendering them visually hidden puts
+* the same words in the accessibility tree, where they become the mark's own
+* accessible name.
+*/
+function ProblemMessages({ problems }) {
+	if (problems.length === 0) return null;
+	return /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		children: problems.length === 1 ? problemSentence(problems[0]) : `${problems.length} problems. ${joinSentences(problems.map(problemSentence))}`
+	});
+}
+/**
+* The mark a node wears when the draft it is drawn from has a problem on it: a
+* warning glyph, with a count once there is more than one. It is a READOUT, not
+* a control — the node's own click already opens whatever the host shows for it,
+* and a second target inside the card would compete with that.
+*
+* It carries every message twice over: on `title`, where a pointer finds it, and
+* as visually hidden text, which is what the accessibility tree reads. That is
+* what makes the mark worth more than the border tint — the canvas says WHICH
+* step is broken at a glance and WHY without a trip to the problem list, however
+* the reader is driving it.
+*/
+function ProblemMarker({ problems, className = "" }) {
+	const severity = worstSeverity(problems) ?? "error";
+	return /* @__PURE__ */ jsxs("span", {
+		"data-testid": "wf-node-problem",
+		"data-severity": severity,
+		className: `flex shrink-0 items-center gap-0.5 rounded-full border px-1 py-[1px] font-medium text-[10px] leading-none ${className}`,
+		style: problemSurface(severity),
+		children: [/* @__PURE__ */ jsxs("span", {
+			"aria-hidden": true,
+			className: "flex items-center gap-0.5",
+			title: problemTitle(problems),
+			children: [/* @__PURE__ */ jsx(AlertTriangle, { size: 9 }), problems.length > 1 && /* @__PURE__ */ jsx("span", { children: problems.length })]
+		}), /* @__PURE__ */ jsx(ProblemMessages, { problems })]
+	});
+}
+/** The status pill in a card's header — the one place the run state is spelled
+*  out in words. */
+function StatusPill({ status }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "shrink-0 whitespace-nowrap rounded-full border px-2 py-[1px] font-medium text-[10px]",
+		style: STATUS_PILL[status],
+		children: STATUS_LABEL[status]
+	});
+}
+/**
+* The run status FOOTER: a progress bar (queued = near-empty, running = pulsing
+* partial, terminal = full) over a caption row. Pinned to the card's BOTTOM via
+* `mt-auto` so it lands at the same place on every node regardless of how much
+* content sits above it — unlike an inline strip, whose height drifts. The
+* caption reads agent rounds on the left and elapsed on the right; status itself
+* is carried by the bar color + the header pill, so it is NOT restated here. The
+* caption row always renders (even when empty) so the footer band keeps a
+* constant height across nodes.
+*/
+function StatusFooter({ status, rounds, cost, tokens, elapsed }) {
+	const caption = [
+		rounds !== void 0 ? `${rounds} round${rounds === 1 ? "" : "s"}` : void 0,
+		cost,
+		tokens
+	].filter(Boolean).join(" · ");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "wf-node-body-in mt-auto border-border border-t",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "h-1 w-full overflow-hidden",
+			style: { background: MUTED_TRACK },
+			children: /* @__PURE__ */ jsx("div", {
+				"data-testid": "wf-node-progress",
+				className: `h-full ${status === "running" ? "animate-pulse" : ""}`,
+				...status === "running" ? { "data-motion": "essential" } : {},
+				style: {
+					width: progressFill(status),
+					background: STATUS_COLOR[status]
+				}
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-2 px-3.5 py-1 text-[10px] text-muted-foreground leading-[15px]",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "min-h-[15px] truncate tabular-nums",
+				children: caption
+			}), /* @__PURE__ */ jsx("span", {
+				className: "min-h-[15px] shrink-0 tabular-nums",
+				children: elapsed ?? ""
+			})]
+		})]
+	});
+}
+/**
+* What an expanded card says where its output WOULD be, when it has none. The
+* card is sized for the output it may yet have (the layout is computed once,
+* before any run state, so it can never reflow mid-run) — leaving that space
+* blank reads as a broken card rather than as a step with nothing to report. A
+* running node is the exception: its output may still be on its way, so it waits
+* quietly rather than claiming there is none.
+*/
+function emptySlotLabel(status) {
+	switch (status) {
+		case "queued": return "Not run yet";
+		case "succeeded": return "No output";
+		case "failed": return "No error reported";
+		default: return;
+	}
+}
+/**
+* A node's MARK, centered in a tile the caller sizes: the provider's brand logo
+* when the step runs against a connector — the way n8n makes a node recognizable
+* before a word of it is read — else the kind's glyph, tinted by tone. Both
+* densities render the same mark at different sizes, so a node looks like itself
+* whether it's an icon tile or a full card.
+*/
+function NodeMark({ kind, provider, model, accent, tile }) {
+	const Icon = kind && KIND_ICON[kind] || Circle;
+	const brand = !provider && model ? modelBrandFor(model) : null;
+	const mark = Math.round(tile * (provider ? .58 : .5));
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "flex shrink-0 items-center justify-center overflow-hidden rounded-lg border border-border",
+		style: {
+			width: tile,
+			height: tile,
+			background: `color-mix(in srgb, ${accent} 10%, hsl(var(--card)))`
+		},
+		children: provider ? /* @__PURE__ */ jsx(ProviderIcon, {
+			id: provider,
+			displayName: providerLabel(provider),
+			size: mark,
+			className: "rounded-[3px]"
+		}) : brand ? /* @__PURE__ */ jsx(ModelBrandStack, {
+			identity: brand,
+			size: brand.combined || tile >= 38 ? "md" : "sm"
+		}) : /* @__PURE__ */ jsx(Icon, {
+			size: mark,
+			strokeWidth: 1.75,
+			style: { color: accent }
+		})
+	});
+}
+//#endregion
+//#region src/workflows/WorkflowGraph.tsx
+/**
+* n8n-style node-graph view of a workflow, rendered from its YAML definition.
+* Used full-size on the workflow detail page and as a compact, non-interactive
+* preview on assistant proposal cards. Both share one graph model + node
+* component; only interactivity and sizing differ by `variant`.
+*/
+/**
+* How much of the canvas a fit leaves as margin.
+*
+* A PIXEL gutter, not a fraction. Padding exists to keep the graph out from
+* under the two overlays — the toolbar at top-left and the zoom controls at
+* bottom-right — and those are a fixed size whatever the canvas is. Expressed
+* as the old scale factor (0.16, i.e. fit into 1/1.16 of the frame) it instead
+* grew with the panel, so the bigger the canvas the more of it a fit refused to
+* use: measured on a 15-node pipeline in an 854×480 panel, a fit reached only
+* 91% of the zoom that would still have fitted, and every pixel of that gap is
+* legibility given away on exactly the graphs that need it most.
+*
+* 12px, because the gutter is breathing room and nothing more. The two overlays
+* sit in OPPOSITE corners (toolbar top-left, zoom controls bottom-right) and are
+* translucent chrome the canvas is expected to run under — reserving a band wide
+* enough to clear them on all four sides would cost more zoom than the old
+* scale factor did, on the short axis where a wide pipeline is already tightest.
+*/
+const FIT_VIEW = { padding: "12px" };
+/**
+* Zoom CEILING for a fit at the given density. Full cards at 1 are already
+* their designed size — zooming a two-node graph past that just blows the cards
+* up to fill the canvas. Compact tiles are small BY DESIGN, so fitting them
+* into the same canvas legitimately zooms past 1; capping them there strands a
+* short compact graph as specks in empty space.
+*/
+function fitZoomCeiling(compact) {
+	return compact ? 1.5 : 1;
+}
+/**
+* Zoom FLOOR for a fit at the given density — the point below which the graph
+* stops shrinking to fit and becomes pannable instead.
+*
+* It depends on density for the same reason the ceiling does, because what a
+* floor BUYS depends on what the node is made of. A compact node is a logo: at
+* 0.55 the tile is still 42px and every step is recognisable at a glance, so
+* refusing to shrink past it keeps the graph worth looking at. An expanded card
+* is made of TEXT, and its text stops being readable around 0.75 — well before
+* any zoom that would fit a real pipeline. Holding those cards at the compact
+* floor therefore buys nothing legible and costs the right-hand column, which
+* gets sliced by the canvas edge. Letting them shrink shows the whole shape
+* instead, and reading one card is a click (or a zoom) away either way.
+*/
+function fitZoomFloor(compact) {
+	return compact ? .55 : .35;
+}
+/**
+* The rectangle the LAID-OUT nodes occupy, in flow coordinates.
+*
+* Read straight off the layouter's own position + size rather than through
+* React Flow's `getNodesBounds`. Both of that helper's forms prefer a node's
+* MEASURED box — the standalone one falls back to it, and the `useReactFlow`
+* one resolves every node through the store's `nodeLookup`, which holds nothing
+* else — and measurement (a ResizeObserver) lags a relayout by a frame or more.
+* Framing a fresh layout through either therefore frames the PREVIOUS layout's
+* sizes as often as the new one, which is the same race that keeps `fitView`
+* out of the reframe below. Every structural node carries an explicit
+* width/height, and for exactly this layout that is the authority, so there is
+* nothing to measure and no lookup to consult.
+*/
+function layoutBounds(nodes) {
+	if (nodes.length === 0) return {
+		x: 0,
+		y: 0,
+		width: 0,
+		height: 0
+	};
+	let minX = Number.POSITIVE_INFINITY;
+	let minY = Number.POSITIVE_INFINITY;
+	let maxX = Number.NEGATIVE_INFINITY;
+	let maxY = Number.NEGATIVE_INFINITY;
+	for (const node of nodes) {
+		minX = Math.min(minX, node.position.x);
+		minY = Math.min(minY, node.position.y);
+		maxX = Math.max(maxX, node.position.x + (node.width ?? 0));
+		maxY = Math.max(maxY, node.position.y + (node.height ?? 0));
+	}
+	return {
+		x: minX,
+		y: minY,
+		width: maxX - minX,
+		height: maxY - minY
+	};
+}
+/**
+* The camera that frames `bounds` inside a `width`×`height` canvas.
+*
+* Whenever the zoom FLOOR clamps the fit (see FIT_VIEW), the graph is
+* deliberately larger than the canvas — it is meant to be panned. React Flow
+* CENTERS what it cannot fit, which splits the overflow across both ends at
+* once: the trigger leaves the leading edge at the same moment the last step
+* leaves the trailing one, so the reader sees neither terminus and has nothing
+* to say which way the graph continues. Anchoring the leading edge instead puts
+* the entry point on screen and leaves every hidden step in ONE direction — the
+* direction the graph already reads in — so what is off-canvas is where panning
+* naturally goes.
+*
+* The anchor is the canvas edge, not the padding inset: padding is slack, and a
+* clamped fit is the case where there is none to give. It is also expressed as
+* a clamp rather than a branch on "does it fit" — a fit the floor did NOT clamp
+* 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);
+	/** 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 {
+		zoom: fit.zoom,
+		x: anchored(fit.x, bounds.x),
+		y: anchored(fit.y, bounds.y)
+	};
+}
+/**
+* When the RENDERED density flips inside the layout tween, as a fraction of
+* LAYOUT_TRANSITION_MS. The box morphs first and the incoming content fades in
+* mid-motion (see `.wf-node-body-in`) — flipping while everything is already
+* moving is what keeps the swap from reading as a pop. Direction matters: the
+* two densities' shells are closest in size near the COMPACT geometry, so
+* growing (→ expanded) flips just after the box starts to grow, and shrinking
+* (→ compact) flips once the card has nearly collapsed.
+*/
+const DENSITY_FLIP_AT = {
+	grow: .12,
+	shrink: .75
+};
+/** Motion is opt-OUT, so it is only used where the reader's preference can be
+*  read and says nothing against it. Somewhere without `matchMedia` cannot say
+*  a reader tolerates movement, so it gets none. */
+function motionAllowed() {
+	return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === false;
+}
+const lerp = (a, b, t) => a + (b - a) * t;
+/** The layout tween's easing — gentle into and out of the motion, so neither
+*  end of the morph reads as a snap. */
+const easeInOutCubic = (t) => t < .5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
+/** Tracks the app's dark/light class so React Flow's chrome (edges, controls,
+*  background) themes with the rest of the app. */
+function useColorMode() {
+	const [mode, setMode] = useState(() => typeof document !== "undefined" && document.documentElement.classList.contains("dark") ? "dark" : "light");
+	useEffect(() => {
+		const el = document.documentElement;
+		const update = () => setMode(el.classList.contains("dark") ? "dark" : "light");
+		update();
+		const observer = new MutationObserver(update);
+		observer.observe(el, {
+			attributes: true,
+			attributeFilter: ["class"]
+		});
+		return () => observer.disconnect();
+	}, []);
+	return mode;
+}
+/** Flow direction for the current graph, so the node component can place its
+*  edge handles on the correct sides (edges enter the leading edge and leave the
+*  trailing edge) without threading a prop through React Flow's node renderer. */
+const DirectionContext = createContext("LR");
+/** Compact (collapsed) density for the current graph — read by the node so it
+*  renders the icon-tile summary instead of the full card. Set by the density
+*  toggle (and forced on for the proposal-card preview). */
+const DensityContext = createContext(false);
+/**
+* The node the HOST considers selected, if any. Carried by context rather than
+* merged into node data because selection is not a property of the workflow:
+* writing it into `data` would rebuild the node objects on every selection
+* change, which is the one thing the run-state merge works hard to avoid.
+*/
+const SelectedNodeContext = createContext(void 0);
+/**
+* Whether the GRAPH is showing a run — read by the node so its card matches what
+* the layout reserved for it.
+*
+* `nodeHeight` reserves the run bands for every action the moment the graph has
+* any run state, because the layout is computed once and cannot revisit the
+* decision. A node the host has no entry for would otherwise render its
+* definition card — identity and nothing else — inside a box sized for a run,
+* leaving over a hundred pixels of void under it. A run's graph is in run mode
+* for all of its nodes, or none.
+*/
+const RunModeContext = createContext(false);
+/** The selected node's ring. An `outline` rather than a border or a box-shadow
+*  because both of those are already spoken for — the border carries tone and
+*  run status, the shadow carries the running/waiting glow — and an outline
+*  composes with both without disturbing the laid-out box. */
+const SELECTION_OUTLINE = {
+	outline: "2px solid hsl(var(--primary))",
+	outlineOffset: 2
+};
+/** Whether the canvas is currently an EDITOR — read by the node so its
+*  connection handles become visible targets rather than the invisible anchors
+*  a read-only diagram wants. A handle you cannot see is a handle you cannot
+*  find, and dragging one is the whole gesture. */
+const ConnectableContext = createContext(false);
+/**
+* The AUTHORING problems anchored to each node, keyed by node id — read by the
+* node so its card can say it is the broken one.
+*
+* Delivered as CONTEXT rather than merged onto node data, unlike run state,
+* because the two arrive on different clocks. Run state ticks against a fixed
+* definition, so merging it into `data` costs nothing; a problem list changes
+* with the DRAFT, and merging it would put the problems into the memo the
+* layout is keyed on — relaying out the whole canvas on every keystroke of an
+* invalid draft.
+*/
+const NodeProblemsContext = createContext(/* @__PURE__ */ new Map());
+/** Removing the trigger this node stands for, when the host offers it. Null ⇒
+*  no control is drawn. A trigger is the one node with a delete gesture on the
+*  canvas: every other node is a `do` entry, whose removal is a list edit (see
+*  `deletable: false` in flow-graph.ts), while an `on:` entry has no list of its
+*  own to be edited in. */
+const TriggerDeleteContext = createContext(null);
+/** Inserting a step ON an edge, from the control the edge draws at its midpoint.
+*  Reaches the edge renderer as context because React Flow edge `data` is
+*  serialisable payload, not a place to hang a host callback. */
+const EdgeInsertContext = createContext(null);
+/**
+* Whether an edge is the HOST's to change. Only a declared edge is: a fork edge
+* is fan-out structure derived from a structural action's own config, and an
+* edge out of a trigger is what "nothing points at this node" renders as.
+* Neither appears in anyone's declared topology, so neither can be connected,
+* deleted, or guarded — offering the gesture would invite an edit with nowhere
+* to land.
+*/
+function isEditableEdge(edge) {
+	return edge.data?.kind !== "fork" && triggerNodeIndex(edge.source) === null;
+}
+const HANDLE_CLASS = "!h-2 !w-2 !min-w-0 !border-0 !bg-transparent opacity-0";
+/** On an EDITABLE canvas the handle stops being a hidden anchor and becomes the
+*  thing you drag. Drawn as a small ring in the muted token so it reads as an
+*  affordance without competing with the node's own mark or status border.
+*
+*  `!z-10` is load-bearing, not styling: the handle straddles the node card's
+*  edge, and without it the card paints OVER the handle — every pointer event
+*  lands on the card, so a connection drag can never start. Verified with a
+*  live-browser hit-test (`elementFromPoint` returned the card at every pixel
+*  of the handle; the identical drag landed once the handle was raised).
+*  jsdom cannot catch a stacking regression, which is why the class is pinned
+*  by name in WorkflowNode.test.tsx. */
+const HANDLE_CONNECTABLE_CLASS = "!z-10 !h-2.5 !w-2.5 !min-w-0 !rounded-full !border !border-border !bg-muted-foreground/70 opacity-100 transition-opacity hover:!bg-primary";
+/**
+* Where a compact node's edges attach. The compact BOX spans the icon tile AND
+* its name (so a name can never collide with a neighbour), but the edges belong
+* to the TILE — at the box's default anchors they would leave from the whitespace
+* beside the name. These pin each handle to the tile's own edge midpoint.
+*
+* Every anchor is given as an explicit `left`/`top` with a centering transform,
+* overriding React Flow's per-side defaults (which offset by half the handle and
+* anchor Bottom/Right from the far edge). Restating all four in one coordinate
+* system is what makes the anchor exactly the tile's edge — and not, say, 4px
+* past it, which is what the library's own bottom transform would have done.
+*/
+function compactHandleStyle(position, isLR) {
+	const tileLeft = isLR ? (COMPACT_NODE_SIZE.width - 76) / 2 : 0;
+	const center = 38;
+	const anchor = (left, top) => ({
+		left,
+		top,
+		right: "auto",
+		bottom: "auto",
+		transform: "translate(-50%, -50%)"
+	});
+	switch (position) {
+		case Position.Left: return anchor(tileLeft, center);
+		case Position.Right: return anchor(tileLeft + 76, center);
+		case Position.Top: return anchor(tileLeft + center, 0);
+		default: return anchor(tileLeft + center, 76);
+	}
+}
+function WorkflowNode({ id, data, sourcePosition, targetPosition }) {
+	const d = data;
+	const state = d.state;
+	const direction = useContext(DirectionContext);
+	const compact = useContext(DensityContext);
+	const runMode = useContext(RunModeContext);
+	const connectable = useContext(ConnectableContext);
+	const hostSelection = useContext(SelectedNodeContext);
+	const problems = useContext(NodeProblemsContext).get(id);
+	const problemSeverity = worstSeverity(problems);
+	const removeTrigger = useContext(TriggerDeleteContext);
+	const isTrigger = triggerNodeIndex(id) !== null;
+	const selected = hostSelection !== void 0 && hostSelection === id;
+	const isLR = direction === "LR";
+	const targetPos = targetPosition ?? (isLR ? Position.Left : Position.Top);
+	const sourcePos = sourcePosition ?? (isLR ? Position.Right : Position.Bottom);
+	const accent = TONE_ACCENT[d.tone];
+	const isAgent = d.kind === "agent.run";
+	const subtitle = isAgent && state?.model ? shortModel(state.model) : d.subtitle;
+	const markModel = isAgent && state?.model ? state.model : d.model;
+	const runBands = runMode && d.tone !== "trigger";
+	const runStatus = runBands ? state?.status ?? "queued" : state?.status;
+	const duration = fmtDuration(state?.durationMs);
+	const cost = fmtCost(state?.costUsd);
+	const tokens = isAgent ? fmtTokens(state?.inputTokens, state?.outputTokens) : void 0;
+	const runOutput = (() => {
+		const source = state?.status === "failed" && state.error ? {
+			text: state.error,
+			tone: "error",
+			label: "Error"
+		} : state && state.status !== "failed" && state.outputPreview ? {
+			text: state.outputPreview,
+			tone: "default",
+			label: "Output"
+		} : null;
+		if (!source) return null;
+		const trimmed = source.text.trim();
+		if (!trimmed) return null;
+		const shape = classifyOutput(clampPreview(trimmed, 240), isAgent && source.tone !== "error");
+		return shape.kind === "empty" ? null : {
+			shape,
+			tone: source.tone,
+			label: source.label
+		};
+	})();
+	/**
+	* Remove this trigger. Two escapes, because the control sits INSIDE a node and
+	* both of the node's own gestures would otherwise fire with it: `nodrag nopan`
+	* is React Flow's own opt-out, so pressing the button never starts a node drag
+	* or a canvas pan, and the click is stopped from bubbling to the wrapper that
+	* carries `onNodeClick` — removing a trigger must not also open it.
+	*/
+	const triggerDeleteButton = isTrigger && removeTrigger ? /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-testid": "wf-trigger-delete",
+		title: "Remove this trigger",
+		"aria-label": "Remove this trigger",
+		className: "nodrag nopan -m-1 flex h-6 w-6 shrink-0 items-center justify-center p-1 text-muted-foreground transition hover:text-[var(--surface-danger-text)]",
+		onClick: (event) => {
+			event.stopPropagation();
+			removeTrigger(id);
+		},
+		children: /* @__PURE__ */ jsx("span", {
+			className: "flex h-4 w-4 items-center justify-center rounded-full border border-border bg-card shadow-sm",
+			children: /* @__PURE__ */ jsx(X, {
+				size: 10,
+				"aria-hidden": true
+			})
+		})
+	}) : null;
+	const handleClass = connectable ? HANDLE_CONNECTABLE_CLASS : HANDLE_CLASS;
+	const handles = /* @__PURE__ */ jsxs(Fragment, { children: [!d.isRoot && /* @__PURE__ */ jsx(Handle, {
+		type: "target",
+		position: targetPos,
+		className: handleClass,
+		style: compact ? compactHandleStyle(targetPos, isLR) : void 0
+	}), /* @__PURE__ */ jsx(Handle, {
+		type: "source",
+		position: sourcePos,
+		className: handleClass,
+		style: compact ? compactHandleStyle(sourcePos, isLR) : void 0
+	})] });
+	if (compact) return /* @__PURE__ */ jsxs("div", {
+		className: `relative flex h-full w-full ${isLR ? "flex-col items-center" : "flex-row items-center"}`,
+		children: [
+			handles,
+			/* @__PURE__ */ jsxs("span", {
+				"data-testid": "wf-node-card",
+				className: "relative flex items-center justify-center rounded-xl border bg-card shadow-sm transition-colors",
+				style: {
+					width: 76,
+					height: 76,
+					...state ? statusBorder(state.status) : problemSeverity ? problemBorder(problemSeverity) : { borderColor: `color-mix(in srgb, ${accent} 40%, hsl(var(--border)))` },
+					...selected ? SELECTION_OUTLINE : {}
+				},
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "wf-node-body-in flex items-center justify-center",
+						children: /* @__PURE__ */ jsx(NodeMark, {
+							kind: d.kind,
+							provider: d.provider,
+							model: markModel,
+							accent,
+							tile: Math.round(47.12)
+						})
+					}),
+					problems && problemSeverity && /* @__PURE__ */ jsx(ProblemMarker, {
+						problems,
+						className: "-left-1.5 -top-1.5 absolute"
+					}),
+					triggerDeleteButton && /* @__PURE__ */ jsx("span", {
+						className: "-right-1.5 -top-1.5 absolute",
+						children: triggerDeleteButton
+					}),
+					d.badge && !state && /* @__PURE__ */ jsx("span", {
+						className: "-right-1.5 -top-1.5 absolute rounded-full border border-border bg-card px-1.5 py-[1px] font-medium text-[10px] text-muted-foreground",
+						children: d.badge
+					}),
+					state && /* @__PURE__ */ jsx("span", {
+						className: `-right-1 -top-1 absolute h-2.5 w-2.5 rounded-full border-2 ${state.status === "running" ? "animate-pulse" : ""}`,
+						...state.status === "running" ? { "data-motion": "essential" } : {},
+						style: {
+							background: STATUS_COLOR[state.status],
+							borderColor: "hsl(var(--card))"
+						},
+						"aria-label": STATUS_LABEL[state.status]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: `wf-node-body-in min-w-0 ${isLR ? "mt-2 w-full px-1 text-center" : "ml-2 flex-1 text-left"}`,
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "truncate font-semibold text-[12px] text-foreground leading-tight",
+						title: d.title,
+						children: d.title
+					}),
+					subtitle && /* @__PURE__ */ jsx("div", {
+						className: "truncate text-[11px] text-muted-foreground leading-tight",
+						title: subtitle,
+						children: subtitle
+					}),
+					(duration || cost) && /* @__PURE__ */ jsx("div", {
+						className: "truncate text-[10px] text-muted-foreground/90 leading-tight tabular-nums",
+						children: [duration, cost].filter(Boolean).join(" · ")
+					})
+				]
+			})
+		]
+	});
+	const cardShell = (children) => /* @__PURE__ */ jsxs("div", {
+		"data-testid": "wf-node-card",
+		className: "relative flex h-full w-full flex-col overflow-hidden rounded-xl border bg-card shadow-sm transition-colors",
+		style: {
+			...runStatus ? statusBorder(runStatus) : problemSeverity ? problemBorder(problemSeverity) : { borderColor: `color-mix(in srgb, ${accent} 40%, hsl(var(--border)))` },
+			...selected ? SELECTION_OUTLINE : {}
+		},
+		children: [handles, children]
+	});
+	const identityRow = /* @__PURE__ */ jsxs("div", {
+		className: "flex shrink-0 items-center gap-2.5",
+		children: [
+			/* @__PURE__ */ jsx(NodeMark, {
+				kind: d.kind,
+				provider: d.provider,
+				model: markModel,
+				accent,
+				tile: 34
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "truncate font-semibold text-[13px] text-foreground leading-tight",
+					title: d.title,
+					children: d.title
+				}), subtitle && /* @__PURE__ */ jsx("div", {
+					className: "truncate text-[11px] text-muted-foreground leading-tight",
+					title: subtitle,
+					children: subtitle
+				})]
+			}),
+			problems && problemSeverity && /* @__PURE__ */ jsx(ProblemMarker, { problems }),
+			runStatus ? /* @__PURE__ */ jsx(StatusPill, { status: runStatus }) : d.badge && /* @__PURE__ */ jsx("span", {
+				className: "shrink-0 rounded-full border border-border bg-surface-container-high px-2 py-[1px] font-medium text-[10px] text-muted-foreground",
+				children: d.badge
+			}),
+			triggerDeleteButton
+		]
+	});
+	const footer = runStatus ? /* @__PURE__ */ jsx(StatusFooter, {
+		status: runStatus,
+		rounds: isAgent ? state?.rounds : void 0,
+		cost,
+		tokens,
+		elapsed: duration
+	}) : null;
+	const descriptionBand = (emphasized) => d.description ? /* @__PURE__ */ jsx("p", {
+		className: `mt-2 line-clamp-2 shrink-0 text-[11px] leading-snug ${emphasized ? "text-foreground" : "text-muted-foreground"}`,
+		title: d.description,
+		children: d.description
+	}) : null;
+	const emptySlot = runStatus && !runOutput && emptySlotLabel(runStatus) ? /* @__PURE__ */ jsx("div", {
+		className: "mt-2 flex flex-1 items-center text-[11px] text-muted-foreground italic",
+		children: emptySlotLabel(runStatus)
+	}) : null;
+	const outputWell = (rows) => runOutput ? /* @__PURE__ */ jsxs("div", {
+		className: "mt-2 min-h-0 grow shrink-0 rounded-lg border border-border bg-surface-container-high/60 px-2 py-1.5",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "mb-1 font-semibold text-[9px] text-muted-foreground uppercase tracking-[0.09em]",
+			children: runOutput.label
+		}), /* @__PURE__ */ jsx(NodeOutputBody, {
+			shape: runOutput.shape,
+			tone: runOutput.tone,
+			rows
+		})]
+	}) : emptySlot;
+	const body = (children, justify = "") => /* @__PURE__ */ jsx("div", {
+		className: `wf-node-body-in flex min-h-0 flex-1 flex-col overflow-hidden px-3.5 pt-2.5 pb-2 ${justify}`,
+		children
+	});
+	if (!runBands) return cardShell(body(/* @__PURE__ */ jsxs(Fragment, { children: [identityRow, descriptionBand(false)] })));
+	if (d.kind === "decision") return cardShell(/* @__PURE__ */ jsxs(Fragment, { children: [body(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "flex shrink-0 items-start gap-2.5",
+		children: [/* @__PURE__ */ jsx(NodeMark, {
+			kind: d.kind,
+			provider: d.provider,
+			model: markModel,
+			accent,
+			tile: 34
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "truncate font-semibold text-[13px] text-foreground leading-tight",
+				title: d.title,
+				children: d.title
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "mt-0.5 flex items-center gap-2",
+				children: [subtitle && /* @__PURE__ */ jsx("span", {
+					className: "truncate text-[11px] text-muted-foreground leading-tight",
+					title: subtitle,
+					children: subtitle
+				}), runStatus && /* @__PURE__ */ jsx("span", {
+					className: "ml-auto shrink-0",
+					children: /* @__PURE__ */ jsx(StatusPill, { status: runStatus })
+				})]
+			})]
+		})]
+	}), runOutput && runStatus === "failed" ? /* @__PURE__ */ jsx("div", {
+		className: "mt-2 min-h-0 shrink-0",
+		children: /* @__PURE__ */ jsx(NodeOutputBody, {
+			shape: runOutput.shape,
+			tone: runOutput.tone,
+			rows: 2
+		})
+	}) : descriptionBand(true)] })), footer] }));
+	if (isStructuralKind(d.kind)) return cardShell(/* @__PURE__ */ jsxs(Fragment, { children: [body(/* @__PURE__ */ jsxs(Fragment, { children: [identityRow, /* @__PURE__ */ jsx("div", {
+		className: "mt-1.5 min-h-0 shrink-0",
+		children: runOutput && /* @__PURE__ */ jsx(NodeOutputBody, {
+			shape: runOutput.shape,
+			tone: runOutput.tone,
+			rows: 1
+		})
+	})] }), "justify-center"), footer] }));
+	if (isAgent) {
+		const strip = [d.title, subtitle].filter(Boolean).join(" · ");
+		return cardShell(/* @__PURE__ */ jsxs(Fragment, { children: [body(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex shrink-0 items-center gap-1.5",
+			children: [
+				/* @__PURE__ */ jsx(NodeMark, {
+					kind: d.kind,
+					provider: d.provider,
+					model: markModel,
+					accent,
+					tile: 18
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "truncate font-medium text-[11px] text-muted-foreground",
+					title: strip,
+					children: strip
+				}),
+				/* @__PURE__ */ jsx("span", { className: "flex-1" }),
+				runStatus && /* @__PURE__ */ jsx(StatusPill, { status: runStatus })
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "mt-2 min-h-0 flex-1 text-foreground leading-snug",
+			children: runOutput ? /* @__PURE__ */ jsx(NodeOutputBody, {
+				shape: runOutput.shape,
+				tone: runOutput.tone,
+				rows: 5
+			}) : runStatus && runStatus !== "succeeded" && runStatus !== "failed" && d.description ? /* @__PURE__ */ jsx("p", {
+				className: "line-clamp-5 text-[11px] text-muted-foreground leading-snug",
+				title: d.description,
+				children: d.description
+			}) : runStatus && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground italic",
+				children: emptySlotLabel(runStatus)
+			})
+		})] })), footer] }));
+	}
+	return cardShell(/* @__PURE__ */ jsxs(Fragment, { children: [body(/* @__PURE__ */ jsxs(Fragment, { children: [identityRow, outputWell(3)] })), footer] }));
+}
+/** Where a connection drag was let go, in viewport coordinates. A touch reports
+*  its position on `changedTouches` — `touches` is empty by the time the last
+*  finger lifts. Null when the event carries no position at all. */
+function releasePoint(event) {
+	if (!event) return null;
+	const source = ("changedTouches" in event ? event.changedTouches[0] : null) ?? ("clientX" in event ? event : null);
+	return source ? {
+		x: source.clientX,
+		y: source.clientY
+	} : null;
+}
+/** The empty canvas itself: React Flow's pane, and the dot grid drawn on it.
+*  Everything else in the graph — a node, an edge, a label, the zoom controls,
+*  the panel — sits ABOVE the pane and is therefore not it. */
+const CANVAS_SURFACE_SELECTOR = ".react-flow__pane, .react-flow__background";
+/**
+* Whether a release at this point landed on THIS graph's empty canvas.
+*
+* Identified POSITIVELY — the element under the pointer must BE the pane — and
+* not by listing what to exclude. A blacklist has to enumerate every layer that
+* can sit over the canvas (nodes, edges, edge labels, the controls, the panel,
+* whatever is added next), and each one it misses turns a release meant for that
+* element into a step nobody asked for. Asking "is this the pane" cannot miss
+* one, and it fails CLOSED: an environment with no hit-testing adds nothing
+* rather than adding something wrong.
+*
+* The pane also has to be OURS. React Flow completes a connection from a
+* document-level pointer-up, so a drag begun in one graph is still live over
+* every other graph on the page — a proposal preview beside an editor, a gallery
+* of them — and a bare "is this a pane" would let a release over a NEIGHBOUR add
+* a step to the draft the drag started in. Containment settles it, and carries
+* the frame check with it: a release off the graph lands on the page rather than
+* on anything this frame holds.
+*/
+function releasedOnCanvas(at, frame) {
+	if (!frame) return false;
+	const under = typeof document === "undefined" ? null : document.elementFromPoint(at.x, at.y);
+	if (!under?.matches(CANVAS_SURFACE_SELECTOR)) return false;
+	return frame.contains(under);
+}
+/**
+* The laid-out node boxes an edge's cluster has to keep clear of, in the same
+* flow coordinates the edge's own label point is expressed in.
+*
+* Taken from the LAYOUT rather than from React Flow's node store. The layout's
+* dimensions are authoritative — the card renders at exactly that box (see
+* `WfNode.height`) — so they need no measurement pass to become true, and they
+* change only when the layout does, which is precisely when a cluster needs to
+* be placed again. Reading the store instead would mean subscribing to a map
+* React Flow mutates in place, whose identity never changes and so never
+* notifies: the clearance would be computed once against unmeasured nodes and
+* then never revisited.
+*/
+const NodeBoxesContext = createContext([]);
+/** 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";
+/**
+* An edge with something to say: a guard summary, a cycle marker, an authoring
+* problem, or the insert control an EDITING canvas draws on it. An edge with
+* none of those stays on React Flow's built-in `smoothstep` renderer and is
+* unaffected by this component's existence.
+*
+* The guard chip is truncated with its full text on `title`: a summary is
+* usually a few words, but it is host-supplied and nothing bounds it, and an
+* unbounded label on an edge overlaps the nodes either side of it.
+*/
+function WfEdgeRenderer({ id, source, target, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, markerEnd, style }) {
+	const insertStep = useContext(EdgeInsertContext);
+	const [path, labelX, labelY] = getSmoothStepPath({
+		sourceX,
+		sourceY,
+		sourcePosition,
+		targetX,
+		targetY,
+		targetPosition
+	});
+	const backEdge = data?.backEdge === true;
+	const whenLabel = data?.whenLabel;
+	const visits = data?.maxNodeVisits;
+	const problems = data?.problems;
+	const problemSeverity = worstSeverity(problems);
+	const offersInsert = data?.insertable === true && insertStep !== null;
+	const nodeBoxes = useContext(NodeBoxesContext);
+	const direction = useContext(DirectionContext);
+	const cleared = offersInsert || problemSeverity ? clearOfNodeBoxes({
+		x: labelX,
+		y: labelY
+	}, nodeBoxes, direction, problemSeverity ? CLUSTER_HALF_SIZE.chip : CLUSTER_HALF_SIZE.control) : 0;
+	const clearance = cleared ?? 0;
+	const stealsPointer = cleared === null;
+	const isLR = direction === "LR";
+	const clusterX = labelX + (isLR ? 0 : clearance);
+	const clusterY = labelY + (isLR ? clearance : 0);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(BaseEdge, {
+		id,
+		path,
+		markerEnd,
+		style
+	}), /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsxs("div", {
+		className: "nodrag nopan absolute flex flex-col items-center gap-0.5",
+		style: {
+			zIndex: 1,
+			transform: `translate(-50%, -50%) translate(${clusterX}px, ${clusterY}px)`
+		},
+		children: [
+			problems && problemSeverity && /* @__PURE__ */ jsxs("span", {
+				"data-testid": "wf-edge-problem",
+				"data-severity": problemSeverity,
+				className: `${EDGE_CHIP_CLASS} max-w-40 truncate ${stealsPointer ? "" : "pointer-events-auto"}`,
+				style: problemSurface(problemSeverity),
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					title: problemTitle(problems),
+					children: problems.length === 1 ? problems[0].message : `${problems.length} problems`
+				}), /* @__PURE__ */ jsx(ProblemMessages, { problems })]
+			}),
+			whenLabel && /* @__PURE__ */ jsx("span", {
+				title: whenLabel,
+				className: `${EDGE_CHIP_CLASS} max-w-40 truncate text-muted-foreground`,
+				children: whenLabel
+			}),
+			backEdge && /* @__PURE__ */ jsx("span", {
+				title: visits !== void 0 ? `Loops back — each node runs at most ${visits} time${visits === 1 ? "" : "s"} per run` : "Loops back to a step that has already run",
+				className: `${EDGE_CHIP_CLASS} shrink-0 text-foreground`,
+				children: visits !== void 0 ? `↺ ≤${visits}` : "↺"
+			}),
+			offersInsert && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-testid": "wf-edge-insert",
+				title: "Insert a step here",
+				"aria-label": "Insert a step here",
+				className: `flex h-5 w-5 items-center justify-center rounded-full border border-border bg-card text-muted-foreground shadow-sm backdrop-blur transition hover:border-primary hover:text-primary ${stealsPointer ? "" : "pointer-events-auto"}`,
+				onClick: (event) => {
+					event.stopPropagation();
+					insertStep(source, target);
+				},
+				children: /* @__PURE__ */ jsx(Plus, {
+					size: 12,
+					"aria-hidden": true
+				})
+			})
+		]
+	}) })] });
+}
+const NODE_TYPES = { wfNode: WorkflowNode };
+const EDGE_TYPES = { [WF_EDGE_TYPE]: WfEdgeRenderer };
+function buildStyledEdges(base, nodeState, maxNodeVisits) {
+	return base.map((e) => {
+		const status = nodeState?.[e.target]?.status;
+		const color = edgeColor(nodeState ? status : void 0);
+		const backEdge = e.data?.backEdge === true;
+		return {
+			...e,
+			animated: !backEdge && status === "running",
+			style: {
+				strokeWidth: 1.75,
+				stroke: color,
+				...backEdge ? { strokeDasharray: "6 3" } : {}
+			},
+			markerEnd: {
+				type: MarkerType.ArrowClosed,
+				width: 15,
+				height: 15,
+				color
+			},
+			...backEdge && maxNodeVisits !== void 0 && e.data ? { data: {
+				...e.data,
+				maxNodeVisits
+			} } : {}
+		};
+	});
+}
+/**
+* Fold the AUTHORING decorations onto already-styled edges: the problems
+* anchored to each one, and whether it offers the insert control. Both are drawn
+* by the custom renderer, so an edge that gains either is switched onto it —
+* everything else keeps the built-in `smoothstep` it has always had.
+*
+* A problem also RECOLOURS the edge, from the same table the node it points at
+* is tinted from, because a chip alone is unreadable at the zoom a whole
+* pipeline is viewed at — but only while the graph is NOT showing a run.
+* A run's colour is the more urgent reading of the same line and wins, exactly
+* as a node's run border wins over its problem border; the chip still renders,
+* so nothing is lost on the one edge that could carry both.
+*
+* `insertable` is a predicate rather than a flag so this pass never has to
+* re-derive which edges are the host's to change — {@link isEditableEdge}
+* already answers that for delete and guard.
+*/
+function decorateAuthoringEdges(edges, byEdge, insertable, hasRunOverlay) {
+	if (byEdge.size === 0 && !edges.some(insertable)) return edges;
+	return edges.map((e) => {
+		const problems = byEdge.get(e.id);
+		const severity = worstSeverity(problems);
+		const offersInsert = insertable(e);
+		if (!severity && !offersInsert) return e;
+		const stroke = severity && !hasRunOverlay ? problemSurface(severity).color : void 0;
+		return {
+			...e,
+			type: WF_EDGE_TYPE,
+			data: {
+				...e.data ?? { kind: "spine" },
+				...problems ? { problems } : {},
+				...offersInsert ? { insertable: true } : {}
+			},
+			...stroke ? {
+				style: {
+					...e.style,
+					stroke
+				},
+				markerEnd: e.markerEnd && typeof e.markerEnd === "object" ? {
+					...e.markerEnd,
+					color: stroke
+				} : e.markerEnd
+			} : {}
+		};
+	});
+}
+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 }) {
+	const editable = onEdgeConnect !== void 0;
+	const insertOnEdge = editable ? onEdgeInsert : void 0;
+	const insertArmed = insertOnEdge !== void 0;
+	const insertAtNode = editable ? onNodeInsert : void 0;
+	const addTrigger = editable ? onTriggerAdd : void 0;
+	const deleteTrigger = editable ? onTriggerDelete : void 0;
+	const colorMode = useColorMode();
+	const isPreview = variant === "preview";
+	const [userCompact, setUserCompact] = useState(defaultCompact ?? nodeState === void 0);
+	/**
+	* What the NEXT press toggles away from.
+	*
+	* The press cannot read `userCompact` for this: two presses that land in one
+	* batch share a render, so both would see the same density, both would
+	* compute the same flip, and two presses would move the graph once — while
+	* reporting that one density twice to a host that persists it. The ref
+	* advances on the press itself, so the second press sees what the first
+	* chose. It is the toggle's own bookkeeping; the RENDER still follows
+	* `userCompact`, which is the only thing React may read for that.
+	*/
+	const nextDensityFrom = useRef(userCompact);
+	const compact = isPreview || userCompact;
+	const [displayCompact, setDisplayCompact] = useState(compact);
+	const rfRef = useRef(null);
+	const wrapperRef = useRef(null);
+	const framedRef = useRef(false);
+	const [framingCue, setFramingCue] = useState(0);
+	const hasRunOverlay = nodeState !== void 0;
+	const structural = useMemo(() => buildFlowGraph(yaml, {
+		nodeState: hasRunOverlay ? {} : void 0,
+		direction,
+		compact,
+		wrap,
+		reserveEdgeInsert: insertArmed,
+		...declaredEdges ? { edges: declaredEdges } : {}
+	}), [
+		yaml,
+		hasRunOverlay,
+		direction,
+		compact,
+		wrap,
+		insertArmed,
+		declaredEdges
+	]);
+	const nodeBoxes = useMemo(() => structural.nodes.map((node) => ({
+		x: node.position.x,
+		y: node.position.y,
+		width: node.width ?? 0,
+		height: node.height ?? 0
+	})), [structural]);
+	const problemIndex = useMemo(() => indexProblems(problems), [problems]);
+	const styledEdges = useMemo(() => {
+		return decorateAuthoringEdges(buildStyledEdges(structural.edges, nodeState, maxNodeVisits), problemIndex.byEdge, (edge) => insertArmed && isEditableEdge(edge), hasRunOverlay).map((e) => ({
+			...e,
+			deletable: editable ? isEditableEdge(e) : false
+		}));
+	}, [
+		structural.edges,
+		nodeState,
+		maxNodeVisits,
+		editable,
+		problemIndex,
+		insertArmed,
+		hasRunOverlay
+	]);
+	const [nodes, setNodes, onNodesChange] = useNodesState(structural.nodes);
+	const [edges, setEdges, onEdgesChange] = useEdgesState(styledEdges);
+	const nodesRef = useRef(nodes);
+	nodesRef.current = nodes;
+	const nodeStateRef = useRef(nodeState);
+	nodeStateRef.current = nodeState;
+	useEffect(() => {
+		setEdges(styledEdges);
+	}, [styledEdges, setEdges]);
+	useEffect(() => {
+		const baseById = new Map(structural.nodes.map((n) => [n.id, n.data]));
+		setNodes((prev) => mergeRunState(prev, baseById, nodeState));
+	}, [
+		nodeState,
+		structural,
+		setNodes
+	]);
+	const didInitialSeedRef = useRef(false);
+	useEffect(() => {
+		const withRunState = (nodes) => {
+			const state = nodeStateRef.current;
+			if (!state) return nodes;
+			return nodes.map((n) => state[n.id] ? {
+				...n,
+				data: {
+					...n.data,
+					state: state[n.id]
+				}
+			} : n);
+		};
+		if (!didInitialSeedRef.current) {
+			didInitialSeedRef.current = true;
+			setNodes(withRunState(structural.nodes));
+			setDisplayCompact(compact);
+			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);
+			return;
+		}
+		const endViewport = framingViewport(layoutBounds(structural.nodes), frame.width, frame.height, compact);
+		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") {
+			setNodes(withRunState(structural.nodes));
+			setDisplayCompact(compact);
+			inst.setViewport(endViewport);
+			return;
+		}
+		const flipTimer = setTimeout(() => setDisplayCompact(compact), 220 * (compact ? DENSITY_FLIP_AT.shrink : DENSITY_FLIP_AT.grow));
+		const startViewport = inst.getViewport();
+		const startedAt = performance.now();
+		let raf = requestAnimationFrame(function step(now) {
+			const t = Math.min(1, (now - startedAt) / 220);
+			const e = easeInOutCubic(t);
+			setNodes(withRunState(t >= 1 ? structural.nodes : structural.nodes.map((n) => {
+				const p = prevById.get(n.id);
+				if (!p || p.width === void 0 || p.height === void 0) return n;
+				const width = lerp(p.width, n.width ?? p.width, e);
+				const height = lerp(p.height, n.height ?? p.height, e);
+				return {
+					...n,
+					position: {
+						x: lerp(p.position.x, n.position.x, e),
+						y: lerp(p.position.y, n.position.y, e)
+					},
+					width,
+					height,
+					style: {
+						...n.style,
+						width,
+						height
+					}
+				};
+			})));
+			inst.setViewport({
+				x: lerp(startViewport.x, endViewport.x, e),
+				y: lerp(startViewport.y, endViewport.y, e),
+				zoom: lerp(startViewport.zoom, endViewport.zoom, e)
+			});
+			if (t < 1) raf = requestAnimationFrame(step);
+		});
+		return () => {
+			cancelAnimationFrame(raf);
+			clearTimeout(flipTimer);
+		};
+	}, [
+		structural,
+		compact,
+		setNodes
+	]);
+	/**
+	* 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
+	* anchored camera, leaving the entry node off-screen. Only this effect may
+	* set the initial camera; later resizes leave the reader's pan alone.
+	*/
+	useEffect(() => {
+		if (framedRef.current) return;
+		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));
+		framedRef.current = true;
+	}, [
+		framingCue,
+		structural,
+		compact
+	]);
+	useEffect(() => {
+		const el = wrapperRef.current;
+		if (!el || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => {
+			if (framedRef.current) {
+				observer.disconnect();
+				return;
+			}
+			setFramingCue((cue) => cue + 1);
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, []);
+	const handleNodeClick = useCallback((_event, node) => {
+		onNodeClick?.(node.id, node.data);
+	}, [onNodeClick]);
+	/**
+	* A connection dragged from a handle and released over EMPTY CANVAS: the
+	* "and then what?" gesture, reported as the node it left and which end of it.
+	*
+	* Three things have to be true, and each rules out a different non-gesture:
+	*
+	*  - Nothing was under the pointer (`toNode`/`toHandle`). React Flow ends
+	*    EVERY connection drag through this callback, including one that landed on
+	*    a handle and already went out through `onConnect`.
+	*  - The release landed on THIS graph's empty canvas — its own pane,
+	*    positively identified.
+	*    This is what rules out everything the first test does not: React Flow
+	*    sets `toNode` only when a handle was found within its connection radius,
+	*    so letting go in the middle of a wide card reports no target at all, and
+	*    without this a release aimed at a node added a step instead. It rules out
+	*    the same way a release on the zoom controls, on an edge, or right off the
+	*    graph does — React Flow listens for the pointer-up on the document, so
+	*    letting go anywhere on the page ends the drag, and pulling away from the
+	*    canvas is exactly how a gesture is abandoned.
+	*
+	* The gesture also needs both of its own ends: a drag that reports no node or
+	* no handle it started from names nothing to insert beside.
+	*/
+	const handleConnectEnd = useCallback((event, state) => {
+		if (!insertAtNode) return;
+		if (state.toNode || state.toHandle) return;
+		const from = state.fromNode;
+		const fromHandle = state.fromHandle;
+		if (!from || !fromHandle) return;
+		const at = releasePoint(event);
+		if (!at || !releasedOnCanvas(at, wrapperRef.current)) return;
+		insertAtNode(from.id, fromHandle.type === "target" ? "before" : "after");
+	}, [insertAtNode]);
+	/**
+	* Enter/Space on a focused node opens its detail, exactly as a click does.
+	* React Flow makes a node TABBABLE but gives it no activation key of its own,
+	* so a keyboard user could reach every node and open none of them — the
+	* detail panel was mouse-only.
+	*
+	* The handler sits on the flow wrapper and reads the node id off the focused
+	* element, because React Flow reports keys from the canvas rather than
+	* per-node: `onNodeClick` has no keyboard counterpart to hang this on.
+	*/
+	const handleNodeKeyDown = useCallback((event) => {
+		if (event.key !== "Enter" && event.key !== " ") return;
+		if (!(event.target instanceof HTMLElement)) return;
+		const nodeId = event.target.closest(".react-flow__node")?.getAttribute("data-id");
+		if (!nodeId) return;
+		const node = nodesRef.current.find((n) => n.id === nodeId);
+		if (!node) return;
+		event.preventDefault();
+		event.stopPropagation();
+		onNodeClick?.(node.id, node.data);
+	}, [onNodeClick]);
+	if (structural.error || structural.nodes.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: `flex items-center justify-center rounded-lg border border-border border-dashed p-4 text-center text-muted-foreground text-xs ${className ?? ""}`,
+		children: structural.error ?? "Nothing to show"
+	});
+	return /* @__PURE__ */ jsx(DirectionContext.Provider, {
+		value: direction,
+		children: /* @__PURE__ */ jsx(DensityContext.Provider, {
+			value: displayCompact,
+			children: /* @__PURE__ */ jsx(RunModeContext.Provider, {
+				value: hasRunOverlay,
+				children: /* @__PURE__ */ jsx(SelectedNodeContext.Provider, {
+					value: selectedNodeId,
+					children: /* @__PURE__ */ jsx(ConnectableContext.Provider, {
+						value: editable,
+						children: /* @__PURE__ */ jsx(NodeBoxesContext.Provider, {
+							value: nodeBoxes,
+							children: /* @__PURE__ */ jsx(NodeProblemsContext.Provider, {
+								value: problemIndex.byNode,
+								children: /* @__PURE__ */ jsx(TriggerDeleteContext.Provider, {
+									value: deleteTrigger ?? null,
+									children: /* @__PURE__ */ jsx(EdgeInsertContext.Provider, {
+										value: insertOnEdge ?? null,
+										children: /* @__PURE__ */ jsx("div", {
+											ref: wrapperRef,
+											className: `wf-graph ${className ?? ""}`,
+											children: /* @__PURE__ */ jsxs(ReactFlow, {
+												nodes,
+												edges,
+												onNodesChange,
+												onEdgesChange,
+												nodeTypes: NODE_TYPES,
+												edgeTypes: EDGE_TYPES,
+												colorMode,
+												onInit: (inst) => {
+													rfRef.current = inst;
+													if (!framedRef.current) setFramingCue((cue) => cue + 1);
+												},
+												onNodeClick: onNodeClick ? handleNodeClick : void 0,
+												onKeyDown: onNodeClick ? handleNodeKeyDown : void 0,
+												proOptions: { hideAttribution: true },
+												nodesDraggable: !isPreview,
+												nodesConnectable: editable,
+												deleteKeyCode: editable ? ["Backspace", "Delete"] : null,
+												edgesReconnectable: false,
+												elementsSelectable: !isPreview,
+												edgesFocusable: editable,
+												onConnect: editable ? (connection) => {
+													if (connection.source && connection.target) onEdgeConnect(connection.source, connection.target);
+												} : void 0,
+												onEdgesDelete: editable ? (deleted) => {
+													for (const edge of deleted) if (isEditableEdge(edge)) onEdgeDelete?.(edge.source, edge.target);
+												} : void 0,
+												onConnectEnd: insertAtNode ? handleConnectEnd : void 0,
+												onEdgeClick: editable ? (_event, edge) => {
+													if (isEditableEdge(edge)) onEdgeClick?.(edge.source, edge.target);
+												} : void 0,
+												zoomOnScroll: false,
+												zoomOnPinch: true,
+												zoomOnDoubleClick: !isPreview,
+												panOnDrag: true,
+												preventScrolling: false,
+												minZoom: .2,
+												maxZoom: 1.5,
+												children: [/* @__PURE__ */ jsx(Background, { gap: 18 }), !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"]
+													})]
+												})] })]
+											})
+										})
+									})
+								})
+							})
+						})
+					})
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { WorkflowGraph };