Git Staging View

A powerful VS Code extension that provides an Eclipse EGit-style staging view with advanced commit graph visualization for managing Git changes across multiple repositories.

This extension is inspired by the excellent Git Graph extension, incorporating its graph visualization approach while adding a comprehensive staging interface.

Screenshots

Main View

Dual-panel layout with file staging on the left and interactive commit graph on the right

Context Menus

File Operations

Right-click files to compare, stage/unstage, or replace with different revisions

Commit Operations

Right-click commits to cherry-pick, reset, revert, or create branches

Branch Operations

Right-click branch names in the commit history to switch branches

Repository Operations

Right-click repository to switch branches, fetch, pull, reset, or rebase

Features

Dual-Panel Layout

• Left Panel: Unstaged and staged changes with tree view (1/3 of width by default)
• Right Panel: Commit message area and interactive commit graph (2/3 of width by default)
• Resizable Panels: Drag the divider between panels to customize your layout (20%-80% range)
• Resizable Graph Column: Drag the resize handle in the graph header or any row to adjust graph width

Advanced Commit Graph

The history lanes display is inspired by the excellent vscode-git-graph extension.

• SVG-Based Visualization: Beautiful colored branch lanes with curved merge lines
• Compact Layout: Optimized lane assignment with longest branches on the left
• Sticky Column Headers: Graph, Message, Author, Date, and Commit headers stay visible when scrolling
• EGit-Style Display:
  • Commit hash in rightmost column
  • Visual graph lanes in leftmost column
  • Commit message starting right after the graph
  • Author and date columns
  • Consistent 13px font size
• Infinite Scroll: Automatically loads more commits as you scroll
• Resizable Graph Column: Drag the resize handle to adjust graph width (synchronized across header and all rows)
• Search & Filter:
  • Search by commit hash, message, branch name, tag, or author
  • Clear button (×) for quick search reset
  • Press Enter to execute search
• Branch Views:
  • Toggle between current branch and all branches
  • Hide remote commits option (checked by default)
  • Show Tags toggle (unchecked by default) - displays tag names in graph
• Tag Tooltip: Hover over displayed tag at top to see all repository tags
• Commit Selection: Select multiple commits using checkboxes
  • Visual highlighting of selected commits
  • Selection state persists during graph updates
• Context Menu: Right-click any commit for:
  • Squash Selected Commits (when 2+ commits selected)
  • Cherry-pick
  • Reset (soft/mixed/hard)
  • Revert
  • Reword Commit Message (HEAD commit only)
  • Create branch from commit

Multi-Repository Support

• Automatic detection of all Git repositories in workspace
• Dropdown selector to switch between repositories
• Repository-specific state tracking
• Real-time branch, tag, and ahead/behind status

File Management

• Tree View: Files organized by folder structure
• Click to Stage/Unstage: Single-click operation
• Batch Operations:
  • Stage All / Unstage All (Eclipse-style colored arrow icons)
  • Collapse All / Expand All folders
• Visual Status Indicators:
  • A - Added
  • M - Modified
  • D - Deleted
  • R - Renamed
  • U - Unmerged/Conflict

Toolbar Layout

• Commit Message Area: Multi-line textarea with AI-generate button inside (bottom-right)
• Actions Row: Commit + Amend + Push + Force buttons with repository dropdown below
• Push Button: Dynamically shows remote name (e.g., "Push to origin")
• Repository Dropdown: Shows remote in parenthesis (e.g., "my-repo (origin)")
• Fetch/Pull Buttons: Quick access to fetch and pull operations
• Git Flow Animation: Visual workflow indicator pushed to far right
• Branch Display: Current branch name in larger font with ahead/behind status

Git Operations

• Commit: Commit staged changes with message validation
• Amend Commit: Checkbox to amend the last commit with new changes and/or message
• Reword Commit: Edit the message of the most recent commit
  • Right-click the HEAD commit in the graph
  • Select "Reword Commit Message"
  • Edit the message in the modal dialog
  • Auto-selects existing text for quick editing
  • Only works on HEAD commit for safety
• Squash Commits: Combine multiple commits into one
  • Select contiguous commits using checkboxes (must include HEAD)
  • Right-click and choose "Squash Selected Commits"
  • Confirm the selection
  • Edit the combined commit message in the modal
  • Creates a single commit with all changes
  • Must start from HEAD for safety
