free-coding-models 0.5.1 → 0.5.4

package/web/src/App.jsx

@@ -1,17 +1,25 @@
 /**
  * @file web/src/App.jsx
- * @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, toast notifications, ping mode, and benchmark.
- * Uses useSocket for live data, useFilter for model filtering/sorting, useTheme for dark/light.
+ * @description Root application component — orchestrates all views, header nav, Socket.IO
+ * connection, toast notifications, and global state. M1 layout refactor: no more left
+ * sidebar. Navigation lives in the Header (always-visible nav + overflow menu).
+ *
+ * 📖 M1 also wires in:
+ *   - StatsBar above the ModelTable (was orphaned)
+ *   - URL deep-linking (read-only — ?tier=…&sort=…&origin=…)
+ *   - ⌘K command palette (placeholder modal for M1, real palette in M2)
+ *   - Favorites hook (per-row star + reorder + display mode toggle)
+ *   - Per-model benchmark button (uses existing /api/benchmark)
+ *
  * @functions App → root component with all state and layout composition
  */
-import { useState, useCallback, useEffect } from 'react'
+import { useState, useCallback, useEffect, useRef } from 'react'
 import { useSocket } from './hooks/useSocket.js'
 import { useFilter } from './hooks/useFilter.js'
 import { useTheme } from './hooks/useTheme.js'
+import { useFavorites } from './hooks/useFavorites.js'
+import { useUrlState } from './hooks/useUrlState.js'
 import Header from './components/layout/Header.jsx'
-import Sidebar from './components/layout/Sidebar.jsx'
 import Footer from './components/layout/Footer.jsx'
 import FilterBar from './components/dashboard/FilterBar.jsx'
 import ModelTable from './components/dashboard/ModelTable.jsx'
@@ -19,18 +27,43 @@ import DetailPanel from './components/dashboard/DetailPanel.jsx'
 import ExportModal from './components/dashboard/ExportModal.jsx'
 import SettingsView from './components/settings/SettingsView.jsx'
 import AnalyticsView from './components/analytics/AnalyticsView.jsx'
-import MapView from './components/map/MapView.jsx'
+import CommandPalette from './components/palette/CommandPalette.jsx'
 import ToastContainer from './components/atoms/ToastContainer.jsx'
 
 let toastIdCounter = 0
 
+// 📖 Map current view to the header nav id. M1 only ships dashboard/settings/analytics;
+// 📖 recommend/router/help/changelog/install-endpoints/installed-models are wired but
+// 📖 still show a "Coming in M2/M3/M4" toast from the header for now.
+const VIEW_TO_NAV = {
+  dashboard: 'dashboard',
+  settings: 'settings',
+  analytics: 'analytics',
+  recommend: 'recommend',
+  router: 'router',
+  help: 'help',
+  changelog: 'changelog',
+  'install-endpoints': 'install-endpoints',
+  'installed-models': 'installed-models',
+}
+
 export default function App() {
   const { models, connected, nextPingAt, isPinging, pingMode, globalBenchmarkRunning, globalBenchmarkTotal, globalBenchmarkCompleted } = useSocket()
-  const { theme, toggle: toggleTheme } = useTheme()
+  const { theme, cycle: cycleTheme } = useTheme()
   const [currentView, setCurrentView] = useState('dashboard')
   const [selectedModel, setSelectedModel] = useState(null)
   const [exportOpen, setExportOpen] = useState(false)
+  const [paletteOpen, setPaletteOpen] = useState(false)
   const [toasts, setToasts] = useState([])
+  const lastActivityRef = useRef(Date.now())
+
+  // 📖 URL deep-linking (M1 = read-only hydration on mount; write-back lands in M2).
+  // 📖 Syncs `currentView`, filter state, and selection from query params so users
+  // 📖 can share pre-configured dashboard URLs.
+  useUrlState({
+    currentView, setCurrentView,
+    filterState: null, // wired in M2
+  })
 
   const {
     filtered,
@@ -39,8 +72,17 @@ export default function App() {
     filterProvider, setFilterProvider,
     searchQuery, setSearchQuery,
     sortColumn, sortDirection, toggleSort,
+    filterVerdict, setFilterVerdict,
+    filterHealth, setFilterHealth,
+    visibilityMode, setVisibilityMode,
+    customTextFilter, setCustomTextFilter,
+    resetView,
   } = useFilter(models)
 
+  // 📖 Favorites — single source of truth shared with the TUI via ~/.free-coding-models.json.
+  const favorites = useFavorites({ models })
+
+  // 📖 Build the provider list for the FilterBar dropdown.
   const providers = (() => {
     const map = {}
     models.forEach((m) => {
@@ -50,18 +92,13 @@ export default function App() {
     return Object.values(map).sort((a, b) => a.name.localeCompare(b.name))
   })()
 
-  // ── Global AI Speed Benchmark (Ctrl+U equivalent) ──
+  // ── Global benchmark (AI Speed Test) ─────────────────────────────────────
   const handleBenchmark = useCallback(async () => {
-    if (globalBenchmarkRunning) {
-      console.warn('[Benchmark] Global benchmark already in progress.')
-      return
-    }
+    if (globalBenchmarkRunning) 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 })),
         }),
@@ -71,118 +108,186 @@ export default function App() {
     }
   }, [filtered, globalBenchmarkRunning])
 
