feat(ocr-pipeline): add Step 4 row detection UI in admin frontend

Insert rows step between columns and words in the pipeline wizard.
Shows overlay image, row list with type badges, and ground truth controls.

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

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

@@ -6,6 +6,7 @@ import { PipelineStepper } from '@/components/ocr-pipeline/PipelineStepper'
 import { StepDeskew } from '@/components/ocr-pipeline/StepDeskew'
 import { StepDewarp } from '@/components/ocr-pipeline/StepDewarp'
 import { StepColumnDetection } from '@/components/ocr-pipeline/StepColumnDetection'
+import { StepRowDetection } from '@/components/ocr-pipeline/StepRowDetection'
 import { StepWordRecognition } from '@/components/ocr-pipeline/StepWordRecognition'
 import { StepCoordinates } from '@/components/ocr-pipeline/StepCoordinates'
 import { StepReconstruction } from '@/components/ocr-pipeline/StepReconstruction'
@@ -142,10 +143,11 @@ export default function OcrPipelinePage() {
     1: 'Begradigung',
     2: 'Entzerrung',
     3: 'Spalten',
-    4: 'Woerter',
-    5: 'Koordinaten',
-    6: 'Rekonstruktion',
-    7: 'Validierung',
+    4: 'Zeilen',
+    5: 'Woerter',
+    6: 'Koordinaten',
+    7: 'Rekonstruktion',
+    8: 'Validierung',
   }
 
   const renderStep = () => {
@@ -157,12 +159,14 @@ export default function OcrPipelinePage() {
       case 2:
         return <StepColumnDetection sessionId={sessionId} onNext={handleNext} />
       case 3:
-        return <StepWordRecognition />
+        return <StepRowDetection sessionId={sessionId} onNext={handleNext} />
       case 4:
-        return <StepCoordinates />
+        return <StepWordRecognition />
       case 5:
-        return <StepReconstruction />
+        return <StepCoordinates />
       case 6:
+        return <StepReconstruction />
+      case 7:
         return <StepGroundTruth />
       default:
         return null

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

@@ -28,6 +28,7 @@ export interface SessionInfo {
   deskew_result?: DeskewResult
   dewarp_result?: DewarpResult
   column_result?: ColumnResult
+  row_result?: RowResult
 }
 
 export interface DeskewResult {
@@ -91,10 +92,35 @@ export interface ManualColumnDivider {
 
 export type ColumnTypeKey = PageRegion['type']
 
+export interface RowResult {
+  rows: RowItem[]
+  summary: Record<string, number>
+  total_rows: number
+  duration_seconds: number
+}
+
+export interface RowItem {
+  index: number
+  x: number
+  y: number
+  width: number
+  height: number
+  word_count: number
+  row_type: 'content' | 'header' | 'footer'
+  gap_before: number
+}
+
+export interface RowGroundTruth {
+  is_correct: boolean
+  corrected_rows?: RowItem[]
+  notes?: string
+}
+
 export const PIPELINE_STEPS: PipelineStep[] = [
   { id: 'deskew', name: 'Begradigung', icon: '📐', status: 'pending' },
   { id: 'dewarp', name: 'Entzerrung', icon: '🔧', status: 'pending' },
   { id: 'columns', name: 'Spalten', icon: '📊', status: 'pending' },
+  { id: 'rows', name: 'Zeilen', icon: '📏', status: 'pending' },
   { id: 'words', name: 'Woerter', icon: '🔤', status: 'pending' },
   { id: 'coordinates', name: 'Koordinaten', icon: '📍', status: 'pending' },
   { id: 'reconstruction', name: 'Rekonstruktion', icon: '🏗️', status: 'pending' },

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

@@ -0,0 +1,263 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import type { RowResult, RowGroundTruth } from '@/app/(admin)/ai/ocr-pipeline/types'
+
+const KLAUSUR_API = '/klausur-api'
+
+interface StepRowDetectionProps {
+  sessionId: string | null
+  onNext: () => void
+}
+
+export function StepRowDetection({ sessionId, onNext }: StepRowDetectionProps) {
+  const [rowResult, setRowResult] = useState<RowResult | null>(null)
+  const [detecting, setDetecting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [gtNotes, setGtNotes] = useState('')
+  const [gtSaved, setGtSaved] = useState(false)
+
+  useEffect(() => {
+    if (!sessionId) return
+
+    const fetchSession = async () => {
+      try {
+        const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}`)
+        if (res.ok) {
+          const info = await res.json()
+          if (info.row_result) {
+            setRowResult(info.row_result)
+            return
+          }
+        }
+      } catch (e) {
+        console.error('Failed to fetch session info:', e)
+      }
+      // No cached result — run auto
+      runAutoDetection()
+    }
+
+    fetchSession()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sessionId])
+
+  const runAutoDetection = useCallback(async () => {
+    if (!sessionId) return
+    setDetecting(true)
+    setError(null)
+    try {
+      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/rows`, {
+        method: 'POST',
+      })
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({ detail: res.statusText }))
+        throw new Error(err.detail || 'Zeilenerkennung fehlgeschlagen')
+      }
+      const data: RowResult = await res.json()
+      setRowResult(data)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unbekannter Fehler')
+    } finally {
+      setDetecting(false)
+    }
+  }, [sessionId])
+
+  const handleGroundTruth = useCallback(async (isCorrect: boolean) => {
+    if (!sessionId) return
+    const gt: RowGroundTruth = {
+      is_correct: isCorrect,
+      notes: gtNotes || undefined,
+    }
+    try {
+      await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/ground-truth/rows`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(gt),
+      })
+      setGtSaved(true)
+    } catch (e) {
+      console.error('Ground truth save failed:', e)
+    }
+  }, [sessionId, gtNotes])
+
+  if (!sessionId) {
+    return (
+      <div className="flex flex-col items-center justify-center py-16 text-center">
+        <div className="text-5xl mb-4">📏</div>
+        <h3 className="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">
+          Schritt 4: Zeilenerkennung
+        </h3>
+        <p className="text-gray-500 dark:text-gray-400 max-w-md">
+          Bitte zuerst Schritte 1-3 abschliessen.
+        </p>
+      </div>
+    )
+  }
+
+  const overlayUrl = `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/rows-overlay`
+  const dewarpedUrl = `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/dewarped`
+
+  const rowTypeColors: Record<string, string> = {
+    header: 'bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300',
+    content: 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300',
+    footer: 'bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300',
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Loading */}
+      {detecting && (
+        <div className="flex items-center gap-2 text-teal-600 dark:text-teal-400 text-sm">
+          <div className="animate-spin w-4 h-4 border-2 border-teal-500 border-t-transparent rounded-full" />
+          Zeilenerkennung laeuft...
+        </div>
+      )}
+
+      {/* Images: overlay vs clean */}
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
+            Mit Zeilen-Overlay
+          </div>
+          <div className="border rounded-lg overflow-hidden dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
+            {rowResult ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                src={`${overlayUrl}?t=${Date.now()}`}
+                alt="Zeilen-Overlay"
+                className="w-full h-auto"
+              />
+            ) : (
+              <div className="aspect-[3/4] flex items-center justify-center text-gray-400 text-sm">
+                {detecting ? 'Erkenne Zeilen...' : 'Keine Daten'}
+              </div>
+            )}
+          </div>
+        </div>
+        <div>
+          <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
+            Entzerrtes Bild
+          </div>
+          <div className="border rounded-lg overflow-hidden dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={dewarpedUrl}
+              alt="Entzerrt"
+              className="w-full h-auto"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Row summary */}
+      {rowResult && (
+        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 space-y-3">
+          <div className="flex items-center justify-between">
+            <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">
+              Ergebnis: {rowResult.total_rows} Zeilen erkannt
+            </h4>
+            <span className="text-xs text-gray-400">
+              {rowResult.duration_seconds}s
+            </span>
+          </div>
+
+          {/* Type summary badges */}
+          <div className="flex gap-2">
+            {Object.entries(rowResult.summary).map(([type, count]) => (
+              <span
+                key={type}
+                className={`px-2 py-0.5 rounded text-xs font-medium ${rowTypeColors[type] || 'bg-gray-100 text-gray-600'}`}
+              >
+                {type}: {count}
+              </span>
+            ))}
+          </div>
+
+          {/* Row list */}
+          <div className="max-h-64 overflow-y-auto space-y-1">
+            {rowResult.rows.map((row) => (
+              <div
+                key={row.index}
+                className={`flex items-center gap-3 px-3 py-1.5 rounded text-xs font-mono ${
+                  row.row_type === 'header' || row.row_type === 'footer'
+                    ? 'bg-gray-50 dark:bg-gray-700/50 text-gray-500'
+                    : 'text-gray-600 dark:text-gray-400'
+                }`}
+              >
+                <span className="w-8 text-right text-gray-400">R{row.index}</span>
+                <span className={`px-1.5 py-0.5 rounded text-[10px] uppercase font-semibold ${rowTypeColors[row.row_type] || ''}`}>
+                  {row.row_type}
+                </span>
+                <span>y={row.y}</span>
+                <span>h={row.height}px</span>
+                <span>{row.word_count} Woerter</span>
+                {row.gap_before > 0 && (
+                  <span className="text-gray-400">gap={row.gap_before}px</span>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Controls */}
+      {rowResult && (
+        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 space-y-3">
+          <div className="flex items-center gap-3">
+            <button
+              onClick={() => runAutoDetection()}
+              disabled={detecting}
+              className="px-3 py-1.5 text-xs border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 dark:border-gray-600 disabled:opacity-50"
+            >
+              Erneut erkennen
+            </button>
+
+            <div className="flex-1" />
+
+            {/* Ground truth */}
+            {!gtSaved ? (
+              <>
+                <input
+                  type="text"
+                  placeholder="Notizen (optional)"
+                  value={gtNotes}
+                  onChange={(e) => setGtNotes(e.target.value)}
+                  className="px-2 py-1 text-xs border rounded dark:bg-gray-700 dark:border-gray-600 w-48"
+                />
+                <button
+                  onClick={() => handleGroundTruth(true)}
+                  className="px-3 py-1.5 text-xs bg-green-600 text-white rounded-lg hover:bg-green-700"
+                >
+                  Korrekt
+                </button>
+                <button
+                  onClick={() => handleGroundTruth(false)}
+                  className="px-3 py-1.5 text-xs bg-red-600 text-white rounded-lg hover:bg-red-700"
+                >
+                  Fehlerhaft
+                </button>
+              </>
+            ) : (
+              <span className="text-xs text-green-600 dark:text-green-400">
+                Ground Truth gespeichert
+              </span>
+            )}
+
+            <button
+              onClick={onNext}
+              className="px-4 py-1.5 text-xs bg-teal-600 text-white rounded-lg hover:bg-teal-700 font-medium"
+            >
+              Weiter
+            </button>
+          </div>
+        </div>
+      )}
+
+      {error && (
+        <div className="p-3 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-lg text-sm">
+          {error}
+        </div>
+      )}
+    </div>
+  )
+}