feat: improved OCR pipeline session manager with categories, thumbnails, pipeline logging

- Add document_category (10 types) and pipeline_log JSONB columns
- Session list: thumbnails, copyable IDs, category/doc_type badges
- Inline category dropdown, bulk delete, pipeline step logging
- New endpoints: thumbnail, delete-all, pipeline-log, categories
- Cleared all 22 old test sessions

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

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

@@ -11,7 +11,7 @@ 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, type PipelineStep, type SessionListItem, type DocumentTypeResult } from './types'
+import { PIPELINE_STEPS, DOCUMENT_CATEGORIES, type PipelineStep, type SessionListItem, type DocumentTypeResult, type DocumentCategory } from './types'
 
 const KLAUSUR_API = '/klausur-api'
 
@@ -23,7 +23,9 @@ export default function OcrPipelinePage() {
   const [loadingSessions, setLoadingSessions] = useState(true)
   const [editingName, setEditingName] = useState<string | null>(null)
   const [editNameValue, setEditNameValue] = useState('')
+  const [editingCategory, setEditingCategory] = useState<string | null>(null)
   const [docTypeResult, setDocTypeResult] = useState<DocumentTypeResult | null>(null)
+  const [activeCategory, setActiveCategory] = useState<DocumentCategory | undefined>(undefined)
   const [steps, setSteps] = useState<PipelineStep[]>(
     PIPELINE_STEPS.map((s, i) => ({
       ...s,
@@ -59,6 +61,7 @@ export default function OcrPipelinePage() {
 
       setSessionId(sid)
       setSessionName(data.name || data.filename || '')
+      setActiveCategory(data.document_category || undefined)
 
       // Restore doc type result if available
       const savedDocType: DocumentTypeResult | null = data.doc_type_result || null
@@ -115,6 +118,36 @@ export default function OcrPipelinePage() {
     setEditingName(null)
   }, [sessionId])
 
+  const updateCategory = useCallback(async (sid: string, category: DocumentCategory) => {
+    try {
+      await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sid}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ document_category: category }),
+      })
+      setSessions((prev) => prev.map((s) => (s.id === sid ? { ...s, document_category: category } : s)))
+      if (sessionId === sid) setActiveCategory(category)
+    } catch (e) {
+      console.error('Failed to update category:', e)
+    }
+    setEditingCategory(null)
+  }, [sessionId])
+
+  const deleteAllSessions = useCallback(async () => {
+    if (!confirm('Alle Sessions loeschen? Dies kann nicht rueckgaengig gemacht werden.')) return
+    try {
+      await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions`, { method: 'DELETE' })
+      setSessions([])
+      setSessionId(null)
+      setCurrentStep(0)
+      setDocTypeResult(null)
+      setActiveCategory(undefined)
+      setSteps(PIPELINE_STEPS.map((s, i) => ({ ...s, status: i === 0 ? 'active' : 'pending' })))
+    } catch (e) {
+      console.error('Failed to delete all sessions:', e)
+    }
+  }, [])
+
   const handleStepClick = (index: number) => {
     if (index <= currentStep || steps[index].status === 'completed') {
       setCurrentStep(index)
@@ -307,14 +340,25 @@ export default function OcrPipelinePage() {
       <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
+            Sessions ({sessions.length})
           </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 className="flex gap-2">
+            {sessions.length > 0 && (
+              <button
+                onClick={deleteAllSessions}
+                className="text-xs px-3 py-1.5 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
+                title="Alle Sessions loeschen"
+              >
+                Alle loeschen
+              </button>
+            )}
+            <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>
         </div>
 
         {loadingSessions ? (
@@ -322,75 +366,165 @@ export default function OcrPipelinePage() {
         ) : 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="space-y-1.5 max-h-[320px] overflow-y-auto">
+            {sessions.map((s) => {
+              const catInfo = DOCUMENT_CATEGORIES.find(c => c.value === s.document_category)
+              return (
+                <div
+                  key={s.id}
+                  className={`relative flex items-start gap-3 px-3 py-2.5 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'
+                  }`}
+                >
+                  {/* Thumbnail */}
+                  <div
+                    className="flex-shrink-0 w-12 h-12 rounded-md overflow-hidden bg-gray-100 dark:bg-gray-700"
+                    onClick={() => openSession(s.id)}
+                  >
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img
+                      src={`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${s.id}/thumbnail?size=96`}
+                      alt=""
+                      className="w-full h-full object-cover"
+                      loading="lazy"
+                      onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
                     />
-                  ) : (
-                    <div className="truncate font-medium text-gray-700 dark:text-gray-300">
-                      {s.name || s.filename}
+                  </div>
+
+                  {/* Info */}
+                  <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>
+                    )}
+                    {/* ID row */}
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        navigator.clipboard.writeText(s.id)
+                        const btn = e.currentTarget
+                        btn.textContent = 'Kopiert!'
+                        setTimeout(() => { btn.textContent = `ID: ${s.id.slice(0, 8)}` }, 1500)
+                      }}
+                      className="text-[10px] font-mono text-gray-400 hover:text-teal-500 transition-colors"
+                      title={`Volle ID: ${s.id} — Klick zum Kopieren`}
+                    >
+                      ID: {s.id.slice(0, 8)}
+                    </button>
+                    <div className="text-xs text-gray-400 flex gap-2 mt-0.5">
+                      <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>
+
+                  {/* Badges */}
+                  <div className="flex flex-col gap-1 items-end flex-shrink-0" onClick={(e) => e.stopPropagation()}>
+                    {/* Category Badge */}
+                    <button
+                      onClick={() => setEditingCategory(editingCategory === s.id ? null : s.id)}
+                      className={`text-[10px] px-1.5 py-0.5 rounded-full border transition-colors ${
+                        catInfo
+                          ? 'bg-teal-50 dark:bg-teal-900/30 border-teal-200 dark:border-teal-700 text-teal-700 dark:text-teal-300'
+                          : 'bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'
+                      }`}
+                      title="Kategorie setzen"
+                    >
+                      {catInfo ? `${catInfo.icon} ${catInfo.label}` : '+ Kategorie'}
+                    </button>
+                    {/* Doc Type Badge (read-only) */}
+                    {s.doc_type && (
+                      <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-600">
+                        {s.doc_type}
+                      </span>
+                    )}
+                  </div>
+
+                  {/* Action buttons */}
+                  <div className="flex flex-col gap-0.5 flex-shrink-0">
+                    <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>
+
+                  {/* Category dropdown (inline) */}
+                  {editingCategory === s.id && (
+                    <div
+                      className="absolute right-0 top-full mt-1 z-20 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-2 grid grid-cols-2 gap-1 w-64"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      {DOCUMENT_CATEGORIES.map((cat) => (
+                        <button
+                          key={cat.value}
+                          onClick={() => updateCategory(s.id, cat.value)}
+                          className={`text-xs px-2 py-1.5 rounded-md text-left transition-colors ${
+                            s.document_category === cat.value
+                              ? 'bg-teal-100 dark:bg-teal-900/40 text-teal-700 dark:text-teal-300'
+                              : 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400'
+                          }`}
+                        >
+                          {cat.icon} {cat.label}
+                        </button>
+                      ))}
                     </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 */}
+      {/* Active session info */}
       {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 className="flex items-center gap-3 text-sm text-gray-500 dark:text-gray-400">
+          <span>Aktive Session: <span className="font-medium text-gray-700 dark:text-gray-300">{sessionName}</span></span>
+          {activeCategory && (() => {
+            const cat = DOCUMENT_CATEGORIES.find(c => c.value === activeCategory)
+            return cat ? <span className="text-xs px-2 py-0.5 rounded-full bg-teal-50 dark:bg-teal-900/30 border border-teal-200 dark:border-teal-700 text-teal-700 dark:text-teal-300">{cat.icon} {cat.label}</span> : null
+          })()}
+          {docTypeResult && (
+            <span className="text-xs px-2 py-0.5 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-600">
+              {docTypeResult.doc_type}
+            </span>
+          )}
         </div>
       )}
 

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

@@ -7,16 +7,47 @@ export interface PipelineStep {
   status: PipelineStepStatus
 }
 
+export type DocumentCategory =
+  | 'vokabelseite' | 'buchseite' | 'arbeitsblatt' | 'klausurseite'
+  | 'mathearbeit' | 'statistik' | 'zeitung' | 'formular' | 'handschrift' | 'sonstiges'
+
+export const DOCUMENT_CATEGORIES: { value: DocumentCategory; label: string; icon: string }[] = [
+  { value: 'vokabelseite', label: 'Vokabelseite', icon: '📖' },
+  { value: 'buchseite', label: 'Buchseite', icon: '📚' },
+  { value: 'arbeitsblatt', label: 'Arbeitsblatt', icon: '📝' },
+  { value: 'klausurseite', label: 'Klausurseite', icon: '📄' },
+  { value: 'mathearbeit', label: 'Mathearbeit', icon: '🔢' },
+  { value: 'statistik', label: 'Statistik', icon: '📊' },
+  { value: 'zeitung', label: 'Zeitung', icon: '📰' },
+  { value: 'formular', label: 'Formular', icon: '📋' },
+  { value: 'handschrift', label: 'Handschrift', icon: '✍️' },
+  { value: 'sonstiges', label: 'Sonstiges', icon: '📎' },
+]
+
 export interface SessionListItem {
   id: string
   name: string
   filename: string
   status: string
   current_step: number
+  document_category?: DocumentCategory
+  doc_type?: string
   created_at: string
   updated_at?: string
 }
 
+export interface PipelineLogEntry {
+  step: string
+  completed_at: string
+  success: boolean
+  duration_ms?: number
+  metrics: Record<string, unknown>
+}
+
+export interface PipelineLog {
+  steps: PipelineLogEntry[]
+}
+
 export interface DocumentTypeResult {
   doc_type: 'vocab_table' | 'full_text' | 'generic_table'
   confidence: number
@@ -34,6 +65,8 @@ export interface SessionInfo {
   image_height: number
   original_image_url: string
   current_step?: number
+  document_category?: DocumentCategory
+  doc_type?: string
   deskew_result?: DeskewResult
   dewarp_result?: DewarpResult
   column_result?: ColumnResult