Upload 5 files

index.html

@@ -26,9 +26,13 @@
     </p>
   </header>
 
-  <section class="tier-strip" id="tier-strip" aria-label="Benchmark tiers">
+  <nav class="bench-tabs" id="bench-tabs" aria-label="Benchmark tier">
     <!-- populated by script.js -->
-  </section>
+  </nav>
+
+  <div class="bench-summary" id="bench-summary">
+    <!-- populated by script.js: active benchmark's own description + stats -->
+  </div>
 
   <div class="controls">
     <div class="filter-wrap">
@@ -79,23 +83,30 @@
     </div>
   </div>
 
-  <div class="table-scroll">
+  <p class="results-count" id="results-count"></p>
+
+  <!-- Desktop/tablet: real table. Populated by script.js -->
+  <div class="table-scroll" id="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 -->
+        <!-- populated by script.js -->
       </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>
+
+  <!-- Mobile: stacked model cards, same data as the table. Populated by script.js -->
+  <div class="model-cards" id="model-cards"></div>
+
+  <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>
 
   <section class="detail-panel" id="detail-panel" aria-live="polite">
@@ -108,6 +119,7 @@
         <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="detail-meta" id="detail-meta"></div>
     <div class="cat-grid" id="detail-cats"></div>
   </section>
 
@@ -151,6 +163,8 @@
   "name": "org/ModelName",
   "org": "org",
   "params_b": 1.5,
+  "license": "apache-2.0",
+  "architecture": "Transformer decoder, dense",
   "url": "https://huggingface.co/org/ModelName",
   "eval_source": "https://…",
   "runs": {
@@ -167,6 +181,17 @@
     </div>
   </section>
 
+  <!-- Decorative — the same 4 tiers as the tabs above, shown as cards for context. Not interactive for switching; the tabs above do that. -->
+  <section class="tier-showcase" aria-label="About the benchmark tiers">
+    <div class="tier-showcase-heading">
+      <h2>The benchmark suite</h2>
+      <p>Four tiers, increasing in difficulty. <a href="https://huggingface.co/bench-labs" target="_blank" rel="noopener">bench-labs</a> on the Hub has the full datasets.</p>
+    </div>
+    <div class="tier-strip" id="tier-strip" aria-hidden="true">
+      <!-- populated by script.js, decorative only -->
+    </div>
+  </section>
+
   <footer class="page-footer">
     <span>Data from <a href="models.json">models.json</a> · loaded client-side, no build step.</span>
     <span>

models.json

@@ -54,6 +54,8 @@
       "name": "Qwen/Qwen2.5-0.5B",
       "org": "Qwen",
       "params_b": 0.5,
+      "license": "apache-2.0",
+      "architecture": "Transformer decoder, dense",
       "url": "https://huggingface.co/Qwen/Qwen2.5-0.5B",
       "eval_source": "https://huggingface.co/spaces/bench-labs/blog?post=bMid-qwen0-5.html",
       "runs": {
@@ -103,6 +105,8 @@
       "name": "Qwen/Qwen2.5-1.5B-Instruct",
       "org": "Qwen",
       "params_b": 1.5,
+      "license": "apache-2.0",
+      "architecture": "Transformer decoder, dense, instruction-tuned",
       "url": "https://huggingface.co/Qwen/Qwen2.5-1.5B-Instruct",
       "eval_source": "https://huggingface.co/spaces/bench-labs/blog?post=evaluatingllm.html",
       "runs": {
@@ -119,6 +123,38 @@
         "bench-mid-6-2026": { "score": null, "n": null, "notes": "Not yet evaluated on this tier." },
         "bench-AGI": { "score": null, "n": null, "notes": "Not yet evaluated on this tier." }
       }
+    },
+    {
+      "id": "qwen2.5-0.5b-instruct",
+      "name": "Qwen/Qwen2.5-0.5B-Instruct",
+      "org": "Qwen",
+      "params_b": 0.5,
+      "license": "apache-2.0",
+      "architecture": "Transformer decoder, dense, instruction-tuned",
+      "url": "https://huggingface.co/Qwen/Qwen2.5-0.5B-Instruct",
+      "eval_source": null,
+      "runs": {
+        "bench-effortless-6-2026": { "score": null, "n": null, "notes": "Not yet evaluated on this tier." },
+        "bench-easy-6-2026": { "score": null, "n": null, "notes": "Not yet evaluated on this tier." },
+        "bench-mid-6-2026": { "score": null, "n": null, "notes": "Not yet evaluated on this tier." },
+        "bench-AGI": { "score": null, "n": null, "notes": "Not yet evaluated on this tier." }
+      }
+    },
+    {
+      "id": "smollm2-360m",
+      "name": "HuggingFaceTB/SmolLM2-360M",
+      "org": "HuggingFaceTB",
+      "params_b": 0.36,
+      "license": "apache-2.0",
+      "architecture": "Transformer decoder, dense",
+      "url": "https://huggingface.co/HuggingFaceTB/SmolLM2-360M",
+      "eval_source": null,
+      "runs": {
+        "bench-effortless-6-2026": { "score": null, "n": null, "notes": "Not yet evaluated on this tier." },
+        "bench-easy-6-2026": { "score": null, "n": null, "notes": "Not yet evaluated on this tier." },
+        "bench-mid-6-2026": { "score": null, "n": null, "notes": "Not yet evaluated on this tier." },
+        "bench-AGI": { "score": null, "n": null, "notes": "Not yet evaluated on this tier." }
+      }
     }
   ]
 }

