Frontend Overview

The frontend is a single-page application for monitoring BYOC cluster health, investigating issues, and analyzing usage patterns.

Tech Stack

Technology	Version / Notes
React	18
TypeScript	Strict mode
Vite	Build tool and dev server
Tailwind CSS	v4
shadcn/ui	Component primitives
React Router	Client-side routing
Axios	HTTP client with auth interceptors
Supabase Auth	Primary auth, with local JWT fallback

Project Structure

frontend/src/
  api/          # HTTP client (Axios) with auth interceptors
  assets/       # Static assets
  components/   # Reusable UI components
    layout/     # Header, Sidebar, Shell
    shared/     # DonutChart, KPICard, Badge, ScoreBar, etc.
    issues/     # AlertTimeline, FilterBar, IssueRow, IssueDetail
  hooks/        # Custom React hooks
  lib/          # Utility functions
  pages/        # Route-level page components
  types/        # TypeScript type definitions
  App.tsx       # Root component with routing
  main.tsx      # Entry point
  index.css     # Global styles (Tailwind)

Authentication

The app supports two auth modes:

1. Supabase Auth -- Used in production. JWT tokens from Supabase are attached to API requests.
2. Local JWT fallback -- For development and bastion deployment. The backend issues JWTs signed with JWT_SECRET.

The Axios client automatically attaches Authorization: Bearer <token> to all requests and redirects to /login on 401 responses.