Spaces:

lanczos
/

graphtestbed

Sleeping

Zhu Jiajun (jz28583) Claude Opus 4.7 (1M context) commited on 21 days ago

Commit

6741538

1 Parent(s): 17942c5

Redesign landing as a leaderboard-first single page

Per open-llm-leaderboard pattern: header strip + nav, per-task tabs (with
submission count badges) as the first-screen content, sortable + searchable
table per task, top-3 gold/silver/bronze styling, hash-routed sections
(/#about /#api /#figraph etc.) so links are shareable. Quickstart /
endpoints / submission-format walls collapsed into secondary About + API
tabs.

Server-side initial render so first paint is instant; JS only enhances
(client-side sort + search + Refresh hits the existing JSON endpoint).
Zero new dependencies — still plain Flask + Jinja, no Gradio.

API endpoints unchanged: POST /submit, GET /leaderboard/<task>, GET /healthz
all return the same JSON shapes. Bypass key + dry mode behave as before.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Files changed (1) hide show

server/api.py +676 -95

server/api.py CHANGED Viewed

@@ -362,115 +362,687 @@ def healthz():
     })
-_LANDING_TMPL = """<!doctype html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>GraphTestbed Scoring</title>
   <style>
-    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
-           max-width: 920px; margin: 2em auto; padding: 0 1em; color: #1f2328; line-height: 1.55; }
-    h1 { margin: 0 0 .15em; }
-    h2 { margin-top: 1.8em; padding-bottom: .25em; border-bottom: 1px solid #d0d7de; }
-    .subtitle { color: #57606a; margin: 0 0 1em; }
-    pre { background: #f6f8fa; padding: 12px 14px; border-radius: 6px;
-          overflow-x: auto; font-size: 13px; line-height: 1.45; }
-    code { background: #eaeef2; padding: 1px 5px; border-radius: 4px; font-size: 90%; }
-    pre code { background: transparent; padding: 0; font-size: inherit; }
-    table { border-collapse: collapse; width: 100%; margin: .4em 0 1.4em; font-size: 14px; }
-    th, td { padding: .5em .75em; text-align: left; border-bottom: 1px solid #eaeef2; }
-    th { background: #f6f8fa; font-weight: 600; font-size: 13px; }
-    td.num { text-align: right; font-variant-numeric: tabular-nums; }
-    td.rank { text-align: right; color: #57606a; width: 3em; }
-    td.rank-1 { color: #bf8700; font-weight: 700; }
-    .empty { color: #8b949e; font-style: italic; padding: .4em 0; font-size: 14px; }
-    .meta { color: #57606a; font-size: 13px; margin: .25em 0 .8em; }
-    .meta code { font-size: 90%; }
-    .pills { display: flex; gap: .5em; flex-wrap: wrap; margin: .5em 0 1.5em; }
-    .pill { background: #ddf4ff; color: #0969da; padding: .2em .65em; border-radius: 12px;
-            font-size: 12px; font-weight: 500; text-decoration: none; }
-    .pill:hover { background: #b6e3ff; }
-    .pill.gt { background: #dafbe1; color: #1a7f37; }
-    .pill.warn { background: #fff8c5; color: #9a6700; }
-    a { color: #0969da; }
-    footer { margin-top: 3em; padding-top: 1em; border-top: 1px solid #d0d7de;
-             color: #8b949e; font-size: 13px; }
   </style>
 </head>
-<body>
-<h1>📊 GraphTestbed Scoring</h1>
-<p class="subtitle">
-  Public leaderboard for benchmarking ML/AI agent harnesses on heterogeneous graph datasets.
-</p>
-<div class="pills">
-  <span class="pill">{{ n_tasks }} tasks</span>
-  <span class="pill">{{ n_subs_total }} submissions</span>
-  <span class="pill">quota: {{ quota }}/day/IP/task</span>
-  <a class="pill" href="/healthz">healthz</a>
-  <a class="pill" href="https://github.com/zhuconv/GraphTestbed">github</a>
-</div>
-<h2>Quickstart</h2>
 <pre><code>pip install git+https://github.com/zhuconv/GraphTestbed
 gtb submit &lt;task&gt; --file preds.csv --agent &lt;your-name&gt;
 gtb leaderboard &lt;task&gt;</code></pre>
-<p>
-  Submission CSV must have exactly two columns
-  (<code>id_col</code>, <code>pred_col</code> per the per-task schema below)
-  and exactly <code>n_rows</code> data rows. Schema is checked client-side
-  first, so a malformed file never burns a quota slot.
-  Full contract: <a href="https://github.com/zhuconv/GraphTestbed/blob/main/PROTOCOL.md">PROTOCOL.md</a>.
-</p>
-{% for t in tasks %}
-<h2 id="{{ t.name }}">{{ t.name }}</h2>
-<p class="meta">
-  metric: <code>{{ t.metric }}</code>
-  {%- if t.n_rows %} · <code>{{ t.n_rows }}</code> test rows{% endif %} ·
-  columns: <code>[{{ t.id_col }}, {{ t.pred_col }}]</code>
-  {% if t.gt_present %}<span class="pill gt">GT loaded</span>
-  {%- else %}<span class="pill warn">GT missing</span>{% endif %}
-</p>
-{% if t.description %}<p>{{ t.description|trim }}</p>{% endif %}
-{% if t.rows %}
-<table>
-  <thead>
-    <tr><th>#</th><th>agent</th><th class="num">{{ t.metric }}</th><th class="num">subs</th><th>first&nbsp;seen</th></tr>
-  </thead>
-  <tbody>
-    {% for r in t.rows %}
-    <tr>
-      <td class="rank{% if loop.index == 1 %} rank-1{% endif %}">{{ loop.index }}</td>
-      <td><code>{{ r.agent }}</code></td>
-      <td class="num">{{ "%.3f"|format(r.primary) }}</td>
-      <td class="num">{{ r.n_subs }}</td>
-      <td><small>{{ r.first_seen[:19] }}Z</small></td>
-    </tr>
-    {% endfor %}
-  </tbody>
-</table>
-{% else %}
-<p class="empty">no submissions yet</p>
-{% endif %}
-{% endfor %}
-<h2>Endpoints</h2>
-<pre><code>POST /submit                          multipart task=&amp;agent=&amp;file=&lt;csv&gt;
-                                      → {primary, secondary, leaderboard_rank, quota_remaining, ...}
-GET  /leaderboard/&lt;task&gt;              JSON: per-agent best, sorted by primary desc
-GET  /healthz                         JSON: tasks, gt_present, quota
-GET  /                                this page</code></pre>
 <footer>
-  Backed by Flask + sqlite at <code>/data/leaderboard.db</code>; periodic
-  snapshot to a private HF dataset for durability. Non-adversarial trust
-  model — see PROTOCOL.md.
 </footer>
 </body>
 </html>
 """
