Upload 3 files

index.html

@@ -30,6 +30,87 @@
     <!-- populated by script.js -->
   </section>
 
+  <div class="controls">
+    <div class="filter-wrap">
+      <button
+        type="button"
+        class="search-circle-btn filter-btn tooltip"
+        id="params-filter-btn"
+        aria-label="Filter by parameter count"
+        aria-expanded="false"
+        data-tooltip="Filter by parameter count">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+          <line x1="4" y1="6" x2="20" y2="6"/><circle cx="9" cy="6" r="2"/>
+          <line x1="4" y1="12" x2="20" y2="12"/><circle cx="16" cy="12" r="2"/>
+          <line x1="4" y1="18" x2="20" y2="18"/><circle cx="7" cy="18" r="2"/>
+        </svg>
+      </button>
+
+      <div class="filter-popup" id="params-filter-popup" hidden>
+        <div class="filter-popup-title">Parameters (B)</div>
+        <div class="range-slider" id="params-range-slider">
+          <div class="range-slider-track"></div>
+          <div class="range-slider-fill" id="params-range-fill"></div>
+          <input type="range" id="params-range-min" class="range-thumb range-thumb-min" min="0" max="100" step="0.1" value="0" aria-label="Minimum parameters in billions">
+          <input type="range" id="params-range-max" class="range-thumb range-thumb-max" min="0" max="100" step="0.1" value="100" aria-label="Maximum parameters in billions">
+        </div>
+        <div class="range-slider-values">
+          <span id="params-range-min-label">0B</span>
+          <span id="params-range-max-label">100B+</span>
+        </div>
+        <button type="button" class="filter-reset" id="params-filter-reset">Reset</button>
+      </div>
+    </div>
+
+    <div class="search-pill">
+      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="6"/><line x1="20" y1="20" x2="15.5" y2="15.5"/></svg>
+      <input type="search" id="model-search" placeholder="Search models or orgs…" aria-label="Search models">
+    </div>
+
+    <div class="sort-select-wrap">
+      <select class="pill-select" id="sort-select" aria-label="Sort order">
+        <option value="score-desc">Score: High → Low</option>
+        <option value="score-asc">Score: Low → High</option>
+        <option value="params-asc">Params: Small → Large</option>
+        <option value="params-desc">Params: Large → Small</option>
+        <option value="name-asc">Name: A → Z</option>
+      </select>
+      <span class="select-arrow">▼</span>
+    </div>
+  </div>
+
+  <div class="table-scroll">
+    <table class="leaderboard" id="leaderboard-table">
+      <thead id="leaderboard-head">
+        <!-- populated by script.js: rank/model/params + one column per metric for the active benchmark -->
+      </thead>
+      <tbody id="leaderboard-body">
+        <!-- populated by script.js -->
+      </tbody>
+    </table>
+    <div class="empty-state" id="empty-state" hidden>
+      <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>
+      <p>No models match your search or filters on this benchmark yet.</p>
+    </div>
+    <div class="unavailable-state" id="unavailable-state" hidden>
+      <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 9v4M12 17h.01M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z"/></svg>
+      <p id="unavailable-text">This benchmark is unavailable.</p>
+    </div>
+  </div>
+
+  <section class="detail-panel" id="detail-panel" aria-live="polite">
+    <div class="detail-panel-header">
+      <div>
+        <h2 id="detail-title">Model</h2>
+        <p id="detail-subtitle">Per-category breakdown</p>
+      </div>
+      <button class="detail-close" id="detail-close" aria-label="Close detail panel">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+      </button>
+    </div>
+    <div class="cat-grid" id="detail-cats"></div>
+  </section>
+
   <section class="submit-panel" aria-label="Submission rules">
     <button class="submit-toggle" id="submit-toggle" aria-expanded="false" aria-controls="submit-body">
       <span class="submit-toggle-left">
@@ -41,18 +122,17 @@
 
     <div class="submit-body" id="submit-body" hidden>
       <p class="submit-intro">
-        There's no submission form; the leaderboard <em>is</em> <code>models.json</code>.
+        There's no submission form — the leaderboard <em>is</em> <code>models.json</code>.
         Add your entry and open a PR against this Space.
       </p>
 
       <h3>Rules</h3>
       <ul class="rules-list">
         <li>Model must be public on the Hugging Face Hub, with a link in <code>url</code>.</li>
