@bian-womp/spark-workbench 0.2.37 → 0.2.38

package/lib/esm/index.js

@@ -1,10 +1,10 @@
 import { GraphBuilder, StepEngine, HybridEngine, PullEngine, BatchedEngine, PushEngine, isTypedOutput, getTypedOutputValue, getTypedOutputTypeId, isInputPrivate, getInputTypeId, createSimpleGraphRegistry, createSimpleGraphDef, createAsyncGraphDef, createAsyncGraphRegistry, createProgressGraphDef, createProgressGraphRegistry, createValidationGraphDef, createValidationGraphRegistry } from '@bian-womp/spark-graph';
-import { HttpPollingTransport, WebSocketTransport, RemoteRunner } from '@bian-womp/spark-remote';
+import { RuntimeApiClient } from '@bian-womp/spark-remote';
 import React, { useCallback, useState, useRef, useEffect, useMemo, createContext, useContext, useImperativeHandle } from 'react';
 import { Position, Handle, useUpdateNodeInternals, useReactFlow, ReactFlowProvider, ReactFlow, Background, BackgroundVariant, MiniMap, Controls } from '@xyflow/react';
+import cx from 'classnames';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { XCircleIcon, WarningCircleIcon, CopyIcon, TrashIcon, XIcon, ArrowClockwiseIcon, PlugsConnectedIcon, ClockClockwiseIcon, WifiHighIcon, WifiSlashIcon, PlayPauseIcon, LightningIcon, StopIcon, PlayIcon, TreeStructureIcon, CornersOutIcon, DownloadSimpleIcon, DownloadIcon, UploadIcon, BugBeetleIcon, ListBulletsIcon } from '@phosphor-icons/react';
-import cx from 'classnames';
 import isEqual from 'lodash/isEqual';
 
 class DefaultUIExtensionRegistry {
@@ -600,8 +600,200 @@ class LocalGraphRunner extends AbstractGraphRunner {
 }
 
 class RemoteGraphRunner extends AbstractGraphRunner {
+    /**
+     * Fetch full registry description from remote and register it locally.
+     * Called automatically on first connection with retry mechanism.
+     */
+    async fetchRegistry(client, attempt = 1) {
+        if (this.registryFetching) {
+            // Already fetching, don't start another fetch
+            return;
+        }
+        this.registryFetching = true;
+        try {
+            const desc = await client.describeRegistry();
+            // Register types
+            for (const t of desc.types) {
+                if (t.options) {
+                    this.registry.registerEnum({
+                        id: t.id,
+                        options: t.options,
+                        bakeTarget: t.bakeTarget,
+                    });
+                }
+                else {
+                    if (!this.registry.types.has(t.id)) {
+                        this.registry.registerType({
+                            id: t.id,
+                            displayName: t.displayName,
+                            validate: (_v) => true,
+                            bakeTarget: t.bakeTarget,
+                        });
+                    }
+                }
+            }
+            // Register categories
+            for (const c of desc.categories || []) {
+                if (!this.registry.categories.has(c.id)) {
+                    // Create placeholder category descriptor
+                    const category = {
+                        id: c.id,
+                        displayName: c.displayName,
+                        createRuntime: () => ({
+                            async onInputsChanged() { },
+                        }),
+                        policy: { asyncConcurrency: "switch" },
+                    };
+                    this.registry.categories.register(category);
+                }
+            }
+            // Register coercions
+            for (const c of desc.coercions) {
+                if (c.async) {
+                    this.registry.registerAsyncCoercion(c.from, c.to, async (v) => v, {
+                        nonTransitive: c.nonTransitive,
+                    });
+                }
+                else {
+                    this.registry.registerCoercion(c.from, c.to, (v) => v, {
+                        nonTransitive: c.nonTransitive,
+                    });
+                }
+            }
+            // Register nodes
+            for (const n of desc.nodes) {
+                if (!this.registry.nodes.has(n.id)) {
+                    this.registry.registerNode({
+                        id: n.id,
+                        categoryId: n.categoryId,
+                        displayName: n.displayName,
+                        inputs: n.inputs || {},
+                        outputs: n.outputs || {},
+                        impl: () => { },
+                    });
+                }
+            }
+            this.registryFetched = true;
+            this.registryFetching = false;
+            this.emit("registry", this.registry);
+        }
+        catch (err) {
+            this.registryFetching = false;
+            const error = err instanceof Error ? err : new Error(String(err));
+            // Retry with exponential backoff if attempts remaining
+            if (attempt < this.MAX_REGISTRY_FETCH_ATTEMPTS) {
+                const delayMs = this.INITIAL_RETRY_DELAY_MS * Math.pow(2, attempt - 1);
+                console.warn(`Failed to fetch registry (attempt ${attempt}/${this.MAX_REGISTRY_FETCH_ATTEMPTS}), retrying in ${delayMs}ms...`, error);
+                // Emit error event for UI feedback
+                this.emit("error", {
+                    kind: "registry",
+                    message: `Registry fetch failed (attempt ${attempt}/${this.MAX_REGISTRY_FETCH_ATTEMPTS}), retrying...`,
+                    err: error,
+                    attempt,
+                    maxAttempts: this.MAX_REGISTRY_FETCH_ATTEMPTS,
+                });
+                // Retry after delay
+                setTimeout(() => {
+                    this.fetchRegistry(client, attempt + 1).catch(() => {
+                        // Final failure handled below
+                    });
+                }, delayMs);
+            }
+            else {
+                // Max attempts reached, emit final error
+                console.error(`Failed to fetch registry after ${this.MAX_REGISTRY_FETCH_ATTEMPTS} attempts:`, error);
+                this.emit("error", {
+                    kind: "registry",
+                    message: `Failed to fetch registry after ${this.MAX_REGISTRY_FETCH_ATTEMPTS} attempts. Please check your connection and try refreshing.`,
+                    err: error,
+                    attempt: this.MAX_REGISTRY_FETCH_ATTEMPTS,
+                    maxAttempts: this.MAX_REGISTRY_FETCH_ATTEMPTS,
+                });
+            }
+        }
+    }
+    /**
+     * Build RuntimeApiClient config from RemoteExecutionBackend config.
+     */
+    buildClientConfig(backend) {
+        if (backend.kind === "remote-http") {
+            return {
+                kind: "remote-http",
+                baseUrl: backend.baseUrl,
+                connectOptions: backend.connectOptions,
+            };
+        }
+        else {
+            return {
+                kind: "remote-ws",
+                url: backend.url,
+                connectOptions: backend.connectOptions,
+            };
+        }
+    }
+    /**
+     * Setup event subscriptions for the client.
+     */
+    setupClientSubscriptions(client, backend) {
+        // Subscribe to custom events (for additional listeners if needed)
+        if (backend.onCustomEvent) {
+            this.customEventUnsubscribe = client.subscribeCustomEvents(backend.onCustomEvent);
+        }
+        // Subscribe to transport status changes
+        // Convert RuntimeApiClient.TransportStatus to IGraphRunner.TransportStatus
+        this.transportStatusUnsubscribe = client.onTransportStatus((status) => {
+            // Map remote-unix to undefined since RemoteGraphRunner doesn't support it
+            const mappedKind = status.kind === "remote-unix" ? undefined : status.kind;
+            this.emit("transport", {
+                state: status.state,
+                kind: mappedKind,
+            });
+        });
+    }
+    // Ensure remote client
+    async ensureClient() {
+        if (this.disposed) {
+            throw new Error("Cannot ensure client: RemoteGraphRunner has been disposed");
+        }
+        if (this.client)
+            return this.client;
+        // If already connecting, wait for that connection to complete
+        if (this.clientPromise)
+            return this.clientPromise;
+        const backend = this.backend;
+        // Create connection promise to prevent concurrent connections
+        this.clientPromise = (async () => {
+            // Build client config from backend config
+            const clientConfig = this.buildClientConfig(backend);
+            // Create client with custom event handler if provided
+            const client = new RuntimeApiClient(clientConfig, {
+                onCustomEvent: backend.onCustomEvent,
+            });
+            // Setup event subscriptions
+            this.setupClientSubscriptions(client, backend);
+            // Connect the client (this will create and connect transport)
+            await client.connect();
+            this.client = client;
+            this.valueCache.clear();
+            this.listenersBound = false;
+            // Auto-fetch registry on first connection (only once)
+            if (!this.registryFetched && !this.registryFetching) {
+                // Log loading state (UI can listen to transport status for loading indication)
+                console.info("Loading registry from remote...");
+                this.fetchRegistry(client).catch((err) => {
+                    console.error("[RemoteGraphRunner] Failed to fetch registry:", err);
+                    // Error handling is done inside fetchRegistry, but we catch unhandled rejections
+                });
+            }
+            // Clear promise on success
+            this.clientPromise = undefined;
+            return client;
+        })();
+        return this.clientPromise;
+    }
     constructor(registry, backend) {
         super(registry, backend);
+        this.disposed = false;
         this.valueCache = new Map();
         this.listenersBound = false;
         this.registryFetched = false;
@@ -610,8 +802,8 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         this.INITIAL_RETRY_DELAY_MS = 1000; // 1 second
         // 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();
+        this.ensureClient().then(async (client) => {
+            const eng = client.getEngine();
             if (!this.listenersBound) {
                 eng.on("invalidate", async (e) => {
                     if (e.reason === "registry-changed") {
@@ -675,9 +867,9 @@ class RemoteGraphRunner extends AbstractGraphRunner {
     }
     update(def) {
         // Remote: forward update; ignore errors (fire-and-forget)
-        this.ensureRemoteRunner().then(async (runner) => {
+        this.ensureClient().then(async (client) => {
             try {
-                await runner.update(def);
+                await client.update(def);
                 this.emit("invalidate", { reason: "graph-updated" });
                 this.lastDef = def;
             }
@@ -687,14 +879,14 @@ class RemoteGraphRunner extends AbstractGraphRunner {
     launch(def, opts) {
         super.launch(def, opts);
         // Remote: build remotely then launch
-        this.ensureRemoteRunner().then(async (runner) => {
-            await runner.build(def);
+        this.ensureClient().then(async (client) => {
+            await client.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 runner.snapshot();
+                const snap = await client.snapshot();
                 for (const [nodeId, map] of Object.entries(snap.inputs || {})) {
                     for (const [handle, value] of Object.entries(map || {})) {
                         this.valueCache.set(`${nodeId}.${handle}`, {
@@ -717,7 +909,47 @@ class RemoteGraphRunner extends AbstractGraphRunner {
             catch {
                 console.error("Failed to hydrate remote inputs/outputs");
             }
-            const eng = runner.getEngine();
+            const eng = client.getEngine();
+            if (!this.listenersBound) {
+                eng.on("value", (e) => {
+                    this.valueCache.set(`${e.nodeId}.${e.handle}`, {
+                        io: e.io,
+                        value: e.value,
+                        runtimeTypeId: e.runtimeTypeId,
+                    });
+                    this.emit("value", e);
+                });
+                eng.on("error", (e) => this.emit("error", e));
+                eng.on("invalidate", (e) => this.emit("invalidate", e));
+                eng.on("stats", (e) => this.emit("stats", e));
+                this.listenersBound = true;
+            }
+            this.engine = eng;
+            this.engine.launch(opts.invalidate);
+            this.runningKind = "push";
+            this.emit("status", { running: true, engine: this.runningKind });
+            for (const [nodeId, map] of Object.entries(this.stagedInputs)) {
+                this.engine.setInputs(nodeId, map);
+            }
+        });
+    }
+    /**
+     * Launch using an existing backend runtime that has already been built and hydrated.
+     * This is used when resuming from a snapshot where the backend has already applied
+     * ApplySnapshotFull (which builds the graph and hydrates inputs/outputs).
+     * Unlike launch(), this method does NOT call client.build() to avoid destroying
+     * the runtime state that was just restored.
+     */
+    launchExisting(def, opts) {
+        super.launch(def, opts);
+        // Remote: attach to existing runtime and launch (do NOT rebuild)
+        this.ensureClient().then(async (client) => {
+            // NOTE: We do NOT call client.build(def) here because the backend runtime
+            // has already been built and hydrated via ApplySnapshotFull.
+            // Calling build() would create a new runtime and lose the restored state.
+            this.lastDef = def;
+            // Attach to the existing engine
+            const eng = client.getEngine();
             if (!this.listenersBound) {
                 eng.on("value", (e) => {
                     this.valueCache.set(`${e.nodeId}.${e.handle}`, {
@@ -751,26 +983,26 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         console.warn("Unsupported operation for remote runner");
     }
     triggerExternal(nodeId, event) {
-        this.ensureRemoteRunner().then(async (runner) => {
+        this.ensureClient().then(async (client) => {
             try {
-                await runner.getEngine().triggerExternal(nodeId, event);
+                await client.getEngine().triggerExternal(nodeId, event);
             }
             catch { }
         });
     }
     async coerce(from, to, value) {
-        const runner = await this.ensureRemoteRunner();
+        const client = await this.ensureClient();
         try {
-            return await runner.coerce(from, to, value);
+            return await client.coerce(from, to, value);
         }
         catch {
             return value;
         }
     }
     async snapshotFull() {
-        const runner = await this.ensureRemoteRunner();
+        const client = await this.ensureClient();
         try {
-            return await runner.snapshotFull();
+            return await client.snapshotFull();
         }
         catch {
             return { def: undefined, environment: {}, inputs: {}, outputs: {} };
@@ -778,17 +1010,17 @@ class RemoteGraphRunner extends AbstractGraphRunner {
     }
     async applySnapshotFull(payload) {
         // Hydrate local cache first so UI can display values immediately
-        this.hydrateCacheFromSnapshot(payload);
+        this.hydrateSnapshotFull(payload);
         // Then sync with backend
-        const runner = await this.ensureRemoteRunner();
-        await runner.applySnapshotFull(payload);
+        const client = await this.ensureClient();
+        await client.applySnapshotFull(payload);
     }
     /**
      * Hydrates the local valueCache from a snapshot and emits value events.
      * This ensures the UI can display inputs/outputs immediately without waiting
      * for value events from the remote backend.
      */
-    hydrateCacheFromSnapshot(snapshot) {
+    hydrateSnapshotFull(snapshot) {
         // Hydrate inputs
         for (const [nodeId, map] of Object.entries(snapshot.inputs || {})) {
             for (const [handle, value] of Object.entries(map || {})) {
@@ -811,20 +1043,25 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         }
     }
     setEnvironment(env, opts) {
-        const t = this.transport;
-        if (!t)
-            return;
-        t.request({
-            message: {
-                type: "SetEnvironment",
-                payload: { environment: env, merge: opts?.merge },
-            },
-        }).catch(() => { });
+        // Use client if available, otherwise ensure client and then set environment
+        if (this.client) {
+            this.client.setEnvironment(env, opts).catch(() => { });
+        }
+        else {
+            // If client not ready yet, ensure it and then set environment
+            this.ensureClient()
+                .then((client) => {
+                client.setEnvironment(env, opts).catch(() => { });
+            })
+                .catch(() => { });
+        }
     }
     getEnvironment() {
-        // Fetch from remote via lightweight command
-        // Note: returns undefined synchronously; callers needing value should use snapshotFull or call runner directly
-        // For now, we expose an async helper on RemoteRunner. Keep sync signature per interface.
+        // Interface requires sync return, but RuntimeApiClient.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
+        // This is a limitation of the sync interface signature.
         return undefined;
     }
     getOutputs(def) {
@@ -888,183 +1125,37 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         return out;
     }
     dispose() {
+        // Idempotent: allow multiple calls safely
+        if (this.disposed)
+            return;
+        this.disposed = true;
         super.dispose();
-        this.runner = undefined;
-        this.transport = undefined;
+        // Clear client promise if any
+        this.clientPromise = undefined;
+        // Unsubscribe from custom events and transport status
+        if (this.customEventUnsubscribe) {
+            this.customEventUnsubscribe();
+            this.customEventUnsubscribe = undefined;
+        }
+        if (this.transportStatusUnsubscribe) {
+            this.transportStatusUnsubscribe();
+            this.transportStatusUnsubscribe = undefined;
+        }
+        // Dispose client (which will close transport)
+        const clientToDispose = this.client;
+        this.client = undefined;
         this.registryFetched = false; // Reset so registry is fetched again on reconnect
         this.registryFetching = false; // Reset fetching state
+        if (clientToDispose) {
+            clientToDispose.dispose().catch((err) => {
+                console.warn("[RemoteGraphRunner] Error disposing client:", err);
+            });
+        }
         this.emit("transport", {
             state: "disconnected",
             kind: this.backend.kind,
         });
     }
-    /**
-     * Fetch full registry description from remote and register it locally.
-     * Called automatically on first connection with retry mechanism.
-     */
-    async fetchRegistry(runner, attempt = 1) {
-        if (this.registryFetching) {
-            // Already fetching, don't start another fetch
-            return;
-        }
-        this.registryFetching = true;
-        try {
-            const desc = await runner.describeRegistry();
-            // Register types
-            for (const t of desc.types) {
-                if (t.options) {
-                    this.registry.registerEnum({
-                        id: t.id,
-                        options: t.options,
-                        bakeTarget: t.bakeTarget,
-                    });
-                }
-                else {
-                    if (!this.registry.types.has(t.id)) {
-                        this.registry.registerType({
-                            id: t.id,
-                            displayName: t.displayName,
-                            validate: (_v) => true,
-                            bakeTarget: t.bakeTarget,
-                        });
-                    }
-                }
-            }
-            // Register categories
-            for (const c of desc.categories || []) {
-                if (!this.registry.categories.has(c.id)) {
-                    // Create placeholder category descriptor
-                    const category = {
-                        id: c.id,
-                        displayName: c.displayName,
-                        createRuntime: () => ({
-                            async onInputsChanged() { },
-                        }),
-                        policy: { asyncConcurrency: "switch" },
-                    };
-                    this.registry.categories.register(category);
-                }
-            }
-            // Register coercions
-            for (const c of desc.coercions) {
-                if (c.async) {
-                    this.registry.registerAsyncCoercion(c.from, c.to, async (v) => v, {
-                        nonTransitive: c.nonTransitive,
-                    });
-                }
-                else {
-                    this.registry.registerCoercion(c.from, c.to, (v) => v, {
-                        nonTransitive: c.nonTransitive,
-                    });
-                }
-            }
-            // Register nodes
-            for (const n of desc.nodes) {
-                if (!this.registry.nodes.has(n.id)) {
-                    this.registry.registerNode({
-                        id: n.id,
-                        categoryId: n.categoryId,
-                        displayName: n.displayName,
-                        inputs: n.inputs || {},
-                        outputs: n.outputs || {},
-                        impl: () => { },
-                    });
-                }
-            }
-            this.registryFetched = true;
-            this.registryFetching = false;
-            this.emit("registry", this.registry);
-        }
-        catch (err) {
-            this.registryFetching = false;
-            const error = err instanceof Error ? err : new Error(String(err));
-            // Retry with exponential backoff if attempts remaining
-            if (attempt < this.MAX_REGISTRY_FETCH_ATTEMPTS) {
-                const delayMs = this.INITIAL_RETRY_DELAY_MS * Math.pow(2, attempt - 1);
-                console.warn(`Failed to fetch registry (attempt ${attempt}/${this.MAX_REGISTRY_FETCH_ATTEMPTS}), retrying in ${delayMs}ms...`, error);
-                // Emit error event for UI feedback
-                this.emit("error", {
-                    kind: "registry",
-                    message: `Registry fetch failed (attempt ${attempt}/${this.MAX_REGISTRY_FETCH_ATTEMPTS}), retrying...`,
-                    err: error,
-                    attempt,
-                    maxAttempts: this.MAX_REGISTRY_FETCH_ATTEMPTS,
-                });
-                // Retry after delay
-                setTimeout(() => {
-                    this.fetchRegistry(runner, attempt + 1).catch(() => {
-                        // Final failure handled below
-                    });
-                }, delayMs);
-            }
-            else {
-                // Max attempts reached, emit final error
-                console.error(`Failed to fetch registry after ${this.MAX_REGISTRY_FETCH_ATTEMPTS} attempts:`, error);
-                this.emit("error", {
-                    kind: "registry",
-                    message: `Failed to fetch registry after ${this.MAX_REGISTRY_FETCH_ATTEMPTS} attempts. Please check your connection and try refreshing.`,
-                    err: error,
-                    attempt: this.MAX_REGISTRY_FETCH_ATTEMPTS,
-                    maxAttempts: this.MAX_REGISTRY_FETCH_ATTEMPTS,
-                });
-            }
-        }
-    }
-    // Ensure remote transport/runner
-    async ensureRemoteRunner() {
-        if (this.runner)
-            return this.runner;
-        let transport;
-        const kind = this.backend.kind;
-        const backend = this.backend;
-        const connectOptions = backend.connectOptions;
-        this.emit("transport", { state: "connecting", kind });
-        if (backend.kind === "remote-http") {
-            if (!HttpPollingTransport)
-                throw new Error("HttpPollingTransport not available");
-            transport = new HttpPollingTransport(backend.baseUrl);
-            await transport.connect(connectOptions);
-        }
-        else if (backend.kind === "remote-ws") {
-            if (!WebSocketTransport)
-                throw new Error("WebSocketTransport not available");
-            transport = new WebSocketTransport(backend.url);
-            await transport.connect(connectOptions);
-        }
-        else {
-            throw new Error("Remote backend not configured");
-        }
-        // Subscribe to custom events if handler provided
-        if (backend.onCustomEvent) {
-            transport.subscribe((event) => {
-                // Filter out standard runtime events, pass others to custom handler
-                const msg = event.message;
-                if (msg && typeof msg === "object" && "type" in msg) {
-                    const type = msg.type;
-                    // Standard runtime events: stats, value, error, invalidate
-                    // Custom events are anything else (e.g., flow-opened, flow-latest)
-                    if (!["stats", "value", "error", "invalidate"].includes(type)) {
-                        backend.onCustomEvent?.(event);
-                    }
-                }
-            });
-        }
-        const runner = new RemoteRunner(transport);
-        this.runner = runner;
-        this.transport = transport;
-        this.valueCache.clear();
-        this.listenersBound = false;
-        this.emit("transport", { state: "connected", kind });
-        // Auto-fetch registry on first connection (only once)
-        if (!this.registryFetched && !this.registryFetching) {
-            // Log loading state (UI can listen to transport status for loading indication)
-            console.info("Loading registry from remote...");
-            this.fetchRegistry(runner).catch(() => {
-                // Error handling is done inside fetchRegistry
-            });
-        }
-        return runner;
-    }
 }
 
 function useWorkbenchBridge(wb) {
@@ -1732,6 +1823,33 @@ function getNodeBorderClassNames(args) {
             : "";
     return [borderWidth, borderStyle, borderColor, ring].join(" ").trim();
 }
+/**
+ * Shared utility to generate handle className based on validation and value state.
+ * - Linked handles (with inbound edges) get black borders
+ * - Handles with values (but not linked) get darker gray borders
+ * - Handles with only defaults (no value, not linked) get lighter gray borders
+ * - Validation errors (red/amber) take precedence over value-based styling.
+ */
+function getHandleClassName(args) {
+    const { kind, id, validation } = args;
+    const vIssues = (kind === "input" ? validation.inputs : validation.outputs)?.filter((v) => v.handle === id) || [];
+    const hasAny = vIssues.length > 0;
+    const hasErr = vIssues.some((v) => v.level === "error");
+    // Determine border color based on priority:
+    // 1. Validation errors (red/amber) - highest priority
+    // 2. Gray border
+    let borderColor;
+    if (hasAny && hasErr) {
+        borderColor = "!border-red-500";
+    }
+    else if (hasAny) {
+        borderColor = "!border-amber-500";
+    }
+    else {
+        borderColor = "!border-gray-500 dark:!border-gray-400";
+    }
+    return cx("!w-3 !h-3 !bg-white !dark:bg-stone-900", borderColor, kind === "output" && "!rounded-none");
+}
 
 const WorkbenchContext = createContext(null);
 function useWorkbenchContext() {
@@ -2454,7 +2572,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: handleCopyLogs, className: "p-2 border border-gray-300 rounded flex items-center justify-center", title: copied ? "Copied!" : "Copy logs as formatted JSON", children: jsx(CopyIcon, { size: 14 }) }), jsx("button", { onClick: clearEvents, className: "p-2 border border-gray-300 rounded flex items-center justify-center", title: "Clear all events", children: jsx(TrashIcon, { size: 14 }) })] })] }), jsx("div", { ref: scrollRef, className: "flex-1 overflow-auto text-[11px] leading-4 divide-y divide-gray-200", children: rows.map((ev) => (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-12 shrink-0 text-right text-gray-500 select-none", children: ev.no }), 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-12", children: renderPayload(ev.payload) })] }, `${ev.at}:${ev.no}`))) })] }));
 }
 
-function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHideWorkbenchChange, toString, toElement, contextPanel, setInput, }) {
+function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHideWorkbenchChange, toString, contextPanel, setInput, }) {
     const safeToString = (typeId, value) => {
         try {
             if (typeof toString === "function") {
@@ -2832,15 +2950,17 @@ function DefaultNodeContent({ data, isConnectable, }) {
     const status = data.status ?? { activeRuns: 0 };
     const validation = data.validation ?? {
         inputs: [],
-        outputs: []};
+        outputs: [],
+        issues: [],
+    };
     const isRunning = !!status.activeRuns;
     const pct = Math.round(Math.max(0, Math.min(1, Number(status.progress) || 0)) * 100);
-    return (jsxs(Fragment, { children: [jsx("div", { className: cx("h-px", (isRunning || pct > 0) && "bg-blue-200 dark:bg-blue-900"), children: jsx("div", { className: cx("h-px transition-all", (isRunning || pct > 0) && "bg-blue-500"), style: { width: isRunning || pct > 0 ? `${pct}%` : 0 } }) }), jsx(NodeHandles, { data: data, isConnectable: isConnectable, getClassName: ({ kind, id }) => {
-                    const vIssues = (kind === "input" ? validation.inputs : validation.outputs).filter((v) => v.handle === id);
-                    const hasAny = vIssues.length > 0;
-                    const hasErr = vIssues.some((v) => v.level === "error");
-                    return cx("!w-3 !h-3 !bg-white !dark:bg-stone-900 !border-gray-500 dark:!border-gray-400", kind === "output" && "!rounded-none", hasAny && (hasErr ? "!border-red-500" : "!border-amber-500"));
-                }, renderLabel: ({ kind, id: handleId }) => {
+    return (jsxs(Fragment, { children: [jsx("div", { className: cx("h-px", (isRunning || pct > 0) && "bg-blue-200 dark:bg-blue-900"), children: jsx("div", { className: cx("h-px transition-all", (isRunning || pct > 0) && "bg-blue-500"), style: { width: isRunning || pct > 0 ? `${pct}%` : 0 } }) }), jsx(NodeHandles, { data: data, isConnectable: isConnectable, getClassName: ({ kind, id }) => getHandleClassName({
+                    kind,
+                    id,
+                    validation,
+                    inputConnected: data.inputConnected,
+                }), renderLabel: ({ kind, id: handleId }) => {
                     const entries = kind === "input" ? inputEntries : outputEntries;
                     const entry = entries.find((e) => e.id === handleId);
                     if (!entry)
@@ -3446,9 +3566,6 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         state: "local",
     });
     const selectedNode = def.nodes.find((n) => n.nodeId === selectedNodeId);
-    selectedNode
-        ? registry.nodes.get(selectedNode.typeId)
-        : undefined;
     const effectiveHandles = selectedNode
         ? computeEffectiveHandles(selectedNode, registry)
         : { inputs: {}, outputs: {}, inputDefaults: {} };
@@ -3739,7 +3856,12 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         const isLinked = def.edges.some((e) => e.target.nodeId === selectedNodeId && e.target.handle === handle);
         if (isLinked)
             return;
-        const typeId = effectiveHandles.inputs[handle];
+        // If raw is undefined, pass it through to delete the input value
+        if (raw === undefined) {
+            runner.setInput(selectedNodeId, handle, undefined);
+            return;
+        }
+        const typeId = getInputTypeId(effectiveHandles.inputs, handle);
         let value = raw;
         const parseArray = (s, map) => {
             const str = String(s).trim();
@@ -3948,7 +4070,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                                 const message = err instanceof Error ? err.message : String(err);
                                 alert(message);
                             }
-                        }, children: jsx(DownloadIcon, { size: 24 }) }), jsx("input", { ref: uploadInputRef, type: "file", accept: "application/json,.json", className: "hidden", onChange: onUploadPicked }), jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: triggerUpload, children: jsx(UploadIcon, { size: 24 }) }), jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsx(BugBeetleIcon, { size: 24, weight: debug ? "fill" : undefined })] }), jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsx(ListBulletsIcon, { size: 24, weight: showValues ? "fill" : undefined })] })] }), jsxs("div", { className: "flex flex-1 min-h-0", children: [jsx("div", { className: "flex-1 min-w-0", children: jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement, getDefaultNodeSize: overrides?.getDefaultNodeSize }) }), jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, toElement: toElement, contextPanel: overrides?.contextPanel })] })] }));
+                        }, children: jsx(DownloadIcon, { size: 24 }) }), jsx("input", { ref: uploadInputRef, type: "file", accept: "application/json,.json", className: "hidden", onChange: onUploadPicked }), jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: triggerUpload, children: jsx(UploadIcon, { size: 24 }) }), jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsx(BugBeetleIcon, { size: 24, weight: debug ? "fill" : undefined })] }), jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsx(ListBulletsIcon, { size: 24, weight: showValues ? "fill" : undefined })] })] }), jsxs("div", { className: "flex flex-1 min-h-0", children: [jsx("div", { className: "flex-1 min-w-0", children: jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement, getDefaultNodeSize: overrides?.getDefaultNodeSize }) }), jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, contextPanel: overrides?.contextPanel })] })] }));
 }
 function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, autoScroll, onAutoScrollChange, backendOptions, overrides, onInit, onChange, }) {
     const [registry, setRegistry] = useState(createSimpleGraphRegistry());
@@ -4029,5 +4151,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, backendOptions: backendOptions, overrides: overrides, onInit: onInit, onChange: onChange }) }));
 }
 
