@bian-womp/spark-workbench 0.2.35 → 0.2.37

package/lib/esm/index.js

@@ -337,12 +337,16 @@ class AbstractGraphRunner {
         if (this.engine) {
             throw new Error("Engine already running. Stop the current engine first.");
         }
-        this.currentDef = def;
     }
     setInput(nodeId, handle, value) {
         if (!this.stagedInputs[nodeId])
             this.stagedInputs[nodeId] = {};
-        this.stagedInputs[nodeId][handle] = value;
+        if (value === undefined) {
+            delete this.stagedInputs[nodeId][handle];
+        }
+        else {
+            this.stagedInputs[nodeId][handle] = value;
+        }
         if (this.engine) {
             this.engine.setInput(nodeId, handle, value);
         }
@@ -360,7 +364,14 @@ class AbstractGraphRunner {
             return;
         if (!this.stagedInputs[nodeId])
             this.stagedInputs[nodeId] = {};
-        Object.assign(this.stagedInputs[nodeId], inputs);
+        for (const [handle, value] of Object.entries(inputs)) {
+            if (value === undefined) {
+                delete this.stagedInputs[nodeId][handle];
+            }
+            else {
+                this.stagedInputs[nodeId][handle] = value;
+            }
+        }
         if (this.engine) {
             // Running: set all inputs
             this.engine.setInputs(nodeId, inputs);
@@ -394,7 +405,6 @@ class AbstractGraphRunner {
         this.engine = undefined;
         this.runtime?.dispose();
         this.runtime = undefined;
-        this.currentDef = undefined;
         if (this.runningKind) {
             this.runningKind = undefined;
             this.emit("status", { running: false, engine: undefined });
@@ -429,14 +439,12 @@ class LocalGraphRunner extends AbstractGraphRunner {
         this.emit("transport", { state: "local" });
     }
     build(def) {
-        this.currentDef = def;
         const builder = new GraphBuilder(this.registry);
         this.runtime = builder.build(def);
         // Signal UI that freshly built graph should be considered invalidated
         this.emit("invalidate", { reason: "graph-built" });
     }
     update(def) {
-        this.currentDef = def;
         if (!this.runtime)
             return;
         // Prevent mid-run churn while wiring changes are applied
@@ -501,11 +509,11 @@ class LocalGraphRunner extends AbstractGraphRunner {
         if (eng instanceof BatchedEngine)
             eng.flush();
     }
-    getOutputs() {
+    getOutputs(def) {
         const out = {};
-        if (!this.runtime || !this.currentDef)
+        if (!this.runtime)
             return out;
-        for (const n of this.currentDef.nodes) {
+        for (const n of def.nodes) {
             const desc = this.registry.nodes.get(n.typeId);
             const handles = Object.keys(desc?.outputs ?? {});
             for (const h of handles) {
@@ -519,17 +527,15 @@ class LocalGraphRunner extends AbstractGraphRunner {
         }
         return out;
     }
-    getInputs() {
+    getInputs(def) {
         const out = {};
-        if (!this.currentDef)
-            return out;
-        for (const n of this.currentDef.nodes) {
+        for (const n of def.nodes) {
             const staged = this.stagedInputs[n.nodeId] ?? {};
             const runtimeInputs = this.runtime
                 ? this.runtime.getNodeData?.(n.nodeId)?.inputs ?? {}
                 : {};
             // Build inbound handle set for this node from current def
-            const inbound = new Set(this.currentDef.edges
+            const inbound = new Set(def.edges
                 .filter((e) => e.target.nodeId === n.nodeId)
                 .map((e) => e.target.handle));
             // Merge staged only for non-inbound handles so UI reflects runtime values for wired inputs
@@ -543,11 +549,9 @@ class LocalGraphRunner extends AbstractGraphRunner {
         }
         return out;
     }
-    getInputDefaults() {
+    getInputDefaults(def) {
         const out = {};
-        if (!this.currentDef)
-            return out;
-        for (const n of this.currentDef.nodes) {
+        for (const n of def.nodes) {
             const dynDefaults = n.resolvedHandles?.inputDefaults ?? {};
             if (Object.keys(dynDefaults).length > 0) {
                 out[n.nodeId] = dynDefaults;
@@ -557,8 +561,24 @@ class LocalGraphRunner extends AbstractGraphRunner {
     }
     async snapshotFull() {
         const def = undefined; // UI will supply def/positions on download for local
-        const inputs = this.getInputs();
-        const outputs = this.getOutputs();
+        const inputs = this.getInputs(this.runtime
+            ? {
+                nodes: Array.from(this.runtime.getNodeIds()).map((id) => ({
+                    nodeId: id,
+                    typeId: "",
+                })),
+                edges: [],
+            }
+            : { nodes: [], edges: [] });
+        const outputs = this.getOutputs(this.runtime
+            ? {
+                nodes: Array.from(this.runtime.getNodeIds()).map((id) => ({
+                    nodeId: id,
+                    typeId: "",
+                })),
+                edges: [],
+            }
+            : { nodes: [], edges: [] });
         const environment = this.getEnvironment() || {};
         return { def, environment, inputs, outputs };
     }
@@ -635,8 +655,8 @@ class RemoteGraphRunner extends AbstractGraphRunner {
                             this.emit("registry", this.registry);
                             // Trigger update so validation/UI refreshes using last known graph
                             try {
-                                if (this.currentDef)
-                                    this.update(this.currentDef);
+                                if (this.lastDef)
+                                    this.update(this.lastDef);
                             }
                             catch {
                                 console.error("Failed to update graph definition after registry changed");
@@ -654,12 +674,12 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         console.warn("Unsupported operation for remote runner");
     }
     update(def) {
-        this.currentDef = def;
         // Remote: forward update; ignore errors (fire-and-forget)
         this.ensureRemoteRunner().then(async (runner) => {
             try {
                 await runner.update(def);
                 this.emit("invalidate", { reason: "graph-updated" });
+                this.lastDef = def;
             }
             catch { }
         });
@@ -671,6 +691,7 @@ class RemoteGraphRunner extends AbstractGraphRunner {
             await runner.build(def);
             // Signal UI after remote build as well
             this.emit("invalidate", { reason: "graph-built" });
+            this.lastDef = def;
             // Hydrate current remote inputs/outputs (including defaults) into cache
             try {
                 const snap = await runner.snapshot();
@@ -806,12 +827,12 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         // For now, we expose an async helper on RemoteRunner. Keep sync signature per interface.
         return undefined;
     }
-    getOutputs() {
+    getOutputs(def) {
         const out = {};
         const cache = this.valueCache;
-        if (!cache || !this.currentDef)
+        if (!cache)
             return out;
-        for (const n of this.currentDef.nodes) {
+        for (const n of def.nodes) {
             const resolved = n.resolvedHandles?.outputs;
             const desc = this.registry.nodes.get(n.typeId);
             const handles = Object.keys(resolved ?? desc?.outputs ?? {});
@@ -827,19 +848,17 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         }
         return out;
     }
-    getInputs() {
+    getInputs(def) {
         const out = {};
         const cache = this.valueCache;
-        if (!this.currentDef)
-            return out;
-        for (const n of this.currentDef.nodes) {
+        for (const n of def.nodes) {
             const staged = this.stagedInputs[n.nodeId] ?? {};
             const resolved = n.resolvedHandles?.inputs;
             const desc = this.registry.nodes.get(n.typeId);
             const handles = Object.keys(resolved ?? desc?.inputs ?? {});
             const cur = {};
             // Build inbound handle set for this node to honor wiring precedence
-            const inbound = new Set(this.currentDef.edges
+            const inbound = new Set(def.edges
                 .filter((e) => e.target.nodeId === n.nodeId)
                 .map((e) => e.target.handle));
             for (const h of handles) {
@@ -858,11 +877,9 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         }
         return out;
     }
-    getInputDefaults() {
+    getInputDefaults(def) {
         const out = {};
-        if (!this.currentDef)
-            return out;
-        for (const n of this.currentDef.nodes) {
+        for (const n of def.nodes) {
             const dynDefaults = n.resolvedHandles?.inputDefaults ?? {};
             if (Object.keys(dynDefaults).length > 0) {
                 out[n.nodeId] = dynDefaults;
@@ -1731,14 +1748,19 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
     const clearEvents = useCallback(() => setEvents([]), []);
     const [systemErrors, setSystemErrors] = useState([]);
     const [registryErrors, setRegistryErrors] = useState([]);
+    const [inputValidationErrors, setInputValidationErrors] = useState([]);
     const clearSystemErrors = useCallback(() => setSystemErrors([]), []);
     const clearRegistryErrors = useCallback(() => setRegistryErrors([]), []);
+    const clearInputValidationErrors = useCallback(() => setInputValidationErrors([]), []);
     const removeSystemError = useCallback((index) => {
         setSystemErrors((prev) => prev.filter((_, idx) => idx !== index));
     }, []);
     const removeRegistryError = useCallback((index) => {
         setRegistryErrors((prev) => prev.filter((_, idx) => idx !== index));
     }, []);
+    const removeInputValidationError = useCallback((index) => {
+        setInputValidationErrors((prev) => prev.filter((_, idx) => idx !== index));
+    }, []);
     // Fallback progress animation: drive progress to 100% over ~2 minutes
     const FALLBACK_TOTAL_MS = 2 * 60 * 1000;
     const [fallbackStarts, setFallbackStarts] = useState({});
@@ -1787,14 +1809,15 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
     const valuesTick = versionTick + graphTick + graphUiTick;
     // Def and IO values
     const def = wb.export();
-    const inputsMap = useMemo(() => runner.getInputs(), [runner, valuesTick]);
-    const inputDefaultsMap = useMemo(() => runner.getInputDefaults(), [runner, valuesTick]);
-    const outputsMap = useMemo(() => runner.getOutputs(), [runner, valuesTick]);
+    const inputsMap = useMemo(() => runner.getInputs(def), [runner, def, valuesTick]);
+    const inputDefaultsMap = useMemo(() => runner.getInputDefaults(def), [runner, def, valuesTick]);
+    const outputsMap = useMemo(() => runner.getOutputs(def), [runner, def, valuesTick]);
     const outputTypesMap = useMemo(() => {
         const out = {};
         // Local: runtimeTypeId is not stored; derive from typed wrapper in outputsMap
         for (const n of def.nodes) {
-            const outputsDecl = registry.nodes.get(n.typeId)?.outputs ?? {};
+            const effectiveHandles = computeEffectiveHandles(n, registry);
+            const outputsDecl = effectiveHandles.outputs;
             const handles = Object.keys(outputsDecl);
             const cur = {};
             for (const h of handles) {
@@ -1955,10 +1978,13 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
         const offRunnerValue = runner.on("value", (e) => {
             if (e?.io === "input") {
                 const nodeId = e?.nodeId;
+                const handle = e?.handle;
                 setNodeStatus((s) => ({
                     ...s,
                     [nodeId]: { ...s[nodeId], invalidated: true },
                 }));
+                // Clear validation errors for this input when a valid value is set
+                setInputValidationErrors((prev) => prev.filter((err) => !(err.nodeId === nodeId && err.handle === handle)));
             }
             return add("runner", "value")(e);
         });
@@ -1967,6 +1993,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             const nodeError = e;
             const registryError = e;
             const systemError = e;
+            const inputValidationError = e;
             if (edgeError.kind === "edge-convert") {
                 const edgeId = edgeError.edgeId;
                 setEdgeStatus((s) => ({
@@ -2002,6 +2029,18 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
                     return [...prev, registryError];
                 });
             }
+            else if (inputValidationError.kind === "input-validation") {
+                // Track input validation errors for UI display
+                setInputValidationErrors((prev) => {
+                    // Avoid duplicates by checking nodeId, handle, and typeId
+                    if (prev.some((err) => err.nodeId === inputValidationError.nodeId &&
+                        err.handle === inputValidationError.handle &&
+                        err.typeId === inputValidationError.typeId)) {
+                        return prev;
+                    }
+                    return [...prev, inputValidationError];
+                });
+            }
             else if (systemError.kind === "system") {
                 // Track custom errors for UI display
                 setSystemErrors((prev) => {
@@ -2125,7 +2164,14 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             }
             return add("runner", "stats")(s);
         });
-        const offWbGraphChanged = wb.on("graphChanged", add("workbench", "graphChanged"));
+        const offWbGraphChanged = wb.on("graphChanged", (event) => {
+            // Clear validation errors for removed nodes
+            if (event.change?.type === "removeNode") {
+                const removedNodeId = event.change.nodeId;
+                setInputValidationErrors((prev) => prev.filter((err) => err.nodeId !== removedNodeId));
+            }
+            return add("workbench", "graphChanged")(event);
+        });
         const offWbGraphUiChanged = wb.on("graphUiChanged", add("workbench", "graphUiChanged"));
         const offWbValidationChanged = wb.on("validationChanged", add("workbench", "validationChanged"));
         // Ensure newly added nodes start as invalidated until first evaluation
@@ -2189,13 +2235,14 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             offRunnerTransport();
         };
     }, [runner, wb]);
-    // Keep runner.currentDef in sync with the workbench graph at all times.
-    // When an engine/runtime exists, this also pushes incremental wiring changes into it.
+    // Push incremental updates into running engine without full reload
     useEffect(() => {
-        try {
-            runner.update(def);
+        if (runner.isRunning()) {
+            try {
+                runner.update(def);
+            }
+            catch { }
         }
-        catch { }
     }, [runner, def, graphTick]);
     const validationByNode = useMemo(() => {
         const inputs = {};
@@ -2294,10 +2341,13 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
         clearEvents,
         systemErrors,
         registryErrors,
+        inputValidationErrors,
         clearSystemErrors,
         clearRegistryErrors,
+        clearInputValidationErrors,
         removeSystemError,
         removeRegistryError,
+        removeInputValidationError,
         isRunning,
         engineKind,
         start,
@@ -2322,10 +2372,13 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
         valuesTick,
         systemErrors,
         registryErrors,
+        inputValidationErrors,
         clearSystemErrors,
         clearRegistryErrors,
+        clearInputValidationErrors,
         removeSystemError,
         removeRegistryError,
+        removeInputValidationError,
         inputsMap,
         inputDefaultsMap,
         outputsMap,
@@ -2413,7 +2466,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
             return String(value ?? "");
         }
     };
-    const { registry, def, selectedNodeId, selectedEdgeId, inputsMap, inputDefaultsMap, outputsMap, outputTypesMap, nodeStatus, edgeStatus, validationByNode, validationByEdge, validationGlobal, valuesTick, updateEdgeType, systemErrors, registryErrors, clearSystemErrors, clearRegistryErrors, removeSystemError, removeRegistryError, } = useWorkbenchContext();
+    const { registry, def, selectedNodeId, selectedEdgeId, inputsMap, inputDefaultsMap, outputsMap, outputTypesMap, nodeStatus, edgeStatus, validationByNode, validationByEdge, validationGlobal, valuesTick, updateEdgeType, systemErrors, registryErrors, inputValidationErrors, clearSystemErrors, clearRegistryErrors, clearInputValidationErrors, removeSystemError, removeRegistryError, removeInputValidationError, } = useWorkbenchContext();
     const nodeValidationIssues = validationByNode.issues;
     const edgeValidationIssues = validationByEdge.issues;
     const nodeValidationHandles = validationByNode;
@@ -2524,7 +2577,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
         }
         catch { }
     };
-    return (jsxs("div", { className: `${widthClass} border-l border-gray-300 p-3 flex flex-col h-full min-h-0 overflow-auto`, children: [jsxs("div", { className: "flex-1 overflow-auto", children: [contextPanel && jsx("div", { className: "mb-2", children: contextPanel }), systemErrors.length > 0 && (jsxs("div", { className: "mb-2 space-y-1", children: [systemErrors.map((err, i) => (jsxs("div", { className: "text-xs text-red-700 bg-red-50 border border-red-200 rounded px-2 py-1 flex items-start justify-between gap-2", children: [jsxs("div", { className: "flex-1", children: [jsx("div", { className: "font-semibold", children: err.code ? `Error ${err.code}` : "Error" }), jsx("div", { className: "break-words", children: err.message })] }), jsx("button", { className: "text-red-500 hover:text-red-700 text-[10px] px-1", onClick: () => removeSystemError(i), title: "Dismiss", children: jsx(XIcon, { size: 10 }) })] }, i))), systemErrors.length > 1 && (jsx("button", { className: "text-xs text-red-600 hover:text-red-800 underline", onClick: clearSystemErrors, children: "Clear all" }))] })), registryErrors.length > 0 && (jsxs("div", { className: "mb-2 space-y-1", children: [registryErrors.map((err, i) => (jsxs("div", { className: "text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded px-2 py-1 flex items-start justify-between gap-2", children: [jsxs("div", { className: "flex-1", children: [jsx("div", { className: "font-semibold", children: "Registry Error" }), jsx("div", { className: "break-words", children: err.message }), err.attempt && err.maxAttempts && (jsxs("div", { className: "text-[10px] text-amber-600 mt-1", children: ["Attempt ", err.attempt, " of ", err.maxAttempts] }))] }), jsx("button", { className: "text-amber-500 hover:text-amber-700 text-[10px] px-1", onClick: () => removeRegistryError(i), title: "Dismiss", children: jsx(XIcon, { size: 10 }) })] }, i))), registryErrors.length > 1 && (jsx("button", { className: "text-xs text-amber-600 hover:text-amber-800 underline", onClick: clearRegistryErrors, children: "Clear all" }))] })), jsx("div", { className: "font-semibold mb-2", children: "Inspector" }), jsxs("div", { className: "text-xs text-gray-500 mb-2", children: ["valuesTick: ", valuesTick] }), jsx("div", { className: "flex-1", children: !selectedNode && !selectedEdge ? (jsxs("div", { children: [jsx("div", { className: "text-gray-500", children: "Select a node or edge." }), globalValidationIssues && globalValidationIssues.length > 0 && (jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsx("ul", { className: "list-disc ml-4", children: globalValidationIssues.map((m, i) => (jsxs("li", { className: "flex items-center gap-1", children: [jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsx("span", { children: `${m.code}: ${m.message}` }), !!m.data?.edgeId && (jsx("button", { className: "ml-2 text-[10px] px-1 py-[2px] border border-red-300 rounded text-red-700 hover:bg-red-50", onClick: (e) => {
+    return (jsxs("div", { className: `${widthClass} border-l border-gray-300 p-3 flex flex-col h-full min-h-0 overflow-auto`, children: [jsxs("div", { className: "flex-1 overflow-auto", children: [contextPanel && jsx("div", { className: "mb-2", children: contextPanel }), inputValidationErrors.length > 0 && (jsxs("div", { className: "mb-2 space-y-1", children: [inputValidationErrors.map((err, i) => (jsxs("div", { className: "text-xs text-red-700 bg-red-50 border border-red-200 rounded px-2 py-1 flex items-start justify-between gap-2", children: [jsxs("div", { className: "flex-1", children: [jsx("div", { className: "font-semibold", children: "Input Validation Error" }), jsx("div", { className: "break-words", children: err.message }), jsxs("div", { className: "text-[10px] text-red-600 mt-1", children: [err.nodeId, ".", err.handle, " (type: ", err.typeId, ")"] })] }), jsx("button", { className: "text-red-500 hover:text-red-700 text-[10px] px-1", onClick: () => removeInputValidationError(i), title: "Dismiss", children: jsx(XIcon, { size: 10 }) })] }, i))), inputValidationErrors.length > 1 && (jsx("button", { className: "text-xs text-red-600 hover:text-red-800 underline", onClick: clearInputValidationErrors, children: "Clear all" }))] })), systemErrors.length > 0 && (jsxs("div", { className: "mb-2 space-y-1", children: [systemErrors.map((err, i) => (jsxs("div", { className: "text-xs text-red-700 bg-red-50 border border-red-200 rounded px-2 py-1 flex items-start justify-between gap-2", children: [jsxs("div", { className: "flex-1", children: [jsx("div", { className: "font-semibold", children: err.code ? `Error ${err.code}` : "Error" }), jsx("div", { className: "break-words", children: err.message })] }), jsx("button", { className: "text-red-500 hover:text-red-700 text-[10px] px-1", onClick: () => removeSystemError(i), title: "Dismiss", children: jsx(XIcon, { size: 10 }) })] }, i))), systemErrors.length > 1 && (jsx("button", { className: "text-xs text-red-600 hover:text-red-800 underline", onClick: clearSystemErrors, children: "Clear all" }))] })), registryErrors.length > 0 && (jsxs("div", { className: "mb-2 space-y-1", children: [registryErrors.map((err, i) => (jsxs("div", { className: "text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded px-2 py-1 flex items-start justify-between gap-2", children: [jsxs("div", { className: "flex-1", children: [jsx("div", { className: "font-semibold", children: "Registry Error" }), jsx("div", { className: "break-words", children: err.message }), err.attempt && err.maxAttempts && (jsxs("div", { className: "text-[10px] text-amber-600 mt-1", children: ["Attempt ", err.attempt, " of ", err.maxAttempts] }))] }), jsx("button", { className: "text-amber-500 hover:text-amber-700 text-[10px] px-1", onClick: () => removeRegistryError(i), title: "Dismiss", children: jsx(XIcon, { size: 10 }) })] }, i))), registryErrors.length > 1 && (jsx("button", { className: "text-xs text-amber-600 hover:text-amber-800 underline", onClick: clearRegistryErrors, children: "Clear all" }))] })), jsx("div", { className: "font-semibold mb-2", children: "Inspector" }), jsxs("div", { className: "text-xs text-gray-500 mb-2", children: ["valuesTick: ", valuesTick] }), jsx("div", { className: "flex-1", children: !selectedNode && !selectedEdge ? (jsxs("div", { children: [jsx("div", { className: "text-gray-500", children: "Select a node or edge." }), globalValidationIssues && globalValidationIssues.length > 0 && (jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsx("ul", { className: "list-disc ml-4", children: globalValidationIssues.map((m, i) => (jsxs("li", { className: "flex items-center gap-1", children: [jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsx("span", { children: `${m.code}: ${m.message}` }), !!m.data?.edgeId && (jsx("button", { className: "ml-2 text-[10px] px-1 py-[2px] border border-red-300 rounded text-red-700 hover:bg-red-50", onClick: (e) => {
                                                             e.stopPropagation();
                                                             deleteEdgeById(m.data?.edgeId);
                                                         }, title: "Delete referenced edge", children: "Delete edge" }))] }, i))) })] }))] })) : selectedEdge ? (jsxs("div", { children: [jsxs("div", { className: "mb-2", children: [jsxs("div", { children: ["Edge: ", selectedEdge.id] }), jsxs("div", { children: [selectedEdge.source.nodeId, ".", selectedEdge.source.handle, " \u2192", " ", selectedEdge.target.nodeId, ".", selectedEdge.target.handle] }), (() => {
@@ -2562,13 +2615,20 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                             const current = nodeInputs[h];
                                             const hasValue = current !== undefined && current !== null;
                                             const value = drafts[h] ?? safeToString(typeId, current);
-                                            const displayValue = hasValue ? value : "";
+                                            const displayValue = value;
                                             const placeholder = hasDefault ? defaultStr : undefined;
                                             const onChangeText = (text) => setDrafts((d) => ({ ...d, [h]: text }));
                                             const commit = () => {
                                                 const draft = drafts[h];
                                                 if (draft === undefined)
                                                     return;
+                                                // Only commit if draft differs from current value
+                                                const currentDisplay = safeToString(typeId, current);
+                                                if (draft === currentDisplay) {
+                                                    // No change, just sync originals without calling setInput
+                                                    setOriginals((o) => ({ ...o, [h]: draft }));
+                                                    return;
+                                                }
                                                 setInput(h, draft);
                                                 setOriginals((o) => ({ ...o, [h]: draft }));
                                             };
@@ -3386,9 +3446,12 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         state: "local",
     });
     const selectedNode = def.nodes.find((n) => n.nodeId === selectedNodeId);
-    const selectedDesc = selectedNode
+    selectedNode
         ? registry.nodes.get(selectedNode.typeId)
         : undefined;
+    const effectiveHandles = selectedNode
+        ? computeEffectiveHandles(selectedNode, registry)
+        : { inputs: {}, outputs: {}, inputDefaults: {} };
     const [exampleState, setExampleState] = useState(example ?? "");
     const defaultExamples = useMemo(() => [
         {
@@ -3463,7 +3526,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         const off1 = wb.on("graphChanged", () => {
             try {
                 const cur = wb.export();
-                const inputs = runner.getInputs();
+                const inputs = runner.getInputs(cur);
                 onChange({ def: cur, inputs });
             }
             catch { }
@@ -3471,7 +3534,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         const off2 = runner.on("value", () => {
             try {
                 const cur = wb.export();
-                const inputs = runner.getInputs();
+                const inputs = runner.getInputs(cur);
                 onChange({ def: cur, inputs });
             }
             catch { }
@@ -3517,7 +3580,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
     const downloadGraph = useCallback(() => {
         try {
             const def = wb.export();
-            const inputs = runner.getInputs();
+            const inputs = runner.getInputs(def);
             const payload = { def, inputs };
             const pretty = JSON.stringify(payload, null, 2);
             const blob = new Blob([pretty], { type: "application/json" });
@@ -3676,7 +3739,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         const isLinked = def.edges.some((e) => e.target.nodeId === selectedNodeId && e.target.handle === handle);
         if (isLinked)
             return;
-        const typeId = selectedDesc?.inputs?.[handle];
+        const typeId = effectiveHandles.inputs[handle];
         let value = raw;
         const parseArray = (s, map) => {
             const str = String(s).trim();
@@ -3753,7 +3816,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             }
         }
         runner.setInput(selectedNodeId, handle, value);
-    }, [selectedNodeId, def.edges, selectedDesc, runner]);
+    }, [selectedNodeId, def.edges, effectiveHandles, runner]);
     const setInput = useMemo(() => {
         if (overrides?.setInput) {
             return overrides.setInput(baseSetInput, {