free-coding-models 0.5.32 → 0.5.35

package/web/src/components/changelog/ChangelogView.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(720px, 95vw);
-  max-height: 88vh;
-  background: var(--color-bg-elevated);
-  border: 1px solid var(--color-border-hover);
+  width: 100%;
+  max-width: 720px;
+  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/dashboard/FilterBar.jsx

@@ -9,7 +9,7 @@
  *     — click the trigger to expand the chip row, click again or outside to close.
  */
 import { useState, useEffect, useMemo, useRef, useCallback } from 'react'
-import { IconRefresh, IconX, IconFilter, IconChevronDown } from '@tabler/icons-react'
+import { IconRefresh, IconX, IconFilter, IconChevronDown, IconSearch } from '@tabler/icons-react'
 import { getToolMeta } from '../../../../src/core/tool-metadata.js'
 import ProviderDropdown from './ProviderDropdown.jsx'
 import styles from './FilterBar.module.css'
@@ -158,7 +158,7 @@ export default function FilterBar({
   filterHealth, setFilterHealth,
   visibilityMode, setVisibilityMode,
   customTextFilter, setCustomTextFilter,
-  searchQuery,
+  searchQuery, onSearchChange,
   onResetView,
   providers,
   pingMode, setPingMode,
@@ -254,6 +254,21 @@ export default function FilterBar({
         />
       </div>
 
+      <div className={styles.group}>
+        <div className={styles.searchBar}>
+          <span className={styles.searchIcon}><IconSearch size={13} stroke={1.5} /></span>
+          <input
+            type="text"
+            className={styles.searchInput}
+            placeholder="Search models, providers..."
+            value={searchQuery || ''}
+            onChange={(e) => onSearchChange?.(e.target.value)}
+            autoComplete="off"
+            aria-label="Search models"
+          />
+        </div>
+      </div>
+
       <div className={styles.group}>
         <label className={styles.filterLabel}>Endpoint target</label>
         <div className={styles.toolStatus} title="Active endpoint install target from the Header picker">

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

@@ -2,12 +2,19 @@
  * @file web/src/components/dashboard/FilterBar.module.css
  * @description Filter bar styles — M1 parity chips (tier, status, verdict, health,
  * visibility, provider, custom text filter, reset, ping mode).
- * 📖 Sticky below the header (`top: 60px` = header height) so the filter chips
- * 📖 stay visible while the user scrolls a long table.
+ * 📖 The bar is a STATIC header above the model table (flex-shrink:0). It used
+ * 📖 to be `position: sticky; top: 60px` for the old whole-page-scroll layout,
+ * 📖 but the dashboard now scrolls the table INTERNALLY (main.dashboardView is
+ * 📖 the bounded box, .scrollInner scrolls). With main as the scroll container,
+ * 📖 `top: 60px` stuck the bar 60px DOWN inside main, dropping it over the
+ * 📖 table's green <thead>. Since the bar lives OUTSIDE the internal scroller,
+ * 📖 it is naturally always visible — no sticky needed. Keep z-index modest so
+ * 📖 it never fights the sticky table header (z-index: 10) if they ever meet.
  */
 
 .filters {
-  position: sticky; top: 60px; z-index: 99;
+  position: relative; z-index: 5;
+  flex-shrink: 0;
   display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
   padding: 10px 20px;
   background: var(--color-bg-card);
@@ -19,7 +26,7 @@
 .group { display: flex; align-items: center; gap: 6px; }
 
 .filterLabel {
-  font-size: 10px; font-weight: 700; color: var(--color-text-muted);
+  font-size: 12px; font-weight: 700; color: var(--color-text-muted);
   text-transform: uppercase; letter-spacing: 0.5px;
   white-space: nowrap;
 }
@@ -31,7 +38,7 @@
 
 .filterTrigger {
   display: inline-flex; align-items: center; gap: 4px;
-  font-size: 11px; font-family: var(--font-mono);
+  font-size: 13px; font-family: var(--font-mono);
   padding: 4px 8px; border-radius: 5px;
   border: 1px solid var(--color-border);
   background: var(--color-surface);
@@ -59,7 +66,7 @@
 }
 
 .filterTriggerLabel {
-  font-size: 10px; font-weight: 700;
+  font-size: 11px; font-weight: 700;
   text-transform: uppercase; letter-spacing: 0.5px;
   color: var(--color-text-muted);
 }
@@ -103,7 +110,7 @@
 }
 
 .filterChip {
-  font-size: 11px; font-weight: 600; font-family: var(--font-mono);
+  font-size: 13px; font-weight: 600; font-family: var(--font-mono);
   padding: 4px 9px;
   border: 1px solid var(--color-border);
   background: var(--color-bg-card);
@@ -136,7 +143,7 @@
 .select, .providerSelect {
   background: var(--color-surface); color: var(--color-text);
   border: 1px solid var(--color-border); border-radius: 5px;
-  padding: 4px 8px; font-size: 11px; font-family: var(--font-sans);
+  padding: 4px 8px; font-size: 13px; font-family: var(--font-sans);
   cursor: pointer; outline: none;
   min-width: 130px;
 }
@@ -151,11 +158,11 @@
   border-radius: 5px;
   background: var(--color-surface);
   color: var(--color-text);
-  font-size: 11px;
+  font-size: 13px;
   white-space: nowrap;
 }
 .toolStatus strong {
-  font-size: 11px;
+  font-size: 13px;
   font-weight: 800;
 }
 
@@ -164,7 +171,7 @@
 
 .resetBtn {
   display: inline-flex; align-items: center; gap: 5px;
-  font-size: 11px; font-weight: 700; font-family: var(--font-mono);
+  font-size: 13px; font-weight: 700; font-family: var(--font-mono);
   padding: 4px 9px; border-radius: 5px;
   border: 1px solid var(--color-border-hover);
   background: var(--color-accent-dim);
@@ -178,7 +185,7 @@
 .resetBadge {
   display: inline-flex; align-items: center; justify-content: center;
   min-width: 16px; height: 16px;
-  font-size: 9px; font-weight: 800;
+  font-size: 11px; font-weight: 800;
   background: var(--color-bg);
   color: var(--color-accent);
   border-radius: 999px;
@@ -188,7 +195,7 @@
 /* ── Custom text filter chip (TUI Ctrl+P "Apply text filter") ── */
 .customFilterChip {
   display: inline-flex; align-items: center; gap: 6px;
-  font-size: 11px; font-weight: 600; font-family: var(--font-mono);
+  font-size: 13px; font-weight: 600; font-family: var(--font-mono);
   padding: 3px 4px 3px 8px;
   border: 1px solid var(--color-accent);
   background: var(--color-accent-dim);
@@ -217,18 +224,18 @@
 /* ── Next ping countdown (TUI parity) ── */
 .nextPing {
   display: flex; align-items: center; gap: 6px;
-  font-size: 11px; font-family: var(--font-mono);
+  font-size: 13px; font-family: var(--font-mono);
   padding: 4px 8px;
   border: 1px solid var(--color-border);
   border-radius: 5px;
   background: var(--color-surface);
 }
 .nextPingLabel {
-  font-size: 10px; font-weight: 500; color: var(--color-text-muted);
+  font-size: 12px; font-weight: 500; color: var(--color-text-muted);
   text-transform: uppercase; letter-spacing: 0.5px;
 }
 .nextPingTime {
-  font-size: 13px; font-weight: 700; color: var(--color-text);
+  font-size: 15px; font-weight: 700; color: var(--color-text);
   min-width: 32px;
   text-align: right;
   font-variant-numeric: tabular-nums;
@@ -240,7 +247,7 @@
 
 .live {
   display: flex; align-items: center; gap: 5px;
-  font-size: 10px; font-weight: 700; color: var(--color-accent);
+  font-size: 12px; font-weight: 700; color: var(--color-accent);
   text-transform: uppercase; letter-spacing: 1px;
 }
 .liveDot {
@@ -261,16 +268,16 @@
 }
 .benchmarkLabel {
   display: flex; align-items: center; gap: 5px;
-  font-size: 11px; font-weight: 700;
+  font-size: 13px; font-weight: 700;
   color: #b400ff; font-family: var(--font-mono);
   white-space: nowrap;
 }
 .benchmarkSpinner {
   display: inline-block;
   animation: spinSp 0.8s linear infinite;
-  font-size: 12px; line-height: 1;
+  font-size: 14px; line-height: 1;
 }
-.benchmarkCount { font-size: 10px; opacity: 0.8; }
+.benchmarkCount { font-size: 12px; opacity: 0.8; }
 .benchmarkTrack {
   width: 120px; height: 5px;
   background: rgba(255,255,255,0.1);
@@ -284,7 +291,7 @@
   transition: width 0.5s ease;
 }
 .benchmarkPct {
-  font-size: 11px; font-weight: 700;
+  font-size: 13px; font-weight: 700;
   color: #b400ff; font-family: var(--font-mono);
   min-width: 32px; text-align: right;
 }
@@ -293,3 +300,43 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+/* ─── Search Bar ─── */
+.searchBar {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  padding: 0 6px;
+  height: 24px;
+  width: 125px;
+  transition: border-color 150ms, box-shadow 150ms, width 200ms var(--ease-out);
+}
+.searchBar:focus-within {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 2px var(--color-accent-glow);
+  width: 180px;
+}
+.searchIcon {
+  display: flex;
+  align-items: center;
+  color: var(--color-text-muted);
+  flex-shrink: 0;
+}
+.searchInput {
+  flex: 1;
+  background: none;
+  border: none;
+  outline: none;
+  color: var(--color-text);
+  font-size: 10.5px;
+  font-family: var(--font-sans);
+  min-width: 0;
+  padding: 0;
+}
+.searchInput::placeholder {
+  color: var(--color-text-dim);
+  font-size: 10px;
+}

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>
   )
 }