feat(vscode): jump transcript to message on timeline bar click

[sylwester-liljegren]

Context

The task timeline (the small bar-chart histogram shown under the chat header, next to the token/cost stats) previously only supported hover tooltips, drag-to-scroll, and keyboard arrow navigation. There was no way to jump the transcript to the message a given bar represents.

Implementation

• TaskTimeline.tsx: each TimelineBar now retains the source message's msgId (previously discarded in collect()). A click (pointer-up without a preceding drag) or Enter/Space on the focused bar calls jumpToMessage, which dispatches a window CustomEvent("scrollToMessage", { detail: { id } }) — mirroring the existing resumeAutoScroll cross-component event convention already used between TaskHeader/TaskTimeline and MessageList (they share no direct props or context signal for this).
• MessageList.tsx: listens for scrollToMessage, resolves the message to its TranscriptRow key, and scrolls to it — via virtualizer()?.scrollToIndex() when the row is in the virtualized region, or element.scrollIntoView() (found via the existing data-row-key attribute) when the row is in the non-virtualized "direct" tail.
• The jump is instant, not smoothly animated. While pinned at the very bottom, a smooth scroll's first animation frames sit within createAutoScroll's near-bottom threshold, which resumes auto-follow mid-animation and snaps the view back down before the jump completes. An instant scroll has no such transient frame, so it isn't cancelled.

Screenshots / Video

before	after
https://github.com/user-attachments/assets/c349ce22-b042-4b97-8a48-cea4eb7af4c1	https://github.com/user-attachments/assets/e1016abe-3b7d-464e-9184-3a98f0e38143

How to Test

Manual/local verification

• Ran bun run typecheck, bun run lint, and bun run format in packages/kilo-vscode — all pass (agent-executed).
• Manually verified in the running extension (human-executed): clicked bars at various points in the timeline and confirmed the transcript scrolls to the corresponding message, including while pinned at the very bottom of the conversation (previously the jump would silently snap back to the bottom due to the auto-scroll race described above).
• Verified keyboard activation (Enter/Space after arrow-key selecting a bar) also jumps to the message.
• Verified drag-to-scroll on the timeline still works and is not misinterpreted as a click.

Reviewer test steps

1. Open a session with enough messages that the task timeline shows multiple bars and the transcript is scrollable.
2. Scroll the chat transcript to the bottom.
3. Click any bar in the task timeline (or focus it and press Enter/Space).
4. Confirm the transcript scrolls to the message that bar represents, without snapping back to the bottom.
5. Repeat after manually scrolling the transcript up first, and confirm the same behavior.

Blocked checks and substitute verification

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]

WARNING: Jump target loses granularity for long assistant messages

TaskTimeline.collect() creates one TimelineBar per non-step-start part, all sharing the same msgId for a given message. transcriptRows() (default chunk size of 8, no size override is passed here) splits a message's parts into multiple rows once it has more than 8 visible parts, each row keeping the same message.id but a different key. Since rows().find(...) returns only the first matching row, clicking any bar for a part beyond the first chunk of a long message (e.g. a turn with many tool calls) always scrolls to the top of that message instead of near the bar's actual part. This isn't wrong per the PR's stated "jump to that message" intent, but the per-part bars visually imply finer-grained navigation than what's delivered for longer turns. Worth considering matching against the containing chunk (e.g. by part id) rather than only the first row for that message id.

---

Reply with @kilocode-bot fix it to have Kilo Code address this issue.

[kilo-code-bot]

SUGGESTION: Changeset text omits the Space key

onKeyDown in TaskTimeline.tsx triggers the jump on both Enter and Space (e.key === " "), but this user-facing changeset only mentions Enter.

Suggested change

	Click or press Enter on a bar in the task timeline to jump the transcript to that message.
	Click or press Enter/Space on a bar in the task timeline to jump the transcript to that message.

---

Reply with @kilocode-bot fix it to have Kilo Code address this issue.

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Both previously flagged issues are resolved in the latest commit:

• Jump target granularity: TaskTimeline.tsx now tracks partId per bar, and MessageList.tsx's onScrollToMessage matches the specific chunk containing that part (falling back to the first chunk), so bars past the first chunk of a long assistant turn now jump to the correct row.
• Changeset wording now says "Enter/Space", matching the onKeyDown handler in TaskTimeline.tsx.

No new issues found in the incremental diff (.changeset/timeline-bar-jump-to-message.md, MessageList.tsx, TaskTimeline.tsx).

Files Reviewed (3 files)

• .changeset/timeline-bar-jump-to-message.md
• packages/kilo-vscode/webview-ui/src/components/chat/MessageList.tsx
• packages/kilo-vscode/webview-ui/src/components/chat/TaskTimeline.tsx

Previous Review Summary (commit 433fa54)

Current summary above is authoritative. Previous snapshots are kept for context only.

Previous review (commit 433fa54)

Status: 2 Issues Found | Recommendation: Address before merge

Overview

Severity	Count
CRITICAL	0
WARNING	1
SUGGESTION	1

Issue Details (click to expand)

WARNING

File	Line	Issue
packages/kilo-vscode/webview-ui/src/components/chat/MessageList.tsx	168	Jump-to-message resolves to the first row for a message id; long assistant turns (>8 visible parts) get chunked into multiple rows, so bars past the first chunk always jump to the top of the message instead of near the clicked part

SUGGESTION

File	Line	Issue
.changeset/timeline-bar-jump-to-message.md	5	Changeset text mentions only Enter, but the implementation also binds Space

Files Reviewed (3 files)

• .changeset/timeline-bar-jump-to-message.md - 1 issue
• packages/kilo-vscode/webview-ui/src/components/chat/MessageList.tsx - 1 issue
• packages/kilo-vscode/webview-ui/src/components/chat/TaskTimeline.tsx - 0 issues

Fix these issues in Kilo Cloud

---

_{Reviewed by claude-sonnet-5-20260630 · Input: 24 · Output: 4.3K · Cached: 551.2K}

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

[marius-kilocode]

@sylwester-liljegren thanks! Unsure about the mouse cursor on hover because it's also draggable. The old extension had some highlighting going on, that made it easy to follow which bar belongs to which tool. But it's a nice improvement already so I merged it.