free-coding-models 0.5.0 → 0.5.4

package/web/src/components/layout/Header.module.css

@@ -1,39 +1,179 @@
+/**
+ * @file web/src/components/layout/Header.module.css
+ * @description Layout refactor (M1): the left sidebar is gone, so the header
+ * is now the only navigation rail. It hosts the brand mark, primary nav
+ * buttons, search, and right-side actions (⌘K, AI Latency, theme, export).
+ *
+ * 📖 The model table underneath is 100% of the viewport width — the header
+ * uses the same width, and nav items can collapse into a kebab at narrow widths.
+ */
+
 .header {
   position: sticky;
   top: 0;
   z-index: 100;
-  height: 60px;
+  height: var(--header-h, 60px);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 24px;
-  gap: 20px;
+  padding: 0 20px;
+  gap: 16px;
   background: var(--color-bg-card);
   backdrop-filter: blur(20px) saturate(1.5);
   -webkit-backdrop-filter: blur(20px) saturate(1.5);
   border-bottom: 1px solid var(--color-border);
+  width: 100%;
+}
+
+.left {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-shrink: 0;
+}
+
+.center {
+  flex: 1;
+  max-width: 480px;
+  min-width: 0;
 }
-.left { display: flex; align-items: center; gap: 12px; }
-.center { flex: 1; max-width: 480px; }
-.right { display: flex; align-items: center; gap: 10px; }
 
-.logo { display: flex; align-items: center; gap: 8px; }
-.logoIcon { font-size: 22px; }
+.right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+/* ─── Brand ─── */
+.logo { display: flex; align-items: center; gap: 6px; }
+.logoIcon {
+  color: var(--color-brand);
+  font-family: var(--font-mono);
+  font-size: 20px;
+  font-weight: 900;
+  display: flex;
+  align-items: center;
+}
 .logoText {
-  font-size: 16px; font-weight: 700;
-  background: linear-gradient(135deg, var(--color-accent), #06b6d4);
-  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+  font-size: 14px; font-weight: 700;
+  color: var(--color-text);
+  display: flex;
+  align-items: center;
 }
+.logoTextHighlight { color: var(--color-brand); }
 .version {
-  font-size: 11px; font-weight: 500; font-family: var(--font-mono);
+  font-size: 10px; font-weight: 500; font-family: var(--font-mono);
   color: var(--color-text-dim); background: var(--color-accent-dim);
-  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--color-border);
+  padding: 2px 6px; border-radius: 999px; border: 1px solid var(--color-border);
 }
 
