free-coding-models 0.5.5 → 0.5.8

package/web/src/App.jsx

@@ -1,24 +1,32 @@
 /**
  * @file web/src/App.jsx
  * @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).
+ * connection, toast notifications, and global state. M2 layout: no sidebar, header
+ * menu + ⌘K palette, full Settings parity, Help + Changelog modals, UpdateChip,
+ * URL write-back.
  *
- * 📖 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)
+ * 📖 M2 additions on top of M1:
+ * 📖   - Full command palette (TUI registry via `buildCommandPaletteEntries`)
+ * 📖   - HelpView modal (TUI parity help)
+ * 📖   - ChangelogView modal (2-phase: index + details)
+ * 📖   - UpdateChip in header (polls /api/version, popover with "Update now" + "What's new")
+ * 📖   - URL write-back (every filter / sort / view / palette / toolMode change
+ * 📖     updates the URL via history.replaceState, debounced at 80ms)
+ * 📖   - M3 Web endpoint install flow: writes tool config only; never starts CLIs.
+ * 📖   - New Settings rows: theme dropdown, favorites mode toggle, startup AI scan
+ * 📖     toggle, shell-env toggle, legacy proxy cleanup button, open Changelog link,
+ * 📖     update status row, per-provider test key button
  *
  * @functions App → root component with all state and layout composition
  */
-import { useState, useCallback, useEffect, useRef } from 'react'
+import { useState, useCallback, useEffect, useRef, useMemo } 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 { useToolMode } from './hooks/useToolMode.js'
 import { useUrlState } from './hooks/useUrlState.js'
+import { useUpdateChecker } from './hooks/useUpdateChecker.js'
 import Header from './components/layout/Header.jsx'
 import Footer from './components/layout/Footer.jsx'
 import FilterBar from './components/dashboard/FilterBar.jsx'
@@ -28,69 +36,147 @@ import ExportModal from './components/dashboard/ExportModal.jsx'
 import SettingsView from './components/settings/SettingsView.jsx'
 import AnalyticsView from './components/analytics/AnalyticsView.jsx'
 import CommandPalette from './components/palette/CommandPalette.jsx'
+import HelpView from './components/help/HelpView.jsx'
+import ChangelogView from './components/changelog/ChangelogView.jsx'
+import UpdateChip from './components/update/UpdateChip.jsx'
+import RecommendView from './components/recommend/RecommendView.jsx'
+import IncompatibleFallbackModal from './components/launch/IncompatibleFallbackModal.jsx'
+import RouterView from './components/router/RouterView.jsx'
+import InstalledModelsView from './components/installed/InstalledModelsView.jsx'
+import InstallEndpointsView from './components/install/InstallEndpointsView.jsx'
 import ToastContainer from './components/atoms/ToastContainer.jsx'
+import { isModelCompatibleWithTool } from '../../src/core/tool-metadata.js'
 
 let toastIdCounter = 0
 
-// 📖 Map current view to the header nav id. M1 only ships dashboard/settings/analytics;
-// 📖 recommend/router/help/changelog/install-endpoints/installed-models are wired but
-// 📖 still show a "Coming in M2/M3/M4" toast from the header for now.
 const VIEW_TO_NAV = {
   dashboard: 'dashboard',
   settings: 'settings',
   analytics: 'analytics',
   recommend: 'recommend',
   router: 'router',
-  help: 'help',
-  changelog: 'changelog',
-  'install-endpoints': 'install-endpoints',
-  'installed-models': 'installed-models',
 }
 
 export default function App() {
-  const { models, connected, nextPingAt, isPinging, pingMode, globalBenchmarkRunning, globalBenchmarkTotal, globalBenchmarkCompleted, updateStatus } = useSocket()
+  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 [helpOpen, setHelpOpen] = useState(false)
+  const [changelogOpen, setChangelogOpen] = useState(false)
+  const [changelogDefaultVersion, setChangelogDefaultVersion] = useState(null)
+  const [recommendOpen, setRecommendOpen] = useState(false)
+  const [routerOpen, setRouterOpen] = useState(false)
+  const [installedModelsOpen, setInstalledModelsOpen] = useState(false)
+  const [installEndpointsOpen, setInstallEndpointsOpen] = useState(false)
+  const [incompatibleRequest, setIncompatibleRequest] = useState(null)
   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
-  })
+  // ── 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 {
     filtered,
     filterTier, setFilterTier,
     filterStatus, setFilterStatus,
     filterProvider, setFilterProvider,
