npm - free-coding-models - Versions diffs - 0.3.37 → 0.3.40 - Mend

free-coding-models 0.3.37 → 0.3.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (58) hide show

package/CHANGELOG.md +10 -1794
package/README.md +4 -1
package/bin/free-coding-models.js +8 -0
package/package.json +13 -3
package/src/app.js +3 -0
package/src/cli-help.js +2 -0
package/src/command-palette.js +3 -0
package/src/endpoint-installer.js +1 -1
package/src/tool-bootstrap.js +34 -0
package/src/tool-launchers.js +137 -1
package/src/tool-metadata.js +9 -0
package/src/utils.js +10 -0
package/web/app.legacy.js +900 -0
package/web/index.html +20 -0
package/web/server.js +382 -0
package/web/src/App.jsx +150 -0
package/web/src/components/analytics/AnalyticsView.jsx +109 -0
package/web/src/components/analytics/AnalyticsView.module.css +186 -0
package/web/src/components/atoms/Sparkline.jsx +44 -0
package/web/src/components/atoms/StabilityCell.jsx +18 -0
package/web/src/components/atoms/StabilityCell.module.css +8 -0
package/web/src/components/atoms/StatusDot.jsx +10 -0
package/web/src/components/atoms/StatusDot.module.css +17 -0
package/web/src/components/atoms/TierBadge.jsx +10 -0
package/web/src/components/atoms/TierBadge.module.css +18 -0
package/web/src/components/atoms/Toast.jsx +25 -0
package/web/src/components/atoms/Toast.module.css +35 -0
package/web/src/components/atoms/ToastContainer.jsx +16 -0
package/web/src/components/atoms/ToastContainer.module.css +10 -0
package/web/src/components/atoms/VerdictBadge.jsx +13 -0
package/web/src/components/atoms/VerdictBadge.module.css +19 -0
package/web/src/components/dashboard/DetailPanel.jsx +131 -0
package/web/src/components/dashboard/DetailPanel.module.css +99 -0
package/web/src/components/dashboard/ExportModal.jsx +79 -0
package/web/src/components/dashboard/ExportModal.module.css +99 -0
package/web/src/components/dashboard/FilterBar.jsx +73 -0
package/web/src/components/dashboard/FilterBar.module.css +43 -0
package/web/src/components/dashboard/ModelTable.jsx +86 -0
package/web/src/components/dashboard/ModelTable.module.css +46 -0
package/web/src/components/dashboard/StatsBar.jsx +40 -0
package/web/src/components/dashboard/StatsBar.module.css +28 -0
package/web/src/components/layout/Footer.jsx +19 -0
package/web/src/components/layout/Footer.module.css +10 -0
package/web/src/components/layout/Header.jsx +38 -0
package/web/src/components/layout/Header.module.css +73 -0
package/web/src/components/layout/Sidebar.jsx +41 -0
package/web/src/components/layout/Sidebar.module.css +76 -0
package/web/src/components/settings/SettingsView.jsx +264 -0
package/web/src/components/settings/SettingsView.module.css +377 -0
package/web/src/global.css +199 -0
package/web/src/hooks/useFilter.js +83 -0
package/web/src/hooks/useSSE.js +49 -0
package/web/src/hooks/useTheme.js +27 -0
package/web/src/main.jsx +15 -0
package/web/src/utils/download.js +15 -0
package/web/src/utils/format.js +42 -0
package/web/src/utils/ranks.js +37 -0
package/web/styles.legacy.css +963 -0

package/web/index.html ADDED Viewed

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>free-coding-models — Live Dashboard</title>
+  <meta name="description" content="Find the fastest free coding LLM model in seconds. Live dashboard monitoring 230+ models across 24 providers.">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+</head>
+<body>
+  <div class="bg-grid"></div>
+  <div class="bg-glow bg-glow--1"></div>
+  <div class="bg-glow bg-glow--2"></div>
+  <div class="bg-glow bg-glow--3"></div>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+</html>

package/web/server.js ADDED Viewed

