free-coding-models 0.3.37 → 0.3.41

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

@@ -0,0 +1,109 @@
+/**
+ * @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 TierBadge from '../atoms/TierBadge.jsx'
+import styles from './AnalyticsView.module.css'
+
+const TIER_COLORS = {
+  'S+': '#ffd700', S: '#ff8c00', 'A+': '#00c8ff', A: '#3ddc84',
+  'A-': '#7ecf7e', 'B+': '#a8a8c8', B: '#808098', C: '#606078',
+}
+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}>📊 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}>🏆 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>
+                    <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: TIER_COLORS[tier] }} />
+                </div>
+                <span className={styles.tierCount}>{count}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,186 @@
+.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; }
+
+.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/atoms/Sparkline.jsx

@@ -0,0 +1,44 @@
+/**
+ * @file web/src/components/atoms/Sparkline.jsx
+ * @description SVG sparkline chart for ping history trend visualization.
+ * 📖 Renders a polyline with gradient area fill and endpoint dot.
+ */
+import { useMemo } from 'react'
+
+export default function Sparkline({ history }) {
+  const svg = useMemo(() => {
+    if (!history || history.length < 2) return null
+    const valid = history.filter((p) => p.code === '200' || p.code === '401')
+    if (valid.length < 2) return null
+
+    const values = valid.map((p) => p.ms)
+    const max = Math.max(...values, 1)
+    const min = Math.min(...values, 0)
+    const range = max - min || 1
+    const w = 80,
+      h = 22
+    const step = w / (values.length - 1)
+
+    const points = values
+      .map((v, i) => {
+        const x = i * step
+        const y = h - ((v - min) / range) * (h - 4) - 2
+        return `${x.toFixed(1)},${y.toFixed(1)}`
+      })
+      .join(' ')
+
+    const lastVal = values[values.length - 1]
+    const color = lastVal < 500 ? '#00ff88' : lastVal < 1500 ? '#ffaa00' : '#ff4444'
+    const lastX = ((values.length - 1) * step).toFixed(1)
+    const lastY = (h - ((lastVal - min) / range) * (h - 4) - 2).toFixed(1)
+
+    return (
+      <svg className="sparkline-svg" width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
+        <polyline fill="none" stroke={color} strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" points={points} opacity="0.8" />
+        <circle cx={lastX} cy={lastY} r="2.5" fill={color} />
+      </svg>
+    )
+  }, [history])
+
+  return svg || null
+}

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

@@ -0,0 +1,18 @@
+/**
+ * @file web/src/components/atoms/StabilityCell.jsx
+ * @description Renders stability score with a progress bar and numeric value.
+ */
+import styles from './StabilityCell.module.css'
+
+export default function StabilityCell({ score }) {
+  if (score == null || score < 0) return <span className={styles.none}>—</span>
+  const cls = score >= 70 ? 'high' : score >= 40 ? 'mid' : 'low'
+  return (
+    <div className={styles.cell}>
+      <div className={styles.bar}>
+        <div className={`${styles.fill} ${styles[cls]}`} style={{ width: `${score}%` }} />
+      </div>
+      <span className={styles.value}>{score}</span>
+    </div>
+  )
+}

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

