feat: Frontend Sub-Sessions (Boxen) in OCR-Pipeline UI

- BoxSessionTabs: Tab-Leiste zum Wechsel zwischen Haupt- und Box-Sessions
- StepColumnDetection: Box-Info + "Box-Sessions erstellen" Button
- page.tsx: Session-Wechsel, Sub-Session-State, auto-return nach Abschluss
- types.ts: SubSession, PageZone, erweiterte SessionInfo/ColumnResult

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

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

@@ -13,7 +13,8 @@ import { StepWordRecognition } from '@/components/ocr-pipeline/StepWordRecogniti
 import { StepLlmReview } from '@/components/ocr-pipeline/StepLlmReview'
 import { StepReconstruction } from '@/components/ocr-pipeline/StepReconstruction'
 import { StepGroundTruth } from '@/components/ocr-pipeline/StepGroundTruth'
-import { PIPELINE_STEPS, DOCUMENT_CATEGORIES, type PipelineStep, type SessionListItem, type DocumentTypeResult, type DocumentCategory } from './types'
+import { BoxSessionTabs } from '@/components/ocr-pipeline/BoxSessionTabs'
+import { PIPELINE_STEPS, DOCUMENT_CATEGORIES, type PipelineStep, type SessionListItem, type DocumentTypeResult, type DocumentCategory, type SubSession } from './types'
 
 const KLAUSUR_API = '/klausur-api'
 
