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/app/(admin)/ai/ocr-pipeline/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { PagePurpose } from '@/components/common/PagePurpose'
 import { PipelineStepper } from '@/components/ocr-pipeline/PipelineStepper'
 import { StepDeskew } from '@/components/ocr-pipeline/StepDeskew'
@@ -10,11 +10,18 @@ import { StepWordRecognition } from '@/components/ocr-pipeline/StepWordRecogniti
 import { StepCoordinates } from '@/components/ocr-pipeline/StepCoordinates'
 import { StepReconstruction } from '@/components/ocr-pipeline/StepReconstruction'
 import { StepGroundTruth } from '@/components/ocr-pipeline/StepGroundTruth'
-import { PIPELINE_STEPS, type PipelineStep } from './types'
+import { PIPELINE_STEPS, type PipelineStep, type SessionListItem } from './types'
+
+const KLAUSUR_API = '/klausur-api'
 
 export default function OcrPipelinePage() {
   const [currentStep, setCurrentStep] = useState(0)
   const [sessionId, setSessionId] = useState<string | null>(null)
+  const [sessionName, setSessionName] = useState<string>('')
+  const [sessions, setSessions] = useState<SessionListItem[]>([])
+  const [loadingSessions, setLoadingSessions] = useState(true)
+  const [editingName, setEditingName] = useState<string | null>(null)
+  const [editNameValue, setEditNameValue] = useState('')
   const [steps, setSteps] = useState<PipelineStep[]>(
     PIPELINE_STEPS.map((s, i) => ({
       ...s,
@@ -22,6 +29,82 @@ export default function OcrPipelinePage() {
     })),
   )
 
+  // Load session list on mount
+  useEffect(() => {
+    loadSessions()
+  }, [])
+
+  const loadSessions = async () => {
+    setLoadingSessions(true)
+    try {
+      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions`)
+      if (res.ok) {
+        const data = await res.json()
+        setSessions(data.sessions || [])
+      }
+    } catch (e) {
+      console.error('Failed to load sessions:', e)
+    } finally {
+      setLoadingSessions(false)
+    }
+  }
+
+  const openSession = useCallback(async (sid: string) => {
+    try {
+      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sid}`)
+      if (!res.ok) return
+      const data = await res.json()
+
+      setSessionId(sid)
+      setSessionName(data.name || data.filename || '')
+
+      // Determine which step to jump to based on current_step
+      const dbStep = data.current_step || 1
+      // Steps: 1=deskew, 2=dewarp, 3=columns, ...
+      // UI steps are 0-indexed: 0=deskew, 1=dewarp, 2=columns, ...
+      const uiStep = Math.max(0, dbStep - 1)
+
+      setSteps(
+        PIPELINE_STEPS.map((s, i) => ({
+          ...s,
+          status: i < uiStep ? 'completed' : i === uiStep ? 'active' : 'pending',
+        })),
+      )
+      setCurrentStep(uiStep)
+    } catch (e) {
+      console.error('Failed to open session:', e)
+    }
+  }, [])
+
+  const deleteSession = useCallback(async (sid: string) => {
+    try {
+      await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sid}`, { method: 'DELETE' })
+      setSessions((prev) => prev.filter((s) => s.id !== sid))
+      if (sessionId === sid) {
+        setSessionId(null)
+        setCurrentStep(0)
+        setSteps(PIPELINE_STEPS.map((s, i) => ({ ...s, status: i === 0 ? 'active' : 'pending' })))
+      }
+    } catch (e) {
+      console.error('Failed to delete session:', e)
+    }
+  }, [sessionId])
+
+  const renameSession = useCallback(async (sid: string, newName: string) => {
+    try {
+      await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sid}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: newName }),
+      })
+      setSessions((prev) => prev.map((s) => (s.id === sid ? { ...s, name: newName } : s)))
+      if (sessionId === sid) setSessionName(newName)
+    } catch (e) {
+      console.error('Failed to rename session:', e)
+    }
+    setEditingName(null)
+  }, [sessionId])
+
   const handleStepClick = (index: number) => {
     if (index <= currentStep || steps[index].status === 'completed') {
       setCurrentStep(index)
@@ -43,9 +126,28 @@ export default function OcrPipelinePage() {
 
   const handleDeskewComplete = (sid: string) => {
     setSessionId(sid)
+    // Reload session list to show the new session
+    loadSessions()
     handleNext()
   }
 
+  const handleNewSession = () => {
+    setSessionId(null)
+    setSessionName('')
+    setCurrentStep(0)
+    setSteps(PIPELINE_STEPS.map((s, i) => ({ ...s, status: i === 0 ? 'active' : 'pending' })))
+  }
+
+  const stepNames: Record<number, string> = {
+    1: 'Begradigung',
+    2: 'Entzerrung',
+    3: 'Spalten',
+    4: 'Woerter',
+    5: 'Koordinaten',
+    6: 'Rekonstruktion',
+    7: 'Validierung',
+  }
+
   const renderStep = () => {
     switch (currentStep) {
       case 0:
@@ -53,7 +155,7 @@ export default function OcrPipelinePage() {
       case 1:
         return <StepDewarp sessionId={sessionId} onNext={handleNext} />
       case 2:
-        return <StepColumnDetection />
+        return <StepColumnDetection sessionId={sessionId} onNext={handleNext} />
       case 3:
         return <StepWordRecognition />
       case 4:
@@ -75,7 +177,7 @@ export default function OcrPipelinePage() {
         audience={['Entwickler', 'Data Scientists']}
         architecture={{
           services: ['klausur-service (FastAPI)', 'OpenCV', 'Tesseract'],
-          databases: ['In-Memory Sessions'],
+          databases: ['PostgreSQL Sessions'],
         }}
         relatedPages={[
           { name: 'OCR Vergleich', href: '/ai/ocr-compare', description: 'Methoden-Vergleich' },
@@ -84,6 +186,97 @@ export default function OcrPipelinePage() {
         defaultCollapsed
       />
 
+      {/* Session List */}
+      <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4">
+        <div className="flex items-center justify-between mb-3">
+          <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">
+            Sessions
+          </h3>
+          <button
+            onClick={handleNewSession}
+            className="text-xs px-3 py-1.5 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors"
+          >
+            + Neue Session
+          </button>
+        </div>
+
+        {loadingSessions ? (
+          <div className="text-sm text-gray-400 py-2">Lade Sessions...</div>
+        ) : sessions.length === 0 ? (
+          <div className="text-sm text-gray-400 py-2">Noch keine Sessions vorhanden.</div>
+        ) : (
+          <div className="space-y-1 max-h-48 overflow-y-auto">
+            {sessions.map((s) => (
+              <div
+                key={s.id}
+                className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors cursor-pointer ${
+                  sessionId === s.id
+                    ? 'bg-teal-50 dark:bg-teal-900/30 border border-teal-200 dark:border-teal-700'
+                    : 'hover:bg-gray-50 dark:hover:bg-gray-700/50'
+                }`}
+              >
+                <div className="flex-1 min-w-0" onClick={() => openSession(s.id)}>
+                  {editingName === s.id ? (
+                    <input
+                      autoFocus
+                      value={editNameValue}
+                      onChange={(e) => setEditNameValue(e.target.value)}
+                      onBlur={() => renameSession(s.id, editNameValue)}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter') renameSession(s.id, editNameValue)
+                        if (e.key === 'Escape') setEditingName(null)
+                      }}
+                      onClick={(e) => e.stopPropagation()}
+                      className="w-full px-1 py-0.5 text-sm border rounded dark:bg-gray-700 dark:border-gray-600"
+                    />
+                  ) : (
+                    <div className="truncate font-medium text-gray-700 dark:text-gray-300">
+                      {s.name || s.filename}
+                    </div>
+                  )}
+                  <div className="text-xs text-gray-400 flex gap-2">
+                    <span>{new Date(s.created_at).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: '2-digit', hour: '2-digit', minute: '2-digit' })}</span>
+                    <span>Schritt {s.current_step}: {stepNames[s.current_step] || '?'}</span>
+                  </div>
+                </div>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    setEditNameValue(s.name || s.filename)
+                    setEditingName(s.id)
+                  }}
+                  className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                  title="Umbenennen"
+                >
+                  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+                  </svg>
+                </button>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    if (confirm('Session loeschen?')) deleteSession(s.id)
+                  }}
+                  className="p-1 text-gray-400 hover:text-red-500"
+                  title="Loeschen"
+                >
+                  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                  </svg>
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Active session name */}
+      {sessionId && sessionName && (
+        <div className="text-sm text-gray-500 dark:text-gray-400">
+          Aktive Session: <span className="font-medium text-gray-700 dark:text-gray-300">{sessionName}</span>
+        </div>
+      )}
+
       <PipelineStepper steps={steps} currentStep={currentStep} onStepClick={handleStepClick} />
 
       <div className="min-h-[400px]">{renderStep()}</div>

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

@@ -7,14 +7,27 @@ export interface PipelineStep {
   status: PipelineStepStatus
 }
 
+export interface SessionListItem {
+  id: string
+  name: string
+  filename: string
+  status: string
+  current_step: number
+  created_at: string
+  updated_at?: string
+}
+
 export interface SessionInfo {
   session_id: string
   filename: string
+  name?: string
   image_width: number
   image_height: number
   original_image_url: string
+  current_step?: number
   deskew_result?: DeskewResult
   dewarp_result?: DewarpResult
+  column_result?: ColumnResult
 }
 
 export interface DeskewResult {
@@ -50,6 +63,24 @@ export interface DewarpGroundTruth {
   notes?: string
 }
 
+export interface PageRegion {
+  type: 'column_en' | 'column_de' | 'column_example' | 'header' | 'footer'
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export interface ColumnResult {
+  columns: PageRegion[]
+  duration_seconds: number
+}
+
+export interface ColumnGroundTruth {
+  is_correct: boolean
+  notes?: string
+}
+
 export const PIPELINE_STEPS: PipelineStep[] = [
   { id: 'deskew', name: 'Begradigung', icon: '📐', status: 'pending' },
   { id: 'dewarp', name: 'Entzerrung', icon: '🔧', status: 'pending' },