From 25b258165384ebb0b4a0bb18e74439be481c9e18 Mon Sep 17 00:00:00 2001
From: Agent Zero <agent@media-on.de>
Date: Thu, 13 Aug 2026 21:57:59 +0200
Subject: [PATCH] =?UTF-8?q?feat(C):=20Phase=20C=20=E2=80=94=20Core=20UI=20?=
 =?UTF-8?q?pr=C3=BCfen,=20vervollst=C3=A4ndigen,=20testen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

C-ERR-BOUNDARY: ErrorBoundary erweitert (trace_id, Fallback-UI, PluginErrorBoundary)
C-NOTIF: NotificationDropdown mit System-Channel-Link
C-DOCS: ApiDocs.tsx Seite (Swagger UI iframe)
C-A11Y: aria-label, min-h-touch, focus-visible ergänzt
C-FE-TEST: 29 neue Tests (ErrorBoundary, ApiDocs, PrintButton, themeStore, NotificationDropdown)
C-DOC: ui-design-guidelines.md aktualisiert

Verifiziert (keine Änderungen nötig):
- C-TAGS, C-CF, C-FILTER, C-DEDUP, C-ONBOARD, C-THEME, C-PWA, C-PRINT

TSC: 0 errors, Build: erfolgreich, Vitest: 29/29 passed
---
 PROGRESS.md                                   |  25 +++-
 docs/ui-design-guidelines.md                  | 113 +++++++++++++++++-
 .../__tests__/common/ErrorBoundary.test.tsx   | 108 +++++++++++++++++
 .../src/__tests__/common/PrintButton.test.tsx |  62 ++++++++++
 .../NotificationDropdown.test.tsx             |  84 +++++++++++++
 frontend/src/__tests__/pages/ApiDocs.test.tsx |  36 ++++++
 .../src/__tests__/store/themeStore.test.ts    |  99 +++++++++++++++
 .../src/components/common/ErrorBoundary.tsx   |  95 ++++++++-------
 frontend/src/components/layout/AppShell.tsx   |   2 +-
 .../src/components/layout/StartLayout.tsx     |   2 +-
 frontend/src/components/layout/TopBar.tsx     |   3 +-
 .../notifications/NotificationDropdown.tsx    |  18 ++-
 .../src/components/plugins/PluginLoader.tsx   |  70 ++++++++++-
 frontend/src/pages/ApiDocs.tsx                |  50 ++++++++
 frontend/src/routes/index.tsx                 |   8 +-
 15 files changed, 713 insertions(+), 62 deletions(-)
 create mode 100644 frontend/src/__tests__/common/ErrorBoundary.test.tsx
 create mode 100644 frontend/src/__tests__/common/PrintButton.test.tsx
 create mode 100644 frontend/src/__tests__/notifications/NotificationDropdown.test.tsx
 create mode 100644 frontend/src/__tests__/pages/ApiDocs.test.tsx
 create mode 100644 frontend/src/__tests__/store/themeStore.test.ts
 create mode 100644 frontend/src/pages/ApiDocs.tsx

diff --git a/PROGRESS.md b/PROGRESS.md
index bb270e9..f2d9224 100644
--- a/PROGRESS.md
+++ b/PROGRESS.md
@@ -11,7 +11,7 @@
 |-------|-------|-------|------|------------|-------------|
 | A — Stabilität verifizieren | `done` | 2026-08-13 | 2026-08-13 | 5 | 5 |
 | B — System-Konsolidierung | `done` | 2026-08-13 | 2026-08-13 | ~50 | ~50 |
-| C — Core UI | `not_started` | — | — | 0 | ~18 |
+| C — Core UI | `done` | 2026-08-13 | 2026-08-13 | 14 | 14 |
 | C.5 — Import/Export | `not_started` | — | — | 0 | 8 |
 | D — Undo/Restore | `not_started` | — | — | 0 | ~12 |
 | E — Search | `not_started` | — | — | 0 | ~24 |
@@ -191,7 +191,28 @@
 
 ---
 
-## Phasen C-J
+## Phase C — Core UI prüfen, vervollständigen, testen
+
+| Task | Status | Forgejo Issue | Verifiziert |
+|------|-------|---------------|------------|
+| C-ERR-BOUNDARY | `done` | — | ✅ ErrorBoundary (common) erweitert: trace_id, Tailwind Fallback-UI, Retry+Neu laden Buttons, role=alert, aria-live. PluginErrorBoundary in PluginLoader erweitert mit trace_id. PluginRouteRenderer in routes mit ErrorBoundary umschlossen. AppShell+StartLayout auf common/ErrorBoundary umgestellt. 7 Tests |
+| C-NOTIF | `done` | — | ✅ NotificationDropdown erweitert: System-Channel-Link Button (→ /communication?channel=system), MessageSquare Icon. Bestehende /notifications API beibehalten (delegiert an comm post_system_message). 5 Tests |
+| C-TAGS | `done` | — | ✅ Verifiziert — Tags.tsx funktional: CRUD, Color Picker, Delete Confirmation, Usage Count |
+| C-CF | `done` | — | ✅ Verifiziert — CustomFields.tsx funktional: CRUD, Entity Selector, Field Types, Auto-slug |
+| C-FILTER | `done` | — | ✅ Verifiziert — SavedFilters.tsx funktional: Save/Load/Delete, Modal |
+| C-DEDUP | `done` | — | ✅ Verifiziert — DedupMerge.tsx funktional: Threshold Slider, Search, MergeDialog, MergeHistory |
+| C-PRINT | `done` | — | ✅ Verifiziert — PrintButton in ContactDetailPage, Reports, Calendar. print.ts mit printElement/printCurrentPage/exportToPDF. print.css mit @media print. 6 Tests |
+| C-DOCS | `done` | — | ✅ ApiDocs.tsx erstellt: iframe mit /docs, External-Link, Route /api-docs. 3 Tests |
+| C-ONBOARD | `done` | — | ✅ Verifiziert — OnboardingTour (8 Steps, CSS Overlay, Keyboard Nav) + WelcomeDialog funktional |
+| C-THEME | `done` | — | ✅ Verifiziert — SettingsTheme.tsx + themeStore: CSS Custom Properties, Dark Mode (class), Color Scale Generation, localStorage. 8 Tests |
+| C-A11Y | `done` | — | ✅ ARIA audit: TopBar aria-labels, Sidebar aria-label, AppShell role=main+tabIndex, Skip-Link, min-h-touch. Fixed: minimized window buttons aria-label, AppShell ErrorBoundary import |
+| C-PWA | `done` | — | ✅ Verifiziert — vite-plugin-pwa konfiguriert, sw.js+registerSW.js in dist/, Cache-Strategie: App-Shell+statische Assets, NetworkOnly für API |
+| C-FE-TEST | `done` | — | ✅ 29 neue Tests in 5 Dateien: ErrorBoundary (7), ApiDocs (3), PrintButton (6), themeStore (8), NotificationDropdown (5). Alle grün |
+| C-DOC | `done` | — | ✅ docs/ui-design-guidelines.md aktualisiert: Error Boundaries, Print/PDF, API Docs, Notification-System, A11Y Patterns |
+
+---
+
+## Phasen D-J
 
 Detaillierte Task-Listen werden beim Start der jeweiligen Phase eingetragen. Siehe `PLATFORM_ROADMAP.md` für alle Tasks.
 
