feat: display detected text colors in grid editor UI

- Add color/color_name/recovered fields to OcrWordBox type
- GridTable: show colored text + left-edge color indicator strip
- GridEditor: show color stats and recovered count in summary bar

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

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

@@ -51,6 +51,17 @@ export function GridTable({
     cellMap.set(`${cell.row_index}_${cell.col_index}`, cell)
   }
 
+  /** Dominant non-black color from a cell's word_boxes, or null. */
+  const getCellColor = (cell: (typeof zone.cells)[0] | undefined): string | null => {
+    if (!cell?.word_boxes?.length) return null
+    for (const wb of cell.word_boxes) {
+      if (wb.color_name && wb.color_name !== 'black' && wb.color) {
+        return wb.color
+      }
+    }
+    return null
+  }
+
   const isBoxZone = zone.zone_type === 'box'
 
   return (
@@ -119,6 +130,7 @@ export function GridTable({
                 const isSelected = selectedCell === cellId
                 const isBold = col.bold || cell?.is_bold
                 const isLowConf = cell && cell.confidence > 0 && cell.confidence < 60
+                const cellColor = getCellColor(cell)
 
                 return (
                   <td
@@ -127,20 +139,30 @@ export function GridTable({
                       isSelected ? 'ring-2 ring-teal-500 ring-inset z-10 relative' : ''
                     } ${isLowConf ? 'bg-amber-50/50 dark:bg-amber-900/10' : ''}`}
                   >
-                    <input
-                      id={`cell-${cellId}`}
-                      type="text"
-                      value={cell?.text ?? ''}
-                      onChange={(e) => {
-                        if (cell) onCellTextChange(cellId, e.target.value)
-                      }}
-                      onFocus={() => onSelectCell(cellId)}
-                      onKeyDown={(e) => handleKeyDown(e, cellId)}
-                      className={`w-full px-2 py-1.5 bg-transparent border-0 outline-none text-gray-800 dark:text-gray-200 ${
-                        isBold ? 'font-bold' : 'font-normal'
-                      } ${row.is_header ? 'text-base' : 'text-sm'}`}
-                      spellCheck={false}
-                    />
+                    <div className="flex items-center">
+                      {cellColor && (
+                        <span
+                          className="flex-shrink-0 w-1.5 h-full min-h-[28px] rounded-l-sm"
+                          style={{ backgroundColor: cellColor }}
+                          title={`Farbe: ${cell?.word_boxes?.find(wb => wb.color_name !== 'black')?.color_name}`}
+                        />
+                      )}
+                      <input
+                        id={`cell-${cellId}`}
+                        type="text"
+                        value={cell?.text ?? ''}
+                        onChange={(e) => {
+                          if (cell) onCellTextChange(cellId, e.target.value)
+                        }}
+                        onFocus={() => onSelectCell(cellId)}
+                        onKeyDown={(e) => handleKeyDown(e, cellId)}
+                        className={`w-full px-2 py-1.5 bg-transparent border-0 outline-none ${
+                          isBold ? 'font-bold' : 'font-normal'
+                        } ${row.is_header ? 'text-base' : 'text-sm'}`}
+                        style={cellColor ? { color: cellColor } : undefined}
+                        spellCheck={false}
+                      />
+                    </div>
                   </td>
                 )
               })}