Git Graph — a canvas extension for the GitHub Copilot app

An interactive git commit graph that lives as a tab in every GitHub Copilot session. It renders the commit DAG for the session's repository — branch lanes, refs, stashes, uncommitted changes — and lets you run everyday git operations (checkout, branch, tag, merge, rebase, reset, cherry-pick, stash, push, fetch…) right from the panel.

Inspired by the UX of mhutchie/vscode-git-graph. This is an independent, clean‑room implementation for the Copilot canvas runtime — no third‑party source is used or derived.

• Commit graph with curved, colored branch lanes and a live commit list.
• Ref pills for local branches, remote branches, tags, and HEAD.
• Uncommitted‑changes row and stash nodes rendered inline.
• Branch switcher in the header — click the branch name to check out any local branch (or a remote as a tracking branch).
• Branches filter — a searchable, multi‑select dropdown that re‑queries the timeline for just the branches you pick.
• Search commits (⌘/Ctrl+F) with match highlighting and next/previous.
• Fetch from remotes and a Repository Settings panel (remotes add/remove/prune, user details, and display toggles).
• Commit context menu: Add Tag, Create Branch, Checkout, Cherry Pick, Revert, Drop, Merge, Rebase, Reset, Copy hash/subject.
• Ref context menu: branch (checkout / merge / rebase / push / rename / delete), remote (checkout‑as‑local / merge / delete‑on‑remote), tag (checkout / push / delete), stash (apply / pop / drop).
• Commit details panel: author/committer, parents, full message, changed files, and stats.
• Live refresh via file‑watching — the graph updates as the repo changes.
• Agent‑callable actions (refresh, show_commit, get_graph) so the Copilot agent can drive or read the graph.

Commit operations	Branch / ref operations

Branch switcher	Branch filter

Repository settings	Confirm dialogs

The extension lives in the git-graph/ folder of this repo.

1. In any session, open the + tab menu → Extensions → Import canvas from repo.

2. Paste this folder URL:

   https://github.com/macromania/copilot-git-graph/tree/main/git-graph
   

3. Choose a scope:

   • User — available in every session on your machine (recommended).
   • Project — committed to a repo and shared with your team.

4. Open it from + → Extensions → Git Graph.

Copy the extension folder into your Copilot extensions directory:

git clone https://github.com/macromania/copilot-git-graph.git
cp -R copilot-git-graph/git-graph ~/.copilot/extensions/git-graph

Then reload extensions (restart the app or run /clear) and open the Git Graph tab.

$COPILOT_HOME defaults to ~/.copilot. For a team‑shared, committed copy, place the folder at <your-repo>/.github/extensions/git-graph/ instead.

Open the Git Graph tab in a session and it renders the graph for that session's working directory. From there:

• Left‑click a commit → details panel.
• Right‑click a commit → commit operations.
• Right‑click a ref pill (branch / remote / tag / stash) → ref operations.
• Click the branch name in the header to switch branches.
• Use Branches ▾ to filter which branches are shown.
• ⌘/Ctrl+F to search, the ↓ button to fetch, the ⚙ button for repository settings.

Destructive actions ask for confirmation, and any git error (merge conflicts, unmerged branches, etc.) is surfaced back in the panel.

A canvas extension is a small Node process that the Copilot runtime launches and talks to over JSON‑RPC. When you open the Git Graph tab:

• It starts a loopback HTTP server (bound to 127.0.0.1 only) and hands the URL to the app, which embeds it as the tab.
• The server runs git in the session's working directory via execFile (no shell), reads the graph with git log / git show, and executes operations with the corresponding git commands.
• The browser front‑end computes the lane layout and renders the SVG graph.
• Server‑Sent Events push a refresh whenever the repo's .git changes.

git-graph/
├── extension.mjs   # canvas registration, HTTP server, routes, git actions, SSE
├── git.mjs         # read-only + write git helpers (execFile, no shell)
├── client.js       # front-end: lane layout, rendering, menus, dialogs
├── styles.css      # theming (uses the app's canvas theme tokens)
└── copilot-extension.json

• The embedded server binds to loopback only.
• All git invocations use execFile (no shell), and every input (hashes, ref names, remotes, stash refs) is validated before use.
• Read‑only rendering uses git log / git show; write operations are only triggered by explicit UI actions, with confirmation for destructive ones.

• The GitHub Copilot desktop app (canvas‑capable runtime).
• git on your PATH.
• Node is provided by the app's extension runtime — you do not need to install @github/copilot-sdk yourself.

Issues and PRs are welcome — see CONTRIBUTING.md for local development, conventions, and the pre-PR checks (which CI also runs).

Concept and UX inspired by mhutchie/vscode-git-graph. Built as an independent clean‑room implementation for the GitHub Copilot canvas runtime.

MIT