Live page: miners as one compact strip, events as the last five lines

the project lead, 6 October 2026: the miners table and the events feed were too long for the story. The miners card is now a strip:
the count ("66 vote keys in 10 min"), the top five lanes by blocks with a bar each and the last-seen time, and "and N more"
with the bench table linked. The events card shows the last five, one line each, with the count of the rest in the note.
Two columns from 900 px. Measured headless: at 1440 both cards end at 1.9 screens (the scene fills the first); at 390 the
miners card ends at 2.5 screens and events at 2.95; no horizontal overflow, no console errors. Captures replaced in
docs/plans/site-ui-3-shots/after/live-1440-dark.jpg and live-390-dark.jpg.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

site/live.html

@@ -89,6 +89,7 @@ h1,h2,h3{font-family:var(--f-display);margin:0;line-height:1.08;text-wrap:balanc
 .legend .lk{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);min-width:64px}
 .legend span.txt{white-space:normal;display:inline;color:var(--ash)}
 .two{display:grid;gap:var(--gap);grid-template-columns:1fr;margin-top:var(--gap)}
+@media (min-width:900px){.two{grid-template-columns:1fr 1fr}}
 @media (min-width:900px){.two{grid-template-columns:1.1fr .9fr}}
 td.n{font-variant-numeric:tabular-nums;text-align:right}th.n{text-align:right}
 .id{font-family:var(--f-mono);color:var(--molten)}
@@ -96,6 +97,12 @@ td.n{font-variant-numeric:tabular-nums;text-align:right}th.n{text-align:right}
 .bar i{display:block;height:100%;background:var(--ember)}
 .feed{display:flex;flex-direction:column;margin-top:12px;font-family:var(--f-mono);font-size:13px;color:var(--ink-2)}
 .feed div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:9px 0;align-items:baseline}
+.feed div>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
+.lanes{display:flex;flex-direction:column;margin-top:12px}
+.lane{display:grid;grid-template-columns:84px minmax(0,1fr) 72px 64px;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:13px;color:var(--ink-2)}
+.lane:last-child{border-bottom:0}
+.lane .n{text-align:right;white-space:nowrap}.lane .t{color:var(--ash);font-size:12px;text-align:right;white-space:nowrap}
+@media (max-width:480px){.lane{grid-template-columns:76px minmax(0,1fr) 60px}.lane .t{display:none}}
 .feed div:last-child{border-bottom:0}
 .feed .t{color:var(--ash);flex:0 0 auto;font-size:12px}
 .feed .k{color:var(--molten)}
@@ -190,18 +197,14 @@ main{padding-bottom:var(--sec)}
 
   <div class="two">
     <div class="card">
-      <div class="viz-head"><h2>Miners</h2><div class="eyebrow">last 10 min</div></div>
-      <div class="tbl">
-        <table>
-          <thead><tr><th>Miner</th><th class="n">Blocks</th><th>Share</th><th>Last seen</th><th>Engine</th></tr></thead>
-          <tbody id="miners"><tr><td colspan="5" class="empty">No blocks in the last 10 minutes.</td></tr></tbody>
-        </table>
-      </div>
-      <p class="note">The short id is the first 8 hex characters of the vote key hash in each header. The engine is what the miner writes into the coinbase; the devnet miner writes nothing yet.</p>
+      <div class="viz-head"><h2>Miners</h2><div class="eyebrow" id="miners-count">last 10 min</div></div>
+      <div class="lanes" id="miners"><div class="empty">No blocks in the last 10 minutes.</div></div>
+      <p class="note" id="miners-more">Every vote key with a block in the last 10 minutes; a card runs several. The short id is the first 8 hex characters of the vote key hash in each header.</p>
     </div>
     <div class="card">
-      <div class="viz-head"><h2>Events</h2><div class="eyebrow">newest first</div></div>
+      <div class="viz-head"><h2>Events</h2><div class="eyebrow">the last five</div></div>
       <div class="feed" id="events"><div class="empty">No events yet.</div></div>
+      <p class="note" id="events-more">Checkpoint locks, miners going quiet and coming back, provers seen, as the observer records them.</p>
     </div>
   </div>
 
@@ -337,9 +340,15 @@ main{padding-bottom:var(--sec)}
     var hr=hashrate(s.hashes_per_second_estimate).split(' ');$('st-hps').innerHTML=hr.length>1?esc(hr[0])+'<small>'+esc(hr[1])+'</small>':esc(hr[0]);
     $('st-miners').textContent=s.miners_10m;$('st-peers').textContent=s.peers===null?'0':s.peers;$('st-mempool').textContent='mempool '+(s.mempool||0);
     var now=new Date(d.now).getTime();
-    if(d.miners.length){minersEl.innerHTML=d.miners.map(function(m){return '<tr><td><span class="id">'+esc(m.id)+'</span></td><td class="n">'+m.blocks+'</td><td><div style="display:flex;align-items:center;gap:8px"><div class="bar" style="width:70px"><i style="width:'+m.share+'%"></i></div><span class="mono" style="font-size:12px">'+m.share+'%</span></div></td><td>'+rel(now-new Date(m.last_seen).getTime())+'</td><td>'+(m.engine?esc(m.engine):'<span style="color:var(--ash)">not reported</span>')+'</td></tr>';}).join('');}
-    else minersEl.innerHTML='<tr><td colspan="5" class="empty">No blocks in the last 10 minutes.</td></tr>';
-    if(d.events.length){eventsEl.innerHTML=d.events.map(function(e){return '<div><span><span class="k">'+esc(e.kind)+'</span> '+esc(e.text)+'</span><span class="t">'+rel(now-new Date(e.ts).getTime())+'</span></div>';}).join('');}
+    // miners: one compact strip, the top five lanes by blocks with a bar each, the rest as a count (the full table is the bench page's job)
+    if(d.miners.length){var top=d.miners.slice(0,5),max=Math.max(1,top[0].blocks),rest=d.miners.length-top.length;
+      $('miners-count').textContent=d.miners.length+' vote keys in 10 min';
+      minersEl.innerHTML=top.map(function(m){return '<div class="lane"><span class="id">'+esc(m.id)+'</span><div class="bar"><i style="width:'+Math.round(m.blocks/max*100)+'%"></i></div><span class="n">'+m.blocks+' blocks</span><span class="t">'+esc(rel(now-new Date(m.last_seen.replace(' ','T')).getTime()))+'</span></div>';}).join('');
+      $('miners-more').innerHTML=(rest>0?'and '+rest+' more. ':'')+'Every vote key with a block in the last 10 minutes; a card runs several. <a href="/miners">The GPU bench table</a> has the measured rates per card.';}
+    else{minersEl.innerHTML='<div class="empty">No blocks in the last 10 minutes.</div>';$('miners-count').textContent='last 10 min';}
+    // events: the last five, one line each
+    if(d.events.length){var ev5=d.events.slice(0,5);eventsEl.innerHTML=ev5.map(function(e){return '<div><span><span class="k">'+esc(e.kind.replace(/_/g,' '))+'</span> '+esc(e.text)+'</span><span class="t">'+rel(now-new Date(e.ts).getTime())+'</span></div>';}).join('');
+      $('events-more').textContent=(d.events.length>5?(d.events.length-5)+' more in the observer\'s last 30. ':'')+'Checkpoint locks, miners going quiet and coming back, provers seen, as the observer records them.';}
     else eventsEl.innerHTML='<div class="empty">No events yet.</div>';
     spark(s.blocks_per_minute);
     lastD=d;sceneCounters(d);if(dag)dag.push(d);