free-coding-models 0.5.86 → 0.5.87

package/web/src/components/update/UpdateChip.jsx

@@ -1,104 +0,0 @@
-/**
- * @file web/src/components/update/UpdateChip.jsx
- * @description Header update chip + popover — M2 parity with TUI's auto-update banner.
- * 📖 Sits in the right side of the header (next to AI Latency, theme, export).
- * 📖 Hidden when no update is available; shows "⬆ vX.Y.Z" when one is.
- * 📖 Click → popover with "Update now" + "What's new" (which opens the
- * 📖 Changelog modal pre-focused on the new version).
- *
- * @functions
- *   → UpdateChip — small badge with popover
- */
-import { useState, useRef, useEffect } from 'react'
-import { IconDownload, IconHistory, IconX, IconExternalLink } from '@tabler/icons-react'
-import styles from './UpdateChip.module.css'
-
-export default function UpdateChip({ updateAvailable, latestVersion, onRunUpdate, onOpenChangelog, checking }) {
-  const [open, setOpen] = useState(false)
-  const ref = useRef(null)
-
-  // 📖 Close on outside click / Esc — same pattern as the header kebab menu.
-  useEffect(() => {
-    if (!open) return
-    const onClick = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false) }
-    const onKey = (e) => { if (e.key === 'Escape') setOpen(false) }
-    document.addEventListener('mousedown', onClick)
-    document.addEventListener('keydown', onKey)
-    return () => {
-      document.removeEventListener('mousedown', onClick)
-      document.removeEventListener('keydown', onKey)
-    }
-  }, [open])
-
-  // 📖 No chip when no update. The M1 plan keeps the chip honest — a fresh
-  // 📖 install should look clean, not noisy.
-  if (!updateAvailable) {
-    if (checking) {
-      return (
-        <span className={styles.checking} title="Checking for updates…">
-          <span className={styles.dot} />
-        </span>
-      )
-    }
-    return null
-  }
-
-  return (
-    <div className={styles.wrap} ref={ref}>
-      <button
-        className={styles.chip}
-        onClick={() => setOpen((o) => !o)}
-        title={`Update available: v${latestVersion}. Click to install.`}
-        aria-expanded={open}
-        aria-haspopup="dialog"
-      >
-        <IconDownload size={13} stroke={1.5} />
-        <span>v{latestVersion}</span>
-      </button>
-
-      {open && (
-        <div className={styles.popover} role="dialog" aria-label="Update available">
-          <div className={styles.popoverHeader}>
-            <div className={styles.popoverTitle}>
-              <IconDownload size={14} stroke={1.5} />
-              <span>Update available</span>
-            </div>
-            <button
-              className={styles.popoverClose}
-              onClick={() => setOpen(false)}
-              aria-label="Close"
-            >
-              <IconX size={14} stroke={1.5} />
-            </button>
-          </div>
-          <p className={styles.popoverBody}>
-            A newer version (<strong>v{latestVersion}</strong>) is available on npm.
-            After updating, restart the dashboard to pick up the changes.
-          </p>
-          <div className={styles.popoverActions}>
-            <button
-              className={styles.primaryAction}
-              onClick={() => {
-                setOpen(false)
-                onRunUpdate?.()
-              }}
-            >
-              <IconDownload size={13} stroke={1.5} />
-              <span>Update now</span>
-            </button>
-            <button
-              className={styles.secondaryAction}
-              onClick={() => {
-                setOpen(false)
-                onOpenChangelog?.(latestVersion)
-              }}
-            >
-              <IconHistory size={13} stroke={1.5} />
-              <span>What's new</span>
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}

package/web/src/components/update/UpdateChip.module.css

@@ -1,146 +0,0 @@
-/**
- * @file web/src/components/update/UpdateChip.module.css
- * @description Styles for the header update chip + popover.
- */
-
-.wrap {
-  position: relative;
-  display: inline-flex;
-}
-
-.chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  height: 28px;
-  padding: 0 10px;
-  font-size: 11px;
-  font-weight: 700;
-  font-family: var(--font-mono);
-  background: var(--color-success-dim);
-  color: var(--color-success);
-  border: 1px solid var(--color-success);
-  border-radius: 6px;
-  cursor: pointer;
-  font-family: var(--font-mono);
-  transition: all 150ms;
-  white-space: nowrap;
-}
-.chip:hover {
-  background: var(--color-success);
-  color: var(--color-bg);
-}
-
-.checking {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  opacity: 0.5;
-}
-.dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--color-text-muted);
-  animation: pulse 1.5s ease-in-out infinite;
-}
-@keyframes pulse {
-  0%, 100% { opacity: 0.3; }
-  50% { opacity: 1; }
-}
-
-.popover {
-  position: absolute;
-  top: calc(100% + 6px);
-  right: 0;
-  width: 320px;
-  background: var(--color-bg-elevated);
-  border: 1px solid var(--color-border-hover);
-  border-radius: 10px;
-  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
-  z-index: 200;
-  overflow: hidden;
-}
-
-.popoverHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--color-border);
-}
-.popoverTitle {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-  font-weight: 700;
-  color: var(--color-success);
-}
-.popoverClose {
-  background: transparent;
-  border: none;
-  color: var(--color-text-muted);
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 2px;
-  border-radius: 4px;
-}
-.popoverClose:hover { color: var(--color-text); background: var(--color-bg-hover); }
-
-.popoverBody {
-  padding: 10px 12px;
-  margin: 0;
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--color-text);
-}
-.popoverBody strong {
-  color: var(--color-success);
-  font-family: var(--font-mono);
-}
-
-.popoverActions {
-  display: flex;
-  gap: 6px;
-  padding: 8px 12px 12px;
-}
-
-.primaryAction,
-.secondaryAction {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  flex: 1;
-  height: 32px;
-  padding: 0 10px;
-  font-size: 11px;
-  font-weight: 600;
-  border-radius: 6px;
-  cursor: pointer;
-  justify-content: center;
-  font-family: var(--font-sans);
-  transition: all 150ms;
-}
-.primaryAction {
-  background: var(--color-success);
-  color: var(--color-bg);
-  border: 1px solid var(--color-success);
-}
-.primaryAction:hover {
-  background: var(--color-success);
-  filter: brightness(0.9);
-}
-.secondaryAction {
-  background: var(--color-surface);
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
-}
-.secondaryAction:hover {
-  background: var(--color-bg-hover);
-  border-color: var(--color-text-muted);
-}

