refactor(word-step): make table fully generic and fix marker-only row filter

Frontend: Replace hardcoded EN/DE/Example vocab table with unified dynamic
table driven by columns_used from backend. Labeling, confirmation, counts,
and summary badges are now all cell-based instead of branching on isVocab.

Backend: Change _cells_to_vocab_entries() entry filter from checking only
english/german/example to checking ANY mapped field. This preserves rows
with only marker or source_page content, fixing the issue where marker
sub-columns disappeared at the end of OCR processing.

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

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

@@ -241,34 +241,27 @@ export function StepWordRecognition({ sessionId, onNext, goToStep }: StepWordRec
     ))
   }
 
-  // Step-through: confirm current entry
+  // Step-through: confirm current row (always cell-based)
   const confirmEntry = () => {
-    if (isVocab) {
-      setEditedEntries(prev => prev.map((e, i) =>
-        i === activeIndex ? { ...e, status: e.status === 'edited' ? 'edited' : 'confirmed' } : e
-      ))
-    } else {
-      // Generic: confirm all cells in this row
-      const rowCells = getRowCells(activeIndex)
-      const cellIds = new Set(rowCells.map(c => c.cell_id))
-      setEditedCells(prev => prev.map(c =>
-        cellIds.has(c.cell_id) ? { ...c, status: c.status === 'edited' ? 'edited' : 'confirmed' } : c
-      ))
-    }
-    const maxIdx = isVocab ? editedEntries.length - 1 : getUniqueRowCount() - 1
+    const rowCells = getRowCells(activeIndex)
+    const cellIds = new Set(rowCells.map(c => c.cell_id))
+    setEditedCells(prev => prev.map(c =>
+      cellIds.has(c.cell_id) ? { ...c, status: c.status === 'edited' ? 'edited' : 'confirmed' } : c
+    ))
+    const maxIdx = getUniqueRowCount() - 1
     if (activeIndex < maxIdx) {
       setActiveIndex(activeIndex + 1)
     }
   }
 
