free-coding-models 0.5.85 → 0.5.87

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

@@ -1,357 +0,0 @@
-/**
- * @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: var(--header-h, 60px);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  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;
-}
-
-/* ─── Brand ─── */
-.logo { display: flex; align-items: center; gap: 8px; }
-.logoIconSvg {
-  color: var(--color-brand);
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-.logoText {
-  font-size: 16px; font-weight: 750;
-  font-family: var(--font-mono);
-  color: var(--color-text);
-  display: flex;
-  align-items: center;
-  letter-spacing: -0.2px;
-}
-.logoTextHighlight { color: var(--color-brand); }
-.version {
-  font-size: 12px; font-weight: 500; font-family: var(--font-mono);
-  color: var(--color-text-muted); background: var(--color-surface);
-  padding: 2px 6px; border-radius: 999px; border: 1px solid var(--color-border);
-}
-
-/* ─── Primary nav (replaces the sidebar) ─── */
-.nav {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-left: 8px;
-  padding-left: 12px;
-  border-left: 1px solid var(--color-border);
-  height: 36px;
-}
-
-.navBtn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  height: 30px;
-  padding: 0 12px;
-  font-size: 13px;
-  font-weight: 600;
-  font-family: var(--font-mono); /* Monospace font looks extremely high-tech */
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--color-text-muted);
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 150ms var(--ease-out);
-  white-space: nowrap;
-}
-.navBtn:hover {
-  background: var(--color-bg-hover);
-  color: var(--color-text);
-  border-color: var(--color-border-hover);
-}
-.navBtnActive {
-  background: var(--color-accent);
-  color: var(--color-bg);
-  border-color: var(--color-accent);
-  font-weight: 800;
-  box-shadow: 0 0 12px var(--color-accent-glow);
-}
-.navBtnActive:hover {
-  background: var(--color-accent-hover);
-  color: var(--color-bg);
-  border-color: var(--color-accent-hover);
-}
-
-/* 📖 "Coming in M2" badge — small inline label that shows the menu structure
-   📖 is honest even before those milestones land. */
-.comingBadge {
-  font-size: 10px;
-  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: 14px;
-  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); }
-.menuItemActive {
-  background: var(--color-accent-dim) !important;
-  color: var(--color-accent) !important;
-  font-weight: 700;
-}
-.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: 8px; padding: 0 12px; height: 34px;
-  transition: border-color 150ms, box-shadow 150ms;
-}
-.searchBar:focus-within {
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 3px var(--color-accent-glow);
-}
-.searchIcon { font-size: 16px; flex-shrink: 0; }
-.searchInput {
-  flex: 1; background: none; border: none; outline: none;
-  color: var(--color-text); font-size: 15px; font-family: var(--font-sans);
-  min-width: 0;
-}
-.searchInput::placeholder { color: var(--color-text-dim); }
-
-/* ─── 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;
-  background: var(--color-surface); color: var(--color-text);
-  cursor: pointer; font-size: 18px; transition: all 150ms;
-}
-.iconBtn:hover { background: var(--color-bg-hover); border-color: var(--color-border-hover); }
-
-/* 📖 ⌘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: 14px; 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: 13px; letter-spacing: 0.5px; }
-
-/* ─── AI Latency benchmark button (reused from before) ─── */
-.benchmarkBtn {
-  display: inline-flex; align-items: center; gap: 6px;
-  padding: 0 12px; height: 30px; font-size: 14px; 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;
-}
-
-/* 📖 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; }
-  .nav { display: none; }
-  .hamburgerBtn { display: flex; }
-}
-@media (max-width: 560px) {
-  .version { display: none; }
-}
-
-/* ─── Hamburger + mobile nav (M5) ─── */
-.hamburgerBtn {
-  display: none;
-  align-items: center;
-  justify-content: center;
-  width: 34px;
-  height: 34px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  color: var(--color-text-muted);
-  cursor: pointer;
-  margin-left: 8px;
-  &:hover { color: var(--color-text); background: var(--color-bg-hover); }
-}
-
-.mobileNav {
-  position: absolute;
-  top: var(--header-h, 60px);
-  left: 0;
-  right: 0;
-  background: var(--color-bg-elevated);
-  border-bottom: 1px solid var(--color-border);
-  padding: 8px 16px 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  z-index: 150;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
-}
-
-.mobileNavItem {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--color-text-muted);
-  background: transparent;
-  border: none;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  text-align: left;
-  width: 100%;
-  &:hover { background: var(--color-bg-hover); color: var(--color-text); }
-}
-
-.mobileNavActive {
-  color: var(--color-accent);
-  background: var(--color-accent-dim);
-}
-
-.mobileNavDivider {
-  height: 1px;
-  background: var(--color-border);
-  margin: 6px 0;
-}
-
-/* ─── Keyboard Focus & Micro-interaction Active States ─── */
-.navBtn:focus-visible,
-.iconBtn:focus-visible,
-.cmdkBtn:focus-visible,
-.benchmarkBtn:focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-}
-
-.navBtn:active,
-.iconBtn:active,
-.cmdkBtn:active,
-.benchmarkBtn:active {
-  transform: scale(0.96);
-}

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

