feat: redesign Sidebar with hierarchical trees, starring, and collapsible sections

Replace flat app/route/agent lists with expandable tree navigation.
Apps contain their routes and agents hierarchically. Add localStorage-
backed starring with composite keys for uniqueness. Persist expand
state to sessionStorage across page navigations. Add collapsible
section headers, remove button on starred items, and parent app
context labels. Create stub pages for /apps/:id, /agents/:id,
/admin, /api-docs. Consolidate duplicated sidebar data into
shared mock. Widen sidebar from 220px to 260px.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/pages/ExchangeDetail/ExchangeDetail.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react'
+import { useMemo } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
 import styles from './ExchangeDetail.module.css'
 
@@ -21,22 +21,7 @@ import { InfoCallout } from '../../design-system/primitives/InfoCallout/InfoCall
 
 // Mock data
 import { exchanges } from '../../mocks/exchanges'
-import { routes } from '../../mocks/routes'
-import { agents } from '../../mocks/agents'
-
-// ─── Sidebar data (shared) ────────────────────────────────────────────────────
-const APPS = [
-  { id: 'order-service', name: 'order-service', agentCount: 2, health: 'live' as const, exchangeCount: 1433 },
-  { id: 'payment-svc', name: 'payment-svc', agentCount: 1, health: 'live' as const, exchangeCount: 912 },
-  { id: 'shipment-tracker', name: 'shipment-tracker', agentCount: 2, health: 'live' as const, exchangeCount: 471 },
-  { id: 'notification-hub', name: 'notification-hub', agentCount: 1, health: 'stale' as const, exchangeCount: 128 },
-]
-
-const SIDEBAR_ROUTES = routes.slice(0, 3).map((r) => ({
-  id: r.id,
-  name: r.name,
-  exchangeCount: r.exchangeCount,
-}))
+import { SIDEBAR_APPS } from '../../mocks/sidebar'
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 function formatDuration(ms: number): string {
@@ -119,28 +104,15 @@ function generateExchangeSnapshot(
 export function ExchangeDetail() {
   const { id } = useParams<{ id: string }>()
   const navigate = useNavigate()
-  const [activeItem, setActiveItem] = useState('')
 
   const exchange = useMemo(() => exchanges.find((e) => e.id === id), [id])
 
-  function handleItemClick(itemId: string) {
-    setActiveItem(itemId)
-    const route = routes.find((r) => r.id === itemId)
-    if (route) navigate(`/routes/${itemId}`)
-  }
-
   // Not found state
   if (!exchange) {
     return (
       <AppShell
         sidebar={
-          <Sidebar
-            apps={APPS}
-            routes={SIDEBAR_ROUTES}
-            agents={agents}
-            activeItem={activeItem}
-            onItemClick={handleItemClick}
-          />
+          <Sidebar apps={SIDEBAR_APPS} />
         }
       >
         <TopBar
@@ -166,13 +138,7 @@ export function ExchangeDetail() {
   return (
     <AppShell
       sidebar={
-        <Sidebar
-          apps={APPS}
-          routes={SIDEBAR_ROUTES}
-          agents={agents}
-          activeItem={activeItem}
-          onItemClick={handleItemClick}
-        />
+        <Sidebar apps={SIDEBAR_APPS} />
       }
     >
       {/* Top bar */}