free-coding-models 0.5.6 → 0.5.8

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

@@ -0,0 +1,286 @@
+/**
+ * @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.
+ */
+import { useEffect, useState, useCallback } from 'react'
+import {
+  IconRoute, IconPlayerPlay, IconPlayerStop, IconRefresh,
+  IconCopy, IconCheck, IconChevronDown, IconChevronUp,
+  IconActivity, IconServer,
+} from '@tabler/icons-react'
+import styles from './RouterView.module.css'
+
+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 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)
+}
+
+function CircuitBadge({ state }) {
+  const cls = state === 'CLOSED' ? styles.circuitClosed
+    : state === 'OPEN' ? styles.circuitOpen
+    : state === 'HALF_OPEN' ? styles.circuitHalfOpen
+    : state === 'AUTH_ERROR' ? styles.circuitAuth
+    : styles.circuitUnknown
+  return <span className={`${styles.circuitBadge} ${cls}`}>{state?.replace('_', ' ') || '?'}</span>
+}
+
+export default function RouterView({ onClose, onToast }) {
+  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 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 {}
+  }, [])
+
+  useEffect(() => {
+    void fetchStatus()
+    void fetch('/api/router/quick-setup').then(r => r.json()).then(setQuickSetup).catch(() => {})
+    const interval = setInterval(fetchStatus, 5000)
+    return () => clearInterval(interval)
+  }, [fetchStatus])
+
+  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()
+      } else {
+        onToast?.(`Failed to start: ${data.error || 'unknown'}`, 'error')
+      }
+    } catch (err) {
+      onToast?.(`Start failed: ${err.message}`, '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 {}
+  }
+
+  const running = status?.ok
+  const models = stats?.models || []
+  const requestLog = stats?.requestLog || []
+  const circuitBreakers = stats?.circuitBreakers || {}
+
+  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}>
+          {/* 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} onClick={handleStart} disabled={actionLoading}>
+                  <IconPlayerPlay size={14} />
+                  {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>
+
+          {/* Quick Setup */}
+          {running && quickSetup && (
+            <div className={styles.quickSetup}>
+              <h3 className={styles.sectionTitle}>
+                <IconCopy size={14} />
+                Quick Setup
+              </h3>
+              <div className={styles.quickRows}>
+                {quickSetup.baseUrl && (
+                  <div className={styles.quickRow}>
+                    <span className={styles.quickLabel}>Base URL</span>
+                    <code className={styles.quickValue}>{quickSetup.baseUrl}</code>
+                    <button className={styles.copyBtn} onClick={() => handleCopy(quickSetup.baseUrl, 'url')}>
+                      {copied === 'url' ? <IconCheck size={12} /> : <IconCopy size={12} />}
+                    </button>
+                  </div>
+                )}
+                <div className={styles.quickRow}>
+                  <span className={styles.quickLabel}>Model</span>
+                  <code className={styles.quickValue}>{quickSetup.model}</code>
+                  <button className={styles.copyBtn} onClick={() => handleCopy(quickSetup.model, 'model')}>
+                    {copied === 'model' ? <IconCheck size={12} /> : <IconCopy size={12} />}
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* 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>
+          )}
+
+          {/* 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}>
+              <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 && (
+                <div className={styles.logList}>
+                  {requestLog.map((entry, i) => (
+                    <div key={i} className={styles.logRow}>
+                      <span className={entry.error ? styles.logErr : styles.logOk}>
+                        {entry.status || '—'}
+                      </span>
+                      <span className={styles.logModel}>{entry.model}</span>
+                      <span className={styles.logLatency}>
+                        {entry.latency_ms != null ? `${entry.latency_ms}ms` : '—'}
+                      </span>
+                      <span className={styles.logTokens}>
+                        {entry.tokens > 0 ? formatNumber(entry.tokens) + ' tok' : ''}
+                      </span>
+                      {entry.failover && <span className={styles.logFailover}>failover</span>}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,357 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: fadeIn 0.15s ease;
+}
+
+.modal {
+  background: var(--bg-primary, #0f0f17);
+  border: 1px solid var(--border, #1e1e2e);
+  border-radius: 12px;
+  width: 720px;
+  max-width: 95vw;
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border, #1e1e2e);
+}
+
+.title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-primary, #e0e0e0);
+}
+
+.closeBtn {
+  background: none;
+  border: none;
+  color: var(--text-muted, #888);
+  font-size: 18px;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 6px;
+  &:hover { background: var(--bg-hover, #1a1a2e); color: var(--text-primary, #e0e0e0); }
+}
+
+.body {
+  padding: 20px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+/* Hero Card */
+.heroCard {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-radius: 10px;
+  margin-bottom: 16px;
+}
+
+.heroRunning {
+  background: linear-gradient(135deg, rgba(0, 200, 100, 0.08), rgba(0, 200, 100, 0.02));
+  border: 1px solid rgba(0, 200, 100, 0.2);
+}
+
+.heroStopped {
+  background: var(--bg-secondary, #14141f);
+  border: 1px solid var(--border, #1e1e2e);
+}
+
+.heroLeft {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.heroStatus {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.statusDot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.dotGreen {
+  background: #00c864;
+  box-shadow: 0 0 6px rgba(0, 200, 100, 0.4);
+}
+
+.dotGray {
+  background: #555;
+}
+
+.heroLabel {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary, #e0e0e0);
+}
+
+.heroMeta {
+  font-size: 12px;
+  color: var(--text-muted, #888);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.heroActions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.startBtn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  background: #00c864;
+  color: #000;
+  border: none;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  &:hover { background: #00d874; }
+  &:disabled { opacity: 0.5; cursor: not-allowed; }
+}
+
+.stopBtn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  background: #dc3545;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  &:hover { background: #e04555; }
+  &:disabled { opacity: 0.5; cursor: not-allowed; }
+}
+
+.refreshBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: var(--bg-secondary, #14141f);
+  border: 1px solid var(--border, #1e1e2e);
+  border-radius: 8px;
+  color: var(--text-muted, #888);
+  cursor: pointer;
+  &:hover { color: var(--text-primary, #e0e0e0); background: var(--bg-hover, #1a1a2e); }
+}
+
+/* Quick Setup */
+.quickSetup {
+  margin-bottom: 16px;
+}
+
+.sectionTitle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary, #aaa);
+  margin: 0 0 8px 0;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.quickRows {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  background: var(--bg-secondary, #14141f);
+  border: 1px solid var(--border, #1e1e2e);
+  border-radius: 8px;
+  padding: 10px 12px;
+}
+
+.quickRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.quickLabel {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted, #888);
+  min-width: 60px;
+  text-transform: uppercase;
+}
+
+.quickValue {
+  flex: 1;
+  font-size: 13px;
+  color: var(--text-primary, #e0e0e0);
+  background: var(--bg-primary, #0f0f17);
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-family: 'SF Mono', monospace;
+}
+
+.copyBtn {
+  background: none;
+  border: none;
+  color: var(--text-muted, #888);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  &:hover { color: var(--text-primary, #e0e0e0); background: var(--bg-hover, #1a1a2e); }
+}
+
+/* Probe Mode */
+.section {
+  margin-bottom: 16px;
+}
+
+.probeModes {
+  display: flex;
+  gap: 8px;
+}
+
+.probeBtn {
+  padding: 6px 14px;
+  border: 1px solid var(--border, #1e1e2e);
+  border-radius: 6px;
+  background: var(--bg-secondary, #14141f);
+  color: var(--text-secondary, #aaa);
+  font-size: 12px;
+  cursor: pointer;
+  text-transform: capitalize;
+  &:hover { border-color: var(--text-muted, #888); }
+}
+
+.probeActive {
+  background: rgba(0, 200, 100, 0.1);
+  border-color: rgba(0, 200, 100, 0.3);
+  color: #00c864;
+  font-weight: 600;
+}
+
+/* Model Health */
+.modelList {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.modelRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  background: var(--bg-secondary, #14141f);
+  border-radius: 6px;
+  font-size: 12px;
+}
+
+.modelPriority {
+  color: var(--text-muted, #888);
+  min-width: 22px;
+  font-weight: 600;
+}
+
+.modelName {
+  flex: 1;
+  color: var(--text-primary, #e0e0e0);
+  font-family: 'SF Mono', monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.modelScore {
+  color: var(--text-muted, #888);
+  min-width: 40px;
+  text-align: right;
+}
+
+.modelLatency {
+  color: var(--text-muted, #888);
+  min-width: 50px;
+  text-align: right;
+}
+
+.circuitBadge {
+  font-size: 10px;
+  font-weight: 700;
+  padding: 2px 6px;
+  border-radius: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  min-width: 70px;
+  text-align: center;
+}
+
+.circuitClosed { background: rgba(0, 200, 100, 0.15); color: #00c864; }
+.circuitOpen { background: rgba(220, 53, 69, 0.15); color: #dc3545; }
+.circuitHalfOpen { background: rgba(255, 193, 7, 0.15); color: #ffc107; }
+.circuitAuth { background: rgba(255, 140, 0, 0.15); color: #ff8c00; }
+.circuitUnknown { background: rgba(128, 128, 128, 0.15); color: #888; }
+
+/* Request Log */
+.logList {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.logRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  font-size: 11px;
+  font-family: 'SF Mono', monospace;
+}
+
+.logOk { color: #00c864; min-width: 28px; }
+.logErr { color: #dc3545; min-width: 28px; }
+.logModel { color: var(--text-secondary, #aaa); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.logLatency { color: var(--text-muted, #888); min-width: 50px; text-align: right; }
+.logTokens { color: var(--text-muted, #888); min-width: 60px; text-align: right; }
+.logFailover {
+  font-size: 9px;
+  padding: 1px 4px;
+  background: rgba(255, 193, 7, 0.15);
+  color: #ffc107;
+  border-radius: 3px;
+  text-transform: uppercase;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}