feat: add SegmentedTabs, custom DateTimePicker, redesign time range selector

New components:
- SegmentedTabs — pill-style tabs with sliding animated indicator,
  trailing slot for custom content, MutationObserver for dynamic resizing
- Custom DateTimePicker — replaces native datetime-local with calendar
  grid, hour/minute inputs, Now/Apply buttons, portal dropdown

Time range selector redesign:
- Uses SegmentedTabs with inline from/to DateTimePicker triggers
- "now" shown as clickable placeholder when to-date is not explicitly set
- Preset selection keeps to-date as "now" until user sets it
- No more "Custom" button — last tab is the live date range

Other improvements:
- FilterPill gains activeColor prop for status-colored active states
- TopBar and EventFeed status pills now use colored dots + activeColor
- Inventory nav expanded to full component-level table of contents
- COMPONENT_GUIDE.md updated with new components
- DateRangePicker test updated for custom DateTimePicker

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

COMPONENT_GUIDE.md

@@ -10,6 +10,7 @@
 - Page-level attention banner → **Alert**
 - Temporary non-blocking feedback → **Toast** (via `useToast`)
 - Destructive action confirmation → **AlertDialog**
+- Destructive action needing typed confirmation → **ConfirmDialog**
 - Generic dialog with custom content → **Modal**
 
 ### "I need a form input"
@@ -19,6 +20,8 @@
 - Yes/no with label → **Checkbox**
 - One of N options (≤5) → **RadioGroup** + **RadioItem**
 - One of N options (>5) → **Select**
+- Select multiple from a list → **MultiSelect**
+- Edit text inline without a form → **InlineEdit**
 - Date/time → **DateTimePicker**
 - Date range → **DateRangePicker**
 - Wrap any input with label/error/hint → **FormField**
@@ -58,6 +61,7 @@
 - Collapsible sections (standalone) → **Collapsible**
 - Multiple collapsible sections (one/many open) → **Accordion**
 - Tabbed content → **Tabs**
+- Tab switching with pill/segment style → **SegmentedTabs**
 - Side panel inspector → **DetailPanel**
 - Section with title + action → **SectionHeader**
 - Empty content placeholder → **EmptyState**
@@ -79,6 +83,7 @@
 ### "I need filtering"
 - Filter pill/chip → **FilterPill**
 - Full filter bar with search → **FilterBar**
+- Select multiple from a list → **MultiSelect**
 
 ## Composition Patterns
 
@@ -157,6 +162,7 @@ URL-driven progressive filtering: /agents → /agents/:appId → /agents/:appId/
 | CodeBlock | primitive | Syntax-highlighted code/JSON display |
 | Collapsible | primitive | Single expand/collapse section |
 | CommandPalette | composite | Full-screen search and command interface |
+| ConfirmDialog | composite | Type-to-confirm destructive action dialog built on Modal. Props: open, onClose, onConfirm, title, message, confirmText, confirmLabel, cancelLabel, variant, loading, className |
 | 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 |
@@ -169,12 +175,14 @@ URL-driven progressive filtering: /agents → /agents/:appId → /agents/:appId/
 | FilterPill | primitive | Individual filter chip (active/inactive), supports forwardRef |
 | FormField | primitive | Wrapper adding label, hint, error to any input |
 | InfoCallout | primitive | Inline contextual note with variant colors |
+| InlineEdit | primitive | Click-to-edit text field. Enter saves, Escape/blur cancels. Props: value, onSave, placeholder, disabled, className |
 | Input | primitive | Single-line text input with optional icon |
 | KeyboardHint | primitive | Keyboard shortcut display |
 | Label | primitive | Form label with optional required asterisk |
 | LineChart | composite | Time series line visualization |
 | MenuItem | composite | Sidebar navigation item with health/count |
 | Modal | composite | Generic dialog overlay with backdrop |
+| MultiSelect | composite | Dropdown with searchable checkbox list and Apply action. Props: options, value, onChange, placeholder, searchable, disabled, className |
 | MonoText | primitive | Inline monospace text (xs, sm, md) |
 | Pagination | primitive | Page navigation controls |
 | Popover | composite | Click-triggered floating panel with arrow |
@@ -183,6 +191,7 @@ URL-driven progressive filtering: /agents → /agents/:appId → /agents/:appId/
 | RadioGroup | primitive | Single-select option group (use with RadioItem) |
 | RadioItem | primitive | Individual radio option within RadioGroup |
 | SectionHeader | primitive | Section title with optional action button |
+| SegmentedTabs | composite | Pill-style segmented tab bar with sliding animated indicator. Same API as Tabs but with elevated active state. Props: tabs, active, onChange, trailing, trailingValue, className |
 | Select | primitive | Dropdown select input |
 | ShortcutsBar | composite | Keyboard shortcuts reference bar |
 | Skeleton | primitive | Loading placeholder (text, circular, rectangular) |