free-coding-models 0.5.0 → 0.5.4

package/web/src/App.jsx

@@ -1,37 +1,69 @@
 /**
  * @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.
+ * @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 { useSSE } from './hooks/useSSE.js'
+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 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 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 } = useSSE('/api/events')
-  const { theme, toggle: toggleTheme } = useTheme()
+  const { models, connected, nextPingAt, isPinging, pingMode, globalBenchmarkRunning, globalBenchmarkTotal, globalBenchmarkCompleted } = useSocket()
+  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,
@@ -40,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) => {
@@ -51,96 +92,202 @@ export default function App() {
     return Object.values(map).sort((a, b) => a.name.localeCompare(b.name))
   })()
 
+  // ── Global benchmark (AI Speed Test) ─────────────────────────────────────
+  const handleBenchmark = useCallback(async () => {
+    if (globalBenchmarkRunning) return
+    try {
+      await fetch('/api/global-benchmark', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          models: filtered.map((model) => ({ providerKey: model.providerKey, modelId: model.modelId })),
+        }),
+      })
+    } catch (err) {
+      console.error('[Benchmark] Failed to start global benchmark:', err.message)
+    }
+  }, [filtered, globalBenchmarkRunning])
+
+  // ── 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))
   }, [])
 
-  const handleSelectModel = useCallback((modelId) => {
-    const model = models.find((m) => m.modelId === modelId)
-    if (model) setSelectedModel(model)
-  }, [models])
+  // ── Selection / detail panel ─────────────────────────────────────────────
+  const handleSelectModel = useCallback((model) => {
+    setSelectedModel(model)
+    lastActivityRef.current = Date.now()
+  }, [])
 
   const handleCloseDetail = useCallback(() => setSelectedModel(null), [])
 
+  // ── 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}
-      />
+      <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)}
-            />
-            <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>
-        )}
-
-        {currentView === 'map' && (
-          <div className="view">
-            <MapView />
-          </div>
-        )}
-
-        <Footer />
+          <Footer />
+        </div>
       </div>
 
       <DetailPanel
         model={selectedModel}
         onClose={handleCloseDetail}
+        favorites={favorites}
+        onBenchmark={handleBenchmarkRow}
+        onToast={addToast}
       />
 
       {exportOpen && (
@@ -151,6 +298,21 @@ 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

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

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

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

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