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.

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

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
• Right Panel: Commit message area and interactive commit graph
• Resizable Panels: Drag the divider between panels to customize your layout (20%-80% range)

Advanced Commit Graph

• SVG-Based Visualization: Beautiful colored branch lanes with curved merge lines
• Compact Layout: Optimized lane assignment with longest branches on the left
• EGit-Style Display:
  • Commit hash in leftmost column
  • Visual graph lanes
  • Commit message starting right after the graph
  • Author and date columns
• Infinite Scroll: Automatically loads more commits as you scroll
• 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
• Context Menu: Right-click any commit for:
  • Cherry-pick
  • Reset (soft/mixed/hard)
  • Revert
  • 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
  • Collapse All / Expand All folders
• Visual Status Indicators:
  • A - Added
  • M - Modified
  • D - Deleted
  • R - Renamed
  • U - Unmerged/Conflict

Git Operations

• Commit: Commit staged changes with message validation
• Amend Commit: Checkbox to amend the last commit with new changes and/or message
• Push: Push commits to remote with formatted response modal
  • Force Push checkbox for explicit git push --force (unchecked by default)
  • 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 and refresh view
• 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
  • Fetch
  • Pull / Pull (force)
  • Reset
  • Rebase
  • Merge
• Rebase Detection: Visual indicator when rebase is in progress
• 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
   • 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

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. Panel Layout: Resize panels to focus on graph or file list as needed
11. Remote Filtering: Keep "Hide Remote Commits" checked for cleaner local view
12. Branch Navigation: Use commit graph context menu to create branches from any commit

Comparison with Built-in Git

Release Notes

0.0.1 (Initial Release)

Core Features:

• EGit-style dual-panel staging view
• Interactive SVG commit graph with colored lanes
• Multi-repository support with auto-detection
• File tree view with collapse/expand
• Complete Git operations suite

Graph Features:

• Infinite scroll (500 initial, 100 increments)
• Search by hash, message, ref, author
• Show all branches / current branch toggle
• Hide remote commits filter
• Context menu: cherry-pick, reset, revert, create branch
• Lane optimization (longest branches left)

UI Features:

• Resizable panel divider
• Collapse/expand folders
• Visual status indicators
• Rebase detection
• Branch/tag/ahead-behind info

Performance:

• Efficient git command execution
• Smart lane calculation
• Git-level remote filtering
• Incremental commit loading

Enjoy a more powerful Git workflow in VS Code!