free-coding-models 0.5.5 → 0.5.8

package/web/src/hooks/useChangelog.js

@@ -0,0 +1,51 @@
+/**
+ * @file web/src/hooks/useChangelog.js
+ * @description React hook for the changelog data — M2 parity with the TUI's `N` key overlay.
+ * 📖 Loads `/api/changelog` once on mount, exposes the parsed { versions } map,
+ * 📖 and provides helpers for the index/details two-phase modal.
+ *
+ * @functions
+ *   → useChangelog() — { versions, sortedVersions, getVersion, loading, error, refresh }
+ */
+import { useEffect, useMemo, useState, useCallback } from 'react'
+
+export function useChangelog() {
+  const [versions, setVersions] = useState({})
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+
+  const refresh = useCallback(async () => {
+    try {
+      const resp = await fetch('/api/changelog')
+      if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+      const data = await resp.json()
+      setVersions(data?.versions ?? {})
+      setError(null)
+    } catch (err) {
+      setError(err.message || 'Failed to load changelog')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { refresh() }, [refresh])
+
+  // 📖 Sort versions in descending semver order. We do a string-based compare
+  // 📖 on the dotted tuples so '0.10.0' > '0.9.0' works correctly.
+  const sortedVersions = useMemo(() => {
+    return Object.keys(versions).sort((a, b) => {
+      const ap = a.split('.').map(Number)
+      const bp = b.split('.').map(Number)
+      for (let i = 0; i < Math.max(ap.length, bp.length); i++) {
+        const av = ap[i] || 0
+        const bv = bp[i] || 0
+        if (bv !== av) return bv - av
+      }
+      return 0
+    })
+  }, [versions])
+
+  const getVersion = useCallback((v) => versions[v] ?? null, [versions])
+
+  return { versions, sortedVersions, getVersion, loading, error, refresh }
+}

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/useUpdateChecker.js

@@ -0,0 +1,91 @@
+/**
+ * @file web/src/hooks/useUpdateChecker.js
+ * @description React hook for the update chip + popover — M2 parity with TUI `Shift+U`.
+ * 📖 Polls `/api/version` every 5 minutes (matches the TUI cadence) and exposes
+ * 📖 `updateAvailable` (boolean) + `latestVersion` (string) for the header chip.
+ * 📖 The chip's "Update now" button calls `/api/update/run` which spawns the
+ * 📖 detected package manager in the background; the Web UI just surfaces a
+ * 📖 toast and tells the user to restart the dashboard to apply the update.
+ *
+ * @functions
+ *   → useUpdateChecker({ onToast }) — { latestVersion, updateAvailable, runUpdate, checkNow, loading }
+ */
+import { useCallback, useEffect, useState, useRef } from 'react'
+
+const POLL_INTERVAL_MS = 5 * 60_000
+
+// 📖 Lightweight semver compare: returns 1 if a > b, -1 if a < b, 0 if equal.
+function semverCompare(a, b) {
+  if (!a || !b) return 0
+  const ap = a.replace(/^v/, '').split('.').map(Number)
+  const bp = b.replace(/^v/, '').split('.').map(Number)
+  for (let i = 0; i < Math.max(ap.length, bp.length); i++) {
+    const av = ap[i] || 0
+    const bv = bp[i] || 0
+    if (bv !== av) return bv - av
+  }
+  return 0
+}
+
+export function useUpdateChecker({ onToast } = {}) {
+  const [localVersion, setLocalVersion] = useState(null)
+  const [latestVersion, setLatestVersion] = useState(null)
+  const [lastReleaseDate, setLastReleaseDate] = useState(null)
+  const [error, setError] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const intervalRef = useRef(null)
+
+  const checkNow = useCallback(async () => {
+    setLoading(true)
+    try {
+      const resp = await fetch('/api/version')
+      if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+      const data = await resp.json()
+      setLocalVersion(data.local ?? null)
+      setLatestVersion(data.latest ?? null)
+      setLastReleaseDate(data.lastReleaseDate ?? null)
+      setError(data.error ?? null)
+    } catch (err) {
+      setError(err.message || 'update check failed')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  // 📖 Initial check + 5-minute polling. We stop polling on unmount.
+  useEffect(() => {
+    checkNow()
+    intervalRef.current = setInterval(checkNow, POLL_INTERVAL_MS)
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current)
+    }
+  }, [checkNow])
+
+  // 📖 updateAvailable is true when latest > local. A null latest means the
+  // 📖 npm registry is unreachable, so we don't surface a chip.
+  const updateAvailable = Boolean(latestVersion && localVersion && semverCompare(latestVersion, localVersion) > 0)
+
+  const runUpdate = useCallback(async () => {
+    if (!updateAvailable) {
+      onToast?.('No update available.', 'info')
+      return
+    }
+    try {
+      const resp = await fetch('/api/update/run', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ version: latestVersion }),
+      })
+      const data = await resp.json().catch(() => ({}))
+      if (resp.ok && data?.started) {
+        onToast?.(`Update to v${latestVersion} started — restart the dashboard to apply.`, 'success')
+      } else {
+        onToast?.(data?.error || data?.message || 'Update failed', 'error')
+      }
+    } catch (err) {
+      onToast?.(err.message || 'Update request failed', 'error')
+    }
+  }, [updateAvailable, latestVersion, onToast])
+
+  return { localVersion, latestVersion, lastReleaseDate, updateAvailable, checkNow, runUpdate, loading, error }
+}