@bian-womp/spark-workbench 0.1.30 → 0.2.1

package/lib/cjs/index.cjs

@@ -3,9 +3,10 @@
 var sparkGraph = require('@bian-womp/spark-graph');
 var sparkRemote = require('@bian-womp/spark-remote');
 var React = require('react');
+var react = require('@xyflow/react');
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('@phosphor-icons/react');
-var ReactFlow = require('reactflow');
+var react$1 = require('@phosphor-icons/react');
+var isEqual = require('lodash/isEqual');
 var cx = require('classnames');
 
 class DefaultUIExtensionRegistry {
@@ -232,6 +233,10 @@ class InMemoryWorkbench extends AbstractWorkbench {
     setSelection(sel) {
         this.selection = { nodes: [...sel.nodes], edges: [...sel.edges] };
         this.emit("selectionChanged", this.selection);
+        this.emit("graphUiChanged", {
+            def: this.def,
+            change: { type: "selection" },
+        });
     }
     getSelection() {
         return {
@@ -239,18 +244,6 @@ class InMemoryWorkbench extends AbstractWorkbench {
             edges: [...this.selection.edges],
         };
     }
-    toggleNodeSelection(nodeId) {
-        this.selection.nodes = this.selection.nodes.includes(nodeId)
-            ? this.selection.nodes.filter((id) => id !== nodeId)
-            : [...this.selection.nodes, nodeId];
-        this.emit("selectionChanged", this.selection);
-    }
-    toggleEdgeSelection(edgeId) {
-        this.selection.edges = this.selection.edges.includes(edgeId)
-            ? this.selection.edges.filter((id) => id !== edgeId)
-            : [...this.selection.edges, edgeId];
-        this.emit("selectionChanged", this.selection);
-    }
     on(event, handler) {
         if (!this.listeners.has(event))
             this.listeners.set(event, new Set());
@@ -760,49 +753,119 @@ function useWorkbenchBridge(wb) {
         });
     }, [wb]);
     const onNodesChange = React.useCallback((changes) => {
+        // Apply position updates
         changes.forEach((c) => {
-            if (c.type === "position" && c.position)
+            if (c.type === "position" && c.position) {
                 wb.setPosition(c.id, c.position);
-            if (c.type === "remove")
-                wb.removeNode(c.id);
-            if (c.type === "select")
-                wb.toggleNodeSelection(c.id);
+            }
         });
+        // Derive next node selection from change set
+        const current = wb.getSelection();
+        const nextNodeIds = new Set(current.nodes);
+        let selectionChanged = false;
+        for (const change of changes) {
+            const type = change?.type;
+            if (type === "select") {
+                const id = change.id;
+                const selected = change.selected;
+                if (typeof selected === "boolean") {
+                    if (selected) {
+                        if (!nextNodeIds.has(id)) {
+                            nextNodeIds.add(id);
+                            selectionChanged = true;
+                        }
+                    }
+                    else if (nextNodeIds.delete(id)) {
+                        selectionChanged = true;
+                    }
+                }
+            }
+            else if (type === "selectNodes") {
+                const ids = change.ids;
+                const selected = change.selected;
+                if (Array.isArray(ids) && typeof selected === "boolean") {
+                    for (const id of ids) {
+                        if (selected) {
+                            if (!nextNodeIds.has(id)) {
+                                nextNodeIds.add(id);
+                                selectionChanged = true;
+                            }
+                        }
+                        else if (nextNodeIds.delete(id)) {
+                            selectionChanged = true;
+                        }
+                    }
+                }
+            }
+            else if (type === "remove") {
+                const id = change.id;
+                if (nextNodeIds.delete(id))
+                    selectionChanged = true;
+            }
+        }
+        if (selectionChanged) {
+            wb.setSelection({ nodes: Array.from(nextNodeIds), edges: current.edges });
+        }
     }, [wb]);
     const onEdgesDelete = React.useCallback((edges) => edges.forEach((e) => wb.disconnect(e.id)), [wb]);
     const onEdgesChange = React.useCallback((changes) => {
-        changes.forEach((c) => {
-            if (c.type === "remove")
-                wb.disconnect(c.id);
-            else if (c.type === "select")
-                wb.toggleEdgeSelection(c.id);
-        });
+        const current = wb.getSelection();
+        const nextEdgeIds = new Set(current.edges);
+        let selectionChanged = false;
+        for (const change of changes) {
+            const type = change?.type;
+            if (type === "select") {
+                const id = change.id;
+                const selected = change.selected;
+                if (typeof selected === "boolean") {
+                    if (selected) {
+                        if (!nextEdgeIds.has(id)) {
+                            nextEdgeIds.add(id);
+                            selectionChanged = true;
+                        }
+                    }
+                    else if (nextEdgeIds.delete(id)) {
+                        selectionChanged = true;
+                    }
+                }
+            }
+            else if (type === "selectEdges") {
+                const ids = change.ids;
+                const selected = change.selected;
+                if (Array.isArray(ids) && typeof selected === "boolean") {
+                    for (const id of ids) {
+                        if (selected) {
+                            if (!nextEdgeIds.has(id)) {
+                                nextEdgeIds.add(id);
+                                selectionChanged = true;
+                            }
+                        }
+                        else if (nextEdgeIds.delete(id)) {
+                            selectionChanged = true;
+                        }
+                    }
+                }
+            }
+            else if (type === "remove") {
+                const id = change.id;
+                if (nextEdgeIds.delete(id))
+                    selectionChanged = true;
+            }
+        }
+        if (selectionChanged) {
+            wb.setSelection({ nodes: current.nodes, edges: Array.from(nextEdgeIds) });
+        }
     }, [wb]);
     const onNodesDelete = React.useCallback((nodes) => {
         for (const n of nodes)
             wb.removeNode(n.id);
     }, [wb]);
-    const onSelectionChange = React.useCallback((sel) => {
-        const next = {
-            nodes: sel.nodes.map((n) => n.id),
-            edges: sel.edges.map((e) => e.id),
-        };
-        const cur = wb.getSelection();
-        const sameLen = cur.nodes.length === next.nodes.length &&
-            cur.edges.length === next.edges.length;
-        const same = sameLen &&
-            cur.nodes.every((id, i) => id === next.nodes[i]) &&
-            cur.edges.every((id, i) => id === next.edges[i]);
-        if (!same)
-            wb.setSelection(next);
-    }, [wb]);
     return {
         onConnect,
         onNodesChange,
         onEdgesChange,
         onEdgesDelete,
         onNodesDelete,
-        onSelectionChange,
     };
 }
 function useWorkbenchGraphTick(wb) {
@@ -842,6 +905,39 @@ function useWorkbenchVersionTick(runner) {
     }, [runner]);
     return version;
 }
