free-coding-models 0.5.28 → 0.5.30

package/web/src/components/playground/PlaygroundView.module.css

@@ -166,6 +166,16 @@
   min-height: 320px;
 }
 
+/* 📖 Flex container that fills the modal body and hosts either the router
+   daemon start/starting panels or the shared <PlaygroundChat> (which itself is
+   a column flex that scrolls internally and pins the input at the bottom). */
+.chatBody {
+  flex: 1;
+  min-height: 320px;
+  display: flex;
+  flex-direction: column;
+}
+
 .empty {
   flex: 1;
   display: flex;

package/web/src/components/router/RouterView.jsx

@@ -9,9 +9,11 @@ import {
   IconRoute, IconPlayerPlay, IconPlayerStop, IconRefresh,
   IconCopy, IconCheck, IconChevronDown, IconChevronUp,
   IconActivity, IconServer, IconPlus, IconX, IconGripVertical,
-  IconArrowUp, IconArrowDown, IconTrash, IconList, IconWand,
+  IconArrowRight, IconArrowUp, IconArrowDown, IconTrash, IconList, IconWand,
+  IconSend, IconBolt,
 } from '@tabler/icons-react'
 import styles from './RouterView.module.css'
+import PlaygroundChat from '../playground/PlaygroundChat.jsx'
 
 function formatUptime(seconds) {
   if (!seconds || seconds <= 0) return '—'
@@ -72,6 +74,13 @@ export default function RouterView({ onClose, onToast }) {
   const [pickerProvider, setPickerProvider] = useState('')
   const [saveStatus, setSaveStatus] = useState(SAVE_STATUS_IDLE)
   const saveTimerRef = useRef(null)
+  const hasAutoExpandedLog = useRef(false)
+
+  // 📖 Probe state — AI Latency benchmarks launched on the active set. Progress
+  // 📖 comes from /stats.globalBenchmark (polled), results land on
+  // 📖 /stats.models[].benchmark. `probePolling` speeds up polling while running
+  // 📖 so the progress bar + per-model latencies update live.
+  const [probePolling, setProbePolling] = useState(false)
 
   const fetchStatus = useCallback(async () => {
     try {
@@ -114,6 +123,23 @@ export default function RouterView({ onClose, onToast }) {
     return () => clearInterval(interval)
   }, [fetchStatus, fetchSets, fetchCatalog])
 
+  // 📖 Fast-poll /stats while a probe is running so the progress bar and
+  // 📖 per-model AI latencies stream in live (every 1.2s instead of 5s).
+  // 📖 Stops the moment the daemon reports the global benchmark as done.
+  useEffect(() => {
+    if (!probePolling) return undefined
+    const interval = setInterval(() => { void fetchStatus() }, 1200)
+    return () => clearInterval(interval)
+  }, [probePolling, fetchStatus])
+
+  // 📖 Keep probePolling in sync with the daemon's real state: if it says the
+  // 📖 global benchmark stopped, drop our fast-poll flag so we go back to 5s.
+  useEffect(() => {
+    if (probePolling && stats?.globalBenchmark && !stats.globalBenchmark.running) {
+      setProbePolling(false)
+    }
+  }, [stats?.globalBenchmark, probePolling])
+
   // 📖 Cleanup the "saved" indicator so it fades back to idle after 1.5s.
   useEffect(() => {
     if (saveStatus.kind !== 'saved') return undefined
@@ -133,10 +159,15 @@ export default function RouterView({ onClose, onToast }) {
         await fetchStatus()
         await fetchSets()
       } else {
-        onToast?.(`Failed to start: ${data.error || 'unknown'}`, 'error')
+        onToast?.(`Failed to start: ${data.error || data.message || 'unknown'}`, 'error')
       }
     } catch (err) {
-      onToast?.(`Start failed: ${err.message}`, 'error')
+      // 📖 Distinguish between "daemon not running" (fetch itself fails) and
+      // 📖 other network errors so the user gets an actionable error message.
+      const msg = err.name === 'TypeError' && err.message?.includes('fetch')
+        ? 'Cannot reach daemon — it may not be installed or the port is blocked'
+        : err.message
+      onToast?.(`Start failed: ${msg}`, 'error')
     } finally { setActionLoading(false) }
   }
 
@@ -301,6 +332,44 @@ export default function RouterView({ onClose, onToast }) {
     }
   }, [activeSetName, fetchSets, onToast])
 
+  // 📖 handleProbeAll — launch AI Latency benchmarks on every model in the
+  // 📖 active set, inside the DAEMON. Progress + results stream back through
+  // 📖 /stats (globalBenchmark + per-model benchmark), which the fast-poll
+  // 📖 effect above picks up every 1.2s. Disabled while already running.
+  const handleProbeAll = async () => {
+    if (!activeSetName || probePolling) return
+    if (localModels.length === 0) {
+      onToast?.('Add models to the set first, then probe.', 'info')
+      return
+    }
+    try {
+      const probeModels = localModels.map((m) => ({ providerKey: m.provider, modelId: m.model }))
+      const resp = await fetch('/api/router/probe-all', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ models: probeModels }),
+      })
+      const data = await resp.json().catch(() => null)
+      if (!resp.ok || !resp.status || resp.status === 409) {
+        throw new Error(data?.error || 'Probe already running')
+      }
+      setProbePolling(true)
+      const total = data?.total ?? localModels.length
+      onToast?.(`Probing ${total} model${total === 1 ? '' : 's'} for AI Latency…`, 'info')
+      await fetchStatus()
+    } catch (err) {
+      onToast?.(`Probe failed: ${err.message}`, 'error')
+      setProbePolling(false)
+    }
+  }
+
+  // 📖 The "Test Router" mini playground is now rendered by the shared
+  // 📖 <PlaygroundChat> component (model="fcm"), which streams the reply
+  // 📖 through /api/playground/chat and shows the harmonized metadata row
+  // 📖 (served model · ms · tok · t/s) under every reply. The router's
+  // 📖 Primary pick is passed as `targetLabel` so the user sees which model
+  // 📖 the priority-first router will try first under their user bubble.
+
   // ── Drag and drop state ───────────────────────────────────────────────
   // We keep a local copy of `models` so the drag UX is instant — the
   // server is updated only when the user actually drops the row.
