ReviewFlow

A GitHub Pull Request-style code review experience for your local uncommitted changes — directly inside VS Code.

ReviewFlow turns every git diff hunk into a reviewable item, letting you review code incrementally while it's being written, not just at PR time.

Features

🔍 Continuous Code Review

Every uncommitted change is automatically detected and surfaced as a reviewable hunk. No more "big bang" reviews at PR time.

📋 Sidebar Tree View

A dedicated Activity Bar panel shows all pending hunks grouped by file, with live status icons:

📊 Review Coverage

Live progress bar in the sidebar header and status bar:

Review Coverage
████████░░  78%

🖥️ GitHub-Style Review Panel

Click any hunk to open a full-featured webview panel with:

• Syntax-aware unified diff display with line numbers
• One-click status controls (Mark Seen / Approve / Needs Attention)
• Per-hunk comment system
• Previous / Next hunk navigation

💬 Comment System

Leave comments on individual hunks. All comments are stored locally in .reviewflow/reviews.json — no server, no GitHub integration required.

🎨 Editor Gutter Decorations

Reviewed lines are decorated in the gutter and overview ruler so you always know what's been looked at.

🔒 Commit Protection (Optional)

Install a pre-commit hook that blocks commits until your review coverage meets a configurable threshold.

Installation

From VSIX (local build)

# 1. Clone or download the source
git clone <repo-url> reviewflow
cd reviewflow

# 2. Install dependencies
npm install

# 3. Compile
npm run compile

# 4. Package
npm run package

# 5. Install in VS Code
code --install-extension reviewflow-1.0.0.vsix

From VS Code Marketplace

Search for ReviewFlow in the Extensions panel (Ctrl+Shift+X).

Build Instructions

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Watch mode (auto-recompile on save)
npm run watch

# Lint
npm run lint

# Package as .vsix
npm run package

Development / Debug

1. Open the reviewflow/ folder in VS Code
2. Press F5 to launch the Extension Development Host
3. Open any git repository in the new VS Code window
4. The ReviewFlow panel will appear in the Activity Bar

Usage

Getting Started

1. Open a folder that is a git repository
2. Make some changes to tracked files
3. Click the ReviewFlow shield icon in the Activity Bar
4. You'll see your changed hunks listed in the Pending Review tree
5. Click a hunk to open the review panel

Reviewing a Hunk

In the review panel:

• Mark Seen — acknowledges you've read the change
• Approve — marks the hunk as good to commit
• Needs Attention — flags the hunk for follow-up
• Add a comment — leave a note, then click Save Review

Keyboard Shortcuts

Command Palette

All commands are available via ⌘P / Ctrl+P:

• ReviewFlow: Next Hunk
• ReviewFlow: Previous Hunk
• ReviewFlow: Approve Hunk
• ReviewFlow: Mark Seen
• ReviewFlow: Needs Attention
• ReviewFlow: Open Review Panel
• ReviewFlow: Refresh
• ReviewFlow: Install Commit Hook

Commit Protection

Run ReviewFlow: Install Commit Hook from the Command Palette to install a pre-commit hook that blocks commits when coverage is below the threshold.

Configuration File

A .reviewflow.json is created at your workspace root:

{
  "requiredCoverage": 100,
  "blockCommit": true,
  "persistComments": true,
  "reviewByHunk": true
}

Example Block Message

  ReviewFlow
  ──────────────────────────────────────
  Commit blocked.
  5 hunks pending review.
  Coverage: 62% (required: 100%)

  Open ReviewFlow in VS Code to review changes.

Set "blockCommit": false to disable blocking while still tracking coverage.

Configuration

All settings are available under Settings → ReviewFlow:

Data Storage

ReviewFlow stores all state locally — no cloud, no server:

.reviewflow/
  reviews.json      # hunk statuses + comments
  check-review.js   # pre-commit hook script (if installed)
.reviewflow.json    # configuration

Add .reviewflow/ to your .gitignore to keep review state local, or commit it to share review progress with your team.

Architecture

src/
├── extension.ts              # Activation, wiring, command registration
├── git/
│   ├── DiffProvider.ts       # Runs git diff HEAD via simple-git
│   └── GitWatcher.ts         # File system watcher + auto-refresh polling
├── review/
│   ├── HunkParser.ts         # Parses unified diff → ReviewHunk[]
│   ├── ReviewStore.ts        # In-memory state + JSON persistence
│   └── CoverageService.ts    # Coverage % calculation + progress bar
├── tree/
│   ├── ReviewTreeProvider.ts # VS Code TreeDataProvider
│   └── ReviewItem.ts         # TreeItem for files and hunks
├── webview/
│   └── ReviewPanel.ts        # Webview panel: diff view + controls + comments
├── comments/
│   └── CommentStore.ts       # Comment CRUD (delegates to ReviewStore)
├── decorations/
│   └── DecorationManager.ts  # Gutter icons + overview ruler colors
├── commands/
│   ├── approve.ts
│   ├── seen.ts
│   ├── needsAttention.ts
│   └── next.ts               # Next + Previous hunk navigation
├── hooks/
│   └── installHook.ts        # Generates pre-commit hook
└── types/
    ├── ReviewHunk.ts         # ReviewHunk, DiffLine, HunkStatus types
    └── ReviewComment.ts      # ReviewComment type

Extension Lifecycle

1. Activation — triggered when workspace contains .git
2. DiffProvider runs git diff HEAD to get the current diff
3. HunkParser parses the diff into ReviewHunk[] with stable SHA-256 IDs
4. ReviewStore merges parsed hunks with persisted status from reviews.json
5. ReviewTreeProvider renders the sidebar tree; DecorationManager decorates editors
6. GitWatcher monitors .git/index and workspace files; debounces refresh calls
7. Auto-refresh polls every 5 seconds (configurable) to catch background changes
8. All user actions (status changes, comments) persist immediately to disk

Privacy

ReviewFlow runs 100% locally. No data is sent anywhere. No network requests. No telemetry.

License

MIT