free-coding-models 0.5.0 → 0.5.4

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

@@ -0,0 +1,103 @@
+/**
+ * @file web/src/components/atoms/ProviderLogo.module.css
+ * @description Styles for the inline [icon + wordmark] provider cell.
+ *
+ *   - Single horizontal row, max-height pinned so the cell never exceeds the
+ *     table's row height (matches the 7px vertical padding on .td).
+ *   - `color: var(--color-text)` propagates the active theme's text color into
+ *     inlined SVGs that use `fill="currentColor"` (mono icons + all wordmarks).
+ *   - Sized to fit within a ~150px column at default row height. Cloudflare
+ *     is the widest wordmark (~145px at 12px high) — it fits but is tight.
+ */
+
+.row {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  max-height: var(--pl-max-h, 22px);
+  overflow: hidden;
+  /* 📖 Inherited by the inlined SVGs that use `fill="currentColor"`. Set on
+     📖 the row so both the mono icon and the wordmark pick up the theme. */
+  color: var(--color-text);
+  line-height: 1;
+  vertical-align: middle;
+}
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--pl-icon-h, 16px);
+  width: auto;
+  flex-shrink: 0;
+}
+/* 📖 The inlined <svg> from lobe-icons ships with `width="1em" height="1em"`.
+   📖 We override both so the wrapper's height controls the rendered size, and
+   📖 let the viewBox dictate the width (preserves each icon's aspect ratio). */
+.icon svg {
+  height: 100%;
+  width: auto;
+  display: block;
+}
+
+.textLogo {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--pl-text-h, 12px);
+  width: auto;
+  flex-shrink: 0;
+}
+.textLogo svg {
+  height: 100%;
+  width: auto;
+  display: block;
+}
+
+/* 📖 Wordmark-only variant used by OVH (and any future provider whose "icon"
+   📖 asset is itself a full horizontal wordmark). Sized to a slightly tighter
+   📖 max height than the square icons so the wordmark doesn't visually crowd
+   📖 the row. The viewBox aspect ratio of the OVH wordmark is ~6.3:1, so at
+   📖 14px high it renders ~88px wide — fits comfortably in 150px. */
+.iconLegacyWordmark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--pl-icon-h, 14px);
+  width: auto;
+  flex-shrink: 0;
+  /* 📖 Default text color is inherited from the row. Wordmarks that use
+     📖 `fill="currentColor"` (OVH) follow the theme automatically. Wordmarks
+     📖 with hardcoded fills (Scaleway) need a per-theme override — see
+     📖 `.scalewayLogo` below. */
+  color: var(--color-text);
+}
+.iconLegacyWordmark svg {
+  height: 100%;
+  width: auto;
+  display: block;
+}
+
+/* 📖 Scaleway: brand purple #521094 is the official color. It looks great on
+   📖 white but is barely visible on the dark background — the contrast is
+   📖 too low (dark purple on near-black). Bump to a lighter, more saturated
+   📖 shade in dark mode so the wordmark reads cleanly without losing brand
+   📖 identity. Paths were rewritten to use `fill="currentColor"` so this
+   📖 single CSS color property controls the whole wordmark. */
+:global(.scalewayLogo) {
+  color: #521094;
+  transition: color 200ms var(--ease-out, ease);
+}
+:global([data-theme="dark"]) :global(.scalewayLogo) {
+  color: #a78bfa;
+}
+
+.fallback {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--color-text);
+  white-space: nowrap;
+  /* 📖 Slight tracking so the origin name reads cleanly next to the icon. */
+  letter-spacing: 0.2px;
+}

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

@@ -0,0 +1,9 @@
+/**
+ * @file web/src/components/atoms/RankCell.jsx
+ * @description Row index number — triable column, matches CLI Rank (idx).
+ */
+import styles from './RankCell.module.css'
+
+export default function RankCell({ index }) {
+  return <span className={styles.rank}>{index}</span>
+}

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

