feat: Orientierung + Zuschneiden als Schritte 1-2 in OCR-Pipeline

Zwei neue Wizard-Schritte vor Begradigung:
- Step 1: Orientierungserkennung (0/90/180/270° via Tesseract OSD)
- Step 2: Seitenrand-Erkennung und Zuschnitt (Scannerraender entfernen)

Backend:
- orientation_crop_api.py: POST /orientation, POST /crop, POST /crop/skip
- page_crop.py: detect_and_crop_page() mit Format-Erkennung (A4/A5/Letter)
- Session-Store: orientation_result, crop_result Felder
- Pipeline nutzt zugeschnittenes Bild fuer Deskew/Dewarp

Frontend:
- StepOrientation.tsx: Upload + Auto-Orientierung + Vorher/Nachher
- StepCrop.tsx: Auto-Crop + Format-Badge + Ueberspringen-Option
- Pipeline-Stepper: 10 Schritte (war 8)

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

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

@@ -59,11 +59,6 @@ export function DeskewControls({
       {/* Results */}
       {deskewResult && (
         <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
-          {deskewResult.orientation_degrees ? (
-            <div className="flex items-center gap-2 mb-2 px-2 py-1 bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-400 rounded text-xs">
-              Seite wurde um {deskewResult.orientation_degrees}° gedreht (Orientierungskorrektur)
-            </div>
-          ) : null}
           <div className="flex flex-wrap items-center gap-3 text-sm">
             <div>
               <span className="text-gray-500">Winkel:</span>{' '}

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

@@ -0,0 +1,185 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import type { CropResult } from '@/app/(admin)/ai/ocr-pipeline/types'
+import { ImageCompareView } from './ImageCompareView'
+
+const KLAUSUR_API = '/klausur-api'
+
+interface StepCropProps {
+  sessionId: string | null
+  onNext: () => void
+}
+
+export function StepCrop({ sessionId, onNext }: StepCropProps) {
+  const [cropResult, setCropResult] = useState<CropResult | null>(null)
+  const [cropping, setCropping] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [hasRun, setHasRun] = useState(false)
+
+  // Auto-trigger crop on mount
+  useEffect(() => {
+    if (!sessionId || hasRun) return
+    setHasRun(true)
+
+    const runCrop = async () => {
+      setCropping(true)
+      setError(null)
+
+      try {
+        // Check if session already has crop result
+        const sessionRes = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}`)
+        if (sessionRes.ok) {
+          const sessionData = await sessionRes.json()
+          if (sessionData.crop_result) {
+            setCropResult(sessionData.crop_result)
+            setCropping(false)
+            return
+          }
+        }
+
+        const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/crop`, {
+          method: 'POST',
+        })
+
+        if (!res.ok) {
+          throw new Error('Zuschnitt fehlgeschlagen')
+        }
+
+        const data = await res.json()
+        setCropResult(data)
+      } catch (e) {
+        setError(e instanceof Error ? e.message : 'Unbekannter Fehler')
+      } finally {
+        setCropping(false)
+      }
+    }
+
+    runCrop()
+  }, [sessionId, hasRun])
+
+  const handleSkip = async () => {
+    if (!sessionId) return
+    try {
+      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/crop/skip`, {
+        method: 'POST',
+      })
+      if (res.ok) {
+        const data = await res.json()
+        setCropResult(data)
+      }
+    } catch (e) {
+      console.error('Skip crop failed:', e)
+    }
+    onNext()
+  }
+
+  if (!sessionId) {
+    return <div className="text-sm text-gray-400">Keine Session ausgewaehlt.</div>
+  }
+
+  const orientedUrl = `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/oriented`
+  const croppedUrl = cropResult
+    ? `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/cropped`
+    : null
+
+  return (
+    <div className="space-y-4">
+      {/* Loading indicator */}
+      {cropping && (
+        <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" />
+          Scannerraender werden erkannt...
+        </div>
+      )}
+
+      {/* Image comparison */}
+      <ImageCompareView
+        originalUrl={orientedUrl}
+        deskewedUrl={croppedUrl}
+        showGrid={false}
+        showBinarized={false}
+        binarizedUrl={null}
+        leftLabel="Orientiert"
+        rightLabel="Zugeschnitten"
+      />
+
+      {/* Crop result info */}
+      {cropResult && (
+        <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+          <div className="flex flex-wrap items-center gap-3 text-sm">
+            {cropResult.crop_applied ? (
+              <>
+                <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-400 text-xs font-medium">
+                  ✂️ Zugeschnitten
+                </span>
+                {cropResult.detected_format && (
+                  <>
+                    <div className="h-4 w-px bg-gray-300 dark:bg-gray-600" />
+                    <span className="text-gray-600 dark:text-gray-400">
+                      Format: <span className="font-medium">{cropResult.detected_format}</span>
+                      {cropResult.format_confidence != null && (
+                        <span className="text-gray-400 ml-1">
+                          ({Math.round(cropResult.format_confidence * 100)}%)
+                        </span>
+                      )}
+                    </span>
+                  </>
+                )}
+                <div className="h-4 w-px bg-gray-300 dark:bg-gray-600" />
+                <span className="text-gray-400 text-xs">
+                  {cropResult.original_size.width}x{cropResult.original_size.height} → {cropResult.cropped_size.width}x{cropResult.cropped_size.height}
+                </span>
+                {cropResult.border_fractions && (
+                  <>
+                    <div className="h-4 w-px bg-gray-300 dark:bg-gray-600" />
+                    <span className="text-gray-400 text-xs">
+                      Raender: O={pct(cropResult.border_fractions.top)} U={pct(cropResult.border_fractions.bottom)} L={pct(cropResult.border_fractions.left)} R={pct(cropResult.border_fractions.right)}
+                    </span>
+                  </>
+                )}
+              </>
+            ) : (
+              <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400 text-xs font-medium">
+                ✓ Kein Zuschnitt noetig
+              </span>
+            )}
+            {cropResult.duration_seconds != null && (
+              <span className="text-gray-400 text-xs ml-auto">
+                {cropResult.duration_seconds}s
+              </span>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Action buttons */}
+      {cropResult && (
+        <div className="flex justify-between">
+          <button
+            onClick={handleSkip}
+            className="px-4 py-2 text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors"
+          >
+            Ueberspringen
+          </button>
+          <button
+            onClick={onNext}
+            className="px-6 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 font-medium transition-colors"
+          >
+            Weiter &rarr;
+          </button>
+        </div>
+      )}
+
+      {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>
+  )
+}
+
+function pct(v: number): string {
+  return `${(v * 100).toFixed(1)}%`
+}

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

@@ -8,29 +8,27 @@ import { ImageCompareView } from './ImageCompareView'
 const KLAUSUR_API = '/klausur-api'
 
 interface StepDeskewProps {
-  sessionId?: string | null
-  onNext: (sessionId: string) => void
+  sessionId: string | null
+  onNext: () => void
 }
 
-export function StepDeskew({ sessionId: existingSessionId, onNext }: StepDeskewProps) {
+export function StepDeskew({ sessionId, onNext }: StepDeskewProps) {
   const [session, setSession] = useState<SessionInfo | null>(null)
   const [deskewResult, setDeskewResult] = useState<DeskewResult | null>(null)
-  const [uploading, setUploading] = useState(false)
   const [deskewing, setDeskewing] = useState(false)
   const [applying, setApplying] = useState(false)
   const [showBinarized, setShowBinarized] = useState(false)
   const [showGrid, setShowGrid] = useState(true)
   const [error, setError] = useState<string | null>(null)
-  const [dragOver, setDragOver] = useState(false)
-  const [sessionName, setSessionName] = useState('')
+  const [hasAutoRun, setHasAutoRun] = useState(false)
 
-  // Reload session data when navigating back from a later step
+  // Load session and auto-trigger deskew
   useEffect(() => {
-    if (!existingSessionId || session) return
+    if (!sessionId || session) return
 
-    const loadSession = async () => {
+    const loadAndDeskew = async () => {
       try {
-        const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${existingSessionId}`)
+        const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}`)
         if (!res.ok) return
         const data = await res.json()
 
@@ -39,83 +37,56 @@ export function StepDeskew({ sessionId: existingSessionId, onNext }: StepDeskewP
           filename: data.filename,
           image_width: data.image_width,
           image_height: data.image_height,
-          original_image_url: `${KLAUSUR_API}${data.original_image_url}`,
+          // Use cropped image as "before" view
+          original_image_url: `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/cropped`,
         }
         setSession(sessionInfo)
 
-        // Reconstruct deskew result from session data
+        // If deskew result already exists, use it
         if (data.deskew_result) {
           const dr: DeskewResult = {
             ...data.deskew_result,
-            deskewed_image_url: `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${existingSessionId}/image/deskewed`,
-            binarized_image_url: `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${existingSessionId}/image/binarized`,
+            deskewed_image_url: `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/deskewed`,
+            binarized_image_url: `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/binarized`,
           }
           setDeskewResult(dr)
+          return
+        }
+
+        // Auto-trigger deskew if not already done
+        if (!hasAutoRun) {
+          setHasAutoRun(true)
+          setDeskewing(true)
+          const deskewRes = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/deskew`, {
+            method: 'POST',
+          })
+
+          if (!deskewRes.ok) {
+            throw new Error('Begradigung fehlgeschlagen')
+          }
+
+          const deskewData: DeskewResult = await deskewRes.json()
+          deskewData.deskewed_image_url = `${KLAUSUR_API}${deskewData.deskewed_image_url}`
+          deskewData.binarized_image_url = `${KLAUSUR_API}${deskewData.binarized_image_url}`
+          setDeskewResult(deskewData)
         }
       } catch (e) {
-        console.error('Failed to reload session:', e)
+        setError(e instanceof Error ? e.message : 'Fehler beim Laden')
+      } finally {
+        setDeskewing(false)
       }
     }
 
