feat(dashboard): complete React cutover

This commit is contained in:
jjbrunton committed 2026-08-08 16:11:57 +01:00
1 parent d5f0175dc2
commit ec0cd1318b
13 files changed
+50 -4291

No files matched your search

+18 -26
View File
@@ -2,29 +2,22 @@
## Outcome
Replace the inline dashboard in `public/index.html` with a typed, accessible React
application without disrupting the bot worker or its Express API. At cutover,
Express will remain the authenticated API, SSE, private-media, and static-asset
host.
The inline dashboard has been replaced by a typed, accessible React application.
Express remains the authenticated API, SSE, private-media, and production
static-asset host.
## Current status
The React application and production build are present. The current routes are
Overview, Conversations (including route-addressable detail), Media,
Performance, Operations, and a Settings placeholder. Shared HTTP and realtime
schemas live in `packages/api-contracts`, and `/api/events/stream` supplies the
typed SSE transport.
The current routes are Overview, Conversations (including route-addressable
detail), Media, Performance, Operations, and validated Settings and Access.
Shared HTTP and realtime schemas live in `packages/api-contracts`, and
`/api/events/stream` supplies the typed SSE transport.
`npm run build` compiles the server and writes the Vite application to
`apps/dashboard/dist`. `src/web/dashboard-assets.ts` can select that build and
fall back to `public/index.html`, but the checked-in Express server has not yet
completed that authenticated static-hosting cutover. Until it does, the legacy
page remains the served fallback and the dashboard must not be exposed to an
untrusted network.
The migration is complete only when the legacy dashboard can be removed without
losing a documented capability and the full test, type-check, production-build,
browser-acceptance, authentication, private-media, and reconnect gates pass.
`apps/dashboard/dist`. `src/web/dashboard-assets.ts` requires that build and
fails startup with an actionable error if it is absent. The legacy HTML has
been removed. Root pages, assets, APIs, SSE, and private media share the same
timing-safe dashboard authentication boundary.
## Architecture
@@ -50,7 +43,7 @@ The application shell provides a responsive sidebar or drawer with these routes:
| `/media` | Private blurred-by-default gallery and sync controls |
| `/performance` | Trends, strategies, subreddits, and successful examples |
| `/operations` | Domain activity, background jobs, and diagnostics |
| `/settings` | Placeholder for runtime and access settings |
| `/settings` | Validated runtime configuration and Reddit access state |
Overview surfaces bot state, dry-run state, cooldowns, timers, and the guarded
start/stop control. Operations owns connection health, sync state, activity,
@@ -89,8 +82,8 @@ and falls back to visibility-aware polling where necessary.
9. Run feature parity and security audits, switch Express to the Vite output,
remove the legacy HTML, and update operator and deployment documentation.
Each slice must be usable independently and must not require a flag-day rewrite.
The legacy dashboard remains available until replacement behavior is proven.
All slices now run from the React application; the migration phases above are
retained as implementation history.
## Engineering gates
@@ -108,12 +101,11 @@ The legacy dashboard remains available until replacement behavior is proven.
- No production frontend or backend code uses `any` or `console.log`.
- Mutations display the confirmed server outcome and do not rely on optimistic
success for operational controls.
- Production builds are deterministic. Serving only generated frontend assets
plus authenticated private content remains a cutover gate.
- Production builds are deterministic. The server serves only generated React
assets plus authenticated private content.
## Cutover evidence
Before deleting `public/index.html`, record evidence for every legacy capability,
all API and SSE authentication paths, private media access, container restart and
Cutover verification covers API and SSE authentication, private media access,
SSE recovery, responsive navigation, frontend type-check/build, backend build,
the complete Vitest suite, and the critical Playwright journeys.
the complete Vitest suite, and browser smoke journeys.