free-coding-models 0.5.0 → 0.5.1

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

@@ -1,29 +1,264 @@
 /**
  * @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: ❔(mood) | # | Tier | SWE% | Ctx | Model | Provider | Last Ping | Avg | Health | Verdict | Stability | Up% | AI Lat. | TPS | Trend
+ * 📖 Clickable headers for sorting, medal rankings for top 3, horizontal scroll.
+ * 📖 Sorting is handled by useFilter hook which pushes null/Infinity values to bottom.
  */
 import { useMemo } from 'react'
+import {
+  useReactTable,
+  getCoreRowModel,
+  flexRender,
+  createColumnHelper,
+} from '@tanstack/react-table'
+
+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 { pingClass } from '../../utils/format.js'
 import { sweClass } from '../../utils/ranks.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
+  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>}
+        </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 }) {
+  return <span className={styles.providerPill}>{row.original.origin}</span>
+}
+
+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
+  return <AILatencyCell result={m.benchmark || null} isRunning={Boolean(m.isBenchmarking)} />
+}
+
+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 ──────────────────────────────────────────────────────
+const columns = [
+  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',
+    size: 110,
+    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,
+  }),
+]
+
+// ─── 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, sortColumn, sortDirection, onSort }) {
+  // 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])
+  // TanStack Table — no getSortedRowModel, sorting lives in useFilter
+  const table = useReactTable({
+    data: filtered,
+    columns,
+    defaultColumn: { enableSorting: true },
+    getCoreRowModel: getCoreRowModel(),
+  })
 
