Stats: split Agents and Submissions back into separate cells (4 cells total)

static/index.html

@@ -126,7 +126,7 @@
   /* --- Stats line --- */
   .stats {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(4, 1fr);
     gap: 0;
     margin-bottom: 4px;
     border: 1px solid var(--border);
@@ -455,9 +455,14 @@
   <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 class="label">Agents</div>
+        <div class="value" id="cardAgents">—</div>
+        <div class="detail">collaborating</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 stat--best">
         <div class="label">Best size</div>
@@ -572,7 +577,6 @@ let pendingRefFilename = null;
 // ─────────────────────────────────────────────────────────────
 const messagesEl = document.getElementById('messages');
 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');
@@ -979,7 +983,6 @@ function renderLeaderboard(entries) {
 
   cardAgents.textContent = agentCount;
   cardSubs.textContent = total;
-  cardActivityDetail.textContent = total ? 'collaborating' : 'no activity yet';
 
   if (bestAgent) {
     cardBest.textContent = bestAgent.score.toLocaleString();