free-coding-models 0.5.29 → 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

@@ -10,8 +10,10 @@ import {
   IconCopy, IconCheck, IconChevronDown, IconChevronUp,
   IconActivity, IconServer, IconPlus, IconX, IconGripVertical,
   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 '—'
@@ -74,6 +76,12 @@ export default function RouterView({ onClose, onToast }) {
   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 {
       const resp = await fetch('/api/router/status')
@@ -115,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
@@ -307,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.
@@ -433,6 +496,15 @@ export default function RouterView({ onClose, onToast }) {
   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) {
@@ -603,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)}
@@ -614,6 +697,26 @@ 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}>
                   <div className={styles.setEmptyTitle}>No models in the active set</div>
@@ -639,6 +742,11 @@ export default function RouterView({ onClose, onToast }) {
                   {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'
@@ -671,6 +779,18 @@ export default function RouterView({ onClose, onToast }) {
                         <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}
@@ -818,6 +938,30 @@ export default function RouterView({ onClose, onToast }) {
             </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}>

package/web/src/components/router/RouterView.module.css

@@ -844,3 +844,284 @@
   flex-shrink: 0;
 }
 
+/* ════════════════════════════════════════════════════════════════════════
+   📖 Probe-all button + progress bar (AI Latency benchmarks on the set).
+   ════════════════════════════════════════════════════════════════════════ */
+
+/* 📖 Active state for the Probe button while benchmarks run. */
+.probeBtnActive {
+  border-color: var(--accent, #00c864);
+  color: var(--accent, #00c864);
+  cursor: progress;
+}
+
+/* 📖 Progress card shown below the set actions while probing. */
+.probeProgress {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px 10px;
+  margin-bottom: 8px;
+  background: var(--bg-secondary, #14141f);
+  border: 1px solid rgba(0, 200, 100, 0.2);
+  border-radius: 6px;
+}
+
+.probeProgressLabel {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  color: var(--accent, #00c864);
+  font-weight: 600;
+}
+
+.probeProgressCount {
+  margin-left: auto;
+  color: var(--text-secondary, #aaa);
+  font-weight: 500;
+  font-family: 'SF Mono', monospace;
+}
+
+.probeProgressBar {
+  height: 4px;
+  background: var(--bg-primary, #0f0f17);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.probeProgressFill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--accent, #00c864), rgba(0, 200, 100, 0.6));
+  border-radius: 2px;
+  transition: width 0.4s ease;
+}
+
+/* ════════════════════════════════════════════════════════════════════════
+   📖 AI Latency cell in each set row — populated by Probe all.
+   ════════════════════════════════════════════════════════════════════════ */
+
+.aiLatencyCell {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 78px;
+  font-size: 10px;
+  font-family: 'SF Mono', monospace;
+  justify-content: flex-end;
+}
+
+.aiLatencyMs {
+  font-weight: 700;
+  color: #b400ff;
+}
+
+.aiLatencyTps {
+  color: var(--text-muted, #888);
+  font-size: 9px;
+}
+
+.aiLatencySpin {
+  color: var(--accent, #00c864);
+  letter-spacing: 2px;
+  animation: probeSpin 0.8s steps(3, end) infinite;
+}
+
+@keyframes probeSpin {
+  0% { opacity: 0.3; }
+  50% { opacity: 1; }
+  100% { opacity: 0.3; }
+}
+
+.aiLatencyErr {
+  color: var(--error, #ff5a5a);
+  font-size: 10px;
+}
+
+.aiLatencyNone {
+  color: var(--text-muted, #888);
+  opacity: 0.4;
+}
+
+/* ════════════════════════════════════════════════════════════════════════
+   📖 Mini Playground — live router test inside the Router view.
+   ════════════════════════════════════════════════════════════════════════ */
+
+.miniPgHint {
+  margin-left: auto;
+  font-size: 10px;
+  font-weight: 400;
+  color: var(--text-muted, #888);
+}
+
+.miniPgHint code {
+  color: var(--accent, #00c864);
+  font-family: 'SF Mono', monospace;
+}
+
+.miniPg {
+  max-height: 220px;
+  overflow-y: auto;
+  padding: 8px;
+  margin-bottom: 8px;
+  background: var(--bg-primary, #0f0f17);
+  border: 1px solid var(--border, #1e1e2e);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  scroll-behavior: smooth;
+}
+
+.miniPgEmpty {
+  text-align: center;
+  color: var(--text-muted, #888);
+  font-size: 11px;
+  padding: 18px 8px;
+}
+
+.miniPgMsg {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  max-width: 88%;
+}
+
+.miniPgUser {
+  align-self: flex-end;
+  align-items: flex-end;
+}
+
+.miniPgAssistant {
+  align-self: flex-start;
+  align-items: flex-start;
+}
+
+.miniPgBubble {
+  padding: 7px 11px;
+  border-radius: 12px;
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--text-primary, #e0e0e0);
+}
+
+.miniPgUser .miniPgBubble {
+  background: rgba(0, 200, 100, 0.12);
+  border: 1px solid rgba(0, 200, 100, 0.2);
+  border-bottom-right-radius: 4px;
+}
+
+.miniPgAssistant .miniPgBubble {
+  background: var(--bg-secondary, #14141f);
+  border: 1px solid var(--border, #1e1e2e);
+  border-bottom-left-radius: 4px;
+}
+
+.miniPgTyping {
+  color: var(--accent, #00c864);
+  letter-spacing: 3px;
+  animation: probeSpin 0.9s steps(3, end) infinite;
+}
+
+.miniPgError {
+  display: block;
+  margin-top: 4px;
+  color: var(--error, #ff5a5a);
+  font-size: 11px;
+}
+
+.miniPgAborted {
+  display: block;
+  margin-top: 4px;
+  color: var(--text-muted, #888);
+  font-size: 10px;
+  font-style: italic;
+}
+
+/* 📖 Target badge under each user bubble — shows the Primary model the
+   router will try first for this message (priority-first routing, #120).
+   If failover kicks in, the reply's .miniPgRouted badge shows a different
+   model, making the fallback chain visible at a glance. */
+.miniPgTarget {
+  font-size: 10px;
+  color: var(--text-muted, #888);
+  font-family: 'SF Mono', monospace;
+  padding: 0 4px;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.miniPgTarget svg {
+  color: var(--accent, #00c864);
+}
+
+/* 📖 Routed-via badge under each assistant reply — shows WHICH model the
+   priority-first router actually picked for this message (issue #120). */
+.miniPgRouted {
+  font-size: 10px;
+  color: var(--text-muted, #888);
+  font-family: 'SF Mono', monospace;
+  padding: 0 4px;
+}
+
+.miniPgRouted span {
+  color: var(--accent, #00c864);
+}
+
+.miniPgInputRow {
+  display: flex;
+  gap: 6px;
+  align-items: stretch;
+}
+
+.miniPgInput {
+  flex: 1;
+  padding: 8px 12px;
+  background: var(--bg-primary, #0f0f17);
+  border: 1px solid var(--border, #1e1e2e);
+  border-radius: 8px;
+  color: var(--text-primary, #e0e0e0);
+  font-size: 12px;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.miniPgInput:focus {
+  border-color: var(--accent, #00c864);
+}
+
+.miniPgInput::placeholder {
+  color: var(--text-muted, #888);
+}
+
+.miniPgSendBtn,
+.miniPgStopBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: opacity 0.15s, background 0.15s;
+  flex-shrink: 0;
+}
+
+.miniPgSendBtn {
+  background: var(--accent, #00c864);
+  color: #000;
+}
+
+.miniPgSendBtn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.miniPgStopBtn {
+  background: var(--error, #ff5a5a);
+  color: #fff;
+}