feat: Sprint 1 — IPA hardening, regression framework, ground-truth review

Track A (Backend):
- Compound word IPA decomposition (schoolbag→school+bag)
- Trailing garbled IPA fragment removal after brackets (R21 fix)
- Regression runner with DB persistence, history endpoints
- Page crop determinism verified with tests

Track B (Frontend):
- OCR Regression dashboard (/ai/ocr-regression)
- Ground Truth Review workflow (/ai/ocr-ground-truth)
  with split-view, confidence highlighting, inline edit,
  batch mark, progress tracking

Track C (Docs):
- OCR-Pipeline.md v5.0 (Steps 5e-5h)
- Regression testing guide
- mkdocs.yml nav update

Track D (Infra):
- TrOCR baseline benchmark script
- run-regression.sh shell script
- Migration 008: regression_runs table

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

admin-lehrer/app/(admin)/ai/ocr-ground-truth/page.tsx

@@ -0,0 +1,580 @@
+'use client'
+
+/**
+ * Ground-Truth Review Workflow
+ *
+ * Efficient mass-review of OCR sessions:
+ * - Session queue with auto-advance
+ * - Split-view: original image left, grid right
+ * - Confidence highlighting on cells
+ * - Quick-accept per row
+ * - Inline cell editing
+ * - Batch mark as ground truth
+ * - Progress tracking
+ */
+
+import { useState, useEffect, useCallback, useRef } from 'react'
+import { PagePurpose } from '@/components/common/PagePurpose'
+import { AIToolsSidebarResponsive } from '@/components/ai/AIToolsSidebar'
+
+const KLAUSUR_API = '/klausur-api'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface Session {
+  id: string
+  name: string
+  filename: string
+  status: string
+  created_at: string
+  document_category: string | null
+  has_ground_truth: boolean
+}
+
+interface GridZone {
+  zone_id: string
+  zone_type: string
+  columns: Array<{ col_index: number; col_type: string; header: string }>
+  rows: Array<{ row_index: number; is_header: boolean }>
+  cells: GridCell[]
+}
+
+interface GridCell {
+  cell_id: string
+  row_index: number
+  col_index: number
+  col_type: string
+  text: string
+  confidence?: number
+  is_bold?: boolean
+}
+
+interface GridResult {
+  zones: GridZone[]
+  summary?: {
+    total_zones: number
+    total_columns: number
+    total_rows: number
+    total_cells: number
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function confidenceColor(conf: number | undefined): string {
+  if (conf === undefined) return ''
+  if (conf >= 80) return 'bg-emerald-50'
+  if (conf >= 50) return 'bg-amber-50'
+  return 'bg-red-50'
+}
+
+function confidenceBorder(conf: number | undefined): string {
+  if (conf === undefined) return 'border-slate-200'
+  if (conf >= 80) return 'border-emerald-200'
+  if (conf >= 50) return 'border-amber-300'
+  return 'border-red-300'
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export default function GroundTruthReviewPage() {
+  // Session list & queue
+  const [allSessions, setAllSessions] = useState<Session[]>([])
+  const [filter, setFilter] = useState<'all' | 'unreviewed' | 'reviewed'>('unreviewed')
+  const [currentIdx, setCurrentIdx] = useState(0)
+  const [loading, setLoading] = useState(true)
+
+  // Current session data
+  const [grid, setGrid] = useState<GridResult | null>(null)
+  const [loadingGrid, setLoadingGrid] = useState(false)
+  const [editingCell, setEditingCell] = useState<string | null>(null)
+  const [editText, setEditText] = useState('')
+  const [acceptedRows, setAcceptedRows] = useState<Set<string>>(new Set())
+  const [zoom, setZoom] = useState(100)
+
+  // Batch operations
+  const [selectedSessions, setSelectedSessions] = useState<Set<string>>(new Set())
+  const [marking, setMarking] = useState(false)
+  const [markResult, setMarkResult] = useState<string | null>(null)
+
+  // Stats
+  const [reviewedCount, setReviewedCount] = useState(0)
+  const [totalCount, setTotalCount] = useState(0)
+
+  const imageRef = useRef<HTMLDivElement>(null)
+
+  // Load all sessions
+  const loadSessions = useCallback(async () => {
+    setLoading(true)
+    try {
+      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions?limit=200`)
+      if (!res.ok) return
+      const data = await res.json()
+      const sessions: Session[] = (data.sessions || []).map((s: any) => ({
+        id: s.id,
+        name: s.name || '',
+        filename: s.filename || '',
+        status: s.status || 'active',
+        created_at: s.created_at || '',
+        document_category: s.document_category || null,
+        has_ground_truth: !!(s.ground_truth && s.ground_truth.build_grid_reference),
+      }))
+      setAllSessions(sessions)
+      setTotalCount(sessions.length)
+      setReviewedCount(sessions.filter(s => s.has_ground_truth).length)
+    } catch (e) {
+      console.error('Failed to load sessions:', e)
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { loadSessions() }, [loadSessions])
+
+  // Filtered sessions
+  const filteredSessions = allSessions.filter(s => {
+    if (filter === 'unreviewed') return !s.has_ground_truth && s.status === 'active'
+    if (filter === 'reviewed') return s.has_ground_truth
+    return true
+  })
+
+  const currentSession = filteredSessions[currentIdx] || null
+
+  // Load grid for current session
+  const loadGrid = useCallback(async (sessionId: string) => {
+    setLoadingGrid(true)
+    setGrid(null)
+    setAcceptedRows(new Set())
+    setEditingCell(null)
+    try {
+      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/grid-editor`)
+      if (res.ok) {
+        const data = await res.json()
+        setGrid(data.grid || data)
+      }
+    } catch (e) {
+      console.error('Failed to load grid:', e)
+    } finally {
+      setLoadingGrid(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (currentSession) loadGrid(currentSession.id)
+  }, [currentSession, loadGrid])
+
+  // Navigation
+  const goNext = () => {
+    if (currentIdx < filteredSessions.length - 1) setCurrentIdx(currentIdx + 1)
+  }
+  const goPrev = () => {
+    if (currentIdx > 0) setCurrentIdx(currentIdx - 1)
+  }
+
+  // Accept row
+  const acceptRow = (zoneId: string, rowIdx: number) => {
+    const key = `${zoneId}-${rowIdx}`
+    setAcceptedRows(prev => new Set([...prev, key]))
+  }
+
+  // Edit cell
+  const startEdit = (cell: GridCell) => {
+    setEditingCell(cell.cell_id)
+    setEditText(cell.text)
+  }
+
+  const saveEdit = async () => {
+    if (!editingCell || !currentSession) return
+    try {
+      await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${currentSession.id}/update-cell`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ cell_id: editingCell, text: editText }),
+      })
+      // Update local state
+      if (grid) {
+        const newGrid = { ...grid }
+        for (const zone of newGrid.zones) {
+          for (const cell of zone.cells) {
+            if (cell.cell_id === editingCell) {
+              cell.text = editText
+            }
+          }
+        }
+        setGrid(newGrid)
+      }
+    } catch (e) {
+      console.error('Failed to save cell:', e)
+    }
+    setEditingCell(null)
+  }
+
+  // Mark as ground truth
+  const markGroundTruth = async (sessionId: string) => {
+    setMarking(true)
+    setMarkResult(null)
+    try {
+      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/mark-ground-truth`, {
+        method: 'POST',
+      })
+      if (res.ok) {
+        setMarkResult('success')
+        // Update local session state
+        setAllSessions(prev => prev.map(s =>
+          s.id === sessionId ? { ...s, has_ground_truth: true } : s
+        ))
+        setReviewedCount(prev => prev + 1)
+      } else {
+        setMarkResult('error')
+      }
+    } catch {
+      setMarkResult('error')
+    } finally {
+      setMarking(false)
+    }
+  }
+
+  // Batch mark
+  const batchMark = async () => {
+    setMarking(true)
+    let success = 0
+    for (const sid of selectedSessions) {
+      try {
+        const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sid}/mark-ground-truth`, {
+          method: 'POST',
+        })
+        if (res.ok) success++
+      } catch { /* skip */ }
+    }
+    setAllSessions(prev => prev.map(s =>
+      selectedSessions.has(s.id) ? { ...s, has_ground_truth: true } : s
+    ))
+    setReviewedCount(prev => prev + success)
+    setSelectedSessions(new Set())
+    setMarking(false)
+    setMarkResult(`${success} Sessions als Ground Truth markiert`)
+    setTimeout(() => setMarkResult(null), 3000)
+  }
+
+  // All cells for current grid
+  const allCells = grid?.zones?.flatMap(z => z.cells) || []
+  const lowConfCells = allCells.filter(c => (c.confidence ?? 100) < 50)
+
+  const imageUrl = currentSession
+    ? `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${currentSession.id}/image/original`
+    : null
+
+  return (
+    <AIToolsSidebarResponsive>
+      <div className="max-w-[1600px] mx-auto p-4 space-y-4">
+        <PagePurpose moduleId="ocr-ground-truth" />
+
+        {/* Progress Bar */}
+        <div className="bg-white rounded-lg border border-slate-200 p-4">
+          <div className="flex items-center justify-between mb-2">
+            <h2 className="text-lg font-bold text-slate-900">Ground Truth Review</h2>
+            <span className="text-sm text-slate-500">
+              {reviewedCount} von {totalCount} geprueft ({totalCount > 0 ? Math.round(reviewedCount / totalCount * 100) : 0}%)
+            </span>
+          </div>
+          <div className="w-full bg-slate-100 rounded-full h-2.5">
+            <div
+              className="bg-teal-500 h-2.5 rounded-full transition-all duration-500"
+              style={{ width: `${totalCount > 0 ? (reviewedCount / totalCount) * 100 : 0}%` }}
+            />
+          </div>
+        </div>
+
+        {/* Filter + Queue */}
+        <div className="flex items-center gap-4">
+          <div className="flex gap-1 bg-slate-100 rounded-lg p-1">
+            {(['unreviewed', 'reviewed', 'all'] as const).map(f => (
+              <button
+                key={f}
+                onClick={() => { setFilter(f); setCurrentIdx(0) }}
+                className={`px-3 py-1.5 text-sm rounded-md transition-colors ${
+                  filter === f
+                    ? 'bg-white text-slate-900 shadow-sm font-medium'
+                    : 'text-slate-500 hover:text-slate-700'
+                }`}
+              >
+                {f === 'unreviewed' ? 'Offen' : f === 'reviewed' ? 'Geprueft' : 'Alle'}
+                <span className="ml-1 text-xs text-slate-400">
+                  ({allSessions.filter(s =>
+                    f === 'unreviewed' ? !s.has_ground_truth && s.status === 'active'
+                      : f === 'reviewed' ? s.has_ground_truth
+                        : true
+                  ).length})
+                </span>
+              </button>
+            ))}
+          </div>
+
+          {/* Navigation */}
+          <div className="flex items-center gap-2 ml-auto">
+            <button onClick={goPrev} disabled={currentIdx === 0}
+              className="p-2 rounded hover:bg-slate-100 disabled:opacity-30 disabled:cursor-not-allowed">
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+              </svg>
+            </button>
+            <span className="text-sm text-slate-500 min-w-[80px] text-center">
+              {filteredSessions.length > 0 ? `${currentIdx + 1} / ${filteredSessions.length}` : '—'}
+            </span>
+            <button onClick={goNext} disabled={currentIdx >= filteredSessions.length - 1}
+              className="p-2 rounded hover:bg-slate-100 disabled:opacity-30 disabled:cursor-not-allowed">
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+            </button>
+          </div>
+
+          {/* Batch mark button */}
+          {selectedSessions.size > 0 && (
+            <button
+              onClick={batchMark}
+              disabled={marking}
+              className="px-3 py-1.5 bg-teal-600 text-white text-sm rounded-lg hover:bg-teal-700 disabled:opacity-50"
+            >
+              {selectedSessions.size} markieren
+            </button>
+          )}
+        </div>
+
+        {/* Toast */}
+        {markResult && (
+          <div className={`p-3 rounded-lg text-sm ${
+            markResult === 'error' ? 'bg-red-50 text-red-700 border border-red-200'
+              : markResult === 'success' ? 'bg-emerald-50 text-emerald-700 border border-emerald-200'
+                : 'bg-blue-50 text-blue-700 border border-blue-200'
+          }`}>
+            {markResult === 'success' ? 'Als Ground Truth markiert!' : markResult === 'error' ? 'Fehler beim Markieren' : markResult}
+          </div>
+        )}
+
+        {/* Main Content: Split View */}
+        {loading ? (
+          <div className="text-center py-12 text-slate-400">Lade Sessions...</div>
+        ) : !currentSession ? (
+          <div className="text-center py-12 text-slate-400">
+            <p className="text-lg">Keine Sessions in dieser Ansicht</p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-2 gap-4" style={{ minHeight: '70vh' }}>
+            {/* Left: Original Image */}
+            <div className="bg-white rounded-lg border border-slate-200 overflow-hidden flex flex-col">
+              <div className="flex items-center justify-between px-3 py-2 border-b border-slate-100 bg-slate-50">
+                <span className="text-sm font-medium text-slate-700 truncate">
+                  {currentSession.name || currentSession.filename}
+                </span>
+                <div className="flex items-center gap-2">
+                  <button onClick={() => setZoom(z => Math.max(50, z - 25))}
+                    className="px-2 py-0.5 text-xs bg-slate-200 rounded hover:bg-slate-300">-</button>
+                  <span className="text-xs text-slate-500 w-10 text-center">{zoom}%</span>
+                  <button onClick={() => setZoom(z => Math.min(300, z + 25))}
+                    className="px-2 py-0.5 text-xs bg-slate-200 rounded hover:bg-slate-300">+</button>
+                </div>
+              </div>
+              <div ref={imageRef} className="flex-1 overflow-auto p-2">
+                {imageUrl && (
+                  <img
+                    src={imageUrl}
+                    alt="Original scan"
+                    style={{ width: `${zoom}%`, maxWidth: 'none' }}
+                    className="block"
+                  />
+                )}
+              </div>
+            </div>
+
+            {/* Right: Grid Review */}
+            <div className="bg-white rounded-lg border border-slate-200 overflow-hidden flex flex-col">
+              <div className="flex items-center justify-between px-3 py-2 border-b border-slate-100 bg-slate-50">
+                <div className="flex items-center gap-3">
+                  <span className="text-sm font-medium text-slate-700">
+                    {allCells.length} Zellen
+                  </span>
+                  {lowConfCells.length > 0 && (
+                    <span className="text-xs bg-red-100 text-red-700 px-2 py-0.5 rounded-full">
+                      {lowConfCells.length} niedrige Konfidenz
+                    </span>
+                  )}
+                </div>
+                <div className="flex items-center gap-2">
+                  {!currentSession.has_ground_truth && (
+                    <button
+                      onClick={() => markGroundTruth(currentSession.id)}
+                      disabled={marking}
+                      className="px-3 py-1 bg-teal-600 text-white text-xs rounded hover:bg-teal-700 disabled:opacity-50"
+                    >
+                      {marking ? 'Markiere...' : 'Als Ground Truth markieren'}
+                    </button>
+                  )}
+                  {currentSession.has_ground_truth && (
+                    <span className="text-xs bg-emerald-100 text-emerald-700 px-2 py-0.5 rounded-full">
+                      Ground Truth
+                    </span>
+                  )}
+                  <button
+                    onClick={() => { markGroundTruth(currentSession.id); setTimeout(goNext, 500) }}
+                    disabled={marking}
+                    className="px-3 py-1 bg-slate-600 text-white text-xs rounded hover:bg-slate-700 disabled:opacity-50"
+                  >
+                    Markieren & Weiter
+                  </button>
+                </div>
+              </div>
+
+              {/* Grid Content */}
+              <div className="flex-1 overflow-auto">
+                {loadingGrid ? (
+                  <div className="flex items-center justify-center h-full text-slate-400">
+                    <svg className="animate-spin h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24">
+                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                    </svg>
+                    Lade Grid...
+                  </div>
+                ) : !grid || !grid.zones ? (
+                  <div className="text-center py-8 text-slate-400 text-sm">
+                    Kein Grid vorhanden. Bitte zuerst die Pipeline ausfuehren.
+                  </div>
+                ) : (
+                  <div className="p-3 space-y-4">
+                    {grid.zones.map((zone, zi) => (
+                      <div key={zone.zone_id || zi} className="space-y-1">
+                        {/* Zone header */}
+                        <div className="text-xs text-slate-400 uppercase tracking-wide">
+                          Zone {zi + 1} ({zone.zone_type})
+                          {zone.columns?.length > 0 && (
+                            <span className="ml-2">
+                              {zone.columns.map(c => c.col_type.replace('column_', '')).join(' | ')}
+                            </span>
+                          )}
+                        </div>
+
+                        {/* Group cells by row */}
+                        {Array.from(new Set(zone.cells.map(c => c.row_index)))
+                          .sort((a, b) => a - b)
+                          .map(rowIdx => {
+                            const rowCells = zone.cells
+                              .filter(c => c.row_index === rowIdx)
+                              .sort((a, b) => a.col_index - b.col_index)
+                            const rowKey = `${zone.zone_id || zi}-${rowIdx}`
+                            const isAccepted = acceptedRows.has(rowKey)
+
+                            return (
+                              <div
+                                key={rowKey}
+                                className={`flex items-start gap-1 group ${isAccepted ? 'opacity-60' : ''}`}
+                              >
+                                {/* Quick accept button */}
+                                <button
+                                  onClick={() => acceptRow(zone.zone_id || String(zi), rowIdx)}
+                                  className={`flex-shrink-0 w-6 h-6 rounded flex items-center justify-center mt-0.5 transition-colors ${
+                                    isAccepted
+                                      ? 'bg-emerald-100 text-emerald-600'
+                                      : 'bg-slate-100 text-slate-400 hover:bg-emerald-100 hover:text-emerald-600'
+                                  }`}
+                                  title="Zeile als korrekt markieren"
+                                >
+                                  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                                  </svg>
+                                </button>
+
+                                {/* Cells */}
+                                <div className="flex-1 flex gap-1 flex-wrap">
+                                  {rowCells.map(cell => (
+                                    <div
+                                      key={cell.cell_id}
+                                      className={`flex-1 min-w-[80px] px-2 py-1 rounded text-sm border cursor-pointer transition-colors
+                                        ${confidenceColor(cell.confidence)}
+                                        ${confidenceBorder(cell.confidence)}
+                                        ${editingCell === cell.cell_id ? 'ring-2 ring-teal-400' : 'hover:border-teal-300'}
+                                        ${cell.is_bold ? 'font-bold' : ''}
+                                      `}
+                                      onClick={() => !isAccepted && startEdit(cell)}
+                                      title={`Konfidenz: ${cell.confidence ?? '?'}% | ${cell.col_type}`}
+                                    >
+                                      {editingCell === cell.cell_id ? (
+                                        <input
+                                          autoFocus
+                                          value={editText}
+                                          onChange={e => setEditText(e.target.value)}
+                                          onBlur={saveEdit}
+                                          onKeyDown={e => {
+                                            if (e.key === 'Enter') saveEdit()
+                                            if (e.key === 'Escape') setEditingCell(null)
+                                          }}
+                                          className="w-full bg-transparent outline-none text-sm"
+                                        />
+                                      ) : (
+                                        <span className={cell.text ? '' : 'text-slate-300 italic'}>
+                                          {cell.text || '(leer)'}
+                                        </span>
+                                      )}
+                                    </div>
+                                  ))}
+                                </div>
+                              </div>
+                            )
+                          })}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Session List (collapsed) */}
+        {filteredSessions.length > 1 && (
+          <details className="bg-white rounded-lg border border-slate-200">
+            <summary className="px-4 py-3 cursor-pointer text-sm font-medium text-slate-700 hover:bg-slate-50">
+              Session-Liste ({filteredSessions.length})
+            </summary>
+            <div className="border-t border-slate-100 max-h-60 overflow-y-auto">
+              {filteredSessions.map((s, idx) => (
+                <div
+                  key={s.id}
+                  className={`flex items-center gap-3 px-4 py-2 text-sm cursor-pointer hover:bg-slate-50 border-b border-slate-50 ${
+                    idx === currentIdx ? 'bg-teal-50' : ''
+                  }`}
+                  onClick={() => setCurrentIdx(idx)}
+                >
+                  <input
+                    type="checkbox"
+                    checked={selectedSessions.has(s.id)}
+                    onChange={e => {
+                      e.stopPropagation()
+                      setSelectedSessions(prev => {
+                        const next = new Set(prev)
+                        if (next.has(s.id)) next.delete(s.id)
+                        else next.add(s.id)
+                        return next
+                      })
+                    }}
+                    className="rounded border-slate-300"
+                  />
+                  <span className={`w-2 h-2 rounded-full flex-shrink-0 ${s.has_ground_truth ? 'bg-emerald-400' : 'bg-slate-300'}`} />
+                  <span className="truncate flex-1">{s.name || s.filename || s.id}</span>
+                  {s.document_category && (
+                    <span className="text-xs bg-slate-100 px-1.5 py-0.5 rounded text-slate-500">{s.document_category}</span>
+                  )}
+                </div>
+              ))}
+            </div>
+          </details>
+        )}
+      </div>
+    </AIToolsSidebarResponsive>
+  )
+}

admin-lehrer/app/(admin)/ai/ocr-regression/page.tsx

@@ -0,0 +1,391 @@
+'use client'
+
+/**
+ * OCR Regression Dashboard
+ *
+ * Shows all ground-truth sessions, runs regression tests,
+ * displays pass/fail results with diff details, and shows history.
+ */
+
+import { useState, useEffect, useCallback } from 'react'
+import { PagePurpose } from '@/components/common/PagePurpose'
+import { AIToolsSidebarResponsive } from '@/components/ai/AIToolsSidebar'
+
+const KLAUSUR_API = '/klausur-api'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface GTSession {
+  session_id: string
+  name: string
+  filename: string
+  document_category: string | null
+  pipeline: string | null
+  saved_at: string | null
+  summary: {
+    total_zones: number
+    total_columns: number
+    total_rows: number
+    total_cells: number
+  }
+}
+
+interface DiffSummary {
+  structural_changes: number
+  cells_missing: number
+  cells_added: number
+  text_changes: number
+  col_type_changes: number
+}
+
+interface RegressionResult {
+  session_id: string
+  name: string
+  status: 'pass' | 'fail' | 'error'
+  error?: string
+  diff_summary?: DiffSummary
+  reference_summary?: Record<string, number>
+  current_summary?: Record<string, number>
+  structural_diffs?: Array<{ field: string; reference: number; current: number }>
+  cell_diffs?: Array<{ type: string; cell_id: string; reference?: string; current?: string }>
+}
+
+interface RegressionRun {
+  id: string
+  run_at: string
+  status: string
+  total: number
+  passed: number
+  failed: number
+  errors: number
+  duration_ms: number
+  triggered_by: string
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function StatusBadge({ status }: { status: string }) {
+  const cls =
+    status === 'pass'
+      ? 'bg-emerald-100 text-emerald-800 border-emerald-200'
+      : status === 'fail'
+        ? 'bg-red-100 text-red-800 border-red-200'
+        : 'bg-amber-100 text-amber-800 border-amber-200'
+  return (
+    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${cls}`}>
+      {status === 'pass' ? 'Pass' : status === 'fail' ? 'Fail' : 'Error'}
+    </span>
+  )
+}
+
+function formatDate(iso: string | null) {
+  if (!iso) return '—'
+  return new Date(iso).toLocaleString('de-DE', {
+    day: '2-digit', month: '2-digit', year: 'numeric',
+    hour: '2-digit', minute: '2-digit',
+  })
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export default function OCRRegressionPage() {
+  const [sessions, setSessions] = useState<GTSession[]>([])
+  const [results, setResults] = useState<RegressionResult[]>([])
+  const [history, setHistory] = useState<RegressionRun[]>([])
+  const [running, setRunning] = useState(false)
+  const [overallStatus, setOverallStatus] = useState<string | null>(null)
+  const [durationMs, setDurationMs] = useState<number | null>(null)
+  const [expandedSession, setExpandedSession] = useState<string | null>(null)
+  const [tab, setTab] = useState<'current' | 'history'>('current')
+
+  // Load ground-truth sessions
+  const loadSessions = useCallback(async () => {
+    try {
+      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/ground-truth-sessions`)
+      if (res.ok) {
+        const data = await res.json()
+        setSessions(data.sessions || [])
+      }
+    } catch (e) {
+      console.error('Failed to load GT sessions:', e)
+    }
+  }, [])
+
+  // Load history
+  const loadHistory = useCallback(async () => {
+    try {
+      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/regression/history?limit=20`)
+      if (res.ok) {
+        const data = await res.json()
+        setHistory(data.runs || [])
+      }
+    } catch (e) {
+      console.error('Failed to load history:', e)
+    }
+  }, [])
+
+  useEffect(() => {
+    loadSessions()
+    loadHistory()
+  }, [loadSessions, loadHistory])
+
+  // Run all regressions
+  const runAll = async () => {
+    setRunning(true)
+    setResults([])
+    setOverallStatus(null)
+    setDurationMs(null)
+    try {
+      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/regression/run?triggered_by=manual`, {
+        method: 'POST',
+      })
+      if (res.ok) {
+        const data = await res.json()
+        setResults(data.results || [])
+        setOverallStatus(data.status)
+        setDurationMs(data.duration_ms)
+        loadHistory()
+      }
+    } catch (e) {
+      console.error('Regression run failed:', e)
+      setOverallStatus('error')
+    } finally {
+      setRunning(false)
+    }
+  }
+
+  const totalPass = results.filter(r => r.status === 'pass').length
+  const totalFail = results.filter(r => r.status === 'fail').length
+  const totalError = results.filter(r => r.status === 'error').length
+
+  return (
+    <AIToolsSidebarResponsive>
+      <div className="max-w-7xl mx-auto p-6 space-y-6">
+        <PagePurpose moduleId="ocr-regression" />
+
+        {/* Header + Run Button */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-2xl font-bold text-slate-900">OCR Regression Tests</h1>
+            <p className="text-sm text-slate-500 mt-1">
+              {sessions.length} Ground-Truth Session{sessions.length !== 1 ? 's' : ''}
+            </p>
+          </div>
+          <button
+            onClick={runAll}
+            disabled={running || sessions.length === 0}
+            className="inline-flex items-center gap-2 px-4 py-2.5 bg-teal-600 text-white rounded-lg hover:bg-teal-700 disabled:opacity-50 disabled:cursor-not-allowed font-medium transition-colors"
+          >
+            {running ? (
+              <>
+                <svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                </svg>
+                Laeuft...
+              </>
+            ) : (
+              'Alle Tests starten'
+            )}
+          </button>
+        </div>
+
+        {/* Overall Result Banner */}
+        {overallStatus && (
+          <div className={`rounded-lg p-4 border ${
+            overallStatus === 'pass'
+              ? 'bg-emerald-50 border-emerald-200'
+              : 'bg-red-50 border-red-200'
+          }`}>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <StatusBadge status={overallStatus} />
+                <span className="font-medium text-slate-900">
+                  {totalPass} bestanden, {totalFail} fehlgeschlagen, {totalError} Fehler
+                </span>
+              </div>
+              {durationMs !== null && (
+                <span className="text-sm text-slate-500">{(durationMs / 1000).toFixed(1)}s</span>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Tabs */}
+        <div className="border-b border-slate-200">
+          <nav className="flex gap-4">
+            {(['current', 'history'] as const).map(t => (
+              <button
+                key={t}
+                onClick={() => setTab(t)}
+                className={`pb-3 px-1 text-sm font-medium border-b-2 transition-colors ${
+                  tab === t
+                    ? 'border-teal-500 text-teal-600'
+                    : 'border-transparent text-slate-500 hover:text-slate-700'
+                }`}
+              >
+                {t === 'current' ? 'Aktuelle Ergebnisse' : 'Verlauf'}
+              </button>
+            ))}
+          </nav>
+        </div>
+
+        {/* Current Results Tab */}
+        {tab === 'current' && (
+          <div className="space-y-3">
+            {results.length === 0 && !running && (
+              <div className="text-center py-12 text-slate-400">
+                <p className="text-lg">Keine Ergebnisse</p>
+                <p className="text-sm mt-1">Klicken Sie &quot;Alle Tests starten&quot; um die Regression zu laufen.</p>
+              </div>
+            )}
+            {results.map(r => (
+              <div
+                key={r.session_id}
+                className="bg-white rounded-lg border border-slate-200 overflow-hidden"
+              >
+                <div
+                  className="flex items-center justify-between px-4 py-3 cursor-pointer hover:bg-slate-50 transition-colors"
+                  onClick={() => setExpandedSession(expandedSession === r.session_id ? null : r.session_id)}
+                >
+                  <div className="flex items-center gap-3 min-w-0">
+                    <StatusBadge status={r.status} />
+                    <span className="font-medium text-slate-900 truncate">{r.name || r.session_id}</span>
+                  </div>
+                  <div className="flex items-center gap-4 text-sm text-slate-500">
+                    {r.diff_summary && (
+                      <span>
+                        {r.diff_summary.text_changes} Text, {r.diff_summary.structural_changes} Struktur
+                      </span>
+                    )}
+                    {r.error && <span className="text-red-500">{r.error}</span>}
+                    <svg className={`w-4 h-4 transition-transform ${expandedSession === r.session_id ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                    </svg>
+                  </div>
+                </div>
+
+                {/* Expanded Details */}
+                {expandedSession === r.session_id && r.status === 'fail' && (
+                  <div className="border-t border-slate-100 px-4 py-3 bg-slate-50 space-y-3">
+                    {/* Structural Diffs */}
+                    {r.structural_diffs && r.structural_diffs.length > 0 && (
+                      <div>
+                        <h4 className="text-xs font-medium text-slate-500 uppercase mb-1">Strukturelle Aenderungen</h4>
+                        <div className="space-y-1">
+                          {r.structural_diffs.map((d, i) => (
+                            <div key={i} className="text-sm">
+                              <span className="font-mono text-slate-600">{d.field}</span>: {d.reference} → {d.current}
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                    {/* Cell Diffs */}
+                    {r.cell_diffs && r.cell_diffs.length > 0 && (
+                      <div>
+                        <h4 className="text-xs font-medium text-slate-500 uppercase mb-1">
+                          Zellen-Aenderungen ({r.cell_diffs.length})
+                        </h4>
+                        <div className="max-h-60 overflow-y-auto space-y-1">
+                          {r.cell_diffs.slice(0, 50).map((d, i) => (
+                            <div key={i} className="text-sm font-mono bg-white rounded px-2 py-1 border border-slate-100">
+                              <span className={`text-xs px-1 rounded ${
+                                d.type === 'text_change' ? 'bg-amber-100 text-amber-700'
+                                  : d.type === 'cell_missing' ? 'bg-red-100 text-red-700'
+                                    : 'bg-blue-100 text-blue-700'
+                              }`}>
+                                {d.type}
+                              </span>{' '}
+                              <span className="text-slate-500">{d.cell_id}</span>
+                              {d.reference && (
+                                <>
+                                  {' '}<span className="line-through text-red-400">{d.reference}</span>
+                                </>
+                              )}
+                              {d.current && (
+                                <>
+                                  {' '}<span className="text-emerald-600">{d.current}</span>
+                                </>
+                              )}
+                            </div>
+                          ))}
+                          {r.cell_diffs.length > 50 && (
+                            <p className="text-xs text-slate-400">... und {r.cell_diffs.length - 50} weitere</p>
+                          )}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            ))}
+
+            {/* Ground Truth Sessions Overview (when no results yet) */}
+            {results.length === 0 && sessions.length > 0 && (
+              <div>
+                <h3 className="text-sm font-medium text-slate-700 mb-2">Ground-Truth Sessions</h3>
+                <div className="grid gap-2">
+                  {sessions.map(s => (
+                    <div key={s.session_id} className="bg-white rounded-lg border border-slate-200 px-4 py-3 flex items-center justify-between">
+                      <div>
+                        <span className="font-medium text-slate-900">{s.name || s.session_id}</span>
+                        <span className="text-sm text-slate-400 ml-2">{s.filename}</span>
+                      </div>
+                      <div className="text-sm text-slate-500">
+                        {s.summary.total_cells} Zellen, {s.summary.total_zones} Zonen
+                        {s.pipeline && <span className="ml-2 text-xs bg-slate-100 px-1.5 py-0.5 rounded">{s.pipeline}</span>}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* History Tab */}
+        {tab === 'history' && (
+          <div className="space-y-2">
+            {history.length === 0 ? (
+              <p className="text-center py-8 text-slate-400">Noch keine Laeufe aufgezeichnet.</p>
+            ) : (
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="border-b border-slate-200 text-left text-slate-500">
+                    <th className="pb-2 font-medium">Datum</th>
+                    <th className="pb-2 font-medium">Status</th>
+                    <th className="pb-2 font-medium text-right">Gesamt</th>
+                    <th className="pb-2 font-medium text-right">Pass</th>
+                    <th className="pb-2 font-medium text-right">Fail</th>
+                    <th className="pb-2 font-medium text-right">Dauer</th>
+                    <th className="pb-2 font-medium">Trigger</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {history.map(run => (
+                    <tr key={run.id} className="border-b border-slate-100 hover:bg-slate-50">
+                      <td className="py-2">{formatDate(run.run_at)}</td>
+                      <td className="py-2"><StatusBadge status={run.status} /></td>
+                      <td className="py-2 text-right">{run.total}</td>
+                      <td className="py-2 text-right text-emerald-600">{run.passed}</td>
+                      <td className="py-2 text-right text-red-600">{run.failed + run.errors}</td>
+                      <td className="py-2 text-right text-slate-500">{(run.duration_ms / 1000).toFixed(1)}s</td>
+                      <td className="py-2 text-slate-400">{run.triggered_by}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )}
+          </div>
+        )}
+      </div>
+    </AIToolsSidebarResponsive>
+  )
+}

admin-lehrer/lib/navigation.ts

@@ -182,6 +182,24 @@ export const navigation: NavCategory[] = [
       // -----------------------------------------------------------------------
       // KI-Anwendungen: Endnutzer-orientierte KI-Module
       // -----------------------------------------------------------------------
+      {
+        id: 'ocr-regression',
+        name: 'OCR Regression',
+        href: '/ai/ocr-regression',
+        description: 'Regressions-Tests & Ground Truth',
+        purpose: 'Regressions-Tests fuer die OCR-Pipeline ausfuehren. Zeigt Pass/Fail pro Ground-Truth Session, Diff-Details und Verlauf vergangener Laeufe.',
+        audience: ['Entwickler', 'QA'],
+        subgroup: 'KI-Werkzeuge',
+      },
+      {
+        id: 'ocr-ground-truth',
+        name: 'Ground Truth Review',
+        href: '/ai/ocr-ground-truth',
+        description: 'Ground Truth pruefen & markieren',
+        purpose: 'Effiziente Massenpruefung von OCR-Sessions. Split-View mit Confidence-Highlighting, Quick-Accept und Batch-Markierung als Ground Truth.',
+        audience: ['Entwickler', 'QA'],
+        subgroup: 'KI-Werkzeuge',
+      },
       {
         id: 'agents',
         name: 'Agent Management',