Diff Viewer
Compare changes with unified and side-by-side views
Overview
The Diff Viewer shows code changes with syntax highlighting, helping you review modifications before committing or merging. Compare branches, view staged changes, or review pull requests directly in Agentastic.
Opening the Diff Viewer
From Source Control
- Open the Source Control Navigator (sidebar)
- Click on a modified file to see its diff
- Staged and unstaged changes are shown separately
From Command Palette
- Open Command Palette (Cmd+Shift+P)
- Type "diff" or "compare"
- Select the comparison you want
View Modes
The Diff Viewer supports two display modes. Toggle between them using the toolbar.
Unified View
A single-column view similar to GitHub's diff display:
- Added lines highlighted in green
- Removed lines highlighted in red
- Context lines shown for reference
- Line numbers from both old and new files
Best for: Quick reviews, smaller changes, linear reading.
Side-by-Side View
A two-column view showing old and new versions simultaneously:
- Left column: original file
- Right column: modified file
- Changes aligned horizontally
- Easy to compare exact differences
Best for: Large refactors, complex changes, detailed comparison.
Color Coding
| Color | Meaning |
|---|---|
| Green background | Added lines |
| Red background | Removed lines |
| No highlight | Unchanged context lines |
Navigating Diffs
File List
The left panel shows all changed files:
- Up/Down arrows - Navigate between files
- Enter - Open selected file in editor
- Click the toggle to show/hide the file list
Each file shows:
- File path
- Change count (+additions / -deletions)
- Status icon (modified, added, deleted, renamed)
Within a Diff
- Scroll to navigate through changes
- Hunks are separated by context dividers
- Click line numbers to jump to that line in the editor
Integration with Code Review
The Diff Viewer works seamlessly with Code Review:
- Review your changes in the Diff Viewer
- Click the Code Review button in the toolbar
- AI agents analyze the visible diff
- Review feedback appears in the terminal
Comparing Branches
When comparing branches, the Diff Viewer shows:
- Base branch - The target branch (e.g.,
main) - Head branch - Your feature branch
- All commits between the two branches
- Complete unified diff
The title bar shows the comparison: feature-x vs main
File Status Icons
| Icon | Status | Description |
|---|---|---|
| M | Modified | File has changes |
| A | Added | New file |
| D | Deleted | File removed |
| R | Renamed | File moved/renamed |
Performance & Large Diffs
The Diff Viewer is built to stay responsive no matter how big the change is — reviewing what your agents did is something you do constantly, so it should never make the app wait.
- Large diffs open and scroll smoothly. Row layout, highlighting, and character-level diffing happen off the main thread, so even very large diffs don't freeze the app.
- Streaming load. Big diffs stream in incrementally instead of blocking until everything is ready.
- Syntax highlighting on bigger files. Highlighting now applies to much larger files than before.
- "Show remaining lines" expander. Enormous diffs (tens of thousands of lines) load a capped portion first and keep the rest behind a Show remaining lines button, so the view stays fast — click it to reveal the remainder.
Keyboard Shortcuts
| Action | Shortcut |
|---|---|
| Open file in editor | Enter |
| Navigate files | Up / Down |
| Toggle file list | Click sidebar toggle |
Tips
- Review smaller chunks - Break large changes into smaller commits for easier review
- Use side-by-side for refactors - When moving code around, side-by-side view helps track relocations
- Check the summary - File list shows total additions/deletions at a glance
- Combine with AI review - Use Code Review agents for automated feedback on your diff