@bian-womp/spark-workbench 0.2.9 → 0.2.11

package/lib/esm/index.js

@@ -167,6 +167,7 @@ class InMemoryWorkbench extends AbstractWorkbench {
             change: { type: "addNode", nodeId: id },
         });
         this.refreshValidation();
+        return id;
     }
     removeNode(nodeId) {
         this.def.nodes = this.def.nodes.filter((n) => n.nodeId !== nodeId);
@@ -191,6 +192,7 @@ class InMemoryWorkbench extends AbstractWorkbench {
             change: { type: "connect", edgeId: id },
         });
         this.refreshValidation();
+        return id;
     }
     disconnect(edgeId) {
         this.def.edges = this.def.edges.filter((e) => e.id !== edgeId);
@@ -407,6 +409,21 @@ class AbstractGraphRunner {
 class LocalGraphRunner extends AbstractGraphRunner {
     constructor(registry) {
         super(registry, { kind: "local" });
+        this.setEnvironment = (env, opts) => {
+            if (!this.runtime)
+                return;
+            if (opts?.merge) {
+                const current = this.runtime.getEnvironment();
+                const next = { ...(current || {}), ...(env || {}) };
+                this.runtime.setEnvironment(next);
+            }
+            else {
+                this.runtime.setEnvironment(env);
+            }
+        };
+        this.getEnvironment = () => {
+            return this.runtime?.getEnvironment?.();
+        };
         this.emit("transport", { state: "local" });
     }
     build(def) {
@@ -505,17 +522,36 @@ class LocalGraphRunner extends AbstractGraphRunner {
             const runtimeInputs = this.runtime
                 ? this.runtime.getNodeData?.(n.nodeId)?.inputs ?? {}
                 : {};
-            if (this.isRunning()) {
-                out[n.nodeId] = runtimeInputs;
-            }
-            else {
-                const merged = { ...runtimeInputs, ...staged };
-                if (Object.keys(merged).length > 0)
-                    out[n.nodeId] = merged;
-            }
+            const merged = { ...runtimeInputs, ...staged };
+            if (Object.keys(merged).length > 0)
+                out[n.nodeId] = merged;
         }
         return out;
     }
+    async snapshotFull() {
+        const def = undefined; // UI will supply def/positions on download for local
+        const inputs = this.getInputs(this.runtime
+            ? {
+                nodes: Array.from(this.runtime.getNodeIds()).map((id) => ({ nodeId: id, typeId: "" })),
+                edges: [],
+            }
+            : { nodes: [], edges: [] });
+        const outputs = this.getOutputs(this.runtime
+            ? {
+                nodes: Array.from(this.runtime.getNodeIds()).map((id) => ({ nodeId: id, typeId: "" })),
+                edges: [],
+            }
+            : { nodes: [], edges: [] });
+        const environment = this.getEnvironment() || {};
+        return { def, environment, inputs, outputs };
+    }
+    async applySnapshotFull(payload) {
+        if (payload.def)
+            this.build(payload.def);
+        this.setEnvironment?.(payload.environment || {}, { merge: false });
+        // Hydrate via runtime for exact restore and re-emit
+        this.runtime?.hydrate({ inputs: payload.inputs || {}, outputs: payload.outputs || {} }, { reemit: true });
+    }
     dispose() {
         super.dispose();
         this.runtime = undefined;
@@ -687,6 +723,36 @@ class RemoteGraphRunner extends AbstractGraphRunner {
             return value;
         }
     }
+    async snapshotFull() {
+        const runner = await this.ensureRemoteRunner();
+        try {
+            return await runner.snapshotFull();
+        }
+        catch {
+            return { def: undefined, environment: {}, inputs: {}, outputs: {} };
+        }
+    }
+    async applySnapshotFull(payload) {
+        const runner = await this.ensureRemoteRunner();
+        await runner.applySnapshotFull(payload);
+    }
+    setEnvironment(env, opts) {
+        const t = this.transport;
+        if (!t)
+            return;
+        t.request({
+            message: {
+                type: "SetEnvironment",
+                payload: { environment: env, merge: opts?.merge },
+            },
+        }).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.
+        return undefined;
+    }
     getOutputs(def) {
         const out = {};
         const cache = this.valueCache;
@@ -720,7 +786,7 @@ class RemoteGraphRunner extends AbstractGraphRunner {
                 if (rec && rec.io === "input")
                     cur[h] = rec.value;
             }
-            const merged = this.isRunning() ? cur : { ...cur, ...staged };
+            const merged = { ...cur, ...staged };
             if (Object.keys(merged).length > 0)
                 out[n.nodeId] = merged;
         }
@@ -2081,7 +2147,7 @@ function DefaultNodeHeader({ id, title, status, validation, right, onInvalidate,
                             .join("; ") })), jsxs("span", { className: "text-[10px] opacity-70", children: ["(", id, ")"] })] })] }));
 }
 function DefaultNodeContent({ id, data, isConnectable, }) {
-    const ctx = useWorkbenchContext();
+    useWorkbenchContext();
     const { showValues, inputValues, outputValues, toString } = data;
     const inputEntries = data.inputHandles ?? [];
     const outputEntries = data.outputHandles ?? [];
@@ -2091,98 +2157,6 @@ function DefaultNodeContent({ id, data, isConnectable, }) {
         outputs: []};
     const isRunning = !!status.activeRuns;
     const pct = Math.round(Math.max(0, Math.min(1, Number(status.progress) || 0)) * 100);
-    const handleBake = React.useCallback(async (handleId) => {
-        try {
-            const typeId = ctx.outputTypesMap?.[id]?.[handleId];
-            const rawValue = ctx.outputsMap?.[id]?.[handleId];
-            if (!typeId || rawValue === undefined)
-                return;
-            const unwrap = (v) => isTypedOutput(v) ? getTypedOutputValue(v) : v;
-            const clone = (v) => typeof structuredClone === "function"
-                ? structuredClone(v)
-                : JSON.parse(JSON.stringify(v));
-            const coerceIfNeeded = async (fromType, toType, value) => {
-                if (!toType || toType === fromType || !ctx.runner?.coerce)
-                    return value;
-                try {
-                    return await ctx.runner.coerce(fromType, toType, value);
-                }
-                catch {
-                    return value;
-                }
-            };
-            const positions = ctx.wb.getPositions();
-            const pos = positions[id] || { x: 0, y: 0 };
-            const isArray = typeId.endsWith("[]");
-            const baseTypeId = isArray ? typeId.slice(0, -2) : typeId;
-            const tArr = isArray ? ctx.registry?.types.get(typeId) : undefined;
-            const tElem = ctx.registry?.types.get(baseTypeId);
-            const singleTarget = !isArray ? tElem?.bakeTarget : undefined;
-            const arrTarget = isArray ? tArr?.bakeTarget : undefined;
-            const elemTarget = isArray ? tElem?.bakeTarget : undefined;
-            const makeTargetInfo = (bt) => {
-                if (!bt)
-                    return undefined;
-                const node = ctx.registry?.nodes.get(String(bt.nodeTypeId));
-                const inType = getInputTypeId(node?.inputs, String(bt.inputHandle || "Value"));
-                return { bt, inType };
-            };
-            // Plan and execute
-            if (singleTarget) {
-                const info = makeTargetInfo(singleTarget);
-                const v = unwrap(rawValue);
-                const coerced = await coerceIfNeeded(typeId, info?.inType, v);
-                ctx.wb.addNode({
-                    nodeId: undefined,
-                    typeId: String(singleTarget.nodeTypeId),
-                    position: { x: pos.x + 180, y: pos.y },
-                    params: {},
-                    initialInputs: {
-                        [String(singleTarget.inputHandle || "Value")]: clone(coerced),
-                    },
-                });
-                return;
-            }
-            if (isArray && arrTarget) {
-                const info = makeTargetInfo(arrTarget);
-                const v = unwrap(rawValue);
-                const coerced = await coerceIfNeeded(typeId, info?.inType, v);
-                ctx.wb.addNode({
-                    nodeId: undefined,
-                    typeId: String(arrTarget.nodeTypeId),
-                    position: { x: pos.x + 180, y: pos.y },
-                    params: {},
-                    initialInputs: {
-                        [String(arrTarget.inputHandle || "Value")]: clone(coerced),
-                    },
-                });
-                return;
-            }
-            if (isArray && elemTarget && Array.isArray(rawValue)) {
-                const info = makeTargetInfo(elemTarget);
-                const items = rawValue.map(unwrap);
-                const coercedItems = await Promise.all(items.map((v) => coerceIfNeeded(baseTypeId, info?.inType, v)));
-                const COLS = 4;
-                const DX = 180;
-                const DY = 160;
-                coercedItems.forEach((cv, idx) => {
-                    const col = idx % COLS;
-                    const row = Math.floor(idx / COLS);
-                    ctx.wb.addNode({
-                        nodeId: undefined,
-                        typeId: String(elemTarget.nodeTypeId),
-                        position: { x: pos.x + (col + 1) * DX, y: pos.y + row * DY },
-                        params: {},
-                        initialInputs: {
-                            [String(elemTarget.inputHandle || "Value")]: clone(cv),
-                        },
-                    });
-                });
-                return;
-            }
-        }
-        catch { }
-    }, [ctx, id]);
     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;
@@ -2210,26 +2184,7 @@ function DefaultNodeContent({ id, data, isConnectable, }) {
                         const txt = toString(resolved.typeId, resolved.value);
                         return typeof txt === "string" ? txt : String(txt);
                     })();
