Visualize Agent Metrics in Dashboard

**Parent Issue:** #195

## Objective
Create comprehensive dashboard visualization for A2A agent metrics, performance, and business intelligence.

## Quick Links
- **Strands Multi-Agent Documentation**: https://strandsagents.com/latest/documentation/docs/user-guide/concepts/multi-agent/agent-to-agent/
- **AWS Bedrock AgentCore A2A Runtime**: https://docs.aws.amazon.com/bedrock-agentcore/latest/devguide/runtime-a2a.html

## Dashboard Architecture

### Frontend Components (React/TypeScript)
- Real-time metrics display
- Interactive charts and graphs
- Agent performance comparison
- Booking funnel visualization
- System health monitoring
- Alert notifications

## Dashboard Pages

### 1. Overview Dashboard
Displays system-wide health and key metrics at a glance.

**Components:**
- **Key Metrics Cards**:
- Total agents online
- Active bookings in last hour
- System uptime
- Average response time

- **System Health Gauge**:
- Overall system status (healthy, warning, critical)
- Agent availability status
- Database performance
- Registry response time

- **Revenue Summary**:
- Today's revenue
- Yesterday's revenue
- Weekly trend
- Monthly projection

**Code Example:**
```typescript
interface OverviewMetrics {
totalAgentsOnline: number;
activeBookings: number;
systemUptime: number;
avgResponseTime: number;
todayRevenue: number;
yesterdayRevenue: number;
}

const OverviewDashboard: React.FC = () => {
const [metrics, setMetrics] = useState(null);

useEffect(() => {
const fetchMetrics = async () => {
const response = await fetch('/api/metrics/summary');
setMetrics(await response.json());
};

const interval = setInterval(fetchMetrics, 5000); // Refresh every 5s
fetchMetrics();

return () => clearInterval(interval);
}, []);

if (!metrics) return

;

return (

);
};
```

### 2. Agent Performance Dashboard
Detailed metrics for individual agents.

**Components:**
- **Agent Selection Dropdown**: Choose which agent to analyze
- **Performance Metrics Panel**:
- Response time (p50, p95, p99)
- Throughput (calls/min)
- Error rate
- Success rate

- **Time Series Charts**:
- Response time trends (hourly, daily, weekly)
- Error rate over time
- Throughput trends
- Availability timeline

- **Comparative View**:
- Compare performance across multiple agents
- Benchmark against average
- Identify outliers

**Code Example:**
```typescript
interface AgentPerformance {
agentName: string;
responseTimeP50: number;
responseTimeP95: number;
responseTimeP99: number;
throughputPerMin: number;
errorRate: number;
successRate: number;
}

const AgentPerformanceDashboard: React.FC = () => {
const [selectedAgent, setSelectedAgent] = useState('');
const [performance, setPerformance] = useState(null);

useEffect(() => {
if (!selectedAgent) return;

const fetchPerformance = async () => {
const response = await fetch(`/api/metrics/agent/${selectedAgent}`);
setPerformance(await response.json());
};

fetchPerformance();
const interval = setInterval(fetchPerformance, 10000);

return () => clearInterval(interval);
}, [selectedAgent]);

return (

);
};
```

### 3. Booking Funnel Dashboard
Tracks conversion through booking stages.

**Components:**
- **Funnel Visualization**:
- Searches initiated
- Trip plans created
- Bookings confirmed
- Payments processed
- Cancellations
- Conversion percentages between stages

- **Metrics by Stage**:
- Users at each stage
- Drop-off analysis
- Time spent per stage
- Common abandonment reasons

- **Trend Analysis**:
- Daily conversion rates
- Weekly trends
- Seasonal patterns
- Impact of marketing campaigns

**Code Example:**
```typescript
interface BookingFunnel {
searches: number;
tripPlans: number;
bookingsConfirmed: number;
paymentsProcessed: number;
searchToPlanRate: number;
planToBookingRate: number;
bookingToPaymentRate: number;
}

const BookingFunnelDashboard: React.FC = () => {
const [funnel, setFunnel] = useState(null);

useEffect(() => {
const fetchFunnel = async () => {
const response = await fetch('/api/metrics/booking-funnel');
setFunnel(await response.json());
};

fetchFunnel();
const interval = setInterval(fetchFunnel, 30000); // 30s

return () => clearInterval(interval);
}, []);

if (!funnel) return

;

return (

);
};
```

