npm - free-coding-models - Versions diffs - 0.3.35 → 0.3.36 - Mend

free-coding-models 0.3.35 → 0.3.36

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 (10) hide show

package/web/index.html ADDED Viewed

@@ -0,0 +1,318 @@
+<!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">
+  <link rel="stylesheet" href="/styles.css">
+</head>
+<body>
+  <!-- ─── Background Effects ─── -->
+  <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>
+  <!-- ─── Toast Container ─── -->
+  <div class="toast-container" id="toast-container"></div>
+  <!-- ─── Sidebar ─── -->
+  <aside class="sidebar" id="sidebar">
+    <div class="sidebar__logo">
+      <span class="sidebar__logo-icon">⚡</span>
+      <span class="sidebar__logo-text">FCM</span>
+    </div>
+    <nav class="sidebar__nav">
+      <button class="sidebar__nav-item sidebar__nav-item--active" data-view="dashboard" id="nav-dashboard" title="Dashboard">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
+        <span class="sidebar__nav-label">Dashboard</span>
+      </button>
+      <button class="sidebar__nav-item" data-view="settings" id="nav-settings" title="Settings">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+        <span class="sidebar__nav-label">Settings</span>
+      </button>
+      <button class="sidebar__nav-item" data-view="analytics" id="nav-analytics" title="Analytics">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
+        <span class="sidebar__nav-label">Analytics</span>
+      </button>
+    </nav>
+    <div class="sidebar__bottom">
+      <button class="sidebar__nav-item" id="sidebar-theme-toggle" title="Toggle Theme">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+        <span class="sidebar__nav-label">Theme</span>
+      </button>
+    </div>
+  </aside>
+  <!-- ─── Main Content ─── -->
+  <div class="app-content" id="app-content">
+    <!-- ═══════ DASHBOARD VIEW ═══════ -->
+    <div class="view" id="view-dashboard">
+      <!-- Header -->
+      <header class="header" id="header">
+        <div class="header__left">
+          <button class="btn btn--icon sidebar-toggle" id="sidebar-toggle" title="Toggle Sidebar">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+          </button>
+          <div class="logo">
+            <span class="logo__icon">⚡</span>
+            <span class="logo__text">free-coding-models</span>
+          </div>
+          <span class="header__version" id="version-badge">v0.3.35</span>
+        </div>
+        <div class="header__center">
+          <div class="search-bar" id="search-bar">
+            <svg class="search-bar__icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+            <input type="text" class="search-bar__input" id="search-input" placeholder="Search models, providers, tiers..." autocomplete="off">
+            <kbd class="search-bar__kbd">Ctrl+K</kbd>
+          </div>
+        </div>
+        <div class="header__right">
+          <button class="btn btn--icon" id="theme-toggle" title="Toggle theme">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+          </button>
+          <button class="btn btn--icon" id="export-btn" title="Export Data">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+          </button>
+          <button class="btn btn--primary" id="settings-btn">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+            Settings
+          </button>
+        </div>
+      </header>
+      <!-- Stats Bar -->
+      <section class="stats-bar" id="stats-bar">
+        <div class="stat-card" id="stat-total">
+          <div class="stat-card__icon">📊</div>
+          <div class="stat-card__body">
+            <div class="stat-card__value" id="stat-total-value">0</div>
+            <div class="stat-card__label">Total Models</div>
+          </div>
+        </div>
+        <div class="stat-card" id="stat-online">
+          <div class="stat-card__icon">🟢</div>
+          <div class="stat-card__body">
+            <div class="stat-card__value" id="stat-online-value">0</div>
+            <div class="stat-card__label">Online</div>
+          </div>
+        </div>
+        <div class="stat-card" id="stat-avg">
+          <div class="stat-card__icon">⚡</div>
+          <div class="stat-card__body">
+            <div class="stat-card__value" id="stat-avg-value">—</div>
+            <div class="stat-card__label">Avg Latency</div>
+          </div>
+        </div>
+        <div class="stat-card" id="stat-best">
+          <div class="stat-card__icon">🏆</div>
+          <div class="stat-card__body">
+            <div class="stat-card__value" id="stat-best-value">—</div>
+            <div class="stat-card__label">Fastest Model</div>
+          </div>
+        </div>
+        <div class="stat-card" id="stat-providers">
+          <div class="stat-card__icon">🌐</div>
+          <div class="stat-card__body">
+            <div class="stat-card__value" id="stat-providers-value">0</div>
+            <div class="stat-card__label">Providers</div>
+          </div>
+        </div>
+      </section>
+      <!-- Filters -->
+      <section class="filters" id="filters">
+        <div class="filters__group">
+          <label class="filter-label">Tier</label>
+          <div class="tier-filters" id="tier-filters">
+            <button class="tier-btn tier-btn--active" data-tier="all">All</button>
+            <button class="tier-btn" data-tier="S+">S+</button>
+            <button class="tier-btn" data-tier="S">S</button>
+            <button class="tier-btn" data-tier="A+">A+</button>
+            <button class="tier-btn" data-tier="A">A</button>
+            <button class="tier-btn" data-tier="A-">A-</button>
+            <button class="tier-btn" data-tier="B+">B+</button>
+            <button class="tier-btn" data-tier="B">B</button>
+            <button class="tier-btn" data-tier="C">C</button>
+          </div>
+        </div>
+        <div class="filters__group">
+          <label class="filter-label">Status</label>
+          <div class="status-filters" id="status-filters">
+            <button class="status-btn status-btn--active" data-status="all">All</button>
+            <button class="status-btn" data-status="up">Online</button>
+            <button class="status-btn" data-status="down">Offline</button>
+            <button class="status-btn" data-status="pending">Pending</button>
+          </div>
+        </div>
+        <div class="filters__group">
+          <label class="filter-label">Provider</label>
+          <select class="provider-select" id="provider-filter">
+            <option value="all">All Providers</option>
+          </select>
+        </div>
+        <div class="filters__spacer"></div>
+        <div class="filters__group">
+          <div class="live-indicator" id="live-indicator">
+            <span class="live-dot"></span>
+            <span class="live-text">LIVE</span>
+          </div>
+        </div>
+      </section>
+      <!-- Main Table -->
+      <main class="main" id="main">
+        <div class="table-container" id="table-container">
+          <table class="models-table" id="models-table">
+            <thead>
+              <tr>
+                <th class="th--rank sortable" data-sort="idx">#</th>
+                <th class="th--tier sortable" data-sort="tier">Tier</th>
+                <th class="th--model sortable" data-sort="label">Model</th>
+                <th class="th--provider sortable" data-sort="origin">Provider</th>
+                <th class="th--swe sortable" data-sort="sweScore">SWE %</th>
+                <th class="th--ctx sortable" data-sort="ctx">Context</th>
+                <th class="th--ping sortable" data-sort="latestPing">Ping</th>
+                <th class="th--avg sortable" data-sort="avg">Avg</th>
+                <th class="th--stability sortable" data-sort="stability">Stability</th>
+                <th class="th--verdict sortable" data-sort="verdict">Verdict</th>
+                <th class="th--uptime sortable" data-sort="uptime">Uptime</th>
+                <th class="th--sparkline">Trend</th>
+              </tr>
+            </thead>
+            <tbody id="table-body">
+              <tr class="loading-row">
+                <td colspan="12">
+                  <div class="loading-spinner">
+                    <div class="spinner"></div>
+                    <span>Connecting to ping engine...</span>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </main>
+    </div>
+    <!-- ═══════ SETTINGS VIEW ═══════ -->
+    <div class="view view--hidden" id="view-settings">
+      <div class="settings-page">
+        <div class="settings-page__header">
+          <h1 class="settings-page__title">⚙️ Provider Settings</h1>
+          <p class="settings-page__subtitle">Manage your API keys and provider configurations. Keys are stored locally in <code>~/.free-coding-models.json</code></p>
+        </div>
+        <!-- Settings Toolbar -->
+        <div class="settings-toolbar" id="settings-toolbar">
+          <div class="settings-toolbar__search">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+            <input type="text" id="settings-search" placeholder="Search providers..." autocomplete="off">
+          </div>
+          <div class="settings-toolbar__actions">
+            <button class="btn" id="settings-expand-all">Expand All</button>
+            <button class="btn" id="settings-collapse-all">Collapse All</button>
+          </div>
+        </div>
+        <!-- Provider Cards Container -->
+        <div class="settings-providers" id="settings-providers">
+          <!-- Populated by JS -->
+        </div>
+      </div>
+    </div>
+    <!-- ═══════ ANALYTICS VIEW ═══════ -->
+    <div class="view view--hidden" id="view-analytics">
+      <div class="analytics-page">
+        <div class="analytics-page__header">
+          <h1 class="analytics-page__title">📊 Analytics</h1>
+          <p class="analytics-page__subtitle">Real-time insights across all providers and models</p>
+        </div>
+        <div class="analytics-grid" id="analytics-grid">
+          <!-- Provider Health Overview -->
+          <div class="analytics-card analytics-card--wide" id="analytics-provider-health">
+            <h3 class="analytics-card__title">Provider Health Overview</h3>
+            <div class="analytics-card__body" id="provider-health-body">
+              <!-- Populated by JS -->
+            </div>
+          </div>
+          <!-- Top 10 Fastest -->
+          <div class="analytics-card" id="analytics-leaderboard">
+            <h3 class="analytics-card__title">🏆 Fastest Models</h3>
+            <div class="analytics-card__body" id="leaderboard-body">
+              <!-- Populated by JS -->
+            </div>
+          </div>
+          <!-- Tier Distribution -->
+          <div class="analytics-card" id="analytics-tier-dist">
+            <h3 class="analytics-card__title">Tier Distribution</h3>
+            <div class="analytics-card__body" id="tier-dist-body">
+              <!-- Populated by JS -->
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- ─── Footer ─── -->
+    <footer class="footer">
+      <div class="footer__left">
+        <span>Made with ❤️ by <a href="https://vavanessa.dev" target="_blank">Vava-Nessa</a></span>
+      </div>
+      <div class="footer__right">
+        <a href="https://github.com/vava-nessa/free-coding-models" target="_blank">GitHub</a>
+        <a href="https://discord.gg/ZTNFHvvCkU" target="_blank">Discord</a>
+      </div>
+    </footer>
+  </div>
+  <!-- ─── Model Detail Panel ─── -->
+  <div class="detail-panel" id="detail-panel" hidden>
+    <div class="detail-panel__header">
+      <h3 class="detail-panel__title" id="detail-title">Model Details</h3>
+      <button class="detail-panel__close" id="detail-close">&times;</button>
+    </div>
+    <div class="detail-panel__body" id="detail-body">
+      <!-- Populated by JS -->
+    </div>
+  </div>
+  <!-- ─── Export Modal ─── -->
+  <div class="modal-overlay" id="export-modal" hidden>
+    <div class="modal">
+      <div class="modal__header">
+        <h2 class="modal__title">📤 Export Data</h2>
+        <button class="modal__close" id="export-close">&times;</button>
+      </div>
+      <div class="modal__body">
+        <div class="export-options">
+          <button class="export-option" id="export-json">
+            <span class="export-option__icon">{ }</span>
+            <span class="export-option__label">Export as JSON</span>
+            <span class="export-option__desc">Full model data with all metrics</span>
+          </button>
+          <button class="export-option" id="export-csv">
+            <span class="export-option__icon">📊</span>
+            <span class="export-option__label">Export as CSV</span>
+            <span class="export-option__desc">Spreadsheet-compatible format</span>
+          </button>
+          <button class="export-option" id="export-clipboard">
+            <span class="export-option__icon">📋</span>
+            <span class="export-option__label">Copy to Clipboard</span>
+            <span class="export-option__desc">Copy model summary as text</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="/app.js" type="module"></script>
+</body>
+</html>

