@tangle-network/sandbox-ui 0.122.3 → 0.123.1

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 };