🔍 PR Context Lens

An open-source Chrome and Firefox extension that analyzes GitHub Pull Request diffs using AI and displays insights in a sidebar panel.

✨ Features

• AI-Powered Analysis: Uses OpenAI GPT-4o or Anthropic Claude to analyze PR diffs
• Impact Score: Gets a 1-10 impact score with detailed justification
• Bug Detection: Identifies potential bugs and categorizes by severity
• Dependency Analysis: Shows affected dependencies
• Review Questions: Generates thoughtful review questions for the PR
• Caching: Caches analyzed diffs to avoid redundant API calls
• Privacy-First: User supplies their own API keys, stored locally in browser storage

🚀 Installation

Development Setup

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Run tests
npm run test

Loading in Chrome

1. Build the extension: npm run build
2. Open chrome://extensions/
3. Enable "Developer mode" (top right)
4. Click "Load unpacked"
5. Select the dist/ folder

🏗️ Project Structure

src/
├── background/
│   └── service-worker.ts      # Message handling & analysis lifecycle
├── content/
│   └── github-detector.ts     # PR detection & panel injection
├── panel/
│   ├── App.tsx                # Main panel component
│   ├── components/
│   │   ├── ResultsPanel.tsx   # Display analysis results
│   │   ├── ConfigPanel.tsx    # API key configuration
│   │   └── LoadingSpinner.tsx # Loading state
│   └── index.tsx              # Panel entry point
├── analyzer/
│   ├── diff-parser.ts         # Parse unified diffs
│   └── prompt-builder.ts      # Build AI prompts
├── providers/
│   ├── openai.ts              # OpenAI API adapter
│   ├── anthropic.ts           # Anthropic API adapter
│   └── index.ts               # Provider factory
└── shared/
    ├── types.ts               # TypeScript interfaces
    └── cache.ts               # Diff caching utilities

🔑 Configuration

The extension requires API keys to function. You can configure them in the extension popup:

1. Click the extension icon on a GitHub PR page
2. Click the ⚙️ settings icon
3. Enter your OpenAI or Anthropic API key
4. Select your preferred provider
5. Click "Save Configuration"

Keys are stored securely in chrome.storage.local.

Getting API Keys

• OpenAI: https://platform.openai.com/api-keys (requires paid account)
• Anthropic: https://console.anthropic.com/account/keys (requires paid account)

🧪 Testing

# Run all tests
npm run test

# Watch mode
npm run test -- --watch

# UI mode
npm run test:ui

Each module has corresponding .test.ts files with unit tests.

📊 Data Flow

1. Content script detects a GitHub PR page
2. Injects analysis button into PR header
3. User clicks button → service worker fetches raw diff from GitHub API
4. Diff is parsed into structured format
5. Prompt is built from parsed diff
6. Selected AI provider analyzes the prompt
7. Results displayed in panel sidebar

🛠️ Tech Stack

• TypeScript (strict mode)
• React 18 + Tailwind CSS for UI
• Chrome Extension Manifest V3
• Vite + CRXJS for bundling
• Vitest for unit tests
• GitHub REST API v3 for diff retrieval
• OpenAI API (gpt-4o)
• Anthropic API (claude-sonnet)

📝 Code Standards

• Functional components only, no classes
• Each file has a single responsibility
• All async operations use async/await
• Error boundaries for graceful failures
• No external UI libraries beyond Tailwind
• JSDoc comments on public functions
• Comprehensive unit tests for all modules

📄 License

MIT

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

---

Made with ❤️ for code reviewers everywhere