Milestone 3.8.5 — Analytics Dashboard

Status: Planned
Goal: 3.8 — Operator dashboard
Phase: 3 — Memory Engine and Operator Platform
Estimated effort: 3–4 days

Deliverables

Dashboard home: summary cards + sparklines

TypeScript

// src/app/dashboard/page.tsx
// Summary cards (last 7 days):
//   Total Requests | Total Tokens | Avg Latency (p95) | Active Agents
//   Each with a sparkline (7-day trend) using Recharts

Usage chart: token spend over time

TypeScript

// src/components/analytics/UsageChart.tsx
// Recharts LineChart
// X-axis: time (hour/day/week depending on date range selected)
// Y-axis: tokens (input + output stacked area)
// Date range picker: Last 24h | 7d | 30d | Custom
// Filter by agent (dropdown, optional)

Latency histogram

TypeScript

// src/components/analytics/LatencyHistogram.tsx
// Recharts BarChart — distribution of proxy_overhead_ms
// Percentile lines: p50, p95, p99 overlaid as reference lines
// Shows how close to the 20ms target the system is operating

Model breakdown pie chart

TypeScript

// src/components/analytics/ModelBreakdownPie.tsx
// Recharts PieChart — request count % by model
// Subtitle: token spend % by model

Acceptance Criteria

All charts load with real data from analytics API
Date range selection updates all charts simultaneously
Latency histogram shows p99 reference line at 20ms target
Charts are responsive (work at 1024px and 1440px widths)
Loading skeletons shown while data fetches