Diff Tracker
Diff Tracker is a VS Code extension that records file changes and provides three review modes:
- Inline readonly diff document
- VS Code side-by-side diff
- Cursor-like WebView diff with floating Undo/Keep actions
Fork From TinyTigerPan/DiffTracker
Screenshots
💥 Highlights in 0.9.0: Perfectly aligned tree view line statistics, smart Webview toolbar auto-scrolling, double-click confirmation for global actions, and settings hover tooltips.
| Cursor like WebView Unified |
Cursor like WebView Split |
 |
 |
| Editor Inline View |
Editor Inline View (hover effect) |
 |
 |
| Inline View 2 |
Side-by-side diff |
 |
 |
| New UI in 0.8.2 |
 |
Features
- [New 🚀] Tree View vs Flat View layout toggle buttons and configuration for file listings
- [New 🚀] Double-click confirmation protection for global Revert All and Accept All actions
- [New 🚀] Webview diff preferences persistence (Split/Unified, Line Wrap, Expand/Collapse) using VS Code globalState
- [New 🚀] Inline settings panel hover tooltips with operation guides
- [New 🚀] Modularized diff logic codebase splitting
diffTracker.ts into helper sub-modules for durability and performance
- [New 🚀] Pending, unaccepted changes survive VS Code restarts and are restored from the saved baseline
- [New 🚀] Automation-only tracking mode for AI/agent or extension-driven edits
- [New 🚀] Configurable WebView opening position (
current group or beside)
- [New 🚀] Automatically start recording file changes after the extension is activated
- Activity Bar Change Recording tree with file grouping
- Recording mode (start/stop) with workspace baseline snapshot
- Workspace-wide file watching (including external file changes)
- Inline readonly diff view with line and word-level highlights
- Side-by-side diff (
Original ↔ Current) via built-in VS Code diff
- Cursor-like WebView diff (Split/Unified, Wrap, Expand, Keep All, Reject All)
- Block-wise actions: Undo/Keep per change block
- File-level actions: Revert file, Revert all files, Keep all changes in file
- Deleted-line badge, CodeLens actions, and hover details
- Settings panel + Watch Ignore editor (
.gitignore style patterns)
Usage
- Open Diff Tracker from the Activity Bar.
- Recording starts automatically after the extension activates.
- Edit files in your workspace.
- In Change Recording, click a changed file to open inline diff.
- Use context menu or editor title buttons to open:
- Inline Diff (active file)
- Side-by-Side Diff
- WebView Diff
- In WebView Diff, use block-level Undo/Keep or file-level Keep All/Reject All.
- Use Revert File / Revert All Changes as needed.
- Stop recording when done.
How It Works
When recording starts, Diff Tracker:
- Captures baseline snapshots for workspace files (batched)
- Tracks file/document changes and rebuilds line/block diffs
- Serves virtual inline/original documents
- Restores pending changes after restart until they are accepted/reverted or the baseline is cleared
- Keeps tree, decorations, CodeLens, and WebView in sync
Installation
From VSIX
- Download the .vsix file
- Open VS Code
- Open Extensions (Cmd+Shift+X)
- Click ... -> Install from VSIX...
- Select the downloaded .vsix
Development
- Clone the repository
- Run npm install
- Run npm run compile
- Press F5 to launch the Extension Development Host
Requirements
Extension Settings
This extension provides the following settings:
| Setting |
Default |
Description |
diffTracker.showDeletedLinesBadge |
true |
Show a badge indicating deleted lines |
diffTracker.showCodeLens |
true |
Show CodeLens actions (Revert/Keep) above change blocks |
diffTracker.highlightAddedLines |
true |
Highlight added lines with green background |
diffTracker.highlightModifiedLines |
true |
Highlight modified lines with blue background |
diffTracker.highlightWordChanges |
true |
Highlight word-level changes within modified lines |
diffTracker.openWebviewBeside |
false |
Open Webview diff in a side editor group instead of the current editor group |
diffTracker.watchExclude |
[] |
Additional watch ignore patterns (.gitignore style) |
diffTracker.onlyTrackAutomatedChanges |
false |
Ignore manual typing in VS Code. External CLI/tool edits are still tracked, and VS Code extension edits can be tracked when they open an automation session first |
diffTracker.treeViewLayout |
"tree" |
Layout style of the change recording view ("tree" or "flat") |
You can toggle display/highlight settings in the sidebar Settings panel, and edit watch ignore patterns via Edit Watch Ignores.
When diffTracker.openWebviewBeside is enabled, Webview diff opens in a side editor group. By default it opens in the current editor group.
When diffTracker.onlyTrackAutomatedChanges is enabled:
- Manual typing in the editor is ignored
- External tools/CLI that modify files on disk are still tracked through file watchers
- VS Code extensions should call
diffTracker.beginAutomationSession before applying edits, and diffTracker.endAutomationSession after they finish
Example integration from another VS Code extension:
const sessionId = await vscode.commands.executeCommand<string>(
'diffTracker.beginAutomationSession',
{ allFiles: true, ttlMs: 30000 }
);
try {
// apply WorkspaceEdit or editor edits here
} finally {
await vscode.commands.executeCommand('diffTracker.endAutomationSession', sessionId);
}
Known Issues
- Pure line-ending-style changes (CRLF/LF only) are currently treated as no logical content change.
- If you find a reproducible diff/render edge case, please open an issue with a minimal file sample.
Release Notes
0.9.0 (Current)
- Perfectly Aligned Tree View Statistics: Replaced spaces-based visual calculations with an explicit structure where both green additions and red deletions (
🟢 +X 🔴 -Y) are permanently rendered (even as 🟢 +0 / 🔴 -0 if no changes occurred on one side). This yields a 100% stable, perfectly aligned column layout across all platforms and fonts in the sidebar.
- Smart Webview Navigation Auto-Scrolling: Added smart viewport check for Webview Diff block navigation (▲/▼). Clicking navigation arrows now scrolls the currently active change block back into the center of the viewport first if it has been scrolled out of view, before progressing to adjacent blocks.
0.8.4
- Stale Inline View Cache Fix: Resolved an issue where Accept/Reject actions buttons on individual change blocks would not appear in the Webview Diff Panel after editing the same file multiple times. This was caused by stale cached inline views not being cleared on document updates, which has now been fixed.
0.8.3
- Change Block Clustering Fix: Fixed a bug where far-apart edits separated by unmodified lines were incorrectly coalesced into a single block, resolving the issue where Accept/Reject action buttons were missing in the Webview Diff Panel.
0.8.2
- Interactive Diff Webview Panel: Integrated an interactive Webview Diff Panel using
@pierre/diffs to visualize changes with Split/Unified views, Line Wrap, and Expand All options.
- Action Buttons & Toolbar Navigation: Added Reject (Revert) and Accept (Keep) buttons on each change block, along with a block-by-block navigation widget (▲/▼) in the toolbar.
- Windows File Path Compatibility: Fixed issues with file path display and resolution in the Webview panel on Windows.
0.8.1
- Immediate Settings Refresh: Fixed Tree View to refresh immediately when the show/hide Flat View paths setting is toggled.
- Removed Inline Hover Action Buttons: Removed inline command icons that display on hover over tree items to keep the layout clean and prevent text overlapping.
0.8.0
- Aligned Diff Stats Columns: Aligned the green and red line statistics circles (🟢/🔴) and counts into tidy, fixed-width columns in the changes tree using figure spaces (\u2007).
- Toggle Path in Flat View: Added settings option to show/hide parent directory paths in the Flat View layout (
diffTracker.showFlatViewSubdirectories).
- Global Change Count: Added total additions and deletions counter (e.g.
(🟢 +X 🔴 -Y)) on the global "Revert All" and "Accept All" buttons.
0.7.1
- Line Statistics in Changes Tree: Added green/red line additions and deletions statistics (e.g.,
🟢 +X 🔴 -Y) next to files in both Flat and Tree layouts in the Change Recording view.
0.7.0
- Codebase Modularization: Refactored and split the 3000+ line orchestrator
diffTracker.ts into structured helper sub-modules under src/diff-tracker/ (types, ignore-matcher, automation-manager, session-persistence, diff-engine) for clean separation of concerns and robust testability.
- Flat View Layout: Added a Flat View layout option in addition to the traditional Tree View layout for changed files, with toggle buttons directly in the Changes View title bar.
- Double-Click Action Confirmation: Added safety confirmation prompt workflow to "Revert All Changes" and "Accept All Changes" buttons (double click to confirm) to prevent accidental reverts.
- Webview Preferences Save/Restore: Persist Webview configuration (Split/Unified style, Line Wrap, Expand/Collapse state) across editor restarts using VS Code's
globalState.
- Settings Hover Tooltips: Added helpful hover descriptions detailing settings functions in the settings tree panel.
- Comprehensive Unit Testing: Introduced modular tests covering diff calculation, similarity pairings, and WebView annotation mapping.
0.6.0
- Persist recording session state and workspace baselines so pending diffs can be restored after restarting VS Code
- Add
diffTracker.onlyTrackAutomatedChanges plus diffTracker.beginAutomationSession / diffTracker.endAutomationSession for automation-aware tracking workflows
- Add
diffTracker.openWebviewBeside, expose the new recording/display toggles in the settings tree, and make WebView diff open behavior more configurable
- Start recording automatically after activation and restore decorations/tree state when a previous session is resumed
0.5.2
- Fix watch ignore rules not refreshing in some recording states
- Reuse snapshot filtering in watcher updates to avoid tracking binary/oversized files
- Clear pre-seeded empty baseline for non-trackable created files in watcher flow
0.5.1
- Improve recording controls in Change Recording with inline start entry, starting status, and title start/stop actions
0.5.0
- Add Explorer file context action for Diff Tracker while recording, with the final label: Open with Diff Tracker
- Add configurable default open mode for changed files (WebView / Inline / Side-by-side / Original / Split Original+WebView)
- Add
Open split view mode (left original file + right WebView diff)
- Add global recording toggle shortcut:
Shift+Alt+D
- Improve changes tree to workspace-relative nested directory grouping
- Use VS Code native file icons in the changes tree
- Show changed-file count badge on the Diff Tracker activity icon
- Add and streamline global file actions in changes view workflows (Keep All / Revert All)
- Add
Clear Diffs baseline reset to current workspace state
- lots of optimizations & fixes
0.4.1
- Refactor diff pipeline to use a unified logical-line model
- Stabilize block grouping for large paste/delete and EOF scenarios
- Fix WebView empty-file rendering fallback that could hide block actions after full deletion
- Unify inline virtual URI mapping and refresh flow to prevent stale inline readonly content
- Improve mixed newline handling (LF/CRLF/CR) in Keep/Revert block operations
0.4.0
- Cursor-like WebView diff: floating Undo/Keep, unified view default, wrap/expand, and Keep All/Reject All in the toolbar
- Offline WebView rendering (bundled @pierre/diffs)
- Workspace-wide file watching (no longer limited to open files)
- New Watch Ignore panel with
.gitignore support
- Faster tracking in large workspaces (debounced changes + optimized watchers)
- Smoother recording start on big repos (baseline builds in batches, large files skipped)
0.3.3
- Add word-level diff highlighting for modified lines
- Add "Highlight Word Changes" setting to toggle word-level highlighting
0.3.2
0.3.1
- Add file-level "Revert All" / "Keep All" buttons (CodeLens at file top)
- Add settings panel in sidebar to toggle display options
- Fix block-wise keep/revert affecting all blocks instead of just one
- Fix hover showing "unknown" for deleted empty lines
0.3.0
- Add Partial Revert/Keep buttons, just like cursor
- Add go-to-original-file button in left panel
0.2.0
- Change from LCS-based diff to Patience Diff algorithm for more intuitive diff display
0.1.0
- Activity Bar entry
- Recording mode for change tracking
- Inline diff highlighting
- Side-by-side diff
- Multi-file tracking with timestamps
- Revert file and revert all
- Clear diffs
License
MIT
| |