[CLI]: Add rich diff viewer inside the TUI

[malhotra5]

Description

Implement a rich diff viewer component for the Terminal User Interface (TUI) that provides a better visual experience when viewing code changes.

Expected Behavior

The TUI should include a rich diff viewer that:

• Displays side-by-side or unified diff views
• Uses syntax highlighting for code
• Shows red highlighting for removed lines
• Shows green highlighting for added lines
• Supports scrolling through large diffs
• Integrates well with the existing TUI components

Use Cases

• Viewing file changes made by the agent
• Reviewing code modifications before confirmation
• Understanding what edits were applied to files

Related

Related to ALL-4821 (Display code diff for file editor action inside collapsible)

[jpelletier1]

Added to roadmap

[jpelletier1]

Recent survey data from SaaS suggests that some of the biggest benefits of GUI are:

• VSCode editor
• Being able to see code changes

I think GUI users appreciate the 'changes' tab, and thus being able to see the specific code changes. It would be great to add a similar feature to CLI.

[Astro-Han]

Built diffpane for a closely related terminal-first workflow.

The part that proved most useful in practice was not just colorized diffs, but having a dedicated review surface next to the agent while it is actively editing files. diffpane runs in a split pane, snapshots HEAD when it starts, and keeps showing the live diff against that baseline as the session progresses.

That made a big difference for:

• reviewing file changes made by the agent
• understanding edits before confirmation
• following multi-file changes in real time without repeatedly running git diff

So while diffpane is a separate TUI rather than a built-in OpenHands CLI panel, I think it is a useful reference point for the interaction model here: full-screen diff view, live updates, keyboard navigation, and a session-scoped baseline instead of a static one-off diff dump.

Demo:

[sjathin]

@malhotra5 Please take a look into the PR #661

To summarize my plan:

Phase 1 ( PR #661 ): Preserve Rich Text styling through the TUI rendering pipeline. The SDK's FileEditorObservation.visualize already generates colored diff output via visualize_diff(), but the TUI was discarding it by converting Text objects to plain strings with str(). This PR fixes that so diffs now render with red/green coloring in collapsibles.

Phase 2 (follow-up PR): Improve diff rendering quality. The SDK currently colors entire "before" and "after" blocks (context lines included), rather than only highlighting changed lines. Phase 2 would introduce a custom diff renderer that:

• Only colors +/- lines (red for removals, green for additions)
• Renders context lines as dim/neutral
• Adds a side-by-side two-column view