feat: rewrite SPA as 3-zone dashboard against network-dashboard-platform#17
Closed
AquiGorka wants to merge 2 commits into
Closed
feat: rewrite SPA as 3-zone dashboard against network-dashboard-platform#17AquiGorka wants to merge 2 commits into
AquiGorka wants to merge 2 commits into
Conversation
Locked design per pm-theahaco/network-dashboard-design-sketch.md.
Single page, no router, no auth. Connects to the new
network-dashboard-platform WebSocket and renders all 3 zones from a
single snapshot frame + live event deltas.
What ships:
- Zone 1 — counter strip (top): 4 counters (COUNCILS / ACTIVE PPs /
EVENTS / 24H / ASSETS REGISTERED), blue palette #1971c2/#e7f5ff.
- Zone 2 — topology (center-left): SVG with yellow MOONLIGHT center,
councils on a fixed ring (no physics), PP satellites fanning outward,
edges, tx pulses (~1s fade, colour per event kind).
- Zone 3 — activity feed (right rail): newest-first card stack, 5
visible, 8s fade. All 6 kinds wired:
council_formed (★ purple) provider_added (✓ green)
provider_removed (✗ gray) asset_registered (+ amber)
channel_deposit (↙ orange) channel_settlement (↗ blue)
- src/lib/ws-client.ts: connect/parse/dispatch with exponential
reconnect (1s → 30s cap). Subprotocol moonlight.network.v1.
- src/lib/network-events.ts: wire-frame types matching the new backend.
- src/lib/config.ts: reads networkDashboardPlatformUrl from
window.__DASHBOARD_CONFIG__.
Deletions per the new architecture:
- /map + world-map.svg + lib/world-map.ts + lib/geo*.ts + views/map.ts
- /councils + /council/:id + /transactions routes and views
- lib/router.ts (no router needed — single page)
- lib/stellar.ts (no direct Soroban — the backend owns chain reads now)
- nav.ts (no nav surface in v1)
Build/deploy:
- .github/workflows/deploy.yml rewritten to bake
networkDashboardPlatformUrl from GH secrets (testnet + mainnet).
- src/build.ts drops the @moonlight/ui nav.css fetch.
- deno.json patch bump 0.2.10 → 0.2.11 (per prompt §3 rule).
- Add channel_bundle to NETWORK_EVENT_KINDS (matches backend
network-dashboard-platform).
- Activity feed renders channel_bundle as a teal `• Bundle` card with
the executing PP truncated; covers the mid-channel sends that don't
cross the channel boundary.
- Topology pulse palette gets the matching teal for channel_bundle.
- Surface public council info in Zone 2 per PM ask:
- Small jurisdictions text below each council node (e.g. "US · UY")
- SVG `<title>` tooltip on hover: council name, council id,
jurisdictions list, full provider list (label + pubkey)
- SVG `<title>` tooltip on each PP satellite: label, pubkey, council
Contributor
Author
|
Superseded by |
6 tasks
AquiGorka
added a commit
that referenced
this pull request
May 21, 2026
## Summary Full SPA reshape against the v2 network-dashboard-platform backend (`moonlight.network.v2` subprotocol) and the new `@moonlight/ui/world-map` shared component. Closes the old PR #17 (which diverged from the locked sketch). ## What ships - **Single-page layout** below a `@moonlight/ui` brand nav. Dark theme via the upstream tokens, no inline color hardcoding except the per-event-kind accents. - **Counter strip** (6 tiles): COUNCILS / ACTIVE PPs / EVENTS-24h / ASSETS / THROUGHPUT / LATENCY. Repaints on every live event via the new `LiveFrame.counters` field — no more snapshot-only updates. - **3×3 detail grid** below the counters: - Map (2×2 block) using the shared `@moonlight/ui/world-map@v0.3.2` component. Hover-driven popover (countries sharing a council with the hovered one are highlighted; non-council countries dim everything). - CountryDetails (top-right): on map click, lists councils operating in that country with clickable rows. - CouncilDetails (middle-right): on council click, shows council metadata + member PPs. - ProviderDetails (bottom-right): on PP click, shows the PP's pubkey, label, cross-council membership, and recent bundle count. - ActivityFeed (bottom 2 cols): 6+1 event-kind cards, 5-min TTL, 10 visible, colour-coded by kind. - **Sparklines + asset breakdown** row below the grid. - **Drop topology view** — visual real estate replaced by the more useful drilldown chain (country → council → PP). ## Commits 1. `feat: 5-section single-page reshape against network-dashboard-platform v2` 2. `feat(ui): restore @moonlight/ui nav + dark-theme tokens` 3. `chore: refresh deno.lock for @moonlight/ui nav + layout imports` 4. `feat(world-map): migrate §5 to @moonlight/ui/world-map@v0.3.2 with hover popover` 5. `feat(activity-feed): card TTL 8s → 5 min, max-visible 5 → 10` 6. `refactor(layout): drop topology, add Country + Provider details drilldown in a 3x3 grid` 7. `feat: repaint counter strip on every live event` 8. `chore: release v0.2.12` ## Test plan - [x] `deno fmt --check` clean - [x] `deno lint` clean - [x] `deno task check` clean - [x] `deno task test` — 13 passed - [x] `deno task build` clean (dev + production) - [x] Smoke against a populated local stack: dashboard at `:3040` renders all sections, counter strip updates live, drilldown chain works end-to-end (country click → council list → PP card), world map highlights reachable jurisdictions on hover, sparklines + asset breakdown populated, activity feed paints all 7 event kinds ## Dependencies - Requires `network-dashboard-platform` (companion PR) to be deployed first — frontend assumes `LiveFrame.counters` is present. - Consumes `@moonlight/ui@v0.3.2` (already released). Awaiting PM review + merge.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
PR-2 of the two-PR network-dashboard build (pairs with
Moonlight-Protocol/network-dashboard-platformPR for the backend).Full rewrite of the SPA per the locked design sketch. Single page, no router, no auth. One WebSocket connection to
network-dashboard-platform; render snapshot on connect; stream events as they arrive.What ships
#1971c2/#e7f5ff): COUNCILS / ACTIVE PPs / EVENTS / 24H / ASSETS REGISTERED.src/lib/ws-client.ts: WebSocket client. Parse + dispatch + exponential reconnect (1s → 30s).src/lib/network-events.ts: wire-frame types matching the backend.src/lib/config.ts: readsnetworkDashboardPlatformUrlfromwindow.__DASHBOARD_CONFIG__; in dev mode falls back tohttp://localhost:8080.Deletions (per locked design — aggregate only, no drill-down)
/map+public/world-map.svg+src/lib/world-map.ts+src/lib/geo_test.ts+src/views/map.ts/councils+/council/:id+/transactionsroutes + their viewssrc/lib/router.ts(single page now)src/lib/stellar.ts(no direct Soroban — backend owns chain reads)src/lib/nav.ts(no nav surface in v1)Build / deploy
.github/workflows/deploy.ymlrewritten — bakesnetworkDashboardPlatformUrlfrom new GH secretsNETWORK_DASHBOARD_PLATFORM_URL(testnet) +MAINNET_NETWORK_DASHBOARD_PLATFORM_URL(mainnet).src/build.tsdrops the@moonlight/uinav.cssfetch.deno.jsonpatch bump 0.2.10 → 0.2.11.Smoke evidence (custom-port tmp stack, port 3240)
Bundle contains the expected symbols. With the manually-patched config.js pointing at
http://localhost:3260, the SPA connects to the backend (verified via the backend's WS handshake test — see backend PR).CI rollup (local)
deno fmt --check src/— 12 files cleandeno lint src/— 11 files cleandeno task check— cleandeno task test— 5/5 pass (parseFrame happy + reject paths; deriveWsUrl removed since the WS URL derivation moved into the client constructor)deno task build— clean bundleAnomalies / facts (no proposals)
local-dev/infra-up.shwritespublic/config.jsfrom a hardcoded template that doesn't includenetworkDashboardPlatformUrl. The SPA falls back tohttp://localhost:8080in dev mode. For local verification I patchedpublic/config.jsmanually post-up. Wiringlocal-devto emit the new config key is a third-repo touch outside this two-PR dispatch.NETWORK_DASHBOARD_PLATFORM_URLandMAINNET_NETWORK_DASHBOARD_PLATFORM_URLin the network-dashboard repo's GH secrets. Surface this in case env-registry fanout doesn't already write them.Awaiting PM review + merge.