Implement Chart.js visualizations for metrics

[TonsOfFun]

Description

Create interactive charts and graphs for visualizing agent performance metrics using Chart.js.

Chart Types to Implement

• Line charts for time-series data (latency, token usage)
• Bar charts for comparisons (agent performance)
• Pie/Donut charts for distributions (model usage, costs)
• Scatter plots for correlations
• Real-time updating charts

Metrics to Visualize

• Response time trends (p50, p95, p99)
• Token usage over time
• Cost breakdown by agent/model
• Error rate patterns
• Success/failure ratios
• Agent utilization rates

Stimulus Controllers

• chart_controller.js - Base chart functionality
• live_chart_controller.js - Real-time updates
• chart_export_controller.js - Export as image/PDF

Features

• Interactive tooltips
• Zoom and pan
• Date range selection
• Chart type switching
• Export functionality
• Responsive design

Acceptance Criteria

• Charts render correctly
• Data updates smoothly
• Interactions are responsive
• Charts are mobile-friendly