ClusterCanvas web UI
React 19 + TypeScript + Vite SPA for ClusterCanvas. It talks to the Go API over /api and /health.
For service config, remotedev, and repo-wide build/test targets, see the root README.
Develop
From this directory:
npm install
npm run dev
Or from the repo root: make webui (UI only) or make dev (API + UI).
The Vite dev server listens on :5173 and proxies /api and /health to http://localhost:8080 (see vite.config.ts).
Optional: set VITE_API_BASE_URL if you call the API without the Vite proxy (defaults to http://localhost:8080). An empty value means same-origin requests (used by make remotedev builds).
Scripts
| Script | Purpose |
|---|---|
npm run dev |
Vite dev server with HMR |
npm run build |
Typecheck + production build to dist/ |
npm run preview |
Serve the production build locally |
npm test |
Vitest (jsdom) once |
npm run test:watch |
Vitest in watch mode |
npm run lint |
Oxlint (see .oxlintrc.json) |
App map
Flow: setup wizard → login → main shell.
| Area | Notes |
|---|---|
| Overview | Placeholder for a future dashboard |
| Containers / Docker / VMs | UI categories for manually registered SSH hosts |
| Activity | Node and auth audit logs (when permitted) |
| Profile | Password change and TOTP enroll/disable |
| Configuration | Users, groups, roles catalog, actions, security, network; Integrations / Advanced are placeholders |
Node detail tabs: Overview (metadata), Actions (groups, schedules, run), Logs (action run history).
Key source files
| Path | Role |
|---|---|
src/App.tsx |
Shell, routing state, main screens |
src/api/client.ts |
HTTP client and API types |
src/navigation.ts |
Section / tab / URL helpers |
src/NodeDetailPanel.tsx |
Per-node overview, actions, logs |
src/SetupWizard.tsx |
First-run setup |
Stack
React 19, Vite 8, Vitest + Testing Library, Oxlint. React Compiler is not enabled.