@bian-womp/spark-workbench 0.2.25 → 0.2.27

package/lib/cjs/index.cjs

@@ -572,6 +572,10 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         super(registry, backend);
         this.valueCache = new Map();
         this.listenersBound = false;
+        this.registryFetched = false;
+        this.registryFetching = false;
+        this.MAX_REGISTRY_FETCH_ATTEMPTS = 3;
+        this.INITIAL_RETRY_DELAY_MS = 1000; // 1 second
         // Auto-handle registry-changed invalidations from remote
         // We listen on invalidate and if reason matches, we rehydrate registry and emit a registry event
         this.ensureRemoteRunner().then(async (runner) => {
@@ -806,11 +810,125 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         super.dispose();
         this.runner = undefined;
         this.transport = undefined;
+        this.registryFetched = false; // Reset so registry is fetched again on reconnect
+        this.registryFetching = false; // Reset fetching state
         this.emit("transport", {
             state: "disconnected",
             kind: this.backend.kind,
         });
     }
+    /**
+     * Fetch full registry description from remote and register it locally.
+     * Called automatically on first connection with retry mechanism.
+     */
+    async fetchRegistry(runner, attempt = 1) {
+        if (this.registryFetching) {
+            // Already fetching, don't start another fetch
+            return;
+        }
+        this.registryFetching = true;
+        try {
+            const desc = await runner.describeRegistry();
+            // Register types
+            for (const t of desc.types) {
+                if (t.options) {
+                    this.registry.registerEnum({
+                        id: t.id,
+                        options: t.options,
+                        bakeTarget: t.bakeTarget,
+                    });
+                }
+                else {
+                    if (!this.registry.types.has(t.id)) {
+                        this.registry.registerType({
+                            id: t.id,
+                            displayName: t.displayName,
+                            validate: (_v) => true,
+                            bakeTarget: t.bakeTarget,
+                        });
+                    }
+                }
+            }
+            // Register categories
+            for (const c of desc.categories || []) {
+                if (!this.registry.categories.has(c.id)) {
+                    // Create placeholder category descriptor
+                    const category = {
+                        id: c.id,
+                        displayName: c.displayName,
+                        createRuntime: () => ({
+                            async onInputsChanged() { },
+                        }),
+                        policy: { asyncConcurrency: "switch" },
+                    };
+                    this.registry.categories.register(category);
+                }
+            }
+            // Register coercions
+            for (const c of desc.coercions) {
+                if (c.async) {
+                    this.registry.registerAsyncCoercion(c.from, c.to, async (v) => v, {
+                        nonTransitive: c.nonTransitive,
+                    });
+                }
+                else {
+                    this.registry.registerCoercion(c.from, c.to, (v) => v, {
+                        nonTransitive: c.nonTransitive,
+                    });
+                }
+            }
+            // Register nodes
+            for (const n of desc.nodes) {
+                if (!this.registry.nodes.has(n.id)) {
+                    this.registry.registerNode({
+                        id: n.id,
+                        categoryId: n.categoryId,
+                        displayName: n.displayName,
+                        inputs: n.inputs || {},
+                        outputs: n.outputs || {},
+                        impl: () => { },
+                    });
+                }
+            }
+            this.registryFetched = true;
+            this.registryFetching = false;
+            this.emit("registry", this.registry);
+        }
+        catch (err) {
+            this.registryFetching = false;
+            const error = err instanceof Error ? err : new Error(String(err));
+            // Retry with exponential backoff if attempts remaining
+            if (attempt < this.MAX_REGISTRY_FETCH_ATTEMPTS) {
+                const delayMs = this.INITIAL_RETRY_DELAY_MS * Math.pow(2, attempt - 1);
+                console.warn(`Failed to fetch registry (attempt ${attempt}/${this.MAX_REGISTRY_FETCH_ATTEMPTS}), retrying in ${delayMs}ms...`, error);
+                // Emit error event for UI feedback
+                this.emit("error", {
+                    kind: "registry",
+                    message: `Registry fetch failed (attempt ${attempt}/${this.MAX_REGISTRY_FETCH_ATTEMPTS}), retrying...`,
+                    err: error,
+                    attempt,
+                    maxAttempts: this.MAX_REGISTRY_FETCH_ATTEMPTS,
+                });
+                // Retry after delay
+                setTimeout(() => {
+                    this.fetchRegistry(runner, attempt + 1).catch(() => {
+                        // Final failure handled below
+                    });
+                }, delayMs);
+            }
+            else {
+                // Max attempts reached, emit final error
+                console.error(`Failed to fetch registry after ${this.MAX_REGISTRY_FETCH_ATTEMPTS} attempts:`, error);
+                this.emit("error", {
+                    kind: "registry",
+                    message: `Failed to fetch registry after ${this.MAX_REGISTRY_FETCH_ATTEMPTS} attempts. Please check your connection and try refreshing.`,
+                    err: error,
+                    attempt: this.MAX_REGISTRY_FETCH_ATTEMPTS,
+                    maxAttempts: this.MAX_REGISTRY_FETCH_ATTEMPTS,
+                });
+            }
+        }
+    }
     // Ensure remote transport/runner
     async ensureRemoteRunner() {
         if (this.runner)
@@ -856,6 +974,14 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         this.valueCache.clear();
         this.listenersBound = false;
         this.emit("transport", { state: "connected", kind });
+        // Auto-fetch registry on first connection (only once)
+        if (!this.registryFetched && !this.registryFetching) {
+            // Log loading state (UI can listen to transport status for loading indication)
+            console.info("Loading registry from remote...");
+            this.fetchRegistry(runner).catch(() => {
+                // Error handling is done inside fetchRegistry
+            });
+        }
         return runner;
     }
 }
