@bian-womp/spark-workbench 0.2.47 → 0.2.49

package/lib/esm/index.js

@@ -1,10 +1,10 @@
-import { GraphBuilder, StepEngine, HybridEngine, PullEngine, BatchedEngine, PushEngine, isTypedOutput, getTypedOutputValue, getTypedOutputTypeId, isInputPrivate, getInputTypeId, createSimpleGraphRegistry, createSimpleGraphDef, createAsyncGraphDef, createAsyncGraphRegistry, createProgressGraphDef, createProgressGraphRegistry, createValidationGraphDef, createValidationGraphRegistry } from '@bian-womp/spark-graph';
+import { GraphBuilder, createEngine, StepEngine, PullEngine, BatchedEngine, isTypedOutput, getTypedOutputValue, getTypedOutputTypeId, isInputPrivate, getInputTypeId, createSimpleGraphRegistry, createSimpleGraphDef, createAsyncGraphDef, createAsyncGraphRegistry, createProgressGraphDef, createProgressGraphRegistry, createValidationGraphDef, createValidationGraphRegistry } from '@bian-womp/spark-graph';
 import { RuntimeApiClient } from '@bian-womp/spark-remote';
 import { Position, Handle, useUpdateNodeInternals, useReactFlow, ReactFlowProvider, ReactFlow, Background, BackgroundVariant, MiniMap, Controls } from '@xyflow/react';
 import React, { useCallback, useState, useRef, useEffect, useMemo, createContext, useContext, useImperativeHandle } from 'react';
 import cx from 'classnames';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { XCircleIcon, WarningCircleIcon, CopyIcon, TrashIcon, XIcon, ArrowClockwiseIcon, PlugsConnectedIcon, ClockClockwiseIcon, WifiHighIcon, WifiSlashIcon, PlayPauseIcon, LightningIcon, StopIcon, PlayIcon, TreeStructureIcon, CornersOutIcon, DownloadSimpleIcon, DownloadIcon, UploadIcon, BugBeetleIcon, ListBulletsIcon } from '@phosphor-icons/react';