-                    const tId = ctx.outputTypesMap?.[id]?.[handleId];
-                    let canBake = false;
-                    if (tId?.endsWith("[]")) {
-                        const base = tId.slice(0, -2);
-                        const tArr = ctx.registry?.types.get(tId);
-                        const tElem = ctx.registry?.types.get(base);
-                        const arrTarget = tArr?.bakeTarget;
-                        const elemTarget = tElem?.bakeTarget;
-                        canBake = !!((arrTarget && ctx.registry?.nodes?.has?.(arrTarget.nodeTypeId)) ||
-                            (elemTarget && ctx.registry?.nodes?.has?.(elemTarget.nodeTypeId)));
-                    }
-                    else if (tId) {
-                        const t = ctx.registry?.types.get(tId);
-                        const target = t?.bakeTarget;
-                        canBake = !!(target && ctx.registry?.nodes?.has?.(target.nodeTypeId));
-                    }
-                    return (jsxs("span", { className: "flex items-center gap-1 w-full", children: [kind === "output" ? (jsxs(Fragment, { children: [canBake && (jsx("button", { onClick: (e) => {
-                                            e.stopPropagation();
-                                            handleBake(handleId);
-                                        }, title: "Bake value", className: "pointer-events-auto border border-gray-300 rounded px-1 py-0.5 text-[10px] bg-white/80 hover:bg-white mr-2", children: "Bake" })), valueText !== undefined && (jsx("span", { className: "opacity-60 truncate pl-1", style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText })), jsx("span", { className: "truncate shrink-0", style: { maxWidth: "40%" }, children: handleId })] })) : (jsxs(Fragment, { children: [jsx("span", { className: "truncate shrink-0", style: { maxWidth: "40%" }, children: handleId }), valueText !== undefined && (jsx("span", { className: "opacity-60 truncate pr-1", style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText }))] })), hasAny && (jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "shrink-0", title: title }))] }));
+                    return (jsxs("span", { className: "flex items-center gap-1 w-full", children: [kind === "output" ? (jsxs(Fragment, { children: [valueText !== undefined && (jsx("span", { className: "opacity-60 truncate pl-1", style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText })), jsx("span", { className: "truncate shrink-0", style: { maxWidth: "40%" }, children: handleId })] })) : (jsxs(Fragment, { children: [jsx("span", { className: "truncate shrink-0", style: { maxWidth: "40%" }, children: handleId }), valueText !== undefined && (jsx("span", { className: "opacity-60 truncate pr-1", style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText }))] })), hasAny && (jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "shrink-0", title: title }))] }));
                 } })] }));
 }
 
@@ -2320,7 +2275,7 @@ function DefaultContextMenu({ open, clientPos, onAdd, onClose, }) {
 }
 
 function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {
-    const { wb, runner, engineKind } = useWorkbenchContext();
+    const { wb, runner, engineKind, registry, outputsMap, outputTypesMap } = useWorkbenchContext();
     const ref = useRef(null);
     // outside click + ESC
     useEffect(() => {
@@ -2347,47 +2302,182 @@ function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {
         if (open)
             ref.current?.focus();
     }, [open]);
-    if (!open || !clientPos || !nodeId)
-        return null;
-    // clamp
-    const MENU_MIN_WIDTH = 180;
-    const PADDING = 16;
-    const x = Math.min(clientPos.x, (typeof window !== "undefined" ? window.innerWidth : 0) -
-        (MENU_MIN_WIDTH + PADDING));
-    const y = Math.min(clientPos.y, (typeof window !== "undefined" ? window.innerHeight : 0) - 240);
+    // Bake helpers
+    const getBakeableOutputs = () => {
+        try {
+            const def = wb.export();
+            const node = def.nodes.find((n) => n.nodeId === nodeId);
+            if (!node)
+                return [];
+            const desc = registry.nodes.get(node.typeId);
+            const handles = Object.keys(desc?.outputs || {});
+            const out = [];
+            for (const h of handles) {
+                const tId = outputTypesMap?.[nodeId]?.[h];
+                if (!tId)
+                    continue;
+                if (tId.endsWith("[]")) {
+                    const base = tId.slice(0, -2);
+                    const tArr = registry.types.get(tId);
+                    const tElem = registry.types.get(base);
+                    const arrT = tArr?.bakeTarget;
+                    const elemT = tElem?.bakeTarget;
+                    if ((arrT && registry.nodes.has(arrT.nodeTypeId)) ||
+                        (elemT && registry.nodes.has(elemT.nodeTypeId)))
+                        out.push(h);
+                }
+                else {
+                    const t = registry.types.get(tId);
+                    const bt = t?.bakeTarget;
+                    if (bt && registry.nodes.has(bt.nodeTypeId))
+                        out.push(h);
+                }
+            }
+            return out;
+        }
+        catch {
+            return [];
+        }
+    };
+    const doBake = async (handleId) => {
+        try {
+            const typeId = outputTypesMap?.[nodeId]?.[handleId];
+            const raw = outputsMap?.[nodeId]?.[handleId];
+            if (!typeId || raw === undefined)
+                return;
+            const unwrap = (v) => isTypedOutput(v) ? getTypedOutputValue(v) : v;
+            const clone = (v) => typeof structuredClone === "function"
+                ? structuredClone(v)
+                : JSON.parse(JSON.stringify(v));
+            const coerceIfNeeded = async (fromType, toType, value) => {
+                if (!toType || toType === fromType || !runner?.coerce)
+                    return value;
+                try {
+                    return await runner.coerce(fromType, toType, value);
+                }
+                catch {
+                    return value;
+                }
+            };
+            const pos = wb.getPositions?.()[nodeId] || { x: 0, y: 0 };
+            const isArray = typeId.endsWith("[]");
+            const baseTypeId = isArray ? typeId.slice(0, -2) : typeId;
+            const tArr = isArray ? registry.types.get(typeId) : undefined;
+            const tElem = registry.types.get(baseTypeId);
+            const singleTarget = !isArray ? tElem?.bakeTarget : undefined;
+            const arrTarget = isArray ? tArr?.bakeTarget : undefined;
+            const elemTarget = isArray ? tElem?.bakeTarget : undefined;
+            if (singleTarget) {
+                const nodeDesc = registry.nodes.get(singleTarget.nodeTypeId);
+                const inType = getInputTypeId(nodeDesc?.inputs, singleTarget.inputHandle);
+                const coerced = await coerceIfNeeded(typeId, inType, unwrap(raw));
+                const newId = wb.addNode({
+                    typeId: singleTarget.nodeTypeId,
+                    position: { x: pos.x + 180, y: pos.y },
+                    params: {},
+                });
+                runner.update(wb.export());
+                await runner.whenIdle();
+                runner.setInputs(newId, { [singleTarget.inputHandle]: coerced });
+                return;
+            }
+            if (isArray && arrTarget) {
+                const nodeDesc = registry.nodes.get(arrTarget.nodeTypeId);
+                const inType = getInputTypeId(nodeDesc?.inputs, arrTarget.inputHandle);
+                const coerced = await coerceIfNeeded(typeId, inType, unwrap(raw));
+                const newId = `n${Math.random().toString(36).slice(2, 8)}`;
+                wb.addNode({
+                    nodeId: newId,
+                    typeId: arrTarget.nodeTypeId,
+                    position: { x: pos.x + 180, y: pos.y },
+                    params: {},
+                });
+                runner.update(wb.export());
+                await runner.whenIdle();
+                runner.setInputs(newId, { [arrTarget.inputHandle]: coerced });
+                return;
+            }
+            if (isArray && elemTarget) {
+                const nodeDesc = registry.nodes.get(elemTarget.nodeTypeId);
+                const inType = getInputTypeId(nodeDesc?.inputs, elemTarget.inputHandle);
+                const src = unwrap(raw);
+                const items = Array.isArray(src) ? src : [src];
+                const coercedItems = await Promise.all(items.map((v) => coerceIfNeeded(baseTypeId, inType, v)));
+                const COLS = 4;
+                const DX = 180;
+                const DY = 160;
+                for (let idx = 0; idx < coercedItems.length; idx++) {
+                    const cv = coercedItems[idx];
+                    const col = idx % COLS;
+                    const row = Math.floor(idx / COLS);
+                    const newId = wb.addNode({
+                        typeId: elemTarget.nodeTypeId,
+                        position: { x: pos.x + (col + 1) * DX, y: pos.y + row * DY },
+                        params: {},
+                        initialInputs: { [elemTarget.inputHandle]: clone(cv) },
+                    });
+                    runner.update(wb.export());
+                    await runner.whenIdle();
+                    runner.setInputs(newId, { [elemTarget.inputHandle]: cv });
+                }
+                return;
+            }
+        }
+        catch { }
+    };
     // actions
-    const handleDelete = () => {
+    const handleDelete = useCallback(() => {
         wb.removeNode(nodeId);
         onClose();
-    };
-    const handleDuplicate = () => {
+    }, [nodeId, wb, onClose]);
+    const handleDuplicate = useCallback(() => {
         const def = wb.export();
         const n = def.nodes.find((n) => n.nodeId === nodeId);
         if (!n)
             return onClose();
         const pos = wb.getPositions?.()[nodeId] || { x: 0, y: 0 };
-        wb.addNode({ typeId: n.typeId, params: n.params, position: { x: pos.x + 24, y: pos.y + 24 } });
+        wb.addNode({
+            typeId: n.typeId,
+            params: n.params,
+            position: { x: pos.x + 24, y: pos.y + 24 },
+        });
         onClose();
-    };
-    const handleCopyId = async () => {
+    }, [nodeId, wb, onClose]);
+    useCallback(async (handleId) => {
+        await doBake(handleId);
+        onClose();
+    }, [doBake, onClose]);
+    const handleCopyId = useCallback(async () => {
         try {
             await navigator.clipboard.writeText(nodeId);
         }
         catch { }
         onClose();
-    };
-    const canRunPull = engineKind()?.toString() === "pull";
-    const handleRunPull = async () => {
+    }, [nodeId, onClose]);
+    const handleRunPull = useCallback(async () => {
         try {
             await runner.computeNode(nodeId);
         }
         catch { }
         onClose();
-    };
+    }, [nodeId, runner, onClose]);
+    if (!open || !clientPos || !nodeId)
+        return null;
+    // clamp
+    const MENU_MIN_WIDTH = 180;
+    const PADDING = 16;
+    const x = Math.min(clientPos.x, (typeof window !== "undefined" ? window.innerWidth : 0) -
+        (MENU_MIN_WIDTH + PADDING));
+    const y = Math.min(clientPos.y, (typeof window !== "undefined" ? window.innerHeight : 0) - 240);
+    const canRunPull = engineKind()?.toString() === "pull";
+    const outs = getBakeableOutputs();
     return (jsxs("div", { ref: ref, tabIndex: -1, className: "fixed z-[1000] bg-white border border-gray-300 rounded-lg shadow-lg p-1 min-w-[180px] text-sm text-gray-700", style: { left: x, top: y }, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onWheel: (e) => e.stopPropagation(), onContextMenu: (e) => {
             e.preventDefault();
             e.stopPropagation();
-        }, children: [jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Node (", nodeId, ")"] }), jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handleDelete, children: "Delete" }), jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handleDuplicate, children: "Duplicate" }), canRunPull && (jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handleRunPull, children: "Run (pull)" })), jsx("div", { className: "h-px bg-gray-200 my-1" }), jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handleCopyId, children: "Copy Node ID" })] }));
+        }, children: [jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Node (", nodeId, ")"] }), jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handleDelete, children: "Delete" }), jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handleDuplicate, children: "Duplicate" }), canRunPull && (jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handleRunPull, children: "Run (pull)" })), jsx("div", { className: "h-px bg-gray-200 my-1" }), outs.length > 0 && (jsxs(Fragment, { children: [jsx("div", { className: "px-2 py-1 font-semibold text-gray-700", children: "Bake" }), outs.map((h) => (jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: async () => {
+                            await doBake(h);
+                            onClose();
+                        }, children: ["Bake: ", h] }, h))), jsx("div", { className: "h-px bg-gray-200 my-1" })] })), jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handleCopyId, children: "Copy Node ID" })] }));
 }
 
 const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, getDefaultNodeSize }, ref) => {
@@ -2428,6 +2518,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                 outputValues: n.data.outputValues,
                 status: n.data.status,
                 validation: n.data.validation,
+                inputConnected: n.data.inputConnected,
             },
         });
         return isEqual(pick(a), pick(b));
