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 |
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