From f535d3c9675491e19e0301e5b0f9ce5d9ab8aca9 Mon Sep 17 00:00:00 2001
From: Benjamin Admin <benjaminadmin@MacBook-Pro.local>
Date: Fri, 27 Feb 2026 08:45:49 +0100
Subject: [PATCH] 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>
---
 .../ocr-pipeline/ManualColumnEditor.tsx       | 279 ++++++++++--------
 .../ocr-pipeline/StepColumnDetection.tsx      |  46 ++-
 2 files changed, 168 insertions(+), 157 deletions(-)

diff --git a/admin-lehrer/components/ocr-pipeline/ManualColumnEditor.tsx b/admin-lehrer/components/ocr-pipeline/ManualColumnEditor.tsx
index 84b0e91..deea2d6 100644
--- a/admin-lehrer/components/ocr-pipeline/ManualColumnEditor.tsx
+++ b/admin-lehrer/components/ocr-pipeline/ManualColumnEditor.tsx
@@ -184,141 +184,158 @@ export function ManualColumnEditor({
 
   return (
     <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <div className="text-sm text-gray-600 dark:text-gray-400">
-          Klicken Sie auf das Bild, um vertikale Trennlinien zu setzen.
-          {dividers.length > 0 && (
-            <span className="ml-2 font-medium text-gray-800 dark:text-gray-200">
-              {dividers.length} Linien = {dividers.length + 1} Spalten
-            </span>
+      {/* Two-column layout: image (left) + controls (right) */}
+      <div className="grid grid-cols-2 gap-4">
+        {/* Left: Interactive image */}
+        <div>
+          <div className="flex items-center justify-between mb-1">
+            <div className="text-xs font-medium text-gray-500 dark:text-gray-400">
+              Klicken um Trennlinien zu setzen
+            </div>
+            <button
+              onClick={onCancel}
+              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>
+          <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"
+            onClick={handleImageClick}
+          >
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={imageUrl}
+              alt="Entzerrtes Bild"
+              className="w-full h-auto block"
+              draggable={false}
+              onLoad={() => setImageLoaded(true)}
+            />
+
+            {imageLoaded && (
+              <>
+                {/* Column overlays */}
+                {columnRegions.map((region, i) => (
+                  <div
+                    key={`col-${i}`}
+                    className="absolute top-0 bottom-0 pointer-events-none"
+                    style={{
+                      left: `${region.leftPct}%`,
+                      width: `${region.rightPct - region.leftPct}%`,
+                      backgroundColor: TYPE_OVERLAY_COLORS[region.type] || 'rgba(128,128,128,0.08)',
+                    }}
+                  >
+                    <span className="absolute top-1 left-1/2 -translate-x-1/2 text-[10px] font-medium text-gray-600 dark:text-gray-300 bg-white/80 dark:bg-gray-800/80 px-1 rounded">
+                      {i + 1}
+                    </span>
+                  </div>
+                ))}
+
+                {/* Divider lines */}
+                {sorted.map((xPct, i) => (
+                  <div
+                    key={`div-${i}`}
+                    data-divider="true"
+                    className="absolute top-0 bottom-0 group"
+                    style={{
+                      left: `${xPct}%`,
+                      transform: 'translateX(-50%)',
+                      width: '12px',
+                      cursor: 'col-resize',
+                      zIndex: 10,
+                    }}
+                    onMouseDown={(e) => handleDividerMouseDown(e, i)}
+                  >
+                    {/* Visible line */}
+                    <div
+                      data-divider="true"
+                      className="absolute top-0 bottom-0 left-1/2 -translate-x-1/2 w-0.5 border-l-2 border-dashed border-red-500"
+                    />
+                    {/* Delete button */}
+                    <button
+                      data-divider="true"
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        removeDivider(i)
+                      }}
+                      className="absolute top-2 left-1/2 -translate-x-1/2 w-4 h-4 bg-red-500 text-white rounded-full text-[10px] leading-none flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-20"
+                      title="Linie entfernen"
+                    >
+                      x
+                    </button>
+                  </div>
+                ))}
+              </>
+            )}
+          </div>
+        </div>
+
+        {/* Right: Column type assignment + actions */}
+        <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-sm text-gray-600 dark:text-gray-400">
+                <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) => (
+                  <div key={i} className="flex items-center gap-3">
+                    <span className={`w-16 text-center px-2 py-0.5 rounded text-xs font-medium ${TYPE_BADGE_COLORS[region.type] || 'bg-gray-100 text-gray-600'}`}>
+                      Spalte {i + 1}
+                    </span>
+                    <select
+                      value={columnTypes[i] || 'column_text'}
+                      onChange={(e) => updateColumnType(i, e.target.value as ColumnTypeKey)}
+                      className="text-sm border border-gray-200 dark:border-gray-600 rounded px-2 py-1 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200"
+                    >
+                      {COLUMN_TYPES.map(t => (
+                        <option key={t.value} value={t.value}>{t.label}</option>
+                      ))}
+                    </select>
+                    <span className="text-xs text-gray-400 font-mono">
+                      {Math.round(region.rightPct - region.leftPct)}%
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
           )}
-        </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"
-        >
-          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"
-        onClick={handleImageClick}
-      >
-        {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img
-          src={imageUrl}
-          alt="Entzerrtes Bild"
-          className="w-full h-auto block"
-          draggable={false}
-          onLoad={() => setImageLoaded(true)}
-        />
-
-        {imageLoaded && (
-          <>
-            {/* Column overlays */}
-            {columnRegions.map((region, i) => (
-              <div
-                key={`col-${i}`}
-                className="absolute top-0 bottom-0 pointer-events-none"
-                style={{
-                  left: `${region.leftPct}%`,
-                  width: `${region.rightPct - region.leftPct}%`,
-                  backgroundColor: TYPE_OVERLAY_COLORS[region.type] || 'rgba(128,128,128,0.08)',
-                }}
-              >
-                <span className="absolute top-1 left-1/2 -translate-x-1/2 text-[10px] font-medium text-gray-600 dark:text-gray-300 bg-white/80 dark:bg-gray-800/80 px-1 rounded">
-                  {i + 1}
-                </span>
-              </div>
-            ))}
-
-            {/* Divider lines */}
-            {sorted.map((xPct, i) => (
-              <div
-                key={`div-${i}`}
-                data-divider="true"
-                className="absolute top-0 bottom-0 group"
-                style={{
-                  left: `${xPct}%`,
-                  transform: 'translateX(-50%)',
-                  width: '12px',
-                  cursor: 'col-resize',
-                  zIndex: 10,
-                }}
-                onMouseDown={(e) => handleDividerMouseDown(e, i)}
-              >
-                {/* Visible line */}
-                <div
-                  data-divider="true"
-                  className="absolute top-0 bottom-0 left-1/2 -translate-x-1/2 w-0.5 border-l-2 border-dashed border-red-500"
-                />
-                {/* Delete button */}
-                <button
-                  data-divider="true"
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    removeDivider(i)
-                  }}
-                  className="absolute top-2 left-1/2 -translate-x-1/2 w-4 h-4 bg-red-500 text-white rounded-full text-[10px] leading-none flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-20"
-                  title="Linie entfernen"
-                >
-                  x
-                </button>
-              </div>
-            ))}
-          </>
-        )}
-      </div>
-
-      {/* Column type assignment */}
-      {dividers.length > 0 && (
-        <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">
-            Spaltentypen zuweisen
-          </div>
-          <div className="grid gap-2">
-            {columnRegions.map((region, i) => (
-              <div key={i} className="flex items-center gap-3">
-                <span className={`w-16 text-center px-2 py-0.5 rounded text-xs font-medium ${TYPE_BADGE_COLORS[region.type] || 'bg-gray-100 text-gray-600'}`}>
-                  Spalte {i + 1}
-                </span>
-                <select
-                  value={columnTypes[i] || 'column_text'}
-                  onChange={(e) => updateColumnType(i, e.target.value as ColumnTypeKey)}
-                  className="text-sm border border-gray-200 dark:border-gray-600 rounded px-2 py-1 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200"
-                >
-                  {COLUMN_TYPES.map(t => (
-                    <option key={t.value} value={t.value}>{t.label}</option>
-                  ))}
-                </select>
-                <span className="text-xs text-gray-400 font-mono">
-                  {Math.round(region.rightPct - region.leftPct)}%
-                </span>
-              </div>
-            ))}
+          {/* Action buttons */}
+          <div className="flex flex-col gap-2">
+            <button
+              onClick={handleApply}
+              disabled={dividers.length === 0 || applying}
+              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>
+            <button
+              onClick={() => setDividers([])}
+              disabled={dividers.length === 0}
+              className="text-xs px-3 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 disabled:opacity-50"
+            >
+              Alle Linien entfernen
+            </button>
           </div>
         </div>
-      )}
-
-      {/* Action buttons */}
-      <div className="flex items-center gap-3">
-        <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"
-        >
-          {applying ? 'Wird gespeichert...' : `${dividers.length + 1} Spalten uebernehmen`}
-        </button>
-        <button
-          onClick={() => setDividers([])}
-          disabled={dividers.length === 0}
-          className="text-xs px-3 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 disabled:opacity-50"
-        >
-          Alle Linien entfernen
-        </button>
       </div>
     </div>
   )