-  if (filtered.length === 0) {
+  const rows = table.getRowModel().rows
+
+  if (rows.length === 0) {
     return <div className={styles.empty}>No models match your filters</div>
   }
 
@@ -31,51 +266,57 @@ export default function ModelTable({ filtered, onSelectModel }) {
     <div className={styles.container}>
       <table className={styles.table}>
         <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)
+                return (
+                  <th
+                    key={header.id}
+                    className={styles.th}
+                    onClick={canSort ? () => onSort(header.id) : undefined}
+                    style={{ 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' ? '↑' : '↓')
+                          : '⇅'}
+                      </span>
+                    )}
+                  </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 rowClass = rankIdx >= 0 ? 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}` : ''
             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={`${rowClass}${benchRowClass}`}
+                onClick={() => onSelectModel(row.original)}
+              >
+                {row.getVisibleCells().map(cell => (
+                  <td key={cell.id} className={styles.td}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                ))}
               </tr>
             )
           })}
@@ -83,4 +324,4 @@ export default function ModelTable({ filtered, onSelectModel }) {
       </table>
     </div>
   )
-}
+}

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

@@ -1,46 +1,144 @@
+/**
+ * @file web/src/components/dashboard/ModelTable.module.css
+ * @description Styles for ModelTable with TanStack Table — full horizontal scroll.
+ */
 .container {
   background: var(--color-bg-card);
-  backdrop-filter: blur(12px) saturate(1.5);
-  -webkit-backdrop-filter: blur(12px) saturate(1.5);
-  border: 1px solid var(--color-border);
-  border-radius: 16px;
-  overflow: hidden;
-  margin: 16px 0;
-}
-.table { width: 100%; border-collapse: collapse; font-size: 13px; }
+  border: 1px solid var(--color-border-hover);
+  border-radius: var(--radius-lg);
+  margin: 16px;
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.table {
+  width: 100%;
+  min-width: 1200px;
+  border-collapse: collapse;
+  font-size: 12px;
+  border: 1px solid var(--color-border-hover);
+}
+
+/* ─── Header ─── */
 .th {
-  padding: 12px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase;
-  letter-spacing: 0.8px; color: var(--color-text-muted); background: var(--color-bg-elevated);
-  border-bottom: 1px solid var(--color-border); white-space: nowrap; user-select: none; cursor: default;
+  padding: 9px 8px;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--color-text-muted);
+  background: var(--color-bg-elevated);
+  border-bottom: 1px solid var(--color-border-hover);
+  border-right: 1px solid var(--color-border);
+  white-space: nowrap;
+  user-select: none;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  text-align: center;
+}
+.th:last-child { border-right: 0; }
+.th:hover { color: var(--color-accent); background: var(--color-bg-active); }
+
+/* Center certain columns */
+.th:nth-child(6) { text-align: left; }   /* Model */
+.th:nth-child(7) { text-align: left; }   /* Provider */
+.th:nth-child(11) { text-align: left; } /* Verdict */
+
+/* Sort icons */
+.sortIcon   { opacity: 0.3; margin-left: 3px; font-size: 9px; }
+.sortIconActive { color: var(--color-accent); margin-left: 3px; font-size: 10px; font-weight: 800; }
+
+/* ─── Data cells ─── */
+.td {
+  padding: 7px 8px;
+  border-bottom: 1px solid var(--color-border);
+  border-right: 1px solid var(--color-border);
+  white-space: nowrap;
+}
+.td:last-child { border-right: 0; }
+.td:nth-child(6) { text-align: left; }   /* Model */
+.td:nth-child(7) { text-align: left; }   /* Provider */
+.td:nth-child(11) { text-align: left; } /* Verdict */
+
+/* ─── Row hover ─── */
+.table tbody tr {
+  cursor: pointer;
+  transition: background 100ms;
 }
-.th:hover { color: var(--color-accent); }
-.table td { padding: 10px 14px; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
-.table tbody tr { cursor: pointer; transition: background 150ms; }
 .table tbody tr:hover { background: var(--color-bg-hover); }
-.tdRank { text-align: center; font-family: var(--font-mono); font-weight: 600; color: var(--color-text-dim); }
+
+/* ─── Medal rows ─── */
 .rank1 td:first-child { border-left: 3px solid #ffd700; }
 .rank2 td:first-child { border-left: 3px solid #c0c0c0; }
 .rank3 td:first-child { border-left: 3px solid #cd7f32; }
-.modelCell { display: flex; flex-direction: column; }
-.modelName { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 4px; }
-.modelId { font-family: var(--font-mono); font-size: 10px; color: var(--color-text-dim); margin-top: 1px; }
-.noKey {
-  font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 3px;
-  background: rgba(255,170,0,0.12); color: #ffaa00; border: 1px solid rgba(255,170,0,0.2); margin-left: 6px;
-}
-.providerPill {
-  display: inline-block; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px;
-  background: var(--color-accent-dim); color: var(--color-text-muted); border: 1px solid var(--color-border);
+
+/* ─── Shared cell values ─── */
+.rankNum {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--color-text-dim);
+  text-align: center;
+  display: block;
 }
+
 .swe { font-family: var(--font-mono); font-weight: 600; }
 .sweHigh { color: #ffd700; }
-.sweMid { color: #3ddc84; }
-.sweLow { color: var(--color-text-dim); }
-.ctx { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-muted); }
+.sweMid  { color: #3ddc84; }
+.sweLow  { color: var(--color-text-dim); }
+
+.ctx { font-family: var(--font-mono); font-size: 11px; }
+
 .ping { font-family: var(--font-mono); font-weight: 600; }
-.pingFast { color: #00ff88; }
+.pingFast   { color: #00ff88; }
 .pingMedium { color: #ffaa00; }
-.pingSlow { color: #ff4444; }
-.pingNone { color: var(--color-text-dim); }
-.uptime { font-family: var(--font-mono); font-size: 12px; }
-.empty { text-align: center; padding: 60px 0; color: var(--color-text-muted); }
+.pingSlow   { color: #ff4444; }
+.pingNone   { color: var(--color-text-dim); }
+
+.uptime { font-family: var(--font-mono); font-size: 11px; }
+
+/* ─── Model cell ─── */
+.modelCell    { display: flex; align-items: center; gap: 6px; overflow: hidden; }
+.modelMeta    { flex: 1; min-width: 0; }
+.modelHeader  { display: flex; align-items: center; gap: 4px; }
+.modelName    { font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.modelId      { font-family: var(--font-mono); font-size: 9px; color: var(--color-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.noKey {
+  font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: 3px; flex-shrink: 0;
+  background: rgba(255,170,0,0.12); color: #ffaa00; border: 1px solid rgba(255,170,0,0.2);
+}
+
+/* ─── Provider pill ─── */
+.providerPill {
+  display: inline-block; font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 999px;
+  background: var(--color-accent-dim); color: var(--color-text-muted);
+  border: 1px solid var(--color-border); white-space: nowrap;
+}
+
+/* ─── Benchmarking row highlight ── */
+@keyframes benchRowPulse {
+  0%, 100% { background: rgba(180, 0, 255, 0.04); }
+  50%       { background: rgba(180, 0, 255, 0.10); }
+}
+.benchRow {
+  animation: benchRowPulse 1.2s ease-in-out infinite;
+}
+
+/* ─── Empty state ─── */
+:global([data-theme="light"]) .container {
+  border-color: #cfcfcf;
+}
+
+:global([data-theme="light"]) .table {
+  border-color: #cfcfcf;
+}
+
+:global([data-theme="light"]) .th,
+:global([data-theme="light"]) .td {
+  border-color: #d8d8d8;
+}
+
+.empty { text-align: center; padding: 60px 0; color: var(--color-text-muted); }

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

@@ -3,6 +3,7 @@
  * @description Stats cards row showing total models, online count, avg latency, fastest model, providers.
  */
 import { useMemo } from 'react'
+import { IconServer, IconCircleCheck, IconBolt, IconTrophy, IconGlobe } from '@tabler/icons-react'
 import styles from './StatsBar.module.css'
 
 export default function StatsBar({ models }) {
@@ -16,11 +17,11 @@ export default function StatsBar({ models }) {
     const fastest = [...onlineWithPing].sort((a, b) => a.avg - b.avg)[0]
     const providers = new Set(models.map(m => m.providerKey)).size
     return [
-      { icon: '📊', value: total, label: 'Total Models' },
-      { icon: '🟢', value: online, label: 'Online' },
-      { icon: '⚡', value: avgLatency != null ? `${avgLatency}ms` : '—', label: 'Avg Latency' },
-      { icon: '🏆', value: fastest ? fastest.label : '—', label: 'Fastest Model' },
-      { icon: '🌐', value: providers, label: 'Providers' },
+      { icon: <IconServer size={20} stroke={1.5} />, value: total, label: 'Total Models' },
+      { icon: <IconCircleCheck size={20} stroke={1.5} />, value: online, label: 'Online' },
+      { icon: <IconBolt size={20} stroke={1.5} />, value: avgLatency != null ? `${avgLatency}ms` : '—', label: 'Avg Latency' },
+      { icon: <IconTrophy size={20} stroke={1.5} />, value: fastest ? fastest.label : '—', label: 'Fastest Model' },
+      { icon: <IconGlobe size={20} stroke={1.5} />, value: providers, label: 'Providers' },
     ]
   }, [models])
 
@@ -38,3 +39,4 @@ export default function StatsBar({ models }) {
     </section>
   )
 }
+

package/web/src/components/layout/Footer.jsx

@@ -8,7 +8,7 @@ export default function Footer() {
   return (
     <footer className={styles.footer}>
       <div className={styles.left}>
-        Made with ❤️ by <a href="https://vavanessa.dev" target="_blank" rel="noopener">Vava-Nessa</a>
+        by <a href="https://vavanessa.dev" target="_blank" rel="noopener">Vava-Nessa</a>
       </div>
       <div className={styles.right}>
         <a href="https://github.com/vava-nessa/free-coding-models" target="_blank" rel="noopener">GitHub</a>

package/web/src/components/layout/Header.jsx

@@ -1,22 +1,32 @@
 /**
  * @file web/src/components/layout/Header.jsx
- * @description Top header bar with search, export button, settings shortcut, and theme toggle.
+ * @description Top header bar with search, AI Latency benchmark button, export, settings, and theme toggle.
+ * 📖 AI Latency button benchmarks the models currently visible after filters/search.
  */
+import { IconBolt, IconSearch, IconDownload, IconSettings, IconMoon, IconSun, IconPlayerPlay } from '@tabler/icons-react'
 import styles from './Header.module.css'
 
-export default function Header({ searchQuery, onSearchChange, onToggleTheme, onOpenSettings, onOpenExport }) {
+export default function Header({
+  searchQuery, onSearchChange,
+  onToggleTheme, onOpenSettings, onOpenExport,
+  onBenchmark, benchmarkRunning, benchmarkTotal, benchmarkCompleted, modelsCount, theme,
+}) {
   return (
     <header className={styles.header}>
       <div className={styles.left}>
         <div className={styles.logo}>
-          <span className={styles.logoIcon}>⚡</span>
-          <span className={styles.logoText}>free-coding-models</span>
+          <span className={styles.logoIcon}>&gt;</span>
+          <span className={styles.logoText}>
+            <span className={styles.logoTextHighlight}>free</span>
+            <span>-coding-models</span>
+            <span className={styles.logoTextHighlight}>_</span>
+          </span>
         </div>
         <span className={styles.version}>v{__APP_VERSION__}</span>
       </div>
       <div className={styles.center}>
         <div className={styles.searchBar}>
-          <span className={styles.searchIcon}>🔍</span>
+          <span className={styles.searchIcon}><IconSearch size={16} stroke={1.5} /></span>
           <input
             type="text"
             className={styles.searchInput}
@@ -29,10 +39,34 @@ export default function Header({ searchQuery, onSearchChange, onToggleTheme, onO
         </div>
       </div>
       <div className={styles.right}>
-        <button className={styles.iconBtn} onClick={onToggleTheme} title="Toggle theme">☽</button>
-        <button className={styles.iconBtn} onClick={onOpenExport} title="Export Data">↓</button>
-        <button className={styles.primaryBtn} onClick={onOpenSettings}>⚙ Settings</button>
+        {/* AI Latency Benchmark — always visible, shows model count when idle */}
+        <button
+          className={`${styles.benchmarkBtn} ${benchmarkRunning ? styles.benchmarkActive : ''}`}
+          onClick={onBenchmark}
+          disabled={benchmarkRunning}
+          title={benchmarkRunning ? `AI Speed Test running — ${benchmarkCompleted}/${benchmarkTotal}` : `Run AI Latency benchmark on ${modelsCount} visible models`}
+        >
+          <IconPlayerPlay size={14} stroke={1.5} />
+          {benchmarkRunning ? (
+            <span className={styles.benchmarkRunning}>
+              <span className={styles.spinner} />
+              RUN {benchmarkCompleted}/{benchmarkTotal}
+            </span>
+          ) : (
+            <span>AI Latency</span>
+          )}
+        </button>
+
+        <button className={styles.iconBtn} onClick={onToggleTheme} title="Toggle theme">
+          {theme === 'light' ? <IconMoon size={16} stroke={1.5} /> : <IconSun size={16} stroke={1.5} />}
+        </button>
+        <button className={styles.iconBtn} onClick={onOpenExport} title="Export Data">
+          <IconDownload size={16} stroke={1.5} />
+        </button>
+        <button className={styles.primaryBtn} onClick={onOpenSettings}>
+          <IconSettings size={16} stroke={1.5} /> Settings
+        </button>
       </div>
     </header>
   )
-}
+}