feat(K): Phase K EU Compliance — AI Registry, DPIA, Incident Register, Retention Admin, Tests, Doku

- K-REG: GET /api/v1/compliance/ai-registry — lists all agents with ai_use_case_metadata
- K-DPIA: GET /api/v1/compliance/dpia-template — pre-filled DPIA template export
- K-INC: ComplianceIncident model, Migration 0133 (RLS), CRUD routes (admin-only)
- K-RET: GET/PATCH /api/v1/compliance/retention-policies — 5 policies editable
- K-COMP-TEST: 12/12 integration tests pass
- K-DOC: docs/compliance.md — Betriebsdoku
- Frontend: ComplianceTab.tsx in SettingsAI.tsx (new tab)
- 13 files created/modified

frontend/src/pages/ComplianceTab.tsx

@@ -0,0 +1,463 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  fetchAIRegistry,
+  fetchDPIATemplate,
+  fetchIncidents,
+  createIncident,
+  updateIncident,
+  fetchRetentionPolicies,
+  updateRetentionPolicy,
+  type AIRegistryEntry,
+  type ComplianceIncident,
+  type RetentionPolicyEntry,
+  type IncidentCreate,
+} from '../api/compliance';
+
+type SubTab = 'registry' | 'incidents' | 'retention';
+
+export function ComplianceTab() {
+  const { t } = useTranslation();
+  const [subTab, setSubTab] = useState<SubTab>('registry');
+
+  const subTabs: { key: SubTab; label: string }[] = [
+    { key: 'registry', label: t('compliance.aiRegistry', 'AI-Register') },
+    { key: 'incidents', label: t('compliance.incidents', 'Vorfälle') },
+    { key: 'retention', label: t('compliance.retention', 'Aufbewahrung') },
+  ];
+
+  return (
+    <div data-testid="compliance-tab" className="space-y-4">
+      <div className="border-b border-secondary-200 mb-4">
+        <nav className="flex gap-1" role="tablist">
+          {subTabs.map((tab) => (
+            <button
+              key={tab.key}
+              onClick={() => setSubTab(tab.key)}
+              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+                subTab === tab.key
+                  ? 'border-primary-600 text-primary-600'
+                  : 'border-transparent text-secondary-500 hover:text-secondary-700 hover:border-secondary-300'
+              }`}
+              role="tab"
+              aria-selected={subTab === tab.key}
+              aria-label={tab.label}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </nav>
+      </div>
+
+      {subTab === 'registry' && <AIRegistryPanel />}
+      {subTab === 'incidents' && <IncidentsPanel />}
+      {subTab === 'retention' && <RetentionPanel />}
+    </div>
+  );
+}
+
+// ─── AI Registry Panel ───
+
+function AIRegistryPanel() {
+  const { t } = useTranslation();
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['compliance', 'ai-registry'],
+    queryFn: fetchAIRegistry,
+  });
+
+  const handleDPIAExport = async (agentId: string, agentName: string) => {
+    try {
+      const template = await fetchDPIATemplate(agentId);
+      const blob = new Blob([JSON.stringify(template, null, 2)], {
+        type: 'application/json',
+      });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `dpia_${agentName.replace(/\s+/g, '_').toLowerCase()}.json`;
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch {
+      // Error handled by query client
+    }
+  };
+
+  if (isLoading) {
+    return <p className="text-secondary-500" aria-live="polite">{t('common.loading', 'Laden...')}</p>;
+  }
+  if (error) {
+    return <p className="text-red-600" aria-live="polite">{t('common.error', 'Fehler beim Laden')}</p>;
+  }
+  if (!data || data.items.length === 0) {
+    return <p className="text-secondary-500">{t('compliance.noAgents', 'Keine AI-Agenten gefunden')}</p>;
+  }
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="min-w-full divide-y divide-secondary-200" role="table">
+        <thead className="bg-secondary-50">
+          <tr>
+            <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.name', 'Name')}</th>
+            <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.intendedPurpose', 'Zweck')}</th>
+            <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.owner', 'Verantwortlich')}</th>
+            <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.riskClass', 'Risiko')}</th>
+            <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.oversight', 'Oversight')}</th>
+            <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.dataCategories', 'Daten')}</th>
+            <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.status', 'Status')}</th>
+            <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.actions', 'Aktionen')}</th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-secondary-100">
+          {data.items.map((entry: AIRegistryEntry) => {
+            const meta = entry.ai_use_case_metadata as Record<string, unknown>;
+            return (
+              <tr key={entry.agent_id} className="hover:bg-secondary-50">
+                <td className="px-4 py-2 text-sm text-secondary-900">{entry.name}</td>
+                <td className="px-4 py-2 text-sm text-secondary-600">{String(meta.intended_purpose || '')}</td>
+                <td className="px-4 py-2 text-sm text-secondary-600">{String(meta.owner || '')}</td>
+                <td className="px-4 py-2 text-sm">
+                  <span className={`inline-flex px-2 py-0.5 rounded text-xs font-medium ${
+                    meta.risk_class === 'high' ? 'bg-red-100 text-red-700' :
+                    meta.risk_class === 'medium' ? 'bg-yellow-100 text-yellow-700' :
+                    'bg-green-100 text-green-700'
+                  }`}>
+                    {String(meta.risk_class || 'low')}
+                  </span>
+                </td>
+                <td className="px-4 py-2 text-sm text-secondary-600">{String(meta.oversight_policy || '')}</td>
+                <td className="px-4 py-2 text-sm text-secondary-600">
+                  {Array.isArray(meta.data_categories) ? (meta.data_categories as string[]).join(', ') : ''}
+                </td>
+                <td className="px-4 py-2 text-sm">
+                  <span className={`inline-flex px-2 py-0.5 rounded text-xs font-medium ${
+                    entry.is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600'
+                  }`}>
+                    {entry.is_active ? t('compliance.active', 'Aktiv') : t('compliance.inactive', 'Inaktiv')}
+                  </span>
+                </td>
+                <td className="px-4 py-2 text-sm">
+                  <button
+                    onClick={() => handleDPIAExport(entry.agent_id, entry.name)}
+                    className="text-primary-600 hover:text-primary-700 text-xs font-medium"
+                    aria-label={`${t('compliance.dpiaExport', 'DPIA Export')} ${entry.name}`}
+                  >
+                    {t('compliance.dpiaExport', 'DPIA Export')}
+                  </button>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+      {data.items.some((e) => e.validation_warnings.length > 0) && (
+        <div className="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded text-sm text-yellow-800">
+          {t('compliance.warningsNote', 'Einige Agenten haben Validierungswarnungen. Siehe Details im AI-Register.')}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Incidents Panel ───
+
+function IncidentsPanel() {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const [showForm, setShowForm] = useState(false);
+  const [formData, setFormData] = useState<IncidentCreate>({
+    incident_type: 'ai',
+    title: '',
+    description: '',
+    provider: '',
+    measures_taken: '',
+    status: 'open',
+  });
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['compliance', 'incidents'],
+    queryFn: () => fetchIncidents(),
+  });
+
+  const createMutation = useMutation({
+    mutationFn: (data: IncidentCreate) => createIncident(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['compliance', 'incidents'] });
+      setShowForm(false);
+      setFormData({ incident_type: 'ai', title: '', description: '', provider: '', measures_taken: '', status: 'open' });
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: ({ id, data }: { id: string; data: { status?: string } }) =>
+      updateIncident(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['compliance', 'incidents'] });
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    createMutation.mutate(formData);
+  };
+
+  if (isLoading) {
+    return <p className="text-secondary-500" aria-live="polite">{t('common.loading', 'Laden...')}</p>;
+  }
+  if (error) {
+    return <p className="text-red-600" aria-live="polite">{t('common.error', 'Fehler beim Laden')}</p>;
+  }
+
+  return (
+    <div className="space-y-4">
+      <button
+        onClick={() => setShowForm(!showForm)}
+        className="px-4 py-2 bg-primary-600 text-white rounded text-sm font-medium hover:bg-primary-700"
+        aria-label={t('compliance.createIncident', 'Vorfall erstellen')}
+      >
+        {showForm ? t('common.cancel', 'Abbrechen') : t('compliance.createIncident', 'Vorfall erstellen')}
+      </button>
+
+      {showForm && (
+        <form onSubmit={handleSubmit} className="space-y-3 p-4 border border-secondary-200 rounded">
+          <div>
+            <label className="block text-sm font-medium text-secondary-700 mb-1" htmlFor="incident-type">
+              {t('compliance.incidentType', 'Typ')}
+            </label>
+            <select
+              id="incident-type"
+              value={formData.incident_type}
+              onChange={(e) => setFormData({ ...formData, incident_type: e.target.value })}
+              className="w-full px-3 py-2 border border-secondary-300 rounded text-sm"
+              aria-label={t('compliance.incidentType', 'Typ')}
+            >
+              <option value="ai">AI</option>
+              <option value="privacy">Privacy</option>
+              <option value="security">Security</option>
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-secondary-700 mb-1" htmlFor="incident-title">
+              {t('compliance.title', 'Titel')} *
+            </label>
+            <input
+              id="incident-title"
+              type="text"
+              required
+              value={formData.title}
+              onChange={(e) => setFormData({ ...formData, title: e.target.value })}
+              className="w-full px-3 py-2 border border-secondary-300 rounded text-sm"
+              aria-label={t('compliance.title', 'Titel')}
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-secondary-700 mb-1" htmlFor="incident-description">
+              {t('compliance.description', 'Beschreibung')}
+            </label>
+            <textarea
+              id="incident-description"
+              value={formData.description}
+              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+              className="w-full px-3 py-2 border border-secondary-300 rounded text-sm"
+              rows={3}
+              aria-label={t('compliance.description', 'Beschreibung')}
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-secondary-700 mb-1" htmlFor="incident-provider">
+              {t('compliance.provider', 'Provider')}
+            </label>
+            <input
+              id="incident-provider"
+              type="text"
+              value={formData.provider}
+              onChange={(e) => setFormData({ ...formData, provider: e.target.value })}
+              className="w-full px-3 py-2 border border-secondary-300 rounded text-sm"
+              aria-label={t('compliance.provider', 'Provider')}
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-secondary-700 mb-1" htmlFor="incident-measures">
+              {t('compliance.measures', 'Maßnahmen')}
+            </label>
+            <textarea
+              id="incident-measures"
+              value={formData.measures_taken}
+              onChange={(e) => setFormData({ ...formData, measures_taken: e.target.value })}
+              className="w-full px-3 py-2 border border-secondary-300 rounded text-sm"
+              rows={2}
+              aria-label={t('compliance.measures', 'Maßnahmen')}
+            />
+          </div>
+          {createMutation.isError && (
+            <p className="text-red-600 text-sm" role="alert">{t('compliance.createError', 'Fehler beim Erstellen')}</p>
+          )}
+          <button
+            type="submit"
+            disabled={createMutation.isPending}
+            className="px-4 py-2 bg-primary-600 text-white rounded text-sm font-medium hover:bg-primary-700 disabled:opacity-50"
+            aria-label={t('common.save', 'Speichern')}
+          >
+            {createMutation.isPending ? t('common.saving', 'Speichern...') : t('common.save', 'Speichern')}
+          </button>
+        </form>
+      )}
+
+      {!data || data.items.length === 0 ? (
+        <p className="text-secondary-500">{t('compliance.noIncidents', 'Keine Vorfälle erfasst')}</p>
+      ) : (
+        <div className="overflow-x-auto">
+          <table className="min-w-full divide-y divide-secondary-200" role="table">
+            <thead className="bg-secondary-50">
+              <tr>
+                <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.title', 'Titel')}</th>
+                <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.incidentType', 'Typ')}</th>
+                <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.status', 'Status')}</th>
+                <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.provider', 'Provider')}</th>
+                <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.createdAt', 'Erstellt')}</th>
+                <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.actions', 'Aktionen')}</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-secondary-100">
+              {data.items.map((incident: ComplianceIncident) => (
+                <tr key={incident.id} className="hover:bg-secondary-50">
+                  <td className="px-4 py-2 text-sm text-secondary-900">{incident.title}</td>
+                  <td className="px-4 py-2 text-sm text-secondary-600">{incident.incident_type}</td>
+                  <td className="px-4 py-2 text-sm">
+                    <span className={`inline-flex px-2 py-0.5 rounded text-xs font-medium ${
+                      incident.status === 'open' ? 'bg-red-100 text-red-700' :
+                      incident.status === 'resolved' ? 'bg-green-100 text-green-700' :
+                      'bg-gray-100 text-gray-600'
+                    }`}>
+                      {incident.status}
+                    </span>
+                  </td>
+                  <td className="px-4 py-2 text-sm text-secondary-600">{incident.provider}</td>
+                  <td className="px-4 py-2 text-sm text-secondary-600">{incident.created_at || ''}</td>
+                  <td className="px-4 py-2 text-sm">
+                    {incident.status === 'open' && (
+                      <button
+                        onClick={() => updateMutation.mutate({ id: incident.id, data: { status: 'resolved' } })}
+                        className="text-primary-600 hover:text-primary-700 text-xs font-medium"
+                        aria-label={`${t('compliance.resolve', 'Auflösen')} ${incident.title}`}
+                      >
+                        {t('compliance.resolve', 'Auflösen')}
+                      </button>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Retention Policies Panel ───
+
+function RetentionPanel() {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const [editingKey, setEditingKey] = useState<string | null>(null);
+  const [editDays, setEditDays] = useState<number>(0);
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['compliance', 'retention-policies'],
+    queryFn: fetchRetentionPolicies,
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: ({ key, days }: { key: string; days: number }) =>
+      updateRetentionPolicy(key, days),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['compliance', 'retention-policies'] });
+      setEditingKey(null);
+    },
+  });
+
+  if (isLoading) {
+    return <p className="text-secondary-500" aria-live="polite">{t('common.loading', 'Laden...')}</p>;
+  }
+  if (error) {
+    return <p className="text-red-600" aria-live="polite">{t('common.error', 'Fehler beim Laden')}</p>;
+  }
+  if (!data || data.items.length === 0) {
+    return <p className="text-secondary-500">{t('compliance.noPolicies', 'Keine Aufbewahrungsrichtlinien')}</p>;
+  }
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="min-w-full divide-y divide-secondary-200" role="table">
+        <thead className="bg-secondary-50">
+          <tr>
+            <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.policy', 'Richtlinie')}</th>
+            <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.description', 'Beschreibung')}</th>
+            <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.defaultDays', 'Standard (Tage)')}</th>
+            <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.currentDays', 'Aktuell (Tage)')}</th>
+            <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.actions', 'Aktionen')}</th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-secondary-100">
+          {data.items.map((policy: RetentionPolicyEntry) => (
+            <tr key={policy.key} className="hover:bg-secondary-50">
+              <td className="px-4 py-2 text-sm font-medium text-secondary-900">{policy.label}</td>
+              <td className="px-4 py-2 text-sm text-secondary-600">{policy.description}</td>
+              <td className="px-4 py-2 text-sm text-secondary-600">{policy.default_days}</td>
+              <td className="px-4 py-2 text-sm text-secondary-900">
+                {editingKey === policy.key ? (
+                  <input
+                    type="number"
+                    min={1}
+                    max={3650}
+                    value={editDays}
+                    onChange={(e) => setEditDays(parseInt(e.target.value, 10) || 1)}
+                    className="w-20 px-2 py-1 border border-secondary-300 rounded text-sm"
+                    aria-label={t('compliance.days', 'Tage')}
+                  />
+                ) : (
+                  policy.current_days
+                )}
+              </td>
+              <td className="px-4 py-2 text-sm">
+                {editingKey === policy.key ? (
+                  <div className="flex gap-2">
+                    <button
+                      onClick={() => updateMutation.mutate({ key: policy.key, days: editDays })}
+                      disabled={updateMutation.isPending}
+                      className="text-green-600 hover:text-green-700 text-xs font-medium disabled:opacity-50"
+                      aria-label={t('common.save', 'Speichern')}
+                    >
+                      {updateMutation.isPending ? t('common.saving', '...') : t('common.save', 'Speichern')}
+                    </button>
+                    <button
+                      onClick={() => setEditingKey(null)}
+                      className="text-secondary-500 hover:text-secondary-700 text-xs font-medium"
+                      aria-label={t('common.cancel', 'Abbrechen')}
+                    >
+                      {t('common.cancel', 'Abbrechen')}
+                    </button>
+                  </div>
+                ) : (
+                  policy.editable && (
+                    <button
+                      onClick={() => {
+                        setEditingKey(policy.key);
+                        setEditDays(policy.current_days);
+                      }}
+                      className="text-primary-600 hover:text-primary-700 text-xs font-medium"
+                      aria-label={`${t('common.edit', 'Bearbeiten')} ${policy.label}`}
+                    >
+                      {t('common.edit', 'Bearbeiten')}
+                    </button>
+                  )
+                )}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

frontend/src/pages/SettingsAI.tsx

@@ -3,15 +3,17 @@ import { useTranslation } from 'react-i18next';
 import { AISettingsPage } from './AISettings';
 import { ProactiveAISettings } from './ProactiveAISettings';
 import { SettingsMcpPage } from './SettingsMcp';
+import { ComplianceTab } from './ComplianceTab';
 
 export function SettingsAIPage() {
   const { t } = useTranslation();
-  const [activeTab, setActiveTab] = useState<'assistant' | 'proactive' | 'mcp'>('assistant');
+  const [activeTab, setActiveTab] = useState<'assistant' | 'proactive' | 'mcp' | 'compliance'>('assistant');
 
   const tabs = [
     { key: 'assistant' as const, label: t('nav.aiAssistant', 'KI Assistent') },
     { key: 'proactive' as const, label: t('settings.aiProactive', 'Proaktive KI') },
     { key: 'mcp' as const, label: t('settings.mcp', 'MCP') },
+    { key: 'compliance' as const, label: t('settings.compliance', 'Compliance') },
   ];
 
   return (
@@ -40,6 +42,7 @@ export function SettingsAIPage() {
         {activeTab === 'assistant' && <AISettingsPage />}
         {activeTab === 'proactive' && <ProactiveAISettings />}
         {activeTab === 'mcp' && <SettingsMcpPage />}
+        {activeTab === 'compliance' && <ComplianceTab />}
       </div>
     </div>
   );