@bian-womp/spark-workbench 0.2.93 → 0.3.0

package/lib/esm/index.js

@@ -1,11 +1,11 @@
-import { generateId, GraphBuilder, getTypedOutputValue, isTypedOutput, getInputTypeId, createEngine, StepEngine, PullEngine, BatchedEngine, getTypedOutputTypeId, isInputPrivate, offsetImportedPositions, createSimpleGraphRegistry, createSimpleGraphDef, createAsyncGraphDef, createAsyncGraphRegistry, createProgressGraphDef, createProgressGraphRegistry, createValidationGraphDef, createValidationGraphRegistry } from '@bian-womp/spark-graph';
+import { generateId, createSimpleGraphRegistry, GraphBuilder, getTypedOutputValue, isTypedOutput, getInputTypeId, UnifiedEngine, getTypedOutputTypeId, isInputPrivate, offsetImportedPositions, createSimpleGraphDef, createAsyncGraphDef, createAsyncGraphRegistry, createProgressGraphDef, createProgressGraphRegistry, createValidationGraphDef, createValidationGraphRegistry } from '@bian-womp/spark-graph';
 import lod from 'lodash';
-import { RuntimeApiClient } from '@bian-womp/spark-remote';
+import { RemoteRuntimeClient } from '@bian-womp/spark-remote';
 import { Position, Handle, NodeResizer, getBezierPath, BaseEdge, 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, ArrowClockwiseIcon, CopyIcon, TrashIcon, XIcon, ClockClockwiseIcon, StopIcon, PlayIcon, PlugsConnectedIcon, WifiHighIcon, WifiSlashIcon, PlayPauseIcon, LightningIcon, TreeStructureIcon, CornersOutIcon, DownloadIcon, UploadIcon, ImageIcon, BugBeetleIcon, ListBulletsIcon } from '@phosphor-icons/react';