-export { AbstractWorkbench, CLIWorkbench, DefaultNode, DefaultNodeContent, DefaultNodeHeader, DefaultUIExtensionRegistry, InMemoryWorkbench, Inspector, LocalGraphRunner, NodeHandles, RemoteGraphRunner, WorkbenchCanvas, WorkbenchContext, WorkbenchProvider, WorkbenchStudio, formatDataUrlAsLabel, formatDeclaredTypeSignature, getNodeBorderClassNames, preformatValueForDisplay, prettyHandle, resolveOutputDisplay, summarizeDeep, toReactFlow, useQueryParamBoolean, useQueryParamString, useThrottledValue, useWorkbenchBridge, useWorkbenchContext, useWorkbenchGraphTick, useWorkbenchGraphUiTick, useWorkbenchVersionTick };
+export { AbstractWorkbench, CLIWorkbench, DefaultNode, DefaultNodeContent, DefaultNodeHeader, DefaultUIExtensionRegistry, InMemoryWorkbench, Inspector, LocalGraphRunner, NodeHandles, RemoteGraphRunner, WorkbenchCanvas, WorkbenchContext, WorkbenchProvider, WorkbenchStudio, computeEffectiveHandles, countVisibleHandles, estimateNodeSize, formatDataUrlAsLabel, formatDeclaredTypeSignature, getHandleClassName, getNodeBorderClassNames, layoutNode, preformatValueForDisplay, prettyHandle, resolveOutputDisplay, summarizeDeep, toReactFlow, useQueryParamBoolean, useQueryParamString, useThrottledValue, useWorkbenchBridge, useWorkbenchContext, useWorkbenchGraphTick, useWorkbenchGraphUiTick, useWorkbenchVersionTick };
 //# sourceMappingURL=index.js.map