From 629ddb01224dc0c49aaecfc52cd97a77905ee7e3 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Tue, 17 Feb 2026 00:30:41 +0000
Subject: [PATCH 01/48] =?UTF-8?q?=F0=9F=A4=96=20feat:=20add=20immersive=20?=
 =?UTF-8?q?review=20foundation=20utilities?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Settings/sections/KeybindsSection.tsx     | 11 +++
 src/browser/components/WorkspaceShell.tsx     | 18 +++-
 src/browser/components/ui/Keycap.tsx          | 99 +++++++++++++++++++
 src/browser/utils/review/navigation.ts        | 51 ++++++++++
 src/browser/utils/review/quickReviewNotes.ts  | 78 +++++++++++++++
 src/browser/utils/ui/keybinds.ts              | 33 +++++++
 6 files changed, 289 insertions(+), 1 deletion(-)
 create mode 100644 src/browser/components/ui/Keycap.tsx
 create mode 100644 src/browser/utils/review/quickReviewNotes.ts

diff --git a/src/browser/components/Settings/sections/KeybindsSection.tsx b/src/browser/components/Settings/sections/KeybindsSection.tsx
index c990f3f2a7..f87c063248 100644
--- a/src/browser/components/Settings/sections/KeybindsSection.tsx
+++ b/src/browser/components/Settings/sections/KeybindsSection.tsx
@@ -59,6 +59,17 @@ const KEYBIND_LABELS: Record<keyof typeof KEYBINDS, string> = {
   // Modal-only keybinds; intentionally omitted from KEYBIND_GROUPS.
   CONFIRM_DIALOG_YES: "Confirm dialog action",
   CONFIRM_DIALOG_NO: "Cancel dialog action",
+  TOGGLE_REVIEW_IMMERSIVE: "Toggle immersive review",
+  REVIEW_NEXT_FILE: "Next file (immersive)",
+  REVIEW_PREV_FILE: "Previous file (immersive)",
+  REVIEW_NEXT_HUNK: "Next hunk (immersive)",
+  REVIEW_PREV_HUNK: "Previous hunk (immersive)",
+  REVIEW_CURSOR_DOWN: "Line cursor down (immersive)",
+  REVIEW_CURSOR_UP: "Line cursor up (immersive)",
+  REVIEW_CURSOR_JUMP_DOWN: "Jump 10 lines down (immersive)",
+  REVIEW_CURSOR_JUMP_UP: "Jump 10 lines up (immersive)",
+  REVIEW_QUICK_LIKE: "Quick like (immersive)",
+  REVIEW_QUICK_DISLIKE: "Quick dislike (immersive)",
   // Easter egg keybind; intentionally omitted from KEYBIND_GROUPS.
   TOGGLE_POWER_MODE: "",
 };
diff --git a/src/browser/components/WorkspaceShell.tsx b/src/browser/components/WorkspaceShell.tsx
index 18ef023be2..34e13b44b2 100644
--- a/src/browser/components/WorkspaceShell.tsx
+++ b/src/browser/components/WorkspaceShell.tsx
@@ -5,6 +5,7 @@ import { RIGHT_SIDEBAR_WIDTH_KEY } from "@/common/constants/storage";
 import { useResizableSidebar } from "@/browser/hooks/useResizableSidebar";
 import { useResizeObserver } from "@/browser/hooks/useResizeObserver";
 import { useOpenTerminal } from "@/browser/hooks/useOpenTerminal";
+import { usePersistedState } from "@/browser/hooks/usePersistedState";
 import { RightSidebar } from "./RightSidebar";
 import { PopoverError } from "./PopoverError";
 import type { RuntimeConfig } from "@/common/types/runtime";
@@ -127,6 +128,11 @@ export const WorkspaceShell: React.FC<WorkspaceShellProps> = (props) => {
   );
 
   const workspaceState = useWorkspaceState(props.workspaceId);
+  const [isReviewImmersive] = usePersistedState(
+    `review-immersive:${props.workspaceId}`,
+    false,
+    { listener: true }
+  );
   const backgroundBashError = useBackgroundBashError();
 
   if (!workspaceState || workspaceState.loading) {
@@ -147,7 +153,7 @@ export const WorkspaceShell: React.FC<WorkspaceShellProps> = (props) => {
     <div
       ref={shellRef}
       className={cn(
-        "flex flex-1 flex-row bg-dark text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+        "relative flex flex-1 flex-row bg-dark text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
         props.className
       )}
       style={{ containerType: "inline-size" }}
@@ -165,6 +171,7 @@ export const WorkspaceShell: React.FC<WorkspaceShellProps> = (props) => {
         onToggleLeftSidebarCollapsed={props.onToggleLeftSidebarCollapsed}
         runtimeConfig={props.runtimeConfig}
         onOpenTerminal={handleOpenTerminal}
+        aria-hidden={isReviewImmersive || undefined}
       />
 
       <RightSidebar
@@ -178,6 +185,15 @@ export const WorkspaceShell: React.FC<WorkspaceShellProps> = (props) => {
         onReviewNote={handleReviewNote}
         isCreating={props.isInitializing === true}
         addTerminalRef={addTerminalRef}
+        aria-hidden={isReviewImmersive || undefined}
+      />
+
+      {/* Portal target for immersive review mode overlay */}
+      <div
+        id="review-immersive-root"
+        hidden={!isReviewImmersive}
+        className="absolute inset-0 z-50 bg-dark"
+        data-testid="review-immersive-root"
       />
 
       <PopoverError
diff --git a/src/browser/components/ui/Keycap.tsx b/src/browser/components/ui/Keycap.tsx
new file mode 100644
index 0000000000..9e7cafcca9
--- /dev/null
+++ b/src/browser/components/ui/Keycap.tsx
@@ -0,0 +1,99 @@
+/**
+ * Keycap - OS-aware keyboard key display component.
+ * Renders keyboard shortcuts as styled <kbd> elements.
+ * Inspired by pulldash keycap patterns.
+ */
+
+import React from "react";
+import { cn } from "@/common/lib/utils";
+import { isMac } from "@/browser/utils/ui/keybinds";
+
+interface KeycapProps {
+  /** The key label to display. Special values: "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Escape", "Enter", "Shift", "Ctrl", "Cmd", "Alt" */
+  children: string;
+  className?: string;
+}
+
+const KEY_DISPLAY_MAP: Record<string, string> = {
+  ArrowUp: "↑",
+  ArrowDown: "↓",
+  ArrowLeft: "←",
+  ArrowRight: "→",
+  Escape: "Esc",
+  Enter: "↵",
+  Shift: "⇧",
+  " ": "Space",
+};
+
+const MAC_KEY_MAP: Record<string, string> = {
+  Ctrl: "⌘",
+  Alt: "⌥",
+  Cmd: "⌘",
+};
+
+const WIN_KEY_MAP: Record<string, string> = {
+  Cmd: "Ctrl",
+};
+
+/**
+ * Single key cap (styled <kbd>)
+ */
+export const Keycap: React.FC<KeycapProps> = (props) => {
+  const onMac = isMac();
+  let label = props.children;
+
+  // Apply platform-specific mappings first
+  if (onMac && label in MAC_KEY_MAP) {
+    label = MAC_KEY_MAP[label];
+  } else if (!onMac && label in WIN_KEY_MAP) {
+    label = WIN_KEY_MAP[label];
+  }
+
+  // Apply universal display mappings
+  if (label in KEY_DISPLAY_MAP) {
+    label = KEY_DISPLAY_MAP[label];
+  }
+
+  // Single letters: uppercase
+  if (label.length === 1 && /[a-z]/.test(label)) {
+    label = label.toUpperCase();
+  }
+
+  return (
+    <kbd
+      className={cn(
+        "inline-flex h-5 min-w-5 items-center justify-center rounded border px-1",
+        "border-border-medium bg-dark text-muted text-[10px] font-medium leading-none",
+        props.className
+      )}
+    >
+      {label}
+    </kbd>
+  );
+};
+
+interface KeycapGroupProps {
+  /** Array of key labels, rendered as a sequence of keycaps */
+  keys: string[];
+  /** Label to show after the keycaps */
+  label?: string;
+  className?: string;
+}
+
+/**
+ * Group of keycaps with an optional label.
+ * Renders keys as a tight group with a description.
+ * Example: <KeycapGroup keys={["j", "k"]} label="prev / next hunk" />
+ */
+export const KeycapGroup: React.FC<KeycapGroupProps> = (props) => {
+  return (
+    <span className={cn("inline-flex items-center gap-1 text-[10px]", props.className)}>
+      <span className="inline-flex items-center gap-0.5">
+        {props.keys.map((key, i) => (
+          <Keycap key={i}>{key}</Keycap>
+        ))}
+      </span>
+      {props.label && <span className="text-dim">{props.label}</span>}
+    </span>
+  );
+};
diff --git a/src/browser/utils/review/navigation.ts b/src/browser/utils/review/navigation.ts
index 96f733b09f..2019d8bdbb 100644
--- a/src/browser/utils/review/navigation.ts
+++ b/src/browser/utils/review/navigation.ts
@@ -3,6 +3,7 @@
  * These pure functions compute the next/previous hunk to navigate to.
  */
 
+import type { FileTreeNode } from "@/common/utils/git/numstatParser";
 import type { DiffHunk } from "@/common/types/review";
 
 /**
@@ -65,3 +66,53 @@ export function findNextHunkIdAfterFileRemoval(
 
   return null;
 }
+
+/**
+ * Flatten a FileTreeNode into a sorted list of leaf file paths.
+ * Traverses the tree depth-first, collecting only leaf nodes (files, not dirs).
+ */
+export function flattenFileTreeLeaves(root: FileTreeNode | null): string[] {
+  if (!root) return [];
+  const result: string[] = [];
+
+  function walk(node: FileTreeNode, prefix: string) {
+    const path = prefix ? `${prefix}/${node.name}` : node.name;
+    if (node.children && node.children.length > 0) {
+      for (const child of node.children) {
+        walk(child, path);
+      }
+    } else {
+      // Leaf node = file
+      result.push(path);
+    }
+  }
+
+  // Root is virtual (""), walk children directly
+  for (const child of root.children ?? []) {
+    walk(child, "");
+  }
+  return result;
+}
+
+/**
+ * Get the next or previous file path in a list, wrapping around.
+ */
+export function getAdjacentFilePath(
+  files: string[],
+  current: string,
+  direction: 1 | -1
+): string | null {
+  if (files.length === 0) return null;
+  const idx = files.indexOf(current);
+  if (idx === -1) return files[0];
+  const next = (idx + direction + files.length) % files.length;
+  return files[next];
+}
+
+/**
+ * Filter hunks to only those matching a specific file path.
+ */
+export function getFileHunks(hunks: DiffHunk[], filePath: string): DiffHunk[] {
+  return hunks.filter((h) => h.filePath === filePath);
+}
+
diff --git a/src/browser/utils/review/quickReviewNotes.ts b/src/browser/utils/review/quickReviewNotes.ts
new file mode 100644
index 0000000000..d55af10883
--- /dev/null
+++ b/src/browser/utils/review/quickReviewNotes.ts
@@ -0,0 +1,78 @@
+/**
+ * Utilities for building quick review notes from hunks in immersive mode.
+ * These create whole-hunk ReviewNoteData for "I like this" / "I don't like this" actions.
+ */
+
+import type { DiffHunk, ReviewNoteData } from "@/common/types/review";
+
+/**
+ * Build a ReviewNoteData for the entire hunk with a prefilled user note.
+ * Used by the quick feedback actions in immersive review mode.
+ */
+export function buildQuickHunkReviewNote(params: {
+  hunk: DiffHunk;
+  userNote: string;
+}): ReviewNoteData {
+  const { hunk, userNote } = params;
+
+  const lines = hunk.content.split("\n").filter((line) => line.length > 0);
+
+  // Compute line number ranges
+  const oldEnd = hunk.oldStart + hunk.oldLines - 1;
+  const newEnd = hunk.newStart + hunk.newLines - 1;
+
+  const lineRange = `-${hunk.oldStart}-${oldEnd} +${hunk.newStart}-${newEnd}`;
+
+  // Build selectedCode with line numbers (matching DiffRenderer format)
+  const oldWidth = Math.max(1, String(oldEnd).length);
+  const newWidth = Math.max(1, String(newEnd).length);
+
+  let oldNum = hunk.oldStart;
+  let newNum = hunk.newStart;
+  const codeLines = lines.map((line) => {
+    const indicator = line[0] ?? " ";
+    const content = line.slice(1);
+    let oldStr = "";
+    let newStr = "";
+
+    if (indicator === "+") {
+      newStr = String(newNum);
+      newNum++;
+    } else if (indicator === "-") {
+      oldStr = String(oldNum);
+      oldNum++;
+    } else {
+      oldStr = String(oldNum);
+      newStr = String(newNum);
+      oldNum++;
+      newNum++;
+    }
+
+    return `${oldStr.padStart(oldWidth)} ${newStr.padStart(newWidth)} ${indicator} ${content}`;
+  });
+
+  // Elide middle lines if more than 20
+  const CONTEXT_LINES = 10;
+  const MAX_FULL_LINES = CONTEXT_LINES * 2;
+  let selectedCode: string;
+  if (codeLines.length <= MAX_FULL_LINES) {
+    selectedCode = codeLines.join("\n");
+  } else {
+    const omittedCount = codeLines.length - MAX_FULL_LINES;
+    selectedCode = [
+      ...codeLines.slice(0, CONTEXT_LINES),
+      `    (${omittedCount} lines omitted)`,
+      ...codeLines.slice(-CONTEXT_LINES),
+    ].join("\n");
+  }
+
+  return {
+    filePath: hunk.filePath,
+    lineRange,
+    selectedCode,
+    selectedDiff: hunk.content,
+    oldStart: hunk.oldStart,
+    newStart: hunk.newStart,
+    userNote,
+  };
+}
diff --git a/src/browser/utils/ui/keybinds.ts b/src/browser/utils/ui/keybinds.ts
index 83c3bd94b1..212f0ed408 100644
--- a/src/browser/utils/ui/keybinds.ts
+++ b/src/browser/utils/ui/keybinds.ts
@@ -423,6 +423,39 @@ export const KEYBINDS = {
   /** Cancel/dismiss confirmation dialogs */
   CONFIRM_DIALOG_NO: { key: "n", allowShift: true },
 
+  /** Toggle immersive review mode */
+  TOGGLE_REVIEW_IMMERSIVE: { key: "i", shift: true },
+
+  /** Navigate to next file in immersive review */
+  REVIEW_NEXT_FILE: { key: "J", shift: true },
+
+  /** Navigate to previous file in immersive review */
+  REVIEW_PREV_FILE: { key: "K", shift: true },
+
+  /** Navigate to next hunk in immersive review */
+  REVIEW_NEXT_HUNK: { key: "j" },
+
+  /** Navigate to previous hunk in immersive review */
+  REVIEW_PREV_HUNK: { key: "k" },
+
+  /** Move line cursor down in immersive review */
+  REVIEW_CURSOR_DOWN: { key: "ArrowDown" },
+
+  /** Move line cursor up in immersive review */
+  REVIEW_CURSOR_UP: { key: "ArrowUp" },
+
+  /** Jump line cursor 10 lines down in immersive review */
+  REVIEW_CURSOR_JUMP_DOWN: { key: "ArrowDown", ctrl: true },
+
+  /** Jump line cursor 10 lines up in immersive review */
+  REVIEW_CURSOR_JUMP_UP: { key: "ArrowUp", ctrl: true },
+
+  /** Quick "I like this" feedback in immersive review */
+  REVIEW_QUICK_LIKE: { key: "l", shift: true },
+
+  /** Quick "I don't like this" feedback in immersive review */
+  REVIEW_QUICK_DISLIKE: { key: "d", shift: true },
+
   TOGGLE_POWER_MODE: { key: "F12", shift: true },
 } as const;
 

From 024bf09359db98a705cbf1cf9333b748399c4b3c Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Tue, 17 Feb 2026 00:39:39 +0000
Subject: [PATCH 02/48] feat: add immersive review mode core UI

---
 .../CodeReview/ImmersiveReviewView.tsx        | 442 ++++++++++++++++++
 .../CodeReview/ReviewControls.tsx             |  36 +-
 .../RightSidebar/CodeReview/ReviewPanel.tsx   |  50 +-
 3 files changed, 525 insertions(+), 3 deletions(-)
 create mode 100644 src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx

diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
new file mode 100644
index 0000000000..fe51c90057
--- /dev/null
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -0,0 +1,442 @@
+/**
+ * ImmersiveReviewView — Full-screen, keyboard-first code review mode.
+ * Rendered via portal into #review-immersive-root overlay.
+ * Shows one file at a time with keyboard navigation for files, hunks, and lines.
+ */
+
+import React, { useState, useCallback, useEffect, useMemo, useRef } from "react";
+import { ArrowLeft, ChevronLeft, ChevronRight, ThumbsDown, ThumbsUp } from "lucide-react";
+import { cn } from "@/common/lib/utils";
+import { HunkViewer } from "./HunkViewer";
+import { KeycapGroup } from "@/browser/components/ui/Keycap";
+import {
+  flattenFileTreeLeaves,
+  getAdjacentFilePath,
+  getFileHunks,
+} from "@/browser/utils/review/navigation";
+import { buildQuickHunkReviewNote } from "@/browser/utils/review/quickReviewNotes";
+import { isEditableElement, KEYBINDS, matchesKeybind } from "@/browser/utils/ui/keybinds";
+import { stopKeyboardPropagation } from "@/browser/utils/events";
+import type { DiffHunk, Review, ReviewNoteData } from "@/common/types/review";
+import type { FileTreeNode } from "@/common/utils/git/numstatParser";
+import type { ReviewActionCallbacks } from "../../shared/InlineReviewNote";
+
+interface ImmersiveReviewViewProps {
+  workspaceId: string;
+  fileTree: FileTreeNode | null;
+  /** Filtered hunks (respects current filters) */
+  hunks: DiffHunk[];
+  /** All hunks (unfiltered, for context) */
+  allHunks: DiffHunk[];
+  isRead: (hunkId: string) => boolean;
+  onToggleRead: (hunkId: string) => void;
+  selectedHunkId: string | null;
+  onSelectHunk: (hunkId: string | null) => void;
+  onExit: () => void;
+  onReviewNote?: (data: ReviewNoteData) => void;
+  reviewActions?: ReviewActionCallbacks;
+  reviewsByFilePath: Map<string, Review[]>;
+}
+
+/** Quick feedback composer state */
+interface ComposerState {
+  prefill: string;
+  hunkId: string;
+}
+
+export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const composerRef = useRef<HTMLTextAreaElement>(null);
+
+  // Flatten file tree into ordered file list
+  const fileList = useMemo(() => flattenFileTreeLeaves(props.fileTree), [props.fileTree]);
+
+  // Determine active file from selected hunk or first file
+  const activeFilePath = useMemo(() => {
+    if (props.selectedHunkId) {
+      const hunk = props.hunks.find((item) => item.id === props.selectedHunkId);
+      if (hunk) return hunk.filePath;
+    }
+    // Fallback: first file that has hunks
+    if (props.hunks.length > 0) return props.hunks[0].filePath;
+    if (fileList.length > 0) return fileList[0];
+    return null;
+  }, [props.selectedHunkId, props.hunks, fileList]);
+
+  // Hunks for the active file only
+  const currentFileHunks = useMemo(
+    () => (activeFilePath ? getFileHunks(props.hunks, activeFilePath) : []),
+    [props.hunks, activeFilePath]
+  );
+
+  // Quick feedback composer
+  const [composer, setComposer] = useState<ComposerState | null>(null);
+  const [composerText, setComposerText] = useState("");
+
+  // File index for display
+  const fileIndex = activeFilePath ? fileList.indexOf(activeFilePath) : -1;
+  const fileCount = fileList.length;
+
+  // --- Navigation callbacks ---
+
+  const navigateFile = useCallback(
+    (direction: 1 | -1) => {
+      if (!activeFilePath) return;
+      const nextFile = getAdjacentFilePath(fileList, activeFilePath, direction);
+      if (!nextFile || nextFile === activeFilePath) return;
+
+      // Select first hunk in the new file
+      const fileHunks = getFileHunks(props.hunks, nextFile);
+      if (fileHunks.length > 0) {
+        props.onSelectHunk(fileHunks[0].id);
+      }
+    },
+    [activeFilePath, fileList, props.hunks, props.onSelectHunk]
+  );
+
+  const navigateHunk = useCallback(
+    (direction: 1 | -1) => {
+      if (currentFileHunks.length === 0) return;
+
+      const currentIdx = props.selectedHunkId
+        ? currentFileHunks.findIndex((hunk) => hunk.id === props.selectedHunkId)
+        : -1;
+
+      let nextIdx: number;
+      if (currentIdx === -1) {
+        nextIdx = direction === 1 ? 0 : currentFileHunks.length - 1;
+      } else {
+        nextIdx = currentIdx + direction;
+        if (nextIdx < 0 || nextIdx >= currentFileHunks.length) return;
+      }
+
+      props.onSelectHunk(currentFileHunks[nextIdx].id);
+    },
+    [currentFileHunks, props.selectedHunkId, props.onSelectHunk]
+  );
+
+  // Quick feedback
+  const openComposer = useCallback(
+    (prefill: string) => {
+      if (!props.selectedHunkId) return;
+      setComposer({ prefill, hunkId: props.selectedHunkId });
+      setComposerText(prefill);
+    },
+    [props.selectedHunkId]
+  );
+
+  const submitComposer = useCallback(() => {
+    if (!composer || !composerText.trim()) return;
+
+    const hunk = props.hunks.find((item) => item.id === composer.hunkId);
+    if (!hunk || !props.onReviewNote) return;
+
+    const noteData = buildQuickHunkReviewNote({
+      hunk,
+      userNote: composerText.trim(),
+    });
+    props.onReviewNote(noteData);
+
+    setComposer(null);
+    setComposerText("");
+    // Restore focus to container
+    containerRef.current?.focus();
+  }, [composer, composerText, props.hunks, props.onReviewNote]);
+
+  const cancelComposer = useCallback(() => {
+    setComposer(null);
+    setComposerText("");
+    containerRef.current?.focus();
+  }, []);
+
+  // Focus composer when it opens
+  useEffect(() => {
+    if (composer) {
+      composerRef.current?.focus();
+      composerRef.current?.select();
+    }
+  }, [composer]);
+
+  // Auto-focus container on mount
+  useEffect(() => {
+    containerRef.current?.focus();
+  }, []);
+
+  // Stable click handler for HunkViewer
+  const handleHunkClick = useCallback(
+    (e: React.MouseEvent<HTMLElement>) => {
+      const hunkId = e.currentTarget.dataset.hunkId;
+      if (hunkId) props.onSelectHunk(hunkId);
+    },
+    [props.onSelectHunk]
+  );
+
+  const handleHunkToggleRead = useCallback(
+    (e: React.MouseEvent<HTMLElement>) => {
+      const hunkId = e.currentTarget.dataset.hunkId;
+      if (hunkId) props.onToggleRead(hunkId);
+    },
+    [props.onToggleRead]
+  );
+
+  // --- Keyboard handler ---
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Don't intercept when typing in composer or other editable elements
+      if (isEditableElement(e.target)) return;
+
+      // Esc: exit immersive
+      if (matchesKeybind(e, KEYBINDS.CANCEL)) {
+        e.preventDefault();
+        props.onExit();
+        return;
+      }
+
+      // J/K: prev/next file
+      if (matchesKeybind(e, KEYBINDS.REVIEW_NEXT_FILE)) {
+        e.preventDefault();
+        navigateFile(1);
+        return;
+      }
+      if (matchesKeybind(e, KEYBINDS.REVIEW_PREV_FILE)) {
+        e.preventDefault();
+        navigateFile(-1);
+        return;
+      }
+
+      // j/k: prev/next hunk
+      if (matchesKeybind(e, KEYBINDS.REVIEW_NEXT_HUNK)) {
+        e.preventDefault();
+        navigateHunk(1);
+        return;
+      }
+      if (matchesKeybind(e, KEYBINDS.REVIEW_PREV_HUNK)) {
+        e.preventDefault();
+        navigateHunk(-1);
+        return;
+      }
+
+      // L: quick like
+      if (matchesKeybind(e, KEYBINDS.REVIEW_QUICK_LIKE)) {
+        e.preventDefault();
+        openComposer("I like this change");
+        return;
+      }
+
+      // D: quick dislike
+      if (matchesKeybind(e, KEYBINDS.REVIEW_QUICK_DISLIKE)) {
+        e.preventDefault();
+        openComposer("I don't like this change");
+        return;
+      }
+
+      // Toggle hunk read
+      if (matchesKeybind(e, KEYBINDS.TOGGLE_HUNK_READ)) {
+        e.preventDefault();
+        if (props.selectedHunkId) props.onToggleRead(props.selectedHunkId);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [
+    props.onExit,
+    navigateFile,
+    navigateHunk,
+    openComposer,
+    props.selectedHunkId,
+    props.onToggleRead,
+  ]);
+
+  // Scroll selected hunk into view
+  useEffect(() => {
+    if (!props.selectedHunkId) return;
+    const element = document.querySelector(
+      `[data-testid="review-immersive-root"] [data-hunk-id="${props.selectedHunkId}"]`
+    );
+    element?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  }, [props.selectedHunkId]);
+
+  const currentHunkIdx = props.selectedHunkId
+    ? currentFileHunks.findIndex((hunk) => hunk.id === props.selectedHunkId)
+    : -1;
+
+  return (
+    <div
+      ref={containerRef}
+      tabIndex={0}
+      className="flex h-full flex-col overflow-hidden outline-none"
+      data-testid="immersive-review-view"
+    >
+      {/* Header */}
+      <div className="border-border-light bg-dark flex items-center gap-2 border-b px-3 py-2">
+        {/* Back button */}
+        <button
+          onClick={props.onExit}
+          className="text-muted hover:text-foreground flex cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-xs transition-colors"
+          aria-label="Exit immersive review"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          <span>Back</span>
+        </button>
+
+        <div className="bg-border-light h-4 w-px" />
+
+        {/* File navigation */}
+        <div className="flex items-center gap-1">
+          <button
+            onClick={() => navigateFile(-1)}
+            disabled={fileCount <= 1}
+            className="text-muted hover:text-foreground disabled:text-dim flex cursor-pointer items-center border-none bg-transparent p-0 transition-colors disabled:cursor-default"
+            aria-label="Previous file"
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </button>
+          <span
+            className="text-foreground max-w-[400px] truncate font-mono text-xs"
+            title={activeFilePath ?? undefined}
+          >
+            {activeFilePath ?? "No files"}
+          </span>
+          <span className="text-dim text-[10px]">
+            {fileIndex >= 0 ? `${fileIndex + 1}/${fileCount}` : ""}
+          </span>
+          <button
+            onClick={() => navigateFile(1)}
+            disabled={fileCount <= 1}
+            className="text-muted hover:text-foreground disabled:text-dim flex cursor-pointer items-center border-none bg-transparent p-0 transition-colors disabled:cursor-default"
+            aria-label="Next file"
+          >
+            <ChevronRight className="h-4 w-4" />
+          </button>
+        </div>
+
+        <div className="bg-border-light h-4 w-px" />
+
+        {/* Hunk navigation */}
+        <div className="text-muted flex items-center gap-1 text-[10px]">
+          <span>
+            Hunk {currentHunkIdx >= 0 ? currentHunkIdx + 1 : "–"}/{currentFileHunks.length}
+          </span>
+        </div>
+
+        {/* Spacer */}
+        <div className="flex-1" />
+
+        {/* Quick feedback buttons */}
+        {props.onReviewNote && (
+          <div className="flex items-center gap-1.5">
+            <button
+              onClick={() => openComposer("I like this change")}
+              disabled={!props.selectedHunkId}
+              className={cn(
+                "flex cursor-pointer items-center gap-1 rounded border-none bg-transparent px-1.5 py-0.5 text-[11px] transition-colors",
+                "text-muted hover:text-success-light disabled:text-dim disabled:cursor-default"
+              )}
+              aria-label="I like this change"
+            >
+              <ThumbsUp className="h-3 w-3" />
+              <span className="hidden sm:inline">Like</span>
+            </button>
+            <button
+              onClick={() => openComposer("I don't like this change")}
+              disabled={!props.selectedHunkId}
+              className={cn(
+                "flex cursor-pointer items-center gap-1 rounded border-none bg-transparent px-1.5 py-0.5 text-[11px] transition-colors",
+                "text-muted hover:text-warning-light disabled:text-dim disabled:cursor-default"
+              )}
+              aria-label="I don't like this change"
+            >
+              <ThumbsDown className="h-3 w-3" />
+              <span className="hidden sm:inline">Dislike</span>
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Quick feedback composer */}
+      {composer && (
+        <div className="border-border-light bg-dark border-b px-3 py-2">
+          <div className="flex items-center gap-2">
+            <div
+              className="flex flex-1 overflow-hidden rounded border border-[var(--color-review-accent)]/30"
+              style={{
+                background: "hsl(from var(--color-review-accent) h s l / 0.08)",
+              }}
+            >
+              <div
+                className="w-[3px] shrink-0"
+                style={{ background: "var(--color-review-accent)" }}
+              />
+              <textarea
+                ref={composerRef}
+                className="text-primary placeholder:text-muted/70 min-w-0 flex-1 resize-none bg-transparent px-2 py-1.5 text-[12px] leading-[1.5] focus:outline-none"
+                style={{ minHeight: "calc(12px * 1.5 + 12px)" }}
+                value={composerText}
+                onChange={(e) => setComposerText(e.target.value)}
+                onKeyDown={(e) => {
+                  stopKeyboardPropagation(e);
+                  if (e.key === "Enter" && !e.shiftKey) {
+                    e.preventDefault();
+                    submitComposer();
+                  } else if (e.key === "Escape") {
+                    e.preventDefault();
+                    cancelComposer();
+                  }
+                }}
+                placeholder="Add your note... (Enter to submit, Esc to cancel)"
+              />
+            </div>
+            <button
+              type="button"
+              onClick={submitComposer}
+              className="text-muted hover:text-primary shrink-0 cursor-pointer border-none bg-transparent px-1 text-xs"
+              aria-label="Submit review note"
+            >
+              ↵
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Hunks list */}
+      <div className="flex-1 overflow-y-auto p-3">
+        {currentFileHunks.length === 0 ? (
+          <div className="text-muted flex items-center justify-center py-12 text-sm">
+            {activeFilePath ? "No hunks for this file" : "No files to review"}
+          </div>
+        ) : (
+          currentFileHunks.map((hunk) => (
+            <HunkViewer
+              key={hunk.id}
+              hunk={hunk}
+              hunkId={hunk.id}
+              workspaceId={props.workspaceId}
+              inlineReviews={props.reviewsByFilePath.get(hunk.filePath)}
+              isSelected={hunk.id === props.selectedHunkId}
+              isRead={props.isRead(hunk.id)}
+              firstSeenAt={Date.now()}
+              onClick={handleHunkClick}
+              onToggleRead={handleHunkToggleRead}
+              onReviewNote={props.onReviewNote}
+              diffBase="HEAD"
+              includeUncommitted={false}
+              reviewActions={props.reviewActions}
+            />
+          ))
+        )}
+      </div>
+
+      {/* Shortcut bar */}
+      <div className="border-border-light bg-dark flex flex-wrap items-center justify-center gap-3 border-t px-3 py-1.5">
+        <KeycapGroup keys={["Esc"]} label="back" />
+        <KeycapGroup keys={["J", "K"]} label="file" />
+        <KeycapGroup keys={["j", "k"]} label="hunk" />
+        <KeycapGroup keys={["m"]} label="read" />
+        <KeycapGroup keys={["Shift", "l"]} label="like" />
+        <KeycapGroup keys={["Shift", "d"]} label="dislike" />
+        {composer && <KeycapGroup keys={["Enter"]} label="submit" />}
+      </div>
+    </div>
+  );
+};
diff --git a/src/browser/components/RightSidebar/CodeReview/ReviewControls.tsx b/src/browser/components/RightSidebar/CodeReview/ReviewControls.tsx
index f3f2420995..014a03eb27 100644
--- a/src/browser/components/RightSidebar/CodeReview/ReviewControls.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ReviewControls.tsx
@@ -3,7 +3,10 @@
  */
 
 import React from "react";
+import { ArrowLeft, Maximize2 } from "lucide-react";
 import { usePersistedState } from "@/browser/hooks/usePersistedState";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/browser/components/ui/tooltip";
+import { KEYBINDS, formatKeybind } from "@/browser/utils/ui/keybinds";
 import { STORAGE_KEYS, WORKSPACE_DEFAULTS } from "@/constants/workspaceDefaults";
 import type { ReviewFilters, ReviewStats, ReviewSortOrder } from "@/common/types/review";
 import type { LastRefreshInfo } from "@/browser/utils/RefreshController";
@@ -26,6 +29,10 @@ interface ReviewControlsProps {
   projectPath: string;
   /** Debug info about last refresh */
   lastRefreshInfo?: LastRefreshInfo | null;
+  /** Whether immersive review mode is active */
+  isImmersive?: boolean;
+  /** Toggle immersive review mode */
+  onToggleImmersive?: () => void;
 }
 
 export const ReviewControls: React.FC<ReviewControlsProps> = ({
@@ -37,6 +44,8 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
   isRefreshBlocked = false,
   projectPath,
   lastRefreshInfo,
+  isImmersive = false,
+  onToggleImmersive,
 }) => {
   // Per-project default base (used for new workspaces in this project)
   const [defaultBase, setDefaultBase] = usePersistedState<string>(
@@ -146,7 +155,32 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
         </select>
       </label>
 
-      <span className="text-dim ml-auto whitespace-nowrap">
+      {onToggleImmersive && (
+        <>
+          <div className="bg-border-light ml-auto h-3 w-px" />
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={onToggleImmersive}
+                className="text-muted hover:text-foreground flex cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-[11px] transition-colors duration-150"
+                aria-label={isImmersive ? "Exit immersive review" : "Enter immersive review"}
+              >
+                {isImmersive ? (
+                  <ArrowLeft aria-hidden="true" className="h-3 w-3" />
+                ) : (
+                  <Maximize2 aria-hidden="true" className="h-3 w-3" />
+                )}
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              {isImmersive ? "Exit" : "Enter"} immersive review (
+              {formatKeybind(KEYBINDS.TOGGLE_REVIEW_IMMERSIVE)})
+            </TooltipContent>
+          </Tooltip>
+        </>
+      )}
+
+      <span className={`text-dim whitespace-nowrap ${onToggleImmersive ? "" : "ml-auto"}`}>
         {stats.read}/{stats.total}
       </span>
     </div>
diff --git a/src/browser/components/RightSidebar/CodeReview/ReviewPanel.tsx b/src/browser/components/RightSidebar/CodeReview/ReviewPanel.tsx
index 295575a6e4..7f42d2e2bf 100644
--- a/src/browser/components/RightSidebar/CodeReview/ReviewPanel.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ReviewPanel.tsx
@@ -25,9 +25,11 @@
 import { LRUCache } from "lru-cache";
 import { AlertTriangle, Lightbulb, Loader2 } from "lucide-react";
 import React, { useState, useEffect, useMemo, useCallback, useRef } from "react";
+import { createPortal } from "react-dom";
 import { HunkViewer } from "./HunkViewer";
 import type { ReviewActionCallbacks } from "../../shared/InlineReviewNote";
 import { ReviewControls } from "./ReviewControls";
+import { ImmersiveReviewView } from "./ImmersiveReviewView";
 import { FileTree } from "./FileTree";
 import { UntrackedStatus } from "./UntrackedStatus";
 import { shellQuote } from "@/common/utils/shell";
@@ -364,6 +366,17 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
     removeReview,
   } = useReviews(workspaceId);
 
+  // Immersive review mode - persisted so WorkspaceShell overlay can react
+  const [isImmersive, setIsImmersive] = usePersistedState<boolean>(
+    `review-immersive:${workspaceId}`,
+    false,
+    { listener: true }
+  );
+
+  const toggleImmersive = useCallback(() => {
+    setIsImmersive((prev) => !prev);
+  }, [setIsImmersive]);
+
   const reviewsByFilePath = useMemo(() => {
     const grouped = new Map<string, typeof reviews>();
 
@@ -1136,7 +1149,7 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
     handleMarkFileAsRead,
   ]);
 
-  // Global keyboard shortcuts (Ctrl+R / Cmd+R for refresh, Ctrl+F / Cmd+F for search)
+  // Global keyboard shortcuts (refresh/search/immersive toggle)
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (matchesKeybind(e, KEYBINDS.REFRESH_REVIEW)) {
@@ -1149,12 +1162,16 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
         if (isEditableElement(e.target)) return;
         e.preventDefault();
         searchInputRef.current?.focus();
+      } else if (matchesKeybind(e, KEYBINDS.TOGGLE_REVIEW_IMMERSIVE)) {
+        if (isEditableElement(e.target)) return;
+        e.preventDefault();
+        setIsImmersive((prev) => !prev);
       }
     };
 
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, []);
+  }, [setIsImmersive]);
 
   const isNonGitWorkspace =
     diffState.status === "error" &&
@@ -1190,6 +1207,8 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
           diffState.status === "loading" || diffState.status === "refreshing" || isLoadingTree
         }
         isRefreshBlocked={isRefreshBlocked}
+        isImmersive={isImmersive}
+        onToggleImmersive={toggleImmersive}
         projectPath={projectPath}
         lastRefreshInfo={lastRefreshInfo}
       />
@@ -1392,6 +1411,33 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
           </div>
         </div>
       )}
+
+      {/* Immersive review mode: render into workspace overlay */}
+      {isImmersive &&
+        (() => {
+          const root =
+            typeof document !== "undefined"
+              ? document.getElementById("review-immersive-root")
+              : null;
+          if (!root) return null;
+          return createPortal(
+            <ImmersiveReviewView
+              workspaceId={workspaceId}
+              fileTree={fileTree}
+              hunks={filteredHunks}
+              allHunks={hunks}
+              isRead={isRead}
+              onToggleRead={handleToggleRead}
+              selectedHunkId={selectedHunkId}
+              onSelectHunk={setSelectedHunkId}
+              onExit={toggleImmersive}
+              onReviewNote={onReviewNote}
+              reviewActions={reviewActions}
+              reviewsByFilePath={reviewsByFilePath}
+            />,
+            root
+          );
+        })()}
     </div>
   );
 };

From 63f1edbbdc67fc62613d3179bbb64a26a457fa67 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Tue, 17 Feb 2026 00:45:18 +0000
Subject: [PATCH 03/48] =?UTF-8?q?=F0=9F=A4=96=20tests:=20add=20immersive?=
 =?UTF-8?q?=20review=20utility=20unit=20tests?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/browser/utils/review/navigation.test.ts   | 185 +++++++++++++++++-
 .../utils/review/quickReviewNotes.test.ts     | 125 ++++++++++++
 2 files changed, 309 insertions(+), 1 deletion(-)
 create mode 100644 src/browser/utils/review/quickReviewNotes.test.ts

diff --git a/src/browser/utils/review/navigation.test.ts b/src/browser/utils/review/navigation.test.ts
index d93cf05ebf..49d0de8cfc 100644
--- a/src/browser/utils/review/navigation.test.ts
+++ b/src/browser/utils/review/navigation.test.ts
@@ -6,8 +6,15 @@
  */
 
 import { describe, test, expect } from "bun:test";
-import { findNextHunkId, findNextHunkIdAfterFileRemoval } from "./navigation";
+import {
+  findNextHunkId,
+  findNextHunkIdAfterFileRemoval,
+  flattenFileTreeLeaves,
+  getAdjacentFilePath,
+  getFileHunks,
+} from "./navigation";
 import type { DiffHunk } from "@/common/types/review";
+import type { FileTreeNode } from "@/common/utils/git/numstatParser";
 
 // Helper to create minimal DiffHunk for testing
 function makeHunk(id: string, filePath: string): DiffHunk {
@@ -128,3 +135,179 @@ describe("findNextHunkIdAfterFileRemoval", () => {
     expect(findNextHunkIdAfterFileRemoval(hunks, "B1", "b.ts")).toBe("A2");
   });
 });
+
+describe("flattenFileTreeLeaves", () => {
+  test("returns empty array for null input", () => {
+    expect(flattenFileTreeLeaves(null)).toEqual([]);
+  });
+
+  test("returns single file for a flat tree", () => {
+    const root: FileTreeNode = {
+      name: "",
+      path: "",
+      isDirectory: true,
+      children: [
+        {
+          name: "index.ts",
+          path: "index.ts",
+          isDirectory: false,
+          children: [],
+        },
+      ],
+    };
+
+    expect(flattenFileTreeLeaves(root)).toEqual(["index.ts"]);
+  });
+
+  test("returns multiple files in depth-first order for a nested tree", () => {
+    const root: FileTreeNode = {
+      name: "",
+      path: "",
+      isDirectory: true,
+      children: [
+        {
+          name: "src",
+          path: "src",
+          isDirectory: true,
+          children: [
+            {
+              name: "components",
+              path: "src/components",
+              isDirectory: true,
+              children: [
+                {
+                  name: "Button.tsx",
+                  path: "src/components/Button.tsx",
+                  isDirectory: false,
+                  children: [],
+                },
+                {
+                  name: "Card.tsx",
+                  path: "src/components/Card.tsx",
+                  isDirectory: false,
+                  children: [],
+                },
+              ],
+            },
+            {
+              name: "index.ts",
+              path: "src/index.ts",
+              isDirectory: false,
+              children: [],
+            },
+          ],
+        },
+        {
+          name: "README.md",
+          path: "README.md",
+          isDirectory: false,
+          children: [],
+        },
+      ],
+    };
+
+    expect(flattenFileTreeLeaves(root)).toEqual([
+      "src/components/Button.tsx",
+      "src/components/Card.tsx",
+      "src/index.ts",
+      "README.md",
+    ]);
+  });
+
+  test("skips directory nodes and only returns leaf file paths", () => {
+    const root: FileTreeNode = {
+      name: "",
+      path: "",
+      isDirectory: true,
+      children: [
+        {
+          name: "packages",
+          path: "packages",
+          isDirectory: true,
+          children: [
+            {
+              name: "core",
+              path: "packages/core",
+              isDirectory: true,
+              children: [
+                {
+                  name: "index.ts",
+                  path: "packages/core/index.ts",
+                  isDirectory: false,
+                  children: [],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+
+    const result = flattenFileTreeLeaves(root);
+
+    expect(result).toEqual(["packages/core/index.ts"]);
+    expect(result).not.toContain("packages");
+    expect(result).not.toContain("packages/core");
+  });
+});
+
+describe("getAdjacentFilePath", () => {
+  test("returns null for empty file list", () => {
+    expect(getAdjacentFilePath([], "src/a.ts", 1)).toBeNull();
+  });
+
+  test("returns first file if current is not in list", () => {
+    const files = ["src/a.ts", "src/b.ts", "src/c.ts"];
+
+    expect(getAdjacentFilePath(files, "src/missing.ts", 1)).toBe("src/a.ts");
+  });
+
+  test("returns next file for direction 1", () => {
+    const files = ["src/a.ts", "src/b.ts", "src/c.ts"];
+
+    expect(getAdjacentFilePath(files, "src/b.ts", 1)).toBe("src/c.ts");
+  });
+
+  test("returns previous file for direction -1", () => {
+    const files = ["src/a.ts", "src/b.ts", "src/c.ts"];
+
+    expect(getAdjacentFilePath(files, "src/b.ts", -1)).toBe("src/a.ts");
+  });
+
+  test("wraps around from last to first for direction 1", () => {
+    const files = ["src/a.ts", "src/b.ts", "src/c.ts"];
+
+    expect(getAdjacentFilePath(files, "src/c.ts", 1)).toBe("src/a.ts");
+  });
+
+  test("wraps around from first to last for direction -1", () => {
+    const files = ["src/a.ts", "src/b.ts", "src/c.ts"];
+
+    expect(getAdjacentFilePath(files, "src/a.ts", -1)).toBe("src/c.ts");
+  });
+});
+
+describe("getFileHunks", () => {
+  test("returns empty array if no hunks match", () => {
+    const hunks = [makeHunk("a", "src/a.ts"), makeHunk("b", "src/b.ts")];
+
+    expect(getFileHunks(hunks, "src/c.ts")).toEqual([]);
+  });
+
+  test("returns only hunks matching the file path", () => {
+    const hunkA = makeHunk("a", "src/a.ts");
+    const hunkB = makeHunk("b", "src/b.ts");
+    const hunks = [hunkA, hunkB];
+
+    expect(getFileHunks(hunks, "src/b.ts")).toEqual([hunkB]);
+  });
+
+  test("returns multiple hunks for the same file", () => {
+    const hunkA1 = makeHunk("a1", "src/a.ts");
+    const hunkB = makeHunk("b", "src/b.ts");
+    const hunkA2 = makeHunk("a2", "src/a.ts");
+    const hunks = [hunkA1, hunkB, hunkA2];
+
+    expect(getFileHunks(hunks, "src/a.ts")).toEqual([hunkA1, hunkA2]);
+  });
+});
diff --git a/src/browser/utils/review/quickReviewNotes.test.ts b/src/browser/utils/review/quickReviewNotes.test.ts
new file mode 100644
index 0000000000..3b3be0097d
--- /dev/null
+++ b/src/browser/utils/review/quickReviewNotes.test.ts
@@ -0,0 +1,125 @@
+import { describe, test, expect } from "bun:test";
+import type { DiffHunk } from "@/common/types/review";
+import { buildQuickHunkReviewNote } from "./quickReviewNotes";
+
+function makeHunk(overrides: Partial<DiffHunk> = {}): DiffHunk {
+  return {
+    id: "hunk-1",
+    filePath: "src/example.ts",
+    oldStart: 10,
+    oldLines: 3,
+    newStart: 10,
+    newLines: 3,
+    content: "-const a = 1;\n+const a = 2;\n console.log(a);",
+    header: "@@ -10,3 +10,3 @@",
+    ...overrides,
+  };
+}
+
+describe("buildQuickHunkReviewNote", () => {
+  test("returns correct filePath and userNote", () => {
+    const hunk = makeHunk();
+
+    const note = buildQuickHunkReviewNote({
+      hunk,
+      userNote: "Looks good",
+    });
+
+    expect(note.filePath).toBe("src/example.ts");
+    expect(note.userNote).toBe("Looks good");
+  });
+
+  test("builds correct lineRange from hunk coordinates", () => {
+    const hunk = makeHunk({
+      oldStart: 12,
+      oldLines: 4,
+      newStart: 20,
+      newLines: 5,
+      header: "@@ -12,4 +20,5 @@",
+    });
+
+    const note = buildQuickHunkReviewNote({
+      hunk,
+      userNote: "Coordinate check",
+    });
+
+    expect(note.lineRange).toBe("-12-15 +20-24");
+  });
+
+  test("includes selectedDiff matching hunk.content", () => {
+    const hunk = makeHunk({
+      content: "-old line\n+new line\n unchanged",
+    });
+
+    const note = buildQuickHunkReviewNote({
+      hunk,
+      userNote: "Diff included",
+    });
+
+    expect(note.selectedDiff).toBe(hunk.content);
+  });
+
+  test("handles small hunks by including all lines in selectedCode", () => {
+    const hunk = makeHunk({
+      oldStart: 40,
+      oldLines: 5,
+      newStart: 40,
+      newLines: 5,
+      header: "@@ -40,5 +40,5 @@",
+      content: [
+        "-const a = 1;",
+        "+const a = 2;",
+        " const b = 3;",
+        "-console.log(a);",
+        "+console.log(a, b);",
+      ].join("\n"),
+    });
+
+    const note = buildQuickHunkReviewNote({
+      hunk,
+      userNote: "Small hunk",
+    });
+
+    const selectedLines = note.selectedCode.split("\n");
+
+    expect(selectedLines).toHaveLength(5);
+    expect(note.selectedCode).toContain("const a = 1;");
+    expect(note.selectedCode).toContain("const a = 2;");
+    expect(note.selectedCode).toContain("const b = 3;");
+    expect(note.selectedCode).toContain("console.log(a);");
+    expect(note.selectedCode).toContain("console.log(a, b);");
+    expect(note.selectedCode).not.toContain("lines omitted");
+  });
+
+  test("handles large hunks by eliding middle lines when over 20 lines", () => {
+    const content = Array.from(
+      { length: 25 },
+      (_, index) => `+const line${index + 1} = ${index + 1};`
+    ).join("\n");
+
+    const hunk = makeHunk({
+      oldStart: 100,
+      oldLines: 25,
+      newStart: 200,
+      newLines: 25,
+      header: "@@ -100,25 +200,25 @@",
+      content,
+    });
+
+    const note = buildQuickHunkReviewNote({
+      hunk,
+      userNote: "Large hunk",
+    });
+
+    const selectedLines = note.selectedCode.split("\n");
+
+    expect(selectedLines).toHaveLength(21);
+    expect(note.selectedCode).toContain("(5 lines omitted)");
+    expect(note.selectedCode).toContain("const line1 = 1;");
+    expect(note.selectedCode).toContain("const line10 = 10;");
+    expect(note.selectedCode).toContain("const line16 = 16;");
+    expect(note.selectedCode).toContain("const line25 = 25;");
+    expect(note.selectedCode).not.toContain("const line11 = 11;");
+    expect(note.selectedCode).not.toContain("const line15 = 15;");
+  });
+});

From 96371fff81988e86f9bfc52df84c35310d50ca5f Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Tue, 17 Feb 2026 07:09:05 +0000
Subject: [PATCH 04/48] fix immersive review deep review findings

---
 .../CodeReview/ImmersiveReviewView.tsx        | 104 ++++++++++--------
 .../RightSidebar/CodeReview/ReviewPanel.tsx   |  13 ++-
 .../Settings/sections/KeybindsSection.tsx     |  12 ++
 src/browser/components/WorkspaceShell.tsx     |  12 +-
 src/browser/utils/review/navigation.ts        |   7 +-
 src/browser/utils/review/quickReviewNotes.ts  |  12 +-
 src/common/constants/storage.ts               |  10 ++
 7 files changed, 105 insertions(+), 65 deletions(-)

diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index fe51c90057..9468570c55 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -36,6 +36,8 @@ interface ImmersiveReviewViewProps {
   onReviewNote?: (data: ReviewNoteData) => void;
   reviewActions?: ReviewActionCallbacks;
   reviewsByFilePath: Map<string, Review[]>;
+  /** Map of hunkId -> first-seen timestamp */
+  firstSeenMap: Record<string, number>;
 }
 
 /** Quick feedback composer state */
@@ -48,25 +50,36 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
   const containerRef = useRef<HTMLDivElement>(null);
   const composerRef = useRef<HTMLTextAreaElement>(null);
 
+  const {
+    fileTree,
+    hunks,
+    allHunks,
+    selectedHunkId,
+    onSelectHunk,
+    onToggleRead,
+    onExit,
+    onReviewNote,
+  } = props;
+
   // Flatten file tree into ordered file list
-  const fileList = useMemo(() => flattenFileTreeLeaves(props.fileTree), [props.fileTree]);
+  const fileList = useMemo(() => flattenFileTreeLeaves(fileTree), [fileTree]);
 
   // Determine active file from selected hunk or first file
   const activeFilePath = useMemo(() => {
-    if (props.selectedHunkId) {
-      const hunk = props.hunks.find((item) => item.id === props.selectedHunkId);
+    if (selectedHunkId) {
+      const hunk = hunks.find((item) => item.id === selectedHunkId);
       if (hunk) return hunk.filePath;
     }
     // Fallback: first file that has hunks
-    if (props.hunks.length > 0) return props.hunks[0].filePath;
+    if (hunks.length > 0) return hunks[0].filePath;
     if (fileList.length > 0) return fileList[0];
     return null;
-  }, [props.selectedHunkId, props.hunks, fileList]);
+  }, [selectedHunkId, hunks, fileList]);
 
   // Hunks for the active file only
   const currentFileHunks = useMemo(
-    () => (activeFilePath ? getFileHunks(props.hunks, activeFilePath) : []),
-    [props.hunks, activeFilePath]
+    () => (activeFilePath ? getFileHunks(hunks, activeFilePath) : []),
+    [hunks, activeFilePath]
   );
 
   // Quick feedback composer
@@ -86,20 +99,20 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
       if (!nextFile || nextFile === activeFilePath) return;
 
       // Select first hunk in the new file
-      const fileHunks = getFileHunks(props.hunks, nextFile);
+      const fileHunks = getFileHunks(hunks, nextFile);
       if (fileHunks.length > 0) {
-        props.onSelectHunk(fileHunks[0].id);
+        onSelectHunk(fileHunks[0].id);
       }
     },
-    [activeFilePath, fileList, props.hunks, props.onSelectHunk]
+    [activeFilePath, fileList, hunks, onSelectHunk]
   );
 
   const navigateHunk = useCallback(
     (direction: 1 | -1) => {
       if (currentFileHunks.length === 0) return;
 
-      const currentIdx = props.selectedHunkId
-        ? currentFileHunks.findIndex((hunk) => hunk.id === props.selectedHunkId)
+      const currentIdx = selectedHunkId
+        ? currentFileHunks.findIndex((hunk) => hunk.id === selectedHunkId)
         : -1;
 
       let nextIdx: number;
@@ -110,38 +123,39 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
         if (nextIdx < 0 || nextIdx >= currentFileHunks.length) return;
       }
 
-      props.onSelectHunk(currentFileHunks[nextIdx].id);
+      onSelectHunk(currentFileHunks[nextIdx].id);
     },
-    [currentFileHunks, props.selectedHunkId, props.onSelectHunk]
+    [currentFileHunks, selectedHunkId, onSelectHunk]
   );
 
   // Quick feedback
   const openComposer = useCallback(
     (prefill: string) => {
-      if (!props.selectedHunkId) return;
-      setComposer({ prefill, hunkId: props.selectedHunkId });
+      if (!selectedHunkId) return;
+      setComposer({ prefill, hunkId: selectedHunkId });
       setComposerText(prefill);
     },
-    [props.selectedHunkId]
+    [selectedHunkId]
   );
 
   const submitComposer = useCallback(() => {
     if (!composer || !composerText.trim()) return;
 
-    const hunk = props.hunks.find((item) => item.id === composer.hunkId);
-    if (!hunk || !props.onReviewNote) return;
+    // Use allHunks (unfiltered) so submission works even if the hunk was filtered out during editing
+    const hunk = allHunks.find((item) => item.id === composer.hunkId);
+    if (!hunk || !onReviewNote) return;
 
     const noteData = buildQuickHunkReviewNote({
       hunk,
       userNote: composerText.trim(),
     });
-    props.onReviewNote(noteData);
+    onReviewNote(noteData);
 
     setComposer(null);
     setComposerText("");
     // Restore focus to container
     containerRef.current?.focus();
-  }, [composer, composerText, props.hunks, props.onReviewNote]);
+  }, [composer, composerText, allHunks, onReviewNote]);
 
   const cancelComposer = useCallback(() => {
     setComposer(null);
@@ -166,17 +180,17 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
   const handleHunkClick = useCallback(
     (e: React.MouseEvent<HTMLElement>) => {
       const hunkId = e.currentTarget.dataset.hunkId;
-      if (hunkId) props.onSelectHunk(hunkId);
+      if (hunkId) onSelectHunk(hunkId);
     },
-    [props.onSelectHunk]
+    [onSelectHunk]
   );
 
   const handleHunkToggleRead = useCallback(
     (e: React.MouseEvent<HTMLElement>) => {
       const hunkId = e.currentTarget.dataset.hunkId;
-      if (hunkId) props.onToggleRead(hunkId);
+      if (hunkId) onToggleRead(hunkId);
     },
-    [props.onToggleRead]
+    [onToggleRead]
   );
 
   // --- Keyboard handler ---
@@ -188,7 +202,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
       // Esc: exit immersive
       if (matchesKeybind(e, KEYBINDS.CANCEL)) {
         e.preventDefault();
-        props.onExit();
+        onExit();
         return;
       }
 
@@ -233,32 +247,26 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
       // Toggle hunk read
       if (matchesKeybind(e, KEYBINDS.TOGGLE_HUNK_READ)) {
         e.preventDefault();
-        if (props.selectedHunkId) props.onToggleRead(props.selectedHunkId);
+        if (selectedHunkId) onToggleRead(selectedHunkId);
       }
     };
 
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [
-    props.onExit,
-    navigateFile,
-    navigateHunk,
-    openComposer,
-    props.selectedHunkId,
-    props.onToggleRead,
-  ]);
+  }, [onExit, navigateFile, navigateHunk, openComposer, selectedHunkId, onToggleRead]);
 
   // Scroll selected hunk into view
   useEffect(() => {
-    if (!props.selectedHunkId) return;
+    if (!selectedHunkId) return;
     const element = document.querySelector(
-      `[data-testid="review-immersive-root"] [data-hunk-id="${props.selectedHunkId}"]`
+      `[data-testid="review-immersive-root"] [data-hunk-id="${selectedHunkId}"]`
     );
-    element?.scrollIntoView({ behavior: "smooth", block: "nearest" });
-  }, [props.selectedHunkId]);
+    // Use "auto" instead of "smooth" for keyboard nav — smooth creates queued animations during rapid j/k
+    element?.scrollIntoView({ behavior: "auto", block: "nearest" });
+  }, [selectedHunkId]);
 
-  const currentHunkIdx = props.selectedHunkId
-    ? currentFileHunks.findIndex((hunk) => hunk.id === props.selectedHunkId)
+  const currentHunkIdx = selectedHunkId
+    ? currentFileHunks.findIndex((hunk) => hunk.id === selectedHunkId)
     : -1;
 
   return (
@@ -272,7 +280,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
       <div className="border-border-light bg-dark flex items-center gap-2 border-b px-3 py-2">
         {/* Back button */}
         <button
-          onClick={props.onExit}
+          onClick={onExit}
           className="text-muted hover:text-foreground flex cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-xs transition-colors"
           aria-label="Exit immersive review"
         >
@@ -324,11 +332,11 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
         <div className="flex-1" />
 
         {/* Quick feedback buttons */}
-        {props.onReviewNote && (
+        {onReviewNote && (
           <div className="flex items-center gap-1.5">
             <button
               onClick={() => openComposer("I like this change")}
-              disabled={!props.selectedHunkId}
+              disabled={!selectedHunkId}
               className={cn(
                 "flex cursor-pointer items-center gap-1 rounded border-none bg-transparent px-1.5 py-0.5 text-[11px] transition-colors",
                 "text-muted hover:text-success-light disabled:text-dim disabled:cursor-default"
@@ -340,7 +348,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
             </button>
             <button
               onClick={() => openComposer("I don't like this change")}
-              disabled={!props.selectedHunkId}
+              disabled={!selectedHunkId}
               className={cn(
                 "flex cursor-pointer items-center gap-1 rounded border-none bg-transparent px-1.5 py-0.5 text-[11px] transition-colors",
                 "text-muted hover:text-warning-light disabled:text-dim disabled:cursor-default"
@@ -413,12 +421,12 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
               hunkId={hunk.id}
               workspaceId={props.workspaceId}
               inlineReviews={props.reviewsByFilePath.get(hunk.filePath)}
-              isSelected={hunk.id === props.selectedHunkId}
+              isSelected={hunk.id === selectedHunkId}
               isRead={props.isRead(hunk.id)}
-              firstSeenAt={Date.now()}
+              firstSeenAt={props.firstSeenMap[hunk.id] ?? Date.now()}
               onClick={handleHunkClick}
               onToggleRead={handleHunkToggleRead}
-              onReviewNote={props.onReviewNote}
+              onReviewNote={onReviewNote}
               diffBase="HEAD"
               includeUncommitted={false}
               reviewActions={props.reviewActions}
diff --git a/src/browser/components/RightSidebar/CodeReview/ReviewPanel.tsx b/src/browser/components/RightSidebar/CodeReview/ReviewPanel.tsx
index 7f42d2e2bf..d27ebbbdfb 100644
--- a/src/browser/components/RightSidebar/CodeReview/ReviewPanel.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ReviewPanel.tsx
@@ -40,7 +40,11 @@ import { useReviews } from "@/browser/hooks/useReviews";
 import { useHunkFirstSeen } from "@/browser/hooks/useHunkFirstSeen";
 import { RefreshController, type LastRefreshInfo } from "@/browser/utils/RefreshController";
 import { parseDiff, extractAllHunks, buildGitDiffCommand } from "@/common/utils/git/diffParser";
-import { getReviewSearchStateKey, REVIEW_SORT_ORDER_KEY } from "@/common/constants/storage";
+import {
+  getReviewImmersiveKey,
+  getReviewSearchStateKey,
+  REVIEW_SORT_ORDER_KEY,
+} from "@/common/constants/storage";
 import { Tooltip, TooltipTrigger, TooltipContent } from "@/browser/components/ui/tooltip";
 import { parseNumstat, buildFileTree, extractNewPath } from "@/common/utils/git/numstatParser";
 import { parseNameStatus } from "@/common/utils/git/nameStatusParser";
@@ -368,7 +372,7 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
 
   // Immersive review mode - persisted so WorkspaceShell overlay can react
   const [isImmersive, setIsImmersive] = usePersistedState<boolean>(
-    `review-immersive:${workspaceId}`,
+    getReviewImmersiveKey(workspaceId),
     false,
     { listener: true }
   );
@@ -1094,6 +1098,9 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
         }
       }
 
+      // Immersive mode has its own keyboard handler; don't double-handle
+      if (isImmersive) return;
+
       if (!selectedHunkId) return;
 
       const currentIndex = filteredHunks.findIndex((h) => h.id === selectedHunkId);
@@ -1147,6 +1154,7 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
     handleMarkAsRead,
     handleMarkAsUnread,
     handleMarkFileAsRead,
+    isImmersive,
   ]);
 
   // Global keyboard shortcuts (refresh/search/immersive toggle)
@@ -1434,6 +1442,7 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
               onReviewNote={onReviewNote}
               reviewActions={reviewActions}
               reviewsByFilePath={reviewsByFilePath}
+              firstSeenMap={firstSeenMap}
             />,
             root
           );
diff --git a/src/browser/components/Settings/sections/KeybindsSection.tsx b/src/browser/components/Settings/sections/KeybindsSection.tsx
index f87c063248..a6ed045d27 100644
--- a/src/browser/components/Settings/sections/KeybindsSection.tsx
+++ b/src/browser/components/Settings/sections/KeybindsSection.tsx
@@ -152,6 +152,18 @@ const KEYBIND_GROUPS: Array<{ label: string; keys: Array<keyof typeof KEYBINDS>
       "TOGGLE_HUNK_COLLAPSE",
     ],
   },
+  {
+    label: "Immersive Review",
+    keys: [
+      "TOGGLE_REVIEW_IMMERSIVE",
+      "REVIEW_NEXT_FILE",
+      "REVIEW_PREV_FILE",
+      "REVIEW_NEXT_HUNK",
+      "REVIEW_PREV_HUNK",
+      "REVIEW_QUICK_LIKE",
+      "REVIEW_QUICK_DISLIKE",
+    ],
+  },
   {
     label: "External",
     keys: ["OPEN_TERMINAL", "OPEN_IN_EDITOR"],
diff --git a/src/browser/components/WorkspaceShell.tsx b/src/browser/components/WorkspaceShell.tsx
index 34e13b44b2..bace2527f8 100644
--- a/src/browser/components/WorkspaceShell.tsx
+++ b/src/browser/components/WorkspaceShell.tsx
@@ -1,7 +1,7 @@
 import type { TerminalSessionCreateOptions } from "@/browser/utils/terminal";
 import React, { useCallback, useRef } from "react";
 import { cn } from "@/common/lib/utils";
-import { RIGHT_SIDEBAR_WIDTH_KEY } from "@/common/constants/storage";
+import { RIGHT_SIDEBAR_WIDTH_KEY, getReviewImmersiveKey } from "@/common/constants/storage";
 import { useResizableSidebar } from "@/browser/hooks/useResizableSidebar";
 import { useResizeObserver } from "@/browser/hooks/useResizeObserver";
 import { useOpenTerminal } from "@/browser/hooks/useOpenTerminal";
@@ -128,11 +128,9 @@ export const WorkspaceShell: React.FC<WorkspaceShellProps> = (props) => {
   );
 
   const workspaceState = useWorkspaceState(props.workspaceId);
-  const [isReviewImmersive] = usePersistedState(
-    `review-immersive:${props.workspaceId}`,
-    false,
-    { listener: true }
-  );
+  const [isReviewImmersive] = usePersistedState(getReviewImmersiveKey(props.workspaceId), false, {
+    listener: true,
+  });
   const backgroundBashError = useBackgroundBashError();
 
   if (!workspaceState || workspaceState.loading) {
@@ -192,7 +190,7 @@ export const WorkspaceShell: React.FC<WorkspaceShellProps> = (props) => {
       <div
         id="review-immersive-root"
         hidden={!isReviewImmersive}
-        className="absolute inset-0 z-50 bg-dark"
+        className="bg-dark absolute inset-0 z-50"
         data-testid="review-immersive-root"
       />
 
diff --git a/src/browser/utils/review/navigation.ts b/src/browser/utils/review/navigation.ts
index 2019d8bdbb..d7be4869db 100644
--- a/src/browser/utils/review/navigation.ts
+++ b/src/browser/utils/review/navigation.ts
@@ -3,7 +3,7 @@
  * These pure functions compute the next/previous hunk to navigate to.
  */
 
-import type { FileTreeNode } from "@/common/utils/git/numstatParser";
+import { extractNewPath, type FileTreeNode } from "@/common/utils/git/numstatParser";
 import type { DiffHunk } from "@/common/types/review";
 
 /**
@@ -82,8 +82,8 @@ export function flattenFileTreeLeaves(root: FileTreeNode | null): string[] {
         walk(child, path);
       }
     } else {
-      // Leaf node = file
-      result.push(path);
+      // Leaf node = file; normalize rename syntax (e.g., "src/{old.ts => new.ts}" → "src/new.ts")
+      result.push(extractNewPath(path));
     }
   }
 
@@ -115,4 +115,3 @@ export function getAdjacentFilePath(
 export function getFileHunks(hunks: DiffHunk[], filePath: string): DiffHunk[] {
   return hunks.filter((h) => h.filePath === filePath);
 }
-
diff --git a/src/browser/utils/review/quickReviewNotes.ts b/src/browser/utils/review/quickReviewNotes.ts
index d55af10883..fc4ddc2906 100644
--- a/src/browser/utils/review/quickReviewNotes.ts
+++ b/src/browser/utils/review/quickReviewNotes.ts
@@ -17,11 +17,15 @@ export function buildQuickHunkReviewNote(params: {
 
   const lines = hunk.content.split("\n").filter((line) => line.length > 0);
 
-  // Compute line number ranges
-  const oldEnd = hunk.oldStart + hunk.oldLines - 1;
-  const newEnd = hunk.newStart + hunk.newLines - 1;
+  // Compute line number ranges, omitting segments for pure additions/deletions
+  const oldRange =
+    hunk.oldLines > 0 ? `-${hunk.oldStart}-${hunk.oldStart + hunk.oldLines - 1}` : null;
+  const newRange =
+    hunk.newLines > 0 ? `+${hunk.newStart}-${hunk.newStart + hunk.newLines - 1}` : null;
+  const lineRange = [oldRange, newRange].filter(Boolean).join(" ");
 
-  const lineRange = `-${hunk.oldStart}-${oldEnd} +${hunk.newStart}-${newEnd}`;
+  const oldEnd = hunk.oldLines > 0 ? hunk.oldStart + hunk.oldLines - 1 : hunk.oldStart;
+  const newEnd = hunk.newLines > 0 ? hunk.newStart + hunk.newLines - 1 : hunk.newStart;
 
   // Build selectedCode with line numbers (matching DiffRenderer format)
   const oldWidth = Math.max(1, String(oldEnd).length);
diff --git a/src/common/constants/storage.ts b/src/common/constants/storage.ts
index c9dcbd39b9..4691bd1636 100644
--- a/src/common/constants/storage.ts
+++ b/src/common/constants/storage.ts
@@ -559,6 +559,15 @@ export function getReviewsKey(workspaceId: string): string {
   return `reviews:${workspaceId}`;
 }
 
+/**
+ * Get the localStorage key for immersive review mode state per workspace
+ * Tracks whether immersive mode is active
+ * Format: "review-immersive:{workspaceId}"
+ */
+export function getReviewImmersiveKey(workspaceId: string): string {
+  return `review-immersive:${workspaceId}`;
+}
+
 /**
  * Get the localStorage key for auto-compaction enabled preference per workspace
  * Format: "autoCompaction:enabled:{workspaceId}"
@@ -597,6 +606,7 @@ const PERSISTENT_WORKSPACE_KEY_FUNCTIONS: Array<(workspaceId: string) => string>
   getFileTreeExpandStateKey,
   getReviewSearchStateKey,
   getReviewsKey,
+  getReviewImmersiveKey,
   getAutoCompactionEnabledKey,
   getWorkspaceLastReadKey,
   getStatusStateKey,

From 3f6020652614f697d0bd38f640f444c1e8fb66d5 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Tue, 17 Feb 2026 09:43:48 +0000
Subject: [PATCH 05/48] feat: update immersive review line-selection feedback
 flow

---
 .../CodeReview/ImmersiveReviewView.tsx        | 377 +++++++++++++++---
 .../Settings/sections/KeybindsSection.tsx     |   2 +-
 .../components/shared/DiffRenderer.tsx        |  58 ++-
 .../utils/review/quickReviewNotes.test.ts     |  99 ++++-
 src/browser/utils/review/quickReviewNotes.ts  | 160 +++++++-
 src/browser/utils/ui/keybinds.ts              |  14 +-
 6 files changed, 627 insertions(+), 83 deletions(-)

diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index 9468570c55..967aef6e92 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -5,18 +5,27 @@
  */
 
 import React, { useState, useCallback, useEffect, useMemo, useRef } from "react";
-import { ArrowLeft, ChevronLeft, ChevronRight, ThumbsDown, ThumbsUp } from "lucide-react";
+import {
+  ArrowLeft,
+  Check,
+  ChevronLeft,
+  ChevronRight,
+  Circle,
+  MessageSquare,
+  ThumbsDown,
+} from "lucide-react";
 import { cn } from "@/common/lib/utils";
-import { HunkViewer } from "./HunkViewer";
+import { SelectableDiffRenderer } from "../../shared/DiffRenderer";
 import { KeycapGroup } from "@/browser/components/ui/Keycap";
 import {
   flattenFileTreeLeaves,
   getAdjacentFilePath,
   getFileHunks,
 } from "@/browser/utils/review/navigation";
-import { buildQuickHunkReviewNote } from "@/browser/utils/review/quickReviewNotes";
+import { buildQuickLineReviewNote } from "@/browser/utils/review/quickReviewNotes";
 import { isEditableElement, KEYBINDS, matchesKeybind } from "@/browser/utils/ui/keybinds";
 import { stopKeyboardPropagation } from "@/browser/utils/events";
+import { formatRelativeTime } from "@/browser/utils/ui/dateTime";
 import type { DiffHunk, Review, ReviewNoteData } from "@/common/types/review";
 import type { FileTreeNode } from "@/common/utils/git/numstatParser";
 import type { ReviewActionCallbacks } from "../../shared/InlineReviewNote";
@@ -44,6 +53,36 @@ interface ImmersiveReviewViewProps {
 interface ComposerState {
   prefill: string;
   hunkId: string;
+  startIndex: number;
+  endIndex: number;
+}
+
+interface SelectedLineRange {
+  startIndex: number;
+  endIndex: number;
+}
+
+const LINE_JUMP_SIZE = 10;
+
+function splitDiffLines(content: string): string[] {
+  const lines = content.split(/\r?\n/);
+  if (lines.length > 0 && lines[lines.length - 1] === "") {
+    lines.pop();
+  }
+  return lines;
+}
+
+function countHunkChanges(hunk: DiffHunk): {
+  additions: number;
+  deletions: number;
+  lineCount: number;
+} {
+  const lines = splitDiffLines(hunk.content);
+  return {
+    additions: lines.filter((line) => line.startsWith("+")).length,
+    deletions: lines.filter((line) => line.startsWith("-")).length,
+    lineCount: lines.length,
+  };
 }
 
 export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) => {
@@ -82,10 +121,53 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     [hunks, activeFilePath]
   );
 
+  const selectedHunk = useMemo(() => {
+    if (selectedHunkId) {
+      const matchingHunk = currentFileHunks.find((hunk) => hunk.id === selectedHunkId);
+      if (matchingHunk) {
+        return matchingHunk;
+      }
+    }
+
+    return currentFileHunks[0] ?? null;
+  }, [selectedHunkId, currentFileHunks]);
+
+  const selectedHunkLineCount = useMemo(
+    () => (selectedHunk ? splitDiffLines(selectedHunk.content).length : 0),
+    [selectedHunk]
+  );
+
+  // Ensure we always have a selected hunk when the active file has hunks.
+  useEffect(() => {
+    if (currentFileHunks.length === 0) {
+      return;
+    }
+
+    if (!selectedHunkId || !currentFileHunks.some((hunk) => hunk.id === selectedHunkId)) {
+      onSelectHunk(currentFileHunks[0].id);
+    }
+  }, [currentFileHunks, selectedHunkId, onSelectHunk]);
+
   // Quick feedback composer
   const [composer, setComposer] = useState<ComposerState | null>(null);
   const [composerText, setComposerText] = useState("");
 
+  // Keyboard line cursor state (scoped to the currently selected hunk)
+  const [activeLineIndex, setActiveLineIndex] = useState<number | null>(null);
+  const [selectedLineRange, setSelectedLineRange] = useState<SelectedLineRange | null>(null);
+
+  // Reset line cursor when hunk changes.
+  useEffect(() => {
+    if (!selectedHunk || selectedHunkLineCount === 0) {
+      setActiveLineIndex(null);
+      setSelectedLineRange(null);
+      return;
+    }
+
+    setActiveLineIndex(0);
+    setSelectedLineRange(null);
+  }, [selectedHunk, selectedHunkLineCount]);
+
   // File index for display
   const fileIndex = activeFilePath ? fileList.indexOf(activeFilePath) : -1;
   const fileCount = fileList.length;
@@ -128,14 +210,41 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     [currentFileHunks, selectedHunkId, onSelectHunk]
   );
 
-  // Quick feedback
+  const getCurrentLineSelection = useCallback((): SelectedLineRange | null => {
+    if (activeLineIndex === null) {
+      return null;
+    }
+
+    if (!selectedLineRange) {
+      return { startIndex: activeLineIndex, endIndex: activeLineIndex };
+    }
+
+    return {
+      startIndex: Math.min(selectedLineRange.startIndex, selectedLineRange.endIndex),
+      endIndex: Math.max(selectedLineRange.startIndex, selectedLineRange.endIndex),
+    };
+  }, [activeLineIndex, selectedLineRange]);
+
   const openComposer = useCallback(
     (prefill: string) => {
-      if (!selectedHunkId) return;
-      setComposer({ prefill, hunkId: selectedHunkId });
+      if (!selectedHunk) {
+        return;
+      }
+
+      const selection = getCurrentLineSelection();
+      if (!selection) {
+        return;
+      }
+
+      setComposer({
+        prefill,
+        hunkId: selectedHunk.id,
+        startIndex: selection.startIndex,
+        endIndex: selection.endIndex,
+      });
       setComposerText(prefill);
     },
-    [selectedHunkId]
+    [selectedHunk, getCurrentLineSelection]
   );
 
   const submitComposer = useCallback(() => {
@@ -145,10 +254,13 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     const hunk = allHunks.find((item) => item.id === composer.hunkId);
     if (!hunk || !onReviewNote) return;
 
-    const noteData = buildQuickHunkReviewNote({
+    const noteData = buildQuickLineReviewNote({
       hunk,
+      startIndex: composer.startIndex,
+      endIndex: composer.endIndex,
       userNote: composerText.trim(),
     });
+
     onReviewNote(noteData);
 
     setComposer(null);
@@ -163,6 +275,52 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     containerRef.current?.focus();
   }, []);
 
+  const moveLineCursor = useCallback(
+    (delta: number, extendRange: boolean) => {
+      if (!selectedHunk || selectedHunkLineCount === 0) {
+        return;
+      }
+
+      const currentIndex = activeLineIndex ?? 0;
+      const nextIndex = Math.max(0, Math.min(selectedHunkLineCount - 1, currentIndex + delta));
+
+      setActiveLineIndex(nextIndex);
+
+      if (extendRange) {
+        const anchorIndex = selectedLineRange?.startIndex ?? currentIndex;
+        setSelectedLineRange({ startIndex: anchorIndex, endIndex: nextIndex });
+        return;
+      }
+
+      setSelectedLineRange(null);
+    },
+    [selectedHunk, selectedHunkLineCount, activeLineIndex, selectedLineRange]
+  );
+
+  const handleLineIndexSelect = useCallback(
+    (hunkId: string, lineIndex: number, shiftKey: boolean) => {
+      if (selectedHunkId !== hunkId) {
+        onSelectHunk(hunkId);
+        setActiveLineIndex(lineIndex);
+        setSelectedLineRange(null);
+        return;
+      }
+
+      const anchorIndex = shiftKey
+        ? (selectedLineRange?.startIndex ?? activeLineIndex ?? lineIndex)
+        : lineIndex;
+      setActiveLineIndex(lineIndex);
+
+      if (shiftKey) {
+        setSelectedLineRange({ startIndex: anchorIndex, endIndex: lineIndex });
+        return;
+      }
+
+      setSelectedLineRange(null);
+    },
+    [selectedHunkId, onSelectHunk, selectedLineRange, activeLineIndex]
+  );
+
   // Focus composer when it opens
   useEffect(() => {
     if (composer) {
@@ -176,23 +334,6 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     containerRef.current?.focus();
   }, []);
 
-  // Stable click handler for HunkViewer
-  const handleHunkClick = useCallback(
-    (e: React.MouseEvent<HTMLElement>) => {
-      const hunkId = e.currentTarget.dataset.hunkId;
-      if (hunkId) onSelectHunk(hunkId);
-    },
-    [onSelectHunk]
-  );
-
-  const handleHunkToggleRead = useCallback(
-    (e: React.MouseEvent<HTMLElement>) => {
-      const hunkId = e.currentTarget.dataset.hunkId;
-      if (hunkId) onToggleRead(hunkId);
-    },
-    [onToggleRead]
-  );
-
   // --- Keyboard handler ---
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -206,7 +347,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
         return;
       }
 
-      // J/K: prev/next file
+      // n/p: next/prev file
       if (matchesKeybind(e, KEYBINDS.REVIEW_NEXT_FILE)) {
         e.preventDefault();
         navigateFile(1);
@@ -218,7 +359,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
         return;
       }
 
-      // j/k: prev/next hunk
+      // j/k: next/prev hunk
       if (matchesKeybind(e, KEYBINDS.REVIEW_NEXT_HUNK)) {
         e.preventDefault();
         navigateHunk(1);
@@ -230,14 +371,36 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
         return;
       }
 
-      // L: quick like
+      // Arrow line cursor controls
+      if (matchesKeybind(e, KEYBINDS.REVIEW_CURSOR_JUMP_DOWN)) {
+        e.preventDefault();
+        moveLineCursor(LINE_JUMP_SIZE, e.shiftKey);
+        return;
+      }
+      if (matchesKeybind(e, KEYBINDS.REVIEW_CURSOR_JUMP_UP)) {
+        e.preventDefault();
+        moveLineCursor(-LINE_JUMP_SIZE, e.shiftKey);
+        return;
+      }
+      if (matchesKeybind(e, KEYBINDS.REVIEW_CURSOR_DOWN)) {
+        e.preventDefault();
+        moveLineCursor(1, e.shiftKey);
+        return;
+      }
+      if (matchesKeybind(e, KEYBINDS.REVIEW_CURSOR_UP)) {
+        e.preventDefault();
+        moveLineCursor(-1, e.shiftKey);
+        return;
+      }
+
+      // Shift+L: add comment
       if (matchesKeybind(e, KEYBINDS.REVIEW_QUICK_LIKE)) {
         e.preventDefault();
-        openComposer("I like this change");
+        openComposer("");
         return;
       }
 
-      // D: quick dislike
+      // Shift+D: quick dislike
       if (matchesKeybind(e, KEYBINDS.REVIEW_QUICK_DISLIKE)) {
         e.preventDefault();
         openComposer("I don't like this change");
@@ -253,7 +416,15 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
 
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [onExit, navigateFile, navigateHunk, openComposer, selectedHunkId, onToggleRead]);
+  }, [
+    onExit,
+    navigateFile,
+    navigateHunk,
+    moveLineCursor,
+    openComposer,
+    selectedHunkId,
+    onToggleRead,
+  ]);
 
   // Scroll selected hunk into view
   useEffect(() => {
@@ -265,10 +436,26 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     element?.scrollIntoView({ behavior: "auto", block: "nearest" });
   }, [selectedHunkId]);
 
+  // Keep the active line visible while moving with keyboard shortcuts.
+  useEffect(() => {
+    if (!selectedHunkId || activeLineIndex === null) {
+      return;
+    }
+
+    const lineElement = document.querySelector(
+      `[data-testid="review-immersive-root"] [data-hunk-id="${selectedHunkId}"] [data-line-index="${activeLineIndex}"]`
+    );
+    lineElement?.scrollIntoView({ behavior: "auto", block: "nearest" });
+  }, [selectedHunkId, activeLineIndex]);
+
   const currentHunkIdx = selectedHunkId
     ? currentFileHunks.findIndex((hunk) => hunk.id === selectedHunkId)
     : -1;
 
+  const selectedLineSummary = getCurrentLineSelection();
+
+  const canCompose = Boolean(onReviewNote && selectedHunk && selectedLineSummary);
+
   return (
     <div
       ref={containerRef}
@@ -321,11 +508,18 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
 
         <div className="bg-border-light h-4 w-px" />
 
-        {/* Hunk navigation */}
+        {/* Hunk and line selection summary */}
         <div className="text-muted flex items-center gap-1 text-[10px]">
           <span>
             Hunk {currentHunkIdx >= 0 ? currentHunkIdx + 1 : "–"}/{currentFileHunks.length}
           </span>
+          <span className="text-dim">·</span>
+          <span>
+            Lines{" "}
+            {selectedLineSummary
+              ? `${selectedLineSummary.startIndex + 1}-${selectedLineSummary.endIndex + 1}`
+              : "–"}
+          </span>
         </div>
 
         {/* Spacer */}
@@ -335,20 +529,20 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
         {onReviewNote && (
           <div className="flex items-center gap-1.5">
             <button
-              onClick={() => openComposer("I like this change")}
-              disabled={!selectedHunkId}
+              onClick={() => openComposer("")}
+              disabled={!canCompose}
               className={cn(
                 "flex cursor-pointer items-center gap-1 rounded border-none bg-transparent px-1.5 py-0.5 text-[11px] transition-colors",
-                "text-muted hover:text-success-light disabled:text-dim disabled:cursor-default"
+                "text-muted hover:text-link disabled:text-dim disabled:cursor-default"
               )}
-              aria-label="I like this change"
+              aria-label="Add a comment"
             >
-              <ThumbsUp className="h-3 w-3" />
-              <span className="hidden sm:inline">Like</span>
+              <MessageSquare className="h-3 w-3" />
+              <span className="hidden sm:inline">Add comment</span>
             </button>
             <button
               onClick={() => openComposer("I don't like this change")}
-              disabled={!selectedHunkId}
+              disabled={!canCompose}
               className={cn(
                 "flex cursor-pointer items-center gap-1 rounded border-none bg-transparent px-1.5 py-0.5 text-[11px] transition-colors",
                 "text-muted hover:text-warning-light disabled:text-dim disabled:cursor-default"
@@ -407,41 +601,104 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
         </div>
       )}
 
-      {/* Hunks list */}
+      {/* File hunks (always expanded, grouped by file) */}
       <div className="flex-1 overflow-y-auto p-3">
         {currentFileHunks.length === 0 ? (
           <div className="text-muted flex items-center justify-center py-12 text-sm">
             {activeFilePath ? "No hunks for this file" : "No files to review"}
           </div>
         ) : (
-          currentFileHunks.map((hunk) => (
-            <HunkViewer
-              key={hunk.id}
-              hunk={hunk}
-              hunkId={hunk.id}
-              workspaceId={props.workspaceId}
-              inlineReviews={props.reviewsByFilePath.get(hunk.filePath)}
-              isSelected={hunk.id === selectedHunkId}
-              isRead={props.isRead(hunk.id)}
-              firstSeenAt={props.firstSeenMap[hunk.id] ?? Date.now()}
-              onClick={handleHunkClick}
-              onToggleRead={handleHunkToggleRead}
-              onReviewNote={onReviewNote}
-              diffBase="HEAD"
-              includeUncommitted={false}
-              reviewActions={props.reviewActions}
-            />
-          ))
+          <div className="border-border-light bg-dark overflow-hidden rounded border">
+            {currentFileHunks.map((hunk, index) => {
+              const isSelected = hunk.id === selectedHunkId;
+              const hunkCounts = countHunkChanges(hunk);
+              const firstSeenAt = props.firstSeenMap[hunk.id] ?? Date.now();
+
+              return (
+                <section
+                  key={hunk.id}
+                  data-hunk-id={hunk.id}
+                  className={cn(
+                    "border-border-light border-b last:border-b-0",
+                    isSelected && "shadow-[inset_0_0_0_1px_var(--color-review-accent)]"
+                  )}
+                >
+                  <div
+                    className={cn(
+                      "border-border-light font-monospace flex items-center gap-1.5 border-b px-2 py-1 text-[11px]",
+                      isSelected && "bg-code-keyword-overlay-light"
+                    )}
+                    onClick={() => onSelectHunk(hunk.id)}
+                  >
+                    <button
+                      type="button"
+                      className={cn(
+                        "text-muted hover:text-read flex cursor-pointer items-center border-none bg-transparent p-0 text-[11px] transition-colors duration-150",
+                        props.isRead(hunk.id) && "text-read"
+                      )}
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        onToggleRead(hunk.id);
+                      }}
+                      aria-label={
+                        props.isRead(hunk.id) ? "Mark hunk as unread" : "Mark hunk as read"
+                      }
+                    >
+                      {props.isRead(hunk.id) ? (
+                        <Check aria-hidden="true" className="h-3 w-3" />
+                      ) : (
+                        <Circle aria-hidden="true" className="h-3 w-3" />
+                      )}
+                    </button>
+
+                    <span className="text-muted">Hunk {index + 1}</span>
+                    <span className="text-dim">{hunk.header}</span>
+
+                    <div className="text-muted ml-auto flex shrink-0 items-center gap-1.5 whitespace-nowrap">
+                      {hunkCounts.additions > 0 && (
+                        <span className="text-success-light">+{hunkCounts.additions}</span>
+                      )}
+                      {hunkCounts.deletions > 0 && (
+                        <span className="text-warning-light">−{hunkCounts.deletions}</span>
+                      )}
+                      <span className="text-dim">{hunkCounts.lineCount} lines</span>
+                      <span className="text-dim">{formatRelativeTime(firstSeenAt)}</span>
+                    </div>
+                  </div>
+
+                  <SelectableDiffRenderer
+                    content={hunk.content}
+                    filePath={hunk.filePath}
+                    inlineReviews={props.reviewsByFilePath.get(hunk.filePath)}
+                    oldStart={hunk.oldStart}
+                    newStart={hunk.newStart}
+                    fontSize="11px"
+                    maxHeight="none"
+                    className="rounded-none border-0 [&>div]:overflow-x-visible"
+                    reviewActions={props.reviewActions}
+                    activeLineIndex={isSelected ? activeLineIndex : null}
+                    selectedLineRange={isSelected ? selectedLineRange : null}
+                    onLineIndexSelect={(lineIndex, shiftKey) =>
+                      handleLineIndexSelect(hunk.id, lineIndex, shiftKey)
+                    }
+                  />
+                </section>
+              );
+            })}
+          </div>
         )}
       </div>
 
       {/* Shortcut bar */}
       <div className="border-border-light bg-dark flex flex-wrap items-center justify-center gap-3 border-t px-3 py-1.5">
         <KeycapGroup keys={["Esc"]} label="back" />
-        <KeycapGroup keys={["J", "K"]} label="file" />
+        <KeycapGroup keys={["n", "p"]} label="file" />
         <KeycapGroup keys={["j", "k"]} label="hunk" />
+        <KeycapGroup keys={["↑", "↓"]} label="line" />
+        <KeycapGroup keys={["Shift", "↑", "↓"]} label="select" />
+        <KeycapGroup keys={["Ctrl", "↑", "↓"]} label="jump 10" />
         <KeycapGroup keys={["m"]} label="read" />
-        <KeycapGroup keys={["Shift", "l"]} label="like" />
+        <KeycapGroup keys={["Shift", "l"]} label="comment" />
         <KeycapGroup keys={["Shift", "d"]} label="dislike" />
         {composer && <KeycapGroup keys={["Enter"]} label="submit" />}
       </div>
diff --git a/src/browser/components/Settings/sections/KeybindsSection.tsx b/src/browser/components/Settings/sections/KeybindsSection.tsx
index a6ed045d27..409fb3f7af 100644
--- a/src/browser/components/Settings/sections/KeybindsSection.tsx
+++ b/src/browser/components/Settings/sections/KeybindsSection.tsx
@@ -68,7 +68,7 @@ const KEYBIND_LABELS: Record<keyof typeof KEYBINDS, string> = {
   REVIEW_CURSOR_UP: "Line cursor up (immersive)",
   REVIEW_CURSOR_JUMP_DOWN: "Jump 10 lines down (immersive)",
   REVIEW_CURSOR_JUMP_UP: "Jump 10 lines up (immersive)",
-  REVIEW_QUICK_LIKE: "Quick like (immersive)",
+  REVIEW_QUICK_LIKE: "Add comment (immersive)",
   REVIEW_QUICK_DISLIKE: "Quick dislike (immersive)",
   // Easter egg keybind; intentionally omitted from KEYBIND_GROUPS.
   TOGGLE_POWER_MODE: "",
diff --git a/src/browser/components/shared/DiffRenderer.tsx b/src/browser/components/shared/DiffRenderer.tsx
index 30c3ba9e6b..dd185a0e28 100644
--- a/src/browser/components/shared/DiffRenderer.tsx
+++ b/src/browser/components/shared/DiffRenderer.tsx
@@ -641,6 +641,12 @@ interface SelectableDiffRendererProps extends Omit<DiffRendererProps, "filePath"
   onComposingChange?: (isComposing: boolean) => void;
   /** Action callbacks for inline review notes (edit, check, delete, etc.) */
   reviewActions?: ReviewActionCallbacks;
+  /** Active line for immersive keyboard navigation */
+  activeLineIndex?: number | null;
+  /** Selected line range for immersive keyboard navigation */
+  selectedLineRange?: LineSelection | null;
+  /** Called when user selects a line via click in immersive mode */
+  onLineIndexSelect?: (lineIndex: number, shiftKey: boolean) => void;
 }
 
 interface LineSelection {
@@ -931,6 +937,9 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
     enableHighlighting = true,
     onComposingChange,
     reviewActions,
+    activeLineIndex,
+    selectedLineRange,
+    onLineIndexSelect,
   }) => {
     const dragAnchorRef = React.useRef<number | null>(null);
     const [isDragging, setIsDragging] = React.useState(false);
@@ -1150,9 +1159,12 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
       setSelection(null);
     };
 
-    const isLineSelected = (index: number) => {
-      if (!selection) return false;
-      const [start, end] = [selection.startIndex, selection.endIndex].sort((a, b) => a - b);
+    const isLineInSelection = (index: number, lineSelection: LineSelection | null | undefined) => {
+      if (!lineSelection) {
+        return false;
+      }
+
+      const [start, end] = [lineSelection.startIndex, lineSelection.endIndex].sort((a, b) => a - b);
       return index >= start && index <= end;
     };
 
@@ -1160,9 +1172,12 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
     const firstLineType = highlightedLineData[0]?.type;
     const lastLineType = highlightedLineData[highlightedLineData.length - 1]?.type;
 
-    // Selection highlight overlay - applied via box-shadow to avoid affecting grid layout
-    const selectionHighlight =
+    // Selection highlights are applied via box-shadow to avoid affecting grid layout.
+    const reviewSelectionHighlight =
       "inset 0 0 0 100vmax hsl(from var(--color-review-accent) h s l / 0.16)";
+    const rangeSelectionHighlight =
+      "inset 0 0 0 100vmax hsl(from var(--color-review-accent) h s l / 0.12)";
+    const activeLineHighlight = "inset 0 0 0 1px hsl(from var(--color-review-accent) h s l / 0.45)";
 
     return (
       <DiffContainer
@@ -1173,7 +1188,9 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
         lastLineType={lastLineType}
       >
         {highlightedLineData.map((lineInfo, displayIndex) => {
-          const isSelected = isLineSelected(displayIndex);
+          const isComposerSelected = isLineInSelection(displayIndex, selection);
+          const isRangeSelected = isLineInSelection(displayIndex, selectedLineRange);
+          const isActiveLine = activeLineIndex === displayIndex;
           const isInReviewRange = reviewRangeByLineIndex[displayIndex] ?? false;
           const baseCodeBg = getDiffLineBackground(lineInfo.type);
           const codeBg = applyReviewRangeOverlay(baseCodeBg, isInReviewRange);
@@ -1183,6 +1200,16 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
           );
           const anchoredReviews = inlineReviewsByAnchor.get(displayIndex);
 
+          const lineShadows: string[] = [];
+          if (isComposerSelected) {
+            lineShadows.push(reviewSelectionHighlight);
+          } else if (isRangeSelected) {
+            lineShadows.push(rangeSelectionHighlight);
+          }
+          if (isActiveLine) {
+            lineShadows.push(activeLineHighlight);
+          }
+
           // Each line renders as 3 CSS Grid cells: gutter | indicator | code
           // Use display:contents wrapper for selection state + group hover behavior
           return (
@@ -1190,9 +1217,18 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
               <div
                 className={cn(
                   SELECTABLE_DIFF_LINE_CLASS,
-                  "group relative col-span-3 grid cursor-text grid-cols-subgrid"
+                  "group relative col-span-3 grid grid-cols-subgrid",
+                  onLineIndexSelect ? "cursor-pointer" : "cursor-text"
                 )}
-                data-selected={isSelected ? "true" : "false"}
+                data-line-index={displayIndex}
+                data-selected={isComposerSelected || isRangeSelected ? "true" : "false"}
+                onClick={(e) => {
+                  if (!onLineIndexSelect) {
+                    return;
+                  }
+                  onLineClick?.();
+                  onLineIndexSelect(displayIndex, e.shiftKey);
+                }}
               >
                 <DiffLineGutter
                   type={lineInfo.type}
@@ -1207,7 +1243,7 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
                   type={lineInfo.type}
                   background={codeBg}
                   lineIndex={displayIndex}
-                  isInteractive={Boolean(onReviewNote)}
+                  isInteractive={Boolean(onReviewNote ?? onLineIndexSelect)}
                   onMouseDown={(e) => {
                     if (!onReviewNote) return;
                     if (e.button !== 0) return;
@@ -1248,14 +1284,14 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
                   style={{
                     background: codeBg,
                     color: getLineContentColor(lineInfo.type),
-                    boxShadow: isSelected ? selectionHighlight : undefined,
+                    boxShadow: lineShadows.length > 0 ? lineShadows.join(", ") : undefined,
                   }}
                   dangerouslySetInnerHTML={{ __html: lineInfo.html }}
                 />
               </div>
 
               {/* Show textarea after the last selected line */}
-              {isSelected &&
+              {isComposerSelected &&
                 selection &&
                 displayIndex === Math.max(selection.startIndex, selection.endIndex) && (
                   <ReviewNoteInput
diff --git a/src/browser/utils/review/quickReviewNotes.test.ts b/src/browser/utils/review/quickReviewNotes.test.ts
index 3b3be0097d..caf356cc19 100644
--- a/src/browser/utils/review/quickReviewNotes.test.ts
+++ b/src/browser/utils/review/quickReviewNotes.test.ts
@@ -1,6 +1,6 @@
 import { describe, test, expect } from "bun:test";
 import type { DiffHunk } from "@/common/types/review";
-import { buildQuickHunkReviewNote } from "./quickReviewNotes";
+import { buildQuickHunkReviewNote, buildQuickLineReviewNote } from "./quickReviewNotes";
 
 function makeHunk(overrides: Partial<DiffHunk> = {}): DiffHunk {
   return {
@@ -123,3 +123,100 @@ describe("buildQuickHunkReviewNote", () => {
     expect(note.selectedCode).not.toContain("const line15 = 15;");
   });
 });
+
+describe("buildQuickLineReviewNote", () => {
+  test("builds note data for a single selected line", () => {
+    const hunk = makeHunk({
+      content: "-const a = 1;\n+const a = 2;\n const b = a;",
+    });
+
+    const note = buildQuickLineReviewNote({
+      hunk,
+      startIndex: 1,
+      endIndex: 1,
+      userNote: "Use a constant here",
+    });
+
+    expect(note.lineRange).toBe("+10");
+    expect(note.selectedDiff).toBe("+const a = 2;");
+    expect(note.selectedCode).toContain("+ const a = 2;");
+    expect(note.oldStart).toBe(1);
+    expect(note.newStart).toBe(10);
+    expect(note.userNote).toBe("Use a constant here");
+  });
+
+  test("builds ranges from selected line span", () => {
+    const hunk = makeHunk({
+      oldStart: 50,
+      oldLines: 4,
+      newStart: 50,
+      newLines: 4,
+      content: "-const a = 1;\n+const a = 2;\n const b = 3;\n-console.log(a);\n+console.log(a, b);",
+      header: "@@ -50,4 +50,4 @@",
+    });
+
+    const note = buildQuickLineReviewNote({
+      hunk,
+      startIndex: 0,
+      endIndex: 2,
+      userNote: "Please revisit this block",
+    });
+
+    expect(note.lineRange).toBe("-50-51 +50-51");
+    expect(note.selectedDiff).toBe("-const a = 1;\n+const a = 2;\n const b = 3;");
+    expect(note.oldStart).toBe(50);
+    expect(note.newStart).toBe(50);
+  });
+
+  test("clamps out-of-bounds selection indices", () => {
+    const hunk = makeHunk({
+      content: "-old\n+new\n context",
+      oldStart: 7,
+      oldLines: 2,
+      newStart: 7,
+      newLines: 2,
+    });
+
+    const note = buildQuickLineReviewNote({
+      hunk,
+      startIndex: -50,
+      endIndex: 99,
+      userNote: "Clamp selection",
+    });
+
+    expect(note.lineRange).toBe("-7-8 +7-8");
+    expect(note.selectedDiff).toBe("-old\n+new\n context");
+  });
+
+  test("elides selectedCode for ranges longer than 20 lines", () => {
+    const content = Array.from(
+      { length: 30 },
+      (_, index) => `+const line${index + 1} = ${index + 1};`
+    ).join("\n");
+
+    const hunk = makeHunk({
+      oldStart: 1,
+      oldLines: 30,
+      newStart: 100,
+      newLines: 30,
+      content,
+      header: "@@ -1,30 +100,30 @@",
+    });
+
+    const note = buildQuickLineReviewNote({
+      hunk,
+      startIndex: 0,
+      endIndex: 29,
+      userNote: "Large range",
+    });
+
+    const selectedLines = note.selectedCode.split("\n");
+    expect(selectedLines).toHaveLength(21);
+    expect(note.selectedCode).toContain("(10 lines omitted)");
+    expect(note.selectedCode).toContain("const line1 = 1;");
+    expect(note.selectedCode).toContain("const line10 = 10;");
+    expect(note.selectedCode).toContain("const line21 = 21;");
+    expect(note.selectedCode).toContain("const line30 = 30;");
+    expect(note.selectedCode).not.toContain("const line11 = 11;");
+  });
+});
diff --git a/src/browser/utils/review/quickReviewNotes.ts b/src/browser/utils/review/quickReviewNotes.ts
index fc4ddc2906..88f040f23a 100644
--- a/src/browser/utils/review/quickReviewNotes.ts
+++ b/src/browser/utils/review/quickReviewNotes.ts
@@ -1,10 +1,166 @@
 /**
  * Utilities for building quick review notes from hunks in immersive mode.
- * These create whole-hunk ReviewNoteData for "I like this" / "I don't like this" actions.
+ *
+ * - buildQuickHunkReviewNote creates note data for an entire hunk.
+ * - buildQuickLineReviewNote creates note data for a selected line range in a hunk.
  */
 
 import type { DiffHunk, ReviewNoteData } from "@/common/types/review";
 
+const CONTEXT_LINES = 10;
+const MAX_FULL_LINES = CONTEXT_LINES * 2;
+
+interface QuickReviewLineData {
+  raw: string;
+  oldLineNum: number | null;
+  newLineNum: number | null;
+}
+
+function splitDiffLines(content: string): string[] {
+  const lines = content.split(/\r?\n/);
+  if (lines.length > 0 && lines[lines.length - 1] === "") {
+    lines.pop();
+  }
+  return lines;
+}
+
+function formatRange(nums: number[]): string | null {
+  if (nums.length === 0) {
+    return null;
+  }
+
+  const min = Math.min(...nums);
+  const max = Math.max(...nums);
+  return min === max ? `${min}` : `${min}-${max}`;
+}
+
+function buildLineDataForHunk(hunk: DiffHunk): QuickReviewLineData[] {
+  const lines = splitDiffLines(hunk.content);
+  const lineData: QuickReviewLineData[] = [];
+
+  let oldNum = hunk.oldStart;
+  let newNum = hunk.newStart;
+
+  for (const line of lines) {
+    if (line.startsWith("@@")) {
+      const headerMatch = /^@@\s+-(\d+)(?:,\d+)?\s+\+(\d+)(?:,\d+)?\s+@@/.exec(line);
+      if (headerMatch) {
+        oldNum = Number.parseInt(headerMatch[1], 10);
+        newNum = Number.parseInt(headerMatch[2], 10);
+      }
+      continue;
+    }
+
+    const indicator = line[0] ?? " ";
+    if (indicator === "+") {
+      lineData.push({ raw: line, oldLineNum: null, newLineNum: newNum });
+      newNum += 1;
+      continue;
+    }
+
+    if (indicator === "-") {
+      lineData.push({ raw: line, oldLineNum: oldNum, newLineNum: null });
+      oldNum += 1;
+      continue;
+    }
+
+    lineData.push({ raw: line, oldLineNum: oldNum, newLineNum: newNum });
+    oldNum += 1;
+    newNum += 1;
+  }
+
+  return lineData;
+}
+
+function buildRangeForSelectedLines(selectedLineData: QuickReviewLineData[]): string {
+  const oldLineNumbers = selectedLineData
+    .map((lineInfo) => lineInfo.oldLineNum)
+    .filter((lineNum): lineNum is number => lineNum !== null);
+  const newLineNumbers = selectedLineData
+    .map((lineInfo) => lineInfo.newLineNum)
+    .filter((lineNum): lineNum is number => lineNum !== null);
+
+  const oldRange = formatRange(oldLineNumbers);
+  const newRange = formatRange(newLineNumbers);
+
+  return [oldRange ? `-${oldRange}` : null, newRange ? `+${newRange}` : null]
+    .filter((part): part is string => part !== null)
+    .join(" ");
+}
+
+function formatSelectedCode(selectedLineData: QuickReviewLineData[]): string {
+  const oldLineNumbers = selectedLineData
+    .map((lineInfo) => lineInfo.oldLineNum)
+    .filter((lineNum): lineNum is number => lineNum !== null);
+  const newLineNumbers = selectedLineData
+    .map((lineInfo) => lineInfo.newLineNum)
+    .filter((lineNum): lineNum is number => lineNum !== null);
+
+  const oldWidth = Math.max(1, ...oldLineNumbers.map((lineNum) => String(lineNum).length));
+  const newWidth = Math.max(1, ...newLineNumbers.map((lineNum) => String(lineNum).length));
+
+  const allLines = selectedLineData.map((lineInfo) => {
+    const indicator = lineInfo.raw[0] ?? " ";
+    const content = lineInfo.raw.slice(1);
+    const oldStr = lineInfo.oldLineNum === null ? "" : String(lineInfo.oldLineNum);
+    const newStr = lineInfo.newLineNum === null ? "" : String(lineInfo.newLineNum);
+
+    return `${oldStr.padStart(oldWidth)} ${newStr.padStart(newWidth)} ${indicator} ${content}`;
+  });
+
+  if (allLines.length <= MAX_FULL_LINES) {
+    return allLines.join("\n");
+  }
+
+  const omittedCount = allLines.length - MAX_FULL_LINES;
+  return [
+    ...allLines.slice(0, CONTEXT_LINES),
+    `    (${omittedCount} lines omitted)`,
+    ...allLines.slice(-CONTEXT_LINES),
+  ].join("\n");
+}
+
+/**
+ * Build a ReviewNoteData from a selected line range in a hunk.
+ * Mirrors ReviewNoteInput formatting in DiffRenderer for consistent payloads.
+ */
+export function buildQuickLineReviewNote(params: {
+  hunk: DiffHunk;
+  startIndex: number;
+  endIndex: number;
+  userNote: string;
+}): ReviewNoteData {
+  const { hunk, startIndex, endIndex, userNote } = params;
+  const lineData = buildLineDataForHunk(hunk);
+
+  if (lineData.length === 0) {
+    return buildQuickHunkReviewNote({ hunk, userNote });
+  }
+
+  const requestedStart = Math.min(startIndex, endIndex);
+  const requestedEnd = Math.max(startIndex, endIndex);
+  const clampedStart = Math.max(0, Math.min(requestedStart, lineData.length - 1));
+  const clampedEnd = Math.max(clampedStart, Math.min(requestedEnd, lineData.length - 1));
+  const selectedLineData = lineData.slice(clampedStart, clampedEnd + 1);
+
+  const oldLineNumbers = selectedLineData
+    .map((lineInfo) => lineInfo.oldLineNum)
+    .filter((lineNum): lineNum is number => lineNum !== null);
+  const newLineNumbers = selectedLineData
+    .map((lineInfo) => lineInfo.newLineNum)
+    .filter((lineNum): lineNum is number => lineNum !== null);
+
+  return {
+    filePath: hunk.filePath,
+    lineRange: buildRangeForSelectedLines(selectedLineData),
+    selectedCode: formatSelectedCode(selectedLineData),
+    selectedDiff: selectedLineData.map((lineInfo) => lineInfo.raw).join("\n"),
+    oldStart: oldLineNumbers.length > 0 ? Math.min(...oldLineNumbers) : 1,
+    newStart: newLineNumbers.length > 0 ? Math.min(...newLineNumbers) : 1,
+    userNote,
+  };
+}
+
 /**
  * Build a ReviewNoteData for the entire hunk with a prefilled user note.
  * Used by the quick feedback actions in immersive review mode.
@@ -56,8 +212,6 @@ export function buildQuickHunkReviewNote(params: {
   });
 
   // Elide middle lines if more than 20
-  const CONTEXT_LINES = 10;
-  const MAX_FULL_LINES = CONTEXT_LINES * 2;
   let selectedCode: string;
   if (codeLines.length <= MAX_FULL_LINES) {
     selectedCode = codeLines.join("\n");
diff --git a/src/browser/utils/ui/keybinds.ts b/src/browser/utils/ui/keybinds.ts
index 212f0ed408..c325ac5abe 100644
--- a/src/browser/utils/ui/keybinds.ts
+++ b/src/browser/utils/ui/keybinds.ts
@@ -427,10 +427,10 @@ export const KEYBINDS = {
   TOGGLE_REVIEW_IMMERSIVE: { key: "i", shift: true },
 
   /** Navigate to next file in immersive review */
-  REVIEW_NEXT_FILE: { key: "J", shift: true },
+  REVIEW_NEXT_FILE: { key: "n" },
 
   /** Navigate to previous file in immersive review */
-  REVIEW_PREV_FILE: { key: "K", shift: true },
+  REVIEW_PREV_FILE: { key: "p" },
 
   /** Navigate to next hunk in immersive review */
   REVIEW_NEXT_HUNK: { key: "j" },
@@ -439,18 +439,18 @@ export const KEYBINDS = {
   REVIEW_PREV_HUNK: { key: "k" },
 
   /** Move line cursor down in immersive review */
-  REVIEW_CURSOR_DOWN: { key: "ArrowDown" },
+  REVIEW_CURSOR_DOWN: { key: "ArrowDown", allowShift: true },
 
   /** Move line cursor up in immersive review */
-  REVIEW_CURSOR_UP: { key: "ArrowUp" },
+  REVIEW_CURSOR_UP: { key: "ArrowUp", allowShift: true },
 
   /** Jump line cursor 10 lines down in immersive review */
-  REVIEW_CURSOR_JUMP_DOWN: { key: "ArrowDown", ctrl: true },
+  REVIEW_CURSOR_JUMP_DOWN: { key: "ArrowDown", ctrl: true, allowShift: true },
 
   /** Jump line cursor 10 lines up in immersive review */
-  REVIEW_CURSOR_JUMP_UP: { key: "ArrowUp", ctrl: true },
+  REVIEW_CURSOR_JUMP_UP: { key: "ArrowUp", ctrl: true, allowShift: true },
 
-  /** Quick "I like this" feedback in immersive review */
+  /** Add comment in immersive review (keeps legacy keybind ID to minimize churn) */
   REVIEW_QUICK_LIKE: { key: "l", shift: true },
 
   /** Quick "I don't like this" feedback in immersive review */

From 3c5d1e306d55e58c23c14d06b7569df4d6a7d9c2 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Tue, 17 Feb 2026 14:15:00 +0000
Subject: [PATCH 06/48] fix: global immersive shortcut and inline line comment
 composer

---
 src/browser/components/RightSidebar.tsx       |  40 +++++-
 .../CodeReview/ImmersiveReviewView.tsx        | 132 ++++--------------
 .../RightSidebar/CodeReview/ReviewPanel.tsx   |   8 +-
 .../components/shared/DiffRenderer.tsx        |  41 +++++-
 4 files changed, 109 insertions(+), 112 deletions(-)

diff --git a/src/browser/components/RightSidebar.tsx b/src/browser/components/RightSidebar.tsx
index e09394ffc5..ff52276d6a 100644
--- a/src/browser/components/RightSidebar.tsx
+++ b/src/browser/components/RightSidebar.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import {
   RIGHT_SIDEBAR_COLLAPSED_KEY,
   RIGHT_SIDEBAR_TAB_KEY,
+  getReviewImmersiveKey,
   getRightSidebarLayoutKey,
   getTerminalTitlesKey,
 } from "@/common/constants/storage";
@@ -20,7 +21,13 @@ import { ErrorBoundary } from "./ErrorBoundary";
 import { StatsTab } from "./RightSidebar/StatsTab";
 import { OutputTab } from "./OutputTab";
 
-import { matchesKeybind, KEYBINDS, formatKeybind, isDialogOpen } from "@/browser/utils/ui/keybinds";
+import {
+  matchesKeybind,
+  KEYBINDS,
+  formatKeybind,
+  isDialogOpen,
+  isEditableElement,
+} from "@/browser/utils/ui/keybinds";
 import { SidebarCollapseButton } from "./ui/SidebarCollapseButton";
 import { cn } from "@/common/lib/utils";
 import type { ReviewNoteData } from "@/common/types/review";
@@ -51,6 +58,7 @@ import {
   removeTabEverywhere,
   reorderTabInTabset,
   selectTabByIndex,
+  selectOrAddTab,
   selectTabInTabset,
   setFocusedTabset,
   updateSplitSizes,
@@ -611,6 +619,11 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
   const [collapsed, setCollapsed] = usePersistedState<boolean>(RIGHT_SIDEBAR_COLLAPSED_KEY, false, {
     listener: true,
   });
+  const [isReviewImmersive, setIsReviewImmersive] = usePersistedState<boolean>(
+    getReviewImmersiveKey(workspaceId),
+    false,
+    { listener: true }
+  );
 
   // Stats tab feature flag
   const { statsTabState } = useFeatureFlags();
@@ -735,6 +748,11 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
     [initialActiveTab, setLayoutRaw]
   );
 
+  const selectOrOpenReviewTab = React.useCallback(() => {
+    setLayout((prev) => selectOrAddTab(prev, "review"));
+    _setFocusTrigger((prev) => prev + 1);
+  }, [setLayout]);
+
   // Keyboard shortcuts for tab switching by position (Cmd/Ctrl+1-9)
   // Auto-expands sidebar if collapsed
   React.useEffect(() => {
@@ -783,6 +801,26 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [initialActiveTab, setAutoFocusTerminalSession, setCollapsed, setLayout, _setFocusTrigger]);
 
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!matchesKeybind(e, KEYBINDS.TOGGLE_REVIEW_IMMERSIVE)) {
+        return;
+      }
+
+      if (isEditableElement(e.target)) {
+        return;
+      }
+
+      e.preventDefault();
+      setCollapsed(false);
+      selectOrOpenReviewTab();
+      setIsReviewImmersive(!isReviewImmersive);
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isReviewImmersive, selectOrOpenReviewTab, setCollapsed, setIsReviewImmersive]);
+
   const baseId = `right-sidebar-${workspaceId}`;
 
   // Build map of tab → position for keybind tooltips
diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index 967aef6e92..75c5e53991 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -22,9 +22,7 @@ import {
   getAdjacentFilePath,
   getFileHunks,
 } from "@/browser/utils/review/navigation";
-import { buildQuickLineReviewNote } from "@/browser/utils/review/quickReviewNotes";
 import { isEditableElement, KEYBINDS, matchesKeybind } from "@/browser/utils/ui/keybinds";
-import { stopKeyboardPropagation } from "@/browser/utils/events";
 import { formatRelativeTime } from "@/browser/utils/ui/dateTime";
 import type { DiffHunk, Review, ReviewNoteData } from "@/common/types/review";
 import type { FileTreeNode } from "@/common/utils/git/numstatParser";
@@ -49,8 +47,8 @@ interface ImmersiveReviewViewProps {
   firstSeenMap: Record<string, number>;
 }
 
-/** Quick feedback composer state */
-interface ComposerState {
+interface InlineComposerRequest {
+  requestId: number;
   prefill: string;
   hunkId: string;
   startIndex: number;
@@ -87,18 +85,9 @@ function countHunkChanges(hunk: DiffHunk): {
 
 export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) => {
   const containerRef = useRef<HTMLDivElement>(null);
-  const composerRef = useRef<HTMLTextAreaElement>(null);
 
-  const {
-    fileTree,
-    hunks,
-    allHunks,
-    selectedHunkId,
-    onSelectHunk,
-    onToggleRead,
-    onExit,
-    onReviewNote,
-  } = props;
+  const { fileTree, hunks, selectedHunkId, onSelectHunk, onToggleRead, onExit, onReviewNote } =
+    props;
 
   // Flatten file tree into ordered file list
   const fileList = useMemo(() => flattenFileTreeLeaves(fileTree), [fileTree]);
@@ -148,9 +137,10 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     }
   }, [currentFileHunks, selectedHunkId, onSelectHunk]);
 
-  // Quick feedback composer
-  const [composer, setComposer] = useState<ComposerState | null>(null);
-  const [composerText, setComposerText] = useState("");
+  const [inlineComposerRequest, setInlineComposerRequest] = useState<InlineComposerRequest | null>(
+    null
+  );
+  const nextComposerRequestIdRef = useRef(0);
 
   // Keyboard line cursor state (scoped to the currently selected hunk)
   const [activeLineIndex, setActiveLineIndex] = useState<number | null>(null);
@@ -236,45 +226,18 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
         return;
       }
 
-      setComposer({
+      nextComposerRequestIdRef.current += 1;
+      setInlineComposerRequest({
+        requestId: nextComposerRequestIdRef.current,
         prefill,
         hunkId: selectedHunk.id,
         startIndex: selection.startIndex,
         endIndex: selection.endIndex,
       });
-      setComposerText(prefill);
     },
-    [selectedHunk, getCurrentLineSelection]
+    [getCurrentLineSelection, selectedHunk]
   );
 
-  const submitComposer = useCallback(() => {
-    if (!composer || !composerText.trim()) return;
-
-    // Use allHunks (unfiltered) so submission works even if the hunk was filtered out during editing
-    const hunk = allHunks.find((item) => item.id === composer.hunkId);
-    if (!hunk || !onReviewNote) return;
-
-    const noteData = buildQuickLineReviewNote({
-      hunk,
-      startIndex: composer.startIndex,
-      endIndex: composer.endIndex,
-      userNote: composerText.trim(),
-    });
-
-    onReviewNote(noteData);
-
-    setComposer(null);
-    setComposerText("");
-    // Restore focus to container
-    containerRef.current?.focus();
-  }, [composer, composerText, allHunks, onReviewNote]);
-
-  const cancelComposer = useCallback(() => {
-    setComposer(null);
-    setComposerText("");
-    containerRef.current?.focus();
-  }, []);
-
   const moveLineCursor = useCallback(
     (delta: number, extendRange: boolean) => {
       if (!selectedHunk || selectedHunkLineCount === 0) {
@@ -321,14 +284,6 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     [selectedHunkId, onSelectHunk, selectedLineRange, activeLineIndex]
   );
 
-  // Focus composer when it opens
-  useEffect(() => {
-    if (composer) {
-      composerRef.current?.focus();
-      composerRef.current?.select();
-    }
-  }, [composer]);
-
   // Auto-focus container on mount
   useEffect(() => {
     containerRef.current?.focus();
@@ -337,7 +292,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
   // --- Keyboard handler ---
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
-      // Don't intercept when typing in composer or other editable elements
+      // Don't intercept when typing in editable elements
       if (isEditableElement(e.target)) return;
 
       // Esc: exit immersive
@@ -556,51 +511,6 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
         )}
       </div>
 
-      {/* Quick feedback composer */}
-      {composer && (
-        <div className="border-border-light bg-dark border-b px-3 py-2">
-          <div className="flex items-center gap-2">
-            <div
-              className="flex flex-1 overflow-hidden rounded border border-[var(--color-review-accent)]/30"
-              style={{
-                background: "hsl(from var(--color-review-accent) h s l / 0.08)",
-              }}
-            >
-              <div
-                className="w-[3px] shrink-0"
-                style={{ background: "var(--color-review-accent)" }}
-              />
-              <textarea
-                ref={composerRef}
-                className="text-primary placeholder:text-muted/70 min-w-0 flex-1 resize-none bg-transparent px-2 py-1.5 text-[12px] leading-[1.5] focus:outline-none"
-                style={{ minHeight: "calc(12px * 1.5 + 12px)" }}
-                value={composerText}
-                onChange={(e) => setComposerText(e.target.value)}
-                onKeyDown={(e) => {
-                  stopKeyboardPropagation(e);
-                  if (e.key === "Enter" && !e.shiftKey) {
-                    e.preventDefault();
-                    submitComposer();
-                  } else if (e.key === "Escape") {
-                    e.preventDefault();
-                    cancelComposer();
-                  }
-                }}
-                placeholder="Add your note... (Enter to submit, Esc to cancel)"
-              />
-            </div>
-            <button
-              type="button"
-              onClick={submitComposer}
-              className="text-muted hover:text-primary shrink-0 cursor-pointer border-none bg-transparent px-1 text-xs"
-              aria-label="Submit review note"
-            >
-              ↵
-            </button>
-          </div>
-        </div>
-      )}
-
       {/* File hunks (always expanded, grouped by file) */}
       <div className="flex-1 overflow-y-auto p-3">
         {currentFileHunks.length === 0 ? (
@@ -675,12 +585,26 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
                     fontSize="11px"
                     maxHeight="none"
                     className="rounded-none border-0 [&>div]:overflow-x-visible"
+                    onReviewNote={onReviewNote}
+                    onLineClick={() => onSelectHunk(hunk.id)}
                     reviewActions={props.reviewActions}
                     activeLineIndex={isSelected ? activeLineIndex : null}
                     selectedLineRange={isSelected ? selectedLineRange : null}
                     onLineIndexSelect={(lineIndex, shiftKey) =>
                       handleLineIndexSelect(hunk.id, lineIndex, shiftKey)
                     }
+                    externalSelectionRequest={
+                      isSelected && inlineComposerRequest?.hunkId === hunk.id
+                        ? {
+                            requestId: inlineComposerRequest.requestId,
+                            selection: {
+                              startIndex: inlineComposerRequest.startIndex,
+                              endIndex: inlineComposerRequest.endIndex,
+                            },
+                            initialNoteText: inlineComposerRequest.prefill,
+                          }
+                        : null
+                    }
                   />
                 </section>
               );
@@ -700,7 +624,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
         <KeycapGroup keys={["m"]} label="read" />
         <KeycapGroup keys={["Shift", "l"]} label="comment" />
         <KeycapGroup keys={["Shift", "d"]} label="dislike" />
-        {composer && <KeycapGroup keys={["Enter"]} label="submit" />}
+        <KeycapGroup keys={["Enter"]} label="submit" />
       </div>
     </div>
   );
diff --git a/src/browser/components/RightSidebar/CodeReview/ReviewPanel.tsx b/src/browser/components/RightSidebar/CodeReview/ReviewPanel.tsx
index d27ebbbdfb..dfe9102a52 100644
--- a/src/browser/components/RightSidebar/CodeReview/ReviewPanel.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ReviewPanel.tsx
@@ -1157,7 +1157,7 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
     isImmersive,
   ]);
 
-  // Global keyboard shortcuts (refresh/search/immersive toggle)
+  // Global keyboard shortcuts (refresh/search)
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (matchesKeybind(e, KEYBINDS.REFRESH_REVIEW)) {
@@ -1170,16 +1170,12 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
         if (isEditableElement(e.target)) return;
         e.preventDefault();
         searchInputRef.current?.focus();
-      } else if (matchesKeybind(e, KEYBINDS.TOGGLE_REVIEW_IMMERSIVE)) {
-        if (isEditableElement(e.target)) return;
-        e.preventDefault();
-        setIsImmersive((prev) => !prev);
       }
     };
 
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [setIsImmersive]);
+  }, []);
 
   const isNonGitWorkspace =
     diffState.status === "error" &&
diff --git a/src/browser/components/shared/DiffRenderer.tsx b/src/browser/components/shared/DiffRenderer.tsx
index dd185a0e28..53ea6a36b4 100644
--- a/src/browser/components/shared/DiffRenderer.tsx
+++ b/src/browser/components/shared/DiffRenderer.tsx
@@ -647,6 +647,12 @@ interface SelectableDiffRendererProps extends Omit<DiffRendererProps, "filePath"
   selectedLineRange?: LineSelection | null;
   /** Called when user selects a line via click in immersive mode */
   onLineIndexSelect?: (lineIndex: number, shiftKey: boolean) => void;
+  /** External request to open/update inline composer at a specific line selection */
+  externalSelectionRequest?: {
+    requestId: number;
+    selection: LineSelection;
+    initialNoteText?: string;
+  } | null;
 }
 
 interface LineSelection {
@@ -673,6 +679,7 @@ interface ReviewNoteInputProps {
   lineNumberWidths: { oldWidthCh: number; newWidthCh: number };
   onSubmit: (data: ReviewNoteData) => void;
   onCancel: () => void;
+  initialNoteText?: string;
 }
 
 const ReviewNoteInput: React.FC<ReviewNoteInputProps> = React.memo(
@@ -685,9 +692,10 @@ const ReviewNoteInput: React.FC<ReviewNoteInputProps> = React.memo(
     lineNumberWidths,
     onSubmit,
     onCancel,
+    initialNoteText,
   }) => {
     const { showOld, showNew } = getLineNumberModeFlags(lineNumberMode);
-    const [noteText, setNoteText] = React.useState("");
+    const [noteText, setNoteText] = React.useState(initialNoteText ?? "");
     const textareaRef = React.useRef<HTMLTextAreaElement>(null);
 
     // Auto-focus on mount
@@ -695,6 +703,10 @@ const ReviewNoteInput: React.FC<ReviewNoteInputProps> = React.memo(
       textareaRef.current?.focus();
     }, []);
 
+    React.useEffect(() => {
+      setNoteText(initialNoteText ?? "");
+    }, [initialNoteText]);
+
     // Auto-expand textarea as user types
     React.useEffect(() => {
       const textarea = textareaRef.current;
@@ -940,6 +952,7 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
     activeLineIndex,
     selectedLineRange,
     onLineIndexSelect,
+    externalSelectionRequest,
   }) => {
     const dragAnchorRef = React.useRef<number | null>(null);
     const [isDragging, setIsDragging] = React.useState(false);
@@ -960,6 +973,26 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
     }, []);
     const { theme } = useTheme();
     const [selection, setSelection] = React.useState<LineSelection | null>(null);
+    const [selectionInitialNoteText, setSelectionInitialNoteText] = React.useState("");
+
+    const lastExternalSelectionRequestIdRef = React.useRef<number | null>(null);
+
+    React.useEffect(() => {
+      if (!externalSelectionRequest) {
+        return;
+      }
+
+      if (lastExternalSelectionRequestIdRef.current === externalSelectionRequest.requestId) {
+        return;
+      }
+
+      lastExternalSelectionRequestIdRef.current = externalSelectionRequest.requestId;
+      setSelection({
+        startIndex: externalSelectionRequest.selection.startIndex,
+        endIndex: externalSelectionRequest.selection.endIndex,
+      });
+      setSelectionInitialNoteText(externalSelectionRequest.initialNoteText ?? "");
+    }, [externalSelectionRequest]);
 
     // Notify parent when composition state changes
     React.useEffect(() => {
@@ -1112,6 +1145,7 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
         const anchor = shiftKey && selection ? selection.startIndex : lineIndex;
         dragAnchorRef.current = anchor;
         setIsDragging(true);
+        setSelectionInitialNoteText("");
         setSelection({ startIndex: anchor, endIndex: lineIndex });
       },
       [onLineClick, onReviewNote, selection]
@@ -1135,6 +1169,7 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
       // Shift-click: extend existing selection
       if (shiftKey && selection) {
         const start = selection.startIndex;
+        setSelectionInitialNoteText("");
         setSelection({
           startIndex: start,
           endIndex: lineIndex,
@@ -1143,6 +1178,7 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
       }
 
       // Regular click: start new selection
+      setSelectionInitialNoteText("");
       setSelection({
         startIndex: lineIndex,
         endIndex: lineIndex,
@@ -1153,10 +1189,12 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
       if (!onReviewNote) return;
       onReviewNote(data);
       setSelection(null);
+      setSelectionInitialNoteText("");
     };
 
     const handleCancelNote = () => {
       setSelection(null);
+      setSelectionInitialNoteText("");
     };
 
     const isLineInSelection = (index: number, lineSelection: LineSelection | null | undefined) => {
@@ -1303,6 +1341,7 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
                     lineNumberWidths={lineNumberWidths}
                     onSubmit={handleSubmitNote}
                     onCancel={handleCancelNote}
+                    initialNoteText={selectionInitialNoteText}
                   />
                 )}
 

From 6b6abd73cb42332028fec0e4c4b5e5d9145357cc Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Tue, 17 Feb 2026 14:40:44 +0000
Subject: [PATCH 07/48] feat: render immersive review as whole-file overlay and
 reverse hunk keys

---
 .../CodeReview/ImmersiveReviewView.tsx        | 525 ++++++++++++------
 src/browser/utils/ui/keybinds.ts              |   4 +-
 2 files changed, 371 insertions(+), 158 deletions(-)

diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index 75c5e53991..ab9d918846 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -17,13 +17,14 @@ import {
 import { cn } from "@/common/lib/utils";
 import { SelectableDiffRenderer } from "../../shared/DiffRenderer";
 import { KeycapGroup } from "@/browser/components/ui/Keycap";
+import { useAPI } from "@/browser/contexts/API";
 import {
   flattenFileTreeLeaves,
   getAdjacentFilePath,
   getFileHunks,
 } from "@/browser/utils/review/navigation";
 import { isEditableElement, KEYBINDS, matchesKeybind } from "@/browser/utils/ui/keybinds";
-import { formatRelativeTime } from "@/browser/utils/ui/dateTime";
+import { buildReadFileScript, processFileContents } from "@/browser/utils/fileExplorer";
 import type { DiffHunk, Review, ReviewNoteData } from "@/common/types/review";
 import type { FileTreeNode } from "@/common/utils/git/numstatParser";
 import type { ReviewActionCallbacks } from "../../shared/InlineReviewNote";
@@ -60,6 +61,17 @@ interface SelectedLineRange {
   endIndex: number;
 }
 
+interface HunkLineRange {
+  startIndex: number;
+  endIndex: number;
+}
+
+interface ImmersiveOverlayData {
+  content: string;
+  lineHunkIds: Array<string | null>;
+  hunkLineRanges: Map<string, HunkLineRange>;
+}
+
 const LINE_JUMP_SIZE = 10;
 
 function splitDiffLines(content: string): string[] {
@@ -70,21 +82,141 @@ function splitDiffLines(content: string): string[] {
   return lines;
 }
 
-function countHunkChanges(hunk: DiffHunk): {
-  additions: number;
-  deletions: number;
-  lineCount: number;
-} {
-  const lines = splitDiffLines(hunk.content);
+function normalizeFileLines(content: string): string[] {
+  const lines = content.split("\n");
+  return lines.filter((line, idx) => idx < lines.length - 1 || line !== "");
+}
+
+function sortHunksInFileOrder(hunks: DiffHunk[]): DiffHunk[] {
+  return [...hunks].sort((a, b) => {
+    const newStartDelta = a.newStart - b.newStart;
+    if (newStartDelta !== 0) {
+      return newStartDelta;
+    }
+
+    const oldStartDelta = a.oldStart - b.oldStart;
+    if (oldStartDelta !== 0) {
+      return oldStartDelta;
+    }
+
+    return a.id.localeCompare(b.id);
+  });
+}
+
+function buildOverlayFromFileContent(
+  fileContent: string,
+  sortedHunks: DiffHunk[]
+): ImmersiveOverlayData {
+  const fileLines = normalizeFileLines(fileContent);
+  const contentLines: string[] = [];
+  const lineHunkIds: Array<string | null> = [];
+  const hunkLineRanges = new Map<string, HunkLineRange>();
+
+  let newLineIdx = 0;
+
+  const pushDisplayLine = (line: string, hunkId: string | null) => {
+    contentLines.push(line);
+    lineHunkIds.push(hunkId);
+  };
+
+  for (const hunk of sortedHunks) {
+    const hunkStartInNew = Math.max(0, hunk.newStart - 1);
+
+    while (newLineIdx < hunkStartInNew && newLineIdx < fileLines.length) {
+      pushDisplayLine(` ${fileLines[newLineIdx]}`, null);
+      newLineIdx += 1;
+    }
+
+    const hunkStartIndex = lineHunkIds.length;
+
+    for (const line of splitDiffLines(hunk.content)) {
+      const prefix = line[0] ?? " ";
+      if (prefix !== "+" && prefix !== "-" && prefix !== " ") {
+        continue;
+      }
+
+      pushDisplayLine(`${prefix}${line.slice(1)}`, hunk.id);
+      if (prefix !== "-") {
+        newLineIdx += 1;
+      }
+    }
+
+    if (lineHunkIds.length > hunkStartIndex) {
+      hunkLineRanges.set(hunk.id, {
+        startIndex: hunkStartIndex,
+        endIndex: lineHunkIds.length - 1,
+      });
+    }
+  }
+
+  while (newLineIdx < fileLines.length) {
+    pushDisplayLine(` ${fileLines[newLineIdx]}`, null);
+    newLineIdx += 1;
+  }
+
+  return {
+    content: contentLines.join("\n"),
+    lineHunkIds,
+    hunkLineRanges,
+  };
+}
+
+function buildOverlayFromHunks(sortedHunks: DiffHunk[]): ImmersiveOverlayData {
+  const contentLines: string[] = [];
+  const lineHunkIds: Array<string | null> = [];
+  const hunkLineRanges = new Map<string, HunkLineRange>();
+
+  const pushDisplayLine = (line: string, hunkId: string | null) => {
+    contentLines.push(line);
+    lineHunkIds.push(hunkId);
+  };
+
+  const pushHeaderLine = (line: string) => {
+    contentLines.push(line);
+  };
+
+  sortedHunks.forEach((hunk, index) => {
+    if (index > 0) {
+      pushDisplayLine(" ", null);
+    }
+
+    pushHeaderLine(`@@ -${hunk.oldStart},${hunk.oldLines} +${hunk.newStart},${hunk.newLines} @@`);
+
+    const hunkStartIndex = lineHunkIds.length;
+
+    for (const line of splitDiffLines(hunk.content)) {
+      const prefix = line[0] ?? " ";
+      if (prefix !== "+" && prefix !== "-" && prefix !== " ") {
+        continue;
+      }
+
+      pushDisplayLine(`${prefix}${line.slice(1)}`, hunk.id);
+    }
+
+    if (lineHunkIds.length > hunkStartIndex) {
+      hunkLineRanges.set(hunk.id, {
+        startIndex: hunkStartIndex,
+        endIndex: lineHunkIds.length - 1,
+      });
+    }
+  });
+
   return {
-    additions: lines.filter((line) => line.startsWith("+")).length,
-    deletions: lines.filter((line) => line.startsWith("-")).length,
-    lineCount: lines.length,
+    content: contentLines.join("\n"),
+    lineHunkIds,
+    hunkLineRanges,
   };
 }
 
+function isSelectionInsideRange(selection: SelectedLineRange, range: HunkLineRange): boolean {
+  const start = Math.min(selection.startIndex, selection.endIndex);
+  const end = Math.max(selection.startIndex, selection.endIndex);
+  return start >= range.startIndex && end <= range.endIndex;
+}
+
 export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) => {
   const containerRef = useRef<HTMLDivElement>(null);
+  const { api } = useAPI();
 
   const { fileTree, hunks, selectedHunkId, onSelectHunk, onToggleRead, onExit, onReviewNote } =
     props;
@@ -104,9 +236,9 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     return null;
   }, [selectedHunkId, hunks, fileList]);
 
-  // Hunks for the active file only
+  // Hunks for the active file only, always sorted in file order
   const currentFileHunks = useMemo(
-    () => (activeFilePath ? getFileHunks(hunks, activeFilePath) : []),
+    () => (activeFilePath ? sortHunksInFileOrder(getFileHunks(hunks, activeFilePath)) : []),
     [hunks, activeFilePath]
   );
 
@@ -121,11 +253,6 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     return currentFileHunks[0] ?? null;
   }, [selectedHunkId, currentFileHunks]);
 
-  const selectedHunkLineCount = useMemo(
-    () => (selectedHunk ? splitDiffLines(selectedHunk.content).length : 0),
-    [selectedHunk]
-  );
-
   // Ensure we always have a selected hunk when the active file has hunks.
   useEffect(() => {
     if (currentFileHunks.length === 0) {
@@ -137,26 +264,133 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     }
   }, [currentFileHunks, selectedHunkId, onSelectHunk]);
 
+  const [activeFileContent, setActiveFileContent] = useState<string | null>(null);
+
+  // Load full file content so immersive mode can render one coherent file with hunk overlays.
+  useEffect(() => {
+    const apiClient = api;
+    const filePath = activeFilePath;
+
+    if (!filePath || !apiClient) {
+      setActiveFileContent(null);
+      return;
+    }
+
+    const resolvedApi: NonNullable<typeof api> = apiClient;
+    const resolvedFilePath: string = filePath;
+
+    let cancelled = false;
+    setActiveFileContent(null);
+
+    async function loadActiveFileContent() {
+      try {
+        const fileResult = await resolvedApi.workspace.executeBash({
+          workspaceId: props.workspaceId,
+          script: buildReadFileScript(resolvedFilePath),
+        });
+
+        if (cancelled) {
+          return;
+        }
+
+        if (!fileResult.success) {
+          setActiveFileContent(null);
+          return;
+        }
+
+        const bashResult = fileResult.data;
+
+        if (!bashResult.success && !bashResult.output) {
+          setActiveFileContent(null);
+          return;
+        }
+
+        const data = processFileContents(bashResult.output ?? "", bashResult.exitCode);
+        setActiveFileContent(data.type === "text" ? data.content : null);
+      } catch {
+        if (!cancelled) {
+          setActiveFileContent(null);
+        }
+      }
+    }
+
+    void loadActiveFileContent();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [api, props.workspaceId, activeFilePath]);
+
+  const overlayData = useMemo<ImmersiveOverlayData>(() => {
+    if (currentFileHunks.length === 0) {
+      return {
+        content: "",
+        lineHunkIds: [],
+        hunkLineRanges: new Map<string, HunkLineRange>(),
+      };
+    }
+
+    if (activeFileContent != null) {
+      return buildOverlayFromFileContent(activeFileContent, currentFileHunks);
+    }
+
+    return buildOverlayFromHunks(currentFileHunks);
+  }, [activeFileContent, currentFileHunks]);
+
+  const selectedHunkRange = useMemo(
+    () => (selectedHunk ? (overlayData.hunkLineRanges.get(selectedHunk.id) ?? null) : null),
+    [selectedHunk, overlayData]
+  );
+
+  const selectedHunkLineCount = selectedHunkRange
+    ? selectedHunkRange.endIndex - selectedHunkRange.startIndex + 1
+    : 0;
+
   const [inlineComposerRequest, setInlineComposerRequest] = useState<InlineComposerRequest | null>(
     null
   );
   const nextComposerRequestIdRef = useRef(0);
 
-  // Keyboard line cursor state (scoped to the currently selected hunk)
+  // Keyboard line cursor state within the whole rendered file.
   const [activeLineIndex, setActiveLineIndex] = useState<number | null>(null);
   const [selectedLineRange, setSelectedLineRange] = useState<SelectedLineRange | null>(null);
 
-  // Reset line cursor when hunk changes.
+  // Keep cursor and selection aligned to the selected hunk when hunk navigation changes.
   useEffect(() => {
-    if (!selectedHunk || selectedHunkLineCount === 0) {
+    if (!selectedHunkRange) {
       setActiveLineIndex(null);
       setSelectedLineRange(null);
       return;
     }
 
-    setActiveLineIndex(0);
-    setSelectedLineRange(null);
-  }, [selectedHunk, selectedHunkLineCount]);
+    setActiveLineIndex((previousLineIndex) => {
+      if (
+        previousLineIndex !== null &&
+        previousLineIndex >= selectedHunkRange.startIndex &&
+        previousLineIndex <= selectedHunkRange.endIndex
+      ) {
+        return previousLineIndex;
+      }
+      return selectedHunkRange.startIndex;
+    });
+
+    setSelectedLineRange((previousSelection) => {
+      if (!previousSelection) {
+        return null;
+      }
+
+      if (isSelectionInsideRange(previousSelection, selectedHunkRange)) {
+        return previousSelection;
+      }
+
+      return null;
+    });
+  }, [
+    selectedHunk?.id,
+    selectedHunkRange?.startIndex,
+    selectedHunkRange?.endIndex,
+    selectedHunkRange,
+  ]);
 
   // File index for display
   const fileIndex = activeFilePath ? fileList.indexOf(activeFilePath) : -1;
@@ -171,7 +405,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
       if (!nextFile || nextFile === activeFilePath) return;
 
       // Select first hunk in the new file
-      const fileHunks = getFileHunks(hunks, nextFile);
+      const fileHunks = sortHunksInFileOrder(getFileHunks(hunks, nextFile));
       if (fileHunks.length > 0) {
         onSelectHunk(fileHunks[0].id);
       }
@@ -215,14 +449,22 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     };
   }, [activeLineIndex, selectedLineRange]);
 
+  const selectedLineSummary = getCurrentLineSelection();
+
+  const selectionInSelectedHunk = Boolean(
+    selectedLineSummary &&
+    selectedHunkRange &&
+    isSelectionInsideRange(selectedLineSummary, selectedHunkRange)
+  );
+
   const openComposer = useCallback(
     (prefill: string) => {
-      if (!selectedHunk) {
+      if (!selectedHunk || !selectedHunkRange) {
         return;
       }
 
       const selection = getCurrentLineSelection();
-      if (!selection) {
+      if (!selection || !isSelectionInsideRange(selection, selectedHunkRange)) {
         return;
       }
 
@@ -235,38 +477,48 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
         endIndex: selection.endIndex,
       });
     },
-    [getCurrentLineSelection, selectedHunk]
+    [getCurrentLineSelection, selectedHunk, selectedHunkRange]
   );
 
   const moveLineCursor = useCallback(
     (delta: number, extendRange: boolean) => {
-      if (!selectedHunk || selectedHunkLineCount === 0) {
+      const lineCount = overlayData.lineHunkIds.length;
+      if (lineCount === 0) {
         return;
       }
 
-      const currentIndex = activeLineIndex ?? 0;
-      const nextIndex = Math.max(0, Math.min(selectedHunkLineCount - 1, currentIndex + delta));
+      const currentIndex = activeLineIndex ?? selectedHunkRange?.startIndex ?? 0;
+      const nextIndex = Math.max(0, Math.min(lineCount - 1, currentIndex + delta));
 
       setActiveLineIndex(nextIndex);
 
       if (extendRange) {
         const anchorIndex = selectedLineRange?.startIndex ?? currentIndex;
         setSelectedLineRange({ startIndex: anchorIndex, endIndex: nextIndex });
-        return;
+      } else {
+        setSelectedLineRange(null);
       }
 
-      setSelectedLineRange(null);
+      const lineHunkId = overlayData.lineHunkIds[nextIndex];
+      if (lineHunkId && lineHunkId !== selectedHunkId) {
+        onSelectHunk(lineHunkId);
+      }
     },
-    [selectedHunk, selectedHunkLineCount, activeLineIndex, selectedLineRange]
+    [
+      overlayData.lineHunkIds,
+      activeLineIndex,
+      selectedHunkRange?.startIndex,
+      selectedLineRange,
+      selectedHunkId,
+      onSelectHunk,
+    ]
   );
 
   const handleLineIndexSelect = useCallback(
-    (hunkId: string, lineIndex: number, shiftKey: boolean) => {
-      if (selectedHunkId !== hunkId) {
-        onSelectHunk(hunkId);
-        setActiveLineIndex(lineIndex);
-        setSelectedLineRange(null);
-        return;
+    (lineIndex: number, shiftKey: boolean) => {
+      const lineHunkId = overlayData.lineHunkIds[lineIndex];
+      if (lineHunkId && selectedHunkId !== lineHunkId) {
+        onSelectHunk(lineHunkId);
       }
 
       const anchorIndex = shiftKey
@@ -276,12 +528,11 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
 
       if (shiftKey) {
         setSelectedLineRange({ startIndex: anchorIndex, endIndex: lineIndex });
-        return;
+      } else {
+        setSelectedLineRange(null);
       }
-
-      setSelectedLineRange(null);
     },
-    [selectedHunkId, onSelectHunk, selectedLineRange, activeLineIndex]
+    [overlayData.lineHunkIds, selectedHunkId, onSelectHunk, selectedLineRange, activeLineIndex]
   );
 
   // Auto-focus container on mount
@@ -314,7 +565,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
         return;
       }
 
-      // j/k: next/prev hunk
+      // k/j: next/prev hunk
       if (matchesKeybind(e, KEYBINDS.REVIEW_NEXT_HUNK)) {
         e.preventDefault();
         navigateHunk(1);
@@ -381,35 +632,37 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     onToggleRead,
   ]);
 
-  // Scroll selected hunk into view
-  useEffect(() => {
-    if (!selectedHunkId) return;
-    const element = document.querySelector(
-      `[data-testid="review-immersive-root"] [data-hunk-id="${selectedHunkId}"]`
-    );
-    // Use "auto" instead of "smooth" for keyboard nav — smooth creates queued animations during rapid j/k
-    element?.scrollIntoView({ behavior: "auto", block: "nearest" });
-  }, [selectedHunkId]);
-
   // Keep the active line visible while moving with keyboard shortcuts.
   useEffect(() => {
-    if (!selectedHunkId || activeLineIndex === null) {
+    if (activeLineIndex === null) {
       return;
     }
 
     const lineElement = document.querySelector(
-      `[data-testid="review-immersive-root"] [data-hunk-id="${selectedHunkId}"] [data-line-index="${activeLineIndex}"]`
+      `[data-testid="review-immersive-root"] [data-line-index="${activeLineIndex}"]`
     );
     lineElement?.scrollIntoView({ behavior: "auto", block: "nearest" });
-  }, [selectedHunkId, activeLineIndex]);
+  }, [activeLineIndex]);
 
   const currentHunkIdx = selectedHunkId
     ? currentFileHunks.findIndex((hunk) => hunk.id === selectedHunkId)
     : -1;
 
-  const selectedLineSummary = getCurrentLineSelection();
+  const selectedLineSummaryLabel = useMemo(() => {
+    if (!selectedLineSummary) {
+      return "–";
+    }
+
+    if (!selectedHunkRange || !isSelectionInsideRange(selectedLineSummary, selectedHunkRange)) {
+      return `${selectedLineSummary.startIndex + 1}-${selectedLineSummary.endIndex + 1}`;
+    }
+
+    const relativeStart = selectedLineSummary.startIndex - selectedHunkRange.startIndex + 1;
+    const relativeEnd = selectedLineSummary.endIndex - selectedHunkRange.startIndex + 1;
+    return `${relativeStart}-${relativeEnd}`;
+  }, [selectedLineSummary, selectedHunkRange]);
 
-  const canCompose = Boolean(onReviewNote && selectedHunk && selectedLineSummary);
+  const canCompose = Boolean(onReviewNote && selectedHunk && selectionInSelectedHunk);
 
   return (
     <div
@@ -465,16 +718,36 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
 
         {/* Hunk and line selection summary */}
         <div className="text-muted flex items-center gap-1 text-[10px]">
+          {selectedHunk && (
+            <button
+              type="button"
+              className={cn(
+                "text-muted hover:text-read flex cursor-pointer items-center border-none bg-transparent p-0 transition-colors duration-150",
+                props.isRead(selectedHunk.id) && "text-read"
+              )}
+              onClick={() => onToggleRead(selectedHunk.id)}
+              aria-label={
+                props.isRead(selectedHunk.id) ? "Mark hunk as unread" : "Mark hunk as read"
+              }
+            >
+              {props.isRead(selectedHunk.id) ? (
+                <Check aria-hidden="true" className="h-3 w-3" />
+              ) : (
+                <Circle aria-hidden="true" className="h-3 w-3" />
+              )}
+            </button>
+          )}
           <span>
             Hunk {currentHunkIdx >= 0 ? currentHunkIdx + 1 : "–"}/{currentFileHunks.length}
           </span>
           <span className="text-dim">·</span>
-          <span>
-            Lines{" "}
-            {selectedLineSummary
-              ? `${selectedLineSummary.startIndex + 1}-${selectedLineSummary.endIndex + 1}`
-              : "–"}
-          </span>
+          <span>Lines {selectedLineSummaryLabel}</span>
+          {selectedHunkLineCount > 0 && (
+            <>
+              <span className="text-dim">·</span>
+              <span>{selectedHunkLineCount} lines</span>
+            </>
+          )}
         </div>
 
         {/* Spacer */}
@@ -511,7 +784,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
         )}
       </div>
 
-      {/* File hunks (always expanded, grouped by file) */}
+      {/* Unified whole-file diff with hunk overlays */}
       <div className="flex-1 overflow-y-auto p-3">
         {currentFileHunks.length === 0 ? (
           <div className="text-muted flex items-center justify-center py-12 text-sm">
@@ -519,96 +792,36 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
           </div>
         ) : (
           <div className="border-border-light bg-dark overflow-hidden rounded border">
-            {currentFileHunks.map((hunk, index) => {
-              const isSelected = hunk.id === selectedHunkId;
-              const hunkCounts = countHunkChanges(hunk);
-              const firstSeenAt = props.firstSeenMap[hunk.id] ?? Date.now();
-
-              return (
-                <section
-                  key={hunk.id}
-                  data-hunk-id={hunk.id}
-                  className={cn(
-                    "border-border-light border-b last:border-b-0",
-                    isSelected && "shadow-[inset_0_0_0_1px_var(--color-review-accent)]"
-                  )}
-                >
-                  <div
-                    className={cn(
-                      "border-border-light font-monospace flex items-center gap-1.5 border-b px-2 py-1 text-[11px]",
-                      isSelected && "bg-code-keyword-overlay-light"
-                    )}
-                    onClick={() => onSelectHunk(hunk.id)}
-                  >
-                    <button
-                      type="button"
-                      className={cn(
-                        "text-muted hover:text-read flex cursor-pointer items-center border-none bg-transparent p-0 text-[11px] transition-colors duration-150",
-                        props.isRead(hunk.id) && "text-read"
-                      )}
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        onToggleRead(hunk.id);
-                      }}
-                      aria-label={
-                        props.isRead(hunk.id) ? "Mark hunk as unread" : "Mark hunk as read"
-                      }
-                    >
-                      {props.isRead(hunk.id) ? (
-                        <Check aria-hidden="true" className="h-3 w-3" />
-                      ) : (
-                        <Circle aria-hidden="true" className="h-3 w-3" />
-                      )}
-                    </button>
-
-                    <span className="text-muted">Hunk {index + 1}</span>
-                    <span className="text-dim">{hunk.header}</span>
-
-                    <div className="text-muted ml-auto flex shrink-0 items-center gap-1.5 whitespace-nowrap">
-                      {hunkCounts.additions > 0 && (
-                        <span className="text-success-light">+{hunkCounts.additions}</span>
-                      )}
-                      {hunkCounts.deletions > 0 && (
-                        <span className="text-warning-light">−{hunkCounts.deletions}</span>
-                      )}
-                      <span className="text-dim">{hunkCounts.lineCount} lines</span>
-                      <span className="text-dim">{formatRelativeTime(firstSeenAt)}</span>
-                    </div>
-                  </div>
-
-                  <SelectableDiffRenderer
-                    content={hunk.content}
-                    filePath={hunk.filePath}
-                    inlineReviews={props.reviewsByFilePath.get(hunk.filePath)}
-                    oldStart={hunk.oldStart}
-                    newStart={hunk.newStart}
-                    fontSize="11px"
-                    maxHeight="none"
-                    className="rounded-none border-0 [&>div]:overflow-x-visible"
-                    onReviewNote={onReviewNote}
-                    onLineClick={() => onSelectHunk(hunk.id)}
-                    reviewActions={props.reviewActions}
-                    activeLineIndex={isSelected ? activeLineIndex : null}
-                    selectedLineRange={isSelected ? selectedLineRange : null}
-                    onLineIndexSelect={(lineIndex, shiftKey) =>
-                      handleLineIndexSelect(hunk.id, lineIndex, shiftKey)
-                    }
-                    externalSelectionRequest={
-                      isSelected && inlineComposerRequest?.hunkId === hunk.id
-                        ? {
-                            requestId: inlineComposerRequest.requestId,
-                            selection: {
-                              startIndex: inlineComposerRequest.startIndex,
-                              endIndex: inlineComposerRequest.endIndex,
-                            },
-                            initialNoteText: inlineComposerRequest.prefill,
-                          }
-                        : null
+            <SelectableDiffRenderer
+              content={overlayData.content}
+              filePath={activeFilePath ?? currentFileHunks[0].filePath}
+              inlineReviews={
+                activeFilePath ? props.reviewsByFilePath.get(activeFilePath) : undefined
+              }
+              oldStart={1}
+              newStart={1}
+              fontSize="11px"
+              maxHeight="none"
+              className="rounded-none border-0 [&>div]:overflow-x-visible"
+              onReviewNote={onReviewNote}
+              reviewActions={props.reviewActions}
+              activeLineIndex={activeLineIndex}
+              selectedLineRange={selectedLineRange}
+              onLineIndexSelect={handleLineIndexSelect}
+              externalSelectionRequest={
+                inlineComposerRequest?.hunkId != null &&
+                inlineComposerRequest.hunkId === selectedHunk?.id
+                  ? {
+                      requestId: inlineComposerRequest.requestId,
+                      selection: {
+                        startIndex: inlineComposerRequest.startIndex,
+                        endIndex: inlineComposerRequest.endIndex,
+                      },
+                      initialNoteText: inlineComposerRequest.prefill,
                     }
-                  />
-                </section>
-              );
-            })}
+                  : null
+              }
+            />
           </div>
         )}
       </div>
@@ -617,7 +830,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
       <div className="border-border-light bg-dark flex flex-wrap items-center justify-center gap-3 border-t px-3 py-1.5">
         <KeycapGroup keys={["Esc"]} label="back" />
         <KeycapGroup keys={["n", "p"]} label="file" />
-        <KeycapGroup keys={["j", "k"]} label="hunk" />
+        <KeycapGroup keys={["k", "j"]} label="hunk" />
         <KeycapGroup keys={["↑", "↓"]} label="line" />
         <KeycapGroup keys={["Shift", "↑", "↓"]} label="select" />
         <KeycapGroup keys={["Ctrl", "↑", "↓"]} label="jump 10" />
diff --git a/src/browser/utils/ui/keybinds.ts b/src/browser/utils/ui/keybinds.ts
index c325ac5abe..d70ee9cacd 100644
--- a/src/browser/utils/ui/keybinds.ts
+++ b/src/browser/utils/ui/keybinds.ts
@@ -433,10 +433,10 @@ export const KEYBINDS = {
   REVIEW_PREV_FILE: { key: "p" },
 
   /** Navigate to next hunk in immersive review */
-  REVIEW_NEXT_HUNK: { key: "j" },
+  REVIEW_NEXT_HUNK: { key: "k" },
 
   /** Navigate to previous hunk in immersive review */
-  REVIEW_PREV_HUNK: { key: "k" },
+  REVIEW_PREV_HUNK: { key: "j" },
 
   /** Move line cursor down in immersive review */
   REVIEW_CURSOR_DOWN: { key: "ArrowDown", allowShift: true },

From abbe84b38e38b42420e4bd7b9d54ddb9dfb04947 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Tue, 17 Feb 2026 15:07:47 +0000
Subject: [PATCH 08/48] Remove Add comment/Dislike header buttons from
 immersive review

The interaction has moved to keyboard shortcuts (Shift+L, Shift+D) with
inline composers, making the header buttons redundant.
---
 .../CodeReview/ImmersiveReviewView.tsx        | 51 +------------------
 1 file changed, 1 insertion(+), 50 deletions(-)

diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index ab9d918846..bcc8ce97e4 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -5,15 +5,7 @@
  */
 
 import React, { useState, useCallback, useEffect, useMemo, useRef } from "react";
-import {
-  ArrowLeft,
-  Check,
-  ChevronLeft,
-  ChevronRight,
-  Circle,
-  MessageSquare,
-  ThumbsDown,
-} from "lucide-react";
+import { ArrowLeft, Check, ChevronLeft, ChevronRight, Circle } from "lucide-react";
 import { cn } from "@/common/lib/utils";
 import { SelectableDiffRenderer } from "../../shared/DiffRenderer";
 import { KeycapGroup } from "@/browser/components/ui/Keycap";
@@ -451,12 +443,6 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
 
   const selectedLineSummary = getCurrentLineSelection();
 
-  const selectionInSelectedHunk = Boolean(
-    selectedLineSummary &&
-    selectedHunkRange &&
-    isSelectionInsideRange(selectedLineSummary, selectedHunkRange)
-  );
-
   const openComposer = useCallback(
     (prefill: string) => {
       if (!selectedHunk || !selectedHunkRange) {
@@ -662,8 +648,6 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     return `${relativeStart}-${relativeEnd}`;
   }, [selectedLineSummary, selectedHunkRange]);
 
-  const canCompose = Boolean(onReviewNote && selectedHunk && selectionInSelectedHunk);
-
   return (
     <div
       ref={containerRef}
@@ -749,39 +733,6 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
             </>
           )}
         </div>
-
-        {/* Spacer */}
-        <div className="flex-1" />
-
-        {/* Quick feedback buttons */}
-        {onReviewNote && (
-          <div className="flex items-center gap-1.5">
-            <button
-              onClick={() => openComposer("")}
-              disabled={!canCompose}
-              className={cn(
-                "flex cursor-pointer items-center gap-1 rounded border-none bg-transparent px-1.5 py-0.5 text-[11px] transition-colors",
-                "text-muted hover:text-link disabled:text-dim disabled:cursor-default"
-              )}
-              aria-label="Add a comment"
-            >
-              <MessageSquare className="h-3 w-3" />
-              <span className="hidden sm:inline">Add comment</span>
-            </button>
-            <button
-              onClick={() => openComposer("I don't like this change")}
-              disabled={!canCompose}
-              className={cn(
-                "flex cursor-pointer items-center gap-1 rounded border-none bg-transparent px-1.5 py-0.5 text-[11px] transition-colors",
-                "text-muted hover:text-warning-light disabled:text-dim disabled:cursor-default"
-              )}
-              aria-label="I don't like this change"
-            >
-              <ThumbsDown className="h-3 w-3" />
-              <span className="hidden sm:inline">Dislike</span>
-            </button>
-          </div>
-        )}
       </div>
 
       {/* Unified whole-file diff with hunk overlays */}

From 9e7d1ec8fd14e7ed117942b2de5188ab00345cf3 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Tue, 17 Feb 2026 15:16:49 +0000
Subject: [PATCH 09/48] fix immersive review hunk targeting and scroll behavior

---
 .../CodeReview/ImmersiveReviewView.tsx        | 38 +++++++++++++++----
 1 file changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index bcc8ce97e4..89678abad8 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -56,6 +56,7 @@ interface SelectedLineRange {
 interface HunkLineRange {
   startIndex: number;
   endIndex: number;
+  firstModifiedIndex: number | null;
 }
 
 interface ImmersiveOverlayData {
@@ -120,6 +121,7 @@ function buildOverlayFromFileContent(
     }
 
     const hunkStartIndex = lineHunkIds.length;
+    let firstModifiedIndex: number | null = null;
 
     for (const line of splitDiffLines(hunk.content)) {
       const prefix = line[0] ?? " ";
@@ -127,6 +129,10 @@ function buildOverlayFromFileContent(
         continue;
       }
 
+      if (firstModifiedIndex === null && (prefix === "+" || prefix === "-")) {
+        firstModifiedIndex = lineHunkIds.length;
+      }
+
       pushDisplayLine(`${prefix}${line.slice(1)}`, hunk.id);
       if (prefix !== "-") {
         newLineIdx += 1;
@@ -137,6 +143,7 @@ function buildOverlayFromFileContent(
       hunkLineRanges.set(hunk.id, {
         startIndex: hunkStartIndex,
         endIndex: lineHunkIds.length - 1,
+        firstModifiedIndex,
       });
     }
   }
@@ -175,6 +182,7 @@ function buildOverlayFromHunks(sortedHunks: DiffHunk[]): ImmersiveOverlayData {
     pushHeaderLine(`@@ -${hunk.oldStart},${hunk.oldLines} +${hunk.newStart},${hunk.newLines} @@`);
 
     const hunkStartIndex = lineHunkIds.length;
+    let firstModifiedIndex: number | null = null;
 
     for (const line of splitDiffLines(hunk.content)) {
       const prefix = line[0] ?? " ";
@@ -182,6 +190,10 @@ function buildOverlayFromHunks(sortedHunks: DiffHunk[]): ImmersiveOverlayData {
         continue;
       }
 
+      if (firstModifiedIndex === null && (prefix === "+" || prefix === "-")) {
+        firstModifiedIndex = lineHunkIds.length;
+      }
+
       pushDisplayLine(`${prefix}${line.slice(1)}`, hunk.id);
     }
 
@@ -189,6 +201,7 @@ function buildOverlayFromHunks(sortedHunks: DiffHunk[]): ImmersiveOverlayData {
       hunkLineRanges.set(hunk.id, {
         startIndex: hunkStartIndex,
         endIndex: lineHunkIds.length - 1,
+        firstModifiedIndex,
       });
     }
   });
@@ -208,6 +221,7 @@ function isSelectionInsideRange(selection: SelectedLineRange, range: HunkLineRan
 
 export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) => {
   const containerRef = useRef<HTMLDivElement>(null);
+  const hunkJumpRef = useRef(false);
   const { api } = useAPI();
 
   const { fileTree, hunks, selectedHunkId, onSelectHunk, onToggleRead, onExit, onReviewNote } =
@@ -363,7 +377,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
       ) {
         return previousLineIndex;
       }
-      return selectedHunkRange.startIndex;
+      return selectedHunkRange.firstModifiedIndex ?? selectedHunkRange.startIndex;
     });
 
     setSelectedLineRange((previousSelection) => {
@@ -399,6 +413,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
       // Select first hunk in the new file
       const fileHunks = sortHunksInFileOrder(getFileHunks(hunks, nextFile));
       if (fileHunks.length > 0) {
+        hunkJumpRef.current = true;
         onSelectHunk(fileHunks[0].id);
       }
     },
@@ -421,6 +436,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
         if (nextIdx < 0 || nextIdx >= currentFileHunks.length) return;
       }
 
+      hunkJumpRef.current = true;
       onSelectHunk(currentFileHunks[nextIdx].id);
     },
     [currentFileHunks, selectedHunkId, onSelectHunk]
@@ -450,17 +466,21 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
       }
 
       const selection = getCurrentLineSelection();
-      if (!selection || !isSelectionInsideRange(selection, selectedHunkRange)) {
-        return;
-      }
+      const effectiveSelection =
+        selection && isSelectionInsideRange(selection, selectedHunkRange)
+          ? selection
+          : {
+              startIndex: selectedHunkRange.startIndex,
+              endIndex: selectedHunkRange.startIndex,
+            };
 
       nextComposerRequestIdRef.current += 1;
       setInlineComposerRequest({
         requestId: nextComposerRequestIdRef.current,
         prefill,
         hunkId: selectedHunk.id,
-        startIndex: selection.startIndex,
-        endIndex: selection.endIndex,
+        startIndex: effectiveSelection.startIndex,
+        endIndex: effectiveSelection.endIndex,
       });
     },
     [getCurrentLineSelection, selectedHunk, selectedHunkRange]
@@ -627,7 +647,11 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     const lineElement = document.querySelector(
       `[data-testid="review-immersive-root"] [data-line-index="${activeLineIndex}"]`
     );
-    lineElement?.scrollIntoView({ behavior: "auto", block: "nearest" });
+
+    const block = hunkJumpRef.current ? "center" : "nearest";
+    hunkJumpRef.current = false;
+
+    lineElement?.scrollIntoView({ behavior: "auto", block });
   }, [activeLineIndex]);
 
   const currentHunkIdx = selectedHunkId

From 3051bc4a02986dfd2e8c0b5511c42cb364189bbd Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Tue, 17 Feb 2026 15:50:46 +0000
Subject: [PATCH 10/48] =?UTF-8?q?=F0=9F=A4=96=20feat:=20add=20immersive=20?=
 =?UTF-8?q?review=20notes=20sidebar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CodeReview/ImmersiveReviewView.tsx        | 249 +++++++++++++++---
 1 file changed, 210 insertions(+), 39 deletions(-)

diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index 89678abad8..85b438b7ee 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -5,11 +5,21 @@
  */
 
 import React, { useState, useCallback, useEffect, useMemo, useRef } from "react";
-import { ArrowLeft, Check, ChevronLeft, ChevronRight, Circle } from "lucide-react";
+import {
+  ArrowLeft,
+  Check,
+  ChevronLeft,
+  ChevronRight,
+  Circle,
+  MessageSquare,
+  ThumbsDown,
+  Trash2,
+} from "lucide-react";
 import { cn } from "@/common/lib/utils";
 import { SelectableDiffRenderer } from "../../shared/DiffRenderer";
 import { KeycapGroup } from "@/browser/components/ui/Keycap";
 import { useAPI } from "@/browser/contexts/API";
+import { formatLineRangeCompact } from "@/browser/utils/review/lineRange";
 import {
   flattenFileTreeLeaves,
   getAdjacentFilePath,
@@ -66,6 +76,40 @@ interface ImmersiveOverlayData {
 }
 
 const LINE_JUMP_SIZE = 10;
+const DISLIKE_NOTE_PREFIX = "I don't like this change";
+
+function getFileBaseName(filePath: string): string {
+  const segments = filePath.split(/[\\/]/);
+  return segments[segments.length - 1] || filePath;
+}
+
+function getReviewStatusSidebarClasses(status: Review["status"]): {
+  accent: string;
+  badge: string;
+  icon: string;
+} {
+  if (status === "checked") {
+    return {
+      accent: "bg-success",
+      badge: "bg-success/20 text-success",
+      icon: "text-success",
+    };
+  }
+
+  if (status === "attached") {
+    return {
+      accent: "bg-warning",
+      badge: "bg-warning/20 text-warning",
+      icon: "text-warning",
+    };
+  }
+
+  return {
+    accent: "bg-muted",
+    badge: "bg-muted/25 text-muted",
+    icon: "text-muted",
+  };
+}
 
 function splitDiffLines(content: string): string[] {
   const lines = content.split(/\r?\n/);
@@ -352,6 +396,21 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     ? selectedHunkRange.endIndex - selectedHunkRange.startIndex + 1
     : 0;
 
+  const allReviews = useMemo(
+    () =>
+      Array.from(props.reviewsByFilePath.values())
+        .flat()
+        .sort((a, b) => {
+          const createdAtDelta = b.createdAt - a.createdAt;
+          if (createdAtDelta !== 0) {
+            return createdAtDelta;
+          }
+
+          return a.id.localeCompare(b.id);
+        }),
+    [props.reviewsByFilePath]
+  );
+
   const [inlineComposerRequest, setInlineComposerRequest] = useState<InlineComposerRequest | null>(
     null
   );
@@ -442,6 +501,19 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     [currentFileHunks, selectedHunkId, onSelectHunk]
   );
 
+  const navigateToReviewFile = useCallback(
+    (filePath: string) => {
+      const fileHunks = sortHunksInFileOrder(getFileHunks(hunks, filePath));
+      if (fileHunks.length === 0) {
+        return;
+      }
+
+      hunkJumpRef.current = true;
+      onSelectHunk(fileHunks[0].id);
+    },
+    [hunks, onSelectHunk]
+  );
+
   const getCurrentLineSelection = useCallback((): SelectedLineRange | null => {
     if (activeLineIndex === null) {
       return null;
@@ -759,46 +831,145 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
         </div>
       </div>
 
-      {/* Unified whole-file diff with hunk overlays */}
-      <div className="flex-1 overflow-y-auto p-3">
-        {currentFileHunks.length === 0 ? (
-          <div className="text-muted flex items-center justify-center py-12 text-sm">
-            {activeFilePath ? "No hunks for this file" : "No files to review"}
+      {/* Unified whole-file diff with hunk overlays + notes sidebar */}
+      <div className="flex min-h-0 flex-1">
+        <div className="min-h-0 min-w-0 flex-1 overflow-y-auto p-3">
+          {currentFileHunks.length === 0 ? (
+            <div className="text-muted flex items-center justify-center py-12 text-sm">
+              {activeFilePath ? "No hunks for this file" : "No files to review"}
+            </div>
+          ) : (
+            <div className="border-border-light bg-dark overflow-hidden rounded border">
+              <SelectableDiffRenderer
+                content={overlayData.content}
+                filePath={activeFilePath ?? currentFileHunks[0].filePath}
+                inlineReviews={
+                  activeFilePath ? props.reviewsByFilePath.get(activeFilePath) : undefined
+                }
+                oldStart={1}
+                newStart={1}
+                fontSize="11px"
+                maxHeight="none"
+                className="rounded-none border-0 [&>div]:overflow-x-visible"
+                onReviewNote={onReviewNote}
+                reviewActions={props.reviewActions}
+                activeLineIndex={activeLineIndex}
+                selectedLineRange={selectedLineRange}
+                onLineIndexSelect={handleLineIndexSelect}
+                externalSelectionRequest={
+                  inlineComposerRequest?.hunkId != null &&
+                  inlineComposerRequest.hunkId === selectedHunk?.id
+                    ? {
+                        requestId: inlineComposerRequest.requestId,
+                        selection: {
+                          startIndex: inlineComposerRequest.startIndex,
+                          endIndex: inlineComposerRequest.endIndex,
+                        },
+                        initialNoteText: inlineComposerRequest.prefill,
+                      }
+                    : null
+                }
+              />
+            </div>
+          )}
+        </div>
+
+        <aside className="border-border-light bg-dark flex w-[280px] min-w-[280px] flex-col border-l">
+          <div className="border-border-light flex items-center justify-between border-b px-3 py-2">
+            <h2 className="text-foreground text-xs font-medium">Notes</h2>
+            <span className="bg-muted/20 text-muted rounded px-1.5 py-0.5 font-mono text-[10px]">
+              {allReviews.length}
+            </span>
           </div>
-        ) : (
-          <div className="border-border-light bg-dark overflow-hidden rounded border">
-            <SelectableDiffRenderer
-              content={overlayData.content}
-              filePath={activeFilePath ?? currentFileHunks[0].filePath}
-              inlineReviews={
-                activeFilePath ? props.reviewsByFilePath.get(activeFilePath) : undefined
-              }
-              oldStart={1}
-              newStart={1}
-              fontSize="11px"
-              maxHeight="none"
-              className="rounded-none border-0 [&>div]:overflow-x-visible"
-              onReviewNote={onReviewNote}
-              reviewActions={props.reviewActions}
-              activeLineIndex={activeLineIndex}
-              selectedLineRange={selectedLineRange}
-              onLineIndexSelect={handleLineIndexSelect}
-              externalSelectionRequest={
-                inlineComposerRequest?.hunkId != null &&
-                inlineComposerRequest.hunkId === selectedHunk?.id
-                  ? {
-                      requestId: inlineComposerRequest.requestId,
-                      selection: {
-                        startIndex: inlineComposerRequest.startIndex,
-                        endIndex: inlineComposerRequest.endIndex,
-                      },
-                      initialNoteText: inlineComposerRequest.prefill,
-                    }
-                  : null
-              }
-            />
+
+          <div className="min-h-0 flex-1 overflow-y-auto px-2 py-2">
+            {allReviews.length === 0 ? (
+              <div className="text-muted flex h-full flex-col items-center justify-center text-center text-xs">
+                <p>No notes yet</p>
+                <p className="text-dim mt-1">Press Shift+L to add one</p>
+              </div>
+            ) : (
+              <div className="space-y-1.5">
+                {allReviews.map((review) => {
+                  const isDislike = review.data.userNote
+                    .trimStart()
+                    .startsWith(DISLIKE_NOTE_PREFIX);
+                  const statusClasses = getReviewStatusSidebarClasses(review.status);
+                  const ReviewTypeIcon = isDislike ? ThumbsDown : MessageSquare;
+                  const isActiveFileReview = review.data.filePath === activeFilePath;
+
+                  return (
+                    <div
+                      key={review.id}
+                      role="button"
+                      tabIndex={0}
+                      className={cn(
+                        "group/review-item border-border-light hover:bg-muted/10 focus-visible:ring-primary/40 flex w-full cursor-pointer overflow-hidden rounded border text-left outline-none transition-colors focus-visible:ring-2",
+                        isActiveFileReview && "bg-muted/10"
+                      )}
+                      onClick={() => navigateToReviewFile(review.data.filePath)}
+                      onKeyDown={(event) => {
+                        if (event.key === "Enter" || event.key === " ") {
+                          event.preventDefault();
+                          navigateToReviewFile(review.data.filePath);
+                        }
+                      }}
+                    >
+                      <div className={cn("w-[3px] shrink-0", statusClasses.accent)} />
+
+                      <div className="min-w-0 flex-1 px-2 py-1.5">
+                        <div className="flex items-center gap-1.5">
+                          <ReviewTypeIcon className={cn("size-3 shrink-0", statusClasses.icon)} />
+
+                          <span
+                            className="text-muted min-w-0 flex-1 truncate font-mono text-[10px]"
+                            title={`${review.data.filePath}:L${formatLineRangeCompact(review.data.lineRange)}`}
+                          >
+                            {`${getFileBaseName(review.data.filePath)}:L${formatLineRangeCompact(review.data.lineRange)}`}
+                          </span>
+
+                          <span
+                            className={cn(
+                              "shrink-0 rounded px-1 py-0.5 text-[9px] uppercase",
+                              statusClasses.badge
+                            )}
+                          >
+                            {review.status}
+                          </span>
+
+                          {props.reviewActions?.onDelete && (
+                            <button
+                              type="button"
+                              className="text-muted hover:text-error ml-0.5 hidden cursor-pointer items-center rounded p-0.5 transition-colors group-hover/review-item:inline-flex"
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                props.reviewActions?.onDelete?.(review.id);
+                              }}
+                              aria-label="Delete review note"
+                            >
+                              <Trash2 className="size-3" />
+                            </button>
+                          )}
+                        </div>
+
+                        <p
+                          className="text-foreground mt-1 overflow-hidden text-[11px] leading-[1.4] break-words whitespace-pre-wrap"
+                          style={{
+                            display: "-webkit-box",
+                            WebkitBoxOrient: "vertical",
+                            WebkitLineClamp: 2,
+                          }}
+                        >
+                          {review.data.userNote || "(No note text)"}
+                        </p>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
           </div>
-        )}
+        </aside>
       </div>
 
       {/* Shortcut bar */}

From 06c091f9e629c060119d3c22c89c0646a80fa973 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Tue, 17 Feb 2026 16:03:15 +0000
Subject: [PATCH 11/48] =?UTF-8?q?=F0=9F=A4=96=20perf:=20optimize=20immersi?=
 =?UTF-8?q?ve=20review=20cursor=20navigation=20performance?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CodeReview/ImmersiveReviewView.tsx        | 83 ++++++++++++++-----
 1 file changed, 63 insertions(+), 20 deletions(-)

diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index 85b438b7ee..34b1853db3 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -76,6 +76,8 @@ interface ImmersiveOverlayData {
 }
 
 const LINE_JUMP_SIZE = 10;
+const MAX_HIGHLIGHTED_DIFF_LINES = 1600;
+const ACTIVE_LINE_OUTLINE = "1px solid hsl(from var(--color-review-accent) h s l / 0.45)";
 const DISLIKE_NOTE_PREFIX = "I don't like this change";
 
 function getFileBaseName(filePath: string): string {
@@ -420,6 +422,24 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
   const [activeLineIndex, setActiveLineIndex] = useState<number | null>(null);
   const [selectedLineRange, setSelectedLineRange] = useState<SelectedLineRange | null>(null);
 
+  // Refs keep hot-path callbacks stable so cursor movement doesn't trigger expensive re-renders.
+  const activeLineIndexRef = useRef<number | null>(null);
+  const selectedLineRangeRef = useRef<SelectedLineRange | null>(null);
+  const selectedHunkIdRef = useRef<string | null>(selectedHunkId);
+  const highlightedLineElementRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    activeLineIndexRef.current = activeLineIndex;
+  }, [activeLineIndex]);
+
+  useEffect(() => {
+    selectedLineRangeRef.current = selectedLineRange;
+  }, [selectedLineRange]);
+
+  useEffect(() => {
+    selectedHunkIdRef.current = selectedHunkId;
+  }, [selectedHunkId]);
+
   // Keep cursor and selection aligned to the selected hunk when hunk navigation changes.
   useEffect(() => {
     if (!selectedHunkRange) {
@@ -565,42 +585,35 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
         return;
       }
 
-      const currentIndex = activeLineIndex ?? selectedHunkRange?.startIndex ?? 0;
+      const currentIndex = activeLineIndexRef.current ?? selectedHunkRange?.startIndex ?? 0;
       const nextIndex = Math.max(0, Math.min(lineCount - 1, currentIndex + delta));
 
       setActiveLineIndex(nextIndex);
 
       if (extendRange) {
-        const anchorIndex = selectedLineRange?.startIndex ?? currentIndex;
+        const anchorIndex = selectedLineRangeRef.current?.startIndex ?? currentIndex;
         setSelectedLineRange({ startIndex: anchorIndex, endIndex: nextIndex });
       } else {
         setSelectedLineRange(null);
       }
 
       const lineHunkId = overlayData.lineHunkIds[nextIndex];
-      if (lineHunkId && lineHunkId !== selectedHunkId) {
+      if (lineHunkId && lineHunkId !== selectedHunkIdRef.current) {
         onSelectHunk(lineHunkId);
       }
     },
-    [
-      overlayData.lineHunkIds,
-      activeLineIndex,
-      selectedHunkRange?.startIndex,
-      selectedLineRange,
-      selectedHunkId,
-      onSelectHunk,
-    ]
+    [overlayData.lineHunkIds, selectedHunkRange?.startIndex, onSelectHunk]
   );
 
   const handleLineIndexSelect = useCallback(
     (lineIndex: number, shiftKey: boolean) => {
       const lineHunkId = overlayData.lineHunkIds[lineIndex];
-      if (lineHunkId && selectedHunkId !== lineHunkId) {
+      if (lineHunkId && selectedHunkIdRef.current !== lineHunkId) {
         onSelectHunk(lineHunkId);
       }
 
       const anchorIndex = shiftKey
-        ? (selectedLineRange?.startIndex ?? activeLineIndex ?? lineIndex)
+        ? (selectedLineRangeRef.current?.startIndex ?? activeLineIndexRef.current ?? lineIndex)
         : lineIndex;
       setActiveLineIndex(lineIndex);
 
@@ -610,7 +623,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
         setSelectedLineRange(null);
       }
     },
-    [overlayData.lineHunkIds, selectedHunkId, onSelectHunk, selectedLineRange, activeLineIndex]
+    [overlayData.lineHunkIds, onSelectHunk]
   );
 
   // Auto-focus container on mount
@@ -710,21 +723,49 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     onToggleRead,
   ]);
 
-  // Keep the active line visible while moving with keyboard shortcuts.
+  // Keep the active line visible while moving with keyboard shortcuts, without
+  // forcing the full diff tree to re-render on every cursor move.
   useEffect(() => {
+    const previousLineElement = highlightedLineElementRef.current;
+    if (previousLineElement) {
+      previousLineElement.style.outline = "";
+      previousLineElement.style.outlineOffset = "";
+      highlightedLineElementRef.current = null;
+    }
+
     if (activeLineIndex === null) {
       return;
     }
 
-    const lineElement = document.querySelector(
-      `[data-testid="review-immersive-root"] [data-line-index="${activeLineIndex}"]`
+    const lineElement = containerRef.current?.querySelector<HTMLElement>(
+      `[data-line-index="${activeLineIndex}"]`
     );
+    if (!lineElement) {
+      return;
+    }
+
+    lineElement.style.outline = ACTIVE_LINE_OUTLINE;
+    lineElement.style.outlineOffset = "-1px";
+    highlightedLineElementRef.current = lineElement;
 
     const block = hunkJumpRef.current ? "center" : "nearest";
     hunkJumpRef.current = false;
 
-    lineElement?.scrollIntoView({ behavior: "auto", block });
-  }, [activeLineIndex]);
+    lineElement.scrollIntoView({ behavior: "auto", block });
+  }, [activeLineIndex, overlayData.content]);
+
+  useEffect(() => {
+    return () => {
+      const previousLineElement = highlightedLineElementRef.current;
+      if (!previousLineElement) {
+        return;
+      }
+
+      previousLineElement.style.outline = "";
+      previousLineElement.style.outlineOffset = "";
+      highlightedLineElementRef.current = null;
+    };
+  }, []);
 
   const currentHunkIdx = selectedHunkId
     ? currentFileHunks.findIndex((hunk) => hunk.id === selectedHunkId)
@@ -744,6 +785,8 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     return `${relativeStart}-${relativeEnd}`;
   }, [selectedLineSummary, selectedHunkRange]);
 
+  const shouldEnableHighlighting = overlayData.lineHunkIds.length <= MAX_HIGHLIGHTED_DIFF_LINES;
+
   return (
     <div
       ref={containerRef}
@@ -853,7 +896,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
                 className="rounded-none border-0 [&>div]:overflow-x-visible"
                 onReviewNote={onReviewNote}
                 reviewActions={props.reviewActions}
-                activeLineIndex={activeLineIndex}
+                enableHighlighting={shouldEnableHighlighting}
                 selectedLineRange={selectedLineRange}
                 onLineIndexSelect={handleLineIndexSelect}
                 externalSelectionRequest={

From c6347468ae0a38efd376a412b864069884fb05a3 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Tue, 17 Feb 2026 16:11:55 +0000
Subject: [PATCH 12/48] =?UTF-8?q?=F0=9F=A4=96=20fix:=20address=20Codex=20i?=
 =?UTF-8?q?mmersive=20overlay=20and=20file=20nav=20feedback?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/browser/components/RightSidebar.tsx       | 23 +++++++++++++++
 .../CodeReview/ImmersiveReviewView.tsx        | 29 +++++++++++++------
 2 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/src/browser/components/RightSidebar.tsx b/src/browser/components/RightSidebar.tsx
index ff52276d6a..24c6d2ae7e 100644
--- a/src/browser/components/RightSidebar.tsx
+++ b/src/browser/components/RightSidebar.tsx
@@ -197,6 +197,14 @@ const DragAwarePanelResizeHandle: React.FC<{
   return <PanelResizeHandle className={className} />;
 };
 
+function hasMountedReviewPanel(node: RightSidebarLayoutNode): boolean {
+  if (node.type === "tabset") {
+    return node.activeTab === "review";
+  }
+
+  return node.children.some((child) => hasMountedReviewPanel(child));
+}
+
 type TabsetNode = Extract<RightSidebarLayoutNode, { type: "tabset" }>;
 
 interface RightSidebarTabsetNodeProps {
@@ -684,6 +692,21 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
     [layoutDraft, layoutRaw, initialActiveTab]
   );
 
+  const hasReviewPanelMounted = React.useMemo(
+    () => hasMountedReviewPanel(layout.root),
+    [layout.root]
+  );
+
+  // If immersive mode is active but no ReviewPanel is mounted (e.g., user switched tabs),
+  // clear the persisted immersive flag to avoid leaving a blank overlay mounted.
+  React.useEffect(() => {
+    if (!isReviewImmersive || hasReviewPanelMounted) {
+      return;
+    }
+
+    setIsReviewImmersive(false);
+  }, [hasReviewPanelMounted, isReviewImmersive, setIsReviewImmersive]);
+
   // If the Stats tab feature is enabled, ensure it exists in the layout.
   // If disabled, ensure it doesn't linger in persisted layouts.
   React.useEffect(() => {
diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index 34b1853db3..31a8ce52c2 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -485,15 +485,26 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
 
   const navigateFile = useCallback(
     (direction: 1 | -1) => {
-      if (!activeFilePath) return;
-      const nextFile = getAdjacentFilePath(fileList, activeFilePath, direction);
-      if (!nextFile || nextFile === activeFilePath) return;
-
-      // Select first hunk in the new file
-      const fileHunks = sortHunksInFileOrder(getFileHunks(hunks, nextFile));
-      if (fileHunks.length > 0) {
-        hunkJumpRef.current = true;
-        onSelectHunk(fileHunks[0].id);
+      if (!activeFilePath || fileList.length <= 1) {
+        return;
+      }
+
+      // Skip files with no currently visible hunks (e.g. filtered out by read/search filters).
+      // This keeps file navigation moving forward instead of getting stuck on empty files.
+      let candidatePath = activeFilePath;
+      for (let step = 0; step < fileList.length - 1; step += 1) {
+        const nextPath = getAdjacentFilePath(fileList, candidatePath, direction);
+        if (!nextPath) {
+          return;
+        }
+
+        candidatePath = nextPath;
+        const fileHunks = sortHunksInFileOrder(getFileHunks(hunks, candidatePath));
+        if (fileHunks.length > 0) {
+          hunkJumpRef.current = true;
+          onSelectHunk(fileHunks[0].id);
+          return;
+        }
       }
     },
     [activeFilePath, fileList, hunks, onSelectHunk]

From f91beebc0563d55bd3283415a66630f541b0f880 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Tue, 17 Feb 2026 16:55:38 +0000
Subject: [PATCH 13/48] =?UTF-8?q?=F0=9F=A4=96=20fix:=20align=20fallback=20?=
 =?UTF-8?q?lines=20and=20map=20notes=20to=20matching=20hunks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CodeReview/ImmersiveReviewView.tsx        | 61 ++++++++++++++++---
 1 file changed, 54 insertions(+), 7 deletions(-)

diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index 31a8ce52c2..298c437b8f 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -27,7 +27,12 @@ import {
 } from "@/browser/utils/review/navigation";
 import { isEditableElement, KEYBINDS, matchesKeybind } from "@/browser/utils/ui/keybinds";
 import { buildReadFileScript, processFileContents } from "@/browser/utils/fileExplorer";
-import type { DiffHunk, Review, ReviewNoteData } from "@/common/types/review";
+import {
+  parseReviewLineRange,
+  type DiffHunk,
+  type Review,
+  type ReviewNoteData,
+} from "@/common/types/review";
 import type { FileTreeNode } from "@/common/utils/git/numstatParser";
 import type { ReviewActionCallbacks } from "../../shared/InlineReviewNote";
 
@@ -217,7 +222,10 @@ function buildOverlayFromHunks(sortedHunks: DiffHunk[]): ImmersiveOverlayData {
   };
 
   const pushHeaderLine = (line: string) => {
+    // Keep lineHunkIds aligned with every rendered row so keyboard/click line indices
+    // always map to the same row in fallback hunk rendering mode.
     contentLines.push(line);
+    lineHunkIds.push(null);
   };
 
   sortedHunks.forEach((hunk, index) => {
@@ -265,6 +273,44 @@ function isSelectionInsideRange(selection: SelectedLineRange, range: HunkLineRan
   return start >= range.startIndex && end <= range.endIndex;
 }
 
+function getLineSpan(start: number, lineCount: number): { start: number; end: number } | null {
+  if (lineCount <= 0) {
+    return null;
+  }
+
+  return {
+    start,
+    end: start + lineCount - 1,
+  };
+}
+
+function rangesOverlap(
+  lhs: { start: number; end: number } | undefined,
+  rhs: { start: number; end: number } | null
+): boolean {
+  if (!lhs || !rhs) {
+    return false;
+  }
+
+  return lhs.start <= rhs.end && rhs.start <= lhs.end;
+}
+
+function findReviewHunkId(review: Review, fileHunks: DiffHunk[]): string | null {
+  const parsedRange = parseReviewLineRange(review.data.lineRange);
+  if (!parsedRange) {
+    return null;
+  }
+
+  const matchingHunk = fileHunks.find((hunk) => {
+    const oldSpan = getLineSpan(hunk.oldStart, hunk.oldLines);
+    const newSpan = getLineSpan(hunk.newStart, hunk.newLines);
+
+    return rangesOverlap(parsedRange.old, oldSpan) || rangesOverlap(parsedRange.new, newSpan);
+  });
+
+  return matchingHunk?.id ?? null;
+}
+
 export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const hunkJumpRef = useRef(false);
@@ -532,15 +578,16 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     [currentFileHunks, selectedHunkId, onSelectHunk]
   );
 
-  const navigateToReviewFile = useCallback(
-    (filePath: string) => {
-      const fileHunks = sortHunksInFileOrder(getFileHunks(hunks, filePath));
+  const navigateToReview = useCallback(
+    (review: Review) => {
+      const fileHunks = sortHunksInFileOrder(getFileHunks(hunks, review.data.filePath));
       if (fileHunks.length === 0) {
         return;
       }
 
+      const targetHunkId = findReviewHunkId(review, fileHunks) ?? fileHunks[0].id;
       hunkJumpRef.current = true;
-      onSelectHunk(fileHunks[0].id);
+      onSelectHunk(targetHunkId);
     },
     [hunks, onSelectHunk]
   );
@@ -961,11 +1008,11 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
                         "group/review-item border-border-light hover:bg-muted/10 focus-visible:ring-primary/40 flex w-full cursor-pointer overflow-hidden rounded border text-left outline-none transition-colors focus-visible:ring-2",
                         isActiveFileReview && "bg-muted/10"
                       )}
-                      onClick={() => navigateToReviewFile(review.data.filePath)}
+                      onClick={() => navigateToReview(review)}
                       onKeyDown={(event) => {
                         if (event.key === "Enter" || event.key === " ") {
                           event.preventDefault();
-                          navigateToReviewFile(review.data.filePath);
+                          navigateToReview(review);
                         }
                       }}
                     >

From 86000c467d494339ae1d70928851aa04306138ee Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Tue, 17 Feb 2026 17:06:08 +0000
Subject: [PATCH 14/48] =?UTF-8?q?=F0=9F=A4=96=20fix:=20keep=20fallback=20h?=
 =?UTF-8?q?eader=20rows=20out=20of=20line=20index=20map?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RightSidebar/CodeReview/ImmersiveReviewView.tsx          | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index 298c437b8f..3acde535fd 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -222,10 +222,9 @@ function buildOverlayFromHunks(sortedHunks: DiffHunk[]): ImmersiveOverlayData {
   };
 
   const pushHeaderLine = (line: string) => {
-    // Keep lineHunkIds aligned with every rendered row so keyboard/click line indices
-    // always map to the same row in fallback hunk rendering mode.
+    // Header rows are intentionally excluded from lineHunkIds because DiffRenderer
+    // does not render @@ header lines in selectable output.
     contentLines.push(line);
-    lineHunkIds.push(null);
   };
 
   sortedHunks.forEach((hunk, index) => {

From 76ccc3afeb6f48dad316b71c108edd491041d7ba Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Tue, 17 Feb 2026 17:19:23 +0000
Subject: [PATCH 15/48] =?UTF-8?q?=F0=9F=A4=96=20fix:=20use=20all=20hunks?=
 =?UTF-8?q?=20when=20navigating=20from=20immersive=20notes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CodeReview/ImmersiveReviewView.tsx        | 39 ++++++++++++++-----
 1 file changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index 3acde535fd..8131fbecae 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -315,8 +315,16 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
   const hunkJumpRef = useRef(false);
   const { api } = useAPI();
 
-  const { fileTree, hunks, selectedHunkId, onSelectHunk, onToggleRead, onExit, onReviewNote } =
-    props;
+  const {
+    fileTree,
+    hunks,
+    allHunks,
+    selectedHunkId,
+    onSelectHunk,
+    onToggleRead,
+    onExit,
+    onReviewNote,
+  } = props;
 
   // Flatten file tree into ordered file list
   const fileList = useMemo(() => flattenFileTreeLeaves(fileTree), [fileTree]);
@@ -324,14 +332,25 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
   // Determine active file from selected hunk or first file
   const activeFilePath = useMemo(() => {
     if (selectedHunkId) {
-      const hunk = hunks.find((item) => item.id === selectedHunkId);
-      if (hunk) return hunk.filePath;
+      const selectedHunk =
+        hunks.find((item) => item.id === selectedHunkId) ??
+        allHunks.find((item) => item.id === selectedHunkId);
+      if (selectedHunk) {
+        return selectedHunk.filePath;
+      }
     }
-    // Fallback: first file that has hunks
-    if (hunks.length > 0) return hunks[0].filePath;
-    if (fileList.length > 0) return fileList[0];
+
+    // Fallback: first file that has currently visible hunks.
+    if (hunks.length > 0) {
+      return hunks[0].filePath;
+    }
+
+    if (fileList.length > 0) {
+      return fileList[0];
+    }
+
     return null;
-  }, [selectedHunkId, hunks, fileList]);
+  }, [selectedHunkId, hunks, allHunks, fileList]);
 
   // Hunks for the active file only, always sorted in file order
   const currentFileHunks = useMemo(
@@ -579,7 +598,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
 
   const navigateToReview = useCallback(
     (review: Review) => {
-      const fileHunks = sortHunksInFileOrder(getFileHunks(hunks, review.data.filePath));
+      const fileHunks = sortHunksInFileOrder(getFileHunks(allHunks, review.data.filePath));
       if (fileHunks.length === 0) {
         return;
       }
@@ -588,7 +607,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
       hunkJumpRef.current = true;
       onSelectHunk(targetHunkId);
     },
-    [hunks, onSelectHunk]
+    [allHunks, onSelectHunk]
   );
 
   const getCurrentLineSelection = useCallback((): SelectedLineRange | null => {

From f0b2d7ef917dac0c33869371eadd696f3e6707c4 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Tue, 17 Feb 2026 17:28:30 +0000
Subject: [PATCH 16/48] =?UTF-8?q?=F0=9F=A4=96=20fix:=20clear=20immersive?=
 =?UTF-8?q?=20state=20when=20sidebar=20is=20collapsed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/browser/components/RightSidebar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/browser/components/RightSidebar.tsx b/src/browser/components/RightSidebar.tsx
index 24c6d2ae7e..7600f570e9 100644
--- a/src/browser/components/RightSidebar.tsx
+++ b/src/browser/components/RightSidebar.tsx
@@ -693,8 +693,8 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
   );
 
   const hasReviewPanelMounted = React.useMemo(
-    () => hasMountedReviewPanel(layout.root),
-    [layout.root]
+    () => !collapsed && hasMountedReviewPanel(layout.root),
+    [collapsed, layout.root]
   );
 
   // If immersive mode is active but no ReviewPanel is mounted (e.g., user switched tabs),

From 92b66ac545e36d01b662df0330ecfc50f36d4a47 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Tue, 17 Feb 2026 17:39:42 +0000
Subject: [PATCH 17/48] =?UTF-8?q?=F0=9F=A4=96=20fix:=20preserve=20note=20n?=
 =?UTF-8?q?avigation=20and=20clear=20stale=20external=20composer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CodeReview/ImmersiveReviewView.tsx        | 20 ++++++++++++++++---
 .../components/shared/DiffRenderer.tsx        |  5 +++++
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index 8131fbecae..1e50a55aa3 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -352,10 +352,24 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     return null;
   }, [selectedHunkId, hunks, allHunks, fileList]);
 
-  // Hunks for the active file only, always sorted in file order
+  const selectedHunkFromAll = useMemo(
+    () => (selectedHunkId ? (allHunks.find((item) => item.id === selectedHunkId) ?? null) : null),
+    [selectedHunkId, allHunks]
+  );
+
+  const selectedHunkIsFilteredOut = Boolean(
+    selectedHunkFromAll && !hunks.some((item) => item.id === selectedHunkFromAll.id)
+  );
+
+  const activeFileHunks = selectedHunkIsFilteredOut ? allHunks : hunks;
+
+  // Hunks for the active file only, always sorted in file order.
+  // When the selected hunk is filtered out, keep using unfiltered hunks so
+  // note-driven navigation can still land on the review context.
   const currentFileHunks = useMemo(
-    () => (activeFilePath ? sortHunksInFileOrder(getFileHunks(hunks, activeFilePath)) : []),
-    [hunks, activeFilePath]
+    () =>
+      activeFilePath ? sortHunksInFileOrder(getFileHunks(activeFileHunks, activeFilePath)) : [],
+    [activeFileHunks, activeFilePath]
   );
 
   const selectedHunk = useMemo(() => {
diff --git a/src/browser/components/shared/DiffRenderer.tsx b/src/browser/components/shared/DiffRenderer.tsx
index 53ea6a36b4..fe24c3eba8 100644
--- a/src/browser/components/shared/DiffRenderer.tsx
+++ b/src/browser/components/shared/DiffRenderer.tsx
@@ -979,6 +979,11 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
 
     React.useEffect(() => {
       if (!externalSelectionRequest) {
+        if (lastExternalSelectionRequestIdRef.current !== null) {
+          lastExternalSelectionRequestIdRef.current = null;
+          setSelection(null);
+          setSelectionInitialNoteText("");
+        }
         return;
       }
 

From 6f06e66def249f52476ef041c5a63d2f4086ebf0 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Tue, 17 Feb 2026 17:53:22 +0000
Subject: [PATCH 18/48] =?UTF-8?q?=F0=9F=A4=96=20fix:=20handle=20immersive?=
 =?UTF-8?q?=20composer=20remap=20and=20aria=20isolation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CodeReview/ImmersiveReviewView.tsx        | 54 ++++++++++++------
 src/browser/components/WorkspaceShell.tsx     | 57 ++++++++++---------
 .../components/shared/DiffRenderer.tsx        | 11 ++--
 3 files changed, 74 insertions(+), 48 deletions(-)

diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index 1e50a55aa3..e03148c3a9 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -59,8 +59,8 @@ interface InlineComposerRequest {
   requestId: number;
   prefill: string;
   hunkId: string;
-  startIndex: number;
-  endIndex: number;
+  startOffset: number;
+  endOffset: number;
 }
 
 interface SelectedLineRange {
@@ -500,6 +500,16 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
   const [activeLineIndex, setActiveLineIndex] = useState<number | null>(null);
   const [selectedLineRange, setSelectedLineRange] = useState<SelectedLineRange | null>(null);
 
+  useEffect(() => {
+    if (!inlineComposerRequest) {
+      return;
+    }
+
+    if (!selectedHunk || inlineComposerRequest.hunkId !== selectedHunk.id) {
+      setInlineComposerRequest(null);
+    }
+  }, [inlineComposerRequest, selectedHunk]);
+
   // Refs keep hot-path callbacks stable so cursor movement doesn't trigger expensive re-renders.
   const activeLineIndexRef = useRef<number | null>(null);
   const selectedLineRangeRef = useRef<SelectedLineRange | null>(null);
@@ -661,8 +671,8 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
         requestId: nextComposerRequestIdRef.current,
         prefill,
         hunkId: selectedHunk.id,
-        startIndex: effectiveSelection.startIndex,
-        endIndex: effectiveSelection.endIndex,
+        startOffset: effectiveSelection.startIndex - selectedHunkRange.startIndex,
+        endOffset: effectiveSelection.endIndex - selectedHunkRange.startIndex,
       });
     },
     [getCurrentLineSelection, selectedHunk, selectedHunkRange]
@@ -875,6 +885,28 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     return `${relativeStart}-${relativeEnd}`;
   }, [selectedLineSummary, selectedHunkRange]);
 
+  const externalComposerSelectionRequest = useMemo(() => {
+    if (!inlineComposerRequest || !selectedHunk || !selectedHunkRange) {
+      return null;
+    }
+
+    if (inlineComposerRequest.hunkId !== selectedHunk.id) {
+      return null;
+    }
+
+    const clampToHunk = (lineIndex: number) =>
+      Math.max(selectedHunkRange.startIndex, Math.min(selectedHunkRange.endIndex, lineIndex));
+
+    return {
+      requestId: inlineComposerRequest.requestId,
+      selection: {
+        startIndex: clampToHunk(selectedHunkRange.startIndex + inlineComposerRequest.startOffset),
+        endIndex: clampToHunk(selectedHunkRange.startIndex + inlineComposerRequest.endOffset),
+      },
+      initialNoteText: inlineComposerRequest.prefill,
+    };
+  }, [inlineComposerRequest, selectedHunk, selectedHunkRange]);
+
   const shouldEnableHighlighting = overlayData.lineHunkIds.length <= MAX_HIGHLIGHTED_DIFF_LINES;
 
   return (
@@ -989,19 +1021,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
                 enableHighlighting={shouldEnableHighlighting}
                 selectedLineRange={selectedLineRange}
                 onLineIndexSelect={handleLineIndexSelect}
-                externalSelectionRequest={
-                  inlineComposerRequest?.hunkId != null &&
-                  inlineComposerRequest.hunkId === selectedHunk?.id
-                    ? {
-                        requestId: inlineComposerRequest.requestId,
-                        selection: {
-                          startIndex: inlineComposerRequest.startIndex,
-                          endIndex: inlineComposerRequest.endIndex,
-                        },
-                        initialNoteText: inlineComposerRequest.prefill,
-                      }
-                    : null
-                }
+                externalSelectionRequest={externalComposerSelectionRequest}
               />
             </div>
           )}
diff --git a/src/browser/components/WorkspaceShell.tsx b/src/browser/components/WorkspaceShell.tsx
index bace2527f8..f61ff7b30c 100644
--- a/src/browser/components/WorkspaceShell.tsx
+++ b/src/browser/components/WorkspaceShell.tsx
@@ -157,34 +157,39 @@ export const WorkspaceShell: React.FC<WorkspaceShellProps> = (props) => {
       style={{ containerType: "inline-size" }}
     >
       {/* Keyed by workspaceId to prevent cross-workspace message-list flashes. */}
-      <ChatPane
+      <div
         key={`chat-${props.workspaceId}`}
-        workspaceId={props.workspaceId}
-        workspaceState={workspaceState}
-        projectPath={props.projectPath}
-        projectName={props.projectName}
-        workspaceName={props.workspaceName}
-        namedWorkspacePath={props.namedWorkspacePath}
-        leftSidebarCollapsed={props.leftSidebarCollapsed}
-        onToggleLeftSidebarCollapsed={props.onToggleLeftSidebarCollapsed}
-        runtimeConfig={props.runtimeConfig}
-        onOpenTerminal={handleOpenTerminal}
+        className="min-h-0 min-w-0 flex-1"
         aria-hidden={isReviewImmersive || undefined}
-      />
-
-      <RightSidebar
-        key={props.workspaceId}
-        workspaceId={props.workspaceId}
-        workspacePath={props.namedWorkspacePath}
-        projectPath={props.projectPath}
-        width={sidebarWidth}
-        onStartResize={startResize}
-        isResizing={isResizing}
-        onReviewNote={handleReviewNote}
-        isCreating={props.isInitializing === true}
-        addTerminalRef={addTerminalRef}
-        aria-hidden={isReviewImmersive || undefined}
-      />
+      >
+        <ChatPane
+          workspaceId={props.workspaceId}
+          workspaceState={workspaceState}
+          projectPath={props.projectPath}
+          projectName={props.projectName}
+          workspaceName={props.workspaceName}
+          namedWorkspacePath={props.namedWorkspacePath}
+          leftSidebarCollapsed={props.leftSidebarCollapsed}
+          onToggleLeftSidebarCollapsed={props.onToggleLeftSidebarCollapsed}
+          runtimeConfig={props.runtimeConfig}
+          onOpenTerminal={handleOpenTerminal}
+        />
+      </div>
+
+      <div className="min-h-0" aria-hidden={isReviewImmersive || undefined}>
+        <RightSidebar
+          key={props.workspaceId}
+          workspaceId={props.workspaceId}
+          workspacePath={props.namedWorkspacePath}
+          projectPath={props.projectPath}
+          width={sidebarWidth}
+          onStartResize={startResize}
+          isResizing={isResizing}
+          onReviewNote={handleReviewNote}
+          isCreating={props.isInitializing === true}
+          addTerminalRef={addTerminalRef}
+        />
+      </div>
 
       {/* Portal target for immersive review mode overlay */}
       <div
diff --git a/src/browser/components/shared/DiffRenderer.tsx b/src/browser/components/shared/DiffRenderer.tsx
index fe24c3eba8..28d1d22681 100644
--- a/src/browser/components/shared/DiffRenderer.tsx
+++ b/src/browser/components/shared/DiffRenderer.tsx
@@ -975,23 +975,24 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
     const [selection, setSelection] = React.useState<LineSelection | null>(null);
     const [selectionInitialNoteText, setSelectionInitialNoteText] = React.useState("");
 
-    const lastExternalSelectionRequestIdRef = React.useRef<number | null>(null);
+    const lastExternalSelectionSignatureRef = React.useRef<string | null>(null);
 
     React.useEffect(() => {
       if (!externalSelectionRequest) {
-        if (lastExternalSelectionRequestIdRef.current !== null) {
-          lastExternalSelectionRequestIdRef.current = null;
+        if (lastExternalSelectionSignatureRef.current !== null) {
+          lastExternalSelectionSignatureRef.current = null;
           setSelection(null);
           setSelectionInitialNoteText("");
         }
         return;
       }
 
-      if (lastExternalSelectionRequestIdRef.current === externalSelectionRequest.requestId) {
+      const signature = `${externalSelectionRequest.requestId}:${externalSelectionRequest.selection.startIndex}:${externalSelectionRequest.selection.endIndex}:${externalSelectionRequest.initialNoteText ?? ""}`;
+      if (lastExternalSelectionSignatureRef.current === signature) {
         return;
       }
 
-      lastExternalSelectionRequestIdRef.current = externalSelectionRequest.requestId;
+      lastExternalSelectionSignatureRef.current = signature;
       setSelection({
         startIndex: externalSelectionRequest.selection.startIndex,
         endIndex: externalSelectionRequest.selection.endIndex,

From 770a611e0c429863cc1b6efff57c94423bc0f380 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Tue, 17 Feb 2026 18:09:59 +0000
Subject: [PATCH 19/48] =?UTF-8?q?=F0=9F=A4=96=20fix:=20harden=20immersive?=
 =?UTF-8?q?=20focus=20blocking=20and=20composer=20request=20lifecycle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/browser/components/WorkspaceShell.tsx | 36 +++++++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/browser/components/WorkspaceShell.tsx b/src/browser/components/WorkspaceShell.tsx
index f61ff7b30c..bd92a6119a 100644
--- a/src/browser/components/WorkspaceShell.tsx
+++ b/src/browser/components/WorkspaceShell.tsx
@@ -1,5 +1,5 @@
 import type { TerminalSessionCreateOptions } from "@/browser/utils/terminal";
-import React, { useCallback, useRef } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 import { cn } from "@/common/lib/utils";
 import { RIGHT_SIDEBAR_WIDTH_KEY, getReviewImmersiveKey } from "@/common/constants/storage";
 import { useResizableSidebar } from "@/browser/hooks/useResizableSidebar";
@@ -66,6 +66,8 @@ const WorkspacePlaceholder: React.FC<{
 
 export const WorkspaceShell: React.FC<WorkspaceShellProps> = (props) => {
   const shellRef = useRef<HTMLDivElement>(null);
+  const chatPaneWrapperRef = useRef<HTMLDivElement>(null);
+  const rightSidebarWrapperRef = useRef<HTMLDivElement>(null);
   const shellSize = useResizeObserver(shellRef);
 
   // WorkspaceShell switches to flex-col at this breakpoint, so in that stacked mode the
@@ -131,6 +133,31 @@ export const WorkspaceShell: React.FC<WorkspaceShellProps> = (props) => {
   const [isReviewImmersive] = usePersistedState(getReviewImmersiveKey(props.workspaceId), false, {
     listener: true,
   });
+  // `aria-hidden` is not enough to block focus/keyboard interaction behind immersive mode.
+  // Apply/remove `inert` imperatively on the rendered pane wrappers so background controls
+  // cannot steal focus while the immersive overlay is active.
+  useEffect(() => {
+    const wrappers = [chatPaneWrapperRef.current, rightSidebarWrapperRef.current];
+
+    for (const wrapper of wrappers) {
+      if (!wrapper) {
+        continue;
+      }
+
+      if (isReviewImmersive) {
+        wrapper.setAttribute("inert", "");
+      } else {
+        wrapper.removeAttribute("inert");
+      }
+    }
+
+    return () => {
+      for (const wrapper of wrappers) {
+        wrapper?.removeAttribute("inert");
+      }
+    };
+  }, [isReviewImmersive]);
+
   const backgroundBashError = useBackgroundBashError();
 
   if (!workspaceState || workspaceState.loading) {
@@ -158,6 +185,7 @@ export const WorkspaceShell: React.FC<WorkspaceShellProps> = (props) => {
     >
       {/* Keyed by workspaceId to prevent cross-workspace message-list flashes. */}
       <div
+        ref={chatPaneWrapperRef}
         key={`chat-${props.workspaceId}`}
         className="min-h-0 min-w-0 flex-1"
         aria-hidden={isReviewImmersive || undefined}
@@ -176,7 +204,11 @@ export const WorkspaceShell: React.FC<WorkspaceShellProps> = (props) => {
         />
       </div>
 
-      <div className="min-h-0" aria-hidden={isReviewImmersive || undefined}>
+      <div
+        ref={rightSidebarWrapperRef}
+        className="min-h-0"
+        aria-hidden={isReviewImmersive || undefined}
+      >
         <RightSidebar
           key={props.workspaceId}
           workspaceId={props.workspaceId}

From 498dc6c918009f1ffd57d16ccabe1bc3dd561c62 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Tue, 17 Feb 2026 18:18:30 +0000
Subject: [PATCH 20/48] =?UTF-8?q?=F0=9F=A4=96=20fix:=20reapply=20immersive?=
 =?UTF-8?q?=20inert=20state=20after=20placeholder=20mount?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/browser/components/WorkspaceShell.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/browser/components/WorkspaceShell.tsx b/src/browser/components/WorkspaceShell.tsx
index bd92a6119a..6ff5bc01c4 100644
--- a/src/browser/components/WorkspaceShell.tsx
+++ b/src/browser/components/WorkspaceShell.tsx
@@ -156,7 +156,7 @@ export const WorkspaceShell: React.FC<WorkspaceShellProps> = (props) => {
         wrapper?.removeAttribute("inert");
       }
     };
-  }, [isReviewImmersive]);
+  }, [isReviewImmersive, workspaceState?.loading, props.projectName, props.workspaceName]);
 
   const backgroundBashError = useBackgroundBashError();
 

From c048b394f62663b81ececb5a4126287a8133b900 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Tue, 17 Feb 2026 18:29:04 +0000
Subject: [PATCH 21/48] =?UTF-8?q?=F0=9F=A4=96=20fix:=20rerun=20inert=20syn?=
 =?UTF-8?q?c=20when=20workspace=20changes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/browser/components/WorkspaceShell.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/browser/components/WorkspaceShell.tsx b/src/browser/components/WorkspaceShell.tsx
index 6ff5bc01c4..0a0a791f36 100644
--- a/src/browser/components/WorkspaceShell.tsx
+++ b/src/browser/components/WorkspaceShell.tsx
@@ -156,7 +156,13 @@ export const WorkspaceShell: React.FC<WorkspaceShellProps> = (props) => {
         wrapper?.removeAttribute("inert");
       }
     };
-  }, [isReviewImmersive, workspaceState?.loading, props.projectName, props.workspaceName]);
+  }, [
+    isReviewImmersive,
+    props.workspaceId,
+    workspaceState?.loading,
+    props.projectName,
+    props.workspaceName,
+  ]);
 
   const backgroundBashError = useBackgroundBashError();
 

From 1996e524456fe453cb3b4fb52d883401718810f8 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Tue, 17 Feb 2026 19:44:56 +0000
Subject: [PATCH 22/48] =?UTF-8?q?=F0=9F=A4=96=20fix:=20preserve=20shell=20?=
 =?UTF-8?q?layout=20while=20enforcing=20immersive=20pane=20inertness?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/browser/components/ChatPane.tsx       | 21 +++++
 src/browser/components/RightSidebar.tsx   | 27 +++++++
 src/browser/components/WorkspaceShell.tsx | 97 +++++++----------------
 3 files changed, 75 insertions(+), 70 deletions(-)

diff --git a/src/browser/components/ChatPane.tsx b/src/browser/components/ChatPane.tsx
index d174a172c3..adf4e09ea3 100644
--- a/src/browser/components/ChatPane.tsx
+++ b/src/browser/components/ChatPane.tsx
@@ -128,6 +128,8 @@ interface ChatPaneProps {
   onToggleLeftSidebarCollapsed: () => void;
   runtimeConfig?: RuntimeConfig;
   onOpenTerminal: (options?: TerminalSessionCreateOptions) => void;
+  /** Hide + inactivate chat pane while immersive review overlay is active. */
+  immersiveHidden?: boolean;
 }
 
 type ReviewsState = ReturnType<typeof useReviews>;
@@ -144,11 +146,29 @@ export const ChatPane: React.FC<ChatPaneProps> = (props) => {
     runtimeConfig,
     onOpenTerminal,
     workspaceState,
+    immersiveHidden = false,
   } = props;
   const { api } = useAPI();
   const { workspaceMetadata } = useWorkspaceContext();
   const chatAreaRef = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    const chatPaneElement = chatAreaRef.current;
+    if (!chatPaneElement) {
+      return;
+    }
+
+    if (immersiveHidden) {
+      chatPaneElement.setAttribute("inert", "");
+    } else {
+      chatPaneElement.removeAttribute("inert");
+    }
+
+    return () => {
+      chatPaneElement.removeAttribute("inert");
+    };
+  }, [immersiveHidden, workspaceId]);
+
   const storeRaw = useWorkspaceStoreRaw();
   const aggregator = useWorkspaceAggregator(workspaceId);
   const workspaceUsage = useWorkspaceUsage(workspaceId);
@@ -671,6 +691,7 @@ export const ChatPane: React.FC<ChatPaneProps> = (props) => {
     <PerfRenderMarker id="chat-pane">
       <div
         ref={chatAreaRef}
+        aria-hidden={immersiveHidden || undefined}
         className="flex min-w-96 flex-1 flex-col [@media(max-width:768px)]:max-h-full [@media(max-width:768px)]:w-full [@media(max-width:768px)]:min-w-0"
       >
         <PerfRenderMarker id="chat-pane.header">
diff --git a/src/browser/components/RightSidebar.tsx b/src/browser/components/RightSidebar.tsx
index 7600f570e9..781d6dae24 100644
--- a/src/browser/components/RightSidebar.tsx
+++ b/src/browser/components/RightSidebar.tsx
@@ -111,6 +111,8 @@ interface SidebarContainerProps {
   isResizing?: boolean;
   /** Whether running in Electron desktop mode (hides border when collapsed) */
   isDesktop?: boolean;
+  /** Hide + inactivate sidebar while immersive review overlay is active. */
+  immersiveHidden?: boolean;
   children: React.ReactNode;
   role: string;
   "aria-label": string;
@@ -129,14 +131,35 @@ const SidebarContainer: React.FC<SidebarContainerProps> = ({
   customWidth,
   isResizing,
   isDesktop,
+  immersiveHidden = false,
   children,
   role,
   "aria-label": ariaLabel,
 }) => {
+  const containerRef = React.useRef<HTMLDivElement>(null);
   const width = collapsed ? "20px" : customWidth ? `${customWidth}px` : "400px";
 
+  React.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+
+    if (immersiveHidden) {
+      container.setAttribute("inert", "");
+    } else {
+      container.removeAttribute("inert");
+    }
+
+    return () => {
+      container.removeAttribute("inert");
+    };
+  }, [immersiveHidden]);
+
   return (
     <div
+      ref={containerRef}
+      aria-hidden={immersiveHidden || undefined}
       className={cn(
         "bg-sidebar border-l border-border-light flex flex-col overflow-hidden flex-shrink-0",
         // Hide on mobile touch devices - too narrow for useful interaction
@@ -173,6 +196,8 @@ interface RightSidebarProps {
   onReviewNote?: (data: ReviewNoteData) => void;
   /** Workspace is still being created (git operations in progress) */
   isCreating?: boolean;
+  /** Hide + inactivate sidebar while immersive review overlay is active. */
+  immersiveHidden?: boolean;
   /** Ref callback to expose addTerminal function to parent */
   addTerminalRef?: React.MutableRefObject<
     ((options?: TerminalSessionCreateOptions) => void) | null
@@ -610,6 +635,7 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
   isResizing = false,
   onReviewNote,
   isCreating = false,
+  immersiveHidden = false,
   addTerminalRef,
 }) => {
   // Trigger for focusing Review panel (preserves hunk selection)
@@ -1279,6 +1305,7 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
         collapsed={collapsed}
         isResizing={isResizing}
         isDesktop={isDesktopMode()}
+        immersiveHidden={immersiveHidden}
         customWidth={width} // Unified width from AIView (applies to all tabs)
         role="complementary"
         aria-label="Workspace insights"
diff --git a/src/browser/components/WorkspaceShell.tsx b/src/browser/components/WorkspaceShell.tsx
index 0a0a791f36..b33635aae7 100644
--- a/src/browser/components/WorkspaceShell.tsx
+++ b/src/browser/components/WorkspaceShell.tsx
@@ -1,5 +1,5 @@
 import type { TerminalSessionCreateOptions } from "@/browser/utils/terminal";
-import React, { useCallback, useEffect, useRef } from "react";
+import React, { useCallback, useRef } from "react";
 import { cn } from "@/common/lib/utils";
 import { RIGHT_SIDEBAR_WIDTH_KEY, getReviewImmersiveKey } from "@/common/constants/storage";
 import { useResizableSidebar } from "@/browser/hooks/useResizableSidebar";
@@ -66,8 +66,6 @@ const WorkspacePlaceholder: React.FC<{
 
 export const WorkspaceShell: React.FC<WorkspaceShellProps> = (props) => {
   const shellRef = useRef<HTMLDivElement>(null);
-  const chatPaneWrapperRef = useRef<HTMLDivElement>(null);
-  const rightSidebarWrapperRef = useRef<HTMLDivElement>(null);
   const shellSize = useResizeObserver(shellRef);
 
   // WorkspaceShell switches to flex-col at this breakpoint, so in that stacked mode the
@@ -133,37 +131,6 @@ export const WorkspaceShell: React.FC<WorkspaceShellProps> = (props) => {
   const [isReviewImmersive] = usePersistedState(getReviewImmersiveKey(props.workspaceId), false, {
     listener: true,
   });
-  // `aria-hidden` is not enough to block focus/keyboard interaction behind immersive mode.
-  // Apply/remove `inert` imperatively on the rendered pane wrappers so background controls
-  // cannot steal focus while the immersive overlay is active.
-  useEffect(() => {
-    const wrappers = [chatPaneWrapperRef.current, rightSidebarWrapperRef.current];
-
-    for (const wrapper of wrappers) {
-      if (!wrapper) {
-        continue;
-      }
-
-      if (isReviewImmersive) {
-        wrapper.setAttribute("inert", "");
-      } else {
-        wrapper.removeAttribute("inert");
-      }
-    }
-
-    return () => {
-      for (const wrapper of wrappers) {
-        wrapper?.removeAttribute("inert");
-      }
-    };
-  }, [
-    isReviewImmersive,
-    props.workspaceId,
-    workspaceState?.loading,
-    props.projectName,
-    props.workspaceName,
-  ]);
-
   const backgroundBashError = useBackgroundBashError();
 
   if (!workspaceState || workspaceState.loading) {
@@ -190,44 +157,34 @@ export const WorkspaceShell: React.FC<WorkspaceShellProps> = (props) => {
       style={{ containerType: "inline-size" }}
     >
       {/* Keyed by workspaceId to prevent cross-workspace message-list flashes. */}
-      <div
-        ref={chatPaneWrapperRef}
+      <ChatPane
         key={`chat-${props.workspaceId}`}
-        className="min-h-0 min-w-0 flex-1"
-        aria-hidden={isReviewImmersive || undefined}
-      >
-        <ChatPane
-          workspaceId={props.workspaceId}
-          workspaceState={workspaceState}
-          projectPath={props.projectPath}
-          projectName={props.projectName}
-          workspaceName={props.workspaceName}
-          namedWorkspacePath={props.namedWorkspacePath}
-          leftSidebarCollapsed={props.leftSidebarCollapsed}
-          onToggleLeftSidebarCollapsed={props.onToggleLeftSidebarCollapsed}
-          runtimeConfig={props.runtimeConfig}
-          onOpenTerminal={handleOpenTerminal}
-        />
-      </div>
+        workspaceId={props.workspaceId}
+        workspaceState={workspaceState}
+        projectPath={props.projectPath}
+        projectName={props.projectName}
+        workspaceName={props.workspaceName}
+        namedWorkspacePath={props.namedWorkspacePath}
+        leftSidebarCollapsed={props.leftSidebarCollapsed}
+        onToggleLeftSidebarCollapsed={props.onToggleLeftSidebarCollapsed}
+        runtimeConfig={props.runtimeConfig}
+        onOpenTerminal={handleOpenTerminal}
+        immersiveHidden={isReviewImmersive}
+      />
 
-      <div
-        ref={rightSidebarWrapperRef}
-        className="min-h-0"
-        aria-hidden={isReviewImmersive || undefined}
-      >
-        <RightSidebar
-          key={props.workspaceId}
-          workspaceId={props.workspaceId}
-          workspacePath={props.namedWorkspacePath}
-          projectPath={props.projectPath}
-          width={sidebarWidth}
-          onStartResize={startResize}
-          isResizing={isResizing}
-          onReviewNote={handleReviewNote}
-          isCreating={props.isInitializing === true}
-          addTerminalRef={addTerminalRef}
-        />
-      </div>
+      <RightSidebar
+        key={props.workspaceId}
+        workspaceId={props.workspaceId}
+        workspacePath={props.namedWorkspacePath}
+        projectPath={props.projectPath}
+        width={sidebarWidth}
+        onStartResize={startResize}
+        isResizing={isResizing}
+        onReviewNote={handleReviewNote}
+        isCreating={props.isInitializing === true}
+        immersiveHidden={isReviewImmersive}
+        addTerminalRef={addTerminalRef}
+      />
 
       {/* Portal target for immersive review mode overlay */}
       <div

From e99fadb87b24229f5de02f05c1592e1fb2eea269 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Wed, 18 Feb 2026 11:48:16 +0000
Subject: [PATCH 23/48] fix: update immersive review keybinds and navigation
 toast

---
 .../CodeReview/ImmersiveReviewView.tsx        | 56 +++++++++++++++----
 .../Settings/sections/KeybindsSection.tsx     |  4 +-
 src/browser/utils/ui/keybinds.ts              | 13 +++--
 3 files changed, 55 insertions(+), 18 deletions(-)

diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index e03148c3a9..760d925522 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -499,6 +499,13 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
   // Keyboard line cursor state within the whole rendered file.
   const [activeLineIndex, setActiveLineIndex] = useState<number | null>(null);
   const [selectedLineRange, setSelectedLineRange] = useState<SelectedLineRange | null>(null);
+  const [boundaryToast, setBoundaryToast] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!boundaryToast) return;
+    const timer = setTimeout(() => setBoundaryToast(null), 2500);
+    return () => clearTimeout(timer);
+  }, [boundaryToast]);
 
   useEffect(() => {
     if (!inlineComposerRequest) {
@@ -611,7 +618,10 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
         nextIdx = direction === 1 ? 0 : currentFileHunks.length - 1;
       } else {
         nextIdx = currentIdx + direction;
-        if (nextIdx < 0 || nextIdx >= currentFileHunks.length) return;
+        if (nextIdx < 0 || nextIdx >= currentFileHunks.length) {
+          setBoundaryToast("No more hunks in this file — use H / L to move between files");
+          return;
+        }
       }
 
       hunkJumpRef.current = true;
@@ -744,7 +754,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
         return;
       }
 
-      // n/p: next/prev file
+      // L/H: next/prev file
       if (matchesKeybind(e, KEYBINDS.REVIEW_NEXT_FILE)) {
         e.preventDefault();
         navigateFile(1);
@@ -756,7 +766,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
         return;
       }
 
-      // k/j: next/prev hunk
+      // J/K: next/prev hunk
       if (matchesKeybind(e, KEYBINDS.REVIEW_NEXT_HUNK)) {
         e.preventDefault();
         navigateHunk(1);
@@ -790,13 +800,20 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
         return;
       }
 
-      // Shift+L: add comment
-      if (matchesKeybind(e, KEYBINDS.REVIEW_QUICK_LIKE)) {
+      // Shift+C: add comment
+      if (matchesKeybind(e, KEYBINDS.REVIEW_COMMENT)) {
         e.preventDefault();
         openComposer("");
         return;
       }
 
+      // Shift+L: quick like
+      if (matchesKeybind(e, KEYBINDS.REVIEW_QUICK_LIKE)) {
+        e.preventDefault();
+        openComposer("I like this change");
+        return;
+      }
+
       // Shift+D: quick dislike
       if (matchesKeybind(e, KEYBINDS.REVIEW_QUICK_DISLIKE)) {
         e.preventDefault();
@@ -823,9 +840,14 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     onToggleRead,
   ]);
 
+  const previousContentRef = useRef(overlayData.content);
+
   // Keep the active line visible while moving with keyboard shortcuts, without
   // forcing the full diff tree to re-render on every cursor move.
   useEffect(() => {
+    const contentChanged = previousContentRef.current !== overlayData.content;
+    previousContentRef.current = overlayData.content;
+
     const previousLineElement = highlightedLineElementRef.current;
     if (previousLineElement) {
       previousLineElement.style.outline = "";
@@ -848,7 +870,9 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     lineElement.style.outlineOffset = "-1px";
     highlightedLineElementRef.current = lineElement;
 
-    const block = hunkJumpRef.current ? "center" : "nearest";
+    // Re-center when content changes (e.g. full file content loaded after initial
+    // fallback-hunk render) to prevent the target hunk from jumping to the viewport edge.
+    const block = hunkJumpRef.current || contentChanged ? "center" : "nearest";
     hunkJumpRef.current = false;
 
     lineElement.scrollIntoView({ behavior: "auto", block });
@@ -1125,17 +1149,25 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
         </aside>
       </div>
 
+      {/* Boundary toast */}
+      {boundaryToast && (
+        <div className="pointer-events-none absolute right-0 bottom-12 left-0 z-10 flex justify-center">
+          <div className="bg-background-secondary text-muted border-border-light pointer-events-auto rounded-md border px-3 py-1.5 text-xs shadow-md">
+            {boundaryToast}
+          </div>
+        </div>
+      )}
+
       {/* Shortcut bar */}
       <div className="border-border-light bg-dark flex flex-wrap items-center justify-center gap-3 border-t px-3 py-1.5">
         <KeycapGroup keys={["Esc"]} label="back" />
-        <KeycapGroup keys={["n", "p"]} label="file" />
-        <KeycapGroup keys={["k", "j"]} label="hunk" />
+        <KeycapGroup keys={["H", "L"]} label="file" />
+        <KeycapGroup keys={["J", "K"]} label="hunk" />
         <KeycapGroup keys={["↑", "↓"]} label="line" />
-        <KeycapGroup keys={["Shift", "↑", "↓"]} label="select" />
-        <KeycapGroup keys={["Ctrl", "↑", "↓"]} label="jump 10" />
+        <KeycapGroup keys={["Shift", "↑↓"]} label="select" />
         <KeycapGroup keys={["m"]} label="read" />
-        <KeycapGroup keys={["Shift", "l"]} label="comment" />
-        <KeycapGroup keys={["Shift", "d"]} label="dislike" />
+        <KeycapGroup keys={["⇧C"]} label="comment" />
+        <KeycapGroup keys={["⇧L", "⇧D"]} label="like / dislike" />
         <KeycapGroup keys={["Enter"]} label="submit" />
       </div>
     </div>
diff --git a/src/browser/components/Settings/sections/KeybindsSection.tsx b/src/browser/components/Settings/sections/KeybindsSection.tsx
index 409fb3f7af..218cb18409 100644
--- a/src/browser/components/Settings/sections/KeybindsSection.tsx
+++ b/src/browser/components/Settings/sections/KeybindsSection.tsx
@@ -68,8 +68,9 @@ const KEYBIND_LABELS: Record<keyof typeof KEYBINDS, string> = {
   REVIEW_CURSOR_UP: "Line cursor up (immersive)",
   REVIEW_CURSOR_JUMP_DOWN: "Jump 10 lines down (immersive)",
   REVIEW_CURSOR_JUMP_UP: "Jump 10 lines up (immersive)",
-  REVIEW_QUICK_LIKE: "Add comment (immersive)",
+  REVIEW_QUICK_LIKE: "Quick like (immersive)",
   REVIEW_QUICK_DISLIKE: "Quick dislike (immersive)",
+  REVIEW_COMMENT: "Add comment (immersive)",
   // Easter egg keybind; intentionally omitted from KEYBIND_GROUPS.
   TOGGLE_POWER_MODE: "",
 };
@@ -162,6 +163,7 @@ const KEYBIND_GROUPS: Array<{ label: string; keys: Array<keyof typeof KEYBINDS>
       "REVIEW_PREV_HUNK",
       "REVIEW_QUICK_LIKE",
       "REVIEW_QUICK_DISLIKE",
+      "REVIEW_COMMENT",
     ],
   },
   {
diff --git a/src/browser/utils/ui/keybinds.ts b/src/browser/utils/ui/keybinds.ts
index d70ee9cacd..b4bc99f386 100644
--- a/src/browser/utils/ui/keybinds.ts
+++ b/src/browser/utils/ui/keybinds.ts
@@ -427,16 +427,16 @@ export const KEYBINDS = {
   TOGGLE_REVIEW_IMMERSIVE: { key: "i", shift: true },
 
   /** Navigate to next file in immersive review */
-  REVIEW_NEXT_FILE: { key: "n" },
+  REVIEW_NEXT_FILE: { key: "l" },
 
   /** Navigate to previous file in immersive review */
-  REVIEW_PREV_FILE: { key: "p" },
+  REVIEW_PREV_FILE: { key: "h" },
 
   /** Navigate to next hunk in immersive review */
-  REVIEW_NEXT_HUNK: { key: "k" },
+  REVIEW_NEXT_HUNK: { key: "j" },
 
   /** Navigate to previous hunk in immersive review */
-  REVIEW_PREV_HUNK: { key: "j" },
+  REVIEW_PREV_HUNK: { key: "k" },
 
   /** Move line cursor down in immersive review */
   REVIEW_CURSOR_DOWN: { key: "ArrowDown", allowShift: true },
@@ -450,12 +450,15 @@ export const KEYBINDS = {
   /** Jump line cursor 10 lines up in immersive review */
   REVIEW_CURSOR_JUMP_UP: { key: "ArrowUp", ctrl: true, allowShift: true },
 
-  /** Add comment in immersive review (keeps legacy keybind ID to minimize churn) */
+  /** Quick "I like this" feedback in immersive review */
   REVIEW_QUICK_LIKE: { key: "l", shift: true },
 
   /** Quick "I don't like this" feedback in immersive review */
   REVIEW_QUICK_DISLIKE: { key: "d", shift: true },
 
+  /** Add comment in immersive review */
+  REVIEW_COMMENT: { key: "c", shift: true },
+
   TOGGLE_POWER_MODE: { key: "F12", shift: true },
 } as const;
 

From 49ddc05e7bf7385863ac39b3622dd27a91358ec3 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Wed, 18 Feb 2026 11:44:58 +0000
Subject: [PATCH 24/48] feat: add review tutorial for immersive toggle

---
 .../RightSidebar/CodeReview/ReviewControls.tsx         | 10 ++++++++++
 src/browser/contexts/TutorialContext.tsx               |  8 ++++++++
 src/common/constants/storage.ts                        |  4 ++--
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/browser/components/RightSidebar/CodeReview/ReviewControls.tsx b/src/browser/components/RightSidebar/CodeReview/ReviewControls.tsx
index 014a03eb27..445521496e 100644
--- a/src/browser/components/RightSidebar/CodeReview/ReviewControls.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ReviewControls.tsx
@@ -5,6 +5,7 @@
 import React from "react";
 import { ArrowLeft, Maximize2 } from "lucide-react";
 import { usePersistedState } from "@/browser/hooks/usePersistedState";
+import { useTutorial } from "@/browser/contexts/TutorialContext";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/browser/components/ui/tooltip";
 import { KEYBINDS, formatKeybind } from "@/browser/utils/ui/keybinds";
 import { STORAGE_KEYS, WORKSPACE_DEFAULTS } from "@/constants/workspaceDefaults";
@@ -53,6 +54,14 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
     WORKSPACE_DEFAULTS.reviewBase,
     { listener: true }
   );
+  const { startSequence } = useTutorial();
+
+  // Show the immersive review tutorial the first time the review panel is visible
+  React.useEffect(() => {
+    // Small delay to ensure the button is rendered and measurable
+    const timer = setTimeout(() => startSequence("review"), 500);
+    return () => clearTimeout(timer);
+  }, [startSequence]);
 
   // Use callback form to avoid stale closure issues with filters prop
   const handleBaseChange = (value: string) => {
@@ -164,6 +173,7 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
                 onClick={onToggleImmersive}
                 className="text-muted hover:text-foreground flex cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-[11px] transition-colors duration-150"
                 aria-label={isImmersive ? "Exit immersive review" : "Enter immersive review"}
+                data-tutorial="immersive-review"
               >
                 {isImmersive ? (
                   <ArrowLeft aria-hidden="true" className="h-3 w-3" />
diff --git a/src/browser/contexts/TutorialContext.tsx b/src/browser/contexts/TutorialContext.tsx
index 32af3080a4..436bed0662 100644
--- a/src/browser/contexts/TutorialContext.tsx
+++ b/src/browser/contexts/TutorialContext.tsx
@@ -48,6 +48,14 @@ const TUTORIAL_SEQUENCES: Record<TutorialSequence, TutorialStep[]> = {
       position: "bottom",
     },
   ],
+  review: [
+    {
+      target: "immersive-review",
+      title: "Immersive Review",
+      content: "Try our new immersive keyboard-driven code review experience.",
+      position: "bottom",
+    },
+  ],
 };
 
 interface TutorialContextValue {
diff --git a/src/common/constants/storage.ts b/src/common/constants/storage.ts
index 4691bd1636..7d794d4887 100644
--- a/src/common/constants/storage.ts
+++ b/src/common/constants/storage.ts
@@ -374,11 +374,11 @@ export const DEFAULT_TERMINAL_FONT_CONFIG: TerminalFontConfig = {
 
 /**
  * Tutorial state storage key (global)
- * Stores: { disabled: boolean, completed: { creation?: true, workspace?: true } }
+ * Stores: { disabled: boolean, completed: { creation?: true, workspace?: true, review?: true } }
  */
 export const TUTORIAL_STATE_KEY = "tutorialState";
 
-export type TutorialSequence = "creation" | "workspace";
+export type TutorialSequence = "creation" | "workspace" | "review";
 
 export interface TutorialState {
   disabled: boolean;

From b24ccec3ff8798f7768e02c2bc5246c30e056b33 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Thu, 19 Feb 2026 13:58:53 +0000
Subject: [PATCH 25/48] fix immersive review composer latency and note
 centering

---
 .../CodeReview/ImmersiveReviewView.tsx        |  6 ++-
 .../components/shared/DiffRenderer.tsx        | 42 +++++++++++++------
 2 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index 760d925522..be20160e33 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -499,6 +499,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
   // Keyboard line cursor state within the whole rendered file.
   const [activeLineIndex, setActiveLineIndex] = useState<number | null>(null);
   const [selectedLineRange, setSelectedLineRange] = useState<SelectedLineRange | null>(null);
+  const [scrollNonce, setScrollNonce] = useState(0);
   const [boundaryToast, setBoundaryToast] = useState<string | null>(null);
 
   useEffect(() => {
@@ -640,6 +641,9 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
       const targetHunkId = findReviewHunkId(review, fileHunks) ?? fileHunks[0].id;
       hunkJumpRef.current = true;
       onSelectHunk(targetHunkId);
+      // Force scroll effect to re-fire even when activeLineIndex is unchanged
+      // (for example when the cursor is already inside the selected hunk).
+      setScrollNonce((previousNonce) => previousNonce + 1);
     },
     [allHunks, onSelectHunk]
   );
@@ -876,7 +880,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     hunkJumpRef.current = false;
 
     lineElement.scrollIntoView({ behavior: "auto", block });
-  }, [activeLineIndex, overlayData.content]);
+  }, [activeLineIndex, overlayData.content, scrollNonce]);
 
   useEffect(() => {
     return () => {
diff --git a/src/browser/components/shared/DiffRenderer.tsx b/src/browser/components/shared/DiffRenderer.tsx
index 28d1d22681..8e647068cb 100644
--- a/src/browser/components/shared/DiffRenderer.tsx
+++ b/src/browser/components/shared/DiffRenderer.tsx
@@ -993,6 +993,9 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
       }
 
       lastExternalSelectionSignatureRef.current = signature;
+      // Sync to internal state so drag interactions work after external requests.
+      // renderSelection/renderNoteText below ensure the composer appears
+      // immediately without waiting for this async state update.
       setSelection({
         startIndex: externalSelectionRequest.selection.startIndex,
         endIndex: externalSelectionRequest.selection.endIndex,
@@ -1000,10 +1003,24 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
       setSelectionInitialNoteText(externalSelectionRequest.initialNoteText ?? "");
     }, [externalSelectionRequest]);
 
+    // Derive effective selection synchronously from external requests to avoid
+    // an extra render cycle through useEffect -> setSelection on large diffs.
+    const renderSelection: LineSelection | null = externalSelectionRequest
+      ? {
+          startIndex: externalSelectionRequest.selection.startIndex,
+          endIndex: externalSelectionRequest.selection.endIndex,
+        }
+      : selection;
+    const renderNoteText = externalSelectionRequest
+      ? (externalSelectionRequest.initialNoteText ?? "")
+      : selectionInitialNoteText;
+    const renderSelectionStartIndex = renderSelection?.startIndex ?? null;
+
     // Notify parent when composition state changes
+    const isComposing = renderSelection !== null;
     React.useEffect(() => {
-      onComposingChange?.(selection !== null);
-    }, [selection, onComposingChange]);
+      onComposingChange?.(isComposing);
+    }, [isComposing, onComposingChange]);
 
     // On unmount, ensure we release the pause if we were composing
     // (separate effect with empty deps so cleanup only runs on unmount)
@@ -1148,13 +1165,14 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
         // Notify parent that this hunk should become active
         onLineClick?.();
 
-        const anchor = shiftKey && selection ? selection.startIndex : lineIndex;
+        const anchor =
+          shiftKey && renderSelectionStartIndex !== null ? renderSelectionStartIndex : lineIndex;
         dragAnchorRef.current = anchor;
         setIsDragging(true);
         setSelectionInitialNoteText("");
         setSelection({ startIndex: anchor, endIndex: lineIndex });
       },
-      [onLineClick, onReviewNote, selection]
+      [onLineClick, onReviewNote, renderSelectionStartIndex]
     );
 
     const updateDragSelection = React.useCallback(
@@ -1173,8 +1191,8 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
       onLineClick?.();
 
       // Shift-click: extend existing selection
-      if (shiftKey && selection) {
-        const start = selection.startIndex;
+      if (shiftKey && renderSelection) {
+        const start = renderSelection.startIndex;
         setSelectionInitialNoteText("");
         setSelection({
           startIndex: start,
@@ -1232,7 +1250,7 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
         lastLineType={lastLineType}
       >
         {highlightedLineData.map((lineInfo, displayIndex) => {
-          const isComposerSelected = isLineInSelection(displayIndex, selection);
+          const isComposerSelected = isLineInSelection(displayIndex, renderSelection);
           const isRangeSelected = isLineInSelection(displayIndex, selectedLineRange);
           const isActiveLine = activeLineIndex === displayIndex;
           const isInReviewRange = reviewRangeByLineIndex[displayIndex] ?? false;
@@ -1301,7 +1319,7 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
                   }}
                   reviewButton={
                     onReviewNote && (
-                      <Tooltip open={selection || isDragging ? false : undefined}>
+                      <Tooltip open={renderSelection || isDragging ? false : undefined}>
                         <TooltipTrigger asChild>
                           <button
                             className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-sm text-[var(--color-review-accent)]/60 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 hover:text-[var(--color-review-accent)] active:scale-90"
@@ -1336,10 +1354,10 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
 
               {/* Show textarea after the last selected line */}
               {isComposerSelected &&
-                selection &&
-                displayIndex === Math.max(selection.startIndex, selection.endIndex) && (
+                renderSelection &&
+                displayIndex === Math.max(renderSelection.startIndex, renderSelection.endIndex) && (
                   <ReviewNoteInput
-                    selection={selection}
+                    selection={renderSelection}
                     lineData={lineData}
                     filePath={filePath}
                     showLineNumbers={showLineNumbers}
@@ -1347,7 +1365,7 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
                     lineNumberWidths={lineNumberWidths}
                     onSubmit={handleSubmitNote}
                     onCancel={handleCancelNote}
-                    initialNoteText={selectionInitialNoteText}
+                    initialNoteText={renderNoteText}
                   />
                 )}
 

From 4b563b95f45a83fe70ee9f8bc3e6b6e9f3c8b6d4 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Fri, 20 Feb 2026 12:11:31 +0000
Subject: [PATCH 26/48] Fix immersive review submit, scroll jump, and loading
 UI

---
 .../CodeReview/ImmersiveReviewView.tsx        | 34 ++++++++++++++++---
 .../RightSidebar/CodeReview/ReviewPanel.tsx   |  1 +
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index be20160e33..bde63c62e3 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -43,6 +43,8 @@ interface ImmersiveReviewViewProps {
   hunks: DiffHunk[];
   /** All hunks (unfiltered, for context) */
   allHunks: DiffHunk[];
+  /** True while diff/tree payload for this workspace is still loading. */
+  isLoading?: boolean;
   isRead: (hunkId: string) => boolean;
   onToggleRead: (hunkId: string) => void;
   selectedHunkId: string | null;
@@ -692,6 +694,18 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     [getCurrentLineSelection, selectedHunk, selectedHunkRange]
   );
 
+  const handleReviewNoteSubmit = useCallback(
+    (data: ReviewNoteData) => {
+      onReviewNote?.(data);
+      // DiffRenderer clears its internal selection after submit, but immersive mode may
+      // still keep an external selection request active. Clear it to close the composer
+      // and prevent accidental duplicate submissions on repeated Enter presses.
+      setInlineComposerRequest(null);
+      containerRef.current?.focus();
+    },
+    [onReviewNote]
+  );
+
   const moveLineCursor = useCallback(
     (delta: number, extendRange: boolean) => {
       const lineCount = overlayData.lineHunkIds.length;
@@ -859,6 +873,14 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
       highlightedLineElementRef.current = null;
     }
 
+    // When overlay content structure changes (fallback hunks -> full-file view),
+    // defer scrolling until the selected-hunk effect has recalculated activeLineIndex
+    // against the new line map. This prevents a transient jump to an old index.
+    if (contentChanged) {
+      hunkJumpRef.current = true;
+      return;
+    }
+
     if (activeLineIndex === null) {
       return;
     }
@@ -874,9 +896,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     lineElement.style.outlineOffset = "-1px";
     highlightedLineElementRef.current = lineElement;
 
-    // Re-center when content changes (e.g. full file content loaded after initial
-    // fallback-hunk render) to prevent the target hunk from jumping to the viewport edge.
-    const block = hunkJumpRef.current || contentChanged ? "center" : "nearest";
+    const block = hunkJumpRef.current ? "center" : "nearest";
     hunkJumpRef.current = false;
 
     lineElement.scrollIntoView({ behavior: "auto", block });
@@ -1027,7 +1047,11 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
       {/* Unified whole-file diff with hunk overlays + notes sidebar */}
       <div className="flex min-h-0 flex-1">
         <div className="min-h-0 min-w-0 flex-1 overflow-y-auto p-3">
-          {currentFileHunks.length === 0 ? (
+          {props.isLoading && currentFileHunks.length === 0 ? (
+            <div className="text-muted flex items-center justify-center py-12 text-sm">
+              <span className="animate-pulse">Loading diff...</span>
+            </div>
+          ) : currentFileHunks.length === 0 ? (
             <div className="text-muted flex items-center justify-center py-12 text-sm">
               {activeFilePath ? "No hunks for this file" : "No files to review"}
             </div>
@@ -1044,7 +1068,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
                 fontSize="11px"
                 maxHeight="none"
                 className="rounded-none border-0 [&>div]:overflow-x-visible"
-                onReviewNote={onReviewNote}
+                onReviewNote={handleReviewNoteSubmit}
                 reviewActions={props.reviewActions}
                 enableHighlighting={shouldEnableHighlighting}
                 selectedLineRange={selectedLineRange}
diff --git a/src/browser/components/RightSidebar/CodeReview/ReviewPanel.tsx b/src/browser/components/RightSidebar/CodeReview/ReviewPanel.tsx
index dfe9102a52..9bc0dc9d09 100644
--- a/src/browser/components/RightSidebar/CodeReview/ReviewPanel.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ReviewPanel.tsx
@@ -1430,6 +1430,7 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
               fileTree={fileTree}
               hunks={filteredHunks}
               allHunks={hunks}
+              isLoading={diffState.status === "loading" || isLoadingTree}
               isRead={isRead}
               onToggleRead={handleToggleRead}
               selectedHunkId={selectedHunkId}

From d6cfe14a7f4b5ee4391ff4e647fdb8113fbaf5c9 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Fri, 20 Feb 2026 13:10:06 +0000
Subject: [PATCH 27/48] Fix Tooltip controlled/uncontrolled warning in
 DiffRenderer

The Tooltip's open prop was toggling between false (controlled) and
undefined (uncontrolled), triggering a React warning on every diff line
render (~206 warnings). Use conditional spread so the prop is either
{ open: false } or absent entirely.
---
 src/browser/components/shared/DiffRenderer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/browser/components/shared/DiffRenderer.tsx b/src/browser/components/shared/DiffRenderer.tsx
index 8e647068cb..6f373a7d18 100644
--- a/src/browser/components/shared/DiffRenderer.tsx
+++ b/src/browser/components/shared/DiffRenderer.tsx
@@ -1319,7 +1319,7 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
                   }}
                   reviewButton={
                     onReviewNote && (
-                      <Tooltip open={renderSelection || isDragging ? false : undefined}>
+                      <Tooltip {...(renderSelection || isDragging ? { open: false } : {})}>
                         <TooltipTrigger asChild>
                           <button
                             className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-sm text-[var(--color-review-accent)]/60 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 hover:text-[var(--color-review-accent)] active:scale-90"

From b01607d20a25239f8499b6a0065fe058053d2ac0 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Fri, 20 Feb 2026 13:17:48 +0000
Subject: [PATCH 28/48] feat: add keyboard focus mode for immersive review
 notes

---
 .../CodeReview/ImmersiveReviewView.tsx        | 118 +++++++++++++++++-
 .../Settings/sections/KeybindsSection.tsx     |   2 +
 src/browser/utils/ui/keybinds.ts              |   3 +
 3 files changed, 119 insertions(+), 4 deletions(-)

diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index bde63c62e3..3f6c636c7e 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -314,6 +314,7 @@ function findReviewHunkId(review: Review, fileHunks: DiffHunk[]): string | null
 
 export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) => {
   const containerRef = useRef<HTMLDivElement>(null);
+  const notesSidebarRef = useRef<HTMLDivElement>(null);
   const hunkJumpRef = useRef(false);
   const { api } = useAPI();
 
@@ -504,12 +505,35 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
   const [scrollNonce, setScrollNonce] = useState(0);
   const [boundaryToast, setBoundaryToast] = useState<string | null>(null);
 
+  // Which panel has keyboard focus while in immersive mode.
+  const [focusedPanel, setFocusedPanel] = useState<"diff" | "notes">("diff");
+  const [focusedNoteIndex, setFocusedNoteIndex] = useState(0);
+
   useEffect(() => {
     if (!boundaryToast) return;
     const timer = setTimeout(() => setBoundaryToast(null), 2500);
     return () => clearTimeout(timer);
   }, [boundaryToast]);
 
+  useEffect(() => {
+    if (focusedNoteIndex < allReviews.length) {
+      return;
+    }
+
+    setFocusedNoteIndex(Math.max(0, allReviews.length - 1));
+  }, [allReviews.length, focusedNoteIndex]);
+
+  useEffect(() => {
+    if (focusedPanel !== "notes") {
+      return;
+    }
+
+    const noteEl = notesSidebarRef.current?.querySelector<HTMLElement>(
+      `[data-note-index="${focusedNoteIndex}"]`
+    );
+    noteEl?.scrollIntoView({ block: "nearest", behavior: "auto" });
+  }, [focusedPanel, focusedNoteIndex]);
+
   useEffect(() => {
     if (!inlineComposerRequest) {
       return;
@@ -762,6 +786,75 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
   // --- Keyboard handler ---
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
+      // Tab: toggle between diff and notes panels.
+      if (matchesKeybind(e, KEYBINDS.REVIEW_FOCUS_NOTES)) {
+        e.preventDefault();
+        if (focusedPanel === "diff") {
+          if (allReviews.length > 0) {
+            setFocusedPanel("notes");
+          }
+        } else {
+          setFocusedPanel("diff");
+          containerRef.current?.focus();
+        }
+        return;
+      }
+
+      // --- Notes sidebar keyboard mode ---
+      if (focusedPanel === "notes") {
+        // Don't intercept when typing in editable elements.
+        if (isEditableElement(e.target)) return;
+
+        // Esc: return to diff panel (not exit immersive).
+        if (matchesKeybind(e, KEYBINDS.CANCEL)) {
+          e.preventDefault();
+          setFocusedPanel("diff");
+          containerRef.current?.focus();
+          return;
+        }
+
+        // J / ArrowDown: next note.
+        if (e.key === "j" || e.key === "ArrowDown") {
+          e.preventDefault();
+          const maxNoteIndex = Math.max(0, allReviews.length - 1);
+          setFocusedNoteIndex((previousIndex) => Math.min(maxNoteIndex, previousIndex + 1));
+          return;
+        }
+
+        // K / ArrowUp: previous note.
+        if (e.key === "k" || e.key === "ArrowUp") {
+          e.preventDefault();
+          setFocusedNoteIndex((previousIndex) => Math.max(0, previousIndex - 1));
+          return;
+        }
+
+        // Enter: navigate to focused note in diff and return to diff panel.
+        if (e.key === "Enter") {
+          e.preventDefault();
+          const note = allReviews[focusedNoteIndex];
+          if (note) {
+            navigateToReview(note);
+            setFocusedPanel("diff");
+            containerRef.current?.focus();
+          }
+          return;
+        }
+
+        // Backspace/Delete: delete focused note.
+        if (e.key === "Backspace" || e.key === "Delete") {
+          e.preventDefault();
+          const note = allReviews[focusedNoteIndex];
+          if (note && props.reviewActions?.onDelete) {
+            props.reviewActions.onDelete(note.id);
+          }
+          return;
+        }
+
+        // Swallow all other keys in notes mode so diff shortcuts do not fire.
+        return;
+      }
+
+      // --- Diff panel keyboard mode ---
       // Don't intercept when typing in editable elements
       if (isEditableElement(e.target)) return;
 
@@ -849,6 +942,11 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [
+    focusedPanel,
+    allReviews,
+    focusedNoteIndex,
+    navigateToReview,
+    props.reviewActions,
     onExit,
     navigateFile,
     navigateHunk,
@@ -1081,13 +1179,20 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
 
         <aside className="border-border-light bg-dark flex w-[280px] min-w-[280px] flex-col border-l">
           <div className="border-border-light flex items-center justify-between border-b px-3 py-2">
-            <h2 className="text-foreground text-xs font-medium">Notes</h2>
+            <h2
+              className={cn(
+                "text-foreground text-xs font-medium",
+                focusedPanel === "notes" && "text-[var(--color-review-accent)]"
+              )}
+            >
+              Notes
+            </h2>
             <span className="bg-muted/20 text-muted rounded px-1.5 py-0.5 font-mono text-[10px]">
               {allReviews.length}
             </span>
           </div>
 
-          <div className="min-h-0 flex-1 overflow-y-auto px-2 py-2">
+          <div ref={notesSidebarRef} className="min-h-0 flex-1 overflow-y-auto px-2 py-2">
             {allReviews.length === 0 ? (
               <div className="text-muted flex h-full flex-col items-center justify-center text-center text-xs">
                 <p>No notes yet</p>
@@ -1095,7 +1200,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
               </div>
             ) : (
               <div className="space-y-1.5">
-                {allReviews.map((review) => {
+                {allReviews.map((review, noteIndex) => {
                   const isDislike = review.data.userNote
                     .trimStart()
                     .startsWith(DISLIKE_NOTE_PREFIX);
@@ -1108,9 +1213,13 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
                       key={review.id}
                       role="button"
                       tabIndex={0}
+                      data-note-index={noteIndex}
                       className={cn(
                         "group/review-item border-border-light hover:bg-muted/10 focus-visible:ring-primary/40 flex w-full cursor-pointer overflow-hidden rounded border text-left outline-none transition-colors focus-visible:ring-2",
-                        isActiveFileReview && "bg-muted/10"
+                        isActiveFileReview && "bg-muted/10",
+                        focusedPanel === "notes" &&
+                          noteIndex === focusedNoteIndex &&
+                          "ring-2 ring-[var(--color-review-accent)]/40 bg-muted/10"
                       )}
                       onClick={() => navigateToReview(review)}
                       onKeyDown={(event) => {
@@ -1197,6 +1306,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
         <KeycapGroup keys={["⇧C"]} label="comment" />
         <KeycapGroup keys={["⇧L", "⇧D"]} label="like / dislike" />
         <KeycapGroup keys={["Enter"]} label="submit" />
+        <KeycapGroup keys={["Tab"]} label="notes" />
       </div>
     </div>
   );
diff --git a/src/browser/components/Settings/sections/KeybindsSection.tsx b/src/browser/components/Settings/sections/KeybindsSection.tsx
index 218cb18409..31ad2df69f 100644
--- a/src/browser/components/Settings/sections/KeybindsSection.tsx
+++ b/src/browser/components/Settings/sections/KeybindsSection.tsx
@@ -71,6 +71,7 @@ const KEYBIND_LABELS: Record<keyof typeof KEYBINDS, string> = {
   REVIEW_QUICK_LIKE: "Quick like (immersive)",
   REVIEW_QUICK_DISLIKE: "Quick dislike (immersive)",
   REVIEW_COMMENT: "Add comment (immersive)",
+  REVIEW_FOCUS_NOTES: "Focus notes sidebar (immersive)",
   // Easter egg keybind; intentionally omitted from KEYBIND_GROUPS.
   TOGGLE_POWER_MODE: "",
 };
@@ -164,6 +165,7 @@ const KEYBIND_GROUPS: Array<{ label: string; keys: Array<keyof typeof KEYBINDS>
       "REVIEW_QUICK_LIKE",
       "REVIEW_QUICK_DISLIKE",
       "REVIEW_COMMENT",
+      "REVIEW_FOCUS_NOTES",
     ],
   },
   {
diff --git a/src/browser/utils/ui/keybinds.ts b/src/browser/utils/ui/keybinds.ts
index b4bc99f386..26d730c3c8 100644
--- a/src/browser/utils/ui/keybinds.ts
+++ b/src/browser/utils/ui/keybinds.ts
@@ -459,6 +459,9 @@ export const KEYBINDS = {
   /** Add comment in immersive review */
   REVIEW_COMMENT: { key: "c", shift: true },
 
+  /** Toggle focus between diff and notes sidebar in immersive review */
+  REVIEW_FOCUS_NOTES: { key: "Tab" },
+
   TOGGLE_POWER_MODE: { key: "F12", shift: true },
 } as const;
 

From e2a8ce801ff0e8c4cc9e536b344235c4a3b976e4 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Fri, 20 Feb 2026 13:29:54 +0000
Subject: [PATCH 29/48] fix: resolve composer hunk from cursor position instead
 of stale selectedHunk

When the user arrow-keys into a different hunk and presses Shift+C, the
openComposer callback was using the previously-selected hunk (set via j/k
navigation) instead of the hunk at the actual cursor position. This caused
isSelectionInsideRange to fail and the composer to default to
selectedHunkRange.startIndex (often line 0 = top of file).

Fix: openComposer now uses overlayData.lineHunkIds to resolve the hunk
containing the cursor, updates selectedHunkId via onSelectHunk to keep
state in sync, and uses the resolved range for offset calculation.
---
 .../CodeReview/ImmersiveReviewView.tsx        | 61 ++++++++++++++++---
 1 file changed, 52 insertions(+), 9 deletions(-)

diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index 3f6c636c7e..f66d689ea6 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -274,6 +274,24 @@ function isSelectionInsideRange(selection: SelectedLineRange, range: HunkLineRan
   return start >= range.startIndex && end <= range.endIndex;
 }
 
+/** Resolve the hunk that contains a given overlay line index using the lineHunkIds lookup. */
+function findHunkAtLine(
+  lineIndex: number,
+  overlayData: ImmersiveOverlayData,
+  fileHunks: DiffHunk[]
+): { hunk: DiffHunk; range: HunkLineRange } | null {
+  const hunkId = overlayData.lineHunkIds[lineIndex];
+  if (!hunkId) {
+    return null;
+  }
+  const hunk = fileHunks.find((h) => h.id === hunkId);
+  const range = overlayData.hunkLineRanges.get(hunkId);
+  if (!hunk || !range) {
+    return null;
+  }
+  return { hunk, range };
+}
+
 function getLineSpan(start: number, lineCount: number): { start: number; end: number } | null {
   if (lineCount <= 0) {
     return null;
@@ -693,29 +711,54 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
 
   const openComposer = useCallback(
     (prefill: string) => {
-      if (!selectedHunk || !selectedHunkRange) {
+      const selection = getCurrentLineSelection();
+
+      // Resolve which hunk to attach the composer to. If the cursor has moved
+      // into a different hunk (e.g. via arrow-key line navigation), look it up
+      // from the overlay's lineHunkIds rather than using the stale selectedHunk.
+      let targetHunk = selectedHunk;
+      let targetRange = selectedHunkRange;
+
+      if (selection && (!targetRange || !isSelectionInsideRange(selection, targetRange))) {
+        const resolved = findHunkAtLine(selection.endIndex, overlayData, currentFileHunks);
+        if (resolved) {
+          targetHunk = resolved.hunk;
+          targetRange = resolved.range;
+          // Keep the selected-hunk state in sync so the externalComposerSelectionRequest
+          // memo (which checks inlineComposerRequest.hunkId === selectedHunk.id) works.
+          onSelectHunk(resolved.hunk.id);
+        }
+      }
+
+      if (!targetHunk || !targetRange) {
         return;
       }
 
-      const selection = getCurrentLineSelection();
       const effectiveSelection =
-        selection && isSelectionInsideRange(selection, selectedHunkRange)
+        selection && isSelectionInsideRange(selection, targetRange)
           ? selection
           : {
-              startIndex: selectedHunkRange.startIndex,
-              endIndex: selectedHunkRange.startIndex,
+              startIndex: targetRange.startIndex,
+              endIndex: targetRange.startIndex,
             };
 
       nextComposerRequestIdRef.current += 1;
       setInlineComposerRequest({
         requestId: nextComposerRequestIdRef.current,
         prefill,
-        hunkId: selectedHunk.id,
-        startOffset: effectiveSelection.startIndex - selectedHunkRange.startIndex,
-        endOffset: effectiveSelection.endIndex - selectedHunkRange.startIndex,
+        hunkId: targetHunk.id,
+        startOffset: effectiveSelection.startIndex - targetRange.startIndex,
+        endOffset: effectiveSelection.endIndex - targetRange.startIndex,
       });
     },
-    [getCurrentLineSelection, selectedHunk, selectedHunkRange]
+    [
+      getCurrentLineSelection,
+      selectedHunk,
+      selectedHunkRange,
+      overlayData,
+      currentFileHunks,
+      onSelectHunk,
+    ]
   );
 
   const handleReviewNoteSubmit = useCallback(

From 28c2b4c040e2f997894985710c69ce1e626bb455 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Fri, 20 Feb 2026 14:04:34 +0000
Subject: [PATCH 30/48] perf: remove per-line diff tooltips in immersive review

---
 .../CodeReview/ImmersiveReviewView.tsx        |  4 ++-
 .../components/shared/DiffRenderer.tsx        | 31 +++++++------------
 2 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index f66d689ea6..41c24c4930 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -83,7 +83,9 @@ interface ImmersiveOverlayData {
 }
 
 const LINE_JUMP_SIZE = 10;
-const MAX_HIGHLIGHTED_DIFF_LINES = 1600;
+// Keep syntax highlighting on for larger review files now that per-line tooltip overhead is gone,
+// but still cap it to avoid pathological DOM costs on extremely large diffs.
+const MAX_HIGHLIGHTED_DIFF_LINES = 4000;
 const ACTIVE_LINE_OUTLINE = "1px solid hsl(from var(--color-review-accent) h s l / 0.45)";
 const DISLIKE_NOTE_PREFIX = "I don't like this change";
 
diff --git a/src/browser/components/shared/DiffRenderer.tsx b/src/browser/components/shared/DiffRenderer.tsx
index 6f373a7d18..649c62f51e 100644
--- a/src/browser/components/shared/DiffRenderer.tsx
+++ b/src/browser/components/shared/DiffRenderer.tsx
@@ -11,7 +11,6 @@ import { getLanguageFromPath } from "@/common/utils/git/languageDetector";
 import { useOverflowDetection } from "@/browser/hooks/useOverflowDetection";
 import { MessageSquare } from "lucide-react";
 import { InlineReviewNote, type ReviewActionCallbacks } from "./InlineReviewNote";
-import { Tooltip, TooltipTrigger, TooltipContent } from "../ui/tooltip";
 import { groupDiffLines } from "@/browser/utils/highlighting/diffChunking";
 import { useTheme, type ThemeMode } from "@/browser/contexts/ThemeContext";
 import {
@@ -1319,25 +1318,17 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
                   }}
                   reviewButton={
                     onReviewNote && (
-                      <Tooltip {...(renderSelection || isDragging ? { open: false } : {})}>
-                        <TooltipTrigger asChild>
-                          <button
-                            className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-sm text-[var(--color-review-accent)]/60 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 hover:text-[var(--color-review-accent)] active:scale-90"
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              handleCommentButtonClick(displayIndex, e.shiftKey);
-                            }}
-                            aria-label="Add review comment"
-                          >
-                            <MessageSquare className="size-3" />
-                          </button>
-                        </TooltipTrigger>
-                        <TooltipContent side="bottom" align="start">
-                          Add review comment
-                          <br />
-                          (Shift-click or drag to select range)
-                        </TooltipContent>
-                      </Tooltip>
+                      <button
+                        className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-sm text-[var(--color-review-accent)]/60 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 hover:text-[var(--color-review-accent)] active:scale-90"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleCommentButtonClick(displayIndex, e.shiftKey);
+                        }}
+                        title="Add review comment (Shift-click or drag to select range)"
+                        aria-label="Add review comment"
+                      >
+                        <MessageSquare className="size-3" />
+                      </button>
                     )
                   }
                 />

From 509ba96352e40ce74e00ff0233f54d9745ad4737 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Fri, 20 Feb 2026 14:53:04 +0000
Subject: [PATCH 31/48] =?UTF-8?q?=F0=9F=A4=96=20fix:=20stabilize=20immersi?=
 =?UTF-8?q?ve=20file=20transitions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CodeReview/ImmersiveReviewView.tsx        | 69 ++++++++++++++++---
 .../components/shared/DiffRenderer.tsx        |  2 +-
 2 files changed, 60 insertions(+), 11 deletions(-)

diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index 41c24c4930..41e0076d48 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -417,15 +417,29 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     }
   }, [currentFileHunks, selectedHunkId, onSelectHunk]);
 
-  const [activeFileContent, setActiveFileContent] = useState<string | null>(null);
+  const [activeFileContentState, setActiveFileContentState] = useState<{
+    filePath: string | null;
+    content: string | null;
+    isSettled: boolean;
+  }>({
+    filePath: null,
+    content: null,
+    isSettled: true,
+  });
 
   // Load full file content so immersive mode can render one coherent file with hunk overlays.
+  // Keep a per-file loading state so switches can show a splash until loading settles,
+  // which avoids a visible fallback-overlay -> full-content jump.
   useEffect(() => {
     const apiClient = api;
     const filePath = activeFilePath;
 
     if (!filePath || !apiClient) {
-      setActiveFileContent(null);
+      setActiveFileContentState({
+        filePath: filePath ?? null,
+        content: null,
+        isSettled: true,
+      });
       return;
     }
 
@@ -433,7 +447,11 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     const resolvedFilePath: string = filePath;
 
     let cancelled = false;
-    setActiveFileContent(null);
+    setActiveFileContentState({
+      filePath: resolvedFilePath,
+      content: null,
+      isSettled: false,
+    });
 
     async function loadActiveFileContent() {
       try {
@@ -447,22 +465,38 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
         }
 
         if (!fileResult.success) {
-          setActiveFileContent(null);
+          setActiveFileContentState({
+            filePath: resolvedFilePath,
+            content: null,
+            isSettled: true,
+          });
           return;
         }
 
         const bashResult = fileResult.data;
 
         if (!bashResult.success && !bashResult.output) {
-          setActiveFileContent(null);
+          setActiveFileContentState({
+            filePath: resolvedFilePath,
+            content: null,
+            isSettled: true,
+          });
           return;
         }
 
         const data = processFileContents(bashResult.output ?? "", bashResult.exitCode);
-        setActiveFileContent(data.type === "text" ? data.content : null);
+        setActiveFileContentState({
+          filePath: resolvedFilePath,
+          content: data.type === "text" ? data.content : null,
+          isSettled: true,
+        });
       } catch {
         if (!cancelled) {
-          setActiveFileContent(null);
+          setActiveFileContentState({
+            filePath: resolvedFilePath,
+            content: null,
+            isSettled: true,
+          });
         }
       }
     }
@@ -474,6 +508,17 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     };
   }, [api, props.workspaceId, activeFilePath]);
 
+  const resolvedActiveFileContent =
+    activeFileContentState.filePath === activeFilePath && activeFileContentState.isSettled
+      ? activeFileContentState.content
+      : null;
+
+  const isActiveFileContentLoading = Boolean(
+    activeFilePath &&
+    currentFileHunks.length > 0 &&
+    (activeFileContentState.filePath !== activeFilePath || !activeFileContentState.isSettled)
+  );
+
   const overlayData = useMemo<ImmersiveOverlayData>(() => {
     if (currentFileHunks.length === 0) {
       return {
@@ -483,12 +528,12 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
       };
     }
 
-    if (activeFileContent != null) {
-      return buildOverlayFromFileContent(activeFileContent, currentFileHunks);
+    if (resolvedActiveFileContent != null) {
+      return buildOverlayFromFileContent(resolvedActiveFileContent, currentFileHunks);
     }
 
     return buildOverlayFromHunks(currentFileHunks);
-  }, [activeFileContent, currentFileHunks]);
+  }, [resolvedActiveFileContent, currentFileHunks]);
 
   const selectedHunkRange = useMemo(
     () => (selectedHunk ? (overlayData.hunkLineRanges.get(selectedHunk.id) ?? null) : null),
@@ -1198,6 +1243,10 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
             <div className="text-muted flex items-center justify-center py-12 text-sm">
               {activeFilePath ? "No hunks for this file" : "No files to review"}
             </div>
+          ) : isActiveFileContentLoading ? (
+            <div className="text-muted flex items-center justify-center py-12 text-sm">
+              <span className="animate-pulse">Loading file...</span>
+            </div>
           ) : (
             <div className="border-border-light bg-dark overflow-hidden rounded border">
               <SelectableDiffRenderer
diff --git a/src/browser/components/shared/DiffRenderer.tsx b/src/browser/components/shared/DiffRenderer.tsx
index 649c62f51e..7e0ac76293 100644
--- a/src/browser/components/shared/DiffRenderer.tsx
+++ b/src/browser/components/shared/DiffRenderer.tsx
@@ -1319,7 +1319,7 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
                   reviewButton={
                     onReviewNote && (
                       <button
-                        className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-sm text-[var(--color-review-accent)]/60 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 hover:text-[var(--color-review-accent)] active:scale-90"
+                        className="pointer-events-none absolute inset-0 m-0 flex appearance-none items-center justify-center border-0 bg-transparent p-0 leading-none text-[var(--color-review-accent)]/60 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 hover:text-[var(--color-review-accent)] active:scale-90"
                         onClick={(e) => {
                           e.stopPropagation();
                           handleCommentButtonClick(displayIndex, e.shiftKey);

From 4acb6f04d863b807b8d267a9c3b3aa2e604fe068 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Fri, 20 Feb 2026 15:17:17 +0000
Subject: [PATCH 32/48] =?UTF-8?q?=F0=9F=A4=96=20fix:=20gate=20immersive=20?=
 =?UTF-8?q?diff=20reveal=20and=20tighten=20row=20density?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CodeReview/ImmersiveReviewView.tsx        | 170 ++++++++++++++----
 .../components/shared/DiffRenderer.tsx        |  11 +-
 2 files changed, 140 insertions(+), 41 deletions(-)

diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index 41e0076d48..6ccecc0489 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -427,6 +427,10 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     isSettled: true,
   });
 
+  // Hold diff reveal during file switches until loading + initial scroll are complete.
+  const [pendingRevealFilePath, setPendingRevealFilePath] = useState<string | null>(null);
+  const revealAnimationFrameRef = useRef<number | null>(null);
+
   // Load full file content so immersive mode can render one coherent file with hunk overlays.
   // Keep a per-file loading state so switches can show a splash until loading settles,
   // which avoids a visible fallback-overlay -> full-content jump.
@@ -508,15 +512,16 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     };
   }, [api, props.workspaceId, activeFilePath]);
 
-  const resolvedActiveFileContent =
-    activeFileContentState.filePath === activeFilePath && activeFileContentState.isSettled
-      ? activeFileContentState.content
-      : null;
+  const isActiveFileContentSettled =
+    !activeFilePath ||
+    (activeFileContentState.filePath === activeFilePath && activeFileContentState.isSettled);
+
+  const resolvedActiveFileContent = isActiveFileContentSettled
+    ? activeFileContentState.content
+    : null;
 
   const isActiveFileContentLoading = Boolean(
-    activeFilePath &&
-    currentFileHunks.length > 0 &&
-    (activeFileContentState.filePath !== activeFilePath || !activeFileContentState.isSettled)
+    activeFilePath && currentFileHunks.length > 0 && !isActiveFileContentSettled
   );
 
   const overlayData = useMemo<ImmersiveOverlayData>(() => {
@@ -574,6 +579,53 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
   const [focusedPanel, setFocusedPanel] = useState<"diff" | "notes">("diff");
   const [focusedNoteIndex, setFocusedNoteIndex] = useState(0);
 
+  useEffect(() => {
+    if (revealAnimationFrameRef.current !== null) {
+      cancelAnimationFrame(revealAnimationFrameRef.current);
+      revealAnimationFrameRef.current = null;
+    }
+
+    if (!activeFilePath) {
+      setPendingRevealFilePath(null);
+      return;
+    }
+
+    // Keep the splash visible for each file switch until we have scrolled to the target hunk.
+    setPendingRevealFilePath(activeFilePath);
+    hunkJumpRef.current = true;
+  }, [activeFilePath]);
+
+  useEffect(() => {
+    return () => {
+      if (revealAnimationFrameRef.current !== null) {
+        cancelAnimationFrame(revealAnimationFrameRef.current);
+      }
+    };
+  }, []);
+
+  const revealTargetLineIndex =
+    activeLineIndex ??
+    selectedHunkRange?.firstModifiedIndex ??
+    selectedHunkRange?.startIndex ??
+    null;
+  const isActiveFileRevealPending = pendingRevealFilePath === activeFilePath;
+
+  useEffect(() => {
+    if (!isActiveFileRevealPending || !isActiveFileContentSettled) {
+      return;
+    }
+
+    // Fail open so the UI cannot get stuck if a file has no hunk/line target.
+    if (currentFileHunks.length === 0 || revealTargetLineIndex === null) {
+      setPendingRevealFilePath(null);
+    }
+  }, [
+    currentFileHunks.length,
+    revealTargetLineIndex,
+    isActiveFileRevealPending,
+    isActiveFileContentSettled,
+  ]);
+
   useEffect(() => {
     if (!boundaryToast) return;
     const timer = setTimeout(() => setBoundaryToast(null), 2500);
@@ -1062,33 +1114,66 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     }
 
     // When overlay content structure changes (fallback hunks -> full-file view),
-    // defer scrolling until the selected-hunk effect has recalculated activeLineIndex
-    // against the new line map. This prevents a transient jump to an old index.
+    // defer regular scrolling until the selected-hunk effect has recalculated
+    // activeLineIndex. During a file-switch reveal gate we still need one initial
+    // scroll so the diff appears already positioned at the selected hunk.
     if (contentChanged) {
       hunkJumpRef.current = true;
+      if (!isActiveFileRevealPending) {
+        return;
+      }
+    }
+
+    if (isActiveFileRevealPending && !isActiveFileContentSettled) {
       return;
     }
 
-    if (activeLineIndex === null) {
+    const lineIndexForScroll = isActiveFileRevealPending ? revealTargetLineIndex : activeLineIndex;
+    if (lineIndexForScroll === null) {
       return;
     }
 
     const lineElement = containerRef.current?.querySelector<HTMLElement>(
-      `[data-line-index="${activeLineIndex}"]`
+      `[data-line-index="${lineIndexForScroll}"]`
     );
     if (!lineElement) {
       return;
     }
 
-    lineElement.style.outline = ACTIVE_LINE_OUTLINE;
-    lineElement.style.outlineOffset = "-1px";
-    highlightedLineElementRef.current = lineElement;
+    if (activeLineIndex !== null && lineIndexForScroll === activeLineIndex) {
+      lineElement.style.outline = ACTIVE_LINE_OUTLINE;
+      lineElement.style.outlineOffset = "-1px";
+      highlightedLineElementRef.current = lineElement;
+    }
 
     const block = hunkJumpRef.current ? "center" : "nearest";
     hunkJumpRef.current = false;
-
     lineElement.scrollIntoView({ behavior: "auto", block });
-  }, [activeLineIndex, overlayData.content, scrollNonce]);
+
+    if (!isActiveFileRevealPending || !activeFilePath) {
+      return;
+    }
+
+    if (revealAnimationFrameRef.current !== null) {
+      cancelAnimationFrame(revealAnimationFrameRef.current);
+    }
+
+    const revealFilePath = activeFilePath;
+    revealAnimationFrameRef.current = window.requestAnimationFrame(() => {
+      setPendingRevealFilePath((pendingFilePath) =>
+        pendingFilePath === revealFilePath ? null : pendingFilePath
+      );
+      revealAnimationFrameRef.current = null;
+    });
+  }, [
+    activeFilePath,
+    activeLineIndex,
+    isActiveFileContentSettled,
+    isActiveFileRevealPending,
+    overlayData.content,
+    revealTargetLineIndex,
+    scrollNonce,
+  ]);
 
   useEffect(() => {
     return () => {
@@ -1145,6 +1230,9 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
 
   const shouldEnableHighlighting = overlayData.lineHunkIds.length <= MAX_HIGHLIGHTED_DIFF_LINES;
 
+  const shouldShowFileTransitionSplash =
+    currentFileHunks.length > 0 && (isActiveFileContentLoading || isActiveFileRevealPending);
+
   return (
     <div
       ref={containerRef}
@@ -1243,30 +1331,34 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
             <div className="text-muted flex items-center justify-center py-12 text-sm">
               {activeFilePath ? "No hunks for this file" : "No files to review"}
             </div>
-          ) : isActiveFileContentLoading ? (
-            <div className="text-muted flex items-center justify-center py-12 text-sm">
-              <span className="animate-pulse">Loading file...</span>
-            </div>
           ) : (
-            <div className="border-border-light bg-dark overflow-hidden rounded border">
-              <SelectableDiffRenderer
-                content={overlayData.content}
-                filePath={activeFilePath ?? currentFileHunks[0].filePath}
-                inlineReviews={
-                  activeFilePath ? props.reviewsByFilePath.get(activeFilePath) : undefined
-                }
-                oldStart={1}
-                newStart={1}
-                fontSize="11px"
-                maxHeight="none"
-                className="rounded-none border-0 [&>div]:overflow-x-visible"
-                onReviewNote={handleReviewNoteSubmit}
-                reviewActions={props.reviewActions}
-                enableHighlighting={shouldEnableHighlighting}
-                selectedLineRange={selectedLineRange}
-                onLineIndexSelect={handleLineIndexSelect}
-                externalSelectionRequest={externalComposerSelectionRequest}
-              />
+            <div className="border-border-light bg-dark relative overflow-hidden rounded border">
+              {shouldShowFileTransitionSplash && (
+                <div className="bg-dark/95 text-muted absolute inset-0 z-10 flex items-center justify-center text-sm">
+                  <span className="animate-pulse">Loading file...</span>
+                </div>
+              )}
+              <div className={cn(shouldShowFileTransitionSplash && "invisible")}>
+                <SelectableDiffRenderer
+                  content={overlayData.content}
+                  filePath={activeFilePath ?? currentFileHunks[0].filePath}
+                  inlineReviews={
+                    activeFilePath ? props.reviewsByFilePath.get(activeFilePath) : undefined
+                  }
+                  oldStart={1}
+                  newStart={1}
+                  fontSize="11px"
+                  lineHeight={1.3}
+                  maxHeight="none"
+                  className="rounded-none border-0 [&>div]:overflow-x-visible"
+                  onReviewNote={handleReviewNoteSubmit}
+                  reviewActions={props.reviewActions}
+                  enableHighlighting={shouldEnableHighlighting}
+                  selectedLineRange={selectedLineRange}
+                  onLineIndexSelect={handleLineIndexSelect}
+                  externalSelectionRequest={externalComposerSelectionRequest}
+                />
+              </div>
             </div>
           )}
         </div>
diff --git a/src/browser/components/shared/DiffRenderer.tsx b/src/browser/components/shared/DiffRenderer.tsx
index 7e0ac76293..b1197f0fb5 100644
--- a/src/browser/components/shared/DiffRenderer.tsx
+++ b/src/browser/components/shared/DiffRenderer.tsx
@@ -311,13 +311,14 @@ export const DiffContainer: React.FC<
   React.PropsWithChildren<{
     fontSize?: string;
     maxHeight?: string;
+    lineHeight?: number | string;
     className?: string;
     /** Type of the first line in the diff (for top padding background) */
     firstLineType?: DiffLineType;
     /** Type of the last line in the diff (for bottom padding background) */
     lastLineType?: DiffLineType;
   }>
-> = ({ children, fontSize, maxHeight, className, firstLineType, lastLineType }) => {
+> = ({ children, fontSize, maxHeight, lineHeight, className, firstLineType, lastLineType }) => {
   const resolvedMaxHeight = maxHeight ?? "400px";
   const [isExpanded, setIsExpanded] = React.useState(false);
   const contentRef = React.useRef<HTMLDivElement>(null);
@@ -366,7 +367,7 @@ export const DiffContainer: React.FC<
         )}
         style={{
           fontSize: fontSize ?? "12px",
-          lineHeight: 1.4,
+          lineHeight: lineHeight ?? 1.4,
           maxHeight: clampContent ? resolvedMaxHeight : undefined,
           // CSS Grid columns: [gutter] auto | [indicator] 1rem | [code] 1fr
           gridTemplateColumns: "auto 1rem 1fr",
@@ -411,6 +412,8 @@ interface DiffRendererProps {
   filePath?: string;
   /** Font size for diff content (default: "12px") */
   fontSize?: string;
+  /** Line height for diff rows (default: 1.4) */
+  lineHeight?: number | string;
   /** Max height for diff container (default: "400px", use "none" for no limit) */
   maxHeight?: string;
   /** Additional className for container (e.g., "rounded-none" to remove rounding) */
@@ -553,6 +556,7 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
   newStart = 1,
   filePath,
   fontSize,
+  lineHeight,
   maxHeight,
   className,
 }) => {
@@ -586,6 +590,7 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
   return (
     <DiffContainer
       fontSize={fontSize}
+      lineHeight={lineHeight}
       maxHeight={maxHeight}
       className={className}
       firstLineType={firstLineType}
@@ -940,6 +945,7 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
     filePath,
     inlineReviews,
     fontSize,
+    lineHeight,
     maxHeight,
     className,
     onReviewNote,
@@ -1243,6 +1249,7 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
     return (
       <DiffContainer
         fontSize={fontSize}
+        lineHeight={lineHeight}
         maxHeight={maxHeight}
         className={className}
         firstLineType={firstLineType}

From 9a6f47fad5b7754c70f0b14f7cdf647e9b524c25 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Fri, 20 Feb 2026 15:52:04 +0000
Subject: [PATCH 33/48] Fix immersive file reveal gating and diff row height
 consistency

---
 .../CodeReview/ImmersiveReviewView.tsx        | 45 +++++++++++++++----
 .../components/shared/DiffRenderer.tsx        | 14 +++---
 2 files changed, 46 insertions(+), 13 deletions(-)

diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index 6ccecc0489..5c594504cd 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -603,27 +603,41 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     };
   }, []);
 
-  const revealTargetLineIndex =
-    activeLineIndex ??
-    selectedHunkRange?.firstModifiedIndex ??
-    selectedHunkRange?.startIndex ??
-    null;
+  const selectedHunkRevealTargetLineIndex =
+    selectedHunkRange?.firstModifiedIndex ?? selectedHunkRange?.startIndex ?? null;
   const isActiveFileRevealPending = pendingRevealFilePath === activeFilePath;
+  const revealTargetLineIndex = isActiveFileRevealPending
+    ? selectedHunkRevealTargetLineIndex
+    : (activeLineIndex ?? selectedHunkRevealTargetLineIndex);
+  const hasResolvedSelectedHunkForReveal =
+    selectedHunkId !== null && currentFileHunks.some((hunk) => hunk.id === selectedHunkId);
 
   useEffect(() => {
     if (!isActiveFileRevealPending || !isActiveFileContentSettled) {
       return;
     }
 
-    // Fail open so the UI cannot get stuck if a file has no hunk/line target.
-    if (currentFileHunks.length === 0 || revealTargetLineIndex === null) {
+    // Fail open so the UI cannot get stuck if a file has no hunks.
+    if (currentFileHunks.length === 0) {
+      setPendingRevealFilePath(null);
+      return;
+    }
+
+    // Avoid dropping the reveal gate while selected hunk state is still settling.
+    if (!hasResolvedSelectedHunkForReveal) {
+      return;
+    }
+
+    // Fail open once selection is stable if we still cannot resolve a reveal target.
+    if (selectedHunkRevealTargetLineIndex === null) {
       setPendingRevealFilePath(null);
     }
   }, [
     currentFileHunks.length,
-    revealTargetLineIndex,
+    hasResolvedSelectedHunkForReveal,
     isActiveFileRevealPending,
     isActiveFileContentSettled,
+    selectedHunkRevealTargetLineIndex,
   ]);
 
   useEffect(() => {
@@ -1137,6 +1151,21 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
       `[data-line-index="${lineIndexForScroll}"]`
     );
     if (!lineElement) {
+      if (!isActiveFileRevealPending || !activeFilePath || contentChanged) {
+        return;
+      }
+
+      if (revealAnimationFrameRef.current !== null) {
+        cancelAnimationFrame(revealAnimationFrameRef.current);
+      }
+
+      const revealFilePath = activeFilePath;
+      revealAnimationFrameRef.current = window.requestAnimationFrame(() => {
+        setPendingRevealFilePath((pendingFilePath) =>
+          pendingFilePath === revealFilePath ? null : pendingFilePath
+        );
+        revealAnimationFrameRef.current = null;
+      });
       return;
     }
 
diff --git a/src/browser/components/shared/DiffRenderer.tsx b/src/browser/components/shared/DiffRenderer.tsx
index b1197f0fb5..7f90c0b6b5 100644
--- a/src/browser/components/shared/DiffRenderer.tsx
+++ b/src/browser/components/shared/DiffRenderer.tsx
@@ -612,10 +612,12 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
               />
               <DiffIndicator type={chunk.type} background={codeBg} />
               <span
-                className="min-w-0 whitespace-pre [&_span:not(.search-highlight)]:!bg-transparent"
+                className="block min-w-0 leading-[inherit] whitespace-pre [&_span:not(.search-highlight)]:!bg-transparent"
                 style={{
                   background: codeBg,
                   color: getLineContentColor(chunk.type),
+                  overflowWrap: "normal",
+                  wordBreak: "normal",
                 }}
                 dangerouslySetInnerHTML={{ __html: line.html }}
               />
@@ -1278,14 +1280,14 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
             lineShadows.push(activeLineHighlight);
           }
 
-          // Each line renders as 3 CSS Grid cells: gutter | indicator | code
-          // Use display:contents wrapper for selection state + group hover behavior
+          // Each line renders as 3 CSS Grid cells: gutter | indicator | code.
+          // Keep rows single-line (no wrapping) so keyboard cursor + hover hitboxes stay aligned.
           return (
             <React.Fragment key={displayIndex}>
               <div
                 className={cn(
                   SELECTABLE_DIFF_LINE_CLASS,
-                  "group relative col-span-3 grid grid-cols-subgrid",
+                  "group relative col-span-3 grid grid-cols-subgrid whitespace-nowrap leading-[inherit]",
                   onLineIndexSelect ? "cursor-pointer" : "cursor-text"
                 )}
                 data-line-index={displayIndex}
@@ -1340,10 +1342,12 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
                   }
                 />
                 <span
-                  className="min-w-0 whitespace-pre [&_span:not(.search-highlight)]:!bg-transparent"
+                  className="block min-w-0 leading-[inherit] whitespace-pre [&_span:not(.search-highlight)]:!bg-transparent"
                   style={{
                     background: codeBg,
                     color: getLineContentColor(lineInfo.type),
+                    overflowWrap: "normal",
+                    wordBreak: "normal",
                     boxShadow: lineShadows.length > 0 ? lineShadows.join(", ") : undefined,
                   }}
                   dangerouslySetInnerHTML={{ __html: lineInfo.html }}

From 75dada6ec247859a66ce2918c0872374ee80ef5f Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Fri, 20 Feb 2026 16:07:48 +0000
Subject: [PATCH 34/48] fix: remove selectable row no-wrap guards causing line
 spacing regression

---
 src/browser/components/shared/DiffRenderer.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/browser/components/shared/DiffRenderer.tsx b/src/browser/components/shared/DiffRenderer.tsx
index 7f90c0b6b5..5af28d263a 100644
--- a/src/browser/components/shared/DiffRenderer.tsx
+++ b/src/browser/components/shared/DiffRenderer.tsx
@@ -1281,13 +1281,12 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
           }
 
           // Each line renders as 3 CSS Grid cells: gutter | indicator | code.
-          // Keep rows single-line (no wrapping) so keyboard cursor + hover hitboxes stay aligned.
           return (
             <React.Fragment key={displayIndex}>
               <div
                 className={cn(
                   SELECTABLE_DIFF_LINE_CLASS,
-                  "group relative col-span-3 grid grid-cols-subgrid whitespace-nowrap leading-[inherit]",
+                  "group relative col-span-3 grid grid-cols-subgrid",
                   onLineIndexSelect ? "cursor-pointer" : "cursor-text"
                 )}
                 data-line-index={displayIndex}
@@ -1342,12 +1341,10 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
                   }
                 />
                 <span
-                  className="block min-w-0 leading-[inherit] whitespace-pre [&_span:not(.search-highlight)]:!bg-transparent"
+                  className="min-w-0 whitespace-pre [&_span:not(.search-highlight)]:!bg-transparent"
                   style={{
                     background: codeBg,
                     color: getLineContentColor(lineInfo.type),
-                    overflowWrap: "normal",
-                    wordBreak: "normal",
                     boxShadow: lineShadows.length > 0 ? lineShadows.join(", ") : undefined,
                   }}
                   dangerouslySetInnerHTML={{ __html: lineInfo.html }}

From 79699a277609fce6c8fad421e43bfb7bae807cce Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Fri, 20 Feb 2026 16:17:39 +0000
Subject: [PATCH 35/48] fix: normalize highlighted diff rows to prevent extra
 blank spacing

Strip CR/LF from per-line highlighted HTML fragments before rendering.
Some highlighter outputs can include hard line breaks in a single line
fragment, which causes each diff row to render with an extra blank line
when using whitespace-pre in the code cell.

Also keep diff code-cell classes aligned with pre-regression behavior in
both DiffRenderer and SelectableDiffRenderer.
---
 src/browser/components/shared/DiffRenderer.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/browser/components/shared/DiffRenderer.tsx b/src/browser/components/shared/DiffRenderer.tsx
index 5af28d263a..5e8c83407e 100644
--- a/src/browser/components/shared/DiffRenderer.tsx
+++ b/src/browser/components/shared/DiffRenderer.tsx
@@ -539,6 +539,12 @@ function useHighlightedDiff(
   return cachedResult ?? chunks;
 }
 
+function normalizeHighlightedLineHtml(html: string): string {
+  // Some highlighters can emit hard line breaks in per-line HTML fragments.
+  // Strip CR/LF so each diff row remains a single visual row.
+  return html.replace(/\r?\n/g, "");
+}
+
 /**
  * DiffRenderer - Renders diff content with consistent styling
  *
@@ -612,14 +618,12 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
               />
               <DiffIndicator type={chunk.type} background={codeBg} />
               <span
-                className="block min-w-0 leading-[inherit] whitespace-pre [&_span:not(.search-highlight)]:!bg-transparent"
+                className="min-w-0 whitespace-pre [&_span:not(.search-highlight)]:!bg-transparent"
                 style={{
                   background: codeBg,
                   color: getLineContentColor(chunk.type),
-                  overflowWrap: "normal",
-                  wordBreak: "normal",
                 }}
-                dangerouslySetInnerHTML={{ __html: line.html }}
+                dangerouslySetInnerHTML={{ __html: normalizeHighlightedLineHtml(line.html) }}
               />
             </React.Fragment>
           );
@@ -1075,7 +1079,7 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
             type: chunk.type,
             oldLineNum: line.oldLineNumber,
             newLineNum: line.newLineNumber,
-            html: line.html,
+            html: normalizeHighlightedLineHtml(line.html),
             raw: rawLines[line.originalIndex] ?? "",
           });
         });

From c8f2b823f8c959afb581f0621f58394886afec88 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Fri, 20 Feb 2026 16:57:01 +0000
Subject: [PATCH 36/48] fix: normalize immersive file lines to prevent extra
 row spacing

Normalize full-file content line splitting with CRLF-aware parsing before
building immersive overlays. Trailing carriage returns in per-line content
can render as extra breaks inside whitespace-preserving diff cells, which
made every row appear to have extra spacing.

This keeps immersive row height consistent with baseline rendering.
---
 .../RightSidebar/CodeReview/ImmersiveReviewView.tsx         | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index 5c594504cd..eec769ca24 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -131,7 +131,11 @@ function splitDiffLines(content: string): string[] {
 }
 
 function normalizeFileLines(content: string): string[] {
-  const lines = content.split("\n");
+  // Normalize Windows CRLF to LF-equivalent lines so rows stay single-height in
+  // whitespace-preserving diff cells (embedded "\r" can render as extra breaks).
+  const lines = content
+    .split(/\r?\n/)
+    .map((line) => (line.endsWith("\r") ? line.slice(0, Math.max(0, line.length - 1)) : line));
   return lines.filter((line, idx) => idx < lines.length - 1 || line !== "");
 }
 

From 37d45cd22ba0746564f68e25417f6209dc48cc56 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Fri, 20 Feb 2026 17:22:42 +0000
Subject: [PATCH 37/48] fix: restore DiffRenderer baseline row layout and
 remove immersive lineHeight override

Chromatic regressions across Diff stories indicated shared row layout drift.
Restore DiffRenderer to the known-good baseline from perf tooltip removal
phase and drop the immersive-only lineHeight override.

This keeps the tooltip performance win while removing recent global row
height/normalization experiments that altered visual snapshots.
---
 .../CodeReview/ImmersiveReviewView.tsx        |  1 -
 .../components/shared/DiffRenderer.tsx        | 26 +++++--------------
 2 files changed, 7 insertions(+), 20 deletions(-)

diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index eec769ca24..58eea963f8 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -1381,7 +1381,6 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
                   oldStart={1}
                   newStart={1}
                   fontSize="11px"
-                  lineHeight={1.3}
                   maxHeight="none"
                   className="rounded-none border-0 [&>div]:overflow-x-visible"
                   onReviewNote={handleReviewNoteSubmit}
diff --git a/src/browser/components/shared/DiffRenderer.tsx b/src/browser/components/shared/DiffRenderer.tsx
index 5e8c83407e..649c62f51e 100644
--- a/src/browser/components/shared/DiffRenderer.tsx
+++ b/src/browser/components/shared/DiffRenderer.tsx
@@ -311,14 +311,13 @@ export const DiffContainer: React.FC<
   React.PropsWithChildren<{
     fontSize?: string;
     maxHeight?: string;
-    lineHeight?: number | string;
     className?: string;
     /** Type of the first line in the diff (for top padding background) */
     firstLineType?: DiffLineType;
     /** Type of the last line in the diff (for bottom padding background) */
     lastLineType?: DiffLineType;
   }>
-> = ({ children, fontSize, maxHeight, lineHeight, className, firstLineType, lastLineType }) => {
+> = ({ children, fontSize, maxHeight, className, firstLineType, lastLineType }) => {
   const resolvedMaxHeight = maxHeight ?? "400px";
   const [isExpanded, setIsExpanded] = React.useState(false);
   const contentRef = React.useRef<HTMLDivElement>(null);
@@ -367,7 +366,7 @@ export const DiffContainer: React.FC<
         )}
         style={{
           fontSize: fontSize ?? "12px",
-          lineHeight: lineHeight ?? 1.4,
+          lineHeight: 1.4,
           maxHeight: clampContent ? resolvedMaxHeight : undefined,
           // CSS Grid columns: [gutter] auto | [indicator] 1rem | [code] 1fr
           gridTemplateColumns: "auto 1rem 1fr",
@@ -412,8 +411,6 @@ interface DiffRendererProps {
   filePath?: string;
   /** Font size for diff content (default: "12px") */
   fontSize?: string;
-  /** Line height for diff rows (default: 1.4) */
-  lineHeight?: number | string;
   /** Max height for diff container (default: "400px", use "none" for no limit) */
   maxHeight?: string;
   /** Additional className for container (e.g., "rounded-none" to remove rounding) */
@@ -539,12 +536,6 @@ function useHighlightedDiff(
   return cachedResult ?? chunks;
 }
 
-function normalizeHighlightedLineHtml(html: string): string {
-  // Some highlighters can emit hard line breaks in per-line HTML fragments.
-  // Strip CR/LF so each diff row remains a single visual row.
-  return html.replace(/\r?\n/g, "");
-}
-
 /**
  * DiffRenderer - Renders diff content with consistent styling
  *
@@ -562,7 +553,6 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
   newStart = 1,
   filePath,
   fontSize,
-  lineHeight,
   maxHeight,
   className,
 }) => {
@@ -596,7 +586,6 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
   return (
     <DiffContainer
       fontSize={fontSize}
-      lineHeight={lineHeight}
       maxHeight={maxHeight}
       className={className}
       firstLineType={firstLineType}
@@ -623,7 +612,7 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
                   background: codeBg,
                   color: getLineContentColor(chunk.type),
                 }}
-                dangerouslySetInnerHTML={{ __html: normalizeHighlightedLineHtml(line.html) }}
+                dangerouslySetInnerHTML={{ __html: line.html }}
               />
             </React.Fragment>
           );
@@ -951,7 +940,6 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
     filePath,
     inlineReviews,
     fontSize,
-    lineHeight,
     maxHeight,
     className,
     onReviewNote,
@@ -1079,7 +1067,7 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
             type: chunk.type,
             oldLineNum: line.oldLineNumber,
             newLineNum: line.newLineNumber,
-            html: normalizeHighlightedLineHtml(line.html),
+            html: line.html,
             raw: rawLines[line.originalIndex] ?? "",
           });
         });
@@ -1255,7 +1243,6 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
     return (
       <DiffContainer
         fontSize={fontSize}
-        lineHeight={lineHeight}
         maxHeight={maxHeight}
         className={className}
         firstLineType={firstLineType}
@@ -1284,7 +1271,8 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
             lineShadows.push(activeLineHighlight);
           }
 
-          // Each line renders as 3 CSS Grid cells: gutter | indicator | code.
+          // Each line renders as 3 CSS Grid cells: gutter | indicator | code
+          // Use display:contents wrapper for selection state + group hover behavior
           return (
             <React.Fragment key={displayIndex}>
               <div
@@ -1331,7 +1319,7 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
                   reviewButton={
                     onReviewNote && (
                       <button
-                        className="pointer-events-none absolute inset-0 m-0 flex appearance-none items-center justify-center border-0 bg-transparent p-0 leading-none text-[var(--color-review-accent)]/60 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 hover:text-[var(--color-review-accent)] active:scale-90"
+                        className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-sm text-[var(--color-review-accent)]/60 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 hover:text-[var(--color-review-accent)] active:scale-90"
                         onClick={(e) => {
                           e.stopPropagation();
                           handleCommentButtonClick(displayIndex, e.shiftKey);

From 452fc7f89cd7127d5685c381ebf1a419efc17a1f Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Fri, 20 Feb 2026 17:41:43 +0000
Subject: [PATCH 38/48] fix: force comment overlay button absolute to prevent
 diff row height inflation

Storybook/Chromatic debugging showed selectable diff rows rendering at ~27px instead of ~15px because the per-line comment button could participate in layout in the story runtime, inflating each grid row.

Set inline style with absolute positioning and inset=0 on the comment button (while keeping utility classes) so overlay positioning is unambiguous across runtimes. Also set type=button for explicit semantics.

Verified in Storybook via DevTools: row heights return to single-line (~15.39px) and the comment button computes to absolute positioning.
---
 src/browser/components/shared/DiffRenderer.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/browser/components/shared/DiffRenderer.tsx b/src/browser/components/shared/DiffRenderer.tsx
index 649c62f51e..7ecd6e7ea4 100644
--- a/src/browser/components/shared/DiffRenderer.tsx
+++ b/src/browser/components/shared/DiffRenderer.tsx
@@ -1319,7 +1319,9 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
                   reviewButton={
                     onReviewNote && (
                       <button
+                        type="button"
                         className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-sm text-[var(--color-review-accent)]/60 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 hover:text-[var(--color-review-accent)] active:scale-90"
+                        style={{ position: "absolute", inset: 0 }}
                         onClick={(e) => {
                           e.stopPropagation();
                           handleCommentButtonClick(displayIndex, e.shiftKey);

From 26edaa9d32c192b8f3fae672003160079f1c87ab Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Fri, 20 Feb 2026 17:56:58 +0000
Subject: [PATCH 39/48] Add immersive right sidebar review debug story

---
 ...p.rightSidebar.immersiveReview.stories.tsx | 111 ++++++++++++++++++
 1 file changed, 111 insertions(+)
 create mode 100644 src/browser/stories/App.rightSidebar.immersiveReview.stories.tsx

diff --git a/src/browser/stories/App.rightSidebar.immersiveReview.stories.tsx b/src/browser/stories/App.rightSidebar.immersiveReview.stories.tsx
new file mode 100644
index 0000000000..e793f8fe1d
--- /dev/null
+++ b/src/browser/stories/App.rightSidebar.immersiveReview.stories.tsx
@@ -0,0 +1,111 @@
+import { within, waitFor } from "@storybook/test";
+import type { ComponentType } from "react";
+
+import { updatePersistedState } from "@/browser/hooks/usePersistedState";
+import {
+  RIGHT_SIDEBAR_TAB_KEY,
+  RIGHT_SIDEBAR_WIDTH_KEY,
+  getReviewImmersiveKey,
+  getRightSidebarLayoutKey,
+} from "@/common/constants/storage";
+
+import { appMeta, AppWithMocks, type AppStory } from "./meta.js";
+import { createAssistantMessage, createUserMessage } from "./mockFactory";
+import { expandRightSidebar, setupSimpleChatStory } from "./storyHelpers";
+
+const LINE_HEIGHT_DEBUG_WORKSPACE_ID = "ws-review-immersive-line-height";
+
+// Includes highlighted TypeScript lines and neutral/context lines so row-height
+// differences are easy to compare while debugging immersive review rendering.
+const IMMERSIVE_LINE_HEIGHT_DIFF = `diff --git a/src/utils/formatPrice.ts b/src/utils/formatPrice.ts
+index 1111111..2222222 100644
+--- a/src/utils/formatPrice.ts
++++ b/src/utils/formatPrice.ts
+@@ -1,10 +1,15 @@
+ export function formatPrice(amount: number, currency = "USD"): string {
++  const formatter = new Intl.NumberFormat("en-US", {
++    style: "currency",
++    currency,
++  });
++
+   if (!Number.isFinite(amount)) {
+-    return "$0.00";
++    return formatter.format(0);
+   }
+ 
+-  return amount.toFixed(2);
++  return formatter.format(amount);
+ }
+ 
+ // Keep this context line unchanged for neutral-row comparison.
+ export const DEFAULT_LOCALE = "en-US";
+`;
+
+const IMMERSIVE_LINE_HEIGHT_NUMSTAT = "7\t2\tsrc/utils/formatPrice.ts";
+
+export default {
+  ...appMeta,
+  title: "App/RightSidebar",
+  decorators: [
+    (Story: ComponentType) => (
+      <div style={{ width: 1600, height: "100dvh" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    ...appMeta.parameters,
+    chromatic: {
+      ...(appMeta.parameters?.chromatic ?? {}),
+      modes: {
+        dark: { theme: "dark", viewport: 1600 },
+        light: { theme: "light", viewport: 1600 },
+      },
+    },
+  },
+};
+
+export const ReviewTabImmersiveLineHeightDebug: AppStory = {
+  render: () => (
+    <AppWithMocks
+      setup={() => {
+        localStorage.setItem(RIGHT_SIDEBAR_TAB_KEY, JSON.stringify("review"));
+        localStorage.setItem(RIGHT_SIDEBAR_WIDTH_KEY, "760");
+        localStorage.removeItem(getRightSidebarLayoutKey(LINE_HEIGHT_DEBUG_WORKSPACE_ID));
+        updatePersistedState(getReviewImmersiveKey(LINE_HEIGHT_DEBUG_WORKSPACE_ID), true);
+
+        const client = setupSimpleChatStory({
+          workspaceId: LINE_HEIGHT_DEBUG_WORKSPACE_ID,
+          workspaceName: "feature/immersive-line-height",
+          projectName: "my-app",
+          messages: [
+            createUserMessage("msg-1", "Please review this formatter cleanup.", {
+              historySequence: 1,
+            }),
+            createAssistantMessage("msg-2", "Added Intl formatter and cleanup.", {
+              historySequence: 2,
+            }),
+          ],
+          gitDiff: {
+            diffOutput: IMMERSIVE_LINE_HEIGHT_DIFF,
+            numstatOutput: IMMERSIVE_LINE_HEIGHT_NUMSTAT,
+          },
+        });
+
+        expandRightSidebar();
+        return client;
+      }}
+    />
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await waitFor(
+      () => {
+        canvas.getByTestId("immersive-review-view");
+        canvas.getByRole("button", { name: /exit immersive review/i });
+      },
+      { timeout: 10_000 }
+    );
+  },
+};

From 763bd8be89398ba64effef32bd6e6073f4380541 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Fri, 20 Feb 2026 18:04:55 +0000
Subject: [PATCH 40/48] tests: add mixed highlight/fallback immersive review
 story

---
 ...p.rightSidebar.immersiveReview.stories.tsx | 90 +++++++++++++++++++
 1 file changed, 90 insertions(+)

diff --git a/src/browser/stories/App.rightSidebar.immersiveReview.stories.tsx b/src/browser/stories/App.rightSidebar.immersiveReview.stories.tsx
index e793f8fe1d..79322b20e3 100644
--- a/src/browser/stories/App.rightSidebar.immersiveReview.stories.tsx
+++ b/src/browser/stories/App.rightSidebar.immersiveReview.stories.tsx
@@ -43,6 +43,46 @@ index 1111111..2222222 100644
 
 const IMMERSIVE_LINE_HEIGHT_NUMSTAT = "7\t2\tsrc/utils/formatPrice.ts";
 
+const HIGHLIGHT_VS_PLAIN_WORKSPACE_ID = "ws-review-immersive-highlight-vs-plain";
+const HIGHLIGHT_FALLBACK_THRESHOLD_BYTES = 32 * 1024;
+const HIGHLIGHT_FALLBACK_BUFFER_BYTES = 1024;
+const HIGHLIGHT_VS_PLAIN_NUMSTAT = "3\t2\tsrc/review/lineHeightProbe.ts";
+
+function buildHighlightVsPlainDiffOutput(): string {
+  const oversizedContextLines: string[] = [];
+  let contextBytes = 0;
+  let lineIndex = 0;
+
+  // Keep adding context lines until this single context chunk exceeds the
+  // 32kb highlight limit, forcing plain/fallback rendering for those rows.
+  while (contextBytes <= HIGHLIGHT_FALLBACK_THRESHOLD_BYTES + HIGHLIGHT_FALLBACK_BUFFER_BYTES) {
+    const contextLine =
+      `const fallbackProbe${lineIndex.toString().padStart(4, "0")} = createProbeEntry(` +
+      `"fallback-${lineIndex}", { index: ${lineIndex}, mode: "plain-context-chunk" });`;
+    oversizedContextLines.push(` ${contextLine}`);
+    contextBytes += contextLine.length + 1;
+    lineIndex += 1;
+  }
+
+  return [
+    "diff --git a/src/review/lineHeightProbe.ts b/src/review/lineHeightProbe.ts",
+    "index abcdef1..1234567 100644",
+    "--- a/src/review/lineHeightProbe.ts",
+    "+++ b/src/review/lineHeightProbe.ts",
+    "@@ -1,8 +1,9 @@",
+    "-export const BASE_ROW_HEIGHT = 20;",
+    "+export const BASE_ROW_HEIGHT = 22;",
+    '+export const ROW_HEIGHT_MODE = "immersive";',
+    " export function resolveRowHeight(scale = 1): number {",
+    "   return BASE_ROW_HEIGHT * scale;",
+    " }",
+    ...oversizedContextLines,
+    '-export const ROW_HEIGHT_LABEL = "compact";',
+    '+export const ROW_HEIGHT_LABEL = "immersive";',
+    "",
+  ].join("\n");
+}
+
 export default {
   ...appMeta,
   title: "App/RightSidebar",
@@ -109,3 +149,53 @@ export const ReviewTabImmersiveLineHeightDebug: AppStory = {
     );
   },
 };
+
+export const ReviewTabImmersiveHighlightVsPlainHeight: AppStory = {
+  render: () => (
+    <AppWithMocks
+      setup={() => {
+        localStorage.setItem(RIGHT_SIDEBAR_TAB_KEY, JSON.stringify("review"));
+        localStorage.setItem(RIGHT_SIDEBAR_WIDTH_KEY, "760");
+        localStorage.removeItem(getRightSidebarLayoutKey(HIGHLIGHT_VS_PLAIN_WORKSPACE_ID));
+        updatePersistedState(getReviewImmersiveKey(HIGHLIGHT_VS_PLAIN_WORKSPACE_ID), true);
+
+        const diffOutput = buildHighlightVsPlainDiffOutput();
+        const client = setupSimpleChatStory({
+          workspaceId: HIGHLIGHT_VS_PLAIN_WORKSPACE_ID,
+          workspaceName: "feature/immersive-highlight-vs-plain",
+          projectName: "my-app",
+          messages: [
+            createUserMessage("msg-1", "Can you compare highlight and plain line heights?", {
+              historySequence: 1,
+            }),
+            createAssistantMessage(
+              "msg-2",
+              "I generated a mixed diff where one oversized context chunk falls back to plain text.",
+              {
+                historySequence: 2,
+              }
+            ),
+          ],
+          gitDiff: {
+            diffOutput,
+            numstatOutput: HIGHLIGHT_VS_PLAIN_NUMSTAT,
+          },
+        });
+
+        expandRightSidebar();
+        return client;
+      }}
+    />
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await waitFor(
+      () => {
+        canvas.getByTestId("immersive-review-view");
+        canvas.getByRole("button", { name: /exit immersive review/i });
+      },
+      { timeout: 10_000 }
+    );
+  },
+};

From a8648fd3df4b92c209bf9a915bb870722cd26f7e Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Fri, 20 Feb 2026 19:53:39 +0000
Subject: [PATCH 41/48] fix: use functional immersive toggle state update

---
 src/browser/components/RightSidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/browser/components/RightSidebar.tsx b/src/browser/components/RightSidebar.tsx
index 781d6dae24..a0da816153 100644
--- a/src/browser/components/RightSidebar.tsx
+++ b/src/browser/components/RightSidebar.tsx
@@ -863,7 +863,7 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
       e.preventDefault();
       setCollapsed(false);
       selectOrOpenReviewTab();
-      setIsReviewImmersive(!isReviewImmersive);
+      setIsReviewImmersive((prev) => !prev);
     };
 
     window.addEventListener("keydown", handleKeyDown);

From 0ba4cee01b31d0bb653175a0e6059ea9491d01bc Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Fri, 20 Feb 2026 23:23:13 +0000
Subject: [PATCH 42/48] fix: support immersive note edit hotkey and like icon

---
 .../CodeReview/ImmersiveReviewView.tsx        | 72 ++++++++++++++++---
 .../components/shared/DiffRenderer.tsx        | 30 +++++++-
 .../components/shared/InlineReviewNote.tsx    | 17 +++++
 3 files changed, 108 insertions(+), 11 deletions(-)

diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index 58eea963f8..ea4c1bf959 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -13,6 +13,7 @@ import {
   Circle,
   MessageSquare,
   ThumbsDown,
+  ThumbsUp,
   Trash2,
 } from "lucide-react";
 import { cn } from "@/common/lib/utils";
@@ -65,6 +66,11 @@ interface InlineComposerRequest {
   endOffset: number;
 }
 
+interface InlineReviewEditRequest {
+  requestId: number;
+  reviewId: string;
+}
+
 interface SelectedLineRange {
   startIndex: number;
   endIndex: number;
@@ -87,6 +93,7 @@ const LINE_JUMP_SIZE = 10;
 // but still cap it to avoid pathological DOM costs on extremely large diffs.
 const MAX_HIGHLIGHTED_DIFF_LINES = 4000;
 const ACTIVE_LINE_OUTLINE = "1px solid hsl(from var(--color-review-accent) h s l / 0.45)";
+const LIKE_NOTE_PREFIX = "I like this change";
 const DISLIKE_NOTE_PREFIX = "I don't like this change";
 
 function getFileBaseName(filePath: string): string {
@@ -571,7 +578,10 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
   const [inlineComposerRequest, setInlineComposerRequest] = useState<InlineComposerRequest | null>(
     null
   );
+  const [inlineReviewEditRequest, setInlineReviewEditRequest] =
+    useState<InlineReviewEditRequest | null>(null);
   const nextComposerRequestIdRef = useRef(0);
+  const nextInlineReviewEditRequestIdRef = useRef(0);
 
   // Keyboard line cursor state within the whole rendered file.
   const [activeLineIndex, setActiveLineIndex] = useState<number | null>(null);
@@ -793,7 +803,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
   );
 
   const navigateToReview = useCallback(
-    (review: Review) => {
+    (review: Review, options?: { startEditing?: boolean }) => {
       const fileHunks = sortHunksInFileOrder(getFileHunks(allHunks, review.data.filePath));
       if (fileHunks.length === 0) {
         return;
@@ -805,10 +815,36 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
       // Force scroll effect to re-fire even when activeLineIndex is unchanged
       // (for example when the cursor is already inside the selected hunk).
       setScrollNonce((previousNonce) => previousNonce + 1);
+
+      if (options?.startEditing && props.reviewActions?.onEditComment) {
+        nextInlineReviewEditRequestIdRef.current += 1;
+        setInlineReviewEditRequest({
+          requestId: nextInlineReviewEditRequestIdRef.current,
+          reviewId: review.id,
+        });
+      }
     },
-    [allHunks, onSelectHunk]
+    [allHunks, onSelectHunk, props.reviewActions?.onEditComment]
   );
 
+  const diffReviewActions = useMemo<ReviewActionCallbacks | undefined>(() => {
+    if (!props.reviewActions) {
+      return undefined;
+    }
+
+    return {
+      ...props.reviewActions,
+      onEditingChange: (reviewId: string, isEditing: boolean) => {
+        props.reviewActions?.onEditingChange?.(reviewId, isEditing);
+        if (isEditing) {
+          setInlineReviewEditRequest((currentRequest) =>
+            currentRequest?.reviewId === reviewId ? null : currentRequest
+          );
+        }
+      },
+    };
+  }, [props.reviewActions]);
+
   const getCurrentLineSelection = useCallback((): SelectedLineRange | null => {
     if (activeLineIndex === null) {
       return null;
@@ -1000,6 +1036,19 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
           return;
         }
 
+        if (e.key === "e" || e.key === "E") {
+          e.preventDefault();
+          const note = allReviews[focusedNoteIndex];
+          if (note) {
+            // Keep note triage keyboard-first: jump directly from notes list into
+            // editing the exact inline note comment in the diff pane.
+            navigateToReview(note, { startEditing: true });
+            setFocusedPanel("diff");
+            containerRef.current?.focus();
+          }
+          return;
+        }
+
         // Backspace/Delete: delete focused note.
         if (e.key === "Backspace" || e.key === "Delete") {
           e.preventDefault();
@@ -1081,14 +1130,14 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
       // Shift+L: quick like
       if (matchesKeybind(e, KEYBINDS.REVIEW_QUICK_LIKE)) {
         e.preventDefault();
-        openComposer("I like this change");
+        openComposer(LIKE_NOTE_PREFIX);
         return;
       }
 
       // Shift+D: quick dislike
       if (matchesKeybind(e, KEYBINDS.REVIEW_QUICK_DISLIKE)) {
         e.preventDefault();
-        openComposer("I don't like this change");
+        openComposer(DISLIKE_NOTE_PREFIX);
         return;
       }
 
@@ -1384,11 +1433,12 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
                   maxHeight="none"
                   className="rounded-none border-0 [&>div]:overflow-x-visible"
                   onReviewNote={handleReviewNoteSubmit}
-                  reviewActions={props.reviewActions}
+                  reviewActions={diffReviewActions}
                   enableHighlighting={shouldEnableHighlighting}
                   selectedLineRange={selectedLineRange}
                   onLineIndexSelect={handleLineIndexSelect}
                   externalSelectionRequest={externalComposerSelectionRequest}
+                  externalEditRequest={inlineReviewEditRequest}
                 />
               </div>
             </div>
@@ -1419,11 +1469,15 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
             ) : (
               <div className="space-y-1.5">
                 {allReviews.map((review, noteIndex) => {
-                  const isDislike = review.data.userNote
-                    .trimStart()
-                    .startsWith(DISLIKE_NOTE_PREFIX);
+                  const normalizedUserNote = review.data.userNote.trimStart();
+                  const isDislike = normalizedUserNote.startsWith(DISLIKE_NOTE_PREFIX);
+                  const isLike = normalizedUserNote.startsWith(LIKE_NOTE_PREFIX);
                   const statusClasses = getReviewStatusSidebarClasses(review.status);
-                  const ReviewTypeIcon = isDislike ? ThumbsDown : MessageSquare;
+                  const ReviewTypeIcon = isDislike
+                    ? ThumbsDown
+                    : isLike
+                      ? ThumbsUp
+                      : MessageSquare;
                   const isActiveFileReview = review.data.filePath === activeFilePath;
 
                   return (
diff --git a/src/browser/components/shared/DiffRenderer.tsx b/src/browser/components/shared/DiffRenderer.tsx
index 7ecd6e7ea4..1e0a86580f 100644
--- a/src/browser/components/shared/DiffRenderer.tsx
+++ b/src/browser/components/shared/DiffRenderer.tsx
@@ -652,6 +652,11 @@ interface SelectableDiffRendererProps extends Omit<DiffRendererProps, "filePath"
     selection: LineSelection;
     initialNoteText?: string;
   } | null;
+  /** External request to open an existing inline review note in edit mode */
+  externalEditRequest?: {
+    requestId: number;
+    reviewId: string;
+  } | null;
 }
 
 interface LineSelection {
@@ -887,10 +892,20 @@ interface InlineReviewNoteRowProps {
   lineNumberWidths: LineNumberWidths;
   /** Optional action callbacks for review actions */
   reviewActions?: ReviewActionCallbacks;
+  /** Request id that should trigger this note to enter edit mode */
+  editRequestId?: number | null;
 }
 
 const InlineReviewNoteRow: React.FC<InlineReviewNoteRowProps> = React.memo(
-  ({ review, lineType, showLineNumbers, lineNumberMode, lineNumberWidths, reviewActions }) => {
+  ({
+    review,
+    lineType,
+    showLineNumbers,
+    lineNumberMode,
+    lineNumberWidths,
+    reviewActions,
+    editRequestId,
+  }) => {
     const codeBg = getDiffLineBackground(lineType);
     const { showOld, showNew } = getLineNumberModeFlags(lineNumberMode);
 
@@ -921,7 +936,12 @@ const InlineReviewNoteRow: React.FC<InlineReviewNoteRowProps> = React.memo(
         <span style={{ background: codeBg }} />
         {/* Inline note using shared component */}
         <div className="min-w-0 py-0.5 pr-3" style={{ background: codeBg }}>
-          <InlineReviewNote review={review} showFilePath={false} actions={reviewActions} />
+          <InlineReviewNote
+            review={review}
+            showFilePath={false}
+            actions={reviewActions}
+            editRequestId={editRequestId}
+          />
         </div>
       </div>
     );
@@ -952,6 +972,7 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
     selectedLineRange,
     onLineIndexSelect,
     externalSelectionRequest,
+    externalEditRequest,
   }) => {
     const dragAnchorRef = React.useRef<number | null>(null);
     const [isDragging, setIsDragging] = React.useState(false);
@@ -1371,6 +1392,11 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
                   lineNumberMode={lineNumberMode}
                   lineNumberWidths={lineNumberWidths}
                   reviewActions={reviewActions}
+                  editRequestId={
+                    externalEditRequest?.reviewId === review.id
+                      ? externalEditRequest.requestId
+                      : null
+                  }
                 />
               ))}
             </React.Fragment>
diff --git a/src/browser/components/shared/InlineReviewNote.tsx b/src/browser/components/shared/InlineReviewNote.tsx
index b9c3f2d7d2..76224e3b25 100644
--- a/src/browser/components/shared/InlineReviewNote.tsx
+++ b/src/browser/components/shared/InlineReviewNote.tsx
@@ -43,6 +43,8 @@ export interface InlineReviewNoteProps {
   actions?: ReviewActionCallbacks;
   /** Additional className for the container */
   className?: string;
+  /** Request id that should put this note into edit mode */
+  editRequestId?: number | null;
 }
 
 // ═══════════════════════════════════════════════════════════════════════════════
@@ -58,12 +60,14 @@ export const InlineReviewNote: React.FC<InlineReviewNoteProps> = ({
   showFilePath = false,
   actions,
   className,
+  editRequestId,
 }) => {
   const [isEditing, setIsEditing] = useState(false);
   const [editValue, setEditValue] = useState(review.data.userNote);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const isEditingRef = useRef(false);
   const actionsRef = useRef(actions);
+  const handledEditRequestIdRef = useRef<number | null>(null);
 
   useEffect(() => {
     actionsRef.current = actions;
@@ -85,6 +89,19 @@ export const InlineReviewNote: React.FC<InlineReviewNoteProps> = ({
     setTimeout(() => textareaRef.current?.focus(), 0);
   }, [review.data.userNote, review.id, actions]);
 
+  useEffect(() => {
+    if (editRequestId == null || !actions?.onEditComment) {
+      return;
+    }
+
+    if (handledEditRequestIdRef.current === editRequestId) {
+      return;
+    }
+
+    handledEditRequestIdRef.current = editRequestId;
+    handleStartEdit();
+  }, [actions?.onEditComment, editRequestId, handleStartEdit]);
+
   const handleSaveEdit = useCallback(() => {
     if (actions?.onEditComment && editValue.trim() !== review.data.userNote) {
       actions.onEditComment(review.id, editValue.trim());

From b5c5a8879245d1d54c711348576a9daa91957f6b Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Fri, 20 Feb 2026 23:25:18 +0000
Subject: [PATCH 43/48] fmt: apply prettier for immersive review hotkey changes

---
 .../RightSidebar/CodeReview/ImmersiveReviewView.tsx         | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index ea4c1bf959..ea2f8ef547 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -1473,11 +1473,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
                   const isDislike = normalizedUserNote.startsWith(DISLIKE_NOTE_PREFIX);
                   const isLike = normalizedUserNote.startsWith(LIKE_NOTE_PREFIX);
                   const statusClasses = getReviewStatusSidebarClasses(review.status);
-                  const ReviewTypeIcon = isDislike
-                    ? ThumbsDown
-                    : isLike
-                      ? ThumbsUp
-                      : MessageSquare;
+                  const ReviewTypeIcon = isDislike ? ThumbsDown : isLike ? ThumbsUp : MessageSquare;
                   const isActiveFileReview = review.data.filePath === activeFilePath;
 
                   return (

From da314be70d3fb12524066a8688bf564b7caa447c Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Fri, 20 Feb 2026 23:42:39 +0000
Subject: [PATCH 44/48] fix: sync immersive note editing escape and line
 selection

---
 .../CodeReview/ImmersiveReviewView.tsx        | 25 ++++++++++++++-----
 .../components/shared/DiffRenderer.tsx        | 11 +++++---
 .../components/shared/InlineReviewNote.tsx    |  3 +++
 3 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index ea2f8ef547..7a7b123542 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -871,12 +871,20 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
       // from the overlay's lineHunkIds rather than using the stale selectedHunk.
       let targetHunk = selectedHunk;
       let targetRange = selectedHunkRange;
+      let targetSelectionEnd = selection?.endIndex ?? null;
 
       if (selection && (!targetRange || !isSelectionInsideRange(selection, targetRange))) {
         const resolved = findHunkAtLine(selection.endIndex, overlayData, currentFileHunks);
         if (resolved) {
           targetHunk = resolved.hunk;
           targetRange = resolved.range;
+          targetSelectionEnd = Math.max(
+            resolved.range.startIndex,
+            Math.min(resolved.range.endIndex, selection.endIndex)
+          );
+          // Keep cursor state anchored to the intended target line before
+          // hunk-selection effects run; this avoids snapping to hunk start.
+          setActiveLineIndex(targetSelectionEnd);
           // Keep the selected-hunk state in sync so the externalComposerSelectionRequest
           // memo (which checks inlineComposerRequest.hunkId === selectedHunk.id) works.
           onSelectHunk(resolved.hunk.id);
@@ -887,12 +895,17 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
         return;
       }
 
+      const fallbackLineIndex =
+        targetSelectionEnd === null
+          ? targetRange.startIndex
+          : Math.max(targetRange.startIndex, Math.min(targetRange.endIndex, targetSelectionEnd));
+
       const effectiveSelection =
         selection && isSelectionInsideRange(selection, targetRange)
           ? selection
           : {
-              startIndex: targetRange.startIndex,
-              endIndex: targetRange.startIndex,
+              startIndex: fallbackLineIndex,
+              endIndex: fallbackLineIndex,
             };
 
       nextComposerRequestIdRef.current += 1;
@@ -955,9 +968,9 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
 
   const handleLineIndexSelect = useCallback(
     (lineIndex: number, shiftKey: boolean) => {
-      const lineHunkId = overlayData.lineHunkIds[lineIndex];
-      if (lineHunkId && selectedHunkIdRef.current !== lineHunkId) {
-        onSelectHunk(lineHunkId);
+      const resolvedHunk = findHunkAtLine(lineIndex, overlayData, currentFileHunks);
+      if (resolvedHunk && selectedHunkIdRef.current !== resolvedHunk.hunk.id) {
+        onSelectHunk(resolvedHunk.hunk.id);
       }
 
       const anchorIndex = shiftKey
@@ -971,7 +984,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
         setSelectedLineRange(null);
       }
     },
-    [overlayData.lineHunkIds, onSelectHunk]
+    [overlayData, currentFileHunks, onSelectHunk]
   );
 
   // Auto-focus container on mount
diff --git a/src/browser/components/shared/DiffRenderer.tsx b/src/browser/components/shared/DiffRenderer.tsx
index 1e0a86580f..0b922ab39f 100644
--- a/src/browser/components/shared/DiffRenderer.tsx
+++ b/src/browser/components/shared/DiffRenderer.tsx
@@ -1182,8 +1182,9 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
           return;
         }
 
-        // Notify parent that this hunk should become active
+        // Notify parent that this hunk should become active.
         onLineClick?.();
+        onLineIndexSelect?.(lineIndex, shiftKey);
 
         const anchor =
           shiftKey && renderSelectionStartIndex !== null ? renderSelectionStartIndex : lineIndex;
@@ -1192,7 +1193,7 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
         setSelectionInitialNoteText("");
         setSelection({ startIndex: anchor, endIndex: lineIndex });
       },
-      [onLineClick, onReviewNote, renderSelectionStartIndex]
+      [onLineClick, onLineIndexSelect, onReviewNote, renderSelectionStartIndex]
     );
 
     const updateDragSelection = React.useCallback(
@@ -1201,14 +1202,16 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
           return;
         }
 
+        onLineIndexSelect?.(lineIndex, true);
         setSelection({ startIndex: dragAnchorRef.current, endIndex: lineIndex });
       },
-      [isDragging]
+      [isDragging, onLineIndexSelect]
     );
 
     const handleCommentButtonClick = (lineIndex: number, shiftKey: boolean) => {
-      // Notify parent that this hunk should become active
+      // Keep immersive cursor/hunk selection in sync with inline comment actions.
       onLineClick?.();
+      onLineIndexSelect?.(lineIndex, shiftKey);
 
       // Shift-click: extend existing selection
       if (shiftKey && renderSelection) {
diff --git a/src/browser/components/shared/InlineReviewNote.tsx b/src/browser/components/shared/InlineReviewNote.tsx
index 76224e3b25..5d15030627 100644
--- a/src/browser/components/shared/InlineReviewNote.tsx
+++ b/src/browser/components/shared/InlineReviewNote.tsx
@@ -11,6 +11,7 @@ import { Button } from "../ui/button";
 import { Tooltip, TooltipTrigger, TooltipContent } from "../ui/tooltip";
 import { formatLineRangeCompact } from "@/browser/utils/review/lineRange";
 import { matchesKeybind, formatKeybind, KEYBINDS } from "@/browser/utils/ui/keybinds";
+import { stopKeyboardPropagation } from "@/browser/utils/events";
 import { cn } from "@/common/lib/utils";
 import type { Review } from "@/common/types/review";
 
@@ -121,9 +122,11 @@ export const InlineReviewNote: React.FC<InlineReviewNoteProps> = ({
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
       if (matchesKeybind(e, KEYBINDS.SAVE_EDIT)) {
+        stopKeyboardPropagation(e);
         e.preventDefault();
         handleSaveEdit();
       } else if (matchesKeybind(e, KEYBINDS.CANCEL_EDIT)) {
+        stopKeyboardPropagation(e);
         e.preventDefault();
         handleCancelEdit();
       }

From 4c57dd1baa163e0e326e617eb31c0754246417e6 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Fri, 20 Feb 2026 23:46:56 +0000
Subject: [PATCH 45/48] fix: ignore immersive Tab toggle in editable fields

---
 .../components/RightSidebar/CodeReview/ImmersiveReviewView.tsx  | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index 7a7b123542..73abf260b2 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -997,6 +997,8 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     const handleKeyDown = (e: KeyboardEvent) => {
       // Tab: toggle between diff and notes panels.
       if (matchesKeybind(e, KEYBINDS.REVIEW_FOCUS_NOTES)) {
+        // Keep normal tab behavior when typing in inline note editors.
+        if (isEditableElement(e.target)) return;
         e.preventDefault();
         if (focusedPanel === "diff") {
           if (allReviews.length > 0) {

From 3edffed70e96e1d9b3d7445983684614f522d914 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Sat, 21 Feb 2026 13:42:42 +0000
Subject: [PATCH 46/48] =?UTF-8?q?=F0=9F=A4=96=20fix:=20stabilize=20review?=
 =?UTF-8?q?=20composer=20sync=20and=20keybind=20semantics?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CodeReview/ImmersiveReviewView.tsx        | 46 ++++++++++++++++---
 .../components/shared/DiffRenderer.tsx        | 29 ++++--------
 src/browser/utils/review/navigation.test.ts   | 31 +++++++++++++
 .../utils/review/quickReviewNotes.test.ts     | 24 ++++++++++
 src/browser/utils/ui/keybinds.ts              |  4 +-
 5 files changed, 106 insertions(+), 28 deletions(-)

diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index 73abf260b2..311df4a9b0 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -76,6 +76,11 @@ interface SelectedLineRange {
   endIndex: number;
 }
 
+interface PendingComposerHunkSwitch {
+  fromHunkId: string | null;
+  toHunkId: string;
+}
+
 interface HunkLineRange {
   startIndex: number;
   endIndex: number;
@@ -582,6 +587,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     useState<InlineReviewEditRequest | null>(null);
   const nextComposerRequestIdRef = useRef(0);
   const nextInlineReviewEditRequestIdRef = useRef(0);
+  const pendingComposerHunkSwitchRef = useRef<PendingComposerHunkSwitch | null>(null);
 
   // Keyboard line cursor state within the whole rendered file.
   const [activeLineIndex, setActiveLineIndex] = useState<number | null>(null);
@@ -681,13 +687,32 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
 
   useEffect(() => {
     if (!inlineComposerRequest) {
+      pendingComposerHunkSwitchRef.current = null;
       return;
     }
 
-    if (!selectedHunk || inlineComposerRequest.hunkId !== selectedHunk.id) {
-      setInlineComposerRequest(null);
+    if (selectedHunk?.id === inlineComposerRequest.hunkId) {
+      pendingComposerHunkSwitchRef.current = null;
+      return;
+    }
+
+    const pendingSwitch = pendingComposerHunkSwitchRef.current;
+    const isAwaitingRequestedHunk =
+      pendingSwitch?.toHunkId === inlineComposerRequest.hunkId &&
+      (selectedHunkId === pendingSwitch.fromHunkId || selectedHunkId === null);
+
+    if (isAwaitingRequestedHunk) {
+      const requestedHunkStillExists = currentFileHunks.some(
+        (hunk) => hunk.id === inlineComposerRequest.hunkId
+      );
+      if (requestedHunkStillExists) {
+        return;
+      }
     }
-  }, [inlineComposerRequest, selectedHunk]);
+
+    pendingComposerHunkSwitchRef.current = null;
+    setInlineComposerRequest(null);
+  }, [currentFileHunks, inlineComposerRequest, selectedHunk, selectedHunkId]);
 
   // Refs keep hot-path callbacks stable so cursor movement doesn't trigger expensive re-renders.
   const activeLineIndexRef = useRef<number | null>(null);
@@ -865,6 +890,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
   const openComposer = useCallback(
     (prefill: string) => {
       const selection = getCurrentLineSelection();
+      pendingComposerHunkSwitchRef.current = null;
 
       // Resolve which hunk to attach the composer to. If the cursor has moved
       // into a different hunk (e.g. via arrow-key line navigation), look it up
@@ -885,9 +911,17 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
           // Keep cursor state anchored to the intended target line before
           // hunk-selection effects run; this avoids snapping to hunk start.
           setActiveLineIndex(targetSelectionEnd);
-          // Keep the selected-hunk state in sync so the externalComposerSelectionRequest
-          // memo (which checks inlineComposerRequest.hunkId === selectedHunk.id) works.
-          onSelectHunk(resolved.hunk.id);
+
+          const currentSelectedHunkId = selectedHunkIdRef.current;
+          if (resolved.hunk.id !== currentSelectedHunkId) {
+            // Record the in-flight hunk switch so mismatch guards do not clear
+            // this composer request before onSelectHunk propagates.
+            pendingComposerHunkSwitchRef.current = {
+              fromHunkId: currentSelectedHunkId,
+              toHunkId: resolved.hunk.id,
+            };
+            onSelectHunk(resolved.hunk.id);
+          }
         }
       }
 
diff --git a/src/browser/components/shared/DiffRenderer.tsx b/src/browser/components/shared/DiffRenderer.tsx
index 0b922ab39f..a269d249d2 100644
--- a/src/browser/components/shared/DiffRenderer.tsx
+++ b/src/browser/components/shared/DiffRenderer.tsx
@@ -995,27 +995,25 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
     const [selection, setSelection] = React.useState<LineSelection | null>(null);
     const [selectionInitialNoteText, setSelectionInitialNoteText] = React.useState("");
 
-    const lastExternalSelectionSignatureRef = React.useRef<string | null>(null);
+    const lastExternalSelectionRequestIdRef = React.useRef<number | null>(null);
 
     React.useEffect(() => {
       if (!externalSelectionRequest) {
-        if (lastExternalSelectionSignatureRef.current !== null) {
-          lastExternalSelectionSignatureRef.current = null;
+        if (lastExternalSelectionRequestIdRef.current !== null) {
+          lastExternalSelectionRequestIdRef.current = null;
           setSelection(null);
           setSelectionInitialNoteText("");
         }
         return;
       }
 
-      const signature = `${externalSelectionRequest.requestId}:${externalSelectionRequest.selection.startIndex}:${externalSelectionRequest.selection.endIndex}:${externalSelectionRequest.initialNoteText ?? ""}`;
-      if (lastExternalSelectionSignatureRef.current === signature) {
+      // Reset only when a new request arrives; selection churn from the parent
+      // for the same request should not wipe an in-progress composer draft.
+      if (lastExternalSelectionRequestIdRef.current === externalSelectionRequest.requestId) {
         return;
       }
 
-      lastExternalSelectionSignatureRef.current = signature;
-      // Sync to internal state so drag interactions work after external requests.
-      // renderSelection/renderNoteText below ensure the composer appears
-      // immediately without waiting for this async state update.
+      lastExternalSelectionRequestIdRef.current = externalSelectionRequest.requestId;
       setSelection({
         startIndex: externalSelectionRequest.selection.startIndex,
         endIndex: externalSelectionRequest.selection.endIndex,
@@ -1023,17 +1021,8 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
       setSelectionInitialNoteText(externalSelectionRequest.initialNoteText ?? "");
     }, [externalSelectionRequest]);
 
-    // Derive effective selection synchronously from external requests to avoid
-    // an extra render cycle through useEffect -> setSelection on large diffs.
-    const renderSelection: LineSelection | null = externalSelectionRequest
-      ? {
-          startIndex: externalSelectionRequest.selection.startIndex,
-          endIndex: externalSelectionRequest.selection.endIndex,
-        }
-      : selection;
-    const renderNoteText = externalSelectionRequest
-      ? (externalSelectionRequest.initialNoteText ?? "")
-      : selectionInitialNoteText;
+    const renderSelection: LineSelection | null = selection;
+    const renderNoteText = selectionInitialNoteText;
     const renderSelectionStartIndex = renderSelection?.startIndex ?? null;
 
     // Notify parent when composition state changes
diff --git a/src/browser/utils/review/navigation.test.ts b/src/browser/utils/review/navigation.test.ts
index 49d0de8cfc..f5e011d62f 100644
--- a/src/browser/utils/review/navigation.test.ts
+++ b/src/browser/utils/review/navigation.test.ts
@@ -214,6 +214,37 @@ describe("flattenFileTreeLeaves", () => {
     ]);
   });
 
+  test("normalizes rename syntax to renamed leaf paths", () => {
+    const root: FileTreeNode = {
+      name: "",
+      path: "",
+      isDirectory: true,
+      children: [
+        {
+          name: "src",
+          path: "src",
+          isDirectory: true,
+          children: [
+            {
+              name: "{oldName.ts => newName.ts}",
+              path: "src/{oldName.ts => newName.ts}",
+              isDirectory: false,
+              children: [],
+            },
+          ],
+        },
+        {
+          name: "README.old.md => README.md",
+          path: "README.old.md => README.md",
+          isDirectory: false,
+          children: [],
+        },
+      ],
+    };
+
+    expect(flattenFileTreeLeaves(root)).toEqual(["src/newName.ts", "README.md"]);
+  });
+
   test("skips directory nodes and only returns leaf file paths", () => {
     const root: FileTreeNode = {
       name: "",
diff --git a/src/browser/utils/review/quickReviewNotes.test.ts b/src/browser/utils/review/quickReviewNotes.test.ts
index caf356cc19..cc0809edb1 100644
--- a/src/browser/utils/review/quickReviewNotes.test.ts
+++ b/src/browser/utils/review/quickReviewNotes.test.ts
@@ -168,6 +168,30 @@ describe("buildQuickLineReviewNote", () => {
     expect(note.newStart).toBe(50);
   });
 
+  test("keeps old/new coordinates for context-only selections", () => {
+    const hunk = makeHunk({
+      oldStart: 30,
+      oldLines: 3,
+      newStart: 40,
+      newLines: 3,
+      content:
+        "-const removed = 1;\n+const added = 1;\n const keepOne = added;\n const keepTwo = keepOne;",
+      header: "@@ -30,3 +40,3 @@",
+    });
+
+    const note = buildQuickLineReviewNote({
+      hunk,
+      startIndex: 2,
+      endIndex: 3,
+      userNote: "Context-only selection",
+    });
+
+    expect(note.lineRange).toBe("-31-32 +41-42");
+    expect(note.selectedDiff).toBe(" const keepOne = added;\n const keepTwo = keepOne;");
+    expect(note.oldStart).toBe(31);
+    expect(note.newStart).toBe(41);
+  });
+
   test("clamps out-of-bounds selection indices", () => {
     const hunk = makeHunk({
       content: "-old\n+new\n context",
diff --git a/src/browser/utils/ui/keybinds.ts b/src/browser/utils/ui/keybinds.ts
index 26d730c3c8..07767a7119 100644
--- a/src/browser/utils/ui/keybinds.ts
+++ b/src/browser/utils/ui/keybinds.ts
@@ -382,10 +382,10 @@ export const KEYBINDS = {
   TOGGLE_HUNK_READ: { key: "m" },
 
   /** Mark selected hunk as read in Code Review panel */
-  MARK_HUNK_READ: { key: "l" },
+  MARK_HUNK_READ: { key: "r" },
 
   /** Mark selected hunk as unread in Code Review panel */
-  MARK_HUNK_UNREAD: { key: "h" },
+  MARK_HUNK_UNREAD: { key: "u" },
 
   /** Mark entire file (all hunks) as read in Code Review panel */
   MARK_FILE_READ: { key: "M", shift: true },

From 30e0b871fd6a500721522c0c33ae1801c9be83b5 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Sat, 21 Feb 2026 13:49:23 +0000
Subject: [PATCH 47/48] fix: prevent sticky external inline composer request

---
 src/browser/components/shared/DiffRenderer.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/browser/components/shared/DiffRenderer.tsx b/src/browser/components/shared/DiffRenderer.tsx
index a269d249d2..fb274e41ca 100644
--- a/src/browser/components/shared/DiffRenderer.tsx
+++ b/src/browser/components/shared/DiffRenderer.tsx
@@ -996,6 +996,7 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
     const [selectionInitialNoteText, setSelectionInitialNoteText] = React.useState("");
 
     const lastExternalSelectionRequestIdRef = React.useRef<number | null>(null);
+    const dismissedExternalSelectionRequestIdRef = React.useRef<number | null>(null);
 
     React.useEffect(() => {
       if (!externalSelectionRequest) {
@@ -1007,6 +1008,12 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
         return;
       }
 
+      // If the composer was closed for this request ID, keep it dismissed even
+      // if the parent prop lingers and re-renders before clearing.
+      if (dismissedExternalSelectionRequestIdRef.current === externalSelectionRequest.requestId) {
+        return;
+      }
+
       // Reset only when a new request arrives; selection churn from the parent
       // for the same request should not wipe an in-progress composer draft.
       if (lastExternalSelectionRequestIdRef.current === externalSelectionRequest.requestId) {
@@ -1223,12 +1230,18 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
 
     const handleSubmitNote = (data: ReviewNoteData) => {
       if (!onReviewNote) return;
+      if (externalSelectionRequest) {
+        dismissedExternalSelectionRequestIdRef.current = externalSelectionRequest.requestId;
+      }
       onReviewNote(data);
       setSelection(null);
       setSelectionInitialNoteText("");
     };
 
     const handleCancelNote = () => {
+      if (externalSelectionRequest) {
+        dismissedExternalSelectionRequestIdRef.current = externalSelectionRequest.requestId;
+      }
       setSelection(null);
       setSelectionInitialNoteText("");
     };

From 240714ee99a0863bf3aa3c20dc2af5036d70865a Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Sat, 21 Feb 2026 16:42:52 +0000
Subject: [PATCH 48/48] fix inline composer external request/render cancel sync

---
 .../CodeReview/ImmersiveReviewView.tsx        |  8 ++++++++
 .../components/shared/DiffRenderer.tsx        | 20 +++++++++++++++++--
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index 311df4a9b0..3b7b164379 100644
--- a/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -973,6 +973,13 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     [onReviewNote]
   );
 
+  const handleInlineComposerCancel = useCallback(() => {
+    // Keep immersive parent state aligned with child composer teardown so canceled
+    // keyboard-initiated requests do not linger or steal focus.
+    setInlineComposerRequest(null);
+    containerRef.current?.focus();
+  }, []);
+
   const moveLineCursor = useCallback(
     (delta: number, extendRange: boolean) => {
       const lineCount = overlayData.lineHunkIds.length;
@@ -1482,6 +1489,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
                   maxHeight="none"
                   className="rounded-none border-0 [&>div]:overflow-x-visible"
                   onReviewNote={handleReviewNoteSubmit}
+                  onComposerCancel={handleInlineComposerCancel}
                   reviewActions={diffReviewActions}
                   enableHighlighting={shouldEnableHighlighting}
                   selectedLineRange={selectedLineRange}
diff --git a/src/browser/components/shared/DiffRenderer.tsx b/src/browser/components/shared/DiffRenderer.tsx
index fb274e41ca..1f45d141f2 100644
--- a/src/browser/components/shared/DiffRenderer.tsx
+++ b/src/browser/components/shared/DiffRenderer.tsx
@@ -657,6 +657,8 @@ interface SelectableDiffRendererProps extends Omit<DiffRendererProps, "filePath"
     requestId: number;
     reviewId: string;
   } | null;
+  /** Callback when the inline composer is canceled (for parent/child sync). */
+  onComposerCancel?: () => void;
 }
 
 interface LineSelection {
@@ -973,6 +975,7 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
     onLineIndexSelect,
     externalSelectionRequest,
     externalEditRequest,
+    onComposerCancel,
   }) => {
     const dragAnchorRef = React.useRef<number | null>(null);
     const [isDragging, setIsDragging] = React.useState(false);
@@ -1028,8 +1031,20 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
       setSelectionInitialNoteText(externalSelectionRequest.initialNoteText ?? "");
     }, [externalSelectionRequest]);
 
-    const renderSelection: LineSelection | null = selection;
-    const renderNoteText = selectionInitialNoteText;
+    // Render newly-issued external composer requests immediately so immersive actions
+    // don't show a one-frame delay while local state catches up in the effect above.
+    const pendingExternalSelectionRequest =
+      externalSelectionRequest &&
+      dismissedExternalSelectionRequestIdRef.current !== externalSelectionRequest.requestId &&
+      lastExternalSelectionRequestIdRef.current !== externalSelectionRequest.requestId
+        ? externalSelectionRequest
+        : null;
+
+    const renderSelection: LineSelection | null =
+      pendingExternalSelectionRequest?.selection ?? selection;
+    const renderNoteText = pendingExternalSelectionRequest
+      ? (pendingExternalSelectionRequest.initialNoteText ?? "")
+      : selectionInitialNoteText;
     const renderSelectionStartIndex = renderSelection?.startIndex ?? null;
 
     // Notify parent when composition state changes
@@ -1244,6 +1259,7 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
       }
       setSelection(null);
       setSelectionInitialNoteText("");
+      onComposerCancel?.();
     };
 
     const isLineInSelection = (index: number, lineSelection: LineSelection | null | undefined) => {