@@ -478,7 +1050,12 @@ GET  /                                this page</code></pre>
 @app.get("/")
 def landing():
-    """Single-page UI: quickstart + per-task leaderboard tables."""
     manifest = _manifest()
     conn = _db()
     tasks = []
@@ -501,18 +1078,22 @@ def landing():
             "pred_col": s["pred_col"],
             "n_rows": n_rows_cfg if n_rows_cfg not in ("TBD", None) else None,
             "gt_present": (GT_DIR / f"{name}.csv").exists(),
             "rows": [{"agent": a, "primary": p, "n_subs": n, "first_seen": f}
                      for (a, p, n, f) in rows],
         })
         n_subs_total += sum(r["n_subs"] for r in tasks[-1]["rows"])
     conn.close()
     return render_template_string(
         _LANDING_TMPL,
         tasks=tasks,
         n_tasks=len(tasks),
         n_subs_total=n_subs_total,
         quota=QUOTA_PER_DAY,
     )

     })
+_LANDING_TMPL = r"""<!doctype html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>GraphTestbed Leaderboard</title>
   <style>
+    :root {
+      --fg: #0d1117;
+      --fg-muted: #57606a;
+      --fg-subtle: #8b949e;
+      --bg: #ffffff;
+      --bg-alt: #f6f8fa;
+      --bg-hover: #eef2f5;
+      --border: #d0d7de;
+      --border-soft: #eaeef2;
+      --accent: #0969da;
+      --accent-bg: #ddf4ff;
+      --accent-bg-hover: #b6e3ff;
+      --gold: #bf8700;
+      --silver: #6e7781;
+      --bronze: #9a6700;
+      --good: #1a7f37;
+      --good-bg: #dafbe1;
+      --warn: #9a6700;
+      --warn-bg: #fff8c5;
+    }
+    * { box-sizing: border-box; }
+    html, body { margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
+                   "Helvetica Neue", Arial, sans-serif;
+      color: var(--fg);
+      background: var(--bg);
+      line-height: 1.5;
+      font-size: 14px;
+    }
+    a { color: var(--accent); text-decoration: none; }
+    a:hover { text-decoration: underline; }
+    code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace; }
+    /* ---- header ---- */
+    header {
+      border-bottom: 1px solid var(--border);
+      padding: 14px 28px;
+      display: flex;
+      align-items: center;
+      gap: 18px;
+      flex-wrap: wrap;
+    }
+    header .brand {
+      font-size: 18px;
+      font-weight: 600;
+      letter-spacing: -0.01em;
+    }
+    header .brand .dot { color: var(--accent); }
+    header .tagline {
+      color: var(--fg-muted);
+      font-size: 13px;
+      margin-left: 4px;
+    }
+    header nav { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
+    header nav a, header nav button {
+      font: inherit;
+      background: transparent;
+      border: 1px solid var(--border);
+      color: var(--fg);
+      padding: 5px 12px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 13px;
+    }
+    header nav a:hover, header nav button:hover {
+      background: var(--bg-alt); text-decoration: none;
+    }
+    header nav .primary {
+      background: var(--accent-bg);
+      border-color: var(--accent-bg-hover);
+      color: var(--accent);
+    }
+    header nav .primary:hover { background: var(--accent-bg-hover); }
+    /* ---- main container ---- */
+    main { max-width: 1180px; margin: 0 auto; padding: 18px 28px 60px; }
+    /* ---- task tabs ---- */
+    .tabs {
+      display: flex;
+      gap: 2px;
+      border-bottom: 1px solid var(--border);
+      margin-bottom: 18px;
+      flex-wrap: wrap;
+    }
+    .tab {
+      padding: 9px 14px 11px;
+      cursor: pointer;
+      color: var(--fg-muted);
+      border: none;
+      background: transparent;
+      font: inherit;
+      font-size: 14px;
+      font-weight: 500;
+      border-bottom: 2px solid transparent;
+      margin-bottom: -1px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .tab:hover { color: var(--fg); background: var(--bg-alt); }
+    .tab.active {
+      color: var(--fg);
+      border-bottom-color: var(--accent);
+      font-weight: 600;
+    }
+    .tab .badge {
+      font-size: 11px;
+      background: var(--bg-alt);
+      color: var(--fg-muted);
+      padding: 1px 7px;
+      border-radius: 10px;
+      font-weight: 500;
+    }
+    .tab.active .badge { background: var(--accent-bg); color: var(--accent); }
+    /* ---- task panel header ---- */
+    .panel-head {
+      display: flex;
+      align-items: flex-start;
+      gap: 16px;
+      margin-bottom: 14px;
+      flex-wrap: wrap;
+    }
+    .panel-head .meta {
+      color: var(--fg-muted);
+      font-size: 13px;
+      flex: 1 1 320px;
+    }
+    .panel-head .meta strong {
+      color: var(--fg);
+      font-weight: 600;
+      font-size: 14px;
+      display: block;
+      margin-bottom: 2px;
+    }
+    .panel-head .pills { display: flex; gap: 6px; flex-wrap: wrap; }
+    .pill {
+      display: inline-block;
+      padding: 2px 8px;
+      border-radius: 10px;
+      font-size: 12px;
+      font-weight: 500;
+      white-space: nowrap;
+    }
+    .pill.metric { background: var(--accent-bg); color: var(--accent); }
+    .pill.gt { background: var(--good-bg); color: var(--good); }
+    .pill.warn { background: var(--warn-bg); color: var(--warn); }
+    .pill.muted { background: var(--bg-alt); color: var(--fg-muted); }
+    /* ---- search bar ---- */
+    .toolbar {
+      display: flex;
+      gap: 10px;
+      margin-bottom: 12px;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+    .toolbar input[type=search] {
+      flex: 1 1 260px;
+      max-width: 360px;
+      font: inherit;
+      padding: 7px 12px;
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      background: var(--bg);
+    }
+    .toolbar input[type=search]:focus {
+      outline: none;
+      border-color: var(--accent);
+      box-shadow: 0 0 0 3px var(--accent-bg);
+    }
+    .toolbar .count {
+      color: var(--fg-muted);
+      font-size: 13px;
+    }
+    .toolbar .refresh {
+      margin-left: auto;
+      font: inherit;
+      background: transparent;
+      border: 1px solid var(--border);
+      color: var(--fg-muted);
+      padding: 6px 10px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 13px;
+    }
+    .toolbar .refresh:hover { background: var(--bg-alt); color: var(--fg); }
+    /* ---- leaderboard table ---- */
+    .table-wrap {
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      overflow: hidden;
+      background: var(--bg);
+    }
+    table.lb {
+      border-collapse: collapse;
+      width: 100%;
+      font-size: 14px;
+    }
+    table.lb thead th {
+      background: var(--bg-alt);
+      color: var(--fg-muted);
+      font-weight: 600;
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      padding: 10px 14px;
+      text-align: left;
+      border-bottom: 1px solid var(--border);
+      cursor: pointer;
+      user-select: none;
+      white-space: nowrap;
+    }
+    table.lb thead th:hover { background: var(--bg-hover); color: var(--fg); }
+    table.lb thead th .arrow {
+      color: var(--fg-subtle);
+      font-size: 10px;
+      margin-left: 4px;
+    }
+    table.lb thead th.sorted { color: var(--fg); }
+    table.lb thead th.sorted .arrow { color: var(--accent); }
+    table.lb thead th.num { text-align: right; }
+    table.lb tbody td {
+      padding: 11px 14px;
+      border-bottom: 1px solid var(--border-soft);
+      vertical-align: middle;
+    }
+    table.lb tbody tr:last-child td { border-bottom: none; }
+    table.lb tbody tr:hover td { background: var(--bg-alt); }
+    table.lb td.rank {
+      width: 56px;
+      text-align: center;
+      color: var(--fg-muted);
+      font-variant-numeric: tabular-nums;
+      font-weight: 500;
+    }
+    table.lb td.rank.r1 { color: var(--gold); font-weight: 700; }
+    table.lb td.rank.r2 { color: var(--silver); font-weight: 600; }
+    table.lb td.rank.r3 { color: var(--bronze); font-weight: 600; }
+    table.lb td.agent {
+      font-weight: 500;
+      font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
+      font-size: 13px;
+      word-break: break-all;
+    }
+    table.lb td.score {
+      text-align: right;
+      font-variant-numeric: tabular-nums;
+      font-weight: 600;
+      font-size: 15px;
+    }
+    table.lb td.num { text-align: right; font-variant-numeric: tabular-nums; }
+    table.lb td.subs { color: var(--fg-muted); }
+    table.lb td.date { color: var(--fg-muted); font-size: 12px; white-space: nowrap; }
+    .empty-row td {
+      text-align: center;
+      color: var(--fg-subtle);
+      font-style: italic;
+      padding: 28px 14px;
+    }
+    /* ---- about/api panels ---- */
+    .secondary {
+      display: none;
+      max-width: 760px;
+    }
+    .secondary.active { display: block; }
+    .secondary h2 {
+      font-size: 18px;
+      margin: 18px 0 8px;
+      padding-bottom: 6px;
+      border-bottom: 1px solid var(--border-soft);
+    }
+    .secondary p { color: var(--fg-muted); }
+    .secondary code {
+      background: var(--bg-alt);
+      padding: 1px 5px;
+      border-radius: 4px;
+      font-size: 90%;
+      color: var(--fg);
+    }
+    .secondary pre {
+      background: var(--bg-alt);
+      padding: 12px 14px;
+      border-radius: 6px;
+      overflow-x: auto;
+      font-size: 13px;
+      line-height: 1.5;
+    }
+    .secondary pre code { background: transparent; padding: 0; }
+    .secondary table {
+      border-collapse: collapse;
+      width: 100%;
+      margin: 8px 0 16px;
+      font-size: 13px;
+    }
+    .secondary th, .secondary td {
+      text-align: left;
+      padding: 6px 10px;
+      border-bottom: 1px solid var(--border-soft);
+    }
+    .secondary th { background: var(--bg-alt); font-size: 12px; }
+    /* ---- footer ---- */
+    footer {
+      max-width: 1180px;
+      margin: 40px auto 0;
+      padding: 16px 28px;
+      color: var(--fg-subtle);
+      font-size: 12px;
+      border-top: 1px solid var(--border-soft);
+    }
+    footer a { color: var(--fg-muted); }
+    /* hide leaderboard panels when in secondary view */
+    body.view-about .leaderboard-view { display: none; }
+    body.view-api   .leaderboard-view { display: none; }
+    body.view-about #panel-about { display: block; }
+    body.view-api   #panel-api   { display: block; }
+    @media (max-width: 640px) {
+      header { padding: 12px 16px; }
+      main { padding: 12px 16px 40px; }
+      table.lb td.date { display: none; }
+      table.lb thead th.date { display: none; }
+    }
   </style>
 </head>
+<body class="view-leaderboard">
+<header>
+  <span class="brand"><span class="dot">&#9650;</span> GraphTestbed</span>
+  <span class="tagline">scoring leaderboard for graph-ML agent harnesses</span>
+  <nav>
+    <a href="#" data-view="leaderboard" class="view-link primary">Leaderboard</a>
+    <a href="#about" data-view="about" class="view-link">About</a>
+    <a href="#api" data-view="api" class="view-link">API</a>
+    <a href="https://github.com/zhuconv/GraphTestbed" target="_blank" rel="noopener">GitHub &#8599;</a>
+  </nav>
+</header>
+<main>
+  <!-- ============== LEADERBOARD VIEW ============== -->
+  <div class="leaderboard-view">
+    <div class="tabs" id="task-tabs" role="tablist">
+      {% for t in tasks %}
+      <button class="tab{% if loop.first %} active{% endif %}"
+              data-task="{{ t.name }}"
+              role="tab" aria-selected="{{ 'true' if loop.first else 'false' }}">
+        {{ t.name }}
+        <span class="badge">{{ t.rows|length }}</span>
+      </button>
+      {% endfor %}
+    </div>
+    {% for t in tasks %}
+    <section class="panel" id="panel-{{ t.name }}"
+             data-task="{{ t.name }}" data-metric="{{ t.metric }}"
+             {% if not loop.first %}hidden{% endif %}>
+      <div class="panel-head">
+        <div class="meta">
+          <strong>{{ t.name }}</strong>
+          {{ t.description|trim }}
+        </div>
+        <div class="pills">
+          <span class="pill metric">{{ t.metric }}</span>
+          {% if t.n_rows %}<span class="pill muted">{{ "{:,}".format(t.n_rows) }} test rows</span>{% endif %}
+          <span class="pill muted">[{{ t.id_col }}, {{ t.pred_col }}]</span>
+          {% if t.gt_present %}<span class="pill gt">GT loaded</span>
+          {% else %}<span class="pill warn">GT missing</span>{% endif %}
+          {% if t.backend != 'gt' %}<span class="pill muted">backend: {{ t.backend }}</span>{% endif %}
+        </div>
+      </div>
+      <div class="toolbar">
+        <input type="search" placeholder="Search agents in {{ t.name }}…"
+               aria-label="Search agents" data-search-for="{{ t.name }}">
+        <span class="count" data-count-for="{{ t.name }}">{{ t.rows|length }} agents</span>
+        <button class="refresh" data-refresh-for="{{ t.name }}" title="Refresh from /leaderboard/{{ t.name }}">
+          Refresh
+        </button>
+      </div>
+      <div class="table-wrap">
+        <table class="lb" data-table-for="{{ t.name }}">
+          <thead>
+            <tr>
+              <th class="rank" data-sort="rank">#</th>
+              <th data-sort="agent">Agent</th>
+              <th class="num sorted" data-sort="primary">{{ t.metric }} <span class="arrow">&#9662;</span></th>
+              <th class="num" data-sort="n_submissions">Submissions</th>
+              <th class="date" data-sort="first_seen">First seen</th>
+            </tr>
+          </thead>
+          <tbody>
+            {% if t.rows %}
+              {% for r in t.rows %}
+              <tr data-agent="{{ r.agent }}">
+                <td class="rank{% if loop.index == 1 %} r1{% elif loop.index == 2 %} r2{% elif loop.index == 3 %} r3{% endif %}">{{ loop.index }}</td>
+                <td class="agent">{{ r.agent }}</td>
+                <td class="score">{{ "%.3f"|format(r.primary) }}</td>
+                <td class="subs num">{{ r.n_subs }}</td>
+                <td class="date">{{ r.first_seen[:10] }}</td>
+              </tr>
+              {% endfor %}
+            {% else %}
+              <tr class="empty-row"><td colspan="5">No submissions yet — be the first to submit.</td></tr>
+            {% endif %}
+          </tbody>
+        </table>
+      </div>
+    </section>
+    {% endfor %}
+  </div>
+  <!-- ============== ABOUT VIEW ============== -->
+  <div class="secondary" id="panel-about">
+    <h2>About GraphTestbed</h2>
+    <p>
+      GraphTestbed is a Kaggle-style scoring server for benchmarking ML/AI agent
+      harnesses on heterogeneous graph datasets. Agents train locally, write a
+      prediction CSV, and submit to this server; we score against a private
+      ground-truth set and append the result to the leaderboard.
+    </p>
+    <p>
+      <strong>Trust model: non-adversarial.</strong>
+      {{ quota }} submissions / day / IP / task. Scores rounded to 3 decimal
+      places. Schema is checked before scoring, so malformed CSVs do not burn
+      a quota slot. Test labels never enter the public git history — they live
+      only in a private companion dataset.
+    </p>
+    <h2>Tasks ({{ n_tasks }})</h2>
+    <table>
+      <thead><tr><th>Task</th><th>Metric</th><th>Test rows</th><th>Backend</th></tr></thead>
+      <tbody>
+        {% for t in tasks %}
+        <tr>
+          <td><code>{{ t.name }}</code></td>
+          <td>{{ t.metric }}</td>
+          <td>{% if t.n_rows %}{{ "{:,}".format(t.n_rows) }}{% else %}TBD{% endif %}</td>
+          <td>{{ t.backend }}</td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+    <p>
+      Full documentation, CLI install, protocol spec, and how to add new tasks:
+      <a href="https://github.com/zhuconv/GraphTestbed" target="_blank" rel="noopener">github.com/zhuconv/GraphTestbed</a>.
+    </p>
+  </div>
+  <!-- ============== API VIEW ============== -->
+  <div class="secondary" id="panel-api">
+    <h2>Submit from the CLI</h2>
 <pre><code>pip install git+https://github.com/zhuconv/GraphTestbed
 gtb submit &lt;task&gt; --file preds.csv --agent &lt;your-name&gt;
 gtb leaderboard &lt;task&gt;</code></pre>
+    <h2>Submit via raw HTTP</h2>
+<pre><code>curl -F task=&lt;task&gt; -F agent=&lt;name&gt; -F file=@preds.csv \
+     {{ base_url }}/submit</code></pre>
+    <h2>JSON endpoints</h2>
+    <table>
+      <thead><tr><th>Method</th><th>Path</th><th>Returns</th></tr></thead>
+      <tbody>
+        <tr><td>POST</td><td><code>/submit</code></td><td>multipart task=, agent=, file= → primary, secondary, leaderboard_rank, quota_remaining</td></tr>
+        <tr><td>GET</td><td><code>/leaderboard/&lt;task&gt;</code></td><td>JSON list of {agent, primary, n_submissions, first_seen}</td></tr>
+        <tr><td>GET</td><td><code>/healthz</code></td><td>tasks, gt_present, quota, uptime</td></tr>
+      </tbody>
+    </table>
+    <p>
+      Submission CSV must contain exactly two columns
+      (<code>id_col</code>, <code>pred_col</code> per the per-task schema)
+      and exactly <code>n_rows</code> data rows. Full contract:
+      <a href="https://github.com/zhuconv/GraphTestbed/blob/main/PROTOCOL.md" target="_blank" rel="noopener">PROTOCOL.md</a>.
+    </p>
+  </div>
+</main>
 <footer>
+  {{ n_subs_total }} total submissions across {{ n_tasks }} tasks ·
+  Flask + sqlite, snapshotted to a private HF dataset every 60s ·
+  <a href="/healthz">/healthz</a> ·
+  <a href="https://github.com/zhuconv/GraphTestbed" target="_blank" rel="noopener">GitHub</a>
 </footer>
+<script>
+(function () {
+  // ---- view (leaderboard / about / api) routing via URL hash ----
+  function applyView() {
+    var hash = (location.hash || '').replace(/^#/, '');
+    var view = (hash === 'about' || hash === 'api') ? hash : 'leaderboard';
+    document.body.className = 'view-' + view;
+    document.querySelectorAll('.view-link').forEach(function (a) {
+      a.classList.toggle('primary', a.dataset.view === view);
+    });
+    if (view === 'leaderboard') {
+      // hash may also be a task name → activate that tab
+      var tab = document.querySelector('.tab[data-task="' + hash + '"]');
+      if (tab) activateTab(hash);
+    }
+  }
+  function activateTab(taskName) {
+    document.querySelectorAll('.tab').forEach(function (b) {
+      var on = b.dataset.task === taskName;
+      b.classList.toggle('active', on);
+      b.setAttribute('aria-selected', on ? 'true' : 'false');
+    });
+    document.querySelectorAll('.panel').forEach(function (p) {
+      p.hidden = (p.dataset.task !== taskName);
+    });
+  }
+  document.querySelectorAll('.tab').forEach(function (btn) {
+    btn.addEventListener('click', function () {
+      var t = btn.dataset.task;
+      activateTab(t);
+      // only update hash if we're in leaderboard view, so #about etc. stay
+      if (!location.hash || /^#(?!about|api)/.test(location.hash) || location.hash === '') {
+        history.replaceState(null, '', '#' + t);
+      }
+    });
+  });
+  document.querySelectorAll('.view-link').forEach(function (a) {
+    a.addEventListener('click', function (e) {
+      e.preventDefault();
+      var v = a.dataset.view;
+      location.hash = (v === 'leaderboard') ? '' : v;
+    });
+  });
+  window.addEventListener('hashchange', applyView);
+  applyView();
+  // ---- search-as-you-type ----
+  document.querySelectorAll('input[data-search-for]').forEach(function (input) {
+    input.addEventListener('input', function () {
+      var task = input.dataset.searchFor;
+      var q = input.value.trim().toLowerCase();
+      var table = document.querySelector('table[data-table-for="' + task + '"]');
+      if (!table) return;
+      var visible = 0, total = 0;
+      table.querySelectorAll('tbody tr').forEach(function (tr) {
+        if (tr.classList.contains('empty-row')) return;
+        total++;
+        var name = (tr.dataset.agent || '').toLowerCase();
+        var show = !q || name.indexOf(q) !== -1;
+        tr.style.display = show ? '' : 'none';
+        if (show) visible++;
+      });
+      var counter = document.querySelector('[data-count-for="' + task + '"]');
+      if (counter) {
+        counter.textContent = (q ? (visible + ' / ' + total) : total) + ' agents';
+      }
+    });
+  });
+  // ---- sortable columns ----
+  function sortTable(table, key, dir) {
+    var tbody = table.tBodies[0];
+    var rows = Array.from(tbody.querySelectorAll('tr')).filter(function (r) {
+      return !r.classList.contains('empty-row');
+    });
+    if (!rows.length) return;
+    var sortKey = function (r) {
+      switch (key) {
+        case 'rank':           return parseInt(r.cells[0].textContent, 10) || 0;
+        case 'agent':          return (r.dataset.agent || '').toLowerCase();
+        case 'primary':        return parseFloat(r.cells[2].textContent) || 0;
+        case 'n_submissions':  return parseInt(r.cells[3].textContent, 10) || 0;
+        case 'first_seen':     return r.cells[4].textContent;
+        default:               return 0;
+      }
+    };
+    rows.sort(function (a, b) {
+      var av = sortKey(a), bv = sortKey(b);
+      if (av < bv) return dir === 'asc' ? -1 : 1;
+      if (av > bv) return dir === 'asc' ? 1 : -1;
+      return 0;
+    });
+    rows.forEach(function (r, i) {
+      tbody.appendChild(r);
+      // recompute rank cell only when sorted by primary desc (i.e. canonical order)
+      var rk = r.cells[0];
+      if (key === 'primary' && dir === 'desc') {
+        rk.textContent = (i + 1);
+        rk.className = 'rank' + (i === 0 ? ' r1' : i === 1 ? ' r2' : i === 2 ? ' r3' : '');
+      } else {
+        // preserve raw rank (1-indexed in original order); fall back to recompute
+        if (!rk.dataset.origRank) rk.dataset.origRank = rk.textContent.trim();
+      }
+    });
+  }
+  document.querySelectorAll('table.lb thead th').forEach(function (th) {
+    th.addEventListener('click', function () {
+      var table = th.closest('table');
+      var key = th.dataset.sort;
+      var current = th.classList.contains('sorted')
+        ? (th.dataset.dir === 'asc' ? 'asc' : 'desc')
+        : null;
+      // toggle: if already sorted desc on this column, flip to asc; otherwise default to desc
+      var dir = (current === 'desc') ? 'asc' : 'desc';
+      table.querySelectorAll('thead th').forEach(function (h) {
+        h.classList.remove('sorted');
+        h.querySelectorAll('.arrow').forEach(function (a) { a.remove(); });
+      });
+      th.classList.add('sorted');
+      th.dataset.dir = dir;
+      var arrow = document.createElement('span');
+      arrow.className = 'arrow';
+      arrow.textContent = (dir === 'asc') ? '\u25B4' : '\u25BE';
+      th.appendChild(arrow);
+      sortTable(table, key, dir);
+    });
+  });
+  // ---- refresh from JSON endpoint ----
+  function rowHTML(r, idx) {
+    var rankCls = 'rank' + (idx === 0 ? ' r1' : idx === 1 ? ' r2' : idx === 2 ? ' r3' : '');
+    var firstSeen = (r.first_seen || '').slice(0, 10);
+    var agent = String(r.agent || '');
+    var safe = agent.replace(/[&<>"']/g, function (c) {
+      return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[c];
+    });
+    return '<tr data-agent="' + safe + '">'
+      + '<td class="' + rankCls + '">' + (idx + 1) + '</td>'
+      + '<td class="agent">' + safe + '</td>'
+      + '<td class="score">' + Number(r.primary).toFixed(3) + '</td>'
+      + '<td class="subs num">' + (r.n_submissions || 0) + '</td>'
+      + '<td class="date">' + firstSeen + '</td>'
+      + '</tr>';
+  }
+  document.querySelectorAll('button[data-refresh-for]').forEach(function (btn) {
+    btn.addEventListener('click', function () {
+      var task = btn.dataset.refreshFor;
+      btn.disabled = true; btn.textContent = 'Refreshing…';
+      fetch('/leaderboard/' + encodeURIComponent(task))
+        .then(function (r) { return r.json(); })
+        .then(function (data) {
+          var table = document.querySelector('table[data-table-for="' + task + '"]');
+          if (!table) return;
+          var tbody = table.tBodies[0];
+          if (!data.length) {
+            tbody.innerHTML =
+              '<tr class="empty-row"><td colspan="5">No submissions yet — be the first to submit.</td></tr>';
+          } else {
+            tbody.innerHTML = data.map(rowHTML).join('');
+          }
+          var tab = document.querySelector('.tab[data-task="' + task + '"] .badge');
+          if (tab) tab.textContent = data.length;
+          var counter = document.querySelector('[data-count-for="' + task + '"]');
+          if (counter) counter.textContent = data.length + ' agents';
+          // reset search
+          var input = document.querySelector('input[data-search-for="' + task + '"]');
+          if (input) input.value = '';
+        })
+        .catch(function (e) {
+          console.error('refresh failed', e);
+        })
+        .finally(function () {
+          btn.disabled = false; btn.textContent = 'Refresh';
+        });
+    });
+  });
+})();
+</script>
 </body>
 </html>
 """
 @app.get("/")
 def landing():
+    """Leaderboard-first single-page UI.
+    Server-side renders the per-task tables for instant first paint; a tiny
+    inline JS layer adds search, sort, tab-switching and refresh-from-JSON
+    on top, all consuming the existing /leaderboard/<task> endpoint.
+    """
     manifest = _manifest()
     conn = _db()
     tasks = []
             "pred_col": s["pred_col"],
             "n_rows": n_rows_cfg if n_rows_cfg not in ("TBD", None) else None,
             "gt_present": (GT_DIR / f"{name}.csv").exists(),
+            "backend": cfg.get("backend", "gt"),
             "rows": [{"agent": a, "primary": p, "n_subs": n, "first_seen": f}
                      for (a, p, n, f) in rows],
         })
         n_subs_total += sum(r["n_subs"] for r in tasks[-1]["rows"])
     conn.close()
+    base_url = request.url_root.rstrip("/")
     return render_template_string(
         _LANDING_TMPL,
         tasks=tasks,
         n_tasks=len(tasks),
         n_subs_total=n_subs_total,
         quota=QUOTA_PER_DAY,
+        base_url=base_url,
     )