@bian-womp/spark-workbench 0.2.26 → 0.2.27

package/lib/cjs/index.cjs

@@ -1647,6 +1647,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 +1839,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 +1874,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 +1883,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 +1901,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 +2169,12 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, child
         validationGlobal,
         events,
         clearEvents,
+        systemErrors,
+        registryErrors,
+        clearSystemErrors,
+        clearRegistryErrors,
+        removeSystemError,
+        removeRegistryError,
         isRunning,
         engineKind,
         start,
@@ -2154,6 +2196,12 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, child
         nodeStatus,
         edgeStatus,
         valuesTick,
+        systemErrors,
+        registryErrors,
+        clearSystemErrors,
+        clearRegistryErrors,
+        removeSystemError,
+        removeRegistryError,
         inputsMap,
         outputsMap,
         validationByNode,
@@ -2220,7 +2268,7 @@ 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;
@@ -2306,7 +2354,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) => {
@@ -3156,11 +3204,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 +3651,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 +3675,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 +3688,27 @@ function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, bac
                     onCustomEvent: backendOptions.onCustomEvent,
                 }),
             };
-            return new RemoteGraphRunner(registry, backend);
+            newRunner = new RemoteGraphRunner(registry, backend);
+        }
+        else {
+            newRunner = new LocalGraphRunner(registry);
         }
-        return 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) => { };