@bian-womp/spark-workbench 0.2.36 → 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 {
@@ -341,7 +341,12 @@ class AbstractGraphRunner {
     setInput(nodeId, handle, value) {
         if (!this.stagedInputs[nodeId])
             this.stagedInputs[nodeId] = {};
-        this.stagedInputs[nodeId][handle] = value;
+        if (value === undefined) {
+            delete this.stagedInputs[nodeId][handle];
+        }
+        else {
+            this.stagedInputs[nodeId][handle] = value;
+        }
         if (this.engine) {
             this.engine.setInput(nodeId, handle, value);
         }
@@ -359,7 +364,14 @@ class AbstractGraphRunner {
             return;
         if (!this.stagedInputs[nodeId])
             this.stagedInputs[nodeId] = {};
-        Object.assign(this.stagedInputs[nodeId], inputs);
+        for (const [handle, value] of Object.entries(inputs)) {
+            if (value === undefined) {
+                delete this.stagedInputs[nodeId][handle];
+            }
+            else {
+                this.stagedInputs[nodeId][handle] = value;
+            }
+        }
         if (this.engine) {
             // Running: set all inputs
             this.engine.setInputs(nodeId, inputs);
@@ -588,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;
@@ -598,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") {
@@ -663,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;
             }
@@ -675,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}`, {
@@ -705,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}`, {
@@ -739,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: {} };
@@ -766,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 || {})) {
@@ -799,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) {
@@ -876,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) {
@@ -1720,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() {
@@ -1736,14 +1866,19 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
     const clearEvents = useCallback(() => setEvents([]), []);
     const [systemErrors, setSystemErrors] = useState([]);
     const [registryErrors, setRegistryErrors] = useState([]);
+    const [inputValidationErrors, setInputValidationErrors] = useState([]);
     const clearSystemErrors = useCallback(() => setSystemErrors([]), []);
     const clearRegistryErrors = useCallback(() => setRegistryErrors([]), []);
+    const clearInputValidationErrors = useCallback(() => setInputValidationErrors([]), []);
     const removeSystemError = useCallback((index) => {
         setSystemErrors((prev) => prev.filter((_, idx) => idx !== index));
     }, []);
     const removeRegistryError = useCallback((index) => {
         setRegistryErrors((prev) => prev.filter((_, idx) => idx !== index));
     }, []);
+    const removeInputValidationError = useCallback((index) => {
+        setInputValidationErrors((prev) => prev.filter((_, idx) => idx !== index));
+    }, []);
     // Fallback progress animation: drive progress to 100% over ~2 minutes
     const FALLBACK_TOTAL_MS = 2 * 60 * 1000;
     const [fallbackStarts, setFallbackStarts] = useState({});
@@ -1799,7 +1934,8 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
         const out = {};
         // Local: runtimeTypeId is not stored; derive from typed wrapper in outputsMap
         for (const n of def.nodes) {
-            const outputsDecl = registry.nodes.get(n.typeId)?.outputs ?? {};
+            const effectiveHandles = computeEffectiveHandles(n, registry);
+            const outputsDecl = effectiveHandles.outputs;
             const handles = Object.keys(outputsDecl);
             const cur = {};
             for (const h of handles) {
@@ -1960,10 +2096,13 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
         const offRunnerValue = runner.on("value", (e) => {
             if (e?.io === "input") {
                 const nodeId = e?.nodeId;
+                const handle = e?.handle;
                 setNodeStatus((s) => ({
                     ...s,
                     [nodeId]: { ...s[nodeId], invalidated: true },
                 }));
+                // Clear validation errors for this input when a valid value is set
+                setInputValidationErrors((prev) => prev.filter((err) => !(err.nodeId === nodeId && err.handle === handle)));
             }
             return add("runner", "value")(e);
         });
@@ -1972,6 +2111,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             const nodeError = e;
             const registryError = e;
             const systemError = e;
+            const inputValidationError = e;
             if (edgeError.kind === "edge-convert") {
                 const edgeId = edgeError.edgeId;
                 setEdgeStatus((s) => ({
@@ -2007,6 +2147,18 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
                     return [...prev, registryError];
                 });
             }
+            else if (inputValidationError.kind === "input-validation") {
+                // Track input validation errors for UI display
+                setInputValidationErrors((prev) => {
+                    // Avoid duplicates by checking nodeId, handle, and typeId
+                    if (prev.some((err) => err.nodeId === inputValidationError.nodeId &&
+                        err.handle === inputValidationError.handle &&
+                        err.typeId === inputValidationError.typeId)) {
+                        return prev;
+                    }
+                    return [...prev, inputValidationError];
+                });
+            }
             else if (systemError.kind === "system") {
                 // Track custom errors for UI display
                 setSystemErrors((prev) => {
@@ -2130,7 +2282,14 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             }
             return add("runner", "stats")(s);
         });
-        const offWbGraphChanged = wb.on("graphChanged", add("workbench", "graphChanged"));
+        const offWbGraphChanged = wb.on("graphChanged", (event) => {
+            // Clear validation errors for removed nodes
+            if (event.change?.type === "removeNode") {
+                const removedNodeId = event.change.nodeId;
+                setInputValidationErrors((prev) => prev.filter((err) => err.nodeId !== removedNodeId));
+            }
+            return add("workbench", "graphChanged")(event);
+        });
         const offWbGraphUiChanged = wb.on("graphUiChanged", add("workbench", "graphUiChanged"));
         const offWbValidationChanged = wb.on("validationChanged", add("workbench", "validationChanged"));
         // Ensure newly added nodes start as invalidated until first evaluation
@@ -2300,10 +2459,13 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
         clearEvents,
         systemErrors,
         registryErrors,
+        inputValidationErrors,
         clearSystemErrors,
         clearRegistryErrors,
+        clearInputValidationErrors,
         removeSystemError,
         removeRegistryError,
+        removeInputValidationError,
         isRunning,
         engineKind,
         start,
@@ -2328,10 +2490,13 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
         valuesTick,
         systemErrors,
         registryErrors,
+        inputValidationErrors,
         clearSystemErrors,
         clearRegistryErrors,
+        clearInputValidationErrors,
         removeSystemError,
         removeRegistryError,
+        removeInputValidationError,
         inputsMap,
         inputDefaultsMap,
         outputsMap,
@@ -2407,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") {
@@ -2419,7 +2584,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
             return String(value ?? "");
         }
     };
-    const { registry, def, selectedNodeId, selectedEdgeId, inputsMap, inputDefaultsMap, outputsMap, outputTypesMap, nodeStatus, edgeStatus, validationByNode, validationByEdge, validationGlobal, valuesTick, updateEdgeType, systemErrors, registryErrors, clearSystemErrors, clearRegistryErrors, removeSystemError, removeRegistryError, } = useWorkbenchContext();
+    const { registry, def, selectedNodeId, selectedEdgeId, inputsMap, inputDefaultsMap, outputsMap, outputTypesMap, nodeStatus, edgeStatus, validationByNode, validationByEdge, validationGlobal, valuesTick, updateEdgeType, systemErrors, registryErrors, inputValidationErrors, clearSystemErrors, clearRegistryErrors, clearInputValidationErrors, removeSystemError, removeRegistryError, removeInputValidationError, } = useWorkbenchContext();
     const nodeValidationIssues = validationByNode.issues;
     const edgeValidationIssues = validationByEdge.issues;
     const nodeValidationHandles = validationByNode;
@@ -2530,7 +2695,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
         }
         catch { }
     };
-    return (jsxs("div", { className: `${widthClass} border-l border-gray-300 p-3 flex flex-col h-full min-h-0 overflow-auto`, children: [jsxs("div", { className: "flex-1 overflow-auto", children: [contextPanel && jsx("div", { className: "mb-2", children: contextPanel }), systemErrors.length > 0 && (jsxs("div", { className: "mb-2 space-y-1", children: [systemErrors.map((err, i) => (jsxs("div", { className: "text-xs text-red-700 bg-red-50 border border-red-200 rounded px-2 py-1 flex items-start justify-between gap-2", children: [jsxs("div", { className: "flex-1", children: [jsx("div", { className: "font-semibold", children: err.code ? `Error ${err.code}` : "Error" }), jsx("div", { className: "break-words", children: err.message })] }), jsx("button", { className: "text-red-500 hover:text-red-700 text-[10px] px-1", onClick: () => removeSystemError(i), title: "Dismiss", children: jsx(XIcon, { size: 10 }) })] }, i))), systemErrors.length > 1 && (jsx("button", { className: "text-xs text-red-600 hover:text-red-800 underline", onClick: clearSystemErrors, children: "Clear all" }))] })), registryErrors.length > 0 && (jsxs("div", { className: "mb-2 space-y-1", children: [registryErrors.map((err, i) => (jsxs("div", { className: "text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded px-2 py-1 flex items-start justify-between gap-2", children: [jsxs("div", { className: "flex-1", children: [jsx("div", { className: "font-semibold", children: "Registry Error" }), jsx("div", { className: "break-words", children: err.message }), err.attempt && err.maxAttempts && (jsxs("div", { className: "text-[10px] text-amber-600 mt-1", children: ["Attempt ", err.attempt, " of ", err.maxAttempts] }))] }), jsx("button", { className: "text-amber-500 hover:text-amber-700 text-[10px] px-1", onClick: () => removeRegistryError(i), title: "Dismiss", children: jsx(XIcon, { size: 10 }) })] }, i))), registryErrors.length > 1 && (jsx("button", { className: "text-xs text-amber-600 hover:text-amber-800 underline", onClick: clearRegistryErrors, children: "Clear all" }))] })), jsx("div", { className: "font-semibold mb-2", children: "Inspector" }), jsxs("div", { className: "text-xs text-gray-500 mb-2", children: ["valuesTick: ", valuesTick] }), jsx("div", { className: "flex-1", 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}` }), !!m.data?.edgeId && (jsx("button", { className: "ml-2 text-[10px] px-1 py-[2px] border border-red-300 rounded text-red-700 hover:bg-red-50", onClick: (e) => {
+    return (jsxs("div", { className: `${widthClass} border-l border-gray-300 p-3 flex flex-col h-full min-h-0 overflow-auto`, children: [jsxs("div", { className: "flex-1 overflow-auto", children: [contextPanel && jsx("div", { className: "mb-2", children: contextPanel }), inputValidationErrors.length > 0 && (jsxs("div", { className: "mb-2 space-y-1", children: [inputValidationErrors.map((err, i) => (jsxs("div", { className: "text-xs text-red-700 bg-red-50 border border-red-200 rounded px-2 py-1 flex items-start justify-between gap-2", children: [jsxs("div", { className: "flex-1", children: [jsx("div", { className: "font-semibold", children: "Input Validation Error" }), jsx("div", { className: "break-words", children: err.message }), jsxs("div", { className: "text-[10px] text-red-600 mt-1", children: [err.nodeId, ".", err.handle, " (type: ", err.typeId, ")"] })] }), jsx("button", { className: "text-red-500 hover:text-red-700 text-[10px] px-1", onClick: () => removeInputValidationError(i), title: "Dismiss", children: jsx(XIcon, { size: 10 }) })] }, i))), inputValidationErrors.length > 1 && (jsx("button", { className: "text-xs text-red-600 hover:text-red-800 underline", onClick: clearInputValidationErrors, children: "Clear all" }))] })), systemErrors.length > 0 && (jsxs("div", { className: "mb-2 space-y-1", children: [systemErrors.map((err, i) => (jsxs("div", { className: "text-xs text-red-700 bg-red-50 border border-red-200 rounded px-2 py-1 flex items-start justify-between gap-2", children: [jsxs("div", { className: "flex-1", children: [jsx("div", { className: "font-semibold", children: err.code ? `Error ${err.code}` : "Error" }), jsx("div", { className: "break-words", children: err.message })] }), jsx("button", { className: "text-red-500 hover:text-red-700 text-[10px] px-1", onClick: () => removeSystemError(i), title: "Dismiss", children: jsx(XIcon, { size: 10 }) })] }, i))), systemErrors.length > 1 && (jsx("button", { className: "text-xs text-red-600 hover:text-red-800 underline", onClick: clearSystemErrors, children: "Clear all" }))] })), registryErrors.length > 0 && (jsxs("div", { className: "mb-2 space-y-1", children: [registryErrors.map((err, i) => (jsxs("div", { className: "text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded px-2 py-1 flex items-start justify-between gap-2", children: [jsxs("div", { className: "flex-1", children: [jsx("div", { className: "font-semibold", children: "Registry Error" }), jsx("div", { className: "break-words", children: err.message }), err.attempt && err.maxAttempts && (jsxs("div", { className: "text-[10px] text-amber-600 mt-1", children: ["Attempt ", err.attempt, " of ", err.maxAttempts] }))] }), jsx("button", { className: "text-amber-500 hover:text-amber-700 text-[10px] px-1", onClick: () => removeRegistryError(i), title: "Dismiss", children: jsx(XIcon, { size: 10 }) })] }, i))), registryErrors.length > 1 && (jsx("button", { className: "text-xs text-amber-600 hover:text-amber-800 underline", onClick: clearRegistryErrors, children: "Clear all" }))] })), jsx("div", { className: "font-semibold mb-2", children: "Inspector" }), jsxs("div", { className: "text-xs text-gray-500 mb-2", children: ["valuesTick: ", valuesTick] }), jsx("div", { className: "flex-1", 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}` }), !!m.data?.edgeId && (jsx("button", { className: "ml-2 text-[10px] px-1 py-[2px] border border-red-300 rounded text-red-700 hover:bg-red-50", onClick: (e) => {
                                                             e.stopPropagation();
                                                             deleteEdgeById(m.data?.edgeId);
                                                         }, title: "Delete referenced edge", children: "Delete edge" }))] }, 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] }), (() => {
@@ -2568,13 +2733,20 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                             const current = nodeInputs[h];
                                             const hasValue = current !== undefined && current !== null;
                                             const value = drafts[h] ?? safeToString(typeId, current);
-                                            const displayValue = hasValue ? value : "";
+                                            const displayValue = value;
                                             const placeholder = hasDefault ? defaultStr : undefined;
                                             const onChangeText = (text) => setDrafts((d) => ({ ...d, [h]: text }));
                                             const commit = () => {
                                                 const draft = drafts[h];
                                                 if (draft === undefined)
                                                     return;
+                                                // Only commit if draft differs from current value
+                                                const currentDisplay = safeToString(typeId, current);
+                                                if (draft === currentDisplay) {
+                                                    // No change, just sync originals without calling setInput
+                                                    setOriginals((o) => ({ ...o, [h]: draft }));
+                                                    return;
+                                                }
                                                 setInput(h, draft);
                                                 setOriginals((o) => ({ ...o, [h]: draft }));
                                             };
@@ -2778,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)
@@ -3392,9 +3566,9 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         state: "local",
     });
     const selectedNode = def.nodes.find((n) => n.nodeId === selectedNodeId);
-    const selectedDesc = selectedNode
-        ? registry.nodes.get(selectedNode.typeId)
-        : undefined;
+    const effectiveHandles = selectedNode
+        ? computeEffectiveHandles(selectedNode, registry)
+        : { inputs: {}, outputs: {}, inputDefaults: {} };
     const [exampleState, setExampleState] = useState(example ?? "");
     const defaultExamples = useMemo(() => [
         {
@@ -3682,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 = selectedDesc?.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();
@@ -3759,7 +3938,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             }
         }
         runner.setInput(selectedNodeId, handle, value);
-    }, [selectedNodeId, def.edges, selectedDesc, runner]);
+    }, [selectedNodeId, def.edges, effectiveHandles, runner]);
     const setInput = useMemo(() => {
         if (overrides?.setInput) {
             return overrides.setInput(baseSetInput, {
@@ -3891,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());
@@ -3972,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