### 4. System Health Dashboard
Real-time system status and alerts.

**Components:**
- **Service Status Matrix**:
- Travel Assistant Agent status
- Flight Booking Agent status
- Registry service status
- Database health
- Network connectivity

- **Performance Metrics**:
- CPU usage per agent
- Memory consumption
- Disk usage
- Network I/O

- **Active Alerts**:
- Performance alerts
- Error rate alerts
- Resource utilization alerts
- Service unavailability alerts

- **Historical Data**:
- Incident history
- Error logs
- Recovery timeline

**Code Example:**
```typescript
interface ServiceStatus {
name: string;
status: 'healthy' | 'warning' | 'critical' | 'offline';
lastCheck: Date;
uptime: number;
avgLatency: number;
errorCount: number;
}

const SystemHealthDashboard: React.FC = () => {
const [services, setServices] = useState([]);
const [alerts, setAlerts] = useState([]);

useEffect(() => {
const fetchHealth = async () => {
const response = await fetch('/api/health/services');
setServices(await response.json());
};

const fetchAlerts = async () => {
const response = await fetch('/api/alerts/active');
setAlerts(await response.json());
};

fetchHealth();
fetchAlerts();

const interval = setInterval(() => {
fetchHealth();
fetchAlerts();
}, 5000);

return () => clearInterval(interval);
}, []);

return (

);
};
```

### 5. Revenue Analytics Dashboard
Business intelligence for booking revenue.

**Components:**
- **Revenue Summary**:
- Total revenue (today, this week, this month)
- Revenue per agent
- Average booking value
- Revenue trends

- **Charts**:
- Daily revenue bar chart
- Revenue by agent pie chart
- Revenue trends line chart
- Booking volume vs. revenue correlation

- **Insights**:
- Top performing agents by revenue
- Peak booking times
- Customer acquisition cost (CAC)
- Lifetime value (LTV) trends

## UI Components Library

### Reusable Components
```typescript
// MetricCard Component
interface MetricCardProps {
title: string;
value: number | string;
unit?: string;
trend?: 'up' | 'down' | 'stable';
trendValue?: string;
}

const MetricCard: React.FC = ({
title,
value,
unit,
trend,
trendValue
}) => (

);

// Chart Component
interface ChartProps {
data: any[];
title: string;
type: 'line' | 'bar' | 'pie' | 'funnel';
height?: number;
}

const Chart: React.FC = ({ data, title, type, height = 400 }) => (

);
```

## Styling and Theme

### Color Scheme
- **Primary**: Blue (#0066CC)
- **Success**: Green (#00AA00)
- **Warning**: Orange (#FF9900)
- **Critical**: Red (#CC0000)
- **Background**: Light Gray (#F5F5F5)

### Responsive Design
- Mobile: 1-column layout
- Tablet: 2-column layout
- Desktop: 3+ column layout

## Real-Time Updates

### WebSocket Integration
```typescript
const useMetricsWebSocket = (agentName: string) => {
const [metrics, setMetrics] = useState(null);

useEffect(() => {
const ws = new WebSocket(`ws://localhost:5000/metrics/${agentName}`);

ws.onmessage = (event) => {
const data = JSON.parse(event.data);
setMetrics(data);
};

return () => ws.close();
}, [agentName]);

return metrics;
};
```

## Performance Optimization

- **Lazy Loading**: Load components on-demand
- **Debouncing**: Limit API calls during interactions
- **Caching**: Cache metrics for 5-10 seconds
- **Virtual Scrolling**: For large lists of metrics
- **Code Splitting**: Separate dashboard chunks

## Acceptance Criteria
- [ ] Overview dashboard displays real-time metrics
- [ ] Agent performance dashboard with time series data
- [ ] Booking funnel visualization with conversion rates
- [ ] System health dashboard with alerts
- [ ] Revenue analytics dashboard
- [ ] Real-time WebSocket updates
- [ ] Responsive design for mobile/tablet/desktop
- [ ] Performance < 2 second load time
- [ ] All charts interactive and filterable
- [ ] Mobile-optimized views
- [ ] Accessibility (WCAG 2.1 AA)
- [ ] Error handling and loading states