@bian-womp/spark-workbench 0.2.10 → 0.2.11

package/lib/cjs/index.cjs

@@ -411,6 +411,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) {
@@ -509,17 +524,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;
@@ -691,6 +725,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;
@@ -724,7 +788,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;
         }
@@ -2240,14 +2304,6 @@ 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 {
@@ -2314,43 +2370,40 @@ function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {
             const arrTarget = isArray ? tArr?.bakeTarget : undefined;
             const elemTarget = isArray ? tElem?.bakeTarget : undefined;
             if (singleTarget) {
-                const nodeDesc = registry.nodes.get(String(singleTarget.nodeTypeId));
-                const inType = sparkGraph.getInputTypeId(nodeDesc?.inputs, String(singleTarget.inputHandle || "Value"));
+                const nodeDesc = registry.nodes.get(singleTarget.nodeTypeId);
+                const inType = sparkGraph.getInputTypeId(nodeDesc?.inputs, singleTarget.inputHandle);
                 const coerced = await coerceIfNeeded(typeId, inType, unwrap(raw));
                 const newId = wb.addNode({
-                    typeId: String(singleTarget.nodeTypeId),
+                    typeId: singleTarget.nodeTypeId,
                     position: { x: pos.x + 180, y: pos.y },
                     params: {},
                 });
                 runner.update(wb.export());
                 await runner.whenIdle();
-                runner.setInputs(newId, {
-                    [String(singleTarget.inputHandle || "Value")]: coerced,
-                });
+                runner.setInputs(newId, { [singleTarget.inputHandle]: coerced });
                 return;
             }
             if (isArray && arrTarget) {
-                const nodeDesc = registry.nodes.get(String(arrTarget.nodeTypeId));
-                const inType = sparkGraph.getInputTypeId(nodeDesc?.inputs, String(arrTarget.inputHandle || "Value"));
+                const nodeDesc = registry.nodes.get(arrTarget.nodeTypeId);
+                const inType = sparkGraph.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: String(arrTarget.nodeTypeId),
+                    typeId: arrTarget.nodeTypeId,
                     position: { x: pos.x + 180, y: pos.y },
                     params: {},
                 });
                 runner.update(wb.export());
                 await runner.whenIdle();
-                runner.setInputs(newId, {
-                    [String(arrTarget.inputHandle || "Value")]: coerced,
-                });
+                runner.setInputs(newId, { [arrTarget.inputHandle]: coerced });
                 return;
             }
