pi-extension-diffs

A pi extension that adds a /diffs command to view git changes in a native macOS window.

Browse staged, unstaged, and untracked changes alongside branch commits — all rendered with syntax-highlighted diffs in a fast, native WKWebView window powered by Glimpse.

Features

• /diffs command — opens a native macOS window showing all git changes
• Commit navigator — browse up to 5 commits on your branch, or last 5 on main
• Working changes — staged, unstaged, and untracked files grouped by section
• Sidebar + tabs — click files to open as tabs, switch between them instantly
• Syntax highlighting — full Shiki-powered highlighting via @pierre/diffs
• Prewarm — hidden window pre-loads the viewer on startup for near-instant /diffs
• Persistent window — updates in place if already open, re-preloads after close

Install

pi install pi-extension-diffs

Or add to your pi settings manually:

// ~/.pi/agent/settings.json
{
  "packages": [
    "pi-extension-diffs"
  ]
}

Then restart pi or run /reload.

Requirements

• macOS — uses native WKWebView windows via Glimpse
• git — must be in a git repository
• bun — required for building the viewer bundle (runs automatically on install)

Usage

/diffs

That's it. The window shows:

1. Commit list at the top of the sidebar — your branch's commits (vs main/master) or last 5 if on main
2. Working Changes entry if you have uncommitted changes (staged/unstaged/untracked)
3. File list below — click to open files as tabs with syntax-highlighted diffs

Switching between commits updates the file list. Tabs clear when you change commits.

Development

git clone https://github.com/HazAT/pi-extension-diffs.git
cd pi-extension-diffs
npm install  # installs deps + builds viewer bundle

To rebuild the viewer after making changes to src/viewer.tsx:

npm run build

Then point pi at your local clone:

// ~/.pi/agent/settings.json
{
  "packages": [
    "/path/to/pi-extension-diffs"
  ]
}

How it works

The extension has two parts:

• src/index.ts — pi extension that registers /diffs, gathers git data, manages the Glimpse window, and injects data into the viewer
• src/viewer.tsx — React app bundled into dist/viewer.js at build time, rendering diffs with @pierre/diffs components

On startup, a hidden window pre-loads the 10MB viewer bundle (which includes Shiki grammars for syntax highlighting). When you run /diffs, git data is injected and the window appears instantly.

License

MIT