free-coding-models 0.5.86 → 0.5.87

package/web/src/hooks/useInstalledModels.js

@@ -1,42 +0,0 @@
-/**
- * @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

@@ -1,67 +0,0 @@
-/**
- * @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

@@ -1,133 +0,0 @@
-/**
- * @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/useSSE.js

@@ -1,73 +0,0 @@
-/**
- * @file web/src/hooks/useSSE.js
- * @description React hook for SSE (Server-Sent Events) connection.
- * 📖 Connects to /api/events, auto-reconnects on failure, returns live model data.
- * → useSSE
- */
-import { useState, useEffect, useRef, useCallback } from 'react'
-
-const RECONNECT_DELAY = 2000
-
-export function useSSE(url = '/api/events') {
-  const [models, setModels] = useState([])
-  const [connected, setConnected] = useState(false)
-  const [updateCount, setUpdateCount] = useState(0)
-  const esRef = useRef(null)
-  const reconnectRef = useRef(null)
-  const mountedRef = useRef(true)
-
-  const connect = useCallback(() => {
-    if (!mountedRef.current) return
-
-    // Close existing connection
-    if (esRef.current) {
-      esRef.current.close()
-      esRef.current = null
-    }
-
-    clearTimeout(reconnectRef.current)
-
-    const es = new EventSource(url)
-    esRef.current = es
-
-    es.onopen = () => {
-      if (mountedRef.current) setConnected(true)
-    }
-
-    es.onmessage = (event) => {
-      if (!mountedRef.current) return
-      try {
-        const data = JSON.parse(event.data)
-        setModels(data)
-        setUpdateCount(c => c + 1)
-      } catch (e) {
-        console.warn('[useSSE] parse error:', e)
-      }
-    }
-
-    es.onerror = () => {
-      setConnected(false)
-      es.close()
-      esRef.current = null
-
-      if (mountedRef.current) {
-        reconnectRef.current = setTimeout(() => {
-          if (mountedRef.current) connect()
-        }, RECONNECT_DELAY)
-      }
-    }
-  }, [url])
-
-  useEffect(() => {
-    mountedRef.current = true
-    connect()
-
-    return () => {
-      mountedRef.current = false
-      clearTimeout(reconnectRef.current)
-      esRef.current?.close()
-    }
-  }, [connect])
-
-  return { models, connected, updateCount }
-}

package/web/src/hooks/useSocket.js

