feat(web): add undo/redo for destructive actions (task-45)

- Create useUndoRedo hook with 10-action history limit
- Add UndoRedoContext for global state management
- Create UndoRedoControls component with keyboard shortcuts
- Integrate undo/redo into useGraphList (removeNode, clearGraphList)
- Add undo/redo controls to MainLayout header
- Support Cmd+Z (undo) and Cmd+Shift+Z (redo) shortcuts
- Add clear history option with action count display

Author: Mearman

apps/web/src/components/layout/MainLayout.tsx

@@ -47,6 +47,7 @@ import { HeaderSearchInput } from "./HeaderSearchInput";
 import { HistorySidebar } from "./HistorySidebar";
 import { LeftRibbon } from "./LeftRibbon";
 import { NotificationCenter } from "@/components/notifications/NotificationCenter";
+import { UndoRedoControls } from "@/components/undo-redo/UndoRedoControls";
 import { RightRibbon } from "./RightRibbon";
 import { RightSidebarContent } from "./RightSidebarContent";
 // import { ThemeDropdown } from "./ThemeDropdown";
@@ -309,6 +310,7 @@ export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
 
             {/* Sidebar controls - simplified on mobile */}
             <Group gap="xs" visibleFrom="sm">
+              <UndoRedoControls />
               <NotificationCenter />
               <ActionIcon
                 onClick={toggleLeftSidebar}

apps/web/src/components/undo-redo/UndoRedoControls.tsx

@@ -0,0 +1,88 @@
+/**
+ * Undo/Redo Controls Component
+ *
+ * Provides undo/redo buttons with keyboard shortcuts display.
+ * Integrates with global UndoRedoContext.
+ */
+
+import { useUndoRedoContext } from '@/contexts/UndoRedoContext';
+import { ICON_SIZE } from '@/config/style-constants';
+import {
+  ActionIcon,
+  Box,
+  Group,
+  Menu,
+  Stack,
+  Text,
+  Tooltip,
+} from '@mantine/core';
+import { IconHistory, IconRefresh, IconTrash, IconArrowBackUp, IconArrowForwardUp } from '@tabler/icons-react';
+import { memo } from 'react';
+
+export const UndoRedoControls = memo(() => {
+  const { canUndo, canRedo, undo, redo, clearHistory, historySize } = useUndoRedoContext();
+
+  return (
+    <Group gap="xs" wrap="nowrap">
+      <Tooltip label="Undo (Cmd+Z)" withinPortal>
+        <ActionIcon
+          onClick={() => void undo()}
+          disabled={!canUndo}
+          variant="subtle"
+          size="lg"
+          aria-label="Undo"
+        >
+          <IconArrowBackUp size={ICON_SIZE.MD} />
+        </ActionIcon>
+      </Tooltip>
+
+      <Tooltip label="Redo (Cmd+Shift+Z or Cmd+Y)" withinPortal>
+        <ActionIcon
+          onClick={() => void redo()}
+          disabled={!canRedo}
+          variant="subtle"
+          size="lg"
+          aria-label="Redo"
+        >
+          <IconArrowForwardUp size={ICON_SIZE.MD} />
+        </ActionIcon>
+      </Tooltip>
+
+      {historySize > 0 && (
+        <Menu shadow="md" width={200} position="bottom-end">
+          <Menu.Target>
+            <ActionIcon
+              variant="subtle"
+              size="lg"
+              aria-label="History options"
+            >
+              <IconHistory size={ICON_SIZE.MD} />
+            </ActionIcon>
+          </Menu.Target>
+
+          <Menu.Dropdown>
+            <Menu.Item
+              leftSection={<IconTrash size={ICON_SIZE.SM} />}
+              onClick={clearHistory}
+              color="red"
+            >
+              Clear history ({historySize} actions)
+            </Menu.Item>
+
+            <Menu.Label>
+              <Stack gap={0}>
+                <Text size="xs" c="dimmed">Keyboard shortcuts:</Text>
+                <Text size="xs" c="dimmed">Cmd+Z: Undo</Text>
+                <Text size="xs" c="dimmed">Cmd+Shift+Z: Redo</Text>
+              </Stack>
+            </Menu.Label>
+          </Menu.Dropdown>
+        </Menu>
+      )}
+    </Group>
+  );
+});
+
+UndoRedoControls.displayName = 'UndoRedoControls';
+
+export default UndoRedoControls;

apps/web/src/contexts/UndoRedoContext.tsx