script.js

@@ -25,11 +25,16 @@
   document.addEventListener("DOMContentLoaded", init);
 
   async function init() {
-    els.tierStrip = document.getElementById("tier-strip");
+    els.benchTabs = document.getElementById("bench-tabs");
+    els.benchSummary = document.getElementById("bench-summary");
+    els.tierStrip = document.getElementById("tier-strip"); // decorative, bottom of page
     els.sortSelect = document.getElementById("sort-select");
     els.searchInput = document.getElementById("model-search");
+    els.resultsCount = document.getElementById("results-count");
+    els.tableScroll = document.getElementById("table-scroll");
     els.thead = document.getElementById("leaderboard-head");
     els.tbody = document.getElementById("leaderboard-body");
+    els.modelCards = document.getElementById("model-cards");
     els.emptyState = document.getElementById("empty-state");
     els.unavailableState = document.getElementById("unavailable-state");
     els.unavailableText = document.getElementById("unavailable-text");
@@ -37,6 +42,7 @@
     els.detailPanel = document.getElementById("detail-panel");
     els.detailTitle = document.getElementById("detail-title");
     els.detailSubtitle = document.getElementById("detail-subtitle");
+    els.detailMeta = document.getElementById("detail-meta");
     els.detailCats = document.getElementById("detail-cats");
     els.detailClose = document.getElementById("detail-close");
     els.submitToggle = document.getElementById("submit-toggle");
@@ -66,18 +72,21 @@
     state.activeBenchmark = (firstAvailable || state.data.benchmarks[0])?.id || null;
 
     initParamsBounds();
-    buildTierStrip();
+    buildBenchTabs();
+    buildTierShowcase();
     bindControls();
     bindParamsFilter();
     render();
   }
 
   function renderLoadError(err) {
-    els.tbody.innerHTML =
-      '<tr><td colspan="6" style="padding:32px;text-align:center;color:var(--muted);">' +
+    const msg =
       "Couldn't load <code>models.json</code> (" + escapeHtml(String(err.message || err)) +
-      "). Make sure it sits next to index.html." +
-      "</td></tr>";
+      "). Make sure it sits next to index.html.";
+    if (els.tbody) {
+      els.tbody.innerHTML =
+        '<tr><td colspan="10" style="padding:32px;text-align:center;color:var(--muted);">' + msg + "</td></tr>";
+    }
   }
 
   // -------------------- SUBMIT PANEL --------------------
@@ -91,21 +100,68 @@
     });
   }
 
-  // -------------------- TIER STRIP --------------------
+  // -------------------- BENCHMARK TABS (the actual switcher) --------------------
 
-  function buildTierStrip() {
+  function buildBenchTabs() {
     const frag = document.createDocumentFragment();
     state.data.benchmarks
       .slice()
       .sort((a, b) => a.tier - b.tier)
       .forEach((bench) => {
-        const card = document.createElement("button");
-        card.type = "button";
-        card.className =
-          "tier-card" +
+        const tab = document.createElement("button");
+        tab.type = "button";
+        tab.className =
+          "bench-tab" +
           (bench.id === state.activeBenchmark ? " active" : "") +
           (bench.unavailable ? " is-unavailable" : "");
-        card.dataset.benchmarkId = bench.id;
+        tab.dataset.benchmarkId = bench.id;
+
+        const badge = bench.unavailable
+          ? '<span class="tab-badge-unavailable">Unavailable</span>'
+          : "";
+
+        tab.innerHTML =
+          '<span class="tab-tier-num">T' + bench.tier + "</span>" +
+          "<span>" + escapeHtml(bench.label) + "</span>" +
+          badge;
+
+        tab.addEventListener("click", () => {
+          state.activeBenchmark = bench.id;
+          closeDetail();
+          buildBenchTabs();
+          render();
+        });
+
+        frag.appendChild(tab);
+      });
+
+    els.benchTabs.innerHTML = "";
+    els.benchTabs.appendChild(frag);
+  }
+
+  function renderBenchSummary(bench) {
+    const rowsLabel = bench.rows != null ? bench.rows + " rows" : "open-ended";
+    els.benchSummary.innerHTML =
+      '<div class="bench-summary-desc"><strong>' + escapeHtml(bench.id) + "</strong> — " +
+      escapeHtml(bench.description) + "</div>" +
+      '<div class="bench-summary-stats">' +
+      "<span>" + rowsLabel + "</span>" +
+      "<span>" + escapeHtml(bench.metric) + "</span>" +
+      '<span><a href="' + escapeHtml(bench.dataset_url) + '" target="_blank" rel="noopener">dataset ↗</a></span>' +
+      "</div>";
+  }
+
+  // -------------------- DECORATIVE TIER SHOWCASE (bottom of page) --------------------
+
+  function buildTierShowcase() {
+    if (!els.tierStrip) return;
+    const frag = document.createDocumentFragment();
+    state.data.benchmarks
+      .slice()
+      .sort((a, b) => a.tier - b.tier)
+      .forEach((bench) => {
+        const card = document.createElement("div");
+        card.className = "tier-card";
 
         const rowsLabel = bench.rows != null ? bench.rows + " rows" : "open-ended";
         const badge = bench.unavailable
@@ -121,13 +177,6 @@
           "<span>" + escapeHtml(bench.metric) + "</span>" +
           "</div>";
 
-        card.addEventListener("click", () => {
-          state.activeBenchmark = bench.id;
-          closeDetail();
-          buildTierStrip();
-          render();
-        });
-
         frag.appendChild(card);
       });
 
@@ -164,18 +213,10 @@
   const LOG_MIN = -1; // 10^-1 = 0.1B
   const LOG_MAX = Math.log10(PARAMS_ABSOLUTE_MAX); // 10^3 = 1000B
 
-  function paramsToSlider(b) {
-    const clamped = Math.max(0.1, Math.min(PARAMS_ABSOLUTE_MAX, b));
-    return (Math.log10(clamped) - LOG_MIN) / (LOG_MAX - LOG_MIN);
-  }
-
   function sliderToParams(t) {
     return Math.pow(10, LOG_MIN + t * (LOG_MAX - LOG_MIN));
   }
 
-  // Derive slider bounds from the actual dataset, but always offer the full
-  // 0.1B–1000B range so filtering isn't capped to whatever's in models.json
-  // today.
   function initParamsBounds() {
     state.paramsFilter = { min: 0, max: PARAMS_ABSOLUTE_MAX };
 
@@ -210,12 +251,9 @@
     const onSlide = () => {
       let loPos = parseFloat(els.rangeMin.value);
       let hiPos = parseFloat(els.rangeMax.value);
-      // keep the two thumbs from crossing
       if (loPos > hiPos) {
         [loPos, hiPos] = [hiPos, loPos];
       }
-      // slider position 0 is a true "no lower bound" (0B); anything above
-      // maps through the log curve so small models stay draggable.
       const lo = loPos <= 0 ? 0 : sliderToParams(loPos / 1000);
       const hi = hiPos >= 1000 ? PARAMS_ABSOLUTE_MAX : sliderToParams(hiPos / 1000);
       state.paramsFilter = { min: lo, max: hi };
@@ -247,9 +285,6 @@
   }
 
   function updateRangeVisuals() {
-    // thumbs are already in slider-position units (0-1000); just read them
-    // back for the fill bar rather than re-deriving from log space, so the
-    // fill always matches exactly where the thumbs are.
     const loPct = (parseFloat(els.rangeMin.value) / 1000) * 100;
     const hiPct = (parseFloat(els.rangeMax.value) / 1000) * 100;
 
@@ -316,6 +351,13 @@
     return (v * 100).toFixed(1) + "%";
   }
 
+  function fmtParams(b) {
+    if (b == null) return "—";
+    if (b < 1) return (b * 1000).toFixed(0) + "M";
+    if (b >= 1000) return (b / 1000).toFixed(1).replace(/\.0$/, "") + "T";
+    return (Number.isInteger(b) ? b.toFixed(0) : b.toFixed(1)) + "B";
+  }
+
   function escapeHtml(s) {
     return String(s)
       .replace(/&/g, "&amp;")
@@ -324,22 +366,29 @@
       .replace(/"/g, "&quot;");
   }
 
-  // -------------------- RENDER TABLE --------------------
+  const EVAL_LINK_SVG =
+    '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7M9 7h8v8"/></svg>';
+
+  // -------------------- RENDER --------------------
 
   function render() {
     const bench = getActiveBenchmark();
     if (!bench) return;
 
     if (bench.unavailable) {
-      els.table.hidden = true;
+      els.tableScroll.hidden = true;
+      els.modelCards.hidden = true;
       els.emptyState.hidden = true;
       els.unavailableState.hidden = false;
+      els.resultsCount.hidden = true;
       els.unavailableText.textContent =
         bench.unavailable_reason || (bench.id + " is currently unavailable.");
       closeDetail();
       return;
     }
 
+    renderBenchSummary(bench);
+
     const metricCols = getMetricColumns(bench);
     buildHead(metricCols);
 
@@ -349,6 +398,8 @@
       return { model: m, run, value };
     });
 
+    const totalCount = rows.length;
+
     if (state.search) {
       rows = rows.filter(
         (r) =>
@@ -361,30 +412,45 @@
       const { min, max } = state.paramsFilter;
       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 >= PARAMS_ABSOLUTE_MAX) return p >= min; // top thumb at the ceiling = open-ended "+"
+        if (p == null) return false;
+        if (max >= PARAMS_ABSOLUTE_MAX) return p >= min;
         return p >= min && p <= max;
       });
     }
 
     rows = sortRows(rows, state.sort);
 
+    els.resultsCount.hidden = false;
+    els.resultsCount.textContent =
+      rows.length === totalCount
+        ? "Showing all " + totalCount + " model" + (totalCount === 1 ? "" : "s")
+        : "Showing " + rows.length + " of " + totalCount + " models";
+
     els.tbody.innerHTML = "";
+    els.modelCards.innerHTML = "";
+
     if (rows.length === 0) {
       els.emptyState.hidden = false;
       els.unavailableState.hidden = true;
-      els.table.hidden = true;
+      els.tableScroll.hidden = true;
+      els.modelCards.hidden = true;
       return;
     }
     els.emptyState.hidden = true;
     els.unavailableState.hidden = true;
-    els.table.hidden = false;
+    els.tableScroll.hidden = false;
+    // .model-cards visibility itself is controlled by the mobile media query
+    // (display: none above 700px); just make sure it's not force-hidden here.
+    els.modelCards.hidden = false;
 
-    const frag = document.createDocumentFragment();
+    const tableFrag = document.createDocumentFragment();
+    const cardsFrag = document.createDocumentFragment();
     rows.forEach((r, idx) => {
-      frag.appendChild(buildRow(r, idx + 1, bench, metricCols));
+      tableFrag.appendChild(buildRow(r, idx + 1, bench, metricCols));
+      cardsFrag.appendChild(buildCard(r, idx + 1, bench, metricCols));
     });
-    els.tbody.appendChild(frag);
+    els.tbody.appendChild(tableFrag);
+    els.modelCards.appendChild(cardsFrag);
 
     updateSortIndicators();
   }
