@bian-womp/spark-workbench 0.2.94 → 0.3.0

package/lib/esm/index.js

@@ -1,11 +1,11 @@
-import { generateId, createSimpleGraphRegistry, GraphBuilder, getTypedOutputValue, isTypedOutput, getInputTypeId, createEngine, StepEngine, PullEngine, BatchedEngine, getTypedOutputTypeId, isInputPrivate, offsetImportedPositions, 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() {
@@ -925,31 +925,21 @@ 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 = {};
         for (const n of def.nodes) {
@@ -978,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() {
@@ -1082,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));
@@ -1090,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] = {};
@@ -1152,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) {
@@ -1180,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
@@ -1314,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) {
@@ -1416,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") {
@@ -1439,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)
@@ -1489,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,
             });
@@ -1539,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") {
@@ -1603,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;
         }
@@ -1616,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}`, {
@@ -1651,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}`, {
@@ -1669,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
             });
         }
@@ -1696,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)
@@ -1750,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
@@ -1762,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;
@@ -1783,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) {
@@ -1799,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;
@@ -1808,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;
@@ -1817,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: {} };
@@ -1828,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.
@@ -1872,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
@@ -1885,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
@@ -3655,6 +3599,7 @@ function computeInvalidatedFromMetadata(metadata) {
 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([]);
@@ -3719,6 +3664,24 @@ function WorkbenchProvider({ wb, runner, overrides, uiVersion, children, }) {
     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]);
@@ -4412,16 +4375,37 @@ function WorkbenchProvider({ wb, runner, overrides, uiVersion, children, }) {
         };
     }, [runner, wb]);
     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 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 = {};
@@ -4513,11 +4497,13 @@ function WorkbenchProvider({ wb, runner, overrides, uiVersion, children, }) {
         removeRegistryError,
         removeInputValidationError,
         isRunning,
-        engineKind,
-        start,
+        getRunMode,
         stop,
-        step,
-        flush,
+        runMode,
+        setRunMode,
+        runNode: runNodeAction,
+        runFromHere: runFromHereAction,
+        abortNode: abortNodeAction,
         runAutoLayout,
         updateEdgeType,
         triggerExternal,
@@ -4553,11 +4539,13 @@ function WorkbenchProvider({ wb, runner, overrides, uiVersion, children, }) {
         events,
         clearEvents,
         isRunning,
-        engineKind,
-        start,
+        getRunMode,
         stop,
-        step,
-        flush,
+        runMode,
+        setRunMode,
+        runNodeAction,
+        runFromHereAction,
+        abortNodeAction,
         runAutoLayout,
         wb,
         runner,
@@ -4575,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("");
@@ -4593,18 +4581,6 @@ function DefaultNodeHeader({ id, typeId, validation, right, showId, onInvalidate
         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)
@@ -4649,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}`)
@@ -4806,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 });
@@ -4826,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];
@@ -5414,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",
@@ -5457,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 = {
@@ -5544,7 +5537,7 @@ function useKeyboardShortcutToast() {
 }
 
 const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, getDefaultNodeSize }, ref) => {
-    const { wb, 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());
@@ -5984,7 +5977,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
             };
         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);
         }
@@ -6002,7 +5995,6 @@ 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 [];
@@ -6207,15 +6199,15 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                                 ? { enableKeyboardShortcuts, keyboardShortcuts }
                                 : {}) })) : (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({ autoScroll, onAutoScrollChange, example, onExampleChange, engine, onEngineChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, overrides, onInit, onChange, }) {
-    const { wb, runner, 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",
     });
@@ -6224,8 +6216,7 @@ function WorkbenchStudioCanvas({ autoScroll, onAutoScrollChange, example, onExam
         ? 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
@@ -6241,14 +6232,11 @@ function WorkbenchStudioCanvas({ autoScroll, onAutoScrollChange, example, onExam
             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,
                     });
                 }
@@ -6256,12 +6244,10 @@ function WorkbenchStudioCanvas({ autoScroll, onAutoScrollChange, example, onExam
                     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",
@@ -6443,8 +6429,6 @@ function WorkbenchStudioCanvas({ autoScroll, onAutoScrollChange, example, onExam
         return () => off();
     }, [runner, backendKind]);
     useEffect(() => {
-        if (!engine)
-            return;
         if (isGraphRunning)
             return;
         // Only auto-launch for local backend; require explicit Start for remote
@@ -6453,12 +6437,12 @@ function WorkbenchStudioCanvas({ autoScroll, onAutoScrollChange, example, onExam
         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;
@@ -6628,38 +6612,18 @@ function WorkbenchStudioCanvas({ autoScroll, onAutoScrollChange, example, onExam
             return overrides.toElement(baseToElement, { registry: wb.registry });
         return baseToElement;
     }, [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: ", 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);
+    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
@@ -6729,7 +6693,7 @@ function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, bac
             runner.dispose();
         onBackendKindChange(v);
     }, [isGraphRunning]);
-    return (jsx(WorkbenchProvider, { wb: wb, runner: runner, 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 };