# Mimic frontend

React + TypeScript SPA for the Mimic BAS platform. Lives behind the existing
RT reverse proxy (Caddy + TLS + IP allowlist) — see D-007.

## Stack

- React 19, TypeScript strict
- Vite 8 (dev/build)
- Tailwind 4 (semantic tokens in `src/styles/theme.css`)
- TanStack Query 5 for server state
- react-router-dom v7 for routing
- Recharts for the report visualisations
- Vitest + Testing Library for unit tests
- Playwright for E2E (covered in sprint 1+)

## Scripts

```bash
npm install
npm run dev          # vite dev server on :5173
npm run build        # tsc -b && vite build
npm run typecheck    # tsc -b --noEmit
npm run lint         # eslint . (strict TS + react-hooks + prettier)
npm run format       # prettier --write .
npm test             # vitest run
npm run e2e          # playwright test (needs npm run e2e:install once)
```

## Layout

```
src/
├── components/
│   ├── brand/        # Wordmark (provisional, awaits PR3 charter)
│   ├── shell/        # AppShell, Sidebar, StatusRail
│   └── ui/           # Panel, Pill, Button — instrument-grade primitives
├── mocks/            # sprint 0 fixtures (no backend yet)
├── router/           # RootLayout helper
├── screens/          # one folder per top-level route
├── session/          # mock auth context (D-003 v1 hook-in point)
├── styles/           # theme.css (tokens), fonts.css, globals.css
└── types/            # cross-cutting type aliases
```

## Design system status (provisional)

The token layer in `src/styles/theme.css` is structured to receive the RT
graphic charter (PR3) without touching component code. Component CSS reads
exclusively from semantic tokens (`--accent-rt`, `--status-detected`, …);
swapping the underlying primitive palette is the only change required when
PR3 lands.

## Auth status (sprint 0)

The session context reads/writes a mock user in `sessionStorage`. No real
auth yet. v1 will wire local username/password + bcrypt (D-003); v2 maps
Keycloak OIDC claims onto the same role enum.

## Fonts

IBM Plex (Sans / Sans Condensed / Mono), self-hosted under `public/fonts/`.
Files are not yet vendored — see `public/fonts/README.md`. Until then the
UI falls back to `ui-sans-serif` / `ui-monospace`.