- 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>