• Push: Push commits to remote with formatted response modal
  • Remote selection dropdown when multiple remotes are configured
  • Force Push checkbox for explicit git push --force (unchecked by default)
  • Smart credential prompting for remotes requiring authentication
  • Response displayed in modal with clickable URLs (e.g., pull request links)
  • Color-coded messages and hints section
  • Automatically refreshes view after successful push
• Fetch: Fetch updates from remote with remote selection
  • "Git: Fetch" for quick fetch from default remote
  • "Git: Fetch (with options)" for remote selection dropdown
  • Fetches all branches from selected remote
• Pull: Pull with remote and branch selection
  • Auto-stash support for uncommitted changes
  • Automatically stashes and restores local changes during pull
• Refresh View: Manually refresh all repository data
• Compare Operations:
  • Compare with HEAD
  • Compare with previous revision
  • Compare with any branch, tag, or reference
  • Compare with specific commit
• Replace Operations:
  • Replace with HEAD revision
  • Replace with previous revision
  • Replace with any branch, tag, or reference
  • Replace with specific commit
• Repository Operations:
  • Switch to branch/tag/commit
  • Create new branch from branch/commit
  • Rebase onto branch
  • Create tag (lightweight or annotated)
  • Fetch
  • Pull / Pull (force)
  • Reset
  • Rebase
  • Merge
• Rebase Conflict Handling: Automatic conflict detection and resolution workflow
  • View automatically refreshes when conflicts are detected
  • Conflicted files appear immediately in Unstaged Changes section
  • Action buttons (Continue Rebase, Abort Rebase, Skip Commit) for resolving conflicts
• Stash Management: Complete stash workflow support
  • Stash Changes: Save uncommitted changes with optional message
  • Pop Stash: Apply and remove the most recent stash
  • Apply Stash: Apply stash without removing it
  • Drop Stash: Delete a specific stash entry
  • View Stash: Preview stash contents in diff view
• Remote Management: Full CRUD operations for Git remotes
  • View all remotes with their URLs
  • Add, rename, change URL, or remove remotes
  • Command Palette: "Git: Manage Remotes..."
• Enhanced Error Display: Push and revert errors shown in formatted modal with hints

Performance

• Efficient Graph Rendering: Handles 500+ commits smoothly
• Smart Lane Calculation: Optimized algorithm for clean graph layout
• Incremental Loading: Loads 100 more commits per scroll
• Git-Level Filtering: Efficient remote commit exclusion

Usage

Opening the Staging View

Command Palette (Ctrl+Shift+P):

Git: Show Staging View

Keyboard Shortcut (when Explorer is focused):

Ctrl+Shift+G S

Context Menu:

• Right-click any file in Explorer → Git Staging submenu

Working with Files

1. Staging Files:

   • Click any file in Unstaged Changes to stage it
   • Or use Stage All button

2. Unstaging Files:

   • Click any file in Staged Changes to unstage it
   • Or use Unstage All button

3. Comparing Files:

   • Right-click a file → Git Staging → Compare with...
   • Choose HEAD, previous revision, reference, or specific commit

4. Replacing File Content:

   • Right-click a file → Git Staging → Replace with...
   • Reverts file to selected revision

Using the Commit Graph

1. Navigation:

   • Scroll to view commit history
   • Automatically loads more commits at bottom
   • Use search box to find specific commits

2. Branch Visibility:

   • Click Show All Branches to see all branches
   • Check Hide Remote Commits to exclude remote tracking branches (default)

3. Commit Operations:

   • Right-click any commit for context menu
   • Squash Selected Commits: Combine multiple commits (requires 2+ selected)
     • Check boxes next to commits you want to squash
     • Must include HEAD (the topmost commit)
     • Commits must be contiguous (adjacent in history)
     • Confirm selection, then edit the combined message in a modal
   • Reword Commit Message: Edit the most recent commit's message
     • Only available for HEAD commit
     • Opens modal dialog with existing message auto-selected
     • Edit and save to update the commit
   • Cherry-Pick: Apply commit to current branch
   • Reset: Move branch pointer (soft/mixed/hard)
   • Revert: Create new commit that undoes changes
   • Create Branch: Create new branch from commit

4. Search:

   • Type in search box and press Enter
   • Searches: hash, short hash, message, refs, author
   • Click × to clear search

Committing Changes

1. Enter commit message in the text area
2. Amend Checkbox (optional):
   • Check to amend the last commit
   • Automatically loads the previous commit message
   • Combine new staged changes with the previous commit
3. Commit button: Creates commit locally (or amends if checkbox is checked)

Pushing Changes

1. Push button: Push commits to remote
   • Displays response in a formatted modal window
   • Shows remote messages with clickable URLs (pull request links)
   • Automatically refreshes view on success
