free-coding-models 0.5.0 → 0.5.4

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

@@ -5,6 +5,7 @@
  * `onClose` callback, and `onToast` for feedback notifications.
  * @functions ExportModal → renders the modal with three export option buttons
  */
+import { IconUpload, IconBraces, IconFileSpreadsheet, IconClipboard } from '@tabler/icons-react'
 import { downloadFile } from '../../utils/download.js'
 import styles from './ExportModal.module.css'
 
@@ -45,27 +46,30 @@ export default function ExportModal({ models, onClose, onToast }) {
     <div className={styles.overlay} onClick={(e) => e.target === e.currentTarget && onClose()}>
       <div className={styles.modal}>
         <div className={styles.modalHeader}>
-          <h2 className={styles.modalTitle}>📤 Export Data</h2>
+          <h2 className={styles.modalTitle}>
+            <IconUpload size={20} stroke={1.5} style={{ marginRight: 8, verticalAlign: 'middle' }} />
+            Export Data
+          </h2>
           <button className={styles.modalClose} onClick={onClose}>&times;</button>
         </div>
         <div className={styles.modalBody}>
           <div className={styles.options}>
             <button className={styles.option} onClick={handleJson}>
-              <span className={styles.optionIcon}>{'{ }'}</span>
+              <span className={styles.optionIcon}><IconBraces size={20} stroke={1.5} /></span>
               <div>
                 <span className={styles.optionLabel}>Export as JSON</span>
                 <span className={styles.optionDesc}>Full model data with all metrics</span>
               </div>
             </button>
             <button className={styles.option} onClick={handleCsv}>
-              <span className={styles.optionIcon}>📊</span>
+              <span className={styles.optionIcon}><IconFileSpreadsheet size={20} stroke={1.5} /></span>
               <div>
                 <span className={styles.optionLabel}>Export as CSV</span>
                 <span className={styles.optionDesc}>Spreadsheet-compatible format</span>
               </div>
             </button>
             <button className={styles.option} onClick={handleClipboard}>
-              <span className={styles.optionIcon}>📋</span>
+              <span className={styles.optionIcon}><IconClipboard size={20} stroke={1.5} /></span>
               <div>
                 <span className={styles.optionLabel}>Copy to Clipboard</span>
                 <span className={styles.optionDesc}>Copy model summary as text</span>
@@ -77,3 +81,4 @@ export default function ExportModal({ models, onClose, onToast }) {
     </div>
   )
 }
+

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