-    searchQuery, setSearchQuery,
-    sortColumn, sortDirection, toggleSort,
     filterVerdict, setFilterVerdict,
     filterHealth, setFilterHealth,
     visibilityMode, setVisibilityMode,
+    searchQuery, setSearchQuery,
     customTextFilter, setCustomTextFilter,
+    sortColumn, sortDirection, setSortColumn, setSortDirection, toggleSort,
     resetView,
   } = useFilter(models)
 
-  // 📖 Favorites — single source of truth shared with the TUI via ~/.free-coding-models.json.
+  const { toolMode, setToolMode, cycleToolMode } = useToolMode({ onToast: addToast })
+
+  // 📖 URL deep-linking (M2 = read + write). Hydrates on mount, then pushes
+  // 📖 every change back via history.replaceState (debounced 80ms).
+  useUrlState({
+    currentView, setCurrentView,
+    filterState: {
+      filterTier, setFilterTier,
+      filterStatus, setFilterStatus,
+      filterProvider, setFilterProvider,
+      filterVerdict, setFilterVerdict,
+      filterHealth, setFilterHealth,
+      sortColumn, sortDirection, setSortColumn, setSortDirection, toggleSort,
+      setSearchQuery,
+      filterState: null, // sentinel; useFilter doesn't expose this name
+      searchQuery,
+    },
+    paletteOpen, setPaletteOpen,
+    toolMode, setToolMode,
+  })
+
+  // 📖 Favorites — single source of truth shared with the TUI.
   const favorites = useFavorites({ models })
 
+  // ── M3 endpoint flow: compat guard → /api/install-endpoint → fallback modal ──
+  const handleInstallEndpoint = useCallback(async (model, overrideMode = null) => {
+    const mode = overrideMode || toolMode || 'opencode'
+    if (!model) return
+    if (!isModelCompatibleWithTool(model.providerKey, mode)) {
+      setIncompatibleRequest({ model, toolMode: mode })
+      return
+    }
+    try {
+      const resp = await fetch('/api/install-endpoint', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ providerKey: model.providerKey, modelId: model.modelId, toolMode: mode }),
+      })
+      const payload = await resp.json().catch(() => ({}))
+      if (resp.status === 422 && payload.code === 'incompatible_model') {
+        setIncompatibleRequest({ model, toolMode: mode })
+        return
+      }
+      if (!resp.ok) throw new Error(payload.error || `HTTP ${resp.status}`)
+      addToast(`Endpoint installed for ${model.label} in ${mode}. Start the tool yourself.`, 'success')
+    } catch (err) {
+      addToast(`Endpoint install failed: ${err.message}`, 'error')
+    }
+  }, [addToast, toolMode])
+
+  const handleSwitchToolAndInstall = useCallback(async (mode, model) => {
+    await setToolMode(mode)
+    setIncompatibleRequest(null)
+    await handleInstallEndpoint(model, mode)
+  }, [handleInstallEndpoint, setToolMode])
+
+  const handlePinAndInstall = useCallback(async (model) => {
+    if (!favorites.isFavorite(model)) await favorites.toggle(model)
+    await handleInstallEndpoint(model)
+  }, [favorites, handleInstallEndpoint])
+
+  // 📖 Update checker (5-minute poll). Returns `updateAvailable` for the chip.
+  const {
+    localVersion, latestVersion, updateAvailable, runUpdate, checkNow, error: updateError,
+  } = useUpdateChecker({ onToast: addToast })
+
   // 📖 Build the provider list for the FilterBar dropdown.
-  const providers = (() => {
+  const providers = useMemo(() => {
     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))
-  })()
+  }, [models])
 
   // ── Global benchmark (AI Speed Test) ─────────────────────────────────────
   const handleBenchmark = useCallback(async () => {
@@ -118,35 +204,21 @@ export default function App() {
       })
       if (!resp.ok && resp.status !== 202) {
         const err = await resp.json().catch(() => ({}))
-        addToast?.(`Benchmark failed: ${err?.error || resp.statusText}`, 'error')
+        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))
-  }, [])
+  }, [addToast])
 
   // ── Selection / detail panel ─────────────────────────────────────────────
   const handleSelectModel = useCallback((model) => {
     setSelectedModel(model)
     lastActivityRef.current = Date.now()
   }, [])
