Replace dropdown with category-based benchmark filter UI

- Replace dropdown menu with inline category pills (Option B layout)
- Benchmarks grouped by category: Math, Knowledge, Coding, Agent, Language, Vision, Embedding
- Click pills to toggle on/off with background color change
- Visual feedback: blue active state, gray inactive (60% opacity)
- Select All/Clear All action buttons on the right
- Mobile-friendly: categories wrap, pills flex within category
- Default: 10/12 benchmarks selected (Vision & Embedding hidden)
- Removed ~60 lines of dropdown code, added ~150 lines for new UI

index.html

@@ -77,18 +77,19 @@ h1{font-size:clamp(20px,3vw,36px);font-weight:800;line-height:1.1;letter-spacing
 .fb:hover{background:var(--ac-bg);border-color:rgba(99,102,241,.3);color:var(--ac);}
 .fb.on{background:linear-gradient(135deg,#6366f1,#4f46e5);border-color:transparent;color:#fff;box-shadow:0 3px 12px rgba(99,102,241,.25);}
 
-/* DROPDOWN */
-.dropdown-wrapper{position:relative;}
-.dropdown-btn{min-width:140px;display:flex;align-items:center;justify-content:space-between;}
-.dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);z-index:1000;min-width:220px;max-height:400px;overflow-y:auto;}
-.dropdown-header{display:flex;gap:8px;padding:8px 12px;background:var(--surface-alt);}
-.dropdown-action{background:transparent;border:1px solid var(--border);color:var(--text-sec);padding:4px 10px;border-radius:6px;font-size:9px;font-weight:600;cursor:pointer;transition:var(--tr);font-family:var(--font);}
-.dropdown-action:hover{background:var(--ac-bg);border-color:var(--ac);color:var(--ac);}
-.dropdown-divider{height:1px;background:var(--border);margin:4px 0;}
-.dropdown-item{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;transition:var(--tr);font-size:11px;color:var(--text);}
-.dropdown-item:hover{background:var(--surface-alt);}
-.dropdown-item input[type="checkbox"]{cursor:pointer;width:14px;height:14px;}
-.dropdown-item span:first-of-type{font-size:14px;}
+/* BENCHMARK FILTER */
+.benchmark-filter-wrapper{display:flex;flex-wrap:wrap;gap:12px;align-items:center;flex:1;}
+.benchmark-category{display:flex;align-items:center;gap:6px;}
+.category-icon{font-size:14px;line-height:1;}
+.category-label{font-size:9px;font-family:var(--font-mono);color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;font-weight:600;white-space:nowrap;}
+.benchmark-pills{display:flex;gap:4px;flex-wrap:wrap;}
+.benchmark-pill{background:var(--surface-alt);border:1px solid var(--border);color:var(--text-sec);padding:4px 10px;border-radius:16px;font-size:9px;font-weight:600;cursor:pointer;transition:all 0.2s cubic-bezier(0.4,0,0.2,1);font-family:var(--font);white-space:nowrap;box-shadow:var(--shadow-sm);opacity:0.6;}
+.benchmark-pill:hover{border-color:var(--border-hover);transform:translateY(-1px);box-shadow:0 2px 8px rgba(15,23,42,.08);}
+.benchmark-pill.active{background:var(--ac-bg);border-color:rgba(99,102,241,.3);color:var(--ac);opacity:1;box-shadow:0 2px 8px rgba(99,102,241,.12);}
+.benchmark-pill.active:hover{background:rgba(99,102,241,.12);border-color:var(--ac);}
+.filter-actions{display:flex;gap:6px;margin-left:auto;}
+.filter-action-btn{background:var(--surface-alt);border:1px solid var(--border);color:var(--text-sec);padding:4px 10px;border-radius:16px;font-size:9px;font-weight:600;cursor:pointer;transition:var(--tr);font-family:var(--font);white-space:nowrap;box-shadow:var(--shadow-sm);}
+.filter-action-btn:hover{background:var(--ac-bg);border-color:rgba(99,102,241,.3);color:var(--ac);}
 
 /* TABLE */
 .tw{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow-x:auto;box-shadow:var(--shadow);margin-bottom:20px;}
@@ -179,6 +180,11 @@ body.dark tbody tr:hover td.c-model{background:var(--surface-alt)!important;}
   h1{font-size:20px!important;}
   .toolbar{flex-direction:column;gap:6px;}
   .search-wrap{max-width:100%;min-width:100%;}
+  .benchmark-filter-wrapper{gap:8px;width:100%;}
+  .benchmark-category{flex-wrap:wrap;width:100%;}
+  .category-label{min-width:60px;}
+  .benchmark-pills{flex:1;}
+  .filter-actions{width:100%;justify-content:center;margin-left:0;margin-top:4px;}
   table{font-size:9px;}
   th,td{padding:6px 3px;}
   th.c-model,td.c-model{min-width:130px!important;}
@@ -221,65 +227,71 @@ body.dark tbody tr:hover td.c-model{background:var(--surface-alt)!important;}
     <input type="text" id="searchBox" placeholder="Search models..." oninput="filterModels()">
   </div>
   <span class="flbl">Show Benchmarks:</span>
-  <div class="dropdown-wrapper">
-    <button class="fb dropdown-btn" id="benchmarkDropdownBtn" onclick="toggleBenchmarkDropdown()">
-      <span id="selectedBenchmarksText">10 selected</span>
-      <span style="margin-left: 8px;">▼</span>
-    </button>
-    <div class="dropdown-menu" id="benchmarkDropdown" style="display: none;">
-      <div class="dropdown-header">
-        <button class="dropdown-action" onclick="selectAllBenchmarks()">Select All</button>
-        <button class="dropdown-action" onclick="deselectAllBenchmarks()">Deselect All</button>
+  <div class="benchmark-filter-wrapper">
+    <div class="benchmark-category">
+      <span class="category-icon">📐</span>
+      <span class="category-label">Math</span>
+      <div class="benchmark-pills">
+        <button class="benchmark-pill active" data-benchmark="gsm8k" onclick="toggleBenchmark('gsm8k')">GSM8K</button>
+        <button class="benchmark-pill active" data-benchmark="aime2026" onclick="toggleBenchmark('aime2026')">AIME 2026</button>
+        <button class="benchmark-pill active" data-benchmark="hmmt2026" onclick="toggleBenchmark('hmmt2026')">HMMT</button>
       </div>
-      <div class="dropdown-divider"></div>
-      <label class="dropdown-item">
-        <input type="checkbox" value="gsm8k" onchange="updateBenchmarkFilter()" checked>
-        <span class="bm-math">📐</span> GSM8K
-      </label>
-      <label class="dropdown-item">
-        <input type="checkbox" value="mmluPro" onchange="updateBenchmarkFilter()" checked>
-        <span class="bm-knowledge">🧠</span> MMLU-Pro
-      </label>
-      <label class="dropdown-item">
-        <input type="checkbox" value="gpqa" onchange="updateBenchmarkFilter()" checked>
-        <span class="bm-knowledge">🧠</span> GPQA Diamond
-      </label>
-      <label class="dropdown-item">
-        <input type="checkbox" value="hle" onchange="updateBenchmarkFilter()" checked>
-        <span class="bm-knowledge">🧠</span> HLE
-      </label>
-      <label class="dropdown-item">
-        <input type="checkbox" value="olmOcr" onchange="updateBenchmarkFilter()">
-        <span class="bm-vision">👁️</span> olmOCR
-      </label>
-      <label class="dropdown-item">
-        <input type="checkbox" value="sweVerified" onchange="updateBenchmarkFilter()" checked>
-        <span class="bm-coding">💻</span> SWE-bench Verified
-      </label>
-      <label class="dropdown-item">
-        <input type="checkbox" value="arguana" onchange="updateBenchmarkFilter()">
-        <span class="bm-embedding">🔍</span> ArguAna
-      </label>
-      <label class="dropdown-item">
-        <input type="checkbox" value="swePro" onchange="updateBenchmarkFilter()" checked>
-        <span class="bm-coding">💻</span> SWE-bench Pro
-      </label>
-      <label class="dropdown-item">
-        <input type="checkbox" value="aime2026" onchange="updateBenchmarkFilter()" checked>
-        <span class="bm-math">📐</span> AIME 2026
-      </label>
-      <label class="dropdown-item">
-        <input type="checkbox" value="terminalBench" onchange="updateBenchmarkFilter()" checked>
-        <span class="bm-agent">🤖</span> Terminal-Bench 2.0
-      </label>
-      <label class="dropdown-item">
-        <input type="checkbox" value="evasionBench" onchange="updateBenchmarkFilter()" checked>
-        <span class="bm-language">💬</span> EvasionBench
-      </label>
-      <label class="dropdown-item">
-        <input type="checkbox" value="hmmt2026" onchange="updateBenchmarkFilter()" checked>
-        <span class="bm-math">📐</span> HMMT Feb 2026
-      </label>
+    </div>
+    
+    <div class="benchmark-category">
+      <span class="category-icon">🧠</span>
+      <span class="category-label">Knowledge</span>
+      <div class="benchmark-pills">
+        <button class="benchmark-pill active" data-benchmark="mmluPro" onclick="toggleBenchmark('mmluPro')">MMLU-Pro</button>
+        <button class="benchmark-pill active" data-benchmark="gpqa" onclick="toggleBenchmark('gpqa')">GPQA◆</button>
+        <button class="benchmark-pill active" data-benchmark="hle" onclick="toggleBenchmark('hle')">HLE</button>
+      </div>
+    </div>
+    
+    <div class="benchmark-category">
+      <span class="category-icon">💻</span>
+      <span class="category-label">Coding</span>
+      <div class="benchmark-pills">
+        <button class="benchmark-pill active" data-benchmark="sweVerified" onclick="toggleBenchmark('sweVerified')">SWE-V</button>
+        <button class="benchmark-pill active" data-benchmark="swePro" onclick="toggleBenchmark('swePro')">SWE-Pro</button>
+      </div>
+    </div>
+    
+    <div class="benchmark-category">
+      <span class="category-icon">🤖</span>
+      <span class="category-label">Agent</span>
+      <div class="benchmark-pills">
+        <button class="benchmark-pill active" data-benchmark="terminalBench" onclick="toggleBenchmark('terminalBench')">TB 2.0</button>
+      </div>
+    </div>
+    
+    <div class="benchmark-category">
+      <span class="category-icon">💬</span>
+      <span class="category-label">Language</span>
+      <div class="benchmark-pills">
+        <button class="benchmark-pill active" data-benchmark="evasionBench" onclick="toggleBenchmark('evasionBench')">EvasionB</button>
+      </div>
+    </div>
+    
+    <div class="benchmark-category">
+      <span class="category-icon">👁️</span>
+      <span class="category-label">Vision</span>
+      <div class="benchmark-pills">
+        <button class="benchmark-pill" data-benchmark="olmOcr" onclick="toggleBenchmark('olmOcr')">olmOCR</button>
+      </div>
+    </div>
+    
+    <div class="benchmark-category">
+      <span class="category-icon">🔍</span>
+      <span class="category-label">Embedding</span>
+      <div class="benchmark-pills">
+        <button class="benchmark-pill" data-benchmark="arguana" onclick="toggleBenchmark('arguana')">ArguAna</button>
+      </div>
+    </div>
+    
+    <div class="filter-actions">
+      <button class="filter-action-btn" onclick="selectAllBenchmarks()">Select All</button>
+      <button class="filter-action-btn" onclick="deselectAllBenchmarks()">Clear All</button>
     </div>
   </div>
   <div style="flex: 1"></div>
@@ -2676,50 +2688,60 @@ const BENCHMARK_CATEGORIES = {
   'evasionBench': 'language'
 };
 
-// Dropdown functions
-function toggleBenchmarkDropdown() {
-  const dropdown = document.getElementById('benchmarkDropdown');
-  dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
-}
+// Benchmark filter functions
+let selectedBenchmarks = ['gsm8k', 'mmluPro', 'gpqa', 'hle', 'sweVerified', 'swePro', 'aime2026', 'terminalBench', 'evasionBench', 'hmmt2026'];
 
-// Close dropdown when clicking outside
-document.addEventListener('click', function(event) {
-  const dropdown = document.getElementById('benchmarkDropdown');
-  const btn = document.getElementById('benchmarkDropdownBtn');
-  if (dropdown && btn && !dropdown.contains(event.target) && !btn.contains(event.target)) {
-    dropdown.style.display = 'none';
+function toggleBenchmark(benchmarkKey) {
+  const pill = document.querySelector(`.benchmark-pill[data-benchmark="${benchmarkKey}"]`);
+  
+  if (selectedBenchmarks.includes(benchmarkKey)) {
+    // Deselect
+    selectedBenchmarks = selectedBenchmarks.filter(b => b !== benchmarkKey);
+    pill.classList.remove('active');
+  } else {
+    // Select
+    selectedBenchmarks.push(benchmarkKey);
+    pill.classList.add('active');
   }
-});
-
-function getSelectedBenchmarks() {
-  const checkboxes = document.querySelectorAll('#benchmarkDropdown input[type="checkbox"]:checked');
-  return Array.from(checkboxes).map(cb => cb.value);
+  
+  // Update table
+  filterByBenchmarks(selectedBenchmarks);
 }
 
-function updateBenchmarkFilter() {
-  const selectedBenchmarks = getSelectedBenchmarks();
-  const count = selectedBenchmarks.length;
+function selectAllBenchmarks() {
+  // Get all benchmarks from BENCHMARK_CATEGORIES
+  selectedBenchmarks = Object.keys(BENCHMARK_CATEGORIES);
   
-  // Update button text
-  document.getElementById('selectedBenchmarksText').textContent = 
-    count === 0 ? 'None selected' : 
-    count === 12 ? 'All benchmarks' : 
-    `${count} selected`;
+  // Update all pills to active
+  document.querySelectorAll('.benchmark-pill').forEach(pill => {
+    pill.classList.add('active');
+  });
   
-  // Filter table by selected benchmarks
+  // Update table
   filterByBenchmarks(selectedBenchmarks);
 }
 
-function selectAllBenchmarks() {
-  const checkboxes = document.querySelectorAll('#benchmarkDropdown input[type="checkbox"]');
-  checkboxes.forEach(cb => cb.checked = true);
-  updateBenchmarkFilter();
+function deselectAllBenchmarks() {
+  selectedBenchmarks = [];
+  
+  // Update all pills to inactive
+  document.querySelectorAll('.benchmark-pill').forEach(pill => {
+    pill.classList.remove('active');
+  });
+  
+  // Update table
+  filterByBenchmarks(selectedBenchmarks);
 }
 
-function deselectAllBenchmarks() {
-  const checkboxes = document.querySelectorAll('#benchmarkDropdown input[type="checkbox"]');
-  checkboxes.forEach(cb => cb.checked = false);
-  updateBenchmarkFilter();
+function initBenchmarkFilter() {
+  // Set initial active states based on selectedBenchmarks array
+  selectedBenchmarks.forEach(benchKey => {
+    const pill = document.querySelector(`.benchmark-pill[data-benchmark="${benchKey}"]`);
+    if (pill) pill.classList.add('active');
+  });
+  
+  // Initial table population
+  filterByBenchmarks(selectedBenchmarks);
 }
 
 function filterByBenchmarks(selectedBenchmarks) {
@@ -2774,18 +2796,14 @@ function filterByBenchmarks(selectedBenchmarks) {
 }
 
 function init() {
-  // Start with 'default' category which excludes vision and embedding
-  currentCategory = 'default';
-  populateTableWithDefaultHidden();
+  // Initialize benchmark filter (defaults to 10 benchmarks selected, excluding vision and embedding)
+  initBenchmarkFilter();
   
   // Load dark mode preference
   if (localStorage.getItem('dark') === 'true') {
     document.body.classList.add('dark');
     document.getElementById('darkBtn').textContent = '☀️ Light';
   }
-  
-  // Initialize dropdown text
-  updateBenchmarkFilter();
 }
 
 function populateTableWithDefaultHidden() {