free-coding-models 0.5.0 → 0.5.1

package/web/src/components/layout/Header.module.css

@@ -18,11 +18,22 @@
 .right { display: flex; align-items: center; gap: 10px; }
 
 .logo { display: flex; align-items: center; gap: 8px; }
-.logoIcon { font-size: 22px; }
+.logoIcon {
+  color: var(--color-brand);
+  font-family: var(--font-mono);
+  font-size: 22px;
+  font-weight: 900;
+  display: flex;
+  align-items: center;
+}
 .logoText {
   font-size: 16px; font-weight: 700;
-  background: linear-gradient(135deg, var(--color-accent), #06b6d4);
-  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+  color: var(--color-text);
+  display: flex;
+  align-items: center;
+}
+.logoTextHighlight {
+  color: var(--color-brand);
 }
 .version {
   font-size: 11px; font-weight: 500; font-family: var(--font-mono);
@@ -63,11 +74,34 @@
   display: inline-flex; align-items: center; gap: 6px;
   padding: 6px 14px; font-size: 13px; font-weight: 600;
   border: 1px solid var(--color-accent); border-radius: 6px;
-  background: var(--color-accent); color: #000; cursor: pointer;
+  background: var(--color-accent); color: var(--color-bg); cursor: pointer;
   font-family: var(--font-sans); transition: all 150ms;
 }
 .primaryBtn:hover { background: var(--color-accent-hover); }
 
+.benchmarkBtn {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 6px 14px; font-size: 12px; font-weight: 700;
+  border: 1px solid var(--color-border); border-radius: 6px;
+  background: var(--color-surface); color: var(--color-text);
+  cursor: pointer; font-family: var(--font-mono); transition: all 150ms;
+}
+.benchmarkBtn:hover {
+  border-color: #00ff88; color: #00ff88; background: rgba(0, 255, 136, 0.08);
+}
+.benchmarkActive {
+  border-color: #00ff88 !important; color: #00ff88 !important;
+  background: rgba(0, 255, 136, 0.12) !important;
+  cursor: not-allowed;
+}
+.benchmarkRunning { display: inline-flex; align-items: center; gap: 6px; }
+@keyframes spin { to { transform: rotate(360deg); } }
+.spinner {
+  display: inline-block; width: 10px; height: 10px;
+  border: 2px solid rgba(0, 255, 136, 0.3); border-top-color: #00ff88;
+  border-radius: 50%; animation: spin 0.8s linear infinite; flex-shrink: 0;
+}
+
 @media (max-width: 768px) {
   .center { display: none; }
 }

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

@@ -2,24 +2,29 @@
  * @file web/src/components/layout/Sidebar.jsx
  * @description Collapsible sidebar navigation with Dashboard / Settings / Analytics links + theme toggle.
  */
+import { IconBolt, IconLayoutDashboard, IconSettings, IconActivity, IconGlobe, IconMoon, IconSun } from '@tabler/icons-react'
 import styles from './Sidebar.module.css'
 
-const NAV_ITEMS = [
-  { id: 'dashboard', icon: '▤', label: 'Dashboard' },
-  { id: 'settings', icon: '⚙', label: 'Settings' },
-  { id: 'analytics', icon: '▌▌', label: 'Analytics' },
-  { id: 'map', icon: '🌍', label: 'Map' },
-]
+export default function Sidebar({ currentView, onNavigate, onToggleTheme, theme }) {
+  const navItems = [
+    { id: 'dashboard', icon: <IconLayoutDashboard size={20} stroke={1.5} />, label: 'Dashboard' },
+    { id: 'settings', icon: <IconSettings size={20} stroke={1.5} />, label: 'Settings' },
+    { id: 'analytics', icon: <IconActivity size={20} stroke={1.5} />, label: 'Analytics' },
+    { id: 'map', icon: <IconGlobe size={20} stroke={1.5} />, label: 'Map' },
+  ]
 
-export default function Sidebar({ currentView, onNavigate, onToggleTheme }) {
   return (
     <aside className={styles.sidebar}>
       <div className={styles.logo}>
-        <span className={styles.logoIcon}>⚡</span>
-        <span className={styles.logoText}>FCM</span>
+        <span className={styles.logoIcon}>&gt;</span>
+        <span className={styles.logoText}>
+          <span className={styles.logoTextHighlight}>F</span>
+          <span>CM</span>
+          <span className={styles.logoTextHighlight}>_</span>
+        </span>
       </div>
       <nav className={styles.nav}>
-        {NAV_ITEMS.map(({ id, icon, label }) => (
+        {navItems.map(({ id, icon, label }) => (
           <button
             key={id}
             className={`${styles.navItem} ${currentView === id ? styles.active : ''}`}
@@ -33,10 +38,13 @@ export default function Sidebar({ currentView, onNavigate, onToggleTheme }) {
       </nav>
       <div className={styles.bottom}>
         <button className={styles.navItem} onClick={onToggleTheme} title="Toggle Theme">
-          <span className={styles.navIcon}>☽</span>
+          <span className={styles.navIcon}>
+            {theme === 'light' ? <IconMoon size={20} stroke={1.5} /> : <IconSun size={20} stroke={1.5} />}
+          </span>
           <span className={styles.navLabel}>Theme</span>
         </button>
       </div>
     </aside>
   )
 }
+

package/web/src/components/layout/Sidebar.module.css

@@ -22,16 +22,26 @@
   white-space: nowrap;
   overflow: hidden;
 }
-.logoIcon { font-size: 24px; flex-shrink: 0; }
+.logoIcon {
+  color: var(--color-brand);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  font-family: var(--font-mono);
+  font-size: 24px;
+  font-weight: 900;
+}
 .logoText {
   font-size: 16px;
   font-weight: 800;
-  background: linear-gradient(135deg, var(--color-accent), #06b6d4);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+  color: var(--color-text);
   opacity: 0;
   transition: opacity 250ms cubic-bezier(0.16, 1, 0.3, 1);
+  display: flex;
+  align-items: center;
+}
+.logoTextHighlight {
+  color: var(--color-brand);
 }
 .sidebar:hover .logoText { opacity: 1; }
 

package/web/src/components/settings/SettingsView.jsx

@@ -6,6 +6,7 @@
  * @functions SettingsView → main settings page component
  */
 import { useState, useEffect, useCallback } from 'react'
+import { IconSettings, IconPlug, IconCircleCheck, IconKey, IconEye, IconEyeOff, IconCopy, IconTrash } from '@tabler/icons-react'
 import styles from './SettingsView.module.css'
 import { maskKey } from '../../utils/format.js'
 
@@ -160,7 +161,10 @@ export default function SettingsView({ onToast }) {
   return (
     <div className={styles.page}>
       <div className={styles.pageHeader}>
-        <h1 className={styles.pageTitle}>⚙️ Provider Settings</h1>
+        <h1 className={styles.pageTitle}>
+          <IconSettings size={24} stroke={1.5} style={{ marginRight: 8, verticalAlign: 'middle' }} />
+          Provider Settings
+        </h1>
         <p className={styles.pageSubtitle}>
           Manage your API keys and provider configurations. Keys are stored locally in{' '}
           <code>~/.free-coding-models.json</code>
@@ -194,13 +198,23 @@ export default function SettingsView({ onToast }) {
           return (
             <div key={key} className={`${styles.card} ${isExpanded ? styles.cardExpanded : ''}`}>
               <div className={styles.cardHeader} onClick={() => toggleCard(key)}>
-                <div className={styles.cardIcon}>🔌</div>
+                <div className={styles.cardIcon}>
+                  <IconPlug size={20} stroke={1.5} />
+                </div>
                 <div className={styles.cardInfo}>
                   <div className={styles.cardName}>{p.name}</div>
                   <div className={styles.cardMeta}>{p.modelCount} models · {key}</div>
                 </div>
                 <span className={`${styles.cardStatus} ${p.hasKey ? styles.statusConfigured : styles.statusMissing}`}>
-                  {p.hasKey ? '✅ Active' : '🔑 No Key'}
+                  {p.hasKey ? (
+                    <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                      <IconCircleCheck size={14} stroke={1.5} /> Active
+                    </span>
+                  ) : (
+                    <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                      <IconKey size={14} stroke={1.5} /> No Key
+                    </span>
+                  )}
                 </span>
                 <span className={`${styles.toggleIcon} ${isExpanded ? styles.toggleIconExpanded : ''}`}>▼</span>
               </div>
@@ -216,10 +230,14 @@ export default function SettingsView({ onToast }) {
                         </span>
                         <div className={styles.keyDisplayActions}>
                           <button className={styles.actionBtn} onClick={() => toggleRevealKey(key)} title={isRevealed ? 'Hide' : 'Reveal'}>
-                            {isRevealed ? '🙈' : '👁️'}
+                            {isRevealed ? <IconEyeOff size={14} stroke={1.5} /> : <IconEye size={14} stroke={1.5} />}
+                          </button>
+                          <button className={styles.actionBtn} onClick={() => copyKey(key)} title="Copy">
+                            <IconCopy size={14} stroke={1.5} />
+                          </button>
+                          <button className={`${styles.actionBtn} ${styles.actionBtnDanger}`} onClick={() => deleteKey(key)} title="Delete Key">
+                            <IconTrash size={14} stroke={1.5} />
                           </button>
-                          <button className={styles.actionBtn} onClick={() => copyKey(key)} title="Copy">📋</button>
-                          <button className={`${styles.actionBtn} ${styles.actionBtnDanger}`} onClick={() => deleteKey(key)} title="Delete Key">🗑️</button>
                         </div>
                       </div>
                     </div>

package/web/src/components/settings/SettingsView.module.css

@@ -1,6 +1,5 @@
 .page {
   padding: 24px;
-  max-width: 900px;
 }
 
 .pageHeader {

package/web/src/global.css

@@ -8,23 +8,24 @@
 
 /* ─── CSS Custom Properties (Design Tokens) ─── */
 :root {
-  --color-bg:           #0a0a0f;
-  --color-bg-elevated:  #12121a;
-  --color-bg-card:      rgba(18, 18, 30, 0.7);
-  --color-bg-hover:     rgba(30, 30, 50, 0.8);
-  --color-bg-active:    rgba(40, 40, 65, 0.9);
-  --color-surface:      #1a1a2e;
-  --color-border:       rgba(255, 255, 255, 0.06);
-  --color-border-hover: rgba(255, 255, 255, 0.12);
-
-  --color-text:         #e8e8f0;
-  --color-text-muted:   #8888a8;
-  --color-text-dim:     #555570;
-
-  --color-accent:       #76b900;
-  --color-accent-hover: #8ad100;
-  --color-accent-glow:  rgba(118, 185, 0, 0.25);
-  --color-accent-dim:   rgba(118, 185, 0, 0.08);
+  --color-brand:        #76b900;
+  --color-bg:           #000000;
+  --color-bg-elevated:  #0a0a0a;
+  --color-bg-card:      #0a0a0a;
+  --color-bg-hover:     #161616;
+  --color-bg-active:    #222222;
+  --color-surface:      #111111;
+  --color-border:       #262626;
+  --color-border-hover: #404040;
+
+  --color-text:         #ffffff;
+  --color-text-muted:   #888888;
+  --color-text-dim:     #444444;
+
+  --color-accent:       #ffffff;
+  --color-accent-hover: #eaeaea;
+  --color-accent-glow:  rgba(255, 255, 255, 0.1);
+  --color-accent-dim:   rgba(255, 255, 255, 0.05);
 
   --color-danger:       #ff4444;
   --color-danger-dim:   rgba(255, 68, 68, 0.1);
@@ -60,15 +61,15 @@
   --header-h: 60px;
   --sidebar-w: 64px;
   --sidebar-w-expanded: 200px;
-  --radius-sm: 6px;
-  --radius-md: 10px;
-  --radius-lg: 16px;
-  --radius-xl: 20px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 8px;
 
-  --shadow-sm:   0 1px 3px rgba(0,0,0,0.3);
-  --shadow-md:   0 4px 12px rgba(0,0,0,0.4);
-  --shadow-lg:   0 8px 32px rgba(0,0,0,0.5);
-  --shadow-glow: 0 0 30px var(--color-accent-glow);
+  --shadow-sm:   none;
+  --shadow-md:   none;
+  --shadow-lg:   none;
+  --shadow-glow: none;
 
   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --transition-fast: 150ms var(--ease-out);
@@ -78,26 +79,28 @@
 
 /* ─── Light Theme ─── */
 [data-theme="light"] {
-  --color-bg:           #f5f5fa;
+  --color-bg:           #ffffff;
   --color-bg-elevated:  #ffffff;
-  --color-bg-card:      rgba(255, 255, 255, 0.85);
-  --color-bg-hover:     rgba(240, 240, 248, 0.9);
-  --color-bg-active:    rgba(230, 230, 242, 0.95);
-  --color-surface:      #eeeef4;
-  --color-border:       rgba(0, 0, 0, 0.08);
-  --color-border-hover: rgba(0, 0, 0, 0.15);
-  --color-text:         #1a1a2e;
-  --color-text-muted:   #666688;
-  --color-text-dim:     #9999aa;
-  --color-accent-glow:  rgba(118, 185, 0, 0.15);
-  --color-accent-dim:   rgba(118, 185, 0, 0.05);
+  --color-bg-card:      #ffffff;
+  --color-bg-hover:     #fafafa;
+  --color-bg-active:    #f0f0f0;
+  --color-surface:      #fafafa;
+  --color-border:       #eaeaea;
+  --color-border-hover: #d5d5d5;
+  --color-text:         #000000;
+  --color-text-muted:   #666666;
+  --color-text-dim:     #999999;
+  --color-accent:       #000000;
+  --color-accent-hover: #333333;
+  --color-accent-glow:  rgba(0, 0, 0, 0.05);
+  --color-accent-dim:   rgba(0, 0, 0, 0.02);
   --color-danger-dim:   rgba(255, 68, 68, 0.08);
   --color-warning-dim:  rgba(255, 170, 0, 0.08);
   --color-success-dim:  rgba(0, 255, 136, 0.08);
   --color-info-dim:     rgba(6, 182, 212, 0.08);
-  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
-  --shadow-md:   0 4px 12px rgba(0,0,0,0.1);
-  --shadow-lg:   0 8px 32px rgba(0,0,0,0.12);
+  --shadow-sm:   none;
+  --shadow-md:   none;
+  --shadow-lg:   none;
 }
 
 /* ─── Reset & Base ─── */
@@ -126,41 +129,13 @@ code { font-family: var(--font-mono); font-size: 12px; background: var(--color-s
 
 /* ─── Background Effects ─── */
 .bg-grid {
-  position: fixed; inset: 0; z-index: 0; pointer-events: none;
-  background-image:
-    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
-  background-size: 60px 60px;
+  display: none;
 }
 
 .bg-glow {
-  position: fixed; z-index: 0; pointer-events: none;
-  border-radius: 50%;
-  filter: blur(120px);
-  opacity: 0.3;
-  animation: float 20s ease-in-out infinite;
-}
-.bg-glow--1 {
-  width: 600px; height: 600px;
-  background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%);
-  top: -200px; left: -200px;
-}
-.bg-glow--2 {
-  width: 400px; height: 400px;
-  background: radial-gradient(circle, #6366f1 0%, transparent 70%);
-  top: 50%; right: -150px; animation-delay: -7s;
-}
-.bg-glow--3 {
-  width: 500px; height: 500px;
-  background: radial-gradient(circle, #06b6d4 0%, transparent 70%);
-  bottom: -200px; left: 30%; animation-delay: -14s;
+  display: none;
 }
 
-@keyframes float {
-  0%, 100% { transform: translate(0, 0) scale(1); }
-  33% { transform: translate(30px, -30px) scale(1.05); }
-  66% { transform: translate(-20px, 20px) scale(0.95); }
-}
 
 [data-theme="light"] .bg-glow { opacity: 0.12; }
 [data-theme="light"] .bg-grid {
@@ -188,12 +163,34 @@ code { font-family: var(--font-mono); font-size: 12px; background: var(--color-s
 }
 
 /* ─── Scrollbar ─── */
-::-webkit-scrollbar { width: 6px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: var(--color-bg); }
+::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
 ::-webkit-scrollbar-thumb:hover { background: var(--color-text-dim); }
+::-webkit-scrollbar-corner { background: var(--color-bg); }
 
 /* ─── Responsive ─── */
 @media (max-width: 768px) {
   .app-content { margin-left: 0; }
 }
+
+/* ─── Full-page horizontal/vertical scroll layout ─── */
+.app-content {
+  flex: 1;
+  margin-left: var(--sidebar-w);
+  position: relative;
+  z-index: 1;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: auto; /* allow scrolling in both directions */
+  transition: margin-left var(--transition-medium);
+}
+
+.view {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden; /* let inner components scroll */
+  min-height: 0;
+}

package/web/src/hooks/useFilter.js

@@ -1,13 +1,69 @@
 /**
  * @file web/src/hooks/useFilter.js
- * @description React hook for model filtering and sorting state.
- * 📖 Manages tier/status/provider/text filters + sort column/direction.
- * → useFilter
+ * @description React hook for model filtering and tri-state sorting state.
+ *
+ * 📖 Manages tier/status/provider/text filters plus table sorting. Every visible
+ * dashboard column can cycle through: ascending → descending → reset. Reset
+ * returns the filtered list to catalog/rank order, which is the least surprising
+ * neutral state after users have explored a sorted column.
+ *
+ * Supports all CLI/Web columns: mood, idx, tier, sweScore, ctx, label, origin,
+ * latestPing, avg, condition, verdict, stability, uptime, aiLatency, tps, trend.
+ *
+ * @functions
+ *   → useFilter(models) — filter + sort state for the dashboard table
+ * @exports useFilter
  */
 import { useState, useMemo, useCallback } from 'react'
 import { tierRank, verdictRank, parseSwe } from '../utils/ranks.js'
 import { formatCtx } from '../utils/format.js'
 
+function rankOrder(model) {
+  return model.idx ?? 9999
+}
+
+function pingHistory(model) {
+  return model.pingHistory || model.pings || []
+}
+
+function latestPingMs(model) {
+  const hist = pingHistory(model)
+  const latest = hist.length > 0 ? hist[hist.length - 1] : null
+  return latest?.ms ?? null
+}
+
+function trendDelta(model) {
+  const points = pingHistory(model)
+    .map((point) => point?.ms)
+    .filter((ms) => typeof ms === 'number' && Number.isFinite(ms))
+  if (points.length < 2) return null
+  return points[points.length - 1] - points[0]
+}
+
+function numericOrNull(value) {
+  return typeof value === 'number' && Number.isFinite(value) ? value : null
+}
+
+function compareNullableNumber(aValue, bValue, direction) {
+  const aMissing = aValue == null
+  const bMissing = bValue == null
+  if (aMissing && bMissing) return 0
+  if (aMissing) return 1
+  if (bMissing) return -1
+  return (aValue - bValue) * direction
+}
+
+function compareNullableString(aValue, bValue, direction) {
+  const aText = typeof aValue === 'string' ? aValue : ''
+  const bText = typeof bValue === 'string' ? bValue : ''
+  const aMissing = aText.length === 0
+  const bMissing = bText.length === 0
+  if (aMissing && bMissing) return 0
+  if (aMissing) return 1
+  if (bMissing) return -1
+  return aText.localeCompare(bText) * direction
+}
+
 export function useFilter(models) {
   const [filterTier, setFilterTier] = useState('all')
   const [filterStatus, setFilterStatus] = useState('all')
@@ -17,15 +73,21 @@ export function useFilter(models) {
   const [sortDirection, setSortDirection] = useState('asc')
 
   const toggleSort = useCallback((col) => {
-    setSortColumn((prevCol) => {
-      if (prevCol === col) {
-        setSortDirection((prevDir) => (prevDir === 'asc' ? 'desc' : 'asc'))
-      } else {
-        setSortDirection('asc')
-      }
-      return col
-    })
-  }, [])
+    if (sortColumn !== col) {
+      setSortColumn(col)
+      setSortDirection('asc')
+      return
+    }
+
+    if (sortDirection === 'asc') {
+      setSortDirection('desc')
+      return
+    }
+
+    // 📖 Third click resets the column: no active sort, catalog/rank order.
+    setSortColumn(null)
+    setSortDirection('asc')
+  }, [sortColumn, sortDirection])
 
   const filtered = useMemo(() => {
     let result = [...models]
@@ -53,20 +115,50 @@ export function useFilter(models) {
     }
 
     result.sort((a, b) => {
+      if (!sortColumn) return rankOrder(a) - rankOrder(b)
+
+      const direction = sortDirection === 'desc' ? -1 : 1
       let cmp = 0
-      const col = sortColumn
-      if (col === 'idx') cmp = a.idx - b.idx
-      else if (col === 'tier') cmp = tierRank(a.tier) - tierRank(b.tier)
-      else if (col === 'label') cmp = a.label.localeCompare(b.label)
-      else if (col === 'origin') cmp = a.origin.localeCompare(b.origin)
-      else if (col === 'sweScore') cmp = parseSwe(a.sweScore) - parseSwe(b.sweScore)
-      else if (col === 'ctx') cmp = formatCtx(a.ctx) - formatCtx(b.ctx)
-      else if (col === 'latestPing') cmp = (a.latestPing ?? Infinity) - (b.latestPing ?? Infinity)
-      else if (col === 'avg') cmp = (a.avg === Infinity ? 99999 : a.avg) - (b.avg === Infinity ? 99999 : b.avg)
-      else if (col === 'stability') cmp = (a.stability ?? -1) - (b.stability ?? -1)
-      else if (col === 'verdict') cmp = verdictRank(a.verdict) - verdictRank(b.verdict)
-      else if (col === 'uptime') cmp = (a.uptime ?? 0) - (b.uptime ?? 0)
-      return sortDirection === 'asc' ? cmp : -cmp
+
+      if (sortColumn === 'mood') {
+        cmp = compareNullableNumber(verdictRank(a.verdict), verdictRank(b.verdict), direction)
+      } else if (sortColumn === 'idx') {
+        cmp = compareNullableNumber(rankOrder(a), rankOrder(b), direction)
+      } else if (sortColumn === 'tier') {
+        cmp = compareNullableNumber(tierRank(a.tier), tierRank(b.tier), direction)
+      } else if (sortColumn === 'label') {
+        cmp = compareNullableString(a.label, b.label, direction)
+      } else if (sortColumn === 'origin') {
+        cmp = compareNullableString(a.origin, b.origin, direction)
+      } else if (sortColumn === 'sweScore') {
+        cmp = compareNullableNumber(parseSwe(a.sweScore), parseSwe(b.sweScore), direction)
+      } else if (sortColumn === 'ctx') {
+        cmp = compareNullableNumber(formatCtx(a.ctx), formatCtx(b.ctx), direction)
+      } else if (sortColumn === 'latestPing') {
+        cmp = compareNullableNumber(latestPingMs(a), latestPingMs(b), direction)
+      } else if (sortColumn === 'avg') {
+        const aAvg = a.avg == null || a.avg === Infinity || a.avg > 99000 ? null : a.avg
+        const bAvg = b.avg == null || b.avg === Infinity || b.avg > 99000 ? null : b.avg
+        cmp = compareNullableNumber(aAvg, bAvg, direction)
+      } else if (sortColumn === 'condition') {
+        const healthOrder = { up: 0, timeout: 1, down: 2, pending: 3, noauth: 4, auth_error: 5 }
+        cmp = compareNullableNumber(healthOrder[a.status] ?? 9, healthOrder[b.status] ?? 9, direction)
+      } else if (sortColumn === 'verdict') {
+        cmp = compareNullableNumber(verdictRank(a.verdict), verdictRank(b.verdict), direction)
+      } else if (sortColumn === 'stability') {
+        cmp = compareNullableNumber(numericOrNull(a.stability), numericOrNull(b.stability), direction)
+      } else if (sortColumn === 'uptime') {
+        cmp = compareNullableNumber(numericOrNull(a.uptime), numericOrNull(b.uptime), direction)
+      } else if (sortColumn === 'aiLatency') {
+        cmp = compareNullableNumber(a.benchmark?.ok ? a.benchmark.totalMs : null, b.benchmark?.ok ? b.benchmark.totalMs : null, direction)
+      } else if (sortColumn === 'tps') {
+        cmp = compareNullableNumber(a.benchmark?.ok ? a.benchmark.tokensPerSecond ?? 0 : null, b.benchmark?.ok ? b.benchmark.tokensPerSecond ?? 0 : null, direction)
+      } else if (sortColumn === 'trend') {
+        // 📖 Negative delta means latency improved over the visible sparkline; positive means it got slower.
+        cmp = compareNullableNumber(trendDelta(a), trendDelta(b), direction)
+      }
+
+      return cmp || (rankOrder(a) - rankOrder(b))
     })
 
     return result

package/web/src/hooks/useSSE.js

@@ -6,44 +6,68 @@
  */
 import { useState, useEffect, useRef, useCallback } from 'react'
 
+const RECONNECT_DELAY = 2000
+
 export function useSSE(url = '/api/events') {
   const [models, setModels] = useState([])
   const [connected, setConnected] = useState(false)
   const [updateCount, setUpdateCount] = useState(0)
   const esRef = useRef(null)
-  const reconnectTimer = useRef(null)
+  const reconnectRef = useRef(null)
+  const mountedRef = useRef(true)
 
   const connect = useCallback(() => {
-    if (esRef.current) esRef.current.close()
+    if (!mountedRef.current) return
+
+    // Close existing connection
+    if (esRef.current) {
+      esRef.current.close()
+      esRef.current = null
+    }
+
+    clearTimeout(reconnectRef.current)
 
     const es = new EventSource(url)
     esRef.current = es
 
-    es.onopen = () => setConnected(true)
+    es.onopen = () => {
+      if (mountedRef.current) setConnected(true)
+    }
+
     es.onmessage = (event) => {
+      if (!mountedRef.current) return
       try {
         const data = JSON.parse(event.data)
         setModels(data)
-        setUpdateCount((c) => c + 1)
+        setUpdateCount(c => c + 1)
       } catch (e) {
-        console.error('SSE parse error:', e)
+        console.warn('[useSSE] parse error:', e)
       }
     }
+
     es.onerror = () => {
       setConnected(false)
       es.close()
-      clearTimeout(reconnectTimer.current)
-      reconnectTimer.current = setTimeout(connect, 3000)
+      esRef.current = null
+
+      if (mountedRef.current) {
+        reconnectRef.current = setTimeout(() => {
+          if (mountedRef.current) connect()
+        }, RECONNECT_DELAY)
+      }
     }
   }, [url])
 
   useEffect(() => {
+    mountedRef.current = true
     connect()
+
     return () => {
+      mountedRef.current = false
+      clearTimeout(reconnectRef.current)
       esRef.current?.close()
-      clearTimeout(reconnectTimer.current)
     }
   }, [connect])
 
   return { models, connected, updateCount }
-}
+}