@@ -0,0 +1,8 @@
+.cell { display: flex; align-items: center; gap: 6px; }
+.bar  { width: 48px; height: 6px; border-radius: 3px; background: var(--color-surface); overflow: hidden; }
+.fill { height: 100%; border-radius: 3px; transition: width 250ms cubic-bezier(0.16, 1, 0.3, 1); }
+.high { background: linear-gradient(90deg, #00ff88, #76b900); }
+.mid  { background: linear-gradient(90deg, #ffaa00, #ff8c00); }
+.low  { background: linear-gradient(90deg, #ff4444, #cc0000); }
+.value { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; }
+.none  { color: var(--color-text-dim); }

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

@@ -0,0 +1,10 @@
+/**
+ * @file web/src/components/atoms/StatusDot.jsx
+ * @description Renders a colored status indicator dot (green=up, red=down, gray=pending).
+ */
+import styles from './StatusDot.module.css'
+
+export default function StatusDot({ status }) {
+  const cls = status === 'up' ? styles.up : status === 'timeout' ? styles.timeout : status === 'down' ? styles.down : styles.pending
+  return <span className={`${styles.dot} ${cls}`} />
+}

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

@@ -0,0 +1,17 @@
+.dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 6px;
+  vertical-align: middle;
+}
+.up      { background: #00ff88; box-shadow: 0 0 6px rgba(0,255,136,0.4); }
+.down    { background: #ff4444; }
+.timeout { background: #ff4444; }
+.pending { background: #555570; animation: pulse 1.5s ease-in-out infinite; }
+
+@keyframes pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(118,185,0,0.25); }
+  50% { box-shadow: 0 0 0 6px transparent; }
+}

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

@@ -0,0 +1,10 @@
+/**
+ * @file web/src/components/atoms/TierBadge.jsx
+ * @description Renders a tier badge (S+, S, A+, etc.) with color-coded styling.
+ */
+import styles from './TierBadge.module.css'
+
+export default function TierBadge({ tier }) {
+  const cls = tier.replace('+', 'plus').replace('-', 'minus').toLowerCase()
+  return <span className={`${styles.badge} ${styles[`tier_${cls}`]}`}>{tier}</span>
+}

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

@@ -0,0 +1,18 @@
+.badge {
+  display: inline-block;
+  font-family: 'JetBrains Mono', monospace;
+  font-weight: 700;
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  text-align: center;
+  min-width: 32px;
+}
+.tier_splus { background: rgba(255,215,0,0.15); color: #ffd700; border: 1px solid rgba(255,215,0,0.3); }
+.tier_s     { background: rgba(255,140,0,0.12); color: #ff8c00; border: 1px solid rgba(255,140,0,0.25); }
+.tier_aplus { background: rgba(0,200,255,0.1); color: #00c8ff; border: 1px solid rgba(0,200,255,0.2); }
+.tier_a     { background: rgba(61,220,132,0.1); color: #3ddc84; border: 1px solid rgba(61,220,132,0.2); }
+.tier_aminus{ background: rgba(126,207,126,0.1); color: #7ecf7e; border: 1px solid rgba(126,207,126,0.2); }
+.tier_bplus { background: rgba(168,168,200,0.1); color: #a8a8c8; border: 1px solid rgba(168,168,200,0.15); }
+.tier_b     { background: rgba(128,128,152,0.1); color: #808098; border: 1px solid rgba(128,128,152,0.15); }
+.tier_c     { background: rgba(96,96,120,0.1); color: #606078; border: 1px solid rgba(96,96,120,0.15); }

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

@@ -0,0 +1,25 @@
+/**
+ * @file web/src/components/atoms/Toast.jsx
+ * @description Toast notification component with auto-dismiss and animated entrance/exit.
+ */
+import { useEffect, useRef } from 'react'
+import styles from './Toast.module.css'
+
+const ICONS = { success: '✅', error: '❌', warning: '⚠️', info: 'ℹ️' }
+
+export default function Toast({ message, type = 'info', duration = 3500, onDismiss }) {
+  const timerRef = useRef(null)
+
+  useEffect(() => {
+    timerRef.current = setTimeout(onDismiss, duration)
+    return () => clearTimeout(timerRef.current)
+  }, [duration, onDismiss])
+
+  return (
+    <div className={`${styles.toast} ${styles[type]}`}>
+      <span className={styles.icon}>{ICONS[type] || '📌'}</span>
+      <span className={styles.message}>{message}</span>
+      <button className={styles.close} onClick={onDismiss}>×</button>
+    </div>
+  )
+}

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

@@ -0,0 +1,35 @@
+.toast {
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 18px;
+  border-radius: var(--radius-md, 10px);
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-lg);
+  font-size: 13px;
+  font-weight: 500;
+  animation: slideIn 300ms cubic-bezier(0.16, 1, 0.3, 1);
+  min-width: 280px;
+  max-width: 420px;
+}
+.success { border-left: 4px solid #00ff88; }
+.error   { border-left: 4px solid #ff4444; }
+.warning { border-left: 4px solid #ffaa00; }
+.info    { border-left: 4px solid #06b6d4; }
+.icon    { font-size: 18px; flex-shrink: 0; }
+.message { flex: 1; }
+.close {
+  background: none;
+  border: none;
+  color: var(--color-text-dim);
+  cursor: pointer;
+  font-size: 16px;
+  padding: 0;
+  line-height: 1;
+}
+.exiting { animation: slideOut 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
+
+@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
+@keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }

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

@@ -0,0 +1,16 @@
+/**
+ * @file web/src/components/atoms/ToastContainer.jsx
+ * @description Fixed-position container that renders all active toasts.
+ */
+import styles from './ToastContainer.module.css'
+import Toast from './Toast.jsx'
+
+export default function ToastContainer({ toasts, dismissToast }) {
+  return (
+    <div className={styles.container}>
+      {toasts.map((t) => (
+        <Toast key={t.id} message={t.message} type={t.type} onDismiss={() => dismissToast(t.id)} />
+      ))}
+    </div>
+  )
+}

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

@@ -0,0 +1,10 @@
+.container {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  pointer-events: none;
+}

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

@@ -0,0 +1,13 @@
+/**
+ * @file web/src/components/atoms/VerdictBadge.jsx
+ * @description Renders a verdict badge (Perfect, Normal, Slow, etc.) with styled pill.
+ */
+import { verdictCls } from '../../utils/ranks.js'
+import styles from './VerdictBadge.module.css'
+
+export default function VerdictBadge({ verdict, httpCode }) {
+  if (!verdict) return <span className={`${styles.badge} ${styles.pending}`}>Pending</span>
+  if (httpCode === '429') return <span className={`${styles.badge} ${styles.ratelimited}`}>⚠️ Rate Limited</span>
+  const cls = verdictCls(verdict)
+  return <span className={`${styles.badge} ${styles[cls]}`}>{verdict}</span>
+}

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

@@ -0,0 +1,19 @@
+.badge {
+  display: inline-block;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  padding: 2px 8px;
+  border-radius: 999px;
+  letter-spacing: 0.5px;
+}
+.perfect     { background: rgba(0,255,136,0.12); color: #00ff88; border: 1px solid rgba(0,255,136,0.25); }
+.normal      { background: rgba(118,185,0,0.12); color: #76b900; border: 1px solid rgba(118,185,0,0.25); }
+.slow        { background: rgba(255,170,0,0.12); color: #ffaa00; border: 1px solid rgba(255,170,0,0.25); }
+.spiky       { background: rgba(255,102,0,0.12); color: #ff6600; border: 1px solid rgba(255,102,0,0.25); }
+.veryslow    { background: rgba(255,68,68,0.12); color: #ff4444; border: 1px solid rgba(255,68,68,0.2); }
+.overloaded  { background: rgba(255,34,34,0.12); color: #ff2222; border: 1px solid rgba(255,34,34,0.2); }
+.unstable    { background: rgba(204,0,0,0.12); color: #cc0000; border: 1px solid rgba(204,0,0,0.2); }
+.notactive   { background: rgba(85,85,112,0.12); color: #555570; border: 1px solid rgba(85,85,112,0.15); }
+.pending     { background: rgba(68,68,96,0.1); color: #444460; border: 1px solid rgba(68,68,96,0.15); }
+.ratelimited { background: rgba(255,170,0,0.15); color: #ffaa00; border: 1px solid rgba(255,170,0,0.3); }