free-coding-models 0.5.5 → 0.5.8

package/web/src/components/recommend/RecommendView.jsx

@@ -0,0 +1,121 @@
+/**
+ * @file web/src/components/recommend/RecommendView.jsx
+ * @description Smart Recommend modal for Web M3 parity: 3-question wizard,
+ * 10-second analysis phase, then Top 3 results from the shared scoring engine.
+ *
+ * @functions RecommendView → full-screen recommendation wizard
+ * @exports RecommendView
+ */
+import { useMemo, useState } from 'react'
+import { IconArrowLeft, IconSparkles, IconX } from '@tabler/icons-react'
+import { TASK_TYPES, PRIORITY_TYPES, CONTEXT_BUDGETS } from '../../../../src/core/utils.js'
+import LaunchButton from '../launch/LaunchButton.jsx'
+import { useRecommend } from '../../hooks/useRecommend.js'
+import styles from './RecommendView.module.css'
+
+const QUESTIONS = [
+  { key: 'taskType', title: 'What are you working on?', options: TASK_TYPES },
+  { key: 'priority', title: 'What matters most?', options: PRIORITY_TYPES },
+  { key: 'contextBudget', title: 'How big is your context?', options: CONTEXT_BUDGETS },
+]
+
+export default function RecommendView({ onClose, onLaunch, onPinAndLaunch, toolMode, onToast }) {
+  const [step, setStep] = useState(0)
+  const [answers, setAnswers] = useState({ taskType: null, priority: null, contextBudget: null })
+  const { recommend, loading, progress, results, error, reset } = useRecommend({ onToast })
+  const question = QUESTIONS[step]
+  const complete = results.length > 0
+
+  const summary = useMemo(() => QUESTIONS
+    .map((q) => q.options[answers[q.key]]?.label)
+    .filter(Boolean)
+    .join(' · '), [answers])
+
+  async function choose(value) {
+    const nextAnswers = { ...answers, [question.key]: value }
+    setAnswers(nextAnswers)
+    if (step < QUESTIONS.length - 1) {
+      setStep(step + 1)
+      return
+    }
+    await recommend(nextAnswers)
+  }
+
+  function back() {
+    if (complete || loading) {
+      reset()
+      setStep(0)
+      setAnswers({ taskType: null, priority: null, contextBudget: null })
+      return
+    }
+    setStep((value) => Math.max(0, value - 1))
+  }
+
+  return (
+    <div className={styles.backdrop} onClick={onClose}>
+      <div className={styles.modal} onClick={(event) => event.stopPropagation()}>
+        <header className={styles.header}>
+          <div>
+            <p className={styles.eyebrow}>Smart Recommend</p>
+            <h2><IconSparkles size={20} /> Find the best model for this task</h2>
+            {summary && <p className={styles.summary}>{summary}</p>}
+          </div>
+          <button className={styles.close} onClick={onClose} aria-label="Close"><IconX size={18} /></button>
+        </header>
+
+        {!loading && !complete && (
+          <main className={styles.body}>
+            <div className={styles.steps}>Question {step + 1} / {QUESTIONS.length}</div>
+            <h3>{question.title}</h3>
+            <div className={styles.options}>
+              {Object.entries(question.options).map(([key, option]) => (
+                <button key={key} className={styles.option} onClick={() => choose(key)}>
+                  <strong>{option.label}</strong>
+                  <span>{key}</span>
+                </button>
+              ))}
+            </div>
+          </main>
+        )}
+
+        {loading && (
+          <main className={styles.body}>
+            <h3>Analyzing live catalog…</h3>
+            <p className={styles.muted}>10 seconds · roughly 2 checks/sec · same scoring as the TUI.</p>
+            <div className={styles.progress}><span style={{ width: `${progress}%` }} /></div>
+            <p className={styles.percent}>{progress}%</p>
+          </main>
+        )}
+
+        {complete && (
+          <main className={styles.body}>
+            <h3>Top 3 recommendations</h3>
+            <div className={styles.results}>
+              {results.map((item, index) => (
+                <article key={`${item.result.providerKey}/${item.result.modelId}`} className={styles.resultCard}>
+                  <div className={styles.medal}>{['🥇', '🥈', '🥉'][index]}</div>
+                  <div className={styles.resultMain}>
+                    <strong>{item.result.label}</strong>
+                    <span>{item.result.origin} · {item.result.tier} · {item.result.ctx}</span>
+                    <p>{item.reason}</p>
+                  </div>
+                  <div className={styles.score}>{item.score}</div>
+                  <LaunchButton model={item.result} toolMode={toolMode} onLaunch={() => onPinAndLaunch?.(item.result)} />
+                </article>
+              ))}
+            </div>
+          </main>
+        )}
+
+        {error && <p className={styles.error}>{error}</p>}
+
+        <footer className={styles.footer}>
+          <button className={styles.secondary} onClick={back} disabled={step === 0 && !loading && !complete}>
+            <IconArrowLeft size={14} /> {complete || loading ? 'Restart' : 'Back'}
+          </button>
+          <button className={styles.secondary} onClick={onClose}>Close</button>
+        </footer>
+      </div>
+    </div>
+  )
+}

