docs: describe React dashboard migration state

docs/development.md

@@ -26,8 +26,12 @@ RedditBot/
 ├── tsconfig.json            # TypeScript config
 ├── Dockerfile               # Container build
 ├── docker-compose.yml       # Docker Compose
+├── apps/
+│   └── dashboard/           # React + Vite operator console
+├── packages/
+│   └── api-contracts/       # Shared Zod transport contracts
 ├── public/
-│   └── index.html           # Web dashboard (single file)
+│   └── index.html           # Temporary legacy dashboard fallback
 ├── scripts/
 │   ├── login.ts             # Manual login helper
 │   └── inspect-chat-dom.ts  # DOM inspection debug script
@@ -60,8 +64,7 @@ RedditBot/
     │   ├── rate-limiter.ts # Rate limiting
     │   ├── retry.ts       # Retry wrapper
     │   └── image.ts       # Image utilities
-    └── web/
-        └── server.ts      # Express dashboard server
+    └── web/                 # Express API, events, and dashboard hosting
 ```
 
 ---
@@ -101,16 +104,29 @@ npm run login
 ### 5. Start Development Server
 
 ```bash
-# Development mode (hot reload with tsx)
+# Terminal 1: backend reload with tsx
 npm run dev
 
-# Production mode (compiled JS)
+# Terminal 2: Vite frontend with /api proxied to port 3000
+npm run dashboard:dev
+
+# Production build: server plus apps/dashboard/dist
 npm run build && npm start
 ```
 
 ### 6. Access Dashboard
 
-Open http://localhost:3000
+During frontend development, open the URL printed by Vite (normally
+http://localhost:5173). The Express dashboard remains on http://localhost:3000
+for production/fallback verification.
+
+Useful frontend checks:
+
+```bash
+npm run dashboard:typecheck
+npm run dashboard:build
+npx vitest run tests/dashboard
+```
 
 ---
 
@@ -277,12 +293,14 @@ setInterval(() => {
 }, intervalMs);
 ```
 
-### 4. Add to Web Dashboard (Optional)
+### 4. Add to the Web API and Dashboard (Optional)
 
-If the service needs API endpoints, add them in `src/web/server.ts`:
+If the service needs an API, add a focused router under `src/web/routes/` and
+mount it from `src/web/server.ts`. Define its transport schema in
+`packages/api-contracts`; do not expose repository rows directly.
 
 ```typescript
-server.app.get('/api/new-service', async (req, res) => {
+router.get('/new-service', async (req, res) => {
   try {
     const result = await newService.execute(req.query.input as string);
     res.json(result);
@@ -292,6 +310,9 @@ server.app.get('/api/new-service', async (req, res) => {
 });
 ```
 
+Add frontend behavior under `apps/dashboard/src/features/<feature>/` and drive
+it with Testing Library and MSW tests under `tests/dashboard/`.
+
 ### 5. Update Config (If Needed)
 
 Add new configuration options to:
@@ -498,17 +519,12 @@ Reddit frequently updates their `faceplate-*` components. Shadow DOM traversal c
 
 **Mitigation**: Use `scripts/inspect-chat-dom.ts` to debug when selectors change.
 
-### No Test Coverage
+### Dashboard Migration Boundary
 
-The project has no automated tests. Any changes should be manually tested.
+The React feature slices live in `apps/dashboard`, but `public/index.html`
+remains as a compatibility fallback. Do not delete it until authenticated
+Express hosting, private-media protection, and browser parity checks are proven.
 
-**Recommendation**: Add tests for critical paths:
-- StrategySelector algorithm
-- ChatService shadow DOM parsing
-- OpenRouterService model fallback
-
-### Single-File Dashboard
-
-The entire dashboard is in `public/index.html` (~2000+ lines). Making changes requires editing a single large file.
-
-**Recommendation**: Consider migrating to a proper frontend framework for maintainability.
+The repository has automated service, contract, component, and transport tests.
+Manual browser verification is still required for Reddit DOM changes and the
+final dashboard cutover.