# Monitoring Components

This directory contains monitoring components that have been refactored to use standardized UI components with a consistent dark theme.

## Standardized Components

### StatusBadge
Used for displaying status indicators with consistent styling:
- `ConnectionStatus` - Shows connected/disconnected state
- `HealthStatus` - Shows healthy/unhealthy state  
- `ServiceStatusIndicator` - Shows service status as a colored dot

### MetricCard
Displays metrics with optional progress bars in a consistent card layout.

### Cards
- `ServiceCard` - Displays individual service status
- `DatabaseCard` - Displays database connection info
- `SystemHealthCard` - Shows system health overview
- `CacheStatsCard` - Shows cache statistics
- `ProxyStatsCard` - Shows proxy status
- `QueueStatsTable` - Displays queue statistics in a table

## Theme Colors

All components now use the standardized color palette from the Tailwind config:
- Background: `bg-surface-secondary` (dark surfaces)
- Borders: `border-border`
- Text: `text-text-primary`, `text-text-secondary`, `text-text-muted`
- Status colors: `text-success`, `text-danger`, `text-warning`
- Primary accent: `text-primary-400`, `bg-primary-500/10`

## Utilities

Common formatting functions are available in `utils/formatters.ts`:
- `formatUptime()` - Formats milliseconds to human-readable uptime
- `formatBytes()` - Formats bytes to KB/MB/GB
- `formatNumber()` - Adds thousand separators
- `formatPercentage()` - Formats numbers as percentages