@bian-womp/spark-workbench 0.1.29 → 0.1.30

package/lib/cjs/index.cjs

@@ -319,104 +319,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 sparkGraph.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);
+        }
+        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" });
+            }
         }
-        // Remote: no-op here; build is performed on remote server during launch
+    }
+    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 sparkGraph.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 sparkGraph.PushEngine(rt);
+                break;
+            case "batched":
+                this.engine = new sparkGraph.BatchedEngine(rt, {
+                    flushIntervalMs: opts.batched?.flushIntervalMs ?? 0,
+                });
+                break;
+            case "pull":
+                this.engine = new sparkGraph.PullEngine(rt);
+                break;
+            case "hybrid":
+                this.engine = new sparkGraph.HybridEngine(rt, {
+                    windowMs: opts.hybrid?.windowMs ?? 250,
+                    batchThreshold: opts.hybrid?.batchThreshold ?? 3,
+                });
+                break;
+            case "step":
+                this.engine = new sparkGraph.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 sparkGraph.StepEngine)
+            await eng.step();
+    }
+    async computeNode(nodeId) {
+        const eng = this.engine;
+        if (eng instanceof sparkGraph.PullEngine)
+            await eng.computeNode(nodeId);
+    }
+    flush() {
+        const eng = this.engine;
+        if (eng instanceof sparkGraph.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 sparkGraph.PushEngine(rt);
-                    break;
-                case "batched":
-                    this.engine = new sparkGraph.BatchedEngine(rt, {
-                        flushIntervalMs: opts.batched?.flushIntervalMs ?? 0,
-                    });
-                    break;
-                case "pull":
-                    this.engine = new sparkGraph.PullEngine(rt);
-                    break;
-                case "hybrid":
-                    this.engine = new sparkGraph.HybridEngine(rt, {
-                        windowMs: opts.hybrid?.windowMs ?? 250,
-                        batchThreshold: opts.hybrid?.batchThreshold ?? 3,
-                    });
-                    break;
-                case "step":
-                    this.engine = new sparkGraph.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,
                         });
@@ -425,7 +616,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,
                         });
@@ -436,10 +627,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,
@@ -449,7 +640,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();
@@ -460,85 +651,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 sparkRemote.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 sparkGraph.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 sparkGraph.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 sparkGraph.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) {
@@ -558,31 +682,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;
             }
@@ -592,52 +699,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 (!sparkRemote.HttpPollingTransport)
@@ -655,14 +731,12 @@ class GraphRunner {
             throw new Error("Remote backend not configured");
         }
         const runner = new sparkRemote.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;
     }
 }
 
@@ -1335,6 +1409,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();
@@ -1347,6 +1438,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
             off5b();
             off6();
             off7();
+            offReg();
         };
     }, [runner, wb]);
     // Push incremental updates into running engine without full reload
