free-coding-models 0.5.1 → 0.5.5

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

@@ -1,50 +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;
+}
+
+.right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 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; }
+/* ─── Brand ─── */
+.logo { display: flex; align-items: center; gap: 6px; }
 .logoIcon {
   color: var(--color-brand);
   font-family: var(--font-mono);
-  font-size: 22px;
+  font-size: 20px;
   font-weight: 900;
   display: flex;
   align-items: center;
 }
 .logoText {
-  font-size: 16px; font-weight: 700;
+  font-size: 14px; font-weight: 700;
   color: var(--color-text);
   display: flex;
   align-items: center;
 }
-.logoTextHighlight {
-  color: var(--color-brand);
-}
+.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 {
@@ -55,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;
@@ -70,18 +196,28 @@
   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: 6px 14px; font-size: 13px; font-weight: 600;
-  border: 1px solid var(--color-accent); border-radius: 6px;
-  background: var(--color-accent); color: var(--color-bg); cursor: pointer;
-  font-family: var(--font-sans); transition: all 150ms;
+  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);
 }
-.primaryBtn:hover { background: var(--color-accent-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: 12px; font-weight: 700;
+  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;
@@ -102,6 +238,34 @@
   border-radius: 50%; animation: spin 0.8s linear infinite; flex-shrink: 0;
 }
 
+/* 📖 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/global.css

@@ -59,8 +59,6 @@
   --font-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
 
   --header-h: 60px;
-  --sidebar-w: 64px;
-  --sidebar-w-expanded: 200px;
   --radius-sm: 4px;
   --radius-md: 6px;
   --radius-lg: 8px;
@@ -94,10 +92,42 @@
   --color-accent-hover: #333333;
   --color-accent-glow:  rgba(0, 0, 0, 0.05);
   --color-accent-dim:   rgba(0, 0, 0, 0.02);
-  --color-danger-dim:   rgba(255, 68, 68, 0.08);
-  --color-warning-dim:  rgba(255, 170, 0, 0.08);
-  --color-success-dim:  rgba(0, 255, 136, 0.08);
-  --color-info-dim:     rgba(6, 182, 212, 0.08);
+
+  /* 📖 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;
@@ -121,6 +151,7 @@ body {
   overflow-x: hidden;
   position: relative;
   display: flex;
+  flex-direction: column;
 }
 
 a { color: var(--color-accent); text-decoration: none; }
@@ -145,21 +176,45 @@ code { font-family: var(--font-mono); font-size: 12px; background: var(--color-s
 }
 
 /* ─── App Layout ─── */
+.app-shell {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  width: 100%;
+  position: relative;
+  z-index: 1;
+}
+
 .app-content {
   flex: 1;
-  margin-left: var(--sidebar-w);
   position: relative;
   z-index: 1;
-  min-height: 100vh;
+  min-height: calc(100vh - var(--header-h));
   display: flex;
   flex-direction: column;
-  transition: margin-left var(--transition-medium);
 }
 
 .view {
   display: flex;
   flex-direction: column;
   flex: 1;
+  min-height: 0;
+}
+
+.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: 13px;
+  letter-spacing: 0.01em;
+  text-align: center;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
 }
 
 /* ─── Scrollbar ─── */
@@ -171,26 +226,23 @@ code { font-family: var(--font-mono); font-size: 12px; background: var(--color-s
 
 /* ─── Responsive ─── */
 @media (max-width: 768px) {
-  .app-content { margin-left: 0; }
+  /* 📖 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;
-  margin-left: var(--sidebar-w);
   position: relative;
   z-index: 1;
-  min-height: 100vh;
+  min-height: calc(100vh - var(--header-h));
   display: flex;
   flex-direction: column;
-  overflow: auto; /* allow scrolling in both directions */
-  transition: margin-left var(--transition-medium);
 }
 
 .view {
   display: flex;
   flex-direction: column;
   flex: 1;
-  overflow: hidden; /* let inner components scroll */
   min-height: 0;
 }