free-coding-models 0.5.32 → 0.5.34

package/web/src/components/dashboard/ModelTable.jsx

@@ -13,13 +13,14 @@
  * 📖 Custom widths persist in localStorage via the useColumnSizing hook and survive reloads.
  * 📖 A "Reset columns" button appears in the toolbar only when the user has custom widths.
  */
-import { useMemo, useEffect, useState, useCallback, Fragment } from 'react'
+import { useMemo, useEffect, useState, useCallback, useRef } from 'react'
 import {
   useReactTable,
   getCoreRowModel,
   flexRender,
   createColumnHelper,
 } from '@tanstack/react-table'
+import { useVirtualizer } from '@tanstack/react-virtual'
 import { IconStar, IconStarFilled, IconPlayerPlayFilled } from '@tabler/icons-react'
 import { useColumnSizing } from '../../hooks/useColumnSizing.js'
 
@@ -176,10 +177,12 @@ function TrendCellRenderer({ row }) {
 // 📖 the cells always see fresh values.
 const buildColumns = ({ favorites, onBenchmarkRow, onSelectModel, onLaunch, toolMode }) => [
   // 📖 Star column — leftmost, mirrors the TUI's `F` key.
+  // 📖 First column = bookmarks (TUI `F` key). Widened from 32→104 so the
+  // 📖 "BOOKMARKS" header label fits horizontally without clipping.
   colHelper.display({
     id: 'fav',
-    header: '⭐',
-    size: 32,
+    header: 'BOOKMARKS',
+    size: 104,
     enableSorting: false,
     cell: ({ row }) => {
       const m = row.original
@@ -351,6 +354,12 @@ export default function ModelTable({
   // 📖 Expand row state — only one row expanded at a time (accordion)
   const [expandedRowId, setExpandedRowId] = useState(null)
 
+  // 📖 scrollRef is the internal scroll container — shared by the sticky
+  // 📖 <thead> header and the row virtualizer (only visible rows are in the
+  // 📖 DOM; off-screen rows stay in React state so live pings/probes keep
+  // 📖 updating them and re-render correctly when scrolled into view).
+  const scrollRef = useRef(null)
+
   const toggleExpand = useCallback((model) => {
     const key = `${model.providerKey}/${model.modelId}`
     setExpandedRowId((prev) => prev === key ? null : key)
@@ -402,6 +411,42 @@ export default function ModelTable({
 
   const rows = table.getRowModel().rows
 
+  // 📖 Flatten rows + any expanded detail panel into a single virtualized
+  // 📖 list. One <tr> per item keeps TanStack Virtual's dynamic measurement
+  // 📖 clean (one measured element per virtual item). The expand item only
+  // 📖 exists for the single accordion-open row, so count changes by at most 1.
+  const flatRows = useMemo(() => {
+    const out = []
+    for (const row of rows) {
+      const m = row.original
+      const key = `${m.providerKey}/${m.modelId}`
+      out.push({ type: 'row', row, key })
+      if (expandedRowId === key) {
+        out.push({ type: 'expand', row, key: `${key}__expand` })
+      }
+    }
+    return out
+  }, [rows, expandedRowId])
+
+  // 📖 Row virtualizer: renders only the ~15-25 rows in the viewport (+overscan)
+  // 📖 instead of all 190+. Spacer <tr>s above/below preserve the full scroll
+  // 📖 height. This is a RENDER-only optimization — ALL model data (including
+  // 📖 live pings/probes for off-screen rows) still lives in React state via
+  // 📖 useSocket, so updates continue uninterrupted and show fresh values the
+  // 📖 moment a row scrolls back into view. Nothing about probing changes.
+  const rowVirtualizer = useVirtualizer({
+    count: flatRows.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: (i) => (flatRows[i]?.type === 'expand' ? 260 : 47),
+    overscan: 10,
+    getItemKey: (i) => flatRows[i].key,
+  })
+  const virtualItems = rowVirtualizer.getVirtualItems()
+  const totalSize = rowVirtualizer.getTotalSize()
+  const padTop = virtualItems.length ? Math.max(0, virtualItems[0].start) : 0
+  const lastVi = virtualItems.length ? virtualItems[virtualItems.length - 1] : null
+  const padBottom = lastVi ? Math.max(0, totalSize - lastVi.end) : 0
+
   // 📖 Total table width = sum of all column sizes. Used to drop the min-width
   // 📖 override once the user has manually tuned the columns, so horizontal
   // 📖 scrolling reflects the user's layout rather than the 1200px default.
@@ -433,6 +478,8 @@ export default function ModelTable({
 
   return (
     <div className={styles.container}>
+      {/* 📖 resizeToolbar lives OUTSIDE the scroller so it never overlaps the
+          📖 sticky table header (thead th sticks to the top of scrollInner). */}
       {hasCustomSizing && (
         <div className={styles.resizeToolbar}>
           <span className={styles.resizeToolbarHint}>
@@ -448,6 +495,10 @@ export default function ModelTable({
           </button>
         </div>
       )}
+      {/* 📖 scrollInner is the actual scroller. It is the scroll element for
+          📖 both the sticky <thead> header and the row virtualizer. Bounded by
+          📖 .dashboardView (viewport height) so the table scrolls internally. */}
+      <div className={styles.scrollInner} ref={scrollRef}>
       <table
         className={styles.table}
         style={hasCustomSizing ? { minWidth: `${totalTableWidth}px` } : undefined}
@@ -508,10 +559,45 @@ export default function ModelTable({
           ))}
         </thead>
         <tbody>
-          {rows.map((row, i) => {
+          {/* 📖 Top spacer: represents the scroll height of all virtualized-out
+              📖 rows ABOVE the viewport. aria-hidden + empty cell keeps it
+              📖 invisible while preserving table column layout. */}
+          {padTop > 0 && (
+            <tr aria-hidden="true" style={{ height: padTop }}>
+              <td style={{ height: padTop, padding: 0, border: 0 }} />
+            </tr>
+          )}
+          {virtualItems.map((vi) => {
+            const item = flatRows[vi.index]
+            // 📖 Expanded detail panel row — its own virtual item so dynamic
+            // 📖 measurement stays one-element-per-item (clean heights).
+            if (item.type === 'expand') {
+              return (
+                <tr
+                  key={item.key}
+                  className={styles.expandRowWrapper}
+                  data-index={vi.index}
+                  ref={rowVirtualizer.measureElement}
+                >
+                  <td colSpan={item.row.getVisibleCells().length} className={styles.expandRowCell}>
+                    <ExpandedDetailRow
+                      model={item.row.original}
+                      favorites={favorites}
+                      onBenchmark={onBenchmarkRow}
+                      onLaunch={onLaunch}
+                      onToast={onToast}
+                      toolMode={toolMode}
+                      onSetToolMode={onSetToolMode}
+                      onCycleToolMode={onCycleToolMode}
+                      onOpenFallback={onOpenFallback}
+                    />
+                  </td>
+                </tr>
+              )
+            }
+            const row = item.row
             const m = row.original
-            const rowKey = `${m.providerKey}/${m.modelId}`
-            const isExpanded = expandedRowId === rowKey
+            const isExpanded = expandedRowId === item.key
             const rankIdx = [...top3Ids].indexOf(m.modelId)
             const rowClasses = []
             if (rankIdx >= 0) rowClasses.push(styles[`rank${rankIdx + 1}`])
@@ -530,47 +616,37 @@ export default function ModelTable({
               rowClasses.push(styles.notInSetRow)
             }
             return (
-              <Fragment key={row.id}>
-                <tr
-                  className={rowClasses.join(' ')}
-                  onClick={() => toggleExpand(m)}
-                >
-                  {row.getVisibleCells().map(cell => {
-                    const sizePx = `${cell.column.getSize()}px`
-                    return (
-                      <td
-                        key={cell.id}
-                        className={styles.td}
-                        style={{ width: sizePx, minWidth: sizePx, maxWidth: sizePx }}
-                      >
-                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                      </td>
-                    )
-                  })}
-                </tr>
-                {/* 📖 Expanded detail row — 3-column panel with info, playground, AI latency */}
-                {isExpanded && (
-                  <tr className={styles.expandRowWrapper}>
-                    <td colSpan={row.getVisibleCells().length} className={styles.expandRowCell}>
-                      <ExpandedDetailRow
-                        model={m}
-                        favorites={favorites}
-                        onBenchmark={onBenchmarkRow}
-                        onLaunch={onLaunch}
-                        onToast={onToast}
-                        toolMode={toolMode}
-                        onSetToolMode={onSetToolMode}
-                        onCycleToolMode={onCycleToolMode}
-                        onOpenFallback={onOpenFallback}
-                      />
+              <tr
+                key={item.key}
+                className={rowClasses.join(' ')}
+                onClick={() => toggleExpand(m)}
+                data-index={vi.index}
+                ref={rowVirtualizer.measureElement}
+              >
+                {row.getVisibleCells().map(cell => {
+                  const sizePx = `${cell.column.getSize()}px`
+                  return (
+                    <td
+                      key={cell.id}
+                      className={styles.td}
+                      style={{ width: sizePx, minWidth: sizePx, maxWidth: sizePx }}
+                    >
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
                     </td>
-                  </tr>
-                )}
-              </Fragment>
+                  )
+                })}
+              </tr>
             )
           })}
+          {/* 📖 Bottom spacer: scroll height of all virtualized-out rows BELOW. */}
+          {padBottom > 0 && (
+            <tr aria-hidden="true" style={{ height: padBottom }}>
+              <td style={{ height: padBottom, padding: 0, border: 0 }} />
+            </tr>
+          )}
         </tbody>
       </table>
+      </div>
     </div>
   )
 }

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

@@ -13,6 +13,24 @@
   border-right: 0;
   border-radius: 0;
   margin: 0;
+  flex: 1;
+  min-height: 0;
+  /* 📖 The container itself doesn't scroll — it is the relative clip box
+     📖 hosting the scrolling table (.scrollInner). overflow:hidden keeps the
+     📖 sticky header + virtualized rows neatly clipped to the table viewport.
+     📖 isolation:isolate creates a clean stacking context so the sticky
+     📖 <thead> header (z-index 10) reliably layers above body cells. */
+  overflow: hidden;
+  position: relative;
+  isolation: isolate;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 📖 The real scroll surface for the table. It is the scroll element for
+   📖 both the sticky <thead> header and the @tanstack/react-virtual row
+   📖 virtualizer (only ~23 of 189 rows live in the DOM at any time). */
+.scrollInner {
   flex: 1;
   min-height: 0;
   overflow: auto;
@@ -24,27 +42,29 @@
   width: 100%;
   min-width: 1200px;
   border-collapse: collapse;
-  font-size: 12px;
+  font-size: 14px;
   border: 0;
 }
 
 /* ─── Header ─── */
 .th {
-  padding: 9px 8px;
-  font-size: 10px;
-  font-weight: 700;
+  padding: 10px 8px;
+  font-size: 12px;
+  font-weight: 800;
+  font-family: var(--font-mono);
   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);
+  letter-spacing: 0.8px;
+  color: var(--color-bg);
+  background: var(--color-accent);
+  border-bottom: 2px solid var(--color-border);
+  border-right: 1px solid rgba(0, 0, 0, 0.08);
   white-space: nowrap;
   user-select: none;
   position: sticky;
   top: 0;
   z-index: 10;
   text-align: center;
+  transition: all 120ms var(--ease-out);
   /* 📖 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;
@@ -52,7 +72,7 @@
   -ms-user-select: none;
 }
 .th:last-child { border-right: 0; }
-.th:hover { color: var(--color-accent); background: var(--color-bg-active); }
+.th:hover { color: var(--color-bg); background: var(--color-accent-hover); }
 
 /* 📖 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. */
@@ -120,8 +140,10 @@
   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. */
+/* 📖 Floating bar shown only when the user has custom column widths.
+   📖 Rendered OUTSIDE the scroller (a normal flex child at the top of the
+   📖 table container) so it stays put without colliding with the sticky
+   📖 <thead>. It shrinks the scroll area; the sticky header sticks below it. */
 .resizeToolbar {
   display: flex;
   align-items: center;
@@ -130,11 +152,9 @@
   padding: 6px 10px;
   background: var(--color-bg-elevated);
   border-bottom: 1px solid var(--color-border);
-  font-size: 11px;
+  font-size: 13px;
   color: var(--color-text-muted);
-  position: sticky;
-  top: 0;
-  z-index: 11;
+  flex-shrink: 0;
 }
 .resizeToolbarHint {
   display: inline-flex;
@@ -154,7 +174,7 @@
   color: var(--color-text-muted);
   padding: 3px 10px;
   border-radius: 4px;
-  font-size: 11px;
+  font-size: 13px;
   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);
@@ -176,8 +196,8 @@
 .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; }
+.sortIcon   { opacity: 0.4; margin-left: 3px; font-size: 9px; color: var(--color-bg); }
+.sortIconActive { color: var(--color-bg); margin-left: 3px; font-size: 10px; font-weight: 900; }
 
 /* ─── Data cells ─── */
 .td {
@@ -191,6 +211,11 @@
 .td:nth-child(7) { text-align: left; }   /* Provider */
 .td:nth-child(11) { text-align: left; } /* Verdict */
 
+/* 📖 Center the BOOKMARKS column (star button) so it sits nicely in its
+   📖 wider header. Other narrow numeric columns are centered by default. */
+.td:nth-child(1),
+.th:nth-child(1) { text-align: center; }
+
 /* ─── Row hover ─── */
 .table tbody tr {
   cursor: pointer;
@@ -206,7 +231,7 @@
 /* ─── Shared cell values ─── */
 .rankNum {
   font-family: var(--font-mono);
-  font-size: 11px;
+  font-size: 13px;
   color: var(--color-text-dim);
   text-align: center;
   display: block;
@@ -217,7 +242,7 @@
 .sweMid  { color: #3ddc84; }
 .sweLow  { color: var(--color-text-dim); }
 
-.ctx { font-family: var(--font-mono); font-size: 11px; }
+.ctx { font-family: var(--font-mono); font-size: 13px; }
 
 .ping { font-family: var(--font-mono); font-weight: 600; }
 .pingFast   { color: #00ff88; }
@@ -232,14 +257,14 @@
 :global([data-theme="light"]) .pingMedium { color: #b86b00; }
 :global([data-theme="light"]) .pingSlow   { color: #c8143a; }
 
-.uptime { font-family: var(--font-mono); font-size: 11px; }
+.uptime { font-family: var(--font-mono); font-size: 13px; }
 
 /* ─── 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-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.modelName    { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.modelId      { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-muted); 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
@@ -368,13 +393,43 @@
 }
 
 /* ─── Expandable row styles ─── */
-.expandedRow {
-  background: var(--color-bg-active) !important;
+.expandedRow td {
+  background: var(--color-accent) !important;
+  color: var(--color-bg) !important;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
+}
+.expandedRow td * {
+  color: var(--color-bg) !important;
+}
+.expandedRow :global(.status-dot) {
+  border-color: var(--color-bg) !important;
+}
+.expandedRow :global(.provider-wordmark) {
+  filter: brightness(0) saturate(100%) !important; /* Forces logos to render dark/black for contrast */
+}
+.expandedRow .rankNum,
+.expandedRow .modelId {
+  color: rgba(0, 0, 0, 0.6) !important;
+}
+.expandedRow .sweLow,
+.expandedRow .sweMid,
+.expandedRow .sweHigh {
+  color: var(--color-bg) !important;
+}
+.expandedRow .pingFast,
+.expandedRow .pingMedium,
+.expandedRow .pingSlow {
+  color: var(--color-bg) !important;
+  font-weight: 800;
 }
 .expandRowWrapper {
   border: none;
 }
 .expandRowCell {
   padding: 0 !important;
-  border-bottom: 2px solid var(--color-accent) !important;
+  border-bottom: 3px solid var(--color-accent) !important;
+  background: var(--color-bg-elevated) !important;
+}
+.expandRowCell * {
+  color: inherit;
 }

package/web/src/components/help/HelpView.module.css

@@ -4,28 +4,27 @@
  */
 
 .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: center;
-  justify-content: center;
-  padding: 5vh 4vw;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  padding: 24px;
 }
 
 .modal {
-  width: min(820px, 95vw);
-  max-height: 90vh;
-  background: var(--color-bg-elevated);
-  border: 1px solid var(--color-border-hover);
+  width: 100%;
+  max-width: 820px;
+  margin: 0 auto;
+  background: var(--color-bg-card, #080908);
+  border: 1px solid var(--color-border, #161a16);
   border-radius: 14px;
-  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  flex: 1;
+  min-height: 0;
 }
 
 .header {

package/web/src/components/install/InstallEndpointsView.module.css

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

package/web/src/components/installed/InstalledModelsView.module.css

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

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

@@ -22,20 +22,18 @@ import styles from './Header.module.css'
 // 📖 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 },
-  { id: 'router',      label: 'Router',      icon: IconRoute },
-  { id: 'playground',  label: 'Playground',  icon: IconMessageChatbot },
+  { id: 'dashboard',         label: 'Dashboard',          icon: IconLayoutDashboard },
+  { id: 'router',            label: 'Router',             icon: IconRoute },
+  { id: 'playground',        label: 'Playground',         icon: IconMessageChatbot },
+  { id: 'help',              label: 'Help',               icon: IconQuestionMark },
+  { id: 'install-endpoints', label: 'Install Endpoints',  icon: IconPlug },
 ]
 
-// 📖 Overflow menu items — Help + Changelog shipped in M2; Install Endpoints
-// 📖 and Installed Models are still M4.
+// 📖 Overflow menu items
 const MENU_ITEMS = [
-  { id: 'help',              label: 'Help',               icon: IconQuestionMark },
+  { id: 'analytics',         label: 'Analytics',          icon: IconActivity },
+  { id: 'recommend',         label: 'Recommend',          icon: IconSparkles },
   { id: 'changelog',         label: 'Changelog',          icon: IconHistory },
-  { id: 'install-endpoints', label: 'Install Endpoints',  icon: IconPlug },
   { id: 'installed-models',  label: 'Installed Models',   icon: IconFolders },
 ]
 
@@ -90,8 +88,11 @@ export default function Header({
   return (
     <header className={styles.header}>
       <div className={styles.left}>
-        <div className={styles.logo}>
-          <span className={styles.logoIcon}>&gt;</span>
+        <div className={styles.logo} onClick={() => onNavigate('dashboard')} style={{ cursor: 'pointer' }}>
+          <svg className={styles.logoIconSvg} width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M4 5L11 12L4 19" stroke="var(--color-brand)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
+            <path d="M14 5V19M14 5H21M14 11H18" stroke="var(--color-brand)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
+          </svg>
           <span className={styles.logoText}>
             <span className={styles.logoTextHighlight}>free</span>
             <span>-coding-models</span>
@@ -168,7 +169,7 @@ export default function Header({
           {/* Overflow menu (kebab) — hidden features & occasional flows */}
           <div className={styles.menuWrap} ref={menuRef}>
             <button
-              className={`${styles.navBtn} ${styles.menuTrigger}`}
+              className={`${styles.navBtn} ${styles.menuTrigger} ${MENU_ITEMS.some((m) => m.id === currentView) ? styles.navBtnActive : ''}`}
               onClick={() => setMenuOpen((o) => !o)}
               title="More features"
               aria-label="More features"
@@ -181,12 +182,14 @@ export default function Header({
               <div className={styles.menuPopover} role="menu">
                 {MENU_ITEMS.map((item) => {
                   const Icon = item.icon
+                  const isActive = currentView === item.id
                   return (
                     <button
                       key={item.id}
-                      className={styles.menuItem}
+                      className={`${styles.menuItem} ${isActive ? styles.menuItemActive : ''}`}
                       onClick={() => handleMenuClick(item)}
                       role="menuitem"
+                      aria-current={isActive ? 'page' : undefined}
                     >
                       <Icon size={14} stroke={1.5} />
                       <span>{item.label}</span>
@@ -200,21 +203,18 @@ export default function Header({
         </nav>
       </div>
 
-      <div className={styles.center}>
-        <div className={styles.searchBar}>
-          <span className={styles.searchIcon}><IconSearch size={16} stroke={1.5} /></span>
-          <input
-            type="text"
-            className={styles.searchInput}
-            placeholder="Search models, providers, tiers..."
-            value={searchQuery}
-            onChange={(e) => onSearchChange(e.target.value)}
-            autoComplete="off"
-          />
-        </div>
-      </div>
-
       <div className={styles.right}>
+        <button
+          className={`${styles.navBtn} ${currentView === 'settings' ? styles.navBtnActive : ''}`}
+          onClick={() => onNavigate('settings')}
+          title="Settings"
+          aria-current={currentView === 'settings' ? 'page' : undefined}
+          style={{ marginRight: '2px' }}
+        >
+          <IconSettings size={14} stroke={1.5} />
+          <span>Settings</span>
+        </button>
+
         <ToolPicker
           toolMode={toolMode}
           onSetToolMode={onSetToolMode}