# Plan: Implement dees-statsgrid in DCRouter UI

Command to reread CLAUDE.md: `Read /home/centraluser/eu.central.ingress-2/CLAUDE.md`

## Overview
Replace the current stats cards with the new dees-statsgrid component from @design.estate/dees-catalog for better visualization and consistency.

## Implementation Plan

### 1. Update Overview View (`ops-view-overview.ts`)
- Replace the custom stats cards with dees-statsgrid
- Use appropriate tile types for different metrics:
  - `gauge` for CPU and Memory usage
  - `number` for Active Connections, Total Requests, etc.
  - `trend` for time-series data like requests over time

### 2. Update Network View (`ops-view-network.ts`)
- Replace the current stats cards section with dees-statsgrid
- Configure tiles for:
  - Active Connections (number)
  - Requests/sec (number with trend)
  - Throughput In/Out (number with units)
  - Protocol distribution (percentage)

### 3. Create Consistent Color Scheme
- Success/Normal: #22c55e (green)
- Warning: #f59e0b (amber)
- Error/Critical: #ef4444 (red)
- Info: #3b82f6 (blue)

### 4. Add Interactive Features
- Click actions to show detailed views
- Context menu for refresh, export, etc.
- Real-time updates from metrics data

### 5. Integration Points
- Connect to existing appstate for data
- Use MetricsManager data for real values
- Update on the 1-second refresh interval

## Benefits
- Consistent UI component usage
- Better visual hierarchy
- Built-in responsive design
- More visualization options (gauges, trends)
- Reduced custom CSS maintenance