@bian-womp/spark-workbench 0.2.70 → 0.2.72

package/lib/esm/index.js

@@ -123,13 +123,15 @@ class InMemoryWorkbench extends AbstractWorkbench {
     constructor() {
         super(...arguments);
         this.def = { nodes: [], edges: [] };
-        this.positions = {};
         this.listeners = new Map();
+        this.positions = {};
         this.selection = {
             nodes: [],
             edges: [],
         };
         this.viewport = null;
+        this.runtimeState = null;
+        this.historyState = undefined;
         this.copiedData = null;
     }
     setRegistry(registry) {
@@ -275,14 +277,6 @@ class InMemoryWorkbench extends AbstractWorkbench {
         });
     }
     // Position and selection APIs for React Flow bridge
-    setPosition(nodeId, pos, options) {
-        this.positions[nodeId] = pos;
-        this.emit("graphUiChanged", {
-            def: this.def,
-            change: { type: "moveNode", nodeId, pos },
-            ...options,
-        });
-    }
     setPositions(map, options) {
         this.positions = { ...map };
         this.emit("graphUiChanged", {
@@ -295,6 +289,8 @@ class InMemoryWorkbench extends AbstractWorkbench {
         return { ...this.positions };
     }
     setSelection(sel, options) {
+        if (lod.isEqual(this.selection, sel))
+            return;
         this.selection = { nodes: [...sel.nodes], edges: [...sel.edges] };
         this.emit("selectionChanged", this.selection);
         this.emit("graphUiChanged", {
@@ -372,6 +368,28 @@ class InMemoryWorkbench extends AbstractWorkbench {
             this.viewport = { ...ui.viewport };
         }
     }
+    getRuntimeState() {
+        return this.runtimeState ? { ...this.runtimeState } : null;
+    }
+    setRuntimeState(runtime) {
+        this.runtimeState = runtime ? { ...runtime } : null;
+    }
+    getHistory() {
+        return this.historyState;
+    }
+    setHistory(history) {
+        this.historyState = history;
+        this.emit("historyChanged", { history });
+    }
+    getNodeRuntimeMetadata(nodeId) {
+        return this.runtimeState?.nodes[nodeId];
+    }
+    updateNodeRuntimeMetadata(nodeId, updater) {
+        const current = this.runtimeState ?? { nodes: {} };
+        const nodeMeta = current.nodes[nodeId] ?? {};
+        const updated = updater({ ...nodeMeta });
+        this.runtimeState = { nodes: { ...current.nodes, [nodeId]: updated } };
+    }
     on(event, handler) {
         if (!this.listeners.has(event))
             this.listeners.set(event, new Set());
@@ -677,14 +695,10 @@ class AbstractGraphRunner {
     async redo() {
         return false;
     }
-    async canUndo() {
-        return false;
-    }
-    async canRedo() {
-        return false;
-    }
     // Optional commit support
-    async commit(_reason) { }
+    async commit(_reason) {
+        return undefined;
+    }
 }
 
 // Counter for generating readable runner IDs
@@ -1434,7 +1448,8 @@ class RemoteGraphRunner extends AbstractGraphRunner {
     async commit(reason) {
         const client = await this.ensureClient();
         try {
-            await client.commit(reason);
+            const history = await client.commit(reason);
+            return history;
         }
         catch (err) {
             console.error("[RemoteGraphRunner] Error committing:", err);
@@ -1459,24 +1474,6 @@ class RemoteGraphRunner extends AbstractGraphRunner {
             return false;
         }
     }
-    async canUndo() {
-        const client = await this.ensureClient();
-        try {
-            return await client.canUndo();
-        }
-        catch {
-            return false;
-        }
-    }
-    async canRedo() {
-        const client = await this.ensureClient();
-        try {
-            return await client.canRedo();
-        }
-        catch {
-            return false;
-        }
-    }
     async snapshotFull() {
         const client = await this.ensureClient();
         try {
@@ -1918,9 +1915,13 @@ function useWorkbenchBridge(wb) {
     }, [wb]);
     const onNodesChange = useCallback((changes) => {
         // Apply position updates continuously, but mark commit only on drag end
+        const positions = {};
+        let commit = false;
         changes.forEach((c) => {
             if (c.type === "position" && c.position) {
-                wb.setPosition(c.id, c.position, { commit: !c.dragging });
+                positions[c.id] = c.position;
+                if (!c.dragging)
+                    commit = true;
             }
         });
         // Derive next node selection from change set
@@ -1951,10 +1952,10 @@ function useWorkbenchBridge(wb) {
             }
         }
         if (selectionChanged) {
-            wb.setSelection({
-                nodes: Array.from(nextNodeIds),
-                edges: current.edges,
-            });
+            wb.setSelection({ nodes: Array.from(nextNodeIds), edges: current.edges }, { commit: !(Object.keys(positions).length && commit) });
+        }
+        if (Object.keys(positions).length > 0) {
+            wb.setPositions(positions, { commit });
         }
     }, [wb]);
     const onEdgesDelete = useCallback((edges) => edges.forEach((e, idx) => wb.disconnect(e.id, { commit: idx === edges.length - 1 })), [wb]);
@@ -1986,10 +1987,7 @@ function useWorkbenchBridge(wb) {
             }
         }
         if (selectionChanged) {
-            wb.setSelection({
-                nodes: current.nodes,
-                edges: Array.from(nextEdgeIds),
-            });
+            wb.setSelection({ nodes: current.nodes, edges: Array.from(nextEdgeIds) }, { commit: true });
         }
     }, [wb]);
     const onNodesDelete = useCallback((nodes) => {
@@ -2437,6 +2435,7 @@ async function download(wb, runner) {
     try {
         const def = wb.export();
         const uiState = wb.getUIState();
+        const runtimeState = wb.getRuntimeState();
         let snapshot;
         if (runner.isRunning()) {
             const fullSnapshot = await runner.snapshotFull();
@@ -2446,6 +2445,7 @@ async function download(wb, runner) {
                 extData: {
                     ...(fullSnapshot.extData || {}),
                     ui: uiState,
+                    runtime: runtimeState || undefined,
                 },
             };
         }
@@ -2456,7 +2456,7 @@ async function download(wb, runner) {
                 inputs,
                 outputs: {},
                 environment: {},
-                extData: { ui: uiState },
+                extData: { ui: uiState, runtime: runtimeState || undefined },
             };
         }
         downloadJSON(snapshot, `spark-snapshot-${generateTimestamp()}.json`);
@@ -2482,6 +2482,9 @@ async function upload(parsed, wb, runner) {
     if (extData.ui && typeof extData.ui === "object") {
         wb.setUIState(extData.ui);
     }
+    if (extData.runtime && typeof extData.runtime === "object") {
+        wb.setRuntimeState(extData.runtime);
+    }
     if (runner.isRunning()) {
         await runner.applySnapshotFull({
             def,
@@ -2509,6 +2512,18 @@ function useWorkbenchContext() {
     return ctx;
 }
 
+// Helper to compute invalidated status from runtime metadata
+function computeInvalidatedFromMetadata(metadata) {
+    if (!metadata)
+        return true;
+    const { lastSuccessAt, lastInputAt, lastRunAt } = metadata;
+    if (!lastSuccessAt && !lastRunAt)
+        return true;
+    if (!lastInputAt || Object.keys(lastInputAt).length === 0)
+        return false;
+    const maxInputTime = Math.max(...Object.values(lastInputAt));
+    return maxInputTime > (lastSuccessAt ?? lastRunAt ?? 0);
+}
 function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVersion, children, }) {
     const [nodeStatus, setNodeStatus] = useState({});
     const [edgeStatus, setEdgeStatus] = useState({});
@@ -2599,27 +2614,35 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
         }
         return out;
     }, [def, outputsMap, registry]);
-    // Initialize nodes as invalidated by default until first successful run
+    // Initialize nodes and derive invalidated status from persisted metadata
     useEffect(() => {
+        const workbenchRuntimeState = wb.getRuntimeState() ?? { nodes: {} };
         setNodeStatus((prev) => {
             const next = { ...prev };
+            const metadata = workbenchRuntimeState;
             for (const n of def.nodes) {
                 const cur = next[n.nodeId] ?? (next[n.nodeId] = {});
+                const nodeMeta = metadata.nodes[n.nodeId];
                 const updates = {};
                 if (cur.invalidated === undefined) {
-                    updates.invalidated = true;
+                    updates.invalidated = computeInvalidatedFromMetadata(nodeMeta);
                 }
-                // Ensure activeRunIds is always initialized as an array
                 if (cur.activeRunIds === undefined) {
                     updates.activeRunIds = [];
                 }
+                if (cur.activeRuns === undefined) {
+                    updates.activeRuns = 0;
+                }
+                if (nodeMeta?.lastErrorSummary && cur.lastError === undefined) {
+                    updates.lastError = nodeMeta.lastErrorSummary;
+                }
                 if (Object.keys(updates).length > 0) {
                     next[n.nodeId] = { ...cur, ...updates };
                 }
             }
             return next;
         });
-    }, [def]);
+    }, [def, wb]);
     // Auto layout (simple layered layout)
     const runAutoLayout = useCallback(() => {
         const cur = wb.export();
@@ -2690,6 +2713,27 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
     }, [wb, registry, overrides?.getDefaultNodeSize]);
     const updateEdgeType = useCallback((edgeId, typeId) => wb.updateEdgeType(edgeId, typeId), [wb]);
     const triggerExternal = useCallback((nodeId, event) => runner.triggerExternal(nodeId, event), [runner]);
+    // Helper to save runtime metadata to extData.runtime and workbench state
+    const saveRuntimeMetadata = useCallback(async () => {
+        try {
+            const current = wb.getRuntimeState() ?? { nodes: {} };
+            const metadata = { nodes: { ...current.nodes } };
+            // Clean up metadata for nodes that no longer exist
+            const nodeIds = new Set(def.nodes.map((n) => n.nodeId));
+            for (const nodeId of Object.keys(metadata.nodes)) {
+                if (!nodeIds.has(nodeId)) {
+                    delete metadata.nodes[nodeId];
+                }
+            }
+            // Save cleaned metadata to workbench state
+            wb.setRuntimeState(metadata);
+            // Save to extData.runtime via runner (no snapshotFull)
+            await runner.setExtData?.({ runtime: metadata });
+        }
+        catch (err) {
+            console.warn("[WorkbenchContext] Failed to save runtime metadata:", err);
+        }
+    }, [wb, def, runner]);
     // Subscribe to runner/workbench events
     useEffect(() => {
         const add = (source, type) => (payload) => setEvents((prev) => {
@@ -2732,9 +2776,18 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
                 wb.refreshValidation();
         };
         const offRunnerValue = runner.on("value", (e) => {
+            const now = Date.now();
             if (e?.io === "input") {
-                const nodeId = e?.nodeId;
-                const handle = e?.handle;
+                const nodeId = e.nodeId;
+                const handle = e.handle;
+                // Track input timestamp in workbench runtime state
+                wb.updateNodeRuntimeMetadata(nodeId, (nodeMeta) => ({
+                    ...nodeMeta,
+                    lastInputAt: {
+                        ...(nodeMeta.lastInputAt ?? {}),
+                        [handle]: now,
+                    },
+                }));
                 setNodeStatus((s) => ({
                     ...s,
                     [nodeId]: { ...s[nodeId], invalidated: true },
@@ -2742,6 +2795,18 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
                 // Clear validation errors for this input when a valid value is set
                 setInputValidationErrors((prev) => prev.filter((err) => !(err.nodeId === nodeId && err.handle === handle)));
             }
+            else if (e?.io === "output") {
+                const nodeId = e.nodeId;
+                const handle = e.handle;
+                // Track output timestamp in workbench runtime state
+                wb.updateNodeRuntimeMetadata(nodeId, (nodeMeta) => ({
+                    ...nodeMeta,
+                    lastOutputAt: {
+                        ...(nodeMeta.lastOutputAt ?? {}),
+                        [handle]: now,
+                    },
+                }));
+            }
             return add("runner", "value")(e);
         });
         const offRunnerError = runner.on("error", (e) => {
@@ -2760,6 +2825,24 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             else if (nodeError.kind === "node-run" && nodeError.nodeId) {
                 const nodeId = nodeError.nodeId;
                 const runId = nodeError.runId;
+                const now = Date.now();
+                // Track error timestamp and summary in workbench runtime state
+                const err = nodeError.err;
+                let errorSummary;
+                if (err && typeof err === "object") {
+                    const message = err.message || String(err);
+                    const code = err.code || err.statusCode;
+                    errorSummary = {
+                        message: typeof message === "string" ? message : String(message),
+                        code: typeof code === "number" ? code : undefined,
+                    };
+                }
+                wb.updateNodeRuntimeMetadata(nodeId, (nodeMeta) => ({
+                    ...nodeMeta,
+                    lastErrorAt: now,
+                    lastRunAt: now,
+                    ...(errorSummary ? { lastErrorSummary: errorSummary } : {}),
+                }));
                 setNodeStatus((s) => ({
                     ...s,
                     [nodeId]: {
@@ -2814,6 +2897,30 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             // If resolvedHandles are included in the event, use them directly (more efficient)
             if (e?.resolvedHandles && Object.keys(e.resolvedHandles).length > 0) {
                 applyResolvedHandles(e.resolvedHandles);
+                // Mark nodes whose handles changed as invalid
+                const affectedNodeIds = Object.keys(e.resolvedHandles);
+                if (affectedNodeIds.length > 0) {
+                    setNodeStatus((prev) => {
+                        const next = { ...prev };
+                        for (const id of affectedNodeIds) {
+                            const cur = next[id] ?? (next[id] = { activeRuns: 0, activeRunIds: [] });
+                            next[id] = { ...cur, invalidated: true };
+                        }
+                        return next;
+                    });
+                }
+            }
+            // For broader invalidations (e.g. registry-changed, graph-updated), mark all nodes invalid
+            if (e?.reason === "registry-changed" || e?.reason === "graph-updated") {
+                setNodeStatus((prev) => {
+                    const next = { ...prev };
+                    for (const n of def.nodes) {
+                        const cur = next[n.nodeId] ??
+                            (next[n.nodeId] = { activeRuns: 0, activeRunIds: [] });
+                        next[n.nodeId] = { ...cur, invalidated: true };
+                    }
+                    return next;
+                });
             }
             return add("runner", "invalidate")(e);
         });
@@ -2823,6 +2930,12 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             if (s.kind === "node-start") {
                 const id = s.nodeId;
                 const runId = s.runId;
+                const now = Date.now();
+                // Track run timestamp in workbench runtime state
+                wb.updateNodeRuntimeMetadata(id, (nodeMeta) => ({
+                    ...nodeMeta,
+                    lastRunAt: now,
+                }));
                 // Validate runId is a non-empty string
                 const isValidRunId = runId && typeof runId === "string" && runId.length > 0;
                 if (!isValidRunId) {
@@ -2845,7 +2958,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
                     };
                 });
                 // Start fallback animation window
-                setFallbackStarts((prev) => ({ ...prev, [id]: Date.now() }));
+                setFallbackStarts((prev) => ({ ...prev, [id]: now }));
             }
             else if (s.kind === "node-progress") {
                 const id = s.nodeId;
@@ -2860,8 +2973,21 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             else if (s.kind === "node-done") {
                 const id = s.nodeId;
                 const runId = s.runId;
+                const now = Date.now();
                 // Validate runId is a non-empty string
                 const isValidRunId = runId && typeof runId === "string" && runId.length > 0;
+                const hadError = !!(isValidRunId && errorRunsRef.current[id]?.[runId]);
+                // Track success timestamp if no error in workbench runtime state
+                if (!hadError) {
+                    wb.updateNodeRuntimeMetadata(id, (nodeMeta) => {
+                        const updated = { ...nodeMeta, lastSuccessAt: now };
+                        // Clear error summary on success
+                        if (updated.lastErrorSummary) {
+                            delete updated.lastErrorSummary;
+                        }
+                        return updated;
+                    });
+                }
                 setNodeStatus((prev) => {
                     const current = prev[id]?.activeRuns ?? 0;
                     const currentRunIds = prev[id]?.activeRunIds ?? [];
@@ -2873,7 +2999,6 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
                     const nextRunIds = isValidRunId
                         ? currentRunIds.filter((rid) => rid !== runId)
                         : currentRunIds;
-                    const hadError = !!(isValidRunId && errorRunsRef.current[id]?.[runId]);
                     const keepProgress = hadError || nextActive > 0;
                     // Clear error flag for this runId
                     if (isValidRunId && errorRunsRef.current[id]?.[runId]) {
@@ -2967,10 +3092,14 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             }
             if (!runner.isRunning()) {
                 if (event.commit) {
-                    // If runner not running, commit immediately (no update needed)
-                    await runner.commit(reason).catch((err) => {
+                    await saveRuntimeMetadata();
+                    const history = await runner.commit(reason).catch((err) => {
                         console.error("[WorkbenchContext] Error committing:", err);
+                        return undefined;
                     });
+                    if (history) {
+                        wb.setHistory(history);
+                    }
                 }
                 return;
             }
@@ -2997,10 +3126,16 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
                     await runner.update(event.def, { dry: event.dry });
                 }
                 if (event.commit) {
-                    // Wait for update to complete, then commit
-                    await runner.commit(event.reason ?? reason).catch((err) => {
+                    await saveRuntimeMetadata();
+                    const history = await runner
+                        .commit(event.reason ?? reason)
+                        .catch((err) => {
                         console.error("[WorkbenchContext] Error committing after update:", err);
+                        return undefined;
                     });
+                    if (history) {
+                        wb.setHistory(history);
+                    }
                 }
             }
             catch (err) {
@@ -3012,23 +3147,48 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             setSelectedNodeId(sel.nodes?.[0]);
             setSelectedEdgeId(sel.edges?.[0]);
             if (sel.commit) {
-                // Commit on selection change
-                await runner.commit(sel.reason ?? "selection").catch((err) => {
+                await saveRuntimeMetadata();
+                const history = await runner
+                    .commit(sel.reason ?? "selection")
+                    .catch((err) => {
                     console.error("[WorkbenchContext] Error committing selection change:", err);
+                    return undefined;
                 });
+                if (history) {
+                    wb.setHistory(history);
+                }
             }
         });
         const offWbGraphUiChanged = wb.on("graphUiChanged", async (event) => {
             // Only commit if commit flag is true (e.g., drag end, not during dragging)
             if (event.commit) {
+                // Build detailed reason from change type
+                let reason = "ui-changed";
                 if (event.change) {
-                    event.change.type;
+                    const changeType = event.change.type;
+                    if (changeType === "moveNode") {
+                        reason = "move-node";
+                    }
+                    else if (changeType === "moveNodes") {
+                        reason = "move-nodes";
+                    }
+                    else if (changeType === "selection") {
+                        reason = "selection";
+                    }
+                    else if (changeType === "viewport") {
+                        reason = "viewport";
+                    }
                 }
-                await runner
-                    .commit(event.reason ?? "ui-changed")
+                await saveRuntimeMetadata();
+                const history = await runner
+                    .commit(event.reason ?? reason)
                     .catch((err) => {
                     console.error("[WorkbenchContext] Error committing UI changes:", err);
+                    return undefined;
                 });
+                if (history) {
+                    wb.setHistory(history);
+                }
             }
         });
         const offWbError = wb.on("error", add("workbench", "error"));
@@ -3049,11 +3209,24 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
                 console.error("Failed to handle registry changed event");
             }
         });
-        // Handle transport disconnect: reset runtime status when connection is lost
+        // Handle transport changes: reset runtime status when connection is lost
         const offRunnerTransport = runner.on("transport", (t) => {
             if (t.state === "disconnected") {
                 console.info("[WorkbenchContext] Transport disconnected, resetting node status");
-                setNodeStatus({});
+                // Reinitialize node status with invalidated=true for all nodes
+                setNodeStatus(() => {
+                    const next = {};
+                    const metadata = wb.getRuntimeState() ?? { nodes: {} };
+                    for (const n of def.nodes) {
+                        const nodeMeta = metadata.nodes[n.nodeId];
+                        next[n.nodeId] = {
+                            activeRuns: 0,
+                            activeRunIds: [],
+                            invalidated: computeInvalidatedFromMetadata(nodeMeta),
+                        };
+                    }
+                    return next;
+                });
                 setEdgeStatus({});
                 setFallbackStarts({});
                 errorRunsRef.current = {};
@@ -3451,7 +3624,7 @@ function createSelectionContextMenuHandlers(wb, onClose, getDefaultNodeSize, onC
 /**
  * Creates base default context menu handlers.
  */
-function createDefaultContextMenuHandlers(onAddNode, onClose, onPaste, runner, getCopiedData, clearCopiedData) {
+function createDefaultContextMenuHandlers(onAddNode, onClose, onPaste, runner, getCopiedData, clearCopiedData, history) {
     // Wrap paste handler to clear storage after paste
     const wrappedOnPaste = onPaste && getCopiedData && clearCopiedData
         ? (position) => {
@@ -3459,16 +3632,17 @@ function createDefaultContextMenuHandlers(onAddNode, onClose, onPaste, runner, g
             clearCopiedData();
         }
         : onPaste;
-    // Function to check if paste data exists (called dynamically when menu opens)
     const hasPasteData = getCopiedData ? () => !!getCopiedData() : undefined;
+    const canUndo = history ? history.undoCount > 0 : undefined;
+    const canRedo = history ? history.redoCount > 0 : undefined;
     return {
         onAddNode,
         onPaste: wrappedOnPaste,
         hasPasteData,
         onUndo: runner ? () => runner.undo().then(() => onClose()) : undefined,
         onRedo: runner ? () => runner.redo().then(() => onClose()) : undefined,
-        canUndo: runner ? () => runner.canUndo().catch(() => false) : undefined,
-        canRedo: runner ? () => runner.canRedo().catch(() => false) : undefined,
+        canUndo,
+        canRedo,
         onClose,
     };
 }
@@ -3992,6 +4166,16 @@ function DefaultNodeContent({ data, isConnectable, }) {
                 } })] }));
 }
 
+// Helper to format shortcut for current platform
+function formatShortcut(shortcut) {
+    const isMac = typeof navigator !== "undefined" &&
+        navigator.userAgent.toLowerCase().includes("mac");
+    return shortcut.replace(/⌘\/Ctrl/g, isMac ? "⌘" : "Ctrl");
+}
+function ContextMenuButton({ label, onClick, disabled = false, shortcut, enableKeyboardShortcuts = true, }) {
+    return (jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-between", onClick: onClick, disabled: disabled, children: [jsx("span", { children: label }), enableKeyboardShortcuts && shortcut && (jsx("span", { className: "text-gray-400 text-xs ml-4", children: formatShortcut(shortcut) }))] }));
+}
+
 function DefaultContextMenu({ open, clientPos, handlers, registry, nodeIds, enableKeyboardShortcuts = true, keyboardShortcuts = {
     undo: "⌘/Ctrl + Z",
     redo: "⌘/Ctrl + Shift + Z",
@@ -3999,41 +4183,24 @@ function DefaultContextMenu({ open, clientPos, handlers, registry, nodeIds, enab
 }, }) {
     const rf = useReactFlow();
     const [query, setQuery] = useState("");
-    const [canUndo, setCanUndo] = useState(false);
-    const [canRedo, setCanRedo] = useState(false);
     const [hasPasteData, setHasPasteData] = useState(false);
     const q = query.trim().toLowerCase();
     const filteredIds = q
         ? nodeIds.filter((id) => id.toLowerCase().includes(q))
         : nodeIds;
-    // Check undo/redo availability and paste data when menu opens
+    const canUndo = handlers.canUndo ?? false;
+    const canRedo = handlers.canRedo ?? false;
     useEffect(() => {
         if (!open)
             return;
-        let cancelled = false;
-        const checkAvailability = async () => {
-            if (handlers.canUndo) {
-                const result = await handlers.canUndo();
-                if (!cancelled)
-                    setCanUndo(result);
-            }
-            if (handlers.canRedo) {
-                const result = await handlers.canRedo();
-                if (!cancelled)
-                    setCanRedo(result);
-            }
-            // Check paste data dynamically
-            if (handlers.hasPasteData) {
-                const result = handlers.hasPasteData();
-                if (!cancelled)
-                    setHasPasteData(result);
-            }
-        };
-        checkAvailability();
-        return () => {
-            cancelled = true;
-        };
-    }, [open, handlers.canUndo, handlers.canRedo, handlers.hasPasteData]);
+        if (handlers.hasPasteData) {
+            const result = handlers.hasPasteData();
+            setHasPasteData(result);
+        }
+        else {
+            setHasPasteData(false);
+        }
+    }, [open, handlers.hasPasteData]);
     const root = { __children: {} };
     for (const id of filteredIds) {
         const parts = id.split(".");
@@ -4098,12 +4265,6 @@ function DefaultContextMenu({ open, clientPos, handlers, registry, nodeIds, enab
         handlers.onPaste(p);
         handlers.onClose();
     };
-    // Helper to format shortcut for current platform
-    const formatShortcut = (shortcut) => {
-        const isMac = typeof navigator !== "undefined" &&
-            navigator.userAgent.toLowerCase().includes("mac");
-        return shortcut.replace(/⌘\/Ctrl/g, isMac ? "⌘" : "Ctrl");
-    };
     const renderTree = (tree, path = []) => {
         const entries = Object.entries(tree?.__children ?? {}).sort((a, b) => a[0].localeCompare(b[0]));
         return (jsx("div", { children: entries.map(([key, child]) => {
@@ -4121,7 +4282,7 @@ function DefaultContextMenu({ open, clientPos, handlers, registry, nodeIds, enab
     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 select-none", style: { left: x, top: y }, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onWheel: (e) => e.stopPropagation(), onContextMenu: (e) => {
             e.preventDefault();
             e.stopPropagation();
-        }, children: [hasPasteData && handlers.onPaste && (jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-between", onClick: handlePaste, children: [jsx("span", { children: "Paste" }), enableKeyboardShortcuts && keyboardShortcuts.paste && (jsx("span", { className: "text-gray-400 text-xs ml-4", children: formatShortcut(keyboardShortcuts.paste) }))] })), (handlers.onUndo || handlers.onRedo) && (jsxs(Fragment, { children: [hasPasteData && handlers.onPaste && (jsx("div", { className: "h-px bg-gray-200 my-1" })), handlers.onUndo && (jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-between", onClick: handlers.onUndo, disabled: !canUndo, children: [jsx("span", { children: "Undo" }), enableKeyboardShortcuts && keyboardShortcuts.undo && (jsx("span", { className: "text-gray-400 text-xs ml-4", children: formatShortcut(keyboardShortcuts.undo) }))] })), handlers.onRedo && (jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-between", onClick: handlers.onRedo, disabled: !canRedo, children: [jsx("span", { children: "Redo" }), enableKeyboardShortcuts && keyboardShortcuts.redo && (jsx("span", { className: "text-gray-400 text-xs ml-4", children: formatShortcut(keyboardShortcuts.redo) }))] }))] })), hasPasteData &&
+        }, children: [hasPasteData && handlers.onPaste && (jsx(ContextMenuButton, { label: "Paste", onClick: handlePaste, shortcut: keyboardShortcuts.paste, enableKeyboardShortcuts: enableKeyboardShortcuts })), (handlers.onUndo || handlers.onRedo) && (jsxs(Fragment, { children: [hasPasteData && handlers.onPaste && (jsx("div", { className: "h-px bg-gray-200 my-1" })), handlers.onUndo && (jsx(ContextMenuButton, { label: "Undo", onClick: handlers.onUndo, disabled: !canUndo, shortcut: keyboardShortcuts.undo, enableKeyboardShortcuts: enableKeyboardShortcuts })), handlers.onRedo && (jsx(ContextMenuButton, { label: "Redo", onClick: handlers.onRedo, disabled: !canRedo, shortcut: keyboardShortcuts.redo, enableKeyboardShortcuts: enableKeyboardShortcuts }))] })), hasPasteData &&
                 handlers.onPaste &&
                 !handlers.onUndo &&
                 !handlers.onRedo && jsx("div", { className: "h-px bg-gray-200 my-1" }), jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Add Node", " ", jsxs("span", { className: "text-gray-500 font-normal", children: ["(", totalCount, ")"] })] }), jsx("div", { className: "px-2 pb-1", children: jsx("input", { ref: inputRef, type: "text", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Filter nodes...", className: "w-full border border-gray-300 rounded px-2 py-1 text-sm outline-none focus:border-gray-400 select-text", onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onWheel: (e) => e.stopPropagation() }) }), jsx("div", { className: "max-h-60 overflow-auto", children: totalCount > 0 ? (renderTree(root)) : (jsx("div", { className: "px-3 py-2 text-gray-400", children: "No matches" })) })] }));
@@ -4158,12 +4319,6 @@ function NodeContextMenu({ open, clientPos, nodeId, handlers, canRunPull, bakeab
         if (open)
             ref.current?.focus();
     }, [open]);
-    // Helper to format shortcut for current platform
-    const formatShortcut = (shortcut) => {
-        const isMac = typeof navigator !== "undefined" &&
-            navigator.userAgent.toLowerCase().includes("mac");
-        return shortcut.replace(/⌘\/Ctrl/g, isMac ? "⌘" : "Ctrl");
-    };
     if (!open || !clientPos || !nodeId)
         return null;
     // clamp
@@ -4175,7 +4330,7 @@ function NodeContextMenu({ open, clientPos, nodeId, handlers, canRunPull, bakeab
     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 select-none", 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, ")"] }), jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100 flex items-center justify-between", onClick: handlers.onDelete, children: [jsx("span", { children: "Delete" }), enableKeyboardShortcuts && keyboardShortcuts.delete && (jsx("span", { className: "text-gray-400 text-xs ml-4", children: formatShortcut(keyboardShortcuts.delete) }))] }), jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100 flex items-center justify-between", onClick: handlers.onDuplicate, children: [jsx("span", { children: "Duplicate" }), enableKeyboardShortcuts && keyboardShortcuts.duplicate && (jsx("span", { className: "text-gray-400 text-xs ml-4", children: formatShortcut(keyboardShortcuts.duplicate) }))] }), jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onDuplicateWithEdges, children: "Duplicate with edges" }), canRunPull && (jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onRunPull, children: "Run (pull)" })), jsx("div", { className: "h-px bg-gray-200 my-1" }), jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100 flex items-center justify-between", onClick: handlers.onCopy, children: [jsx("span", { children: "Copy" }), enableKeyboardShortcuts && keyboardShortcuts.copy && (jsx("span", { className: "text-gray-400 text-xs ml-4", children: formatShortcut(keyboardShortcuts.copy) }))] }), jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onCopyId, children: "Copy Node ID" }), bakeableOutputs.length > 0 && (jsxs(Fragment, { children: [jsx("div", { className: "h-px bg-gray-200 my-1" }), jsx("div", { className: "px-2 py-1 font-semibold text-gray-700", children: "Bake" }), bakeableOutputs.map((h) => (jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: () => handlers.onBake(h), children: ["Bake: ", h] }, h)))] }))] }));
+        }, children: [jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Node (", nodeId, ")"] }), jsx(ContextMenuButton, { label: "Delete", onClick: handlers.onDelete, shortcut: keyboardShortcuts.delete, enableKeyboardShortcuts: enableKeyboardShortcuts }), jsx(ContextMenuButton, { label: "Duplicate", onClick: handlers.onDuplicate, shortcut: keyboardShortcuts.duplicate, enableKeyboardShortcuts: enableKeyboardShortcuts }), jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onDuplicateWithEdges, children: "Duplicate with edges" }), canRunPull && (jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onRunPull, children: "Run (pull)" })), jsx("div", { className: "h-px bg-gray-200 my-1" }), jsx(ContextMenuButton, { label: "Copy", onClick: handlers.onCopy, shortcut: keyboardShortcuts.copy, enableKeyboardShortcuts: enableKeyboardShortcuts }), jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onCopyId, children: "Copy Node ID" }), bakeableOutputs.length > 0 && (jsxs(Fragment, { children: [jsx("div", { className: "h-px bg-gray-200 my-1" }), jsx("div", { className: "px-2 py-1 font-semibold text-gray-700", children: "Bake" }), bakeableOutputs.map((h) => (jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: () => handlers.onBake(h), children: ["Bake: ", h] }, h)))] }))] }));
 }
 
 function SelectionContextMenu({ open, clientPos, handlers, enableKeyboardShortcuts = true, keyboardShortcuts = {
@@ -4208,12 +4363,6 @@ function SelectionContextMenu({ open, clientPos, handlers, enableKeyboardShortcu
         if (open)
             ref.current?.focus();
     }, [open]);
-    // Helper to format shortcut for current platform
-    const formatShortcut = (shortcut) => {
-        const isMac = typeof navigator !== "undefined" &&
-            navigator.userAgent.toLowerCase().includes("mac");
-        return shortcut.replace(/⌘\/Ctrl/g, isMac ? "⌘" : "Ctrl");
-    };
     if (!open || !clientPos)
         return null;
     // Clamp menu position to viewport
@@ -4225,7 +4374,7 @@ function SelectionContextMenu({ open, clientPos, handlers, enableKeyboardShortcu
     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 select-none", style: { left: x, top: y }, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onWheel: (e) => e.stopPropagation(), onContextMenu: (e) => {
             e.preventDefault();
             e.stopPropagation();
-        }, children: [jsx("div", { className: "px-2 py-1 font-semibold text-gray-700", children: "Selection" }), jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100 flex items-center justify-between", onClick: handlers.onCopy, children: [jsx("span", { children: "Copy" }), enableKeyboardShortcuts && keyboardShortcuts.copy && (jsx("span", { className: "text-gray-400 text-xs ml-4", children: formatShortcut(keyboardShortcuts.copy) }))] }), jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100 flex items-center justify-between", onClick: handlers.onDelete, children: [jsx("span", { children: "Delete" }), enableKeyboardShortcuts && keyboardShortcuts.delete && (jsx("span", { className: "text-gray-400 text-xs ml-4", children: formatShortcut(keyboardShortcuts.delete) }))] })] }));
+        }, children: [jsx("div", { className: "px-2 py-1 font-semibold text-gray-700", children: "Selection" }), jsx(ContextMenuButton, { label: "Copy", onClick: handlers.onCopy, shortcut: keyboardShortcuts.copy, enableKeyboardShortcuts: enableKeyboardShortcuts }), jsx(ContextMenuButton, { label: "Delete", onClick: handlers.onDelete, shortcut: keyboardShortcuts.delete, enableKeyboardShortcuts: enableKeyboardShortcuts })] }));
 }
 
 const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, getDefaultNodeSize }, ref) => {
@@ -4233,7 +4382,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
     const nodeValidation = validationByNode;
     const edgeValidation = validationByEdge.errors;
     const [registryVersion, setRegistryVersion] = useState(0);
-    // Keep stable references for nodes/edges to avoid unnecessary updates
+    const [historyState, setHistoryState] = useState(wb.getHistory());
     const prevNodesRef = useRef([]);
     const prevEdgesRef = useRef([]);
     function retainStabilityById(prev, next, isSame) {
@@ -4579,6 +4728,12 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         });
         return () => off();
     }, [runner]);
