diff --git a/docs/plans/site-ui-3-shots/after/index-steps-1440-dark-clip.jpg b/docs/plans/site-ui-3-shots/after/index-steps-1440-dark-clip.jpg new file mode 100644 index 000000000..e62d48714 Binary files /dev/null and b/docs/plans/site-ui-3-shots/after/index-steps-1440-dark-clip.jpg differ diff --git a/docs/plans/site-ui-3-shots/after/index-steps-1440-dark.webm b/docs/plans/site-ui-3-shots/after/index-steps-1440-dark.webm new file mode 100644 index 000000000..41a629126 Binary files /dev/null and b/docs/plans/site-ui-3-shots/after/index-steps-1440-dark.webm differ diff --git a/docs/plans/site-ui-3-shots/after/index-steps-390-dark-clip.jpg b/docs/plans/site-ui-3-shots/after/index-steps-390-dark-clip.jpg new file mode 100644 index 000000000..2a7950159 Binary files /dev/null and b/docs/plans/site-ui-3-shots/after/index-steps-390-dark-clip.jpg differ diff --git a/site/api/live.mjs b/site/api/live.mjs index 57012a989..7b1751f51 100644 --- a/site/api/live.mjs +++ b/site/api/live.mjs @@ -45,7 +45,7 @@ export default async function handler(req, res) { (SELECT row_to_json(s) FROM ${T}live_state s WHERE s.id = 1) AS state, (SELECT json_agg(e) FROM (SELECT ts, kind, text FROM ${T}live_events ORDER BY ts DESC LIMIT 30) e) AS events, (SELECT max(number) FROM ${T}live_blocks WHERE number IS NOT NULL AND received_at > now() - interval '10 minutes') AS height`), - sql(`SELECT hash, blue_score, daa_score, timestamp_ms, parent_hashes, is_chain_block, vote_key_hash, received_at, color + sql(`SELECT hash, blue_score, daa_score, timestamp_ms, parent_hashes, is_chain_block, vote_key_hash, received_at, color, number FROM ${T}live_blocks WHERE received_at > now() - ($1 || ' seconds')::interval ORDER BY received_at DESC @@ -140,6 +140,8 @@ export default async function handler(req, res) { const blocks = blockRows.reverse().map(b => ({ hash: short(b.hash), + // the chain block number (the EVM block number) once the observer has planned the block; null off the chain or before the plan + number: num(b.number), blue_score: num(b.blue_score), daa: num(b.daa_score), ts: num(b.timestamp_ms), diff --git a/site/index.html b/site/index.html index 317d164a4..ea6867d2a 100644 --- a/site/index.html +++ b/site/index.html @@ -82,6 +82,7 @@ .scene-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-3) var(--s-5);margin-bottom:var(--s-3)} .scene-head .state{margin:0} .scene{position:relative} +.caption{margin:var(--s-3) 0 0;font-size:13px;line-height:1.5;color:var(--bone);min-height:1.5em}.caption.muted{color:var(--ash)} .scene canvas{width:100%;height:360px;border-radius:var(--r-row);background:var(--row);border:1px solid var(--line);display:block} .tip{position:absolute;left:0;top:0;pointer-events:none;background:var(--graphite);border:1px solid var(--line-2);border-radius:var(--r-row);padding:10px 12px;font:400 12px/1.5 var(--f-mono);color:var(--ink-2);display:flex;flex-direction:column;gap:2px;max-width:320px;box-shadow:0 14px 40px var(--shadow)} .tip b{color:var(--bone);font-weight:500;overflow-wrap:anywhere} @@ -259,22 +260,21 @@
Connecting to the devnet observer.
One node is read every 2 s. Chain block is the EVM block number. Shards proven is every shard paid on the chain so far. Last lock is the latest checkpoint the finality rule locked. Hover or tap a block for its hash, miner, blue score, parents and proof state. Ctrl or cmd and scroll, a pinch, or a click into the scene then scroll, changes the window.
+One node is read every 2 s. Every square is a real block, released at a calm pace so each step can be seen; the counters read the chain. Chain block is the EVM block number. Shards proven is every shard paid on the chain so far. Last lock is the latest checkpoint the finality rule locked.