-
   const handleCloseDetail = useCallback(() => setSelectedModel(null), [])
 
-  // ── Ping mode change → server → broadcast ───────────────────────────────
+  // ── Ping mode change → server → broadcast ─────────────────────────────
   const handlePingModeChange = useCallback(async (mode) => {
     try {
       await fetch(`/api/ping-mode?action=${mode}`, { method: 'POST' })
@@ -155,55 +227,68 @@ export default function App() {
 
   // ── Navigation handler (Header nav + overflow menu) ──────────────────────
   const handleNavigate = useCallback((viewId) => {
+    // 📖 'help' / 'changelog' / 'recommend' / 'router' open modals (M2) or
+    // 📖 toasts (M3/M4) — they don't switch the currentView.
+    if (viewId === 'help') { setHelpOpen(true); return }
+    if (viewId === 'changelog') { setChangelogOpen(true); setChangelogDefaultVersion(null); return }
+    if (viewId === 'recommend') { setRecommendOpen(true); return }
+    if (viewId === 'router') { setRouterOpen(true); return }
+    if (viewId === 'install-endpoints') { setInstallEndpointsOpen(true); return }
+    if (viewId === 'installed-models') { setInstalledModelsOpen(true); return }
     setCurrentView(VIEW_TO_NAV[viewId] || viewId)
     lastActivityRef.current = Date.now()
-  }, [])
+  }, [addToast])
 
   // ── Reset view (N key equivalent) ────────────────────────────────────────
   const handleResetView = useCallback(() => {
     resetView()
     setSearchQuery('')
     addToast('View reset to defaults.', 'info')
-  }, [resetView, setSearchQuery, addToast])
+  }, [addToast, resetView, setSearchQuery])
+
+  // ── Changelog open with optional version (e.g. from UpdateChip "What's new") ─
+  const openChangelogAt = useCallback((version) => {
+    setChangelogDefaultVersion(version)
+    setChangelogOpen(true)
+  }, [])
 