@@ -418,6 +487,38 @@ export default function RouterView({ onClose, onToast }) {
   const circuitBreakers = stats?.circuitBreakers || {}
   const requestLog = stats?.requestLog || []
 
+  // 📖 routingOrder — the exact attempt order the daemon will use for the next
+  // 📖 request (priority-first among healthy models). routingOrder[0] is the
+  // 📖 model that will serve the next chat. Used to mark the "next" row and
+  // 📖 to label Primary vs Fallback semantics. Falls back to set order when the
+  // 📖 daemon isn't running or hasn't reported yet (so stopped state still shows
+  // 📖 a sensible priority chain). See issue #120.
+  const routingOrder = stats?.routingOrder || []
+  const nextToServeKey = routingOrder.length > 0 ? routingOrder[0].key : null
+
+  // 📖 Benchmark results keyed by "provider/model" so each set row can show
+  // 📖 its live AI Latency + TPS after a probe. Built from /stats.models.
+  const benchmarkByKey = new Map()
+  for (const m of (stats?.models || [])) {
+    if (m && typeof m.key === 'string') benchmarkByKey.set(m.key, m)
+  }
+  const globalBenchmark = stats?.globalBenchmark || null
+  const probeActive = Boolean(globalBenchmark?.running) || probePolling
+
+  // 📖 Auto-expand the request log the first time requests appear.
+  useEffect(() => {
+    if (requestLog.length > 0 && !hasAutoExpandedLog.current) {
+      hasAutoExpandedLog.current = true
+      setLogExpanded(true)
+    }
+  }, [requestLog.length])
+
+  // 📖 Computed quick-setup display values: actual when running, defaults when stopped.
+  const qsBaseUrl = running && quickSetup?.baseUrl ? quickSetup.baseUrl : 'http://localhost:19280/v1'
+  const qsModel = quickSetup?.model || 'fcm'
+  const qsApiKey = 'fcm-local'
+  const qsAllText = `Base URL: ${qsBaseUrl}\nModel: ${qsModel}\nAPI Key: ${qsApiKey}`
+
   const sets = setsData?.sets || {}
   const setNames = Object.keys(sets).sort()
 
@@ -464,6 +565,41 @@ export default function RouterView({ onClose, onToast }) {
             </div>
           )}
 