+  // ── Per-model benchmark (M1 parity with TUI Ctrl+A) ──────────────────────
+  const handleBenchmarkRow = useCallback(async (model) => {
+    try {
+      const resp = await fetch('/api/benchmark', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ providerKey: model.providerKey, modelId: model.modelId }),
+      })
+      if (!resp.ok && resp.status !== 202) {
+        const err = await resp.json().catch(() => ({}))
+        addToast?.(`Benchmark failed: ${err?.error || resp.statusText}`, 'error')
+      }
+    } catch (err) {
+      console.error('[Benchmark] per-row failed:', err.message)
+    }
+  }, [])
+
+  // ── Toast helpers ────────────────────────────────────────────────────────
   const addToast = useCallback((message, type = 'info') => {
     const id = ++toastIdCounter
     setToasts((prev) => [...prev, { id, message, type }])
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id))
+    }, 4000)
   }, [])
 
   const dismissToast = useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id))
   }, [])
 
+  // ── Selection / detail panel ─────────────────────────────────────────────
   const handleSelectModel = useCallback((model) => {
     setSelectedModel(model)
+    lastActivityRef.current = Date.now()
   }, [])
 
   const handleCloseDetail = useCallback(() => setSelectedModel(null), [])
 
-  // ── Ping mode: sync with backend ──
+  // ── Ping mode change → server → broadcast ───────────────────────────────
   const handlePingModeChange = useCallback(async (mode) => {
     try {
       await fetch(`/api/ping-mode?action=${mode}`, { method: 'POST' })
     } catch {}
   }, [])
 
