fix: Restore all files lost during destructive rebase

A previous `git pull --rebase origin main` dropped 177 local commits,
losing 3400+ files across admin-v2, backend, studio-v2, website,
klausur-service, and many other services. The partial restore attempt
(660295e2) only recovered some files.

This commit restores all missing files from pre-rebase ref 98933f5e
while preserving post-rebase additions (night-scheduler, night-mode UI,
NightModeWidget dashboard integration).

Restored features include:
- AI Module Sidebar (FAB), OCR Labeling, OCR Compare
- GPU Dashboard, RAG Pipeline, Magic Help
- Klausur-Korrektur (8 files), Abitur-Archiv (5+ files)
- Companion, Zeugnisse-Crawler, Screen Flow
- Full backend, studio-v2, website, klausur-service
- All compliance SDKs, agent-core, voice-service
- CI/CD configs, documentation, scripts

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

admin-v2/app/(admin)/ai/gpu/page.tsx

@@ -0,0 +1,396 @@
+'use client'
+
+/**
+ * GPU Infrastructure Admin Page
+ *
+ * vast.ai GPU Management for LLM Processing
+ * Part of KI-Werkzeuge
+ */
+
+import { useEffect, useState, useCallback } from 'react'
+import { PagePurpose } from '@/components/common/PagePurpose'
+import { AIToolsSidebarResponsive } from '@/components/ai/AIToolsSidebar'
+
+interface VastStatus {
+  instance_id: number | null
+  status: string
+  gpu_name: string | null
+  dph_total: number | null
+  endpoint_base_url: string | null
+  last_activity: string | null
+  auto_shutdown_in_minutes: number | null
+  total_runtime_hours: number | null
+  total_cost_usd: number | null
+  account_credit: number | null
+  account_total_spend: number | null
+  session_runtime_minutes: number | null
+  session_cost_usd: number | null
+  message: string | null
+  error?: string
+}
+
+export default function GPUInfrastructurePage() {
+  const [status, setStatus] = useState<VastStatus | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [actionLoading, setActionLoading] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [message, setMessage] = useState<string | null>(null)
+
+  const API_PROXY = '/api/admin/gpu'
+
+  const fetchStatus = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+
+    try {
+      const response = await fetch(API_PROXY)
+      const data = await response.json()
+
+      if (!response.ok) {
+        throw new Error(data.error || `HTTP ${response.status}`)
+      }
+
+      setStatus(data)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Verbindungsfehler')
+      setStatus({
+        instance_id: null,
+        status: 'error',
+        gpu_name: null,
+        dph_total: null,
+        endpoint_base_url: null,
+        last_activity: null,
+        auto_shutdown_in_minutes: null,
+        total_runtime_hours: null,
+        total_cost_usd: null,
+        account_credit: null,
+        account_total_spend: null,
+        session_runtime_minutes: null,
+        session_cost_usd: null,
+        message: 'Verbindung fehlgeschlagen'
+      })
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    fetchStatus()
+  }, [fetchStatus])
+
+  useEffect(() => {
+    const interval = setInterval(fetchStatus, 30000)
+    return () => clearInterval(interval)
+  }, [fetchStatus])
+
+  const powerOn = async () => {
+    setActionLoading('on')
+    setError(null)
+    setMessage(null)
+
+    try {
+      const response = await fetch(API_PROXY, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'on' }),
+      })
+
+      const data = await response.json()
+
+      if (!response.ok) {
+        throw new Error(data.error || data.detail || 'Aktion fehlgeschlagen')
+      }
+
+      setMessage('Start angefordert')
+      setTimeout(fetchStatus, 3000)
+      setTimeout(fetchStatus, 10000)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Fehler beim Starten')
+      fetchStatus()
+    } finally {
+      setActionLoading(null)
+    }
+  }
+
+  const powerOff = async () => {
+    setActionLoading('off')
+    setError(null)
+    setMessage(null)
+
+    try {
+      const response = await fetch(API_PROXY, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'off' }),
+      })
+
+      const data = await response.json()
+
+      if (!response.ok) {
+        throw new Error(data.error || data.detail || 'Aktion fehlgeschlagen')
+      }
+
+      setMessage('Stop angefordert')
+      setTimeout(fetchStatus, 3000)
+      setTimeout(fetchStatus, 10000)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Fehler beim Stoppen')
+      fetchStatus()
+    } finally {
+      setActionLoading(null)
+    }
+  }
+
+  const getStatusBadge = (s: string) => {
+    const baseClasses = 'px-3 py-1 rounded-full text-sm font-semibold uppercase'
+    switch (s) {
+      case 'running':
+        return `${baseClasses} bg-green-100 text-green-800`
+      case 'stopped':
+      case 'exited':
+        return `${baseClasses} bg-red-100 text-red-800`
+      case 'loading':
+      case 'scheduling':
+      case 'creating':
+      case 'starting...':
+      case 'stopping...':
+        return `${baseClasses} bg-yellow-100 text-yellow-800`
+      default:
+        return `${baseClasses} bg-slate-100 text-slate-600`
+    }
+  }
+
+  const getCreditColor = (credit: number | null) => {
+    if (credit === null) return 'text-slate-500'
+    if (credit < 5) return 'text-red-600'
+    if (credit < 15) return 'text-yellow-600'
+    return 'text-green-600'
+  }
+
+  return (
+    <div>
+      {/* Page Purpose */}
+      <PagePurpose
+        title="GPU Infrastruktur"
+        purpose="Verwalten Sie die vast.ai GPU-Instanzen fuer LLM-Verarbeitung und OCR. Starten/Stoppen Sie GPUs bei Bedarf und ueberwachen Sie Kosten in Echtzeit."
+        audience={['DevOps', 'Entwickler', 'System-Admins']}
+        architecture={{
+          services: ['vast.ai API', 'Ollama', 'VLLM'],
+          databases: ['PostgreSQL (Logs)'],
+        }}
+        relatedPages={[
+          { name: 'LLM Vergleich', href: '/ai/llm-compare', description: 'KI-Provider testen' },
+          { name: 'Test Quality (BQAS)', href: '/ai/test-quality', description: 'Golden Suite & Tests' },
+          { name: 'Magic Help', href: '/ai/magic-help', description: 'TrOCR Testing' },
+        ]}
+        collapsible={true}
+        defaultCollapsed={true}
+      />
+
+      {/* KI-Werkzeuge Sidebar */}
+      <AIToolsSidebarResponsive currentTool="gpu" />
+
+      {/* Status Cards */}
+      <div className="bg-white rounded-xl border border-slate-200 p-6 mb-6">
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
+          <div>
+            <div className="text-sm text-slate-500 mb-2">Status</div>
+            {loading ? (
+              <span className="px-3 py-1 rounded-full text-sm font-semibold bg-slate-100 text-slate-600">
+                Laden...
+              </span>
+            ) : (
+              <span className={getStatusBadge(
+                actionLoading === 'on' ? 'starting...' :
+                actionLoading === 'off' ? 'stopping...' :
+                status?.status || 'unknown'
+              )}>
+                {actionLoading === 'on' ? 'starting...' :
+                 actionLoading === 'off' ? 'stopping...' :
+                 status?.status || 'unbekannt'}
+              </span>
+            )}
+          </div>
+
+          <div>
+            <div className="text-sm text-slate-500 mb-2">GPU</div>
+            <div className="font-semibold text-slate-900">
+              {status?.gpu_name || '-'}
+            </div>
+          </div>
+
+          <div>
+            <div className="text-sm text-slate-500 mb-2">Kosten/h</div>
+            <div className="font-semibold text-slate-900">
+              {status?.dph_total ? `$${status.dph_total.toFixed(3)}` : '-'}
+            </div>
+          </div>
+
+          <div>
+            <div className="text-sm text-slate-500 mb-2">Auto-Stop</div>
+            <div className="font-semibold text-slate-900">
+              {status && status.auto_shutdown_in_minutes !== null
+                ? `${status.auto_shutdown_in_minutes} min`
+                : '-'}
+            </div>
+          </div>
+
+          <div>
+            <div className="text-sm text-slate-500 mb-2">Budget</div>
+            <div className={`font-bold text-lg ${getCreditColor(status?.account_credit ?? null)}`}>
+              {status && status.account_credit !== null
+                ? `$${status.account_credit.toFixed(2)}`
+                : '-'}
+            </div>
+          </div>
+
+          <div>
+            <div className="text-sm text-slate-500 mb-2">Session</div>
+            <div className="font-semibold text-slate-900">
+              {status && status.session_runtime_minutes !== null && status.session_cost_usd !== null
+                ? `${Math.round(status.session_runtime_minutes)} min / $${status.session_cost_usd.toFixed(3)}`
+                : '-'}
+            </div>
+          </div>
+        </div>
+
+        {/* Buttons */}
+        <div className="flex items-center gap-4 mt-6 pt-6 border-t border-slate-200">
+          <button
+            onClick={powerOn}
+            disabled={actionLoading !== null || status?.status === 'running'}
+            className="px-6 py-2 bg-orange-600 text-white rounded-lg font-medium hover:bg-orange-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            Starten
+          </button>
+          <button
+            onClick={powerOff}
+            disabled={actionLoading !== null || status?.status !== 'running'}
+            className="px-6 py-2 bg-red-600 text-white rounded-lg font-medium hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            Stoppen
+          </button>
+          <button
+            onClick={fetchStatus}
+            disabled={loading}
+            className="px-4 py-2 border border-slate-300 text-slate-700 rounded-lg font-medium hover:bg-slate-50 disabled:opacity-50 transition-colors"
+          >
+            {loading ? 'Aktualisiere...' : 'Aktualisieren'}
+          </button>
+
+          {message && (
+            <span className="ml-4 text-sm text-green-600 font-medium">{message}</span>
+          )}
+          {error && (
+            <span className="ml-4 text-sm text-red-600 font-medium">{error}</span>
+          )}
+        </div>
+      </div>
+
+      {/* Extended Stats */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+        <div className="bg-white rounded-xl border border-slate-200 p-6">
+          <h3 className="font-semibold text-slate-900 mb-4">Kosten-Uebersicht</h3>
+          <div className="space-y-4">
+            <div className="flex justify-between items-center">
+              <span className="text-slate-600">Session Laufzeit</span>
+              <span className="font-semibold">
+                {status && status.session_runtime_minutes !== null
+                  ? `${Math.round(status.session_runtime_minutes)} Minuten`
+                  : '-'}
+              </span>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="text-slate-600">Session Kosten</span>
+              <span className="font-semibold">
+                {status && status.session_cost_usd !== null
+                  ? `$${status.session_cost_usd.toFixed(4)}`
+                  : '-'}
+              </span>
+            </div>
+            <div className="flex justify-between items-center pt-4 border-t border-slate-100">
+              <span className="text-slate-600">Gesamtlaufzeit</span>
+              <span className="font-semibold">
+                {status && status.total_runtime_hours !== null
+                  ? `${status.total_runtime_hours.toFixed(1)} Stunden`
+                  : '-'}
+              </span>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="text-slate-600">Gesamtkosten</span>
+              <span className="font-semibold">
+                {status && status.total_cost_usd !== null
+                  ? `$${status.total_cost_usd.toFixed(2)}`
+                  : '-'}
+              </span>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="text-slate-600">vast.ai Ausgaben</span>
+              <span className="font-semibold">
+                {status && status.account_total_spend !== null
+                  ? `$${status.account_total_spend.toFixed(2)}`
+                  : '-'}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-xl border border-slate-200 p-6">
+          <h3 className="font-semibold text-slate-900 mb-4">Instanz-Details</h3>
+          <div className="space-y-4">
+            <div className="flex justify-between items-center">
+              <span className="text-slate-600">Instanz ID</span>
+              <span className="font-mono text-sm">
+                {status?.instance_id || '-'}
+              </span>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="text-slate-600">GPU</span>
+              <span className="font-semibold">
+                {status?.gpu_name || '-'}
+              </span>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="text-slate-600">Stundensatz</span>
+              <span className="font-semibold">
+                {status?.dph_total ? `$${status.dph_total.toFixed(4)}/h` : '-'}
+              </span>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="text-slate-600">Letzte Aktivitaet</span>
+              <span className="text-sm">
+                {status?.last_activity
+                  ? new Date(status.last_activity).toLocaleString('de-DE')
+                  : '-'}
+              </span>
+            </div>
+            {status?.endpoint_base_url && status.status === 'running' && (
+              <div className="pt-4 border-t border-slate-100">
+                <div className="text-slate-600 text-sm mb-1">Endpoint</div>
+                <code className="text-xs bg-slate-100 px-2 py-1 rounded block overflow-x-auto">
+                  {status.endpoint_base_url}
+                </code>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Info */}
+      <div className="bg-violet-50 border border-violet-200 rounded-xl p-4">
+        <div className="flex gap-3">
+          <svg className="w-5 h-5 text-violet-600 flex-shrink-0 mt-0.5" 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>
+          <div>
+            <h4 className="font-semibold text-violet-900">Auto-Shutdown</h4>
+            <p className="text-sm text-violet-800 mt-1">
+              Die GPU-Instanz wird automatisch gestoppt, wenn sie laengere Zeit inaktiv ist.
+              Der Status wird alle 30 Sekunden automatisch aktualisiert.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

admin-v2/app/(admin)/ai/llm-compare/page.tsx

@@ -12,6 +12,7 @@
 
 import { useState, useEffect, useCallback } from 'react'
 import { PagePurpose } from '@/components/common/PagePurpose'
+import { AIToolsSidebarResponsive } from '@/components/ai/AIToolsSidebar'
 
 interface LLMResponse {
   provider: string
@@ -210,21 +211,24 @@ export default function LLMComparePage() {
       {/* Page Purpose */}
       <PagePurpose
         title="LLM Vergleich"
-        purpose="Vergleichen Sie Antworten verschiedener KI-Provider (OpenAI, Claude, Self-hosted) fuer Qualitaetssicherung. Optimieren Sie Parameter und System Prompts fuer beste Ergebnisse."
+        purpose="Vergleichen Sie Antworten verschiedener KI-Provider (OpenAI, Claude, Self-hosted) fuer Qualitaetssicherung. Optimieren Sie Parameter und System Prompts fuer beste Ergebnisse. Standalone-Werkzeug ohne direkten Datenfluss zur KI-Pipeline."
         audience={['Entwickler', 'Data Scientists', 'QA']}
         architecture={{
           services: ['llm-gateway (Python)', 'Ollama', 'OpenAI API', 'Claude API'],
           databases: ['PostgreSQL (History)', 'Qdrant (RAG)'],
         }}
         relatedPages={[
-          { name: 'RAG Management', href: '/ai/rag', description: 'Training Data verwalten' },
-          { name: 'GPU Infrastruktur', href: '/infrastructure/gpu', description: 'GPU-Ressourcen' },
-          { name: 'OCR-Labeling', href: '/ai/ocr-labeling', description: 'Handschrift-Training' },
+          { name: 'Test Quality (BQAS)', href: '/ai/test-quality', description: 'Golden Suite & Synthetic Tests' },
+          { name: 'GPU Infrastruktur', href: '/ai/gpu', description: 'GPU-Ressourcen verwalten' },
+          { name: 'Agent Management', href: '/ai/agents', description: 'Multi-Agent System' },
         ]}
         collapsible={true}
         defaultCollapsed={true}
       />
 
+      {/* KI-Werkzeuge Sidebar */}
+      <AIToolsSidebarResponsive currentTool="llm-compare" />
+
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         {/* Left Column: Input & Settings */}
         <div className="lg:col-span-1 space-y-4">

admin-v2/app/(admin)/ai/ocr-labeling/page.tsx

@@ -0,0 +1,987 @@
+'use client'
+
+/**
+ * OCR Labeling Admin Page
+ *
+ * Labeling interface for handwriting training data collection.
+ * DSGVO-konform: Alle Verarbeitung lokal auf Mac Mini (Ollama).
+ *
+ * Teil der KI-Daten-Pipeline:
+ * OCR-Labeling → RAG Pipeline → Daten & RAG
+ */
+
+import { useState, useEffect, useCallback, useRef } from 'react'
+import Link from 'next/link'
+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>
+    ),
+  },
+]
+
+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>
+    )
+  }
+
+  return (
+    <div className="p-6">
+      {/* Header */}
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">OCR-Labeling</h1>
+        <p className="text-gray-600 dark:text-gray-400">Handschrift-Training & Ground Truth Erfassung</p>
+      </div>
+
+      {/* Page Purpose with Related Pages */}
+      <PagePurpose
+        title="OCR-Labeling"
+        purpose="Erstellen Sie Ground Truth Daten für das Training von Handschrift-Erkennungsmodellen. Labeln Sie OCR-Ergebnisse, korrigieren Sie Fehler und exportieren Sie Trainingsdaten für TrOCR, Llama Vision und andere Modelle. Teil der KI-Daten-Pipeline: Gelabelte Daten können zur RAG Pipeline exportiert werden."
+        audience={['Entwickler', 'Data Scientists', 'QA-Team']}
+        architecture={{
+          services: ['klausur-service (Python)'],
+          databases: ['PostgreSQL', 'MinIO (Bilder)'],
+        }}
+        relatedPages={[
+          { name: 'Magic Help', href: '/ai/magic-help', description: 'TrOCR testen & fine-tunen' },
+          { name: 'RAG Pipeline', href: '/ai/rag-pipeline', description: 'Trainierte Daten indexieren' },
+          { name: 'Klausur-Korrektur', href: '/ai/klausur-korrektur', description: 'OCR in Aktion' },
+          { name: 'Daten & RAG', href: '/ai/rag', description: 'Indexierte Daten durchsuchen' },
+        ]}
+        collapsible={true}
+        defaultCollapsed={true}
+      />
+
+      {/* AI Module Sidebar - Desktop: Fixed, Mobile: FAB + Drawer */}
+      <AIModuleSidebarResponsive currentModule="ocr-labeling" />
+
+      {/* Error Toast */}
+      {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>
+        </div>
+      )}
+
+      {/* Tabs */}
+      <div className="mb-6">
+        <div className="border-b border-slate-200">
+          <nav className="flex space-x-4" aria-label="Tabs">
+            {tabs.map((tab) => (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={`flex items-center gap-2 px-4 py-3 border-b-2 font-medium text-sm transition-colors ${
+                  activeTab === tab.id
+                    ? 'border-primary-500 text-primary-600'
+                    : 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300'
+                }`}
+              >
+                {tab.icon}
+                {tab.name}
+              </button>
+            ))}
+          </nav>
+        </div>
+      </div>
+
+      {/* Tab Content */}
+      {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()}
+        </>
+      )}
+    </div>
+  )
+}