+/* ─── Primary nav (replaces the sidebar) ─── */
+.nav {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: 8px;
+  padding-left: 12px;
+  border-left: 1px solid var(--color-border);
+  height: 36px;
+}
+
+.navBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 30px;
+  padding: 0 10px;
+  font-size: 12px;
+  font-weight: 600;
+  font-family: var(--font-sans);
+  color: var(--color-text-muted);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 150ms, color 150ms, border-color 150ms;
+  white-space: nowrap;
+}
+.navBtn:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-text);
+}
+.navBtnActive {
+  background: var(--color-accent-dim);
+  color: var(--color-accent);
+  border-color: var(--color-border);
+  font-weight: 700;
+}
+.navBtnActive:hover {
+  background: var(--color-accent-dim);
+  color: var(--color-accent);
+}
+
+/* 📖 "Coming in M2" badge — small inline label that shows the menu structure
+   📖 is honest even before those milestones land. */
+.comingBadge {
+  font-size: 9px;
+  font-weight: 700;
+  font-family: var(--font-mono);
+  color: var(--color-text-dim);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  padding: 1px 4px;
+  border-radius: 3px;
+  margin-left: 2px;
+  line-height: 1;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+/* ─── Overflow menu (kebab) ─── */
+.menuWrap { position: relative; }
+.menuTrigger {
+  width: 30px;
+  padding: 0;
+  justify-content: center;
+}
+.menuPopover {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  min-width: 200px;
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: 4px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
+  z-index: 200;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.menuItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--color-text);
+  background: transparent;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  text-align: left;
+  transition: background 100ms;
+}
+.menuItem:hover { background: var(--color-bg-hover); }
+.menuItem > span:first-of-type { flex: 1; }
+
+/* ─── Search ─── */
 .searchBar {
   display: flex; align-items: center; gap: 8px;
   background: var(--color-surface); border: 1px solid var(--color-border);
-  border-radius: 10px; padding: 0 12px; height: 36px;
+  border-radius: 8px; padding: 0 12px; height: 34px;
   transition: border-color 150ms, box-shadow 150ms;
 }
 .searchBar:focus-within {
@@ -44,14 +184,11 @@
 .searchInput {
   flex: 1; background: none; border: none; outline: none;
   color: var(--color-text); font-size: 13px; font-family: var(--font-sans);
+  min-width: 0;
 }
 .searchInput::placeholder { color: var(--color-text-dim); }
-.kbd {
-  font-size: 10px; font-family: var(--font-mono); color: var(--color-text-dim);
-  background: var(--color-bg); border: 1px solid var(--color-border);
-  padding: 2px 6px; border-radius: 4px; flex-shrink: 0;
-}
 
+/* ─── Right-side buttons ─── */
 .iconBtn {
   display: inline-flex; align-items: center; justify-content: center;
   padding: 6px 8px; border: 1px solid var(--color-border); border-radius: 6px;
@@ -59,15 +196,76 @@
   cursor: pointer; font-size: 16px; transition: all 150ms;
 }
 .iconBtn:hover { background: var(--color-bg-hover); border-color: var(--color-border-hover); }
-.primaryBtn {
+
+/* 📖 ⌘K button — the only global keyboard shortcut in the Web UI.
+   📖 Tinted accent so users can spot it instantly. */
+.cmdkBtn {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 0 10px; height: 30px;
+  border: 1px solid var(--color-border); border-radius: 6px;
+  background: var(--color-surface); color: var(--color-text);
+  cursor: pointer; font-size: 12px; font-weight: 600;
+  font-family: var(--font-mono);
+  transition: all 150ms;
+}
+.cmdkBtn:hover {
+  border-color: var(--color-accent);
+  background: var(--color-bg-hover);
+}
+.cmdkLabel { font-size: 11px; letter-spacing: 0.5px; }
+
+/* ─── AI Latency benchmark button (reused from before) ─── */
+.benchmarkBtn {
   display: inline-flex; align-items: center; gap: 6px;
-  padding: 6px 14px; font-size: 13px; font-weight: 600;
-  border: 1px solid var(--color-accent); border-radius: 6px;
-  background: var(--color-accent); color: #000; cursor: pointer;
-  font-family: var(--font-sans); transition: all 150ms;
+  padding: 0 12px; height: 30px; font-size: 12px; font-weight: 700;
+  border: 1px solid var(--color-border); border-radius: 6px;
+  background: var(--color-surface); color: var(--color-text);
+  cursor: pointer; font-family: var(--font-mono); transition: all 150ms;
+}
+.benchmarkBtn:hover {
+  border-color: #00ff88; color: #00ff88; background: rgba(0, 255, 136, 0.08);
+}
+.benchmarkActive {
+  border-color: #00ff88 !important; color: #00ff88 !important;
+  background: rgba(0, 255, 136, 0.12) !important;
+  cursor: not-allowed;
+}
+.benchmarkRunning { display: inline-flex; align-items: center; gap: 6px; }
+@keyframes spin { to { transform: rotate(360deg); } }
+.spinner {
+  display: inline-block; width: 10px; height: 10px;
+  border: 2px solid rgba(0, 255, 136, 0.3); border-top-color: #00ff88;
+  border-radius: 50%; animation: spin 0.8s linear infinite; flex-shrink: 0;
 }
-.primaryBtn:hover { background: var(--color-accent-hover); }
 
+/* 📖 Light theme: deep green for the benchmark button outline/hover and
+   📖 the spinner ring so they stay visible on the white header bar. */
+:global([data-theme="light"]) .benchmarkBtn:hover {
+  border-color: #008f4d; color: #008f4d; background: rgba(0, 143, 77, 0.06);
+}
+:global([data-theme="light"]) .benchmarkActive {
+  border-color: #008f4d !important; color: #008f4d !important;
+  background: rgba(0, 143, 77, 0.10) !important;
+}
+:global([data-theme="light"]) .spinner {
+  border-color: rgba(0, 0, 0, 0.1);
+  border-top-color: #008f4d;
+}
+
+/* 📖 Responsive — at narrow widths the nav collapses into the kebab menu.
+   📖 We never reintroduce a left sidebar. The table keeps 100% width. */
+@media (max-width: 1024px) {
+  .navBtn > span:not(.comingBadge) { display: none; }
+  .navBtn { padding: 0 8px; }
+  .center { max-width: 320px; }
+}
 @media (max-width: 768px) {
   .center { display: none; }
+  .logoText { display: none; }
+  .cmdkLabel { display: none; }
+  .benchmarkBtn > span:not(.benchmarkRunning) { display: none; }
+}
+@media (max-width: 560px) {
+  .version { display: none; }
+  .navBtn { padding: 0 6px; }
 }

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

@@ -0,0 +1,146 @@
+/**
+ * @file web/src/components/palette/CommandPalette.jsx
+ * @description ⌘K / Ctrl+P command palette — M1 placeholder, M2 ships the full version.
+ * 📖 M1 keeps the modal opening, the ⌘K wiring, and a small launcher that exposes
+ * 📖 the most-used actions (cycle theme, reset view, navigate views, change ping mode).
+ * 📖 M2 will replace this with the TUI-aligned palette that consumes
+ * 📖 `src/tui/command-palette.js` via `getCommandPaletteSnapshot()` for full parity.
+ *
+ * @functions
+ *   → CommandPalette — main modal component
+ */
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { IconSearch, IconCommand, IconBolt, IconArrowRight, IconArrowsExchange } from '@tabler/icons-react'
+import styles from './CommandPalette.module.css'
+
+const PING_MODE_CYCLE = ['speed', 'normal', 'slow', 'forced']
+
+export default function CommandPalette({
+  onClose, onNavigate, onCycleTheme, onResetView,
+  onSetPingMode, onToast, onExport,
+  currentView, theme, pingMode,
+}) {
+  const [query, setQuery] = useState('')
+  const [cursor, setCursor] = useState(0)
+  const inputRef = useRef(null)
+  const listRef = useRef(null)
+
+  // 📖 Static command list for M1 — these are the universal "no matter what view
+  // 📖 I'm in, this is what I want" actions. M2 will replace this with the TUI
+  // 📖 registry import.
+  const commands = useMemo(() => {
+    const items = [
+      { id: 'view.dashboard',   label: 'Go to Dashboard',     icon: IconArrowRight, run: () => onNavigate('dashboard') },
+      { id: 'view.settings',    label: 'Go to Settings',      icon: IconArrowRight, run: () => onNavigate('settings') },
+      { id: 'view.analytics',   label: 'Go to Analytics',     icon: IconArrowRight, run: () => onNavigate('analytics') },
+      { id: 'view.recommend',   label: 'Open Smart Recommend (coming in M3)', icon: IconArrowRight, disabled: true },
+      { id: 'view.router',      label: 'Open Router Dashboard (coming in M4)', icon: IconArrowRight, disabled: true },
+      { id: 'view.help',        label: 'Open Help (coming in M2)', icon: IconArrowRight, disabled: true },
+      { id: 'view.changelog',   label: 'Open Changelog (coming in M2)', icon: IconArrowRight, disabled: true },
+      { id: 'action.cycle-theme', label: `Cycle theme (current: ${theme})`, icon: IconArrowsExchange, run: onCycleTheme },
+      { id: 'action.reset-view',  label: 'Reset view (filters + sort)', icon: IconArrowsExchange, run: onResetView },
+      { id: 'action.ping.speed',  label: 'Ping mode → Speed (2s)',  icon: IconBolt, run: () => onSetPingMode('speed') },
+      { id: 'action.ping.normal', label: 'Ping mode → Normal (10s)', icon: IconBolt, run: () => onSetPingMode('normal') },
+      { id: 'action.ping.slow',   label: 'Ping mode → Slow (30s)',   icon: IconBolt, run: () => onSetPingMode('slow') },
+      { id: 'action.ping.forced', label: 'Ping mode → Forced (4s)',  icon: IconBolt, run: () => onSetPingMode('forced') },
+      { id: 'action.export',      label: 'Export models…', icon: IconArrowRight, run: onExport },
+    ]
+    return items
+  }, [onNavigate, onCycleTheme, onResetView, onSetPingMode, onExport, theme])
+
+  // 📖 Fuzzy filter: substring match (case-insensitive). Good enough for M1's small set.
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase()
+    if (!q) return commands
+    return commands.filter((cmd) => cmd.label.toLowerCase().includes(q))
+  }, [commands, query])
+
+  // 📖 Focus the search input on open.
+  useEffect(() => {
+    inputRef.current?.focus()
+  }, [])
+
+  // 📖 Keyboard handler — Esc, arrows, Enter.
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === 'Escape') { e.preventDefault(); onClose(); return }
+      if (e.key === 'ArrowDown') {
+        e.preventDefault()
+        setCursor((c) => Math.min(filtered.length - 1, c + 1))
+        return
+      }
+      if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        setCursor((c) => Math.max(0, c - 1))
+        return
+      }
+      if (e.key === 'Enter') {
+        e.preventDefault()
+        const item = filtered[cursor]
+        if (item && !item.disabled) {
+          item.run?.()
+          onClose()
+        } else if (item?.disabled) {
+          onToast?.(`${item.label} is not available yet.`, 'info')
+        }
+      }
+    }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [filtered, cursor, onClose, onToast])
+
+  // 📖 Reset cursor when query changes.
+  useEffect(() => { setCursor(0) }, [query])
+
+  return (
+    <div className={styles.backdrop} onClick={onClose}>
+      <div className={styles.modal} onClick={(e) => e.stopPropagation()}>
+        <div className={styles.searchRow}>
+          <IconSearch size={16} stroke={1.5} className={styles.searchIcon} />
+          <input
+            ref={inputRef}
+            className={styles.input}
+            placeholder="Type a command…"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            autoComplete="off"
+          />
+          <span className={styles.kbd}><IconCommand size={10} stroke={1.5} />K</span>
+        </div>
+
+        <ul className={styles.list} ref={listRef} role="listbox">
+          {filtered.length === 0 && (
+            <li className={styles.empty}>No matching command.</li>
+          )}
+          {filtered.map((cmd, idx) => {
+            const Icon = cmd.icon
+            return (
+              <li
+                key={cmd.id}
+                className={`${styles.item} ${idx === cursor ? styles.itemActive : ''} ${cmd.disabled ? styles.itemDisabled : ''}`}
+                onClick={() => {
+                  if (cmd.disabled) { onToast?.(`${cmd.label} is not available yet.`, 'info'); return }
+                  cmd.run?.()
+                  onClose()
+                }}
+                onMouseEnter={() => setCursor(idx)}
+                role="option"
+                aria-selected={idx === cursor}
+              >
+                <Icon size={14} stroke={1.5} className={styles.itemIcon} />
+                <span className={styles.itemLabel}>{cmd.label}</span>
+                {idx === cursor && <span className={styles.itemEnter}>↵</span>}
+              </li>
+            )
+          })}
+        </ul>
+
+        <div className={styles.footer}>
+          <span><kbd>↑↓</kbd> navigate</span>
+          <span><kbd>↵</kbd> select</span>
+          <span><kbd>Esc</kbd> close</span>
+        </div>
+      </div>
+    </div>
+  )
+}