+  // ── Navigation handler (Header nav + overflow menu) ──────────────────────
+  const handleNavigate = useCallback((viewId) => {
+    setCurrentView(VIEW_TO_NAV[viewId] || viewId)
+    lastActivityRef.current = Date.now()
+  }, [])
+
+  // ── Reset view (N key equivalent) ────────────────────────────────────────
+  const handleResetView = useCallback(() => {
+    resetView()
+    setSearchQuery('')
+    addToast('View reset to defaults.', 'info')
+  }, [resetView, setSearchQuery, addToast])
+
+  // ── Keyboard shortcuts: only ⌘K / Ctrl+P for the palette ────────────────
   useEffect(() => {
     const handler = (e) => {
-      if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+      const cmdOrCtrl = e.metaKey || e.ctrlKey
+      // ⌘K / Ctrl+K → toggle command palette (the Web's only global shortcut)
+      if (cmdOrCtrl && (e.key === 'k' || e.key === 'K')) {
         e.preventDefault()
-        if (currentView !== 'dashboard') setCurrentView('dashboard')
+        setPaletteOpen((o) => !o)
+        return
       }
+      // Ctrl+P is also accepted as a TUI-style alias for the same palette.
+      if (cmdOrCtrl && (e.key === 'p' || e.key === 'P') && !e.shiftKey) {
+        e.preventDefault()
+        setPaletteOpen((o) => !o)
+        return
+      }
+      // Esc closes whatever is open.
       if (e.key === 'Escape') {
-        setSelectedModel(null)
-        setExportOpen(false)
+        if (paletteOpen) { setPaletteOpen(false); return }
+        if (selectedModel) { setSelectedModel(null); return }
+        if (exportOpen) { setExportOpen(false); return }
       }
     }
     window.addEventListener('keydown', handler)
     return () => window.removeEventListener('keydown', handler)
-  }, [currentView])
+  }, [paletteOpen, selectedModel, exportOpen])
+
+  // 📖 Reset view if URL contains the reset flag.
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search)
+    if (params.get('reset') === '1') {
+      handleResetView()
+      const url = new URL(window.location.href)
+      url.searchParams.delete('reset')
+      window.history.replaceState({}, '', url.toString())
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
   return (
     <>
-      <Sidebar
-        currentView={currentView}
-        onNavigate={setCurrentView}
-        onToggleTheme={toggleTheme}
-        theme={theme}
-      />
+      <div className="app-shell">
+        <Header
+          searchQuery={searchQuery}
+          onSearchChange={setSearchQuery}
+          currentView={currentView}
+          onNavigate={handleNavigate}
+          onToggleTheme={cycleTheme}
+          onOpenExport={() => setExportOpen(true)}
+          onOpenCommandPalette={() => setPaletteOpen(true)}
+          onBenchmark={handleBenchmark}
+          benchmarkRunning={globalBenchmarkRunning}
+          benchmarkTotal={globalBenchmarkTotal}
+          benchmarkCompleted={globalBenchmarkCompleted}
+          modelsCount={filtered.length}
+          theme={theme}
+          onToast={addToast}
+        />
+
+        <div className="app-content">
+          {currentView === 'dashboard' && (
+            <div className="view">
+              <FilterBar
+                filterTier={filterTier}
+                setFilterTier={setFilterTier}
+                filterStatus={filterStatus}
+                setFilterStatus={setFilterStatus}
+                filterProvider={filterProvider}
+                setFilterProvider={setFilterProvider}
+                filterVerdict={filterVerdict}
+                setFilterVerdict={setFilterVerdict}
+                filterHealth={filterHealth}
+                setFilterHealth={setFilterHealth}
+                visibilityMode={visibilityMode}
+                setVisibilityMode={setVisibilityMode}
+                customTextFilter={customTextFilter}
+                setCustomTextFilter={setCustomTextFilter}
+                searchQuery={searchQuery}
+                onResetView={handleResetView}
+                providers={providers}
+                pingMode={pingMode}
+                setPingMode={handlePingModeChange}
+                nextPingAt={nextPingAt}
+                isPinging={isPinging}
+                globalBenchmarkRunning={globalBenchmarkRunning}
+                globalBenchmarkTotal={globalBenchmarkTotal}
+                globalBenchmarkCompleted={globalBenchmarkCompleted}
+              />
+              <ModelTable
+                filtered={filtered}
+                onSelectModel={handleSelectModel}
+                onBenchmarkRow={handleBenchmarkRow}
+                favorites={favorites}
+                sortColumn={sortColumn}
+                sortDirection={sortDirection}
+                onSort={toggleSort}
+              />
+            </div>
+          )}
+
+          {currentView === 'settings' && (
+            <div className="view">
+              <SettingsView onToast={addToast} />
+            </div>
+          )}
+
+          {currentView === 'analytics' && (
+            <div className="view">
+              <AnalyticsView models={models} />
+            </div>
+          )}
 
-      <div className="app-content">
-        {currentView === 'dashboard' && (
-          <div className="view">
-            <Header
-              searchQuery={searchQuery}
-              onSearchChange={setSearchQuery}
-              onToggleTheme={toggleTheme}
-              onOpenSettings={() => setCurrentView('settings')}
-              onOpenExport={() => setExportOpen(true)}
-              onBenchmark={handleBenchmark}
-              benchmarkRunning={globalBenchmarkRunning}
-              benchmarkTotal={globalBenchmarkTotal}
-              benchmarkCompleted={globalBenchmarkCompleted}
-              modelsCount={filtered.length}
-              theme={theme}
-            />
-            <FilterBar
-              filterTier={filterTier}
-              setFilterTier={setFilterTier}
-              filterStatus={filterStatus}
-              setFilterStatus={setFilterStatus}
-              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>
-        )}
-
-        {currentView === 'settings' && (
-          <div className="view">
-            <SettingsView onToast={addToast} />
-          </div>
-        )}
-
-        {currentView === 'analytics' && (
-          <div className="view">
-            <AnalyticsView models={models} />
-          </div>
-        )}
-
-        {currentView === 'map' && (
-          <div className="view">
-            <MapView />
-          </div>
-        )}
-
-        <Footer />
+          <Footer />
+        </div>
       </div>
 
       <DetailPanel
         model={selectedModel}
         onClose={handleCloseDetail}
+        favorites={favorites}
+        onBenchmark={handleBenchmarkRow}
+        onToast={addToast}
       />
 
       {exportOpen && (
@@ -193,7 +298,22 @@ export default function App() {
         />
       )}
 
+      {paletteOpen && (
+        <CommandPalette
+          onClose={() => setPaletteOpen(false)}
+          onNavigate={handleNavigate}
+          onCycleTheme={cycleTheme}
+          onResetView={handleResetView}
+          currentView={currentView}
+          theme={theme}
+          pingMode={pingMode}
+          onSetPingMode={handlePingModeChange}
+          onToast={addToast}
+          onExport={() => setExportOpen(true)}
+        />
+      )}
+
       <ToastContainer toasts={toasts} dismissToast={dismissToast} />
     </>
   )
-}
+}

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