@@ -28,6 +29,8 @@ export default function OcrPipelinePage() {
   const [editingCategory, setEditingCategory] = useState<string | null>(null)
   const [docTypeResult, setDocTypeResult] = useState<DocumentTypeResult | null>(null)
   const [activeCategory, setActiveCategory] = useState<DocumentCategory | undefined>(undefined)
+  const [subSessions, setSubSessions] = useState<SubSession[]>([])
+  const [parentSessionId, setParentSessionId] = useState<string | null>(null)
   const [steps, setSteps] = useState<PipelineStep[]>(
     PIPELINE_STEPS.map((s, i) => ({
       ...s,
@@ -55,7 +58,7 @@ export default function OcrPipelinePage() {
     }
   }
 
-  const openSession = useCallback(async (sid: string) => {
+  const openSession = useCallback(async (sid: string, keepSubSessions?: boolean) => {
     try {
       const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sid}`)
       if (!res.ok) return
@@ -65,6 +68,18 @@ export default function OcrPipelinePage() {
       setSessionName(data.name || data.filename || '')
       setActiveCategory(data.document_category || undefined)
 
+      // Sub-session handling
+      if (data.sub_sessions && data.sub_sessions.length > 0) {
+        setSubSessions(data.sub_sessions)
+        setParentSessionId(sid)
+      } else if (data.parent_session_id) {
+        // This is a sub-session — keep parent info but don't reset sub-session list
+        setParentSessionId(data.parent_session_id)
+      } else if (!keepSubSessions) {
+        setSubSessions([])
+        setParentSessionId(null)
+      }
+
       // Restore doc type result if available
       const savedDocType: DocumentTypeResult | null = data.doc_type_result || null
       setDocTypeResult(savedDocType)
@@ -98,6 +113,8 @@ export default function OcrPipelinePage() {
         setSessionId(null)
         setCurrentStep(0)
         setDocTypeResult(null)
+        setSubSessions([])
+        setParentSessionId(null)
         setSteps(PIPELINE_STEPS.map((s, i) => ({ ...s, status: i === 0 ? 'active' : 'pending' })))
       }
     } catch (e) {
@@ -144,6 +161,8 @@ export default function OcrPipelinePage() {
       setCurrentStep(0)
       setDocTypeResult(null)
       setActiveCategory(undefined)
+      setSubSessions([])
+      setParentSessionId(null)
       setSteps(PIPELINE_STEPS.map((s, i) => ({ ...s, status: i === 0 ? 'active' : 'pending' })))
     } catch (e) {
       console.error('Failed to delete all sessions:', e)
@@ -168,10 +187,22 @@ export default function OcrPipelinePage() {
 
   const handleNext = () => {
     if (currentStep >= steps.length - 1) {
-      // Last step completed — return to session list
+      // Last step completed
+      if (parentSessionId && sessionId !== parentSessionId) {
+        // Sub-session completed — update its status and stay in tab view
+        setSubSessions((prev) =>
+          prev.map((s) => s.id === sessionId ? { ...s, status: 'completed', current_step: 10 } : s)
+        )
+        // Switch back to parent
+        handleSessionChange(parentSessionId)
+        return
+      }
+      // Main session: return to session list
       setSteps(PIPELINE_STEPS.map((s, i) => ({ ...s, status: i === 0 ? 'active' : 'pending' })))
       setCurrentStep(0)
       setSessionId(null)
+      setSubSessions([])
+      setParentSessionId(null)
       loadSessions()
       return
     }
@@ -268,9 +299,20 @@ export default function OcrPipelinePage() {
     setSessionName('')
     setCurrentStep(0)
     setDocTypeResult(null)
+    setSubSessions([])
+    setParentSessionId(null)
     setSteps(PIPELINE_STEPS.map((s, i) => ({ ...s, status: i === 0 ? 'active' : 'pending' })))
   }
 
+  const handleSessionChange = useCallback((newSessionId: string) => {
+    openSession(newSessionId, true)
+  }, [openSession])
+
+  const handleBoxSessionsCreated = useCallback((subs: SubSession[]) => {
+    setSubSessions(subs)
+    if (sessionId) setParentSessionId(sessionId)
+  }, [sessionId])
+
   const stepNames: Record<number, string> = {
     1: 'Orientierung',
     2: 'Begradigung',
@@ -318,7 +360,7 @@ export default function OcrPipelinePage() {
       case 3:
         return <StepCrop sessionId={sessionId} onNext={handleCropNext} />
       case 4:
-        return <StepColumnDetection sessionId={sessionId} onNext={handleNext} />
+        return <StepColumnDetection sessionId={sessionId} onNext={handleNext} onBoxSessionsCreated={handleBoxSessionsCreated} />
       case 5:
         return <StepRowDetection sessionId={sessionId} onNext={handleNext} />
       case 6:
@@ -552,6 +594,15 @@ export default function OcrPipelinePage() {
         onDocTypeChange={handleDocTypeChange}
       />
 
+      {subSessions.length > 0 && parentSessionId && sessionId && (
+        <BoxSessionTabs
+          parentSessionId={parentSessionId}
+          subSessions={subSessions}
+          activeSessionId={sessionId}
+          onSessionChange={handleSessionChange}
+        />
+      )}
+
       <div className="min-h-[400px]">{renderStep()}</div>
     </div>
   )

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

@@ -34,6 +34,16 @@ export interface SessionListItem {
   doc_type?: string
   created_at: string
   updated_at?: string
+  parent_session_id?: string | null
+  box_index?: number | null
+}
+
+export interface SubSession {
+  id: string
+  name: string
+  box_index: number
+  current_step?: number
+  status?: string
 }
 
 export interface PipelineLogEntry {
@@ -95,6 +105,9 @@ export interface SessionInfo {
   row_result?: RowResult
   word_result?: GridResult
   doc_type_result?: DocumentTypeResult
+  sub_sessions?: SubSession[]
+  parent_session_id?: string
+  box_index?: number
 }
 
 export interface DeskewResult {
@@ -151,9 +164,17 @@ export interface PageRegion {
   classification_method?: string
 }
 
+export interface PageZone {
+  zone_type: 'content' | 'box'
+  y_start: number
+  y_end: number
+  box?: { x: number; y: number; width: number; height: number }
+}
+
 export interface ColumnResult {
   columns: PageRegion[]
   duration_seconds: number
+  zones?: PageZone[]
 }
 
 export interface ColumnGroundTruth {