feat: add ButtonGroup, theme toggle, dark theme fixes, remove shift references

- Add ButtonGroup primitive: multi-select toggle with colored dot indicators
- Replace FilterPill status filters with ButtonGroup in TopBar and EventFeed
- Add light/dark mode toggle to TopBar (moon/sun icon)
- Fix dark theme: add --purple/--purple-bg tokens, replace all hardcoded
  #F3EEFA/#7C3AED with tokens, fix --amber-light text contrast in sidebar,
  brighten --sidebar-text/--sidebar-muted tokens, use color-mix for
  ProcessorTimeline bar fills
- Remove all "shift" references (presets, labels, badges)
- Shrink SegmentedTabs height to match search bar and ButtonGroup
- Update COMPONENT_GUIDE.md with new components and updated descriptions
- Add ButtonGroup demo to Inventory
- Add README.md with setup instructions and navigation guide

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

COMPONENT_GUIDE.md

@@ -55,7 +55,8 @@
 - Categorical comparison → **BarChart**
 - Inline trend → **Sparkline**
 - Event log → **EventFeed**
-- Processing pipeline → **ProcessorTimeline**
+- Processing pipeline (Gantt view) → **ProcessorTimeline**
+- Processing pipeline (flow diagram) → **RouteFlow**
 
 ### "I need to organize content"
 - Collapsible sections (standalone) → **Collapsible**
@@ -77,11 +78,13 @@
 - Single user avatar → **Avatar**
 - Stacked user avatars → **AvatarGroup**
 
-### "I need to group buttons"
-- Connected button strip (toggle group, segmented control) → **ButtonGroup** (horizontal or vertical)
+### "I need to group buttons or toggle selections"
+- Multi-select toggle group with colored indicators → **ButtonGroup** (e.g., status filters)
+- Tab switching with pill/segment style → **SegmentedTabs**
 
 ### "I need filtering"
-- Filter pill/chip → **FilterPill**
+- Multi-select status/category filter → **ButtonGroup** (toggle items on/off)
+- Filter pill/chip → **FilterPill** (individual toggleable pills)
 - Full filter bar with search → **FilterBar**
 - Select multiple from a list → **MultiSelect**
 
@@ -114,9 +117,11 @@ Below: charts (AreaChart, LineChart, BarChart)
 
 ### Detail/inspector pattern
 ```
-DetailPanel (right slide) with Tabs for sections
-  Each tab: Cards with data, CodeBlock for payloads,
-  ProcessorTimeline for exchange flow
+DetailPanel (right slide) with Tabs for sections OR children for scrollable content
+  Tabbed: use tabs prop for multiple panels
+  Scrollable: use children for stacked sections (overview, errors, route flow, timeline)
+  Each section: Cards with data, CodeBlock for payloads,
+  ProcessorTimeline or RouteFlow for exchange flow
 ```
 
 ### Feedback flow
@@ -156,7 +161,7 @@ URL-driven progressive filtering: /agents → /agents/:appId → /agents/:appId/
 | BarChart | composite | Categorical data comparison, optional stacking |
 | Breadcrumb | composite | Navigation path showing current location |
 | Button | primitive | Action trigger (primary, secondary, danger, ghost) |
-| ButtonGroup | primitive | Groups buttons into a connected strip with shared borders (horizontal/vertical) |
+| ButtonGroup | primitive | Multi-select toggle group with optional colored dot indicators. Props: items (value, label, color?), value (Set), onChange |
 | Card | primitive | Content container with optional accent border |
 | Checkbox | primitive | Boolean input with label |
 | CodeBlock | primitive | Syntax-highlighted code/JSON display |
@@ -166,7 +171,7 @@ URL-driven progressive filtering: /agents → /agents/:appId → /agents/:appId/
 | DataTable | composite | Sortable, paginated data table with row actions. Use `flush` prop when embedded inside a container that provides its own border/radius |
 | DateRangePicker | primitive | Date range selection with presets |
 | DateTimePicker | primitive | Single date/time input |
-| DetailPanel | composite | Slide-in side panel with tabs |
+| DetailPanel | composite | Slide-in side panel with tabs or children for scrollable content |
 | Dropdown | composite | Action menu triggered by any element |
 | EmptyState | primitive | Placeholder for empty content areas |
 | EventFeed | composite | Chronological event log with severity |
@@ -186,7 +191,8 @@ URL-driven progressive filtering: /agents → /agents/:appId → /agents/:appId/
 | MonoText | primitive | Inline monospace text (xs, sm, md) |
 | Pagination | primitive | Page navigation controls |
 | Popover | composite | Click-triggered floating panel with arrow |
-| ProcessorTimeline | composite | Pipeline exchange visualization |
+| ProcessorTimeline | composite | Gantt-style pipeline visualization with selectable rows. Props: processors, totalMs, onProcessorClick?, selectedIndex? |
+| RouteFlow | composite | Vertical processor node flow diagram with status coloring, connectors, and click support. Props: nodes, onNodeClick?, selectedIndex? |
 | ProgressBar | primitive | Determinate/indeterminate progress indicator |
 | RadioGroup | primitive | Single-select option group (use with RadioItem) |
 | RadioItem | primitive | Individual radio option within RadioGroup |
@@ -212,8 +218,8 @@ URL-driven progressive filtering: /agents → /agents/:appId → /agents/:appId/
 | Component | Purpose |
 |-----------|---------|
 | AppShell | Page shell: sidebar + topbar + main + optional detail panel |
-| Sidebar | Hierarchical navigation with Applications/Agents trees, starring, search filter, bottom links. Props: `apps: SidebarApp[]` (hierarchical — apps contain routes and agents) |
-| TopBar | Header bar with breadcrumb, environment, user info |
+| Sidebar | Hierarchical navigation with Applications/Agents/Routes trees, starring, search filter, bottom links. Props: `apps: SidebarApp[]` (hierarchical — apps contain routes and agents) |
+| TopBar | Header bar with breadcrumb, search trigger, ButtonGroup status filters, time range selector, theme toggle, environment badge, user avatar |
 
 ## Import Paths