feat: render leaderboards from data/leaderboard.json with static fallback

index.html

@@ -173,11 +173,11 @@
 </div>
 <div class="mb-6">
 <div class="font-mono text-[10px] text-on-surface-variant uppercase tracking-[0.15em] mb-2">Top model</div>
-<div class="text-infinite-blue font-bold text-xl leading-tight">Claude Opus 4.5</div>
-<div class="text-on-surface-variant text-sm font-medium">Anthropic</div>
+<div id="eog-top-name" class="text-infinite-blue font-bold text-xl leading-tight">Claude Opus 4.5</div>
+<div id="eog-top-org" class="text-on-surface-variant text-sm font-medium">Anthropic</div>
 </div>
 <div class="bg-[#f0f9f3] border-l-4 border-wasabi-green rounded-xl p-4 flex items-center gap-3 mb-8">
-<span class="text-infinite-blue font-bold text-3xl tabular-nums leading-none">37.4<span class="text-on-surface-variant text-lg font-medium ml-0.5">%</span></span>
+<span id="eog-top-score" class="text-infinite-blue font-bold text-3xl tabular-nums leading-none">37.4<span class="text-on-surface-variant text-lg font-medium ml-0.5">%</span></span>
 <span class="font-mono text-[10px] text-on-surface-variant uppercase tracking-wider font-medium">Task Success Rate · Oracle mode</span>
 <span class="tooltip">
 <button type="button" class="tooltip-trigger" aria-label="Task Success Rate definition" aria-describedby="tt-eog-metric">
@@ -186,7 +186,7 @@
 <span class="tooltip-bubble" role="tooltip" id="tt-eog-metric">A task passes only if all verification conditions are met.</span>
 </span>
 </div>
-<div class="space-y-4">
+<div id="eog-runners" class="space-y-4">
 <!-- Runner 2 -->
 <div class="grid grid-cols-[20px_1fr_100px_45px] items-center gap-3">
 <span class="text-on-surface-variant text-xs tabular-nums font-medium">2</span>
@@ -261,12 +261,12 @@
 </div>
 <div class="bg-[#f2f0ff] border-l-4 border-bright-indigo rounded-lg p-3 flex justify-between items-center mb-3">
 <div>
-<div class="text-infinite-blue font-bold text-base leading-tight">Nova + GPT-5.4 + Sonic</div>
-<div class="text-on-surface-variant text-[11px] font-medium">Mixed Models · Cascade</div>
+<div id="eva-acc-name" class="text-infinite-blue font-bold text-base leading-tight">Nova + GPT-5.4 + Sonic</div>
+<div id="eva-acc-sub" class="text-on-surface-variant text-[11px] font-medium">Mixed Models · Cascade</div>
 </div>
-<span class="text-infinite-blue font-bold text-2xl tabular-nums">0.41</span>
+<span id="eva-acc-score" class="text-infinite-blue font-bold text-2xl tabular-nums">0.41</span>
 </div>
-<div class="space-y-2.5">
+<div id="eva-acc-runners" class="space-y-2.5">
 <div class="grid grid-cols-[18px_1fr_80px_35px] items-center gap-2 text-xs">
 <span class="text-on-surface-variant tabular-nums font-medium">2</span>
 <span class="text-on-surface font-medium truncate">Claude Opus 4.5</span>
@@ -317,12 +317,12 @@
 </div>
 <div class="bg-[#f0f9ff] border-l-4 border-bright-blue rounded-lg p-3 flex justify-between items-center mb-3">
 <div>
-<div class="text-infinite-blue font-bold text-base leading-tight">Gemini Live</div>
-<div class="text-on-surface-variant text-[11px] font-medium">Google · Speech-to-Speech</div>
+<div id="eva-exp-name" class="text-infinite-blue font-bold text-base leading-tight">Gemini Live</div>
+<div id="eva-exp-sub" class="text-on-surface-variant text-[11px] font-medium">Google · Speech-to-Speech</div>
 </div>