diff --git a/docs/ui-design-guidelines.md b/docs/ui-design-guidelines.md
index cc22212..98136a6 100644
--- a/docs/ui-design-guidelines.md
+++ b/docs/ui-design-guidelines.md
@@ -511,7 +511,118 @@ function ContactForm({ open, onClose }) {
 
 ---
 
-## 10. Datei-Struktur
+## 10. Error Boundaries & Plugin-Fehlerbehandlung
+
+### ErrorBoundary (common)
+
+Die zentrale `ErrorBoundary` in `components/common/ErrorBoundary.tsx` fängt React-Render-Fehler ab und zeigt eine Fallback-UI mit:
+
+- **Trace-ID**: Jeder Fehler erhält eine eindeutige `trace_id` (Format: `err-<timestamp>-<random>`), die im Fehlerbuffer und im Backend-Log gespeichert wird
+- **Fehlerdetails**: Ausklappbare Details mit Fehlermeldung und Stack-Trace
+- **Retry-Button**: Setzt den Error-State zurück und versucht erneut zu rendern
+- **Neu laden-Button**: Lädt die Seite neu (`window.location.reload()`)
+- **ARIA**: `role="alert"` und `aria-live="assertive"` für Screenreader
+
+```tsx
+import { ErrorBoundary } from '@/components/common/ErrorBoundary';
+
+<ErrorBoundary>
+  <MyComponent />
+</ErrorBoundary>
+
+// Custom Fallback
+<ErrorBoundary fallback={(error, retry, traceId) => <CustomErrorUI error={error} retry={retry} traceId={traceId} />}>
+  <MyComponent />
+</ErrorBoundary>
+```
+
+### PluginErrorBoundary
+
+Plugin-Seiten werden zusätzlich durch `PluginErrorBoundary` in `PluginLoader.tsx` umschlossen. Diese zeigt den Plugin-Namen im Fehlerfall und loggt den Fehler mit `pluginName` und `trace_id`.
+
+### PluginRouteRenderer
+
+Der `PluginRouteRenderer` (Catch-All Route) ist mit `ErrorBoundary` umschlossen, sodass Plugin-Seiten-Fehler nicht die gesamte App crashen.
+
+---
+
+## 11. Print & PDF-Export
+
+### PrintButton
+
+Die `PrintButton`-Komponente in `components/common/PrintButton.tsx` bietet ein Dropdown mit Druck- und PDF-Export-Funktionen:
+
+- **Drucken**: Ruft `printElement(targetId)` oder `printCurrentPage()` auf
+- **Als PDF**: Ruft `exportToPDF(targetId, filename)` auf (Browser-Print-to-PDF)
+- **Print-CSS**: `public/print.css` mit `@media print` Regeln — versteckt Sidebars, TopBar, Buttons und formatiert Tabellen/Card für Druck
+
+```tsx
+import { PrintButton } from '@/components/common/PrintButton';
+
+<PrintButton targetId="contact-detail" filename="kontakt-john-doe" />
+```
+
+Verwendung in: `ContactDetailPage`, `Reports`, `Calendar`.
+
+---
+
+## 12. API-Dokumentation (Swagger UI)
+
+Die `ApiDocsPage` in `pages/ApiDocs.tsx` bettet die FastAPI Swagger UI in einem iframe ein:
+
+- Route: `/api-docs` (erfordert `settings:read` Permission)
+- iframe src: `/docs` (FastAPI Swagger UI)
+- External-Link: Öffnet `/docs` in neuem Tab
+- Vollbild-iframe mit Header-Leiste
+
+---
+
+## 13. Notification-System
+
+### NotificationBell + Dropdown
+
+Die `NotificationBell` in `components/layout/NotificationBell.tsx` zeigt ungelesene Benachrichtigungen mit:
+
+- **Unread-Badge**: Roter Zähler (max. 99+) mit 30s Polling
+- **Dropdown**: Liste der Benachrichtigungen, „Alle als gelesen"-Button
+- **System-Channel-Link**: Öffnet den Kommunikations-System-Channel unter `/communication?channel=system`
+- **Alle anzeigen**: Navigiert zu `/settings/notifications`
+
+Das Backend delegiert `/notifications` an den Kommunikations-System-Channel (`post_system_message`).
+
+---
+
+## 14. Accessibility (A11Y) Patterns
+
+### Verbindliche ARIA-Regeln
+
+| Element | Attribut | Wert |
+|---|---|---|
+| Buttons | `aria-label` | Beschreibung der Aktion |
+| Icon-only Buttons | `aria-label` + `aria-hidden` auf Icon | Icon dekorativ |
+| Dropdowns | `aria-haspopup="menu"` + `aria-expanded` | true/false |
+| Menüs | `role="menu"` + `aria-label` | Menüname |
+| Error-Bereiche | `role="alert"` + `aria-live="assertive"` | Für Screenreader |
+| Navigation | `aria-label` auf `<nav>` und `<aside>` | „Hauptnavigation" etc. |
+| Skip-Link | `sr-only focus:not-sr-only` | „Zum Hauptinhalt springen" |
+
+### Touch Targets
+
+Alle interaktiven Elemente müssen `min-h-touch` (44px) und `min-w-touch` (44px) haben:
+
+```tsx
+<button className="min-h-touch min-w-touch ...">Klick</button>
+```
+
+### Focus-Management
+
+- Sichtbarer Focus-Ring: `focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500`
+- Skip-Link in `App.tsx`: `sr-only focus:not-sr-only`
+- `main`-Element mit `tabIndex={-1}` für Tastatur-Fokus
+
+---
+
+## 15. Datei-Struktur
 
 ```
 frontend/src/
diff --git a/frontend/src/__tests__/common/ErrorBoundary.test.tsx b/frontend/src/__tests__/common/ErrorBoundary.test.tsx
new file mode 100644
index 0000000..aec292f
--- /dev/null
+++ b/frontend/src/__tests__/common/ErrorBoundary.test.tsx
@@ -0,0 +1,108 @@
+/**
+ * ErrorBoundary tests — verifies error catching, trace_id display, and retry.
+ */
+
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ErrorBoundary } from '@/components/common/ErrorBoundary';
+
+// Component that throws on render
+function ThrowOnRender({ message }: { message: string }) {
+  throw new Error(message);
+}
+
+// Component that toggles throwing
+function ConditionalThrow({ shouldThrow }: { shouldThrow: boolean }) {
+  if (shouldThrow) throw new Error('Conditional error');
+  return <div data-testid="safe-content">Safe content</div>;
+}
+
+describe('ErrorBoundary', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+
+  it('renders children when no error occurs', () => {
+    render(
+      <ErrorBoundary>
+        <div data-testid="child">Hello World</div>
+      </ErrorBoundary>
+    );
+    expect(screen.getByTestId('child')).toBeInTheDocument();
+  });
+
+  it('catches render errors and shows fallback UI', () => {
+    render(
+      <ErrorBoundary>
+        <ThrowOnRender message="Test error" />
+      </ErrorBoundary>
+    );
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+    expect(screen.getByText('Etwas ist schiefgelaufen')).toBeInTheDocument();
+  });
+
+  it('displays a trace_id when error occurs', () => {
+    render(
+      <ErrorBoundary>
+        <ThrowOnRender message="Trace test" />
+      </ErrorBoundary>
+    );
+    const traceEl = screen.getByTestId('error-trace-id');
+    expect(traceEl).toBeInTheDocument();
+    expect(traceEl.textContent).toMatch(/Trace-ID: err-/);
+  });
+
+  it('shows error details in a details element', () => {
+    render(
+      <ErrorBoundary>
+        <ThrowOnRender message="Detailed error" />
+      </ErrorBoundary>
+    );
+    expect(screen.getByText('Fehlerdetails')).toBeInTheDocument();
+  });
+
+  it('has retry and reload buttons', () => {
+    render(
+      <ErrorBoundary>
+        <ThrowOnRender message="Button test" />
+      </ErrorBoundary>
+    );
+    expect(screen.getByText('Erneut versuchen')).toBeInTheDocument();
+    expect(screen.getByText('Neu laden')).toBeInTheDocument();
+  });
+
+  it('retries and resets error state when retry is clicked', () => {
+    let shouldThrow = true;
+
+    function Wrapper() {
+      if (shouldThrow) throw new Error('Retry test error');
+      return <div data-testid="safe-content">Safe content</div>;
+    }
+
+    const { rerender } = render(
+      <ErrorBoundary>
+        <Wrapper />
+      </ErrorBoundary>
+    );
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+
+    // Stop throwing, then click retry — ErrorBoundary re-renders children without error
+    shouldThrow = false;
+    fireEvent.click(screen.getByText('Erneut versuchen'));
+
+    expect(screen.getByTestId('safe-content')).toBeInTheDocument();
+  });
+
+  it('uses custom fallback when provided', () => {
+    const customFallback = vi.fn(() => <div data-testid="custom-fallback">Custom</div>);
+    render(
+      <ErrorBoundary fallback={customFallback}>
+        <ThrowOnRender message="Custom fallback" />
+      </ErrorBoundary>
+    );
+    expect(screen.getByTestId('custom-fallback')).toBeInTheDocument();
+    expect(customFallback).toHaveBeenCalled();
+  });
+});
diff --git a/frontend/src/__tests__/common/PrintButton.test.tsx b/frontend/src/__tests__/common/PrintButton.test.tsx
new file mode 100644
index 0000000..933673f
--- /dev/null
+++ b/frontend/src/__tests__/common/PrintButton.test.tsx
@@ -0,0 +1,62 @@
+/**
+ * PrintButton tests — verifies dropdown, print and PDF export actions.
+ */
+
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { PrintButton } from '@/components/common/PrintButton';
+
+// Mock print utilities
+vi.mock('@/utils/print', () => ({
+  printElement: vi.fn(),
+  printCurrentPage: vi.fn(),
+  exportToPDF: vi.fn(),
+}));
+
+import { printElement, printCurrentPage, exportToPDF } from '@/utils/print';
+
+describe('PrintButton', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders the trigger button', () => {
+    render(<PrintButton />);
+    expect(screen.getByTestId('print-button-trigger')).toBeInTheDocument();
+  });
+
+  it('opens dropdown on click', () => {
+    render(<PrintButton />);
+    fireEvent.click(screen.getByTestId('print-button-trigger'));
+    expect(screen.getByTestId('print-button-dropdown')).toBeInTheDocument();
+  });
+
+  it('calls printElement when targetId is set and print is clicked', () => {
+    render(<PrintButton targetId="my-section" />);
+    fireEvent.click(screen.getByTestId('print-button-trigger'));
+    fireEvent.click(screen.getByTestId('print-button-print'));
+    expect(printElement).toHaveBeenCalledWith('my-section');
+  });
+
+  it('calls printCurrentPage when no targetId and print is clicked', () => {
+    render(<PrintButton />);
+    fireEvent.click(screen.getByTestId('print-button-trigger'));
+    fireEvent.click(screen.getByTestId('print-button-print'));
+    expect(printCurrentPage).toHaveBeenCalled();
+  });
+
+  it('calls exportToPDF with targetId and filename', () => {
+    render(<PrintButton targetId="report" filename="monthly-report" />);
+    fireEvent.click(screen.getByTestId('print-button-trigger'));
+    fireEvent.click(screen.getByTestId('print-button-pdf'));
+    expect(exportToPDF).toHaveBeenCalledWith('report', 'monthly-report');
+  });
+
+  it('has aria-haspopup and aria-expanded attributes', () => {
+    render(<PrintButton />);
+    const btn = screen.getByTestId('print-button-trigger');
+    expect(btn).toHaveAttribute('aria-haspopup', 'menu');
+    expect(btn).toHaveAttribute('aria-expanded', 'false');
+  });
+});
diff --git a/frontend/src/__tests__/notifications/NotificationDropdown.test.tsx b/frontend/src/__tests__/notifications/NotificationDropdown.test.tsx
new file mode 100644
index 0000000..898063b
--- /dev/null
+++ b/frontend/src/__tests__/notifications/NotificationDropdown.test.tsx
@@ -0,0 +1,84 @@
+/**
+ * NotificationDropdown tests — verifies list, mark-read, system channel link.
+ */
+
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { NotificationDropdown } from '@/components/notifications/NotificationDropdown';
+
+// Mock react-i18next
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string, fallback: string) => fallback }),
+}));
+
+// Mock notifications API
+vi.mock('@/api/notifications', () => ({
+  useNotifications: vi.fn(() => ({
+    data: {
+      items: [
+        { id: 'n1', type: 'info', title: 'Test Notification', body: 'Body text', read_at: null, created_at: '2026-01-01T00:00:00Z' },
+        { id: 'n2', type: 'warning', title: 'Read Notification', body: 'Already read', read_at: '2026-01-01T01:00:00Z', created_at: '2026-01-01T00:00:00Z' },
+      ],
+    },
+    isLoading: false,
+    isError: false,
+  })),
+  useMarkNotificationRead: vi.fn(() => ({
+    mutate: vi.fn(),
+    isPending: false,
+  })),
+}));
+
+// Mock NotificationItem to simplify rendering
+vi.mock('@/components/notifications/NotificationItem', () => ({
+  NotificationItem: ({ notification }: { notification: any }) => (
+    <div data-testid={`notif-item-${notification.id}`}>
+      {notification.title}
+    </div>
+  ),
+}));
+
+describe('NotificationDropdown', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  function renderDropdown() {
+    return render(
+      <MemoryRouter>
+        <NotificationDropdown />
+      </MemoryRouter>
+    );
+  }
+
+  it('renders notification items from API', () => {
+    renderDropdown();
+    expect(screen.getByTestId('notif-item-n1')).toBeInTheDocument();
+    expect(screen.getByTestId('notif-item-n2')).toBeInTheDocument();
+  });
+
+  it('shows mark-all-read button when there are unread notifications', () => {
+    renderDropdown();
+    expect(screen.getByText('Alle als gelesen')).toBeInTheDocument();
+  });
+
+  it('has a system channel link button', () => {
+    renderDropdown();
+    expect(screen.getByText('System-Channel öffnen')).toBeInTheDocument();
+  });
+
+  it('has a view-all button', () => {
+    renderDropdown();
+    expect(screen.getByText('Alle anzeigen')).toBeInTheDocument();
+  });
+
+  it('has proper ARIA role and label', () => {
+    renderDropdown();
+    const menus = screen.getAllByRole('menu');
+    const outerMenu = menus.find((m) => m.getAttribute('aria-label') === 'Benachrichtigungen');
+    expect(outerMenu).toBeDefined();
+    expect(outerMenu).toHaveAttribute('aria-label', 'Benachrichtigungen');
+  });
+});
diff --git a/frontend/src/__tests__/pages/ApiDocs.test.tsx b/frontend/src/__tests__/pages/ApiDocs.test.tsx
new file mode 100644
index 0000000..415d095
--- /dev/null
+++ b/frontend/src/__tests__/pages/ApiDocs.test.tsx
@@ -0,0 +1,36 @@
+/**
+ * ApiDocs page tests — verifies iframe embedding and external link.
+ */
+
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ApiDocsPage } from '@/pages/ApiDocs';
+
+// Mock react-i18next
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string, fallback: string) => fallback }),
+}));
+
+describe('ApiDocsPage', () => {
+  it('renders the page with title', () => {
+    render(<ApiDocsPage />);
+    expect(screen.getByTestId('api-docs-page')).toBeInTheDocument();
+    expect(screen.getByText('API-Dokumentation')).toBeInTheDocument();
+  });
+
+  it('embeds an iframe pointing to /docs', () => {
+    render(<ApiDocsPage />);
+    const iframe = screen.getByTitle('API-Dokumentation');
+    expect(iframe.tagName).toBe('IFRAME');
+    expect(iframe).toHaveAttribute('src', '/docs');
+  });
+
+  it('has a link to open /docs in a new tab', () => {
+    render(<ApiDocsPage />);
+    const link = screen.getByRole('link', { name: 'In neuem Tab öffnen' });
+    expect(link).toHaveAttribute('href', '/docs');
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+});
diff --git a/frontend/src/__tests__/store/themeStore.test.ts b/frontend/src/__tests__/store/themeStore.test.ts
new file mode 100644
index 0000000..cf002e7
--- /dev/null
+++ b/frontend/src/__tests__/store/themeStore.test.ts
@@ -0,0 +1,99 @@
+/**
+ * themeStore tests — verifies theme application, dark mode, and persistence.
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { useThemeStore } from '@/store/themeStore';
+
+describe('themeStore', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    // Reset store to defaults
+    useThemeStore.setState({
+      primaryColor: '#2563eb',
+      accentColor: '#d946ef',
+      fontFamily: 'Inter',
+      borderRadius: '0.5rem',
+      darkMode: false,
+    });
+    // Clear CSS custom properties
+    const root = document.documentElement;
+    root.className = '';
+    // Clear all custom properties
+    for (let i = root.style.length - 1; i >= 0; i--) {
+      const prop = root.style[i];
+      if (prop && prop.startsWith('--')) {
+        root.style.removeProperty(prop);
+      }
+    }
+  });
+
+  it('has default theme values', () => {
+    const state = useThemeStore.getState();
+    expect(state.primaryColor).toBe('#2563eb');
+    expect(state.accentColor).toBe('#d946ef');
+    expect(state.fontFamily).toBe('Inter');
+    expect(state.borderRadius).toBe('0.5rem');
+    expect(state.darkMode).toBe(false);
+  });
+
+  it('setTheme updates primary color and applies CSS variables', () => {
+    useThemeStore.getState().setTheme({ primaryColor: '#ff0000' });
+    expect(useThemeStore.getState().primaryColor).toBe('#ff0000');
+    // Check CSS variable was set
+    const root = document.documentElement;
+    expect(root.style.getPropertyValue('--color-primary-default')).toBe('#ff0000');
+  });
+
+  it('toggleDarkMode adds dark class to html element', () => {
+    expect(document.documentElement.classList.contains('dark')).toBe(false);
+    useThemeStore.getState().toggleDarkMode();
+    expect(useThemeStore.getState().darkMode).toBe(true);
+    expect(document.documentElement.classList.contains('dark')).toBe(true);
+  });
+
+  it('toggleDarkMode twice removes dark class', () => {
+    useThemeStore.getState().toggleDarkMode();
+    expect(document.documentElement.classList.contains('dark')).toBe(true);
+    useThemeStore.getState().toggleDarkMode();
+    expect(useThemeStore.getState().darkMode).toBe(false);
+    expect(document.documentElement.classList.contains('dark')).toBe(false);
+  });
+
+  it('saves theme to localStorage', () => {
+    useThemeStore.getState().setTheme({ primaryColor: '#00ff00' });
+    const stored = localStorage.getItem('leocrm-theme');
+    expect(stored).not.toBeNull();
+    const parsed = JSON.parse(stored!);
+    expect(parsed.primaryColor).toBe('#00ff00');
+  });
+
+  it('loadFromStorage restores saved theme', () => {
+    localStorage.setItem('leocrm-theme', JSON.stringify({
+      primaryColor: '#123456',
+      accentColor: '#abcdef',
+      fontFamily: 'Roboto',
+      borderRadius: '1rem',
+      darkMode: true,
+    }));
+    useThemeStore.getState().loadFromStorage();
+    const state = useThemeStore.getState();
+    expect(state.primaryColor).toBe('#123456');
+    expect(state.accentColor).toBe('#abcdef');
+    expect(state.fontFamily).toBe('Roboto');
+    expect(state.borderRadius).toBe('1rem');
+    expect(state.darkMode).toBe(true);
+  });
+
+  it('setTheme applies font family CSS variable', () => {
+    useThemeStore.getState().setTheme({ fontFamily: 'Roboto' });
+    const root = document.documentElement;
+    expect(root.style.getPropertyValue('--font-sans')).toContain('Roboto');
+  });
+
+  it('setTheme applies border radius CSS variable', () => {
+    useThemeStore.getState().setTheme({ borderRadius: '1rem' });
+    const root = document.documentElement;
+    expect(root.style.getPropertyValue('--radius-md')).toBe('1rem');
+  });
+});
diff --git a/frontend/src/components/common/ErrorBoundary.tsx b/frontend/src/components/common/ErrorBoundary.tsx
index c36c9f7..dd4c596 100644
--- a/frontend/src/components/common/ErrorBoundary.tsx
+++ b/frontend/src/components/common/ErrorBoundary.tsx
@@ -3,13 +3,19 @@ import { logError } from '@/utils/errorLogger';
 
 interface ErrorBoundaryProps {
   children: ReactNode;
-  /** Optional fallback render function; receives the error and a retry callback */
-  fallback?: (error: Error, retry: () => void) => ReactNode;
+  /** Optional fallback render function; receives the error, a retry callback, and a trace_id */
+  fallback?: (error: Error, retry: () => void, traceId: string) => ReactNode;
 }
 
 interface ErrorBoundaryState {
   hasError: boolean;
   error: Error | null;
+  traceId: string | null;
+}
+
+/** Generate a short unique trace ID for error tracking */
+function generateTraceId(): string {
+  return 'err-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 8);
 }
 
 /**
@@ -21,79 +27,78 @@ interface ErrorBoundaryState {
 export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
   constructor(props: ErrorBoundaryProps) {
     super(props);
-    this.state = { hasError: false, error: null };
+    this.state = { hasError: false, error: null, traceId: null };
   }
 
   static getDerivedStateFromError(error: Error): ErrorBoundaryState {
-    return { hasError: true, error };
+    return { hasError: true, error, traceId: generateTraceId() };
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
-    // Log to console + backend + sessionStorage buffer
-    logError(error, { componentStack: errorInfo.componentStack });
+    // Log to console + backend + sessionStorage buffer with trace_id
+    logError(error, { componentStack: errorInfo.componentStack, trace_id: this.state.traceId });
   }
 
   handleRetry = (): void => {
-    this.setState({ hasError: false, error: null });
+    this.setState({ hasError: false, error: null, traceId: null });
   };
 
   render(): ReactNode {
     if (this.state.hasError && this.state.error) {
+      const traceId = this.state.traceId || '';
+
       // Custom fallback if provided
       if (this.props.fallback) {
-        return this.props.fallback(this.state.error, this.handleRetry);
+        return this.props.fallback(this.state.error, this.handleRetry, traceId);
       }
 
-      // Default fallback UI
+      // Default fallback UI — Tailwind classes, trace_id, retry + reload
       return (
         <div
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            minHeight: '300px',
-            padding: '2rem',
-            textAlign: 'center',
-          }}
+          className="flex flex-col items-center justify-center min-h-[300px] p-8 text-center"
+          role="alert"
+          aria-live="assertive"
         >
-          <h2 style={{ marginBottom: '0.5rem', color: '#dc2626' }}>
+          <div
+            className="text-danger-500 text-5xl mb-4"
+            aria-hidden="true"
+          >
+            ⚠️
+          </div>
+          <h2 className="text-xl font-bold text-secondary-900 mb-2">
             Etwas ist schiefgelaufen
           </h2>
-          <p style={{ marginBottom: '1rem', color: '#6b7280', maxWidth: '400px' }}>
+          <p className="text-sm text-secondary-600 mb-4 max-w-md">
             Ein unerwarteter Fehler ist aufgetreten. Sie können es erneut versuchen oder die Seite aktualisieren.
           </p>
-          <details style={{ marginBottom: '1rem', maxWidth: '600px', color: '#9ca3af' }}>
-            <summary style={{ cursor: 'pointer', fontSize: '0.875rem' }}>
+          {traceId && (
+            <p className="text-xs text-secondary-400 mb-4 font-mono" data-testid="error-trace-id">
+              Trace-ID: {traceId}
+            </p>
+          )}
+          <details className="mb-4 max-w-lg text-left text-secondary-500">
+            <summary className="cursor-pointer text-sm hover:text-secondary-700">
               Fehlerdetails
             </summary>
-            <pre
-              style={{
-                marginTop: '0.5rem',
-                fontSize: '0.75rem',
-                overflow: 'auto',
-                textAlign: 'left',
-              }}
-            >
+            <pre className="mt-2 p-3 bg-secondary-50 rounded text-xs overflow-auto max-h-32">
               {this.state.error.message}
               {this.state.error.stack ? `\n\n${this.state.error.stack}` : ''}
             </pre>
           </details>
-          <button
-            onClick={this.handleRetry}
-            style={{
-              padding: '0.5rem 1.5rem',
-              backgroundColor: '#2563eb',
-              color: 'white',
-              border: 'none',
-              borderRadius: '0.375rem',
-              cursor: 'pointer',
-              fontSize: '0.875rem',
-              fontWeight: 500,
-            }}
-          >
-            Erneut versuchen
-          </button>
+          <div className="flex gap-3">
+            <button
+              onClick={this.handleRetry}
+              className="inline-flex items-center px-5 py-2.5 bg-primary-600 text-white font-medium rounded-md hover:bg-primary-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 transition-colors min-h-touch"
+            >
+              Erneut versuchen
+            </button>
+            <button
+              onClick={() => window.location.reload()}
+              className="inline-flex items-center px-5 py-2.5 bg-secondary-100 text-secondary-700 font-medium rounded-md hover:bg-secondary-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-secondary-400 focus-visible:ring-offset-2 transition-colors min-h-touch"
+            >
+              Neu laden
+            </button>
+          </div>
         </div>
       );
     }
diff --git a/frontend/src/components/layout/AppShell.tsx b/frontend/src/components/layout/AppShell.tsx
index 02e9bb7..fc5e278 100644
--- a/frontend/src/components/layout/AppShell.tsx
+++ b/frontend/src/components/layout/AppShell.tsx
@@ -10,7 +10,7 @@ import { useAIUIControl } from '@/hooks/useAIUIControl';
 import { PluginRegistry } from '@/components/plugins/PluginRegistry';
 import { AIUIControlIndicator } from '@/components/ai-ui-control/AIUIControlIndicator';
 import { WindowContainer } from '@/components/window/WindowContainer';
-import { ErrorBoundary } from '@/components/ErrorBoundary';
+import { ErrorBoundary } from '@/components/common/ErrorBoundary';
 import { WelcomeDialog } from '@/components/onboarding/WelcomeDialog';
 import { OnboardingTour } from '@/components/onboarding/OnboardingTour';
 import { useOnboardingStore } from '@/store/onboardingStore';
diff --git a/frontend/src/components/layout/StartLayout.tsx b/frontend/src/components/layout/StartLayout.tsx
index 76b94cb..99132ad 100644
--- a/frontend/src/components/layout/StartLayout.tsx
+++ b/frontend/src/components/layout/StartLayout.tsx
@@ -7,7 +7,7 @@ import React from 'react';
 import { TopBar } from './TopBar';
 import { ToastContainer } from '@/components/ui/Toast';
 import { PluginRegistry } from '@/components/plugins/PluginRegistry';
-import { ErrorBoundary } from '@/components/ErrorBoundary';
+import { ErrorBoundary } from '@/components/common/ErrorBoundary';
 import { Outlet } from 'react-router-dom';
 
 export function StartLayout() {
diff --git a/frontend/src/components/layout/TopBar.tsx b/frontend/src/components/layout/TopBar.tsx
index 1e8ec49..32e16f1 100644
--- a/frontend/src/components/layout/TopBar.tsx
+++ b/frontend/src/components/layout/TopBar.tsx
@@ -98,8 +98,9 @@ export function TopBar() {
               <button
                 key={win.id}
                 onClick={() => restoreWindow(win.id)}
-                className="flex items-center gap-1.5 bg-secondary-100 text-secondary-700 px-3 py-1 rounded-md text-sm hover:bg-secondary-200"
+                className="flex items-center gap-1.5 bg-secondary-100 text-secondary-700 px-3 py-1 rounded-md text-sm hover:bg-secondary-200 min-h-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
                 title={win.title}
+                aria-label={`Fenster wiederherstellen: ${win.title}`}
               >
                 <Layers className="w-3.5 h-3.5" />
                 <span className="max-w-32 truncate">{win.title}</span>
diff --git a/frontend/src/components/notifications/NotificationDropdown.tsx b/frontend/src/components/notifications/NotificationDropdown.tsx
index a2a549a..aaca0a1 100644
--- a/frontend/src/components/notifications/NotificationDropdown.tsx
+++ b/frontend/src/components/notifications/NotificationDropdown.tsx
@@ -12,7 +12,7 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Bell, CheckCheck, Settings, AlertCircle } from 'lucide-react';
+import { Bell, CheckCheck, Settings, AlertCircle, MessageSquare } from 'lucide-react';
 import { useNotifications, useMarkNotificationRead } from '@/api/notifications';
 import { NotificationItem } from './NotificationItem';
 
@@ -37,6 +37,10 @@ export function NotificationDropdown() {
     navigate('/settings/notifications');
   };
 
+  const handleOpenSystemChannel = () => {
+    navigate('/communication?channel=system');
+  };
+
   return (
     <div
       className="absolute top-full right-0 mt-1 w-80 bg-white rounded-md shadow-lg border border-secondary-200 z-50"
@@ -97,10 +101,18 @@ export function NotificationDropdown() {
       </div>
 
       {/* Footer */}
-      <div className="border-t border-secondary-200 px-3 py-2">
+      <div className="border-t border-secondary-200 px-3 py-2 space-y-1">
+        <button
+          onClick={handleOpenSystemChannel}
+          className="w-full flex items-center justify-center gap-1.5 text-sm text-primary-600 hover:text-primary-700 font-medium py-1.5 rounded-md hover:bg-primary-50 min-h-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+          aria-label={t('notifications.openSystemChannel', 'System-Channel öffnen')}
+        >
+          <MessageSquare className="w-3.5 h-3.5" strokeWidth={2} />
+          {t('notifications.openSystemChannel', 'System-Channel öffnen')}
+        </button>
         <button
           onClick={handleNavigateAll}
-          className="w-full flex items-center justify-center gap-1.5 text-sm text-primary-600 hover:text-primary-700 font-medium py-1.5 rounded-md hover:bg-primary-50 min-h-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+          className="w-full flex items-center justify-center gap-1.5 text-sm text-secondary-600 hover:text-secondary-700 font-medium py-1.5 rounded-md hover:bg-secondary-50 min-h-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
           aria-label={t('notifications.viewAll', 'Alle anzeigen')}
         >
           <Settings className="w-3.5 h-3.5" strokeWidth={2} />
diff --git a/frontend/src/components/plugins/PluginLoader.tsx b/frontend/src/components/plugins/PluginLoader.tsx
index 6088f22..d874416 100644
--- a/frontend/src/components/plugins/PluginLoader.tsx
+++ b/frontend/src/components/plugins/PluginLoader.tsx
@@ -1,5 +1,6 @@
 import React, { Suspense, lazy, Component, ReactNode } from 'react';
 import { Loader2 } from 'lucide-react';
+import { logError } from '@/utils/errorLogger';
 
 // ── Error Boundary ──────────────────────────────────────────────────────
 
@@ -10,20 +11,79 @@ interface PluginErrorBoundaryProps {
 
 interface PluginErrorBoundaryState {
   hasError: boolean;
+  error: Error | null;
+  traceId: string | null;
+}
+
+function generateTraceId(): string {
+  return 'plugin-err-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 8);
 }
 
 class PluginErrorBoundary extends Component<PluginErrorBoundaryProps, PluginErrorBoundaryState> {
-  state = { hasError: false };
+  state: PluginErrorBoundaryState = { hasError: false, error: null, traceId: null };
 
-  static getDerivedStateFromError(): PluginErrorBoundaryState {
-    return { hasError: true };
+  static getDerivedStateFromError(error: Error): PluginErrorBoundaryState {
+    return { hasError: true, error, traceId: generateTraceId() };
   }
 
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+    logError(error, {
+      componentStack: errorInfo.componentStack,
+      pluginName: this.props.pluginName,
+      trace_id: this.state.traceId,
+      source: 'PluginErrorBoundary',
+    });
+  }
+
+  handleRetry = (): void => {
+    this.setState({ hasError: false, error: null, traceId: null });
+  };
+
   render() {
     if (this.state.hasError) {
       return (
-        <div className="p-4 text-sm text-red-600" role="alert">
-          Failed to load plugin: {this.props.pluginName}
+        <div
+          className="flex flex-col items-center justify-center min-h-[300px] p-8 text-center"
+          role="alert"
+          aria-live="assertive"
+        >
+          <div className="text-danger-500 text-4xl mb-3" aria-hidden="true">⚠️</div>
+          <h2 className="text-lg font-bold text-secondary-900 mb-2">
+            Plugin konnte nicht geladen werden
+          </h2>
+          <p className="text-sm text-secondary-600 mb-3">
+            Das Plugin „{this.props.pluginName}" hat einen Fehler verursacht.
+          </p>
+          {this.state.traceId && (
+            <p className="text-xs text-secondary-400 mb-3 font-mono" data-testid="plugin-error-trace-id">
+              Trace-ID: {this.state.traceId}
+            </p>
+          )}
+          {this.state.error && (
+            <details className="mb-4 max-w-lg text-left text-secondary-500">
+              <summary className="cursor-pointer text-sm hover:text-secondary-700">
+                Fehlerdetails
+              </summary>
+              <pre className="mt-2 p-3 bg-secondary-50 rounded text-xs overflow-auto max-h-32">
+                {this.state.error.message}
+                {this.state.error.stack ? `\n\n${this.state.error.stack}` : ''}
+              </pre>
+            </details>
+          )}
+          <div className="flex gap-3">
+            <button
+              onClick={this.handleRetry}
+              className="inline-flex items-center px-4 py-2 bg-primary-600 text-white text-sm font-medium rounded-md hover:bg-primary-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 transition-colors min-h-touch"
+            >
+              Erneut versuchen
+            </button>
+            <button
+              onClick={() => window.location.reload()}
+              className="inline-flex items-center px-4 py-2 bg-secondary-100 text-secondary-700 text-sm font-medium rounded-md hover:bg-secondary-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-secondary-400 transition-colors min-h-touch"
+            >
+              Neu laden
+            </button>
+          </div>
         </div>
       );
     }
diff --git a/frontend/src/pages/ApiDocs.tsx b/frontend/src/pages/ApiDocs.tsx
new file mode 100644
index 0000000..74af941
--- /dev/null
+++ b/frontend/src/pages/ApiDocs.tsx
@@ -0,0 +1,50 @@
+/**
+ * ApiDocs page — embeds the FastAPI Swagger UI at /docs in an iframe.
+ * Provides in-app access to API documentation without leaving LeoCRM.
+ */
+
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { BookOpen, ExternalLink } from 'lucide-react';
+
+export function ApiDocsPage() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex flex-col h-full" data-testid="api-docs-page">
+      <div className="flex items-center justify-between px-6 py-4 border-b border-secondary-200 bg-white">
+        <div className="flex items-center gap-3">
+          <BookOpen className="w-5 h-5 text-primary-600" aria-hidden="true" />
+          <div>
+            <h1 className="text-lg font-semibold text-secondary-900">
+              {t('apiDocs.title', 'API-Dokumentation')}
+            </h1>
+            <p className="text-sm text-secondary-500">
+              {t('apiDocs.description', 'Swagger UI — Interaktive API-Referenz')}
+            </p>
+          </div>
+        </div>
+        <a
+          href="/docs"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-primary-600 hover:text-primary-700 hover:bg-primary-50 rounded-md transition-colors min-h-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+          aria-label={t('apiDocs.openInNewTab', 'In neuem Tab öffnen')}
+        >
+          <ExternalLink className="w-4 h-4" aria-hidden="true" />
+          {t('apiDocs.openInNewTab', 'In neuem Tab öffnen')}
+        </a>
+      </div>
+      <div className="flex-1 overflow-hidden">
+        <iframe
+          src="/docs"
+          title={t('apiDocs.title', 'API-Dokumentation')}
+          className="w-full h-full border-0"
+          aria-label={t('apiDocs.title', 'API-Dokumentation')}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default ApiDocsPage;
diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx
index 83f6bcc..bb047f9 100644
--- a/frontend/src/routes/index.tsx
+++ b/frontend/src/routes/index.tsx
@@ -11,7 +11,7 @@ import { PasswordResetRequestPage } from '@/pages/PasswordResetRequest';
 import { PasswordResetConfirmPage } from '@/pages/PasswordResetConfirm';
 import { Loader2 } from 'lucide-react';
 import { PluginRouteRenderer } from '@/components/plugins/PluginRouteRenderer';
-import { ErrorBoundary } from '@/components/ErrorBoundary';
+import { ErrorBoundary } from '@/components/common/ErrorBoundary';
 
 // Lazy-loaded pages (code-splitting)
 const DashboardPage = React.lazy(() => import('@/pages/Dashboard').then(m => ({ default: m.DashboardPage })));
@@ -68,6 +68,7 @@ const WorkspaceManagerPage = React.lazy(() => import('@/pages/SettingsWorkspaces
 const SettingsRechtePage = React.lazy(() => import('@/pages/SettingsRechte').then(m => ({ default: m.SettingsRechtePage })));
 const NoAccessPage = React.lazy(() => import('@/pages/NoAccessPage').then(m => ({ default: m.NoAccessPage })));
 const StartPage = React.lazy(() => import('@/pages/StartPage').then(m => ({ default: m.StartPage })));
+const ApiDocsPage = React.lazy(() => import('@/pages/ApiDocs').then(m => ({ default: m.ApiDocsPage })));
 
 /** Centered spinner fallback for lazy-loaded routes */
 function PageLoader() {
@@ -167,6 +168,7 @@ const router = createBrowserRouter([
       { path: '/contacts/dedup', element: <PermissionRoute permission="contacts:read">{withSuspense(<DedupMergePage />)}</PermissionRoute> },
       { path: '/import-export', element: <PermissionRoute permission="contacts:read">{withSuspense(<ImportExportPage />)}</PermissionRoute> },
       { path: '/tags', element: <PermissionRoute permission="tags:read">{withSuspense(<TagsPage />)}</PermissionRoute> },
+      { path: '/api-docs', element: <PermissionRoute permission="settings:read">{withSuspense(<ApiDocsPage />)}</PermissionRoute> },
       { path: '/activity', element: <PermissionRoute permission="activity:read">{withSuspense(<ActivityTimelinePage />)}</PermissionRoute> },
       { path: '/profile', element: withSuspense(<SettingsProfilePage />) },
       {
@@ -197,10 +199,10 @@ const router = createBrowserRouter([
           { path: 'workspaces', element: withSuspense(<WorkspaceManagerPage />) },
           { path: 'backup', element: withSuspense(<SettingsBackupPage />) },
           { path: 'rechte', element: <PermissionRoute permission="settings:read">{withSuspense(<SettingsRechtePage />)}</PermissionRoute> },
-          { path: '*', element: <PluginRouteRenderer /> },
+          { path: '*', element: <ErrorBoundary>{<PluginRouteRenderer />}</ErrorBoundary> },
         ],
       },
-      { path: '*', element: <PluginRouteRenderer /> },
+      { path: '*', element: <ErrorBoundary>{<PluginRouteRenderer />}</ErrorBoundary> },
     ],
   },
 ]);