fix(ocr-pipeline): manual editor layout + no re-detection on cached result

- ManualColumnEditor now uses grid-cols-2 layout (image left, controls right)
  matching the normal view size so the image doesn't zoom in
- StepColumnDetection only runs auto-detection when no cached result exists;
  revisiting step 3 loads cached columns without re-running detection

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

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

@@ -184,24 +184,21 @@ export function ManualColumnEditor({
 
   return (
     <div className="space-y-4">
-      <div className="flex items-center justify-between">
+      {/* Two-column layout: image (left) + controls (right) */}
-        <div className="text-sm text-gray-600 dark:text-gray-400">
+      <div className="grid grid-cols-2 gap-4">
-          Klicken Sie auf das Bild, um vertikale Trennlinien zu setzen.
+        {/* Left: Interactive image */}
-          {dividers.length > 0 && (
+        <div>
-            <span className="ml-2 font-medium text-gray-800 dark:text-gray-200">
+          <div className="flex items-center justify-between mb-1">
-              {dividers.length} Linien = {dividers.length + 1} Spalten
+            <div className="text-xs font-medium text-gray-500 dark:text-gray-400">
-            </span>
+              Klicken um Trennlinien zu setzen
-          )}
             </div>
             <button
               onClick={onCancel}
-          className="text-xs px-2 py-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+              className="text-xs px-2 py-0.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
             >
               Abbrechen
             </button>
           </div>
-
-      {/* Interactive image area */}
           <div
             ref={containerRef}
             className="relative border rounded-lg overflow-hidden dark:border-gray-700 bg-gray-50 dark:bg-gray-900 cursor-crosshair select-none"
@@ -272,12 +269,30 @@ export function ManualColumnEditor({
               </>
             )}
           </div>
+        </div>
 
-      {/* Column type assignment */}
+        {/* Right: Column type assignment + actions */}
-      {dividers.length > 0 && (
+        <div className="space-y-4">
+          <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
+            Spaltentypen
+          </div>
+
+          {dividers.length === 0 ? (
+            <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 text-center">
+              <div className="text-3xl mb-2">👆</div>
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                Klicken Sie auf das Bild links, um vertikale Trennlinien zwischen den Spalten zu setzen.
+              </p>
+              <p className="text-xs text-gray-400 dark:text-gray-500 mt-2">
+                Linien koennen per Drag verschoben und per Hover geloescht werden.
+              </p>
+            </div>
+          ) : (
             <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 space-y-3">
-          <div className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">
+              <div className="text-sm text-gray-600 dark:text-gray-400">
-            Spaltentypen zuweisen
+                <span className="font-medium text-gray-800 dark:text-gray-200">
+                  {dividers.length} Linien = {dividers.length + 1} Spalten
+                </span>
               </div>
               <div className="grid gap-2">
                 {columnRegions.map((region, i) => (
@@ -304,11 +319,11 @@ export function ManualColumnEditor({
           )}
 
           {/* Action buttons */}
-      <div className="flex items-center gap-3">
+          <div className="flex flex-col gap-2">
             <button
               onClick={handleApply}
               disabled={dividers.length === 0 || applying}
-          className="px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+              className="w-full px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
             >
               {applying ? 'Wird gespeichert...' : `${dividers.length + 1} Spalten uebernehmen`}
             </button>
@@ -321,5 +336,7 @@ export function ManualColumnEditor({
             </button>
           </div>
         </div>
+      </div>
+    </div>
   )
 }

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

@@ -20,15 +20,12 @@ export function StepColumnDetection({ sessionId, onNext }: StepColumnDetectionPr
   const [applying, setApplying] = useState(false)
   const [imageDimensions, setImageDimensions] = useState<{ width: number; height: number } | null>(null)
 
-  // Auto-trigger column detection on mount
+  // Fetch session info (image dimensions) + check for cached column result
   useEffect(() => {
-    if (!sessionId || columnResult) return
+    if (!sessionId || imageDimensions) return
 
-    const runDetection = async () => {
+    const fetchSessionInfo = async () => {
-      setDetecting(true)
-      setError(null)
       try {
-        // First check if columns already detected (reload case)
         const infoRes = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}`)
         if (infoRes.ok) {
           const info = await infoRes.json()
@@ -37,12 +34,26 @@ export function StepColumnDetection({ sessionId, onNext }: StepColumnDetectionPr
           }
           if (info.column_result) {
             setColumnResult(info.column_result)
-            setDetecting(false)
             return
           }
         }
+      } catch (e) {
+        console.error('Failed to fetch session info:', e)
+      }
 
-        // Run detection
+      // No cached result - run auto-detection
+      runAutoDetection()
+    }
+
+    fetchSessionInfo()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sessionId])
+
+  const runAutoDetection = useCallback(async () => {
+    if (!sessionId) return
+    setDetecting(true)
+    setError(null)
+    try {
       const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/columns`, {
         method: 'POST',
       })
@@ -57,29 +68,12 @@ export function StepColumnDetection({ sessionId, onNext }: StepColumnDetectionPr
     } finally {
       setDetecting(false)
     }
-    }
-
-    runDetection()
-  }, [sessionId, columnResult])
-
-  const handleRerun = useCallback(async () => {
-    if (!sessionId) return
-    setDetecting(true)
-    setError(null)
-    try {
-      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/columns`, {
-        method: 'POST',
-      })
-      if (!res.ok) throw new Error('Spaltenerkennung fehlgeschlagen')
-      const data: ColumnResult = await res.json()
-      setColumnResult(data)
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Fehler')
-    } finally {
-      setDetecting(false)
-    }
   }, [sessionId])
 
+  const handleRerun = useCallback(() => {
+    runAutoDetection()
+  }, [runAutoDetection])
+
   const handleGroundTruth = useCallback(async (gt: ColumnGroundTruth) => {
     if (!sessionId) return
     try {