free-coding-models 0.5.10 → 0.5.12

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

@@ -1,14 +1,15 @@
 /**
  * @file web/src/components/router/RouterView.jsx
- * @description Router Dashboard modal — daemon status, start/stop, model health,
- * request log, set management, probe mode, quick-setup card.
- * 📖 M4: Full TUI parity for the router dashboard overlay.
+ * @description Router Dashboard modal — daemon status, start/stop, active set
+ * manager (add / remove / drag-and-drop), probe mode, quick-setup card.
+ * 📖 M5: full set-management UI replacing the M4 read-only "Model Health" section.
  */
-import { useEffect, useState, useCallback } from 'react'
+import { useEffect, useState, useCallback, useMemo, useRef } from 'react'
 import {
   IconRoute, IconPlayerPlay, IconPlayerStop, IconRefresh,
   IconCopy, IconCheck, IconChevronDown, IconChevronUp,
-  IconActivity, IconServer,
+  IconActivity, IconServer, IconPlus, IconX, IconGripVertical,
+  IconArrowUp, IconArrowDown, IconTrash, IconList, IconWand,
 } from '@tabler/icons-react'
 import styles from './RouterView.module.css'
 
@@ -38,6 +39,11 @@ function CircuitBadge({ state }) {
   return <span className={`${styles.circuitBadge} ${cls}`}>{state?.replace('_', ' ') || '?'}</span>
 }
 
