@tangle-network/sandbox-ui 0.113.7 → 0.115.0

package/dist/WorkflowGraph-2QOORYIR.js

@@ -1,1722 +0,0 @@
-import {
-  ProviderIcon
-} from "./chunk-3LIXVEEE.js";
-import {
-  ACTION_OUTPUT_ROWS,
-  AGENT_BODY_ROWS,
-  COMPACT_NODE_SIZE,
-  COMPACT_TILE,
-  OUTPUT_PREVIEW_CHARS,
-  STRUCTURAL_OUTPUT_ROWS,
-  buildWorkflowGraph,
-  clampPreview,
-  fmtCost,
-  fmtDuration,
-  fmtTokens,
-  isStructuralKind,
-  providerLabel,
-  shortModel,
-  triggerNodeIndex,
-  wfEdgeId,
-  worstSeverity
-} from "./chunk-AI25G5MX.js";
-import {
-  ModelBrandStack,
-  modelBrandFor
-} from "./chunk-RQZRXKMR.js";
-import "./chunk-EI44GEQ5.js";
-import "./chunk-CZ7CSFO4.js";
-
-// src/workflows/WorkflowGraph.tsx
-import {
-  Background,
-  BaseEdge,
-  Controls,
-  EdgeLabelRenderer,
-  getSmoothStepPath,
-  getViewportForBounds,
-  Handle,
-  MarkerType,
-  Panel,
-  Position as Position2,
-  ReactFlow,
-  useEdgesState,
-  useNodesState
-} from "@xyflow/react";
-import "@xyflow/react/dist/style.css";
-import { Maximize2, Minimize2, Plus, X } from "lucide-react";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
-
-// src/workflows/flow-graph.ts
-import { Position } from "@xyflow/react";
-var WF_EDGE_TYPE = "wfEdge";
-var SIDE_POSITION = {
-  left: Position.Left,
-  right: Position.Right,
-  top: Position.Top,
-  bottom: Position.Bottom
-};
-function isNodeStateMap(arg) {
-  const values = Object.values(arg);
-  return values.length > 0 && values.every(
-    (v) => v !== null && typeof v === "object" && "status" in v
-  );
-}
-var FLOW_GRAPH_OPTION_KEYS = [
-  "nodeState",
-  "direction",
-  "compact",
-  "wrap",
-  "edges",
-  "reserveEdgeInsert"
-];
-function normalizeFlowGraphOptions(arg) {
-  if (!arg) return {};
-  if (FLOW_GRAPH_OPTION_KEYS.some((key) => key in arg)) {
-    return arg;
-  }
-  return isNodeStateMap(arg) ? { nodeState: arg } : {};
-}
-function buildFlowGraph(yaml, optionsOrNodeState) {
-  const options = normalizeFlowGraphOptions(optionsOrNodeState);
-  const nodeState = options.nodeState;
-  const direction = options.direction ?? "LR";
-  const compact = options.compact ?? false;
-  const graph = buildWorkflowGraph(yaml, {
-    reserveRunState: nodeState !== void 0,
-    direction,
-    compact,
-    ...options.wrap ? { wrap: true } : {},
-    ...options.edges ? { edges: options.edges } : {},
-    ...options.reserveEdgeInsert ? { reserveEdgeInsert: true } : {}
-  });
-  const isLR = direction === "LR";
-  const sourcePosition = isLR ? Position.Right : Position.Bottom;
-  const targetPosition = isLR ? Position.Left : Position.Top;
-  return {
-    error: graph.error,
-    nodes: graph.nodes.map(
-      (n) => ({
-        id: n.id,
-        type: "wfNode",
-        position: n.position,
-        width: n.width,
-        height: n.height,
-        // A node is a `do` entry, and removing one is a list edit — never a
-        // canvas gesture. This matters most on an EDITABLE canvas, where the
-        // delete key is armed for edges: React Flow deletes a selected node
-        // together with every edge touching it, so a node left deletable would
-        // vanish from the canvas AND report each of its edges as removed,
-        // asking the host to drop declared edges nobody touched.
-        deletable: false,
-        // Fix the DOM box to the laid-out size so the card can't grow past its
-        // reserved space and overlap a neighbour (see model.ts nodeHeight).
-        style: { width: n.width, height: n.height },
-        // A folded layout names each node's own sides (a mirrored row, a corner
-        // that leaves downward); a straight one names none and takes the
-        // direction's answer for every node.
-        sourcePosition: n.sourceSide ? SIDE_POSITION[n.sourceSide] : sourcePosition,
-        targetPosition: n.targetSide ? SIDE_POSITION[n.targetSide] : targetPosition,
-        data: nodeState?.[n.id] ? { ...n.data, state: nodeState[n.id] } : n.data
-      })
-    ),
-    edges: graph.edges.map((e) => {
-      const decorated = e.whenLabel !== void 0 || e.backEdge === true;
-      return {
-        id: e.id,
-        source: e.source,
-        target: e.target,
-        type: decorated ? WF_EDGE_TYPE : "smoothstep",
-        data: {
-          kind: e.kind,
-          ...e.whenLabel !== void 0 ? { whenLabel: e.whenLabel } : {},
-          ...e.backEdge === true ? { backEdge: true } : {}
-        }
-      };
-    })
-  };
-}
-function sameRunState(a, b) {
-  if (a === b) return true;
-  if (!a || !b) return false;
-  const aKeys = Object.keys(a);
-  const bKeys = Object.keys(b);
-  if (aKeys.length !== bKeys.length) return false;
-  return aKeys.every((k) => a[k] === b[k]);
-}
-function mergeRunState(prev, baseDataById, nodeState) {
-  return prev.map((n) => {
-    const base = baseDataById.get(n.id) ?? n.data;
-    const s = nodeState?.[n.id];
-    const nextData = s ? { ...base, state: s } : base;
-    return sameRunState(n.data.state, nextData.state) ? n : { ...n, data: nextData };
-  });
-}
-function indexProblems(problems) {
-  const byNode = /* @__PURE__ */ new Map();
-  const byEdge = /* @__PURE__ */ new Map();
-  const named = (value) => typeof value === "string" && value !== "";
-  for (const problem of problems ?? []) {
-    const into = problem.anchor === "node" ? named(problem.node) ? byNode : null : problem.anchor === "edge" && named(problem.from) && named(problem.to) ? byEdge : null;
-    if (!into) continue;
-    const key = problem.anchor === "node" ? problem.node : wfEdgeId(problem.from, problem.to);
-    const at = into.get(key);
-    if (at) at.push(problem);
-    else into.set(key, [problem]);
-  }
-  return { byNode, byEdge };
-}
-var INSERT_CLEARANCE = 8;
-var CLUSTER_HALF_SIZE = {
-  /** The insert control alone: a 20-unit square. */
-  control: { width: 10, height: 10 },
-  /**
-   * A problem chip — and, since the two stack in one column, the chip WITH the
-   * control under it, which is the taller of the two and so the one the bound
-   * has to cover. Measured on the rendered page at 160 x 38.5 flow units (the
-   * chip's `max-w-40` cap, over chip + gap + control), and rounded outward: a
-   * bound that understates is a bound that lets the cluster lap over a card.
-   */
-  chip: { width: 80, height: 20 }
-};
-var INSERT_MAX_CARDS_CROSSED = 2;
-function clearOfNodeBoxes(point, boxes, direction, half) {
-  const isLR = direction === "LR";
-  const base = isLR ? point.y : point.x;
-  const main = isLR ? point.x : point.y;
-  const padMain = isLR ? half.width : half.height;
-  const padCross = isLR ? half.height : half.width;
-  const column = boxes.filter((b) => {
-    const lo = (isLR ? b.x : b.y) - padMain;
-    const size = (isLR ? b.width : b.height) + padMain * 2;
-    return main >= lo && main <= lo + size;
-  });
-  if (column.length === 0) return 0;
-  const walk = (sign) => {
-    let at = base;
-    for (let crossed = 0; crossed <= INSERT_MAX_CARDS_CROSSED; crossed += 1) {
-      const hit = column.find((b) => {
-        const lo2 = (isLR ? b.y : b.x) - padCross;
-        const size2 = (isLR ? b.height : b.width) + padCross * 2;
-        return at >= lo2 && at <= lo2 + size2;
-      });
-      if (!hit) return at - base;
-      if (crossed === INSERT_MAX_CARDS_CROSSED) return null;
-      const lo = isLR ? hit.y : hit.x;
-      const size = isLR ? hit.height : hit.width;
-      at = sign > 0 ? lo + size + padCross + INSERT_CLEARANCE : lo - padCross - INSERT_CLEARANCE;
-    }
-    return null;
-  };
-  const up = walk(-1);
-  const down = walk(1);
-  if (up === null && down === null) return null;
-  if (up === null) return down;
-  if (down === null) return up;
-  return Math.abs(up) <= Math.abs(down) ? up : down;
-}
-
-// src/workflows/node-output.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var ERROR_TEXT = { color: "var(--surface-danger-text)" };
-var MAX_JSON_ENTRIES = 6;
-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;
-}
-function condenseText(text) {
-  const isListItem = (line) => /^\s*([-*+]\s|\d+[.)]\s)/.test(line);
-  const lines = text.split("\n").map((line) => ({
-    // A list item keeps its boundary when the lines are joined: run three
-    // bullets together with plain spaces and they read as one long sentence,
-    // which is the "word dump" all over again.
-    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));
-  return lines.map(
-    ({ item, text: line }, i) => i > 0 && item ? `\xB7 ${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();
-}
-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 "{\u2026}";
-  return "";
-}
-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" };
-  const structured = trimmed.startsWith("{") || trimmed.startsWith("[");
-  if (structured) {
-    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 };
-}
-var 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"
-};
-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: "\u2026" })
-    ] });
-  }
-  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
-    }
-  );
-}
-
-// src/workflows/node-ui.tsx
-import {
-  AlertTriangle,
-  Bell,
-  Box,
-  Cable,
-  Camera,
-  Circle,
-  Clock,
-  Code,
-  GitBranch,
-  Repeat,
-  ScanSearch,
-  Sparkles,
-  UserCheck,
-  Webhook,
-  Zap
-} from "lucide-react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var MUTED_TRACK = "color-mix(in srgb, hsl(var(--muted-foreground)) 22%, transparent)";
-var TONE_ACCENT = {
-  trigger: "hsl(var(--primary))",
-  structural: "var(--surface-warning-text)",
-  action: "hsl(var(--muted-foreground))"
-};
-var STATUS_QUEUED = "hsl(var(--muted-foreground))";
-var STATUS_DONE = "var(--surface-success-text)";
-var STATUS_FAILED = "var(--surface-danger-text)";
-var STATUS_RUNNING = "hsl(var(--primary))";
-var STATUS_WAITING = "var(--surface-warning-text)";
-var STATUS_COLOR = {
-  queued: STATUS_QUEUED,
-  running: STATUS_RUNNING,
-  waiting: STATUS_WAITING,
-  succeeded: STATUS_DONE,
-  failed: STATUS_FAILED
-};
-function edgeColor(status) {
-  return status ? STATUS_COLOR[status] : STATUS_QUEUED;
-}
-var STATUS_LABEL = {
-  queued: "Queued",
-  running: "Running",
-  waiting: "Waiting on you",
-  succeeded: "Done",
-  failed: "Failed"
-};
-var 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)"
-  }
-};
-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)`
-      };
-  }
-}
-function progressFill(status) {
-  return status === "succeeded" || status === "failed" ? "100%" : status === "running" || status === "waiting" ? "58%" : "6%";
-}
-var KIND_ICON = {
-  schedule: Clock,
-  // Both wake the workflow on an inbound POST, so they share the mark. A
-  // `provider_event` normally shows its provider's LOGO instead and reaches this
-  // glyph only when the connector has none.
-  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
-};
-var 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)"
-  }
-};
-function problemSurface(severity) {
-  return PROBLEM_SURFACE_BY_SEVERITY[severity] ?? PROBLEM_SURFACE_BY_SEVERITY.error;
-}
-function problemBorder(severity) {
-  const color = problemSurface(severity).color;
-  return {
-    borderColor: color,
-    boxShadow: `0 0 0 1px color-mix(in srgb, ${color} 35%, transparent)`
-  };
-}
-var SEVERITY_WORD = {
-  error: "Error",
-  warning: "Warning"
-};
-function problemSentence(problem) {
-  const raw = typeof problem.message === "string" ? problem.message : "";
-  const message = raw.split("\n").map((line) => line.trim()).filter(Boolean).join(" ");
-  const word = SEVERITY_WORD[problem.severity] ?? SEVERITY_WORD.error;
-  return message ? `${word}: ${message}` : word;
-}
-function joinSentences(parts) {
-  return parts.reduce(
-    (joined, part) => joined ? `${joined}${/[.!?;,]$/.test(joined) ? "" : "."} ${part}` : part,
-    ""
-  );
-}
-function problemTitle(problems) {
-  return problems.map(problemSentence).join("\n");
-}
-function ProblemMessages({ problems }) {
-  if (problems.length === 0) return null;
-  return /* @__PURE__ */ jsx2("span", { className: "sr-only", children: problems.length === 1 ? problemSentence(problems[0]) : `${problems.length} problems. ${joinSentences(problems.map(problemSentence))}` });
-}
-function ProblemMarker({
-  problems,
-  className = ""
-}) {
-  const severity = worstSeverity(problems) ?? "error";
-  return /* @__PURE__ */ jsxs2(
-    "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__ */ jsxs2("span", { "aria-hidden": true, className: "flex items-center gap-0.5", title: problemTitle(problems), children: [
-          /* @__PURE__ */ jsx2(AlertTriangle, { size: 9 }),
-          problems.length > 1 && /* @__PURE__ */ jsx2("span", { children: problems.length })
-        ] }),
-        /* @__PURE__ */ jsx2(ProblemMessages, { problems })
-      ]
-    }
-  );
-}
-function StatusPill({ status }) {
-  return /* @__PURE__ */ jsx2(
-    "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]
-    }
-  );
-}
-function StatusFooter({
-  status,
-  rounds,
-  cost,
-  tokens,
-  elapsed
-}) {
-  const roundsLabel = rounds !== void 0 ? `${rounds} round${rounds === 1 ? "" : "s"}` : void 0;
-  const caption = [roundsLabel, cost, tokens].filter(Boolean).join(" \xB7 ");
-  return /* @__PURE__ */ jsxs2("div", { className: "wf-node-body-in mt-auto border-border border-t", children: [
-    /* @__PURE__ */ jsx2(
-      "div",
-      {
-        className: "h-1 w-full overflow-hidden",
-        style: { background: MUTED_TRACK },
-        children: /* @__PURE__ */ jsx2(
-          "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__ */ jsxs2("div", { className: "flex items-center justify-between gap-2 px-3.5 py-1 text-[10px] text-muted-foreground leading-[15px]", children: [
-      /* @__PURE__ */ jsx2("span", { className: "min-h-[15px] truncate tabular-nums", children: caption }),
-      /* @__PURE__ */ jsx2("span", { className: "min-h-[15px] shrink-0 tabular-nums", children: elapsed ?? "" })
-    ] })
-  ] });
-}
-function emptySlotLabel(status) {
-  switch (status) {
-    case "queued":
-      return "Not run yet";
-    case "succeeded":
-      return "No output";
-    case "failed":
-      return "No error reported";
-    default:
-      return void 0;
-  }
-}
-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 ? 0.58 : 0.5));
-  return /* @__PURE__ */ jsx2(
-    "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__ */ jsx2(
-        ProviderIcon,
-        {
-          id: provider,
-          displayName: providerLabel(provider),
-          size: mark,
-          className: "rounded-[3px]"
-        }
-      ) : brand ? (
-        // One lab's own model draws ONE mark (28px at `md`) and fills the tile. A
-        // HOSTED model draws two — host behind, lab in front — and that stack is
-        // 36px wide, which would push the lab chip past the border of an expanded
-        // card's 34px tile. So the stacked pair steps down unless the tile can hold
-        // it; the single mark never has to.
-        /* @__PURE__ */ jsx2(
-          ModelBrandStack,
-          {
-            identity: brand,
-            size: brand.combined || tile >= 38 ? "md" : "sm"
-          }
-        )
-      ) : /* @__PURE__ */ jsx2(Icon, { size: mark, strokeWidth: 1.75, style: { color: accent } })
-    }
-  );
-}
-
-// src/workflows/WorkflowGraph.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var FIT_VIEW = { padding: "12px" };
-function fitZoomCeiling(compact) {
-  return compact ? 1.5 : 1;
-}
-function fitZoomFloor(compact) {
-  return compact ? 0.55 : 0.35;
-}
-function layoutBounds(nodes) {
-  if (nodes.length === 0) return { x: 0, y: 0, width: 0, height: 0 };
-  let minX = Number.POSITIVE_INFINITY;
-  let minY = Number.POSITIVE_INFINITY;
-  let maxX = Number.NEGATIVE_INFINITY;
-  let maxY = Number.NEGATIVE_INFINITY;
-  for (const node of nodes) {
-    minX = Math.min(minX, node.position.x);
-    minY = Math.min(minY, node.position.y);
-    maxX = Math.max(maxX, node.position.x + (node.width ?? 0));
-    maxY = Math.max(maxY, node.position.y + (node.height ?? 0));
-  }
-  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
-}
-function framingViewport(bounds, width, height, compact) {
-  const fit = getViewportForBounds(
-    bounds,
-    width,
-    height,
-    fitZoomFloor(compact),
-    fitZoomCeiling(compact),
-    FIT_VIEW.padding
-  );
-  const anchored = (offset, origin) => offset + Math.max(0, -(offset + origin * fit.zoom));
-  return {
-    zoom: fit.zoom,
-    x: anchored(fit.x, bounds.x),
-    y: anchored(fit.y, bounds.y)
-  };
-}
-var LAYOUT_TRANSITION_MS = 220;
-var DENSITY_FLIP_AT = { grow: 0.12, shrink: 0.75 };
-function motionAllowed() {
-  return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === false;
-}
-var lerp = (a, b, t) => a + (b - a) * t;
-var easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
-function useColorMode() {
-  const [mode, setMode] = useState(
-    () => typeof document !== "undefined" && document.documentElement.classList.contains("dark") ? "dark" : "light"
-  );
-  useEffect(() => {
-    const el = document.documentElement;
-    const update = () => setMode(el.classList.contains("dark") ? "dark" : "light");
-    update();
-    const observer = new MutationObserver(update);
-    observer.observe(el, { attributes: true, attributeFilter: ["class"] });
-    return () => observer.disconnect();
-  }, []);
-  return mode;
-}
-var DirectionContext = createContext("LR");
-var DensityContext = createContext(false);
-var SelectedNodeContext = createContext(void 0);
-var RunModeContext = createContext(false);
-var SELECTION_OUTLINE = {
-  outline: "2px solid hsl(var(--primary))",
-  outlineOffset: 2
-};
-var ConnectableContext = createContext(false);
-var NodeProblemsContext = createContext(/* @__PURE__ */ new Map());
-var TriggerDeleteContext = createContext(null);
-var EdgeInsertContext = createContext(null);
-function isEditableEdge(edge) {
-  return edge.data?.kind !== "fork" && triggerNodeIndex(edge.source) === null;
-}
-var HANDLE_CLASS = "!h-2 !w-2 !min-w-0 !border-0 !bg-transparent opacity-0";
-var HANDLE_CONNECTABLE_CLASS = "!z-10 !h-2.5 !w-2.5 !min-w-0 !rounded-full !border !border-border !bg-muted-foreground/70 opacity-100 transition-opacity hover:!bg-primary";
-function compactHandleStyle(position, isLR) {
-  const tileLeft = isLR ? (COMPACT_NODE_SIZE.width - COMPACT_TILE) / 2 : 0;
-  const center = COMPACT_TILE / 2;
-  const anchor = (left, top) => ({
-    left,
-    top,
-    right: "auto",
-    bottom: "auto",
-    transform: "translate(-50%, -50%)"
-  });
-  switch (position) {
-    case Position2.Left:
-      return anchor(tileLeft, center);
-    case Position2.Right:
-      return anchor(tileLeft + COMPACT_TILE, center);
-    case Position2.Top:
-      return anchor(tileLeft + center, 0);
-    default:
-      return anchor(tileLeft + center, COMPACT_TILE);
-  }
-}
-function WorkflowNode({
-  id,
-  data,
-  // Set only where the LAYOUT decides a node's own sides — a folded row that
-  // runs right-to-left, or the step that turns the corner and leaves downward.
-  // A straight layer flow leaves them to the direction, below.
-  sourcePosition,
-  targetPosition
-}) {
-  const d = data;
-  const state = d.state;
-  const direction = useContext(DirectionContext);
-  const compact = useContext(DensityContext);
-  const runMode = useContext(RunModeContext);
-  const connectable = useContext(ConnectableContext);
-  const hostSelection = useContext(SelectedNodeContext);
-  const problems = useContext(NodeProblemsContext).get(id);
-  const problemSeverity = worstSeverity(problems);
-  const removeTrigger = useContext(TriggerDeleteContext);
-  const isTrigger = triggerNodeIndex(id) !== null;
-  const selected = hostSelection !== void 0 && hostSelection === id;
-  const isLR = direction === "LR";
-  const targetPos = targetPosition ?? (isLR ? Position2.Left : Position2.Top);
-  const sourcePos = sourcePosition ?? (isLR ? Position2.Right : Position2.Bottom);
-  const accent = TONE_ACCENT[d.tone];
-  const isAgent = d.kind === "agent.run";
-  const subtitle = isAgent && state?.model ? shortModel(state.model) : d.subtitle;
-  const markModel = isAgent && state?.model ? state.model : d.model;
-  const runBands = runMode && d.tone !== "trigger";
-  const runStatus = runBands ? state?.status ?? "queued" : state?.status;
-  const duration = fmtDuration(state?.durationMs);
-  const cost = fmtCost(state?.costUsd);
-  const tokens = isAgent ? fmtTokens(state?.inputTokens, state?.outputTokens) : void 0;
-  const runOutput = (() => {
-    const source = state?.status === "failed" && state.error ? { text: state.error, tone: "error", label: "Error" } : state && state.status !== "failed" && state.outputPreview ? {
-      text: state.outputPreview,
-      tone: "default",
-      label: "Output"
-    } : null;
-    if (!source) return null;
-    const trimmed = source.text.trim();
-    if (!trimmed) return null;
-    const shape = classifyOutput(
-      clampPreview(trimmed, OUTPUT_PREVIEW_CHARS),
-      isAgent && source.tone !== "error"
-    );
-    return shape.kind === "empty" ? null : { shape, tone: source.tone, label: source.label };
-  })();
-  const triggerDeleteButton = isTrigger && removeTrigger ? /* @__PURE__ */ jsx3(
-    "button",
-    {
-      type: "button",
-      "data-testid": "wf-trigger-delete",
-      title: "Remove this trigger",
-      "aria-label": "Remove this trigger",
-      className: "nodrag nopan -m-1 flex h-6 w-6 shrink-0 items-center justify-center p-1 text-muted-foreground transition hover:text-[var(--surface-danger-text)]",
-      onClick: (event) => {
-        event.stopPropagation();
-        removeTrigger(id);
-      },
-      children: /* @__PURE__ */ jsx3("span", { className: "flex h-4 w-4 items-center justify-center rounded-full border border-border bg-card shadow-sm", children: /* @__PURE__ */ jsx3(X, { size: 10, "aria-hidden": true }) })
-    }
-  ) : null;
-  const handleClass = connectable ? HANDLE_CONNECTABLE_CLASS : HANDLE_CLASS;
-  const handles = /* @__PURE__ */ jsxs3(Fragment, { children: [
-    !d.isRoot && /* @__PURE__ */ jsx3(
-      Handle,
-      {
-        type: "target",
-        position: targetPos,
-        className: handleClass,
-        style: compact ? compactHandleStyle(targetPos, isLR) : void 0
-      }
-    ),
-    /* @__PURE__ */ jsx3(
-      Handle,
-      {
-        type: "source",
-        position: sourcePos,
-        className: handleClass,
-        style: compact ? compactHandleStyle(sourcePos, isLR) : void 0
-      }
-    )
-  ] });
-  if (compact) {
-    return /* @__PURE__ */ jsxs3(
-      "div",
-      {
-        className: `relative flex h-full w-full ${isLR ? "flex-col items-center" : "flex-row items-center"}`,
-        children: [
-          handles,
-          /* @__PURE__ */ jsxs3(
-            "span",
-            {
-              "data-testid": "wf-node-card",
-              className: "relative flex items-center justify-center rounded-xl border bg-card shadow-sm transition-colors",
-              style: {
-                width: COMPACT_TILE,
-                height: COMPACT_TILE,
-                ...state ? statusBorder(state.status) : problemSeverity ? problemBorder(problemSeverity) : {
-                  borderColor: `color-mix(in srgb, ${accent} 40%, hsl(var(--border)))`
-                },
-                // The TILE is the compact node (the name beside it is unboxed), so
-                // the selection ring belongs to it and not to the wider box.
-                ...selected ? SELECTION_OUTLINE : {}
-              },
-              children: [
-                /* @__PURE__ */ jsx3("span", { className: "wf-node-body-in flex items-center justify-center", children: /* @__PURE__ */ jsx3(
-                  NodeMark,
-                  {
-                    kind: d.kind,
-                    provider: d.provider,
-                    model: markModel,
-                    accent,
-                    tile: Math.round(COMPACT_TILE * 0.62)
-                  }
-                ) }),
-                problems && problemSeverity && /* @__PURE__ */ jsx3(
-                  ProblemMarker,
-                  {
-                    problems,
-                    className: "-left-1.5 -top-1.5 absolute"
-                  }
-                ),
-                triggerDeleteButton && /* @__PURE__ */ jsx3("span", { className: "-right-1.5 -top-1.5 absolute", children: triggerDeleteButton }),
-                d.badge && !state && /* @__PURE__ */ jsx3("span", { className: "-right-1.5 -top-1.5 absolute rounded-full border border-border bg-card px-1.5 py-[1px] font-medium text-[10px] text-muted-foreground", children: d.badge }),
-                state && /* @__PURE__ */ jsx3(
-                  "span",
-                  {
-                    className: `-right-1 -top-1 absolute h-2.5 w-2.5 rounded-full border-2 ${state.status === "running" ? "animate-pulse" : ""}`,
-                    ...state.status === "running" ? { "data-motion": "essential" } : {},
-                    style: {
-                      background: STATUS_COLOR[state.status],
-                      borderColor: "hsl(var(--card))"
-                    },
-                    "aria-label": STATUS_LABEL[state.status]
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs3(
-            "div",
-            {
-              className: `wf-node-body-in min-w-0 ${isLR ? "mt-2 w-full px-1 text-center" : "ml-2 flex-1 text-left"}`,
-              children: [
-                /* @__PURE__ */ jsx3(
-                  "div",
-                  {
-                    className: "truncate font-semibold text-[12px] text-foreground leading-tight",
-                    title: d.title,
-                    children: d.title
-                  }
-                ),
-                subtitle && /* @__PURE__ */ jsx3(
-                  "div",
-                  {
-                    className: "truncate text-[11px] text-muted-foreground leading-tight",
-                    title: subtitle,
-                    children: subtitle
-                  }
-                ),
-                (duration || cost) && /* @__PURE__ */ jsx3("div", { className: "truncate text-[10px] text-muted-foreground/90 leading-tight tabular-nums", children: [duration, cost].filter(Boolean).join(" \xB7 ") })
-              ]
-            }
-          )
-        ]
-      }
-    );
-  }
-  const cardShell = (children) => /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      "data-testid": "wf-node-card",
-      className: "relative flex h-full w-full flex-col overflow-hidden rounded-xl border bg-card shadow-sm transition-colors",
-      style: {
-        ...runStatus ? statusBorder(runStatus) : problemSeverity ? problemBorder(problemSeverity) : {
-          borderColor: `color-mix(in srgb, ${accent} 40%, hsl(var(--border)))`
-        },
-        ...selected ? SELECTION_OUTLINE : {}
-      },
-      children: [
-        handles,
-        children
-      ]
-    }
-  );
-  const identityRow = /* @__PURE__ */ jsxs3("div", { className: "flex shrink-0 items-center gap-2.5", children: [
-    /* @__PURE__ */ jsx3(
-      NodeMark,
-      {
-        kind: d.kind,
-        provider: d.provider,
-        model: markModel,
-        accent,
-        tile: 34
-      }
-    ),
-    /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx3(
-        "div",
-        {
-          className: "truncate font-semibold text-[13px] text-foreground leading-tight",
-          title: d.title,
-          children: d.title
-        }
-      ),
-      subtitle && /* @__PURE__ */ jsx3(
-        "div",
-        {
-          className: "truncate text-[11px] text-muted-foreground leading-tight",
-          title: subtitle,
-          children: subtitle
-        }
-      )
-    ] }),
-    problems && problemSeverity && /* @__PURE__ */ jsx3(ProblemMarker, { problems }),
-    runStatus ? /* @__PURE__ */ jsx3(StatusPill, { status: runStatus }) : d.badge && /* @__PURE__ */ jsx3("span", { className: "shrink-0 rounded-full border border-border bg-surface-container-high px-2 py-[1px] font-medium text-[10px] text-muted-foreground", children: d.badge }),
-    triggerDeleteButton
-  ] });
-  const footer = runStatus ? /* @__PURE__ */ jsx3(
-    StatusFooter,
-    {
-      status: runStatus,
-      rounds: isAgent ? state?.rounds : void 0,
-      cost,
-      tokens,
-      elapsed: duration
-    }
-  ) : null;
-  const descriptionBand = (emphasized) => d.description ? /* @__PURE__ */ jsx3(
-    "p",
-    {
-      className: `mt-2 line-clamp-2 shrink-0 text-[11px] leading-snug ${emphasized ? "text-foreground" : "text-muted-foreground"}`,
-      title: d.description,
-      children: d.description
-    }
-  ) : null;
-  const emptySlot = runStatus && !runOutput && emptySlotLabel(runStatus) ? /* @__PURE__ */ jsx3("div", { className: "mt-2 flex flex-1 items-center text-[11px] text-muted-foreground italic", children: emptySlotLabel(runStatus) }) : null;
-  const outputWell = (rows) => runOutput ? /* @__PURE__ */ jsxs3("div", { className: "mt-2 min-h-0 grow shrink-0 rounded-lg border border-border bg-surface-container-high/60 px-2 py-1.5", children: [
-    /* @__PURE__ */ jsx3("div", { className: "mb-1 font-semibold text-[9px] text-muted-foreground uppercase tracking-[0.09em]", children: runOutput.label }),
-    /* @__PURE__ */ jsx3(
-      NodeOutputBody,
-      {
-        shape: runOutput.shape,
-        tone: runOutput.tone,
-        rows
-      }
-    )
-  ] }) : emptySlot;
-  const body = (children, justify = "") => (
-    /* The content region owns its overflow: each band is `shrink-0`, so a band
-       that renders taller than its reservation (a consumer's font metrics) is
-       CLIPPED here rather than squeezed — a squeezed band cuts a line of text
-       in half, and pushes the pinned footer off the card. Fades in when the
-       density swap lands mid layout-morph; the card's border/surface (the
-       root) stays opaque so the node never blinks out. */
-    /* @__PURE__ */ jsx3(
-      "div",
-      {
-        className: `wf-node-body-in flex min-h-0 flex-1 flex-col overflow-hidden px-3.5 pt-2.5 pb-2 ${justify}`,
-        children
-      }
-    )
-  );
-  if (!runBands) {
-    return cardShell(body(
-      /* @__PURE__ */ jsxs3(Fragment, { children: [
-        identityRow,
-        descriptionBand(false)
-      ] })
-    ));
-  }
-  if (d.kind === "decision") {
-    return cardShell(
-      /* @__PURE__ */ jsxs3(Fragment, { children: [
-        body(
-          /* @__PURE__ */ jsxs3(Fragment, { children: [
-            /* @__PURE__ */ jsxs3("div", { className: "flex shrink-0 items-start gap-2.5", children: [
-              /* @__PURE__ */ jsx3(
-                NodeMark,
-                {
-                  kind: d.kind,
-                  provider: d.provider,
-                  model: markModel,
-                  accent,
-                  tile: 34
-                }
-              ),
-              /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx3(
-                  "div",
-                  {
-                    className: "truncate font-semibold text-[13px] text-foreground leading-tight",
-                    title: d.title,
-                    children: d.title
-                  }
-                ),
-                /* @__PURE__ */ jsxs3("div", { className: "mt-0.5 flex items-center gap-2", children: [
-                  subtitle && /* @__PURE__ */ jsx3(
-                    "span",
-                    {
-                      className: "truncate text-[11px] text-muted-foreground leading-tight",
-                      title: subtitle,
-                      children: subtitle
-                    }
-                  ),
-                  runStatus && /* @__PURE__ */ jsx3("span", { className: "ml-auto shrink-0", children: /* @__PURE__ */ jsx3(StatusPill, { status: runStatus }) })
-                ] })
-              ] })
-            ] }),
-            runOutput && runStatus === "failed" ? /* @__PURE__ */ jsx3("div", { className: "mt-2 min-h-0 shrink-0", children: /* @__PURE__ */ jsx3(
-              NodeOutputBody,
-              {
-                shape: runOutput.shape,
-                tone: runOutput.tone,
-                rows: 2
-              }
-            ) }) : descriptionBand(true)
-          ] })
-        ),
-        footer
-      ] })
-    );
-  }
-  if (isStructuralKind(d.kind)) {
-    return cardShell(
-      /* @__PURE__ */ jsxs3(Fragment, { children: [
-        body(
-          /* @__PURE__ */ jsxs3(Fragment, { children: [
-            identityRow,
-            /* @__PURE__ */ jsx3("div", { className: "mt-1.5 min-h-0 shrink-0", children: runOutput && /* @__PURE__ */ jsx3(
-              NodeOutputBody,
-              {
-                shape: runOutput.shape,
-                tone: runOutput.tone,
-                rows: STRUCTURAL_OUTPUT_ROWS
-              }
-            ) })
-          ] }),
-          // Centered, because the failure slot is empty on every run that does
-          // NOT fail — which is most of them. Reserved space it cannot give back
-          // (the layout is fixed before the run) reads as a gap under a
-          // top-aligned row, and as breathing room around a centered one.
-          "justify-center"
-        ),
-        footer
-      ] })
-    );
-  }
-  if (isAgent) {
-    const strip = [d.title, subtitle].filter(Boolean).join(" \xB7 ");
-    return cardShell(
-      /* @__PURE__ */ jsxs3(Fragment, { children: [
-        body(
-          /* @__PURE__ */ jsxs3(Fragment, { children: [
-            /* @__PURE__ */ jsxs3("div", { className: "flex shrink-0 items-center gap-1.5", children: [
-              /* @__PURE__ */ jsx3(
-                NodeMark,
-                {
-                  kind: d.kind,
-                  provider: d.provider,
-                  model: markModel,
-                  accent,
-                  tile: 18
-                }
-              ),
-              /* @__PURE__ */ jsx3(
-                "span",
-                {
-                  className: "truncate font-medium text-[11px] text-muted-foreground",
-                  title: strip,
-                  children: strip
-                }
-              ),
-              /* @__PURE__ */ jsx3("span", { className: "flex-1" }),
-              runStatus && /* @__PURE__ */ jsx3(StatusPill, { status: runStatus })
-            ] }),
-            /* @__PURE__ */ jsx3("div", { className: "mt-2 min-h-0 flex-1 text-foreground leading-snug", children: runOutput ? /* @__PURE__ */ jsx3(
-              NodeOutputBody,
-              {
-                shape: runOutput.shape,
-                tone: runOutput.tone,
-                rows: AGENT_BODY_ROWS
-              }
-            ) : runStatus && runStatus !== "succeeded" && runStatus !== "failed" && d.description ? (
-              // What it is ABOUT to do, in the muted token — the answer, when it
-              // arrives, is the thing set in the foreground.
-              //
-              // Only while the node is still going to produce one. A FINISHED
-              // node that produced nothing must say so: showing its prompt
-              // there reads as the result it never returned.
-              /* @__PURE__ */ jsx3(
-                "p",
-                {
-                  className: "line-clamp-5 text-[11px] text-muted-foreground leading-snug",
-                  title: d.description,
-                  children: d.description
-                }
-              )
-            ) : runStatus && /* @__PURE__ */ jsx3("span", { className: "text-muted-foreground italic", children: emptySlotLabel(runStatus) }) })
-          ] })
-        ),
-        footer
-      ] })
-    );
-  }
-  return cardShell(
-    /* @__PURE__ */ jsxs3(Fragment, { children: [
-      body(
-        /* @__PURE__ */ jsxs3(Fragment, { children: [
-          identityRow,
-          outputWell(ACTION_OUTPUT_ROWS)
-        ] })
-      ),
-      footer
-    ] })
-  );
-}
-function releasePoint(event) {
-  if (!event) return null;
-  const touch = "changedTouches" in event ? event.changedTouches[0] : null;
-  const source = touch ?? ("clientX" in event ? event : null);
-  return source ? { x: source.clientX, y: source.clientY } : null;
-}
-var CANVAS_SURFACE_SELECTOR = ".react-flow__pane, .react-flow__background";
-function releasedOnCanvas(at, frame) {
-  if (!frame) return false;
-  const under = typeof document === "undefined" ? null : document.elementFromPoint(at.x, at.y);
-  if (!under?.matches(CANVAS_SURFACE_SELECTOR)) return false;
-  return frame.contains(under);
-}
-var NodeBoxesContext = createContext([]);
-var EDGE_CHIP_CLASS = "rounded-full border border-border bg-card/90 px-1.5 py-[1px] text-[10px] leading-tight backdrop-blur";
-function WfEdgeRenderer({
-  id,
-  source,
-  target,
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
-  sourcePosition,
-  targetPosition,
-  data,
-  markerEnd,
-  style
-}) {
-  const insertStep = useContext(EdgeInsertContext);
-  const [path, labelX, labelY] = getSmoothStepPath({
-    sourceX,
-    sourceY,
-    sourcePosition,
-    targetX,
-    targetY,
-    targetPosition
-  });
-  const backEdge = data?.backEdge === true;
-  const whenLabel = data?.whenLabel;
-  const visits = data?.maxNodeVisits;
-  const problems = data?.problems;
-  const problemSeverity = worstSeverity(problems);
-  const offersInsert = data?.insertable === true && insertStep !== null;
-  const nodeBoxes = useContext(NodeBoxesContext);
-  const direction = useContext(DirectionContext);
-  const cleared = offersInsert || problemSeverity ? clearOfNodeBoxes(
-    { x: labelX, y: labelY },
-    nodeBoxes,
-    direction,
-    // A chip is far wider than the control, and in "TB" that width is what
-    // has to clear the cards — so the cluster is measured by what it
-    // actually carries rather than by its tallest member.
-    problemSeverity ? CLUSTER_HALF_SIZE.chip : CLUSTER_HALF_SIZE.control
-  ) : 0;
-  const clearance = cleared ?? 0;
-  const stealsPointer = cleared === null;
-  const isLR = direction === "LR";
-  const clusterX = labelX + (isLR ? 0 : clearance);
-  const clusterY = labelY + (isLR ? clearance : 0);
-  return /* @__PURE__ */ jsxs3(Fragment, { children: [
-    /* @__PURE__ */ jsx3(BaseEdge, { id, path, markerEnd, style }),
-    /* @__PURE__ */ jsx3(EdgeLabelRenderer, { children: /* @__PURE__ */ jsxs3(
-      "div",
-      {
-        className: "nodrag nopan absolute flex flex-col items-center gap-0.5",
-        style: {
-          zIndex: 1,
-          transform: `translate(-50%, -50%) translate(${clusterX}px, ${clusterY}px)`
-        },
-        children: [
-          problems && problemSeverity && /* @__PURE__ */ jsxs3(
-            "span",
-            {
-              "data-testid": "wf-edge-problem",
-              "data-severity": problemSeverity,
-              className: `${EDGE_CHIP_CLASS} max-w-40 truncate ${stealsPointer ? "" : "pointer-events-auto"}`,
-              style: problemSurface(problemSeverity),
-              children: [
-                /* @__PURE__ */ jsx3("span", { "aria-hidden": true, title: problemTitle(problems), children: problems.length === 1 ? problems[0].message : `${problems.length} problems` }),
-                /* @__PURE__ */ jsx3(ProblemMessages, { problems })
-              ]
-            }
-          ),
-          whenLabel && /* @__PURE__ */ jsx3(
-            "span",
-            {
-              title: whenLabel,
-              className: `${EDGE_CHIP_CLASS} max-w-40 truncate text-muted-foreground`,
-              children: whenLabel
-            }
-          ),
-          backEdge && /* @__PURE__ */ jsx3(
-            "span",
-            {
-              title: visits !== void 0 ? `Loops back \u2014 each node runs at most ${visits} time${visits === 1 ? "" : "s"} per run` : "Loops back to a step that has already run",
-              className: `${EDGE_CHIP_CLASS} shrink-0 text-foreground`,
-              children: visits !== void 0 ? `\u21BA \u2264${visits}` : "\u21BA"
-            }
-          ),
-          offersInsert && /* @__PURE__ */ jsx3(
-            "button",
-            {
-              type: "button",
-              "data-testid": "wf-edge-insert",
-              title: "Insert a step here",
-              "aria-label": "Insert a step here",
-              className: `flex h-5 w-5 items-center justify-center rounded-full border border-border bg-card text-muted-foreground shadow-sm backdrop-blur transition hover:border-primary hover:text-primary ${stealsPointer ? "" : "pointer-events-auto"}`,
-              onClick: (event) => {
-                event.stopPropagation();
-                insertStep(source, target);
-              },
-              children: /* @__PURE__ */ jsx3(Plus, { size: 12, "aria-hidden": true })
-            }
-          )
-        ]
-      }
-    ) })
-  ] });
-}
-var NODE_TYPES = { wfNode: WorkflowNode };
-var EDGE_TYPES = { [WF_EDGE_TYPE]: WfEdgeRenderer };
-function buildStyledEdges(base, nodeState, maxNodeVisits) {
-  return base.map((e) => {
-    const status = nodeState?.[e.target]?.status;
-    const color = edgeColor(nodeState ? status : void 0);
-    const backEdge = e.data?.backEdge === true;
-    return {
-      ...e,
-      // The active hop flows; everything else is static. A cycle-closing edge
-      // never flows even into a running target: it is the loop's RETURN path,
-      // and animating it would read as the run travelling backwards.
-      animated: !backEdge && status === "running",
-      style: {
-        strokeWidth: 1.75,
-        stroke: color,
-        // Dashed, so a return path is distinguishable from a forward hop before
-        // its badge is read — and at a zoom where the badge isn't legible.
-        ...backEdge ? { strokeDasharray: "6 3" } : {}
-      },
-      markerEnd: {
-        type: MarkerType.ArrowClosed,
-        width: 15,
-        height: 15,
-        color
-      },
-      ...backEdge && maxNodeVisits !== void 0 && e.data ? { data: { ...e.data, maxNodeVisits } } : {}
-    };
-  });
-}
-function decorateAuthoringEdges(edges, byEdge, insertable, hasRunOverlay) {
-  if (byEdge.size === 0 && !edges.some(insertable)) return edges;
-  return edges.map((e) => {
-    const problems = byEdge.get(e.id);
-    const severity = worstSeverity(problems);
-    const offersInsert = insertable(e);
-    if (!severity && !offersInsert) return e;
-    const stroke = severity && !hasRunOverlay ? problemSurface(severity).color : void 0;
-    return {
-      ...e,
-      type: WF_EDGE_TYPE,
-      data: {
-        ...e.data ?? { kind: "spine" },
-        ...problems ? { problems } : {},
-        ...offersInsert ? { insertable: true } : {}
-      },
-      ...stroke ? {
-        style: { ...e.style, stroke },
-        markerEnd: e.markerEnd && typeof e.markerEnd === "object" ? { ...e.markerEnd, color: stroke } : e.markerEnd
-      } : {}
-    };
-  });
-}
-function WorkflowGraph({
-  yaml,
-  variant = "full",
-  direction = "LR",
-  defaultCompact,
-  onCompactChange,
-  className,
-  wrap = false,
-  nodeState,
-  edges: declaredEdges,
-  maxNodeVisits,
-  selectedNodeId,
-  onNodeClick,
-  onEdgeConnect,
-  onEdgeDelete,
-  onEdgeClick,
-  onEdgeInsert,
-  onNodeInsert,
-  onTriggerAdd,
-  onTriggerDelete,
-  problems
-}) {
-  const editable = onEdgeConnect !== void 0;
-  const insertOnEdge = editable ? onEdgeInsert : void 0;
-  const insertArmed = insertOnEdge !== void 0;
-  const insertAtNode = editable ? onNodeInsert : void 0;
-  const addTrigger = editable ? onTriggerAdd : void 0;
-  const deleteTrigger = editable ? onTriggerDelete : void 0;
-  const colorMode = useColorMode();
-  const isPreview = variant === "preview";
-  const [userCompact, setUserCompact] = useState(
-    defaultCompact ?? nodeState === void 0
-  );
-  const nextDensityFrom = useRef(userCompact);
-  const compact = isPreview || userCompact;
-  const [displayCompact, setDisplayCompact] = useState(compact);
-  const rfRef = useRef(
-    null
-  );
-  const wrapperRef = useRef(null);
-  const framedRef = useRef(false);
-  const [framingCue, setFramingCue] = useState(0);
-  const hasRunOverlay = nodeState !== void 0;
-  const structural = useMemo(
-    () => buildFlowGraph(yaml, {
-      nodeState: hasRunOverlay ? {} : void 0,
-      direction,
-      compact,
-      wrap,
-      // The insert control lives IN the gap between two layers, so the gap is
-      // reserved here — where the layout is decided — rather than measured
-      // afterwards. It is the one editing prop that reaches the layout, which
-      // is why arming it re-lays the graph out.
-      reserveEdgeInsert: insertArmed,
-      ...declaredEdges ? { edges: declaredEdges } : {}
-    }),
-    [
-      yaml,
-      hasRunOverlay,
-      direction,
-      compact,
-      wrap,
-      insertArmed,
-      declaredEdges
-    ]
-  );
-  const nodeBoxes = useMemo(
-    () => structural.nodes.map((node) => ({
-      x: node.position.x,
-      y: node.position.y,
-      width: node.width ?? 0,
-      height: node.height ?? 0
-    })),
-    [structural]
-  );
-  const problemIndex = useMemo(() => indexProblems(problems), [problems]);
-  const styledEdges = useMemo(() => {
-    const run = buildStyledEdges(structural.edges, nodeState, maxNodeVisits);
-    const styled = decorateAuthoringEdges(
-      run,
-      problemIndex.byEdge,
-      (edge) => insertArmed && isEditableEdge(edge),
-      hasRunOverlay
-    );
-    return styled.map((e) => ({
-      ...e,
-      deletable: editable ? isEditableEdge(e) : false
-    }));
-  }, [
-    structural.edges,
-    nodeState,
-    maxNodeVisits,
-    editable,
-    problemIndex,
-    insertArmed,
-    hasRunOverlay
-  ]);
-  const [nodes, setNodes, onNodesChange] = useNodesState(structural.nodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState(styledEdges);
-  const nodesRef = useRef(nodes);
-  nodesRef.current = nodes;
-  const nodeStateRef = useRef(nodeState);
-  nodeStateRef.current = nodeState;
-  useEffect(() => {
-    setEdges(styledEdges);
-  }, [styledEdges, setEdges]);
-  useEffect(() => {
-    const baseById = new Map(structural.nodes.map((n) => [n.id, n.data]));
-    setNodes((prev) => mergeRunState(prev, baseById, nodeState));
-  }, [nodeState, structural, setNodes]);
-  const didInitialSeedRef = useRef(false);
-  useEffect(() => {
-    const withRunState = (nodes2) => {
-      const state = nodeStateRef.current;
-      if (!state) return nodes2;
-      return nodes2.map(
-        (n) => state[n.id] ? { ...n, data: { ...n.data, state: state[n.id] } } : n
-      );
-    };
-    if (!didInitialSeedRef.current) {
-      didInitialSeedRef.current = true;
-      setNodes(withRunState(structural.nodes));
-      setDisplayCompact(compact);
-      return;
-    }
-    const inst = rfRef.current;
-    const frame = wrapperRef.current?.getBoundingClientRect();
-    if (!inst || !frame || frame.width === 0 || frame.height === 0) {
-      setNodes(withRunState(structural.nodes));
-      setDisplayCompact(compact);
-      return;
-    }
-    const endViewport = framingViewport(
-      layoutBounds(structural.nodes),
-      frame.width,
-      frame.height,
-      compact
-    );
-    framedRef.current = true;
-    const prev = nodesRef.current;
-    const prevById = new Map(prev.map((n) => [n.id, n]));
-    const sameNodeSet = prev.length === structural.nodes.length && structural.nodes.every((n) => prevById.has(n.id));
-    if (!sameNodeSet || !motionAllowed() || typeof requestAnimationFrame === "undefined") {
-      setNodes(withRunState(structural.nodes));
-      setDisplayCompact(compact);
-      inst.setViewport(endViewport);
-      return;
-    }
-    const flipTimer = setTimeout(
-      () => setDisplayCompact(compact),
-      LAYOUT_TRANSITION_MS * (compact ? DENSITY_FLIP_AT.shrink : DENSITY_FLIP_AT.grow)
-    );
-    const startViewport = inst.getViewport();
-    const startedAt = performance.now();
-    let raf = requestAnimationFrame(function step(now) {
-      const t = Math.min(1, (now - startedAt) / LAYOUT_TRANSITION_MS);
-      const e = easeInOutCubic(t);
-      setNodes(
-        withRunState(
-          t >= 1 ? structural.nodes : structural.nodes.map((n) => {
-            const p = prevById.get(n.id);
-            if (!p || p.width === void 0 || p.height === void 0) {
-              return n;
-            }
-            const width = lerp(p.width, n.width ?? p.width, e);
-            const height = lerp(p.height, n.height ?? p.height, e);
-            return {
-              ...n,
-              position: {
-                x: lerp(p.position.x, n.position.x, e),
-                y: lerp(p.position.y, n.position.y, e)
-              },
-              width,
-              height,
-              style: { ...n.style, width, height }
-            };
-          })
-        )
-      );
-      inst.setViewport({
-        x: lerp(startViewport.x, endViewport.x, e),
-        y: lerp(startViewport.y, endViewport.y, e),
-        zoom: lerp(startViewport.zoom, endViewport.zoom, e)
-      });
-      if (t < 1) raf = requestAnimationFrame(step);
-    });
-    return () => {
-      cancelAnimationFrame(raf);
-      clearTimeout(flipTimer);
-    };
-  }, [structural, compact, setNodes]);
-  useEffect(() => {
-    if (framedRef.current) return;
-    const inst = rfRef.current;
-    const frame = wrapperRef.current?.getBoundingClientRect();
-    if (!inst || !frame || frame.width === 0 || frame.height === 0) return;
-    inst.setViewport(
-      framingViewport(
-        layoutBounds(structural.nodes),
-        frame.width,
-        frame.height,
-        compact
-      )
-    );
-    framedRef.current = true;
-  }, [framingCue, structural, compact]);
-  useEffect(() => {
-    const el = wrapperRef.current;
-    if (!el || typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(() => {
-      if (framedRef.current) {
-        observer.disconnect();
-        return;
-      }
-      setFramingCue((cue) => cue + 1);
-    });
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-  const handleNodeClick = useCallback(
-    (_event, node) => {
-      onNodeClick?.(node.id, node.data);
-    },
-    [onNodeClick]
-  );
-  const handleConnectEnd = useCallback(
-    (event, state) => {
-      if (!insertAtNode) return;
-      if (state.toNode || state.toHandle) return;
-      const from = state.fromNode;
-      const fromHandle = state.fromHandle;
-      if (!from || !fromHandle) return;
-      const at = releasePoint(event);
-      if (!at || !releasedOnCanvas(at, wrapperRef.current)) return;
-      insertAtNode(from.id, fromHandle.type === "target" ? "before" : "after");
-    },
-    [insertAtNode]
-  );
-  const handleNodeKeyDown = useCallback(
-    (event) => {
-      if (event.key !== "Enter" && event.key !== " ") return;
-      if (!(event.target instanceof HTMLElement)) return;
-      const nodeId = event.target.closest(".react-flow__node")?.getAttribute("data-id");
-      if (!nodeId) return;
-      const node = nodesRef.current.find((n) => n.id === nodeId);
-      if (!node) return;
-      event.preventDefault();
-      event.stopPropagation();
-      onNodeClick?.(node.id, node.data);
-    },
-    [onNodeClick]
-  );
-  if (structural.error || structural.nodes.length === 0) {
-    return /* @__PURE__ */ jsx3(
-      "div",
-      {
-        className: `flex items-center justify-center rounded-lg border border-border border-dashed p-4 text-center text-muted-foreground text-xs ${className ?? ""}`,
-        children: structural.error ?? "Nothing to show"
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx3(DirectionContext.Provider, { value: direction, children: /* @__PURE__ */ jsx3(DensityContext.Provider, { value: displayCompact, children: /* @__PURE__ */ jsx3(RunModeContext.Provider, { value: hasRunOverlay, children: /* @__PURE__ */ jsx3(SelectedNodeContext.Provider, { value: selectedNodeId, children: /* @__PURE__ */ jsx3(ConnectableContext.Provider, { value: editable, children: /* @__PURE__ */ jsx3(NodeBoxesContext.Provider, { value: nodeBoxes, children: /* @__PURE__ */ jsx3(NodeProblemsContext.Provider, { value: problemIndex.byNode, children: /* @__PURE__ */ jsx3(TriggerDeleteContext.Provider, { value: deleteTrigger ?? null, children: /* @__PURE__ */ jsx3(EdgeInsertContext.Provider, { value: insertOnEdge ?? null, children: /* @__PURE__ */ jsx3("div", { ref: wrapperRef, className: `wf-graph ${className ?? ""}`, children: /* @__PURE__ */ jsxs3(
-    ReactFlow,
-    {
-      nodes,
-      edges,
-      onNodesChange,
-      onEdgesChange,
-      nodeTypes: NODE_TYPES,
-      edgeTypes: EDGE_TYPES,
-      colorMode,
-      onInit: (inst) => {
-        rfRef.current = inst;
-        if (!framedRef.current) setFramingCue((cue) => cue + 1);
-      },
-      onNodeClick: onNodeClick ? handleNodeClick : void 0,
-      onKeyDown: onNodeClick ? handleNodeKeyDown : void 0,
-      fitView: true,
-      fitViewOptions: {
-        ...FIT_VIEW,
-        minZoom: fitZoomFloor(compact),
-        maxZoom: fitZoomCeiling(compact)
-      },
-      proOptions: { hideAttribution: true },
-      nodesDraggable: !isPreview,
-      nodesConnectable: editable,
-      deleteKeyCode: editable ? ["Backspace", "Delete"] : null,
-      edgesReconnectable: false,
-      elementsSelectable: !isPreview,
-      edgesFocusable: editable,
-      onConnect: editable ? (connection) => {
-        if (connection.source && connection.target) {
-          onEdgeConnect(connection.source, connection.target);
-        }
-      } : void 0,
-      onEdgesDelete: editable ? (deleted) => {
-        for (const edge of deleted) {
-          if (isEditableEdge(edge)) {
-            onEdgeDelete?.(edge.source, edge.target);
-          }
-        }
-      } : void 0,
-      onConnectEnd: insertAtNode ? handleConnectEnd : void 0,
-      onEdgeClick: editable ? (_event, edge) => {
-        if (isEditableEdge(edge)) {
-          onEdgeClick?.(edge.source, edge.target);
-        }
-      } : void 0,
-      zoomOnScroll: false,
-      zoomOnPinch: true,
-      zoomOnDoubleClick: !isPreview,
-      panOnDrag: true,
-      preventScrolling: false,
-      minZoom: 0.2,
-      maxZoom: 1.5,
-      children: [
-        /* @__PURE__ */ jsx3(Background, { gap: 18 }),
-        !isPreview && /* @__PURE__ */ jsxs3(Fragment, { children: [
-          /* @__PURE__ */ jsx3(
-            Controls,
-            {
-              showInteractive: false,
-              position: "bottom-right",
-              fitViewOptions: { padding: FIT_VIEW.padding }
-            }
-          ),
-          /* @__PURE__ */ jsxs3(Panel, { position: "top-left", className: "flex items-center gap-1", children: [
-            addTrigger && /* @__PURE__ */ jsxs3(
-              "button",
-              {
-                type: "button",
-                "data-testid": "wf-trigger-add",
-                onClick: addTrigger,
-                title: "Add a trigger",
-                "aria-label": "Add a trigger",
-                className: "flex items-center gap-1 rounded-md border border-border bg-card/80 px-2 py-1 text-[11px] text-muted-foreground shadow-sm backdrop-blur transition hover:text-foreground",
-                children: [
-                  /* @__PURE__ */ jsx3(Plus, { size: 12, "aria-hidden": true }),
-                  "Trigger"
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs3(
-              "button",
-              {
-                type: "button",
-                onClick: () => {
-                  const next = !nextDensityFrom.current;
-                  nextDensityFrom.current = next;
-                  setUserCompact(next);
-                  onCompactChange?.(next);
-                },
-                "aria-pressed": userCompact,
-                title: userCompact ? "Expand nodes" : "Collapse nodes",
-                className: "flex items-center gap-1 rounded-md border border-border bg-card/80 px-2 py-1 text-[11px] text-muted-foreground shadow-sm backdrop-blur transition hover:text-foreground",
-                children: [
-                  userCompact ? /* @__PURE__ */ jsx3(Maximize2, { size: 12 }) : /* @__PURE__ */ jsx3(Minimize2, { size: 12 }),
-                  userCompact ? "Expand" : "Compact"
-                ]
-              }
-            )
-          ] })
-        ] })
-      ]
-    }
-  ) }) }) }) }) }) }) }) }) }) });
-}
-export {
-  ConnectableContext,
-  DensityContext,
-  DirectionContext,
-  EdgeInsertContext,
-  FIT_VIEW,
-  LAYOUT_TRANSITION_MS,
-  NodeBoxesContext,
-  NodeProblemsContext,
-  RunModeContext,
-  SelectedNodeContext,
-  TriggerDeleteContext,
-  WfEdgeRenderer,
-  WorkflowGraph,
-  WorkflowNode,
-  buildStyledEdges,
-  decorateAuthoringEdges,
-  fitZoomCeiling,
-  fitZoomFloor,
-  framingViewport,
-  isEditableEdge,
-  layoutBounds
-};