free-coding-models 0.5.86 → 0.5.87

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

@@ -1,1212 +0,0 @@
-/**
- * @file web/src/components/router/RouterView.jsx
- * @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, useMemo, useRef } from 'react'
-import {
-  IconRoute, IconPlayerPlay, IconPlayerStop, IconRefresh,
-  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 '—'
-  const h = Math.floor(seconds / 3600)
-  const m = Math.floor((seconds % 3600) / 60)
-  const s = seconds % 60
-  if (h > 0) return `${h}h ${m}m`
-  if (m > 0) return `${m}m ${s}s`
-  return `${s}s`
-}
-
-function formatTime(isoString) {
-  if (!isoString) return '—'
-  try {
-    const d = new Date(isoString)
-    return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })
-  } catch {
-    return '—'
-  }
-}
-
-function formatNumber(n) {
-  if (typeof n !== 'number' || !Number.isFinite(n)) return '0'
-  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
-  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`
-  return String(n)
-}
-
-// 📖 Friendly labels for the circuit breaker states. The raw names
-// 📖 (CLOSED/OPEN/HALF_OPEN/AUTH_ERROR) are jargon — translate them
-// 📖 to words a normal developer can scan in <1 second.
-const CIRCUIT_STATE_LABELS = {
-  CLOSED:     { label: 'Healthy',    cls: 'circuitClosed' },
-  OPEN:       { label: 'Down',       cls: 'circuitOpen' },
-  HALF_OPEN:  { label: 'Recovering', cls: 'circuitHalfOpen' },
-  AUTH_ERROR: { label: 'Auth error', cls: 'circuitAuth' },
-  STALE:      { label: 'Deprecated', cls: 'circuitUnknown' },
-  UNSUPPORTED:{ label: 'Unsupported',cls: 'circuitUnknown' },
-  UNKNOWN:    { label: 'Unknown',    cls: 'circuitUnknown' },
-}
-
-function CircuitBadge({ state }) {
-  const entry = CIRCUIT_STATE_LABELS[state] || CIRCUIT_STATE_LABELS.UNKNOWN
-  return <span className={`${styles.circuitBadge} ${styles[entry.cls]}`}>{entry.label}</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, favorites }) {
-  const [status, setStatus] = useState(null)
-  const [stats, setStats] = useState(null)
-  const [quickSetup, setQuickSetup] = useState(null)
-  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 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')
-      const data = await resp.json()
-      setStatus(data)
-      if (data?.ok) {
-        const statsResp = await fetch('/api/router/stats')
-        const statsData = await statsResp.json()
-        if (statsData.ok) setStats(statsData)
-      }
-    } 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(() => {
-      void fetchStatus()
-      void fetchSets()
-    }, 2000)
-    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
-    saveTimerRef.current = setTimeout(() => setSaveStatus(SAVE_STATUS_IDLE), 1500)
-    return () => {
-      if (saveTimerRef.current) clearTimeout(saveTimerRef.current)
-    }
-  }, [saveStatus])
-
-  const handleStart = async () => {
-    setActionLoading(true)
-    try {
-      const resp = await fetch('/api/router/start', { method: 'POST' })
-      const data = await resp.json()
-      if (data.ok || data.alreadyRunning) {
-        onToast?.('Router daemon started.', 'success')
-        await fetchStatus()
-        await fetchSets()
-      } else {
-        onToast?.(`Failed to start: ${data.error || data.message || 'unknown'}`, 'error')
-      }
-    } catch (err) {
-      // 📖 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) }
-  }
-
-  const handleStop = async () => {
-    setActionLoading(true)
-    try {
-      const resp = await fetch('/api/router/stop', { method: 'POST' })
-      const data = await resp.json()
-      if (data.ok) {
-        onToast?.('Router daemon stopped.', 'success')
-        setStatus({ ok: false, running: false })
-        setStats(null)
-      } else {
-        onToast?.(`Failed to stop: ${data.error || 'unknown'}`, 'error')
-      }
-    } catch (err) {
-      onToast?.(`Stop failed: ${err.message}`, 'error')
-    } finally { setActionLoading(false) }
-  }
-
-  const handleCopy = (text, label) => {
-    navigator.clipboard.writeText(text).then(() => {
-      setCopied(label)
-      setTimeout(() => setCopied(null), 1500)
-    })
-  }
-
-  const handleSetProbeMode = async (mode) => {
-    try {
-      await fetch('/api/router/probe-mode', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ probeMode: mode }),
-      })
-      onToast?.(`Probe mode set to ${mode}.`, 'info')
-      await fetchStatus()
-    } 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')
-    }
-  }
-
-  // 📖 Replace active set models with favorites
-  const handleUseFavorites = async () => {
-    if (!activeSetName) return
-    const favList = favorites?.favorites || []
-    if (favList.length === 0) {
-      onToast?.('You do not have any favorite models yet. Star some models first!', 'info')
-      return
-    }
-
-    const nextModels = favList.map((key, idx) => {
-      const parts = key.split('/')
-      const provider = parts[0]
-      const model = parts.slice(1).join('/')
-      return { provider, model, priority: idx + 1 }
-    })
-
-    setSaveStatus(SAVE_STATUS_SAVING)
-    try {
-      const resp = await fetch(`/api/router/sets/${encodeURIComponent(activeSetName)}`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ models: nextModels }),
-      })
-      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?.(`Replaced active set with ${favList.length} favorite model${favList.length === 1 ? '' : 's'}.`, 'success')
-      await fetchStatus()
-    } catch (err) {
-      setSaveStatus(SAVE_STATUS_ERROR(err.message || String(err)))
-      onToast?.(`Failed to replace set: ${err.message}`, 'error')
-    }
-  }
-
-  // 📖 t8 - family failover keeps the user inside the same model family when a
-  // request fails (e.g. DeepSeek on NIM -> DeepSeek on Together) instead of
-  // hopping to a different family. Per-set toggle, persisted via PUT /sets/:name.
-  const handleToggleFamilyFailover = async () => {
-    if (!activeSetName) return
-    const next = !(activeSet?.familyFailover !== false)
-    setSaveStatus(SAVE_STATUS_SAVING)
-    try {
-      const resp = await fetch(`/api/router/sets/${encodeURIComponent(activeSetName)}`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ familyFailover: next }),
-      })
-      if (!resp.ok) {
-        const err = await resp.json().catch(() => ({}))
-        throw new Error(err.error || `HTTP ${resp.status}`)
-      }
-      setSaveStatus(SAVE_STATUS_SAVED)
-      onToast?.(`Family failover ${next ? 'enabled' : 'disabled'} for ${activeSetName}.`, 'info')
-      await fetchSets()
-    } catch (err) {
-      setSaveStatus(SAVE_STATUS_ERROR(err.message || String(err)))
-      onToast?.(`Failed to toggle family failover: ${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])
-
-  // 📖 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.
-  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 circuitBreakers = stats?.circuitBreakers || {}
-  const requestLog = stats?.requestLog || []
-  const activeRequests = status?.activeRequests || []
-
-  // 📖 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()
-
-  return (
-    <div className={styles.overlay} onClick={(e) => e.target === e.currentTarget && onClose()}>
-      <div className={styles.modal}>
-        <div className={styles.header}>
-          <h2 className={styles.title}>
-            <IconRoute size={20} stroke={1.5} />
-            Router Dashboard
-          </h2>
-          <button className={styles.closeBtn} onClick={onClose} aria-label="Close">✕</button>
-        </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>
-          )}
-
-          {/* 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}>
-              <div className={styles.heroStatus}>
-                <span className={`${styles.statusDot} ${running ? styles.dotGreen : styles.dotGray}`} />
-                <span className={styles.heroLabel}>{running ? 'Running' : 'Stopped'}</span>
-              </div>
-              {running && (
-                <div className={styles.heroMeta}>
-                  <span>Port {status.port}</span>
-                  <span>·</span>
-                  <span>Uptime {formatUptime(status.uptimeSeconds)}</span>
-                  <span>·</span>
-                  <span>{status.requestsRouted} requests</span>
-                </div>
-              )}
-              {!running && (
-                <div className={styles.heroMeta}>
-                  Smart failover router — start to route requests to the healthiest model.
-                </div>
-              )}
-            </div>
-            <div className={styles.heroActions}>
-              {!running ? (
-                <button className={`${styles.startBtn} ${styles.startBtnBig}`} onClick={handleStart} disabled={actionLoading}>
-                  <IconPlayerPlay size={16} />
-                  {actionLoading ? 'Starting…' : 'Start Router'}
-                </button>
-              ) : (
-                <button className={styles.stopBtn} onClick={handleStop} disabled={actionLoading}>
-                  <IconPlayerStop size={14} />
-                  {actionLoading ? 'Stopping…' : 'Stop'}
-                </button>
-              )}
-              <button className={styles.refreshBtn} onClick={fetchStatus} title="Refresh">
-                <IconRefresh size={14} />
-              </button>
-            </div>
-          </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>
-                  )}
-                  <button
-                    className={`${styles.smallBtn} ${(activeSet?.familyFailover !== false) ? styles.probeBtnActive : ''}`}
-                    onClick={handleToggleFamilyFailover}
-                    disabled={saveStatus.kind === 'saving'}
-                    title="When a model fails, first retry the same family on another provider (e.g. DeepSeek on NIM -> DeepSeek on Together) before falling back to set order"
-                  >
-                    <IconRoute size={11} />
-                    Family failover: {activeSet?.familyFailover !== false ? 'on' : 'off'}
-                  </button>
-                </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>
-                  {favorites && (
-                    <button
-                      className={styles.smallBtn}
-                      onClick={handleUseFavorites}
-                      disabled={saveStatus.kind === 'saving'}
-                      title="Replace current router models with your favorite models"
-                    >
-                      <IconList size={11} />
-                      Use favorites
-                    </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)}
-                    disabled={saveStatus.kind === 'saving'}
-                  >
-                    {pickerOpen ? <IconX size={11} /> : <IconPlus size={11} />}
-                    {pickerOpen ? 'Close' : 'Add model'}
-                  </button>
-                </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>
-                  <div className={styles.setEmptyHint}>
-                    Add models from the picker below, or click <strong>Sync best</strong> above to auto-pick working models.
-                  </div>
-                </div>
-              ) : (
-                <>
-                  {/* 📖 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 : ''} ${isNext ? styles.setRowNext : ''} ${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} ${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}
-                            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}>
-              <h3 className={styles.sectionTitle}>
-                <IconActivity size={14} />
-                Probe Mode
-              </h3>
-              <div className={styles.probeModes}>
-                {['eco', 'balanced', 'aggressive'].map((mode) => (
-                  <button
-                    key={mode}
-                    className={`${styles.probeBtn} ${status?.probeMode === mode ? styles.probeActive : ''}`}
-                    onClick={() => handleSetProbeMode(mode)}
-                  >
-                    {mode}
-                  </button>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* Active Requests */}
-          {running && (
-            <div className={styles.section}>
-              <h3 className={styles.sectionTitle}>
-                <IconBolt size={14} className={activeRequests.length > 0 ? styles.pulse : ''} />
-                Active Requests ({activeRequests.length})
-              </h3>
-              {activeRequests.length > 0 ? (
-                <div className={styles.activeList}>
-                  {activeRequests.map((req) => (
-                    <div key={req.request_id} className={styles.activeRow}>
-                      <div className={styles.activeMain}>
-                        <span className={styles.activeModel}>
-                          <span className={styles.activeId} title={`Request ID: ${req.request_id}`}>
-                            {req.request_id.slice(-4)}
-                          </span>
-                          {req.model}
-                        </span>
-                        <span className={styles.activeStatus}>
-                          {req.stalled ? (
-                            <span className={styles.stalledText}>Stalled?</span>
-                          ) : (
-                            <span className={styles.processingText}>Processing...</span>
-                          )}
-                        </span>
-                      </div>
-                      <div className={styles.activeDetails}>
-                        <span className={styles.activeCurrentModel}>{req.current_model || 'Routing...'}</span>
-                        {req.stream && <span className={styles.activeTokens}>{req.tokens} tokens</span>}
-                        <span className={styles.activeUptime}>{formatUptime(Math.floor((Date.now() - req.started_at) / 1000))}</span>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <div className={styles.logEmpty}>No active requests.</div>
-              )}
-            </div>
-          )}
-
-          {/* Request Log — always visible when running */}
-          {running && (
-            <div className={styles.section}>
-              <h3 className={styles.sectionTitle} onClick={() => setLogExpanded(!logExpanded)} style={{ cursor: 'pointer' }}>
-                <IconActivity size={14} />
-                Request Log ({requestLog.length})
-                {logExpanded ? <IconChevronUp size={12} /> : <IconChevronDown size={12} />}
-              </h3>
-              {logExpanded && (
-                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={styles.logId} title={`Request ID: ${entry.request_id || '—'}`}>
-                          {entry.request_id ? entry.request_id.slice(-4) : '—'}
-                        </span>
-                        <span className={styles.logTime}>
-                          {formatTime(entry.at)}
-                        </span>
-                        <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>
-                        <span className={styles.logDetail}>
-                          {[
-                            // 📖 t8 - a family hop stays in the same model family
-                            // (e.g. DeepSeek on another host) and is tagged as such.
-                            entry.failover ? (entry.failover_reason === 'family_failover' ? 'family' : 'failover') : '',
-                            entry.stream ? 'stream' : '',
-                            entry.error || '',
-                          ].filter(Boolean).join(', ')}
-                        </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>
-          )}
-
-          {/* Runtime telemetry (t3): per-model real-world success rate + throughput.
-              📖 Read from /stats.runtime (same poll, 5s refresh). Models with
-              📖 insufficient data (< 5 calls) are hidden — no penalty for new
-              📖 models. */}
-          {stats?.runtimeTelemetry?.stats?.modelsTracked > 0 && (
-            <div className={styles.section} style={{ marginTop: 12 }}>
-              <h3 className={styles.sectionTitle}>
-                📈 Runtime Telemetry
-                <span className={styles.miniPgHint}>{stats.runtimeTelemetry.stats.totalCalls} calls tracked · local-only</span>
-              </h3>
-              <div className={styles.quotaGrid}>
-                {Object.entries(stats.runtimeTelemetry.models)
-                  .filter(([, m]) => m.totalCalls >= 5)
-                  .sort((a, b) => (b[1]?.successRate ?? 0) - (a[1]?.successRate ?? 0))
-                  .slice(0, 6)
-                  .map(([key, m]) => {
-                    const srPct = Math.round((m.successRate ?? 0) * 100)
-                    const tps = m.avgTokensPerSecond || 0
-                    const srColor = srPct <= 50 ? '#dc2626' : srPct <= 80 ? '#f59e0b' : '#16a34a'
-                    return (
-                      <div key={key} className={styles.quotaCell} title={`${key}: ${m.totalCalls} calls, ${m.successCalls} ok, ${m.errorCalls} err, ${tps.toFixed(1)} tok/s avg`}>
-                        <span className={styles.quotaSource}>📈</span>
-                        <span className={styles.quotaName}>{key.split('/')[1] || key}</span>
-                        <div className={styles.quotaBar}>
-                          <div className={styles.quotaFill} style={{ width: `${srPct}%`, background: srColor }} />
-                        </div>
-                        <span className={styles.quotaPct} style={{ color: srColor }}>{srPct}%</span>
-                      </div>
-                    )
-                  })}
-              </div>
-            </div>
-          )}
-
-          {/* Passive quota (t2): per-provider live quota from response headers.
-              📖 Updated every /stats poll (5s). See provider-quota-fetchers.js. */}
-          {stats?.quota && Object.keys(stats.quota).length > 0 && (
-            <div className={styles.section} style={{ marginTop: 12 }}>
-              <h3 className={styles.sectionTitle}>
-                📊 Provider Quota
-                <span className={styles.miniPgHint}>live from response headers (no extra requests)</span>
-              </h3>
-              <div className={styles.quotaGrid}>
-                {Object.entries(stats.quota)
-                  .sort((a, b) => (a[1]?.percent ?? 100) - (b[1]?.percent ?? 100))
-                  .map(([providerKey, snap]) => {
-                    const pct = snap?.percent ?? 0
-                    const color = pct <= 10 ? '#dc2626' : pct <= 25 ? '#f59e0b' : '#16a34a'
-                    const window = snap?.windowType && snap.windowType !== 'unknown' ? snap.windowType : ''
-                    const source = snap?.source === 'header' ? '🛰️' : '🔌'
-                    return (
-                      <div key={providerKey} className={styles.quotaCell} title={`${providerKey}: ${snap?.remaining ?? '?'}/${snap?.limit ?? '?'} (${pct}%) ${window ? `[${window}]` : ''}`}>
-                        <span className={styles.quotaSource}>{source}</span>
-                        <span className={styles.quotaName}>{providerKey}</span>
-                        <div className={styles.quotaBar}>
-                          <div
-                            className={styles.quotaFill}
-                            style={{ width: `${pct}%`, background: color }}
-                          />
-                        </div>
-                        <span className={styles.quotaPct} style={{ color }}>{pct}%</span>
-                      </div>
-                    )
-                  })}
-              </div>
-            </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
-}