+import { XCircleIcon, WarningCircleIcon, CopyIcon, TrashIcon, XIcon, ArrowClockwiseIcon, ClockClockwiseIcon, StopIcon, PlayIcon, PlugsConnectedIcon, WifiHighIcon, WifiSlashIcon, PlayPauseIcon, LightningIcon, TreeStructureIcon, CornersOutIcon, DownloadSimpleIcon, DownloadIcon, UploadIcon, BugBeetleIcon, ListBulletsIcon } from '@phosphor-icons/react';
 import isEqual from 'lodash/isEqual';
 
 class DefaultUIExtensionRegistry {
@@ -332,10 +332,12 @@ class AbstractGraphRunner {
         this.backend = backend;
         this.listeners = new Map();
         this.stagedInputs = {};
+        this.runnerId = "";
     }
     launch(def, opts) {
+        // Auto-stop if engine is already running
         if (this.engine) {
-            throw new Error("Engine already running. Stop the current engine first.");
+            this.stop();
         }
     }
     setInput(nodeId, handle, value) {
@@ -387,6 +389,39 @@ class AbstractGraphRunner {
     async whenIdle() {
         await this.engine?.whenIdle();
     }
+    stop() {
+        if (!this.engine)
+            return;
+        // Dispose engine (cleans up timers, listeners, etc.)
+        this.engine.dispose();
+        this.engine = undefined;
+        // Emit status but keep runtime alive
+        if (this.runningKind) {
+            this.runningKind = undefined;
+            this.emit("status", { running: false, engine: undefined });
+        }
+    }
+    async switchEngine(opts) {
+        if (!this.engine || !this.runtime) {
+            throw new Error("No engine running to switch from");
+        }
+        // Wait for current engine to be idle
+        await this.whenIdle();
+        // Capture current state
+        const currentInputs = { ...this.stagedInputs };
+        // Stop current engine
+        this.stop();
+        // Ensure runtime is in a clean state (resumed)
+        this.runtime.resume();
+        // Create and launch new engine (to be implemented by subclasses)
+        await this.createAndLaunchEngine(opts);
+        // Re-apply staged inputs to new engine
+        for (const [nodeId, map] of Object.entries(currentInputs)) {
+            if (this.engine) {
+                this.engine.setInputs(nodeId, map);
+            }
+        }
+    }
     on(event, handler) {
         if (!this.listeners.has(event))
             this.listeners.set(event, new Set());
@@ -418,6 +453,8 @@ class AbstractGraphRunner {
     }
 }
 
+// Counter for generating readable runner IDs
+let localRunnerCounter = 0;
 class LocalGraphRunner extends AbstractGraphRunner {
     constructor(registry) {
         super(registry, { kind: "local" });
@@ -436,7 +473,11 @@ class LocalGraphRunner extends AbstractGraphRunner {
         this.getEnvironment = () => {
             return this.runtime?.getEnvironment?.();
         };
-        this.emit("transport", { state: "local" });
+        // Generate readable ID for this runner instance (e.g., local-001, local-002)
+        localRunnerCounter++;
+        this.runnerId = `local-${String(localRunnerCounter).padStart(3, "0")}`;
+        console.info(`[LocalGraphRunner] Created runner with ID: ${this.runnerId}`);
+        this.emit("transport", { runnerId: this.runnerId, state: "local" });
     }
     build(def) {
         const builder = new GraphBuilder(this.registry);
@@ -458,37 +499,30 @@ class LocalGraphRunner extends AbstractGraphRunner {
         this.build(def);
         if (!this.runtime)
             throw new Error("Runtime not built");
-        const rt = this.runtime;
-        switch (opts.engine) {
-            case "push":
-                this.engine = new PushEngine(rt);
-                break;
-            case "batched":
-                this.engine = new BatchedEngine(rt, {
-                    flushIntervalMs: opts.batched?.flushIntervalMs ?? 0,
-                });
-                break;
-            case "pull":
-                this.engine = new PullEngine(rt);
-                break;
-            case "hybrid":
-                this.engine = new HybridEngine(rt, {
-                    windowMs: opts.hybrid?.windowMs ?? 250,
-                    batchThreshold: opts.hybrid?.batchThreshold ?? 3,
-                });
-                break;
-            case "step":
-                this.engine = new StepEngine(rt);
-                break;
-            default:
-                throw new Error("Unknown engine kind");
-        }
+        // Use the async method to create engine
+        this.createAndLaunchEngine(opts).catch((err) => {
+            console.error("Failed to launch engine:", err);
+            const errorMessage = err instanceof Error ? err.message : String(err);
+            this.emit("error", {
+                kind: "system",
+                message: errorMessage,
+                err: err instanceof Error ? err : new Error(errorMessage),
+            });
+        });
+    }
+    async createAndLaunchEngine(opts) {
+        if (!this.runtime)
+            throw new Error("Runtime not built");
+        // Use shared engine factory
+        this.engine = createEngine(this.runtime, opts);
+        if (!this.engine)
+            throw new Error("Failed to create engine");
         this.engine.on("value", (e) => this.emit("value", e));
         this.engine.on("error", (e) => this.emit("error", e));
         this.engine.on("invalidate", (e) => this.emit("invalidate", e));
         this.engine.on("stats", (e) => this.emit("stats", e));
-        this.engine.launch(opts.invalidate);
-        this.runningKind = opts.engine;
+        this.engine.launch(opts?.invalidate);
+        this.runningKind = opts?.engine ?? "push";
         this.emit("status", { running: true, engine: this.runningKind });
         for (const [nodeId, map] of Object.entries(this.stagedInputs)) {
             this.engine.setInputs(nodeId, map);
@@ -496,18 +530,18 @@ class LocalGraphRunner extends AbstractGraphRunner {
     }
     async step() {
         const eng = this.engine;
-        if (eng instanceof StepEngine)
+        if (eng && eng instanceof StepEngine)
             await eng.step();
     }
     async computeNode(nodeId) {
         const eng = this.engine;
-        if (eng instanceof PullEngine)
+        if (eng && eng instanceof PullEngine)
             await eng.computeNode(nodeId);
     }
-    flush() {
+    async flush() {
         const eng = this.engine;
-        if (eng instanceof BatchedEngine)
-            eng.flush();
+        if (eng && eng instanceof BatchedEngine)
+            await eng.flush();
     }
     getOutputs(def) {
         const out = {};
@@ -595,10 +629,12 @@ class LocalGraphRunner extends AbstractGraphRunner {
     dispose() {
         super.dispose();
         this.runtime = undefined;
-        this.emit("transport", { state: "local" });
+        this.emit("transport", { runnerId: this.runnerId, state: "local" });
     }
 }
 
+// Counter for generating readable runner IDs
+let remoteRunnerCounter = 0;
 class RemoteGraphRunner extends AbstractGraphRunner {
     /**
      * Fetch full registry description from remote and register it locally.
@@ -737,13 +773,20 @@ class RemoteGraphRunner extends AbstractGraphRunner {
     setupClientSubscriptions(client) {
         // Subscribe to transport status changes
         // Convert RuntimeApiClient.TransportStatus to IGraphRunner.TransportStatus
+        // Only emit status if it matches this runner's ID
         this.transportStatusUnsubscribe = client.onTransportStatus((status) => {
+            if (status.runnerId && status.runnerId !== this.runnerId)
+                return;
             // Map remote-unix to undefined since RemoteGraphRunner doesn't support it
             const mappedKind = status.kind === "remote-unix" ? undefined : status.kind;
-            this.emit("transport", {
+            const transportStatus = {
                 state: status.state,
                 kind: mappedKind,
-            });
+                runnerId: this.runnerId,
+            };
+            // Track current status
+            this.currentTransportStatus = transportStatus;
+            this.emit("transport", transportStatus);
         });
     }
     // Ensure remote client
@@ -764,6 +807,7 @@ class RemoteGraphRunner extends AbstractGraphRunner {
             // Create client with custom event handler if provided
             const client = new RuntimeApiClient(clientConfig, {
                 onCustomEvent: backend.onCustomEvent,
+                runnerId: this.runnerId,
             });
             // Setup event subscriptions
             this.setupClientSubscriptions(client);
@@ -796,6 +840,15 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         this.registryFetching = false;
         this.MAX_REGISTRY_FETCH_ATTEMPTS = 3;
         this.INITIAL_RETRY_DELAY_MS = 1000; // 1 second
+        // Generate readable ID for this runner instance (e.g., remote-001, remote-002)
+        remoteRunnerCounter++;
+        this.runnerId = `remote-${String(remoteRunnerCounter).padStart(3, "0")}`;
+        console.info(`[RemoteGraphRunner] Created runner with ID: ${this.runnerId}`);
+        // Initialize transport status as "connecting" - will be updated when connection completes
+        this.currentTransportStatus = {
+            state: "connecting",
+            kind: backend.kind,
+        };
         // Auto-handle registry-changed invalidations from remote
         // We listen on invalidate and if reason matches, we rehydrate registry and emit a registry event
         this.ensureClient().then(async (client) => {
@@ -903,30 +956,36 @@ class RemoteGraphRunner extends AbstractGraphRunner {
             catch {
                 console.error("Failed to hydrate remote inputs/outputs");
             }
-            const eng = client.getEngine();
-            if (!this.listenersBound) {
-                eng.on("value", (e) => {
-                    this.valueCache.set(`${e.nodeId}.${e.handle}`, {
-                        io: e.io,
-                        value: e.value,
-                        runtimeTypeId: e.runtimeTypeId,
-                    });
-                    this.emit("value", e);
-                });
-                eng.on("error", (e) => this.emit("error", e));
-                eng.on("invalidate", (e) => this.emit("invalidate", e));
-                eng.on("stats", (e) => this.emit("stats", e));
-                this.listenersBound = true;
-            }
-            this.engine = eng;
-            this.engine.launch(opts.invalidate);
-            this.runningKind = "push";
-            this.emit("status", { running: true, engine: this.runningKind });
-            for (const [nodeId, map] of Object.entries(this.stagedInputs)) {
-                this.engine.setInputs(nodeId, map);
-            }
+            await this.createAndLaunchEngine(opts);
         });
     }
+    async createAndLaunchEngine(opts) {
+        const client = await this.ensureClient();
+        // Configure and launch engine on the backend
+        await client.launch(opts);
+        // Get the remote engine proxy and wire up event listeners
+        const eng = client.getEngine();
+        if (!this.listenersBound) {
+            eng.on("value", (e) => {
+                this.valueCache.set(`${e.nodeId}.${e.handle}`, {
+                    io: e.io,
+                    value: e.value,
+                    runtimeTypeId: e.runtimeTypeId,
+                });
+                this.emit("value", e);
+            });
+            eng.on("error", (e) => this.emit("error", e));
+            eng.on("invalidate", (e) => this.emit("invalidate", e));
+            eng.on("stats", (e) => this.emit("stats", e));
+            this.listenersBound = true;
+        }
+        this.engine = eng;
+        this.runningKind = opts?.engine ?? "push";
+        this.emit("status", { running: true, engine: this.runningKind });
+        for (const [nodeId, map] of Object.entries(this.stagedInputs)) {
+            this.engine.setInputs(nodeId, map);
+        }
+    }
     /**
      * Launch using an existing backend runtime that has already been built and hydrated.
      * This is used when resuming from a snapshot where the backend has already applied
@@ -942,34 +1001,47 @@ class RemoteGraphRunner extends AbstractGraphRunner {
             // has already been built and hydrated via ApplySnapshotFull.
             // Calling build() would create a new runtime and lose the restored state.
             this.lastDef = def;
-            // Attach to the existing engine
-            const eng = client.getEngine();
-            if (!this.listenersBound) {
-                eng.on("value", (e) => {
-                    this.valueCache.set(`${e.nodeId}.${e.handle}`, {
-                        io: e.io,
-                        value: e.value,
-                        runtimeTypeId: e.runtimeTypeId,
-                    });
-                    this.emit("value", e);
-                });
-                eng.on("error", (e) => this.emit("error", e));
-                eng.on("invalidate", (e) => this.emit("invalidate", e));
-                eng.on("stats", (e) => this.emit("stats", e));
-                this.listenersBound = true;
-            }
-            this.engine = eng;
-            this.engine.launch(opts.invalidate);
-            this.runningKind = "push";
-            this.emit("status", { running: true, engine: this.runningKind });
-            for (const [nodeId, map] of Object.entries(this.stagedInputs)) {
-                this.engine.setInputs(nodeId, map);
-            }
+            await this.createAndLaunchEngine(opts);
         });
     }
-    async step() { }
-    async computeNode(nodeId) { }
-    flush() { }
+    async switchEngine(opts) {
+        if (!this.engine) {
+            throw new Error("No engine running to switch from");
+        }
+        // Wait for current engine to be idle
+        await this.whenIdle();
+        // Capture current state
+        const currentInputs = { ...this.stagedInputs };
+        // For remote runners, we cannot call this.stop() because it sends a Dispose
+        // command that destroys the graphRuntime on the backend. Instead, we rely on
+        // the backend's launch() method to dispose the old engine and create a new one.
+        // Reconfigure engine on the backend (this will dispose old engine and create new one)
+        const client = await this.ensureClient();
+        await client.launch(opts);
+        // Get the remote engine proxy (should be the same RemoteEngine instance)
+        const eng = client.getEngine();
+        // Update local state to reflect new engine kind
+        // Note: The RemoteEngine instance itself doesn't change, but the backend engine does
+        this.engine = eng;
+        this.runningKind = opts?.engine ?? "push";
+        this.emit("status", { running: true, engine: this.runningKind });
+        // Re-apply staged inputs to new engine
+        for (const [nodeId, map] of Object.entries(currentInputs)) {
+            this.engine.setInputs(nodeId, map);
+        }
+    }
+    async step() {
+        const client = await this.ensureClient();
+        await client.step();
+    }
+    async computeNode(nodeId) {
+        const client = await this.ensureClient();
+        await client.computeNode(nodeId);
+    }
+    async flush() {
+        const client = await this.ensureClient();
+        await client.flush();
+    }
     triggerExternal(nodeId, event) {
         this.ensureClient().then(async (client) => {
             try {
@@ -1117,6 +1189,7 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         if (this.disposed)
             return;
         this.disposed = true;
+        console.info(`[RemoteGraphRunner] Disposing runner with ID: ${this.runnerId}`);
         super.dispose();
         // Clear client promise if any
         this.clientPromise = undefined;
@@ -1136,10 +1209,30 @@ class RemoteGraphRunner extends AbstractGraphRunner {
                 console.warn("[RemoteGraphRunner] Error disposing client:", err);
             });
         }
-        this.emit("transport", {
+        const disconnectedStatus = {
             state: "disconnected",
             kind: this.backend.kind,
-        });
+            runnerId: this.runnerId,
+        };
+        this.currentTransportStatus = disconnectedStatus;
+        this.emit("transport", disconnectedStatus);
+    }
+    /**
+     * Override on() to emit current transport status immediately when a new listener subscribes.
+     * This ensures listeners don't miss the current status when they attach after connection.
+     */
+    on(event, handler) {
+        const unsubscribe = super.on(event, handler);
+        // If subscribing to transport events and we have a current status, emit it immediately
+        if (event === "transport" && this.currentTransportStatus) {
+            // Use setTimeout to ensure this happens after the listener is registered
+            // This prevents issues if the handler modifies state synchronously
+            setTimeout(() => {
+                // Type assertion is safe here because we checked event === "transport"
+                handler(this.currentTransportStatus);
+            }, 0);
+        }
+        return unsubscribe;
     }
 }
 
@@ -2325,16 +2418,28 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             offRunnerRegistry();
             offRunnerTransport();
         };
+    }, [runner, wb, setRegistry]);
+    const isRunning = useCallback(() => runner.isRunning(), [runner]);
+    const engineKind = useCallback(() => runner.getRunningEngine(), [runner]);
+    const start = useCallback((engine) => {
+        try {
+            runner.launch(wb.export(), { engine });
+        }
+        catch { }
     }, [runner, wb]);
+    const stop = useCallback(() => runner.stop(), [runner]);
+    const step = useCallback(() => runner.step(), [runner]);
+    const flush = useCallback(() => runner.flush(), [runner]);
     // Push incremental updates into running engine without full reload
+    const isGraphRunning = isRunning();
     useEffect(() => {
-        if (runner.isRunning()) {
+        if (isGraphRunning) {
             try {
                 runner.update(def);
             }
             catch { }
         }
-    }, [runner, def, graphTick]);
+    }, [runner, isGraphRunning, def, graphTick]);
     const validationByNode = useMemo(() => {
         const inputs = {};
         const outputs = {};
@@ -2398,17 +2503,6 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
         }
         return { errors, issues };
     }, [validation]);
-    const isRunning = useCallback(() => runner.isRunning(), [runner]);
-    const engineKind = useCallback(() => runner.getRunningEngine(), [runner]);
-    const start = useCallback((engine) => {
-        try {
-            runner.launch(wb.export(), { engine });
-        }
-        catch { }
-    }, [runner, wb]);
-    const stop = useCallback(() => runner.dispose(), [runner]);
-    const step = useCallback(() => runner.step(), [runner]);
-    const flush = useCallback(() => runner.flush(), [runner]);
     const value = useMemo(() => ({
         wb,
         runner,
@@ -2614,6 +2708,42 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
             outputs: nodeValidationHandles?.outputs?.[selectedNodeId] ?? [],
         }
         : { inputs: [], outputs: [] };
+    // Render edge status indicator
+    const renderEdgeStatus = useCallback(() => {
+        if (!selectedEdge)
+            return null;
+        const status = edgeStatus?.[selectedEdge.id];
+        if (status?.activeRuns > 0) {
+            return (jsxs("div", { className: "mt-1 text-xs text-blue-700 bg-blue-50 border border-blue-200 rounded px-2 py-1", children: [jsxs("div", { className: "font-semibold", children: ["Running (", status.activeRuns, ")"] }), jsx("div", { className: "text-[10px] text-blue-600 mt-1", children: "Note: Edge runIds are not available in stats events" })] }));
+        }
+        return null;
+    }, [selectedEdge, edgeStatus]);
+    // Render linked input display value
+    const renderLinkedInputDisplay = useCallback((typeId, current) => {
+        const displayStr = safeToString(typeId, current);
+        const isLong = displayStr.length > 50;
+        const truncated = isLong ? truncateValue(displayStr) : displayStr;
+        return (jsxs("div", { className: "flex items-center gap-1", children: [jsx("span", { className: "truncate", children: truncated }), isLong && (jsx("button", { className: "flex-shrink-0 p-1 hover:bg-gray-100 rounded", onClick: () => copyToClipboard(displayStr), title: "Copy full value", children: jsx(CopyIcon, { size: 14 }) }))] }));
+    }, [safeToString, truncateValue, copyToClipboard]);
+    // Render output validation issues badge
+    const renderOutputValidationBadge = useCallback((handle) => {
+        const outIssues = selectedNodeHandleValidation.outputs.filter((m) => m.handle === handle);
+        if (outIssues.length === 0)
+            return null;
+        const outErr = outIssues.some((m) => m.level === "error");
+        const outTitle = outIssues
+            .map((v) => `${v.code}: ${v.message}`)
+            .join("; ");
+        return (jsx(IssueBadge, { level: outErr ? "error" : "warning", size: 24, className: "ml-1 w-6 h-6", title: outTitle }));
+    }, [selectedNodeHandleValidation]);
+    // Render output display value
+    const renderOutputDisplay = useCallback((outputValue, effectiveHandle) => {
+        const { typeId, value } = resolveOutputDisplay(outputValue, effectiveHandle);
+        const displayStr = safeToString(typeId, value);
+        const isLong = displayStr.length > 50;
+        const truncated = isLong ? truncateValue(displayStr) : displayStr;
+        return (jsxs("div", { className: "flex items-center gap-1", children: [jsx("span", { className: "truncate", children: truncated }), isLong && (jsx("button", { className: "flex-shrink-0 p-1 hover:bg-gray-100 rounded", onClick: () => copyToClipboard(displayStr), title: "Copy full value", children: jsx(CopyIcon, { size: 14 }) }))] }));
+    }, [safeToString, truncateValue, copyToClipboard]);
     // Local drafts and originals for commit-on-blur/enter behavior
     const [drafts, setDrafts] = useState({});
     const [originals, setOriginals] = useState({});
@@ -2671,10 +2801,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
     return (jsxs("div", { className: `${widthClass} border-l border-gray-300 p-3 flex flex-col h-full min-h-0 overflow-auto`, children: [jsxs("div", { className: "flex-1 overflow-auto", children: [contextPanel && jsx("div", { className: "mb-2", children: contextPanel }), inputValidationErrors.length > 0 && (jsxs("div", { className: "mb-2 space-y-1", children: [inputValidationErrors.map((err, i) => (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: [jsxs("div", { className: "flex-1", children: [jsx("div", { className: "font-semibold", children: "Input Validation Error" }), jsx("div", { className: "break-words", children: err.message }), jsxs("div", { className: "text-[10px] text-red-600 mt-1", children: [err.nodeId, ".", err.handle, " (type: ", err.typeId, ")"] })] }), jsx("button", { className: "text-red-500 hover:text-red-700 text-[10px] px-1", onClick: () => removeInputValidationError(i), title: "Dismiss", children: jsx(XIcon, { size: 10 }) })] }, i))), inputValidationErrors.length > 1 && (jsx("button", { className: "text-xs text-red-600 hover:text-red-800 underline", onClick: clearInputValidationErrors, children: "Clear all" }))] })), systemErrors.length > 0 && (jsxs("div", { className: "mb-2 space-y-1", children: [systemErrors.map((err, i) => (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: [jsxs("div", { className: "flex-1", children: [jsx("div", { className: "font-semibold", children: err.code ? `Error ${err.code}` : "Error" }), jsx("div", { className: "break-words", children: err.message })] }), jsx("button", { className: "text-red-500 hover:text-red-700 text-[10px] px-1", onClick: () => removeSystemError(i), title: "Dismiss", children: jsx(XIcon, { size: 10 }) })] }, i))), systemErrors.length > 1 && (jsx("button", { className: "text-xs text-red-600 hover:text-red-800 underline", onClick: clearSystemErrors, children: "Clear all" }))] })), registryErrors.length > 0 && (jsxs("div", { className: "mb-2 space-y-1", children: [registryErrors.map((err, i) => (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: [jsxs("div", { className: "flex-1", children: [jsx("div", { className: "font-semibold", children: "Registry Error" }), jsx("div", { className: "break-words", children: err.message }), err.attempt && err.maxAttempts && (jsxs("div", { className: "text-[10px] text-amber-600 mt-1", children: ["Attempt ", err.attempt, " of ", err.maxAttempts] }))] }), jsx("button", { className: "text-amber-500 hover:text-amber-700 text-[10px] px-1", onClick: () => removeRegistryError(i), title: "Dismiss", children: jsx(XIcon, { size: 10 }) })] }, i))), registryErrors.length > 1 && (jsx("button", { className: "text-xs text-amber-600 hover:text-amber-800 underline", onClick: clearRegistryErrors, children: "Clear all" }))] })), jsx("div", { className: "font-semibold mb-2", children: "Inspector" }), jsxs("div", { className: "text-xs text-gray-500 mb-2", children: ["valuesTick: ", valuesTick] }), jsx("div", { className: "flex-1", children: !selectedNode && !selectedEdge ? (jsxs("div", { children: [jsx("div", { className: "text-gray-500", children: "Select a node or edge." }), globalValidationIssues && globalValidationIssues.length > 0 && (jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsx("ul", { className: "list-disc ml-4", children: globalValidationIssues.map((m, i) => (jsxs("li", { className: "flex items-center gap-1", children: [jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsx("span", { children: `${m.code}: ${m.message}` }), !!m.data?.edgeId && (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 ? (jsxs("div", { children: [jsxs("div", { className: "mb-2", children: [jsxs("div", { children: ["Edge: ", selectedEdge.id] }), jsxs("div", { children: [selectedEdge.source.nodeId, ".", selectedEdge.source.handle, " \u2192", " ", selectedEdge.target.nodeId, ".", selectedEdge.target.handle] }), (() => {
-                                            const status = edgeStatus?.[selectedEdge.id];
-                                            return status?.activeRuns > 0 ? (jsxs("div", { className: "mt-1 text-xs text-blue-700 bg-blue-50 border border-blue-200 rounded px-2 py-1", children: [jsxs("div", { className: "font-semibold", children: ["Running (", status.activeRuns, ")"] }), jsx("div", { className: "text-[10px] text-blue-600 mt-1", children: "Note: Edge runIds are not available in stats events" })] })) : null;
-                                        })(), jsx("div", { className: "mt-1", children: jsx("button", { className: "text-xs px-2 py-1 border border-red-300 rounded text-red-700 hover:bg-red-50", onClick: (e) => {
+                                                        }, title: "Delete referenced edge", children: "Delete edge" }))] }, i))) })] }))] })) : selectedEdge ? (jsxs("div", { children: [jsxs("div", { className: "mb-2", children: [jsxs("div", { children: ["Edge: ", selectedEdge.id] }), jsxs("div", { children: [selectedEdge.source.nodeId, ".", selectedEdge.source.handle, " \u2192", " ", selectedEdge.target.nodeId, ".", selectedEdge.target.handle] }), renderEdgeStatus(), jsx("div", { className: "mt-1", children: jsx("button", { className: "text-xs px-2 py-1 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" }) }), jsxs("div", { className: "flex items-center gap-2 mt-1", children: [jsxs("label", { className: "w-20 flex flex-col", children: [jsx("span", { children: "Type" }), jsx("span", { className: "text-gray-500 text-[11px]", children: "DataTypeId" })] }), 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: selectedEdge.typeId ?? "", onChange: (e) => {
@@ -2753,14 +2880,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                                                             ? `Default: ${placeholder}`
                                                                             : "(select)" }), registry.enums
                                                                         .get(typeId)
-                                                                        ?.options.map((opt) => (jsx("option", { value: String(opt.value), children: opt.label }, opt.value)))] }), hasValue && !isLinked && (jsx("button", { className: "flex-shrink-0 p-1 hover:bg-gray-100 rounded text-gray-500 hover:text-gray-700", onClick: clearInput, title: "Clear input value", children: jsx(XCircleIcon, { size: 16 }) }))] })) : isLinked ? (jsx("div", { className: "flex items-center gap-1 flex-1", children: jsx("div", { className: "flex-1 min-w-0", children: (() => {
-                                                                const displayStr = safeToString(typeId, current);
-                                                                const isLong = displayStr.length > 50;
-                                                                const truncated = isLong
-                                                                    ? truncateValue(displayStr)
-                                                                    : displayStr;
-                                                                return (jsxs("div", { className: "flex items-center gap-1", children: [jsx("span", { className: "truncate", children: truncated }), isLong && (jsx("button", { className: "flex-shrink-0 p-1 hover:bg-gray-100 rounded", onClick: () => copyToClipboard(displayStr), title: "Copy full value", children: jsx(CopyIcon, { size: 14 }) }))] }));
-                                                            })() }) })) : (jsxs("div", { className: "flex items-center gap-1 flex-1", children: [jsx("input", { className: "border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 flex-1", placeholder: placeholder
+                                                                        ?.options.map((opt) => (jsx("option", { value: String(opt.value), children: opt.label }, opt.value)))] }), hasValue && !isLinked && (jsx("button", { className: "flex-shrink-0 p-1 hover:bg-gray-100 rounded text-gray-500 hover:text-gray-700", onClick: clearInput, title: "Clear input value", children: jsx(XCircleIcon, { size: 16 }) }))] })) : isLinked ? (jsx("div", { className: "flex items-center gap-1 flex-1", children: jsx("div", { className: "flex-1 min-w-0", children: renderLinkedInputDisplay(typeId, current) }) })) : (jsxs("div", { className: "flex items-center gap-1 flex-1", children: [jsx("input", { className: "border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 flex-1", placeholder: placeholder
                                                                     ? `Default: ${placeholder}`
                                                                     : undefined, value: displayValue, onChange: (e) => onChangeText(e.target.value), onBlur: commit, onKeyDown: (e) => {
                                                                     if (e.key === "Enter")
@@ -2768,24 +2888,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                                                     if (e.key === "Escape")
                                                                         revert();
                                                                 }, ...commonProps }), hasValue && !isLinked && (jsx("button", { className: "flex-shrink-0 p-1 hover:bg-gray-100 rounded text-gray-500 hover:text-gray-700", onClick: clearInput, title: "Clear input value", children: jsx(XCircleIcon, { size: 16 }) }))] }))] }, h));
-                                        }))] }), jsxs("div", { children: [jsx("div", { className: "font-semibold mb-1", children: "Outputs" }), outputHandles.length === 0 ? (jsx("div", { className: "text-gray-500", children: "No outputs" })) : (outputHandles.map((h) => (jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxs("label", { className: "w-20 flex flex-col", children: [jsx("span", { children: prettyHandle(h) }), jsx("span", { className: "text-gray-500 text-[11px]", children: outputTypesMap[selectedNodeId]?.[h] ?? "" })] }), jsx("div", { className: "flex-1 min-w-0", children: (() => {
-                                                        const { typeId, value } = resolveOutputDisplay(nodeOutputs[h], effectiveHandles.outputs[h]);
-                                                        const displayStr = safeToString(typeId, value);
-                                                        const isLong = displayStr.length > 50;
-                                                        const truncated = isLong
-                                                            ? truncateValue(displayStr)
-                                                            : displayStr;
-                                                        return (jsxs("div", { className: "flex items-center gap-1", children: [jsx("span", { className: "truncate", children: truncated }), isLong && (jsx("button", { className: "flex-shrink-0 p-1 hover:bg-gray-100 rounded", onClick: () => copyToClipboard(displayStr), title: "Copy full value", children: jsx(CopyIcon, { size: 14 }) }))] }));
-                                                    })() }), (() => {
-                                                    const outIssues = selectedNodeHandleValidation.outputs.filter((m) => m.handle === h);
-                                                    if (outIssues.length === 0)
-                                                        return null;
-                                                    const outErr = outIssues.some((m) => m.level === "error");
-                                                    const outTitle = outIssues
-                                                        .map((v) => `${v.code}: ${v.message}`)
-                                                        .join("; ");
-                                                    return (jsx(IssueBadge, { level: outErr ? "error" : "warning", size: 24, className: "ml-1 w-6 h-6", title: outTitle }));
-                                                })()] }, h))))] }), selectedNodeValidation.length > 0 && (jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsx("ul", { className: "list-disc ml-4", children: selectedNodeValidation.map((m, i) => (jsxs("li", { className: "flex items-center gap-1", children: [jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsx("span", { children: `${m.code}: ${m.message}` }), !!m.data?.edgeId && (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) => {
+                                        }))] }), jsxs("div", { children: [jsx("div", { className: "font-semibold mb-1", children: "Outputs" }), outputHandles.length === 0 ? (jsx("div", { className: "text-gray-500", children: "No outputs" })) : (outputHandles.map((h) => (jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxs("label", { className: "w-20 flex flex-col", children: [jsx("span", { children: prettyHandle(h) }), jsx("span", { className: "text-gray-500 text-[11px]", children: outputTypesMap[selectedNodeId]?.[h] ?? "" })] }), jsx("div", { className: "flex-1 min-w-0", children: renderOutputDisplay(nodeOutputs[h], effectiveHandles.outputs[h]) }), renderOutputValidationBadge(h)] }, h))))] }), selectedNodeValidation.length > 0 && (jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsx("ul", { className: "list-disc ml-4", children: selectedNodeValidation.map((m, i) => (jsxs("li", { className: "flex items-center gap-1", children: [jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsx("span", { children: `${m.code}: ${m.message}` }), !!m.data?.edgeId && (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))) })] }))] })) })] }), debug && (jsx("div", { className: "mt-3 flex-none min-h-0 h-[50%]", children: jsx(DebugEvents, { autoScroll: !!autoScroll, hideWorkbench: !!hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange }) }))] }));
@@ -3540,6 +3643,44 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         ? computeEffectiveHandles(selectedNode, registry)
         : { inputs: {}, outputs: {}, inputDefaults: {} };
     const [exampleState, setExampleState] = useState(example ?? "");