package/web/server.js ADDED Viewed

@@ -0,0 +1,317 @@
+/**
+ * @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 } from 'node:fs'
+import { join, dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+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 ─────────────────────────────────────────────────────────────
+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 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 '/':
+      serveFile(res, 'index.html', 'text/html; charset=utf-8')
+      break
+    case '/styles.css':
+      serveFile(res, 'styles.css', 'text/css; charset=utf-8')
+      break
+    case '/app.js':
+      serveFile(res, 'app.js', 'application/javascript; charset=utf-8')
+      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
+    default:
+      res.writeHead(404)
+      res.end('Not Found')
+  }
+}
+// ─── Exports ─────────────────────────────────────────────────────────────────
+export async function startWebServer(port = 3333) {
+  const server = createServer(handleRequest)
+  server.listen(port, () => {
+    console.log()
+    console.log(`  ⚡ free-coding-models Web Dashboard`)
+    console.log(`  🌐 http://localhost:${port}`)
+    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()
+  })
+  // P1 fix: serialize ping rounds — each round starts only after the
+  // previous one finishes, preventing overlapping concurrent mutations.
+  async function schedulePingLoop() {
+    await pingAllModels()
+    setTimeout(schedulePingLoop, 10_000)
+  }
+  schedulePingLoop()
+  return server
+}