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

[sylwester-liljegren]

Issue

No tracked issue. This is a follow-up to maintainer feedback on #12025 ("jump transcript to message on timeline bar click"), which noted the legacy extension had highlighting that made it easy to see which timeline bar corresponds to which tool call in the transcript.

Context

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

This restores it, adapted to the rebuilt timeline's finer granularity — bars are per-part rather than per-message, so hovering or focusing a bar 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 between TaskTimeline and MessageList (they share no context or direct props for this).
• TaskTimeline.tsx dispatches the hovered/focused bar's { msgId, partId } whenever hover() changes, and clears it on blur/leave/unmount.
• MessageList.tsx listens once and threads the resulting accessor down through TranscriptRow.tsx into AssistantMessage.tsx, which lights up the matching part's tool-part-wrapper via a data-timeline-highlight attribute plus the bar's color as a CSS variable.
• The highlight strip (chat-layout.css) is an absolutely positioned pseudo-element, not an inset box-shadow: a box-shadow paints in 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. It also has to stay inside the wrapper's box because the row virtualizer (virtua) clips content to exactly that box, so a negative offset gets clipped once rows virtualize. A small extra padding-left on assistant turns (assistant content only, not user bubbles/diffs) gives the strip room to sit off the card edge with a visible gap.
• Also fixes a related interaction bug: onPointerDown pre-emptively hid the tooltip in case the press became a drag, which cleared the hover state driving the highlight — so on a plain click the highlight vanished even though the pointer never left the bar. onPointerUp now restores it for the clicked bar after the jump.

Screenshots / Video

before	after
no visual link between a timeline bar and its transcript row	https://github.com/user-attachments/assets/5a2f456e-e094-49b4-807f-9e1adc6162cf

How to Test

Manual/local verification

Executed by the agent, from packages/kilo-vscode/:

• bun run typecheck — passes
• bun run lint — passes
• bun run format — no reformatting needed on the touched files
• bun test tests/unit/task-timeline-tooltip.test.ts tests/unit/timeline-colors.test.ts tests/unit/timeline-geometry.test.ts tests/unit/timeline-sizes.test.ts — 32 pass / 0 fail

The branch is a single highlight-only commit cherry-picked onto the current main; git diff --stat origin/main shows only the 7 files described above.

Reviewer test steps

1. bun run extension to launch the dev extension host.
2. Run a task with several tool calls so the timeline shows multiple colored bars.
3. Hover a bar — the matching tool call / text / reasoning part in the transcript lights up with a colored left edge in that bar's color.
4. Click a bar — the transcript jumps to that part and the highlight stays on the clicked part (rather than disappearing).
5. Move the pointer off the timeline — the highlight clears.

Blocked checks and substitute verification

• Could not launch the VS Code UI in this headless environment to capture screenshots; substitute verification was the typecheck/lint/format/unit-test runs above plus a diff review confirming the change is limited to the highlight behavior.

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.

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Files Reviewed (7 files)

• .changeset/timeline-bar-highlight.md
• packages/kilo-vscode/webview-ui/src/components/chat/AssistantMessage.tsx
• packages/kilo-vscode/webview-ui/src/components/chat/MessageList.tsx
• packages/kilo-vscode/webview-ui/src/components/chat/TaskTimeline.tsx
• packages/kilo-vscode/webview-ui/src/components/chat/TranscriptRow.tsx
• packages/kilo-vscode/webview-ui/src/styles/chat-layout.css
• packages/kilo-vscode/webview-ui/src/utils/timeline/highlight.ts

---

_{Reviewed by claude-sonnet-5-20260630 · Input: 38 · Output: 17.5K · Cached: 1.2M}

_{Review guidance: REVIEW.md from base branch main}

[sylwester-liljegren]

Re: failing Visual Regression (kilo-vscode webview) check

This is expected, not a bug. This PR adds padding-left: 4px to .vscode-session-turn-assistant so the new task-timeline highlight strip has room to sit off the card's left edge with a visible gap (see the comment above that rule in chat-layout.css). That padding applies to every assistant turn unconditionally, so it shifts assistant content a few pixels right across the board — which is why 6 stored baselines changed (readable-chat-*, chat-view-readable-420, chat-busy, diff-summary-collapsed, search-previews), even though none of them show the highlight itself.

I confirmed this by diffing the checked-in baseline against the freshly rendered "actual" screenshot from the failed run (e.g. composite-webview/chat-busy) — the only difference is the assistant text block shifting a few px to the right, consistent with the added padding.

Since this PR's branch lives on a fork, the workflow can't auto-commit updated baselines (no write access), so it fails outright per its own read-only-PR check rather than silently passing. Could someone with write access to Kilo-Org/kilocode help refresh the packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/ baselines for this branch? Happy to do anything else needed on my end in the meantime.

[marius-kilocode]

Superseded by #12065 so visual-regression automation can run on a Kilo-owned branch, while preserving the contributor's feature commit.