Components

Reusable components are organized into three directories under frontend/src/components/.

Layout Components

Located in components/layout/.

Component	Purpose
`Header.tsx`	Top navigation bar with app title, user menu, and auth controls
`Sidebar.tsx`	Left navigation with links to all pages
`Shell.tsx`	Page shell that combines Header + Sidebar + content area

Located in components/shared/. Used across multiple pages.

Component	Purpose
`DonutChart.tsx`	SVG donut chart for health distribution breakdowns
`KPICard.tsx`	Metric card showing a value, label, and optional trend indicator
`Badge.tsx`	Colored badge for severity levels, statuses, and tags
`ScoreBar.tsx`	Horizontal bar showing a 0-100 score with color gradient
`MiniGauge.tsx`	Compact gauge visualization for inline metric display
`Pagination.tsx`	Page navigation controls for list views

Located in components/issues/. Used by the Issues and AI Issues pages.

Component	Purpose
`FilterBar.tsx`	Severity, status, and date range filters for the issues list
`IssueRow.tsx`	Single row in the issues list showing name, cluster, severity, duration
`IssueDetail.tsx`	Full detail panel for a selected issue -- alerts, metrics, recommendations
`AlertTimeline.tsx`	Chronological timeline of alert firing/resolved events for an issue