free-coding-models 0.3.37 → 0.3.40

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); }

package/web/src/components/dashboard/DetailPanel.jsx

@@ -0,0 +1,131 @@
+/**
+ * @file web/src/components/dashboard/DetailPanel.jsx
+ * @description Slide-in detail panel showing full model stats, metrics, and a latency chart.
+ * 📖 Rendered as a fixed overlay on the right side. Controlled by `model` prop (null = hidden).
+ * Displays model ID, provider, tier, SWE score, context, status, pings, stability, verdict, uptime,
+ * ping count, API key status, and a larger SVG latency trend chart.
+ * @functions DetailPanel → main panel component, buildDetailChart → SVG chart builder
+ */
+import { useMemo } from 'react'
+import TierBadge from '../atoms/TierBadge.jsx'
+import VerdictBadge from '../atoms/VerdictBadge.jsx'
+import StatusDot from '../atoms/StatusDot.jsx'
+import StabilityCell from '../atoms/StabilityCell.jsx'
+import { formatPing, formatAvg, pingClass } from '../../utils/format.js'
+import { sweClass } from '../../utils/ranks.js'
+import styles from './DetailPanel.module.css'
+
+function buildDetailChart(history) {
+  if (!history || history.length < 2) {
+    return <div className={styles.chartEmpty}>Waiting for ping data...</div>
+  }
+
+  const valid = history.filter(p => p.code === '200' || p.code === '401')
+  if (valid.length < 2) {
+    return <div className={styles.chartEmpty}>Not enough data yet...</div>
+  }
+
+  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 = 340, h = 100
+  const padding = 4
+
+  const points = values.map((v, i) => {
+    const x = padding + i * ((w - 2 * padding) / (values.length - 1))
+    const y = padding + (h - 2 * padding) - ((v - min) / range) * (h - 2 * padding)
+    return [x.toFixed(1), y.toFixed(1)]
+  })
+
+  const linePoints = points.map(p => p.join(',')).join(' ')
+  const areaPoints = `${points[0][0]},${h - padding} ${linePoints} ${points[points.length - 1][0]},${h - padding}`
+  const lastPt = points[points.length - 1]
+
+  return (
+    <svg width="100%" viewBox={`0 0 ${w} ${h}`} style={{ display: 'block' }}>
+      <defs>
+        <linearGradient id="chart-grad" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor="var(--color-accent)" stopOpacity="0.3" />
+          <stop offset="100%" stopColor="var(--color-accent)" stopOpacity="0.02" />
+        </linearGradient>
+      </defs>
+      <polygon fill="url(#chart-grad)" points={areaPoints} />
+      <polyline fill="none" stroke="var(--color-accent)" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" points={linePoints} />
+      <circle cx={lastPt[0]} cy={lastPt[1]} r="3.5" fill="var(--color-accent)" stroke="var(--color-bg)" strokeWidth="1.5" />
+      <text x={padding} y={h - 2} fontSize="9" fill="var(--color-text-dim)" fontFamily="var(--font-mono)">{min}ms</text>
+      <text x={w - padding} y={padding + 8} fontSize="9" fill="var(--color-text-dim)" fontFamily="var(--font-mono)" textAnchor="end">{max}ms</text>
+    </svg>
+  )
+}
+
+function StatRow({ label, children }) {
+  return (
+    <div className={styles.stat}>
+      <span className={styles.statLabel}>{label}</span>
+      <span className={styles.statValue}>{children}</span>
+    </div>
+  )
+}
+
+export default function DetailPanel({ model, onClose }) {
+  if (!model) return null
+
+  const chartSvg = buildDetailChart(model.pingHistory)
+
+  return (
+    <div className={styles.panel}>
+      <div className={styles.header}>
+        <h3 className={styles.title}>{model.label}</h3>
+        <button className={styles.closeBtn} onClick={onClose}>&times;</button>
+      </div>
+      <div className={styles.body}>
+        <StatRow label="Model ID">
+          <span style={{ fontSize: 11, wordBreak: 'break-all' }}>{model.modelId}</span>
+        </StatRow>
+        <StatRow label="Provider">{model.origin}</StatRow>
+        <StatRow label="Tier"><TierBadge tier={model.tier} /></StatRow>
+        <StatRow label="SWE-bench Score">
+          <span className={`${styles.swe} ${styles[sweClass(model.sweScore)]}`}>{model.sweScore || '—'}</span>
+        </StatRow>
+        <StatRow label="Context Window">{model.ctx || '—'}</StatRow>
+        <StatRow label="Status">
+          <StatusDot status={model.status} /> {model.status}
+        </StatRow>
+        <StatRow label="Latest Ping">
+          <span className={`${styles.ping} ${styles[pingClass(model.latestPing)]}`}>
+            {formatPing(model.latestPing, model.latestCode).text}
+          </span>
+        </StatRow>
+        <StatRow label="Average Latency">
+          <span className={`${styles.ping} ${styles[pingClass(model.avg)]}`}>
+            {formatAvg(model.avg).text}
+          </span>
+        </StatRow>
+        <StatRow label="P95 Latency">
+          {model.p95 != null && model.p95 !== Infinity ? `${model.p95}ms` : '—'}
+        </StatRow>
+        <StatRow label="Jitter (σ)">
+          {model.jitter != null && model.jitter !== Infinity ? `${model.jitter}ms` : '—'}
+        </StatRow>
+        <StatRow label="Stability Score">
+          <StabilityCell score={model.stability} />
+        </StatRow>
+        <StatRow label="Verdict">
+          <VerdictBadge verdict={model.verdict} httpCode={model.httpCode} />
+        </StatRow>
+        <StatRow label="Uptime">
+          {model.uptime > 0 ? `${model.uptime}%` : '—'}
+        </StatRow>
+        <StatRow label="Ping Count">{model.pingCount}</StatRow>
+        <StatRow label="API Key">
+          {model.hasApiKey ? '✅ Configured' : '❌ Missing'}
+        </StatRow>
+        <div className={styles.chart}>
+          <div className={styles.chartTitle}>Latency Trend (last 20 pings)</div>
+          {chartSvg}
+        </div>
+      </div>
+    </div>
+  )
+}