@@ -9,10 +9,38 @@ import { IconActivity, IconTrophy } from '@tabler/icons-react'
 import TierBadge from '../atoms/TierBadge.jsx'
 import styles from './AnalyticsView.module.css'
 
-const TIER_COLORS = {
+// 📖 TIER_COLORS is now derived from CSS custom properties so the chart fills
+// 📖 swap to AA-contrast shades in light mode automatically. The keys stay
+// 📖 the same; the values come from --tier-splus / --tier-s / etc.
+function readTierColor(name, fallback) {
+  if (typeof window === 'undefined' || !window.document?.documentElement) return fallback
+  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+  return v || fallback
+}
+
+const TIER_COLOR_KEYS = {
+  'S+': '--tier-splus',
+  'S':  '--tier-s',
+  'A+': '--tier-aplus',
+  'A':  '--tier-a',
+  'A-': '--tier-aminus',
+  'B+': '--tier-bplus',
+  'B':  '--tier-b',
+  'C':  '--tier-c',
+}
+
+const TIER_COLOR_FALLBACKS = {
   'S+': '#ffd700', S: '#ff8c00', 'A+': '#00c8ff', A: '#3ddc84',
   'A-': '#7ecf7e', 'B+': '#a8a8c8', B: '#808098', C: '#606078',
 }
+
+// 📖 Resolve the tier color at render time. Memoizing the map per theme switch
+// 📖 would be more efficient, but the cost is one getComputedStyle per tier and
+// 📖 the chart only re-renders when `models` changes, so the extra work is
+// 📖 imperceptible.
+function tierColor(key) {
+  return readTierColor(TIER_COLOR_KEYS[key], TIER_COLOR_FALLBACKS[key])
+}
 const TIERS = ['S+', 'S', 'A+', 'A', 'A-', 'B+', 'B', 'C']
 
 export default function AnalyticsView({ models }) {
@@ -102,7 +130,7 @@ export default function AnalyticsView({ models }) {
               <div key={tier} className={styles.tierItem}>
                 <div className={styles.tierBadge}><TierBadge tier={tier} /></div>
                 <div className={styles.tierBar}>
-                  <div className={styles.tierFill} style={{ width: `${pct}%`, background: TIER_COLORS[tier] }} />
+                  <div className={styles.tierFill} style={{ width: `${pct}%`, background: tierColor(tier) }} />
                 </div>
                 <span className={styles.tierCount}>{count}</span>
               </div>

package/web/src/components/analytics/AnalyticsView.module.css

@@ -98,6 +98,10 @@
 .pctMedium { color: #ffaa00; }
 .pctSlow { color: #ff4444; }
 
+:global([data-theme="light"]) .pctFast   { color: #008f4d; }
+:global([data-theme="light"]) .pctMedium { color: #b86b00; }
+:global([data-theme="light"]) .pctSlow   { color: #c8143a; }
+
 .leaderItem {
   display: flex;
   align-items: center;

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

@@ -40,4 +40,12 @@
   border-radius: 50%;
   animation: benchSpin 0.6s linear infinite;
   flex-shrink: 0;
-}
+}
+
+/* 📖 Light theme: swap the neon palette for darker, AA-contrast shades. The
+   📖 purple running color stays vibrant since it works on both backgrounds. */
+:global([data-theme="light"]) .fast   { color: #008f4d; }
+:global([data-theme="light"]) .medium { color: #b86b00; }
+:global([data-theme="light"]) .slow   { color: #c8143a; }
+:global([data-theme="light"]) .badge  { color: #0e7490; }
+:global([data-theme="light"]) .runningCell { background: rgba(125, 0, 180, 0.08); }

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

@@ -1,11 +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.
+ * 📖 Shows the current provider status next to a Tabler icon that matches the
+ * 📖 state. The icon is color-coded so a quick glance is enough to know if
+ * 📖 the row is healthy, slow, down, blocked, etc.
+ * 📖
+ * 📖 Icon → state mapping:
+ * 📖   ✅ up           → IconChecks         (green)
+ * 📖   ⏳ timeout      → IconHourglassOff   (yellow)
+ * 📖   ⏳ pending      → IconHourglass      (yellow)
+ * 📖   🔐 AUTH FAIL    → IconLock           (red, bold)
+ * 📖   🔑 NO KEY       → NoKeyIcon          (yellow key + red slash)
+ * 📖   🔥 429          → IconFlame          (red)
+ * 📖   🚫 404          → IconError404       (red)
+ * 📖   💥 500          → IconAlertOctagon   (red)
+ * 📖   🔌 502          → IconPlug           (red)
+ * 📖   🔒 503          → IconCloudOff       (red)
+ * 📖   ⏰ 504          → IconClock          (red)
+ * 📖   ❌ unknown      → IconBan            (red)
  */
+import {
+  IconChecks,
+  IconHourglass,
+  IconHourglassOff,
+  IconLock,
+  IconFlame,
+  IconError404,
+  IconAlertOctagon,
+  IconPlug,
+  IconCloudOff,
+  IconClock,
+  IconBan,
+} from '@tabler/icons-react'
+import NoKeyIcon from './NoKeyIcon.jsx'
 import styles from './HealthCell.module.css'
 
+const ICON_SIZE = 12
+const ICON_STROKE = 1.8
+
+// 📖 Themed icon helper: same color palette as the rest of the Health cell text,
+// 📖 so the icon + label always match. Reading the CSS var at render time keeps
+// 📖 the dark/light palettes aligned with the rest of the dashboard.
+const HEALTH_ICON_COLOR = {
+  success: 'var(--color-success, #00ff88)',
+  warning: 'var(--color-warning, #ffaa00)',
+  danger:  'var(--color-danger,  #ff4444)',
+  dim:     'var(--color-text-dim, #444)',
+}
+
 const ERROR_LABELS = {
   '404': '404 NOT FOUND',
   '410': '410 GONE',
@@ -16,38 +58,81 @@ const ERROR_LABELS = {
   '504': '504 TIMEOUT',
 }
 
-const STATUS_EMOJI = {
-  up:          '✅',
-  timeout:     '⏳',
-  down:        '❌',
-  pending:     '⏳',
-  noauth:      '🔑',
-  auth_error:  '🔐',
+// 📖 Per-HTTP-code icon + color picker. Anything not in this map falls back to
+// 📖 the generic down-state rendering below.
+const ERROR_ICON = {
+  '429': { Icon: IconFlame,        color: HEALTH_ICON_COLOR.danger  },
+  '404': { Icon: IconError404,     color: HEALTH_ICON_COLOR.danger  },
+  '500': { Icon: IconAlertOctagon, color: HEALTH_ICON_COLOR.danger  },
+  '502': { Icon: IconPlug,         color: HEALTH_ICON_COLOR.danger  },
+  '503': { Icon: IconCloudOff,     color: HEALTH_ICON_COLOR.danger  },
+  '504': { Icon: IconClock,        color: HEALTH_ICON_COLOR.danger  },
 }
 
 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 === 'noauth')  return 'NO KEY'
+  if (status === 'auth_error') return 'AUTH FAIL'
+  if (status === 'pending') return 'wait'
+  if (status === 'timeout') return 'TIMEOUT'
   if (status === 'down') {
-    const label = ERROR_LABELS[httpCode] || (httpCode || 'ERR')
-    const errEmoji = { '429': '🔥', '404': '🚫', '500': '💥', '502': '🔌', '503': '🔒', '504': '⏰' }[httpCode] || '❌'
-    return `${errEmoji} ${label}`
+    return ERROR_LABELS[httpCode] || (httpCode || 'ERROR')
   }
-  if (status === 'up') return `${emoji} UP`
-  return `${emoji} ?`
+  if (status === 'up') return 'UP'
+  return '?'
+}
+
+function statusClass(status) {
+  if (status === 'noauth')     return styles.noKey
+  if (status === 'up')         return styles.up
+  if (status === 'down')       return styles.error
+  if (status === 'timeout')    return styles.warning
+  if (status === 'auth_error') return styles.errorBold
+  if (status === 'pending')    return styles.warning
+  return styles.dim
 }
 
 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>
-}
+  const cls = statusClass(status)
+  const isNoKey = status === 'noauth'
+
+  // 📖 Pick the right icon + color combo for this state.
+  let Icon = null
+  let iconColor = null
+  if (status === 'up') {
+    Icon = IconChecks
+    iconColor = HEALTH_ICON_COLOR.success
+  } else if (status === 'timeout') {
+    Icon = IconHourglassOff
+    iconColor = HEALTH_ICON_COLOR.warning
+  } else if (status === 'pending') {
+    Icon = IconHourglass
+    iconColor = HEALTH_ICON_COLOR.warning
+  } else if (status === 'auth_error') {
+    Icon = IconLock
+    iconColor = HEALTH_ICON_COLOR.danger
+  } else if (status === 'down' && ERROR_ICON[httpCode]) {
+    Icon = ERROR_ICON[httpCode].Icon
+    iconColor = ERROR_ICON[httpCode].color
+  } else if (status === 'down') {
+    // 📖 Generic "down" fallback (no recognized HTTP code).
+    Icon = IconBan
+    iconColor = HEALTH_ICON_COLOR.danger
+  }
+
+  return (
+    <span className={`${styles.cell} ${cls}`}>
+      {isNoKey ? (
+        <NoKeyIcon size={15} title="No API key configured for this provider" />
+      ) : Icon ? (
+        <Icon
+          size={ICON_SIZE}
+          stroke={ICON_STROKE}
+          style={{ color: iconColor, flexShrink: 0 }}
+          aria-hidden="true"
+        />
+      ) : null}
+      <span className={isNoKey ? styles.noKeyText : undefined}>{text}</span>
+    </span>
+  )
+}