-    loadSession()
-  }, [existingSessionId, session])
-
-  const handleUpload = useCallback(async (file: File) => {
-    setUploading(true)
-    setError(null)
-    setDeskewResult(null)
-
-    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',
-        body: formData,
-      })
-
-      if (!res.ok) {
-        const err = await res.json().catch(() => ({ detail: res.statusText }))
-        throw new Error(err.detail || 'Upload fehlgeschlagen')
-      }
-
-      const data: SessionInfo = await res.json()
-      // Prepend API prefix to relative URLs
-      data.original_image_url = `${KLAUSUR_API}${data.original_image_url}`
-      setSession(data)
-
-      // Auto-trigger deskew
-      setDeskewing(true)
-      const deskewRes = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${data.session_id}/deskew`, {
-        method: 'POST',
-      })
-
-      if (!deskewRes.ok) {
-        throw new Error('Begradigung fehlgeschlagen')
-      }
-
-      const deskewData: DeskewResult = await deskewRes.json()
-      deskewData.deskewed_image_url = `${KLAUSUR_API}${deskewData.deskewed_image_url}`
-      deskewData.binarized_image_url = `${KLAUSUR_API}${deskewData.binarized_image_url}`
-      setDeskewResult(deskewData)
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Unbekannter Fehler')
-    } finally {
-      setUploading(false)
-      setDeskewing(false)
-    }
-  }, [])
+    loadAndDeskew()
+  }, [sessionId, session, hasAutoRun])
 
   const handleManualDeskew = useCallback(async (angle: number) => {
-    if (!session) return
+    if (!sessionId) return
     setApplying(true)
     setError(null)
 
     try {
-      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${session.session_id}/deskew/manual`, {
+      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/deskew/manual`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ angle }),
@@ -130,7 +101,6 @@ export function StepDeskew({ sessionId: existingSessionId, onNext }: StepDeskewP
               ...prev,
               angle_applied: data.angle_applied,
               method_used: data.method_used,
-              // Force reload by appending timestamp
               deskewed_image_url: `${KLAUSUR_API}${data.deskewed_image_url}?t=${Date.now()}`,
             }
           : null,
@@ -140,12 +110,12 @@ export function StepDeskew({ sessionId: existingSessionId, onNext }: StepDeskewP
     } finally {
       setApplying(false)
     }
-  }, [session])
+  }, [sessionId])
 
   const handleGroundTruth = useCallback(async (gt: DeskewGroundTruth) => {
-    if (!session) return
+    if (!sessionId) return
     try {
-      await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${session.session_id}/ground-truth/deskew`, {
+      await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/ground-truth/deskew`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(gt),
@@ -153,89 +123,21 @@ export function StepDeskew({ sessionId: existingSessionId, onNext }: StepDeskewP
     } catch (e) {
       console.error('Ground truth save failed:', e)
     }
-  }, [session])
+  }, [sessionId])
 
-  const handleDrop = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    setDragOver(false)
-    const file = e.dataTransfer.files[0]
-    if (file) handleUpload(file)
-  }, [handleUpload])
-
-  const handleFileInput = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0]
-    if (file) handleUpload(file)
-  }, [handleUpload])
-
-  // Upload area (no session yet)
-  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)}
-          onDrop={handleDrop}
-          className={`border-2 border-dashed rounded-xl p-12 text-center transition-colors ${
-            dragOver
-              ? 'border-teal-400 bg-teal-50 dark:bg-teal-900/20'
-              : 'border-gray-300 dark:border-gray-600 hover:border-teal-400'
-          }`}
-        >
-          {uploading ? (
-            <div className="text-gray-500">
-              <div className="animate-spin inline-block w-8 h-8 border-2 border-teal-500 border-t-transparent rounded-full mb-3" />
-              <p>Wird hochgeladen...</p>
-            </div>
-          ) : (
-            <>
-              <div className="text-4xl mb-3">📄</div>
-              <p className="text-gray-600 dark:text-gray-400 mb-2">
-                PDF oder Bild hierher ziehen
-              </p>
-              <p className="text-sm text-gray-400 mb-4">oder</p>
-              <label className="inline-block px-4 py-2 bg-teal-600 text-white rounded-lg cursor-pointer hover:bg-teal-700 transition-colors">
-                Datei auswaehlen
-                <input
-                  type="file"
-                  accept=".pdf,.png,.jpg,.jpeg,.tiff,.tif"
-                  onChange={handleFileInput}
-                  className="hidden"
-                />
-              </label>
-            </>
-          )}
-        </div>
-        {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>
-    )
+  if (!sessionId) {
+    return <div className="text-sm text-gray-400">Keine Session ausgewaehlt.</div>
   }
 
-  // Session active: show comparison + controls
   return (
     <div className="space-y-4">
       {/* Filename */}
-      <div className="text-sm text-gray-500 dark:text-gray-400">
-        Datei: <span className="font-medium text-gray-700 dark:text-gray-300">{session.filename}</span>
-        {' '}({session.image_width} x {session.image_height} px)
-      </div>
+      {session && (
+        <div className="text-sm text-gray-500 dark:text-gray-400">
+          Datei: <span className="font-medium text-gray-700 dark:text-gray-300">{session.filename}</span>
+          {' '}({session.image_width} x {session.image_height} px)
+        </div>
+      )}
 
       {/* Loading indicator */}
       {deskewing && (
@@ -246,13 +148,17 @@ export function StepDeskew({ sessionId: existingSessionId, onNext }: StepDeskewP
       )}
 
       {/* Image comparison */}
-      <ImageCompareView
-        originalUrl={session.original_image_url}
-        deskewedUrl={deskewResult?.deskewed_image_url ?? null}
-        showGrid={showGrid}
-        showBinarized={showBinarized}
-        binarizedUrl={deskewResult?.binarized_image_url ?? null}
-      />
+      {session && (
+        <ImageCompareView
+          originalUrl={session.original_image_url}
+          deskewedUrl={deskewResult?.deskewed_image_url ?? null}
+          showGrid={showGrid}
+          showBinarized={showBinarized}
+          binarizedUrl={deskewResult?.binarized_image_url ?? null}
+          leftLabel="Zugeschnitten"
+          rightLabel="Begradigt"
+        />
+      )}
 
       {/* Controls */}
       <DeskewControls
@@ -263,7 +169,7 @@ export function StepDeskew({ sessionId: existingSessionId, onNext }: StepDeskewP
         onToggleGrid={() => setShowGrid((v) => !v)}
         onManualDeskew={handleManualDeskew}
         onGroundTruth={handleGroundTruth}
-        onNext={() => session && onNext(session.session_id)}
+        onNext={onNext}
         isApplying={applying}
       />
 

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

@@ -0,0 +1,247 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import type { OrientationResult, SessionInfo } from '@/app/(admin)/ai/ocr-pipeline/types'
+import { ImageCompareView } from './ImageCompareView'
+
+const KLAUSUR_API = '/klausur-api'
+
+interface StepOrientationProps {
+  sessionId?: string | null
+  onNext: (sessionId: string) => void
+}
+
+export function StepOrientation({ sessionId: existingSessionId, onNext }: StepOrientationProps) {
+  const [session, setSession] = useState<SessionInfo | null>(null)
+  const [orientationResult, setOrientationResult] = useState<OrientationResult | null>(null)
+  const [uploading, setUploading] = useState(false)
+  const [detecting, setDetecting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [dragOver, setDragOver] = useState(false)
+  const [sessionName, setSessionName] = useState('')
+
+  // Reload session data when navigating back
+  useEffect(() => {
+    if (!existingSessionId || session) return
+
+    const loadSession = async () => {
+      try {
+        const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${existingSessionId}`)
+        if (!res.ok) return
+        const data = await res.json()
+
+        const sessionInfo: SessionInfo = {
+          session_id: data.session_id,
+          filename: data.filename,
+          image_width: data.image_width,
+          image_height: data.image_height,
+          original_image_url: `${KLAUSUR_API}${data.original_image_url}`,
+        }
+        setSession(sessionInfo)
+
+        if (data.orientation_result) {
+          setOrientationResult(data.orientation_result)
+        }
+      } catch (e) {
+        console.error('Failed to reload session:', e)
+      }
+    }
+
+    loadSession()
+  }, [existingSessionId, session])
+
+  const handleUpload = useCallback(async (file: File) => {
+    setUploading(true)
+    setError(null)
+    setOrientationResult(null)
+
+    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',
+        body: formData,
+      })
+
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({ detail: res.statusText }))
+        throw new Error(err.detail || 'Upload fehlgeschlagen')
+      }
+
+      const data: SessionInfo = await res.json()
+      data.original_image_url = `${KLAUSUR_API}${data.original_image_url}`
+      setSession(data)
+
+      // Auto-trigger orientation detection
+      setDetecting(true)
+      const orientRes = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${data.session_id}/orientation`, {
+        method: 'POST',
+      })
+
+      if (!orientRes.ok) {
+        throw new Error('Orientierungserkennung fehlgeschlagen')
+      }
+
+      const orientData = await orientRes.json()
+      setOrientationResult({
+        orientation_degrees: orientData.orientation_degrees,
+        corrected: orientData.corrected,
+        duration_seconds: orientData.duration_seconds,
+      })
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unbekannter Fehler')
+    } finally {
+      setUploading(false)
+      setDetecting(false)
+    }
+  }, [sessionName])
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    setDragOver(false)
+    const file = e.dataTransfer.files[0]
+    if (file) handleUpload(file)
+  }, [handleUpload])
+
+  const handleFileInput = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (file) handleUpload(file)
+  }, [handleUpload])
+
+  // Upload area (no session yet)
+  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)}
+          onDrop={handleDrop}
+          className={`border-2 border-dashed rounded-xl p-12 text-center transition-colors ${
+            dragOver
+              ? 'border-teal-400 bg-teal-50 dark:bg-teal-900/20'
+              : 'border-gray-300 dark:border-gray-600 hover:border-teal-400'
+          }`}
+        >
+          {uploading ? (
+            <div className="text-gray-500">
+              <div className="animate-spin inline-block w-8 h-8 border-2 border-teal-500 border-t-transparent rounded-full mb-3" />
+              <p>Wird hochgeladen...</p>
+            </div>
+          ) : (
+            <>
+              <div className="text-4xl mb-3">📄</div>
+              <p className="text-gray-600 dark:text-gray-400 mb-2">
+                PDF oder Bild hierher ziehen
+              </p>
+              <p className="text-sm text-gray-400 mb-4">oder</p>
+              <label className="inline-block px-4 py-2 bg-teal-600 text-white rounded-lg cursor-pointer hover:bg-teal-700 transition-colors">
+                Datei auswaehlen
+                <input
+                  type="file"
+                  accept=".pdf,.png,.jpg,.jpeg,.tiff,.tif"
+                  onChange={handleFileInput}
+                  className="hidden"
+                />
+              </label>
+            </>
+          )}
+        </div>
+        {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>
+    )
+  }
+
+  // Session active: show orientation result
+  const orientedUrl = orientationResult
+    ? `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${session.session_id}/image/oriented`
+    : null
+
+  return (
+    <div className="space-y-4">
+      {/* Filename */}
+      <div className="text-sm text-gray-500 dark:text-gray-400">
+        Datei: <span className="font-medium text-gray-700 dark:text-gray-300">{session.filename}</span>
+        {' '}({session.image_width} x {session.image_height} px)
+      </div>
+
+      {/* 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" />
+          Orientierung wird erkannt...
+        </div>
+      )}
+
+      {/* Image comparison */}
+      <ImageCompareView
+        originalUrl={session.original_image_url}
+        deskewedUrl={orientedUrl}
+        showGrid={false}
+        showBinarized={false}
+        binarizedUrl={null}
+        leftLabel="Original"
+        rightLabel="Orientiert"
+      />
+
+      {/* Orientation result badge */}
+      {orientationResult && (
+        <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+          <div className="flex items-center gap-3 text-sm">
+            {orientationResult.corrected ? (
+              <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-400 text-xs font-medium">
+                🔄 {orientationResult.orientation_degrees}° korrigiert
+              </span>
+            ) : (
+              <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400 text-xs font-medium">
+                ✓ 0° (keine Drehung noetig)
+              </span>
+            )}
+            <span className="text-gray-400 text-xs">
+              {orientationResult.duration_seconds}s
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* Next button */}
+      {orientationResult && (
+        <div className="flex justify-end">
+          <button
+            onClick={() => onNext(session.session_id)}
+            className="px-6 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 font-medium transition-colors"
+          >
+            Weiter &rarr;
+          </button>
+        </div>
+      )}
+
+      {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>
+  )
+}