Skip to content

feat: rewrite SPA as 3-zone dashboard against network-dashboard-platform#17

Closed
AquiGorka wants to merge 2 commits into
mainfrom
feat/build-network-dashboard
Closed

feat: rewrite SPA as 3-zone dashboard against network-dashboard-platform#17
AquiGorka wants to merge 2 commits into
mainfrom
feat/build-network-dashboard

Conversation

@AquiGorka
Copy link
Copy Markdown
Contributor

Summary

PR-2 of the two-PR network-dashboard build (pairs with Moonlight-Protocol/network-dashboard-platform PR 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

  • Zone 1 — counter strip (top, 4 boxes, blue palette #1971c2/#e7f5ff): COUNCILS / ACTIVE PPs / EVENTS / 24H / ASSETS REGISTERED.
  • Zone 2 — topology (center-left, SVG): yellow MOONLIGHT center, councils on a fixed ring (no physics), PP satellites fanning outward, edges Moonlight↔council and council↔PP. Tx pulses ~1s fade — colour per event kind.
  • Zone 3 — activity feed (right rail, 280px wide, max 5 cards, 8s fade): all 6 event kinds wired with the design sketch palette.
  • 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: reads networkDashboardPlatformUrl from window.__DASHBOARD_CONFIG__; in dev mode falls back to http://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 + /transactions routes + their views
  • src/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.yml rewritten — bakes networkDashboardPlatformUrl from new GH secrets NETWORK_DASHBOARD_PLATFORM_URL (testnet) + MAINNET_NETWORK_DASHBOARD_PLATFORM_URL (mainnet).
  • src/build.ts drops the @moonlight/ui nav.css fetch.
  • deno.json patch bump 0.2.10 → 0.2.11.

Smoke evidence (custom-port tmp stack, port 3240)

$ curl -s http://localhost:3240/health.json
{"status":"ok","service":"network-dashboard","version":"0.2.11"}

$ curl -s http://localhost:3240/app.js | grep -oE "moonlight.network.v1|connectNetworkPlatform|activity-card--|topology-pulse" | sort -u
activity-card--
connectNetworkPlatform
moonlight.network.v1
topology-pulse

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 clean
  • deno lint src/ — 11 files clean
  • deno task check — clean
  • deno 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 bundle

Anomalies / facts (no proposals)

  • local-dev wiring gap: local-dev/infra-up.sh writes public/config.js from a hardcoded template that doesn't include networkDashboardPlatformUrl. The SPA falls back to http://localhost:8080 in dev mode. For local verification I patched public/config.js manually post-up. Wiring local-dev to emit the new config key is a third-repo touch outside this two-PR dispatch.
  • GH repo secrets not verified: the deploy.yml expects NETWORK_DASHBOARD_PLATFORM_URL and MAINNET_NETWORK_DASHBOARD_PLATFORM_URL in the network-dashboard repo's GH secrets. Surface this in case env-registry fanout doesn't already write them.
  • Bump size: the SPA was rewritten end-to-end (router deleted, all views replaced, build changed). Patch bump (0.2.10 → 0.2.11) per §3 rule despite the substantive change.

Awaiting PM review + merge.

AquiGorka added 2 commits May 18, 2026 17:44
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
@AquiGorka
Copy link
Copy Markdown
Contributor Author

Superseded by -4 corrective per /Users/theahaco/repos/pm-theahaco/prompts/build-network-dashboard-4-prompt.md. Layout diverged from the locked sketch and only wired 2 of the 6 event kinds.

@AquiGorka AquiGorka closed this May 19, 2026
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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant