free-coding-models 0.5.32 → 0.5.35

package/web/src/components/palette/CommandPalette.jsx

@@ -37,14 +37,14 @@ const PING_MODE_CYCLE = ['speed', 'normal', 'slow', 'forced']
 // 📖 has a few commands the TUI doesn't). They are appended to the TUI registry
 // 📖 after a `Web` separator so the two surfaces stay easy to compare.
 function buildWebEntries(deps) {
-  const { onCycleTheme, onResetView, onSetPingMode, onOpenChangelog, theme, pingMode, modelsCount, onExport } = deps
+  const { onCycleTheme, onResetView, onSetPingMode, theme, pingMode, modelsCount, onExport, onNavigate } = deps
   const web = [
-    // Pages (open as modals)
-    { id: 'page.help', section: 'page', label: 'Open Help', keywords: ['help', 'shortcuts', 'reference'], run: () => deps.onOpenHelp?.() },
-    { id: 'page.changelog', section: 'page', label: 'Open Changelog', keywords: ['changelog', 'release', 'history', 'version'], run: () => onOpenChangelog?.() },
-    { id: 'page.playground', section: 'page', label: 'Open Playground', keywords: ['playground', 'chat', 'try', 'prompt', 'router'], run: () => deps.onOpenPlayground?.() },
-    { id: 'page.install-endpoints', section: 'page', label: 'Open Install Endpoints (M4)', keywords: ['install', 'endpoint', 'tool', 'configure'], disabled: true },
-    { id: 'page.installed-models', section: 'page', label: 'Open Installed Models (M4)', keywords: ['installed', 'models', 'tools'], disabled: true },
+    // Pages
+    { id: 'page.help', section: 'page', label: 'Open Help', keywords: ['help', 'shortcuts', 'reference'], run: () => onNavigate?.('help') },
+    { id: 'page.changelog', section: 'page', label: 'Open Changelog', keywords: ['changelog', 'release', 'history', 'version'], run: () => onNavigate?.('changelog') },
+    { id: 'page.playground', section: 'page', label: 'Open Playground', keywords: ['playground', 'chat', 'try', 'prompt', 'router'], run: () => onNavigate?.('playground') },
+    { id: 'page.install-endpoints', section: 'page', label: 'Open Install Endpoints', keywords: ['install', 'endpoint', 'tool', 'configure'], run: () => onNavigate?.('install-endpoints') },
+    { id: 'page.installed-models', section: 'page', label: 'Open Installed Models', keywords: ['installed', 'models', 'tools'], run: () => onNavigate?.('installed-models') },
 
     // Theme
     { id: 'action.theme.cycle', section: 'action', label: `Cycle theme (current: ${theme})`, keywords: ['theme', 'dark', 'light', 'auto'], run: onCycleTheme },
@@ -92,7 +92,7 @@ export default function CommandPalette({
     })
     const webEntries = buildWebEntries({
       onCycleTheme, onResetView, onSetPingMode,
-      onOpenChangelog, onOpenHelp, theme, pingMode, modelsCount: models?.length ?? 0, onExport,
+      theme, pingMode, modelsCount: models?.length ?? 0, onExport, onNavigate,
     })
     // 📖 Update banner entry (only when an update is available) — mirrors
     // 📖 the TUI palette's "auto-prepended when newer version known" rule.
@@ -177,12 +177,12 @@ export default function CommandPalette({
     // 📖 ships in M3), we route the user to the right header menu.
     const id = item.id
     if (id === 'open-settings') { onNavigate?.('settings'); onClose(); return }
-    if (id === 'open-help') { onOpenHelp?.(); onClose(); return }
-    if (id === 'open-changelog') { onOpenChangelog?.(); onClose(); return }
-    if (id === 'open-recommend') { onToast?.('Recommend arrives in M3', 'info'); onClose(); return }
-    if (id === 'open-router-dashboard') { onToast?.('Router dashboard arrives in M4', 'info'); onClose(); return }
-    if (id === 'open-installed-models') { onToast?.('Installed Models arrives in M4', 'info'); onClose(); return }
-    if (id === 'open-install-endpoints') { onToast?.('Install Endpoints arrives in M4', 'info'); onClose(); return }
+    if (id === 'open-help') { onNavigate?.('help'); onClose(); return }
+    if (id === 'open-changelog') { onNavigate?.('changelog'); onClose(); return }
+    if (id === 'open-recommend') { onNavigate?.('recommend'); onClose(); return }
+    if (id === 'open-router-dashboard') { onNavigate?.('router'); onClose(); return }
+    if (id === 'open-installed-models') { onNavigate?.('installed-models'); onClose(); return }
+    if (id === 'open-install-endpoints') { onNavigate?.('install-endpoints'); onClose(); return }
     if (id === 'action-update-now') { onRunUpdate?.(); onClose(); return }
     if (id === 'action-cycle-theme') { onCycleTheme?.(); onClose(); return }
     if (id === 'action-reset-view') { onResetView?.(); onClose(); return }

package/web/src/components/playground/PlaygroundView.module.css

@@ -5,27 +5,26 @@
  */
 
 .overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 200;
-  background: rgba(0, 0, 0, 0.6);
   display: flex;
-  align-items: center;
-  justify-content: center;
-  animation: fadeIn 0.15s ease;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  padding: 24px;
 }
 
 .modal {
-  background: var(--bg-primary, #0f0f17);
-  border: 1px solid var(--border, #1e1e2e);
+  background: var(--color-bg-card, #080908);
+  border: 1px solid var(--color-border, #161a16);
   border-radius: 12px;
-  width: 880px;
-  max-width: 96vw;
-  max-height: 90vh;
+  width: 100%;
+  max-width: 1000px;
+  margin: 0 auto;
+  flex: 1;
   display: flex;
   flex-direction: column;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
-  animation: slideUp 0.18s ease;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  min-height: 0;
 }
 
 @keyframes fadeIn {

package/web/src/components/recommend/RecommendView.module.css

@@ -1,24 +1,26 @@
 /** @file web/src/components/recommend/RecommendView.module.css */
 .backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 480;
   display: flex;
-  align-items: center;
-  justify-content: center;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  width: 100%;
   padding: 24px;
-  background: rgba(0, 0, 0, .64);
-  backdrop-filter: blur(4px);
 }
 .modal {
-  width: min(980px, 96vw);
-  max-height: min(820px, 94vh);
+  width: 100%;
+  max-width: 980px;
+  margin: 0 auto;
   overflow: auto;
   border: 1px solid var(--color-border);
   border-radius: 16px;
-  background: var(--color-bg-elevated);
+  background: var(--color-bg-card, #080908);
   color: var(--color-text);
-  box-shadow: 0 20px 60px rgba(0,0,0,.48);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
 }
 .header,
 .footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--color-border); }

package/web/src/components/router/RouterView.module.css

@@ -1,24 +1,24 @@
 .overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 200;
-  background: rgba(0, 0, 0, 0.6);
   display: flex;
-  align-items: center;
-  justify-content: center;
-  animation: fadeIn 0.15s ease;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  padding: 24px;
 }
 
 .modal {
-  background: var(--bg-primary, #0f0f17);
-  border: 1px solid var(--border, #1e1e2e);
+  background: var(--color-bg-card, #080908);
+  border: 1px solid var(--color-border, #161a16);
   border-radius: 12px;
-  width: 720px;
-  max-width: 95vw;
-  max-height: 85vh;
+  width: 100%;
+  max-width: 1000px;
+  margin: 0 auto;
+  flex: 1;
   display: flex;
   flex-direction: column;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  min-height: 0;
 }
 
 .header {

package/web/src/components/tools/ToolPicker.module.css

@@ -8,33 +8,46 @@
   align-items: center;
   gap: 4px;
 }
-.trigger,
-.cycle {
+.trigger {
   height: 30px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid var(--color-border);
-  background: var(--color-surface);
-  color: var(--color-text);
-  cursor: pointer;
-  transition: background 150ms, border-color 150ms, color 150ms;
-}
-.trigger {
   gap: 6px;
-  padding: 0 9px;
+  padding: 0 12px;
   border-radius: 6px;
-  font-size: 12px;
-  font-weight: 700;
+  font-size: 11px;
+  font-weight: 800;
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  background: var(--color-accent);
+  color: var(--color-bg);
+  border: 1px solid var(--color-accent);
+  cursor: pointer;
+  transition: all 150ms var(--ease-out);
 }
 .cycle {
+  height: 30px;
   width: 30px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  color: var(--color-text);
   border-radius: 6px;
+  cursor: pointer;
+  transition: all 150ms var(--ease-out);
+}
+.trigger:hover {
+  background: var(--color-accent-hover);
+  border-color: var(--color-accent-hover);
+  color: var(--color-bg);
 }
-.trigger:hover,
 .cycle:hover {
   background: var(--color-bg-hover);
-  border-color: var(--color-accent);
+  border-color: var(--color-border-hover);
   color: var(--color-accent);
 }
 .emoji { font-size: 14px; line-height: 1; }

package/web/src/global.css

@@ -8,24 +8,24 @@
 
 /* ─── CSS Custom Properties (Design Tokens) ─── */
 :root {
-  --color-brand:        #76b900;
-  --color-bg:           #000000;
-  --color-bg-elevated:  #0a0a0a;
-  --color-bg-card:      #0a0a0a;
-  --color-bg-hover:     #161616;
-  --color-bg-active:    #222222;
-  --color-surface:      #111111;
-  --color-border:       #262626;
-  --color-border-hover: #404040;
+  --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:   #888888;
-  --color-text-dim:     #444444;
+  --color-text-muted:   #8fa08f;
+  --color-text-dim:     #455245;
 
-  --color-accent:       #ffffff;
-  --color-accent-hover: #eaeaea;
-  --color-accent-glow:  rgba(255, 255, 255, 0.1);
-  --color-accent-dim:   rgba(255, 255, 255, 0.05);
+  --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);
@@ -160,7 +160,7 @@ textarea:focus-visible {
 }
 
 html {
-  font-size: 14px;
+  font-size: 16px;
   scroll-behavior: smooth;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -179,23 +179,16 @@ body {
 
 a { color: var(--color-accent); text-decoration: none; }
 a:hover { color: var(--color-accent-hover); }
-code { font-family: var(--font-mono); font-size: 12px; background: var(--color-surface); padding: 2px 6px; border-radius: 4px; }
+code { font-family: var(--font-mono); font-size: 14px; background: var(--color-surface); padding: 2px 6px; border-radius: 4px; }
 
 /* ─── Background Effects ─── */
-.bg-grid {
-  display: none;
-}
-
-.bg-glow {
-  display: none;
-}
-
-
-[data-theme="light"] .bg-glow { opacity: 0.12; }
-[data-theme="light"] .bg-grid {
+[data-theme="light"] .app-shell {
   background-image:
-    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
+    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 ─── */
@@ -207,6 +200,25 @@ code { font-family: var(--font-mono); font-size: 12px; background: var(--color-s
   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 {
@@ -225,6 +237,21 @@ code { font-family: var(--font-mono); font-size: 12px; background: var(--color-s
   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);
@@ -234,7 +261,7 @@ code { font-family: var(--font-mono); font-size: 12px; background: var(--color-s
   color: #fff;
   border-bottom: 1px solid rgba(255, 255, 255, 0.22);
   font-weight: 800;
-  font-size: 13px;
+  font-size: 15px;
   letter-spacing: 0.01em;
   text-align: center;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);

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

@@ -14,7 +14,7 @@ const SORT_VALUES = new Set([
   'latestPing', 'avg', 'condition', 'verdict', 'stability', 'uptime',
   'aiLatency', 'tps', 'trend',
 ])
-const VIEW_VALUES = new Set(['dashboard', 'settings', 'analytics', 'recommend', 'router', 'help', 'changelog'])
+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)
 

package/web/src/hooks/useUrlState.js

@@ -31,7 +31,17 @@ function parseUrlParams() {
   if (typeof window === 'undefined') return null
   const params = new URLSearchParams(window.location.search)
   const out = {}
-  if (params.has('view') && VALID_VIEWS.has(params.get('view'))) out.view = params.get('view')
+  
+  // 📖 Read pathname as the view slug
+  const pathname = window.location.pathname.replace(/^\/|\/$/g, '')
+  if (pathname && VALID_VIEWS.has(pathname)) {
+    out.view = pathname
+  } else if (params.has('view') && VALID_VIEWS.has(params.get('view'))) {
+    out.view = params.get('view')
+  } else {
+    out.view = 'dashboard'
+  }
+
   if (params.has('tier') && VALID_TIERS.has(params.get('tier'))) out.tier = params.get('tier')
   if (params.has('status') && VALID_STATUS.has(params.get('status'))) out.status = params.get('status')
   if (params.has('provider')) out.provider = params.get('provider')
@@ -71,10 +81,16 @@ export function buildUrlParams(state) {
 function writeUrl(state) {
   if (typeof window === 'undefined') return
   const params = buildUrlParams(state)
+  
+  // 📖 Extract view from the search params so it becomes the pathname slug instead of a search param!
+  const view = params.get('view') || 'dashboard'
+  params.delete('view')
+
   const search = params.toString()
+  const path = view !== 'dashboard' ? `/${view}` : '/'
   const newUrl = search
-    ? `${window.location.pathname}?${search}${window.location.hash}`
-    : `${window.location.pathname}${window.location.hash}`
+    ? `${path}?${search}${window.location.hash}`
+    : `${path}${window.location.hash}`
   // 📖 replaceState (not pushState) so back/forward don't fill up with
   // 📖 every keystroke. The current URL still updates visibly.
   window.history.replaceState({}, '', newUrl)