feat: Agent Health page with progressive filtering and GroupCard component

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>

src/pages/Inventory/sections/CompositesSection.tsx

@@ -13,6 +13,7 @@ import {
   Dropdown,
   EventFeed,
   FilterBar,
+  GroupCard,
   LineChart,
   MenuItem,
   Modal,
@@ -430,6 +431,25 @@ export function CompositesSection() {
           </div>
         </DemoCard>
 
+        {/* 11b. GroupCard */}
+        <DemoCard
+          id="groupcard"
+          title="GroupCard"
+          description="Generic card with header, meta row, children, and optional footer. Used for grouping instances by application."
+        >
+          <div style={{ maxWidth: 500 }}>
+            <GroupCard
+              title="order-service"
+              accent="success"
+              headerRight={<span style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--text-muted)', background: 'var(--bg-inset)', padding: '2px 8px', borderRadius: 10 }}>3 instances</span>}
+              meta={<div style={{ display: 'flex', gap: 16, fontSize: 11, color: 'var(--text-muted)' }}><span><strong>34.4</strong> msg/s</span><span><strong>9</strong>/9 routes</span></div>}
+              footer={undefined}
+            >
+              <div style={{ padding: '8px 16px', fontSize: 12, color: 'var(--text-secondary)' }}>Instance rows go here</div>
+            </GroupCard>
+          </div>
+        </DemoCard>
+
         {/* 12. FilterBar */}
         <DemoCard
           id="filterbar"

src/pages/Inventory/sections/LayoutSection.tsx

@@ -35,8 +35,8 @@ const SAMPLE_APPS: SidebarApp[] = [
       { id: 'r2', name: 'payment-validate', exchangeCount: 3102 },
     ],
     agents: [
-      { id: 'ag1', name: 'agent-prod-1', status: 'live' as const, tps: '42 tps' },
-      { id: 'ag2', name: 'agent-prod-2', status: 'live' as const, tps: '38 tps' },
+      { id: 'ag1', name: 'agent-prod-1', status: 'live' as const, tps: 42 },
+      { id: 'ag2', name: 'agent-prod-2', status: 'live' as const, tps: 38 },
     ],
   },
   {
@@ -48,7 +48,7 @@ const SAMPLE_APPS: SidebarApp[] = [
       { id: 'r3', name: 'notify-customer', exchangeCount: 2201 },
     ],
     agents: [
-      { id: 'ag3', name: 'agent-staging-1', status: 'stale' as const, tps: '5 tps' },
+      { id: 'ag3', name: 'agent-staging-1', status: 'stale' as const, tps: 5 },
     ],
   },
   {