Overview
Add a Branch Diff view that lets users select any two branches and instantly see the diverging commits and the combined diff between them. This is especially useful for reviewing changes before opening a Pull Request.
Proposed Features
Branch Selection
- Two branch pickers (base / compare) shown at the top of the view
- Defaults to: base =
main (or master), compare = current branch
- Swap button to quickly reverse the comparison direction
Commit List Panel
- Shows commits that exist in compare but not in base (
git log base..compare)
- Each row: short hash, author, date, commit subject
- Click a commit to preview its individual diff in the right panel
Combined Diff Panel
- Aggregated diff of all diverging commits (
git diff base...compare)
- Same
DiffViewer component already used elsewhere in the app
- File tree sidebar to jump to a specific changed file
Summary Bar
N commits ahead · M files changed · +X −Y lines
- Shown between the two panels as a quick overview
Expected UX Flow
Branch tab → "Compare" button
→ Branch Diff view opens
→ Select base branch (e.g. main) and compare branch (e.g. feature/foo)
→ Left panel: list of commits unique to compare branch
→ Right panel: full combined diff (git diff base...compare)
→ Click a commit → right panel switches to that commit's diff
→ "Open PR" shortcut button (future: GitHub integration)
ASCII Mockup
┌──────────────────────────────────────────────────────────────┐
│ Branch Diff │
│ Base: [main ▾] ⇄ Compare: [feature/login ▾] │
│ 3 commits ahead · 5 files changed · +120 −34 lines │
├────────────────────────┬─────────────────────────────────────┤
│ Commits (3) │ Diff (base...compare) │
│────────────────────────│─────────────────────────────────────│
│ ▶ a1b2c3 Add login UI │ src/auth/Login.tsx │
│ d4e5f6 Add auth API │ @@ -0,0 +1,80 @@ │
│ g7h8i9 Add tests │ + import React from 'react' │
│ │ + export function Login() { │
│ │ + return <form>...</form> │
│ │ ... │
└────────────────────────┴─────────────────────────────────────┘
Implementation Notes
- New tab or panel: Add a "Compare" button to
BranchTab.tsx that opens a BranchDiffTab view
- Backend commands needed:
git log <base>..<compare> --oneline — diverging commit list
git diff <base>...<compare> — combined diff (three-dot for merge-base diff)
- Reuse existing components:
DiffViewer.tsx for the diff panel
- Commit row rendering from
HistoryTab.tsx
- Related files:
src/components/tabs/BranchTab.tsx
src/components/shared/DiffViewer.tsx
src/lib/git-api.ts
src-tauri/src/parsers/history.rs
Related Features
- Natural stepping stone toward GitHub PR creation integration
- Pairs well with the planned Interactive Rebase UI
Overview
Add a Branch Diff view that lets users select any two branches and instantly see the diverging commits and the combined diff between them. This is especially useful for reviewing changes before opening a Pull Request.
Proposed Features
Branch Selection
main(ormaster), compare = current branchCommit List Panel
git log base..compare)Combined Diff Panel
git diff base...compare)DiffViewercomponent already used elsewhere in the appSummary Bar
N commits ahead · M files changed · +X −Y linesExpected UX Flow
ASCII Mockup
Implementation Notes
BranchTab.tsxthat opens aBranchDiffTabviewgit log <base>..<compare> --oneline— diverging commit listgit diff <base>...<compare>— combined diff (three-dot for merge-base diff)DiffViewer.tsxfor the diff panelHistoryTab.tsxsrc/components/tabs/BranchTab.tsxsrc/components/shared/DiffViewer.tsxsrc/lib/git-api.tssrc-tauri/src/parsers/history.rsRelated Features