feat(home): fill hero terminal and fleet panel from live testnet stats

[alpergundogdu]

Replaces the invented figures in the hero terminal and the Contact fleet panel with real Arbitrum Sepolia data from https://data.decdn.org/stats-421614.json (written every 5 min by the decdn/stats indexer; schema taken from its worker/src/stats.ts).

The site stays a static export. Both panels put a loading state into the HTML, then fill in after mount. They share a single fetch.

What each panel shows now

Hero terminal (arbitrum sepolia ~ settled) steps through the 8 newest FeeRouter Settled logs. For each it shows the tx, the block and epoch, the operator with its registered region, the bytes delivered, the USDC paid and how long ago it happened. The file has no content hash, peer probe/latency or fetch duration, so the old decdn fetch blake3:… / probing N peers / … in 1.27s lines are gone. In their place are fields we can actually read from the file.

Fleet panel (decdn · fleet · arbitrum sepolia):

• One row per CapacityBond-registered node: region, operator address, and when the node last settled ("settled 4 min ago"). A node with no settlement in the file's recent window shows "idle". The pulse marks nodes that settled recently. Nodes past 8 fold into a "+N more nodes" line.
• Σ served · 24h and Σ settled · 24h, computed from the hourly buckets.
• There's no per-node throughput in the data, so the per-node "GB/s" rates and "$/s" revenue are gone. The decorative bars that moved on their own are replaced by 24-cell hourly spark strips drawn from the real buckets.

Both panels show "catching up" while the index is backfilling. They show "stats unavailable" if the fetch fails, and "no settlements / nodes yet" when the file is empty.

Plumbing

• lib/stats.ts is pure and unit-tested: the URL, a shape check (which rejects a wrong chain or old schema), exact formatting of bytes and USDC, the terminal and fleet view models, and loadStats(), a single shared fetch with a timeout.
• lib/use-stats.ts is the client hook.
• public/_headers: the CSP gets connect-src 'self' https://data.decdn.org. Without it, default-src 'self' would block the fetch in production.
• DemoFigure → PanelFigure and DEMO_CAPTIONS → PANEL_CAPTIONS. The captions now describe live testnet readings ("Testnet figures, not mainnet revenue") and still point at the disclaimer. check-out.mjs greps for the new caption text.
• The llms-full.txt note now points readers at the stats file instead of calling the widgets sample values.
• FleetStatus is split into a hook wrapper plus FleetPanel, a plain render function, so the tree-walker test can cover the loading, error, ok and catching-up states.
• AGENTS.md documents the new module and the CSP coupling.

Testing

• pnpm typecheck, pnpm lint, pnpm format:check and pnpm test all pass (507 tests). next build + check:out + check:og-image also pass.
• The sandbox can't reach data.decdn.org. I checked rendering in Chromium against the built out/ with the request intercepted and fed a fixture in the real schema, plus a forced-failure run. Please check against the live file on the preview deploy.

🤖 Generated with Claude Code

https://claude.ai/code/session_01WcV6xKjiFqssRsGAWGcjEJ

[cloudflare-workers-and-pages]

Deploying website with    Cloudflare Pages

Latest commit:	2a17f02
Status:	✅  Deploy successful!
Preview URL:	https://5bacaed0.website-70y.pages.dev
Branch Preview URL:	https://claude-mock-data-stats-endpo.website-70y.pages.dev

View logs

[Copilot]

Copilot review overview

🟡 Changes recommended

The stats schema guard currently accepts settlement rows without validating logIndex, even though the UI depends on it for stable keys.

Review effort: Lite
Findings: 1

Open (1)

• Validate logIndex before building terminal row keys · New

What changed in this PR

This PR updates the homepage’s hero terminal and Contact fleet panel to display live Arbitrum Sepolia testnet stats fetched client-side from https://data.decdn.org/stats-421614.json, while keeping the site as a static export (loading state in HTML, hydrate + fetch after mount, shared fetch across panels).

Changes:

• Introduces lib/stats.ts (schema guard, formatting, view models, shared fetch) and lib/use-stats.ts (client hook).
• Updates HeroTerminal and FleetStatus to render live-derived terminal sessions and fleet aggregates/sparks, and renames DemoFigure → PanelFigure with updated captions.
• Updates CSP and build/test guards to reflect the live stats source and new captions/mirroring behavior.

File	Description
types/​css.d.ts	Adds --level CSS custom property typing for spark-strip inline styles.
scripts/​check-out.mjs	Updates caption checks and messaging for live panel captions in built index.html.
public/​_headers	Allows client fetch to https://data.decdn.org via connect-src CSP directive.
lib/​use-stats.ts	Adds client hook returning a StatsResult and triggering fetch after mount.
lib/​stats.ts	Adds stats constants, schema guard, formatting helpers, view models, and shared fetch with timeout.
lib/​stats.test.ts	Adds unit coverage for schema guard, formatting, view models, and load retry/sharing behavior.
lib/​copy.ts	Renames and updates captions to describe live testnet readings and source/disclaimer text.
lib/​copy.test.ts	Updates string-collection and caption assertions for PANEL_CAPTIONS.
components/​ui/​PanelFigure.tsx	Renames figure wrapper and updates docs to match live-panel behavior.
components/​ui/​PanelFigure.test.ts	Updates structural test to use PanelFigure and new caption wording.
components/​site/​HeroTerminal.tsx	Replaces invented demo sessions with live settlement sessions derived from stats.
components/​site/​FleetStatus.tsx	Converts to client component; splits FleetPanel for testability; adds spark strips and live aggregates.
components/​site/​FleetStatus.test.ts	Adds render-state tests (loading/error/ok/catching-up) for FleetPanel.
components/​site/​demo-caption.test.ts	Removes obsolete demo-caption test tied to the old server-component FleetStatus and demo figures.
app/​llms-full.txt/​route.ts	Points mirror readers at the live stats file instead of mirroring live panel readings.
app/​llms-full.txt/​route.test.ts	Updates tests to assert presence of STATS_URL rather than absence of old demo figures.
app/​globals.css	Updates terminal/fleet panel styling docs and replaces animated bars with spark-strip styles.
AGENTS.md	Documents new lib/stats.ts module and CSP coupling, and renames caption constant reference.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.