salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
VooDisss
2026-03-02 09:51:59 +02:00
parent 482313f662
commit 224cab6a42
5 changed files with 1070 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
packages/ui/src/styles/messaging/message-timeline.css
View File

@@ -6,6 +6,9 @@
min-height: 0;
flex: 1 1 auto;
position: relative;
/* Isolate stacking context so sidebar z-indices don't compete with
Portals (Command Palette, modals) that live at the body level. */
isolation: isolate;
}
.message-layout--with-timeline {
@@ -51,6 +54,8 @@
min-height: 0;
display: flex;
flex-direction: column;
position: relative;
z-index: 100;
}
@@ -67,11 +72,16 @@
gap: 0.35rem;
padding: 0.25rem;
overflow-y: auto;
overflow-x: visible;
border-radius: 8px;
background-color: var(--surface-base);
box-shadow: var(--panel-shadow);
}
.message-timeline--selection-active {
padding-bottom: 4rem;
}
.message-timeline::-webkit-scrollbar {
width: 5px;
}
@@ -97,6 +107,11 @@
text-transform: uppercase;
color: var(--text-primary);
transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
overflow: hidden;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
-webkit-touch-callout: none;
}
.message-timeline-segment[data-delete-hover="true"]::before {
@@ -259,3 +274,134 @@
.message-preview .message-item-base {
font-size: 0.85rem;
}
/* --- Selection & Histogram Ribs --- */
.message-timeline-segment-selected {
border-color: var(--accent-primary) !important;
background-color: color-mix(in oklab, var(--accent-primary) 25%, var(--surface-base)) !important;
box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent-primary) 50%, transparent) inset !important;
color: var(--accent-primary) !important;
}
.message-timeline-segment-selected:hover,
.message-timeline-segment-selected:focus-visible {
background-color: color-mix(in oklab, var(--accent-primary) 35%, var(--surface-base)) !important;
color: var(--accent-primary) !important;
transform: none;
}
/* --- Group indicators: tools belong to the same message as their assistant --- */
/* Tool segments that are part of a group get a left accent border. */
.message-timeline-group-child {
border-left: 3px solid color-mix(in oklab, var(--accent-primary) 35%, transparent);
}
/* The assistant "parent" at the bottom of a tool group gets the same border. */
.message-timeline-group-parent {
border-left: 3px solid color-mix(in oklab, var(--accent-primary) 35%, transparent);
}
/* Extra spacing before the first tool in a group to separate from the
preceding user/assistant badge. */
.message-timeline-group-start {
margin-top: 0.35rem;
}
/* Subtle extra spacing after the group parent (assistant) to separate
from the next user badge below. Uses adjacent sibling targeting. */
.message-timeline-group-parent + .message-timeline-user,
.message-timeline-group-parent + .message-timeline-compaction {
margin-top: 0.35rem;
}
.message-timeline-container {
position: relative;
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
}
.message-timeline-xray-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
/* Below Command Palette (z-50) but above normal content. */
z-index: 40;
}
.message-timeline-xray-rib {
position: fixed;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 1px;
transform: translate(-100%, -50%);
}
.message-timeline-xray-token-label {
position: absolute;
right: 100%;
top: 50%;
transform: translateY(-50%);
margin-right: 4px;
height: 1.5rem;
display: flex;
align-items: center;
font-size: 12px;
font-weight: 600;
font-variant-numeric: tabular-nums;
line-height: 1;
color: #1a1a2e;
background: #ffffff;
padding: 1px 5px;
border: 1px solid #1a1a2e;
border-radius: 999px;
white-space: nowrap;
pointer-events: none;
user-select: none;
}
.message-timeline-relative-bar {
height: 5px;
width: calc(var(--segment-weight) * var(--max-rib-width, 50vw));
background-color: color-mix(
in srgb,
var(--status-success) calc(100% - var(--segment-weight) * 100%),
var(--status-error) calc(var(--segment-weight) * 100%)
);
border-radius: 3px 0 0 3px;
transition: width 0.3s ease, background-color 0.3s ease;
box-shadow: -2px 0 4px rgba(0, 0, 0, 0.25);
}
.message-timeline-absolute-bar {
height: 3px;
width: calc(var(--segment-weight) * var(--max-rib-width, 50vw));
background-color: var(--text-muted);
border-radius: 2px 0 0 2px;
transition: width 0.3s ease;
opacity: 0.5;
position: relative;
}
.message-timeline-absolute-bar-overflow {
opacity: 0.8;
}
.message-timeline-absolute-bar-overflow::before {
content: "";
position: absolute;
left: -1px;
top: -3px;
bottom: -3px;
width: 3px;
border-radius: 2px;
background: var(--status-error);
box-shadow: 0 0 6px 2px var(--status-error);
}