@bian-womp/spark-workbench 0.1.28 → 0.1.30

package/lib/esm/index.js

@@ -1,9 +1,9 @@
 import { GraphBuilder, StepEngine, HybridEngine, PullEngine, BatchedEngine, PushEngine, isTypedOutput, getTypedOutputValue, getTypedOutputTypeId, isInputPrivate, getInputTypeId, createSimpleGraphRegistry, createSimpleGraphDef, createAsyncGraphDef, createAsyncGraphRegistry, createProgressGraphDef, createProgressGraphRegistry, createValidationGraphDef, createValidationGraphRegistry, Registry } from '@bian-womp/spark-graph';
-import { RemoteEngine, HttpPollingTransport, WebSocketTransport, RemoteRunner } from '@bian-womp/spark-remote';
+import { HttpPollingTransport, WebSocketTransport, RemoteRunner } from '@bian-womp/spark-remote';
 import React, { useCallback, useState, useEffect, useMemo, createContext, useContext, useRef, useImperativeHandle } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { XCircleIcon, WarningCircleIcon, PlugsConnectedIcon, ClockClockwiseIcon, WifiHighIcon, WifiSlashIcon } from '@phosphor-icons/react';
-import ReactFlow, { Handle, Position, useReactFlow, applyNodeChanges, applyEdgeChanges, Background, MiniMap, Controls } from 'reactflow';
+import ReactFlow, { Handle, Position, useReactFlow, Background, MiniMap, Controls } from 'reactflow';
 import cx from 'classnames';
 
 class DefaultUIExtensionRegistry {
@@ -317,104 +317,295 @@ class CLIWorkbench {
     }
 }
 