-        <li>Evaluated on at least one Bench Labs benchmark using the method described in that dataset's README (lm-eval loglikelihood for <code>bench-mid-6-2026</code>, normalized exact-match for <code>bench-effortless-6-2026</code> / <code>bench-easy-6-2026</code>, blind panel rank-order for <code>bench-AGI</code>).</li>
+        <li>Evaluated on at least one Bench Labs benchmark using the method described in that dataset's README (lm-eval loglikelihood for <code>bench-mid-6-2026</code>, normalized exact-match for <code>bench-effortless-6-2026</code> / <code>bench-easy-6-2026</code>).</li>
         <li>Include <code>n</code> (sample count) for every benchmark you report a score for.</li>
         <li>If reporting a <code>bench-mid-6-2026</code> result, include the full <code>categories</code> breakdown, not just the headline score — this is what powers the detail panel.</li>
         <li>Link to your eval run or write-up in <code>eval_source</code> (a blog post, a script, a notebook — anything reproducible).</li>
-        <li>No self-graded <code>bench-AGI</code> scores: the grader panel must not include the model being evaluated.</li>
         <li>One model per entry. If you have multiple checkpoints, submit them separately with distinct <code>id</code>s.</li>
       </ul>
 
@@ -76,8 +156,7 @@
   "runs": {
     "bench-effortless-6-2026": { "score": 0.0, "n": 240, "notes": "" },
     "bench-easy-6-2026":       { "score": 0.0, "n": 300, "notes": "" },
-    "bench-mid-6-2026":        { "score": null, "n": null, "notes": "" },
-    "bench-AGI":                { "score": null, "n": null, "notes": "" }
+    "bench-mid-6-2026":        { "score": null, "n": null, "notes": "" }
   }
 }</code></pre>
 
@@ -88,62 +167,6 @@
     </div>
   </section>
 
-  <div class="controls">
-    <div class="search-pill">
-      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="6"/><line x1="20" y1="20" x2="15.5" y2="15.5"/></svg>
-      <input type="search" id="model-search" placeholder="Search models or orgs…" aria-label="Search models">
-    </div>
-
-    <div class="metric-select-wrap">
-      <select class="pill-select" id="metric-select" aria-label="Metric"></select>
-      <span class="select-arrow">▼</span>
-    </div>
-
-    <div class="sort-select-wrap">
-      <select class="pill-select" id="sort-select" aria-label="Sort order">
-        <option value="score-desc">Score: High → Low</option>
-        <option value="score-asc">Score: Low → High</option>
-        <option value="params-asc">Params: Small → Large</option>
-        <option value="params-desc">Params: Large → Small</option>
-        <option value="name-asc">Name: A → Z</option>
-      </select>
-      <span class="select-arrow">▼</span>
-    </div>
-  </div>
-
-  <div class="table-scroll">
-    <table class="leaderboard" id="leaderboard-table">
-      <thead>
-        <tr>
-          <th data-key="rank" style="width:46px;">#</th>
-          <th data-key="name">Model</th>
-          <th data-key="params">Params</th>
-          <th data-key="score">Score <span class="sort-arrow">▼</span></th>
-        </tr>
-      </thead>
-      <tbody id="leaderboard-body">
-        <!-- populated by script.js -->
-      </tbody>
-    </table>
-    <div class="empty-state" id="empty-state" hidden>
-      <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>
-      <p>No models match that search on this benchmark yet.</p>
-    </div>
-  </div>
-
-  <section class="detail-panel" id="detail-panel" aria-live="polite">
-    <div class="detail-panel-header">
-      <div>
-        <h2 id="detail-title">Model</h2>
-        <p id="detail-subtitle">Per-category breakdown</p>
-      </div>
-      <button class="detail-close" id="detail-close" aria-label="Close detail panel">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
-      </button>
-    </div>
-    <div class="cat-grid" id="detail-cats"></div>
-  </section>
-
   <footer class="page-footer">
     <span>Data from <a href="models.json">models.json</a> · loaded client-side, no build step.</span>
     <span>

script.js

@@ -6,19 +6,34 @@
     activeBenchmark: null,
     search: "",
     sort: "score-desc",
+    paramsBounds: { min: 0, max: 100 }, // full data range, computed on load
+    paramsFilter: { min: 0, max: 100 }, // current filter selection
   };
 
   const els = {};
 
