free-coding-models 0.5.0 → 0.5.4

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

@@ -1,81 +1,527 @@
 /**
  * @file web/src/components/dashboard/ModelTable.jsx
- * @description Main data table with medal rankings for top 3 fastest models.
+ * @description Main data table with ALL CLI columns powered by TanStack Table.
+ * 📖 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'
 import StatusDot from '../atoms/StatusDot.jsx'
-import VerdictBadge from '../atoms/VerdictBadge.jsx'
+import LastPingCell from '../atoms/LastPingCell.jsx'
+import HealthCell from '../atoms/HealthCell.jsx'
 import StabilityCell from '../atoms/StabilityCell.jsx'
+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'
 
-export default function ModelTable({ filtered, onSelectModel }) {
+const colHelper = createColumnHelper()
+
+const SORTABLE_COLUMN_IDS = new Set([
+  'mood', 'idx', 'tier', 'sweScore', 'ctx', 'label', 'origin', 'latestPing',
+  'avg', 'condition', 'verdict', 'stability', 'uptime', 'aiLatency', 'tps', 'trend',
+])
+
+// ─── Cell renderers ───────────────────────────────────────────────────────────
+function MoodCellRenderer({ row }) {
+  return <MoodCell verdict={row.original.verdict} />
+}
+
+function RankCellRenderer({ row }) {
+  return <span className={styles.rankNum}>{row.original.idx ?? row.index + 1}</span>
+}
+
+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>
+          {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>
+    </div>
+  )
+}
+
+function SWECellRenderer({ row }) {
+  const m = row.original
+  const cls = sweClass(m.sweScore)
+  return <span className={`${styles.swe} ${styles[cls]}`}>{m.sweScore || '—'}</span>
+}
+
+function CtxCellRenderer({ row }) {
+  return <span className={styles.ctx}>{row.original.ctx || '—'}</span>
+}
+
+function ProviderCellRenderer({ row }) {
+  // 📖 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 }) {
+  const m = row.original
+  const hist = m.pingHistory || m.pings || []
+  const latest = hist.length > 0 ? hist[hist.length - 1] : null
+  return <LastPingCell ms={latest?.ms ?? null} isPinging={Boolean(m.isPinging)} />
+}
+
+function AvgPingCellRenderer({ row }) {
+  const m = row.original
+  const cls = pingClass(m.avg)
+  return (
+    <span className={`${styles.ping} ${styles[cls]}`}>
+      {m.avg == null || m.avg === Infinity || m.avg > 99000 ? '—' : m.avg}
+    </span>
+  )
+}
+
+function HealthCellRenderer({ row }) {
+  const m = row.original
+  return <HealthCell status={m.status} httpCode={m.httpCode} />
+}
+
+function VerdictCellRenderer({ row }) {
+  const m = row.original
+  return <VerdictBadge verdict={m.verdict} httpCode={m.httpCode} />
+}
+
+function StabilityCellRenderer({ row }) {
+  return <StabilityCell score={row.original.stability} />
+}
+
+function UptimeCellRenderer({ row }) {
+  const m = row.original
+  return <span className={styles.uptime}>{m.uptime > 0 ? `${m.uptime}%` : '—'}</span>
+}
+
+function AILatencyCellRenderer({ row }) {
+  const m = row.original
+  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 }) {
+  const m = row.original
+  return <TPSCell result={m.benchmark || null} isRunning={Boolean(m.isBenchmarking)} />
+}
+
+function TrendCellRenderer({ row }) {
+  return <Sparkline history={row.original.pingHistory} />
+}
+
+// ─── Column definitions ──────────────────────────────────────────────────────
+// 📖 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: '❔',
+    size: 28,
+    cell: MoodCellRenderer,
+    enableSorting: true,
+  }),
+  colHelper.accessor('idx', {
+    header: '#',
+    size: 36,
+    enableSorting: true,
+    cell: ({ getValue, row }) => (
+      <span className={styles.rankNum}>{getValue() ?? row.index + 1}</span>
+    ),
+  }),
+  colHelper.accessor('tier', {
+    header: 'Tier',
+    size: 48,
+    enableSorting: true,
+    cell: ({ getValue }) => <TierBadge tier={getValue()} />,
+  }),
+  colHelper.accessor('sweScore', {
+    header: 'SWE%',
+    size: 52,
+    enableSorting: true,
+    cell: SWECellRenderer,
+  }),
+  colHelper.accessor('ctx', {
+    header: 'CTX',
+    size: 48,
+    enableSorting: true,
+    cell: CtxCellRenderer,
+  }),
+  colHelper.accessor('label', {
+    header: 'Model',
+    size: 200,
+    enableSorting: true,
+    cell: ModelCellRenderer,
+  }),
+  colHelper.accessor('origin', {
+    header: 'Provider',
+    // 📖 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,
+  }),
+  colHelper.display({
+    id: 'latestPing',
+    header: 'Last Ping',
+    size: 80,
+    cell: LastPingCellRenderer,
+    enableSorting: true,
+  }),
+  colHelper.accessor('avg', {
+    header: 'Avg',
+    size: 72,
+    enableSorting: true,
+    cell: AvgPingCellRenderer,
+  }),
+  colHelper.accessor('status', {
+    id: 'condition',
+    header: 'Health',
+    size: 120,
+    enableSorting: true,
+    cell: HealthCellRenderer,
+  }),
+  colHelper.accessor('verdict', {
+    header: 'Verdict',
+    size: 100,
+    enableSorting: true,
+    cell: VerdictCellRenderer,
+  }),
+  colHelper.accessor('stability', {
+    header: 'Stability',
+    size: 90,
+    enableSorting: true,
+    cell: StabilityCellRenderer,
+  }),
+  colHelper.accessor('uptime', {
+    header: 'Up%',
+    size: 48,
+    enableSorting: true,
+    cell: UptimeCellRenderer,
+  }),
+  colHelper.display({
+    id: 'aiLatency',
+    header: 'AI Lat.',
+    size: 80,
+    cell: AILatencyCellRenderer,
+    enableSorting: true,
+  }),
+  colHelper.display({
+    id: 'tps',
+    header: 'TPS',
+    size: 48,
+    cell: TPSCellRenderer,
+    enableSorting: true,
+  }),
+  colHelper.display({
+    id: 'trend',
+    header: 'Trend',
+    size: 96,
+    cell: TrendCellRenderer,
+    enableSorting: true,
+  }),
+]
+
+// 📖 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
+  const sorted = column.getIsSorted()
+  if (!sorted) return <span className={styles.sortIcon}>⇅</span>
+  return <span className={styles.sortIconActive}>{sorted === 'asc' ? '↑' : '↓'}</span>
+}
+
+// ─── Main component ───────────────────────────────────────────────────────────
+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 !== Infinity)
+    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])
 
-  const top3Arr = useMemo(() => {
-    const online = filtered.filter(m => m.status === 'up' && m.avg !== Infinity)
-    return [...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]
+  )
 
-  if (filtered.length === 0) {
+  // 📖 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>
-          <tr>
-            <th className={styles.th}>#</th>
-            <th className={styles.th}>Tier</th>
-            <th className={styles.th}>Model</th>
-            <th className={styles.th}>Provider</th>
-            <th className={styles.th}>SWE %</th>
-            <th className={styles.th}>Ctx</th>
-            <th className={styles.th}>Ping</th>
-            <th className={styles.th}>Avg</th>
-            <th className={styles.th}>Stability</th>
-            <th className={styles.th}>Verdict</th>
-            <th className={styles.th}>Uptime</th>
-            <th className={styles.th}>Trend</th>
-          </tr>
+          {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={{ width: sizePx, minWidth: sizePx, maxWidth: sizePx, cursor: canSort ? 'pointer' : 'default' }}
+                    title={`Sort ${col.columnDef.header}: asc → desc → reset`}
+                  >
+                    <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>
+                )
+              })}
+            </tr>
+          ))}
         </thead>
         <tbody>
-          {filtered.map((m, i) => {
-            const rankIdx = top3Arr.indexOf(m.modelId)
-            const medal = rankIdx === 0 ? '🥇' : rankIdx === 1 ? '🥈' : rankIdx === 2 ? '🥉' : ''
-            const rowCls = rankIdx >= 0 ? styles[`rank${rankIdx + 1}`] : ''
+          {rows.map((row, i) => {
+            const m = row.original
+            const rankIdx = [...top3Ids].indexOf(m.modelId)
+            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.
+            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={m.modelId} className={rowCls} onClick={() => onSelectModel(m)}>
-                <td className={styles.tdRank}>{medal || (i + 1)}</td>
-                <td><TierBadge tier={m.tier} /></td>
-                <td>
-                  <div className={styles.modelCell}>
-                    <StatusDot status={m.status} />
-                    <span className={styles.modelName}>{m.label}</span>
-                    {!m.hasApiKey && !m.cliOnly && <span className={styles.noKey}>🔑 NO KEY</span>}
-                    <div className={styles.modelId}>{m.modelId}</div>
-                  </div>
-                </td>
-                <td><span className={styles.providerPill}>{m.origin}</span></td>
-                <td className={`${styles.swe} ${styles[sweClass(m.sweScore)]}`}>{m.sweScore || '—'}</td>
-                <td className={styles.ctx}>{m.ctx || '—'}</td>
-                <td className={`${styles.ping} ${styles[pingClass(m.latestPing)]}`}>
-                  {m.latestPing == null ? '—' : m.latestCode === '429' ? '429' : m.latestCode === '000' ? 'TIMEOUT' : `${m.latestPing}ms`}
-                </td>
-                <td className={`${styles.ping} ${styles[pingClass(m.avg)]}`}>
-                  {m.avg == null || m.avg === Infinity || m.avg > 99000 ? '—' : `${m.avg}ms`}
-                </td>
-                <td><StabilityCell score={m.stability} /></td>
-                <td><VerdictBadge verdict={m.verdict} httpCode={m.httpCode} /></td>
-                <td className={styles.uptime}>{m.uptime > 0 ? `${m.uptime}%` : '—'}</td>
-                <td><Sparkline history={m.pingHistory} /></td>
+              <tr
+                key={row.id}
+                className={rowClasses.join(' ')}
+                onClick={() => onSelectModel(row.original)}
+              >
+                {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>
             )
           })}
@@ -83,4 +529,4 @@ export default function ModelTable({ filtered, onSelectModel }) {
       </table>
     </div>
   )
-}
+}