free-coding-models 0.5.86 → 0.5.87

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

@@ -1,147 +0,0 @@
-/**
- * @file web/src/components/analytics/AnalyticsView.jsx
- * @description Analytics dashboard page showing provider health, fastest models leaderboard, and tier distribution.
- * 📖 Purely derived from the `models` SSE data. No API calls needed beyond the live model feed.
- * @functions AnalyticsView → renders the three analytics cards
- */
-import { useMemo } from 'react'
-import { 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
-// 📖 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 }) {
-  const providerHealth = useMemo(() => {
-    const map = {}
-    models.forEach((m) => {
-      if (!map[m.origin]) map[m.origin] = { total: 0, online: 0, key: m.providerKey }
-      map[m.origin].total++
-      if (m.status === 'up') map[m.origin].online++
-    })
-    return Object.entries(map).sort((a, b) => (b[1].online / b[1].total) - (a[1].online / a[1].total))
-  }, [models])
-
-  const leaderboard = useMemo(() => {
-    const online = models.filter((m) => m.status === 'up' && m.avg !== Infinity && m.avg < 99000)
-    return [...online].sort((a, b) => a.avg - b.avg).slice(0, 10)
-  }, [models])
-
-  const tierCounts = useMemo(() => {
-    const counts = {}
-    models.forEach((m) => { counts[m.tier] = (counts[m.tier] || 0) + 1 })
-    const maxCount = Math.max(...Object.values(counts), 1)
-    return TIERS.map((t) => ({ tier: t, count: counts[t] || 0, pct: ((counts[t] || 0) / maxCount) * 100 }))
-  }, [models])
-
-  return (
-    <div className={styles.page}>
-      <div className={styles.pageHeader}>
-        <h1 className={styles.pageTitle}>
-          <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>
-
-      <div className={styles.grid}>
-        <div className={`${styles.card} ${styles.cardWide}`}>
-          <h3 className={styles.cardTitle}>Provider Health Overview</h3>
-          <div className={styles.cardBody}>
-            {providerHealth.length === 0 ? (
-              <div className={styles.empty}>Waiting for data...</div>
-            ) : (
-              providerHealth.map(([name, data]) => {
-                const pct = data.total > 0 ? Math.round((data.online / data.total) * 100) : 0
-                const pctCls = pct > 70 ? styles.pctFast : pct > 30 ? styles.pctMedium : styles.pctSlow
-                return (
-                  <div key={name} className={styles.healthItem}>
-                    <span className={styles.healthName}>{name}</span>
-                    <div className={styles.healthBar}>
-                      <div className={styles.healthFill} style={{ width: `${pct}%` }} />
-                    </div>
-                    <span className={`${styles.healthPct} ${pctCls}`}>{pct}%</span>
-                  </div>
-                )
-              })
-            )}
-          </div>
-        </div>
-
-        <div className={styles.card}>
-          <h3 className={styles.cardTitle} 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}`] : ''
-                return (
-                  <div key={m.modelId} className={styles.leaderItem}>
-                    <div className={`${styles.leaderRank} ${rankCls}`}>{i + 1}</div>
-                    <span className={styles.leaderName}>{m.label}</span>
-                    <span className={styles.leaderLatency}>{m.avg}ms</span>
-                  </div>
-                )
-              })
-            )}
-          </div>
-        </div>
-
-        <div className={styles.card}>
-          <h3 className={styles.cardTitle}>Tier Distribution</h3>
-          <div className={styles.cardBody}>
-            {tierCounts.map(({ tier, count, pct }) => (
-              <div key={tier} className={styles.tierItem}>
-                <div className={styles.tierBadge}><TierBadge tier={tier} /></div>
-                <div className={styles.tierBar}>
-                  <div className={styles.tierFill} style={{ width: `${pct}%`, background: tierColor(tier) }} />
-                </div>
-                <span className={styles.tierCount}>{count}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      {/* M4: Token Usage — always shown, displays "no data" if router hasn't been used */}
-      <TokenUsagePanel />
-    </div>
-  )
-}

package/web/src/components/analytics/AnalyticsView.module.css

@@ -1,190 +0,0 @@
-.page {
-  padding: 24px;
-}
-
-.pageHeader {
-  margin-bottom: 24px;
-}
-
-.pageTitle {
-  font-size: 24px;
-  font-weight: 800;
-  margin: 0 0 6px;
-}
-
-.pageSubtitle {
-  font-size: 13px;
-  color: var(--color-text-muted);
-  margin: 0;
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 16px;
-}
-
-.card {
-  background: var(--color-bg-card);
-  backdrop-filter: blur(12px);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 20px;
-  overflow: hidden;
-}
-
-.cardWide {
-  grid-column: span 2;
-}
-
-.cardTitle {
-  font-size: 14px;
-  font-weight: 700;
-  margin: 0 0 16px;
-}
-
-.cardBody {
-}
-
-.empty {
-  color: var(--color-text-dim);
-  text-align: center;
-  padding: 20px 0;
-}
-
-.healthItem {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px 0;
-  border-bottom: 1px solid var(--color-border);
-}
-
-.healthItem:last-child {
-  border-bottom: none;
-}
-
-.healthName {
-  width: 120px;
-  font-size: 12px;
-  font-weight: 600;
-  flex-shrink: 0;
-}
-
-.healthBar {
-  flex: 1;
-  height: 8px;
-  border-radius: 4px;
-  background: var(--color-surface);
-  overflow: hidden;
-}
-
-.healthFill {
-  height: 100%;
-  border-radius: 4px;
-  background: linear-gradient(90deg, var(--color-accent), var(--color-success));
-  transition: width var(--transition-medium);
-}
-
-.healthPct {
-  width: 40px;
-  text-align: right;
-  font-family: var(--font-mono);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.pctFast { color: #00ff88; }
-.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;
-  gap: 10px;
-  padding: 8px 0;
-  border-bottom: 1px solid var(--color-border);
-}
-
-.leaderItem:last-child {
-  border-bottom: none;
-}
-
-.leaderRank {
-  width: 28px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  font-size: 12px;
-  font-weight: 700;
-  background: var(--color-surface);
-  color: var(--color-text-dim);
-  flex-shrink: 0;
-}
-
-.rank1 { background: rgba(255, 215, 0, 0.15); color: #ffd700; }
-.rank2 { background: rgba(192, 192, 192, 0.15); color: #c0c0c0; }
-.rank3 { background: rgba(205, 127, 50, 0.15); color: #cd7f32; }
-
-.leaderName {
-  flex: 1;
-  font-size: 12px;
-  font-weight: 600;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.leaderLatency {
-  font-family: var(--font-mono);
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--color-success);
-  flex-shrink: 0;
-}
-
-.tierItem {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 6px 0;
-}
-
-.tierBadge {
-  width: 40px;
-  flex-shrink: 0;
-}
-
-.tierBar {
-  flex: 1;
-  height: 10px;
-  border-radius: 5px;
-  background: var(--color-surface);
-  overflow: hidden;
-}
-
-.tierFill {
-  height: 100%;
-  border-radius: 5px;
-  transition: width var(--transition-medium);
-}
-
-.tierCount {
-  width: 30px;
-  text-align: right;
-  font-family: var(--font-mono);
-  font-size: 12px;
-  color: var(--color-text-muted);
-}
-
-@media (max-width: 1024px) {
-  .grid { grid-template-columns: 1fr; }
-  .cardWide { grid-column: span 1; }
-}

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

@@ -1,105 +0,0 @@
-/**
- * @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>
-      )}
-    </>
-  )
-}

package/web/src/components/analytics/TokenUsagePanel.module.css

@@ -1,126 +0,0 @@
-.card {
-  margin-top: 16px;
-}
-
-.cardTitle {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-secondary, #aaa);
-  margin: 0 0 10px 0;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.empty {
-  color: var(--text-muted, #666);
-  font-size: 13px;
-  padding: 20px 0;
-  text-align: center;
-}
-
-/* Summary Grid */
-.summaryGrid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-  margin-top: 16px;
-}
-
-.summaryCard {
-  background: var(--bg-secondary, #14141f);
-  border: 1px solid var(--border, #1e1e2e);
-  border-radius: 8px;
-  padding: 14px 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.summaryLabel {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--text-muted, #888);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.summaryValue {
-  font-size: 22px;
-  font-weight: 700;
-  color: var(--text-primary, #e0e0e0);
-}
-
-.summarySub {
-  font-size: 11px;
-  color: var(--text-muted, #888);
-}
-
-/* 7-Day Chart */
-.chart {
-  display: flex;
-  align-items: flex-end;
-  gap: 6px;
-  height: 100px;
-  padding: 0 4px;
-}
-
-.chartBar {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 100%;
-  justify-content: flex-end;
-  gap: 4px;
-}
-
-.chartFill {
-  width: 100%;
-  min-height: 2px;
-  background: linear-gradient(180deg, #00c864 0%, rgba(0, 200, 100, 0.3) 100%);
-  border-radius: 3px 3px 0 0;
-  transition: height 0.3s ease;
-}
-
-.chartLabel {
-  font-size: 10px;
-  color: var(--text-muted, #888);
-  text-transform: uppercase;
-}
-
-/* Top Lists */
-.topList {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.topRow {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 4px 0;
-  font-size: 12px;
-}
-
-.topKey {
-  flex: 1;
-  color: var(--text-primary, #e0e0e0);
-  font-family: 'SF Mono', monospace;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.topVal {
-  color: var(--text-muted, #888);
-  min-width: 80px;
-  text-align: right;
-}
-
-.topReq {
-  color: var(--text-muted, #666);
-  min-width: 50px;
-  text-align: right;
-  font-size: 11px;
-}

package/web/src/components/atoms/AILatencyCell.jsx

@@ -1,38 +0,0 @@
-/**
- * @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

@@ -1,51 +0,0 @@
-.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); }