free-coding-models 0.5.0 → 0.5.4

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

@@ -1,46 +1,333 @@
+/**
+ * @file web/src/components/dashboard/ModelTable.module.css
+ * @description Styles for ModelTable with TanStack Table — full horizontal scroll.
+ * 📖 Seamless layout: the container is flush with the page edges (no margin,
+ * 📖 no left/right border) so the table runs full-bleed below the sticky
+ * 📖 header + sticky FilterBar. Only the bottom border remains.
+ */
 .container {
   background: var(--color-bg-card);
-  backdrop-filter: blur(12px) saturate(1.5);
-  -webkit-backdrop-filter: blur(12px) saturate(1.5);
-  border: 1px solid var(--color-border);
-  border-radius: 16px;
-  overflow: hidden;
-  margin: 16px 0;
+  border-top: 0;
+  border-bottom: 1px solid var(--color-border);
+  border-left: 0;
+  border-right: 0;
+  border-radius: 0;
+  margin: 0;
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.table {
+  width: 100%;
+  min-width: 1200px;
+  border-collapse: collapse;
+  font-size: 12px;
+  border: 0;
 }
-.table { width: 100%; border-collapse: collapse; font-size: 13px; }
+
+/* ─── Header ─── */
 .th {
-  padding: 12px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase;
-  letter-spacing: 0.8px; color: var(--color-text-muted); background: var(--color-bg-elevated);
-  border-bottom: 1px solid var(--color-border); white-space: nowrap; user-select: none; cursor: default;
+  padding: 9px 8px;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--color-text-muted);
+  background: var(--color-bg-elevated);
+  border-bottom: 1px solid var(--color-border-hover);
+  border-right: 1px solid var(--color-border);
+  white-space: nowrap;
+  user-select: none;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  text-align: center;
+  /* 📖 Disable user-select on the whole header so dragging the resize handle
+     📖 never accidentally selects the cell text on rapid drags. */
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+.th:last-child { border-right: 0; }
+.th:hover { color: var(--color-accent); background: var(--color-bg-active); }
+
+/* 📖 Inner flex container: header label on the left, resize handle on the right.
+   📖 Letting the label shrink keeps the column tight when the user makes it narrow. */
+.thInner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  width: 100%;
+  min-width: 0;
+}
+.thLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+/* 📖 Resize handle: a 6px-wide grab zone on the right edge of every header.
+   📖 The visible bar is 2px wide and centered in the grab zone so users get
+   📖 generous hit-target without it looking like a hard line. */
+.resizeHandle {
+  flex-shrink: 0;
+  width: 6px;
+  height: 22px;
+  margin-left: 2px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: col-resize;
+  position: relative;
+  touch-action: none;
+  /* 📖 Stop the click from also triggering the header's sort handler. */
+  user-select: none;
+  -webkit-user-select: none;
+}
+.resizeHandle::after {
+  content: '';
+  display: block;
+  width: 2px;
+  height: 14px;
+  background: transparent;
+  border-radius: 1px;
+  transition: background 120ms var(--ease-out, ease);
+}
+.resizeHandle:hover::after,
+.resizeHandleActive::after {
+  background: var(--color-accent);
+}
+.resizeHandleActive {
+  cursor: col-resize;
+}
+/* 📖 While a column is actively resizing, highlight its entire header and freeze
+   📖 the cursor on the whole document so dragging off the handle still works. */
+.th:has(.resizeHandleActive) {
+  background: var(--color-bg-active);
+  color: var(--color-accent);
+}
+:global(.col-resizing) {
+  cursor: col-resize !important;
+  user-select: none !important;
+}
+
+/* 📖 Floating toolbar that appears only when the user has custom column widths.
+   📖 Sits at the top-right of the table area without pushing rows down. */
+.resizeToolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 6px 10px;
+  background: var(--color-bg-elevated);
+  border-bottom: 1px solid var(--color-border);
+  font-size: 11px;
+  color: var(--color-text-muted);
+  position: sticky;
+  top: 0;
+  z-index: 11;
+}
+.resizeToolbarHint {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  letter-spacing: 0.2px;
+}
+.resizeToolbarHint strong {
+  color: var(--color-text);
+  font-weight: 700;
+  font-family: var(--font-mono);
+}
+.resizeResetButton {
+  appearance: none;
+  background: transparent;
+  border: 1px solid var(--color-border-hover);
+  color: var(--color-text-muted);
+  padding: 3px 10px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 120ms var(--ease-out, ease), color 120ms var(--ease-out, ease), border-color 120ms var(--ease-out, ease);
+  white-space: nowrap;
+}
+.resizeResetButton:hover {
+  background: var(--color-bg-active);
+  color: var(--color-accent);
+  border-color: var(--color-accent);
+}
+.resizeResetButton:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 1px;
+}
+
+/* Center certain columns */
+.th:nth-child(6) { text-align: left; }   /* Model */
+.th:nth-child(7) { text-align: left; }   /* Provider */
+.th:nth-child(11) { text-align: left; } /* Verdict */
+
+/* Sort icons */
+.sortIcon   { opacity: 0.3; margin-left: 3px; font-size: 9px; }
+.sortIconActive { color: var(--color-accent); margin-left: 3px; font-size: 10px; font-weight: 800; }
+
+/* ─── Data cells ─── */
+.td {
+  padding: 7px 8px;
+  border-bottom: 1px solid var(--color-border);
+  border-right: 1px solid var(--color-border);
+  white-space: nowrap;
+}
+.td:last-child { border-right: 0; }
+.td:nth-child(6) { text-align: left; }   /* Model */
+.td:nth-child(7) { text-align: left; }   /* Provider */
+.td:nth-child(11) { text-align: left; } /* Verdict */
+
+/* ─── Row hover ─── */
+.table tbody tr {
+  cursor: pointer;
+  transition: background 100ms;
 }
