Improve Chat UI: Message Contrast and Checkpoint Visibility

[CrownKira]

What problem does this proposed feature solve?

The current chat interface in Roocode presents two main usability challenges:

• Lack of visual contrast between user and agent messages: Both types of messages look visually similar, making it difficult to distinguish who said what, especially in longer conversations. This slows down comprehension and increases the cognitive load during debugging or reviewing a coding session.

• Poor visibility of checkpoints in chat history: Saved checkpoints are hard to locate, requiring manual scrolling and careful inspection of each message. This is inefficient and can disrupt a user’s workflow when they want to revert or review a past checkpoint quickly.

Improving these aspects will significantly enhance the clarity and usability of the interface.

Describe the proposed solution in detail

To address these issues, I propose the following enhancements:

• Message Differentiation:

  • Apply distinct background colors for user and agent messages.
  • Use alignment differences (e.g., user messages right-aligned, agent messages left-aligned).
  • Optionally, include visual labels like “You” and “Agent” to make speaker identity immediately clear.

• Checkpoint Visibility:

  • Add a visual marker or icon next to checkpoint messages (e.g., a flag or bookmark symbol).
  • Introduce a “Jump to last checkpoint” button or a small navigation panel that lets users view and jump to saved checkpoints quickly.

These UI improvements would make it much easier for users to read conversations and manage their coding progress within the chat interface.

Technical considerations or implementation details (optional)

No response

Describe alternatives considered (if any)

No response

Additional Context & Mockups

No response

Proposal Checklist

• I have searched existing Issues and Discussions to ensure this proposal is not a duplicate.
• This proposal is for a specific, actionable change intended for implementation (not a general idea).
• I understand that this proposal requires review and approval before any development work begins.

Are you interested in implementing this feature if approved?

• Yes, I would like to contribute to implementing this feature.

[hannesrudolph]

+1

[CrownKira]

+1

idea: add right padding/margin for all agent responses. add left padding/margin for all user messages. @hannesrudolph how does this sound ? :)

[hannesrudolph]

+1

idea: add right padding/margin for all agent responses. add left padding/margin for all user messages. @hannesrudolph how does this sound ? :)

I think we have a PR sitting around that needs approval that actually deals with this 😆