@@ -2617,10 +2708,21 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
             setNodeMenuOpen(false);
         }
     };
-    const addNodeAt = (typeId, pos) => {
+    const addNodeAt = useCallback((typeId, pos) => {
         wb.addNode({ typeId, position: pos });
-    };
-    return (jsx("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: jsx(ReactFlowProvider, { children: jsxs(ReactFlow, { nodes: throttled.nodes, edges: throttled.edges, nodeTypes: nodeTypes, selectionOnDrag: true, onInit: (inst) => (rfInstanceRef.current = inst), onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, deleteKeyCode: ["Backspace", "Delete"], proOptions: { hideAttribution: true }, noDragClassName: "wb-nodrag", noWheelClassName: "wb-nowheel", noPanClassName: "wb-nopan", fitView: true, children: [jsx(Background, { id: "workbench-canvas-background", variant: BackgroundVariant.Dots, gap: 12, size: 1 }), jsx(MiniMap, {}), jsx(Controls, {}), jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, onAdd: addNodeAt, onClose: () => setMenuOpen(false) }), jsx(NodeContextMenu, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, onClose: () => setNodeMenuOpen(false) })] }) }) }));
+    }, [wb]);
+    useCallback((inst) => {
+        rfInstanceRef.current = inst;
+    }, []);
+    const onCloseMenu = useCallback(() => {
+        setMenuOpen(false);
+    }, []);
+    const onCloseNodeMenu = useCallback(() => {
+        setNodeMenuOpen(false);
+    }, []);
+    return (jsx("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: jsx(ReactFlowProvider, { children: jsxs(ReactFlow, { nodes: throttled.nodes, edges: throttled.edges, nodeTypes: nodeTypes, selectionOnDrag: true, onInit: (inst) => {
+                    rfInstanceRef.current = inst;
+                }, onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, deleteKeyCode: ["Backspace", "Delete"], proOptions: { hideAttribution: true }, noDragClassName: "wb-nodrag", noWheelClassName: "wb-nowheel", noPanClassName: "wb-nopan", fitView: true, children: [jsx(Background, { id: "workbench-canvas-background", variant: BackgroundVariant.Dots, gap: 12, size: 1 }), jsx(MiniMap, {}), jsx(Controls, {}), jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, onAdd: addNodeAt, onClose: onCloseMenu }), !!nodeAtMenu && (jsx(NodeContextMenu, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, onClose: onCloseNodeMenu }))] }) }) }));
 });
 
 function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, example, onExampleChange, engine, onEngineChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, overrides, onInit, onChange, }) {
@@ -2675,6 +2777,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
     const lastAutoLaunched = useRef(undefined);
     const autoLayoutRan = useRef(false);
     const canvasRef = useRef(null);
+    const uploadInputRef = useRef(null);
     // Expose init callback with setInitialGraph helper
     const initCalled = useRef(false);
     useEffect(() => {
@@ -2779,6 +2882,66 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             alert(String(err?.message ?? err));
         }
     }, [wb, runner]);
+    const onUploadPicked = useCallback(async (e) => {
+        try {
+            const file = e.target.files?.[0];
+            if (!file)
+                return;
+            const text = await file.text();
+            const parsed = JSON.parse(text);
+            // Support both Graph and Snapshot payloads
+            const isSnapshot = parsed &&
+                typeof parsed === "object" &&
+                (parsed.def || parsed.inputs || parsed.outputs || parsed.environment);
+            if (isSnapshot) {
+                const def = parsed.def;
+                const positions = parsed.positions || {};
+                const environment = parsed.environment || {};
+                const inputs = parsed.inputs || {};
+                if (def) {
+                    // Remote exact restore path
+                    await runner.applySnapshotFull({
+                        def,
+                        environment,
+                        inputs,
+                        outputs: parsed.outputs || {},
+                    });
+                    await wb.load(def);
+                    if (positions && typeof positions === "object")
+                        wb.setPositions(positions);
+                }
+            }
+            else {
+                const def = parsed?.def ?? parsed;
+                const inputs = parsed?.inputs ?? {};
+                await wb.load(def);
+                try {
+                    runner.build(wb.export());
+                }
+                catch { }
+                if (inputs && typeof inputs === "object") {
+                    for (const [nodeId, map] of Object.entries(inputs)) {
+                        try {
+                            runner.setInputs(nodeId, map);
+                        }
+                        catch { }
+                    }
+                }
+            }
+            runAutoLayout();
+        }
+        catch (err) {
+            alert(String(err?.message ?? err));
+        }
+        finally {
+            // reset input so same file can be picked again
+            if (uploadInputRef.current)
+                uploadInputRef.current.value = "";
+        }
+    }, [wb, runner, runAutoLayout]);
+    const triggerUpload = useCallback(() => {
+        uploadInputRef.current?.click();
+    }, []);
     const hydrateFromBackend = useCallback(async (kind, base) => {
         try {
             const transport = kind === "remote-http"
@@ -3076,7 +3239,35 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                             catch (err) {
                                 alert(String(err?.message ?? err));
                             }
-                        }, disabled: !engine, children: "Start" })), jsx("button", { className: "border border-gray-300 rounded px-2 py-1.5", onClick: runAutoLayout, children: "Auto Layout" }), jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: () => canvasRef.current?.fitView?.(), title: "Fit View", children: "Fit View" }), jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: downloadGraph, children: "Download Graph" }), jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsx("span", { children: "Debug events" })] }), jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsx("span", { children: "Show values in nodes" })] })] }), jsxs("div", { className: "flex flex-1 min-h-0", children: [jsx("div", { className: "flex-1 min-w-0", children: jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement, getDefaultNodeSize: overrides?.getDefaultNodeSize }) }), jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, toElement: toElement, contextPanel: overrides?.contextPanel })] })] }));
+                        }, disabled: !engine, children: "Start" })), jsx("button", { className: "border border-gray-300 rounded px-2 py-1.5", onClick: runAutoLayout, children: "Auto Layout" }), jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: () => canvasRef.current?.fitView?.(), title: "Fit View", children: "Fit View" }), jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: downloadGraph, children: "Download Graph" }), jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: async () => {
+                            try {
+                                const def = wb.export();
+                                const positions = wb.getPositions();
+                                const snapshot = await runner.snapshotFull();
+                                const payload = {
+                                    ...snapshot,
+                                    def,
+                                    positions,
+                                    schemaVersion: 1,
+                                };
+                                const pretty = JSON.stringify(payload, null, 2);
+                                const blob = new Blob([pretty], { type: "application/json" });
+                                const url = URL.createObjectURL(blob);
+                                const a = document.createElement("a");
+                                const d = new Date();
+                                const pad = (n) => String(n).padStart(2, "0");
+                                const ts = `${pad(d.getMonth() + 1)}${pad(d.getDate())}-${pad(d.getHours())}${pad(d.getMinutes())}`;
+                                a.href = url;
+                                a.download = `spark-snapshot-${ts}.json`;
+                                document.body.appendChild(a);
+                                a.click();
+                                a.remove();
+                                URL.revokeObjectURL(url);
+                            }
+                            catch (err) {
+                                alert(String(err?.message ?? err));
+                            }
+                        }, children: "Download Snapshot" }), 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: "Upload Graph/Snapshot" }), jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsx("span", { children: "Debug events" })] }), jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsx("span", { children: "Show values in nodes" })] })] }), jsxs("div", { className: "flex flex-1 min-h-0", children: [jsx("div", { className: "flex-1 min-w-0", children: jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement, getDefaultNodeSize: overrides?.getDefaultNodeSize }) }), jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, toElement: toElement, contextPanel: overrides?.contextPanel })] })] }));
 }
 function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, autoScroll, onAutoScrollChange, overrides, onInit, onChange, }) {
     const [registry, setRegistry] = useState(createSimpleGraphRegistry());