+  // Per-benchmark metric columns, in display order. "score" always maps to
+  // the headline number every run object carries; the rest are the extra
+  // numeric fields lm-eval-style runs report (acc, acc_norm, etc).
+  const METRIC_LABELS = {
+    score: "Score",
+    acc: "acc",
+    acc_norm: "acc_norm",
+    soft_score: "soft_score",
+    soft_score_norm: "soft_score_norm",
+  };
+
   document.addEventListener("DOMContentLoaded", init);
 
   async function init() {
     els.tierStrip = document.getElementById("tier-strip");
-    els.metricSelect = document.getElementById("metric-select");
     els.sortSelect = document.getElementById("sort-select");
     els.searchInput = document.getElementById("model-search");
+    els.thead = document.getElementById("leaderboard-head");
     els.tbody = document.getElementById("leaderboard-body");
     els.emptyState = document.getElementById("empty-state");
+    els.unavailableState = document.getElementById("unavailable-state");
+    els.unavailableText = document.getElementById("unavailable-text");
     els.table = document.getElementById("leaderboard-table");
     els.detailPanel = document.getElementById("detail-panel");
     els.detailTitle = document.getElementById("detail-title");
@@ -27,6 +42,14 @@
     els.detailClose = document.getElementById("detail-close");
     els.submitToggle = document.getElementById("submit-toggle");
     els.submitBody = document.getElementById("submit-body");
+    els.filterBtn = document.getElementById("params-filter-btn");
+    els.filterPopup = document.getElementById("params-filter-popup");
+    els.rangeMin = document.getElementById("params-range-min");
+    els.rangeMax = document.getElementById("params-range-max");
+    els.rangeFill = document.getElementById("params-range-fill");
+    els.rangeMinLabel = document.getElementById("params-range-min-label");
+    els.rangeMaxLabel = document.getElementById("params-range-max-label");
+    els.filterReset = document.getElementById("params-filter-reset");
 
     bindSubmitPanel();
 
@@ -39,18 +62,20 @@
       return;
     }
 
-    state.activeBenchmark = state.data.benchmarks[0]?.id || null;
+    // Land on the first available (non-unavailable) benchmark if possible.
+    const firstAvailable = state.data.benchmarks.find((b) => !b.unavailable);
+    state.activeBenchmark = (firstAvailable || state.data.benchmarks[0])?.id || null;
 
+    initParamsBounds();
     buildTierStrip();
-    buildMetricSelect();
     bindControls();
+    bindParamsFilter();
     render();
   }
 
   function renderLoadError(err) {
-    els.tbody = document.getElementById("leaderboard-body");
     els.tbody.innerHTML =
-      '<tr><td colspan="4" style="padding:32px;text-align:center;color:var(--muted);">' +
+      '<tr><td colspan="6" style="padding:32px;text-align:center;color:var(--muted);">' +
       "Couldn't load <code>models.json</code> (" + escapeHtml(String(err.message || err)) +
       "). Make sure it sits next to index.html." +
       "</td></tr>";
@@ -77,13 +102,19 @@
       .forEach((bench) => {
         const card = document.createElement("button");
         card.type = "button";
-        card.className = "tier-card" + (bench.id === state.activeBenchmark ? " active" : "");
+        card.className =
+          "tier-card" +
+          (bench.id === state.activeBenchmark ? " active" : "") +
+          (bench.unavailable ? " is-unavailable" : "");
         card.dataset.benchmarkId = bench.id;
 
         const rowsLabel = bench.rows != null ? bench.rows + " rows" : "open-ended";
+        const badge = bench.unavailable
+          ? '<span class="tier-badge-unavailable">Unavailable</span>'
+          : "";
 
         card.innerHTML =
-          '<span class="tier-num">Tier ' + bench.tier + " · " + escapeHtml(bench.label) + "</span>" +
+          '<span class="tier-num">Tier ' + bench.tier + " · " + escapeHtml(bench.label) + badge + "</span>" +
           "<h3>" + escapeHtml(bench.id) + "</h3>" +
           "<p>" + escapeHtml(bench.description) + "</p>" +
           '<div class="tier-meta">' +
@@ -95,7 +126,6 @@
           state.activeBenchmark = bench.id;
           closeDetail();
           buildTierStrip();
-          buildMetricSelect();
           render();
         });
 
@@ -106,43 +136,6 @@
     els.tierStrip.appendChild(frag);
   }
 
