free-coding-models 0.4.3 → 0.5.1

package/web/src/App.jsx

@@ -1,19 +1,18 @@
 /**
  * @file web/src/App.jsx
- * @description Root application component — orchestrates all views, layout, SSE connection, and global state.
+ * @description Root application component — orchestrates all views, layout, Socket.IO connection, and global state.
  * 📖 Manages current view (dashboard/settings/analytics), theme toggle, search, filters,
- * selected model for detail panel, export modal, and toast notifications.
- * Uses useSSE for live data, useFilter for model filtering/sorting, useTheme for dark/light.
+ * selected model for detail panel, export modal, toast notifications, ping mode, and benchmark.
+ * Uses useSocket for live data, useFilter for model filtering/sorting, useTheme for dark/light.
  * @functions App → root component with all state and layout composition
  */
 import { useState, useCallback, useEffect } from 'react'
-import { useSSE } from './hooks/useSSE.js'
+import { useSocket } from './hooks/useSocket.js'
 import { useFilter } from './hooks/useFilter.js'
 import { useTheme } from './hooks/useTheme.js'
 import Header from './components/layout/Header.jsx'
 import Sidebar from './components/layout/Sidebar.jsx'
 import Footer from './components/layout/Footer.jsx'
-import StatsBar from './components/dashboard/StatsBar.jsx'
 import FilterBar from './components/dashboard/FilterBar.jsx'
 import ModelTable from './components/dashboard/ModelTable.jsx'
 import DetailPanel from './components/dashboard/DetailPanel.jsx'
@@ -26,7 +25,7 @@ import ToastContainer from './components/atoms/ToastContainer.jsx'
 let toastIdCounter = 0
 
 export default function App() {
-  const { models, connected } = useSSE('/api/events')
+  const { models, connected, nextPingAt, isPinging, pingMode, globalBenchmarkRunning, globalBenchmarkTotal, globalBenchmarkCompleted } = useSocket()
   const { theme, toggle: toggleTheme } = useTheme()
   const [currentView, setCurrentView] = useState('dashboard')
   const [selectedModel, setSelectedModel] = useState(null)
@@ -51,6 +50,27 @@ export default function App() {
     return Object.values(map).sort((a, b) => a.name.localeCompare(b.name))
   })()
 
