@bian-womp/spark-workbench 0.2.26 → 0.2.28

package/lib/cjs/index.cjs

@@ -524,7 +524,16 @@ class LocalGraphRunner extends AbstractGraphRunner {
             const runtimeInputs = this.runtime
                 ? this.runtime.getNodeData?.(n.nodeId)?.inputs ?? {}
                 : {};
-            const merged = { ...runtimeInputs, ...staged };
+            // Build inbound handle set for this node from current def
+            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
+            const merged = { ...runtimeInputs };
+            for (const [h, v] of Object.entries(staged)) {
+                if (!inbound.has(h))
+                    merged[h] = v;
+            }
             if (Object.keys(merged).length > 0)
                 out[n.nodeId] = merged;
         }
@@ -795,12 +804,21 @@ class RemoteGraphRunner extends AbstractGraphRunner {
             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
+                .filter((e) => e.target.nodeId === n.nodeId)
+                .map((e) => e.target.handle));
             for (const h of handles) {
                 const rec = cache.get(`${n.nodeId}.${h}`);
                 if (rec && rec.io === "input")
                     cur[h] = rec.value;
             }
-            const merged = { ...cur, ...staged };
+            // Merge staged only for non-inbound handles so UI doesn't override runtime values
+            const merged = { ...cur };
+            for (const [h, v] of Object.entries(staged)) {
+                if (!inbound.has(h))
+                    merged[h] = v;
+            }
             if (Object.keys(merged).length > 0)
                 out[n.nodeId] = merged;
         }
@@ -1264,6 +1282,23 @@ function formatDeclaredTypeSignature(declared) {
         return declared.join(" | ");
     return declared ?? "";
 }
