feat(ocr-pipeline): improve LLM review UI + add reconstruction step

StepLlmReview: Show full vocab table with image overlay, row-level
status tracking (pending/active/reviewed/corrected/skipped), and
auto-scroll during SSE streaming. Load previous results on mount.

StepReconstruction: New step 7 with editable text fields at original
bbox positions over dewarped image. Zoom controls, tab navigation,
color-coded columns, save to backend.

Backend: Add POST /sessions/{id}/reconstruction endpoint.

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

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

@@ -175,7 +175,7 @@ export default function OcrPipelinePage() {
       case 5:
         return <StepLlmReview sessionId={sessionId} onNext={handleNext} />
       case 6:
-        return <StepReconstruction />
+        return <StepReconstruction sessionId={sessionId} onNext={handleNext} />
       case 7:
         return <StepGroundTruth />
       default:

admin-lehrer/app/(admin)/ai/ocr-pipeline/types.ts

@@ -165,6 +165,14 @@ export interface GridResult {
     with_english?: number
     with_german?: number
   }
+  llm_review?: {
+    changes: { row_index: number; field: string; old: string; new: string }[]
+    model_used: string
+    duration_ms: number
+    entries_corrected: number
+    applied_count?: number
+    applied_at?: string
+  }
 }
 
 export interface WordEntry {

admin-lehrer/components/ocr-pipeline/StepLlmReview.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { useCallback, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { GridResult, WordEntry } from '@/app/(admin)/ai/ocr-pipeline/types'
 
 const KLAUSUR_API = '/klausur-api'
 
@@ -21,6 +22,7 @@ interface ReviewMeta {
   to_review: number
   skipped: number
   model: string
+  skipped_indices?: number[]
 }
 
 interface StreamProgress {
@@ -34,27 +36,108 @@ const FIELD_LABELS: Record<string, string> = {
   example: 'Beispiel',
 }
 
+type RowStatus = 'pending' | 'active' | 'reviewed' | 'corrected' | 'skipped'
+
 export function StepLlmReview({ sessionId, onNext }: StepLlmReviewProps) {
-  const [status, setStatus] = useState<'idle' | 'running' | 'done' | 'error' | 'applied'>('idle')
+  // Core state
+  const [status, setStatus] = useState<'idle' | 'loading' | 'ready' | 'running' | 'done' | 'error' | 'applied'>('idle')
   const [meta, setMeta] = useState<ReviewMeta | null>(null)
   const [changes, setChanges] = useState<LlmChange[]>([])
   const [progress, setProgress] = useState<StreamProgress | null>(null)
-  const [batchLog, setBatchLog] = useState<string[]>([])
   const [totalDuration, setTotalDuration] = useState(0)
   const [error, setError] = useState('')
   const [accepted, setAccepted] = useState<Set<number>>(new Set())
   const [applying, setApplying] = useState(false)
-  const tableEndRef = useRef<HTMLDivElement>(null)
+
+  // Full vocab table state
+  const [vocabEntries, setVocabEntries] = useState<WordEntry[]>([])
+  const [activeRowIndices, setActiveRowIndices] = useState<Set<number>>(new Set())
+  const [reviewedRows, setReviewedRows] = useState<Set<number>>(new Set())
+  const [skippedRows, setSkippedRows] = useState<Set<number>>(new Set())
+  const [correctedMap, setCorrectedMap] = useState<Map<number, LlmChange[]>>(new Map())
+
+  // Image
+  const [imageNaturalSize, setImageNaturalSize] = useState<{ w: number; h: number } | null>(null)
+
+  const tableRef = useRef<HTMLDivElement>(null)
+  const activeRowRef = useRef<HTMLTableRowElement>(null)
+
+  // Load session data on mount
+  useEffect(() => {
+    if (!sessionId) return
+    loadSessionData()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sessionId])
+
+  const loadSessionData = async () => {
+    if (!sessionId) return
+    setStatus('loading')
+    try {
+      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}`)
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      const data = await res.json()
+
+      const wordResult: GridResult | undefined = data.word_result
+      if (!wordResult) {
+        setError('Keine Worterkennungsdaten gefunden. Bitte zuerst Schritt 5 abschliessen.')
+        setStatus('error')
+        return
+      }
+
+      const entries = wordResult.vocab_entries || wordResult.entries || []
+      setVocabEntries(entries)
+
+      // Check if LLM review was already run
+      const llmReview = wordResult.llm_review
+      if (llmReview && llmReview.changes) {
+        const existingChanges: LlmChange[] = llmReview.changes as LlmChange[]
+        setChanges(existingChanges)
+        setTotalDuration(llmReview.duration_ms || 0)
+
+        // Mark all rows as reviewed
+        const allReviewed = new Set(entries.map((_: WordEntry, i: number) => i))
+        setReviewedRows(allReviewed)
+
+        // Build corrected map
+        const cMap = new Map<number, LlmChange[]>()
+        for (const c of existingChanges) {
+          const existing = cMap.get(c.row_index) || []
+          existing.push(c)
+          cMap.set(c.row_index, existing)
+        }
+        setCorrectedMap(cMap)
+
+        // Default: all accepted
+        setAccepted(new Set(existingChanges.map((_: LlmChange, i: number) => i)))
+
+        setMeta({
+          total_entries: entries.length,
+          to_review: llmReview.entries_corrected !== undefined ? entries.length : entries.length,
+          skipped: 0,
+          model: llmReview.model_used || 'unknown',
+        })
+        setStatus('done')
+      } else {
+        setStatus('ready')
+      }
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : String(e))
+      setStatus('error')
+    }
+  }
 
   const runReview = useCallback(async () => {
     if (!sessionId) return
     setStatus('running')
     setError('')
     setChanges([])
-    setBatchLog([])
     setProgress(null)
     setMeta(null)
     setTotalDuration(0)
+    setActiveRowIndices(new Set())
+    setReviewedRows(new Set())
+    setSkippedRows(new Set())
+    setCorrectedMap(new Map())
 
     try {
       const res = await fetch(
@@ -71,6 +154,9 @@ export function StepLlmReview({ sessionId, onNext }: StepLlmReviewProps) {
       const decoder = new TextDecoder()
       let buffer = ''
       let allChanges: LlmChange[] = []
+      let allReviewed = new Set<number>()
+      let allSkipped = new Set<number>()
+      let cMap = new Map<number, LlmChange[]>()
 
       while (true) {
         const { done, value } = await reader.read()
@@ -94,25 +180,57 @@ export function StepLlmReview({ sessionId, onNext }: StepLlmReviewProps) {
               to_review: event.to_review,
               skipped: event.skipped,
               model: event.model,
+              skipped_indices: event.skipped_indices,
             })
-            setBatchLog([`${event.total_entries} Eintraege, ${event.skipped} uebersprungen (Lautschrift), ${event.to_review} zu pruefen`])
+            // Mark skipped rows
+            if (event.skipped_indices) {
+              allSkipped = new Set(event.skipped_indices)
+              setSkippedRows(allSkipped)
+            }
           }
 
           if (event.type === 'batch') {
             const batchChanges: LlmChange[] = event.changes || []
+            const batchRows: number[] = event.entries_reviewed || []
+
+            // Update active rows (currently being reviewed)
+            setActiveRowIndices(new Set(batchRows))
+
+            // Accumulate changes
             allChanges = [...allChanges, ...batchChanges]
             setChanges(allChanges)
             setProgress(event.progress)
-            const rows = (event.entries_reviewed || []).map((r: number) => `R${r}`).join(', ')
+
-            setBatchLog(prev => [...prev,
+            // Update corrected map
-              `Batch ${event.batch_index + 1}: ${rows} — ${batchChanges.length} Korrektur${batchChanges.length !== 1 ? 'en' : ''} (${event.duration_ms}ms)`
+            for (const c of batchChanges) {
-            ])
+              const existing = cMap.get(c.row_index) || []
-            setTimeout(() => tableEndRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' }), 16)
+              existing.push(c)
+              cMap.set(c.row_index, [...existing])
+            }
+            setCorrectedMap(new Map(cMap))
+
+            // Mark batch rows as reviewed
+            for (const r of batchRows) {
+              allReviewed.add(r)
+            }
+            setReviewedRows(new Set(allReviewed))
+
+            // Scroll to active row in table
+            setTimeout(() => {
+              activeRowRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+            }, 50)
           }
 
           if (event.type === 'complete') {
+            setActiveRowIndices(new Set())
             setTotalDuration(event.duration_ms)
-            setAccepted(new Set(allChanges.map((_, i) => i)))
+            setAccepted(new Set(allChanges.map((_: LlmChange, i: number) => i)))
+            // Mark all non-skipped as reviewed
+            const allEntryIndices = vocabEntries.map((_: WordEntry, i: number) => i)
+            for (const i of allEntryIndices) {
+              if (!allSkipped.has(i)) allReviewed.add(i)
+            }
+            setReviewedRows(new Set(allReviewed))
             setStatus('done')
           }
 
@@ -122,8 +240,8 @@ export function StepLlmReview({ sessionId, onNext }: StepLlmReviewProps) {
         }
       }
 
-      // If no complete event was received (e.g. 0 entries to review)
+      // If stream ended without complete event
-      if (allChanges.length === 0 && status !== 'done') {
+      if (allChanges.length === 0) {
         setStatus('done')
       }
     } catch (e: unknown) {
@@ -131,7 +249,7 @@ export function StepLlmReview({ sessionId, onNext }: StepLlmReviewProps) {
       setError(msg)
       setStatus('error')
     }
-  }, [sessionId])
+  }, [sessionId, vocabEntries])
 
   const toggleChange = (index: number) => {
     setAccepted(prev => {
@@ -146,7 +264,7 @@ export function StepLlmReview({ sessionId, onNext }: StepLlmReviewProps) {
     if (accepted.size === changes.length) {
       setAccepted(new Set())
     } else {
-      setAccepted(new Set(changes.map((_, i) => i)))
+      setAccepted(new Set(changes.map((_: LlmChange, i: number) => i)))
     }
   }
 
@@ -171,99 +289,28 @@ export function StepLlmReview({ sessionId, onNext }: StepLlmReviewProps) {
     }
   }, [sessionId, accepted])
 
+  const getRowStatus = (rowIndex: number): RowStatus => {
+    if (activeRowIndices.has(rowIndex)) return 'active'
+    if (skippedRows.has(rowIndex)) return 'skipped'
+    if (correctedMap.has(rowIndex)) return 'corrected'
+    if (reviewedRows.has(rowIndex)) return 'reviewed'
+    return 'pending'
+  }
+
+  const dewarpedUrl = sessionId
+    ? `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/dewarped`
+    : ''
+
   if (!sessionId) {
     return <div className="text-center py-12 text-gray-400">Bitte zuerst eine Session auswaehlen.</div>
   }
 
-  // --- Idle ---
+  // --- Loading session data ---
-  if (status === 'idle') {
+  if (status === 'loading' || status === 'idle') {
     return (
-      <div className="flex flex-col items-center justify-center py-12 text-center">
+      <div className="flex items-center gap-3 justify-center py-12">
-        <div className="text-5xl mb-4">🤖</div>
+        <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-teal-500" />
-        <h3 className="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">
+        <span className="text-gray-500">Session-Daten werden geladen...</span>
-          Schritt 6: LLM-Korrektur
-        </h3>
-        <p className="text-gray-500 dark:text-gray-400 max-w-lg mb-2">
-          Ein lokales Sprachmodell prueft die OCR-Ergebnisse auf typische Erkennungsfehler.
-          Eintraege mit Lautschrift werden automatisch uebersprungen.
-        </p>
-        <p className="text-xs text-gray-400 dark:text-gray-500 mb-6">
-          Modell: <span className="font-mono">qwen3:30b-a3b</span> via Ollama (lokal)
-        </p>
-        <button onClick={runReview}
-          className="px-6 py-2.5 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors font-medium">
-          LLM-Korrektur starten
-        </button>
-      </div>
-    )
-  }
-
-  // --- Running (with live progress) ---
-  if (status === 'running') {
-    const pct = progress ? Math.round((progress.current / progress.total) * 100) : 0
-
-    return (
-      <div className="space-y-4">
-        <div className="flex items-center gap-3">
-          <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-teal-500" />
-          <h3 className="text-base font-medium text-gray-700 dark:text-gray-300">
-            LLM-Korrektur laeuft...
-          </h3>
-          {meta && (
-            <span className="text-xs text-gray-400 font-mono">{meta.model}</span>
-          )}
-        </div>
-
-        {/* Progress bar */}
-        {progress && (
-          <div className="space-y-1">
-            <div className="flex justify-between text-xs text-gray-400">
-              <span>{progress.current} / {progress.total} Eintraege geprueft</span>
-              <span>{pct}%</span>
-            </div>
-            <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
-              <div className="bg-teal-500 h-2 rounded-full transition-all duration-500" style={{ width: `${pct}%` }} />
-            </div>
-          </div>
-        )}
-
-        {/* Live batch log */}
-        <div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-3 max-h-40 overflow-y-auto">
-          {batchLog.map((line, i) => (
-            <div key={i} className="text-xs text-gray-500 dark:text-gray-400 font-mono py-0.5">{line}</div>
-          ))}
-        </div>
-
-        {/* Live changes appearing */}
-        {changes.length > 0 && (
-          <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
-            <table className="w-full text-sm">
-              <thead>
-                <tr className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
-                  <th className="px-3 py-2 text-left text-gray-500 dark:text-gray-400 font-medium">Zeile</th>
-                  <th className="px-3 py-2 text-left text-gray-500 dark:text-gray-400 font-medium">Feld</th>
-                  <th className="px-3 py-2 text-left text-gray-500 dark:text-gray-400 font-medium">Vorher</th>
-                  <th className="px-3 py-2 text-left text-gray-500 dark:text-gray-400 font-medium">Nachher</th>
-                </tr>
-              </thead>
-              <tbody>
-                {changes.map((change, idx) => (
-                  <tr key={idx} className="border-b border-gray-100 dark:border-gray-700/50 bg-teal-50/50 dark:bg-teal-900/10">
-                    <td className="px-3 py-1.5 text-gray-500 dark:text-gray-400 font-mono text-xs">R{change.row_index}</td>
-                    <td className="px-3 py-1.5">
-                      <span className="text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
-                        {FIELD_LABELS[change.field] || change.field}
-                      </span>
-                    </td>
-                    <td className="px-3 py-1.5"><span className="line-through text-red-500 dark:text-red-400">{change.old}</span></td>
-                    <td className="px-3 py-1.5"><span className="text-green-600 dark:text-green-400 font-medium">{change.new}</span></td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-            <div ref={tableEndRef} />
-          </div>
-        )}
       </div>
     )
   }
@@ -276,7 +323,7 @@ export function StepLlmReview({ sessionId, onNext }: StepLlmReviewProps) {
         <h3 className="text-lg font-medium text-red-600 dark:text-red-400 mb-2">Fehler bei LLM-Korrektur</h3>
         <p className="text-sm text-gray-500 dark:text-gray-400 max-w-lg mb-4">{error}</p>
         <div className="flex gap-3">
-          <button onClick={runReview}
+          <button onClick={() => { setError(''); loadSessionData() }}
             className="px-5 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors text-sm">
             Erneut versuchen
           </button>
@@ -306,96 +353,304 @@ export function StepLlmReview({ sessionId, onNext }: StepLlmReviewProps) {
     )
   }
 
-  // --- Done: diff table with checkboxes ---
+  // Active entry for highlighting on image
-  if (changes.length === 0) {
+  const activeEntry = vocabEntries.find((_: WordEntry, i: number) => activeRowIndices.has(i))
-    return (
-      <div className="flex flex-col items-center justify-center py-12 text-center">
-        <div className="text-5xl mb-4">👍</div>
-        <h3 className="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">Keine Korrekturen noetig</h3>
-        <p className="text-sm text-gray-500 dark:text-gray-400 mb-1">Das LLM hat keine OCR-Fehler gefunden.</p>
-        {meta && (
-          <p className="text-xs text-gray-400 dark:text-gray-500 mb-6">
-            {meta.to_review} geprueft, {meta.skipped} uebersprungen · {totalDuration}ms · {meta.model}
-          </p>
-        )}
-        <button onClick={onNext}
-          className="px-6 py-2.5 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors font-medium">
-          Weiter →
-        </button>
-      </div>
-    )
-  }
 
+  const pct = progress ? Math.round((progress.current / progress.total) * 100) : 0
+
+  // --- Ready / Running / Done: 2-column layout ---
   return (
     <div className="space-y-4">
       {/* Header */}
       <div className="flex items-center justify-between">
         <div>
-          <h3 className="text-base font-medium text-gray-700 dark:text-gray-300">LLM-Korrekturvorschlaege</h3>
+          <h3 className="text-base font-medium text-gray-700 dark:text-gray-300">
+            Schritt 6: LLM-Korrektur
+          </h3>
           <p className="text-xs text-gray-400 mt-0.5">
-            {changes.length} Korrektur{changes.length !== 1 ? 'en' : ''} gefunden
+            {status === 'ready' && `${vocabEntries.length} Eintraege bereit zur Pruefung`}
-            {meta && <> · {meta.skipped} uebersprungen (Lautschrift)</>}
+            {status === 'running' && meta && `${meta.model} · ${meta.to_review} zu pruefen, ${meta.skipped} uebersprungen`}
-            {' '}· {totalDuration}ms · {meta?.model}
+            {status === 'done' && (
+              <>
+                {changes.length} Korrektur{changes.length !== 1 ? 'en' : ''} gefunden
+                {meta && <> · {meta.skipped} uebersprungen</>}
+                {' '}· {totalDuration}ms · {meta?.model}
+              </>
+            )}
           </p>
         </div>
-        <button onClick={toggleAll}
+        <div className="flex items-center gap-2">
-          className="text-xs px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-gray-600 dark:text-gray-400">
+          {status === 'ready' && (
-          {accepted.size === changes.length ? 'Keine' : 'Alle'} auswaehlen
+            <button onClick={runReview}
-        </button>
+              className="px-5 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors text-sm font-medium">
-      </div>
+              LLM-Korrektur starten
-
+            </button>
-      {/* Diff table */}
+          )}
-      <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+          {status === 'running' && (
-        <table className="w-full text-sm">
+            <div className="flex items-center gap-2 text-sm text-teal-600 dark:text-teal-400">
-          <thead>
+              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-teal-500" />
-            <tr className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+              {progress ? `${progress.current}/${progress.total}` : 'Startet...'}
-              <th className="w-10 px-3 py-2 text-center">
+            </div>
-                <input type="checkbox" checked={accepted.size === changes.length} onChange={toggleAll}
+          )}
-                  className="rounded border-gray-300 dark:border-gray-600" />
+          {status === 'done' && changes.length > 0 && (
-              </th>
+            <button onClick={toggleAll}
-              <th className="px-3 py-2 text-left text-gray-500 dark:text-gray-400 font-medium">Zeile</th>
+              className="text-xs px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-gray-600 dark:text-gray-400">
-              <th className="px-3 py-2 text-left text-gray-500 dark:text-gray-400 font-medium">Feld</th>
+              {accepted.size === changes.length ? 'Keine' : 'Alle'} auswaehlen
-              <th className="px-3 py-2 text-left text-gray-500 dark:text-gray-400 font-medium">Vorher</th>
+            </button>
-              <th className="px-3 py-2 text-left text-gray-500 dark:text-gray-400 font-medium">Nachher</th>
+          )}
-            </tr>
-          </thead>
-          <tbody>
-            {changes.map((change, idx) => (
-              <tr key={idx} className={`border-b border-gray-100 dark:border-gray-700/50 ${
-                accepted.has(idx) ? 'bg-teal-50/50 dark:bg-teal-900/10' : 'bg-white dark:bg-gray-800/50'
-              }`}>
-                <td className="px-3 py-2 text-center">
-                  <input type="checkbox" checked={accepted.has(idx)} onChange={() => toggleChange(idx)}
-                    className="rounded border-gray-300 dark:border-gray-600" />
-                </td>
-                <td className="px-3 py-2 text-gray-500 dark:text-gray-400 font-mono text-xs">R{change.row_index}</td>
-                <td className="px-3 py-2">
-                  <span className="text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
-                    {FIELD_LABELS[change.field] || change.field}
-                  </span>
-                </td>
-                <td className="px-3 py-2"><span className="line-through text-red-500 dark:text-red-400">{change.old}</span></td>
-                <td className="px-3 py-2"><span className="text-green-600 dark:text-green-400 font-medium">{change.new}</span></td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-
-      {/* Actions */}
-      <div className="flex items-center justify-between pt-2">
-        <p className="text-xs text-gray-400">{accepted.size} von {changes.length} ausgewaehlt</p>
-        <div className="flex gap-3">
-          <button onClick={onNext}
-            className="px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-gray-600 dark:text-gray-400">
-            Alle ablehnen
-          </button>
-          <button onClick={applyChanges} disabled={applying || accepted.size === 0}
-            className="px-5 py-2 text-sm bg-teal-600 text-white rounded-lg hover:bg-teal-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium">
-            {applying ? 'Wird uebernommen...' : `${accepted.size} Korrektur${accepted.size !== 1 ? 'en' : ''} uebernehmen`}
-          </button>
         </div>
       </div>
+
+      {/* Progress bar (while running) */}
+      {status === 'running' && progress && (
+        <div className="space-y-1">
+          <div className="flex justify-between text-xs text-gray-400">
+            <span>{progress.current} / {progress.total} Eintraege geprueft</span>
+            <span>{pct}%</span>
+          </div>
+          <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+            <div className="bg-teal-500 h-2 rounded-full transition-all duration-500" style={{ width: `${pct}%` }} />
+          </div>
+        </div>
+      )}
+
+      {/* 2-column layout: Image + Table */}
+      <div className="grid grid-cols-3 gap-4">
+        {/* Left: Dewarped Image with highlight overlay */}
+        <div className="col-span-1">
+          <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
+            Originalbild
+          </div>
+          <div className="border rounded-lg overflow-hidden dark:border-gray-700 bg-gray-50 dark:bg-gray-900 relative sticky top-4">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={dewarpedUrl}
+              alt="Dewarped"
+              className="w-full h-auto"
+              onLoad={(e) => {
+                const img = e.target as HTMLImageElement
+                setImageNaturalSize({ w: img.naturalWidth, h: img.naturalHeight })
+              }}
+            />
+            {/* Highlight overlay for active row */}
+            {activeEntry?.bbox && (
+              <div
+                className="absolute border-2 border-yellow-400 bg-yellow-400/20 pointer-events-none animate-pulse"
+                style={{
+                  left: `${activeEntry.bbox.x}%`,
+                  top: `${activeEntry.bbox.y}%`,
+                  width: `${activeEntry.bbox.w}%`,
+                  height: `${activeEntry.bbox.h}%`,
+                }}
+              />
+            )}
+          </div>
+        </div>
+
+        {/* Right: Full vocabulary table */}
+        <div className="col-span-2" ref={tableRef}>
+          <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
+            Vokabeltabelle ({vocabEntries.length} Eintraege)
+          </div>
+          <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+            <div className="max-h-[70vh] overflow-y-auto">
+              <table className="w-full text-sm">
+                <thead className="sticky top-0 z-10">
+                  <tr className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+                    <th className="px-2 py-2 text-left text-gray-500 dark:text-gray-400 font-medium w-10">#</th>
+                    <th className="px-2 py-2 text-left text-gray-500 dark:text-gray-400 font-medium">EN</th>
+                    <th className="px-2 py-2 text-left text-gray-500 dark:text-gray-400 font-medium">DE</th>
+                    <th className="px-2 py-2 text-left text-gray-500 dark:text-gray-400 font-medium">Beispiel</th>
+                    <th className="px-2 py-2 text-center text-gray-500 dark:text-gray-400 font-medium w-16">Status</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {vocabEntries.map((entry, idx) => {
+                    const rowStatus = getRowStatus(idx)
+                    const rowChanges = correctedMap.get(idx)
+
+                    const rowBg = {
+                      pending: '',
+                      active: 'bg-yellow-50 dark:bg-yellow-900/20',
+                      reviewed: '',
+                      corrected: 'bg-teal-50/50 dark:bg-teal-900/10',
+                      skipped: 'bg-gray-50 dark:bg-gray-800/50',
+                    }[rowStatus]
+
+                    return (
+                      <tr
+                        key={idx}
+                        ref={rowStatus === 'active' ? activeRowRef : undefined}
+                        className={`border-b border-gray-100 dark:border-gray-700/50 ${rowBg} ${
+                          rowStatus === 'active' ? 'ring-1 ring-yellow-400 ring-inset' : ''
+                        }`}
+                      >
+                        <td className="px-2 py-1.5 text-gray-400 font-mono text-xs">{idx}</td>
+                        <td className="px-2 py-1.5">
+                          <CellContent text={entry.english} field="english" rowChanges={rowChanges} />
+                        </td>
+                        <td className="px-2 py-1.5">
+                          <CellContent text={entry.german} field="german" rowChanges={rowChanges} />
+                        </td>
+                        <td className="px-2 py-1.5 text-xs">
+                          <CellContent text={entry.example} field="example" rowChanges={rowChanges} />
+                        </td>
+                        <td className="px-2 py-1.5 text-center">
+                          <StatusIcon status={rowStatus} />
+                        </td>
+                      </tr>
+                    )
+                  })}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Done state: summary + actions */}
+      {status === 'done' && (
+        <div className="space-y-4">
+          {/* Summary */}
+          <div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-3 text-xs text-gray-500 dark:text-gray-400">
+            {changes.length === 0 ? (
+              <span>Keine Korrekturen noetig — alle Eintraege sind korrekt.</span>
+            ) : (
+              <span>
+                {changes.length} Korrektur{changes.length !== 1 ? 'en' : ''} gefunden ·{' '}
+                {accepted.size} ausgewaehlt ·{' '}
+                {meta?.skipped || 0} uebersprungen (Lautschrift) ·{' '}
+                {totalDuration}ms
+              </span>
+            )}
+          </div>
+
+          {/* Corrections detail list (if any) */}
+          {changes.length > 0 && (
+            <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+              <div className="bg-gray-50 dark:bg-gray-800 px-3 py-2 border-b border-gray-200 dark:border-gray-700">
+                <span className="text-xs font-medium text-gray-600 dark:text-gray-400">
+                  Korrekturvorschlaege ({accepted.size}/{changes.length} ausgewaehlt)
+                </span>
+              </div>
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="bg-gray-50/50 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-700">
+                    <th className="w-10 px-3 py-1.5 text-center">
+                      <input type="checkbox" checked={accepted.size === changes.length} onChange={toggleAll}
+                        className="rounded border-gray-300 dark:border-gray-600" />
+                    </th>
+                    <th className="px-2 py-1.5 text-left text-gray-500 dark:text-gray-400 font-medium text-xs">Zeile</th>
+                    <th className="px-2 py-1.5 text-left text-gray-500 dark:text-gray-400 font-medium text-xs">Feld</th>
+                    <th className="px-2 py-1.5 text-left text-gray-500 dark:text-gray-400 font-medium text-xs">Vorher</th>
+                    <th className="px-2 py-1.5 text-left text-gray-500 dark:text-gray-400 font-medium text-xs">Nachher</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {changes.map((change, idx) => (
+                    <tr key={idx} className={`border-b border-gray-100 dark:border-gray-700/50 ${
+                      accepted.has(idx) ? 'bg-teal-50/50 dark:bg-teal-900/10' : ''
+                    }`}>
+                      <td className="px-3 py-1.5 text-center">
+                        <input type="checkbox" checked={accepted.has(idx)} onChange={() => toggleChange(idx)}
+                          className="rounded border-gray-300 dark:border-gray-600" />
+                      </td>
+                      <td className="px-2 py-1.5 text-gray-500 dark:text-gray-400 font-mono text-xs">R{change.row_index}</td>
+                      <td className="px-2 py-1.5">
+                        <span className="text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
+                          {FIELD_LABELS[change.field] || change.field}
+                        </span>
+                      </td>
+                      <td className="px-2 py-1.5"><span className="line-through text-red-500 dark:text-red-400 text-xs">{change.old}</span></td>
+                      <td className="px-2 py-1.5"><span className="text-green-600 dark:text-green-400 font-medium text-xs">{change.new}</span></td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+
+          {/* Actions */}
+          <div className="flex items-center justify-between pt-2">
+            <p className="text-xs text-gray-400">
+              {changes.length > 0 ? `${accepted.size} von ${changes.length} ausgewaehlt` : ''}
+            </p>
+            <div className="flex gap-3">
+              {changes.length > 0 && (
+                <button onClick={onNext}
+                  className="px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-gray-600 dark:text-gray-400">
+                  Alle ablehnen
+                </button>
+              )}
+              {changes.length > 0 ? (
+                <button onClick={applyChanges} disabled={applying || accepted.size === 0}
+                  className="px-5 py-2 text-sm bg-teal-600 text-white rounded-lg hover:bg-teal-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium">
+                  {applying ? 'Wird uebernommen...' : `${accepted.size} Korrektur${accepted.size !== 1 ? 'en' : ''} uebernehmen`}
+                </button>
+              ) : (
+                <button onClick={onNext}
+                  className="px-6 py-2.5 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors font-medium">
+                  Weiter →
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }
+
+/** Cell content with inline diff for corrections */
+function CellContent({ text, field, rowChanges }: {
+  text: string
+  field: string
+  rowChanges?: LlmChange[]
+}) {
+  const change = rowChanges?.find(c => c.field === field)
+
+  if (!text && !change) {
+    return <span className="text-gray-300 dark:text-gray-600">&mdash;</span>
+  }
+
+  if (change) {
+    return (
+      <span>
+        <span className="line-through text-red-400 dark:text-red-500 text-xs mr-1">{change.old}</span>
+        <span className="text-green-600 dark:text-green-400 font-medium text-xs">{change.new}</span>
+      </span>
+    )
+  }
+
+  return <span className="text-gray-700 dark:text-gray-300 text-xs">{text}</span>
+}
+
+/** Status icon for each row */
+function StatusIcon({ status }: { status: RowStatus }) {
+  switch (status) {
+    case 'pending':
+      return <span className="text-gray-300 dark:text-gray-600 text-xs">—</span>
+    case 'active':
+      return (
+        <span className="inline-block w-3 h-3 rounded-full bg-yellow-400 animate-pulse" title="Wird geprueft" />
+      )
+    case 'reviewed':
+      return (
+        <svg className="w-4 h-4 text-green-500 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+        </svg>
+      )
+    case 'corrected':
+      return (
+        <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-teal-100 dark:bg-teal-900/30 text-teal-700 dark:text-teal-400">
+          korr.
+        </span>
+      )
+    case 'skipped':
+      return (
+        <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400">
+          skip
+        </span>
+      )
+  }
+}

admin-lehrer/components/ocr-pipeline/StepReconstruction.tsx

@@ -1,18 +1,343 @@
 'use client'
 
-export function StepReconstruction() {
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import type { GridResult, GridCell, WordEntry } from '@/app/(admin)/ai/ocr-pipeline/types'
+
+const KLAUSUR_API = '/klausur-api'
+
+interface StepReconstructionProps {
+  sessionId: string | null
+  onNext: () => void
+}
+
+interface EditableCell {
+  cellId: string
+  text: string
+  originalText: string
+  bboxPct: { x: number; y: number; w: number; h: number }
+  colType: string
+  rowIndex: number
+  colIndex: number
+}
+
+export function StepReconstruction({ sessionId, onNext }: StepReconstructionProps) {
+  const [status, setStatus] = useState<'loading' | 'ready' | 'saving' | 'saved' | 'error'>('loading')
+  const [error, setError] = useState('')
+  const [cells, setCells] = useState<EditableCell[]>([])
+  const [editedTexts, setEditedTexts] = useState<Map<string, string>>(new Map())
+  const [zoom, setZoom] = useState(100)
+  const [containerSize, setContainerSize] = useState<{ w: number; h: number } | null>(null)
+
+  const containerRef = useRef<HTMLDivElement>(null)
+  const imageRef = useRef<HTMLImageElement>(null)
+
+  // Load session data on mount
+  useEffect(() => {
+    if (!sessionId) return
+    loadSessionData()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sessionId])
+
+  // Track container size for font scaling
+  useEffect(() => {
+    if (!containerRef.current) return
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerSize({ w: entry.contentRect.width, h: entry.contentRect.height })
+      }
+    })
+    observer.observe(containerRef.current)
+    return () => observer.disconnect()
+  }, [])
+
+  const loadSessionData = async () => {
+    if (!sessionId) return
+    setStatus('loading')
+    try {
+      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}`)
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      const data = await res.json()
+
+      const wordResult: GridResult | undefined = data.word_result
+      if (!wordResult) {
+        setError('Keine Worterkennungsdaten gefunden. Bitte zuerst Schritt 5 abschliessen.')
+        setStatus('error')
+        return
+      }
+
+      // Build editable cells from grid cells
+      const gridCells: GridCell[] = wordResult.cells || []
+      const editableCells: EditableCell[] = gridCells
+        .filter(c => c.text.trim() !== '')
+        .map(c => ({
+          cellId: c.cell_id,
+          text: c.text,
+          originalText: c.text,
+          bboxPct: c.bbox_pct,
+          colType: c.col_type,
+          rowIndex: c.row_index,
+          colIndex: c.col_index,
+        }))
+
+      setCells(editableCells)
+      setStatus('ready')
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : String(e))
+      setStatus('error')
+    }
+  }
+
+  const handleTextChange = useCallback((cellId: string, newText: string) => {
+    setEditedTexts(prev => {
+      const next = new Map(prev)
+      next.set(cellId, newText)
+      return next
+    })
+  }, [])
+
+  const getDisplayText = useCallback((cell: EditableCell): string => {
+    return editedTexts.get(cell.cellId) ?? cell.text
+  }, [editedTexts])
+
+  const isEdited = useCallback((cell: EditableCell): boolean => {
+    const edited = editedTexts.get(cell.cellId)
+    return edited !== undefined && edited !== cell.originalText
+  }, [editedTexts])
+
+  const changedCount = useMemo(() => {
+    let count = 0
+    for (const cell of cells) {
+      if (isEdited(cell)) count++
+    }
+    return count
+  }, [cells, isEdited])
+
+  // Sort cells for tab navigation: by row, then by column
+  const sortedCellIds = useMemo(() => {
+    return [...cells]
+      .sort((a, b) => a.rowIndex !== b.rowIndex ? a.rowIndex - b.rowIndex : a.colIndex - b.colIndex)
+      .map(c => c.cellId)
+  }, [cells])
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent, cellId: string) => {
+    if (e.key === 'Tab') {
+      e.preventDefault()
+      const idx = sortedCellIds.indexOf(cellId)
+      const nextIdx = e.shiftKey ? idx - 1 : idx + 1
+      if (nextIdx >= 0 && nextIdx < sortedCellIds.length) {
+        const nextId = sortedCellIds[nextIdx]
+        const el = document.getElementById(`cell-${nextId}`)
+        el?.focus()
+      }
+    }
+  }, [sortedCellIds])
+
+  const saveReconstruction = useCallback(async () => {
+    if (!sessionId) return
+    setStatus('saving')
+    try {
+      const cellUpdates = Array.from(editedTexts.entries())
+        .filter(([cellId, text]) => {
+          const cell = cells.find(c => c.cellId === cellId)
+          return cell && text !== cell.originalText
+        })
+        .map(([cellId, text]) => ({ cell_id: cellId, text }))
+
+      if (cellUpdates.length === 0) {
+        // Nothing changed, just advance
+        setStatus('saved')
+        return
+      }
+
+      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/reconstruction`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ cells: cellUpdates }),
+      })
+
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        throw new Error(data.detail || `HTTP ${res.status}`)
+      }
+
+      setStatus('saved')
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : String(e))
+      setStatus('error')
+    }
+  }, [sessionId, editedTexts, cells])
+
+  const dewarpedUrl = sessionId
+    ? `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/dewarped`
+    : ''
+
+  const colTypeColor = (colType: string): string => {
+    const colors: Record<string, string> = {
+      column_en: 'border-blue-400/40 focus:border-blue-500',
+      column_de: 'border-green-400/40 focus:border-green-500',
+      column_example: 'border-orange-400/40 focus:border-orange-500',
+      column_text: 'border-purple-400/40 focus:border-purple-500',
+    }
+    return colors[colType] || 'border-gray-400/40 focus:border-gray-500'
+  }
+
+  if (!sessionId) {
+    return <div className="text-center py-12 text-gray-400">Bitte zuerst eine Session auswaehlen.</div>
+  }
+
+  if (status === 'loading') {
+    return (
+      <div className="flex items-center gap-3 justify-center py-12">
+        <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-teal-500" />
+        <span className="text-gray-500">Rekonstruktionsdaten werden geladen...</span>
+      </div>
+    )
+  }
+
+  if (status === 'error') {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 text-center">
+        <div className="text-5xl mb-4">⚠️</div>
+        <h3 className="text-lg font-medium text-red-600 dark:text-red-400 mb-2">Fehler</h3>
+        <p className="text-sm text-gray-500 dark:text-gray-400 max-w-lg mb-4">{error}</p>
+        <div className="flex gap-3">
+          <button onClick={() => { setError(''); loadSessionData() }}
+            className="px-5 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors text-sm">
+            Erneut versuchen
+          </button>
+          <button onClick={onNext}
+            className="px-5 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors text-sm">
+            Ueberspringen →
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  if (status === 'saved') {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 text-center">
+        <div className="text-5xl mb-4">✅</div>
+        <h3 className="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">Rekonstruktion gespeichert</h3>
+        <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
+          {changedCount > 0 ? `${changedCount} Zellen wurden aktualisiert.` : 'Keine Aenderungen vorgenommen.'}
+        </p>
+        <button onClick={onNext}
+          className="px-6 py-2.5 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors font-medium">
+          Weiter →
+        </button>
+      </div>
+    )
+  }
+
   return (
-    <div className="flex flex-col items-center justify-center py-16 text-center">
+    <div className="space-y-3">
-      <div className="text-5xl mb-4">🏗️</div>
+      {/* Toolbar */}
-      <h3 className="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">
+      <div className="flex items-center justify-between bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 px-3 py-2">
-        Schritt 6: Seitenrekonstruktion
+        <div className="flex items-center gap-2">
-      </h3>
+          <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">
-      <p className="text-gray-500 dark:text-gray-400 max-w-md">
+            Schritt 7: Rekonstruktion
-        Nachbau der Originalseite aus erkannten Woertern und Positionen.
+          </h3>
-        Dieser Schritt wird in einer zukuenftigen Version implementiert.
+          <span className="text-xs text-gray-400">
-      </p>
+            {cells.length} Zellen · {changedCount} geaendert
-      <div className="mt-6 px-4 py-2 bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded-full text-sm font-medium">
+          </span>
-        Kommt bald
+        </div>
+        <div className="flex items-center gap-2">
+          {/* Zoom controls */}
+          <button
+            onClick={() => setZoom(z => Math.max(50, z - 25))}
+            className="px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700"
+          >
+            −
+          </button>
+          <span className="text-xs text-gray-500 w-10 text-center">{zoom}%</span>
+          <button
+            onClick={() => setZoom(z => Math.min(200, z + 25))}
+            className="px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700"
+          >
+            +
+          </button>
+          <button
+            onClick={() => setZoom(100)}
+            className="px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700"
+          >
+            Fit
+          </button>
+
+          <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />
+
+          <button
+            onClick={saveReconstruction}
+            disabled={status === 'saving'}
+            className="px-4 py-1.5 text-xs bg-teal-600 text-white rounded-lg hover:bg-teal-700 disabled:opacity-50 transition-colors font-medium"
+          >
+            {status === 'saving' ? 'Speichert...' : 'Speichern'}
+          </button>
+        </div>
+      </div>
+
+      {/* Reconstruction canvas */}
+      <div className="border rounded-lg overflow-auto dark:border-gray-700 bg-gray-100 dark:bg-gray-900" style={{ maxHeight: '75vh' }}>
+        <div
+          ref={containerRef}
+          className="relative inline-block"
+          style={{ transform: `scale(${zoom / 100})`, transformOrigin: 'top left' }}
+        >
+          {/* Background image at reduced opacity */}
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            ref={imageRef}
+            src={dewarpedUrl}
+            alt="Dewarped"
+            className="block"
+            style={{ opacity: 0.3 }}
+          />
+
+          {/* Editable text fields at bbox positions */}
+          {cells.map((cell) => {
+            const displayText = getDisplayText(cell)
+            const edited = isEdited(cell)
+
+            return (
+              <input
+                key={cell.cellId}
+                id={`cell-${cell.cellId}`}
+                type="text"
+                value={displayText}
+                onChange={(e) => handleTextChange(cell.cellId, e.target.value)}
+                onKeyDown={(e) => handleKeyDown(e, cell.cellId)}
+                className={`absolute bg-transparent text-black dark:text-white border px-0.5 outline-none transition-colors ${
+                  colTypeColor(cell.colType)
+                } ${edited ? 'border-green-500 bg-green-50/30 dark:bg-green-900/20' : ''}`}
+                style={{
+                  left: `${cell.bboxPct.x}%`,
+                  top: `${cell.bboxPct.y}%`,
+                  width: `${cell.bboxPct.w}%`,
+                  height: `${cell.bboxPct.h}%`,
+                  fontSize: `${Math.max(8, Math.min(16, (cell.bboxPct.h / 100) * (containerSize?.h || 800) * 0.6))}px`,
+                  lineHeight: '1',
+                }}
+                title={`${cell.cellId} (${cell.colType})`}
+              />
+            )
+          })}
+        </div>
+      </div>
+
+      {/* Bottom action */}
+      <div className="flex justify-end">
+        <button
+          onClick={() => {
+            if (changedCount > 0) {
+              saveReconstruction()
+            } else {
+              onNext()
+            }
+          }}
+          className="px-6 py-2.5 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors font-medium text-sm"
+        >
+          {changedCount > 0 ? 'Speichern & Weiter →' : 'Weiter →'}
+        </button>
       </div>
     </div>
   )

klausur-service/backend/ocr_pipeline_api.py

@@ -1559,6 +1559,70 @@ async def apply_llm_corrections(session_id: str, request: Request):
     }
 
 
+@router.post("/sessions/{session_id}/reconstruction")
+async def save_reconstruction(session_id: str, request: Request):
+    """Save edited cell texts from reconstruction step."""
+    session = await get_session_db(session_id)
+    if not session:
+        raise HTTPException(status_code=404, detail=f"Session {session_id} not found")
+
+    word_result = session.get("word_result")
+    if not word_result:
+        raise HTTPException(status_code=400, detail="No word result found")
+
+    body = await request.json()
+    cell_updates = body.get("cells", [])
+
+    if not cell_updates:
+        await update_session_db(session_id, current_step=7)
+        return {"session_id": session_id, "updated": 0}
+
+    # Build update map: cell_id -> new text
+    update_map = {c["cell_id"]: c["text"] for c in cell_updates}
+
+    # Update cells
+    cells = word_result.get("cells", [])
+    updated_count = 0
+    for cell in cells:
+        if cell["cell_id"] in update_map:
+            cell["text"] = update_map[cell["cell_id"]]
+            cell["status"] = "edited"
+            updated_count += 1
+
+    word_result["cells"] = cells
+
+    # Also update vocab_entries if present
+    entries = word_result.get("vocab_entries") or word_result.get("entries") or []
+    if entries:
+        # Map cell_id pattern "R{row}_C{col}" to entry fields
+        for entry in entries:
+            row_idx = entry.get("row_index", -1)
+            # Check each field's cell
+            for col_idx, field_name in enumerate(["english", "german", "example"]):
+                cell_id = f"R{row_idx:02d}_C{col_idx}"
+                # Also try without zero-padding
+                cell_id_alt = f"R{row_idx}_C{col_idx}"
+                new_text = update_map.get(cell_id) or update_map.get(cell_id_alt)
+                if new_text is not None:
+                    entry[field_name] = new_text
+
+        word_result["vocab_entries"] = entries
+        if "entries" in word_result:
+            word_result["entries"] = entries
+
+    await update_session_db(session_id, word_result=word_result, current_step=7)
+
+    if session_id in _cache:
+        _cache[session_id]["word_result"] = word_result
+
+    logger.info(f"Reconstruction saved for session {session_id}: {updated_count} cells updated")
+
+    return {
+        "session_id": session_id,
+        "updated": updated_count,
+    }
+
+
 async def _get_rows_overlay(session_id: str) -> Response:
     """Generate dewarped image with row bands drawn on it."""
     session = await get_session_db(session_id)