@tangle-network/sandbox-ui 0.122.3 → 0.123.0

package/dist/{WorkflowGraph-E2Gqe8sl.js → WorkflowGraph-B4mkYGe3.js}

@@ -1,9 +1,7 @@
-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-BiuiO_c2.js";
+import { D as triggerNodeIndex, F as fmtCost, I as fmtDuration, L as fmtTokens, N as shortModel, O as wfEdgeId, P as clampPreview, T as isStructuralKind, _ as problemSurface, a as NodeMark, b as COMPACT_NODE_SIZE, c as STATUS_COLOR, d as StatusFooter, f as StatusPill, g as problemBorder, h as emptySlotLabel, k as worstSeverity, l as STATUS_LABEL, m as edgeColor, n as classifyOutput, o as ProblemMarker, p as TONE_ACCENT, s as ProblemMessages, t as NodeOutputBody, v as problemTitle, w as buildWorkflowGraph, y as statusBorder } from "./node-output-D-fYilAu.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useLayoutEffect, 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 { 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 "@xyflow/react/dist/style.css";
 //#region src/workflows/flow-graph.ts
@@ -289,523 +287,6 @@ function clearOfNodeBoxes(point, boxes, direction, half) {
 	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.

package/dist/{model-I-NIxeM-.js → node-output-D-fYilAu.js}

@@ -1,3 +1,7 @@
+import { r as modelBrandFor, t as ModelBrandStack } from "./model-brand-hMyDTUqB.js";
+import { t as ProviderIcon } from "./provider-logo-BiuiO_c2.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertTriangle, Bell, Box, Cable, Camera, Circle, Clock, Code, GitBranch, Repeat, ScanSearch, Sparkles, UserCheck, Webhook, Zap } from "lucide-react";
 import { parse } from "yaml";
 //#region src/workflows/cron.ts
 /**
@@ -537,7 +541,10 @@ function urlHost(url) {
 const CONTROL_FLOW_KEYS = [
 	"if",
 	"retry",
-	"onError"
+	"onError",
+	"id",
+	"needs",
+	"join"
 ];
 const CONTROL_FLOW = new Set(CONTROL_FLOW_KEYS);
 /**
@@ -572,7 +579,8 @@ const MINTED_PROFILE_ID = /^ap_[A-Za-z0-9_-]{16}$/;
 *  a minted catalog id, has no readable name here — the node is the generic agent
 *  rather than a mangled identifier. */
 function agentTitle(profile) {
-	const named = str(profile);
+	const inline = asRecord(profile).name;
+	const named = str(profile) ?? str(inline);
 	if (!named || MINTED_PROFILE_ID.test(named)) return "AI Agent";
 	return humanizeIdentifier(named);
 }
@@ -1247,4 +1255,521 @@ function buildWorkflowGraph(yaml, options) {
 	};
 }
 //#endregion
-export { buildWorkflowGraph as a, triggerNodeIndex as c, providerLabel as d, shortModel as f, fmtTokens as g, fmtDuration as h, branchNodeId as i, wfEdgeId as l, fmtCost as m, TRIGGER_NODE_ID as n, isStructuralKind as o, clampPreview as p, actionNodeId as r, triggerNodeId as s, COMPACT_NODE_SIZE as t, worstSeverity as u };
+//#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/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
+export { actionPathLabel as A, branchNodeId as C, triggerNodeIndex as D, triggerNodeId as E, fmtCost as F, fmtDuration as I, fmtTokens as L, parseActionPath as M, shortModel as N, wfEdgeId as O, clampPreview as P, actionNodeId as S, isStructuralKind as T, problemSurface as _, NodeMark as a, COMPACT_NODE_SIZE as b, STATUS_COLOR as c, StatusFooter as d, StatusPill as f, problemBorder as g, emptySlotLabel as h, KIND_ICON as i, humanizeIdentifier as j, worstSeverity as k, STATUS_LABEL as l, edgeColor as m, classifyOutput as n, ProblemMarker as o, TONE_ACCENT as p, condenseText as r, ProblemMessages as s, NodeOutputBody as t, STATUS_PILL as u, problemTitle as v, buildWorkflowGraph as w, TRIGGER_NODE_ID as x, statusBorder as y };

package/dist/workflows.d.ts

@@ -1,4 +1,6 @@
 import { a as modelBrandFor, n as ModelBrandStack, t as ModelBrandIdentity } from "./model-brand-B9A4H9pJ.js";
+import { ReactElement } from "react";
+import { LucideIcon } from "lucide-react";
 import "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 //#region src/workflows/model.d.ts
