RedPen

Inline review for rendered content.
Review Markdown and HTML in pull requests the way they're meant to be read — rendered, not raw.

Overview

Code review tools show diffs. But when the deliverable is a design doc, architecture spec, or HTML presentation, the diff is noise — what matters is how it reads.

RedPen brings pull request review into the rendered world. Open any Markdown or HTML file from an Azure DevOps PR, see it fully rendered with syntax highlighting and Mermaid diagrams, and leave inline comments anchored to the text you selected — just like Google Docs. Comments sync bidirectionally with ADO PR threads so your team stays in one workflow.

Built for engineers, tech writers, and engineering managers who review content-heavy PRs.

Features

🖊️ Inline Commenting — Select text in rendered Markdown or HTML previews and leave comments. Comments anchor to source lines automatically via source mapping.

🔗 Azure DevOps Integration — Comments sync to ADO PR threads. Auto-detects org, project, and repo from your git remote — zero configuration.

👥 @Mentions — Type @ to search your entire organization by name, alias, or email — just like ADO portal. Profile photos, display names, and emails shown in the autocomplete popup. Mentions render as linked identities in ADO.

📊 Review Heat Map — Color-coded thread counts on each PR (🟢🟡🟠🔴) show where review activity is concentrated. Sort by most active or filter to just your reviews.

🔀 Split View — Source diff and rendered preview side-by-side. Toggle between rendered, split, and source views.

⌨️ Keyboard-First — Navigate files with ]/[, switch views with 1/2/3, comment with Ctrl+Shift+C.

🎨 Dark-First Theme — Copilot-inspired design with deep navy backgrounds and blue accents. Mermaid diagrams render with matched dark styling.

🔒 Zero Config Auth — Uses your existing VS Code Microsoft account. No PATs, no tokens.

📐 Mermaid Diagrams — Both standard ```mermaid and ADO :::mermaid syntax render as visual diagrams with dark theme support.

🧵 Thread Management — Reply, resolve, reopen, and delete comment threads. Avatar photos from ADO shown on each comment.

Quick Start

1. Install

code --install-extension redpen-0.1.0.vsix

2. Open an ADO repo in VS Code

RedPen auto-detects your Azure DevOps organization, project, and repository from the git remote. Supports dev.azure.com, visualstudio.com, and DefaultCollection URL formats.

3. Start reviewing

Click the RedPen pen icon in the Activity Bar. Your PRs with Markdown or HTML files load automatically. Click a file to preview and comment.

Usage

Browsing Pull Requests

The RedPen panel shows active PRs filtered to those containing renderable files (.md, .html). Each PR shows the author alias, relative time, and a color-coded heat indicator for thread activity. Use the Sort & Filter button to sort by recency, activity, or author — or filter to just PRs where you're a reviewer.

Previewing a File

Click any file in the PR tree. Markdown renders with full GFM support — syntax highlighting, task lists, tables, container blocks (::: note, ::: warning), and Mermaid diagrams. HTML files render as-is.

Leaving a Comment

Select text in the rendered preview. The comment composer appears — type your feedback, use @ to mention anyone in your organization, and press Ctrl+Enter to post. The comment syncs to ADO as a PR thread anchored to the corresponding source line.

Replying and Managing Threads

Existing threads appear in the comment sidebar. Reply to threads, resolve them, reopen resolved threads, or delete comments — all synced to ADO in real time.

Submitting a Review

Use the review panel to submit a vote — Approve, Approve with suggestions, Wait for author, Reject, or Comment only.

Keyboard Shortcuts

Settings

Note: Organization, project, and repository are auto-detected from your git remote. No manual ADO configuration needed.

Architecture

graph LR
    A[Extension Host<br/><small>TypeScript · VS Code API</small>] <-->|postMessage| B[Webview<br/><small>React · Rendered Preview</small>]
    A <-->|REST API| C[Azure DevOps<br/><small>PRs · Threads · Identities</small>]
    A <-->|Identity Picker API| D[ADO Identity<br/><small>@Mention Search</small>]
    B --> E[Source Map<br/><small>Selection → Line Anchor</small>]

Development

npm install       # Install dependencies
npm run build     # Production build
npm test          # Run tests
npm run lint      # Lint
npm run watch     # Watch mode

Press F5 to launch the Extension Development Host.

src/
├── commands/       # VS Code command handlers
├── engine/         # Rendering, source mapping, diff, comment management
├── providers/      # ADO provider, Graph client, type definitions
├── views/          # PR explorer tree, preview panel manager
├── webview/        # React UI — preview, comments, sidebar, mentions
└── extension.ts    # Entry point

Roadmap

• 🌐 GitHub PR support — Extend beyond ADO
• 🤖 AI-powered review — Content summarization, intelligent comment suggestions, Copilot CLI integration
• 🏪 VS Code Marketplace — Public listing

License

MIT