-  // -------------------- METRIC SELECT --------------------
-
-  function buildMetricSelect() {
-    const bench = getActiveBenchmark();
-    if (!bench) return;
-
-    // Collect every metric key present across model runs for this benchmark,
-    // beyond the headline "score", so users can pivot (acc vs acc_norm etc).
-    const keys = new Set(["score"]);
-    state.data.models.forEach((m) => {
-      const run = m.runs?.[bench.id];
-      if (!run) return;
-      Object.keys(run).forEach((k) => {
-        if (typeof run[k] === "number" && k !== "n" && k !== "stderr") keys.add(k);
-      });
-    });
-
-    const labels = {
-      score: "Headline score",
-      acc: "acc",
-      acc_norm: "acc_norm",
-      soft_score: "soft_score",
-      soft_score_norm: "soft_score_norm",
-      stderr: "stderr",
-    };
-
-    const prev = els.metricSelect.value;
-    els.metricSelect.innerHTML = "";
-    Array.from(keys).forEach((k) => {
-      const opt = document.createElement("option");
-      opt.value = k;
-      opt.textContent = labels[k] || k;
-      els.metricSelect.appendChild(opt);
-    });
-    if (keys.has(prev)) els.metricSelect.value = prev;
-  }
-
   // -------------------- CONTROLS --------------------
 
   function bindControls() {
@@ -156,24 +149,114 @@
       render();
     });
 
-    els.metricSelect.addEventListener("change", render);
+    els.detailClose.addEventListener("click", closeDetail);
+  }
 
-    els.table.querySelectorAll("thead th[data-key]").forEach((th) => {
-      th.addEventListener("click", () => {
-        const key = th.dataset.key;
-        if (key === "score") {
-          state.sort = state.sort === "score-desc" ? "score-asc" : "score-desc";
-        } else if (key === "params") {
-          state.sort = state.sort === "params-asc" ? "params-desc" : "params-asc";
-        } else if (key === "name") {
-          state.sort = "name-asc";
-        }
-        els.sortSelect.value = state.sort;
-        render();
-      });
+  // -------------------- PARAMS FILTER --------------------
+
+  // Derive slider bounds from the actual dataset so the range always matches
+  // whatever models are in models.json (no hardcoded cap).
+  function initParamsBounds() {
+    const values = state.data.models
+      .map((m) => m.params_b)
+      .filter((v) => typeof v === "number");
+
+    let min = 0;
+    let max = values.length ? Math.max(...values) : 100;
+    // round the ceiling up a bit so the top model's dot isn't pinned to the
+    // very edge of the track, and so the slider still makes sense with 1 model
+    max = Math.max(1, Math.ceil(max * 1.1 * 10) / 10);
+
+    state.paramsBounds = { min, max };
+    state.paramsFilter = { min, max };
+
+    els.rangeMin.min = String(min);
+    els.rangeMin.max = String(max);
+    els.rangeMin.step = "0.1";
+    els.rangeMin.value = String(min);
+
+    els.rangeMax.min = String(min);
+    els.rangeMax.max = String(max);
+    els.rangeMax.step = "0.1";
+    els.rangeMax.value = String(max);
+  }
+
+  function bindParamsFilter() {
+    if (!els.filterBtn) return;
+
+    els.filterBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const open = els.filterBtn.getAttribute("aria-expanded") === "true";
+      setFilterPopupOpen(!open);
     });
 
-    els.detailClose.addEventListener("click", closeDetail);
+    document.addEventListener("click", (e) => {
+      if (els.filterPopup.hidden) return;
+      if (els.filterPopup.contains(e.target) || els.filterBtn.contains(e.target)) return;
+      setFilterPopupOpen(false);
+    });
+
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && !els.filterPopup.hidden) setFilterPopupOpen(false);
+    });
+
+    const onSlide = () => {
+      let lo = parseFloat(els.rangeMin.value);
+      let hi = parseFloat(els.rangeMax.value);
+      // keep the two thumbs from crossing
+      if (lo > hi) {
+        [lo, hi] = [hi, lo];
+      }
+      state.paramsFilter = { min: lo, max: hi };
+      updateRangeVisuals();
+      render();
+    };
+
+    els.rangeMin.addEventListener("input", onSlide);
+    els.rangeMax.addEventListener("input", onSlide);
+
+    els.filterReset.addEventListener("click", () => {
+      const { min, max } = state.paramsBounds;
+      state.paramsFilter = { min, max };
+      els.rangeMin.value = String(min);
+      els.rangeMax.value = String(max);
+      updateRangeVisuals();
+      render();
+    });
+
+    updateRangeVisuals();
+  }
+
+  function setFilterPopupOpen(open) {
+    els.filterPopup.hidden = !open;
+    els.filterBtn.setAttribute("aria-expanded", String(open));
+  }
+
+  function isParamsFilterActive() {
+    const { min, max } = state.paramsBounds;
+    return state.paramsFilter.min > min || state.paramsFilter.max < max;
+  }
+
+  function updateRangeVisuals() {
+    const { min, max } = state.paramsBounds;
+    const span = Math.max(0.0001, max - min);
+    const loPct = ((state.paramsFilter.min - min) / span) * 100;
+    const hiPct = ((state.paramsFilter.max - min) / span) * 100;
+
+    els.rangeFill.style.left = loPct.toFixed(2) + "%";
+    els.rangeFill.style.right = (100 - hiPct).toFixed(2) + "%";
+
+    const fmt = (v) => {
+      const isMax = v >= max;
+      const rounded = Math.round(v * 10) / 10;
+      return (Number.isInteger(rounded) ? rounded.toFixed(0) : rounded.toFixed(1)) + "B" + (isMax ? "+" : "");
+    };
+    els.rangeMinLabel.textContent = fmt(state.paramsFilter.min);
+    els.rangeMaxLabel.textContent = fmt(state.paramsFilter.max);
+
+    const active = isParamsFilterActive();
+    els.filterBtn.classList.toggle("has-active-filter", active);
+    els.filterReset.disabled = !active;
   }
 
   // -------------------- HELPERS --------------------
