@tangle-network/sandbox-ui 0.74.0 → 0.75.0

package/dist/{WorkflowGraph-64XJBIW2.js → WorkflowGraph-RA7ZHN4I.js}

@@ -5,7 +5,7 @@ import {
   COMPACT_NODE_SIZE,
   buildWorkflowGraph,
   providerLabel
-} from "./chunk-VXGI2XUK.js";
+} from "./chunk-FNE5QLU3.js";
 import "./chunk-U67V476Y.js";
 
 // src/workflows/WorkflowGraph.tsx
@@ -21,19 +21,7 @@ import {
   useNodesState
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
-import {
-  Bell,
-  Box,
-  Cable,
-  Circle,
-  Clock,
-  Maximize2,
-  Minimize2,
-  Repeat,
-  Sparkles,
-  Split,
-  Webhook
-} from "lucide-react";
+import { Maximize2, Minimize2 } from "lucide-react";
 import {
   createContext,
   useCallback,
@@ -125,7 +113,10 @@ function fmtCost(usd) {
   return usd < 0.01 ? `$${usd.toFixed(4)}` : `$${usd.toFixed(2)}`;
 }
 function clampPreview(text, max = 200) {
-  return text.length > max ? `${text.slice(0, max)}\u2026` : text;
+  if (text.length <= max) return text;
+  const lastCode = text.charCodeAt(max - 1);
+  const end = lastCode >= 55296 && lastCode <= 56319 ? max - 1 : max;
+  return `${text.slice(0, end)}\u2026`;
 }
 function fmtTokens(input, output) {
   const valid = (n) => n !== void 0 && Number.isFinite(n) && n >= 0 ? n : void 0;
@@ -135,23 +126,103 @@ function fmtTokens(input, output) {
   return `${i ?? 0}/${o ?? 0} tok`;
 }
 
-// src/workflows/WorkflowGraph.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function useColorMode() {
-  const [mode, setMode] = useState(
-    () => typeof document !== "undefined" && document.documentElement.classList.contains("dark") ? "dark" : "light"
+// src/workflows/node-output.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var MAX_JSON_ENTRIES = 6;
+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) {
+  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 };
+    }
+  }
+  return { kind: "text", text: trimmed };
+}
+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 keyClass = isError ? "text-red-400/80" : "text-muted-foreground";
+    const valueClass = isError ? "text-red-400" : "text-foreground";
+    return /* @__PURE__ */ jsxs("dl", { className: "space-y-0.5 font-mono text-[10px] leading-tight", 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}`, title: key, children: key }),
+        /* @__PURE__ */ jsx("dd", { className: `min-w-0 flex-1 truncate ${valueClass}`, title: value, children: value })
+      ] }, key)),
+      overflow && /* @__PURE__ */ jsx("div", { className: `text-[9px] ${keyClass}`, children: "\u2026" })
+    ] });
+  }
+  if (shape.kind === "code") {
+    return /* @__PURE__ */ jsx(
+      "pre",
+      {
+        className: `${clampClass} ${codeWrap} font-mono text-[10px] leading-tight ${tone === "error" ? "text-red-400" : "text-foreground/80"}`,
+        title: shape.text,
+        children: shape.text
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: `${clampClass} text-[10px] leading-snug ${tone === "error" ? "text-red-400" : "text-muted-foreground"}`,
+      title: shape.text,
+      children: shape.text
+    }
   );
-  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");
+
+// src/workflows/node-ui.tsx
+import {
+  Bell,
+  Box,
+  Cable,
+  Circle,
+  Clock,
+  Repeat,
+  Sparkles,
+  Split,
+  Webhook
+} from "lucide-react";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var TONE_ACCENT = {
   trigger: "hsl(var(--primary))",
   structural: "var(--surface-warning-text)",
@@ -167,7 +238,45 @@ var STATUS_COLOR = {
   succeeded: EDGE_DONE,
   failed: EDGE_FAIL
 };
-var DensityContext = createContext(false);
+function edgeColor(status) {
+  switch (status) {
+    case "running":
+      return EDGE_RUNNING;
+    case "succeeded":
+      return EDGE_DONE;
+    case "failed":
+      return EDGE_FAIL;
+    default:
+      return EDGE_MUTED;
+  }
+}
+var STATUS_LABEL = {
+  queued: "Queued",
+  running: "Running",
+  succeeded: "Done",
+  failed: "Failed"
+};
+var STATUS_BADGE = {
+  queued: "bg-surface-container-high text-muted-foreground",
+  running: "bg-primary/15 text-primary",
+  succeeded: "bg-green-600/10 text-green-600",
+  failed: "bg-red-500/10 text-red-400"
+};
+function statusBorder(status) {
+  switch (status) {
+    case "running":
+      return "border-primary ring-1 ring-primary/40";
+    case "succeeded":
+      return "border-green-500";
+    case "failed":
+      return "border-red-500";
+    default:
+      return "opacity-70";
+  }
+}
+function progressFill(status) {
+  return status === "succeeded" || status === "failed" ? "100%" : status === "running" ? "58%" : "6%";
+}
 var KIND_ICON = {
   schedule: Clock,
   provider_event: Webhook,
@@ -186,7 +295,7 @@ function NodeIcon({
   glyph
 }) {
   const Icon = kind && KIND_ICON[kind] || Circle;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "span",
     {
       "aria-hidden": "true",
@@ -197,76 +306,64 @@ function NodeIcon({
         background: `color-mix(in srgb, ${accent} 16%, transparent)`,
         color: accent
       },
-      children: /* @__PURE__ */ jsx(Icon, { size: glyph, strokeWidth: 2 })
+      children: /* @__PURE__ */ jsx2(Icon, { size: glyph, strokeWidth: 2 })
     }
   );
 }
-function ProgressStrip({
+function MetaChip({
+  children,
+  title
+}) {
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      title,
+      className: "inline-block max-w-[150px] truncate rounded bg-surface-container-high px-1.5 py-0.5 align-middle text-[10px] text-muted-foreground",
+      children
+    }
+  );
+}
+
+// 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)";
+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 color = STATUS_COLOR[status];
-  const fill = status === "succeeded" || status === "failed" ? "100%" : status === "running" ? "58%" : "6%";
   const roundsLabel = rounds !== void 0 ? `${rounds} round${rounds === 1 ? "" : "s"}` : void 0;
-  return /* @__PURE__ */ jsxs("div", { className: "mt-1.5", children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("div", { className: "mt-auto border-border/60 border-t", children: [
+    /* @__PURE__ */ jsx3("div", { className: "h-1 w-full overflow-hidden", style: { background: MUTED_TRACK }, children: /* @__PURE__ */ jsx3(
       "div",
       {
-        className: "h-1 w-full overflow-hidden rounded-full",
-        style: {
-          background: "color-mix(in srgb, hsl(var(--muted-foreground)) 22%, transparent)"
-        },
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `h-full rounded-full ${status === "running" ? "animate-pulse" : ""}`,
-            style: { width: fill, background: color }
-          }
-        )
+        className: `h-full ${status === "running" ? "animate-pulse" : ""}`,
+        style: { width: progressFill(status), background: STATUS_COLOR[status] }
       }
-    ),
-    (roundsLabel || elapsed) && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center justify-between text-[9px] text-muted-foreground", children: [
-      /* @__PURE__ */ jsx("span", { className: "truncate", children: roundsLabel ?? "" }),
-      elapsed && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: elapsed })
+    ) }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-2 px-3 py-1 text-[9px] text-muted-foreground", children: [
+      /* @__PURE__ */ jsx3("span", { className: "truncate", children: roundsLabel ?? "" }),
+      elapsed && /* @__PURE__ */ jsx3("span", { className: "shrink-0", children: elapsed })
     ] })
   ] });
 }
 var HANDLE_CLASS = "!h-2 !w-2 !min-w-0 !border-0 !bg-transparent opacity-0";
-var STATUS_LABEL = {
-  queued: "Queued",
-  running: "Running",
-  succeeded: "Done",
-  failed: "Failed"
-};
-var STATUS_BADGE = {
-  queued: "bg-surface-container-high text-muted-foreground",
-  running: "bg-primary/15 text-primary",
-  succeeded: "bg-green-600/10 text-green-600",
-  failed: "bg-red-500/10 text-red-400"
-};
-function statusBorder(status) {
-  switch (status) {
-    case "running":
-      return "border-primary ring-1 ring-primary/40";
-    case "succeeded":
-      return "border-green-500";
-    case "failed":
-      return "border-red-500";
-    default:
-      return "opacity-70";
-  }
-}
-function MetaChip({ children, title }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      title,
-      className: "inline-block max-w-[150px] truncate rounded bg-surface-container-high px-1.5 py-0.5 align-middle text-[10px] text-muted-foreground",
-      children
-    }
-  );
-}
 function WorkflowNode({ data }) {
   const d = data;
   const state = d.state;
@@ -281,49 +378,55 @@ function WorkflowNode({ data }) {
   const duration = fmtDuration(state?.durationMs);
   const cost = fmtCost(state?.costUsd);
   const tokens = isAgent ? fmtTokens(state?.inputTokens, state?.outputTokens) : void 0;
-  const errorText = state?.error ? clampPreview(state.error) : void 0;
-  const outputText = state?.outputPreview ? clampPreview(state.outputPreview) : 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));
+    return shape.kind === "empty" ? null : { shape, tone: source.tone, label: source.label };
+  })();
   const wrapperClass = `relative flex h-full w-full flex-col overflow-hidden rounded-lg border bg-card shadow-sm transition-colors ${state ? statusBorder(state.status) : ""}`;
   const wrapperStyle = state ? state.status === "running" ? { boxShadow: "0 0 22px -6px hsl(var(--primary))" } : void 0 : {
     borderColor: `color-mix(in srgb, ${accent} 42%, transparent)`,
     backgroundColor: `color-mix(in srgb, ${accent} 6%, hsl(var(--card)))`
   };
-  const handles = /* @__PURE__ */ jsxs(Fragment, { children: [
-    !d.isRoot && /* @__PURE__ */ jsx(Handle, { type: "target", position: targetPos, className: HANDLE_CLASS }),
-    /* @__PURE__ */ jsx(Handle, { type: "source", position: sourcePos, className: HANDLE_CLASS })
+  const handles = /* @__PURE__ */ jsxs2(Fragment, { children: [
+    !d.isRoot && /* @__PURE__ */ jsx3(Handle, { type: "target", position: targetPos, className: HANDLE_CLASS }),
+    /* @__PURE__ */ jsx3(Handle, { type: "source", position: sourcePos, className: HANDLE_CLASS })
   ] });
   if (compact) {
-    return /* @__PURE__ */ jsxs("div", { className: `${wrapperClass} justify-center px-2.5`, style: wrapperStyle, children: [
+    return /* @__PURE__ */ jsxs2("div", { className: `${wrapperClass} justify-center px-2.5`, style: wrapperStyle, children: [
       handles,
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
-        /* @__PURE__ */ jsx(NodeIcon, { kind: d.kind, accent, box: 32, glyph: 16 }),
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-[12px] text-foreground", children: d.title }),
-            state ? /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2.5", children: [
+        /* @__PURE__ */ jsx3(NodeIcon, { kind: d.kind, accent, box: 32, glyph: 16 }),
+        /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx3("span", { className: "truncate font-medium text-[12px] text-foreground", children: d.title }),
+            state ? /* @__PURE__ */ jsx3(
               "span",
               {
                 className: "ml-auto h-1.5 w-1.5 shrink-0 rounded-full",
                 style: { backgroundColor: STATUS_COLOR[state.status] }
               }
-            ) : d.badge && /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 rounded bg-surface-container-high px-1 py-0.5 text-[9px] text-muted-foreground", children: d.badge })
+            ) : d.badge && /* @__PURE__ */ jsx3("span", { className: "ml-auto shrink-0 rounded bg-surface-container-high px-1 py-0.5 text-[9px] text-muted-foreground", children: d.badge })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-[10px] text-muted-foreground", children: [
-            /* @__PURE__ */ jsx("span", { className: "truncate", children: model ?? d.subtitle ?? d.kind }),
-            cost && /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0", children: cost }),
-            duration && /* @__PURE__ */ jsxs("span", { className: "shrink-0", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1.5 text-[10px] text-muted-foreground", children: [
+            /* @__PURE__ */ jsx3("span", { className: "truncate", children: model ?? d.subtitle ?? d.kind }),
+            cost && /* @__PURE__ */ jsx3("span", { className: "ml-auto shrink-0", children: cost }),
+            duration && /* @__PURE__ */ jsxs2("span", { className: "shrink-0", children: [
               "\xB7 ",
               duration
             ] })
           ] })
         ] })
       ] }),
-      state?.status === "running" && /* @__PURE__ */ jsx(
+      state?.status === "running" && /* @__PURE__ */ jsx3(
         "div",
         {
           className: "mt-1.5 h-0.5 w-full overflow-hidden rounded-full",
-          style: { background: "color-mix(in srgb, hsl(var(--muted-foreground)) 22%, transparent)" },
-          children: /* @__PURE__ */ jsx(
+          style: { background: MUTED_TRACK },
+          children: /* @__PURE__ */ jsx3(
             "div",
             {
               className: "h-full w-1/2 animate-pulse rounded-full",
@@ -334,83 +437,61 @@ function WorkflowNode({ data }) {
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: `${wrapperClass} px-3 py-2`, style: wrapperStyle, children: [
+  return /* @__PURE__ */ jsxs2("div", { className: wrapperClass, style: wrapperStyle, children: [
     handles,
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(NodeIcon, { kind: d.kind, accent, box: 24, glyph: 14 }),
-      /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-[12px] text-foreground", children: d.title }),
-      state ? /* @__PURE__ */ jsx(
-        "span",
+    /* @__PURE__ */ jsxs2("div", { className: "flex min-h-0 flex-1 flex-col px-3 pt-2 pb-2", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx3(NodeIcon, { kind: d.kind, accent, box: 24, glyph: 14 }),
+        /* @__PURE__ */ jsx3("span", { className: "truncate font-medium text-[12px] text-foreground", children: d.title }),
+        state ? /* @__PURE__ */ jsx3(
+          "span",
+          {
+            className: `ml-auto shrink-0 rounded px-1.5 py-0.5 text-[10px] ${STATUS_BADGE[state.status]}`,
+            children: STATUS_LABEL[state.status]
+          }
+        ) : d.badge && /* @__PURE__ */ jsx3("span", { className: "ml-auto shrink-0 rounded bg-surface-container-high px-1.5 py-0.5 text-[10px] text-muted-foreground", children: d.badge })
+      ] }),
+      d.subtitle && /* @__PURE__ */ jsx3(
+        "p",
         {
-          className: `ml-auto shrink-0 rounded px-1.5 py-0.5 text-[10px] ${STATUS_BADGE[state.status]}`,
-          children: STATUS_LABEL[state.status]
+          className: "mt-1 truncate text-[11px] text-muted-foreground",
+          title: d.subtitle,
+          children: d.subtitle
         }
-      ) : d.badge && /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 rounded bg-surface-container-high px-1.5 py-0.5 text-[10px] text-muted-foreground", children: d.badge })
-    ] }),
-    d.subtitle && /* @__PURE__ */ jsx(
-      "p",
-      {
-        className: "mt-1 truncate text-[11px] text-muted-foreground",
-        title: d.subtitle,
-        children: d.subtitle
-      }
-    ),
-    (model || cost || tokens) && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-1", children: [
-      model && /* @__PURE__ */ jsx(MetaChip, { title: model, children: model }),
-      cost && /* @__PURE__ */ jsx(MetaChip, { children: cost }),
-      tokens && /* @__PURE__ */ jsx(MetaChip, { children: tokens })
+      ),
+      d.provider && /* @__PURE__ */ jsxs2("span", { className: "mt-1.5 inline-flex w-fit items-center gap-1 rounded bg-surface-container-high px-1.5 py-0.5 text-[10px] text-muted-foreground", children: [
+        /* @__PURE__ */ jsx3(
+          ProviderIcon,
+          {
+            id: d.provider,
+            displayName: providerLabel(d.provider),
+            size: 12,
+            className: "rounded-[2px]"
+          }
+        ),
+        providerLabel(d.provider)
+      ] }),
+      (model || cost || tokens) && /* @__PURE__ */ jsxs2("div", { className: "mt-1.5 flex flex-wrap items-center gap-1", children: [
+        model && /* @__PURE__ */ jsx3(MetaChip, { title: model, children: model }),
+        cost && /* @__PURE__ */ jsx3(MetaChip, { children: cost }),
+        tokens && /* @__PURE__ */ jsx3(MetaChip, { children: tokens })
+      ] }),
+      runOutput && /* @__PURE__ */ jsxs2("div", { className: "mt-1.5 min-h-0", children: [
+        /* @__PURE__ */ jsx3("div", { className: "mb-0.5 font-medium text-[8px] text-muted-foreground/70 uppercase tracking-[0.08em]", children: runOutput.label }),
+        /* @__PURE__ */ jsx3(NodeOutputBody, { shape: runOutput.shape, tone: runOutput.tone, rows: 2 })
+      ] })
     ] }),
-    state?.status === "failed" && errorText && /* @__PURE__ */ jsx(
-      "p",
-      {
-        className: "mt-1.5 line-clamp-2 text-[10px] text-red-400",
-        title: errorText,
-        children: errorText
-      }
-    ),
-    outputText && state?.status !== "failed" && /* @__PURE__ */ jsx(
-      "p",
-      {
-        className: "mt-1.5 line-clamp-2 text-[10px] text-muted-foreground",
-        title: outputText,
-        children: outputText
-      }
-    ),
-    state && d.tone !== "trigger" && /* @__PURE__ */ jsx(
-      ProgressStrip,
+    state && d.tone !== "trigger" && /* @__PURE__ */ jsx3(
+      StatusFooter,
       {
         status: state.status,
         rounds: isAgent ? state.rounds : void 0,
         elapsed: duration
       }
-    ),
-    d.provider && /* @__PURE__ */ jsxs("span", { className: "mt-1.5 inline-flex w-fit items-center gap-1 rounded bg-surface-container-high px-1.5 py-0.5 text-[10px] text-muted-foreground", children: [
-      /* @__PURE__ */ jsx(
-        ProviderIcon,
-        {
-          id: d.provider,
-          displayName: providerLabel(d.provider),
-          size: 12,
-          className: "rounded-[2px]"
-        }
-      ),
-      providerLabel(d.provider)
-    ] })
+    )
   ] });
 }
 var NODE_TYPES = { wfNode: WorkflowNode };
-function edgeColor(status) {
-  switch (status) {
-    case "running":
-      return EDGE_RUNNING;
-    case "succeeded":
-      return EDGE_DONE;
-    case "failed":
-      return EDGE_FAIL;
-    default:
-      return EDGE_MUTED;
-  }
-}
 function buildStyledEdges(base, nodeState) {
   return base.map((e) => {
     const status = nodeState?.[e.target]?.status;
@@ -486,7 +567,7 @@ function WorkflowGraph({
     [onNodeClick]
   );
   if (structural.error || structural.nodes.length === 0) {
-    return /* @__PURE__ */ jsx(
+    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 ?? ""}`,
@@ -494,7 +575,7 @@ function WorkflowGraph({
       }
     );
   }
