Add --font-size-min: 12px token to tokens.css. Replace all 10px and 11px
font-size declarations with 12px across 54 CSS module files for improved
readability.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace hand-rolled <table>/<thead>/<tbody> markup in the AgentHealth page
with the existing DataTable composite, using column definitions with custom
render functions for StatusDot, Badge, and MonoText cells. Uses flush prop
for seamless GroupCard integration and pageSize=50 to avoid pagination.
Removes unused table-specific CSS classes (.instanceTable, .instanceRow,
.thStatus, .tdStatus, .instanceRowActive, .instanceCountBadge).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Instance detail now opens in a DetailPanel (slide-in from right)
with Overview and Performance tabs instead of navigating away
- Stat strip matches mock design: 5 cards with colored StatusDot
breakdowns, labeled states (live/stale/dead, healthy/degraded/critical)
- Active Routes shows colored ratio (green/yellow/red) based on state
- Groups renamed to Applications
- StatCard value/detail props now accept ReactNode for rich content
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- EventFeed: 28px icon circles with severity colors, stacked message/timestamp,
search input with clear button, ReactNode message support with searchText field
- Agent Health: timeline wrapped in card panel, instance listing as proper table,
colored Badge pills for live counts, removed shift pill
- Input primitive: onClear prop with × button for all search fields
- Sidebar: Agents section collapsible like Applications, collapse state persisted
to localStorage
- FilterBar/Sidebar: clear buttons on all search inputs
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add URL-driven Agent Health page (/agents, /agents/:appId,
/agents/:appId/:instanceId) that progressively narrows from all
applications to a single instance with trend charts. Create
generic GroupCard composite for grouping instances by application.
Expand mock data to 8 instances across 4 apps with varied states.
Split sidebar Agents header into navigable link + collapse chevron.
Update agent tree paths to /agents/:appId/:instanceId. Add EventFeed
with lifecycle events. Change SidebarAgent.tps from string to number.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
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>