@@ -182,6 +265,26 @@
     return state.data.benchmarks.find((b) => b.id === state.activeBenchmark) || null;
   }
 
+  // Every metric column to show for this benchmark: "score" first, then any
+  // other numeric fields present on any model's run object (acc, acc_norm...).
+  function getMetricColumns(bench) {
+    const keys = ["score"];
+    const seen = new Set(keys);
+    state.data.models.forEach((m) => {
+      const run = m.runs?.[bench.id];
+      if (!run) return;
+      Object.keys(run).forEach((k) => {
+        if (k === "n" || k === "stderr" || k === "notes" || k === "categories") return;
+        if (typeof run[k] !== "number") return;
+        if (!seen.has(k)) {
+          seen.add(k);
+          keys.push(k);
+        }
+      });
+    });
+    return keys;
+  }
+
   function getMetricValue(run, metricKey) {
     if (!run) return null;
     const v = run[metricKey];
@@ -214,11 +317,22 @@
     const bench = getActiveBenchmark();
     if (!bench) return;
 
-    const metricKey = els.metricSelect.value || "score";
+    if (bench.unavailable) {
+      els.table.hidden = true;
+      els.emptyState.hidden = true;
+      els.unavailableState.hidden = false;
+      els.unavailableText.textContent =
+        bench.unavailable_reason || (bench.id + " is currently unavailable.");
+      closeDetail();
+      return;
+    }
+
+    const metricCols = getMetricColumns(bench);
+    buildHead(metricCols);
 
     let rows = state.data.models.map((m) => {
       const run = m.runs?.[bench.id] || null;
-      const value = getMetricValue(run, metricKey);
+      const value = getMetricValue(run, "score");
       return { model: m, run, value };
     });
 
@@ -230,28 +344,95 @@
       );
     }
 
+    if (isParamsFilterActive()) {
+      const { min, max } = state.paramsFilter;
+      const { max: dataMax } = state.paramsBounds;
+      rows = rows.filter((r) => {
+        const p = r.model.params_b;
+        if (p == null) return false; // unknown size excluded once a filter is set
+        if (max >= dataMax) return p >= min; // top thumb at the ceiling = open-ended "+"
+        return p >= min && p <= max;
+      });
+    }
+
     rows = sortRows(rows, state.sort);
 
     els.tbody.innerHTML = "";
     if (rows.length === 0) {
       els.emptyState.hidden = false;
+      els.unavailableState.hidden = true;
       els.table.hidden = true;
       return;
     }
     els.emptyState.hidden = true;