+          {/* Quick Setup — ALWAYS visible, front and center */}
+          <div className={`${styles.quickSetup} ${running ? styles.quickSetupHero : ''}`}>
+            <h3 className={styles.sectionTitle}>
+              <IconCopy size={14} />
+              Quick Setup
+              <button className={styles.copyAllBtn} onClick={() => handleCopy(qsAllText, 'all')}>
+                {copied === 'all' ? <IconCheck size={12} /> : <IconCopy size={12} />}
+                {copied === 'all' ? 'Copied!' : 'Copy all'}
+              </button>
+            </h3>
+            <div className={styles.quickRows}>
+              <div className={styles.quickRow}>
+                <span className={styles.quickLabel}>Base URL</span>
+                <code className={styles.quickValue}>{qsBaseUrl}</code>
+                <button className={styles.copyBtn} onClick={() => handleCopy(qsBaseUrl, 'url')}>
+                  {copied === 'url' ? <IconCheck size={12} /> : <IconCopy size={12} />}
+                </button>
+              </div>
+              <div className={styles.quickRow}>
+                <span className={styles.quickLabel}>Model</span>
+                <code className={styles.quickValue}>{qsModel}</code>
+                <button className={styles.copyBtn} onClick={() => handleCopy(qsModel, 'model')}>
+                  {copied === 'model' ? <IconCheck size={12} /> : <IconCopy size={12} />}
+                </button>
+              </div>
+              <div className={styles.quickRow}>
+                <span className={styles.quickLabel}>API Key</span>
+                <code className={styles.quickValue}>{qsApiKey}</code>
+                <button className={styles.copyBtn} onClick={() => handleCopy(qsApiKey, 'key')}>
+                  {copied === 'key' ? <IconCheck size={12} /> : <IconCopy size={12} />}
+                </button>
+              </div>
+            </div>
+          </div>
+
           {/* Hero Card */}
           <div className={`${styles.heroCard} ${running ? styles.heroRunning : styles.heroStopped}`}>
             <div className={styles.heroLeft}>
