Modular React-based UI with versioned v2 API

[Copilot]

Moves the UI from a monolithic static page to a React + TypeScript + Vite SPA with typed backend contracts, while preserving all legacy routes for backward compatibility.

Backend

• app/models.py — Pydantic schemas for all v2 request/response/WS event types
• app/routers/gcode_v2.py — /api/v2 endpoints: upload, upload-svg, job status, download, settings JSON schema, WebSocket optimization
• app/main.py — Mounts v2 router and serves React SPA at /v2; legacy /, /upload, /ws/{job_id}, /download/{job_id} untouched

Frontend (app/frontend/)

• Vite + React 19 + TypeScript + Zustand store with typed WS event reducers
• Feature-sliced: api/, store/, features/settings/, features/path-preview/, features/upload/, components/
• Canvas path preview with 6 toggleable layers (original → final), auto-viewport, high-DPI, travel move rendering
• Settings panel with debounced inputs and localStorage persistence

Infrastructure

• Multi-stage Dockerfile (Node build → Python runtime)
• .gitignore updated for node_modules/ and dist/

Tests

• 11 backend contract tests (v2 typed responses + v1 backward compat)
• 20 frontend unit tests (store reducers, all WS event types, layer toggling)

Screenshot

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Modular React-based UI</issue_title>
<issue_description>## 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.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Modular React-based UI #3

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.