Phase 3: Plugin-UI-System (WordPress-Style)

Backend:
- PluginManifest um 5 neue UI-Felder erweitert: menu_items, page_routes,
  detail_tabs, settings_pages, dashboard_widgets (FrontendMenuItem,
  FrontendPageRoute, FrontendDetailTab, FrontendSettingsPage,
  FrontendDashboardWidget)
- GET /api/v1/plugins/active-manifests Endpoint liefert UI-Manifeste
  aller aktiven Plugins
- Registry.get_active_manifests() + PluginService.get_active_manifests()
- 12 Built-in Plugins mit UI-Manifest-Daten gefuellt (menu_items,
  page_routes, detail_tabs, settings_pages)
- Plugin-Install-System: POST /upload (ZIP), POST /install-url (URL)
  mit Validierung (Manifest, dangerous imports, SQL migrations)

Frontend:
- pluginStore.ts (Zustand) mit PluginUiManifest Typen + Selektoren
- useActivePluginManifests() React Query Hook
- PluginRegistry.tsx — fetcht Manifeste beim App-Start
- PluginLoader.tsx — dynamisches React.lazy() mit ErrorBoundary
- PluginRouteRenderer.tsx — Catch-all fuer Plugin-Routes
- routes/index.tsx — Catch-all Routes fuer Plugin-Pages + Settings
- Sidebar.tsx — dynamische Plugin Menu-Items mit Grouping + Icons
- Settings.tsx — dynamische Plugin Settings-Pages
- ContactDetail.tsx — dynamische Plugin Detail-Tabs mit Permissions
- AppShell.tsx — PluginRegistry Provider eingebunden
- SettingsPlugins.tsx — Install-UI (ZIP Upload + URL Install)
- plugins.ts — useUploadPlugin() + useInstallPluginFromUrl() Hooks

Docs & Templates:
- docs/plugin-development-guide.md — komplette Entwickler-Doku
- templates/plugin-template/ — Boilerplate mit allen Manifest-Feldern

Tests:
- 34 Vitest-Tests (PluginRegistry, PluginLoader, PluginRouteRenderer,
  pluginStore) — alle bestanden
- TSC: keine neuen Errors (nur pre-existing Dms.tsx)

frontend/src/components/plugins/PluginLoader.tsx

@@ -0,0 +1,84 @@
+import React, { Suspense, lazy, Component, ReactNode } from 'react';
+import { Loader2 } from 'lucide-react';
+
+// ── Error Boundary ──────────────────────────────────────────────────────
+
+interface PluginErrorBoundaryProps {
+  children: ReactNode;
+  pluginName: string;
+}
+
+interface PluginErrorBoundaryState {
+  hasError: boolean;
+}
+
+class PluginErrorBoundary extends Component<PluginErrorBoundaryProps, PluginErrorBoundaryState> {
+  state = { hasError: false };
+
+  static getDerivedStateFromError(): PluginErrorBoundaryState {
+    return { hasError: true };
+  }
+
+  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>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+// ── Lazy Component Cache ────────────────────────────────────────────────
+
+const componentCache = new Map<string, React.LazyExoticComponent<React.ComponentType<any>>>();
+
+function getLazyComponent(componentPath: string): React.LazyExoticComponent<React.ComponentType<any>> {
+  if (componentCache.has(componentPath)) {
+    return componentCache.get(componentPath)!;
+  }
+
+  // Convert @/pages/Mail to ../pages/Mail for dynamic import
+  const importPath = componentPath.replace(/^@\//, '../');
+
+  const LazyComp = lazy(() =>
+    import(/* @vite-ignore */ importPath).then((m) => ({
+      default: m.default || m[Object.keys(m)[0]],
+    }))
+  );
+
+  componentCache.set(componentPath, LazyComp);
+  return LazyComp;
+}
+
+// ── PluginPage Component ───────────────────────────────────────────────
+
+interface PluginPageProps {
+  component: string;
+  pluginName: string;
+}
+
+/**
+ * PluginPage — dynamically loads a plugin page component using React.lazy().
+ * Wraps the lazy component in Suspense with a centered spinner fallback
+ * and an ErrorBoundary that shows a fallback message on failure.
+ */
+export function PluginPage({ component, pluginName }: PluginPageProps) {
+  const LazyComp = getLazyComponent(component);
+
+  return (
+    <PluginErrorBoundary pluginName={pluginName}>
+      <Suspense
+        fallback={
+          <div className="flex items-center justify-center min-h-[50vh]">
+            <Loader2 className="animate-spin h-8 w-8 text-primary-500" />
+          </div>
+        }
+      >
+        <LazyComp />
+      </Suspense>
+    </PluginErrorBoundary>
+  );
+}