@@ -394,7 +460,7 @@
 
     const thRank = document.createElement("th");
     thRank.dataset.key = "rank";
-    thRank.style.width = "46px";
+    thRank.style.width = "40px";
     thRank.textContent = "#";
     tr.appendChild(thRank);
 
@@ -420,10 +486,21 @@
       tr.appendChild(th);
     });
 
+    const thStderr = document.createElement("th");
+    thStderr.textContent = "stderr";
+    tr.appendChild(thStderr);
+
+    const thNotes = document.createElement("th");
+    thNotes.textContent = "Notes";
+    tr.appendChild(thNotes);
+
+    const thEval = document.createElement("th");
+    thEval.textContent = "Eval";
+    tr.appendChild(thEval);
+
     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;
@@ -434,7 +511,7 @@
         } else if (key === "name") {
           state.sort = "name-asc";
         } else {
-          return; // secondary metric columns are informational, not sortable
+          return;
         }
         els.sortSelect.value = state.sort;
         render();
@@ -490,45 +567,52 @@
     });
   }
 
+  function modelTagsHtml(model) {
+    const tags = [];
+    if (model.architecture) tags.push(model.architecture);
+    if (model.license) tags.push(model.license);
+    if (!tags.length) return "";
+    return (
+      '<div class="model-tags">' +
+      tags.map((t) => '<span class="model-tag">' + escapeHtml(t) + "</span>").join("") +
+      "</div>"
+    );
+  }
+
   function buildRow(r, rank, bench, metricCols) {
     const tr = document.createElement("tr");
     const { model, run, value } = r;
 
-    // rank
     const rankTd = document.createElement("td");
     rankTd.className = "rank-cell" + (rank <= 3 ? " top-" + rank : "");
     rankTd.textContent = value == null ? "–" : String(rank);
     tr.appendChild(rankTd);
 
-    // model
     const modelTd = document.createElement("td");
     modelTd.innerHTML =
       '<div class="model-cell">' +
       '<span class="model-name"><a href="' + escapeHtml(model.url) + '" target="_blank" rel="noopener">' +
       escapeHtml(model.name) + "</a></span>" +
       '<span class="model-org">' + escapeHtml(model.org || "") + "</span>" +
+      modelTagsHtml(model) +
       "</div>";
     tr.appendChild(modelTd);
 
-    // params
     const paramsTd = document.createElement("td");
     paramsTd.className = "params-cell";
-    paramsTd.textContent = model.params_b != null ? model.params_b + "B" : "—";
+    paramsTd.textContent = fmtParams(model.params_b);
     tr.appendChild(paramsTd);
 
-    // 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>';
@@ -548,22 +632,122 @@
       tr.appendChild(td);
     });
 
+    const stderrTd = document.createElement("td");
+    stderrTd.className = "stderr-cell";
+    stderrTd.textContent = run && typeof run.stderr === "number" ? "±" + run.stderr.toFixed(4) : "—";
+    tr.appendChild(stderrTd);
+
+    const notesTd = document.createElement("td");
+    notesTd.className = "notes-cell";
+    notesTd.innerHTML = run && run.notes ? escapeHtml(run.notes) : '<span class="notes-na">—</span>';
+    tr.appendChild(notesTd);
+
+    const evalTd = document.createElement("td");
+    evalTd.innerHTML = model.eval_source
+      ? '<a class="eval-link tooltip" href="' + escapeHtml(model.eval_source) + '" target="_blank" rel="noopener" data-tooltip="View eval write-up">' + EVAL_LINK_SVG + "</a>"
+      : '<span class="notes-na">—</span>';
+    tr.appendChild(evalTd);
+
     if (run && run.categories) {
       tr.style.cursor = "pointer";
       tr.title = "Click for per-category breakdown";
-      tr.addEventListener("click", () => openDetail(model, run, bench));
+      tr.addEventListener("click", (e) => {
+        if (e.target.closest("a")) return; // let links behave normally
+        openDetail(model, run, bench);
+      });
     }
 
     return tr;
   }
 
+  function buildCard(r, rank, bench, metricCols) {
+    const { model, run, value } = r;
+    const card = document.createElement("div");
+    card.className = "model-card";
+
+    const rankCls = rank <= 3 ? " top-" + rank : "";
+    const scoreHtml =
+      value == null
+        ? '<span class="score-na">not evaluated</span>'
+        : '<span class="score-num ' + scoreClass(value) + '">' + fmtScore(value) + "</span>" +
+          '<div class="score-bar-track"><div class="score-bar-fill" style="width:' +
+          Math.max(0, Math.min(100, value * 100)).toFixed(1) + '%"></div></div>';
+
+    card.innerHTML =
+      '<div class="model-card-top">' +
+      '<span class="model-card-rank' + rankCls + '">' + (value == null ? "–" : rank) + "</span>" +
+      '<div class="model-card-name">' +
+      '<span class="model-name"><a href="' + escapeHtml(model.url) + '" target="_blank" rel="noopener">' + escapeHtml(model.name) + "</a></span>" +
+      '<span class="model-org">' + escapeHtml(model.org || "") + " · " + fmtParams(model.params_b) + "</span>" +
+      "</div>" +
+      '<div class="model-card-score">' + scoreHtml + "</div>" +
+      "</div>" +
+      modelTagsHtml(model).replace("model-tags", "model-tags model-card-tags") +
+      buildCardMetrics(run, metricCols) +
+      (run && run.notes ? '<div class="model-card-notes">' + escapeHtml(run.notes) + "</div>" : "") +
+      '<div class="model-card-footer">' +
+      (model.eval_source
+        ? '<a href="' + escapeHtml(model.eval_source) + '" target="_blank" rel="noopener">Eval write-up ' + EVAL_LINK_SVG + "</a>"
+        : "<span></span>") +
+      (run && run.categories ? '<button type="button" class="model-card-details-btn">Category breakdown</button>' : "") +
+      "</div>";
+
+    if (run && run.categories) {
+      const btn = card.querySelector(".model-card-details-btn");
+      if (btn) btn.addEventListener("click", () => openDetail(model, run, bench));
+    }
+
+    return card;
+  }
+
+  function buildCardMetrics(run, metricCols) {
+    const parts = [];
+    if (run && run.n != null) {
+      parts.push({ label: "n", value: String(run.n) });
+    }
+    metricCols.slice(1).forEach((key) => {
+      const v = getMetricValue(run, key);
+      if (v != null) parts.push({ label: METRIC_LABELS[key] || key, value: fmtScore(v) });
+    });
+    if (run && typeof run.stderr === "number") {
+      parts.push({ label: "stderr", value: "±" + run.stderr.toFixed(4) });
+    }
+    if (!parts.length) return "";
+    return (
+      '<div class="model-card-metrics">' +
+      parts
+        .map(
+          (p) =>
+            '<div class="model-card-metric"><span class="model-card-metric-label">' +
+            escapeHtml(p.label) +
+            '</span><span class="model-card-metric-value">' +
+            escapeHtml(p.value) +
+            "</span></div>"
+        )
+        .join("") +
+      "</div>"
+    );
+  }
+
   // -------------------- DETAIL PANEL --------------------
 
   function openDetail(model, run, bench) {
     els.detailTitle.textContent = model.name + " on " + bench.id;
-    els.detailSubtitle.textContent =
-      "Per-category breakdown" + (run.n ? " · n=" + run.n : "") +
-      (run.stderr != null ? " · stderr " + run.stderr : "");
+    els.detailSubtitle.textContent = "Per-category breakdown";
+
+    const metaParts = [];
+    metaParts.push(fmtParams(model.params_b) + " params");
+    if (model.architecture) metaParts.push(model.architecture);
+    if (model.license) metaParts.push(model.license);
+    if (run.n != null) metaParts.push("n=" + run.n);
+    if (run.stderr != null) metaParts.push("stderr ±" + run.stderr.toFixed(4));
+
+    els.detailMeta.innerHTML =
+      metaParts.map((m) => "<span>" + escapeHtml(m) + "</span>").join("") +
+      (model.eval_source
+        ? '<span><a href="' + escapeHtml(model.eval_source) + '" target="_blank" rel="noopener">eval write-up ↗</a></span>'
+        : "") +
+      (model.url ? '<span><a href="' + escapeHtml(model.url) + '" target="_blank" rel="noopener">model card ↗</a></span>' : "");
 
     const cats = run.categories || {};
     const frag = document.createDocumentFragment();

style.css

@@ -175,39 +175,152 @@ a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-
     font-size: 1.05rem;
 }
 
