feat(chat): Improve diff appearance in main chat view #8932
Conversation
dosubot
bot
added
the
size:XL
Review SummaryAll previously flagged issues have been successfully resolved. No new issues found in the latest commit. Issues to Fix
Previous Reviews
Mention @roomote in a comment to trigger your PR Fixer agent and make changes to this pull request. |
![ellipsis-dev[bot]](https://avatars.githubusercontent.com/in/64358?s=60&v=4){kind=small}
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a new DiffView component to render unified diffs with VSCode-style formatting, and enhances the UI to display diff statistics (+/- line counts) for file operations. The changes improve the visual presentation of code changes across the application.
- Adds a DiffView component for rendering unified diffs with side-by-side line numbers
- Implements diff stats computation and display for file edit operations
- Converts SEARCH/REPLACE and new file formats to unified diff format
Reviewed Changes
Copilot reviewed 7 out of 8 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| webview-ui/src/components/common/DiffView.tsx | New component to render unified diffs with VSCode styling |
| webview-ui/src/components/common/CodeAccordian.tsx | Adds diff stats display and integrates DiffView for diff language |
| webview-ui/src/components/chat/ChatRow.tsx | Computes diff stats and converts various diff formats to unified diff |
| webview-ui/src/components/chat/BatchDiffApproval.tsx | Adds diff stats computation and SEARCH/REPLACE conversion |
| webview-ui/src/components/chat/tests/ChatRow.diff-actions.spec.tsx | New test file for diff stats functionality |
| webview-ui/src/components/chat/ChatView.tsx | Comment clarification update |
| webview-ui/package.json | Adds diff library dependencies |
| pnpm-lock.yaml | Lockfile updates for new dependencies |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=60&v=4){kind=small}
hannesrudolph
added
the
Issue/PR - Triage
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
|
Addressed remaining review item: replaced hardcoded #ffffff with theme foreground for +/- indicators in DiffView.tsx. All CI checks are green on the latest run. The github-advanced-security entry posted a blank comment and CodeQL is passing; there are no actionable security findings attached to this PR right now. |
|
Resolved the CodeQL warning shown in your screenshot. Updated stripCData() to: (1) convert HTML-encoded CDATA markers to raw, then (2) strip raw markers. This removes the no-op replacement flagged by CodeQL. Changes around lines 58-64. |
|
fix(webview-ui): Correct new-file diff line counting by ignoring trailing newline in unified diff; added a unit test to cover this behavior.
|
- Add DiffView with line numbers, +/- column, wrapping - Show inline +/− counts in headers - Convert SEARCH/REPLACE to unified diffs - Remove Undo mechanism (UI/backend) - Update tests and deps (diff, @types/diff)
… match existing patterns
…e special-case counting and add test (addresses roomote review)\n\n- Remove special-case line counting for newFileCreated in [diffStatsForInline](webview-ui/src/components/chat/ChatRow.tsx:472)\n- Always use [computeDiffStats()](webview-ui/src/components/chat/ChatRow.tsx:118)\n- Add test to assert +N/-0 for new files in [ChatRow.diff-actions.spec.tsx](webview-ui/src/components/chat/__tests__/ChatRow.diff-actions.spec.tsx)
…onents/common/DiffView.tsx)\n\n- Tint only content and +/- gutter; keep line-number columns neutral\n- Match look of VSCode unified diff blocks (clear red/green bands)\n
…yling - Integrate highlighter for code syntax based on file language - Adjust background colors for additions and deletions to match VSCode styles - Refactor rendering logic to include inline highlighting and gutter styles
…iew rendering Add diffUtils with unified diff normalization: - extractUnifiedDiff, convertSearchReplaceToUnifiedDiff, convertNewFileToUnifiedDiff BatchDiffApproval: - normalize tool output to unified diff via extractUnifiedDiff - compute unified diff stats - remove CDATA handling and legacy conversion paths DiffView: - add compact gap rows between hunks - dedicated +/- column - improved gutter/background and layout tweaks ChatRow: - integrate unified diff normalization pipeline
…oved compatibility
…to support light/dark themes
…L-encoded CDATA markers and removing no-op replacement
…s without no-op replacements (resolves CodeQL warning)
…ling newline in unified diff; add test for ChatRow
… header detection; reuse extractUnifiedDiff for new-file rendering
…unified patch in single-file approval; remove client-side fallback normalization for appliedDiff; align gap-row styling to editor background
…f content processing
hannesrudolph
force-pushed
the
feat/diff-view-chatview
branch
from
f0ff55c to
5256aed
Compare
- Fix stripCData() to properly handle HTML-encoded CDATA markers - Fix convertNewFileToUnifiedDiff() to emit valid hunks for empty files - Improve DiffView patch selection to match by filePath - Add performance optimization to disable highlighting for large diffs (>1000 lines) - Improve theme detection using proper VS Code theme classes - Extract duplicate diff stats logic into shared utility module
…ting mode When PREVENT_FOCUS_DISRUPTION experiment is enabled, write_to_file was not generating a unified diff for existing files, causing the diff not to display in the chat view. Now generates the same diff format as non-background mode for consistency.
| content: newContent, | ||
| content: fileExists ? undefined : newContent, | ||
| diff: fileExists | ||
| ? formatResponse.createPrettyPatch(relPath, cline.diffViewProvider.originalContent, newContent) |
There was a problem hiding this comment.
When editing an existing file, the completeMessage now omits 'content' in favor of a 'diff' field generated from cline.diffViewProvider.originalContent. Ensure that originalContent is reliably loaded before this call (especially in the preventFocusDisruption branch) so the diff patch is accurate. Consider moving the original file read before constructing completeMessage if needed.
hannesrudolph
moved this from PR [Draft / In Progress]
to PR [Needs Prelim Review]
in Roo Code Roadmap
hannesrudolph
added
PR - Needs Preliminary Review
and removed
PR - Draft / In Progress
labels
…d mode Moved originalContent loading before diff generation to ensure proper diff comparison. Previously, the diff was being generated with empty originalContent, causing all lines to appear as additions.
| content: fileExists ? undefined : newContent, | ||
| diff: fileExists | ||
| ? formatResponse.createPrettyPatch(relPath, cline.diffViewProvider.originalContent, newContent) | ||
| : undefined, | ||
| } satisfies ClineSayTool) |
There was a problem hiding this comment.
The originalContent is accessed before it's loaded. In the preventFocusDisruption flow, cline.diffViewProvider.originalContent is undefined at line 209, but isn't populated until line 223 (after the askApproval call). This causes createPrettyPatch to generate a diff against empty content, showing all lines as additions instead of the actual changes. The original content needs to be loaded before creating the diff message.
Fix it with Roo Code or mention @roomote and request a fix.
This PR improves how edits are displayed in the main chat view:
Scope: UI-only presentation improvements for diffs and counters; no changes to tool behavior.
Important
Improved diff appearance in chat view with new components for rendering and statistics, and updated backend tools to support unified diffs.
ChatRow.tsxandBatchDiffApproval.tsxusingDiffViewcomponent.CodeAccordian.tsx.DiffView.tsxfor rendering unified diffs with line numbers.diffStats.tsfor computing diff statistics.diffUtils.tsfor diff normalization and extraction.applyDiffTool.ts,multiApplyDiffTool.ts, andwriteToFileTool.tsto generate unified diffs for display.ChatRow.diff-actions.spec.tsxto test inline diff stats and actions.diffand@types/difftopackage.json.This description was created by
for 7906320. You can customize this summary. It will automatically update as commits are pushed.