From 321a8929a6181530af9a9217cdd4e49c1e405d87 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Mon, 1 Jun 2026 04:27:19 -0400
Subject: [PATCH 01/63] feat(review): GitHub PR review-sync backend

Add syncPRReview in github.ts plus the review:sync IPC handler, the
reviewSync backend method, and the shared ReviewSync* types. Sync pushes
local line comments as a DRAFT pending review (addPullRequestReview /
addPullRequestReviewThread, anchored RIGHT-side), marks locally-reviewed
files as viewed (mark-only, never unmark), then pulls the canonical
comment set (published + the user's pending drafts) and unions GitHub's
per-file viewerViewedState back in. A pull-only mode fetches comments
without pushing (used by auto-sync on review open). Best-effort: rejected
comments are counted failed and kept local; resolves token + upstream
repo + PR number like pr:merge.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/main/github.ts            | 269 +++++++++++++++++++++++++++++++++-
 src/main/index.ts             |  34 ++++-
 src/renderer/build-backend.ts |   3 +
 src/renderer/types.ts         |   5 +-
 src/shared/github-types.ts    |  38 +++++
 5 files changed, 345 insertions(+), 4 deletions(-)

diff --git a/src/main/github.ts b/src/main/github.ts
index 1f6ce15f..a233bd84 100644
--- a/src/main/github.ts
+++ b/src/main/github.ts
@@ -4,7 +4,13 @@ import { log, formatErr } from './debug'
 import { getCachedToken, invalidateTokenCache, resolveGitHubToken } from './github-auth'
 import { trackedFetch } from './github-recorder'
 import type { CheckStatus, PRReview, PRStatus } from '../shared/state/prs'
-import type { PRSummary, PRMetadata } from '../shared/github-types'
+import type {
+  PRSummary,
+  PRMetadata,
+  ReviewSyncComment,
+  ReviewSyncInput,
+  ReviewSyncResult
+} from '../shared/github-types'
 
 export type { CheckStatus, PRReview, PRStatus, PRSummary, PRMetadata }
 
@@ -1173,6 +1179,267 @@ export async function getPRMetadata(
   }
 }
 
+// --- Review sync -----------------------------------------------------------
+
+async function ghRequest(
+  token: string,
+  url: string,
+  method: string,
+  body?: unknown
+): Promise<{ ok: boolean; status: number; json: unknown }> {
+  const headers: Record<string, string> = {
+    Accept: 'application/vnd.github+json',
+    'User-Agent': 'Harness',
+    'X-GitHub-Api-Version': '2022-11-28',
+    Authorization: `Bearer ${token}`
+  }
+  if (body !== undefined) headers['Content-Type'] = 'application/json'
+  const res = await trackedFetch(url, {
+    method,
+    headers,
+    body: body !== undefined ? JSON.stringify(body) : undefined
+  })
+  let json: unknown = null
+  try {
+    json = await res.json()
+  } catch {
+    /* empty body */
+  }
+  return { ok: res.ok, status: res.status, json }
+}
+
+async function ghGraphQL(
+  token: string,
+  query: string,
+  variables: Record<string, unknown>
+): Promise<{ ok: boolean; data?: unknown; error?: string }> {
+  const res = await trackedFetch('https://api.github.com/graphql', {
+    method: 'POST',
+    headers: {
+      Accept: 'application/vnd.github+json',
+      'User-Agent': 'Harness',
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({ query, variables })
+  })
+  if (!res.ok) return { ok: false, error: `HTTP ${res.status}` }
+  const json = (await res.json()) as { data?: unknown; errors?: { message: string }[] }
+  if (json.errors && json.errors.length > 0) {
+    return { ok: false, data: json.data, error: json.errors.map((e) => e.message).join('; ') }
+  }
+  return { ok: true, data: json.data }
+}
+
+/** Push local review comments (as a DRAFT/pending review) + per-file viewed
+ *  state to a GitHub PR, then pull the canonical comment set back.
+ *
+ *  Comments are added to the viewer's pending review so they stay unpublished
+ *  until the user submits the review on GitHub. A user can only have one
+ *  pending review per PR, so we reuse an existing one (adding threads to it)
+ *  or create a fresh one. Line comments use the RIGHT side; file-level
+ *  (line 0) comments aren't supported as drafts and are left local.
+ *
+ *  Best-effort: a comment GitHub rejects (e.g. a line outside the diff) is
+ *  counted as failed and kept locally rather than aborting the sync.
+ *  Comments already carrying a remoteId are assumed pushed and not re-sent. */
+export async function syncPRReview(
+  token: string,
+  owner: string,
+  repo: string,
+  prNumber: number,
+  input: ReviewSyncInput
+): Promise<ReviewSyncResult> {
+  const base = `https://api.github.com/repos/${owner}/${repo}/pulls/${prNumber}`
+  const passthrough = {
+    comments: input.comments,
+    reviewedFiles: input.reviewedFiles,
+    pushed: 0,
+    failed: 0
+  }
+
+  // 1. PR node id (for the draft-review + viewed-state GraphQL APIs).
+  let nodeId = ''
+  try {
+    const pr = await ghRequest(token, base, 'GET')
+    if (!pr.ok) {
+      return { ok: false, error: `Could not load PR #${prNumber} (HTTP ${pr.status})`, ...passthrough }
+    }
+    nodeId = (pr.json as { node_id?: string }).node_id ?? ''
+  } catch (err) {
+    return { ok: false, error: formatErr(err), ...passthrough }
+  }
+  if (!nodeId) return { ok: false, error: 'Could not resolve PR node id', ...passthrough }
+
+  // 2. Find the viewer's existing pending review, if any. Pending reviews are
+  //    only returned to their author, so any PENDING entry here is ours.
+  let pendingReviewNodeId = ''
+  let pendingReviewId: number | null = null
+  try {
+    const res = await ghRequest(token, `${base}/reviews?per_page=100`, 'GET')
+    if (res.ok && Array.isArray(res.json)) {
+      const pending = (res.json as Array<{ id: number; node_id: string; state: string }>).find(
+        (r) => r.state === 'PENDING'
+      )
+      if (pending) {
+        pendingReviewNodeId = pending.node_id
+        pendingReviewId = pending.id
+      }
+    }
+  } catch (err) {
+    log('github', 'list reviews failed', formatErr(err))
+  }
+
+  // 3. Push un-synced line comments as drafts on the pending review.
+  const toPush = input.pullOnly
+    ? []
+    : input.comments.filter((c) => c.remoteId === undefined && c.lineNumber > 0)
+  let pushed = 0
+  let failed = 0
+  if (toPush.length > 0) {
+    if (pendingReviewNodeId) {
+      // Existing pending review — add each comment as a thread.
+      for (const c of toPush) {
+        const r = await ghGraphQL(
+          token,
+          `mutation($rid:ID!,$path:String!,$line:Int!,$body:String!){
+             addPullRequestReviewThread(input:{pullRequestReviewId:$rid,path:$path,line:$line,side:RIGHT,body:$body}){ thread { id } }
+           }`,
+          { rid: pendingReviewNodeId, path: c.filePath, line: c.lineNumber, body: c.body }
+        )
+        if (r.ok) pushed++
+        else {
+          failed++
+          log('github', `draft thread rejected ${c.filePath}:${c.lineNumber}: ${r.error}`)
+        }
+      }
+    } else {
+      // No pending review yet — create one carrying all the threads.
+      const threads = toPush.map((c) => ({
+        path: c.filePath,
+        line: c.lineNumber,
+        side: 'RIGHT',
+        body: c.body
+      }))
+      const r = await ghGraphQL(
+        token,
+        `mutation($prId:ID!,$threads:[DraftPullRequestReviewThread!]){
+           addPullRequestReview(input:{pullRequestId:$prId,threads:$threads}){ pullRequestReview { databaseId } }
+         }`,
+        { prId: nodeId, threads }
+      )
+      if (r.ok) {
+        pushed += toPush.length
+        const dbId = (
+          r.data as { addPullRequestReview?: { pullRequestReview?: { databaseId?: number } } } | undefined
+        )?.addPullRequestReview?.pullRequestReview?.databaseId
+        if (typeof dbId === 'number') pendingReviewId = dbId
+      } else {
+        failed += toPush.length
+        log('github', `create draft review failed: ${r.error}`)
+      }
+    }
+  }
+
+  // 4. Push viewed state — only MARK locally-reviewed files. Never unmark:
+  //    a file viewed on GitHub (but not locally) must not get cleared.
+  //    Skipped on a pull-only sync.
+  const reviewedSet = new Set(input.reviewedFiles)
+  if (!input.pullOnly) {
+    for (const path of input.files) {
+      if (!reviewedSet.has(path)) continue
+      const r = await ghGraphQL(
+        token,
+        'mutation($id:ID!,$p:String!){markFileAsViewed(input:{pullRequestId:$id,path:$p}){clientMutationId}}',
+        { id: nodeId, p: path }
+      )
+      if (!r.ok) log('github', `mark viewed failed for ${path}: ${r.error}`)
+    }
+  }
+
+  // 4b. Pull GitHub's viewed state and union it with the local set, so files
+  //     viewed on GitHub stay viewed (and vice-versa). Viewed state is
+  //     additive — un-viewing isn't propagated.
+  const ghViewed = new Set<string>()
+  const viewedQuery = await ghGraphQL(
+    token,
+    'query($o:String!,$n:String!,$num:Int!){repository(owner:$o,name:$n){pullRequest(number:$num){files(first:100){nodes{path viewerViewedState}}}}}',
+    { o: owner, n: repo, num: prNumber }
+  )
+  if (viewedQuery.ok) {
+    const nodes =
+      (
+        viewedQuery.data as {
+          repository?: {
+            pullRequest?: { files?: { nodes?: Array<{ path: string; viewerViewedState?: string }> } }
+          }
+        }
+      )?.repository?.pullRequest?.files?.nodes ?? []
+    for (const f of nodes) if (f.viewerViewedState === 'VIEWED') ghViewed.add(f.path)
+  } else {
+    log('github', `viewed-state query failed: ${viewedQuery.error}`)
+  }
+  const mergedReviewed = [...new Set([...input.reviewedFiles, ...ghViewed])]
+
+  // 5. Pull the canonical comment set: published comments + our pending
+  //    review's drafts (so freshly-pushed drafts get an id and don't re-post).
+  const pulled: ReviewSyncComment[] = []
+  type ApiComment = {
+    id: number
+    path: string
+    line?: number | null
+    original_line?: number | null
+    body?: string
+    created_at?: string
+    html_url?: string
+    user?: { login?: string; avatar_url?: string }
+  }
+  const collect = (arr: ApiComment[]): void => {
+    for (const rc of arr) {
+      pulled.push({
+        filePath: rc.path,
+        lineNumber: rc.line ?? rc.original_line ?? 0,
+        body: rc.body ?? '',
+        remoteId: rc.id,
+        author: rc.user?.login,
+        authorAvatarUrl: rc.user?.avatar_url,
+        createdAt: rc.created_at,
+        htmlUrl: rc.html_url
+      })
+    }
+  }
+  try {
+    const published = await ghRequest(token, `${base}/comments?per_page=100`, 'GET')
+    if (published.ok && Array.isArray(published.json)) collect(published.json as ApiComment[])
+  } catch (err) {
+    log('github', 'list review comments error', formatErr(err))
+  }
+  if (pendingReviewId !== null) {
+    try {
+      const drafts = await ghRequest(token, `${base}/reviews/${pendingReviewId}/comments?per_page=100`, 'GET')
+      if (drafts.ok && Array.isArray(drafts.json)) collect(drafts.json as ApiComment[])
+    } catch (err) {
+      log('github', 'list pending review comments error', formatErr(err))
+    }
+  }
+
+  // Keep local comments not represented in the pulled set — file-level
+  // comments (no draft support) and any that failed to push — so they're
+  // not lost and can retry next sync.
+  const pulledKey = new Set(pulled.map((c) => `${c.filePath}:${c.lineNumber}:${c.body}`))
+  const keptLocal = input.comments.filter(
+    (c) => c.remoteId === undefined && !pulledKey.has(`${c.filePath}:${c.lineNumber}:${c.body}`)
+  )
+
+  return {
+    ok: true,
+    comments: [...pulled, ...keptLocal],
+    reviewedFiles: mergedReviewed,
+    pushed,
+    failed
+  }
+}
+
 /** Test a token by making an authenticated request to /user. Returns the username if valid. */
 export async function testToken(token: string): Promise<{ ok: boolean; username?: string; error?: string }> {
   try {
diff --git a/src/main/index.ts b/src/main/index.ts
index 32718428..0ef12703 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -38,7 +38,8 @@ import { getWeeklyStats } from './weekly-stats'
 import type { TerminalTab, PaneNode, PaneLeaf } from '../shared/state/terminals'
 import { getLeaves, mapLeaves } from '../shared/state/terminals'
 import { listWorktrees, listBranches, continueWorktree, isWorktreeDirty, defaultWorktreeDir, getChangedFiles, getFileDiff, getBranchCommits, getCommitDiff, getCommitMeta, getCommitChangedFiles, getCommitFileDiffSides, getCommitRangeChangedFiles, getCommitRangeFileDiffSides, getMainWorktreeStatus, prepareMainForMerge, mergeWorktreeLocally, getBranchSha, previewMergeConflicts, getBranchDiffStats, listAllFiles, listRecentCommitShas, readWorktreeFile, readWorktreeFileBinary, writeWorktreeFile, getFileDiffSides, getCurrentBranch, symlinkClaudeSettings, type MergeStrategy } from './worktree'
-import { listOpenPRs, testToken, starRepo, unstarRepo, isRepoStarred, mergePR, approvePR, getRepoInfo, type GitHubMergeMethod, type MergePRResult } from './github'
+import { listOpenPRs, testToken, starRepo, unstarRepo, isRepoStarred, mergePR, approvePR, getRepoInfo, getRepoContext, syncPRReview, type GitHubMergeMethod, type MergePRResult } from './github'
+import type { ReviewSyncInput, ReviewSyncResult } from '../shared/github-types'
 import { AVAILABLE_EDITORS, DEFAULT_EDITOR_ID, openInEditor } from './editor'
 import { setSecret, getSecret, hasSecret, deleteSecret } from './secrets'
 import { resolveGitHubToken, getTokenSource, invalidateTokenCache, getCachedToken } from './github-auth'
@@ -1589,6 +1590,37 @@ function registerIpcHandlers(): void {
     }
   )
 
+  transport.onRequest(
+    'review:sync',
+    async (_ctx, worktreePath: string, input: ReviewSyncInput): Promise<ReviewSyncResult> => {
+      const passthrough = {
+        comments: input.comments,
+        reviewedFiles: input.reviewedFiles,
+        pushed: 0,
+        failed: 0
+      }
+      const token = getCachedToken()
+      if (!token) {
+        return { ok: false, error: 'Connect a GitHub token in Settings to sync', ...passthrough }
+      }
+      // PRs (incl. fork PRs) live on the upstream repo — that's where the
+      // PR number the poller cached came from.
+      const ctx = await getRepoContext(worktreePath)
+      if (!ctx) {
+        return { ok: false, error: 'Could not resolve GitHub repo from worktree origin', ...passthrough }
+      }
+      let prNumber = store.getSnapshot().state.prs.byPath[worktreePath]?.number
+      if (typeof prNumber !== 'number') {
+        await prPoller.refreshOne(worktreePath)
+        prNumber = store.getSnapshot().state.prs.byPath[worktreePath]?.number
+      }
+      if (typeof prNumber !== 'number') {
+        return { ok: false, error: 'No pull request found for this worktree', ...passthrough }
+      }
+      return syncPRReview(token, ctx.upstream.owner, ctx.upstream.repo, prNumber, input)
+    }
+  )
+
   transport.onRequest('stats:getWeekly', async (_ctx) => {
     const snap = store.getSnapshot().state
     return getWeeklyStats(snap.prs, snap.worktrees)
diff --git a/src/renderer/build-backend.ts b/src/renderer/build-backend.ts
index c2ccab45..cc6c4657 100644
--- a/src/renderer/build-backend.ts
+++ b/src/renderer/build-backend.ts
@@ -39,6 +39,7 @@ import type {
   StateEventListener
 } from '../shared/transport/transport'
 import type { ElectronAPI } from './types'
+import type { ReviewSyncInput } from '../shared/github-types'
 
 export type { ElectronOnlyHelpers }
 
@@ -222,6 +223,8 @@ export function buildBackend(
     listRepoPRs: (repoRoot: string) => req('prs:listOpen', repoRoot),
     mergePR: (worktreePath: string, method: 'merge' | 'squash' | 'rebase') =>
       req('pr:merge', worktreePath, method),
+    reviewSync: (worktreePath: string, input: ReviewSyncInput) =>
+      req('review:sync', worktreePath, input),
     approvePR: (worktreePath: string) => req('pr:approve', worktreePath),
 
     getWeeklyStats: () => req('stats:getWeekly'),
diff --git a/src/renderer/types.ts b/src/renderer/types.ts
index 0ead0aa5..28e5f103 100644
--- a/src/renderer/types.ts
+++ b/src/renderer/types.ts
@@ -129,8 +129,8 @@ export type { PerfMetrics, PerfSample }
 import type { CheckStatus, PRReview, PRStatus } from '../shared/state/prs'
 export type { CheckStatus, PRReview, PRStatus }
 
-import type { PRSummary, PRMetadata } from '../shared/github-types'
-export type { PRSummary, PRMetadata }
+import type { PRSummary, PRMetadata, ReviewSyncInput, ReviewSyncResult, ReviewSyncComment } from '../shared/github-types'
+export type { PRSummary, PRMetadata, ReviewSyncInput, ReviewSyncResult, ReviewSyncComment }
 
 import type { BrowserState, BrowserTabState } from '../shared/state/browser'
 export type { BrowserState, BrowserTabState }
@@ -267,6 +267,7 @@ export interface ElectronAPI {
     worktreePath: string
   ): Promise<{ ok: true } | { ok: false; error: string }>
 
+  reviewSync(worktreePath: string, input: ReviewSyncInput): Promise<ReviewSyncResult>
   getWeeklyStats(): Promise<WeeklyStats>
   getBranchCommits(worktreePath: string): Promise<BranchCommit[]>
   getCommitDiff(worktreePath: string, hash: string): Promise<CommitDiff | null>
diff --git a/src/shared/github-types.ts b/src/shared/github-types.ts
index dca5e86b..77039aed 100644
--- a/src/shared/github-types.ts
+++ b/src/shared/github-types.ts
@@ -28,3 +28,41 @@ export interface PRSummary {
 }
 
 export type PRMetadata = PRSummary
+
+/** A review comment shuttled between the renderer and GitHub. lineNumber is
+ *  the 1-based modified-side line; 0 means a file-level comment. remoteId is
+ *  the GitHub review-comment id — present once the comment has been posted
+ *  or fetched, absent for a local comment that still needs pushing. */
+export interface ReviewSyncComment {
+  filePath: string
+  lineNumber: number
+  body: string
+  remoteId?: number
+  author?: string
+  authorAvatarUrl?: string
+  /** ISO timestamp the comment was created (from GitHub). */
+  createdAt?: string
+  /** Link to the comment on GitHub. */
+  htmlUrl?: string
+}
+
+export interface ReviewSyncInput {
+  comments: ReviewSyncComment[]
+  reviewedFiles: string[]
+  files: string[]
+  /** Pull only — fetch PR comments without pushing local comments or viewed
+   *  state. Used by the auto-sync on review open so it can't clobber GitHub
+   *  state from an empty local review. */
+  pullOnly?: boolean
+}
+
+export interface ReviewSyncResult {
+  ok: boolean
+  error?: string
+  /** The reconciled comment set: everything now on the PR, plus any local
+   *  comments that failed to post (so they're not lost). */
+  comments: ReviewSyncComment[]
+  reviewedFiles: string[]
+  pushed: number
+  failed: number
+}

From 36245ff282104689cd176e957ab1a09c5aae11cc Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Mon, 1 Jun 2026 04:28:10 -0400
Subject: [PATCH 02/63] feat(review): in-app Review tab overhaul + diff/editor
 tab improvements

Review tab (ReviewPane/ReviewDiffPane/ReviewFileTree):
- Two-row toolbar: commit selector (with diff stat), Split/Unified +
  whitespace toggles, Copy/Sync/Send actions on top; reviewer status,
  comment dropdown, and files reviewed/remaining on the second row.
- Split/Unified (s/d) and whitespace toggles; honor side-by-side in narrow
  panes (useInlineViewWhenSpaceIsLimited). All review shortcuts
  (j/k/[/]/r/s/d/c/?) live in one handler, gated on the tab being active.
- Inline comments: markdown bodies, author avatar + @handle + relative
  time linking to GitHub, prominent styling, view-zones redrawn on editor
  (re)mount. 'c' comments the hovered line (or file-level). Comment
  dropdown + jump-to-first-comment button; jump scrolls reliably.
- Sync button (drafts), status dot, disabled off "All commits"; auto
  pull-only sync on open. Reviewer avatars show state + top-level review
  (markdown) on click. Refresh on git changes.
- "Viewed" button moved right; ClipboardCheck tab icon.

Diff/editor tabs:
- Diff tab view-only with Unified/Split/Full modes; Edit opens the editor
  tab; "Uncommitted" label; whitespace toggle. Committed files in Changed
  Files open the Review tab on that file. Section counts in Changed Files
  headers.
- Editor: reliable Cmd/Ctrl+S (onKeyDown), Save moved left with unsaved
  badge, FileInput/FileOutput markdown toggle, warn before closing a tab
  with unsaved changes (dirty-tabs registry).
- Distinct Diff/File tab icons.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/renderer/App.tsx                          |   7 +
 src/renderer/components/ChangedFilesPanel.tsx |  32 +-
 src/renderer/components/DiffView.tsx          | 215 +++++---
 src/renderer/components/FileView.tsx          |  46 +-
 src/renderer/components/MonacoDiffEditor.tsx  |  23 +-
 src/renderer/components/MonacoEditor.tsx      |  14 +-
 src/renderer/components/ReviewDiffPane.tsx    | 277 ++++++++--
 src/renderer/components/ReviewFileTree.tsx    |  35 +-
 src/renderer/components/ReviewPane.tsx        | 506 ++++++++++++++++--
 src/renderer/components/RightColumn.tsx       |   3 +
 src/renderer/components/TerminalPanel.tsx     |  12 +-
 src/renderer/components/WorkspaceView.tsx     |  10 +
 src/renderer/dirty-tabs.ts                    |  19 +
 src/renderer/hooks/useTabHandlers.ts          |   8 +
 src/renderer/review-open-file.ts              |  46 ++
 15 files changed, 1048 insertions(+), 205 deletions(-)
 create mode 100644 src/renderer/dirty-tabs.ts
 create mode 100644 src/renderer/review-open-file.ts

diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index d36f64f7..359b2236 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -25,6 +25,7 @@ import { QuestCard } from './components/QuestCard'
 import { WorkspaceView } from './components/WorkspaceView'
 import { QuakeTerminal } from './components/QuakeTerminal'
 import { RightColumn } from './components/RightColumn'
+import { requestReviewFile } from './review-open-file'
 import { CollapsedSidebar } from './components/CollapsedSidebar'
 import { CollapsedRightPanel } from './components/CollapsedRightPanel'
 import { Settings } from './components/Settings'
@@ -1569,6 +1570,7 @@ const setQuestStep = useCallback((next: QuestStep) => {
                   onReorderTabs={handleReorderTabs}
                   onMoveTabToPane={handleMoveTabToPane}
                   onSendToAgent={handleSendToAgent}
+                  onOpenFile={(_wtPath, filePath) => handleOpenFile(filePath)}
                   topBarLeadingPx={TITLE_LEADING_PX}
                   hideAppTitle={singleScreenMode}
                   onTitleBlockEdge={isVisible ? handleTitleBlockEdge : undefined}
@@ -1725,6 +1727,11 @@ const setQuestStep = useCallback((next: QuestStep) => {
             onOpenReview={() => {
               if (activeWorktreeId) void backend.panesOpenReview(activeWorktreeId)
             }}
+            onOpenReviewFile={(filePath) => {
+              if (!activeWorktreeId) return
+              requestReviewFile(activeWorktreeId, filePath)
+              void backend.panesOpenReview(activeWorktreeId)
+            }}
             onCollapse={() => setRightColumnHidden(true)}
           /></div></div>
         )}
diff --git a/src/renderer/components/ChangedFilesPanel.tsx b/src/renderer/components/ChangedFilesPanel.tsx
index 16798073..4bd39e74 100644
--- a/src/renderer/components/ChangedFilesPanel.tsx
+++ b/src/renderer/components/ChangedFilesPanel.tsx
@@ -13,6 +13,8 @@ interface ChangedFilesPanelProps {
   onOpenDiff: (filePath: string, staged: boolean, mode: Mode) => void
   onSendToAgent?: (text: string) => void
   onOpenReview?: () => void
+  /** Open the worktree's Review tab focused on this committed file. */
+  onOpenReviewFile?: (filePath: string) => void
 }
 
 const STATUS_LABEL: Record<ChangedFile['status'], string> = {
@@ -36,7 +38,7 @@ interface ChangedFilesData {
   branch: ChangedFile[]
 }
 
-export function ChangedFilesPanel({ worktreePath, onOpenDiff, onSendToAgent, onOpenReview }: ChangedFilesPanelProps): JSX.Element {
+export function ChangedFilesPanel({ worktreePath, onOpenDiff, onSendToAgent, onOpenReview, onOpenReviewFile }: ChangedFilesPanelProps): JSX.Element {
   const backend = useBackend()
   const fetcher = useCallback(async (path: string): Promise<ChangedFilesData> => {
     const [working, branch] = await Promise.all([
@@ -58,7 +60,6 @@ export function ChangedFilesPanel({ worktreePath, onOpenDiff, onSendToAgent, onO
 
   const stagedFiles = workingFiles.filter((f) => f.staged)
   const unstagedFiles = workingFiles.filter((f) => !f.staged)
-  const totalCount = workingFiles.length + branchFiles.length
 
   const actions = (
     <>
@@ -100,8 +101,11 @@ export function ChangedFilesPanel({ worktreePath, onOpenDiff, onSendToAgent, onO
         {worktreePath && hasLoaded && (
           <>
             {/* Uncommitted section */}
-            <div className="px-3 py-1.5 text-xs font-medium text-dim uppercase tracking-wider bg-panel-raised/50">
-              Uncommitted
+            <div className="flex items-center justify-between px-3 py-1.5 text-xs font-medium text-dim uppercase tracking-wider bg-panel-raised/50">
+              <span>Uncommitted</span>
+              {workingFiles.length > 0 && (
+                <span className="tabular-nums normal-case">{workingFiles.length}</span>
+              )}
             </div>
             {workingFiles.length === 0 ? (
               <div className="px-3 py-2 text-faint italic">No changes</div>
@@ -139,8 +143,11 @@ export function ChangedFilesPanel({ worktreePath, onOpenDiff, onSendToAgent, onO
             )}
 
             {/* Branch diff section */}
-            <div className="px-3 py-1.5 text-xs font-medium text-dim uppercase tracking-wider bg-panel-raised/50 mt-1">
-              Committed
+            <div className="flex items-center justify-between px-3 py-1.5 text-xs font-medium text-dim uppercase tracking-wider bg-panel-raised/50 mt-1">
+              <span>Committed</span>
+              {branchFiles.length > 0 && (
+                <span className="tabular-nums normal-case">{branchFiles.length}</span>
+              )}
             </div>
             {branchFiles.length === 0 ? (
               <div className="px-3 py-2 text-faint italic">No commits on this branch yet</div>
@@ -150,7 +157,11 @@ export function ChangedFilesPanel({ worktreePath, onOpenDiff, onSendToAgent, onO
                   key={`branch-${file.path}`}
                   file={file}
                   worktreePath={worktreePath}
-                  onClick={() => onOpenDiff(file.path, false, 'branch')}
+                  onClick={() =>
+                    onOpenReviewFile
+                      ? onOpenReviewFile(file.path)
+                      : onOpenDiff(file.path, false, 'branch')
+                  }
                   onSendToAgent={onSendToAgent}
                 />
               ))
@@ -159,13 +170,6 @@ export function ChangedFilesPanel({ worktreePath, onOpenDiff, onSendToAgent, onO
         )}
       </div>
 
-      {totalCount > 0 && (
-        <div className="px-3 py-1.5 border-t border-border text-xs text-faint shrink-0">
-          {workingFiles.length > 0 && <span>{workingFiles.length} uncommitted</span>}
-          {workingFiles.length > 0 && branchFiles.length > 0 && <span> · </span>}
-          {branchFiles.length > 0 && <span>{branchFiles.length} committed</span>}
-        </div>
-      )}
     </RightPanel>
   )
 }
diff --git a/src/renderer/components/DiffView.tsx b/src/renderer/components/DiffView.tsx
index b9b85cc1..4a104256 100644
--- a/src/renderer/components/DiffView.tsx
+++ b/src/renderer/components/DiffView.tsx
@@ -1,9 +1,10 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { ArrowRightFromLine, AtSign, Save, WrapText } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { ArrowRightFromLine, AtSign, Code2, Pencil, Pilcrow, WrapText } from 'lucide-react'
 import type { CommitDiff, FileDiffSides } from '../types'
 import { Tooltip } from './Tooltip'
 import { detectLanguage, highlightLine } from '../syntax'
 import { MonacoDiffEditor } from './MonacoDiffEditor'
+import { MonacoEditor } from './MonacoEditor'
 import { useSettings } from '../store'
 import { useBackend } from '../backend'
 import { scaledEditorFontSize } from '../../shared/state/settings'
@@ -14,9 +15,20 @@ interface DiffViewProps {
   staged?: boolean
   branchDiff?: boolean
   commitHash?: string
+  /** True when this diff tab is the active/visible tab in its pane.
+   *  Gates the d/f/s view-mode keyboard shortcuts so background tabs
+   *  don't react to them. */
+  active?: boolean
+  /** Open the dedicated editor (file) tab for this path. The diff tab is
+   *  view-only; the Edit action routes here so a file is only ever
+   *  editable in one place — never two tabs writing the same file. */
+  onOpenEditor?: (filePath: string) => void
   onSendToAgent?: (text: string) => void
 }
 
+/** Diff-tab view modes for a single file. */
+type FileViewMode = 'unified' | 'split' | 'full'
+
 export function DiffView(props: DiffViewProps): JSX.Element {
   if (props.commitHash) return <CommitDiffView {...props} />
   if (props.filePath) return <FileDiffView {...props} />
@@ -32,35 +44,48 @@ function FileDiffView({
   filePath,
   staged,
   branchDiff,
+  active,
+  onOpenEditor,
   onSendToAgent
 }: DiffViewProps): JSX.Element {
   const backend = useBackend()
   const settings = useSettings()
   const [sides, setSides] = useState<FileDiffSides | null>(null)
   const [loading, setLoading] = useState(true)
-  const [modifiedValue, setModifiedValue] = useState('')
-  const [savedValue, setSavedValue] = useState('')
-  const [saveError, setSaveError] = useState<string | null>(null)
+  const [viewMode, setViewMode] = useState<FileViewMode>('unified')
+  const [showWhitespace, setShowWhitespace] = useState(false)
   const [wordWrap, setWordWrap] = useState(false)
 
-  const valueRef = useRef(modifiedValue)
-  const savedRef = useRef(savedValue)
-  valueRef.current = modifiedValue
-  savedRef.current = savedValue
-
-  // Only unstaged working diffs have a modified side that IS the working
-  // tree — the only place edits can meaningfully land. Everything else
-  // (staged / branch) is read-only.
-  const editable = !staged && !branchDiff
-  const dirty = editable && modifiedValue !== savedValue
+  // The diff tab is view-only. Editing happens in the dedicated editor
+  // (file) tab via onOpenEditor, so a file is never writable from two
+  // tabs at once. d / f / s swap the view in place. Honor Monaco focus:
+  // a read-only editor lets these bubble, but a real form field shouldn't.
+  useEffect(() => {
+    if (!active) return
+    const onKey = (e: KeyboardEvent): void => {
+      if (e.metaKey || e.ctrlKey || e.altKey) return
+      const t = e.target as HTMLElement | null
+      const inMonaco = !!t?.closest?.('.monaco-editor')
+      if (!inMonaco && (t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement)) return
+      if (e.key === 'd') {
+        e.preventDefault()
+        setViewMode('unified')
+      } else if (e.key === 's') {
+        e.preventDefault()
+        setViewMode('split')
+      } else if (e.key === 'f') {
+        e.preventDefault()
+        setViewMode('full')
+      }
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [active])
 
   useEffect(() => {
     let cancelled = false
     setLoading(true)
     setSides(null)
-    setModifiedValue('')
-    setSavedValue('')
-    setSaveError(null)
     setWordWrap(false)
     if (!filePath) return
     backend
@@ -68,8 +93,6 @@ function FileDiffView({
       .then((r) => {
         if (cancelled) return
         setSides(r)
-        setModifiedValue(r.modified)
-        setSavedValue(r.modified)
         setLoading(false)
       })
     return () => {
@@ -77,30 +100,6 @@ function FileDiffView({
     }
   }, [worktreePath, filePath, staged, branchDiff])
 
-  const save = useCallback(async () => {
-    if (!filePath || !editable) return
-    const current = valueRef.current
-    if (current === savedRef.current) return
-    setSaveError(null)
-    const r = await backend.writeWorktreeFile(worktreePath, filePath, current)
-    if (r.ok) {
-      setSavedValue(current)
-    } else {
-      setSaveError(r.error || 'Save failed')
-    }
-  }, [worktreePath, filePath, editable])
-
-  useEffect(() => {
-    const handler = (e: BeforeUnloadEvent): void => {
-      if (valueRef.current !== savedRef.current) {
-        e.preventDefault()
-        e.returnValue = ''
-      }
-    }
-    window.addEventListener('beforeunload', handler)
-    return () => window.removeEventListener('beforeunload', handler)
-  }, [])
-
   if (loading) {
     return (
       <div className="flex items-center justify-center h-full text-faint text-sm">
@@ -125,7 +124,7 @@ function FileDiffView({
     )
   }
 
-  if (!dirty && sides.original === sides.modified) {
+  if (sides.original === sides.modified) {
     return (
       <div className="flex items-center justify-center h-full text-faint text-sm">
         No changes
@@ -133,28 +132,40 @@ function FileDiffView({
     )
   }
 
-  const readOnlyBanner = branchDiff
-    ? 'Viewing branch diff (base…HEAD) — read-only.'
-    : staged
-      ? 'Viewing staged diff — read-only. Unstage the file to edit here.'
-      : null
+  const referenceLine =
+    onSendToAgent && filePath ? (ln: number) => onSendToAgent(`@${filePath}:${ln} `) : undefined
 
   return (
     <div className="h-full flex flex-col bg-app">
       <div className="shrink-0 flex items-center gap-3 border-b border-border bg-panel px-4 py-2 text-xs">
+        <div className="shrink-0 flex items-center rounded border border-border overflow-hidden">
+          <ModeButton active={viewMode === 'split'} label="Split" hint="s" onClick={() => setViewMode('split')} />
+          <ModeButton active={viewMode === 'unified'} label="Unified" hint="d" onClick={() => setViewMode('unified')} />
+          <ModeButton active={viewMode === 'full'} label="Full" hint="f" onClick={() => setViewMode('full')} />
+        </div>
+
+        {viewMode !== 'full' && (
+          <Tooltip label={showWhitespace ? 'Showing whitespace changes' : 'Ignoring whitespace changes'}>
+            <button
+              onClick={() => setShowWhitespace((v) => !v)}
+              aria-pressed={showWhitespace}
+              className={`flex items-center shrink-0 px-1.5 py-1 rounded border text-xs cursor-pointer transition-colors ${
+                showWhitespace ? 'border-accent text-accent' : 'border-border text-faint hover:text-fg'
+              }`}
+            >
+              <Pilcrow className="icon-xs" />
+            </button>
+          </Tooltip>
+        )}
+
         <span
           className="font-mono text-fg truncate flex-1 min-w-0"
           style={{ direction: 'rtl', textAlign: 'left' }}
           title={filePath}
         >
           <bdi>{filePath}</bdi>
-          {dirty && <span className="text-warning ml-1">●</span>}
         </span>
-        {saveError && (
-          <span className="shrink-0 text-danger truncate max-w-[40%]" title={saveError}>
-            {saveError}
-          </span>
-        )}
+        {!branchDiff && <span className="shrink-0 text-info">Uncommitted</span>}
         {staged && !branchDiff && <span className="shrink-0 text-info">staged</span>}
         {branchDiff && <span className="shrink-0 text-info">branch</span>}
         {!sides.originalExists && <span className="shrink-0 text-success">new file</span>}
@@ -167,14 +178,14 @@ function FileDiffView({
             {wordWrap ? <ArrowRightFromLine className="icon-xs" /> : <WrapText className="icon-xs" />}
           </button>
         </Tooltip>
-        {editable && (
-          <Tooltip label={dirty ? 'Save (⌘S)' : 'Saved'}>
+
+        {onOpenEditor && filePath && sides.modifiedExists && (
+          <Tooltip label="Open in editor">
             <button
-              onClick={save}
-              disabled={!dirty}
-              className="shrink-0 text-faint hover:text-fg disabled:opacity-40 disabled:hover:text-faint cursor-pointer disabled:cursor-default"
+              onClick={() => onOpenEditor(filePath)}
+              className="shrink-0 text-faint hover:text-fg cursor-pointer"
             >
-              <Save className="icon-xs" />
+              <Pencil className="icon-xs" />
             </button>
           </Tooltip>
         )}
@@ -188,34 +199,72 @@ function FileDiffView({
             </button>
           </Tooltip>
         )}
+        {filePath && (
+          <Tooltip label="Open in external editor">
+            <button
+              onClick={() => backend.openInEditor(worktreePath, filePath)}
+              className="shrink-0 text-faint hover:text-fg cursor-pointer"
+            >
+              <Code2 className="icon-xs" />
+            </button>
+          </Tooltip>
+        )}
       </div>
-      {readOnlyBanner && (
-        <div className="shrink-0 border-b border-border bg-info/10 px-4 py-1.5 text-xs text-info">
-          {readOnlyBanner}
-        </div>
-      )}
       <div className="flex-1 min-h-0">
-        <MonacoDiffEditor
-          original={sides.original}
-          modified={editable ? modifiedValue : sides.modified}
-          filePath={filePath}
-          readOnly={!editable}
-          fontFamily={settings.terminalFontFamily || undefined}
-          fontSize={scaledEditorFontSize(settings.terminalFontSize, settings.uiScale)}
-          wordWrap={wordWrap}
-          onModifiedChange={editable ? setModifiedValue : undefined}
-          onSave={editable ? save : undefined}
-          onReferenceLine={
-            onSendToAgent && filePath
-              ? (ln) => onSendToAgent(`@${filePath}:${ln} `)
-              : undefined
-          }
-        />
+        {viewMode === 'full' ? (
+          <MonacoEditor
+            value={sides.modified}
+            filePath={filePath}
+            readOnly
+            fontFamily={settings.terminalFontFamily || undefined}
+            fontSize={scaledEditorFontSize(settings.terminalFontSize, settings.uiScale)}
+            wordWrap={wordWrap}
+            onReferenceLine={referenceLine}
+          />
+        ) : (
+          <MonacoDiffEditor
+            original={sides.original}
+            modified={sides.modified}
+            filePath={filePath}
+            readOnly
+            renderSideBySide={viewMode === 'split'}
+            ignoreTrimWhitespace={!showWhitespace}
+            fontFamily={settings.terminalFontFamily || undefined}
+            fontSize={scaledEditorFontSize(settings.terminalFontSize, settings.uiScale)}
+            wordWrap={wordWrap}
+            onReferenceLine={referenceLine}
+          />
+        )}
       </div>
     </div>
   )
 }
 
+export function ModeButton({
+  active,
+  label,
+  hint,
+  onClick
+}: {
+  active: boolean
+  label: string
+  hint: string
+  onClick: () => void
+}): JSX.Element {
+  return (
+    <Tooltip label={`${label} (${hint})`}>
+      <button
+        onClick={onClick}
+        className={`px-2 py-0.5 cursor-pointer transition-colors ${
+          active ? 'bg-accent text-app' : 'text-faint hover:text-fg hover:bg-panel-raised'
+        }`}
+      >
+        {label}
+      </button>
+    </Tooltip>
+  )
+}
+
 // Commit diffs are whole-commit, multi-file text. Monaco's inline diff is
 // per-file, so commit view keeps the legacy parsed rendering for now.
 // Fold into Monaco by rendering one editor per changed file in a follow-up.
diff --git a/src/renderer/components/FileView.tsx b/src/renderer/components/FileView.tsx
index 00be14e4..51e9e09e 100644
--- a/src/renderer/components/FileView.tsx
+++ b/src/renderer/components/FileView.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { ArrowRightFromLine, AtSign, Code2, Eye, Save, WrapText } from 'lucide-react'
+import { ArrowRightFromLine, AtSign, Code2, FileInput, FileOutput, Save, WrapText } from 'lucide-react'
 import ReactMarkdown from 'react-markdown'
 import rehypeHighlight from 'rehype-highlight'
 import remarkGfm from 'remark-gfm'
@@ -9,9 +9,11 @@ import { MonacoEditor } from './MonacoEditor'
 import { useSettings } from '../store'
 import { useBackend } from '../backend'
 import { scaledEditorFontSize } from '../../shared/state/settings'
+import { setTabDirty, clearTabDirty } from '../dirty-tabs'
 import 'highlight.js/styles/github-dark.css'
 
 interface FileViewProps {
+  tabId: string
   worktreePath: string
   filePath?: string
   onSendToAgent?: (text: string) => void
@@ -48,7 +50,7 @@ function formatBytes(n: number): string {
   return `${(n / (1024 * 1024)).toFixed(1)} MB`
 }
 
-export function FileView({ worktreePath, filePath, onSendToAgent }: FileViewProps): JSX.Element {
+export function FileView({ tabId, worktreePath, filePath, onSendToAgent }: FileViewProps): JSX.Element {
   const backend = useBackend()
   const settings = useSettings()
   const [result, setResult] = useState<FileReadResult | null>(null)
@@ -68,6 +70,15 @@ export function FileView({ worktreePath, filePath, onSendToAgent }: FileViewProp
 
   const dirty = value !== savedValue
 
+  // Publish unsaved state so handleCloseTab can warn before closing this
+  // tab; clear the entry when the tab unmounts.
+  useEffect(() => {
+    setTabDirty(tabId, dirty)
+  }, [tabId, dirty])
+  useEffect(() => {
+    return () => clearTabDirty(tabId)
+  }, [tabId])
+
   const mode: ViewerMode = useMemo(
     () => (filePath ? detectViewerMode(filePath) : 'text'),
     [filePath]
@@ -221,7 +232,7 @@ export function FileView({ worktreePath, filePath, onSendToAgent }: FileViewProp
           onClick={() => setMarkdownAsCode((v) => !v)}
           className="shrink-0 text-faint hover:text-fg cursor-pointer"
         >
-          {markdownAsCode ? <Eye className="icon-xs" /> : <Code2 className="icon-xs" />}
+          {markdownAsCode ? <FileOutput className="icon-xs" /> : <FileInput className="icon-xs" />}
         </button>
       </Tooltip>
     ) : null
@@ -322,13 +333,29 @@ function FileHeader({
   const backend = useBackend()
   return (
     <div className="shrink-0 flex items-center gap-3 border-b border-border bg-panel px-4 py-2 text-xs">
+      {showSave && (
+        <Tooltip label={dirty ? 'Unsaved changes — Save (⌘S)' : 'Saved'}>
+          <button
+            onClick={onSave}
+            disabled={saveDisabled}
+            className="relative shrink-0 text-faint hover:text-fg disabled:hover:text-faint cursor-pointer disabled:cursor-default"
+          >
+            <Save className={`icon-xs ${dirty ? 'text-warning' : 'opacity-40'}`} />
+            {dirty && (
+              <span
+                className="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full bg-warning"
+                aria-hidden
+              />
+            )}
+          </button>
+        </Tooltip>
+      )}
       <span
         className="font-mono text-fg truncate flex-1 min-w-0"
         style={{ direction: 'rtl', textAlign: 'left' }}
         title={filePath}
       >
         <bdi>{filePath}</bdi>
-        {dirty && <span className="text-warning ml-1">●</span>}
       </span>
       {saveError && (
         <span className="shrink-0 text-danger truncate max-w-[40%]" title={saveError}>
@@ -339,17 +366,6 @@ function FileHeader({
       {truncated && <span className="shrink-0 text-warning">truncated</span>}
       {wrapToggleControl}
       {toggleControl}
-      {showSave && (
-        <Tooltip label={dirty ? 'Save (⌘S)' : 'Saved'}>
-          <button
-            onClick={onSave}
-            disabled={saveDisabled}
-            className="shrink-0 text-faint hover:text-fg disabled:opacity-40 disabled:hover:text-faint cursor-pointer disabled:cursor-default"
-          >
-            <Save className="icon-xs" />
-          </button>
-        </Tooltip>
-      )}
       {onSendToAgent && (
         <Tooltip label="Reference file in Claude">
           <button
diff --git a/src/renderer/components/MonacoDiffEditor.tsx b/src/renderer/components/MonacoDiffEditor.tsx
index 7b7dcddf..4866bd9f 100644
--- a/src/renderer/components/MonacoDiffEditor.tsx
+++ b/src/renderer/components/MonacoDiffEditor.tsx
@@ -7,6 +7,11 @@ interface MonacoDiffEditorProps {
   modified: string
   filePath?: string
   readOnly?: boolean
+  /** Side-by-side (true) vs inline/unified (false, default) rendering. */
+  renderSideBySide?: boolean
+  /** Hide whitespace-only changes (Monaco default true). Set false to
+   *  surface trailing/leading whitespace diffs. */
+  ignoreTrimWhitespace?: boolean
   fontFamily?: string
   fontSize?: number
   wordWrap?: boolean
@@ -23,6 +28,8 @@ export function MonacoDiffEditor({
   modified,
   filePath,
   readOnly = true,
+  renderSideBySide = false,
+  ignoreTrimWhitespace = true,
   fontFamily,
   fontSize,
   wordWrap = false,
@@ -56,7 +63,13 @@ export function MonacoDiffEditor({
 
     const editor = monaco.editor.createDiffEditor(hostRef.current, {
       theme: 'harness',
-      renderSideBySide: false,
+      renderSideBySide,
+      // Without this, Monaco silently falls back to the inline view when the
+      // editor is narrower than renderSideBySideInlineBreakpoint (~900px) —
+      // so "Split" looks identical to "Unified" in a narrow pane. Force it
+      // to honor renderSideBySide at any width.
+      useInlineViewWhenSpaceIsLimited: false,
+      ignoreTrimWhitespace,
       readOnly,
       originalEditable: false,
       automaticLayout: true,
@@ -178,6 +191,14 @@ export function MonacoDiffEditor({
     editorRef.current?.updateOptions({ readOnly })
   }, [readOnly])
 
+  useEffect(() => {
+    editorRef.current?.updateOptions({ renderSideBySide })
+  }, [renderSideBySide])
+
+  useEffect(() => {
+    editorRef.current?.updateOptions({ ignoreTrimWhitespace })
+  }, [ignoreTrimWhitespace])
+
   useEffect(() => {
     editorRef.current?.updateOptions({
       fontFamily: fontFamily || undefined,
diff --git a/src/renderer/components/MonacoEditor.tsx b/src/renderer/components/MonacoEditor.tsx
index 9b6310ee..95efa8f6 100644
--- a/src/renderer/components/MonacoEditor.tsx
+++ b/src/renderer/components/MonacoEditor.tsx
@@ -68,10 +68,15 @@ export function MonacoEditor({
       onChangeRef.current?.(editor.getValue())
     })
 
-    // Cmd-S / Ctrl-S → onSave. Using addCommand lets Monaco own the
-    // keybinding scope so it doesn't fire while focus is elsewhere.
-    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
-      onSaveRef.current?.()
+    // Cmd-S / Ctrl-S → onSave. onKeyDown fires reliably while the editor
+    // is focused; addCommand's keybinding was being swallowed before
+    // reaching the handler. preventDefault stops the browser save dialog.
+    const saveKeySub = editor.onKeyDown((e) => {
+      if ((e.metaKey || e.ctrlKey) && e.keyCode === monaco.KeyCode.KeyS) {
+        e.preventDefault()
+        e.stopPropagation()
+        onSaveRef.current?.()
+      }
     })
 
     // Hover-tracked glyph-margin button for "reference line in Claude".
@@ -106,6 +111,7 @@ export function MonacoEditor({
 
     return () => {
       changeSub.dispose()
+      saveKeySub.dispose()
       moveSub.dispose()
       leaveSub.dispose()
       downSub.dispose()
diff --git a/src/renderer/components/ReviewDiffPane.tsx b/src/renderer/components/ReviewDiffPane.tsx
index f4536c03..84cc90d6 100644
--- a/src/renderer/components/ReviewDiffPane.tsx
+++ b/src/renderer/components/ReviewDiffPane.tsx
@@ -1,7 +1,9 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
 import * as monaco from 'monaco-editor'
-import { ArrowRightFromLine, Check, WrapText } from 'lucide-react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { ArrowRightFromLine, Check, MessagesSquare, WrapText } from 'lucide-react'
 import type { FileDiffSides, ChangedFile } from '../types'
 import type { ReviewComment } from './ReviewFileTree'
 import { MonacoDiffEditor } from './MonacoDiffEditor'
@@ -20,6 +22,16 @@ interface ReviewDiffPaneProps {
   commitRange?: { fromHash: string; toHash: string }
   reviewed: boolean
   comments: ReviewComment[]
+  /** Unified (false) vs side-by-side (true) — owned by ReviewPane so the
+   *  choice is one control for the whole review, not per file. */
+  sideBySide: boolean
+  /** Hide whitespace-only changes (true) vs surface them (false). */
+  ignoreTrimWhitespace: boolean
+  /** True when the review tab is active/visible — gates the `c` shortcut. */
+  active?: boolean
+  /** Scroll the diff to this line when it matches the current file. Used by
+   *  the comment list to jump to a comment. */
+  revealTarget?: { filePath: string; line: number; nonce: number } | null
   onToggleReviewed: () => void
   onAddComment: (lineNumber: number, body: string) => void
   onDeleteComment: (id: string) => void
@@ -43,6 +55,21 @@ const STATUS_COLOR: Record<ChangedFile['status'], string> = {
   untracked: 'text-dim'
 }
 
+const COMMENT_REMARK_PLUGINS = [remarkGfm]
+
+function formatRelTime(ms: number): string {
+  if (!ms || Number.isNaN(ms)) return ''
+  const s = Math.floor((Date.now() - ms) / 1000)
+  if (s < 60) return 'just now'
+  const m = Math.floor(s / 60)
+  if (m < 60) return `${m}m ago`
+  const h = Math.floor(m / 60)
+  if (h < 24) return `${h}h ago`
+  const d = Math.floor(h / 24)
+  if (d < 30) return `${d}d ago`
+  return new Date(ms).toLocaleDateString()
+}
+
 function InlineComment({
   comment,
   onDelete
@@ -50,38 +77,91 @@ function InlineComment({
   comment: ReviewComment
   onDelete: () => void
 }): JSX.Element {
+  const ts = comment.createdAt ? Date.parse(comment.createdAt) : comment.timestamp
+  const timeStr = formatRelTime(ts)
   return (
     <div
       style={{
-        display: 'flex',
-        alignItems: 'flex-start',
-        gap: '0.5rem',
-        padding: '0.375rem 0.75rem',
-        fontSize: '0.75rem',
-        borderLeft: '3px solid var(--color-info, #58a6ff)',
-        background: 'color-mix(in srgb, var(--color-info, #58a6ff) 8%, transparent)',
-        margin: '0.125rem 0.5rem'
+        display: 'inline-flex',
+        flexDirection: 'column',
+        gap: '4px',
+        padding: '8px 12px',
+        fontSize: '12px',
+        border: '1px solid color-mix(in srgb, var(--color-info, #58a6ff) 60%, transparent)',
+        borderLeft: '4px solid var(--color-info, #58a6ff)',
+        borderRadius: '0 6px 6px 0',
+        background: 'color-mix(in srgb, var(--color-info, #58a6ff) 28%, var(--color-panel-raised))',
+        boxShadow: '0 2px 10px rgba(0, 0, 0, 0.4)',
+        margin: '4px 0',
+        maxWidth: '760px'
       }}
     >
-      <span style={{ flex: 1, color: 'var(--color-fg)', whiteSpace: 'pre-wrap' }}>
-        {comment.body}
-      </span>
-      <button
-        onClick={onDelete}
-        style={{
-          flexShrink: 0,
-          color: 'var(--color-faint)',
-          cursor: 'pointer',
-          background: 'none',
-          border: 'none',
-          fontSize: '0.6875rem',
-          padding: '0 0.125rem'
-        }}
-        onMouseOver={(e) => (e.currentTarget.style.color = 'var(--color-danger, #f85149)')}
-        onMouseOut={(e) => (e.currentTarget.style.color = 'var(--color-faint)')}
-      >
-        ✕
-      </button>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+        {comment.authorAvatarUrl ? (
+          <img
+            src={comment.authorAvatarUrl}
+            alt={comment.author ?? ''}
+            style={{ width: '18px', height: '18px', borderRadius: '50%', flexShrink: 0 }}
+          />
+        ) : comment.author ? (
+          <span
+            style={{
+              width: '18px',
+              height: '18px',
+              borderRadius: '50%',
+              flexShrink: 0,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              background: 'var(--color-panel)',
+              color: 'var(--color-faint)',
+              fontSize: '10px',
+              textTransform: 'uppercase'
+            }}
+          >
+            {comment.author.slice(0, 1)}
+          </span>
+        ) : null}
+        {comment.author && (
+          <span style={{ fontWeight: 600, color: 'var(--color-fg)' }}>@{comment.author}</span>
+        )}
+        {timeStr &&
+          (comment.htmlUrl ? (
+            <a
+              href={comment.htmlUrl}
+              target="_blank"
+              rel="noreferrer"
+              style={{ color: 'var(--color-faint)', fontSize: '11px' }}
+            >
+              {timeStr}
+            </a>
+          ) : (
+            <span style={{ color: 'var(--color-faint)', fontSize: '11px' }}>{timeStr}</span>
+          ))}
+        {comment.remoteId === undefined && (
+          <button
+            onClick={onDelete}
+            title="Delete comment"
+            style={{
+              marginLeft: 'auto',
+              flexShrink: 0,
+              color: 'var(--color-faint)',
+              cursor: 'pointer',
+              background: 'none',
+              border: 'none',
+              fontSize: '11px',
+              padding: '0 2px'
+            }}
+            onMouseOver={(e) => (e.currentTarget.style.color = 'var(--color-danger, #f85149)')}
+            onMouseOut={(e) => (e.currentTarget.style.color = 'var(--color-faint)')}
+          >
+            ✕
+          </button>
+        )}
+      </div>
+      <div className="markdown" style={{ color: 'var(--color-fg)', minWidth: 0, fontSize: '12px' }}>
+        <ReactMarkdown remarkPlugins={COMMENT_REMARK_PLUGINS}>{comment.body}</ReactMarkdown>
+      </div>
     </div>
   )
 }
@@ -116,8 +196,8 @@ function InlineCommentInput({
       }}
     >
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-        <span style={{ fontSize: '0.625rem', color: 'var(--color-faint)', fontFamily: 'monospace' }}>
-          Line {lineNumber}
+        <span style={{ fontSize: '10px', color: 'var(--color-faint)', fontFamily: 'monospace' }}>
+          {lineNumber === 0 ? 'File comment' : `Line ${lineNumber}`}
         </span>
         <button
           onClick={onCancel}
@@ -202,6 +282,10 @@ export function ReviewDiffPane({
   commitRange,
   reviewed,
   comments,
+  sideBySide,
+  ignoreTrimWhitespace,
+  active,
+  revealTarget,
   onToggleReviewed,
   onAddComment,
   onDeleteComment,
@@ -213,8 +297,15 @@ export function ReviewDiffPane({
   const [sides, setSides] = useState<FileDiffSides | null>(null)
   const [loading, setLoading] = useState(false)
   const [commentLine, setCommentLine] = useState<number | null>(null)
+  // Bumped each time the diff editor (re)mounts so the view-zone effect
+  // re-runs and re-draws comments — the editor unmounts/remounts on every
+  // file switch, and a ref alone wouldn't retrigger the effect.
+  const [editorNonce, setEditorNonce] = useState(0)
   const editorRef = useRef<monaco.editor.IStandaloneDiffEditor | null>(null)
   const viewZonesRef = useRef<ViewZoneEntry[]>([])
+  // Last diff line the mouse was over, for the `c` shortcut. null ⇒ not
+  // over any line ⇒ file-level comment (line 0).
+  const hoveredLineRef = useRef<number | null>(null)
 
   useEffect(() => {
     if (!file) {
@@ -224,6 +315,12 @@ export function ReviewDiffPane({
     let cancelled = false
     setLoading(true)
     setCommentLine(null)
+    // The editor unmounts while the new diff loads; drop our handle and
+    // tear down the old comment widgets so the remount re-creates them
+    // cleanly (and the view-zone effect no-ops until the new editor mounts).
+    for (const z of viewZonesRef.current) queueMicrotask(() => z.root.unmount())
+    viewZonesRef.current = []
+    editorRef.current = null
     const promise = commitRange
       ? backend.getCommitRangeFileDiffSides(
           worktreePath,
@@ -258,7 +355,7 @@ export function ReviewDiffPane({
     modifiedEd.changeViewZones((accessor) => {
       for (const z of zones) {
         accessor.removeZone(z.zoneId)
-        z.root.unmount()
+        queueMicrotask(() => z.root.unmount())
       }
     })
     viewZonesRef.current = []
@@ -310,7 +407,7 @@ export function ReviewDiffPane({
         stickyWrapper.style.width = `${contentWidth}px`
         domNode.appendChild(stickyWrapper)
 
-        const heightInLines = item.type === 'input' ? 7 : 2
+        const heightInLines = item.type === 'input' ? 7 : 4
         const zoneId = accessor.addZone({
           afterLineNumber: item.lineNumber,
           heightInLines,
@@ -342,34 +439,98 @@ export function ReviewDiffPane({
     })
 
     viewZonesRef.current = newZones
-  }, [comments, commentLine, clearViewZones, onAddComment, onDeleteComment])
+  }, [comments, commentLine, editorNonce, clearViewZones, onAddComment, onDeleteComment])
 
   // Clean up view zones on unmount
   useEffect(() => {
     return () => {
       const zones = viewZonesRef.current
-      for (const z of zones) z.root.unmount()
+      for (const z of zones) queueMicrotask(() => z.root.unmount())
       viewZonesRef.current = []
     }
   }, [])
 
+  // Scroll to a comment's line when the comment list navigates here. Keyed
+  // on the request nonce + editor mount so it fires once the right file's
+  // editor is ready.
+  useEffect(() => {
+    if (!revealTarget || !file || revealTarget.filePath !== file.path) return
+    const editor = editorRef.current
+    if (!editor) return
+    const line = Math.max(1, revealTarget.line)
+    // The editor may have just remounted for this file and the comment view
+    // zones (which shift line positions) are added in a sibling effect, so a
+    // single reveal often lands off. Reveal on the next frame AND again on a
+    // short timeout to catch the settled layout.
+    const modEd = editor.getModifiedEditor()
+    const doReveal = (): void => {
+      modEd.setPosition({ lineNumber: line, column: 1 })
+      modEd.revealLineInCenter(line, monaco.editor.ScrollType.Immediate)
+    }
+    const raf = requestAnimationFrame(doReveal)
+    const t = setTimeout(doReveal, 140)
+    return () => {
+      cancelAnimationFrame(raf)
+      clearTimeout(t)
+    }
+  }, [revealTarget?.nonce, revealTarget?.filePath, editorNonce, file?.path])
+
   const handleReferenceLine = useCallback((lineNumber: number) => {
     setCommentLine(lineNumber)
   }, [])
 
+  const jumpToFirstComment = useCallback(() => {
+    if (comments.length === 0) return
+    const first = [...comments].sort((a, b) => a.lineNumber - b.lineNumber)[0]
+    const editor = editorRef.current
+    if (!editor) return
+    const line = Math.max(1, first.lineNumber)
+    const modEd = editor.getModifiedEditor()
+    modEd.setPosition({ lineNumber: line, column: 1 })
+    modEd.revealLineInCenter(line)
+  }, [comments])
+
   const handleEditorMount = useCallback(
     (editor: monaco.editor.IStandaloneDiffEditor) => {
       editorRef.current = editor
-      // Keep sticky wrappers sized to the visible viewport on resize
-      editor.getModifiedEditor().onDidLayoutChange((layout) => {
+      setEditorNonce((n) => n + 1)
+      const modEd = editor.getModifiedEditor()
+      // Keep sticky wrappers sized to the visible viewport on resize.
+      modEd.onDidLayoutChange((layout) => {
         for (const z of viewZonesRef.current) {
           z.stickyWrapper.style.width = `${layout.contentWidth}px`
         }
       })
+      // Track the hovered line so `c` can target it.
+      modEd.onMouseMove((e) => {
+        hoveredLineRef.current = e.target.position?.lineNumber ?? null
+      })
+      modEd.onMouseLeave(() => {
+        hoveredLineRef.current = null
+      })
     },
     []
   )
 
+  // `c` opens a comment input on the hovered diff line, or a file-level
+  // comment (line 0) when the mouse isn't over a line. Window listener so
+  // it works whether focus is in the diff or the file tree; matches the
+  // review shortcut style — bail only on a real form field (the inline
+  // comment box and the file filter), never on Monaco's own input.
+  useEffect(() => {
+    if (!file || !active) return
+    const onKey = (e: KeyboardEvent): void => {
+      if (e.key !== 'c' || e.metaKey || e.ctrlKey || e.altKey) return
+      const el = e.target as HTMLElement | null
+      if (el instanceof HTMLInputElement) return
+      if (el instanceof HTMLTextAreaElement && !el.classList.contains('inputarea')) return
+      e.preventDefault()
+      setCommentLine(hoveredLineRef.current ?? 0)
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [file, active])
+
   if (!file) {
     return (
       <div className="flex items-center justify-center h-full text-faint text-sm">
@@ -382,20 +543,6 @@ export function ReviewDiffPane({
     <div className="flex flex-col h-full">
       {/* File header */}
       <div className="flex items-center gap-2 px-3 py-2 border-b border-border bg-panel shrink-0">
-        <Tooltip label={reviewed ? 'Mark as not viewed (r)' : 'Mark as viewed (r)'}>
-          <button
-            onClick={onToggleReviewed}
-            aria-label={reviewed ? 'Mark as not viewed' : 'Mark as viewed'}
-            className={`shrink-0 w-4 h-4 rounded border flex items-center justify-center transition-colors cursor-pointer ${
-              reviewed
-                ? 'bg-success/20 border-success text-success'
-                : 'border-border-strong text-transparent hover:border-faint'
-            }`}
-          >
-            {reviewed && <Check strokeWidth={3} className="icon-2xs" />}
-          </button>
-        </Tooltip>
-
         <span className="text-xs font-mono truncate flex-1">{file.path}</span>
 
         <span className={`text-xs ${STATUS_COLOR[file.status]}`}>
@@ -421,6 +568,34 @@ export function ReviewDiffPane({
             {wordWrap ? <ArrowRightFromLine className="icon-xs" /> : <WrapText className="icon-xs" />}
           </button>
         </Tooltip>
+
+        {comments.length > 0 && (
+          <Tooltip label="Jump to the first comment in this file">
+            <button
+              onClick={jumpToFirstComment}
+              aria-label="Jump to first comment"
+              className="shrink-0 flex items-center gap-1 px-2 py-1 rounded border border-border text-info hover:text-info/70 transition-colors cursor-pointer"
+            >
+              <MessagesSquare className="icon-xs" />
+              {comments.length}
+            </button>
+          </Tooltip>
+        )}
+
+        <Tooltip label={reviewed ? 'Mark as not viewed (r)' : 'Mark as viewed (r)'}>
+          <button
+            onClick={onToggleReviewed}
+            aria-pressed={reviewed}
+            className={`shrink-0 flex items-center gap-1 px-2 py-1 rounded border text-xs transition-colors cursor-pointer ${
+              reviewed
+                ? 'bg-success/20 border-success text-success'
+                : 'border-border-strong text-faint hover:text-fg hover:border-faint'
+            }`}
+          >
+            <Check strokeWidth={3} className="icon-2xs" />
+            Viewed
+          </button>
+        </Tooltip>
       </div>
 
       {/* Diff with inline comments via view zones */}
@@ -436,6 +611,8 @@ export function ReviewDiffPane({
             modified={sides.modified}
             filePath={file.path}
             readOnly
+            renderSideBySide={sideBySide}
+            ignoreTrimWhitespace={ignoreTrimWhitespace}
             fontFamily={settings.terminalFontFamily || undefined}
             fontSize={scaledEditorFontSize(settings.terminalFontSize, settings.uiScale)}
             wordWrap={wordWrap}
diff --git a/src/renderer/components/ReviewFileTree.tsx b/src/renderer/components/ReviewFileTree.tsx
index 0beef026..dab69c5d 100644
--- a/src/renderer/components/ReviewFileTree.tsx
+++ b/src/renderer/components/ReviewFileTree.tsx
@@ -8,6 +8,16 @@ export interface ReviewComment {
   lineNumber: number
   body: string
   timestamp: number
+  /** GitHub review-comment id once pushed/fetched. Absent = local-only. */
+  remoteId?: number
+  /** GitHub login of the author, for comments fetched from the PR. */
+  author?: string
+  /** Author avatar URL, for comments fetched from the PR. */
+  authorAvatarUrl?: string
+  /** ISO creation timestamp, for comments fetched from the PR. */
+  createdAt?: string
+  /** Link to the comment on GitHub. */
+  htmlUrl?: string
 }
 
 interface ReviewFileTreeProps {
@@ -22,6 +32,14 @@ interface ReviewFileTreeProps {
   onSelectFile: (path: string) => void
   onToggleReviewed: (path: string) => void
   onToggleDir: (dir: string) => void
+  /** s = side-by-side, d = unified. Lives here so every review keyboard
+   *  shortcut shares one handler/pattern. */
+  onSetSideBySide: (sideBySide: boolean) => void
+  /** ? toggles the review shortcuts popup. */
+  onShowShortcuts: () => void
+  /** True when the review tab is the active/visible tab — the keyboard
+   *  shortcuts no-op otherwise so a background review tab doesn't react. */
+  active?: boolean
 }
 
 const STATUS_LABEL: Record<ChangedFile['status'], string> = {
@@ -150,7 +168,10 @@ export function ReviewFileTree({
   collapsedDirs,
   onSelectFile,
   onToggleReviewed,
-  onToggleDir
+  onToggleDir,
+  onSetSideBySide,
+  onShowShortcuts,
+  active
 }: ReviewFileTreeProps): JSX.Element {
   const containerRef = useRef<HTMLDivElement>(null)
   const [filter, setFilter] = useState('')
@@ -207,6 +228,7 @@ export function ReviewFileTree({
 
   useEffect(() => {
     const handler = (e: KeyboardEvent): void => {
+      if (!active) return
       if (
         e.target instanceof HTMLTextAreaElement ||
         e.target instanceof HTMLInputElement
@@ -225,6 +247,15 @@ export function ReviewFileTree({
       } else if (e.key === '[') {
         e.preventDefault()
         navigateUnreviewed(-1)
+      } else if (e.key === 's' && !e.metaKey && !e.ctrlKey) {
+        e.preventDefault()
+        onSetSideBySide(true)
+      } else if (e.key === 'd' && !e.metaKey && !e.ctrlKey) {
+        e.preventDefault()
+        onSetSideBySide(false)
+      } else if (e.key === '?') {
+        e.preventDefault()
+        onShowShortcuts()
       } else if (e.key === 'r' && !e.metaKey && !e.ctrlKey) {
         e.preventDefault()
         if (selectedFile) {
@@ -247,7 +278,7 @@ export function ReviewFileTree({
     }
     window.addEventListener('keydown', handler)
     return () => window.removeEventListener('keydown', handler)
-  }, [navigateFile, navigateUnreviewed, selectedFile, navigableFiles, reviewedFiles, onSelectFile, onToggleReviewed])
+  }, [active, navigateFile, navigateUnreviewed, selectedFile, navigableFiles, reviewedFiles, onSelectFile, onToggleReviewed, onSetSideBySide, onShowShortcuts])
 
   return (
     <div ref={containerRef} className="flex flex-col h-full text-xs select-none">
diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index decb0f70..a3e7becd 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -1,13 +1,19 @@
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
-import { Send, Clipboard, Check, MessageSquare, GitCommitHorizontal, ArrowUp, ChevronDown } from 'lucide-react'
+import { Send, Clipboard, Check, MessageSquare, GitCommitHorizontal, ArrowUp, ChevronDown, Pilcrow, X, Keyboard, CloudSync, Loader2 } from 'lucide-react'
 import type { ChangedFile, BranchCommit } from '../types'
+import type { PRReview } from '../../shared/state/prs'
 import type { ReviewComment } from './ReviewFileTree'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
 import { ReviewFileTree } from './ReviewFileTree'
 import { ReviewDiffPane } from './ReviewDiffPane'
+import { ModeButton } from './DiffView'
 import { ResizeHandle } from './ResizeHandle'
 import { Tooltip } from './Tooltip'
 import { useBackend } from '../backend'
+import { usePrs } from '../store'
 import { setReviewProgress, clearReviewProgress } from '../review-progress'
+import { useReviewFileRequest } from '../review-open-file'
 
 interface ReviewPaneProps {
   tabId: string
@@ -16,6 +22,10 @@ interface ReviewPaneProps {
   fromCommit?: string
   /** Tip commit of the selection (newest selected). Undefined ⇒ "All commits". */
   toCommit?: string
+  /** True when this review tab is the active/visible tab in its pane.
+   *  Gates the review keyboard shortcuts so they don't fire from a
+   *  background tab. */
+  active?: boolean
   onSendToAgent?: (text: string) => void
 }
 
@@ -26,6 +36,7 @@ export function ReviewPane({
   worktreePath,
   fromCommit,
   toCommit,
+  active,
   onSendToAgent
 }: ReviewPaneProps): JSX.Element {
   const backend = useBackend()
@@ -39,12 +50,39 @@ export function ReviewPane({
   // Hoisted above ReviewDiffPane so the choice persists as the reviewer
   // clicks through files in the same review session.
   const [wordWrap, setWordWrap] = useState(false)
+  const [sideBySide, setSideBySide] = useState(false)
+  const [showWhitespace, setShowWhitespace] = useState(false)
+  const [showShortcuts, setShowShortcuts] = useState(false)
+  const [revealTarget, setRevealTarget] = useState<{ filePath: string; line: number; nonce: number } | null>(null)
+  const revealNonceRef = useRef(0)
+  const [refreshKey, setRefreshKey] = useState(0)
+  const [syncState, setSyncState] = useState<'idle' | 'syncing' | 'ok' | 'error'>('idle')
+  const [syncDetail, setSyncDetail] = useState<string | null>(null)
+  const syncing = syncState === 'syncing'
+
+  const prs = usePrs()
+  const pr = prs.byPath[worktreePath]
+  const prNumber = pr?.number
 
   // Whole-branch when both bounds are undefined. Single commit when both
   // are set and equal. Otherwise a contiguous range.
   const isWholeBranch = !fromCommit && !toCommit
   const isSingleCommit = !!fromCommit && fromCommit === toCommit
 
+  // Re-fetch when the worktree's git state changes (new commits, etc.).
+  // Same watcher signal the Changed Files / Branch Commits panels use.
+  // Bumps refreshKey, which the commit + file effects below depend on.
+  useEffect(() => {
+    backend.watchChangedFiles(worktreePath)
+    const off = backend.onChangedFilesInvalidated((path) => {
+      if (path === worktreePath) setRefreshKey((k) => k + 1)
+    })
+    return () => {
+      off()
+      backend.unwatchChangedFiles(worktreePath)
+    }
+  }, [worktreePath, backend])
+
   useEffect(() => {
     let cancelled = false
     backend
@@ -58,9 +96,18 @@ export function ReviewPane({
     return () => {
       cancelled = true
     }
-  }, [worktreePath, backend])
+  }, [worktreePath, backend, refreshKey])
+
+  // The reviewed set / comments belong to a specific file set, so wipe
+  // them when the commit selection changes. A plain refresh (new commit
+  // on the same selection) must NOT wipe them — that's why this is keyed
+  // on the selection identity only, not refreshKey.
+  useEffect(() => {
+    setReviewedFiles(new Set())
+    setComments([])
+  }, [worktreePath, isWholeBranch, isSingleCommit, fromCommit, toCommit])
 
-  // Refetch the file list whenever the commit selection changes.
+  // Refetch the file list when the selection changes or a refresh fires.
   useEffect(() => {
     let cancelled = false
     const promise = isWholeBranch
@@ -76,11 +123,12 @@ export function ReviewPane({
           if (prev && result.some((f) => f.path === prev)) return prev
           return result[0]?.path ?? null
         })
-        // The reviewed set / comments belong to the previous file set;
-        // wipe them when the selection changes so progress reflects the
-        // new file set.
-        setReviewedFiles(new Set())
-        setComments([])
+        // Drop reviewed marks for files that no longer exist so the
+        // progress count stays honest after a refresh.
+        setReviewedFiles((prev) => {
+          const next = new Set([...prev].filter((p) => result.some((f) => f.path === p)))
+          return next.size === prev.size ? prev : next
+        })
       })
       .catch(() => {
         if (!cancelled) setFiles([])
@@ -88,7 +136,7 @@ export function ReviewPane({
     return () => {
       cancelled = true
     }
-  }, [worktreePath, backend, isWholeBranch, isSingleCommit, fromCommit, toCommit])
+  }, [worktreePath, backend, isWholeBranch, isSingleCommit, fromCommit, toCommit, refreshKey])
 
   // Push "(N/M)" up to the tab strip. Clear on unmount.
   useEffect(() => {
@@ -101,6 +149,16 @@ export function ReviewPane({
     }
   }, [tabId])
 
+  // Honor an external "jump to this file" request (Changed Files panel
+  // clicking a committed file opens this tab and asks for that file). The
+  // file may not be in `files` yet when the tab is first created — set it
+  // anyway; the file-load effect above preserves a still-valid selection
+  // once the list arrives.
+  const fileRequest = useReviewFileRequest(worktreePath)
+  useEffect(() => {
+    if (fileRequest) setSelectedFile(fileRequest.filePath)
+  }, [fileRequest?.nonce, fileRequest?.filePath])
+
   const selectedFileObj = useMemo(
     () => files.find((f) => f.path === selectedFile) ?? null,
     [files, selectedFile]
@@ -167,7 +225,8 @@ export function ReviewPane({
     if (comments.length === 0) return ''
     const lines = ['Review feedback on your changes:', '']
     for (const c of comments) {
-      lines.push(`${c.filePath}:${c.lineNumber} — ${c.body}`)
+      const loc = c.lineNumber === 0 ? c.filePath : `${c.filePath}:${c.lineNumber}`
+      lines.push(`${loc} — ${c.body}`)
     }
     return lines.join('\n')
   }, [comments])
@@ -194,6 +253,82 @@ export function ReviewPane({
     if (text) navigator.clipboard.writeText(text)
   }, [formatComments])
 
+  // Push local comments + viewed state to the PR and pull the canonical
+  // comment set back. Replaces the local comment list with the reconciled
+  // result so synced comments carry their GitHub ids (and don't re-post).
+  const runSync = useCallback(
+    async (pullOnly: boolean) => {
+      if (syncing || !prNumber || !isWholeBranch) return
+      setSyncState('syncing')
+      setSyncDetail(pullOnly ? 'Loading PR comments…' : 'Syncing…')
+      try {
+        const result = await backend.reviewSync(worktreePath, {
+          comments: comments.map((c) => ({
+            filePath: c.filePath,
+            lineNumber: c.lineNumber,
+            body: c.body,
+            remoteId: c.remoteId,
+            author: c.author
+          })),
+          reviewedFiles: [...reviewedFiles],
+          files: files.map((f) => f.path),
+          pullOnly
+        })
+        if (!result.ok) {
+          setSyncState('error')
+          setSyncDetail(result.error ?? 'Sync failed')
+          return
+        }
+        setComments(
+          result.comments.map((c) => ({
+            id: c.remoteId !== undefined ? `gh-${c.remoteId}` : `comment-${++commentIdCounter}`,
+            filePath: c.filePath,
+            lineNumber: c.lineNumber,
+            body: c.body,
+            timestamp: Date.now(),
+            remoteId: c.remoteId,
+            author: c.author,
+            authorAvatarUrl: c.authorAvatarUrl,
+            createdAt: c.createdAt,
+            htmlUrl: c.htmlUrl
+          }))
+        )
+        // Reflect the merged viewed state (local ∪ GitHub) so files viewed
+        // on GitHub show as reviewed here too.
+        setReviewedFiles(new Set(result.reviewedFiles))
+        setSyncState(result.failed > 0 ? 'error' : 'ok')
+        setSyncDetail(
+          pullOnly
+            ? `Loaded ${result.comments.length} comment${result.comments.length === 1 ? '' : 's'}`
+            : `Synced${result.pushed > 0 ? ` · ${result.pushed} drafted` : ''}${
+                result.failed > 0 ? ` · ${result.failed} failed` : ''
+              }`
+        )
+      } catch (err) {
+        setSyncState('error')
+        setSyncDetail(err instanceof Error ? err.message : 'Sync failed')
+      }
+    },
+    [syncing, prNumber, isWholeBranch, backend, worktreePath, comments, reviewedFiles, files]
+  )
+
+  const handleSync = useCallback(() => void runSync(false), [runSync])
+
+  // Auto-sync (pull-only) once when the review opens with a PR, so existing
+  // PR comments show up without a manual Sync. Pull-only can't clobber
+  // GitHub state from the empty local review.
+  const autoSyncedRef = useRef<string | null>(null)
+  useEffect(() => {
+    if (!prNumber || !isWholeBranch) return
+    const key = `${worktreePath}:${prNumber}`
+    if (autoSyncedRef.current === key) return
+    autoSyncedRef.current = key
+    void runSync(true)
+    // runSync intentionally omitted — fire once per worktree+PR, not on every
+    // comments/reviewedFiles change.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [prNumber, isWholeBranch, worktreePath])
+
   // Compute the indices of the selected commits in the (newest→oldest)
   // commit list. Used to highlight the active range in the picker and
   // for shift-click range extension.
@@ -244,7 +379,8 @@ export function ReviewPane({
   const progress = files.length > 0 ? reviewedFiles.size / files.length : 0
 
   return (
-    <div className="flex flex-col h-full w-full bg-bg">
+    <div className="relative flex flex-col h-full w-full bg-bg">
+      {showShortcuts && <ReviewShortcutsPopup onClose={() => setShowShortcuts(false)} />}
       {/* Top controls bar */}
       <div className="shrink-0 border-b border-border bg-panel">
         <div className="h-10 flex items-center gap-3 px-3">
@@ -256,45 +392,78 @@ export function ReviewPane({
             onCommitClick={handleCommitClick}
             fromCommit={fromCommit}
             toCommit={toCommit}
+            totalAdditions={totalAdditions}
+            totalDeletions={totalDeletions}
           />
 
-          <div className="flex items-center gap-2 text-xs text-faint">
-            {totalAdditions > 0 && <span className="text-success">+{totalAdditions}</span>}
-            {totalDeletions > 0 && <span className="text-danger">−{totalDeletions}</span>}
+          <div className="flex items-center rounded border border-border overflow-hidden text-xs">
+            <ModeButton active={sideBySide} label="Split" hint="s" onClick={() => setSideBySide(true)} />
+            <ModeButton active={!sideBySide} label="Unified" hint="d" onClick={() => setSideBySide(false)} />
           </div>
 
+          <Tooltip label={showWhitespace ? 'Showing whitespace changes' : 'Ignoring whitespace changes'}>
+            <button
+              onClick={() => setShowWhitespace((v) => !v)}
+              aria-pressed={showWhitespace}
+              className={`flex items-center shrink-0 px-1.5 py-1 rounded border text-xs cursor-pointer transition-colors ${
+                showWhitespace ? 'border-accent text-accent' : 'border-border text-faint hover:text-fg'
+              }`}
+            >
+              <Pilcrow className="icon-xs" />
+            </button>
+          </Tooltip>
+
           <div className="flex-1" />
 
           <div className="flex items-center gap-1.5 text-xs">
-            {allReviewed ? (
-              <span className="flex items-center gap-1 text-success font-medium">
-                <Check strokeWidth={2.5} className="icon-xs" />
-                All reviewed
-              </span>
-            ) : (
-              <span className="text-faint tabular-nums">
-                {reviewedFiles.size}/{files.length} reviewed
-              </span>
-            )}
-
-            {comments.length > 0 && (
-              <span className="flex items-center gap-1 text-info ml-2">
-                <MessageSquare className="icon-xs" />
-                {comments.length}
-              </span>
-            )}
-
             <Tooltip label="Copy comments to clipboard">
               <button
                 onClick={handleCopyComments}
                 disabled={comments.length === 0}
-                className="ml-2 flex items-center gap-1 px-2 py-1 rounded border border-border text-faint hover:text-fg transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-default"
+                className="flex items-center gap-1 px-2 py-1 rounded border border-border text-faint hover:text-fg transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-default"
               >
                 <Clipboard className="icon-xs" />
                 Copy
               </button>
             </Tooltip>
 
+            <Tooltip
+              label={
+                !prNumber
+                  ? 'No pull request for this worktree'
+                  : !isWholeBranch
+                    ? 'Sync only works when reviewing all commits'
+                    : syncState !== 'idle' && syncDetail
+                      ? syncDetail
+                      : 'Sync: push draft comments & viewed state to the PR (submit on GitHub)'
+              }
+            >
+              <button
+                onClick={handleSync}
+                disabled={!prNumber || !isWholeBranch || syncing}
+                className="relative flex items-center gap-1 px-2 py-1 rounded border border-border text-faint hover:text-fg transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-default"
+              >
+                {syncing ? (
+                  <Loader2 className="icon-xs animate-spin" />
+                ) : (
+                  <CloudSync className="icon-xs" />
+                )}
+                Sync
+                {syncState !== 'idle' && (
+                  <span
+                    className={`absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full ${
+                      syncState === 'error'
+                        ? 'bg-danger'
+                        : syncState === 'syncing'
+                          ? 'bg-warning'
+                          : 'bg-success'
+                    }`}
+                    aria-hidden
+                  />
+                )}
+              </button>
+            </Tooltip>
+
             <Tooltip label="Send all comments to the active agent terminal">
               <button
                 onClick={handleSendToAgent}
@@ -306,6 +475,41 @@ export function ReviewPane({
               </button>
             </Tooltip>
           </div>
+
+          <Tooltip label="Keyboard shortcuts (?)">
+            <button
+              onClick={() => setShowShortcuts((v) => !v)}
+              className="flex items-center shrink-0 px-1.5 py-1 rounded border border-border text-faint hover:text-fg cursor-pointer transition-colors"
+            >
+              <Keyboard className="icon-xs" />
+            </button>
+          </Tooltip>
+        </div>
+
+        {/* Second row — review status info */}
+        <div className="h-9 flex items-center gap-3 px-3 border-t border-border/60 text-xs">
+          {pr && <ReviewerStatus reviews={pr.reviews} />}
+
+          <CommentDropdown
+            comments={comments}
+            onSelect={(c) => {
+              setSelectedFile(c.filePath)
+              setRevealTarget({ filePath: c.filePath, line: c.lineNumber, nonce: ++revealNonceRef.current })
+            }}
+          />
+
+          <div className="flex-1" />
+
+          {allReviewed ? (
+            <span className="flex items-center gap-1 text-success font-medium">
+              <Check strokeWidth={2.5} className="icon-xs" />
+              All reviewed
+            </span>
+          ) : (
+            <span className="text-faint tabular-nums">
+              {reviewedFiles.size} reviewed · {Math.max(0, files.length - reviewedFiles.size)} remaining
+            </span>
+          )}
         </div>
 
         <div className="h-[2px] bg-border/50 relative">
@@ -333,6 +537,9 @@ export function ReviewPane({
             onSelectFile={setSelectedFile}
             onToggleReviewed={handleToggleReviewed}
             onToggleDir={handleToggleDir}
+            onSetSideBySide={setSideBySide}
+            onShowShortcuts={() => setShowShortcuts((v) => !v)}
+            active={active}
           />
         </div>
 
@@ -352,6 +559,10 @@ export function ReviewPane({
             }
             reviewed={selectedFile ? reviewedFiles.has(selectedFile) : false}
             comments={fileComments}
+            sideBySide={sideBySide}
+            ignoreTrimWhitespace={!showWhitespace}
+            active={active}
+            revealTarget={revealTarget}
             onToggleReviewed={() => {
               if (selectedFile) handleToggleReviewed(selectedFile)
             }}
@@ -372,6 +583,8 @@ interface CommitSelectorProps {
   selectionIndices: { fromIdx: number; toIdx: number } | null
   fromCommit?: string
   toCommit?: string
+  totalAdditions: number
+  totalDeletions: number
   onSelectAll: () => void
   onCommitClick: (idx: number, shift: boolean) => void
 }
@@ -382,6 +595,8 @@ function CommitSelector({
   selectionIndices,
   fromCommit,
   toCommit,
+  totalAdditions,
+  totalDeletions,
   onSelectAll,
   onCommitClick
 }: CommitSelectorProps): JSX.Element {
@@ -424,6 +639,12 @@ function CommitSelector({
       >
         <GitCommitHorizontal className="icon-xs text-faint shrink-0" />
         <span className="font-mono max-w-[10rem] truncate">{buttonLabel}</span>
+        {(totalAdditions > 0 || totalDeletions > 0) && (
+          <span className="font-mono tabular-nums shrink-0">
+            {totalAdditions > 0 && <span className="text-success">+{totalAdditions}</span>}
+            {totalDeletions > 0 && <span className="text-danger ml-1">−{totalDeletions}</span>}
+          </span>
+        )}
         <ChevronDown className="icon-2xs text-faint shrink-0" />
       </button>
       {open && (
@@ -495,3 +716,222 @@ function shortOf(commits: BranchCommit[], hash?: string): string {
   const m = commits.find((c) => c.hash === hash)
   return m ? m.shortHash : hash.slice(0, 7)
 }
+
+const REVIEW_MD_PLUGINS = [remarkGfm]
+
+const REVIEW_STATE_META: Record<string, { ring: string; label: string }> = {
+  APPROVED: { ring: 'ring-success', label: 'approved' },
+  CHANGES_REQUESTED: { ring: 'ring-danger', label: 'requested changes' },
+  COMMENTED: { ring: 'ring-info', label: 'commented' },
+  DISMISSED: { ring: 'ring-border', label: 'dismissed' },
+  PENDING: { ring: 'ring-border', label: 'pending' }
+}
+
+/** Compact cluster of reviewer avatars, ring-colored by their latest review
+ *  state. Renders nothing until someone has actually reviewed. Clicking an
+ *  avatar opens that reviewer's top-level review comment. */
+function ReviewerStatus({ reviews }: { reviews: PRReview[] }): JSX.Element | null {
+  const [openUser, setOpenUser] = useState<string | null>(null)
+  const wrapRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    if (!openUser) return
+    const close = (e: MouseEvent): void => {
+      if (wrapRef.current && e.target instanceof Node && wrapRef.current.contains(e.target)) return
+      setOpenUser(null)
+    }
+    window.addEventListener('mousedown', close)
+    return () => window.removeEventListener('mousedown', close)
+  }, [openUser])
+
+  const latest = new Map<string, PRReview>()
+  for (const r of reviews) {
+    if (r.state === 'PENDING') continue
+    const prev = latest.get(r.user)
+    if (!prev || r.submittedAt > prev.submittedAt) latest.set(r.user, r)
+  }
+  const list = [...latest.values()]
+  if (list.length === 0) return null
+  const openReview = list.find((r) => r.user === openUser) ?? null
+
+  return (
+    <div ref={wrapRef} className="relative flex items-center -space-x-1 mr-1">
+      {list.map((r) => {
+        const meta = REVIEW_STATE_META[r.state] ?? REVIEW_STATE_META.COMMENTED
+        return (
+          <Tooltip key={r.user} label={`@${r.user} · ${meta.label}`}>
+            <button
+              onClick={() => setOpenUser((u) => (u === r.user ? null : r.user))}
+              className={`w-5 h-5 rounded-full ring-2 ${meta.ring} bg-panel overflow-hidden cursor-pointer hover:z-10`}
+            >
+              {r.avatarUrl ? (
+                <img src={r.avatarUrl} alt={r.user} className="w-full h-full" />
+              ) : (
+                <span className="w-full h-full flex items-center justify-center text-faint uppercase bg-panel-raised">
+                  {r.user.slice(0, 1)}
+                </span>
+              )}
+            </button>
+          </Tooltip>
+        )
+      })}
+      {openReview && (
+        <div
+          className="absolute z-50 top-full left-0 mt-2 w-80 rounded-lg border border-border-strong bg-panel-raised shadow-lg"
+          onMouseDown={(e) => e.stopPropagation()}
+        >
+          <div className="flex items-center gap-2 px-3 py-2 border-b border-border">
+            <span className="text-xs font-medium text-fg">@{openReview.user}</span>
+            <span className="text-xs text-faint">
+              {(REVIEW_STATE_META[openReview.state] ?? REVIEW_STATE_META.COMMENTED).label}
+            </span>
+            {openReview.htmlUrl && (
+              <a
+                href={openReview.htmlUrl}
+                target="_blank"
+                rel="noreferrer"
+                className="ml-auto text-xs text-info hover:underline"
+                onClick={() => setOpenUser(null)}
+              >
+                Open
+              </a>
+            )}
+          </div>
+          <div className="px-3 py-2 max-h-48 overflow-y-auto">
+            {openReview.body.trim() ? (
+              <div className="markdown text-xs text-dim">
+                <ReactMarkdown remarkPlugins={REVIEW_MD_PLUGINS}>{openReview.body}</ReactMarkdown>
+              </div>
+            ) : (
+              <span className="text-xs text-faint">(no top-level comment)</span>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function CommentDropdown({
+  comments,
+  onSelect
+}: {
+  comments: ReviewComment[]
+  onSelect: (c: ReviewComment) => void
+}): JSX.Element {
+  const [open, setOpen] = useState(false)
+  const wrapRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    if (!open) return
+    const close = (e: MouseEvent): void => {
+      if (wrapRef.current && e.target instanceof Node && wrapRef.current.contains(e.target)) return
+      setOpen(false)
+    }
+    window.addEventListener('mousedown', close)
+    return () => window.removeEventListener('mousedown', close)
+  }, [open])
+
+  const sorted = [...comments].sort(
+    (a, b) => a.filePath.localeCompare(b.filePath) || a.lineNumber - b.lineNumber
+  )
+
+  return (
+    <div ref={wrapRef} className="relative">
+      <button
+        onClick={() => setOpen((v) => !v)}
+        disabled={comments.length === 0}
+        className="flex items-center gap-1 text-info hover:text-info/70 transition-colors cursor-pointer disabled:text-faint disabled:cursor-default"
+      >
+        <MessageSquare className="icon-xs" />
+        {comments.length} {comments.length === 1 ? 'comment' : 'comments'}
+        {comments.length > 0 && <ChevronDown className="icon-2xs" />}
+      </button>
+      {open && comments.length > 0 && (
+        <div
+          className="absolute z-50 top-full left-0 mt-1 w-[28rem] max-h-[20rem] overflow-y-auto bg-panel-raised border border-border-strong rounded shadow-lg py-1"
+          onMouseDown={(e) => e.stopPropagation()}
+        >
+          {sorted.map((c) => {
+            const name = c.filePath.split('/').pop() || c.filePath
+            return (
+              <button
+                key={c.id}
+                onClick={() => {
+                  onSelect(c)
+                  setOpen(false)
+                }}
+                className="w-full text-left px-3 py-1.5 hover:bg-panel transition-colors cursor-pointer"
+              >
+                <div className="flex items-center gap-2 text-xs">
+                  <span className="font-mono text-fg truncate">{name}</span>
+                  <span className="font-mono text-faint shrink-0">
+                    {c.lineNumber > 0 ? `:${c.lineNumber}` : '· file'}
+                  </span>
+                  {c.author && <span className="text-info shrink-0">@{c.author}</span>}
+                </div>
+                <div className="text-xs text-dim mt-0.5 line-clamp-1">{c.body}</div>
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+const REVIEW_SHORTCUTS: [string, string][] = [
+  ['j / ↓', 'Next file'],
+  ['k / ↑', 'Previous file'],
+  ['] / [', 'Next / previous unreviewed file'],
+  ['r', 'Mark file viewed / unviewed'],
+  ['s / d', 'Side-by-side / unified diff'],
+  ['c', 'Comment on hovered line (or file)'],
+  ['?', 'Toggle this help']
+]
+
+function ReviewShortcutsPopup({ onClose }: { onClose: () => void }): JSX.Element {
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent): void => {
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        onClose()
+      }
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [onClose])
+
+  return (
+    <div
+      className="absolute inset-0 z-50 flex items-center justify-center bg-black/40"
+      onClick={onClose}
+    >
+      <div
+        className="w-96 max-w-[90%] rounded-lg border border-border-strong bg-panel-raised shadow-lg"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between px-4 py-2.5 border-b border-border">
+          <span className="text-lg font-medium text-fg">Review shortcuts</span>
+          <button
+            onClick={onClose}
+            aria-label="Close"
+            className="text-faint hover:text-fg cursor-pointer"
+          >
+            <X className="icon-base" />
+          </button>
+        </div>
+        <div className="px-4 py-3 flex flex-col gap-2.5">
+          {REVIEW_SHORTCUTS.map(([keys, desc]) => (
+            <div key={keys} className="flex items-center justify-between gap-4 text-base">
+              <span className="text-dim">{desc}</span>
+              <kbd className="shrink-0 font-mono text-faint bg-panel px-1.5 py-0.5 rounded border border-border">
+                {keys}
+              </kbd>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/renderer/components/RightColumn.tsx b/src/renderer/components/RightColumn.tsx
index f43aabb9..f009c3b1 100644
--- a/src/renderer/components/RightColumn.tsx
+++ b/src/renderer/components/RightColumn.tsx
@@ -39,6 +39,7 @@ interface RightColumnProps {
   onOpenFile: AllFilesPanelProps['onOpenFile']
   onSendToAgent: (worktreePath: string, text: string) => void
   onOpenReview: () => void
+  onOpenReviewFile: ChangedFilesPanelProps['onOpenReviewFile']
   onCollapse: () => void
 }
 
@@ -60,6 +61,7 @@ export function RightColumn({
   onOpenFile,
   onSendToAgent,
   onOpenReview,
+  onOpenReviewFile,
   onCollapse
 }: RightColumnProps): JSX.Element {
   const backend = useBackend()
@@ -124,6 +126,7 @@ export function RightColumn({
               activeWorktreeId ? (text) => onSendToAgent(activeWorktreeId, text) : undefined
             }
             onOpenReview={onOpenReview}
+            onOpenReviewFile={onOpenReviewFile}
           />
         )
       case 'allFiles':
diff --git a/src/renderer/components/TerminalPanel.tsx b/src/renderer/components/TerminalPanel.tsx
index 57fce6c5..ca3be184 100644
--- a/src/renderer/components/TerminalPanel.tsx
+++ b/src/renderer/components/TerminalPanel.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useCallback, useState } from 'react'
-import { X, SquareTerminal, Sparkles, Loader2, Globe, Users, ChevronLeft, ChevronRight } from 'lucide-react'
+import { X, SquareTerminal, Sparkles, Loader2, Globe, Users, ChevronLeft, ChevronRight, Diff, File, ClipboardCheck } from 'lucide-react'
 import {
   SortableContext,
   horizontalListSortingStrategy,
@@ -304,9 +304,15 @@ function SortableTab({ tab, isActive, status, shellActivity, showClose, onSelect
         ) : (
           <span className="w-1.5 h-1.5 rounded-full bg-faint" />
         )
-      ) : tab.type !== 'diff' && tab.type !== 'file' && tab.type !== 'review' ? (
+      ) : tab.type === 'diff' ? (
+        <Diff className="icon-xs shrink-0 text-faint" />
+      ) : tab.type === 'file' ? (
+        <File className="icon-xs shrink-0 text-faint" />
+      ) : tab.type === 'review' ? (
+        <ClipboardCheck className="icon-xs shrink-0 text-faint" />
+      ) : (
         <span className={`w-1.5 h-1.5 rounded-full ${TAB_STATUS_DOT[status]}`} />
-      ) : null}
+      )}
       {editing ? (
         <input
           ref={inputRef}
diff --git a/src/renderer/components/WorkspaceView.tsx b/src/renderer/components/WorkspaceView.tsx
index ce285124..e4111de9 100644
--- a/src/renderer/components/WorkspaceView.tsx
+++ b/src/renderer/components/WorkspaceView.tsx
@@ -52,6 +52,9 @@ interface WorkspaceViewProps {
   onReorderTabs: (worktreePath: string, paneId: string, fromId: string, toId: string) => void
   onMoveTabToPane: (worktreePath: string, tabId: string, toPaneId: string, toIndex?: number) => void
   onSendToAgent?: (worktreePath: string, text: string) => void
+  /** Open the dedicated editor (file) tab for a path — used by the diff
+   *  tab's Edit action so editing never happens in the diff pane. */
+  onOpenFile?: (worktreePath: string, filePath: string) => void
   /** Leading padding for the leftmost leaf's tab bar so it clears the macOS
    *  traffic lights when no sidebar sits to the left of the workspace. */
   topBarLeadingPx?: number
@@ -359,6 +362,7 @@ export function WorkspaceView({
   onReorderTabs,
   onMoveTabToPane,
   onSendToAgent,
+  onOpenFile,
   repoLabel,
   branch,
   topBarLeadingPx = 0,
@@ -583,6 +587,10 @@ export function WorkspaceView({
                     staged={tab.staged ?? false}
                     branchDiff={tab.branchDiff ?? false}
                     commitHash={tab.commitHash}
+                    active={visible && isActiveInPane}
+                    onOpenEditor={
+                      onOpenFile ? (filePath) => onOpenFile(worktreePath, filePath) : undefined
+                    }
                     onSendToAgent={
                       onSendToAgent
                         ? (text) => onSendToAgent(worktreePath, text)
@@ -591,6 +599,7 @@ export function WorkspaceView({
                   />
                 ) : tab.type === 'file' ? (
                   <FileView
+                    tabId={tab.id}
                     worktreePath={worktreePath}
                     filePath={tab.filePath}
                     onSendToAgent={
@@ -626,6 +635,7 @@ export function WorkspaceView({
                     worktreePath={worktreePath}
                     fromCommit={tab.reviewFromCommit}
                     toCommit={tab.reviewToCommit}
+                    active={visible && isActiveInPane}
                     onSendToAgent={
                       onSendToAgent
                         ? (text) => onSendToAgent(worktreePath, text)
diff --git a/src/renderer/dirty-tabs.ts b/src/renderer/dirty-tabs.ts
new file mode 100644
index 00000000..37648c24
--- /dev/null
+++ b/src/renderer/dirty-tabs.ts
@@ -0,0 +1,19 @@
+// Tracks which editor tabs have unsaved changes so the close handler can
+// warn before discarding them. The dirty flag lives inside FileView's own
+// React tree; this side channel (keyed by tabId) lets handleCloseTab read
+// it imperatively at close time. Mirrors review-progress.ts. FileView sets
+// its entry on every change and clears it on unmount.
+const dirtyTabs = new Set<string>()
+
+export function setTabDirty(tabId: string, dirty: boolean): void {
+  if (dirty) dirtyTabs.add(tabId)
+  else dirtyTabs.delete(tabId)
+}
+
+export function clearTabDirty(tabId: string): void {
+  dirtyTabs.delete(tabId)
+}
+
+export function isTabDirty(tabId: string): boolean {
+  return dirtyTabs.has(tabId)
+}
diff --git a/src/renderer/hooks/useTabHandlers.ts b/src/renderer/hooks/useTabHandlers.ts
index 5447927d..fcf02c6d 100644
--- a/src/renderer/hooks/useTabHandlers.ts
+++ b/src/renderer/hooks/useTabHandlers.ts
@@ -4,6 +4,7 @@ import { getLeaves, findLeaf, findLeafByTabId } from '../../shared/state/termina
 import { agentDisplayName, getAgentInfo } from '../../shared/agent-registry'
 import { focusTerminalById, markTerminalClosing } from '../components/XTerminal'
 import { useBackend } from '../backend'
+import { isTabDirty, clearTabDirty } from '../dirty-tabs'
 
 function makeTerminalId(prefix: string, worktreePath: string): string {
   const safe = worktreePath.replace(/[/\\]/g, '-').replace(/^-+/, '').replace(/-+/g, '-')
@@ -103,6 +104,13 @@ export function useTabHandlers({
 
   const handleCloseTab = useCallback(
     (worktreePath: string, tabId: string) => {
+      // An editor tab with unsaved edits would silently discard them on
+      // close — confirm first. The dirty flag is published by FileView.
+      if (isTabDirty(tabId)) {
+        const ok = window.confirm('This file has unsaved changes. Close the tab and discard them?')
+        if (!ok) return
+        clearTabDirty(tabId)
+      }
       // PanesFSM is the authoritative path for json-claude/agent/shell
       // teardown — its closeTab kills the subprocess via killJsonClaude
       // or killTabPty. The PTY-side notification here is purely an
diff --git a/src/renderer/review-open-file.ts b/src/renderer/review-open-file.ts
new file mode 100644
index 00000000..ceb858ea
--- /dev/null
+++ b/src/renderer/review-open-file.ts
@@ -0,0 +1,46 @@
+// Cross-component "jump the review tab to this file" request channel.
+// The Changed Files panel (committed rows) opens the worktree's Review tab
+// and asks it to select a specific file; this side channel carries that
+// request from the panel into the ReviewPane's own React tree.
+//
+// Mirrors review-progress.ts — a side channel for state that lives inside
+// ReviewPane, keyed by worktree path. A monotonic nonce makes re-requesting
+// the same file re-fire, so clicking an already-open file re-selects it.
+import { useSyncExternalStore } from 'react'
+
+export interface ReviewFileRequest {
+  filePath: string
+  nonce: number
+}
+
+const requestByWorktree = new Map<string, ReviewFileRequest>()
+const listeners = new Set<() => void>()
+let counter = 0
+
+function emit(): void {
+  for (const l of listeners) l()
+}
+
+export function requestReviewFile(worktreePath: string, filePath: string): void {
+  requestByWorktree.set(worktreePath, { filePath, nonce: ++counter })
+  emit()
+}
+
+function subscribe(cb: () => void): () => void {
+  listeners.add(cb)
+  return () => {
+    listeners.delete(cb)
+  }
+}
+
+function getSnapshot(worktreePath: string): ReviewFileRequest | undefined {
+  return requestByWorktree.get(worktreePath)
+}
+
+export function useReviewFileRequest(worktreePath: string): ReviewFileRequest | undefined {
+  return useSyncExternalStore(
+    subscribe,
+    () => getSnapshot(worktreePath),
+    () => undefined
+  )
+}

From 33cad711e0c60aa82060768e5b39e26e6cf9a240 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Mon, 1 Jun 2026 07:31:02 -0400
Subject: [PATCH 03/63] =?UTF-8?q?changed=20files:=20clarify=20editor=20but?=
 =?UTF-8?q?ton=20=E2=80=94=20external=20by=20default,=20=E2=8C=98-click=20?=
 =?UTF-8?q?for=20in-app?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Relabel the per-file editor icon "Open file in external editor"; ⌘-click
opens the file in the in-Harness editor tab instead (handleOpenFile,
threaded through RightColumn → ChangedFilesPanel → FileRow).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/renderer/components/ChangedFilesPanel.tsx | 16 ++++++++++++----
 src/renderer/components/RightColumn.tsx       |  1 +
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/ChangedFilesPanel.tsx b/src/renderer/components/ChangedFilesPanel.tsx
index 4bd39e74..17595357 100644
--- a/src/renderer/components/ChangedFilesPanel.tsx
+++ b/src/renderer/components/ChangedFilesPanel.tsx
@@ -15,6 +15,8 @@ interface ChangedFilesPanelProps {
   onOpenReview?: () => void
   /** Open the worktree's Review tab focused on this committed file. */
   onOpenReviewFile?: (filePath: string) => void
+  /** Open a file in the in-Harness editor tab (⌘-click on the editor icon). */
+  onOpenFile?: (filePath: string) => void
 }
 
 const STATUS_LABEL: Record<ChangedFile['status'], string> = {
@@ -38,7 +40,7 @@ interface ChangedFilesData {
   branch: ChangedFile[]
 }
 
-export function ChangedFilesPanel({ worktreePath, onOpenDiff, onSendToAgent, onOpenReview, onOpenReviewFile }: ChangedFilesPanelProps): JSX.Element {
+export function ChangedFilesPanel({ worktreePath, onOpenDiff, onSendToAgent, onOpenReview, onOpenReviewFile, onOpenFile }: ChangedFilesPanelProps): JSX.Element {
   const backend = useBackend()
   const fetcher = useCallback(async (path: string): Promise<ChangedFilesData> => {
     const [working, branch] = await Promise.all([
@@ -123,6 +125,7 @@ export function ChangedFilesPanel({ worktreePath, onOpenDiff, onSendToAgent, onO
                     worktreePath={worktreePath}
                     onClick={() => onOpenDiff(file.path, true, 'working')}
                     onSendToAgent={onSendToAgent}
+                    onOpenFile={onOpenFile}
                   />
                 ))}
                 {stagedFiles.length > 0 && unstagedFiles.length > 0 && (
@@ -137,6 +140,7 @@ export function ChangedFilesPanel({ worktreePath, onOpenDiff, onSendToAgent, onO
                     worktreePath={worktreePath}
                     onClick={() => onOpenDiff(file.path, false, 'working')}
                     onSendToAgent={onSendToAgent}
+                    onOpenFile={onOpenFile}
                   />
                 ))}
               </>
@@ -163,6 +167,7 @@ export function ChangedFilesPanel({ worktreePath, onOpenDiff, onSendToAgent, onO
                       : onOpenDiff(file.path, false, 'branch')
                   }
                   onSendToAgent={onSendToAgent}
+                  onOpenFile={onOpenFile}
                 />
               ))
             )}
@@ -178,12 +183,14 @@ function FileRow({
   file,
   worktreePath,
   onClick,
-  onSendToAgent
+  onSendToAgent,
+  onOpenFile
 }: {
   file: ChangedFile
   worktreePath: string | null
   onClick: () => void
   onSendToAgent?: (text: string) => void
+  onOpenFile?: (filePath: string) => void
 }): JSX.Element {
   const backend = useBackend()
   const lastSlash = file.path.lastIndexOf('/')
@@ -235,11 +242,12 @@ function FileRow({
         </Tooltip>
       )}
       {worktreePath && (
-        <Tooltip label="Open file in editor" side="left">
+        <Tooltip label="Open file in external editor (⌘-click for in-app editor)" side="left">
           <button
             onClick={(e) => {
               e.stopPropagation()
-              backend.openInEditor(worktreePath, file.path)
+              if (e.metaKey && onOpenFile) onOpenFile(file.path)
+              else backend.openInEditor(worktreePath, file.path)
             }}
             className="shrink-0 opacity-0 group-hover:opacity-100 text-faint hover:text-fg transition-all cursor-pointer"
           >
diff --git a/src/renderer/components/RightColumn.tsx b/src/renderer/components/RightColumn.tsx
index f009c3b1..695b2824 100644
--- a/src/renderer/components/RightColumn.tsx
+++ b/src/renderer/components/RightColumn.tsx
@@ -127,6 +127,7 @@ export function RightColumn({
             }
             onOpenReview={onOpenReview}
             onOpenReviewFile={onOpenReviewFile}
+            onOpenFile={onOpenFile}
           />
         )
       case 'allFiles':

From ac4efa8d2af5600f6185fc7b6669aa760050f9fe Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Mon, 1 Jun 2026 07:38:52 -0400
Subject: [PATCH 04/63] review: collapse long comments with a Show more toggle;
 dynamic zone height

Comment view zones are now sized to their rendered content via a
ResizeObserver (no more fixed 4-line clip). A comment taller than ~4 lines
clamps its body with a fade + "Show more"; clicking the comment (or the
toggle) expands it to full size, and the zone grows to fit. The observed
height depends only on the comment content, so there's no layout feedback
loop. Observers are disconnected on zone teardown.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/renderer/components/ReviewDiffPane.tsx | 110 ++++++++++++++++++---
 1 file changed, 99 insertions(+), 11 deletions(-)

diff --git a/src/renderer/components/ReviewDiffPane.tsx b/src/renderer/components/ReviewDiffPane.tsx
index 84cc90d6..43fa96a4 100644
--- a/src/renderer/components/ReviewDiffPane.tsx
+++ b/src/renderer/components/ReviewDiffPane.tsx
@@ -70,6 +70,9 @@ function formatRelTime(ms: number): string {
   return new Date(ms).toLocaleDateString()
 }
 
+const COMMENT_BG = 'color-mix(in srgb, var(--color-info, #58a6ff) 28%, var(--color-panel-raised))'
+const COLLAPSED_BODY_PX = 64
+
 function InlineComment({
   comment,
   onDelete
@@ -79,8 +82,18 @@ function InlineComment({
 }): JSX.Element {
   const ts = comment.createdAt ? Date.parse(comment.createdAt) : comment.timestamp
   const timeStr = formatRelTime(ts)
+  const [expanded, setExpanded] = useState(false)
+  const bodyRef = useRef<HTMLDivElement>(null)
+  const [collapsible, setCollapsible] = useState(false)
+  useEffect(() => {
+    const el = bodyRef.current
+    if (el) setCollapsible(el.scrollHeight > COLLAPSED_BODY_PX + 4)
+  }, [comment.body])
+  const clamped = collapsible && !expanded
+
   return (
     <div
+      onClick={() => collapsible && setExpanded((v) => !v)}
       style={{
         display: 'inline-flex',
         flexDirection: 'column',
@@ -90,10 +103,11 @@ function InlineComment({
         border: '1px solid color-mix(in srgb, var(--color-info, #58a6ff) 60%, transparent)',
         borderLeft: '4px solid var(--color-info, #58a6ff)',
         borderRadius: '0 6px 6px 0',
-        background: 'color-mix(in srgb, var(--color-info, #58a6ff) 28%, var(--color-panel-raised))',
+        background: COMMENT_BG,
         boxShadow: '0 2px 10px rgba(0, 0, 0, 0.4)',
         margin: '4px 0',
-        maxWidth: '760px'
+        maxWidth: '760px',
+        cursor: collapsible ? 'pointer' : 'default'
       }}
     >
       <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
@@ -131,6 +145,7 @@ function InlineComment({
               href={comment.htmlUrl}
               target="_blank"
               rel="noreferrer"
+              onClick={(e) => e.stopPropagation()}
               style={{ color: 'var(--color-faint)', fontSize: '11px' }}
             >
               {timeStr}
@@ -140,7 +155,10 @@ function InlineComment({
           ))}
         {comment.remoteId === undefined && (
           <button
-            onClick={onDelete}
+            onClick={(e) => {
+              e.stopPropagation()
+              onDelete()
+            }}
             title="Delete comment"
             style={{
               marginLeft: 'auto',
@@ -159,9 +177,53 @@ function InlineComment({
           </button>
         )}
       </div>
-      <div className="markdown" style={{ color: 'var(--color-fg)', minWidth: 0, fontSize: '12px' }}>
-        <ReactMarkdown remarkPlugins={COMMENT_REMARK_PLUGINS}>{comment.body}</ReactMarkdown>
+      <div style={{ position: 'relative' }}>
+        <div
+          ref={bodyRef}
+          className="markdown"
+          style={{
+            color: 'var(--color-fg)',
+            minWidth: 0,
+            fontSize: '12px',
+            maxHeight: clamped ? `${COLLAPSED_BODY_PX}px` : undefined,
+            overflow: 'hidden'
+          }}
+        >
+          <ReactMarkdown remarkPlugins={COMMENT_REMARK_PLUGINS}>{comment.body}</ReactMarkdown>
+        </div>
+        {clamped && (
+          <div
+            style={{
+              position: 'absolute',
+              left: 0,
+              right: 0,
+              bottom: 0,
+              height: '20px',
+              background: `linear-gradient(to bottom, transparent, ${COMMENT_BG})`,
+              pointerEvents: 'none'
+            }}
+          />
+        )}
       </div>
+      {collapsible && (
+        <button
+          onClick={(e) => {
+            e.stopPropagation()
+            setExpanded((v) => !v)
+          }}
+          style={{
+            alignSelf: 'flex-start',
+            background: 'none',
+            border: 'none',
+            padding: 0,
+            color: 'var(--color-info)',
+            cursor: 'pointer',
+            fontSize: '11px'
+          }}
+        >
+          {expanded ? 'Show less' : 'Show more'}
+        </button>
+      )}
     </div>
   )
 }
@@ -269,9 +331,13 @@ function InlineCommentInput({
 
 interface ViewZoneEntry {
   zoneId: string
+  /** Kept so we can mutate heightInPx and re-layout when the comment's
+   *  rendered height changes (collapse/expand, markdown reflow). */
+  zone: monaco.editor.IViewZone
   root: Root
   domNode: HTMLDivElement
   stickyWrapper: HTMLDivElement
+  resizeObserver?: ResizeObserver
 }
 
 export function ReviewDiffPane({
@@ -354,6 +420,7 @@ export function ReviewDiffPane({
     if (zones.length === 0) return
     modifiedEd.changeViewZones((accessor) => {
       for (const z of zones) {
+        z.resizeObserver?.disconnect()
         accessor.removeZone(z.zoneId)
         queueMicrotask(() => z.root.unmount())
       }
@@ -407,13 +474,14 @@ export function ReviewDiffPane({
         stickyWrapper.style.width = `${contentWidth}px`
         domNode.appendChild(stickyWrapper)
 
-        const heightInLines = item.type === 'input' ? 7 : 4
-        const zoneId = accessor.addZone({
+        const zone: monaco.editor.IViewZone = {
           afterLineNumber: item.lineNumber,
-          heightInLines,
           domNode,
           suppressMouseDown: false
-        })
+        }
+        if (item.type === 'input') zone.heightInLines = 7
+        else zone.heightInPx = 76 // estimate; the ResizeObserver corrects it
+        const zoneId = accessor.addZone(zone)
 
         const root = createRoot(stickyWrapper)
         if (item.type === 'comment' && item.comment) {
@@ -434,7 +502,24 @@ export function ReviewDiffPane({
           )
         }
 
-        newZones.push({ zoneId, root, domNode, stickyWrapper })
+        // Resize the comment zone to fit its rendered content so collapse /
+        // expand and markdown reflow don't clip. The observed height depends
+        // only on the comment content (not the zone height), so there's no
+        // feedback loop.
+        let resizeObserver: ResizeObserver | undefined
+        if (item.type === 'comment') {
+          resizeObserver = new ResizeObserver(() => {
+            const ed = editorRef.current
+            if (!ed) return
+            const h = Math.ceil(stickyWrapper.scrollHeight) + 8
+            if (!h || zone.heightInPx === h) return
+            zone.heightInPx = h
+            ed.getModifiedEditor().changeViewZones((acc) => acc.layoutZone(zoneId))
+          })
+          resizeObserver.observe(stickyWrapper)
+        }
+
+        newZones.push({ zoneId, zone, root, domNode, stickyWrapper, resizeObserver })
       }
     })
 
@@ -445,7 +530,10 @@ export function ReviewDiffPane({
   useEffect(() => {
     return () => {
       const zones = viewZonesRef.current
-      for (const z of zones) queueMicrotask(() => z.root.unmount())
+      for (const z of zones) {
+        z.resizeObserver?.disconnect()
+        queueMicrotask(() => z.root.unmount())
+      }
       viewZonesRef.current = []
     }
   }, [])

From 6f41a5b73966164a7428e584a9e25c7797dbb389 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Mon, 1 Jun 2026 07:44:35 -0400
Subject: [PATCH 05/63] review: render sanitized HTML in comments; expand-all
 button

Comments (and the reviewer popover) are GitHub-authored markdown that can
contain raw HTML. Add rehype-raw to parse it and rehype-sanitize (GitHub
schema) to strip anything unsafe, since the content comes from arbitrary
PR participants. Also add an UnfoldVertical/FoldVertical toggle on the diff
file header (left of Viewed) that expands/collapses all comments in the
file via a forceExpanded prop.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 package-lock.json                          | 198 +++++++++++++++++++++
 package.json                               |   2 +
 src/renderer/components/ReviewDiffPane.tsx |  45 ++++-
 src/renderer/components/ReviewPane.tsx     |   7 +-
 4 files changed, 245 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cc7ddd87..f7754069 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,6 +37,8 @@
         "react-dom": "^19.2.5",
         "react-markdown": "^10.1.0",
         "rehype-highlight": "^7.0.2",
+        "rehype-raw": "^7.0.0",
+        "rehype-sanitize": "^6.0.0",
         "remark-gfm": "^4.0.1",
         "ssh-config": "^5.1.0",
         "ws": "^8.20.0"
@@ -5361,6 +5363,18 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/env-paths": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
@@ -6027,6 +6041,26 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-from-parse5": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-8.0.3.tgz",
+      "integrity": "sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "devlop": "^1.0.0",
+        "hastscript": "^9.0.0",
+        "property-information": "^7.0.0",
+        "vfile": "^6.0.0",
+        "vfile-location": "^5.0.0",
+        "web-namespaces": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-is-element": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz",
@@ -6040,6 +6074,59 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hast-util-parse-selector": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz",
+      "integrity": "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-raw": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-9.1.0.tgz",
+      "integrity": "sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "hast-util-from-parse5": "^8.0.0",
+        "hast-util-to-parse5": "^8.0.0",
+        "html-void-elements": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "parse5": "^7.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0",
+        "web-namespaces": "^2.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-sanitize": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/hast-util-sanitize/-/hast-util-sanitize-5.0.2.tgz",
+      "integrity": "sha512-3yTWghByc50aGS7JlGhk61SPenfE/p1oaFeNwkOOyrscaOkMGrcW9+Cy/QAIOBpZxP1yqDIzFMR0+Np0i0+usg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "unist-util-position": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-to-jsx-runtime": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
@@ -6067,6 +6154,25 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hast-util-to-parse5": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/hast-util-to-parse5/-/hast-util-to-parse5-8.0.1.tgz",
+      "integrity": "sha512-MlWT6Pjt4CG9lFCjiz4BH7l9wmrMkfkJYCxFwKQic8+RTZgWPuWxwAfjJElsXkex7DJjfSJsQIt931ilUgmwdA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "web-namespaces": "^2.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-to-text": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-4.0.2.tgz",
@@ -6096,6 +6202,23 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hastscript": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-9.0.1.tgz",
+      "integrity": "sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-parse-selector": "^4.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/highlight.js": {
       "version": "11.11.1",
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
@@ -6148,6 +6271,16 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/html-void-elements": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+      "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/http-cache-semantics": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.2.0.tgz",
@@ -8769,6 +8902,18 @@
       "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
       "license": "MIT"
     },
+    "node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -9127,6 +9272,35 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/rehype-raw": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-7.0.0.tgz",
+      "integrity": "sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-raw": "^9.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rehype-sanitize": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-sanitize/-/rehype-sanitize-6.0.0.tgz",
+      "integrity": "sha512-CsnhKNsyI8Tub6L4sm5ZFsme4puGfc6pYylvXo1AeqaGbjOYyzNv3qZPwvs0oMJ39eryyeOdmxwUIo94IpEhqg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-sanitize": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remark-gfm": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz",
@@ -10375,6 +10549,20 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/vfile-location": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.3.tgz",
+      "integrity": "sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/vfile-message": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
@@ -10567,6 +10755,16 @@
         "defaults": "^1.0.3"
       }
     },
+    "node_modules/web-namespaces": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
+      "integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index d455df8d..f431afb8 100644
--- a/package.json
+++ b/package.json
@@ -165,6 +165,8 @@
     "react-dom": "^19.2.5",
     "react-markdown": "^10.1.0",
     "rehype-highlight": "^7.0.2",
+    "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.1",
     "ssh-config": "^5.1.0",
     "ws": "^8.20.0"
diff --git a/src/renderer/components/ReviewDiffPane.tsx b/src/renderer/components/ReviewDiffPane.tsx
index 43fa96a4..d0865bad 100644
--- a/src/renderer/components/ReviewDiffPane.tsx
+++ b/src/renderer/components/ReviewDiffPane.tsx
@@ -3,7 +3,9 @@ import { createRoot, type Root } from 'react-dom/client'
 import * as monaco from 'monaco-editor'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
-import { ArrowRightFromLine, Check, MessagesSquare, WrapText } from 'lucide-react'
+import rehypeRaw from 'rehype-raw'
+import rehypeSanitize from 'rehype-sanitize'
+import { ArrowRightFromLine, Check, FoldVertical, MessagesSquare, UnfoldVertical, WrapText } from 'lucide-react'
 import type { FileDiffSides, ChangedFile } from '../types'
 import type { ReviewComment } from './ReviewFileTree'
 import { MonacoDiffEditor } from './MonacoDiffEditor'
@@ -56,6 +58,9 @@ const STATUS_COLOR: Record<ChangedFile['status'], string> = {
 }
 
 const COMMENT_REMARK_PLUGINS = [remarkGfm]
+// rehype-raw parses raw HTML (so GitHub-authored tags render); rehype-sanitize
+// then strips anything unsafe — comments come from arbitrary PR participants.
+const COMMENT_REHYPE_PLUGINS = [rehypeRaw, rehypeSanitize]
 
 function formatRelTime(ms: number): string {
   if (!ms || Number.isNaN(ms)) return ''
@@ -75,14 +80,16 @@ const COLLAPSED_BODY_PX = 64
 
 function InlineComment({
   comment,
-  onDelete
+  onDelete,
+  forceExpanded
 }: {
   comment: ReviewComment
   onDelete: () => void
+  forceExpanded?: boolean
 }): JSX.Element {
   const ts = comment.createdAt ? Date.parse(comment.createdAt) : comment.timestamp
   const timeStr = formatRelTime(ts)
-  const [expanded, setExpanded] = useState(false)
+  const [expanded, setExpanded] = useState(forceExpanded ?? false)
   const bodyRef = useRef<HTMLDivElement>(null)
   const [collapsible, setCollapsible] = useState(false)
   useEffect(() => {
@@ -189,7 +196,9 @@ function InlineComment({
             overflow: 'hidden'
           }}
         >
-          <ReactMarkdown remarkPlugins={COMMENT_REMARK_PLUGINS}>{comment.body}</ReactMarkdown>
+          <ReactMarkdown remarkPlugins={COMMENT_REMARK_PLUGINS} rehypePlugins={COMMENT_REHYPE_PLUGINS}>
+            {comment.body}
+          </ReactMarkdown>
         </div>
         {clamped && (
           <div
@@ -363,6 +372,7 @@ export function ReviewDiffPane({
   const [sides, setSides] = useState<FileDiffSides | null>(null)
   const [loading, setLoading] = useState(false)
   const [commentLine, setCommentLine] = useState<number | null>(null)
+  const [expandAll, setExpandAll] = useState(false)
   // Bumped each time the diff editor (re)mounts so the view-zone effect
   // re-runs and re-draws comments — the editor unmounts/remounts on every
   // file switch, and a ref alone wouldn't retrigger the effect.
@@ -487,7 +497,11 @@ export function ReviewDiffPane({
         if (item.type === 'comment' && item.comment) {
           const c = item.comment
           root.render(
-            <InlineComment comment={c} onDelete={() => onDeleteComment(c.id)} />
+            <InlineComment
+              comment={c}
+              onDelete={() => onDeleteComment(c.id)}
+              forceExpanded={expandAll}
+            />
           )
         } else if (item.type === 'input') {
           root.render(
@@ -524,7 +538,7 @@ export function ReviewDiffPane({
     })
 
     viewZonesRef.current = newZones
-  }, [comments, commentLine, editorNonce, clearViewZones, onAddComment, onDeleteComment])
+  }, [comments, commentLine, editorNonce, expandAll, clearViewZones, onAddComment, onDeleteComment])
 
   // Clean up view zones on unmount
   useEffect(() => {
@@ -670,6 +684,25 @@ export function ReviewDiffPane({
           </Tooltip>
         )}
 
+        {comments.length > 0 && (
+          <Tooltip label={expandAll ? 'Collapse all comments' : 'Expand all comments'}>
+            <button
+              onClick={() => setExpandAll((v) => !v)}
+              aria-pressed={expandAll}
+              aria-label={expandAll ? 'Collapse all comments' : 'Expand all comments'}
+              className={`shrink-0 flex items-center px-2 py-1 rounded border border-border transition-colors cursor-pointer ${
+                expandAll ? 'text-accent' : 'text-faint hover:text-fg'
+              }`}
+            >
+              {expandAll ? (
+                <FoldVertical className="icon-xs" />
+              ) : (
+                <UnfoldVertical className="icon-xs" />
+              )}
+            </button>
+          </Tooltip>
+        )}
+
         <Tooltip label={reviewed ? 'Mark as not viewed (r)' : 'Mark as viewed (r)'}>
           <button
             onClick={onToggleReviewed}
diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index a3e7becd..5041d7dd 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -5,6 +5,8 @@ import type { PRReview } from '../../shared/state/prs'
 import type { ReviewComment } from './ReviewFileTree'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
+import rehypeRaw from 'rehype-raw'
+import rehypeSanitize from 'rehype-sanitize'
 import { ReviewFileTree } from './ReviewFileTree'
 import { ReviewDiffPane } from './ReviewDiffPane'
 import { ModeButton } from './DiffView'
@@ -718,6 +720,7 @@ function shortOf(commits: BranchCommit[], hash?: string): string {
 }
 
 const REVIEW_MD_PLUGINS = [remarkGfm]
+const REVIEW_REHYPE_PLUGINS = [rehypeRaw, rehypeSanitize]
 
 const REVIEW_STATE_META: Record<string, { ring: string; label: string }> = {
   APPROVED: { ring: 'ring-success', label: 'approved' },
@@ -800,7 +803,9 @@ function ReviewerStatus({ reviews }: { reviews: PRReview[] }): JSX.Element | nul
           <div className="px-3 py-2 max-h-48 overflow-y-auto">
             {openReview.body.trim() ? (
               <div className="markdown text-xs text-dim">
-                <ReactMarkdown remarkPlugins={REVIEW_MD_PLUGINS}>{openReview.body}</ReactMarkdown>
+                <ReactMarkdown remarkPlugins={REVIEW_MD_PLUGINS} rehypePlugins={REVIEW_REHYPE_PLUGINS}>
+                  {openReview.body}
+                </ReactMarkdown>
               </div>
             ) : (
               <span className="text-xs text-faint">(no top-level comment)</span>

From 9bbb8e340cfb0dbe506b9cee28fe6ec8e9c8bcd0 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Mon, 1 Jun 2026 07:47:18 -0400
Subject: [PATCH 06/63] review: don't collapse the comment when toggling a
 <details> inside it

The comment's click-to-expand handler caught bubbled clicks from rendered
HTML controls, so opening/closing a <details> also collapsed the comment.
Bail out of the toggle when the click originates inside an interactive
element (a/button/summary/details/input/textarea/select/label).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/renderer/components/ReviewDiffPane.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/ReviewDiffPane.tsx b/src/renderer/components/ReviewDiffPane.tsx
index d0865bad..5371f6f9 100644
--- a/src/renderer/components/ReviewDiffPane.tsx
+++ b/src/renderer/components/ReviewDiffPane.tsx
@@ -100,7 +100,19 @@ function InlineComment({
 
   return (
     <div
-      onClick={() => collapsible && setExpanded((v) => !v)}
+      onClick={(e) => {
+        if (!collapsible) return
+        // Don't toggle the comment when interacting with controls rendered
+        // inside it — a <details> disclosure, links, buttons, form fields.
+        if (
+          (e.target as HTMLElement | null)?.closest(
+            'a, button, summary, details, input, textarea, select, label'
+          )
+        ) {
+          return
+        }
+        setExpanded((v) => !v)
+      }}
       style={{
         display: 'inline-flex',
         flexDirection: 'column',

From 34bec6e22b00f08e6fdc211e1011378ff6d52a01 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Mon, 1 Jun 2026 07:51:25 -0400
Subject: [PATCH 07/63] review: fix synced draft comment landing at top +
 duplicating local copy
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A draft comment pulled back from the pending review can return with a
null/0 line, so it rendered at the top of the file and — because its line
differed from the local copy — failed to dedupe, leaving both. Recover the
pulled comment's line from the matching local comment (same file + body)
before dedup, so it shows at the right line and replaces the local copy.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/main/github.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/main/github.ts b/src/main/github.ts
index a233bd84..4e606571 100644
--- a/src/main/github.ts
+++ b/src/main/github.ts
@@ -1423,6 +1423,19 @@ export async function syncPRReview(
     }
   }
 
+  // Drafts pulled from a pending review can come back with a null/0 line.
+  // Recover it from the matching local comment (same file + body) so the
+  // pulled copy renders at the right line AND dedupes against the local one
+  // — otherwise it lands at the top and the local copy is kept too.
+  for (const p of pulled) {
+    if (p.lineNumber === 0) {
+      const local = input.comments.find(
+        (c) => c.filePath === p.filePath && c.body === p.body && c.lineNumber > 0
+      )
+      if (local) p.lineNumber = local.lineNumber
+    }
+  }
+
   // Keep local comments not represented in the pulled set — file-level
   // comments (no draft support) and any that failed to push — so they're
   // not lost and can retry next sync.

From ccd6383ca7c3328e860b9be7c1b53e02aa99c63d Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Mon, 1 Jun 2026 08:23:20 -0400
Subject: [PATCH 08/63] review: pull draft comment lines via GraphQL; dedupe
 pulled comments
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The REST pending-review-comments endpoint returns a null line for drafts,
so synced comments rendered at line 0 (top of file) and — never matching
the local copy — failed to dedupe, so each sync re-pushed a new draft.
That accumulation (comments → view zones → ResizeObservers) is also what
slowed the UI.

Fetch pending/draft review comments via GraphQL where originalLine is
populated, and collapse identical duplicates (file+line+body+author) so
prior accidental dupes don't pile up. Drop the now-unused pendingReviewId.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/main/github.ts | 69 ++++++++++++++++++++++++++++++++++++----------
 1 file changed, 55 insertions(+), 14 deletions(-)

diff --git a/src/main/github.ts b/src/main/github.ts
index 4e606571..01a86c64 100644
--- a/src/main/github.ts
+++ b/src/main/github.ts
@@ -1274,7 +1274,6 @@ export async function syncPRReview(
   // 2. Find the viewer's existing pending review, if any. Pending reviews are
   //    only returned to their author, so any PENDING entry here is ours.
   let pendingReviewNodeId = ''
-  let pendingReviewId: number | null = null
   try {
     const res = await ghRequest(token, `${base}/reviews?per_page=100`, 'GET')
     if (res.ok && Array.isArray(res.json)) {
@@ -1283,7 +1282,6 @@ export async function syncPRReview(
       )
       if (pending) {
         pendingReviewNodeId = pending.node_id
-        pendingReviewId = pending.id
       }
     }
   } catch (err) {
@@ -1330,10 +1328,6 @@ export async function syncPRReview(
       )
       if (r.ok) {
         pushed += toPush.length
-        const dbId = (
-          r.data as { addPullRequestReview?: { pullRequestReview?: { databaseId?: number } } } | undefined
-        )?.addPullRequestReview?.pullRequestReview?.databaseId
-        if (typeof dbId === 'number') pendingReviewId = dbId
       } else {
         failed += toPush.length
         log('github', `create draft review failed: ${r.error}`)
@@ -1414,13 +1408,49 @@ export async function syncPRReview(
   } catch (err) {
     log('github', 'list review comments error', formatErr(err))
   }
-  if (pendingReviewId !== null) {
-    try {
-      const drafts = await ghRequest(token, `${base}/reviews/${pendingReviewId}/comments?per_page=100`, 'GET')
-      if (drafts.ok && Array.isArray(drafts.json)) collect(drafts.json as ApiComment[])
-    } catch (err) {
-      log('github', 'list pending review comments error', formatErr(err))
+  // Pending (draft) review comments come back from REST with a null line, so
+  // pull them via GraphQL where originalLine is populated.
+  const draftQuery = await ghGraphQL(
+    token,
+    'query($o:String!,$n:String!,$num:Int!){repository(owner:$o,name:$n){pullRequest(number:$num){reviews(first:20,states:[PENDING]){nodes{comments(first:100){nodes{databaseId path line originalLine body createdAt url author{login avatarUrl}}}}}}}}',
+    { o: owner, n: repo, num: prNumber }
+  )
+  if (draftQuery.ok) {
+    type GqlComment = {
+      databaseId?: number
+      path?: string
+      line?: number | null
+      originalLine?: number | null
+      body?: string
+      createdAt?: string
+      url?: string
+      author?: { login?: string; avatarUrl?: string }
     }
+    const reviews =
+      (
+        draftQuery.data as {
+          repository?: {
+            pullRequest?: { reviews?: { nodes?: Array<{ comments?: { nodes?: GqlComment[] } }> } }
+          }
+        }
+      )?.repository?.pullRequest?.reviews?.nodes ?? []
+    for (const rev of reviews) {
+      for (const c of rev?.comments?.nodes ?? []) {
+        if (typeof c.databaseId !== 'number' || !c.path) continue
+        pulled.push({
+          filePath: c.path,
+          lineNumber: c.line ?? c.originalLine ?? 0,
+          body: c.body ?? '',
+          remoteId: c.databaseId,
+          author: c.author?.login,
+          authorAvatarUrl: c.author?.avatarUrl,
+          createdAt: c.createdAt,
+          htmlUrl: c.url
+        })
+      }
+    }
+  } else {
+    log('github', `pending review comments query failed: ${draftQuery.error}`)
   }
 
   // Drafts pulled from a pending review can come back with a null/0 line.
@@ -1436,17 +1466,28 @@ export async function syncPRReview(
     }
   }
 
+  // Collapse identical duplicates (e.g. drafts accidentally pushed twice by
+  // earlier syncs) so they don't pile up. Keyed on file+line+body+author so
+  // distinct reviewers' identical text isn't merged.
+  const seen = new Set<string>()
+  const dedupedPulled = pulled.filter((c) => {
+    const k = `${c.filePath}:${c.lineNumber}:${c.body}:${c.author ?? ''}`
+    if (seen.has(k)) return false
+    seen.add(k)
+    return true
+  })
+
   // Keep local comments not represented in the pulled set — file-level
   // comments (no draft support) and any that failed to push — so they're
   // not lost and can retry next sync.
-  const pulledKey = new Set(pulled.map((c) => `${c.filePath}:${c.lineNumber}:${c.body}`))
+  const pulledKey = new Set(dedupedPulled.map((c) => `${c.filePath}:${c.lineNumber}:${c.body}`))
   const keptLocal = input.comments.filter(
     (c) => c.remoteId === undefined && !pulledKey.has(`${c.filePath}:${c.lineNumber}:${c.body}`)
   )
 
   return {
     ok: true,
-    comments: [...pulled, ...keptLocal],
+    comments: [...dedupedPulled, ...keptLocal],
     reviewedFiles: mergedReviewed,
     pushed,
     failed

From cbcf21d7783c9f5b9973d8941fb649137b8a8690 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Mon, 1 Jun 2026 08:41:30 -0400
Subject: [PATCH 09/63] review: tint draft comments differently from published
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Carry a draft flag through ReviewSync*/ReviewComment (true for pending-
review comments and local-only ones, false for published). Drafts render
with an amber accent/background + a "Draft" badge; published comments keep
the blue accent — so it's clear what's still pending vs live on the PR.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/main/github.ts                         |  6 ++--
 src/renderer/components/ReviewDiffPane.tsx | 32 ++++++++++++++++++----
 src/renderer/components/ReviewFileTree.tsx |  2 ++
 src/renderer/components/ReviewPane.tsx     |  3 +-
 src/shared/github-types.ts                 |  2 ++
 5 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/src/main/github.ts b/src/main/github.ts
index 01a86c64..92068db0 100644
--- a/src/main/github.ts
+++ b/src/main/github.ts
@@ -1398,7 +1398,8 @@ export async function syncPRReview(
         author: rc.user?.login,
         authorAvatarUrl: rc.user?.avatar_url,
         createdAt: rc.created_at,
-        htmlUrl: rc.html_url
+        htmlUrl: rc.html_url,
+        draft: false
       })
     }
   }
@@ -1445,7 +1446,8 @@ export async function syncPRReview(
           author: c.author?.login,
           authorAvatarUrl: c.author?.avatarUrl,
           createdAt: c.createdAt,
-          htmlUrl: c.url
+          htmlUrl: c.url,
+          draft: true
         })
       }
     }
diff --git a/src/renderer/components/ReviewDiffPane.tsx b/src/renderer/components/ReviewDiffPane.tsx
index 5371f6f9..5d047d47 100644
--- a/src/renderer/components/ReviewDiffPane.tsx
+++ b/src/renderer/components/ReviewDiffPane.tsx
@@ -75,7 +75,6 @@ function formatRelTime(ms: number): string {
   return new Date(ms).toLocaleDateString()
 }
 
-const COMMENT_BG = 'color-mix(in srgb, var(--color-info, #58a6ff) 28%, var(--color-panel-raised))'
 const COLLAPSED_BODY_PX = 64
 
 function InlineComment({
@@ -98,6 +97,12 @@ function InlineComment({
   }, [comment.body])
   const clamped = collapsible && !expanded
 
+  // Local-only or pending-review comments are drafts (not yet published on
+  // the PR); tint them differently (amber) from published comments (blue).
+  const isDraft = comment.draft || comment.remoteId === undefined
+  const accent = isDraft ? 'var(--color-warning, #d29922)' : 'var(--color-info, #58a6ff)'
+  const bg = `color-mix(in srgb, ${accent} ${isDraft ? '20%' : '28%'}, var(--color-panel-raised))`
+
   return (
     <div
       onClick={(e) => {
@@ -119,10 +124,10 @@ function InlineComment({
         gap: '4px',
         padding: '8px 12px',
         fontSize: '12px',
-        border: '1px solid color-mix(in srgb, var(--color-info, #58a6ff) 60%, transparent)',
-        borderLeft: '4px solid var(--color-info, #58a6ff)',
+        border: `1px solid color-mix(in srgb, ${accent} 60%, transparent)`,
+        borderLeft: `4px solid ${accent}`,
         borderRadius: '0 6px 6px 0',
-        background: COMMENT_BG,
+        background: bg,
         boxShadow: '0 2px 10px rgba(0, 0, 0, 0.4)',
         margin: '4px 0',
         maxWidth: '760px',
@@ -172,6 +177,21 @@ function InlineComment({
           ) : (
             <span style={{ color: 'var(--color-faint)', fontSize: '11px' }}>{timeStr}</span>
           ))}
+        {isDraft && (
+          <span
+            style={{
+              fontSize: '10px',
+              color: accent,
+              border: `1px solid ${accent}`,
+              borderRadius: '3px',
+              padding: '0 4px',
+              textTransform: 'uppercase',
+              letterSpacing: '0.04em'
+            }}
+          >
+            Draft
+          </span>
+        )}
         {comment.remoteId === undefined && (
           <button
             onClick={(e) => {
@@ -220,7 +240,7 @@ function InlineComment({
               right: 0,
               bottom: 0,
               height: '20px',
-              background: `linear-gradient(to bottom, transparent, ${COMMENT_BG})`,
+              background: `linear-gradient(to bottom, transparent, ${bg})`,
               pointerEvents: 'none'
             }}
           />
@@ -237,7 +257,7 @@ function InlineComment({
             background: 'none',
             border: 'none',
             padding: 0,
-            color: 'var(--color-info)',
+            color: accent,
             cursor: 'pointer',
             fontSize: '11px'
           }}
diff --git a/src/renderer/components/ReviewFileTree.tsx b/src/renderer/components/ReviewFileTree.tsx
index dab69c5d..d16465eb 100644
--- a/src/renderer/components/ReviewFileTree.tsx
+++ b/src/renderer/components/ReviewFileTree.tsx
@@ -18,6 +18,8 @@ export interface ReviewComment {
   createdAt?: string
   /** Link to the comment on GitHub. */
   htmlUrl?: string
+  /** True for a comment on an unsubmitted (pending) review. */
+  draft?: boolean
 }
 
 interface ReviewFileTreeProps {
diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index 5041d7dd..5f089923 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -292,7 +292,8 @@ export function ReviewPane({
             author: c.author,
             authorAvatarUrl: c.authorAvatarUrl,
             createdAt: c.createdAt,
-            htmlUrl: c.htmlUrl
+            htmlUrl: c.htmlUrl,
+            draft: c.draft
           }))
         )
         // Reflect the merged viewed state (local ∪ GitHub) so files viewed
diff --git a/src/shared/github-types.ts b/src/shared/github-types.ts
index 77039aed..419f564d 100644
--- a/src/shared/github-types.ts
+++ b/src/shared/github-types.ts
@@ -44,6 +44,8 @@ export interface ReviewSyncComment {
   createdAt?: string
   /** Link to the comment on GitHub. */
   htmlUrl?: string
+  /** True for a comment on an unsubmitted (pending) review. */
+  draft?: boolean
 }
 
 export interface ReviewSyncInput {

From 0280c72d7eb8d6da7e805b6a3d6c4d7fb5ec0655 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Mon, 1 Jun 2026 08:47:41 -0400
Subject: [PATCH 10/63] =?UTF-8?q?review:=20fix=20renderer=20freeze=20durin?=
 =?UTF-8?q?g=20sync=20=E2=80=94=20comment=20ResizeObserver=20feedback=20lo?=
 =?UTF-8?q?op?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each comment view zone has a ResizeObserver that resizes the Monaco zone to
fit its content. The onDidLayoutChange handler rewrote every sticky
wrapper's width on each editor layout change — which resized the very
elements those observers watch, retriggering them → changeViewZones →
layout change → loop, thrashing the renderer (the freeze while syncing).
Drop the width rewrite; the comment is capped at 760px and left-pinned, so
the width set once at zone creation is sufficient.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/renderer/components/ReviewDiffPane.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/ReviewDiffPane.tsx b/src/renderer/components/ReviewDiffPane.tsx
index 5d047d47..dece03f1 100644
--- a/src/renderer/components/ReviewDiffPane.tsx
+++ b/src/renderer/components/ReviewDiffPane.tsx
@@ -629,12 +629,12 @@ export function ReviewDiffPane({
       editorRef.current = editor
       setEditorNonce((n) => n + 1)
       const modEd = editor.getModifiedEditor()
-      // Keep sticky wrappers sized to the visible viewport on resize.
-      modEd.onDidLayoutChange((layout) => {
-        for (const z of viewZonesRef.current) {
-          z.stickyWrapper.style.width = `${layout.contentWidth}px`
-        }
-      })
+      // NOTE: do NOT rewrite sticky-wrapper widths on layout change. Each
+      // comment zone has a ResizeObserver watching its wrapper; mutating the
+      // wrapper here would retrigger that observer → changeViewZones → layout
+      // change → loop (a renderer-freezing feedback storm). The comment is
+      // capped at 760px and left-pinned, so a fixed width set at creation is
+      // fine.
       // Track the hovered line so `c` can target it.
       modEd.onMouseMove((e) => {
         hoveredLineRef.current = e.target.position?.lineNumber ?? null

From f8e7098ffcbdc1ed23e8a324105a4c71b9f80149 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Mon, 1 Jun 2026 08:51:30 -0400
Subject: [PATCH 11/63] review: thread reply comments inset under their parent
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Carry the reply linkage through sync — in_reply_to_id (REST published) and
replyTo.databaseId (GraphQL drafts) → ReviewSyncComment.inReplyToId. Group
a file's comments into threads (a reply keys to its parent's remoteId, a
root to its own) and render each thread as one view zone: the root comment
followed by its replies, each inset 16px and touching the comment above so
the reply relationship reads visually. The InlineComment's own margin moved
to the thread container.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/main/github.ts                         | 10 ++--
 src/renderer/components/ReviewDiffPane.tsx | 56 ++++++++++++++++++----
 src/renderer/components/ReviewFileTree.tsx |  2 +
 src/renderer/components/ReviewPane.tsx     |  3 +-
 src/shared/github-types.ts                 |  2 +
 5 files changed, 60 insertions(+), 13 deletions(-)

diff --git a/src/main/github.ts b/src/main/github.ts
index 92068db0..fea61abf 100644
--- a/src/main/github.ts
+++ b/src/main/github.ts
@@ -1386,6 +1386,7 @@ export async function syncPRReview(
     body?: string
     created_at?: string
     html_url?: string
+    in_reply_to_id?: number
     user?: { login?: string; avatar_url?: string }
   }
   const collect = (arr: ApiComment[]): void => {
@@ -1399,7 +1400,8 @@ export async function syncPRReview(
         authorAvatarUrl: rc.user?.avatar_url,
         createdAt: rc.created_at,
         htmlUrl: rc.html_url,
-        draft: false
+        draft: false,
+        inReplyToId: rc.in_reply_to_id
       })
     }
   }
@@ -1413,7 +1415,7 @@ export async function syncPRReview(
   // pull them via GraphQL where originalLine is populated.
   const draftQuery = await ghGraphQL(
     token,
-    'query($o:String!,$n:String!,$num:Int!){repository(owner:$o,name:$n){pullRequest(number:$num){reviews(first:20,states:[PENDING]){nodes{comments(first:100){nodes{databaseId path line originalLine body createdAt url author{login avatarUrl}}}}}}}}',
+    'query($o:String!,$n:String!,$num:Int!){repository(owner:$o,name:$n){pullRequest(number:$num){reviews(first:20,states:[PENDING]){nodes{comments(first:100){nodes{databaseId path line originalLine body createdAt url replyTo{databaseId} author{login avatarUrl}}}}}}}}',
     { o: owner, n: repo, num: prNumber }
   )
   if (draftQuery.ok) {
@@ -1425,6 +1427,7 @@ export async function syncPRReview(
       body?: string
       createdAt?: string
       url?: string
+      replyTo?: { databaseId?: number }
       author?: { login?: string; avatarUrl?: string }
     }
     const reviews =
@@ -1447,7 +1450,8 @@ export async function syncPRReview(
           authorAvatarUrl: c.author?.avatarUrl,
           createdAt: c.createdAt,
           htmlUrl: c.url,
-          draft: true
+          draft: true,
+          inReplyToId: c.replyTo?.databaseId
         })
       }
     }
diff --git a/src/renderer/components/ReviewDiffPane.tsx b/src/renderer/components/ReviewDiffPane.tsx
index dece03f1..3bdaad89 100644
--- a/src/renderer/components/ReviewDiffPane.tsx
+++ b/src/renderer/components/ReviewDiffPane.tsx
@@ -129,7 +129,6 @@ function InlineComment({
         borderRadius: '0 6px 6px 0',
         background: bg,
         boxShadow: '0 2px 10px rgba(0, 0, 0, 0.4)',
-        margin: '4px 0',
         maxWidth: '760px',
         cursor: collapsible ? 'pointer' : 'default'
       }}
@@ -269,6 +268,28 @@ function InlineComment({
   )
 }
 
+/** A comment thread: the root comment followed by its replies, each inset
+ *  and touching the one above so the reply relationship reads visually. */
+function CommentThread({
+  thread,
+  onDelete,
+  forceExpanded
+}: {
+  thread: ReviewComment[]
+  onDelete: (id: string) => void
+  forceExpanded?: boolean
+}): JSX.Element {
+  return (
+    <div style={{ margin: '4px 0', display: 'flex', flexDirection: 'column' }}>
+      {thread.map((c, i) => (
+        <div key={c.id} style={{ marginLeft: i === 0 ? 0 : 16, minWidth: 0 }}>
+          <InlineComment comment={c} onDelete={() => onDelete(c.id)} forceExpanded={forceExpanded} />
+        </div>
+      ))}
+    </div>
+  )
+}
+
 function InlineCommentInput({
   lineNumber,
   onSubmit,
@@ -480,16 +501,34 @@ export function ReviewDiffPane({
     const modifiedEd = editor.getModifiedEditor()
     const newZones: ViewZoneEntry[] = []
 
-    // Collect all items to render: existing comments + the input (if active)
+    // Collect all items to render: comment threads + the input (if active).
     interface ZoneItem {
       type: 'comment' | 'input'
       lineNumber: number
-      comment?: ReviewComment
+      thread?: ReviewComment[]
     }
     const items: ZoneItem[] = []
 
+    // Group comments into threads: a reply keys to its parent's remoteId, a
+    // root keys to its own. So a root and its replies share a thread.
+    const threadMap = new Map<string, ReviewComment[]>()
     for (const c of comments) {
-      items.push({ type: 'comment', lineNumber: c.lineNumber, comment: c })
+      const rootId = c.inReplyToId ?? c.remoteId
+      const key = rootId !== undefined ? `id:${rootId}` : `local:${c.id}`
+      const arr = threadMap.get(key)
+      if (arr) arr.push(c)
+      else threadMap.set(key, [c])
+    }
+    const timeOf = (c: ReviewComment): number =>
+      c.createdAt ? Date.parse(c.createdAt) : c.timestamp
+    for (const thread of threadMap.values()) {
+      // Root first (no inReplyToId), then replies oldest→newest.
+      thread.sort((a, b) => {
+        const ar = a.inReplyToId === undefined ? 0 : 1
+        const br = b.inReplyToId === undefined ? 0 : 1
+        return ar !== br ? ar - br : timeOf(a) - timeOf(b)
+      })
+      items.push({ type: 'comment', lineNumber: thread[0].lineNumber, thread })
     }
     if (commentLine !== null) {
       items.push({ type: 'input', lineNumber: commentLine })
@@ -526,12 +565,11 @@ export function ReviewDiffPane({
         const zoneId = accessor.addZone(zone)
 
         const root = createRoot(stickyWrapper)
-        if (item.type === 'comment' && item.comment) {
-          const c = item.comment
+        if (item.type === 'comment' && item.thread) {
           root.render(
-            <InlineComment
-              comment={c}
-              onDelete={() => onDeleteComment(c.id)}
+            <CommentThread
+              thread={item.thread}
+              onDelete={(id) => onDeleteComment(id)}
               forceExpanded={expandAll}
             />
           )
diff --git a/src/renderer/components/ReviewFileTree.tsx b/src/renderer/components/ReviewFileTree.tsx
index d16465eb..9b3822e4 100644
--- a/src/renderer/components/ReviewFileTree.tsx
+++ b/src/renderer/components/ReviewFileTree.tsx
@@ -20,6 +20,8 @@ export interface ReviewComment {
   htmlUrl?: string
   /** True for a comment on an unsubmitted (pending) review. */
   draft?: boolean
+  /** remoteId of the comment this replies to (thread root), if any. */
+  inReplyToId?: number
 }
 
 interface ReviewFileTreeProps {
diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index 5f089923..41fd8428 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -293,7 +293,8 @@ export function ReviewPane({
             authorAvatarUrl: c.authorAvatarUrl,
             createdAt: c.createdAt,
             htmlUrl: c.htmlUrl,
-            draft: c.draft
+            draft: c.draft,
+            inReplyToId: c.inReplyToId
           }))
         )
         // Reflect the merged viewed state (local ∪ GitHub) so files viewed
diff --git a/src/shared/github-types.ts b/src/shared/github-types.ts
index 419f564d..15e444d8 100644
--- a/src/shared/github-types.ts
+++ b/src/shared/github-types.ts
@@ -46,6 +46,8 @@ export interface ReviewSyncComment {
   htmlUrl?: string
   /** True for a comment on an unsubmitted (pending) review. */
   draft?: boolean
+  /** remoteId of the comment this one replies to (thread root), if any. */
+  inReplyToId?: number
 }
 
 export interface ReviewSyncInput {

From f73257fc0dc753b486ae077be1afa704f28bf5d4 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Mon, 1 Jun 2026 09:00:37 -0400
Subject: [PATCH 12/63] review: reply to comments + resolve threads
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reply: a thread footer has a Reply control (lucide Reply) that opens a
textarea; submitting creates a local reply (inReplyToId = thread root) that
renders inset in the thread and, on sync, posts via REST in_reply_to.

Resolve: non-draft threads show a Resolve control (lucide CheckCheck) that
queues the thread's node id; the next sync calls resolveReviewThread. We
never unresolve — resolved state always comes from GitHub (pulled via
reviewThreads.isResolved), and resolved threads render dimmed with a
"Resolved" label. Carries threadId/resolved through ReviewSync*/
ReviewComment and resolveThreadIds through the sync input.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/main/github.ts                         |  87 +++++++++-
 src/renderer/components/ReviewDiffPane.tsx | 176 ++++++++++++++++++++-
 src/renderer/components/ReviewFileTree.tsx |   4 +
 src/renderer/components/ReviewPane.tsx     |  47 +++++-
 src/shared/github-types.ts                 |   6 +
 5 files changed, 310 insertions(+), 10 deletions(-)

diff --git a/src/main/github.ts b/src/main/github.ts
index fea61abf..af6bc6f5 100644
--- a/src/main/github.ts
+++ b/src/main/github.ts
@@ -1291,7 +1291,9 @@ export async function syncPRReview(
   // 3. Push un-synced line comments as drafts on the pending review.
   const toPush = input.pullOnly
     ? []
-    : input.comments.filter((c) => c.remoteId === undefined && c.lineNumber > 0)
+    : input.comments.filter(
+        (c) => c.remoteId === undefined && c.lineNumber > 0 && c.inReplyToId === undefined
+      )
   let pushed = 0
   let failed = 0
   if (toPush.length > 0) {
@@ -1335,6 +1337,43 @@ export async function syncPRReview(
     }
   }
 
+  // 3b. Push replies. A reply targets an existing comment (its inReplyToId),
+  //     so it posts directly via REST in_reply_to (published immediately).
+  if (!input.pullOnly) {
+    const replies = input.comments.filter(
+      (c) => c.remoteId === undefined && c.inReplyToId !== undefined
+    )
+    for (const r of replies) {
+      try {
+        const res = await ghRequest(token, `${base}/comments`, 'POST', {
+          body: r.body,
+          in_reply_to: r.inReplyToId
+        })
+        if (res.ok) pushed++
+        else {
+          failed++
+          const msg = (res.json as { message?: string } | null)?.message ?? ''
+          log('github', `reply rejected (in_reply_to ${r.inReplyToId}) HTTP ${res.status} ${msg}`)
+        }
+      } catch (err) {
+        failed++
+        log('github', 'reply post error', formatErr(err))
+      }
+    }
+  }
+
+  // 3c. Resolve threads the user asked to resolve. Never unresolve.
+  if (!input.pullOnly && input.resolveThreadIds && input.resolveThreadIds.length > 0) {
+    for (const threadId of input.resolveThreadIds) {
+      const r = await ghGraphQL(
+        token,
+        'mutation($id:ID!){resolveReviewThread(input:{threadId:$id}){thread{id}}}',
+        { id: threadId }
+      )
+      if (!r.ok) log('github', `resolve thread failed ${threadId}: ${r.error}`)
+    }
+  }
+
   // 4. Push viewed state — only MARK locally-reviewed files. Never unmark:
   //    a file viewed on GitHub (but not locally) must not get cleared.
   //    Skipped on a pull-only sync.
@@ -1351,6 +1390,41 @@ export async function syncPRReview(
     }
   }
 
+  // 4c. Pull review threads → thread node id + resolved state per comment.
+  const threadInfo = new Map<number, { threadId: string; resolved: boolean }>()
+  const threadsQuery = await ghGraphQL(
+    token,
+    'query($o:String!,$n:String!,$num:Int!){repository(owner:$o,name:$n){pullRequest(number:$num){reviewThreads(first:100){nodes{id isResolved comments(first:100){nodes{databaseId}}}}}}}',
+    { o: owner, n: repo, num: prNumber }
+  )
+  if (threadsQuery.ok) {
+    const nodes =
+      (
+        threadsQuery.data as {
+          repository?: {
+            pullRequest?: {
+              reviewThreads?: {
+                nodes?: Array<{
+                  id: string
+                  isResolved: boolean
+                  comments?: { nodes?: Array<{ databaseId?: number }> }
+                }>
+              }
+            }
+          }
+        }
+      )?.repository?.pullRequest?.reviewThreads?.nodes ?? []
+    for (const t of nodes) {
+      for (const c of t.comments?.nodes ?? []) {
+        if (typeof c.databaseId === 'number') {
+          threadInfo.set(c.databaseId, { threadId: t.id, resolved: t.isResolved })
+        }
+      }
+    }
+  } else {
+    log('github', `review threads query failed: ${threadsQuery.error}`)
+  }
+
   // 4b. Pull GitHub's viewed state and union it with the local set, so files
   //     viewed on GitHub stay viewed (and vice-versa). Viewed state is
   //     additive — un-viewing isn't propagated.
@@ -1472,6 +1546,17 @@ export async function syncPRReview(
     }
   }
 
+  // Attach thread node id + resolved state to each pulled comment.
+  for (const p of pulled) {
+    if (p.remoteId !== undefined) {
+      const ti = threadInfo.get(p.remoteId)
+      if (ti) {
+        p.threadId = ti.threadId
+        p.resolved = ti.resolved
+      }
+    }
+  }
+
   // Collapse identical duplicates (e.g. drafts accidentally pushed twice by
   // earlier syncs) so they don't pile up. Keyed on file+line+body+author so
   // distinct reviewers' identical text isn't merged.
diff --git a/src/renderer/components/ReviewDiffPane.tsx b/src/renderer/components/ReviewDiffPane.tsx
index 3bdaad89..a415d778 100644
--- a/src/renderer/components/ReviewDiffPane.tsx
+++ b/src/renderer/components/ReviewDiffPane.tsx
@@ -5,7 +5,7 @@ import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import rehypeRaw from 'rehype-raw'
 import rehypeSanitize from 'rehype-sanitize'
-import { ArrowRightFromLine, Check, FoldVertical, MessagesSquare, UnfoldVertical, WrapText } from 'lucide-react'
+import { ArrowRightFromLine, Check, CheckCheck, FoldVertical, MessagesSquare, Reply, UnfoldVertical, WrapText } from 'lucide-react'
 import type { FileDiffSides, ChangedFile } from '../types'
 import type { ReviewComment } from './ReviewFileTree'
 import { MonacoDiffEditor } from './MonacoDiffEditor'
@@ -39,6 +39,13 @@ interface ReviewDiffPaneProps {
   onDeleteComment: (id: string) => void
   wordWrap: boolean
   onWordWrapChange: (next: boolean) => void
+  onAddReply: (
+    root: { filePath: string; lineNumber: number; remoteId: number },
+    body: string
+  ) => void
+  onResolveThread: (threadId: string) => void
+  /** Thread ids queued to resolve on the next sync. */
+  pendingResolve: ReadonlySet<string>
 }
 
 const STATUS_LABEL: Record<ChangedFile['status'], string> = {
@@ -269,23 +276,174 @@ function InlineComment({
 }
 
 /** A comment thread: the root comment followed by its replies, each inset
- *  and touching the one above so the reply relationship reads visually. */
+ *  and touching the one above so the reply relationship reads visually. A
+ *  footer holds the reply field and resolve control. */
 function CommentThread({
   thread,
   onDelete,
-  forceExpanded
+  forceExpanded,
+  onAddReply,
+  onResolveThread,
+  pendingResolve
 }: {
   thread: ReviewComment[]
   onDelete: (id: string) => void
   forceExpanded?: boolean
+  onAddReply: (
+    root: { filePath: string; lineNumber: number; remoteId: number },
+    body: string
+  ) => void
+  onResolveThread: (threadId: string) => void
+  pendingResolve: ReadonlySet<string>
 }): JSX.Element {
+  const root = thread[0]
+  const [replying, setReplying] = useState(false)
+  const [replyBody, setReplyBody] = useState('')
+  const replyRef = useRef<HTMLTextAreaElement>(null)
+  useEffect(() => {
+    if (replying) replyRef.current?.focus()
+  }, [replying])
+
+  const canReply = root.remoteId !== undefined
+  const resolved = thread.some((c) => c.resolved)
+  const resolving = !!root.threadId && pendingResolve.has(root.threadId)
+  const canResolve = !!root.threadId && !resolved && !root.draft
+
+  const submitReply = (): void => {
+    const body = replyBody.trim()
+    if (!body || root.remoteId === undefined) return
+    onAddReply({ filePath: root.filePath, lineNumber: root.lineNumber, remoteId: root.remoteId }, body)
+    setReplyBody('')
+    setReplying(false)
+  }
+
   return (
-    <div style={{ margin: '4px 0', display: 'flex', flexDirection: 'column' }}>
+    <div
+      style={{ margin: '4px 0', display: 'flex', flexDirection: 'column', opacity: resolved ? 0.6 : 1 }}
+    >
       {thread.map((c, i) => (
         <div key={c.id} style={{ marginLeft: i === 0 ? 0 : 16, minWidth: 0 }}>
           <InlineComment comment={c} onDelete={() => onDelete(c.id)} forceExpanded={forceExpanded} />
         </div>
       ))}
+
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '10px',
+          marginTop: '4px',
+          marginLeft: thread.length > 1 ? 16 : 0,
+          fontSize: '11px'
+        }}
+      >
+        {canReply && !replying && (
+          <button
+            onClick={() => setReplying(true)}
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: '4px',
+              background: 'none',
+              border: 'none',
+              padding: 0,
+              color: 'var(--color-faint)',
+              cursor: 'pointer'
+            }}
+          >
+            <Reply size={12} /> Reply
+          </button>
+        )}
+        {resolved ? (
+          <span style={{ display: 'inline-flex', alignItems: 'center', gap: '4px', color: 'var(--color-success)' }}>
+            <CheckCheck size={12} /> Resolved
+          </span>
+        ) : resolving ? (
+          <span style={{ color: 'var(--color-faint)' }}>Resolving on next sync…</span>
+        ) : canResolve ? (
+          <button
+            onClick={() => root.threadId && onResolveThread(root.threadId)}
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: '4px',
+              background: 'none',
+              border: 'none',
+              padding: 0,
+              color: 'var(--color-faint)',
+              cursor: 'pointer'
+            }}
+          >
+            <CheckCheck size={12} /> Resolve
+          </button>
+        ) : null}
+      </div>
+
+      {replying && (
+        <div style={{ marginTop: '4px', marginLeft: thread.length > 1 ? 16 : 0, maxWidth: '760px' }}>
+          <textarea
+            ref={replyRef}
+            value={replyBody}
+            onChange={(e) => setReplyBody(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+                e.preventDefault()
+                submitReply()
+              }
+              if (e.key === 'Escape') {
+                e.preventDefault()
+                setReplying(false)
+              }
+              e.stopPropagation()
+            }}
+            placeholder="Reply…"
+            rows={2}
+            style={{
+              width: '100%',
+              background: 'var(--color-surface)',
+              color: 'var(--color-fg)',
+              fontSize: '12px',
+              borderRadius: '4px',
+              border: '1px solid var(--color-border)',
+              padding: '6px 8px',
+              resize: 'none',
+              outline: 'none',
+              fontFamily: 'inherit'
+            }}
+          />
+          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '6px', marginTop: '4px' }}>
+            <button
+              onClick={() => setReplying(false)}
+              style={{
+                fontSize: '11px',
+                padding: '2px 8px',
+                background: 'none',
+                border: 'none',
+                color: 'var(--color-faint)',
+                cursor: 'pointer'
+              }}
+            >
+              Cancel
+            </button>
+            <button
+              onClick={submitReply}
+              disabled={!replyBody.trim()}
+              style={{
+                fontSize: '11px',
+                padding: '2px 8px',
+                borderRadius: '4px',
+                background: replyBody.trim() ? 'var(--color-accent)' : 'var(--color-border)',
+                color: 'var(--color-fg)',
+                border: 'none',
+                cursor: replyBody.trim() ? 'pointer' : 'default',
+                opacity: replyBody.trim() ? 1 : 0.4
+              }}
+            >
+              Reply
+            </button>
+          </div>
+        </div>
+      )}
     </div>
   )
 }
@@ -418,7 +576,10 @@ export function ReviewDiffPane({
   onAddComment,
   onDeleteComment,
   wordWrap,
-  onWordWrapChange
+  onWordWrapChange,
+  onAddReply,
+  onResolveThread,
+  pendingResolve
 }: ReviewDiffPaneProps): JSX.Element {
   const backend = useBackend()
   const settings = useSettings()
@@ -571,6 +732,9 @@ export function ReviewDiffPane({
               thread={item.thread}
               onDelete={(id) => onDeleteComment(id)}
               forceExpanded={expandAll}
+              onAddReply={onAddReply}
+              onResolveThread={onResolveThread}
+              pendingResolve={pendingResolve}
             />
           )
         } else if (item.type === 'input') {
@@ -608,7 +772,7 @@ export function ReviewDiffPane({
     })
 
     viewZonesRef.current = newZones
-  }, [comments, commentLine, editorNonce, expandAll, clearViewZones, onAddComment, onDeleteComment])
+  }, [comments, commentLine, editorNonce, expandAll, clearViewZones, onAddComment, onDeleteComment, onAddReply, onResolveThread, pendingResolve])
 
   // Clean up view zones on unmount
   useEffect(() => {
diff --git a/src/renderer/components/ReviewFileTree.tsx b/src/renderer/components/ReviewFileTree.tsx
index 9b3822e4..5f601901 100644
--- a/src/renderer/components/ReviewFileTree.tsx
+++ b/src/renderer/components/ReviewFileTree.tsx
@@ -22,6 +22,10 @@ export interface ReviewComment {
   draft?: boolean
   /** remoteId of the comment this replies to (thread root), if any. */
   inReplyToId?: number
+  /** GraphQL node id of the review thread this comment belongs to. */
+  threadId?: string
+  /** True when the thread is resolved on GitHub. */
+  resolved?: boolean
 }
 
 interface ReviewFileTreeProps {
diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index 41fd8428..e4fc781f 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -223,6 +223,37 @@ export function ReviewPane({
     setComments((prev) => prev.filter((c) => c.id !== id))
   }, [])
 
+  // A reply targets a thread root by its GitHub id, on the root's file+line.
+  const handleAddReply = useCallback(
+    (root: { filePath: string; lineNumber: number; remoteId: number }, body: string) => {
+      setComments((prev) => [
+        ...prev,
+        {
+          id: `comment-${++commentIdCounter}`,
+          filePath: root.filePath,
+          lineNumber: root.lineNumber,
+          body,
+          timestamp: Date.now(),
+          inReplyToId: root.remoteId,
+          draft: true
+        }
+      ])
+    },
+    []
+  )
+
+  // Threads the user has asked to resolve; sent on the next sync, then
+  // cleared (GitHub's resolved state comes back via the pull).
+  const [pendingResolve, setPendingResolve] = useState<Set<string>>(new Set())
+  const handleResolveThread = useCallback((threadId: string) => {
+    setPendingResolve((prev) => {
+      if (prev.has(threadId)) return prev
+      const next = new Set(prev)
+      next.add(threadId)
+      return next
+    })
+  }, [])
+
   const formatComments = useCallback((): string => {
     if (comments.length === 0) return ''
     const lines = ['Review feedback on your changes:', '']
@@ -270,10 +301,12 @@ export function ReviewPane({
             lineNumber: c.lineNumber,
             body: c.body,
             remoteId: c.remoteId,
-            author: c.author
+            author: c.author,
+            inReplyToId: c.inReplyToId
           })),
           reviewedFiles: [...reviewedFiles],
           files: files.map((f) => f.path),
+          resolveThreadIds: pullOnly ? [] : [...pendingResolve],
           pullOnly
         })
         if (!result.ok) {
@@ -294,12 +327,17 @@ export function ReviewPane({
             createdAt: c.createdAt,
             htmlUrl: c.htmlUrl,
             draft: c.draft,
-            inReplyToId: c.inReplyToId
+            inReplyToId: c.inReplyToId,
+            threadId: c.threadId,
+            resolved: c.resolved
           }))
         )
         // Reflect the merged viewed state (local ∪ GitHub) so files viewed
         // on GitHub show as reviewed here too.
         setReviewedFiles(new Set(result.reviewedFiles))
+        // Resolve requests were sent; GitHub's resolved state is now in the
+        // pulled comments, so clear the pending set.
+        if (!pullOnly) setPendingResolve(new Set())
         setSyncState(result.failed > 0 ? 'error' : 'ok')
         setSyncDetail(
           pullOnly
@@ -313,7 +351,7 @@ export function ReviewPane({
         setSyncDetail(err instanceof Error ? err.message : 'Sync failed')
       }
     },
-    [syncing, prNumber, isWholeBranch, backend, worktreePath, comments, reviewedFiles, files]
+    [syncing, prNumber, isWholeBranch, backend, worktreePath, comments, reviewedFiles, files, pendingResolve]
   )
 
   const handleSync = useCallback(() => void runSync(false), [runSync])
@@ -574,6 +612,9 @@ export function ReviewPane({
             onDeleteComment={handleDeleteComment}
             wordWrap={wordWrap}
             onWordWrapChange={setWordWrap}
+            onAddReply={handleAddReply}
+            onResolveThread={handleResolveThread}
+            pendingResolve={pendingResolve}
           />
         </div>
       </div>
diff --git a/src/shared/github-types.ts b/src/shared/github-types.ts
index 15e444d8..3621fd87 100644
--- a/src/shared/github-types.ts
+++ b/src/shared/github-types.ts
@@ -48,12 +48,18 @@ export interface ReviewSyncComment {
   draft?: boolean
   /** remoteId of the comment this one replies to (thread root), if any. */
   inReplyToId?: number
+  /** GraphQL node id of the review thread this comment belongs to. */
+  threadId?: string
+  /** True when the thread is resolved on GitHub. */
+  resolved?: boolean
 }
 
 export interface ReviewSyncInput {
   comments: ReviewSyncComment[]
   reviewedFiles: string[]
   files: string[]
+  /** Review-thread node ids to resolve on GitHub this sync (never unresolve). */
+  resolveThreadIds?: string[]
   /** Pull only — fetch PR comments without pushing local comments or viewed
    *  state. Used by the auto-sync on review open so it can't clobber GitHub
    *  state from an empty local review. */

From 53c5b536ba1f03768d3d9d6ad40aea0ec2694d61 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Mon, 1 Jun 2026 09:11:21 -0400
Subject: [PATCH 13/63] =?UTF-8?q?review:=20rework=20nav=20shortcuts=20?=
 =?UTF-8?q?=E2=80=94=20unreviewed=20on=20Shift+J/K,=20]/[=20for=20comments?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

j/k (↑/↓) stay as next/previous file. Shift+J / Shift+↓ now jump to the
next unreviewed file (Shift+K / Shift+↑ previous). ] / [ are repurposed to
cycle the next/previous comment thread in the current file (reveals the
line via onRevealLine). Shortcuts popup updated.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/renderer/components/ReviewFileTree.tsx | 44 +++++++++++++++++++---
 src/renderer/components/ReviewPane.tsx     |  7 +++-
 2 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/ReviewFileTree.tsx b/src/renderer/components/ReviewFileTree.tsx
index 5f601901..77fff06c 100644
--- a/src/renderer/components/ReviewFileTree.tsx
+++ b/src/renderer/components/ReviewFileTree.tsx
@@ -45,6 +45,8 @@ interface ReviewFileTreeProps {
   onSetSideBySide: (sideBySide: boolean) => void
   /** ? toggles the review shortcuts popup. */
   onShowShortcuts: () => void
+  /** Scroll the diff to a line — used by ] / [ comment navigation. */
+  onRevealLine: (filePath: string, line: number) => void
   /** True when the review tab is the active/visible tab — the keyboard
    *  shortcuts no-op otherwise so a background review tab doesn't react. */
   active?: boolean
@@ -179,6 +181,7 @@ export function ReviewFileTree({
   onToggleDir,
   onSetSideBySide,
   onShowShortcuts,
+  onRevealLine,
   active
 }: ReviewFileTreeProps): JSX.Element {
   const containerRef = useRef<HTMLDivElement>(null)
@@ -234,6 +237,31 @@ export function ReviewFileTree({
     [navigableFiles, reviewedFiles, selectedFile, onSelectFile]
   )
 
+  // ] / [ cycle through the comment threads in the current file. Roots only
+  // (replies share their parent's line), sorted by line.
+  const fileCommentLines = useMemo(() => {
+    if (!selectedFile) return [] as number[]
+    return comments
+      .filter((c) => c.filePath === selectedFile && c.inReplyToId === undefined)
+      .map((c) => c.lineNumber)
+      .sort((a, b) => a - b)
+  }, [comments, selectedFile])
+  const commentNavRef = useRef(-1)
+  useEffect(() => {
+    commentNavRef.current = -1
+  }, [selectedFile])
+  const navigateComment = useCallback(
+    (delta: number) => {
+      if (!selectedFile || fileCommentLines.length === 0) return
+      const n = fileCommentLines.length
+      const cur = commentNavRef.current
+      const idx = cur < 0 ? (delta > 0 ? 0 : n - 1) : (cur + delta + n) % n
+      commentNavRef.current = idx
+      onRevealLine(selectedFile, fileCommentLines[idx])
+    },
+    [selectedFile, fileCommentLines, onRevealLine]
+  )
+
   useEffect(() => {
     const handler = (e: KeyboardEvent): void => {
       if (!active) return
@@ -243,18 +271,24 @@ export function ReviewFileTree({
       ) {
         return
       }
-      if (e.key === 'j' || (e.key === 'ArrowDown' && !e.metaKey)) {
+      if (e.shiftKey && (e.key === 'J' || e.key === 'ArrowDown')) {
+        e.preventDefault()
+        navigateUnreviewed(1)
+      } else if (e.shiftKey && (e.key === 'K' || e.key === 'ArrowUp')) {
+        e.preventDefault()
+        navigateUnreviewed(-1)
+      } else if (!e.shiftKey && (e.key === 'j' || (e.key === 'ArrowDown' && !e.metaKey))) {
         e.preventDefault()
         navigateFile(1)
-      } else if (e.key === 'k' || (e.key === 'ArrowUp' && !e.metaKey)) {
+      } else if (!e.shiftKey && (e.key === 'k' || (e.key === 'ArrowUp' && !e.metaKey))) {
         e.preventDefault()
         navigateFile(-1)
       } else if (e.key === ']') {
         e.preventDefault()
-        navigateUnreviewed(1)
+        navigateComment(1)
       } else if (e.key === '[') {
         e.preventDefault()
-        navigateUnreviewed(-1)
+        navigateComment(-1)
       } else if (e.key === 's' && !e.metaKey && !e.ctrlKey) {
         e.preventDefault()
         onSetSideBySide(true)
@@ -286,7 +320,7 @@ export function ReviewFileTree({
     }
     window.addEventListener('keydown', handler)
     return () => window.removeEventListener('keydown', handler)
-  }, [active, navigateFile, navigateUnreviewed, selectedFile, navigableFiles, reviewedFiles, onSelectFile, onToggleReviewed, onSetSideBySide, onShowShortcuts])
+  }, [active, navigateFile, navigateUnreviewed, navigateComment, selectedFile, navigableFiles, reviewedFiles, onSelectFile, onToggleReviewed, onSetSideBySide, onShowShortcuts])
 
   return (
     <div ref={containerRef} className="flex flex-col h-full text-xs select-none">
diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index e4fc781f..3ea79c72 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -581,6 +581,9 @@ export function ReviewPane({
             onToggleDir={handleToggleDir}
             onSetSideBySide={setSideBySide}
             onShowShortcuts={() => setShowShortcuts((v) => !v)}
+            onRevealLine={(filePath, line) =>
+              setRevealTarget({ filePath, line, nonce: ++revealNonceRef.current })
+            }
             active={active}
           />
         </div>
@@ -931,7 +934,9 @@ function CommentDropdown({
 const REVIEW_SHORTCUTS: [string, string][] = [
   ['j / ↓', 'Next file'],
   ['k / ↑', 'Previous file'],
-  ['] / [', 'Next / previous unreviewed file'],
+  ['⇧J / ⇧↓', 'Next unreviewed file'],
+  ['⇧K / ⇧↑', 'Previous unreviewed file'],
+  ['] / [', 'Next / previous comment in file'],
   ['r', 'Mark file viewed / unviewed'],
   ['s / d', 'Side-by-side / unified diff'],
   ['c', 'Comment on hovered line (or file)'],

From 708861853cef2c9915b6bd51215440b49b9a628d Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Mon, 1 Jun 2026 09:12:40 -0400
Subject: [PATCH 14/63] review: truncate the diff header path from the start,
 with a full-path tooltip

The diff file header truncated the end of long paths (hiding the filename).
Switch to the RTL truncation trick so the start is cut and the filename
stays visible, and add a tooltip showing the full path.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/renderer/components/ReviewDiffPane.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/ReviewDiffPane.tsx b/src/renderer/components/ReviewDiffPane.tsx
index a415d778..65fb0fd7 100644
--- a/src/renderer/components/ReviewDiffPane.tsx
+++ b/src/renderer/components/ReviewDiffPane.tsx
@@ -879,7 +879,14 @@ export function ReviewDiffPane({
     <div className="flex flex-col h-full">
       {/* File header */}
       <div className="flex items-center gap-2 px-3 py-2 border-b border-border bg-panel shrink-0">
-        <span className="text-xs font-mono truncate flex-1">{file.path}</span>
+        <Tooltip label={<span className="font-mono">{file.path}</span>} side="top">
+          <span
+            className="text-xs font-mono truncate flex-1 min-w-0"
+            style={{ direction: 'rtl', textAlign: 'left' }}
+          >
+            <bdi>{file.path}</bdi>
+          </span>
+        </Tooltip>
 
         <span className={`text-xs ${STATUS_COLOR[file.status]}`}>
           {STATUS_LABEL[file.status]}

From 1ff9e75bbb972596136fc3429266b46492488935 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Mon, 1 Jun 2026 09:24:12 -0400
Subject: [PATCH 15/63] monaco: re-theme editors on light/dark switch

defineHarnessTheme() (which builds the Monaco theme from the CSS variables)
only ran once at boot, so open diff/file editors kept their original colors
when the app theme changed, and the base was hardcoded vs-dark (wrong for
light themes). Pick the base from the resolved background luminance, and
add a MutationObserver on :root data-theme/style that re-derives the theme
on change (setTheme re-applies to all editors).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/renderer/main.tsx        |  3 ++-
 src/renderer/monaco-setup.ts | 32 +++++++++++++++++++++++++++++++-
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/renderer/main.tsx b/src/renderer/main.tsx
index 6301175e..fa1ae447 100644
--- a/src/renderer/main.tsx
+++ b/src/renderer/main.tsx
@@ -4,7 +4,7 @@ import { createRoot } from 'react-dom/client'
 import App from './App'
 import { initStore } from './store'
 import { getBackend } from './backend'
-import { defineHarnessTheme } from './monaco-setup'
+import { defineHarnessTheme, watchHarnessTheme } from './monaco-setup'
 import { renderMetrics } from './render-metrics'
 import { ErrorBoundary } from './components/ErrorBoundary'
 import { LinuxWindowControls } from './components/LinuxWindowControls'
@@ -21,6 +21,7 @@ const onRender: ProfilerOnRenderCallback = (id, phase, actualDuration) => {
 initStore()
   .then(() => {
     defineHarnessTheme()
+    watchHarnessTheme()
     createRoot(document.getElementById('root')!).render(
       <ErrorBoundary label="app:root" showReload>
         <Profiler id="app" onRender={onRender}>
diff --git a/src/renderer/monaco-setup.ts b/src/renderer/monaco-setup.ts
index 94db4b98..58f3d840 100644
--- a/src/renderer/monaco-setup.ts
+++ b/src/renderer/monaco-setup.ts
@@ -134,6 +134,21 @@ function readVar(name: string, fallback: string): string {
   return v || fallback
 }
 
+/** Resolve a CSS color (hex/oklch/named/var) to its luminance and decide if
+ *  it reads as dark — used to pick Monaco's vs vs vs-dark base. */
+function isColorDark(color: string): boolean {
+  const probe = document.createElement('span')
+  probe.style.color = color
+  probe.style.display = 'none'
+  document.documentElement.appendChild(probe)
+  const rgb = getComputedStyle(probe).color
+  probe.remove()
+  const m = rgb.match(/\d+(\.\d+)?/g)
+  if (!m || m.length < 3) return true
+  const [r, g, b] = m.map(Number)
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b < 128
+}
+
 export function defineHarnessTheme(): void {
   const bg = readVar('--color-app', '#0b0d10')
   const panel = readVar('--color-panel', '#12151a')
@@ -141,9 +156,10 @@ export function defineHarnessTheme(): void {
   const muted = readVar('--color-muted', '#b0b0b0')
   const faint = readVar('--color-faint', '#6b7280')
   const border = readVar('--color-border', '#1f242c')
+  const dark = isColorDark(bg)
 
   monaco.editor.defineTheme('harness', {
-    base: 'vs-dark',
+    base: dark ? 'vs-dark' : 'vs',
     inherit: true,
     rules: [
       { token: '', foreground: fg.replace('#', '') }
@@ -176,6 +192,20 @@ export function defineHarnessTheme(): void {
   monaco.editor.setTheme('harness')
 }
 
+// Re-derive the Monaco theme whenever the app theme changes. theme-apply
+// mutates `data-theme` and inline custom-property styles on :root, so watch
+// both — same signal XTerminal re-themes on. Without this, open diff/file
+// editors keep their boot-time colors across a light/dark switch.
+let themeObserver: MutationObserver | null = null
+export function watchHarnessTheme(): void {
+  if (themeObserver) return
+  themeObserver = new MutationObserver(() => defineHarnessTheme())
+  themeObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['data-theme', 'style', 'class']
+  })
+}
+
 // Map common file extensions to Monaco language ids. Monaco ships with
 // grammars for all the common languages; we just need to pick the right
 // id so syntax highlighting kicks in.

From bf79492e4a0ee1b2a59591bed6399bd22d3a736c Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Mon, 1 Jun 2026 09:27:37 -0400
Subject: [PATCH 16/63] review: use on-accent text color for accent buttons
 (light-theme readable)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Send to Agent used text-fg on bg-accent, and the comment/reply submit
buttons used color:var(--color-fg) on the accent — unreadable in light
themes. Switch to text-app / var(--color-app) (the app-bg color), which
inverts cleanly against the accent in both light and dark, matching the
convention used by the other accent buttons.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/renderer/components/ReviewDiffPane.tsx | 4 ++--
 src/renderer/components/ReviewPane.tsx     | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/ReviewDiffPane.tsx b/src/renderer/components/ReviewDiffPane.tsx
index 65fb0fd7..2c556b09 100644
--- a/src/renderer/components/ReviewDiffPane.tsx
+++ b/src/renderer/components/ReviewDiffPane.tsx
@@ -433,7 +433,7 @@ function CommentThread({
                 padding: '2px 8px',
                 borderRadius: '4px',
                 background: replyBody.trim() ? 'var(--color-accent)' : 'var(--color-border)',
-                color: 'var(--color-fg)',
+                color: replyBody.trim() ? 'var(--color-app)' : 'var(--color-faint)',
                 border: 'none',
                 cursor: replyBody.trim() ? 'pointer' : 'default',
                 opacity: replyBody.trim() ? 1 : 0.4
@@ -536,7 +536,7 @@ function InlineCommentInput({
             padding: '0.125rem 0.5rem',
             borderRadius: '0.25rem',
             background: body.trim() ? 'var(--color-accent)' : 'var(--color-border)',
-            color: 'var(--color-fg)',
+            color: body.trim() ? 'var(--color-app)' : 'var(--color-faint)',
             border: 'none',
             cursor: body.trim() ? 'pointer' : 'default',
             opacity: body.trim() ? 1 : 0.3
diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index 3ea79c72..9c6de38f 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -510,7 +510,7 @@ export function ReviewPane({
               <button
                 onClick={handleSendToAgent}
                 disabled={comments.length === 0 || !onSendToAgent}
-                className="flex items-center gap-1 px-2 py-1 rounded bg-accent text-fg text-xs font-medium hover:bg-accent/80 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-default"
+                className="flex items-center gap-1 px-2 py-1 rounded bg-accent text-app text-xs font-medium hover:bg-accent/80 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-default"
               >
                 <Send className="icon-xs" />
                 Send to Agent

From b6339c08f179164f86a150c967907f3fce176d82 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Mon, 1 Jun 2026 09:30:39 -0400
Subject: [PATCH 17/63] themes: add "Hub delight" light theme (GitHub Light)

Register a GitHub-Light-based light theme: white app bg, #f6f8fa panels,
#24292e text, GitHub blue (#0366d6) accent, with Primer-ish success/
warning/danger. Adds the THEME_OPTIONS entry and the [data-theme=
"hub-delight"] CSS variable block; it shows up in the light-theme picker.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/renderer/styles.css | 21 +++++++++++++++++++++
 src/renderer/themes.ts  |  7 +++++++
 2 files changed, 28 insertions(+)

diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index 2a7ca434..b252f1f5 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -104,6 +104,27 @@
   --color-accent: #6c71c4;
 }
 
+/* GitHub Light ("Hub delight") */
+[data-theme="hub-delight"] {
+  --color-app: #ffffff;
+  --color-panel: #f6f8fa;
+  --color-panel-raised: #eaeef2;
+  --color-surface: #f6f8fa;
+  --color-surface-hover: #e7ecf0;
+  --color-border: #d0d7de;
+  --color-border-strong: #afb8c1;
+  --color-fg: #24292e;
+  --color-fg-bright: #1b1f24;
+  --color-muted: #57606a;
+  --color-dim: #6e7781;
+  --color-faint: #8c959f;
+  --color-success: #1a7f37;
+  --color-warning: #9a6700;
+  --color-danger: #d73a49;
+  --color-info: #0366d6;
+  --color-accent: #0366d6;
+}
+
 [data-theme="dracula"] {
   --color-app: #282a36;
   --color-panel: #2f3142;
diff --git a/src/renderer/themes.ts b/src/renderer/themes.ts
index b0cca7d9..b70678e9 100644
--- a/src/renderer/themes.ts
+++ b/src/renderer/themes.ts
@@ -72,6 +72,13 @@ export const THEME_OPTIONS: ThemeOption[] = [
     swatches: ['#fdf6e3', '#eee8d5', '#657b83', '#268bd2'],
     mode: 'light'
   },
+  {
+    id: 'hub-delight',
+    label: 'Hub delight',
+    description: 'GitHub Light — crisp white with the classic GitHub blue.',
+    swatches: ['#ffffff', '#eaeef2', '#24292e', '#0366d6'],
+    mode: 'light'
+  },
   {
     id: 'cyberfunk',
     label: 'Cyberfunk',

From 8a024f94b929a13e3db2c67aaf648a8b9349745d Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Mon, 1 Jun 2026 09:31:47 -0400
Subject: [PATCH 18/63] themes: capitalize label to "Hub Delight"

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/renderer/themes.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/themes.ts b/src/renderer/themes.ts
index b70678e9..d2221dcc 100644
--- a/src/renderer/themes.ts
+++ b/src/renderer/themes.ts
@@ -74,7 +74,7 @@ export const THEME_OPTIONS: ThemeOption[] = [
   },
   {
     id: 'hub-delight',
-    label: 'Hub delight',
+    label: 'Hub Delight',
     description: 'GitHub Light — crisp white with the classic GitHub blue.',
     swatches: ['#ffffff', '#eaeef2', '#24292e', '#0366d6'],
     mode: 'light'

From 50b5fa8a53e4d7ea1a91774ce5acb20e0093c582 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Mon, 1 Jun 2026 09:34:06 -0400
Subject: [PATCH 19/63] themes: reword Hub Delight description

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/renderer/themes.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/themes.ts b/src/renderer/themes.ts
index d2221dcc..551063e3 100644
--- a/src/renderer/themes.ts
+++ b/src/renderer/themes.ts
@@ -75,7 +75,7 @@ export const THEME_OPTIONS: ThemeOption[] = [
   {
     id: 'hub-delight',
     label: 'Hub Delight',
-    description: 'GitHub Light — crisp white with the classic GitHub blue.',
+    description: 'Crisp white, classic blue, recognizable.',
     swatches: ['#ffffff', '#eaeef2', '#24292e', '#0366d6'],
     mode: 'light'
   },

From 4e7a21e1abe064b70cdde590b32fecf42c6d2224 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Mon, 1 Jun 2026 09:42:58 -0400
Subject: [PATCH 20/63] review: batch comment-zone resizes to stop a layout
 storm on startup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each comment's ResizeObserver called changeViewZones(layoutZone) directly,
and that relayout nudged other comment wrappers, firing their observers —
an N×N cascade (worse with many comments) that hogged the main thread and
made the UI lag on startup. Funnel desired heights into a map and apply
them all in a single rAF/changeViewZones; the per-zone guard plus the batch
let heights settle in a frame or two instead of cascading. rAF + pending
map are cleared on zone teardown and unmount.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/renderer/components/ReviewDiffPane.tsx | 45 ++++++++++++++++++----
 1 file changed, 37 insertions(+), 8 deletions(-)

diff --git a/src/renderer/components/ReviewDiffPane.tsx b/src/renderer/components/ReviewDiffPane.tsx
index 2c556b09..69779db5 100644
--- a/src/renderer/components/ReviewDiffPane.tsx
+++ b/src/renderer/components/ReviewDiffPane.tsx
@@ -596,6 +596,31 @@ export function ReviewDiffPane({
   // Last diff line the mouse was over, for the `c` shortcut. null ⇒ not
   // over any line ⇒ file-level comment (line 0).
   const hoveredLineRef = useRef<number | null>(null)
+  // Comment ResizeObservers funnel their desired zone heights here; a single
+  // rAF applies them all in one changeViewZones. Without batching, each
+  // observer relayouts the editor, nudging other comment wrappers and firing
+  // their observers — an N×N cascade that freezes the renderer.
+  const pendingZoneHeightsRef = useRef(new Map<string, { zone: monaco.editor.IViewZone; h: number }>())
+  const layoutRafRef = useRef(0)
+  const flushZoneLayout = useCallback(() => {
+    if (layoutRafRef.current) return
+    layoutRafRef.current = requestAnimationFrame(() => {
+      layoutRafRef.current = 0
+      const pending = pendingZoneHeightsRef.current
+      const ed = editorRef.current
+      if (!ed || pending.size === 0) {
+        pending.clear()
+        return
+      }
+      ed.getModifiedEditor().changeViewZones((acc) => {
+        for (const [zoneId, { zone, h }] of pending) {
+          zone.heightInPx = h
+          acc.layoutZone(zoneId)
+        }
+      })
+      pending.clear()
+    })
+  }, [])
 
   useEffect(() => {
     if (!file) {
@@ -650,6 +675,11 @@ export function ReviewDiffPane({
       }
     })
     viewZonesRef.current = []
+    pendingZoneHeightsRef.current.clear()
+    if (layoutRafRef.current) {
+      cancelAnimationFrame(layoutRafRef.current)
+      layoutRafRef.current = 0
+    }
   }, [])
 
   // Sync view zones whenever comments or commentLine changes
@@ -751,18 +781,16 @@ export function ReviewDiffPane({
         }
 
         // Resize the comment zone to fit its rendered content so collapse /
-        // expand and markdown reflow don't clip. The observed height depends
-        // only on the comment content (not the zone height), so there's no
-        // feedback loop.
+        // expand and markdown reflow don't clip. Enqueue the new height and
+        // let the batched rAF apply all changes in one changeViewZones, so
+        // observers can't cascade into a layout storm.
         let resizeObserver: ResizeObserver | undefined
         if (item.type === 'comment') {
           resizeObserver = new ResizeObserver(() => {
-            const ed = editorRef.current
-            if (!ed) return
             const h = Math.ceil(stickyWrapper.scrollHeight) + 8
             if (!h || zone.heightInPx === h) return
-            zone.heightInPx = h
-            ed.getModifiedEditor().changeViewZones((acc) => acc.layoutZone(zoneId))
+            pendingZoneHeightsRef.current.set(zoneId, { zone, h })
+            flushZoneLayout()
           })
           resizeObserver.observe(stickyWrapper)
         }
@@ -772,7 +800,7 @@ export function ReviewDiffPane({
     })
 
     viewZonesRef.current = newZones
-  }, [comments, commentLine, editorNonce, expandAll, clearViewZones, onAddComment, onDeleteComment, onAddReply, onResolveThread, pendingResolve])
+  }, [comments, commentLine, editorNonce, expandAll, clearViewZones, flushZoneLayout, onAddComment, onDeleteComment, onAddReply, onResolveThread, pendingResolve])
 
   // Clean up view zones on unmount
   useEffect(() => {
@@ -783,6 +811,7 @@ export function ReviewDiffPane({
         queueMicrotask(() => z.root.unmount())
       }
       viewZonesRef.current = []
+      if (layoutRafRef.current) cancelAnimationFrame(layoutRafRef.current)
     }
   }, [])
 

From d4f5f6e82ad07612207858daa1e7886120555609 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Mon, 1 Jun 2026 09:54:57 -0400
Subject: [PATCH 21/63] settings: picking a theme switches mode so the click
 applies

The light/dark theme pickers are dimmed-but-clickable in the opposite mode,
so clicking a light theme while in Dark just set a preference and looked
like a no-op. Now selecting a theme also switches the mode to that theme's
mode (when in the opposite mode), so a click always takes effect. System
mode is left untouched.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/renderer/components/Settings.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/Settings.tsx b/src/renderer/components/Settings.tsx
index 50d60088..5c24e240 100644
--- a/src/renderer/components/Settings.tsx
+++ b/src/renderer/components/Settings.tsx
@@ -536,13 +536,19 @@ export function Settings({ onClose, onOpenGuide, onOpenMyWeek, initialSection }:
     })
   }, [uiScale, scrollToSection, scrollToSubSection])
 
+  // Picking a theme also switches the mode to that theme's mode when we're
+  // in the opposite mode, so a click always takes effect (otherwise picking
+  // a light theme while in Dark just sets a preference and looks like a
+  // no-op). System mode is left alone — that's an explicit OS-follows choice.
   const handleSelectLightTheme = useCallback((id: string) => {
     void backend.setThemeLight(id)
-  }, [backend])
+    if (themeMode === 'dark') void backend.setThemeMode('light')
+  }, [backend, themeMode])
 
   const handleSelectDarkTheme = useCallback((id: string) => {
     void backend.setThemeDark(id)
-  }, [backend])
+    if (themeMode === 'light') void backend.setThemeMode('dark')
+  }, [backend, themeMode])
 
   const handleTerminalFontFamilyChange = useCallback((value: string) => {
     void backend.setTerminalFontFamily(value)

From c94a6f44f92447931df8b315c8189df991d08e17 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Mon, 1 Jun 2026 10:03:46 -0400
Subject: [PATCH 22/63] fix(themes): add hub-delight to main AVAILABLE_THEMES
 allowlist

The light-theme setter validates the requested id against
AVAILABLE_THEMES (main/persistence.ts) and silently returns false +
never dispatches when it's not listed. hub-delight was only added to
the renderer THEME_OPTIONS, so selecting it in light mode did nothing.
Add it to AVAILABLE_THEMES and THEME_APP_BG (#ffffff) so validation
passes and the first-paint window bg matches.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/main/persistence.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/main/persistence.ts b/src/main/persistence.ts
index 58489380..b17caa92 100644
--- a/src/main/persistence.ts
+++ b/src/main/persistence.ts
@@ -278,6 +278,7 @@ export const AVAILABLE_THEMES = [
   'one-dark',
   'solarized-dark',
   'solarized-light',
+  'hub-delight',
   'cyberfunk'
 ] as const
 
@@ -293,6 +294,7 @@ export const THEME_APP_BG: Record<string, string> = {
   'one-dark': '#282c34',
   'solarized-dark': '#002b36',
   'solarized-light': '#fdf6e3',
+  'hub-delight': '#ffffff',
   'cyberfunk': '#000000'
 }
 

From 29dfa5f1f04456793f1c40ddf4ae9c07c4c61de5 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Tue, 2 Jun 2026 14:16:11 -0400
Subject: [PATCH 23/63] feat(review): separate light/dark theme for the diff
 editors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a `reviewDiffMode` setting ('match' | 'light' | 'dark', default
'match') that pins the review tab's Monaco editors to the configured
light or dark Harness palette independent of the app theme — so the
chrome can stay dark/system while the diffs render light.

Monaco's theme is global, so this redefines the single 'harness' theme
from a hidden [data-theme] probe carrying the target palette; the
non-Monaco chrome and terminals are unaffected. A cycling appearance
button (Monitor/Sun/Moon) sits next to the whitespace toggle in the
review toolbar.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/main/build-initial-state.ts        |  4 ++
 src/main/index.ts                      | 12 +++++
 src/main/persistence.ts                |  3 ++
 src/renderer/App.tsx                   |  7 +++
 src/renderer/build-backend.ts          |  2 +
 src/renderer/components/ReviewPane.tsx | 37 ++++++++++++++-
 src/renderer/monaco-setup.ts           | 62 ++++++++++++++++++++++----
 src/renderer/types.ts                  |  1 +
 src/shared/state/settings.test.ts      | 10 +++++
 src/shared/state/settings.ts           | 14 ++++++
 10 files changed, 141 insertions(+), 11 deletions(-)

diff --git a/src/main/build-initial-state.ts b/src/main/build-initial-state.ts
index edff98f7..341d29c6 100644
--- a/src/main/build-initial-state.ts
+++ b/src/main/build-initial-state.ts
@@ -80,6 +80,10 @@ export function buildInitialAppState(
           : 'system',
       themeLight: config.themeLight || DEFAULT_LIGHT_THEME,
       themeDark: config.themeDark || DEFAULT_DARK_THEME,
+      reviewDiffMode:
+        config.reviewDiffMode === 'light' || config.reviewDiffMode === 'dark'
+          ? config.reviewDiffMode
+          : 'match',
       hotkeys: config.hotkeys || null,
       defaultAgent: config.defaultAgent || 'claude',
       claudeCommand: config.claudeCommand || DEFAULT_CLAUDE_COMMAND,
diff --git a/src/main/index.ts b/src/main/index.ts
index 0ef12703..0436e7ff 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -2115,6 +2115,18 @@ function registerIpcHandlers(): void {
     return true
   })
 
+  transport.onRequest('config:setReviewDiffMode', (_ctx, mode: string) => {
+    if (mode !== 'match' && mode !== 'light' && mode !== 'dark') return false
+    if (mode === 'match') {
+      delete config.reviewDiffMode
+    } else {
+      config.reviewDiffMode = mode
+    }
+    saveConfig(config)
+    store.dispatch({ type: 'settings/reviewDiffModeChanged', payload: mode })
+    return true
+  })
+
   // Accept built-in IDs (validated against AVAILABLE_THEMES) and any
   // currently-loaded custom theme id of the matching mode. Custom IDs
   // are filename-derived and not statically known, so the live slice is
diff --git a/src/main/persistence.ts b/src/main/persistence.ts
index b17caa92..36a4cfbd 100644
--- a/src/main/persistence.ts
+++ b/src/main/persistence.ts
@@ -103,6 +103,9 @@ export interface Config {
   themeLight?: string
   // Theme id used when `themeMode` resolves to 'dark'. Default 'dark'.
   themeDark?: string
+  // Appearance override for the review tab's code editors. Default 'match'
+  // (follow the app theme); 'light'/'dark' pin the diffs to that palette.
+  reviewDiffMode?: 'match' | 'light' | 'dark'
   // App-background hex the renderer last applied. Used at next boot to
   // pick the BrowserWindow background color so the first paint doesn't
   // flash. Written from the renderer via a fire-and-forget IPC after each
diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index 359b2236..83c29df9 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -13,6 +13,7 @@ import { SCALES, scaleSpec } from '../shared/state/settings'
 import { useActiveTheme } from './hooks/useActiveTheme'
 import { useHoldToQuit } from './hooks/useHoldToQuit'
 import { applyTheme, effectiveAppBg } from './theme-apply'
+import { setReviewDiffMode } from './monaco-setup'
 import { getBackend } from './backend'
 import { HotkeysProvider, Tooltip } from './components/Tooltip'
 import { Sidebar } from './components/Sidebar'
@@ -75,10 +76,16 @@ const TITLE_LEADING_PX = 80
 export default function App(): JSX.Element {
   const { isMobile } = useViewport()
   const active = useActiveTheme()
+  const { reviewDiffMode, themeLight, themeDark } = useSettings()
   useEffect(() => {
     applyTheme(active)
     getBackend().setLastEffectiveAppBg(effectiveAppBg(active))
   }, [active])
+  // Push the review-diff appearance override into Monaco. Runs after
+  // applyTheme so the 'match' path reads the freshly-applied :root palette.
+  useEffect(() => {
+    setReviewDiffMode(reviewDiffMode, themeLight, themeDark)
+  }, [reviewDiffMode, themeLight, themeDark, active])
   if (isMobile) return <MobileApp />
   return <DesktopApp />
 }
diff --git a/src/renderer/build-backend.ts b/src/renderer/build-backend.ts
index cc6c4657..1f0da4dc 100644
--- a/src/renderer/build-backend.ts
+++ b/src/renderer/build-backend.ts
@@ -293,6 +293,8 @@ export function buildBackend(
     setThemeMode: (mode: 'light' | 'dark' | 'system') => req('config:setThemeMode', mode),
     setThemeLight: (theme: string) => req('config:setThemeLight', theme),
     setThemeDark: (theme: string) => req('config:setThemeDark', theme),
+    setReviewDiffMode: (mode: 'match' | 'light' | 'dark') =>
+      req('config:setReviewDiffMode', mode),
     setLastEffectiveAppBg: (hex: string) => sig('config:setLastEffectiveAppBg', hex),
     reloadCustomThemes: () => req('config:reloadCustomThemes'),
     openThemesFolder: () => reqLocal('config:openThemesFolder'),
diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index 9c6de38f..d137458e 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
-import { Send, Clipboard, Check, MessageSquare, GitCommitHorizontal, ArrowUp, ChevronDown, Pilcrow, X, Keyboard, CloudSync, Loader2 } from 'lucide-react'
+import { Send, Clipboard, Check, MessageSquare, GitCommitHorizontal, ArrowUp, ChevronDown, Pilcrow, X, Keyboard, CloudSync, Loader2, Monitor, Sun, Moon } from 'lucide-react'
 import type { ChangedFile, BranchCommit } from '../types'
 import type { PRReview } from '../../shared/state/prs'
 import type { ReviewComment } from './ReviewFileTree'
@@ -13,7 +13,7 @@ import { ModeButton } from './DiffView'
 import { ResizeHandle } from './ResizeHandle'
 import { Tooltip } from './Tooltip'
 import { useBackend } from '../backend'
-import { usePrs } from '../store'
+import { usePrs, useSettings } from '../store'
 import { setReviewProgress, clearReviewProgress } from '../review-progress'
 import { useReviewFileRequest } from '../review-open-file'
 
@@ -42,6 +42,7 @@ export function ReviewPane({
   onSendToAgent
 }: ReviewPaneProps): JSX.Element {
   const backend = useBackend()
+  const { reviewDiffMode } = useSettings()
   const [commits, setCommits] = useState<BranchCommit[]>([])
   const [files, setFiles] = useState<ChangedFile[]>([])
   const [selectedFile, setSelectedFile] = useState<string | null>(null)
@@ -455,6 +456,38 @@ export function ReviewPane({
             </button>
           </Tooltip>
 
+          <Tooltip
+            label={
+              reviewDiffMode === 'match'
+                ? 'Diff theme: matches app — click for light'
+                : reviewDiffMode === 'light'
+                  ? 'Diff theme: light — click for dark'
+                  : 'Diff theme: dark — click to match app'
+            }
+          >
+            <button
+              onClick={() =>
+                backend.setReviewDiffMode(
+                  reviewDiffMode === 'match' ? 'light' : reviewDiffMode === 'light' ? 'dark' : 'match'
+                )
+              }
+              aria-label="Cycle diff theme"
+              className={`flex items-center shrink-0 px-1.5 py-1 rounded border text-xs cursor-pointer transition-colors ${
+                reviewDiffMode !== 'match'
+                  ? 'border-accent text-accent'
+                  : 'border-border text-faint hover:text-fg'
+              }`}
+            >
+              {reviewDiffMode === 'match' ? (
+                <Monitor className="icon-xs" />
+              ) : reviewDiffMode === 'light' ? (
+                <Sun className="icon-xs" />
+              ) : (
+                <Moon className="icon-xs" />
+              )}
+            </button>
+          </Tooltip>
+
           <div className="flex-1" />
 
           <div className="flex items-center gap-1.5 text-xs">
diff --git a/src/renderer/monaco-setup.ts b/src/renderer/monaco-setup.ts
index 58f3d840..0cab22e5 100644
--- a/src/renderer/monaco-setup.ts
+++ b/src/renderer/monaco-setup.ts
@@ -2,6 +2,7 @@
 // editor is constructed. Vite's ?worker suffix bundles each worker as a
 // standalone chunk and returns a Worker constructor.
 import * as monaco from 'monaco-editor'
+import { DEFAULT_LIGHT_THEME, DEFAULT_DARK_THEME } from '../shared/state/settings'
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
 import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
 import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
@@ -127,10 +128,10 @@ function configureTypescriptDefaults(): void {
 
 configureTypescriptDefaults()
 
-// Pull current Tailwind theme tokens from the document and build a Monaco
+// Pull current Tailwind theme tokens from a source element and build a Monaco
 // theme that tracks them. Called once at boot and on theme changes.
-function readVar(name: string, fallback: string): string {
-  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+function readVar(source: HTMLElement, name: string, fallback: string): string {
+  const v = getComputedStyle(source).getPropertyValue(name).trim()
   return v || fallback
 }
 
@@ -149,13 +150,56 @@ function isColorDark(color: string): boolean {
   return 0.2126 * r + 0.7152 * g + 0.0722 * b < 128
 }
 
+// Review-diff appearance override. 'match' (default) tracks the app theme by
+// reading `:root`; 'light'/'dark' pin the editors to the configured light/dark
+// palette so the diffs can differ from the app chrome. Monaco's theme is
+// global, so this redefines the single 'harness' theme — every Monaco surface
+// (diff + file viewers) follows it, while the non-Monaco chrome/terminals
+// keep the app theme.
+let reviewDiffMode: 'match' | 'light' | 'dark' = 'match'
+let lightThemeId = DEFAULT_LIGHT_THEME
+let darkThemeId = DEFAULT_DARK_THEME
+
+export function setReviewDiffMode(
+  mode: 'match' | 'light' | 'dark',
+  lightId: string,
+  darkId: string
+): void {
+  reviewDiffMode = mode
+  lightThemeId = lightId
+  darkThemeId = darkId
+  defineHarnessTheme()
+}
+
+// Resolve the element whose `--color-*` vars the Monaco theme reads. For
+// 'match' that's the live document root; for an override we mount a hidden
+// probe carrying the target theme's `[data-theme]` attribute — built-in
+// palettes are plain attribute-selector rules, so the probe gets the full
+// palette regardless of what the document root currently is.
+function withThemeSource<T>(use: (source: HTMLElement) => T): T {
+  if (reviewDiffMode === 'match') return use(document.documentElement)
+  const probe = document.createElement('div')
+  probe.dataset.theme = reviewDiffMode === 'light' ? lightThemeId : darkThemeId
+  probe.style.display = 'none'
+  document.documentElement.appendChild(probe)
+  try {
+    return use(probe)
+  } finally {
+    probe.remove()
+  }
+}
+
 export function defineHarnessTheme(): void {
-  const bg = readVar('--color-app', '#0b0d10')
-  const panel = readVar('--color-panel', '#12151a')
-  const fg = readVar('--color-fg', '#e6e6e6')
-  const muted = readVar('--color-muted', '#b0b0b0')
-  const faint = readVar('--color-faint', '#6b7280')
-  const border = readVar('--color-border', '#1f242c')
+  withThemeSource(defineHarnessThemeFromSource)
+}
+
+function defineHarnessThemeFromSource(source: HTMLElement): void {
+  const bg = readVar(source, '--color-app', '#0b0d10')
+  const panel = readVar(source, '--color-panel', '#12151a')
+  const fg = readVar(source, '--color-fg', '#e6e6e6')
+  const muted = readVar(source, '--color-muted', '#b0b0b0')
+  const faint = readVar(source, '--color-faint', '#6b7280')
+  const border = readVar(source, '--color-border', '#1f242c')
   const dark = isColorDark(bg)
 
   monaco.editor.defineTheme('harness', {
diff --git a/src/renderer/types.ts b/src/renderer/types.ts
index 28e5f103..943f96cc 100644
--- a/src/renderer/types.ts
+++ b/src/renderer/types.ts
@@ -359,6 +359,7 @@ export interface ElectronAPI {
   setThemeMode(mode: 'light' | 'dark' | 'system'): Promise<boolean>
   setThemeLight(theme: string): Promise<boolean>
   setThemeDark(theme: string): Promise<boolean>
+  setReviewDiffMode(mode: 'match' | 'light' | 'dark'): Promise<boolean>
   setLastEffectiveAppBg(hex: string): void
   /** Rescan `<userData>/themes/*.json` and update the slice. Returns
    *  the new theme count. */
diff --git a/src/shared/state/settings.test.ts b/src/shared/state/settings.test.ts
index 70f42b7d..1654ed7e 100644
--- a/src/shared/state/settings.test.ts
+++ b/src/shared/state/settings.test.ts
@@ -41,6 +41,16 @@ describe('settingsReducer', () => {
     expect(next.themeDark).toBe('dracula')
   })
 
+  it('reviewDiffModeChanged sets the review diff appearance', () => {
+    expect(initialSettings.reviewDiffMode).toBe('match')
+    const light = apply(initialSettings, { type: 'settings/reviewDiffModeChanged', payload: 'light' })
+    expect(light.reviewDiffMode).toBe('light')
+    const dark = apply(light, { type: 'settings/reviewDiffModeChanged', payload: 'dark' })
+    expect(dark.reviewDiffMode).toBe('dark')
+    const match = apply(dark, { type: 'settings/reviewDiffModeChanged', payload: 'match' })
+    expect(match.reviewDiffMode).toBe('match')
+  })
+
   it('customThemesChanged replaces the array', () => {
     expect(initialSettings.customThemes).toEqual([])
     const next = apply(initialSettings, {
diff --git a/src/shared/state/settings.ts b/src/shared/state/settings.ts
index 63616fdd..6809148d 100644
--- a/src/shared/state/settings.ts
+++ b/src/shared/state/settings.ts
@@ -59,6 +59,12 @@ export function scaledEditorFontSize(
 
 export type ThemeMode = 'light' | 'dark' | 'system'
 
+/** Appearance override for the review tab's code editors. `'match'` tracks
+ *  the app theme (default); `'light'`/`'dark'` pin the diff/file editors to
+ *  the configured light/dark palette regardless of the app's mode, so the
+ *  chrome can stay dark while the diffs render light. */
+export type ReviewDiffMode = 'match' | 'light' | 'dark'
+
 /** A theme loaded from `<userData>/themes/*.json`. Stays minimal — the
  *  loader only validates `name` + `mode` + an optional `colors` map of the
  *  16 semantic keys; missing keys inherit from the default of that mode at
@@ -102,6 +108,10 @@ export interface SettingsState {
   themeLight: string
   /** Theme id used when `themeMode` resolves to 'dark'. */
   themeDark: string
+  /** Appearance override for the review tab's code editors. Default 'match'
+   *  (follow the app theme). 'light'/'dark' pin them to the configured
+   *  light/dark palette so the diffs can differ from the app chrome. */
+  reviewDiffMode: ReviewDiffMode
   /** User-authored themes loaded from `<userData>/themes/*.json` at boot
    *  (and on reload). Replaced wholesale on rescan — array reference
    *  changes only when the on-disk contents actually change. */
@@ -222,6 +232,7 @@ export type SettingsEvent =
   | { type: 'settings/themeModeChanged'; payload: ThemeMode }
   | { type: 'settings/themeLightChanged'; payload: string }
   | { type: 'settings/themeDarkChanged'; payload: string }
+  | { type: 'settings/reviewDiffModeChanged'; payload: ReviewDiffMode }
   | { type: 'settings/customThemesChanged'; payload: CustomTheme[] }
   | { type: 'settings/hotkeysChanged'; payload: Record<string, string> | null }
   | { type: 'settings/defaultAgentChanged'; payload: AgentKindSetting }
@@ -281,6 +292,7 @@ export const initialSettings: SettingsState = {
   themeMode: 'system',
   themeLight: DEFAULT_LIGHT_THEME,
   themeDark: DEFAULT_DARK_THEME,
+  reviewDiffMode: 'match',
   customThemes: EMPTY_CUSTOM_THEMES,
   hotkeys: null,
   defaultAgent: 'claude',
@@ -340,6 +352,8 @@ export function settingsReducer(state: SettingsState, event: SettingsEvent): Set
       return { ...state, themeLight: event.payload }
     case 'settings/themeDarkChanged':
       return { ...state, themeDark: event.payload }
+    case 'settings/reviewDiffModeChanged':
+      return { ...state, reviewDiffMode: event.payload }
     case 'settings/customThemesChanged':
       return { ...state, customThemes: event.payload }
     case 'settings/hotkeysChanged':

From 74d3be0a575d50163bb8be6ca0c2a5003d573da3 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Tue, 2 Jun 2026 14:19:31 -0400
Subject: [PATCH 24/63] feat(review): move word-wrap toggle to the review
 toolbar

Word-wrap lived in each file's per-file diff header; move it up to the
review-level toolbar next to the whitespace toggle so it sits with the
other view controls (split/unified, whitespace, diff theme) and isn't
duplicated per file. The per-file header drops the button and its
now-unused onWordWrapChange prop; the wordWrap value still flows to the
Monaco editor.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/ReviewDiffPane.tsx | 13 +------------
 src/renderer/components/ReviewPane.tsx     | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/renderer/components/ReviewDiffPane.tsx b/src/renderer/components/ReviewDiffPane.tsx
index 69779db5..65dd6b30 100644
--- a/src/renderer/components/ReviewDiffPane.tsx
+++ b/src/renderer/components/ReviewDiffPane.tsx
@@ -5,7 +5,7 @@ import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import rehypeRaw from 'rehype-raw'
 import rehypeSanitize from 'rehype-sanitize'
-import { ArrowRightFromLine, Check, CheckCheck, FoldVertical, MessagesSquare, Reply, UnfoldVertical, WrapText } from 'lucide-react'
+import { Check, CheckCheck, FoldVertical, MessagesSquare, Reply, UnfoldVertical } from 'lucide-react'
 import type { FileDiffSides, ChangedFile } from '../types'
 import type { ReviewComment } from './ReviewFileTree'
 import { MonacoDiffEditor } from './MonacoDiffEditor'
@@ -38,7 +38,6 @@ interface ReviewDiffPaneProps {
   onAddComment: (lineNumber: number, body: string) => void
   onDeleteComment: (id: string) => void
   wordWrap: boolean
-  onWordWrapChange: (next: boolean) => void
   onAddReply: (
     root: { filePath: string; lineNumber: number; remoteId: number },
     body: string
@@ -576,7 +575,6 @@ export function ReviewDiffPane({
   onAddComment,
   onDeleteComment,
   wordWrap,
-  onWordWrapChange,
   onAddReply,
   onResolveThread,
   pendingResolve
@@ -932,15 +930,6 @@ export function ReviewDiffPane({
           </span>
         )}
 
-        <Tooltip label={wordWrap ? 'No wrap' : 'Word wrap'}>
-          <button
-            onClick={() => onWordWrapChange(!wordWrap)}
-            className="shrink-0 text-faint hover:text-fg cursor-pointer"
-          >
-            {wordWrap ? <ArrowRightFromLine className="icon-xs" /> : <WrapText className="icon-xs" />}
-          </button>
-        </Tooltip>
-
         {comments.length > 0 && (
           <Tooltip label="Jump to the first comment in this file">
             <button
diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index d137458e..12221a7e 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
-import { Send, Clipboard, Check, MessageSquare, GitCommitHorizontal, ArrowUp, ChevronDown, Pilcrow, X, Keyboard, CloudSync, Loader2, Monitor, Sun, Moon } from 'lucide-react'
+import { Send, Clipboard, Check, MessageSquare, GitCommitHorizontal, ArrowUp, ChevronDown, Pilcrow, X, Keyboard, CloudSync, Loader2, Monitor, Sun, Moon, WrapText } from 'lucide-react'
 import type { ChangedFile, BranchCommit } from '../types'
 import type { PRReview } from '../../shared/state/prs'
 import type { ReviewComment } from './ReviewFileTree'
@@ -456,6 +456,18 @@ export function ReviewPane({
             </button>
           </Tooltip>
 
+          <Tooltip label={wordWrap ? 'No word wrap' : 'Word wrap'}>
+            <button
+              onClick={() => setWordWrap((v) => !v)}
+              aria-pressed={wordWrap}
+              className={`flex items-center shrink-0 px-1.5 py-1 rounded border text-xs cursor-pointer transition-colors ${
+                wordWrap ? 'border-accent text-accent' : 'border-border text-faint hover:text-fg'
+              }`}
+            >
+              <WrapText className="icon-xs" />
+            </button>
+          </Tooltip>
+
           <Tooltip
             label={
               reviewDiffMode === 'match'
@@ -647,7 +659,6 @@ export function ReviewPane({
             onAddComment={handleAddComment}
             onDeleteComment={handleDeleteComment}
             wordWrap={wordWrap}
-            onWordWrapChange={setWordWrap}
             onAddReply={handleAddReply}
             onResolveThread={handleResolveThread}
             pendingResolve={pendingResolve}

From 1780d44f8a3d345424cac142c09fc07c58a581a5 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Tue, 2 Jun 2026 14:20:42 -0400
Subject: [PATCH 25/63] feat(review): add a copy-path button to each file's
 diff header

A small Copy button to the left of the file path copies the file's full
repo-relative path to the clipboard, flipping to a check for ~1.2s as
confirmation.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/ReviewDiffPane.tsx | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/ReviewDiffPane.tsx b/src/renderer/components/ReviewDiffPane.tsx
index 65dd6b30..b13ee598 100644
--- a/src/renderer/components/ReviewDiffPane.tsx
+++ b/src/renderer/components/ReviewDiffPane.tsx
@@ -5,7 +5,7 @@ import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import rehypeRaw from 'rehype-raw'
 import rehypeSanitize from 'rehype-sanitize'
-import { Check, CheckCheck, FoldVertical, MessagesSquare, Reply, UnfoldVertical } from 'lucide-react'
+import { Check, CheckCheck, Copy, FoldVertical, MessagesSquare, Reply, UnfoldVertical } from 'lucide-react'
 import type { FileDiffSides, ChangedFile } from '../types'
 import type { ReviewComment } from './ReviewFileTree'
 import { MonacoDiffEditor } from './MonacoDiffEditor'
@@ -585,6 +585,7 @@ export function ReviewDiffPane({
   const [loading, setLoading] = useState(false)
   const [commentLine, setCommentLine] = useState<number | null>(null)
   const [expandAll, setExpandAll] = useState(false)
+  const [copiedPath, setCopiedPath] = useState(false)
   // Bumped each time the diff editor (re)mounts so the view-zone effect
   // re-runs and re-draws comments — the editor unmounts/remounts on every
   // file switch, and a ref alone wouldn't retrigger the effect.
@@ -906,6 +907,24 @@ export function ReviewDiffPane({
     <div className="flex flex-col h-full">
       {/* File header */}
       <div className="flex items-center gap-2 px-3 py-2 border-b border-border bg-panel shrink-0">
+        <Tooltip label={copiedPath ? 'Copied!' : 'Copy file path'}>
+          <button
+            onClick={() => {
+              void navigator.clipboard.writeText(file.path)
+              setCopiedPath(true)
+              window.setTimeout(() => setCopiedPath(false), 1200)
+            }}
+            aria-label="Copy file path"
+            className="shrink-0 text-faint hover:text-fg cursor-pointer"
+          >
+            {copiedPath ? (
+              <Check className="icon-xs text-success" />
+            ) : (
+              <Copy className="icon-xs" />
+            )}
+          </button>
+        </Tooltip>
+
         <Tooltip label={<span className="font-mono">{file.path}</span>} side="top">
           <span
             className="text-xs font-mono truncate flex-1 min-w-0"

From fd40f7ed4a1fd3ab8f6da6aaae99dae170f086ff Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Tue, 2 Jun 2026 14:22:20 -0400
Subject: [PATCH 26/63] feat(review): add "Open in editor" button to each
 file's diff header

Far-right Pencil button opens the file as an editable in-app file tab
(reusing WorkspaceView's onOpenFile path, same as the standalone diff
tab). Hidden for deleted files and when no open-file handler is wired.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/ReviewDiffPane.tsx | 18 +++++++++++++++++-
 src/renderer/components/ReviewPane.tsx     |  5 +++++
 src/renderer/components/WorkspaceView.tsx  |  3 +++
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/ReviewDiffPane.tsx b/src/renderer/components/ReviewDiffPane.tsx
index b13ee598..fc895ef9 100644
--- a/src/renderer/components/ReviewDiffPane.tsx
+++ b/src/renderer/components/ReviewDiffPane.tsx
@@ -5,7 +5,7 @@ import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import rehypeRaw from 'rehype-raw'
 import rehypeSanitize from 'rehype-sanitize'
-import { Check, CheckCheck, Copy, FoldVertical, MessagesSquare, Reply, UnfoldVertical } from 'lucide-react'
+import { Check, CheckCheck, Copy, FoldVertical, MessagesSquare, Pencil, Reply, UnfoldVertical } from 'lucide-react'
 import type { FileDiffSides, ChangedFile } from '../types'
 import type { ReviewComment } from './ReviewFileTree'
 import { MonacoDiffEditor } from './MonacoDiffEditor'
@@ -38,6 +38,9 @@ interface ReviewDiffPaneProps {
   onAddComment: (lineNumber: number, body: string) => void
   onDeleteComment: (id: string) => void
   wordWrap: boolean
+  /** Open this file as an editable in-app file tab. Undefined hides the
+   *  "Open in editor" button. */
+  onOpenEditor?: (filePath: string) => void
   onAddReply: (
     root: { filePath: string; lineNumber: number; remoteId: number },
     body: string
@@ -575,6 +578,7 @@ export function ReviewDiffPane({
   onAddComment,
   onDeleteComment,
   wordWrap,
+  onOpenEditor,
   onAddReply,
   onResolveThread,
   pendingResolve
@@ -995,6 +999,18 @@ export function ReviewDiffPane({
             Viewed
           </button>
         </Tooltip>
+
+        {onOpenEditor && file.status !== 'deleted' && (
+          <Tooltip label="Open in editor">
+            <button
+              onClick={() => onOpenEditor(file.path)}
+              aria-label="Open in editor"
+              className="shrink-0 text-faint hover:text-fg cursor-pointer"
+            >
+              <Pencil className="icon-xs" />
+            </button>
+          </Tooltip>
+        )}
       </div>
 
       {/* Diff with inline comments via view zones */}
diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index 12221a7e..17f85932 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -28,6 +28,9 @@ interface ReviewPaneProps {
    *  Gates the review keyboard shortcuts so they don't fire from a
    *  background tab. */
   active?: boolean
+  /** Open a file as an editable in-app file tab. Undefined disables the
+   *  "Open in editor" affordance. */
+  onOpenEditor?: (filePath: string) => void
   onSendToAgent?: (text: string) => void
 }
 
@@ -39,6 +42,7 @@ export function ReviewPane({
   fromCommit,
   toCommit,
   active,
+  onOpenEditor,
   onSendToAgent
 }: ReviewPaneProps): JSX.Element {
   const backend = useBackend()
@@ -659,6 +663,7 @@ export function ReviewPane({
             onAddComment={handleAddComment}
             onDeleteComment={handleDeleteComment}
             wordWrap={wordWrap}
+            onOpenEditor={onOpenEditor}
             onAddReply={handleAddReply}
             onResolveThread={handleResolveThread}
             pendingResolve={pendingResolve}
diff --git a/src/renderer/components/WorkspaceView.tsx b/src/renderer/components/WorkspaceView.tsx
index e4111de9..a7f11f33 100644
--- a/src/renderer/components/WorkspaceView.tsx
+++ b/src/renderer/components/WorkspaceView.tsx
@@ -636,6 +636,9 @@ export function WorkspaceView({
                     fromCommit={tab.reviewFromCommit}
                     toCommit={tab.reviewToCommit}
                     active={visible && isActiveInPane}
+                    onOpenEditor={
+                      onOpenFile ? (filePath) => onOpenFile(worktreePath, filePath) : undefined
+                    }
                     onSendToAgent={
                       onSendToAgent
                         ? (text) => onSendToAgent(worktreePath, text)

From 11a7091272c85a74d8348bdb093067e98446d506 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Tue, 2 Jun 2026 14:23:25 -0400
Subject: [PATCH 27/63] feat(review): make inline review comments span the full
 diff width

Comments rendered in the diff view zones used inline-flex with a 760px
max-width, so each card hugged its content. Switch to a full-width
flex column (and drop the matching max-width on the reply input) so
comments fill the diff pane like GitHub's review threads.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/ReviewDiffPane.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/ReviewDiffPane.tsx b/src/renderer/components/ReviewDiffPane.tsx
index fc895ef9..9ce5c930 100644
--- a/src/renderer/components/ReviewDiffPane.tsx
+++ b/src/renderer/components/ReviewDiffPane.tsx
@@ -128,7 +128,7 @@ function InlineComment({
         setExpanded((v) => !v)
       }}
       style={{
-        display: 'inline-flex',
+        display: 'flex',
         flexDirection: 'column',
         gap: '4px',
         padding: '8px 12px',
@@ -138,7 +138,6 @@ function InlineComment({
         borderRadius: '0 6px 6px 0',
         background: bg,
         boxShadow: '0 2px 10px rgba(0, 0, 0, 0.4)',
-        maxWidth: '760px',
         cursor: collapsible ? 'pointer' : 'default'
       }}
     >
@@ -382,7 +381,7 @@ function CommentThread({
       </div>
 
       {replying && (
-        <div style={{ marginTop: '4px', marginLeft: thread.length > 1 ? 16 : 0, maxWidth: '760px' }}>
+        <div style={{ marginTop: '4px', marginLeft: thread.length > 1 ? 16 : 0 }}>
           <textarea
             ref={replyRef}
             value={replyBody}

From 69c64a5bd9a49896874d622369ab75b34f4767dc Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Tue, 2 Jun 2026 14:25:58 -0400
Subject: [PATCH 28/63] feat(review): move the total diff stat next to the
 review progress
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The all-commits +/− stat lived inside the commit selector button; move
it down to the second status row, to the right of the
"N reviewed · M remaining" counter, so the commit button stays compact
and the overall churn reads alongside review progress.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/ReviewPane.tsx | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index 17f85932..f16a702e 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -439,8 +439,6 @@ export function ReviewPane({
             onCommitClick={handleCommitClick}
             fromCommit={fromCommit}
             toCommit={toCommit}
-            totalAdditions={totalAdditions}
-            totalDeletions={totalDeletions}
           />
 
           <div className="flex items-center rounded border border-border overflow-hidden text-xs">
@@ -601,6 +599,13 @@ export function ReviewPane({
               {reviewedFiles.size} reviewed · {Math.max(0, files.length - reviewedFiles.size)} remaining
             </span>
           )}
+
+          {(totalAdditions > 0 || totalDeletions > 0) && (
+            <span className="font-mono tabular-nums shrink-0">
+              {totalAdditions > 0 && <span className="text-success">+{totalAdditions}</span>}
+              {totalDeletions > 0 && <span className="text-danger ml-1">−{totalDeletions}</span>}
+            </span>
+          )}
         </div>
 
         <div className="h-[2px] bg-border/50 relative">
@@ -680,8 +685,6 @@ interface CommitSelectorProps {
   selectionIndices: { fromIdx: number; toIdx: number } | null
   fromCommit?: string
   toCommit?: string
-  totalAdditions: number
-  totalDeletions: number
   onSelectAll: () => void
   onCommitClick: (idx: number, shift: boolean) => void
 }
@@ -692,8 +695,6 @@ function CommitSelector({
   selectionIndices,
   fromCommit,
   toCommit,
-  totalAdditions,
-  totalDeletions,
   onSelectAll,
   onCommitClick
 }: CommitSelectorProps): JSX.Element {
@@ -736,12 +737,6 @@ function CommitSelector({
       >
         <GitCommitHorizontal className="icon-xs text-faint shrink-0" />
         <span className="font-mono max-w-[10rem] truncate">{buttonLabel}</span>
-        {(totalAdditions > 0 || totalDeletions > 0) && (
-          <span className="font-mono tabular-nums shrink-0">
-            {totalAdditions > 0 && <span className="text-success">+{totalAdditions}</span>}
-            {totalDeletions > 0 && <span className="text-danger ml-1">−{totalDeletions}</span>}
-          </span>
-        )}
         <ChevronDown className="icon-2xs text-faint shrink-0" />
       </button>
       {open && (

From b7ce06640564efc54e8ef63e6dce6f7f459e0da2 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Tue, 2 Jun 2026 14:31:24 -0400
Subject: [PATCH 29/63] feat(review): add a PR description panel to the review
 toolbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A GitPullRequest button on the far left of the second toolbar row (before
the reviewer avatars) opens a panel rendering the PR description as
sanitized GitHub-flavored markdown, with a title link to the PR and
Esc/click-away to close. The button is disabled when the worktree has no
associated PR.

Surfaces the PR body through the poller: add `body` to the PR GraphQL
fragment, the raw type, the PRStatus → renderer mapping, and the
PRStatus interface (empty string when absent).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/main/github.ts                            |  4 +-
 src/main/pr-poller.test.ts                    |  1 +
 src/renderer/components/PRStatusPanel.test.ts |  1 +
 src/renderer/components/ReviewPane.tsx        | 91 ++++++++++++++++++-
 src/renderer/worktree-sort.test.ts            |  1 +
 src/shared/state/prs.test.ts                  |  1 +
 src/shared/state/prs.ts                       |  3 +
 7 files changed, 100 insertions(+), 2 deletions(-)

diff --git a/src/main/github.ts b/src/main/github.ts
index af6bc6f5..25463809 100644
--- a/src/main/github.ts
+++ b/src/main/github.ts
@@ -199,6 +199,7 @@ interface GraphQLActor {
 interface GraphQLPR {
   number: number
   title: string
+  body: string
   state: 'OPEN' | 'CLOSED' | 'MERGED'
   isDraft: boolean
   url: string
@@ -328,7 +329,7 @@ function gqlStatusState(s: Extract<GraphQLCheckContext, { __typename: 'StatusCon
 }
 
 const PR_FRAGMENT = `fragment PR on PullRequest {
-  number title state isDraft url mergedAt mergeable additions deletions
+  number title body state isDraft url mergedAt mergeable additions deletions
   baseRefName
   baseRepository { defaultBranchRef { name } }
   headRefOid
@@ -629,6 +630,7 @@ function buildPRStatus(
   return {
     number: pr.number,
     title: pr.title,
+    body: pr.body || '',
     state,
     url: pr.url,
     branch: branchName,
diff --git a/src/main/pr-poller.test.ts b/src/main/pr-poller.test.ts
index 8aba0e12..6bf13715 100644
--- a/src/main/pr-poller.test.ts
+++ b/src/main/pr-poller.test.ts
@@ -25,6 +25,7 @@ function fakePRStatus(number: number): PRStatus {
   return {
     number,
     title: `PR ${number}`,
+    body: '',
     state: 'open',
     url: '',
     branch: '',
diff --git a/src/renderer/components/PRStatusPanel.test.ts b/src/renderer/components/PRStatusPanel.test.ts
index 225d9771..d3b6c27e 100644
--- a/src/renderer/components/PRStatusPanel.test.ts
+++ b/src/renderer/components/PRStatusPanel.test.ts
@@ -6,6 +6,7 @@ function pr(overrides: Partial<PRStatus> = {}): PRStatus {
   return {
     number: 1,
     title: '',
+    body: '',
     state: 'open',
     url: '',
     branch: 'feature',
diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index f16a702e..bb8ad1e1 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
-import { Send, Clipboard, Check, MessageSquare, GitCommitHorizontal, ArrowUp, ChevronDown, Pilcrow, X, Keyboard, CloudSync, Loader2, Monitor, Sun, Moon, WrapText } from 'lucide-react'
+import { Send, Clipboard, Check, MessageSquare, GitCommitHorizontal, ArrowUp, ChevronDown, Pilcrow, X, Keyboard, CloudSync, Loader2, Monitor, Sun, Moon, WrapText, GitPullRequest } from 'lucide-react'
 import type { ChangedFile, BranchCommit } from '../types'
 import type { PRReview } from '../../shared/state/prs'
 import type { ReviewComment } from './ReviewFileTree'
@@ -60,6 +60,7 @@ export function ReviewPane({
   const [sideBySide, setSideBySide] = useState(false)
   const [showWhitespace, setShowWhitespace] = useState(false)
   const [showShortcuts, setShowShortcuts] = useState(false)
+  const [showPrDescription, setShowPrDescription] = useState(false)
   const [revealTarget, setRevealTarget] = useState<{ filePath: string; line: number; nonce: number } | null>(null)
   const revealNonceRef = useRef(0)
   const [refreshKey, setRefreshKey] = useState(0)
@@ -428,6 +429,15 @@ export function ReviewPane({
   return (
     <div className="relative flex flex-col h-full w-full bg-bg">
       {showShortcuts && <ReviewShortcutsPopup onClose={() => setShowShortcuts(false)} />}
+      {showPrDescription && pr && (
+        <PrDescriptionPanel
+          title={pr.title}
+          number={pr.number}
+          body={pr.body}
+          url={pr.url}
+          onClose={() => setShowPrDescription(false)}
+        />
+      )}
       {/* Top controls bar */}
       <div className="shrink-0 border-b border-border bg-panel">
         <div className="h-10 flex items-center gap-3 px-3">
@@ -577,6 +587,20 @@ export function ReviewPane({
 
         {/* Second row — review status info */}
         <div className="h-9 flex items-center gap-3 px-3 border-t border-border/60 text-xs">
+          <Tooltip label={pr ? 'PR description' : 'No pull request for this worktree'}>
+            <button
+              onClick={() => setShowPrDescription((v) => !v)}
+              disabled={!pr}
+              aria-pressed={showPrDescription}
+              aria-label="Show PR description"
+              className={`flex items-center shrink-0 px-1.5 py-1 rounded border transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-default ${
+                showPrDescription ? 'border-accent text-accent' : 'border-border text-faint hover:text-fg'
+              }`}
+            >
+              <GitPullRequest className="icon-xs" />
+            </button>
+          </Tooltip>
+
           {pr && <ReviewerStatus reviews={pr.reviews} />}
 
           <CommentDropdown
@@ -1032,3 +1056,68 @@ function ReviewShortcutsPopup({ onClose }: { onClose: () => void }): JSX.Element
     </div>
   )
 }
+
+function PrDescriptionPanel({
+  title,
+  number,
+  body,
+  url,
+  onClose
+}: {
+  title: string
+  number: number
+  body: string
+  url: string
+  onClose: () => void
+}): JSX.Element {
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent): void => {
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        onClose()
+      }
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [onClose])
+
+  return (
+    <div
+      className="absolute inset-0 z-50 flex items-center justify-center bg-black/40"
+      onClick={onClose}
+    >
+      <div
+        className="w-[42rem] max-w-[90%] max-h-[80%] flex flex-col rounded-lg border border-border-strong bg-panel-raised shadow-lg"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center gap-2 px-4 py-2.5 border-b border-border">
+          <GitPullRequest className="icon-sm text-faint shrink-0" />
+          <a
+            href={url}
+            target="_blank"
+            rel="noreferrer"
+            className="text-base font-medium text-fg hover:underline truncate"
+          >
+            {title} <span className="text-faint">#{number}</span>
+          </a>
+          <button
+            onClick={onClose}
+            aria-label="Close"
+            className="ml-auto shrink-0 text-faint hover:text-fg cursor-pointer"
+          >
+            <X className="icon-base" />
+          </button>
+        </div>
+        <div className="markdown overflow-y-auto px-4 py-3 text-sm">
+          {body.trim() ? (
+            <ReactMarkdown remarkPlugins={REVIEW_MD_PLUGINS} rehypePlugins={REVIEW_REHYPE_PLUGINS}>
+              {body}
+            </ReactMarkdown>
+          ) : (
+            <span className="text-faint italic">No description provided.</span>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/renderer/worktree-sort.test.ts b/src/renderer/worktree-sort.test.ts
index 6a8c591d..4ce05280 100644
--- a/src/renderer/worktree-sort.test.ts
+++ b/src/renderer/worktree-sort.test.ts
@@ -29,6 +29,7 @@ function stubPRStatus(overrides: Partial<PRStatus> = {}): PRStatus {
   return {
     number: 1,
     title: 'PR',
+    body: '',
     state: 'open',
     url: 'https://github.com/o/r/pull/1',
     branch: 'pr-1',
diff --git a/src/shared/state/prs.test.ts b/src/shared/state/prs.test.ts
index 5c4c8a78..984d2f05 100644
--- a/src/shared/state/prs.test.ts
+++ b/src/shared/state/prs.test.ts
@@ -15,6 +15,7 @@ function stubPR(overrides: Partial<PRStatus> = {}): PRStatus {
   return {
     number: 1,
     title: 'stub',
+    body: '',
     state: 'open',
     url: 'https://example.com/pr/1',
     branch: 'feature/x',
diff --git a/src/shared/state/prs.ts b/src/shared/state/prs.ts
index f7a4c904..eb38abbd 100644
--- a/src/shared/state/prs.ts
+++ b/src/shared/state/prs.ts
@@ -23,6 +23,9 @@ export interface PRReview {
 export interface PRStatus {
   number: number
   title: string
+  /** PR description body (GitHub-flavored markdown). Empty when the PR has
+   *  no description or pre-body-fetch cached data. */
+  body: string
   state: 'open' | 'draft' | 'merged' | 'closed'
   url: string
   branch: string

From d01ce6dd1b160d9edc3229361799f2249bd4a012 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Tue, 2 Jun 2026 14:42:58 -0400
Subject: [PATCH 30/63] refactor(review): reorganize the review toolbar

Consolidate the top controls now that the row had grown crowded:

- New hamburger menu to the left of the commit selector houses the view
  options (diff style Split/Unified, word wrap, whitespace, diff theme),
  replacing four inline toolbar buttons.
- Sync drops its text label (icon-only) and moves to the right of
  "Send to Agent".
- The keyboard-shortcuts button moves to the far right of the second
  (status) row.
- "Copy comments" moves into the comments dropdown as a top action,
  freeing toolbar space.

ModeButton's `hint` becomes optional so the theme segment (no keyboard
hint) can reuse it.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/DiffView.tsx   |   4 +-
 src/renderer/components/ReviewPane.tsx | 239 +++++++++++++++----------
 2 files changed, 150 insertions(+), 93 deletions(-)

diff --git a/src/renderer/components/DiffView.tsx b/src/renderer/components/DiffView.tsx
index 4a104256..ce060c96 100644
--- a/src/renderer/components/DiffView.tsx
+++ b/src/renderer/components/DiffView.tsx
@@ -248,11 +248,11 @@ export function ModeButton({
 }: {
   active: boolean
   label: string
-  hint: string
+  hint?: string
   onClick: () => void
 }): JSX.Element {
   return (
-    <Tooltip label={`${label} (${hint})`}>
+    <Tooltip label={hint ? `${label} (${hint})` : label}>
       <button
         onClick={onClick}
         className={`px-2 py-0.5 cursor-pointer transition-colors ${
diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index bb8ad1e1..987af829 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
-import { Send, Clipboard, Check, MessageSquare, GitCommitHorizontal, ArrowUp, ChevronDown, Pilcrow, X, Keyboard, CloudSync, Loader2, Monitor, Sun, Moon, WrapText, GitPullRequest } from 'lucide-react'
+import { Send, Clipboard, Check, MessageSquare, GitCommitHorizontal, ArrowUp, ChevronDown, Pilcrow, X, Keyboard, CloudSync, Loader2, WrapText, GitPullRequest, Menu } from 'lucide-react'
 import type { ChangedFile, BranchCommit } from '../types'
 import type { PRReview } from '../../shared/state/prs'
 import type { ReviewComment } from './ReviewFileTree'
@@ -441,6 +441,17 @@ export function ReviewPane({
       {/* Top controls bar */}
       <div className="shrink-0 border-b border-border bg-panel">
         <div className="h-10 flex items-center gap-3 px-3">
+          <ReviewViewMenu
+            sideBySide={sideBySide}
+            onSideBySide={setSideBySide}
+            wordWrap={wordWrap}
+            onWordWrap={setWordWrap}
+            showWhitespace={showWhitespace}
+            onShowWhitespace={setShowWhitespace}
+            reviewDiffMode={reviewDiffMode}
+            onReviewDiffMode={(m) => backend.setReviewDiffMode(m)}
+          />
+
           <CommitSelector
             commits={commits}
             isWholeBranch={isWholeBranch}
@@ -451,78 +462,17 @@ export function ReviewPane({
             toCommit={toCommit}
           />
 
-          <div className="flex items-center rounded border border-border overflow-hidden text-xs">
-            <ModeButton active={sideBySide} label="Split" hint="s" onClick={() => setSideBySide(true)} />
-            <ModeButton active={!sideBySide} label="Unified" hint="d" onClick={() => setSideBySide(false)} />
-          </div>
-
-          <Tooltip label={showWhitespace ? 'Showing whitespace changes' : 'Ignoring whitespace changes'}>
-            <button
-              onClick={() => setShowWhitespace((v) => !v)}
-              aria-pressed={showWhitespace}
-              className={`flex items-center shrink-0 px-1.5 py-1 rounded border text-xs cursor-pointer transition-colors ${
-                showWhitespace ? 'border-accent text-accent' : 'border-border text-faint hover:text-fg'
-              }`}
-            >
-              <Pilcrow className="icon-xs" />
-            </button>
-          </Tooltip>
-
-          <Tooltip label={wordWrap ? 'No word wrap' : 'Word wrap'}>
-            <button
-              onClick={() => setWordWrap((v) => !v)}
-              aria-pressed={wordWrap}
-              className={`flex items-center shrink-0 px-1.5 py-1 rounded border text-xs cursor-pointer transition-colors ${
-                wordWrap ? 'border-accent text-accent' : 'border-border text-faint hover:text-fg'
-              }`}
-            >
-              <WrapText className="icon-xs" />
-            </button>
-          </Tooltip>
-
-          <Tooltip
-            label={
-              reviewDiffMode === 'match'
-                ? 'Diff theme: matches app — click for light'
-                : reviewDiffMode === 'light'
-                  ? 'Diff theme: light — click for dark'
-                  : 'Diff theme: dark — click to match app'
-            }
-          >
-            <button
-              onClick={() =>
-                backend.setReviewDiffMode(
-                  reviewDiffMode === 'match' ? 'light' : reviewDiffMode === 'light' ? 'dark' : 'match'
-                )
-              }
-              aria-label="Cycle diff theme"
-              className={`flex items-center shrink-0 px-1.5 py-1 rounded border text-xs cursor-pointer transition-colors ${
-                reviewDiffMode !== 'match'
-                  ? 'border-accent text-accent'
-                  : 'border-border text-faint hover:text-fg'
-              }`}
-            >
-              {reviewDiffMode === 'match' ? (
-                <Monitor className="icon-xs" />
-              ) : reviewDiffMode === 'light' ? (
-                <Sun className="icon-xs" />
-              ) : (
-                <Moon className="icon-xs" />
-              )}
-            </button>
-          </Tooltip>
-
           <div className="flex-1" />
 
           <div className="flex items-center gap-1.5 text-xs">
-            <Tooltip label="Copy comments to clipboard">
+            <Tooltip label="Send all comments to the active agent terminal">
               <button
-                onClick={handleCopyComments}
-                disabled={comments.length === 0}
-                className="flex items-center gap-1 px-2 py-1 rounded border border-border text-faint hover:text-fg transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-default"
+                onClick={handleSendToAgent}
+                disabled={comments.length === 0 || !onSendToAgent}
+                className="flex items-center gap-1 px-2 py-1 rounded bg-accent text-app text-xs font-medium hover:bg-accent/80 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-default"
               >
-                <Clipboard className="icon-xs" />
-                Copy
+                <Send className="icon-xs" />
+                Send to Agent
               </button>
             </Tooltip>
 
@@ -540,14 +490,14 @@ export function ReviewPane({
               <button
                 onClick={handleSync}
                 disabled={!prNumber || !isWholeBranch || syncing}
-                className="relative flex items-center gap-1 px-2 py-1 rounded border border-border text-faint hover:text-fg transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-default"
+                aria-label="Sync review to PR"
+                className="relative flex items-center shrink-0 px-1.5 py-1 rounded border border-border text-faint hover:text-fg transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-default"
               >
                 {syncing ? (
                   <Loader2 className="icon-xs animate-spin" />
                 ) : (
                   <CloudSync className="icon-xs" />
                 )}
-                Sync
                 {syncState !== 'idle' && (
                   <span
                     className={`absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full ${
@@ -562,27 +512,7 @@ export function ReviewPane({
                 )}
               </button>
             </Tooltip>
-
-            <Tooltip label="Send all comments to the active agent terminal">
-              <button
-                onClick={handleSendToAgent}
-                disabled={comments.length === 0 || !onSendToAgent}
-                className="flex items-center gap-1 px-2 py-1 rounded bg-accent text-app text-xs font-medium hover:bg-accent/80 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-default"
-              >
-                <Send className="icon-xs" />
-                Send to Agent
-              </button>
-            </Tooltip>
           </div>
-
-          <Tooltip label="Keyboard shortcuts (?)">
-            <button
-              onClick={() => setShowShortcuts((v) => !v)}
-              className="flex items-center shrink-0 px-1.5 py-1 rounded border border-border text-faint hover:text-fg cursor-pointer transition-colors"
-            >
-              <Keyboard className="icon-xs" />
-            </button>
-          </Tooltip>
         </div>
 
         {/* Second row — review status info */}
@@ -605,6 +535,7 @@ export function ReviewPane({
 
           <CommentDropdown
             comments={comments}
+            onCopy={handleCopyComments}
             onSelect={(c) => {
               setSelectedFile(c.filePath)
               setRevealTarget({ filePath: c.filePath, line: c.lineNumber, nonce: ++revealNonceRef.current })
@@ -630,6 +561,16 @@ export function ReviewPane({
               {totalDeletions > 0 && <span className="text-danger ml-1">−{totalDeletions}</span>}
             </span>
           )}
+
+          <Tooltip label="Keyboard shortcuts (?)">
+            <button
+              onClick={() => setShowShortcuts((v) => !v)}
+              aria-label="Keyboard shortcuts"
+              className="flex items-center shrink-0 px-1.5 py-1 rounded border border-border text-faint hover:text-fg cursor-pointer transition-colors"
+            >
+              <Keyboard className="icon-xs" />
+            </button>
+          </Tooltip>
         </div>
 
         <div className="h-[2px] bg-border/50 relative">
@@ -703,6 +644,110 @@ export function ReviewPane({
   )
 }
 
+function ReviewViewMenu({
+  sideBySide,
+  onSideBySide,
+  wordWrap,
+  onWordWrap,
+  showWhitespace,
+  onShowWhitespace,
+  reviewDiffMode,
+  onReviewDiffMode
+}: {
+  sideBySide: boolean
+  onSideBySide: (v: boolean) => void
+  wordWrap: boolean
+  onWordWrap: (v: boolean) => void
+  showWhitespace: boolean
+  onShowWhitespace: (v: boolean) => void
+  reviewDiffMode: 'match' | 'light' | 'dark'
+  onReviewDiffMode: (m: 'match' | 'light' | 'dark') => void
+}): JSX.Element {
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    if (!open) return
+    const onDown = (e: MouseEvent): void => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    window.addEventListener('mousedown', onDown)
+    return () => window.removeEventListener('mousedown', onDown)
+  }, [open])
+
+  return (
+    <div className="relative shrink-0" ref={ref}>
+      <Tooltip label="Diff view options">
+        <button
+          onClick={() => setOpen((v) => !v)}
+          aria-label="Diff view options"
+          aria-expanded={open}
+          className={`flex items-center px-1.5 py-1 rounded border cursor-pointer transition-colors ${
+            open ? 'border-accent text-accent' : 'border-border text-faint hover:text-fg'
+          }`}
+        >
+          <Menu className="icon-xs" />
+        </button>
+      </Tooltip>
+      {open && (
+        <div className="absolute left-0 top-full mt-1 z-50 w-56 rounded-lg border border-border-strong bg-panel-raised shadow-lg p-2 flex flex-col gap-1.5 text-xs">
+          <div className="flex items-center justify-between gap-2">
+            <span className="text-faint">Diff style</span>
+            <div className="flex items-center rounded border border-border overflow-hidden">
+              <ModeButton active={sideBySide} label="Split" hint="s" onClick={() => onSideBySide(true)} />
+              <ModeButton active={!sideBySide} label="Unified" hint="d" onClick={() => onSideBySide(false)} />
+            </div>
+          </div>
+
+          <button
+            onClick={() => onWordWrap(!wordWrap)}
+            aria-pressed={wordWrap}
+            className="flex items-center justify-between gap-2 px-1 py-1 rounded hover:bg-panel cursor-pointer"
+          >
+            <span className="flex items-center gap-1.5 text-faint">
+              <WrapText className="icon-xs" /> Word wrap
+            </span>
+            <span className={wordWrap ? 'text-accent' : 'text-dim'}>{wordWrap ? 'On' : 'Off'}</span>
+          </button>
+
+          <button
+            onClick={() => onShowWhitespace(!showWhitespace)}
+            aria-pressed={showWhitespace}
+            className="flex items-center justify-between gap-2 px-1 py-1 rounded hover:bg-panel cursor-pointer"
+          >
+            <span className="flex items-center gap-1.5 text-faint">
+              <Pilcrow className="icon-xs" /> Whitespace
+            </span>
+            <span className={showWhitespace ? 'text-accent' : 'text-dim'}>
+              {showWhitespace ? 'Shown' : 'Hidden'}
+            </span>
+          </button>
+
+          <div className="flex items-center justify-between gap-2">
+            <span className="text-faint">Theme</span>
+            <div className="flex items-center rounded border border-border overflow-hidden">
+              <ModeButton
+                active={reviewDiffMode === 'match'}
+                label="App"
+                onClick={() => onReviewDiffMode('match')}
+              />
+              <ModeButton
+                active={reviewDiffMode === 'light'}
+                label="Light"
+                onClick={() => onReviewDiffMode('light')}
+              />
+              <ModeButton
+                active={reviewDiffMode === 'dark'}
+                label="Dark"
+                onClick={() => onReviewDiffMode('dark')}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
 interface CommitSelectorProps {
   commits: BranchCommit[]
   isWholeBranch: boolean
@@ -933,10 +978,12 @@ function ReviewerStatus({ reviews }: { reviews: PRReview[] }): JSX.Element | nul
 
 function CommentDropdown({
   comments,
-  onSelect
+  onSelect,
+  onCopy
 }: {
   comments: ReviewComment[]
   onSelect: (c: ReviewComment) => void
+  onCopy: () => void
 }): JSX.Element {
   const [open, setOpen] = useState(false)
   const wrapRef = useRef<HTMLDivElement | null>(null)
@@ -971,6 +1018,16 @@ function CommentDropdown({
           className="absolute z-50 top-full left-0 mt-1 w-[28rem] max-h-[20rem] overflow-y-auto bg-panel-raised border border-border-strong rounded shadow-lg py-1"
           onMouseDown={(e) => e.stopPropagation()}
         >
+          <button
+            onClick={() => {
+              onCopy()
+              setOpen(false)
+            }}
+            className="w-full flex items-center gap-1.5 px-3 py-1.5 text-xs text-faint hover:text-fg hover:bg-panel transition-colors cursor-pointer border-b border-border/60"
+          >
+            <Clipboard className="icon-xs" />
+            Copy all comments to clipboard
+          </button>
           {sorted.map((c) => {
             const name = c.filePath.split('/').pop() || c.filePath
             return (

From 2ec6d52229d833a2bf2bddf0506e16bbcdc0eda9 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Tue, 2 Jun 2026 14:43:42 -0400
Subject: [PATCH 31/63] fix(review): size the diff-header comment count to
 match its siblings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The "jump to first comment" badge had no text-size class, so the count
inherited the app's base font (~14px) while the path/status/+−/Viewed
controls beside it are text-xs (12px) — making the number look
oversized. Add text-xs so the whole header row is consistent.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/ReviewDiffPane.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/ReviewDiffPane.tsx b/src/renderer/components/ReviewDiffPane.tsx
index 9ce5c930..7f65aa96 100644
--- a/src/renderer/components/ReviewDiffPane.tsx
+++ b/src/renderer/components/ReviewDiffPane.tsx
@@ -957,7 +957,7 @@ export function ReviewDiffPane({
             <button
               onClick={jumpToFirstComment}
               aria-label="Jump to first comment"
-              className="shrink-0 flex items-center gap-1 px-2 py-1 rounded border border-border text-info hover:text-info/70 transition-colors cursor-pointer"
+              className="shrink-0 flex items-center gap-1 px-2 py-1 rounded border border-border text-xs text-info hover:text-info/70 transition-colors cursor-pointer"
             >
               <MessagesSquare className="icon-xs" />
               {comments.length}

From a1b461868c18762d465a72dacfc704519ce6437b Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Tue, 2 Jun 2026 14:48:27 -0400
Subject: [PATCH 32/63] feat(review): add auto-height mode to MonacoDiffEditor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Foundation for the single-scroll stacked all-files review. When
`autoHeight` is set, the diff editor hides its inner vertical scrollbar,
lets wheel events bubble to the outer container, and reports its content
height (taller side in split, else the modified editor — which in inline
mode already includes deleted-line and comment view zones) via
`onContentHeight`, so a host can size to fit. Existing fixed-height
callers are unaffected.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/MonacoDiffEditor.tsx | 44 +++++++++++++++++++-
 1 file changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/MonacoDiffEditor.tsx b/src/renderer/components/MonacoDiffEditor.tsx
index 4866bd9f..b4244d75 100644
--- a/src/renderer/components/MonacoDiffEditor.tsx
+++ b/src/renderer/components/MonacoDiffEditor.tsx
@@ -21,6 +21,11 @@ interface MonacoDiffEditorProps {
   onEditorMount?: (editor: monaco.editor.IStandaloneDiffEditor) => void
   glyphClassName?: string
   glyphHoverMessage?: string
+  /** When set, the editor grows to fit its content (no internal vertical
+   *  scroll) and reports its content height via onContentHeight, so it can be
+   *  embedded in an outer scroll container (the stacked all-files review). */
+  autoHeight?: boolean
+  onContentHeight?: (height: number) => void
 }
 
 export function MonacoDiffEditor({
@@ -38,7 +43,9 @@ export function MonacoDiffEditor({
   onReferenceLine,
   onEditorMount,
   glyphClassName = 'ref-line-glyph',
-  glyphHoverMessage = 'Reference this line in Claude'
+  glyphHoverMessage = 'Reference this line in Claude',
+  autoHeight = false,
+  onContentHeight
 }: MonacoDiffEditorProps): JSX.Element {
   const hostRef = useRef<HTMLDivElement | null>(null)
   const editorRef = useRef<monaco.editor.IStandaloneDiffEditor | null>(null)
@@ -48,12 +55,16 @@ export function MonacoDiffEditor({
   const onMountRef = useRef(onEditorMount)
   const glyphClassRef = useRef(glyphClassName)
   const glyphHoverRef = useRef(glyphHoverMessage)
+  const onContentHeightRef = useRef(onContentHeight)
+  const renderSideBySideRef = useRef(renderSideBySide)
   onChangeRef.current = onModifiedChange
   onSaveRef.current = onSave
   onRefRef.current = onReferenceLine
   onMountRef.current = onEditorMount
   glyphClassRef.current = glyphClassName
   glyphHoverRef.current = glyphHoverMessage
+  onContentHeightRef.current = onContentHeight
+  renderSideBySideRef.current = renderSideBySide
 
   useEffect(() => {
     if (!hostRef.current) return
@@ -91,7 +102,13 @@ export function MonacoDiffEditor({
       scrollbar: {
         verticalScrollbarSize: 10,
         horizontalScrollbarSize: 10,
-        useShadows: false
+        useShadows: false,
+        // Auto-height mode: the editor grows to its content and the OUTER
+        // container scrolls, so hide the inner vertical scrollbar and let
+        // wheel events bubble up rather than being consumed here.
+        ...(autoHeight
+          ? { vertical: 'hidden' as const, handleMouseWheel: false, alwaysConsumeMouseWheel: false }
+          : {})
       }
     })
     editor.setModel({ original: originalModel, modified: modifiedModel })
@@ -99,6 +116,28 @@ export function MonacoDiffEditor({
 
     onMountRef.current?.(editor)
 
+    // Auto-height: report the diff's content height (the taller side in
+    // side-by-side, else the modified editor — which in inline mode already
+    // includes deleted-line and comment view zones) so the host can size to
+    // fit and the outer container owns the scroll.
+    let heightSubs: monaco.IDisposable[] = []
+    if (autoHeight) {
+      const reportHeight = (): void => {
+        const mod = editor.getModifiedEditor()
+        const orig = editor.getOriginalEditor()
+        const h = renderSideBySideRef.current
+          ? Math.max(orig.getContentHeight(), mod.getContentHeight())
+          : mod.getContentHeight()
+        onContentHeightRef.current?.(h)
+      }
+      heightSubs = [
+        editor.getModifiedEditor().onDidContentSizeChange(reportHeight),
+        editor.getOriginalEditor().onDidContentSizeChange(reportHeight),
+        editor.onDidUpdateDiff(reportHeight)
+      ]
+      reportHeight()
+    }
+
     const changeSub = editor
       .getModifiedEditor()
       .onDidChangeModelContent(() => {
@@ -149,6 +188,7 @@ export function MonacoDiffEditor({
       moveSub.dispose()
       leaveSub.dispose()
       downSub.dispose()
+      for (const s of heightSubs) s.dispose()
       glyphCollection.clear()
       // Dispose the editor before the models it holds. Disposing models
       // first fires "TextModel got disposed before DiffEditorWidget model

From c396353fc9498dd2f71d3589e7ccba57ee89e71a Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Tue, 2 Jun 2026 15:00:53 -0400
Subject: [PATCH 33/63] feat(review): stack all file diffs in one scrollable
 pane

Replace the one-file-at-a-time review with a single scroll of every
changed file's diff in listing order (GitHub-style). Each file is a
section that lazy-mounts its Monaco diff editor only once it scrolls
within ~800px of the viewport (IntersectionObserver), then auto-sizes to
its content height so the outer container owns the scroll. Before mount a
placeholder sized from the file's +/- counts keeps the scrollbar stable.

ReviewDiffPane becomes a section: the `c` shortcut is now gated to the
hovered section (every section installs the listener, only the hovered
one acts), the file header sticks to the top while its diff scrolls, and
diff fetch is deferred until near-viewport. ReviewPane maps all files to
sections, binds comments/reviewed/add per file, and the file tree +
comment list scroll a section into view instead of swapping panes.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/ReviewDiffPane.tsx | 106 +++++++++++++++-----
 src/renderer/components/ReviewPane.tsx     | 111 +++++++++++++--------
 2 files changed, 146 insertions(+), 71 deletions(-)

diff --git a/src/renderer/components/ReviewDiffPane.tsx b/src/renderer/components/ReviewDiffPane.tsx
index 7f65aa96..b9759b5c 100644
--- a/src/renderer/components/ReviewDiffPane.tsx
+++ b/src/renderer/components/ReviewDiffPane.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useRef } from 'react'
+import { useState, useEffect, useCallback, useRef, type RefObject } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
 import * as monaco from 'monaco-editor'
 import ReactMarkdown from 'react-markdown'
@@ -31,6 +31,10 @@ interface ReviewDiffPaneProps {
   ignoreTrimWhitespace: boolean
   /** True when the review tab is active/visible — gates the `c` shortcut. */
   active?: boolean
+  /** The scroll container that stacks all the file sections. Used as the
+   *  IntersectionObserver root so this section lazy-mounts its Monaco editor
+   *  only when it nears the viewport. */
+  scrollRoot?: RefObject<HTMLElement | null>
   /** Scroll the diff to this line when it matches the current file. Used by
    *  the comment list to jump to a comment. */
   revealTarget?: { filePath: string; line: number; nonce: number } | null
@@ -572,6 +576,7 @@ export function ReviewDiffPane({
   sideBySide,
   ignoreTrimWhitespace,
   active,
+  scrollRoot,
   revealTarget,
   onToggleReviewed,
   onAddComment,
@@ -584,6 +589,14 @@ export function ReviewDiffPane({
 }: ReviewDiffPaneProps): JSX.Element {
   const backend = useBackend()
   const settings = useSettings()
+  // Lazy-mount: the Monaco editor is only constructed once this section has
+  // scrolled near the viewport (stays mounted afterwards). `contentHeight`
+  // is the editor's reported height in auto-height mode; before mount we show
+  // a placeholder sized from the file's +/- counts so scroll stays stable.
+  const rootRef = useRef<HTMLDivElement | null>(null)
+  const isHoveredRef = useRef(false)
+  const [hasBeenNear, setHasBeenNear] = useState(false)
+  const [contentHeight, setContentHeight] = useState(0)
   const [sides, setSides] = useState<FileDiffSides | null>(null)
   const [loading, setLoading] = useState(false)
   const [commentLine, setCommentLine] = useState<number | null>(null)
@@ -624,9 +637,25 @@ export function ReviewDiffPane({
     })
   }, [])
 
+  // Mark this section "near" once it scrolls within ~800px of the viewport,
+  // then stay mounted. Observed against the stacked scroll container.
   useEffect(() => {
-    if (!file) {
-      setSides(null)
+    if (hasBeenNear) return
+    const el = rootRef.current
+    if (!el) return
+    const io = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((e) => e.isIntersecting)) setHasBeenNear(true)
+      },
+      { root: scrollRoot?.current ?? null, rootMargin: '800px 0px' }
+    )
+    io.observe(el)
+    return () => io.disconnect()
+  }, [hasBeenNear, scrollRoot])
+
+  useEffect(() => {
+    if (!file || !hasBeenNear) {
+      if (!file) setSides(null)
       return
     }
     let cancelled = false
@@ -661,7 +690,7 @@ export function ReviewDiffPane({
     return () => {
       cancelled = true
     }
-  }, [worktreePath, file?.path, file?.staged, mode, commitHash, commitRange?.fromHash, commitRange?.toHash])
+  }, [hasBeenNear, worktreePath, file?.path, file?.staged, mode, commitHash, commitRange?.fromHash, commitRange?.toHash])
 
   const clearViewZones = useCallback(() => {
     const editor = editorRef.current
@@ -880,14 +909,16 @@ export function ReviewDiffPane({
   )
 
   // `c` opens a comment input on the hovered diff line, or a file-level
-  // comment (line 0) when the mouse isn't over a line. Window listener so
-  // it works whether focus is in the diff or the file tree; matches the
-  // review shortcut style — bail only on a real form field (the inline
-  // comment box and the file filter), never on Monaco's own input.
+  // comment (line 0) when the mouse isn't over a line. Every stacked section
+  // installs this listener, so it only acts when the mouse is over THIS
+  // section — otherwise N sections would all open an input at once. Bail only
+  // on a real form field (the inline comment box and the file filter), never
+  // on Monaco's own input.
   useEffect(() => {
     if (!file || !active) return
     const onKey = (e: KeyboardEvent): void => {
       if (e.key !== 'c' || e.metaKey || e.ctrlKey || e.altKey) return
+      if (!isHoveredRef.current) return
       const el = e.target as HTMLElement | null
       if (el instanceof HTMLInputElement) return
       if (el instanceof HTMLTextAreaElement && !el.classList.contains('inputarea')) return
@@ -906,10 +937,29 @@ export function ReviewDiffPane({
     )
   }
 
+  // Auto-height host: use the editor's reported content height once mounted,
+  // else a placeholder estimate from the file's +/- counts so the stacked
+  // scroll doesn't jump when this section mounts.
+  const lineH = Math.round(scaledEditorFontSize(settings.terminalFontSize, settings.uiScale) * 1.5)
+  const estimateHeight = Math.min(
+    1600,
+    Math.max(160, ((file.additions ?? 0) + (file.deletions ?? 0) + 8) * lineH)
+  )
+  const hostHeight = contentHeight > 0 ? contentHeight : estimateHeight
+
   return (
-    <div className="flex flex-col h-full">
+    <div
+      ref={rootRef}
+      className="flex flex-col"
+      onMouseEnter={() => {
+        isHoveredRef.current = true
+      }}
+      onMouseLeave={() => {
+        isHoveredRef.current = false
+      }}
+    >
       {/* File header */}
-      <div className="flex items-center gap-2 px-3 py-2 border-b border-border bg-panel shrink-0">
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-border bg-panel sticky top-0 z-20">
         <Tooltip label={copiedPath ? 'Copied!' : 'Copy file path'}>
           <button
             onClick={() => {
@@ -1012,14 +1062,24 @@ export function ReviewDiffPane({
         )}
       </div>
 
-      {/* Diff with inline comments via view zones */}
-      <div className="flex-1 min-h-0 relative">
-        {loading && (
-          <div className="absolute inset-0 flex items-center justify-center text-faint text-sm z-10">
+      {/* Diff with inline comments via view zones. Auto-height: the editor
+          grows to its content and the stacked container owns the scroll. */}
+      <div className="relative" style={{ height: hostHeight }}>
+        {!hasBeenNear ? (
+          <div className="absolute inset-0" aria-hidden />
+        ) : loading ? (
+          <div className="absolute inset-0 flex items-center justify-center text-faint text-sm">
             Loading diff...
           </div>
-        )}
-        {!loading && sides && (
+        ) : sides?.error ? (
+          <div className="absolute inset-0 flex items-center justify-center text-danger text-sm">
+            {sides.error}
+          </div>
+        ) : sides?.modifiedBinary ? (
+          <div className="absolute inset-0 flex items-center justify-center text-faint text-sm">
+            Binary file — cannot display diff
+          </div>
+        ) : sides ? (
           <MonacoDiffEditor
             original={sides.original}
             modified={sides.modified}
@@ -1030,22 +1090,14 @@ export function ReviewDiffPane({
             fontFamily={settings.terminalFontFamily || undefined}
             fontSize={scaledEditorFontSize(settings.terminalFontSize, settings.uiScale)}
             wordWrap={wordWrap}
+            autoHeight
+            onContentHeight={setContentHeight}
             onReferenceLine={handleReferenceLine}
             onEditorMount={handleEditorMount}
             glyphClassName="comment-line-glyph"
             glyphHoverMessage="Add a comment on this line"
           />
-        )}
-        {!loading && sides?.error && (
-          <div className="absolute inset-0 flex items-center justify-center text-danger text-sm">
-            {sides.error}
-          </div>
-        )}
-        {!loading && sides?.modifiedBinary && (
-          <div className="absolute inset-0 flex items-center justify-center text-faint text-sm">
-            Binary file — cannot display diff
-          </div>
-        )}
+        ) : null}
       </div>
     </div>
   )
diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index 987af829..9093c540 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -63,6 +63,18 @@ export function ReviewPane({
   const [showPrDescription, setShowPrDescription] = useState(false)
   const [revealTarget, setRevealTarget] = useState<{ filePath: string; line: number; nonce: number } | null>(null)
   const revealNonceRef = useRef(0)
+  // Scroll container + per-file section elements for the stacked all-files
+  // view, so the file tree / comment list can scroll a file into view.
+  const stackScrollRef = useRef<HTMLDivElement | null>(null)
+  const sectionRefs = useRef(new Map<string, HTMLDivElement | null>())
+  const scrollToFile = useCallback((filePath: string) => {
+    sectionRefs.current.get(filePath)?.scrollIntoView({ block: 'start', behavior: 'smooth' })
+  }, [])
+  // Scroll the stacked view to whichever file the comment list / file tree
+  // last asked to reveal.
+  useEffect(() => {
+    if (revealTarget) scrollToFile(revealTarget.filePath)
+  }, [revealTarget, scrollToFile])
   const [refreshKey, setRefreshKey] = useState(0)
   const [syncState, setSyncState] = useState<'idle' | 'syncing' | 'ok' | 'error'>('idle')
   const [syncDetail, setSyncDetail] = useState<string | null>(null)
@@ -167,16 +179,6 @@ export function ReviewPane({
     if (fileRequest) setSelectedFile(fileRequest.filePath)
   }, [fileRequest?.nonce, fileRequest?.filePath])
 
-  const selectedFileObj = useMemo(
-    () => files.find((f) => f.path === selectedFile) ?? null,
-    [files, selectedFile]
-  )
-
-  const fileComments = useMemo(
-    () => (selectedFile ? comments.filter((c) => c.filePath === selectedFile) : []),
-    [comments, selectedFile]
-  )
-
   const { totalAdditions, totalDeletions } = useMemo(() => {
     let add = 0
     let del = 0
@@ -209,20 +211,20 @@ export function ReviewPane({
   }, [])
 
   const handleAddComment = useCallback(
-    (lineNumber: number, body: string) => {
-      if (!selectedFile) return
+    (filePath: string, lineNumber: number, body: string) => {
+      if (!filePath) return
       setComments((prev) => [
         ...prev,
         {
           id: `comment-${++commentIdCounter}`,
-          filePath: selectedFile,
+          filePath,
           lineNumber,
           body,
           timestamp: Date.now()
         }
       ])
     },
-    [selectedFile]
+    []
   )
 
   const handleDeleteComment = useCallback((id: string) => {
@@ -595,7 +597,10 @@ export function ReviewPane({
             reviewedFiles={reviewedFiles}
             comments={comments}
             collapsedDirs={collapsedDirs}
-            onSelectFile={setSelectedFile}
+            onSelectFile={(fp) => {
+              setSelectedFile(fp)
+              scrollToFile(fp)
+            }}
             onToggleReviewed={handleToggleReviewed}
             onToggleDir={handleToggleDir}
             onSetSideBySide={setSideBySide}
@@ -609,35 +614,53 @@ export function ReviewPane({
 
         <ResizeHandle onDelta={handleFileTreeResize} />
 
-        {/* Diff pane */}
-        <div className="flex-1 min-w-0">
-          <ReviewDiffPane
-            worktreePath={worktreePath}
-            file={selectedFileObj}
-            mode="branch"
-            commitHash={isSingleCommit ? fromCommit : undefined}
-            commitRange={
-              !isWholeBranch && !isSingleCommit && fromCommit && toCommit
-                ? { fromHash: fromCommit, toHash: toCommit }
-                : undefined
-            }
-            reviewed={selectedFile ? reviewedFiles.has(selectedFile) : false}
-            comments={fileComments}
-            sideBySide={sideBySide}
-            ignoreTrimWhitespace={!showWhitespace}
-            active={active}
-            revealTarget={revealTarget}
-            onToggleReviewed={() => {
-              if (selectedFile) handleToggleReviewed(selectedFile)
-            }}
-            onAddComment={handleAddComment}
-            onDeleteComment={handleDeleteComment}
-            wordWrap={wordWrap}
-            onOpenEditor={onOpenEditor}
-            onAddReply={handleAddReply}
-            onResolveThread={handleResolveThread}
-            pendingResolve={pendingResolve}
-          />
+        {/* Stacked diff pane — every file's diff in one scroll, in listing
+            order. Each section lazy-mounts its Monaco editor as it nears the
+            viewport. */}
+        <div ref={stackScrollRef} className="flex-1 min-w-0 overflow-y-auto">
+          {files.length === 0 ? (
+            <div className="flex items-center justify-center h-full text-faint text-sm">
+              No changes to review
+            </div>
+          ) : (
+            files.map((f) => (
+              <div
+                key={f.path}
+                ref={(el) => {
+                  if (el) sectionRefs.current.set(f.path, el)
+                  else sectionRefs.current.delete(f.path)
+                }}
+                className="border-b border-border"
+              >
+                <ReviewDiffPane
+                  worktreePath={worktreePath}
+                  file={f}
+                  mode="branch"
+                  commitHash={isSingleCommit ? fromCommit : undefined}
+                  commitRange={
+                    !isWholeBranch && !isSingleCommit && fromCommit && toCommit
+                      ? { fromHash: fromCommit, toHash: toCommit }
+                      : undefined
+                  }
+                  reviewed={reviewedFiles.has(f.path)}
+                  comments={comments.filter((c) => c.filePath === f.path)}
+                  sideBySide={sideBySide}
+                  ignoreTrimWhitespace={!showWhitespace}
+                  active={active}
+                  scrollRoot={stackScrollRef}
+                  revealTarget={revealTarget}
+                  onToggleReviewed={() => handleToggleReviewed(f.path)}
+                  onAddComment={(line, body) => handleAddComment(f.path, line, body)}
+                  onDeleteComment={handleDeleteComment}
+                  wordWrap={wordWrap}
+                  onOpenEditor={onOpenEditor}
+                  onAddReply={handleAddReply}
+                  onResolveThread={handleResolveThread}
+                  pendingResolve={pendingResolve}
+                />
+              </div>
+            ))
+          )}
         </div>
       </div>
     </div>

From ea8ff4b745e33331269795912de93af3b71b678a Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Tue, 2 Jun 2026 15:04:12 -0400
Subject: [PATCH 34/63] feat(review): collapsible file sections + clearer
 separation

- Each stacked file section gets a chevron to collapse/expand its diff
  independently of viewed state. Collapsed sections render just the
  header (and don't hold a Monaco editor).
- Marking a file Viewed now collapses it (GitHub-style); un-viewing
  expands it. Files pulled as viewed from a sync collapse too.
- More breathing room between files: bottom margin + a thicker bottom
  border so the end of one diff and the next file's header are clearly
  separated.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/ReviewDiffPane.tsx | 23 ++++++++++++--
 src/renderer/components/ReviewPane.tsx     | 35 +++++++++++++++++++---
 2 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/ReviewDiffPane.tsx b/src/renderer/components/ReviewDiffPane.tsx
index b9759b5c..b4d452ee 100644
--- a/src/renderer/components/ReviewDiffPane.tsx
+++ b/src/renderer/components/ReviewDiffPane.tsx
@@ -5,7 +5,7 @@ import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import rehypeRaw from 'rehype-raw'
 import rehypeSanitize from 'rehype-sanitize'
-import { Check, CheckCheck, Copy, FoldVertical, MessagesSquare, Pencil, Reply, UnfoldVertical } from 'lucide-react'
+import { Check, CheckCheck, ChevronDown, ChevronRight, Copy, FoldVertical, MessagesSquare, Pencil, Reply, UnfoldVertical } from 'lucide-react'
 import type { FileDiffSides, ChangedFile } from '../types'
 import type { ReviewComment } from './ReviewFileTree'
 import { MonacoDiffEditor } from './MonacoDiffEditor'
@@ -38,6 +38,9 @@ interface ReviewDiffPaneProps {
   /** Scroll the diff to this line when it matches the current file. Used by
    *  the comment list to jump to a comment. */
   revealTarget?: { filePath: string; line: number; nonce: number } | null
+  /** Collapsed sections render just the header (no diff editor). */
+  collapsed?: boolean
+  onToggleCollapsed?: () => void
   onToggleReviewed: () => void
   onAddComment: (lineNumber: number, body: string) => void
   onDeleteComment: (id: string) => void
@@ -578,6 +581,8 @@ export function ReviewDiffPane({
   active,
   scrollRoot,
   revealTarget,
+  collapsed = false,
+  onToggleCollapsed,
   onToggleReviewed,
   onAddComment,
   onDeleteComment,
@@ -960,6 +965,17 @@ export function ReviewDiffPane({
     >
       {/* File header */}
       <div className="flex items-center gap-2 px-3 py-2 border-b border-border bg-panel sticky top-0 z-20">
+        {onToggleCollapsed && (
+          <button
+            onClick={onToggleCollapsed}
+            aria-label={collapsed ? 'Expand diff' : 'Collapse diff'}
+            aria-expanded={!collapsed}
+            className="shrink-0 text-faint hover:text-fg cursor-pointer"
+          >
+            {collapsed ? <ChevronRight className="icon-sm" /> : <ChevronDown className="icon-sm" />}
+          </button>
+        )}
+
         <Tooltip label={copiedPath ? 'Copied!' : 'Copy file path'}>
           <button
             onClick={() => {
@@ -1063,7 +1079,9 @@ export function ReviewDiffPane({
       </div>
 
       {/* Diff with inline comments via view zones. Auto-height: the editor
-          grows to its content and the stacked container owns the scroll. */}
+          grows to its content and the stacked container owns the scroll.
+          Collapsed sections render just the header. */}
+      {!collapsed && (
       <div className="relative" style={{ height: hostHeight }}>
         {!hasBeenNear ? (
           <div className="absolute inset-0" aria-hidden />
@@ -1099,6 +1117,7 @@ export function ReviewDiffPane({
           />
         ) : null}
       </div>
+      )}
     </div>
   )
 }
diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index 9093c540..d2b46061 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -51,6 +51,9 @@ export function ReviewPane({
   const [files, setFiles] = useState<ChangedFile[]>([])
   const [selectedFile, setSelectedFile] = useState<string | null>(null)
   const [reviewedFiles, setReviewedFiles] = useState<Set<string>>(new Set())
+  // Files whose diff is collapsed in the stacked view. Marking a file viewed
+  // collapses it (GitHub-style); the chevron toggles collapse independently.
+  const [collapsedFiles, setCollapsedFiles] = useState<Set<string>>(new Set())
   const [comments, setComments] = useState<ReviewComment[]>([])
   const [collapsedDirs, setCollapsedDirs] = useState<Set<string>>(new Set())
   const [fileTreeWidth, setFileTreeWidth] = useState<number>(240)
@@ -193,14 +196,31 @@ export function ReviewPane({
     (path: string) => {
       setReviewedFiles((prev) => {
         const next = new Set(prev)
-        if (next.has(path)) next.delete(path)
-        else next.add(path)
+        const nowReviewed = !next.has(path)
+        if (nowReviewed) next.add(path)
+        else next.delete(path)
+        // Collapse on view, expand on un-view.
+        setCollapsedFiles((c) => {
+          const cn = new Set(c)
+          if (nowReviewed) cn.add(path)
+          else cn.delete(path)
+          return cn
+        })
         return next
       })
     },
     []
   )
 
+  const handleToggleCollapsed = useCallback((path: string) => {
+    setCollapsedFiles((prev) => {
+      const next = new Set(prev)
+      if (next.has(path)) next.delete(path)
+      else next.add(path)
+      return next
+    })
+  }, [])
+
   const handleToggleDir = useCallback((dir: string) => {
     setCollapsedDirs((prev) => {
       const next = new Set(prev)
@@ -341,8 +361,13 @@ export function ReviewPane({
           }))
         )
         // Reflect the merged viewed state (local ∪ GitHub) so files viewed
-        // on GitHub show as reviewed here too.
+        // on GitHub show as reviewed here too — and collapse those diffs.
         setReviewedFiles(new Set(result.reviewedFiles))
+        setCollapsedFiles((prev) => {
+          const next = new Set(prev)
+          for (const p of result.reviewedFiles) next.add(p)
+          return next
+        })
         // Resolve requests were sent; GitHub's resolved state is now in the
         // pulled comments, so clear the pending set.
         if (!pullOnly) setPendingResolve(new Set())
@@ -630,7 +655,7 @@ export function ReviewPane({
                   if (el) sectionRefs.current.set(f.path, el)
                   else sectionRefs.current.delete(f.path)
                 }}
-                className="border-b border-border"
+                className="mb-2 border-b-4 border-border/70"
               >
                 <ReviewDiffPane
                   worktreePath={worktreePath}
@@ -643,6 +668,7 @@ export function ReviewPane({
                       : undefined
                   }
                   reviewed={reviewedFiles.has(f.path)}
+                  collapsed={collapsedFiles.has(f.path)}
                   comments={comments.filter((c) => c.filePath === f.path)}
                   sideBySide={sideBySide}
                   ignoreTrimWhitespace={!showWhitespace}
@@ -650,6 +676,7 @@ export function ReviewPane({
                   scrollRoot={stackScrollRef}
                   revealTarget={revealTarget}
                   onToggleReviewed={() => handleToggleReviewed(f.path)}
+                  onToggleCollapsed={() => handleToggleCollapsed(f.path)}
                   onAddComment={(line, body) => handleAddComment(f.path, line, body)}
                   onDeleteComment={handleDeleteComment}
                   wordWrap={wordWrap}

From 72127b8500c375105c0f141ee8b04f810b540e32 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Tue, 2 Jun 2026 15:05:40 -0400
Subject: [PATCH 35/63] fix(review): hide the diff overview ruler

The code minimap was already off; the colored strip on the right edge of
each diff was Monaco's diff overview ruler. Disable it
(renderOverviewRuler + overviewRulerLanes: 0) for a cleaner stacked
review.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/MonacoDiffEditor.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/renderer/components/MonacoDiffEditor.tsx b/src/renderer/components/MonacoDiffEditor.tsx
index b4244d75..bb2891ad 100644
--- a/src/renderer/components/MonacoDiffEditor.tsx
+++ b/src/renderer/components/MonacoDiffEditor.tsx
@@ -89,6 +89,10 @@ export function MonacoDiffEditor({
       fontSize: fontSize || 13,
       wordWrap: wordWrap ? 'on' : 'off',
       minimap: { enabled: false },
+      // No minimap and no diff overview ruler (the colored change-strip on
+      // the right edge) — keeps the stacked review clean.
+      renderOverviewRuler: false,
+      overviewRulerLanes: 0,
       scrollBeyondLastLine: false,
       renderLineHighlight: 'line',
       smoothScrolling: true,

From 5c5832f5a0e6db1000b1badb4d892149c34878d7 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Tue, 2 Jun 2026 15:06:49 -0400
Subject: [PATCH 36/63] fix(review): restore horizontal scroll inside stacked
 diffs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The auto-height mode set handleMouseWheel: false to make vertical wheel
bubble to the outer container, but that disabled both axes — long lines
could no longer be scrolled horizontally. Drop it and rely on
alwaysConsumeMouseWheel: false instead: the editor is sized to exactly
its content so it has no vertical scroll room (vertical wheel bubbles
up), while horizontal wheel still scrolls the diff.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/MonacoDiffEditor.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/MonacoDiffEditor.tsx b/src/renderer/components/MonacoDiffEditor.tsx
index bb2891ad..d28cce1e 100644
--- a/src/renderer/components/MonacoDiffEditor.tsx
+++ b/src/renderer/components/MonacoDiffEditor.tsx
@@ -107,11 +107,13 @@ export function MonacoDiffEditor({
         verticalScrollbarSize: 10,
         horizontalScrollbarSize: 10,
         useShadows: false,
-        // Auto-height mode: the editor grows to its content and the OUTER
-        // container scrolls, so hide the inner vertical scrollbar and let
-        // wheel events bubble up rather than being consumed here.
+        // Auto-height mode: the editor grows to exactly its content height and
+        // the OUTER container scrolls. Hide the inner vertical scrollbar, but
+        // keep mouse-wheel handling ON — with no vertical scroll room and
+        // alwaysConsumeMouseWheel off, vertical wheel bubbles up to the stacked
+        // container while HORIZONTAL wheel still scrolls long lines here.
         ...(autoHeight
-          ? { vertical: 'hidden' as const, handleMouseWheel: false, alwaysConsumeMouseWheel: false }
+          ? { vertical: 'hidden' as const, alwaysConsumeMouseWheel: false }
           : {})
       }
     })

From 1b7c512a529de340c0a2819149a5c4093aa3ebd6 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Tue, 2 Jun 2026 15:11:40 -0400
Subject: [PATCH 37/63] fix(review): hide the unstyled flash when expanding a
 diff
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A freshly-mounted auto-height diff editor briefly paints the full
modified text — un-tokenized and before hideUnchangedRegions collapses
it — before the diff settles, a visible flash when expanding a collapsed
section. Mount the editor hidden (opacity 0, set synchronously so the
first paint is hidden) and fade it in once onDidUpdateDiff fires (plus a
frame for tokenization), with a 300ms fallback reveal so identical/error/
binary diffs can't get stuck invisible.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/MonacoDiffEditor.tsx | 28 +++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/MonacoDiffEditor.tsx b/src/renderer/components/MonacoDiffEditor.tsx
index d28cce1e..353a1083 100644
--- a/src/renderer/components/MonacoDiffEditor.tsx
+++ b/src/renderer/components/MonacoDiffEditor.tsx
@@ -127,7 +127,26 @@ export function MonacoDiffEditor({
     // includes deleted-line and comment view zones) so the host can size to
     // fit and the outer container owns the scroll.
     let heightSubs: monaco.IDisposable[] = []
+    let revealTimer = 0
     if (autoHeight) {
+      // Mount hidden and fade in once the diff has actually computed —
+      // otherwise the fresh editor briefly paints the full modified text
+      // un-tokenized and before hideUnchangedRegions collapses it, a visible
+      // flash on (re)expand. Set synchronously so the first paint is hidden.
+      const host = hostRef.current
+      if (host) {
+        host.style.opacity = '0'
+        host.style.transition = 'opacity 100ms ease'
+      }
+      let revealed = false
+      const reveal = (): void => {
+        if (revealed) return
+        revealed = true
+        // One more frame so tokenization for the visible range lands too.
+        requestAnimationFrame(() => {
+          if (hostRef.current) hostRef.current.style.opacity = '1'
+        })
+      }
       const reportHeight = (): void => {
         const mod = editor.getModifiedEditor()
         const orig = editor.getOriginalEditor()
@@ -139,9 +158,15 @@ export function MonacoDiffEditor({
       heightSubs = [
         editor.getModifiedEditor().onDidContentSizeChange(reportHeight),
         editor.getOriginalEditor().onDidContentSizeChange(reportHeight),
-        editor.onDidUpdateDiff(reportHeight)
+        editor.onDidUpdateDiff(() => {
+          reportHeight()
+          reveal()
+        })
       ]
       reportHeight()
+      // Fallback: reveal even if onDidUpdateDiff never fires (identical
+      // content, error, binary) so the editor can't get stuck invisible.
+      revealTimer = window.setTimeout(reveal, 300)
     }
 
     const changeSub = editor
@@ -195,6 +220,7 @@ export function MonacoDiffEditor({
       leaveSub.dispose()
       downSub.dispose()
       for (const s of heightSubs) s.dispose()
+      if (revealTimer) clearTimeout(revealTimer)
       glyphCollection.clear()
       // Dispose the editor before the models it holds. Disposing models
       // first fires "TextModel got disposed before DiffEditorWidget model

From 13d3cbcefe5b3c746f1bb15c03ebd171b3029453 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Tue, 2 Jun 2026 15:16:11 -0400
Subject: [PATCH 38/63] feat(review): withhold deleted + very large diffs
 behind click-to-reveal

Deleted files and diffs over 600 changed lines now render a click-to-show
row ("Diff not shown for deleted files by default" / "Large diffs are not
shown by default") instead of the full diff, keeping the stacked view
light. The diff isn't even fetched until revealed; clicking loads and
renders it normally.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/ReviewDiffPane.tsx | 36 ++++++++++++++++++++--
 1 file changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/ReviewDiffPane.tsx b/src/renderer/components/ReviewDiffPane.tsx
index b4d452ee..5cbf4d8e 100644
--- a/src/renderer/components/ReviewDiffPane.tsx
+++ b/src/renderer/components/ReviewDiffPane.tsx
@@ -65,6 +65,17 @@ const STATUS_LABEL: Record<ChangedFile['status'], string> = {
   untracked: 'Untracked'
 }
 
+// Diffs with more than this many changed lines are withheld behind a
+// click-to-reveal placeholder so the stacked view stays light by default.
+const LARGE_DIFF_LINES = 600
+
+/** Why a file's diff is hidden by default (null = shown normally). */
+function withheldReason(file: ChangedFile): 'deleted' | 'large' | null {
+  if (file.status === 'deleted') return 'deleted'
+  if ((file.additions ?? 0) + (file.deletions ?? 0) > LARGE_DIFF_LINES) return 'large'
+  return null
+}
+
 const STATUS_COLOR: Record<ChangedFile['status'], string> = {
   added: 'text-success',
   modified: 'text-warning',
@@ -602,6 +613,9 @@ export function ReviewDiffPane({
   const isHoveredRef = useRef(false)
   const [hasBeenNear, setHasBeenNear] = useState(false)
   const [contentHeight, setContentHeight] = useState(0)
+  // Deleted files and very large diffs default to a click-to-reveal
+  // placeholder rather than rendering the whole thing.
+  const [revealed, setRevealed] = useState(false)
   const [sides, setSides] = useState<FileDiffSides | null>(null)
   const [loading, setLoading] = useState(false)
   const [commentLine, setCommentLine] = useState<number | null>(null)
@@ -663,6 +677,8 @@ export function ReviewDiffPane({
       if (!file) setSides(null)
       return
     }
+    // Don't fetch withheld (deleted / very large) diffs until the user opts in.
+    if (withheldReason(file) && !revealed) return
     let cancelled = false
     setLoading(true)
     setCommentLine(null)
@@ -695,7 +711,7 @@ export function ReviewDiffPane({
     return () => {
       cancelled = true
     }
-  }, [hasBeenNear, worktreePath, file?.path, file?.staged, mode, commitHash, commitRange?.fromHash, commitRange?.toHash])
+  }, [hasBeenNear, revealed, worktreePath, file?.path, file?.staged, mode, commitHash, commitRange?.fromHash, commitRange?.toHash])
 
   const clearViewZones = useCallback(() => {
     const editor = editorRef.current
@@ -951,6 +967,8 @@ export function ReviewDiffPane({
     Math.max(160, ((file.additions ?? 0) + (file.deletions ?? 0) + 8) * lineH)
   )
   const hostHeight = contentHeight > 0 ? contentHeight : estimateHeight
+  const reason = withheldReason(file)
+  const withheld = reason !== null && !revealed
 
   return (
     <div
@@ -1080,8 +1098,20 @@ export function ReviewDiffPane({
 
       {/* Diff with inline comments via view zones. Auto-height: the editor
           grows to its content and the stacked container owns the scroll.
-          Collapsed sections render just the header. */}
-      {!collapsed && (
+          Collapsed sections render just the header; deleted/large diffs are
+          withheld behind a click-to-reveal row. */}
+      {!collapsed && withheld && (
+        <button
+          onClick={() => setRevealed(true)}
+          className="w-full text-left px-3 py-4 text-sm text-faint hover:text-fg hover:bg-panel/40 transition-colors cursor-pointer"
+        >
+          {reason === 'deleted'
+            ? 'Diff not shown for deleted files by default'
+            : 'Large diffs are not shown by default'}
+          <span className="ml-2 text-dim">(click to show)</span>
+        </button>
+      )}
+      {!collapsed && !withheld && (
       <div className="relative" style={{ height: hostHeight }}>
         {!hasBeenNear ? (
           <div className="absolute inset-0" aria-hidden />

From 06965f4ed750489b917da2a92863b5aa90c76486 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Tue, 2 Jun 2026 15:23:17 -0400
Subject: [PATCH 39/63] feat(review): unmount off-screen diff editors
 (virtualization)

Stacked sections now mount their Monaco editor when within ~800px of the
viewport and dispose it once more than ~2000px away, so memory tracks
what's on screen rather than how far you've scrolled. The hysteresis band
prevents thrash-cycling at the edge. The diff fetch still happens once
(latched hasBeenNear) so cached sides survive unmount/remount with no
refetch, the measured content height holds the placeholder so the scroll
doesn't jump, and comment view-zone roots are torn down on unmount and
re-rendered on remount.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/ReviewDiffPane.tsx | 48 +++++++++++++++++-----
 1 file changed, 38 insertions(+), 10 deletions(-)

diff --git a/src/renderer/components/ReviewDiffPane.tsx b/src/renderer/components/ReviewDiffPane.tsx
index 5cbf4d8e..e2b97c84 100644
--- a/src/renderer/components/ReviewDiffPane.tsx
+++ b/src/renderer/components/ReviewDiffPane.tsx
@@ -612,6 +612,7 @@ export function ReviewDiffPane({
   const rootRef = useRef<HTMLDivElement | null>(null)
   const isHoveredRef = useRef(false)
   const [hasBeenNear, setHasBeenNear] = useState(false)
+  const [mounted, setMounted] = useState(false)
   const [contentHeight, setContentHeight] = useState(0)
   // Deleted files and very large diffs default to a click-to-reveal
   // placeholder rather than rendering the whole thing.
@@ -656,21 +657,48 @@ export function ReviewDiffPane({
     })
   }, [])
 
-  // Mark this section "near" once it scrolls within ~800px of the viewport,
-  // then stay mounted. Observed against the stacked scroll container.
+  // Virtualize: mount the Monaco editor when this section scrolls within
+  // ~800px of the viewport, unmount it once it's more than ~2000px away. The
+  // hysteresis band (800–2000px) keeps sections near the edge from
+  // thrash-cycling. `hasBeenNear` (latched) gates the one-time diff fetch so
+  // the cached sides survive unmount/remount; `mounted` toggles the editor.
   useEffect(() => {
-    if (hasBeenNear) return
     const el = rootRef.current
     if (!el) return
-    const io = new IntersectionObserver(
+    const root = scrollRoot?.current ?? null
+    const mountIO = new IntersectionObserver(
       (entries) => {
-        if (entries.some((e) => e.isIntersecting)) setHasBeenNear(true)
+        if (entries.some((e) => e.isIntersecting)) {
+          setHasBeenNear(true)
+          setMounted(true)
+        }
+      },
+      { root, rootMargin: '800px 0px' }
+    )
+    const unmountIO = new IntersectionObserver(
+      (entries) => {
+        if (entries.every((e) => !e.isIntersecting)) setMounted(false)
       },
-      { root: scrollRoot?.current ?? null, rootMargin: '800px 0px' }
+      { root, rootMargin: '2000px 0px' }
     )
-    io.observe(el)
-    return () => io.disconnect()
-  }, [hasBeenNear, scrollRoot])
+    mountIO.observe(el)
+    unmountIO.observe(el)
+    return () => {
+      mountIO.disconnect()
+      unmountIO.disconnect()
+    }
+  }, [scrollRoot])
+
+  // When the editor is unmounted (scrolled far away), drop our handle and
+  // tear down the comment view-zone React roots so they don't leak; the
+  // measured height stays in `contentHeight` so the placeholder holds the
+  // scroll position. Comments re-render on remount via the view-zone effect.
+  useEffect(() => {
+    if (mounted) return
+    for (const z of viewZonesRef.current) queueMicrotask(() => z.root.unmount())
+    viewZonesRef.current = []
+    editorRef.current = null
+  }, [mounted])
 
   useEffect(() => {
     if (!file || !hasBeenNear) {
@@ -1113,7 +1141,7 @@ export function ReviewDiffPane({
       )}
       {!collapsed && !withheld && (
       <div className="relative" style={{ height: hostHeight }}>
-        {!hasBeenNear ? (
+        {!mounted ? (
           <div className="absolute inset-0" aria-hidden />
         ) : loading ? (
           <div className="absolute inset-0 flex items-center justify-center text-faint text-sm">

From dd86e7abc4679e3f31cc2310b3f99462c4b78262 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Tue, 2 Jun 2026 15:24:41 -0400
Subject: [PATCH 40/63] fix(review): scroll the stacked view to a file opened
 from the panel

Clicking a committed file in the Changed Files panel highlighted it in
the review file tree but didn't move the diff. Route the cross-component
file request through scrollToFile, with a `files` dep + nonce guard so it
also works when the request arrives before the file list has rendered
(review tab just opened) and only auto-scrolls once per request.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/ReviewPane.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index d2b46061..5733fb30 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -178,9 +178,20 @@ export function ReviewPane({
   // anyway; the file-load effect above preserves a still-valid selection
   // once the list arrives.
   const fileRequest = useReviewFileRequest(worktreePath)
+  const scrolledRequestRef = useRef(-1)
   useEffect(() => {
-    if (fileRequest) setSelectedFile(fileRequest.filePath)
-  }, [fileRequest?.nonce, fileRequest?.filePath])
+    if (!fileRequest) return
+    setSelectedFile(fileRequest.filePath)
+    // Scroll the stacked view to the requested file. The request can arrive
+    // before the file list has rendered (review tab just opened), so the
+    // `files` dep re-runs this once the section element exists; the ref guard
+    // makes sure we only auto-scroll once per request, not on later refreshes.
+    if (scrolledRequestRef.current === fileRequest.nonce) return
+    if (!sectionRefs.current.has(fileRequest.filePath)) return
+    scrolledRequestRef.current = fileRequest.nonce
+    const id = requestAnimationFrame(() => scrollToFile(fileRequest.filePath))
+    return () => cancelAnimationFrame(id)
+  }, [fileRequest?.nonce, fileRequest?.filePath, files, scrollToFile])
 
   const { totalAdditions, totalDeletions } = useMemo(() => {
     let add = 0

From 720f3e881efc908bcd11be69961493962832d0be Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Tue, 2 Jun 2026 15:26:34 -0400
Subject: [PATCH 41/63] feat(review): make the file tree scroll horizontally
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Long / deeply-nested paths were truncated with no way to read them. The
tree's scroll area now scrolls both axes (overflow-auto), and rows size to
their content (w-max min-w-full) with whitespace-nowrap instead of
truncating — so a long path extends into a horizontal scroll while short
rows still fill the panel width.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/ReviewFileTree.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/ReviewFileTree.tsx b/src/renderer/components/ReviewFileTree.tsx
index 77fff06c..c6dfc74e 100644
--- a/src/renderer/components/ReviewFileTree.tsx
+++ b/src/renderer/components/ReviewFileTree.tsx
@@ -333,7 +333,7 @@ export function ReviewFileTree({
           className="w-full bg-panel-raised border border-border rounded px-2 py-1 text-xs text-fg placeholder:text-faint focus:outline-none focus:border-border-strong"
         />
       </div>
-      <div className="flex-1 overflow-y-auto min-h-0">
+      <div className="flex-1 overflow-auto min-h-0">
         {filtering && navigableFiles.length === 0 && (
           <div className="px-3 py-2 text-faint">No matches</div>
         )}
@@ -438,7 +438,7 @@ function DirRow({
   return (
     <div
       onClick={onToggle}
-      className="flex items-center gap-1 px-2 py-0.5 hover:bg-panel-raised cursor-pointer select-none"
+      className="flex w-max min-w-full items-center gap-1 px-2 py-0.5 hover:bg-panel-raised cursor-pointer select-none"
       style={{ paddingLeft: 8 + depth * 12 }}
     >
       <ChevronRight
@@ -449,7 +449,7 @@ function DirRow({
       ) : (
         <Folder className="icon-xs shrink-0 text-info" />
       )}
-      <span className="truncate text-fg">{name}</span>
+      <span className="whitespace-nowrap text-fg">{name}</span>
     </div>
   )
 }
@@ -475,7 +475,7 @@ function FileRow({
   return (
     <div
       onClick={onSelect}
-      className={`flex items-center gap-1.5 py-0.5 pr-2 cursor-pointer transition-colors ${
+      className={`flex w-max min-w-full items-center gap-1.5 py-0.5 pr-2 cursor-pointer transition-colors ${
         selected
           ? 'bg-accent/15 border-l-2 border-accent'
           : 'border-l-2 border-transparent hover:bg-panel-raised'
@@ -488,7 +488,7 @@ function FileRow({
         {STATUS_LABEL[file.status]}
       </span>
 
-      <span className="truncate flex-1 text-fg">{name}</span>
+      <span className="whitespace-nowrap text-fg">{name}</span>
 
       {commentCount > 0 && (
         <span className="shrink-0 text-xs bg-info/20 text-info px-1 rounded-full tabular-nums">

From 2d7283e3af38fc12fe44e0d1e75c177664e7eb0c Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Tue, 2 Jun 2026 15:28:02 -0400
Subject: [PATCH 42/63] refactor(review): move the commit selector above the
 file tree

The commit selector scopes which commits the file list reflects, so it
reads better sitting directly above the file browser than tucked in the
top toolbar. Move it into the file-tree column header; the top bar now
holds just the view menu, Send, and Sync.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/ReviewPane.tsx | 65 ++++++++++++++------------
 1 file changed, 34 insertions(+), 31 deletions(-)

diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index 5733fb30..89127edb 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -490,16 +490,6 @@ export function ReviewPane({
             onReviewDiffMode={(m) => backend.setReviewDiffMode(m)}
           />
 
-          <CommitSelector
-            commits={commits}
-            isWholeBranch={isWholeBranch}
-            selectionIndices={selectionIndices}
-            onSelectAll={handleSelectAllCommits}
-            onCommitClick={handleCommitClick}
-            fromCommit={fromCommit}
-            toCommit={toCommit}
-          />
-
           <div className="flex-1" />
 
           <div className="flex items-center gap-1.5 text-xs">
@@ -622,30 +612,43 @@ export function ReviewPane({
       </div>
 
       <div className="flex flex-1 min-h-0">
-        {/* File tree */}
+        {/* File tree column — commit selector scopes the file list below it */}
         <div
-          className="shrink-0 overflow-hidden"
+          className="shrink-0 flex flex-col min-h-0"
           style={{ width: fileTreeWidth }}
         >
-          <ReviewFileTree
-            files={files}
-            selectedFile={selectedFile}
-            reviewedFiles={reviewedFiles}
-            comments={comments}
-            collapsedDirs={collapsedDirs}
-            onSelectFile={(fp) => {
-              setSelectedFile(fp)
-              scrollToFile(fp)
-            }}
-            onToggleReviewed={handleToggleReviewed}
-            onToggleDir={handleToggleDir}
-            onSetSideBySide={setSideBySide}
-            onShowShortcuts={() => setShowShortcuts((v) => !v)}
-            onRevealLine={(filePath, line) =>
-              setRevealTarget({ filePath, line, nonce: ++revealNonceRef.current })
-            }
-            active={active}
-          />
+          <div className="shrink-0 p-2 border-b border-border">
+            <CommitSelector
+              commits={commits}
+              isWholeBranch={isWholeBranch}
+              selectionIndices={selectionIndices}
+              onSelectAll={handleSelectAllCommits}
+              onCommitClick={handleCommitClick}
+              fromCommit={fromCommit}
+              toCommit={toCommit}
+            />
+          </div>
+          <div className="flex-1 min-h-0 overflow-hidden">
+            <ReviewFileTree
+              files={files}
+              selectedFile={selectedFile}
+              reviewedFiles={reviewedFiles}
+              comments={comments}
+              collapsedDirs={collapsedDirs}
+              onSelectFile={(fp) => {
+                setSelectedFile(fp)
+                scrollToFile(fp)
+              }}
+              onToggleReviewed={handleToggleReviewed}
+              onToggleDir={handleToggleDir}
+              onSetSideBySide={setSideBySide}
+              onShowShortcuts={() => setShowShortcuts((v) => !v)}
+              onRevealLine={(filePath, line) =>
+                setRevealTarget({ filePath, line, nonce: ++revealNonceRef.current })
+              }
+              active={active}
+            />
+          </div>
         </div>
 
         <ResizeHandle onDelta={handleFileTreeResize} />

From 1580defd2cb08b96d9622457d061dea6232a6aea Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Tue, 2 Jun 2026 15:31:44 -0400
Subject: [PATCH 43/63] refactor(review): consolidate the review toolbar onto
 one row
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- First row, left→right: PR description, keyboard shortcuts, comment
  list, reviewers, view menu (hamburger).
- Reviewed count and total diff stat move up to the first row, just left
  of Send to Agent / Sync.
- Reviewed indicator is now a compact "m/n reviewed" (files reviewed /
  total), green when complete.
- The comment-list button drops the "comment(s)" word — just the count.
- The second status row is gone; the progress bar stays under the toolbar.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/ReviewPane.tsx | 176 ++++++++++++-------------
 1 file changed, 83 insertions(+), 93 deletions(-)

diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index 89127edb..fe850040 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
-import { Send, Clipboard, Check, MessageSquare, GitCommitHorizontal, ArrowUp, ChevronDown, Pilcrow, X, Keyboard, CloudSync, Loader2, WrapText, GitPullRequest, Menu } from 'lucide-react'
+import { Send, Clipboard, MessageSquare, GitCommitHorizontal, ArrowUp, ChevronDown, Pilcrow, X, Keyboard, CloudSync, Loader2, WrapText, GitPullRequest, Menu } from 'lucide-react'
 import type { ChangedFile, BranchCommit } from '../types'
 import type { PRReview } from '../../shared/state/prs'
 import type { ReviewComment } from './ReviewFileTree'
@@ -479,72 +479,6 @@ export function ReviewPane({
       {/* Top controls bar */}
       <div className="shrink-0 border-b border-border bg-panel">
         <div className="h-10 flex items-center gap-3 px-3">
-          <ReviewViewMenu
-            sideBySide={sideBySide}
-            onSideBySide={setSideBySide}
-            wordWrap={wordWrap}
-            onWordWrap={setWordWrap}
-            showWhitespace={showWhitespace}
-            onShowWhitespace={setShowWhitespace}
-            reviewDiffMode={reviewDiffMode}
-            onReviewDiffMode={(m) => backend.setReviewDiffMode(m)}
-          />
-
-          <div className="flex-1" />
-
-          <div className="flex items-center gap-1.5 text-xs">
-            <Tooltip label="Send all comments to the active agent terminal">
-              <button
-                onClick={handleSendToAgent}
-                disabled={comments.length === 0 || !onSendToAgent}
-                className="flex items-center gap-1 px-2 py-1 rounded bg-accent text-app text-xs font-medium hover:bg-accent/80 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-default"
-              >
-                <Send className="icon-xs" />
-                Send to Agent
-              </button>
-            </Tooltip>
-
-            <Tooltip
-              label={
-                !prNumber
-                  ? 'No pull request for this worktree'
-                  : !isWholeBranch
-                    ? 'Sync only works when reviewing all commits'
-                    : syncState !== 'idle' && syncDetail
-                      ? syncDetail
-                      : 'Sync: push draft comments & viewed state to the PR (submit on GitHub)'
-              }
-            >
-              <button
-                onClick={handleSync}
-                disabled={!prNumber || !isWholeBranch || syncing}
-                aria-label="Sync review to PR"
-                className="relative flex items-center shrink-0 px-1.5 py-1 rounded border border-border text-faint hover:text-fg transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-default"
-              >
-                {syncing ? (
-                  <Loader2 className="icon-xs animate-spin" />
-                ) : (
-                  <CloudSync className="icon-xs" />
-                )}
-                {syncState !== 'idle' && (
-                  <span
-                    className={`absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full ${
-                      syncState === 'error'
-                        ? 'bg-danger'
-                        : syncState === 'syncing'
-                          ? 'bg-warning'
-                          : 'bg-success'
-                    }`}
-                    aria-hidden
-                  />
-                )}
-              </button>
-            </Tooltip>
-          </div>
-        </div>
-
-        {/* Second row — review status info */}
-        <div className="h-9 flex items-center gap-3 px-3 border-t border-border/60 text-xs">
           <Tooltip label={pr ? 'PR description' : 'No pull request for this worktree'}>
             <button
               onClick={() => setShowPrDescription((v) => !v)}
@@ -559,7 +493,15 @@ export function ReviewPane({
             </button>
           </Tooltip>
 
-          {pr && <ReviewerStatus reviews={pr.reviews} />}
+          <Tooltip label="Keyboard shortcuts (?)">
+            <button
+              onClick={() => setShowShortcuts((v) => !v)}
+              aria-label="Keyboard shortcuts"
+              className="flex items-center shrink-0 px-1.5 py-1 rounded border border-border text-faint hover:text-fg cursor-pointer transition-colors"
+            >
+              <Keyboard className="icon-xs" />
+            </button>
+          </Tooltip>
 
           <CommentDropdown
             comments={comments}
@@ -570,35 +512,83 @@ export function ReviewPane({
             }}
           />
 
+          {pr && <ReviewerStatus reviews={pr.reviews} />}
+
+          <ReviewViewMenu
+            sideBySide={sideBySide}
+            onSideBySide={setSideBySide}
+            wordWrap={wordWrap}
+            onWordWrap={setWordWrap}
+            showWhitespace={showWhitespace}
+            onShowWhitespace={setShowWhitespace}
+            reviewDiffMode={reviewDiffMode}
+            onReviewDiffMode={(m) => backend.setReviewDiffMode(m)}
+          />
+
           <div className="flex-1" />
 
-          {allReviewed ? (
-            <span className="flex items-center gap-1 text-success font-medium">
-              <Check strokeWidth={2.5} className="icon-xs" />
-              All reviewed
+          <div className="flex items-center gap-3 text-xs">
+            <span className={`tabular-nums ${allReviewed ? 'text-success font-medium' : 'text-faint'}`}>
+              {reviewedFiles.size}/{files.length} reviewed
             </span>
-          ) : (
-            <span className="text-faint tabular-nums">
-              {reviewedFiles.size} reviewed · {Math.max(0, files.length - reviewedFiles.size)} remaining
-            </span>
-          )}
 
-          {(totalAdditions > 0 || totalDeletions > 0) && (
-            <span className="font-mono tabular-nums shrink-0">
-              {totalAdditions > 0 && <span className="text-success">+{totalAdditions}</span>}
-              {totalDeletions > 0 && <span className="text-danger ml-1">−{totalDeletions}</span>}
-            </span>
-          )}
+            {(totalAdditions > 0 || totalDeletions > 0) && (
+              <span className="font-mono tabular-nums shrink-0">
+                {totalAdditions > 0 && <span className="text-success">+{totalAdditions}</span>}
+                {totalDeletions > 0 && <span className="text-danger ml-1">−{totalDeletions}</span>}
+              </span>
+            )}
 
-          <Tooltip label="Keyboard shortcuts (?)">
-            <button
-              onClick={() => setShowShortcuts((v) => !v)}
-              aria-label="Keyboard shortcuts"
-              className="flex items-center shrink-0 px-1.5 py-1 rounded border border-border text-faint hover:text-fg cursor-pointer transition-colors"
-            >
-              <Keyboard className="icon-xs" />
-            </button>
-          </Tooltip>
+            <div className="flex items-center gap-1.5">
+              <Tooltip label="Send all comments to the active agent terminal">
+                <button
+                  onClick={handleSendToAgent}
+                  disabled={comments.length === 0 || !onSendToAgent}
+                  className="flex items-center gap-1 px-2 py-1 rounded bg-accent text-app text-xs font-medium hover:bg-accent/80 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-default"
+                >
+                  <Send className="icon-xs" />
+                  Send to Agent
+                </button>
+              </Tooltip>
+
+              <Tooltip
+                label={
+                  !prNumber
+                    ? 'No pull request for this worktree'
+                    : !isWholeBranch
+                      ? 'Sync only works when reviewing all commits'
+                      : syncState !== 'idle' && syncDetail
+                        ? syncDetail
+                        : 'Sync: push draft comments & viewed state to the PR (submit on GitHub)'
+                }
+              >
+                <button
+                  onClick={handleSync}
+                  disabled={!prNumber || !isWholeBranch || syncing}
+                  aria-label="Sync review to PR"
+                  className="relative flex items-center shrink-0 px-1.5 py-1 rounded border border-border text-faint hover:text-fg transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-default"
+                >
+                  {syncing ? (
+                    <Loader2 className="icon-xs animate-spin" />
+                  ) : (
+                    <CloudSync className="icon-xs" />
+                  )}
+                  {syncState !== 'idle' && (
+                    <span
+                      className={`absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full ${
+                        syncState === 'error'
+                          ? 'bg-danger'
+                          : syncState === 'syncing'
+                            ? 'bg-warning'
+                            : 'bg-success'
+                      }`}
+                      aria-hidden
+                    />
+                  )}
+                </button>
+              </Tooltip>
+            </div>
+          </div>
         </div>
 
         <div className="h-[2px] bg-border/50 relative">
@@ -1074,7 +1064,7 @@ function CommentDropdown({
         className="flex items-center gap-1 text-info hover:text-info/70 transition-colors cursor-pointer disabled:text-faint disabled:cursor-default"
       >
         <MessageSquare className="icon-xs" />
-        {comments.length} {comments.length === 1 ? 'comment' : 'comments'}
+        {comments.length}
         {comments.length > 0 && <ChevronDown className="icon-2xs" />}
       </button>
       {open && comments.length > 0 && (

From 82c4cf3bbfd5c5e41df49622758aa0ffab0dfa39 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Tue, 2 Jun 2026 15:33:08 -0400
Subject: [PATCH 44/63] fix(review): make the commit selector fill the
 file-tree column width

The commit selector now spans the full width of the file browser column
above it: the button is w-full with the commit label flex-filling and
truncating, and the chevron pinned to the right edge.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/ReviewPane.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index fe850040..3d80421a 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -853,13 +853,13 @@ function CommitSelector({
       : `${shortOf(commits, fromCommit)}…${shortOf(commits, toCommit)}`
 
   return (
-    <div ref={wrapperRef} className="relative">
+    <div ref={wrapperRef} className="relative w-full">
       <button
         onClick={() => setOpen((v) => !v)}
-        className="flex items-center gap-1.5 px-2 py-1 rounded border border-border text-xs text-fg hover:bg-panel-raised transition-colors cursor-pointer min-w-0"
+        className="flex w-full items-center gap-1.5 px-2 py-1 rounded border border-border text-xs text-fg hover:bg-panel-raised transition-colors cursor-pointer"
       >
         <GitCommitHorizontal className="icon-xs text-faint shrink-0" />
-        <span className="font-mono max-w-[10rem] truncate">{buttonLabel}</span>
+        <span className="font-mono flex-1 min-w-0 truncate text-left">{buttonLabel}</span>
         <ChevronDown className="icon-2xs text-faint shrink-0" />
       </button>
       {open && (

From acc15c32d5e875462be2f9748463c72d1be42a30 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Tue, 2 Jun 2026 15:44:02 -0400
Subject: [PATCH 45/63] feat(review): support multi-line diff comments
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Select a range of lines in a diff and press `c` to comment on the whole
span. The comment carries a startLine (GitHub `start_line`); the view
zone anchors at the end line and the covered lines get a tinted
highlight. The input and comment cards show the range ("Lines X–Y" /
"L10–14").

Plumbed end-to-end: ReviewComment + ReviewSyncComment gain startLine; the
`c` handler reads the editor's multi-line selection; push maps it to
GitHub's startLine/startSide on both the per-thread and batch review
mutations; pull reads start_line / originalStartLine (REST + the pending
GraphQL path) so ranges round-trip.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/main/github.ts                         | 39 +++++++---
 src/renderer/components/ReviewDiffPane.tsx | 82 ++++++++++++++++++++--
 src/renderer/components/ReviewFileTree.tsx |  5 ++
 src/renderer/components/ReviewPane.tsx     |  9 ++-
 src/renderer/styles.css                    |  6 ++
 src/shared/github-types.ts                 |  3 +
 6 files changed, 126 insertions(+), 18 deletions(-)

diff --git a/src/main/github.ts b/src/main/github.ts
index 25463809..c019ac23 100644
--- a/src/main/github.ts
+++ b/src/main/github.ts
@@ -1302,12 +1302,20 @@ export async function syncPRReview(
     if (pendingReviewNodeId) {
       // Existing pending review — add each comment as a thread.
       for (const c of toPush) {
+        const range = c.startLine !== undefined && c.startLine !== c.lineNumber
         const r = await ghGraphQL(
           token,
-          `mutation($rid:ID!,$path:String!,$line:Int!,$body:String!){
-             addPullRequestReviewThread(input:{pullRequestReviewId:$rid,path:$path,line:$line,side:RIGHT,body:$body}){ thread { id } }
+          `mutation($rid:ID!,$path:String!,$line:Int!,$startLine:Int,$startSide:DiffSide,$body:String!){
+             addPullRequestReviewThread(input:{pullRequestReviewId:$rid,path:$path,line:$line,startLine:$startLine,side:RIGHT,startSide:$startSide,body:$body}){ thread { id } }
            }`,
-          { rid: pendingReviewNodeId, path: c.filePath, line: c.lineNumber, body: c.body }
+          {
+            rid: pendingReviewNodeId,
+            path: c.filePath,
+            line: c.lineNumber,
+            startLine: range ? c.startLine : null,
+            startSide: range ? 'RIGHT' : null,
+            body: c.body
+          }
         )
         if (r.ok) pushed++
         else {
@@ -1317,12 +1325,16 @@ export async function syncPRReview(
       }
     } else {
       // No pending review yet — create one carrying all the threads.
-      const threads = toPush.map((c) => ({
-        path: c.filePath,
-        line: c.lineNumber,
-        side: 'RIGHT',
-        body: c.body
-      }))
+      const threads = toPush.map((c) => {
+        const range = c.startLine !== undefined && c.startLine !== c.lineNumber
+        return {
+          path: c.filePath,
+          line: c.lineNumber,
+          side: 'RIGHT',
+          ...(range ? { startLine: c.startLine, startSide: 'RIGHT' } : {}),
+          body: c.body
+        }
+      })
       const r = await ghGraphQL(
         token,
         `mutation($prId:ID!,$threads:[DraftPullRequestReviewThread!]){
@@ -1459,6 +1471,8 @@ export async function syncPRReview(
     path: string
     line?: number | null
     original_line?: number | null
+    start_line?: number | null
+    original_start_line?: number | null
     body?: string
     created_at?: string
     html_url?: string
@@ -1467,9 +1481,11 @@ export async function syncPRReview(
   }
   const collect = (arr: ApiComment[]): void => {
     for (const rc of arr) {
+      const start = rc.start_line ?? rc.original_start_line ?? undefined
       pulled.push({
         filePath: rc.path,
         lineNumber: rc.line ?? rc.original_line ?? 0,
+        startLine: start ?? undefined,
         body: rc.body ?? '',
         remoteId: rc.id,
         author: rc.user?.login,
@@ -1491,7 +1507,7 @@ export async function syncPRReview(
   // pull them via GraphQL where originalLine is populated.
   const draftQuery = await ghGraphQL(
     token,
-    'query($o:String!,$n:String!,$num:Int!){repository(owner:$o,name:$n){pullRequest(number:$num){reviews(first:20,states:[PENDING]){nodes{comments(first:100){nodes{databaseId path line originalLine body createdAt url replyTo{databaseId} author{login avatarUrl}}}}}}}}',
+    'query($o:String!,$n:String!,$num:Int!){repository(owner:$o,name:$n){pullRequest(number:$num){reviews(first:20,states:[PENDING]){nodes{comments(first:100){nodes{databaseId path line originalLine startLine originalStartLine body createdAt url replyTo{databaseId} author{login avatarUrl}}}}}}}}',
     { o: owner, n: repo, num: prNumber }
   )
   if (draftQuery.ok) {
@@ -1500,6 +1516,8 @@ export async function syncPRReview(
       path?: string
       line?: number | null
       originalLine?: number | null
+      startLine?: number | null
+      originalStartLine?: number | null
       body?: string
       createdAt?: string
       url?: string
@@ -1520,6 +1538,7 @@ export async function syncPRReview(
         pulled.push({
           filePath: c.path,
           lineNumber: c.line ?? c.originalLine ?? 0,
+          startLine: c.startLine ?? c.originalStartLine ?? undefined,
           body: c.body ?? '',
           remoteId: c.databaseId,
           author: c.author?.login,
diff --git a/src/renderer/components/ReviewDiffPane.tsx b/src/renderer/components/ReviewDiffPane.tsx
index e2b97c84..95ee2649 100644
--- a/src/renderer/components/ReviewDiffPane.tsx
+++ b/src/renderer/components/ReviewDiffPane.tsx
@@ -42,7 +42,7 @@ interface ReviewDiffPaneProps {
   collapsed?: boolean
   onToggleCollapsed?: () => void
   onToggleReviewed: () => void
-  onAddComment: (lineNumber: number, body: string) => void
+  onAddComment: (lineNumber: number, body: string, startLine?: number) => void
   onDeleteComment: (id: string) => void
   wordWrap: boolean
   /** Open this file as an editable in-app file tab. Undefined hides the
@@ -188,6 +188,13 @@ function InlineComment({
         {comment.author && (
           <span style={{ fontWeight: 600, color: 'var(--color-fg)' }}>@{comment.author}</span>
         )}
+        {comment.startLine &&
+          comment.lineNumber > 0 &&
+          comment.startLine !== comment.lineNumber && (
+            <span style={{ fontSize: '10px', color: 'var(--color-faint)', fontFamily: 'monospace' }}>
+              L{comment.startLine}–{comment.lineNumber}
+            </span>
+          )}
         {timeStr &&
           (comment.htmlUrl ? (
             <a
@@ -469,10 +476,12 @@ function CommentThread({
 
 function InlineCommentInput({
   lineNumber,
+  startLine,
   onSubmit,
   onCancel
 }: {
   lineNumber: number
+  startLine?: number | null
   onSubmit: (body: string) => void
   onCancel: () => void
 }): JSX.Element {
@@ -498,7 +507,11 @@ function InlineCommentInput({
     >
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
         <span style={{ fontSize: '10px', color: 'var(--color-faint)', fontFamily: 'monospace' }}>
-          {lineNumber === 0 ? 'File comment' : `Line ${lineNumber}`}
+          {lineNumber === 0
+            ? 'File comment'
+            : startLine && startLine !== lineNumber
+              ? `Lines ${startLine}–${lineNumber}`
+              : `Line ${lineNumber}`}
         </span>
         <button
           onClick={onCancel}
@@ -619,7 +632,10 @@ export function ReviewDiffPane({
   const [revealed, setRevealed] = useState(false)
   const [sides, setSides] = useState<FileDiffSides | null>(null)
   const [loading, setLoading] = useState(false)
+  // The line a pending comment input is anchored to (its end line). A separate
+  // start line carries a multi-line selection; null start = single line.
   const [commentLine, setCommentLine] = useState<number | null>(null)
+  const [commentStartLine, setCommentStartLine] = useState<number | null>(null)
   const [expandAll, setExpandAll] = useState(false)
   const [copiedPath, setCopiedPath] = useState(false)
   // Bumped each time the diff editor (re)mounts so the view-zone effect
@@ -627,10 +643,14 @@ export function ReviewDiffPane({
   // file switch, and a ref alone wouldn't retrigger the effect.
   const [editorNonce, setEditorNonce] = useState(0)
   const editorRef = useRef<monaco.editor.IStandaloneDiffEditor | null>(null)
+  const decorationsRef = useRef<monaco.editor.IEditorDecorationsCollection | null>(null)
   const viewZonesRef = useRef<ViewZoneEntry[]>([])
   // Last diff line the mouse was over, for the `c` shortcut. null ⇒ not
   // over any line ⇒ file-level comment (line 0).
   const hoveredLineRef = useRef<number | null>(null)
+  // The modified editor's current multi-line selection (start/end lines), so
+  // `c` can anchor a comment to a range. null ⇒ no multi-line selection.
+  const selectionRef = useRef<{ start: number; end: number } | null>(null)
   // Comment ResizeObservers funnel their desired zone heights here; a single
   // rAF applies them all in one changeViewZones. Without batching, each
   // observer relayouts the editor, nudging other comment wrappers and firing
@@ -698,8 +718,35 @@ export function ReviewDiffPane({
     for (const z of viewZonesRef.current) queueMicrotask(() => z.root.unmount())
     viewZonesRef.current = []
     editorRef.current = null
+    decorationsRef.current = null
   }, [mounted])
 
+  // Highlight the line span each multi-line comment (and the pending input
+  // range) covers, so the reader sees what a range comment refers to.
+  useEffect(() => {
+    const editor = editorRef.current
+    if (!editor) return
+    const modEd = editor.getModifiedEditor()
+    if (!decorationsRef.current) decorationsRef.current = modEd.createDecorationsCollection()
+    const decos: monaco.editor.IModelDeltaDecoration[] = []
+    const addRange = (start: number, end: number): void => {
+      if (start < 1 || end < start) return
+      decos.push({
+        range: new monaco.Range(start, 1, end, 1),
+        options: { isWholeLine: true, className: 'comment-range-line' }
+      })
+    }
+    for (const c of comments) {
+      if (c.startLine && c.lineNumber > 0 && c.startLine !== c.lineNumber) {
+        addRange(Math.min(c.startLine, c.lineNumber), Math.max(c.startLine, c.lineNumber))
+      }
+    }
+    if (commentLine !== null && commentStartLine !== null && commentStartLine !== commentLine) {
+      addRange(Math.min(commentStartLine, commentLine), Math.max(commentStartLine, commentLine))
+    }
+    decorationsRef.current.set(decos)
+  }, [comments, commentLine, commentStartLine, editorNonce])
+
   useEffect(() => {
     if (!file || !hasBeenNear) {
       if (!file) setSides(null)
@@ -851,11 +898,16 @@ export function ReviewDiffPane({
           root.render(
             <InlineCommentInput
               lineNumber={item.lineNumber}
+              startLine={commentStartLine}
               onSubmit={(body) => {
-                onAddComment(item.lineNumber, body)
+                onAddComment(item.lineNumber, body, commentStartLine ?? undefined)
                 setCommentLine(null)
+                setCommentStartLine(null)
+              }}
+              onCancel={() => {
+                setCommentLine(null)
+                setCommentStartLine(null)
               }}
-              onCancel={() => setCommentLine(null)}
             />
           )
         }
@@ -880,7 +932,7 @@ export function ReviewDiffPane({
     })
 
     viewZonesRef.current = newZones
-  }, [comments, commentLine, editorNonce, expandAll, clearViewZones, flushZoneLayout, onAddComment, onDeleteComment, onAddReply, onResolveThread, pendingResolve])
+  }, [comments, commentLine, commentStartLine, editorNonce, expandAll, clearViewZones, flushZoneLayout, onAddComment, onDeleteComment, onAddReply, onResolveThread, pendingResolve])
 
   // Clean up view zones on unmount
   useEffect(() => {
@@ -953,6 +1005,14 @@ export function ReviewDiffPane({
       modEd.onMouseLeave(() => {
         hoveredLineRef.current = null
       })
+      // Track a multi-line selection so `c` can anchor a comment to a range.
+      modEd.onDidChangeCursorSelection((e) => {
+        const s = e.selection
+        selectionRef.current =
+          s.startLineNumber !== s.endLineNumber
+            ? { start: Math.min(s.startLineNumber, s.endLineNumber), end: Math.max(s.startLineNumber, s.endLineNumber) }
+            : null
+      })
     },
     []
   )
@@ -972,7 +1032,17 @@ export function ReviewDiffPane({
       if (el instanceof HTMLInputElement) return
       if (el instanceof HTMLTextAreaElement && !el.classList.contains('inputarea')) return
       e.preventDefault()
-      setCommentLine(hoveredLineRef.current ?? 0)
+      // A multi-line text selection anchors a range comment (end line is the
+      // zone anchor, start line is remembered); otherwise the hovered line, or
+      // line 0 for a file-level comment.
+      const sel = selectionRef.current
+      if (sel) {
+        setCommentLine(sel.end)
+        setCommentStartLine(sel.start)
+      } else {
+        setCommentLine(hoveredLineRef.current ?? 0)
+        setCommentStartLine(null)
+      }
     }
     window.addEventListener('keydown', onKey)
     return () => window.removeEventListener('keydown', onKey)
diff --git a/src/renderer/components/ReviewFileTree.tsx b/src/renderer/components/ReviewFileTree.tsx
index c6dfc74e..2ad8e569 100644
--- a/src/renderer/components/ReviewFileTree.tsx
+++ b/src/renderer/components/ReviewFileTree.tsx
@@ -5,7 +5,12 @@ import type { ChangedFile } from '../types'
 export interface ReviewComment {
   id: string
   filePath: string
+  /** End line of the comment range (1-based, modified side). 0 = file-level.
+   *  GitHub convention: this is `line` (the last line of a multi-line range). */
   lineNumber: number
+  /** First line of a multi-line range. Undefined/equal to lineNumber means a
+   *  single-line comment. Maps to GitHub's `start_line`. */
+  startLine?: number
   body: string
   timestamp: number
   /** GitHub review-comment id once pushed/fetched. Absent = local-only. */
diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index 3d80421a..55919c5a 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -242,7 +242,7 @@ export function ReviewPane({
   }, [])
 
   const handleAddComment = useCallback(
-    (filePath: string, lineNumber: number, body: string) => {
+    (filePath: string, lineNumber: number, body: string, startLine?: number) => {
       if (!filePath) return
       setComments((prev) => [
         ...prev,
@@ -250,6 +250,7 @@ export function ReviewPane({
           id: `comment-${++commentIdCounter}`,
           filePath,
           lineNumber,
+          startLine: startLine && startLine !== lineNumber ? startLine : undefined,
           body,
           timestamp: Date.now()
         }
@@ -338,6 +339,7 @@ export function ReviewPane({
           comments: comments.map((c) => ({
             filePath: c.filePath,
             lineNumber: c.lineNumber,
+            startLine: c.startLine,
             body: c.body,
             remoteId: c.remoteId,
             author: c.author,
@@ -358,6 +360,7 @@ export function ReviewPane({
             id: c.remoteId !== undefined ? `gh-${c.remoteId}` : `comment-${++commentIdCounter}`,
             filePath: c.filePath,
             lineNumber: c.lineNumber,
+            startLine: c.startLine,
             body: c.body,
             timestamp: Date.now(),
             remoteId: c.remoteId,
@@ -681,7 +684,9 @@ export function ReviewPane({
                   revealTarget={revealTarget}
                   onToggleReviewed={() => handleToggleReviewed(f.path)}
                   onToggleCollapsed={() => handleToggleCollapsed(f.path)}
-                  onAddComment={(line, body) => handleAddComment(f.path, line, body)}
+                  onAddComment={(line, body, startLine) =>
+                    handleAddComment(f.path, line, body, startLine)
+                  }
                   onDeleteComment={handleDeleteComment}
                   wordWrap={wordWrap}
                   onOpenEditor={onOpenEditor}
diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index b252f1f5..bc4e7040 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -743,6 +743,12 @@ button, [role="button"], a[href], [onclick] {
   opacity: 1;
 }
 
+/* Highlight the line span a (multi-line) review comment covers. */
+.monaco-editor .comment-range-line {
+  background-color: color-mix(in srgb, var(--color-info, #58a6ff) 12%, transparent);
+  box-shadow: inset 2px 0 0 0 var(--color-info, #58a6ff);
+}
+
 /* iOS/Safari auto-promotes ambiguous codepoints like U+23FA (⏺, which
  * Claude Code uses for tool-call markers) to color emoji via the system
  * Apple Color Emoji fallback, which is why those markers look like emoji
diff --git a/src/shared/github-types.ts b/src/shared/github-types.ts
index 3621fd87..7a9bcad4 100644
--- a/src/shared/github-types.ts
+++ b/src/shared/github-types.ts
@@ -36,6 +36,9 @@ export type PRMetadata = PRSummary
 export interface ReviewSyncComment {
   filePath: string
   lineNumber: number
+  /** First line of a multi-line range (GitHub `start_line`). Undefined or
+   *  equal to lineNumber = single-line comment. */
+  startLine?: number
   body: string
   remoteId?: number
   author?: string

From f28b776efde6d75baeeb1c19a485261f73f2a77b Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Tue, 2 Jun 2026 17:57:41 -0400
Subject: [PATCH 46/63] feat(review): Cmd+F search across all stacked diffs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each Monaco diff only searches itself (and far sections aren't mounted),
so add a review-level find bar. Cmd/Ctrl+F (captured so it beats Monaco's
per-editor find) opens it; matches are computed case-insensitively over
every file's modified content, fetched and cached on first search. Enter
/ Shift+Enter and the up/down buttons walk matches with an "i/n" counter.

Navigating a match reuses revealTarget, now upgraded to a real per-line
reveal in the auto-height stacked view: it scrolls the outer container to
the line's pixel offset (getTopForLineNumber, so collapsed regions + view
zones are accounted for) and briefly flashes the line — which also fixes
comment-list jumps that previously only scrolled to the file.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/ReviewDiffPane.tsx |  44 ++++--
 src/renderer/components/ReviewPane.tsx     | 170 ++++++++++++++++++++-
 src/renderer/styles.css                    |  14 ++
 3 files changed, 212 insertions(+), 16 deletions(-)

diff --git a/src/renderer/components/ReviewDiffPane.tsx b/src/renderer/components/ReviewDiffPane.tsx
index 95ee2649..0b07c68f 100644
--- a/src/renderer/components/ReviewDiffPane.tsx
+++ b/src/renderer/components/ReviewDiffPane.tsx
@@ -947,30 +947,52 @@ export function ReviewDiffPane({
     }
   }, [])
 
-  // Scroll to a comment's line when the comment list navigates here. Keyed
-  // on the request nonce + editor mount so it fires once the right file's
-  // editor is ready.
+  // Reveal a specific line when the comment list / find navigates here. In
+  // the stacked auto-height view the editor owns no scroll, so we scroll the
+  // OUTER container to the line's pixel offset (getTopForLineNumber accounts
+  // for collapsed regions + view zones) and briefly flash the line. Keyed on
+  // the request nonce + editor mount so it fires once this file's editor is
+  // ready (it may have just mounted from the scroll).
   useEffect(() => {
     if (!revealTarget || !file || revealTarget.filePath !== file.path) return
     const editor = editorRef.current
+    const container = scrollRoot?.current
     if (!editor) return
     const line = Math.max(1, revealTarget.line)
-    // The editor may have just remounted for this file and the comment view
-    // zones (which shift line positions) are added in a sibling effect, so a
-    // single reveal often lands off. Reveal on the next frame AND again on a
-    // short timeout to catch the settled layout.
     const modEd = editor.getModifiedEditor()
+    let flash: monaco.editor.IEditorDecorationsCollection | null = null
     const doReveal = (): void => {
-      modEd.setPosition({ lineNumber: line, column: 1 })
-      modEd.revealLineInCenter(line, monaco.editor.ScrollType.Immediate)
+      if (container) {
+        const node = modEd.getDomNode()
+        if (node) {
+          const cRect = container.getBoundingClientRect()
+          const eRect = node.getBoundingClientRect()
+          const editorTop = eRect.top - cRect.top + container.scrollTop
+          const lineTop = modEd.getTopForLineNumber(line)
+          container.scrollTo({ top: Math.max(0, editorTop + lineTop - 96), behavior: 'smooth' })
+        }
+      }
+      if (!flash) {
+        flash = modEd.createDecorationsCollection([
+          {
+            range: new monaco.Range(line, 1, line, 1),
+            options: { isWholeLine: true, className: 'reveal-flash-line' }
+          }
+        ])
+      }
     }
+    // Reveal on the next frame AND after a short delay to catch the settled
+    // layout (view zones / mount can shift line positions).
     const raf = requestAnimationFrame(doReveal)
-    const t = setTimeout(doReveal, 140)
+    const t = setTimeout(doReveal, 160)
+    const clearT = setTimeout(() => flash?.clear(), 1500)
     return () => {
       cancelAnimationFrame(raf)
       clearTimeout(t)
+      clearTimeout(clearT)
+      flash?.clear()
     }
-  }, [revealTarget?.nonce, revealTarget?.filePath, editorNonce, file?.path])
+  }, [revealTarget?.nonce, revealTarget?.filePath, editorNonce, file?.path, scrollRoot])
 
   const handleReferenceLine = useCallback((lineNumber: number) => {
     setCommentLine(lineNumber)
diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index 55919c5a..327fb79a 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
-import { Send, Clipboard, MessageSquare, GitCommitHorizontal, ArrowUp, ChevronDown, Pilcrow, X, Keyboard, CloudSync, Loader2, WrapText, GitPullRequest, Menu } from 'lucide-react'
+import { Send, Clipboard, MessageSquare, GitCommitHorizontal, ArrowUp, ChevronDown, ChevronUp, Pilcrow, X, Keyboard, CloudSync, Loader2, WrapText, GitPullRequest, Menu, Search } from 'lucide-react'
 import type { ChangedFile, BranchCommit } from '../types'
 import type { PRReview } from '../../shared/state/prs'
 import type { ReviewComment } from './ReviewFileTree'
@@ -64,6 +64,16 @@ export function ReviewPane({
   const [showWhitespace, setShowWhitespace] = useState(false)
   const [showShortcuts, setShowShortcuts] = useState(false)
   const [showPrDescription, setShowPrDescription] = useState(false)
+  // Cmd+F find-across-all-diffs state. Matches are computed over every file's
+  // modified content (fetched + cached on first search) since each Monaco
+  // editor only searches itself and far sections aren't even mounted.
+  const [findOpen, setFindOpen] = useState(false)
+  const [findQuery, setFindQuery] = useState('')
+  const [matches, setMatches] = useState<{ filePath: string; line: number; preview: string }[]>([])
+  const [matchIndex, setMatchIndex] = useState(0)
+  const [searching, setSearching] = useState(false)
+  const contentCacheRef = useRef<Map<string, string[]>>(new Map())
+  const findInputRef = useRef<HTMLInputElement | null>(null)
   const [revealTarget, setRevealTarget] = useState<{ filePath: string; line: number; nonce: number } | null>(null)
   const revealNonceRef = useRef(0)
   // Scroll container + per-file section elements for the stacked all-files
@@ -73,11 +83,14 @@ export function ReviewPane({
   const scrollToFile = useCallback((filePath: string) => {
     sectionRefs.current.get(filePath)?.scrollIntoView({ block: 'start', behavior: 'smooth' })
   }, [])
-  // Scroll the stacked view to whichever file the comment list / file tree
-  // last asked to reveal.
+  // Bring the target file near the viewport instantly (so a virtualized-far
+  // section mounts); the section's own reveal effect then smooth-scrolls to
+  // the exact line.
   useEffect(() => {
-    if (revealTarget) scrollToFile(revealTarget.filePath)
-  }, [revealTarget, scrollToFile])
+    if (revealTarget) {
+      sectionRefs.current.get(revealTarget.filePath)?.scrollIntoView({ block: 'start' })
+    }
+  }, [revealTarget])
   const [refreshKey, setRefreshKey] = useState(0)
   const [syncState, setSyncState] = useState<'idle' | 'syncing' | 'ok' | 'error'>('idle')
   const [syncDetail, setSyncDetail] = useState<string | null>(null)
@@ -464,6 +477,106 @@ export function ReviewPane({
     [commits, selectionIndices, backend, worktreePath, tabId]
   )
 
+  // ----- Cmd+F: find across all diffs -----------------------------------
+  // Drop the content cache when the underlying diff changes.
+  useEffect(() => {
+    contentCacheRef.current = new Map()
+  }, [worktreePath, isWholeBranch, isSingleCommit, fromCommit, toCommit, refreshKey])
+
+  const fetchModified = useCallback(
+    async (filePath: string): Promise<string[]> => {
+      try {
+        const sides =
+          !isWholeBranch && !isSingleCommit && fromCommit && toCommit
+            ? await backend.getCommitRangeFileDiffSides(worktreePath, fromCommit, toCommit, filePath)
+            : isSingleCommit && fromCommit
+              ? await backend.getCommitFileDiffSides(worktreePath, fromCommit, filePath)
+              : await backend.getFileDiffSides(worktreePath, filePath, false, 'branch')
+        return (sides?.modified ?? '').split('\n')
+      } catch {
+        return []
+      }
+    },
+    [backend, worktreePath, isWholeBranch, isSingleCommit, fromCommit, toCommit]
+  )
+
+  const gotoMatch = useCallback((idx: number) => {
+    setMatches((cur) => {
+      if (cur.length === 0) return cur
+      const n = ((idx % cur.length) + cur.length) % cur.length
+      setMatchIndex(n)
+      const m = cur[n]
+      setRevealTarget({ filePath: m.filePath, line: m.line, nonce: ++revealNonceRef.current })
+      return cur
+    })
+  }, [])
+
+  // Cmd/Ctrl+F opens the find bar (capture phase so it beats Monaco's own
+  // per-editor find). Only while this review tab is active.
+  useEffect(() => {
+    if (!active) return
+    const onKey = (e: KeyboardEvent): void => {
+      if ((e.metaKey || e.ctrlKey) && !e.altKey && (e.key === 'f' || e.key === 'F')) {
+        e.preventDefault()
+        e.stopPropagation()
+        setFindOpen(true)
+        requestAnimationFrame(() => {
+          findInputRef.current?.focus()
+          findInputRef.current?.select()
+        })
+      }
+    }
+    window.addEventListener('keydown', onKey, true)
+    return () => window.removeEventListener('keydown', onKey, true)
+  }, [active])
+
+  // Run the search (debounced). Fetches + caches each file's modified content
+  // on first use, then matches case-insensitively across every file.
+  useEffect(() => {
+    if (!findOpen) return
+    const q = findQuery.trim()
+    if (!q) {
+      setMatches([])
+      setMatchIndex(0)
+      return
+    }
+    let cancelled = false
+    const t = setTimeout(async () => {
+      setSearching(true)
+      const cache = contentCacheRef.current
+      const missing = files.filter((f) => !cache.has(f.path) && f.status !== 'deleted')
+      await Promise.all(
+        missing.map(async (f) => {
+          const lines = await fetchModified(f.path)
+          if (!cancelled) cache.set(f.path, lines)
+        })
+      )
+      if (cancelled) return
+      const ql = q.toLowerCase()
+      const found: { filePath: string; line: number; preview: string }[] = []
+      for (const f of files) {
+        const lines = cache.get(f.path)
+        if (!lines) continue
+        for (let i = 0; i < lines.length; i++) {
+          if (lines[i].toLowerCase().includes(ql)) {
+            found.push({ filePath: f.path, line: i + 1, preview: lines[i].trim().slice(0, 200) })
+          }
+        }
+      }
+      if (cancelled) return
+      setMatches(found)
+      setMatchIndex(0)
+      setSearching(false)
+      if (found.length > 0) {
+        setRevealTarget({ filePath: found[0].filePath, line: found[0].line, nonce: ++revealNonceRef.current })
+      }
+    }, 200)
+    return () => {
+      cancelled = true
+      clearTimeout(t)
+    }
+  }, [findQuery, findOpen, files, fetchModified])
+
   const allReviewed = files.length > 0 && reviewedFiles.size === files.length
   const progress = files.length > 0 ? reviewedFiles.size / files.length : 0
 
@@ -479,6 +592,53 @@ export function ReviewPane({
           onClose={() => setShowPrDescription(false)}
         />
       )}
+      {findOpen && (
+        <div className="absolute top-1 right-3 z-[60] flex items-center gap-2 rounded border border-border-strong bg-panel-raised shadow-lg px-2 py-1.5 text-xs">
+          <Search className="icon-xs text-faint shrink-0" />
+          <input
+            ref={findInputRef}
+            value={findQuery}
+            onChange={(e) => setFindQuery(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault()
+                gotoMatch(matchIndex + (e.shiftKey ? -1 : 1))
+              } else if (e.key === 'Escape') {
+                e.preventDefault()
+                setFindOpen(false)
+              }
+            }}
+            placeholder="Find in all diffs"
+            className="bg-transparent outline-none text-fg w-52 placeholder:text-faint"
+          />
+          <span className="text-faint tabular-nums shrink-0 min-w-[3.5rem] text-right">
+            {searching ? '…' : findQuery.trim() === '' ? '' : matches.length === 0 ? 'No results' : `${matchIndex + 1}/${matches.length}`}
+          </span>
+          <button
+            onClick={() => gotoMatch(matchIndex - 1)}
+            disabled={matches.length === 0}
+            aria-label="Previous match"
+            className="shrink-0 text-faint hover:text-fg cursor-pointer disabled:opacity-30 disabled:cursor-default"
+          >
+            <ChevronUp className="icon-xs" />
+          </button>
+          <button
+            onClick={() => gotoMatch(matchIndex + 1)}
+            disabled={matches.length === 0}
+            aria-label="Next match"
+            className="shrink-0 text-faint hover:text-fg cursor-pointer disabled:opacity-30 disabled:cursor-default"
+          >
+            <ChevronDown className="icon-xs" />
+          </button>
+          <button
+            onClick={() => setFindOpen(false)}
+            aria-label="Close find"
+            className="shrink-0 text-faint hover:text-fg cursor-pointer"
+          >
+            <X className="icon-xs" />
+          </button>
+        </div>
+      )}
       {/* Top controls bar */}
       <div className="shrink-0 border-b border-border bg-panel">
         <div className="h-10 flex items-center gap-3 px-3">
diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index bc4e7040..be85d3d6 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -749,6 +749,20 @@ button, [role="button"], a[href], [onclick] {
   box-shadow: inset 2px 0 0 0 var(--color-info, #58a6ff);
 }
 
+/* Brief flash when a comment-jump / find navigates to a line. */
+.monaco-editor .reveal-flash-line {
+  background-color: color-mix(in srgb, var(--color-warning, #d29922) 30%, transparent);
+  animation: reveal-flash 1.4s ease-out forwards;
+}
+@keyframes reveal-flash {
+  0% {
+    background-color: color-mix(in srgb, var(--color-warning, #d29922) 45%, transparent);
+  }
+  100% {
+    background-color: transparent;
+  }
+}
+
 /* iOS/Safari auto-promotes ambiguous codepoints like U+23FA (⏺, which
  * Claude Code uses for tool-call markers) to color emoji via the system
  * Apple Color Emoji fallback, which is why those markers look like emoji

From 18d49c74021e0b6e5cc393efb0f9dbd236bcf393 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Wed, 3 Jun 2026 10:14:00 -0400
Subject: [PATCH 47/63] revert(review): single-file diff view, keep cross-file
 Find
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The stacked all-files view mounted/disposed many Monaco diff editors as
you scrolled (each createDiffEditor is heavy, plus automaticLayout
polling and the virtualization mount/unmount hysteresis), making large
reviews sluggish. Go back to one Monaco editor at a time — the file the
reviewer selects — while keeping everything added since: multi-line
comments, copy-path, open-in-editor, and the Cmd+F search across all
files.

ReviewDiffPane drops the IntersectionObserver virtualization, the
auto-height host, per-file collapse, and the deleted/large
click-to-reveal placeholders; the editor fills the pane and owns its own
scroll again, and reveal uses revealLineInCenter. ReviewPane renders a
single ReviewDiffPane for the selected file and restores the
selectedFileObj/fileComments memos. Find is unchanged except that
navigating to a match now switches the selected file first, then reveals
the line.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/ReviewDiffPane.tsx | 188 +++------------------
 src/renderer/components/ReviewPane.tsx     | 160 ++++++------------
 2 files changed, 70 insertions(+), 278 deletions(-)

diff --git a/src/renderer/components/ReviewDiffPane.tsx b/src/renderer/components/ReviewDiffPane.tsx
index 0b07c68f..90833421 100644
--- a/src/renderer/components/ReviewDiffPane.tsx
+++ b/src/renderer/components/ReviewDiffPane.tsx
@@ -1,11 +1,11 @@
-import { useState, useEffect, useCallback, useRef, type RefObject } from 'react'
+import { useState, useEffect, useCallback, useRef } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
 import * as monaco from 'monaco-editor'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import rehypeRaw from 'rehype-raw'
 import rehypeSanitize from 'rehype-sanitize'
-import { Check, CheckCheck, ChevronDown, ChevronRight, Copy, FoldVertical, MessagesSquare, Pencil, Reply, UnfoldVertical } from 'lucide-react'
+import { Check, CheckCheck, Copy, FoldVertical, MessagesSquare, Pencil, Reply, UnfoldVertical } from 'lucide-react'
 import type { FileDiffSides, ChangedFile } from '../types'
 import type { ReviewComment } from './ReviewFileTree'
 import { MonacoDiffEditor } from './MonacoDiffEditor'
@@ -31,16 +31,9 @@ interface ReviewDiffPaneProps {
   ignoreTrimWhitespace: boolean
   /** True when the review tab is active/visible — gates the `c` shortcut. */
   active?: boolean
-  /** The scroll container that stacks all the file sections. Used as the
-   *  IntersectionObserver root so this section lazy-mounts its Monaco editor
-   *  only when it nears the viewport. */
-  scrollRoot?: RefObject<HTMLElement | null>
   /** Scroll the diff to this line when it matches the current file. Used by
-   *  the comment list to jump to a comment. */
+   *  the comment list / find to jump to a line. */
   revealTarget?: { filePath: string; line: number; nonce: number } | null
-  /** Collapsed sections render just the header (no diff editor). */
-  collapsed?: boolean
-  onToggleCollapsed?: () => void
   onToggleReviewed: () => void
   onAddComment: (lineNumber: number, body: string, startLine?: number) => void
   onDeleteComment: (id: string) => void
@@ -65,17 +58,6 @@ const STATUS_LABEL: Record<ChangedFile['status'], string> = {
   untracked: 'Untracked'
 }
 
-// Diffs with more than this many changed lines are withheld behind a
-// click-to-reveal placeholder so the stacked view stays light by default.
-const LARGE_DIFF_LINES = 600
-
-/** Why a file's diff is hidden by default (null = shown normally). */
-function withheldReason(file: ChangedFile): 'deleted' | 'large' | null {
-  if (file.status === 'deleted') return 'deleted'
-  if ((file.additions ?? 0) + (file.deletions ?? 0) > LARGE_DIFF_LINES) return 'large'
-  return null
-}
-
 const STATUS_COLOR: Record<ChangedFile['status'], string> = {
   added: 'text-success',
   modified: 'text-warning',
@@ -603,10 +585,7 @@ export function ReviewDiffPane({
   sideBySide,
   ignoreTrimWhitespace,
   active,
-  scrollRoot,
   revealTarget,
-  collapsed = false,
-  onToggleCollapsed,
   onToggleReviewed,
   onAddComment,
   onDeleteComment,
@@ -618,18 +597,6 @@ export function ReviewDiffPane({
 }: ReviewDiffPaneProps): JSX.Element {
   const backend = useBackend()
   const settings = useSettings()
-  // Lazy-mount: the Monaco editor is only constructed once this section has
-  // scrolled near the viewport (stays mounted afterwards). `contentHeight`
-  // is the editor's reported height in auto-height mode; before mount we show
-  // a placeholder sized from the file's +/- counts so scroll stays stable.
-  const rootRef = useRef<HTMLDivElement | null>(null)
-  const isHoveredRef = useRef(false)
-  const [hasBeenNear, setHasBeenNear] = useState(false)
-  const [mounted, setMounted] = useState(false)
-  const [contentHeight, setContentHeight] = useState(0)
-  // Deleted files and very large diffs default to a click-to-reveal
-  // placeholder rather than rendering the whole thing.
-  const [revealed, setRevealed] = useState(false)
   const [sides, setSides] = useState<FileDiffSides | null>(null)
   const [loading, setLoading] = useState(false)
   // The line a pending comment input is anchored to (its end line). A separate
@@ -677,50 +644,6 @@ export function ReviewDiffPane({
     })
   }, [])
 
-  // Virtualize: mount the Monaco editor when this section scrolls within
-  // ~800px of the viewport, unmount it once it's more than ~2000px away. The
-  // hysteresis band (800–2000px) keeps sections near the edge from
-  // thrash-cycling. `hasBeenNear` (latched) gates the one-time diff fetch so
-  // the cached sides survive unmount/remount; `mounted` toggles the editor.
-  useEffect(() => {
-    const el = rootRef.current
-    if (!el) return
-    const root = scrollRoot?.current ?? null
-    const mountIO = new IntersectionObserver(
-      (entries) => {
-        if (entries.some((e) => e.isIntersecting)) {
-          setHasBeenNear(true)
-          setMounted(true)
-        }
-      },
-      { root, rootMargin: '800px 0px' }
-    )
-    const unmountIO = new IntersectionObserver(
-      (entries) => {
-        if (entries.every((e) => !e.isIntersecting)) setMounted(false)
-      },
-      { root, rootMargin: '2000px 0px' }
-    )
-    mountIO.observe(el)
-    unmountIO.observe(el)
-    return () => {
-      mountIO.disconnect()
-      unmountIO.disconnect()
-    }
-  }, [scrollRoot])
-
-  // When the editor is unmounted (scrolled far away), drop our handle and
-  // tear down the comment view-zone React roots so they don't leak; the
-  // measured height stays in `contentHeight` so the placeholder holds the
-  // scroll position. Comments re-render on remount via the view-zone effect.
-  useEffect(() => {
-    if (mounted) return
-    for (const z of viewZonesRef.current) queueMicrotask(() => z.root.unmount())
-    viewZonesRef.current = []
-    editorRef.current = null
-    decorationsRef.current = null
-  }, [mounted])
-
   // Highlight the line span each multi-line comment (and the pending input
   // range) covers, so the reader sees what a range comment refers to.
   useEffect(() => {
@@ -748,12 +671,10 @@ export function ReviewDiffPane({
   }, [comments, commentLine, commentStartLine, editorNonce])
 
   useEffect(() => {
-    if (!file || !hasBeenNear) {
-      if (!file) setSides(null)
+    if (!file) {
+      setSides(null)
       return
     }
-    // Don't fetch withheld (deleted / very large) diffs until the user opts in.
-    if (withheldReason(file) && !revealed) return
     let cancelled = false
     setLoading(true)
     setCommentLine(null)
@@ -786,7 +707,7 @@ export function ReviewDiffPane({
     return () => {
       cancelled = true
     }
-  }, [hasBeenNear, revealed, worktreePath, file?.path, file?.staged, mode, commitHash, commitRange?.fromHash, commitRange?.toHash])
+  }, [worktreePath, file?.path, file?.staged, mode, commitHash, commitRange?.fromHash, commitRange?.toHash])
 
   const clearViewZones = useCallback(() => {
     const editor = editorRef.current
@@ -947,31 +868,19 @@ export function ReviewDiffPane({
     }
   }, [])
 
-  // Reveal a specific line when the comment list / find navigates here. In
-  // the stacked auto-height view the editor owns no scroll, so we scroll the
-  // OUTER container to the line's pixel offset (getTopForLineNumber accounts
-  // for collapsed regions + view zones) and briefly flash the line. Keyed on
-  // the request nonce + editor mount so it fires once this file's editor is
-  // ready (it may have just mounted from the scroll).
+  // Reveal a specific line when the comment list / find navigates here. The
+  // editor owns its own scroll, so center the line and briefly flash it. Keyed
+  // on the request nonce + editor mount so it fires once this file's editor is
+  // ready (it may have just remounted from a file switch).
   useEffect(() => {
     if (!revealTarget || !file || revealTarget.filePath !== file.path) return
     const editor = editorRef.current
-    const container = scrollRoot?.current
     if (!editor) return
     const line = Math.max(1, revealTarget.line)
     const modEd = editor.getModifiedEditor()
     let flash: monaco.editor.IEditorDecorationsCollection | null = null
     const doReveal = (): void => {
-      if (container) {
-        const node = modEd.getDomNode()
-        if (node) {
-          const cRect = container.getBoundingClientRect()
-          const eRect = node.getBoundingClientRect()
-          const editorTop = eRect.top - cRect.top + container.scrollTop
-          const lineTop = modEd.getTopForLineNumber(line)
-          container.scrollTo({ top: Math.max(0, editorTop + lineTop - 96), behavior: 'smooth' })
-        }
-      }
+      modEd.revealLineInCenter(line)
       if (!flash) {
         flash = modEd.createDecorationsCollection([
           {
@@ -992,7 +901,7 @@ export function ReviewDiffPane({
       clearTimeout(clearT)
       flash?.clear()
     }
-  }, [revealTarget?.nonce, revealTarget?.filePath, editorNonce, file?.path, scrollRoot])
+  }, [revealTarget?.nonce, revealTarget?.filePath, editorNonce, file?.path])
 
   const handleReferenceLine = useCallback((lineNumber: number) => {
     setCommentLine(lineNumber)
@@ -1040,16 +949,14 @@ export function ReviewDiffPane({
   )
 
   // `c` opens a comment input on the hovered diff line, or a file-level
-  // comment (line 0) when the mouse isn't over a line. Every stacked section
-  // installs this listener, so it only acts when the mouse is over THIS
-  // section — otherwise N sections would all open an input at once. Bail only
-  // on a real form field (the inline comment box and the file filter), never
-  // on Monaco's own input.
+  // comment (line 0) when the mouse isn't over a line. Window listener so it
+  // works whether focus is in the diff or the file tree. Bail only on a real
+  // form field (the inline comment box and the file filter), never on Monaco's
+  // own input.
   useEffect(() => {
     if (!file || !active) return
     const onKey = (e: KeyboardEvent): void => {
       if (e.key !== 'c' || e.metaKey || e.ctrlKey || e.altKey) return
-      if (!isHoveredRef.current) return
       const el = e.target as HTMLElement | null
       if (el instanceof HTMLInputElement) return
       if (el instanceof HTMLTextAreaElement && !el.classList.contains('inputarea')) return
@@ -1078,42 +985,10 @@ export function ReviewDiffPane({
     )
   }
 
-  // Auto-height host: use the editor's reported content height once mounted,
-  // else a placeholder estimate from the file's +/- counts so the stacked
-  // scroll doesn't jump when this section mounts.
-  const lineH = Math.round(scaledEditorFontSize(settings.terminalFontSize, settings.uiScale) * 1.5)
-  const estimateHeight = Math.min(
-    1600,
-    Math.max(160, ((file.additions ?? 0) + (file.deletions ?? 0) + 8) * lineH)
-  )
-  const hostHeight = contentHeight > 0 ? contentHeight : estimateHeight
-  const reason = withheldReason(file)
-  const withheld = reason !== null && !revealed
-
   return (
-    <div
-      ref={rootRef}
-      className="flex flex-col"
-      onMouseEnter={() => {
-        isHoveredRef.current = true
-      }}
-      onMouseLeave={() => {
-        isHoveredRef.current = false
-      }}
-    >
+    <div className="flex flex-col h-full">
       {/* File header */}
-      <div className="flex items-center gap-2 px-3 py-2 border-b border-border bg-panel sticky top-0 z-20">
-        {onToggleCollapsed && (
-          <button
-            onClick={onToggleCollapsed}
-            aria-label={collapsed ? 'Expand diff' : 'Collapse diff'}
-            aria-expanded={!collapsed}
-            className="shrink-0 text-faint hover:text-fg cursor-pointer"
-          >
-            {collapsed ? <ChevronRight className="icon-sm" /> : <ChevronDown className="icon-sm" />}
-          </button>
-        )}
-
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-border bg-panel shrink-0">
         <Tooltip label={copiedPath ? 'Copied!' : 'Copy file path'}>
           <button
             onClick={() => {
@@ -1216,26 +1091,10 @@ export function ReviewDiffPane({
         )}
       </div>
 
-      {/* Diff with inline comments via view zones. Auto-height: the editor
-          grows to its content and the stacked container owns the scroll.
-          Collapsed sections render just the header; deleted/large diffs are
-          withheld behind a click-to-reveal row. */}
-      {!collapsed && withheld && (
-        <button
-          onClick={() => setRevealed(true)}
-          className="w-full text-left px-3 py-4 text-sm text-faint hover:text-fg hover:bg-panel/40 transition-colors cursor-pointer"
-        >
-          {reason === 'deleted'
-            ? 'Diff not shown for deleted files by default'
-            : 'Large diffs are not shown by default'}
-          <span className="ml-2 text-dim">(click to show)</span>
-        </button>
-      )}
-      {!collapsed && !withheld && (
-      <div className="relative" style={{ height: hostHeight }}>
-        {!mounted ? (
-          <div className="absolute inset-0" aria-hidden />
-        ) : loading ? (
+      {/* Diff with inline comments via view zones. The editor fills the pane
+          and owns its own vertical scroll. */}
+      <div className="flex-1 min-h-0 relative">
+        {loading ? (
           <div className="absolute inset-0 flex items-center justify-center text-faint text-sm">
             Loading diff...
           </div>
@@ -1258,8 +1117,6 @@ export function ReviewDiffPane({
             fontFamily={settings.terminalFontFamily || undefined}
             fontSize={scaledEditorFontSize(settings.terminalFontSize, settings.uiScale)}
             wordWrap={wordWrap}
-            autoHeight
-            onContentHeight={setContentHeight}
             onReferenceLine={handleReferenceLine}
             onEditorMount={handleEditorMount}
             glyphClassName="comment-line-glyph"
@@ -1267,7 +1124,6 @@ export function ReviewDiffPane({
           />
         ) : null}
       </div>
-      )}
     </div>
   )
 }
diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index 327fb79a..e4628bae 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -51,9 +51,6 @@ export function ReviewPane({
   const [files, setFiles] = useState<ChangedFile[]>([])
   const [selectedFile, setSelectedFile] = useState<string | null>(null)
   const [reviewedFiles, setReviewedFiles] = useState<Set<string>>(new Set())
-  // Files whose diff is collapsed in the stacked view. Marking a file viewed
-  // collapses it (GitHub-style); the chevron toggles collapse independently.
-  const [collapsedFiles, setCollapsedFiles] = useState<Set<string>>(new Set())
   const [comments, setComments] = useState<ReviewComment[]>([])
   const [collapsedDirs, setCollapsedDirs] = useState<Set<string>>(new Set())
   const [fileTreeWidth, setFileTreeWidth] = useState<number>(240)
@@ -76,21 +73,6 @@ export function ReviewPane({
   const findInputRef = useRef<HTMLInputElement | null>(null)
   const [revealTarget, setRevealTarget] = useState<{ filePath: string; line: number; nonce: number } | null>(null)
   const revealNonceRef = useRef(0)
-  // Scroll container + per-file section elements for the stacked all-files
-  // view, so the file tree / comment list can scroll a file into view.
-  const stackScrollRef = useRef<HTMLDivElement | null>(null)
-  const sectionRefs = useRef(new Map<string, HTMLDivElement | null>())
-  const scrollToFile = useCallback((filePath: string) => {
-    sectionRefs.current.get(filePath)?.scrollIntoView({ block: 'start', behavior: 'smooth' })
-  }, [])
-  // Bring the target file near the viewport instantly (so a virtualized-far
-  // section mounts); the section's own reveal effect then smooth-scrolls to
-  // the exact line.
-  useEffect(() => {
-    if (revealTarget) {
-      sectionRefs.current.get(revealTarget.filePath)?.scrollIntoView({ block: 'start' })
-    }
-  }, [revealTarget])
   const [refreshKey, setRefreshKey] = useState(0)
   const [syncState, setSyncState] = useState<'idle' | 'syncing' | 'ok' | 'error'>('idle')
   const [syncDetail, setSyncDetail] = useState<string | null>(null)
@@ -191,20 +173,9 @@ export function ReviewPane({
   // anyway; the file-load effect above preserves a still-valid selection
   // once the list arrives.
   const fileRequest = useReviewFileRequest(worktreePath)
-  const scrolledRequestRef = useRef(-1)
   useEffect(() => {
-    if (!fileRequest) return
-    setSelectedFile(fileRequest.filePath)
-    // Scroll the stacked view to the requested file. The request can arrive
-    // before the file list has rendered (review tab just opened), so the
-    // `files` dep re-runs this once the section element exists; the ref guard
-    // makes sure we only auto-scroll once per request, not on later refreshes.
-    if (scrolledRequestRef.current === fileRequest.nonce) return
-    if (!sectionRefs.current.has(fileRequest.filePath)) return
-    scrolledRequestRef.current = fileRequest.nonce
-    const id = requestAnimationFrame(() => scrollToFile(fileRequest.filePath))
-    return () => cancelAnimationFrame(id)
-  }, [fileRequest?.nonce, fileRequest?.filePath, files, scrollToFile])
+    if (fileRequest) setSelectedFile(fileRequest.filePath)
+  }, [fileRequest?.nonce, fileRequest?.filePath])
 
   const { totalAdditions, totalDeletions } = useMemo(() => {
     let add = 0
@@ -216,28 +187,18 @@ export function ReviewPane({
     return { totalAdditions: add, totalDeletions: del }
   }, [files])
 
-  const handleToggleReviewed = useCallback(
-    (path: string) => {
-      setReviewedFiles((prev) => {
-        const next = new Set(prev)
-        const nowReviewed = !next.has(path)
-        if (nowReviewed) next.add(path)
-        else next.delete(path)
-        // Collapse on view, expand on un-view.
-        setCollapsedFiles((c) => {
-          const cn = new Set(c)
-          if (nowReviewed) cn.add(path)
-          else cn.delete(path)
-          return cn
-        })
-        return next
-      })
-    },
-    []
+  const selectedFileObj = useMemo(
+    () => files.find((f) => f.path === selectedFile) ?? null,
+    [files, selectedFile]
+  )
+
+  const fileComments = useMemo(
+    () => (selectedFile ? comments.filter((c) => c.filePath === selectedFile) : []),
+    [comments, selectedFile]
   )
 
-  const handleToggleCollapsed = useCallback((path: string) => {
-    setCollapsedFiles((prev) => {
+  const handleToggleReviewed = useCallback((path: string) => {
+    setReviewedFiles((prev) => {
       const next = new Set(prev)
       if (next.has(path)) next.delete(path)
       else next.add(path)
@@ -388,13 +349,8 @@ export function ReviewPane({
           }))
         )
         // Reflect the merged viewed state (local ∪ GitHub) so files viewed
-        // on GitHub show as reviewed here too — and collapse those diffs.
+        // on GitHub show as reviewed here too.
         setReviewedFiles(new Set(result.reviewedFiles))
-        setCollapsedFiles((prev) => {
-          const next = new Set(prev)
-          for (const p of result.reviewedFiles) next.add(p)
-          return next
-        })
         // Resolve requests were sent; GitHub's resolved state is now in the
         // pulled comments, so clear the pending set.
         if (!pullOnly) setPendingResolve(new Set())
@@ -506,6 +462,8 @@ export function ReviewPane({
       const n = ((idx % cur.length) + cur.length) % cur.length
       setMatchIndex(n)
       const m = cur[n]
+      // Switch the single diff pane to the match's file, then reveal the line.
+      setSelectedFile(m.filePath)
       setRevealTarget({ filePath: m.filePath, line: m.line, nonce: ++revealNonceRef.current })
       return cur
     })
@@ -568,6 +526,7 @@ export function ReviewPane({
       setMatchIndex(0)
       setSearching(false)
       if (found.length > 0) {
+        setSelectedFile(found[0].filePath)
         setRevealTarget({ filePath: found[0].filePath, line: found[0].line, nonce: ++revealNonceRef.current })
       }
     }, 200)
@@ -788,10 +747,7 @@ export function ReviewPane({
               reviewedFiles={reviewedFiles}
               comments={comments}
               collapsedDirs={collapsedDirs}
-              onSelectFile={(fp) => {
-                setSelectedFile(fp)
-                scrollToFile(fp)
-              }}
+              onSelectFile={setSelectedFile}
               onToggleReviewed={handleToggleReviewed}
               onToggleDir={handleToggleDir}
               onSetSideBySide={setSideBySide}
@@ -806,57 +762,37 @@ export function ReviewPane({
 
         <ResizeHandle onDelta={handleFileTreeResize} />
 
-        {/* Stacked diff pane — every file's diff in one scroll, in listing
-            order. Each section lazy-mounts its Monaco editor as it nears the
-            viewport. */}
-        <div ref={stackScrollRef} className="flex-1 min-w-0 overflow-y-auto">
-          {files.length === 0 ? (
-            <div className="flex items-center justify-center h-full text-faint text-sm">
-              No changes to review
-            </div>
-          ) : (
-            files.map((f) => (
-              <div
-                key={f.path}
-                ref={(el) => {
-                  if (el) sectionRefs.current.set(f.path, el)
-                  else sectionRefs.current.delete(f.path)
-                }}
-                className="mb-2 border-b-4 border-border/70"
-              >
-                <ReviewDiffPane
-                  worktreePath={worktreePath}
-                  file={f}
-                  mode="branch"
-                  commitHash={isSingleCommit ? fromCommit : undefined}
-                  commitRange={
-                    !isWholeBranch && !isSingleCommit && fromCommit && toCommit
-                      ? { fromHash: fromCommit, toHash: toCommit }
-                      : undefined
-                  }
-                  reviewed={reviewedFiles.has(f.path)}
-                  collapsed={collapsedFiles.has(f.path)}
-                  comments={comments.filter((c) => c.filePath === f.path)}
-                  sideBySide={sideBySide}
-                  ignoreTrimWhitespace={!showWhitespace}
-                  active={active}
-                  scrollRoot={stackScrollRef}
-                  revealTarget={revealTarget}
-                  onToggleReviewed={() => handleToggleReviewed(f.path)}
-                  onToggleCollapsed={() => handleToggleCollapsed(f.path)}
-                  onAddComment={(line, body, startLine) =>
-                    handleAddComment(f.path, line, body, startLine)
-                  }
-                  onDeleteComment={handleDeleteComment}
-                  wordWrap={wordWrap}
-                  onOpenEditor={onOpenEditor}
-                  onAddReply={handleAddReply}
-                  onResolveThread={handleResolveThread}
-                  pendingResolve={pendingResolve}
-                />
-              </div>
-            ))
-          )}
+        {/* Diff pane — the selected file's diff, one Monaco editor at a time. */}
+        <div className="flex-1 min-w-0">
+          <ReviewDiffPane
+            worktreePath={worktreePath}
+            file={selectedFileObj}
+            mode="branch"
+            commitHash={isSingleCommit ? fromCommit : undefined}
+            commitRange={
+              !isWholeBranch && !isSingleCommit && fromCommit && toCommit
+                ? { fromHash: fromCommit, toHash: toCommit }
+                : undefined
+            }
+            reviewed={selectedFile ? reviewedFiles.has(selectedFile) : false}
+            comments={fileComments}
+            sideBySide={sideBySide}
+            ignoreTrimWhitespace={!showWhitespace}
+            active={active}
+            revealTarget={revealTarget}
+            onToggleReviewed={() => {
+              if (selectedFile) handleToggleReviewed(selectedFile)
+            }}
+            onAddComment={(line, body, startLine) => {
+              if (selectedFile) handleAddComment(selectedFile, line, body, startLine)
+            }}
+            onDeleteComment={handleDeleteComment}
+            wordWrap={wordWrap}
+            onOpenEditor={onOpenEditor}
+            onAddReply={handleAddReply}
+            onResolveThread={handleResolveThread}
+            pendingResolve={pendingResolve}
+          />
         </div>
       </div>
     </div>

From dab78eb07326b44ffc4e78bb3828014c5faeae96 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Thu, 4 Jun 2026 18:19:50 -0400
Subject: [PATCH 48/63] fix(theme): normalize theme-derived colors to canonical
 hex
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tailwind v4 / Lightning CSS minifies hex literals in the generated CSS
(`#ffffff` -> `#fff`), so reading a `--color-*` token back with
getComputedStyle can yield 3/4-digit shorthand. Monaco's token color map
validates with a strict 6/8-hex regex and throws `Illegal value for token
color: #fff` — and since the standalone theme service folds
`editor.background` into a token rule, a minified white app background
(Hub Delight) crashes the editor on theme switch. The same shorthand also
leaked into the Settings "Copy as JSON" output.

Add normalizeThemeColor() and apply it everywhere a color is derived from a
theme: monaco-setup readVar (fixes the crash), XTerminal terminal theme,
Settings copy-as-JSON (emits canonical long-form hex), and effectiveAppBg.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/renderer/components/Settings.tsx  |  6 +++-
 src/renderer/components/XTerminal.tsx | 12 ++++---
 src/renderer/monaco-setup.ts          |  7 +++--
 src/renderer/theme-apply.ts           |  6 ++--
 src/renderer/theme-color.test.ts      | 45 +++++++++++++++++++++++++++
 src/renderer/theme-color.ts           | 34 ++++++++++++++++++++
 6 files changed, 101 insertions(+), 9 deletions(-)
 create mode 100644 src/renderer/theme-color.test.ts
 create mode 100644 src/renderer/theme-color.ts

diff --git a/src/renderer/components/Settings.tsx b/src/renderer/components/Settings.tsx
index 5c24e240..8cae7b91 100644
--- a/src/renderer/components/Settings.tsx
+++ b/src/renderer/components/Settings.tsx
@@ -12,6 +12,7 @@ import { AgentIcon } from './AgentIcon'
 import { InterfaceToggle } from './InterfaceToggle'
 import { BUILT_IN_THEMES_BY_MODE, type ThemeOption } from '../themes'
 import { SEMANTIC_KEYS } from '../theme-apply'
+import { normalizeThemeColor } from '../theme-color'
 import type { CustomTheme, UiScale } from '../../shared/state/settings'
 import { SCALES, scaleSpec } from '../../shared/state/settings'
 import { QRCodeSVG } from 'qrcode.react'
@@ -3478,7 +3479,10 @@ function readBuiltInThemeJson(opt: ThemeOption): string {
     const colors: Record<string, string> = {}
     for (const key of SEMANTIC_KEYS) {
       const v = cs.getPropertyValue(`--color-${key}`).trim()
-      if (v) colors[key] = v
+      // Emit canonical long-form hex so the copied theme round-trips cleanly:
+      // the CSS pipeline minifies `#ffffff` to `#fff`, but a copied theme
+      // should read as the author wrote it. Non-hex values pass through as-is.
+      if (v) colors[key] = normalizeThemeColor(v, v)
     }
     return JSON.stringify({ name: opt.label, mode: opt.mode, colors }, null, 2) + '\n'
   } finally {
diff --git a/src/renderer/components/XTerminal.tsx b/src/renderer/components/XTerminal.tsx
index 8e5bed5b..127695ad 100644
--- a/src/renderer/components/XTerminal.tsx
+++ b/src/renderer/components/XTerminal.tsx
@@ -8,6 +8,7 @@ import '@xterm/xterm/css/xterm.css'
 import type { StateEvent } from '../../shared/state'
 import { getClientId, subscribeActiveTransportReconnect, useSettings, useTerminalSession } from '../store'
 import { getBackend, useBackend } from '../backend'
+import { normalizeThemeColor } from '../theme-color'
 import {
   makeFileLinkProvider,
   loadWorktreeFiles,
@@ -230,11 +231,14 @@ function buildTerminalTheme(
   bgVar = '--color-app'
 ): NonNullable<ConstructorParameters<typeof Terminal>[0]>['theme'] {
   const rootStyle = getComputedStyle(document.documentElement)
-  const bg =
-    rootStyle.getPropertyValue(bgVar).trim() ||
-    rootStyle.getPropertyValue('--color-app').trim() ||
+  // Normalize theme-derived colors: minified shorthand like `#fff` is valid
+  // for xterm, but keeping every theme-derived color canonical avoids surprises
+  // and matches the Monaco path. See theme-color.ts.
+  const bg = normalizeThemeColor(
+    rootStyle.getPropertyValue(bgVar).trim() || rootStyle.getPropertyValue('--color-app'),
     '#0a0a0a'
-  const fg = rootStyle.getPropertyValue('--color-fg-bright').trim() || '#e5e5e5'
+  )
+  const fg = normalizeThemeColor(rootStyle.getPropertyValue('--color-fg-bright'), '#e5e5e5')
   return {
     background: bg,
     foreground: fg,
diff --git a/src/renderer/monaco-setup.ts b/src/renderer/monaco-setup.ts
index 0cab22e5..943b09e6 100644
--- a/src/renderer/monaco-setup.ts
+++ b/src/renderer/monaco-setup.ts
@@ -3,6 +3,7 @@
 // standalone chunk and returns a Worker constructor.
 import * as monaco from 'monaco-editor'
 import { DEFAULT_LIGHT_THEME, DEFAULT_DARK_THEME } from '../shared/state/settings'
+import { normalizeThemeColor } from './theme-color'
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
 import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
 import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
@@ -131,8 +132,10 @@ configureTypescriptDefaults()
 // Pull current Tailwind theme tokens from a source element and build a Monaco
 // theme that tracks them. Called once at boot and on theme changes.
 function readVar(source: HTMLElement, name: string, fallback: string): string {
-  const v = getComputedStyle(source).getPropertyValue(name).trim()
-  return v || fallback
+  const v = getComputedStyle(source).getPropertyValue(name)
+  // Normalize to canonical hex: the value may be minified shorthand (`#fff`)
+  // that Monaco's strict token color parser would throw on. See theme-color.ts.
+  return normalizeThemeColor(v, fallback)
 }
 
 /** Resolve a CSS color (hex/oklch/named/var) to its luminance and decide if
diff --git a/src/renderer/theme-apply.ts b/src/renderer/theme-apply.ts
index 391656db..a4f4c030 100644
--- a/src/renderer/theme-apply.ts
+++ b/src/renderer/theme-apply.ts
@@ -1,5 +1,6 @@
 import { DEFAULT_LIGHT_THEME, DEFAULT_DARK_THEME } from '../shared/state/settings'
 import type { ResolvedTheme } from './hooks/useActiveTheme'
+import { normalizeThemeColor } from './theme-color'
 
 // Tracks which `--color-*` properties we set inline on the documentElement
 // during the previous apply, so the next apply can clear leftovers
@@ -66,9 +67,10 @@ export function applyTheme(theme: ResolvedTheme): void {
  *  Used as `lastEffectiveAppBg` so main can choose a matching window
  *  background on the next boot. */
 export function effectiveAppBg(theme: ResolvedTheme): string {
+  const fallback = theme.mode === 'dark' ? '#0a0a0a' : '#fdf6e3'
   if (theme.kind === 'custom') {
-    return theme.colors.app ?? (theme.mode === 'dark' ? '#0a0a0a' : '#fdf6e3')
+    return normalizeThemeColor(theme.colors.app ?? fallback, fallback)
   }
   // First swatch on every built-in is its app background hex.
-  return theme.swatches[0]
+  return normalizeThemeColor(theme.swatches[0] ?? fallback, fallback)
 }
diff --git a/src/renderer/theme-color.test.ts b/src/renderer/theme-color.test.ts
new file mode 100644
index 00000000..b8dba34a
--- /dev/null
+++ b/src/renderer/theme-color.test.ts
@@ -0,0 +1,45 @@
+import { describe, it, expect } from 'vitest'
+import { normalizeThemeColor } from './theme-color'
+
+describe('normalizeThemeColor', () => {
+  const FB = '#0a0a0a'
+
+  it('expands 3-digit shorthand (the Lightning CSS minification case)', () => {
+    expect(normalizeThemeColor('#fff', FB)).toBe('#ffffff')
+    expect(normalizeThemeColor('#000', FB)).toBe('#000000')
+    expect(normalizeThemeColor('#abc', FB)).toBe('#aabbcc')
+  })
+
+  it('expands 4-digit shorthand with alpha', () => {
+    expect(normalizeThemeColor('#fff8', FB)).toBe('#ffffff88')
+    expect(normalizeThemeColor('#0000', FB)).toBe('#00000000')
+  })
+
+  it('passes valid 6- and 8-digit hex through unchanged', () => {
+    expect(normalizeThemeColor('#24292e', FB)).toBe('#24292e')
+    expect(normalizeThemeColor('#3a424d55', FB)).toBe('#3a424d55')
+  })
+
+  it('trims surrounding whitespace before matching', () => {
+    expect(normalizeThemeColor('  #fff  ', FB)).toBe('#ffffff')
+    expect(normalizeThemeColor('\t#24292e\n', FB)).toBe('#24292e')
+  })
+
+  it('falls back for empty / whitespace-only input', () => {
+    expect(normalizeThemeColor('', FB)).toBe(FB)
+    expect(normalizeThemeColor('   ', FB)).toBe(FB)
+  })
+
+  it('falls back for malformed-length hex', () => {
+    expect(normalizeThemeColor('#ff', FB)).toBe(FB)
+    expect(normalizeThemeColor('#fffff', FB)).toBe(FB)
+    expect(normalizeThemeColor('#fffffff', FB)).toBe(FB)
+  })
+
+  it('falls back for non-hex color forms Monaco token colors reject', () => {
+    expect(normalizeThemeColor('white', FB)).toBe(FB)
+    expect(normalizeThemeColor('rgb(255, 255, 255)', FB)).toBe(FB)
+    expect(normalizeThemeColor('oklch(1 0 0)', FB)).toBe(FB)
+    expect(normalizeThemeColor('var(--x)', FB)).toBe(FB)
+  })
+})
diff --git a/src/renderer/theme-color.ts b/src/renderer/theme-color.ts
new file mode 100644
index 00000000..eab032a8
--- /dev/null
+++ b/src/renderer/theme-color.ts
@@ -0,0 +1,34 @@
+// Guard for colors derived from theme CSS custom properties.
+//
+// Why this exists: Tailwind v4 (via Lightning CSS) minifies hex literals in
+// the generated stylesheet — `#ffffff` becomes `#fff`, `#000000` becomes
+// `#000`, etc. So reading a `--color-*` token back with getComputedStyle can
+// hand us a 3- or 4-digit shorthand even though the source CSS wrote the long
+// form. Most consumers cope, but Monaco's token color map does not: its
+// ColorMap.getId validates with `/^#?([0-9A-Fa-f]{6})([0-9A-Fa-f]{2})?$/` and
+// THROWS `Illegal value for token color: <c>` on anything that isn't 6/8 hex.
+// Since `editor.foreground` / `editor.background` get folded into a token rule
+// by the standalone theme service, a minified `#fff` background crashes the
+// whole editor the moment it tokenizes (e.g. switching to the Hub Delight
+// theme). Normalizing every theme-derived color to canonical long-form hex
+// before it reaches a consumer keeps the strict ones happy.
+
+/** Expand shorthand hex (`#rgb`/`#rgba`) to long form (`#rrggbb`/`#rrggbbaa`),
+ *  pass valid long-form hex through unchanged, and return `fallback` for
+ *  anything we can't confidently canonicalize (named colors, `rgb()`/`oklch()`,
+ *  malformed 5/7-digit hex, empty). The result is always safe to hand to
+ *  Monaco's strict token color parser when `fallback` itself is valid hex. */
+export function normalizeThemeColor(raw: string, fallback: string): string {
+  const c = raw.trim()
+  if (!c) return fallback
+  const m = /^#([0-9a-fA-F]+)$/.exec(c)
+  if (!m) return fallback
+  const digits = m[1]
+  if (digits.length === 3 || digits.length === 4) {
+    let out = '#'
+    for (const ch of digits) out += ch + ch
+    return out
+  }
+  if (digits.length === 6 || digits.length === 8) return c
+  return fallback
+}

From 2fc1caadfe221a3d91f7abd239ec550440b0bbe1 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Fri, 5 Jun 2026 00:06:16 -0400
Subject: [PATCH 49/63] feat(review): collapse file browser + fix comment-count
 text size
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a ListTree toggle button after the comments dropdown that hides the
file-tree column (and its resize handle), giving the diff the full width.

Also fix the comment count rendering one step larger than the rest of the
toolbar — the CommentDropdown button had no text-* class so the number
inherited the default size; pin it to text-xs to match the reviewed count
and diff stats.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/renderer/components/ReviewPane.tsx | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index e4628bae..f213231e 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
-import { Send, Clipboard, MessageSquare, GitCommitHorizontal, ArrowUp, ChevronDown, ChevronUp, Pilcrow, X, Keyboard, CloudSync, Loader2, WrapText, GitPullRequest, Menu, Search } from 'lucide-react'
+import { Send, Clipboard, MessageSquare, GitCommitHorizontal, ArrowUp, ChevronDown, ChevronUp, Pilcrow, X, Keyboard, CloudSync, Loader2, WrapText, GitPullRequest, Menu, Search, ListTree } from 'lucide-react'
 import type { ChangedFile, BranchCommit } from '../types'
 import type { PRReview } from '../../shared/state/prs'
 import type { ReviewComment } from './ReviewFileTree'
@@ -54,6 +54,7 @@ export function ReviewPane({
   const [comments, setComments] = useState<ReviewComment[]>([])
   const [collapsedDirs, setCollapsedDirs] = useState<Set<string>>(new Set())
   const [fileTreeWidth, setFileTreeWidth] = useState<number>(240)
+  const [fileTreeCollapsed, setFileTreeCollapsed] = useState(false)
   // Hoisted above ReviewDiffPane so the choice persists as the reviewer
   // clicks through files in the same review session.
   const [wordWrap, setWordWrap] = useState(false)
@@ -634,6 +635,19 @@ export function ReviewPane({
             }}
           />
 
+          <Tooltip label={fileTreeCollapsed ? 'Show file browser' : 'Hide file browser'}>
+            <button
+              onClick={() => setFileTreeCollapsed((v) => !v)}
+              aria-pressed={fileTreeCollapsed}
+              aria-label="Toggle file browser"
+              className={`flex items-center shrink-0 px-1.5 py-1 rounded border transition-colors cursor-pointer ${
+                fileTreeCollapsed ? 'border-accent text-accent' : 'border-border text-faint hover:text-fg'
+              }`}
+            >
+              <ListTree className="icon-xs" />
+            </button>
+          </Tooltip>
+
           {pr && <ReviewerStatus reviews={pr.reviews} />}
 
           <ReviewViewMenu
@@ -725,6 +739,7 @@ export function ReviewPane({
 
       <div className="flex flex-1 min-h-0">
         {/* File tree column — commit selector scopes the file list below it */}
+        {!fileTreeCollapsed && (
         <div
           className="shrink-0 flex flex-col min-h-0"
           style={{ width: fileTreeWidth }}
@@ -759,8 +774,9 @@ export function ReviewPane({
             />
           </div>
         </div>
+        )}
 
-        <ResizeHandle onDelta={handleFileTreeResize} />
+        {!fileTreeCollapsed && <ResizeHandle onDelta={handleFileTreeResize} />}
 
         {/* Diff pane — the selected file's diff, one Monaco editor at a time. */}
         <div className="flex-1 min-w-0">
@@ -1162,7 +1178,7 @@ function CommentDropdown({
       <button
         onClick={() => setOpen((v) => !v)}
         disabled={comments.length === 0}
-        className="flex items-center gap-1 text-info hover:text-info/70 transition-colors cursor-pointer disabled:text-faint disabled:cursor-default"
+        className="flex items-center gap-1 text-xs text-info hover:text-info/70 transition-colors cursor-pointer disabled:text-faint disabled:cursor-default"
       >
         <MessageSquare className="icon-xs" />
         {comments.length}

From 921261e8ad8bd7cff2b5e7622bce6b6ff1063266 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Fri, 5 Jun 2026 02:15:13 -0400
Subject: [PATCH 50/63] feat(review): drag-select the gutter + to comment on a
 line range
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Mousedown on the comment "+" in the glyph margin and drag across lines to
select a span, then release to open a range comment — a GitHub-style
gesture that doesn't require text-selecting the diff first. The covered
lines highlight live during the drag (each gets the + plus the
comment-range tint); a single-line drag still falls back to a one-line
comment.

Implemented in MonacoDiffEditor via a new optional onReferenceRange prop
so the "reference line in Claude" callers (DiffView/FileView) are
unaffected — they pass no range handler and keep click-only behavior.
Because the drag starts on the glyph margin rather than content, Monaco
never begins its own text selection, so the gutter gesture stays
independent of the c-shortcut's selection path. ReviewDiffPane maps the
range to the same commentStartLine/commentLine state the c shortcut uses,
so it round-trips to GitHub's start_line unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/MonacoDiffEditor.tsx | 75 ++++++++++++++++++--
 src/renderer/components/ReviewDiffPane.tsx   | 11 ++-
 2 files changed, 79 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/MonacoDiffEditor.tsx b/src/renderer/components/MonacoDiffEditor.tsx
index 353a1083..2404e80f 100644
--- a/src/renderer/components/MonacoDiffEditor.tsx
+++ b/src/renderer/components/MonacoDiffEditor.tsx
@@ -18,6 +18,10 @@ interface MonacoDiffEditorProps {
   onModifiedChange?: (value: string) => void
   onSave?: () => void
   onReferenceLine?: (lineNumber: number) => void
+  /** Fired when the user drag-selects a span of lines across the glyph
+   *  margin (mousedown on the `+`, drag, release). A single-line drag falls
+   *  back to onReferenceLine. When unset, the glyph is click-only. */
+  onReferenceRange?: (startLine: number, endLine: number) => void
   onEditorMount?: (editor: monaco.editor.IStandaloneDiffEditor) => void
   glyphClassName?: string
   glyphHoverMessage?: string
@@ -41,6 +45,7 @@ export function MonacoDiffEditor({
   onModifiedChange,
   onSave,
   onReferenceLine,
+  onReferenceRange,
   onEditorMount,
   glyphClassName = 'ref-line-glyph',
   glyphHoverMessage = 'Reference this line in Claude',
@@ -52,6 +57,7 @@ export function MonacoDiffEditor({
   const onChangeRef = useRef(onModifiedChange)
   const onSaveRef = useRef(onSave)
   const onRefRef = useRef(onReferenceLine)
+  const onRefRangeRef = useRef(onReferenceRange)
   const onMountRef = useRef(onEditorMount)
   const glyphClassRef = useRef(glyphClassName)
   const glyphHoverRef = useRef(glyphHoverMessage)
@@ -60,6 +66,7 @@ export function MonacoDiffEditor({
   onChangeRef.current = onModifiedChange
   onSaveRef.current = onSave
   onRefRef.current = onReferenceLine
+  onRefRangeRef.current = onReferenceRange
   onMountRef.current = onEditorMount
   glyphClassRef.current = glyphClassName
   glyphHoverRef.current = glyphHoverMessage
@@ -187,8 +194,9 @@ export function MonacoDiffEditor({
     // we hook onto it for hover/click.
     const modifiedEd = editor.getModifiedEditor()
     const glyphCollection = modifiedEd.createDecorationsCollection()
+    const hasGlyph = (): boolean => !!onRefRef.current || !!onRefRangeRef.current
     const setHoverLine = (lineNumber: number | null): void => {
-      if (!onRefRef.current || lineNumber == null) {
+      if (!hasGlyph() || lineNumber == null) {
         glyphCollection.clear()
         return
       }
@@ -202,23 +210,78 @@ export function MonacoDiffEditor({
         }
       ])
     }
+
+    // Drag-select across the glyph margin to comment on a span of lines:
+    // mousedown on the `+` starts a drag, moving over lines extends it, and
+    // the window-level mouseup finalizes it (single line → onReferenceLine,
+    // a span → onReferenceRange). Because the drag starts on the glyph margin
+    // — not on content — Monaco never begins a text selection, so the gutter
+    // gesture stays independent of the editor's own selection.
+    let dragStart: number | null = null
+    let dragEnd: number | null = null
+    const paintDrag = (): void => {
+      if (dragStart == null || dragEnd == null) {
+        glyphCollection.clear()
+        return
+      }
+      const lo = Math.min(dragStart, dragEnd)
+      const hi = Math.max(dragStart, dragEnd)
+      const decos: monaco.editor.IModelDeltaDecoration[] = []
+      for (let ln = lo; ln <= hi; ln++) {
+        decos.push({
+          range: new monaco.Range(ln, 1, ln, 1),
+          options: {
+            isWholeLine: true,
+            className: 'comment-range-line',
+            glyphMarginClassName: glyphClassRef.current
+          }
+        })
+      }
+      glyphCollection.set(decos)
+    }
+
     const moveSub = modifiedEd.onMouseMove((e) => {
-      if (!onRefRef.current) return
-      setHoverLine(e.target.position?.lineNumber ?? null)
+      if (!hasGlyph()) return
+      const ln = e.target.position?.lineNumber ?? null
+      if (dragStart != null) {
+        if (ln != null) {
+          dragEnd = ln
+          paintDrag()
+        }
+        return
+      }
+      setHoverLine(ln)
+    })
+    const leaveSub = modifiedEd.onMouseLeave(() => {
+      if (dragStart == null) setHoverLine(null)
     })
-    const leaveSub = modifiedEd.onMouseLeave(() => setHoverLine(null))
     const downSub = modifiedEd.onMouseDown((e) => {
-      if (!onRefRef.current) return
+      if (!hasGlyph()) return
       if (e.target.type !== monaco.editor.MouseTargetType.GUTTER_GLYPH_MARGIN) return
       const ln = e.target.position?.lineNumber
-      if (ln != null) onRefRef.current(ln)
+      if (ln == null) return
+      dragStart = ln
+      dragEnd = ln
+      paintDrag()
     })
+    const onWindowUp = (): void => {
+      if (dragStart == null) return
+      const lo = Math.min(dragStart, dragEnd ?? dragStart)
+      const hi = Math.max(dragStart, dragEnd ?? dragStart)
+      dragStart = null
+      dragEnd = null
+      glyphCollection.clear()
+      if (lo !== hi && onRefRangeRef.current) onRefRangeRef.current(lo, hi)
+      else onRefRef.current?.(hi)
+    }
+    window.addEventListener('mouseup', onWindowUp)
 
     return () => {
       changeSub.dispose()
       moveSub.dispose()
       leaveSub.dispose()
       downSub.dispose()
+      window.removeEventListener('mouseup', onWindowUp)
       for (const s of heightSubs) s.dispose()
       if (revealTimer) clearTimeout(revealTimer)
       glyphCollection.clear()
diff --git a/src/renderer/components/ReviewDiffPane.tsx b/src/renderer/components/ReviewDiffPane.tsx
index 90833421..b5a72043 100644
--- a/src/renderer/components/ReviewDiffPane.tsx
+++ b/src/renderer/components/ReviewDiffPane.tsx
@@ -904,9 +904,17 @@ export function ReviewDiffPane({
   }, [revealTarget?.nonce, revealTarget?.filePath, editorNonce, file?.path])
 
   const handleReferenceLine = useCallback((lineNumber: number) => {
+    setCommentStartLine(null)
     setCommentLine(lineNumber)
   }, [])
 
+  // Drag-selecting the gutter `+` anchors a range comment: end line is the
+  // input's anchor, start line is remembered (same shape as the `c` shortcut).
+  const handleReferenceRange = useCallback((startLine: number, endLine: number) => {
+    setCommentStartLine(startLine)
+    setCommentLine(endLine)
+  }, [])
+
   const jumpToFirstComment = useCallback(() => {
     if (comments.length === 0) return
     const first = [...comments].sort((a, b) => a.lineNumber - b.lineNumber)[0]
@@ -1118,9 +1126,10 @@ export function ReviewDiffPane({
             fontSize={scaledEditorFontSize(settings.terminalFontSize, settings.uiScale)}
             wordWrap={wordWrap}
             onReferenceLine={handleReferenceLine}
+            onReferenceRange={handleReferenceRange}
             onEditorMount={handleEditorMount}
             glyphClassName="comment-line-glyph"
-            glyphHoverMessage="Add a comment on this line"
+            glyphHoverMessage="Add a comment on this line — drag to select a range"
           />
         ) : null}
       </div>

From d9a7f16d4a6210281294f63d243822b558cfa611 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Fri, 5 Jun 2026 11:56:58 -0400
Subject: [PATCH 51/63] feat(review): F6 default hotkey + fix Quake console in
 review tabs

Change the default openReview binding from Cmd+Alt+R to a bare F6.

Fix the Quake terminal (Ctrl+`) not opening in a review/diff/file tab
until the user had clicked into the Monaco editor. The Quake check
requires keyboard focus inside [data-tab-content], but focus sat on
<body> until something focusable grabbed it. Two fixes:

- WorkspaceView: the tab-content wrapper is now focusable (tabIndex=-1)
  and grabs focus on mousedown-capture, so clicking anywhere in a tab
  (file list, gutter, empty toolbar) keeps focus in-tab. Focusable
  targets still win via the click's default action.
- ReviewPane: focuses its root when the tab becomes active, so the
  hotkey works even before the first click.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/ReviewPane.tsx    | 16 +++++++++++++++-
 src/renderer/components/WorkspaceView.tsx | 14 ++++++++++++--
 src/renderer/hotkeys.ts                   |  2 +-
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index f213231e..9499ea6d 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -178,6 +178,20 @@ export function ReviewPane({
     if (fileRequest) setSelectedFile(fileRequest.filePath)
   }, [fileRequest?.nonce, fileRequest?.filePath])
 
+  // When this review tab becomes active, pull keyboard focus into its root so
+  // tab-scoped hotkeys (e.g. the Quake terminal on Ctrl+`) fire immediately —
+  // without this, focus sits on <body> until the user clicks into the Monaco
+  // editor, and the Quake check (`activeElement` inside [data-tab-content])
+  // fails. Skip if focus already landed somewhere inside the tab.
+  const rootRef = useRef<HTMLDivElement | null>(null)
+  useEffect(() => {
+    if (!active) return
+    const root = rootRef.current
+    if (!root) return
+    if (root.contains(document.activeElement)) return
+    root.focus({ preventScroll: true })
+  }, [active])
+
   const { totalAdditions, totalDeletions } = useMemo(() => {
     let add = 0
     let del = 0
@@ -541,7 +555,7 @@ export function ReviewPane({
   const progress = files.length > 0 ? reviewedFiles.size / files.length : 0
 
   return (
-    <div className="relative flex flex-col h-full w-full bg-bg">
+    <div ref={rootRef} tabIndex={-1} className="relative flex flex-col h-full w-full bg-bg outline-none">
       {showShortcuts && <ReviewShortcutsPopup onClose={() => setShowShortcuts(false)} />}
       {showPrDescription && pr && (
         <PrDescriptionPanel
diff --git a/src/renderer/components/WorkspaceView.tsx b/src/renderer/components/WorkspaceView.tsx
index a7f11f33..55d25005 100644
--- a/src/renderer/components/WorkspaceView.tsx
+++ b/src/renderer/components/WorkspaceView.tsx
@@ -572,10 +572,20 @@ export function WorkspaceView({
           const isActiveInPane = leaf.activeTabId === tab.id
           return createPortal(
             <div
-              className="absolute inset-0"
+              className="absolute inset-0 outline-none"
               data-tab-content
+              tabIndex={-1}
               style={{ display: isActiveInPane ? 'block' : 'none' }}
-              onMouseDownCapture={() => onFocusPane?.(worktreePath, leaf.id)}
+              onMouseDownCapture={(e) => {
+                onFocusPane?.(worktreePath, leaf.id)
+                // Keep keyboard focus inside the tab content so tab-scoped
+                // hotkeys (e.g. the Quake terminal) fire even when the click
+                // lands on a non-focusable element — the review file list,
+                // a diff gutter, empty toolbar space. Focusable targets
+                // (Monaco, inputs, buttons) still grab focus via the click's
+                // default action, which runs after this capture handler.
+                e.currentTarget.focus({ preventScroll: true })
+              }}
             >
               <ErrorBoundary label={`pane:${tab.type}:${tab.id}`}>
                 {crashedTabIds?.has(tab.id) ? (
diff --git a/src/renderer/hotkeys.ts b/src/renderer/hotkeys.ts
index dad966e5..406367e9 100644
--- a/src/renderer/hotkeys.ts
+++ b/src/renderer/hotkeys.ts
@@ -109,7 +109,7 @@ export const DEFAULT_HOTKEYS: Record<Action, HotkeyBinding> = {
   toggleSingleScreen: { key: 'F12', modifiers: {} },
   togglePerfMonitor: { key: 'p', modifiers: { cmd: true, alt: true } },
   hotkeyCheatsheet: { key: '/', modifiers: { cmd: true, shift: true } },
-  openReview: { key: 'r', modifiers: { cmd: true, alt: true } },
+  openReview: { key: 'F6', modifiers: {} },
   // Quake-style drop-down terminal on Ctrl+backtick (classic Quake's backtick).
   toggleQuakeTerminal: { key: '`', modifiers: { ctrl: true } },
   openSettings: { key: ',', modifiers: { cmd: true } },

From 90abb45b1740c9d25cfa0555c7c59d2bed5f1b73 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Fri, 5 Jun 2026 12:16:53 -0400
Subject: [PATCH 52/63] feat(review): n/m for unreviewed nav, f to toggle file
 browser
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rebind next/previous unreviewed file from Shift+J/K (and Shift+Arrow)
to plain n / m. Add f to hide/show the file browser — handled in
ReviewPane since the tree is unmounted while collapsed and can't
restore itself. Updated the ? shortcuts popup to match.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/ReviewFileTree.tsx |  4 ++--
 src/renderer/components/ReviewPane.tsx     | 20 ++++++++++++++++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/ReviewFileTree.tsx b/src/renderer/components/ReviewFileTree.tsx
index 2ad8e569..900709f6 100644
--- a/src/renderer/components/ReviewFileTree.tsx
+++ b/src/renderer/components/ReviewFileTree.tsx
@@ -276,10 +276,10 @@ export function ReviewFileTree({
       ) {
         return
       }
-      if (e.shiftKey && (e.key === 'J' || e.key === 'ArrowDown')) {
+      if (e.key === 'n' && !e.metaKey && !e.ctrlKey) {
         e.preventDefault()
         navigateUnreviewed(1)
-      } else if (e.shiftKey && (e.key === 'K' || e.key === 'ArrowUp')) {
+      } else if (e.key === 'm' && !e.metaKey && !e.ctrlKey) {
         e.preventDefault()
         navigateUnreviewed(-1)
       } else if (!e.shiftKey && (e.key === 'j' || (e.key === 'ArrowDown' && !e.metaKey))) {
diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index 9499ea6d..24ad4797 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -503,6 +503,21 @@ export function ReviewPane({
     return () => window.removeEventListener('keydown', onKey, true)
   }, [active])
 
+  // `f` toggles the file browser. Handled here (not in ReviewFileTree) since
+  // that component is unmounted while collapsed and couldn't bring itself back.
+  useEffect(() => {
+    if (!active) return
+    const onKey = (e: KeyboardEvent): void => {
+      if (e.key !== 'f' || e.metaKey || e.ctrlKey || e.altKey) return
+      const el = e.target as HTMLElement | null
+      if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) return
+      e.preventDefault()
+      setFileTreeCollapsed((v) => !v)
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [active])
+
   // Run the search (debounced). Fetches + caches each file's modified content
   // on first use, then matches case-insensitively across every file.
   useEffect(() => {
@@ -1244,10 +1259,11 @@ function CommentDropdown({
 const REVIEW_SHORTCUTS: [string, string][] = [
   ['j / ↓', 'Next file'],
   ['k / ↑', 'Previous file'],
-  ['⇧J / ⇧↓', 'Next unreviewed file'],
-  ['⇧K / ⇧↑', 'Previous unreviewed file'],
+  ['n', 'Next unreviewed file'],
+  ['m', 'Previous unreviewed file'],
   ['] / [', 'Next / previous comment in file'],
   ['r', 'Mark file viewed / unviewed'],
+  ['f', 'Hide / show file browser'],
   ['s / d', 'Side-by-side / unified diff'],
   ['c', 'Comment on hovered line (or file)'],
   ['?', 'Toggle this help']

From 0dafaf9e76a20809e2282fc65b81e96f1f52e467 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Fri, 5 Jun 2026 12:20:13 -0400
Subject: [PATCH 53/63] =?UTF-8?q?feat(review):=20a/q/w=20shortcuts=20?=
 =?UTF-8?q?=E2=80=94=20comment=20list,=20whitespace,=20word=20wrap?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- a: open + focus the comment-list dropdown; ↑/↓ navigate, Enter/Space
  select (reveals the comment's file+line), Esc closes. Nav uses a
  capture-phase listener so Arrow keys beat the file-nav handler.
- q: toggle whitespace rendering.
- w: toggle word wrap.
Updated the ? shortcuts popup to match.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/ReviewPane.tsx | 111 ++++++++++++++++++++++---
 1 file changed, 99 insertions(+), 12 deletions(-)

diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index 24ad4797..7d34576f 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -55,6 +55,8 @@ export function ReviewPane({
   const [collapsedDirs, setCollapsedDirs] = useState<Set<string>>(new Set())
   const [fileTreeWidth, setFileTreeWidth] = useState<number>(240)
   const [fileTreeCollapsed, setFileTreeCollapsed] = useState(false)
+  // Bumped by the `a` shortcut to open + focus the comment-list dropdown.
+  const [commentMenuNonce, setCommentMenuNonce] = useState(0)
   // Hoisted above ReviewDiffPane so the choice persists as the reviewer
   // clicks through files in the same review session.
   const [wordWrap, setWordWrap] = useState(false)
@@ -503,16 +505,28 @@ export function ReviewPane({
     return () => window.removeEventListener('keydown', onKey, true)
   }, [active])
 
-  // `f` toggles the file browser. Handled here (not in ReviewFileTree) since
-  // that component is unmounted while collapsed and couldn't bring itself back.
+  // Pane-level single-key shortcuts. Handled here (not in ReviewFileTree)
+  // because `f` must work while the tree is collapsed/unmounted, and `a`
+  // drives the comment dropdown that lives in this component's toolbar.
   useEffect(() => {
     if (!active) return
     const onKey = (e: KeyboardEvent): void => {
-      if (e.key !== 'f' || e.metaKey || e.ctrlKey || e.altKey) return
+      if (e.metaKey || e.ctrlKey || e.altKey) return
       const el = e.target as HTMLElement | null
       if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) return
-      e.preventDefault()
-      setFileTreeCollapsed((v) => !v)
+      if (e.key === 'f') {
+        e.preventDefault()
+        setFileTreeCollapsed((v) => !v)
+      } else if (e.key === 'a') {
+        e.preventDefault()
+        setCommentMenuNonce((n) => n + 1)
+      } else if (e.key === 'q') {
+        e.preventDefault()
+        setShowWhitespace((v) => !v)
+      } else if (e.key === 'w') {
+        e.preventDefault()
+        setWordWrap((v) => !v)
+      }
     }
     window.addEventListener('keydown', onKey)
     return () => window.removeEventListener('keydown', onKey)
@@ -657,6 +671,7 @@ export function ReviewPane({
 
           <CommentDropdown
             comments={comments}
+            openNonce={commentMenuNonce}
             onCopy={handleCopyComments}
             onSelect={(c) => {
               setSelectedFile(c.filePath)
@@ -1179,14 +1194,49 @@ function ReviewerStatus({ reviews }: { reviews: PRReview[] }): JSX.Element | nul
 function CommentDropdown({
   comments,
   onSelect,
-  onCopy
+  onCopy,
+  openNonce
 }: {
   comments: ReviewComment[]
   onSelect: (c: ReviewComment) => void
   onCopy: () => void
+  /** Bumped by the parent's `a` shortcut to open + focus the list. */
+  openNonce?: number
 }): JSX.Element {
   const [open, setOpen] = useState(false)
+  const [activeIndex, setActiveIndex] = useState(0)
   const wrapRef = useRef<HTMLDivElement | null>(null)
+  const listRef = useRef<HTMLDivElement | null>(null)
+  const activeItemRef = useRef<HTMLButtonElement | null>(null)
+
+  const sorted = useMemo(
+    () =>
+      [...comments].sort(
+        (a, b) => a.filePath.localeCompare(b.filePath) || a.lineNumber - b.lineNumber
+      ),
+    [comments]
+  )
+
+  // Open via the parent `a` shortcut.
+  useEffect(() => {
+    if (!openNonce) return
+    if (sorted.length === 0) return
+    setOpen(true)
+    setActiveIndex(0)
+  }, [openNonce])
+
+  // Focus the list whenever it opens so arrow-key nav has a home, and keep
+  // the active index in range as comments come and go.
+  useEffect(() => {
+    if (!open) return
+    setActiveIndex((i) => Math.min(Math.max(i, 0), Math.max(sorted.length - 1, 0)))
+    requestAnimationFrame(() => listRef.current?.focus({ preventScroll: true }))
+  }, [open])
+
+  // Keep the highlighted row scrolled into view.
+  useEffect(() => {
+    if (open) activeItemRef.current?.scrollIntoView({ block: 'nearest' })
+  }, [open, activeIndex])
 
   useEffect(() => {
     if (!open) return
@@ -1198,9 +1248,36 @@ function CommentDropdown({
     return () => window.removeEventListener('mousedown', close)
   }, [open])
 
-  const sorted = [...comments].sort(
-    (a, b) => a.filePath.localeCompare(b.filePath) || a.lineNumber - b.lineNumber
-  )
+  // Arrow/space/enter navigation. Capture phase so it beats the file-nav
+  // window listener (which also acts on Arrow keys).
+  useEffect(() => {
+    if (!open) return
+    const onKey = (e: KeyboardEvent): void => {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault()
+        e.stopPropagation()
+        setActiveIndex((i) => Math.min(i + 1, sorted.length - 1))
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        e.stopPropagation()
+        setActiveIndex((i) => Math.max(i - 1, 0))
+      } else if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        e.stopPropagation()
+        const c = sorted[activeIndex]
+        if (c) {
+          onSelect(c)
+          setOpen(false)
+        }
+      } else if (e.key === 'Escape') {
+        e.preventDefault()
+        e.stopPropagation()
+        setOpen(false)
+      }
+    }
+    window.addEventListener('keydown', onKey, true)
+    return () => window.removeEventListener('keydown', onKey, true)
+  }, [open, sorted, activeIndex, onSelect])
 
   return (
     <div ref={wrapRef} className="relative">
@@ -1215,7 +1292,9 @@ function CommentDropdown({
       </button>
       {open && comments.length > 0 && (
         <div
-          className="absolute z-50 top-full left-0 mt-1 w-[28rem] max-h-[20rem] overflow-y-auto bg-panel-raised border border-border-strong rounded shadow-lg py-1"
+          ref={listRef}
+          tabIndex={-1}
+          className="absolute z-50 top-full left-0 mt-1 w-[28rem] max-h-[20rem] overflow-y-auto bg-panel-raised border border-border-strong rounded shadow-lg py-1 outline-none"
           onMouseDown={(e) => e.stopPropagation()}
         >
           <button
@@ -1228,16 +1307,21 @@ function CommentDropdown({
             <Clipboard className="icon-xs" />
             Copy all comments to clipboard
           </button>
-          {sorted.map((c) => {
+          {sorted.map((c, i) => {
             const name = c.filePath.split('/').pop() || c.filePath
+            const isActive = i === activeIndex
             return (
               <button
                 key={c.id}
+                ref={isActive ? activeItemRef : undefined}
+                onMouseMove={() => setActiveIndex(i)}
                 onClick={() => {
                   onSelect(c)
                   setOpen(false)
                 }}
-                className="w-full text-left px-3 py-1.5 hover:bg-panel transition-colors cursor-pointer"
+                className={`w-full text-left px-3 py-1.5 transition-colors cursor-pointer ${
+                  isActive ? 'bg-panel' : 'hover:bg-panel'
+                }`}
               >
                 <div className="flex items-center gap-2 text-xs">
                   <span className="font-mono text-fg truncate">{name}</span>
@@ -1262,9 +1346,12 @@ const REVIEW_SHORTCUTS: [string, string][] = [
   ['n', 'Next unreviewed file'],
   ['m', 'Previous unreviewed file'],
   ['] / [', 'Next / previous comment in file'],
+  ['a', 'Comment list (↑/↓ then Enter)'],
   ['r', 'Mark file viewed / unviewed'],
   ['f', 'Hide / show file browser'],
   ['s / d', 'Side-by-side / unified diff'],
+  ['w', 'Toggle word wrap'],
+  ['q', 'Toggle whitespace'],
   ['c', 'Comment on hovered line (or file)'],
   ['?', 'Toggle this help']
 ]

From 4e8627205f473b265a5af0aa74ec13e51254a519 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Fri, 5 Jun 2026 12:22:56 -0400
Subject: [PATCH 54/63] feat(review): dock PR description below file browser +
 g shortcut

The "PR description" button now toggles a pane docked at the bottom of
the file-browser column instead of a modal overlay. Off by default,
capped at 45% of the column height with its own scroll. Add g to
show/hide it. Updated the ? shortcuts popup.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/ReviewPane.tsx | 101 +++++++++++--------------
 1 file changed, 44 insertions(+), 57 deletions(-)

diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index 7d34576f..c6fffce3 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -517,6 +517,9 @@ export function ReviewPane({
       if (e.key === 'f') {
         e.preventDefault()
         setFileTreeCollapsed((v) => !v)
+      } else if (e.key === 'g') {
+        e.preventDefault()
+        if (pr) setShowPrDescription((v) => !v)
       } else if (e.key === 'a') {
         e.preventDefault()
         setCommentMenuNonce((n) => n + 1)
@@ -530,7 +533,7 @@ export function ReviewPane({
     }
     window.addEventListener('keydown', onKey)
     return () => window.removeEventListener('keydown', onKey)
-  }, [active])
+  }, [active, !!pr])
 
   // Run the search (debounced). Fetches + caches each file's modified content
   // on first use, then matches case-insensitively across every file.
@@ -586,15 +589,6 @@ export function ReviewPane({
   return (
     <div ref={rootRef} tabIndex={-1} className="relative flex flex-col h-full w-full bg-bg outline-none">
       {showShortcuts && <ReviewShortcutsPopup onClose={() => setShowShortcuts(false)} />}
-      {showPrDescription && pr && (
-        <PrDescriptionPanel
-          title={pr.title}
-          number={pr.number}
-          body={pr.body}
-          url={pr.url}
-          onClose={() => setShowPrDescription(false)}
-        />
-      )}
       {findOpen && (
         <div className="absolute top-1 right-3 z-[60] flex items-center gap-2 rounded border border-border-strong bg-panel-raised shadow-lg px-2 py-1.5 text-xs">
           <Search className="icon-xs text-faint shrink-0" />
@@ -817,6 +811,15 @@ export function ReviewPane({
               active={active}
             />
           </div>
+          {showPrDescription && pr && (
+            <PrDescriptionPane
+              title={pr.title}
+              number={pr.number}
+              body={pr.body}
+              url={pr.url}
+              onClose={() => setShowPrDescription(false)}
+            />
+          )}
         </div>
         )}
 
@@ -1349,6 +1352,7 @@ const REVIEW_SHORTCUTS: [string, string][] = [
   ['a', 'Comment list (↑/↓ then Enter)'],
   ['r', 'Mark file viewed / unviewed'],
   ['f', 'Hide / show file browser'],
+  ['g', 'Show / hide PR description'],
   ['s / d', 'Side-by-side / unified diff'],
   ['w', 'Toggle word wrap'],
   ['q', 'Toggle whitespace'],
@@ -1402,7 +1406,9 @@ function ReviewShortcutsPopup({ onClose }: { onClose: () => void }): JSX.Element
   )
 }
 
-function PrDescriptionPanel({
+/** PR description docked at the bottom of the file-browser column. Toggled by
+ *  the "PR description" toolbar button (or the `g` shortcut); off by default. */
+function PrDescriptionPane({
   title,
   number,
   body,
@@ -1415,53 +1421,34 @@ function PrDescriptionPanel({
   url: string
   onClose: () => void
 }): JSX.Element {
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent): void => {
-      if (e.key === 'Escape') {
-        e.preventDefault()
-        onClose()
-      }
-    }
-    window.addEventListener('keydown', onKey)
-    return () => window.removeEventListener('keydown', onKey)
-  }, [onClose])
-
   return (
-    <div
-      className="absolute inset-0 z-50 flex items-center justify-center bg-black/40"
-      onClick={onClose}
-    >
-      <div
-        className="w-[42rem] max-w-[90%] max-h-[80%] flex flex-col rounded-lg border border-border-strong bg-panel-raised shadow-lg"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="flex items-center gap-2 px-4 py-2.5 border-b border-border">
-          <GitPullRequest className="icon-sm text-faint shrink-0" />
-          <a
-            href={url}
-            target="_blank"
-            rel="noreferrer"
-            className="text-base font-medium text-fg hover:underline truncate"
-          >
-            {title} <span className="text-faint">#{number}</span>
-          </a>
-          <button
-            onClick={onClose}
-            aria-label="Close"
-            className="ml-auto shrink-0 text-faint hover:text-fg cursor-pointer"
-          >
-            <X className="icon-base" />
-          </button>
-        </div>
-        <div className="markdown overflow-y-auto px-4 py-3 text-sm">
-          {body.trim() ? (
-            <ReactMarkdown remarkPlugins={REVIEW_MD_PLUGINS} rehypePlugins={REVIEW_REHYPE_PLUGINS}>
-              {body}
-            </ReactMarkdown>
-          ) : (
-            <span className="text-faint italic">No description provided.</span>
-          )}
-        </div>
+    <div className="shrink-0 flex flex-col min-h-0 max-h-[45%] border-t border-border">
+      <div className="flex items-center gap-1.5 px-2 py-1.5 border-b border-border shrink-0">
+        <GitPullRequest className="icon-xs text-faint shrink-0" />
+        <a
+          href={url}
+          target="_blank"
+          rel="noreferrer"
+          className="text-xs font-medium text-fg hover:underline truncate"
+        >
+          {title} <span className="text-faint">#{number}</span>
+        </a>
+        <button
+          onClick={onClose}
+          aria-label="Hide PR description"
+          className="ml-auto shrink-0 text-faint hover:text-fg cursor-pointer"
+        >
+          <X className="icon-xs" />
+        </button>
+      </div>
+      <div className="markdown overflow-y-auto px-3 py-2 text-xs">
+        {body.trim() ? (
+          <ReactMarkdown remarkPlugins={REVIEW_MD_PLUGINS} rehypePlugins={REVIEW_REHYPE_PLUGINS}>
+            {body}
+          </ReactMarkdown>
+        ) : (
+          <span className="text-faint italic">No description provided.</span>
+        )}
       </div>
     </div>
   )

From 11af8e993803af5f2bed3f09e3b682d569195bf4 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Fri, 5 Jun 2026 12:24:40 -0400
Subject: [PATCH 55/63] feat(review): keep PR description visible when file
 browser is collapsed

The left column now stays mounted whenever the file tree OR the PR
description is showing. When the file browser is collapsed, the PR
description fills the column (flex-1); otherwise it docks under the
tree capped at 45% height. The resize handle persists with the column.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/ReviewPane.tsx | 84 +++++++++++++++-----------
 1 file changed, 50 insertions(+), 34 deletions(-)

diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index c6fffce3..87a71db3 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -776,41 +776,47 @@ export function ReviewPane({
       </div>
 
       <div className="flex flex-1 min-h-0">
-        {/* File tree column — commit selector scopes the file list below it */}
-        {!fileTreeCollapsed && (
+        {/* Left column — file tree (commit selector + file list) and/or the
+            docked PR description. Stays mounted while either is showing, so
+            the PR description survives collapsing the file browser. */}
+        {(!fileTreeCollapsed || (showPrDescription && pr)) && (
         <div
           className="shrink-0 flex flex-col min-h-0"
           style={{ width: fileTreeWidth }}
         >
-          <div className="shrink-0 p-2 border-b border-border">
-            <CommitSelector
-              commits={commits}
-              isWholeBranch={isWholeBranch}
-              selectionIndices={selectionIndices}
-              onSelectAll={handleSelectAllCommits}
-              onCommitClick={handleCommitClick}
-              fromCommit={fromCommit}
-              toCommit={toCommit}
-            />
-          </div>
-          <div className="flex-1 min-h-0 overflow-hidden">
-            <ReviewFileTree
-              files={files}
-              selectedFile={selectedFile}
-              reviewedFiles={reviewedFiles}
-              comments={comments}
-              collapsedDirs={collapsedDirs}
-              onSelectFile={setSelectedFile}
-              onToggleReviewed={handleToggleReviewed}
-              onToggleDir={handleToggleDir}
-              onSetSideBySide={setSideBySide}
-              onShowShortcuts={() => setShowShortcuts((v) => !v)}
-              onRevealLine={(filePath, line) =>
-                setRevealTarget({ filePath, line, nonce: ++revealNonceRef.current })
-              }
-              active={active}
-            />
-          </div>
+          {!fileTreeCollapsed && (
+            <>
+              <div className="shrink-0 p-2 border-b border-border">
+                <CommitSelector
+                  commits={commits}
+                  isWholeBranch={isWholeBranch}
+                  selectionIndices={selectionIndices}
+                  onSelectAll={handleSelectAllCommits}
+                  onCommitClick={handleCommitClick}
+                  fromCommit={fromCommit}
+                  toCommit={toCommit}
+                />
+              </div>
+              <div className="flex-1 min-h-0 overflow-hidden">
+                <ReviewFileTree
+                  files={files}
+                  selectedFile={selectedFile}
+                  reviewedFiles={reviewedFiles}
+                  comments={comments}
+                  collapsedDirs={collapsedDirs}
+                  onSelectFile={setSelectedFile}
+                  onToggleReviewed={handleToggleReviewed}
+                  onToggleDir={handleToggleDir}
+                  onSetSideBySide={setSideBySide}
+                  onShowShortcuts={() => setShowShortcuts((v) => !v)}
+                  onRevealLine={(filePath, line) =>
+                    setRevealTarget({ filePath, line, nonce: ++revealNonceRef.current })
+                  }
+                  active={active}
+                />
+              </div>
+            </>
+          )}
           {showPrDescription && pr && (
             <PrDescriptionPane
               title={pr.title}
@@ -818,12 +824,15 @@ export function ReviewPane({
               body={pr.body}
               url={pr.url}
               onClose={() => setShowPrDescription(false)}
+              fill={fileTreeCollapsed}
             />
           )}
         </div>
         )}
 
-        {!fileTreeCollapsed && <ResizeHandle onDelta={handleFileTreeResize} />}
+        {(!fileTreeCollapsed || (showPrDescription && pr)) && (
+          <ResizeHandle onDelta={handleFileTreeResize} />
+        )}
 
         {/* Diff pane — the selected file's diff, one Monaco editor at a time. */}
         <div className="flex-1 min-w-0">
@@ -1413,16 +1422,23 @@ function PrDescriptionPane({
   number,
   body,
   url,
-  onClose
+  onClose,
+  fill
 }: {
   title: string
   number: number
   body: string
   url: string
   onClose: () => void
+  /** Fill the column (file browser collapsed) vs. dock under the file tree. */
+  fill?: boolean
 }): JSX.Element {
   return (
-    <div className="shrink-0 flex flex-col min-h-0 max-h-[45%] border-t border-border">
+    <div
+      className={`flex flex-col min-h-0 ${
+        fill ? 'flex-1' : 'shrink-0 max-h-[45%] border-t border-border'
+      }`}
+    >
       <div className="flex items-center gap-1.5 px-2 py-1.5 border-b border-border shrink-0">
         <GitPullRequest className="icon-xs text-faint shrink-0" />
         <a

From 33502478eb5066bf5df526999dd43b6d8d5b60e5 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Fri, 5 Jun 2026 12:25:30 -0400
Subject: [PATCH 56/63] feat(review): move help button left of PR description
 button

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/ReviewPane.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index 87a71db3..80f645e6 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -639,6 +639,16 @@ export function ReviewPane({
       {/* Top controls bar */}
       <div className="shrink-0 border-b border-border bg-panel">
         <div className="h-10 flex items-center gap-3 px-3">
+          <Tooltip label="Keyboard shortcuts (?)">
+            <button
+              onClick={() => setShowShortcuts((v) => !v)}
+              aria-label="Keyboard shortcuts"
+              className="flex items-center shrink-0 px-1.5 py-1 rounded border border-border text-faint hover:text-fg cursor-pointer transition-colors"
+            >
+              <Keyboard className="icon-xs" />
+            </button>
+          </Tooltip>
+
           <Tooltip label={pr ? 'PR description' : 'No pull request for this worktree'}>
             <button
               onClick={() => setShowPrDescription((v) => !v)}
@@ -653,16 +663,6 @@ export function ReviewPane({
             </button>
           </Tooltip>
 
-          <Tooltip label="Keyboard shortcuts (?)">
-            <button
-              onClick={() => setShowShortcuts((v) => !v)}
-              aria-label="Keyboard shortcuts"
-              className="flex items-center shrink-0 px-1.5 py-1 rounded border border-border text-faint hover:text-fg cursor-pointer transition-colors"
-            >
-              <Keyboard className="icon-xs" />
-            </button>
-          </Tooltip>
-
           <CommentDropdown
             comments={comments}
             openNonce={commentMenuNonce}

From b8c7fd3518c90dd62dee9a52ff5015d4396f87f8 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Fri, 5 Jun 2026 12:34:02 -0400
Subject: [PATCH 57/63] fix(review): stop comment box flashing / losing draft
 mid-typing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The view-zone sync effect listed the comment callbacks in its deps, but
the parent passes onAddComment as an inline arrow (fresh identity every
render). Any background re-render (PR poll, file watcher, sync) re-ran
the effect, tore down the view zones, and remounted InlineCommentInput —
wiping the in-progress draft. Hold the callbacks in refs and drop them
from the effect deps so the input stays mounted while typing.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/ReviewDiffPane.tsx | 23 +++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/ReviewDiffPane.tsx b/src/renderer/components/ReviewDiffPane.tsx
index b5a72043..687ca297 100644
--- a/src/renderer/components/ReviewDiffPane.tsx
+++ b/src/renderer/components/ReviewDiffPane.tsx
@@ -612,6 +612,19 @@ export function ReviewDiffPane({
   const editorRef = useRef<monaco.editor.IStandaloneDiffEditor | null>(null)
   const decorationsRef = useRef<monaco.editor.IEditorDecorationsCollection | null>(null)
   const viewZonesRef = useRef<ViewZoneEntry[]>([])
+  // Latest comment callbacks held in refs so the view-zone sync effect doesn't
+  // list them as deps. The parent passes some as inline arrows (fresh identity
+  // every render), so without this a background re-render (PR poll, file
+  // watcher, sync) would re-run the effect, tear down the view zones, and
+  // remount InlineCommentInput — wiping the draft the user is typing.
+  const onAddCommentRef = useRef(onAddComment)
+  const onDeleteCommentRef = useRef(onDeleteComment)
+  const onAddReplyRef = useRef(onAddReply)
+  const onResolveThreadRef = useRef(onResolveThread)
+  onAddCommentRef.current = onAddComment
+  onDeleteCommentRef.current = onDeleteComment
+  onAddReplyRef.current = onAddReply
+  onResolveThreadRef.current = onResolveThread
   // Last diff line the mouse was over, for the `c` shortcut. null ⇒ not
   // over any line ⇒ file-level comment (line 0).
   const hoveredLineRef = useRef<number | null>(null)
@@ -808,10 +821,10 @@ export function ReviewDiffPane({
           root.render(
             <CommentThread
               thread={item.thread}
-              onDelete={(id) => onDeleteComment(id)}
+              onDelete={(id) => onDeleteCommentRef.current(id)}
               forceExpanded={expandAll}
-              onAddReply={onAddReply}
-              onResolveThread={onResolveThread}
+              onAddReply={(root, body) => onAddReplyRef.current(root, body)}
+              onResolveThread={(threadId) => onResolveThreadRef.current(threadId)}
               pendingResolve={pendingResolve}
             />
           )
@@ -821,7 +834,7 @@ export function ReviewDiffPane({
               lineNumber={item.lineNumber}
               startLine={commentStartLine}
               onSubmit={(body) => {
-                onAddComment(item.lineNumber, body, commentStartLine ?? undefined)
+                onAddCommentRef.current(item.lineNumber, body, commentStartLine ?? undefined)
                 setCommentLine(null)
                 setCommentStartLine(null)
               }}
@@ -853,7 +866,7 @@ export function ReviewDiffPane({
     })
 
     viewZonesRef.current = newZones
-  }, [comments, commentLine, commentStartLine, editorNonce, expandAll, clearViewZones, flushZoneLayout, onAddComment, onDeleteComment, onAddReply, onResolveThread, pendingResolve])
+  }, [comments, commentLine, commentStartLine, editorNonce, expandAll, clearViewZones, flushZoneLayout, pendingResolve])
 
   // Clean up view zones on unmount
   useEffect(() => {

From 199d2b8d4badc3c652cec0ef7ecc8285ff1b75e1 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Fri, 5 Jun 2026 13:07:15 -0400
Subject: [PATCH 58/63] feat(review): use u/i for unreviewed-file nav (was n/m)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/ReviewFileTree.tsx | 4 ++--
 src/renderer/components/ReviewPane.tsx     | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/ReviewFileTree.tsx b/src/renderer/components/ReviewFileTree.tsx
index 900709f6..b5edc602 100644
--- a/src/renderer/components/ReviewFileTree.tsx
+++ b/src/renderer/components/ReviewFileTree.tsx
@@ -276,10 +276,10 @@ export function ReviewFileTree({
       ) {
         return
       }
-      if (e.key === 'n' && !e.metaKey && !e.ctrlKey) {
+      if (e.key === 'u' && !e.metaKey && !e.ctrlKey) {
         e.preventDefault()
         navigateUnreviewed(1)
-      } else if (e.key === 'm' && !e.metaKey && !e.ctrlKey) {
+      } else if (e.key === 'i' && !e.metaKey && !e.ctrlKey) {
         e.preventDefault()
         navigateUnreviewed(-1)
       } else if (!e.shiftKey && (e.key === 'j' || (e.key === 'ArrowDown' && !e.metaKey))) {
diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index 80f645e6..80d850d9 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -1355,8 +1355,8 @@ function CommentDropdown({
 const REVIEW_SHORTCUTS: [string, string][] = [
   ['j / ↓', 'Next file'],
   ['k / ↑', 'Previous file'],
-  ['n', 'Next unreviewed file'],
-  ['m', 'Previous unreviewed file'],
+  ['u', 'Next unreviewed file'],
+  ['i', 'Previous unreviewed file'],
   ['] / [', 'Next / previous comment in file'],
   ['a', 'Comment list (↑/↓ then Enter)'],
   ['r', 'Mark file viewed / unviewed'],

From 4dfb760a7548e217ec4b87051311fb0e33a7b813 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Fri, 5 Jun 2026 13:09:11 -0400
Subject: [PATCH 59/63] feat(review): move overall diffstat back to the commit
 selection control
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The +adds/−dels total now sits beside the commit selector in the file
browser column instead of in the top controls bar.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/ReviewPane.tsx | 39 +++++++++++++++-----------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index 80d850d9..94ffc6a0 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -706,13 +706,6 @@ export function ReviewPane({
               {reviewedFiles.size}/{files.length} reviewed
             </span>
 
-            {(totalAdditions > 0 || totalDeletions > 0) && (
-              <span className="font-mono tabular-nums shrink-0">
-                {totalAdditions > 0 && <span className="text-success">+{totalAdditions}</span>}
-                {totalDeletions > 0 && <span className="text-danger ml-1">−{totalDeletions}</span>}
-              </span>
-            )}
-
             <div className="flex items-center gap-1.5">
               <Tooltip label="Send all comments to the active agent terminal">
                 <button
@@ -795,6 +788,8 @@ export function ReviewPane({
                   onCommitClick={handleCommitClick}
                   fromCommit={fromCommit}
                   toCommit={toCommit}
+                  totalAdditions={totalAdditions}
+                  totalDeletions={totalDeletions}
                 />
               </div>
               <div className="flex-1 min-h-0 overflow-hidden">
@@ -983,6 +978,8 @@ interface CommitSelectorProps {
   toCommit?: string
   onSelectAll: () => void
   onCommitClick: (idx: number, shift: boolean) => void
+  totalAdditions: number
+  totalDeletions: number
 }
 
 function CommitSelector({
@@ -992,7 +989,9 @@ function CommitSelector({
   fromCommit,
   toCommit,
   onSelectAll,
-  onCommitClick
+  onCommitClick,
+  totalAdditions,
+  totalDeletions
 }: CommitSelectorProps): JSX.Element {
   const [open, setOpen] = useState(false)
   const wrapperRef = useRef<HTMLDivElement | null>(null)
@@ -1027,14 +1026,22 @@ function CommitSelector({
 
   return (
     <div ref={wrapperRef} className="relative w-full">
-      <button
-        onClick={() => setOpen((v) => !v)}
-        className="flex w-full items-center gap-1.5 px-2 py-1 rounded border border-border text-xs text-fg hover:bg-panel-raised transition-colors cursor-pointer"
-      >
-        <GitCommitHorizontal className="icon-xs text-faint shrink-0" />
-        <span className="font-mono flex-1 min-w-0 truncate text-left">{buttonLabel}</span>
-        <ChevronDown className="icon-2xs text-faint shrink-0" />
-      </button>
+      <div className="flex items-center gap-2">
+        <button
+          onClick={() => setOpen((v) => !v)}
+          className="flex flex-1 min-w-0 items-center gap-1.5 px-2 py-1 rounded border border-border text-xs text-fg hover:bg-panel-raised transition-colors cursor-pointer"
+        >
+          <GitCommitHorizontal className="icon-xs text-faint shrink-0" />
+          <span className="font-mono flex-1 min-w-0 truncate text-left">{buttonLabel}</span>
+          <ChevronDown className="icon-2xs text-faint shrink-0" />
+        </button>
+        {(totalAdditions > 0 || totalDeletions > 0) && (
+          <span className="font-mono tabular-nums text-xs shrink-0">
+            {totalAdditions > 0 && <span className="text-success">+{totalAdditions}</span>}
+            {totalDeletions > 0 && <span className="text-danger ml-1">−{totalDeletions}</span>}
+          </span>
+        )}
+      </div>
       {open && (
         <div
           className="absolute z-50 top-full left-0 mt-1 w-80 max-h-[24rem] overflow-y-auto bg-panel-raised border border-border-strong rounded shadow-lg py-1"

From 66e6e19f851caed476ca8686e6f7c1f987af3152 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Fri, 5 Jun 2026 13:22:56 -0400
Subject: [PATCH 60/63] feat(review): PR review controls + richer PR
 description pane
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When a review has an associated PR, add a control group between the
reviewed count and Send-to-Agent:
- CheckCheck button approves the PR (enabled only once all files are
  reviewed, m == n); errors surface in its tooltip.
- "Submit…" dropdown: radio (Approve / Request changes / Comment) + a
  top-level comment box + Cancel/Submit. Backed by a new general
  submitPRReview(event, body) IPC path; approvePR now delegates to it.

PR description pane: show the author avatar + name, target branch, and
milestone (when present) under a now word-wrapped title; drop the close
button (toggle via the toolbar button / g). The toolbar PR-description
button now shows #<number>.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/main/github.ts                     |  35 ++--
 src/main/index.ts                      |  27 ++-
 src/renderer/build-backend.ts          |   5 +
 src/renderer/components/ReviewPane.tsx | 224 +++++++++++++++++++++++--
 src/renderer/types.ts                  |   5 +
 5 files changed, 268 insertions(+), 28 deletions(-)

diff --git a/src/main/github.ts b/src/main/github.ts
index c019ac23..61a139b1 100644
--- a/src/main/github.ts
+++ b/src/main/github.ts
@@ -724,18 +724,23 @@ ${PR_FRAGMENT}`
   return buildPRStatus(pr, branchName, null, firstReleaseTag, hasMilestones)
 }
 
-/** Submit an APPROVE review on a PR with no comment body. Mirrors
- *  GitHub's "Approve without comment" — an empty body is fine when the
- *  `event` is APPROVE. */
-export async function approvePR(
+/** Submit a top-level PR review with an event (APPROVE / REQUEST_CHANGES /
+ *  COMMENT) and an optional body. APPROVE allows an empty body; GitHub
+ *  requires a non-empty body for REQUEST_CHANGES and COMMENT — the UI gates
+ *  that before calling. */
+export async function submitPRReview(
   repoRoot: string,
-  prNumber: number
+  prNumber: number,
+  event: 'APPROVE' | 'REQUEST_CHANGES' | 'COMMENT',
+  body: string
 ): Promise<{ ok: true } | { ok: false; error: string }> {
   const ctx = await getRepoContext(repoRoot)
   if (!ctx) return { ok: false, error: 'No GitHub origin remote detected' }
   const token = getCachedToken()
   if (!token) return { ok: false, error: 'No GitHub token configured' }
   const { owner, repo } = ctx.upstream
+  const payload: { event: string; body?: string } = { event }
+  if (body.trim()) payload.body = body
   try {
     const res = await trackedFetch(
       `https://api.github.com/repos/${owner}/${repo}/pulls/${prNumber}/reviews`,
@@ -748,7 +753,7 @@ export async function approvePR(
           Authorization: `Bearer ${token}`,
           'Content-Type': 'application/json'
         },
-        body: JSON.stringify({ event: 'APPROVE' })
+        body: JSON.stringify(payload)
       }
     )
     if (res.status === 200 || res.status === 201) return { ok: true }
@@ -763,18 +768,26 @@ export async function approvePR(
       return { ok: false, error: 'Unauthorized — check that your token has repo scope' }
     }
     if (res.status === 422) {
-      // Most common 422 here is "Can not approve your own pull request",
-      // which the UI should filter out before calling. Surface GitHub's
-      // message so unexpected cases aren't silent.
-      return { ok: false, error: apiMessage || 'PR cannot be approved' }
+      // Common 422s: "Can not approve your own pull request", or a missing
+      // body for REQUEST_CHANGES/COMMENT. Surface GitHub's message verbatim.
+      return { ok: false, error: apiMessage || 'Review cannot be submitted' }
     }
     return { ok: false, error: apiMessage || `${res.status} ${res.statusText}` }
   } catch (err) {
-    log('github', `approvePR fetch failed for ${owner}/${repo}#${prNumber}`, formatErr(err))
+    log('github', `submitPRReview fetch failed for ${owner}/${repo}#${prNumber}`, formatErr(err))
     return { ok: false, error: err instanceof Error ? err.message : String(err) }
   }
 }
 
+/** Submit an APPROVE review with no comment body — GitHub's "Approve without
+ *  comment". Thin wrapper over {@link submitPRReview}. */
+export async function approvePR(
+  repoRoot: string,
+  prNumber: number
+): Promise<{ ok: true } | { ok: false; error: string }> {
+  return submitPRReview(repoRoot, prNumber, 'APPROVE', '')
+}
+
 /** Check whether the authenticated user has starred the repo. */
 export async function isRepoStarred(token: string, owner: string, repo: string): Promise<boolean | null> {
   try {
diff --git a/src/main/index.ts b/src/main/index.ts
index 0436e7ff..21c22c7a 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -38,7 +38,7 @@ import { getWeeklyStats } from './weekly-stats'
 import type { TerminalTab, PaneNode, PaneLeaf } from '../shared/state/terminals'
 import { getLeaves, mapLeaves } from '../shared/state/terminals'
 import { listWorktrees, listBranches, continueWorktree, isWorktreeDirty, defaultWorktreeDir, getChangedFiles, getFileDiff, getBranchCommits, getCommitDiff, getCommitMeta, getCommitChangedFiles, getCommitFileDiffSides, getCommitRangeChangedFiles, getCommitRangeFileDiffSides, getMainWorktreeStatus, prepareMainForMerge, mergeWorktreeLocally, getBranchSha, previewMergeConflicts, getBranchDiffStats, listAllFiles, listRecentCommitShas, readWorktreeFile, readWorktreeFileBinary, writeWorktreeFile, getFileDiffSides, getCurrentBranch, symlinkClaudeSettings, type MergeStrategy } from './worktree'
-import { listOpenPRs, testToken, starRepo, unstarRepo, isRepoStarred, mergePR, approvePR, getRepoInfo, getRepoContext, syncPRReview, type GitHubMergeMethod, type MergePRResult } from './github'
+import { listOpenPRs, testToken, starRepo, unstarRepo, isRepoStarred, mergePR, approvePR, submitPRReview, getRepoInfo, getRepoContext, syncPRReview, type GitHubMergeMethod, type MergePRResult } from './github'
 import type { ReviewSyncInput, ReviewSyncResult } from '../shared/github-types'
 import { AVAILABLE_EDITORS, DEFAULT_EDITOR_ID, openInEditor } from './editor'
 import { setSecret, getSecret, hasSecret, deleteSecret } from './secrets'
@@ -1590,6 +1590,31 @@ function registerIpcHandlers(): void {
     }
   )
 
+  transport.onRequest(
+    'pr:submitReview',
+    async (
+      _ctx,
+      worktreePath: string,
+      event: 'APPROVE' | 'REQUEST_CHANGES' | 'COMMENT',
+      body: string
+    ): Promise<{ ok: true } | { ok: false; error: string }> => {
+      const cached = store.getSnapshot().state.prs.byPath[worktreePath]
+      let prNumber = cached?.number
+      if (typeof prNumber !== 'number') {
+        await prPoller.refreshOne(worktreePath)
+        prNumber = store.getSnapshot().state.prs.byPath[worktreePath]?.number
+      }
+      if (typeof prNumber !== 'number') {
+        return { ok: false, error: 'No pull request found for this worktree' }
+      }
+      const result = await submitPRReview(worktreePath, prNumber, event, body)
+      if (result.ok) {
+        void prPoller.refreshOne(worktreePath)
+      }
+      return result
+    }
+  )
+
   transport.onRequest(
     'review:sync',
     async (_ctx, worktreePath: string, input: ReviewSyncInput): Promise<ReviewSyncResult> => {
diff --git a/src/renderer/build-backend.ts b/src/renderer/build-backend.ts
index 1f0da4dc..5573750b 100644
--- a/src/renderer/build-backend.ts
+++ b/src/renderer/build-backend.ts
@@ -226,6 +226,11 @@ export function buildBackend(
     reviewSync: (worktreePath: string, input: ReviewSyncInput) =>
       req('review:sync', worktreePath, input),
     approvePR: (worktreePath: string) => req('pr:approve', worktreePath),
+    submitPRReview: (
+      worktreePath: string,
+      event: 'APPROVE' | 'REQUEST_CHANGES' | 'COMMENT',
+      body: string
+    ) => req('pr:submitReview', worktreePath, event, body),
 
     getWeeklyStats: () => req('stats:getWeekly'),
 
diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index 94ffc6a0..e9307d98 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
-import { Send, Clipboard, MessageSquare, GitCommitHorizontal, ArrowUp, ChevronDown, ChevronUp, Pilcrow, X, Keyboard, CloudSync, Loader2, WrapText, GitPullRequest, Menu, Search, ListTree } from 'lucide-react'
+import { Send, Clipboard, MessageSquare, GitCommitHorizontal, ArrowUp, ChevronDown, ChevronUp, Pilcrow, X, Keyboard, CloudSync, Loader2, WrapText, GitPullRequest, Menu, Search, ListTree, CheckCheck, GitBranch, Milestone } from 'lucide-react'
 import type { ChangedFile, BranchCommit } from '../types'
 import type { PRReview } from '../../shared/state/prs'
 import type { ReviewComment } from './ReviewFileTree'
@@ -317,6 +317,26 @@ export function ReviewPane({
     if (text) navigator.clipboard.writeText(text)
   }, [formatComments])
 
+  // One-click "Approve" (CheckCheck button) — only offered once every file is
+  // reviewed. Errors surface in the button's tooltip.
+  const [approving, setApproving] = useState(false)
+  const [approveError, setApproveError] = useState<string | null>(null)
+  const handleApprove = useCallback(async () => {
+    if (approving) return
+    setApproving(true)
+    setApproveError(null)
+    const res = await backend.approvePR(worktreePath)
+    setApproving(false)
+    if (!res.ok) setApproveError(res.error)
+  }, [approving, backend, worktreePath])
+
+  // "Submit…" menu — APPROVE / REQUEST_CHANGES / COMMENT with a top-level body.
+  const handleSubmitReview = useCallback(
+    (event: 'APPROVE' | 'REQUEST_CHANGES' | 'COMMENT', body: string) =>
+      backend.submitPRReview(worktreePath, event, body),
+    [backend, worktreePath]
+  )
+
   // Push local comments + viewed state to the PR and pull the canonical
   // comment set back. Replaces the local comment list with the reconciled
   // result so synced comments carry their GitHub ids (and don't re-post).
@@ -655,11 +675,12 @@ export function ReviewPane({
               disabled={!pr}
               aria-pressed={showPrDescription}
               aria-label="Show PR description"
-              className={`flex items-center shrink-0 px-1.5 py-1 rounded border transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-default ${
+              className={`flex items-center gap-1 shrink-0 px-1.5 py-1 rounded border text-xs transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-default ${
                 showPrDescription ? 'border-accent text-accent' : 'border-border text-faint hover:text-fg'
               }`}
             >
               <GitPullRequest className="icon-xs" />
+              {pr && <span className="font-mono tabular-nums">#{pr.number}</span>}
             </button>
           </Tooltip>
 
@@ -706,6 +727,37 @@ export function ReviewPane({
               {reviewedFiles.size}/{files.length} reviewed
             </span>
 
+            {pr && (
+              <>
+                <div className="flex items-center gap-1.5">
+                  <Tooltip
+                    label={
+                      approveError
+                        ? approveError
+                        : allReviewed
+                          ? 'Approve PR'
+                          : 'Review all files to enable approve'
+                    }
+                  >
+                    <button
+                      onClick={handleApprove}
+                      disabled={!allReviewed || approving}
+                      aria-label="Approve PR"
+                      className="flex items-center shrink-0 px-1.5 py-1 rounded border border-border text-faint hover:text-success hover:border-success transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-default disabled:hover:text-faint disabled:hover:border-border"
+                    >
+                      {approving ? (
+                        <Loader2 className="icon-xs animate-spin" />
+                      ) : (
+                        <CheckCheck className="icon-xs" />
+                      )}
+                    </button>
+                  </Tooltip>
+                  <SubmitReviewMenu onSubmit={handleSubmitReview} />
+                </div>
+                <div className="w-px h-5 bg-border shrink-0" />
+              </>
+            )}
+
             <div className="flex items-center gap-1.5">
               <Tooltip label="Send all comments to the active agent terminal">
                 <button
@@ -818,7 +870,9 @@ export function ReviewPane({
               number={pr.number}
               body={pr.body}
               url={pr.url}
-              onClose={() => setShowPrDescription(false)}
+              author={pr.author}
+              baseBranch={pr.baseBranch}
+              milestone={pr.milestone}
               fill={fileTreeCollapsed}
             />
           )}
@@ -1359,6 +1413,118 @@ function CommentDropdown({
   )
 }
 
+type PrReviewEvent = 'APPROVE' | 'REQUEST_CHANGES' | 'COMMENT'
+
+const REVIEW_EVENT_OPTIONS: { value: PrReviewEvent; label: string }[] = [
+  { value: 'APPROVE', label: 'Approve' },
+  { value: 'REQUEST_CHANGES', label: 'Request changes' },
+  { value: 'COMMENT', label: 'Comment' }
+]
+
+/** "Submit…" dropdown: pick a review event, optionally write a top-level
+ *  comment, and submit it to the PR (separate from the per-line draft
+ *  comments synced via the Sync button). */
+function SubmitReviewMenu({
+  onSubmit
+}: {
+  onSubmit: (event: PrReviewEvent, body: string) => Promise<{ ok: true } | { ok: false; error: string }>
+}): JSX.Element {
+  const [open, setOpen] = useState(false)
+  const [event, setEvent] = useState<PrReviewEvent>('APPROVE')
+  const [body, setBody] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const wrapRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    if (!open) return
+    const close = (e: MouseEvent): void => {
+      if (wrapRef.current && e.target instanceof Node && wrapRef.current.contains(e.target)) return
+      setOpen(false)
+    }
+    window.addEventListener('mousedown', close)
+    return () => window.removeEventListener('mousedown', close)
+  }, [open])
+
+  // GitHub requires a body for REQUEST_CHANGES and COMMENT; APPROVE may be empty.
+  const needsBody = event !== 'APPROVE'
+  const canSubmit = !submitting && (!needsBody || body.trim().length > 0)
+
+  const submit = async (): Promise<void> => {
+    if (!canSubmit) return
+    setSubmitting(true)
+    setError(null)
+    const res = await onSubmit(event, body.trim())
+    setSubmitting(false)
+    if (res.ok) {
+      setOpen(false)
+      setBody('')
+    } else {
+      setError(res.error)
+    }
+  }
+
+  return (
+    <div ref={wrapRef} className="relative">
+      <button
+        onClick={() => setOpen((v) => !v)}
+        className="flex items-center gap-1 shrink-0 px-2 py-1 rounded border border-border text-xs text-faint hover:text-fg transition-colors cursor-pointer"
+      >
+        Submit…
+        <ChevronDown className="icon-2xs" />
+      </button>
+      {open && (
+        <div
+          className="absolute z-50 top-full right-0 mt-1 w-80 bg-panel-raised border border-border-strong rounded shadow-lg p-3 flex flex-col gap-2.5"
+          onMouseDown={(e) => e.stopPropagation()}
+        >
+          <div className="flex flex-col gap-1.5">
+            {REVIEW_EVENT_OPTIONS.map((opt) => (
+              <label
+                key={opt.value}
+                className="flex items-center gap-2 text-xs text-fg cursor-pointer"
+              >
+                <input
+                  type="radio"
+                  name="review-event"
+                  checked={event === opt.value}
+                  onChange={() => setEvent(opt.value)}
+                  className="accent-accent"
+                />
+                {opt.label}
+              </label>
+            ))}
+          </div>
+          <textarea
+            value={body}
+            onChange={(e) => setBody(e.target.value)}
+            placeholder={needsBody ? 'Leave a comment (required)…' : 'Leave a comment (optional)…'}
+            rows={4}
+            className="w-full resize-none bg-panel border border-border rounded px-2 py-1.5 text-xs text-fg placeholder:text-faint focus:outline-none focus:border-border-strong"
+          />
+          {error && <span className="text-danger text-xs">{error}</span>}
+          <div className="flex items-center justify-end gap-2">
+            <button
+              onClick={() => setOpen(false)}
+              className="px-2 py-1 rounded text-xs text-faint hover:text-fg cursor-pointer"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={() => void submit()}
+              disabled={!canSubmit}
+              className="flex items-center gap-1 px-2.5 py-1 rounded bg-accent text-app text-xs font-medium hover:bg-accent/80 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-default"
+            >
+              {submitting && <Loader2 className="icon-xs animate-spin" />}
+              Submit
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
 const REVIEW_SHORTCUTS: [string, string][] = [
   ['j / ↓', 'Next file'],
   ['k / ↑', 'Previous file'],
@@ -1429,14 +1595,18 @@ function PrDescriptionPane({
   number,
   body,
   url,
-  onClose,
+  author,
+  baseBranch,
+  milestone,
   fill
 }: {
   title: string
   number: number
   body: string
   url: string
-  onClose: () => void
+  author: { login: string; avatarUrl: string } | null
+  baseBranch: string
+  milestone?: { title: string; url: string; state: 'open' | 'closed' } | null
   /** Fill the column (file browser collapsed) vs. dock under the file tree. */
   fill?: boolean
 }): JSX.Element {
@@ -1446,23 +1616,45 @@ function PrDescriptionPane({
         fill ? 'flex-1' : 'shrink-0 max-h-[45%] border-t border-border'
       }`}
     >
-      <div className="flex items-center gap-1.5 px-2 py-1.5 border-b border-border shrink-0">
-        <GitPullRequest className="icon-xs text-faint shrink-0" />
+      <div className="flex flex-col gap-1.5 px-2 py-1.5 border-b border-border shrink-0">
         <a
           href={url}
           target="_blank"
           rel="noreferrer"
-          className="text-xs font-medium text-fg hover:underline truncate"
+          className="flex items-start gap-1.5 text-xs font-medium text-fg hover:underline"
         >
-          {title} <span className="text-faint">#{number}</span>
+          <GitPullRequest className="icon-xs text-faint shrink-0 mt-0.5" />
+          <span className="break-words min-w-0">
+            {title} <span className="text-faint">#{number}</span>
+          </span>
         </a>
-        <button
-          onClick={onClose}
-          aria-label="Hide PR description"
-          className="ml-auto shrink-0 text-faint hover:text-fg cursor-pointer"
-        >
-          <X className="icon-xs" />
-        </button>
+        <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-faint">
+          {author && (
+            <span className="flex items-center gap-1 min-w-0">
+              <img
+                src={author.avatarUrl}
+                alt=""
+                className="w-4 h-4 rounded-full shrink-0"
+              />
+              <span className="text-dim truncate">{author.login}</span>
+            </span>
+          )}
+          <span className="flex items-center gap-1 min-w-0">
+            <GitBranch className="icon-2xs shrink-0" />
+            <span className="font-mono truncate">{baseBranch}</span>
+          </span>
+          {milestone && (
+            <a
+              href={milestone.url}
+              target="_blank"
+              rel="noreferrer"
+              className="flex items-center gap-1 min-w-0 hover:text-fg"
+            >
+              <Milestone className="icon-2xs shrink-0" />
+              <span className="truncate">{milestone.title}</span>
+            </a>
+          )}
+        </div>
       </div>
       <div className="markdown overflow-y-auto px-3 py-2 text-xs">
         {body.trim() ? (
diff --git a/src/renderer/types.ts b/src/renderer/types.ts
index 943f96cc..ba6d4f9b 100644
--- a/src/renderer/types.ts
+++ b/src/renderer/types.ts
@@ -266,6 +266,11 @@ export interface ElectronAPI {
   approvePR(
     worktreePath: string
   ): Promise<{ ok: true } | { ok: false; error: string }>
+  submitPRReview(
+    worktreePath: string,
+    event: 'APPROVE' | 'REQUEST_CHANGES' | 'COMMENT',
+    body: string
+  ): Promise<{ ok: true } | { ok: false; error: string }>
 
   reviewSync(worktreePath: string, input: ReviewSyncInput): Promise<ReviewSyncResult>
   getWeeklyStats(): Promise<WeeklyStats>

From 31ffad76ce288998df641bbc56dbd33db679d63b Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Fri, 5 Jun 2026 13:32:51 -0400
Subject: [PATCH 61/63] feat(review): flush draft comments before approving /
 submitting a review
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Both the CheckCheck approve and the "Submit…" review now push staged
draft comments + viewed state to the PR first (whole-branch reviews),
so the review lands with its line comments rather than after them. If
the flush fails, the submit/approve is aborted and the error surfaces
(button tooltip / menu). runSync now reports success for this gating.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/ReviewPane.tsx | 64 ++++++++++++++++++--------
 1 file changed, 44 insertions(+), 20 deletions(-)

diff --git a/src/renderer/components/ReviewPane.tsx b/src/renderer/components/ReviewPane.tsx
index e9307d98..42d345d8 100644
--- a/src/renderer/components/ReviewPane.tsx
+++ b/src/renderer/components/ReviewPane.tsx
@@ -317,32 +317,15 @@ export function ReviewPane({
     if (text) navigator.clipboard.writeText(text)
   }, [formatComments])
 
-  // One-click "Approve" (CheckCheck button) — only offered once every file is
-  // reviewed. Errors surface in the button's tooltip.
   const [approving, setApproving] = useState(false)
   const [approveError, setApproveError] = useState<string | null>(null)
-  const handleApprove = useCallback(async () => {
-    if (approving) return
-    setApproving(true)
-    setApproveError(null)
-    const res = await backend.approvePR(worktreePath)
-    setApproving(false)
-    if (!res.ok) setApproveError(res.error)
-  }, [approving, backend, worktreePath])
-
-  // "Submit…" menu — APPROVE / REQUEST_CHANGES / COMMENT with a top-level body.
-  const handleSubmitReview = useCallback(
-    (event: 'APPROVE' | 'REQUEST_CHANGES' | 'COMMENT', body: string) =>
-      backend.submitPRReview(worktreePath, event, body),
-    [backend, worktreePath]
-  )
 
   // Push local comments + viewed state to the PR and pull the canonical
   // comment set back. Replaces the local comment list with the reconciled
   // result so synced comments carry their GitHub ids (and don't re-post).
   const runSync = useCallback(
-    async (pullOnly: boolean) => {
-      if (syncing || !prNumber || !isWholeBranch) return
+    async (pullOnly: boolean): Promise<boolean> => {
+      if (syncing || !prNumber || !isWholeBranch) return false
       setSyncState('syncing')
       setSyncDetail(pullOnly ? 'Loading PR comments…' : 'Syncing…')
       try {
@@ -364,7 +347,7 @@ export function ReviewPane({
         if (!result.ok) {
           setSyncState('error')
           setSyncDetail(result.error ?? 'Sync failed')
-          return
+          return false
         }
         setComments(
           result.comments.map((c) => ({
@@ -399,9 +382,11 @@ export function ReviewPane({
                 result.failed > 0 ? ` · ${result.failed} failed` : ''
               }`
         )
+        return result.failed === 0
       } catch (err) {
         setSyncState('error')
         setSyncDetail(err instanceof Error ? err.message : 'Sync failed')
+        return false
       }
     },
     [syncing, prNumber, isWholeBranch, backend, worktreePath, comments, reviewedFiles, files, pendingResolve]
@@ -409,6 +394,45 @@ export function ReviewPane({
 
   const handleSync = useCallback(() => void runSync(false), [runSync])
 
+  // Flush staged draft comments + viewed state to the PR before submitting a
+  // review, so the review lands with the line comments rather than after them.
+  // Only whole-branch reviews have a sync path; other selections just submit.
+  const flushDrafts = useCallback(async (): Promise<boolean> => {
+    if (!prNumber || !isWholeBranch) return true
+    return runSync(false)
+  }, [prNumber, isWholeBranch, runSync])
+
+  const FLUSH_FAILED = 'Could not push draft comments — resolve the Sync error and retry'
+
+  // One-click "Approve" (CheckCheck button) — only offered once every file is
+  // reviewed. Pushes drafts first; errors surface in the button's tooltip.
+  const handleApprove = useCallback(async () => {
+    if (approving) return
+    setApproving(true)
+    setApproveError(null)
+    if (!(await flushDrafts())) {
+      setApproving(false)
+      setApproveError(FLUSH_FAILED)
+      return
+    }
+    const res = await backend.approvePR(worktreePath)
+    setApproving(false)
+    if (!res.ok) setApproveError(res.error)
+  }, [approving, flushDrafts, backend, worktreePath])
+
+  // "Submit…" menu — APPROVE / REQUEST_CHANGES / COMMENT with a top-level body.
+  // Pushes drafts first, then submits the review event.
+  const handleSubmitReview = useCallback(
+    async (
+      event: 'APPROVE' | 'REQUEST_CHANGES' | 'COMMENT',
+      body: string
+    ): Promise<{ ok: true } | { ok: false; error: string }> => {
+      if (!(await flushDrafts())) return { ok: false, error: FLUSH_FAILED }
+      return backend.submitPRReview(worktreePath, event, body)
+    },
+    [flushDrafts, backend, worktreePath]
+  )
+
   // Auto-sync (pull-only) once when the review opens with a PR, so existing
   // PR comments show up without a manual Sync. Pull-only can't clobber
   // GitHub state from the empty local review.

From 536230c3014f0d72f5eba07ae7c520cbfacb8f54 Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Fri, 5 Jun 2026 15:09:54 -0400
Subject: [PATCH 62/63] feat(review): grow inline comment width with the
 visible diff
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Comment view zones sized their sticky wrapper once at creation, so they
stayed narrow after the diff got wider (file browser collapsed, window
resized). Re-apply the editor's contentWidth to every wrapper on
onDidLayoutChange, guarded on a last-applied ref so unchanged layouts are
a no-op — that guard is what keeps the resize off the per-zone height
ResizeObserver feedback loop the old code sidestepped by never resizing.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/ReviewDiffPane.tsx | 39 ++++++++++++++++++----
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/ReviewDiffPane.tsx b/src/renderer/components/ReviewDiffPane.tsx
index 687ca297..3c676dfb 100644
--- a/src/renderer/components/ReviewDiffPane.tsx
+++ b/src/renderer/components/ReviewDiffPane.tsx
@@ -637,6 +637,30 @@ export function ReviewDiffPane({
   // their observers — an N×N cascade that freezes the renderer.
   const pendingZoneHeightsRef = useRef(new Map<string, { zone: monaco.editor.IViewZone; h: number }>())
   const layoutRafRef = useRef(0)
+  // Last comment width applied to every sticky wrapper. Comments size to the
+  // editor's visible content width, so widening the diff (collapsing the file
+  // browser, resizing the window) widens the comments too. Guarded on this ref
+  // so layout events that don't change the content width are no-ops — see
+  // applyZoneWidths.
+  const lastZoneWidthRef = useRef(0)
+  // Compute the current comment width from the editor's content area, then push
+  // it to every live comment wrapper — but ONLY when it actually changed. The
+  // no-op guard is what makes this safe to call from onDidLayoutChange: writing
+  // the same px string doesn't resize the wrapper, so the per-zone height
+  // ResizeObserver never fires, so there's no observer → changeViewZones →
+  // layout → applyZoneWidths feedback loop. contentWidth reserves the vertical
+  // scrollbar regardless of visibility, so it's stable across zone-height
+  // changes and only moves on a real editor resize.
+  const applyZoneWidths = useCallback(() => {
+    const editor = editorRef.current
+    if (!editor) return
+    const w = editor.getModifiedEditor().getLayoutInfo().contentWidth
+    if (w <= 0 || w === lastZoneWidthRef.current) return
+    lastZoneWidthRef.current = w
+    for (const z of viewZonesRef.current) {
+      z.stickyWrapper.style.width = `${w}px`
+    }
+  }, [])
   const flushZoneLayout = useCallback(() => {
     if (layoutRafRef.current) return
     layoutRafRef.current = requestAnimationFrame(() => {
@@ -792,6 +816,7 @@ export function ReviewDiffPane({
     if (items.length === 0) return
 
     const contentWidth = modifiedEd.getLayoutInfo().contentWidth
+    lastZoneWidthRef.current = contentWidth
 
     modifiedEd.changeViewZones((accessor) => {
       for (const item of items) {
@@ -944,12 +969,12 @@ export function ReviewDiffPane({
       editorRef.current = editor
       setEditorNonce((n) => n + 1)
       const modEd = editor.getModifiedEditor()
-      // NOTE: do NOT rewrite sticky-wrapper widths on layout change. Each
-      // comment zone has a ResizeObserver watching its wrapper; mutating the
-      // wrapper here would retrigger that observer → changeViewZones → layout
-      // change → loop (a renderer-freezing feedback storm). The comment is
-      // capped at 760px and left-pinned, so a fixed width set at creation is
-      // fine.
+      // Keep comment widths in sync with the editor's content area so they grow
+      // when more of the diff becomes visible (file browser collapsed, window
+      // resized). applyZoneWidths is a no-op unless contentWidth actually
+      // changed, which is what keeps this off the observer feedback loop the old
+      // code avoided by never resizing — see applyZoneWidths.
+      modEd.onDidLayoutChange(() => applyZoneWidths())
       // Track the hovered line so `c` can target it.
       modEd.onMouseMove((e) => {
         hoveredLineRef.current = e.target.position?.lineNumber ?? null
@@ -966,7 +991,7 @@ export function ReviewDiffPane({
             : null
       })
     },
-    []
+    [applyZoneWidths]
   )
 
   // `c` opens a comment input on the hovered diff line, or a file-level

From ed77d48add22ed1c2666db4f60db02b54e06cd0a Mon Sep 17 00:00:00 2001
From: Sterling Greene <sterling@gradle.com>
Date: Fri, 5 Jun 2026 15:13:27 -0400
Subject: [PATCH 63/63] feat(review): add crosshair to reveal the open file in
 the file tree

A Crosshair button sits next to the filter input. Clicking it scrolls the
currently open diff file's row into view and flashes it briefly. It first
clears any active filter and expands collapsed ancestor folders so the row
is rendered, then a nonce-keyed effect (which re-runs as those changes land)
does the scroll-into-view + flash. Disabled when no file is open.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/components/ReviewFileTree.tsx | 65 ++++++++++++++++++++--
 src/renderer/styles.css                    | 13 +++++
 2 files changed, 74 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/ReviewFileTree.tsx b/src/renderer/components/ReviewFileTree.tsx
index b5edc602..012a1788 100644
--- a/src/renderer/components/ReviewFileTree.tsx
+++ b/src/renderer/components/ReviewFileTree.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef, useCallback, useMemo, useState } from 'react'
-import { ChevronRight, Folder, FolderOpen, FileText } from 'lucide-react'
+import type { RefObject } from 'react'
+import { ChevronRight, Folder, FolderOpen, FileText, Crosshair } from 'lucide-react'
 import type { ChangedFile } from '../types'
 
 export interface ReviewComment {
@@ -190,6 +191,10 @@ export function ReviewFileTree({
   active
 }: ReviewFileTreeProps): JSX.Element {
   const containerRef = useRef<HTMLDivElement>(null)
+  const selectedRowRef = useRef<HTMLDivElement>(null)
+  const pendingRevealRef = useRef(false)
+  const [revealNonce, setRevealNonce] = useState(0)
+  const [flashing, setFlashing] = useState(false)
   const [filter, setFilter] = useState('')
   const filtered = useMemo(() => {
     const q = filter.trim().toLowerCase()
@@ -267,6 +272,34 @@ export function ReviewFileTree({
     [selectedFile, fileCommentLines, onRevealLine]
   )
 
+  // Crosshair: scroll the currently open file's row into view and flash it.
+  // Clears the filter and expands any collapsed ancestor dirs first so the row
+  // is actually rendered, then the effect below does the scroll once it is.
+  const revealSelected = useCallback(() => {
+    if (!selectedFile) return
+    pendingRevealRef.current = true
+    if (filter.trim()) setFilter('')
+    const parts = selectedFile.split('/')
+    for (let i = 1; i < parts.length; i++) {
+      const dir = parts.slice(0, i).join('/')
+      if (collapsedDirs.has(dir)) onToggleDir(dir)
+    }
+    setRevealNonce((n) => n + 1)
+  }, [selectedFile, filter, collapsedDirs, onToggleDir])
+
+  // Re-runs when the filter/collapse changes make the row appear, so a file
+  // hidden under a collapsed folder still scrolls into view once expanded.
+  useEffect(() => {
+    if (!pendingRevealRef.current) return
+    const el = selectedRowRef.current
+    if (!el) return
+    pendingRevealRef.current = false
+    el.scrollIntoView({ block: 'center' })
+    setFlashing(true)
+    const t = setTimeout(() => setFlashing(false), 1400)
+    return () => clearTimeout(t)
+  }, [revealNonce, selectedFile, collapsedDirs, filter])
+
   useEffect(() => {
     const handler = (e: KeyboardEvent): void => {
       if (!active) return
@@ -329,14 +362,23 @@ export function ReviewFileTree({
 
   return (
     <div ref={containerRef} className="flex flex-col h-full text-xs select-none">
-      <div className="shrink-0 p-2 border-b border-border">
+      <div className="shrink-0 flex items-center gap-1 p-2 border-b border-border">
         <input
           type="text"
           value={filter}
           onChange={(e) => setFilter(e.target.value)}
           placeholder="Filter files..."
-          className="w-full bg-panel-raised border border-border rounded px-2 py-1 text-xs text-fg placeholder:text-faint focus:outline-none focus:border-border-strong"
+          className="flex-1 min-w-0 bg-panel-raised border border-border rounded px-2 py-1 text-xs text-fg placeholder:text-faint focus:outline-none focus:border-border-strong"
         />
+        <button
+          type="button"
+          onClick={revealSelected}
+          disabled={!selectedFile}
+          title="Reveal open file"
+          className="shrink-0 flex items-center justify-center p-1 rounded text-faint hover:text-fg hover:bg-panel-raised disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-faint"
+        >
+          <Crosshair className="icon-sm" />
+        </button>
       </div>
       <div className="flex-1 overflow-auto min-h-0">
         {filtering && navigableFiles.length === 0 && (
@@ -347,6 +389,8 @@ export function ReviewFileTree({
           depth={0}
           collapsedDirs={effectiveCollapsed}
           selectedFile={selectedFile}
+          selectedRowRef={selectedRowRef}
+          flashing={flashing}
           reviewedFiles={reviewedFiles}
           commentCountByFile={commentCountByFile}
           onSelectFile={onSelectFile}
@@ -363,6 +407,8 @@ interface TreeBranchProps {
   depth: number
   collapsedDirs: Set<string>
   selectedFile: string | null
+  selectedRowRef: RefObject<HTMLDivElement | null>
+  flashing: boolean
   reviewedFiles: Set<string>
   commentCountByFile: Map<string, number>
   onSelectFile: (path: string) => void
@@ -375,6 +421,8 @@ function TreeBranch({
   depth,
   collapsedDirs,
   selectedFile,
+  selectedRowRef,
+  flashing,
   reviewedFiles,
   commentCountByFile,
   onSelectFile,
@@ -392,6 +440,8 @@ function TreeBranch({
               name={child.name}
               depth={depth}
               selected={child.path === selectedFile}
+              rowRef={child.path === selectedFile ? selectedRowRef : undefined}
+              flash={child.path === selectedFile && flashing}
               reviewed={reviewedFiles.has(child.path)}
               commentCount={commentCountByFile.get(child.path) ?? 0}
               onSelect={() => onSelectFile(child.path)}
@@ -415,6 +465,8 @@ function TreeBranch({
                 depth={depth + 1}
                 collapsedDirs={collapsedDirs}
                 selectedFile={selectedFile}
+                selectedRowRef={selectedRowRef}
+                flashing={flashing}
                 reviewedFiles={reviewedFiles}
                 commentCountByFile={commentCountByFile}
                 onSelectFile={onSelectFile}
@@ -464,6 +516,8 @@ function FileRow({
   name,
   depth,
   selected,
+  rowRef,
+  flash,
   reviewed,
   commentCount,
   onSelect
@@ -472,6 +526,8 @@ function FileRow({
   name: string
   depth: number
   selected: boolean
+  rowRef?: RefObject<HTMLDivElement | null>
+  flash?: boolean
   reviewed: boolean
   commentCount: number
   onSelect: () => void
@@ -479,12 +535,13 @@ function FileRow({
 }): JSX.Element {
   return (
     <div
+      ref={rowRef}
       onClick={onSelect}
       className={`flex w-max min-w-full items-center gap-1.5 py-0.5 pr-2 cursor-pointer transition-colors ${
         selected
           ? 'bg-accent/15 border-l-2 border-accent'
           : 'border-l-2 border-transparent hover:bg-panel-raised'
-      } ${reviewed ? 'opacity-50' : ''}`}
+      } ${reviewed ? 'opacity-50' : ''} ${flash ? 'review-tree-flash' : ''}`}
       style={{ paddingLeft: 8 + depth * 12 + 10 }}
     >
       <FileText className="icon-xs shrink-0 text-faint" />
diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index be85d3d6..4758e170 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -763,6 +763,19 @@ button, [role="button"], a[href], [onclick] {
   }
 }
 
+/* Brief flash when the crosshair reveals the open file in the file tree. */
+.review-tree-flash {
+  animation: review-tree-flash 1.4s ease-out;
+}
+@keyframes review-tree-flash {
+  0% {
+    background-color: color-mix(in srgb, var(--color-warning, #d29922) 45%, transparent);
+  }
+  100% {
+    background-color: transparent;
+  }
+}
+
 /* iOS/Safari auto-promotes ambiguous codepoints like U+23FA (⏺, which
  * Claude Code uses for tool-call markers) to color emoji via the system
  * Apple Color Emoji fallback, which is why those markers look like emoji