Frontend Dashboard
The frontend is a React single-page application that provides the full user-facing interface for Vega: project setup, source ingest, scan creation, live scan monitoring, findings review, API key management, and account settings.
Stack
| Technology | Version | Role |
|---|---|---|
| React | 18+ | UI component library |
| React Router | v6 | Client-side routing |
| Vite | latest | Development server and build tool |
| Tailwind CSS | v3 | Utility-first styling |
| Cognito client library | — | Authentication in AWS |
Key files
| File | What it does |
|---|---|
frontend/src/App.tsx |
Route definitions — the map of all pages |
frontend/src/api/client.ts |
Central API client for all backend calls |
frontend/src/api/types.ts |
TypeScript types for API request/response shapes |
frontend/src/hooks/useAuth.tsx |
Auth state management (local vs Cognito) |
frontend/src/auth/cognito.ts |
Cognito login flow implementation |
frontend/src/pages/ |
One file per page/route |
frontend/src/components/dashboard/ |
Feature UI components |
frontend/src/components/deepfield/ |
Design system primitives (buttons, inputs, etc.) |
Running the frontend locally
cd frontend
npm install
npm run dev
The Vite dev server starts on http://localhost:5173. It automatically proxies all /v1/* requests to http://localhost:8000, so the frontend talks to the local backend without any CORS configuration.
The backend must be running on port 8000 for API calls to work.
What each section of the UI does
Projects (/projects) — Lists all projects and provides the creation flow. This is the entry point for new security work.
Repository setup (/repositories/:id/setup) — Guides the user through connecting source code (git URL or upload) and reviewing ingest status.
Source view (/repositories/:id/source) — Displays the file tree of the ingested source. Useful for verifying the right code was captured.
Threat profile (/repositories/:id/threat-profile) — Editor for describing the application and what risks to focus on.
Scans (/repositories/:id/scans) — Scan history, live scan feed for running scans, and scan creation.
Findings (/repositories/:id/findings) — Security findings for this repository with severity filters and triage actions.
Findings inbox (/findings) — Cross-project view of all open findings.
API keys (/api-keys) — Create and revoke programmatic API keys.
Billing (/billing) — Usage and cost summary.
Settings (/settings) — Account settings.