feat: canvas history (undo/redo), copy/paste nodes, node search, shortcuts modal

- Undo/Redo (Ctrl+Z / Ctrl+Y): 50-entry snapshot stack in canvasStore; snapshot before all mutations and on node drag stop
- Copy/Paste (Ctrl+C / Ctrl+V): copy selected nodes to clipboard, paste with +50px offset and new IDs
- Node search (Ctrl+K): spotlight overlay — fuzzy search by label/IP/hostname, jumps + focuses matched node
- Shortcuts modal (?): lists all keyboard shortcuts, accessible via ? key or toolbar ? button
- Toolbar: undo/redo buttons (disabled when stack empty), ? help button

frontend/src/stores/canvasStore.ts

@@ -11,6 +11,8 @@ import {
 } from '@xyflow/react'
 import type { NodeData, EdgeData } from '@/types'
 
+type HistoryEntry = { nodes: Node<NodeData>[]; edges: Edge<EdgeData>[] }
+
 interface CanvasState {
   nodes: Node<NodeData>[]
   edges: Edge<EdgeData>[]
@@ -18,6 +20,18 @@ interface CanvasState {
   selectedNodeId: string | null
   scanEventTs: number
 
+  // History
+  past: HistoryEntry[]
+  future: HistoryEntry[]
+  snapshotHistory: () => void
+  undo: () => void
+  redo: () => void
+
+  // Clipboard
+  clipboard: Node<NodeData>[]
+  copySelectedNodes: () => void
+  pasteNodes: () => void
+
   onNodesChange: (changes: NodeChange<Node<NodeData>>[]) => void
   onEdgesChange: (changes: EdgeChange<Edge<EdgeData>>[]) => void
   onConnect: (connection: Connection) => void
@@ -48,6 +62,67 @@ export const useCanvasStore = create<CanvasState>((set) => ({
   hideIp: false,
   scanEventTs: 0,
 
+  past: [],
+  future: [],
+  clipboard: [],
+
+  snapshotHistory: () =>
+    set((state) => ({
+      past: [...state.past.slice(-49), { nodes: state.nodes, edges: state.edges }],
+      future: [],
+    })),
+
+  undo: () =>
+    set((state) => {
+      if (state.past.length === 0) return state
+      const previous = state.past[state.past.length - 1]
+      return {
+        nodes: previous.nodes,
+        edges: previous.edges,
+        past: state.past.slice(0, -1),
+        future: [{ nodes: state.nodes, edges: state.edges }, ...state.future.slice(0, 49)],
+        hasUnsavedChanges: true,
+      }
+    }),
+
+  redo: () =>
+    set((state) => {
+      if (state.future.length === 0) return state
+      const next = state.future[0]
+      return {
+        nodes: next.nodes,
+        edges: next.edges,
+        past: [...state.past.slice(-49), { nodes: state.nodes, edges: state.edges }],
+        future: state.future.slice(1),
+        hasUnsavedChanges: true,
+      }
+    }),
+
+  copySelectedNodes: () =>
+    set((state) => ({
+      clipboard: state.nodes.filter((n) => n.selected),
+    })),
+
+  pasteNodes: () =>
+    set((state) => {
+      if (state.clipboard.length === 0) return state
+      const newNodes = state.clipboard.map((n) => ({
+        ...n,
+        id: crypto.randomUUID(),
+        position: { x: n.position.x + 50, y: n.position.y + 50 },
+        selected: false,
+        parentId: undefined,
+        extent: undefined,
+        data: { ...n.data, parent_id: undefined },
+      }))
+      return {
+        nodes: [...state.nodes, ...newNodes],
+        past: [...state.past.slice(-49), { nodes: state.nodes, edges: state.edges }],
+        future: [],
+        hasUnsavedChanges: true,
+      }
+    }),
+
   onNodesChange: (changes) =>
     set((state) => ({
       nodes: applyNodeChanges(changes, state.nodes),