free-coding-models 0.5.85 → 0.5.87

package/web/src/components/dashboard/ProviderDropdown.module.css

@@ -1,248 +0,0 @@
-/**
- * @file web/src/components/dashboard/ProviderDropdown.module.css
- * @description Styles for the custom provider dropdown — SVG logos + health dots.
- *
- * 📖 Theme-aware: uses CSS variables for all colors. Dark + light mode both
- * 📖 fully supported. Health dot colors are defined per-theme with explicit
- * 📖 overrides for light mode to maintain contrast.
- */
-
-.dropdown {
-  position: relative;
-}
-
-/* ── Trigger button ── */
-.trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 10px 4px 8px;
-  border: 1px solid var(--color-border);
-  border-radius: 5px;
-  background: var(--color-surface);
-  color: var(--color-text);
-  font-size: 11px;
-  font-family: var(--font-sans);
-  cursor: pointer;
-  transition: all 150ms;
-  min-width: 130px;
-  max-width: 240px;
-  user-select: none;
-  outline: none;
-}
-.trigger:hover {
-  background: var(--color-bg-hover);
-  border-color: var(--color-text-muted);
-}
-.trigger:focus {
-  border-color: var(--color-accent);
-}
-.triggerActive {
-  border-color: var(--color-accent);
-  color: var(--color-text);
-}
-.triggerOpen {
-  border-color: var(--color-accent);
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  z-index: 101;
-  background: var(--color-bg-hover);
-}
-
-.triggerContent {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-}
-
-.triggerLogo {
-  display: inline-flex;
-  align-items: center;
-  min-width: 0;
-  overflow: hidden;
-  /* 📖 Inherit max-height from ProviderLogo's row. */
-  --pl-max-h: 20px;
-  --pl-icon-h: 14px;
-  --pl-text-h: 10px;
-}
-/* 📖 Clamp ProviderLogo width inside trigger so long wordmarks don't overflow. */
-.triggerLogo > span {
-  max-width: 160px;
-}
-
-.triggerLabel {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--color-text-muted);
-  white-space: nowrap;
-}
-
-.triggerCount {
-  font-size: 10px;
-  font-weight: 700;
-  color: var(--color-text-muted);
-  font-family: var(--font-mono);
-  margin-left: auto;
-  flex-shrink: 0;
-}
-
-.chevron {
-  flex-shrink: 0;
-  opacity: 0.5;
-  transition: transform 200ms ease;
-}
-.chevronOpen {
-  transform: rotate(180deg);
-  opacity: 0.8;
-}
-
-/* ── Dropdown menu ── */
-.menu {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 100;
-  min-width: 100%;
-  max-width: 300px;
-  max-height: 320px;
-  overflow-y: auto;
-  background: var(--color-surface);
-  border: 1px solid var(--color-accent);
-  border-top: none;
-  border-radius: 0 0 6px 6px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
-  padding: 4px 0;
-}
-
-/* 📖 Custom scrollbar for the dropdown. */
-.menu::-webkit-scrollbar {
-  width: 5px;
-}
-.menu::-webkit-scrollbar-track {
-  background: transparent;
-}
-.menu::-webkit-scrollbar-thumb {
-  background: var(--color-border);
-  border-radius: 3px;
-}
-
-/* ── Menu options ── */
-.option {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 6px 10px;
-  border: none;
-  background: transparent;
-  color: var(--color-text-muted);
-  font-size: 11px;
-  font-family: var(--font-sans);
-  cursor: pointer;
-  transition: all 100ms;
-  text-align: left;
-  outline: none;
-}
-.option:hover {
-  background: var(--color-bg-hover);
-  color: var(--color-text);
-}
-.option:focus-visible {
-  background: var(--color-bg-hover);
-  color: var(--color-text);
-  box-shadow: inset 0 0 0 1px var(--color-accent);
-}
-
-.optionActive {
-  background: var(--color-accent-dim);
-  color: var(--color-text);
-  font-weight: 600;
-}
-.optionActive:hover {
-  background: var(--color-bg-hover);
-}
-
-.optionLabel {
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-.optionLogo {
-  display: inline-flex;
-  align-items: center;
-  min-width: 0;
-  flex: 1;
-  overflow: hidden;
-  /* 📖 Slightly larger than trigger for readability in the expanded menu. */
-  --pl-max-h: 20px;
-  --pl-icon-h: 15px;
-  --pl-text-h: 11px;
-}
-.optionLogo > span {
-  max-width: 180px;
-}
-
-.optionCount {
-  font-size: 10px;
-  font-weight: 700;
-  font-family: var(--font-mono);
-  color: var(--color-text-dim, #666);
-  flex-shrink: 0;
-  margin-left: auto;
-}
-
-/* ── Separator between "All" and per-provider options ── */
-.separator {
-  height: 1px;
-  background: var(--color-border);
-  margin: 4px 8px;
-}
-
-/* ── Health indicator dots ── */
-.healthDot {
-  display: inline-block;
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  flex-shrink: 0;
-  transition: background 200ms ease, box-shadow 200ms ease;
-}
-
-/* 📖 Active: green glow — key works and models are UP. */
-.dot_active {
-  background: #00ff88;
-  box-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
-}
-
-/* 📖 Pending: yellow — key set, health data not yet available. */
-.dot_pending {
-  background: #ffaa00;
-}
-
-/* 📖 Down: red — key set but models are down / auth errors. */
-.dot_down {
-  background: #ff4444;
-}
-
-/* 📖 No key: gray — no API key configured for this provider. */
-.dot_nokey {
-  background: #555570;
-}
-
-/* ── Light theme overrides — deeper colors for white background contrast ── */
-:global([data-theme="light"]) .dot_active {
-  background: #008f4d;
-  box-shadow: 0 0 4px rgba(0, 143, 77, 0.35);
-}
-:global([data-theme="light"]) .dot_pending {
-  background: #b38600;
-}
-:global([data-theme="light"]) .dot_down {
-  background: #c8143a;
-}
-:global([data-theme="light"]) .dot_nokey {
-  background: #aaa;
-}

package/web/src/components/help/HelpView.jsx

@@ -1,201 +0,0 @@
-/**
- * @file web/src/components/help/HelpView.jsx
- * @description Help modal — M2 parity with the TUI's `K` / `I` help overlay.
- * 📖 Renders the same content the TUI help overlay does, as JSX, with a live
- * 📖 search bar at the top. The TUI source-of-truth is `src/tui/cli-help.js`
- * 📖 (CLI flags) and `src/tui/overlays.js` `renderHelp` (key bindings) — we
- * 📖 re-render those lists statically here to avoid a TUI-engine import that
- * 📖 would pull chalk into the Web bundle.
- *
- * 📖 The header's overflow menu and the ⌘K palette expose "Help" as a page;
- * 📖 this component is rendered as a full-screen modal inside the Web.
- *
- * @functions
- *   → HelpView → main modal component
- */
-import { useState, useMemo } from 'react'
-import { IconSearch, IconX } from '@tabler/icons-react'
-import styles from './HelpView.module.css'
-
-const SECTIONS = [
-  {
-    id: 'navigation',
-    title: '🧭 Navigation',
-    items: [
-      { key: '↑ / ↓', desc: 'Navigate rows in the main table (planned — currently mouse-only)' },
-      { key: 'Enter', desc: 'Open the detail panel for the focused row' },
-      { key: 'Esc', desc: 'Close any open modal or detail panel' },
-    ],
-  },
-  {
-    id: 'filters',
-    title: '🔍 Filters',
-    items: [
-      { key: 'Tier chip', desc: 'Click to cycle: All → S+ → S → A+ → A → A- → B+ → B → C → All' },
-      { key: 'Status chip', desc: 'Click to cycle: All → Up → Down → Pending' },
-      { key: 'Verdict chip', desc: 'Click to cycle: All → Perfect → Normal → Spiky → Slow → Overloaded → Down → Unstable → Pending' },
-      { key: 'Health chip', desc: 'Click to cycle: All → Up → Timeout → Down → Pending → No key → Auth err' },
-      { key: 'Visibility', desc: 'Normal (all) / Configured only (hide no-key) / Usable only (UP + good verdict)' },
-      { key: 'Provider dropdown', desc: 'Filter by provider' },
-      { key: 'Custom text filter', desc: 'Apply via ⌘K palette or `Apply text filter` — clear with the X chip' },
-      { key: 'Reset button', desc: 'Clears every active filter + sort back to defaults' },
-    ],
-  },
-  {
-    id: 'sort',
-    title: '📶 Sort',
-    items: [
-      { key: 'Click any column header', desc: 'Sort asc → desc → reset (no sort, default order)' },
-      { key: 'Resizable columns', desc: 'Drag the right edge of any header to resize. Double-click resets one column.' },
-    ],
-  },
-  {
-    id: 'favorites',
-    title: '⭐ Favorites',
-    items: [
-      { key: 'Star button (per row)', desc: 'Click to favorite / unfavorite the model (TUI: F key)' },
-      { key: 'Detail panel', desc: 'Favorite + Up/Down reorder + current priority rank (TUI: Shift+↑/↓)' },
-      { key: 'Pinned mode', desc: 'In the Settings view, toggle "Pinned + always visible" (TUI: Y key)' },
-      { key: 'Shared with TUI', desc: 'Favorites are persisted in the same ~/.free-coding-models.json the TUI uses' },
-    ],
-  },
-  {
-    id: 'benchmark',
-    title: '🤖 AI Speed Test (benchmark)',
-    items: [
-      { key: 'Header button', desc: 'Run a global AI Speed Test on every visible model' },
-      { key: 'AI Lat. cell', desc: 'Click any AI Lat. cell to benchmark just that model (TUI: Ctrl+A)' },
-      { key: 'Detail panel', desc: 'Dedicated "AI Speed Test" button (TUI: Ctrl+A)' },
-      { key: 'TPS column', desc: 'Tokens per second for the model — appears after a benchmark run' },
-      { key: 'Latency column', desc: 'Real completion latency (not just ping) for the model' },
-    ],
-  },
-  {
-    id: 'tools',
-    title: '🧰 Tool mode (M3)',
-    items: [
-      { key: 'M3 shipped', desc: 'Endpoint target picker, per-row Install Endpoint button, and incompatible-target fallback modal' },
-    ],
-  },
-  {
-    id: 'palette',
-    title: '⚡ Command palette',
-    items: [
-      { key: '⌘K / Ctrl+P', desc: 'The Web\'s only global keyboard shortcut — toggles the command palette' },
-      { key: 'Type to search', desc: 'Fuzzy match across all filters, sorts, tools, pages, and theme / ping / reset actions' },
-      { key: '↑ / ↓ + Enter', desc: 'Navigate the results and execute the highlighted command' },
-      { key: 'Esc', desc: 'Close the palette without running anything' },
-    ],
-  },
-  {
-    id: 'theme',
-    title: '🌗 Theme',
-    items: [
-      { key: 'Theme button (header)', desc: 'Click to cycle: auto → dark → light (TUI: G key)' },
-      { key: 'Auto mode', desc: 'Follows the OS prefers-color-scheme preference and updates live' },
-    ],
-  },
-  {
-    id: 'ping',
-    title: '⚡ Ping mode',
-    items: [
-      { key: 'Speed / Normal / Slow / Forced', desc: 'Ping cadence (2s / 10s / 30s / 4s) — TUI: W key' },
-      { key: 'next ping in Xs', desc: 'Live countdown shown in the FilterBar (TUI footer style)' },
-    ],
-  },
-  {
-    id: 'url',
-    title: '🔗 URL deep-linking',
-    items: [
-      { key: '?tier=S+&sort=verdict&origin=groq&view=dashboard', desc: 'Every filter / sort / view is reflected in the URL — share pre-filtered links' },
-    ],
-  },
-  {
-    id: 'cli',
-    title: '⌨️ CLI parity',
-    items: [
-      { key: 'Same storage', desc: 'The Web reads + writes the same ~/.free-coding-models.json as the TUI' },
-      { key: 'Same engine', desc: 'All model parsing, ping, and benchmark code is shared with the TUI' },
-    ],
-  },
-  {
-    id: 'how-router-works',
-    title: '🌐 How the FCM Router works',
-    items: [
-      { key: 'Smart router', desc: 'Point any OpenAI client at http://localhost:19280/v1 with model: "fcm". The daemon picks the healthiest model in the active set and forwards the request with automatic failover.' },
-      { key: 'Pre-prompt', desc: 'A first-class system message is injected on every proxied request. The default introduces the assistant as the FCM routing agent. Edit from Settings.' },
-      { key: 'Probes', desc: 'Every 10s/30s/120s (eco/balanced/aggressive) the daemon sends a 1-token chat-completion ping to every model in the active set. The probe measures latency + status code, not just URL reachability — so a wrong API key is caught and the circuit opens.' },
-      { key: 'Circuit breaker', desc: 'Per-model state. Healthy (green) = last probe 2xx, route here. Down (red) = last 3 probes failed, skip until cooldown. Recovering (yellow) = cooldown expired, retrying. Auth error (orange) = 401/403, your key is wrong. Deprecated (gray) = removed from catalog, will be replaced by auto-heal.' },
-      { key: 'Failover order', desc: 'Models are tried in priority order. A model in Recovering/Down/Auth error is skipped — the request goes to the next healthy one. If ALL fail, you get 503 with the "models_tried" list in the error body.' },
-      { key: 'Auto-heal', desc: 'On daemon start, every Auth-error / Deprecated model in the active set is swapped for a working alternative (same provider first, then cross-provider). The first time you add/remove/reorder a model, auto-heal switches off.' },
-      { key: 'Rate limits', desc: 'Each provider has its own quota. Common free-tier limits: Groq 14 400 RPD, Mistral 1 RPS, NVIDIA ~40 RPM, OpenRouter 50 RPD. When a provider returns 429, the router fails over. When daily quota is exhausted, the model goes Auth error and auto-heal swaps it out next start.' },
-    ],
-  },
-]
-
-export default function HelpView({ onClose }) {
-  const [query, setQuery] = useState('')
-
-  // 📖 Filter every section's items by the live query. Case-insensitive
-  // 📖 substring match on the key or description. Empty results hide the
-  // 📖 section entirely.
-  const filteredSections = useMemo(() => {
-    const q = query.trim().toLowerCase()
-    if (!q) return SECTIONS
-    return SECTIONS.map((section) => ({
-      ...section,
-      items: section.items.filter(
-        (item) => item.key.toLowerCase().includes(q) || item.desc.toLowerCase().includes(q),
-      ),
-    })).filter((section) => section.items.length > 0)
-  }, [query])
-
-  return (
-    <div className={styles.backdrop} onClick={onClose}>
-      <div className={styles.modal} onClick={(e) => e.stopPropagation()}>
-        <div className={styles.header}>
-          <div className={styles.titleRow}>
-            <h2 className={styles.title}>❓ Help & Keyboard Shortcuts</h2>
-            <button className={styles.closeBtn} onClick={onClose} aria-label="Close help">
-              <IconX size={18} stroke={1.5} />
-            </button>
-          </div>
-          <div className={styles.searchBar}>
-            <IconSearch size={14} stroke={1.5} className={styles.searchIcon} />
-            <input
-              className={styles.searchInput}
-              placeholder="Search help (filters, hotkeys, TUI parity)…"
-              value={query}
-              onChange={(e) => setQuery(e.target.value)}
-              autoFocus
-            />
-          </div>
-          <p className={styles.note}>
-            The Web Dashboard is mouse-first. The only global keyboard shortcut is{' '}
-            <kbd>⌘K</kbd> / <kbd>Ctrl+P</kbd> for the command palette — everything else
-            lives here, in the header menu, or in modals.
-          </p>
-        </div>
-        <div className={styles.body}>
-          {filteredSections.length === 0 ? (
-            <div className={styles.empty}>No help matches "{query}".</div>
-          ) : (
-            filteredSections.map((section) => (
-              <section key={section.id} className={styles.section}>
-                <h3 className={styles.sectionTitle}>{section.title}</h3>
-                <ul className={styles.itemList}>
-                  {section.items.map((item) => (
-                    <li key={item.key + item.desc} className={styles.item}>
-                      <span className={styles.itemKey}>{item.key}</span>
-                      <span className={styles.itemDesc}>{item.desc}</span>
-                    </li>
-                  ))}
-                </ul>
-              </section>
-            ))
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}

package/web/src/components/help/HelpView.module.css

@@ -1,156 +0,0 @@
-/**
- * @file web/src/components/help/HelpView.module.css
- * @description Full-screen help modal styles — TUI parity.
- */
-
-.backdrop {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  width: 100%;
-  padding: 24px;
-}
-
-.modal {
-  width: 100%;
-  max-width: 820px;
-  margin: 0 auto;
-  background: var(--color-bg-card, #080908);
-  border: 1px solid var(--color-border, #161a16);
-  border-radius: 14px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  flex: 1;
-  min-height: 0;
-}
-
-.header {
-  padding: 20px 24px 16px;
-  border-bottom: 1px solid var(--color-border);
-}
-
-.titleRow {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.title {
-  font-size: 17px;
-  font-weight: 700;
-  margin: 0;
-  color: var(--color-text);
-}
-
-.closeBtn {
-  background: transparent;
-  border: none;
-  color: var(--color-text-muted);
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-.closeBtn:hover { color: var(--color-text); background: var(--color-bg-hover); }
-
-.searchBar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-top: 12px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
-  padding: 0 12px;
-  height: 34px;
-}
-.searchBar:focus-within {
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 3px var(--color-accent-glow);
-}
-.searchIcon { color: var(--color-text-dim); }
-.searchInput {
-  flex: 1;
-  background: none;
-  border: none;
-  outline: none;
-  color: var(--color-text);
-  font-size: 13px;
-  font-family: var(--font-sans);
-}
-.searchInput::placeholder { color: var(--color-text-dim); }
-
-.note {
-  margin: 10px 0 0;
-  font-size: 11px;
-  color: var(--color-text-muted);
-  line-height: 1.5;
-}
-.note kbd {
-  display: inline-block;
-  font-family: var(--font-mono);
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  padding: 1px 5px;
-  border-radius: 3px;
-  font-size: 10px;
-}
-
-.body {
-  padding: 18px 24px 24px;
-  overflow-y: auto;
-  flex: 1;
-}
-
-.section { margin-bottom: 18px; }
-.sectionTitle {
-  font-size: 12px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.6px;
-  color: var(--color-text-muted);
-  margin: 0 0 8px;
-}
-
-.itemList {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.item {
-  display: grid;
-  grid-template-columns: minmax(160px, 0.4fr) 1fr;
-  gap: 12px;
-  align-items: baseline;
-  padding: 6px 10px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  font-size: 12px;
-}
-.itemKey {
-  font-weight: 600;
-  color: var(--color-text);
-  font-family: var(--font-mono);
-  font-size: 11px;
-}
-.itemDesc {
-  color: var(--color-text-muted);
-  line-height: 1.5;
-}
-
-.empty {
-  text-align: center;
-  padding: 40px 20px;
-  color: var(--color-text-dim);
-  font-size: 13px;
-}