docs: describe React dashboard migration state

This commit is contained in:
jjbrunton committed 2026-08-08 15:32:38 +01:00
1 parent 720e5e3e34
commit 12a853fa42
6 files changed
+194 -95

No files matched your search

+27 -10
View File
@@ -3,8 +3,24 @@
## Outcome
Replace the inline dashboard in `public/index.html` with a typed, accessible React
application without disrupting the bot worker or its Express API. Express remains
the authenticated API, SSE, private-media, and static-asset host.
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.
## 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.
`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,
@@ -34,19 +50,20 @@ 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 |
| `/operations/logs` | Filterable bounded realtime technical console |
| `/settings/*` | Monitoring, limits, behaviour, AI, and access settings |
| `/settings` | Placeholder for runtime and access settings |
The shell always surfaces bot state, dry-run state, Reddit session state,
realtime connection state, cooldowns, active sync progress, notifications, and
the guarded start/stop control.
Overview surfaces bot state, dry-run state, cooldowns, timers, and the guarded
start/stop control. Operations owns connection health, sync state, activity,
and the bounded technical console.
## Realtime model
HTTP snapshots are authoritative. A typed SSE event stream updates or invalidates
the relevant query cache. Every event has an ID, type, occurrence timestamp, and
validated payload. The stream supports bounded replay and `Last-Event-ID` resume.
After reconnection the client refetches authoritative snapshots to repair gaps.
Relevant events invalidate TanStack Query keys so the next HTTP read remains
authoritative. Connection loss marks cached state stale while `EventSource`
reconnects.
Required event families are bot status, message sent or failed, conversation
updated, reply received, sync lifecycle and progress, rate-limit state, Reddit
@@ -91,8 +108,8 @@ 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 and the Docker image serves only generated
frontend assets plus authenticated private content.
- Production builds are deterministic. Serving only generated frontend assets
plus authenticated private content remains a cutover gate.
## Cutover evidence