@tangle-network/sandbox-ui 0.75.0 → 0.76.0

package/dist/WorkflowGraph-V2AVCNDC.js

@@ -0,0 +1,795 @@
+import {
+  ProviderIcon
+} from "./chunk-GTJ5PSK5.js";
+import {
+  COMPACT_NODE_SIZE,
+  COMPACT_TILE,
+  buildWorkflowGraph,
+  clampPreview,
+  fmtCost,
+  fmtDuration,
+  fmtTokens,
+  providerLabel,
+  shortModel
+} from "./chunk-UEMWLVVY.js";
+import "./chunk-U67V476Y.js";
+
+// src/workflows/WorkflowGraph.tsx
+import {
+  Background,
+  Controls,
+  Handle,
+  MarkerType,
+  Panel,
+  Position as Position2,
+  ReactFlow,
+  useEdgesState,
+  useNodesState
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import { Maximize2, Minimize2 } from "lucide-react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+
+// src/workflows/flow-graph.ts
+import { Position } from "@xyflow/react";
+function isNodeStateMap(arg) {
+  const values = Object.values(arg);
+  return values.length > 0 && values.every(
+    (v) => v !== null && typeof v === "object" && "status" in v
+  );
+}
+function normalizeFlowGraphOptions(arg) {
+  if (!arg) return {};
+  if ("nodeState" in arg || "direction" in arg || "compact" 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
+  });
+  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,
+        // 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 },
+        sourcePosition,
+        targetPosition,
+        data: nodeState?.[n.id] ? { ...n.data, state: nodeState[n.id] } : n.data
+      })
+    ),
+    edges: graph.edges.map((e) => ({
+      id: e.id,
+      source: e.source,
+      target: e.target,
+      type: "smoothstep"
+    }))
+  };
+}
+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 };
+  });
+}
+
+// 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"
+};
+function NodeOutputBody({
+  shape,
+  rows = 2,
+  tone = "default"
+}) {
+  const clampClass = 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 = shape.truncated || shape.entries.length > rows;
+    const visible = 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 {
+  Bell,
+  Box,
+  Cable,
+  Circle,
+  Clock,
+  GitBranch,
+  Repeat,
+  Sparkles,
+  UserCheck,
+  Webhook,
+  Zap
+} from "lucide-react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+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_COLOR = {
+  queued: STATUS_QUEUED,
+  running: STATUS_RUNNING,
+  succeeded: STATUS_DONE,
+  failed: STATUS_FAILED
+};
+function edgeColor(status) {
+  return status ? STATUS_COLOR[status] : STATUS_QUEUED;
+}
+var STATUS_LABEL = {
+  queued: "Queued",
+  running: "Running",
+  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)"
+  },
+  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":
+      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" ? "58%" : "6%";
+}
+var KIND_ICON = {
+  schedule: Clock,
+  provider_event: Webhook,
+  trigger: Zap,
+  "agent.run": Sparkles,
+  "integration.invoke": Cable,
+  notify: Bell,
+  parallel: GitBranch,
+  foreach: Repeat,
+  decision: UserCheck,
+  "sandbox.spawn": Box
+};
+function NodeMark({
+  kind,
+  provider,
+  accent,
+  tile
+}) {
+  const Icon = kind && KIND_ICON[kind] || Circle;
+  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 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]"
+        }
+      ) : /* @__PURE__ */ jsx2(Icon, { size: mark, strokeWidth: 1.75, style: { color: accent } })
+    }
+  );
+}
+
+// src/workflows/WorkflowGraph.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var MUTED_TRACK = "color-mix(in srgb, hsl(var(--muted-foreground)) 22%, transparent)";
+var FIT_VIEW = { padding: 0.16, minZoom: 0.55, maxZoom: 1 };
+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);
+function StatusFooter({
+  status,
+  rounds,
+  elapsed
+}) {
+  const roundsLabel = rounds !== void 0 ? `${rounds} round${rounds === 1 ? "" : "s"}` : void 0;
+  return /* @__PURE__ */ jsxs2("div", { className: "mt-auto border-border border-t", children: [
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: "h-1 w-full overflow-hidden",
+        style: { background: MUTED_TRACK },
+        children: /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: `h-full ${status === "running" ? "animate-pulse" : ""}`,
+            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__ */ jsx3("span", { className: "min-h-[15px] truncate", children: roundsLabel ?? "" }),
+      /* @__PURE__ */ jsx3("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 StatusPill({ status }) {
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      className: "shrink-0 rounded-full border px-2 py-[1px] font-medium text-[10px]",
+      style: STATUS_PILL[status],
+      children: STATUS_LABEL[status]
+    }
+  );
+}
+var HANDLE_CLASS = "!h-2 !w-2 !min-w-0 !border-0 !bg-transparent opacity-0";
+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({ data }) {
+  const d = data;
+  const state = d.state;
+  const direction = useContext(DirectionContext);
+  const compact = useContext(DensityContext);
+  const isLR = direction === "LR";
+  const targetPos = isLR ? Position2.Left : Position2.Top;
+  const sourcePos = 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 runBands = state !== void 0 && d.tone !== "trigger";
+  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),
+      isAgent && source.tone !== "error"
+    );
+    return shape.kind === "empty" ? null : { shape, tone: source.tone, label: source.label };
+  })();
+  const handles = /* @__PURE__ */ jsxs2(Fragment, { children: [
+    !d.isRoot && /* @__PURE__ */ jsx3(
+      Handle,
+      {
+        type: "target",
+        position: targetPos,
+        className: HANDLE_CLASS,
+        style: compact ? compactHandleStyle(targetPos, isLR) : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      Handle,
+      {
+        type: "source",
+        position: sourcePos,
+        className: HANDLE_CLASS,
+        style: compact ? compactHandleStyle(sourcePos, isLR) : void 0
+      }
+    )
+  ] });
+  if (compact) {
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: `relative flex h-full w-full ${isLR ? "flex-col items-center" : "flex-row items-center"}`,
+        children: [
+          handles,
+          /* @__PURE__ */ jsxs2(
+            "span",
+            {
+              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) : {
+                  borderColor: `color-mix(in srgb, ${accent} 40%, hsl(var(--border)))`
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsx3(
+                  NodeMark,
+                  {
+                    kind: d.kind,
+                    provider: d.provider,
+                    accent,
+                    tile: Math.round(COMPACT_TILE * 0.62)
+                  }
+                ),
+                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" : ""}`,
+                    style: {
+                      background: STATUS_COLOR[state.status],
+                      borderColor: "hsl(var(--card))"
+                    },
+                    "aria-label": STATUS_LABEL[state.status]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              className: `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 ") })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "relative flex h-full w-full flex-col overflow-hidden rounded-xl border bg-card shadow-sm transition-colors",
+      style: state ? statusBorder(state.status) : {
+        borderColor: `color-mix(in srgb, ${accent} 40%, hsl(var(--border)))`
+      },
+      children: [
+        handles,
+        /* @__PURE__ */ jsxs2("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden px-3.5 pt-2.5 pb-2", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex shrink-0 items-center gap-2.5", children: [
+            /* @__PURE__ */ jsx3(
+              NodeMark,
+              {
+                kind: d.kind,
+                provider: d.provider,
+                accent,
+                tile: 34
+              }
+            ),
+            /* @__PURE__ */ jsxs2("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
+                }
+              )
+            ] }),
+            state ? /* @__PURE__ */ jsx3(StatusPill, { status: state.status }) : 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 })
+          ] }),
+          d.description && /* @__PURE__ */ jsx3(
+            "p",
+            {
+              className: "mt-2 line-clamp-2 shrink-0 text-[11px] text-muted-foreground leading-snug",
+              title: d.description,
+              children: d.description
+            }
+          ),
+          runBands && (cost || tokens) && /* @__PURE__ */ jsx3("div", { className: "mt-2 shrink-0 truncate text-[11px] text-muted-foreground tabular-nums", children: [cost, tokens].filter(Boolean).join(" \xB7 ") }),
+          runBands && runOutput && /* @__PURE__ */ jsxs2("div", { className: "mt-2 min-h-0 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: 2
+              }
+            )
+          ] }),
+          runBands && state && !runOutput && emptySlotLabel(state.status) && /* @__PURE__ */ jsx3("div", { className: "mt-2 flex flex-1 items-center text-[11px] text-muted-foreground italic", children: emptySlotLabel(state.status) })
+        ] }),
+        runBands && state && /* @__PURE__ */ jsx3(
+          StatusFooter,
+          {
+            status: state.status,
+            rounds: isAgent ? state.rounds : void 0,
+            elapsed: duration
+          }
+        )
+      ]
+    }
+  );
+}
+var NODE_TYPES = { wfNode: WorkflowNode };
+function buildStyledEdges(base, nodeState) {
+  return base.map((e) => {
+    const status = nodeState?.[e.target]?.status;
+    const color = edgeColor(nodeState ? status : void 0);
+    return {
+      ...e,
+      // The active hop flows; everything else is static.
+      animated: status === "running",
+      style: { strokeWidth: 1.75, stroke: color },
+      markerEnd: {
+        type: MarkerType.ArrowClosed,
+        width: 15,
+        height: 15,
+        color
+      }
+    };
+  });
+}
+function WorkflowGraph({
+  yaml,
+  variant = "full",
+  direction = "LR",
+  defaultCompact = true,
+  className,
+  nodeState,
+  onNodeClick
+}) {
+  const colorMode = useColorMode();
+  const isPreview = variant === "preview";
+  const [userCompact, setUserCompact] = useState(defaultCompact);
+  const compact = isPreview || userCompact;
+  const rfRef = useRef(null);
+  const hasRunOverlay = nodeState !== void 0;
+  const structural = useMemo(
+    () => buildFlowGraph(yaml, {
+      nodeState: hasRunOverlay ? {} : void 0,
+      direction,
+      compact
+    }),
+    [yaml, hasRunOverlay, direction, compact]
+  );
+  const styledEdges = useMemo(
+    () => buildStyledEdges(structural.edges, nodeState),
+    [structural.edges, nodeState]
+  );
+  const [nodes, setNodes, onNodesChange] = useNodesState(structural.nodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(styledEdges);
+  useEffect(() => {
+    setNodes(structural.nodes);
+  }, [structural, setNodes]);
+  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 didInitialFitRef = useRef(false);
+  useEffect(() => {
+    if (!didInitialFitRef.current) {
+      didInitialFitRef.current = true;
+      return;
+    }
+    const inst = rfRef.current;
+    if (!inst || typeof requestAnimationFrame === "undefined") return;
+    const raf = requestAnimationFrame(() => inst.fitView(FIT_VIEW));
+    return () => cancelAnimationFrame(raf);
+  }, [structural]);
+  const handleNodeClick = useCallback(
+    (_event, node) => {
+      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: compact, children: /* @__PURE__ */ jsx3("div", { className: `wf-graph ${className ?? ""}`, children: /* @__PURE__ */ jsxs2(
+    ReactFlow,
+    {
+      nodes,
+      edges,
+      onNodesChange,
+      onEdgesChange,
+      nodeTypes: NODE_TYPES,
+      colorMode,
+      onInit: (inst) => {
+        rfRef.current = inst;
+      },
+      onNodeClick: onNodeClick ? handleNodeClick : void 0,
+      fitView: true,
+      fitViewOptions: FIT_VIEW,
+      proOptions: { hideAttribution: true },
+      nodesDraggable: !isPreview,
+      nodesConnectable: false,
+      deleteKeyCode: null,
+      edgesReconnectable: false,
+      elementsSelectable: !isPreview,
+      edgesFocusable: false,
+      zoomOnScroll: false,
+      zoomOnPinch: true,
+      zoomOnDoubleClick: !isPreview,
+      panOnDrag: true,
+      preventScrolling: false,
+      minZoom: 0.2,
+      maxZoom: 1.5,
+      children: [
+        /* @__PURE__ */ jsx3(Background, { gap: 18 }),
+        !isPreview && /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsx3(Controls, { showInteractive: false, position: "bottom-right" }),
+          /* @__PURE__ */ jsx3(Panel, { position: "top-left", children: /* @__PURE__ */ jsxs2(
+            "button",
+            {
+              type: "button",
+              onClick: () => setUserCompact((c) => !c),
+              "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 {
+  DensityContext,
+  DirectionContext,
+  WorkflowGraph,
+  WorkflowNode,
+  buildStyledEdges
+};