free-coding-models 0.5.32 → 0.5.35

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}

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

@@ -46,24 +46,24 @@
 }
 
 /* ─── Brand ─── */
-.logo { display: flex; align-items: center; gap: 6px; }
-.logoIcon {
+.logo { display: flex; align-items: center; gap: 8px; }
+.logoIconSvg {
   color: var(--color-brand);
-  font-family: var(--font-mono);
-  font-size: 20px;
-  font-weight: 900;
   display: flex;
   align-items: center;
+  flex-shrink: 0;
 }
 .logoText {
-  font-size: 14px; font-weight: 700;
+  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: 10px; font-weight: 500; font-family: var(--font-mono);
+  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);
 }
@@ -72,7 +72,7 @@
 .nav {
   display: flex;
   align-items: center;
-  gap: 2px;
+  gap: 8px;
   margin-left: 8px;
   padding-left: 12px;
   border-left: 1px solid var(--color-border);
@@ -82,39 +82,44 @@
 .navBtn {
   display: inline-flex;
   align-items: center;
-  gap: 5px;
+  gap: 6px;
   height: 30px;
-  padding: 0 10px;
-  font-size: 12px;
+  padding: 0 12px;
+  font-size: 13px;
   font-weight: 600;
-  font-family: var(--font-sans);
+  font-family: var(--font-mono); /* Monospace font looks extremely high-tech */
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
   color: var(--color-text-muted);
-  background: transparent;
-  border: 1px solid transparent;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
   border-radius: 6px;
   cursor: pointer;
-  transition: background 150ms, color 150ms, border-color 150ms;
+  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-dim);
-  color: var(--color-accent);
-  border-color: var(--color-border);
-  font-weight: 700;
+  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-dim);
-  color: var(--color-accent);
+  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: 9px;
+  font-size: 10px;
   font-weight: 700;
   font-family: var(--font-mono);
   color: var(--color-text-dim);
@@ -156,7 +161,7 @@
   gap: 8px;
   width: 100%;
   padding: 7px 10px;
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 500;
   color: var(--color-text);
   background: transparent;
@@ -167,6 +172,11 @@
   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 ─── */
@@ -180,10 +190,10 @@
   border-color: var(--color-accent);
   box-shadow: 0 0 0 3px var(--color-accent-glow);
 }
-.searchIcon { font-size: 14px; flex-shrink: 0; }
+.searchIcon { font-size: 16px; flex-shrink: 0; }
 .searchInput {
   flex: 1; background: none; border: none; outline: none;
-  color: var(--color-text); font-size: 13px; font-family: var(--font-sans);
+  color: var(--color-text); font-size: 15px; font-family: var(--font-sans);
   min-width: 0;
 }
 .searchInput::placeholder { color: var(--color-text-dim); }
@@ -193,7 +203,7 @@
   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: 16px; transition: all 150ms;
+  cursor: pointer; font-size: 18px; transition: all 150ms;
 }
 .iconBtn:hover { background: var(--color-bg-hover); border-color: var(--color-border-hover); }
 
@@ -204,7 +214,7 @@
   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;
+  cursor: pointer; font-size: 14px; font-weight: 600;
   font-family: var(--font-mono);
   transition: all 150ms;
 }
@@ -212,12 +222,12 @@
   border-color: var(--color-accent);
   background: var(--color-bg-hover);
 }
-.cmdkLabel { font-size: 11px; letter-spacing: 0.5px; }
+.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: 12px; font-weight: 700;
+  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;
@@ -307,7 +317,7 @@
   align-items: center;
   gap: 10px;
   padding: 10px 12px;
-  font-size: 13px;
+  font-size: 15px;
   font-weight: 600;
   color: var(--color-text-muted);
   background: transparent;
@@ -329,3 +339,19 @@
   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);
+}