feat(ui): add timeline segment selection, xray token histogram, and group logic overhaul

Overhauls the message timeline sidebar with segment-level selection,
token-aware xray histogram bars, and messageId-based grouping — replacing
the previous message-level selection and positional adjacency logic.

## Selection System (SELECTION-SYSTEM)

- Dual-level selection: `selectedTimelineIds` (segment IDs) as the
  source of truth, bridged to `selectedForDeletion` (message IDs) via
  a reactive `createEffect`.
- CTRL+Click: toggles individual segments. Clicking an assistant parent
  with unexpanded tools expands the group and selects all members.
  Re-clicking collapses and deselects.
- SHIFT+Click: range selection. Direction follows anchor state — if the
  anchor is selected the range is additive; if not, subtractive.
- Escape: clears all selection via a global keydown listener.
- Long-press (500ms, 10px jitter tolerance): mobile/touch selection
  via pointer events with context-menu suppression.
- Scroll anchor preservation: captures badge offsetTop before toggling
  visibility, restores scrollTop after layout shift.

## Token Count Fix (TOKEN-COUNT-FIX)

- New `getPartCharCount()` estimates characters for any `ClientPart`.
  Handles text, tool state (input/output/metadata), and content arrays.
- **Skips `filediff` metadata key** — this key contains full before/after
  file content that inflated character counts by 10-100x.
- `totalChars` field added to `TimelineSegment` and `PendingSegment`,
  accumulated during `buildTimelineSegments()`.

## Scroll Performance (SCROLL-PERF)

- Two-tier positioning replaces per-badge `getBoundingClientRect` on
  every scroll event:
  1. `computeBadgeLayout()` — expensive pass, runs once on activation,
     resize, or expansion. Stores `layoutTop` relative to scroll content.
  2. `handleScrollRaf()` — RAF-throttled, reads 1 container rect per
     frame. Derives all badge screen positions arithmetically.
- `clipBounds` subtracts delete toolbar height + 16px gap when toolbar
  is visible, preventing xray bars from overlapping the toolbar.

## Group Logic (GROUP-LOGIC)

- `getAdjacentGroup()`: changed from backward positional walk to
  `segments.filter(s => s.messageId === clicked.messageId)`. Fixes
  cross-message group overlap when consecutive tool segments belong to
  different assistant messages.
- `groupRole()`: checks for sibling tools via `messageId`.
- `isGroupStart()`: checks previous segment's `messageId`.
- Only assistant badges trigger group selection; tool and user badges
  are always standalone.

## Active Highlight (ACTIVE-HIGHLIGHT)

- Renamed `activeMessageId` → `activeSegmentId` (signal, prop, and
  comparison). Clicking a badge now highlights only that specific badge,
  not all badges sharing the same messageId.
- Intersection observer resolves messageId → first segment's id.
- Auto-scroll effect uses segment id directly (no `.find()` lookup).

## XRay Histogram Bars (XRAY-BARS)

- Portal-based overlay with two bars per segment:
  - Relative bar: width = tokens/maxTokens, green-to-red gradient.
  - Absolute bar: width = tokens/10000 (capped), grey, with red glow
    overflow indicator when tokens exceed ABSOLUTE_TOKEN_CAP (10K).
- Token labels as pill-shaped badges (white bg, dark border, 12px font,
  1.5rem height matching badge height) at the left tip of each bar.
- `liveSegmentChars` memo fetches fresh char counts from the message
  store to handle stale tool output that arrived after segment creation.
- `aggregateTokensByMessageId` memo: O(n) pre-computation replacing the
  previous O(n²) per-segment iteration inside `<For>`.
- `clip-path: inset(...)` clips bars at layout edges.

## Delete Toolbar Token Display (TOKEN-TOTAL-IN-TOOLBAR)

- Removed `outputTokensByMessageId` (backend `entry.outputTokens` only
  counted assistant output, missing tool result content entirely).
- `selectedTokenTotal` now sums `seg.totalChars` across all segments
  for each selected messageId, divides by 4. Consistent with xray bars.
- Three color-coded pills: Before (muted, current context), Selection
  (red, tokens being removed), After (green, remaining after deletion).
  Eliminates mental arithmetic for users targeting a context token count.

## Delete Hover Fix

- Removed `selected.has(segment.messageId)` → `return true` from
  `isDeleteHovered()`. The red delete overlay now only activates from
  actual hover interactions (kind === "message" or "deleteUpTo"), not
  from the selection state. This prevents the red overlay from masking
  the blue segment-level selection highlight.

## CSS Changes

- message-selection.css: Restyled toolbar with accent-primary scheme,
  three-pill token group, button variants (--delete, --cancel), hint.
- message-timeline.css: Selection styling (!important overrides), group
  indicators (left border), xray overlay (fixed fullscreen, z-index 40),
  rib/bar/label styles, container layout, stacking context isolation.