+    const isGraphRunning = runner.isRunning();
+    const engineKind = runner.getRunningEngine();
+    // Render Start/Stop button based on transport and runner state
+    const renderStartStopButton = useCallback(() => {
+        // Check if transport is connecting/retrying
+        const isConnecting = transportStatus.state === "connecting" ||
+            transportStatus.state === "retrying";
+        // Only allow Start/Stop when transport is connected or local
+        const canControl = transportStatus.state === "connected" ||
+            transportStatus.state === "local";
+        if (isConnecting) {
+            return (jsxs("button", { className: "border rounded px-2 py-1.5 text-gray-500 border-gray-400 flex items-center gap-1 disabled:opacity-50", disabled: true, title: "Connecting to backend...", children: [jsx(ClockClockwiseIcon, { size: 16, className: "animate-spin" }), jsx("span", { className: "font-medium ml-1", children: "Connecting..." })] }));
+        }
+        if (isGraphRunning) {
+            return (jsxs("button", { className: "border rounded px-2 py-1.5 text-red-700 border-red-600 flex items-center gap-1 disabled:opacity-50 disabled:text-gray-400 disabled:border-gray-300", onClick: () => runner.stop(), disabled: !canControl, title: canControl ? "Stop engine" : "Waiting for connection", children: [jsx(StopIcon, { size: 16, weight: "fill" }), jsx("span", { className: "font-medium ml-1", children: "Stop" })] }));
+        }
+        return (jsxs("button", { className: "border rounded px-2 py-1.5 text-green-700 border-green-600 flex items-center gap-1 disabled:text-gray-400 disabled:border-gray-300 disabled:opacity-50", onClick: (evt) => {
+                const kind = engine;
+                if (!kind)
+                    return alert("Select an engine first.");
+                if (evt.shiftKey && !confirm("Invalidate and re-run graph?"))
+                    return;
+                try {
+                    runner.launch(wb.export(), {
+                        engine: kind,
+                        invalidate: evt.shiftKey,
+                    });
+                }
+                catch (err) {
+                    const message = err instanceof Error ? err.message : String(err);
+                    alert(message);
+                }
+            }, disabled: !engine || !canControl, title: !engine
+                ? "Select an engine first"
+                : !canControl
+                    ? "Waiting for connection"
+                    : "Start engine", children: [jsx(PlayIcon, { size: 16, weight: "fill" }), jsx("span", { className: "font-medium ml-1", children: "Start" })] }));
+    }, [transportStatus, isGraphRunning, runner, engine, wb]);
     const defaultExamples = useMemo(() => [
         {
             id: "simple",
@@ -3588,7 +3729,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         return backendKind === "local";
     });
     // Expose init callback with setInitialGraph helper
-    // Note: This runs whenever runner changes (e.g., when Flow is enabled and backendOptions changes)
+    // Note: This runs whenever runner changes
     useEffect(() => {
         if (!onInit)
             return;
@@ -3764,7 +3905,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         applyExample(example);
     }, [example, wb]);
     useEffect(() => {
-        const off = runner.on("transport", (s) => setTransportStatus(s));
+        const off = runner.on("transport", setTransportStatus);
         return () => off();
     }, [runner]);
     // Track registry readiness for remote backends
@@ -3785,7 +3926,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
     useEffect(() => {
         if (!engine)
             return;
-        if (runner.isRunning())
+        if (isGraphRunning)
             return;
         // Only auto-launch for local backend; require explicit Start for remote
         if (backendKind !== "local")
@@ -3802,7 +3943,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         catch {
             // ignore
         }
-    }, [engine, runner, wb, backendKind]);
+    }, [engine, runner, isGraphRunning, wb, backendKind]);
     // Registry is automatically fetched by RemoteGraphRunner when it connects
     // Run auto layout after registry is hydrated (for remote backends)
     useEffect(() => {
@@ -3988,30 +4129,34 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             return overrides.toElement(baseToElement, { registry });
         return baseToElement;
     }, [overrides, baseToElement, registry]);