@@ -1521,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({});
@@ -1703,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);
@@ -1735,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) => ({
@@ -1742,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) => ({
@@ -1760,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) => {
@@ -2007,6 +2169,12 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, child
         validationGlobal,
         events,
         clearEvents,
+        systemErrors,
+        registryErrors,
+        clearSystemErrors,
+        clearRegistryErrors,
+        removeSystemError,
+        removeRegistryError,
         isRunning,
         engineKind,
         start,
@@ -2028,6 +2196,12 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, child
         nodeStatus,
         edgeStatus,
         valuesTick,
+        systemErrors,
+        registryErrors,
+        clearSystemErrors,
+        clearRegistryErrors,
+        removeSystemError,
+        removeRegistryError,
         inputsMap,
         outputsMap,
         validationByNode,
@@ -2094,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;
@@ -2180,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) => {
@@ -2972,7 +3146,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                 }, onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, deleteKeyCode: ["Backspace", "Delete"], proOptions: { hideAttribution: true }, noDragClassName: "wb-nodrag", noWheelClassName: "wb-nowheel", noPanClassName: "wb-nopan", fitView: true, children: [jsxRuntime.jsx(react.Background, { id: "workbench-canvas-background", variant: react.BackgroundVariant.Dots, gap: 12, size: 1 }), jsxRuntime.jsx(react.MiniMap, {}), jsxRuntime.jsx(react.Controls, {}), jsxRuntime.jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, onAdd: addNodeAt, onClose: onCloseMenu }), !!nodeAtMenu && (jsxRuntime.jsx(NodeContextMenu, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, onClose: onCloseNodeMenu }))] }) }) }));
 });
 