## Files Changed

- packages/ui/src/components/message-section.tsx (+345/-197)
- packages/ui/src/components/message-timeline.tsx (+671/-199)
- packages/ui/src/lib/i18n/messages/en/messaging.ts (+1/-2)
- packages/ui/src/styles/messaging/message-selection.css (+107/-34)
- packages/ui/src/styles/messaging/message-timeline.css (+146/-0)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

packages/ui/src/styles/messaging/message-selection.css

@@ -11,37 +11,25 @@
 
 .message-delete-mode-toolbar {
   position: absolute;
-  right: 12px;
-  bottom: 12px;
+  right: 5rem;
+  bottom: 1rem;
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 6px;
-  background: color-mix(in oklab, var(--surface-secondary) 92%, var(--status-error-bg));
-  border: 1px solid var(--border-base);
+  gap: 6px;
+  padding: 6px 10px;
+  background: color-mix(in oklab, var(--surface-base) 62%, var(--accent-primary));
+  border: 1px solid var(--accent-primary);
   border-radius: 12px;
   z-index: 50;
-  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
+  box-shadow:
+    0 0 0 1px color-mix(in oklab, var(--accent-primary) 25%, transparent),
+    0 8px 24px rgba(0, 0, 0, 0.3);
 }
 
-/* Avoid covering the scroll-to-top/bottom floating buttons. */
-.message-layout[data-scroll-buttons="1"] .message-delete-mode-toolbar {
-  bottom: 4.25rem;
-}
-
-.message-layout[data-scroll-buttons="2"] .message-delete-mode-toolbar {
-  bottom: 7.5rem;
-}
-
-/* When timeline is visible, pin the toolbar to the stream edge. */
-.message-layout--with-timeline .message-delete-mode-toolbar {
-  right: calc(64px + 12px);
-}
-
-@media (max-width: 720px) {
-  .message-layout--with-timeline .message-delete-mode-toolbar {
-    right: calc(40px + 12px);
-  }
+.message-delete-mode-token-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
 }
 
 .message-delete-mode-count {
@@ -52,11 +40,38 @@
   justify-content: center;
   padding: 0 8px;
   border-radius: 999px;
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 700;
-  color: var(--text-primary);
-  background: var(--surface-secondary);
-  border: 1px solid var(--border-base);
+  font-variant-numeric: tabular-nums;
+  color: var(--accent-primary);
+  background: color-mix(in oklab, var(--surface-base) 85%, var(--accent-primary));
+  border: 1px solid color-mix(in oklab, var(--accent-primary) 50%, transparent);
+}
+
+.message-delete-mode-count--before {
+  color: var(--text-muted);
+  background: color-mix(in oklab, var(--surface-base) 90%, var(--text-muted));
+  border-color: color-mix(in oklab, var(--text-muted) 30%, transparent);
+}
+
+.message-delete-mode-count--selection {
+  color: var(--status-error);
+  background: color-mix(in oklab, var(--surface-base) 85%, var(--status-error));
+  border-color: color-mix(in oklab, var(--status-error) 40%, transparent);
+}
+
+.message-delete-mode-count--after {
+  color: var(--status-success);
+  background: color-mix(in oklab, var(--surface-base) 85%, var(--status-success));
+  border-color: color-mix(in oklab, var(--status-success) 40%, transparent);
+}
+
+.message-delete-mode-arrow {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text-muted);
+  line-height: 1;
+  user-select: none;
 }
 
 .message-delete-mode-button {
@@ -66,19 +81,45 @@
   align-items: center;
   justify-content: center;
   background: transparent;
-  border: 1px solid var(--border-base);
+  border: 1px solid color-mix(in oklab, var(--accent-primary) 30%, transparent);
   border-radius: 10px;
-  color: var(--text-muted);
-  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
 }
 
 .message-delete-mode-button:hover {
-  background-color: var(--surface-hover);
+  background-color: color-mix(in oklab, var(--accent-primary) 15%, transparent);
+  border-color: var(--accent-primary);
+  color: var(--accent-primary);
+}
+
+.message-delete-mode-button--delete {
+  color: var(--status-error);
+  border-color: color-mix(in oklab, var(--status-error) 30%, transparent);
+}
+
+.message-delete-mode-button--delete:hover {
+  background-color: var(--status-error-bg);
   border-color: var(--status-error);
   color: var(--status-error);
 }
 
+.message-delete-mode-button--cancel:hover {
+  background-color: color-mix(in oklab, var(--text-muted) 12%, transparent);
+  border-color: var(--text-muted);
+  color: var(--text-primary);
+}
+
 .message-delete-mode-button:focus-visible {
   outline: none;
   box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent-primary) 45%, transparent);
 }
+
+.message-delete-mode-hint {
+  margin-left: 2px;
+  font-size: 10px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  user-select: none;
+}