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

free-coding-models 0.3.36 → 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 -1798
package/README.md +4 -1
package/bin/free-coding-models.js +1 -1
package/package.json +11 -2
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 +8 -2
package/web/index.html +2 -300
package/web/server.js +80 -15
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/{app.js → app.legacy.js} +0 -0
/package/web/{styles.css → styles.legacy.css} +0 -0

package/web/index.html CHANGED Viewed

@@ -8,311 +8,13 @@
   <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>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
 </body>
 </html>

package/web/server.js CHANGED Viewed

@@ -18,9 +18,10 @@
  */
 import { createServer } from 'node:http'
-import { readFileSync } from 'node:fs'
-import { join, dirname } from 'node:path'
+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'
@@ -174,6 +175,16 @@ function maskApiKey(key) {
 // ─── 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')
@@ -185,6 +196,24 @@ function serveFile(res, filename, contentType) {
   }
 }
+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', '*')
@@ -211,17 +240,26 @@ function handleRequest(req, res) {
   switch (url.pathname) {
     case '/':
-      serveFile(res, 'index.html', 'text/html; charset=utf-8')
+      serveDistFile(res, '/')
       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')
+      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()))
@@ -283,30 +321,57 @@ function handleRequest(req, res) {
         res.end('Method Not Allowed')
       }
       break
-    default:
-      res.writeHead(404)
-      res.end('Not Found')
   }
 }
+// ─── 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) {
+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(`  🌐 http://localhost:${port}`)
+    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)
   })
-  // 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)

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} />
+    </>
+  )
+}