road-compiler/.trellis/tasks/archive/2026-08/08-26-react-workbench-migration/implement.md

Implementation Plan

1. Add Vite, React 19, TypeScript, Tailwind/shadcn/ui dependencies and scripts; establish tsconfig, Vite config, aliases, CSS variables, and production output location.
2. Define typed API/state contracts and a fetch client from the existing /api/* payloads; add focused serialization tests.
3. Build the OpenLayers adapter and useOpenLayersMap hook. Port the current layer registry, styles, source updates, selection interaction, fit behavior, and cleanup tests before moving inspector UI.
4. Port the import-first flow and shell/layout to React, then migrate layer controls, summaries, diagnostics, road inspector, connection editor, centerline editor, signal editor, and save/compile actions.
5. Replace the server's legacy /app.js//app.css production serving with Vite build output while retaining a compatibility path only where needed for rollback.
6. Remove the old DOM-driven entry after parity is demonstrated; keep OpenLayers vendor serving only if legacy mode still needs it.
7. Add browser/component smoke coverage for no-session import, active-session map render, a road selection/edit, and compile/export request wiring.
8. Run npm run build, frontend tests, existing npm test, and a manual workbench smoke check at desktop/mobile widths; fix parity regressions.

Validation commands:

• npm run build
• npm run format:check
• frontend test command added by this task
• npm test
• node --check workbench/server.js

Rollback point: retain the legacy client in a separate compatibility path until the React build serves the same API workflow and OpenLayers interaction checks pass.