Skip to content

Feature: Branch Diff — compare two branches side by side #25

@zelon

Description

@zelon

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

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions