@bian-womp/spark-workbench 0.2.34 → 0.2.36

package/lib/cjs/index.cjs

@@ -539,6 +539,16 @@ class LocalGraphRunner extends AbstractGraphRunner {
         }
         return out;
     }
+    getInputDefaults(def) {
+        const out = {};
+        for (const n of def.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
@@ -857,6 +867,16 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         }
         return out;
     }
+    getInputDefaults(def) {
+        const out = {};
+        for (const n of def.nodes) {
+            const dynDefaults = n.resolvedHandles?.inputDefaults ?? {};
+            if (Object.keys(dynDefaults).length > 0) {
+                out[n.nodeId] = dynDefaults;
+            }
+        }
+        return out;
+    }
     dispose() {
         super.dispose();
         this.runner = undefined;
@@ -1608,6 +1628,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: {
@@ -1774,6 +1795,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
     // Def and IO values
     const def = wb.export();
     const inputsMap = React.useMemo(() => runner.getInputs(def), [runner, def, valuesTick]);
+    const inputDefaultsMap = React.useMemo(() => runner.getInputDefaults(def), [runner, def, valuesTick]);
     const outputsMap = React.useMemo(() => runner.getOutputs(def), [runner, def, valuesTick]);
     const outputTypesMap = React.useMemo(() => {
         const out = {};
@@ -1937,7 +1959,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) => ({
@@ -1947,7 +1969,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;
@@ -2000,14 +2022,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") {
@@ -2110,9 +2132,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;
@@ -2122,17 +2146,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);
@@ -2148,19 +2169,31 @@ 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
@@ -2259,6 +2292,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
         edgeStatus,
         valuesTick,
         inputsMap,
+        inputDefaultsMap,
         outputsMap,
         outputTypesMap,
         validationByNode,
@@ -2301,6 +2335,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
         removeSystemError,
         removeRegistryError,
         inputsMap,
+        inputDefaultsMap,
         outputsMap,
         validationByNode,
         validationByEdge,
@@ -2386,7 +2421,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;
@@ -2401,8 +2436,33 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
         .filter(([k]) => !sparkGraph.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;
@@ -2488,19 +2548,30 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                                     }, children: [jsxRuntime.jsx("option", { value: "", children: "(infer from source)" }), Array.from(registry.types.keys()).map((tid) => (jsxRuntime.jsx("option", { value: tid, children: tid }, tid)))] })] })] }), 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}` }), jsxRuntime.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))) })] }))] })) : (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?.activeRuns &&
+                                                        }, title: "Delete this edge", children: "Delete edge" })] }, 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?.activeRuns &&
                                             selectedNodeStatus.activeRuns > 0 && (jsxRuntime.jsxs("div", { className: "mt-1 text-xs text-blue-700 bg-blue-50 border border-blue-200 rounded px-2 py-1", children: [jsxRuntime.jsxs("div", { className: "font-semibold", children: ["Running (", selectedNodeStatus.activeRuns, ")"] }), selectedNodeStatus.activeRunIds &&
                                                     selectedNodeStatus.activeRunIds.length > 0 ? (jsxRuntime.jsxs("div", { className: "mt-1", children: [jsxRuntime.jsx("div", { className: "text-[10px] text-blue-600", children: "RunIds:" }), jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 mt-1", children: selectedNodeStatus.activeRunIds.map((runId, idx) => (jsxRuntime.jsx("span", { className: "text-[10px] px-1.5 py-0.5 bg-blue-100 border border-blue-300 rounded font-mono", children: runId }, idx))) })] })) : (jsxRuntime.jsx("div", { className: "text-[10px] text-blue-600 mt-1", children: "RunIds not available (some runs may have started without runId)" }))] })), !!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(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];
@@ -2513,6 +2584,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;
@@ -2520,25 +2596,43 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                             const title = inIssues
                                                 .map((v) => `${v.code}: ${v.message}`)
                                                 .join("; ");
-                                            return (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxRuntime.jsxs("label", { className: "w-32 flex flex-col", children: [jsxRuntime.jsx("span", { children: prettyHandle(h) }), jsxRuntime.jsx("span", { className: "text-gray-500 text-[11px]", children: typeId })] }), hasValidation && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 24, className: "ml-1 w-6 h-6", title: title })), isEnum ? (jsxRuntime.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: [jsxRuntime.jsx("option", { value: "", children: "(select)" }), registry.enums.get(typeId)?.options.map((opt) => (jsxRuntime.jsx("option", { value: String(opt.value), children: opt.label }, opt.value)))] })) : isLinked ? (toElement(typeId, current)) : (jsxRuntime.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));
-                                        }))] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Outputs" }), outputHandles.length === 0 ? (jsxRuntime.jsx("div", { className: "text-gray-500", children: "No outputs" })) : (outputHandles.map((h) => (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxRuntime.jsxs("label", { className: "w-20 flex flex-col", children: [jsxRuntime.jsx("span", { children: prettyHandle(h) }), jsxRuntime.jsx("span", { className: "text-gray-500 text-[11px]", children: outputTypesMap[selectedNodeId]?.[h] ?? "" })] }), jsxRuntime.jsx("div", { className: "flex-1", children: (() => {
+                                            return (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxRuntime.jsxs("label", { className: "w-32 flex flex-col", children: [jsxRuntime.jsx("span", { children: prettyHandle(h) }), jsxRuntime.jsx("span", { className: "text-gray-500 text-[11px]", children: typeId })] }), hasValidation && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 24, className: "ml-1 w-6 h-6", title: title })), isEnum ? (jsxRuntime.jsxs("div", { className: "flex items-center gap-1 flex-1", children: [jsxRuntime.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: [jsxRuntime.jsx("option", { value: "", children: placeholder
+                                                                            ? `Default: ${placeholder}`
+                                                                            : "(select)" }), registry.enums
+                                                                        .get(typeId)
+                                                                        ?.options.map((opt) => (jsxRuntime.jsx("option", { value: String(opt.value), children: opt.label }, opt.value)))] }), hasValue && !isLinked && (jsxRuntime.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: jsxRuntime.jsx(react$1.XCircleIcon, { size: 16 }) }))] })) : isLinked ? (jsxRuntime.jsx("div", { className: "flex items-center gap-1 flex-1", children: jsxRuntime.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 (jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("span", { className: "truncate", children: truncated }), isLong && (jsxRuntime.jsx("button", { className: "flex-shrink-0 p-1 hover:bg-gray-100 rounded", onClick: () => copyToClipboard(displayStr), title: "Copy full value", children: jsxRuntime.jsx(react$1.CopyIcon, { size: 14 }) }))] }));
+                                                            })() }) })) : (jsxRuntime.jsxs("div", { className: "flex items-center gap-1 flex-1", children: [jsxRuntime.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 && (jsxRuntime.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: jsxRuntime.jsx(react$1.XCircleIcon, { size: 16 }) }))] }))] }, h));
+                                        }))] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Outputs" }), outputHandles.length === 0 ? (jsxRuntime.jsx("div", { className: "text-gray-500", children: "No outputs" })) : (outputHandles.map((h) => (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxRuntime.jsxs("label", { className: "w-20 flex flex-col", children: [jsxRuntime.jsx("span", { children: prettyHandle(h) }), jsxRuntime.jsx("span", { className: "text-gray-500 text-[11px]", children: outputTypesMap[selectedNodeId]?.[h] ?? "" })] }), jsxRuntime.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 (jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("span", { className: "truncate", children: truncated }), isLong && (jsxRuntime.jsx("button", { className: "flex-shrink-0 p-1 hover:bg-gray-100 rounded", onClick: () => copyToClipboard(displayStr), title: "Copy full value", children: jsxRuntime.jsx(react$1.CopyIcon, { size: 14 }) }))] }));
                                                     })() }), (() => {
                                                     const outIssues = selectedNodeHandleValidation.outputs.filter((m) => m.handle === h);
                                                     if (outIssues.length === 0)
@@ -2680,7 +2774,7 @@ function DefaultNodeHeader({ id, title, validation, right, showId, onInvalidate,
                             .join("; ") })), showId && jsxRuntime.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 };
@@ -2709,14 +2803,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 (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", { style: { flex: 1, minWidth: 0, maxWidth: "100%" } })), jsxRuntime.jsx("span", { className: "truncate shrink-0", style: valueText !== undefined ? { maxWidth: "40%" } : {}, children: prettyHandle(handleId) })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "truncate shrink-0", style: valueText !== undefined ? { maxWidth: "40%" } : {}, children: prettyHandle(handleId) }), 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 }))] }));
+                    return (jsxRuntime.jsxs("span", { className: `flex items-center gap-1 w-full ${valueText?.isDefault ? "text-gray-400" : ""}`, 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.text })) : (jsxRuntime.jsx("span", { style: { flex: 1, minWidth: 0, maxWidth: "100%" } })), jsxRuntime.jsx("span", { className: "truncate shrink-0", style: valueText !== undefined ? { maxWidth: "40%" } : {}, children: prettyHandle(handleId) })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "truncate shrink-0", style: valueText !== undefined ? { maxWidth: "40%" } : {}, children: prettyHandle(handleId) }), valueText !== undefined && (jsxRuntime.jsx("span", { className: `truncate pr-1 ${valueText.isDefault ? "text-gray-400" : "opacity-60"}`, style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText.text }))] })), hasAny && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "shrink-0", title: title }))] }));
                 } })] }));
 }
 
@@ -3013,7 +3116,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
@@ -3108,9 +3211,28 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
     const { nodes, edges } = React.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,