diff --git a/admin-lehrer/components/ocr-pipeline/StepColumnDetection.tsx b/admin-lehrer/components/ocr-pipeline/StepColumnDetection.tsx
index 5f14fbb..fe31287 100644
--- a/admin-lehrer/components/ocr-pipeline/StepColumnDetection.tsx
+++ b/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 () => {
-      setDetecting(true)
-      setError(null)
+    const fetchSessionInfo = async () => {
       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,32 +34,22 @@ export function StepColumnDetection({ sessionId, onNext }: StepColumnDetectionPr
           }
           if (info.column_result) {
             setColumnResult(info.column_result)
-            setDetecting(false)
             return
           }
         }
-
-        // Run detection
-        const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/columns`, {
-          method: 'POST',
-        })
-        if (!res.ok) {
-          const err = await res.json().catch(() => ({ detail: res.statusText }))
-          throw new Error(err.detail || 'Spaltenerkennung fehlgeschlagen')
-        }
-        const data: ColumnResult = await res.json()
-        setColumnResult(data)
       } catch (e) {
-        setError(e instanceof Error ? e.message : 'Unbekannter Fehler')
-      } finally {
-        setDetecting(false)
+        console.error('Failed to fetch session info:', e)
       }
+
+      // No cached result - run auto-detection
+      runAutoDetection()
     }
 
-    runDetection()
-  }, [sessionId, columnResult])
+    fetchSessionInfo()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sessionId])
 
-  const handleRerun = useCallback(async () => {
+  const runAutoDetection = useCallback(async () => {
     if (!sessionId) return
     setDetecting(true)
     setError(null)
@@ -70,16 +57,23 @@ export function StepColumnDetection({ sessionId, onNext }: StepColumnDetectionPr
       const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/columns`, {
         method: 'POST',
       })
-      if (!res.ok) throw new Error('Spaltenerkennung fehlgeschlagen')
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({ detail: res.statusText }))
+        throw new Error(err.detail || 'Spaltenerkennung fehlgeschlagen')
+      }
       const data: ColumnResult = await res.json()
       setColumnResult(data)
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Fehler')
+      setError(e instanceof Error ? e.message : 'Unbekannter Fehler')
     } finally {
       setDetecting(false)
     }
   }, [sessionId])
 
+  const handleRerun = useCallback(() => {
+    runAutoDetection()
+  }, [runAutoDetection])
+
   const handleGroundTruth = useCallback(async (gt: ColumnGroundTruth) => {
     if (!sessionId) return
     try {