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

.changeset/timeline-bar-jump-to-message.md

@@ -0,0 +1,5 @@
+---
+"kilo-code": minor
+---
+
+Click or press Enter on a bar in the task timeline to jump the transcript to that message.

packages/kilo-vscode/webview-ui/src/components/chat/MessageList.tsx

@@ -157,6 +157,29 @@ export const MessageList: Component<MessageListProps> = (props) => {
   const lookup = createMemo(() => new Map(partition().direct.map((row) => [row.key, row])))
   const keys = createMemo(() => partition().virtual.map((row) => row.key))
   const fingerprint = createMemo(() => rowFingerprint(keys()))
+
+  // Clicking a bar in the task timeline scrolls the transcript to that message.
+  // Jumps land instantly (no smooth animation): while pinned at the bottom, a
+  // smooth scroll's initial frames sit within createAutoScroll's near-bottom
+  // threshold, which resumes auto-follow mid-animation and snaps back down.
+  const onScrollToMessage = (e: Event) => {
+    const id = (e as CustomEvent<{ id: string }>).detail?.id
+    if (!id) return
+    const row = rows().find((r) => r.type === "assistant" && r.message.id === id)
+    if (!row) return
+    autoScroll.pause()
+    const index = keys().indexOf(row.key)
+    if (index >= 0) {
+      virtualizer()?.scrollToIndex(index, { align: "start" })
+      return
+    }
+    const el = scrollEl()
+    const target = el?.querySelector<HTMLElement>(`[data-row-key="${CSS.escape(row.key)}"]`)
+    target?.scrollIntoView({ block: "start" })
+  }
+  window.addEventListener("scrollToMessage", onScrollToMessage)
+  onCleanup(() => window.removeEventListener("scrollToMessage", onScrollToMessage))
+
   const measurement = createMemo(() => {
     const id = session.currentSessionID()
     const token = layout()

packages/kilo-vscode/webview-ui/src/components/chat/TaskTimeline.tsx

@@ -17,6 +17,7 @@ export interface TimelineBar {
   width: number
   height: number
   idx: number
+  msgId: string
 }
 
 function collect(messages: Message[], parts: Record<string, Part[]>): TimelineBar[] {
@@ -39,13 +40,15 @@ function collect(messages: Message[], parts: Record<string, Part[]>): TimelineBa
     width: sz[i]!.width,
     height: sz[i]!.height,
     idx: i,
+    msgId: item.msg.id,
   }))
 }
 
 export const TaskTimeline: Component = () => {
   const session = useSession()
   let ref: HTMLDivElement | undefined
   let dragging = false
+  let dragMoved = false
   let startX = 0
   let startScroll = 0
   const [hover, setHover] = createSignal(-1)
@@ -135,13 +138,21 @@ export const TaskTimeline: Component = () => {
     hideTip()
     if (!ref) return
     dragging = true
+    dragMoved = false
     startX = e.clientX
     startScroll = ref.scrollLeft
     ref.setPointerCapture(e.pointerId)
     ref.style.cursor = "grabbing"
     ref.style.userSelect = "none"
   }
 
+  const jumpToMessage = (idx: number) => {
+    const bar = bars()[idx]
+    if (!bar) return
+    setActive(idx)
+    window.dispatchEvent(new CustomEvent("scrollToMessage", { detail: { id: bar.msgId } }))
+  }
+
   const onPointerMove = (e: PointerEvent) => {
     if (!ref) return
     if (!dragging) {
@@ -150,15 +161,18 @@ export const TaskTimeline: Component = () => {
       if (idx < 0) return hideTip()
       return showTip(idx)
     }
+    if (Math.abs(e.clientX - startX) > 3) dragMoved = true
     ref.scrollLeft = startScroll - (e.clientX - startX)
   }
 
   const onPointerUp = (e: PointerEvent) => {
     if (!ref) return
+    const wasDragging = dragging
     dragging = false
     if (ref.hasPointerCapture(e.pointerId)) ref.releasePointerCapture(e.pointerId)
     ref.style.cursor = "grab"
     ref.style.userSelect = ""
+    if (wasDragging && !dragMoved) jumpToMessage(pointerIndex(e))
   }
 
   const onWheel = (e: WheelEvent) => {
@@ -169,6 +183,11 @@ export const TaskTimeline: Component = () => {
   }
 
   const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault()
+      jumpToMessage(selected())
+      return
+    }
     if (!ref || !["ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key)) return
     e.preventDefault()
     const idx = navigate(selected(), bars().length, e.key)