@@ -488,8 +624,8 @@ export default function RouterView({ onClose, onToast }) {
             </div>
             <div className={styles.heroActions}>
               {!running ? (
-                <button className={styles.startBtn} onClick={handleStart} disabled={actionLoading}>
-                  <IconPlayerPlay size={14} />
+                <button className={`${styles.startBtn} ${styles.startBtnBig}`} onClick={handleStart} disabled={actionLoading}>
+                  <IconPlayerPlay size={16} />
                   {actionLoading ? 'Starting…' : 'Start Router'}
                 </button>
               ) : (
@@ -504,34 +640,6 @@ export default function RouterView({ onClose, onToast }) {
             </div>
           </div>
 
-          {/* Quick Setup */}
-          {running && quickSetup && (
-            <div className={styles.quickSetup}>
-              <h3 className={styles.sectionTitle}>
-                <IconCopy size={14} />
-                Quick Setup
-              </h3>
-              <div className={styles.quickRows}>
-                {quickSetup.baseUrl && (
-                  <div className={styles.quickRow}>
-                    <span className={styles.quickLabel}>Base URL</span>
-                    <code className={styles.quickValue}>{quickSetup.baseUrl}</code>
-                    <button className={styles.copyBtn} onClick={() => handleCopy(quickSetup.baseUrl, 'url')}>
-                      {copied === 'url' ? <IconCheck size={12} /> : <IconCopy size={12} />}
-                    </button>
-                  </div>
-                )}
-                <div className={styles.quickRow}>
-                  <span className={styles.quickLabel}>Model</span>
-                  <code className={styles.quickValue}>{quickSetup.model}</code>
-                  <button className={styles.copyBtn} onClick={() => handleCopy(quickSetup.model, 'model')}>
-                    {copied === 'model' ? <IconCheck size={12} /> : <IconCopy size={12} />}
-                  </button>
-                </div>
-              </div>
-            </div>
-          )}
-
           {/* Active Set Manager */}
           {running && (
             <div className={styles.section}>
@@ -567,6 +675,17 @@ export default function RouterView({ onClose, onToast }) {
                     <IconWand size={11} />
                     Sync best
                   </button>
+                  {/* 📖 Probe all — run AI Latency benchmarks on every model in the
+                      set. Results stream into the rows below (AI Lat column). */}
+                  <button
+                    className={`${styles.smallBtn} ${probeActive ? styles.probeBtnActive : ''}`}
+                    onClick={handleProbeAll}
+                    disabled={probeActive || saveStatus.kind === 'saving' || localModels.length === 0}
+                    title="Benchmark AI Latency + TPS on every model in this set"
+                  >
+                    <IconBolt size={11} />
+                    {probeActive ? 'Probing…' : 'Probe all'}
+                  </button>
                   <button
                     className={styles.primaryBtn}
                     onClick={() => setPickerOpen((v) => !v)}
@@ -578,22 +697,69 @@ export default function RouterView({ onClose, onToast }) {
                 </div>
               </div>
 
+              {/* 📖 Probe progress bar — shown while AI Latency benchmarks run
+                  across the set. Reads /stats.globalBenchmark (fast-polled). */}
+              {probeActive && globalBenchmark && (
+                <div className={styles.probeProgress}>
+                  <div className={styles.probeProgressLabel}>
+                    <IconBolt size={11} />
+                    AI Latency probe
+                    <span className={styles.probeProgressCount}>
+                      {globalBenchmark.completed} / {globalBenchmark.total || localModels.length}
+                    </span>
+                  </div>
+                  <div className={styles.probeProgressBar}>
+                    <div
+                      className={styles.probeProgressFill}
+                      style={{ width: `${Math.min(100, ((globalBenchmark.completed || 0) / Math.max(1, globalBenchmark.total || localModels.length)) * 100)}%` }}
+                    />
+                  </div>
+                </div>
+              )}
+
               {localModels.length === 0 ? (
                 <div className={styles.setEmpty}>
-                  The active set is empty. Add models with the button above to start routing.
+                  <div className={styles.setEmptyTitle}>No models in the active set</div>
+                  <div className={styles.setEmptyHint}>
+                    Add models from the picker below, or click <strong>Sync best</strong> above to auto-pick working models.
+                  </div>
                 </div>
               ) : (
-                <div className={styles.setList} onDragLeave={handleDragLeave}>
+                <>
+                  {/* 📖 Priority legend — explains the fallback chain so users
+                      understand WHY the top model serves every request (issue #120).
+                      Higher priority = tried first; the rest are failover targets. */}
+                  <div className={styles.priorityLegend}>
+                    <span className={styles.legendPrimary}><IconArrowRight size={11} /> Primary</span>
+                    <span className={styles.legendSeparator}>tries first</span>
+                    <span className={styles.legendFallback}>Fallback</span>
+                    <span className={styles.legendSeparator}>on failure / rate-limit</span>
+                    {running && nextToServeKey && (
+                      <span className={styles.legendNext}>Next up: <code>{nextToServeKey}</code></span>
+                    )}
+                  </div>
+                  <div className={styles.setList} onDragLeave={handleDragLeave}>
                   {localModels.map((m, idx) => {
                     const key = `${m.provider}/${m.model}`
                     const cb = circuitBreakers[key] || {}
+                    // 📖 Per-model AI Latency from the latest probe. `bm` is the
+                    // 📖 raw benchmark result; `bmLoading` is true while it runs.
+                    const bmEntry = benchmarkByKey.get(key)
+                    const bm = bmEntry?.benchmark || null
+                    const bmLoading = Boolean(bmEntry?.isBenchmarking)
                     const isDragging = draggingKey === key
                     const dropAbove = dropPosition?.key === key && dropPosition.side === 'above'
                     const dropBelow = dropPosition?.key === key && dropPosition.side === 'below'
+                    // 📖 Priority semantics for the UI: #1 is the Primary model the
+                    // 📖 router tries first; everyone else is a Fallback. `isNext` is
+                    // 📖 true for the exact model the daemon will serve next request —
+                    // 📖 derived from /stats.routingOrder (priority-first, see #120).
+                    const isPrimary = idx === 0
+                    const isNext = running && nextToServeKey === key
                     return (
                       <div
                         key={key}
-                        className={`${styles.setRow} ${isDragging ? styles.setRowDragging : ''} ${dropAbove ? `${styles.setRowDropTarget} ${styles.setRowDropTargetAbove}` : ''} ${dropBelow ? `${styles.setRowDropTarget} ${styles.setRowDropTargetBelow}` : ''}`}
+                        className={`${styles.setRow} ${isDragging ? styles.setRowDragging : ''} ${isNext ? styles.setRowNext : ''} ${dropAbove ? `${styles.setRowDropTarget} ${styles.setRowDropTargetAbove}` : ''} ${dropBelow ? `${styles.setRowDropTarget} ${styles.setRowDropTargetBelow}` : ''}`}
                         draggable
                         onDragStart={(e) => handleDragStart(e, idx)}
                         onDragOver={(e) => handleDragOver(e, idx)}
@@ -604,10 +770,27 @@ export default function RouterView({ onClose, onToast }) {
                         <span className={styles.setDragHandle} aria-hidden>
                           <IconGripVertical size={14} />
                         </span>
-                        <span className={styles.setPriority}>#{idx + 1}</span>
+                        <span
+                          className={`${styles.setPriority} ${isPrimary ? styles.setPriorityPrimary : styles.setPriorityFallback}`}
+                          title={isPrimary ? 'Primary model — tried first on every request' : `Fallback #${idx + 1} — used when higher-priority models fail or rate-limit`}
+                        >
+                          {isPrimary ? 'Primary' : `#${idx + 1}`}
+                        </span>
                         <span className={styles.setKey}>{key}</span>
                         {m.tier && <span className={styles.setTier}>{m.tier}</span>}
                         <CircuitBadge state={cb.state || m.state} />
+                        {/* 📖 AI Latency — populated by "Probe all". Shows a spinner
+                            while benchmarking, the latency+TPS once done, or a dim
+                            placeholder before the first probe. */}
+                        <span className={styles.aiLatencyCell} title={bm ? `AI Latency: ${Math.round(bm.totalMs)}ms · TPS: ${(bm.tokensPerSecond ?? 0).toFixed(1)}` : 'Run Probe all to measure AI Latency'}>
+                          {bmLoading
+                            ? <span className={styles.aiLatencySpin}>···</span>
+                            : bm?.ok
+                              ? <><span className={styles.aiLatencyMs}>{Math.round(bm.totalMs)}ms</span>{bm.tokensPerSecond != null && bm.tokensPerSecond > 0 && <span className={styles.aiLatencyTps}>{bm.tokensPerSecond.toFixed(1)} t/s</span>}</>
+                              : bm && !bm.ok
+                                ? <span className={styles.aiLatencyErr}>fail</span>
+                                : <span className={styles.aiLatencyNone}>—</span>}
+                        </span>
                         <div className={styles.setRowBtns}>
                           <button
                             className={styles.iconBtn}
@@ -641,6 +824,7 @@ export default function RouterView({ onClose, onToast }) {
                     )
                   })}
                 </div>
+                </>
               )}
 
               {pickerOpen && (
@@ -720,8 +904,8 @@ export default function RouterView({ onClose, onToast }) {
             </div>
           )}
 
-          {/* Request Log */}
-          {running && requestLog.length > 0 && (
+          {/* Request Log — always visible when running */}
+          {running && (
             <div className={styles.section}>
               <h3 className={styles.sectionTitle} onClick={() => setLogExpanded(!logExpanded)} style={{ cursor: 'pointer' }}>
                 <IconActivity size={14} />
@@ -729,27 +913,55 @@ export default function RouterView({ onClose, onToast }) {
                 {logExpanded ? <IconChevronUp size={12} /> : <IconChevronDown size={12} />}
               </h3>
               {logExpanded && (
-                <div className={styles.logList}>
-                  {requestLog.map((entry, i) => (
-                    <div key={i} className={styles.logRow}>
-                      <span className={entry.error ? styles.logErr : styles.logOk}>
-                        {entry.status || '—'}
-                      </span>
-                      <span className={styles.logModel}>{entry.model}</span>
-                      <span className={styles.logLatency}>
-                        {entry.latency_ms != null ? `${entry.latency_ms}ms` : '—'}
-                      </span>
-                      <span className={styles.logTokens}>
-                        {entry.tokens > 0 ? formatNumber(entry.tokens) + ' tok' : ''}
-                      </span>
-                      {entry.failover && <span className={styles.logFailover}>failover</span>}
-                    </div>
-                  ))}
-                </div>
+                requestLog.length === 0 ? (
+                  <div className={styles.logEmpty}>No requests yet. Start coding to see traffic here.</div>
+                ) : (
+                  <div className={styles.logList}>
+                    {requestLog.map((entry, i) => (
+                      <div key={i} className={styles.logRow}>
+                        <span className={entry.error ? styles.logErr : styles.logOk}>
+                          {entry.status || '—'}
+                        </span>
+                        <span className={styles.logModel}>{entry.model}</span>
+                        <span className={styles.logLatency}>
+                          {entry.latency_ms != null ? `${entry.latency_ms}ms` : '—'}
+                        </span>
+                        <span className={styles.logTokens}>
+                          {entry.tokens > 0 ? formatNumber(entry.tokens) + ' tok' : ''}
+                        </span>
+                        {entry.failover && <span className={styles.logFailover}>failover</span>}
+                      </div>
+                    ))}
+                  </div>
+                )
               )}
             </div>
           )}
 
+          {/* 📖 Test Router — the shared PlaygroundChat core, routed through
+              `fcm` so the user can sanity-check the priority-first router right
+              from this view. The router's Primary pick is passed as targetLabel
+              so it appears under the user bubble; the served model (+ ms / tok /
+              t/s) appears under the reply and reveals any failover. Only shown
+              when running (needs the daemon). */}
+          {running && (
+            <div className={styles.section}>
+              <h3 className={styles.sectionTitle}>
+                <IconSend size={14} />
+                Test Router
+                <span className={styles.miniPgHint}>routes through <code>fcm</code> — try the fallback chain</span>
+              </h3>
+              <PlaygroundChat
+                model="fcm"
+                variant="mini"
+                disabled={!running}
+                targetLabel={nextToServeKey || 'fcm'}
+                placeholder="Test the router… (e.g. write a haiku about TypeScript)"
+                emptyHint="Send a message to see which model the router picks, with latency + TPS."
+              />
+            </div>
+          )}
+
           {/* Server health (small chip at the bottom for visibility) */}
           <div className={styles.section} style={{ marginBottom: 0, marginTop: 16 }}>
             <span className={styles.saveStatus}>