+    els.unavailableState.hidden = true;
     els.table.hidden = false;
 
     const frag = document.createDocumentFragment();
     rows.forEach((r, idx) => {
-      frag.appendChild(buildRow(r, idx + 1, bench));
+      frag.appendChild(buildRow(r, idx + 1, bench, metricCols));
     });
     els.tbody.appendChild(frag);
 
     updateSortIndicators();
   }
 
+  function buildHead(metricCols) {
+    const tr = document.createElement("tr");
+
+    const thRank = document.createElement("th");
+    thRank.dataset.key = "rank";
+    thRank.style.width = "46px";
+    thRank.textContent = "#";
+    tr.appendChild(thRank);
+
+    const thName = document.createElement("th");
+    thName.dataset.key = "name";
+    thName.textContent = "Model";
+    tr.appendChild(thName);
+
+    const thParams = document.createElement("th");
+    thParams.dataset.key = "params";
+    thParams.innerHTML = "Params <span class=\"sort-arrow\">▼</span>";
+    tr.appendChild(thParams);
+
+    const thN = document.createElement("th");
+    thN.textContent = "n";
+    tr.appendChild(thN);
+
+    metricCols.forEach((key, i) => {
+      const th = document.createElement("th");
+      th.dataset.key = i === 0 ? "score" : "metric-" + key;
+      const label = METRIC_LABELS[key] || key;
+      th.innerHTML = escapeHtml(label) + (i === 0 ? ' <span class="sort-arrow">▼</span>' : "");
+      tr.appendChild(th);
+    });
+
+    els.thead.innerHTML = "";
+    els.thead.appendChild(tr);
+
+    // (re)bind header click-to-sort now that the head was rebuilt
+    els.thead.querySelectorAll("th[data-key]").forEach((th) => {
+      th.addEventListener("click", () => {
+        const key = th.dataset.key;
+        if (key === "score") {
+          state.sort = state.sort === "score-desc" ? "score-asc" : "score-desc";
+        } else if (key === "params") {
+          state.sort = state.sort === "params-asc" ? "params-desc" : "params-asc";
+        } else if (key === "name") {
+          state.sort = "name-asc";
+        } else {
+          return; // secondary metric columns are informational, not sortable
+        }
+        els.sortSelect.value = state.sort;
+        render();
+      });
+    });
+
+    updateSortIndicators();
+  }
+
   function sortRows(rows, sort) {
-    const withScore = (r) => (r.value == null ? -Infinity : r.value);
     const withParams = (r) => (r.model.params_b == null ? Infinity : r.model.params_b);
 
     switch (sort) {
@@ -280,7 +461,8 @@
   }
 
   function updateSortIndicators() {
-    els.table.querySelectorAll("thead th[data-key]").forEach((th) => {
+    if (!els.thead) return;
+    els.thead.querySelectorAll("th[data-key]").forEach((th) => {
       th.classList.remove("sorted");
       const arrow = th.querySelector(".sort-arrow");
       if (!arrow) return;
@@ -296,7 +478,7 @@
     });
   }
 
-  function buildRow(r, rank, bench) {
+  function buildRow(r, rank, bench, metricCols) {
     const tr = document.createElement("tr");
     const { model, run, value } = r;
 
@@ -322,21 +504,37 @@
     paramsTd.textContent = model.params_b != null ? model.params_b + "B" : "—";
     tr.appendChild(paramsTd);
 
-    // score
-    const scoreTd = document.createElement("td");
-    scoreTd.className = "score-cell";
-    if (value == null) {
-      scoreTd.innerHTML = '<span class="score-na">not evaluated</span>';
-    } else {
-      const pct = Math.max(0, Math.min(100, value * 100));
-      const cls = scoreClass(value);
-      scoreTd.innerHTML =
-        '<span class="score-pill">' +
-        '<span class="score-num ' + cls + '">' + fmtScore(value) + "</span>" +
-        '<span class="score-bar-track"><span class="score-bar-fill" style="width:' + pct.toFixed(1) + '%"></span></span>' +
-        "</span>";
-    }
-    tr.appendChild(scoreTd);
+    // n (sample count)
+    const nTd = document.createElement("td");
+    nTd.className = "n-cell";
+    nTd.textContent = run && run.n != null ? String(run.n) : "—";
+    tr.appendChild(nTd);
+
+    // one cell per metric column
+    metricCols.forEach((key, i) => {
+      const td = document.createElement("td");
+      const v = getMetricValue(run, key);
+
+      if (i === 0) {
+        // primary "score" column: bar + colored number
+        td.className = "score-cell";
+        if (v == null) {
+          td.innerHTML = '<span class="score-na">not evaluated</span>';
+        } else {
+          const pct = Math.max(0, Math.min(100, v * 100));
+          const cls = scoreClass(v);
+          td.innerHTML =
+            '<span class="score-pill">' +
+            '<span class="score-num ' + cls + '">' + fmtScore(v) + "</span>" +
+            '<span class="score-bar-track"><span class="score-bar-fill" style="width:' + pct.toFixed(1) + '%"></span></span>' +
+            "</span>";
+        }
+      } else {
+        td.className = "metric-cell";
+        td.innerHTML = v == null ? '<span class="metric-na">—</span>' : fmtScore(v);
+      }
+      tr.appendChild(td);
+    });
 
     if (run && run.categories) {
       tr.style.cursor = "pointer";

style.css

@@ -116,23 +116,6 @@ a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-
     to   { transform: translateX(120vw) scale(var(--cloud-scale, 1)); }
 }
 
-.grass {
-    position: fixed;
-    bottom: -2px; left: 0;
-    width: 100%; height: 70px;
-    z-index: 50;
-    pointer-events: none;
-}
-
-@keyframes blade-sway {
-    from { transform: rotate(-2.4deg); }
-    to   { transform: rotate(3.2deg); }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .grass path { animation: none !important; }
-}
-
 /* -------------------- LAYOUT -------------------- */
 
 .container {
@@ -410,10 +393,188 @@ a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-
 
 .search-pill svg { color: var(--muted); flex-shrink: 0; margin-right: 2px; }
 
-.metric-select-wrap, .sort-select-wrap {
+.sort-select-wrap {
+    position: relative;
+}
+
+/* -------------------- FILTER BUTTON + POPUP -------------------- */
+
+.filter-wrap {
+    position: relative;
+    flex-shrink: 0;
+}
+
+.search-circle-btn {
+    flex-shrink: 0;
+    width: 42px;
+    height: 42px;
+    border-radius: 50%;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    color: var(--accent);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background var(--transition), border-color var(--transition), transform var(--transition), color var(--transition);
+    backdrop-filter: blur(20px) saturate(1.2);
+    -webkit-backdrop-filter: blur(20px) saturate(1.2);
+    box-shadow: var(--shadow-soft);
+    font-family: inherit;
+}
+
+.search-circle-btn:hover {
+    background: #fff;
+    border-color: var(--accent);
+    transform: scale(1.05);
+}
+
+.search-circle-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+.filter-btn.has-active-filter {
+    background: var(--accent);
+    border-color: var(--accent);
+    color: #fff;
+}
+
+.filter-btn[aria-expanded="true"] {
+    background: #fff;
+    border-color: var(--accent);
+    color: var(--accent);
+}
+
+.filter-btn.has-active-filter[aria-expanded="true"] {
+    background: var(--accent);
+    color: #fff;
+}
+
+.filter-popup {
+    position: absolute;
+    top: calc(100% + 10px);
+    left: 0;
+    z-index: 200;
+    width: 260px;
+    padding: 16px;
+    background: var(--surface-2);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    backdrop-filter: blur(20px) saturate(1.2);
+    -webkit-backdrop-filter: blur(20px) saturate(1.2);
+    box-shadow: var(--shadow-hover);
+}
+
+.filter-popup-title {
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--muted);
+    font-weight: 600;
+    margin-bottom: 16px;
+}
+
+/* dual-thumb range slider */
+.range-slider {
     position: relative;
+    height: 20px;
+    margin: 4px 2px 10px;
+}
+
+.range-slider-track {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    height: 4px;
+    transform: translateY(-50%);
+    background: rgba(120, 160, 200, 0.22);
+    border-radius: 999px;
+}
+
+.range-slider-fill {
+    position: absolute;
+    top: 50%;
+    height: 4px;
+    transform: translateY(-50%);
+    background: linear-gradient(90deg, var(--accent-soft), var(--accent));
+    border-radius: 999px;
+    left: 0%;
+    right: 0%;
+}
+
+.range-thumb {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    margin: 0;
+    transform: translateY(-50%);
+    -webkit-appearance: none;
+    appearance: none;
+    background: transparent;
+    pointer-events: none;
+    height: 20px;
+}
+
+.range-thumb::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    pointer-events: auto;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: #fff;
+    border: 2px solid var(--accent);
+    box-shadow: 0 2px 6px rgba(74, 144, 194, 0.35);
+    cursor: pointer;
+    transition: transform 0.15s ease;
+}
+
+.range-thumb::-webkit-slider-thumb:hover { transform: scale(1.15); }
+.range-thumb::-webkit-slider-thumb:active { transform: scale(1.05); }
+
+.range-thumb::-moz-range-thumb {
+    pointer-events: auto;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #fff;
+    border: 2px solid var(--accent);
+    box-shadow: 0 2px 6px rgba(74, 144, 194, 0.35);
+    cursor: pointer;
+}
+
+.range-thumb::-webkit-slider-runnable-track { background: transparent; }
+.range-thumb::-moz-range-track { background: transparent; }
+
+.range-thumb:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+.range-slider-values {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.78rem;
+    color: var(--heading);
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    margin-bottom: 14px;
+}
+
+.filter-reset {
+    width: 100%;
+    padding: 8px 10px;
+    border-radius: 999px;
+    border: 1px solid var(--border-soft);
+    background: rgba(255,255,255,0.5);
+    color: var(--text);
+    font-size: 0.78rem;
+    font-family: inherit;
+    cursor: pointer;
+    transition: background var(--transition), border-color var(--transition), color var(--transition);
 }
 
+.filter-reset:hover { background: rgba(255,255,255,0.85); border-color: rgba(74,144,194,0.4); }
+.filter-reset:disabled { opacity: 0.5; cursor: default; }
+.filter-reset:disabled:hover { background: rgba(255,255,255,0.5); border-color: var(--border-soft); }
+
 .pill-select {
     appearance: none;
     -webkit-appearance: none;
@@ -554,6 +715,29 @@ table.leaderboard td {
     white-space: nowrap;
 }
 
+.metric-cell {
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+    font-size: 0.88rem;
+    color: var(--text);
+}
+
+.metric-cell.is-primary { font-weight: 700; font-size: 0.95rem; }
+
+.metric-cell .metric-na {
+    color: var(--muted);
+    font-style: italic;
+    font-weight: 400;
+    font-size: 0.82rem;
+}
+
+.n-cell {
+    font-variant-numeric: tabular-nums;
+    color: var(--muted);
+    font-size: 0.8rem;
+    white-space: nowrap;
+}
+
 .score-pill {
     display: inline-flex;
     align-items: center;
@@ -605,6 +789,38 @@ table.leaderboard td {
 
 .empty-state svg { margin-bottom: 14px; color: var(--accent-soft); }
 
+.unavailable-state {
+    padding: 60px 24px;
+    text-align: center;
+    color: var(--muted);
+}
+
+.unavailable-state svg { margin-bottom: 14px; color: #d99a3e; }
+.unavailable-state p { max-width: 420px; margin: 0 auto; line-height: 1.6; }
+
+.tier-card.is-unavailable {
+    opacity: 0.72;
+    cursor: pointer;
+}
+
+.tier-card.is-unavailable:hover { opacity: 0.9; }
+
+.tier-badge-unavailable {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: 8px;
+    padding: 2px 8px;
+    border-radius: 999px;
+    background: rgba(217, 154, 62, 0.16);
+    color: #b5791f;
+    font-size: 0.62rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    vertical-align: middle;
+}
+
 /* -------------------- DETAIL PANEL -------------------- */
 
 .detail-panel {
@@ -721,6 +937,8 @@ table.leaderboard td {
 @media (max-width: 640px) {
     .container { padding: 40px 16px 32px; }
     .controls { flex-direction: column; align-items: stretch; }
+    .filter-wrap { align-self: flex-start; }
+    .filter-popup { left: 0; right: auto; width: min(260px, calc(100vw - 64px)); }
     table.leaderboard { min-width: 560px; }
 }