-class GraphRunner {
+class AbstractGraphRunner {
     constructor(registry, backend) {
         this.registry = registry;
+        this.backend = backend;
         this.listeners = new Map();
         this.stagedInputs = {};
-        this.backend = { kind: "local" };
-        if (backend)
-            this.backend = backend;
-        // Emit initial transport status
-        if (this.backend.kind === "local")
-            this.emit("transport", { state: "local" });
     }
-    build(def) {
-        if (this.backend.kind === "local") {
-            const builder = new GraphBuilder(this.registry);
-            this.runtime = builder.build(def);
-            // Signal UI that freshly built graph should be considered invalidated
-            this.emit("invalidate", { reason: "graph-built" });
+    launch(def, opts) {
+        if (this.engine) {
+            throw new Error("Engine already running. Stop the current engine first.");
+        }
+    }
+    setInput(nodeId, handle, value) {
+        if (!this.stagedInputs[nodeId])
+            this.stagedInputs[nodeId] = {};
+        this.stagedInputs[nodeId][handle] = value;
+        if (this.engine) {
+            this.engine.setInput(nodeId, handle, value);
+        }
+        else {
+            // Emit a value event so UI updates even when engine isn't running
+            this.emit("value", { nodeId, handle, value, io: "input" });
+        }
+    }
+    // Batch update multiple inputs on a node and trigger a single run
+    setInputs(nodeId, inputs) {
+        if (!inputs)
             return;
+        if (!this.stagedInputs[nodeId])
+            this.stagedInputs[nodeId] = {};
+        Object.assign(this.stagedInputs[nodeId], inputs);
+        if (this.engine) {
+            // Running: set all inputs
+            this.engine.setInputs(nodeId, inputs);
         }
-        // Remote: no-op here; build is performed on remote server during launch
+        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" });
+            }
+        }
+    }
+    async whenIdle() {
+        await this.engine?.whenIdle();
+    }
+    on(event, handler) {
+        if (!this.listeners.has(event))
+            this.listeners.set(event, new Set());
+        const set = this.listeners.get(event);
+        set.add(handler);
+        return () => set.delete(handler);
+    }
+    emit(event, payload) {
+        const set = this.listeners.get(event);
+        if (set)
+            for (const h of Array.from(set))
+                h(payload);
+    }
+    dispose() {
+        this.engine?.dispose();
+        this.engine = undefined;
+        this.runtime?.dispose();
+        this.runtime = undefined;
+        if (this.runningKind) {
+            this.runningKind = undefined;
+            this.emit("status", { running: false, engine: undefined });
+        }
+    }
+    isRunning() {
+        return !!this.engine;
+    }
+    getRunningEngine() {
+        return this.runningKind;
+    }
+}
+
+class LocalGraphRunner extends AbstractGraphRunner {
+    constructor(registry) {
+        super(registry, { kind: "local" });
+        this.emit("transport", { state: "local" });
+    }
+    build(def) {
+        const builder = new GraphBuilder(this.registry);
+        this.runtime = builder.build(def);
+        // Signal UI that freshly built graph should be considered invalidated
+        this.emit("invalidate", { reason: "graph-built" });
     }
     update(def) {
-        if (this.backend.kind === "local") {
-            if (!this.runtime)
-                return;
-            // Prevent mid-run churn while wiring changes are applied
-            this.runtime.pause();
-            this.runtime.update(def, this.registry);
-            this.runtime.resume();
-            this.emit("invalidate", { reason: "graph-updated" });
+        if (!this.runtime)
             return;
+        // Prevent mid-run churn while wiring changes are applied
+        this.runtime.pause();
+        this.runtime.update(def, this.registry);
+        this.runtime.resume();
+        this.emit("invalidate", { reason: "graph-updated" });
+    }
+    launch(def, opts) {
+        super.launch(def, opts);
+        this.build(def);
+        if (!this.runtime)
+            throw new Error("Runtime not built");
+        const rt = this.runtime;
+        switch (opts.engine) {
+            case "push":
+                this.engine = new PushEngine(rt);
+                break;
+            case "batched":
+                this.engine = new BatchedEngine(rt, {
+                    flushIntervalMs: opts.batched?.flushIntervalMs ?? 0,
+                });
+                break;
+            case "pull":
+                this.engine = new PullEngine(rt);
+                break;
+            case "hybrid":
+                this.engine = new HybridEngine(rt, {
+                    windowMs: opts.hybrid?.windowMs ?? 250,
+                    batchThreshold: opts.hybrid?.batchThreshold ?? 3,
+                });
+                break;
+            case "step":
+                this.engine = new StepEngine(rt);
+                break;
+            default:
+                throw new Error("Unknown engine kind");
         }
+        this.engine.on("value", (e) => this.emit("value", e));
+        this.engine.on("error", (e) => this.emit("error", e));
+        this.engine.on("invalidate", (e) => this.emit("invalidate", e));
+        this.engine.on("stats", (e) => this.emit("stats", e));
+        this.engine.launch();
+        this.runningKind = opts.engine;
+        this.emit("status", { running: true, engine: this.runningKind });
+        for (const [nodeId, map] of Object.entries(this.stagedInputs)) {
+            this.engine.setInputs(nodeId, map);
+        }
+    }
+    async step() {
+        const eng = this.engine;
+        if (eng instanceof StepEngine)
+            await eng.step();
+    }
+    async computeNode(nodeId) {
+        const eng = this.engine;
+        if (eng instanceof PullEngine)
+            await eng.computeNode(nodeId);
+    }
+    flush() {
+        const eng = this.engine;
+        if (eng instanceof BatchedEngine)
+            eng.flush();
+    }
+    getOutputs(def) {
+        const out = {};
+        if (!this.runtime)
+            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);
+                if (v !== undefined) {
+                    if (!out[n.nodeId])
+                        out[n.nodeId] = {};
+                    out[n.nodeId][h] = v;
+                }
+            }
+        }
+        return out;
+    }
+    getInputs(def) {
+        const out = {};
+        for (const n of def.nodes) {
+            const staged = this.stagedInputs[n.nodeId] ?? {};
+            const runtimeInputs = this.runtime
+                ? this.runtime.getNodeData?.(n.nodeId)?.inputs ?? {}
+                : {};
+            if (this.isRunning()) {
+                out[n.nodeId] = runtimeInputs;
+            }
+            else {
+                const merged = { ...runtimeInputs, ...staged };
+                if (Object.keys(merged).length > 0)
+                    out[n.nodeId] = merged;
+            }
+        }
+        return out;
+    }
+    dispose() {
+        super.dispose();
+        this.runtime = undefined;
+        this.emit("transport", { state: "local" });
+    }
+}
+
+class RemoteGraphRunner extends AbstractGraphRunner {
+    constructor(registry, backend) {
+        super(registry, backend);
+        this.valueCache = new Map();
+        this.listenersBound = false;
+        // Auto-handle registry-changed invalidations from remote
+        // We listen on invalidate and if reason matches, we rehydrate registry and emit a registry event
+        this.ensureRemoteRunner().then(async (runner) => {
+            const eng = runner.getEngine();
+            if (!this.listenersBound) {
+                eng.on("invalidate", async (e) => {
+                    if (e.reason === "registry-changed") {
+                        try {
+                            const deltas = Array.isArray(e.deltas) ? e.deltas : [];
+                            for (const d of deltas) {
+                                if (!d || typeof d !== "object")
+                                    continue;
+                                if (d.kind === "register-enum") {
+                                    this.registry.registerEnum({
+                                        id: d.id,
+                                        displayName: d.displayName,
+                                        options: d.options,
+                                        opts: d.opts,
+                                    });
+                                }
+                                else if (d.kind === "register-type") {
+                                    if (!this.registry.types.has(d.id)) {
+                                        this.registry.registerType({
+                                            id: d.id,
+                                            displayName: d.displayName,
+                                            validate: (_v) => true,
+                                        });
+                                    }
+                                }
+                                else if (d.kind === "register-node") {
+                                    if (!this.registry.nodes.has(d.desc?.id)) {
+                                        this.registry.registerNode({
+                                            id: String(d.desc?.id || ""),
+                                            categoryId: String(d.desc?.categoryId || "compute"),
+                                            displayName: d.desc?.displayName,
+                                            inputs: d.desc?.inputs || {},
+                                            outputs: d.desc?.outputs || {},
+                                            impl: () => { },
+                                        });
+                                    }
+                                }
+                            }
+                            this.emit("registry", this.registry);
+                            // Trigger update so validation/UI refreshes using last known graph
+                            try {
+                                if (this.lastDef)
+                                    this.update(this.lastDef);
+                            }
+                            catch {
+                                console.error("Failed to update graph definition after registry changed");
+                            }
+                        }
+                        catch {
+                            console.error("Failed to handle registry changed event");
+                        }
+                    }
+                });
+            }
+        });
+    }
+    build(def) {
+        console.warn("Unsupported operation for remote runner");
+    }
+    update(def) {
         // Remote: forward update; ignore errors (fire-and-forget)
-        void this.ensureRemote().then(async (rc) => {
+        this.ensureRemoteRunner().then(async (runner) => {
             try {
-                await rc.runner.update(def);
+                await runner.update(def);
                 this.emit("invalidate", { reason: "graph-updated" });
+                this.lastDef = def;
             }
             catch { }
         });
     }
     launch(def, opts) {
-        if (this.engine) {
-            throw new Error("Engine already running. Stop the current engine first.");
-        }
-        if (this.backend.kind === "local") {
-            this.build(def);
-            if (!this.runtime)
-                throw new Error("Runtime not built");
-            const rt = this.runtime;
-            switch (opts.engine) {
-                case "push":
-                    this.engine = new PushEngine(rt);
-                    break;
-                case "batched":
-                    this.engine = new BatchedEngine(rt, {
-                        flushIntervalMs: opts.batched?.flushIntervalMs ?? 0,
-                    });
-                    break;
-                case "pull":
-                    this.engine = new PullEngine(rt);
-                    break;
-                case "hybrid":
-                    this.engine = new HybridEngine(rt, {
-                        windowMs: opts.hybrid?.windowMs ?? 250,
-                        batchThreshold: opts.hybrid?.batchThreshold ?? 3,
-                    });
-                    break;
-                case "step":
-                    this.engine = new StepEngine(rt);
-                    break;
-                default:
-                    throw new Error("Unknown engine kind");
-            }
-            this.engine.on("value", (e) => this.emit("value", e));
-            this.engine.on("error", (e) => this.emit("error", e));
-            this.engine.on("invalidate", (e) => this.emit("invalidate", e));
-            this.engine.on("stats", (e) => this.emit("stats", e));
-            this.engine.launch();
-            this.runningKind = opts.engine;
-            this.emit("status", { running: true, engine: this.runningKind });
-            for (const [nodeId, map] of Object.entries(this.stagedInputs)) {
-                this.engine.setInputs(nodeId, map);
-            }
-            return;
-        }
+        super.launch(def, opts);
         // Remote: build remotely then launch
-        void this.ensureRemote().then(async (rc) => {
-            await rc.runner.build(def);
+        this.ensureRemoteRunner().then(async (runner) => {
+            await runner.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 rc.runner.snapshot();
+                const snap = await runner.snapshot();
                 for (const [nodeId, map] of Object.entries(snap.inputs || {})) {
                     for (const [handle, value] of Object.entries(map || {})) {
-                        rc.valueCache.set(`${nodeId}.${handle}`, {
+                        this.valueCache.set(`${nodeId}.${handle}`, {
                             io: "input",
                             value,
                         });
@@ -423,7 +614,7 @@ class GraphRunner {
                 }
                 for (const [nodeId, map] of Object.entries(snap.outputs || {})) {
                     for (const [handle, value] of Object.entries(map || {})) {
-                        rc.valueCache.set(`${nodeId}.${handle}`, {
+                        this.valueCache.set(`${nodeId}.${handle}`, {
                             io: "output",
                             value,
                         });
@@ -434,10 +625,10 @@ class GraphRunner {
             catch {
                 console.error("Failed to hydrate remote inputs/outputs");
             }
-            const eng = rc.runner.getEngine();
-            if (!rc.listenersBound) {
+            const eng = runner.getEngine();
+            if (!this.listenersBound) {
                 eng.on("value", (e) => {
-                    rc.valueCache.set(`${e.nodeId}.${e.handle}`, {
+                    this.valueCache.set(`${e.nodeId}.${e.handle}`, {
                         io: e.io,
                         value: e.value,
                         runtimeTypeId: e.runtimeTypeId,
@@ -447,7 +638,7 @@ class GraphRunner {
                 eng.on("error", (e) => this.emit("error", e));
                 eng.on("invalidate", (e) => this.emit("invalidate", e));
                 eng.on("stats", (e) => this.emit("stats", e));
-                rc.listenersBound = true;
+                this.listenersBound = true;
             }
             this.engine = eng;
             this.engine.launch();
@@ -458,85 +649,18 @@ class GraphRunner {
             }
         });
     }
-    setInput(nodeId, handle, value) {
-        if (!this.stagedInputs[nodeId])
-            this.stagedInputs[nodeId] = {};
-        this.stagedInputs[nodeId][handle] = value;
-        if (this.engine) {
-            this.engine.setInput(nodeId, handle, value);
-        }
-        else {
-            // Emit a value event so UI updates even when engine isn't running
-            this.emit("value", { nodeId, handle, value, io: "input" });
-        }
-    }
-    // Batch update multiple inputs on a node and trigger a single run
-    setInputs(nodeId, inputs) {
-        if (!inputs)
-            return;
-        if (!this.stagedInputs[nodeId])
-            this.stagedInputs[nodeId] = {};
-        Object.assign(this.stagedInputs[nodeId], inputs);
-        // Local running: pause, set all inputs, resume, schedule a single recompute
-        if (this.backend.kind === "local" && this.engine && this.runtime) {
-            this.engine.setInputs(nodeId, inputs);
-        }
-        // Remote running: forward inputs individually (no batch API available)
-        else if (this.engine &&
-            this.backend.kind !== "local" &&
-            this.engine instanceof RemoteEngine) {
-            this.engine.setInputs(nodeId, inputs);
-        }
-        // Not running: emit value events so UI reflects staged values
-        else if (!this.engine) {
-            // Not running: emit a single synthetic value event per handle; UI will coalesce
-            console.warn("Remote engine does not exists");
-            for (const [handle, value] of Object.entries(inputs)) {
-                this.emit("value", { nodeId, handle, value, io: "input" });
-            }
-        }
-    }
     async step() {
-        if (this.backend.kind !== "local")
-            return; // unsupported remotely
-        const eng = this.engine;
-        if (eng instanceof StepEngine)
-            await eng.step();
+        console.warn("Unsupported operation for remote runner");
     }
     async computeNode(nodeId) {
-        if (this.backend.kind !== "local")
-            return; // unsupported remotely
-        const eng = this.engine;
-        if (eng instanceof PullEngine)
-            await eng.computeNode(nodeId);
+        console.warn("Unsupported operation for remote runner");
     }
     flush() {
-        if (this.backend.kind !== "local")
-            return; // unsupported remotely
-        const eng = this.engine;
-        if (eng instanceof BatchedEngine)
-            eng.flush();
+        console.warn("Unsupported operation for remote runner");
     }
     getOutputs(def) {
         const out = {};
-        if (this.backend.kind === "local") {
-            if (!this.runtime)
-                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);
-                    if (v !== undefined) {
-                        if (!out[n.nodeId])
-                            out[n.nodeId] = {};
-                        out[n.nodeId][h] = v;
-                    }
-                }
-            }
-            return out;
-        }
-        const cache = this.remote?.valueCache;
+        const cache = this.valueCache;
         if (!cache)
             return out;
         for (const n of def.nodes) {
@@ -556,31 +680,14 @@ class GraphRunner {
     }
     getInputs(def) {
         const out = {};
-        if (this.backend.kind === "local") {
-            for (const n of def.nodes) {
-                const staged = this.stagedInputs[n.nodeId] ?? {};
-                const runtimeInputs = this.runtime
-                    ? this.runtime.getNodeData?.(n.nodeId)?.inputs ?? {}
-                    : {};
-                if (this.isRunning()) {
-                    out[n.nodeId] = runtimeInputs;
-                }
-                else {
-                    const merged = { ...runtimeInputs, ...staged };
-                    if (Object.keys(merged).length > 0)
-                        out[n.nodeId] = merged;
-                }
-            }
-            return out;
-        }
-        const cache = this.remote?.valueCache;
+        const cache = this.valueCache;
         for (const n of def.nodes) {
             const staged = this.stagedInputs[n.nodeId] ?? {};
             const desc = this.registry.nodes.get(n.typeId);
             const handles = Object.keys(desc?.inputs ?? {});
             const cur = {};
             for (const h of handles) {
-                const rec = cache?.get(`${n.nodeId}.${h}`);
+                const rec = cache.get(`${n.nodeId}.${h}`);
                 if (rec && rec.io === "input")
                     cur[h] = rec.value;
             }
@@ -590,52 +697,21 @@ class GraphRunner {
         }
         return out;
     }
-    async whenIdle() {
-        await this.engine?.whenIdle();
-    }
-    on(event, handler) {
-        if (!this.listeners.has(event))
-            this.listeners.set(event, new Set());
-        const set = this.listeners.get(event);
-        set.add(handler);
-        return () => set.delete(handler);
-    }
-    emit(event, payload) {
-        const set = this.listeners.get(event);
-        if (set)
-            for (const h of Array.from(set))
-                h(payload);
-    }
     dispose() {
-        this.engine?.dispose();
-        this.engine = undefined;
-        this.runtime?.dispose();
-        this.runtime = undefined;
-        this.remote = undefined;
-        if (this.runningKind) {
-            this.runningKind = undefined;
-            this.emit("status", { running: false, engine: undefined });
-        }
-        const kind = this.backend.kind === "local"
-            ? undefined
-            : this.backend.kind;
+        super.dispose();
+        this.runner = undefined;
+        this.transport = undefined;
         this.emit("transport", {
-            state: this.backend.kind === "local" ? "local" : "disconnected",
-            kind,
+            state: "disconnected",
+            kind: this.backend.kind,
         });
     }
-    isRunning() {
-        return !!this.engine;
-    }
-    getRunningEngine() {
-        return this.runningKind;
-    }
     // Ensure remote transport/runner
-    async ensureRemote() {
-        if (this.remote)
-            return this.remote;
+    async ensureRemoteRunner() {
+        if (this.runner)
+            return this.runner;
         let transport;
-        const kind = this.backend.kind === "remote-http" ? "remote-http" : "remote-ws";
+        const kind = this.backend.kind;
         this.emit("transport", { state: "connecting", kind });
         if (this.backend.kind === "remote-http") {
             if (!HttpPollingTransport)
@@ -653,14 +729,12 @@ class GraphRunner {
             throw new Error("Remote backend not configured");
         }
         const runner = new RemoteRunner(transport);
-        this.remote = {
-            runner,
-            transport,
-            valueCache: new Map(),
-            listenersBound: false,
-        };
+        this.runner = runner;
+        this.transport = transport;
+        this.valueCache.clear();
+        this.listenersBound = false;
         this.emit("transport", { state: "connected", kind });
-        return this.remote;
+        return runner;
     }
 }
 
@@ -1333,6 +1407,23 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
         });
         const off7 = wb.on("error", add("workbench", "error"));
         wb.refreshValidation();
+        // Registry updates: swap registry and refresh graph validation/UI
+        const offReg = runner.on("registry", (newReg) => {
+            try {
+                setRegistry(newReg);
+                wb.setRegistry(newReg);
+                // Trigger a graph update so the UI revalidates with new types/enums/nodes
+                try {
+                    runner.update(wb.export());
+                }
+                catch {
+                    console.error("Failed to update graph definition after registry changed");
+                }
+            }
+            catch {
+                console.error("Failed to handle registry changed event");
+            }
+        });
         return () => {
             off1();
             off2();
@@ -1345,6 +1436,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
             off5b();
             off6();
             off7();
+            offReg();
         };
     }, [runner, wb]);
     // Push incremental updates into running engine without full reload
@@ -1526,7 +1618,7 @@ function DebugEvents({ autoScroll, onAutoScrollChange, hideWorkbench, onHideWork
     return (jsxs("div", { className: "flex flex-col h-full min-h-0", children: [jsxs("div", { className: "flex items-center justify-between mb-1", children: [jsx("div", { className: "font-semibold", children: "Events" }), jsxs("div", { className: "flex items-center gap-2", children: [jsxs("label", { className: "flex items-center gap-1 text-xs text-gray-700", children: [jsx("input", { type: "checkbox", checked: hideWorkbench, onChange: (e) => onHideWorkbenchChange?.(e.target.checked) }), jsx("span", { children: "Hide workbench" })] }), jsxs("label", { className: "flex items-center gap-1 text-xs text-gray-700", children: [jsx("input", { type: "checkbox", checked: autoScroll, onChange: (e) => onAutoScrollChange?.(e.target.checked) }), jsx("span", { children: "Auto scroll" })] }), jsx("button", { onClick: clearEvents, className: "text-xs px-2 py-0.5 border border-gray-300 rounded", children: "Clear" })] })] }), jsx("div", { ref: scrollRef, className: "flex-1 overflow-auto text-[11px] leading-4 divide-y divide-gray-200", children: rows.map((ev, idx) => (jsxs("div", { className: "opacity-85 odd:bg-gray-50 px-2 py-1", children: [jsxs("div", { className: "flex items-baseline gap-2", children: [jsx("span", { className: "w-8 shrink-0 text-right text-gray-500 select-none", children: idx + 1 }), jsxs("span", { className: "text-gray-500", children: [new Date(ev.at).toLocaleTimeString(), " \u00B7 ", ev.source, ":", ev.type] })] }), jsx("pre", { className: "m-0 whitespace-pre-wrap ml-10", children: renderPayload(ev.payload) })] }, `${ev.at}:${idx}`))) })] }));
 }
 
-function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHideWorkbenchChange, toString, toElement, setInput, }) {
+function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHideWorkbenchChange, toString, toElement, contextPanel, setInput, }) {
     const safeToString = (typeId, value) => {
         try {
             if (typeof toString === "function") {
@@ -1615,7 +1707,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
             setOriginals(nextOriginals);
     }, [selectedNodeId, selectedDesc, valuesTick]);
     const widthClass = debug ? "w-[480px]" : "w-[320px]";
-    return (jsxs("div", { className: `${widthClass} border-l border-gray-300 p-3 flex flex-col h-full min-h-0 overflow-hidden`, children: [jsx("div", { className: "font-semibold mb-2", children: "Inspector" }), jsx("div", { className: "flex-1 overflow-auto", children: !selectedNode && !selectedEdge ? (jsxs("div", { children: [jsx("div", { className: "text-gray-500", children: "Select a node or edge." }), globalValidationIssues && globalValidationIssues.length > 0 && (jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsx("ul", { className: "list-disc ml-4", children: globalValidationIssues.map((m, i) => (jsxs("li", { className: "flex items-center gap-1", children: [jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsx("span", { children: `${m.code}: ${m.message}` })] }, i))) })] }))] })) : selectedEdge ? (jsxs("div", { children: [jsxs("div", { className: "mb-2", children: [jsxs("div", { children: ["Edge: ", selectedEdge.id] }), jsxs("div", { children: [selectedEdge.source.nodeId, ".", selectedEdge.source.handle, " \u2192", " ", selectedEdge.target.nodeId, ".", selectedEdge.target.handle] }), jsxs("div", { children: ["Type: ", selectedEdge.typeId] })] }), 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}` })] }, i))) })] }))] })) : (jsxs("div", { children: [selectedNode && (jsxs("div", { className: "mb-2", children: [jsxs("div", { children: ["Node: ", selectedNode.nodeId] }), jsxs("div", { children: ["Type: ", selectedNode.typeId] }), !!selectedNodeStatus?.lastError && (jsx("div", { className: "mt-2 text-sm text-red-700 bg-red-50 border border-red-200 rounded px-2 py-1 break-words", children: String(selectedNodeStatus.lastError?.message ??
+    return (jsxs("div", { className: `${widthClass} border-l border-gray-300 p-3 flex flex-col h-full min-h-0 overflow-hidden`, children: [contextPanel && (jsx("div", { className: "mb-2", children: contextPanel })), jsx("div", { className: "font-semibold mb-2", children: "Inspector" }), jsx("div", { className: "flex-1 overflow-auto", children: !selectedNode && !selectedEdge ? (jsxs("div", { children: [jsx("div", { className: "text-gray-500", children: "Select a node or edge." }), globalValidationIssues && globalValidationIssues.length > 0 && (jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsx("ul", { className: "list-disc ml-4", children: globalValidationIssues.map((m, i) => (jsxs("li", { className: "flex items-center gap-1", children: [jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsx("span", { children: `${m.code}: ${m.message}` })] }, i))) })] }))] })) : selectedEdge ? (jsxs("div", { children: [jsxs("div", { className: "mb-2", children: [jsxs("div", { children: ["Edge: ", selectedEdge.id] }), jsxs("div", { children: [selectedEdge.source.nodeId, ".", selectedEdge.source.handle, " \u2192", " ", selectedEdge.target.nodeId, ".", selectedEdge.target.handle] }), jsxs("div", { children: ["Type: ", selectedEdge.typeId] })] }), 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}` })] }, i))) })] }))] })) : (jsxs("div", { children: [selectedNode && (jsxs("div", { className: "mb-2", children: [jsxs("div", { children: ["Node: ", selectedNode.nodeId] }), jsxs("div", { children: ["Type: ", selectedNode.typeId] }), !!selectedNodeStatus?.lastError && (jsx("div", { className: "mt-2 text-sm text-red-700 bg-red-50 border border-red-200 rounded px-2 py-1 break-words", children: String(selectedNodeStatus.lastError?.message ??
                                         selectedNodeStatus.lastError) }))] })), jsxs("div", { className: "mb-2", children: [jsx("div", { className: "font-semibold mb-1", children: "Inputs" }), inputHandles.length === 0 ? (jsx("div", { className: "text-gray-500", children: "No inputs" })) : (inputHandles.map((h) => {
                                     const typeId = getInputTypeId(selectedDesc?.inputs, h);
                                     const isLinked = def.edges.some((e) => e.target.nodeId === selectedNodeId &&
@@ -1921,7 +2013,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement }, r
             catch { }
         },
     }));
-    const { onConnect, onNodesChange: wbOnNodesChange, onEdgesChange: wbOnEdgesChange, onEdgesDelete, onNodesDelete, onSelectionChange, } = useWorkbenchBridge(wb);
+    const { onConnect, onNodesChange, onEdgesChange, onEdgesDelete, onNodesDelete, onSelectionChange, } = useWorkbenchBridge(wb);
     const { nodeTypes, resolveNodeType } = useMemo(() => {
         // Build nodeTypes map using UI extension registry
         const ui = wb.getUI();
@@ -1942,7 +2034,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement }, r
         return { nodeTypes: types, resolveNodeType: resolver };
         // registry is stable; ui renderers expected to be set up before mount
     }, [wb, registry]);
-    const { nodes: computedNodes, edges: computedEdges } = useMemo(() => {
+    const { nodes, edges } = useMemo(() => {
         const def = wb.export();
         const sel = wb.getSelection();
         const out = toReactFlow(def, wb.getPositions(), registry, {
@@ -1975,25 +2067,6 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement }, r
         nodeTypes,
         resolveNodeType,
     ]);
-    // Local controlled state per requested pattern
-    const [nodes, setNodes] = useState(computedNodes);
-    const [edges, setEdges] = useState(computedEdges);
-    // Sync from computed graph to local state when source changes
-    useEffect(() => {
-        setNodes(computedNodes);
-    }, [computedNodes]);
-    useEffect(() => {
-        setEdges(computedEdges);
-    }, [computedEdges]);
-    // Bridge RF changes to both local state and workbench
-    const onNodesChange = useCallback((changes) => {
-        setNodes((nds) => applyNodeChanges(changes, nds));
-        wbOnNodesChange(changes);
-    }, [wbOnNodesChange]);
-    const onEdgesChange = useCallback((changes) => {
-        setEdges((eds) => applyEdgeChanges(changes, eds));
-        wbOnEdgesChange(changes);
-    }, [wbOnEdgesChange]);
     const [menuOpen, setMenuOpen] = useState(false);
     const [menuPos, setMenuPos] = useState(null);
     const [nodeMenuOpen, setNodeMenuOpen] = useState(false);
@@ -2458,18 +2531,22 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                             catch (err) {
                                 alert(String(err?.message ?? err));
                             }
-                        }, disabled: !engine, children: "Start" })), jsx("button", { className: "border border-gray-300 rounded px-2 py-1.5", onClick: runAutoLayout, children: "Auto Layout" }), jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: () => canvasRef.current?.fitView?.(), title: "Fit View", children: "Fit View" }), jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: downloadGraph, children: "Download Graph" }), jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsx("span", { children: "Debug events" })] }), jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsx("span", { children: "Show values in nodes" })] })] }), jsxs("div", { className: "flex flex-1 min-h-0", children: [jsx("div", { className: "flex-1 min-w-0", children: jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement }) }), jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, toElement: toElement })] })] }));
+                        }, disabled: !engine, children: "Start" })), jsx("button", { className: "border border-gray-300 rounded px-2 py-1.5", onClick: runAutoLayout, children: "Auto Layout" }), jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: () => canvasRef.current?.fitView?.(), title: "Fit View", children: "Fit View" }), jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: downloadGraph, children: "Download Graph" }), jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsx("span", { children: "Debug events" })] }), jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsx("span", { children: "Show values in nodes" })] })] }), jsxs("div", { className: "flex flex-1 min-h-0", children: [jsx("div", { className: "flex-1 min-w-0", children: jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement }) }), jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, toElement: toElement, contextPanel: overrides?.contextPanel })] })] }));
 }
