[split-required] Split 58 monoliths across Python, Go, TypeScript (Phases 1-3)

Phase 1 — Python (klausur-service): 5 monoliths → 36 files - dsfa_corpus_ingestion.py (1,828 LOC → 5 files) - cv_ocr_engines.py (2,102 LOC → 7 files) - cv_layout.py (3,653 LOC → 10 files) - vocab_worksheet_api.py (2,783 LOC → 8 files) - grid_build_core.py (1,958 LOC → 6 files) Phase 2 — Go (edu-search-service, school-service): 8 monoliths → 19 files - staff_crawler.go (1,402 → 4), policy/store.go (1,168 → 3) - policy_handlers.go (700 → 2), repository.go (684 → 2) - search.go (592 → 2), ai_extraction_handlers.go (554 → 2) - seed_data.go (591 → 2), grade_service.go (646 → 2) Phase 3 — TypeScript (admin-lehrer): 45 monoliths → 220+ files - sdk/types.ts (2,108 → 16 domain files) - ai/rag/page.tsx (2,686 → 14 files) - 22 page.tsx files split into _components/ + _hooks/ - 11 component files split into sub-components - 10 SDK data catalogs added to loc-exceptions - Deleted dead backup index_original.ts (4,899 LOC) All original public APIs preserved via re-export facades. Zero new errors: Python imports verified, Go builds clean, TypeScript tsc --noEmit shows only pre-existing errors. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-24 17:28:57 +02:00
parent 9ba420fa91
commit b681ddb131
251 changed files with 30016 additions and 25037 deletions
--- a/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/AgentHeader.tsx
+++ b/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/AgentHeader.tsx
@@ -0,0 +1,58 @@
+import Link from 'next/link'
+import { Brain, ArrowLeft, Play, Pause, CheckCircle, XCircle } from 'lucide-react'
+import type { AgentDetail } from './types'
+
+interface AgentHeaderProps {
+  agent: AgentDetail
+}
+
+export function AgentHeader({ agent }: AgentHeaderProps) {
+  return (
+    <div className="flex items-center justify-between mb-6">
+      <div className="flex items-center gap-4">
+        <Link
+          href="/ai/agents"
+          className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+        >
+          <ArrowLeft className="w-5 h-5 text-gray-600" />
+        </Link>
+        <div
+          className="p-3 rounded-xl"
+          style={{ backgroundColor: `${agent.color}20` }}
+        >
+          <Brain className="w-6 h-6" style={{ color: agent.color }} />
+        </div>
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">{agent.name}</h1>
+          <p className="text-gray-500">{agent.description}</p>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <div className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium ${
+          agent.status === 'running' ? 'bg-green-100 text-green-700' :
+          agent.status === 'paused' ? 'bg-yellow-100 text-yellow-700' :
+          'bg-red-100 text-red-700'
+        }`}>
+          {agent.status === 'running' ? <CheckCircle className="w-4 h-4" /> :
+           agent.status === 'paused' ? <Pause className="w-4 h-4" /> :
+           <XCircle className="w-4 h-4" />}
+          {agent.status}
+        </div>
+        <button className="flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
+          {agent.status === 'running' ? (
+            <>
+              <Pause className="w-4 h-4" />
+              Pausieren
+            </>
+          ) : (
+            <>
+              <Play className="w-4 h-4" />
+              Starten
+            </>
+          )}
+        </button>
+      </div>
+    </div>
+  )
+}
--- a/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/AgentStatsBar.tsx
+++ b/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/AgentStatsBar.tsx
@@ -0,0 +1,32 @@
+import type { AgentDetail } from './types'
+
+interface AgentStatsBarProps {
+  agent: AgentDetail
+}
+
+export function AgentStatsBar({ agent }: AgentStatsBarProps) {
+  return (
+    <div className="grid grid-cols-5 gap-4 mb-6">
+      <div className="bg-white border border-gray-200 rounded-lg p-4">
+        <div className="text-sm text-gray-500">Aktive Sessions</div>
+        <div className="text-2xl font-bold text-gray-900">{agent.activeSessions}</div>
+      </div>
+      <div className="bg-white border border-gray-200 rounded-lg p-4">
+        <div className="text-sm text-gray-500">Verarbeitet (24h)</div>
+        <div className="text-2xl font-bold text-gray-900">{agent.totalProcessed.toLocaleString()}</div>
+      </div>
+      <div className="bg-white border border-gray-200 rounded-lg p-4">
+        <div className="text-sm text-gray-500">Avg. Antwortzeit</div>
+        <div className="text-2xl font-bold text-gray-900">{agent.avgResponseTime}ms</div>
+      </div>
+      <div className="bg-white border border-gray-200 rounded-lg p-4">
+        <div className="text-sm text-gray-500">Fehlerrate</div>
+        <div className="text-2xl font-bold text-amber-600">{agent.errorRate}%</div>
+      </div>
+      <div className="bg-white border border-gray-200 rounded-lg p-4">
+        <div className="text-sm text-gray-500">Version</div>
+        <div className="text-2xl font-bold text-gray-900">{agent.version}</div>
+      </div>
+    </div>
+  )
+}
--- a/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/HistoryTabContent.tsx
+++ b/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/HistoryTabContent.tsx
@@ -0,0 +1,32 @@
+import { History } from 'lucide-react'
+import type { ChangeLog } from './types'
+
+interface HistoryTabContentProps {
+  changeLogs: ChangeLog[]
+}
+
+export function HistoryTabContent({ changeLogs }: HistoryTabContentProps) {
+  return (
+    <div>
+      <div className="space-y-4">
+        {changeLogs.map((log) => (
+          <div key={log.id} className="flex items-start gap-4 p-4 bg-gray-50 rounded-lg">
+            <div className="p-2 bg-white rounded-full border border-gray-200">
+              <History className="w-4 h-4 text-gray-500" />
+            </div>
+            <div className="flex-1">
+              <div className="flex items-center justify-between">
+                <span className="font-medium text-gray-900">{log.action}</span>
+                <span className="text-sm text-gray-500">
+                  {new Date(log.timestamp).toLocaleString('de-DE')}
+                </span>
+              </div>
+              <p className="text-sm text-gray-600 mt-1">{log.description}</p>
+              <p className="text-xs text-gray-400 mt-1">von {log.user}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
--- a/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/SoulTabContent.tsx
+++ b/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/SoulTabContent.tsx
@@ -0,0 +1,102 @@
+import { FileText, Clock, RotateCcw, Save, Edit3, AlertTriangle } from 'lucide-react'
+import type { AgentDetail } from './types'
+
+interface SoulTabContentProps {
+  agent: AgentDetail
+  editedContent: string
+  isEditing: boolean
+  hasChanges: boolean
+  saving: boolean
+  onContentChange: (content: string) => void
+  onSave: () => void
+  onReset: () => void
+  onStartEditing: () => void
+}
+
+export function SoulTabContent({
+  agent,
+  editedContent,
+  isEditing,
+  hasChanges,
+  saving,
+  onContentChange,
+  onSave,
+  onReset,
+  onStartEditing,
+}: SoulTabContentProps) {
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2 text-sm text-gray-500">
+          <FileText className="w-4 h-4" />
+          {agent.soulFile}
+          <span className="text-gray-300">|</span>
+          <Clock className="w-4 h-4" />
+          Zuletzt geaendert: {new Date(agent.updatedAt).toLocaleString('de-DE')}
+        </div>
+        <div className="flex items-center gap-2">
+          {isEditing ? (
+            <>
+              <button
+                onClick={onReset}
+                disabled={!hasChanges}
+                className="flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors disabled:opacity-50"
+              >
+                <RotateCcw className="w-4 h-4" />
+                Zuruecksetzen
+              </button>
+              <button
+                onClick={onSave}
+                disabled={!hasChanges || saving}
+                className="flex items-center gap-2 px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors disabled:opacity-50"
+              >
+                <Save className="w-4 h-4" />
+                {saving ? 'Speichert...' : 'Speichern'}
+              </button>
+            </>
+          ) : (
+            <button
+              onClick={onStartEditing}
+              className="flex items-center gap-2 px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors"
+            >
+              <Edit3 className="w-4 h-4" />
+              Bearbeiten
+            </button>
+          )}
+        </div>
+      </div>
+
+      {hasChanges && (
+        <div className="mb-4 p-3 bg-amber-50 border border-amber-200 rounded-lg flex items-center gap-2 text-amber-700">
+          <AlertTriangle className="w-4 h-4" />
+          <span className="text-sm">Ungespeicherte Aenderungen vorhanden</span>
+        </div>
+      )}
+
+      <div className="relative">
+        {isEditing ? (
+          <textarea
+            value={editedContent}
+            onChange={(e) => onContentChange(e.target.value)}
+            className="w-full h-[600px] p-4 font-mono text-sm bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent resize-none"
+            spellCheck={false}
+          />
+        ) : (
+          <div className="w-full h-[600px] p-4 font-mono text-sm bg-gray-50 border border-gray-200 rounded-lg overflow-auto whitespace-pre-wrap">
+            {agent.soulContent}
+          </div>
+        )}
+      </div>
+
+      <div className="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+        <h4 className="font-medium text-blue-900 mb-2">Hinweise zur SOUL-Datei</h4>
+        <ul className="text-sm text-blue-700 space-y-1">
+          <li>Die SOUL-Datei definiert die Persoenlichkeit und das Verhalten des Agents</li>
+          <li>Aenderungen werden nach dem Speichern sofort wirksam</li>
+          <li>Testen Sie Aenderungen zuerst im Staging-Modus</li>
+          <li>Alle Aenderungen werden in der Historie protokolliert</li>
+        </ul>
+      </div>
+    </div>
+  )
+}
--- a/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/StatsTabContent.tsx
+++ b/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/StatsTabContent.tsx
@@ -0,0 +1,16 @@
+import Link from 'next/link'
+import { Activity } from 'lucide-react'
+
+export function StatsTabContent() {
+  return (
+    <div className="space-y-6">
+      <div className="text-center py-12 text-gray-500">
+        <Activity className="w-12 h-12 mx-auto mb-4 text-gray-400" />
+        <p>Live-Statistiken werden in einer zukuenftigen Version verfuegbar sein.</p>
+        <p className="text-sm mt-2">
+          Besuchen Sie die <Link href="/ai/agents/statistics" className="text-teal-600 hover:underline">Statistik-Seite</Link> fuer aggregierte Daten.
+        </p>
+      </div>
+    </div>
+  )
+}
--- a/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/index.ts
+++ b/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/index.ts
@@ -0,0 +1,6 @@
+export { AgentHeader } from './AgentHeader'
+export { AgentStatsBar } from './AgentStatsBar'
+export { SoulTabContent } from './SoulTabContent'
+export { StatsTabContent } from './StatsTabContent'
+export { HistoryTabContent } from './HistoryTabContent'
+export type { AgentDetail, ChangeLog } from './types'
--- a/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/mock-data.ts
+++ b/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/mock-data.ts
@@ -0,0 +1,308 @@
+import type { AgentDetail, ChangeLog } from './types'
+
+export const mockAgentDetails: Record<string, AgentDetail> = {
+  'tutor-agent': {
+    id: 'tutor-agent',
+    name: 'TutorAgent',
+    description: 'Geduldiger, ermutigender Lernbegleiter fuer Schueler',
+    soulFile: 'tutor-agent.soul.md',
+    soulContent: `# TutorAgent SOUL
+
+## Identitaet
+Du bist ein geduldiger, ermutigender Lernbegleiter fuer Schueler.
+Dein Ziel ist es, Verstaendnis zu foerdern, nicht Antworten vorzugeben.
+
+## Kernprinzipien
+- **Sokratische Methode**: Stelle Fragen, die zum Nachdenken anregen
+- **Positives Reinforcement**: Erkenne und feiere Lernfortschritte
+- **Adaptive Kommunikation**: Passe Sprache und Komplexitaet an das Niveau an
+- **Geduld**: Wiederhole Erklaerungen ohne Frustration zu zeigen
+
+## Kommunikationsstil
+- Verwende einfache, klare Sprache
+- Stelle Rueckfragen, um Verstaendnis zu pruefen
+- Gib Hinweise statt direkter Loesungen
+- Feiere kleine Erfolge
+- Nutze Analogien und Beispiele aus dem Alltag
+- Strukturiere komplexe Themen in verdauliche Schritte
+
+## Fachgebiete
+- Mathematik (Grundschule bis Abitur)
+- Naturwissenschaften (Physik, Chemie, Biologie)
+- Sprachen (Deutsch, Englisch)
+- Gesellschaftswissenschaften (Geschichte, Politik)
+
+## Lernstrategien
+1. **Konzeptbasiertes Lernen**: Erklaere das "Warum" hinter Regeln
+2. **Visualisierung**: Nutze Diagramme und Skizzen wenn moeglich
+3. **Verbindungen herstellen**: Verknuepfe neues Wissen mit Bekanntem
+4. **Wiederholung**: Baue systematische Wiederholung ein
+5. **Selbsttest**: Ermutige zur Selbstueberpruefung
+
+## Einschraenkungen
+- Gib NIEMALS vollstaendige Loesungen fuer Hausaufgaben
+- Verweise bei komplexen Themen auf Lehrkraefte
+- Erkenne Frustration und biete Pausen an
+- Keine Unterstuetzung bei Pruefungsbetrug
+- Keine medizinischen oder rechtlichen Ratschlaege
+
+## Eskalation
+- Bei wiederholtem Unverstaendnis: Schlage alternatives Erklaerformat vor
+- Bei emotionaler Belastung: Empfehle Gespraech mit Vertrauensperson
+- Bei technischen Problemen: Eskaliere an Support
+- Bei Verdacht auf Lernschwierigkeiten: Empfehle professionelle Diagnostik
+
+## Metrik-Ziele
+- Verstaendnis-Score > 80% bei Nachfragen
+- Engagement-Zeit > 5 Minuten pro Session
+- Wiederbesuchs-Rate > 60%
+- Frustrations-Indikatoren < 10%`,
+    color: '#3b82f6',
+    status: 'running',
+    activeSessions: 12,
+    totalProcessed: 1847,
+    avgResponseTime: 234,
+    errorRate: 0.5,
+    lastRestart: '2025-01-14T08:30:00Z',
+    version: '1.2.0',
+    createdAt: '2024-11-01T00:00:00Z',
+    updatedAt: '2025-01-14T10:15:00Z'
+  },
+  'grader-agent': {
+    id: 'grader-agent',
+    name: 'GraderAgent',
+    description: 'Objektiver, fairer Pruefer von Schuelerarbeiten',
+    soulFile: 'grader-agent.soul.md',
+    soulContent: `# GraderAgent SOUL
+
+## Identitaet
+Du bist ein objektiver, fairer Pruefer von Schuelerarbeiten.
+Dein Ziel ist konstruktives Feedback, das zum Lernen motiviert.
+
+## Kernprinzipien
+- **Objektivitaet**: Bewerte nach festgelegten Kriterien, nicht nach Sympathie
+- **Fairness**: Gleiche Massstaebe fuer alle Schueler
+- **Konstruktivitaet**: Feedback soll zum Lernen anregen
+- **Transparenz**: Begruende jede Bewertung nachvollziehbar
+
+## Bewertungsprinzipien
+- Bewerte nach festgelegten Kriterien (Erwartungshorizont)
+- Beruecksichtige Teilleistungen
+- Unterscheide zwischen Fluechtigkeitsfehlern und Verstaendnisluecken
+- Formuliere Feedback lernfoerdernd
+- Nutze das 15-Punkte-System korrekt (0-15 Punkte, 5 = ausreichend)
+
+## Workflow
+1. Lies die Aufgabenstellung und den Erwartungshorizont
+2. Analysiere die Schuelerantwort systematisch
+3. Identifiziere korrekte Elemente
+4. Identifiziere Fehler mit Kategorisierung
+5. Vergebe Punkte nach Kriterienkatalog
+6. Formuliere konstruktives Feedback
+
+## Fehlerkategorien
+- **Rechtschreibung (R)**: Orthografische Fehler
+- **Grammatik (Gr)**: Grammatikalische Fehler
+- **Ausdruck (A)**: Stilistische Schwaechen
+- **Inhalt (I)**: Fachliche Fehler oder Luecken
+- **Struktur (St)**: Aufbau- und Gliederungsprobleme
+- **Logik (L)**: Argumentationsfehler
+
+## Qualitaetssicherung
+- Bei Unsicherheit: Markiere zur manuellen Ueberpruefung
+- Bei Grenzfaellen: Dokumentiere Entscheidungsgrundlage
+- Konsistenz: Vergleiche mit aehnlichen Bewertungen
+- Kalibrierung: Orientiere an Vergleichsarbeiten
+
+## Eskalation
+- Unleserliche Antworten: Markiere fuer manuelles Review
+- Verdacht auf Plagiat: Eskaliere an Lehrkraft
+- Technische Fehler: Pausiere und melde
+- Unklare Aufgabenstellung: Frage nach Klarstellung`,
+    color: '#10b981',
+    status: 'running',
+    activeSessions: 3,
+    totalProcessed: 456,
+    avgResponseTime: 1205,
+    errorRate: 1.2,
+    lastRestart: '2025-01-13T14:00:00Z',
+    version: '1.1.0',
+    createdAt: '2024-11-01T00:00:00Z',
+    updatedAt: '2025-01-13T16:30:00Z'
+  },
+  'quality-judge': {
+    id: 'quality-judge',
+    name: 'QualityJudge',
+    description: 'Kritischer Qualitaetspruefer fuer KI-generierte Inhalte',
+    soulFile: 'quality-judge.soul.md',
+    soulContent: `# QualityJudge SOUL
+
+## Identitaet
+Du bist ein kritischer Qualitaetspruefer fuer KI-generierte Inhalte.
+Dein Ziel ist die Sicherstellung hoher Qualitaetsstandards.
+
+## Bewertungsdimensionen
+
+### 1. Intent Accuracy (0-100)
+- Wurde die Benutzerabsicht korrekt erkannt?
+- Stimmt die Kategorie der Antwort?
+
+### 2. Faithfulness (1-5)
+- **5**: Vollstaendig faktisch korrekt
+- **4**: Minor Ungenauigkeiten ohne Auswirkung
+- **3**: Einige Ungenauigkeiten, Kernaussage korrekt
+- **2**: Signifikante Fehler
+- **1**: Grundlegend falsch
+
+### 3. Relevance (1-5)
+- **5**: Direkt und vollstaendig relevant
+- **4**: Weitgehend relevant
+- **3**: Teilweise relevant
+- **2**: Geringe Relevanz
+- **1**: Voellig irrelevant
+
+### 4. Coherence (1-5)
+- **5**: Perfekt strukturiert und logisch
+- **4**: Gut strukturiert, kleine Luecken
+- **3**: Verstaendlich, aber verbesserungsfaehig
+- **2**: Schwer zu folgen
+- **1**: Unverstaendlich/chaotisch
+
+### 5. Safety ("pass"/"fail")
+- Keine DSGVO-Verstoesse (keine PII)
+- Keine schaedlichen Inhalte
+- Keine Desinformation
+- Keine Diskriminierung
+- Altersgerechte Sprache
+
+## Schwellenwerte
+- **Production Ready**: composite >= 80
+- **Needs Review**: 60 <= composite < 80
+- **Failed**: composite < 60`,
+    color: '#f59e0b',
+    status: 'running',
+    activeSessions: 8,
+    totalProcessed: 3291,
+    avgResponseTime: 89,
+    errorRate: 0.3,
+    lastRestart: '2025-01-14T06:00:00Z',
+    version: '2.0.0',
+    createdAt: '2024-10-15T00:00:00Z',
+    updatedAt: '2025-01-14T08:00:00Z'
+  },
+  'alert-agent': {
+    id: 'alert-agent',
+    name: 'AlertAgent',
+    description: 'Aufmerksamer Waechter fuer das Breakpilot-System',
+    soulFile: 'alert-agent.soul.md',
+    soulContent: `# AlertAgent SOUL
+
+## Identitaet
+Du bist ein aufmerksamer Waechter fuer das Breakpilot-System.
+Dein Ziel ist die rechtzeitige Erkennung und Kommunikation relevanter Ereignisse.
+
+## Importance Levels
+
+### KRITISCH (5)
+- Systemausfaelle
+- Sicherheitsvorfaelle
+- DSGVO-Verstoesse
+**Aktion**: Sofortige Benachrichtigung aller Admins
+
+### DRINGEND (4)
+- Performance-Probleme
+- API-Ausfaelle
+- Hohe Fehlerraten
+**Aktion**: Benachrichtigung innerhalb 5 Minuten
+
+### WICHTIG (3)
+- Neue kritische Nachrichten
+- Relevante Bildungspolitik
+- Technische Warnungen
+**Aktion**: Taeglicher Digest
+
+### PRUEFEN (2)
+- Interessante Entwicklungen
+- Konkurrenznachrichten
+**Aktion**: Woechentlicher Digest
+
+### INFO (1)
+- Allgemeine Updates
+**Aktion**: Archivieren`,
+    color: '#ef4444',
+    status: 'running',
+    activeSessions: 1,
+    totalProcessed: 892,
+    avgResponseTime: 45,
+    errorRate: 0.1,
+    lastRestart: '2025-01-12T00:00:00Z',
+    version: '1.0.0',
+    createdAt: '2024-12-01T00:00:00Z',
+    updatedAt: '2025-01-12T02:00:00Z'
+  },
+  'orchestrator': {
+    id: 'orchestrator',
+    name: 'Orchestrator',
+    description: 'Zentraler Koordinator des Multi-Agent-Systems',
+    soulFile: 'orchestrator.soul.md',
+    soulContent: `# OrchestratorAgent SOUL
+
+## Identitaet
+Du bist der zentrale Koordinator des Breakpilot Multi-Agent-Systems.
+Dein Ziel ist die effiziente Verteilung und Ueberwachung von Aufgaben.
+
+## Kernprinzipien
+- **Effizienz**: Minimale Latenz bei maximaler Qualitaet
+- **Resilienz**: Graceful Degradation bei Agent-Ausfaellen
+- **Fairness**: Ausgewogene Lastverteilung
+- **Transparenz**: Volle Nachvollziehbarkeit aller Entscheidungen
+
+## Verantwortlichkeiten
+1. Task-Routing zu spezialisierten Agents
+2. Session-Management und Recovery
+3. Agent-Gesundheitsueberwachung
+4. Lastverteilung
+5. Fehlerbehandlung und Retry-Logik
+
+## Task-Routing-Logik
+
+| Intent-Kategorie | Primaerer Agent | Fallback |
+|------------------|-----------------|----------|
+| learning_support | TutorAgent | Manuell |
+| exam_grading | GraderAgent | QualityJudge |
+| quality_check | QualityJudge | Manual Review |
+| system_alert | AlertAgent | E-Mail Fallback |
+
+## Fehlerbehandlung
+
+### Retry-Policy
+- **Max Retries**: 3
+- **Backoff**: Exponential (1s, 2s, 4s)
+- **Keine Retries**: Validation Errors, Auth Failures
+
+### Circuit Breaker
+- **Threshold**: 5 Fehler in 60 Sekunden
+- **Cooldown**: 30 Sekunden
+
+## Metriken
+- **Task Completion Rate**: > 99%
+- **Average Latency**: < 2s
+- **Error Rate**: < 1%`,
+    color: '#8b5cf6',
+    status: 'running',
+    activeSessions: 24,
+    totalProcessed: 8934,
+    avgResponseTime: 12,
+    errorRate: 0.2,
+    lastRestart: '2025-01-14T00:00:00Z',
+    version: '1.5.0',
+    createdAt: '2024-10-01T00:00:00Z',
+    updatedAt: '2025-01-14T00:30:00Z'
+  }
+}
+
+export const mockChangeLogs: ChangeLog[] = [
+  { id: '1', timestamp: '2025-01-14T10:15:00Z', user: 'admin@breakpilot.de', action: 'SOUL Updated', description: 'Kommunikationsstil angepasst' },
+  { id: '2', timestamp: '2025-01-13T14:30:00Z', user: 'lehrer1@schule.de', action: 'Einschraenkung hinzugefuegt', description: 'Keine Hausaufgaben-Loesungen' },
+  { id: '3', timestamp: '2025-01-10T09:00:00Z', user: 'admin@breakpilot.de', action: 'Version 1.2.0', description: 'Neue Fachgebiete hinzugefuegt' },
+]
--- a/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/types.ts
+++ b/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/types.ts
@@ -0,0 +1,25 @@
+export interface AgentDetail {
+  id: string
+  name: string
+  description: string
+  soulFile: string
+  soulContent: string
+  color: string
+  status: 'running' | 'paused' | 'stopped' | 'error'
+  activeSessions: number
+  totalProcessed: number
+  avgResponseTime: number
+  errorRate: number
+  lastRestart: string
+  version: string
+  createdAt: string
+  updatedAt: string
+}
+
+export interface ChangeLog {
+  id: string
+  timestamp: string
+  user: string
+  action: string
+  description: string
+}
--- a/admin-lehrer/app/(admin)/ai/agents/[agentId]/page.tsx
+++ b/admin-lehrer/app/(admin)/ai/agents/[agentId]/page.tsx
@@ -1,348 +1,29 @@
 'use client'

 import { useState, useEffect } from 'react'
-import { useParams, useRouter } from 'next/navigation'
+import { useParams } from 'next/navigation'
 import Link from 'next/link'
-import { Bot, Brain, ArrowLeft, Save, RotateCcw, Play, Pause, AlertTriangle, FileText, Settings, Activity, Clock, CheckCircle, XCircle, History, Eye, Edit3 } from 'lucide-react'
+import { AlertTriangle, FileText, Activity, History } from 'lucide-react'
+import { mockAgentDetails, mockChangeLogs } from './_components/mock-data'
+import {
+  AgentHeader,
+  AgentStatsBar,
+  SoulTabContent,
+  StatsTabContent,
+  HistoryTabContent,
+} from './_components'
+import type { AgentDetail } from './_components'

-// Types
-interface AgentDetail {
-  id: string
-  name: string
-  description: string
-  soulFile: string
-  soulContent: string
-  color: string
-  status: 'running' | 'paused' | 'stopped' | 'error'
-  activeSessions: number
-  totalProcessed: number
-  avgResponseTime: number
-  errorRate: number
-  lastRestart: string
-  version: string
-  createdAt: string
-  updatedAt: string
-}
+type TabId = 'soul' | 'stats' | 'history'

-interface ChangeLog {
-  id: string
-  timestamp: string
-  user: string
-  action: string
-  description: string
-}
-
-// Mock data
-const mockAgentDetails: Record<string, AgentDetail> = {
-  'tutor-agent': {
-    id: 'tutor-agent',
-    name: 'TutorAgent',
-    description: 'Geduldiger, ermutigender Lernbegleiter fuer Schueler',
-    soulFile: 'tutor-agent.soul.md',
-    soulContent: `# TutorAgent SOUL
-
-## Identitaet
-Du bist ein geduldiger, ermutigender Lernbegleiter fuer Schueler.
-Dein Ziel ist es, Verstaendnis zu foerdern, nicht Antworten vorzugeben.
-
-## Kernprinzipien
- **Sokratische Methode**: Stelle Fragen, die zum Nachdenken anregen
- **Positives Reinforcement**: Erkenne und feiere Lernfortschritte
- **Adaptive Kommunikation**: Passe Sprache und Komplexitaet an das Niveau an
- **Geduld**: Wiederhole Erklaerungen ohne Frustration zu zeigen
-
-## Kommunikationsstil
- Verwende einfache, klare Sprache
- Stelle Rueckfragen, um Verstaendnis zu pruefen
- Gib Hinweise statt direkter Loesungen
- Feiere kleine Erfolge
- Nutze Analogien und Beispiele aus dem Alltag
- Strukturiere komplexe Themen in verdauliche Schritte
-
-## Fachgebiete
- Mathematik (Grundschule bis Abitur)
- Naturwissenschaften (Physik, Chemie, Biologie)
- Sprachen (Deutsch, Englisch)
- Gesellschaftswissenschaften (Geschichte, Politik)
-
-## Lernstrategien
-1. **Konzeptbasiertes Lernen**: Erklaere das "Warum" hinter Regeln
-2. **Visualisierung**: Nutze Diagramme und Skizzen wenn moeglich
-3. **Verbindungen herstellen**: Verknuepfe neues Wissen mit Bekanntem
-4. **Wiederholung**: Baue systematische Wiederholung ein
-5. **Selbsttest**: Ermutige zur Selbstueberpruefung
-
-## Einschraenkungen
- Gib NIEMALS vollstaendige Loesungen fuer Hausaufgaben
- Verweise bei komplexen Themen auf Lehrkraefte
- Erkenne Frustration und biete Pausen an
- Keine Unterstuetzung bei Pruefungsbetrug
- Keine medizinischen oder rechtlichen Ratschlaege
-
-## Eskalation
- Bei wiederholtem Unverstaendnis: Schlage alternatives Erklaerformat vor
- Bei emotionaler Belastung: Empfehle Gespraech mit Vertrauensperson
- Bei technischen Problemen: Eskaliere an Support
- Bei Verdacht auf Lernschwierigkeiten: Empfehle professionelle Diagnostik
-
-## Metrik-Ziele
- Verstaendnis-Score > 80% bei Nachfragen
- Engagement-Zeit > 5 Minuten pro Session
- Wiederbesuchs-Rate > 60%
- Frustrations-Indikatoren < 10%`,
-    color: '#3b82f6',
-    status: 'running',
-    activeSessions: 12,
-    totalProcessed: 1847,
-    avgResponseTime: 234,
-    errorRate: 0.5,
-    lastRestart: '2025-01-14T08:30:00Z',
-    version: '1.2.0',
-    createdAt: '2024-11-01T00:00:00Z',
-    updatedAt: '2025-01-14T10:15:00Z'
-  },
-  'grader-agent': {
-    id: 'grader-agent',
-    name: 'GraderAgent',
-    description: 'Objektiver, fairer Pruefer von Schuelerarbeiten',
-    soulFile: 'grader-agent.soul.md',
-    soulContent: `# GraderAgent SOUL
-
-## Identitaet
-Du bist ein objektiver, fairer Pruefer von Schuelerarbeiten.
-Dein Ziel ist konstruktives Feedback, das zum Lernen motiviert.
-
-## Kernprinzipien
- **Objektivitaet**: Bewerte nach festgelegten Kriterien, nicht nach Sympathie
- **Fairness**: Gleiche Massstaebe fuer alle Schueler
- **Konstruktivitaet**: Feedback soll zum Lernen anregen
- **Transparenz**: Begruende jede Bewertung nachvollziehbar
-
-## Bewertungsprinzipien
- Bewerte nach festgelegten Kriterien (Erwartungshorizont)
- Beruecksichtige Teilleistungen
- Unterscheide zwischen Fluechtigkeitsfehlern und Verstaendnisluecken
- Formuliere Feedback lernfoerdernd
- Nutze das 15-Punkte-System korrekt (0-15 Punkte, 5 = ausreichend)
-
-## Workflow
-1. Lies die Aufgabenstellung und den Erwartungshorizont
-2. Analysiere die Schuelerantwort systematisch
-3. Identifiziere korrekte Elemente
-4. Identifiziere Fehler mit Kategorisierung
-5. Vergebe Punkte nach Kriterienkatalog
-6. Formuliere konstruktives Feedback
-
-## Fehlerkategorien
- **Rechtschreibung (R)**: Orthografische Fehler
- **Grammatik (Gr)**: Grammatikalische Fehler
- **Ausdruck (A)**: Stilistische Schwaechen
- **Inhalt (I)**: Fachliche Fehler oder Luecken
- **Struktur (St)**: Aufbau- und Gliederungsprobleme
- **Logik (L)**: Argumentationsfehler
-
-## Qualitaetssicherung
- Bei Unsicherheit: Markiere zur manuellen Ueberpruefung
- Bei Grenzfaellen: Dokumentiere Entscheidungsgrundlage
- Konsistenz: Vergleiche mit aehnlichen Bewertungen
- Kalibrierung: Orientiere an Vergleichsarbeiten
-
-## Eskalation
- Unleserliche Antworten: Markiere fuer manuelles Review
- Verdacht auf Plagiat: Eskaliere an Lehrkraft
- Technische Fehler: Pausiere und melde
- Unklare Aufgabenstellung: Frage nach Klarstellung`,
-    color: '#10b981',
-    status: 'running',
-    activeSessions: 3,
-    totalProcessed: 456,
-    avgResponseTime: 1205,
-    errorRate: 1.2,
-    lastRestart: '2025-01-13T14:00:00Z',
-    version: '1.1.0',
-    createdAt: '2024-11-01T00:00:00Z',
-    updatedAt: '2025-01-13T16:30:00Z'
-  },
-  'quality-judge': {
-    id: 'quality-judge',
-    name: 'QualityJudge',
-    description: 'Kritischer Qualitaetspruefer fuer KI-generierte Inhalte',
-    soulFile: 'quality-judge.soul.md',
-    soulContent: `# QualityJudge SOUL
-
-## Identitaet
-Du bist ein kritischer Qualitaetspruefer fuer KI-generierte Inhalte.
-Dein Ziel ist die Sicherstellung hoher Qualitaetsstandards.
-
-## Bewertungsdimensionen
-
-### 1. Intent Accuracy (0-100)
- Wurde die Benutzerabsicht korrekt erkannt?
- Stimmt die Kategorie der Antwort?
-
-### 2. Faithfulness (1-5)
- **5**: Vollstaendig faktisch korrekt
- **4**: Minor Ungenauigkeiten ohne Auswirkung
- **3**: Einige Ungenauigkeiten, Kernaussage korrekt
- **2**: Signifikante Fehler
- **1**: Grundlegend falsch
-
-### 3. Relevance (1-5)
- **5**: Direkt und vollstaendig relevant
- **4**: Weitgehend relevant
- **3**: Teilweise relevant
- **2**: Geringe Relevanz
- **1**: Voellig irrelevant
-
-### 4. Coherence (1-5)
- **5**: Perfekt strukturiert und logisch
- **4**: Gut strukturiert, kleine Luecken
- **3**: Verstaendlich, aber verbesserungsfaehig
- **2**: Schwer zu folgen
- **1**: Unverstaendlich/chaotisch
-
-### 5. Safety ("pass"/"fail")
- Keine DSGVO-Verstoesse (keine PII)
- Keine schaedlichen Inhalte
- Keine Desinformation
- Keine Diskriminierung
- Altersgerechte Sprache
-
-## Schwellenwerte
- **Production Ready**: composite >= 80
- **Needs Review**: 60 <= composite < 80
- **Failed**: composite < 60`,
-    color: '#f59e0b',
-    status: 'running',
-    activeSessions: 8,
-    totalProcessed: 3291,
-    avgResponseTime: 89,
-    errorRate: 0.3,
-    lastRestart: '2025-01-14T06:00:00Z',
-    version: '2.0.0',
-    createdAt: '2024-10-15T00:00:00Z',
-    updatedAt: '2025-01-14T08:00:00Z'
-  },
-  'alert-agent': {
-    id: 'alert-agent',
-    name: 'AlertAgent',
-    description: 'Aufmerksamer Waechter fuer das Breakpilot-System',
-    soulFile: 'alert-agent.soul.md',
-    soulContent: `# AlertAgent SOUL
-
-## Identitaet
-Du bist ein aufmerksamer Waechter fuer das Breakpilot-System.
-Dein Ziel ist die rechtzeitige Erkennung und Kommunikation relevanter Ereignisse.
-
-## Importance Levels
-
-### KRITISCH (5)
- Systemausfaelle
- Sicherheitsvorfaelle
- DSGVO-Verstoesse
-**Aktion**: Sofortige Benachrichtigung aller Admins
-
-### DRINGEND (4)
- Performance-Probleme
- API-Ausfaelle
- Hohe Fehlerraten
-**Aktion**: Benachrichtigung innerhalb 5 Minuten
-
-### WICHTIG (3)
- Neue kritische Nachrichten
- Relevante Bildungspolitik
- Technische Warnungen
-**Aktion**: Taeglicher Digest
-
-### PRUEFEN (2)
- Interessante Entwicklungen
- Konkurrenznachrichten
-**Aktion**: Woechentlicher Digest
-
-### INFO (1)
- Allgemeine Updates
-**Aktion**: Archivieren`,
-    color: '#ef4444',
-    status: 'running',
-    activeSessions: 1,
-    totalProcessed: 892,
-    avgResponseTime: 45,
-    errorRate: 0.1,
-    lastRestart: '2025-01-12T00:00:00Z',
-    version: '1.0.0',
-    createdAt: '2024-12-01T00:00:00Z',
-    updatedAt: '2025-01-12T02:00:00Z'
-  },
-  'orchestrator': {
-    id: 'orchestrator',
-    name: 'Orchestrator',
-    description: 'Zentraler Koordinator des Multi-Agent-Systems',
-    soulFile: 'orchestrator.soul.md',
-    soulContent: `# OrchestratorAgent SOUL
-
-## Identitaet
-Du bist der zentrale Koordinator des Breakpilot Multi-Agent-Systems.
-Dein Ziel ist die effiziente Verteilung und Ueberwachung von Aufgaben.
-
-## Kernprinzipien
- **Effizienz**: Minimale Latenz bei maximaler Qualitaet
- **Resilienz**: Graceful Degradation bei Agent-Ausfaellen
- **Fairness**: Ausgewogene Lastverteilung
- **Transparenz**: Volle Nachvollziehbarkeit aller Entscheidungen
-
-## Verantwortlichkeiten
-1. Task-Routing zu spezialisierten Agents
-2. Session-Management und Recovery
-3. Agent-Gesundheitsueberwachung
-4. Lastverteilung
-5. Fehlerbehandlung und Retry-Logik
-
-## Task-Routing-Logik
-
-| Intent-Kategorie | Primaerer Agent | Fallback |
-|------------------|-----------------|----------|
-| learning_support | TutorAgent | Manuell |
-| exam_grading | GraderAgent | QualityJudge |
-| quality_check | QualityJudge | Manual Review |
-| system_alert | AlertAgent | E-Mail Fallback |
-
-## Fehlerbehandlung
-
-### Retry-Policy
- **Max Retries**: 3
- **Backoff**: Exponential (1s, 2s, 4s)
- **Keine Retries**: Validation Errors, Auth Failures
-
-### Circuit Breaker
- **Threshold**: 5 Fehler in 60 Sekunden
- **Cooldown**: 30 Sekunden
-
-## Metriken
- **Task Completion Rate**: > 99%
- **Average Latency**: < 2s
- **Error Rate**: < 1%`,
-    color: '#8b5cf6',
-    status: 'running',
-    activeSessions: 24,
-    totalProcessed: 8934,
-    avgResponseTime: 12,
-    errorRate: 0.2,
-    lastRestart: '2025-01-14T00:00:00Z',
-    version: '1.5.0',
-    createdAt: '2024-10-01T00:00:00Z',
-    updatedAt: '2025-01-14T00:30:00Z'
-  }
-}
-
-const mockChangeLogs: ChangeLog[] = [
-  { id: '1', timestamp: '2025-01-14T10:15:00Z', user: 'admin@breakpilot.de', action: 'SOUL Updated', description: 'Kommunikationsstil angepasst' },
-  { id: '2', timestamp: '2025-01-13T14:30:00Z', user: 'lehrer1@schule.de', action: 'Einschraenkung hinzugefuegt', description: 'Keine Hausaufgaben-Loesungen' },
-  { id: '3', timestamp: '2025-01-10T09:00:00Z', user: 'admin@breakpilot.de', action: 'Version 1.2.0', description: 'Neue Fachgebiete hinzugefuegt' },
+const TABS: { id: TabId; label: string; icon: typeof FileText }[] = [
+  { id: 'soul', label: 'SOUL-File', icon: FileText },
+  { id: 'stats', label: 'Live-Statistiken', icon: Activity },
+  { id: 'history', label: 'Aenderungshistorie', icon: History },
 ]

 export default function AgentDetailPage() {
  const params = useParams()
-  const router = useRouter()
  const agentId = params.agentId as string

  const [agent, setAgent] = useState<AgentDetail | null>(null)
@@ -350,10 +31,9 @@ export default function AgentDetailPage() {
  const [isEditing, setIsEditing] = useState(false)
  const [hasChanges, setHasChanges] = useState(false)
  const [saving, setSaving] = useState(false)
-  const [activeTab, setActiveTab] = useState<'soul' | 'stats' | 'history'>('soul')
+  const [activeTab, setActiveTab] = useState<TabId>('soul')

  useEffect(() => {
-    // Load agent data
    const agentData = mockAgentDetails[agentId]
    if (agentData) {
      setAgent(agentData)
@@ -363,10 +43,7 @@ export default function AgentDetailPage() {

  const handleSave = async () => {
    setSaving(true)
-    // In production, save to API
-    // await fetch(`/api/admin/agents/${agentId}/soul`, { method: 'PUT', body: editedContent })
    await new Promise(resolve => setTimeout(resolve, 1000))
-
    if (agent) {
      setAgent({ ...agent, soulContent: editedContent, updatedAt: new Date().toISOString() })
    }
@@ -393,7 +70,7 @@ export default function AgentDetailPage() {
        <div className="text-center py-12">
          <AlertTriangle className="w-12 h-12 text-amber-500 mx-auto mb-4" />
          <h2 className="text-xl font-semibold text-gray-900 mb-2">Agent nicht gefunden</h2>
-          <p className="text-gray-500 mb-4">Der Agent "{agentId}" existiert nicht.</p>
+          <p className="text-gray-500 mb-4">Der Agent &quot;{agentId}&quot; existiert nicht.</p>
          <Link href="/ai/agents" className="text-teal-600 hover:text-teal-700">
            &larr; Zurueck zur Uebersicht
          </Link>
@@ -404,231 +81,46 @@ export default function AgentDetailPage() {

  return (
    <div className="p-6 max-w-7xl mx-auto">
-      {/* Header */}
-      <div className="flex items-center justify-between mb-6">
-        <div className="flex items-center gap-4">
-          <Link
-            href="/ai/agents"
-            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
-          >
-            <ArrowLeft className="w-5 h-5 text-gray-600" />
-          </Link>
-          <div
-            className="p-3 rounded-xl"
-            style={{ backgroundColor: `${agent.color}20` }}
-          >
-            <Brain className="w-6 h-6" style={{ color: agent.color }} />
-          </div>
-          <div>
-            <h1 className="text-2xl font-bold text-gray-900">{agent.name}</h1>
-            <p className="text-gray-500">{agent.description}</p>
-          </div>
-        </div>
-
-        <div className="flex items-center gap-3">
-          <div className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium ${
-            agent.status === 'running' ? 'bg-green-100 text-green-700' :
-            agent.status === 'paused' ? 'bg-yellow-100 text-yellow-700' :
-            'bg-red-100 text-red-700'
-          }`}>
-            {agent.status === 'running' ? <CheckCircle className="w-4 h-4" /> :
-             agent.status === 'paused' ? <Pause className="w-4 h-4" /> :
-             <XCircle className="w-4 h-4" />}
-            {agent.status}
-          </div>
-          <button className="flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
-            {agent.status === 'running' ? (
-              <>
-                <Pause className="w-4 h-4" />
-                Pausieren
-              </>
-            ) : (
-              <>
-                <Play className="w-4 h-4" />
-                Starten
-              </>
-            )}
-          </button>
-        </div>
-      </div>
-
-      {/* Stats Bar */}
-      <div className="grid grid-cols-5 gap-4 mb-6">
-        <div className="bg-white border border-gray-200 rounded-lg p-4">
-          <div className="text-sm text-gray-500">Aktive Sessions</div>
-          <div className="text-2xl font-bold text-gray-900">{agent.activeSessions}</div>
-        </div>
-        <div className="bg-white border border-gray-200 rounded-lg p-4">
-          <div className="text-sm text-gray-500">Verarbeitet (24h)</div>
-          <div className="text-2xl font-bold text-gray-900">{agent.totalProcessed.toLocaleString()}</div>
-        </div>
-        <div className="bg-white border border-gray-200 rounded-lg p-4">
-          <div className="text-sm text-gray-500">Avg. Antwortzeit</div>
-          <div className="text-2xl font-bold text-gray-900">{agent.avgResponseTime}ms</div>
-        </div>
-        <div className="bg-white border border-gray-200 rounded-lg p-4">
-          <div className="text-sm text-gray-500">Fehlerrate</div>
-          <div className="text-2xl font-bold text-amber-600">{agent.errorRate}%</div>
-        </div>
-        <div className="bg-white border border-gray-200 rounded-lg p-4">
-          <div className="text-sm text-gray-500">Version</div>
-          <div className="text-2xl font-bold text-gray-900">{agent.version}</div>
-        </div>
-      </div>
+      <AgentHeader agent={agent} />
+      <AgentStatsBar agent={agent} />

      {/* Tabs */}
      <div className="bg-white border border-gray-200 rounded-xl overflow-hidden">
        <div className="border-b border-gray-200">
          <div className="flex">
-            <button
-              onClick={() => setActiveTab('soul')}
-              className={`flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 transition-colors ${
-                activeTab === 'soul'
-                  ? 'border-teal-500 text-teal-600'
-                  : 'border-transparent text-gray-500 hover:text-gray-700'
-              }`}
-            >
-              <FileText className="w-4 h-4" />
-              SOUL-File
-            </button>
-            <button
-              onClick={() => setActiveTab('stats')}
-              className={`flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 transition-colors ${
-                activeTab === 'stats'
-                  ? 'border-teal-500 text-teal-600'
-                  : 'border-transparent text-gray-500 hover:text-gray-700'
-              }`}
-            >
-              <Activity className="w-4 h-4" />
-              Live-Statistiken
-            </button>
-            <button
-              onClick={() => setActiveTab('history')}
-              className={`flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 transition-colors ${
-                activeTab === 'history'
-                  ? 'border-teal-500 text-teal-600'
-                  : 'border-transparent text-gray-500 hover:text-gray-700'
-              }`}
-            >
-              <History className="w-4 h-4" />
-              Aenderungshistorie
-            </button>
+            {TABS.map(({ id, label, icon: Icon }) => (
+              <button
+                key={id}
+                onClick={() => setActiveTab(id)}
+                className={`flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 transition-colors ${
+                  activeTab === id
+                    ? 'border-teal-500 text-teal-600'
+                    : 'border-transparent text-gray-500 hover:text-gray-700'
+                }`}
+              >
+                <Icon className="w-4 h-4" />
+                {label}
+              </button>
+            ))}
          </div>
        </div>

-        {/* Tab Content */}
        <div className="p-6">
          {activeTab === 'soul' && (
-            <div>
-              <div className="flex items-center justify-between mb-4">
-                <div className="flex items-center gap-2 text-sm text-gray-500">
-                  <FileText className="w-4 h-4" />
-                  {agent.soulFile}
-                  <span className="text-gray-300">|</span>
-                  <Clock className="w-4 h-4" />
-                  Zuletzt geaendert: {new Date(agent.updatedAt).toLocaleString('de-DE')}
-                </div>
-                <div className="flex items-center gap-2">
-                  {isEditing ? (
-                    <>
-                      <button
-                        onClick={handleReset}
-                        disabled={!hasChanges}
-                        className="flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors disabled:opacity-50"
-                      >
-                        <RotateCcw className="w-4 h-4" />
-                        Zuruecksetzen
-                      </button>
-                      <button
-                        onClick={handleSave}
-                        disabled={!hasChanges || saving}
-                        className="flex items-center gap-2 px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors disabled:opacity-50"
-                      >
-                        <Save className="w-4 h-4" />
-                        {saving ? 'Speichert...' : 'Speichern'}
-                      </button>
-                    </>
-                  ) : (
-                    <button
-                      onClick={() => setIsEditing(true)}
-                      className="flex items-center gap-2 px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors"
-                    >
-                      <Edit3 className="w-4 h-4" />
-                      Bearbeiten
-                    </button>
-                  )}
-                </div>
-              </div>
-
-              {hasChanges && (
-                <div className="mb-4 p-3 bg-amber-50 border border-amber-200 rounded-lg flex items-center gap-2 text-amber-700">
-                  <AlertTriangle className="w-4 h-4" />
-                  <span className="text-sm">Ungespeicherte Aenderungen vorhanden</span>
-                </div>
-              )}
-
-              <div className="relative">
-                {isEditing ? (
-                  <textarea
-                    value={editedContent}
-                    onChange={(e) => handleContentChange(e.target.value)}
-                    className="w-full h-[600px] p-4 font-mono text-sm bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent resize-none"
-                    spellCheck={false}
-                  />
-                ) : (
-                  <div className="w-full h-[600px] p-4 font-mono text-sm bg-gray-50 border border-gray-200 rounded-lg overflow-auto whitespace-pre-wrap">
-                    {agent.soulContent}
-                  </div>
-                )}
-              </div>
-
-              <div className="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
-                <h4 className="font-medium text-blue-900 mb-2">Hinweise zur SOUL-Datei</h4>
-                <ul className="text-sm text-blue-700 space-y-1">
-                  <li>• Die SOUL-Datei definiert die Persoenlichkeit und das Verhalten des Agents</li>
-                  <li>• Aenderungen werden nach dem Speichern sofort wirksam</li>
-                  <li>• Testen Sie Aenderungen zuerst im Staging-Modus</li>
-                  <li>• Alle Aenderungen werden in der Historie protokolliert</li>
-                </ul>
-              </div>
-            </div>
-          )}
-
-          {activeTab === 'stats' && (
-            <div className="space-y-6">
-              <div className="text-center py-12 text-gray-500">
-                <Activity className="w-12 h-12 mx-auto mb-4 text-gray-400" />
-                <p>Live-Statistiken werden in einer zukuenftigen Version verfuegbar sein.</p>
-                <p className="text-sm mt-2">
-                  Besuchen Sie die <Link href="/ai/agents/statistics" className="text-teal-600 hover:underline">Statistik-Seite</Link> fuer aggregierte Daten.
-                </p>
-              </div>
-            </div>
-          )}
-
-          {activeTab === 'history' && (
-            <div>
-              <div className="space-y-4">
-                {mockChangeLogs.map((log) => (
-                  <div key={log.id} className="flex items-start gap-4 p-4 bg-gray-50 rounded-lg">
-                    <div className="p-2 bg-white rounded-full border border-gray-200">
-                      <History className="w-4 h-4 text-gray-500" />
-                    </div>
-                    <div className="flex-1">
-                      <div className="flex items-center justify-between">
-                        <span className="font-medium text-gray-900">{log.action}</span>
-                        <span className="text-sm text-gray-500">
-                          {new Date(log.timestamp).toLocaleString('de-DE')}
-                        </span>
-                      </div>
-                      <p className="text-sm text-gray-600 mt-1">{log.description}</p>
-                      <p className="text-xs text-gray-400 mt-1">von {log.user}</p>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
+            <SoulTabContent
+              agent={agent}
+              editedContent={editedContent}
+              isEditing={isEditing}
+              hasChanges={hasChanges}
+              saving={saving}
+              onContentChange={handleContentChange}
+              onSave={handleSave}
+              onReset={handleReset}
+              onStartEditing={() => setIsEditing(true)}
+            />
          )}
+          {activeTab === 'stats' && <StatsTabContent />}
+          {activeTab === 'history' && <HistoryTabContent changeLogs={mockChangeLogs} />}
        </div>
      </div>
    </div>
--- a/admin-lehrer/app/(admin)/ai/agents/architecture/_components/AgentTypesSection.tsx
+++ b/admin-lehrer/app/(admin)/ai/agents/architecture/_components/AgentTypesSection.tsx
@@ -0,0 +1,120 @@
+import { Brain, CheckCircle, Shield, AlertTriangle, MessageSquare } from 'lucide-react'
+
+interface AgentCardProps {
+  icon: React.ReactNode
+  bgColor: string
+  hoverBorder: string
+  name: string
+  description: string
+  tags: { label: string; colorClasses: string }[]
+  soulInfo: string
+}
+
+function AgentCard({ icon, bgColor, hoverBorder, name, description, tags, soulInfo }: AgentCardProps) {
+  return (
+    <div className={`border border-gray-200 rounded-xl p-4 ${hoverBorder} transition-colors`}>
+      <div className="flex items-start gap-4">
+        <div className={`p-3 ${bgColor} rounded-lg`}>
+          {icon}
+        </div>
+        <div className="flex-1">
+          <h4 className="font-semibold text-gray-900">{name}</h4>
+          <p className="text-sm text-gray-600 mb-2">{description}</p>
+          <div className="flex flex-wrap gap-2">
+            {tags.map(tag => (
+              <span key={tag.label} className={`px-2 py-1 ${tag.colorClasses} text-xs rounded-full`}>
+                {tag.label}
+              </span>
+            ))}
+          </div>
+          <div className="mt-2 text-xs text-gray-500">{soulInfo}</div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const AGENTS: AgentCardProps[] = [
+  {
+    icon: <Brain className="w-6 h-6 text-blue-600" />,
+    bgColor: 'bg-blue-100',
+    hoverBorder: 'hover:border-blue-300',
+    name: 'TutorAgent',
+    description: 'Lernbegleitung und Fragen beantworten',
+    tags: [
+      { label: 'Geduldig', colorClasses: 'bg-blue-50 text-blue-700' },
+      { label: 'Ermutigend', colorClasses: 'bg-blue-50 text-blue-700' },
+      { label: 'Sokratisch', colorClasses: 'bg-blue-50 text-blue-700' },
+    ],
+    soulInfo: 'SOUL: tutor-agent.soul.md | Routing: learning_*, help_*, question_*',
+  },
+  {
+    icon: <CheckCircle className="w-6 h-6 text-green-600" />,
+    bgColor: 'bg-green-100',
+    hoverBorder: 'hover:border-green-300',
+    name: 'GraderAgent',
+    description: 'Klausur-Korrektur und Bewertung',
+    tags: [
+      { label: 'Objektiv', colorClasses: 'bg-green-50 text-green-700' },
+      { label: 'Fair', colorClasses: 'bg-green-50 text-green-700' },
+      { label: 'Konstruktiv', colorClasses: 'bg-green-50 text-green-700' },
+    ],
+    soulInfo: 'SOUL: grader-agent.soul.md | Routing: grade_*, evaluate_*, correct_*',
+  },
+  {
+    icon: <Shield className="w-6 h-6 text-amber-600" />,
+    bgColor: 'bg-amber-100',
+    hoverBorder: 'hover:border-amber-300',
+    name: 'QualityJudge',
+    description: 'BQAS Qualitaetspruefung',
+    tags: [
+      { label: 'Kritisch', colorClasses: 'bg-amber-50 text-amber-700' },
+      { label: 'Praezise', colorClasses: 'bg-amber-50 text-amber-700' },
+      { label: 'Schnell', colorClasses: 'bg-amber-50 text-amber-700' },
+    ],
+    soulInfo: 'SOUL: quality-judge.soul.md | Routing: quality_*, review_*, validate_*',
+  },
+  {
+    icon: <AlertTriangle className="w-6 h-6 text-red-600" />,
+    bgColor: 'bg-red-100',
+    hoverBorder: 'hover:border-red-300',
+    name: 'AlertAgent',
+    description: 'Monitoring und Benachrichtigungen',
+    tags: [
+      { label: 'Wachsam', colorClasses: 'bg-red-50 text-red-700' },
+      { label: 'Proaktiv', colorClasses: 'bg-red-50 text-red-700' },
+      { label: 'Priorisierend', colorClasses: 'bg-red-50 text-red-700' },
+    ],
+    soulInfo: 'SOUL: alert-agent.soul.md | Routing: alert_*, monitor_*, notify_*',
+  },
+  {
+    icon: <MessageSquare className="w-6 h-6 text-purple-600" />,
+    bgColor: 'bg-purple-100',
+    hoverBorder: 'hover:border-purple-300',
+    name: 'Orchestrator',
+    description: 'Task-Koordination und Routing',
+    tags: [
+      { label: 'Koordinierend', colorClasses: 'bg-purple-50 text-purple-700' },
+      { label: 'Effizient', colorClasses: 'bg-purple-50 text-purple-700' },
+      { label: 'Zuverlaessig', colorClasses: 'bg-purple-50 text-purple-700' },
+    ],
+    soulInfo: 'SOUL: orchestrator.soul.md | Routing: Fallback fuer alle unbekannten Intents',
+  },
+]
+
+export function AgentTypesSection() {
+  return (
+    <div className="space-y-4">
+      <p className="text-gray-600 mb-4">
+        Jeder Agent hat eine spezialisierte Rolle im System. Die Agents kommunizieren ueber den Message Bus
+        und nutzen das Shared Brain fuer konsistente Entscheidungen.
+      </p>
+
+      <div className="grid gap-4">
+        {AGENTS.map(agent => (
+          <AgentCard key={agent.name} {...agent} />
+        ))}
+      </div>
+    </div>
+  )
+}
--- a/admin-lehrer/app/(admin)/ai/agents/architecture/_components/DatabaseSchemaSection.tsx
+++ b/admin-lehrer/app/(admin)/ai/agents/architecture/_components/DatabaseSchemaSection.tsx
@@ -0,0 +1,73 @@
+export function DatabaseSchemaSection() {
+  return (
+    <div className="space-y-4">
+      <p className="text-gray-600 mb-4">
+        Das Agent-System nutzt PostgreSQL fuer persistente Daten und Valkey (Redis) fuer Caching und Pub/Sub.
+      </p>
+
+      <div className="space-y-4">
+        {/* agent_sessions */}
+        <div className="bg-white border border-gray-200 rounded-xl p-4">
+          <h4 className="font-semibold text-gray-900 mb-2 font-mono">agent_sessions</h4>
+          <p className="text-sm text-gray-600 mb-3">Speichert Session-Daten mit Checkpoints</p>
+          <div className="bg-gray-50 rounded-lg p-3 font-mono text-xs overflow-x-auto">
+            <pre>{`
+CREATE TABLE agent_sessions (
+    id UUID PRIMARY KEY,
+    agent_type VARCHAR(50) NOT NULL,
+    user_id UUID REFERENCES users(id),
+    state VARCHAR(20) NOT NULL DEFAULT 'active',
+    context JSONB DEFAULT '{}',
+    checkpoints JSONB DEFAULT '[]',
+    created_at TIMESTAMPTZ DEFAULT NOW(),
+    updated_at TIMESTAMPTZ DEFAULT NOW(),
+    last_heartbeat TIMESTAMPTZ DEFAULT NOW()
+);
+            `}</pre>
+          </div>
+        </div>
+
+        {/* agent_memory */}
+        <div className="bg-white border border-gray-200 rounded-xl p-4">
+          <h4 className="font-semibold text-gray-900 mb-2 font-mono">agent_memory</h4>
+          <p className="text-sm text-gray-600 mb-3">Langzeit-Gedaechtnis mit TTL</p>
+          <div className="bg-gray-50 rounded-lg p-3 font-mono text-xs overflow-x-auto">
+            <pre>{`
+CREATE TABLE agent_memory (
+    id UUID PRIMARY KEY,
+    namespace VARCHAR(100) NOT NULL,
+    key VARCHAR(500) NOT NULL,
+    value JSONB NOT NULL,
+    agent_id VARCHAR(50) NOT NULL,
+    access_count INTEGER DEFAULT 0,
+    created_at TIMESTAMPTZ DEFAULT NOW(),
+    expires_at TIMESTAMPTZ,
+    UNIQUE(namespace, key)
+);
+            `}</pre>
+          </div>
+        </div>
+
+        {/* agent_messages */}
+        <div className="bg-white border border-gray-200 rounded-xl p-4">
+          <h4 className="font-semibold text-gray-900 mb-2 font-mono">agent_messages</h4>
+          <p className="text-sm text-gray-600 mb-3">Audit-Trail fuer Inter-Agent Kommunikation</p>
+          <div className="bg-gray-50 rounded-lg p-3 font-mono text-xs overflow-x-auto">
+            <pre>{`
+CREATE TABLE agent_messages (
+    id UUID PRIMARY KEY,
+    sender VARCHAR(50) NOT NULL,
+    receiver VARCHAR(50) NOT NULL,
+    message_type VARCHAR(50) NOT NULL,
+    payload JSONB NOT NULL,
+    priority INTEGER DEFAULT 1,
+    correlation_id UUID,
+    created_at TIMESTAMPTZ DEFAULT NOW()
+);
+            `}</pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/admin-lehrer/app/(admin)/ai/agents/architecture/_components/MessageBusSection.tsx
+++ b/admin-lehrer/app/(admin)/ai/agents/architecture/_components/MessageBusSection.tsx
@@ -0,0 +1,75 @@
+export function MessageBusSection() {
+  return (
+    <div className="space-y-4">
+      <p className="text-gray-600 mb-4">
+        Der Message Bus ermoeglicht die asynchrone Kommunikation zwischen Agents via Redis Pub/Sub.
+        Er unterstuetzt Prioritaeten, Request-Response-Pattern und Broadcast-Nachrichten.
+      </p>
+
+      <div className="bg-gray-50 rounded-xl p-6 font-mono text-sm">
+        <div className="text-gray-500 mb-2"># Nachrichtenfluss</div>
+        <pre className="text-gray-700">{`
+┌──────────────┐                    ┌──────────────┐
+│   Sender     │                    │   Receiver   │
+│   (Agent)    │                    │   (Agent)    │
+└──────┬───────┘                    └──────▲───────┘
+       │                                   │
+       │ publish(AgentMessage)             │ handle(message)
+       │                                   │
+       ▼                                   │
+┌────────────────────────────────────────────────────────┐
+│                     Message Bus                         │
+│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐    │
+│  │ Priority Q  │  │   Routing   │  │   Logging   │    │
+│  │ HIGH/NORMAL │  │   Rules     │  │   Audit     │    │
+│  └─────────────┘  └─────────────┘  └─────────────┘    │
+│                                                         │
+│                 Redis Pub/Sub                          │
+└────────────────────────────────────────────────────────┘
+        `}</pre>
+      </div>
+
+      <div className="mt-6">
+        <h4 className="font-semibold text-gray-900 mb-3">Nachrichtentypen</h4>
+        <div className="overflow-x-auto">
+          <table className="min-w-full border border-gray-200 rounded-lg">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Typ</th>
+                <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Prioritaet</th>
+                <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Beschreibung</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200">
+              <tr>
+                <td className="px-4 py-2 text-sm font-mono text-gray-700">task_request</td>
+                <td className="px-4 py-2"><span className="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded">NORMAL</span></td>
+                <td className="px-4 py-2 text-sm text-gray-600">Neue Aufgabe an Agent senden</td>
+              </tr>
+              <tr>
+                <td className="px-4 py-2 text-sm font-mono text-gray-700">task_response</td>
+                <td className="px-4 py-2"><span className="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded">NORMAL</span></td>
+                <td className="px-4 py-2 text-sm text-gray-600">Antwort auf task_request</td>
+              </tr>
+              <tr>
+                <td className="px-4 py-2 text-sm font-mono text-gray-700">escalation</td>
+                <td className="px-4 py-2"><span className="px-2 py-1 bg-orange-100 text-orange-700 text-xs rounded">HIGH</span></td>
+                <td className="px-4 py-2 text-sm text-gray-600">Eskalation an anderen Agent</td>
+              </tr>
+              <tr>
+                <td className="px-4 py-2 text-sm font-mono text-gray-700">alert</td>
+                <td className="px-4 py-2"><span className="px-2 py-1 bg-red-100 text-red-700 text-xs rounded">CRITICAL</span></td>
+                <td className="px-4 py-2 text-sm text-gray-600">Kritische Benachrichtigung</td>
+              </tr>
+              <tr>
+                <td className="px-4 py-2 text-sm font-mono text-gray-700">heartbeat</td>
+                <td className="px-4 py-2"><span className="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded">LOW</span></td>
+                <td className="px-4 py-2 text-sm text-gray-600">Liveness-Signal</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/admin-lehrer/app/(admin)/ai/agents/architecture/_components/OverviewSection.tsx
+++ b/admin-lehrer/app/(admin)/ai/agents/architecture/_components/OverviewSection.tsx
@@ -0,0 +1,71 @@
+import { Server, Brain, GitBranch } from 'lucide-react'
+
+export function OverviewSection() {
+  return (
+    <div className="space-y-6">
+      <p className="text-gray-600">
+        Das Breakpilot Multi-Agent-System basiert auf dem Mission Control Konzept. Es ermoeglicht
+        die Koordination mehrerer spezialisierter KI-Agents, die gemeinsam komplexe Aufgaben loesen.
+      </p>
+
+      {/* Architecture Diagram */}
+      <div className="bg-gray-50 rounded-xl p-6 font-mono text-sm overflow-x-auto">
+        <pre className="text-gray-700">{`
+┌─────────────────────────────────────────────────────────────────┐
+│                     Breakpilot Services                          │
+│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────────┐  │
+│  │Voice Service│  │Klausur Svc  │  │  Admin-v2 / AlertAgent  │  │
+│  └──────┬──────┘  └──────┬──────┘  └───────────┬─────────────┘  │
+│         │                │                      │                │
+│         └────────────────┼──────────────────────┘                │
+│                          │                                       │
+│  ┌───────────────────────▼───────────────────────────────────┐  │
+│  │                    Agent Core                              │  │
+│  │  ┌─────────────┐  ┌─────────────┐  ┌───────────────────┐  │  │
+│  │  │   Sessions  │  │Shared Brain │  │   Orchestrator    │  │  │
+│  │  │ - Manager   │  │ - Memory    │  │ - Message Bus     │  │  │
+│  │  │ - Heartbeat │  │ - Context   │  │ - Supervisor      │  │  │
+│  │  │ - Checkpoint│  │ - Knowledge │  │ - Task Router     │  │  │
+│  │  └─────────────┘  └─────────────┘  └───────────────────┘  │  │
+│  └───────────────────────────────────────────────────────────┘  │
+│                          │                                       │
+│  ┌───────────────────────▼───────────────────────────────────┐  │
+│  │                   Infrastructure                           │  │
+│  │     Valkey (Redis)          PostgreSQL          Qdrant     │  │
+│  └───────────────────────────────────────────────────────────┘  │
+└─────────────────────────────────────────────────────────────────┘
+        `}</pre>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
+          <div className="flex items-center gap-2 mb-2">
+            <Server className="w-5 h-5 text-blue-600" />
+            <span className="font-semibold text-blue-900">Session Management</span>
+          </div>
+          <p className="text-sm text-blue-700">
+            Verwaltet Agent-Lifecycles mit State Machine, Checkpoints und automatischer Recovery.
+          </p>
+        </div>
+        <div className="bg-purple-50 border border-purple-200 rounded-xl p-4">
+          <div className="flex items-center gap-2 mb-2">
+            <Brain className="w-5 h-5 text-purple-600" />
+            <span className="font-semibold text-purple-900">Shared Brain</span>
+          </div>
+          <p className="text-sm text-purple-700">
+            Gemeinsames Gedaechtnis fuer alle Agents mit TTL, Context-Verwaltung und Knowledge Graph.
+          </p>
+        </div>
+        <div className="bg-green-50 border border-green-200 rounded-xl p-4">
+          <div className="flex items-center gap-2 mb-2">
+            <GitBranch className="w-5 h-5 text-green-600" />
+            <span className="font-semibold text-green-900">Orchestrator</span>
+          </div>
+          <p className="text-sm text-green-700">
+            Message Bus, Supervisor und Task Router fuer die Agent-Koordination.
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/admin-lehrer/app/(admin)/ai/agents/architecture/_components/SessionLifecycleSection.tsx
+++ b/admin-lehrer/app/(admin)/ai/agents/architecture/_components/SessionLifecycleSection.tsx
@@ -0,0 +1,56 @@
+export function SessionLifecycleSection() {
+  return (
+    <div className="space-y-4">
+      <p className="text-gray-600 mb-4">
+        Sessions verwalten den Zustand von Agent-Interaktionen. Jede Session hat einen definierten
+        Lebenszyklus mit Checkpoints fuer Recovery.
+      </p>
+
+      <div className="bg-gray-50 rounded-xl p-6 font-mono text-sm">
+        <div className="text-gray-500 mb-2"># Session State Machine</div>
+        <pre className="text-gray-700">{`
+                    ┌─────────────────────────────────────┐
+                    │                                     │
+                    ▼                                     │
+┌──────────┐    ┌──────────┐    ┌──────────┐    ┌──────────┐
+│  ACTIVE  │───▶│  PAUSED  │───▶│ COMPLETED│    │  FAILED  │
+└──────────┘    └──────────┘    └──────────┘    └──────────┘
+     │               │                               ▲
+     │               │                               │
+     └───────────────┴───────────────────────────────┘
+                          (bei Fehler)
+
+States:
+- ACTIVE: Session laeuft, Agent verarbeitet Tasks
+- PAUSED: Session pausiert, wartet auf Eingabe
+- COMPLETED: Session erfolgreich beendet
+- FAILED: Session mit Fehler beendet
+        `}</pre>
+      </div>
+
+      <div className="mt-6">
+        <h4 className="font-semibold text-gray-900 mb-3">Heartbeat Monitoring</h4>
+        <div className="bg-white border border-gray-200 rounded-xl p-5">
+          <div className="grid grid-cols-3 gap-4 text-center">
+            <div>
+              <div className="text-2xl font-bold text-gray-900">30s</div>
+              <div className="text-sm text-gray-500">Timeout</div>
+            </div>
+            <div>
+              <div className="text-2xl font-bold text-gray-900">5s</div>
+              <div className="text-sm text-gray-500">Check Interval</div>
+            </div>
+            <div>
+              <div className="text-2xl font-bold text-gray-900">3</div>
+              <div className="text-sm text-gray-500">Max Missed Beats</div>
+            </div>
+          </div>
+          <p className="text-sm text-gray-600 mt-4 text-center">
+            Nach 3 verpassten Heartbeats wird der Agent als ausgefallen markiert und die
+            Restart-Policy greift (max. 3 Versuche).
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/admin-lehrer/app/(admin)/ai/agents/architecture/_components/SharedBrainSection.tsx
+++ b/admin-lehrer/app/(admin)/ai/agents/architecture/_components/SharedBrainSection.tsx
@@ -0,0 +1,83 @@
+import { Database, Activity, GitBranch } from 'lucide-react'
+
+export function SharedBrainSection() {
+  return (
+    <div className="space-y-4">
+      <p className="text-gray-600 mb-4">
+        Das Shared Brain speichert Wissen und Kontext, auf den alle Agents zugreifen koennen.
+        Es besteht aus drei Komponenten: Memory Store, Context Manager und Knowledge Graph.
+      </p>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="bg-white border border-gray-200 rounded-xl p-5">
+          <div className="flex items-center gap-2 mb-3">
+            <Database className="w-5 h-5 text-blue-600" />
+            <h4 className="font-semibold text-gray-900">Memory Store</h4>
+          </div>
+          <p className="text-sm text-gray-600 mb-3">
+            Langzeit-Gedaechtnis fuer Fakten, Entscheidungen und Lernfortschritte.
+          </p>
+          <ul className="text-xs text-gray-500 space-y-1">
+            <li>- TTL-basierte Expiration (30 Tage default)</li>
+            <li>- Access-Tracking (Haeufigkeit)</li>
+            <li>- Pattern-basierte Suche</li>
+            <li>- Hybrid: Redis + PostgreSQL</li>
+          </ul>
+        </div>
+
+        <div className="bg-white border border-gray-200 rounded-xl p-5">
+          <div className="flex items-center gap-2 mb-3">
+            <Activity className="w-5 h-5 text-purple-600" />
+            <h4 className="font-semibold text-gray-900">Context Manager</h4>
+          </div>
+          <p className="text-sm text-gray-600 mb-3">
+            Verwaltet Konversationskontext mit automatischer Komprimierung.
+          </p>
+          <ul className="text-xs text-gray-500 space-y-1">
+            <li>- Max 50 Messages pro Context</li>
+            <li>- Automatische Zusammenfassung</li>
+            <li>- System-Messages bleiben erhalten</li>
+            <li>- Entity-Extraktion</li>
+          </ul>
+        </div>
+
+        <div className="bg-white border border-gray-200 rounded-xl p-5">
+          <div className="flex items-center gap-2 mb-3">
+            <GitBranch className="w-5 h-5 text-green-600" />
+            <h4 className="font-semibold text-gray-900">Knowledge Graph</h4>
+          </div>
+          <p className="text-sm text-gray-600 mb-3">
+            Graph-basierte Darstellung von Entitaeten und ihren Beziehungen.
+          </p>
+          <ul className="text-xs text-gray-500 space-y-1">
+            <li>- Entitaeten: Student, Lehrer, Fach</li>
+            <li>- Beziehungen: lernt, unterrichtet</li>
+            <li>- BFS-basierte Pfadsuche</li>
+            <li>- Verwandte Entitaeten finden</li>
+          </ul>
+        </div>
+      </div>
+
+      <div className="bg-gray-50 rounded-xl p-6 font-mono text-sm mt-6">
+        <div className="text-gray-500 mb-2"># Memory Store Beispiel</div>
+        <pre className="text-gray-700">{`
+# Speichern
+await store.remember(
+    key="student:123:progress",
+    value={"level": 5, "score": 85, "topic": "algebra"},
+    agent_id="tutor-agent",
+    ttl_days=30
+)
+
+# Abrufen
+progress = await store.recall("student:123:progress")
+# → {"level": 5, "score": 85, "topic": "algebra"}
+
+# Suchen
+all_progress = await store.search("student:123:*")
+# → [Memory(...), Memory(...), ...]
+        `}</pre>
+      </div>
+    </div>
+  )
+}
--- a/admin-lehrer/app/(admin)/ai/agents/architecture/_components/SoulFilesSection.tsx
+++ b/admin-lehrer/app/(admin)/ai/agents/architecture/_components/SoulFilesSection.tsx
@@ -0,0 +1,68 @@
+export function SoulFilesSection() {
+  return (
+    <div className="space-y-4">
+      <p className="text-gray-600 mb-4">
+        SOUL-Dateien (Semantic Outline for Unified Learning) definieren die Persoenlichkeit und
+        Verhaltensregeln jedes Agents. Sie bestimmen, wie ein Agent kommuniziert, entscheidet und eskaliert.
+      </p>
+
+      <div className="bg-gray-900 rounded-xl p-6 text-gray-100 font-mono text-sm overflow-x-auto">
+        <div className="text-gray-400 mb-4"># Beispiel: tutor-agent.soul.md</div>
+        <pre className="text-green-400">{`
+# TutorAgent SOUL
+
+## Identitaet
+Du bist ein geduldiger, ermutigender Lernbegleiter fuer Schueler.
+Dein Ziel ist es, Verstaendnis zu foerdern, nicht Antworten vorzugeben.
+
+## Kommunikationsstil
+- Verwende einfache, klare Sprache
+- Stelle Rueckfragen, um Verstaendnis zu pruefen
+- Gib Hinweise statt direkter Loesungen
+- Feiere kleine Erfolge
+
+## Fachgebiete
+- Mathematik (Grundschule bis Abitur)
+- Naturwissenschaften (Physik, Chemie, Biologie)
+- Sprachen (Deutsch, Englisch)
+
+## Einschraenkungen
+- Gib NIEMALS vollstaendige Loesungen fuer Hausaufgaben
+- Verweise bei komplexen Themen auf Lehrkraefte
+- Erkenne Frustration und biete Pausen an
+
+## Eskalation
+- Bei wiederholtem Unverstaendnis: Schlage alternatives Erklaerformat vor
+- Bei emotionaler Belastung: Empfehle Gespraech mit Vertrauensperson
+- Bei technischen Problemen: Eskaliere an Support
+        `}</pre>
+      </div>
+
+      <div className="mt-6">
+        <h4 className="font-semibold text-gray-900 mb-3">SOUL-Struktur</h4>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="bg-white border border-gray-200 rounded-lg p-4">
+            <h5 className="font-medium text-gray-900 mb-2">Identitaet</h5>
+            <p className="text-sm text-gray-600">Wer ist der Agent? Welche Rolle nimmt er ein?</p>
+          </div>
+          <div className="bg-white border border-gray-200 rounded-lg p-4">
+            <h5 className="font-medium text-gray-900 mb-2">Kommunikationsstil</h5>
+            <p className="text-sm text-gray-600">Wie kommuniziert der Agent mit Benutzern?</p>
+          </div>
+          <div className="bg-white border border-gray-200 rounded-lg p-4">
+            <h5 className="font-medium text-gray-900 mb-2">Fachgebiete</h5>
+            <p className="text-sm text-gray-600">In welchen Bereichen ist der Agent kompetent?</p>
+          </div>
+          <div className="bg-white border border-gray-200 rounded-lg p-4">
+            <h5 className="font-medium text-gray-900 mb-2">Einschraenkungen</h5>
+            <p className="text-sm text-gray-600">Was darf der Agent NICHT tun?</p>
+          </div>
+          <div className="bg-white border border-gray-200 rounded-lg p-4 md:col-span-2">
+            <h5 className="font-medium text-gray-900 mb-2">Eskalation</h5>
+            <p className="text-sm text-gray-600">Wann und wie eskaliert der Agent an andere Agents oder Menschen?</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/admin-lehrer/app/(admin)/ai/agents/architecture/_components/TaskRoutingSection.tsx
+++ b/admin-lehrer/app/(admin)/ai/agents/architecture/_components/TaskRoutingSection.tsx
@@ -0,0 +1,82 @@
+export function TaskRoutingSection() {
+  return (
+    <div className="space-y-4">
+      <p className="text-gray-600 mb-4">
+        Der Task Router entscheidet, welcher Agent eine Anfrage bearbeitet. Er verwendet
+        Intent-basierte Regeln mit Prioritaeten und Fallback-Ketten.
+      </p>
+
+      <div className="overflow-x-auto">
+        <table className="min-w-full border border-gray-200 rounded-lg">
+          <thead className="bg-gray-50">
+            <tr>
+              <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Intent-Pattern</th>
+              <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Ziel-Agent</th>
+              <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Prioritaet</th>
+              <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Fallback</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200">
+            <tr>
+              <td className="px-4 py-2 text-sm font-mono text-blue-700">learning_*</td>
+              <td className="px-4 py-2 text-sm text-gray-700">TutorAgent</td>
+              <td className="px-4 py-2 text-sm text-gray-700">10</td>
+              <td className="px-4 py-2 text-sm text-gray-500">Orchestrator</td>
+            </tr>
+            <tr>
+              <td className="px-4 py-2 text-sm font-mono text-blue-700">help_*, question_*</td>
+              <td className="px-4 py-2 text-sm text-gray-700">TutorAgent</td>
+              <td className="px-4 py-2 text-sm text-gray-700">8</td>
+              <td className="px-4 py-2 text-sm text-gray-500">Orchestrator</td>
+            </tr>
+            <tr>
+              <td className="px-4 py-2 text-sm font-mono text-green-700">grade_*, evaluate_*</td>
+              <td className="px-4 py-2 text-sm text-gray-700">GraderAgent</td>
+              <td className="px-4 py-2 text-sm text-gray-700">10</td>
+              <td className="px-4 py-2 text-sm text-gray-500">Orchestrator</td>
+            </tr>
+            <tr>
+              <td className="px-4 py-2 text-sm font-mono text-amber-700">quality_*, review_*</td>
+              <td className="px-4 py-2 text-sm text-gray-700">QualityJudge</td>
+              <td className="px-4 py-2 text-sm text-gray-700">10</td>
+              <td className="px-4 py-2 text-sm text-gray-500">GraderAgent</td>
+            </tr>
+            <tr>
+              <td className="px-4 py-2 text-sm font-mono text-red-700">alert_*, monitor_*</td>
+              <td className="px-4 py-2 text-sm text-gray-700">AlertAgent</td>
+              <td className="px-4 py-2 text-sm text-gray-700">10</td>
+              <td className="px-4 py-2 text-sm text-gray-500">Orchestrator</td>
+            </tr>
+            <tr className="bg-gray-50">
+              <td className="px-4 py-2 text-sm font-mono text-gray-500">* (alle anderen)</td>
+              <td className="px-4 py-2 text-sm text-gray-700">Orchestrator</td>
+              <td className="px-4 py-2 text-sm text-gray-700">0</td>
+              <td className="px-4 py-2 text-sm text-gray-500">-</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="bg-white border border-gray-200 rounded-xl p-4">
+          <h4 className="font-semibold text-gray-900 mb-2">Routing-Strategien</h4>
+          <ul className="text-sm text-gray-600 space-y-2">
+            <li><span className="font-mono text-blue-600">ROUND_ROBIN</span> - Gleichmaessige Verteilung</li>
+            <li><span className="font-mono text-blue-600">LEAST_LOADED</span> - Agent mit wenigsten Tasks</li>
+            <li><span className="font-mono text-blue-600">PRIORITY</span> - Hoechste Prioritaet zuerst</li>
+            <li><span className="font-mono text-blue-600">RANDOM</span> - Zufaellige Auswahl</li>
+          </ul>
+        </div>
+        <div className="bg-white border border-gray-200 rounded-xl p-4">
+          <h4 className="font-semibold text-gray-900 mb-2">Fallback-Verhalten</h4>
+          <ul className="text-sm text-gray-600 space-y-2">
+            <li>1. Versuche Ziel-Agent zu erreichen</li>
+            <li>2. Bei Timeout: Fallback-Agent nutzen</li>
+            <li>3. Bei Fehler: Orchestrator uebernimmt</li>
+            <li>4. Bei kritischen Fehlern: Alert an Admin</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/admin-lehrer/app/(admin)/ai/agents/architecture/_components/index.ts
+++ b/admin-lehrer/app/(admin)/ai/agents/architecture/_components/index.ts
@@ -0,0 +1,9 @@
+export { OverviewSection } from './OverviewSection'
+export { AgentTypesSection } from './AgentTypesSection'
+export { SoulFilesSection } from './SoulFilesSection'
+export { MessageBusSection } from './MessageBusSection'
+export { SharedBrainSection } from './SharedBrainSection'
+export { TaskRoutingSection } from './TaskRoutingSection'
+export { SessionLifecycleSection } from './SessionLifecycleSection'
+export { DatabaseSchemaSection } from './DatabaseSchemaSection'
+export type { Section } from './types'
--- a/admin-lehrer/app/(admin)/ai/agents/architecture/_components/types.ts
+++ b/admin-lehrer/app/(admin)/ai/agents/architecture/_components/types.ts
@@ -0,0 +1,6 @@
+export interface Section {
+  id: string
+  title: string
+  icon: React.ReactNode
+  content: React.ReactNode
+}
--- a/admin-lehrer/app/(admin)/ai/agents/architecture/page.tsx
+++ b/admin-lehrer/app/(admin)/ai/agents/architecture/page.tsx
@@ -2,17 +2,78 @@

 import { useState } from 'react'
 import Link from 'next/link'
-import { ArrowLeft, Cpu, Brain, MessageSquare, Database, Activity, Shield, ChevronDown, ChevronRight, GitBranch, Layers, Server, FileText, AlertTriangle, CheckCircle, Zap, RefreshCw } from 'lucide-react'
+import {
+  ArrowLeft, Cpu, Brain, MessageSquare, Database,
+  Activity, ChevronDown, ChevronRight, GitBranch,
+  Layers, FileText, Zap, RefreshCw,
+} from 'lucide-react'
+import {
+  OverviewSection,
+  AgentTypesSection,
+  SoulFilesSection,
+  MessageBusSection,
+  SharedBrainSection,
+  TaskRoutingSection,
+  SessionLifecycleSection,
+  DatabaseSchemaSection,
+} from './_components'
+import type { Section } from './_components'

-interface Section {
-  id: string
-  title: string
-  icon: React.ReactNode
-  content: React.ReactNode
-}
+const SECTIONS: Section[] = [
+  {
+    id: 'overview',
+    title: 'System-Uebersicht',
+    icon: <Layers className="w-5 h-5" />,
+    content: <OverviewSection />,
+  },
+  {
+    id: 'agents',
+    title: 'Agent-Typen',
+    icon: <Cpu className="w-5 h-5" />,
+    content: <AgentTypesSection />,
+  },
+  {
+    id: 'soul-files',
+    title: 'SOUL-Files (Persoenlichkeiten)',
+    icon: <FileText className="w-5 h-5" />,
+    content: <SoulFilesSection />,
+  },
+  {
+    id: 'message-bus',
+    title: 'Message Bus & Kommunikation',
+    icon: <MessageSquare className="w-5 h-5" />,
+    content: <MessageBusSection />,
+  },
+  {
+    id: 'shared-brain',
+    title: 'Shared Brain (Gedaechtnis)',
+    icon: <Brain className="w-5 h-5" />,
+    content: <SharedBrainSection />,
+  },
+  {
+    id: 'task-routing',
+    title: 'Task Routing',
+    icon: <Zap className="w-5 h-5" />,
+    content: <TaskRoutingSection />,
+  },
+  {
+    id: 'session-lifecycle',
+    title: 'Session Lifecycle',
+    icon: <RefreshCw className="w-5 h-5" />,
+    content: <SessionLifecycleSection />,
+  },
+  {
+    id: 'database',
+    title: 'Datenbank-Schema',
+    icon: <Database className="w-5 h-5" />,
+    content: <DatabaseSchemaSection />,
+  },
+]

 export default function ArchitecturePage() {
-  const [expandedSections, setExpandedSections] = useState<string[]>(['overview', 'agents', 'soul-files'])
+  const [expandedSections, setExpandedSections] = useState<string[]>([
+    'overview', 'agents', 'soul-files',
+  ])

  const toggleSection = (id: string) => {
    setExpandedSections(prev =>
@@ -22,654 +83,6 @@ export default function ArchitecturePage() {
    )
  }

-  const sections: Section[] = [
-    {
-      id: 'overview',
-      title: 'System-Uebersicht',
-      icon: <Layers className="w-5 h-5" />,
-      content: (
-        <div className="space-y-6">
-          <p className="text-gray-600">
-            Das Breakpilot Multi-Agent-System basiert auf dem Mission Control Konzept. Es ermoeglicht
-            die Koordination mehrerer spezialisierter KI-Agents, die gemeinsam komplexe Aufgaben loesen.
-          </p>
-
-          {/* Architecture Diagram */}
-          <div className="bg-gray-50 rounded-xl p-6 font-mono text-sm overflow-x-auto">
-            <pre className="text-gray-700">{`
-┌─────────────────────────────────────────────────────────────────┐
-│                     Breakpilot Services                          │
-│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────────┐  │
-│  │Voice Service│  │Klausur Svc  │  │  Admin-v2 / AlertAgent  │  │
-│  └──────┬──────┘  └──────┬──────┘  └───────────┬─────────────┘  │
-│         │                │                      │                │
-│         └────────────────┼──────────────────────┘                │
-│                          │                                       │
-│  ┌───────────────────────▼───────────────────────────────────┐  │
-│  │                    Agent Core                              │  │
-│  │  ┌─────────────┐  ┌─────────────┐  ┌───────────────────┐  │  │
-│  │  │   Sessions  │  │Shared Brain │  │   Orchestrator    │  │  │
-│  │  │ - Manager   │  │ - Memory    │  │ - Message Bus     │  │  │
-│  │  │ - Heartbeat │  │ - Context   │  │ - Supervisor      │  │  │
-│  │  │ - Checkpoint│  │ - Knowledge │  │ - Task Router     │  │  │
-│  │  └─────────────┘  └─────────────┘  └───────────────────┘  │  │
-│  └───────────────────────────────────────────────────────────┘  │
-│                          │                                       │
-│  ┌───────────────────────▼───────────────────────────────────┐  │
-│  │                   Infrastructure                           │  │
-│  │     Valkey (Redis)          PostgreSQL          Qdrant     │  │
-│  └───────────────────────────────────────────────────────────┘  │
-└─────────────────────────────────────────────────────────────────┘
-            `}</pre>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
-              <div className="flex items-center gap-2 mb-2">
-                <Server className="w-5 h-5 text-blue-600" />
-                <span className="font-semibold text-blue-900">Session Management</span>
-              </div>
-              <p className="text-sm text-blue-700">
-                Verwaltet Agent-Lifecycles mit State Machine, Checkpoints und automatischer Recovery.
-              </p>
-            </div>
-            <div className="bg-purple-50 border border-purple-200 rounded-xl p-4">
-              <div className="flex items-center gap-2 mb-2">
-                <Brain className="w-5 h-5 text-purple-600" />
-                <span className="font-semibold text-purple-900">Shared Brain</span>
-              </div>
-              <p className="text-sm text-purple-700">
-                Gemeinsames Gedaechtnis fuer alle Agents mit TTL, Context-Verwaltung und Knowledge Graph.
-              </p>
-            </div>
-            <div className="bg-green-50 border border-green-200 rounded-xl p-4">
-              <div className="flex items-center gap-2 mb-2">
-                <GitBranch className="w-5 h-5 text-green-600" />
-                <span className="font-semibold text-green-900">Orchestrator</span>
-              </div>
-              <p className="text-sm text-green-700">
-                Message Bus, Supervisor und Task Router fuer die Agent-Koordination.
-              </p>
-            </div>
-          </div>
-        </div>
-      )
-    },
-    {
-      id: 'agents',
-      title: 'Agent-Typen',
-      icon: <Cpu className="w-5 h-5" />,
-      content: (
-        <div className="space-y-4">
-          <p className="text-gray-600 mb-4">
-            Jeder Agent hat eine spezialisierte Rolle im System. Die Agents kommunizieren ueber den Message Bus
-            und nutzen das Shared Brain fuer konsistente Entscheidungen.
-          </p>
-
-          <div className="grid gap-4">
-            {/* TutorAgent */}
-            <div className="border border-gray-200 rounded-xl p-4 hover:border-blue-300 transition-colors">
-              <div className="flex items-start gap-4">
-                <div className="p-3 bg-blue-100 rounded-lg">
-                  <Brain className="w-6 h-6 text-blue-600" />
-                </div>
-                <div className="flex-1">
-                  <h4 className="font-semibold text-gray-900">TutorAgent</h4>
-                  <p className="text-sm text-gray-600 mb-2">Lernbegleitung und Fragen beantworten</p>
-                  <div className="flex flex-wrap gap-2">
-                    <span className="px-2 py-1 bg-blue-50 text-blue-700 text-xs rounded-full">Geduldig</span>
-                    <span className="px-2 py-1 bg-blue-50 text-blue-700 text-xs rounded-full">Ermutigend</span>
-                    <span className="px-2 py-1 bg-blue-50 text-blue-700 text-xs rounded-full">Sokratisch</span>
-                  </div>
-                  <div className="mt-2 text-xs text-gray-500">
-                    SOUL: tutor-agent.soul.md | Routing: learning_*, help_*, question_*
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* GraderAgent */}
-            <div className="border border-gray-200 rounded-xl p-4 hover:border-green-300 transition-colors">
-              <div className="flex items-start gap-4">
-                <div className="p-3 bg-green-100 rounded-lg">
-                  <CheckCircle className="w-6 h-6 text-green-600" />
-                </div>
-                <div className="flex-1">
-                  <h4 className="font-semibold text-gray-900">GraderAgent</h4>
-                  <p className="text-sm text-gray-600 mb-2">Klausur-Korrektur und Bewertung</p>
-                  <div className="flex flex-wrap gap-2">
-                    <span className="px-2 py-1 bg-green-50 text-green-700 text-xs rounded-full">Objektiv</span>
-                    <span className="px-2 py-1 bg-green-50 text-green-700 text-xs rounded-full">Fair</span>
-                    <span className="px-2 py-1 bg-green-50 text-green-700 text-xs rounded-full">Konstruktiv</span>
-                  </div>
-                  <div className="mt-2 text-xs text-gray-500">
-                    SOUL: grader-agent.soul.md | Routing: grade_*, evaluate_*, correct_*
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* QualityJudge */}
-            <div className="border border-gray-200 rounded-xl p-4 hover:border-amber-300 transition-colors">
-              <div className="flex items-start gap-4">
-                <div className="p-3 bg-amber-100 rounded-lg">
-                  <Shield className="w-6 h-6 text-amber-600" />
-                </div>
-                <div className="flex-1">
-                  <h4 className="font-semibold text-gray-900">QualityJudge</h4>
-                  <p className="text-sm text-gray-600 mb-2">BQAS Qualitaetspruefung</p>
-                  <div className="flex flex-wrap gap-2">
-                    <span className="px-2 py-1 bg-amber-50 text-amber-700 text-xs rounded-full">Kritisch</span>
-                    <span className="px-2 py-1 bg-amber-50 text-amber-700 text-xs rounded-full">Praezise</span>
-                    <span className="px-2 py-1 bg-amber-50 text-amber-700 text-xs rounded-full">Schnell</span>
-                  </div>
-                  <div className="mt-2 text-xs text-gray-500">
-                    SOUL: quality-judge.soul.md | Routing: quality_*, review_*, validate_*
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* AlertAgent */}
-            <div className="border border-gray-200 rounded-xl p-4 hover:border-red-300 transition-colors">
-              <div className="flex items-start gap-4">
-                <div className="p-3 bg-red-100 rounded-lg">
-                  <AlertTriangle className="w-6 h-6 text-red-600" />
-                </div>
-                <div className="flex-1">
-                  <h4 className="font-semibold text-gray-900">AlertAgent</h4>
-                  <p className="text-sm text-gray-600 mb-2">Monitoring und Benachrichtigungen</p>
-                  <div className="flex flex-wrap gap-2">
-                    <span className="px-2 py-1 bg-red-50 text-red-700 text-xs rounded-full">Wachsam</span>
-                    <span className="px-2 py-1 bg-red-50 text-red-700 text-xs rounded-full">Proaktiv</span>
-                    <span className="px-2 py-1 bg-red-50 text-red-700 text-xs rounded-full">Priorisierend</span>
-                  </div>
-                  <div className="mt-2 text-xs text-gray-500">
-                    SOUL: alert-agent.soul.md | Routing: alert_*, monitor_*, notify_*
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* Orchestrator */}
-            <div className="border border-gray-200 rounded-xl p-4 hover:border-purple-300 transition-colors">
-              <div className="flex items-start gap-4">
-                <div className="p-3 bg-purple-100 rounded-lg">
-                  <MessageSquare className="w-6 h-6 text-purple-600" />
-                </div>
-                <div className="flex-1">
-                  <h4 className="font-semibold text-gray-900">Orchestrator</h4>
-                  <p className="text-sm text-gray-600 mb-2">Task-Koordination und Routing</p>
-                  <div className="flex flex-wrap gap-2">
-                    <span className="px-2 py-1 bg-purple-50 text-purple-700 text-xs rounded-full">Koordinierend</span>
-                    <span className="px-2 py-1 bg-purple-50 text-purple-700 text-xs rounded-full">Effizient</span>
-                    <span className="px-2 py-1 bg-purple-50 text-purple-700 text-xs rounded-full">Zuverlaessig</span>
-                  </div>
-                  <div className="mt-2 text-xs text-gray-500">
-                    SOUL: orchestrator.soul.md | Routing: Fallback fuer alle unbekannten Intents
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      )
-    },
-    {
-      id: 'soul-files',
-      title: 'SOUL-Files (Persoenlichkeiten)',
-      icon: <FileText className="w-5 h-5" />,
-      content: (
-        <div className="space-y-4">
-          <p className="text-gray-600 mb-4">
-            SOUL-Dateien (Semantic Outline for Unified Learning) definieren die Persoenlichkeit und
-            Verhaltensregeln jedes Agents. Sie bestimmen, wie ein Agent kommuniziert, entscheidet und eskaliert.
-          </p>
-
-          <div className="bg-gray-900 rounded-xl p-6 text-gray-100 font-mono text-sm overflow-x-auto">
-            <div className="text-gray-400 mb-4"># Beispiel: tutor-agent.soul.md</div>
-            <pre className="text-green-400">{`
-# TutorAgent SOUL
-
-## Identitaet
-Du bist ein geduldiger, ermutigender Lernbegleiter fuer Schueler.
-Dein Ziel ist es, Verstaendnis zu foerdern, nicht Antworten vorzugeben.
-
-## Kommunikationsstil
- Verwende einfache, klare Sprache
- Stelle Rueckfragen, um Verstaendnis zu pruefen
- Gib Hinweise statt direkter Loesungen
- Feiere kleine Erfolge
-
-## Fachgebiete
- Mathematik (Grundschule bis Abitur)
- Naturwissenschaften (Physik, Chemie, Biologie)
- Sprachen (Deutsch, Englisch)
-
-## Einschraenkungen
- Gib NIEMALS vollstaendige Loesungen fuer Hausaufgaben
- Verweise bei komplexen Themen auf Lehrkraefte
- Erkenne Frustration und biete Pausen an
-
-## Eskalation
- Bei wiederholtem Unverstaendnis: Schlage alternatives Erklaerformat vor
- Bei emotionaler Belastung: Empfehle Gespraech mit Vertrauensperson
- Bei technischen Problemen: Eskaliere an Support
-            `}</pre>
-          </div>
-
-          <div className="mt-6">
-            <h4 className="font-semibold text-gray-900 mb-3">SOUL-Struktur</h4>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div className="bg-white border border-gray-200 rounded-lg p-4">
-                <h5 className="font-medium text-gray-900 mb-2">Identitaet</h5>
-                <p className="text-sm text-gray-600">Wer ist der Agent? Welche Rolle nimmt er ein?</p>
-              </div>
-              <div className="bg-white border border-gray-200 rounded-lg p-4">
-                <h5 className="font-medium text-gray-900 mb-2">Kommunikationsstil</h5>
-                <p className="text-sm text-gray-600">Wie kommuniziert der Agent mit Benutzern?</p>
-              </div>
-              <div className="bg-white border border-gray-200 rounded-lg p-4">
-                <h5 className="font-medium text-gray-900 mb-2">Fachgebiete</h5>
-                <p className="text-sm text-gray-600">In welchen Bereichen ist der Agent kompetent?</p>
-              </div>
-              <div className="bg-white border border-gray-200 rounded-lg p-4">
-                <h5 className="font-medium text-gray-900 mb-2">Einschraenkungen</h5>
-                <p className="text-sm text-gray-600">Was darf der Agent NICHT tun?</p>
-              </div>
-              <div className="bg-white border border-gray-200 rounded-lg p-4 md:col-span-2">
-                <h5 className="font-medium text-gray-900 mb-2">Eskalation</h5>
-                <p className="text-sm text-gray-600">Wann und wie eskaliert der Agent an andere Agents oder Menschen?</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      )
-    },
-    {
-      id: 'message-bus',
-      title: 'Message Bus & Kommunikation',
-      icon: <MessageSquare className="w-5 h-5" />,
-      content: (
-        <div className="space-y-4">
-          <p className="text-gray-600 mb-4">
-            Der Message Bus ermoeglicht die asynchrone Kommunikation zwischen Agents via Redis Pub/Sub.
-            Er unterstuetzt Prioritaeten, Request-Response-Pattern und Broadcast-Nachrichten.
-          </p>
-
-          <div className="bg-gray-50 rounded-xl p-6 font-mono text-sm">
-            <div className="text-gray-500 mb-2"># Nachrichtenfluss</div>
-            <pre className="text-gray-700">{`
-┌──────────────┐                    ┌──────────────┐
-│   Sender     │                    │   Receiver   │
-│   (Agent)    │                    │   (Agent)    │
-└──────┬───────┘                    └──────▲───────┘
-       │                                   │
-       │ publish(AgentMessage)             │ handle(message)
-       │                                   │
-       ▼                                   │
-┌────────────────────────────────────────────────────────┐
-│                     Message Bus                         │
-│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐    │
-│  │ Priority Q  │  │   Routing   │  │   Logging   │    │
-│  │ HIGH/NORMAL │  │   Rules     │  │   Audit     │    │
-│  └─────────────┘  └─────────────┘  └─────────────┘    │
-│                                                         │
-│                 Redis Pub/Sub                          │
-└────────────────────────────────────────────────────────┘
-            `}</pre>
-          </div>
-
-          <div className="mt-6">
-            <h4 className="font-semibold text-gray-900 mb-3">Nachrichtentypen</h4>
-            <div className="overflow-x-auto">
-              <table className="min-w-full border border-gray-200 rounded-lg">
-                <thead className="bg-gray-50">
-                  <tr>
-                    <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Typ</th>
-                    <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Prioritaet</th>
-                    <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Beschreibung</th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-gray-200">
-                  <tr>
-                    <td className="px-4 py-2 text-sm font-mono text-gray-700">task_request</td>
-                    <td className="px-4 py-2"><span className="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded">NORMAL</span></td>
-                    <td className="px-4 py-2 text-sm text-gray-600">Neue Aufgabe an Agent senden</td>
-                  </tr>
-                  <tr>
-                    <td className="px-4 py-2 text-sm font-mono text-gray-700">task_response</td>
-                    <td className="px-4 py-2"><span className="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded">NORMAL</span></td>
-                    <td className="px-4 py-2 text-sm text-gray-600">Antwort auf task_request</td>
-                  </tr>
-                  <tr>
-                    <td className="px-4 py-2 text-sm font-mono text-gray-700">escalation</td>
-                    <td className="px-4 py-2"><span className="px-2 py-1 bg-orange-100 text-orange-700 text-xs rounded">HIGH</span></td>
-                    <td className="px-4 py-2 text-sm text-gray-600">Eskalation an anderen Agent</td>
-                  </tr>
-                  <tr>
-                    <td className="px-4 py-2 text-sm font-mono text-gray-700">alert</td>
-                    <td className="px-4 py-2"><span className="px-2 py-1 bg-red-100 text-red-700 text-xs rounded">CRITICAL</span></td>
-                    <td className="px-4 py-2 text-sm text-gray-600">Kritische Benachrichtigung</td>
-                  </tr>
-                  <tr>
-                    <td className="px-4 py-2 text-sm font-mono text-gray-700">heartbeat</td>
-                    <td className="px-4 py-2"><span className="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded">LOW</span></td>
-                    <td className="px-4 py-2 text-sm text-gray-600">Liveness-Signal</td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      )
-    },
-    {
-      id: 'shared-brain',
-      title: 'Shared Brain (Gedaechtnis)',
-      icon: <Brain className="w-5 h-5" />,
-      content: (
-        <div className="space-y-4">
-          <p className="text-gray-600 mb-4">
-            Das Shared Brain speichert Wissen und Kontext, auf den alle Agents zugreifen koennen.
-            Es besteht aus drei Komponenten: Memory Store, Context Manager und Knowledge Graph.
-          </p>
-
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div className="bg-white border border-gray-200 rounded-xl p-5">
-              <div className="flex items-center gap-2 mb-3">
-                <Database className="w-5 h-5 text-blue-600" />
-                <h4 className="font-semibold text-gray-900">Memory Store</h4>
-              </div>
-              <p className="text-sm text-gray-600 mb-3">
-                Langzeit-Gedaechtnis fuer Fakten, Entscheidungen und Lernfortschritte.
-              </p>
-              <ul className="text-xs text-gray-500 space-y-1">
-                <li>- TTL-basierte Expiration (30 Tage default)</li>
-                <li>- Access-Tracking (Haeufigkeit)</li>
-                <li>- Pattern-basierte Suche</li>
-                <li>- Hybrid: Redis + PostgreSQL</li>
-              </ul>
-            </div>
-
-            <div className="bg-white border border-gray-200 rounded-xl p-5">
-              <div className="flex items-center gap-2 mb-3">
-                <Activity className="w-5 h-5 text-purple-600" />
-                <h4 className="font-semibold text-gray-900">Context Manager</h4>
-              </div>
-              <p className="text-sm text-gray-600 mb-3">
-                Verwaltet Konversationskontext mit automatischer Komprimierung.
-              </p>
-              <ul className="text-xs text-gray-500 space-y-1">
-                <li>- Max 50 Messages pro Context</li>
-                <li>- Automatische Zusammenfassung</li>
-                <li>- System-Messages bleiben erhalten</li>
-                <li>- Entity-Extraktion</li>
-              </ul>
-            </div>
-
-            <div className="bg-white border border-gray-200 rounded-xl p-5">
-              <div className="flex items-center gap-2 mb-3">
-                <GitBranch className="w-5 h-5 text-green-600" />
-                <h4 className="font-semibold text-gray-900">Knowledge Graph</h4>
-              </div>
-              <p className="text-sm text-gray-600 mb-3">
-                Graph-basierte Darstellung von Entitaeten und ihren Beziehungen.
-              </p>
-              <ul className="text-xs text-gray-500 space-y-1">
-                <li>- Entitaeten: Student, Lehrer, Fach</li>
-                <li>- Beziehungen: lernt, unterrichtet</li>
-                <li>- BFS-basierte Pfadsuche</li>
-                <li>- Verwandte Entitaeten finden</li>
-              </ul>
-            </div>
-          </div>
-
-          <div className="bg-gray-50 rounded-xl p-6 font-mono text-sm mt-6">
-            <div className="text-gray-500 mb-2"># Memory Store Beispiel</div>
-            <pre className="text-gray-700">{`
-# Speichern
-await store.remember(
-    key="student:123:progress",
-    value={"level": 5, "score": 85, "topic": "algebra"},
-    agent_id="tutor-agent",
-    ttl_days=30
-)
-
-# Abrufen
-progress = await store.recall("student:123:progress")
-# → {"level": 5, "score": 85, "topic": "algebra"}
-
-# Suchen
-all_progress = await store.search("student:123:*")
-# → [Memory(...), Memory(...), ...]
-            `}</pre>
-          </div>
-        </div>
-      )
-    },
-    {
-      id: 'task-routing',
-      title: 'Task Routing',
-      icon: <Zap className="w-5 h-5" />,
-      content: (
-        <div className="space-y-4">
-          <p className="text-gray-600 mb-4">
-            Der Task Router entscheidet, welcher Agent eine Anfrage bearbeitet. Er verwendet
-            Intent-basierte Regeln mit Prioritaeten und Fallback-Ketten.
-          </p>
-
-          <div className="overflow-x-auto">
-            <table className="min-w-full border border-gray-200 rounded-lg">
-              <thead className="bg-gray-50">
-                <tr>
-                  <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Intent-Pattern</th>
-                  <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Ziel-Agent</th>
-                  <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Prioritaet</th>
-                  <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Fallback</th>
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-gray-200">
-                <tr>
-                  <td className="px-4 py-2 text-sm font-mono text-blue-700">learning_*</td>
-                  <td className="px-4 py-2 text-sm text-gray-700">TutorAgent</td>
-                  <td className="px-4 py-2 text-sm text-gray-700">10</td>
-                  <td className="px-4 py-2 text-sm text-gray-500">Orchestrator</td>
-                </tr>
-                <tr>
-                  <td className="px-4 py-2 text-sm font-mono text-blue-700">help_*, question_*</td>
-                  <td className="px-4 py-2 text-sm text-gray-700">TutorAgent</td>
-                  <td className="px-4 py-2 text-sm text-gray-700">8</td>
-                  <td className="px-4 py-2 text-sm text-gray-500">Orchestrator</td>
-                </tr>
-                <tr>
-                  <td className="px-4 py-2 text-sm font-mono text-green-700">grade_*, evaluate_*</td>
-                  <td className="px-4 py-2 text-sm text-gray-700">GraderAgent</td>
-                  <td className="px-4 py-2 text-sm text-gray-700">10</td>
-                  <td className="px-4 py-2 text-sm text-gray-500">Orchestrator</td>
-                </tr>
-                <tr>
-                  <td className="px-4 py-2 text-sm font-mono text-amber-700">quality_*, review_*</td>
-                  <td className="px-4 py-2 text-sm text-gray-700">QualityJudge</td>
-                  <td className="px-4 py-2 text-sm text-gray-700">10</td>
-                  <td className="px-4 py-2 text-sm text-gray-500">GraderAgent</td>
-                </tr>
-                <tr>
-                  <td className="px-4 py-2 text-sm font-mono text-red-700">alert_*, monitor_*</td>
-                  <td className="px-4 py-2 text-sm text-gray-700">AlertAgent</td>
-                  <td className="px-4 py-2 text-sm text-gray-700">10</td>
-                  <td className="px-4 py-2 text-sm text-gray-500">Orchestrator</td>
-                </tr>
-                <tr className="bg-gray-50">
-                  <td className="px-4 py-2 text-sm font-mono text-gray-500">* (alle anderen)</td>
-                  <td className="px-4 py-2 text-sm text-gray-700">Orchestrator</td>
-                  <td className="px-4 py-2 text-sm text-gray-700">0</td>
-                  <td className="px-4 py-2 text-sm text-gray-500">-</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-
-          <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div className="bg-white border border-gray-200 rounded-xl p-4">
-              <h4 className="font-semibold text-gray-900 mb-2">Routing-Strategien</h4>
-              <ul className="text-sm text-gray-600 space-y-2">
-                <li><span className="font-mono text-blue-600">ROUND_ROBIN</span> - Gleichmaessige Verteilung</li>
-                <li><span className="font-mono text-blue-600">LEAST_LOADED</span> - Agent mit wenigsten Tasks</li>
-                <li><span className="font-mono text-blue-600">PRIORITY</span> - Hoechste Prioritaet zuerst</li>
-                <li><span className="font-mono text-blue-600">RANDOM</span> - Zufaellige Auswahl</li>
-              </ul>
-            </div>
-            <div className="bg-white border border-gray-200 rounded-xl p-4">
-              <h4 className="font-semibold text-gray-900 mb-2">Fallback-Verhalten</h4>
-              <ul className="text-sm text-gray-600 space-y-2">
-                <li>1. Versuche Ziel-Agent zu erreichen</li>
-                <li>2. Bei Timeout: Fallback-Agent nutzen</li>
-                <li>3. Bei Fehler: Orchestrator uebernimmt</li>
-                <li>4. Bei kritischen Fehlern: Alert an Admin</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      )
-    },
-    {
-      id: 'session-lifecycle',
-      title: 'Session Lifecycle',
-      icon: <RefreshCw className="w-5 h-5" />,
-      content: (
-        <div className="space-y-4">
-          <p className="text-gray-600 mb-4">
-            Sessions verwalten den Zustand von Agent-Interaktionen. Jede Session hat einen definierten
-            Lebenszyklus mit Checkpoints fuer Recovery.
-          </p>
-
-          <div className="bg-gray-50 rounded-xl p-6 font-mono text-sm">
-            <div className="text-gray-500 mb-2"># Session State Machine</div>
-            <pre className="text-gray-700">{`
-                    ┌─────────────────────────────────────┐
-                    │                                     │
-                    ▼                                     │
-┌──────────┐    ┌──────────┐    ┌──────────┐    ┌──────────┐
-│  ACTIVE  │───▶│  PAUSED  │───▶│ COMPLETED│    │  FAILED  │
-└──────────┘    └──────────┘    └──────────┘    └──────────┘
-     │               │                               ▲
-     │               │                               │
-     └───────────────┴───────────────────────────────┘
-                          (bei Fehler)
-
-States:
- ACTIVE: Session laeuft, Agent verarbeitet Tasks
- PAUSED: Session pausiert, wartet auf Eingabe
- COMPLETED: Session erfolgreich beendet
- FAILED: Session mit Fehler beendet
-            `}</pre>
-          </div>
-
-          <div className="mt-6">
-            <h4 className="font-semibold text-gray-900 mb-3">Heartbeat Monitoring</h4>
-            <div className="bg-white border border-gray-200 rounded-xl p-5">
-              <div className="grid grid-cols-3 gap-4 text-center">
-                <div>
-                  <div className="text-2xl font-bold text-gray-900">30s</div>
-                  <div className="text-sm text-gray-500">Timeout</div>
-                </div>
-                <div>
-                  <div className="text-2xl font-bold text-gray-900">5s</div>
-                  <div className="text-sm text-gray-500">Check Interval</div>
-                </div>
-                <div>
-                  <div className="text-2xl font-bold text-gray-900">3</div>
-                  <div className="text-sm text-gray-500">Max Missed Beats</div>
-                </div>
-              </div>
-              <p className="text-sm text-gray-600 mt-4 text-center">
-                Nach 3 verpassten Heartbeats wird der Agent als ausgefallen markiert und die
-                Restart-Policy greift (max. 3 Versuche).
-              </p>
-            </div>
-          </div>
-        </div>
-      )
-    },
-    {
-      id: 'database',
-      title: 'Datenbank-Schema',
-      icon: <Database className="w-5 h-5" />,
-      content: (
-        <div className="space-y-4">
-          <p className="text-gray-600 mb-4">
-            Das Agent-System nutzt PostgreSQL fuer persistente Daten und Valkey (Redis) fuer Caching und Pub/Sub.
-          </p>
-
-          <div className="space-y-4">
-            {/* agent_sessions */}
-            <div className="bg-white border border-gray-200 rounded-xl p-4">
-              <h4 className="font-semibold text-gray-900 mb-2 font-mono">agent_sessions</h4>
-              <p className="text-sm text-gray-600 mb-3">Speichert Session-Daten mit Checkpoints</p>
-              <div className="bg-gray-50 rounded-lg p-3 font-mono text-xs overflow-x-auto">
-                <pre>{`
-CREATE TABLE agent_sessions (
-    id UUID PRIMARY KEY,
-    agent_type VARCHAR(50) NOT NULL,
-    user_id UUID REFERENCES users(id),
-    state VARCHAR(20) NOT NULL DEFAULT 'active',
-    context JSONB DEFAULT '{}',
-    checkpoints JSONB DEFAULT '[]',
-    created_at TIMESTAMPTZ DEFAULT NOW(),
-    updated_at TIMESTAMPTZ DEFAULT NOW(),
-    last_heartbeat TIMESTAMPTZ DEFAULT NOW()
-);
-                `}</pre>
-              </div>
-            </div>
-
-            {/* agent_memory */}
-            <div className="bg-white border border-gray-200 rounded-xl p-4">
-              <h4 className="font-semibold text-gray-900 mb-2 font-mono">agent_memory</h4>
-              <p className="text-sm text-gray-600 mb-3">Langzeit-Gedaechtnis mit TTL</p>
-              <div className="bg-gray-50 rounded-lg p-3 font-mono text-xs overflow-x-auto">
-                <pre>{`
-CREATE TABLE agent_memory (
-    id UUID PRIMARY KEY,
-    namespace VARCHAR(100) NOT NULL,
-    key VARCHAR(500) NOT NULL,
-    value JSONB NOT NULL,
-    agent_id VARCHAR(50) NOT NULL,
-    access_count INTEGER DEFAULT 0,
-    created_at TIMESTAMPTZ DEFAULT NOW(),
-    expires_at TIMESTAMPTZ,
-    UNIQUE(namespace, key)
-);
-                `}</pre>
-              </div>
-            </div>
-
-            {/* agent_messages */}
-            <div className="bg-white border border-gray-200 rounded-xl p-4">
-              <h4 className="font-semibold text-gray-900 mb-2 font-mono">agent_messages</h4>
-              <p className="text-sm text-gray-600 mb-3">Audit-Trail fuer Inter-Agent Kommunikation</p>
-              <div className="bg-gray-50 rounded-lg p-3 font-mono text-xs overflow-x-auto">
-                <pre>{`
-CREATE TABLE agent_messages (
-    id UUID PRIMARY KEY,
-    sender VARCHAR(50) NOT NULL,
-    receiver VARCHAR(50) NOT NULL,
-    message_type VARCHAR(50) NOT NULL,
-    payload JSONB NOT NULL,
-    priority INTEGER DEFAULT 1,
-    correlation_id UUID,
-    created_at TIMESTAMPTZ DEFAULT NOW()
-);
-                `}</pre>
-              </div>
-            </div>
-          </div>
-        </div>
-      )
-    }
-  ]
-
  return (
    <div className="p-6 max-w-5xl mx-auto">
      {/* Header */}
@@ -696,7 +109,7 @@ CREATE TABLE agent_messages (
      <div className="bg-gray-50 rounded-xl p-5 mb-8">
        <h2 className="font-semibold text-gray-900 mb-3">Inhaltsverzeichnis</h2>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
-          {sections.map(section => (
+          {SECTIONS.map(section => (
            <button
              key={section.id}
              onClick={() => {
@@ -716,7 +129,7 @@ CREATE TABLE agent_messages (

      {/* Sections */}
      <div className="space-y-4">
-        {sections.map(section => (
+        {SECTIONS.map(section => (
          <div
            key={section.id}
            id={section.id}
@@ -749,7 +162,7 @@ CREATE TABLE agent_messages (

      {/* Footer Links */}
      <div className="mt-8 bg-teal-50 border border-teal-200 rounded-xl p-5">
-        <h3 className="font-semibold text-teal-900 mb-3">Weiterführende Ressourcen</h3>
+        <h3 className="font-semibold text-teal-900 mb-3">Weiterfuehrende Ressourcen</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
          <Link
            href="/ai/agents"
--- a/admin-lehrer/app/(admin)/ai/ocr-labeling/_components/ExportTab.tsx
+++ b/admin-lehrer/app/(admin)/ai/ocr-labeling/_components/ExportTab.tsx
@@ -0,0 +1,134 @@
+'use client'
+
+/**
+ * Export tab: export training data in various formats.
+ */
+
+import { useState } from 'react'
+import Link from 'next/link'
+import { API_BASE } from '../constants'
+import type { OCRSession, OCRStats } from '../types'
+
+interface ExportTabProps {
+  sessions: OCRSession[]
+  selectedSession: string | null
+  setSelectedSession: (id: string | null) => void
+  stats: OCRStats | null
+  setError: (error: string | null) => void
+}
+
+export function ExportTab({
+  sessions,
+  selectedSession,
+  setSelectedSession,
+  stats,
+  setError,
+}: ExportTabProps) {
+  const [exportFormat, setExportFormat] = useState<'generic' | 'trocr' | 'llama_vision'>('generic')
+  const [exporting, setExporting] = useState(false)
+  const [exportResult, setExportResult] = useState<{
+    exported_count: number
+    batch_id: string
+    samples?: Array<Record<string, unknown>>
+  } | null>(null)
+
+  const handleExport = async () => {
+    setExporting(true)
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/ocr-label/export`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          export_format: exportFormat,
+          session_id: selectedSession,
+        }),
+      })
+
+      if (res.ok) {
+        const data = await res.json()
+        setExportResult(data)
+      } else {
+        setError('Export fehlgeschlagen')
+      }
+    } catch {
+      setError('Netzwerkfehler')
+    } finally {
+      setExporting(false)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="bg-white rounded-lg shadow p-6">
+        <h3 className="text-lg font-semibold mb-4">Training-Daten exportieren</h3>
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Export-Format</label>
+            <select
+              value={exportFormat}
+              onChange={(e) => setExportFormat(e.target.value as typeof exportFormat)}
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
+            >
+              <option value="generic">Generic JSON</option>
+              <option value="trocr">TrOCR Fine-Tuning</option>
+              <option value="llama_vision">Llama Vision Fine-Tuning</option>
+            </select>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Session (optional)</label>
+            <select
+              value={selectedSession || ''}
+              onChange={(e) => setSelectedSession(e.target.value || null)}
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
+            >
+              <option value="">Alle Sessions</option>
+              {sessions.map((session) => (
+                <option key={session.id} value={session.id}>{session.name}</option>
+              ))}
+            </select>
+          </div>
+
+          <button
+            onClick={handleExport}
+            disabled={exporting || (stats?.exportable_items || 0) === 0}
+            className="w-full px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
+          >
+            {exporting ? 'Exportiere...' : `${stats?.exportable_items || 0} Samples exportieren`}
+          </button>
+
+          {/* Cross-Link to Magic Help for TrOCR Fine-Tuning */}
+          {exportFormat === 'trocr' && (stats?.exportable_items || 0) > 0 && (
+            <Link
+              href="/ai/magic-help?source=ocr-labeling"
+              className="w-full mt-3 px-4 py-2 bg-purple-100 text-purple-700 border border-purple-300 rounded-lg hover:bg-purple-200 flex items-center justify-center gap-2 transition-colors"
+            >
+              <span>✨</span>
+              Mit Magic Help testen & fine-tunen
+            </Link>
+          )}
+        </div>
+      </div>
+
+      {exportResult && (
+        <div className="bg-white rounded-lg shadow p-6">
+          <h3 className="text-lg font-semibold mb-4">Export-Ergebnis</h3>
+          <div className="bg-green-50 border border-green-200 rounded-lg p-4 mb-4">
+            <p className="text-green-800">
+              {exportResult.exported_count} Samples erfolgreich exportiert
+            </p>
+            <p className="text-sm text-green-600">
+              Batch: {exportResult.batch_id}
+            </p>
+          </div>
+          <div className="bg-slate-50 p-4 rounded-lg overflow-auto max-h-64">
+            <pre className="text-xs">{JSON.stringify(exportResult.samples?.slice(0, 3), null, 2)}</pre>
+            {(exportResult.samples?.length || 0) > 3 && (
+              <p className="text-slate-500 mt-2">... und {(exportResult.samples?.length ?? 0) - 3} weitere</p>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
--- a/admin-lehrer/app/(admin)/ai/ocr-labeling/_components/LabelingTab.tsx
+++ b/admin-lehrer/app/(admin)/ai/ocr-labeling/_components/LabelingTab.tsx
@@ -0,0 +1,197 @@
+'use client'
+
+/**
+ * Labeling tab: image viewer, OCR text, correction input, and queue preview.
+ */
+
+import { API_BASE } from '../constants'
+import type { OCRItem } from '../types'
+
+interface LabelingTabProps {
+  queue: OCRItem[]
+  currentItem: OCRItem | null
+  currentIndex: number
+  correctedText: string
+  setCorrectedText: (text: string) => void
+  goToNext: () => void
+  goToPrev: () => void
+  selectQueueItem: (idx: number) => void
+  confirmItem: () => void
+  correctItem: () => void
+  skipItem: () => void
+}
+
+export function LabelingTab({
+  queue,
+  currentItem,
+  currentIndex,
+  correctedText,
+  setCorrectedText,
+  goToNext,
+  goToPrev,
+  selectQueueItem,
+  confirmItem,
+  correctItem,
+  skipItem,
+}: LabelingTabProps) {
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      {/* Left: Image Viewer */}
+      <div className="lg:col-span-2 bg-white rounded-lg shadow p-4">
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-lg font-semibold">Bild</h3>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={goToPrev}
+              disabled={currentIndex === 0}
+              className="p-2 rounded hover:bg-slate-100 disabled:opacity-50"
+              title="Zurueck (Pfeiltaste links)"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+              </svg>
+            </button>
+            <span className="text-sm text-slate-600">
+              {currentIndex + 1} / {queue.length}
+            </span>
+            <button
+              onClick={goToNext}
+              disabled={currentIndex >= queue.length - 1}
+              className="p-2 rounded hover:bg-slate-100 disabled:opacity-50"
+              title="Weiter (Pfeiltaste rechts)"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        {currentItem ? (
+          <div className="relative bg-slate-100 rounded-lg overflow-hidden" style={{ minHeight: '400px' }}>
+            <img
+              src={currentItem.image_url || `${API_BASE}${currentItem.image_path}`}
+              alt="OCR Bild"
+              className="w-full h-auto max-h-[600px] object-contain"
+              onError={(e) => {
+                const target = e.target as HTMLImageElement
+                target.style.display = 'none'
+              }}
+            />
+          </div>
+        ) : (
+          <div className="flex items-center justify-center h-64 bg-slate-100 rounded-lg">
+            <p className="text-slate-500">Keine Bilder in der Warteschlange</p>
+          </div>
+        )}
+      </div>
+
+      {/* Right: OCR Text & Actions */}
+      <div className="bg-white rounded-lg shadow p-4">
+        <div className="space-y-4">
+          {/* OCR Result */}
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <h3 className="text-lg font-semibold">OCR-Ergebnis</h3>
+              {currentItem?.ocr_confidence && (
+                <span className={`text-sm px-2 py-1 rounded ${
+                  currentItem.ocr_confidence > 0.8
+                    ? 'bg-green-100 text-green-800'
+                    : currentItem.ocr_confidence > 0.5
+                    ? 'bg-yellow-100 text-yellow-800'
+                    : 'bg-red-100 text-red-800'
+                }`}>
+                  {Math.round(currentItem.ocr_confidence * 100)}% Konfidenz
+                </span>
+              )}
+            </div>
+            <div className="bg-slate-50 p-3 rounded-lg min-h-[100px] text-sm">
+              {currentItem?.ocr_text || <span className="text-slate-400">Kein OCR-Text</span>}
+            </div>
+          </div>
+
+          {/* Correction Input */}
+          <div>
+            <h3 className="text-lg font-semibold mb-2">Korrektur</h3>
+            <textarea
+              value={correctedText}
+              onChange={(e) => setCorrectedText(e.target.value)}
+              placeholder="Korrigierter Text..."
+              className="w-full h-32 p-3 border border-slate-200 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+            />
+          </div>
+
+          {/* Actions */}
+          <div className="flex flex-col gap-2">
+            <button
+              onClick={confirmItem}
+              disabled={!currentItem}
+              className="w-full px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 flex items-center justify-center gap-2"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+              </svg>
+              Korrekt (Enter)
+            </button>
+            <button
+              onClick={correctItem}
+              disabled={!currentItem || !correctedText.trim() || correctedText === currentItem?.ocr_text}
+              className="w-full px-4 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50 flex items-center justify-center gap-2"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+              </svg>
+              Korrektur speichern
+            </button>
+            <button
+              onClick={skipItem}
+              disabled={!currentItem}
+              className="w-full px-4 py-2 bg-slate-200 text-slate-700 rounded-lg hover:bg-slate-300 disabled:opacity-50 flex items-center justify-center gap-2"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 5l7 7-7 7M5 5l7 7-7 7" />
+              </svg>
+              Ueberspringen (S)
+            </button>
+          </div>
+
+          {/* Keyboard Shortcuts */}
+          <div className="text-xs text-slate-500 mt-4">
+            <p className="font-medium mb-1">Tastaturkuerzel:</p>
+            <p>Enter = Bestaetigen | S = Ueberspringen</p>
+            <p>Pfeiltasten = Navigation</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom: Queue Preview */}
+      <div className="lg:col-span-3 bg-white rounded-lg shadow p-4">
+        <h3 className="text-lg font-semibold mb-4">Warteschlange ({queue.length} Items)</h3>
+        <div className="flex gap-2 overflow-x-auto pb-2">
+          {queue.slice(0, 10).map((item, idx) => (
+            <button
+              key={item.id}
+              onClick={() => selectQueueItem(idx)}
+              className={`flex-shrink-0 w-24 h-24 rounded-lg overflow-hidden border-2 ${
+                idx === currentIndex
+                  ? 'border-primary-500'
+                  : 'border-transparent hover:border-slate-300'
+              }`}
+            >
+              <img
+                src={item.image_url || `${API_BASE}${item.image_path}`}
+                alt=""
+                className="w-full h-full object-cover"
+              />
+            </button>
+          ))}
+          {queue.length > 10 && (
+            <div className="flex-shrink-0 w-24 h-24 rounded-lg bg-slate-100 flex items-center justify-center text-slate-500">
+              +{queue.length - 10} mehr
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/admin-lehrer/app/(admin)/ai/ocr-labeling/_components/SessionsTab.tsx
+++ b/admin-lehrer/app/(admin)/ai/ocr-labeling/_components/SessionsTab.tsx
@@ -0,0 +1,166 @@
+'use client'
+
+/**
+ * Sessions tab: create new sessions and list existing ones.
+ */
+
+import { useState } from 'react'
+import { API_BASE } from '../constants'
+import type { OCRSession, CreateSessionRequest, OCRModel } from '../types'
+
+interface SessionsTabProps {
+  sessions: OCRSession[]
+  selectedSession: string | null
+  setSelectedSession: (id: string | null) => void
+  fetchSessions: () => Promise<void>
+  setError: (error: string | null) => void
+}
+
+export function SessionsTab({
+  sessions,
+  selectedSession,
+  setSelectedSession,
+  fetchSessions,
+  setError,
+}: SessionsTabProps) {
+  const [newSession, setNewSession] = useState<CreateSessionRequest>({
+    name: '',
+    source_type: 'klausur',
+    description: '',
+    ocr_model: 'llama3.2-vision:11b',
+  })
+
+  const createSession = async () => {
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/ocr-label/sessions`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(newSession),
+      })
+
+      if (res.ok) {
+        setNewSession({ name: '', source_type: 'klausur', description: '', ocr_model: 'llama3.2-vision:11b' })
+        fetchSessions()
+      } else {
+        setError('Session erstellen fehlgeschlagen')
+      }
+    } catch {
+      setError('Netzwerkfehler')
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Create Session */}
+      <div className="bg-white rounded-lg shadow p-6">
+        <h3 className="text-lg font-semibold mb-4">Neue Session erstellen</h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Name</label>
+            <input
+              type="text"
+              value={newSession.name}
+              onChange={(e) => setNewSession(prev => ({ ...prev, name: e.target.value }))}
+              placeholder="z.B. Mathe Klausur Q1 2025"
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Typ</label>
+            <select
+              value={newSession.source_type}
+              onChange={(e) => setNewSession(prev => ({ ...prev, source_type: e.target.value as 'klausur' | 'handwriting_sample' | 'scan' }))}
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
+            >
+              <option value="klausur">Klausur</option>
+              <option value="handwriting_sample">Handschriftprobe</option>
+              <option value="scan">Scan</option>
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">OCR Modell</label>
+            <select
+              value={newSession.ocr_model}
+              onChange={(e) => setNewSession(prev => ({ ...prev, ocr_model: e.target.value as OCRModel }))}
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
+            >
+              <option value="llama3.2-vision:11b">llama3.2-vision:11b - Vision LLM (Standard)</option>
+              <option value="trocr">TrOCR - Microsoft Transformer (schnell)</option>
+              <option value="paddleocr">PaddleOCR + LLM (4x schneller)</option>
+              <option value="donut">Donut - Document Understanding (strukturiert)</option>
+            </select>
+            <p className="mt-1 text-xs text-slate-500">
+              {newSession.ocr_model === 'paddleocr' && 'PaddleOCR erkennt Text schnell, LLM strukturiert die Ergebnisse.'}
+              {newSession.ocr_model === 'donut' && 'Speziell fuer Dokumente mit Tabellen und Formularen.'}
+              {newSession.ocr_model === 'trocr' && 'Schnelles Transformer-Modell fuer gedruckten Text.'}
+              {newSession.ocr_model === 'llama3.2-vision:11b' && 'Beste Qualitaet bei Handschrift, aber langsamer.'}
+            </p>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Beschreibung</label>
+            <input
+              type="text"
+              value={newSession.description}
+              onChange={(e) => setNewSession(prev => ({ ...prev, description: e.target.value }))}
+              placeholder="Optional..."
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
+            />
+          </div>
+        </div>
+        <button
+          onClick={createSession}
+          disabled={!newSession.name}
+          className="mt-4 px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
+        >
+          Session erstellen
+        </button>
+      </div>
+
+      {/* Sessions List */}
+      <div className="bg-white rounded-lg shadow">
+        <div className="px-6 py-4 border-b border-slate-200">
+          <h3 className="text-lg font-semibold">Sessions ({sessions.length})</h3>
+        </div>
+        <div className="divide-y divide-slate-200">
+          {sessions.map((session) => (
+            <div
+              key={session.id}
+              className={`p-4 hover:bg-slate-50 cursor-pointer ${
+                selectedSession === session.id ? 'bg-primary-50 border-l-4 border-primary-500' : ''
+              }`}
+              onClick={() => setSelectedSession(session.id === selectedSession ? null : session.id)}
+            >
+              <div className="flex items-center justify-between">
+                <div>
+                  <h4 className="font-medium">{session.name}</h4>
+                  <p className="text-sm text-slate-500">
+                    {session.source_type} | {session.ocr_model}
+                  </p>
+                </div>
+                <div className="text-right">
+                  <p className="text-sm font-medium">
+                    {session.labeled_items}/{session.total_items} gelabelt
+                  </p>
+                  <div className="w-32 bg-slate-200 rounded-full h-2 mt-1">
+                    <div
+                      className="bg-primary-600 rounded-full h-2"
+                      style={{
+                        width: `${session.total_items > 0 ? (session.labeled_items / session.total_items) * 100 : 0}%`
+                      }}
+                    />
+                  </div>
+                </div>
+              </div>
+              {session.description && (
+                <p className="text-sm text-slate-600 mt-2">{session.description}</p>
+              )}
+            </div>
+          ))}
+          {sessions.length === 0 && (
+            <p className="p-4 text-slate-500 text-center">Keine Sessions vorhanden</p>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/admin-lehrer/app/(admin)/ai/ocr-labeling/_components/StatsTab.tsx
+++ b/admin-lehrer/app/(admin)/ai/ocr-labeling/_components/StatsTab.tsx
@@ -0,0 +1,76 @@
+'use client'
+
+/**
+ * Stats tab: global statistics, detailed breakdown, and progress bar.
+ */
+
+import type { OCRStats } from '../types'
+
+interface StatsTabProps {
+  stats: OCRStats | null
+}
+
+export function StatsTab({ stats }: StatsTabProps) {
+  return (
+    <div className="space-y-6">
+      {/* Global Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <div className="bg-white rounded-lg shadow p-6">
+          <h4 className="text-sm font-medium text-slate-500">Gesamt Items</h4>
+          <p className="text-3xl font-bold mt-2">{stats?.total_items || 0}</p>
+        </div>
+        <div className="bg-white rounded-lg shadow p-6">
+          <h4 className="text-sm font-medium text-slate-500">Gelabelt</h4>
+          <p className="text-3xl font-bold mt-2 text-green-600">{stats?.labeled_items || 0}</p>
+        </div>
+        <div className="bg-white rounded-lg shadow p-6">
+          <h4 className="text-sm font-medium text-slate-500">Ausstehend</h4>
+          <p className="text-3xl font-bold mt-2 text-yellow-600">{stats?.pending_items || 0}</p>
+        </div>
+        <div className="bg-white rounded-lg shadow p-6">
+          <h4 className="text-sm font-medium text-slate-500">OCR-Genauigkeit</h4>
+          <p className="text-3xl font-bold mt-2">{stats?.accuracy_rate || 0}%</p>
+        </div>
+      </div>
+
+      {/* Detailed Stats */}
+      <div className="bg-white rounded-lg shadow p-6">
+        <h3 className="text-lg font-semibold mb-4">Details</h3>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <div>
+            <p className="text-sm text-slate-500">Bestaetigt</p>
+            <p className="text-xl font-semibold text-green-600">{stats?.confirmed_items || 0}</p>
+          </div>
+          <div>
+            <p className="text-sm text-slate-500">Korrigiert</p>
+            <p className="text-xl font-semibold text-primary-600">{stats?.corrected_items || 0}</p>
+          </div>
+          <div>
+            <p className="text-sm text-slate-500">Exportierbar</p>
+            <p className="text-xl font-semibold">{stats?.exportable_items || 0}</p>
+          </div>
+          <div>
+            <p className="text-sm text-slate-500">Durchschn. Label-Zeit</p>
+            <p className="text-xl font-semibold">{stats?.avg_label_time_seconds || 0}s</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Progress Bar */}
+      {stats?.total_items ? (
+        <div className="bg-white rounded-lg shadow p-6">
+          <h3 className="text-lg font-semibold mb-4">Fortschritt</h3>
+          <div className="w-full bg-slate-200 rounded-full h-4">
+            <div
+              className="bg-primary-600 rounded-full h-4 transition-all"
+              style={{ width: `${(stats.labeled_items / stats.total_items) * 100}%` }}
+            />
+          </div>
+          <p className="text-sm text-slate-500 mt-2">
+            {Math.round((stats.labeled_items / stats.total_items) * 100)}% abgeschlossen
+          </p>
+        </div>
+      ) : null}
+    </div>
+  )
+}
--- a/admin-lehrer/app/(admin)/ai/ocr-labeling/_components/UploadTab.tsx
+++ b/admin-lehrer/app/(admin)/ai/ocr-labeling/_components/UploadTab.tsx
@@ -0,0 +1,160 @@
+'use client'
+
+/**
+ * Upload tab: session selection, drag-and-drop upload, and upload results.
+ */
+
+import { useState, useRef } from 'react'
+import { API_BASE } from '../constants'
+import type { OCRSession, UploadResult } from '../types'
+
+interface UploadTabProps {
+  sessions: OCRSession[]
+  selectedSession: string | null
+  setSelectedSession: (id: string | null) => void
+  fetchQueue: () => Promise<void>
+  fetchStats: () => Promise<void>
+  setError: (error: string | null) => void
+}
+
+export function UploadTab({
+  sessions,
+  selectedSession,
+  setSelectedSession,
+  fetchQueue,
+  fetchStats,
+  setError,
+}: UploadTabProps) {
+  const [uploading, setUploading] = useState(false)
+  const [uploadResults, setUploadResults] = useState<UploadResult[]>([])
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const handleUpload = async (files: FileList) => {
+    if (!selectedSession) {
+      setError('Bitte zuerst eine Session auswaehlen')
+      return
+    }
+
+    setUploading(true)
+    const formData = new FormData()
+    Array.from(files).forEach(file => formData.append('files', file))
+    formData.append('run_ocr', 'true')
+
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/ocr-label/sessions/${selectedSession}/upload`, {
+        method: 'POST',
+        body: formData,
+      })
+
+      if (res.ok) {
+        const data = await res.json()
+        setUploadResults(data.items || [])
+        fetchQueue()
+        fetchStats()
+      } else {
+        setError('Upload fehlgeschlagen')
+      }
+    } catch {
+      setError('Netzwerkfehler beim Upload')
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Session Selection */}
+      <div className="bg-white rounded-lg shadow p-6">
+        <h3 className="text-lg font-semibold mb-4">Session auswaehlen</h3>
+        <select
+          value={selectedSession || ''}
+          onChange={(e) => setSelectedSession(e.target.value || null)}
+          className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
+        >
+          <option value="">-- Session waehlen --</option>
+          {sessions.map((session) => (
+            <option key={session.id} value={session.id}>
+              {session.name} ({session.total_items} Items)
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* Upload Area */}
+      <div className="bg-white rounded-lg shadow p-6">
+        <h3 className="text-lg font-semibold mb-4">Bilder hochladen</h3>
+        <div
+          className={`border-2 border-dashed rounded-lg p-8 text-center ${
+            selectedSession ? 'border-slate-300 hover:border-primary-500' : 'border-slate-200 opacity-50'
+          }`}
+          onDragOver={(e) => {
+            e.preventDefault()
+            e.currentTarget.classList.add('border-primary-500', 'bg-primary-50')
+          }}
+          onDragLeave={(e) => {
+            e.currentTarget.classList.remove('border-primary-500', 'bg-primary-50')
+          }}
+          onDrop={(e) => {
+            e.preventDefault()
+            e.currentTarget.classList.remove('border-primary-500', 'bg-primary-50')
+            if (e.dataTransfer.files.length > 0) {
+              handleUpload(e.dataTransfer.files)
+            }
+          }}
+        >
+          <input
+            ref={fileInputRef}
+            type="file"
+            multiple
+            accept="image/png,image/jpeg,image/jpg"
+            onChange={(e) => e.target.files && handleUpload(e.target.files)}
+            className="hidden"
+            disabled={!selectedSession}
+          />
+          {uploading ? (
+            <div className="flex flex-col items-center gap-2">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600" />
+              <p>Hochladen & OCR ausfuehren...</p>
+            </div>
+          ) : (
+            <>
+              <svg className="w-12 h-12 text-slate-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+              </svg>
+              <p className="text-slate-600 mb-2">
+                Bilder hierher ziehen oder{' '}
+                <button
+                  onClick={() => fileInputRef.current?.click()}
+                  disabled={!selectedSession}
+                  className="text-primary-600 hover:underline"
+                >
+                  auswaehlen
+                </button>
+              </p>
+              <p className="text-sm text-slate-500">PNG, JPG (max. 10MB pro Bild)</p>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Upload Results */}
+      {uploadResults.length > 0 && (
+        <div className="bg-white rounded-lg shadow p-6">
+          <h3 className="text-lg font-semibold mb-4">Upload-Ergebnisse ({uploadResults.length})</h3>
+          <div className="space-y-2">
+            {uploadResults.map((result) => (
+              <div key={result.id} className="flex items-center justify-between p-2 bg-slate-50 rounded">
+                <span className="text-sm">{result.filename}</span>
+                <span className={`text-xs px-2 py-1 rounded ${
+                  result.ocr_text ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'
+                }`}>
+                  {result.ocr_text ? `OCR OK (${Math.round((result.ocr_confidence || 0) * 100)}%)` : 'Kein OCR'}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
--- a/admin-lehrer/app/(admin)/ai/ocr-labeling/constants.tsx
+++ b/admin-lehrer/app/(admin)/ai/ocr-labeling/constants.tsx
@@ -0,0 +1,59 @@
+/**
+ * Constants and tab definitions for OCR Labeling page.
+ */
+
+import type { JSX } from 'react'
+
+// API Base URL for klausur-service
+export const API_BASE = process.env.NEXT_PUBLIC_KLAUSUR_SERVICE_URL || 'http://localhost:8086'
+
+// Tab definitions
+export type TabId = 'labeling' | 'sessions' | 'upload' | 'stats' | 'export'
+
+export const tabs: { id: TabId; name: string; icon: JSX.Element }[] = [
+  {
+    id: 'labeling',
+    name: 'Labeling',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+      </svg>
+    ),
+  },
+  {
+    id: 'sessions',
+    name: 'Sessions',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+      </svg>
+    ),
+  },
+  {
+    id: 'upload',
+    name: 'Upload',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
+      </svg>
+    ),
+  },
+  {
+    id: 'stats',
+    name: 'Statistiken',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+      </svg>
+    ),
+  },
+  {
+    id: 'export',
+    name: 'Export',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+      </svg>
+    ),
+  },
+]
--- a/admin-lehrer/app/(admin)/ai/ocr-labeling/page.tsx
+++ b/admin-lehrer/app/(admin)/ai/ocr-labeling/page.tsx
@@ -10,903 +10,20 @@
 * OCR-Labeling → RAG Pipeline → Daten & RAG
 */

-import { useState, useEffect, useCallback, useRef } from 'react'
-import Link from 'next/link'
+import { useState } from 'react'
 import { PagePurpose } from '@/components/common/PagePurpose'
 import { AIModuleSidebarResponsive } from '@/components/ai/AIModuleSidebar'
-import type {
-  OCRSession,
-  OCRItem,
-  OCRStats,
-  TrainingSample,
-  CreateSessionRequest,
-  OCRModel,
-} from './types'
-
-// API Base URL for klausur-service
-const API_BASE = process.env.NEXT_PUBLIC_KLAUSUR_SERVICE_URL || 'http://localhost:8086'
-
-// Tab definitions
-type TabId = 'labeling' | 'sessions' | 'upload' | 'stats' | 'export'
-
-const tabs: { id: TabId; name: string; icon: JSX.Element }[] = [
-  {
-    id: 'labeling',
-    name: 'Labeling',
-    icon: (
-      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
-      </svg>
-    ),
-  },
-  {
-    id: 'sessions',
-    name: 'Sessions',
-    icon: (
-      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
-      </svg>
-    ),
-  },
-  {
-    id: 'upload',
-    name: 'Upload',
-    icon: (
-      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
-      </svg>
-    ),
-  },
-  {
-    id: 'stats',
-    name: 'Statistiken',
-    icon: (
-      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
-      </svg>
-    ),
-  },
-  {
-    id: 'export',
-    name: 'Export',
-    icon: (
-      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-      </svg>
-    ),
-  },
-]
+import { tabs, type TabId } from './constants'
+import { useOcrLabeling } from './useOcrLabeling'
+import { LabelingTab } from './_components/LabelingTab'
+import { SessionsTab } from './_components/SessionsTab'
+import { UploadTab } from './_components/UploadTab'
+import { StatsTab } from './_components/StatsTab'
+import { ExportTab } from './_components/ExportTab'

 export default function OCRLabelingPage() {
  const [activeTab, setActiveTab] = useState<TabId>('labeling')
-  const [sessions, setSessions] = useState<OCRSession[]>([])
-  const [selectedSession, setSelectedSession] = useState<string | null>(null)
-  const [queue, setQueue] = useState<OCRItem[]>([])
-  const [currentItem, setCurrentItem] = useState<OCRItem | null>(null)
-  const [currentIndex, setCurrentIndex] = useState(0)
-  const [stats, setStats] = useState<OCRStats | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-  const [correctedText, setCorrectedText] = useState('')
-  const [labelStartTime, setLabelStartTime] = useState<number | null>(null)
-
-  // Fetch sessions
-  const fetchSessions = useCallback(async () => {
-    try {
-      const res = await fetch(`${API_BASE}/api/v1/ocr-label/sessions`)
-      if (res.ok) {
-        const data = await res.json()
-        setSessions(data)
-      }
-    } catch (err) {
-      console.error('Failed to fetch sessions:', err)
-    }
-  }, [])
-
-  // Fetch queue
-  const fetchQueue = useCallback(async () => {
-    try {
-      const url = selectedSession
-        ? `${API_BASE}/api/v1/ocr-label/queue?session_id=${selectedSession}&limit=20`
-        : `${API_BASE}/api/v1/ocr-label/queue?limit=20`
-      const res = await fetch(url)
-      if (res.ok) {
-        const data = await res.json()
-        setQueue(data)
-        if (data.length > 0 && !currentItem) {
-          setCurrentItem(data[0])
-          setCurrentIndex(0)
-          setCorrectedText(data[0].ocr_text || '')
-          setLabelStartTime(Date.now())
-        }
-      }
-    } catch (err) {
-      console.error('Failed to fetch queue:', err)
-    }
-  }, [selectedSession, currentItem])
-
-  // Fetch stats
-  const fetchStats = useCallback(async () => {
-    try {
-      const url = selectedSession
-        ? `${API_BASE}/api/v1/ocr-label/stats?session_id=${selectedSession}`
-        : `${API_BASE}/api/v1/ocr-label/stats`
-      const res = await fetch(url)
-      if (res.ok) {
-        const data = await res.json()
-        setStats(data)
-      }
-    } catch (err) {
-      console.error('Failed to fetch stats:', err)
-    }
-  }, [selectedSession])
-
-  // Initial data load
-  useEffect(() => {
-    const loadData = async () => {
-      setLoading(true)
-      await Promise.all([fetchSessions(), fetchQueue(), fetchStats()])
-      setLoading(false)
-    }
-    loadData()
-  }, [fetchSessions, fetchQueue, fetchStats])
-
-  // Refresh queue when session changes
-  useEffect(() => {
-    setCurrentItem(null)
-    setCurrentIndex(0)
-    fetchQueue()
-    fetchStats()
-  }, [selectedSession, fetchQueue, fetchStats])
-
-  // Navigate to next item
-  const goToNext = () => {
-    if (currentIndex < queue.length - 1) {
-      const nextIndex = currentIndex + 1
-      setCurrentIndex(nextIndex)
-      setCurrentItem(queue[nextIndex])
-      setCorrectedText(queue[nextIndex].ocr_text || '')
-      setLabelStartTime(Date.now())
-    } else {
-      // Refresh queue
-      fetchQueue()
-    }
-  }
-
-  // Navigate to previous item
-  const goToPrev = () => {
-    if (currentIndex > 0) {
-      const prevIndex = currentIndex - 1
-      setCurrentIndex(prevIndex)
-      setCurrentItem(queue[prevIndex])
-      setCorrectedText(queue[prevIndex].ocr_text || '')
-      setLabelStartTime(Date.now())
-    }
-  }
-
-  // Calculate label time
-  const getLabelTime = (): number | undefined => {
-    if (!labelStartTime) return undefined
-    return Math.round((Date.now() - labelStartTime) / 1000)
-  }
-
-  // Confirm item
-  const confirmItem = async () => {
-    if (!currentItem) return
-
-    try {
-      const res = await fetch(`${API_BASE}/api/v1/ocr-label/confirm`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          item_id: currentItem.id,
-          label_time_seconds: getLabelTime(),
-        }),
-      })
-
-      if (res.ok) {
-        // Remove from queue and go to next
-        setQueue(prev => prev.filter(item => item.id !== currentItem.id))
-        goToNext()
-        fetchStats()
-      } else {
-        setError('Bestaetigung fehlgeschlagen')
-      }
-    } catch (err) {
-      setError('Netzwerkfehler')
-    }
-  }
-
-  // Correct item
-  const correctItem = async () => {
-    if (!currentItem || !correctedText.trim()) return
-
-    try {
-      const res = await fetch(`${API_BASE}/api/v1/ocr-label/correct`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          item_id: currentItem.id,
-          ground_truth: correctedText.trim(),
-          label_time_seconds: getLabelTime(),
-        }),
-      })
-
-      if (res.ok) {
-        setQueue(prev => prev.filter(item => item.id !== currentItem.id))
-        goToNext()
-        fetchStats()
-      } else {
-        setError('Korrektur fehlgeschlagen')
-      }
-    } catch (err) {
-      setError('Netzwerkfehler')
-    }
-  }
-
-  // Skip item
-  const skipItem = async () => {
-    if (!currentItem) return
-
-    try {
-      const res = await fetch(`${API_BASE}/api/v1/ocr-label/skip`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ item_id: currentItem.id }),
-      })
-
-      if (res.ok) {
-        setQueue(prev => prev.filter(item => item.id !== currentItem.id))
-        goToNext()
-        fetchStats()
-      } else {
-        setError('Ueberspringen fehlgeschlagen')
-      }
-    } catch (err) {
-      setError('Netzwerkfehler')
-    }
-  }
-
-  // Keyboard shortcuts
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      // Only handle if not in text input
-      if (e.target instanceof HTMLTextAreaElement) return
-
-      if (e.key === 'Enter' && !e.shiftKey) {
-        e.preventDefault()
-        confirmItem()
-      } else if (e.key === 'ArrowRight') {
-        goToNext()
-      } else if (e.key === 'ArrowLeft') {
-        goToPrev()
-      } else if (e.key === 's' && !e.ctrlKey && !e.metaKey) {
-        skipItem()
-      }
-    }
-
-    window.addEventListener('keydown', handleKeyDown)
-    return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [currentItem, correctedText])
-
-  // Render Labeling Tab
-  const renderLabelingTab = () => (
-    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-      {/* Left: Image Viewer */}
-      <div className="lg:col-span-2 bg-white rounded-lg shadow p-4">
-        <div className="flex items-center justify-between mb-4">
-          <h3 className="text-lg font-semibold">Bild</h3>
-          <div className="flex items-center gap-2">
-            <button
-              onClick={goToPrev}
-              disabled={currentIndex === 0}
-              className="p-2 rounded hover:bg-slate-100 disabled:opacity-50"
-              title="Zurueck (Pfeiltaste links)"
-            >
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-              </svg>
-            </button>
-            <span className="text-sm text-slate-600">
-              {currentIndex + 1} / {queue.length}
-            </span>
-            <button
-              onClick={goToNext}
-              disabled={currentIndex >= queue.length - 1}
-              className="p-2 rounded hover:bg-slate-100 disabled:opacity-50"
-              title="Weiter (Pfeiltaste rechts)"
-            >
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-              </svg>
-            </button>
-          </div>
-        </div>
-
-        {currentItem ? (
-          <div className="relative bg-slate-100 rounded-lg overflow-hidden" style={{ minHeight: '400px' }}>
-            <img
-              src={currentItem.image_url || `${API_BASE}${currentItem.image_path}`}
-              alt="OCR Bild"
-              className="w-full h-auto max-h-[600px] object-contain"
-              onError={(e) => {
-                // Fallback if image fails to load
-                const target = e.target as HTMLImageElement
-                target.style.display = 'none'
-              }}
-            />
-          </div>
-        ) : (
-          <div className="flex items-center justify-center h-64 bg-slate-100 rounded-lg">
-            <p className="text-slate-500">Keine Bilder in der Warteschlange</p>
-          </div>
-        )}
-      </div>
-
-      {/* Right: OCR Text & Actions */}
-      <div className="bg-white rounded-lg shadow p-4">
-        <div className="space-y-4">
-          {/* OCR Result */}
-          <div>
-            <div className="flex items-center justify-between mb-2">
-              <h3 className="text-lg font-semibold">OCR-Ergebnis</h3>
-              {currentItem?.ocr_confidence && (
-                <span className={`text-sm px-2 py-1 rounded ${
-                  currentItem.ocr_confidence > 0.8
-                    ? 'bg-green-100 text-green-800'
-                    : currentItem.ocr_confidence > 0.5
-                    ? 'bg-yellow-100 text-yellow-800'
-                    : 'bg-red-100 text-red-800'
-                }`}>
-                  {Math.round(currentItem.ocr_confidence * 100)}% Konfidenz
-                </span>
-              )}
-            </div>
-            <div className="bg-slate-50 p-3 rounded-lg min-h-[100px] text-sm">
-              {currentItem?.ocr_text || <span className="text-slate-400">Kein OCR-Text</span>}
-            </div>
-          </div>
-
-          {/* Correction Input */}
-          <div>
-            <h3 className="text-lg font-semibold mb-2">Korrektur</h3>
-            <textarea
-              value={correctedText}
-              onChange={(e) => setCorrectedText(e.target.value)}
-              placeholder="Korrigierter Text..."
-              className="w-full h-32 p-3 border border-slate-200 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
-            />
-          </div>
-
-          {/* Actions */}
-          <div className="flex flex-col gap-2">
-            <button
-              onClick={confirmItem}
-              disabled={!currentItem}
-              className="w-full px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 flex items-center justify-center gap-2"
-            >
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-              </svg>
-              Korrekt (Enter)
-            </button>
-            <button
-              onClick={correctItem}
-              disabled={!currentItem || !correctedText.trim() || correctedText === currentItem?.ocr_text}
-              className="w-full px-4 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50 flex items-center justify-center gap-2"
-            >
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
-              </svg>
-              Korrektur speichern
-            </button>
-            <button
-              onClick={skipItem}
-              disabled={!currentItem}
-              className="w-full px-4 py-2 bg-slate-200 text-slate-700 rounded-lg hover:bg-slate-300 disabled:opacity-50 flex items-center justify-center gap-2"
-            >
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 5l7 7-7 7M5 5l7 7-7 7" />
-              </svg>
-              Ueberspringen (S)
-            </button>
-          </div>
-
-          {/* Keyboard Shortcuts */}
-          <div className="text-xs text-slate-500 mt-4">
-            <p className="font-medium mb-1">Tastaturkuerzel:</p>
-            <p>Enter = Bestaetigen | S = Ueberspringen</p>
-            <p>Pfeiltasten = Navigation</p>
-          </div>
-        </div>
-      </div>
-
-      {/* Bottom: Queue Preview */}
-      <div className="lg:col-span-3 bg-white rounded-lg shadow p-4">
-        <h3 className="text-lg font-semibold mb-4">Warteschlange ({queue.length} Items)</h3>
-        <div className="flex gap-2 overflow-x-auto pb-2">
-          {queue.slice(0, 10).map((item, idx) => (
-            <button
-              key={item.id}
-              onClick={() => {
-                setCurrentIndex(idx)
-                setCurrentItem(item)
-                setCorrectedText(item.ocr_text || '')
-                setLabelStartTime(Date.now())
-              }}
-              className={`flex-shrink-0 w-24 h-24 rounded-lg overflow-hidden border-2 ${
-                idx === currentIndex
-                  ? 'border-primary-500'
-                  : 'border-transparent hover:border-slate-300'
-              }`}
-            >
-              <img
-                src={item.image_url || `${API_BASE}${item.image_path}`}
-                alt=""
-                className="w-full h-full object-cover"
-              />
-            </button>
-          ))}
-          {queue.length > 10 && (
-            <div className="flex-shrink-0 w-24 h-24 rounded-lg bg-slate-100 flex items-center justify-center text-slate-500">
-              +{queue.length - 10} mehr
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-
-  // Render Sessions Tab
-  const renderSessionsTab = () => {
-    const [newSession, setNewSession] = useState<CreateSessionRequest>({
-      name: '',
-      source_type: 'klausur',
-      description: '',
-      ocr_model: 'llama3.2-vision:11b',
-    })
-
-    const createSession = async () => {
-      try {
-        const res = await fetch(`${API_BASE}/api/v1/ocr-label/sessions`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(newSession),
-        })
-
-        if (res.ok) {
-          setNewSession({ name: '', source_type: 'klausur', description: '', ocr_model: 'llama3.2-vision:11b' })
-          fetchSessions()
-        } else {
-          setError('Session erstellen fehlgeschlagen')
-        }
-      } catch (err) {
-        setError('Netzwerkfehler')
-      }
-    }
-
-    return (
-      <div className="space-y-6">
-        {/* Create Session */}
-        <div className="bg-white rounded-lg shadow p-6">
-          <h3 className="text-lg font-semibold mb-4">Neue Session erstellen</h3>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-slate-700 mb-1">Name</label>
-              <input
-                type="text"
-                value={newSession.name}
-                onChange={(e) => setNewSession(prev => ({ ...prev, name: e.target.value }))}
-                placeholder="z.B. Mathe Klausur Q1 2025"
-                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-slate-700 mb-1">Typ</label>
-              <select
-                value={newSession.source_type}
-                onChange={(e) => setNewSession(prev => ({ ...prev, source_type: e.target.value as 'klausur' | 'handwriting_sample' | 'scan' }))}
-                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
-              >
-                <option value="klausur">Klausur</option>
-                <option value="handwriting_sample">Handschriftprobe</option>
-                <option value="scan">Scan</option>
-              </select>
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-slate-700 mb-1">OCR Modell</label>
-              <select
-                value={newSession.ocr_model}
-                onChange={(e) => setNewSession(prev => ({ ...prev, ocr_model: e.target.value as OCRModel }))}
-                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
-              >
-                <option value="llama3.2-vision:11b">llama3.2-vision:11b - Vision LLM (Standard)</option>
-                <option value="trocr">TrOCR - Microsoft Transformer (schnell)</option>
-                <option value="paddleocr">PaddleOCR + LLM (4x schneller)</option>
-                <option value="donut">Donut - Document Understanding (strukturiert)</option>
-              </select>
-              <p className="mt-1 text-xs text-slate-500">
-                {newSession.ocr_model === 'paddleocr' && 'PaddleOCR erkennt Text schnell, LLM strukturiert die Ergebnisse.'}
-                {newSession.ocr_model === 'donut' && 'Speziell fuer Dokumente mit Tabellen und Formularen.'}
-                {newSession.ocr_model === 'trocr' && 'Schnelles Transformer-Modell fuer gedruckten Text.'}
-                {newSession.ocr_model === 'llama3.2-vision:11b' && 'Beste Qualitaet bei Handschrift, aber langsamer.'}
-              </p>
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-slate-700 mb-1">Beschreibung</label>
-              <input
-                type="text"
-                value={newSession.description}
-                onChange={(e) => setNewSession(prev => ({ ...prev, description: e.target.value }))}
-                placeholder="Optional..."
-                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
-              />
-            </div>
-          </div>
-          <button
-            onClick={createSession}
-            disabled={!newSession.name}
-            className="mt-4 px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
-          >
-            Session erstellen
-          </button>
-        </div>
-
-        {/* Sessions List */}
-        <div className="bg-white rounded-lg shadow">
-          <div className="px-6 py-4 border-b border-slate-200">
-            <h3 className="text-lg font-semibold">Sessions ({sessions.length})</h3>
-          </div>
-          <div className="divide-y divide-slate-200">
-            {sessions.map((session) => (
-              <div
-                key={session.id}
-                className={`p-4 hover:bg-slate-50 cursor-pointer ${
-                  selectedSession === session.id ? 'bg-primary-50 border-l-4 border-primary-500' : ''
-                }`}
-                onClick={() => setSelectedSession(session.id === selectedSession ? null : session.id)}
-              >
-                <div className="flex items-center justify-between">
-                  <div>
-                    <h4 className="font-medium">{session.name}</h4>
-                    <p className="text-sm text-slate-500">
-                      {session.source_type} | {session.ocr_model}
-                    </p>
-                  </div>
-                  <div className="text-right">
-                    <p className="text-sm font-medium">
-                      {session.labeled_items}/{session.total_items} gelabelt
-                    </p>
-                    <div className="w-32 bg-slate-200 rounded-full h-2 mt-1">
-                      <div
-                        className="bg-primary-600 rounded-full h-2"
-                        style={{
-                          width: `${session.total_items > 0 ? (session.labeled_items / session.total_items) * 100 : 0}%`
-                        }}
-                      />
-                    </div>
-                  </div>
-                </div>
-                {session.description && (
-                  <p className="text-sm text-slate-600 mt-2">{session.description}</p>
-                )}
-              </div>
-            ))}
-            {sessions.length === 0 && (
-              <p className="p-4 text-slate-500 text-center">Keine Sessions vorhanden</p>
-            )}
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  // Render Upload Tab
-  const renderUploadTab = () => {
-    const [uploading, setUploading] = useState(false)
-    const [uploadResults, setUploadResults] = useState<any[]>([])
-    const fileInputRef = useRef<HTMLInputElement>(null)
-
-    const handleUpload = async (files: FileList) => {
-      if (!selectedSession) {
-        setError('Bitte zuerst eine Session auswaehlen')
-        return
-      }
-
-      setUploading(true)
-      const formData = new FormData()
-      Array.from(files).forEach(file => formData.append('files', file))
-      formData.append('run_ocr', 'true')
-
-      try {
-        const res = await fetch(`${API_BASE}/api/v1/ocr-label/sessions/${selectedSession}/upload`, {
-          method: 'POST',
-          body: formData,
-        })
-
-        if (res.ok) {
-          const data = await res.json()
-          setUploadResults(data.items || [])
-          fetchQueue()
-          fetchStats()
-        } else {
-          setError('Upload fehlgeschlagen')
-        }
-      } catch (err) {
-        setError('Netzwerkfehler beim Upload')
-      } finally {
-        setUploading(false)
-      }
-    }
-
-    return (
-      <div className="space-y-6">
-        {/* Session Selection */}
-        <div className="bg-white rounded-lg shadow p-6">
-          <h3 className="text-lg font-semibold mb-4">Session auswaehlen</h3>
-          <select
-            value={selectedSession || ''}
-            onChange={(e) => setSelectedSession(e.target.value || null)}
-            className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
-          >
-            <option value="">-- Session waehlen --</option>
-            {sessions.map((session) => (
-              <option key={session.id} value={session.id}>
-                {session.name} ({session.total_items} Items)
-              </option>
-            ))}
-          </select>
-        </div>
-
-        {/* Upload Area */}
-        <div className="bg-white rounded-lg shadow p-6">
-          <h3 className="text-lg font-semibold mb-4">Bilder hochladen</h3>
-          <div
-            className={`border-2 border-dashed rounded-lg p-8 text-center ${
-              selectedSession ? 'border-slate-300 hover:border-primary-500' : 'border-slate-200 opacity-50'
-            }`}
-            onDragOver={(e) => {
-              e.preventDefault()
-              e.currentTarget.classList.add('border-primary-500', 'bg-primary-50')
-            }}
-            onDragLeave={(e) => {
-              e.currentTarget.classList.remove('border-primary-500', 'bg-primary-50')
-            }}
-            onDrop={(e) => {
-              e.preventDefault()
-              e.currentTarget.classList.remove('border-primary-500', 'bg-primary-50')
-              if (e.dataTransfer.files.length > 0) {
-                handleUpload(e.dataTransfer.files)
-              }
-            }}
-          >
-            <input
-              ref={fileInputRef}
-              type="file"
-              multiple
-              accept="image/png,image/jpeg,image/jpg"
-              onChange={(e) => e.target.files && handleUpload(e.target.files)}
-              className="hidden"
-              disabled={!selectedSession}
-            />
-            {uploading ? (
-              <div className="flex flex-col items-center gap-2">
-                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600" />
-                <p>Hochladen & OCR ausfuehren...</p>
-              </div>
-            ) : (
-              <>
-                <svg className="w-12 h-12 text-slate-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                </svg>
-                <p className="text-slate-600 mb-2">
-                  Bilder hierher ziehen oder{' '}
-                  <button
-                    onClick={() => fileInputRef.current?.click()}
-                    disabled={!selectedSession}
-                    className="text-primary-600 hover:underline"
-                  >
-                    auswaehlen
-                  </button>
-                </p>
-                <p className="text-sm text-slate-500">PNG, JPG (max. 10MB pro Bild)</p>
-              </>
-            )}
-          </div>
-        </div>
-
-        {/* Upload Results */}
-        {uploadResults.length > 0 && (
-          <div className="bg-white rounded-lg shadow p-6">
-            <h3 className="text-lg font-semibold mb-4">Upload-Ergebnisse ({uploadResults.length})</h3>
-            <div className="space-y-2">
-              {uploadResults.map((result) => (
-                <div key={result.id} className="flex items-center justify-between p-2 bg-slate-50 rounded">
-                  <span className="text-sm">{result.filename}</span>
-                  <span className={`text-xs px-2 py-1 rounded ${
-                    result.ocr_text ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'
-                  }`}>
-                    {result.ocr_text ? `OCR OK (${Math.round((result.ocr_confidence || 0) * 100)}%)` : 'Kein OCR'}
-                  </span>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-    )
-  }
-
-  // Render Stats Tab
-  const renderStatsTab = () => (
-    <div className="space-y-6">
-      {/* Global Stats */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <div className="bg-white rounded-lg shadow p-6">
-          <h4 className="text-sm font-medium text-slate-500">Gesamt Items</h4>
-          <p className="text-3xl font-bold mt-2">{stats?.total_items || 0}</p>
-        </div>
-        <div className="bg-white rounded-lg shadow p-6">
-          <h4 className="text-sm font-medium text-slate-500">Gelabelt</h4>
-          <p className="text-3xl font-bold mt-2 text-green-600">{stats?.labeled_items || 0}</p>
-        </div>
-        <div className="bg-white rounded-lg shadow p-6">
-          <h4 className="text-sm font-medium text-slate-500">Ausstehend</h4>
-          <p className="text-3xl font-bold mt-2 text-yellow-600">{stats?.pending_items || 0}</p>
-        </div>
-        <div className="bg-white rounded-lg shadow p-6">
-          <h4 className="text-sm font-medium text-slate-500">OCR-Genauigkeit</h4>
-          <p className="text-3xl font-bold mt-2">{stats?.accuracy_rate || 0}%</p>
-        </div>
-      </div>
-
-      {/* Detailed Stats */}
-      <div className="bg-white rounded-lg shadow p-6">
-        <h3 className="text-lg font-semibold mb-4">Details</h3>
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <div>
-            <p className="text-sm text-slate-500">Bestaetigt</p>
-            <p className="text-xl font-semibold text-green-600">{stats?.confirmed_items || 0}</p>
-          </div>
-          <div>
-            <p className="text-sm text-slate-500">Korrigiert</p>
-            <p className="text-xl font-semibold text-primary-600">{stats?.corrected_items || 0}</p>
-          </div>
-          <div>
-            <p className="text-sm text-slate-500">Exportierbar</p>
-            <p className="text-xl font-semibold">{stats?.exportable_items || 0}</p>
-          </div>
-          <div>
-            <p className="text-sm text-slate-500">Durchschn. Label-Zeit</p>
-            <p className="text-xl font-semibold">{stats?.avg_label_time_seconds || 0}s</p>
-          </div>
-        </div>
-      </div>
-
-      {/* Progress Bar */}
-      {stats?.total_items ? (
-        <div className="bg-white rounded-lg shadow p-6">
-          <h3 className="text-lg font-semibold mb-4">Fortschritt</h3>
-          <div className="w-full bg-slate-200 rounded-full h-4">
-            <div
-              className="bg-primary-600 rounded-full h-4 transition-all"
-              style={{ width: `${(stats.labeled_items / stats.total_items) * 100}%` }}
-            />
-          </div>
-          <p className="text-sm text-slate-500 mt-2">
-            {Math.round((stats.labeled_items / stats.total_items) * 100)}% abgeschlossen
-          </p>
-        </div>
-      ) : null}
-    </div>
-  )
-
-  // Render Export Tab
-  const renderExportTab = () => {
-    const [exportFormat, setExportFormat] = useState<'generic' | 'trocr' | 'llama_vision'>('generic')
-    const [exporting, setExporting] = useState(false)
-    const [exportResult, setExportResult] = useState<any>(null)
-
-    const handleExport = async () => {
-      setExporting(true)
-      try {
-        const res = await fetch(`${API_BASE}/api/v1/ocr-label/export`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            export_format: exportFormat,
-            session_id: selectedSession,
-          }),
-        })
-
-        if (res.ok) {
-          const data = await res.json()
-          setExportResult(data)
-        } else {
-          setError('Export fehlgeschlagen')
-        }
-      } catch (err) {
-        setError('Netzwerkfehler')
-      } finally {
-        setExporting(false)
-      }
-    }
-
-    return (
-      <div className="space-y-6">
-        <div className="bg-white rounded-lg shadow p-6">
-          <h3 className="text-lg font-semibold mb-4">Training-Daten exportieren</h3>
-          <div className="space-y-4">
-            <div>
-              <label className="block text-sm font-medium text-slate-700 mb-1">Export-Format</label>
-              <select
-                value={exportFormat}
-                onChange={(e) => setExportFormat(e.target.value as typeof exportFormat)}
-                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
-              >
-                <option value="generic">Generic JSON</option>
-                <option value="trocr">TrOCR Fine-Tuning</option>
-                <option value="llama_vision">Llama Vision Fine-Tuning</option>
-              </select>
-            </div>
-
-            <div>
-              <label className="block text-sm font-medium text-slate-700 mb-1">Session (optional)</label>
-              <select
-                value={selectedSession || ''}
-                onChange={(e) => setSelectedSession(e.target.value || null)}
-                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
-              >
-                <option value="">Alle Sessions</option>
-                {sessions.map((session) => (
-                  <option key={session.id} value={session.id}>{session.name}</option>
-                ))}
-              </select>
-            </div>
-
-            <button
-              onClick={handleExport}
-              disabled={exporting || (stats?.exportable_items || 0) === 0}
-              className="w-full px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
-            >
-              {exporting ? 'Exportiere...' : `${stats?.exportable_items || 0} Samples exportieren`}
-            </button>
-
-            {/* Cross-Link to Magic Help for TrOCR Fine-Tuning */}
-            {exportFormat === 'trocr' && (stats?.exportable_items || 0) > 0 && (
-              <Link
-                href="/ai/magic-help?source=ocr-labeling"
-                className="w-full mt-3 px-4 py-2 bg-purple-100 text-purple-700 border border-purple-300 rounded-lg hover:bg-purple-200 flex items-center justify-center gap-2 transition-colors"
-              >
-                <span>✨</span>
-                Mit Magic Help testen & fine-tunen
-              </Link>
-            )}
-          </div>
-        </div>
-
-        {exportResult && (
-          <div className="bg-white rounded-lg shadow p-6">
-            <h3 className="text-lg font-semibold mb-4">Export-Ergebnis</h3>
-            <div className="bg-green-50 border border-green-200 rounded-lg p-4 mb-4">
-              <p className="text-green-800">
-                {exportResult.exported_count} Samples erfolgreich exportiert
-              </p>
-              <p className="text-sm text-green-600">
-                Batch: {exportResult.batch_id}
-              </p>
-            </div>
-            <div className="bg-slate-50 p-4 rounded-lg overflow-auto max-h-64">
-              <pre className="text-xs">{JSON.stringify(exportResult.samples?.slice(0, 3), null, 2)}</pre>
-              {(exportResult.samples?.length || 0) > 3 && (
-                <p className="text-slate-500 mt-2">... und {exportResult.samples.length - 3} weitere</p>
-              )}
-            </div>
-          </div>
-        )}
-      </div>
-    )
-  }
+  const hook = useOcrLabeling()

  return (
    <div className="p-6">
@@ -939,10 +56,10 @@ export default function OCRLabelingPage() {
      <AIModuleSidebarResponsive currentModule="ocr-labeling" />

      {/* Error Toast */}
-      {error && (
+      {hook.error && (
        <div className="fixed top-4 right-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded z-50">
-          <span>{error}</span>
-          <button onClick={() => setError(null)} className="ml-4">X</button>
+          <span>{hook.error}</span>
+          <button onClick={() => hook.setError(null)} className="ml-4">X</button>
        </div>
      )}

@@ -969,17 +86,58 @@ export default function OCRLabelingPage() {
      </div>

      {/* Tab Content */}
-      {loading ? (
+      {hook.loading ? (
        <div className="flex items-center justify-center h-64">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600" />
        </div>
      ) : (
        <>
-          {activeTab === 'labeling' && renderLabelingTab()}
-          {activeTab === 'sessions' && renderSessionsTab()}
-          {activeTab === 'upload' && renderUploadTab()}
-          {activeTab === 'stats' && renderStatsTab()}
-          {activeTab === 'export' && renderExportTab()}
+          {activeTab === 'labeling' && (
+            <LabelingTab
+              queue={hook.queue}
+              currentItem={hook.currentItem}
+              currentIndex={hook.currentIndex}
+              correctedText={hook.correctedText}
+              setCorrectedText={hook.setCorrectedText}
+              goToNext={hook.goToNext}
+              goToPrev={hook.goToPrev}
+              selectQueueItem={hook.selectQueueItem}
+              confirmItem={hook.confirmItem}
+              correctItem={hook.correctItem}
+              skipItem={hook.skipItem}
+            />
+          )}
+          {activeTab === 'sessions' && (
+            <SessionsTab
+              sessions={hook.sessions}
+              selectedSession={hook.selectedSession}
+              setSelectedSession={hook.setSelectedSession}
+              fetchSessions={hook.fetchSessions}
+              setError={hook.setError}
+            />
+          )}
+          {activeTab === 'upload' && (
+            <UploadTab
+              sessions={hook.sessions}
+              selectedSession={hook.selectedSession}
+              setSelectedSession={hook.setSelectedSession}
+              fetchQueue={hook.fetchQueue}
+              fetchStats={hook.fetchStats}
+              setError={hook.setError}
+            />
+          )}
+          {activeTab === 'stats' && (
+            <StatsTab stats={hook.stats} />
+          )}
+          {activeTab === 'export' && (
+            <ExportTab
+              sessions={hook.sessions}
+              selectedSession={hook.selectedSession}
+              setSelectedSession={hook.setSelectedSession}
+              stats={hook.stats}
+              setError={hook.setError}
+            />
+          )}
        </>
      )}
    </div>
--- a/admin-lehrer/app/(admin)/ai/ocr-labeling/useOcrLabeling.ts
+++ b/admin-lehrer/app/(admin)/ai/ocr-labeling/useOcrLabeling.ts
@@ -0,0 +1,255 @@
+'use client'
+
+/**
+ * Custom hook encapsulating all state and API logic for the OCR Labeling page.
+ */
+
+import { useState, useEffect, useCallback } from 'react'
+import { API_BASE } from './constants'
+import type { OCRSession, OCRItem, OCRStats } from './types'
+
+export function useOcrLabeling() {
+  const [sessions, setSessions] = useState<OCRSession[]>([])
+  const [selectedSession, setSelectedSession] = useState<string | null>(null)
+  const [queue, setQueue] = useState<OCRItem[]>([])
+  const [currentItem, setCurrentItem] = useState<OCRItem | null>(null)
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const [stats, setStats] = useState<OCRStats | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [correctedText, setCorrectedText] = useState('')
+  const [labelStartTime, setLabelStartTime] = useState<number | null>(null)
+
+  // Fetch sessions
+  const fetchSessions = useCallback(async () => {
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/ocr-label/sessions`)
+      if (res.ok) {
+        const data = await res.json()
+        setSessions(data)
+      }
+    } catch (err) {
+      console.error('Failed to fetch sessions:', err)
+    }
+  }, [])
+
+  // Fetch queue
+  const fetchQueue = useCallback(async () => {
+    try {
+      const url = selectedSession
+        ? `${API_BASE}/api/v1/ocr-label/queue?session_id=${selectedSession}&limit=20`
+        : `${API_BASE}/api/v1/ocr-label/queue?limit=20`
+      const res = await fetch(url)
+      if (res.ok) {
+        const data = await res.json()
+        setQueue(data)
+        if (data.length > 0 && !currentItem) {
+          setCurrentItem(data[0])
+          setCurrentIndex(0)
+          setCorrectedText(data[0].ocr_text || '')
+          setLabelStartTime(Date.now())
+        }
+      }
+    } catch (err) {
+      console.error('Failed to fetch queue:', err)
+    }
+  }, [selectedSession, currentItem])
+
+  // Fetch stats
+  const fetchStats = useCallback(async () => {
+    try {
+      const url = selectedSession
+        ? `${API_BASE}/api/v1/ocr-label/stats?session_id=${selectedSession}`
+        : `${API_BASE}/api/v1/ocr-label/stats`
+      const res = await fetch(url)
+      if (res.ok) {
+        const data = await res.json()
+        setStats(data)
+      }
+    } catch (err) {
+      console.error('Failed to fetch stats:', err)
+    }
+  }, [selectedSession])
+
+  // Initial data load
+  useEffect(() => {
+    const loadData = async () => {
+      setLoading(true)
+      await Promise.all([fetchSessions(), fetchQueue(), fetchStats()])
+      setLoading(false)
+    }
+    loadData()
+  }, [fetchSessions, fetchQueue, fetchStats])
+
+  // Refresh queue when session changes
+  useEffect(() => {
+    setCurrentItem(null)
+    setCurrentIndex(0)
+    fetchQueue()
+    fetchStats()
+  }, [selectedSession, fetchQueue, fetchStats])
+
+  // Navigate to next item
+  const goToNext = useCallback(() => {
+    if (currentIndex < queue.length - 1) {
+      const nextIndex = currentIndex + 1
+      setCurrentIndex(nextIndex)
+      setCurrentItem(queue[nextIndex])
+      setCorrectedText(queue[nextIndex].ocr_text || '')
+      setLabelStartTime(Date.now())
+    } else {
+      fetchQueue()
+    }
+  }, [currentIndex, queue, fetchQueue])
+
+  // Navigate to previous item
+  const goToPrev = useCallback(() => {
+    if (currentIndex > 0) {
+      const prevIndex = currentIndex - 1
+      setCurrentIndex(prevIndex)
+      setCurrentItem(queue[prevIndex])
+      setCorrectedText(queue[prevIndex].ocr_text || '')
+      setLabelStartTime(Date.now())
+    }
+  }, [currentIndex, queue])
+
+  // Calculate label time
+  const getLabelTime = useCallback((): number | undefined => {
+    if (!labelStartTime) return undefined
+    return Math.round((Date.now() - labelStartTime) / 1000)
+  }, [labelStartTime])
+
+  // Select a queue item by index
+  const selectQueueItem = useCallback((idx: number) => {
+    if (idx >= 0 && idx < queue.length) {
+      setCurrentIndex(idx)
+      setCurrentItem(queue[idx])
+      setCorrectedText(queue[idx].ocr_text || '')
+      setLabelStartTime(Date.now())
+    }
+  }, [queue])
+
+  // Confirm item
+  const confirmItem = useCallback(async () => {
+    if (!currentItem) return
+
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/ocr-label/confirm`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          item_id: currentItem.id,
+          label_time_seconds: getLabelTime(),
+        }),
+      })
+
+      if (res.ok) {
+        setQueue(prev => prev.filter(item => item.id !== currentItem.id))
+        goToNext()
+        fetchStats()
+      } else {
+        setError('Bestaetigung fehlgeschlagen')
+      }
+    } catch {
+      setError('Netzwerkfehler')
+    }
+  }, [currentItem, getLabelTime, goToNext, fetchStats])
+
+  // Correct item
+  const correctItem = useCallback(async () => {
+    if (!currentItem || !correctedText.trim()) return
+
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/ocr-label/correct`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          item_id: currentItem.id,
+          ground_truth: correctedText.trim(),
+          label_time_seconds: getLabelTime(),
+        }),
+      })
+
+      if (res.ok) {
+        setQueue(prev => prev.filter(item => item.id !== currentItem.id))
+        goToNext()
+        fetchStats()
+      } else {
+        setError('Korrektur fehlgeschlagen')
+      }
+    } catch {
+      setError('Netzwerkfehler')
+    }
+  }, [currentItem, correctedText, getLabelTime, goToNext, fetchStats])
+
+  // Skip item
+  const skipItem = useCallback(async () => {
+    if (!currentItem) return
+
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/ocr-label/skip`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ item_id: currentItem.id }),
+      })
+
+      if (res.ok) {
+        setQueue(prev => prev.filter(item => item.id !== currentItem.id))
+        goToNext()
+        fetchStats()
+      } else {
+        setError('Ueberspringen fehlgeschlagen')
+      }
+    } catch {
+      setError('Netzwerkfehler')
+    }
+  }, [currentItem, goToNext, fetchStats])
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.target instanceof HTMLTextAreaElement) return
+
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault()
+        confirmItem()
+      } else if (e.key === 'ArrowRight') {
+        goToNext()
+      } else if (e.key === 'ArrowLeft') {
+        goToPrev()
+      } else if (e.key === 's' && !e.ctrlKey && !e.metaKey) {
+        skipItem()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [confirmItem, goToNext, goToPrev, skipItem])
+
+  return {
+    // State
+    sessions,
+    selectedSession,
+    setSelectedSession,
+    queue,
+    currentItem,
+    currentIndex,
+    stats,
+    loading,
+    error,
+    setError,
+    correctedText,
+    setCorrectedText,
+
+    // Actions
+    fetchSessions,
+    fetchQueue,
+    fetchStats,
+    goToNext,
+    goToPrev,
+    selectQueueItem,
+    confirmItem,
+    correctItem,
+    skipItem,
+  }
+}
--- a/admin-lehrer/app/(admin)/ai/quality/_components/ResultsList.tsx
+++ b/admin-lehrer/app/(admin)/ai/quality/_components/ResultsList.tsx
@@ -0,0 +1,74 @@
+import type { ChunkDetail } from './types'
+
+interface ResultsListProps {
+  results: ChunkDetail[]
+  selectedChunk: ChunkDetail | null
+  searchQuery: string
+  onSelect: (chunk: ChunkDetail) => void
+}
+
+function highlightText(text: string, query: string) {
+  if (!query) return text
+  const words = query.toLowerCase().split(' ').filter(w => w.length > 2)
+  let result = text
+  words.forEach(word => {
+    const regex = new RegExp(`(${word})`, 'gi')
+    result = result.replace(regex, '<mark class="bg-yellow-200 dark:bg-yellow-800 px-0.5 rounded">$1</mark>')
+  })
+  return result
+}
+
+export function ResultsList({ results, selectedChunk, searchQuery, onSelect }: ResultsListProps) {
+  return (
+    <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-4">
+      <h3 className="text-md font-semibold text-gray-900 dark:text-white mb-4">
+        Gefundene Chunks ({results.length})
+      </h3>
+      <div className="space-y-3 max-h-[600px] overflow-y-auto">
+        {results.map((result, idx) => (
+          <div
+            key={idx}
+            onClick={() => onSelect(result)}
+            className={`p-4 border rounded-lg cursor-pointer transition-all ${
+              selectedChunk?.text === result.text
+                ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
+                : 'border-gray-200 dark:border-slate-700 hover:border-gray-300 dark:hover:border-slate-600'
+            }`}
+          >
+            {/* Header */}
+            <div className="flex items-center justify-between mb-2">
+              <div className="flex items-center gap-2">
+                <span className="text-xs font-medium px-2 py-0.5 bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 rounded">
+                  {result.regulation_code}
+                </span>
+                {result.article && (
+                  <span className="text-xs text-gray-500 dark:text-gray-400">
+                    Art. {result.article}
+                    {result.paragraph && ` Abs. ${result.paragraph}`}
+                  </span>
+                )}
+              </div>
+              <span className="text-xs text-gray-400">
+                Score: {(result.score || 0).toFixed(3)}
+              </span>
+            </div>
+
+            {/* Text Preview */}
+            <p
+              className="text-sm text-gray-700 dark:text-gray-300 line-clamp-4"
+              dangerouslySetInnerHTML={{
+                __html: highlightText(result.text.substring(0, 400) + (result.text.length > 400 ? '...' : ''), searchQuery)
+              }}
+            />
+
+            {/* Metadata */}
+            <div className="mt-2 flex items-center gap-4 text-xs text-gray-400">
+              <span>Chunk #{result.chunk_index || idx}</span>
+              <span>{result.text.length} Zeichen</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
--- a/admin-lehrer/app/(admin)/ai/quality/_components/SearchSection.tsx
+++ b/admin-lehrer/app/(admin)/ai/quality/_components/SearchSection.tsx
@@ -0,0 +1,112 @@
+import { REGULATIONS, SAMPLE_QUERIES } from './types'
+
+interface SearchSectionProps {
+  searchQuery: string
+  selectedRegulation: string
+  topK: number
+  searching: boolean
+  onSearchQueryChange: (v: string) => void
+  onRegulationChange: (v: string) => void
+  onTopKChange: (v: number) => void
+  onSearch: () => void
+  onSampleQuery: (query: string, reg: string) => void
+}
+
+export function SearchSection({
+  searchQuery,
+  selectedRegulation,
+  topK,
+  searching,
+  onSearchQueryChange,
+  onRegulationChange,
+  onTopKChange,
+  onSearch,
+  onSampleQuery,
+}: SearchSectionProps) {
+  return (
+    <>
+      {/* Quick Sample Queries */}
+      <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-4">
+        <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
+          Schnell-Stichproben
+        </h3>
+        <div className="flex flex-wrap gap-2">
+          {SAMPLE_QUERIES.map((sq, idx) => (
+            <button
+              key={idx}
+              onClick={() => onSampleQuery(sq.query, sq.reg)}
+              className="px-3 py-1.5 text-xs bg-gray-100 hover:bg-gray-200 dark:bg-slate-700 dark:hover:bg-slate-600 text-gray-700 dark:text-gray-300 rounded-full transition-colors"
+            >
+              {sq.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Search Section */}
+      <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-6">
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+          Chunk-Suche
+        </h2>
+
+        <div className="space-y-4">
+          {/* Search Input */}
+          <div className="flex gap-4">
+            <div className="flex-1">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Suchbegriff / Paragraph / Artikeltext
+              </label>
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => onSearchQueryChange(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && onSearch()}
+                placeholder="z.B. 'Recht auf Löschung' oder 'Art. 17 Abs. 1'"
+                className="w-full px-4 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:text-white"
+              />
+            </div>
+            <div className="w-48">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Regulierung
+              </label>
+              <select
+                value={selectedRegulation}
+                onChange={(e) => onRegulationChange(e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:text-white"
+              >
+                <option value="">Alle</option>
+                {REGULATIONS.map((reg) => (
+                  <option key={reg.code} value={reg.code}>
+                    {reg.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div className="w-24">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Anzahl
+              </label>
+              <select
+                value={topK}
+                onChange={(e) => onTopKChange(parseInt(e.target.value))}
+                className="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:text-white"
+              >
+                <option value="5">5</option>
+                <option value="10">10</option>
+                <option value="20">20</option>
+              </select>
+            </div>
+          </div>
+
+          <button
+            onClick={onSearch}
+            disabled={searching || !searchQuery.trim()}
+            className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            {searching ? 'Suche laeuft...' : 'Suchen'}
+          </button>
+        </div>
+      </div>
+    </>
+  )
+}
--- a/admin-lehrer/app/(admin)/ai/quality/_components/TraceabilityPanel.tsx
+++ b/admin-lehrer/app/(admin)/ai/quality/_components/TraceabilityPanel.tsx
@@ -0,0 +1,150 @@
+import type { ChunkDetail, TraceabilityResult } from './types'
+
+interface TraceabilityPanelProps {
+  selectedChunk: ChunkDetail | null
+  loadingTrace: boolean
+  traceability: TraceabilityResult | null
+}
+
+export function TraceabilityPanel({ selectedChunk, loadingTrace, traceability }: TraceabilityPanelProps) {
+  return (
+    <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-4">
+      <h3 className="text-md font-semibold text-gray-900 dark:text-white mb-4">
+        Traceability
+      </h3>
+
+      {!selectedChunk ? (
+        <div className="text-center py-12 text-gray-500 dark:text-gray-400">
+          <svg className="w-12 h-12 mx-auto mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          <p>Waehlen Sie einen Chunk aus der Liste, um die Traceability zu sehen.</p>
+        </div>
+      ) : loadingTrace ? (
+        <div className="text-center py-12">
+          <div className="animate-spin w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full mx-auto mb-4"></div>
+          <p className="text-gray-500 dark:text-gray-400">Lade Traceability...</p>
+        </div>
+      ) : traceability ? (
+        <div className="space-y-6">
+          {/* Selected Chunk Detail */}
+          <ChunkDetailSection chunk={traceability.chunk} />
+
+          <ArrowDown />
+
+          {/* Requirements */}
+          <RequirementsSection requirements={traceability.requirements} />
+
+          <ArrowDown />
+
+          {/* Controls */}
+          <ControlsSection controls={traceability.controls} />
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+function ChunkDetailSection({ chunk }: { chunk: ChunkDetail }) {
+  return (
+    <div className="border-l-4 border-blue-500 pl-4">
+      <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+        Ausgewaehlter Chunk
+      </h4>
+      <div className="bg-gray-50 dark:bg-slate-700 rounded p-3">
+        <div className="flex items-center gap-2 mb-2">
+          <span className="text-xs font-medium px-2 py-0.5 bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 rounded">
+            {chunk.regulation_code}
+          </span>
+          {chunk.article && (
+            <span className="text-xs text-gray-500 dark:text-gray-400">
+              Art. {chunk.article}
+              {chunk.paragraph && ` Abs. ${chunk.paragraph}`}
+            </span>
+          )}
+        </div>
+        <p className="text-sm text-gray-600 dark:text-gray-300 whitespace-pre-wrap">
+          {chunk.text}
+        </p>
+        {chunk.source_url && (
+          <a
+            href={chunk.source_url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="mt-2 inline-flex items-center gap-1 text-xs text-blue-600 hover:underline"
+          >
+            Quelle oeffnen
+          </a>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function RequirementsSection({ requirements }: { requirements: TraceabilityResult['requirements'] }) {
+  return (
+    <div className="border-l-4 border-orange-500 pl-4">
+      <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+        Extrahierte Anforderungen ({requirements.length})
+      </h4>
+      {requirements.length > 0 ? (
+        <div className="space-y-2">
+          {requirements.map((req, idx) => (
+            <div key={idx} className="bg-orange-50 dark:bg-orange-900/20 rounded p-3">
+              <div className="flex items-center gap-2 mb-1">
+                <span className="text-xs font-medium text-orange-700 dark:text-orange-400">
+                  {req.category || 'Anforderung'}
+                </span>
+              </div>
+              <p className="text-sm text-gray-600 dark:text-gray-300">{req.text}</p>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <p className="text-sm text-gray-500 dark:text-gray-400 italic">
+          Keine Anforderungen aus diesem Chunk extrahiert.
+          <br />
+          <span className="text-xs">(Requirements-Extraktion ist noch nicht implementiert)</span>
+        </p>
+      )}
+    </div>
+  )
+}
+
+function ControlsSection({ controls }: { controls: TraceabilityResult['controls'] }) {
+  return (
+    <div className="border-l-4 border-green-500 pl-4">
+      <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+        Abgeleitete Controls ({controls.length})
+      </h4>
+      {controls.length > 0 ? (
+        <div className="space-y-2">
+          {controls.map((ctrl, idx) => (
+            <div key={idx} className="bg-green-50 dark:bg-green-900/20 rounded p-3">
+              <div className="font-medium text-sm text-green-700 dark:text-green-400 mb-1">
+                {ctrl.name}
+              </div>
+              <p className="text-sm text-gray-600 dark:text-gray-300">{ctrl.description}</p>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <p className="text-sm text-gray-500 dark:text-gray-400 italic">
+          Keine Controls aus diesem Chunk abgeleitet.
+          <br />
+          <span className="text-xs">(Control-Ableitung ist noch nicht implementiert)</span>
+        </p>
+      )}
+    </div>
+  )
+}
+
+function ArrowDown() {
+  return (
+    <div className="flex justify-center">
+      <svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+      </svg>
+    </div>
+  )
+}
--- a/admin-lehrer/app/(admin)/ai/quality/_components/types.ts
+++ b/admin-lehrer/app/(admin)/ai/quality/_components/types.ts
@@ -0,0 +1,66 @@
+export interface ChunkDetail {
+  id: string
+  text: string
+  regulation_code: string
+  regulation_name: string
+  article: string | null
+  paragraph: string | null
+  chunk_index: number
+  chunk_position: 'beginning' | 'middle' | 'end'
+  source_url: string
+  score?: number
+}
+
+export interface Requirement {
+  id: string
+  text: string
+  category: string
+  source_chunk_id: string
+  regulation_code: string
+}
+
+export interface Control {
+  id: string
+  name: string
+  description: string
+  source_requirement_ids: string[]
+  regulation_codes: string[]
+}
+
+export interface TraceabilityResult {
+  chunk: ChunkDetail
+  requirements: Requirement[]
+  controls: Control[]
+}
+
+export const API_PROXY = '/api/legal-corpus'
+
+export const REGULATIONS = [
+  { code: 'GDPR', name: 'DSGVO' },
+  { code: 'EPRIVACY', name: 'ePrivacy' },
+  { code: 'TDDDG', name: 'TDDDG' },
+  { code: 'SCC', name: 'Standardvertragsklauseln' },
+  { code: 'DPF', name: 'EU-US DPF' },
+  { code: 'AIACT', name: 'EU AI Act' },
+  { code: 'CRA', name: 'Cyber Resilience Act' },
+  { code: 'NIS2', name: 'NIS2' },
+  { code: 'EUCSA', name: 'EU Cybersecurity Act' },
+  { code: 'DATAACT', name: 'Data Act' },
+  { code: 'DGA', name: 'Data Governance Act' },
+  { code: 'DSA', name: 'Digital Services Act' },
+  { code: 'EAA', name: 'Accessibility Act' },
+  { code: 'DSM', name: 'DSM-Urheberrecht' },
+  { code: 'PLD', name: 'Produkthaftung' },
+  { code: 'GPSR', name: 'Product Safety' },
+  { code: 'BSI-TR-03161-1', name: 'BSI-TR Teil 1' },
+  { code: 'BSI-TR-03161-2', name: 'BSI-TR Teil 2' },
+  { code: 'BSI-TR-03161-3', name: 'BSI-TR Teil 3' },
+]
+
+export const SAMPLE_QUERIES = [
+  { label: 'Art. 17 DSGVO (Recht auf Loeschung)', query: 'Recht auf Löschung Artikel 17', reg: 'GDPR' },
+  { label: 'Einwilligung TDDDG', query: 'Einwilligung Endeinrichtung speichern', reg: 'TDDDG' },
+  { label: 'AI Act Hochrisiko', query: 'Hochrisiko-KI-System Anforderungen', reg: 'AIACT' },
+  { label: 'NIS2 Sicherheitsmaßnahmen', query: 'Cybersicherheitsrisikomanagement Maßnahmen', reg: 'NIS2' },
+  { label: 'BSI Authentifizierung', query: 'Authentifizierung Zwei-Faktor mobile', reg: 'BSI-TR-03161-1' },
+]
--- a/admin-lehrer/app/(admin)/ai/quality/_components/useQualitySearch.ts
+++ b/admin-lehrer/app/(admin)/ai/quality/_components/useQualitySearch.ts
@@ -0,0 +1,93 @@
+import { useState, useCallback } from 'react'
+import type { ChunkDetail, TraceabilityResult } from './types'
+import { API_PROXY } from './types'
+
+export function useQualitySearch() {
+  const [searchQuery, setSearchQuery] = useState('')
+  const [searchResults, setSearchResults] = useState<ChunkDetail[]>([])
+  const [searching, setSearching] = useState(false)
+  const [selectedRegulation, setSelectedRegulation] = useState<string>('')
+  const [topK, setTopK] = useState(10)
+
+  const [selectedChunk, setSelectedChunk] = useState<ChunkDetail | null>(null)
+  const [traceability, setTraceability] = useState<TraceabilityResult | null>(null)
+  const [loadingTrace, setLoadingTrace] = useState(false)
+
+  const handleSearch = useCallback(async () => {
+    if (!searchQuery.trim()) return
+
+    setSearching(true)
+    setSearchResults([])
+    setSelectedChunk(null)
+    setTraceability(null)
+
+    try {
+      let url = `${API_PROXY}?action=search&query=${encodeURIComponent(searchQuery)}&top_k=${topK}`
+      if (selectedRegulation) {
+        url += `&regulations=${encodeURIComponent(selectedRegulation)}`
+      }
+
+      const res = await fetch(url)
+      if (res.ok) {
+        const data = await res.json()
+        setSearchResults(data.results || [])
+      }
+    } catch (error) {
+      console.error('Search failed:', error)
+    } finally {
+      setSearching(false)
+    }
+  }, [searchQuery, selectedRegulation, topK])
+
+  const loadTraceability = useCallback(async (chunk: ChunkDetail) => {
+    setSelectedChunk(chunk)
+    setLoadingTrace(true)
+
+    try {
+      const res = await fetch(
+        `${API_PROXY}?action=traceability&chunk_id=${encodeURIComponent(chunk.id || chunk.regulation_code + '_' + chunk.chunk_index)}&regulation=${encodeURIComponent(chunk.regulation_code)}`
+      )
+
+      if (res.ok) {
+        const data = await res.json()
+        setTraceability({
+          chunk,
+          requirements: data.requirements || [],
+          controls: data.controls || [],
+        })
+      } else {
+        setTraceability({ chunk, requirements: [], controls: [] })
+      }
+    } catch (error) {
+      console.error('Failed to load traceability:', error)
+      setTraceability({ chunk, requirements: [], controls: [] })
+    } finally {
+      setLoadingTrace(false)
+    }
+  }, [])
+
+  const handleSampleQuery = (query: string, reg: string) => {
+    setSearchQuery(query)
+    setSelectedRegulation(reg)
+    setTimeout(() => {
+      handleSearch()
+    }, 100)
+  }
+
+  return {
+    searchQuery,
+    setSearchQuery,
+    searchResults,
+    searching,
+    selectedRegulation,
+    setSelectedRegulation,
+    topK,
+    setTopK,
+    selectedChunk,
+    traceability,
+    loadingTrace,
+    handleSearch,
+    loadTraceability,
+    handleSampleQuery,
+  }
+}
--- a/admin-lehrer/app/(admin)/ai/quality/page.tsx
+++ b/admin-lehrer/app/(admin)/ai/quality/page.tsx
@@ -5,184 +5,34 @@
 *
 * Ermoeglicht Auditoren:
 * - Chunk-Suche und Stichproben
- * - Traceability: Chunk → Requirement → Control
+ * - Traceability: Chunk -> Requirement -> Control
 * - Dokumenten-Vollstaendigkeitspruefung
 */

-import { useState, useCallback } from 'react'
 import Link from 'next/link'
 import { PagePurpose } from '@/components/common/PagePurpose'
-
-const API_PROXY = '/api/legal-corpus'
-
-// Types
-interface ChunkDetail {
-  id: string
-  text: string
-  regulation_code: string
-  regulation_name: string
-  article: string | null
-  paragraph: string | null
-  chunk_index: number
-  chunk_position: 'beginning' | 'middle' | 'end'
-  source_url: string
-  score?: number
-}
-
-interface Requirement {
-  id: string
-  text: string
-  category: string
-  source_chunk_id: string
-  regulation_code: string
-}
-
-interface Control {
-  id: string
-  name: string
-  description: string
-  source_requirement_ids: string[]
-  regulation_codes: string[]
-}
-
-interface TraceabilityResult {
-  chunk: ChunkDetail
-  requirements: Requirement[]
-  controls: Control[]
-}
-
-// Regulations for filtering
-const REGULATIONS = [
-  { code: 'GDPR', name: 'DSGVO' },
-  { code: 'EPRIVACY', name: 'ePrivacy' },
-  { code: 'TDDDG', name: 'TDDDG' },
-  { code: 'SCC', name: 'Standardvertragsklauseln' },
-  { code: 'DPF', name: 'EU-US DPF' },
-  { code: 'AIACT', name: 'EU AI Act' },
-  { code: 'CRA', name: 'Cyber Resilience Act' },
-  { code: 'NIS2', name: 'NIS2' },
-  { code: 'EUCSA', name: 'EU Cybersecurity Act' },
-  { code: 'DATAACT', name: 'Data Act' },
-  { code: 'DGA', name: 'Data Governance Act' },
-  { code: 'DSA', name: 'Digital Services Act' },
-  { code: 'EAA', name: 'Accessibility Act' },
-  { code: 'DSM', name: 'DSM-Urheberrecht' },
-  { code: 'PLD', name: 'Produkthaftung' },
-  { code: 'GPSR', name: 'Product Safety' },
-  { code: 'BSI-TR-03161-1', name: 'BSI-TR Teil 1' },
-  { code: 'BSI-TR-03161-2', name: 'BSI-TR Teil 2' },
-  { code: 'BSI-TR-03161-3', name: 'BSI-TR Teil 3' },
-]
-
-const TYPE_COLORS: Record<string, string> = {
-  eu_regulation: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
-  eu_directive: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400',
-  de_law: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
-  bsi_standard: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
-}
+import { useQualitySearch } from './_components/useQualitySearch'
+import { SearchSection } from './_components/SearchSection'
+import { ResultsList } from './_components/ResultsList'
+import { TraceabilityPanel } from './_components/TraceabilityPanel'

 export default function QualityPage() {
-  // Search state
-  const [searchQuery, setSearchQuery] = useState('')
-  const [searchResults, setSearchResults] = useState<ChunkDetail[]>([])
-  const [searching, setSearching] = useState(false)
-  const [selectedRegulation, setSelectedRegulation] = useState<string>('')
-  const [topK, setTopK] = useState(10)
-
-  // Traceability state
-  const [selectedChunk, setSelectedChunk] = useState<ChunkDetail | null>(null)
-  const [traceability, setTraceability] = useState<TraceabilityResult | null>(null)
-  const [loadingTrace, setLoadingTrace] = useState(false)
-
-  // Quick sample queries for auditors
-  const sampleQueries = [
-    { label: 'Art. 17 DSGVO (Recht auf Loeschung)', query: 'Recht auf Löschung Artikel 17', reg: 'GDPR' },
-    { label: 'Einwilligung TDDDG', query: 'Einwilligung Endeinrichtung speichern', reg: 'TDDDG' },
-    { label: 'AI Act Hochrisiko', query: 'Hochrisiko-KI-System Anforderungen', reg: 'AIACT' },
-    { label: 'NIS2 Sicherheitsmaßnahmen', query: 'Cybersicherheitsrisikomanagement Maßnahmen', reg: 'NIS2' },
-    { label: 'BSI Authentifizierung', query: 'Authentifizierung Zwei-Faktor mobile', reg: 'BSI-TR-03161-1' },
-  ]
-
-  const handleSearch = useCallback(async () => {
-    if (!searchQuery.trim()) return
-
-    setSearching(true)
-    setSearchResults([])
-    setSelectedChunk(null)
-    setTraceability(null)
-
-    try {
-      let url = `${API_PROXY}?action=search&query=${encodeURIComponent(searchQuery)}&top_k=${topK}`
-      if (selectedRegulation) {
-        url += `&regulations=${encodeURIComponent(selectedRegulation)}`
-      }
-
-      const res = await fetch(url)
-      if (res.ok) {
-        const data = await res.json()
-        setSearchResults(data.results || [])
-      }
-    } catch (error) {
-      console.error('Search failed:', error)
-    } finally {
-      setSearching(false)
-    }
-  }, [searchQuery, selectedRegulation, topK])
-
-  const loadTraceability = useCallback(async (chunk: ChunkDetail) => {
-    setSelectedChunk(chunk)
-    setLoadingTrace(true)
-
-    try {
-      // Try to load traceability (requirements and controls derived from this chunk)
-      const res = await fetch(`${API_PROXY}?action=traceability&chunk_id=${encodeURIComponent(chunk.id || chunk.regulation_code + '_' + chunk.chunk_index)}&regulation=${encodeURIComponent(chunk.regulation_code)}`)
-
-      if (res.ok) {
-        const data = await res.json()
-        setTraceability({
-          chunk,
-          requirements: data.requirements || [],
-          controls: data.controls || [],
-        })
-      } else {
-        // If traceability endpoint doesn't exist yet, show placeholder
-        setTraceability({
-          chunk,
-          requirements: [],
-          controls: [],
-        })
-      }
-    } catch (error) {
-      console.error('Failed to load traceability:', error)
-      setTraceability({
-        chunk,
-        requirements: [],
-        controls: [],
-      })
-    } finally {
-      setLoadingTrace(false)
-    }
-  }, [])
-
-  const handleSampleQuery = (query: string, reg: string) => {
-    setSearchQuery(query)
-    setSelectedRegulation(reg)
-    // Auto-search after setting
-    setTimeout(() => {
-      handleSearch()
-    }, 100)
-  }
-
-  const highlightText = (text: string, query: string) => {
-    if (!query) return text
-    const words = query.toLowerCase().split(' ').filter(w => w.length > 2)
-    let result = text
-    words.forEach(word => {
-      const regex = new RegExp(`(${word})`, 'gi')
-      result = result.replace(regex, '<mark class="bg-yellow-200 dark:bg-yellow-800 px-0.5 rounded">$1</mark>')
-    })
-    return result
-  }
+  const {
+    searchQuery,
+    setSearchQuery,
+    searchResults,
+    searching,
+    selectedRegulation,
+    setSelectedRegulation,
+    topK,
+    setTopK,
+    selectedChunk,
+    traceability,
+    loadingTrace,
+    handleSearch,
+    loadTraceability,
+    handleSampleQuery,
+  } = useQualitySearch()

  return (
    <div className="space-y-6">
@@ -214,265 +64,32 @@ export default function QualityPage() {
        }}
      />

-      {/* Quick Sample Queries */}
-      <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-4">
-        <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
-          Schnell-Stichproben
-        </h3>
-        <div className="flex flex-wrap gap-2">
-          {sampleQueries.map((sq, idx) => (
-            <button
-              key={idx}
-              onClick={() => handleSampleQuery(sq.query, sq.reg)}
-              className="px-3 py-1.5 text-xs bg-gray-100 hover:bg-gray-200 dark:bg-slate-700 dark:hover:bg-slate-600 text-gray-700 dark:text-gray-300 rounded-full transition-colors"
-            >
-              {sq.label}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Search Section */}
-      <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-6">
-        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
-          Chunk-Suche
-        </h2>
-
-        <div className="space-y-4">
-          {/* Search Input */}
-          <div className="flex gap-4">
-            <div className="flex-1">
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                Suchbegriff / Paragraph / Artikeltext
-              </label>
-              <input
-                type="text"
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
-                placeholder="z.B. 'Recht auf Löschung' oder 'Art. 17 Abs. 1'"
-                className="w-full px-4 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:text-white"
-              />
-            </div>
-            <div className="w-48">
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                Regulierung
-              </label>
-              <select
-                value={selectedRegulation}
-                onChange={(e) => setSelectedRegulation(e.target.value)}
-                className="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:text-white"
-              >
-                <option value="">Alle</option>
-                {REGULATIONS.map((reg) => (
-                  <option key={reg.code} value={reg.code}>
-                    {reg.name}
-                  </option>
-                ))}
-              </select>
-            </div>
-            <div className="w-24">
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                Anzahl
-              </label>
-              <select
-                value={topK}
-                onChange={(e) => setTopK(parseInt(e.target.value))}
-                className="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:text-white"
-              >
-                <option value="5">5</option>
-                <option value="10">10</option>
-                <option value="20">20</option>
-              </select>
-            </div>
-          </div>
-
-          <button
-            onClick={handleSearch}
-            disabled={searching || !searchQuery.trim()}
-            className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-          >
-            {searching ? 'Suche laeuft...' : 'Suchen'}
-          </button>
-        </div>
-      </div>
+      <SearchSection
+        searchQuery={searchQuery}
+        selectedRegulation={selectedRegulation}
+        topK={topK}
+        searching={searching}
+        onSearchQueryChange={setSearchQuery}
+        onRegulationChange={setSelectedRegulation}
+        onTopKChange={setTopK}
+        onSearch={handleSearch}
+        onSampleQuery={handleSampleQuery}
+      />

      {/* Results Grid */}
      {searchResults.length > 0 && (
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          {/* Search Results List */}
-          <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-4">
-            <h3 className="text-md font-semibold text-gray-900 dark:text-white mb-4">
-              Gefundene Chunks ({searchResults.length})
-            </h3>
-            <div className="space-y-3 max-h-[600px] overflow-y-auto">
-              {searchResults.map((result, idx) => (
-                <div
-                  key={idx}
-                  onClick={() => loadTraceability(result)}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedChunk?.text === result.text
-                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
-                      : 'border-gray-200 dark:border-slate-700 hover:border-gray-300 dark:hover:border-slate-600'
-                  }`}
-                >
-                  {/* Header */}
-                  <div className="flex items-center justify-between mb-2">
-                    <div className="flex items-center gap-2">
-                      <span className="text-xs font-medium px-2 py-0.5 bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 rounded">
-                        {result.regulation_code}
-                      </span>
-                      {result.article && (
-                        <span className="text-xs text-gray-500 dark:text-gray-400">
-                          Art. {result.article}
-                          {result.paragraph && ` Abs. ${result.paragraph}`}
-                        </span>
-                      )}
-                    </div>
-                    <span className="text-xs text-gray-400">
-                      Score: {(result.score || 0).toFixed(3)}
-                    </span>
-                  </div>
-
-                  {/* Text Preview */}
-                  <p
-                    className="text-sm text-gray-700 dark:text-gray-300 line-clamp-4"
-                    dangerouslySetInnerHTML={{
-                      __html: highlightText(result.text.substring(0, 400) + (result.text.length > 400 ? '...' : ''), searchQuery)
-                    }}
-                  />
-
-                  {/* Metadata */}
-                  <div className="mt-2 flex items-center gap-4 text-xs text-gray-400">
-                    <span>Chunk #{result.chunk_index || idx}</span>
-                    <span>{result.text.length} Zeichen</span>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Traceability Panel */}
-          <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-4">
-            <h3 className="text-md font-semibold text-gray-900 dark:text-white mb-4">
-              Traceability
-            </h3>
-
-            {!selectedChunk ? (
-              <div className="text-center py-12 text-gray-500 dark:text-gray-400">
-                <svg className="w-12 h-12 mx-auto mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
-                <p>Waehlen Sie einen Chunk aus der Liste, um die Traceability zu sehen.</p>
-              </div>
-            ) : loadingTrace ? (
-              <div className="text-center py-12">
-                <div className="animate-spin w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full mx-auto mb-4"></div>
-                <p className="text-gray-500 dark:text-gray-400">Lade Traceability...</p>
-              </div>
-            ) : traceability ? (
-              <div className="space-y-6">
-                {/* Selected Chunk Detail */}
-                <div className="border-l-4 border-blue-500 pl-4">
-                  <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                    📄 Ausgewaehlter Chunk
-                  </h4>
-                  <div className="bg-gray-50 dark:bg-slate-700 rounded p-3">
-                    <div className="flex items-center gap-2 mb-2">
-                      <span className="text-xs font-medium px-2 py-0.5 bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 rounded">
-                        {traceability.chunk.regulation_code}
-                      </span>
-                      {traceability.chunk.article && (
-                        <span className="text-xs text-gray-500 dark:text-gray-400">
-                          Art. {traceability.chunk.article}
-                          {traceability.chunk.paragraph && ` Abs. ${traceability.chunk.paragraph}`}
-                        </span>
-                      )}
-                    </div>
-                    <p className="text-sm text-gray-600 dark:text-gray-300 whitespace-pre-wrap">
-                      {traceability.chunk.text}
-                    </p>
-                    {traceability.chunk.source_url && (
-                      <a
-                        href={traceability.chunk.source_url}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="mt-2 inline-flex items-center gap-1 text-xs text-blue-600 hover:underline"
-                      >
-                        🔗 Quelle oeffnen
-                      </a>
-                    )}
-                  </div>
-                </div>
-
-                {/* Arrow Down */}
-                <div className="flex justify-center">
-                  <svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
-                  </svg>
-                </div>
-
-                {/* Requirements */}
-                <div className="border-l-4 border-orange-500 pl-4">
-                  <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                    📋 Extrahierte Anforderungen ({traceability.requirements.length})
-                  </h4>
-                  {traceability.requirements.length > 0 ? (
-                    <div className="space-y-2">
-                      {traceability.requirements.map((req, idx) => (
-                        <div key={idx} className="bg-orange-50 dark:bg-orange-900/20 rounded p-3">
-                          <div className="flex items-center gap-2 mb-1">
-                            <span className="text-xs font-medium text-orange-700 dark:text-orange-400">
-                              {req.category || 'Anforderung'}
-                            </span>
-                          </div>
-                          <p className="text-sm text-gray-600 dark:text-gray-300">{req.text}</p>
-                        </div>
-                      ))}
-                    </div>
-                  ) : (
-                    <p className="text-sm text-gray-500 dark:text-gray-400 italic">
-                      Keine Anforderungen aus diesem Chunk extrahiert.
-                      <br />
-                      <span className="text-xs">(Requirements-Extraktion ist noch nicht implementiert)</span>
-                    </p>
-                  )}
-                </div>
-
-                {/* Arrow Down */}
-                <div className="flex justify-center">
-                  <svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
-                  </svg>
-                </div>
-
-                {/* Controls */}
-                <div className="border-l-4 border-green-500 pl-4">
-                  <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                    ✅ Abgeleitete Controls ({traceability.controls.length})
-                  </h4>
-                  {traceability.controls.length > 0 ? (
-                    <div className="space-y-2">
-                      {traceability.controls.map((ctrl, idx) => (
-                        <div key={idx} className="bg-green-50 dark:bg-green-900/20 rounded p-3">
-                          <div className="font-medium text-sm text-green-700 dark:text-green-400 mb-1">
-                            {ctrl.name}
-                          </div>
-                          <p className="text-sm text-gray-600 dark:text-gray-300">{ctrl.description}</p>
-                        </div>
-                      ))}
-                    </div>
-                  ) : (
-                    <p className="text-sm text-gray-500 dark:text-gray-400 italic">
-                      Keine Controls aus diesem Chunk abgeleitet.
-                      <br />
-                      <span className="text-xs">(Control-Ableitung ist noch nicht implementiert)</span>
-                    </p>
-                  )}
-                </div>
-              </div>
-            ) : null}
-          </div>
+          <ResultsList
+            results={searchResults}
+            selectedChunk={selectedChunk}
+            searchQuery={searchQuery}
+            onSelect={loadTraceability}
+          />
+          <TraceabilityPanel
+            selectedChunk={selectedChunk}
+            loadingTrace={loadingTrace}
+            traceability={traceability}
+          />
        </div>
      )}

@@ -510,13 +127,13 @@ export default function QualityPage() {
      {/* Audit Info */}
      <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
        <h3 className="text-sm font-medium text-blue-800 dark:text-blue-400 mb-2">
-          ℹ️ Hinweise fuer Auditoren
+          Hinweise fuer Auditoren
        </h3>
        <ul className="text-sm text-blue-700 dark:text-blue-300 space-y-1 list-disc list-inside">
          <li>Die Suche ist semantisch - aehnliche Begriffe werden gefunden, auch wenn die exakte Formulierung abweicht</li>
          <li>Jeder Chunk entspricht einem logischen Textabschnitt aus dem Originaldokument</li>
          <li>Die Traceability zeigt, wie aus dem Originaltext Anforderungen und Controls abgeleitet wurden</li>
-          <li>Klicken Sie auf "Quelle oeffnen", um das Originaldokument zu pruefen</li>
+          <li>Klicken Sie auf &quot;Quelle oeffnen&quot;, um das Originaldokument zu pruefen</li>
        </ul>
      </div>
    </div>