package/web/src/components/dashboard/DetailPanel.module.css

@@ -0,0 +1,99 @@
+.panel {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: min(420px, 90vw);
+  z-index: 300;
+  background: var(--color-bg-elevated);
+  border-left: 1px solid var(--color-border);
+  box-shadow: var(--shadow-lg);
+  transform: translateX(100%);
+  transition: transform var(--transition-medium);
+  overflow-y: auto;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 700;
+  margin: 0;
+}
+
+.closeBtn {
+  background: none;
+  border: none;
+  color: var(--color-text-muted);
+  font-size: 22px;
+  cursor: pointer;
+  line-height: 1;
+}
+
+.closeBtn:hover {
+  color: var(--color-text);
+}
+
+.body {
+  padding: 24px;
+}
+
+.stat {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.statLabel {
+  font-size: 12px;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+}
+
+.statValue {
+  font-family: var(--font-mono);
+  font-weight: 600;
+}
+
+.ping {
+  font-family: var(--font-mono);
+  font-weight: 600;
+}
+
+.pingFast { color: #00ff88; }
+.pingMedium { color: #ffaa00; }
+.pingSlow { color: #ff4444; }
+.pingNone { color: var(--color-text-dim); }
+
+.chart {
+  margin: 20px 0;
+  padding: 16px;
+  background: var(--color-surface);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border);
+}
+
+.chartTitle {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  margin-bottom: 12px;
+}
+
+.chartEmpty {
+  color: var(--color-text-dim);
+  text-align: center;
+  padding: 20px;
+}