feat(vscode): highlight the transcript part behind a hovered timeline bar

[sylwester-liljegren]

Issue

Fixes #

No tracked issue — this follows up on maintainer feedback on Kilo-Org#12025 ("jump transcript to message on timeline bar click"), which noted that the legacy extension had highlighting that made it easy to see which timeline bar belongs to which tool call.

Context

The task timeline (TaskTimeline.tsx) already color-codes each bar by part type, and the legacy extension used that same color to highlight a matching gutter strip on chat rows while hovering the timeline, so users could visually correlate a bar with the tool call it represents. That correlation was missing in the rebuilt timeline.

This PR restores it, adapted to the rebuilt timeline's finer bar granularity (per-part, not per-row): hovering or focusing a bar now highlights the exact matching part in the transcript, using that bar's own color.

Implementation

• New utils/timeline/highlight.ts: a small typed pub/sub (dispatchTimelineHighlight / onTimelineHighlight) over a window CustomEvent, following the same cross-component convention already used for scrollToMessage/resumeAutoScroll between TaskTimeline and MessageList — they don't share context or direct props for this.
• TaskTimeline.tsx dispatches the hovered/focused bar's {msgId, partId} whenever hover() changes (clearing on blur/leave/unmount).
• MessageList.tsx listens once and threads the resulting accessor down through TranscriptRow.tsx to AssistantMessage.tsx, which lights up the matching part's tool-part-wrapper with a data-timeline-highlight attribute and the bar's own color as a CSS var.
• The highlight strip in chat-layout.css is an absolutely-positioned pseudo-element, not an inset box-shadow: a box-shadow paints as part of the wrapper's own background layer, underneath every child, so tool cards with a negative-margin background (e.g. bash/shell output) would cover it. An absolutely positioned element always paints above normal-flow children instead. It also has to stay within the wrapper's own bounds — the row virtualizer (virtua) clips its content to exactly that box, so a negative offset placed correctly for a non-virtualized row gets silently clipped once rows are virtualized. .vscode-session-turn-assistant gets a small extra padding-left (assistant rows only, not user bubbles/diffs) to give the strip room to sit off the card edge with a visible gap.
• Fixed a related bug along the way: onPointerDown hid the tooltip pre-emptively in case the interaction turned into a drag, which also cleared the hover state driving the highlight — so on a plain click (no drag) the highlight vanished immediately even though the pointer never left the bar. onPointerUp now restores it for the clicked bar after the jump.

Screenshots / Video

before	after
no correlation between timeline bars and chat rows	hovering/clicking a bar highlights the matching part in the transcript, in that bar's color

Not attached here — no GUI available in this environment to capture screenshots. The feature was visually verified interactively during development (see Reviewer test steps); please add before/after screenshots before merge if required.

How to Test

Manual/local verification

• Ran bun run typecheck, bun run lint, and the timeline unit tests (task-timeline-tooltip, timeline-colors, timeline-geometry, timeline-sizes) against this commit in isolation (stashed all unrelated in-progress work first) — all pass.
• Reviewed the diff to confirm it only touches the highlight behavior described above; no metadata/tooltip-content/context-menu work from the same session is included.

Reviewer test steps

1. bun run extension to launch the dev extension host.
2. Start a task that runs a few tool calls (read/edit/bash/etc.) so the timeline has several colored bars.
3. Hover a bar in the timeline — the matching tool call/text/reasoning part in the transcript should light up with a colored left edge in that bar's color.
4. Click a bar — the transcript should jump to that part, and the highlight should remain on the clicked part (rather than disappearing).
5. Move the mouse off the timeline — the highlight should clear.

Blocked checks and substitute verification

• Could not launch the VS Code extension UI in this (headless, GUI-less) environment to capture screenshots; substitute verification was bun run typecheck/lint/unit tests plus diff review as described above.

Checklist

• Issue linked above, or exception explained
• Tests/verification described
• Screenshots/video included for visual changes, or marked N/A
• Changeset considered for user-facing changes
• I personally reviewed the diff and can explain the changes, including any AI-assisted work.

Get in Touch