@@ -0,0 +1,9 @@
+.rank {
+  display: inline-block;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-text-dim);
+  text-align: center;
+  min-width: 28px;
+}

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

@@ -2,9 +2,28 @@
  * @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.
+ * 📖 Colors are theme-aware: reads CSS custom properties from :root so the
+ * 📖 stroke/dot swap to the AA-contrast palette in light mode automatically.
  */
 import { useMemo } from 'react'
 
+// 📖 Read CSS custom properties at module scope; falls back to dark-mode neon
+// 📖 values when running outside the browser (e.g. during server rendering).
+function readCssVar(name, fallback) {
+  if (typeof window === 'undefined' || !window.document?.documentElement) return fallback
+  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+  return v || fallback
+}
+
+// 📖 Threshold-based color picker that returns the current theme's variant of
+// 📖 each color. Reading the variables on every render is fine — they only
+// 📖 change when the user toggles the theme, and the memo cache key catches it.
+function pickSparkColor(lastVal) {
+  if (lastVal < 500)  return readCssVar('--color-success', '#00ff88')
+  if (lastVal < 1500) return readCssVar('--color-warning', '#ffaa00')
+  return readCssVar('--color-danger', '#ff4444')
+}
+
 export default function Sparkline({ history }) {
   const svg = useMemo(() => {
     if (!history || history.length < 2) return null
@@ -28,13 +47,13 @@ export default function Sparkline({ history }) {
       .join(' ')
 
     const lastVal = values[values.length - 1]
-    const color = lastVal < 500 ? '#00ff88' : lastVal < 1500 ? '#ffaa00' : '#ff4444'
+    const color = pickSparkColor(lastVal)
     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" />
+        <polyline fill="none" stroke={color} strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" points={points} opacity="0.85" />
         <circle cx={lastX} cy={lastY} r="2.5" fill={color} />
       </svg>
     )

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

@@ -6,3 +6,8 @@
 .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); }
+
+/* 📖 Light theme: drop the neon gradients to deep, saturated versions. */
+:global([data-theme="light"]) .high { background: linear-gradient(90deg, #008f4d, #4a7a00); }
+:global([data-theme="light"]) .mid  { background: linear-gradient(90deg, #b86b00, #c45a00); }
+:global([data-theme="light"]) .low  { background: linear-gradient(90deg, #c8143a, #990000); }

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

@@ -15,3 +15,10 @@
   0%, 100% { box-shadow: 0 0 0 0 rgba(118,185,0,0.25); }
   50% { box-shadow: 0 0 0 6px transparent; }
 }
+
+/* 📖 Light theme: deep green/red for the dot so it still reads as "up"/"down"
+   📖 on a white card; the glow halo is dimmed so it doesn't blow out. */
+:global([data-theme="light"]) .up      { background: #008f4d; box-shadow: 0 0 4px rgba(0,143,77,0.35); }
+:global([data-theme="light"]) .down,
+:global([data-theme="light"]) .timeout { background: #c8143a; }
+:global([data-theme="light"]) .pending { background: #888899; }

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

@@ -0,0 +1,36 @@
+/**
+ * @file web/src/components/atoms/TPSCell.jsx
+ * @description Benchmark tokens-per-second column — animated spinner during benchmarks.
+ * 📖 Shows: 13, 45, —. Retry badge ↻N in blue.
+ * 📖 When isRunning: animated CSS spinner matches AILatencyCell.
+ */
+import styles from './TPSCell.module.css'
+
+function formatTps(result, isRunning) {
+  if (isRunning) return { text: '…', badge: '' }
+  if (!result || !result.ok) return { text: '—', badge: '' }
+  const badge = result.retries > 0 ? `↻${result.retries}` : ''
+  return { text: String(Math.round(result.tokensPerSecond ?? 0)), badge }
+}
+
+export default function TPSCell({ result, isRunning }) {
+  const { text, badge } = formatTps(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.miniSpinner} />
+          <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/TPSCell.module.css

@@ -0,0 +1,44 @@
+.cell {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 40px;
+  transition: background 200ms;
+  border-radius: 4px;
+  padding: 1px 3px;
+}
+.value { }
+.fast   { color: #00ff88; }
+.slow   { color: #ff4444; }
+.dim    { color: var(--color-text-dim); }
+.running { color: #b400ff; font-weight: 700; }
+.badge  { color: #06b6d4; font-size: 10px; }
+
+/* ── Running row highlight ── */
+.runningCell {
+  background: rgba(180, 0, 255, 0.12);
+}
+
+/* ── Mini spinner matching AILatencyCell ── */
+@keyframes miniSpin {
+  to { transform: rotate(360deg); }
+}
+.miniSpinner {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border: 1.5px solid rgba(180, 0, 255, 0.3);
+  border-top-color: #b400ff;
+  border-radius: 50%;
+  animation: miniSpin 0.6s linear infinite;
+  flex-shrink: 0;
+}
+
+/* 📖 Light theme overrides — match AILatencyCell. */
+:global([data-theme="light"]) .fast   { color: #008f4d; }
+: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); }

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

@@ -16,3 +16,14 @@
 .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); }
+
+/* 📖 Light theme: darker, AA-contrast tier text colors. Borders stay the same
+   📖 hue so the badge still feels "tier-colored", just more legible. */
+:global([data-theme="light"]) .tier_splus  { color: #7a5e00; border-color: rgba(176,136,0,0.4); }
+:global([data-theme="light"]) .tier_s      { color: #a14a00; border-color: rgba(196,90,0,0.4); }
+:global([data-theme="light"]) .tier_aplus  { color: #005d8a; border-color: rgba(0,115,168,0.4); }
+:global([data-theme="light"]) .tier_a      { color: #1f7a3e; border-color: rgba(31,122,62,0.4); }
+:global([data-theme="light"]) .tier_aminus { color: #2f7a2f; border-color: rgba(47,122,47,0.4); }
+:global([data-theme="light"]) .tier_bplus  { color: #4a4a72; border-color: rgba(90,90,138,0.4); }
+:global([data-theme="light"]) .tier_b      { color: #555566; border-color: rgba(85,85,102,0.4); }
+:global([data-theme="light"]) .tier_c      { color: #5a5a6a; border-color: rgba(106,106,122,0.4); }

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

@@ -18,6 +18,12 @@
 .error   { border-left: 4px solid #ff4444; }
 .warning { border-left: 4px solid #ffaa00; }
 .info    { border-left: 4px solid #06b6d4; }
+
+/* 📖 Light theme: deeper accent bars so they pop on the white toast card. */
+:global([data-theme="light"]) .success { border-left-color: #008f4d; }
+:global([data-theme="light"]) .error   { border-left-color: #c8143a; }
+:global([data-theme="light"]) .warning { border-left-color: #b86b00; }
+:global([data-theme="light"]) .info    { border-left-color: #0e7490; }
 .icon    { font-size: 18px; flex-shrink: 0; }
 .message { flex: 1; }
 .close {

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

@@ -1,13 +1,36 @@
 /**
  * @file web/src/components/atoms/VerdictBadge.jsx
- * @description Renders a verdict badge (Perfect, Normal, Slow, etc.) with styled pill.
+ * @description Renders a verdict badge matching exactly the TUI format.
+ * 📖 Shows emoji + text: 🟩 Perfect, 🟢 Normal, 🟡 Spiky, 🟠 Slow, 🔴 Very Slow, 🔥 Overloaded, 🟥 Unstable, ⚫ Not Active, ⏳ Pending.
  */
-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>
+// ─── Emoji map matching TUI render-table.js verdictIcon ──────────────────────────
+const VERDICT_WITH_EMOJI = {
+  Perfect:     { emoji: '🟩', text: 'Perfect',     cls: 'perfect' },
+  Normal:      { emoji: '🟢', text: 'Normal',      cls: 'normal' },
+  Spiky:       { emoji: '🟡', text: 'Spiky',       cls: 'spiky' },
+  Slow:        { emoji: '🟠', text: 'Slow',        cls: 'slow' },
+  'Very Slow': { emoji: '🔴', text: 'Very Slow',   cls: 'veryslow' },
+  Overloaded:  { emoji: '🔥', text: 'Overloaded',  cls: 'overloaded' },
+  Unstable:    { emoji: '🟥', text: 'Unstable',    cls: 'unstable' },
+  'Not Active':{ emoji: '⚫', text: 'Not Active', cls: 'notactive' },
+  Pending:     { emoji: '⏳', text: 'Pending',     cls: 'pending' },
 }
+
+const DEFAULT_ENTRY = { emoji: '❔', text: 'Pending', cls: 'pending' }
+
+export default function VerdictBadge({ verdict, httpCode }) {
+  // Handle 429 rate limit from HTTP code (TUI shows 🔥 429 TRY LATER in Health column)
+  // In Verdict column, TUI shows 'Overloaded' for 429 — keep same behavior
+  const entry = verdict
+    ? (VERDICT_WITH_EMOJI[verdict] || { emoji: '❔', text: verdict, cls: 'pending' })
+    : DEFAULT_ENTRY
+
+  return (
+    <span className={`${styles.badge} ${styles[entry.cls]}`}>
+      <span className={styles.emoji}>{entry.emoji}</span>
+      <span className={styles.text}>{entry.text}</span>
+    </span>
+  )
+}

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

@@ -1,19 +1,40 @@
+/**
+ * @file web/src/components/atoms/VerdictBadge.module.css
+ * @description Styles matching TUI verdict colors (emoji + text).
+ */
 .badge {
-  display: inline-block;
-  font-size: 10px;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 11px;
   font-weight: 700;
-  text-transform: uppercase;
-  padding: 2px 8px;
+  padding: 2px 7px;
   border-radius: 999px;
-  letter-spacing: 0.5px;
+  white-space: nowrap;
 }
-.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); }
+
+.emoji { font-size: 12px; line-height: 1; }
+.text { line-height: 1; }
+
+/* ─── Color variants matching TUI theme ─── */
+.perfect    { background: rgba(0,255,136,0.12); color: #00ff88; }
+.normal     { background: rgba(118,185,0,0.12); color: #76b900; }
+.slow       { background: rgba(255,170,0,0.12); color: #ffaa00; }
+.spiky      { background: rgba(255,102,0,0.12); color: #ff6600; }
+.veryslow  { background: rgba(255,68,68,0.12); color: #ff4444; }
+.overloaded { background: rgba(255,34,34,0.12); color: #ff2222; }
+.unstable   { background: rgba(204,0,0,0.12); color: #cc0000; }
+.notactive  { background: rgba(85,85,112,0.12); color: #555570; }
+.pending    { background: rgba(68,68,96,0.1); color: #444460; }
+
+/* 📖 Light theme: deeper, more saturated text colors. Backgrounds stay
+   📖 the same since they are translucent and adapt to the white card. */
+:global([data-theme="light"]) .perfect    { color: #008f4d; background: rgba(0,143,77,0.10); }
+:global([data-theme="light"]) .normal     { color: #4a7a00; background: rgba(74,122,0,0.10); }
+:global([data-theme="light"]) .slow       { color: #b86b00; background: rgba(184,107,0,0.10); }
+:global([data-theme="light"]) .spiky      { color: #c45000; background: rgba(196,80,0,0.10); }
+:global([data-theme="light"]) .veryslow   { color: #c8143a; background: rgba(200,20,58,0.10); }
+:global([data-theme="light"]) .overloaded { color: #b8101f; background: rgba(184,16,31,0.10); }
+:global([data-theme="light"]) .unstable   { color: #990000; background: rgba(153,0,0,0.10); }
+:global([data-theme="light"]) .notactive  { color: #5a5a72; }
+:global([data-theme="light"]) .pending    { color: #5a5a8a; }

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

@@ -3,10 +3,12 @@
  * @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.
+ * ping count, API key status, a larger SVG latency trend chart, and an M1 favorites + benchmark
+ * 📖 action section (star + reorder + per-row AI Speed Test button).
  * @functions DetailPanel → main panel component, buildDetailChart → SVG chart builder
  */
 import { useMemo } from 'react'
+import { IconStar, IconStarFilled, IconChevronUp, IconChevronDown, IconPlayerPlayFilled } from '@tabler/icons-react'
 import TierBadge from '../atoms/TierBadge.jsx'
 import VerdictBadge from '../atoms/VerdictBadge.jsx'
 import StatusDot from '../atoms/StatusDot.jsx'
@@ -68,10 +70,14 @@ function StatRow({ label, children }) {
   )
 }
 
-export default function DetailPanel({ model, onClose }) {
+export default function DetailPanel({ model, onClose, favorites, onBenchmark, onToast }) {
   if (!model) return null
 
   const chartSvg = buildDetailChart(model.pingHistory)
+  const isFav = favorites?.isFavorite(model) ?? false
+  const favRank = favorites?.favoriteRank(model) ?? Number.MAX_SAFE_INTEGER
+  const isFavAtTop = isFav && favRank === 0
+  const isFavAtBottom = isFav && favRank === (favorites?.favorites.length ?? 0) - 1
 
   return (
     <div className={styles.panel}>
@@ -121,6 +127,61 @@ export default function DetailPanel({ model, onClose }) {
         <StatRow label="API Key">
           {model.hasApiKey ? '✅ Configured' : '❌ Missing'}
         </StatRow>
+
+        {/* ── M1: favorites + per-row benchmark action section ── */}
+        {(favorites || onBenchmark) && (
+          <div className={styles.actions}>
+            {favorites && (
+              <div className={styles.favBlock}>
+                <button
+                  className={`${styles.favBtn} ${isFav ? styles.favBtnActive : ''}`}
+                  onClick={() => favorites.toggle(model)}
+                  title={isFav ? `Unfavorite ${model.label} (TUI: F)` : `Favorite ${model.label} (TUI: F)`}
+                >
+                  {isFav ? <IconStarFilled size={14} stroke={1.5} /> : <IconStar size={14} stroke={1.5} />}
+                  <span>{isFav ? 'Favorited' : 'Add to favorites'}</span>
+                </button>
+                {isFav && (
+                  <div className={styles.reorderRow}>
+                    <button
+                      className={styles.reorderBtn}
+                      disabled={isFavAtTop}
+                      onClick={() => favorites.reorder(model, 'up')}
+                      title="Move up in router priority (TUI: Shift+↑)"
+                      aria-label="Move favorite up"
+                    >
+                      <IconChevronUp size={12} stroke={1.5} /> Up
+                    </button>
+                    <button
+                      className={styles.reorderBtn}
+                      disabled={isFavAtBottom}
+                      onClick={() => favorites.reorder(model, 'down')}
+                      title="Move down in router priority (TUI: Shift+↓)"
+                      aria-label="Move favorite down"
+                    >
+                      <IconChevronDown size={12} stroke={1.5} /> Down
+                    </button>
+                    <span className={styles.rankBadge}>#{favRank + 1}</span>
+                  </div>
+                )}
+              </div>
+            )}
+            {onBenchmark && (
+              <button
+                className={styles.benchBtn}
+                onClick={() => {
+                  onBenchmark(model)
+                  onToast?.(`Benchmark started for ${model.label}…`, 'info')
+                }}
+                title="Run AI Speed Test on this model (TUI: Ctrl+A)"
+              >
+                <IconPlayerPlayFilled size={12} stroke={1.5} />
+                <span>AI Speed Test</span>
+              </button>
+            )}
+          </div>
+        )}
+
         <div className={styles.chart}>
           <div className={styles.chartTitle}>Latency Trend (last 20 pings)</div>
           {chartSvg}

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

@@ -75,6 +75,10 @@
 .pingSlow { color: #ff4444; }
 .pingNone { color: var(--color-text-dim); }
 
+:global([data-theme="light"]) .pingFast   { color: #008f4d; }
+:global([data-theme="light"]) .pingMedium { color: #b86b00; }
+:global([data-theme="light"]) .pingSlow   { color: #c8143a; }
+
 .chart {
   margin: 20px 0;
   padding: 16px;
@@ -97,3 +101,129 @@
   text-align: center;
   padding: 20px;
 }
+
+/* ─── M1: favorites + per-row benchmark actions ─── */
+.actions {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin: 16px 0;
+  padding: 12px;
+  background: var(--color-surface);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border);
+}
+
+.favBlock {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.favBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--color-bg-card);
+  color: var(--color-text-muted);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 150ms;
+  text-align: left;
+}
+.favBtn:hover {
+  border-color: #ffd700;
+  color: #ffd700;
+  background: rgba(255, 215, 0, 0.08);
+}
+.favBtnActive {
+  border-color: #ffd700;
+  color: #ffd700;
+  background: rgba(255, 215, 0, 0.12);
+}
+.favBtnActive:hover {
+  background: rgba(255, 215, 0, 0.16);
+}
+:global([data-theme="light"]) .favBtn { color: #555; }
+:global([data-theme="light"]) .favBtn:hover { color: #b08800; border-color: #b08800; background: rgba(176, 136, 0, 0.06); }
+:global([data-theme="light"]) .favBtnActive { color: #b08800; border-color: #b08800; background: rgba(176, 136, 0, 0.10); }
+
+.reorderRow {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 4px;
+}
+.reorderBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 4px 8px;
+  font-size: 10px;
+  font-weight: 600;
+  font-family: var(--font-mono);
+  background: var(--color-bg-card);
+  color: var(--color-text-muted);
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 120ms;
+}
+.reorderBtn:hover:not(:disabled) {
+  background: var(--color-bg-hover);
+  color: var(--color-text);
+  border-color: var(--color-text-muted);
+}
+.reorderBtn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.rankBadge {
+  margin-left: auto;
+  font-size: 10px;
+  font-family: var(--font-mono);
+  font-weight: 700;
+  color: #ffd700;
+  background: rgba(255, 215, 0, 0.12);
+  border: 1px solid rgba(255, 215, 0, 0.3);
+  padding: 2px 6px;
+  border-radius: 999px;
+}
+:global([data-theme="light"]) .rankBadge {
+  color: #b08800;
+  background: rgba(176, 136, 0, 0.12);
+  border-color: rgba(176, 136, 0, 0.3);
+}
+
+.benchBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 12px;
+  font-size: 12px;
+  font-weight: 700;
+  font-family: var(--font-mono);
+  background: rgba(180, 0, 255, 0.12);
+  color: #b400ff;
+  border: 1px solid rgba(180, 0, 255, 0.4);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 150ms;
+}
+.benchBtn:hover {
+  background: rgba(180, 0, 255, 0.20);
+  border-color: rgba(180, 0, 255, 0.7);
+}
+:global([data-theme="light"]) .benchBtn {
+  background: rgba(140, 0, 200, 0.06);
+  color: #6a00a0;
+  border-color: rgba(140, 0, 200, 0.3);
+}
+:global([data-theme="light"]) .benchBtn:hover {
+  background: rgba(140, 0, 200, 0.12);
+}