+  // ── Global AI Speed Benchmark (Ctrl+U equivalent) ──
+  const handleBenchmark = useCallback(async () => {
+    if (globalBenchmarkRunning) {
+      console.warn('[Benchmark] Global benchmark already in progress.')
+      return
+    }
+    try {
+      await fetch('/api/global-benchmark', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        // 📖 Match the user's current table, not the hidden catalog. If filters/search
+        // 📖 hide a model, the benchmark intentionally skips it.
+        body: JSON.stringify({
+          models: filtered.map((model) => ({ providerKey: model.providerKey, modelId: model.modelId })),
+        }),
+      })
+    } catch (err) {
+      console.error('[Benchmark] Failed to start global benchmark:', err.message)
+    }
+  }, [filtered, globalBenchmarkRunning])
+
   const addToast = useCallback((message, type = 'info') => {
     const id = ++toastIdCounter
     setToasts((prev) => [...prev, { id, message, type }])
@@ -60,13 +80,19 @@ export default function App() {
     setToasts((prev) => prev.filter((t) => t.id !== id))
   }, [])
 
-  const handleSelectModel = useCallback((modelId) => {
-    const model = models.find((m) => m.modelId === modelId)
-    if (model) setSelectedModel(model)
-  }, [models])
+  const handleSelectModel = useCallback((model) => {
+    setSelectedModel(model)
+  }, [])
 
   const handleCloseDetail = useCallback(() => setSelectedModel(null), [])
 
+  // ── Ping mode: sync with backend ──
+  const handlePingModeChange = useCallback(async (mode) => {
+    try {
+      await fetch(`/api/ping-mode?action=${mode}`, { method: 'POST' })
+    } catch {}
+  }, [])
+
   useEffect(() => {
     const handler = (e) => {
       if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
@@ -88,6 +114,7 @@ export default function App() {
         currentView={currentView}
         onNavigate={setCurrentView}
         onToggleTheme={toggleTheme}
+        theme={theme}
       />
 
       <div className="app-content">
@@ -99,8 +126,13 @@ export default function App() {
               onToggleTheme={toggleTheme}
               onOpenSettings={() => setCurrentView('settings')}
               onOpenExport={() => setExportOpen(true)}
+              onBenchmark={handleBenchmark}
+              benchmarkRunning={globalBenchmarkRunning}
+              benchmarkTotal={globalBenchmarkTotal}
+              benchmarkCompleted={globalBenchmarkCompleted}
+              modelsCount={filtered.length}
+              theme={theme}
             />
-            <StatsBar models={models} />
             <FilterBar
               filterTier={filterTier}
               setFilterTier={setFilterTier}
@@ -109,10 +141,20 @@ export default function App() {
               filterProvider={filterProvider}
               setFilterProvider={setFilterProvider}
               providers={providers}
+              pingMode={pingMode}
+              setPingMode={handlePingModeChange}
+              nextPingAt={nextPingAt}
+              isPinging={isPinging}
+              globalBenchmarkRunning={globalBenchmarkRunning}
+              globalBenchmarkTotal={globalBenchmarkTotal}
+              globalBenchmarkCompleted={globalBenchmarkCompleted}
             />
             <ModelTable
               filtered={filtered}
               onSelectModel={handleSelectModel}
+              sortColumn={sortColumn}
+              sortDirection={sortDirection}
+              onSort={toggleSort}
             />
           </div>
         )}
@@ -154,4 +196,4 @@ export default function App() {
       <ToastContainer toasts={toasts} dismissToast={dismissToast} />
     </>
   )
-}
+}

package/web/src/components/analytics/AnalyticsView.jsx

@@ -5,6 +5,7 @@
  * @functions AnalyticsView → renders the three analytics cards
  */
 import { useMemo } from 'react'
+import { IconActivity, IconTrophy } from '@tabler/icons-react'
 import TierBadge from '../atoms/TierBadge.jsx'
 import styles from './AnalyticsView.module.css'
 
@@ -40,7 +41,10 @@ export default function AnalyticsView({ models }) {
   return (
     <div className={styles.page}>
       <div className={styles.pageHeader}>
-        <h1 className={styles.pageTitle}>📊 Analytics</h1>
+        <h1 className={styles.pageTitle}>
+          <IconActivity size={24} stroke={1.5} style={{ marginRight: 8, verticalAlign: 'middle' }} />
+          Analytics
+        </h1>
         <p className={styles.pageSubtitle}>Real-time insights across all providers and models</p>
       </div>
 
@@ -69,17 +73,19 @@ export default function AnalyticsView({ models }) {
         </div>
 
         <div className={styles.card}>
-          <h3 className={styles.cardTitle}>🏆 Fastest Models</h3>
+          <h3 className={styles.cardTitle} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+            <IconTrophy size={16} stroke={1.5} />
+            Fastest Models
+          </h3>
           <div className={styles.cardBody}>
             {leaderboard.length === 0 ? (
               <div className={styles.empty}>Waiting for ping data...</div>
             ) : (
               leaderboard.map((m, i) => {
                 const rankCls = i < 3 ? styles[`rank${i + 1}`] : ''
-                const medal = i === 0 ? '🥇' : i === 1 ? '🥈' : i === 2 ? '🥉' : (i + 1)
                 return (
                   <div key={m.modelId} className={styles.leaderItem}>
-                    <div className={`${styles.leaderRank} ${rankCls}`}>{medal}</div>
+                    <div className={`${styles.leaderRank} ${rankCls}`}>{i + 1}</div>
                     <span className={styles.leaderName}>{m.label}</span>
                     <span className={styles.leaderLatency}>{m.avg}ms</span>
                   </div>

package/web/src/components/atoms/AILatencyCell.jsx

@@ -0,0 +1,38 @@
+/**
+ * @file web/src/components/atoms/AILatencyCell.jsx
+ * @description Benchmark AI latency column — shows animated spinner during benchmarks.
+ * 📖 Shows: 4.3s, 12s, ERR, TIMEOUT. Retry badge ↻N in blue.
+ * 📖 When isRunning: animated CSS spinner + pulsing row highlight.
+ */
+import styles from './AILatencyCell.module.css'
+
+function formatLatency(result, isRunning) {
+  if (isRunning) return { text: 'RUN', badge: '' }
+  if (!result || !result.ok) return { text: result?.code || '—', badge: '' }
+  const totalSec = result.totalMs / 1000
+  const badge = result.retries > 0 ? `↻${result.retries}` : ''
+  const text = totalSec >= 10 ? `${totalSec.toFixed(0)}s` : `${totalSec.toFixed(1)}s`
+  return { text, badge }
+}
+
+export default function AILatencyCell({ result, isRunning }) {
+  const { text, badge } = formatLatency(result, isRunning)
+  const ok = result?.ok
+  const colorCls = ok ? styles.fast : (result ? styles.slow : styles.dim)
+
+  return (
+    <span className={`${styles.cell} ${isRunning ? styles.runningCell : ''}`}>
+      {isRunning ? (
+        <>
+          <span className={styles.benchmarkSpinner} />
+          <span className={`${styles.value} ${styles.running}`}>{text}</span>
+        </>
+      ) : (
+        <>
+          <span className={`${styles.value} ${colorCls}`}>{text}</span>
+          {badge && <span className={styles.badge}>{badge}</span>}
+        </>
+      )}
+    </span>
+  )
+}

package/web/src/components/atoms/AILatencyCell.module.css

@@ -0,0 +1,43 @@
+.cell {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 70px;
+  transition: background 200ms;
+  border-radius: 4px;
+  padding: 1px 3px;
+}
+.value { }
+.fast   { color: #00ff88; }
+.medium { color: #ffaa00; }
+.slow   { color: #ff4444; }
+.dim    { color: var(--color-text-dim); }
+.running { color: #b400ff; font-weight: 700; }
+.badge  { color: #06b6d4; font-size: 10px; }
+
+/* ── Running/benchmarking row highlight ── */
+.runningCell {
+  background: rgba(180, 0, 255, 0.12);
+}
+
+/* ── Benchmark spinner: animated ring ── */
+@keyframes benchSpin {
+  to { transform: rotate(360deg); }
+}
+@keyframes benchPulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(180, 0, 255, 0.4); }
+  50%       { box-shadow: 0 0 0 4px rgba(180, 0, 255, 0); }
+}
+.benchmarkSpinner {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 2px solid rgba(180, 0, 255, 0.3);
+  border-top-color: #b400ff;
+  border-radius: 50%;
+  animation: benchSpin 0.6s linear infinite;
+  flex-shrink: 0;
+}

package/web/src/components/atoms/HealthCell.jsx

@@ -0,0 +1,53 @@
+/**
+ * @file web/src/components/atoms/HealthCell.jsx
+ * @description Detailed health/status column — matches CLI Health column.
+ * 📖 Shows: ✅ UP, 🔑 NO KEY, 🔐 AUTH FAIL, ⏳ wait, ⏳ TIMEOUT, 
+ * 🔥 429 TRY LATER, 🚫 404, 💥 500, 🔌 502, 🔒 503, ⏰ 504, ❌ ERROR.
+ */
+import styles from './HealthCell.module.css'
+
+const ERROR_LABELS = {
+  '404': '404 NOT FOUND',
+  '410': '410 GONE',
+  '429': '429 TRY LATER',
+  '500': '500 ERROR',
+  '502': '502 ERROR',
+  '503': '503 ERROR',
+  '504': '504 TIMEOUT',
+}
+
+const STATUS_EMOJI = {
+  up:          '✅',
+  timeout:     '⏳',
+  down:        '❌',
+  pending:     '⏳',
+  noauth:      '🔑',
+  auth_error:  '🔐',
+}
+
+function statusLabel(status, httpCode) {
+  const emoji = STATUS_EMOJI[status] || '?'
+  if (status === 'noauth') return `${emoji} NO KEY`
+  if (status === 'auth_error') return `${emoji} AUTH FAIL`
+  if (status === 'pending') return `${emoji} wait`
+  if (status === 'timeout') return `${emoji} TIMEOUT`
+  if (status === 'down') {
+    const label = ERROR_LABELS[httpCode] || (httpCode || 'ERR')
+    const errEmoji = { '429': '🔥', '404': '🚫', '500': '💥', '502': '🔌', '503': '🔒', '504': '⏰' }[httpCode] || '❌'
+    return `${errEmoji} ${label}`
+  }
+  if (status === 'up') return `${emoji} UP`
+  return `${emoji} ?`
+}
+
+export default function HealthCell({ status, httpCode }) {
+  const text = statusLabel(status, httpCode)
+  const cls = status === 'up' ? styles.up
+    : status === 'down' ? styles.error
+    : status === 'timeout' ? styles.warning
+    : status === 'noauth' ? styles.dim
+    : status === 'auth_error' ? styles.errorBold
+    : status === 'pending' ? styles.warning
+    : styles.dim
+  return <span className={`${styles.cell} ${cls}`}>{text}</span>
+}

package/web/src/components/atoms/HealthCell.module.css

@@ -0,0 +1,15 @@
+.cell {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 600;
+  display: inline-block;
+  letter-spacing: 0.2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.up         { color: #00ff88; }
+.warning    { color: #ffaa00; }
+.error      { color: #ff4444; }
+.errorBold  { color: #ff4444; font-weight: 800; }
+.dim        { color: var(--color-text-dim); }

package/web/src/components/atoms/LastPingCell.jsx

@@ -0,0 +1,35 @@
+/**
+ * @file web/src/components/atoms/LastPingCell.jsx
+ * @description Last ping latency number with color coding + animated spinner during pings.
+ * 📖 Values are milliseconds, displayed without the `ms` suffix to keep table cells compact.
+ * 📖 During ping rounds: animated CSS spinner shows which models are being tested.
+ */
+import styles from './LastPingCell.module.css'
+
+function pingClass(ms) {
+  if (ms == null || ms === Infinity) return styles.none
+  if (ms < 500) return styles.fast
+  if (ms < 1500) return styles.medium
+  return styles.slow
+}
+
+export default function LastPingCell({ ms, isPinging }) {
+  if (ms == null) {
+    return (
+      <span className={`${styles.cell} ${styles.none}`}>
+        {isPinging ? (
+          <span className={styles.spinner} title="Testing…" />
+        ) : (
+          '—'
+        )}
+      </span>
+    )
+  }
+
+  return (
+    <span className={`${styles.cell} ${pingClass(ms)}`}>
+      <span className={styles.value}>{ms}</span>
+      {isPinging && <span className={styles.spinner} />}
+    </span>
+  )
+}

package/web/src/components/atoms/LastPingCell.module.css

@@ -0,0 +1,35 @@
+.cell {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 54px;
+}
+.value { }
+.fast   { color: #00ff88; }
+.medium { color: #ffaa00; }
+.slow   { color: #ff4444; }
+.none   { color: var(--color-text-dim); }
+
+/* ── Animated spinner for active pings ── */
+@keyframes pingPulse {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.3; }
+}
+@keyframes pingRing {
+  0%   { transform: rotate(0deg) scale(1);   opacity: 1; }
+  70%  { transform: rotate(180deg) scale(0.6); opacity: 0.6; }
+  100% { transform: rotate(360deg) scale(1);   opacity: 1; }
+}
+.spinner {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border: 1.5px solid rgba(0, 255, 136, 0.25);
+  border-top-color: #00ff88;
+  border-radius: 50%;
+  animation: pingRing 0.8s linear infinite;
+  flex-shrink: 0;
+}

package/web/src/components/atoms/MoodCell.jsx

@@ -0,0 +1,25 @@
+/**
+ * @file web/src/components/atoms/MoodCell.jsx
+ * @description Tiny verdict indicator emoji (1st column) matching CLI ❔ column.
+ * 📖 Mirrors the full Verdict as a compact emoji: 🟩 Perfect, 🟢 Normal, 🟡 Spiky,
+ * 🟠 Slow, 🔴 Very Slow, 🔥 Overloaded, 🟥 Unstable, ⚫ Not Active, ⏳ Pending.
+ */
+import styles from './MoodCell.module.css'
+
+const VERDICT_EMOJI = {
+  Perfect:     '🟩',
+  Normal:      '🟢',
+  Spiky:       '🟡',
+  Slow:        '🟠',
+  'Very Slow': '🔴',
+  Overloaded:  '🔥',
+  Unstable:    '🟥',
+  'Not Active':'⚫',
+  Pending:     '⏳',
+  Usable:      '🟠',   // fallback
+}
+
+export default function MoodCell({ verdict }) {
+  const emoji = VERDICT_EMOJI[verdict] || '❔'
+  return <span className={styles.mood}>{emoji}</span>
+}

package/web/src/components/atoms/MoodCell.module.css

@@ -0,0 +1,6 @@
+.mood {
+  display: inline-block;
+  font-size: 14px;
+  text-align: center;
+  width: 20px;
+}

package/web/src/components/atoms/RankCell.jsx

@@ -0,0 +1,9 @@
+/**
+ * @file web/src/components/atoms/RankCell.jsx
+ * @description Row index number — triable column, matches CLI Rank (idx).
+ */
+import styles from './RankCell.module.css'
+
+export default function RankCell({ index }) {
+  return <span className={styles.rank}>{index}</span>
+}

package/web/src/components/atoms/RankCell.module.css

@@ -0,0 +1,9 @@
+.rank {
+  display: inline-block;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-text-dim);
+  text-align: center;
+  min-width: 28px;
+}

package/web/src/components/atoms/TPSCell.jsx

@@ -0,0 +1,36 @@
+/**
+ * @file web/src/components/atoms/TPSCell.jsx
+ * @description Benchmark tokens-per-second column — animated spinner during benchmarks.
+ * 📖 Shows: 13, 45, —. Retry badge ↻N in blue.
+ * 📖 When isRunning: animated CSS spinner matches AILatencyCell.
+ */
+import styles from './TPSCell.module.css'
+
+function formatTps(result, isRunning) {
+  if (isRunning) return { text: '…', badge: '' }
+  if (!result || !result.ok) return { text: '—', badge: '' }
+  const badge = result.retries > 0 ? `↻${result.retries}` : ''
+  return { text: String(Math.round(result.tokensPerSecond ?? 0)), badge }
+}
+
+export default function TPSCell({ result, isRunning }) {
+  const { text, badge } = formatTps(result, isRunning)
+  const ok = result?.ok
+  const colorCls = ok ? styles.fast : (result ? styles.slow : styles.dim)
+
+  return (
+    <span className={`${styles.cell} ${isRunning ? styles.runningCell : ''}`}>
+      {isRunning ? (
+        <>
+          <span className={styles.miniSpinner} />
+          <span className={`${styles.value} ${styles.running}`}>{text}</span>
+        </>
+      ) : (
+        <>
+          <span className={`${styles.value} ${colorCls}`}>{text}</span>
+          {badge && <span className={styles.badge}>{badge}</span>}
+        </>
+      )}
+    </span>
+  )
+}

package/web/src/components/atoms/TPSCell.module.css

@@ -0,0 +1,38 @@
+.cell {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 40px;
+  transition: background 200ms;
+  border-radius: 4px;
+  padding: 1px 3px;
+}
+.value { }
+.fast   { color: #00ff88; }
+.slow   { color: #ff4444; }
+.dim    { color: var(--color-text-dim); }
+.running { color: #b400ff; font-weight: 700; }
+.badge  { color: #06b6d4; font-size: 10px; }
+
+/* ── Running row highlight ── */
+.runningCell {
+  background: rgba(180, 0, 255, 0.12);
+}
+
+/* ── Mini spinner matching AILatencyCell ── */
+@keyframes miniSpin {
+  to { transform: rotate(360deg); }
+}
+.miniSpinner {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border: 1.5px solid rgba(180, 0, 255, 0.3);
+  border-top-color: #b400ff;
+  border-radius: 50%;
+  animation: miniSpin 0.6s linear infinite;
+  flex-shrink: 0;
+}

package/web/src/components/atoms/VerdictBadge.jsx

@@ -1,13 +1,36 @@
 /**
  * @file web/src/components/atoms/VerdictBadge.jsx
- * @description Renders a verdict badge (Perfect, Normal, Slow, etc.) with styled pill.
+ * @description Renders a verdict badge matching exactly the TUI format.
+ * 📖 Shows emoji + text: 🟩 Perfect, 🟢 Normal, 🟡 Spiky, 🟠 Slow, 🔴 Very Slow, 🔥 Overloaded, 🟥 Unstable, ⚫ Not Active, ⏳ Pending.
  */
-import { verdictCls } from '../../utils/ranks.js'
 import styles from './VerdictBadge.module.css'
 
-export default function VerdictBadge({ verdict, httpCode }) {
-  if (!verdict) return <span className={`${styles.badge} ${styles.pending}`}>Pending</span>
-  if (httpCode === '429') return <span className={`${styles.badge} ${styles.ratelimited}`}>⚠️ Rate Limited</span>
-  const cls = verdictCls(verdict)
-  return <span className={`${styles.badge} ${styles[cls]}`}>{verdict}</span>
+// ─── Emoji map matching TUI render-table.js verdictIcon ──────────────────────────
+const VERDICT_WITH_EMOJI = {
+  Perfect:     { emoji: '🟩', text: 'Perfect',     cls: 'perfect' },
+  Normal:      { emoji: '🟢', text: 'Normal',      cls: 'normal' },
+  Spiky:       { emoji: '🟡', text: 'Spiky',       cls: 'spiky' },
+  Slow:        { emoji: '🟠', text: 'Slow',        cls: 'slow' },
+  'Very Slow': { emoji: '🔴', text: 'Very Slow',   cls: 'veryslow' },
+  Overloaded:  { emoji: '🔥', text: 'Overloaded',  cls: 'overloaded' },
+  Unstable:    { emoji: '🟥', text: 'Unstable',    cls: 'unstable' },
+  'Not Active':{ emoji: '⚫', text: 'Not Active', cls: 'notactive' },
+  Pending:     { emoji: '⏳', text: 'Pending',     cls: 'pending' },
 }
+
+const DEFAULT_ENTRY = { emoji: '❔', text: 'Pending', cls: 'pending' }
+
+export default function VerdictBadge({ verdict, httpCode }) {
+  // Handle 429 rate limit from HTTP code (TUI shows 🔥 429 TRY LATER in Health column)
+  // In Verdict column, TUI shows 'Overloaded' for 429 — keep same behavior
+  const entry = verdict
+    ? (VERDICT_WITH_EMOJI[verdict] || { emoji: '❔', text: verdict, cls: 'pending' })
+    : DEFAULT_ENTRY
+
+  return (
+    <span className={`${styles.badge} ${styles[entry.cls]}`}>
+      <span className={styles.emoji}>{entry.emoji}</span>
+      <span className={styles.text}>{entry.text}</span>
+    </span>
+  )
+}

package/web/src/components/atoms/VerdictBadge.module.css

@@ -1,19 +1,28 @@
+/**
+ * @file web/src/components/atoms/VerdictBadge.module.css
+ * @description Styles matching TUI verdict colors (emoji + text).
+ */
 .badge {
-  display: inline-block;
-  font-size: 10px;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 11px;
   font-weight: 700;
-  text-transform: uppercase;
-  padding: 2px 8px;
+  padding: 2px 7px;
   border-radius: 999px;
-  letter-spacing: 0.5px;
+  white-space: nowrap;
 }
-.perfect     { background: rgba(0,255,136,0.12); color: #00ff88; border: 1px solid rgba(0,255,136,0.25); }
-.normal      { background: rgba(118,185,0,0.12); color: #76b900; border: 1px solid rgba(118,185,0,0.25); }
-.slow        { background: rgba(255,170,0,0.12); color: #ffaa00; border: 1px solid rgba(255,170,0,0.25); }
-.spiky       { background: rgba(255,102,0,0.12); color: #ff6600; border: 1px solid rgba(255,102,0,0.25); }
-.veryslow    { background: rgba(255,68,68,0.12); color: #ff4444; border: 1px solid rgba(255,68,68,0.2); }
-.overloaded  { background: rgba(255,34,34,0.12); color: #ff2222; border: 1px solid rgba(255,34,34,0.2); }
-.unstable    { background: rgba(204,0,0,0.12); color: #cc0000; border: 1px solid rgba(204,0,0,0.2); }
-.notactive   { background: rgba(85,85,112,0.12); color: #555570; border: 1px solid rgba(85,85,112,0.15); }
-.pending     { background: rgba(68,68,96,0.1); color: #444460; border: 1px solid rgba(68,68,96,0.15); }
-.ratelimited { background: rgba(255,170,0,0.15); color: #ffaa00; border: 1px solid rgba(255,170,0,0.3); }
+
+.emoji { font-size: 12px; line-height: 1; }
+.text { line-height: 1; }
+
+/* ─── Color variants matching TUI theme ─── */
+.perfect    { background: rgba(0,255,136,0.12); color: #00ff88; }
+.normal     { background: rgba(118,185,0,0.12); color: #76b900; }
+.slow       { background: rgba(255,170,0,0.12); color: #ffaa00; }
+.spiky      { background: rgba(255,102,0,0.12); color: #ff6600; }
+.veryslow  { background: rgba(255,68,68,0.12); color: #ff4444; }
+.overloaded { background: rgba(255,34,34,0.12); color: #ff2222; }
+.unstable   { background: rgba(204,0,0,0.12); color: #cc0000; }
+.notactive  { background: rgba(85,85,112,0.12); color: #555570; }
+.pending    { background: rgba(68,68,96,0.1); color: #444460; }