feat(ocr-pipeline): 6 systematic improvements for robustness, performance & UX

1. Unit tests: 76 new parametrized tests for noise filter, phonetic detection,
   cell text cleaning, and row merging (116 total, all green)
2. Continuation-row merge: detect multi-line vocab entries where text wraps
   (lowercase EN + empty DE) and merge into previous entry
3. Empty DE fallback: secondary PSM=7 OCR pass for cells missed by PSM=6
4. Batch-OCR: collect empty cells per column, run single Tesseract call on
   column strip instead of per-cell (~66% fewer calls for 3+ empty cells)
5. StepReconstruction UI: font scaling via naturalHeight, empty EN/DE field
   highlighting, undo/redo (Ctrl+Z), per-cell reset button
6. Session reprocess: POST /sessions/{id}/reprocess endpoint to re-run from
   any step, with reprocess button on completed pipeline steps

Also fixes pre-existing dewarp_image tuple unpacking bug in run_cv_pipeline
and updates dewarp tests to match current (image, info) return signature.

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

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

@@ -6,9 +6,10 @@ interface PipelineStepperProps {
   steps: PipelineStep[]
   currentStep: number
   onStepClick: (index: number) => void
+  onReprocess?: (index: number) => void
 }
 
-export function PipelineStepper({ steps, currentStep, onStepClick }: PipelineStepperProps) {
+export function PipelineStepper({ steps, currentStep, onStepClick, onReprocess }: PipelineStepperProps) {
   return (
     <div className="flex items-center justify-between px-4 py-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
       {steps.map((step, index) => {
@@ -26,25 +27,37 @@ export function PipelineStepper({ steps, currentStep, onStepClick }: PipelineSte
                 }`}
               />
             )}
-            <button
-              onClick={() => isClickable && onStepClick(index)}
-              disabled={!isClickable}
-              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium transition-all ${
-                isActive
-                  ? 'bg-teal-100 text-teal-700 dark:bg-teal-900/40 dark:text-teal-300 ring-2 ring-teal-400'
-                  : isCompleted
-                    ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300'
-                    : isFailed
-                      ? 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'
-                      : 'text-gray-400 dark:text-gray-500'
-              } ${isClickable ? 'cursor-pointer hover:opacity-80' : 'cursor-default'}`}
-            >
-              <span className="text-base">
-                {isCompleted ? '✓' : isFailed ? '✗' : step.icon}
-              </span>
-              <span className="hidden sm:inline">{step.name}</span>
-              <span className="sm:hidden">{index + 1}</span>
-            </button>
+            <div className="relative group">
+              <button
+                onClick={() => isClickable && onStepClick(index)}
+                disabled={!isClickable}
+                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium transition-all ${
+                  isActive
+                    ? 'bg-teal-100 text-teal-700 dark:bg-teal-900/40 dark:text-teal-300 ring-2 ring-teal-400'
+                    : isCompleted
+                      ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300'
+                      : isFailed
+                        ? 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'
+                        : 'text-gray-400 dark:text-gray-500'
+                } ${isClickable ? 'cursor-pointer hover:opacity-80' : 'cursor-default'}`}
+              >
+                <span className="text-base">
+                  {isCompleted ? '\u2713' : isFailed ? '\u2717' : step.icon}
+                </span>
+                <span className="hidden sm:inline">{step.name}</span>
+                <span className="sm:hidden">{index + 1}</span>
+              </button>
+              {/* Reprocess button — shown on completed steps on hover */}
+              {isCompleted && onReprocess && (
+                <button
+                  onClick={(e) => { e.stopPropagation(); onReprocess(index) }}
+                  className="absolute -top-1 -right-1 w-4 h-4 bg-orange-500 text-white rounded-full text-[9px] leading-none opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
+                  title={`Ab hier neu verarbeiten`}
+                >
+                  &#x21BB;
+                </button>
+              )}
+            </div>
           </div>
         )
       })}

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

@@ -20,13 +20,23 @@ interface EditableCell {
   colIndex: number
 }
 
+type UndoAction = { cellId: string; oldText: string; newText: string }
+
 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 [imageNaturalH, setImageNaturalH] = useState(0)
+  const [showEmptyHighlight, setShowEmptyHighlight] = useState(true)
+
+  // Undo/Redo stacks
+  const [undoStack, setUndoStack] = useState<UndoAction[]>([])
+  const [redoStack, setRedoStack] = useState<UndoAction[]>([])
+
+  // All cells including empty ones (for empty field highlighting)
+  const [allCells, setAllCells] = useState<EditableCell[]>([])
 
   const containerRef = useRef<HTMLDivElement>(null)
   const imageRef = useRef<HTMLImageElement>(null)
@@ -38,16 +48,11 @@ export function StepReconstruction({ sessionId, onNext }: StepReconstructionProp
   // 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()
+  // Track image natural height for font scaling
+  const handleImageLoad = useCallback(() => {
+    if (imageRef.current) {
+      setImageNaturalH(imageRef.current.naturalHeight)
+    }
   }, [])
 
   const loadSessionData = async () => {
@@ -67,19 +72,21 @@ export function StepReconstruction({ sessionId, onNext }: StepReconstructionProp
 
       // 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,
-        }))
+      const allEditableCells: EditableCell[] = gridCells.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)
+      setAllCells(allEditableCells)
+      setCells(allEditableCells.filter(c => c.text.trim() !== ''))
+      setEditedTexts(new Map())
+      setUndoStack([])
+      setRedoStack([])
       setStatus('ready')
     } catch (e: unknown) {
       setError(e instanceof Error ? e.message : String(e))
@@ -89,12 +96,80 @@ export function StepReconstruction({ sessionId, onNext }: StepReconstructionProp
 
   const handleTextChange = useCallback((cellId: string, newText: string) => {
     setEditedTexts(prev => {
+      const oldText = prev.get(cellId)
+      const cell = cells.find(c => c.cellId === cellId)
+      const prevText = oldText ?? cell?.text ?? ''
+
+      // Push to undo stack
+      setUndoStack(stack => [...stack, { cellId, oldText: prevText, newText }])
+      setRedoStack([]) // Clear redo on new edit
+
       const next = new Map(prev)
       next.set(cellId, newText)
       return next
     })
+  }, [cells])
+
+  const undo = useCallback(() => {
+    setUndoStack(stack => {
+      if (stack.length === 0) return stack
+      const action = stack[stack.length - 1]
+      const newStack = stack.slice(0, -1)
+
+      setRedoStack(rs => [...rs, action])
+      setEditedTexts(prev => {
+        const next = new Map(prev)
+        next.set(action.cellId, action.oldText)
+        return next
+      })
+
+      return newStack
+    })
   }, [])
 
+  const redo = useCallback(() => {
+    setRedoStack(stack => {
+      if (stack.length === 0) return stack
+      const action = stack[stack.length - 1]
+      const newStack = stack.slice(0, -1)
+
+      setUndoStack(us => [...us, action])
+      setEditedTexts(prev => {
+        const next = new Map(prev)
+        next.set(action.cellId, action.newText)
+        return next
+      })
+
+      return newStack
+    })
+  }, [])
+
+  const resetCell = useCallback((cellId: string) => {
+    const cell = cells.find(c => c.cellId === cellId)
+    if (!cell) return
+    setEditedTexts(prev => {
+      const next = new Map(prev)
+      next.delete(cellId)
+      return next
+    })
+  }, [cells])
+
+  // Global keyboard shortcuts for undo/redo
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'z') {
+        e.preventDefault()
+        if (e.shiftKey) {
+          redo()
+        } else {
+          undo()
+        }
+      }
+    }
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [undo, redo])
+
   const getDisplayText = useCallback((cell: EditableCell): string => {
     return editedTexts.get(cell.cellId) ?? cell.text
   }, [editedTexts])
@@ -112,6 +187,18 @@ export function StepReconstruction({ sessionId, onNext }: StepReconstructionProp
     return count
   }, [cells, isEdited])
 
+  // Identify empty required cells (EN or DE columns with no text)
+  const emptyCellIds = useMemo(() => {
+    const required = new Set(['column_en', 'column_de'])
+    const ids = new Set<string>()
+    for (const cell of allCells) {
+      if (required.has(cell.colType) && !cell.text.trim()) {
+        ids.add(cell.cellId)
+      }
+    }
+    return ids
+  }, [allCells])
+
   // Sort cells for tab navigation: by row, then by column
   const sortedCellIds = useMemo(() => {
     return [...cells]
@@ -181,6 +268,13 @@ export function StepReconstruction({ sessionId, onNext }: StepReconstructionProp
     return colors[colType] || 'border-gray-400/40 focus:border-gray-500'
   }
 
+  // Font size based on image natural height (not container) scaled by zoom
+  const getFontSize = useCallback((bboxH: number): number => {
+    const baseH = imageNaturalH || 800
+    const px = (bboxH / 100) * baseH * 0.55
+    return Math.max(8, Math.min(18, px * (zoom / 100)))
+  }, [imageNaturalH, zoom])
+
   if (!sessionId) {
     return <div className="text-center py-12 text-gray-400">Bitte zuerst eine Session auswaehlen.</div>
   }
@@ -197,7 +291,7 @@ export function StepReconstruction({ sessionId, onNext }: StepReconstructionProp
   if (status === 'error') {
     return (
       <div className="flex flex-col items-center justify-center py-12 text-center">
-        <div className="text-5xl mb-4">⚠️</div>
+        <div className="text-5xl mb-4">&#x26A0;&#xFE0F;</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">
@@ -207,7 +301,7 @@ export function StepReconstruction({ sessionId, onNext }: StepReconstructionProp
           </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 →
+            Ueberspringen &rarr;
           </button>
         </div>
       </div>
@@ -217,14 +311,14 @@ export function StepReconstruction({ sessionId, onNext }: StepReconstructionProp
   if (status === 'saved') {
     return (
       <div className="flex flex-col items-center justify-center py-12 text-center">
-        <div className="text-5xl mb-4">✅</div>
+        <div className="text-5xl mb-4">&#x2705;</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 →
+          Weiter &rarr;
         </button>
       </div>
     )
@@ -239,16 +333,54 @@ export function StepReconstruction({ sessionId, onNext }: StepReconstructionProp
             Schritt 7: Rekonstruktion
           </h3>
           <span className="text-xs text-gray-400">
-            {cells.length} Zellen · {changedCount} geaendert
+            {cells.length} Zellen &middot; {changedCount} geaendert
+            {emptyCellIds.size > 0 && showEmptyHighlight && (
+              <span className="text-red-400 ml-1">&middot; {emptyCellIds.size} leer</span>
+            )}
           </span>
         </div>
         <div className="flex items-center gap-2">
+          {/* Undo/Redo */}
+          <button
+            onClick={undo}
+            disabled={undoStack.length === 0}
+            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 disabled:opacity-30"
+            title="Rueckgaengig (Ctrl+Z)"
+          >
+            &#x21A9;
+          </button>
+          <button
+            onClick={redo}
+            disabled={redoStack.length === 0}
+            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 disabled:opacity-30"
+            title="Wiederholen (Ctrl+Shift+Z)"
+          >
+            &#x21AA;
+          </button>
+
+          <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />
+
+          {/* Empty field toggle */}
+          <button
+            onClick={() => setShowEmptyHighlight(v => !v)}
+            className={`px-2 py-1 text-xs border rounded transition-colors ${
+              showEmptyHighlight
+                ? 'border-red-300 bg-red-50 text-red-600 dark:border-red-700 dark:bg-red-900/30 dark:text-red-400'
+                : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
+            }`}
+            title="Leere Pflichtfelder markieren"
+          >
+            Leer
+          </button>
+
+          <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />
+
           {/* 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"
           >
-            −
+            &minus;
           </button>
           <span className="text-xs text-gray-500 w-10 text-center">{zoom}%</span>
           <button
@@ -291,34 +423,63 @@ export function StepReconstruction({ sessionId, onNext }: StepReconstructionProp
             alt="Dewarped"
             className="block"
             style={{ opacity: 0.3 }}
+            onLoad={handleImageLoad}
           />
 
+          {/* Empty field markers */}
+          {showEmptyHighlight && allCells
+            .filter(c => emptyCellIds.has(c.cellId))
+            .map(cell => (
+              <div
+                key={`empty-${cell.cellId}`}
+                className="absolute border-2 border-dashed border-red-400/60 rounded pointer-events-none"
+                style={{
+                  left: `${cell.bboxPct.x}%`,
+                  top: `${cell.bboxPct.y}%`,
+                  width: `${cell.bboxPct.w}%`,
+                  height: `${cell.bboxPct.h}%`,
+                }}
+              />
+            ))}
+
           {/* 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 key={cell.cellId} className="absolute group" style={{
+                left: `${cell.bboxPct.x}%`,
+                top: `${cell.bboxPct.y}%`,
+                width: `${cell.bboxPct.w}%`,
+                height: `${cell.bboxPct.h}%`,
+              }}>
+                <input
+                  id={`cell-${cell.cellId}`}
+                  type="text"
+                  value={displayText}
+                  onChange={(e) => handleTextChange(cell.cellId, e.target.value)}
+                  onKeyDown={(e) => handleKeyDown(e, cell.cellId)}
+                  className={`w-full h-full 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={{
+                    fontSize: `${getFontSize(cell.bboxPct.h)}px`,
+                    lineHeight: '1',
+                  }}
+                  title={`${cell.cellId} (${cell.colType})`}
+                />
+                {/* Per-cell reset button (X) — only shown for edited cells on hover */}
+                {edited && (
+                  <button
+                    onClick={() => resetCell(cell.cellId)}
+                    className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white rounded-full text-[9px] leading-none opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
+                    title="Zuruecksetzen"
+                  >
+                    &times;
+                  </button>
+                )}
+              </div>
             )
           })}
         </div>
@@ -336,7 +497,7 @@ export function StepReconstruction({ sessionId, onNext }: StepReconstructionProp
           }}
           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 →'}
+          {changedCount > 0 ? 'Speichern & Weiter \u2192' : 'Weiter \u2192'}
         </button>
       </div>
     </div>