+function useThrottledValue(value, intervalMs) {
+    const [throttled, setThrottled] = React.useState(value);
+    const lastSetAtRef = React.useRef(0);
+    const timeoutRef = React.useRef(null);
+    React.useEffect(() => {
+        const now = (typeof performance !== "undefined" && performance.now) ? performance.now() : Date.now();
+        const elapsed = now - lastSetAtRef.current;
+        if (elapsed >= intervalMs) {
+            lastSetAtRef.current = now;
+            setThrottled(value);
+        }
+        else {
+            if (timeoutRef.current !== null) {
+                window.clearTimeout(timeoutRef.current);
+            }
+            timeoutRef.current = window.setTimeout(() => {
+                lastSetAtRef.current = (typeof performance !== "undefined" && performance.now) ? performance.now() : Date.now();
+                setThrottled(value);
+                timeoutRef.current = null;
+            }, Math.max(0, intervalMs - elapsed));
+        }
+        return () => { };
+    }, [value, intervalMs]);
+    React.useEffect(() => {
+        return () => {
+            if (timeoutRef.current !== null) {
+                window.clearTimeout(timeoutRef.current);
+                timeoutRef.current = null;
+            }
+        };
+    }, []);
+    return throttled;
+}
 // Query param helpers
 function setSearchParam(key, val) {
     if (typeof window === "undefined")
@@ -1002,7 +1098,13 @@ function summarizeDeep(value) {
     return value;
 }
 
+// Shared UI constants for node layout to keep mapping and rendering in sync
+const NODE_HEADER_HEIGHT_PX = 24;
+const NODE_ROW_HEIGHT_PX = 22;
+
 function toReactFlow(def, positions, registry, opts) {
+    const EDGE_STYLE_ERROR = { stroke: "#ef4444", strokeWidth: 2 };
+    const EDGE_STYLE_RUNNING = { stroke: "#3b82f6" };
     const nodeHandleMap = {};
     const nodes = def.nodes.map((n) => {
         const desc = registry.nodes.get(n.typeId);
@@ -1014,6 +1116,35 @@ function toReactFlow(def, positions, registry, opts) {
             inputs: new Set(inputHandles.map((h) => h.id)),
             outputs: new Set(outputHandles.map((h) => h.id)),
         };
+        // Match DefaultNode sizing heuristics to avoid hidden nodes during re-measure
+        const HEADER_SIZE = NODE_HEADER_HEIGHT_PX;
+        const ROW_SIZE = NODE_ROW_HEIGHT_PX;
+        const maxRows = Math.max(inputHandles.length, outputHandles.length);
+        const initialWidth = opts.showValues ? 320 : 240;
+        const initialHeight = HEADER_SIZE + maxRows * ROW_SIZE;
+        // Precompute handle bounds so edges can render immediately without waiting for measurement
+        const handles = [
+            // Inputs on the left as targets
+            ...inputHandles.map((h, i) => ({
+                id: h.id,
+                type: "target",
+                position: react.Position.Left,
+                x: 0,
+                y: HEADER_SIZE + i * ROW_SIZE,
+                width: 1,
+                height: ROW_SIZE + 2,
+            })),
+            // Outputs on the right as sources
+            ...outputHandles.map((h, i) => ({
+                id: h.id,
+                type: "source",
+                position: react.Position.Right,
+                x: initialWidth - 1,
+                y: HEADER_SIZE + i * ROW_SIZE,
+                width: 1,
+                height: ROW_SIZE + 2,
+            })),
+        ];
         return {
             id: n.nodeId,
             data: {
@@ -1021,7 +1152,23 @@ function toReactFlow(def, positions, registry, opts) {
                 params: n.params,
                 inputHandles,
                 outputHandles,
+                handleLayout: [
+                    ...inputHandles.map((h, i) => ({
+                        id: h.id,
+                        type: "target",
+                        position: react.Position.Left,
+                        y: HEADER_SIZE + i * ROW_SIZE + ROW_SIZE / 2,
+                    })),
+                    ...outputHandles.map((h, i) => ({
+                        id: h.id,
+                        type: "source",
+                        position: react.Position.Right,
+                        y: HEADER_SIZE + i * ROW_SIZE + ROW_SIZE / 2,
+                    })),
+                ],
                 showValues: opts.showValues,
+                renderWidth: initialWidth,
+                renderHeight: initialHeight,
                 inputValues: opts.inputs?.[n.nodeId],
                 outputValues: opts.outputs?.[n.nodeId],
                 status: opts.nodeStatus?.[n.nodeId],
@@ -1038,6 +1185,11 @@ function toReactFlow(def, positions, registry, opts) {
             selected: opts.selectedNodeIds
                 ? opts.selectedNodeIds.has(n.nodeId)
                 : undefined,
+            initialWidth,
+            initialHeight,
+            handles,
+            width: initialWidth,
+            height: initialHeight,
         };
     });
     const edges = def.edges
@@ -1054,9 +1206,9 @@ function toReactFlow(def, positions, registry, opts) {
         const hasError = !!st?.lastError;
         const isInvalidEdge = !!opts.edgeValidation?.[e.id];
         const style = hasError || isInvalidEdge
-            ? { stroke: "#ef4444", strokeWidth: 2 }
+            ? EDGE_STYLE_ERROR
             : isRunning
-                ? { stroke: "#3b82f6" }
+                ? EDGE_STYLE_RUNNING
                 : undefined;
         return {
             id: e.id,
@@ -1084,17 +1236,35 @@ function getNodeBorderClassNames(args) {
     const hasValidationWarning = !hasValidationError && issues.length > 0;
     const isRunning = !!status.activeRuns;
     const isInvalid = !!status.invalidated && !isRunning && !hasError;
-    const borderWidth = selected ? "border-2" : "border";
+    // Keep border width constant to avoid layout reflow on selection toggles
+    const borderWidth = "border";
     const borderStyle = isInvalid ? "border-dashed" : "border-solid";
-    const borderColor = hasError || hasValidationError
-        ? "border-red-500"
+    const severity = hasError || hasValidationError
+        ? "red"
         : hasValidationWarning
-            ? "border-amber-500"
+            ? "amber"
             : isRunning
-                ? "border-blue-500"
-                : "border-gray-500 dark:border-gray-400";
-    const ring = isRunning ? " ring-2 ring-blue-200 dark:ring-blue-900" : "";
-    return `${borderWidth} ${borderStyle} ${borderColor}${ring}`.trim();
+                ? "blue"
+                : "gray";
+    const borderBySeverity = {
+        red: "border-red-500",
+        amber: "border-amber-500",
+        blue: "border-blue-500",
+        gray: "border-gray-500 dark:border-gray-400",
+    };
+    const ringBySeverity = {
+        red: "ring-2 ring-red-300 dark:ring-red-900",
+        amber: "ring-2 ring-amber-300 dark:ring-amber-900",
+        blue: "ring-2 ring-blue-200 dark:ring-blue-900",
+        gray: "ring-2 ring-gray-300 dark:ring-gray-500",
+    };
+    const borderColor = borderBySeverity[severity];
+    const ring = isRunning
+        ? ringBySeverity.blue
+        : selected
+            ? ringBySeverity[severity === "blue" ? "gray" : severity]
+            : "";
+    return [borderWidth, borderStyle, borderColor, ring].join(" ").trim();
 }
 
 const WorkbenchContext = React.createContext(null);
@@ -1588,7 +1758,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
 
 function IssueBadge({ level, title, size = 12, className, }) {
     const colorClass = level === "error" ? "text-red-600" : "text-amber-600";
-    return (jsxRuntime.jsx("button", { type: "button", className: `inline-flex items-center justify-center shrink-0 ${colorClass} ${className ?? ""}`, title: title, style: { width: size, height: size }, children: level === "error" ? (jsxRuntime.jsx(react.XCircleIcon, { size: size, weight: "fill" })) : (jsxRuntime.jsx(react.WarningCircleIcon, { size: size, weight: "fill" })) }));
+    return (jsxRuntime.jsx("button", { type: "button", className: `inline-flex items-center justify-center shrink-0 ${colorClass} ${className ?? ""}`, title: title, style: { width: size, height: size }, children: level === "error" ? (jsxRuntime.jsx(react$1.XCircleIcon, { size: size, weight: "fill" })) : (jsxRuntime.jsx(react$1.WarningCircleIcon, { size: size, weight: "fill" })) }));
 }
 
 function DebugEvents({ autoScroll, onAutoScrollChange, hideWorkbench, onHideWorkbenchChange, }) {
@@ -1709,7 +1879,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
             setOriginals(nextOriginals);
     }, [selectedNodeId, selectedDesc, valuesTick]);
     const widthClass = debug ? "w-[480px]" : "w-[320px]";
-    return (jsxRuntime.jsxs("div", { className: `${widthClass} border-l border-gray-300 p-3 flex flex-col h-full min-h-0 overflow-hidden`, children: [contextPanel && (jsxRuntime.jsx("div", { className: "mb-2", children: contextPanel })), jsxRuntime.jsx("div", { className: "font-semibold mb-2", children: "Inspector" }), jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: !selectedNode && !selectedEdge ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "text-gray-500", children: "Select a node or edge." }), globalValidationIssues && globalValidationIssues.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: globalValidationIssues.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` })] }, i))) })] }))] })) : selectedEdge ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsxs("div", { children: ["Edge: ", selectedEdge.id] }), jsxRuntime.jsxs("div", { children: [selectedEdge.source.nodeId, ".", selectedEdge.source.handle, " \u2192", " ", selectedEdge.target.nodeId, ".", selectedEdge.target.handle] }), jsxRuntime.jsxs("div", { children: ["Type: ", selectedEdge.typeId] })] }), selectedEdgeValidation.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: selectedEdgeValidation.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` })] }, i))) })] }))] })) : (jsxRuntime.jsxs("div", { children: [selectedNode && (jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsxs("div", { children: ["Node: ", selectedNode.nodeId] }), jsxRuntime.jsxs("div", { children: ["Type: ", selectedNode.typeId] }), !!selectedNodeStatus?.lastError && (jsxRuntime.jsx("div", { className: "mt-2 text-sm text-red-700 bg-red-50 border border-red-200 rounded px-2 py-1 break-words", children: String(selectedNodeStatus.lastError?.message ??
+    return (jsxRuntime.jsxs("div", { className: `${widthClass} border-l border-gray-300 p-3 flex flex-col h-full min-h-0 overflow-hidden`, children: [contextPanel && (jsxRuntime.jsx("div", { className: "mb-2", children: contextPanel })), jsxRuntime.jsx("div", { className: "font-semibold mb-2", children: "Inspector" }), jsxRuntime.jsxs("div", { className: "text-xs text-gray-500 mb-2", children: ["valuesTick: ", valuesTick] }), jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: !selectedNode && !selectedEdge ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "text-gray-500", children: "Select a node or edge." }), globalValidationIssues && globalValidationIssues.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: globalValidationIssues.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` })] }, i))) })] }))] })) : selectedEdge ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsxs("div", { children: ["Edge: ", selectedEdge.id] }), jsxRuntime.jsxs("div", { children: [selectedEdge.source.nodeId, ".", selectedEdge.source.handle, " \u2192", " ", selectedEdge.target.nodeId, ".", selectedEdge.target.handle] }), jsxRuntime.jsxs("div", { children: ["Type: ", selectedEdge.typeId] })] }), selectedEdgeValidation.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: selectedEdgeValidation.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` })] }, i))) })] }))] })) : (jsxRuntime.jsxs("div", { children: [selectedNode && (jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsxs("div", { children: ["Node: ", selectedNode.nodeId] }), jsxRuntime.jsxs("div", { children: ["Type: ", selectedNode.typeId] }), !!selectedNodeStatus?.lastError && (jsxRuntime.jsx("div", { className: "mt-2 text-sm text-red-700 bg-red-50 border border-red-200 rounded px-2 py-1 break-words", children: String(selectedNodeStatus.lastError?.message ??
                                         selectedNodeStatus.lastError) }))] })), jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Inputs" }), inputHandles.length === 0 ? (jsxRuntime.jsx("div", { className: "text-gray-500", children: "No inputs" })) : (inputHandles.map((h) => {
                                     const typeId = sparkGraph.getInputTypeId(selectedDesc?.inputs, h);
                                     const isLinked = def.edges.some((e) => e.target.nodeId === selectedNodeId &&
@@ -1770,83 +1940,120 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                         })()] }, h))))] }), selectedNodeValidation.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: selectedNodeValidation.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` })] }, i))) })] }))] })) }), debug && (jsxRuntime.jsx("div", { className: "mt-3 flex-none min-h-0 h-[50%]", children: jsxRuntime.jsx(DebugEvents, { autoScroll: !!autoScroll, hideWorkbench: !!hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange }) }))] }));
 }
 
+function NodeHandles({ data, isConnectable, inputClassName = "!w-2 !h-2 !bg-gray-600", outputClassName = "!w-2 !h-2 !bg-gray-600", getClassName, renderLabel, labelClassName = "absolute text-[11px] text-gray-700 dark:text-gray-300 pointer-events-none", }) {
+    const layout = data.handleLayout ?? [];
+    const byId = React.useMemo(() => {
+        const m = new Map();
+        for (const h of layout) {
+            m.set(h.id, { position: h.position, y: h.y, type: h.type });
+        }
+        return m;
+    }, [layout]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(data.inputHandles ?? []).map((h) => {
+                const placed = byId.get(h.id);
+                const position = placed?.position ?? react.Position.Left;
+                const y = placed?.y;
+                const cls = getClassName?.({ kind: "input", id: h.id, type: "target" }) ??
+                    inputClassName;
+                return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(react.Handle, { id: h.id, type: "target", position: position, isConnectable: isConnectable, className: cls, style: y !== undefined ? { top: y } : undefined }), renderLabel && (jsxRuntime.jsx("div", { className: labelClassName + " left-2", style: {
+                                top: (y ?? 0) - 8,
+                                right: "50%",
+                                whiteSpace: "nowrap",
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                            }, children: renderLabel({ kind: "input", id: h.id }) }))] }, h.id));
+            }), (data.outputHandles ?? []).map((h) => {
+                const placed = byId.get(h.id);
+                const position = placed?.position ?? react.Position.Right;
+                const y = placed?.y;
+                const cls = getClassName?.({ kind: "output", id: h.id, type: "source" }) ??
+                    outputClassName;
+                return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(react.Handle, { id: h.id, type: "source", position: position, isConnectable: isConnectable, className: cls, style: y !== undefined ? { top: y } : undefined }), renderLabel && (jsxRuntime.jsx("div", { className: labelClassName + " right-2", style: {
+                                top: (y ?? 0) - 8,
+                                left: "50%",
+                                textAlign: "right",
+                                whiteSpace: "nowrap",
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                            }, children: renderLabel({ kind: "output", id: h.id }) }))] }, h.id));
+            })] }));
+}
+
 const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConnectable, }) {
+    const updateNodeInternals = react.useUpdateNodeInternals();
     const { typeId, showValues, inputValues, outputValues, toString } = data;
     const inputEntries = data.inputHandles ?? [];
     const outputEntries = data.outputHandles ?? [];
+    React.useEffect(() => {
+        updateNodeInternals(id);
+    }, [
+        id,
+        inputEntries.length,
+        outputEntries.length,
+        showValues,
+        updateNodeInternals,
+    ]);
     const status = data.status ?? { activeRuns: 0 };
     const validation = data.validation ?? {
         inputs: [],
         outputs: [],
         issues: [],
     };
-    const HEADER_SIZE = 24;
-    const ROW_SIZE = 22;
-    const maxRows = Math.max(inputEntries.length, outputEntries.length);
-    const minHeight = HEADER_SIZE + maxRows * ROW_SIZE;
-    const minWidth = data.showValues ? 320 : 240;
-    const topFor = (i) => HEADER_SIZE + i * ROW_SIZE + ROW_SIZE / 2;
     const hasError = !!status.lastError;
-    const hasValidationError = validation.issues.some((i) => i.level === "error");
-    const hasValidationWarning = !hasValidationError && validation.issues.length > 0;
     const isRunning = !!status.activeRuns;
-    const isInvalid = !!status.invalidated && !isRunning && !hasError;
-    // Border color encodes severity; thickness encodes selection; style (dashed) encodes invalidated
-    const borderWidth = selected ? "border-2" : "border";
-    const borderStyle = isInvalid ? "border-dashed" : "border-solid";
-    const borderColor = hasError || hasValidationError
-        ? "border-red-500"
-        : hasValidationWarning
-            ? "border-amber-500"
-            : isRunning
-                ? "border-blue-500"
-                : "border-gray-500 dark:border-gray-400";
-    const ringClasses = isRunning
-        ? "ring-2 ring-blue-200 dark:ring-blue-900"
-        : undefined;
-    const borderClasses = cx(borderWidth, borderStyle, borderColor, ringClasses);
+    const containerBorder = getNodeBorderClassNames({
+        selected,
+        status,
+        validation,
+    });
     const pct = Math.round(Math.max(0, Math.min(1, Number(status.progress) || 0)) * 100);
-    return (jsxRuntime.jsxs("div", { className: cx("rounded-lg bg-white/70 !dark:bg-stone-900", borderClasses), style: { position: "relative", minHeight: minHeight, minWidth }, children: [jsxRuntime.jsxs("div", { className: "flex h-6 items-center justify-center px-2 border-b border-solid border-gray-500 dark:border-gray-400 text-gray-600 dark:text-gray-300", children: [jsxRuntime.jsx("strong", { className: "flex-1 h-full leading-6 text-xs", children: typeId }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [hasError && (jsxRuntime.jsx("span", { title: String(status.lastError?.message ?? status.lastError), children: jsxRuntime.jsx(react.XCircleIcon, { size: 12, weight: "fill", className: "text-red-500" }) })), validation.issues && validation.issues.length > 0 && (jsxRuntime.jsx(IssueBadge, { level: validation.issues.some((i) => i.level === "error")
+    return (jsxRuntime.jsxs("div", { className: cx("rounded-lg bg-white/70 !dark:bg-stone-900", containerBorder), style: {
+            position: "relative",
+            minWidth: typeof data.renderWidth === "number" ? data.renderWidth : undefined,
+            minHeight: typeof data.renderHeight === "number" ? data.renderHeight : undefined,
+        }, children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-center px-2 border-b border-solid border-gray-500 dark:border-gray-400 text-gray-600 dark:text-gray-300", style: {
+                    maxHeight: NODE_HEADER_HEIGHT_PX,
+                    minHeight: NODE_HEADER_HEIGHT_PX,
+                }, children: [jsxRuntime.jsx("strong", { className: "flex-1 h-full text-sm", style: { lineHeight: `${NODE_HEADER_HEIGHT_PX}px` }, children: typeId }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [hasError && (jsxRuntime.jsx("span", { title: String(status.lastError?.message ?? status.lastError), children: jsxRuntime.jsx(react$1.XCircleIcon, { size: 12, weight: "fill", className: "text-red-500" }) })), validation.issues && validation.issues.length > 0 && (jsxRuntime.jsx(IssueBadge, { level: validation.issues.some((i) => i.level === "error")
                                     ? "error"
                                     : "warning", size: 12, className: "w-3 h-3", title: validation.issues
                                     .map((v) => `${v.code}: ${v.message}`)
-                                    .join("; ") })), jsxRuntime.jsxs("span", { className: "text-[10px] opacity-70", children: ["(", id, ")"] })] })] }), (isRunning || pct > 0) && (jsxRuntime.jsx("div", { className: "h-1 bg-blue-200 dark:bg-blue-900", children: jsxRuntime.jsx("div", { className: "h-1 bg-blue-500 transition-all", style: { width: `${pct}%` } }) })), inputEntries.map((entry, i) => {
-                const vIssues = validation.inputs.filter((v) => v.handle === entry.id);
-                const hasAny = vIssues.length > 0;
-                const hasErr = vIssues.some((v) => v.level === "error");
-                const title = vIssues
-                    .map((v) => `${v.code}: ${v.message}`)
-                    .join("; ");
-                return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(ReactFlow.Handle, { id: entry.id, type: "target", position: ReactFlow.Position.Left, isConnectable: isConnectable, className: cx("!w-3 !h-3 !bg-white !dark:bg-stone-900 !border-gray-500 dark:!border-gray-400", hasAny && (hasErr ? "!border-red-500" : "!border-amber-500")), style: { left: -5, top: topFor(i) } }), jsxRuntime.jsxs("div", { className: "absolute left-2 text-[11px] text-gray-700 dark:text-gray-300 pointer-events-none", style: {
-                                top: topFor(i) - 8,
-                                right: "50%",
-                                whiteSpace: "nowrap",
-                                overflow: "hidden",
-                                textOverflow: "ellipsis",
-                            }, title: `${entry.id}: ${entry.typeId}`, children: [entry.id, hasAny && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "ml-1", title: title })), showValues && (jsxRuntime.jsx("span", { className: "ml-1 opacity-60", children: toString(entry.typeId, inputValues?.[entry.id]) }))] })] }, `in-${entry.id}`));
-            }), outputEntries.map((entry, i) => {
-                const vIssues = validation.outputs.filter((v) => v.handle === entry.id);
-                const hasAny = vIssues.length > 0;
-                const hasErr = vIssues.some((v) => v.level === "error");
-                const title = vIssues
-                    .map((v) => `${v.code}: ${v.message}`)
-                    .join("; ");
-                const resolved = resolveOutputDisplay(outputValues?.[entry.id], entry.typeId);
-                return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(ReactFlow.Handle, { id: entry.id, type: "source", position: ReactFlow.Position.Right, isConnectable: isConnectable, className: cx("!w-3 !h-3 !bg-white !dark:bg-stone-900 !border-gray-500 dark:!border-gray-400 !rounded-none", hasAny && (hasErr ? "!border-red-500" : "!border-amber-500")), style: { right: -5, top: topFor(i) } }), jsxRuntime.jsxs("div", { className: "absolute right-2 text-[11px] text-gray-700 dark:text-gray-300 pointer-events-none", style: {
-                                top: topFor(i) - 8,
-                                textAlign: "right",
-                                left: "50%",
-                                whiteSpace: "nowrap",
-                                overflow: "hidden",
-                                textOverflow: "ellipsis",
-                            }, title: `${entry.id}: ${entry.typeId}`, children: [entry.id, hasAny && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "ml-1", title: title })), showValues && (jsxRuntime.jsx("span", { className: "ml-1 opacity-60", children: toString(resolved.typeId, resolved.value) }))] })] }, `out-${entry.id}`));
-            })] }));
+                                    .join("; ") })), jsxRuntime.jsxs("span", { className: "text-[10px] opacity-70", children: ["(", id, ")"] })] })] }), jsxRuntime.jsx("div", { className: cx("h-px", (isRunning || pct > 0) && "bg-blue-200 dark:bg-blue-900"), children: jsxRuntime.jsx("div", { className: cx("h-px transition-all", (isRunning || pct > 0) && "bg-blue-500"), style: { width: isRunning || pct > 0 ? `${pct}%` : 0 } }) }), jsxRuntime.jsx(NodeHandles, { data: data, isConnectable: isConnectable, getClassName: ({ kind, id }) => {
+                    const vIssues = (kind === "input" ? validation.inputs : validation.outputs).filter((v) => v.handle === id);
+                    const hasAny = vIssues.length > 0;
+                    const hasErr = vIssues.some((v) => v.level === "error");
+                    return cx("!w-3 !h-3 !bg-white !dark:bg-stone-900 !border-gray-500 dark:!border-gray-400", kind === "output" && "!rounded-none", hasAny && (hasErr ? "!border-red-500" : "!border-amber-500"));
+                }, renderLabel: ({ kind, id }) => {
+                    const entries = kind === "input" ? inputEntries : outputEntries;
+                    const entry = entries.find((e) => e.id === id);
+                    if (!entry)
+                        return id;
+                    const vIssues = (kind === "input" ? validation.inputs : validation.outputs).filter((v) => v.handle === id);
+                    const hasAny = vIssues.length > 0;
+                    const hasErr = vIssues.some((v) => v.level === "error");
+                    const title = vIssues
+                        .map((v) => `${v.code}: ${v.message}`)
+                        .join("; ");
+                    // Compose label with truncated value to prevent layout growth
+                    const valueText = (() => {
+                        if (!showValues)
+                            return undefined;
+                        if (kind === "input") {
+                            const txt = toString(entry.typeId, inputValues?.[entry.id]);
+                            return typeof txt === "string" ? txt : String(txt);
+                        }
+                        const resolved = resolveOutputDisplay(outputValues?.[entry.id], entry.typeId);
+                        const txt = toString(resolved.typeId, resolved.value);
+                        return typeof txt === "string" ? txt : String(txt);
+                    })();
+                    return (jsxRuntime.jsxs("span", { className: "flex items-center gap-1 w-full", children: [kind === "output" ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [valueText !== undefined && (jsxRuntime.jsx("span", { className: "opacity-60 truncate pl-1", style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText })), jsxRuntime.jsx("span", { className: "truncate shrink-0", style: { maxWidth: "40%" }, children: id })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "truncate shrink-0", style: { maxWidth: "40%" }, children: id }), valueText !== undefined && (jsxRuntime.jsx("span", { className: "opacity-60 truncate pr-1", style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText }))] })), hasAny && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "shrink-0", title: title }))] }));
+                } })] }));
 });
 DefaultNode.displayName = "DefaultNode";
 
 function DefaultContextMenu({ open, clientPos, onAdd, onClose, }) {
     const { registry } = useWorkbenchContext();
-    const rf = ReactFlow.useReactFlow();
+    const rf = react.useReactFlow();
     const ids = Array.from(registry.nodes.keys());
     const [query, setQuery] = React.useState("");
     const q = query.trim().toLowerCase();
@@ -2005,6 +2212,58 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement }, r
     const { wb, registry, inputsMap, outputsMap, valuesTick, nodeStatus, edgeStatus, validationByNode, validationByEdge, } = useWorkbenchContext();
     const nodeValidation = validationByNode;
     const edgeValidation = validationByEdge.errors;
+    // Keep stable references for nodes/edges to avoid unnecessary updates
+    const prevNodesRef = React.useRef([]);
+    const prevEdgesRef = React.useRef([]);
+    function retainStabilityById(prev, next, isSame) {
+        if (prev.length === 0)
+            return next;
+        const map = new Map();
+        for (const p of prev)
+            map.set(p.id, p);
+        const out = new Array(next.length);
+        for (let i = 0; i < next.length; i++) {
+            const n = next[i];
+            const p = map.get(n.id);
+            out[i] = p && isSame(p, n) ? p : n;
+        }
+        return out;
+    }
+    const isSameNode = (a, b) => {
+        // Compare the parts that affect rendering
+        const pick = (n) => ({
+            position: n.position,
+            type: n.type,
+            selected: n.selected,
+            initialWidth: n.initialWidth,
+            initialHeight: n.initialHeight,
+            data: n.data && {
+                typeId: n.data.typeId,
+                inputHandles: n.data.inputHandles,
+                outputHandles: n.data.outputHandles,
+                showValues: n.data.showValues,
+                inputValues: n.data.inputValues,
+                outputValues: n.data.outputValues,
+                status: n.data.status,
+                validation: n.data.validation,
+            },
+        });
+        return isEqual(pick(a), pick(b));
+    };
+    const isSameEdge = (a, b) => {
+        const pick = (e) => ({
+            source: e.source,
+            target: e.target,
+            sourceHandle: e.sourceHandle,
+            targetHandle: e.targetHandle,
+            selected: e.selected,
+            animated: e.animated,
+            style: e.style,
+            label: e.label,
+            type: e.type,
+        });
+        return isEqual(pick(a), pick(b));
+    };
     // Expose imperative API
     const rfInstanceRef = React.useRef(null);
     React.useImperativeHandle(ref, () => ({
@@ -2015,7 +2274,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement }, r
             catch { }
         },
     }));
-    const { onConnect, onNodesChange, onEdgesChange, onEdgesDelete, onNodesDelete, onSelectionChange, } = useWorkbenchBridge(wb);
+    const { onConnect, onNodesChange, onEdgesChange, onEdgesDelete, onNodesDelete, } = useWorkbenchBridge(wb);
     const { nodeTypes, resolveNodeType } = React.useMemo(() => {
         // Build nodeTypes map using UI extension registry
         const ui = wb.getUI();
@@ -2053,8 +2312,91 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement }, r
             selectedNodeIds: new Set(sel.nodes),
             selectedEdgeIds: new Set(sel.edges),
         });
-        console.info(nodeTypes, out);
-        return out;
+        // Retain references for unchanged items
+        const stableNodes = retainStabilityById(prevNodesRef.current, out.nodes, isSameNode);
+        const stableEdges = retainStabilityById(prevEdgesRef.current, out.edges, isSameEdge);
+        // Debug: log updates/additions/removals (use value equality, not reference)
+        try {
+            const prevNodeIds = new Set(prevNodesRef.current.map((n) => n.id));
+            const nextNodeIds = new Set(out.nodes.map((n) => n.id));
+            const addedNodeIds = out.nodes
+                .filter((n) => !prevNodeIds.has(n.id))
+                .map((n) => n.id);
+            const removedNodeIds = prevNodesRef.current
+                .filter((n) => !nextNodeIds.has(n.id))
+                .map((n) => n.id);
+            const prevNodeMap = new Map(prevNodesRef.current.map((n) => [n.id, n]));
+            const changedNodeIds = out.nodes
+                .filter((n) => {
+                const p = prevNodeMap.get(n.id);
+                return p ? !isSameNode(p, n) : false;
+            })
+                .map((n) => n.id);
+            // Detect handle updates (ids/length changes) for targeted debug
+            const toIds = (arr) => Array.isArray(arr) ? arr.map((h) => h?.id) : [];
+            const handlesEqual = (a, b) => {
+                const aIds = toIds(a);
+                const bIds = toIds(b);
+                if (aIds.length !== bIds.length)
+                    return false;
+                for (let i = 0; i < aIds.length; i++) {
+                    if (aIds[i] !== bIds[i])
+                        return false;
+                }
+                return true;
+            };
+            const handleChanged = out.nodes
+                .filter((n) => {
+                const p = prevNodeMap.get(n.id);
+                if (!p)
+                    return false;
+                const inChanged = !handlesEqual(p.data?.inputHandles, n.data?.inputHandles);
+                const outChanged = !handlesEqual(p.data?.outputHandles, n.data?.outputHandles);
+                return inChanged || outChanged;
+            })
+                .map((n) => n.id);
+            const prevEdgeIds = new Set(prevEdgesRef.current.map((e) => e.id));
+            const nextEdgeIds = new Set(out.edges.map((e) => e.id));
+            const addedEdgeIds = out.edges
+                .filter((e) => !prevEdgeIds.has(e.id))
+                .map((e) => e.id);
+            const removedEdgeIds = prevEdgesRef.current
+                .filter((e) => !nextEdgeIds.has(e.id))
+                .map((e) => e.id);
+            const prevEdgeMap = new Map(prevEdgesRef.current.map((e) => [e.id, e]));
+            const changedEdgeIds = out.edges
+                .filter((e) => {
+                const p = prevEdgeMap.get(e.id);
+                return p ? !isSameEdge(p, e) : false;
+            })
+                .map((e) => e.id);
+            if (addedNodeIds.length ||
+                removedNodeIds.length ||
+                changedNodeIds.length ||
+                handleChanged.length) {
+                // eslint-disable-next-line no-console
+                console.debug("[WorkbenchCanvas] node updates", {
+                    added: addedNodeIds,
+                    removed: removedNodeIds,
+                    changed: changedNodeIds,
+                    handleChanged,
+                });
+            }
+            if (addedEdgeIds.length ||
+                removedEdgeIds.length ||
+                changedEdgeIds.length) {
+                // eslint-disable-next-line no-console
+                console.debug("[WorkbenchCanvas] edge updates", {
+                    added: addedEdgeIds,
+                    removed: removedEdgeIds,
+                    changed: changedEdgeIds,
+                });
+            }
+        }
+        catch { }
+        prevNodesRef.current = stableNodes;
+        prevEdgesRef.current = stableEdges;
+        return { nodes: stableNodes, edges: stableEdges };
     }, [
         showValues,
         inputsMap,
@@ -2066,9 +2408,9 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement }, r
         edgeStatus,
         nodeValidation,
         edgeValidation,
-        nodeTypes,
         resolveNodeType,
     ]);
+    const throttled = useThrottledValue({ nodes, edges }, 100);
     const [menuOpen, setMenuOpen] = React.useState(false);
     const [menuPos, setMenuPos] = React.useState(null);
     const [nodeMenuOpen, setNodeMenuOpen] = React.useState(false);
@@ -2095,7 +2437,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement }, r
     const addNodeAt = (typeId, pos) => {
         wb.addNode({ typeId, position: pos });
     };
-    return (jsxRuntime.jsx("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: jsxRuntime.jsxs(ReactFlow, { nodes: nodes, edges: edges, nodeTypes: nodeTypes, selectionOnDrag: true, onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, onSelectionChange: onSelectionChange, deleteKeyCode: ["Backspace", "Delete"], fitView: true, onInit: (inst) => (rfInstanceRef.current = inst), children: [jsxRuntime.jsx(ReactFlow.Background, {}), jsxRuntime.jsx(ReactFlow.MiniMap, {}), jsxRuntime.jsx(ReactFlow.Controls, {}), jsxRuntime.jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, onAdd: addNodeAt, onClose: () => setMenuOpen(false) }), jsxRuntime.jsx(NodeContextMenu, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, onClose: () => setNodeMenuOpen(false) })] }) }));
+    return (jsxRuntime.jsx("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: jsxRuntime.jsxs(react.ReactFlow, { nodes: throttled.nodes, edges: throttled.edges, nodeTypes: nodeTypes, onlyRenderVisibleElements: true, selectionOnDrag: true, onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, deleteKeyCode: ["Backspace", "Delete"], fitView: true, onInit: (inst) => (rfInstanceRef.current = inst), children: [jsxRuntime.jsx(react.Background, {}), jsxRuntime.jsx(react.MiniMap, {}), jsxRuntime.jsx(react.Controls, {}), jsxRuntime.jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, onAdd: addNodeAt, onClose: () => setMenuOpen(false) }), jsxRuntime.jsx(NodeContextMenu, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, onClose: () => setNodeMenuOpen(false) })] }) }));
 });
 
 function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, example, onExampleChange, engine, onEngineChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, overrides, onInit, onChange, }) {
@@ -2172,7 +2514,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             runAutoLayout();
         };
         onInit({ wb, runner, setInitialGraph });
-    }, [onInit, wb, runner, runAutoLayout]);
+    }, [onInit, wb, runner, runAutoLayout, registry, setRegistry]);
     // Expose change callback on graph/value changes
     React.useEffect(() => {
         if (!onChange)
@@ -2207,9 +2549,14 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         if (!ex)
             return;
         const { registry: r, def } = await ex.load();
-        if (r) {
-            setRegistry(r);
-            wb.setRegistry(r);
+        // Keep registry consistent with backend:
+        // - For local backend, allow example to provide its own registry
+        // - For remote backend, NEVER overwrite the hydrated remote registry
+        if (backendKind === "local") {
+            if (r) {
+                setRegistry(r);
+                wb.setRegistry(r);
+            }
         }
         await wb.load(def);
         // Build a local runtime so seeded defaults are visible pre-run
@@ -2217,7 +2564,15 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         runAutoLayout();
         setExampleState(key);
         onExampleChange?.(key);
-    }, [runner, wb, onExampleChange, runAutoLayout, examples, setRegistry]);
+    }, [
+        runner,
+        wb,
+        onExampleChange,
+        runAutoLayout,
+        examples,
+        setRegistry,
+        backendKind,
+    ]);
     const downloadGraph = React.useCallback(() => {
         try {
             const def = wb.export();
@@ -2327,6 +2682,9 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             return;
         if (runner.isRunning())
             return;
+        // Only auto-launch for local backend; require explicit Start for remote
+        if (backendKind !== "local")
+            return;
         const d = wb.export();
         if (!d.nodes || d.nodes.length === 0)
             return;
@@ -2339,14 +2697,14 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         catch {
             // ignore
         }
-    }, [engine, runner, wb]);
+    }, [engine, runner, wb, backendKind]);
     // When switching to remote backend, auto-hydrate registry from backend
     React.useEffect(() => {
         if (backendKind === "remote-http" && httpBaseUrl) {
-            void hydrateFromBackend("remote-http", httpBaseUrl);
+            hydrateFromBackend("remote-http", httpBaseUrl);
         }
         else if (backendKind === "remote-ws" && wsUrl) {
-            void hydrateFromBackend("remote-ws", wsUrl);
+            hydrateFromBackend("remote-ws", wsUrl);
         }
     }, [backendKind, httpBaseUrl, wsUrl, hydrateFromBackend]);
     React.useEffect(() => {
@@ -2516,11 +2874,11 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             return overrides.toElement(baseToElement, { registry });
         return baseToElement;
     }, [overrides, baseToElement, registry]);
-    return (jsxRuntime.jsxs("div", { className: "w-full h-screen flex flex-col", children: [jsxRuntime.jsxs("div", { className: "p-2 border-b border-gray-300 flex gap-2 items-center", children: [runner.isRunning() ? (jsxRuntime.jsxs("span", { className: "ml-2 text-sm text-green-700", children: ["Running: ", runner.getRunningEngine()] })) : (jsxRuntime.jsx("span", { className: "ml-2 text-sm text-gray-500", children: "Stopped" })), jsxRuntime.jsxs("span", { className: "ml-2 flex items-center gap-1 text-xs", title: transportStatus.kind || undefined, children: [transportStatus.state === "local" && (jsxRuntime.jsx(react.PlugsConnectedIcon, { size: 14, className: "text-gray-500" })), transportStatus.state === "connecting" && (jsxRuntime.jsx(react.ClockClockwiseIcon, { size: 14, className: "text-amber-600 animate-pulse" })), transportStatus.state === "connected" && (jsxRuntime.jsx(react.WifiHighIcon, { size: 14, className: "text-green-600" })), transportStatus.state === "disconnected" && (jsxRuntime.jsx(react.WifiSlashIcon, { size: 14, className: "text-red-600" })), transportStatus.state === "retrying" && (jsxRuntime.jsx(react.ClockClockwiseIcon, { size: 14, className: "text-amber-700 animate-pulse" }))] }), jsxRuntime.jsx("label", { className: "ml-2 text-sm", children: "Example:" }), jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: exampleState, onChange: (e) => applyExample(e.target.value), disabled: runner.isRunning(), title: runner.isRunning()
+    return (jsxRuntime.jsxs("div", { className: "w-full h-screen flex flex-col", children: [jsxRuntime.jsxs("div", { className: "p-2 border-b border-gray-300 flex gap-2 items-center", children: [runner.isRunning() ? (jsxRuntime.jsxs("span", { className: "ml-2 text-sm text-green-700", children: ["Running: ", runner.getRunningEngine()] })) : (jsxRuntime.jsx("span", { className: "ml-2 text-sm text-gray-500", children: "Stopped" })), jsxRuntime.jsxs("span", { className: "ml-2 flex items-center gap-1 text-xs", title: transportStatus.kind || undefined, children: [transportStatus.state === "local" && (jsxRuntime.jsx(react$1.PlugsConnectedIcon, { size: 14, className: "text-gray-500" })), transportStatus.state === "connecting" && (jsxRuntime.jsx(react$1.ClockClockwiseIcon, { size: 14, className: "text-amber-600 animate-pulse" })), transportStatus.state === "connected" && (jsxRuntime.jsx(react$1.WifiHighIcon, { size: 14, className: "text-green-600" })), transportStatus.state === "disconnected" && (jsxRuntime.jsx(react$1.WifiSlashIcon, { size: 14, className: "text-red-600" })), transportStatus.state === "retrying" && (jsxRuntime.jsx(react$1.ClockClockwiseIcon, { size: 14, className: "text-amber-700 animate-pulse" }))] }), jsxRuntime.jsx("label", { className: "ml-2 text-sm", children: "Example:" }), jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: exampleState, onChange: (e) => applyExample(e.target.value), disabled: runner.isRunning(), title: runner.isRunning()
                             ? "Stop engine before switching example"
                             : undefined, children: [jsxRuntime.jsx("option", { value: "", children: "Select Example\u2026" }), examples.map((ex) => (jsxRuntime.jsx("option", { value: ex.id, children: ex.label }, ex.id)))] }), jsxRuntime.jsx("label", { className: "ml-2 text-sm", children: "Backend:" }), jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: backendKind, onChange: (e) => onBackendKindChange(e.target.value), disabled: runner.isRunning(), title: runner.isRunning()
                             ? "Stop engine before switching backend"
-                            : undefined, children: [jsxRuntime.jsx("option", { value: "local", children: "Local" }), jsxRuntime.jsx("option", { value: "remote-http", children: "Remote (HTTP)" }), jsxRuntime.jsx("option", { value: "remote-ws", children: "Remote (WebSocket)" })] }), backendKind === "remote-http" && (jsxRuntime.jsx("input", { className: "ml-2 border border-gray-300 rounded px-2 py-1 w-72", placeholder: "http://127.0.0.1:18080", value: httpBaseUrl, onChange: (e) => onHttpBaseUrlChange(e.target.value) })), backendKind === "remote-ws" && (jsxRuntime.jsx("input", { className: "ml-2 border border-gray-300 rounded px-2 py-1 w-72", placeholder: "ws://127.0.0.1:18081", value: wsUrl, onChange: (e) => onWsUrlChange(e.target.value) })), jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: runner.getRunningEngine() ?? engine ?? "", onChange: (e) => {
+                            : undefined, children: [jsxRuntime.jsx("option", { value: "local", children: "Local" }), jsxRuntime.jsx("option", { value: "remote-http", children: "Remote (HTTP)" }), jsxRuntime.jsx("option", { value: "remote-ws", children: "Remote (WebSocket)" })] }), backendKind === "remote-http" && !!onHttpBaseUrlChange && (jsxRuntime.jsx("input", { className: "ml-2 border border-gray-300 rounded px-2 py-1 w-72", placeholder: "http://127.0.0.1:18080", value: httpBaseUrl, onChange: (e) => onHttpBaseUrlChange(e.target.value) })), backendKind === "remote-ws" && !!onWsUrlChange && (jsxRuntime.jsx("input", { className: "ml-2 border border-gray-300 rounded px-2 py-1 w-72", placeholder: "ws://127.0.0.1:18081", value: wsUrl, onChange: (e) => onWsUrlChange(e.target.value) })), jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: runner.getRunningEngine() ?? engine ?? "", onChange: (e) => {
                             const kind = e.target.value || undefined;
                             onEngineChange?.(kind);
                         }, children: [jsxRuntime.jsx("option", { value: "", children: "Select Engine\u2026" }), jsxRuntime.jsx("option", { value: "push", children: "Push" }), jsxRuntime.jsx("option", { value: "batched", children: "Batched" }), jsxRuntime.jsx("option", { value: "pull", children: "Pull" }), jsxRuntime.jsx("option", { value: "hybrid", children: "Hybrid" }), jsxRuntime.jsx("option", { value: "step", children: "Step" })] }), runner.getRunningEngine() === "step" && (jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: () => runner.step(), disabled: !runner.isRunning(), children: "Step" })), runner.getRunningEngine() === "batched" && (jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: () => runner.flush(), disabled: !runner.isRunning(), children: "Flush" })), runner.isRunning() ? (jsxRuntime.jsx("button", { className: "border border-gray-300 rounded px-2 py-1.5", onClick: () => runner.dispose(), disabled: !runner.isRunning(), children: "Stop" })) : (jsxRuntime.jsx("button", { className: "border border-gray-300 rounded px-2 py-1.5", onClick: () => {
@@ -2535,7 +2893,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                             }
                         }, disabled: !engine, children: "Start" })), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded px-2 py-1.5", onClick: runAutoLayout, children: "Auto Layout" }), jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: () => canvasRef.current?.fitView?.(), title: "Fit View", children: "Fit View" }), jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: downloadGraph, children: "Download Graph" }), jsxRuntime.jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsxRuntime.jsx("span", { children: "Debug events" })] }), jsxRuntime.jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsxRuntime.jsx("span", { children: "Show values in nodes" })] })] }), jsxRuntime.jsxs("div", { className: "flex flex-1 min-h-0", children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: jsxRuntime.jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement }) }), jsxRuntime.jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, toElement: toElement, contextPanel: overrides?.contextPanel })] })] }));
 }
-function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, autoScroll, onAutoScrollChange, overrides, onInit, onChange, contextPanel, }) {
+function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, autoScroll, onAutoScrollChange, overrides, onInit, onChange, }) {
     const [registry, setRegistry] = React.useState(sparkGraph.createSimpleGraphRegistry());
     const [wb] = React.useState(() => new InMemoryWorkbench({ ui: new DefaultUIExtensionRegistry() }));
     const runner = React.useMemo(() => {
@@ -2569,6 +2927,7 @@ exports.DefaultUIExtensionRegistry = DefaultUIExtensionRegistry;
 exports.InMemoryWorkbench = InMemoryWorkbench;
 exports.Inspector = Inspector;
 exports.LocalGraphRunner = LocalGraphRunner;
+exports.NodeHandles = NodeHandles;
 exports.RemoteGraphRunner = RemoteGraphRunner;
 exports.WorkbenchCanvas = WorkbenchCanvas;
 exports.WorkbenchContext = WorkbenchContext;
@@ -2583,6 +2942,7 @@ exports.summarizeDeep = summarizeDeep;
 exports.toReactFlow = toReactFlow;
 exports.useQueryParamBoolean = useQueryParamBoolean;
 exports.useQueryParamString = useQueryParamString;
+exports.useThrottledValue = useThrottledValue;
 exports.useWorkbenchBridge = useWorkbenchBridge;
 exports.useWorkbenchContext = useWorkbenchContext;
 exports.useWorkbenchGraphTick = useWorkbenchGraphTick;