Fixes #5207: Add side-by-side diff preview capability for multi-file apply_diff

[roomote]

Summary

This PR implements a comprehensive solution for GitHub issue #5207, adding side-by-side diff preview capability to the multi-file apply_diff experiment in the Roo-Code repository.

Changes Made

New Components

• SideBySideDiffViewer: A new React component that provides both unified and split-view diff rendering
• Test Coverage: Comprehensive test suite for the new component

Enhanced Components

• BatchDiffApproval: Modified to include view mode toggles between traditional and side-by-side views
• CSS Variables: Added VSCode diff editor color variables for proper theming

Technical Improvements

• Diff Parsing: Advanced logic to convert search/replace format to structured diff data
• View Modes: Support for both unified and split-view diff rendering
• File Navigation: Controls for multi-file operations with expand/collapse functionality
• Color Coding: Proper highlighting for additions, deletions, and unchanged lines
• VSCode Integration: Full integration with VSCode's color scheme and UI patterns

Testing & Configuration

• Vitest Configuration: Fixed to support React development mode for testing
• Test Suite: Added comprehensive tests covering all major functionality

Features

The implementation provides:

• 📁 File navigation controls for multi-file operations
• 📊 Parallel columns showing original vs modified content
• 🎨 Color coding for additions, deletions, and unchanged lines
• 📋 Summary view showing all affected files
• 🔄 Toggle between traditional search/replace and modern side-by-side views
• 🎯 Expand/collapse functionality for individual files
• 📱 Responsive design that works with VSCode's theming

Testing

All tests pass successfully:

• Component rendering tests
• File summary display tests
• Multi-file handling tests
• Edge case handling (empty/undefined files)

Screenshots

The new side-by-side diff viewer provides a modern, intuitive interface for reviewing multi-file changes, significantly improving the user experience when working with the apply_diff tool.

Fixes #5207

---

Important

Adds side-by-side diff preview capability for multi-file diffs with new components, enhanced theming, and comprehensive testing.

• New Components:
  • SideBySideDiffViewer: New React component for unified and split-view diff rendering.
  • Comprehensive test suite for SideBySideDiffViewer in SideBySideDiffViewer.spec.tsx.
• Enhanced Components:
  • BatchDiffApproval: Added view mode toggles for traditional and side-by-side views.
  • Added VSCode diff editor color variables in index.css for theming.
• Technical Improvements:
  • parseDiffContent() in SideBySideDiffViewer.tsx: Parses search/replace format to structured diff data.
  • Supports unified and split-view rendering with file navigation and color coding.
• Testing & Configuration:
  • Updated vitest.config.ts to support React development mode.
  • Added tests for component rendering, file summary display, and edge cases.

^{This description was created by for 944cb4e. You can customize this summary. It will automatically update as commits are pushed.}

[delve-auditor]

✅ No security or compliance issues detected. Reviewed everything up to 944cb4e.

Security Overview

• 🔎 Scanned files: 5 changed file(s)

Detected Code Changes

The diff is too large to display a summary of code changes.

Reply to this PR with @delve-auditor followed by a description of what change you want and we'll auto-submit a change to this PR to implement it.

[KJ7LNW]

I am already working on this in #3055 which will also remove a lot of duplicated code across tools