free-coding-models 0.5.0 → 0.5.1

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,10 +1,22 @@
 /**
  * @file web/src/components/dashboard/FilterBar.jsx
- * @description Filter controls for tier, status, provider, and search + live indicator.
+ * @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).
  */
+import { useState, useEffect } from 'react'
 import styles from './FilterBar.module.css'
 
-const TIERS = ['All', 'S+', 'S', 'A+', 'A', 'A-', 'B+', 'B', 'C']
+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' },
@@ -12,24 +24,82 @@ const STATUSES = [
   { key: 'pending', label: 'Pending' },
 ]
 
+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' : ''}`
+}
+
 export default function FilterBar({
   filterTier, setFilterTier,
   filterStatus, setFilterStatus,
   filterProvider, setFilterProvider,
   providers,
+  pingMode, setPingMode,
+  nextPingAt,
+  isPinging,
+  globalBenchmarkRunning,
+  globalBenchmarkTotal,
+  globalBenchmarkCompleted,
 }) {
+  const [countdown, setCountdown] = useState(null)
+
+  // Update countdown every second when nextPingAt is set
+  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
+
+  // Global benchmark progress percentage
+  const benchmarkPct = globalBenchmarkRunning && globalBenchmarkTotal > 0
+    ? Math.round((globalBenchmarkCompleted / globalBenchmarkTotal) * 100)
+    : 0
+
   return (
     <section className={styles.filters}>
+      {/* ── 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 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)}
+              key={t.key}
+              className={`${styles.tierBtn} ${filterTier === t.key ? styles.active : ''}`}
+              onClick={() => setFilterTier(t.key)}
             >
-              {t}
+              {t.label}
             </button>
           ))}
         </div>
@@ -62,12 +132,44 @@ export default function FilterBar({
         </select>
       </div>
       <div className={styles.spacer} />
+
+      {/* ── Ping interval selector ── */}
       <div className={styles.group}>
-        <div className={styles.live}>
-          <span className={styles.liveDot} />
-          <span>LIVE</span>
+        <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 + LIVE ── */}
+      <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>
     </section>
   )
-}
+}

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

@@ -17,7 +17,7 @@
 }
 .tierBtn:hover { background: var(--color-bg-hover); color: var(--color-text); }
 .active {
-  background: var(--color-accent) !important; color: #000 !important;
+  background: var(--color-accent) !important; color: var(--color-bg) !important;
   border-color: var(--color-accent) !important; font-weight: 700;
 }
 .providerSelect {
@@ -37,7 +37,92 @@
   width: 8px; height: 8px; border-radius: 50%;
   background: var(--color-accent); animation: pulseDot 2s ease-in-out infinite;
 }
+
+/* ── Next ping countdown ── */
+.nextPing {
+  display: flex; align-items: center; gap: 6px;
+  font-size: 12px; font-family: var(--font-mono);
+}
+.nextPingLabel {
+  font-size: 11px; font-weight: 500; color: var(--color-text-muted);
+  text-transform: uppercase; letter-spacing: 0.5px;
+}
+.nextPingTime {
+  font-size: 14px; font-weight: 700; color: var(--color-text);
+  min-width: 32px;
+}
+.pingingDot {
+  width: 8px; height: 8px; border-radius: 50%;
+  background: #ff4466; animation: pulseDot 0.6s ease-in-out infinite;
+}
+.pingingText {
+  font-size: 12px; font-weight: 600; color: #ff4466;
+  font-family: var(--font-mono);
+}
+
 @keyframes pulseDot {
   0%, 100% { box-shadow: 0 0 0 0 var(--color-accent-glow); }
   50% { box-shadow: 0 0 0 6px transparent; }
 }
+
+/* ── Ping interval selector ── */
+.pingRow { display: flex; gap: 4px; }
+.pingBtn {
+  font-size: 12px; font-weight: 600; font-family: var(--font-mono);
+  padding: 4px 10px; border-radius: 6px;
+  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;
+}
+
+/* ── Global benchmark progress bar (Ctrl+U) ── */
+.benchmarkBar {
+  display: flex; align-items: center; gap: 12px;
+  background: rgba(180, 0, 255, 0.12);
+  border: 1px solid rgba(180, 0, 255, 0.4);
+  border-radius: 8px;
+  padding: 8px 14px;
+  flex-shrink: 0;
+}
+.benchmarkLabel {
+  display: flex; align-items: center; gap: 6px;
+  font-size: 12px; 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: 14px; line-height: 1;
+}
+.benchmarkCount {
+  font-size: 11px; opacity: 0.8;
+}
+.benchmarkTrack {
+  width: 120px; height: 6px;
+  background: rgba(255,255,255,0.1);
+  border-radius: 3px; overflow: hidden;
+}
+.benchmarkFill {
+  height: 100%;
+  background: linear-gradient(90deg, #b400ff, #ff00ff);
+  border-radius: 3px;
+  transition: width 0.5s ease;
+}
+.benchmarkPct {
+  font-size: 12px; font-weight: 700;
+  color: #b400ff; font-family: var(--font-mono);
+  min-width: 36px; text-align: right;
+}
+
+@keyframes spinSp {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}