From 5fde2e23d965059f89853f900b742755e23e3683 Mon Sep 17 00:00:00 2001
From: Michael Ramos <mdramos8@gmail.com>
Date: Mon, 9 Mar 2026 07:05:18 -0700
Subject: [PATCH 1/4] feat: add per-file git add from code review UI (#254)

Adds the ability to `git add` individual files directly from the code
review interface. Users can stage approved files then switch to the new
"Unstaged changes" diff view to see only remaining work.

- POST /api/git-add endpoint with worktree support
- gitAddFile/gitResetFile utilities in packages/server/git.ts
- "Staged changes" and "Unstaged changes" added to diff type dropdown
- useGitAdd hook encapsulating all staging state and API logic
- "Git Add" / "Added" toggle button in FileHeader (next to Viewed)
- Visual indicator (left border) for staged files in sidebar FileTree

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 packages/review-editor/App.tsx                | 15 +++-
 .../review-editor/components/DiffViewer.tsx   | 12 ++++
 .../review-editor/components/FileHeader.tsx   | 40 ++++++++++-
 .../review-editor/components/FileTree.tsx     | 11 +++
 .../review-editor/components/FileTreeNode.tsx |  9 ++-
 packages/review-editor/hooks/useGitAdd.ts     | 72 +++++++++++++++++++
 packages/review-editor/index.css              |  8 +++
 packages/server/git.ts                        | 30 ++++++++
 packages/server/review.ts                     | 30 +++++++-
 9 files changed, 223 insertions(+), 4 deletions(-)
 create mode 100644 packages/review-editor/hooks/useGitAdd.ts

diff --git a/packages/review-editor/App.tsx b/packages/review-editor/App.tsx
index e97ee5e6e..9352e9ed6 100644
--- a/packages/review-editor/App.tsx
+++ b/packages/review-editor/App.tsx
@@ -11,6 +11,7 @@ import { getAgentSwitchSettings, getEffectiveAgentName } from '@plannotator/ui/u
 import { CodeAnnotation, CodeAnnotationType, SelectedLineRange } from '@plannotator/ui/types';
 import { useResizablePanel } from '@plannotator/ui/hooks/useResizablePanel';
 import { useCodeAnnotationDraft } from '@plannotator/ui/hooks/useCodeAnnotationDraft';
+import { useGitAdd } from './hooks/useGitAdd';
 import { useEditorAnnotations } from '@plannotator/ui/hooks/useEditorAnnotations';
 import { exportEditorAnnotations } from '@plannotator/ui/utils/parser';
 import { ResizeHandle } from '@plannotator/ui/components/ResizeHandle';
@@ -361,6 +362,12 @@ const ReviewApp: React.FC = () => {
     return { activeWorktreePath: null, activeDiffBase: diffType };
   }, [diffType]);
 