@@ -1,203 +0,0 @@
-/**
- * @file web/src/hooks/useSocket.js
- * @description Realtime model-data hook with Socket.IO primary, SSE fallback, and REST polling safety net.
- *
- * 📖 The dashboard runs locally, so freshness matters more than shaving every
- * byte. Socket.IO gives the snappiest path in `pnpm dev:web`; SSE keeps Docker /
- * daemon-style servers working without Socket.IO; REST polling guarantees the UI
- * eventually recovers if both streaming transports are interrupted.
- *
- * @functions
- *   → useSocket(serverUrl) — Subscribe to live dashboard state
- * @exports useSocket
- */
-import { useState, useEffect, useRef, useCallback } from 'react'
-import { io } from 'socket.io-client'
-
-const REST_FALLBACK_INTERVAL_MS = 2_000
-const STALE_UPDATE_MS = 4_000
-const ACTIVITY_THROTTLE_MS = 1_000
-
-function normalizePayload(data) {
-  if (!data) return null
-  if (Array.isArray(data)) return { models: data }
-  if (Array.isArray(data.models)) return data
-  return null
-}
-
-function sameOriginUrl(path, serverUrl) {
-  if (!serverUrl) return path
-  return `${serverUrl.replace(/\/$/, '')}${path}`
-}
-
-export function useSocket(serverUrl = '') {
-  const [models, setModels] = useState([])
-  const [connected, setConnected] = useState(false)
-  const [transport, setTransport] = useState('connecting')
-  const [updateCount, setUpdateCount] = useState(0)
-  const [nextPingAt, setNextPingAt] = useState(null)
-  const [serverIsPinging, setServerIsPinging] = useState(false)
-  const [pendingPings, setPendingPings] = useState(0)
-  const [pingMode, setPingMode] = useState('speed')
-  const [globalBenchmarkRunning, setGlobalBenchmarkRunning] = useState(false)
-  const [globalBenchmarkTotal, setGlobalBenchmarkTotal] = useState(0)
-  const [globalBenchmarkCompleted, setGlobalBenchmarkCompleted] = useState(0)
-  const [updateStatus, setUpdateStatus] = useState(null)
-
-  const socketRef = useRef(null)
-  const esRef = useRef(null)
-  const pollRef = useRef(null)
-  const lastUpdateRef = useRef(0)
-  const lastActivityRef = useRef(0)
-  const mountedRef = useRef(false)
-
-  const applyPayload = useCallback((raw, source = 'unknown') => {
-    const data = normalizePayload(raw)
-    if (!data || !mountedRef.current) return
-
-    setModels(data.models ?? [])
-    setPingMode(data.pingMode ?? 'speed')
-    setNextPingAt(data.nextPingAt ?? null)
-    setServerIsPinging(Boolean(data.isPinging))
-    setPendingPings(Number.isFinite(data.pendingPings) ? data.pendingPings : 0)
-    setGlobalBenchmarkRunning(Boolean(data.globalBenchmarkRunning))
-    setGlobalBenchmarkTotal(Number.isFinite(data.globalBenchmarkTotal) ? data.globalBenchmarkTotal : 0)
-    setGlobalBenchmarkCompleted(Number.isFinite(data.globalBenchmarkCompleted) ? data.globalBenchmarkCompleted : 0)
-    setUpdateStatus(data.updateStatus && data.updateStatus.allowedOutdated ? data.updateStatus : null)
-    setUpdateCount((count) => count + 1)
-    lastUpdateRef.current = Date.now()
-    if (source !== 'poll') {
-      setConnected(true)
-      setTransport(source)
-    }
-  }, [])
-
-  const fetchSnapshot = useCallback(async () => {
-    try {
-      const stateResponse = await fetch(sameOriginUrl('/api/state', serverUrl), { headers: { Accept: 'application/json' } })
-      if (stateResponse.ok) {
-        applyPayload(await stateResponse.json(), 'poll')
-        setConnected(true)
-        setTransport((current) => current === 'socket' || current === 'sse' ? current : 'poll')
-        return
-      }
-    } catch {}
-
-    try {
-      const response = await fetch(sameOriginUrl('/api/models', serverUrl), { headers: { Accept: 'application/json' } })
-      if (!response.ok) throw new Error(`HTTP ${response.status}`)
-      applyPayload(await response.json(), 'poll')
-      setConnected(true)
-      setTransport((current) => current === 'socket' || current === 'sse' ? current : 'poll')
-    } catch {
-      setConnected(false)
-      setTransport('offline')
-    }
-  }, [applyPayload, serverUrl])
-
-  const startSse = useCallback(() => {
-    if (esRef.current || !mountedRef.current) return
-    try {
-      const es = new EventSource(sameOriginUrl('/api/events', serverUrl))
-      esRef.current = es
-      es.onopen = () => {
-        if (!mountedRef.current) return
-        setConnected(true)
-        setTransport('sse')
-      }
-      const handleSsePayload = (event) => {
-        try { applyPayload(JSON.parse(event.data), 'sse') }
-        catch (err) { console.warn('[useSocket] SSE parse error:', err) }
-      }
-      es.onmessage = handleSsePayload
-      es.addEventListener('models', handleSsePayload)
-      es.onerror = () => {
-        es.close()
-        if (esRef.current === es) esRef.current = null
-        if (!socketRef.current?.connected) setConnected(false)
-      }
-    } catch {
-      esRef.current = null
-    }
-  }, [applyPayload, serverUrl])
-
-  const sendActivity = useCallback(() => {
-    const now = Date.now()
-    if (now - lastActivityRef.current < ACTIVITY_THROTTLE_MS) return
-    lastActivityRef.current = now
-
-    if (socketRef.current?.connected) {
-      socketRef.current.emit('client:activity')
-      return
-    }
-
-    fetch(sameOriginUrl('/api/activity', serverUrl), { method: 'POST' }).catch(() => {})
-  }, [serverUrl])
-
-  useEffect(() => {
-    mountedRef.current = true
-
-    const socket = io(serverUrl || undefined, {
-      transports: ['websocket', 'polling'],
-      reconnectionDelay: 500,
-      reconnectionDelayMax: 2500,
-      timeout: 1200,
-    })
-    socketRef.current = socket
-
-    socket.on('connect', () => {
-      setConnected(true)
-      setTransport('socket')
-      esRef.current?.close()
-      esRef.current = null
-      socket.emit('models:refresh')
-      socket.emit('client:activity')
-    })
-    socket.on('disconnect', () => {
-      if (!mountedRef.current) return
-      setConnected(false)
-      startSse()
-    })
-    socket.on('connect_error', () => {
-      if (!mountedRef.current) return
-      setConnected(false)
-      startSse()
-    })
-    socket.on('models:update', (data) => applyPayload(data, 'socket'))
-
-    pollRef.current = setInterval(() => {
-      const stale = Date.now() - lastUpdateRef.current > STALE_UPDATE_MS
-      if (!socket.connected || stale) void fetchSnapshot()
-    }, REST_FALLBACK_INTERVAL_MS)
-
-    void fetchSnapshot()
-
-    const activityEvents = ['keydown', 'pointerdown', 'mousemove', 'focus']
-    for (const eventName of activityEvents) window.addEventListener(eventName, sendActivity, { passive: true })
-
-    return () => {
-      mountedRef.current = false
-      for (const eventName of activityEvents) window.removeEventListener(eventName, sendActivity)
-      if (pollRef.current) clearInterval(pollRef.current)
-      socket.disconnect()
-      esRef.current?.close()
-      socketRef.current = null
-      esRef.current = null
-    }
-  }, [applyPayload, fetchSnapshot, sendActivity, serverUrl, startSse])
-
-  return {
-    models,
-    connected,
-    transport,
-    updateCount,
-    nextPingAt,
-    isPinging: serverIsPinging,
-    pendingPings,
-    pingMode,
-    globalBenchmarkRunning,
-    globalBenchmarkTotal,
-    globalBenchmarkCompleted,
-    updateStatus,
-  }
-}