package/web/src/components/palette/CommandPalette.module.css

@@ -0,0 +1,121 @@
+/**
+ * @file web/src/components/palette/CommandPalette.module.css
+ * @description Styles for the ⌘K command palette modal — M1 placeholder version.
+ */
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  z-index: 500;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 12vh;
+}
+
+.modal {
+  width: min(560px, 92vw);
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border-hover);
+  border-radius: 14px;
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  max-height: 70vh;
+  overflow: hidden;
+}
+
+.searchRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--color-border);
+}
+.searchIcon { color: var(--color-text-dim); flex-shrink: 0; }
+.input {
+  flex: 1;
+  background: none;
+  border: none;
+  outline: none;
+  color: var(--color-text);
+  font-size: 15px;
+  font-family: var(--font-sans);
+}
+.input::placeholder { color: var(--color-text-dim); }
+.kbd {
+  font-size: 10px;
+  font-family: var(--font-mono);
+  color: var(--color-text-dim);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  padding: 2px 6px;
+  border-radius: 4px;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 6px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 12px;
+  border-radius: 7px;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--color-text);
+  transition: background 80ms;
+  user-select: none;
+}
+.itemActive { background: var(--color-accent-dim); }
+.itemDisabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.itemDisabled:hover { background: transparent; }
+.itemIcon { color: var(--color-text-muted); flex-shrink: 0; }
+.itemLabel { flex: 1; }
+.itemEnter {
+  font-size: 11px;
+  color: var(--color-text-dim);
+  font-family: var(--font-mono);
+}
+
+.empty {
+  padding: 20px;
+  text-align: center;
+  color: var(--color-text-dim);
+  font-size: 13px;
+}
+
+.footer {
+  display: flex;
+  gap: 16px;
+  padding: 8px 16px;
+  border-top: 1px solid var(--color-border);
+  font-size: 11px;
+  color: var(--color-text-dim);
+  background: var(--color-bg-card);
+}
+.footer 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;
+  margin-right: 3px;
+  font-size: 10px;
+}