@@ -0,0 +1,50 @@
+/**
+ * Global Undo/Redo Context
+ *
+ * Provides application-wide undo/redo functionality for destructive actions.
+ * Integrates with useUndoRedo hook and manages action history across all hooks.
+ */
+
+import React, { createContext, useContext } from 'react';
+import useUndoRedo, { type UndoableAction } from '@/hooks/useUndoRedo';
+
+export interface UndoRedoContextValue {
+  canUndo: boolean;
+  canRedo: boolean;
+  undo: () => Promise<void>;
+  redo: () => Promise<void>;
+  addAction: (action: UndoableAction) => void;
+  clearHistory: () => void;
+  historySize: number;
+}
+
+const UndoRedoContext = createContext<UndoRedoContextValue | null>(null);
+
+/**
+ * Provider component that wraps the application with undo/redo functionality
+ */
+export const UndoRedoProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const undoRedo = useUndoRedo({
+    maxHistory: 10, // User decision: 10 actions
+    enableKeyboardShortcuts: true,
+  });
+
+  return (
+    <UndoRedoContext.Provider value={undoRedo}>
+      {children}
+    </UndoRedoContext.Provider>
+  );
+};
+
+/**
+ * Hook to access the global undo/redo context
+ */
+export const useUndoRedoContext = (): UndoRedoContextValue => {
+  const context = useContext(UndoRedoContext);
+  if (!context) {
+    throw new Error('useUndoRedoContext must be used within UndoRedoProvider');
+  }
+  return context;
+};
+
+export default UndoRedoContext;

apps/web/src/hooks/useGraphList.ts

@@ -3,6 +3,7 @@
  * Provides reactive graph list state and CRUD operations for the persistent working set
  *
  * T029: Graph List hook with storage integration
+ * T045: Undo/redo integration for destructive actions
  */
 
 import type { AddToGraphListParams, GraphListNode, PruneGraphListResult } from "@bibgraph/types";
@@ -13,6 +14,7 @@ import {
 import { useCallback, useEffect, useState } from "react";
 
 import { useStorageProvider } from "@/contexts/storage-provider-context";
+import { useUndoRedoContext } from "@/contexts/UndoRedoContext";
 
 const GRAPH_LIST_LOGGER_CONTEXT = "graph-list-hook";
 
@@ -81,6 +83,7 @@ export interface UseGraphListResult {
  */
 export const useGraphList = (): UseGraphListResult => {
   const storage = useStorageProvider();
+  const { addAction } = useUndoRedoContext();
 
   // State
   const [nodes, setNodes] = useState<GraphListNode[]>([]);
@@ -268,11 +271,34 @@ export const useGraphList = (): UseGraphListResult => {
 
     // T030: Optimistic update - remove from UI immediately
     const previousNodes = nodes;
+    const removedNode = nodes.find(n => n.entityId === entityId);
     setNodes(prevNodes => prevNodes.filter(n => n.entityId !== entityId));
 
     try {
       await storage.removeFromGraphList(entityId);
 
+      // T045: Add undo/redo action for destructive operation
+      if (removedNode) {
+        addAction({
+          id: crypto.randomUUID(),
+          timestamp: new Date(),
+          description: `Remove ${removedNode.label || removedNode.entityId} from graph`,
+          undo: async () => {
+            // Restore node to graph list
+            await storage.addToGraphList({
+              entityId: removedNode.entityId,
+              entityType: removedNode.entityType,
+              label: removedNode.label,
+              provenance: removedNode.provenance,
+            });
+          },
+          redo: async () => {
+            // Remove node from graph list again
+            await storage.removeFromGraphList(entityId);
+          },
+        });
+      }
+
       logger.debug(GRAPH_LIST_LOGGER_CONTEXT, "Node removed from graph list", {
         entityId
       });
@@ -291,7 +317,7 @@ export const useGraphList = (): UseGraphListResult => {
       });
       throw errorObj;
     }
-  }, [storage, nodes]);
+  }, [storage, nodes, addAction]);
 
   // Clear graph list
   const clearGraphList = useCallback(async (): Promise<void> => {
@@ -304,6 +330,29 @@ export const useGraphList = (): UseGraphListResult => {
     try {
       await storage.clearGraphList();
 
+      // T045: Add undo/redo action for destructive operation
+      addAction({
+        id: crypto.randomUUID(),
+        timestamp: new Date(),
+        description: `Clear graph list (${previousNodes.length} nodes)`,
+        undo: async () => {
+          // Restore all nodes to graph list
+          const restorePromises = previousNodes.map(node =>
+            storage.addToGraphList({
+              entityId: node.entityId,
+              entityType: node.entityType,
+              label: node.label,
+              provenance: node.provenance,
+            })
+          );
+          await Promise.all(restorePromises);
+        },
+        redo: async () => {
+          // Clear graph list again
+          await storage.clearGraphList();
+        },
+      });
+
       logger.debug(GRAPH_LIST_LOGGER_CONTEXT, "Graph list cleared");
 
       // Refresh will be triggered by catalogueEventEmitter
@@ -319,7 +368,7 @@ export const useGraphList = (): UseGraphListResult => {
       });
       throw errorObj;
     }
-  }, [storage, nodes]);
+  }, [storage, nodes, addAction]);
 
   // Check if entity is in graph list
   const isInGraphList = useCallback(async (entityId: string): Promise<boolean> => {