free-coding-models 0.5.1 → 0.5.4

package/web/src/components/dashboard/FilterBar.module.css

@@ -1,63 +1,149 @@
+/**
+ * @file web/src/components/dashboard/FilterBar.module.css
+ * @description Filter bar styles — M1 parity chips (tier, status, verdict, health,
+ * visibility, provider, custom text filter, reset, ping mode).
+ * 📖 Sticky below the header (`top: 60px` = header height) so the filter chips
+ * 📖 stay visible while the user scrolls a long table.
+ */
+
 .filters {
-  position: relative; z-index: 1;
-  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
-  padding: 16px 24px;
+  position: sticky; top: 60px; z-index: 99;
+  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
+  padding: 10px 20px;
+  background: var(--color-bg-card);
+  border-bottom: 1px solid var(--color-border);
+  backdrop-filter: blur(20px) saturate(1.5);
+  -webkit-backdrop-filter: blur(20px) saturate(1.5);
 }
-.group { display: flex; align-items: center; gap: 8px; }
+
+.group { display: flex; align-items: center; gap: 6px; }
+
 .filterLabel {
-  font-size: 11px; font-weight: 600; color: var(--color-text-muted);
+  font-size: 10px; font-weight: 700; color: var(--color-text-muted);
   text-transform: uppercase; letter-spacing: 0.5px;
+  white-space: nowrap;
 }
