feat: Persistente Sessions (PostgreSQL) + Spaltenerkennung (Step 3)

Sessions werden jetzt in PostgreSQL gespeichert statt in-memory.
Neue Session-Liste mit Name, Datum, Schritt. Sessions ueberleben
Browser-Refresh und Container-Neustart. Step 3 nutzt analyze_layout()
fuer automatische Spaltenerkennung mit farbigem Overlay.

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

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

@@ -0,0 +1,119 @@
+'use client'
+
+import { useState } from 'react'
+import type { ColumnResult, ColumnGroundTruth, PageRegion } from '@/app/(admin)/ai/ocr-pipeline/types'
+
+interface ColumnControlsProps {
+  columnResult: ColumnResult | null
+  onRerun: () => void
+  onGroundTruth: (gt: ColumnGroundTruth) => void
+  onNext: () => void
+  isDetecting: boolean
+}
+
+const TYPE_COLORS: Record<string, string> = {
+  column_en: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
+  column_de: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
+  column_example: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400',
+  header: 'bg-gray-100 text-gray-600 dark:bg-gray-700/50 dark:text-gray-400',
+  footer: 'bg-gray-100 text-gray-600 dark:bg-gray-700/50 dark:text-gray-400',
+}
+
+const TYPE_LABELS: Record<string, string> = {
+  column_en: 'EN',
+  column_de: 'DE',
+  column_example: 'Beispiel',
+  header: 'Header',
+  footer: 'Footer',
+}
+
+export function ColumnControls({ columnResult, onRerun, onGroundTruth, onNext, isDetecting }: ColumnControlsProps) {
+  const [gtSaved, setGtSaved] = useState(false)
+
+  if (!columnResult) return null
+
+  const columns = columnResult.columns.filter((c: PageRegion) => c.type.startsWith('column'))
+  const headerFooter = columnResult.columns.filter((c: PageRegion) => !c.type.startsWith('column'))
+
+  const handleGt = (isCorrect: boolean) => {
+    onGroundTruth({ is_correct: isCorrect })
+    setGtSaved(true)
+  }
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 space-y-4">
+      {/* Summary */}
+      <div className="flex items-center gap-3">
+        <div className="text-sm text-gray-600 dark:text-gray-400">
+          <span className="font-medium text-gray-800 dark:text-gray-200">{columns.length} Spalten</span> erkannt
+          {columnResult.duration_seconds > 0 && (
+            <span className="ml-2 text-xs">({columnResult.duration_seconds}s)</span>
+          )}
+        </div>
+        <button
+          onClick={onRerun}
+          disabled={isDetecting}
+          className="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors disabled:opacity-50"
+        >
+          Erneut erkennen
+        </button>
+      </div>
+
+      {/* Column list */}
+      <div className="space-y-2">
+        {columns.map((col: PageRegion, i: number) => (
+          <div key={i} className="flex items-center gap-3 text-sm">
+            <span className={`px-2 py-0.5 rounded text-xs font-medium ${TYPE_COLORS[col.type] || ''}`}>
+              {TYPE_LABELS[col.type] || col.type}
+            </span>
+            <span className="text-gray-500 dark:text-gray-400 text-xs font-mono">
+              x={col.x} y={col.y} {col.width}x{col.height}px
+            </span>
+          </div>
+        ))}
+        {headerFooter.map((r: PageRegion, i: number) => (
+          <div key={`hf-${i}`} className="flex items-center gap-3 text-sm">
+            <span className={`px-2 py-0.5 rounded text-xs font-medium ${TYPE_COLORS[r.type] || ''}`}>
+              {TYPE_LABELS[r.type] || r.type}
+            </span>
+            <span className="text-gray-500 dark:text-gray-400 text-xs font-mono">
+              x={r.x} y={r.y} {r.width}x{r.height}px
+            </span>
+          </div>
+        ))}
+      </div>
+
+      {/* Ground Truth + Navigation */}
+      <div className="flex items-center justify-between pt-2 border-t border-gray-100 dark:border-gray-700">
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-gray-500 dark:text-gray-400">Spalten korrekt?</span>
+          {gtSaved ? (
+            <span className="text-xs text-green-600 dark:text-green-400">Gespeichert</span>
+          ) : (
+            <>
+              <button
+                onClick={() => handleGt(true)}
+                className="text-xs px-3 py-1 bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 rounded hover:bg-green-200 dark:hover:bg-green-900/50 transition-colors"
+              >
+                Ja
+              </button>
+              <button
+                onClick={() => handleGt(false)}
+                className="text-xs px-3 py-1 bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400 rounded hover:bg-red-200 dark:hover:bg-red-900/50 transition-colors"
+              >
+                Nein
+              </button>
+            </>
+          )}
+        </div>
+
+        <button
+          onClick={onNext}
+          className="px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors text-sm font-medium"
+        >
+          Weiter
+        </button>
+      </div>
+    </div>
+  )
+}

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

@@ -1,19 +1,168 @@
 'use client'
 
