free-coding-models 0.5.1 → 0.5.4

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

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

@@ -1,11 +1,16 @@
 /**
  * @file web/src/components/dashboard/FilterBar.jsx
- * @description Filter controls for tier, status, provider, ping interval, and live indicator.
- * 📖 Shows "Next ping in Xs" countdown matching TUI behavior. Ping mode selector (Speed/Normal/Slow/Forced).
+ * @description Filter controls for the model table — TUI parity chips.
+ * 📖 M1 parity: tier (T) / status / provider (D) / verdict (V) / health (H) / visibility (E)
+ * 📖 + custom text filter chip with "X" clear + reset view button (N).
+ * 📖 Each chip is a cycling button matching the TUI single-key behavior.
+ * 📖 The "Next ping in Xs" countdown still shows the live status.
  */
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
+import { IconRefresh, IconX, IconFilter, IconCircleCheck, IconAlertTriangle, IconActivity, IconEye, IconStar } from '@tabler/icons-react'
 import styles from './FilterBar.module.css'
 
+// 📖 Chip sets match the TUI cycles 1:1 (see useFilter.js). Keep these in sync.
 const TIERS = [
   { key: 'all', label: 'All' },
   { key: 'S+', label: 'S+' },
@@ -19,10 +24,36 @@ const TIERS = [
 ]
 const STATUSES = [
   { key: 'all', label: 'All' },
-  { key: 'up', label: 'Online' },
-  { key: 'down', label: 'Offline' },
+  { key: 'up', label: 'Up' },
+  { key: 'down', label: 'Down' },
   { key: 'pending', label: 'Pending' },
 ]
+const VERDICTS = [
+  { key: 'all', label: 'All' },
+  { key: 'Perfect', label: 'Perfect' },
+  { key: 'Normal', label: 'Normal' },
+  { key: 'Spiky', label: 'Spiky' },
+  { key: 'Slow', label: 'Slow' },
+  { key: 'Overloaded', label: 'Overloaded' },
+  { key: 'Down', label: 'Down' },
+  { key: 'Unstable', label: 'Unstable' },
+  { key: 'Pending', label: 'Pending' },
+]
+const HEALTHS = [
+  { key: 'all', label: 'All' },
+  { key: 'up', label: 'Up' },
+  { key: 'timeout', label: 'Timeout' },
+  { key: 'down', label: 'Down' },
+  { key: 'pending', label: 'Pending' },
+  { key: 'noauth', label: 'No key' },
+  { key: 'auth_error', label: 'Auth err' },
+]
+// 📖 TUI's E key cycle. The Web mirrors the same 3-state machine.
+const VISIBILITY_MODES = [
+  { key: 'normal',     label: 'All models',       hint: 'Show everything' },
+  { key: 'configured', label: 'Configured only',  hint: 'Hide models with no key or auth errors' },
+  { key: 'usable',     label: 'Usable only',      hint: 'Only Health UP + good verdict' },
+]
 
 const PING_MODES = [
   { key: 'speed',  label: '⚡ Speed', interval: '2s',  color: '#00ff88' },
@@ -41,10 +72,36 @@ function formatCountdown(ms) {
   return `${m}m${rem > 0 ? rem + 's' : ''}`
 }
 
+function ChipRow({ items, value, onChange, label }) {
+  return (
+    <div className={styles.group}>
+      {label && <label className={styles.filterLabel}>{label}</label>}
+      <div className={styles.chipRow}>
+        {items.map((item) => (
+          <button
+            key={item.key}
+            className={`${styles.chip} ${value === item.key ? styles.chipActive : ''}`}
+            onClick={() => onChange(item.key)}
+            title={item.hint || item.label}
+          >
+            {item.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
 export default function FilterBar({
   filterTier, setFilterTier,
   filterStatus, setFilterStatus,
   filterProvider, setFilterProvider,
+  filterVerdict, setFilterVerdict,
+  filterHealth, setFilterHealth,
+  visibilityMode, setVisibilityMode,
+  customTextFilter, setCustomTextFilter,
+  searchQuery,
+  onResetView,
   providers,
   pingMode, setPingMode,
   nextPingAt,
@@ -55,7 +112,6 @@ export default function FilterBar({
 }) {
   const [countdown, setCountdown] = useState(null)
 
-  // Update countdown every second when nextPingAt is set
   useEffect(() => {
     if (nextPingAt == null) return
     const tick = () => {
@@ -69,11 +125,28 @@ export default function FilterBar({
 
   const countdownDisplay = countdown !== null ? formatCountdown(countdown) : null
 
-  // Global benchmark progress percentage
+  // 📖 Custom text filter chip — sticks to the right of the search bar, with
+  // 📖 an "X" to clear (TUI's `X` key behavior).
+  const customFilterActive = Boolean(customTextFilter && customTextFilter.trim().length > 0)
+
   const benchmarkPct = globalBenchmarkRunning && globalBenchmarkTotal > 0
     ? Math.round((globalBenchmarkCompleted / globalBenchmarkTotal) * 100)
     : 0
 
+  // 📖 Count of active non-default filters to show on the Reset button.
+  const activeFilterCount = useMemo(() => {
+    let n = 0
+    if (filterTier !== 'all') n++
+    if (filterStatus !== 'all') n++
+    if (filterProvider !== 'all') n++
+    if (filterVerdict !== 'all') n++
+    if (filterHealth !== 'all') n++
+    if (visibilityMode !== 'normal') n++
+    if (customFilterActive) n++
+    if (searchQuery && searchQuery.trim().length > 0) n++
+    return n
+  }, [filterTier, filterStatus, filterProvider, filterVerdict, filterHealth, visibilityMode, customFilterActive, searchQuery])
+
   return (
     <section className={styles.filters}>
       {/* ── Global benchmark progress bar (Ctrl+U) ── */}
@@ -90,54 +163,79 @@ export default function FilterBar({
           <span className={styles.benchmarkPct}>{benchmarkPct}%</span>
         </div>
       )}
+
+      <ChipRow label="Tier" items={TIERS} value={filterTier} onChange={setFilterTier} />
+      <ChipRow label="Status" items={STATUSES} value={filterStatus} onChange={setFilterStatus} />
+      <ChipRow label="Verdict" items={VERDICTS} value={filterVerdict} onChange={setFilterVerdict} />
+      <ChipRow label="Health" items={HEALTHS} value={filterHealth} onChange={setFilterHealth} />
+
       <div className={styles.group}>
-        <label className={styles.filterLabel}>Tier</label>
-        <div className={styles.tierRow}>
-          {TIERS.map(t => (
-            <button
-              key={t.key}
-              className={`${styles.tierBtn} ${filterTier === t.key ? styles.active : ''}`}
-              onClick={() => setFilterTier(t.key)}
-            >
-              {t.label}
-            </button>
-          ))}
-        </div>
-      </div>
-      <div className={styles.group}>
-        <label className={styles.filterLabel}>Status</label>
-        <div className={styles.tierRow}>
-          {STATUSES.map(s => (
-            <button
-              key={s.key}
-              className={`${styles.tierBtn} ${filterStatus === s.key ? styles.active : ''}`}
-              onClick={() => setFilterStatus(s.key)}
-            >
-              {s.label}
-            </button>
+        <label className={styles.filterLabel}>Visibility</label>
+        <select
+          className={styles.select}
+          value={visibilityMode}
+          onChange={(e) => setVisibilityMode(e.target.value)}
+          title={VISIBILITY_MODES.find((v) => v.key === visibilityMode)?.hint}
+        >
+          {VISIBILITY_MODES.map((v) => (
+            <option key={v.key} value={v.key}>{v.label}</option>
           ))}
-        </div>
+        </select>
       </div>
+
       <div className={styles.group}>
         <label className={styles.filterLabel}>Provider</label>
         <select
           className={styles.providerSelect}
           value={filterProvider}
-          onChange={e => setFilterProvider(e.target.value)}
+          onChange={(e) => setFilterProvider(e.target.value)}
         >
           <option value="all">All Providers</option>
-          {providers.map(p => (
+          {providers.map((p) => (
             <option key={p.key} value={p.key}>{p.name} ({p.count})</option>
           ))}
         </select>
       </div>
+
       <div className={styles.spacer} />
 
+      {/* ── Custom text filter chip (TUI's Ctrl+P "Apply text filter") ── */}
+      {customFilterActive && (
+        <div className={styles.group}>
+          <label className={styles.filterLabel}>Text</label>
+          <div className={styles.customFilterChip} title="Click X to clear (TUI: X key)">
+            <span className={styles.customFilterIcon}><IconFilter size={12} stroke={1.5} /></span>
+            <span className={styles.customFilterLabel}>{customTextFilter}</span>
+            <button
+              className={styles.customFilterClear}
+              onClick={() => setCustomTextFilter(null)}
+              title="Clear custom text filter (TUI: X)"
+              aria-label="Clear custom text filter"
+            >
+              <IconX size={12} stroke={2} />
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* ── Reset view (TUI: N) — only visible when filters are active ── */}
+      {activeFilterCount > 0 && (
+        <button
+          className={styles.resetBtn}
+          onClick={onResetView}
+          title={`Reset ${activeFilterCount} active filter${activeFilterCount === 1 ? '' : 's'} (TUI: N)`}
+        >
+          <IconRefresh size={12} stroke={1.5} />
+          <span>Reset</span>
+          <span className={styles.resetBadge}>{activeFilterCount}</span>
+        </button>
+      )}
+
       {/* ── Ping interval selector ── */}
       <div className={styles.group}>
         <label className={styles.filterLabel}>Ping</label>
         <div className={styles.pingRow}>
-          {PING_MODES.map(m => (
+          {PING_MODES.map((m) => (
             <button
               key={m.key}
               className={`${styles.pingBtn} ${pingMode === m.key ? styles.pingBtnActive : ''}`}
@@ -151,25 +249,20 @@ export default function FilterBar({
         </div>
       </div>
 
-      {/* ── Next ping countdown + LIVE ── */}
+      {/* ── Next ping countdown (TUI parity: always show the delay) ──
+          📖 The TUI footer always renders `next : Xs` regardless of whether
+          📖 a ping is in flight — users care about the delay until the next
+          📖 cycle, not the "is pinging right now" boolean. We follow the same
+          📖 model: a single countdown line, with a small pulsing dot when
+          📖 `isPinging` is true so the LIVE state is still visible without
+          📖 resorting to the "Pinging…" text. */}
       <div className={styles.group}>
-        {isPinging ? (
-          <div className={styles.nextPing} title="Pinging now…">
-            <span className={styles.pingingDot} />
-            <span className={styles.pingingText}>Pinging…</span>
-          </div>
-        ) : countdownDisplay ? (
-          <div className={styles.nextPing} title="Next ping countdown">
-            <span className={styles.nextPingLabel}>Next</span>
-            <span className={styles.nextPingTime}>{countdownDisplay}</span>
-          </div>
-        ) : (
-          <div className={styles.live}>
-            <span className={styles.liveDot} />
-            <span>LIVE</span>
-          </div>
-        )}
+        <div className={styles.nextPing} title="Next ping countdown">
+          <span className={styles.nextPingLabel}>next ping in</span>
+          <span className={styles.nextPingTime}>{countdownDisplay ?? '—'}</span>
+          {isPinging && <span className={styles.pingingDot} aria-hidden="true" />}
+        </div>
       </div>
     </section>
   )
-}
+}