admin-v2/app/(admin)/ai/ocr-labeling/types.ts

@@ -0,0 +1,123 @@
+/**
+ * TypeScript types for OCR Labeling UI
+ */
+
+/**
+ * Available OCR Models
+ *
+ * - llama3.2-vision:11b: Vision LLM, beste Qualitaet bei Handschrift (Standard)
+ * - trocr: Microsoft TrOCR, schnell bei gedrucktem Text
+ * - paddleocr: PaddleOCR + LLM, 4x schneller durch Hybrid-Ansatz
+ * - donut: Document Understanding Transformer, strukturierte Dokumente
+ */
+export type OCRModel = 'llama3.2-vision:11b' | 'trocr' | 'paddleocr' | 'donut'
+
+export const OCR_MODEL_INFO: Record<OCRModel, { label: string; description: string; speed: string }> = {
+  'llama3.2-vision:11b': {
+    label: 'Vision LLM',
+    description: 'Beste Qualitaet bei Handschrift',
+    speed: 'langsam',
+  },
+  trocr: {
+    label: 'Microsoft TrOCR',
+    description: 'Schnell bei gedrucktem Text',
+    speed: 'schnell',
+  },
+  paddleocr: {
+    label: 'PaddleOCR + LLM',
+    description: 'Hybrid-Ansatz: OCR + Strukturierung',
+    speed: 'sehr schnell',
+  },
+  donut: {
+    label: 'Donut',
+    description: 'Document Understanding fuer Tabellen/Formulare',
+    speed: 'mittel',
+  },
+}
+
+export interface OCRSession {
+  id: string
+  name: string
+  source_type: 'klausur' | 'handwriting_sample' | 'scan'
+  description?: string
+  ocr_model?: OCRModel
+  total_items: number
+  labeled_items: number
+  confirmed_items: number
+  corrected_items: number
+  skipped_items: number
+  created_at: string
+}
+
+export interface OCRItem {
+  id: string
+  session_id: string
+  session_name: string
+  image_path: string
+  image_url?: string
+  ocr_text?: string
+  ocr_confidence?: number
+  ground_truth?: string
+  status: 'pending' | 'confirmed' | 'corrected' | 'skipped'
+  metadata?: Record<string, unknown>
+  created_at: string
+}
+
+export interface OCRStats {
+  total_sessions?: number
+  session_id?: string
+  name?: string
+  total_items: number
+  labeled_items: number
+  confirmed_items: number
+  corrected_items: number
+  skipped_items?: number
+  pending_items: number
+  exportable_items?: number
+  accuracy_rate: number
+  avg_label_time_seconds?: number
+  progress_percent?: number
+}
+
+export interface TrainingSample {
+  id: string
+  image_path: string
+  ground_truth: string
+  export_format: 'generic' | 'trocr' | 'llama_vision'
+  training_batch: string
+  exported_at?: string
+}
+
+export interface CreateSessionRequest {
+  name: string
+  source_type: 'klausur' | 'handwriting_sample' | 'scan'
+  description?: string
+  ocr_model?: OCRModel
+}
+
+export interface ConfirmRequest {
+  item_id: string
+  label_time_seconds?: number
+}
+
+export interface CorrectRequest {
+  item_id: string
+  ground_truth: string
+  label_time_seconds?: number
+}
+
+export interface ExportRequest {
+  export_format: 'generic' | 'trocr' | 'llama_vision'
+  session_id?: string
+  batch_id?: string
+}
+
+export interface UploadResult {
+  id: string
+  filename: string
+  image_path: string
+  image_hash: string
+  ocr_text?: string
+  ocr_confidence?: number
+  status: string
+}