package/web/src/components/recommend/RecommendView.module.css

@@ -0,0 +1,55 @@
+/** @file web/src/components/recommend/RecommendView.module.css */
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 480;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: rgba(0, 0, 0, .64);
+  backdrop-filter: blur(4px);
+}
+.modal {
+  width: min(980px, 96vw);
+  max-height: min(820px, 94vh);
+  overflow: auto;
+  border: 1px solid var(--color-border);
+  border-radius: 16px;
+  background: var(--color-bg-elevated);
+  color: var(--color-text);
+  box-shadow: 0 20px 60px rgba(0,0,0,.48);
+}
+.header,
+.footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--color-border); }
+.footer { border-top: 1px solid var(--color-border); border-bottom: 0; justify-content: flex-end; }
+.header h2 { display: flex; align-items: center; gap: 9px; margin: 4px 0; font-size: 21px; }
+.eyebrow { margin: 0; color: var(--color-accent); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }
+.summary,
+.muted { color: var(--color-text-muted); margin: 0; }
+.close,
+.secondary { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); cursor: pointer; }
+.close { width: 32px; height: 32px; justify-content: center; }
+.secondary { padding: 8px 12px; font-weight: 800; }
+.secondary:disabled { opacity: .45; cursor: not-allowed; }
+.body { padding: 26px 28px; }
+.steps { color: var(--color-accent); font-family: var(--font-mono); font-size: 12px; font-weight: 800; margin-bottom: 10px; }
+.body h3 { margin: 0 0 18px; font-size: 20px; }
+.options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
+.option { min-height: 120px; padding: 18px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); color: var(--color-text); cursor: pointer; text-align: left; transition: transform 120ms, border-color 120ms, background 120ms; }
+.option:hover { transform: translateY(-2px); border-color: var(--color-accent); background: var(--color-bg-hover); }
+.option strong { display: block; font-size: 16px; margin-bottom: 8px; }
+.option span { color: var(--color-text-dim); font-family: var(--font-mono); font-size: 11px; }
+.progress { height: 14px; border: 1px solid var(--color-border); border-radius: 999px; overflow: hidden; background: var(--color-surface); }
+.progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--color-accent), #b400ff); transition: width 200ms; }
+.percent { font-family: var(--font-mono); color: var(--color-accent); font-weight: 900; }
+.results { display: flex; flex-direction: column; gap: 12px; }
+.resultCard { display: grid; grid-template-columns: 38px 1fr 60px auto; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); }
+.medal { font-size: 26px; }
+.resultMain { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+.resultMain strong { font-size: 15px; }
+.resultMain span { color: var(--color-text-muted); font-size: 12px; }
+.resultMain p { margin: 5px 0 0; color: var(--color-text-dim); font-size: 12px; }
+.score { font-family: var(--font-mono); color: var(--color-accent); font-size: 24px; font-weight: 900; text-align: center; }
+.error { margin: 0 24px 16px; color: #ff5a7a; font-weight: 800; }
+@media (max-width: 760px) { .options { grid-template-columns: 1fr; } .resultCard { grid-template-columns: 32px 1fr; } .score { text-align: left; } }

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>
+  )
+}