@tangle-network/sandbox-ui 0.50.0 → 0.52.0

package/dist/{WorkflowGraph-4JREVTSK.js → WorkflowGraph-FSS7GW5O.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-GTJ5PSK5.js";
 import {
   buildWorkflowGraph
-} from "./chunk-46VFHJPQ.js";
+} from "./chunk-DEN4GUA7.js";
 import {
   providerLabel
 } from "./chunk-7JLB7UZ3.js";
@@ -15,7 +15,9 @@ import {
   Controls,
   Handle,
   Position,
-  ReactFlow
+  ReactFlow,
+  useEdgesState,
+  useNodesState
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 import {
@@ -27,7 +29,9 @@ import {
 
 // src/workflows/flow-graph.ts
 function buildFlowGraph(yaml, nodeState) {
-  const graph = buildWorkflowGraph(yaml);
+  const graph = buildWorkflowGraph(yaml, {
+    reserveRunState: nodeState !== void 0
+  });
   return {
     error: graph.error,
     nodes: graph.nodes.map(
@@ -47,6 +51,22 @@ function buildFlowGraph(yaml, nodeState) {
     }))
   };
 }
+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/format.ts
 function fmtDuration(ms) {
@@ -240,22 +260,33 @@ function WorkflowGraph({
   onNodeClick
 }) {
   const colorMode = useColorMode();
-  const { nodes, edges, error } = useMemo(
-    () => buildFlowGraph(yaml, nodeState),
-    [yaml, nodeState]
+  const hasRunOverlay = nodeState !== void 0;
+  const structural = useMemo(
+    () => buildFlowGraph(yaml, hasRunOverlay ? {} : void 0),
+    [yaml, hasRunOverlay]
   );
+  const [nodes, setNodes, onNodesChange] = useNodesState(structural.nodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(structural.edges);
+  useEffect(() => {
+    setNodes(structural.nodes);
+    setEdges(structural.edges);
+  }, [structural, setNodes, setEdges]);
+  useEffect(() => {
+    const baseById = new Map(structural.nodes.map((n) => [n.id, n.data]));
+    setNodes((prev) => mergeRunState(prev, baseById, nodeState));
+  }, [nodeState, structural, setNodes]);
   const handleNodeClick = useCallback(
     (_event, node) => {
       onNodeClick?.(node.id, node.data);
     },
     [onNodeClick]
   );
-  if (error || nodes.length === 0) {
+  if (structural.error || structural.nodes.length === 0) {
     return /* @__PURE__ */ jsx(
       "div",
       {
         className: `flex items-center justify-center rounded-lg border border-border border-dashed p-4 text-center text-text-muted text-xs ${className ?? ""}`,
-        children: error ?? "Nothing to show"
+        children: structural.error ?? "Nothing to show"
       }
     );
   }
@@ -265,6 +296,8 @@ function WorkflowGraph({
     {
       nodes,
       edges,
+      onNodesChange,
+      onEdgesChange,
       nodeTypes: NODE_TYPES,
       colorMode,
       onNodeClick: onNodeClick ? handleNodeClick : void 0,
@@ -273,6 +306,8 @@ function WorkflowGraph({
       proOptions: { hideAttribution: true },
       nodesDraggable: !isPreview,
       nodesConnectable: false,
+      deleteKeyCode: null,
+      edgesReconnectable: false,
       elementsSelectable: !isPreview,
       edgesFocusable: false,
       zoomOnScroll: false,

package/dist/assistant.js

@@ -4,6 +4,10 @@ import {
 import {
   providerLabel
 } from "./chunk-7JLB7UZ3.js";
+import {
+  ModelPicker
+} from "./chunk-LQHTCM56.js";
+import "./chunk-EI44GEQ5.js";
 import "./chunk-U67V476Y.js";
 
 // src/assistant/sse.ts
@@ -1532,14 +1536,14 @@ function useAssistantThreads(userId) {
 // src/assistant/AssistantDock.tsx
 import { MessageSquare } from "lucide-react";
 import {
-  useEffect as useEffect5,
+  useEffect as useEffect6,
   useRef as useRef6
 } from "react";
 
 // src/assistant/AssistantPanel.tsx
 import { AgentTimeline, ChatInput, ThinkingIndicator } from "@tangle-network/ui/chat";
 import { History, MessageSquarePlus, Minus, Plus, Trash2, X } from "lucide-react";
-import { useRef as useRef4, useState as useState5 } from "react";
+import { useEffect as useEffect5, useMemo, useRef as useRef4, useState as useState5 } from "react";
 
 // src/assistant/build-timeline.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
@@ -1910,6 +1914,23 @@ function defaultFormatMoney(usd) {
     currency: "USD"
   }).format(usd);
 }
+function toPickerModels(models, selected) {
+  const mapped = models.models.map((m) => ({
+    id: m.slug,
+    name: m.label,
+    ...m.contextTokens != null ? { context_length: m.contextTokens } : {}
+  }));
+  for (const slug of [models.default, selected]) {
+    if (slug && !mapped.some((m) => m.id === slug)) {
+      mapped.push({ id: slug, name: slug });
+    }
+  }
+  return mapped;
+}
+function nextModelSelection(id, defaultSlug) {
+  if (defaultSlug != null && id === defaultSlug) return null;
+  return id || null;
+}
 function AssistantPanel({
   chat,
   userId,
@@ -1924,9 +1945,41 @@ function AssistantPanel({
   const threads = useAssistantThreads(userId);
   const font = useFontScale();
   const [historyOpen, setHistoryOpen] = useState5(false);
+  const historyRef = useRef4(null);
+  const historyButtonRef = useRef4(null);
+  const pickerModels = useMemo(
+    () => toPickerModels(models, chat.selectedModel),
+    [models, chat.selectedModel]
+  );
+  const pickerValue = chat.selectedModel ?? models.default ?? "";
   const { state } = chat;
   const chatRef = useRef4(chat);
   chatRef.current = chat;
+  useEffect5(() => {
+    if (!historyOpen) return;
+    const onPointerDown = (e) => {
+      const target = e.target;
+      if (historyRef.current?.contains(target)) return;
+      if (historyButtonRef.current?.contains(target)) return;
+      setHistoryOpen(false);
+    };
+    const onKeyDownCapture = (e) => {
+      if (e.key !== "Escape") return;
+      if (!historyRef.current?.contains(e.target)) return;
+      e.stopImmediatePropagation();
+      setHistoryOpen(false);
+      historyButtonRef.current?.focus();
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDownCapture, true);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDownCapture, true);
+    };
+  }, [historyOpen]);
+  useEffect5(() => {
+    if (historyOpen) historyRef.current?.focus();
+  }, [historyOpen]);
   const effectiveBalance = state.usage?.balanceUsd ?? balanceUsd;
   const errorView = state.error ? presentError(state.error.code, state.error.message) : null;
   const low = isLowBalance(effectiveBalance) && !errorView;
@@ -1965,140 +2018,161 @@ function AssistantPanel({
       chatRef.current.reset();
     }
   };
-  return /* @__PURE__ */ jsxs2("div", { className: "flex h-full flex-col bg-background", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-2 border-border border-b px-4 py-3", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-col", children: [
-        /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline gap-2", children: [
-          /* @__PURE__ */ jsx4("span", { className: "font-medium text-foreground text-sm", children: "Assistant" }),
-          /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs2("div", { className: "relative flex h-full flex-col bg-background", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "relative z-10 border-border border-b", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-2 px-4 pt-3 pb-1.5", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-col", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline gap-2", children: [
+            /* @__PURE__ */ jsx4("span", { className: "font-medium text-foreground text-sm", children: "Assistant" }),
+            /* @__PURE__ */ jsx4(
+              "span",
+              {
+                "aria-label": "Your credit balance",
+                className: "text-muted-foreground text-xs",
+                children: formatMoney(effectiveBalance)
+              }
+            )
+          ] }),
+          conversationTitle && /* @__PURE__ */ jsx4(
             "span",
             {
-              "aria-label": "Your credit balance",
-              className: "text-muted-foreground text-xs",
-              children: formatMoney(effectiveBalance)
+              className: "truncate text-muted-foreground text-xs",
+              title: conversationTitle,
+              children: conversationTitle
             }
           )
         ] }),
-        conversationTitle && /* @__PURE__ */ jsx4(
-          "span",
-          {
-            className: "truncate text-muted-foreground text-xs",
-            title: conversationTitle,
-            children: conversationTitle
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "flex shrink-0 items-center gap-1", children: [
-        /* @__PURE__ */ jsxs2("div", { className: "flex items-center", role: "group", "aria-label": "Text size", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex shrink-0 items-center gap-0.5", children: [
           /* @__PURE__ */ jsx4(
             "button",
             {
+              ref: historyButtonRef,
               type: "button",
-              onClick: font.decrease,
-              disabled: !font.canDecrease,
-              "aria-label": "Decrease text size",
-              className: "rounded p-1 text-muted-foreground hover:text-foreground disabled:opacity-40",
-              children: /* @__PURE__ */ jsx4(Minus, { className: "h-4 w-4" })
+              onClick: openHistory,
+              "aria-label": "Chat history",
+              "aria-pressed": historyOpen,
+              className: `rounded-md p-1.5 transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring ${historyOpen ? "bg-muted text-foreground" : "text-muted-foreground"}`,
+              children: /* @__PURE__ */ jsx4(History, { className: "h-4 w-4" })
             }
           ),
           /* @__PURE__ */ jsx4(
             "button",
             {
               type: "button",
-              onClick: font.increase,
-              disabled: !font.canIncrease,
-              "aria-label": "Increase text size",
-              className: "rounded p-1 text-muted-foreground hover:text-foreground disabled:opacity-40",
-              children: /* @__PURE__ */ jsx4(Plus, { className: "h-4 w-4" })
+              onClick: chat.reset,
+              "aria-label": "New chat",
+              title: "New chat",
+              className: "rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: /* @__PURE__ */ jsx4(MessageSquarePlus, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              "aria-label": "Close assistant",
+              className: "rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: /* @__PURE__ */ jsx4(X, { className: "h-4 w-4" })
             }
           )
-        ] }),
-        /* @__PURE__ */ jsx4(
-          "button",
-          {
-            type: "button",
-            onClick: openHistory,
-            "aria-label": "Chat history",
-            "aria-pressed": historyOpen,
-            className: "rounded p-1 text-muted-foreground hover:text-foreground",
-            children: /* @__PURE__ */ jsx4(History, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsx4(
-          "button",
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-2 px-3 pb-2", children: [
+        pickerModels.length > 0 ? /* @__PURE__ */ jsx4(
+          ModelPicker,
           {
-            type: "button",
-            onClick: chat.reset,
-            "aria-label": "New chat",
-            title: "New chat",
-            className: "rounded p-1 text-muted-foreground hover:text-foreground",
-            children: /* @__PURE__ */ jsx4(MessageSquarePlus, { className: "h-4 w-4" })
+            variant: "pill",
+            label: "Model",
+            value: pickerValue,
+            onChange: (id) => chat.setModel(nextModelSelection(id, models.default)),
+            models: pickerModels
           }
-        ),
-        /* @__PURE__ */ jsx4(
-          "button",
+        ) : /* @__PURE__ */ jsx4("span", { className: "px-1 text-muted-foreground text-xs", children: "Default model" }),
+        /* @__PURE__ */ jsxs2(
+          "div",
           {
-            type: "button",
-            onClick: onClose,
-            "aria-label": "Close assistant",
-            className: "rounded p-1 text-muted-foreground hover:text-foreground",
-            children: /* @__PURE__ */ jsx4(X, { className: "h-4 w-4" })
+            className: "flex items-center overflow-hidden rounded-md border border-border",
+            role: "group",
+            "aria-label": "Text size",
+            children: [
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  onClick: font.decrease,
+                  disabled: !font.canDecrease,
+                  "aria-label": "Decrease text size",
+                  className: "px-1.5 py-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-40 disabled:hover:bg-transparent",
+                  children: /* @__PURE__ */ jsx4(Minus, { className: "h-3.5 w-3.5" })
+                }
+              ),
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  onClick: font.increase,
+                  disabled: !font.canIncrease,
+                  "aria-label": "Increase text size",
+                  className: "border-border border-l px-1.5 py-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-40 disabled:hover:bg-transparent",
+                  children: /* @__PURE__ */ jsx4(Plus, { className: "h-3.5 w-3.5" })
+                }
+              )
+            ]
           }
         )
-      ] })
-    ] }),
-    models.models.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 border-border border-b px-4 py-2", children: [
-      /* @__PURE__ */ jsx4(
-        "label",
-        {
-          htmlFor: "assistant-model",
-          className: "text-muted-foreground text-xs",
-          children: "Model"
-        }
-      ),
-      /* @__PURE__ */ jsxs2(
-        "select",
+      ] }),
+      historyOpen && /* @__PURE__ */ jsxs2(
+        "div",
         {
-          id: "assistant-model",
-          value: chat.selectedModel ?? "",
-          onChange: (e) => chat.setModel(e.target.value || null),
-          className: "rounded border border-border bg-card px-2 py-1 text-foreground text-xs",
+          ref: historyRef,
+          role: "dialog",
+          "aria-label": "Recent conversations",
+          tabIndex: -1,
+          className: "absolute inset-x-2 top-full z-30 mt-1 overflow-hidden rounded-lg border border-border bg-surface-container-highest shadow-xl ring-1 ring-black/5 focus:outline-none",
           children: [
-            /* @__PURE__ */ jsx4("option", { value: "", children: models.default ?? "Default" }),
-            models.models.map((m) => /* @__PURE__ */ jsx4("option", { value: m.slug, children: m.label }, m.slug))
+            /* @__PURE__ */ jsx4("div", { className: "border-border border-b bg-surface-container-high px-3 py-2 font-medium text-[11px] text-muted-foreground uppercase tracking-wide", children: "Recent conversations" }),
+            /* @__PURE__ */ jsx4("div", { className: "max-h-[min(18rem,50vh)] overflow-y-auto", children: threads.threads.length === 0 ? /* @__PURE__ */ jsx4("p", { className: "px-3 py-3 text-muted-foreground text-xs", children: threads.loaded ? "No past conversations." : "Loading\u2026" }) : /* @__PURE__ */ jsx4("ul", { className: "py-1", children: threads.threads.map((t) => {
+              const busyActive = state.threadId === t.id && state.status !== "idle";
+              const active = state.threadId === t.id;
+              return /* @__PURE__ */ jsxs2(
+                "li",
+                {
+                  className: `group flex items-center transition-colors hover:bg-muted/60 ${active ? "bg-primary/10" : ""}`,
+                  children: [
+                    /* @__PURE__ */ jsx4(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => {
+                          chat.switchThread(t.id);
+                          setHistoryOpen(false);
+                        },
+                        className: `min-w-0 flex-1 truncate px-3 py-2 text-left text-xs ${active ? "font-medium text-foreground" : "text-foreground"}`,
+                        children: t.title ?? "Untitled conversation"
+                      }
+                    ),
+                    threads.canRemove && /* @__PURE__ */ jsx4(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => void deleteThread(t.id),
+                        disabled: busyActive,
+                        "aria-label": "Delete conversation",
+                        title: busyActive ? "Can't delete while this conversation is active" : "Delete conversation",
+                        className: "shrink-0 p-2 text-muted-foreground opacity-0 transition hover:text-destructive focus-visible:opacity-100 group-hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-30",
+                        children: /* @__PURE__ */ jsx4(Trash2, { className: "h-3.5 w-3.5" })
+                      }
+                    )
+                  ]
+                },
+                t.id
+              );
+            }) }) })
           ]
         }
       )
     ] }),
-    historyOpen && /* @__PURE__ */ jsx4("div", { className: "max-h-48 overflow-y-auto border-border border-b", children: threads.threads.length === 0 ? /* @__PURE__ */ jsx4("p", { className: "px-4 py-3 text-muted-foreground text-xs", children: threads.loaded ? "No past conversations." : "Loading\u2026" }) : /* @__PURE__ */ jsx4("ul", { children: threads.threads.map((t) => {
-      const busyActive = state.threadId === t.id && state.status !== "idle";
-      return /* @__PURE__ */ jsxs2("li", { className: "group flex items-center hover:bg-muted/50", children: [
-        /* @__PURE__ */ jsx4(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              chat.switchThread(t.id);
-              setHistoryOpen(false);
-            },
-            className: "min-w-0 flex-1 truncate px-4 py-2 text-left text-foreground text-xs",
-            children: t.title ?? "Untitled conversation"
-          }
-        ),
-        threads.canRemove && /* @__PURE__ */ jsx4(
-          "button",
-          {
-            type: "button",
-            onClick: () => void deleteThread(t.id),
-            disabled: busyActive,
-            "aria-label": "Delete conversation",
-            title: busyActive ? "Can't delete while this conversation is active" : "Delete conversation",
-            className: "shrink-0 p-2 text-muted-foreground opacity-0 transition hover:text-destructive focus-visible:opacity-100 group-hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-30",
-            children: /* @__PURE__ */ jsx4(Trash2, { className: "h-3.5 w-3.5" })
-          }
-        )
-      ] }, t.id);
-    }) }) }),
     /* @__PURE__ */ jsx4(
       "div",
       {
@@ -2106,7 +2180,7 @@ function AssistantPanel({
         "aria-label": "Conversation",
         "aria-live": "polite",
         className: "min-h-0 flex-1 overflow-y-auto px-2 py-3",
-        style: { fontSize: `${font.scale}rem` },
+        style: { zoom: font.scale },
         children: renderTranscript ? renderTranscript({
           messages: state.messages,
           reasoning: state.reasoning,
@@ -2192,7 +2266,7 @@ import {
   createContext as createContext2,
   useCallback as useCallback4,
   useContext as useContext2,
-  useMemo,
+  useMemo as useMemo2,
   useState as useState6
 } from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
@@ -2208,7 +2282,7 @@ function AssistantLauncherProvider({
   }, []);
   const closeAssistant = useCallback4(() => setOpen(false), []);
   const clearSeed = useCallback4(() => setSeed(null), []);
-  const value = useMemo(
+  const value = useMemo2(
     () => ({ open, seed, openAssistant, closeAssistant, clearSeed }),
     [open, seed, openAssistant, closeAssistant, clearSeed]
   );
@@ -2327,7 +2401,7 @@ function AssistantDock({
   const dialogRef = useRef6(null);
   const returnFocusRef = useRef6(null);
   const wasOpenRef = useRef6(false);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!open) return;
     const onKeyDown = (e) => {
       if (e.key === "Escape") closeAssistant();
@@ -2335,7 +2409,7 @@ function AssistantDock({
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [open, closeAssistant]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (open) {
       if (!wasOpenRef.current && !returnFocusRef.current) {
         returnFocusRef.current = document.activeElement;

package/dist/{chunk-46VFHJPQ.js → chunk-DEN4GUA7.js}

@@ -4,10 +4,22 @@ import {
 
 // src/workflows/model.ts
 import { parse as parseYaml } from "yaml";
-var ROW_GAP = 112;
 var BRANCH_X = 300;
-var BRANCH_ROW_GAP = 84;
-var BRANCH_STACK_PADDING = 40;
+var NODE_GAP = 44;
+var BRANCH_GAP = 24;
+var CARD_CHROME = 20;
+var TITLE_ROW = 22;
+var TEXT_ROW = 20;
+var META_ROW = 44;
+var PREVIEW_ROW = 34;
+function estimateNodeHeight(data, withRunState) {
+  let h = CARD_CHROME + TITLE_ROW;
+  if (data.subtitle) h += TEXT_ROW;
+  if (withRunState || data.model) h += META_ROW;
+  if (withRunState) h += PREVIEW_ROW;
+  if (data.provider) h += TEXT_ROW;
+  return h;
+}
 function asRecord(v) {
   return v && typeof v === "object" && !Array.isArray(v) ? v : {};
 }
@@ -165,7 +177,8 @@ function describeTrigger(on) {
     tone: "trigger"
   };
 }
-function buildWorkflowGraph(yaml) {
+function buildWorkflowGraph(yaml, options) {
+  const reserveRunState = options?.reserveRunState ?? false;
   if (!yaml || yaml.trim() === "") {
     return { nodes: [], edges: [], error: "No definition" };
   }
@@ -193,13 +206,10 @@ function buildWorkflowGraph(yaml) {
     });
   };
   if (def.on) {
-    nodes.push({
-      id: "trigger",
-      position: { x: 0, y },
-      data: describeTrigger(def.on)
-    });
+    const data = describeTrigger(def.on);
+    nodes.push({ id: "trigger", position: { x: 0, y }, data });
     prevId = "trigger";
-    y += ROW_GAP;
+    y += estimateNodeHeight(data, false) + NODE_GAP;
   }
   actions.forEach((action, i) => {
     const id = `a${i}`;
@@ -207,6 +217,7 @@ function buildWorkflowGraph(yaml) {
     nodes.push({ id, position: { x: 0, y }, data });
     if (prevId) addEdge(prevId, id, false);
     prevId = id;
+    const spineHeight = estimateNodeHeight(data, reserveRunState);
     const rec = asRecord(action);
     const children = "parallel" in rec ? Array.isArray(asRecord(rec.parallel).branches) ? asRecord(rec.parallel).branches : [] : "foreach" in rec ? (
       // A foreach with no `do` template has no child to render.
@@ -214,22 +225,23 @@ function buildWorkflowGraph(yaml) {
     ) : [];
     if (children.length > 0) {
       let by = y;
+      let branchStackHeight = 0;
       children.forEach((child, j) => {
         const cid = `${id}-b${j}`;
+        const childData = describeAction(child);
         nodes.push({
           id: cid,
           position: { x: BRANCH_X, y: by },
-          data: describeAction(child)
+          data: childData
         });
         addEdge(id, cid, true);
-        by += BRANCH_ROW_GAP;
+        const childHeight = estimateNodeHeight(childData, reserveRunState);
+        by += childHeight + BRANCH_GAP;
+        branchStackHeight += childHeight + BRANCH_GAP;
       });
-      y += Math.max(
-        ROW_GAP,
-        children.length * BRANCH_ROW_GAP + BRANCH_STACK_PADDING
-      );
+      y += Math.max(spineHeight, branchStackHeight) + NODE_GAP;
     } else {
-      y += ROW_GAP;
+      y += spineHeight + NODE_GAP;
     }
   });
   return { nodes, edges, error: null };

package/dist/globals.css

@@ -317,6 +317,9 @@
   .inset-x-0 {
     inset-inline: calc(var(--spacing) * 0);
   }
+  .inset-x-2 {
+    inset-inline: calc(var(--spacing) * 2);
+  }
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
@@ -759,6 +762,9 @@
   .h-\[640px\] {
     height: 640px;
   }
+  .h-\[720px\] {
+    height: 720px;
+  }
   .h-\[var\(--avatar-size\)\] {
     height: var(--avatar-size);
   }
@@ -822,6 +828,9 @@
   .max-h-\[440px\] {
     max-height: 440px;
   }
+  .max-h-\[min\(18rem\,50vh\)\] {
+    max-height: min(18rem, 50vh);
+  }
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
@@ -1032,6 +1041,9 @@
   .w-\[420px\] {
     width: 420px;
   }
+  .w-\[460px\] {
+    width: 460px;
+  }
   .w-\[480px\] {
     width: 480px;
   }
@@ -3458,6 +3470,12 @@
   .ring-\[var\(--md3-outline-variant\)\] {
     --tw-ring-color: var(--md3-outline-variant);
   }
+  .ring-black\/5 {
+    --tw-ring-color: color-mix(in srgb, #000 5%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
+    }
+  }
   .ring-border {
     --tw-ring-color: var(--color-border);
   }
@@ -4206,6 +4224,16 @@
       }
     }
   }
+  .hover\:bg-muted\/60 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, hsl(var(--muted)) 60%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-muted) 60%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-muted\/80 {
     &:hover {
       @media (hover: hover) {
@@ -4773,6 +4801,15 @@
       opacity: 60%;
     }
   }
+  .disabled\:hover\:bg-transparent {
+    &:disabled {
+      &:hover {
+        @media (hover: hover) {
+          background-color: transparent;
+        }
+      }
+    }
+  }
   .data-\[disabled\]\:pointer-events-none {
     &[data-disabled] {
       pointer-events: none;

package/dist/styles.css

@@ -317,6 +317,9 @@
   .inset-x-0 {
     inset-inline: calc(var(--spacing) * 0);
   }
+  .inset-x-2 {
+    inset-inline: calc(var(--spacing) * 2);
+  }
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
@@ -759,6 +762,9 @@
   .h-\[640px\] {
     height: 640px;
   }
+  .h-\[720px\] {
+    height: 720px;
+  }
   .h-\[var\(--avatar-size\)\] {
     height: var(--avatar-size);
   }
@@ -822,6 +828,9 @@
   .max-h-\[440px\] {
     max-height: 440px;
   }
+  .max-h-\[min\(18rem\,50vh\)\] {
+    max-height: min(18rem, 50vh);
+  }
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
@@ -1032,6 +1041,9 @@
   .w-\[420px\] {
     width: 420px;
   }
+  .w-\[460px\] {
+    width: 460px;
+  }
   .w-\[480px\] {
     width: 480px;
   }
@@ -3458,6 +3470,12 @@
   .ring-\[var\(--md3-outline-variant\)\] {
     --tw-ring-color: var(--md3-outline-variant);
   }
+  .ring-black\/5 {
+    --tw-ring-color: color-mix(in srgb, #000 5%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
+    }
+  }
   .ring-border {
     --tw-ring-color: var(--color-border);
   }
@@ -4206,6 +4224,16 @@
       }
     }
   }
+  .hover\:bg-muted\/60 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, hsl(var(--muted)) 60%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-muted) 60%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-muted\/80 {
     &:hover {
       @media (hover: hover) {
@@ -4773,6 +4801,15 @@
       opacity: 60%;
     }
   }
+  .disabled\:hover\:bg-transparent {
+    &:disabled {
+      &:hover {
+        @media (hover: hover) {
+          background-color: transparent;
+        }
+      }
+    }
+  }
   .data-\[disabled\]\:pointer-events-none {
     &[data-disabled] {
       pointer-events: none;

package/dist/workflows.d.ts

@@ -18,6 +18,12 @@ type WfNodeStatus = "queued" | "running" | "succeeded" | "failed";
  * merged onto {@link WfNodeData.state} at render time. Absent ⇒ the graph shows
  * the static definition only (the assistant-proposal preview path). Driven from
  * a workflow run's per-action results so the graph animates as the run executes.
+ *
+ * Keep every field PRIMITIVE: `sameRunState` (flow-graph.ts) shallow-compares
+ * with `===` to decide whether a render tick changed a node. A nested object/
+ * array field would compare by reference (a structurally-equal value reads as
+ * changed → a harmless extra render, never a stale node) — if one is ever needed,
+ * teach `sameRunState` to compare it.
  */
 interface WfNodeState {
     status: WfNodeStatus;
@@ -85,10 +91,22 @@ interface WfGraph {
     /** Set when the YAML couldn't be parsed into a renderable graph. */
     error: string | null;
 }
+/** Options for {@link buildWorkflowGraph}. */
+interface BuildWorkflowGraphOptions {
+    /**
+     * Reserve vertical space for the rows live run state adds to a spine node (the
+     * meta-chip row + the output/error preview), so the RUN view's spine never
+     * overlaps once a node starts or terminates. The static/preview layout (no run
+     * overlay) leaves this off to stay compact. Defaults to `false`.
+     */
+    reserveRunState?: boolean;
+}
 /** Build a positioned graph from a workflow YAML string. Never throws —
  *  malformed YAML or an empty definition returns an `error` the UI can fall
- *  back on (e.g. show the raw YAML while authoring). */
-declare function buildWorkflowGraph(yaml: string): WfGraph;
+ *  back on (e.g. show the raw YAML while authoring). Pass
+ *  `{ reserveRunState: true }` for the run view so the spine leaves room for the
+ *  rows live run state adds (see {@link estimateNodeHeight}). */
+declare function buildWorkflowGraph(yaml: string, options?: BuildWorkflowGraphOptions): WfGraph;
 
 interface WorkflowGraphProps {
     /** Workflow YAML to render. */
@@ -116,4 +134,4 @@ interface WorkflowGraphProps {
 
 declare function WorkflowGraph(props: WorkflowGraphProps): react_jsx_runtime.JSX.Element;
 
-export { type WfEdge, type WfGraph, type WfNode, type WfNodeData, type WfNodeState, type WfNodeStatus, type WfNodeTone, WorkflowGraph as WorkflowGraphLazy, type WorkflowGraphProps, buildWorkflowGraph };
+export { type BuildWorkflowGraphOptions, type WfEdge, type WfGraph, type WfNode, type WfNodeData, type WfNodeState, type WfNodeStatus, type WfNodeTone, WorkflowGraph as WorkflowGraphLazy, type WorkflowGraphProps, buildWorkflowGraph };

package/dist/workflows.js

@@ -1,6 +1,6 @@
 import {
   buildWorkflowGraph
-} from "./chunk-46VFHJPQ.js";
+} from "./chunk-DEN4GUA7.js";
 import "./chunk-7JLB7UZ3.js";
 import "./chunk-U67V476Y.js";
 
@@ -27,7 +27,7 @@ function retryImport(factory, retries = 2, delayMs = 350) {
 function lazyWorkflowGraph() {
   return lazy(
     () => retryImport(
-      () => import("./WorkflowGraph-4JREVTSK.js").then((m) => ({ default: m.WorkflowGraph }))
+      () => import("./WorkflowGraph-FSS7GW5O.js").then((m) => ({ default: m.WorkflowGraph }))
     )
   );
 }

package/package.json

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