-function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, example, onExampleChange, engine, onEngineChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, overrides, onInit, onChange, }) {
+function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, example, onExampleChange, engine, onEngineChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, backendOptions, overrides, onInit, onChange, }) {
     const { wb, runner, registry, def, selectedNodeId, runAutoLayout } = useWorkbenchContext();
     const [transportStatus, setTransportStatus] = React.useState({
         state: "local",
@@ -3021,17 +3195,17 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             return overrides.getExamples(defaultExamples);
         return defaultExamples;
     }, [overrides, defaultExamples]);
-    const [hydrated, setHydrated] = React.useState(false);
     const lastAutoLaunched = React.useRef(undefined);
     const autoLayoutRan = React.useRef(false);
     const canvasRef = React.useRef(null);
     const uploadInputRef = React.useRef(null);
+    const [registryReady, setRegistryReady] = React.useState(() => {
+        // For local backends, registry is always ready
+        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) => {
@@ -3084,7 +3258,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         const { registry: r, def } = await ex.load();
         // Keep registry consistent with backend:
         // - For local backend, allow example to provide its own registry
-        // - For remote backend, NEVER overwrite the hydrated remote registry
+        // - For remote backend, registry is automatically managed by RemoteGraphRunner
         if (backendKind === "local") {
             if (r) {
                 setRegistry(r);
@@ -3197,79 +3371,8 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
     const triggerUpload = React.useCallback(() => {
         uploadInputRef.current?.click();
     }, []);
-    const hydrateFromBackend = React.useCallback(async (kind, base) => {
-        try {
-            const transport = kind === "remote-http"
-                ? new sparkRemote.HttpPollingTransport(base)
-                : new sparkRemote.WebSocketTransport(base);
-            await transport.connect();
-            const rr = new sparkRemote.RemoteRunner(transport);
-            const desc = await rr.describeRegistry();
-            const r = new sparkGraph.Registry();
-            // Types
-            for (const t of desc.types) {
-                if (t.options) {
-                    r.registerEnum({
-                        id: t.id,
-                        options: t.options,
-                        bakeTarget: t.bakeTarget,
-                    });
-                }
-                else {
-                    r.registerType({
-                        id: t.id,
-                        displayName: t.displayName,
-                        validate: (_v) => true,
-                        bakeTarget: t.bakeTarget,
-                    });
-                }
-            }
-            // Categories: create placeholders for display name
-            for (const c of desc.categories || []) {
-                // If you later expose real category descriptors, register them here
-                // For now, rely on ComputeCategory for behavior
-                const category = {
-                    id: c.id,
-                    displayName: c.displayName,
-                    createRuntime: () => ({
-                        async onInputsChanged() { },
-                    }),
-                    policy: { asyncConcurrency: "switch" },
-                };
-                r.categories.register(category);
-            }
-            // Coercions (client-side no-op to satisfy validation) if provided
-            for (const c of desc.coercions) {
-                if (c.async) {
-                    r.registerAsyncCoercion(c.from, c.to, async (v) => v, {
-                        nonTransitive: c.nonTransitive,
-                    });
-                }
-                else {
-                    r.registerCoercion(c.from, c.to, (v) => v, {
-                        nonTransitive: c.nonTransitive,
-                    });
-                }
-            }
-            // Nodes (use no-op impl for compute)
-            for (const n of desc.nodes) {
-                r.registerNode({
-                    id: n.id,
-                    categoryId: n.categoryId,
-                    displayName: n.displayName,
-                    inputs: n.inputs || {},
-                    outputs: n.outputs || {},
-                    impl: () => { },
-                });
-            }
-            setRegistry(r);
-            wb.setRegistry(r);
-            await transport.close();
-        }
-        catch (err) {
-            console.error("Failed to hydrate registry from backend:", err);
-        }
-    }, [setRegistry, wb]);
+    // Registry is now automatically fetched by RemoteGraphRunner on first connection
+    // No need for manual hydration
     // Ensure initial example is loaded (and sync when example prop changes)
     React.useEffect(() => {
         if (!example)
@@ -3280,6 +3383,21 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         const off = runner.on("transport", (s) => setTransportStatus(s));
         return () => off();
     }, [runner]);
+    // Track registry readiness for remote backends
+    React.useEffect(() => {
+        // For local backends, registry is always ready
+        if (backendKind === "local") {
+            setRegistryReady(true);
+            return;
+        }
+        // Reset readiness when switching to remote backend
+        setRegistryReady(false);
+        // For remote backends, wait for registry event
+        const off = runner.on("registry", () => {
+            setRegistryReady(true);
+        });
+        return () => off();
+    }, [runner, backendKind]);
     React.useEffect(() => {
         if (!engine)
             return;
@@ -3301,25 +3419,13 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             // ignore
         }
     }, [engine, runner, wb, backendKind]);
-    // When switching to remote backend, auto-hydrate registry from backend
-    React.useEffect(() => {
-        let hydrate;
-        if (backendKind === "remote-http" && httpBaseUrl) {
-            hydrate = hydrateFromBackend("remote-http", httpBaseUrl);
-        }
-        else if (backendKind === "remote-ws" && wsUrl) {
-            hydrate = hydrateFromBackend("remote-ws", wsUrl);
-        }
-        if (hydrate) {
-            hydrate.then(() => {
-                setHydrated(true);
-            });
-        }
-    }, [backendKind, httpBaseUrl, wsUrl, hydrateFromBackend, setHydrated]);
+    // Registry is automatically fetched by RemoteGraphRunner when it connects
+    // Run auto layout after registry is hydrated (for remote backends)
     React.useEffect(() => {
         if (autoLayoutRan.current)
             return;
-        if (backendKind !== "local" && !hydrated)
+        // Wait for registry to be ready for remote backends
+        if (backendKind !== "local" && !registryReady)
             return;
         const cur = wb.export();
         const positions = wb.getPositions();
@@ -3328,7 +3434,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             autoLayoutRan.current = true;
             runAutoLayout();
         }
-    }, [wb, runAutoLayout, backendKind, hydrated]);
+    }, [wb, runAutoLayout, backendKind, registryReady, registry]);
     const baseSetInput = React.useCallback((handle, raw) => {
         if (!selectedNodeId)
             return;
@@ -3545,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",
@@ -3557,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,
@@ -3570,10 +3688,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) => { };
@@ -3584,7 +3719,7 @@ function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, bac
                 if (runner.isRunning())
                     runner.dispose();
                 onBackendKindChange(v);
-            }, httpBaseUrl: httpBaseUrl, onHttpBaseUrlChange: onHttpBaseUrlChange, wsUrl: wsUrl, onWsUrlChange: onWsUrlChange, debug: debug, onDebugChange: onDebugChange, showValues: showValues, onShowValuesChange: onShowValuesChange, hideWorkbench: hideWorkbench, onHideWorkbenchChange: onHideWorkbenchChange, overrides: overrides, onInit: onInit, onChange: onChange }) }));
+            }, httpBaseUrl: httpBaseUrl, onHttpBaseUrlChange: onHttpBaseUrlChange, wsUrl: wsUrl, onWsUrlChange: onWsUrlChange, debug: debug, onDebugChange: onDebugChange, showValues: showValues, onShowValuesChange: onShowValuesChange, hideWorkbench: hideWorkbench, onHideWorkbenchChange: onHideWorkbenchChange, backendOptions: backendOptions, overrides: overrides, onInit: onInit, onChange: onChange }) }));
 }
 
 exports.AbstractWorkbench = AbstractWorkbench;