+import { XCircleIcon, WarningCircleIcon, StopIcon, PlayIcon, Circle, CopyIcon, TrashIcon, XIcon, ClockClockwiseIcon, PlugsConnectedIcon, WifiHighIcon, WifiSlashIcon, TreeStructureIcon, CornersOutIcon, DownloadIcon, UploadIcon, ImageIcon, BugBeetleIcon, ListBulletsIcon } from '@phosphor-icons/react';
 
 class DefaultUIExtensionRegistry {
     constructor() {
@@ -133,8 +133,8 @@ class AbstractWorkbench {
 }
 
 class InMemoryWorkbench extends AbstractWorkbench {
-    constructor() {
-        super(...arguments);
+    constructor(args) {
+        super(args);
         this._def = { nodes: [], edges: [] };
         this.listeners = new Map();
         this.positions = {};
@@ -148,12 +148,17 @@ class InMemoryWorkbench extends AbstractWorkbench {
         this.viewport = null;
         this.historyState = undefined;
         this.copiedData = null;
+        this._registry = createSimpleGraphRegistry();
     }
     get def() {
         return this._def;
     }
+    get registry() {
+        return this._registry;
+    }
     setRegistry(registry) {
-        this.registry = registry;
+        this._registry = registry;
+        this.emit("registryChanged", { registry });
     }
     async load(def) {
         this._def = { nodes: [...def.nodes], edges: [...def.edges] };
@@ -920,30 +925,20 @@ class AbstractGraphRunner {
         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 using runner's setInputs method
-        // This ensures consistency and proper handling of staged inputs
-        for (const [nodeId, map] of Object.entries(currentInputs)) {
-            await this.setInputs(nodeId, map);
+        if (this.runMode) {
+            this.runMode = undefined;
+            this.emit("status", { running: false, runMode: undefined });
+        }
+    }
+    setRunMode(runMode) {
+        if (!this.engine) {
+            throw new Error("Cannot set run mode: engine not running");
         }
+        // Update engine run mode (this will update pause/resume state)
+        this.engine.setRunMode(runMode);
+        // Update local state and emit status event
+        this.runMode = runMode;
+        this.emit("status", { running: true, runMode: this.runMode });
     }
     getInputDefaults(def) {
         const out = {};
@@ -973,16 +968,16 @@ class AbstractGraphRunner {
         this.engine = undefined;
         this.runtime?.dispose();
         this.runtime = undefined;
-        if (this.runningKind) {
-            this.runningKind = undefined;
-            this.emit("status", { running: false, engine: undefined });
+        if (this.runMode) {
+            this.runMode = undefined;
+            this.emit("status", { running: false, runMode: undefined });
         }
     }
     isRunning() {
         return !!this.engine;
     }
-    getRunningEngine() {
-        return this.runningKind;
+    getRunMode() {
+        return this.runMode;
     }
     // Optional undo/redo support
     async undo() {
@@ -1077,7 +1072,7 @@ class LocalGraphRunner extends AbstractGraphRunner {
         if (!this.runtime)
             throw new Error("Runtime not built");
         // Use shared engine factory
-        this.engine = createEngine(this.runtime, opts);
+        this.engine = new UnifiedEngine(this.runtime, opts?.runMode);
         if (!this.engine)
             throw new Error("Failed to create engine");
         this.engine.on("value", (e) => this.emit("value", e));
@@ -1085,36 +1080,34 @@ class LocalGraphRunner extends AbstractGraphRunner {
         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 ?? "push";
-        this.emit("status", { running: true, engine: this.runningKind });
+        this.runMode = opts?.runMode ?? "manual";
+        this.emit("status", { running: true, runMode: this.runMode });
         for (const [nodeId, map] of Object.entries(this.stagedInputs)) {
             this.engine.setInputs(nodeId, map);
         }
     }
-    async step() {
-        const eng = this.engine;
-        if (eng && eng instanceof StepEngine)
-            await eng.step();
+    async computeNode(nodeId, options) {
+        if (this.engine)
+            await this.engine.computeNode(nodeId, options);
     }
-    async computeNode(nodeId) {
-        const eng = this.engine;
-        if (eng && eng instanceof PullEngine)
-            await eng.computeNode(nodeId);
+    async runFromHere(nodeId) {
+        if (this.engine)
+            await this.engine.runFromHere(nodeId);
     }
-    async flush() {
-        const eng = this.engine;
-        if (eng && eng instanceof BatchedEngine)
-            await eng.flush();
+    cancelNodeRuns(nodeIds) {
+        if (this.engine) {
+            this.engine.cancelNodeRuns(nodeIds);
+        }
     }
     getOutputs(def) {
         const out = {};
-        if (!this.runtime)
+        if (!this.engine)
             return out;
         for (const n of def.nodes) {
             const desc = this.registry.nodes.get(n.typeId);
             const handles = Object.keys(desc?.outputs ?? {});
             for (const h of handles) {
-                const v = this.runtime.getOutput(n.nodeId, h);
+                const v = this.engine.getOutput(n.nodeId, h);
                 if (v !== undefined) {
                     if (!out[n.nodeId])
                         out[n.nodeId] = {};
@@ -1147,19 +1140,8 @@ class LocalGraphRunner extends AbstractGraphRunner {
         return out;
     }
     triggerExternal(nodeId, event, options) {
-        // Handle dry option: pause runtime before triggering, resume after
-        const wasPaused = this.runtime?.isPaused() ?? false;
-        if (options?.dry && !wasPaused && this.runtime) {
-            this.runtime.pause();
-        }
-        try {
-            this.engine?.triggerExternal(nodeId, event);
-        }
-        finally {
-            if (options?.dry && !wasPaused && this.runtime) {
-                this.runtime.resume();
-            }
-        }
+        // Engine handles dry option via AbstractEngine
+        this.engine?.triggerExternal(nodeId, event, options);
     }
     // Batch update multiple inputs on a node and trigger a single run
     setInputs(nodeId, inputs, options) {
@@ -1175,40 +1157,23 @@ class LocalGraphRunner extends AbstractGraphRunner {
                 this.stagedInputs[nodeId][handle] = value;
             }
         }
-        // Handle dry option: pause runtime before setting inputs, resume after
-        const wasPaused = this.runtime?.isPaused() ?? false;
-        if (options?.dry && !wasPaused && this.runtime) {
-            this.runtime.pause();
-        }
-        try {
-            if (this.engine) {
-                this.engine.setInputs(nodeId, inputs);
-            }
-            else {
-                // Not running: emit a single synthetic value event per handle; UI will coalesce
-                console.warn("Engine does not exists");
-                for (const [handle, value] of Object.entries(inputs)) {
-                    this.emit("value", { nodeId, handle, value, io: "input" });
-                }
-            }
+        if (this.engine) {
+            // Engine handles dry option via AbstractEngine
+            this.engine.setInputs(nodeId, inputs, options);
         }
-        finally {
-            if (options?.dry && !wasPaused && this.runtime) {
-                this.runtime.resume();
+        else {
+            // Not running: emit a single synthetic value event per handle; UI will coalesce
+            // Note: dry option doesn't apply when engine doesn't exist (no execution to prevent)
+            console.warn("Engine does not exists");
+            for (const [handle, value] of Object.entries(inputs)) {
+                this.emit("value", { nodeId, handle, value, io: "input" });
             }
         }
     }
     copyOutputs(fromNodeId, toNodeId, options) {
-        if (!this.runtime)
-            return;
-        // Get outputs from source node
-        const fromNode = this.runtime.getNodeData(fromNodeId);
-        if (!fromNode?.outputs)
-            return;
-        // Copy outputs to target node using hydrate
-        // hydrate already pauses internally, so we don't need to handle dry option here
-        // reemit: !options?.dry means don't propagate downstream if dry mode
-        this.runtime.hydrate({ outputs: { [toNodeId]: { ...fromNode.outputs } } }, { reemit: !options?.dry });
+        if (this.engine) {
+            this.engine.copyOutputs(fromNodeId, toNodeId, options);
+        }
     }
     async snapshotFull() {
         const def = undefined; // UI will supply def/positions on download for local
@@ -1309,7 +1274,7 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         }
         this.registryFetching = true;
         try {
-            const desc = await client.describeRegistry();
+            const desc = await client.api.describeRegistry();
             // Register types
             for (const t of desc.types) {
                 if (t.options) {
@@ -1411,7 +1376,7 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         }
     }
     /**
-     * Build RuntimeApiClient config from RemoteExecutionBackend config.
+     * Build RemoteRuntimeClient config from RemoteExecutionBackend config.
      */
     buildClientConfig(backend) {
         if (backend.kind === "remote-http") {
@@ -1434,7 +1399,7 @@ class RemoteGraphRunner extends AbstractGraphRunner {
      */
     setupClientSubscriptions(client) {
         // Subscribe to transport status changes
-        // Convert RuntimeApiClient.TransportStatus to IGraphRunner.TransportStatus
+        // Convert RemoteRuntimeClient.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)
@@ -1484,7 +1449,7 @@ class RemoteGraphRunner extends AbstractGraphRunner {
                 }
             };
             // Create client with wrapped custom event handler
-            const client = new RuntimeApiClient(clientConfig, {
+            const client = new RemoteRuntimeClient(clientConfig, {
                 onCustomEvent: wrappedOnCustomEvent,
                 runnerId: this.runnerId,
             });
@@ -1534,7 +1499,7 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         // 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) => {
-            const eng = client.getEngine();
+            const eng = client.engine;
             if (!this.listenersBound) {
                 eng.on("invalidate", async (e) => {
                     if (e.reason === "registry-changed") {
@@ -1598,7 +1563,7 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         // Remote: forward update and await completion
         const client = await this.ensureClient();
         try {
-            await client.update(def, options);
+            await client.api.update(def, options);
             this.emit("invalidate", { reason: "graph-updated" });
             this.lastDef = def;
         }
@@ -1611,13 +1576,13 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         super.launch(def, opts);
         // Remote: build remotely then launch
         this.ensureClient().then(async (client) => {
-            await client.build(def);
+            await client.api.build(def);
             // Signal UI after remote build as well
             this.emit("invalidate", { reason: "graph-built" });
             this.lastDef = def;
             // Hydrate current remote inputs/outputs (including defaults) into cache
             try {
-                const snap = await client.snapshot();
+                const snap = await client.api.snapshot();
                 for (const [nodeId, map] of Object.entries(snap.inputs || {})) {
                     for (const [handle, value] of Object.entries(map || {})) {
                         this.valueCache.set(`${nodeId}.${handle}`, {
@@ -1646,9 +1611,9 @@ class RemoteGraphRunner extends AbstractGraphRunner {
     async createAndLaunchEngine(opts) {
         const client = await this.ensureClient();
         // Configure and launch engine on the backend
-        await client.launch(opts);
+        await client.api.launch(opts);
         // Get the remote engine proxy and wire up event listeners
-        const eng = client.getEngine();
+        const eng = client.engine;
         if (!this.listenersBound) {
             eng.on("value", (e) => {
                 this.valueCache.set(`${e.nodeId}.${e.handle}`, {
@@ -1664,11 +1629,11 @@ class RemoteGraphRunner extends AbstractGraphRunner {
             this.listenersBound = true;
         }
         this.engine = eng;
-        this.runningKind = opts?.engine ?? "push";
-        this.emit("status", { running: true, engine: this.runningKind });
+        this.runMode = opts?.runMode ?? "manual";
+        this.emit("status", { running: true, runMode: this.runMode });
         // Re-apply staged inputs using client.setInputs for consistency
         for (const [nodeId, map] of Object.entries(this.stagedInputs)) {
-            await eng.setInputs(nodeId, map).catch(() => {
+            await eng.setInputs(nodeId, map, undefined).catch(() => {
                 // Ignore errors during launch - inputs will be set when user calls setInputs
             });
         }
@@ -1691,45 +1656,27 @@ class RemoteGraphRunner extends AbstractGraphRunner {
             await this.createAndLaunchEngine(opts);
         });
     }
-    async switchEngine(opts) {
+    setRunMode(runMode) {
         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 using client.setInputs for consistency
-        for (const [nodeId, map] of Object.entries(currentInputs)) {
-            await eng.setInputs(nodeId, map).catch(() => {
-                // Ignore errors during engine switch - inputs will be set when user calls setInputs
-            });
+            throw new Error("Cannot set run mode: engine not running");
         }
+        // Update engine run mode (sends SetRunMode command to backend)
+        this.engine.setRunMode(runMode);
+        // Update local state and emit status event
+        this.runMode = runMode;
+        this.emit("status", { running: true, runMode: this.runMode });
     }
-    async step() {
+    async computeNode(nodeId, options) {
         const client = await this.ensureClient();
-        await client.step();
+        await client.engine.computeNode(nodeId, options);
     }
-    async computeNode(nodeId) {
+    async runFromHere(nodeId) {
         const client = await this.ensureClient();
-        await client.computeNode(nodeId);
+        await client.engine.runFromHere(nodeId);
     }
-    async flush() {
+    async cancelNodeRuns(nodeIds) {
         const client = await this.ensureClient();
-        await client.flush();
+        await client.engine.cancelNodeRuns(nodeIds);
     }
     async setInputs(nodeId, inputs, options) {
         // Update staged inputs (for getInputs to work correctly)
@@ -1745,7 +1692,7 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         }
         try {
             const client = await this.ensureClient();
-            await client.getEngine()?.setInputs(nodeId, inputs, options);
+            await client.engine.setInputs(nodeId, inputs, options);
         }
         catch (err) {
             // Emit synthetic events if connection fails
@@ -1757,20 +1704,20 @@ class RemoteGraphRunner extends AbstractGraphRunner {
     }
     async copyOutputs(fromNodeId, toNodeId, options) {
         const client = await this.ensureClient();
-        await client.getEngine()?.copyOutputs(fromNodeId, toNodeId, options);
+        await client.engine.copyOutputs(fromNodeId, toNodeId, options);
     }
     async triggerExternal(nodeId, event, options) {
         const client = await this.ensureClient();
-        await client.getEngine()?.triggerExternal(nodeId, event, options);
+        await client.engine.triggerExternal(nodeId, event, options);
     }
     async setViewport(viewport) {
         const client = await this.ensureClient();
-        await client.setViewport(viewport);
+        await client.api.setViewport(viewport);
     }
     async coerce(from, to, value) {
         const client = await this.ensureClient();
         try {
-            return await client.coerce(from, to, value);
+            return await client.api.coerce(from, to, value);
         }
         catch {
             return value;
@@ -1778,12 +1725,12 @@ class RemoteGraphRunner extends AbstractGraphRunner {
     }
     async setExtData(data) {
         const client = await this.ensureClient();
-        await client.setExtData(data);
+        await client.api.setExtData(data);
     }
     async commit(reason) {
         const client = await this.ensureClient();
         try {
-            const history = await client.commit(reason);
+            const history = await client.api.commit(reason);
             return history;
         }
         catch (err) {
@@ -1794,7 +1741,7 @@ class RemoteGraphRunner extends AbstractGraphRunner {
     async undo() {
         const client = await this.ensureClient();
         try {
-            return await client.undo();
+            return await client.api.undo();
         }
         catch {
             return false;
@@ -1803,7 +1750,7 @@ class RemoteGraphRunner extends AbstractGraphRunner {
     async redo() {
         const client = await this.ensureClient();
         try {
-            return await client.redo();
+            return await client.api.redo();
         }
         catch {
             return false;
@@ -1812,7 +1759,7 @@ class RemoteGraphRunner extends AbstractGraphRunner {
     async snapshotFull() {
         const client = await this.ensureClient();
         try {
-            return await client.snapshotFull();
+            return await client.api.snapshotFull();
         }
         catch {
             return { def: undefined, environment: {}, inputs: {}, outputs: {} };
@@ -1823,7 +1770,9 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         this.hydrateValueCache(payload, { dry: options?.dry });
         // Then sync with backend
         const client = await this.ensureClient();
-        await client.applySnapshotFull(payload, { skipBuild: options?.skipBuild });
+        await client.api.applySnapshotFull(payload, {
+            skipBuild: options?.skipBuild,
+        });
     }
     /**
      * Hydrates the local valueCache from a snapshot and emits value events.
@@ -1867,12 +1816,12 @@ class RemoteGraphRunner extends AbstractGraphRunner {
     async setEnvironment(env, opts) {
         // Use client if available, otherwise ensure client and then set environment
         if (this.client) {
-            await this.client.setEnvironment(env, opts);
+            await this.client.api.setEnvironment(env, opts);
         }
         else {
             try {
                 const client = await this.ensureClient();
-                await client.setEnvironment(env, opts);
+                await client.api.setEnvironment(env, opts);
             }
             catch {
                 // Silently fail if connection not available
@@ -1880,7 +1829,7 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         }
     }
     getEnvironment() {
-        // Interface requires sync return, but RuntimeApiClient.getEnvironment() is async.
+        // Interface requires sync return, but RemoteRuntimeClient.getEnvironment() is async.
         // Returns undefined synchronously; callers needing the actual value should:
         // - Use snapshotFull() which includes environment
         // - Call client.getEnvironment() directly if they have access to the client
@@ -3647,9 +3596,10 @@ function computeInvalidatedFromMetadata(metadata) {
     const maxInputTime = Math.max(...Object.values(lastInputAt));
     return maxInputTime > (lastSuccessAt ?? lastRunAt ?? 0);
 }
-function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVersion, children, }) {
+function WorkbenchProvider({ wb, runner, overrides, uiVersion, children, }) {
     const [nodeStatus, setNodeStatus] = useState({});
     const [edgeStatus, setEdgeStatus] = useState({});
+    const [runMode, setRunModeState] = useState("manual");
     const [events, setEvents] = useState([]);
     const clearEvents = useCallback(() => setEvents([]), []);
     const [systemErrors, setSystemErrors] = useState([]);
@@ -3714,6 +3664,24 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
     const graphUiTick = useWorkbenchGraphUiTick(wb);
     const versionTick = useWorkbenchVersionTick(runner);
     const valuesTick = versionTick + graphTick + graphUiTick;
+    // Keep local runMode state loosely in sync with runner status.
+    // - Seed from runner.getRunMode() on mount if available.
+    // - On status events, update only when a non-undefined runMode is reported,
+    //   so the UI preserves the last selected mode after stop().
+    useEffect(() => {
+        const initialMode = runner.getRunMode();
+        if (initialMode) {
+            setRunModeState(initialMode);
+        }
+        const offRunnerStatus = runner.on("status", (status) => {
+            if (status.runMode) {
+                setRunModeState(status.runMode);
+            }
+        });
+        return () => {
+            offRunnerStatus();
+        };
+    }, [runner]);
     // Def and IO values
     const inputsMap = useMemo(() => runner.getInputs(wb.def), [runner, wb, wb.def, valuesTick]);
     const inputDefaultsMap = useMemo(() => runner.getInputDefaults(wb.def), [runner, wb, wb.def, valuesTick]);
@@ -3722,7 +3690,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
         const out = {};
         // Local: runtimeTypeId is not stored; derive from typed wrapper in outputsMap
         for (const n of wb.def.nodes) {
-            const effectiveHandles = computeEffectiveHandles(n, registry);
+            const effectiveHandles = computeEffectiveHandles(n, wb.registry);
             const outputsDecl = effectiveHandles.outputs;
             const handles = Object.keys(outputsDecl);
             const cur = {};
@@ -3736,7 +3704,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
                 out[n.nodeId] = cur;
         }
         return out;
-    }, [wb, wb.def, outputsMap, registry]);
+    }, [wb, wb.def, outputsMap, wb.registry, registryVersion]);
     // Initialize nodes and derive invalidated status from persisted metadata
     useEffect(() => {
         const workbenchRuntimeState = wb.getRuntimeState() ?? { nodes: {} };
@@ -3814,7 +3782,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
                 const overrideSize = overrides?.getDefaultNodeSize?.(node.typeId) ?? undefined;
                 const size = estimateNodeSize({
                     node,
-                    registry,
+                    registry: wb.registry,
                     showValues: true,
                     overrides: overrideSize,
                 });
@@ -3832,7 +3800,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             curX += maxWidth + H_GAP;
         }
         wb.setPositions(pos, { commit: true, reason: "auto-layout" });
-    }, [wb, wb.def, registry, overrides?.getDefaultNodeSize]);
+    }, [wb, wb.def, wb.registry, registryVersion, overrides?.getDefaultNodeSize]);
     const updateEdgeType = useCallback((edgeId, typeId) => wb.updateEdgeType(edgeId, typeId), [wb]);
     const triggerExternal = useCallback((nodeId, event) => runner.triggerExternal(nodeId, event), [runner]);
     const getNodeDisplayName = useCallback((nodeId) => {
@@ -3842,9 +3810,9 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
         const node = wb.def.nodes.find((n) => n.nodeId === nodeId);
         if (!node)
             return nodeId;
-        const desc = registry.nodes.get(node.typeId);
+        const desc = wb.registry.nodes.get(node.typeId);
         return desc?.displayName || node.typeId;
-    }, [wb, registry]);
+    }, [wb, wb.registry, registryVersion]);
     const setNodeName = useCallback((nodeId, name) => {
         wb.setNodeName(nodeId, name, { commit: true, reason: "rename-node" });
     }, [wb]);
@@ -4160,6 +4128,9 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             }
             return add("runner", "stats")(s);
         });
+        const offWbRegistryChanged = wb.on("registryChanged", (evt) => {
+            setRegistryVersion((v) => v + 1);
+        });
         const offWbGraphChanged = wb.on("graphChanged", (event) => {
             // Clear validation errors for removed nodes
             if (event.change?.type === "removeNode") {
@@ -4316,10 +4287,8 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
         // Registry updates: swap registry and refresh graph validation/UI
         const offRunnerRegistry = runner.on("registry", async (newReg) => {
             try {
-                setRegistry(newReg);
                 wb.setRegistry(newReg);
                 // Increment registry version to trigger UI updates
-                setRegistryVersion((v) => v + 1);
                 // Trigger a graph update so the UI revalidates with new types/enums/nodes
                 try {
                     await runner.update(wb.def);
@@ -4390,6 +4359,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             offRunnerError();
             offRunnerInvalidate();
             offRunnerStats();
+            offWbRegistryChanged();
             offWbGraphChanged();
             offWbGraphUiChangedForLog();
             offWbGraphUiChanged();
@@ -4403,18 +4373,39 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             offFlowViewport();
             offWbRuntimeMetadataChanged();
         };
-    }, [runner, wb, setRegistry]);
-    const isRunning = useCallback(() => runner.isRunning(), [runner]);
-    const engineKind = useCallback(() => runner.getRunningEngine(), [runner]);
-    const start = useCallback((engine) => {
-        try {
-            runner.launch(wb.def, { engine });
-        }
-        catch { }
     }, [runner, wb]);
+    const isRunning = useCallback(() => runner.isRunning(), [runner]);
+    const getRunMode = useCallback(() => runner.getRunMode(), [runner]);
     const stop = useCallback(() => runner.stop(), [runner]);
-    const step = useCallback(() => runner.step(), [runner]);
-    const flush = useCallback(() => runner.flush(), [runner]);
+    // Run mode actions
+    const setRunMode = useCallback((mode) => {
+        if (mode === runMode)
+            return;
+        const wasRunning = runner.isRunning();
+        if (wasRunning) {
+            // Use setRunMode to change run mode without rebuilding
+            try {
+                runner.setRunMode(mode);
+                setRunModeState(mode);
+            }
+            catch (err) {
+                console.error("Failed to set run mode:", err);
+            }
+        }
+        else {
+            // Just update state if not running (will be applied on next launch)
+            setRunModeState(mode);
+        }
+    }, [runMode, runner]);
+    const runNodeAction = useCallback(async (nodeId) => {
+        await runner.computeNode(nodeId);
+    }, [runner]);
+    const runFromHereAction = useCallback(async (nodeId) => {
+        await runner.runFromHere(nodeId);
+    }, [runner]);
+    const abortNodeAction = useCallback((nodeId) => {
+        runner.cancelNodeRuns([nodeId]);
+    }, [runner]);
     const validationByNode = useMemo(() => {
         const inputs = {};
         const outputs = {};
@@ -4481,8 +4472,6 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
     const value = useMemo(() => ({
         wb,
         runner,
-        registry,
-        setRegistry,
         selectedNodeId,
         selectedEdgeId,
         setSelection,
@@ -4508,11 +4497,13 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
         removeRegistryError,
         removeInputValidationError,
         isRunning,
-        engineKind,
-        start,
+        getRunMode,
         stop,
-        step,
-        flush,
+        runMode,
+        setRunMode,
+        runNode: runNodeAction,
+        runFromHere: runFromHereAction,
+        abortNode: abortNodeAction,
         runAutoLayout,
         updateEdgeType,
         triggerExternal,
@@ -4524,8 +4515,6 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
     }), [
         wb,
         runner,
-        registry,
-        setRegistry,
         selectedNodeId,
         selectedEdgeId,
         setSelection,
@@ -4550,11 +4539,13 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
         events,
         clearEvents,
         isRunning,
-        engineKind,
-        start,
+        getRunMode,
         stop,
-        step,
-        flush,
+        runMode,
+        setRunMode,
+        runNodeAction,
+        runFromHereAction,
+        abortNodeAction,
         runAutoLayout,
         wb,
         runner,
@@ -4572,7 +4563,7 @@ function IssueBadge({ level, title, size = 12, className, }) {
     return (jsx("button", { type: "button", className: `inline-flex items-center justify-center shrink-0 ${colorClass} ${className ?? ""}`, title: title, style: { width: size, height: size }, children: level === "error" ? (jsx(XCircleIcon, { size: size, weight: "fill" })) : (jsx(WarningCircleIcon, { size: size, weight: "fill" })) }));
 }
 
-function DefaultNodeHeader({ id, typeId, validation, right, showId, onInvalidate, }) {
+function DefaultNodeHeader({ id, typeId, validation, right, showId, }) {
     const ctx = useWorkbenchContext();
     const [isEditing, setIsEditing] = React.useState(false);
     const [editValue, setEditValue] = React.useState("");
@@ -4587,21 +4578,9 @@ function DefaultNodeHeader({ id, typeId, validation, right, showId, onInvalidate
         const node = ctx.wb.def.nodes.find((n) => n.nodeId === id);
         if (!node)
             return id;
-        const desc = ctx.registry.nodes.get(node.typeId);
+        const desc = ctx.wb.registry.nodes.get(node.typeId);
         return desc?.displayName || node.typeId;
     }, [ctx, id, typeId]);
-    const handleInvalidate = React.useCallback(() => {
-        try {
-            if (onInvalidate)
-                return onInvalidate();
-            const kind = ctx.engineKind?.();
-            if (kind === "pull")
-                ctx.runner.computeNode(id);
-            else
-                ctx.triggerExternal?.(id, { type: "invalidate" });
-        }
-        catch { }
-    }, [ctx, id, onInvalidate]);
     const handleDoubleClick = React.useCallback((e) => {
         // Only allow editing if typeId is provided (enables renaming)
         if (!typeId)
@@ -4646,10 +4625,16 @@ function DefaultNodeHeader({ id, typeId, validation, right, showId, onInvalidate
     return (jsxs("div", { className: "flex items-center justify-center px-2 border-b border-solid border-gray-500 dark:border-gray-400 text-gray-600 dark:text-gray-300", style: {
             maxHeight: NODE_HEADER_HEIGHT_PX,
             minHeight: NODE_HEADER_HEIGHT_PX,
-        }, children: [isEditing ? (jsx("input", { ref: inputRef, type: "text", value: editValue, onChange: (e) => setEditValue(e.target.value), onBlur: handleSave, onKeyDown: handleKeyDown, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), className: "flex-1 h-full text-sm bg-transparent border border-blue-500 rounded px-1 outline-none wb-nodrag", style: { lineHeight: `${NODE_HEADER_HEIGHT_PX}px` } })) : (jsx("strong", { className: `react-flow__node-title flex-1 h-full text-sm select-none truncate ${typeId ? "cursor-text" : ""}`, style: { lineHeight: `${NODE_HEADER_HEIGHT_PX}px` }, onDoubleClick: handleDoubleClick, title: typeId ? "Double-click to rename" : undefined, children: displayName })), jsxs("div", { className: "flex items-center gap-1", children: [jsx("button", { className: "w-4 h-4 border border-gray-400 rounded text-[10px] leading-3 flex items-center justify-center", title: "Invalidate and re-run", onClick: (e) => {
-                            e.stopPropagation();
-                            handleInvalidate();
-                        }, children: jsx(ArrowClockwiseIcon, { size: 10 }) }), right, validation.issues && validation.issues.length > 0 && (jsx(IssueBadge, { level: validation.issues.some((i) => i.level === "error")
+        }, children: [isEditing ? (jsx("input", { ref: inputRef, type: "text", value: editValue, onChange: (e) => setEditValue(e.target.value), onBlur: handleSave, onKeyDown: handleKeyDown, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), className: "flex-1 h-full text-sm bg-transparent border border-blue-500 rounded px-1 outline-none wb-nodrag", style: { lineHeight: `${NODE_HEADER_HEIGHT_PX}px` } })) : (jsx("strong", { className: `react-flow__node-title flex-1 h-full text-sm select-none truncate ${typeId ? "cursor-text" : ""}`, style: { lineHeight: `${NODE_HEADER_HEIGHT_PX}px` }, onDoubleClick: handleDoubleClick, title: typeId ? "Double-click to rename" : undefined, children: displayName })), jsxs("div", { className: "flex items-center gap-1", children: [ctx.runMode === "manual" && (jsxs(Fragment, { children: [jsx("button", { onClick: (e) => {
+                                    e.stopPropagation();
+                                    ctx.abortNode(id);
+                                }, className: "w-4 h-4 flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 rounded text-gray-600 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400 transition-colors", title: "Abort node", children: jsx(StopIcon, { size: 10, weight: "fill" }) }), jsx("button", { onClick: (e) => {
+                                    e.stopPropagation();
+                                    void ctx.runFromHere(id);
+                                }, className: "w-4 h-4 flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 rounded text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors", title: "Run from here", children: jsx(PlayIcon, { size: 10, weight: "fill" }) }), jsx("button", { onClick: (e) => {
+                                    e.stopPropagation();
+                                    void ctx.runNode(id);
+                                }, className: "w-4 h-4 flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 rounded text-gray-600 dark:text-gray-400 hover:text-green-600 dark:hover:text-green-400 transition-colors", title: "Run node", children: jsx(Circle, { size: 10, weight: "fill" }) })] })), right, validation.issues && validation.issues.length > 0 && (jsx(IssueBadge, { level: validation.issues.some((i) => i.level === "error")
                             ? "error"
                             : "warning", size: 12, className: "w-3 h-3", title: validation.issues
                             .map((v) => `${v.code}: ${v.message}`)
@@ -4803,7 +4788,7 @@ const DefaultEdge = React.memo(function DefaultEdge({ id, sourceX, sourceY, targ
     return (jsx(BaseEdge, { id: id, path: edgePath, style: style, markerEnd: markerEnd }));
 });
 
-function createNodeContextMenuHandlers(nodeId, wb, runner, registry, outputsMap, outputTypesMap, onClose, getDefaultNodeSize, onCopyResult) {
+function createNodeContextMenuHandlers(nodeId, wb, runner, registry, outputsMap, outputTypesMap, onClose, getDefaultNodeSize, onCopyResult, runNode, runFromHere) {
     return {
         onDelete: () => {
             wb.removeNode(nodeId, { commit: true });
@@ -4823,13 +4808,24 @@ function createNodeContextMenuHandlers(nodeId, wb, runner, registry, outputsMap,
             });
             onClose();
         },
-        onRunPull: async () => {
-            try {
-                await runner.computeNode(nodeId);
+        onRunNode: runNode
+            ? async () => {
+                try {
+                    await runNode(nodeId);
+                }
+                catch { }
+                onClose();
             }
-            catch { }
-            onClose();
-        },
+            : undefined,
+        onRunFromHere: runFromHere
+            ? async () => {
+                try {
+                    await runFromHere(nodeId);
+                }
+                catch { }
+                onClose();
+            }
+            : undefined,
         onBake: async (handleId) => {
             const nodePosition = wb.getPositions()[nodeId] || { x: 0, y: 0 };
             const typeId = outputTypesMap?.[nodeId]?.[handleId];
@@ -5046,7 +5042,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
             return String(value ?? "");
         }
     };
-    const { wb, registry, selectedNodeId, selectedEdgeId, inputsMap, inputDefaultsMap, outputsMap, outputTypesMap, nodeStatus, edgeStatus, validationByNode, validationByEdge, validationGlobal, valuesTick, updateEdgeType, systemErrors, registryErrors, inputValidationErrors, clearSystemErrors, clearRegistryErrors, clearInputValidationErrors, removeSystemError, removeRegistryError, removeInputValidationError, } = useWorkbenchContext();
+    const { wb, registryVersion, selectedNodeId, selectedEdgeId, inputsMap, inputDefaultsMap, outputsMap, outputTypesMap, nodeStatus, edgeStatus, validationByNode, validationByEdge, validationGlobal, valuesTick, updateEdgeType, systemErrors, registryErrors, inputValidationErrors, clearSystemErrors, clearRegistryErrors, clearInputValidationErrors, removeSystemError, removeRegistryError, removeInputValidationError, } = useWorkbenchContext();
     const nodeValidationIssues = validationByNode.issues;
     const edgeValidationIssues = validationByEdge.issues;
     const nodeValidationHandles = validationByNode;
@@ -5055,7 +5051,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
     const selectedEdge = wb.def.edges.find((e) => e.id === selectedEdgeId);
     // Use computeEffectiveHandles to merge registry defaults with dynamically resolved handles
     const effectiveHandles = selectedNode
-        ? computeEffectiveHandles(selectedNode, registry)
+        ? computeEffectiveHandles(selectedNode, wb.registry)
         : { inputs: {}, outputs: {}};
     const inputHandles = Object.entries(effectiveHandles.inputs)
         .filter(([k]) => !isInputPrivate(effectiveHandles.inputs, k))
@@ -5182,7 +5178,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
             setDrafts(nextDrafts);
         if (!shallowEqual(originals, nextOriginals))
             setOriginals(nextOriginals);
-    }, [selectedNodeId, selectedNode, registry, valuesTick]);
+    }, [selectedNodeId, selectedNode, wb.registry, registryVersion, valuesTick]);
     const widthClass = debug ? "w-[480px]" : "w-[320px]";
     const deleteEdgeById = (edgeId) => {
         if (!edgeId)
@@ -5202,7 +5198,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                                         const v = e.target.value;
                                                         const next = v === "" ? undefined : v;
                                                         updateEdgeType(selectedEdge.id, next);
-                                                    }, children: [jsx("option", { value: "", children: "(infer from source)" }), Array.from(registry.types.keys()).map((tid) => (jsx("option", { value: tid, children: tid }, tid)))] })] })] }), selectedEdgeValidation.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: selectedEdgeValidation.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}` }), 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) => {
+                                                    }, children: [jsx("option", { value: "", children: "(infer from source)" }), Array.from(wb.registry.types.keys()).map((tid) => (jsx("option", { value: tid, children: tid }, tid)))] })] })] }), selectedEdgeValidation.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: selectedEdgeValidation.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}` }), jsx("button", { className: "ml-2 text-[10px] px-1 py-[2px] border border-red-300 rounded text-red-700 hover:bg-red-50", onClick: (e) => {
                                                             e.stopPropagation();
                                                             deleteEdgeById(selectedEdge.id);
                                                         }, title: "Delete this edge", children: "Delete edge" })] }, i))) })] }))] })) : (jsxs("div", { children: [selectedNode && (jsxs("div", { className: "mb-2", children: [jsxs("div", { children: ["Node: ", selectedNode.nodeId] }), jsxs("div", { children: ["Type: ", selectedNode.typeId] }), !!selectedNodeStatus?.activeRuns &&
@@ -5272,7 +5268,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                                                     setOriginals((o) => ({ ...o, [h]: display }));
                                                                 }, ...commonProps, children: [jsx("option", { value: "", children: placeholder
                                                                             ? `Default: ${placeholder}`
-                                                                            : "(select)" }), registry.enums
+                                                                            : "(select)" }), wb.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: 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 select-text", placeholder: placeholder
                                                                     ? `Default: ${placeholder}`
@@ -5411,7 +5407,7 @@ function DefaultContextMenu({ open, clientPos, handlers, registry, nodeIds, enab
                 !handlers.onRedo && jsx("div", { className: "h-px bg-gray-200 my-1" }), jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Add Node", " ", jsxs("span", { className: "text-gray-500 font-normal", children: ["(", totalCount, ")"] })] }), jsx("div", { className: "px-2 pb-1", children: jsx("input", { ref: inputRef, type: "text", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Filter nodes...", className: "w-full border border-gray-300 rounded px-2 py-1 text-sm outline-none focus:border-gray-400 select-text", onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onWheel: (e) => e.stopPropagation() }) }), jsx("div", { className: "max-h-60 overflow-auto", children: totalCount > 0 ? (renderTree(root)) : (jsx("div", { className: "px-3 py-2 text-gray-400", children: "No matches" })) })] }));
 }
 
-function NodeContextMenu({ open, clientPos, nodeId, handlers, canRunPull, bakeableOutputs, enableKeyboardShortcuts = true, keyboardShortcuts = {
+function NodeContextMenu({ open, clientPos, nodeId, handlers, bakeableOutputs, runMode, enableKeyboardShortcuts = true, keyboardShortcuts = {
     copy: "⌘/Ctrl + C",
     duplicate: "⌘/Ctrl + E",
     duplicateWithEdges: "⌘/Ctrl + Shift + E",
@@ -5454,7 +5450,7 @@ function NodeContextMenu({ open, clientPos, nodeId, handlers, canRunPull, bakeab
     return (jsxs("div", { ref: ref, tabIndex: -1, className: "fixed z-[1000] bg-white border border-gray-300 rounded-lg shadow-lg p-1 min-w-[180px] text-sm text-gray-700 select-none", style: { left: x, top: y }, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onWheel: (e) => e.stopPropagation(), onContextMenu: (e) => {
             e.preventDefault();
             e.stopPropagation();
-        }, children: [jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Node (", nodeId, ")"] }), jsx(ContextMenuButton, { label: "Delete", onClick: handlers.onDelete, shortcut: keyboardShortcuts.delete, enableKeyboardShortcuts: enableKeyboardShortcuts }), jsx(ContextMenuButton, { label: "Duplicate", onClick: handlers.onDuplicate, shortcut: keyboardShortcuts.duplicate, enableKeyboardShortcuts: enableKeyboardShortcuts }), jsx(ContextMenuButton, { label: "Duplicate with edges", onClick: handlers.onDuplicateWithEdges, shortcut: keyboardShortcuts.duplicateWithEdges, enableKeyboardShortcuts: enableKeyboardShortcuts }), canRunPull && (jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onRunPull, children: "Run (pull)" })), jsx("div", { className: "h-px bg-gray-200 my-1" }), jsx(ContextMenuButton, { label: "Copy", onClick: handlers.onCopy, shortcut: keyboardShortcuts.copy, enableKeyboardShortcuts: enableKeyboardShortcuts }), jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onCopyId, children: "Copy Node ID" }), bakeableOutputs.length > 0 && (jsxs(Fragment, { children: [jsx("div", { className: "h-px bg-gray-200 my-1" }), jsx("div", { className: "px-2 py-1 font-semibold text-gray-700", children: "Bake" }), bakeableOutputs.map((h) => (jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: () => handlers.onBake(h), children: ["Bake: ", h] }, h)))] }))] }));
+        }, children: [jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Node (", nodeId, ")"] }), jsx(ContextMenuButton, { label: "Delete", onClick: handlers.onDelete, shortcut: keyboardShortcuts.delete, enableKeyboardShortcuts: enableKeyboardShortcuts }), jsx(ContextMenuButton, { label: "Duplicate", onClick: handlers.onDuplicate, shortcut: keyboardShortcuts.duplicate, enableKeyboardShortcuts: enableKeyboardShortcuts }), jsx(ContextMenuButton, { label: "Duplicate with edges", onClick: handlers.onDuplicateWithEdges, shortcut: keyboardShortcuts.duplicateWithEdges, enableKeyboardShortcuts: enableKeyboardShortcuts }), runMode === "manual" && (jsxs(Fragment, { children: [handlers.onRunNode && (jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onRunNode, children: "Run node" })), handlers.onRunFromHere && (jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onRunFromHere, children: "Run from here" }))] })), jsx("div", { className: "h-px bg-gray-200 my-1" }), jsx(ContextMenuButton, { label: "Copy", onClick: handlers.onCopy, shortcut: keyboardShortcuts.copy, enableKeyboardShortcuts: enableKeyboardShortcuts }), jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onCopyId, children: "Copy Node ID" }), bakeableOutputs.length > 0 && (jsxs(Fragment, { children: [jsx("div", { className: "h-px bg-gray-200 my-1" }), jsx("div", { className: "px-2 py-1 font-semibold text-gray-700", children: "Bake" }), bakeableOutputs.map((h) => (jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: () => handlers.onBake(h), children: ["Bake: ", h] }, h)))] }))] }));
 }
 
 function SelectionContextMenu({ open, clientPos, handlers, enableKeyboardShortcuts = true, keyboardShortcuts = {
@@ -5541,7 +5537,7 @@ function useKeyboardShortcutToast() {
 }
 
 const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, getDefaultNodeSize }, ref) => {
-    const { wb, registry, inputsMap, inputDefaultsMap, outputsMap, outputTypesMap, valuesTick, nodeStatus, edgeStatus, validationByNode, validationByEdge, uiVersion, registryVersion, runner, engineKind, overrides, } = useWorkbenchContext();
+    const { wb, inputsMap, inputDefaultsMap, outputsMap, outputTypesMap, valuesTick, nodeStatus, edgeStatus, validationByNode, validationByEdge, uiVersion, registryVersion, runner, overrides, runNode, runFromHere, runMode, } = useWorkbenchContext();
     const nodeValidation = validationByNode;
     const edgeValidation = validationByEdge.errors;
     const [historyState, setHistoryState] = useState(wb.getHistory());
@@ -5619,7 +5615,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         // Build nodeTypes map using UI extension registry
         const custom = new Map(); // Include all types present in registry AND current graph to avoid timing issues
         const ids = new Set([
-            ...Array.from(registry.nodes.keys()),
+            ...Array.from(wb.registry.nodes.keys()),
             ...wb.def.nodes.map((n) => n.typeId),
         ]);
         for (const typeId of ids) {
@@ -5638,7 +5634,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         return { nodeTypes: types, resolveNodeType: resolver };
         // Include uiVersion to recompute when custom renderers are registered
         // Include registryVersion to recompute when registry enums/types change
-    }, [wb, registry, uiVersion, ui]);
+    }, [wb, wb.registry, registryVersion, uiVersion, ui]);
     const edgeTypes = useMemo(() => {
         // Use default edge renderer override if registered, otherwise use DefaultEdge
         const customEdgeRenderer = ui.getEdgeRenderer();
@@ -5664,7 +5660,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                 inputsWithDefaults[n.nodeId] = merged;
             }
         }
-        const out = toReactFlow(wb.def, wb.getPositions(), wb.getSizes(), registry, {
+        const out = toReactFlow(wb.def, wb.getPositions(), wb.getSizes(), wb.registry, {
             showValues,
             inputs: inputsWithDefaults,
             inputDefaults: inputDefaultsMap,
@@ -5931,7 +5927,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         });
         return () => off();
     }, [wb]);
-    const nodeIds = useMemo(() => Array.from(registry.nodes.keys()), [registry, registryVersion]);
+    const nodeIds = useMemo(() => Array.from(wb.registry.nodes.keys()), [wb.registry, registryVersion]);
     const defaultContextMenuHandlers = useMemo(() => {
         // Get storage from override or use workbench's internal storage
         const storage = overrides?.getCopiedDataStorage
@@ -5979,9 +5975,9 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                 get: () => wb.getCopiedData(),
                 set: (data) => wb.setCopiedData(data),
             };
-        const baseHandlers = createNodeContextMenuHandlers(nodeAtMenu, wb, runner, registry, outputsMap, outputTypesMap, onCloseNodeMenu, overrides?.getDefaultNodeSize, (data) => {
+        const baseHandlers = createNodeContextMenuHandlers(nodeAtMenu, wb, runner, wb.registry, outputsMap, outputTypesMap, onCloseNodeMenu, overrides?.getDefaultNodeSize, (data) => {
             storage.set(data);
-        });
+        }, runNode, runFromHere);
         if (overrides?.getNodeContextMenuHandlers) {
             return overrides.getNodeContextMenuHandlers(wb, nodeAtMenu, baseHandlers);
         }
@@ -5990,7 +5986,8 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         nodeAtMenu,
         wb,
         runner,
-        registry,
+        wb.registry,
+        registryVersion,
         outputsMap,
         outputTypesMap,
         onCloseNodeMenu,
@@ -5998,12 +5995,11 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         overrides?.getNodeContextMenuHandlers,
         overrides?.getCopiedDataStorage,
     ]);
-    const canRunPull = useMemo(() => engineKind()?.toString() === "pull", [engineKind]);
     const bakeableOutputs = useMemo(() => {
         if (!nodeAtMenu)
             return [];
-        return getBakeableOutputs(nodeAtMenu, wb, registry, outputTypesMap);
-    }, [nodeAtMenu, wb, registry, outputTypesMap]);
+        return getBakeableOutputs(nodeAtMenu, wb, wb.registry, outputTypesMap);
+    }, [nodeAtMenu, wb, wb.registry, registryVersion, outputTypesMap]);
     // Keyboard shortcuts configuration
     const enableKeyboardShortcuts = overrides?.enableKeyboardShortcuts !== false; // Default to true
     const keyboardShortcuts = overrides?.keyboardShortcuts || {
@@ -6199,29 +6195,28 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                         if (savedViewport) {
                             inst.setViewport(lod.clone(savedViewport));
                         }
-                    }, onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, onMoveEnd: onMoveEnd, deleteKeyCode: ["Backspace", "Delete"], proOptions: { hideAttribution: true }, noDragClassName: "wb-nodrag", noWheelClassName: "wb-nowheel", noPanClassName: "wb-nopan", children: [BackgroundRenderer ? (jsx(BackgroundRenderer, {})) : (jsx(Background, { id: "workbench-canvas-background", variant: BackgroundVariant.Dots, gap: 12, size: 1 })), MinimapRenderer ? jsx(MinimapRenderer, {}) : jsx(MiniMap, {}), ControlsRenderer ? jsx(ControlsRenderer, {}) : jsx(Controls, {}), DefaultContextMenuRenderer ? (jsx(DefaultContextMenuRenderer, { open: menuOpen, clientPos: menuPos, handlers: defaultContextMenuHandlers, registry: registry, nodeIds: nodeIds, ...(enableKeyboardShortcuts !== false
+                    }, onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, onMoveEnd: onMoveEnd, deleteKeyCode: ["Backspace", "Delete"], proOptions: { hideAttribution: true }, noDragClassName: "wb-nodrag", noWheelClassName: "wb-nowheel", noPanClassName: "wb-nopan", children: [BackgroundRenderer ? (jsx(BackgroundRenderer, {})) : (jsx(Background, { id: "workbench-canvas-background", variant: BackgroundVariant.Dots, gap: 12, size: 1 })), MinimapRenderer ? jsx(MinimapRenderer, {}) : jsx(MiniMap, {}), ControlsRenderer ? jsx(ControlsRenderer, {}) : jsx(Controls, {}), DefaultContextMenuRenderer ? (jsx(DefaultContextMenuRenderer, { open: menuOpen, clientPos: menuPos, handlers: defaultContextMenuHandlers, registry: wb.registry, nodeIds: nodeIds, ...(enableKeyboardShortcuts !== false
                                 ? { enableKeyboardShortcuts, keyboardShortcuts }
-                                : {}) })) : (jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, handlers: defaultContextMenuHandlers, registry: registry, nodeIds: nodeIds, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })), !!nodeAtMenu &&
+                                : {}) })) : (jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, handlers: defaultContextMenuHandlers, registry: wb.registry, nodeIds: nodeIds, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })), !!nodeAtMenu &&
                             nodeContextMenuHandlers &&
-                            (NodeContextMenuRenderer ? (jsx(NodeContextMenuRenderer, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, handlers: nodeContextMenuHandlers, canRunPull: canRunPull, bakeableOutputs: bakeableOutputs, ...(enableKeyboardShortcuts !== false
+                            (NodeContextMenuRenderer ? (jsx(NodeContextMenuRenderer, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, handlers: nodeContextMenuHandlers, bakeableOutputs: bakeableOutputs, runMode: runMode, wb: wb, ...(enableKeyboardShortcuts !== false
                                     ? { enableKeyboardShortcuts, keyboardShortcuts }
-                                    : {}) })) : (jsx(NodeContextMenu, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, handlers: nodeContextMenuHandlers, canRunPull: canRunPull, bakeableOutputs: bakeableOutputs, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts }))), selectionMenuOpen &&
+                                    : {}) })) : (jsx(NodeContextMenu, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, handlers: nodeContextMenuHandlers, bakeableOutputs: bakeableOutputs, runMode: runMode }))), selectionMenuOpen &&
                             selectionMenuPos &&
                             (SelectionContextMenuRenderer ? (jsx(SelectionContextMenuRenderer, { open: selectionMenuOpen, clientPos: selectionMenuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })) : (jsx(SelectionContextMenu, { open: selectionMenuOpen, clientPos: selectionMenuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })))] }) }), toast && (jsx(KeyboardShortcutToast, { message: toast.message, onClose: hideToast }, toast.id))] }));
 });
 
-function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, example, onExampleChange, engine, onEngineChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, overrides, onInit, onChange, }) {
-    const { wb, runner, registry, selectedNodeId, runAutoLayout } = useWorkbenchContext();
+function WorkbenchStudioCanvas({ autoScroll, onAutoScrollChange, example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, overrides, onInit, onChange, }) {
+    const { wb, runner, selectedNodeId, runAutoLayout, runMode, setRunMode, isRunning, } = useWorkbenchContext();
     const [transportStatus, setTransportStatus] = useState({
         state: "local",
     });
     const selectedNode = wb.def.nodes.find((n) => n.nodeId === selectedNodeId);
     const effectiveHandles = selectedNode
-        ? computeEffectiveHandles(selectedNode, registry)
+        ? computeEffectiveHandles(selectedNode, wb.registry)
         : { inputs: {}, outputs: {}, inputDefaults: {} };
     const [exampleState, setExampleState] = useState(example ?? "");
-    const isGraphRunning = runner.isRunning();
-    const engineKind = runner.getRunningEngine();
+    const isGraphRunning = isRunning();
     // Render Start/Stop button based on transport and runner state
     const renderStartStopButton = useCallback(() => {
         // Check if transport is connecting/retrying
@@ -6237,14 +6232,11 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             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.def, {
-                        engine: kind,
+                        runMode,
                         invalidate: evt.shiftKey,
                     });
                 }
@@ -6252,12 +6244,10 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                     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]);
+            }, disabled: !canControl, title: !canControl
+                ? "Waiting for connection"
+                : `Start ${runMode === "manual" ? "manual" : "auto"} mode`, children: [jsx(PlayIcon, { size: 16, weight: "fill" }), jsx("span", { className: "font-medium ml-1", children: "Start" })] }));
+    }, [transportStatus, isGraphRunning, runner, runMode, wb]);
     const defaultExamples = useMemo(() => [
         {
             id: "simple",
@@ -6364,7 +6354,6 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         // - For remote backend, registry is automatically managed by RemoteGraphRunner
         if (backendKind === "local") {
             if (r) {
-                setRegistry(r);
                 wb.setRegistry(r);
             }
         }
@@ -6380,15 +6369,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         runAutoLayout();
         setExampleState(key);
         onExampleChange?.(key);
-    }, [
-        runner,
-        wb,
-        onExampleChange,
-        runAutoLayout,
-        examples,
-        setRegistry,
-        backendKind,
-    ]);
+    }, [runner, wb, onExampleChange, runAutoLayout, examples, backendKind]);
     const download$1 = useCallback(async () => {
         try {
             await download(wb, runner);
@@ -6448,8 +6429,6 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         return () => off();
     }, [runner, backendKind]);
     useEffect(() => {
-        if (!engine)
-            return;
         if (isGraphRunning)
             return;
         // Only auto-launch for local backend; require explicit Start for remote
@@ -6458,12 +6437,12 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         if (!wb.def.nodes || wb.def.nodes.length === 0)
             return;
         try {
-            runner.launch(wb.def, { engine: engine });
+            runner.launch(wb.def, { runMode });
         }
         catch {
             // ignore
         }
-    }, [engine, runner, isGraphRunning, wb, backendKind]);
+    }, [runMode, runner, isGraphRunning, wb, backendKind]);
     const baseSetInput = useCallback((handle, raw) => {
         if (!selectedNodeId)
             return;
@@ -6559,11 +6538,11 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             return overrides.setInput(baseSetInput, {
                 runner,
                 selectedNodeId,
-                registry,
+                registry: wb.registry,
             });
         }
         return baseSetInput;
-    }, [overrides, baseSetInput, runner, selectedNodeId, registry]);
+    }, [overrides, baseSetInput, runner, selectedNodeId, wb.registry]);
     const baseToString = useCallback((typeId, value) => {
         if (value === undefined || value === null)
             return "";
@@ -6571,7 +6550,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         if (isTypedOutput(value)) {
             return baseToString(getTypedOutputTypeId(value), getTypedOutputValue(value));
         }
-        const pre = preformatValueForDisplay(typeId, value, registry);
+        const pre = preformatValueForDisplay(typeId, value, wb.registry);
         if (pre !== undefined)
             return pre;
         if (typeof value === "object" &&
@@ -6587,7 +6566,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         }
         if (typeId && typeId.startsWith("enum:")) {
             const n = Number(value);
-            const label = registry.enums.get(typeId)?.valueToLabel.get(n);
+            const label = wb.registry.enums.get(typeId)?.valueToLabel.get(n);
             return label ?? String(n);
         }
         const round4 = (n) => Math.round(Number(n) * 10000) / 10000;
@@ -6617,54 +6596,34 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             return String(rounded);
         }
         return String(value);
-    }, [registry]);
+    }, [wb.registry]);
     const baseToElement = useCallback((typeId, value) => {
         return (jsx("span", { className: "ml-1 opacity-60", children: baseToString(typeId, value) }));
     }, [baseToString]);
     const toString = useMemo(() => {
         if (overrides?.toString)
-            return overrides.toString(baseToString, { registry });
+            return overrides.toString(baseToString, { registry: wb.registry });
         return baseToString;
-    }, [overrides, baseToString, registry]);
+    }, [overrides, baseToString, wb.registry]);
     // Optional: toElement (not currently consumed by core UI)
     // Consumers can access it by passing through their own node renderers.
     const toElement = useMemo(() => {
         if (overrides?.toElement)
-            return overrides.toElement(baseToElement, { registry });
+            return overrides.toElement(baseToElement, { registry: wb.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: [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;
-                            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;
-                                }
-                            }
-                            else {
-                                // Normal change when not running
-                                onEngineChange?.(kind);
+    }, [overrides, baseToElement, wb.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: [isGraphRunning ? (jsxs("span", { className: "ml-2 text-sm text-green-700", children: ["Running: ", runMode === "manual" ? "Manual" : "Auto"] })) : (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: runMode, onChange: async (e) => {
+                            const mode = e.target.value;
+                            if (mode !== runMode) {
+                                await setRunMode(mode);
                             }
-                        }, 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: download$1, 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 }) }), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: async () => {
+                        }, disabled: isGraphRunning, title: isGraphRunning
+                            ? "Stop before switching run mode"
+                            : "Select run mode", children: [jsx("option", { value: "manual", children: "Manual" }), jsx("option", { value: "auto", children: "Auto" })] }), 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: download$1, 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 }) }), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: async () => {
                             await downloadCanvasThumbnail(canvasContainerRef.current);
                         }, title: "Download Flow Thumbnail (SVG)", children: jsx(ImageIcon, { 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", ref: canvasContainerRef, 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, }) {
+function WorkbenchStudio({ 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());
     const [wb] = useState(() => new InMemoryWorkbench({ ui: new DefaultUIExtensionRegistry() }));
     // Store previous runner for cleanup
@@ -6734,7 +6693,7 @@ function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, bac
             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, overrides: overrides, onInit: onInit, onChange: onChange }) }));
+    return (jsx(WorkbenchProvider, { wb: wb, runner: runner, overrides: overrides, uiVersion: uiVersion, children: jsx(WorkbenchStudioCanvas, { setRegistry: setRegistry, autoScroll: autoScroll, onAutoScrollChange: onAutoScrollChange, example: example, onExampleChange: onExampleChange, backendKind: backendKind, onBackendKindChange: onBackendKindChangeWithDispose, 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 }) }));
 }
 
 export { AbstractWorkbench, CLIWorkbench, DefaultEdge, DefaultNode, DefaultNodeContent, DefaultNodeHeader, DefaultUIExtensionRegistry, InMemoryWorkbench, Inspector, LocalGraphRunner, NodeHandles, RemoteGraphRunner, WorkbenchCanvas, WorkbenchContext, WorkbenchProvider, WorkbenchStudio, captureCanvasThumbnail, computeEffectiveHandles, countVisibleHandles, createCopyHandler, createDefaultContextMenuHandlers, createHandleBounds, createHandleLayout, createNodeContextMenuHandlers, createNodeCopyHandler, createSelectionContextMenuHandlers, download, downloadCanvasThumbnail, estimateNodeSize, excludeViewportFromUIState, formatDataUrlAsLabel, formatDeclaredTypeSignature, getBakeableOutputs, getHandleBoundsX, getHandleBoundsY, getHandleClassName, getHandleLayoutY, getNodeBorderClassNames, isValidViewport, layoutNode, mergeUIState, preformatValueForDisplay, prettyHandle, resolveOutputDisplay, summarizeDeep, toReactFlow, upload, useQueryParamBoolean, useQueryParamString, useThrottledValue, useWorkbenchBridge, useWorkbenchContext, useWorkbenchGraphTick, useWorkbenchGraphUiTick, useWorkbenchVersionTick };