@tangle-network/sandbox-ui 0.122.3 → 0.123.1

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.