-export function StepColumnDetection() {
-  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 3: Spaltenerkennung
-      </h3>
-      <p className="text-gray-500 dark:text-gray-400 max-w-md">
-        Erkennung unsichtbarer Spaltentrennungen in der Vokabelseite.
-        Dieser Schritt wird in einer zukuenftigen Version implementiert.
-      </p>
-      <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">
-        Kommt bald
+import { useCallback, useEffect, useState } from 'react'
+import type { ColumnResult, ColumnGroundTruth } from '@/app/(admin)/ai/ocr-pipeline/types'
+import { ColumnControls } from './ColumnControls'
+
+const KLAUSUR_API = '/klausur-api'
+
+interface StepColumnDetectionProps {
+  sessionId: string | null
+  onNext: () => void
+}
+
+export function StepColumnDetection({ sessionId, onNext }: StepColumnDetectionProps) {
+  const [columnResult, setColumnResult] = useState<ColumnResult | null>(null)
+  const [detecting, setDetecting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  // Auto-trigger column detection on mount
+  useEffect(() => {
+    if (!sessionId || columnResult) return
+
+    const runDetection = async () => {
+      setDetecting(true)
+      setError(null)
+      try {
+        // First check if columns already detected (reload case)
+        const infoRes = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}`)
+        if (infoRes.ok) {
+          const info = await infoRes.json()
+          if (info.column_result) {
+            setColumnResult(info.column_result)
+            setDetecting(false)
+            return
+          }
+        }
+
+        // Run detection
+        const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/columns`, {
+          method: 'POST',
+        })
+        if (!res.ok) {
+          const err = await res.json().catch(() => ({ detail: res.statusText }))
+          throw new Error(err.detail || 'Spaltenerkennung fehlgeschlagen')
+        }
+        const data: ColumnResult = await res.json()
+        setColumnResult(data)
+      } catch (e) {
+        setError(e instanceof Error ? e.message : 'Unbekannter Fehler')
+      } finally {
+        setDetecting(false)
+      }
+    }
+
+    runDetection()
+  }, [sessionId, columnResult])
+
+  const handleRerun = useCallback(async () => {
+    if (!sessionId) return
+    setDetecting(true)
+    setError(null)
+    try {
+      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/columns`, {
+        method: 'POST',
+      })
+      if (!res.ok) throw new Error('Spaltenerkennung fehlgeschlagen')
+      const data: ColumnResult = await res.json()
+      setColumnResult(data)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Fehler')
+    } finally {
+      setDetecting(false)
+    }
+  }, [sessionId])
+
+  const handleGroundTruth = useCallback(async (gt: ColumnGroundTruth) => {
+    if (!sessionId) return
+    try {
+      await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/ground-truth/columns`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(gt),
+      })
+    } catch (e) {
+      console.error('Ground truth save failed:', e)
+    }
+  }, [sessionId])
+
+  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 3: Spaltenerkennung
+        </h3>
+        <p className="text-gray-500 dark:text-gray-400 max-w-md">
+          Bitte zuerst Schritt 1 und 2 abschliessen.
+        </p>
       </div>
+    )
+  }
+
+  const dewarpedUrl = `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/dewarped`
+  const overlayUrl = `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/columns-overlay`
+
+  return (
+    <div className="space-y-4">
+      {/* Loading indicator */}
+      {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" />
+          Spaltenerkennung laeuft...
+        </div>
+      )}
+
+      {/* Image comparison: overlay (left) vs clean (right) */}
+      <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 Spalten-Overlay
+          </div>
+          <div className="border rounded-lg overflow-hidden dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
+            {columnResult ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                src={`${overlayUrl}?t=${Date.now()}`}
+                alt="Spalten-Overlay"
+                className="w-full h-auto"
+              />
+            ) : (
+              <div className="aspect-[3/4] flex items-center justify-center text-gray-400 text-sm">
+                {detecting ? 'Erkenne Spalten...' : '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>
+
+      {/* Controls */}
+      <ColumnControls
+        columnResult={columnResult}
+        onRerun={handleRerun}
+        onGroundTruth={handleGroundTruth}
+        onNext={onNext}
+        isDetecting={detecting}
+      />
+
+      {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>
   )
 }

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

@@ -22,6 +22,7 @@ export function StepDeskew({ sessionId: existingSessionId, onNext }: StepDeskewP
   const [showGrid, setShowGrid] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [dragOver, setDragOver] = useState(false)
+  const [sessionName, setSessionName] = useState('')
 
   // Reload session data when navigating back from a later step
   useEffect(() => {
@@ -67,6 +68,9 @@ export function StepDeskew({ sessionId: existingSessionId, onNext }: StepDeskewP
     try {
       const formData = new FormData()
       formData.append('file', file)
+      if (sessionName.trim()) {
+        formData.append('name', sessionName.trim())
+      }
 
       const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions`, {
         method: 'POST',
@@ -167,6 +171,20 @@ export function StepDeskew({ sessionId: existingSessionId, onNext }: StepDeskewP
   if (!session) {
     return (
       <div className="space-y-4">
+        {/* Session name input */}
+        <div>
+          <label className="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">
+            Session-Name (optional)
+          </label>
+          <input
+            type="text"
+            value={sessionName}
+            onChange={(e) => setSessionName(e.target.value)}
+            placeholder="z.B. Unit 3 Seite 42"
+            className="w-full max-w-sm px-3 py-2 text-sm border rounded-lg dark:bg-gray-800 dark:border-gray-600 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-teal-500"
+          />
+        </div>
+
         <div
           onDragOver={(e) => { e.preventDefault(); setDragOver(true) }}
           onDragLeave={() => setDragOver(false)}