-  // Step-through: skip current entry
+  // Step-through: skip current row
   const skipEntry = () => {
-    if (isVocab) {
-      setEditedEntries(prev => prev.map((e, i) =>
-        i === activeIndex ? { ...e, status: 'skipped' as const } : e
-      ))
-    }
-    const maxIdx = isVocab ? editedEntries.length - 1 : getUniqueRowCount() - 1
+    const rowCells = getRowCells(activeIndex)
+    const cellIds = new Set(rowCells.map(c => c.cell_id))
+    setEditedCells(prev => prev.map(c =>
+      cellIds.has(c.cell_id) ? { ...c, status: 'skipped' as const } : c
+    ))
+    const maxIdx = getUniqueRowCount() - 1
     if (activeIndex < maxIdx) {
       setActiveIndex(activeIndex + 1)
     }
@@ -351,11 +344,12 @@ export function StepWordRecognition({ sessionId, onNext, goToStep }: StepWordRec
   const columnsUsed = gridResult?.columns_used || []
   const gridShape = gridResult?.grid_shape
 
-  // Counts for labeling progress
-  const confirmedCount = isVocab
-    ? editedEntries.filter(e => e.status === 'confirmed' || e.status === 'edited').length
-    : editedCells.filter(c => c.status === 'confirmed' || c.status === 'edited').length
-  const totalCount = isVocab ? editedEntries.length : getUniqueRowCount()
+  // Counts for labeling progress (always cell-based)
+  const confirmedRowIds = new Set(
+    editedCells.filter(c => c.status === 'confirmed' || c.status === 'edited').map(c => c.row_index)
+  )
+  const confirmedCount = confirmedRowIds.size
+  const totalCount = getUniqueRowCount()
 
   // Group cells by row for generic table display
   const cellsByRow: Map<number, GridCell[]> = new Map()
@@ -475,10 +469,8 @@ export function StepWordRecognition({ sessionId, onNext, goToStep }: StepWordRec
             <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="flex items-center justify-between">
                 <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                  {isVocab
-                    ? `Ergebnis: ${summary.total_entries ?? 0} Vokabel-Eintraege erkannt`
-                    : `Ergebnis: ${summary.non_empty_cells}/${summary.total_cells} Zellen mit Text`
-                  }
+                  Ergebnis: {summary.non_empty_cells}/{summary.total_cells} Zellen mit Text
+                  ({sortedRowIndices.length} Zeilen, {columnsUsed.length} Spalten)
                 </h4>
                 <span className="text-xs text-gray-400">
                   {gridResult.duration_seconds}s
@@ -487,27 +479,14 @@ export function StepWordRecognition({ sessionId, onNext, goToStep }: StepWordRec
 
               {/* Summary badges */}
               <div className="flex gap-2 flex-wrap">
-                {isVocab ? (
-                  <>
-                    <span className="px-2 py-0.5 rounded text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300">
-                      EN: {summary.with_english ?? 0}
-                    </span>
-                    <span className="px-2 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300">
-                      DE: {summary.with_german ?? 0}
-                    </span>
-                  </>
-                ) : (
-                  <>
-                    <span className="px-2 py-0.5 rounded text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300">
-                      Zellen: {summary.non_empty_cells}/{summary.total_cells}
-                    </span>
-                    {columnsUsed.map((col, i) => (
-                      <span key={i} className={`px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 ${colTypeColor(col.type)}`}>
-                        C{col.index}: {colTypeLabel(col.type)}
-                      </span>
-                    ))}
-                  </>
-                )}
+                <span className="px-2 py-0.5 rounded text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300">
+                  Zellen: {summary.non_empty_cells}/{summary.total_cells}
+                </span>
+                {columnsUsed.map((col, i) => (
+                  <span key={i} className={`px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 ${colTypeColor(col.type)}`}>
+                    C{col.index}: {colTypeLabel(col.type)}
+                  </span>
+                ))}
                 {summary.low_confidence > 0 && (
                   <span className="px-2 py-0.5 rounded text-xs font-medium bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300">
                     Unsicher: {summary.low_confidence}
@@ -517,103 +496,52 @@ export function StepWordRecognition({ sessionId, onNext, goToStep }: StepWordRec
 
               {/* Entry/Cell table */}
               <div className="max-h-80 overflow-y-auto">
-                {isVocab ? (
-                  /* Vocab table: EN/DE/Example columns + optional page_ref */
-                  (() => {
-                    const hasPageRef = editedEntries.some(e => e.source_page)
-                    return (
-                      <table className="w-full text-xs">
-                        <thead className="sticky top-0 bg-white dark:bg-gray-800">
-                          <tr className="text-left text-gray-500 dark:text-gray-400 border-b dark:border-gray-700">
-                            <th className="py-1 pr-2 w-8">#</th>
-                            {hasPageRef && <th className="py-1 pr-2 w-12 text-gray-400">Seite</th>}
-                            <th className="py-1 pr-2">English</th>
-                            <th className="py-1 pr-2">Deutsch</th>
-                            <th className="py-1 pr-2">Example</th>
-                            <th className="py-1 w-12 text-right">Conf</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {editedEntries.map((entry, idx) => (
-                            <tr
-                              key={idx}
-                              className={`border-b dark:border-gray-700/50 ${
-                                idx === activeIndex ? 'bg-teal-50 dark:bg-teal-900/20' : ''
-                              }`}
-                              onClick={() => { setActiveIndex(idx); setMode('labeling') }}
-                            >
-                              <td className="py-1 pr-2 text-gray-400">{idx + 1}</td>
-                              {hasPageRef && (
-                                <td className="py-1 pr-2 font-mono text-gray-400 dark:text-gray-500">
-                                  {entry.source_page || ''}
-                                </td>
-                              )}
-                              <td className="py-1 pr-2 font-mono text-gray-700 dark:text-gray-300 cursor-pointer">
-                                <MultilineText text={entry.english} />
+                {/* Unified dynamic table — columns driven by columns_used */}
+                <table className="w-full text-xs">
+                  <thead className="sticky top-0 bg-white dark:bg-gray-800">
+                    <tr className="text-left text-gray-500 dark:text-gray-400 border-b dark:border-gray-700">
+                      <th className="py-1 pr-2 w-12">Zeile</th>
+                      {columnsUsed.map((col, i) => (
+                        <th key={i} className={`py-1 pr-2 ${colTypeColor(col.type)}`}>
+                          {colTypeLabel(col.type)}
+                        </th>
+                      ))}
+                      <th className="py-1 w-12 text-right">Conf</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {sortedRowIndices.map((rowIdx, posIdx) => {
+                      const rowCells = cellsByRow.get(rowIdx) || []
+                      const avgConf = rowCells.length
+                        ? Math.round(rowCells.reduce((s, c) => s + c.confidence, 0) / rowCells.length)
+                        : 0
+                      return (
+                        <tr
+                          key={rowIdx}
+                          className={`border-b dark:border-gray-700/50 ${
+                            posIdx === activeIndex ? 'bg-teal-50 dark:bg-teal-900/20' : ''
+                          }`}
+                          onClick={() => { setActiveIndex(posIdx); setMode('labeling') }}
+                        >
+                          <td className="py-1 pr-2 text-gray-400 font-mono text-[10px]">
+                            R{String(rowIdx).padStart(2, '0')}
+                          </td>
+                          {columnsUsed.map((col) => {
+                            const cell = rowCells.find(c => c.col_index === col.index)
+                            return (
+                              <td key={col.index} className="py-1 pr-2 font-mono text-gray-700 dark:text-gray-300 cursor-pointer">
+                                <MultilineText text={cell?.text || ''} />
                               </td>
-                              <td className="py-1 pr-2 font-mono text-gray-700 dark:text-gray-300 cursor-pointer">
-                                <MultilineText text={entry.german} />
-                              </td>
-                              <td className="py-1 pr-2 font-mono text-gray-500 dark:text-gray-400 cursor-pointer max-w-[200px]">
-                                <MultilineText text={entry.example} />
-                              </td>
-                              <td className={`py-1 text-right font-mono ${confColor(entry.confidence)}`}>
-                                {entry.confidence}%
-                              </td>
-                            </tr>
-                          ))}
-                        </tbody>
-                      </table>
-                    )
-                  })()
-                ) : (
-                  /* Generic table: dynamic columns from columns_used */
-                  <table className="w-full text-xs">
-                    <thead className="sticky top-0 bg-white dark:bg-gray-800">
-                      <tr className="text-left text-gray-500 dark:text-gray-400 border-b dark:border-gray-700">
-                        <th className="py-1 pr-2 w-12">Zeile</th>
-                        {columnsUsed.map((col, i) => (
-                          <th key={i} className={`py-1 pr-2 ${colTypeColor(col.type)}`}>
-                            {colTypeLabel(col.type)}
-                          </th>
-                        ))}
-                        <th className="py-1 w-12 text-right">Conf</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {sortedRowIndices.map((rowIdx, posIdx) => {
-                        const rowCells = cellsByRow.get(rowIdx) || []
-                        const avgConf = rowCells.length
-                          ? Math.round(rowCells.reduce((s, c) => s + c.confidence, 0) / rowCells.length)
-                          : 0
-                        return (
-                          <tr
-                            key={rowIdx}
-                            className={`border-b dark:border-gray-700/50 ${
-                              posIdx === activeIndex ? 'bg-teal-50 dark:bg-teal-900/20' : ''
-                            }`}
-                            onClick={() => { setActiveIndex(posIdx); setMode('labeling') }}
-                          >
-                            <td className="py-1 pr-2 text-gray-400 font-mono text-[10px]">
-                              R{String(rowIdx).padStart(2, '0')}
-                            </td>
-                            {columnsUsed.map((col) => {
-                              const cell = rowCells.find(c => c.col_index === col.index)
-                              return (
-                                <td key={col.index} className="py-1 pr-2 font-mono text-gray-700 dark:text-gray-300 cursor-pointer">
-                                  <MultilineText text={cell?.text || ''} />
-                                </td>
-                              )
-                            })}
-                            <td className={`py-1 text-right font-mono ${confColor(avgConf)}`}>
-                              {avgConf}%
-                            </td>
-                          </tr>
-                        )
-                      })}
-                    </tbody>
-                  </table>
-                )}
+                            )
+                          })}
+                          <td className={`py-1 text-right font-mono ${confColor(avgConf)}`}>
+                            {avgConf}%
+                          </td>
+                        </tr>
+                      )
+                    })}
+                  </tbody>
+                </table>
                 <div ref={tableEndRef} />
               </div>
             </div>
@@ -682,15 +610,12 @@ export function StepWordRecognition({ sessionId, onNext, goToStep }: StepWordRec
       )}
 
       {/* Labeling mode */}
-      {mode === 'labeling' && (isVocab ? editedEntries.length > 0 : editedCells.length > 0) && (
+      {mode === 'labeling' && editedCells.length > 0 && (
         <div className="grid grid-cols-3 gap-4">
           {/* Left 2/3: Image with highlighted active row */}
           <div className="col-span-2">
             <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
-              {isVocab
-                ? `Eintrag ${activeIndex + 1} von ${editedEntries.length}`
-                : `Zeile ${activeIndex + 1} von ${getUniqueRowCount()}`
-              }
+              Zeile {activeIndex + 1} von {getUniqueRowCount()}
             </div>
             <div className="border rounded-lg overflow-hidden dark:border-gray-700 bg-gray-50 dark:bg-gray-900 relative">
               {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -699,19 +624,8 @@ export function StepWordRecognition({ sessionId, onNext, goToStep }: StepWordRec
                 alt="Wort-Overlay"
                 className="w-full h-auto"
               />
-              {/* Highlight overlay for active row/entry */}
-              {isVocab && editedEntries[activeIndex]?.bbox && (
-                <div
-                  className="absolute border-2 border-yellow-400 bg-yellow-400/10 pointer-events-none"
-                  style={{
-                    left: `${editedEntries[activeIndex].bbox.x}%`,
-                    top: `${editedEntries[activeIndex].bbox.y}%`,
-                    width: `${editedEntries[activeIndex].bbox.w}%`,
-                    height: `${editedEntries[activeIndex].bbox.h}%`,
-                  }}
-                />
-              )}
-              {!isVocab && (() => {
+              {/* Highlight overlay for active row */}
+              {(() => {
                 const rowCells = getRowCells(activeIndex)
                 return rowCells.map(cell => (
                   <div
@@ -741,14 +655,14 @@ export function StepWordRecognition({ sessionId, onNext, goToStep }: StepWordRec
                 Zurueck
               </button>
               <span className="text-xs text-gray-500">
-                {activeIndex + 1} / {isVocab ? editedEntries.length : getUniqueRowCount()}
+                {activeIndex + 1} / {getUniqueRowCount()}
               </span>
               <button
                 onClick={() => setActiveIndex(Math.min(
-                  (isVocab ? editedEntries.length : getUniqueRowCount()) - 1,
+                  getUniqueRowCount() - 1,
                   activeIndex + 1
                 ))}
-                disabled={activeIndex >= (isVocab ? editedEntries.length : getUniqueRowCount()) - 1}
+                disabled={activeIndex >= getUniqueRowCount() - 1}
                 className="px-2 py-1 text-xs border rounded hover:bg-gray-50 dark:hover:bg-gray-700 dark:border-gray-600 disabled:opacity-30"
               >
                 Weiter
@@ -757,17 +671,7 @@ export function StepWordRecognition({ sessionId, onNext, goToStep }: StepWordRec
 
             {/* Status badge */}
             <div className="flex items-center gap-2">
-              {isVocab && (
-                <>
-                  <span className={`px-2 py-0.5 rounded text-[10px] uppercase font-semibold ${statusBadge(editedEntries[activeIndex]?.status)}`}>
-                    {editedEntries[activeIndex]?.status || 'pending'}
-                  </span>
-                  <span className={`text-xs font-mono ${confColor(editedEntries[activeIndex]?.confidence || 0)}`}>
-                    {editedEntries[activeIndex]?.confidence}% Konfidenz
-                  </span>
-                </>
-              )}
-              {!isVocab && (() => {
+              {(() => {
                 const rowCells = getRowCells(activeIndex)
                 const avgConf = rowCells.length
                   ? Math.round(rowCells.reduce((s, c) => s + c.confidence, 0) / rowCells.length)
@@ -780,96 +684,36 @@ export function StepWordRecognition({ sessionId, onNext, goToStep }: StepWordRec
               })()}
             </div>
 
-            {/* Cell crops (vocab mode) */}
-            {isVocab && editedEntries[activeIndex]?.bbox_en && (
-              <div>
-                <div className="text-[10px] font-medium text-blue-500 mb-0.5">EN-Zelle</div>
-                <div className="border rounded dark:border-gray-700 overflow-hidden bg-white dark:bg-gray-900 h-10 relative">
-                  <CellCrop
-                    imageUrl={dewarpedUrl}
-                    bbox={editedEntries[activeIndex].bbox_en!}
-                  />
-                </div>
-              </div>
-            )}
-            {isVocab && editedEntries[activeIndex]?.bbox_de && (
-              <div>
-                <div className="text-[10px] font-medium text-green-500 mb-0.5">DE-Zelle</div>
-                <div className="border rounded dark:border-gray-700 overflow-hidden bg-white dark:bg-gray-900 h-10 relative">
-                  <CellCrop
-                    imageUrl={dewarpedUrl}
-                    bbox={editedEntries[activeIndex].bbox_de!}
-                  />
-                </div>
-              </div>
-            )}
-
-            {/* Editable fields */}
+            {/* Editable fields — one per column, driven by columns_used */}
             <div className="space-y-2">
-              {isVocab ? (
-                /* Vocab mode: EN/DE/Example fields */
-                <>
-                  <div>
-                    <label className="text-[10px] font-medium text-gray-500 dark:text-gray-400">English</label>
-                    <textarea
-                      ref={enRef as any}
-                      rows={Math.max(1, (editedEntries[activeIndex]?.english || '').split('\n').length)}
-                      value={editedEntries[activeIndex]?.english || ''}
-                      onChange={(e) => updateEntry(activeIndex, 'english', e.target.value)}
-                      className="w-full px-2 py-1.5 text-sm border rounded dark:bg-gray-700 dark:border-gray-600 font-mono resize-none"
-                    />
-                  </div>
-                  <div>
-                    <label className="text-[10px] font-medium text-gray-500 dark:text-gray-400">Deutsch</label>
-                    <textarea
-                      rows={Math.max(1, (editedEntries[activeIndex]?.german || '').split('\n').length)}
-                      value={editedEntries[activeIndex]?.german || ''}
-                      onChange={(e) => updateEntry(activeIndex, 'german', e.target.value)}
-                      className="w-full px-2 py-1.5 text-sm border rounded dark:bg-gray-700 dark:border-gray-600 font-mono resize-none"
-                    />
-                  </div>
-                  <div>
-                    <label className="text-[10px] font-medium text-gray-500 dark:text-gray-400">Example</label>
-                    <textarea
-                      rows={Math.max(1, (editedEntries[activeIndex]?.example || '').split('\n').length)}
-                      value={editedEntries[activeIndex]?.example || ''}
-                      onChange={(e) => updateEntry(activeIndex, 'example', e.target.value)}
-                      className="w-full px-2 py-1.5 text-sm border rounded dark:bg-gray-700 dark:border-gray-600 font-mono resize-none"
-                    />
-                  </div>
-                </>
-              ) : (
-                /* Generic mode: one field per column */
-                <>
-                  {(() => {
-                    const rowCells = getRowCells(activeIndex)
-                    return columnsUsed.map((col) => {
-                      const cell = rowCells.find(c => c.col_index === col.index)
-                      if (!cell) return null
-                      return (
-                        <div key={col.index}>
-                          <div className="flex items-center gap-1 mb-0.5">
-                            <label className={`text-[10px] font-medium ${colTypeColor(col.type)}`}>
-                              {colTypeLabel(col.type)}
-                            </label>
-                            <span className="text-[9px] text-gray-400">{cell.cell_id}</span>
-                          </div>
-                          {/* Cell crop */}
-                          <div className="border rounded dark:border-gray-700 overflow-hidden bg-white dark:bg-gray-900 h-10 relative mb-1">
-                            <CellCrop imageUrl={dewarpedUrl} bbox={cell.bbox_pct} />
-                          </div>
-                          <textarea
-                            rows={Math.max(1, (cell.text || '').split('\n').length)}
-                            value={cell.text || ''}
-                            onChange={(e) => updateCell(cell.cell_id, e.target.value)}
-                            className="w-full px-2 py-1.5 text-sm border rounded dark:bg-gray-700 dark:border-gray-600 font-mono resize-none"
-                          />
-                        </div>
-                      )
-                    })
-                  })()}
-                </>
-              )}
+              {(() => {
+                const rowCells = getRowCells(activeIndex)
+                return columnsUsed.map((col, colIdx) => {
+                  const cell = rowCells.find(c => c.col_index === col.index)
+                  if (!cell) return null
+                  return (
+                    <div key={col.index}>
+                      <div className="flex items-center gap-1 mb-0.5">
+                        <label className={`text-[10px] font-medium ${colTypeColor(col.type)}`}>
+                          {colTypeLabel(col.type)}
+                        </label>
+                        <span className="text-[9px] text-gray-400">{cell.cell_id}</span>
+                      </div>
+                      {/* Cell crop */}
+                      <div className="border rounded dark:border-gray-700 overflow-hidden bg-white dark:bg-gray-900 h-10 relative mb-1">
+                        <CellCrop imageUrl={dewarpedUrl} bbox={cell.bbox_pct} />
+                      </div>
+                      <textarea
+                        ref={colIdx === 0 ? enRef as any : undefined}
+                        rows={Math.max(1, (cell.text || '').split('\n').length)}
+                        value={cell.text || ''}
+                        onChange={(e) => updateCell(cell.cell_id, e.target.value)}
+                        className="w-full px-2 py-1.5 text-sm border rounded dark:bg-gray-700 dark:border-gray-600 font-mono resize-none"
+                      />
+                    </div>
+                  )
+                })
+              })()}
             </div>
 
             {/* Action buttons */}
@@ -895,57 +739,32 @@ export function StepWordRecognition({ sessionId, onNext, goToStep }: StepWordRec
               <div>Ctrl+Up = Zurueck</div>
             </div>
 
-            {/* Entry/Row list (compact) */}
+            {/* Row list (compact) */}
             <div className="border-t dark:border-gray-700 pt-2 mt-2">
               <div className="text-[10px] font-medium text-gray-500 dark:text-gray-400 mb-1">
-                {isVocab ? 'Alle Eintraege' : 'Alle Zeilen'}
+                Alle Zeilen
               </div>
               <div className="max-h-48 overflow-y-auto space-y-0.5">
-                {isVocab ? (
-                  editedEntries.map((entry, idx) => (
+                {sortedRowIndices.map((rowIdx, posIdx) => {
+                  const rowCells = cellsByRow.get(rowIdx) || []
+                  const textParts = rowCells.filter(c => c.text).map(c => c.text.replace(/\n/g, ' '))
+                  return (
                     <div
-                      key={idx}
-                      onClick={() => setActiveIndex(idx)}
+                      key={rowIdx}
+                      onClick={() => setActiveIndex(posIdx)}
                       className={`flex items-center gap-1 px-2 py-1 rounded text-[10px] cursor-pointer transition-colors ${
-                        idx === activeIndex
+                        posIdx === activeIndex
                           ? 'bg-teal-50 dark:bg-teal-900/30 border border-teal-200 dark:border-teal-700'
                           : 'hover:bg-gray-50 dark:hover:bg-gray-700/50'
                       }`}
                     >
-                      <span className="w-4 text-right text-gray-400">{idx + 1}</span>
-                      <span className={`w-2 h-2 rounded-full ${
-                        entry.status === 'confirmed' ? 'bg-green-500' :
-                        entry.status === 'edited' ? 'bg-blue-500' :
-                        entry.status === 'skipped' ? 'bg-orange-400' :
-                        'bg-gray-300 dark:bg-gray-600'
-                      }`} />
+                      <span className="w-6 text-right text-gray-400 font-mono">R{String(rowIdx).padStart(2, '0')}</span>
                       <span className="truncate text-gray-600 dark:text-gray-400 font-mono">
-                        {(entry.english || '\u2014').replace(/\n/g, ' ')} &rarr; {(entry.german || '\u2014').replace(/\n/g, ' ')}
+                        {textParts.join(' \u2192 ') || '\u2014'}
                       </span>
                     </div>
-                  ))
-                ) : (
-                  sortedRowIndices.map((rowIdx, posIdx) => {
-                    const rowCells = cellsByRow.get(rowIdx) || []
-                    const firstText = rowCells.find(c => c.text)?.text || ''
-                    return (
-                      <div
-                        key={rowIdx}
-                        onClick={() => setActiveIndex(posIdx)}
-                        className={`flex items-center gap-1 px-2 py-1 rounded text-[10px] cursor-pointer transition-colors ${
-                          posIdx === activeIndex
-                            ? 'bg-teal-50 dark:bg-teal-900/30 border border-teal-200 dark:border-teal-700'
-                            : 'hover:bg-gray-50 dark:hover:bg-gray-700/50'
-                        }`}
-                      >
-                        <span className="w-6 text-right text-gray-400 font-mono">R{String(rowIdx).padStart(2, '0')}</span>
-                        <span className="truncate text-gray-600 dark:text-gray-400 font-mono">
-                          {firstText.replace(/\n/g, ' ').substring(0, 60) || '\u2014'}
-                        </span>
-                      </div>
-                    )
-                  })
-                )}
+                  )
+                })}
               </div>
             </div>
           </div>