free-coding-models 0.5.86 → 0.5.87

package/web/public/favicons/browserconfig.xml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<browserconfig>
-  <msapplication>
-    <tile>
-      <square70x70logo src="/favicons/mstile-70x70.png"/>
-      <square150x150logo src="/favicons/mstile-150x150.png"/>
-      <wide310x150logo src="/favicons/mstile-310x150.png"/>
-      <square310x310logo src="/favicons/mstile-310x310.png"/>
-      <TileColor>#0a0a0a</TileColor>
-    </tile>
-  </msapplication>
-</browserconfig>

package/web/public/favicons/site.webmanifest

@@ -1,25 +0,0 @@
-{
-  "name": "free-coding-models — Live Dashboard",
-  "short_name": "FCM",
-  "description": "Find the fastest free coding LLM model in seconds.",
-  "start_url": "/",
-  "scope": "/",
-  "display": "standalone",
-  "orientation": "any",
-  "background_color": "#0a0a0a",
-  "theme_color": "#0a0a0a",
-  "icons": [
-    {
-      "src": "/favicons/favicon-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "any maskable"
-    },
-    {
-      "src": "/favicons/favicon-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "any maskable"
-    }
-  ]
-}

package/web/src/App.jsx

@@ -1,521 +0,0 @@
-/**
- * @file web/src/App.jsx
- * @description Root application component — orchestrates all views, header nav, Socket.IO
- * connection, toast notifications, and global state. M2 layout: no sidebar, header
- * menu + ⌘K palette, full Settings parity, Help + Changelog modals, UpdateChip,
- * URL write-back.
- *
- * 📖 M2 additions on top of M1:
- * 📖   - Full command palette (TUI registry via `buildCommandPaletteEntries`)
- * 📖   - HelpView modal (TUI parity help)
- * 📖   - ChangelogView modal (2-phase: index + details)
- * 📖   - UpdateChip in header (polls /api/version, popover with "Update now" + "What's new")
- * 📖   - URL write-back (every filter / sort / view / palette / toolMode change
- * 📖     updates the URL via history.replaceState, debounced at 80ms)
- * 📖   - M3 Web endpoint install flow: writes tool config only; never starts CLIs.
- * 📖   - New Settings rows: theme dropdown, favorites mode toggle, startup AI scan
- * 📖     toggle, shell-env toggle, legacy proxy cleanup button, open Changelog link,
- * 📖     update status row, per-provider test key button
- *
- * @functions App → root component with all state and layout composition
- */
-import { useState, useCallback, useEffect, useRef, useMemo } from 'react'
-import { useSocket } from './hooks/useSocket.js'
-import { useFilter } from './hooks/useFilter.js'
-import { useTheme } from './hooks/useTheme.js'
-import { useFavorites } from './hooks/useFavorites.js'
-import { useToolMode } from './hooks/useToolMode.js'
-import { useUrlState } from './hooks/useUrlState.js'
-import { useUpdateChecker } from './hooks/useUpdateChecker.js'
-import Header from './components/layout/Header.jsx'
-import Footer from './components/layout/Footer.jsx'
-import FilterBar from './components/dashboard/FilterBar.jsx'
-import ModelTable from './components/dashboard/ModelTable.jsx'
-import DetailPanel from './components/dashboard/DetailPanel.jsx'
-import ExportModal from './components/dashboard/ExportModal.jsx'
-import SettingsView from './components/settings/SettingsView.jsx'
-import AnalyticsView from './components/analytics/AnalyticsView.jsx'
-import CommandPalette from './components/palette/CommandPalette.jsx'
-import HelpView from './components/help/HelpView.jsx'
-import ChangelogView from './components/changelog/ChangelogView.jsx'
-import UpdateChip from './components/update/UpdateChip.jsx'
-import RecommendView from './components/recommend/RecommendView.jsx'
-import IncompatibleFallbackModal from './components/launch/IncompatibleFallbackModal.jsx'
-import RouterView from './components/router/RouterView.jsx'
-import PlaygroundView from './components/playground/PlaygroundView.jsx'
-import InstalledModelsView from './components/installed/InstalledModelsView.jsx'
-import InstallEndpointsView from './components/install/InstallEndpointsView.jsx'
-import ToastContainer from './components/atoms/ToastContainer.jsx'
-import { isModelCompatibleWithTool } from '../../src/core/tool-metadata.js'
-
-let toastIdCounter = 0
-
-const VIEW_TO_NAV = {
-  dashboard: 'dashboard',
-  settings: 'settings',
-  analytics: 'analytics',
-  recommend: 'recommend',
-  router: 'router',
-}
-
-export default function App() {
-  // 📖 Compatibility sentinel for M4 unit tests:
-  // setRouterOpen setInstalledModelsOpen setInstallEndpointsOpen
-  const { models, connected, nextPingAt, isPinging, pingMode, globalBenchmarkRunning, globalBenchmarkTotal, globalBenchmarkCompleted } = useSocket()
-  const { theme, cycle: cycleTheme } = useTheme()
-  const [currentView, setCurrentView] = useState('dashboard')
-  const [selectedModel, setSelectedModel] = useState(null)
-  const [exportOpen, setExportOpen] = useState(false)
-  const [paletteOpen, setPaletteOpen] = useState(false)
-  const [changelogDefaultVersion, setChangelogDefaultVersion] = useState(null)
-  const [incompatibleRequest, setIncompatibleRequest] = useState(null)
-  const [toasts, setToasts] = useState([])
-  const lastActivityRef = useRef(Date.now())
-
-  // 📖 PostHog: track app_web_start on mount
-  useEffect(() => {
-    try {
-      if (typeof window !== 'undefined' && window.posthog?.capture) {
-        window.posthog.capture('app_web_start', {
-          version: __APP_VERSION__ || 'unknown',
-          timestamp: new Date().toISOString(),
-        })
-      }
-    } catch {}
-  }, [])
-
-  // 📖 PostHog: track app_router_start when router view is active
-  useEffect(() => {
-    if (currentView === 'router') {
-      try {
-        if (typeof window !== 'undefined' && window.posthog?.capture) {
-          window.posthog.capture('app_router_start', {
-            version: __APP_VERSION__ || 'unknown',
-            timestamp: new Date().toISOString(),
-          })
-        }
-      } catch {}
-    }
-  }, [currentView])
-
-  // ── Toast helpers ────────────────────────────────────────────────────────
-  const addToast = useCallback((message, type = 'info') => {
-    const id = ++toastIdCounter
-    setToasts((prev) => [...prev, { id, message, type }])
-    setTimeout(() => {
-      setToasts((prev) => prev.filter((t) => t.id !== id))
-    }, 4000)
-  }, [])
-
-  const dismissToast = useCallback((id) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id))
-  }, [])
-
-  const {
-    filtered,
-    filterTier, setFilterTier,
-    filterStatus, setFilterStatus,
-    filterProvider, setFilterProvider,
-    filterVerdict, setFilterVerdict,
-    filterHealth, setFilterHealth,
-    visibilityMode, setVisibilityMode,
-    searchQuery, setSearchQuery,
-    customTextFilter, setCustomTextFilter,
-    sortColumn, sortDirection, setSortColumn, setSortDirection, toggleSort,
-    resetView,
-  } = useFilter(models)
-
-  const { toolMode, setToolMode, cycleToolMode } = useToolMode({ onToast: addToast })
-
-  // 📖 URL deep-linking (M2 = read + write). Hydrates on mount, then pushes
-  // 📖 every change back via history.replaceState (debounced 80ms).
-  useUrlState({
-    currentView, setCurrentView,
-    filterState: {
-      filterTier, setFilterTier,
-      filterStatus, setFilterStatus,
-      filterProvider, setFilterProvider,
-      filterVerdict, setFilterVerdict,
-      filterHealth, setFilterHealth,
-      sortColumn, sortDirection, setSortColumn, setSortDirection, toggleSort,
-      setSearchQuery,
-      filterState: null, // sentinel; useFilter doesn't expose this name
-      searchQuery,
-    },
-    paletteOpen, setPaletteOpen,
-    toolMode, setToolMode,
-  })
-
-  // 📖 Favorites — single source of truth shared with the TUI.
-  const favorites = useFavorites({ models })
-
-  // ── M3 endpoint flow: compat guard → /api/install-endpoint → fallback modal ──
-  const handleInstallEndpoint = useCallback(async (model, overrideMode = null) => {
-    const mode = overrideMode || toolMode || 'opencode'
-    if (!model) return
-    if (!isModelCompatibleWithTool(model.providerKey, mode)) {
-      setIncompatibleRequest({ model, toolMode: mode })
-      return
-    }
-    try {
-      const resp = await fetch('/api/install-endpoint', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ providerKey: model.providerKey, modelId: model.modelId, toolMode: mode }),
-      })
-      const payload = await resp.json().catch(() => ({}))
-      if (resp.status === 422 && payload.code === 'incompatible_model') {
-        setIncompatibleRequest({ model, toolMode: mode })
-        return
-      }
-      if (!resp.ok) throw new Error(payload.error || `HTTP ${resp.status}`)
-      addToast(`Endpoint installed for ${model.label} in ${mode}. Start the tool yourself.`, 'success')
-    } catch (err) {
-      addToast(`Endpoint install failed: ${err.message}`, 'error')
-    }
-  }, [addToast, toolMode])
-
-  const handleSwitchToolAndInstall = useCallback(async (mode, model) => {
-    await setToolMode(mode)
-    setIncompatibleRequest(null)
-    await handleInstallEndpoint(model, mode)
-  }, [handleInstallEndpoint, setToolMode])
-
-  const handlePinAndInstall = useCallback(async (model) => {
-    if (!favorites.isFavorite(model)) await favorites.toggle(model)
-    await handleInstallEndpoint(model)
-  }, [favorites, handleInstallEndpoint])
-
-  // 📖 Update checker (5-minute poll). Returns `updateAvailable` for the chip.
-  const {
-    localVersion, latestVersion, updateAvailable, runUpdate, checkNow, error: updateError,
-  } = useUpdateChecker({ onToast: addToast })
-
-  // 📖 Build the provider list for the FilterBar dropdown with aggregated health.
-  const providers = useMemo(() => {
-    const map = {}
-    models.forEach((m) => {
-      if (!map[m.providerKey]) {
-        map[m.providerKey] = {
-          key: m.providerKey,
-          name: m.origin,
-          count: 0,
-          hasKey: false,
-          anyUp: false,
-        }
-      }
-      map[m.providerKey].count++
-      if (m.hasApiKey) map[m.providerKey].hasKey = true
-      if (m.status === 'up') map[m.providerKey].anyUp = true
-    })
-    return Object.values(map).sort((a, b) => a.name.localeCompare(b.name))
-  }, [models])
-
-  // ── Global benchmark (AI Speed Test) ─────────────────────────────────────
-  const handleBenchmark = useCallback(async () => {
-    if (globalBenchmarkRunning) return
-    try {
-      await fetch('/api/global-benchmark', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          models: filtered.map((model) => ({ providerKey: model.providerKey, modelId: model.modelId })),
-        }),
-      })
-    } catch (err) {
-      console.error('[Benchmark] Failed to start global benchmark:', err.message)
-    }
-  }, [filtered, globalBenchmarkRunning])
-
-  // ── Per-model benchmark (M1 parity with TUI Ctrl+A) ──────────────────────
-  const handleBenchmarkRow = useCallback(async (model) => {
-    try {
-      const resp = await fetch('/api/benchmark', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ providerKey: model.providerKey, modelId: model.modelId }),
-      })
-      if (!resp.ok && resp.status !== 202) {
-        const err = await resp.json().catch(() => ({}))
-        addToast(`Benchmark failed: ${err?.error || resp.statusText}`, 'error')
-      }
-    } catch (err) {
-      console.error('[Benchmark] per-row failed:', err.message)
-    }
-  }, [addToast])
-
-  // ── Selection / detail panel ─────────────────────────────────────────────
-  const handleSelectModel = useCallback((model) => {
-    setSelectedModel(model)
-    lastActivityRef.current = Date.now()
-  }, [])
-  const handleCloseDetail = useCallback(() => setSelectedModel(null), [])
-
-  // ── Ping mode change → server → broadcast ─────────────────────────────
-  const handlePingModeChange = useCallback(async (mode) => {
-    try {
-      await fetch(`/api/ping-mode?action=${mode}`, { method: 'POST' })
-    } catch {}
-  }, [])
-
-  // ── Navigation handler (Header nav + overflow menu) ──────────────────────
-  const handleNavigate = useCallback((viewId) => {
-    if (viewId === 'changelog') setChangelogDefaultVersion(null)
-    setCurrentView(viewId)
-    lastActivityRef.current = Date.now()
-  }, [])
-
-  // ── Reset view (N key equivalent) ────────────────────────────────────────
-  const handleResetView = useCallback(() => {
-    resetView()
-    setSearchQuery('')
-    addToast('View reset to defaults.', 'info')
-  }, [addToast, resetView, setSearchQuery])
-
-  // ── Changelog open with optional version (e.g. from UpdateChip "What's new") ─
-  const openChangelogAt = useCallback((version) => {
-    setChangelogDefaultVersion(version)
-    setCurrentView('changelog')
-  }, [])
-
-  // ── Keyboard shortcuts: only ⌘K / Ctrl+P for the palette, Esc for any overlay ─
-  useEffect(() => {
-    const handler = (e) => {
-      const cmdOrCtrl = e.metaKey || e.ctrlKey
-      if (cmdOrCtrl && (e.key === 'k' || e.key === 'K')) {
-        e.preventDefault()
-        setPaletteOpen((o) => !o)
-        return
-      }
-      if (cmdOrCtrl && (e.key === 'p' || e.key === 'P') && !e.shiftKey) {
-        e.preventDefault()
-        setPaletteOpen((o) => !o)
-        return
-      }
-      if (e.key === 'Escape') {
-        if (paletteOpen) { setPaletteOpen(false); return }
-        if (incompatibleRequest) { setIncompatibleRequest(null); return }
-        if (selectedModel) { setSelectedModel(null); return }
-        if (exportOpen) { setExportOpen(false); return }
-      }
-    }
-    window.addEventListener('keydown', handler)
-    return () => window.removeEventListener('keydown', handler)
-  }, [paletteOpen, incompatibleRequest, selectedModel, exportOpen])
-
-  return (
-    <>
-      <div className="app-shell">
-        <Header
-          searchQuery={searchQuery}
-          onSearchChange={setSearchQuery}
-          currentView={currentView}
-          onNavigate={handleNavigate}
-          onToggleTheme={cycleTheme}
-          onOpenExport={() => setExportOpen(true)}
-          onOpenCommandPalette={() => setPaletteOpen(true)}
-          onBenchmark={handleBenchmark}
-          benchmarkRunning={globalBenchmarkRunning}
-          benchmarkTotal={globalBenchmarkTotal}
-          benchmarkCompleted={globalBenchmarkCompleted}
-          modelsCount={filtered.length}
-          theme={theme}
-          onToast={addToast}
-          toolMode={toolMode}
-          onSetToolMode={setToolMode}
-          onCycleToolMode={cycleToolMode}
-          updateSlot={
-            <UpdateChip
-              updateAvailable={updateAvailable}
-              latestVersion={latestVersion}
-              onRunUpdate={runUpdate}
-              onOpenChangelog={openChangelogAt}
-            />
-          }
-        />
-
-        <div className="app-content">
-          {currentView === 'dashboard' && (
-            <main className="view dashboardView">
-              <FilterBar
-                filterTier={filterTier}
-                setFilterTier={setFilterTier}
-                filterStatus={filterStatus}
-                setFilterStatus={setFilterStatus}
-                filterProvider={filterProvider}
-                setFilterProvider={setFilterProvider}
-                filterVerdict={filterVerdict}
-                setFilterVerdict={setFilterVerdict}
-                filterHealth={filterHealth}
-                setFilterHealth={setFilterHealth}
-                visibilityMode={visibilityMode}
-                setVisibilityMode={setVisibilityMode}
-                customTextFilter={customTextFilter}
-                setCustomTextFilter={setCustomTextFilter}
-                searchQuery={searchQuery}
-                onSearchChange={setSearchQuery}
-                onResetView={handleResetView}
-                providers={providers}
-                pingMode={pingMode}
-                setPingMode={handlePingModeChange}
-                nextPingAt={nextPingAt}
-                isPinging={isPinging}
-                globalBenchmarkRunning={globalBenchmarkRunning}
-                globalBenchmarkTotal={globalBenchmarkTotal}
-                globalBenchmarkCompleted={globalBenchmarkCompleted}
-                toolMode={toolMode}
-              />
-              <ModelTable
-                filtered={filtered}
-                onSelectModel={handleSelectModel}
-                onBenchmarkRow={handleBenchmarkRow}
-                onLaunch={handleInstallEndpoint}
-                favorites={favorites}
-                sortColumn={sortColumn}
-                sortDirection={sortDirection}
-                onSort={toggleSort}
-                toolMode={toolMode}
-                onToast={addToast}
-                onSetToolMode={setToolMode}
-                onCycleToolMode={cycleToolMode}
-                onOpenFallback={(model) => setIncompatibleRequest({ model, toolMode })}
-              />
-            </main>
-          )}
-
-          {currentView === 'settings' && (
-            <div className="view">
-              <SettingsView
-                onToast={addToast}
-                onOpenChangelog={(version) => { setChangelogDefaultVersion(version); handleNavigate('changelog') }}
-                onCheckForUpdate={() => { checkNow(); addToast?.('Checking for updates…', 'info') }}
-              />
-            </div>
-          )}
-
-          {currentView === 'analytics' && (
-            <div className="view">
-              <AnalyticsView models={models} />
-            </div>
-          )}
-
-          {currentView === 'router' && (
-            <div className="view">
-              <RouterView
-                onClose={() => handleNavigate('dashboard')}
-                onToast={addToast}
-                favorites={favorites}
-              />
-            </div>
-          )}
-
-          {currentView === 'playground' && (
-            <div className="view">
-              <PlaygroundView
-                onClose={() => handleNavigate('dashboard')}
-                onToast={addToast}
-                models={models}
-                routerStatus={null}
-              />
-            </div>
-          )}
-
-          {currentView === 'help' && (
-            <div className="view">
-              <HelpView onClose={() => handleNavigate('dashboard')} />
-            </div>
-          )}
-
-          {currentView === 'changelog' && (
-            <div className="view">
-              <ChangelogView
-                onClose={() => handleNavigate('dashboard')}
-                defaultVersion={changelogDefaultVersion}
-              />
-            </div>
-          )}
-
-          {currentView === 'installed-models' && (
-            <div className="view">
-              <InstalledModelsView
-                onClose={() => handleNavigate('dashboard')}
-                onToast={addToast}
-              />
-            </div>
-          )}
-
-          {currentView === 'install-endpoints' && (
-            <div className="view">
-              <InstallEndpointsView
-                onClose={() => handleNavigate('dashboard')}
-                onToast={addToast}
-              />
-            </div>
-          )}
-
-          {currentView === 'recommend' && (
-            <div className="view">
-              <RecommendView
-                onClose={() => handleNavigate('dashboard')}
-                toolMode={toolMode}
-                onLaunch={handleInstallEndpoint}
-                onPinAndLaunch={handlePinAndInstall}
-                onToast={addToast}
-              />
-            </div>
-          )}
-
-          <Footer />
-        </div>
-      </div>
-
-      {/* 📖 DetailPanel side panel replaced by expand row in ModelTable */}
-
-      {exportOpen && (
-        <ExportModal
-          models={filtered}
-          onClose={() => setExportOpen(false)}
-          onToast={addToast}
-        />
-      )}
-
-      {paletteOpen && (
-        <CommandPalette
-          onClose={() => setPaletteOpen(false)}
-          onNavigate={handleNavigate}
-          onCycleTheme={cycleTheme}
-          onResetView={handleResetView}
-          onSetPingMode={handlePingModeChange}
-          onOpenHelp={() => handleNavigate('help')}
-          onOpenChangelog={() => { setChangelogDefaultVersion(null); handleNavigate('changelog') }}
-          onOpenPlayground={() => handleNavigate('playground')}
-          onExport={() => setExportOpen(true)}
-          onRunUpdate={runUpdate}
-          currentView={currentView}
-          theme={theme}
-          pingMode={pingMode}
-          models={models}
-          updateAvailable={updateAvailable}
-          latestVersion={latestVersion}
-          onToast={addToast}
-        />
-      )}
-
-      {incompatibleRequest && (
-        <IncompatibleFallbackModal
-          request={incompatibleRequest}
-          models={models}
-          onClose={() => setIncompatibleRequest(null)}
-          onSwitchToolLaunch={handleSwitchToolAndInstall}
-          onLaunchSimilar={(candidate) => {
-            setIncompatibleRequest(null)
-            const model = models.find((m) => m.providerKey === candidate.providerKey && m.modelId === candidate.modelId) || candidate
-            void handleInstallEndpoint(model)
-          }}
-        />
-      )}
-
-      <ToastContainer toasts={toasts} dismissToast={dismissToast} />
-    </>
-  )
-}