package/web/src/components/settings/SettingsView.jsx

@@ -6,6 +6,7 @@
  * @functions SettingsView → main settings page component
  */
 import { useState, useEffect, useCallback } from 'react'
+import { IconSettings, IconPlug, IconCircleCheck, IconKey, IconEye, IconEyeOff, IconCopy, IconTrash } from '@tabler/icons-react'
 import styles from './SettingsView.module.css'
 import { maskKey } from '../../utils/format.js'
 
@@ -160,7 +161,10 @@ export default function SettingsView({ onToast }) {
   return (
     <div className={styles.page}>
       <div className={styles.pageHeader}>
-        <h1 className={styles.pageTitle}>⚙️ Provider Settings</h1>
+        <h1 className={styles.pageTitle}>
+          <IconSettings size={24} stroke={1.5} style={{ marginRight: 8, verticalAlign: 'middle' }} />
+          Provider Settings
+        </h1>
         <p className={styles.pageSubtitle}>
           Manage your API keys and provider configurations. Keys are stored locally in{' '}
           <code>~/.free-coding-models.json</code>
@@ -194,13 +198,23 @@ export default function SettingsView({ onToast }) {
           return (
             <div key={key} className={`${styles.card} ${isExpanded ? styles.cardExpanded : ''}`}>
               <div className={styles.cardHeader} onClick={() => toggleCard(key)}>
-                <div className={styles.cardIcon}>🔌</div>
+                <div className={styles.cardIcon}>
+                  <IconPlug size={20} stroke={1.5} />
+                </div>
                 <div className={styles.cardInfo}>
                   <div className={styles.cardName}>{p.name}</div>
                   <div className={styles.cardMeta}>{p.modelCount} models · {key}</div>
                 </div>
                 <span className={`${styles.cardStatus} ${p.hasKey ? styles.statusConfigured : styles.statusMissing}`}>
-                  {p.hasKey ? '✅ Active' : '🔑 No Key'}
+                  {p.hasKey ? (
+                    <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                      <IconCircleCheck size={14} stroke={1.5} /> Active
+                    </span>
+                  ) : (
+                    <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                      <IconKey size={14} stroke={1.5} /> No Key
+                    </span>
+                  )}
                 </span>
                 <span className={`${styles.toggleIcon} ${isExpanded ? styles.toggleIconExpanded : ''}`}>▼</span>
               </div>
@@ -216,10 +230,14 @@ export default function SettingsView({ onToast }) {
                         </span>
                         <div className={styles.keyDisplayActions}>
                           <button className={styles.actionBtn} onClick={() => toggleRevealKey(key)} title={isRevealed ? 'Hide' : 'Reveal'}>
-                            {isRevealed ? '🙈' : '👁️'}
+                            {isRevealed ? <IconEyeOff size={14} stroke={1.5} /> : <IconEye size={14} stroke={1.5} />}
+                          </button>
+                          <button className={styles.actionBtn} onClick={() => copyKey(key)} title="Copy">
+                            <IconCopy size={14} stroke={1.5} />
+                          </button>
+                          <button className={`${styles.actionBtn} ${styles.actionBtnDanger}`} onClick={() => deleteKey(key)} title="Delete Key">
+                            <IconTrash size={14} stroke={1.5} />
                           </button>
-                          <button className={styles.actionBtn} onClick={() => copyKey(key)} title="Copy">📋</button>
-                          <button className={`${styles.actionBtn} ${styles.actionBtnDanger}`} onClick={() => deleteKey(key)} title="Delete Key">🗑️</button>
                         </div>
                       </div>
                     </div>

package/web/src/components/settings/SettingsView.module.css

@@ -1,6 +1,5 @@
 .page {
   padding: 24px;
-  max-width: 900px;
 }
 
 .pageHeader {