package/web/src/hooks/useTheme.js

@@ -1,83 +0,0 @@
-/**
- * @file web/src/hooks/useTheme.js
- * @description React hook for tri-state theme cycle (auto / dark / light) — M1 parity.
- * 📖 Mirrors the TUI's `G` key behavior:
- * 📖   auto  → system preference (resolved once at mount)
- * 📖   dark  → explicit dark
- * 📖   light → explicit light
- * 📖 Persists the choice on <html data-theme="auto|dark|light">. When set to
- * 📖 `auto`, the hook resolves the actual rendered theme and writes it back to
- * 📖 <html data-theme="..."> via resolveSystemTheme() (light/dark) so the
- * 📖 rest of the CSS keeps working without any "auto" branch in stylesheets.
- *
- * @functions
- *   → useTheme() — { theme, resolvedTheme, setTheme, cycle }
- */
-import { useState, useCallback, useEffect } from 'react'
-
-export const THEME_CYCLE = ['auto', 'dark', 'light']
-
-// 📖 Read the OS-level dark/light preference. Falls back to dark on browsers
-// 📖 that don't support matchMedia (very rare; SSR snapshots, etc.).
-function resolveSystemTheme() {
-  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return 'dark'
-  try {
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-  } catch {
-    return 'dark'
-  }
-}
-
-function readInitialTheme() {
-  if (typeof document === 'undefined') return 'auto'
-  const attr = document.documentElement.getAttribute('data-theme')
-  if (attr === 'auto' || attr === 'dark' || attr === 'light') return attr
-  return 'auto'
-}
-
-export function useTheme() {
-  const [theme, setThemeState] = useState(readInitialTheme)
-  const [systemTheme, setSystemTheme] = useState(resolveSystemTheme)
-
-  // 📖 Listen for OS theme changes while the user is in "auto" mode.
-  useEffect(() => {
-    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return
-    const mq = window.matchMedia('(prefers-color-scheme: dark)')
-    const handler = (e) => setSystemTheme(e.matches ? 'dark' : 'light')
-    if (typeof mq.addEventListener === 'function') {
-      mq.addEventListener('change', handler)
-      return () => mq.removeEventListener('change', handler)
-    }
-    // 📖 Safari < 14 fallback
-    if (typeof mq.addListener === 'function') {
-      mq.addListener(handler)
-      return () => mq.removeListener(handler)
-    }
-  }, [])
-
-  // 📖 Apply the resolved theme to <html data-theme="..."> on every change.
-  // 📖 We write the *resolved* value (light / dark) so existing CSS keeps working.
-  useEffect(() => {
-    const resolved = theme === 'auto' ? systemTheme : theme
-    document.documentElement.setAttribute('data-theme', resolved)
-    // 📖 Also stamp the user-chosen mode so other parts of the app can read it
-    // 📖 (e.g. to render the right "auto" badge in the theme button).
-    document.documentElement.setAttribute('data-theme-preference', theme)
-  }, [theme, systemTheme])
-
-  // 📖 Cycle through auto → dark → light → auto, matching the TUI's `G` key.
-  const cycle = useCallback(() => {
-    setThemeState((prev) => {
-      const idx = THEME_CYCLE.indexOf(prev)
-      return THEME_CYCLE[(idx + 1) % THEME_CYCLE.length]
-    })
-  }, [])
-
-  const setTheme = useCallback((next) => {
-    if (THEME_CYCLE.includes(next)) setThemeState(next)
-  }, [])
-
-  const resolvedTheme = theme === 'auto' ? systemTheme : theme
-
-  return { theme, resolvedTheme, setTheme, cycle }
-}