+  // Git add/staging logic
+  const { stagedFiles, stagingFile, canStageFiles, stageFile, resetStagedFiles, stageError } = useGitAdd({
+    activeDiffBase,
+    onFileViewed: (path) => setViewedFiles(prev => new Set(prev).add(path)),
+  });
+
   // Shared helper: fetch a diff switch and update state
   const fetchDiffSwitch = useCallback(async (fullDiffType: string) => {
     setIsLoadingDiff(true);
@@ -385,13 +392,14 @@ const ReviewApp: React.FC = () => {
       setActiveFileIndex(0);
       setPendingSelection(null);
       setDiffError(data.error || null);
+      resetStagedFiles();
     } catch (err) {
       console.error('Failed to switch diff:', err);
       setDiffError(err instanceof Error ? err.message : 'Failed to switch diff');
     } finally {
       setIsLoadingDiff(false);
     }
-  }, []);
+  }, [resetStagedFiles]);
 
   // Switch diff type (uncommitted, last-commit, branch) — composes worktree prefix if active
   const handleDiffSwitch = useCallback(async (baseDiffType: string) => {
@@ -808,6 +816,7 @@ const ReviewApp: React.FC = () => {
                 activeWorktreePath={activeWorktreePath}
                 onSelectWorktree={handleWorktreeSwitch}
                 currentBranch={gitContext?.currentBranch}
+                stagedFiles={stagedFiles}
               />
               <ResizeHandle {...fileTreeResize.handleProps} />
             </>
@@ -841,6 +850,10 @@ const ReviewApp: React.FC = () => {
                 onDeleteAnnotation={handleDeleteAnnotation}
                 isViewed={viewedFiles.has(activeFile.path)}
                 onToggleViewed={() => handleToggleViewed(activeFile.path)}
+                isStaged={stagedFiles.has(activeFile.path)}
+                isStaging={stagingFile === activeFile.path}
+                onStage={() => stageFile(activeFile.path)}
+                canStage={canStageFiles}
               />
             ) : (
               <div className="h-full flex items-center justify-center">
diff --git a/packages/review-editor/components/DiffViewer.tsx b/packages/review-editor/components/DiffViewer.tsx
index ac01c0c16..69089c179 100644
--- a/packages/review-editor/components/DiffViewer.tsx
+++ b/packages/review-editor/components/DiffViewer.tsx
@@ -25,6 +25,10 @@ interface DiffViewerProps {
   onDeleteAnnotation: (id: string) => void;
   isViewed?: boolean;
   onToggleViewed?: () => void;
+  isStaged?: boolean;
+  isStaging?: boolean;
+  onStage?: () => void;
+  canStage?: boolean;
 }
 
 export const DiffViewer: React.FC<DiffViewerProps> = ({
@@ -42,6 +46,10 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
   onDeleteAnnotation,
   isViewed = false,
   onToggleViewed,
+  isStaged = false,
+  isStaging = false,
+  onStage,
+  canStage = false,
 }) => {
   const { theme } = useTheme();
   const containerRef = useRef<HTMLDivElement>(null);
@@ -180,6 +188,10 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
         patch={patch}
         isViewed={isViewed}
         onToggleViewed={onToggleViewed}
+        isStaged={isStaged}
+        isStaging={isStaging}
+        onStage={onStage}
+        canStage={canStage}
       />
 
       <div className="p-4">
diff --git a/packages/review-editor/components/FileHeader.tsx b/packages/review-editor/components/FileHeader.tsx
index 1491813bb..89b2fce58 100644
--- a/packages/review-editor/components/FileHeader.tsx
+++ b/packages/review-editor/components/FileHeader.tsx
@@ -5,14 +5,22 @@ interface FileHeaderProps {
   patch: string;
   isViewed?: boolean;
   onToggleViewed?: () => void;
+  isStaged?: boolean;
+  isStaging?: boolean;
+  onStage?: () => void;
+  canStage?: boolean;
 }
 
-/** Sticky file header with file path, Viewed toggle, and Copy Diff button */
+/** Sticky file header with file path, Viewed toggle, Git Add, and Copy Diff button */
 export const FileHeader: React.FC<FileHeaderProps> = ({
   filePath,
   patch,
   isViewed = false,
   onToggleViewed,
+  isStaged = false,
+  isStaging = false,
+  onStage,
+  canStage = false,
 }) => {
   const [copied, setCopied] = useState(false);
 
@@ -42,6 +50,36 @@ export const FileHeader: React.FC<FileHeaderProps> = ({
             Viewed
           </button>
         )}
+        {canStage && onStage && (
+          <button
+            onClick={onStage}
+            disabled={isStaging}
+            className={`text-xs px-2 py-1 rounded transition-colors flex items-center gap-1 ${
+              isStaging
+                ? 'opacity-50 cursor-not-allowed text-muted-foreground'
+                : isStaged
+                  ? 'bg-primary/15 text-primary'
+                  : 'text-muted-foreground hover:text-foreground hover:bg-muted'
+            }`}
+            title={isStaged ? "Unstage this file (git reset)" : "Stage this file (git add)"}
+          >
+            {isStaging ? (
+              <svg className="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+              </svg>
+            ) : isStaged ? (
+              <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+              </svg>
+            ) : (
+              <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
+              </svg>
+            )}
+            {isStaging ? 'Adding...' : isStaged ? 'Added' : 'Git Add'}
+          </button>
+        )}
         <button
           onClick={async () => {
             try {
diff --git a/packages/review-editor/components/FileTree.tsx b/packages/review-editor/components/FileTree.tsx
index bd0e540d2..a55635e5e 100644
--- a/packages/review-editor/components/FileTree.tsx
+++ b/packages/review-editor/components/FileTree.tsx
@@ -31,6 +31,7 @@ interface FileTreeProps {
   activeWorktreePath?: string | null;
   onSelectWorktree?: (path: string | null) => void;
   currentBranch?: string;
+  stagedFiles?: Set<string>;
 }
 
 export const FileTree: React.FC<FileTreeProps> = ({
@@ -52,6 +53,7 @@ export const FileTree: React.FC<FileTreeProps> = ({
   activeWorktreePath,
   onSelectWorktree,
   currentBranch,
+  stagedFiles,
 }) => {
   // Keyboard navigation: j/k or arrow keys
   const handleKeyDown = useCallback((e: KeyboardEvent) => {
@@ -142,6 +144,14 @@ export const FileTree: React.FC<FileTreeProps> = ({
             Files
           </span>
           <div className="flex items-center gap-1.5">
+            {stagedFiles && stagedFiles.size > 0 && (
+              <span className="text-xs text-primary font-medium">
+                {stagedFiles.size} added
+              </span>
+            )}
+            {stagedFiles && stagedFiles.size > 0 && (
+              <span className="text-muted-foreground/40">·</span>
+            )}
             <span className="text-xs text-muted-foreground">
               {viewedFiles.size}/{files.length}
             </span>
@@ -247,6 +257,7 @@ export const FileTree: React.FC<FileTreeProps> = ({
             onToggleViewed={onToggleViewed}
             hideViewedFiles={hideViewedFiles}
             getAnnotationCount={getAnnotationCount}
+            stagedFiles={stagedFiles}
           />
         ))}
       </div>
diff --git a/packages/review-editor/components/FileTreeNode.tsx b/packages/review-editor/components/FileTreeNode.tsx
index 11fc6bdf2..6165db465 100644
--- a/packages/review-editor/components/FileTreeNode.tsx
+++ b/packages/review-editor/components/FileTreeNode.tsx
@@ -11,6 +11,7 @@ interface FileTreeNodeProps {
   onToggleViewed?: (filePath: string) => void;
   hideViewedFiles: boolean;
   getAnnotationCount: (filePath: string) => number;
+  stagedFiles?: Set<string>;
 }
 
 function hasVisibleChildren(
@@ -40,6 +41,7 @@ export const FileTreeNodeItem: React.FC<FileTreeNodeProps> = ({
   onToggleViewed,
   hideViewedFiles,
   getAnnotationCount,
+  stagedFiles,
 }) => {
   const paddingLeft = 8 + node.depth * 12;
 
@@ -86,6 +88,7 @@ export const FileTreeNodeItem: React.FC<FileTreeNodeProps> = ({
             onToggleViewed={onToggleViewed}
             hideViewedFiles={hideViewedFiles}
             getAnnotationCount={getAnnotationCount}
+            stagedFiles={stagedFiles}
           />
         ))}
       </>
@@ -95,6 +98,7 @@ export const FileTreeNodeItem: React.FC<FileTreeNodeProps> = ({
   // File node
   const isActive = node.fileIndex === activeFileIndex;
   const isViewed = viewedFiles.has(node.path);
+  const isStaged = stagedFiles?.has(node.path) ?? false;
   const annotationCount = getAnnotationCount(node.path);
 
   if (hideViewedFiles && isViewed && !isActive) {
@@ -104,7 +108,7 @@ export const FileTreeNodeItem: React.FC<FileTreeNodeProps> = ({
   return (
     <button
       onClick={() => onSelectFile(node.fileIndex!)}
-      className={`file-tree-item w-full text-left group ${isActive ? 'active' : ''} ${annotationCount > 0 ? 'has-annotations' : ''}`}
+      className={`file-tree-item w-full text-left group ${isActive ? 'active' : ''} ${annotationCount > 0 ? 'has-annotations' : ''} ${isStaged ? 'staged' : ''}`}
       style={{ paddingLeft: paddingLeft + 15 }}
     >
       <div className="flex items-center gap-1.5 flex-1 min-w-0">
@@ -130,6 +134,9 @@ export const FileTreeNodeItem: React.FC<FileTreeNodeProps> = ({
         <span className="truncate">{node.name}</span>
       </div>
       <div className="flex items-center gap-1.5 flex-shrink-0 text-[10px]">
+        {isStaged && (
+          <span className="text-primary font-medium" title="Staged (git add)">+</span>
+        )}
         {annotationCount > 0 && (
           <span className="text-primary font-medium">{annotationCount}</span>
         )}
diff --git a/packages/review-editor/hooks/useGitAdd.ts b/packages/review-editor/hooks/useGitAdd.ts
new file mode 100644
index 000000000..67aa1da45
--- /dev/null
+++ b/packages/review-editor/hooks/useGitAdd.ts
@@ -0,0 +1,72 @@
+import { useState, useCallback, useMemo } from 'react';
+
+interface UseGitAddOptions {
+  activeDiffBase: string;
+  onFileViewed: (filePath: string) => void;
+}
+
+interface UseGitAddReturn {
+  stagedFiles: Set<string>;
+  stagingFile: string | null;
+  canStageFiles: boolean;
+  stageFile: (filePath: string) => Promise<void>;
+  resetStagedFiles: () => void;
+  stageError: string | null;
+}
+
+const STAGEABLE_DIFF_TYPES = new Set(['uncommitted', 'unstaged']);
+
+export function useGitAdd({ activeDiffBase, onFileViewed }: UseGitAddOptions): UseGitAddReturn {
+  const [stagedFiles, setStagedFiles] = useState<Set<string>>(new Set());
+  const [stagingFile, setStagingFile] = useState<string | null>(null);
+  const [stageError, setStageError] = useState<string | null>(null);
+
+  const canStageFiles = useMemo(() => STAGEABLE_DIFF_TYPES.has(activeDiffBase), [activeDiffBase]);
+
+  const stageFile = useCallback(async (filePath: string) => {
+    const isUndo = stagedFiles.has(filePath);
+    setStagingFile(filePath);
+    setStageError(null);
+
+    try {
+      const res = await fetch('/api/git-add', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ filePath, undo: isUndo }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({ error: 'Failed' }));
+        throw new Error(data.error || 'Failed');
+      }
+
+      setStagedFiles(prev => {
+        const next = new Set(prev);
+        if (isUndo) {
+          next.delete(filePath);
+        } else {
+          next.add(filePath);
+        }
+        return next;
+      });
+
+      // Auto-mark as viewed on stage (not on unstage)
+      if (!isUndo) {
+        onFileViewed(filePath);
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Git add failed';
+      setStageError(message);
+      setTimeout(() => setStageError(null), 3000);
+    } finally {
+      setStagingFile(null);
+    }
+  }, [stagedFiles, onFileViewed]);
+
+  const resetStagedFiles = useCallback(() => {
+    setStagedFiles(new Set());
+    setStageError(null);
+  }, []);
+
+  return { stagedFiles, stagingFile, canStageFiles, stageFile, resetStagedFiles, stageError };
+}
diff --git a/packages/review-editor/index.css b/packages/review-editor/index.css
index 8c5284116..98dcf3773 100644
--- a/packages/review-editor/index.css
+++ b/packages/review-editor/index.css
@@ -347,6 +347,14 @@ diffs-container {
   opacity: 0.8;
 }
 
+.file-tree-item.staged {
+  border-left: 2px solid var(--primary);
+}
+
+.file-tree-item.staged.active {
+  border-left-color: var(--primary-foreground);
+}
+
 /* Annotation toolbar for code review */
 .review-toolbar {
   position: absolute;
diff --git a/packages/server/git.ts b/packages/server/git.ts
index 1eb628371..33fc58ea6 100644
--- a/packages/server/git.ts
+++ b/packages/server/git.ts
@@ -114,6 +114,8 @@ export async function getGitContext(): Promise<GitContext> {
 
   const diffOptions: DiffOption[] = [
     { id: "uncommitted", label: "Uncommitted changes" },
+    { id: "staged", label: "Staged changes" },
+    { id: "unstaged", label: "Unstaged changes" },
     { id: "last-commit", label: "Last commit" },
   ];
 
@@ -379,3 +381,31 @@ export async function getFileContentsForDiff(
 
   return { oldContent, newContent };
 }
+
+/**
+ * Validate a file path for git operations.
+ * Rejects path traversal and absolute paths.
+ */
+function validateFilePath(filePath: string): void {
+  if (filePath.includes("..") || filePath.startsWith("/")) {
+    throw new Error("Invalid file path");
+  }
+}
+
+/**
+ * Stage a file via `git add`.
+ */
+export async function gitAddFile(filePath: string, cwd?: string): Promise<void> {
+  validateFilePath(filePath);
+  const cmd = $`git add -- ${filePath}`.quiet();
+  await (cwd ? cmd.cwd(cwd) : cmd);
+}
+
+/**
+ * Unstage a file via `git reset HEAD`.
+ */
+export async function gitResetFile(filePath: string, cwd?: string): Promise<void> {
+  validateFilePath(filePath);
+  const cmd = $`git reset HEAD -- ${filePath}`.quiet();
+  await (cwd ? cmd.cwd(cwd) : cmd);
+}
diff --git a/packages/server/review.ts b/packages/server/review.ts
index 670b95912..360a639a5 100644
--- a/packages/server/review.ts
+++ b/packages/server/review.ts
@@ -10,7 +10,7 @@
  */
 
 import { isRemoteSession, getServerPort } from "./remote";
-import { type DiffType, type GitContext, runGitDiff, getFileContentsForDiff } from "./git";
+import { type DiffType, type GitContext, runGitDiff, getFileContentsForDiff, gitAddFile, gitResetFile, parseWorktreeDiffType } from "./git";
 import { getRepoInfo } from "./repo";
 import { handleImage, handleUpload, handleAgents, handleServerReady, handleDraftSave, handleDraftLoad, handleDraftDelete, type OpencodeClient } from "./shared-handlers";
 import { contentHash, deleteDraft } from "./draft";
@@ -199,6 +199,34 @@ export async function startReviewServer(
             return Response.json(result);
           }
 
+          // API: Git add / reset (stage / unstage) a file
+          if (url.pathname === "/api/git-add" && req.method === "POST") {
+            try {
+              const body = (await req.json()) as { filePath: string; undo?: boolean };
+              if (!body.filePath) {
+                return Response.json({ error: "Missing filePath" }, { status: 400 });
+              }
+
+              // Determine cwd for worktree support
+              let cwd: string | undefined;
+              if (currentDiffType.startsWith("worktree:")) {
+                const parsed = parseWorktreeDiffType(currentDiffType);
+                if (parsed) cwd = parsed.path;
+              }
+
+              if (body.undo) {
+                await gitResetFile(body.filePath, cwd);
+              } else {
+                await gitAddFile(body.filePath, cwd);
+              }
+
+              return Response.json({ ok: true });
+            } catch (err) {
+              const message = err instanceof Error ? err.message : "Failed to git add";
+              return Response.json({ error: message }, { status: 500 });
+            }
+          }
+
           // API: Serve images (local paths or temp uploads)
           if (url.pathname === "/api/image") {
             return handleImage(req);

From 6dfecbabf5c4385fee657d504665ca8df55bac7b Mon Sep 17 00:00:00 2001
From: Michael Ramos <mdramos8@gmail.com>
Date: Mon, 9 Mar 2026 07:10:25 -0700
Subject: [PATCH 2/4] style: use green background tint for staged files instead
 of left border

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 packages/review-editor/index.css | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/review-editor/index.css b/packages/review-editor/index.css
index 98dcf3773..b9dd71a58 100644
--- a/packages/review-editor/index.css
+++ b/packages/review-editor/index.css
@@ -348,11 +348,15 @@ diffs-container {
 }
 
 .file-tree-item.staged {
-  border-left: 2px solid var(--primary);
+  background: oklch(from var(--success) l c h / 0.1);
+}
+
+.file-tree-item.staged:hover {
+  background: var(--muted);
 }
 
 .file-tree-item.staged.active {
-  border-left-color: var(--primary-foreground);
+  background: var(--primary);
 }
 
 /* Annotation toolbar for code review */

From f620d1ef849f2c33b51e18d44c6819780b07f59f Mon Sep 17 00:00:00 2001
From: Michael Ramos <mdramos8@gmail.com>
Date: Mon, 9 Mar 2026 07:24:39 -0700
Subject: [PATCH 3/4] fix: support staged/unstaged diffs in worktrees and
 display stage errors

Adds "staged" and "unstaged" to worktree sub-type allowlists (server parser,
client parser, and runGitDiff switch), displays stageError in FileHeader,
and documents /api/git-add in CLAUDE.md.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 CLAUDE.md                                        |  1 +
 packages/review-editor/App.tsx                   |  3 ++-
 packages/review-editor/components/DiffViewer.tsx |  3 +++
 packages/review-editor/components/FileHeader.tsx |  5 +++++
 packages/server/git.ts                           | 13 ++++++++++++-
 5 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 469d0a34d..fa9bc2f81 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -177,6 +177,7 @@ Send Annotations → feedback sent to agent session
 | --------------------- | ------ | ------------------------------------------ |
 | `/api/diff`           | GET    | Returns `{ rawPatch, gitRef, origin }`     |
 | `/api/file-content`   | GET    | Returns `{ oldContent, newContent }` for expandable diff context |
+| `/api/git-add`        | POST   | Stage/unstage a file (body: `{ filePath, undo? }`) |
 | `/api/feedback`       | POST   | Submit review (body: feedback, annotations, agentSwitch) |
 | `/api/image`          | GET    | Serve image by path query param            |
 | `/api/upload`         | POST   | Upload image, returns `{ path, originalName }` |
diff --git a/packages/review-editor/App.tsx b/packages/review-editor/App.tsx
index 9352e9ed6..da8c3b7df 100644
--- a/packages/review-editor/App.tsx
+++ b/packages/review-editor/App.tsx
@@ -353,7 +353,7 @@ const ReviewApp: React.FC = () => {
       const lastColon = rest.lastIndexOf(':');
       if (lastColon !== -1) {
         const sub = rest.slice(lastColon + 1);
-        if (['uncommitted', 'last-commit', 'branch'].includes(sub)) {
+        if (['uncommitted', 'staged', 'unstaged', 'last-commit', 'branch'].includes(sub)) {
           return { activeWorktreePath: rest.slice(0, lastColon), activeDiffBase: sub };
         }
       }
@@ -854,6 +854,7 @@ const ReviewApp: React.FC = () => {
                 isStaging={stagingFile === activeFile.path}
                 onStage={() => stageFile(activeFile.path)}
                 canStage={canStageFiles}
+                stageError={stageError}
               />
             ) : (
               <div className="h-full flex items-center justify-center">
diff --git a/packages/review-editor/components/DiffViewer.tsx b/packages/review-editor/components/DiffViewer.tsx
index 69089c179..2a3a9e216 100644
--- a/packages/review-editor/components/DiffViewer.tsx
+++ b/packages/review-editor/components/DiffViewer.tsx
@@ -29,6 +29,7 @@ interface DiffViewerProps {
   isStaging?: boolean;
   onStage?: () => void;
   canStage?: boolean;
+  stageError?: string | null;
 }
 
 export const DiffViewer: React.FC<DiffViewerProps> = ({
@@ -50,6 +51,7 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
   isStaging = false,
   onStage,
   canStage = false,
+  stageError,
 }) => {
   const { theme } = useTheme();
   const containerRef = useRef<HTMLDivElement>(null);
@@ -192,6 +194,7 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
         isStaging={isStaging}
         onStage={onStage}
         canStage={canStage}
+        stageError={stageError}
       />
 
       <div className="p-4">
diff --git a/packages/review-editor/components/FileHeader.tsx b/packages/review-editor/components/FileHeader.tsx
index 89b2fce58..6a4d258a9 100644
--- a/packages/review-editor/components/FileHeader.tsx
+++ b/packages/review-editor/components/FileHeader.tsx
@@ -9,6 +9,7 @@ interface FileHeaderProps {
   isStaging?: boolean;
   onStage?: () => void;
   canStage?: boolean;
+  stageError?: string | null;
 }
 
 /** Sticky file header with file path, Viewed toggle, Git Add, and Copy Diff button */
@@ -21,6 +22,7 @@ export const FileHeader: React.FC<FileHeaderProps> = ({
   isStaging = false,
   onStage,
   canStage = false,
+  stageError,
 }) => {
   const [copied, setCopied] = useState(false);
 
@@ -80,6 +82,9 @@ export const FileHeader: React.FC<FileHeaderProps> = ({
             {isStaging ? 'Adding...' : isStaged ? 'Added' : 'Git Add'}
           </button>
         )}
+        {stageError && (
+          <span className="text-xs text-destructive">{stageError}</span>
+        )}
         <button
           onClick={async () => {
             try {
diff --git a/packages/server/git.ts b/packages/server/git.ts
index 33fc58ea6..0a0a30dea 100644
--- a/packages/server/git.ts
+++ b/packages/server/git.ts
@@ -176,7 +176,7 @@ async function getUntrackedFileDiffs(srcPrefix = 'a/', dstPrefix = 'b/', cwd?: s
  * Parse a worktree diff type like `worktree:/path:last-commit` into path + sub-type.
  * Falls back to `uncommitted` if no sub-type suffix (backwards compatible).
  */
-const WORKTREE_SUB_TYPES = new Set(["uncommitted", "last-commit", "branch"]);
+const WORKTREE_SUB_TYPES = new Set(["uncommitted", "staged", "unstaged", "last-commit", "branch"]);
 
 export function parseWorktreeDiffType(diffType: string): { path: string; subType: string } | null {
   if (!diffType.startsWith("worktree:")) return null;
@@ -231,6 +231,17 @@ export async function runGitDiff(
           label = "Last commit";
           break;
         }
+        case "staged":
+          patch = (await $`git diff --staged --src-prefix=a/ --dst-prefix=b/`.quiet().cwd(wtPath)).text();
+          label = "Staged changes";
+          break;
+        case "unstaged": {
+          const trackedDiff = (await $`git diff --src-prefix=a/ --dst-prefix=b/`.quiet().cwd(wtPath)).text();
+          const untrackedDiff = await getUntrackedFileDiffs('a/', 'b/', wtPath);
+          patch = trackedDiff + untrackedDiff;
+          label = "Unstaged changes";
+          break;
+        }
         case "branch":
           patch = (await $`git diff ${defaultBranch}..HEAD --src-prefix=a/ --dst-prefix=b/`.quiet().cwd(wtPath)).text();
           label = `Changes vs ${defaultBranch}`;

From 96de4c2412cb494fb24ec14ee1251710a0937cbe Mon Sep 17 00:00:00 2001
From: Michael Ramos <mdramos8@gmail.com>
Date: Mon, 9 Mar 2026 07:29:22 -0700
Subject: [PATCH 4/4] =?UTF-8?q?refactor:=20clean=20up=20git=20add=20featur?=
 =?UTF-8?q?e=20=E2=80=94=20fix=20stale=20closure,=20timeout=20leak,=20dedu?=
 =?UTF-8?q?p=20validation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- useGitAdd: use ref for stagedFiles to stabilize stageFile callback,
  clear error timeout on reset, drop unnecessary useMemo
- App.tsx: wrap onFileViewed in useCallback
- FileTree: merge duplicate staged count conditionals
- review.ts: reuse exported validateFilePath for /api/file-content

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 packages/review-editor/App.tsx                 |  6 +++++-
 packages/review-editor/components/FileTree.tsx | 12 ++++++------
 packages/review-editor/hooks/useGitAdd.ts      | 17 ++++++++++++-----
 packages/server/git.ts                         |  2 +-
 packages/server/review.ts                      | 10 ++++++----
 5 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/packages/review-editor/App.tsx b/packages/review-editor/App.tsx
index da8c3b7df..c04200cf6 100644
--- a/packages/review-editor/App.tsx
+++ b/packages/review-editor/App.tsx
@@ -363,9 +363,13 @@ const ReviewApp: React.FC = () => {
   }, [diffType]);
 
   // Git add/staging logic
+  const handleFileViewedFromStage = useCallback(
+    (path: string) => setViewedFiles(prev => new Set(prev).add(path)),
+    [],
+  );
   const { stagedFiles, stagingFile, canStageFiles, stageFile, resetStagedFiles, stageError } = useGitAdd({
     activeDiffBase,
-    onFileViewed: (path) => setViewedFiles(prev => new Set(prev).add(path)),
+    onFileViewed: handleFileViewedFromStage,
   });
 
   // Shared helper: fetch a diff switch and update state
diff --git a/packages/review-editor/components/FileTree.tsx b/packages/review-editor/components/FileTree.tsx
index a55635e5e..6e2e1b246 100644
--- a/packages/review-editor/components/FileTree.tsx
+++ b/packages/review-editor/components/FileTree.tsx
@@ -145,12 +145,12 @@ export const FileTree: React.FC<FileTreeProps> = ({
           </span>
           <div className="flex items-center gap-1.5">
             {stagedFiles && stagedFiles.size > 0 && (
-              <span className="text-xs text-primary font-medium">
-                {stagedFiles.size} added
-              </span>
-            )}
-            {stagedFiles && stagedFiles.size > 0 && (
-              <span className="text-muted-foreground/40">·</span>
+              <>
+                <span className="text-xs text-primary font-medium">
+                  {stagedFiles.size} added
+                </span>
+                <span className="text-muted-foreground/40">·</span>
+              </>
             )}
             <span className="text-xs text-muted-foreground">
               {viewedFiles.size}/{files.length}
diff --git a/packages/review-editor/hooks/useGitAdd.ts b/packages/review-editor/hooks/useGitAdd.ts
index 67aa1da45..bb544d3ea 100644
--- a/packages/review-editor/hooks/useGitAdd.ts
+++ b/packages/review-editor/hooks/useGitAdd.ts
@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback, useRef } from 'react';
 
 interface UseGitAddOptions {
   activeDiffBase: string;
@@ -20,13 +20,19 @@ export function useGitAdd({ activeDiffBase, onFileViewed }: UseGitAddOptions): U
   const [stagedFiles, setStagedFiles] = useState<Set<string>>(new Set());
   const [stagingFile, setStagingFile] = useState<string | null>(null);
   const [stageError, setStageError] = useState<string | null>(null);
+  const errorTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
 
-  const canStageFiles = useMemo(() => STAGEABLE_DIFF_TYPES.has(activeDiffBase), [activeDiffBase]);
+  const canStageFiles = STAGEABLE_DIFF_TYPES.has(activeDiffBase);
+
+  // Use a ref so stageFile doesn't need stagedFiles in its dependency array
+  const stagedFilesRef = useRef(stagedFiles);
+  stagedFilesRef.current = stagedFiles;
 
   const stageFile = useCallback(async (filePath: string) => {
-    const isUndo = stagedFiles.has(filePath);
+    const isUndo = stagedFilesRef.current.has(filePath);
     setStagingFile(filePath);
     setStageError(null);
+    clearTimeout(errorTimeoutRef.current);
 
     try {
       const res = await fetch('/api/git-add', {
@@ -57,15 +63,16 @@ export function useGitAdd({ activeDiffBase, onFileViewed }: UseGitAddOptions): U
     } catch (err) {
       const message = err instanceof Error ? err.message : 'Git add failed';
       setStageError(message);
-      setTimeout(() => setStageError(null), 3000);
+      errorTimeoutRef.current = setTimeout(() => setStageError(null), 3000);
     } finally {
       setStagingFile(null);
     }
-  }, [stagedFiles, onFileViewed]);
+  }, [onFileViewed]);
 
   const resetStagedFiles = useCallback(() => {
     setStagedFiles(new Set());
     setStageError(null);
+    clearTimeout(errorTimeoutRef.current);
   }, []);
 
   return { stagedFiles, stagingFile, canStageFiles, stageFile, resetStagedFiles, stageError };
diff --git a/packages/server/git.ts b/packages/server/git.ts
index 0a0a30dea..c9dcb2885 100644
--- a/packages/server/git.ts
+++ b/packages/server/git.ts
@@ -397,7 +397,7 @@ export async function getFileContentsForDiff(
  * Validate a file path for git operations.
  * Rejects path traversal and absolute paths.
  */
-function validateFilePath(filePath: string): void {
+export function validateFilePath(filePath: string): void {
   if (filePath.includes("..") || filePath.startsWith("/")) {
     throw new Error("Invalid file path");
   }
diff --git a/packages/server/review.ts b/packages/server/review.ts
index 360a639a5..2cc50a387 100644
--- a/packages/server/review.ts
+++ b/packages/server/review.ts
@@ -10,7 +10,7 @@
  */
 
 import { isRemoteSession, getServerPort } from "./remote";
-import { type DiffType, type GitContext, runGitDiff, getFileContentsForDiff, gitAddFile, gitResetFile, parseWorktreeDiffType } from "./git";
+import { type DiffType, type GitContext, runGitDiff, getFileContentsForDiff, gitAddFile, gitResetFile, parseWorktreeDiffType, validateFilePath } from "./git";
 import { getRepoInfo } from "./repo";
 import { handleImage, handleUpload, handleAgents, handleServerReady, handleDraftSave, handleDraftLoad, handleDraftDelete, type OpencodeClient } from "./shared-handlers";
 import { contentHash, deleteDraft } from "./draft";
@@ -182,12 +182,14 @@ export async function startReviewServer(
             if (!filePath) {
               return Response.json({ error: "Missing path" }, { status: 400 });
             }
-            if (filePath.includes("..") || filePath.startsWith("/")) {
+            try { validateFilePath(filePath); } catch {
               return Response.json({ error: "Invalid path" }, { status: 400 });
             }
             const oldPath = url.searchParams.get("oldPath") || undefined;
-            if (oldPath && (oldPath.includes("..") || oldPath.startsWith("/"))) {
-              return Response.json({ error: "Invalid path" }, { status: 400 });
+            if (oldPath) {
+              try { validateFilePath(oldPath); } catch {
+                return Response.json({ error: "Invalid path" }, { status: 400 });
+              }
             }
             const defaultBranch = gitContext?.defaultBranch || "main";
             const result = await getFileContentsForDiff(