-    return (jsxs("div", { className: "w-full h-screen flex flex-col", children: [jsxs("div", { className: "p-2 border-b border-gray-300 flex gap-2 items-center", children: [runner.isRunning() ? (jsxs("span", { className: "ml-2 text-sm text-green-700", children: ["Running: ", runner.getRunningEngine()] })) : (jsx("span", { className: "ml-2 text-sm text-gray-500", children: "Stopped" })), jsxs("span", { className: "ml-2 flex items-center gap-1 text-xs", title: transportStatus.kind || undefined, children: [transportStatus.state === "local" && (jsx(PlugsConnectedIcon, { size: 14, className: "text-gray-500" })), transportStatus.state === "connecting" && (jsx(ClockClockwiseIcon, { size: 14, className: "text-amber-600 animate-pulse" })), transportStatus.state === "connected" && (jsx(WifiHighIcon, { size: 14, className: "text-green-600" })), transportStatus.state === "disconnected" && (jsx(WifiSlashIcon, { size: 14, className: "text-red-600" })), transportStatus.state === "retrying" && (jsx(ClockClockwiseIcon, { size: 14, className: "text-amber-700 animate-pulse" }))] }), jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: exampleState, onChange: (e) => applyExample(e.target.value), disabled: runner.isRunning(), title: runner.isRunning()
-                            ? "Stop engine before switching example"
-                            : undefined, children: [jsx("option", { value: "", children: "Select Example\u2026" }), examples.map((ex) => (jsx("option", { value: ex.id, children: ex.label }, ex.id)))] }), jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: backendKind, onChange: (e) => onBackendKindChange(e.target.value), disabled: runner.isRunning(), title: runner.isRunning()
-                            ? "Stop engine before switching backend"
-                            : undefined, children: [jsx("option", { value: "local", children: "Local" }), jsx("option", { value: "remote-http", children: "Remote (HTTP)" }), jsx("option", { value: "remote-ws", children: "Remote (WebSocket)" })] }), backendKind === "remote-http" && !!onHttpBaseUrlChange && (jsx("input", { className: "ml-2 border border-gray-300 rounded px-2 py-1 w-72", placeholder: "http://127.0.0.1:18080", value: httpBaseUrl, onChange: (e) => onHttpBaseUrlChange(e.target.value) })), backendKind === "remote-ws" && !!onWsUrlChange && (jsx("input", { className: "ml-2 border border-gray-300 rounded px-2 py-1 w-72", placeholder: "ws://127.0.0.1:18081", value: wsUrl, onChange: (e) => onWsUrlChange(e.target.value) })), jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: runner.getRunningEngine() ?? engine ?? "", onChange: (e) => {
+    return (jsxs("div", { className: "w-full h-screen flex flex-col", children: [jsxs("div", { className: "p-2 border-b border-gray-300 flex gap-2 items-center", children: [isGraphRunning ? (jsxs("span", { className: "ml-2 text-sm text-green-700", children: ["Running: ", engineKind] })) : (jsx("span", { className: "ml-2 text-sm text-gray-500", children: "Stopped" })), jsxs("span", { className: "ml-2 flex items-center gap-1 text-xs", title: transportStatus.kind || undefined, children: [transportStatus.state === "local" && (jsx(PlugsConnectedIcon, { size: 14, className: "text-gray-500" })), transportStatus.state === "connecting" && (jsx(ClockClockwiseIcon, { size: 14, className: "text-amber-600 animate-pulse" })), transportStatus.state === "connected" && (jsx(WifiHighIcon, { size: 14, className: "text-green-600" })), transportStatus.state === "disconnected" && (jsx(WifiSlashIcon, { size: 14, className: "text-red-600" })), transportStatus.state === "retrying" && (jsx(ClockClockwiseIcon, { size: 14, className: "text-amber-700 animate-pulse" }))] }), jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: exampleState, onChange: (e) => applyExample(e.target.value), disabled: isGraphRunning, title: isGraphRunning ? "Stop engine before switching example" : undefined, children: [jsx("option", { value: "", children: "Select Example\u2026" }), examples.map((ex) => (jsx("option", { value: ex.id, children: ex.label }, ex.id)))] }), jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: backendKind, onChange: (e) => onBackendKindChange(e.target.value), disabled: isGraphRunning, title: isGraphRunning ? "Stop engine before switching backend" : undefined, children: [jsx("option", { value: "local", children: "Local" }), jsx("option", { value: "remote-http", children: "Remote (HTTP)" }), jsx("option", { value: "remote-ws", children: "Remote (WebSocket)" })] }), backendKind === "remote-http" && !!onHttpBaseUrlChange && (jsx("input", { className: "border border-gray-300 rounded px-2 py-1 w-72", placeholder: "http://127.0.0.1:18080", value: httpBaseUrl, onChange: (e) => onHttpBaseUrlChange(e.target.value) })), backendKind === "remote-ws" && !!onWsUrlChange && (jsx("input", { className: "border border-gray-300 rounded px-2 py-1 w-72", placeholder: "ws://127.0.0.1:18081", value: wsUrl, onChange: (e) => onWsUrlChange(e.target.value) })), jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: engineKind ?? engine ?? "", onChange: async (e) => {
                             const kind = e.target.value || undefined;
-                            onEngineChange?.(kind);
-                        }, children: [jsx("option", { value: "", children: "Select Engine\u2026" }), jsx("option", { value: "push", children: "Push" }), jsx("option", { value: "batched", children: "Batched" }), jsx("option", { value: "pull", children: "Pull" }), jsx("option", { value: "hybrid", children: "Hybrid" }), jsx("option", { value: "step", children: "Step" })] }), runner.getRunningEngine() === "step" && (jsx("button", { className: "ml-2 border border-gray-300 rounded p-1", onClick: () => runner.step(), disabled: !runner.isRunning(), title: "Step", children: jsx(PlayPauseIcon, { size: 24 }) })), runner.getRunningEngine() === "batched" && (jsx("button", { className: "ml-2 border border-gray-300 rounded p-1", onClick: () => runner.flush(), disabled: !runner.isRunning(), title: "Flush", children: jsx(LightningIcon, { size: 24 }) })), runner.isRunning() ? (jsxs("button", { className: "border rounded px-2 py-1.5 text-red-700 border-red-600 flex items-center gap-1", onClick: () => runner.dispose(), title: "Stop engine", children: [jsx(StopIcon, { size: 16, weight: "fill" }), jsx("span", { className: "font-medium ml-1", children: "Stop" })] })) : (jsxs("button", { className: "border rounded px-2 py-1.5 text-green-700 border-green-600 flex items-center gap-1 disabled:text-gray-400 disabled:border-gray-300", onClick: (evt) => {
-                            const kind = engine;
-                            if (!kind)
-                                return alert("Select an engine first.");
-                            if (evt.shiftKey && !confirm("Invalidate and re-run graph?"))
-                                return;
-                            try {
-                                runner.launch(wb.export(), {
-                                    engine: kind,
-                                    invalidate: evt.shiftKey,
-                                });
+                            const currentEngine = runner.getRunningEngine();
+                            // If engine is running and user selected a different engine, switch it
+                            if (runner.isRunning() &&
+                                currentEngine &&
+                                kind &&
+                                kind !== currentEngine) {
+                                try {
+                                    await runner.switchEngine({
+                                        engine: kind,
+                                        batched: { flushIntervalMs: 0 },
+                                        hybrid: { windowMs: 250, batchThreshold: 3 },
+                                    });
+                                    onEngineChange?.(kind);
+                                }
+                                catch (err) {
+                                    const message = err instanceof Error ? err.message : String(err);
+                                    alert(`Failed to switch engine: ${message}`);
+                                    // Reset dropdown to current engine
+                                    e.target.value = currentEngine;
+                                }
                             }
-                            catch (err) {
-                                const message = err instanceof Error ? err.message : String(err);
-                                alert(message);
+                            else {
+                                // Normal change when not running
+                                onEngineChange?.(kind);
                             }
-                        }, disabled: !engine, title: engine ? "Start engine" : "Select an engine first", children: [jsx(PlayIcon, { size: 16, weight: "fill" }), jsx("span", { className: "font-medium ml-1", children: "Start" })] })), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: runAutoLayout, children: jsx(TreeStructureIcon, { size: 24 }) }), jsx("button", { className: "ml-2 border border-gray-300 rounded p-1", onClick: () => canvasRef.current?.fitView?.(), title: "Fit View", children: jsx(CornersOutIcon, { size: 24 }) }), jsx("button", { className: "ml-2 border border-gray-300 rounded p-1", onClick: downloadGraph, children: jsx(DownloadSimpleIcon, { size: 24 }) }), jsx("button", { className: "ml-2 border border-gray-300 rounded p-1", onClick: async () => {
+                        }, children: [jsx("option", { value: "", children: "Select Engine\u2026" }), jsx("option", { value: "push", children: "Push" }), jsx("option", { value: "batched", children: "Batched" }), jsx("option", { value: "pull", children: "Pull" }), jsx("option", { value: "hybrid", children: "Hybrid" }), jsx("option", { value: "step", children: "Step" })] }), engineKind === "step" && (jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => runner.step(), disabled: !isGraphRunning, title: "Step", children: jsx(PlayPauseIcon, { size: 24 }) })), engineKind === "batched" && (jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => runner.flush(), disabled: !isGraphRunning, title: "Flush", children: jsx(LightningIcon, { size: 24 }) })), renderStartStopButton(), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: runAutoLayout, children: jsx(TreeStructureIcon, { size: 24 }) }), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => canvasRef.current?.fitView?.(), title: "Fit View", children: jsx(CornersOutIcon, { size: 24 }) }), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: downloadGraph, children: jsx(DownloadSimpleIcon, { size: 24 }) }), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: async () => {
                             try {
                                 const def = wb.export();
                                 const positions = wb.getPositions();
@@ -4040,7 +4185,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                                 const message = err instanceof Error ? err.message : String(err);
                                 alert(message);
                             }
-                        }, children: jsx(DownloadIcon, { size: 24 }) }), jsx("input", { ref: uploadInputRef, type: "file", accept: "application/json,.json", className: "hidden", onChange: onUploadPicked }), jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: triggerUpload, children: jsx(UploadIcon, { size: 24 }) }), jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsx(BugBeetleIcon, { size: 24, weight: debug ? "fill" : undefined })] }), jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsx(ListBulletsIcon, { size: 24, weight: showValues ? "fill" : undefined })] })] }), jsxs("div", { className: "flex flex-1 min-h-0", children: [jsx("div", { className: "flex-1 min-w-0", children: jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement, getDefaultNodeSize: overrides?.getDefaultNodeSize }) }), jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, contextPanel: overrides?.contextPanel })] })] }));
+                        }, children: jsx(DownloadIcon, { size: 24 }) }), jsx("input", { ref: uploadInputRef, type: "file", accept: "application/json,.json", className: "hidden", onChange: onUploadPicked }), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: triggerUpload, children: jsx(UploadIcon, { size: 24 }) }), jsxs("label", { className: "flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsx(BugBeetleIcon, { size: 24, weight: debug ? "fill" : undefined })] }), jsxs("label", { className: "flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsx(ListBulletsIcon, { size: 24, weight: showValues ? "fill" : undefined })] })] }), jsxs("div", { className: "flex flex-1 min-h-0", children: [jsx("div", { className: "flex-1 min-w-0", children: jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement, getDefaultNodeSize: overrides?.getDefaultNodeSize }) }), jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, contextPanel: overrides?.contextPanel })] })] }));
 }
 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] = useState(createSimpleGraphRegistry());