-function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, autoScroll, onAutoScrollChange, overrides, onInit, onChange, }) {
+function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, autoScroll, onAutoScrollChange, overrides, onInit, onChange, contextPanel, }) {
     const [registry, setRegistry] = useState(createSimpleGraphRegistry());
     const [wb] = useState(() => new InMemoryWorkbench({ ui: new DefaultUIExtensionRegistry() }));
     const runner = useMemo(() => {
-        const backend = backendKind === "remote-http"
-            ? { kind: "remote-http", baseUrl: httpBaseUrl }
-            : backendKind === "remote-ws"
-                ? { kind: "remote-ws", url: wsUrl }
-                : { kind: "local" };
-        return new GraphRunner(registry, backend);
+        if (backendKind === "remote-http") {
+            return new RemoteGraphRunner(registry, {
+                kind: "remote-http",
+                baseUrl: httpBaseUrl,
+            });
+        }
+        if (backendKind === "remote-ws") {
+            return new RemoteGraphRunner(registry, { kind: "remote-ws", url: wsUrl });
+        }
+        return new LocalGraphRunner(registry);
     }, [registry, backendKind, httpBaseUrl, wsUrl]);
     // Allow external UI registration (e.g., node renderers) with access to wb
     useEffect(() => {
@@ -2484,5 +2561,5 @@ function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, bac
             }, 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, DefaultUIExtensionRegistry, GraphRunner, InMemoryWorkbench, Inspector, WorkbenchCanvas, WorkbenchContext, WorkbenchProvider, WorkbenchStudio, formatDataUrlAsLabel, formatDeclaredTypeSignature, getNodeBorderClassNames, preformatValueForDisplay, resolveOutputDisplay, summarizeDeep, toReactFlow, useQueryParamBoolean, useQueryParamString, useWorkbenchBridge, useWorkbenchContext, useWorkbenchGraphTick, useWorkbenchGraphUiTick, useWorkbenchVersionTick };
+export { AbstractWorkbench, CLIWorkbench, DefaultUIExtensionRegistry, InMemoryWorkbench, Inspector, LocalGraphRunner, RemoteGraphRunner, WorkbenchCanvas, WorkbenchContext, WorkbenchProvider, WorkbenchStudio, formatDataUrlAsLabel, formatDeclaredTypeSignature, getNodeBorderClassNames, preformatValueForDisplay, resolveOutputDisplay, summarizeDeep, toReactFlow, useQueryParamBoolean, useQueryParamString, useWorkbenchBridge, useWorkbenchContext, useWorkbenchGraphTick, useWorkbenchGraphUiTick, useWorkbenchVersionTick };
 //# sourceMappingURL=index.js.map