🤖 feat: immersive keyboard-first code review mode

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">

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,
@@ -103,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;
@@ -121,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
@@ -165,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
@@ -189,6 +222,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 {
@@ -594,6 +635,7 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
   isResizing = false,
   onReviewNote,
   isCreating = false,
+  immersiveHidden = false,
   addTerminalRef,
 }) => {
   // Trigger for focusing Review panel (preserves hunk selection)
@@ -611,6 +653,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();
@@ -671,6 +718,21 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
     [layoutDraft, layoutRaw, initialActiveTab]
   );
 
+  const hasReviewPanelMounted = React.useMemo(
+    () => !collapsed && hasMountedReviewPanel(layout.root),
+    [collapsed, 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(() => {
@@ -735,6 +797,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 +850,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((prev) => !prev);
+    };
+
+    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
@@ -1218,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"