@@ -488,4 +490,167 @@ interface WorkflowGraphProps {
 //#region src/workflows/WorkflowGraphLazy.d.ts
 declare function WorkflowGraph(props: WorkflowGraphProps): import("react").JSX.Element;
 //#endregion
-export { type BuildWorkflowGraphOptions, type ModelBrandIdentity, ModelBrandStack, type WfEdge, type WfEdgeKind, type WfEdgeSpec, type WfGraph, type WfNode, type WfNodeData, type WfNodeState, type WfNodeStatus, type WfNodeTone, type WfProblem, type WfProblemSeverity, WorkflowGraph as WorkflowGraphLazy, type WorkflowGraphProps, modelBrandFor };
+//#region src/workflows/node-ui.d.ts
+export declare const STATUS_COLOR: Record<WfNodeStatus, string>;
+export declare const STATUS_LABEL: Record<WfNodeStatus, string>;
+/** 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. */
+export declare const STATUS_PILL: Record<WfNodeStatus, {
+  background: string;
+  color: string;
+  borderColor: string;
+}>;
+export declare const KIND_ICON: Record<string, LucideIcon>;
+/** The status pill in a card's header — the one place the run state is spelled
+ *  out in words. */
+declare function StatusPill({ status }: {
+  status: WfNodeStatus;
+}): import("react").JSX.Element;
+/**
+ * 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.
+ */
+export declare function NodeMark({ kind, provider, model, accent, tile }: {
+  kind?: string;
+  provider?: string;
+  /** The model an agent runs, e.g. "anthropic/claude-sonnet-4-5". Its lab/host
+   *  brand mark identifies the node far faster than a generic sparkle. */
+  model?: string;
+  accent: string;
+  /** Edge length of the square the mark is centered in. */
+  tile: number;
+}): import("react").JSX.Element;
+//#endregion
+//#region src/workflows/naming.d.ts
+/**
+ * Human-facing naming for workflow nodes. A definition addresses things by
+ * machine identifier — an action kind (`agent.run`), a hub action path
+ * (`github.pulls.reviews.create`), a profile slug (`pr-reviewer`) — and showing
+ * those verbatim on a node makes the graph read like a config file. These turn
+ * an identifier into the label a person would say out loud.
+ *
+ * Pure and dependency-free so the naming rules are unit-testable without the
+ * YAML parser or a render.
+ */
+/** How the first word of a humanized identifier is cased. An initialism is
+ *  ALWAYS upper-cased whichever is chosen — that is the whole point of the table
+ *  above, and `.toLowerCase()`ing the result afterwards silently undoes it
+ *  ("List API keys" → "list api keys"). */
+type LeadCase = "sentence" | "lower" | "title";
+/**
+ * Humanize a machine identifier: `pr-reviewer` → "PR reviewer", `sandbox.spawn`
+ * → "Sandbox spawn", `postMessage` → "Post message". Known initialisms are
+ * upper-cased wherever they appear; `lead` picks the case of the rest.
+ *
+ *  - `sentence` (default): "Create issue comment" — a label or a title.
+ *  - `lower`: "create issue comment" — a fragment that sits INSIDE a phrase
+ *    ("On pull request"), where a capital would read as a new sentence. An
+ *    initialism still wins: `ci_run_completed` → "CI run completed", never
+ *    "cI run completed".
+ *  - `title`: "Google Sheets" — a brand/proper name.
+ *
+ * An identifier that carries no word characters is returned verbatim rather than
+ * blanked.
+ */
+export declare function humanizeIdentifier(id: string, lead?: LeadCase): string;
+/** A model slug without its provider prefix (`anthropic/claude-sonnet-5` →
+ *  `claude-sonnet-5`) — the vendor is noise on a card whose width is the scarce
+ *  resource, and the full slug stays in the node's config for the detail view. */
+export declare function shortModel(model: string): string;
+/** The parts of a hub action path (`<provider>.<resource…>.<operation>`). */
+interface ActionPathParts {
+  /** The connector the action runs against (`github`). */
+  provider: string;
+  /** The trailing verb (`create`). */
+  operation: string;
+  /** Everything between provider and operation (`pulls.reviews`), when present —
+   *  a two-segment path (`slack.postMessage`) has no resource. */
+  resource?: string;
+}
+/** Split a hub action path into provider / resource / operation. Null when the
+ *  value isn't a dotted path (a `${…}` expression, or a bare word), so callers
+ *  fall back to showing it verbatim instead of inventing structure. */
+export declare function parseActionPath(path: string): ActionPathParts | null;
+/**
+ * The operation label for an action path, in n8n's `operation: resource` shape:
+ * `github.pulls.reviews.create` → "create: pulls.reviews", `slack.postMessage`
+ * → "post message". The provider names the node itself (its title + logo), so
+ * it is deliberately absent here. A path we can't split is shown verbatim.
+ */
+export declare function actionPathLabel(path: string): string;
+//#endregion
+//#region src/workflows/node-output.d.ts
+/** The recovered shape of an output preview. */
+type OutputShape = {
+  kind: "empty";
+} |
+/** A shallow JSON object, flattened to top-level key/value pairs for a
+ *  key-value render. `truncated` when more pairs exist than we kept. */
+{
+  kind: "json";
+  entries: [string, string][];
+  truncated: boolean;
+} |
+/** Structured-looking text we won't key/value render — a JSON array, a nested
+ *  object, or a fragment the host clamped mid-token so it won't parse. Shown in
+ *  monospace so it still reads as data, not prose. */
+{
+  kind: "code";
+  text: string;
+} |
+/** Free-form prose (agent output, a status line, an error message). */
+{
+  kind: "text";
+  text: string;
+};
+/**
+ * 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.
+ */
+export declare function condenseText(text: string): string;
+/**
+ * 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.
+ */
+export declare function classifyOutput(preview: string | undefined, condenseMarkdown?: boolean): OutputShape;
+/**
+ * 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.
+ */
+export declare function NodeOutputBody({ shape, rows, tone }: {
+  shape: OutputShape;
+  rows?: number | "none";
+  tone?: "default" | "error";
+}): ReactElement | null;
+//#endregion
+export { type ActionPathParts, type BuildWorkflowGraphOptions, type LeadCase, type ModelBrandIdentity, ModelBrandStack, StatusPill as NodeStatusPill, type OutputShape, type WfEdge, type WfEdgeKind, type WfEdgeSpec, type WfGraph, type WfNode, type WfNodeData, type WfNodeState, type WfNodeStatus, type WfNodeTone, type WfProblem, type WfProblemSeverity, WorkflowGraph as WorkflowGraphLazy, type WorkflowGraphProps, modelBrandFor };

package/dist/workflows.js

@@ -1,5 +1,5 @@
 import { r as modelBrandFor, t as ModelBrandStack } from "./model-brand-hMyDTUqB.js";
-import { a as buildWorkflowGraph, c as triggerNodeIndex, i as branchNodeId, n as TRIGGER_NODE_ID, r as actionNodeId, s as triggerNodeId } from "./model-I-NIxeM-.js";
+import { A as actionPathLabel, C as branchNodeId, D as triggerNodeIndex, E as triggerNodeId, M as parseActionPath, N as shortModel, S as actionNodeId, a as NodeMark, c as STATUS_COLOR, f as StatusPill, i as KIND_ICON, j as humanizeIdentifier, l as STATUS_LABEL, n as classifyOutput, r as condenseText, t as NodeOutputBody, u as STATUS_PILL, w as buildWorkflowGraph, x as TRIGGER_NODE_ID } from "./node-output-D-fYilAu.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Component, Suspense, lazy, useMemo, useState } from "react";
 //#region src/workflows/WorkflowGraphLazy.tsx
@@ -30,7 +30,7 @@ function retryImport(factory, retries = 2, delayMs = 350) {
 	});
 }
 function lazyWorkflowGraph() {
-	return lazy(() => retryImport(() => import("./WorkflowGraph-E2Gqe8sl.js").then((m) => ({ default: m.WorkflowGraph }))));
+	return lazy(() => retryImport(() => import("./WorkflowGraph-B4mkYGe3.js").then((m) => ({ default: m.WorkflowGraph }))));
 }
 var GraphErrorBoundary = class extends Component {
 	state = { hasError: false };
@@ -81,4 +81,4 @@ function WorkflowGraph(props) {
 	}, `${props.yaml}::${attempt}`);
 }
 //#endregion
-export { ModelBrandStack, TRIGGER_NODE_ID, WorkflowGraph as WorkflowGraphLazy, actionNodeId, branchNodeId, buildWorkflowGraph, modelBrandFor, triggerNodeId, triggerNodeIndex };
+export { KIND_ICON, ModelBrandStack, NodeMark, NodeOutputBody, StatusPill as NodeStatusPill, STATUS_COLOR, STATUS_LABEL, STATUS_PILL, TRIGGER_NODE_ID, WorkflowGraph as WorkflowGraphLazy, actionNodeId, actionPathLabel, branchNodeId, buildWorkflowGraph, classifyOutput, condenseText, humanizeIdentifier, modelBrandFor, parseActionPath, shortModel, triggerNodeId, triggerNodeIndex };

package/package.json

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