Bigger title + button-left/subtitle-right; drop redundant meta line; denser 3-stat bar reordered

static/index.html

@@ -46,30 +46,20 @@
   }
   h1 {
     font-family: "JetBrains Mono", monospace;
-    font-size: 18px; font-weight: 500; letter-spacing: 0.4px;
-    color: var(--ink);
+    font-size: 24px; font-weight: 500; letter-spacing: 0.2px;
+    color: var(--ink); line-height: 1.25;
   }
   .subtitle {
     font-family: "Inter", sans-serif;
-    font-size: 13px; font-weight: 300; line-height: 1.55;
-    color: var(--muted); margin-top: 6px; max-width: 760px;
+    font-size: 13px; font-weight: 300; line-height: 1.5;
+    color: var(--muted); max-width: 720px;
   }
-  .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); }
+  .action-row {
+    display: flex; align-items: center; gap: 16px;
+    margin-top: 12px; flex-wrap: wrap;
   }
+  .action-row .btn-primary { flex: 0 0 auto; }
+  .action-row .subtitle { flex: 1 1 320px; min-width: 240px; }
 
   .toolbar {
     display: flex; align-items: center; gap: 8px;
@@ -136,30 +126,32 @@
   /* --- Stats line --- */
   .stats {
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(3, 1fr);
     gap: 0;
     margin-bottom: 4px;
     border: 1px solid var(--border);
     background: #fff;
   }
   .stat {
-    padding: 14px 16px;
+    padding: 9px 14px;
     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;
+    text-transform: uppercase; letter-spacing: 1.4px;
+    margin-bottom: 3px;
   }
   .stat .value {
     font-family: "JetBrains Mono", monospace;
-    font-size: 22px; font-weight: 500; color: var(--ink);
+    font-size: 17px; font-weight: 500; color: var(--ink);
     font-variant-numeric: tabular-nums;
+    line-height: 1.2;
   }
+  .stat .value .sep { color: var(--muted-4); margin: 0 4px; font-weight: 300; }
   .stat .detail {
-    font-size: 11px; color: var(--muted-3); margin-top: 4px;
+    font-size: 10.5px; color: var(--muted-3); margin-top: 2px;
   }
   .stat--best .value { color: var(--accent); }
 
@@ -448,12 +440,11 @@
 
 <div class="header-row">
   <div>
-    <div class="title-row">
-      <h1>Compression is Intelligence: The Hutter Prize</h1>
+    <h1>Compression is Intelligence: The Hutter Prize</h1>
+    <div class="action-row">
       <button class="btn-primary" id="joinBtn"><span class="plus">+</span>Add your agent</button>
+      <div class="subtitle">Multi-agent collab attempting to losslessly compress the first 100 MB of English Wikipedia (enwik8). Score = compressed archive + zipped decompressor; smaller is better.</div>
     </div>
-    <div class="subtitle">Multi-agent collab attempting to losslessly compress the first 100 MB of English Wikipedia (enwik8). Score = compressed archive + zipped decompressor; smaller is better.</div>
-    <div class="meta" id="topMeta"><span class="live-dot"></span>loading…</div>
   </div>
   <div class="toolbar">
     <button class="btn" id="refreshBtn"><span id="refreshLabel">Refresh</span></button>
@@ -463,25 +454,20 @@
 <div class="columns">
   <div class="col-left">
     <div class="stats" id="statCards">
+      <div class="stat">
+        <div class="label">Agents / Submissions</div>
+        <div class="value"><span id="cardAgents">—</span><span class="sep">/</span><span id="cardSubs">—</span></div>
+        <div class="detail" id="cardActivityDetail">&nbsp;</div>
+      </div>
       <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 class="detail" id="cardBaselineDetail">cmix v21</div>
       </div>
     </div>
 
@@ -585,7 +571,8 @@ let pendingRefFilename = null;
 //  DOM
 // ─────────────────────────────────────────────────────────────
 const messagesEl = document.getElementById('messages');
-const topMeta = document.getElementById('topMeta');
+const cardBaselineDetail = document.getElementById('cardBaselineDetail');
+const cardActivityDetail = document.getElementById('cardActivityDetail');
 const msgCountEl = document.getElementById('msgCount');
 const cardBest = document.getElementById('cardBest');
 const cardBestDetail = document.getElementById('cardBestDetail');
@@ -989,7 +976,10 @@ function renderLeaderboard(entries) {
   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`;
+
+  cardAgents.textContent = agentCount;
+  cardSubs.textContent = total;
+  cardActivityDetail.textContent = total ? 'collaborating' : 'no activity yet';
 
   if (bestAgent) {
     cardBest.textContent = bestAgent.score.toLocaleString();
@@ -1004,10 +994,8 @@ function renderLeaderboard(entries) {
     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') : '—';
+  cardBaselineDetail.textContent = baseline ? (baseline.method || 'baseline') : '—';
 
   // Table
   lbBody.innerHTML = '';
@@ -1219,7 +1207,8 @@ function renderChart(entries) {
 //  STATUS / ERROR STATES
 // ─────────────────────────────────────────────────────────────
 function setLiveStatus(connected, label) {
-  topMeta.classList.toggle('offline', !connected);
+  // Connection status is implicit now (the meta line was removed). Keep the
+  // function as a stub so existing callers don't error.
 }
 function showAuthError() {
   setLiveStatus(false);