free-coding-models 0.5.6 → 0.5.8

package/web/src/components/tools/ToolPicker.jsx

@@ -0,0 +1,86 @@
+/**
+ * @file web/src/components/tools/ToolPicker.jsx
+ * @description Header/dropdown control for the active Web endpoint-install target.
+ * Mirrors the TUI install target flow with a mouse-first dropdown and cycle button.
+ *
+ * @functions
+ *   → ToolPicker — renders active tool, cycle control, and selectable tool list
+ * @exports ToolPicker
+ */
+import { useEffect, useRef, useState } from 'react'
+import { IconChevronDown, IconRefresh } from '@tabler/icons-react'
+import { TOOL_METADATA, getToolMeta } from '../../../../src/core/tool-metadata.js'
+import { INSTALL_ENDPOINT_TOOL_MODES } from '../../utils/m3.js'
+import styles from './ToolPicker.module.css'
+
+export default function ToolPicker({ toolMode = 'opencode', onSetToolMode, onCycleToolMode, compact = false, tools = INSTALL_ENDPOINT_TOOL_MODES }) {
+  const [open, setOpen] = useState(false)
+  const wrapRef = useRef(null)
+  const active = getToolMeta(toolMode)
+
+  useEffect(() => {
+    if (!open) return
+    const onPointer = (event) => {
+      if (wrapRef.current && !wrapRef.current.contains(event.target)) setOpen(false)
+    }
+    const onKey = (event) => { if (event.key === 'Escape') setOpen(false) }
+    document.addEventListener('mousedown', onPointer)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('mousedown', onPointer)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [open])
+
+  return (
+    <div className={`${styles.wrap} ${compact ? styles.compact : ''}`} ref={wrapRef}>
+      <button
+        type="button"
+        className={styles.trigger}
+        onClick={() => setOpen((value) => !value)}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        title={`Install endpoint into: ${active.label}`}
+      >
+        <span className={styles.emoji}>{active.emoji}</span>
+        <span className={styles.label}>{compact ? active.label.replace(/ CLI$/, '') : active.label}</span>
+        <IconChevronDown size={13} stroke={1.7} />
+      </button>
+      <button
+        type="button"
+        className={styles.cycle}
+        onClick={onCycleToolMode}
+        title="Cycle endpoint target"
+        aria-label="Cycle endpoint target"
+      >
+        <IconRefresh size={13} stroke={1.7} />
+      </button>
+
+      {open && (
+        <div className={styles.menu} role="listbox" aria-label="Endpoint install target">
+          {tools.map((mode) => {
+            const meta = TOOL_METADATA[mode]
+            const activeMode = mode === toolMode
+            return (
+              <button
+                type="button"
+                key={mode}
+                className={`${styles.item} ${activeMode ? styles.itemActive : ''}`}
+                onClick={() => { onSetToolMode?.(mode); setOpen(false) }}
+                role="option"
+                aria-selected={activeMode}
+              >
+                <span className={styles.itemEmoji}>{meta.emoji}</span>
+                <span className={styles.itemText}>
+                  <strong>{meta.label}</strong>
+                  <small>{meta.flag}</small>
+                </span>
+                {activeMode && <span className={styles.activeDot}>●</span>}
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}

package/web/src/components/tools/ToolPicker.module.css

@@ -0,0 +1,84 @@
+/**
+ * @file web/src/components/tools/ToolPicker.module.css
+ * @description Compact header dropdown styles for the M3 tool-mode picker.
+ */
+.wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.trigger,
+.cycle {
+  height: 30px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  color: var(--color-text);
+  cursor: pointer;
+  transition: background 150ms, border-color 150ms, color 150ms;
+}
+.trigger {
+  gap: 6px;
+  padding: 0 9px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 700;
+}
+.cycle {
+  width: 30px;
+  border-radius: 6px;
+}
+.trigger:hover,
+.cycle:hover {
+  background: var(--color-bg-hover);
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+.emoji { font-size: 14px; line-height: 1; }
+.label { white-space: nowrap; }
+.menu {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 7px);
+  width: 280px;
+  max-height: min(520px, calc(100vh - 90px));
+  overflow: auto;
+  padding: 5px;
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+  background: var(--color-bg-elevated);
+  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38);
+  z-index: 250;
+}
+.item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 8px 9px;
+  border: 0;
+  border-radius: 7px;
+  color: var(--color-text);
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+}
+.item:hover { background: var(--color-bg-hover); }
+.itemActive {
+  background: var(--color-accent-dim);
+  color: var(--color-accent);
+}
+.itemEmoji { width: 22px; text-align: center; font-size: 16px; }
+.itemText { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
+.itemText strong { font-size: 12px; font-weight: 800; }
+.itemText small { color: var(--color-text-dim); font-family: var(--font-mono); font-size: 10px; }
+.activeDot { color: var(--color-accent); font-size: 10px; }
+.compact .trigger { width: 100%; justify-content: flex-start; }
+.compact .menu { left: 0; right: auto; }
+@media (max-width: 1024px) {
+  .label { display: none; }
+  .trigger { padding: 0 8px; }
+}

package/web/src/global.css

@@ -136,6 +136,29 @@
 /* ─── Reset & Base ─── */
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
+/* 📖 M5: Global :focus-visible outline for keyboard navigation (a11y).
+   📖 Only shows for keyboard users, not mouse clicks. Uses the accent color
+   📖 with a subtle glow ring so focus is always visible but not jarring. */
+:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+/* 📖 Remove default browser :focus ring — we only want :focus-visible */
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* 📖 Inputs keep their own focus styling via component CSS, but keyboard
+   📖 users still see the global ring as a fallback safety net. */
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 1px;
+}
+
 html {
   font-size: 14px;
   scroll-behavior: smooth;

package/web/src/hooks/urlState.constants.js

@@ -5,6 +5,7 @@
  * 📖 HEALTH_CYCLE constants so the URL reflects the same filter universe
  * 📖 the TUI uses.
  */
+import { TOOL_MODE_ORDER } from '../../../src/core/tool-metadata.js'
 
 const TIER_VALUES = new Set(['S+', 'S', 'A+', 'A', 'A-', 'B+', 'B', 'C', 'all'])
 const STATUS_VALUES = new Set(['up', 'down', 'pending', 'all'])
@@ -15,6 +16,7 @@ const SORT_VALUES = new Set([
 ])
 const VIEW_VALUES = new Set(['dashboard', 'settings', 'analytics', 'recommend', 'router', 'help', 'changelog'])
 const DIR_VALUES = new Set(['asc', 'desc'])
+const TOOL_MODE_VALUES = new Set(TOOL_MODE_ORDER)
 
 export {
   TIER_VALUES as VALID_TIERS,
@@ -22,4 +24,5 @@ export {
   SORT_VALUES as VALID_SORTS,
   VIEW_VALUES as VALID_VIEWS,
   DIR_VALUES as VALID_DIRS,
+  TOOL_MODE_VALUES as VALID_TOOL_MODES,
 }

package/web/src/hooks/useInstalledModels.js

@@ -0,0 +1,42 @@
+/**
+ * @file web/src/hooks/useInstalledModels.js
+ * @description Hook for Installed Models — scans tool configs and soft-deletes models.
+ * 📖 M4: Fetches /api/installed-models, provides disable(action) for soft-delete.
+ *
+ * @functions useInstalledModels → { results, loading, refresh, disableModel }
+ */
+import { useState, useEffect, useCallback } from 'react'
+
+export function useInstalledModels() {
+  const [results, setResults] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  const refresh = useCallback(async () => {
+    setLoading(true)
+    try {
+      const resp = await fetch('/api/installed-models')
+      const data = await resp.json()
+      setResults(data.results || [])
+    } catch {
+      setResults([])
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { void refresh() }, [refresh])
+
+  const disableModel = useCallback(async (toolMode, modelId) => {
+    const resp = await fetch(`/api/installed-models/${encodeURIComponent(toolMode)}/${encodeURIComponent(modelId)}/disable`, {
+      method: 'POST',
+    })
+    const result = await resp.json()
+    if (result.success) {
+      // 📖 Refresh after successful delete
+      await refresh()
+    }
+    return result
+  }, [refresh])
+
+  return { results, loading, refresh, disableModel }
+}

package/web/src/hooks/useRecommend.js

@@ -0,0 +1,67 @@
+/**
+ * @file web/src/hooks/useRecommend.js
+ * @description Smart Recommend hook for M3 Web parity. Owns the 10 second
+ * analysis phase and calls `/api/recommend`, which uses the shared TUI scoring
+ * engine in `src/core/utils.js`.
+ *
+ * @functions useRecommend → run/cancel recommendation analysis
+ * @exports useRecommend
+ */
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+export function useRecommend({ onToast } = {}) {
+  const [loading, setLoading] = useState(false)
+  const [progress, setProgress] = useState(0)
+  const [results, setResults] = useState([])
+  const [error, setError] = useState(null)
+  const timerRef = useRef(null)
+
+  useEffect(() => () => { if (timerRef.current) clearInterval(timerRef.current) }, [])
+
+  const recommend = useCallback(async (answers) => {
+    if (timerRef.current) clearInterval(timerRef.current)
+    setLoading(true)
+    setProgress(0)
+    setResults([])
+    setError(null)
+
+    const started = Date.now()
+    timerRef.current = setInterval(() => {
+      const pct = Math.min(98, Math.round(((Date.now() - started) / 10_000) * 100))
+      setProgress(pct)
+    }, 250)
+
+    try {
+      await new Promise((resolve) => setTimeout(resolve, 10_000))
+      const resp = await fetch('/api/recommend', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ answers }),
+      })
+      const payload = await resp.json().catch(() => ({}))
+      if (!resp.ok) throw new Error(payload.error || `HTTP ${resp.status}`)
+      setResults(Array.isArray(payload.top3) ? payload.top3 : [])
+      setProgress(100)
+      return { ok: true, top3: payload.top3 || [] }
+    } catch (err) {
+      setError(err.message)
+      onToast?.(`Recommend failed: ${err.message}`, 'error')
+      return { ok: false, error: err.message }
+    } finally {
+      if (timerRef.current) clearInterval(timerRef.current)
+      timerRef.current = null
+      setLoading(false)
+    }
+  }, [onToast])
+
+  const reset = useCallback(() => {
+    if (timerRef.current) clearInterval(timerRef.current)
+    timerRef.current = null
+    setLoading(false)
+    setProgress(0)
+    setResults([])
+    setError(null)
+  }, [])
+
+  return { recommend, loading, progress, results, error, reset }
+}

package/web/src/hooks/useRouterDashboard.js

@@ -0,0 +1,133 @@
+/**
+ * @file web/src/hooks/useRouterDashboard.js
+ * @description Hook for Router Dashboard — polls daemon status, proxies actions.
+ * 📖 M4: Provides status, stats, tokens, sets, start/stop, probe-mode control.
+ * 📖 Polls /api/router/status every 5s; fetches full stats on demand.
+ *
+ * @functions useRouterDashboard → { status, stats, tokens, start, stop, setProbeMode, refresh }
+ */
+import { useState, useEffect, useCallback, useRef } from 'react'
+
+const POLL_INTERVAL_MS = 5000
+
+export function useRouterDashboard() {
+  const [status, setStatus] = useState(null)
+  const [stats, setStats] = useState(null)
+  const [tokens, setTokens] = useState(null)
+  const [sets, setSets] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [actionLoading, setActionLoading] = useState(false)
+  const pollRef = useRef(null)
+
+  const fetchStatus = useCallback(async () => {
+    try {
+      const resp = await fetch('/api/router/status')
+      const data = await resp.json()
+      setStatus(data)
+      return data
+    } catch {
+      setStatus({ ok: false, running: false })
+      return null
+    }
+  }, [])
+
+  const fetchStats = useCallback(async () => {
+    try {
+      const resp = await fetch('/api/router/stats')
+      const data = await resp.json()
+      if (data.ok) setStats(data)
+      return data
+    } catch { return null }
+  }, [])
+
+  const fetchTokens = useCallback(async () => {
+    try {
+      const resp = await fetch('/api/router/tokens')
+      const data = await resp.json()
+      setTokens(data)
+      return data
+    } catch { return null }
+  }, [])
+
+  const fetchSets = useCallback(async () => {
+    try {
+      const resp = await fetch('/api/router/sets')
+      const data = await resp.json()
+      setSets(data)
+      return data
+    } catch { return null }
+  }, [])
+
+  // 📖 Poll daemon status + refresh stats when running
+  useEffect(() => {
+    let mounted = true
+
+    const poll = async () => {
+      const s = await fetchStatus()
+      if (s?.ok && mounted) {
+        await fetchStats()
+      }
+    }
+
+    poll().then(() => { if (mounted) setLoading(false) })
+    pollRef.current = setInterval(poll, POLL_INTERVAL_MS)
+
+    return () => {
+      mounted = false
+      clearInterval(pollRef.current)
+    }
+  }, [fetchStatus, fetchStats])
+
+  const start = useCallback(async () => {
+    setActionLoading(true)
+    try {
+      const resp = await fetch('/api/router/start', { method: 'POST' })
+      const data = await resp.json()
+      await fetchStatus()
+      if (data.ok) await fetchStats()
+      return data
+    } finally { setActionLoading(false) }
+  }, [fetchStatus, fetchStats])
+
+  const stop = useCallback(async () => {
+    setActionLoading(true)
+    try {
+      const resp = await fetch('/api/router/stop', { method: 'POST' })
+      const data = await resp.json()
+      setStatus({ ok: false, running: false })
+      setStats(null)
+      return data
+    } finally { setActionLoading(false) }
+  }, [])
+
+  const setProbeMode = useCallback(async (mode) => {
+    try {
+      await fetch('/api/router/probe-mode', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ probeMode: mode }),
+      })
+      await fetchStats()
+    } catch {}
+  }, [fetchStats])
+
+  const refresh = useCallback(async () => {
+    setLoading(true)
+    await Promise.all([fetchStatus(), fetchTokens(), fetchSets()])
+    setLoading(false)
+  }, [fetchStatus, fetchTokens, fetchSets])
+
+  const getQuickSetup = useCallback(async () => {
+    try {
+      const resp = await fetch('/api/router/quick-setup')
+      return await resp.json()
+    } catch { return null }
+  }, [])
+
+  return {
+    status, stats, tokens, sets,
+    loading, actionLoading,
+    start, stop, setProbeMode, refresh,
+    fetchTokens, fetchSets, getQuickSetup,
+  }
+}

package/web/src/hooks/useTokenUsage.js

@@ -0,0 +1,103 @@
+/**
+ * @file web/src/hooks/useTokenUsage.js
+ * @description Hook for Token Usage panel — fetches token data from daemon or file.
+ * 📖 M4: Returns today's usage, 7-day breakdown, top models, top providers.
+ *
+ * @functions useTokenUsage → { data, loading, refresh }
+ */
+import { useState, useEffect, useCallback } from 'react'
+
+export function useTokenUsage() {
+  const [data, setData] = useState(null)
+  const [loading, setLoading] = useState(true)
+
+  const refresh = useCallback(async () => {
+    setLoading(true)
+    try {
+      const resp = await fetch('/api/router/tokens')
+      const raw = await resp.json()
+      setData(processTokenData(raw))
+    } catch {
+      setData(null)
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { void refresh() }, [refresh])
+
+  return { data, loading, refresh }
+}
+
+function processTokenData(raw) {
+  if (!raw) return null
+
+  const daily = raw.daily || {}
+  const allTime = raw.all_time || {}
+
+  // 📖 Build 7-day chart data
+  const days = []
+  const today = new Date()
+  for (let i = 6; i >= 0; i--) {
+    const d = new Date(today)
+    d.setDate(d.getDate() - i)
+    const key = d.toISOString().slice(0, 10)
+    const entry = daily[key] || { total_tokens: 0, requests: 0 }
+    days.push({
+      date: key,
+      label: d.toLocaleDateString('en', { weekday: 'short' }),
+      totalTokens: entry.total_tokens || 0,
+      requests: entry.requests || 0,
+    })
+  }
+
+  // 📖 Top models across all tracked days
+  const modelTotals = {}
+  for (const entry of Object.values(daily)) {
+    const byModel = entry.by_model || {}
+    for (const [key, val] of Object.entries(byModel)) {
+      if (!modelTotals[key]) modelTotals[key] = { total: 0, requests: 0 }
+      modelTotals[key].total += val.total || 0
+      modelTotals[key].requests += val.requests || 0
+    }
+  }
+  const topModels = Object.entries(modelTotals)
+    .sort((a, b) => b[1].total - a[1].total)
+    .slice(0, 10)
+    .map(([key, val]) => ({ key, ...val }))
+
+  // 📖 Top providers (aggregated from model keys)
+  const providerTotals = {}
+  for (const [key, val] of Object.entries(modelTotals)) {
+    const provider = key.split('/')[0]
+    if (!providerTotals[provider]) providerTotals[provider] = { total: 0, requests: 0 }
+    providerTotals[provider].total += val.total
+    providerTotals[provider].requests += val.requests
+  }
+  const topProviders = Object.entries(providerTotals)
+    .sort((a, b) => b[1].total - a[1].total)
+    .slice(0, 10)
+    .map(([key, val]) => ({ key, ...val }))
+
+  const todayKey = today.toISOString().slice(0, 10)
+  const todayData = daily[todayKey] || {}
+
+  return {
+    today: {
+      totalTokens: todayData.total_tokens || 0,
+      promptTokens: todayData.prompt_tokens || 0,
+      completionTokens: todayData.completion_tokens || 0,
+      requests: todayData.requests || 0,
+    },
+    allTime: {
+      totalTokens: allTime.total_tokens || 0,
+      promptTokens: allTime.prompt_tokens || 0,
+      completionTokens: allTime.completion_tokens || 0,
+      requests: allTime.requests || 0,
+    },
+    sevenDays: days,
+    topModels,
+    topProviders,
+    hasData: allTime.total_tokens > 0 || Object.keys(daily).length > 0,
+  }
+}

package/web/src/hooks/useToolMode.js

@@ -0,0 +1,77 @@
+/**
+ * @file web/src/hooks/useToolMode.js
+ * @description M3 tool-mode hook for the Web Dashboard. It cycles endpoint install
+ * targets by loading and persisting `settings.preferredToolMode` through
+ * `/api/tool-mode`, while keeping URL hydration safe from late API responses.
+ *
+ * @functions
+ *   → useToolMode — loads, sets, and cycles the active endpoint target
+ * @exports useToolMode
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { INSTALL_ENDPOINT_TOOL_MODES } from '../utils/m3.js'
+
+const DEFAULT_TOOL_MODE = 'opencode'
+
+function normalizeToolMode(mode) {
+  return INSTALL_ENDPOINT_TOOL_MODES.includes(mode) ? mode : DEFAULT_TOOL_MODE
+}
+
+export function useToolMode({ onToast } = {}) {
+  const [toolModeState, setToolModeState] = useState(DEFAULT_TOOL_MODE)
+  const userSetRef = useRef(false)
+
+  useEffect(() => {
+    let cancelled = false
+    async function loadToolMode() {
+      try {
+        const resp = await fetch('/api/tool-mode')
+        const payload = await resp.json().catch(() => ({}))
+        if (!cancelled && !userSetRef.current && resp.ok) {
+          setToolModeState(normalizeToolMode(payload.mode))
+        }
+      } catch (err) {
+        if (!cancelled) onToast?.(`Tool mode load failed: ${err.message}`, 'error')
+      }
+    }
+    void loadToolMode()
+    return () => { cancelled = true }
+  }, [onToast])
+
+  const persistToolMode = useCallback(async (mode) => {
+    const normalized = normalizeToolMode(mode)
+    userSetRef.current = true
+    setToolModeState(normalized)
+    try {
+      const resp = await fetch('/api/tool-mode', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ mode: normalized }),
+      })
+      const payload = await resp.json().catch(() => ({}))
+      if (!resp.ok) {
+        throw new Error(payload.error || `HTTP ${resp.status}`)
+      }
+      setToolModeState(normalizeToolMode(payload.mode))
+      return { ok: true, mode: normalizeToolMode(payload.mode) }
+    } catch (err) {
+      onToast?.(`Tool mode save failed: ${err.message}`, 'error')
+      return { ok: false, error: err.message, mode: normalized }
+    }
+  }, [onToast])
+
+  const cycleToolMode = useCallback(() => {
+    const currentIndex = TOOL_MODE_ORDER.indexOf(toolModeState)
+    const next = INSTALL_ENDPOINT_TOOL_MODES[(currentIndex + 1) % INSTALL_ENDPOINT_TOOL_MODES.length] || DEFAULT_TOOL_MODE
+    return persistToolMode(next)
+  }, [persistToolMode, toolModeState])
+
+  const tools = useMemo(() => [...INSTALL_ENDPOINT_TOOL_MODES], [])
+
+  return {
+    toolMode: toolModeState,
+    tools,
+    setToolMode: persistToolMode,
+    cycleToolMode,
+  }
+}

package/web/src/hooks/useUrlState.js

@@ -22,8 +22,8 @@
  *   → useUrlState({ currentView, setCurrentView, filterState, paletteOpen, setPaletteOpen })
  *   → buildUrlParams(state) — pure helper exposed for tests
  */
-import { useEffect, useRef, useCallback } from 'react'
-import { VALID_TIERS, VALID_STATUS, VALID_SORTS, VALID_VIEWS, VALID_DIRS } from './urlState.constants.js'
+import { useEffect, useRef } from 'react'
+import { VALID_TIERS, VALID_STATUS, VALID_SORTS, VALID_VIEWS, VALID_DIRS, VALID_TOOL_MODES } from './urlState.constants.js'
 
 // 📖 Read the current URL params as a normalized object. Returns null on SSR
 // 📖 or when the URL is invalid.
@@ -40,7 +40,8 @@ function parseUrlParams() {
   if (params.has('sort') && VALID_SORTS.has(params.get('sort'))) out.sort = params.get('sort')
   if (params.has('dir') && VALID_DIRS.has(params.get('dir'))) out.dir = params.get('dir')
   if (params.has('q')) out.q = params.get('q')
-  if (params.has('toolMode')) out.toolMode = params.get('toolMode')
+  if (params.has('toolMode') && VALID_TOOL_MODES.has(params.get('toolMode'))) out.toolMode = params.get('toolMode')
+  if (params.has('recommend') && ['1', 'true', 'open'].includes(params.get('recommend'))) out.view = 'recommend'
   if (params.has('palette') && params.get('palette') === 'open') out.palette = 'open'
   return out
 }