@tangle-network/sandbox-ui 0.51.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/{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/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.51.0",
+  "version": "0.52.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",