-            if (isArray && elemTarget && Array.isArray(raw)) {
-                const nodeDesc = registry.nodes.get(String(elemTarget.nodeTypeId));
-                const inType = sparkGraph.getInputTypeId(nodeDesc?.inputs, String(elemTarget.inputHandle || "Value"));
-                const items = raw.map(unwrap);
+            if (isArray && elemTarget) {
+                const nodeDesc = registry.nodes.get(elemTarget.nodeTypeId);
+                const inType = sparkGraph.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;
@@ -2360,18 +2413,14 @@ function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {
                     const col = idx % COLS;
                     const row = Math.floor(idx / COLS);
                     const newId = wb.addNode({
-                        typeId: String(elemTarget.nodeTypeId),
+                        typeId: elemTarget.nodeTypeId,
                         position: { x: pos.x + (col + 1) * DX, y: pos.y + row * DY },
                         params: {},
-                        initialInputs: {
-                            [String(elemTarget.inputHandle || "Value")]: clone(cv),
-                        },
+                        initialInputs: { [elemTarget.inputHandle]: clone(cv) },
                     });
                     runner.update(wb.export());
                     await runner.whenIdle();
-                    runner.setInputs(newId, {
-                        [String(elemTarget.inputHandle || "Value")]: cv,
-                    });
+                    runner.setInputs(newId, { [elemTarget.inputHandle]: cv });
                 }
                 return;
             }
@@ -2414,6 +2463,14 @@ function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {
         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 (jsxRuntime.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) => {
@@ -2463,6 +2520,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));
@@ -2666,7 +2724,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
     }, []);
     return (jsxRuntime.jsx("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: jsxRuntime.jsx(react.ReactFlowProvider, { children: jsxRuntime.jsxs(react.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: [jsxRuntime.jsx(react.Background, { id: "workbench-canvas-background", variant: react.BackgroundVariant.Dots, gap: 12, size: 1 }), jsxRuntime.jsx(react.MiniMap, {}), jsxRuntime.jsx(react.Controls, {}), jsxRuntime.jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, onAdd: addNodeAt, onClose: onCloseMenu }), jsxRuntime.jsx(NodeContextMenu, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, onClose: onCloseNodeMenu })] }) }) }));
+                }, 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: [jsxRuntime.jsx(react.Background, { id: "workbench-canvas-background", variant: react.BackgroundVariant.Dots, gap: 12, size: 1 }), jsxRuntime.jsx(react.MiniMap, {}), jsxRuntime.jsx(react.Controls, {}), jsxRuntime.jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, onAdd: addNodeAt, onClose: onCloseMenu }), !!nodeAtMenu && (jsxRuntime.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, }) {
@@ -2721,6 +2779,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
     const lastAutoLaunched = React.useRef(undefined);
     const autoLayoutRan = React.useRef(false);
     const canvasRef = React.useRef(null);
+    const uploadInputRef = React.useRef(null);
     // Expose init callback with setInitialGraph helper
     const initCalled = React.useRef(false);
     React.useEffect(() => {
@@ -2825,6 +2884,66 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             alert(String(err?.message ?? err));
         }
     }, [wb, runner]);
+    const onUploadPicked = React.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 = React.useCallback(() => {
+        uploadInputRef.current?.click();
+    }, []);
     const hydrateFromBackend = React.useCallback(async (kind, base) => {
         try {
             const transport = kind === "remote-http"
@@ -3122,7 +3241,35 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                             catch (err) {
                                 alert(String(err?.message ?? err));
                             }
-                        }, disabled: !engine, children: "Start" })), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded px-2 py-1.5", onClick: runAutoLayout, children: "Auto Layout" }), jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: () => canvasRef.current?.fitView?.(), title: "Fit View", children: "Fit View" }), jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: downloadGraph, children: "Download Graph" }), jsxRuntime.jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsxRuntime.jsx("span", { children: "Debug events" })] }), jsxRuntime.jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsxRuntime.jsx("span", { children: "Show values in nodes" })] })] }), jsxRuntime.jsxs("div", { className: "flex flex-1 min-h-0", children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: jsxRuntime.jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement, getDefaultNodeSize: overrides?.getDefaultNodeSize }) }), jsxRuntime.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" })), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded px-2 py-1.5", onClick: runAutoLayout, children: "Auto Layout" }), jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: () => canvasRef.current?.fitView?.(), title: "Fit View", children: "Fit View" }), jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: downloadGraph, children: "Download Graph" }), jsxRuntime.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" }), jsxRuntime.jsx("input", { ref: uploadInputRef, type: "file", accept: "application/json,.json", className: "hidden", onChange: onUploadPicked }), jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: triggerUpload, children: "Upload Graph/Snapshot" }), jsxRuntime.jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsxRuntime.jsx("span", { children: "Debug events" })] }), jsxRuntime.jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsxRuntime.jsx("span", { children: "Show values in nodes" })] })] }), jsxRuntime.jsxs("div", { className: "flex flex-1 min-h-0", children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: jsxRuntime.jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement, getDefaultNodeSize: overrides?.getDefaultNodeSize }) }), jsxRuntime.jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, toElement: toElement, contextPanel: overrides?.contextPanel })] })] }));
 }
 function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, autoScroll, onAutoScrollChange, overrides, onInit, onChange, }) {
     const [registry, setRegistry] = React.useState(sparkGraph.createSimpleGraphRegistry());