Flow Diff

WebStorm-style side-by-side git diff viewer for VS Code: aligned panes with filler lines, curved connectors in the center gutter linking changed blocks, word-level intra-line highlights and chunk navigation.

Features

• Side-by-side diff of a file against HEAD (working tree or index), rendered in a custom webview that follows your VS Code theme.
• Aligned panes: changed blocks stay vertically aligned via hatched filler lines, exactly like WebStorm's diff viewer.
• Center-gutter connectors: colored bands link each changed block on the left to its counterpart on the right (green = added, red = removed, blue = modified).
• Word-level highlights inside modified lines, with a noise guard that skips intra-line marks when nearly the whole line changed.
• Smart scroll sync: the panes scroll together through a piecewise mapping anchored at chunk boundaries — context scrolls 1:1, and while traversing a large change the shorter side keeps its counterpart near mid-screen, with context visible above and below.
• Chunk navigation: F7 / Shift+F7 (like WebStorm) or the floating toolbar, with a "n / m" counter; chunk markers in the overview ruler and minimap.
• Per-chunk actions in the center gutter: revert (⟲) and stage (+) for working-tree diffs, unstage (−) for index diffs — hunk-level staging via git apply --cached. Already-staged chunks render dimmed.
• File actions in the panel title bar, like the built-in diff editor: Open File, previous/next change, Stage File, Unstage File, Discard Changes.
• Editable diff: both panes are Monaco editors — the working-tree side is fully editable in place (undo, multi-cursor, find, IME). Edits sync live into the real document (kept dirty); Ctrl+S inside the diff saves.
• Syntax highlighting that matches your actual color theme: the active theme's JSON is resolved host-side (includes merged) and loaded into shiki.
• Live refresh: the diff updates in place as you edit and save, or as the git state changes.
• Respects your editor.* settings (font, line height, minimap, …).

Usage

• Command palette → Flow Diff: Open Diff (Working Tree vs HEAD) for the active file.
• Right-click a file in the Source Control view → Open Diff.
• Changed files show a diff button in the editor title bar.
• Flow Diff: Open Diff (Index vs HEAD) compares the staged copy instead.
• By default Flow Diff also takes over the diff tabs opened by the built-in git extension (setting flowDiff.interceptGitOpenChange).

Roadmap

• Local Changes tree view grouped by directory.
• Compare with arbitrary branch/revision.

Development

npm install
npm run compile      # host (tsc) + webview type-check + esbuild bundle
npm test             # unit tests for the diff engine (node --test)

Press F5 to launch the Extension Development Host. A playground repo with edits covering every diff case can be generated alongside this project (bridge-diff-playground).