+const SAVE_STATUS_IDLE = { kind: 'idle' }
+const SAVE_STATUS_SAVING = { kind: 'saving' }
+const SAVE_STATUS_SAVED = { kind: 'saved' }
+const SAVE_STATUS_ERROR = (message) => ({ kind: 'error', message })
+
 export default function RouterView({ onClose, onToast }) {
   const [status, setStatus] = useState(null)
   const [stats, setStats] = useState(null)
@@ -45,6 +51,18 @@ export default function RouterView({ onClose, onToast }) {
   const [actionLoading, setActionLoading] = useState(false)
   const [logExpanded, setLogExpanded] = useState(false)
   const [copied, setCopied] = useState(null)
+  const [autoHealDismissed, setAutoHealDismissed] = useState(false)
+
+  // 📖 Set management state — the active set, its model list (mutated
+  // 📖 locally on every drag/remove/add), and the catalog of available
+  // 📖 routeable models for the Add picker.
+  const [setsData, setSetsData] = useState({ activeSet: null, sets: {} })
+  const [catalog, setCatalog] = useState([]) // [{ key, provider, model, label, tier, ctx, hasKey }]
+  const [pickerOpen, setPickerOpen] = useState(false)
+  const [pickerSearch, setPickerSearch] = useState('')
+  const [pickerProvider, setPickerProvider] = useState('')
+  const [saveStatus, setSaveStatus] = useState(SAVE_STATUS_IDLE)
+  const saveTimerRef = useRef(null)
 
   const fetchStatus = useCallback(async () => {
     try {
@@ -59,12 +77,42 @@ export default function RouterView({ onClose, onToast }) {
     } catch {}
   }, [])
 
+  const fetchSets = useCallback(async () => {
+    try {
+      const resp = await fetch('/api/router/sets')
+      const data = await resp.json()
+      if (data && data.sets) setSetsData(data)
+    } catch {}
+  }, [])
+
+  const fetchCatalog = useCallback(async () => {
+    try {
+      const resp = await fetch('/api/router/catalog')
+      const data = await resp.json()
+      if (Array.isArray(data?.models)) setCatalog(data.models)
+    } catch {}
+  }, [])
+
   useEffect(() => {
     void fetchStatus()
+    void fetchSets()
+    void fetchCatalog()
     void fetch('/api/router/quick-setup').then(r => r.json()).then(setQuickSetup).catch(() => {})
-    const interval = setInterval(fetchStatus, 5000)
+    const interval = setInterval(() => {
+      void fetchStatus()
+      void fetchSets()
+    }, 5000)
     return () => clearInterval(interval)
-  }, [fetchStatus])
+  }, [fetchStatus, fetchSets, fetchCatalog])
+
+  // 📖 Cleanup the "saved" indicator so it fades back to idle after 1.5s.
+  useEffect(() => {
+    if (saveStatus.kind !== 'saved') return undefined
+    saveTimerRef.current = setTimeout(() => setSaveStatus(SAVE_STATUS_IDLE), 1500)
+    return () => {
+      if (saveTimerRef.current) clearTimeout(saveTimerRef.current)
+    }
+  }, [saveStatus])
 
   const handleStart = async () => {
     setActionLoading(true)
@@ -74,6 +122,7 @@ export default function RouterView({ onClose, onToast }) {
       if (data.ok || data.alreadyRunning) {
         onToast?.('Router daemon started.', 'success')
         await fetchStatus()
+        await fetchSets()
       } else {
         onToast?.(`Failed to start: ${data.error || 'unknown'}`, 'error')
       }
@@ -118,10 +167,250 @@ export default function RouterView({ onClose, onToast }) {
     } catch {}
   }
 
+  // ── Set management helpers ────────────────────────────────────────────
+  const activeSetName = setsData?.activeSet || status?.activeSet || 'fast-coding'
+  const activeSet = setsData?.sets?.[activeSetName] || { models: [] }
+  const models = Array.isArray(activeSet.models) ? activeSet.models : []
+
+  const setActiveSet = async (name) => {
+    try {
+      await fetch(`/api/router/sets/${encodeURIComponent(name)}/activate`, { method: 'POST' })
+      onToast?.(`Active set: ${name}`, 'info')
+      await fetchSets()
+      await fetchStatus()
+    } catch (err) {
+      onToast?.(`Failed to activate: ${err.message}`, 'error')
+    }
+  }
+
+  // 📖 "Sync best" — re-run the probe pipeline against the user's actual
+  // 📖 API keys and rebuild the set with only models that come back 2xx.
+  // 📖 This is the one-click "default to working models" path for users
+  // 📖 whose keys have changed since the last sync or who want a fresh
+  // 📖 probe-driven ranking. The daemon shows probe progress to the UI
+  // 📖 and returns the new model list.
+  const handleSyncBest = async () => {
+    if (!activeSetName) return
+    setSaveStatus(SAVE_STATUS_SAVING)
+    onToast?.('Probing models with your keys…', 'info')
+    try {
+      const resp = await fetch(`/api/router/sets/${encodeURIComponent(activeSetName)}/sync`, { method: 'POST' })
+      if (!resp.ok) {
+        const err = await resp.json().catch(() => ({}))
+        throw new Error(err.error || `HTTP ${resp.status}`)
+      }
+      const data = await resp.json()
+      const picked = data.selected?.length || 0
+      const probed = data.probeCount || 0
+      onToast?.(`Synced ${activeSetName}: ${picked} working model${picked === 1 ? '' : 's'} from ${probed} probes.`, 'success')
+      await fetchSets()
+      await fetchStatus()
+      setSaveStatus(SAVE_STATUS_SAVED)
+    } catch (err) {
+      setSaveStatus(SAVE_STATUS_ERROR(err.message || String(err)))
+      onToast?.(`Sync failed: ${err.message}`, 'error')
+    }
+  }
+
+  const persistReorder = useCallback(async (nextModels) => {
+    if (!activeSetName) return
+    setSaveStatus(SAVE_STATUS_SAVING)
+    try {
+      const order = nextModels.map((m) => `${m.provider}/${m.model}`)
+      const resp = await fetch(`/api/router/sets/${encodeURIComponent(activeSetName)}/reorder`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ order }),
+      })
+      if (!resp.ok) {
+        const err = await resp.json().catch(() => ({}))
+        throw new Error(err.error || `HTTP ${resp.status}`)
+      }
+      const data = await resp.json()
+      if (data?.sets?.[activeSetName]) {
+        setSetsData((prev) => ({ ...prev, sets: data.sets }))
+      } else {
+        await fetchSets()
+      }
+      setSaveStatus(SAVE_STATUS_SAVED)
+    } catch (err) {
+      setSaveStatus(SAVE_STATUS_ERROR(err.message || String(err)))
+      onToast?.(`Reorder failed: ${err.message}`, 'error')
+    }
+  }, [activeSetName, fetchSets, onToast])
+
+  const persistAdd = useCallback(async (provider, model) => {
+    if (!activeSetName) return
+    setSaveStatus(SAVE_STATUS_SAVING)
+    try {
+      const resp = await fetch(`/api/router/sets/${encodeURIComponent(activeSetName)}/models`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ provider, model }),
+      })
+      if (!resp.ok) {
+        const err = await resp.json().catch(() => ({}))
+        throw new Error(err.error || `HTTP ${resp.status}`)
+      }
+      const data = await resp.json()
+      if (data?.sets?.[activeSetName]) {
+        setSetsData((prev) => ({ ...prev, sets: data.sets }))
+      } else {
+        await fetchSets()
+      }
+      setSaveStatus(SAVE_STATUS_SAVED)
+      onToast?.(`Added ${provider}/${model} to ${activeSetName}.`, 'success')
+    } catch (err) {
+      setSaveStatus(SAVE_STATUS_ERROR(err.message || String(err)))
+      onToast?.(`Add failed: ${err.message}`, 'error')
+    }
+  }, [activeSetName, fetchSets, onToast])
+
+  const persistRemove = useCallback(async (provider, model) => {
+    if (!activeSetName) return
+    setSaveStatus(SAVE_STATUS_SAVING)
+    try {
+      const resp = await fetch(`/api/router/sets/${encodeURIComponent(activeSetName)}/models`, {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ provider, model }),
+      })
+      if (!resp.ok) {
+        const err = await resp.json().catch(() => ({}))
+        throw new Error(err.error || `HTTP ${resp.status}`)
+      }
+      const data = await resp.json()
+      if (data?.sets?.[activeSetName]) {
+        setSetsData((prev) => ({ ...prev, sets: data.sets }))
+      } else {
+        await fetchSets()
+      }
+      setSaveStatus(SAVE_STATUS_SAVED)
+    } catch (err) {
+      setSaveStatus(SAVE_STATUS_ERROR(err.message || String(err)))
+      onToast?.(`Remove failed: ${err.message}`, 'error')
+    }
+  }, [activeSetName, fetchSets, onToast])
+
+  // ── 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.
+  const [localModels, setLocalModels] = useState(models)
+  useEffect(() => { setLocalModels(models) }, [models])
+  const [draggingKey, setDraggingKey] = useState(null)
+  const [dropPosition, setDropPosition] = useState(null) // { key, side: 'above' | 'below' } | null
+
+  const handleMove = useCallback(async (idx, direction) => {
+    const next = [...localModels]
+    const newIdx = direction === 'up' ? idx - 1 : idx + 1
+    if (newIdx < 0 || newIdx >= next.length) return
+    const [moved] = next.splice(idx, 1)
+    next.splice(newIdx, 0, moved)
+    setLocalModels(next)
+    await persistReorder(next)
+  }, [localModels, persistReorder])
+
+  const handleRemove = useCallback(async (idx) => {
+    const target = localModels[idx]
+    if (!target) return
+    // Optimistic update: drop the row immediately, send the DELETE after.
+    const next = localModels.filter((_, i) => i !== idx)
+    setLocalModels(next)
+    await persistRemove(target.provider, target.model)
+  }, [localModels, persistRemove])
+
+  const handleDragStart = (e, idx) => {
+    const target = localModels[idx]
+    if (!target) return
+    setDraggingKey(`${target.provider}/${target.model}`)
+    // 📖 dataTransfer is required for Firefox to actually fire drag events.
+    e.dataTransfer.effectAllowed = 'move'
+    e.dataTransfer.setData('text/plain', `${target.provider}/${target.model}`)
+  }
+
+  const handleDragOver = (e, idx) => {
+    if (draggingKey == null) return
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+    const target = localModels[idx]
+    if (!target) return
+    const key = `${target.provider}/${target.model}`
+    if (key === draggingKey) return
+    const rect = e.currentTarget.getBoundingClientRect()
+    const side = e.clientY < rect.top + rect.height / 2 ? 'above' : 'below'
+    setDropPosition({ key, side })
+  }
+
+  const handleDragLeave = (e) => {
+    // 📖 Don't clear on every leave — only when we leave the list entirely.
+    if (e.currentTarget.contains(e.relatedTarget)) return
+  }
+
+  const handleDrop = async (e, idx) => {
+    e.preventDefault()
+    if (draggingKey == null) return
+    const dragIdx = localModels.findIndex((m) => `${m.provider}/${m.model}` === draggingKey)
+    if (dragIdx < 0) {
+      setDraggingKey(null)
+      setDropPosition(null)
+      return
+    }
+    const target = localModels[idx]
+    if (!target) {
+      setDraggingKey(null)
+      setDropPosition(null)
+      return
+    }
+    const rect = e.currentTarget.getBoundingClientRect()
+    const side = e.clientY < rect.top + rect.height / 2 ? 'above' : 'below'
+    let insertAt = side === 'above' ? idx : idx + 1
+    if (dragIdx < insertAt) insertAt -= 1
+    if (insertAt === dragIdx) {
+      setDraggingKey(null)
+      setDropPosition(null)
+      return
+    }
+    const next = [...localModels]
+    const [moved] = next.splice(dragIdx, 1)
+    next.splice(insertAt, 0, moved)
+    setLocalModels(next)
+    setDraggingKey(null)
+    setDropPosition(null)
+    await persistReorder(next)
+  }
+
+  const handleDragEnd = () => {
+    setDraggingKey(null)
+    setDropPosition(null)
+  }
+
+  // ── Picker filter ────────────────────────────────────────────────────
+  const providers = useMemo(() => {
+    const set = new Set(catalog.map((m) => m.provider))
+    return Array.from(set).sort()
+  }, [catalog])
+
+  const filteredCatalog = useMemo(() => {
+    const q = pickerSearch.trim().toLowerCase()
+    return catalog.filter((m) => {
+      if (pickerProvider && m.provider !== pickerProvider) return false
+      if (!q) return true
+      return (
+        m.key.toLowerCase().includes(q)
+        || (m.label || '').toLowerCase().includes(q)
+        || m.provider.toLowerCase().includes(q)
+      )
+    }).slice(0, 200)
+  }, [catalog, pickerSearch, pickerProvider])
+
+  const modelKeyInSet = (provider, model) => localModels.some((m) => m.provider === provider && m.model === model)
+
   const running = status?.ok