-.tierRow { display: flex; gap: 4px; }
-.tierBtn {
-  font-size: 12px; font-weight: 600; font-family: var(--font-mono);
-  padding: 4px 10px; border-radius: 6px;
+
+/* ── Chip rows (TUI cycle behavior) ── */
+.chipRow { display: flex; gap: 3px; }
+.chip {
+  font-size: 11px; font-weight: 600; font-family: var(--font-mono);
+  padding: 4px 8px; border-radius: 5px;
   border: 1px solid var(--color-border); background: var(--color-surface);
   color: var(--color-text-muted); cursor: pointer; transition: all 150ms;
+  white-space: nowrap;
 }
-.tierBtn:hover { background: var(--color-bg-hover); color: var(--color-text); }
-.active {
+.chip:hover { background: var(--color-bg-hover); color: var(--color-text); }
+.chipActive {
   background: var(--color-accent) !important; color: var(--color-bg) !important;
   border-color: var(--color-accent) !important; font-weight: 700;
 }
-.providerSelect {
+
+/* ── Select inputs (provider, visibility) ── */
+.select, .providerSelect {
   background: var(--color-surface); color: var(--color-text);
-  border: 1px solid var(--color-border); border-radius: 6px;
-  padding: 5px 10px; font-size: 12px; font-family: var(--font-sans);
+  border: 1px solid var(--color-border); border-radius: 5px;
+  padding: 4px 8px; font-size: 11px; font-family: var(--font-sans);
   cursor: pointer; outline: none;
+  min-width: 130px;
 }
-.providerSelect:focus { border-color: var(--color-accent); }
+.select:focus, .providerSelect:focus { border-color: var(--color-accent); }
+
+/* ── Spacer + reset ── */
 .spacer { flex: 1; }
-.live {
-  display: flex; align-items: center; gap: 6px;
-  font-size: 11px; font-weight: 700; color: var(--color-accent);
-  text-transform: uppercase; letter-spacing: 1px;
+
+.resetBtn {
+  display: inline-flex; align-items: center; gap: 5px;
+  font-size: 11px; font-weight: 700; font-family: var(--font-mono);
+  padding: 4px 9px; border-radius: 5px;
+  border: 1px solid var(--color-border-hover);
+  background: var(--color-accent-dim);
+  color: var(--color-text);
+  cursor: pointer; transition: all 150ms;
+}
+.resetBtn:hover {
+  background: var(--color-accent);
+  color: var(--color-bg);
+}
+.resetBadge {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 16px; height: 16px;
+  font-size: 9px; font-weight: 800;
+  background: var(--color-bg);
+  color: var(--color-accent);
+  border-radius: 999px;
+  padding: 0 4px;
 }
-.liveDot {
-  width: 8px; height: 8px; border-radius: 50%;
-  background: var(--color-accent); animation: pulseDot 2s ease-in-out infinite;
+
+/* ── Custom text filter chip (TUI Ctrl+P "Apply text filter") ── */
+.customFilterChip {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-size: 11px; font-weight: 600; font-family: var(--font-mono);
+  padding: 3px 4px 3px 8px;
+  border: 1px solid var(--color-accent);
+  background: var(--color-accent-dim);
+  color: var(--color-accent);
+  border-radius: 5px;
+  max-width: 240px;
+}
+.customFilterIcon { display: inline-flex; flex-shrink: 0; }
+.customFilterLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
+.customFilterClear {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 18px; height: 18px;
+  background: transparent;
+  border: none;
+  color: var(--color-accent);
+  border-radius: 3px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.customFilterClear:hover { background: var(--color-accent); color: var(--color-bg); }
 
-/* ── Next ping countdown ── */
+/* ── Ping interval selector ── */
+.pingRow { display: flex; gap: 3px; }
+.pingBtn {
+  font-size: 11px; font-weight: 600; font-family: var(--font-mono);
+  padding: 4px 8px; border-radius: 5px;
+  border: 1px solid var(--color-border); background: var(--color-surface);
+  color: var(--color-text-muted); cursor: pointer; transition: all 150ms;
+  white-space: nowrap;
+}
+.pingBtn:hover { background: var(--color-bg-hover); color: var(--color-text); border-color: var(--color-text-muted); }
+.pingBtnActive {
+  background: var(--color-bg-hover) !important;
+  color: var(--ping-active-color, var(--color-accent)) !important;
+  border-color: var(--ping-active-color, var(--color-accent)) !important;
+  font-weight: 700;
+}
+
+/* ── Next ping countdown (TUI parity) ── */
 .nextPing {
   display: flex; align-items: center; gap: 6px;
-  font-size: 12px; font-family: var(--font-mono);
+  font-size: 11px; font-family: var(--font-mono);
+  padding: 4px 8px;
+  border: 1px solid var(--color-border);
+  border-radius: 5px;
+  background: var(--color-surface);
 }
 .nextPingLabel {
-  font-size: 11px; font-weight: 500; color: var(--color-text-muted);
+  font-size: 10px; font-weight: 500; color: var(--color-text-muted);
   text-transform: uppercase; letter-spacing: 0.5px;
 }
 .nextPingTime {
-  font-size: 14px; font-weight: 700; color: var(--color-text);
+  font-size: 13px; font-weight: 700; color: var(--color-text);
   min-width: 32px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
 }
 .pingingDot {
-  width: 8px; height: 8px; border-radius: 50%;
+  width: 7px; height: 7px; border-radius: 50%;
   background: #ff4466; animation: pulseDot 0.6s ease-in-out infinite;
-}
-.pingingText {
-  font-size: 12px; font-weight: 600; color: #ff4466;
-  font-family: var(--font-mono);
+  flex-shrink: 0;
 }
 
 @keyframes pulseDot {
@@ -65,50 +151,44 @@
   50% { box-shadow: 0 0 0 6px transparent; }
 }
 
-/* ── Ping interval selector ── */
-.pingRow { display: flex; gap: 4px; }
-.pingBtn {
-  font-size: 12px; font-weight: 600; font-family: var(--font-mono);
-  padding: 4px 10px; border-radius: 6px;
-  border: 1px solid var(--color-border); background: var(--color-surface);
-  color: var(--color-text-muted); cursor: pointer; transition: all 150ms;
-  white-space: nowrap;
+.live {
+  display: flex; align-items: center; gap: 5px;
+  font-size: 10px; font-weight: 700; color: var(--color-accent);
+  text-transform: uppercase; letter-spacing: 1px;
 }
-.pingBtn:hover { background: var(--color-bg-hover); color: var(--color-text); border-color: var(--color-text-muted); }
-.pingBtnActive {
-  background: var(--color-bg-hover) !important;
-  color: var(--ping-active-color, var(--color-accent)) !important;
-  border-color: var(--ping-active-color, var(--color-accent)) !important;
-  font-weight: 700;
+.liveDot {
+  width: 7px; height: 7px; border-radius: 50%;
+  background: var(--color-accent); animation: pulseDot 2s ease-in-out infinite;
 }
 
 /* ── Global benchmark progress bar (Ctrl+U) ── */
 .benchmarkBar {
-  display: flex; align-items: center; gap: 12px;
+  display: flex; align-items: center; gap: 10px;
   background: rgba(180, 0, 255, 0.12);
   border: 1px solid rgba(180, 0, 255, 0.4);
-  border-radius: 8px;
-  padding: 8px 14px;
+  border-radius: 6px;
+  padding: 6px 12px;
   flex-shrink: 0;
+  width: 100%;
+  margin-bottom: 4px;
 }
 .benchmarkLabel {
-  display: flex; align-items: center; gap: 6px;
-  font-size: 12px; font-weight: 700;
+  display: flex; align-items: center; gap: 5px;
+  font-size: 11px; font-weight: 700;
   color: #b400ff; font-family: var(--font-mono);
   white-space: nowrap;
 }
 .benchmarkSpinner {
   display: inline-block;
   animation: spinSp 0.8s linear infinite;
-  font-size: 14px; line-height: 1;
-}
-.benchmarkCount {
-  font-size: 11px; opacity: 0.8;
+  font-size: 12px; line-height: 1;
 }
+.benchmarkCount { font-size: 10px; opacity: 0.8; }
 .benchmarkTrack {
-  width: 120px; height: 6px;
+  width: 120px; height: 5px;
   background: rgba(255,255,255,0.1);
   border-radius: 3px; overflow: hidden;
+  flex: 1;
 }
 .benchmarkFill {
   height: 100%;
@@ -117,12 +197,12 @@
   transition: width 0.5s ease;
 }
 .benchmarkPct {
-  font-size: 12px; font-weight: 700;
+  font-size: 11px; font-weight: 700;
   color: #b400ff; font-family: var(--font-mono);
-  min-width: 36px; text-align: right;
+  min-width: 32px; text-align: right;
 }
 
 @keyframes spinSp {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
-}
+}

package/web/src/components/dashboard/ModelTable.jsx

@@ -1,17 +1,27 @@
 /**
  * @file web/src/components/dashboard/ModelTable.jsx
  * @description Main data table with ALL CLI columns powered by TanStack Table.
- * 📖 Full CLI column parity: ❔(mood) | # | Tier | SWE% | Ctx | Model | Provider | Last Ping | Avg | Health | Verdict | Stability | Up% | AI Lat. | TPS | Trend
+ * 📖 Full CLI column parity: ⭐(fav) | ❔(mood) | # | Tier | SWE% | Ctx | Model | Provider | Last Ping | Avg | Health | Verdict | Stability | Up% | AI Lat. | TPS | Trend
+ * 📖 M1 additions:
+ *   - ⭐/☆ star button per row (TUI `F` key)
+ *   - Clickable AI Lat. cell → per-row benchmark (TUI `Ctrl+A`)
+ *   - Dark-red row class for incompatible models when `toolMode` is set
+ *     (TUI behavior; tool mode picker ships in M3, but the class is ready now)
  * 📖 Clickable headers for sorting, medal rankings for top 3, horizontal scroll.
  * 📖 Sorting is handled by useFilter hook which pushes null/Infinity values to bottom.
+ * 📖 Columns are user-resizable: drag the right edge of any header to resize.
+ * 📖 Custom widths persist in localStorage via the useColumnSizing hook and survive reloads.
+ * 📖 A "Reset columns" button appears in the toolbar only when the user has custom widths.
  */
-import { useMemo } from 'react'
+import { useMemo, useEffect } from 'react'
 import {
   useReactTable,
   getCoreRowModel,
   flexRender,
   createColumnHelper,
 } from '@tanstack/react-table'
+import { IconStar, IconStarFilled, IconPlayerPlayFilled } from '@tabler/icons-react'
+import { useColumnSizing } from '../../hooks/useColumnSizing.js'
 
 import MoodCell from '../atoms/MoodCell.jsx'
 import TierBadge from '../atoms/TierBadge.jsx'
@@ -23,9 +33,15 @@ import VerdictBadge from '../atoms/VerdictBadge.jsx'
 import Sparkline from '../atoms/Sparkline.jsx'
 import AILatencyCell from '../atoms/AILatencyCell.jsx'
 import TPSCell from '../atoms/TPSCell.jsx'
+import NoKeyIcon from '../atoms/NoKeyIcon.jsx'
+import ProviderLogo from '../atoms/ProviderLogo.jsx'
 
 import { pingClass } from '../../utils/format.js'
 import { sweClass } from '../../utils/ranks.js'
+// 📖 Pure-JS, browser-safe import of the TUI's tool compatibility helper. Same
+// 📖 file the TUI uses; both surfaces share the source of truth for which
+// 📖 providers are compatible with which tools.
+import { getCompatibleTools } from '../../../../src/core/tool-metadata.js'
 import styles from './ModelTable.module.css'
 
 const colHelper = createColumnHelper()
@@ -46,13 +62,19 @@ function RankCellRenderer({ row }) {
 
 function ModelCellRenderer({ row }) {
   const m = row.original
+  const showNoKey = !m.hasApiKey && !m.cliOnly
   return (
     <div className={styles.modelCell}>
       <StatusDot status={m.status} />
       <div className={styles.modelMeta}>
         <div className={styles.modelHeader}>
           <span className={styles.modelName}>{m.label}</span>
-          {!m.hasApiKey && !m.cliOnly && <span className={styles.noKey}>NO KEY</span>}
+          {showNoKey && (
+            <NoKeyIcon
+              size={14}
+              title="No API key configured — health will stay in 'NO KEY' state"
+            />
+          )}
         </div>
         <div className={styles.modelId}>{m.modelId}</div>
       </div>
@@ -71,7 +93,10 @@ function CtxCellRenderer({ row }) {
 }
 
 function ProviderCellRenderer({ row }) {
-  return <span className={styles.providerPill}>{row.original.origin}</span>
+  // 📖 Renders the provider as [icon + text-wordmark] on a single row-height
+  // 📖 line. Replaces the old bordered `.providerPill` text label. See
+  // 📖 atoms/ProviderLogo.jsx for the asset resolution + theme logic.
+  return <ProviderLogo providerKey={row.original.providerKey} origin={row.original.origin} />
 }
 
 function LastPingCellRenderer({ row }) {
@@ -112,7 +137,26 @@ function UptimeCellRenderer({ row }) {
 
 function AILatencyCellRenderer({ row }) {
   const m = row.original
-  return <AILatencyCell result={m.benchmark || null} isRunning={Boolean(m.isBenchmarking)} />
+  const isRunning = Boolean(m.isBenchmarking)
+  return (
+    <div
+      className={`${styles.aiLatencyWrap} ${isRunning ? styles.aiLatencyRunning : ''}`}
+      onClick={(e) => {
+        // 📖 Click anywhere in the cell = fire per-row benchmark (TUI: Ctrl+A).
+        e.stopPropagation()
+        const handler = window.__fcmRowBenchmarkHandler
+        if (typeof handler === 'function') handler(m)
+      }}
+      title={isRunning ? 'Benchmarking…' : 'Click to run AI Speed Test (TUI: Ctrl+A)'}
+    >
+      <AILatencyCell result={m.benchmark || null} isRunning={isRunning} />
+      {!isRunning && (
+        <span className={styles.aiLatencyPlay} aria-hidden="true">
+          <IconPlayerPlayFilled size={10} stroke={1.5} />
+        </span>
+      )}
+    </div>
+  )
 }
 
 function TPSCellRenderer({ row }) {
@@ -125,7 +169,32 @@ function TrendCellRenderer({ row }) {
 }
 
 // ─── Column definitions ──────────────────────────────────────────────────────
-const columns = [
+// 📖 Note: `favorites` / `onBenchmarkRow` are read by the cell renderers below
+// 📖 via closure. We rebuild the columns list whenever any of these change so
+// 📖 the cells always see fresh values.
+const buildColumns = ({ favorites, onBenchmarkRow, onSelectModel }) => [
+  // 📖 Star column — leftmost, mirrors the TUI's `F` key.
+  colHelper.display({
+    id: 'fav',
+    header: '⭐',
+    size: 32,
+    enableSorting: false,
+    cell: ({ row }) => {
+      const m = row.original
+      const isFav = favorites.isFavorite(m)
+      return (
+        <button
+          className={`${styles.favBtn} ${isFav ? styles.favBtnActive : ''}`}
+          onClick={(e) => { e.stopPropagation(); favorites.toggle(m) }}
+          title={isFav ? `Unfavorite ${m.label} (TUI: F)` : `Favorite ${m.label} (TUI: F)`}
+          aria-label={isFav ? `Unfavorite ${m.label}` : `Favorite ${m.label}`}
+          aria-pressed={isFav}
+        >
+          {isFav ? <IconStarFilled size={14} stroke={1.5} /> : <IconStar size={14} stroke={1.5} />}
+        </button>
+      )
+    },
+  }),
   colHelper.display({
     id: 'mood',
     header: '❔',
@@ -167,7 +236,11 @@ const columns = [
   }),
   colHelper.accessor('origin', {
     header: 'Provider',
-    size: 110,
+    // 📖 150px fits the widest wordmark (cloudflare ~145px) at 12px height,
+    // 📖 with a small buffer. Users can still drag the column wider if they
+    // 📖 want a larger render. The default before this was 110px, but the
+    // 📖 icon+wordmark layout needs more horizontal room.
+    size: 150,
     enableSorting: true,
     cell: ProviderCellRenderer,
   }),
@@ -232,6 +305,21 @@ const columns = [
   }),
 ]
 
+// 📖 DEFAULT_COLUMN_SIZING: extracted from the columns above. This is the single
+// 📖 source of truth for both the table layout and the useColumnSizing hook's reset target.
+// 📖 The 'Reset columns' button restores these exact widths.
+// 📖 We build a placeholder columns list (no callbacks needed) to extract sizes.
+const PLACEHOLDER_COLUMNS = buildColumns({ favorites: { isFavorite: () => false, toggle: () => {} }, onBenchmarkRow: null, onSelectModel: null })
+export const DEFAULT_COLUMN_SIZING = PLACEHOLDER_COLUMNS.reduce((acc, c) => {
+  if (c.id) acc[c.id] = c.size ?? 80
+  return acc
+}, {})
+
+// 📖 RESIZE_MIN/MAX bounds (px) — used by the handle's drag preview and mirrored in
+// 📖 the hook's clamp. Keep them in sync if you change one.
+const COLUMN_RESIZE_MIN = 24
+const COLUMN_RESIZE_MAX = 1200
+
 // ─── Sort icon component ────────────────────────────────────────────────────
 function SortIcon({ column }) {
   if (!column.getCanSort()) return null
@@ -241,56 +329,157 @@ function SortIcon({ column }) {
 }
 
 // ─── Main component ───────────────────────────────────────────────────────────
-export default function ModelTable({ filtered, onSelectModel, sortColumn, sortDirection, onSort }) {
+export default function ModelTable({
+  filtered, onSelectModel, onBenchmarkRow, favorites,
+  sortColumn, sortDirection, onSort,
+  toolMode = null,
+}) {
   // Compute top3 for medal rows
   const top3Ids = useMemo(() => {
     const online = filtered.filter(m => m.status === 'up' && m.avg != null && m.avg !== Infinity && m.avg < 99000)
     return new Set([...online].sort((a, b) => a.avg - b.avg).slice(0, 3).map(m => m.modelId))
   }, [filtered])
 
+  // 📖 Wire the per-row benchmark handler through a window-level ref so the
+  // 📖 AI Lat. cell can call it without prop-drilling through TanStack's
+  // 📖 cell render context. Cleaner than threading `meta` through 17 columns.
+  useEffect(() => {
+    if (typeof onBenchmarkRow !== 'function') {
+      window.__fcmRowBenchmarkHandler = null
+      return
+    }
+    window.__fcmRowBenchmarkHandler = onBenchmarkRow
+    return () => {
+      if (window.__fcmRowBenchmarkHandler === onBenchmarkRow) {
+        window.__fcmRowBenchmarkHandler = null
+      }
+    }
+  }, [onBenchmarkRow])
+
+  // 📖 Build the columns with the current favorites/onBenchmarkRow handlers.
+  // 📖 Re-derive when favorites reference changes so the star cells re-render.
+  const columns = useMemo(
+    () => buildColumns({ favorites, onBenchmarkRow, onSelectModel }),
+    [favorites, onBenchmarkRow, onSelectModel]
+  )
+
+  // 📖 Column sizing state with localStorage persistence (see useColumnSizing.js).
+  // 📖 onColumnSizingChange + state.columnSizing are TanStack's contract for resize.
+  const { columnSizing, setColumnSizing, resetColumnSizing, hasCustomSizing } =
+    useColumnSizing(DEFAULT_COLUMN_SIZING)
+
   // TanStack Table — no getSortedRowModel, sorting lives in useFilter
   const table = useReactTable({
     data: filtered,
     columns,
     defaultColumn: { enableSorting: true },
     getCoreRowModel: getCoreRowModel(),
+    columnResizeMode: 'onChange',
+    state: { columnSizing },
+    onColumnSizingChange: setColumnSizing,
   })
 
   const rows = table.getRowModel().rows
 
+  // 📖 Total table width = sum of all column sizes. Used to drop the min-width
+  // 📖 override once the user has manually tuned the columns, so horizontal
+  // 📖 scrolling reflects the user's layout rather than the 1200px default.
+  const totalTableWidth = useMemo(
+    () => table.getAllColumns().reduce((sum, c) => sum + c.getSize(), 0),
+    // 📖 Re-derive when the sizing state object changes (a new object is created per change).
+    [columnSizing]
+  )
+
+  // 📖 Global cursor lock: when the user is dragging a resize handle, the cursor
+  // 📖 can leave the handle briefly. Adding a body class keeps the col-resize
+  // 📖 cursor visible AND blocks accidental text selection until the drag ends.
+  const isResizing = Boolean(table.getState().columnSizingInfo?.isResizingColumn)
+  useEffect(() => {
+    if (typeof document === 'undefined') return
+    if (isResizing) {
+      document.body.classList.add('col-resizing')
+    } else {
+      document.body.classList.remove('col-resizing')
+    }
+    return () => {
+      document.body.classList.remove('col-resizing')
+    }
+  }, [isResizing])
+
   if (rows.length === 0) {
     return <div className={styles.empty}>No models match your filters</div>
   }
 
   return (
     <div className={styles.container}>
-      <table className={styles.table}>
+      {hasCustomSizing && (
+        <div className={styles.resizeToolbar}>
+          <span className={styles.resizeToolbarHint}>
+            📐 Custom column widths · total <strong>{Math.round(totalTableWidth)}px</strong>
+          </span>
+          <button
+            type="button"
+            className={styles.resizeResetButton}
+            onClick={resetColumnSizing}
+            title="Restore the default column widths"
+          >
+            ↺ Reset columns
+          </button>
+        </div>
+      )}
+      <table
+        className={styles.table}
+        style={hasCustomSizing ? { minWidth: `${totalTableWidth}px` } : undefined}
+      >
         <thead>
           {table.getHeaderGroups().map(headerGroup => (
             <tr key={headerGroup.id}>
               {headerGroup.headers.map(header => {
                 const col = header.column
                 const canSort = SORTABLE_COLUMN_IDS.has(col.id)
+                const isResizing = col.getIsResizing?.() === true
+                const sizePx = `${header.getSize()}px`
                 return (
                   <th
                     key={header.id}
                     className={styles.th}
                     onClick={canSort ? () => onSort(header.id) : undefined}
-                    style={{ cursor: canSort ? 'pointer' : 'default' }}
+                    style={{ width: sizePx, minWidth: sizePx, maxWidth: sizePx, cursor: canSort ? 'pointer' : 'default' }}
                     title={`Sort ${col.columnDef.header}: asc → desc → reset`}
                   >
-                    {flexRender(col.columnDef.header, header.getContext())}
-                    {canSort && (
-                      <span className={
-                        sortColumn === col.id
-                          ? styles.sortIconActive
-                          : styles.sortIcon
-                      }>
-                        {sortColumn === col.id
-                          ? (sortDirection === 'asc' ? '↑' : '↓')
-                          : '⇅'}
+                    <div className={styles.thInner}>
+                      <span className={styles.thLabel}>
+                        {flexRender(col.columnDef.header, header.getContext())}
+                        {canSort && (
+                          <span className={
+                            sortColumn === col.id
+                              ? styles.sortIconActive
+                              : styles.sortIcon
+                          }>
+                            {sortColumn === col.id
+                              ? (sortDirection === 'asc' ? '↑' : '↓')
+                              : '⇅'}
+                          </span>
+                        )}
                       </span>
-                    )}
+                      {/* 📖 Resize handle: full-height grab zone on the right edge of every header.
+                          📖 TanStack's column.getResizeHandler() wires mouse + touch to the
+                          📖 table's columnSizing state via the onColumnSizingChange callback. */}
+                      <span
+                        className={`${styles.resizeHandle} ${isResizing ? styles.resizeHandleActive : ''}`}
+                        onClick={(e) => e.stopPropagation()}
+                        onMouseDown={header.getResizeHandler()}
+                        onTouchStart={header.getResizeHandler()}
+                        onDoubleClick={() => {
+                          // 📖 Double-click resets just this column to its declared default width.
+                          setColumnSizing((prev) => ({ ...prev, [col.id]: DEFAULT_COLUMN_SIZING[col.id] }))
+                        }}
+                        title={`Drag to resize ${col.columnDef.header} (double-click to reset this column)`}
+                        role="separator"
+                        aria-orientation="vertical"
+                        aria-label={`Resize ${col.columnDef.header} column`}
+                      />
+                    </div>
                   </th>
                 )
               })}
@@ -301,22 +490,38 @@ export default function ModelTable({ filtered, onSelectModel, sortColumn, sortDi
           {rows.map((row, i) => {
             const m = row.original
             const rankIdx = [...top3Ids].indexOf(m.modelId)
-            const rowClass = rankIdx >= 0 ? styles[`rank${rankIdx + 1}`] : ''
+            const rowClasses = []
+            if (rankIdx >= 0) rowClasses.push(styles[`rank${rankIdx + 1}`])
             // 📖 Per-row benchmark state comes from the backend. The old global
             // 📖 heuristic made every unbenchmarked row spin until the whole scan ended.
-            const isBenchRunning = Boolean(m.isBenchmarking)
-            const benchRowClass = isBenchRunning ? ` ${styles.benchRow}` : ''
+            if (m.isBenchmarking) rowClasses.push(styles.benchRow)
+            // 📖 Tool-compat dark-red row when an active tool mode is set and the
+            // 📖 model isn't compatible with it. Mirrors the TUI render-table.js
+            // 📖 behavior. The picker itself ships in M3; for M1 the visual is wired.
+            if (toolMode) {
+              const compat = getCompatibleTools(m.providerKey)
+              if (!compat.includes(toolMode)) {
+                rowClasses.push(styles.incompatible)
+              }
+            }
             return (
               <tr
                 key={row.id}
-                className={`${rowClass}${benchRowClass}`}
+                className={rowClasses.join(' ')}
                 onClick={() => onSelectModel(row.original)}
               >
-                {row.getVisibleCells().map(cell => (
-                  <td key={cell.id} className={styles.td}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </td>
-                ))}
+                {row.getVisibleCells().map(cell => {
+                  const sizePx = `${cell.column.getSize()}px`
+                  return (
+                    <td
+                      key={cell.id}
+                      className={styles.td}
+                      style={{ width: sizePx, minWidth: sizePx, maxWidth: sizePx }}
+                    >
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </td>
+                  )
+                })}
               </tr>
             )
           })}