package/web/src/global.css

@@ -1,298 +0,0 @@
-/**
- * @file web/src/global.css
- * @description Global CSS with design tokens, base reset, background effects, and shared styles.
- * 📖 Contains all CSS custom properties (--color-*, --font-*, --radius-*, etc.),
- * light theme overrides, reset rules, background grid/glow effects,
- * app-content layout, view visibility, scrollbar, and responsive breakpoints.
- */
-
-/* ─── CSS Custom Properties (Design Tokens) ─── */
-:root {
-  --color-brand:        #c0f20c;
-  --color-bg:           #050505;
-  --color-bg-elevated:  #090a09;
-  --color-bg-card:      #080908;
-  --color-bg-hover:     #121512;
-  --color-bg-active:    #181d18;
-  --color-surface:      #0d100d;
-  --color-border:       #161a16;
-  --color-border-hover: #2e3b2e;
-
-  --color-text:         #ffffff;
-  --color-text-muted:   #8fa08f;
-  --color-text-dim:     #455245;
-
-  --color-accent:       #c0f20c;
-  --color-accent-hover: #d2ff2b;
-  --color-accent-glow:  rgba(192, 242, 12, 0.15);
-  --color-accent-dim:   rgba(192, 242, 12, 0.08);
-
-  --color-danger:       #ff4444;
-  --color-danger-dim:   rgba(255, 68, 68, 0.1);
-  --color-warning:      #ffaa00;
-  --color-warning-dim:  rgba(255, 170, 0, 0.1);
-  --color-success:      #00ff88;
-  --color-success-dim:  rgba(0, 255, 136, 0.1);
-  --color-info:         #06b6d4;
-  --color-info-dim:     rgba(6, 182, 212, 0.1);
-
-  --tier-splus:  #ffd700;
-  --tier-s:      #ff8c00;
-  --tier-aplus:  #00c8ff;
-  --tier-a:      #3ddc84;
-  --tier-aminus: #7ecf7e;
-  --tier-bplus:  #a8a8c8;
-  --tier-b:      #808098;
-  --tier-c:      #606078;
-
-  --verdict-perfect:    #00ff88;
-  --verdict-normal:     #76b900;
-  --verdict-slow:       #ffaa00;
-  --verdict-spiky:      #ff6600;
-  --verdict-veryslow:   #ff4444;
-  --verdict-overloaded: #ff2222;
-  --verdict-unstable:   #cc0000;
-  --verdict-notactive:  #555570;
-  --verdict-pending:    #444460;
-
-  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  --font-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
-
-  --header-h: 60px;
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
-  --radius-xl: 8px;
-
-  --shadow-sm:   none;
-  --shadow-md:   none;
-  --shadow-lg:   none;
-  --shadow-glow: none;
-
-  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
-  --transition-fast: 150ms var(--ease-out);
-  --transition-medium: 250ms var(--ease-out);
-  --transition-slow: 400ms var(--ease-out);
-}
-
-/* ─── Light Theme ─── */
-[data-theme="light"] {
-  --color-bg:           #ffffff;
-  --color-bg-elevated:  #ffffff;
-  --color-bg-card:      #ffffff;
-  --color-bg-hover:     #fafafa;
-  --color-bg-active:    #f0f0f0;
-  --color-surface:      #fafafa;
-  --color-border:       #eaeaea;
-  --color-border-hover: #d5d5d5;
-  --color-text:         #000000;
-  --color-text-muted:   #666666;
-  --color-text-dim:     #999999;
-  --color-accent:       #000000;
-  --color-accent-hover: #333333;
-  --color-accent-glow:  rgba(0, 0, 0, 0.05);
-  --color-accent-dim:   rgba(0, 0, 0, 0.02);
-
-  /* 📖 Bright neon colors that look great on black become unreadable on white.
-     📖 We swap them for darker, AA-contrast equivalents in light mode. The
-     📖 hex values are picked to stay visually similar to the dark variant
-     📖 (still "green" / "cyan" / "gold") while passing WCAG AA on #fff. */
-  --color-success:      #008f4d;     /* was #00ff88 (neon) */
-  --color-warning:      #b86b00;     /* was #ffaa00 (neon amber) */
-  --color-danger:       #c8143a;     /* was #ff4444 (neon red) */
-  --color-info:         #0e7490;     /* was #06b6d4 (neon cyan) */
-  --color-danger-dim:   rgba(200, 20, 58, 0.08);
-  --color-warning-dim:  rgba(184, 107, 0, 0.08);
-  --color-success-dim:  rgba(0, 143, 77, 0.08);
-  --color-info-dim:     rgba(14, 116, 144, 0.08);
-
-  /* 📖 Tier + verdict palette: shift toward darker, more saturated variants
-     📖 so badges stay legible on white. The original "neon" feel is dropped
-     📖 in favor of "saturated-but-deep" colors that pass contrast. */
-  --tier-splus:  #b08800;     /* was #ffd700 (gold) */
-  --tier-s:      #c45a00;     /* was #ff8c00 (dark orange) */
-  --tier-aplus:  #0073a8;     /* was #00c8ff (neon cyan) */
-  --tier-a:      #1f7a3e;     /* was #3ddc84 (mid green) */
-  --tier-aminus: #2f7a2f;     /* was #7ecf7e (light green) */
-  --tier-bplus:  #5a5a8a;     /* was #a8a8c8 (lavender) */
-  --tier-b:      #555566;     /* was #808098 (gray-blue) */
-  --tier-c:      #6a6a7a;     /* was #606078 (slate) */
-
-  --verdict-perfect:    #008f4d;     /* was #00ff88 */
-  --verdict-normal:     #4a7a00;     /* was #76b900 */
-  --verdict-slow:       #b86b00;     /* was #ffaa00 */
-  --verdict-spiky:      #c45000;     /* was #ff6600 */
-  --verdict-veryslow:   #c8143a;     /* was #ff4444 */
-  --verdict-overloaded: #b8101f;     /* was #ff2222 */
-  --verdict-unstable:   #990000;     /* was #cc0000 */
-  --verdict-notactive:  #6a6a7a;     /* was #555570 */
-  --verdict-pending:    #6a6a8a;     /* was #444460 */
-
-  --shadow-sm:   none;
-  --shadow-md:   none;
-  --shadow-lg:   none;
-}
-
-/* ─── 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: 16px;
-  scroll-behavior: smooth;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-  font-family: var(--font-sans);
-  background: var(--color-bg);
-  color: var(--color-text);
-  min-height: 100vh;
-  overflow-x: hidden;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-}
-
-a { color: var(--color-accent); text-decoration: none; }
-a:hover { color: var(--color-accent-hover); }
-code { font-family: var(--font-mono); font-size: 14px; background: var(--color-surface); padding: 2px 6px; border-radius: 4px; }
-
-/* ─── Background Effects ─── */
-[data-theme="light"] .app-shell {
-  background-image:
-    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
-}
-[data-theme="light"] .app-shell::before {
-  background: radial-gradient(circle, rgba(0, 143, 77, 0.03) 0%, transparent 70%);
-}
-
-/* ─── App Layout ─── */
-.app-shell {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  width: 100%;
-  position: relative;
-  z-index: 1;
-  background-color: var(--color-bg);
-  /* background grid effect */
-  background-image: 
-    linear-gradient(rgba(192, 242, 12, 0.012) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(192, 242, 12, 0.012) 1px, transparent 1px);
-  background-size: 50px 50px;
-  background-position: center top;
-}
-
-.app-shell::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 25%;
-  width: 600px;
-  height: 600px;
-  background: radial-gradient(circle, rgba(192, 242, 12, 0.03) 0%, transparent 70%);
-  z-index: -1;
-  pointer-events: none;
-}
-
-.app-content {
-  flex: 1;
-  position: relative;
-  z-index: 1;
-  min-height: calc(100vh - var(--header-h));
-  display: flex;
-  flex-direction: column;
-}
-
-.view {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-}
-
-/* 📖 Dashboard-only: bound the main box to the viewport height (minus the
-   📖 global header) so the model table scrolls INTERNALLY inside .scrollInner
-   📖 instead of growing the whole page. That internal scroll is what lets the
-   📖 green <thead> header be position:sticky and stay pinned while you scroll
-   📖 190+ model rows. Scoped to the dashboard only (main.dashboardView has
-   📖 higher specificity than the shared .view rule, so flex:none + the capped
-   📖 height reliably win). Settings / Analytics / Playground keep their layout. */
-main.dashboardView {
-  flex: none;
-  height: calc(100vh - var(--header-h));
-  height: calc(100dvh - var(--header-h));
-  min-height: 0;
-  overflow: hidden;
-}
-
-.update-warning-banner {
-  position: sticky;
-  top: var(--header-h, 60px);
-  z-index: 90;
-  padding: 10px 18px;
-  background: var(--color-danger);
-  color: #fff;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
-  font-weight: 800;
-  font-size: 15px;
-  letter-spacing: 0.01em;
-  text-align: center;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
-}
-
-/* ─── Scrollbar ─── */
-::-webkit-scrollbar { width: 8px; height: 8px; }
-::-webkit-scrollbar-track { background: var(--color-bg); }
-::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
-::-webkit-scrollbar-thumb:hover { background: var(--color-text-dim); }
-::-webkit-scrollbar-corner { background: var(--color-bg); }
-
-/* ─── Responsive ─── */
-@media (max-width: 768px) {
-  /* 📖 No sidebar to collapse on small viewports — the header itself collapses
-     📖 (see Header.module.css). The model table keeps its 100% width. */
-}
-
-/* ─── Full-page horizontal/vertical scroll layout ─── */
-.app-content {
-  flex: 1;
-  position: relative;
-  z-index: 1;
-  min-height: calc(100vh - var(--header-h));
-  display: flex;
-  flex-direction: column;
-}
-
-.view {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-}

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

@@ -1,28 +0,0 @@
-/**
- * @file web/src/hooks/urlState.constants.js
- * @description URL param validation tables — extracted from useUrlState for testability.
- * 📖 Keep these in sync with src/tui/tui-state.js TIER_CYCLE / VERDICT_CYCLE /
- * 📖 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'])
-const SORT_VALUES = new Set([
-  'mood', 'idx', 'tier', 'sweScore', 'ctx', 'label', 'origin',
-  'latestPing', 'avg', 'condition', 'verdict', 'stability', 'uptime',
-  'aiLatency', 'tps', 'trend',
-])
-const VIEW_VALUES = new Set(['dashboard', 'settings', 'analytics', 'recommend', 'router', 'help', 'changelog', 'playground', 'install-endpoints', 'installed-models'])
-const DIR_VALUES = new Set(['asc', 'desc'])
-const TOOL_MODE_VALUES = new Set(TOOL_MODE_ORDER)
-
-export {
-  TIER_VALUES as VALID_TIERS,
-  STATUS_VALUES as VALID_STATUS,
-  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/useChangelog.js

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