feat: add Excel-like grid editor for OCR overlay (Kombi mode step 6)

Backend: new grid_editor_api.py with build-grid endpoint that detects
bordered boxes, splits page into zones, clusters columns/rows per zone
from Kombi word positions. New DB column grid_editor_result JSONB.

Frontend: GridEditor component with editable HTML tables per zone,
column bold toggle, header row toggle, undo/redo, keyboard navigation
(Tab/Enter/Arrow), image overlay verification, and save/load.

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

admin-lehrer/components/grid-editor/GridEditor.tsx

@@ -0,0 +1,218 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import { useGridEditor } from './useGridEditor'
+import { GridToolbar } from './GridToolbar'
+import { GridTable } from './GridTable'
+import { GridImageOverlay } from './GridImageOverlay'
+
+interface GridEditorProps {
+  sessionId: string | null
+  onNext?: () => void
+}
+
+export function GridEditor({ sessionId, onNext }: GridEditorProps) {
+  const {
+    grid,
+    loading,
+    saving,
+    error,
+    dirty,
+    selectedCell,
+    setSelectedCell,
+    buildGrid,
+    loadGrid,
+    saveGrid,
+    updateCellText,
+    toggleColumnBold,
+    toggleRowHeader,
+    undo,
+    redo,
+    canUndo,
+    canRedo,
+    getAdjacentCell,
+  } = useGridEditor(sessionId)
+
+  const [showOverlay, setShowOverlay] = useState(false)
+
+  // Load grid on mount
+  useEffect(() => {
+    if (sessionId) {
+      loadGrid()
+    }
+  }, [sessionId, loadGrid])
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'z' && !e.shiftKey) {
+        e.preventDefault()
+        undo()
+      } else if ((e.metaKey || e.ctrlKey) && e.key === 'z' && e.shiftKey) {
+        e.preventDefault()
+        redo()
+      } else if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+        e.preventDefault()
+        saveGrid()
+      }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [undo, redo, saveGrid])
+
+  const handleNavigate = useCallback(
+    (cellId: string, direction: 'up' | 'down' | 'left' | 'right') => {
+      const target = getAdjacentCell(cellId, direction)
+      if (target) {
+        setSelectedCell(target)
+        // Focus the input
+        setTimeout(() => {
+          const el = document.getElementById(`cell-${target}`)
+          if (el) {
+            el.focus()
+            if (el instanceof HTMLInputElement) el.select()
+          }
+        }, 0)
+      }
+    },
+    [getAdjacentCell, setSelectedCell],
+  )
+
+  if (!sessionId) {
+    return (
+      <div className="text-center py-12 text-gray-400">
+        Keine Session ausgewaehlt.
+      </div>
+    )
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-16">
+        <div className="flex items-center gap-3 text-gray-500 dark:text-gray-400">
+          <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+          </svg>
+          Grid wird aufgebaut...
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
+        <p className="text-sm text-red-700 dark:text-red-300">
+          Fehler: {error}
+        </p>
+        <button
+          onClick={buildGrid}
+          className="mt-2 text-xs px-3 py-1.5 bg-red-600 text-white rounded hover:bg-red-700"
+        >
+          Erneut versuchen
+        </button>
+      </div>
+    )
+  }
+
+  if (!grid || !grid.zones.length) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-gray-400 mb-4">Kein Grid vorhanden.</p>
+        <button
+          onClick={buildGrid}
+          className="px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 text-sm"
+        >
+          Grid aus OCR-Ergebnissen erstellen
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Summary bar */}
+      <div className="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400">
+        <span>{grid.summary.total_zones} Zone(n)</span>
+        <span>{grid.summary.total_columns} Spalten</span>
+        <span>{grid.summary.total_rows} Zeilen</span>
+        <span>{grid.summary.total_cells} Zellen</span>
+        {grid.boxes_detected > 0 && (
+          <span className="text-amber-600 dark:text-amber-400">
+            {grid.boxes_detected} Box(en) erkannt
+          </span>
+        )}
+        <span className="text-gray-400">
+          {grid.duration_seconds.toFixed(1)}s
+        </span>
+      </div>
+
+      {/* Toolbar */}
+      <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 px-3 py-2">
+        <GridToolbar
+          dirty={dirty}
+          saving={saving}
+          canUndo={canUndo}
+          canRedo={canRedo}
+          showOverlay={showOverlay}
+          onSave={saveGrid}
+          onUndo={undo}
+          onRedo={redo}
+          onRebuild={buildGrid}
+          onToggleOverlay={() => setShowOverlay(!showOverlay)}
+        />
+      </div>
+
+      {/* Image overlay */}
+      {showOverlay && (
+        <GridImageOverlay sessionId={sessionId} grid={grid} />
+      )}
+
+      {/* Zone tables */}
+      <div className="space-y-4">
+        {grid.zones.map((zone) => (
+          <div
+            key={zone.zone_index}
+            className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden"
+          >
+            <GridTable
+              zone={zone}
+              selectedCell={selectedCell}
+              onSelectCell={setSelectedCell}
+              onCellTextChange={updateCellText}
+              onToggleColumnBold={toggleColumnBold}
+              onToggleRowHeader={toggleRowHeader}
+              onNavigate={handleNavigate}
+            />
+          </div>
+        ))}
+      </div>
+
+      {/* Tip */}
+      <div className="text-[11px] text-gray-400 dark:text-gray-500 flex items-center gap-4">
+        <span>Tab: naechste Zelle</span>
+        <span>Enter: Zeile runter</span>
+        <span>Spalte fett: Klick auf Spaltenkopf</span>
+        <span>Header: Klick auf Zeilennummer</span>
+        <span>Ctrl+Z/Y: Undo/Redo</span>
+        <span>Ctrl+S: Speichern</span>
+      </div>
+
+      {/* Next step button */}
+      {onNext && (
+        <div className="flex justify-end">
+          <button
+            onClick={async () => {
+              if (dirty) await saveGrid()
+              onNext()
+            }}
+            className="px-4 py-2 bg-teal-600 text-white text-sm rounded-lg hover:bg-teal-700 transition-colors"
+          >
+            Fertig
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}