admin-v2/app/(admin)/ai/rag/page.tsx

@@ -10,6 +10,7 @@
 import React, { useState, useEffect, useCallback } from 'react'
 import Link from 'next/link'
 import { PagePurpose } from '@/components/common/PagePurpose'
+import { AIModuleSidebarResponsive } from '@/components/ai/AIModuleSidebar'
 
 // API uses local proxy route to klausur-service
 const API_PROXY = '/api/legal-corpus'
@@ -1021,20 +1022,25 @@ export default function RAGPage() {
       <div className="p-6">
         {/* Page Purpose */}
         <PagePurpose
-          title="Legal Corpus RAG"
-          purpose="Das Legal Corpus RAG System indexiert alle 19 relevanten Regulierungen (DSGVO, AI Act, CRA, BSI TR-03161, etc.) fuer semantische Suche waehrend UCCA-Assessments. Die Dokumente werden in Chunks aufgeteilt und mit BGE-M3 Embeddings indexiert."
+          title="Daten & RAG"
+          purpose="Verwalten und durchsuchen Sie indexierte Dokumente im RAG-System. Das Legal Corpus enthält 19+ Regulierungen (DSGVO, AI Act, CRA, BSI TR-03161, etc.) für semantische Suche. Teil der KI-Daten-Pipeline: Empfängt Embeddings von der RAG Pipeline und liefert Suchergebnisse an die Klausur-Korrektur."
           audience={['DSB', 'Compliance Officer', 'Entwickler']}
           gdprArticles={['§5 UrhG (Amtliche Werke)', 'Art. 5 DSGVO (Rechenschaftspflicht)']}
           architecture={{
             services: ['klausur-service (Python)', 'embedding-service (BGE-M3)', 'Qdrant (Vector DB)'],
-            databases: ['Qdrant Collection: bp_legal_corpus'],
+            databases: ['Qdrant Collections: bp_legal_corpus, bp_nibis_eh, bp_eh'],
           }}
           relatedPages={[
+            { name: 'RAG Pipeline', href: '/ai/rag-pipeline', description: 'Neue Dokumente indexieren' },
+            { name: 'Klausur-Korrektur', href: '/ai/klausur-korrektur', description: 'RAG-Suche nutzen' },
+            { name: 'OCR-Labeling', href: '/ai/ocr-labeling', description: 'Ground Truth erstellen' },
             { name: 'Compliance Hub', href: '/compliance/hub', description: 'Compliance-Dashboard' },
-            { name: 'Requirements', href: '/compliance/requirements', description: 'Anforderungskatalog' },
           ]}
         />
 
+        {/* AI Module Sidebar - Desktop: Fixed, Mobile: FAB + Drawer */}
+        <AIModuleSidebarResponsive currentModule="rag" />
+
         {/* Stats Cards */}
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
           <div className="bg-white rounded-xl p-4 border border-slate-200">

admin-v2/app/(admin)/ai/test-quality/page.tsx

@@ -14,6 +14,7 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
 import Link from 'next/link'
 import { PagePurpose } from '@/components/common/PagePurpose'
+import { AIToolsSidebarResponsive } from '@/components/ai/AIToolsSidebar'
 import type { TestRun, BQASMetrics, TrendData, TabType } from './types'
 
 // API Configuration - Use internal proxy to avoid CORS issues
@@ -1429,14 +1430,17 @@ export default function TestQualityPage() {
           databases: ['Qdrant', 'PostgreSQL'],
         }}
         relatedPages={[
-          { name: 'CI/CD Scheduler', href: '/infrastructure/ci-cd', description: 'Automatische Test-Planung' },
-          { name: 'RAG Management', href: '/ai/rag', description: 'Training Data & RAG Pipelines' },
           { name: 'LLM Vergleich', href: '/ai/llm-compare', description: 'Provider-Vergleich' },
+          { name: 'GPU Infrastruktur', href: '/ai/gpu', description: 'GPU-Ressourcen verwalten' },
+          { name: 'RAG Management', href: '/ai/rag', description: 'Training Data & RAG Pipelines' },
         ]}
         collapsible={true}
         defaultCollapsed={true}
       />
 
+      {/* KI-Werkzeuge Sidebar */}
+      <AIToolsSidebarResponsive currentTool="test-quality" />
+
       {error && (
         <div className="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 flex items-center gap-3">
           <svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">