Git Grove — Visual Git Graph for VS Code

A colorful, interactive git graph visualizer for VS Code with branch sync indicators, filters, context menus, worktree integration, and AI-ready context export.

Installation

From VSIX (local build)

# Clone and install dependencies
git clone https://github.com/vbomfim/teaser.git
cd teaser
npm install

# Build the extension
npm run build

# Package as VSIX
npx @vscode/vsce package --no-dependencies

# Install in VS Code
code --install-extension git-grove-0.1.0.vsix

From source (development)

git clone https://github.com/vbomfim/teaser.git
cd teaser
npm install

Then press F5 in VS Code to launch the Extension Development Host.

Usage

1. Open a folder with a git repository in VS Code
2. Run Git Grove: Show Graph from the Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
3. The graph panel opens showing your commit history

Commands

Command	Description
Git Grove: Show Graph	Open the interactive git graph panel
Git Grove: Compare Branches	Pick two branches and see their diff summary
Git Grove: Export AI Context	Copy repository context to clipboard as Markdown

Features

Visual Git Graph

Colorful lane-based SVG graph with commit nodes, merge lines, and fork connections. Click any commit to see its details (author, date, message, changed files). Click a file to open its diff in a split panel.

Branch Labels & Sync Indicators

Each branch gets a colored pill badge in the graph gutter showing:

• ↑N (green) — commits ahead of remote
• ↓M (orange) — commits behind remote
• ✓ — in sync with remote
• ★ — current branch (blue border)

Local↔remote branch pairs are connected with dashed elbow lines.

Branch Context Menu

Right-click any branch label for context-aware actions:

• Current branch → Pull (merge), Pull (rebase), Push — with ahead/behind counts
• Other branches → Checkout, Merge into current, Fetch, Rename, Delete

Filters & Search

• File path filter — Filter commits by file path (e.g. src/auth or *.ts)
• Commit search — Search commit messages client-side with instant highlighting
• Branch filter — Toggle visibility: Local / Remote with local pair / Remote only
• ⌂ HEAD button — Jump to HEAD commit instantly
• Clear all — Reset all filters with one click

Worktree Integration

Branches checked out in git worktrees show a 🤖 icon. Right-click to:

• Open in new VS Code window
• Add to current workspace (multi-root)

Working Tree Overlay

Summary bar above the graph shows staged/unstaged/untracked file counts with expandable details.

Branch Compare

Side-by-side comparison of any two branches: ahead/behind stats, changed files, and commit lists with tabbed navigation.

AI Context Export

One-click export of repository state as Markdown — ready to paste into ChatGPT, Copilot, or any LLM.

High Contrast Support

Full support for VS Code high contrast themes (dark and light) with solid fills, thicker strokes, and visible outlines.

Keyboard Navigation

Navigate commits with arrow keys and Enter to select.

Development

npm install          # Install dependencies
npm run build        # TypeScript compile + esbuild bundle
npm run typecheck    # Type check only
npm test             # Run all tests (vitest)
npm run lint         # ESLint
npm run validate     # Full validation (lint + typecheck + test)

Packaging

npx @vscode/vsce package --no-dependencies

Architecture

src/
├── extension.ts              # VS Code entry point, command registration
├── git/
│   ├── types.ts              # Domain types (GitCommit, GitBranch, WorktreeInfo)
│   ├── git-service.ts        # Git operations (log, sync status, worktrees)
│   ├── git-parser.ts         # Pure parsers for git CLI output
│   └── git-actions.ts        # Mutating git actions (pull, push, rebase)
├── graph/
│   ├── types.ts              # Graph visualization types
│   ├── graph-builder.ts      # Commits → visual graph (two-pass lane algorithm)
│   └── graph-cache.ts        # Cache with working-tree fingerprint
├── webview/
│   ├── panel-provider.ts     # WebviewPanel lifecycle, data enrichment
│   ├── message-handler.ts    # Validated message routing
│   ├── action-handler.ts     # Git action dispatch (pull/push/rebase)
│   ├── git-content-provider.ts # File diff content provider
│   ├── file-watcher.ts       # Git ref file watcher for auto-refresh
│   ├── sidebar-provider.ts   # Sidebar webview provider
│   ├── status-bar.ts         # Status bar integration
│   └── nonce.ts              # CSPRNG nonce generation
├── webview-app/
│   ├── main.ts               # Webview entry: toolbar, filters, events
│   ├── graph-renderer.ts     # SVG graph rendering, labels, sync indicators
│   ├── context-menu.ts       # Right-click menus with git actions
│   ├── messages.ts           # Message routing and DOM updates
│   ├── keyboard-nav.ts       # Keyboard navigation module
│   ├── search-filter.ts      # Client-side commit search
│   ├── styles.css            # All visual styles, HC themes
│   └── types.ts              # Webview-side type definitions
├── workspace/
│   └── workspace-resolver.ts # Multi-root workspace folder resolution
├── compare/
│   └── branch-compare.ts     # Branch comparison orchestration
├── summary/
│   └── context-export.ts     # AI-ready context generation
└── guards/
    └── workspace-trust.ts    # Workspace trust gate

Security

• Workspace trust gate — All git operations require a trusted workspace
• CSPRNG nonce — Webview CSP uses crypto.randomBytes, never Math.random
• Validated messages — All webview↔extension messages are schema-validated
• Safe git commands — Uses execFile (no shell), validates ref names, uses -- separators

License

MIT