Skip to content

andreescocard/codemerge

Repository files navigation

🔀 CodeMerge

A Sublime Merge–inspired Git client that lives inside Visual Studio Code

CodeMerge brings a fast, visual Git workflow into VS Code — a dedicated sidebar, a full merge-style workbench, branch navigation, recent-change sorting, commit history, file diffs, and common branch operations, all without ever leaving the editor.


VS Code TypeScript Version

Buy me a coffee

📑 Contents


✨ Highlights

Feature
🧭 Activity Bar integration — dedicated CodeMerge sidebar view
📂 Open Repository dialog — choose any local Git repository
🪟 Sublime Merge–style layout — Locations, Commits, Files, Summary, and split diff panes
↔️ Resizable columns — Locations, Commits, and diff panes
🕒 Smart sorting — changed files ordered by most recent modification by default
🔃 Flexible sort — by recent, oldest, path, status, or staged state
🌿 Full branch ops — checkout, create, merge, rebase, delete, rename, upstream, copy, hide/show, search
🖱️ Context menu — branch right-click menu modeled after Sublime Merge
📜 Commit history — graph rail, refs, author, relative time, pagination, and cherry-pick
Staging actions — stage, unstage, discard, reset, and commit (with amend)
🤖 AI commit messages — draft Conventional Commits summaries from your diff via the OpenAI Codex SDK
🔬 Hunk & line staging — stage or unstage individual hunks and selected lines
📦 Stash workflow — push, apply, pop, drop, and show stashes
🏷️ Tags — create, delete, and push tags
🛰️ Remotes — add, remove, rename, and set remote URLs
⚔️ Conflict-aware — use ours/theirs, mark resolved, continue/skip/abort merges, rebases, cherry-picks
🔭 Blame — line-level authorship for any tracked file
🔄 Sync — fetch, pull, push, and force-push
🎨 Theme-aware UI — built on VS Code color tokens

🖼️ Preview

CodeMerge is designed around a familiar three-panel Git workflow:

┌───────────────────────────────────────────────────────────────┐
│ Toolbar: navigation, branch selector, search, sync actions     │
├───────────────┬───────────────────┬───────────────────────────┤
│ Locations     │ Commits           │ Files / Summary / Diff     │
│ Branches      │ Graph + history   │ Recent changes + split diff│
│ Remotes       │ Cherry-pick       │ Stage / unstage / discard  │
└───────────────┴───────────────────┴───────────────────────────┘

💡 Add screenshots to docs/ and embed them here when you're ready.


📦 Installation

CodeMerge is not on the Marketplace yet — build the VSIX from source:

git clone https://github.com/andreescocard/codemerge.git
cd codemerge
npm install
npm run package

This produces codemerge-0.1.0.vsix. Install it:

code --install-extension codemerge-0.1.0.vsix

Or, from inside VS Code:

  1. Open the Extensions view.
  2. Select the ... menu.
  3. Choose Install from VSIX....
  4. Pick the generated codemerge-0.1.0.vsix.

🚀 Usage

  1. Open the CodeMerge icon from the VS Code Activity Bar.
  2. Select Open Repository....
  3. Choose a local Git repository folder.
  4. Use Open Git Client to launch the full CodeMerge workbench.

You can also run it from the Command Palette:

CodeMerge: Open Git Client
CodeMerge: Checkout Branch by Name

💡 Ctrl+Shift+B (Cmd+Shift+B on macOS) prompts for a branch name and checks it out — offering to create it from HEAD if it doesn't exist.

🤖 The AI commit message button drafts a Conventional Commits summary from your staged (or working-tree) diff using the OpenAI Codex SDK. It requires a working Codex CLI login on your machine.


🌿 Branch Menu

Right-click a branch in Locations to access:

  • ✅ Checkout branch
  • 🔀 Merge branch into the current branch
  • 🪡 Rebase current branch onto the selected branch
  • 🗑️ Delete branch
  • ✏️ Rename branch
  • 📋 Copy branch name
  • 🙈 Hide branch
  • 🫥 Hide all branches except the selected one
  • 👁️ Show all hidden branches
  • 🔗 Set upstream
  • 🔍 Search commits by branch name

🛠️ Development

Task Command
Install dependencies npm install
Compile npm run compile
Watch (rebuild on save) npm run watch
Type checks npm run lint
Run tests npm test
Package a VSIX npm run package

Debug locally:

  1. Open this folder in VS Code.
  2. Press F5.
  3. In the Extension Development Host, open CodeMerge from the Activity Bar.

Layout: the extension host lives in src/git/ (client, diff, graph, status/log parsers, AI commit-message generator, types), panel/ (full workbench panel + HTML), utils/, protocol.ts (the webview message contract), and extension.ts (entry point). The webview client is media/main.js + media/styles.css.


🧪 Testing

Unit tests run on Vitest and cover the pure Git helpers — diff, graph, and the status/log parsers:

npm test            # vitest run (one-shot)

Extension behavior is verified manually in the Extension Development Host (F5).


🗺️ Roadmap

  • Line-level diff controls (hunk and line staging)
  • Tag and stash providers
  • File-level history (blame)
  • Conflict-aware merge, rebase, and cherry-pick flows
  • Commit detail — metadata, graph, and per-commit files on demand
  • AI commit message drafting (OpenAI Codex SDK)
  • Checkout branch by name (Ctrl+Shift+B)
  • Richer remote branch grouping
  • Optional graph density controls
  • Interactive rebase (reorder / squash / reword)

❤️ Support

If CodeMerge saves you time, you can support development here:

Buy me a coffee

📄 License

Released under the MIT License © 2026 Andre Escocard.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors