|
1 | 1 | # Architecture — csc-webui |
2 | 2 |
|
3 | 3 | ## Overview |
| 4 | + |
4 | 5 | - **Frontend only**: React + TypeScript (Vite). |
5 | 6 | - **Design system**: minimal, accessible (Tailwind in P0·C1). |
6 | 7 | - **Data layer**: small fetch/axios wrapper targeting `/api/v1/*`. |
7 | 8 | - **Packaging**: `dist/` → `ui_static.tar.gz` for optional CSC embedding. |
8 | 9 |
|
9 | 10 | ## Modules (planned) |
| 11 | + |
10 | 12 | - `api/` — typed client for `spec/*`, `runs*`, `summarize`, `replay`. |
11 | 13 | - `routes/` — `/builder`, `/runs`, `/replay`, `/about`. |
12 | 14 | - `builder/` — MVP: hierarchical form; later: graph editor. |
13 | 15 | - `replay/` — timeline renderer; playback throttle. |
14 | 16 | - `components/` — small, composable UI primitives. |
15 | 17 |
|
16 | 18 | ## Config |
| 19 | + |
17 | 20 | - `VITE_CSC_BASE_URL` — API root (e.g., `http://localhost:8080/api/v1`). |
18 | 21 | - `VITE_CSC_TOKEN` — optional bearer for endpoints requiring auth. |
19 | 22 |
|
20 | 23 | ## Guardrails |
| 24 | + |
21 | 25 | - No direct coupling to CSC internals; only the HTTP contract. |
22 | 26 | - All calls go through the API client; no stray `fetch()` in components. |
23 | 27 | - Semantic commits; version tags parallel to CSC. |
24 | 28 |
|
25 | 29 | ## API Client (Phase 1) |
| 30 | + |
26 | 31 | - All HTTP lives in `src/api/` with a small axios wrapper. |
27 | 32 | - Env: `VITE_CSC_BASE_URL`, `VITE_CSC_TOKEN`, optional `VITE_CSC_USE_MOCK=true`. |
28 | 33 | - Response shape is normalized to `{ ok, status, data }` or `{ ok:false, status, message }`. |
29 | 34 | - Mock mode serves JSON from `/mock-data/*` when the API is unavailable. |
| 35 | + |
30 | 36 | ## Spec Builder (Phase 2) |
| 37 | + |
31 | 38 | - Authoring types in `src/spec/`. |
32 | 39 | - Conversion `authoring → draft` via `src/spec/convert.ts`. |
33 | 40 | - `/builder` provides navigator, editor forms, and an output panel with Normalize. |
|
0 commit comments