GitHub Pull Request Diff Viewer

A premium, theme-aware interactive Pull Request Diff Viewer extension for VS Code and Antigravity IDE. Easily inspect file changes side-by-side, view PR metadata, check mergeability status, and submit code reviews directly from your editor.

(Placeholder - Custom UI renders inside webviews)

Features

• 🛡️ Strict PAT Authentication: Securely logs in using a GitHub Personal Access Token (PAT), bypassing organization OAuth restrictions and credential sync conflicts.
• 📂 Sidebar PR List Tree: Automatically detects your active Git repository's remote URL (origin) and lists open Pull Requests in a custom Activity Bar tab.
• 🌳 Collapsible Hierarchical File Tree: Changed files list is organized in a collapsible nested directory structure (like VS Code's native file explorer) for cleaner navigation of large PRs.
• 💻 Local Editor Sync: Open local workspace files at the exact line number instantly by clicking the "Open in Editor" button or double-clicking any line number in the diff view.
• 🌐 Full File Context Toggle: Toggle between viewing the raw PR patch diff and loading the complete file context with aligned inline diffs and comments.
• 🔍 Active Diff Search: Access a floating code finder panel (Ctrl + F) with Aa, .*, and Whole Word toggles to highlight and navigate matches in the diff view.
• 📝 Rich Markdown Rendering: PR descriptions, timeline comments, and inline threads render bold, italics, checklists, lists, links, inline code, fenced code blocks, and user mentions beautifully.
• ✏️ Comment Editing & Deletion: Edit or delete your own comments (inline and timeline) directly in the Webview with live Markdown source editor fallback.
• ❤️ Emoji Reactions: Express feedback using comment reaction pills (👍, 👎, 😄, 😕, ❤️, 🎉, 🚀, 👀) via the built-in reaction popover picker.
• ⚔️ Side-by-Side Diff Layout: An aligned, color-coded visual diff viewer that matches deleted (-) and inserted (+) lines horizontally, with empty lines balanced automatically.
• 🎨 Safe Syntax Highlighting: Built-in styling for popular developer languages (PHP, JS, TS, Python, Go, CSS, HTML, JSON) using a robust tokenizer that keeps markup rendering pristine.
• 💬 Threaded Inline & Multi-line Comments: View existing review comments directly below code. Click line numbers to comment on a single line, or use Shift + Click to select and comment on a range of lines (multi-line comments) in-place.
• 🔍 Sidebar Header QuickPick Search: Search and filter through all open Pull Requests in the repository right from the sidebar header. Search by PR title, number, author, or source branch name via a native QuickPick dropdown to immediately inspect diffs.
• ✔️ Mark as Viewed: Keep track of your review progress by checking off files as "Viewed". Viewed files will automatically dim in the files changed sidebar tree.
• 🔍 Sidebar File Filtering: Filter the list of changed files in real-time as you type, making it easy to navigate through large Pull Requests with many file modifications.
• 📊 Visual Change Ratio Bars: Modern addition and deletion ratio bars displayed in the PR header to visualize codebase modifications at a glance.
• 🔄 Split vs. Unified Views: Toggle between Split (side-by-side) and Unified (line-by-line) modes with a single click.
• 🔀 Commit-by-Commit Review: Choose to view the full cumulative PR diff or drill down into individual commits using the built-in commit selector dropdown. Each commit option shows its short SHA and message.
• 💬 PR Conversation & Timeline: A dedicated Conversation tab displays the PR description and all general discussion comments in a beautiful GitHub-like timeline view, complete with avatars, timestamps, and threaded layout.
• 🎨 Native Theme Integration: Fully inherits VS Code theme variables (--vscode-...) so it looks native and matches your light/dark color palette instantly.
• 💬 General PR Reviews: Leave general comments, approve, or request changes on the Pull Request from the review panel.

Getting Started

1. Generate a GitHub Personal Access Token (PAT)

Since organization repositories (like those under corporate accounts) often restrict third-party OAuth access, you need a Personal Access Token:

1. Go to your GitHub account -> Settings -> Developer Settings -> Personal Access Tokens (classic).
2. Give the token a name (e.g. antigravity-pr-viewer).
3. Check the repo scope checkbox (grants full control of private repositories).
4. Click Generate token and copy the resulting string (starts with ghp_...).

2. Configure the Token in the Editor

1. Click the GitHub PRs icon in the sidebar activity bar.
2. Click Set Personal Access Token (PAT)....
3. Paste your copied token into the input prompt at the top of the editor and press Enter.
4. The list of open Pull Requests for your active repository will load automatically!

Extension Commands

All commands are accessible from the Command Palette (Ctrl + Shift + P or Cmd + Shift + P):

Extension Settings

No manual configurations are required. The extension automatically:

• Reads your local .git/config file to detect the repository owner and name.
• Queries GitHub APIs using the secure PAT token stored in VS Code's native Credentials Manager (context.secrets).

Codebase Structure

The extension follows a clean, modular architecture:

• src/panels/PRDiffPanel.ts: Manages the VS Code Webview lifecycle, message routing, and GitHub API interactions.
• src/panels/PRHtmlBuilder.ts: Builds the static HTML layout and secure Content Security Policy (CSP) for the webview.
• media/styles.css: Custom theme-aware stylesheet tailored for VS Code's native color palettes.
• media/syntax.js: Custom client-side tokenizer and code syntax highlighting module.
• media/diff-parser.js: Parses raw git patch/diff strings into structured, renderable hunks.
• media/markdown.js: Client-side Markdown parser and tokenizer.
• media/tree.js: Hierarchical directory file tree generator and renderer.
• media/search.js: Active diff text search highlight and navigation system.
• media/comments.js: Client-side comment emoji reactions and actions manager.
• media/diff-renderer.js: Client-side diff layout structure generator, hunk alignment, inline commenting forms, and inline selection highlighting.
• media/conversation.js: PR discussion timeline comments, PR description bubbles, and commit-by-commit selector populator.
• media/main.js: Main client-side script coordinating state management (state caching/persistence), tab switching, and event delegation routing.

Release Workflow & Versioning Guide

This project features automated extension building and publishing to registries.

1. Bump the Version

When you are ready to publish, bump the version in package.json using the standard npm version command:

• Patch (Bug fixes): npm version patch (e.g. 0.5.2 -> 0.5.3)
• Minor (Features): npm version minor (e.g. 0.5.2 -> 0.6.0)
• Major (Breaking changes): npm version major (e.g. 0.5.2 -> 1.0.0)

This updates package.json and creates a corresponding Git tag automatically.

2. Auto-Publish to Marketplaces

Create a .env file in the project root containing your secret publishing tokens:

VSCE_PAT=your_vscode_marketplace_pat
OVSX_PAT=your_open_vsx_access_token

To compile, package, and auto-publish the extension to both registries in one go, run:

npm run release

If either token is found in .env, the script will automatically push the extension version to the respective marketplace.

3. Push to GitHub (CI/CD)

To push your commit and tag to trigger the GitHub Actions release workflow:

git push origin main --follow-tags

2. Push Commits & Tags to GitHub

Push your commits along with the generated tag to trigger the remote automation:

git push origin main --follow-tags

(Or push tags explicitly using git push origin v0.1.0)

3. Inspect Draft Release

• Go to your GitHub repository -> Actions tab to watch the build compile and package the extension.
• Once completed, go to the Releases tab. You will find a new Draft Release with the tag version (e.g. Release v0.1.0) containing the compiled .vsix installer bundle.
• Inspect, write release notes, and click Publish release to share it.

License

MIT License. Created by Ilman Ramdhan.