Modular React-based UI

[MrFredericKlark]

Scalable Frontend Rewrite

This plan moves the UI from a monolithic static page to a React + TypeScript + Vite frontend designed for high-frequency interactive updates (settings + path previews), while keeping vectorization out of MVP and leaving clean extension points for it later.
Given your choices, it assumes: versioned backend contracts are allowed, near-real-time preview interactions are required, and Docker/CI can include a Node build stage.
It also preserves current behavior during migration by introducing /api/v2 + /ws/v2 in parallel with existing routes before switching traffic.

Steps

1. Define frontend shell and build pipeline: add a new SPA workspace under app/frontend, configure Vite, TypeScript, linting, and route static build output through FastAPI from main.py, plus Docker multi-stage build updates in Dockerfile and compose updates in docker-compose.yml.
2. Introduce typed API/WS v2 contracts: add request/response/event schemas and versioned endpoints in gcode.py (and related models module), preserving current endpoints for compatibility; make event payloads incremental-friendly (phase progress + optional path chunks) instead of always full arrays.
3. Build modular frontend architecture: implement feature-sliced structure in app/frontend/src with api, store, features/settings, features/path-preview, workers/render, and components; centralize state updates in a predictable store (e.g., Zustand/Redux Toolkit) to replace global mutable state patterns currently in script.js.
4. Implement high-performance path preview engine: render large path sets via Canvas worker pipeline (Web Worker + OffscreenCanvas fallback strategy), with viewport transforms, throttled updates, and selective redraw regions; map WS phase events to preview layers (original/filter/greedy/two-opt/final) so users can toggle and inspect optimization stages interactively.
5. Add interactive settings system (non-vectorization MVP): implement generic, schema-driven settings panels (debounced inputs, optimistic UI state, explicit apply/auto-apply modes) that can drive backend recompute and preview refresh; include extension hooks for future vectorization settings without wiring vectorization logic now.
6. Migrate UI features incrementally: port upload/progress/download controls from index.html and script.js, then retire legacy static UI once parity is reached; keep temporary feature flag/route switch for rollback.
7. Stabilize contracts and docs: document v2 API/WS event schemas and frontend module boundaries in README.md, including performance limits, event sequencing, and extension guidelines for future complex preview features.

Verification

• Run backend tests and add contract-focused tests for v2 routes/events (including event ordering and payload shape).
• Add frontend unit tests for state/event reducers and interaction flows; add rendering smoke tests for large path datasets.
• Execute end-to-end checks: upload → live phase preview updates → final preview → download.
• Performance gates: confirm smooth interaction target on representative large jobs (no full-canvas blocking redraw on each state change).
• Backward compatibility check: existing /upload, /ws/{job_id}, /download/{job_id} behavior remains intact during transition.

Decisions

• Chose React + TypeScript + Vite for long-term maintainability under complex interactive UI growth.
• Chose versioned /api/v2 and /ws/v2 to avoid breaking current users while enabling cleaner typed contracts.
• Scoped out vectorization implementation for now, but designed settings/preview architecture to support it later without refactor.