-<span class="text-infinite-blue font-bold text-2xl tabular-nums">0.49</span>
+<span id="eva-exp-score" class="text-infinite-blue font-bold text-2xl tabular-nums">0.49</span>
 </div>
-<div class="space-y-2.5">
+<div id="eva-exp-runners" class="space-y-2.5">
 <div class="grid grid-cols-[18px_1fr_80px_35px] items-center gap-2 text-xs">
 <span class="text-on-surface-variant tabular-nums font-medium">2</span>
 <span class="text-on-surface font-medium truncate">GPT-Realtime</span>
@@ -373,5 +373,73 @@
     </p>
 </footer>
 </div>
+<script>
+// Overlay synced leaderboard data on the static fallback markup.
+// On any failure, the static markup already in the DOM remains.
+(function () {
+  function esc(s) {
+    return String(s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+  }
+
+  function eogRunnerRow(r) {
+    return `<div class="grid grid-cols-[20px_1fr_100px_45px] items-center gap-3">
+<span class="text-on-surface-variant text-xs tabular-nums font-medium">${r.rank}</span>
+<span class="text-on-surface text-sm font-medium">${esc(r.model)}</span>
+<div class="h-1.5 w-full bg-infinite-soft rounded-full overflow-hidden">
+<div class="h-full fill-infinite rounded-full" style="width: ${r.bar}%;"></div>
+</div>
+<span class="text-infinite-blue text-sm font-bold text-right tabular-nums">${r.score.toFixed(1)}</span>
+</div>`;
+  }
+
+  function evaRunnerRow(r, fill) {
+    return `<div class="grid grid-cols-[18px_1fr_80px_35px] items-center gap-2 text-xs">
+<span class="text-on-surface-variant tabular-nums font-medium">${r.rank}</span>
+<span class="text-on-surface font-medium truncate">${esc(r.name)}</span>
+<div class="h-1 w-full bg-${fill}-soft rounded-full overflow-hidden">
+<div class="h-full fill-${fill} rounded-full" style="width: ${r.bar}%;"></div>
+</div>
+<span class="text-infinite-blue font-bold text-right tabular-nums">${r.score.toFixed(2)}</span>
+</div>`;
+  }
+
+  function setText(id, value) {
+    const el = document.getElementById(id);
+    if (el) el.textContent = value;
+  }
+
+  function renderEog(board) {
+    const top = board.rows[0];
+    if (!top) return;
+    setText('eog-top-name', top.model);
+    setText('eog-top-org', top.org);
+    const score = document.getElementById('eog-top-score');
+    if (score) score.innerHTML = `${top.score.toFixed(1)}<span class="text-on-surface-variant text-lg font-medium ml-0.5">%</span>`;
+    const runners = document.getElementById('eog-runners');
+    if (runners) runners.innerHTML = board.rows.slice(1).map(eogRunnerRow).join('');
+  }
+
+  function renderEvaSplit(board, prefix, fill) {
+    const top = board.rows[0];
+    if (!top) return;
+    setText(`${prefix}-name`, top.name);
+    setText(`${prefix}-sub`, top.subtitle);
+    setText(`${prefix}-score`, top.score.toFixed(2));
+    const runners = document.getElementById(`${prefix}-runners`);
+    if (runners) runners.innerHTML = board.rows.slice(1).map((r) => evaRunnerRow(r, fill)).join('');
+  }
+
+  fetch('./data/leaderboard.json', { cache: 'no-cache' })
+    .then((res) => { if (!res.ok) throw new Error('HTTP ' + res.status); return res.json(); })
+    .then((data) => {
+      if (data.eog) renderEog(data.eog);
+      if (data.evaAccuracy) renderEvaSplit(data.evaAccuracy, 'eva-acc', 'indigo');
+      if (data.evaExperience) renderEvaSplit(data.evaExperience, 'eva-exp', 'blue');
+    })
+    .catch((err) => {
+      console.warn('Leaderboard JSON load failed; showing static fallback.', err);
+    });
+})();
+</script>
 </body>
 </html>