Skip to content

update status page with rich dashboard layout, SSE live stream, and shared data layer#6

Merged
ralyodio merged 1 commit into
profullstack:masterfrom
muhammad-hamdi:master
May 13, 2026
Merged

update status page with rich dashboard layout, SSE live stream, and shared data layer#6
ralyodio merged 1 commit into
profullstack:masterfrom
muhammad-hamdi:master

Conversation

@muhammad-hamdi
Copy link
Copy Markdown
Contributor

Summary

Upgrades the /status page from a simple text-based layout to a rich dashboard modeled after infernetprotocol.com/status. Respects c0mpute's DIP-0014 privacy model (aggregates only — no individual worker, job, or customer data).

Changes

  • Rich dashboard layout — OverviewGrid (4 stat cards), ResourceTable (workers by role, workload types, capability tags), DashboardShell wrapper
  • Live refresh badge — "Live · Xs ago" with pulsing dot. Uses SSE (/api/status/stream) with 60s fallback timer. Pauses when tab hidden.
  • Shared data layer — Extracted getStatusPayload() into lib/status.ts. Page and API route both import it directly — no HTTP fetch in the page component, eliminating the "status temporarily unavailable" on cold start.
  • Extended StatusPayload — Added workers_with_tag and workload_types aggregate fields (stub zeros today; real numbers flow when the aggregator ships in DIP-0014 Phase 3).
  • Loading & error states — Skeleton shimmer card placeholders + error boundary with retry button.
  • New CSS tokens--color-panel, --color-line, --color-muted, --color-warn for dashboard card/table styling.
  • Toolchain fixes — Fixed stale cargo test --manifest-path node/Cargo.toml in .mise.toml (workspace manifest is root Cargo.toml). Added lint script to apps/web/package.json.

Verified

  • cargo test — 25/25 pass
  • tsc --noEmit — 0 errors
  • cargo build --bin c0mpute — compiles

Files (13 total: 5 modified, 8 new)

File Change
apps/web/src/lib/status.ts New — shared data module
apps/web/src/components/overview-grid.tsx New — stat cards
apps/web/src/components/resource-table.tsx New — reusable table
apps/web/src/components/dashboard-shell.tsx New — page wrapper
apps/web/src/components/live-badge.tsx New — SSE live badge
apps/web/src/app/api/status/stream/route.ts New — SSE endpoint
apps/web/src/app/status/loading.tsx New — skeleton loading
apps/web/src/app/status/error.tsx New — error boundary
apps/web/src/app/status/page.tsx Rewrite — dashboard layout
apps/web/src/app/api/status/route.ts Rewrite — uses lib/status
apps/web/src/app/globals.css Edit — CSS tokens
apps/web/package.json Edit — lint script
.mise.toml Edit — fix cargo path

…hared data layer

Adopt infernet-style dashboard patterns (OverviewGrid stat cards,
ResourceTable, LiveBadge with SSE) while respecting c0mpute's
DIP-0014 privacy model (aggregates only, no individual data).

- Extract getStatusPayload() into lib/status.ts shared module
- Page imports data directly instead of fetching /api/status
- Add SSE endpoint /api/status/stream for live badge updates
- Extend StatusPayload with workers_with_tag and workload_types
- Add loading.tsx skeleton and error.tsx error boundary
- Add dashboard CSS tokens (--color-panel, --color-line, etc.)
- Fix .mise.toml test task (stale node/Cargo.toml path)
- Add lint script to apps/web/package.json
@ralyodio ralyodio merged commit 100f0a2 into profullstack:master May 13, 2026
7 of 8 checks passed
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.

2 participants