@@ -1,71 +1,266 @@
 /**
  * @file web/src/components/dashboard/FilterBar.jsx
- * @description Filter controls for tier, status, provider, and search + live indicator.
+ * @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, useMemo } from 'react'
+import { IconRefresh, IconX, IconFilter, IconCircleCheck, IconAlertTriangle, IconActivity, IconEye, IconStar } from '@tabler/icons-react'
 import styles from './FilterBar.module.css'
 
-const TIERS = ['All', 'S+', 'S', 'A+', 'A', 'A-', 'B+', 'B', 'C']
+// 📖 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+' },
+  { key: 'S', label: 'S' },
+  { key: 'A+', label: 'A+' },
+  { key: 'A', label: 'A' },
+  { key: 'A-', label: 'A-' },
+  { key: 'B+', label: 'B+' },
+  { key: 'B', label: 'B' },
+  { key: 'C', label: 'C' },
+]
 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' },
+  { key: 'normal', label: '● Normal', interval: '10s', color: '#ffaa00' },
+  { key: 'slow',   label: '🐢 Slow',  interval: '30s', color: '#ff6644' },
+  { key: 'forced', label: '🔥 Forced', interval: '4s',  color: '#ff4466' },
+]
+
+function formatCountdown(ms) {
+  if (ms == null) return null
+  const s = Math.max(0, Math.ceil(ms / 1000))
+  if (s === 1) return '1s'
+  if (s < 60) return `${s}s`
+  const m = Math.floor(s / 60)
+  const rem = s % 60
+  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,
+  isPinging,
+  globalBenchmarkRunning,
+  globalBenchmarkTotal,
+  globalBenchmarkCompleted,
 }) {
+  const [countdown, setCountdown] = useState(null)
+
+  useEffect(() => {
+    if (nextPingAt == null) return
+    const tick = () => {
+      const rem = nextPingAt - Date.now()
+      setCountdown(rem > 0 ? rem : 0)
+    }
+    tick()
+    const id = setInterval(tick, 1000)
+    return () => clearInterval(id)
+  }, [nextPingAt])
+
+  const countdownDisplay = countdown !== null ? formatCountdown(countdown) : null
+
+  // 📖 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}>
-      <div className={styles.group}>
-        <label className={styles.filterLabel}>Tier</label>
-        <div className={styles.tierRow}>
-          {TIERS.map(t => (
-            <button
-              key={t}
-              className={`${styles.tierBtn} ${filterTier === t ? styles.active : ''}`}
-              onClick={() => setFilterTier(t)}
-            >
-              {t}
-            </button>
-          ))}
+      {/* ── Global benchmark progress bar (Ctrl+U) ── */}
+      {globalBenchmarkRunning && (
+        <div className={styles.benchmarkBar}>
+          <div className={styles.benchmarkLabel}>
+            <span className={styles.benchmarkSpinner} />
+            <span>AI Speed Test</span>
+            <span className={styles.benchmarkCount}>{globalBenchmarkCompleted}/{globalBenchmarkTotal}</span>
+          </div>
+          <div className={styles.benchmarkTrack}>
+            <div className={styles.benchmarkFill} style={{ width: `${benchmarkPct}%` }} />
+          </div>
+          <span className={styles.benchmarkPct}>{benchmarkPct}%</span>
         </div>
-      </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}>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) => (
+            <button
+              key={m.key}
+              className={`${styles.pingBtn} ${pingMode === m.key ? styles.pingBtnActive : ''}`}
+              style={pingMode === m.key ? { '--ping-active-color': m.color } : {}}
+              onClick={() => setPingMode(m.key)}
+              title={`${m.interval} interval`}
+            >
+              {m.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* ── 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}>
-        <div className={styles.live}>
-          <span className={styles.liveDot} />
-          <span>LIVE</span>
+        <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>

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

@@ -1,43 +1,208 @@
+/**
+ * @file web/src/components/dashboard/FilterBar.module.css
+ * @description Filter bar styles — M1 parity chips (tier, status, verdict, health,
+ * visibility, provider, custom text filter, reset, ping mode).
+ * 📖 Sticky below the header (`top: 60px` = header height) so the filter chips
+ * 📖 stay visible while the user scrolls a long table.
+ */
+
 .filters {
-  position: relative; z-index: 1;
-  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
-  padding: 16px 24px;
+  position: sticky; top: 60px; z-index: 99;
+  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
+  padding: 10px 20px;
+  background: var(--color-bg-card);
+  border-bottom: 1px solid var(--color-border);
+  backdrop-filter: blur(20px) saturate(1.5);
+  -webkit-backdrop-filter: blur(20px) saturate(1.5);
 }
-.group { display: flex; align-items: center; gap: 8px; }
+
+.group { display: flex; align-items: center; gap: 6px; }
+
 .filterLabel {
-  font-size: 11px; font-weight: 600; color: var(--color-text-muted);
+  font-size: 10px; font-weight: 700; color: var(--color-text-muted);
   text-transform: uppercase; letter-spacing: 0.5px;
+  white-space: nowrap;
 }
-.tierRow { display: flex; gap: 4px; }
-.tierBtn {
-  font-size: 12px; font-weight: 600; font-family: var(--font-mono);
-  padding: 4px 10px; border-radius: 6px;
+
+/* ── Chip rows (TUI cycle behavior) ── */
+.chipRow { display: flex; gap: 3px; }
+.chip {
+  font-size: 11px; font-weight: 600; font-family: var(--font-mono);
+  padding: 4px 8px; border-radius: 5px;
   border: 1px solid var(--color-border); background: var(--color-surface);
   color: var(--color-text-muted); cursor: pointer; transition: all 150ms;
+  white-space: nowrap;
 }
-.tierBtn:hover { background: var(--color-bg-hover); color: var(--color-text); }
-.active {
-  background: var(--color-accent) !important; color: #000 !important;
+.chip:hover { background: var(--color-bg-hover); color: var(--color-text); }
+.chipActive {
+  background: var(--color-accent) !important; color: var(--color-bg) !important;
   border-color: var(--color-accent) !important; font-weight: 700;
 }
-.providerSelect {
+
+/* ── Select inputs (provider, visibility) ── */
+.select, .providerSelect {
   background: var(--color-surface); color: var(--color-text);
-  border: 1px solid var(--color-border); border-radius: 6px;
-  padding: 5px 10px; font-size: 12px; font-family: var(--font-sans);
+  border: 1px solid var(--color-border); border-radius: 5px;
+  padding: 4px 8px; font-size: 11px; font-family: var(--font-sans);
   cursor: pointer; outline: none;
+  min-width: 130px;
 }
-.providerSelect:focus { border-color: var(--color-accent); }
+.select:focus, .providerSelect:focus { border-color: var(--color-accent); }
+
+/* ── Spacer + reset ── */
 .spacer { flex: 1; }
-.live {
+
+.resetBtn {
+  display: inline-flex; align-items: center; gap: 5px;
+  font-size: 11px; font-weight: 700; font-family: var(--font-mono);
+  padding: 4px 9px; border-radius: 5px;
+  border: 1px solid var(--color-border-hover);
+  background: var(--color-accent-dim);
+  color: var(--color-text);
+  cursor: pointer; transition: all 150ms;
+}
+.resetBtn:hover {
+  background: var(--color-accent);
+  color: var(--color-bg);
+}
+.resetBadge {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 16px; height: 16px;
+  font-size: 9px; font-weight: 800;
+  background: var(--color-bg);
+  color: var(--color-accent);
+  border-radius: 999px;
+  padding: 0 4px;
+}
+
+/* ── Custom text filter chip (TUI Ctrl+P "Apply text filter") ── */
+.customFilterChip {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-size: 11px; font-weight: 600; font-family: var(--font-mono);
+  padding: 3px 4px 3px 8px;
+  border: 1px solid var(--color-accent);
+  background: var(--color-accent-dim);
+  color: var(--color-accent);
+  border-radius: 5px;
+  max-width: 240px;
+}
+.customFilterIcon { display: inline-flex; flex-shrink: 0; }
+.customFilterLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.customFilterClear {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 18px; height: 18px;
+  background: transparent;
+  border: none;
+  color: var(--color-accent);
+  border-radius: 3px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.customFilterClear:hover { background: var(--color-accent); color: var(--color-bg); }
+
+/* ── Ping interval selector ── */
+.pingRow { display: flex; gap: 3px; }
+.pingBtn {
+  font-size: 11px; font-weight: 600; font-family: var(--font-mono);
+  padding: 4px 8px; border-radius: 5px;
+  border: 1px solid var(--color-border); background: var(--color-surface);
+  color: var(--color-text-muted); cursor: pointer; transition: all 150ms;
+  white-space: nowrap;
+}
+.pingBtn:hover { background: var(--color-bg-hover); color: var(--color-text); border-color: var(--color-text-muted); }
+.pingBtnActive {
+  background: var(--color-bg-hover) !important;
+  color: var(--ping-active-color, var(--color-accent)) !important;
+  border-color: var(--ping-active-color, var(--color-accent)) !important;
+  font-weight: 700;
+}
+
+/* ── Next ping countdown (TUI parity) ── */
+.nextPing {
   display: flex; align-items: center; gap: 6px;
-  font-size: 11px; font-weight: 700; color: var(--color-accent);
-  text-transform: uppercase; letter-spacing: 1px;
+  font-size: 11px; font-family: var(--font-mono);
+  padding: 4px 8px;
+  border: 1px solid var(--color-border);
+  border-radius: 5px;
+  background: var(--color-surface);
 }
-.liveDot {
-  width: 8px; height: 8px; border-radius: 50%;
-  background: var(--color-accent); animation: pulseDot 2s ease-in-out infinite;
+.nextPingLabel {
+  font-size: 10px; font-weight: 500; color: var(--color-text-muted);
+  text-transform: uppercase; letter-spacing: 0.5px;
 }
+.nextPingTime {
+  font-size: 13px; font-weight: 700; color: var(--color-text);
+  min-width: 32px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.pingingDot {
+  width: 7px; height: 7px; border-radius: 50%;
+  background: #ff4466; animation: pulseDot 0.6s ease-in-out infinite;
+  flex-shrink: 0;
+}
+
 @keyframes pulseDot {
   0%, 100% { box-shadow: 0 0 0 0 var(--color-accent-glow); }
   50% { box-shadow: 0 0 0 6px transparent; }
 }
+
+.live {
+  display: flex; align-items: center; gap: 5px;
+  font-size: 10px; font-weight: 700; color: var(--color-accent);
+  text-transform: uppercase; letter-spacing: 1px;
+}
+.liveDot {
+  width: 7px; height: 7px; border-radius: 50%;
+  background: var(--color-accent); animation: pulseDot 2s ease-in-out infinite;
+}
+
+/* ── Global benchmark progress bar (Ctrl+U) ── */
+.benchmarkBar {
+  display: flex; align-items: center; gap: 10px;
+  background: rgba(180, 0, 255, 0.12);
+  border: 1px solid rgba(180, 0, 255, 0.4);
+  border-radius: 6px;
+  padding: 6px 12px;
+  flex-shrink: 0;
+  width: 100%;
+  margin-bottom: 4px;
+}
+.benchmarkLabel {
+  display: flex; align-items: center; gap: 5px;
+  font-size: 11px; font-weight: 700;
+  color: #b400ff; font-family: var(--font-mono);
+  white-space: nowrap;
+}
+.benchmarkSpinner {
+  display: inline-block;
+  animation: spinSp 0.8s linear infinite;
+  font-size: 12px; line-height: 1;
+}
+.benchmarkCount { font-size: 10px; opacity: 0.8; }
+.benchmarkTrack {
+  width: 120px; height: 5px;
+  background: rgba(255,255,255,0.1);
+  border-radius: 3px; overflow: hidden;
+  flex: 1;
+}
+.benchmarkFill {
+  height: 100%;
+  background: linear-gradient(90deg, #b400ff, #ff00ff);
+  border-radius: 3px;
+  transition: width 0.5s ease;
+}
+.benchmarkPct {
+  font-size: 11px; font-weight: 700;
+  color: #b400ff; font-family: var(--font-mono);
+  min-width: 32px; text-align: right;
+}
+
+@keyframes spinSp {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}