-.th:hover { color: var(--color-accent); }
-.table td { padding: 10px 14px; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
-.table tbody tr { cursor: pointer; transition: background 150ms; }
 .table tbody tr:hover { background: var(--color-bg-hover); }
-.tdRank { text-align: center; font-family: var(--font-mono); font-weight: 600; color: var(--color-text-dim); }
+
+/* ─── Medal rows ─── */
 .rank1 td:first-child { border-left: 3px solid #ffd700; }
 .rank2 td:first-child { border-left: 3px solid #c0c0c0; }
 .rank3 td:first-child { border-left: 3px solid #cd7f32; }
-.modelCell { display: flex; flex-direction: column; }
-.modelName { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 4px; }
-.modelId { font-family: var(--font-mono); font-size: 10px; color: var(--color-text-dim); margin-top: 1px; }
-.noKey {
-  font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 3px;
-  background: rgba(255,170,0,0.12); color: #ffaa00; border: 1px solid rgba(255,170,0,0.2); margin-left: 6px;
-}
-.providerPill {
-  display: inline-block; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px;
-  background: var(--color-accent-dim); color: var(--color-text-muted); border: 1px solid var(--color-border);
+
+/* ─── Shared cell values ─── */
+.rankNum {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--color-text-dim);
+  text-align: center;
+  display: block;
 }
+
 .swe { font-family: var(--font-mono); font-weight: 600; }
 .sweHigh { color: #ffd700; }
-.sweMid { color: #3ddc84; }
-.sweLow { color: var(--color-text-dim); }
-.ctx { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-muted); }
+.sweMid  { color: #3ddc84; }
+.sweLow  { color: var(--color-text-dim); }
+
+.ctx { font-family: var(--font-mono); font-size: 11px; }
+
 .ping { font-family: var(--font-mono); font-weight: 600; }
-.pingFast { color: #00ff88; }
+.pingFast   { color: #00ff88; }
 .pingMedium { color: #ffaa00; }
-.pingSlow { color: #ff4444; }
-.pingNone { color: var(--color-text-dim); }
-.uptime { font-family: var(--font-mono); font-size: 12px; }
+.pingSlow   { color: #ff4444; }
+.pingNone   { color: var(--color-text-dim); }
+
+/* 📖 Light theme: darker SWE + ping colors. */
+:global([data-theme="light"]) .sweHigh   { color: #7a5e00; }
+:global([data-theme="light"]) .sweMid    { color: #1f7a3e; }
+:global([data-theme="light"]) .pingFast   { color: #008f4d; }
+:global([data-theme="light"]) .pingMedium { color: #b86b00; }
+:global([data-theme="light"]) .pingSlow   { color: #c8143a; }
+
+.uptime { font-family: var(--font-mono); font-size: 11px; }
+
+/* ─── Model cell ─── */
+.modelCell    { display: flex; align-items: center; gap: 6px; overflow: hidden; }
+.modelMeta    { flex: 1; min-width: 0; }
+.modelHeader  { display: flex; align-items: center; gap: 5px; }
+.modelName    { font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.modelId      { font-family: var(--font-mono); font-size: 9px; color: var(--color-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+/* 📖 Provider cell now uses <ProviderLogo /> (icon + wordmark) — see
+   📖 atoms/ProviderLogo.module.css for the layout. The old bordered pill
+   📖 was replaced; no extra styling is needed here. */
+
+/* ─── Benchmarking row highlight ── */
+@keyframes benchRowPulse {
+  0%, 100% { background: rgba(180, 0, 255, 0.04); }
+  50%       { background: rgba(180, 0, 255, 0.10); }
+}
+.benchRow {
+  animation: benchRowPulse 1.2s ease-in-out infinite;
+}
+
+/* ─── Empty state ─── */
+:global([data-theme="light"]) .container {
+  border-color: #cfcfcf;
+}
+
+:global([data-theme="light"]) .table {
+  border-color: #cfcfcf;
+}
+
+:global([data-theme="light"]) .th,
+:global([data-theme="light"]) .td {
+  border-color: #d8d8d8;
+}
+
 .empty { text-align: center; padding: 60px 0; color: var(--color-text-muted); }
+
+/* ─── M1: favorites star button (TUI `F` key) ─── */
+.favBtn {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 24px; height: 24px;
+  background: transparent;
+  border: none;
+  color: var(--color-text-dim);
+  cursor: pointer;
+  border-radius: 4px;
+  transition: color 120ms, background 120ms, transform 120ms;
+}
+.favBtn:hover {
+  color: #ffd700;
+  background: rgba(255, 215, 0, 0.10);
+  transform: scale(1.1);
+}
+.favBtnActive {
+  color: #ffd700;
+}
+.favBtnActive:hover {
+  color: #ffae00;
+  background: rgba(255, 174, 0, 0.14);
+}
+:global([data-theme="light"]) .favBtn { color: #999; }
+:global([data-theme="light"]) .favBtn:hover { color: #b08800; background: rgba(176, 136, 0, 0.10); }
+:global([data-theme="light"]) .favBtnActive { color: #b08800; }
+
+/* ─── M1: clickable AI Lat. cell (TUI `Ctrl+A`) ─── */
+.aiLatencyWrap {
+  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
+  cursor: pointer;
+  padding: 2px 4px;
+  border-radius: 4px;
+  position: relative;
+  transition: background 100ms;
+}
+.aiLatencyWrap:hover {
+  background: rgba(180, 0, 255, 0.08);
+}
+.aiLatencyWrap.aiLatencyRunning { cursor: progress; }
+.aiLatencyWrap.aiLatencyRunning:hover { background: transparent; }
+.aiLatencyPlay {
+  opacity: 0;
+  color: #b400ff;
+  transition: opacity 100ms;
+}
+.aiLatencyWrap:hover .aiLatencyPlay { opacity: 1; }
+.aiLatencyRunning .aiLatencyPlay { display: none; }
+
+/* ─── M1: dark-red row for tool-incompatible models ─── */
+.incompatible td {
+  background: rgba(255, 0, 0, 0.06) !important;
+  color: var(--color-text-muted) !important;
+}
+.incompatible:hover td {
+  background: rgba(255, 0, 0, 0.10) !important;
+}
+:global([data-theme="light"]) .incompatible td {
+  background: rgba(200, 20, 58, 0.06) !important;
+  color: #888 !important;
+}

package/web/src/components/layout/Footer.jsx

@@ -8,7 +8,7 @@ export default function Footer() {
   return (
     <footer className={styles.footer}>
       <div className={styles.left}>
-        Made with ❤️ by <a href="https://vavanessa.dev" target="_blank" rel="noopener">Vava-Nessa</a>
+        by <a href="https://vavanessa.dev" target="_blank" rel="noopener">Vava-Nessa</a>
       </div>
       <div className={styles.right}>
         <a href="https://github.com/vava-nessa/free-coding-models" target="_blank" rel="noopener">GitHub</a>

package/web/src/components/layout/Header.jsx

@@ -1,22 +1,153 @@
 /**
  * @file web/src/components/layout/Header.jsx
- * @description Top header bar with search, export button, settings shortcut, and theme toggle.
+ * @description Top header bar — global navigation + search + actions.
+ * 📖 Layout refactor (M1): no more left sidebar. All navigation lives here.
+ * 📖 - Always-visible nav buttons: Dashboard, Settings, Analytics, Recommend, Router
+ * 📖 - Overflow menu (kebab): Help, Changelog, Install Endpoints, Installed Models
+ * 📖 - Right side: ⌘K (command palette), AI Latency, theme, export
+ * 📖 Each unimplemented feature shows a friendly "Coming in M2/M3/M4" toast so
+ * 📖 the menu structure is honest and complete from day one.
  */
+import { useEffect, useRef, useState } from 'react'
+import {
+  IconBolt, IconSearch, IconDownload, IconSettings, IconMoon, IconSun,
+  IconPlayerPlay, IconCommand, IconLayoutDashboard, IconActivity,
+  IconSparkles, IconRoute, IconDots, IconQuestionMark, IconHistory,
+  IconPlug, IconFolders,
+} from '@tabler/icons-react'
 import styles from './Header.module.css'
 
-export default function Header({ searchQuery, onSearchChange, onToggleTheme, onOpenSettings, onOpenExport }) {
+// 📖 Top-level nav items — always visible as buttons. Inlined here so the
+// 📖 order, icon, and "coming soon" milestone are colocated with the
+// 📖 rendering code. When a view ships, remove the `comingIn` field.
+const NAV_ITEMS = [
+  { id: 'dashboard',   label: 'Dashboard',   icon: IconLayoutDashboard },
+  { id: 'settings',    label: 'Settings',    icon: IconSettings },
+  { id: 'analytics',   label: 'Analytics',   icon: IconActivity },
+  { id: 'recommend',   label: 'Recommend',   icon: IconSparkles,   comingIn: 'M3' },
+  { id: 'router',      label: 'Router',      icon: IconRoute,      comingIn: 'M4' },
+]
+
+// 📖 Overflow menu items — Help, Changelog, Install Endpoints, Installed Models.
+const MENU_ITEMS = [
+  { id: 'help',              label: 'Help',               icon: IconQuestionMark, comingIn: 'M2' },
+  { id: 'changelog',         label: 'Changelog',          icon: IconHistory,      comingIn: 'M2' },
+  { id: 'install-endpoints', label: 'Install Endpoints',  icon: IconPlug,         comingIn: 'M4' },
+  { id: 'installed-models',  label: 'Installed Models',   icon: IconFolders,      comingIn: 'M4' },
+]
+
+export default function Header({
+  searchQuery, onSearchChange,
+  currentView, onNavigate,
+  onToggleTheme, onOpenExport, onOpenCommandPalette,
+  onBenchmark, benchmarkRunning, benchmarkTotal, benchmarkCompleted,
+  modelsCount, theme, onToast,
+}) {
+  const [menuOpen, setMenuOpen] = useState(false)
+  const menuRef = useRef(null)
+
+  // 📖 Close the overflow menu on outside click or Esc.
+  useEffect(() => {
+    if (!menuOpen) return
+    const onClick = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false)
+    }
+    const onKey = (e) => { if (e.key === 'Escape') setMenuOpen(false) }
+    document.addEventListener('mousedown', onClick)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('mousedown', onClick)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [menuOpen])
+
+  const handleNavClick = (item) => {
+    if (item.comingIn) {
+      onToast?.(`${item.label} arrives in milestone ${item.comingIn}.`, 'info')
+      return
+    }
+    onNavigate(item.id)
+  }
+
+  const handleMenuClick = (item) => {
+    setMenuOpen(false)
+    if (item.comingIn) {
+      onToast?.(`${item.label} arrives in milestone ${item.comingIn}.`, 'info')
+      return
+    }
+    onNavigate(item.id)
+  }
+
   return (
     <header className={styles.header}>
       <div className={styles.left}>
         <div className={styles.logo}>
-          <span className={styles.logoIcon}>⚡</span>
-          <span className={styles.logoText}>free-coding-models</span>
+          <span className={styles.logoIcon}>&gt;</span>
+          <span className={styles.logoText}>
+            <span className={styles.logoTextHighlight}>free</span>
+            <span>-coding-models</span>
+            <span className={styles.logoTextHighlight}>_</span>
+          </span>
         </div>
         <span className={styles.version}>v{__APP_VERSION__}</span>
+
+        {/* Always-visible primary nav (replaces the old left sidebar) */}
+        <nav className={styles.nav} aria-label="Primary">
+          {NAV_ITEMS.map((item) => {
+            const Icon = item.icon
+            const isActive = currentView === item.id
+            return (
+              <button
+                key={item.id}
+                className={`${styles.navBtn} ${isActive ? styles.navBtnActive : ''}`}
+                onClick={() => handleNavClick(item)}
+                title={item.comingIn ? `${item.label} — coming in ${item.comingIn}` : item.label}
+                aria-current={isActive ? 'page' : undefined}
+              >
+                <Icon size={14} stroke={1.5} />
+                <span>{item.label}</span>
+                {item.comingIn && <span className={styles.comingBadge}>{item.comingIn}</span>}
+              </button>
+            )
+          })}
+
+          {/* Overflow menu (kebab) — hidden features & occasional flows */}
+          <div className={styles.menuWrap} ref={menuRef}>
+            <button
+              className={`${styles.navBtn} ${styles.menuTrigger}`}
+              onClick={() => setMenuOpen((o) => !o)}
+              title="More features"
+              aria-haspopup="true"
+              aria-expanded={menuOpen}
+            >
+              <IconDots size={16} stroke={1.5} />
+            </button>
+            {menuOpen && (
+              <div className={styles.menuPopover} role="menu">
+                {MENU_ITEMS.map((item) => {
+                  const Icon = item.icon
+                  return (
+                    <button
+                      key={item.id}
+                      className={styles.menuItem}
+                      onClick={() => handleMenuClick(item)}
+                      role="menuitem"
+                    >
+                      <Icon size={14} stroke={1.5} />
+                      <span>{item.label}</span>
+                      {item.comingIn && <span className={styles.comingBadge}>{item.comingIn}</span>}
+                    </button>
+                  )
+                })}
+              </div>
+            )}
+          </div>
+        </nav>
       </div>
+
       <div className={styles.center}>
         <div className={styles.searchBar}>
-          <span className={styles.searchIcon}>🔍</span>
+          <span className={styles.searchIcon}><IconSearch size={16} stroke={1.5} /></span>
           <input
             type="text"
             className={styles.searchInput}
@@ -25,13 +156,44 @@ export default function Header({ searchQuery, onSearchChange, onToggleTheme, onO
             onChange={(e) => onSearchChange(e.target.value)}
             autoComplete="off"
           />
-          <kbd className={styles.kbd}>Ctrl+K</kbd>
         </div>
       </div>
+
       <div className={styles.right}>
-        <button className={styles.iconBtn} onClick={onToggleTheme} title="Toggle theme">☽</button>
-        <button className={styles.iconBtn} onClick={onOpenExport} title="Export Data">↓</button>
-        <button className={styles.primaryBtn} onClick={onOpenSettings}>⚙ Settings</button>
+        {/* ⌘K — the only global keyboard shortcut, opens the command palette */}
+        <button
+          className={styles.cmdkBtn}
+          onClick={onOpenCommandPalette}
+          title="Command palette (⌘K / Ctrl+P)"
+          aria-label="Open command palette"
+        >
+          <IconCommand size={14} stroke={1.5} />
+          <span className={styles.cmdkLabel}>⌘K</span>
+        </button>
+
+        <button
+          className={`${styles.benchmarkBtn} ${benchmarkRunning ? styles.benchmarkActive : ''}`}
+          onClick={onBenchmark}
+          disabled={benchmarkRunning}
+          title={benchmarkRunning ? `AI Speed Test running — ${benchmarkCompleted}/${benchmarkTotal}` : `Run AI Latency benchmark on ${modelsCount} visible models`}
+        >
+          <IconPlayerPlay size={14} stroke={1.5} />
+          {benchmarkRunning ? (
+            <span className={styles.benchmarkRunning}>
+              <span className={styles.spinner} />
+              RUN {benchmarkCompleted}/{benchmarkTotal}
+            </span>
+          ) : (
+            <span>AI Latency</span>
+          )}
+        </button>
+
+        <button className={styles.iconBtn} onClick={onToggleTheme} title={`Theme: ${theme} (click to cycle auto / dark / light)`}>
+          {theme === 'light' ? <IconMoon size={16} stroke={1.5} /> : <IconSun size={16} stroke={1.5} />}
+        </button>
+        <button className={styles.iconBtn} onClick={onOpenExport} title="Export Data">
+          <IconDownload size={16} stroke={1.5} />
+        </button>
       </div>
     </header>
   )