-/* -------------------- TIER STRIP -------------------- */
+/* -------------------- BENCHMARK TABS (the actual switcher) -------------------- */
 
-.tier-strip {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
-    gap: 14px;
-    margin: 32px 0 30px;
+.bench-tabs {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 28px 0 16px;
 }
 
-.tier-card {
-    padding: 18px 20px;
-    border-radius: var(--radius);
+.bench-tab {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 16px;
+    border-radius: 999px;
     background: var(--surface);
     border: 1px solid var(--border);
     backdrop-filter: blur(20px) saturate(1.2);
     -webkit-backdrop-filter: blur(20px) saturate(1.2);
     box-shadow: var(--shadow-soft);
-    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
+    color: var(--heading);
+    font-size: 0.85rem;
+    font-weight: 600;
     cursor: pointer;
+    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), color var(--transition);
+    font-family: inherit;
 }
 
-.tier-card:hover {
-    transform: translateY(-3px);
-    box-shadow: var(--shadow-hover);
-    border-color: rgba(93, 165, 112, 0.4);
-}
+.bench-tab:hover { border-color: rgba(93, 165, 112, 0.4); box-shadow: var(--shadow-hover); }
 
-.tier-card.active {
+.bench-tab.active {
+    background: var(--accent);
     border-color: var(--accent);
-    background: var(--surface-2);
+    color: #fff;
     box-shadow: var(--shadow-hover);
 }
 
+.bench-tab .tab-tier-num {
+    font-size: 0.68rem;
+    opacity: 0.7;
+    font-weight: 700;
+}
+
+.bench-tab.is-unavailable {
+    opacity: 0.65;
+}
+
+.bench-tab .tab-badge-unavailable {
+    display: inline-flex;
+    align-items: center;
+    padding: 1px 7px;
+    border-radius: 999px;
+    background: rgba(217, 154, 62, 0.2);
+    color: #b5791f;
+    font-size: 0.6rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.bench-tab.active .tab-badge-unavailable {
+    background: rgba(255,255,255,0.28);
+    color: #fff;
+}
+
+/* -------------------- BENCH SUMMARY (active tier's own blurb) -------------------- */
+
+.bench-summary {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 10px;
+    margin-bottom: 22px;
+    color: var(--muted);
+    font-size: 0.88rem;
+    line-height: 1.6;
+}
+
+.bench-summary-desc { max-width: 620px; }
+.bench-summary-desc strong { color: var(--heading); }
+
+.bench-summary-stats {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.bench-summary-stats span {
+    padding: 3px 10px;
+    background: rgba(255,255,255,0.55);
+    border: 1px solid var(--border-soft);
+    border-radius: 999px;
+    font-size: 0.75rem;
+    white-space: nowrap;
+}
+
+.bench-summary-stats a { color: var(--accent); font-weight: 600; }
+
+/* -------------------- RESULTS COUNT -------------------- */
+
+.results-count {
+    color: var(--muted);
+    font-size: 0.8rem;
+    margin-bottom: 10px;
+}
+
+/* -------------------- DECORATIVE TIER SHOWCASE (bottom of page) -------------------- */
+
+.tier-showcase {
+    margin-top: 46px;
+}
+
+.tier-showcase-heading {
+    margin-bottom: 18px;
+}
+
+.tier-showcase-heading h2 {
+    font-size: 1.3rem;
+    margin-bottom: 4px;
+}
+
+.tier-showcase-heading p {
+    color: var(--muted);
+    font-size: 0.88rem;
+}
+
+.tier-showcase-heading a { color: var(--accent); }
+
+.tier-strip {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+    gap: 14px;
+}
+
+.tier-card {
+    padding: 18px 20px;
+    border-radius: var(--radius);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    backdrop-filter: blur(16px) saturate(1.1);
+    -webkit-backdrop-filter: blur(16px) saturate(1.1);
+    box-shadow: var(--shadow-soft);
+    opacity: 0.92;
+}
+
 .tier-card .tier-num {
     display: inline-block;
     font-size: 0.7rem;
@@ -218,7 +331,7 @@ a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-
     margin-bottom: 6px;
 }
 
-.tier-card h3 { font-size: 1.15rem; margin-bottom: 6px; }
+.tier-card h3 { font-size: 1.1rem; margin-bottom: 6px; }
 .tier-card p { color: var(--muted); font-size: 0.85rem; line-height: 1.5; }
 
 .tier-meta {
@@ -227,6 +340,7 @@ a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-
     margin-top: 10px;
     font-size: 0.72rem;
     color: var(--muted);
+    flex-wrap: wrap;
 }
 
 .tier-meta span {
@@ -236,6 +350,22 @@ a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-
     border: 1px solid var(--border-soft);
 }
 
+.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;
+}
+
 /* -------------------- SUBMIT PANEL -------------------- */
 
 .submit-panel {
@@ -702,11 +832,14 @@ table.leaderboard td {
 .model-cell {
     display: flex;
     flex-direction: column;
-    gap: 2px;
-    min-width: 200px;
+    gap: 3px;
+    min-width: 220px;
 }
 
 .model-name {
+    display: flex;
+    align-items: center;
+    gap: 6px;
     font-weight: 600;
     color: var(--heading);
     font-size: 0.95rem;
@@ -720,6 +853,41 @@ table.leaderboard td {
     color: var(--muted);
 }
 
+.model-tags {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
+    margin-top: 3px;
+}
+
+.model-tag {
+    padding: 1px 7px;
+    border-radius: 999px;
+    background: rgba(120,160,200,0.12);
+    border: 1px solid var(--border-soft);
+    color: var(--muted);
+    font-size: 0.66rem;
+    white-space: nowrap;
+}
+
+.eval-link {
+    display: inline-flex;
+    align-items: center;
+    color: var(--muted);
+    transition: color var(--transition);
+    flex-shrink: 0;
+}
+.eval-link:hover { color: var(--accent); opacity: 1; }
+
+.notes-cell {
+    max-width: 240px;
+    color: var(--muted);
+    font-size: 0.8rem;
+    line-height: 1.4;
+}
+
+.notes-cell .notes-na { font-style: italic; opacity: 0.7; }
+
 .params-cell {
     font-variant-numeric: tabular-nums;
     color: var(--muted);
@@ -756,6 +924,13 @@ table.leaderboard td {
     white-space: nowrap;
 }
 
+.stderr-cell {
+    font-variant-numeric: tabular-nums;
+    color: var(--muted);
+    font-size: 0.78rem;
+    white-space: nowrap;
+}
+
 .score-pill {
     display: inline-flex;
     align-items: center;
@@ -816,29 +991,6 @@ table.leaderboard td {
 .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 {
@@ -884,6 +1036,24 @@ table.leaderboard td {
 
 .detail-close:hover { background: #fff; color: var(--accent); border-color: var(--accent); }
 
+.detail-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 18px;
+}
+
+.detail-meta span {
+    padding: 4px 11px;
+    background: rgba(255,255,255,0.55);
+    border: 1px solid var(--border-soft);
+    border-radius: 999px;
+    font-size: 0.76rem;
+    color: var(--text);
+}
+
+.detail-meta a { color: var(--accent); font-weight: 600; }
+
 .cat-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
@@ -934,6 +1104,145 @@ table.leaderboard td {
     border-radius: 999px;
 }
 
+/* -------------------- MOBILE MODEL CARDS (replaces table under 700px) -------------------- */
+
+.model-cards {
+    display: none;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.model-card {
+    padding: 16px 18px;
+    border-radius: var(--radius);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    backdrop-filter: blur(20px) saturate(1.2);
+    -webkit-backdrop-filter: blur(20px) saturate(1.2);
+    box-shadow: var(--shadow-soft);
+}
+
+.model-card-top {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 10px;
+    margin-bottom: 10px;
+}
+
+.model-card-rank {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+    background: rgba(120,160,200,0.14);
+    color: var(--muted);
+    font-weight: 700;
+    font-size: 0.78rem;
+    flex-shrink: 0;
+    font-variant-numeric: tabular-nums;
+}
+
+.model-card-rank.top-1 { background: rgba(217,164,65,0.18); color: #b5791f; }
+.model-card-rank.top-2 { background: rgba(154,165,177,0.2); color: #6b7683; }
+.model-card-rank.top-3 { background: rgba(192,133,82,0.18); color: #a35f2f; }
+
+.model-card-name {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+}
+
+.model-card-name .model-name { font-size: 0.98rem; }
+.model-card-name .model-org { font-size: 0.78rem; }
+
+.model-card-score {
+    text-align: right;
+    flex-shrink: 0;
+}
+
+.model-card-score .score-num {
+    display: block;
+    font-size: 1.15rem;
+    font-weight: 700;
+}
+
+.model-card-score .score-bar-track { width: 64px; margin-top: 4px; }
+
+.model-card-tags {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
+    margin: 8px 0 10px;
+}
+
+.model-card-metrics {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
+    gap: 8px;
+    margin-top: 10px;
+    padding-top: 10px;
+    border-top: 1px solid var(--border-soft);
+}
+
+.model-card-metric {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.model-card-metric-label {
+    font-size: 0.62rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--muted);
+}
+
+.model-card-metric-value {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--heading);
+    font-variant-numeric: tabular-nums;
+}
+
+.model-card-notes {
+    margin-top: 10px;
+    color: var(--muted);
+    font-size: 0.8rem;
+    line-height: 1.5;
+}
+
+.model-card-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    margin-top: 12px;
+}
+
+.model-card-footer a {
+    font-size: 0.78rem;
+    font-weight: 600;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.model-card-details-btn {
+    padding: 6px 12px;
+    border-radius: 999px;
+    border: 1px solid var(--border-soft);
+    background: rgba(255,255,255,0.55);
+    color: var(--accent);
+    font-size: 0.76rem;
+    font-weight: 600;
+    cursor: pointer;
+    font-family: inherit;
+}
+
 /* -------------------- FOOTER -------------------- */
 
 .page-footer {
@@ -952,12 +1261,66 @@ table.leaderboard td {
 
 /* -------------------- RESPONSIVE -------------------- */
 
-@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; }
+/* Tablet: table stays, but tighten paddings and let it scroll */
+@media (max-width: 900px) {
+    .container { padding: 56px 20px 36px; }
+    table.leaderboard { min-width: 720px; }
+}
+
+/* Phone: swap the table for stacked cards; simplify controls; single-column
+   grids; popups sized and positioned to stay on-screen. */
+@media (max-width: 700px) {
+    .container { padding: 44px 16px 32px; }
+
+    .hero h1 { font-size: clamp(1.9rem, 9vw, 2.6rem); }
+    .subtitle { font-size: 0.95rem; }
+
+    .bench-tabs {
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        padding-bottom: 4px;
+        margin-left: -16px;
+        margin-right: -16px;
+        padding-left: 16px;
+        padding-right: 16px;
+    }
+    .bench-tab { flex-shrink: 0; }
+
+    .bench-summary { flex-direction: column; align-items: flex-start; }
+
+    .controls { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
+    .search-pill { order: 1; width: 100%; min-width: 0; }
+    .filter-wrap { order: 2; }
+    .sort-select-wrap { order: 3; flex: 1; }
+    .pill-select { width: 100%; }
+
+    .filter-popup {
+        left: 50%;
+        right: auto;
+        transform: translateX(-50%);
+        width: min(280px, calc(100vw - 32px));
+    }
+
+    /* table -> cards */
+    .table-scroll { display: none; }
+    .model-cards { display: flex; }
+
+    .detail-panel { padding: 20px; }
+    .cat-grid { grid-template-columns: 1fr; }
+
+    .tier-strip { grid-template-columns: 1fr; }
+
+    .submit-body { padding: 4px 18px 22px; }
+    .submit-body pre { font-size: 0.76rem; }
+    .submit-body pre code { font-size: 0.76rem; white-space: pre-wrap; word-break: break-word; }
+
+    .page-footer { flex-direction: column; align-items: flex-start; gap: 6px; }
+}
+
+@media (max-width: 380px) {
+    .bench-summary-stats span { font-size: 0.7rem; }
+    .model-card-metrics { grid-template-columns: repeat(2, 1fr); }
 }
 
 /* -------------------- SCROLLBARS / SELECTION -------------------- */