@@ -4104,6 +4249,7 @@ function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, bac
             }
         };
     }, [runner]);
+    const isGraphRunning = runner.isRunning();
     // Track UI registration version to trigger nodeTypes recomputation
     const [uiVersion, setUiVersion] = useState(0);
     // Allow external UI registration (e.g., node renderers) with access to wb
@@ -4114,11 +4260,12 @@ function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, bac
         setUiVersion((v) => v + 1);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [wb, runner, overrides]);
-    return (jsx(WorkbenchProvider, { wb: wb, runner: runner, registry: registry, setRegistry: setRegistry, overrides: overrides, uiVersion: uiVersion, children: jsx(WorkbenchStudioCanvas, { setRegistry: setRegistry, autoScroll: autoScroll, onAutoScrollChange: onAutoScrollChange, example: example, onExampleChange: onExampleChange, engine: engine, onEngineChange: onEngineChange, backendKind: backendKind, onBackendKindChange: (v) => {
-                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, backendOptions: backendOptions, overrides: overrides, onInit: onInit, onChange: onChange }) }));
+    const onBackendKindChangeWithDispose = useCallback(() => (v) => {
+        if (isGraphRunning)
+            runner.dispose();
+        onBackendKindChange(v);
+    }, [isGraphRunning]);
+    return (jsx(WorkbenchProvider, { wb: wb, runner: runner, registry: registry, setRegistry: setRegistry, overrides: overrides, uiVersion: uiVersion, children: jsx(WorkbenchStudioCanvas, { setRegistry: setRegistry, autoScroll: autoScroll, onAutoScrollChange: onAutoScrollChange, example: example, onExampleChange: onExampleChange, engine: engine, onEngineChange: onEngineChange, backendKind: backendKind, onBackendKindChange: onBackendKindChangeWithDispose, 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 }) }));
 }
 
 export { AbstractWorkbench, CLIWorkbench, DefaultNode, DefaultNodeContent, DefaultNodeHeader, DefaultUIExtensionRegistry, InMemoryWorkbench, Inspector, LocalGraphRunner, NodeHandles, RemoteGraphRunner, WorkbenchCanvas, WorkbenchContext, WorkbenchProvider, WorkbenchStudio, computeEffectiveHandles, countVisibleHandles, estimateNodeSize, formatDataUrlAsLabel, formatDeclaredTypeSignature, getHandleClassName, getNodeBorderClassNames, layoutNode, preformatValueForDisplay, prettyHandle, resolveOutputDisplay, summarizeDeep, toReactFlow, useQueryParamBoolean, useQueryParamString, useThrottledValue, useWorkbenchBridge, useWorkbenchContext, useWorkbenchGraphTick, useWorkbenchGraphUiTick, useWorkbenchVersionTick };