2. Force Push (use with caution):
   • Check the "Force Push" checkbox next to Push button
   • Required for git push --force operations
   • Prevents accidental force pushes

Repository Management

Repository Header Controls:

• Repository dropdown: Switch between detected Git repositories
• Refresh View: Manually refresh all data
• Fetch: Fetch updates from remote and refresh view

For Files (right-click in Explorer):

• Git Staging submenu with all file operations

For Folders (right-click repository root):

• Switch to... (branch/tag/commit)
• Fetch, Pull, Pull (force)
• Reset, Rebase, Merge

Resolving Rebase Conflicts

When a rebase encounters conflicts:

1. Automatic Detection:

   • View automatically opens and displays rebase indicator
   • Conflicted files appear in Unstaged Changes with conflict markers (U)
   • View refreshes automatically to show all conflict files

2. Resolve Conflicts:

   • Click conflicted files to open and edit them
   • Resolve conflicts by choosing which changes to keep
   • Stage the resolved files (click to move to Staged Changes)

3. Complete Rebase:

   • Continue Rebase: Once all conflicts are resolved and staged, click to continue
   • Skip Commit: Skip the current commit that caused conflicts
   • Abort Rebase: Cancel the rebase and return to original state

The view monitors Git's rebase state files and updates automatically throughout the process.

Graph Visualization Details

Color Scheme

• Blue (#3b82f6) - Primary branch
• Green (#10b981) - Feature branches
• Orange (#f59e0b) - Warning/HEAD commits
• Red (#ef4444) - Hotfix branches
• Purple (#8b5cf6) - Release branches
• Pink (#ec4899) - Experimental branches

Layout

• Row Height: 24px per commit
• Column Width: 10px per lane
• Commit Hash: 65px fixed width
• Author Column: 110px fixed width
• Date Column: 85px right-aligned

Features

• Curved lines for merge commits
• Continuous lanes through commit list
• Branch lanes sorted by usage (longest left)
• Visual distinction for HEAD commits (orange dot)

Ref Badges

• HEAD: Green badge for current HEAD pointer
• Local Branches: Blue badges for local branch names
• Remote Branches: Cyan badges for remote tracking branches (hidden when "Hide Remote Commits" is checked)
• Tags: Yellow badges (shown only when "Show Tags" is enabled)

Configuration

The extension works out-of-the-box with no configuration required. Settings are maintained per session:

• Panel resize ratio
• Branch visibility preference
• Remote commits visibility
• Tag visibility preference
• Commit message (persists when navigating away)
• Current repository selection
• Force push preference (always defaults to unchecked for safety)

Requirements

• Git: Must be installed and available in system PATH
• VS Code: Version 1.74.0 or higher
• Workspace: At least one Git repository

Keyboard Shortcuts

Known Limitations

• Graph rendering optimized for up to ~1000 commits
• Context menu requires right-click (no keyboard access yet)

Tips & Tricks

1. Quick Staging: Click files in tree view for fastest staging
2. Batch Operations: Use collapse/expand for better tree navigation
3. Search Efficiency: Search by short hash (7 chars) for quick commit lookup
4. Panel Layout: Resize panels to focus on graph or file list as needed
5. Remote Filtering: Keep "Hide Remote Commits" checked for cleaner local view
6. Branch Navigation: Use commit graph context menu to create branches from any commit
7. Safe Push: Always review the push response modal before closing it
8. Force Push Safety: Force Push checkbox prevents accidental force pushes - only check when absolutely necessary
9. Fetch Before Push: Use the Fetch button to update remote tracking before pushing
10. Squash Commits: Clean up your commit history by squashing multiple related commits:
    • Select consecutive commits starting from HEAD using checkboxes
    • Right-click and choose "Squash Selected Commits"
    • Edit the combined message to create a clean, descriptive commit
    • Useful for combining "WIP" commits or cleanup commits before pushing
11. Reword Commits: Quick fix for commit message typos:
    • Only works on the most recent commit (HEAD)
    • Right-click HEAD and select "Reword Commit Message"
    • The existing message is auto-selected for easy replacement
12. Rebase Conflict Resolution: Handle rebase conflicts efficiently:
    • View automatically refreshes when conflicts are detected
    • Resolve conflicts in each file, then stage them
    • Use Continue/Skip/Abort buttons to proceed
    • The view monitors rebase state and updates in real-time

Other Extensions by diabolo-68

Check out my other VS Code extensions:

Enjoy a more powerful Git workflow in VS Code!