[FEATURE] [Feature Request] Improve long conversation UX: message color distinction + conversation navigator

Preflight Checklist

• [x] I have searched existing requests and this feature hasn't been requested yet
• [x] This is a single feature request (not multiple features)

Problem Statement

Problem

When working with Claude Code in VS Code for extended sessions (50+ messages), two UX issues make it difficult to navigate previous conversations:

Issue 1: No visual distinction between user and assistant messages

Currently, user input bubbles and AI response areas have the same background color. When scrolling through a long conversation history, it's hard to quickly identify where each Q&A pair begins and ends.

Current behavior:

• User messages and AI responses have identical styling
• Difficult to scan and locate specific questions in long threads

Expected behavior:

• User messages should have a distinct background color (e.g., orange, blue, or any contrasting color)
• This would create clear visual anchors when scrolling

Issue 2: No conversation navigation/outline

In long conversations, finding a previous Q&A requires extensive scrolling. There's no way to quickly jump to a specific question.

Current behavior:

• Must manually scroll through entire history
• No overview of conversation structure
• Time-consuming to locate previous discussions

Expected behavior:

• A collapsible outline/timeline panel showing all user questions
• Click on any question to jump directly to that Q&A section
• Optional: show timestamps for each question

Proposed Solution

1. Color distinction: Add theme-aware color differentiation for user vs assistant messages (or expose a setting for customization)

1. Conversation navigator: Add a sidebar panel or dropdown that lists all user questions as clickable anchors, similar to:

• VS Code's Outline view for code
• Notion's table of contents
• Word's navigation pane

Use Case

Power users who use Claude Code as their primary coding assistant often have 50-100+ message threads. These improvements would significantly enhance productivity by reducing time spent searching for previous context.

Environment

• VS Code Extension: Claude Code
• Platform: macOS / Windows / Linux

Proposed Solution

Problem

When working with Claude Code in VS Code for extended sessions (50+ messages), two UX issues make it difficult to navigate previous conversations:

Issue 1: No visual distinction between user and assistant messages

Currently, user input bubbles and AI response areas have the same background color. When scrolling through a long conversation history, it's hard to quickly identify where each Q&A pair begins and ends.

Current behavior:

• User messages and AI responses have identical styling
• Difficult to scan and locate specific questions in long threads

Expected behavior:

• User messages should have a distinct background color (e.g., orange, blue, or any contrasting color)
• This would create clear visual anchors when scrolling

Issue 2: No conversation navigation/outline

In long conversations, finding a previous Q&A requires extensive scrolling. There's no way to quickly jump to a specific question.

Current behavior:

• Must manually scroll through entire history
• No overview of conversation structure
• Time-consuming to locate previous discussions

Expected behavior:

• A collapsible outline/timeline panel showing all user questions
• Click on any question to jump directly to that Q&A section
• Optional: show timestamps for each question

Proposed Solution

1. Color distinction: Add theme-aware color differentiation for user vs assistant messages (or expose a setting for customization)

1. Conversation navigator: Add a sidebar panel or dropdown that lists all user questions as clickable anchors, similar to:

• VS Code's Outline view for code
• Notion's table of contents
• Word's navigation pane

Use Case

Power users who use Claude Code as their primary coding assistant often have 50-100+ message threads. These improvements would significantly enhance productivity by reducing time spent searching for previous context.

Environment

• VS Code Extension: Claude Code
• Platform: macOS / Windows / Linux

Alternative Solutions

_No response_

Priority

Medium - Would be very helpful

Feature Category

Interactive mode (TUI)

Use Case Example

_No response_

Additional Context

_No response_