@@ -0,0 +1,382 @@
+/**
+ * @file web/server.js
+ * @description HTTP server for the free-coding-models Web Dashboard V2.
+ *
+ * Reuses the existing ping engine, model sources, and utility functions
+ * from the CLI tool. Serves the dashboard HTML/CSS/JS and provides
+ * API endpoints + SSE for real-time ping data.
+ *
+ * Endpoints:
+ *   GET /              → Dashboard HTML
+ *   GET /styles.css    → Dashboard styles
+ *   GET /app.js        → Dashboard client JS
+ *   GET /api/models    → All model metadata (JSON)
+ *   GET /api/config    → Current config (sanitized — masked keys)
+ *   GET /api/key/:prov → Reveal a provider's full API key
+ *   GET /api/events    → SSE stream of live ping results
+ *   POST /api/settings → Update API keys / provider toggles
+ */
+import { createServer } from 'node:http'
+import { readFileSync, existsSync } from 'node:fs'
+import { join, dirname, extname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { exec } from 'node:child_process'
+import { sources, MODELS } from '../sources.js'
+import { loadConfig, getApiKey, saveConfig, isProviderEnabled } from '../src/config.js'
+import { ping } from '../src/ping.js'
+import {
+  getAvg, getVerdict, getUptime, getP95, getJitter,
+  getStabilityScore, TIER_ORDER
+} from '../src/utils.js'
+const __dirname = dirname(fileURLToPath(import.meta.url))
+// ─── State ───────────────────────────────────────────────────────────────────
+let config = loadConfig()
+// Build results array from MODELS (same shape as the TUI)
+const results = MODELS.map(([modelId, label, tier, sweScore, ctx, providerKey], idx) => ({
+  idx: idx + 1,
+  modelId,
+  label,
+  tier,
+  sweScore,
+  ctx,
+  providerKey,
+  status: 'pending',
+  pings: [],
+  httpCode: null,
+  origin: sources[providerKey]?.name || providerKey,
+  url: sources[providerKey]?.url || null,
+  cliOnly: sources[providerKey]?.cliOnly || false,
+  zenOnly: sources[providerKey]?.zenOnly || false,
+}))
+// SSE clients
+const sseClients = new Set()
+// ─── Ping Loop ───────────────────────────────────────────────────────────────
+// Uses recursive setTimeout (not setInterval) to prevent overlapping rounds.
+// Each new round starts only after the previous one completes.
+let pingRound = 0
+let pingLoopRunning = false
+async function pingAllModels() {
+  if (pingLoopRunning) return // guard against overlapping calls
+  pingLoopRunning = true
+  pingRound++
+  const batchSize = 30
+  // P2 fix: honor provider enabled flags — skip disabled providers
+  const modelsToPing = results.filter(r =>
+    !r.cliOnly && r.url && isProviderEnabled(config, r.providerKey)
+  )
+  for (let i = 0; i < modelsToPing.length; i += batchSize) {
+    const batch = modelsToPing.slice(i, i + batchSize)
+    const promises = batch.map(async (r) => {
+      const apiKey = getApiKey(config, r.providerKey)
+      try {
+        const result = await ping(apiKey, r.modelId, r.providerKey, r.url)
+        r.httpCode = result.code
+        if (result.code === '200') {
+          r.status = 'up'
+          r.pings.push({ ms: result.ms, code: result.code })
+        } else if (result.code === '401') {
+          r.status = 'up'
+          r.pings.push({ ms: result.ms, code: result.code })
+        } else if (result.code === '429') {
+          r.status = 'up'
+          r.pings.push({ ms: result.ms, code: result.code })
+        } else if (result.code === '000') {
+          r.status = 'timeout'
+        } else {
+          r.status = 'down'
+          r.pings.push({ ms: result.ms, code: result.code })
+        }
+        // Keep only last 60 pings
+        if (r.pings.length > 60) r.pings = r.pings.slice(-60)
+      } catch {
+        r.status = 'timeout'
+      }
+    })
+    await Promise.all(promises)
+  }
+  // Broadcast update to all SSE clients
+  broadcastUpdate()
+  pingLoopRunning = false
+}
+function broadcastUpdate() {
+  const data = JSON.stringify(getModelsPayload())
+  for (const client of sseClients) {
+    try {
+      client.write(`data: ${data}\n\n`)
+    } catch {
+      sseClients.delete(client)
+    }
+  }
+}
+function getModelsPayload() {
+  return results.map(r => ({
+    idx: r.idx,
+    modelId: r.modelId,
+    label: r.label,
+    tier: r.tier,
+    sweScore: r.sweScore,
+    ctx: r.ctx,
+    providerKey: r.providerKey,
+    origin: r.origin,
+    status: r.status,
+    httpCode: r.httpCode,
+    cliOnly: r.cliOnly,
+    zenOnly: r.zenOnly,
+    avg: getAvg(r),
+    verdict: getVerdict(r),
+    uptime: getUptime(r),
+    p95: getP95(r),
+    jitter: getJitter(r),
+    stability: getStabilityScore(r),
+    latestPing: r.pings.length > 0 ? r.pings[r.pings.length - 1].ms : null,
+    latestCode: r.pings.length > 0 ? r.pings[r.pings.length - 1].code : null,
+    pingHistory: r.pings.slice(-20).map(p => ({ ms: p.ms, code: p.code })),
+    pingCount: r.pings.length,
+    hasApiKey: !!getApiKey(config, r.providerKey),
+  }))
+}
+function getConfigPayload() {
+  // Sanitize — show which providers have keys, but not the actual keys
+  const providers = {}
+  for (const [key, src] of Object.entries(sources)) {
+    const rawKey = getApiKey(config, key)
+    providers[key] = {
+      name: src.name,
+      hasKey: !!rawKey,
+      maskedKey: rawKey ? maskApiKey(rawKey) : null,
+      enabled: isProviderEnabled(config, key),
+      modelCount: src.models?.length || 0,
+      cliOnly: src.cliOnly || false,
+    }
+  }
+  return { providers, totalModels: MODELS.length }
+}
+function maskApiKey(key) {
+  if (!key || typeof key !== 'string') return ''
+  if (key.length <= 8) return '••••••••'
+  return '••••••••' + key.slice(-4)
+}
+// ─── HTTP Server ─────────────────────────────────────────────────────────────
+const MIME_TYPES = {
+  '.html': 'text/html; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+  '.js': 'application/javascript; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.svg': 'image/svg+xml',
+  '.png': 'image/png',
+  '.ico': 'image/x-icon',
+}
+function serveFile(res, filename, contentType) {
+  try {
+    const content = readFileSync(join(__dirname, filename), 'utf8')
+    res.writeHead(200, { 'Content-Type': contentType, 'Cache-Control': 'no-cache' })
+    res.end(content)
+  } catch {
+    res.writeHead(404)
+    res.end('Not Found')
+  }
+}
+function serveDistFile(res, pathname) {
+  const filePath = join(__dirname, 'dist', pathname === '/' ? 'index.html' : pathname)
+  if (!existsSync(filePath)) {
+    serveFile(res, 'dist/index.html', 'text/html; charset=utf-8')
+    return
+  }
+  const ext = extname(filePath)
+  const ct = MIME_TYPES[ext] || 'application/octet-stream'
+  try {
+    const content = readFileSync(filePath)
+    res.writeHead(200, { 'Content-Type': ct, 'Cache-Control': ext === '.html' ? 'no-cache' : 'public, max-age=31536000, immutable' })
+    res.end(content)
+  } catch {
+    res.writeHead(404)
+    res.end('Not Found')
+  }
+}
+function handleRequest(req, res) {
+  // CORS for local dev
+  res.setHeader('Access-Control-Allow-Origin', '*')
+  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS')
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type')
+  if (req.method === 'OPTIONS') {
+    res.writeHead(204)
+    res.end()
+    return
+  }
+  const url = new URL(req.url, `http://${req.headers.host}`)
+  // ─── API: Reveal full key for a provider ───
+  const keyMatch = url.pathname.match(/^\/api\/key\/(.+)$/)
+  if (keyMatch) {
+    const providerKey = decodeURIComponent(keyMatch[1])
+    const rawKey = getApiKey(config, providerKey)
+    res.writeHead(200, { 'Content-Type': 'application/json' })
+    res.end(JSON.stringify({ key: rawKey || null }))
+    return
+  }
+  switch (url.pathname) {
+    case '/':
+      serveDistFile(res, '/')
+      break
+    case '/styles.css':
+    case '/app.js':
+      serveDistFile(res, url.pathname)
+      break
+    default:
+      if (url.pathname.startsWith('/assets/') || url.pathname.endsWith('.js') || url.pathname.endsWith('.css')) {
+        serveDistFile(res, url.pathname)
+        break
+      }
+      if (!url.pathname.startsWith('/api/')) {
+        res.writeHead(404)
+        res.end('Not Found')
+        break
+      }
+    case '/api/models':
+      res.writeHead(200, { 'Content-Type': 'application/json' })
+      res.end(JSON.stringify(getModelsPayload()))
+      break
+    case '/api/config':
+      res.writeHead(200, { 'Content-Type': 'application/json' })
+      res.end(JSON.stringify(getConfigPayload()))
+      break
+    case '/api/events':
+      // SSE endpoint
+      res.writeHead(200, {
+        'Content-Type': 'text/event-stream',
+        'Cache-Control': 'no-cache',
+        'Connection': 'keep-alive',
+      })
+      res.write(`data: ${JSON.stringify(getModelsPayload())}\n\n`)
+      sseClients.add(res)
+      req.on('close', () => sseClients.delete(res))
+      break
+    case '/api/settings':
+      if (req.method === 'POST') {
+        let body = ''
+        req.on('data', chunk => body += chunk)
+        req.on('end', () => {
+          try {
+            const settings = JSON.parse(body)
+            if (settings.apiKeys) {
+              for (const [key, value] of Object.entries(settings.apiKeys)) {
+                if (value) config.apiKeys[key] = value
+                else delete config.apiKeys[key]
+              }
+            }
+            if (settings.providers) {
+              for (const [key, value] of Object.entries(settings.providers)) {
+                if (!config.providers[key]) config.providers[key] = {}
+                config.providers[key].enabled = value.enabled !== false
+              }
+            }
+            // P2 fix: catch saveConfig failures and report to client
+            try {
+              saveConfig(config)
+            } catch (saveErr) {
+              res.writeHead(500, { 'Content-Type': 'application/json' })
+              res.end(JSON.stringify({ success: false, error: 'Failed to save config: ' + saveErr.message }))
+              return
+            }
+            res.writeHead(200, { 'Content-Type': 'application/json' })
+            res.end(JSON.stringify({ success: true }))
+          } catch (err) {
+            res.writeHead(400, { 'Content-Type': 'application/json' })
+            res.end(JSON.stringify({ error: err.message }))
+          }
+        })
+      } else {
+        res.writeHead(405)
+        res.end('Method Not Allowed')
+      }
+      break
+  }
+}
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+function checkPortInUse(port) {
+  return new Promise((resolve) => {
+    const s = createServer()
+    s.once('error', (err) => { if (err.code === 'EADDRINUSE') resolve(true); else resolve(false) })
+    s.once('listening', () => { s.close(); resolve(false) })
+    s.listen(port)
+  })
+}
+function openBrowser(url) {
+  const cmd = process.platform === 'darwin' ? 'open'
+    : process.platform === 'win32' ? 'start'
+    : 'xdg-open'
+  exec(`${cmd} "${url}"`, (err) => {
+    if (err) console.log(`  💡 Open manually: ${url}`)
+  })
+}
+// ─── Exports ─────────────────────────────────────────────────────────────────
+export async function startWebServer(port = 3333, { open = true } = {}) {
+  const alreadyRunning = await checkPortInUse(port)
+  const url = `http://localhost:${port}`
+  if (alreadyRunning) {
+    console.log()
+    console.log(`  ⚡ free-coding-models Web Dashboard already running`)
+    console.log(`  🌐 ${url}`)
+    console.log()
+    if (open) openBrowser(url)
+    return null
+  }
+  const server = createServer(handleRequest)
+  server.listen(port, () => {
+    console.log()
+    console.log(`  ⚡ free-coding-models Web Dashboard`)
+    console.log(`  🌐 ${url}`)
+    console.log(`  📊 Monitoring ${results.filter(r => !r.cliOnly).length} models across ${Object.keys(sources).length} providers`)
+    console.log()
+    console.log(`  Press Ctrl+C to stop`)
+    console.log()
+    if (open) openBrowser(url)
+  })
+  async function schedulePingLoop() {
+    await pingAllModels()
+    setTimeout(schedulePingLoop, 10_000)
+  }
+  schedulePingLoop()
+  return server
+}

package/web/src/App.jsx ADDED Viewed

@@ -0,0 +1,150 @@
+/**
+ * @file web/src/App.jsx
+ * @description Root application component — orchestrates all views, layout, SSE 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.
+ * @functions App → root component with all state and layout composition
+ */
+import { useState, useCallback, useEffect } from 'react'
+import { useSSE } from './hooks/useSSE.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'
+import ExportModal from './components/dashboard/ExportModal.jsx'
+import SettingsView from './components/settings/SettingsView.jsx'
+import AnalyticsView from './components/analytics/AnalyticsView.jsx'
+import ToastContainer from './components/atoms/ToastContainer.jsx'
+let toastIdCounter = 0
+export default function App() {
+  const { models, connected } = useSSE('/api/events')
+  const { theme, toggle: toggleTheme } = useTheme()
+  const [currentView, setCurrentView] = useState('dashboard')
+  const [selectedModel, setSelectedModel] = useState(null)
+  const [exportOpen, setExportOpen] = useState(false)
+  const [toasts, setToasts] = useState([])
+  const {
+    filtered,
+    filterTier, setFilterTier,
+    filterStatus, setFilterStatus,
+    filterProvider, setFilterProvider,
+    searchQuery, setSearchQuery,
+    sortColumn, sortDirection, toggleSort,
+  } = useFilter(models)
+  const providers = (() => {
+    const map = {}
+    models.forEach((m) => {
+      if (!map[m.providerKey]) map[m.providerKey] = { key: m.providerKey, name: m.origin, count: 0 }
+      map[m.providerKey].count++
+    })
+    return Object.values(map).sort((a, b) => a.name.localeCompare(b.name))
+  })()
+  const addToast = useCallback((message, type = 'info') => {
+    const id = ++toastIdCounter
+    setToasts((prev) => [...prev, { id, message, type }])
+  }, [])
+  const dismissToast = useCallback((id) => {
+    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 handleCloseDetail = useCallback(() => setSelectedModel(null), [])
+  useEffect(() => {
+    const handler = (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+        e.preventDefault()
+        if (currentView !== 'dashboard') setCurrentView('dashboard')
+      }
+      if (e.key === 'Escape') {
+        setSelectedModel(null)
+        setExportOpen(false)
+      }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [currentView])
+  return (
+    <>
+      <Sidebar
+        currentView={currentView}
+        onNavigate={setCurrentView}
+        onToggleTheme={toggleTheme}
+      />
+      <div className="app-content">
+        {currentView === 'dashboard' && (
+          <div className="view">
+            <Header
+              searchQuery={searchQuery}
+              onSearchChange={setSearchQuery}
+              onToggleTheme={toggleTheme}
+              onOpenSettings={() => setCurrentView('settings')}
+              onOpenExport={() => setExportOpen(true)}
+            />
+            <StatsBar models={models} />
+            <FilterBar
+              filterTier={filterTier}
+              setFilterTier={setFilterTier}
+              filterStatus={filterStatus}
+              setFilterStatus={setFilterStatus}
+              filterProvider={filterProvider}
+              setFilterProvider={setFilterProvider}
+              providers={providers}
+            />
+            <ModelTable
+              filtered={filtered}
+              onSelectModel={handleSelectModel}
+            />
+          </div>
+        )}
+        {currentView === 'settings' && (
+          <div className="view">
+            <SettingsView onToast={addToast} />
+          </div>
+        )}
+        {currentView === 'analytics' && (
+          <div className="view">
+            <AnalyticsView models={models} />
+          </div>
+        )}
+        <Footer />
+      </div>
+      <DetailPanel
+        model={selectedModel}
+        onClose={handleCloseDetail}
+      />
+      {exportOpen && (
+        <ExportModal
+          models={filtered}
+          onClose={() => setExportOpen(false)}
+          onToast={addToast}
+        />
+      )}
+      <ToastContainer toasts={toasts} dismissToast={dismissToast} />
+    </>
+  )
+}

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

@@ -0,0 +1,109 @@
+/**
+ * @file web/src/components/analytics/AnalyticsView.jsx
+ * @description Analytics dashboard page showing provider health, fastest models leaderboard, and tier distribution.
+ * 📖 Purely derived from the `models` SSE data. No API calls needed beyond the live model feed.
+ * @functions AnalyticsView → renders the three analytics cards
+ */
+import { useMemo } from 'react'
+import TierBadge from '../atoms/TierBadge.jsx'
+import styles from './AnalyticsView.module.css'
+const TIER_COLORS = {
+  'S+': '#ffd700', S: '#ff8c00', 'A+': '#00c8ff', A: '#3ddc84',
+  'A-': '#7ecf7e', 'B+': '#a8a8c8', B: '#808098', C: '#606078',
+}
+const TIERS = ['S+', 'S', 'A+', 'A', 'A-', 'B+', 'B', 'C']
+export default function AnalyticsView({ models }) {
+  const providerHealth = useMemo(() => {
+    const map = {}
+    models.forEach((m) => {
+      if (!map[m.origin]) map[m.origin] = { total: 0, online: 0, key: m.providerKey }
+      map[m.origin].total++
+      if (m.status === 'up') map[m.origin].online++
+    })
+    return Object.entries(map).sort((a, b) => (b[1].online / b[1].total) - (a[1].online / a[1].total))
+  }, [models])
+  const leaderboard = useMemo(() => {
+    const online = models.filter((m) => m.status === 'up' && m.avg !== Infinity && m.avg < 99000)
+    return [...online].sort((a, b) => a.avg - b.avg).slice(0, 10)
+  }, [models])
+  const tierCounts = useMemo(() => {
+    const counts = {}
+    models.forEach((m) => { counts[m.tier] = (counts[m.tier] || 0) + 1 })
+    const maxCount = Math.max(...Object.values(counts), 1)
+    return TIERS.map((t) => ({ tier: t, count: counts[t] || 0, pct: ((counts[t] || 0) / maxCount) * 100 }))
+  }, [models])
+  return (
+    <div className={styles.page}>
+      <div className={styles.pageHeader}>
+        <h1 className={styles.pageTitle}>📊 Analytics</h1>
+        <p className={styles.pageSubtitle}>Real-time insights across all providers and models</p>
+      </div>
+      <div className={styles.grid}>
+        <div className={`${styles.card} ${styles.cardWide}`}>
+          <h3 className={styles.cardTitle}>Provider Health Overview</h3>
+          <div className={styles.cardBody}>
+            {providerHealth.length === 0 ? (
+              <div className={styles.empty}>Waiting for data...</div>
+            ) : (
+              providerHealth.map(([name, data]) => {
+                const pct = data.total > 0 ? Math.round((data.online / data.total) * 100) : 0
+                const pctCls = pct > 70 ? styles.pctFast : pct > 30 ? styles.pctMedium : styles.pctSlow
+                return (
+                  <div key={name} className={styles.healthItem}>
+                    <span className={styles.healthName}>{name}</span>
+                    <div className={styles.healthBar}>
+                      <div className={styles.healthFill} style={{ width: `${pct}%` }} />
+                    </div>
+                    <span className={`${styles.healthPct} ${pctCls}`}>{pct}%</span>
+                  </div>
+                )
+              })
+            )}
+          </div>
+        </div>
+        <div className={styles.card}>
+          <h3 className={styles.cardTitle}>🏆 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>
+                    <span className={styles.leaderName}>{m.label}</span>
+                    <span className={styles.leaderLatency}>{m.avg}ms</span>
+                  </div>
+                )
+              })
+            )}
+          </div>
+        </div>
+        <div className={styles.card}>
+          <h3 className={styles.cardTitle}>Tier Distribution</h3>
+          <div className={styles.cardBody}>
+            {tierCounts.map(({ tier, count, pct }) => (
+              <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>
+                <span className={styles.tierCount}>{count}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}