ExchangeDetail (/exchanges/:id): exchange header card with ID/route/
status/duration, ProcessorTimeline for the specific exchange, step-by-
step exchange inspector using Collapsible+CodeBlock for headers/body at
each processor step, and error details block for failed exchanges.
AgentHealth (/agents): 6-card system overview strip, 2-column grid of
agent cards (StatusDot, name, version, tps, uptime, last-seen, CPU/mem
usage, active routes), expandable per-agent LineCharts for throughput
and error rate trends. Both pages use AppShell + shared Sidebar layout.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Implements the /routes/:id route with route header card (name, status
badge, description), 5-card KPI strip (total executions, success rate,
p50/p99 latency, inflight count), ProcessorTimeline showing aggregate
processor stats across all executions, filtered DataTable of recent
executions for the route, and error patterns section grouped by
exception class. Uses useParams() to get route ID and navigates to
/exchanges/:id on row click.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Implements the /metrics route with DateRangePicker bar, 5 KPI StatCards
with sparklines (throughput, latency p99, error rate, success rate,
active routes), per-route DataTable with trend sparklines, and a 2x2
chart grid (AreaChart throughput, LineChart latency with SLA threshold,
BarChart errors, AreaChart volume). Uses AppShell + Sidebar + TopBar
layout with mock data from src/mocks/metrics.ts.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- EventFeed severity uses 'running' not 'info' for consistency
- Fix stale SHA reference in design decisions table
- Document StatusDot live/stale/dead token mappings
- Type Tag color prop as semantic union instead of string
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
