diff --git a/apps/code/src/renderer/components/GlobalEventHandlers.tsx b/apps/code/src/renderer/components/GlobalEventHandlers.tsx
index 67a51367f..8fb59afc2 100644
--- a/apps/code/src/renderer/components/GlobalEventHandlers.tsx
+++ b/apps/code/src/renderer/components/GlobalEventHandlers.tsx
@@ -1,6 +1,6 @@
+import { useReviewNavigationStore } from "@features/code-review/stores/reviewNavigationStore";
 import { useFolders } from "@features/folders/hooks/useFolders";
 import { usePanelLayoutStore } from "@features/panels/store/panelLayoutStore";
-import { useRightSidebarStore } from "@features/right-sidebar";
 import { useSettingsDialogStore } from "@features/settings/stores/settingsDialogStore";
 import { useSidebarData } from "@features/sidebar/hooks/useSidebarData";
 import { useVisualTaskOrder } from "@features/sidebar/hooks/useVisualTaskOrder";
@@ -46,7 +46,12 @@ export function GlobalEventHandlers({
   const { data: workspaces = {} } = useWorkspaces();
   const clearAllLayouts = usePanelLayoutStore((state) => state.clearAllLayouts);
   const toggleLeftSidebar = useSidebarStore((state) => state.toggle);
-  const toggleRightSidebar = useRightSidebarStore((state) => state.toggle);
+  const setReviewMode = useReviewNavigationStore(
+    (state) => state.setReviewMode,
+  );
+  const getReviewMode = useReviewNavigationStore(
+    (state) => state.getReviewMode,
+  );
 
   const currentTaskId = view.type === "task-detail" ? view.data?.id : undefined;
   const { workspace: currentWorkspace, handleToggleFocus } = useFocusWorkspace(
@@ -163,8 +168,14 @@ export function GlobalEventHandlers({
   useHotkeys(SHORTCUTS.SETTINGS, handleOpenSettings, globalOptions);
   useHotkeys(SHORTCUTS.GO_BACK, goBack, globalOptions);
   useHotkeys(SHORTCUTS.GO_FORWARD, goForward, globalOptions);
+  const handleToggleReview = useCallback(() => {
+    if (!currentTaskId) return;
+    const mode = getReviewMode(currentTaskId);
+    setReviewMode(currentTaskId, mode === "closed" ? "split" : "closed");
+  }, [currentTaskId, getReviewMode, setReviewMode]);
+
   useHotkeys(SHORTCUTS.TOGGLE_LEFT_SIDEBAR, toggleLeftSidebar, globalOptions);
-  useHotkeys(SHORTCUTS.TOGGLE_RIGHT_SIDEBAR, toggleRightSidebar, globalOptions);
+  useHotkeys(SHORTCUTS.TOGGLE_REVIEW_PANEL, handleToggleReview, globalOptions);
   useHotkeys(SHORTCUTS.SHORTCUTS_SHEET, onToggleShortcutsSheet, globalOptions);
   useHotkeys(SHORTCUTS.INBOX, navigateToInbox, globalOptions);
   useHotkeys(SHORTCUTS.PREV_TASK, handlePrevTask, globalOptions, [
diff --git a/apps/code/src/renderer/components/HeaderRow.tsx b/apps/code/src/renderer/components/HeaderRow.tsx
index 90df2ee26..d8ddeb943 100644
--- a/apps/code/src/renderer/components/HeaderRow.tsx
+++ b/apps/code/src/renderer/components/HeaderRow.tsx
@@ -1,7 +1,6 @@
+import { DiffStatsBadge } from "@features/code-review/components/DiffStatsBadge";
 import { CloudGitInteractionHeader } from "@features/git-interaction/components/CloudGitInteractionHeader";
 import { GitInteractionHeader } from "@features/git-interaction/components/GitInteractionHeader";
-import { RightSidebarTrigger } from "@features/right-sidebar/components/RightSidebarTrigger";
-import { useRightSidebarStore } from "@features/right-sidebar/stores/rightSidebarStore";
 import { SidebarTrigger } from "@features/sidebar/components/SidebarTrigger";
 import { useSidebarStore } from "@features/sidebar/stores/sidebarStore";
 import { useWorkspace } from "@features/workspace/hooks/useWorkspace";
@@ -24,19 +23,9 @@ export function HeaderRow() {
   const isResizing = useSidebarStore((state) => state.isResizing);
   const setIsResizing = useSidebarStore((state) => state.setIsResizing);
 
-  const rightSidebarOpen = useRightSidebarStore((state) => state.open);
-  const rightSidebarWidth = useRightSidebarStore((state) => state.width);
-  const rightSidebarIsResizing = useRightSidebarStore(
-    (state) => state.isResizing,
-  );
-  const setRightSidebarIsResizing = useRightSidebarStore(
-    (state) => state.setIsResizing,
-  );
-
   const activeTaskId = view.type === "task-detail" ? view.data?.id : undefined;
   const activeWorkspace = useWorkspace(activeTaskId);
   const isCloudTask = activeWorkspace?.mode === "cloud";
-  const showRightSidebarSection = view.type === "task-detail";
 
   const handleLeftSidebarMouseDown = (e: React.MouseEvent) => {
     e.preventDefault();
@@ -45,13 +34,6 @@ export function HeaderRow() {
     document.body.style.userSelect = "none";
   };
 
-  const handleRightSidebarMouseDown = (e: React.MouseEvent) => {
-    e.preventDefault();
-    setRightSidebarIsResizing(true);
-    document.body.style.cursor = "col-resize";
-    document.body.style.userSelect = "none";
-  };
-
   return (
     <Flex
       align="center"
@@ -108,45 +90,24 @@ export function HeaderRow() {
         </Flex>
       )}
 
-      {showRightSidebarSection && view.type === "task-detail" && view.data && (
+      {view.type === "task-detail" && view.data && (
         <Flex
           align="center"
-          justify={rightSidebarOpen ? "between" : "end"}
-          px="3"
+          gap="3"
+          pr="3"
           style={{
-            width: rightSidebarOpen ? `${rightSidebarWidth}px` : undefined,
-            minWidth: rightSidebarOpen ? `${COLLAPSED_WIDTH}px` : undefined,
             height: "100%",
-            borderLeft: "1px solid var(--gray-6)",
-            transition: rightSidebarIsResizing
-              ? "none"
-              : "width 0.2s ease-in-out",
-            position: "relative",
+            flexShrink: 0,
           }}
         >
-          <RightSidebarTrigger />
-          {rightSidebarOpen &&
-            (isCloudTask ? (
+          <div className="no-drag">
+            {isCloudTask ? (
               <CloudGitInteractionHeader taskId={view.data.id} />
             ) : (
               <GitInteractionHeader taskId={view.data.id} />
-            ))}
-          {rightSidebarOpen && (
-            <Box
-              onMouseDown={handleRightSidebarMouseDown}
-              className="no-drag"
-              style={{
-                position: "absolute",
-                left: 0,
-                top: 0,
-                bottom: 0,
-                width: "4px",
-                cursor: "col-resize",
-                backgroundColor: "transparent",
-                zIndex: 100,
-              }}
-            />
-          )}
+            )}
+          </div>
+          <DiffStatsBadge task={view.data} />
         </Flex>
       )}
     </Flex>
diff --git a/apps/code/src/renderer/components/MainLayout.tsx b/apps/code/src/renderer/components/MainLayout.tsx
index 698574438..f49e76d66 100644
--- a/apps/code/src/renderer/components/MainLayout.tsx
+++ b/apps/code/src/renderer/components/MainLayout.tsx
@@ -7,7 +7,6 @@ import { ArchivedTasksView } from "@features/archive/components/ArchivedTasksVie
 import { CommandMenu } from "@features/command/components/CommandMenu";
 import { CommandCenterView } from "@features/command-center/components/CommandCenterView";
 import { InboxView } from "@features/inbox/components/InboxView";
-import { RightSidebar, RightSidebarContent } from "@features/right-sidebar";
 import { FolderSettingsView } from "@features/settings/components/FolderSettingsView";
 import { SettingsDialog } from "@features/settings/components/SettingsDialog";
 import { MainSidebar } from "@features/sidebar/components/MainSidebar";
@@ -82,12 +81,6 @@ export function MainLayout() {
 
           {view.type === "skills" && <SkillsView />}
         </Box>
-
-        {view.type === "task-detail" && view.data && (
-          <RightSidebar>
-            <RightSidebarContent taskId={view.data.id} task={view.data} />
-          </RightSidebar>
-        )}
       </Flex>
 
       <CommandMenu open={commandMenuOpen} onOpenChange={setCommandMenuOpen} />
diff --git a/apps/code/src/renderer/constants/keyboard-shortcuts.ts b/apps/code/src/renderer/constants/keyboard-shortcuts.ts
index 3ae4df768..26fb45464 100644
--- a/apps/code/src/renderer/constants/keyboard-shortcuts.ts
+++ b/apps/code/src/renderer/constants/keyboard-shortcuts.ts
@@ -8,7 +8,7 @@ export const SHORTCUTS = {
   GO_BACK: "mod+[",
   GO_FORWARD: "mod+]",
   TOGGLE_LEFT_SIDEBAR: "mod+b",
-  TOGGLE_RIGHT_SIDEBAR: "mod+shift+b",
+  TOGGLE_REVIEW_PANEL: "mod+shift+b",
   PREV_TASK: "mod+shift+[,ctrl+shift+tab",
   NEXT_TASK: "mod+shift+],ctrl+tab",
   CLOSE_TAB: "mod+w",
@@ -112,9 +112,9 @@ export const KEYBOARD_SHORTCUTS: KeyboardShortcut[] = [
     category: "navigation",
   },
   {
-    id: "toggle-right-sidebar",
-    keys: SHORTCUTS.TOGGLE_RIGHT_SIDEBAR,
-    description: "Toggle right sidebar",
+    id: "toggle-review-panel",
+    keys: SHORTCUTS.TOGGLE_REVIEW_PANEL,
+    description: "Toggle review panel",
     category: "navigation",
   },
   {
diff --git a/apps/code/src/renderer/features/code-review/components/CloudReviewPage.tsx b/apps/code/src/renderer/features/code-review/components/CloudReviewPage.tsx
index 7cb0ac7a8..a643941c6 100644
--- a/apps/code/src/renderer/features/code-review/components/CloudReviewPage.tsx
+++ b/apps/code/src/renderer/features/code-review/components/CloudReviewPage.tsx
@@ -15,11 +15,11 @@ import {
 } from "./ReviewShell";
 
 interface CloudReviewPageProps {
-  taskId: string;
   task: Task;
 }
 
-export function CloudReviewPage({ taskId, task }: CloudReviewPageProps) {
+export function CloudReviewPage({ task }: CloudReviewPageProps) {
+  const taskId = task.id;
   const { effectiveBranch, prUrl, isRunActive, remoteFiles, isLoading } =
     useCloudChangedFiles(taskId, task);
   const onComment = useReviewComment(taskId);
@@ -64,6 +64,7 @@ export function CloudReviewPage({ taskId, task }: CloudReviewPageProps) {
   return (
     <ReviewShell
       taskId={taskId}
+      task={task}
       fileCount={remoteFiles.length}
       linesAdded={linesAdded}
       linesRemoved={linesRemoved}
diff --git a/apps/code/src/renderer/features/code-review/components/DiffStatsBadge.tsx b/apps/code/src/renderer/features/code-review/components/DiffStatsBadge.tsx
new file mode 100644
index 000000000..44c6c0a04
--- /dev/null
+++ b/apps/code/src/renderer/features/code-review/components/DiffStatsBadge.tsx
@@ -0,0 +1,113 @@
+import { Tooltip } from "@components/ui/Tooltip";
+import { useGitQueries } from "@features/git-interaction/hooks/useGitQueries";
+import { computeDiffStats } from "@features/git-interaction/utils/diffStats";
+import { useCwd } from "@features/sidebar/hooks/useCwd";
+import { useCloudChangedFiles } from "@features/task-detail/hooks/useCloudChangedFiles";
+import { useWorkspace } from "@features/workspace/hooks/useWorkspace";
+import { GitDiff } from "@phosphor-icons/react";
+import { Flex, Text } from "@radix-ui/themes";
+import {
+  formatHotkey,
+  SHORTCUTS,
+} from "@renderer/constants/keyboard-shortcuts";
+import { useReviewNavigationStore } from "@renderer/features/code-review/stores/reviewNavigationStore";
+import type { Task } from "@shared/types";
+import { useMemo } from "react";
+
+interface DiffStatsBadgeProps {
+  task: Task;
+}
+
+function useChangedFileStats(task: Task) {
+  const taskId = task.id;
+  const workspace = useWorkspace(taskId);
+  const isCloud =
+    workspace?.mode === "cloud" || task.latest_run?.environment === "cloud";
+  const repoPath = useCwd(taskId);
+
+  const { diffStats: localDiffStats } = useGitQueries(
+    isCloud ? undefined : repoPath,
+  );
+
+  const { changedFiles: cloudFiles } = useCloudChangedFiles(taskId, task);
+
+  return useMemo(() => {
+    if (isCloud) {
+      const stats = computeDiffStats(cloudFiles);
+      return {
+        filesChanged: stats.filesChanged,
+        linesAdded: stats.linesAdded,
+        linesRemoved: stats.linesRemoved,
+      };
+    }
+    return {
+      filesChanged: localDiffStats.filesChanged,
+      linesAdded: localDiffStats.linesAdded,
+      linesRemoved: localDiffStats.linesRemoved,
+    };
+  }, [isCloud, cloudFiles, localDiffStats]);
+}
+
+export function DiffStatsBadge({ task }: DiffStatsBadgeProps) {
+  const taskId = task.id;
+  const { filesChanged, linesAdded, linesRemoved } = useChangedFileStats(task);
+  const reviewMode = useReviewNavigationStore(
+    (s) => s.reviewModes[taskId] ?? "closed",
+  );
+  const setReviewMode = useReviewNavigationStore((s) => s.setReviewMode);
+
+  const hasChanges = filesChanged > 0;
+
+  const isOpen = reviewMode !== "closed";
+
+  const handleClick = () => {
+    setReviewMode(taskId, isOpen ? "closed" : "split");
+  };
+
+  return (
+    <Tooltip
+      content={isOpen ? "Close review panel" : "Open review panel"}
+      shortcut={formatHotkey(SHORTCUTS.TOGGLE_REVIEW_PANEL)}
+      side="bottom"
+    >
+      <button
+        type="button"
+        onClick={handleClick}
+        className="no-drag hover:bg-[var(--gray-a3)]"
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "4px",
+          padding: "0 6px",
+          height: "24px",
+          borderRadius: "var(--radius-1)",
+          border: "none",
+          cursor: "pointer",
+          fontSize: "11px",
+          fontFamily: "var(--code-font-family)",
+          background: isOpen ? "var(--gray-a3)" : "transparent",
+          color: "var(--gray-11)",
+          transition: "background 0.1s",
+        }}
+      >
+        <GitDiff size={14} style={{ flexShrink: 0 }} />
+        {hasChanges ? (
+          <Flex align="center" gap="1">
+            {linesAdded > 0 && (
+              <Text style={{ color: "var(--green-9)", fontSize: "11px" }}>
+                +{linesAdded}
+              </Text>
+            )}
+            {linesRemoved > 0 && (
+              <Text style={{ color: "var(--red-9)", fontSize: "11px" }}>
+                -{linesRemoved}
+              </Text>
+            )}
+          </Flex>
+        ) : (
+          <Text style={{ color: "var(--gray-9)", fontSize: "11px" }}>0</Text>
+        )}
+      </button>
+    </Tooltip>
+  );
+}
diff --git a/apps/code/src/renderer/features/code-review/components/ReviewPage.tsx b/apps/code/src/renderer/features/code-review/components/ReviewPage.tsx
index b86df4a0f..1ffd21111 100644
--- a/apps/code/src/renderer/features/code-review/components/ReviewPage.tsx
+++ b/apps/code/src/renderer/features/code-review/components/ReviewPage.tsx
@@ -1,11 +1,11 @@
 import { makeFileKey } from "@features/git-interaction/utils/fileKey";
 import { usePanelLayoutStore } from "@features/panels/store/panelLayoutStore";
-import { isTabActiveInTree } from "@features/panels/store/panelStoreHelpers";
 import { useCwd } from "@features/sidebar/hooks/useCwd";
 import type { parsePatchFiles } from "@pierre/diffs";
 import { Flex, Text } from "@radix-ui/themes";
+import { useReviewNavigationStore } from "@renderer/features/code-review/stores/reviewNavigationStore";
 import { useTRPC } from "@renderer/trpc/client";
-import type { ChangedFile } from "@shared/types";
+import type { ChangedFile, Task } from "@shared/types";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 import { useReviewComment } from "../hooks/useReviewComment";
@@ -22,17 +22,16 @@ import {
 } from "./ReviewShell";
 
 interface ReviewPageProps {
-  taskId: string;
+  task: Task;
 }
 
-export function ReviewPage({ taskId }: ReviewPageProps) {
+export function ReviewPage({ task }: ReviewPageProps) {
+  const taskId = task.id;
   const repoPath = useCwd(taskId);
   const openFile = usePanelLayoutStore((s) => s.openFile);
-  const isReviewTabActive = usePanelLayoutStore((s) => {
-    const layout = s.getLayout(taskId);
-    if (!layout) return false;
-    return isTabActiveInTree(layout.panelTree, "review");
-  });
+  const isReviewOpen = useReviewNavigationStore(
+    (s) => (s.reviewModes[taskId] ?? "closed") !== "closed",
+  );
   const onComment = useReviewComment(taskId);
 
   const {
@@ -46,7 +45,7 @@ export function ReviewPage({ taskId }: ReviewPageProps) {
     allPaths,
     diffLoading,
     refetch,
-  } = useReviewDiffs(repoPath, isReviewTabActive);
+  } = useReviewDiffs(repoPath, isReviewOpen);
 
   const {
     diffOptions,
@@ -86,6 +85,7 @@ export function ReviewPage({ taskId }: ReviewPageProps) {
   return (
     <ReviewShell
       taskId={taskId}
+      task={task}
       fileCount={totalFileCount}
       linesAdded={linesAdded}
       linesRemoved={linesRemoved}
diff --git a/apps/code/src/renderer/features/code-review/components/ReviewShell.tsx b/apps/code/src/renderer/features/code-review/components/ReviewShell.tsx
index d68fc9eff..f49774a4e 100644
--- a/apps/code/src/renderer/features/code-review/components/ReviewShell.tsx
+++ b/apps/code/src/renderer/features/code-review/components/ReviewShell.tsx
@@ -1,13 +1,14 @@
 import { FileIcon } from "@components/ui/FileIcon";
 import { useDiffViewerStore } from "@features/code-editor/stores/diffViewerStore";
 import { computeDiffStats } from "@features/git-interaction/utils/diffStats";
+import { ChangesPanel } from "@features/task-detail/components/ChangesPanel";
 import { ArrowSquareOut, CaretDown } from "@phosphor-icons/react";
 import type { FileDiffMetadata } from "@pierre/diffs/react";
 import { WorkerPoolContextProvider } from "@pierre/diffs/react";
 import WorkerUrl from "@pierre/diffs/worker/worker.js?worker&url";
 import { Flex, Spinner, Text } from "@radix-ui/themes";
 import { useReviewNavigationStore } from "@renderer/features/code-review/stores/reviewNavigationStore";
-import type { ChangedFile } from "@shared/types";
+import type { ChangedFile, Task } from "@shared/types";
 import { useThemeStore } from "@stores/themeStore";
 import {
   type ReactNode,
@@ -208,8 +209,92 @@ function useCollapseState(
   };
 }
 
+const SIDEBAR_MIN_WIDTH = 200;
+const SIDEBAR_MAX_WIDTH = 500;
+const SIDEBAR_DEFAULT_WIDTH = 280;
+
+function ExpandedSidebar({ taskId, task }: { taskId: string; task: Task }) {
+  const [width, setWidth] = useState(SIDEBAR_DEFAULT_WIDTH);
+  const isDragging = useRef(false);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      isDragging.current = true;
+      const startX = e.clientX;
+      const startWidth = width;
+
+      const handleMouseMove = (e: MouseEvent) => {
+        if (!isDragging.current) return;
+        const delta = startX - e.clientX;
+        const newWidth = Math.min(
+          SIDEBAR_MAX_WIDTH,
+          Math.max(SIDEBAR_MIN_WIDTH, startWidth + delta),
+        );
+        setWidth(newWidth);
+      };
+
+      const handleMouseUp = () => {
+        isDragging.current = false;
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      };
+
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    },
+    [width],
+  );
+
+  return (
+    <Flex direction="row" style={{ flexShrink: 0 }}>
+      <button
+        type="button"
+        aria-label="Resize sidebar"
+        onMouseDown={handleMouseDown}
+        style={{
+          width: "4px",
+          cursor: "col-resize",
+          background: "transparent",
+          flexShrink: 0,
+          transition: "background 0.1s",
+          padding: 0,
+          border: "none",
+          borderLeftWidth: "1px",
+          borderLeftStyle: "solid",
+          borderLeftColor: "var(--gray-6)",
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.background = "var(--accent-8)";
+        }}
+        onMouseLeave={(e) => {
+          if (!isDragging.current) {
+            e.currentTarget.style.background = "transparent";
+          }
+        }}
+      />
+      <Flex
+        direction="column"
+        style={{
+          width: `${width}px`,
+          minWidth: `${SIDEBAR_MIN_WIDTH}px`,
+          background: "var(--color-background)",
+          flexShrink: 0,
+        }}
+      >
+        <ChangesPanel taskId={taskId} task={task} />
+      </Flex>
+    </Flex>
+  );
+}
+
 export interface ReviewShellProps {
   taskId: string;
+  task?: Task;
   fileCount: number;
   linesAdded: number;
   linesRemoved: number;
@@ -225,6 +310,7 @@ export interface ReviewShellProps {
 
 export function ReviewShell({
   taskId,
+  task,
   fileCount,
   linesAdded,
   linesRemoved,
@@ -239,6 +325,11 @@ export function ReviewShell({
 }: ReviewShellProps) {
   const scrollContainerRef = useRef<HTMLDivElement | null>(null);
 
+  const reviewMode = useReviewNavigationStore(
+    (s) => s.reviewModes[taskId] ?? "closed",
+  );
+  const isExpanded = reviewMode === "expanded";
+
   const scrollRequest = useReviewNavigationStore(
     (s) => s.scrollRequests[taskId] ?? null,
   );
@@ -345,6 +436,7 @@ export function ReviewShell({
     >
       <Flex direction="column" height="100%">
         <ReviewToolbar
+          taskId={taskId}
           fileCount={fileCount}
           linesAdded={linesAdded}
           linesRemoved={linesRemoved}
@@ -353,12 +445,19 @@ export function ReviewShell({
           onCollapseAll={onCollapseAll}
           onRefresh={onRefresh}
         />
-        <div
-          ref={scrollContainerRef}
-          className="scrollbar-hide flex-1 space-y-2 overflow-auto"
-        >
-          {children}
-        </div>
+        <Flex style={{ flex: 1, minHeight: 0 }}>
+          <div
+            ref={scrollContainerRef}
+            className="scrollbar-hide flex-1 space-y-2 overflow-auto"
+            style={{ minWidth: 0 }}
+          >
+            {children}
+          </div>
+
+          {isExpanded && task && (
+            <ExpandedSidebar taskId={taskId} task={task} />
+          )}
+        </Flex>
       </Flex>
     </WorkerPoolContextProvider>
   );
diff --git a/apps/code/src/renderer/features/code-review/components/ReviewToolbar.tsx b/apps/code/src/renderer/features/code-review/components/ReviewToolbar.tsx
index 227a68d49..4da3b8b7b 100644
--- a/apps/code/src/renderer/features/code-review/components/ReviewToolbar.tsx
+++ b/apps/code/src/renderer/features/code-review/components/ReviewToolbar.tsx
@@ -5,13 +5,20 @@ import {
   ArrowsIn,
   ArrowsOut,
   Columns,
+  CornersIn,
+  CornersOut,
   Rows,
 } from "@phosphor-icons/react";
-import { Flex, IconButton, Text } from "@radix-ui/themes";
+import { Flex, IconButton, Separator, Text } from "@radix-ui/themes";
 import { DiffSettingsMenu } from "@renderer/features/code-review/components/DiffSettingsMenu";
+import {
+  type ReviewMode,
+  useReviewNavigationStore,
+} from "@renderer/features/code-review/stores/reviewNavigationStore";
 import { memo } from "react";
 
 interface ReviewToolbarProps {
+  taskId: string;
   fileCount: number;
   linesAdded: number;
   linesRemoved: number;
@@ -22,6 +29,7 @@ interface ReviewToolbarProps {
 }
 
 export const ReviewToolbar = memo(function ReviewToolbar({
+  taskId,
   fileCount,
   linesAdded,
   linesRemoved,
@@ -32,6 +40,15 @@ export const ReviewToolbar = memo(function ReviewToolbar({
 }: ReviewToolbarProps) {
   const viewMode = useDiffViewerStore((s) => s.viewMode);
   const toggleViewMode = useDiffViewerStore((s) => s.toggleViewMode);
+  const reviewMode = useReviewNavigationStore(
+    (s) => s.reviewModes[taskId] ?? "closed",
+  );
+  const setReviewMode = useReviewNavigationStore((s) => s.setReviewMode);
+
+  const handleToggleExpand = () => {
+    const next: ReviewMode = reviewMode === "expanded" ? "split" : "expanded";
+    setReviewMode(taskId, next);
+  };
 
   return (
     <Flex
@@ -78,6 +95,7 @@ export const ReviewToolbar = memo(function ReviewToolbar({
             </IconButton>
           </Tooltip>
         )}
+
         <IconButton
           size="1"
           variant="ghost"
@@ -99,6 +117,28 @@ export const ReviewToolbar = memo(function ReviewToolbar({
         </IconButton>
 
         <DiffSettingsMenu />
+
+        <Separator orientation="vertical" size="1" />
+
+        <Tooltip
+          content={
+            reviewMode === "expanded" ? "Collapse review" : "Expand review"
+          }
+        >
+          <IconButton
+            size="1"
+            variant="ghost"
+            color="gray"
+            onClick={handleToggleExpand}
+            style={{ cursor: "pointer" }}
+          >
+            {reviewMode === "expanded" ? (
+              <CornersIn size={14} />
+            ) : (
+              <CornersOut size={14} />
+            )}
+          </IconButton>
+        </Tooltip>
       </Flex>
     </Flex>
   );
diff --git a/apps/code/src/renderer/features/code-review/stores/reviewNavigationStore.ts b/apps/code/src/renderer/features/code-review/stores/reviewNavigationStore.ts
index a08aacdcd..f74c14699 100644
--- a/apps/code/src/renderer/features/code-review/stores/reviewNavigationStore.ts
+++ b/apps/code/src/renderer/features/code-review/stores/reviewNavigationStore.ts
@@ -1,8 +1,11 @@
 import { create } from "zustand";
 
+export type ReviewMode = "closed" | "split" | "expanded";
+
 interface ReviewNavigationStoreState {
   activeFilePaths: Record<string, string | null>;
   scrollRequests: Record<string, string | null>;
+  reviewModes: Record<string, ReviewMode>;
 }
 
 interface ReviewNavigationStoreActions {
@@ -10,15 +13,18 @@ interface ReviewNavigationStoreActions {
   requestScrollToFile: (taskId: string, path: string) => void;
   clearScrollRequest: (taskId: string) => void;
   clearTask: (taskId: string) => void;
+  setReviewMode: (taskId: string, mode: ReviewMode) => void;
+  getReviewMode: (taskId: string) => ReviewMode;
 }
 
 type ReviewNavigationStore = ReviewNavigationStoreState &
   ReviewNavigationStoreActions;
 
 export const useReviewNavigationStore = create<ReviewNavigationStore>()(
-  (set) => ({
+  (set, get) => ({
     activeFilePaths: {},
     scrollRequests: {},
+    reviewModes: {},
 
     setActiveFilePath: (taskId, path) =>
       set((state) => ({
@@ -40,5 +46,12 @@ export const useReviewNavigationStore = create<ReviewNavigationStore>()(
         activeFilePaths: { ...state.activeFilePaths, [taskId]: null },
         scrollRequests: { ...state.scrollRequests, [taskId]: null },
       })),
+
+    setReviewMode: (taskId, mode) =>
+      set((state) => ({
+        reviewModes: { ...state.reviewModes, [taskId]: mode },
+      })),
+
+    getReviewMode: (taskId) => get().reviewModes[taskId] ?? "closed",
   }),
 );
diff --git a/apps/code/src/renderer/features/command/components/CommandMenu.tsx b/apps/code/src/renderer/features/command/components/CommandMenu.tsx
index d05bd40d2..8c37e391b 100644
--- a/apps/code/src/renderer/features/command/components/CommandMenu.tsx
+++ b/apps/code/src/renderer/features/command/components/CommandMenu.tsx
@@ -1,7 +1,7 @@
+import { useReviewNavigationStore } from "@features/code-review/stores/reviewNavigationStore";
 import { Command } from "@features/command/components/Command";
 import { CommandKeyHints } from "@features/command/components/CommandKeyHints";
 import { useFolders } from "@features/folders/hooks/useFolders";
-import { useRightSidebarStore } from "@features/right-sidebar";
 import { useSettingsDialogStore } from "@features/settings/stores/settingsDialogStore";
 import { useSidebarStore } from "@features/sidebar/stores/sidebarStore";
 import {
@@ -35,7 +35,21 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
   const { folders } = useFolders();
   const { theme, cycleTheme } = useThemeStore();
   const toggleLeftSidebar = useSidebarStore((state) => state.toggle);
-  const toggleRightSidebar = useRightSidebarStore((state) => state.toggle);
+  const view = useNavigationStore((state) => state.view);
+  const setReviewMode = useReviewNavigationStore(
+    (state) => state.setReviewMode,
+  );
+  const getReviewMode = useReviewNavigationStore(
+    (state) => state.getReviewMode,
+  );
+  const openReviewPanel = useCallback(() => {
+    const taskId = view.type === "task-detail" ? view.data?.id : undefined;
+    if (!taskId) return;
+    const mode = getReviewMode(taskId);
+    if (mode === "closed") {
+      setReviewMode(taskId, "split");
+    }
+  }, [view, getReviewMode, setReviewMode]);
   const commandRef = useRef<HTMLDivElement>(null);
 
   const close = useCallback(() => onOpenChange(false), [onOpenChange]);
@@ -170,14 +184,11 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
                 <Text size="1">Toggle left sidebar</Text>
               </Command.Item>
               <Command.Item
-                value="Toggle right sidebar"
-                onSelect={runAndClose(
-                  toggleRightSidebar,
-                  "toggle-right-sidebar",
-                )}
+                value="Open review panel"
+                onSelect={runAndClose(openReviewPanel, "toggle-right-sidebar")}
               >
                 <ViewVerticalIcon className="mr-3 h-3 w-3 rotate-180 text-gray-11" />
-                <Text size="1">Toggle right sidebar</Text>
+                <Text size="1">Open review panel</Text>
               </Command.Item>
               <Command.Item
                 value="Create new task"
diff --git a/apps/code/src/renderer/features/panels/constants/panelConstants.ts b/apps/code/src/renderer/features/panels/constants/panelConstants.ts
index 753911836..aa990772c 100644
--- a/apps/code/src/renderer/features/panels/constants/panelConstants.ts
+++ b/apps/code/src/renderer/features/panels/constants/panelConstants.ts
@@ -24,5 +24,4 @@ export const DEFAULT_TAB_IDS = {
   SHELL: "shell",
   FILES: "files",
   CHANGES: "changes",
-  REVIEW: "review",
 } as const;
diff --git a/apps/code/src/renderer/features/panels/hooks/usePanelLayoutHooks.tsx b/apps/code/src/renderer/features/panels/hooks/usePanelLayoutHooks.tsx
index 468bb8d4c..319141298 100644
--- a/apps/code/src/renderer/features/panels/hooks/usePanelLayoutHooks.tsx
+++ b/apps/code/src/renderer/features/panels/hooks/usePanelLayoutHooks.tsx
@@ -2,7 +2,7 @@ import { FileIcon } from "@components/ui/FileIcon";
 import { ActionTabIcon } from "@features/actions/components/ActionTabIcon";
 import { useCwd } from "@features/sidebar/hooks/useCwd";
 import { TabContentRenderer } from "@features/task-detail/components/TabContentRenderer";
-import { ChatCenteredText, GitDiff, Terminal } from "@phosphor-icons/react";
+import { ChatCenteredText, Terminal } from "@phosphor-icons/react";
 import type { Task } from "@shared/types";
 import { isAbsolutePath } from "@utils/path";
 import { useCallback, useEffect, useMemo, useRef } from "react";
@@ -104,8 +104,6 @@ export function useTabInjection(
             icon = <Terminal size={14} />;
           } else if (tab.data.type === "logs") {
             icon = <ChatCenteredText size={14} />;
-          } else if (tab.data.type === "review") {
-            icon = <GitDiff size={14} />;
           } else if (tab.data.type === "action") {
             icon = <ActionTabIcon actionId={tab.data.actionId} />;
           }
diff --git a/apps/code/src/renderer/features/panels/store/panelLayoutStore.test.ts b/apps/code/src/renderer/features/panels/store/panelLayoutStore.test.ts
index 6f63b48f4..15e88bcdc 100644
--- a/apps/code/src/renderer/features/panels/store/panelLayoutStore.test.ts
+++ b/apps/code/src/renderer/features/panels/store/panelLayoutStore.test.ts
@@ -49,7 +49,7 @@ describe("panelLayoutStore", () => {
       assertPanelLayout(tree, [
         {
           panelId: "main-panel",
-          expectedTabs: ["logs", "review", "shell"],
+          expectedTabs: ["logs", "shell"],
           activeTab: "logs",
         },
       ]);
@@ -64,11 +64,11 @@ describe("panelLayoutStore", () => {
     it("adds file tab to main panel by default", () => {
       usePanelLayoutStore.getState().openFile("task-1", "src/App.tsx");
 
-      assertTabCount(getPanelTree("task-1"), "main-panel", 4);
+      assertTabCount(getPanelTree("task-1"), "main-panel", 3);
       assertPanelLayout(getPanelTree("task-1"), [
         {
           panelId: "main-panel",
-          expectedTabs: ["logs", "review", "shell", "file-src/App.tsx"],
+          expectedTabs: ["logs", "shell", "file-src/App.tsx"],
         },
       ]);
     });
@@ -93,7 +93,7 @@ describe("panelLayoutStore", () => {
           activeTab: "file-src/App.tsx",
         },
       ]);
-      assertTabCount(getPanelTree("task-1"), "main-panel", 2);
+      assertTabCount(getPanelTree("task-1"), "main-panel", 1);
     });
 
     it("falls back to main panel if focused panel does not exist", () => {
@@ -105,11 +105,11 @@ describe("panelLayoutStore", () => {
       usePanelLayoutStore.getState().openFile("task-1", "src/App.tsx");
 
       // File should fall back to main-panel
-      assertTabCount(getPanelTree("task-1"), "main-panel", 4);
+      assertTabCount(getPanelTree("task-1"), "main-panel", 3);
       assertPanelLayout(getPanelTree("task-1"), [
         {
           panelId: "main-panel",
-          expectedTabs: ["logs", "review", "shell", "file-src/App.tsx"],
+          expectedTabs: ["logs", "shell", "file-src/App.tsx"],
         },
       ]);
     });
@@ -370,14 +370,14 @@ describe("panelLayoutStore", () => {
     });
 
     it("reorders tabs within a panel", () => {
-      // tabs: [logs, review, shell, file-src/App.tsx, file-src/Other.tsx, file-src/Third.tsx]
-      // move index 3 to index 5
-      usePanelLayoutStore.getState().reorderTabs("task-1", "main-panel", 3, 5);
+      // tabs: [logs, shell, file-src/App.tsx, file-src/Other.tsx, file-src/Third.tsx]
+      // move index 2 to index 4
+      usePanelLayoutStore.getState().reorderTabs("task-1", "main-panel", 2, 4);
 
       const panel = findPanelById(getPanelTree("task-1"), "main-panel");
       const tabIds = panel?.content.tabs.map((t: { id: string }) => t.id);
-      expect(tabIds?.[3]).toBe("file-src/Other.tsx");
-      expect(tabIds?.[5]).toBe("file-src/App.tsx");
+      expect(tabIds?.[2]).toBe("file-src/Other.tsx");
+      expect(tabIds?.[4]).toBe("file-src/App.tsx");
     });
 
     it("preserves active tab after reorder", () => {
diff --git a/apps/code/src/renderer/features/panels/store/panelLayoutStore.ts b/apps/code/src/renderer/features/panels/store/panelLayoutStore.ts
index d1bf0a0df..47c08f67c 100644
--- a/apps/code/src/renderer/features/panels/store/panelLayoutStore.ts
+++ b/apps/code/src/renderer/features/panels/store/panelLayoutStore.ts
@@ -53,7 +53,6 @@ export interface PanelLayoutStore {
     filePath: string,
     asPreview?: boolean,
   ) => void;
-  openReview: (taskId: string) => void;
   keepTab: (taskId: string, panelId: string, tabId: string) => void;
   closeTab: (taskId: string, panelId: string, tabId: string) => void;
   closeOtherTabs: (taskId: string, panelId: string, tabId: string) => void;
@@ -123,14 +122,6 @@ function createDefaultPanelTree(): PanelNode {
           closeable: false,
           draggable: true,
         },
-        {
-          id: DEFAULT_TAB_IDS.REVIEW,
-          label: "Review",
-          data: { type: "review" as const },
-          component: null,
-          closeable: false,
-          draggable: true,
-        },
         {
           id: DEFAULT_TAB_IDS.SHELL,
           label: "Terminal",
@@ -396,13 +387,6 @@ export const usePanelLayoutStore = createWithEqualityFn<PanelLayoutStore>()(
         });
       },
 
-      openReview: (taskId) => {
-        set((state) => openTab(state, taskId, "review", false));
-        track(ANALYTICS_EVENTS.REVIEW_PANEL_VIEWED, {
-          task_id: taskId,
-        });
-      },
-
       keepTab: (taskId, panelId, tabId) => {
         set((state) =>
           updateTaskLayout(state, taskId, (layout) => {
@@ -922,7 +906,7 @@ export const usePanelLayoutStore = createWithEqualityFn<PanelLayoutStore>()(
     {
       name: "panel-layout-store",
       // Bump this version when the default panel structure changes to reset all layouts
-      version: 9,
+      version: 10,
       migrate: () => ({ taskLayouts: {} }),
     },
   ),
diff --git a/apps/code/src/renderer/features/panels/store/panelStoreHelpers.ts b/apps/code/src/renderer/features/panels/store/panelStoreHelpers.ts
index bf01a86cb..3b953ddfb 100644
--- a/apps/code/src/renderer/features/panels/store/panelStoreHelpers.ts
+++ b/apps/code/src/renderer/features/panels/store/panelStoreHelpers.ts
@@ -25,7 +25,6 @@ export function parseTabId(tabId: string): ParsedTabId & { status?: string } {
 }
 
 export function createTabLabel(tabId: string): string {
-  if (tabId === "review") return "Review";
   const parsed = parseTabId(tabId);
   if (parsed.type === "file") {
     return parsed.value.split("/").pop() || parsed.value;
@@ -121,9 +120,7 @@ export function createNewTab(
       };
       break;
     case "system":
-      if (tabId === "review") {
-        data = { type: "review" };
-      } else if (tabId === "logs") {
+      if (tabId === "logs") {
         data = { type: "logs" };
       } else if (tabId.startsWith("shell")) {
         data = {
diff --git a/apps/code/src/renderer/features/panels/store/panelTypes.ts b/apps/code/src/renderer/features/panels/store/panelTypes.ts
index 6f9869634..bc7edfa58 100644
--- a/apps/code/src/renderer/features/panels/store/panelTypes.ts
+++ b/apps/code/src/renderer/features/panels/store/panelTypes.ts
@@ -13,9 +13,6 @@ export type TabData =
       absolutePath: string;
       repoPath: string;
     }
-  | {
-      type: "review";
-    }
   | {
       type: "terminal";
       terminalId: string;
diff --git a/apps/code/src/renderer/features/right-sidebar/components/RightSidebar.tsx b/apps/code/src/renderer/features/right-sidebar/components/RightSidebar.tsx
deleted file mode 100644
index 653de9151..000000000
--- a/apps/code/src/renderer/features/right-sidebar/components/RightSidebar.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { ResizableSidebar } from "@components/ResizableSidebar";
-import type React from "react";
-import { useRightSidebarStore } from "../stores/rightSidebarStore";
-
-export const RightSidebar: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
-  const open = useRightSidebarStore((state) => state.open);
-  const width = useRightSidebarStore((state) => state.width);
-  const setWidth = useRightSidebarStore((state) => state.setWidth);
-  const isResizing = useRightSidebarStore((state) => state.isResizing);
-  const setIsResizing = useRightSidebarStore((state) => state.setIsResizing);
-
-  return (
-    <ResizableSidebar
-      open={open}
-      width={width}
-      setWidth={setWidth}
-      isResizing={isResizing}
-      setIsResizing={setIsResizing}
-      side="right"
-    >
-      {children}
-    </ResizableSidebar>
-  );
-};
diff --git a/apps/code/src/renderer/features/right-sidebar/components/RightSidebarContent.tsx b/apps/code/src/renderer/features/right-sidebar/components/RightSidebarContent.tsx
deleted file mode 100644
index 2246e84ae..000000000
--- a/apps/code/src/renderer/features/right-sidebar/components/RightSidebarContent.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Panel } from "@features/panels/components/Panel";
-import { PanelGroup } from "@features/panels/components/PanelGroup";
-import type { Task } from "@shared/types";
-import { TopPanel } from "./TopPanel";
-
-interface RightSidebarContentProps {
-  taskId: string;
-  task: Task;
-}
-
-export function RightSidebarContent({
-  taskId,
-  task,
-}: RightSidebarContentProps) {
-  return (
-    <PanelGroup
-      direction="vertical"
-      autoSaveId="right-sidebar-panels"
-      style={{ backgroundColor: "var(--color-background)" }}
-    >
-      <Panel defaultSize={60} minSize={20}>
-        <TopPanel taskId={taskId} task={task} />
-      </Panel>
-    </PanelGroup>
-  );
-}
diff --git a/apps/code/src/renderer/features/right-sidebar/components/RightSidebarTrigger.tsx b/apps/code/src/renderer/features/right-sidebar/components/RightSidebarTrigger.tsx
deleted file mode 100644
index 1b80f0549..000000000
--- a/apps/code/src/renderer/features/right-sidebar/components/RightSidebarTrigger.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Tooltip } from "@components/ui/Tooltip";
-import { SidebarSimpleIcon } from "@phosphor-icons/react";
-import { IconButton } from "@radix-ui/themes";
-import {
-  formatHotkey,
-  SHORTCUTS,
-} from "@renderer/constants/keyboard-shortcuts";
-import type React from "react";
-import { useRightSidebarStore } from "../stores/rightSidebarStore";
-
-export const RightSidebarTrigger: React.FC = () => {
-  const toggle = useRightSidebarStore((state) => state.toggle);
-
-  return (
-    <Tooltip
-      content="Toggle right sidebar"
-      shortcut={formatHotkey(SHORTCUTS.TOGGLE_RIGHT_SIDEBAR)}
-      side="bottom"
-    >
-      <IconButton
-        variant="ghost"
-        color="gray"
-        onClick={toggle}
-        className="no-drag"
-        mr="2"
-        style={{ transform: "scaleX(-1)" }}
-      >
-        <SidebarSimpleIcon size={16} />
-      </IconButton>
-    </Tooltip>
-  );
-};
diff --git a/apps/code/src/renderer/features/right-sidebar/components/TopPanel.tsx b/apps/code/src/renderer/features/right-sidebar/components/TopPanel.tsx
deleted file mode 100644
index 31d014762..000000000
--- a/apps/code/src/renderer/features/right-sidebar/components/TopPanel.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { TabbedPanel } from "@features/panels/components/TabbedPanel";
-import type { PanelContent } from "@features/panels/store/panelTypes";
-import { ChangesPanel } from "@features/task-detail/components/ChangesPanel";
-import { FileTreePanel } from "@features/task-detail/components/FileTreePanel";
-import { FolderSimple, GitDiff } from "@phosphor-icons/react";
-import type { Task } from "@shared/types";
-import { useMemo, useState } from "react";
-
-interface TopPanelProps {
-  taskId: string;
-  task: Task;
-}
-
-export function TopPanel({ taskId, task }: TopPanelProps) {
-  const [activeTabId, setActiveTabId] = useState("changes");
-
-  const content: PanelContent = useMemo(
-    () => ({
-      id: `top-panel-${taskId}`,
-      activeTabId,
-      tabs: [
-        {
-          id: "changes",
-          label: "Changes",
-          icon: <GitDiff size={14} />,
-          data: { type: "other" },
-          draggable: false,
-          closeable: false,
-          component: <ChangesPanel taskId={taskId} task={task} />,
-        },
-        {
-          id: "files",
-          label: "Files",
-          icon: <FolderSimple size={14} />,
-          data: { type: "other" },
-          draggable: false,
-          closeable: false,
-          component: <FileTreePanel taskId={taskId} task={task} />,
-        },
-      ],
-    }),
-    [taskId, task, activeTabId],
-  );
-
-  return (
-    <TabbedPanel
-      panelId={`top-panel-${taskId}`}
-      content={content}
-      onActiveTabChange={(_, tabId) => setActiveTabId(tabId)}
-    />
-  );
-}
diff --git a/apps/code/src/renderer/features/right-sidebar/components/index.ts b/apps/code/src/renderer/features/right-sidebar/components/index.ts
deleted file mode 100644
index dd3c289dd..000000000
--- a/apps/code/src/renderer/features/right-sidebar/components/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { RightSidebar } from "./RightSidebar";
-export { RightSidebarContent } from "./RightSidebarContent";
-export { RightSidebarTrigger } from "./RightSidebarTrigger";
diff --git a/apps/code/src/renderer/features/right-sidebar/index.ts b/apps/code/src/renderer/features/right-sidebar/index.ts
deleted file mode 100644
index 5d34b910b..000000000
--- a/apps/code/src/renderer/features/right-sidebar/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export {
-  RightSidebar,
-  RightSidebarContent,
-  RightSidebarTrigger,
-} from "./components";
-export { useRightSidebarStore } from "./stores/rightSidebarStore";
diff --git a/apps/code/src/renderer/features/right-sidebar/stores/rightSidebarStore.ts b/apps/code/src/renderer/features/right-sidebar/stores/rightSidebarStore.ts
deleted file mode 100644
index 683806d5c..000000000
--- a/apps/code/src/renderer/features/right-sidebar/stores/rightSidebarStore.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { createSidebarStore } from "@stores/createSidebarStore";
-
-export const useRightSidebarStore = createSidebarStore({
-  name: "right-sidebar-storage",
-  defaultWidth: 300,
-});
diff --git a/apps/code/src/renderer/features/skills/components/SkillDetailPanel.tsx b/apps/code/src/renderer/features/skills/components/SkillDetailPanel.tsx
index 0fd8a1a9d..6b9f81f2f 100644
--- a/apps/code/src/renderer/features/skills/components/SkillDetailPanel.tsx
+++ b/apps/code/src/renderer/features/skills/components/SkillDetailPanel.tsx
@@ -69,7 +69,7 @@ export function SkillDetailPanel({ skill, onClose }: SkillDetailPanelProps) {
             </Badge>
           )}
           {skill.source !== "bundled" && (
-            <ExternalAppsOpener targetPath={skill.path} label="Open" />
+            <ExternalAppsOpener targetPath={skill.path} />
           )}
         </Flex>
       </Flex>
diff --git a/apps/code/src/renderer/features/task-detail/components/ChangesPanel.tsx b/apps/code/src/renderer/features/task-detail/components/ChangesPanel.tsx
index 990b6e9cd..8d9572577 100644
--- a/apps/code/src/renderer/features/task-detail/components/ChangesPanel.tsx
+++ b/apps/code/src/renderer/features/task-detail/components/ChangesPanel.tsx
@@ -7,7 +7,6 @@ import { makeFileKey } from "@features/git-interaction/utils/fileKey";
 import { invalidateGitWorkingTreeQueries } from "@features/git-interaction/utils/gitCacheKeys";
 import { partitionByStaged } from "@features/git-interaction/utils/partitionByStaged";
 import { updateGitCacheFromSnapshot } from "@features/git-interaction/utils/updateGitCache";
-import { usePanelLayoutStore } from "@features/panels/store/panelLayoutStore";
 import { useCwd } from "@features/sidebar/hooks/useCwd";
 import { useCloudChangedFiles } from "@features/task-detail/hooks/useCloudChangedFiles";
 import {
@@ -133,7 +132,6 @@ function ChangedFileItem({
   onStageToggle,
   depth = 0,
 }: ChangedFileItemProps) {
-  const openReview = usePanelLayoutStore((state) => state.openReview);
   const requestScrollToFile = useReviewNavigationStore(
     (state) => state.requestScrollToFile,
   );
@@ -160,7 +158,6 @@ function ChangedFileItem({
       task_id: taskId,
     });
     requestScrollToFile(taskId, fileKey);
-    openReview(taskId);
   };
 
   const workspaceContext = {
diff --git a/apps/code/src/renderer/features/task-detail/components/ExternalAppsOpener.tsx b/apps/code/src/renderer/features/task-detail/components/ExternalAppsOpener.tsx
index dd7ba8df7..a6e9ab486 100644
--- a/apps/code/src/renderer/features/task-detail/components/ExternalAppsOpener.tsx
+++ b/apps/code/src/renderer/features/task-detail/components/ExternalAppsOpener.tsx
@@ -1,7 +1,7 @@
 import { useExternalApps } from "@features/external-apps/hooks/useExternalApps";
 import { CodeIcon, CopyIcon } from "@phosphor-icons/react";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
-import { Button, DropdownMenu, Flex, Text } from "@radix-ui/themes";
+import { DropdownMenu, Flex, Text } from "@radix-ui/themes";
 import { SHORTCUTS } from "@renderer/constants/keyboard-shortcuts";
 import { handleExternalAppAction } from "@utils/handleExternalAppAction";
 import { useCallback, useState } from "react";
@@ -12,13 +12,9 @@ const DROPDOWN_ICON_SIZE = 16;
 
 interface ExternalAppsOpenerProps {
   targetPath: string | null;
-  label?: string;
 }
 
-export function ExternalAppsOpener({
-  targetPath,
-  label = "Open",
-}: ExternalAppsOpenerProps) {
+export function ExternalAppsOpener({ targetPath }: ExternalAppsOpenerProps) {
   const { detectedApps, defaultApp, isLoading } = useExternalApps();
   const [dropdownOpen, setDropdownOpen] = useState(false);
 
@@ -83,25 +79,25 @@ export function ExternalAppsOpener({
 
   return (
     <DropdownMenu.Root open={dropdownOpen} onOpenChange={setDropdownOpen}>
-      {dropdownOpen && (
-        <div
-          className="no-drag"
-          style={{
-            position: "fixed",
-            inset: 0,
-            zIndex: 1,
-          }}
-        />
-      )}
-      <Flex className="no-drag">
-        <Button
-          size="1"
-          color="gray"
-          variant="outline"
+      <Flex align="center" className="no-drag" gap="0">
+        <button
+          type="button"
           onClick={handleOpenDefault}
           disabled={!isReady || !defaultApp}
-          className="hover:bg-gray-5"
-          style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
+          className="hover:bg-[var(--gray-a3)]"
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "26px",
+            height: "24px",
+            borderRadius: "var(--radius-1) 0 0 var(--radius-1)",
+            border: "1px solid var(--gray-6)",
+            borderRight: "none",
+            background: "transparent",
+            cursor: "pointer",
+            color: "var(--gray-11)",
+          }}
         >
           {defaultApp?.icon ? (
             <img
@@ -114,28 +110,26 @@ export function ExternalAppsOpener({
           ) : (
             <CodeIcon size={DROPDOWN_ICON_SIZE} weight="regular" />
           )}
-          <Text size="1">
-            {label}{" "}
-            <Text size="1" weight="bold">
-              ⌘O
-            </Text>
-          </Text>
-        </Button>
-
+        </button>
         <DropdownMenu.Trigger>
-          <Button
-            size="1"
-            variant="outline"
-            color="gray"
-            className="hover:bg-gray-5"
+          <button
+            type="button"
+            className="hover:bg-[var(--gray-a3)]"
             style={{
-              borderTopLeftRadius: 0,
-              borderBottomLeftRadius: 0,
-              marginLeft: "-1px",
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "18px",
+              height: "24px",
+              borderRadius: "0 var(--radius-1) var(--radius-1) 0",
+              border: "1px solid var(--gray-6)",
+              background: "transparent",
+              cursor: "pointer",
+              color: "var(--gray-11)",
             }}
           >
-            <ChevronDownIcon />
-          </Button>
+            <ChevronDownIcon width={10} height={10} />
+          </button>
         </DropdownMenu.Trigger>
       </Flex>
 
diff --git a/apps/code/src/renderer/features/task-detail/components/FileTreePanel.tsx b/apps/code/src/renderer/features/task-detail/components/FileTreePanel.tsx
index a5e3d64da..5fae22c5a 100644
--- a/apps/code/src/renderer/features/task-detail/components/FileTreePanel.tsx
+++ b/apps/code/src/renderer/features/task-detail/components/FileTreePanel.tsx
@@ -261,7 +261,7 @@ function LocalFileTreePanel({ taskId, task: _task }: FileTreePanelProps) {
       height="100%"
       py="2"
       style={{
-        overflowY: "scroll",
+        overflowY: "auto",
       }}
     >
       <Flex direction="column">
diff --git a/apps/code/src/renderer/features/task-detail/components/TabContentRenderer.tsx b/apps/code/src/renderer/features/task-detail/components/TabContentRenderer.tsx
index 32ad9e0d9..76113a56d 100644
--- a/apps/code/src/renderer/features/task-detail/components/TabContentRenderer.tsx
+++ b/apps/code/src/renderer/features/task-detail/components/TabContentRenderer.tsx
@@ -5,9 +5,6 @@ import { ChangesPanel } from "@features/task-detail/components/ChangesPanel";
 import { FileTreePanel } from "@features/task-detail/components/FileTreePanel";
 import { TaskLogsPanel } from "@features/task-detail/components/TaskLogsPanel";
 import { TaskShellPanel } from "@features/task-detail/components/TaskShellPanel";
-import { useWorkspace } from "@features/workspace/hooks/useWorkspace";
-import { CloudReviewPage } from "@renderer/features/code-review/components/CloudReviewPage";
-import { ReviewPage } from "@renderer/features/code-review/components/ReviewPage";
 import type { Task } from "@shared/types";
 
 interface TabContentRendererProps {
@@ -21,7 +18,6 @@ export function TabContentRenderer({
   taskId,
   task,
 }: TabContentRendererProps) {
-  const workspace = useWorkspace(taskId);
   const { data } = tab;
 
   switch (data.type) {
@@ -42,16 +38,6 @@ export function TabContentRenderer({
         />
       );
 
-    case "review": {
-      const isCloud =
-        workspace?.mode === "cloud" || task.latest_run?.environment === "cloud";
-      return isCloud ? (
-        <CloudReviewPage taskId={taskId} task={task} />
-      ) : (
-        <ReviewPage taskId={taskId} />
-      );
-    }
-
     case "action":
       return (
         <ActionPanel
diff --git a/apps/code/src/renderer/features/task-detail/components/TaskDetail.tsx b/apps/code/src/renderer/features/task-detail/components/TaskDetail.tsx
index be9f7d923..3ab12151f 100644
--- a/apps/code/src/renderer/features/task-detail/components/TaskDetail.tsx
+++ b/apps/code/src/renderer/features/task-detail/components/TaskDetail.tsx
@@ -1,3 +1,6 @@
+import { CloudReviewPage } from "@features/code-review/components/CloudReviewPage";
+import { ReviewPage } from "@features/code-review/components/ReviewPage";
+import { useReviewNavigationStore } from "@features/code-review/stores/reviewNavigationStore";
 import { FilePicker } from "@features/command/components/FilePicker";
 import { PanelLayout } from "@features/panels";
 import { usePanelLayoutStore } from "@features/panels/store/panelLayoutStore";
@@ -9,12 +12,13 @@ import { useCwd } from "@features/sidebar/hooks/useCwd";
 import { useTaskData } from "@features/task-detail/hooks/useTaskData";
 import { useTaskStore } from "@features/tasks/stores/taskStore";
 import { useWorkspaceEvents } from "@features/workspace/hooks";
+import { useWorkspace } from "@features/workspace/hooks/useWorkspace";
 import { useBlurOnEscape } from "@hooks/useBlurOnEscape";
 import { useFileWatcher } from "@hooks/useFileWatcher";
 import { useSetHeaderContent } from "@hooks/useSetHeaderContent";
 import { Box, Flex, Text } from "@radix-ui/themes";
 import type { Task } from "@shared/types";
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useHotkeys, useHotkeysContext } from "react-hotkeys-hook";
 import { ExternalAppsOpener } from "./ExternalAppsOpener";
 
@@ -95,9 +99,113 @@ export function TaskDetail({ task: initialTask }: TaskDetailProps) {
 
   useSetHeaderContent(headerContent);
 
+  const reviewMode = useReviewNavigationStore(
+    (s) => s.reviewModes[taskId] ?? "closed",
+  );
+  const workspace = useWorkspace(taskId);
+  const isCloud =
+    workspace?.mode === "cloud" || task.latest_run?.environment === "cloud";
+
+  const isReviewOpen = reviewMode !== "closed";
+  const isExpanded = reviewMode === "expanded";
+
+  const MIN_REVIEW_WIDTH = 300;
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [reviewWidth, setReviewWidth] = useState<number | null>(null);
+  const isDragging = useRef(false);
+
+  const handleResizeStart = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      isDragging.current = true;
+
+      const startX = e.clientX;
+      const container = containerRef.current;
+      if (!container) return;
+
+      const containerRect = container.getBoundingClientRect();
+      const startWidth = reviewWidth ?? containerRect.width * 0.5;
+
+      const onMouseMove = (moveEvent: MouseEvent) => {
+        const delta = startX - moveEvent.clientX;
+        const maxWidth = containerRect.width * 0.5;
+        const newWidth = Math.min(
+          maxWidth,
+          Math.max(MIN_REVIEW_WIDTH, startWidth + delta),
+        );
+        setReviewWidth(newWidth);
+      };
+
+      const onMouseUp = () => {
+        isDragging.current = false;
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      };
+
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    },
+    [reviewWidth],
+  );
+
   return (
-    <Box height="100%">
-      <PanelLayout taskId={taskId} task={task} />
+    <Box height="100%" ref={containerRef}>
+      <Flex height="100%">
+        {/* Main tabbed panels — hidden when review is expanded */}
+        <Box
+          style={{
+            flex: 1,
+            minWidth: 0,
+            display: isExpanded ? "none" : undefined,
+          }}
+        >
+          <PanelLayout taskId={taskId} task={task} />
+        </Box>
+
+        {/* Resize handle */}
+        {isReviewOpen && !isExpanded && (
+          <Box
+            onMouseDown={handleResizeStart}
+            style={{
+              width: "4px",
+              cursor: "col-resize",
+              flexShrink: 0,
+              background: "transparent",
+              borderLeft: "1px solid var(--gray-6)",
+              zIndex: 1,
+            }}
+            className="transition-colors hover:bg-accent-6 active:bg-accent-8"
+          />
+        )}
+
+        {/* Review panel — always mounted, kept in layout via visibility:hidden to avoid layout storms */}
+        <Box
+          style={{
+            flex: isExpanded ? 1 : undefined,
+            width: isReviewOpen
+              ? isExpanded
+                ? undefined
+                : reviewWidth
+                  ? `${reviewWidth}px`
+                  : "50%"
+              : "0px",
+            minWidth: isReviewOpen ? `${MIN_REVIEW_WIDTH}px` : "0px",
+            height: "100%",
+            overflow: isReviewOpen ? undefined : "hidden",
+            visibility: isReviewOpen ? undefined : "hidden",
+          }}
+        >
+          {isCloud ? (
+            <CloudReviewPage task={task} />
+          ) : (
+            <ReviewPage task={task} />
+          )}
+        </Box>
+      </Flex>
       <FilePicker
         open={filePickerOpen}
         onOpenChange={setFilePickerOpen}