-  const models = stats?.models || []
-  const requestLog = stats?.requestLog || []
   const circuitBreakers = stats?.circuitBreakers || {}
+  const requestLog = stats?.requestLog || []
+
+  const sets = setsData?.sets || {}
+  const setNames = Object.keys(sets).sort()
 
   return (
     <div className={styles.overlay} onClick={(e) => e.target === e.currentTarget && onClose()}>
@@ -135,6 +424,37 @@ export default function RouterView({ onClose, onToast }) {
         </div>
 
         <div className={styles.body}>
+          {/* Auto-heal banner — shown when the daemon detected broken
+              models in the active set on startup. The banner disappears
+              once the user clicks "Sync best" or "Fix now" (which heals
+              the set and reloads the page state). */}
+          {running && status?.brokenModelCount > 0 && !autoHealDismissed && (
+            <div className={styles.autoHealBanner}>
+              <div className={styles.autoHealLeft}>
+                <span className={styles.autoHealIcon}>⚠</span>
+                <div>
+                  <div className={styles.autoHealTitle}>
+                    {status.brokenModelCount} model{status.brokenModelCount === 1 ? '' : 's'} in the active set are not responding
+                  </div>
+                  <div className={styles.autoHealHint}>
+                    Auto-heal ran on startup but the replacement may also be broken.
+                    Click <strong>Sync best</strong> below to re-probe with your current keys,
+                    or click <strong>Fix now</strong> to manually replace the broken entries.
+                  </div>
+                </div>
+              </div>
+              <div className={styles.autoHealActions}>
+                <button className={styles.smallBtn} onClick={handleSyncBest}>
+                  <IconWand size={11} />
+                  Fix now
+                </button>
+                <button className={styles.iconBtn} onClick={() => setAutoHealDismissed(true)} aria-label="Dismiss">
+                  <IconX size={12} />
+                </button>
+              </div>
+            </div>
+          )}
+
           {/* Hero Card */}
           <div className={`${styles.heroCard} ${running ? styles.heroRunning : styles.heroStopped}`}>
             <div className={styles.heroLeft}>
@@ -203,6 +523,173 @@ export default function RouterView({ onClose, onToast }) {
             </div>
           )}
 
+          {/* Active Set Manager */}
+          {running && (
+            <div className={styles.section}>
+              <h3 className={styles.sectionTitle}>
+                <IconList size={14} />
+                Active Set ({localModels.length} models)
+              </h3>
+
+              <div className={styles.setMeta}>
+                <div className={styles.setActions}>
+                  <span className={styles.setMetaName}>{activeSetName}</span>
+                  {setNames.length > 1 && (
+                    <select
+                      className={styles.pickerSelect}
+                      value={activeSetName}
+                      onChange={(e) => setActiveSet(e.target.value)}
+                      title="Switch the active set"
+                    >
+                      {setNames.map((n) => (
+                        <option key={n} value={n}>{n}</option>
+                      ))}
+                    </select>
+                  )}
+                </div>
+                <div className={styles.setActions}>
+                  <SaveBadge status={saveStatus} />
+                  <button
+                    className={styles.smallBtn}
+                    onClick={handleSyncBest}
+                    disabled={saveStatus.kind === 'saving'}
+                    title="Probe your API keys and rebuild the set with only models that actually work"
+                  >
+                    <IconWand size={11} />
+                    Sync best
+                  </button>
+                  <button
+                    className={styles.primaryBtn}
+                    onClick={() => setPickerOpen((v) => !v)}
+                    disabled={saveStatus.kind === 'saving'}
+                  >
+                    {pickerOpen ? <IconX size={11} /> : <IconPlus size={11} />}
+                    {pickerOpen ? 'Close' : 'Add model'}
+                  </button>
+                </div>
+              </div>
+
+              {localModels.length === 0 ? (
+                <div className={styles.setEmpty}>
+                  The active set is empty. Add models with the button above to start routing.
+                </div>
+              ) : (
+                <div className={styles.setList} onDragLeave={handleDragLeave}>
+                  {localModels.map((m, idx) => {
+                    const key = `${m.provider}/${m.model}`
+                    const cb = circuitBreakers[key] || {}
+                    const isDragging = draggingKey === key
+                    const dropAbove = dropPosition?.key === key && dropPosition.side === 'above'
+                    const dropBelow = dropPosition?.key === key && dropPosition.side === 'below'
+                    return (
+                      <div
+                        key={key}
+                        className={`${styles.setRow} ${isDragging ? styles.setRowDragging : ''} ${dropAbove ? `${styles.setRowDropTarget} ${styles.setRowDropTargetAbove}` : ''} ${dropBelow ? `${styles.setRowDropTarget} ${styles.setRowDropTargetBelow}` : ''}`}
+                        draggable
+                        onDragStart={(e) => handleDragStart(e, idx)}
+                        onDragOver={(e) => handleDragOver(e, idx)}
+                        onDrop={(e) => handleDrop(e, idx)}
+                        onDragEnd={handleDragEnd}
+                        title={key}
+                      >
+                        <span className={styles.setDragHandle} aria-hidden>
+                          <IconGripVertical size={14} />
+                        </span>
+                        <span className={styles.setPriority}>#{idx + 1}</span>
+                        <span className={styles.setKey}>{key}</span>
+                        {m.tier && <span className={styles.setTier}>{m.tier}</span>}
+                        <CircuitBadge state={cb.state || m.state} />
+                        <div className={styles.setRowBtns}>
+                          <button
+                            className={styles.iconBtn}
+                            onClick={() => handleMove(idx, 'up')}
+                            disabled={idx === 0 || saveStatus.kind === 'saving'}
+                            title="Move up"
+                            aria-label={`Move ${key} up`}
+                          >
+                            <IconArrowUp size={12} />
+                          </button>
+                          <button
+                            className={styles.iconBtn}
+                            onClick={() => handleMove(idx, 'down')}
+                            disabled={idx === localModels.length - 1 || saveStatus.kind === 'saving'}
+                            title="Move down"
+                            aria-label={`Move ${key} down`}
+                          >
+                            <IconArrowDown size={12} />
+                          </button>
+                          <button
+                            className={`${styles.iconBtn} ${styles.removeBtn}`}
+                            onClick={() => handleRemove(idx)}
+                            disabled={saveStatus.kind === 'saving'}
+                            title="Remove from set"
+                            aria-label={`Remove ${key}`}
+                          >
+                            <IconTrash size={12} />
+                          </button>
+                        </div>
+                      </div>
+                    )
+                  })}
+                </div>
+              )}
+
+              {pickerOpen && (
+                <div className={styles.pickerPanel}>
+                  <div className={styles.pickerHeader}>
+                    <span>Add a model to <code>{activeSetName}</code></span>
+                    <span style={{ color: 'var(--text-muted, #888)' }}>
+                      {filteredCatalog.length} of {catalog.length}
+                    </span>
+                  </div>
+                  <div className={styles.pickerSearch}>
+                    <input
+                      className={styles.pickerInput}
+                      placeholder="Search by provider, model, or label…"
+                      value={pickerSearch}
+                      onChange={(e) => setPickerSearch(e.target.value)}
+                      autoFocus
+                    />
+                    <select
+                      className={styles.pickerSelect}
+                      value={pickerProvider}
+                      onChange={(e) => setPickerProvider(e.target.value)}
+                    >
+                      <option value="">All providers</option>
+                      {providers.map((p) => (
+                        <option key={p} value={p}>{p}</option>
+                      ))}
+                    </select>
+                  </div>
+                  <div className={styles.pickerList}>
+                    {filteredCatalog.length === 0 ? (
+                      <div className={styles.pickerEmpty}>No models match your filter.</div>
+                    ) : (
+                      filteredCatalog.map((entry) => {
+                        const inSet = modelKeyInSet(entry.provider, entry.model)
+                        return (
+                          <div
+                            key={entry.key}
+                            className={`${styles.pickerItem} ${inSet ? styles.pickerItemAdded : ''}`}
+                            onClick={() => { if (!inSet) void persistAdd(entry.provider, entry.model) }}
+                            title={inSet ? 'Already in set' : `Add ${entry.key}`}
+                          >
+                            <span className={styles.pickerProvider}>{entry.provider}</span>
+                            <span className={styles.pickerModel}>{entry.label || entry.model}</span>
+                            {entry.tier && <span className={styles.setTier}>{entry.tier}</span>}
+                            {entry.hasKey
+                              ? <span className={`${styles.pickerBadge} ${styles.pickerBadgeOk}`}>key</span>
+                              : <span className={styles.pickerBadge}>no key</span>}
+                          </div>
+                        )
+                      })
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
           {/* Probe Mode */}
           {running && (
             <div className={styles.section}>
@@ -224,32 +711,6 @@ export default function RouterView({ onClose, onToast }) {
             </div>
           )}
 
-          {/* Model Health */}
-          {running && models.length > 0 && (
-            <div className={styles.section}>
-              <h3 className={styles.sectionTitle}>
-                <IconServer size={14} />
-                Model Health ({models.length})
-              </h3>
-              <div className={styles.modelList}>
-                {models.map((m) => {
-                  const cb = circuitBreakers[m.key] || {}
-                  return (
-                    <div key={m.key} className={styles.modelRow}>
-                      <span className={styles.modelPriority}>#{m.priority}</span>
-                      <span className={styles.modelName} title={m.key}>{m.key}</span>
-                      <CircuitBadge state={cb.state || m.state} />
-                      <span className={styles.modelScore}>{m.score?.toFixed(2) || '—'}</span>
-                      <span className={styles.modelLatency}>
-                        {m.last_latency_ms != null ? `${m.last_latency_ms}ms` : '—'}
-                      </span>
-                    </div>
-                  )
-                })}
-              </div>
-            </div>
-          )}
-
           {/* Request Log */}
           {running && requestLog.length > 0 && (
             <div className={styles.section}>
@@ -279,8 +740,31 @@ export default function RouterView({ onClose, onToast }) {
               )}
             </div>
           )}
+
+          {/* Server health (small chip at the bottom for visibility) */}
+          <div className={styles.section} style={{ marginBottom: 0, marginTop: 16 }}>
+            <span className={styles.saveStatus}>
+              {stats?.tokenStats ? `${formatNumber(stats.tokenStats.all_time?.total_tokens || 0)} tokens routed lifetime` : ''}
+            </span>
+          </div>
         </div>
       </div>
     </div>
   )
 }
+
+function SaveBadge({ status }) {
+  if (!status || status.kind === 'idle') return null
+  if (status.kind === 'saving') {
+    return <span className={styles.saveStatus}>saving…</span>
+  }
+  if (status.kind === 'saved') {
+    return <span className={`${styles.saveStatus} ${styles.saveStatusOk}`}>✓ saved</span>
+  }
+  if (status.kind === 'error') {
+    return <span className={`${styles.saveStatus} ${styles.saveStatusErr}`} title={status.message}>
+      ⚠ {status.message?.slice(0, 40) || 'error'}
+    </span>
+  }
+  return null
+}