microsoft / microsoft/vscode

feat: Overview ruler + heatmap scrollbar for AI chat panels (input/output demarcation + context-size heat + error markers)

Open
#327,564 0 comments 0 reactions 1 assignee Claimed by @justschen View on GitHub
Dominant language
TypeScript
Stars
193k
Forks
42.4k
PR merge metrics
PR metrics pending

Description

# Feature Request: Overview ruler + heatmap scrollbar for AI chat panels (input/output demarcation + context-size heat + error markers)

> **Note on related work**: There is an in-flight request/PR for user-prompt markers in the chat scrollbar (microsoft/vscode#326087, PR microsoft/vscode#326137). This request is broader: it asks for a full overview-ruler surface with a viewport indicator, input/output demarcation, live context-size heatmap, and error markers/strikethrough. The prompt-marker work can be seen as a subset or a first phase; the layered ruler described here provides the full navigational and diagnostic surface.

## Summary

Bring the editor's overview-ruler / minimap concept into the AI chat panel so users can see, at a glance, where they asked questions vs. where the AI responded, how "heavy" the conversation context has become, and where errors (timeouts, tool failures, etc.) occurred — all without scrolling.

This is the chat-panel equivalent of the existing editor overview ruler (`editor.overviewRuler`, `editor.minimap`) that already shows git diffs, search hits, and diagnostics next to the scrollbar — including the shaded viewport indicator that shows which slice of the document is currently on screen.

## Motivation

Long agentic sessions (Cascade, Devin, Copilot Chat, Cursor) become hard to navigate. Today there is no way to:

- Tell, from the scrollbar alone, which turns were **my prompts** vs. **AI responses**.
- See when the **context window is getting large** before the model starts degrading, dropping context, or refusing to follow instructions.
- Spot **where an error happened** (timeout, tool failure, rate limit, aborted run) without re-reading the whole transcript.

Users currently scroll blindly. A compressed view next to the chat scrollbar — exactly like the diff/markers view we already have for files — would solve all three.

## Proposed feature

A configurable overview ruler rendered alongside the chat panel's vertical scrollbar, with four independent layers (the first being the viewport indicator itself):

### 0. Viewport indicator

Just like the editor's overview ruler and minimap, the chat overview ruler must render a shaded region representing the **portion of the conversation currently visible in the viewport**. This is the "you are here" slice:

- A light shaded band spanning from the top of the first visible turn to the bottom of the last visible turn, sized proportionally to `viewportHeight / scrollHeight`.
- Updates live as the user scrolls (and as the conversation grows underneath them).
- Clicking or dragging inside the ruler should scroll the chat to the corresponding position, matching the editor's minimap/overview-ruler click-and-drag behavior.
- This is the base layer; the demarcation, heatmap, and error-marker layers render on top of (or alongside) it.

Without this, the ruler is just a static map — the viewport indicator is what makes it a navigational tool, not just a summary.

### 1. Input vs. output demarcation

- User-prompt turns: one color band (e.g. blue) on the ruler at the vertical position of that turn.
- AI-response turns: a different color band (e.g. gray/green) at the position of that response.
- Optionally a thin divider line between turns.
- Hovering a band should reveal a tooltip with the turn index and a one-line preview; clicking should scroll the chat to that turn.

### 2. Context-size heatmap

The ruler's background (or a parallel lane) is shaded by **cumulative context size** up to that point in the conversation, using a traffic-light gradient:

| Zone | Color | Meaning |
| --- | --- | --- |
| Low | Green | Context is comfortable; model has full attention budget. |
| Mid | Yellow | Approaching the point where a handoff / new session or context trim should be considered. |
| High | Red | Likely already causing problems: dropped context, degraded instruction-following, truncated tool outputs, etc. |

Thresholds should be configurable (see **Configuration** below) and should default to sensible percentages of the active model's effective context window — not just the raw token limit, since effective attention degrades well before the hard limit.

The heatmap should update live as the conversation grows, so the user can watch the green→yellow→red progression in real time.

### 3. Error markers

- A distinct red marker (red line / red tick) on the ruler at the vertical position of any turn where an error occurred: timeouts, tool failures, rate limits, aborted runs, parse failures, etc.
- In the chat body itself, the offending message should optionally render with a **red strikethrough** through the affected text span (not the whole message — just the failed portion, e.g. the tool call that timed out).
- Both the ruler marker and the in-body strikethrough should be independently toggleable in config.

## Configuration

Suggested settings, all under a new `chat.overviewRuler.*` namespace (names illustrative):

```jsonc
{
"chat.overviewRuler.enabled": true,
"chat.overviewRuler.demarcateInputOutput": true,
"chat.overviewRuler.inputColor": "#3b82f6",
"chat.overviewRuler.outputColor": "#10b981",

"chat.overviewRuler.heatmap": "contextSize", // "off" | "contextSize" | "messageCount"
"chat.overviewRuler.heatmap.yellowThresholdPct": 60,
"chat.overviewRuler.heatmap.redThresholdPct": 85,

"chat.overviewRuler.errorMarkers": true,
"chat.overviewRuler.errorStrikethrough": true,
"chat.overviewRuler.errorColor": "#ef4444"
}
```

## Why this needs to be first-party

This cannot be delivered by a third-party extension today. The chat panel is not a `TextEditor`, so the existing `createTextEditorDecorationType({ overviewRulerColor, overviewRulerLane })` API does not apply to it. There is also no extension API to read a host chat's transcript, observe its scroll position, or render an overlay anchored to its scrollbar. See the companion API request: **[Standardized Chat Panel Extension API](https://github.com/microsoft/vscode/issues/327561)**.

Because Windsurf is a VS Code fork with native control over the Cascade UI, this feature is achievable here *today* without waiting for the upstream API — the fork can decorate its own chat surface directly. We'd love to see it land here first and then propagate upstream once the standardized API (companion request) exists.

## Acceptance criteria

- [ ] Overview ruler visible next to the chat scrollbar, toggleable via `chat.overviewRuler.enabled`.
- [ ] Shaded viewport indicator shows the currently-visible slice of the conversation; updates live on scroll and on conversation growth.
- [ ] Clicking/dragging the viewport indicator scrolls the chat to the corresponding position.
- [ ] User vs. AI turns visually distinguishable on the ruler; click-to-scroll works.
- [ ] Context heatmap renders green→yellow→red and updates live; thresholds configurable.
- [ ] Errors (timeouts, tool failures, rate limits, aborted runs) marked on the ruler.
- [ ] Optional red strikethrough on the failed text span inside the chat body, toggleable.
- [ ] All four layers (viewport indicator, demarcation, heatmap, error markers) independently disable-able from settings.
- [ ] Works in both the sidebar chat and any editor-embedded chat panel.

## Related

- Companion API request (so third parties can build this and more): **[Standardized Chat Panel Extension API](https://github.com/microsoft/vscode/issues/327561)**
- Prior art: `editor.overviewRuler`, `editor.minimap`, `editorGutter.decorations`, GitLens diff markers, test-coverage overview rulers.
- Related upstream gap (notebook scroll, same family of problem): microsoft/vscode#311289.

- Existing prompt-marker work (user prompts only, subset of this request): microsoft/vscode#326087 and PR microsoft/vscode#326137.
- Chat scrollbar flicker issue: microsoft/vscode#322536.
- Scroll-position reset to bottom: microsoft/vscode#322346.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.