refactor(inventory): update Sidebar demo to compound API

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

src/pages/Inventory/sections/LayoutSection.tsx

@@ -1,6 +1,9 @@
 import styles from './LayoutSection.module.css'
 import { Sidebar } from '../../../design-system/layout/Sidebar/Sidebar'
-import type { SidebarApp } from '../../../design-system/layout/Sidebar/Sidebar'
+import { SidebarTree } from '../../../design-system/layout/Sidebar/SidebarTree'
+import type { SidebarTreeNode } from '../../../design-system/layout/Sidebar/SidebarTree'
+import { StatusDot } from '../../../design-system/primitives/StatusDot/StatusDot'
+import { Box, Settings, FileText, ChevronRight } from 'lucide-react'
 import { TopBar } from '../../../design-system/layout/TopBar/TopBar'
 
 // ── DemoCard helper ──────────────────────────────────────────────────────────
@@ -22,42 +25,42 @@ function DemoCard({ id, title, description, children }: DemoCardProps) {
   )
 }
 
-// ── Sample data (hierarchical) ───────────────────────────────────────────────
+// ── Sample tree nodes ────────────────────────────────────────────────────────
 
-const SAMPLE_APPS: SidebarApp[] = [
+const SAMPLE_APP_NODES: SidebarTreeNode[] = [
   {
     id: 'app1',
-    name: 'cameleer-prod',
+    label: 'cameleer-prod',
-    health: 'live' as const,
+    icon: <StatusDot status="live" />,
-    exchangeCount: 14320,
+    badge: '14.3k',
-    routes: [
+    path: '/apps/app1',
-      { id: 'r1', name: 'order-ingest', exchangeCount: 5421 },
+    starrable: true,
-      { id: 'r2', name: 'payment-validate', exchangeCount: 3102 },
+    starKey: 'app:app1',
-    ],
+    children: [
-    agents: [
+      { id: 'app1/r1', label: 'order-ingest', icon: <ChevronRight size={12} />, badge: '5,421', path: '/apps/app1/r1' },
-      { id: 'ag1', name: 'agent-prod-1', status: 'live' as const, tps: 42 },
+      { id: 'app1/r2', label: 'payment-validate', icon: <ChevronRight size={12} />, badge: '3,102', path: '/apps/app1/r2' },
-      { id: 'ag2', name: 'agent-prod-2', status: 'live' as const, tps: 38 },
     ],
   },
   {
     id: 'app2',
-    name: 'cameleer-staging',
+    label: 'cameleer-staging',
-    health: 'stale' as const,
+    icon: <StatusDot status="stale" />,
-    exchangeCount: 871,
+    badge: '871',
-    routes: [
+    path: '/apps/app2',
-      { id: 'r3', name: 'notify-customer', exchangeCount: 2201 },
+    starrable: true,
-    ],
+    starKey: 'app:app2',
-    agents: [
+    children: [
-      { id: 'ag3', name: 'agent-staging-1', status: 'stale' as const, tps: 5 },
+      { id: 'app2/r3', label: 'notify-customer', icon: <ChevronRight size={12} />, badge: '2,201', path: '/apps/app2/r3' },
     ],
   },
   {
     id: 'app3',
-    name: 'cameleer-dev',
+    label: 'cameleer-dev',
-    health: 'dead' as const,
+    icon: <StatusDot status="dead" />,
-    exchangeCount: 42,
+    badge: '42',
-    routes: [],
+    path: '/apps/app3',
-    agents: [],
+    starrable: true,
+    starKey: 'app:app3',
   },
 ]
 
@@ -99,10 +102,19 @@ export function LayoutSection() {
       <DemoCard
         id="sidebar"
         title="Sidebar"
-        description="Navigation sidebar with hierarchical app/route/agent trees, starring, search filter, and bottom links."
+        description="Composable navigation sidebar with sections, tree navigation, and icon-rail collapse mode."
       >
         <div className={styles.sidebarPreview}>
-          <Sidebar apps={SAMPLE_APPS} />
+          <Sidebar>
+            <Sidebar.Header logo={<span style={{ fontSize: 20 }}>&#x1F42A;</span>} title="cameleer" version="v3.2.1" />
+            <Sidebar.Section label="Applications" icon={<Box size={14} />} open={true} onToggle={() => {}} active={false}>
+              <SidebarTree nodes={SAMPLE_APP_NODES} isStarred={() => false} onToggleStar={() => {}} />
+            </Sidebar.Section>
+            <Sidebar.Footer>
+              <Sidebar.FooterLink icon={<Settings size={14} />} label="Admin" />
+              <Sidebar.FooterLink icon={<FileText size={14} />} label="API Docs" />
+            </Sidebar.Footer>
+          </Sidebar>
         </div>
       </DemoCard>