+/**
+ * Formats a handle ID for display in the UI.
+ * For handles with format "prefix:middle:suffix:extra" (4 parts), displays only the middle part.
+ * Otherwise returns the handle ID as-is.
+ */
+function prettyHandle(id) {
+    try {
+        const parts = String(id).split(":");
+        // If there are exactly 3 colons (4 parts), display only the second part
+        if (parts.length === 4)
+            return parts[1] || id;
+        return id;
+    }
+    catch {
+        return id;
+    }
+}
 // Pre-format common structures for display; return undefined to defer to caller
 function preformatValueForDisplay(typeId, value, registry) {
     if (value === undefined || value === null)
@@ -1647,6 +1682,16 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, child
     const [edgeStatus, setEdgeStatus] = React.useState({});
     const [events, setEvents] = React.useState([]);
     const clearEvents = React.useCallback(() => setEvents([]), []);
+    const [systemErrors, setSystemErrors] = React.useState([]);
+    const [registryErrors, setRegistryErrors] = React.useState([]);
+    const clearSystemErrors = React.useCallback(() => setSystemErrors([]), []);
+    const clearRegistryErrors = React.useCallback(() => setRegistryErrors([]), []);
+    const removeSystemError = React.useCallback((index) => {
+        setSystemErrors((prev) => prev.filter((_, idx) => idx !== index));
+    }, []);
+    const removeRegistryError = React.useCallback((index) => {
+        setRegistryErrors((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] = React.useState({});
@@ -1829,7 +1874,10 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, child
                 if (remoteDef && Array.isArray(remoteDef.nodes)) {
                     // Mutate current def in-place to avoid emitting graphChanged and causing update loop
                     const cur = wb.export();
-                    const byId = new Map((remoteDef.nodes || []).map((n) => [n.nodeId, n]));
+                    const byId = new Map((remoteDef.nodes || []).map((n) => [
+                        n.nodeId,
+                        n,
+                    ]));
                     let changed = false;
                     for (const n of cur.nodes) {
                         const rn = byId.get(n.nodeId);
@@ -1861,6 +1909,8 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, child
         const off2 = runner.on("error", (e) => {
             const edgeError = e;
             const nodeError = e;
+            const registryError = e;
+            const systemError = e;
             if (edgeError.kind === "edge-convert") {
                 const edgeId = edgeError.edgeId;
                 setEdgeStatus((s) => ({
@@ -1868,7 +1918,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, child
                     [edgeId]: { ...s[edgeId], lastError: edgeError.err },
                 }));
             }
-            else if (nodeError.nodeId) {
+            else if (nodeError.kind === "node-run" && nodeError.nodeId) {
                 const nodeId = nodeError.nodeId;
                 const runId = nodeError.runId;
                 setNodeStatus((s) => ({
@@ -1886,6 +1936,27 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, child
                     };
                 }
             }
+            else if (registryError.kind === "registry") {
+                // Track registry errors for UI display
+                setRegistryErrors((prev) => {
+                    // Avoid duplicates by checking message
+                    if (prev.some((err) => err.message === registryError.message)) {
+                        return prev;
+                    }
+                    return [...prev, registryError];
+                });
+            }
+            else if (systemError.kind === "system") {
+                // Track custom errors for UI display
+                setSystemErrors((prev) => {
+                    // Avoid duplicates by checking message and code
+                    if (prev.some((err) => err.message === systemError.message &&
+                        err.code === systemError.code)) {
+                        return prev;
+                    }
+                    return [...prev, systemError];
+                });
+            }
             return add("runner", "error")(e);
         });
         const off3 = runner.on("invalidate", (e) => {
@@ -2133,6 +2204,12 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, child
         validationGlobal,
         events,
         clearEvents,
+        systemErrors,
+        registryErrors,
+        clearSystemErrors,
+        clearRegistryErrors,
+        removeSystemError,
+        removeRegistryError,
         isRunning,
         engineKind,
         start,
@@ -2154,6 +2231,12 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, child
         nodeStatus,
         edgeStatus,
         valuesTick,
+        systemErrors,
+        registryErrors,
+        clearSystemErrors,
+        clearRegistryErrors,
+        removeSystemError,
+        removeRegistryError,
         inputsMap,
         outputsMap,
         validationByNode,
@@ -2182,6 +2265,7 @@ function IssueBadge({ level, title, size = 12, className, }) {
 function DebugEvents({ autoScroll, onAutoScrollChange, hideWorkbench, onHideWorkbenchChange, }) {
     const { events, clearEvents } = useWorkbenchContext();
     const scrollRef = React.useRef(null);
+    const [copied, setCopied] = React.useState(false);
     const rows = React.useMemo(() => {
         const filtered = hideWorkbench
             ? events.filter((e) => e.source !== "workbench")
@@ -2205,7 +2289,25 @@ function DebugEvents({ autoScroll, onAutoScrollChange, hideWorkbench, onHideWork
             return String(v);
         }
     };
-    return (jsxRuntime.jsxs("div", { className: "flex flex-col h-full min-h-0", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1", children: [jsxRuntime.jsx("div", { className: "font-semibold", children: "Events" }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsxs("label", { className: "flex items-center gap-1 text-xs text-gray-700", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: hideWorkbench, onChange: (e) => onHideWorkbenchChange?.(e.target.checked) }), jsxRuntime.jsx("span", { children: "Hide workbench" })] }), jsxRuntime.jsxs("label", { className: "flex items-center gap-1 text-xs text-gray-700", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: autoScroll, onChange: (e) => onAutoScrollChange?.(e.target.checked) }), jsxRuntime.jsx("span", { children: "Auto scroll" })] }), jsxRuntime.jsx("button", { onClick: clearEvents, className: "text-xs px-2 py-0.5 border border-gray-300 rounded", children: "Clear" })] })] }), jsxRuntime.jsx("div", { ref: scrollRef, className: "flex-1 overflow-auto text-[11px] leading-4 divide-y divide-gray-200", children: rows.map((ev) => (jsxRuntime.jsxs("div", { className: "opacity-85 odd:bg-gray-50 px-2 py-1", children: [jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [jsxRuntime.jsx("span", { className: "w-12 shrink-0 text-right text-gray-500 select-none", children: ev.no }), jsxRuntime.jsxs("span", { className: "text-gray-500", children: [new Date(ev.at).toLocaleTimeString(), " \u00B7 ", ev.source, ":", ev.type] })] }), jsxRuntime.jsx("pre", { className: "m-0 whitespace-pre-wrap ml-12", children: renderPayload(ev.payload) })] }, `${ev.at}:${ev.no}`))) })] }));
+    const handleCopyLogs = async () => {
+        try {
+            const formattedEvents = rows.map((ev) => ({
+                no: ev.no,
+                at: ev.at,
+                source: ev.source,
+                type: ev.type,
+                payload: summarizeDeep(ev.payload),
+            }));
+            const jsonString = JSON.stringify(formattedEvents, null, 2);
+            await navigator.clipboard.writeText(jsonString);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch (err) {
+            console.error("Failed to copy logs:", err);
+        }
+    };
+    return (jsxRuntime.jsxs("div", { className: "flex flex-col h-full min-h-0", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1", children: [jsxRuntime.jsx("div", { className: "font-semibold", children: "Events" }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsxs("label", { className: "flex items-center gap-1 text-xs text-gray-700", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: hideWorkbench, onChange: (e) => onHideWorkbenchChange?.(e.target.checked) }), jsxRuntime.jsx("span", { children: "Hide workbench" })] }), jsxRuntime.jsxs("label", { className: "flex items-center gap-1 text-xs text-gray-700", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: autoScroll, onChange: (e) => onAutoScrollChange?.(e.target.checked) }), jsxRuntime.jsx("span", { children: "Auto scroll" })] }), jsxRuntime.jsx("button", { onClick: handleCopyLogs, className: "p-2 border border-gray-300 rounded flex items-center justify-center", title: copied ? "Copied!" : "Copy logs as formatted JSON", children: jsxRuntime.jsx(react$1.CopyIcon, { size: 14 }) }), jsxRuntime.jsx("button", { onClick: clearEvents, className: "p-2 border border-gray-300 rounded flex items-center justify-center", title: "Clear all events", children: jsxRuntime.jsx(react$1.TrashIcon, { size: 14 }) })] })] }), jsxRuntime.jsx("div", { ref: scrollRef, className: "flex-1 overflow-auto text-[11px] leading-4 divide-y divide-gray-200", children: rows.map((ev) => (jsxRuntime.jsxs("div", { className: "opacity-85 odd:bg-gray-50 px-2 py-1", children: [jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [jsxRuntime.jsx("span", { className: "w-12 shrink-0 text-right text-gray-500 select-none", children: ev.no }), jsxRuntime.jsxs("span", { className: "text-gray-500", children: [new Date(ev.at).toLocaleTimeString(), " \u00B7 ", ev.source, ":", ev.type] })] }), jsxRuntime.jsx("pre", { className: "m-0 whitespace-pre-wrap ml-12", children: renderPayload(ev.payload) })] }, `${ev.at}:${ev.no}`))) })] }));
 }
 
 function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHideWorkbenchChange, toString, toElement, contextPanel, setInput, }) {
@@ -2220,20 +2322,24 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
             return String(value ?? "");
         }
     };
-    const { registry, def, selectedNodeId, selectedEdgeId, inputsMap, outputsMap, outputTypesMap, nodeStatus, validationByNode, validationByEdge, validationGlobal, valuesTick, updateEdgeType, } = useWorkbenchContext();
+    const { registry, def, selectedNodeId, selectedEdgeId, inputsMap, outputsMap, outputTypesMap, nodeStatus, validationByNode, validationByEdge, validationGlobal, valuesTick, updateEdgeType, systemErrors, registryErrors, clearSystemErrors, clearRegistryErrors, removeSystemError, removeRegistryError, } = useWorkbenchContext();
     const nodeValidationIssues = validationByNode.issues;
     const edgeValidationIssues = validationByEdge.issues;
     const nodeValidationHandles = validationByNode;
     const globalValidationIssues = validationGlobal;
     const selectedNode = def.nodes.find((n) => n.nodeId === selectedNodeId);
     const selectedEdge = def.edges.find((e) => e.id === selectedEdgeId);
-    const selectedDesc = selectedNode
+    selectedNode
         ? registry.nodes.get(selectedNode.typeId)
         : undefined;
-    const inputHandles = Object.entries(selectedDesc?.inputs ?? {})
-        .filter(([k]) => !sparkGraph.isInputPrivate(selectedDesc?.inputs, k))
+    // Use computeEffectiveHandles to merge registry defaults with dynamically resolved handles
+    const effectiveHandles = selectedNode
+        ? computeEffectiveHandles(selectedNode, registry)
+        : { inputs: {}, outputs: {}};
+    const inputHandles = Object.entries(effectiveHandles.inputs)
+        .filter(([k]) => !sparkGraph.isInputPrivate(effectiveHandles.inputs, k))
         .map(([k]) => k);
-    const outputHandles = Object.keys(selectedDesc?.outputs ?? {});
+    const outputHandles = Object.keys(effectiveHandles.outputs);
     const nodeInputs = selectedNodeId ? inputsMap[selectedNodeId] ?? {} : {};
     const nodeOutputs = selectedNodeId ? outputsMap[selectedNodeId] ?? {} : {};
     const selectedNodeStatus = selectedNodeId
@@ -2274,12 +2380,11 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
             }
             return;
         }
-        const desc = selectedDesc;
-        const handles = Object.keys(desc?.inputs ?? {});
+        const handles = Object.keys(effectiveHandles.inputs);
         const nextDrafts = { ...drafts };
         const nextOriginals = { ...originals };
         for (const h of handles) {
-            const typeId = sparkGraph.getInputTypeId(desc?.inputs, h);
+            const typeId = sparkGraph.getInputTypeId(effectiveHandles.inputs, h);
             const current = nodeInputs[h];
             const display = safeToString(typeId, current);
             const wasOriginal = originals[h];
@@ -2295,7 +2400,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
             setDrafts(nextDrafts);
         if (!shallowEqual(originals, nextOriginals))
             setOriginals(nextOriginals);
-    }, [selectedNodeId, selectedDesc, valuesTick]);
+    }, [selectedNodeId, selectedNode, registry, valuesTick]);
     const widthClass = debug ? "w-[480px]" : "w-[320px]";
     const { wb } = useWorkbenchContext();
     const deleteEdgeById = (edgeId) => {
@@ -2306,7 +2411,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
         }
         catch { }
     };
-    return (jsxRuntime.jsxs("div", { className: `${widthClass} border-l border-gray-300 p-3 flex flex-col h-full min-h-0 overflow-hidden`, children: [contextPanel && jsxRuntime.jsx("div", { className: "mb-2", children: contextPanel }), jsxRuntime.jsx("div", { className: "font-semibold mb-2", children: "Inspector" }), jsxRuntime.jsxs("div", { className: "text-xs text-gray-500 mb-2", children: ["valuesTick: ", valuesTick] }), jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: !selectedNode && !selectedEdge ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "text-gray-500", children: "Select a node or edge." }), globalValidationIssues && globalValidationIssues.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: globalValidationIssues.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` }), !!m.data?.edgeId && (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) => {
+    return (jsxRuntime.jsxs("div", { className: `${widthClass} border-l border-gray-300 p-3 flex flex-col h-full min-h-0 overflow-hidden`, children: [contextPanel && jsxRuntime.jsx("div", { className: "mb-2", children: contextPanel }), systemErrors.length > 0 && (jsxRuntime.jsxs("div", { className: "mb-2 space-y-1", children: [systemErrors.map((err, i) => (jsxRuntime.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: [jsxRuntime.jsxs("div", { className: "flex-1", children: [jsxRuntime.jsx("div", { className: "font-semibold", children: err.code ? `Error ${err.code}` : "Error" }), jsxRuntime.jsx("div", { className: "break-words", children: err.message })] }), jsxRuntime.jsx("button", { className: "text-red-500 hover:text-red-700 text-[10px] px-1", onClick: () => removeSystemError(i), title: "Dismiss", children: "\u00D7" })] }, i))), systemErrors.length > 1 && (jsxRuntime.jsx("button", { className: "text-xs text-red-600 hover:text-red-800 underline", onClick: clearSystemErrors, children: "Clear all" }))] })), registryErrors.length > 0 && (jsxRuntime.jsxs("div", { className: "mb-2 space-y-1", children: [registryErrors.map((err, i) => (jsxRuntime.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: [jsxRuntime.jsxs("div", { className: "flex-1", children: [jsxRuntime.jsx("div", { className: "font-semibold", children: "Registry Error" }), jsxRuntime.jsx("div", { className: "break-words", children: err.message }), err.attempt && err.maxAttempts && (jsxRuntime.jsxs("div", { className: "text-[10px] text-amber-600 mt-1", children: ["Attempt ", err.attempt, " of ", err.maxAttempts] }))] }), jsxRuntime.jsx("button", { className: "text-amber-500 hover:text-amber-700 text-[10px] px-1", onClick: () => removeRegistryError(i), title: "Dismiss", children: "\u00D7" })] }, i))), registryErrors.length > 1 && (jsxRuntime.jsx("button", { className: "text-xs text-amber-600 hover:text-amber-800 underline", onClick: clearRegistryErrors, children: "Clear all" }))] })), jsxRuntime.jsx("div", { className: "font-semibold mb-2", children: "Inspector" }), jsxRuntime.jsxs("div", { className: "text-xs text-gray-500 mb-2", children: ["valuesTick: ", valuesTick] }), jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: !selectedNode && !selectedEdge ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "text-gray-500", children: "Select a node or edge." }), globalValidationIssues && globalValidationIssues.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: globalValidationIssues.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` }), !!m.data?.edgeId && (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(m.data?.edgeId);
                                                 }, title: "Delete referenced edge", children: "Delete edge" }))] }, i))) })] }))] })) : selectedEdge ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsxs("div", { children: ["Edge: ", selectedEdge.id] }), jsxRuntime.jsxs("div", { children: [selectedEdge.source.nodeId, ".", selectedEdge.source.handle, " \u2192", " ", selectedEdge.target.nodeId, ".", selectedEdge.target.handle] }), jsxRuntime.jsx("div", { className: "mt-1", children: jsxRuntime.jsx("button", { className: "text-xs px-2 py-1 border border-red-300 rounded text-red-700 hover:bg-red-50", onClick: (e) => {
@@ -2321,7 +2426,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                                     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?.lastError && (jsxRuntime.jsx("div", { className: "mt-2 text-sm text-red-700 bg-red-50 border border-red-200 rounded px-2 py-1 break-words", children: String(selectedNodeStatus.lastError?.message ??
                                         selectedNodeStatus.lastError) }))] })), jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Inputs" }), inputHandles.length === 0 ? (jsxRuntime.jsx("div", { className: "text-gray-500", children: "No inputs" })) : (inputHandles.map((h) => {
-                                    const typeId = sparkGraph.getInputTypeId(selectedDesc?.inputs, h);
+                                    const typeId = sparkGraph.getInputTypeId(effectiveHandles.inputs, h);
                                     const isLinked = def.edges.some((e) => e.target.nodeId === selectedNodeId &&
                                         e.target.handle === h);
                                     const commonProps = {
@@ -2349,7 +2454,7 @@ 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: 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
+                                    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;
@@ -2365,8 +2470,8 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                                     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: h }), jsxRuntime.jsx("span", { className: "text-gray-500 text-[11px]", children: outputTypesMap[selectedNodeId]?.[h] ?? "" })] }), jsxRuntime.jsx("div", { className: "flex-1", children: (() => {
-                                                const { typeId, value } = resolveOutputDisplay(nodeOutputs[h], selectedDesc?.outputs?.[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: (() => {
+                                                const { typeId, value } = resolveOutputDisplay(nodeOutputs[h], effectiveHandles.outputs[h]);
                                                 return toElement(typeId, value);
                                             })() }), (() => {
                                             const outIssues = selectedNodeHandleValidation.outputs.filter((m) => m.handle === h);
@@ -2510,18 +2615,6 @@ function DefaultNodeHeader({ id, title, validation, right, showId, onInvalidate,
 }
 function DefaultNodeContent({ data, isConnectable, }) {
     const { showValues, inputValues, outputValues, toString } = data;
-    const prettyHandle = React.useCallback((id) => {
-        try {
-            const parts = String(id).split(":");
-            // If there are exactly 3 colons (4 parts), display only the second part
-            if (parts.length === 4)
-                return parts[1] || id;
-            return id;
-        }
-        catch {
-            return id;
-        }
-    }, []);
     const inputEntries = data.inputHandles ?? [];
     const outputEntries = data.outputHandles ?? [];
     const status = data.status ?? { activeRuns: 0 };
@@ -3156,11 +3249,8 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         return backendKind === "local";
     });
     // Expose init callback with setInitialGraph helper
-    const initCalled = React.useRef(false);
+    // Note: This runs whenever runner changes (e.g., when Flow is enabled and backendOptions changes)
     React.useEffect(() => {
-        if (initCalled.current)
-            return;
-        initCalled.current = true;
         if (!onInit)
             return;
         const setInitialGraph = async (d, inputs) => {
@@ -3606,7 +3696,19 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
 function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, autoScroll, onAutoScrollChange, backendOptions, overrides, onInit, onChange, }) {
     const [registry, setRegistry] = React.useState(sparkGraph.createSimpleGraphRegistry());
     const [wb] = React.useState(() => new InMemoryWorkbench({ ui: new DefaultUIExtensionRegistry() }));
+    // Store previous runner for cleanup
+    const prevRunnerRef = React.useRef(null);
     const runner = React.useMemo(() => {
+        // Dispose previous runner if it exists
+        if (prevRunnerRef.current) {
+            try {
+                prevRunnerRef.current.dispose();
+            }
+            catch (err) {
+                console.warn("Error disposing previous runner:", err);
+            }
+        }
+        let newRunner;
         if (backendKind === "remote-http") {
             const backend = {
                 kind: "remote-http",
@@ -3618,9 +3720,9 @@ function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, bac
                     onCustomEvent: backendOptions.onCustomEvent,
                 }),
             };
-            return new RemoteGraphRunner(registry, backend);
+            newRunner = new RemoteGraphRunner(registry, backend);
         }
-        if (backendKind === "remote-ws") {
+        else if (backendKind === "remote-ws") {
             const backend = {
                 kind: "remote-ws",
                 url: wsUrl,
@@ -3631,10 +3733,27 @@ function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, bac
                     onCustomEvent: backendOptions.onCustomEvent,
                 }),
             };
-            return new RemoteGraphRunner(registry, backend);
+            newRunner = new RemoteGraphRunner(registry, backend);
         }
-        return new LocalGraphRunner(registry);
+        else {
+            newRunner = new LocalGraphRunner(registry);
+        }
+        prevRunnerRef.current = newRunner;
+        return newRunner;
     }, [registry, backendKind, httpBaseUrl, wsUrl, backendOptions]);
+    // Cleanup runner on unmount
+    React.useEffect(() => {
+        return () => {
+            if (prevRunnerRef.current) {
+                try {
+                    prevRunnerRef.current.dispose();
+                }
+                catch (err) {
+                    console.warn("Error disposing runner on unmount:", err);
+                }
+            }
+        };
+    }, []);
     // Allow external UI registration (e.g., node renderers) with access to wb
     React.useEffect(() => {
         const baseRegisterUI = (_wb) => { };
@@ -3667,6 +3786,7 @@ exports.formatDataUrlAsLabel = formatDataUrlAsLabel;
 exports.formatDeclaredTypeSignature = formatDeclaredTypeSignature;
 exports.getNodeBorderClassNames = getNodeBorderClassNames;
 exports.preformatValueForDisplay = preformatValueForDisplay;
+exports.prettyHandle = prettyHandle;
 exports.resolveOutputDisplay = resolveOutputDisplay;
 exports.summarizeDeep = summarizeDeep;
 exports.toReactFlow = toReactFlow;