feat(vscode): chat history visualizer (task timeline) — prototype

[marius-kilocode]

Summary

Prototype port of the legacy extension's task timeline feature — the colorful vertical bars, context window progress, and token breakdown panel.

This reverse-engineers the legacy KiloTaskHeader, TaskTimeline, TaskTimelineMessage, ContextWindowProgress, and KiloChatRowGutterBar components and reimplements them in SolidJS for the new extension.

What's included

• Task Timeline: Horizontal strip of colored bars representing session activity
  • Color = part type (read=blue, write=dark blue, tool=indigo, error=red, user=amber, assistant=gray)
  • Width = proportional to time between messages
  • Height = proportional to content length
  • Uses exact VS Code CSS variable palette from legacy (color-mix(), --vscode-textLink-foreground, etc.)
• Context Progress Bar: Three-segment bar (used / reserved for output / available)
• Token Breakdown: Cumulative input/output/cache counts from all StepFinishParts
• Gutter Bars: 4px colored indicator on each chat turn, visible when hovering the timeline
• Expand/Collapse: Chevron toggle in the header stats area — everything hidden by default
• Click-to-scroll: Click a bar to scroll to the corresponding message turn
• Drag-scroll: Click-and-drag horizontally, mouse wheel converts to horizontal scroll
• 37 unit tests for color classification and bar size calculation

Known issues (WIP)

• Navigation: Click-to-scroll from the timeline bars does not always land on the exact right message — assistant message bars navigate to the parent turn but not the specific part within it
• Message highlighting: The gutter bar highlight on hover works but there's no per-message flash animation on click-to-scroll yet
• Horizontal scaling: Bar widths could be better tuned — short sessions have very wide bars, long sessions compress too much

Files

New (7)

File	Purpose
webview-ui/src/utils/timeline/colors.ts	Part → color classification
webview-ui/src/utils/timeline/sizes.ts	Bar width/height calculation
webview-ui/src/components/chat/TaskTimeline.tsx	Horizontal bar strip
webview-ui/src/components/chat/ContextProgress.tsx	Context window progress bar
webview-ui/src/components/chat/GutterBar.tsx	Per-turn colored indicator
tests/unit/timeline-colors.test.ts	20 tests for color classification
tests/unit/timeline-sizes.test.ts	17 tests for bar sizing

Modified (5)

File	Change
TaskHeader.tsx	Added timeline, context progress, token breakdown, expand toggle
ChatView.tsx	Added timelineHover signal
MessageList.tsx	Passes timelineHover to turns
VscodeSessionTurn.tsx	Renders GutterBar with timeline color
chat.css	Timeline, context progress, token, gutter bar, expand toggle styles

[marius-kilocode]

@markijbema unsure if you worked on this, but this MVP is pretty close to the original if we want to reintroduce it