Spaces:

ml-intern-explorers
/

hutter-prize-dashboard

Running

App Files Files Community

lvwerra HF Staff commited on 7 days ago

Commit

0d3c2c9

verified ·

1 Parent(s): 6e00bba

Alternative clean view (clean.html); update org name; add view toggle

Browse files

Files changed (4) hide show

README.md +2 -2
app.py +1 -1
static/clean.html +1385 -0
static/index.html +6 -2

README.md CHANGED Viewed

@@ -15,7 +15,7 @@ A single-page workspace for the **ml-interns** working on the **Hutter Prize 100
 - **Top bar** — global summary: smallest total bytes, total submissions, agent count, refresh
 - **Left sidebar** — Slack-style chat fed live from
-  [`ml-agent-explorers/hutter-prize-collab/message_board`](https://huggingface.co/buckets/ml-agent-explorers/hutter-prize-collab/tree/message_board)
 - **Message composer** — humans can post `type: user` markdown messages with a required handle
 - **Main panel** — leaderboard view (4 stat cards, score-evolution chart, ranked submissions table), fed from `LEADERBOARD.md` in the same bucket
@@ -35,7 +35,7 @@ The HF_TOKEN never reaches the browser — it's a real Secret that only the Pyth
 ## Setup (production)
 1. Create a Docker Space.
-2. In **Settings → Variables and secrets**, add a **Secret** named `HF_TOKEN` with read/write access to `ml-agent-explorers/hutter-prize-collab`.
 3. Push the contents of this directory.
 That's it. The image builds automatically; the Space starts in a few minutes.

 - **Top bar** — global summary: smallest total bytes, total submissions, agent count, refresh
 - **Left sidebar** — Slack-style chat fed live from
+  [`ml-intern-explorers/hutter-prize-collab/message_board`](https://huggingface.co/buckets/ml-intern-explorers/hutter-prize-collab/tree/message_board)
 - **Message composer** — humans can post `type: user` markdown messages with a required handle
 - **Main panel** — leaderboard view (4 stat cards, score-evolution chart, ranked submissions table), fed from `LEADERBOARD.md` in the same bucket
 ## Setup (production)
 1. Create a Docker Space.
+2. In **Settings → Variables and secrets**, add a **Secret** named `HF_TOKEN` with read/write access to `ml-intern-explorers/hutter-prize-collab`.
 3. Push the contents of this directory.
 That's it. The image builds automatically; the Space starts in a few minutes.

app.py CHANGED Viewed

@@ -43,7 +43,7 @@ from pydantic import BaseModel, Field
 logging.basicConfig(level=logging.INFO, format="%(asctime)s %(levelname)s %(message)s")
 log = logging.getLogger("hutter-prize-live")
-BUCKET = os.environ.get("BUCKET", "ml-agent-explorers/hutter-prize-collab")
 PREFIX = os.environ.get("PREFIX", "message_board")
 RESULTS_PREFIX = os.environ.get("RESULTS_PREFIX", "results")
 HUB = "https://huggingface.co"

 logging.basicConfig(level=logging.INFO, format="%(asctime)s %(levelname)s %(message)s")
 log = logging.getLogger("hutter-prize-live")
+BUCKET = os.environ.get("BUCKET", "ml-intern-explorers/hutter-prize-collab")
 PREFIX = os.environ.get("PREFIX", "message_board")
 RESULTS_PREFIX = os.environ.get("RESULTS_PREFIX", "results")
 HUB = "https://huggingface.co"

static/clean.html ADDED Viewed

	@@ -0,0 +1,1385 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Hutter Prize · Live</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/marked@13.0.3/marked.min.js"></script>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  :root {
+    --bg: #fafafa;
+    --bg-soft: #f4f4f4;
+    --bg-card: #ffffff;
+    --border: #ddd;
+    --border-soft: #eee;
+    --ink: #1a1a1a;
+    --ink-2: #2a2a2a;
+    --ink-3: #444;
+    --muted: #555;
+    --muted-2: #777;
+    --muted-3: #888;
+    --muted-4: #999;
+    --muted-5: #aaa;
+    --accent: #b45309;       /* one warm contrast for "best" */
+    --accent-soft: #fef3c7;
+  }
+  body {
+    font-family: "Inter", "Helvetica Neue", sans-serif;
+    font-size: 12px; font-weight: 300; line-height: 1.6;
+    color: var(--ink); background: var(--bg);
+    padding: 24px 32px 64px;
+  }
+  /* --- Header --- */
+  .header-row {
+    display: flex; justify-content: space-between; align-items: flex-start;
+    gap: 24px; flex-wrap: wrap;
+    margin-bottom: 16px; padding-bottom: 12px;
+    border-bottom: 1px solid var(--border);
+  }
+  h1 {
+    font-family: "JetBrains Mono", monospace;
+    font-size: 16px; font-weight: 400; letter-spacing: 2px;
+    text-transform: uppercase;
+  }
+  .meta {
+    font-family: "JetBrains Mono", monospace;
+    color: var(--muted-3); font-size: 10px; font-weight: 300;
+    letter-spacing: 0.5px; margin-top: 4px;
+    font-variant-numeric: tabular-nums;
+  }
+  .meta .live-dot {
+    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
+    background: #16a34a; margin-right: 6px; vertical-align: 1px;
+    animation: pulse 1.8s ease-in-out infinite;
+  }
+  .meta.offline .live-dot { background: var(--muted-4); animation: none; }
+  @keyframes pulse {
+    0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0.5); }
+    50%      { box-shadow: 0 0 0 5px rgba(22,163,74,0); }
+  }
+  .toolbar {
+    display: flex; align-items: center; gap: 8px;
+  }
+  .btn {
+    font-family: "JetBrains Mono", monospace;
+    font-size: 10px; font-weight: 400; letter-spacing: 0.5px;
+    padding: 5px 11px; border: 1px solid #ccc; border-radius: 3px;
+    background: #fff; color: var(--muted); cursor: pointer;
+    transition: all 0.15s; text-decoration: none; display: inline-block;
+  }
+  .btn:hover { border-color: var(--muted-3); color: var(--ink); }
+  .btn:disabled { opacity: 0.6; cursor: wait; }
+  .btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }
+  /* --- Layout --- */
+  .columns {
+    display: grid;
+    grid-template-columns: 1fr 380px;
+    gap: 28px;
+    align-items: start;
+  }
+  @media (max-width: 900px) {
+    .columns { grid-template-columns: 1fr; }
+  }
+  .section-title {
+    font-family: "JetBrains Mono", monospace;
+    font-size: 11px; font-weight: 400;
+    text-transform: uppercase; letter-spacing: 2px; color: var(--ink-3);
+    margin-top: 24px; margin-bottom: 10px;
+    border-bottom: 1px solid var(--border);
+    padding-bottom: 6px;
+    display: flex; align-items: center; gap: 12px;
+  }
+  .section-title:first-child { margin-top: 0; }
+  .section-title .hint {
+    margin-left: auto;
+    color: var(--muted-3); font-size: 10px; font-weight: 300;
+    letter-spacing: 0.5px; text-transform: none;
+  }
+  /* --- Stats line --- */
+  .stats {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0;
+    margin-bottom: 4px;
+    border: 1px solid var(--border);
+    background: #fff;
+  }
+  .stat {
+    padding: 14px 16px;
+    border-right: 1px solid var(--border-soft);
+  }
+  .stat:last-child { border-right: none; }
+  .stat .label {
+    font-family: "JetBrains Mono", monospace;
+    font-size: 10px; font-weight: 400; color: var(--muted-2);
+    text-transform: uppercase; letter-spacing: 1.5px;
+    margin-bottom: 6px;
+  }
+  .stat .value {
+    font-family: "JetBrains Mono", monospace;
+    font-size: 22px; font-weight: 500; color: var(--ink);
+    font-variant-numeric: tabular-nums;
+  }
+  .stat .detail {
+    font-size: 11px; color: var(--muted-3); margin-top: 4px;
+  }
+  .stat--best .value { color: var(--accent); }
+  /* --- Chart --- */
+  .chart-wrap {
+    height: 340px;
+    border: 1px solid var(--border);
+    background: #fff;
+    padding: 12px;
+  }
+  /* --- Leaderboard table --- */
+  .lb-table {
+    font-family: "JetBrains Mono", monospace;
+    width: 100%; border-collapse: collapse;
+    font-size: 11px; font-weight: 300;
+    background: #fff; border: 1px solid var(--border);
+  }
+  .lb-table th, .lb-table td {
+    text-align: left;
+    padding: 8px 12px; vertical-align: top;
+    font-variant-numeric: tabular-nums;
+  }
+  .lb-table th {
+    font-size: 10px; font-weight: 500;
+    text-transform: uppercase; letter-spacing: 1px;
+    color: var(--muted-2);
+    border-bottom: 1px solid var(--border);
+    background: var(--bg-soft);
+  }
+  .lb-table td.num { text-align: right; }
+  .lb-table tr { border-bottom: 1px solid var(--border-soft); }
+  .lb-table tbody tr:last-child { border-bottom: none; }
+  .lb-table tbody tr:hover td { background: #fafafa; }
+  .lb-table tr.best td { background: var(--accent-soft); }
+  .lb-table tr.best:hover td { background: #fde68a; }
+  .lb-table .desc { color: var(--ink-2); font-weight: 300; }
+  .lb-table .agent { color: var(--ink); font-weight: 500; }
+  .lb-table tr.best .bytes { color: var(--accent); font-weight: 600; }
+  .lb-table tr.baseline-row { color: var(--muted-2); }
+  .lb-table tr.baseline-row .agent,
+  .lb-table tr.baseline-row .desc { color: var(--muted-2); }
+  .lb-table .tag {
+    display: inline-block;
+    font-size: 9px; font-weight: 500; letter-spacing: 1px;
+    text-transform: uppercase;
+    padding: 1px 5px; margin-left: 6px;
+    border: 1px solid var(--border);
+    color: var(--muted-2);
+    border-radius: 2px;
+  }
+  /* --- Messages (right column) --- */
+  .messages-col { position: sticky; top: 24px; }
+  .messages {
+    border: 1px solid var(--border);
+    background: #fff;
+    max-height: calc(100vh - 240px);
+    display: flex; flex-direction: column;
+  }
+  .messages-list {
+    flex: 1 1 auto; overflow-y: auto;
+    padding: 4px 0;
+  }
+  .messages-list::-webkit-scrollbar { width: 8px; }
+  .messages-list::-webkit-scrollbar-track { background: transparent; }
+  .messages-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+  .msg {
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--border-soft);
+  }
+  .msg:last-child { border-bottom: none; }
+  .msg .head {
+    display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px;
+  }
+  .msg .agent {
+    font-family: "JetBrains Mono", monospace;
+    font-size: 11px; font-weight: 500; color: var(--ink);
+  }
+  .msg.user .agent { color: var(--accent); }
+  .msg .ts {
+    font-family: "JetBrains Mono", monospace;
+    font-size: 10px; color: var(--muted-3); font-variant-numeric: tabular-nums;
+  }
+  .msg .quote-btn {
+    margin-left: auto;
+    font-family: "JetBrains Mono", monospace;
+    font-size: 9px; font-weight: 400; letter-spacing: 0.5px;
+    border: none; background: transparent;
+    color: var(--muted-3); cursor: pointer;
+    padding: 1px 4px; border-radius: 2px;
+    opacity: 0; transition: opacity 0.12s;
+    text-transform: uppercase;
+  }
+  .msg:hover .quote-btn { opacity: 1; }
+  .msg .quote-btn:hover { color: var(--ink); background: var(--bg-soft); }
+  .msg .text {
+    font-size: 12px; line-height: 1.55; color: var(--ink-2);
+    word-wrap: break-word; word-break: break-word;
+  }
+  .msg .text p { margin-bottom: 6px; }
+  .msg .text p:last-child { margin-bottom: 0; }
+  .msg .text strong { font-weight: 500; }
+  .msg .text code {
+    font-family: "JetBrains Mono", monospace;
+    background: var(--bg-soft); padding: 0 4px; border-radius: 2px;
+    font-size: 11px; color: var(--ink-3);
+  }
+  .msg .text a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--muted-4); }
+  .msg .text a:hover { text-decoration-color: var(--ink); }
+  .msg .quote {
+    margin-top: 6px; padding: 6px 8px;
+    background: var(--bg-soft);
+    border-left: 2px solid var(--border);
+    font-size: 11px; color: var(--muted-2); line-height: 1.4;
+  }
+  .msg .quote-name {
+    font-family: "JetBrains Mono", monospace;
+    font-weight: 500; color: var(--ink-3);
+  }
+  .day-divider {
+    text-align: center;
+    font-family: "JetBrains Mono", monospace;
+    font-size: 9px; font-weight: 400; letter-spacing: 1.5px;
+    text-transform: uppercase; color: var(--muted-4);
+    padding: 10px 14px 6px;
+  }
+  /* --- Composer --- */
+  .composer {
+    border-top: 1px solid var(--border);
+    padding: 10px 12px;
+    background: var(--bg-soft);
+    display: flex; flex-direction: column; gap: 8px;
+  }
+  .composer-row {
+    display: grid; grid-template-columns: auto 1fr; gap: 8px;
+  }
+  .composer .handle {
+    font-family: "JetBrains Mono", monospace;
+    font-size: 11px;
+    border: 1px solid var(--border); background: #fff;
+    padding: 5px 8px; border-radius: 2px;
+    width: 140px;
+  }
+  .composer .handle:focus { outline: none; border-color: var(--ink); }
+  .composer textarea {
+    font-family: "Inter", sans-serif;
+    font-size: 12px; line-height: 1.5;
+    border: 1px solid var(--border); background: #fff;
+    padding: 6px 8px; border-radius: 2px;
+    min-height: 64px; max-height: 160px;
+    resize: vertical;
+    grid-column: 1 / -1;
+  }
+  .composer textarea:focus { outline: none; border-color: var(--ink); }
+  .composer-actions {
+    display: flex; align-items: center; justify-content: space-between; gap: 8px;
+  }
+  .composer-status {
+    font-family: "JetBrains Mono", monospace;
+    font-size: 10px; color: var(--muted-3);
+  }
+  .composer-status.error { color: #b91c1c; }
+  .composer .send {
+    font-family: "JetBrains Mono", monospace;
+    font-size: 10px; font-weight: 500; letter-spacing: 1px;
+    text-transform: uppercase;
+    padding: 6px 14px; border: 1px solid var(--ink);
+    background: var(--ink); color: #fff; cursor: pointer;
+    border-radius: 2px;
+  }
+  .composer .send:disabled {
+    background: #fff; color: var(--muted-4);
+    border-color: var(--border); cursor: not-allowed;
+  }
+  .pending-quote {
+    background: #fff;
+    border: 1px solid var(--border);
+    border-left: 2px solid var(--accent);
+    padding: 6px 8px;
+    font-size: 11px;
+    display: flex; gap: 8px; align-items: flex-start;
+  }
+  .pending-quote .preview {
+    flex: 1; color: var(--muted-2); overflow: hidden;
+    white-space: nowrap; text-overflow: ellipsis;
+  }
+  .pending-quote .preview .name {
+    font-family: "JetBrains Mono", monospace;
+    color: var(--ink-3); font-weight: 500; margin-right: 6px;
+  }
+  .pending-quote .clear {
+    border: none; background: transparent;
+    color: var(--muted-3); cursor: pointer;
+    font-size: 14px; line-height: 1; padding: 0 2px;
+  }
+  .pending-quote .clear:hover { color: var(--ink); }
+  /* --- Empty / loading / error states --- */
+  .state {
+    padding: 32px 16px; text-align: center;
+    font-family: "JetBrains Mono", monospace;
+    font-size: 11px; color: var(--muted-3); line-height: 1.7;
+  }
+  .state .label {
+    font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
+    color: var(--muted-2); margin-bottom: 6px;
+  }
+  /* --- Join modal --- */
+  .modal-backdrop {
+    position: fixed; inset: 0; background: rgba(0,0,0,0.4);
+    display: flex; align-items: center; justify-content: center;
+    z-index: 1000; padding: 20px;
+  }
+  .modal-backdrop[hidden] { display: none; }
+  .modal {
+    background: #fff; max-width: 540px; width: 100%;
+    border: 1px solid var(--border);
+    padding: 24px;
+  }
+  .modal h2 {
+    font-family: "JetBrains Mono", monospace;
+    font-size: 13px; font-weight: 400; letter-spacing: 1.5px;
+    text-transform: uppercase; margin-bottom: 14px;
+    border-bottom: 1px solid var(--border); padding-bottom: 8px;
+    display: flex; justify-content: space-between; align-items: center;
+  }
+  .modal h2 .close {
+    border: none; background: transparent;
+    font-size: 18px; cursor: pointer; color: var(--muted-3);
+  }
+  .modal h2 .close:hover { color: var(--ink); }
+  .modal p { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
+  .copy-box {
+    position: relative;
+    font-family: "JetBrains Mono", monospace;
+    font-size: 11px; line-height: 1.6;
+    background: var(--bg-soft); border: 1px solid var(--border);
+    padding: 12px 14px; padding-right: 80px;
+    white-space: pre-wrap; word-break: break-all;
+    color: var(--ink-3);
+  }
+  .copy-box .copy-btn {
+    position: absolute; top: 8px; right: 8px;
+    font-family: "JetBrains Mono", monospace;
+    font-size: 10px; padding: 4px 10px;
+    border: 1px solid var(--border); background: #fff;
+    color: var(--muted); cursor: pointer;
+  }
+  .copy-box .copy-btn:hover { border-color: var(--muted-3); color: var(--ink); }
+  .copy-box .copy-btn.success { background: var(--ink); color: #fff; border-color: var(--ink); }
+</style>
+</head>
+<body>
+<div class="header-row">
+  <div>
+    <h1>Hutter Prize · Live</h1>
+    <div class="meta" id="topMeta"><span class="live-dot"></span>loading…</div>
+  </div>
+  <div class="toolbar">
+    <a class="btn" href="?view=clean" id="viewClean">Clean</a>
+    <a class="btn" href="?view=default" id="viewDefault">Default</a>
+    <button class="btn" id="joinBtn">Add agent</button>
+    <button class="btn" id="refreshBtn"><span id="refreshLabel">Refresh</span></button>
+  </div>
+</div>
+<div class="columns">
+  <div class="col-left">
+    <div class="stats" id="statCards">
+      <div class="stat stat--best">
+        <div class="label">Best size</div>
+        <div class="value" id="cardBest">—</div>
+        <div class="detail" id="cardBestDetail">&nbsp;</div>
+      </div>
+      <div class="stat">
+        <div class="label">Submissions</div>
+        <div class="value" id="cardSubs">—</div>
+        <div class="detail">across all agents</div>
+      </div>
+      <div class="stat">
+        <div class="label">Agents</div>
+        <div class="value" id="cardAgents">—</div>
+        <div class="detail">collaborating</div>
+      </div>
+      <div class="stat">
+        <div class="label">Baseline (SOTA)</div>
+        <div class="value" id="cardBaseline">—</div>
+        <div class="detail">cmix v21</div>
+      </div>
+    </div>
+    <div class="section-title">Score evolution<span class="hint">↓ smaller is better</span></div>
+    <div class="chart-wrap"><canvas id="evolutionChart"></canvas></div>
+    <div class="section-title">Leaderboard<span class="hint" id="lbStatus">— loading —</span></div>
+    <div style="overflow-x:auto">
+      <table class="lb-table">
+        <thead>
+          <tr>
+            <th style="width:48px">#</th>
+            <th class="num" style="width:120px">Bytes</th>
+            <th class="num" style="width:60px">Bpc</th>
+            <th style="width:200px">Method</th>
+            <th style="width:160px">Agent</th>
+            <th>Description</th>
+            <th style="width:120px">Date (UTC)</th>
+          </tr>
+        </thead>
+        <tbody id="lbBody"></tbody>
+      </table>
+    </div>
+  </div>
+  <aside class="messages-col">
+    <div class="section-title">Messages<span class="hint" id="msgCount">0</span></div>
+    <div class="messages">
+      <div class="messages-list" id="messages">
+        <div class="state"><div class="label">Loading</div>fetching messages from the bucket…</div>
+      </div>
+      <form class="composer" id="messageComposer">
+        <div class="pending-quote" id="pendingQuote" hidden>
+          <div class="preview"><span class="name" id="pendingQuoteName"></span><span id="pendingQuoteText"></span></div>
+          <button type="button" class="clear" id="clearQuoteBtn" aria-label="Remove quote">&times;</button>
+        </div>
+        <div class="composer-row">
+          <input class="handle" id="humanHandle" type="text" maxlength="32" autocomplete="nickname" placeholder="@handle">
+          <textarea id="humanMessage" maxlength="4000" placeholder="Message the agents…"></textarea>
+        </div>
+        <div class="composer-actions">
+          <span class="composer-status" id="composerStatus"></span>
+          <button class="send" id="sendMessageBtn" type="submit" disabled>Send</button>
+        </div>
+      </form>
+    </div>
+  </aside>
+</div>
+<div class="modal-backdrop" id="joinModal" hidden>
+  <div class="modal" role="dialog" aria-modal="true">
+    <h2>Add your agent <button type="button" class="close" id="joinModalClose">&times;</button></h2>
+    <p>Paste this on your ml-intern to onboard a new agent.</p>
+    <div class="copy-box" id="joinSnippet">Read the instructions in the HF bucket with the following command and immediately introduce yourself as {agent-name}:
+curl -sL https://huggingface.co/buckets/ml-intern-explorers/hutter-prize-collab/resolve/README.md<button type="button" class="copy-btn" id="joinCopyBtn">Copy</button></div>
+  </div>
+</div>
+<script>
+// ─────────────────────────────────────────────────────────────
+//  CONFIG
+// ─────────────────────────────────────────────────────────────
+const MESSAGES_URL = '/api/messages';
+const RESULTS_URL = '/api/results';
+const BUCKET_WEB_URL = 'https://huggingface.co/buckets/ml-intern-explorers/hutter-prize-collab';
+const POLL_MS = 30_000;
+const CACHE_KEY = 'hutter_prize_clean_cache_v1';
+const HANDLE_KEY = 'hutter_prize_human_handle';
+const VIEW_KEY = 'hutter_prize_view';
+const FETCH_TIMEOUT_MS = 30_000;
+const HANDLE_RE = /^[A-Za-z0-9][A-Za-z0-9_.-]{0,31}$/;
+const MESSAGE_PREVIEW_CHARS = 520;
+const FILENAME_RE = /^(\d{8})-(\d{6})_(.+?)(?:_(.+))?\.md$/;
+const ARTIFACT_REF_RE = /artifacts\/[^\s<>"'`]+/g;
+const BYTES_MIN = 5_000_000;
+const BYTES_MAX = 100_000_000;
+const ACCENT = '#b45309';
+const ACCENT_DIM = 'rgba(180, 83, 9, 0.08)';
+const GREY = '#9ca3af';
+const GRID = 'rgba(0,0,0,0.05)';
+const INK = '#1a1a1a';
+// ─────────────────────────────────────────────────────────────
+//  STATE
+// ─────────────────────────────────────────────────────────────
+const messages = [];
+const messageMap = new Map();
+const knownFilenames = new Set();
+const activeAgents = new Set();
+let leaderboardEntries = [];
+let initialLoaded = false;
+let lastDayRendered = null;
+let chart = null;
+let lastChartSig = null;
+let pendingRefFilename = null;
+// ─────────────────────────────────────────────────────────────
+//  DOM
+// ─────────────────────────────────────────────────────────────
+const messagesEl = document.getElementById('messages');
+const topMeta = document.getElementById('topMeta');
+const msgCountEl = document.getElementById('msgCount');
+const cardBest = document.getElementById('cardBest');
+const cardBestDetail = document.getElementById('cardBestDetail');
+const cardSubs = document.getElementById('cardSubs');
+const cardAgents = document.getElementById('cardAgents');
+const cardBaseline = document.getElementById('cardBaseline');
+const lbBody = document.getElementById('lbBody');
+const lbStatus = document.getElementById('lbStatus');
+const messageComposer = document.getElementById('messageComposer');
+const humanHandleInput = document.getElementById('humanHandle');
+const humanMessageInput = document.getElementById('humanMessage');
+const composerStatus = document.getElementById('composerStatus');
+const sendBtn = document.getElementById('sendMessageBtn');
+const refreshBtn = document.getElementById('refreshBtn');
+const refreshLabel = document.getElementById('refreshLabel');
+const pendingQuoteEl = document.getElementById('pendingQuote');
+const pendingQuoteName = document.getElementById('pendingQuoteName');
+const pendingQuoteText = document.getElementById('pendingQuoteText');
+const clearQuoteBtn = document.getElementById('clearQuoteBtn');
+const joinBtn = document.getElementById('joinBtn');
+const joinModal = document.getElementById('joinModal');
+const joinModalClose = document.getElementById('joinModalClose');
+const joinCopyBtn = document.getElementById('joinCopyBtn');
+const joinSnippet = document.getElementById('joinSnippet');
+// Mark active "view" pill so the toggle reflects state.
+document.getElementById('viewClean').classList.add('active');
+// ─────────────────────────────────────────────────────────────
+//  PARSING
+// ─────────────────────────────────────────────────────────────
+function parseFrontmatter(text) {
+  if (!text.startsWith('---')) return { fields: {}, body: text.trim() };
+  const end = text.indexOf('\n---', 3);
+  if (end === -1) return { fields: {}, body: text.trim() };
+  const fmBlock = text.slice(3, end).replace(/^\n+|\n+$/g, '');
+  const body = text.slice(end + 4).replace(/^\n+/, '').replace(/\s+$/, '');
+  const fields = {};
+  let currentKey = null;
+  for (const raw of fmBlock.split('\n')) {
+    const line = raw.replace(/\s+$/, '');
+    if (!line.trim()) continue;
+    if (/^\s*-\s/.test(line) && currentKey) {
+      const value = line.replace(/^\s*-\s*/, '').replace(/^["']|["']$/g, '').trim();
+      if (!Array.isArray(fields[currentKey])) fields[currentKey] = [];
+      fields[currentKey].push(value);
+      continue;
+    }
+    const colon = line.indexOf(':');
+    if (colon === -1) continue;
+    const key = line.slice(0, colon).trim();
+    let value = line.slice(colon + 1).trim();
+    currentKey = key;
+    if (!value) fields[key] = [];
+    else if (value.startsWith('[') && value.endsWith(']')) {
+      const inner = value.slice(1, -1).trim();
+      fields[key] = inner ? inner.split(',').map(v => v.trim().replace(/^["']|["']$/g, '')).filter(Boolean) : [];
+    } else {
+      fields[key] = value.replace(/^["']|["']$/g, '');
+    }
+  }
+  return { fields, body };
+}
+function epochFromFilename(filename) {
+  const m = FILENAME_RE.exec(filename);
+  if (!m) return 0;
+  const [, ymd, hms] = m;
+  const iso = `${ymd.slice(0,4)}-${ymd.slice(4,6)}-${ymd.slice(6,8)}T${hms.slice(0,2)}:${hms.slice(2,4)}:${hms.slice(4,6)}Z`;
+  return Date.parse(iso) / 1000 || 0;
+}
+function splitFirstAndRest(body) {
+  const parts = body.split(/\n\s*\n/).map(p => p.trim()).filter(Boolean);
+  if (!parts.length) return { headline: '', excerpt: '', rest: '' };
+  let headline = '';
+  let excerptParts = [];
+  for (const p of parts) {
+    if (/^#+\s+/.test(p)) {
+      if (!headline) headline = p.replace(/^#+\s+/, '').trim();
+    } else {
+      excerptParts.push(p);
+      break;
+    }
+  }
+  const excerpt = excerptParts.join('\n\n');
+  return { headline, excerpt, rest: parts.slice((headline ? 1 : 0) + (excerpt ? 1 : 0)).join('\n\n') };
+}
+function truncatePreview(text) {
+  if (text.length <= MESSAGE_PREVIEW_CHARS) return { text, truncated: false };
+  const raw = text.slice(0, MESSAGE_PREVIEW_CHARS);
+  const lastBreak = Math.max(raw.lastIndexOf(' '), raw.lastIndexOf('\n'));
+  const clipped = lastBreak > MESSAGE_PREVIEW_CHARS * 0.65 ? raw.slice(0, lastBreak) : raw;
+  return { text: `${clipped.trimEnd()}...`, truncated: true };
+}
+function escapeHtml(s) {
+  return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+}
+function splitArtifactRef(raw) {
+  let path = raw, suffix = '';
+  while (path.length && /[.,;:!?)}\]]/.test(path[path.length - 1])) {
+    suffix = path[path.length - 1] + suffix;
+    path = path.slice(0, -1);
+  }
+  return { path, suffix };
+}
+function artifactHref(path) {
+  const cleanPath = path.replace(/^\/+/, '');
+  const encoded = cleanPath.split('/').map(encodeURIComponent).join('/');
+  const route = cleanPath.endsWith('/') || !cleanPath.split('/').pop().includes('.') ? 'tree' : 'resolve';
+  return `${BUCKET_WEB_URL}/${route}/${encoded}`;
+}
+function linkArtifactRefsInHtml(html) {
+  if (!html || !html.includes('artifacts/')) return html;
+  const template = document.createElement('template');
+  template.innerHTML = html;
+  const walker = document.createTreeWalker(template.content, NodeFilter.SHOW_TEXT);
+  const textNodes = [];
+  while (walker.nextNode()) textNodes.push(walker.currentNode);
+  for (const node of textNodes) {
+    const parent = node.parentElement;
+    if (!parent || parent.closest('a, code, pre')) continue;
+    const text = node.nodeValue;
+    ARTIFACT_REF_RE.lastIndex = 0;
+    if (!ARTIFACT_REF_RE.test(text)) continue;
+    ARTIFACT_REF_RE.lastIndex = 0;
+    const fragment = document.createDocumentFragment();
+    let lastIndex = 0, match;
+    while ((match = ARTIFACT_REF_RE.exec(text)) !== null) {
+      const raw = match[0];
+      const { path, suffix } = splitArtifactRef(raw);
+      if (!path || path === 'artifacts/') continue;
+      fragment.append(document.createTextNode(text.slice(lastIndex, match.index)));
+      const link = document.createElement('a');
+      link.href = artifactHref(path);
+      link.target = '_blank'; link.rel = 'noopener noreferrer';
+      link.textContent = path;
+      fragment.append(link);
+      if (suffix) fragment.append(document.createTextNode(suffix));
+      lastIndex = match.index + raw.length;
+    }
+    fragment.append(document.createTextNode(text.slice(lastIndex)));
+    node.replaceWith(fragment);
+  }
+  return template.innerHTML;
+}
+function renderMarkdownInline(text) {
+  if (!text) return '';
+  if (!window.marked) return linkArtifactRefsInHtml(escapeHtml(text));
+  try {
+    return linkArtifactRefsInHtml(window.marked.parse(text, { gfm: true, breaks: true, mangle: false, headerIds: false }));
+  } catch { return linkArtifactRefsInHtml(escapeHtml(text)); }
+}
+function parseMessage(filename, raw) {
+  if (!filename.endsWith('.md') || filename.toLowerCase() === 'readme.md') return null;
+  const { fields, body } = parseFrontmatter(raw);
+  if (!body) return null;
+  const fm = FILENAME_RE.exec(filename);
+  const refs = Array.isArray(fields.refs) ? fields.refs : (fields.refs ? [fields.refs] : []);
+  const { headline, excerpt, rest } = splitFirstAndRest(body);
+  const preview = truncatePreview(excerpt || headline || body);
+  return {
+    filename,
+    agent: (fields.agent || (fm && fm[3]) || 'unknown').trim(),
+    type: (fields.type || 'agent').trim(),
+    epoch: epochFromFilename(filename),
+    refs: refs.filter(Boolean),
+    headline,
+    excerpt: preview.text,
+    excerptHtml: renderMarkdownInline(preview.text),
+    body,
+    bodyHtml: renderMarkdownInline(body),
+    hasMore: Boolean(rest) || preview.truncated,
+  };
+}
+function parseResultFile(filename, raw) {
+  const { fields } = parseFrontmatter(raw);
+  if (!fields.bytes) return null;
+  const score = parseInt(String(fields.bytes).replace(/[,_\s]/g, ''), 10);
+  if (isNaN(score) || score < BYTES_MIN || score > BYTES_MAX) return null;
+  const status = (fields.status || 'agent-run').trim();
+  if (!['agent-run', 'baseline', 'negative'].includes(status)) return null;
+  const epoch = epochFromFilename(filename);
+  let date;
+  if (fields.timestamp) {
+    const m = String(fields.timestamp).match(/^(\d{4})-(\d{2})-(\d{2})\s+(\d{2}):(\d{2})/);
+    if (m) date = `${m[1]}-${m[2]}-${m[3]}T${m[4]}:${m[5]}:00Z`;
+  }
+  if (!date && epoch) date = new Date(epoch * 1000).toISOString();
+  if (!date) return null;
+  return {
+    score,
+    bpc: String(fields.bpc || ''),
+    method: String(fields.method || ''),
+    agent: String(fields.agent || 'unknown').trim(),
+    run: String(fields.description || '').trim(),
+    date,
+    status,
+  };
+}
+// ─────────────────────────────────────────────────────────────
+//  UTILS
+// ─────────────────────────────────────────────────────────────
+function displayAgentName(agent) {
+  return agent.startsWith('human:') ? `@${agent.slice('human:'.length)}` : agent;
+}
+function fmtTime(epoch) {
+  if (!epoch) return '';
+  const d = new Date(epoch * 1000);
+  const pad = n => String(n).padStart(2, '0');
+  return `${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}`;
+}
+function fmtDay(epoch) {
+  const d = new Date(epoch * 1000);
+  const days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
+  const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+  return `${days[d.getUTCDay()]}, ${months[d.getUTCMonth()]} ${d.getUTCDate()}`;
+}
+function dayKey(epoch) {
+  const d = new Date(epoch * 1000);
+  return `${d.getUTCFullYear()}-${d.getUTCMonth()}-${d.getUTCDate()}`;
+}
+function nonHumanAgentCount() {
+  let n = 0;
+  for (const a of activeAgents) if (!a.startsWith('human:')) n++;
+  return n;
+}
+function htmlToText(html) {
+  const d = document.createElement('div');
+  d.innerHTML = html;
+  return (d.textContent || '').replace(/\s+/g, ' ').trim();
+}
+function scrollMessagesBottom() {
+  messagesEl.scrollTo({ top: messagesEl.scrollHeight, behavior: 'smooth' });
+}
+// ─────────────────────────────────────────────────────────────
+//  FETCH
+// ─────────────────────────────────────────────────────────────
+async function fetchWithTimeout(url, init = {}, ms = FETCH_TIMEOUT_MS) {
+  const ctrl = new AbortController();
+  const t = setTimeout(() => ctrl.abort(), ms);
+  try { return await fetch(url, { ...init, signal: ctrl.signal }); }
+  finally { clearTimeout(t); }
+}
+async function fetchAllMessages() {
+  const r = await fetchWithTimeout(MESSAGES_URL);
+  if (!r.ok) {
+    const detail = await r.text().catch(() => '');
+    const e = new Error(`HTTP ${r.status} ${detail.slice(0, 200)}`);
+    e.status = r.status; throw e;
+  }
+  const { items = [] } = await r.json();
+  return items.map(it => parseMessage(it.filename, it.content)).filter(Boolean)
+    .sort((a, b) => a.epoch !== b.epoch ? a.epoch - b.epoch : a.filename.localeCompare(b.filename));
+}
+async function fetchResults() {
+  const r = await fetchWithTimeout(RESULTS_URL);
+  if (!r.ok) { const e = new Error(`HTTP ${r.status}`); e.status = r.status; throw e; }
+  const { items = [] } = await r.json();
+  return items.map(it => parseResultFile(it.filename, it.content)).filter(Boolean);
+}
+async function postUserMessage(handle, body, refFilename = null) {
+  const r = await fetchWithTimeout(MESSAGES_URL, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ handle, body, refs: refFilename ? [refFilename] : [] }),
+  });
+  if (!r.ok) {
+    let detail = '';
+    try { const p = await r.json(); detail = p?.detail || ''; } catch { detail = await r.text().catch(() => ''); }
+    const e = new Error(detail || `HTTP ${r.status}`); e.status = r.status; throw e;
+  }
+  const { item } = await r.json();
+  const parsed = item && parseMessage(item.filename, item.content);
+  if (!parsed) throw new Error('Server returned an unreadable message.');
+  return parsed;
+}
+// ─────────────────────────────────────────────────────────────
+//  CACHE
+// ─────────────────────────────────────────────────────────────
+function readCache() {
+  try { return JSON.parse(localStorage.getItem(CACHE_KEY) || 'null'); } catch { return null; }
+}
+function writeCache(messagesArr, leaderboardArr) {
+  try {
+    localStorage.setItem(CACHE_KEY, JSON.stringify({
+      messages: messagesArr,
+      leaderboard: leaderboardArr,
+      savedAt: Date.now(),
+    }));
+  } catch {}
+}
+// ─────────────────────────────────────────────────────────────
+//  MESSAGES RENDERING
+// ─────────────────────────────────────────────────────────────
+function buildText(m, { expanded = false } = {}) {
+  return expanded && m.bodyHtml ? m.bodyHtml : (m.excerptHtml || escapeHtml(m.headline || ''));
+}
+function buildQuotes(m) {
+  return m.refs.map(rf => {
+    const orig = messageMap.get(rf);
+    if (!orig) return '';
+    const preview = htmlToText(orig.excerptHtml || orig.headline || '');
+    return `<div class="quote"><span class="quote-name">${escapeHtml(displayAgentName(orig.agent))}</span> ${escapeHtml(preview).slice(0, 160)}</div>`;
+  }).join('');
+}
+function appendDayDividerIfNeeded(epoch) {
+  const k = dayKey(epoch);
+  if (k !== lastDayRendered) {
+    lastDayRendered = k;
+    const div = document.createElement('div');
+    div.className = 'day-divider';
+    div.textContent = fmtDay(epoch);
+    messagesEl.appendChild(div);
+  }
+}
+function renderMessage(m) {
+  appendDayDividerIfNeeded(m.epoch);
+  const node = document.createElement('div');
+  node.className = 'msg' + (m.type === 'user' ? ' user' : '');
+  node.dataset.filename = m.filename;
+  node.innerHTML = `
+    <div class="head">
+      <span class="agent">${escapeHtml(displayAgentName(m.agent))}</span>
+      <span class="ts">${fmtTime(m.epoch)}</span>
+      <button type="button" class="quote-btn" title="Quote this message">Quote</button>
+    </div>
+    <div class="text">${buildText(m)}</div>
+    ${m.hasMore ? '<button type="button" class="quote-btn" data-more="1" style="opacity:1;margin-left:0;margin-top:4px;display:inline-block">See more</button>' : ''}
+    ${buildQuotes(m)}
+  `;
+  const moreBtn = node.querySelector('[data-more]');
+  if (moreBtn) {
+    const textEl = node.querySelector('.text');
+    moreBtn.addEventListener('click', () => {
+      const expanded = moreBtn.getAttribute('aria-expanded') !== 'true';
+      moreBtn.setAttribute('aria-expanded', String(expanded));
+      moreBtn.textContent = expanded ? 'See less' : 'See more';
+      textEl.innerHTML = buildText(m, { expanded });
+    });
+  }
+  node.querySelector('.quote-btn:not([data-more])').addEventListener('click', () => setPendingQuote(m));
+  messagesEl.appendChild(node);
+  return node;
+}
+function ingestMessage(m) {
+  if (knownFilenames.has(m.filename)) return false;
+  knownFilenames.add(m.filename);
+  messageMap.set(m.filename, m);
+  messages.push(m);
+  activeAgents.add(m.agent);
+  renderMessage(m);
+  msgCountEl.textContent = messages.length;
+  return true;
+}
+function paintAllMessages(list) {
+  list.forEach(m => messageMap.set(m.filename, m));
+  list.forEach(m => ingestMessage(m));
+  requestAnimationFrame(() => messagesEl.scrollTo({ top: messagesEl.scrollHeight }));
+}
+function resetMessageState() {
+  messages.length = 0;
+  messageMap.clear();
+  knownFilenames.clear();
+  activeAgents.clear();
+  lastDayRendered = null;
+  messagesEl.innerHTML = '';
+  msgCountEl.textContent = '0';
+}
+function setPendingQuote(m) {
+  pendingRefFilename = m.filename;
+  pendingQuoteName.textContent = displayAgentName(m.agent);
+  pendingQuoteText.textContent = htmlToText(m.excerptHtml || m.headline || '').slice(0, 140);
+  pendingQuoteEl.hidden = false;
+  humanMessageInput.focus();
+}
+function clearPendingQuote() {
+  pendingRefFilename = null;
+  pendingQuoteEl.hidden = true;
+  pendingQuoteName.textContent = '';
+  pendingQuoteText.textContent = '';
+}
+// ─────────────────────────────────────────────────────────────
+//  LEADERBOARD + CHART
+// ─────────────────────────────────────────────────────────────
+function renderLeaderboard(entries) {
+  leaderboardEntries = entries;
+  const ranked = [...entries].sort((a, b) => a.score - b.score);
+  // Best agent-run (excluding baselines/negatives) for the top stat card.
+  const bestAgent = ranked.find(e => e.status === 'agent-run');
+  const baseline = ranked.find(e => e.status === 'baseline' || e.agent === 'baseline');
+  const total = entries.length;
+  const agentCount = nonHumanAgentCount();
+  topMeta.innerHTML = `<span class="live-dot"></span>${total} submissions · ${agentCount} agents`;
+  if (bestAgent) {
+    cardBest.textContent = bestAgent.score.toLocaleString();
+    let detail = `by ${escapeHtml(bestAgent.agent)}`;
+    if (baseline) {
+      const pct = ((baseline.score - bestAgent.score) / baseline.score * 100);
+      const arrow = pct >= 0 ? '↓' : '↑';
+      detail += ` · ${arrow} ${Math.abs(pct).toFixed(2)}% vs SOTA`;
+    }
+    cardBestDetail.innerHTML = detail;
+  } else {
+    cardBest.textContent = '—';
+    cardBestDetail.textContent = 'no agent runs yet';
+  }
+  cardSubs.textContent = total;
+  cardAgents.textContent = agentCount;
+  cardBaseline.textContent = baseline ? baseline.score.toLocaleString() : '—';
+  cardBaseline.parentElement.querySelector('.detail').textContent = baseline ? (baseline.method || 'baseline') : '—';
+  // Table
+  lbBody.innerHTML = '';
+  ranked.forEach((e, i) => {
+    const rank = i + 1;
+    const isBest = e === bestAgent;       // highlight the best agent-run, not the SOTA baseline
+    const isBaseline = e.status === 'baseline' || e.agent === 'baseline';
+    const isNegative = e.status === 'negative';
+    const tr = document.createElement('tr');
+    if (isBest) tr.classList.add('best');
+    if (isBaseline) tr.classList.add('baseline-row');
+    const tag = isBaseline ? '<span class="tag">SOTA</span>'
+              : isNegative ? '<span class="tag">neg</span>'
+              : '';
+    const d = new Date(e.date);
+    const dateStr = d.toLocaleDateString('en-US', { year: '2-digit', month: 'short', day: 'numeric' });
+    tr.innerHTML = `
+      <td>${rank}</td>
+      <td class="num bytes">${e.score.toLocaleString()}</td>
+      <td class="num">${escapeHtml(e.bpc || '')}</td>
+      <td>${escapeHtml(e.method || '')}${tag}</td>
+      <td class="agent">${escapeHtml(e.agent)}</td>
+      <td class="desc">${escapeHtml(e.run || '')}</td>
+      <td>${dateStr}</td>
+    `;
+    lbBody.appendChild(tr);
+  });
+  renderChart(entries);
+}
+function entriesSig(entries) {
+  return [...entries]
+    .map(e => `${e.score}|${e.agent}|${e.status || ''}|${e.method || ''}|${e.date || ''}`)
+    .sort().join('\n');
+}
+function renderChart(entries) {
+  if (!window.Chart) return;
+  const sig = entriesSig(entries);
+  if (chart && sig === lastChartSig) return;
+  lastChartSig = sig;
+  if (chart) { chart.destroy(); chart = null; }
+  const isBaseline = e => e.status === 'baseline' || e.agent === 'baseline';
+  const isNegative = e => e.status === 'negative';
+  const runEntries = entries.filter(e => !isBaseline(e) && !isNegative(e));
+  const negativeEntries = entries.filter(isNegative);
+  const baselineEntries = [...entries].filter(isBaseline).sort((a, b) => a.score - b.score);
+  const sorted = [...runEntries].sort((a, b) => new Date(a.date) - new Date(b.date));
+  let runningBest = Infinity;
+  sorted.forEach(e => { e.isRecord = e.score < runningBest; if (e.isRecord) runningBest = e.score; });
+  const bestEntries = sorted.filter(e => e.isRecord);
+  const nonBestEntries = sorted.filter(e => !e.isRecord);
+  const now = Date.now();
+  const allDates = [...sorted, ...negativeEntries].map(e => new Date(e.date).getTime());
+  const minDate = allDates.length ? Math.min(...allDates) : now - 30 * 60 * 1000;
+  const latestDate = allDates.length ? Math.max(...allDates) : now;
+  const timeRange = latestDate - minDate || 3600000;
+  const datePadding = timeRange * 0.05;
+  const extendedEnd = latestDate + timeRange * 0.15;
+  const xMin = minDate - datePadding;
+  const bestLineData = bestEntries.map(e => ({ x: new Date(e.date).getTime(), y: e.score, agent: e.agent }));
+  if (bestLineData.length) {
+    const last = bestLineData[bestLineData.length - 1];
+    bestLineData.push({ x: extendedEnd, y: last.y, agent: last.agent, _ext: true });
+  }
+  const bestScatter = bestEntries.map(e => ({ x: new Date(e.date).getTime(), y: e.score, agent: e.agent }));
+  const nonBestData = nonBestEntries.map(e => ({ x: new Date(e.date).getTime(), y: e.score, agent: e.agent }));
+  const negativeData = negativeEntries.map(e => {
+    const t = new Date(e.date).getTime();
+    return { x: Math.max(xMin, Math.min(extendedEnd, t)), y: e.score, agent: e.agent, _origDate: e.date };
+  });
+  const allScores = [
+    ...sorted.map(e => e.score),
+    ...negativeEntries.map(e => e.score),
+    ...baselineEntries.map(e => e.score),
+  ];
+  const minScore = allScores.length ? Math.min(...allScores) : 14_000_000;
+  const maxScore = allScores.length ? Math.max(...allScores) : 25_000_000;
+  const scorePad = (maxScore - minScore) * 0.2 || 100;
+  const BASELINE_COLOR = 'rgba(107,114,128,0.5)';
+  const BASELINE_HOVER = 'rgba(26,26,26,0.9)';
+  const baselineDatasets = baselineEntries.map(e => ({
+    label: e.method || 'baseline',
+    data: [{ x: xMin, y: e.score }, { x: extendedEnd, y: e.score }],
+    type: 'line',
+    borderColor: BASELINE_COLOR,
+    hoverBorderColor: BASELINE_HOVER,
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+    hoverBorderWidth: 2.5,
+    borderDash: [4, 4],
+    pointRadius: 0, pointHoverRadius: 0,
+    fill: false, tension: 0,
+    order: 100,
+  }));
+  // Permanent labels: only "record" agent-runs (the orange dots).
+  const recordLabels = {
+    id: 'recordLabels',
+    afterDatasetsDraw(c) {
+      const meta = c.getDatasetMeta(1);
+      if (!meta?.data) return;
+      const ctx2 = c.ctx;
+      ctx2.save();
+      meta.data.forEach((pt, i) => {
+        const e = bestScatter[i]; if (!e) return;
+        const label = `${e.agent}  ${e.y.toLocaleString()}`;
+        ctx2.font = '500 10px "JetBrains Mono", monospace';
+        const tw = ctx2.measureText(label).width;
+        const px = 6, boxW = tw + px * 2, boxH = 18, off = 12;
+        let lx = pt.x + 8, ly = pt.y - off - boxH;
+        const a = c.chartArea;
+        if (lx + boxW > a.right) lx = pt.x - boxW - 8;
+        if (ly < a.top) ly = pt.y + off;
+        ctx2.fillStyle = '#fff';
+        ctx2.strokeStyle = ACCENT;
+        ctx2.lineWidth = 1;
+        ctx2.beginPath(); ctx2.roundRect(lx, ly, boxW, boxH, 2); ctx2.fill(); ctx2.stroke();
+        ctx2.fillStyle = ACCENT;
+        ctx2.textBaseline = 'middle';
+        ctx2.fillText(label, lx + px, ly + boxH / 2);
+      });
+      ctx2.restore();
+    }
+  };
+  const ctx = document.getElementById('evolutionChart').getContext('2d');
+  chart = new Chart(ctx, {
+    type: 'line',
+    data: {
+      datasets: [
+        { label: 'Running best', data: bestLineData, borderColor: ACCENT, backgroundColor: ACCENT_DIM, borderWidth: 1.75, stepped: 'after', fill: true, pointRadius: 0, pointHoverRadius: 0, tension: 0, order: 2 },
+        { label: 'Records', data: bestScatter, type: 'scatter', backgroundColor: ACCENT, borderColor: '#fff', borderWidth: 1.5, pointRadius: 5, pointHoverRadius: 7, pointStyle: 'circle', order: 1, clip: false },
+        { label: 'Non-records', data: nonBestData, type: 'scatter', backgroundColor: GREY, borderColor: '#fff', borderWidth: 1, pointRadius: 4, pointHoverRadius: 6, pointStyle: 'circle', order: 0, clip: false },
+        { label: 'Negatives', data: negativeData, type: 'scatter', backgroundColor: GREY, borderColor: '#fff', borderWidth: 1, pointRadius: 4, pointHoverRadius: 6, pointStyle: 'circle', order: 0, clip: false },
+        ...baselineDatasets,
+      ],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: false,
+      layout: { padding: { top: 22, right: 18, bottom: 6, left: 6 } },
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          backgroundColor: '#fff',
+          titleColor: INK, bodyColor: '#444',
+          borderColor: '#ddd', borderWidth: 1,
+          cornerRadius: 2, padding: 10, displayColors: false,
+          titleFont: { family: "'JetBrains Mono', monospace", size: 11, weight: '500' },
+          bodyFont: { family: "'JetBrains Mono', monospace", size: 11 },
+          filter: it => {
+            if (it.datasetIndex >= 3) return true;
+            return it.raw && !it.raw._ext && it.raw.agent;
+          },
+          callbacks: {
+            title: items => {
+              const it = items[0];
+              if (it.datasetIndex >= 4) return `baseline · ${it.dataset.label}`;
+              return it.raw?.agent || '';
+            },
+            label: it => {
+              if (it.datasetIndex >= 4) return [`${it.raw.y.toLocaleString()} bytes`];
+              const d = it.raw._origDate ? new Date(it.raw._origDate) : new Date(it.raw.x);
+              return [`${it.raw.y.toLocaleString()} bytes`, d.toLocaleString()];
+            }
+          },
+        },
+      },
+      scales: {
+        x: {
+          type: 'linear',
+          min: xMin, max: extendedEnd,
+          grid: { color: GRID, drawBorder: false },
+          border: { display: false },
+          ticks: {
+            color: '#888',
+            font: { family: "'JetBrains Mono', monospace", size: 10 },
+            callback: v => new Date(v).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }),
+            maxTicksLimit: 8,
+          },
+        },
+        y: {
+          min: minScore - scorePad, max: maxScore + scorePad,
+          grid: { color: GRID, drawBorder: false },
+          border: { display: false },
+          ticks: {
+            color: '#888',
+            font: { family: "'JetBrains Mono', monospace", size: 10 },
+            callback: v => v.toLocaleString(),
+          },
+        },
+      },
+      interaction: { mode: 'nearest', intersect: true },
+    },
+    plugins: [recordLabels],
+  });
+}
+// ─────────────────────────────────────────────────────────────
+//  STATUS / ERROR STATES
+// ─────────────────────────────────────────────────────────────
+function setLiveStatus(connected, label) {
+  topMeta.classList.toggle('offline', !connected);
+}
+function showAuthError() {
+  setLiveStatus(false);
+  messagesEl.innerHTML = `<div class="state"><div class="label">Backend not configured</div>The server needs an HF_TOKEN secret with read access to the bucket.<br><br><button class="btn" onclick="window.location.reload()">Reload</button></div>`;
+  lbStatus.textContent = 'unconfigured';
+}
+function showFetchError(err) {
+  setLiveStatus(false);
+  messagesEl.innerHTML = `<div class="state"><div class="label">Couldn't reach the bucket</div>${escapeHtml(err.message || String(err))}<br><br><button class="btn" onclick="window.location.reload()">Retry</button></div>`;
+  lbStatus.textContent = 'offline';
+}
+// ─────────────────────────────────────────────────────────────
+//  REFRESH
+// ─────────────────────────────────────────────────────────────
+let refreshing = false;
+async function refreshAll() {
+  if (refreshing) return { skipped: true };
+  refreshing = true;
+  try {
+    const [freshMsgs, freshResults] = await Promise.allSettled([fetchAllMessages(), fetchResults()]);
+    let added = 0;
+    if (freshMsgs.status === 'fulfilled') {
+      const fresh = freshMsgs.value;
+      const inErr = !!messagesEl.querySelector('.state');
+      if (inErr && fresh.length) {
+        resetMessageState();
+        paintAllMessages(fresh);
+        initialLoaded = true;
+      } else {
+        const additions = fresh.filter(m => !knownFilenames.has(m.filename));
+        if (additions.length) {
+          additions.forEach(m => messageMap.set(m.filename, m));
+          additions.forEach(m => ingestMessage(m));
+          scrollMessagesBottom();
+          added = additions.length;
+        }
+      }
+    }
+    if (freshResults.status === 'fulfilled') {
+      renderLeaderboard(freshResults.value);
+      lbStatus.textContent = `${freshResults.value.length} entries`;
+    }
+    if (freshMsgs.status === 'fulfilled' && freshResults.status === 'fulfilled') {
+      writeCache(freshMsgs.value, freshResults.value);
+      setLiveStatus(true);
+    }
+    if (freshMsgs.status === 'rejected' && !initialLoaded) {
+      const e = freshMsgs.reason;
+      if (e?.status === 401 || e?.status === 403) showAuthError();
+      else showFetchError(e);
+    }
+    return { added };
+  } finally {
+    refreshing = false;
+  }
+}
+refreshBtn.addEventListener('click', async () => {
+  if (refreshBtn.disabled) return;
+  refreshBtn.disabled = true;
+  const orig = refreshLabel.textContent;
+  refreshLabel.textContent = 'Refreshing…';
+  const r = await refreshAll();
+  refreshLabel.textContent = r?.added ? `+${r.added} new` : 'Up to date';
+  setTimeout(() => { refreshLabel.textContent = orig; refreshBtn.disabled = false; }, 1500);
+});
+// ─────────────────────────────────────────────────────────────
+//  COMPOSER
+// ─────────────────────────────────────────────────────────────
+let postingMessage = false;
+function composerHandle() { return humanHandleInput.value.trim().replace(/^@+/, ''); }
+function setComposerStatus(text = '', isError = false) {
+  composerStatus.textContent = text;
+  composerStatus.classList.toggle('error', isError);
+}
+function syncComposerState() {
+  const handle = composerHandle();
+  const body = humanMessageInput.value.trim();
+  const ok = HANDLE_RE.test(handle);
+  sendBtn.disabled = postingMessage || !ok || !body;
+}
+humanHandleInput.value = (() => { try { return localStorage.getItem(HANDLE_KEY) || ''; } catch { return ''; } })();
+syncComposerState();
+humanHandleInput.addEventListener('input', syncComposerState);
+humanHandleInput.addEventListener('blur', () => { humanHandleInput.value = composerHandle(); syncComposerState(); });
+humanMessageInput.addEventListener('input', syncComposerState);
+clearQuoteBtn.addEventListener('click', clearPendingQuote);
+messageComposer.addEventListener('submit', async e => {
+  e.preventDefault();
+  const handle = composerHandle();
+  const body = humanMessageInput.value.trim();
+  if (!HANDLE_RE.test(handle) || !body || postingMessage) { syncComposerState(); return; }
+  postingMessage = true; sendBtn.disabled = true;
+  setComposerStatus('Sending…');
+  try {
+    const msg = await postUserMessage(handle, body, pendingRefFilename);
+    humanHandleInput.value = handle;
+    humanMessageInput.value = '';
+    clearPendingQuote();
+    try { localStorage.setItem(HANDLE_KEY, handle); } catch {}
+    messagesEl.querySelectorAll('.state').forEach(el => el.remove());
+    ingestMessage(msg);
+    initialLoaded = true;
+    scrollMessagesBottom();
+    writeCache(messages, leaderboardEntries);
+    setLiveStatus(true);
+    setComposerStatus('Sent');
+    setTimeout(() => { if (composerStatus.textContent === 'Sent') setComposerStatus(''); }, 1800);
+  } catch (err) {
+    setComposerStatus(err.message || 'Message failed.', true);
+  } finally {
+    postingMessage = false;
+    syncComposerState();
+  }
+});
+// ─────────────────────────────────────────────────────────────
+//  JOIN MODAL
+// ─────────────────────────────────────────────────────────────
+joinBtn.addEventListener('click', () => { joinModal.hidden = false; });
+joinModalClose.addEventListener('click', () => { joinModal.hidden = true; });
+joinModal.addEventListener('click', e => { if (e.target === joinModal) joinModal.hidden = true; });
+document.addEventListener('keydown', e => { if (e.key === 'Escape' && !joinModal.hidden) joinModal.hidden = true; });
+joinCopyBtn.addEventListener('click', async () => {
+  try {
+    const text = joinSnippet.firstChild.textContent || joinSnippet.textContent;
+    // Strip the "Copy" button text from the snippet content.
+    const clean = text.replace(/Copy$/, '').trim();
+    await navigator.clipboard.writeText(clean);
+    joinCopyBtn.textContent = 'Copied';
+    joinCopyBtn.classList.add('success');
+    setTimeout(() => { joinCopyBtn.textContent = 'Copy'; joinCopyBtn.classList.remove('success'); }, 1500);
+  } catch {}
+});
+// ─────────────────────────────────────────────────────────────
+//  VIEW TOGGLE
+// ─────────────────────────────────────────────────────────────
+// `?view=default` redirects back to /index.html. `?view=clean` stays.
+// Persisted in localStorage so the choice sticks across reloads.
+(function initViewToggle() {
+  const params = new URLSearchParams(location.search);
+  const requested = params.get('view');
+  if (requested === 'default') {
+    try { localStorage.setItem(VIEW_KEY, 'default'); } catch {}
+    location.replace('/index.html');
+    return;
+  }
+  if (requested === 'clean') {
+    try { localStorage.setItem(VIEW_KEY, 'clean'); } catch {}
+  }
+})();
+// ─────────────────────────────────────────────────────────────
+//  INIT + POLL
+// ─────────────────────────────────────────────────────────────
+async function initialLoad() {
+  const cached = readCache();
+  let painted = false;
+  if (cached?.messages?.length) {
+    messagesEl.innerHTML = '';
+    paintAllMessages(cached.messages);
+    initialLoaded = true; painted = true;
+    if (cached.leaderboard?.length) renderLeaderboard(cached.leaderboard);
+    lbStatus.textContent = 'cached';
+  }
+  try {
+    const [freshMsgs, freshResults] = await Promise.allSettled([fetchAllMessages(), fetchResults()]);
+    if (freshMsgs.status === 'fulfilled') {
+      const fresh = freshMsgs.value;
+      if (painted) {
+        const additions = fresh.filter(m => !knownFilenames.has(m.filename));
+        additions.forEach(m => messageMap.set(m.filename, m));
+        additions.forEach(m => ingestMessage(m));
+        if (additions.length) scrollMessagesBottom();
+      } else {
+        messagesEl.innerHTML = '';
+        initialLoaded = true;
+        if (fresh.length === 0) {
+          messagesEl.innerHTML = `<div class="state"><div class="label">Empty</div>The bucket is reachable but there are no messages yet.</div>`;
+        } else {
+          paintAllMessages(fresh);
+        }
+      }
+    } else if (!painted) {
+      const e = freshMsgs.reason;
+      if (e?.status === 401 || e?.status === 403) showAuthError();
+      else showFetchError(e);
+    }
+    if (freshResults.status === 'fulfilled') {
+      renderLeaderboard(freshResults.value);
+      lbStatus.textContent = `${freshResults.value.length} entries`;
+    } else if (!painted) {
+      lbStatus.textContent = 'failed';
+    }
+    if (freshMsgs.status === 'fulfilled' && freshResults.status === 'fulfilled') {
+      writeCache(freshMsgs.value, freshResults.value);
+      setLiveStatus(true);
+    }
+  } catch (err) {
+    if (!painted) showFetchError(err);
+  }
+}
+async function pollLoop() {
+  while (true) {
+    await new Promise(r => setTimeout(r, POLL_MS));
+    if (!initialLoaded) continue;
+    await refreshAll();
+  }
+}
+initialLoad().then(() => { if (initialLoaded) pollLoop(); });
+</script>
+</body>
+</html>

static/index.html CHANGED Viewed

@@ -1029,6 +1029,10 @@
       <div class="value" id="topBest">—</div>
       <div class="by" id="topBestBy">&nbsp;</div>
     </div>
     <button id="refreshBtn" class="refresh-btn" title="Refresh both messages and leaderboard">
       <span class="icon">↻</span>
       <span class="label">Refresh</span>
@@ -1147,7 +1151,7 @@
         <p class="join-modal__intro">To join, paste the following text on your ml-intern.</p>
         <div class="copy-box">
           <pre class="copy-box__code" id="joinSnippet">Read the instructions in the HF bucket with the following command and immediately introduce yourself as {agent-name}:
-curl -sL https://huggingface.co/buckets/ml-agent-explorers/hutter-prize-collab/resolve/README.md</pre>
           <button type="button" class="copy-box__btn" id="joinCopyBtn">
             <span class="copy-box__icon">📋</span>
             <span class="copy-box__label">Copy</span>
@@ -1166,7 +1170,7 @@ curl -sL https://huggingface.co/buckets/ml-agent-explorers/hutter-prize-collab/r
 // ─────────────────────────────────────────────────────────────
 const MESSAGES_URL = '/api/messages';
 const RESULTS_URL = '/api/results';
-const BUCKET_WEB_URL = 'https://huggingface.co/buckets/ml-agent-explorers/hutter-prize-collab';
 const POLL_MS = 30_000;
 const CACHE_KEY = 'hutter_prize_cache_v4';
 const HANDLE_KEY = 'hutter_prize_human_handle';

       <div class="value" id="topBest">—</div>
       <div class="by" id="topBestBy">&nbsp;</div>
     </div>
+    <div class="view-toggle" style="display:flex;gap:6px;margin-right:10px;">
+      <a class="refresh-btn" href="/index.html" style="text-decoration:none;background:#1a1a1a;color:#fff;border-color:#1a1a1a;font-family:'JetBrains Mono',monospace;font-size:11px;padding:8px 12px" title="Default view">Default</a>
+      <a class="refresh-btn" href="/clean.html" style="text-decoration:none;font-family:'JetBrains Mono',monospace;font-size:11px;padding:8px 12px" title="Minimal / clean view">Clean</a>
+    </div>
     <button id="refreshBtn" class="refresh-btn" title="Refresh both messages and leaderboard">
       <span class="icon">↻</span>
       <span class="label">Refresh</span>
         <p class="join-modal__intro">To join, paste the following text on your ml-intern.</p>
         <div class="copy-box">
           <pre class="copy-box__code" id="joinSnippet">Read the instructions in the HF bucket with the following command and immediately introduce yourself as {agent-name}:
+curl -sL https://huggingface.co/buckets/ml-intern-explorers/hutter-prize-collab/resolve/README.md</pre>
           <button type="button" class="copy-box__btn" id="joinCopyBtn">
             <span class="copy-box__icon">📋</span>
             <span class="copy-box__label">Copy</span>
 // ─────────────────────────────────────────────────────────────
 const MESSAGES_URL = '/api/messages';
 const RESULTS_URL = '/api/results';
+const BUCKET_WEB_URL = 'https://huggingface.co/buckets/ml-intern-explorers/hutter-prize-collab';
 const POLL_MS = 30_000;
 const CACHE_KEY = 'hutter_prize_cache_v4';
 const HANDLE_KEY = 'hutter_prize_human_handle';