-  return /* @__PURE__ */ jsx(DirectionContext.Provider, { value: direction, children: /* @__PURE__ */ jsx(DensityContext.Provider, { value: compact, children: /* @__PURE__ */ jsx("div", { className: `wf-graph ${className ?? ""}`, children: /* @__PURE__ */ jsxs(
+  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,
@@ -524,10 +605,10 @@ function WorkflowGraph({
       minZoom: 0.2,
       maxZoom: 1.5,
       children: [
-        /* @__PURE__ */ jsx(Background, { gap: 18 }),
-        !isPreview && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Controls, { showInteractive: false, position: "bottom-right" }),
-          /* @__PURE__ */ jsx(Panel, { position: "top-left", children: /* @__PURE__ */ jsxs(
+        /* @__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",
@@ -536,7 +617,7 @@ function WorkflowGraph({
               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__ */ jsx(Maximize2, { size: 12 }) : /* @__PURE__ */ jsx(Minimize2, { size: 12 }),
+                userCompact ? /* @__PURE__ */ jsx3(Maximize2, { size: 12 }) : /* @__PURE__ */ jsx3(Minimize2, { size: 12 }),
                 userCompact ? "Expand" : "Compact"
               ]
             }

package/dist/{chunk-VXGI2XUK.js → chunk-FNE5QLU3.js}

@@ -18,19 +18,19 @@ import { parse as parseYaml } from "yaml";
 var NODE_W = 244;
 var RANK_SEP = 76;
 var CROSS_SEP = 22;
-var CARD_CHROME = 22;
-var HEADER_ROW = 30;
+var CARD_CHROME = 18;
+var HEADER_ROW = 28;
 var TEXT_ROW = 20;
 var META_ROW = 46;
-var PREVIEW_ROW = 36;
-var PROGRESS_ROW = 26;
+var OUTPUT_ROW = 44;
+var FOOTER_ROW = 26;
 var COMPACT_NODE_SIZE = { width: 240, height: 64 };
 function nodeHeight(data, withRunState) {
   let h = CARD_CHROME + HEADER_ROW;
   if (data.subtitle) h += TEXT_ROW;
-  if (withRunState || data.model) h += META_ROW;
-  if (withRunState) h += PREVIEW_ROW + PROGRESS_ROW;
   if (data.provider) h += TEXT_ROW;
+  if (withRunState || data.model) h += META_ROW;
+  if (withRunState) h += OUTPUT_ROW + FOOTER_ROW;
   return h;
 }
 function asRecord(v) {

package/dist/globals.css

@@ -75,6 +75,7 @@
     --tracking-wider: 0.05em;
     --tracking-widest: 0.1em;
     --leading-tight: 1.25;
+    --leading-snug: 1.375;
     --leading-relaxed: 1.625;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
@@ -542,6 +543,9 @@
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
+  .mt-auto {
+    margin-top: auto;
+  }
   .mr-1 {
     margin-right: calc(var(--spacing) * 1);
   }
@@ -626,6 +630,12 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
   }
+  .line-clamp-3 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
   .block {
     display: block;
   }
@@ -1186,6 +1196,9 @@
   .max-w-\[14rem\] {
     max-width: 14rem;
   }
+  .max-w-\[45\%\] {
+    max-width: 45%;
+  }
   .max-w-\[75\%\] {
     max-width: 75%;
   }
@@ -1922,6 +1935,12 @@
   .border-border {
     border-color: var(--color-border);
   }
+  .border-border\/60 {
+    border-color: color-mix(in srgb, hsl(var(--border)) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-border) 60%, transparent);
+    }
+  }
   .border-destructive\/20 {
     border-color: color-mix(in srgb, hsl(var(--destructive)) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2961,6 +2980,10 @@
     --tw-leading: var(--leading-relaxed);
     line-height: var(--leading-relaxed);
   }
+  .leading-snug {
+    --tw-leading: var(--leading-snug);
+    line-height: var(--leading-snug);
+  }
   .leading-tight {
     --tw-leading: var(--leading-tight);
     line-height: var(--leading-tight);
@@ -3286,6 +3309,12 @@
   .text-red-400 {
     color: var(--color-red-400);
   }
+  .text-red-400\/80 {
+    color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-red-400) 80%, transparent);
+    }
+  }
   .text-secondary-foreground {
     color: var(--color-secondary-foreground);
   }

package/dist/styles.css

@@ -75,6 +75,7 @@
     --tracking-wider: 0.05em;
     --tracking-widest: 0.1em;
     --leading-tight: 1.25;
+    --leading-snug: 1.375;
     --leading-relaxed: 1.625;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
@@ -542,6 +543,9 @@
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
+  .mt-auto {
+    margin-top: auto;
+  }
   .mr-1 {
     margin-right: calc(var(--spacing) * 1);
   }
@@ -626,6 +630,12 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
   }
+  .line-clamp-3 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
   .block {
     display: block;
   }
@@ -1186,6 +1196,9 @@
   .max-w-\[14rem\] {
     max-width: 14rem;
   }
+  .max-w-\[45\%\] {
+    max-width: 45%;
+  }
   .max-w-\[75\%\] {
     max-width: 75%;
   }
@@ -1922,6 +1935,12 @@
   .border-border {
     border-color: var(--color-border);
   }
+  .border-border\/60 {
+    border-color: color-mix(in srgb, hsl(var(--border)) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-border) 60%, transparent);
+    }
+  }
   .border-destructive\/20 {
     border-color: color-mix(in srgb, hsl(var(--destructive)) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2961,6 +2980,10 @@
     --tw-leading: var(--leading-relaxed);
     line-height: var(--leading-relaxed);
   }
+  .leading-snug {
+    --tw-leading: var(--leading-snug);
+    line-height: var(--leading-snug);
+  }
   .leading-tight {
     --tw-leading: var(--leading-tight);
     line-height: var(--leading-tight);
@@ -3286,6 +3309,12 @@
   .text-red-400 {
     color: var(--color-red-400);
   }
+  .text-red-400\/80 {
+    color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-red-400) 80%, transparent);
+    }
+  }
   .text-secondary-foreground {
     color: var(--color-secondary-foreground);
   }

package/dist/workflows.js

@@ -1,6 +1,6 @@
 import {
   buildWorkflowGraph
-} from "./chunk-VXGI2XUK.js";
+} from "./chunk-FNE5QLU3.js";
 import "./chunk-U67V476Y.js";
 
 // src/workflows/WorkflowGraphLazy.tsx
@@ -26,7 +26,7 @@ function retryImport(factory, retries = 2, delayMs = 350) {
 function lazyWorkflowGraph() {
   return lazy(
     () => retryImport(
-      () => import("./WorkflowGraph-64XJBIW2.js").then((m) => ({ default: m.WorkflowGraph }))
+      () => import("./WorkflowGraph-RA7ZHN4I.js").then((m) => ({ default: m.WorkflowGraph }))
     )
   );
 }

package/package.json

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