diff --git a/site/live.html b/site/live.html
index b007f1625..39a7efe90 100644
--- a/site/live.html
+++ b/site/live.html
@@ -176,19 +176,20 @@ footer{border-top:1px solid var(--line);padding-block:48px 32px}
block dag
-
on screen 0chain 0side 0newest blue 0locked none
+
on screen 0chain 0side 0pending 0newest blue 0locked none
chain block
included (blue): paid
pending
- excluded (red)
+ excluded (red)
locked checkpoint, final
just arrived
selected chain
first parent
- 5d3fd79cone lane per miner, colour from its id
+ 12:34ruler, a tick every 5 s
+ 5d3fd79cring colour = miner; the gutter counts each miner's blocks on screen
hover or tap a block for its id, scores and parents
@@ -263,29 +264,29 @@ footer{border-top:1px solid var(--line);padding-block:48px 32px}
function esc(s){return String(s).replace(/&/g,'&').replace(//g,'>');}
// ---------- DAG scene ----------
- // One canvas, one requestAnimationFrame loop. Lanes: one per miner in the visible window, most blocks on top,
- // the least active share an "others" lane. Labels live in a left gutter, never on blocks. Edges go under blocks.
- var c=$('dag'),x=c.getContext('2d'),W=0,H=0,S=22,G=78,narrow=false,level=0,maxLanes=8;
- var blocks=[],byHash={},miners={},lanes=[],laneN=1,othersN=0;
- var LV=[{S:22,s:14,pps:40,npps:14},{S:16,s:12,pps:26,npps:10},{S:12,s:10,pps:18,npps:8}];
+ // One canvas, one requestAnimationFrame loop. The selected chain runs along one horizontal rail; side blocks hang
+ // above and below it in time order, packed into rows so none overlap. The miner is the ring colour; the left gutter
+ // lists the active miners with their block counts. A time ruler sits under the blocks. Edges draw under blocks.
+ var c=$('dag'),x=c.getContext('2d'),W=0,H=0,S=22,G=104,narrow=false,level=0;
+ var blocks=[],byHash={},miners={},minerList=[],rail=0,maxRows=1,rowGap=33;
+ var LV=[{S:22,s:14,pps:40,npps:14},{S:16,s:12,pps:26,npps:11},{S:12,s:10,pps:18,npps:9}];
var pxPerSec=40,targetPx=40,bps=0,live=false,serverNow=0,serverAt=0,frozenAt=null,note='';
- var running=false,needSize=true,inView=true,ptrX=-1,ptrY=-1,ptrTouch=false,pin=null,laneLast=[],laneRun=[];
- var TOP=20,BOT=12;
+ var running=false,needSize=true,inView=true,ptrX=-1,ptrY=-1,pin=null,above=[],below=[],crow=[],CO=[0,-1.1,1.1],tickLabels={},tickCount=0;
+ var TOP=18,BOT=4,RUL=20,SLIDE=450;
// 12 hues that sit beside ember on obsidian; the index comes from the short id, so a miner keeps its colour across reloads
var PAL=['#5CB8FF','#3FD39A','#F5C542','#C49BFF','#FF7AA8','#8FD15F','#FFB08A','#6F8CFF','#D9E25A','#FF8FD6','#4FD8D8','#E0A96D'];
function colour(id){var v=0;for(var i=0;i