-  // ── Keyboard shortcuts: only ⌘K / Ctrl+P for the palette ────────────────
+  // ── Keyboard shortcuts: only ⌘K / Ctrl+P for the palette, Esc for any modal ─
   useEffect(() => {
     const handler = (e) => {
       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()
         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') {
         if (paletteOpen) { setPaletteOpen(false); return }
+        if (helpOpen) { setHelpOpen(false); return }
+        if (changelogOpen) { setChangelogOpen(false); return }
+        if (recommendOpen) { setRecommendOpen(false); return }
+        if (routerOpen) { setRouterOpen(false); return }
+        if (installEndpointsOpen) { setInstallEndpointsOpen(false); return }
+        if (installedModelsOpen) { setInstalledModelsOpen(false); return }
+        if (incompatibleRequest) { setIncompatibleRequest(null); return }
         if (selectedModel) { setSelectedModel(null); return }
         if (exportOpen) { setExportOpen(false); return }
       }
     }
     window.addEventListener('keydown', handler)
     return () => window.removeEventListener('keydown', handler)
-  }, [paletteOpen, selectedModel, exportOpen])
+  }, [paletteOpen, helpOpen, changelogOpen, recommendOpen, routerOpen, installEndpointsOpen, installedModelsOpen, incompatibleRequest, 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())
+    if (currentView === 'recommend') {
+      setRecommendOpen(true)
+      setCurrentView('dashboard')
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [currentView])
 
   return (
     <>
@@ -223,17 +308,22 @@ export default function App() {
           modelsCount={filtered.length}
           theme={theme}
           onToast={addToast}
+          toolMode={toolMode}
+          onSetToolMode={setToolMode}
+          onCycleToolMode={cycleToolMode}
+          updateSlot={
+            <UpdateChip
+              updateAvailable={updateAvailable}
+              latestVersion={latestVersion}
+              onRunUpdate={runUpdate}
+              onOpenChangelog={openChangelogAt}
+            />
+          }
         />
 
-        {updateStatus?.warningMessage && (
-          <div className="update-warning-banner" role="alert">
-            {updateStatus.warningMessage} — restart or run npm install -g free-coding-models@latest when your network/permissions are fixed.
-          </div>
-        )}
-
         <div className="app-content">
           {currentView === 'dashboard' && (
-            <div className="view">
+            <main className="view">
               <FilterBar
                 filterTier={filterTier}
                 setFilterTier={setFilterTier}
@@ -259,22 +349,29 @@ export default function App() {
                 globalBenchmarkRunning={globalBenchmarkRunning}
                 globalBenchmarkTotal={globalBenchmarkTotal}
                 globalBenchmarkCompleted={globalBenchmarkCompleted}
+                toolMode={toolMode}
               />
               <ModelTable
                 filtered={filtered}
                 onSelectModel={handleSelectModel}
                 onBenchmarkRow={handleBenchmarkRow}
+                onLaunch={handleInstallEndpoint}
                 favorites={favorites}
                 sortColumn={sortColumn}
                 sortDirection={sortDirection}
                 onSort={toggleSort}
+                toolMode={toolMode}
               />
-            </div>
+            </main>
           )}
 
           {currentView === 'settings' && (
             <div className="view">
-              <SettingsView onToast={addToast} />
+              <SettingsView
+                onToast={addToast}
+                onOpenChangelog={(version) => { setChangelogDefaultVersion(version); setChangelogOpen(true) }}
+                onCheckForUpdate={() => { checkNow(); addToast?.('Checking for updates…', 'info') }}
+              />
             </div>
           )}
 
@@ -293,6 +390,12 @@ export default function App() {
         onClose={handleCloseDetail}
         favorites={favorites}
         onBenchmark={handleBenchmarkRow}
+        onLaunch={handleInstallEndpoint}
+        toolMode={toolMode}
+        onSetToolMode={setToolMode}
+        onCycleToolMode={cycleToolMode}
+        models={models}
+        onOpenFallback={(model) => setIncompatibleRequest({ model, toolMode })}
         onToast={addToast}
       />
 
@@ -310,12 +413,71 @@ export default function App() {
           onNavigate={handleNavigate}
           onCycleTheme={cycleTheme}
           onResetView={handleResetView}
+          onSetPingMode={handlePingModeChange}
+          onOpenHelp={() => setHelpOpen(true)}
+          onOpenChangelog={() => { setChangelogDefaultVersion(null); setChangelogOpen(true) }}
+          onExport={() => setExportOpen(true)}
+          onRunUpdate={runUpdate}
           currentView={currentView}
           theme={theme}
           pingMode={pingMode}
-          onSetPingMode={handlePingModeChange}
+          models={models}
+          updateAvailable={updateAvailable}
+          latestVersion={latestVersion}
+          onToast={addToast}
+        />
+      )}
+
+      {recommendOpen && (
+        <RecommendView
+          onClose={() => setRecommendOpen(false)}
+          toolMode={toolMode}
+          onLaunch={handleInstallEndpoint}
+          onPinAndLaunch={handlePinAndInstall}
+          onToast={addToast}
+        />
+      )}
+
+      {incompatibleRequest && (
+        <IncompatibleFallbackModal
+          request={incompatibleRequest}
+          models={models}
+          onClose={() => setIncompatibleRequest(null)}
+          onSwitchToolLaunch={handleSwitchToolAndInstall}
+          onLaunchSimilar={(candidate) => {
+            setIncompatibleRequest(null)
+            const model = models.find((m) => m.providerKey === candidate.providerKey && m.modelId === candidate.modelId) || candidate
+            void handleInstallEndpoint(model)
+          }}
+        />
+      )}
+
+      {helpOpen && <HelpView onClose={() => setHelpOpen(false)} />}
+      {changelogOpen && (
+        <ChangelogView
+          onClose={() => setChangelogOpen(false)}
+          defaultVersion={changelogDefaultVersion}
+        />
+      )}
+
+      {routerOpen && (
+        <RouterView
+          onClose={() => setRouterOpen(false)}
+          onToast={addToast}
+        />
+      )}
+
+      {installedModelsOpen && (
+        <InstalledModelsView
+          onClose={() => setInstalledModelsOpen(false)}
+          onToast={addToast}
+        />
+      )}
+
+      {installEndpointsOpen && (
+        <InstallEndpointsView
+          onClose={() => setInstallEndpointsOpen(false)}
           onToast={addToast}
-          onExport={() => setExportOpen(true)}
         />
       )}
 

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

@@ -7,6 +7,7 @@
 import { useMemo } from 'react'
 import { IconActivity, IconTrophy } from '@tabler/icons-react'
 import TierBadge from '../atoms/TierBadge.jsx'
+import TokenUsagePanel from './TokenUsagePanel.jsx'
 import styles from './AnalyticsView.module.css'
 
 // 📖 TIER_COLORS is now derived from CSS custom properties so the chart fills
@@ -138,6 +139,9 @@ export default function AnalyticsView({ models }) {
           </div>
         </div>
       </div>
+
+      {/* M4: Token Usage — always shown, displays "no data" if router hasn't been used */}
+      <TokenUsagePanel />
     </div>
   )
 }

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

@@ -0,0 +1,105 @@
+/**
+ * @file web/src/components/analytics/TokenUsagePanel.jsx
+ * @description Token Usage sub-section inside Analytics — 7-day chart, top models/providers.
+ * 📖 M4: Uses useTokenUsage hook, pure CSS bars (no charting library).
+ */
+import { useTokenUsage } from '../../hooks/useTokenUsage.js'
+import styles from './TokenUsagePanel.module.css'
+
+function formatTokens(n) {
+  if (typeof n !== 'number' || !Number.isFinite(n)) return '0'
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`
+  return String(Math.round(n))
+}
+
+export default function TokenUsagePanel() {
+  const { data, loading } = useTokenUsage()
+
+  if (loading) {
+    return (
+      <div className={styles.card}>
+        <h3 className={styles.cardTitle}>Token Usage</h3>
+        <div className={styles.empty}>Loading…</div>
+      </div>
+    )
+  }
+
+  if (!data || !data.hasData) {
+    return (
+      <div className={styles.card}>
+        <h3 className={styles.cardTitle}>Token Usage</h3>
+        <div className={styles.empty}>No token data yet. Start the router and send requests to track usage.</div>
+      </div>
+    )
+  }
+
+  const maxDayTokens = Math.max(...data.sevenDays.map(d => d.totalTokens), 1)
+
+  return (
+    <>
+      {/* Summary cards */}
+      <div className={styles.summaryGrid}>
+        <div className={styles.summaryCard}>
+          <span className={styles.summaryLabel}>Today</span>
+          <span className={styles.summaryValue}>{formatTokens(data.today.totalTokens)}</span>
+          <span className={styles.summarySub}>{data.today.requests} requests</span>
+        </div>
+        <div className={styles.summaryCard}>
+          <span className={styles.summaryLabel}>All Time</span>
+          <span className={styles.summaryValue}>{formatTokens(data.allTime.totalTokens)}</span>
+          <span className={styles.summarySub}>{data.allTime.requests} requests</span>
+        </div>
+      </div>
+
+      {/* 7-day chart */}
+      <div className={styles.card}>
+        <h3 className={styles.cardTitle}>7-Day Usage</h3>
+        <div className={styles.chart}>
+          {data.sevenDays.map((day) => (
+            <div key={day.date} className={styles.chartBar}>
+              <div
+                className={styles.chartFill}
+                style={{ height: `${Math.max(2, (day.totalTokens / maxDayTokens) * 100)}%` }}
+                title={`${day.date}: ${formatTokens(day.totalTokens)} tokens`}
+              />
+              <span className={styles.chartLabel}>{day.label}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Top Models */}
+      {data.topModels.length > 0 && (
+        <div className={styles.card}>
+          <h3 className={styles.cardTitle}>Top Models</h3>
+          <div className={styles.topList}>
+            {data.topModels.map((m) => (
+              <div key={m.key} className={styles.topRow}>
+                <span className={styles.topKey}>{m.key}</span>
+                <span className={styles.topVal}>{formatTokens(m.total)} tokens</span>
+                <span className={styles.topReq}>{m.requests} req</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Top Providers */}
+      {data.topProviders.length > 0 && (
+        <div className={styles.card}>
+          <h3 className={styles.cardTitle}>Top Providers</h3>
+          <div className={styles.topList}>
+            {data.topProviders.map((p) => (
+              <div key={p.key} className={styles.topRow}>
+                <span className={styles.topKey}>{p.key}</span>
+                <span className={styles.topVal}>{formatTokens(p.total)} tokens</span>
+                <span className={styles.topReq}>{p.requests} req</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </>
+  )
+}