+    useEffect(() => {
+        const off = wb.on("historyChanged", (event) => {
+            setHistoryState(event.history);
+        });
+        return () => off();
+    }, [wb]);
     const nodeIds = useMemo(() => Array.from(registry.nodes.keys()), [registry, registryVersion]);
     const defaultContextMenuHandlers = useMemo(() => {
         // Get storage from override or use workbench's internal storage
@@ -4588,21 +4743,18 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                 get: () => wb.getCopiedData(),
                 set: (data) => wb.setCopiedData(data),
             };
-        const baseHandlers = createDefaultContextMenuHandlers(addNodeAt, onCloseMenu, 
-        // Paste handler - checks storage dynamically when called
-        // Only provide handler if storage has data or might have data (for dynamic checking)
-        (position) => {
+        const baseHandlers = createDefaultContextMenuHandlers(addNodeAt, onCloseMenu, (position) => {
             const data = storage.get();
             if (!data)
                 return;
             wb.pasteCopiedData(data, position, { commit: true, reason: "paste" });
             onCloseMenu();
-        }, runner, () => storage.get(), () => storage.set(null));
+        }, runner, () => storage.get(), () => storage.set(null), historyState);
         if (overrides?.getDefaultContextMenuHandlers) {
             return overrides.getDefaultContextMenuHandlers(wb, baseHandlers);
         }
         return baseHandlers;
-    }, [addNodeAt, onCloseMenu, overrides, wb, runner]);
+    }, [addNodeAt, onCloseMenu, overrides, wb, runner, historyState]);
     const selectionContextMenuHandlers = useMemo(() => {
         // Get storage from override or use workbench's internal storage
         const storage = overrides?.getCopiedDataStorage
@@ -4687,9 +4839,9 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                 e.preventDefault();
                 if (runner &&
                     "onUndo" in defaultContextMenuHandlers &&
-                    defaultContextMenuHandlers.onUndo) {
-                    const canUndo = await runner.canUndo().catch(() => false);
-                    if (canUndo) {
+                    defaultContextMenuHandlers.onUndo &&
+                    defaultContextMenuHandlers.canUndo) {
+                    if (defaultContextMenuHandlers.canUndo) {
                         defaultContextMenuHandlers.onUndo();
                     }
                 }
@@ -4700,9 +4852,9 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                 e.preventDefault();
                 if (runner &&
                     "onRedo" in defaultContextMenuHandlers &&
-                    defaultContextMenuHandlers.onRedo) {
-                    const canRedo = await runner.canRedo().catch(() => false);
-                    if (canRedo) {
+                    defaultContextMenuHandlers.onRedo &&
+                    defaultContextMenuHandlers.canRedo) {
+                    if (defaultContextMenuHandlers.canRedo) {
                         defaultContextMenuHandlers.onRedo();
                     }
                 }