Upload index.html

index.html

@@ -70,9 +70,9 @@ body {
   margin: 0 auto;
   padding: 1.25rem 1.75rem;
 }
-.welcome { padding: 1rem 0 1.5rem; }
+.welcome { padding: 0.5rem 0 1rem; }
 .welcome h1 {
-  font-size: 1.8rem;
+  font-size: 1.5rem;
   font-weight: 700;
   letter-spacing: -0.02em;
   margin-bottom: 4px;
@@ -80,15 +80,15 @@ body {
 .welcome p { color: var(--text-secondary); font-size: 0.95rem; }
 .stat-row {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
-  gap: 12px;
-  margin-bottom: 1.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 10px;
+  margin-bottom: 0.9rem;
 }
 .stat-pill {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
-  padding: 1rem 1.15rem;
+  padding: 0.6rem 0.9rem;
   transition: box-shadow var(--transition), transform var(--transition);
 }
 .stat-pill:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
@@ -96,11 +96,11 @@ body {
   font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
   letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 3px;
 }
-.stat-pill .value { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; }
+.stat-pill .value { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
 .stat-pill .sub { font-size: 0.75rem; color: var(--text-secondary); margin-top: 1px; }
 .info-banner {
   background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
-  padding: 1rem 1.15rem; margin-bottom: 1.5rem; font-size: 0.88rem; line-height: 1.6;
+  padding: 0.7rem 1rem; margin-bottom: 0.9rem; font-size: 0.84rem; line-height: 1.55;
   display: flex; align-items: flex-start; gap: 10px;
 }
 .info-banner svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--accent); }
@@ -130,6 +130,20 @@ body {
 }
 .banner-hint.rotated { transform: rotate(180deg); }
 .section { margin-bottom: 1.1rem; }
+.tabbar {
+  display: flex; gap: 2px; padding: 3px; margin-bottom: 14px;
+  background: var(--bg-warm); border: 1px solid var(--border);
+  border-radius: 100px; width: fit-content; max-width: 100%; overflow-x: auto;
+}
+.tabbar .tab {
+  border: none; cursor: pointer; padding: 7px 18px; border-radius: 100px;
+  font-family: inherit; font-size: 0.82rem; font-weight: 600; letter-spacing: -0.01em;
+  color: var(--text-secondary); background: transparent; white-space: nowrap;
+  transition: all var(--transition);
+}
+.tabbar .tab:hover { color: var(--text); background: var(--card-hover); }
+.tabbar .tab.active { background: var(--accent); color: #fff; }
+[hidden] { display: none !important; }
 .timeline-toolbar {
   display: flex; align-items: center; gap: 6px;
   margin-bottom: 10px;
@@ -259,6 +273,13 @@ body {
   background: var(--bg-warm); color: var(--text-secondary); border: 1px solid var(--border);
 }
 .section-head .head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.search {
+  background: var(--bg-warm); border: 1px solid var(--border); border-radius: 100px;
+  padding: 6px 14px; color: var(--text); font-family: inherit; font-size: 0.78rem;
+  width: 210px; outline: none; transition: border-color var(--transition);
+}
+.search::placeholder { color: var(--text-muted); }
+.search:focus { border-color: var(--accent); }
 .sort-control {
   display: inline-flex; align-items: center; gap: 6px;
   background: var(--bg-warm); border: 1px solid var(--border);
@@ -278,29 +299,7 @@ body {
 .sort-control select:hover { background-color: var(--bg); }
 .sort-control select:focus { box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.3); }
 .sort-control select option { background: var(--bg-warm); color: var(--text); }
-.eff-callout {
-  display: flex; align-items: flex-start; gap: 12px;
-  background: linear-gradient(135deg, rgba(88,166,255,0.14), rgba(63,185,80,0.08));
-  border: 1px solid var(--accent);
-  border-radius: var(--radius-sm);
-  padding: 0.95rem 1.15rem;
-  margin-bottom: 12px;
-  font-size: 0.85rem;
-  line-height: 1.6;
-  color: var(--text);
-  box-shadow: 0 0 0 1px rgba(88,166,255,0.08), var(--shadow-sm);
-}
-.eff-callout .eff-callout-icon {
-  font-size: 1.4rem;
-  line-height: 1;
-  flex-shrink: 0;
-  margin-top: 1px;
-}
-.eff-callout strong { color: var(--accent); }
-.eff-callout code {
-  background: rgba(88,166,255,0.14); padding: 1px 6px; border-radius: 4px;
-  font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.82rem; color: var(--accent);
-}
+.banner-expand.open { max-height: 340px; }
 .table-wrap {
   background: var(--card); border: 1px solid var(--border);
   border-radius: var(--radius); overflow: hidden;
@@ -373,8 +372,20 @@ tbody tr { transition: background var(--transition); }
 .chart-card.full { grid-column: 1 / -1; }
 .chart-card h3 { font-size: 0.85rem; font-weight: 600; margin-bottom: 3px; }
 .chart-card .chart-sub { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 8px; }
-.chart-card canvas { max-height: 420px; }
-.legend-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
+
+.metric-switch { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-warm);
+  border: 1px solid var(--border); border-radius: 100px; }
+.metric-chip {
+  border: none; cursor: pointer; padding: 5px 14px; border-radius: 100px;
+  font-family: inherit; font-size: 0.76rem; font-weight: 600; letter-spacing: -0.01em;
+  color: var(--text-secondary); background: transparent; transition: all var(--transition);
+}
+.metric-chip:hover { color: var(--text); background: var(--card-hover); }
+.metric-chip.active { background: var(--accent); color: #fff; }
+.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
+  flex-wrap: wrap; margin-bottom: 14px; }
+.chart-scroll { position: relative; overflow-y: auto; max-height: 70vh; }
+.legend-bar { display: flex; flex-wrap: wrap; gap: 10px 12px; justify-content: flex-end; max-width: 62%; }
 .legend-bar .legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--text-secondary); }
 .legend-bar .ldot { width: 8px; height: 8px; border-radius: 50%; }
 .eff-note { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; font-size: 0.7rem; color: var(--text-muted); }
@@ -390,16 +401,6 @@ tbody tr { transition: background var(--transition); }
 .timeline-custom-tooltip.visible { opacity: 1; }
 .timeline-custom-tooltip .tt-name { font-weight: 600; margin-bottom: 2px; }
 .timeline-custom-tooltip .tt-val { color: var(--text-secondary); }
-.wiki-bubble-wrap { position: relative; }
-.wiki-custom-tooltip {
-  position: absolute; pointer-events: none; background: #1c2129;
-  border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px;
-  font-size: 0.78rem; color: var(--text); box-shadow: var(--shadow-md);
-  opacity: 0; transition: opacity 0.15s ease; z-index: 10; white-space: nowrap;
-}
-.wiki-custom-tooltip.visible { opacity: 1; }
-.wiki-custom-tooltip .tt-name { font-weight: 600; margin-bottom: 2px; }
-.wiki-custom-tooltip .tt-val { color: var(--text-secondary); }
 .cta-card {
   background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
   padding: 1.25rem; display: flex; align-items: center; justify-content: space-between;
@@ -461,35 +462,38 @@ footer a:hover { text-decoration: underline; }
     <p>Sub-150M parameter language models, same eval harness, transparent methodology.</p>
   </div>
   <div class="stat-row anim d1" id="stat-row"></div>
-  <div class="info-banner anim d2">
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
-    <div>
-      <strong>Why this exists.</strong> The community deserves a single place to compare tiny LMs fairly.
-      We include every model with verifiable benchmarks — ours, our competitors', yours.
-      <a href="https://huggingface.co/spaces/Glint-Research/Tiny-ML-Leaderboard/discussions" target="_blank">Submit a model via PR.</a>
-    </div>
-  </div>
   <div class="info-banner anim d2 clickable" id="unknown-banner" onclick="toggleUnknownBanner()">
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
     <div style="flex:1">
       <div style="display:flex;align-items:center;gap:4px;flex-wrap:wrap">
-        <strong>Unknown org?</strong>
-        <span>The "Unknown" tag is for model makers submitting their model ahead of official release.</span>
-        <span>If that's you — DM <strong>glintresearch</strong> on Discord.</span>
+        <strong>Every tiny LM with verifiable benchmarks</strong>
+        <span>&mdash; ours, our competitors', yours.</span>
+        <a href="https://huggingface.co/spaces/Glint-Research/Tiny-ML-Leaderboard/discussions" target="_blank" onclick="event.stopPropagation()">Submit a model via PR.</a>
         <span class="banner-hint" id="banner-hint">▼</span>
       </div>
       <div class="banner-expand" id="banner-expand">
         <div class="banner-expand-inner">
-          Model makers can submit their model's benchmarks before the official release so it appears on the leaderboard immediately when announced. The <strong>Unknown</strong> tag is temporary — once you DM <strong>glintresearch</strong> on Discord we can update it to your organization name and color.
+          <strong>Scoring.</strong> Efficiency (⚡) is the overall benchmark score (average of BLiMP, ARC-Easy and normalised WikiText-2)
+          times a size bonus, capped on a log scale: the smallest model on the board tops out at <code>1.5×</code>, the largest gets <code>1.0×</code>.
+          A tiny model can't out-rank a much larger, better-performing one on parameter count alone.<br>
+          <strong>Unknown org?</strong> That tag is for makers submitting benchmarks ahead of release &mdash; DM <strong>glintresearch</strong> on Discord to have it replaced with your org.
         </div>
       </div>
     </div>
   </div>
 
-  <div class="section anim d3" id="table-section">
+  <nav class="tabbar anim d2" id="tabbar">
+    <button class="tab active" data-view="table">Leaderboard</button>
+    <button class="tab" data-view="charts">Charts</button>
+    <button class="tab" data-view="timeline">Timeline</button>
+    <button class="tab" data-view="efficiency">Efficiency</button>
+  </nav>
+
+  <div class="section anim d3 view" id="table-section">
     <div class="section-head">
       <h2>Detailed Results</h2>
       <div class="head-right">
+        <input class="search" id="model-search" type="search" placeholder="Search models or orgs…" autocomplete="off">
         <span class="badge" id="model-count-badge"></span>
         <div class="sort-control">
           <span>Sort</span>
@@ -499,20 +503,13 @@ footer a:hover { text-decoration: underline; }
             <option value="wiki">WikiText-2 byte_ppl</option>
             <option value="blimp">BLiMP</option>
             <option value="arc">ARC-Easy</option>
+            <option value="gci">GCI</option>
             <option value="params">Parameters</option>
             <option value="date">Release Date</option>
           </select>
         </div>
       </div>
     </div>
-    <div class="eff-callout">
-      <span class="eff-callout-icon">⚡</span>
-      <div>
-        <strong>How Efficiency (⚡) is calculated:</strong> overall benchmark score (avg of BLiMP, ARC-Easy, and normalized WikiText-2) &times; a size bonus for smaller models.
-        The size bonus is capped on a log scale &mdash; the smallest model on the board tops out at <code>1.5&times;</code>, the largest gets <code>1.0&times;</code> (no bonus) &mdash;
-        so a tiny model can't out-rank a much larger, better-performing one purely from an inflated size multiplier.
-      </div>
-    </div>
     <div class="table-wrap">
       <div class="table-toolbar" id="org-filters"></div>
       <div class="table-scroll">
@@ -527,6 +524,7 @@ footer a:hover { text-decoration: underline; }
               <th class="cell-metric">WikiText-2 byte_ppl ↓</th>
               <th class="cell-metric">BLiMP ↑</th>
               <th class="cell-metric">ARC-Easy ↑</th>
+              <th class="cell-metric">GCI ↑</th>
               <th>Training Tokens</th>
               <th>Released</th>
               <th>Links</th>
@@ -537,39 +535,32 @@ footer a:hover { text-decoration: underline; }
       </div>
     </div>
   </div>
-  <div class="section anim d4" id="timeline-section">
+  <div class="section anim d4 view" id="timeline-section" hidden>
     <div class="section-head">
       <h2>Model Release Timeline</h2>
       <span class="badge">Most recent first</span>
     </div>
     <div class="timeline" id="timeline-list"></div>
   </div>
-  <div class="section anim d5" id="charts-section">
-    <div class="section-head"><h2>Benchmark Overview</h2></div>
-    <div class="legend-bar" id="legend-bar"></div>
-    <div class="chart-grid">
-      <div class="chart-card">
-        <h3>BLiMP ↑</h3>
-        <p class="chart-sub">Higher is better</p>
-        <canvas id="blimpChart"></canvas>
-      </div>
-      <div class="chart-card">
-        <h3>ARC-Easy ↑</h3>
-        <p class="chart-sub">Higher is better</p>
-        <canvas id="arcChart"></canvas>
+  <div class="section anim d5 view" id="charts-section" hidden>
+    <div class="section-head">
+      <h2>Benchmark Overview</h2>
+      <div class="head-right">
+        <div class="metric-switch" id="metric-switch"></div>
       </div>
-      <div class="chart-card full wiki-bubble-wrap">
-        <h3>WikiText-2 Byte-Level Perplexity ↓</h3>
-        <p class="chart-sub">Lower is better · byte_ppl = exp(−loglik / total_bytes) · bubble size = perplexity (smaller bubble = better)</p>
-        <canvas id="wikiChart"></canvas>
-        <div class="wiki-custom-tooltip" id="wikiTooltip">
-          <div class="tt-name"></div>
-          <div class="tt-val"></div>
+    </div>
+    <div class="chart-card">
+      <div class="chart-head">
+        <div>
+          <h3 id="metric-title">BLiMP</h3>
+          <p class="chart-sub" id="metric-sub">Higher is better</p>
         </div>
+        <div class="legend-bar" id="legend-bar"></div>
       </div>
+      <div class="chart-scroll"><canvas id="metricChart"></canvas></div>
     </div>
   </div>
-  <div class="section anim d6">
+  <div class="section anim d6 view" id="efficiency-section" hidden>
     <div class="section-head">
       <h2>Model Efficiency</h2>
       <span class="badge">Leaderboard Score vs Params</span>
@@ -578,11 +569,6 @@ footer a:hover { text-decoration: underline; }
       <div class="chart-card full">
         <h3>Parameters vs Leaderboard Score</h3>
         <p class="chart-sub">Scatter of each model's overall score vs its parameter count. Points above the dashed threshold line are &ge;1&sigma; above the trend. Top 3 marked.</p>
-        <p class="chart-sub" style="margin-top:-4px">
-          <strong>How Efficiency (⚡) is calculated:</strong> Efficiency score = overall benchmark score (avg of BLiMP, ARC-Easy, and normalized WikiText-2) &times; a size bonus.
-          The size bonus rewards smaller models but is capped &mdash; using a log scale across the full parameter range on this board, the smallest model can score at most <strong>1.5&times;</strong> its raw benchmark score, and the largest gets no bonus (1.0&times;).
-          This keeps small models competitive without letting a tiny parameter count alone produce an unrealistic (e.g. 100&times;) score gap over a larger, higher-performing model.
-        </p>
         <canvas id="efficiencyChart" style="max-height:400px"></canvas>
         <div class="eff-note">
           <span><span class="line-sample" style="border-top:2px dashed rgba(255,200,0,0.4)"></span> Avg trend</span>
@@ -590,10 +576,6 @@ footer a:hover { text-decoration: underline; }
           <span><span class="line-sample" style="background:rgba(255,230,0,0.1);height:8px"></span> Outperforming zone</span>
         </div>
       </div>
-      <div class="chart-card full">
-        <h3>Models Released by Org</h3>
-        <canvas id="orgCountChart" style="max-height:260px"></canvas>
-      </div>
     </div>
   </div>
   <footer>
@@ -611,6 +593,7 @@ const models = [
     params: "1M",
     blimp: 73.96,
     arc: 36.80,
+    gci: 48.02,
     wiki: 3.09,
     tokens: "~300B",
     releaseDate: "2026-07-19",
@@ -624,6 +607,7 @@ const models = [
     params: "1K",
     blimp: 58.61,
     arc: 26.39,
+    gci: 0.57,
     wiki: 11.27,
     tokens: "—",
     releaseDate: "2026-05-13",
@@ -650,6 +634,7 @@ const models = [
     params: "168K",
     blimp: 53.5,
     arc: 26.8,
+    gci: 48.95,
     wiki: 7.79,
     tokens: "—",
     releaseDate: "2026-05-12",
@@ -689,6 +674,7 @@ const models = [
     params: "1.51M",
     blimp: 60.7,
     arc: 24.58,
+    gci: 51.57,
     wiki: 4.09,
     tokens: "~30M",
     releaseDate: "2026-05-19",
@@ -715,6 +701,7 @@ const models = [
     params: "1.71M",
     blimp: 60.51,
     arc: 26.68,
+    gci: 51.28,
     wiki: 4.23,
     tokens: "~50M",
     releaseDate: "2026-05-19",
@@ -728,6 +715,7 @@ const models = [
     params: "587K",
     blimp: 59.01,
     arc: 27.06,
+    gci: 51.40,
     wiki: 4.52,
     tokens: "~200M",
     releaseDate: "2026-05-27",
@@ -741,6 +729,7 @@ const models = [
     params: "1.71M",
     blimp: 54.2,
     arc: 27.4,
+    gci: 49.54,
     wiki: 4.82,
     tokens: "~4.5B",
     releaseDate: "2026-05-22",
@@ -767,6 +756,7 @@ const models = [
     params: "468K",
     blimp: 55.3,
     arc: 27.3,
+    gci: 48.96,
     wiki: 4.49,
     tokens: "—",
     releaseDate: "2026-05-14",
@@ -780,6 +770,7 @@ const models = [
     params: "79.7M",
     blimp: 50.47,
     arc: 27.82,
+    gci: 49.77,
     wiki: 12.42,
     tokens: "~21M",
     releaseDate: "2026-05-30",
@@ -793,6 +784,7 @@ const models = [
     params: "87.60M",
     blimp: 57.61,
     arc: 25,
+    gci: 49.50,
     wiki: 11.24,
     tokens: "~18M",
     releaseDate: "2026-05-31",
@@ -806,6 +798,7 @@ const models = [
     params: "2.62M",
     blimp: 60.7,
     arc: 31.5,
+    gci: 50.42,
     wiki: 3.17,
     tokens: "—",
     releaseDate: "2026-05-14",
@@ -819,6 +812,7 @@ const models = [
     params: "4.23M",
     blimp: 62.87,
     arc: 27.36,
+    gci: 50.99,
     wiki: 3.77,
     tokens: "~80M",
     releaseDate: "2026-05-05",
@@ -832,6 +826,7 @@ const models = [
     params: "5.03M",
     blimp: 54.3,
     arc: 26.3,
+    gci: 48.40,
     wiki: 6.26,
     tokens: "~22M",
     releaseDate: "2026-06-02",
@@ -845,6 +840,7 @@ const models = [
     params: "9.96M",
     blimp: 47.8,
     arc: 31,
+    gci: 49.54,
     wiki: 5.31,
     tokens: "~46.7M",
     releaseDate: "2026-06-04",
@@ -858,6 +854,7 @@ const models = [
     params: "9.96M",
     blimp: 69,
     arc: 28,
+    gci: 50.21,
     wiki: 6.72,
     tokens: "~10M",
     releaseDate: "2026-06-03",
@@ -871,6 +868,7 @@ const models = [
     params: "12.6M",
     blimp: 61.47,
     arc: 28.45,
+    gci: 49.86,
     wiki: 8.76,
     tokens: "—",
     releaseDate: "2026-05-15",
@@ -884,6 +882,7 @@ const models = [
     params: "7.87M",
     blimp: 63.5,
     arc: 34.4,
+    gci: 52.56,
     wiki: 2.73,
     tokens: "—",
     releaseDate: "2026-05-16",
@@ -897,6 +896,7 @@ const models = [
     params: "9.96M",
     blimp: 56.95,
     arc: 26.8,
+    gci: 50.71,
     wiki: 6.73,
     tokens: "462M",
     releaseDate: "2026-06-01",
@@ -911,6 +911,7 @@ const models = [
     params: "982K",
     blimp: 68.7,
     arc: 32.5,
+    gci: 52.73,
     wiki: 3.08,
     tokens: "100B",
     releaseDate: "2026-05-13",
@@ -924,6 +925,7 @@ const models = [
     params: "1.41M",
     blimp: 61.86,
     arc: 30.26,
+    gci: 51.04,
     wiki: 3,
     tokens: "—",
     releaseDate: "2026-05-30",
@@ -937,6 +939,7 @@ const models = [
     params: "5.16M",
     blimp: 72.27,
     arc: 35.69,
+    gci: 53.07,
     wiki: 2.57,
     tokens: "25B",
     releaseDate: "2026-05-19",
@@ -950,6 +953,7 @@ const models = [
     params: "74M",
     blimp: 74.91,
     arc: 39.06,
+    gci: 52.58,
     wiki: 2.2,
     tokens: "~1.2B",
     releaseDate: "2026-06-01",
@@ -963,6 +967,7 @@ const models = [
     params: "51.8M",
     blimp: 76.3,
     arc: 52.2,
+    gci: 53.28,
     wiki: 2.56,
     tokens: "20B",
     releaseDate: "2026-05-21",
@@ -977,6 +982,7 @@ const models = [
     params: "55.7M",
     blimp: 74.08,
     arc: 37.33,
+    gci: 52.90,
     wiki: 2.29,
     tokens: "1.3B",
     releaseDate: "2026-06-05",
@@ -990,6 +996,7 @@ const models = [
     params: "91.1M",
     blimp: 78.35,
     arc: 41.5,
+    gci: 54.51,
     wiki: 2.07,
     tokens: "6.5B",
     releaseDate: "2026-06-28",
@@ -1003,6 +1010,7 @@ const models = [
     params: "9.94M",
     blimp: 72.52,
     arc: 35.9,
+    gci: 54.25,
     wiki: 2.46,
     tokens: "6.5B",
     releaseDate: "2026-06-13",
@@ -1016,6 +1024,7 @@ const models = [
     params: "5.96M",
     blimp: 65.23,
     arc: 33.38,
+    gci: 54.25,
     wiki: 3.25,
     tokens: "1.1B",
     releaseDate: "2026-06-10",
@@ -1029,6 +1038,7 @@ const models = [
     params: "95M",
     blimp: 80.20,
     arc: 43.18,
+    gci: 53.90,
     wiki: 2.08,
     tokens: "9B",
     releaseDate: "2026-07-06",
@@ -1042,6 +1052,7 @@ const models = [
     params: "28.4M",
     blimp: 69.75,
     arc: 38.59,
+    gci: 53.50,
     wiki: 2.3,
     tokens: "2.6B",
     releaseDate: "2026-06-09",
@@ -1055,6 +1066,7 @@ const models = [
     params: "22.03M",
     blimp: 61.4,
     arc: 30.85,
+    gci: 53.66,
     wiki: 3.14,
     tokens: "~1.57B",
     releaseDate: "2026-06-05",
@@ -1068,6 +1080,7 @@ const models = [
     params: "53.1M",
     blimp: 72.81,
     arc: 30.3,
+    gci: 52.77,
     wiki: 2.38,
     tokens: "1.1B",
     releaseDate: "2026-06-09",
@@ -1081,6 +1094,7 @@ const models = [
     params: "117K",
     blimp: 51.77,
     arc: 26.39,
+    gci: 52.23,
     wiki: 25.17,
     tokens: "500M",
     releaseDate: "2026-05-18",
@@ -1094,6 +1108,7 @@ const models = [
     params: "51.8M",
     blimp: 76.3,
     arc: 46.0,
+    gci: 53.53,
     wiki: 2.04,
     tokens: "20B",
     releaseDate: "2026-05-27",
@@ -1107,6 +1122,7 @@ const models = [
     params: "51.8M",
     blimp: 64.14,
     arc: 45.16,
+    gci: 53.16,
     wiki: 2.6,
     tokens: "20B",
     releaseDate: "2026-06-04",
@@ -1121,6 +1137,7 @@ const models = [
     params: "85.7M",
     blimp: 71.44,
     arc: 38.01,
+    gci: 52.51,
     wiki: 2.2228,
     tokens: "~20B",
     releaseDate: "2026-05-22",
@@ -1135,6 +1152,7 @@ const models = [
     params: "75M",
     blimp: 76.10,
     arc: 35.65,
+    gci: 52.27,
     wiki: 2.08,
     tokens: "~18B",
     releaseDate: "2026-05-29",
@@ -1149,6 +1167,7 @@ const models = [
     params: "75M",
     blimp: 76.02,
     arc: 39.10,
+    gci: 52.26,
     wiki: 2.17,
     tokens: "~18B",
     releaseDate: "2026-05-29",
@@ -1163,6 +1182,7 @@ const models = [
     params: "11.9K",
     blimp: 52.43,
     arc: 25.46,
+    gci: 50.00,
     wiki: 14.73,
     tokens: "500K",
     releaseDate: "2026-06-16",
@@ -1176,6 +1196,7 @@ const models = [
     params: "150M",
     blimp: 72.67,
     arc: 31.40,
+    gci: 50.83,
     wiki: 2.45,
     tokens: "~1.47B",
     releaseDate: "2026-05-05",
@@ -1189,6 +1210,7 @@ const models = [
     params: "86M",
     blimp: 73.56,
     arc: 39.31,
+    gci: 52.42,
     wiki: 2.3753,
     tokens: "—",
     releaseDate: "2026-06-18",
@@ -1203,6 +1225,7 @@ const models = [
     params: "86M",
     blimp: 70.33,
     arc: 34.68,
+    gci: 52.16,
     wiki: 2.6839,
     tokens: "—",
     releaseDate: "2026-06-18",
@@ -1244,6 +1267,7 @@ const models = [
     params: "34.6M",
     blimp: 64.05,
     arc: 32.79,
+    gci: 54.44,
     wiki: 2.875,
     tokens: "~115~165M",
     releaseDate: "2026-06-25",
@@ -1257,6 +1281,7 @@ const models = [
     params: "34.6M",
     blimp: 64.87,
     arc: 34.13,
+    gci: 54.16,
     wiki: 2.838,
     tokens: "210M",
     releaseDate: "2026-06-28",
@@ -1270,6 +1295,7 @@ const models = [
     params: "125M",
     blimp: 81.28,
     arc: 57.07,
+    gci: 54.53,
     wiki: 1.86,
     tokens: "75B",
     releaseDate: "2026-04-22",
@@ -1293,6 +1319,7 @@ const models = [
     params: "99.8M",
     blimp: 61.13,
     arc: 25.88,
+    gci: 50.66,
     wiki: 3.878,
     tokens: "~625M",
     releaseDate: "2026-06-15",
@@ -1306,6 +1333,7 @@ const models = [
     params: "99.8M",
     blimp: 66.01,
     arc: 33.88,
+    gci: 51.69,
     wiki: 2.879,
     tokens: "—",
     releaseDate: "2026-07-05",
@@ -1332,6 +1360,7 @@ const models = [
     params: "500k",
     blimp: 60.61,
     arc: 30.35,
+    gci: 49.58,
     wiki: 4.1228,
     tokens: "300M",
     releaseDate: "2026-07-16",
@@ -1345,6 +1374,7 @@ const models = [
     params: "23.85M",
     blimp: 75.09,
     arc: 39.98,
+    gci: 53.72,
     wiki: 2.2250,
     tokens: "~12.85B",
     releaseDate: "2026-07-07",
@@ -1359,6 +1389,7 @@ const models = [
     params: "51.8M",
     blimp: 67.4,
     arc: 45.9,
+    gci: 53.17,
     wiki: 2.7,
     tokens: "23B",
     releaseDate: "2026-06-12",
@@ -1373,6 +1404,7 @@ const models = [
     params: "0.2M",
     blimp: 51.84,
     arc: 26.77,
+    gci: 49.26,
     wiki: 8.0696,
     tokens: "1.5M",
     releaseDate: "2026-05-15",
@@ -1571,13 +1603,16 @@ function renderStats() {
   const orgs = new Set(models.map(m => m.org));
   const blimps = models.filter(m => m.blimp).map(m => m.blimp);
   const arcs = models.filter(m => m.arc).map(m => m.arc);
+  const gcis = models.filter(m => typeof m.gci === 'number').map(m => m.gci);
   const bestB = Math.max(...blimps);
   const bestA = Math.max(...arcs);
+  const bestG = gcis.length ? Math.max(...gcis) : null;
   document.getElementById('stat-row').innerHTML = `
     <div class="stat-pill"><div class="label">Models</div><div class="value">${models.length}</div><div class="sub">On leaderboard</div></div>
     <div class="stat-pill"><div class="label">Organizations</div><div class="value">${orgs.size}</div><div class="sub">Contributing</div></div>
     <div class="stat-pill"><div class="label">Best BLiMP</div><div class="value" style="color:var(--green)">${bestB}%</div><div class="sub">${models.find(m => m.blimp === bestB).name}</div></div>
     <div class="stat-pill"><div class="label">Best ARC-E</div><div class="value" style="color:var(--green)">${bestA}%</div><div class="sub">${models.find(m => m.arc === bestA).name}</div></div>
+    ${gcis.length ? `<div class="stat-pill"><div class="label">Best GCI</div><div class="value" style="color:var(--green)">${bestG.toFixed(2)}%</div><div class="sub">${models.find(m => m.gci === bestG).name}</div></div>` : ''}
   `;
   document.getElementById('model-count-badge').textContent = `${models.length} models`;
 }
@@ -1604,6 +1639,11 @@ const sortComparators = {
     if (b.arc == null) return -1;
     return b.arc - a.arc;
   },
+  gci: (a, b) => {
+    if (typeof a.gci !== 'number') return 1;
+    if (typeof b.gci !== 'number') return -1;
+    return b.gci - a.gci;
+  },
   efficiency: (a, b) => getEfficiencyScore(b) - getEfficiencyScore(a),
   params: (a, b) => parseParams(a.params) - parseParams(b.params),
   date: (a, b) => {
@@ -1620,6 +1660,14 @@ function sizeBucket(params) {
   return 'large';
 }
 
+let searchQuery = '';
+
+function matchesSearch(m) {
+  if (!searchQuery) return true;
+  const q = searchQuery.toLowerCase();
+  return m.name.toLowerCase().includes(q) || (orgNameMap[m.org] || '').toLowerCase().includes(q);
+}
+
 function matchesFilter(m) {
   if (activeFilter === 'all') return true;
   if (activeFilter === 'small' || activeFilter === 'medium' || activeFilter === 'large') {
@@ -1629,7 +1677,16 @@ function matchesFilter(m) {
 }
 
 function getFilteredModels() {
-  return models.filter(matchesFilter);
+  return models.filter(m => matchesFilter(m) && matchesSearch(m));
+}
+
+function setupSearch() {
+  const box = document.getElementById('model-search');
+  if (!box) return;
+  box.addEventListener('input', e => {
+    searchQuery = e.target.value.trim();
+    renderFilteredViews();
+  });
 }
 
 function setupSortControl() {
@@ -1646,11 +1703,8 @@ function renderFilteredViews() {
   renderTable();
   buildLegend();
   renderTimeline();
-  buildBarChart('blimpChart', 'blimp', false);
-  buildBarChart('arcChart', 'arc', false);
-  buildWikiChart();
-  buildEfficiencyChart();
-  buildOrgCountChart();
+  if (activeView === 'charts') buildMetricChart();
+  if (activeView === 'efficiency') buildEfficiencyChart();
 }
 
 function buildFilters() {
@@ -1706,9 +1760,10 @@ function renderTable() {
   const tbody = document.getElementById('leaderboard-body');
   const cmp = sortComparators[activeSort] || sortComparators.score;
   const filtered = getFilteredModels().sort(cmp);
-  document.getElementById('model-count-badge').textContent = activeFilter === 'all'
-    ? `${models.length} models`
-    : `${filtered.length} of ${models.length} models`;
+  document.getElementById('model-count-badge').textContent =
+    filtered.length === models.length
+      ? `${models.length} models`
+      : `${filtered.length} of ${models.length} models`;
   const blimps = models.filter(m => m.blimp).map(m => m.blimp);
   const arcs = models.filter(m => m.arc).map(m => m.arc);
   const wikis = models.filter(m => m.wiki).map(m => m.wiki);
@@ -1716,6 +1771,8 @@ function renderTable() {
   const bMin = Math.min(...blimps), bMax = Math.max(...blimps);
   const aMin = Math.min(...arcs), aMax = Math.max(...arcs);
   const wMin = Math.min(...wikis), wMax = Math.max(...wikis);
+  const gcis = models.filter(m => typeof m.gci === 'number').map(m => m.gci);
+  const gMin = Math.min(...gcis), gMax = Math.max(...gcis);
   const eMin = Math.min(...effs), eMax = Math.max(...effs);
 
   tbody.innerHTML = filtered.map((m, idx) => {
@@ -1753,6 +1810,11 @@ function renderTable() {
           ? `<span class="metric-val${isBestArc ? ' best' : ''}">${m.arc}%</span>`
           : '<span class="metric-na">TBD</span>'}
       </td>
+      <td class="cell-metric" style="${typeof m.gci === 'number' ? getColor(m.gci, gMin, gMax, false) : ''}">
+        ${typeof m.gci === 'number'
+          ? `<span class="metric-val${m.gci === gMax ? ' best' : ''}">${m.gci.toFixed(2)}%</span>`
+          : '<span class="metric-na">TBD</span>'}
+      </td>
       <td class="cell-tokens">${m.tokens}</td>
       <td class="cell-date">${formatDate(m.releaseDate)}</td>
       <td class="cell-links">
@@ -1761,7 +1823,7 @@ function renderTable() {
         ${m.links.demo ? `<a href="${m.links.demo}" target="_blank">demo</a>` : ''}
       </td>
     </tr>`;
-  }).join('');
+  }).join('') || `<tr><td colspan="12" class="tl-empty">No model matches that search.</td></tr>`;
 }
 
 /* ─── Legend ─── */
@@ -1852,54 +1914,113 @@ function renderTimeline() {
 
 /* ─── Bar charts ─── */
 
-function buildBarChart(canvasId, metric, reverse) {
-  const canvas = document.getElementById(canvasId);
+const METRICS = {
+  blimp: { label: 'BLiMP', sub: 'Grammatical acceptability &middot; higher is better', unit: '%', lowerBetter: false },
+  arc:   { label: 'ARC-Easy', sub: 'Science QA accuracy &middot; higher is better', unit: '%', lowerBetter: false },
+  gci:   { label: 'GCI', sub: 'Glint Clarity Index &middot; share of attention&times;gradient saliency landing on relevant sentences &middot; 50 = no preference over distractors', unit: '%', lowerBetter: false, dot: true, min: 45, max: 56 },
+  wiki:  { label: 'WikiText-2', sub: 'Byte-level perplexity &middot; log scale &middot; lower is better &middot; models above 1000 ppl omitted', unit: '', lowerBetter: true, dot: true, cap: 1000 }
+};
+let activeMetric = 'blimp';
+
+function setupMetricSwitch() {
+  const box = document.getElementById('metric-switch');
+  if (!box) return;
+  box.innerHTML = Object.entries(METRICS).map(([k, m]) =>
+    `<button class="metric-chip${k === activeMetric ? ' active' : ''}" data-metric="${k}">${m.label}</button>`
+  ).join('');
+  box.querySelectorAll('.metric-chip').forEach(btn => {
+    btn.addEventListener('click', () => {
+      activeMetric = btn.dataset.metric;
+      setupMetricSwitch();
+  setupTabs();
+  setupSearch();
+      buildMetricChart();
+    });
+  });
+}
+
+function buildMetricChart() {
+  const canvas = document.getElementById('metricChart');
+  if (!canvas) return;
   const existing = Chart.getChart(canvas);
   if (existing) existing.destroy();
 
-  const fmt = v => v.toFixed(1) + '%';
+  const metric = activeMetric;
+  const meta = METRICS[metric];
+  document.getElementById('metric-title').innerHTML = meta.label;
+
   const sorted = getFilteredModels()
-    .filter(d => d[metric] !== null && typeof d[metric] === 'number')
-    .sort((a, b) => reverse ? a[metric] - b[metric] : b[metric] - a[metric]);
+    .filter(d => typeof d[metric] === 'number')
+    .filter(d => (meta.cap === undefined || d[metric] <= meta.cap) &&
+                 (meta.min === undefined || d[metric] >= meta.min))
+    .sort((a, b) => meta.lowerBetter ? a[metric] - b[metric] : b[metric] - a[metric]);
+
+  // never drop a model silently: anything outside a zoomed axis is called out
+  const off = getFilteredModels().filter(d => typeof d[metric] === 'number')
+    .filter(d => (meta.min !== undefined && d[metric] < meta.min) ||
+                 (meta.cap !== undefined && d[metric] > meta.cap));
+  document.getElementById('metric-sub').innerHTML = meta.sub +
+    (off.length ? ` &middot; off scale: ${off.map(d => `${d.name} (${d[metric]})`).join(', ')}` : '');
+
+  // one row per model, so the labels stay readable however many models there are
+  canvas.parentElement.style.height = Math.max(220, sorted.length * 21 + 46) + 'px';
+
+  const fmt = v => meta.unit === '%' ? v.toFixed(1) + '%' : (v >= 100 ? v.toExponential(2) : v.toFixed(2));
 
   new Chart(canvas, {
     type: 'bar',
     data: {
       labels: sorted.map(d => d.name),
       datasets: [{
-        data: sorted.map(d => d[metric]),
-        backgroundColor: sorted.map(d => bgMap[d.org]),
+        // a bar from zero is meaningless on a log perplexity axis, so that
+        // metric is drawn as a dot plot instead
+        type: meta.dot ? 'scatter' : 'bar',
+        data: meta.dot
+          ? sorted.map((d, i) => ({ x: d[metric], y: i }))
+          : sorted.map(d => d[metric]),
+        backgroundColor: sorted.map(d => meta.dot ? colorMap[d.org] : bgMap[d.org]),
         borderColor: sorted.map(d => colorMap[d.org]),
         borderWidth: 1,
         borderRadius: 3,
-        borderSkipped: false
+        borderSkipped: false,
+        pointRadius: 4.5,
+        pointHoverRadius: 6.5,
+        barPercentage: 0.82,
+        categoryPercentage: 0.9
       }]
     },
     options: {
       indexAxis: 'y',
       responsive: true,
       maintainAspectRatio: false,
-      animation: { duration: 600, easing: 'easeOutQuart' },
+      animation: { duration: 450, easing: 'easeOutQuart' },
       plugins: {
         tooltip: {
-          callbacks: { label: ctx => fmt(ctx.parsed.x) },
+          callbacks: {
+            label: ctx => `${fmt(ctx.parsed.x)}  ·  ${sorted[ctx.dataIndex].params} params`
+          },
           ...tooltipStyle
         }
       },
       scales: {
         x: {
-          beginAtZero: true,
-          grid: { drawBorder: false },
-          ticks: { callback: v => v + '%' }
+          type: meta.lowerBetter ? 'logarithmic' : 'linear',
+          beginAtZero: !meta.lowerBetter && meta.min === undefined,
+          min: meta.min,
+          max: meta.max,
+          grid: { color: 'rgba(48,54,61,0.6)', drawBorder: false },
+          ticks: { color: '#8b949e', callback: v => meta.unit === '%' ? v + '%' : v }
         },
         y: {
+          type: 'category',
           grid: { display: false },
           ticks: {
-            font: { size: 9 },
+            color: '#8b949e',
+            font: { size: 10 },
             autoSkip: false,
             callback: function(v) {
               const l = this.getLabelForValue(v);
-              return l.length > 18 ? l.slice(0, 17) + '…' : l;
+              return l.length > 22 ? l.slice(0, 21) + '…' : l;
             }
           }
         }
@@ -1908,163 +2029,6 @@ function buildBarChart(canvasId, metric, reverse) {
   });
 }
 
-/* ─── WikiText-2 Bubble ─── */
-
-function buildWikiChart() {
-  const canvas = document.getElementById('wikiChart');
-  const existing = Chart.getChart(canvas);
-  if (existing) existing.destroy();
-
-  const data = getFilteredModels()
-    .filter(d => d.wiki !== null && typeof d.wiki === 'number')
-    .filter(d => d.name !== 'Glint-0.1' && d.name !== 'Glint-0.2')
-    .map(d => ({
-      name: d.name,
-      org: d.org,
-      wiki: d.wiki,
-      logWiki: Math.log10(Math.max(d.wiki, 0.1)),
-      params: d.params
-    }))
-    .sort((a, b) => a.wiki - b.wiki);
-
-  const ySpread = [];
-  const used = [];
-  data.forEach(d => {
-    let y = 0.5;
-    const logX = d.logWiki;
-    for (let attempt = 0; attempt < 40; attempt++) {
-      const candidateY = 0.15 + (attempt % 8) * 0.1 + Math.floor(attempt / 8) * 0.02;
-      let overlap = false;
-      for (const u of used) {
-        const dx = Math.abs(logX - u.logX);
-        const dy = Math.abs(candidateY - u.y);
-        if (dx < 0.15 && dy < 0.08) { overlap = true; break; }
-      }
-      if (!overlap) { y = candidateY; break; }
-    }
-    used.push({ logX, y });
-    ySpread.push(y);
-  });
-
-  const logVals = data.map(d => d.logWiki);
-  const logMin = Math.min(...logVals);
-  const logMax = Math.max(...logVals);
-
-  function getRadius(logW) {
-    if (logMax === logMin) return 12;
-    const t = (logW - logMin) / (logMax - logMin);
-    return 6 + t * 26;
-  }
-
-  const tooltip = document.getElementById('wikiTooltip');
-  tooltip.classList.remove('visible');
-
-  new Chart(canvas, {
-    type: 'bubble',
-    data: {
-      datasets: [{
-        data: data.map((d, i) => ({
-          x: d.wiki,
-          y: ySpread[i],
-          r: getRadius(d.logWiki),
-          _name: d.name,
-          _org: d.org,
-          _wiki: d.wiki,
-          _params: d.params
-        })),
-        backgroundColor: data.map(d => orgTint(d.org, 0.5)),
-        borderColor: data.map(d => colorMap[d.org]),
-        borderWidth: 1.5,
-        hoverBorderWidth: 2.5,
-        hoverBackgroundColor: data.map(d => orgTint(d.org, 0.75))
-      }]
-    },
-    options: {
-      responsive: true,
-      maintainAspectRatio: true,
-      animation: { duration: 700, easing: 'easeOutQuart' },
-      layout: { padding: { top: 10, bottom: 10, left: 10, right: 10 } },
-      scales: {
-        x: {
-          type: 'logarithmic',
-          title: { display: true, text: 'byte_ppl (log scale)', color: '#8b949e', font: { size: 11 } },
-          grid: { drawBorder: false, color: 'rgba(255,255,255,0.04)' },
-          ticks: {
-            color: '#8b949e',
-            callback: function(v) {
-              if (v >= 1000) return (v / 1000).toFixed(v >= 10000 ? 0 : 1) + 'K';
-              if (v >= 1) return v.toFixed(v >= 100 ? 0 : v >= 10 ? 1 : 2);
-              return v.toString();
-            }
-          }
-        },
-        y: { display: false, min: 0, max: 1 }
-      },
-      plugins: {
-        legend: { display: false },
-        tooltip: { enabled: false }
-      }
-    },
-    plugins: [
-      {
-        id: 'customLabels',
-        afterDraw(chart) {
-          const ctx = chart.ctx;
-          const meta = chart.getDatasetMeta(0);
-          meta.data.forEach((point, i) => {
-            const d = chart.data.datasets[0].data[i];
-            if (d.r >= 12) {
-              ctx.save();
-              ctx.font = `500 ${Math.min(d.r * 0.55, 11)}px -apple-system,BlinkMacSystemFont,sans-serif`;
-              ctx.fillStyle = 'rgba(255,255,255,0.85)';
-              ctx.textAlign = 'center';
-              ctx.textBaseline = 'middle';
-              let label = d._name;
-              const maxW = d.r * 1.6;
-              if (ctx.measureText(label).width > maxW) {
-                label = label.slice(0, Math.floor(maxW / ctx.measureText('A').width)) + '…';
-              }
-              ctx.fillText(label, point.x, point.y);
-              ctx.restore();
-            }
-          });
-        }
-      },
-      {
-        id: 'customTooltip',
-        afterEvent(chart, args) {
-          const evt = args.event;
-          if (evt.type === 'mouseout') {
-            tooltip.classList.remove('visible');
-            return;
-          }
-          const elements = chart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, false);
-          if (elements.length > 0) {
-            const el = elements[0];
-            const d = chart.data.datasets[0].data[el.index];
-            const point = chart.getDatasetMeta(0).data[el.index];
-            tooltip.querySelector('.tt-name').textContent = d._name;
-            tooltip.querySelector('.tt-val').innerHTML =
-              `byte_ppl: <strong>${d._wiki.toLocaleString()}</strong> · ${d._params} params`;
-            let left = point.x + 14;
-            let top = point.y - 20;
-            const ttW = 250;
-            if (left + ttW > canvas.width) left = point.x - ttW - 10;
-            if (top < 0) top = 10;
-            tooltip.style.left = left + 'px';
-            tooltip.style.top = top + 'px';
-            tooltip.classList.add('visible');
-          } else {
-            tooltip.classList.remove('visible');
-          }
-        }
-      }
-    ]
-  });
-}
-
-/* ─── Efficiency ── */
-
 function buildEfficiencyChart() {
   const canvas = document.getElementById('efficiencyChart');
   const existing = Chart.getChart(canvas);
@@ -2233,49 +2197,6 @@ function buildEfficiencyChart() {
 
 /* ─── Org Count ─── */
 
-function buildOrgCountChart() {
-  const canvas = document.getElementById('orgCountChart');
-  const existing = Chart.getChart(canvas);
-  if (existing) existing.destroy();
-
-  const counts = {};
-  getFilteredModels().forEach(m => counts[m.org] = (counts[m.org] || 0) + 1);
-  const orgs = Object.keys(counts).sort((a, b) => counts[b] - counts[a]);
-
-  new Chart(canvas, {
-    type: 'doughnut',
-    data: {
-      labels: orgs.map(o => orgNameMap[o]),
-      datasets: [{
-        data: orgs.map(o => counts[o]),
-        backgroundColor: orgs.map(o => colorMap[o]),
-        borderColor: '#161b22',
-        borderWidth: 2,
-        hoverOffset: 6
-      }]
-    },
-    options: {
-      responsive: true,
-      maintainAspectRatio: true,
-      cutout: '58%',
-      animation: { duration: 700, easing: 'easeOutQuart' },
-      plugins: {
-        legend: {
-          display: true,
-          position: 'bottom',
-          labels: {
-            color: '#c9d1d9',
-            padding: 14,
-            usePointStyle: true,
-            pointStyle: 'circle',
-            font: { size: 11 }
-          }
-        }
-      }
-    }
-  });
-}
-
 /* ─── Toggle Banner ─── */
 
 function toggleUnknownBanner() {
@@ -2287,12 +2208,40 @@ function toggleUnknownBanner() {
   if (hint) hint.classList.toggle('rotated');
 }
 
+/* ─── Views ─── */
+
+let activeView = 'table';
+
+function setView(view) {
+  activeView = view;
+  document.querySelectorAll('#tabbar .tab').forEach(t =>
+    t.classList.toggle('active', t.dataset.view === view));
+  const map = { table: 'table-section', charts: 'charts-section',
+                timeline: 'timeline-section', efficiency: 'efficiency-section' };
+  Object.entries(map).forEach(([k, id]) => {
+    const el = document.getElementById(id);
+    if (el) el.hidden = k !== view;
+  });
+  // Chart.js can't measure a hidden canvas, so draw on reveal
+  if (view === 'charts') buildMetricChart();
+  if (view === 'efficiency') buildEfficiencyChart();
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+}
+
+function setupTabs() {
+  document.querySelectorAll('#tabbar .tab').forEach(t =>
+    t.addEventListener('click', () => setView(t.dataset.view)));
+}
+
 /* ─── Init ─── */
 
 window.addEventListener('DOMContentLoaded', () => {
   renderStats();
   buildFilters();
   setupSortControl();
+  setupMetricSwitch();
+  setupTabs();
+  setupSearch();
   renderFilteredViews();
 });