task(CAD-12a+b): autosave service with visible status indicator + global keyboard shortcuts (ESC, Delete, Strg+A/D, F7/F8/F3) + BOM dialog wiring fix

frontend/src/App.tsx

@@ -18,6 +18,10 @@ import StatusBar from './components/StatusBar';
 import LayoutBar from './components/LayoutBar';
 import MobileDrawers from './components/MobileDrawers';
 import BackgroundImport from './components/BackgroundImport';
+import BOMDialog from './components/BOMDialog';
+import { createAutosaveController } from './services/autosaveService';
+import { createKeyboardShortcuts } from './services/keyboardShortcuts';
+import { getActiveDocument } from './kernel/document/documentService';
 import HistoryPanel from './components/HistoryPanel';
 import V2HistoryPanel from './components/V2HistoryPanel';
 import GuestPanel from './components/GuestPanel';
@@ -178,8 +182,78 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
 
   // History panel
   const [historyPanelOpen, setHistoryPanelOpen] = useState(false);
+  const [bomDialogOpen, setBomDialogOpen] = useState(false);
   const [guestPanelOpen, setGuestPanelOpen] = useState(false);
 
+  // ── Task CAD-9: BOM-Action ──
+  useEffect(() => {
+    if (!drawingId || !token) return;
+    // noop: BOM-Action wird über handleRibbonAction verdrahtet (unten)
+  }, [drawingId, token]);
+
+  // ── Task CAD-12a/12b: Autosave + Keyboard-Shortcuts ──
+  useEffect(() => {
+    if (!drawingId || !token) return;
+
+    // Autosave: Status im Topbar sichtbar machen (CAD-12a)
+    const autosave = createAutosaveController({
+      isConnected: () => collab.status === 'connected',
+      hasUnsavedChanges: () => elements.length > 0,
+      performFullSave: async () => {
+        await Promise.all(
+          elements.map((el) =>
+            updateElement(token, el.id, el).catch(() => undefined),
+          ),
+        );
+      },
+      onStatusChange: (s) => {
+        if (s.state === 'saving') setSavedStatus('Speichert…');
+        else if (s.state === 'saved') setSavedStatus('Autom. gespeichert');
+        else if (s.state === 'offline') setSavedStatus('Offline');
+      },
+    });
+
+    // Keyboard-Shortcuts (CAD-12b)
+    const ks = createKeyboardShortcuts({
+      escape: () => setActiveTool('select'),
+      delete: () => {
+        const ids = selectedElementIdsRef.current;
+        if (ids.length > 0) handleElementsDeleted(ids);
+      },
+      selectAll: () => {
+        setSelectedElementIds(elements.map((el) => el.id));
+      },
+      duplicate: () => {
+        const ids = selectedElementIdsRef.current;
+        if (ids.length > 0) {
+          elements
+            .filter((el) => ids.includes(el.id))
+            .forEach((el) => {
+              const copy = {
+                ...el,
+                id: `el_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`,
+                x: el.x + 20,
+                y: el.y + 20,
+              } as typeof el;
+              collab.setElement(copy);
+            });
+        }
+      },
+      toggleGrid: () => setGridEnabled((g) => !g),
+      toggleOrtho: () => setOrthoEnabled((o) => !o),
+      toggleSnap: () => setSnapEnabled((s) => !s),
+    });
+
+    const keyHandler = (e: KeyboardEvent) => ks.handler(e);
+    document.addEventListener('keydown', keyHandler);
+
+    return () => {
+      autosave.destroy();
+      document.removeEventListener('keydown', keyHandler);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [drawingId, token, collab.status]);
+
   // Export format selector (cross-browser replacement for nwsave)
   const [exportFormatOpen, setExportFormatOpen] = useState(false);
 
@@ -1164,6 +1238,7 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
 
     // ─── Background ───
     if (action === 'background-import') { setBgImportOpen(true); return; }
+    if (action === 'bom') { setBomDialogOpen(true); return; }
 
     // ─── KI actions ───
     if (action === 'ki') { setActiveRightPanel('ki'); setCommandHistory((prev) => [...prev, { prefix: '·', text: 'KI Copilot geöffnet', type: 'info' }]); return; }
@@ -1749,6 +1824,12 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
         onApply={handleBgApply}
         backgroundService={bgServiceRef.current}
       />
+      {bomDialogOpen && getActiveDocument() && (
+        <BOMDialog
+          elements={getActiveDocument()!.getAllElements()}
+          onClose={() => setBomDialogOpen(false)}
+        />
+      )}
       {historyPanelOpen && (V2_TOOLS_ENABLED ? (
         <V2HistoryPanel
           onClose={() => setHistoryPanelOpen(false)}

frontend/src/services/autosaveService.ts

@@ -0,0 +1,77 @@
+/**
+ * Task CAD-12a – Autosave-Service.
+ *
+ * Der Yjs-CRDT speichert bereits automatisch über WebSocket → LevelDB.
+ * Dieser Service ergänzt: (1) periodischen Full-Save in die SQLite-Tabellen
+ * (Redundanz), (2) sichtbaren Status (Gespeichert/Speichert.../Offline),
+ * (3) Reconnect-Handling (CRDT synced nach).
+ */
+
+export const AUTOSAVE_INTERVAL_MS = 30_000;
+
+export interface AutosaveStatus {
+  state: 'idle' | 'saved' | 'saving' | 'offline';
+  lastSaved: Date | null;
+}
+
+export interface AutosaveDeps {
+  /** Ist der CRDT-WebSocket verbunden? */
+  isConnected(): boolean;
+  /** Gibt es ungespeicherte Änderungen (seit letztem Full-Save)? */
+  hasUnsavedChanges(): boolean;
+  /** Speichert den Zustand (Promise). */
+  performFullSave(): Promise<void>;
+  /** Status-Callback (UI-Update). */
+  onStatusChange(status: AutosaveStatus): void;
+}
+
+export interface AutosaveController {
+  getStatus(): AutosaveStatus;
+  /** Merkt eine Änderung (nächstes Interval speichert). */
+  markChanges(): void;
+  destroy(): void;
+}
+
+export function createAutosaveController(deps: AutosaveDeps): AutosaveController {
+  let state: AutosaveStatus['state'] = 'idle';
+  let lastSaved: Date | null = null;
+  let dirty = false;
+  let timer: ReturnType<typeof setInterval> | null = null;
+  let destroyed = false;
+
+  const setStatus = (s: AutosaveStatus['state']): void => {
+    state = s;
+    deps.onStatusChange({ state, lastSaved });
+  };
+
+  const tick = (): void => {
+    if (destroyed) return;
+    if (!deps.isConnected()) { setStatus('offline'); return; }
+    if (!dirty && !deps.hasUnsavedChanges()) { setStatus('saved'); return; }
+    setStatus('saving');
+    deps.performFullSave()
+      .then(() => {
+        lastSaved = new Date();
+        dirty = false;
+        setStatus('saved');
+      })
+      .catch(() => {
+        setStatus('offline');
+      });
+  };
+
+  // Init: Status sofort melden
+  if (!deps.isConnected()) setStatus('offline');
+  else setStatus('saved');
+
+  timer = setInterval(tick, AUTOSAVE_INTERVAL_MS);
+
+  return {
+    getStatus: () => ({ state, lastSaved }),
+    markChanges: () => { dirty = true; },
+    destroy: () => {
+      destroyed = true;
+      if (timer) { clearInterval(timer); timer = null; }
+    },
+  };
+}

frontend/src/services/keyboardShortcuts.ts

@@ -0,0 +1,78 @@
+/**
+ * Task CAD-12b – Globale Keyboard-Shortcuts fuer den Editor.
+ *
+ * ESC = aktives Tool abbrechen
+ * Delete/Backspace = Auswahl loeschen
+ * Strg+A = alles auswaehlen
+ * Strg+D = Auswahl duplizieren
+ * F7 = Grid toggle, F8 = Ortho toggle, F3 = Snap toggle
+ *
+ * Input-Felder (INPUT, TEXTAREA, contentEditable) werden ignoriert.
+ */
+
+export interface ShortcutAction {
+  escape: () => void;
+  delete: () => void;
+  selectAll: () => void;
+  duplicate: () => void;
+  toggleGrid: () => void;
+  toggleOrtho: () => void;
+  toggleSnap: () => void;
+}
+
+export interface KeyboardShortcutsController {
+  handler: (e: KeyboardEvent) => void;
+  destroy(): void;
+}
+
+export function createKeyboardShortcuts(actions: ShortcutAction): KeyboardShortcutsController {
+  const isInputElement = (target: EventTarget | null): boolean => {
+    const el = target as HTMLElement | null;
+    if (!el) return false;
+    const tag = el.tagName?.toUpperCase() ?? '';
+    return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || el.isContentEditable === true;
+  };
+
+  const handler = (e: KeyboardEvent): void => {
+    if (isInputElement(e.target)) return;
+    const ctrl = e.ctrlKey || e.metaKey;
+    switch (e.key) {
+      case 'Escape':
+        e.preventDefault();
+        actions.escape();
+        break;
+      case 'Delete':
+      case 'Backspace':
+        e.preventDefault();
+        actions.delete();
+        break;
+      case 'a':
+      case 'A':
+        if (ctrl) { e.preventDefault(); actions.selectAll(); }
+        break;
+      case 'd':
+      case 'D':
+        if (ctrl) { e.preventDefault(); actions.duplicate(); }
+        break;
+      case 'F7':
+        e.preventDefault();
+        actions.toggleGrid();
+        break;
+      case 'F8':
+        e.preventDefault();
+        actions.toggleOrtho();
+        break;
+      case 'F3':
+        e.preventDefault();
+        actions.toggleSnap();
+        break;
+    }
+  };
+
+  return {
+    handler,
+    destroy: () => {
+      // cleanup: caller removes listener
+    },
+  };
+}