[Step 12] Scaffold Vite SPA dashboard (login + projects + requests + approvals + audit)

[haydercyber]

Goal — REFACTOR_PLAN.md Step 12

Scaffold the developer/admin dashboard as a React + TypeScript + Vite SPA (per BRD §13 FR-13 — explicitly NOT SSR). Talks only to the Control Plane API.

Scope

• Vite + React 18 + TypeScript project, ESLint + Prettier
• Typed API client generated from the OpenAPI spec (or hand-written types if OpenAPI lands later)
• Auth: OIDC (PKCE) — pluggable to GitHub / Google / corporate SAML
• Routes:
  • Login / SSO callback
  • Projects & environments
  • Provider connections (metadata only — never credentials)
  • Secret mappings (metadata only)
  • Developer: new access/update request form
  • Approver: approval queue
  • Audit log viewer (filter by actor / action / resource / time / correlation_id)
  • Sync status dashboard (last run, version, drift)
  • Agent health
  • Conflict / drift view
• Container image (nginx + built static assets, runs as non-root, reads-only FS)
• Helm chart deploys it; ingress + TLS handled by the chart

Acceptance criteria

• npm run build produces a static bundle <500 KB gzipped for the initial route
• All 9 view areas render with seeded fixtures
• No secret value or provider credential is ever stored in localStorage / sessionStorage / Redux state (FR-04, §15 Frontend boundary)
• API client refuses to send requests over plain HTTP outside of localhost (NFR-01)

Hard rules (BRD)

• SPA only, no SSR (FR-13, NFR-10, §23)
• Never store provider credentials or secret values in the browser (§15 Frontend boundary, §24)

References

• BRD §13 FR-13, NFR-10, §15, §24, §23 (Frontend decision)
• CLAUDE.md "Frontend (ui)"
• REFACTOR_PLAN §6 row 12

Dependencies

• Step 4 (api scaffold) for the API surface