@@ -1,301 +0,0 @@
-/**
- * @file web/src/components/palette/CommandPalette.jsx
- * @description ⌘K / Ctrl+P command palette — M2 full version, fed by the TUI registry.
- * 📖 M1 shipped a placeholder; this version pulls entries from
- * 📖 `src/tui/command-palette.js` (the TUI's source of truth) so the Web and
- * 📖 TUI palettes always show the same set of commands. Web-only commands
- * 📖 (open modal pages, set the theme, open the help / changelog / etc.) are
- * 📖 appended on top of the TUI list.
- *
- * 📖 The palette is a flat searchable list — the TUI's hierarchical category
- * 📖 tree is preserved as a leading "section" label per entry. We fuzzy-search
- * 📖 using the TUI's `filterCommandPaletteEntries()` so ranking is identical
- * 📖 across both surfaces.
- *
- * @functions
- *   → CommandPalette → main modal component
- */
-import { useEffect, useMemo, useRef, useState, useCallback } from 'react'
-import { IconSearch, IconCommand, IconBolt, IconArrowsExchange, IconExternalLink } from '@tabler/icons-react'
-import { buildCommandPaletteEntries, filterCommandPaletteEntries } from '../../../../src/tui/command-palette.js'
-import styles from './CommandPalette.module.css'
-
-const SECTION_META = {
-  // TUI categories → emoji + label
-  'filter':     { icon: '🔍', label: 'Filter' },
-  'sort':       { icon: '📶', label: 'Sort' },
-  'action':     { icon: '⚙️', label: 'Action' },
-  'page':       { icon: '📄', label: 'Page' },
-  'update':     { icon: '⬆️', label: 'Update' },
-  // TUI 'tool' sub-categories
-  'tool':       { icon: '🧰', label: 'Tool' },
-}
-
-const PING_MODE_CYCLE = ['speed', 'normal', 'slow', 'forced']
-
-// 📖 Web-only entries (the Web has modals, not TUI overlays, so the palette
-// 📖 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, theme, pingMode, modelsCount, onExport, onNavigate } = deps
-  const web = [
-    // 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 },
-
-    // Reset
-    { id: 'action.reset.view', section: 'action', label: 'Reset view (filters + sort)', keywords: ['reset', 'view', 'clear', 'filters', 'sort'], run: onResetView },
-
-    // Ping mode (the TUI has these too; Web keeps them for parity)
-    { id: 'action.ping.speed',  section: 'action', label: 'Ping mode → Speed (2s)',  keywords: ['ping', 'mode', 'speed', 'fast', '2s'], run: () => onSetPingMode?.('speed') },
-    { id: 'action.ping.normal', section: 'action', label: 'Ping mode → Normal (10s)', keywords: ['ping', 'mode', 'normal', '10s', 'default'], run: () => onSetPingMode?.('normal') },
-    { id: 'action.ping.slow',   section: 'action', label: 'Ping mode → Slow (30s)',   keywords: ['ping', 'mode', 'slow', '30s', 'idle'], run: () => onSetPingMode?.('slow') },
-    { id: 'action.ping.forced', section: 'action', label: 'Ping mode → Forced (4s)',  keywords: ['ping', 'mode', 'forced', '4s'], run: () => onSetPingMode?.('forced') },
-
-    // Export
-    { id: 'action.export', section: 'action', label: 'Export models…', keywords: ['export', 'download', 'json', 'csv', 'clipboard'], run: onExport },
-  ]
-  // TUI palette entries with a 'page' type → route through the same Web pages.
-  return web
-}
-
-export default function CommandPalette({
-  onClose, onNavigate, onCycleTheme, onResetView,
-  onSetPingMode, onOpenHelp, onOpenChangelog, onOpenCommandPalette,
-  onToast, onExport, currentView, theme, pingMode, models,
-  updateAvailable, latestVersion, onRunUpdate,
-}) {
-  const [query, setQuery] = useState('')
-  const [cursor, setCursor] = useState(0)
-  const inputRef = useRef(null)
-  const listRef = useRef(null)
-
-  // 📖 Build the combined list once per render. TUI registry first (so
-  // 📖 its section labels come through), then Web-only entries.
-  const allCommands = useMemo(() => {
-    const tuiEntries = buildCommandPaletteEntries(models || []).map((entry) => {
-      // 📖 The TUI palette doesn't carry a 'section' field; derive one from
-      // 📖 the entry id so the Web list can show a category label.
-      let section = 'action'
-      if (entry.id.startsWith('filter-')) section = 'filter'
-      else if (entry.id.startsWith('sort-')) section = 'sort'
-      else if (entry.id.startsWith('action-')) section = 'action'
-      else if (entry.id.startsWith('action-set-tool-')) section = 'tool'
-      else if (entry.id.startsWith('page-') || entry.id === 'open-settings' || entry.id === 'open-help' || entry.id === 'open-changelog') section = 'page'
-      return { ...entry, section }
-    })
-    const webEntries = buildWebEntries({
-      onCycleTheme, onResetView, onSetPingMode,
-      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.
-    const updateEntries = []
-    if (updateAvailable && latestVersion) {
-      updateEntries.push({
-        id: 'action.update.run', section: 'update',
-        label: `⬆️ UPDATE NOW — v${latestVersion} available (recommended!)`,
-        keywords: ['update', 'upgrade', 'version', 'install', 'new'],
-        run: () => onRunUpdate?.(),
-      })
-    }
-    return [...updateEntries, ...tuiEntries, ...webEntries]
-  }, [models, theme, pingMode, onCycleTheme, onResetView, onSetPingMode, onOpenChangelog, onOpenHelp, onExport, updateAvailable, latestVersion, onRunUpdate])
-
-  // 📖 Filter using the TUI's exact fuzzy rank so the two palettes are 1:1.
-  // 📖 Empty query → return everything; non-empty → return ranked matches.
-  const filtered = useMemo(() => {
-    if (!query.trim()) return allCommands
-    return filterCommandPaletteEntries(allCommands, query)
-  }, [allCommands, query])
-
-  // 📖 Group filtered commands by section so the list reads top-down in
-  // 📖 the same order as the TUI's hierarchical view.
-  const grouped = useMemo(() => {
-    const groups = new Map()
-    for (const cmd of filtered) {
-      if (!groups.has(cmd.section)) groups.set(cmd.section, [])
-      groups.get(cmd.section).push(cmd)
-    }
-    return Array.from(groups.entries())
-  }, [filtered])
-
-  // 📖 Build a flat list for keyboard navigation. Cursor is an index into
-  // 📖 this flat list, not the grouped structure.
-  const flatList = useMemo(() => grouped.flatMap(([, items]) => items), [grouped])
-
-  useEffect(() => {
-    inputRef.current?.focus()
-  }, [])
-
-  // 📖 Clamp cursor whenever the result set changes.
-  useEffect(() => {
-    if (cursor >= flatList.length) setCursor(0)
-  }, [flatList, cursor])
-
-  // 📖 Keyboard handler: Esc, arrows, Enter, Tab (expand/collapse on TUI;
-  // 📖 the Web list is flat so Tab cycles focus to the next button — and
-  // 📖 Enter runs the highlighted command).
-  useEffect(() => {
-    const onKey = (e) => {
-      if (e.key === 'Escape') { e.preventDefault(); onClose(); return }
-      if (e.key === 'ArrowDown') {
-        e.preventDefault()
-        setCursor((c) => Math.min(flatList.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 = flatList[cursor]
-        if (!item) return
-        if (item.disabled) { onToast?.(`${item.label} is not available yet.`, 'info'); return }
-        runCommand(item)
-      }
-    }
-    document.addEventListener('keydown', onKey)
-    return () => document.removeEventListener('keydown', onKey)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [flatList, cursor, onClose, onToast])
-
-  // 📖 When a command runs, the palette closes. The handler lives in a
-  // 📖 useCallback so the keyboard handler doesn't recreate on every render.
-  const runCommand = useCallback((item) => {
-    // 📖 TUI registry entries carry the action in their own `id` form. We
-    // 📖 translate the most common ones to the Web's React callbacks.
-    // 📖 For entries that don't have a Web equivalent (e.g. tool cycle, which
-    // 📖 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') { 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 }
-    if (id === 'action-cycle-ping-mode') {
-      const idx = PING_MODE_CYCLE.indexOf(pingMode)
-      onSetPingMode?.(PING_MODE_CYCLE[(idx + 1) % PING_MODE_CYCLE.length])
-      onClose()
-      return
-    }
-    if (id === 'action-cycle-tool-mode') { onToast?.('Tool mode picker arrives in M3', 'info'); onClose(); return }
-    if (id === 'action-toggle-favorite') { onToast?.('Press F on a model row in the table.', 'info'); onClose(); return }
-    if (id === 'action-toggle-favorite-mode') { onToast?.('Set the favorites display mode in Settings (M2).', 'info'); onClose(); return }
-    if (id === 'action-export') { onExport?.(); onClose(); return }
-    if (id === 'action-benchmark-row') { onToast?.('Click any AI Lat. cell to benchmark the highlighted row.', 'info'); onClose(); return }
-
-    // 📖 Filter / sort / ping mode commands are dispatched to the same Web
-    // 📖 callbacks the TUI palette uses (cycle / set). For per-model filter
-    // 📖 entries the user typed, we just apply a text filter.
-    if (id === 'filter-provider-cycle') { onToast?.('Use the Provider dropdown in the FilterBar.', 'info'); onClose(); return }
-    if (id.startsWith('filter-tier-')) { onToast?.('Tier filter — use the Tier chip row in the FilterBar.', 'info'); onClose(); return }
-    if (id.startsWith('filter-provider-')) { onToast?.('Provider filter — use the Provider dropdown.', 'info'); onClose(); return }
-    if (id === 'filter-configured-toggle') { onToast?.('Use the Visibility dropdown in the FilterBar.', 'info'); onClose(); return }
-    if (id.startsWith('sort-')) { onToast?.('Sort — click the column header in the table.', 'info'); onClose(); return }
-    if (id === 'action-set-ping-speed')  { onSetPingMode?.('speed');  onClose(); return }
-    if (id === 'action-set-ping-normal') { onSetPingMode?.('normal'); onClose(); return }
-    if (id === 'action-set-ping-slow')   { onSetPingMode?.('slow');   onClose(); return }
-    if (id === 'action-set-ping-forced') { onSetPingMode?.('forced'); onClose(); return }
-
-    // 📖 Fallback for any TUI command the Web hasn't wired yet.
-    if (typeof item.run === 'function') {
-      item.run()
-      onClose()
-      return
-    }
-    onToast?.(`${item.label} is not wired on the Web yet.`, 'info')
-    onClose()
-  }, [onNavigate, onClose, onToast, onCycleTheme, onResetView, onSetPingMode, onOpenHelp, onOpenChangelog, onRunUpdate, onExport, pingMode])
-
-  // 📖 Keep the focused item in view as the cursor moves. Mirrors the TUI
-  // 📖 palette's "follow the selection" behavior.
-  useEffect(() => {
-    if (!listRef.current) return
-    const el = listRef.current.querySelector(`[data-cmd-index="${cursor}"]`)
-    if (el) el.scrollIntoView({ block: 'nearest' })
-  }, [cursor])
-
-  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… (filters, sorts, tools, theme, ping, export)"
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            autoComplete="off"
-          />
-          <span className={styles.kbd}><IconCommand size={10} stroke={1.5} />K</span>
-        </div>
-
-        <div className={styles.list} ref={listRef} role="listbox">
-          {flatList.length === 0 && (
-            <div className={styles.empty}>No matching command.</div>
-          )}
-          {grouped.map(([section, items]) => {
-            const meta = SECTION_META[section] || { icon: '•', label: section }
-            return (
-              <div key={section} className={styles.section}>
-                <div className={styles.sectionHeader}>
-                  <span className={styles.sectionIcon}>{meta.icon}</span>
-                  <span>{meta.label}</span>
-                </div>
-                {items.map((cmd) => {
-                  // 📖 Flat index across all groups so the keyboard cursor is stable.
-                  const flatIdx = flatList.indexOf(cmd)
-                  const isActive = flatIdx === cursor
-                  return (
-                    <button
-                      key={cmd.id}
-                      data-cmd-index={flatIdx}
-                      className={`${styles.item} ${isActive ? styles.itemActive : ''} ${cmd.disabled ? styles.itemDisabled : ''}`}
-                      onClick={() => runCommand(cmd)}
-                      onMouseEnter={() => setCursor(flatIdx)}
-                      role="option"
-                      aria-selected={isActive}
-                      aria-disabled={cmd.disabled ? 'true' : undefined}
-                    >
-                      <span className={styles.itemLabel}>
-                        {cmd.label}
-                        {cmd.shortcut && <span className={styles.shortcut}>{cmd.shortcut}</span>}
-                      </span>
-                      {cmd.description && <span className={styles.itemDesc}>{cmd.description}</span>}
-                      {isActive && <span className={styles.itemEnter}>↵</span>}
-                    </button>
-                  )
-                })}
-              </div>
-            )
-          })}
-        </div>
-
-        <div className={styles.footer}>
-          <span><kbd>↑↓</kbd> navigate</span>
-          <span><kbd>↵</kbd> select</span>
-          <span><kbd>Esc</kbd> close</span>
-          <span className={styles.footerRight}>
-            Powered by the TUI command registry — 1:1 parity
-            <IconExternalLink size={10} stroke={1.5} style={{ marginLeft: 4 }} />
-          </span>
-        </div>
-      </div>
-    </div>
-  )
-}