@bian-womp/spark-workbench 0.2.34 → 0.2.35

package/lib/esm/index.js

@@ -337,6 +337,7 @@ 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])
@@ -393,6 +394,7 @@ 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 });
@@ -427,12 +429,14 @@ 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
@@ -497,11 +501,11 @@ class LocalGraphRunner extends AbstractGraphRunner {
         if (eng instanceof BatchedEngine)
             eng.flush();
     }
-    getOutputs(def) {
+    getOutputs() {
         const out = {};
-        if (!this.runtime)
+        if (!this.runtime || !this.currentDef)
             return out;
-        for (const n of def.nodes) {
+        for (const n of this.currentDef.nodes) {
             const desc = this.registry.nodes.get(n.typeId);
             const handles = Object.keys(desc?.outputs ?? {});
             for (const h of handles) {
@@ -515,15 +519,17 @@ class LocalGraphRunner extends AbstractGraphRunner {
         }
         return out;
     }
-    getInputs(def) {
+    getInputs() {
         const out = {};
-        for (const n of def.nodes) {
+        if (!this.currentDef)
+            return out;
+        for (const n of this.currentDef.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(def.edges
+            const inbound = new Set(this.currentDef.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
@@ -537,26 +543,22 @@ class LocalGraphRunner extends AbstractGraphRunner {
         }
         return out;
     }
+    getInputDefaults() {
+        const out = {};
+        if (!this.currentDef)
+            return out;
+        for (const n of this.currentDef.nodes) {
+            const dynDefaults = n.resolvedHandles?.inputDefaults ?? {};
+            if (Object.keys(dynDefaults).length > 0) {
+                out[n.nodeId] = dynDefaults;
+            }
+        }
+        return out;
+    }
     async snapshotFull() {
         const def = undefined; // UI will supply def/positions on download for local
-        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 inputs = this.getInputs();
+        const outputs = this.getOutputs();
         const environment = this.getEnvironment() || {};
         return { def, environment, inputs, outputs };
     }
@@ -633,8 +635,8 @@ class RemoteGraphRunner extends AbstractGraphRunner {
                             this.emit("registry", this.registry);
                             // Trigger update so validation/UI refreshes using last known graph
                             try {
-                                if (this.lastDef)
-                                    this.update(this.lastDef);
+                                if (this.currentDef)
+                                    this.update(this.currentDef);
                             }
                             catch {
                                 console.error("Failed to update graph definition after registry changed");
@@ -652,12 +654,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 { }
         });
@@ -669,7 +671,6 @@ 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();
@@ -805,12 +806,12 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         // For now, we expose an async helper on RemoteRunner. Keep sync signature per interface.
         return undefined;
     }
-    getOutputs(def) {
+    getOutputs() {
         const out = {};
         const cache = this.valueCache;
-        if (!cache)
+        if (!cache || !this.currentDef)
             return out;
-        for (const n of def.nodes) {
+        for (const n of this.currentDef.nodes) {
             const resolved = n.resolvedHandles?.outputs;
             const desc = this.registry.nodes.get(n.typeId);
             const handles = Object.keys(resolved ?? desc?.outputs ?? {});
@@ -826,17 +827,19 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         }
         return out;
     }
-    getInputs(def) {
+    getInputs() {
         const out = {};
         const cache = this.valueCache;
-        for (const n of def.nodes) {
+        if (!this.currentDef)
+            return out;
+        for (const n of this.currentDef.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(def.edges
+            const inbound = new Set(this.currentDef.edges
                 .filter((e) => e.target.nodeId === n.nodeId)
                 .map((e) => e.target.handle));
             for (const h of handles) {
@@ -855,6 +858,18 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         }
         return out;
     }
+    getInputDefaults() {
+        const out = {};
+        if (!this.currentDef)
+            return out;
+        for (const n of this.currentDef.nodes) {
+            const dynDefaults = n.resolvedHandles?.inputDefaults ?? {};
+            if (Object.keys(dynDefaults).length > 0) {
+                out[n.nodeId] = dynDefaults;
+            }
+        }
+        return out;
+    }
     dispose() {
         super.dispose();
         this.runner = undefined;
@@ -1606,6 +1621,7 @@ function toReactFlow(def, positions, registry, opts) {
                 renderWidth: initialWidth,
                 renderHeight: initialHeight,
                 inputValues: opts.inputs?.[n.nodeId],
+                inputDefaults: opts.inputDefaults?.[n.nodeId],
                 outputValues: opts.outputs?.[n.nodeId],
                 status: opts.nodeStatus?.[n.nodeId],
                 validation: {
@@ -1771,8 +1787,9 @@ 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(def), [runner, def, valuesTick]);
-    const outputsMap = useMemo(() => runner.getOutputs(def), [runner, def, valuesTick]);
+    const inputsMap = useMemo(() => runner.getInputs(), [runner, valuesTick]);
+    const inputDefaultsMap = useMemo(() => runner.getInputDefaults(), [runner, valuesTick]);
+    const outputsMap = useMemo(() => runner.getOutputs(), [runner, valuesTick]);
     const outputTypesMap = useMemo(() => {
         const out = {};
         // Local: runtimeTypeId is not stored; derive from typed wrapper in outputsMap
@@ -1935,7 +1952,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             }
             catch { }
         };
-        const off1 = runner.on("value", (e) => {
+        const offRunnerValue = runner.on("value", (e) => {
             if (e?.io === "input") {
                 const nodeId = e?.nodeId;
                 setNodeStatus((s) => ({
@@ -1945,7 +1962,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             }
             return add("runner", "value")(e);
         });
-        const off2 = runner.on("error", (e) => {
+        const offRunnerError = runner.on("error", (e) => {
             const edgeError = e;
             const nodeError = e;
             const registryError = e;
@@ -1998,14 +2015,14 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             }
             return add("runner", "error")(e);
         });
-        const off3 = runner.on("invalidate", (e) => {
+        const offRunnerInvalidate = runner.on("invalidate", (e) => {
             // After build/update, pull resolved handles and merge in-place (no graphChanged)
             if (e?.reason === "graph-updated" || e?.reason === "graph-built") {
                 refreshResolvedHandles();
             }
             return add("runner", "invalidate")(e);
         });
-        const off3b = runner.on("stats", (s) => {
+        const offRunnerStats = runner.on("stats", (s) => {
             if (!s)
                 return;
             if (s.kind === "node-start") {
@@ -2108,9 +2125,11 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             }
             return add("runner", "stats")(s);
         });
-        const off4 = wb.on("graphChanged", add("workbench", "graphChanged"));
+        const offWbGraphChanged = wb.on("graphChanged", add("workbench", "graphChanged"));
+        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
-        const off4c = wb.on("graphChanged", (e) => {
+        const offWbAddNode = wb.on("graphChanged", (e) => {
             const change = e.change;
             if (change?.type === "addNode" && typeof change.nodeId === "string") {
                 const id = change.nodeId;
@@ -2120,17 +2139,14 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
                 }));
             }
         });
-        const off4b = wb.on("graphUiChanged", add("workbench", "graphUiChanged"));
-        const off5 = wb.on("validationChanged", add("workbench", "validationChanged"));
-        const off5b = wb.on("validationChanged", (r) => setValidation(r));
-        const off6 = wb.on("selectionChanged", (sel) => {
+        const offWbdSetValidation = wb.on("validationChanged", (r) => setValidation(r));
+        const offWbSelectionChanged = wb.on("selectionChanged", (sel) => {
             setSelectedNodeId(sel.nodes?.[0]);
             setSelectedEdgeId(sel.edges?.[0]);
         });
-        const off7 = wb.on("error", add("workbench", "error"));
-        wb.refreshValidation();
+        const offWbError = wb.on("error", add("workbench", "error"));
         // Registry updates: swap registry and refresh graph validation/UI
-        const offReg = runner.on("registry", (newReg) => {
+        const offRunnerRegistry = runner.on("registry", (newReg) => {
             try {
                 setRegistry(newReg);
                 wb.setRegistry(newReg);
@@ -2146,29 +2162,40 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
                 console.error("Failed to handle registry changed event");
             }
         });
+        // Handle transport disconnect: reset runtime status when connection is lost
+        const offRunnerTransport = runner.on("transport", (t) => {
+            if (t.state === "disconnected") {
+                console.info("[WorkbenchContext] Transport disconnected, resetting node status");
+                setNodeStatus({});
+                setEdgeStatus({});
+                setFallbackStarts({});
+                errorRunsRef.current = {};
+            }
+        });
+        wb.refreshValidation();
         return () => {
-            off1();
-            off2();
-            off3();
-            off3b();
-            off4();
-            off4b();
-            off4c();
-            off5();
-            off5b();
-            off6();
-            off7();
-            offReg();
+            offRunnerValue();
+            offRunnerError();
+            offRunnerInvalidate();
+            offRunnerStats();
+            offWbGraphChanged();
+            offWbGraphUiChanged();
+            offWbValidationChanged();
+            offWbError();
+            offWbAddNode();
+            offWbdSetValidation();
+            offWbSelectionChanged();
+            offRunnerRegistry();
+            offRunnerTransport();
         };
     }, [runner, wb]);
-    // Push incremental updates into running engine without full reload
+    // 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.
     useEffect(() => {
-        if (runner.isRunning()) {
-            try {
-                runner.update(def);
-            }
-            catch { }
+        try {
+            runner.update(def);
         }
+        catch { }
     }, [runner, def, graphTick]);
     const validationByNode = useMemo(() => {
         const inputs = {};
@@ -2257,6 +2284,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
         edgeStatus,
         valuesTick,
         inputsMap,
+        inputDefaultsMap,
         outputsMap,
         outputTypesMap,
         validationByNode,
@@ -2299,6 +2327,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
         removeSystemError,
         removeRegistryError,
         inputsMap,
+        inputDefaultsMap,
         outputsMap,
         validationByNode,
         validationByEdge,
@@ -2384,7 +2413,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
             return String(value ?? "");
         }
     };
-    const { registry, def, selectedNodeId, selectedEdgeId, inputsMap, 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, clearSystemErrors, clearRegistryErrors, removeSystemError, removeRegistryError, } = useWorkbenchContext();
     const nodeValidationIssues = validationByNode.issues;
     const edgeValidationIssues = validationByEdge.issues;
     const nodeValidationHandles = validationByNode;
@@ -2399,8 +2428,33 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
         .filter(([k]) => !isInputPrivate(effectiveHandles.inputs, k))
         .map(([k]) => k);
     const outputHandles = Object.keys(effectiveHandles.outputs);
-    const nodeInputs = selectedNodeId ? inputsMap[selectedNodeId] ?? {} : {};
+    const nodeInputsRaw = selectedNodeId ? inputsMap[selectedNodeId] ?? {} : {};
+    const nodeInputsDefaults = selectedNodeId
+        ? inputDefaultsMap[selectedNodeId] ?? {}
+        : {};
+    // Keep defaults separate for placeholder use (don't merge into nodeInputs)
+    const nodeInputs = nodeInputsRaw;
     const nodeOutputs = selectedNodeId ? outputsMap[selectedNodeId] ?? {} : {};
+    // Helper to truncate long values
+    const truncateValue = (str, maxLen = 50) => {
+        if (str.length <= maxLen)
+            return str;
+        const start = Math.floor(maxLen / 2) - 5;
+        const end = str.length - Math.floor(maxLen / 2) + 5;
+        return `${str.slice(0, start)}...${str.slice(end)}`;
+    };
+    // Helper to copy to clipboard
+    const copyToClipboard = (text) => {
+        navigator.clipboard.writeText(text).catch(() => {
+            // Fallback for older browsers
+            const textarea = document.createElement("textarea");
+            textarea.value = text;
+            document.body.appendChild(textarea);
+            textarea.select();
+            document.execCommand("copy");
+            document.body.removeChild(textarea);
+        });
+    };
     const selectedNodeStatus = selectedNodeId
         ? nodeStatus?.[selectedNodeId]
         : undefined;
@@ -2486,19 +2540,30 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                                     }, children: [jsx("option", { value: "", children: "(infer from source)" }), Array.from(registry.types.keys()).map((tid) => (jsx("option", { value: tid, children: tid }, tid)))] })] })] }), selectedEdgeValidation.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: selectedEdgeValidation.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}` }), 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(selectedEdge.id);
-                                                        }, title: "Delete this edge", children: "Delete edge" })] }, i))) })] }))] })) : (jsxs("div", { children: [selectedNode && (jsxs("div", { className: "mb-2", children: [jsxs("div", { children: ["Node: ", selectedNode.nodeId] }), jsxs("div", { children: ["Type: ", selectedNode.typeId] }), selectedNodeStatus?.activeRuns &&
+                                                        }, title: "Delete this edge", children: "Delete edge" })] }, i))) })] }))] })) : (jsxs("div", { children: [selectedNode && (jsxs("div", { className: "mb-2", children: [jsxs("div", { children: ["Node: ", selectedNode.nodeId] }), jsxs("div", { children: ["Type: ", selectedNode.typeId] }), !!selectedNodeStatus?.activeRuns &&
                                             selectedNodeStatus.activeRuns > 0 && (jsxs("div", { className: "mt-1 text-xs text-blue-700 bg-blue-50 border border-blue-200 rounded px-2 py-1", children: [jsxs("div", { className: "font-semibold", children: ["Running (", selectedNodeStatus.activeRuns, ")"] }), selectedNodeStatus.activeRunIds &&
                                                     selectedNodeStatus.activeRunIds.length > 0 ? (jsxs("div", { className: "mt-1", children: [jsx("div", { className: "text-[10px] text-blue-600", children: "RunIds:" }), jsx("div", { className: "flex flex-wrap gap-1 mt-1", children: selectedNodeStatus.activeRunIds.map((runId, idx) => (jsx("span", { className: "text-[10px] px-1.5 py-0.5 bg-blue-100 border border-blue-300 rounded font-mono", children: runId }, idx))) })] })) : (jsx("div", { className: "text-[10px] text-blue-600 mt-1", children: "RunIds not available (some runs may have started without runId)" }))] })), !!selectedNodeStatus?.lastError && (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) }))] })), jsxs("div", { className: "mb-2", children: [jsx("div", { className: "font-semibold mb-1", children: "Inputs" }), inputHandles.length === 0 ? (jsx("div", { className: "text-gray-500", children: "No inputs" })) : (inputHandles.map((h) => {
                                             const typeId = getInputTypeId(effectiveHandles.inputs, h);
                                             const isLinked = def.edges.some((e) => e.target.nodeId === selectedNodeId &&
                                                 e.target.handle === h);
+                                            const inbound = new Set(def.edges
+                                                .filter((e) => e.target.nodeId === selectedNodeId &&
+                                                e.target.handle === h)
+                                                .map((e) => e.target.handle));
+                                            const hasDefault = !inbound.has(h) && nodeInputsDefaults[h] !== undefined;
+                                            const defaultStr = hasDefault
+                                                ? safeToString(typeId, nodeInputsDefaults[h])
+                                                : undefined;
                                             const commonProps = {
                                                 style: { flex: 1 },
                                                 disabled: isLinked,
                                             };
                                             const current = nodeInputs[h];
+                                            const hasValue = current !== undefined && current !== null;
                                             const value = drafts[h] ?? safeToString(typeId, current);
+                                            const displayValue = hasValue ? value : "";
+                                            const placeholder = hasDefault ? defaultStr : undefined;
                                             const onChangeText = (text) => setDrafts((d) => ({ ...d, [h]: text }));
                                             const commit = () => {
                                                 const draft = drafts[h];
@@ -2511,6 +2576,11 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                                 const orig = originals[h] ?? safeToString(typeId, current);
                                                 setDrafts((d) => ({ ...d, [h]: orig }));
                                             };
+                                            const clearInput = () => {
+                                                setInput(h, undefined);
+                                                setDrafts((d) => ({ ...d, [h]: "" }));
+                                                setOriginals((o) => ({ ...o, [h]: "" }));
+                                            };
                                             const isEnum = typeId?.startsWith("enum:");
                                             const inIssues = selectedNodeHandleValidation.inputs.filter((m) => m.handle === h);
                                             const hasValidation = inIssues.length > 0;
@@ -2518,25 +2588,43 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                             const title = inIssues
                                                 .map((v) => `${v.code}: ${v.message}`)
                                                 .join("; ");
-                                            return (jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxs("label", { className: "w-32 flex flex-col", children: [jsx("span", { children: prettyHandle(h) }), jsx("span", { className: "text-gray-500 text-[11px]", children: typeId })] }), hasValidation && (jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 24, className: "ml-1 w-6 h-6", title: title })), isEnum ? (jsxs("select", { className: "border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full", value: current !== undefined && current !== null
-                                                            ? String(current)
-                                                            : "", onChange: (e) => {
-                                                            const val = e.target.value;
-                                                            const raw = val === "" ? undefined : Number(val);
-                                                            setInput(h, raw);
-                                                            // keep drafts/originals in sync with label for display elsewhere
-                                                            const display = safeToString(typeId, raw);
-                                                            setDrafts((d) => ({ ...d, [h]: display }));
-                                                            setOriginals((o) => ({ ...o, [h]: display }));
-                                                        }, ...commonProps, children: [jsx("option", { value: "", children: "(select)" }), registry.enums.get(typeId)?.options.map((opt) => (jsx("option", { value: String(opt.value), children: opt.label }, opt.value)))] })) : isLinked ? (toElement(typeId, current)) : (jsx("input", { className: "border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full", placeholder: isLinked ? "wired" : undefined, value: value, onChange: (e) => onChangeText(e.target.value), onBlur: commit, onKeyDown: (e) => {
-                                                            if (e.key === "Enter")
-                                                                commit();
-                                                            if (e.key === "Escape")
-                                                                revert();
-                                                        }, ...commonProps }))] }, h));
-                                        }))] }), jsxs("div", { children: [jsx("div", { className: "font-semibold mb-1", children: "Outputs" }), outputHandles.length === 0 ? (jsx("div", { className: "text-gray-500", children: "No outputs" })) : (outputHandles.map((h) => (jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxs("label", { className: "w-20 flex flex-col", children: [jsx("span", { children: prettyHandle(h) }), jsx("span", { className: "text-gray-500 text-[11px]", children: outputTypesMap[selectedNodeId]?.[h] ?? "" })] }), jsx("div", { className: "flex-1", children: (() => {
+                                            return (jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxs("label", { className: "w-32 flex flex-col", children: [jsx("span", { children: prettyHandle(h) }), jsx("span", { className: "text-gray-500 text-[11px]", children: typeId })] }), hasValidation && (jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 24, className: "ml-1 w-6 h-6", title: title })), isEnum ? (jsxs("div", { className: "flex items-center gap-1 flex-1", children: [jsxs("select", { className: "border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 flex-1", value: current !== undefined && current !== null
+                                                                    ? String(current)
+                                                                    : "", onChange: (e) => {
+                                                                    const val = e.target.value;
+                                                                    const raw = val === "" ? undefined : Number(val);
+                                                                    setInput(h, raw);
+                                                                    // keep drafts/originals in sync with label for display elsewhere
+                                                                    const display = safeToString(typeId, raw);
+                                                                    setDrafts((d) => ({ ...d, [h]: display }));
+                                                                    setOriginals((o) => ({ ...o, [h]: display }));
+                                                                }, ...commonProps, children: [jsx("option", { value: "", children: placeholder
+                                                                            ? `Default: ${placeholder}`
+                                                                            : "(select)" }), registry.enums
+                                                                        .get(typeId)
+                                                                        ?.options.map((opt) => (jsx("option", { value: String(opt.value), children: opt.label }, opt.value)))] }), hasValue && !isLinked && (jsx("button", { className: "flex-shrink-0 p-1 hover:bg-gray-100 rounded text-gray-500 hover:text-gray-700", onClick: clearInput, title: "Clear input value", children: jsx(XCircleIcon, { size: 16 }) }))] })) : isLinked ? (jsx("div", { className: "flex items-center gap-1 flex-1", children: jsx("div", { className: "flex-1 min-w-0", children: (() => {
+                                                                const displayStr = safeToString(typeId, current);
+                                                                const isLong = displayStr.length > 50;
+                                                                const truncated = isLong
+                                                                    ? truncateValue(displayStr)
+                                                                    : displayStr;
+                                                                return (jsxs("div", { className: "flex items-center gap-1", children: [jsx("span", { className: "truncate", children: truncated }), isLong && (jsx("button", { className: "flex-shrink-0 p-1 hover:bg-gray-100 rounded", onClick: () => copyToClipboard(displayStr), title: "Copy full value", children: jsx(CopyIcon, { size: 14 }) }))] }));
+                                                            })() }) })) : (jsxs("div", { className: "flex items-center gap-1 flex-1", children: [jsx("input", { className: "border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 flex-1", placeholder: placeholder
+                                                                    ? `Default: ${placeholder}`
+                                                                    : undefined, value: displayValue, onChange: (e) => onChangeText(e.target.value), onBlur: commit, onKeyDown: (e) => {
+                                                                    if (e.key === "Enter")
+                                                                        commit();
+                                                                    if (e.key === "Escape")
+                                                                        revert();
+                                                                }, ...commonProps }), hasValue && !isLinked && (jsx("button", { className: "flex-shrink-0 p-1 hover:bg-gray-100 rounded text-gray-500 hover:text-gray-700", onClick: clearInput, title: "Clear input value", children: jsx(XCircleIcon, { size: 16 }) }))] }))] }, h));
+                                        }))] }), jsxs("div", { children: [jsx("div", { className: "font-semibold mb-1", children: "Outputs" }), outputHandles.length === 0 ? (jsx("div", { className: "text-gray-500", children: "No outputs" })) : (outputHandles.map((h) => (jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxs("label", { className: "w-20 flex flex-col", children: [jsx("span", { children: prettyHandle(h) }), jsx("span", { className: "text-gray-500 text-[11px]", children: outputTypesMap[selectedNodeId]?.[h] ?? "" })] }), jsx("div", { className: "flex-1 min-w-0", children: (() => {
                                                         const { typeId, value } = resolveOutputDisplay(nodeOutputs[h], effectiveHandles.outputs[h]);
-                                                        return toElement(typeId, value);
+                                                        const displayStr = safeToString(typeId, value);
+                                                        const isLong = displayStr.length > 50;
+                                                        const truncated = isLong
+                                                            ? truncateValue(displayStr)
+                                                            : displayStr;
+                                                        return (jsxs("div", { className: "flex items-center gap-1", children: [jsx("span", { className: "truncate", children: truncated }), isLong && (jsx("button", { className: "flex-shrink-0 p-1 hover:bg-gray-100 rounded", onClick: () => copyToClipboard(displayStr), title: "Copy full value", children: jsx(CopyIcon, { size: 14 }) }))] }));
                                                     })() }), (() => {
                                                     const outIssues = selectedNodeHandleValidation.outputs.filter((m) => m.handle === h);
                                                     if (outIssues.length === 0)
@@ -2678,7 +2766,7 @@ function DefaultNodeHeader({ id, title, validation, right, showId, onInvalidate,
                             .join("; ") })), showId && jsxs("span", { className: "text-[10px] opacity-70", children: ["(", id, ")"] })] })] }));
 }
 function DefaultNodeContent({ data, isConnectable, }) {
-    const { showValues, inputValues, outputValues, toString } = data;
+    const { showValues, inputValues, inputDefaults, outputValues, toString } = data;
     const inputEntries = data.inputHandles ?? [];
     const outputEntries = data.outputHandles ?? [];
     const status = data.status ?? { activeRuns: 0 };
@@ -2707,14 +2795,23 @@ function DefaultNodeContent({ data, isConnectable, }) {
                         if (!showValues)
                             return undefined;
                         if (kind === "input") {
-                            const txt = toString(entry.typeId, inputValues?.[entry.id]);
-                            return typeof txt === "string" ? txt : String(txt);
+                            const value = inputValues?.[entry.id];
+                            const isDefault = value !== undefined &&
+                                inputDefaults?.[entry.id] !== undefined &&
+                                JSON.stringify(value) ===
+                                    JSON.stringify(inputDefaults[entry.id]);
+                            const txt = toString(entry.typeId, value);
+                            const str = typeof txt === "string" ? txt : String(txt);
+                            return { text: str, isDefault };
                         }
                         const resolved = resolveOutputDisplay(outputValues?.[entry.id], entry.typeId);
                         const txt = toString(resolved.typeId, resolved.value);
-                        return typeof txt === "string" ? txt : String(txt);
+                        return {
+                            text: typeof txt === "string" ? txt : String(txt),
+                            isDefault: false,
+                        };
                     })();
-                    return (jsxs("span", { className: "flex items-center gap-1 w-full", children: [kind === "output" ? (jsxs(Fragment, { children: [valueText !== undefined ? (jsx("span", { className: "opacity-60 truncate pl-1", style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText })) : (jsx("span", { style: { flex: 1, minWidth: 0, maxWidth: "100%" } })), jsx("span", { className: "truncate shrink-0", style: valueText !== undefined ? { maxWidth: "40%" } : {}, children: prettyHandle(handleId) })] })) : (jsxs(Fragment, { children: [jsx("span", { className: "truncate shrink-0", style: valueText !== undefined ? { maxWidth: "40%" } : {}, children: prettyHandle(handleId) }), valueText !== undefined && (jsx("span", { className: "opacity-60 truncate pr-1", style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText }))] })), hasAny && (jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "shrink-0", title: title }))] }));
+                    return (jsxs("span", { className: `flex items-center gap-1 w-full ${valueText?.isDefault ? "text-gray-400" : ""}`, children: [kind === "output" ? (jsxs(Fragment, { children: [valueText !== undefined ? (jsx("span", { className: "opacity-60 truncate pl-1", style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText.text })) : (jsx("span", { style: { flex: 1, minWidth: 0, maxWidth: "100%" } })), jsx("span", { className: "truncate shrink-0", style: valueText !== undefined ? { maxWidth: "40%" } : {}, children: prettyHandle(handleId) })] })) : (jsxs(Fragment, { children: [jsx("span", { className: "truncate shrink-0", style: valueText !== undefined ? { maxWidth: "40%" } : {}, children: prettyHandle(handleId) }), valueText !== undefined && (jsx("span", { className: `truncate pr-1 ${valueText.isDefault ? "text-gray-400" : "opacity-60"}`, style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText.text }))] })), hasAny && (jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "shrink-0", title: title }))] }));
                 } })] }));
 }
 
@@ -3011,7 +3108,7 @@ function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {
 }
 
 const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, getDefaultNodeSize }, ref) => {
-    const { wb, registry, inputsMap, outputsMap, valuesTick, nodeStatus, edgeStatus, validationByNode, validationByEdge, uiVersion, } = useWorkbenchContext();
+    const { wb, registry, inputsMap, inputDefaultsMap, outputsMap, valuesTick, nodeStatus, edgeStatus, validationByNode, validationByEdge, uiVersion, } = useWorkbenchContext();
     const nodeValidation = validationByNode;
     const edgeValidation = validationByEdge.errors;
     // Keep stable references for nodes/edges to avoid unnecessary updates
@@ -3106,9 +3203,28 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
     const { nodes, edges } = useMemo(() => {
         const def = wb.export();
         const sel = wb.getSelection();
+        // Merge defaults with inputs for node display (defaults shown in lighter gray)
+        const inputsWithDefaults = {};
+        for (const n of def.nodes) {
+            const nodeInputs = inputsMap[n.nodeId] ?? {};
+            const nodeDefaults = inputDefaultsMap[n.nodeId] ?? {};
+            const inbound = new Set(def.edges
+                .filter((e) => e.target.nodeId === n.nodeId)
+                .map((e) => e.target.handle));
+            const merged = { ...nodeInputs };
+            for (const [h, v] of Object.entries(nodeDefaults)) {
+                if (!inbound.has(h) && merged[h] === undefined) {
+                    merged[h] = v;
+                }
+            }
+            if (Object.keys(merged).length > 0) {
+                inputsWithDefaults[n.nodeId] = merged;
+            }
+        }
         const out = toReactFlow(def, wb.getPositions(), registry, {
             showValues,
-            inputs: inputsMap,
+            inputs: inputsWithDefaults,
+            inputDefaults: inputDefaultsMap,
             outputs: outputsMap,
             resolveNodeType,
             toString,
@@ -3347,7 +3463,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         const off1 = wb.on("graphChanged", () => {
             try {
                 const cur = wb.export();
-                const inputs = runner.getInputs(cur);
+                const inputs = runner.getInputs();
                 onChange({ def: cur, inputs });
             }
             catch { }
@@ -3355,7 +3471,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         const off2 = runner.on("value", () => {
             try {
                 const cur = wb.export();
-                const inputs = runner.getInputs(cur);
+                const inputs = runner.getInputs();
                 onChange({ def: cur, inputs });
             }
             catch { }
@@ -3401,7 +3517,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
     const downloadGraph = useCallback(() => {
         try {
             const def = wb.export();
-            const inputs = runner.getInputs(def);
+            const inputs = runner.getInputs();
             const payload = { def, inputs };
             const pretty = JSON.stringify(payload, null, 2);
             const blob = new Blob([pretty], { type: "application/json" });