Feat/code review system (#57)

## Summary
Complete code review system for reviewing git diffs with annotations.

### Features
- Interactive diff viewer with split/unified views
- Line-level annotation system
- Diff type selector (uncommitted, last commit, vs main branch)
- Dynamic default branch detection
- Empty state handling
- Simplified UX with streamlined feedback flow

Closes #51
Closes #56

Author: backnotprop

.github/workflows/release.yml

@@ -23,7 +23,9 @@ jobs:
         run: bun install
 
       - name: Build UI
-        run: bun run build:hook
+        run: |
+          bun run build:review
+          bun run build:hook
 
       - name: Compile binaries (cross-compile all targets)
         run: |

.gitignore

@@ -15,8 +15,9 @@ dist-ssr
 # npm pack output
 *.tgz
 
-# OpenCode plugin build artifact (generated from hook dist)
+# OpenCode plugin build artifacts (generated from hook/review dist)
 apps/opencode-plugin/plannotator.html
+apps/opencode-plugin/review-editor.html
 
 # Editor directories and files
 .vscode/*

CLAUDE.md

@@ -1,6 +1,6 @@
 # Plannotator
 
-A plan review UI for Claude Code that intercepts `ExitPlanMode` via hooks, letting users approve or request changes with annotated feedback.
+A plan review UI for Claude Code that intercepts `ExitPlanMode` via hooks, letting users approve or request changes with annotated feedback. Also provides code review for git diffs.
 
 ## Project Structure
 
@@ -9,15 +9,23 @@ plannotator/
 ├── apps/
 │   ├── hook/                     # Claude Code plugin
 │   │   ├── .claude-plugin/plugin.json
+│   │   ├── commands/             # Slash commands (plannotator-review.md)
 │   │   ├── hooks/hooks.json      # PermissionRequest hook config
-│   │   ├── server/index.ts       # Entry point (reads stdin, outputs decision)
-│   │   └── dist/index.html       # Built single-file app
-│   └── opencode-plugin/          # OpenCode plugin
-│       ├── index.ts              # Plugin entry with submit_plan tool
-│       └── plannotator.html      # Built single-file app (copied from hook)
+│   │   ├── server/index.ts       # Entry point (plan + review subcommand)
+│   │   └── dist/                 # Built single-file apps (index.html, review.html)
+│   ├── opencode-plugin/          # OpenCode plugin
+│   │   ├── commands/             # Slash commands (plannotator-review.md)
+│   │   ├── index.ts              # Plugin entry with submit_plan tool + review event handler
+│   │   ├── plannotator.html      # Built plan review app
+│   │   └── review-editor.html    # Built code review app
+│   └── review/                   # Standalone review server (for development)
+│       ├── index.html
+│       ├── index.tsx
+│       └── vite.config.ts
 ├── packages/
 │   ├── server/                   # Shared server implementation
 │   │   ├── index.ts              # startPlannotatorServer(), handleServerReady()
+│   │   ├── review.ts             # startReviewServer(), handleReviewServerReady()
 │   │   ├── storage.ts            # Plan saving to disk (getPlanDir, savePlan, etc.)
 │   │   ├── remote.ts             # isRemoteSession(), getServerPort()
 │   │   ├── browser.ts            # openBrowser()
@@ -28,7 +36,12 @@ plannotator/
 │   │   ├── utils/                # parser.ts, sharing.ts, storage.ts, planSave.ts, agentSwitch.ts
 │   │   ├── hooks/                # useSharing.ts
 │   │   └── types.ts
-│   └── editor/                   # Main App.tsx
+│   ├── editor/                   # Plan review App.tsx
+│   └── review-editor/            # Code review UI
+│       ├── App.tsx               # Main review app
+│       ├── components/           # DiffViewer, FileTree, ReviewPanel
+│       ├── demoData.ts           # Demo diff for standalone mode
+│       └── index.css             # Review-specific styles
 ├── .claude-plugin/marketplace.json  # For marketplace install
 └── legacy/                       # Old pre-monorepo code (reference only)
 ```
@@ -63,7 +76,7 @@ export PLANNOTATOR_REMOTE=1
 export PLANNOTATOR_PORT=9999
 ```
 
-## Hook Flow
+## Plan Review Flow
 
 ```
 Claude calls ExitPlanMode
@@ -80,8 +93,28 @@ Approve → stdout: {"hookSpecificOutput":{"decision":{"behavior":"allow"}}}
 Deny    → stdout: {"hookSpecificOutput":{"decision":{"behavior":"deny","message":"..."}}}
 ```
 
+## Code Review Flow
+
+```
+User runs /plannotator-review command
+        ↓
+Claude Code: plannotator review subcommand runs
+OpenCode: event handler intercepts command
+        ↓
+git diff captures unstaged changes
+        ↓
+Review server starts, opens browser with diff viewer
+        ↓
+User annotates code, provides feedback
+        ↓
+Send Feedback → feedback sent to agent session
+Approve → "LGTM" sent to agent session
+```
+
 ## Server API
 
+### Plan Server (`packages/server/index.ts`)
+
 | Endpoint              | Method | Purpose                                    |
 | --------------------- | ------ | ------------------------------------------ |
 | `/api/plan`           | GET    | Returns `{ plan, origin }`                 |
@@ -91,9 +124,16 @@ Deny    → stdout: {"hookSpecificOutput":{"decision":{"behavior":"deny","messag
 | `/api/upload`         | POST   | Upload image, returns temp path            |
 | `/api/obsidian/vaults`| GET    | Detect available Obsidian vaults           |
 
-**Location:** `packages/server/index.ts`
+### Review Server (`packages/server/review.ts`)
+
+| Endpoint              | Method | Purpose                                    |
+| --------------------- | ------ | ------------------------------------------ |
+| `/api/diff`           | GET    | Returns `{ rawPatch, gitRef, origin }`     |
+| `/api/feedback`       | POST   | Submit review (body: feedback, annotations, agentSwitch) |
+| `/api/image`          | GET    | Serve image by path query param            |
+| `/api/upload`         | POST   | Upload image, returns temp path            |
 
-Both plugins use `startPlannotatorServer()` from `packages/server`. Port is random locally or fixed (`19432`) in remote mode.
+Both servers use random ports locally or fixed port (`19432`) in remote mode.
 
 ## Data Types
 
@@ -213,7 +253,8 @@ Code blocks use bundled `highlight.js`. Language is extracted from fence (```rus
 bun install
 
 # Run any app
-bun run dev:hook       # Hook server
+bun run dev:hook       # Hook server (plan review)
+bun run dev:review     # Review editor (code review)
 bun run dev:portal     # Portal editor
 bun run dev:marketing  # Marketing site
 ```
@@ -222,8 +263,11 @@ bun run dev:marketing  # Marketing site
 
 ```bash
 bun run build:hook       # Single-file HTML for hook server
+bun run build:review     # Code review editor
+bun run build:opencode   # OpenCode plugin (copies HTML from hook + review)
 bun run build:portal     # Static build for share.plannotator.ai
 bun run build:marketing  # Static build for plannotator.ai
+bun run build            # Build hook + opencode (main targets)
 ```
 
 ## Test plugin locally

apps/hook/commands/plannotator-review.md

@@ -0,0 +1,12 @@
+---
+description: Open interactive code review for current changes
+allowed-tools: Bash(plannotator:*)
+---
+
+## Code Review Feedback
+
+!`plannotator review`
+
+## Your task
+
+Address the code review feedback above. The user has reviewed your changes in the Plannotator UI and provided specific annotations and comments.

apps/hook/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build && cp dist/index.html dist/redline.html",
+    "build": "vite build && cp dist/index.html dist/redline.html && cp ../review/dist/index.html dist/review.html",
     "serve": "bun run server/index.ts"
   },
   "dependencies": {

apps/hook/server/index.ts

@@ -1,88 +1,154 @@
 /**
- * Plannotator Ephemeral Server for Claude Code
+ * Plannotator CLI for Claude Code
  *
- * Spawned by ExitPlanMode hook to serve Plannotator UI and handle approve/deny decisions.
- * Supports both local and remote sessions (SSH, devcontainer).
+ * Supports two modes:
+ *
+ * 1. Plan Review (default, no args):
+ *    - Spawned by ExitPlanMode hook
+ *    - Reads hook event from stdin, extracts plan content
+ *    - Serves UI, returns approve/deny decision to stdout
+ *
+ * 2. Code Review (`plannotator review`):
+ *    - Triggered by /review slash command
+ *    - Runs git diff, opens review UI
+ *    - Outputs feedback to stdout (captured by slash command)
  *
  * Environment variables:
  *   PLANNOTATOR_REMOTE - Set to "1" or "true" for remote mode (preferred)
  *   PLANNOTATOR_PORT   - Fixed port to use (default: random locally, 19432 for remote)
- *
- * Reads hook event from stdin, extracts plan content, serves UI, returns decision.
  */
 
 import {
   startPlannotatorServer,
   handleServerReady,
 } from "@plannotator/server";
+import {
+  startReviewServer,
+  handleReviewServerReady,
+} from "@plannotator/server/review";
+import { getGitContext, runGitDiff } from "@plannotator/server/git";
 
 // Embed the built HTML at compile time
 // @ts-ignore - Bun import attribute for text
-import indexHtml from "../dist/index.html" with { type: "text" };
-const htmlContent = indexHtml as unknown as string;
-
-// Read hook event from stdin
-const eventJson = await Bun.stdin.text();
-
-let planContent = "";
-try {
-  const event = JSON.parse(eventJson);
-  planContent = event.tool_input?.plan || "";
-} catch {
-  console.error("Failed to parse hook event from stdin");
-  process.exit(1);
-}
+import planHtml from "../dist/index.html" with { type: "text" };
+const planHtmlContent = planHtml as unknown as string;
 
-if (!planContent) {
-  console.error("No plan content in hook event");
-  process.exit(1);
-}
+// @ts-ignore - Bun import attribute for text
+import reviewHtml from "../dist/review.html" with { type: "text" };
+const reviewHtmlContent = reviewHtml as unknown as string;
 
-// Start the shared server
-const origin = "claude-code";
-
-const server = await startPlannotatorServer({
-  plan: planContent,
-  origin,
-  htmlContent,
-  onReady: (url, isRemote, port) => {
-    handleServerReady(url, isRemote, port);
-  },
-});
-
-// Wait for user decision (blocks until approve/deny)
-const result = await server.waitForDecision();
-
-// Give browser time to receive response and update UI
-await Bun.sleep(1500);
-
-// Cleanup
-server.stop();
-
-// Output JSON for PermissionRequest hook decision control
-if (result.approved) {
-  console.log(
-    JSON.stringify({
-      hookSpecificOutput: {
-        hookEventName: "PermissionRequest",
-        decision: {
-          behavior: "allow",
-        },
-      },
-    })
+// Check for subcommand
+const args = process.argv.slice(2);
+
+if (args[0] === "review") {
+  // ============================================
+  // CODE REVIEW MODE
+  // ============================================
+
+  // Get git context (branches, available diff options)
+  const gitContext = await getGitContext();
+
+  // Run git diff HEAD (uncommitted changes - default)
+  const { patch: rawPatch, label: gitRef } = await runGitDiff(
+    "uncommitted",
+    gitContext.defaultBranch
   );
+
+  if (!rawPatch.trim()) {
+    console.log("No changes to review.");
+    process.exit(0);
+  }
+
+  // Start review server
+  const server = await startReviewServer({
+    rawPatch,
+    gitRef,
+    origin: "claude-code",
+    diffType: "uncommitted",
+    gitContext,
+    htmlContent: reviewHtmlContent,
+    onReady: handleReviewServerReady,
+  });
+
+  // Wait for user feedback
+  const result = await server.waitForDecision();
+
+  // Give browser time to receive response and update UI
+  await Bun.sleep(1500);
+
+  // Cleanup
+  server.stop();
+
+  // Output feedback (captured by slash command)
+  console.log(result.feedback || "No feedback provided.");
+  process.exit(0);
+
 } else {
-  console.log(
-    JSON.stringify({
-      hookSpecificOutput: {
-        hookEventName: "PermissionRequest",
-        decision: {
-          behavior: "deny",
-          message: result.feedback || "Plan changes requested",
+  // ============================================
+  // PLAN REVIEW MODE (default)
+  // ============================================
+
+  // Read hook event from stdin
+  const eventJson = await Bun.stdin.text();
+
+  let planContent = "";
+  try {
+    const event = JSON.parse(eventJson);
+    planContent = event.tool_input?.plan || "";
+  } catch {
+    console.error("Failed to parse hook event from stdin");
+    process.exit(1);
+  }
+
+  if (!planContent) {
+    console.error("No plan content in hook event");
+    process.exit(1);
+  }
+
+  // Start the plan review server
+  const server = await startPlannotatorServer({
+    plan: planContent,
+    origin: "claude-code",
+    htmlContent: planHtmlContent,
+    onReady: (url, isRemote, port) => {
+      handleServerReady(url, isRemote, port);
+    },
+  });
+
+  // Wait for user decision (blocks until approve/deny)
+  const result = await server.waitForDecision();
+
+  // Give browser time to receive response and update UI
+  await Bun.sleep(1500);
+
+  // Cleanup
+  server.stop();
+
+  // Output JSON for PermissionRequest hook decision control
+  if (result.approved) {
+    console.log(
+      JSON.stringify({
+        hookSpecificOutput: {
+          hookEventName: "PermissionRequest",
+          decision: {
+            behavior: "allow",
+          },
         },
-      },
-    })
-  );
-}
+      })
+    );
+  } else {
+    console.log(
+      JSON.stringify({
+        hookSpecificOutput: {
+          hookEventName: "PermissionRequest",
+          decision: {
+            behavior: "deny",
+            message: result.feedback || "Plan changes requested",
+          },
+        },
+      })
+    );
+  }
 
-process.exit(0);
+  process.exit(0);
+}