# 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](../README.md).

## Develop

From this directory:

```bash
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.