@@ -1528,7 +1620,7 @@ function DebugEvents({ autoScroll, onAutoScrollChange, hideWorkbench, onHideWork
     return (jsxRuntime.jsxs("div", { className: "flex flex-col h-full min-h-0", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1", children: [jsxRuntime.jsx("div", { className: "font-semibold", children: "Events" }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsxs("label", { className: "flex items-center gap-1 text-xs text-gray-700", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: hideWorkbench, onChange: (e) => onHideWorkbenchChange?.(e.target.checked) }), jsxRuntime.jsx("span", { children: "Hide workbench" })] }), jsxRuntime.jsxs("label", { className: "flex items-center gap-1 text-xs text-gray-700", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: autoScroll, onChange: (e) => onAutoScrollChange?.(e.target.checked) }), jsxRuntime.jsx("span", { children: "Auto scroll" })] }), jsxRuntime.jsx("button", { onClick: clearEvents, className: "text-xs px-2 py-0.5 border border-gray-300 rounded", children: "Clear" })] })] }), jsxRuntime.jsx("div", { ref: scrollRef, className: "flex-1 overflow-auto text-[11px] leading-4 divide-y divide-gray-200", children: rows.map((ev, idx) => (jsxRuntime.jsxs("div", { className: "opacity-85 odd:bg-gray-50 px-2 py-1", children: [jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [jsxRuntime.jsx("span", { className: "w-8 shrink-0 text-right text-gray-500 select-none", children: idx + 1 }), jsxRuntime.jsxs("span", { className: "text-gray-500", children: [new Date(ev.at).toLocaleTimeString(), " \u00B7 ", ev.source, ":", ev.type] })] }), jsxRuntime.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") {
@@ -1617,7 +1709,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
             setOriginals(nextOriginals);
     }, [selectedNodeId, selectedDesc, valuesTick]);
     const widthClass = debug ? "w-[480px]" : "w-[320px]";
-    return (jsxRuntime.jsxs("div", { className: `${widthClass} border-l border-gray-300 p-3 flex flex-col h-full min-h-0 overflow-hidden`, children: [jsxRuntime.jsx("div", { className: "font-semibold mb-2", children: "Inspector" }), jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: !selectedNode && !selectedEdge ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "text-gray-500", children: "Select a node or edge." }), globalValidationIssues && globalValidationIssues.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: globalValidationIssues.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` })] }, i))) })] }))] })) : selectedEdge ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsxs("div", { children: ["Edge: ", selectedEdge.id] }), jsxRuntime.jsxs("div", { children: [selectedEdge.source.nodeId, ".", selectedEdge.source.handle, " \u2192", " ", selectedEdge.target.nodeId, ".", selectedEdge.target.handle] }), jsxRuntime.jsxs("div", { children: ["Type: ", selectedEdge.typeId] })] }), selectedEdgeValidation.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: selectedEdgeValidation.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` })] }, i))) })] }))] })) : (jsxRuntime.jsxs("div", { children: [selectedNode && (jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsxs("div", { children: ["Node: ", selectedNode.nodeId] }), jsxRuntime.jsxs("div", { children: ["Type: ", selectedNode.typeId] }), !!selectedNodeStatus?.lastError && (jsxRuntime.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 (jsxRuntime.jsxs("div", { className: `${widthClass} border-l border-gray-300 p-3 flex flex-col h-full min-h-0 overflow-hidden`, children: [contextPanel && (jsxRuntime.jsx("div", { className: "mb-2", children: contextPanel })), jsxRuntime.jsx("div", { className: "font-semibold mb-2", children: "Inspector" }), jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: !selectedNode && !selectedEdge ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "text-gray-500", children: "Select a node or edge." }), globalValidationIssues && globalValidationIssues.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: globalValidationIssues.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` })] }, i))) })] }))] })) : selectedEdge ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsxs("div", { children: ["Edge: ", selectedEdge.id] }), jsxRuntime.jsxs("div", { children: [selectedEdge.source.nodeId, ".", selectedEdge.source.handle, " \u2192", " ", selectedEdge.target.nodeId, ".", selectedEdge.target.handle] }), jsxRuntime.jsxs("div", { children: ["Type: ", selectedEdge.typeId] })] }), selectedEdgeValidation.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: selectedEdgeValidation.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` })] }, i))) })] }))] })) : (jsxRuntime.jsxs("div", { children: [selectedNode && (jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsxs("div", { children: ["Node: ", selectedNode.nodeId] }), jsxRuntime.jsxs("div", { children: ["Type: ", selectedNode.typeId] }), !!selectedNodeStatus?.lastError && (jsxRuntime.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) }))] })), jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Inputs" }), inputHandles.length === 0 ? (jsxRuntime.jsx("div", { className: "text-gray-500", children: "No inputs" })) : (inputHandles.map((h) => {
                                     const typeId = sparkGraph.getInputTypeId(selectedDesc?.inputs, h);
                                     const isLinked = def.edges.some((e) => e.target.nodeId === selectedNodeId &&
@@ -2441,18 +2533,22 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                             catch (err) {
                                 alert(String(err?.message ?? err));
                             }
-                        }, disabled: !engine, children: "Start" })), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded px-2 py-1.5", onClick: runAutoLayout, children: "Auto Layout" }), jsxRuntime.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" }), jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: downloadGraph, children: "Download Graph" }), jsxRuntime.jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsxRuntime.jsx("span", { children: "Debug events" })] }), jsxRuntime.jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsxRuntime.jsx("span", { children: "Show values in nodes" })] })] }), jsxRuntime.jsxs("div", { className: "flex flex-1 min-h-0", children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: jsxRuntime.jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement }) }), jsxRuntime.jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, toElement: toElement })] })] }));
+                        }, disabled: !engine, children: "Start" })), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded px-2 py-1.5", onClick: runAutoLayout, children: "Auto Layout" }), jsxRuntime.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" }), jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: downloadGraph, children: "Download Graph" }), jsxRuntime.jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsxRuntime.jsx("span", { children: "Debug events" })] }), jsxRuntime.jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsxRuntime.jsx("span", { children: "Show values in nodes" })] })] }), jsxRuntime.jsxs("div", { className: "flex flex-1 min-h-0", children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: jsxRuntime.jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement }) }), jsxRuntime.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] = React.useState(sparkGraph.createSimpleGraphRegistry());
     const [wb] = React.useState(() => new InMemoryWorkbench({ ui: new DefaultUIExtensionRegistry() }));
     const runner = React.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
     React.useEffect(() => {
@@ -2470,9 +2566,10 @@ function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, bac
 exports.AbstractWorkbench = AbstractWorkbench;
 exports.CLIWorkbench = CLIWorkbench;
 exports.DefaultUIExtensionRegistry = DefaultUIExtensionRegistry;
-exports.GraphRunner = GraphRunner;
 exports.InMemoryWorkbench = InMemoryWorkbench;
 exports.Inspector = Inspector;
+exports.LocalGraphRunner = LocalGraphRunner;
+exports.RemoteGraphRunner = RemoteGraphRunner;
 exports.WorkbenchCanvas = WorkbenchCanvas;
 exports.WorkbenchContext = WorkbenchContext;
 exports.WorkbenchProvider = WorkbenchProvider;