feat: enhance multi-search-replace

refactor(tools): Make applyDiffTool backward compatible and fix errors

Makes `src/core/tools/applyDiffTool.ts` backward compatible by
allowing it to process both the new XML-based `args` parameter
and the legacy `path`, `diff`, and `start_line` parameters.

This change also resolves TypeScript errors that arose from
duplicated code during the initial refactoring for multi-diff
support.

Author: samhvw8

docs/apply-diff-ui-improvements.md

@@ -0,0 +1,196 @@
+# Apply Diff UI/UX Improvements
+
+This document describes the improved UI/UX components for the apply diff functionality in Roo Code.
+
+## Overview
+
+The new apply diff UI provides a comprehensive interface for reviewing and applying batch file changes with enhanced visual feedback, granular control, and better error handling.
+
+## Components
+
+### 1. BatchDiffView
+
+The main component that displays all files with pending changes in an organized, hierarchical view.
+
+**Features:**
+
+- **Directory Grouping**: Files are automatically grouped by their directory paths
+- **Individual Selection**: Each file has a checkbox for granular control
+- **Batch Actions**: "Select All/Deselect All" for quick batch operations
+- **Status Indicators**: Visual icons showing success (✓), error (⚠), or partial status
+- **Change Summary**: Shows total files, selected files, and change counts
+- **Expandable Details**: Click to expand and see individual diff previews
+
+**Usage:**
+
+```tsx
+import { BatchDiffView } from './components/chat/BatchDiffView'
+
+<BatchDiffView
+  files={[
+    {
+      path: 'src/components/Button.tsx',
+      diffs: [...],
+      selected: true,
+      expanded: false
+    }
+  ]}
+  onApprove={(approvedFiles) => {...}}
+  onReject={() => {...}}
+  ts={timestamp}
+/>
+```
+
+### 2. BatchDiffPreview
+
+A sophisticated diff preview component that displays changes in a side-by-side view.
+
+**Features:**
+
+- **Split View**: Shows original (search) and modified (replace) content side by side
+- **Syntax Highlighting**: Language-aware code highlighting using the existing CodeBlock component
+- **Multi-Change Navigation**: Navigate between multiple changes with arrow buttons or dots
+- **Copy Functionality**: Copy all changes in diff format
+- **Line Information**: Shows affected line numbers
+- **Responsive Design**: Adjustable height with scroll support
+
+**Usage:**
+
+```tsx
+import { BatchDiffPreview } from './components/chat/BatchDiffPreview'
+
+<BatchDiffPreview
+  filePath="src/utils/helpers.ts"
+  changes={[
+    {
+      searchText: "function foo() {",
+      replaceText: "export function foo(): void {",
+      startLine: 10
+    }
+  ]}
+  expanded={true}
+  onToggleExpand={() => {...}}
+/>
+```
+
+### 3. ApplyDiffView
+
+The container component that orchestrates the entire diff approval workflow.
+
+**Features:**
+
+- **Processing Status**: Real-time updates during diff application
+- **Error Handling**: Clear visual feedback for failures
+- **Preview Panel**: Optional side panel for detailed diff preview
+- **Quick Preview Buttons**: Fast access to preview first 5 files
+- **WebSocket Integration**: Listens for status updates from backend
+
+**Usage:**
+
+```tsx
+import { ApplyDiffView } from './components/chat/ApplyDiffView'
+
+<ApplyDiffView
+  taskId="task-123"
+  files={diffFiles}
+  onComplete={() => {...}}
+  ts={timestamp}
+/>
+```
+
+### 4. ApplyDiffTool
+
+Integration component that bridges the existing tool format with the new UI components.
+
+**Features:**
+
+- **Format Conversion**: Handles both batch and legacy single-file formats
+- **Diff Parsing**: Extracts search/replace content from diff strings
+- **Backward Compatibility**: Works with existing tool data structures
+
+## UI/UX Improvements
+
+### Visual Organization
+
+- Files grouped by directory for better mental model
+- Clear visual hierarchy with indentation and borders
+- Consistent use of VSCode theme colors
+
+### User Control
+
+- Granular file selection with batch operations
+- Preview before applying changes
+- Clear approve/reject actions
+
+### Feedback
+
+- Real-time status updates
+- Progress indicators during processing
+- Success/error states with appropriate icons
+- Descriptive error messages
+
+### Performance
+
+- Lazy loading of diff previews
+- Efficient rendering with React memoization
+- Minimal re-renders during status updates
+
+## Integration Guide
+
+To integrate these components into the existing chat view:
+
+1. Import the ApplyDiffTool component:
+
+```tsx
+import { ApplyDiffTool } from "./components/chat/tools/ApplyDiffTool"
+```
+
+2. Use it in the tool rendering logic:
+
+```tsx
+case "appliedDiff":
+  return <ApplyDiffTool tool={tool} onComplete={handleComplete} />
+```
+
+3. Handle the approval response in the backend:
+
+```typescript
+// Listen for objectResponse with action: "applyDiff"
+if (askResponse === "objectResponse") {
+	const data = JSON.parse(text)
+	if (data.action === "applyDiff") {
+		// Process approved files
+		const approvedFiles = data.approvedFiles
+		// Apply diffs only to approved files
+	}
+}
+```
+
+## Accessibility
+
+- Keyboard navigation support
+- ARIA labels for interactive elements
+- Focus management for modal-like interactions
+- Screen reader friendly status messages
+
+## Future Enhancements
+
+1. **Inline Diff Mode**: Option to view diffs inline instead of side-by-side
+2. **Syntax Error Detection**: Pre-validate changes for syntax errors
+3. **Undo/Redo**: Allow reverting applied changes
+4. **Diff Statistics**: Show lines added/removed counts
+5. **Search & Filter**: Find specific changes across files
+6. **Conflict Resolution**: Handle merge conflicts intelligently
+
+## Testing
+
+Comprehensive test coverage is provided in:
+
+- `BatchDiffView.test.tsx` - Unit tests for the main view component
+- Integration tests can be added to verify the full workflow
+
+Run tests with:
+
+```bash
+npm test -- BatchDiffView
+```