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/components/ocr-pipeline/BoxSessionTabs.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import type { SubSession } from '@/app/(admin)/ai/ocr-pipeline/types'
+
+interface BoxSessionTabsProps {
+  parentSessionId: string
+  subSessions: SubSession[]
+  activeSessionId: string
+  onSessionChange: (sessionId: string) => void
+}
+
+const STATUS_ICONS: Record<string, string> = {
+  pending: '\u23F3',       // hourglass
+  processing: '\uD83D\uDD04', // arrows
+  completed: '\u2713',    // checkmark
+}
+
+function getStatusIcon(sub: SubSession): string {
+  if (sub.status === 'completed' || (sub.current_step && sub.current_step >= 9)) return STATUS_ICONS.completed
+  if (sub.current_step && sub.current_step > 1) return STATUS_ICONS.processing
+  return STATUS_ICONS.pending
+}
+
+export function BoxSessionTabs({ parentSessionId, subSessions, activeSessionId, onSessionChange }: BoxSessionTabsProps) {
+  if (subSessions.length === 0) return null
+
+  const isParentActive = activeSessionId === parentSessionId
+
+  return (
+    <div className="flex items-center gap-1.5 px-1 py-1.5 bg-gray-50 dark:bg-gray-800/50 rounded-xl border border-gray-200 dark:border-gray-700">
+      {/* Main session tab */}
+      <button
+        onClick={() => onSessionChange(parentSessionId)}
+        className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
+          isParentActive
+            ? 'bg-white dark:bg-gray-700 text-teal-700 dark:text-teal-400 shadow-sm ring-1 ring-teal-300 dark:ring-teal-600'
+            : 'text-gray-500 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-gray-700/50'
+        }`}
+      >
+        Hauptseite
+      </button>
+
+      <div className="w-px h-5 bg-gray-200 dark:bg-gray-700" />
+
+      {/* Sub-session tabs */}
+      {subSessions.map((sub) => {
+        const isActive = activeSessionId === sub.id
+        const icon = getStatusIcon(sub)
+
+        return (
+          <button
+            key={sub.id}
+            onClick={() => onSessionChange(sub.id)}
+            className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
+              isActive
+                ? 'bg-white dark:bg-gray-700 text-teal-700 dark:text-teal-400 shadow-sm ring-1 ring-teal-300 dark:ring-teal-600'
+                : 'text-gray-500 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-gray-700/50'
+            }`}
+            title={sub.name}
+          >
+            <span className="mr-1">{icon}</span>
+            Box {sub.box_index + 1}
+          </button>
+        )
+      })}
+    </div>
+  )
+}