diff --git a/apps/code/package.json b/apps/code/package.json
index b700dd947..36d34a521 100644
--- a/apps/code/package.json
+++ b/apps/code/package.json
@@ -125,6 +125,7 @@
     "@opentelemetry/semantic-conventions": "^1.39.0",
     "@parcel/watcher": "^2.5.6",
     "@phosphor-icons/react": "^2.1.10",
+    "@pierre/diffs": "^1.1.7",
     "@posthog/agent": "workspace:*",
     "@posthog/electron-trpc": "workspace:*",
     "@posthog/git": "workspace:*",
diff --git a/apps/code/src/main/services/git/create-pr-saga.ts b/apps/code/src/main/services/git/create-pr-saga.ts
new file mode 100644
index 000000000..c2808d557
--- /dev/null
+++ b/apps/code/src/main/services/git/create-pr-saga.ts
@@ -0,0 +1,205 @@
+import { getGitOperationManager } from "@posthog/git/operation-manager";
+import { getHeadSha } from "@posthog/git/queries";
+import { Saga, type SagaLogger } from "@posthog/shared";
+import type { LlmCredentials } from "../llm-gateway/schemas";
+import type {
+  ChangedFile,
+  CommitOutput,
+  CreatePrProgressPayload,
+  GitSyncStatus,
+  PublishOutput,
+  PushOutput,
+} from "./schemas";
+
+export interface CreatePrSagaInput {
+  directoryPath: string;
+  branchName?: string;
+  commitMessage?: string;
+  prTitle?: string;
+  prBody?: string;
+  draft?: boolean;
+  credentials?: LlmCredentials;
+}
+
+export interface CreatePrSagaOutput {
+  prUrl: string | null;
+}
+
+export interface CreatePrDeps {
+  getCurrentBranch(dir: string): Promise<string | null>;
+  createBranch(dir: string, name: string): Promise<void>;
+  checkoutBranch(
+    dir: string,
+    name: string,
+  ): Promise<{ previousBranch: string; currentBranch: string }>;
+  getChangedFilesHead(dir: string): Promise<ChangedFile[]>;
+  generateCommitMessage(
+    dir: string,
+    credentials: LlmCredentials,
+  ): Promise<{ message: string }>;
+  commit(dir: string, message: string): Promise<CommitOutput>;
+  getSyncStatus(dir: string): Promise<GitSyncStatus>;
+  push(dir: string): Promise<PushOutput>;
+  publish(dir: string): Promise<PublishOutput>;
+  generatePrTitleAndBody(
+    dir: string,
+    credentials: LlmCredentials,
+  ): Promise<{ title: string; body: string }>;
+  createPr(
+    dir: string,
+    title?: string,
+    body?: string,
+    draft?: boolean,
+  ): Promise<{ success: boolean; message: string; prUrl: string | null }>;
+  onProgress(
+    step: CreatePrProgressPayload["step"],
+    message: string,
+    prUrl?: string,
+  ): void;
+}
+
+export class CreatePrSaga extends Saga<CreatePrSagaInput, CreatePrSagaOutput> {
+  readonly sagaName = "CreatePrSaga";
+  private deps: CreatePrDeps;
+
+  constructor(deps: CreatePrDeps, logger?: SagaLogger) {
+    super(logger);
+    this.deps = deps;
+  }
+
+  protected async execute(
+    input: CreatePrSagaInput,
+  ): Promise<CreatePrSagaOutput> {
+    const { directoryPath, draft, credentials } = input;
+    let { commitMessage, prTitle, prBody } = input;
+
+    if (input.branchName) {
+      this.deps.onProgress(
+        "creating-branch",
+        `Creating branch ${input.branchName}...`,
+      );
+
+      const originalBranch = await this.readOnlyStep(
+        "get-original-branch",
+        () => this.deps.getCurrentBranch(directoryPath),
+      );
+
+      await this.step({
+        name: "creating-branch",
+        execute: () => this.deps.createBranch(directoryPath, input.branchName!),
+        rollback: async () => {
+          if (originalBranch) {
+            await this.deps.checkoutBranch(directoryPath, originalBranch);
+          }
+        },
+      });
+    }
+
+    const changedFiles = await this.readOnlyStep("check-changes", () =>
+      this.deps.getChangedFilesHead(directoryPath),
+    );
+
+    if (changedFiles.length > 0) {
+      if (!commitMessage && credentials) {
+        this.deps.onProgress("committing", "Generating commit message...");
+        const generated = await this.readOnlyStep(
+          "generate-commit-message",
+          async () => {
+            try {
+              return await this.deps.generateCommitMessage(
+                directoryPath,
+                credentials,
+              );
+            } catch {
+              return null;
+            }
+          },
+        );
+        if (generated) commitMessage = generated.message;
+      }
+
+      if (!commitMessage) {
+        throw new Error("Commit message is required.");
+      }
+
+      this.deps.onProgress("committing", "Committing changes...");
+
+      const preCommitSha = await this.readOnlyStep("get-pre-commit-sha", () =>
+        getHeadSha(directoryPath),
+      );
+
+      await this.step({
+        name: "committing",
+        execute: async () => {
+          const result = await this.deps.commit(directoryPath, commitMessage!);
+          if (!result.success) throw new Error(result.message);
+          return result;
+        },
+        rollback: async () => {
+          const manager = getGitOperationManager();
+          await manager.executeWrite(directoryPath, (git) =>
+            git.reset(["--soft", preCommitSha]),
+          );
+        },
+      });
+    }
+
+    this.deps.onProgress("pushing", "Pushing to remote...");
+
+    const syncStatus = await this.readOnlyStep("check-sync-status", () =>
+      this.deps.getSyncStatus(directoryPath),
+    );
+
+    await this.step({
+      name: "pushing",
+      execute: async () => {
+        const result = syncStatus.hasRemote
+          ? await this.deps.push(directoryPath)
+          : await this.deps.publish(directoryPath);
+        if (!result.success) throw new Error(result.message);
+        return result;
+      },
+      rollback: async () => {}, // no meaningful rollback can happen here w/o force push
+    });
+
+    if ((!prTitle || !prBody) && credentials) {
+      this.deps.onProgress("creating-pr", "Generating PR description...");
+      const generated = await this.readOnlyStep(
+        "generate-pr-description",
+        async () => {
+          try {
+            return await this.deps.generatePrTitleAndBody(
+              directoryPath,
+              credentials,
+            );
+          } catch {
+            return null;
+          }
+        },
+      );
+      if (generated) {
+        if (!prTitle) prTitle = generated.title;
+        if (!prBody) prBody = generated.body;
+      }
+    }
+
+    this.deps.onProgress("creating-pr", "Creating pull request...");
+
+    const prResult = await this.step({
+      name: "creating-pr",
+      execute: async () => {
+        const result = await this.deps.createPr(
+          directoryPath,
+          prTitle || undefined,
+          prBody || undefined,
+          draft,
+        );
+        if (!result.success) throw new Error(result.message);
+        return result;
+      },
+      rollback: async () => {},
+    });
+
+    return { prUrl: prResult.prUrl };
+  }
+}
diff --git a/apps/code/src/main/services/git/schemas.ts b/apps/code/src/main/services/git/schemas.ts
index 310856ada..99c2421d7 100644
--- a/apps/code/src/main/services/git/schemas.ts
+++ b/apps/code/src/main/services/git/schemas.ts
@@ -228,9 +228,18 @@ export type PrStatusOutput = z.infer<typeof prStatusOutput>;
 // Create PR operation
 export const createPrInput = z.object({
   directoryPath: z.string(),
-  title: z.string().optional(),
-  body: z.string().optional(),
+  flowId: z.string(),
+  branchName: z.string().optional(),
+  commitMessage: z.string().optional(),
+  prTitle: z.string().optional(),
+  prBody: z.string().optional(),
   draft: z.boolean().optional(),
+  credentials: z
+    .object({
+      apiKey: z.string(),
+      apiHost: z.string(),
+    })
+    .optional(),
 });
 
 export type CreatePrInput = z.infer<typeof createPrInput>;
@@ -380,10 +389,22 @@ export const syncOutput = z.object({
 
 export type SyncOutput = z.infer<typeof syncOutput>;
 
+export const createPrStep = z.enum([
+  "creating-branch",
+  "committing",
+  "pushing",
+  "creating-pr",
+  "complete",
+  "error",
+]);
+
+export type CreatePrStep = z.infer<typeof createPrStep>;
+
 export const createPrOutput = z.object({
   success: z.boolean(),
   message: z.string(),
   prUrl: z.string().nullable(),
+  failedStep: createPrStep.nullable(),
   state: gitStateSnapshotSchema.optional(),
 });
 
@@ -414,3 +435,12 @@ export const searchGithubIssuesInput = z.object({
 });
 
 export const searchGithubIssuesOutput = z.array(githubIssueSchema);
+
+export const createPrProgressPayload = z.object({
+  flowId: z.string(),
+  step: createPrStep,
+  message: z.string(),
+  prUrl: z.string().optional(),
+});
+
+export type CreatePrProgressPayload = z.infer<typeof createPrProgressPayload>;
diff --git a/apps/code/src/main/services/git/service.ts b/apps/code/src/main/services/git/service.ts
index 740071fcf..790c631dd 100644
--- a/apps/code/src/main/services/git/service.ts
+++ b/apps/code/src/main/services/git/service.ts
@@ -32,11 +32,13 @@ import { logger } from "../../utils/logger";
 import { TypedEventEmitter } from "../../utils/typed-event-emitter";
 import type { LlmCredentials } from "../llm-gateway/schemas";
 import type { LlmGatewayService } from "../llm-gateway/service";
+import { CreatePrSaga } from "./create-pr-saga";
 import type {
   ChangedFile,
   CloneProgressPayload,
   CommitOutput,
   CreatePrOutput,
+  CreatePrProgressPayload,
   DetectRepoResult,
   DiffStats,
   DiscardFileChangesOutput,
@@ -61,10 +63,12 @@ const fsPromises = fs.promises;
 
 export const GitServiceEvent = {
   CloneProgress: "cloneProgress",
+  CreatePrProgress: "createPrProgress",
 } as const;
 
 export interface GitServiceEvents {
   [GitServiceEvent.CloneProgress]: CloneProgressPayload;
+  [GitServiceEvent.CreatePrProgress]: CreatePrProgressPayload;
 }
 
 const log = logger.scope("git-service");
@@ -460,6 +464,91 @@ export class GitService extends TypedEventEmitter<GitServiceEvents> {
     };
   }
 
+  public async createPr(input: {
+    directoryPath: string;
+    flowId: string;
+    branchName?: string;
+    commitMessage?: string;
+    prTitle?: string;
+    prBody?: string;
+    draft?: boolean;
+    credentials?: { apiKey: string; apiHost: string };
+  }): Promise<CreatePrOutput> {
+    const { directoryPath, flowId } = input;
+
+    const emitProgress = (
+      step: CreatePrProgressPayload["step"],
+      message: string,
+      prUrl?: string,
+    ) => {
+      this.emit(GitServiceEvent.CreatePrProgress, {
+        flowId,
+        step,
+        message,
+        prUrl,
+      });
+    };
+
+    const saga = new CreatePrSaga(
+      {
+        getCurrentBranch: (dir) => getCurrentBranch(dir),
+        createBranch: (dir, name) => this.createBranch(dir, name),
+        checkoutBranch: (dir, name) => this.checkoutBranch(dir, name),
+        getChangedFilesHead: (dir) => this.getChangedFilesHead(dir),
+        generateCommitMessage: (dir, creds) =>
+          this.generateCommitMessage(dir, creds),
+        commit: (dir, msg) => this.commit(dir, msg),
+        getSyncStatus: (dir) => this.getGitSyncStatus(dir),
+        push: (dir) => this.push(dir),
+        publish: (dir) => this.publish(dir),
+        generatePrTitleAndBody: (dir, creds) =>
+          this.generatePrTitleAndBody(dir, creds),
+        createPr: (dir, title, body, draft) =>
+          this.createPrViaGh(dir, title, body, draft),
+        onProgress: emitProgress,
+      },
+      log,
+    );
+
+    const result = await saga.run({
+      directoryPath,
+      branchName: input.branchName,
+      commitMessage: input.commitMessage,
+      prTitle: input.prTitle,
+      prBody: input.prBody,
+      draft: input.draft,
+      credentials: input.credentials,
+    });
+
+    if (!result.success) {
+      emitProgress("error", result.error);
+      return {
+        success: false,
+        message: result.error,
+        prUrl: null,
+        failedStep: result.failedStep as CreatePrOutput["failedStep"],
+      };
+    }
+
+    const state = await this.getStateSnapshot(directoryPath, {
+      includePrStatus: true,
+    });
+
+    emitProgress(
+      "complete",
+      "Pull request created",
+      result.data.prUrl ?? undefined,
+    );
+
+    return {
+      success: true,
+      message: "Pull request created",
+      prUrl: result.data.prUrl,
+      failedStep: null,
+      state,
+    };
+  }
+
   public async getPrTemplate(
     directoryPath: string,
   ): Promise<GetPrTemplateOutput> {
@@ -629,12 +718,12 @@ export class GitService extends TypedEventEmitter<GitServiceEvents> {
     }
   }
 
-  public async createPr(
+  private async createPrViaGh(
     directoryPath: string,
     title?: string,
     body?: string,
     draft?: boolean,
-  ): Promise<CreatePrOutput> {
+  ): Promise<{ success: boolean; message: string; prUrl: string | null }> {
     const args = ["pr", "create"];
     if (title) {
       args.push("--title", title);
@@ -656,18 +745,10 @@ export class GitService extends TypedEventEmitter<GitServiceEvents> {
     const prUrlMatch = result.stdout.match(/https:\/\/github\.com\/[^\s]+/);
     const prUrl = prUrlMatch?.[0] ?? null;
 
-    const state = await this.getStateSnapshot(directoryPath, {
-      includeChangedFiles: false,
-      includeDiffStats: false,
-      includeLatestCommit: false,
-      includePrStatus: true,
-    });
-
     return {
       success: true,
       message: "Pull request created",
       prUrl,
-      state,
     };
   }
 
diff --git a/apps/code/src/main/trpc/routers/git.ts b/apps/code/src/main/trpc/routers/git.ts
index 384bc1c96..d91d4319d 100644
--- a/apps/code/src/main/trpc/routers/git.ts
+++ b/apps/code/src/main/trpc/routers/git.ts
@@ -233,14 +233,7 @@ export const gitRouter = router({
   createPr: publicProcedure
     .input(createPrInput)
     .output(createPrOutput)
-    .mutation(({ input }) =>
-      getService().createPr(
-        input.directoryPath,
-        input.title,
-        input.body,
-        input.draft,
-      ),
-    ),
+    .mutation(({ input }) => getService().createPr(input)),
 
   openPr: publicProcedure
     .input(openPrInput)
@@ -301,4 +294,14 @@ export const gitRouter = router({
         input.limit,
       ),
     ),
+
+  onCreatePrProgress: publicProcedure.subscription(async function* (opts) {
+    const service = getService();
+    const iterable = service.toIterable(GitServiceEvent.CreatePrProgress, {
+      signal: opts.signal,
+    });
+    for await (const data of iterable) {
+      yield data;
+    }
+  }),
 });
diff --git a/apps/code/src/renderer/features/code-editor/components/CodeMirrorDiffEditor.tsx b/apps/code/src/renderer/features/code-editor/components/CodeMirrorDiffEditor.tsx
index abe820823..3f487fe4e 100644
--- a/apps/code/src/renderer/features/code-editor/components/CodeMirrorDiffEditor.tsx
+++ b/apps/code/src/renderer/features/code-editor/components/CodeMirrorDiffEditor.tsx
@@ -1,11 +1,12 @@
 import { openSearchPanel } from "@codemirror/search";
 import { EditorView } from "@codemirror/view";
-import { DotsThree } from "@phosphor-icons/react";
-import { Box, DropdownMenu, Flex, IconButton, Text } from "@radix-ui/themes";
+import { Columns, Rows } from "@phosphor-icons/react";
+import { Box, Button, Flex, Text } from "@radix-ui/themes";
 import { useEffect, useMemo } from "react";
 import { useCodeMirror } from "../hooks/useCodeMirror";
 import { useEditorExtensions } from "../hooks/useEditorExtensions";
 import { useDiffViewerStore } from "../stores/diffViewerStore";
+import { DiffSettingsMenu } from "./DiffSettingsMenu";
 
 interface CodeMirrorDiffEditorProps {
   originalContent: string;
@@ -14,6 +15,7 @@ interface CodeMirrorDiffEditorProps {
   relativePath?: string;
   onContentChange?: (content: string) => void;
   onRefresh?: () => void;
+  hideToolbar?: boolean;
 }
 
 export function CodeMirrorDiffEditor({
@@ -23,22 +25,16 @@ export function CodeMirrorDiffEditor({
   relativePath,
   onContentChange,
   onRefresh,
+  hideToolbar,
 }: CodeMirrorDiffEditorProps) {
   const viewMode = useDiffViewerStore((s) => s.viewMode);
   const toggleViewMode = useDiffViewerStore((s) => s.toggleViewMode);
-  const wordWrap = useDiffViewerStore((s) => s.wordWrap);
-  const toggleWordWrap = useDiffViewerStore((s) => s.toggleWordWrap);
   const loadFullFiles = useDiffViewerStore((s) => s.loadFullFiles);
-  const toggleLoadFullFiles = useDiffViewerStore((s) => s.toggleLoadFullFiles);
   const wordDiffs = useDiffViewerStore((s) => s.wordDiffs);
-  const toggleWordDiffs = useDiffViewerStore((s) => s.toggleWordDiffs);
   const hideWhitespaceChanges = useDiffViewerStore(
     (s) => s.hideWhitespaceChanges,
   );
-  const toggleHideWhitespaceChanges = useDiffViewerStore(
-    (s) => s.toggleHideWhitespaceChanges,
-  );
-  const extensions = useEditorExtensions(filePath, !onContentChange, true);
+  const extensions = useEditorExtensions(filePath, true, true);
   const options = useMemo(
     () => ({
       original: originalContent,
@@ -84,6 +80,10 @@ export function CodeMirrorDiffEditor({
       document.removeEventListener("keydown", handleKeyDown, { capture: true });
   }, [instanceRef]);
 
+  if (hideToolbar) {
+    return <div ref={containerRef} style={{ width: "100%" }} />;
+  }
+
   return (
     <Flex direction="column" height="100%">
       <Flex
@@ -104,53 +104,19 @@ export function CodeMirrorDiffEditor({
         ) : (
           <span />
         )}
-        <DropdownMenu.Root>
-          <DropdownMenu.Trigger>
-            <IconButton
-              size="1"
-              variant="ghost"
-              style={{ color: "var(--gray-9)" }}
-            >
-              <DotsThree size={16} weight="bold" />
-            </IconButton>
-          </DropdownMenu.Trigger>
-          <DropdownMenu.Content size="1" align="end">
-            <DropdownMenu.Item onSelect={toggleViewMode}>
-              <Text size="1">
-                {viewMode === "split" ? "Unified view" : "Split view"}
-              </Text>
-            </DropdownMenu.Item>
-            <DropdownMenu.Item onSelect={toggleWordWrap}>
-              <Text size="1">
-                {wordWrap ? "Disable word wrap" : "Enable word wrap"}
-              </Text>
-            </DropdownMenu.Item>
-            <DropdownMenu.Item onSelect={toggleLoadFullFiles}>
-              <Text size="1">
-                {loadFullFiles ? "Collapse unchanged" : "Load full files"}
-              </Text>
-            </DropdownMenu.Item>
-            <DropdownMenu.Item onSelect={toggleWordDiffs}>
-              <Text size="1">
-                {wordDiffs ? "Disable word diffs" : "Enable word diffs"}
-              </Text>
-            </DropdownMenu.Item>
-            <DropdownMenu.Item onSelect={toggleHideWhitespaceChanges}>
-              <Text size="1">
-                {hideWhitespaceChanges ? "Show whitespace" : "Hide whitespace"}
-              </Text>
-            </DropdownMenu.Item>
-
-            {onRefresh && (
-              <>
-                <DropdownMenu.Separator />
-                <DropdownMenu.Item onSelect={onRefresh}>
-                  <Text size="1">Refresh</Text>
-                </DropdownMenu.Item>
-              </>
-            )}
-          </DropdownMenu.Content>
-        </DropdownMenu.Root>
+        <Flex align="center" gap="1">
+          <Button
+            size="1"
+            variant="ghost"
+            color="gray"
+            onClick={toggleViewMode}
+            style={{ cursor: "pointer" }}
+          >
+            {viewMode === "split" ? <Rows size={14} /> : <Columns size={14} />}
+            <Text size="1">{viewMode === "split" ? "Unified" : "Split"}</Text>
+          </Button>
+          <DiffSettingsMenu onRefresh={onRefresh} />
+        </Flex>
       </Flex>
       <Box style={{ flex: 1, overflow: "auto" }}>
         <div ref={containerRef} style={{ height: "100%", width: "100%" }} />
diff --git a/apps/code/src/renderer/features/code-editor/components/DiffEditorPanel.tsx b/apps/code/src/renderer/features/code-editor/components/DiffEditorPanel.tsx
deleted file mode 100644
index 7061378ec..000000000
--- a/apps/code/src/renderer/features/code-editor/components/DiffEditorPanel.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-import { PanelMessage } from "@components/ui/PanelMessage";
-import { CodeMirrorDiffEditor } from "@features/code-editor/components/CodeMirrorDiffEditor";
-import { CodeMirrorEditor } from "@features/code-editor/components/CodeMirrorEditor";
-import { getImageMimeType } from "@features/code-editor/utils/imageUtils";
-import { getRelativePath } from "@features/code-editor/utils/pathUtils";
-import { isImageFile } from "@features/message-editor/utils/imageUtils";
-import { usePanelLayoutStore } from "@features/panels/store/panelLayoutStore";
-import { useCwd } from "@features/sidebar/hooks/useCwd";
-import { Box, Flex } from "@radix-ui/themes";
-import { trpcClient, useTRPC } from "@renderer/trpc/client";
-import type { Task } from "@shared/types";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useCallback, useEffect } from "react";
-
-interface DiffEditorPanelProps {
-  taskId: string;
-  task: Task;
-  absolutePath: string;
-}
-
-export function DiffEditorPanel({
-  taskId,
-  task: _task,
-  absolutePath,
-}: DiffEditorPanelProps) {
-  const trpc = useTRPC();
-  const repoPath = useCwd(taskId);
-  const filePath = getRelativePath(absolutePath, repoPath);
-  const isImage = isImageFile(absolutePath);
-  const queryClient = useQueryClient();
-  const closeDiffTabsForFile = usePanelLayoutStore(
-    (s) => s.closeDiffTabsForFile,
-  );
-
-  const { data: changedFiles = [], isLoading: loadingChangelist } = useQuery(
-    trpc.git.getChangedFilesHead.queryOptions(
-      { directoryPath: repoPath as string },
-      { enabled: !!repoPath, staleTime: 30_000 },
-    ),
-  );
-
-  const fileInfo = changedFiles.find((f) => f.path === filePath);
-  const isFileStillChanged = !!fileInfo;
-  const status = fileInfo?.status ?? "modified";
-  const originalPath = fileInfo?.originalPath ?? filePath;
-  const isDeleted = status === "deleted";
-  const isNew = status === "untracked" || status === "added";
-
-  const { data: modifiedContent, isLoading: loadingModified } = useQuery(
-    trpc.fs.readRepoFile.queryOptions(
-      { repoPath: repoPath as string, filePath },
-      { enabled: !!repoPath && !isDeleted, staleTime: 30_000 },
-    ),
-  );
-
-  const { data: originalContent, isLoading: loadingOriginal } = useQuery(
-    trpc.git.getFileAtHead.queryOptions(
-      { directoryPath: repoPath as string, filePath: originalPath },
-      { enabled: !!repoPath && !isNew, staleTime: 30_000 },
-    ),
-  );
-
-  const imageQuery = useQuery(
-    trpc.fs.readFileAsBase64.queryOptions(
-      { filePath: absolutePath },
-      { enabled: isImage, staleTime: Infinity },
-    ),
-  );
-
-  const handleRefresh = useCallback(() => {
-    if (!repoPath) return;
-    queryClient.invalidateQueries(
-      trpc.fs.readRepoFile.queryFilter({ repoPath, filePath }),
-    );
-    queryClient.invalidateQueries(trpc.git.getFileAtHead.pathFilter());
-    queryClient.invalidateQueries(
-      trpc.git.getChangedFilesHead.queryFilter({ directoryPath: repoPath }),
-    );
-  }, [repoPath, filePath, queryClient, trpc]);
-
-  const handleContentChange = useCallback(
-    async (newContent: string) => {
-      if (!repoPath) return;
-
-      try {
-        await trpcClient.fs.writeRepoFile.mutate({
-          repoPath,
-          filePath,
-          content: newContent,
-        });
-
-        queryClient.invalidateQueries(
-          trpc.fs.readRepoFile.queryFilter({ repoPath, filePath }),
-        );
-        queryClient.invalidateQueries(
-          trpc.git.getChangedFilesHead.queryFilter({ directoryPath: repoPath }),
-        );
-      } catch (_error) {}
-    },
-    [repoPath, filePath, queryClient, trpc],
-  );
-
-  const isLoading =
-    loadingChangelist ||
-    (!isDeleted && loadingModified) ||
-    (!isNew && loadingOriginal);
-
-  const hasNoChanges =
-    !!repoPath &&
-    !isLoading &&
-    (!isFileStillChanged ||
-      (!isDeleted && !isNew && originalContent === modifiedContent));
-
-  useEffect(() => {
-    if (hasNoChanges) {
-      closeDiffTabsForFile(taskId, filePath);
-    }
-  }, [hasNoChanges, closeDiffTabsForFile, taskId, filePath]);
-
-  if (isImage) {
-    if (imageQuery.isLoading) {
-      return <PanelMessage>Loading image...</PanelMessage>;
-    }
-    if (imageQuery.error || !imageQuery.data) {
-      return (
-        <PanelMessage detail={absolutePath}>Failed to load image</PanelMessage>
-      );
-    }
-    const mimeType = getImageMimeType(absolutePath);
-    return (
-      <Flex
-        align="center"
-        justify="center"
-        height="100%"
-        p="4"
-        style={{ overflow: "auto" }}
-      >
-        <img
-          src={`data:${mimeType};base64,${imageQuery.data}`}
-          alt={filePath}
-          style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain" }}
-        />
-      </Flex>
-    );
-  }
-
-  if (!repoPath) {
-    return <PanelMessage>No repository path available</PanelMessage>;
-  }
-
-  if (isLoading) {
-    return <PanelMessage>Loading diff...</PanelMessage>;
-  }
-
-  if (hasNoChanges) {
-    return null;
-  }
-
-  const showDiff = !isDeleted && !isNew;
-  const content = isDeleted ? originalContent : modifiedContent;
-
-  return (
-    <Box height="100%" style={{ overflow: "hidden" }}>
-      {showDiff ? (
-        <CodeMirrorDiffEditor
-          originalContent={originalContent ?? ""}
-          modifiedContent={modifiedContent ?? ""}
-          filePath={absolutePath}
-          relativePath={filePath}
-          onContentChange={handleContentChange}
-          onRefresh={handleRefresh}
-        />
-      ) : (
-        <CodeMirrorEditor
-          content={content ?? ""}
-          filePath={absolutePath}
-          relativePath={filePath}
-          readOnly
-        />
-      )}
-    </Box>
-  );
-}
diff --git a/apps/code/src/renderer/features/code-editor/components/DiffSettingsMenu.tsx b/apps/code/src/renderer/features/code-editor/components/DiffSettingsMenu.tsx
new file mode 100644
index 000000000..75624ef16
--- /dev/null
+++ b/apps/code/src/renderer/features/code-editor/components/DiffSettingsMenu.tsx
@@ -0,0 +1,63 @@
+import { DotsThree } from "@phosphor-icons/react";
+import { DropdownMenu, IconButton, Text } from "@radix-ui/themes";
+import { useDiffViewerStore } from "../stores/diffViewerStore";
+
+interface DiffSettingsMenuProps {
+  onRefresh?: () => void;
+}
+
+export function DiffSettingsMenu({ onRefresh }: DiffSettingsMenuProps) {
+  const wordWrap = useDiffViewerStore((s) => s.wordWrap);
+  const toggleWordWrap = useDiffViewerStore((s) => s.toggleWordWrap);
+  const loadFullFiles = useDiffViewerStore((s) => s.loadFullFiles);
+  const toggleLoadFullFiles = useDiffViewerStore((s) => s.toggleLoadFullFiles);
+  const wordDiffs = useDiffViewerStore((s) => s.wordDiffs);
+  const toggleWordDiffs = useDiffViewerStore((s) => s.toggleWordDiffs);
+  const hideWhitespaceChanges = useDiffViewerStore(
+    (s) => s.hideWhitespaceChanges,
+  );
+  const toggleHideWhitespaceChanges = useDiffViewerStore(
+    (s) => s.toggleHideWhitespaceChanges,
+  );
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>
+        <IconButton size="1" variant="ghost" style={{ color: "var(--gray-9)" }}>
+          <DotsThree size={16} weight="bold" />
+        </IconButton>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content size="1" align="end">
+        <DropdownMenu.Item onSelect={toggleWordWrap}>
+          <Text size="1">
+            {wordWrap ? "Disable word wrap" : "Enable word wrap"}
+          </Text>
+        </DropdownMenu.Item>
+        <DropdownMenu.Item onSelect={toggleLoadFullFiles}>
+          <Text size="1">
+            {loadFullFiles ? "Collapse unchanged" : "Load full files"}
+          </Text>
+        </DropdownMenu.Item>
+        <DropdownMenu.Item onSelect={toggleWordDiffs}>
+          <Text size="1">
+            {wordDiffs ? "Disable word diffs" : "Enable word diffs"}
+          </Text>
+        </DropdownMenu.Item>
+        <DropdownMenu.Item onSelect={toggleHideWhitespaceChanges}>
+          <Text size="1">
+            {hideWhitespaceChanges ? "Show whitespace" : "Hide whitespace"}
+          </Text>
+        </DropdownMenu.Item>
+
+        {onRefresh && (
+          <>
+            <DropdownMenu.Separator />
+            <DropdownMenu.Item onSelect={onRefresh}>
+              <Text size="1">Refresh</Text>
+            </DropdownMenu.Item>
+          </>
+        )}
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  );
+}
diff --git a/apps/code/src/renderer/features/code-editor/hooks/useEditorExtensions.ts b/apps/code/src/renderer/features/code-editor/hooks/useEditorExtensions.ts
index d957114fb..b9e29ab2b 100644
--- a/apps/code/src/renderer/features/code-editor/hooks/useEditorExtensions.ts
+++ b/apps/code/src/renderer/features/code-editor/hooks/useEditorExtensions.ts
@@ -39,7 +39,7 @@ export function useEditorExtensions(
       theme,
       mergeViewTheme,
       EditorView.editable.of(!readOnly),
-      ...(readOnly ? [EditorState.readOnly.of(true)] : []),
+      ...(readOnly && !isDiff ? [EditorState.readOnly.of(true)] : []),
       ...(languageExtension ? [languageExtension] : []),
     ];
   }, [filePath, isDarkMode, readOnly, isDiff, wordWrap]);
diff --git a/apps/code/src/renderer/features/code-review/components/ReviewFileDiff.tsx b/apps/code/src/renderer/features/code-review/components/ReviewFileDiff.tsx
new file mode 100644
index 000000000..b438414af
--- /dev/null
+++ b/apps/code/src/renderer/features/code-review/components/ReviewFileDiff.tsx
@@ -0,0 +1,85 @@
+import { useDiffViewerStore } from "@features/code-editor/stores/diffViewerStore";
+import { MultiFileDiff } from "@pierre/diffs/react";
+import { Flex, Spinner, Text } from "@radix-ui/themes";
+import { useTRPC } from "@renderer/trpc/client";
+import type { GitFileStatus } from "@shared/types";
+import { useThemeStore } from "@stores/themeStore";
+import { useQuery } from "@tanstack/react-query";
+import { memo, useMemo } from "react";
+
+interface ReviewFileDiffProps {
+  filePath: string;
+  repoPath: string;
+  status: GitFileStatus;
+  originalPath?: string;
+}
+
+export const ReviewFileDiff = memo(function ReviewFileDiff({
+  filePath,
+  repoPath,
+  status,
+  originalPath,
+}: ReviewFileDiffProps) {
+  const trpc = useTRPC();
+
+  const isDeleted = status === "deleted";
+  const isNew = status === "untracked" || status === "added";
+  const effectiveOriginalPath = originalPath ?? filePath;
+
+  const { data: modifiedContent, isLoading: loadingModified } = useQuery(
+    trpc.fs.readRepoFile.queryOptions(
+      { repoPath, filePath },
+      { enabled: !isDeleted, staleTime: 30_000 },
+    ),
+  );
+
+  const { data: originalContent, isLoading: loadingOriginal } = useQuery(
+    trpc.git.getFileAtHead.queryOptions(
+      { directoryPath: repoPath, filePath: effectiveOriginalPath },
+      { enabled: !isNew, staleTime: 30_000 },
+    ),
+  );
+
+  const viewMode = useDiffViewerStore((s) => s.viewMode);
+  const wordWrap = useDiffViewerStore((s) => s.wordWrap);
+  const loadFullFiles = useDiffViewerStore((s) => s.loadFullFiles);
+  const wordDiffs = useDiffViewerStore((s) => s.wordDiffs);
+  const isDarkMode = useThemeStore((s) => s.isDarkMode);
+
+  const options = useMemo(
+    () => ({
+      diffStyle: viewMode as "split" | "unified",
+      overflow: (wordWrap ? "wrap" : "scroll") as "wrap" | "scroll",
+      expandUnchanged: loadFullFiles,
+      lineDiffType: (wordDiffs ? "word" : "none") as "word" | "none",
+      themeType: (isDarkMode ? "dark" : "light") as "dark" | "light",
+      disableFileHeader: true,
+      theme: { dark: "github-dark" as const, light: "github-light" as const },
+    }),
+    [viewMode, wordWrap, loadFullFiles, wordDiffs, isDarkMode],
+  );
+
+  const isLoading =
+    (!isDeleted && loadingModified) || (!isNew && loadingOriginal);
+
+  if (isLoading) {
+    return (
+      <Flex align="center" justify="center" gap="2" py="6">
+        <Spinner size="1" />
+        <Text size="1" color="gray">
+          Loading...
+        </Text>
+      </Flex>
+    );
+  }
+
+  const fileName = filePath.split("/").pop() || filePath;
+
+  return (
+    <MultiFileDiff
+      oldFile={{ name: fileName, contents: originalContent ?? "" }}
+      newFile={{ name: fileName, contents: modifiedContent ?? "" }}
+      options={options}
+    />
+  );
+});
diff --git a/apps/code/src/renderer/features/code-review/components/ReviewFileHeader.tsx b/apps/code/src/renderer/features/code-review/components/ReviewFileHeader.tsx
new file mode 100644
index 000000000..baea54db5
--- /dev/null
+++ b/apps/code/src/renderer/features/code-review/components/ReviewFileHeader.tsx
@@ -0,0 +1,97 @@
+import { FileIcon } from "@components/ui/FileIcon";
+import { getStatusIndicator } from "@features/git-interaction/utils/gitFileStatus";
+import { CaretDown, CaretRight } from "@phosphor-icons/react";
+import { Badge, Flex, Text } from "@radix-ui/themes";
+import type { ChangedFile } from "@shared/types";
+import { memo, useCallback } from "react";
+
+interface ReviewFileHeaderProps {
+  file: ChangedFile;
+  isExpanded: boolean;
+  onToggle: (filePath: string) => void;
+}
+
+export const ReviewFileHeader = memo(function ReviewFileHeader({
+  file,
+  isExpanded,
+  onToggle,
+}: ReviewFileHeaderProps) {
+  const handleToggle = useCallback(
+    () => onToggle(file.path),
+    [onToggle, file.path],
+  );
+  const fileName = file.path.split("/").pop() || file.path;
+  const indicator = getStatusIndicator(file.status);
+  const hasLineStats =
+    file.linesAdded !== undefined || file.linesRemoved !== undefined;
+
+  return (
+    <Flex
+      align="center"
+      gap="2"
+      px="3"
+      py="2"
+      onClick={handleToggle}
+      className="hover:bg-gray-3"
+      style={{
+        cursor: "pointer",
+        borderBottom: "1px solid var(--gray-5)",
+        background: "var(--gray-2)",
+        userSelect: "none",
+        position: "sticky",
+        top: 0,
+        zIndex: 1,
+      }}
+    >
+      {isExpanded ? (
+        <CaretDown size={12} color="var(--gray-9)" />
+      ) : (
+        <CaretRight size={12} color="var(--gray-9)" />
+      )}
+      <FileIcon filename={fileName} size={14} />
+      <Text
+        size="1"
+        weight="medium"
+        style={{ fontFamily: "var(--code-font-family)" }}
+      >
+        {fileName}
+      </Text>
+      <Text
+        size="1"
+        color="gray"
+        style={{ fontFamily: "var(--code-font-family)" }}
+      >
+        {file.originalPath
+          ? `${file.originalPath} \u2192 ${file.path}`
+          : file.path}
+      </Text>
+      <Flex align="center" gap="1" ml="auto">
+        {hasLineStats && (
+          <Flex
+            align="center"
+            gap="1"
+            style={{ fontSize: "10px", fontFamily: "monospace" }}
+          >
+            {(file.linesAdded ?? 0) > 0 && (
+              <Text style={{ color: "var(--green-9)" }}>
+                +{file.linesAdded}
+              </Text>
+            )}
+            {(file.linesRemoved ?? 0) > 0 && (
+              <Text style={{ color: "var(--red-9)" }}>
+                -{file.linesRemoved}
+              </Text>
+            )}
+          </Flex>
+        )}
+        <Badge
+          size="1"
+          color={indicator.color}
+          style={{ fontSize: "10px", padding: "0 4px" }}
+        >
+          {indicator.label}
+        </Badge>
+      </Flex>
+    </Flex>
+  );
+});
diff --git a/apps/code/src/renderer/features/code-review/components/ReviewPage.tsx b/apps/code/src/renderer/features/code-review/components/ReviewPage.tsx
new file mode 100644
index 000000000..834a98c67
--- /dev/null
+++ b/apps/code/src/renderer/features/code-review/components/ReviewPage.tsx
@@ -0,0 +1,168 @@
+import { useGitQueries } from "@features/git-interaction/hooks/useGitQueries";
+import { useCwd } from "@features/sidebar/hooks/useCwd";
+import { Box, Flex, Text } from "@radix-ui/themes";
+import type { Task } from "@shared/types";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useReviewStore } from "../stores/reviewStore";
+import { ReviewFileDiff } from "./ReviewFileDiff";
+import { ReviewFileHeader } from "./ReviewFileHeader";
+import { ReviewToolbar } from "./ReviewToolbar";
+
+interface ReviewPageProps {
+  taskId: string;
+  task: Task;
+}
+
+const COLLAPSE_THRESHOLD = 20;
+
+export function ReviewPage({ taskId }: ReviewPageProps) {
+  const repoPath = useCwd(taskId);
+  const { changedFiles, changesLoading } = useGitQueries(repoPath);
+
+  const [collapsedFiles, setCollapsedFiles] = useState<Set<string>>(() => {
+    if (changedFiles.length > COLLAPSE_THRESHOLD) {
+      return new Set(changedFiles.map((f) => f.path));
+    }
+    return new Set();
+  });
+
+  const fileRefs = useRef<Map<string, HTMLDivElement>>(new Map());
+
+  // Subscribe to scroll target without causing re-renders.
+  // Only re-renders if the file was collapsed and needs expanding.
+  useEffect(() => {
+    return useReviewStore.subscribe((state, prev) => {
+      if (!state.scrollTarget || state.scrollTarget === prev.scrollTarget)
+        return;
+
+      const target = state.scrollTarget;
+      useReviewStore.getState().setScrollTarget(null);
+
+      // Expand if collapsed — this is the only thing that triggers a re-render
+      setCollapsedFiles((prev) => {
+        if (prev.has(target)) {
+          const next = new Set(prev);
+          next.delete(target);
+          return next;
+        }
+        return prev;
+      });
+
+      requestAnimationFrame(() => {
+        const el = fileRefs.current.get(target);
+        if (el) {
+          el.scrollIntoView({ block: "start" });
+        }
+      });
+    });
+  }, []);
+
+  const toggleFile = useCallback((filePath: string) => {
+    setCollapsedFiles((prev) => {
+      const next = new Set(prev);
+      if (next.has(filePath)) {
+        next.delete(filePath);
+      } else {
+        next.add(filePath);
+      }
+      return next;
+    });
+  }, []);
+
+  const expandAll = useCallback(() => {
+    setCollapsedFiles(new Set());
+  }, []);
+
+  const collapseAll = useCallback(() => {
+    setCollapsedFiles(new Set(changedFiles.map((f) => f.path)));
+  }, [changedFiles]);
+
+  const allExpanded = collapsedFiles.size === 0;
+
+  const setFileRef = useCallback(
+    (filePath: string) => (el: HTMLDivElement | null) => {
+      if (el) {
+        fileRefs.current.set(filePath, el);
+      } else {
+        fileRefs.current.delete(filePath);
+      }
+    },
+    [],
+  );
+
+  const { linesAdded, linesRemoved } = useMemo(() => {
+    let added = 0;
+    let removed = 0;
+    for (const file of changedFiles) {
+      added += file.linesAdded ?? 0;
+      removed += file.linesRemoved ?? 0;
+    }
+    return { linesAdded: added, linesRemoved: removed };
+  }, [changedFiles]);
+
+  if (!repoPath) {
+    return (
+      <Flex align="center" justify="center" height="100%">
+        <Text size="2" color="gray">
+          No repository path available
+        </Text>
+      </Flex>
+    );
+  }
+
+  if (changesLoading) {
+    return (
+      <Flex align="center" justify="center" height="100%">
+        <Text size="2" color="gray">
+          Loading changes...
+        </Text>
+      </Flex>
+    );
+  }
+
+  if (changedFiles.length === 0) {
+    return (
+      <Flex align="center" justify="center" height="100%">
+        <Text size="2" color="gray">
+          No file changes to review
+        </Text>
+      </Flex>
+    );
+  }
+
+  return (
+    <Flex direction="column" height="100%">
+      <ReviewToolbar
+        fileCount={changedFiles.length}
+        linesAdded={linesAdded}
+        linesRemoved={linesRemoved}
+        allExpanded={allExpanded}
+        onExpandAll={expandAll}
+        onCollapseAll={collapseAll}
+      />
+      <Box style={{ flex: 1, overflowY: "auto" }}>
+        {changedFiles.map((file) => {
+          const isExpanded = !collapsedFiles.has(file.path);
+
+          return (
+            <Box key={file.path} ref={setFileRef(file.path)}>
+              <ReviewFileHeader
+                file={file}
+                isExpanded={isExpanded}
+                onToggle={toggleFile}
+              />
+              {isExpanded && (
+                <ReviewFileDiff
+                  filePath={file.path}
+                  repoPath={repoPath}
+                  status={file.status}
+                  originalPath={file.originalPath}
+                />
+              )}
+            </Box>
+          );
+        })}
+      </Box>
+    </Flex>
+  );
+}
diff --git a/apps/code/src/renderer/features/code-review/components/ReviewToolbar.tsx b/apps/code/src/renderer/features/code-review/components/ReviewToolbar.tsx
new file mode 100644
index 000000000..ede643025
--- /dev/null
+++ b/apps/code/src/renderer/features/code-review/components/ReviewToolbar.tsx
@@ -0,0 +1,85 @@
+import { DiffSettingsMenu } from "@features/code-editor/components/DiffSettingsMenu";
+import { useDiffViewerStore } from "@features/code-editor/stores/diffViewerStore";
+import { ArrowsIn, ArrowsOut, Columns, Rows } from "@phosphor-icons/react";
+import { Button, Flex, Text } from "@radix-ui/themes";
+import { memo } from "react";
+
+interface ReviewToolbarProps {
+  fileCount: number;
+  linesAdded: number;
+  linesRemoved: number;
+  allExpanded: boolean;
+  onExpandAll: () => void;
+  onCollapseAll: () => void;
+}
+
+export const ReviewToolbar = memo(function ReviewToolbar({
+  fileCount,
+  linesAdded,
+  linesRemoved,
+  allExpanded,
+  onExpandAll,
+  onCollapseAll,
+}: ReviewToolbarProps) {
+  const viewMode = useDiffViewerStore((s) => s.viewMode);
+  const toggleViewMode = useDiffViewerStore((s) => s.toggleViewMode);
+
+  return (
+    <Flex
+      px="3"
+      py="2"
+      align="center"
+      gap="3"
+      style={{
+        borderBottom: "1px solid var(--gray-6)",
+        background: "var(--color-background)",
+        position: "sticky",
+        top: 0,
+        zIndex: 2,
+        flexShrink: 0,
+      }}
+    >
+      <Text size="2" weight="medium">
+        {fileCount} file{fileCount !== 1 ? "s" : ""} changed
+      </Text>
+      <Flex
+        align="center"
+        gap="1"
+        style={{ fontSize: "12px", fontFamily: "monospace" }}
+      >
+        {linesAdded > 0 && (
+          <Text style={{ color: "var(--green-9)" }}>+{linesAdded}</Text>
+        )}
+        {linesRemoved > 0 && (
+          <Text style={{ color: "var(--red-9)" }}>-{linesRemoved}</Text>
+        )}
+      </Flex>
+
+      <Flex align="center" gap="1" ml="auto">
+        <Button
+          size="1"
+          variant="ghost"
+          color="gray"
+          onClick={toggleViewMode}
+          style={{ cursor: "pointer" }}
+        >
+          {viewMode === "split" ? <Rows size={14} /> : <Columns size={14} />}
+          <Text size="1">{viewMode === "split" ? "Unified" : "Split"}</Text>
+        </Button>
+
+        <Button
+          size="1"
+          variant="ghost"
+          color="gray"
+          onClick={allExpanded ? onCollapseAll : onExpandAll}
+          style={{ cursor: "pointer" }}
+        >
+          {allExpanded ? <ArrowsIn size={14} /> : <ArrowsOut size={14} />}
+          <Text size="1">{allExpanded ? "Collapse" : "Expand"}</Text>
+        </Button>
+
+        <DiffSettingsMenu />
+      </Flex>
+    </Flex>
+  );
+});
diff --git a/apps/code/src/renderer/features/code-review/stores/reviewStore.ts b/apps/code/src/renderer/features/code-review/stores/reviewStore.ts
new file mode 100644
index 000000000..80c84865f
--- /dev/null
+++ b/apps/code/src/renderer/features/code-review/stores/reviewStore.ts
@@ -0,0 +1,23 @@
+import { create } from "zustand";
+
+interface ReviewStoreState {
+  scrollTarget: string | null;
+  activeFilePath: string | null;
+}
+
+interface ReviewStoreActions {
+  setScrollTarget: (filePath: string | null) => void;
+  setActiveFilePath: (filePath: string | null) => void;
+}
+
+type ReviewStore = ReviewStoreState & ReviewStoreActions;
+
+export const useReviewStore = create<ReviewStore>()((set) => ({
+  scrollTarget: null,
+  activeFilePath: null,
+  setScrollTarget: (filePath) =>
+    filePath
+      ? set({ scrollTarget: filePath, activeFilePath: filePath })
+      : set({ scrollTarget: null }),
+  setActiveFilePath: (filePath) => set({ activeFilePath: filePath }),
+}));
diff --git a/apps/code/src/renderer/features/git-interaction/components/CreatePrDialog.stories.tsx b/apps/code/src/renderer/features/git-interaction/components/CreatePrDialog.stories.tsx
new file mode 100644
index 000000000..306d4f1eb
--- /dev/null
+++ b/apps/code/src/renderer/features/git-interaction/components/CreatePrDialog.stories.tsx
@@ -0,0 +1,347 @@
+import { useGitInteractionStore } from "@features/git-interaction/state/gitInteractionStore";
+import type { CreatePrStep } from "@features/git-interaction/types";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { CreatePrDialog } from "./CreatePrDialog";
+
+function setStoreState(overrides: {
+  branchName?: string;
+  commitMessage?: string;
+  prTitle?: string;
+  prBody?: string;
+  createPrOpen?: boolean;
+  createPrStep?: CreatePrStep;
+  createPrError?: string | null;
+  createPrNeedsBranch?: boolean;
+  createPrNeedsCommit?: boolean;
+  createPrBaseBranch?: string | null;
+  createPrDraft?: boolean;
+  createPrFailedStep?: CreatePrStep | null;
+  isGeneratingCommitMessage?: boolean;
+  isGeneratingPr?: boolean;
+  isSubmitting?: boolean;
+}) {
+  useGitInteractionStore.setState({
+    branchName: "",
+    commitMessage: "",
+    prTitle: "",
+    prBody: "",
+    createPrOpen: true,
+    createPrStep: "idle",
+    createPrError: null,
+    createPrNeedsBranch: false,
+    createPrNeedsCommit: false,
+    createPrBaseBranch: null,
+    createPrDraft: false,
+    createPrFailedStep: null,
+    isGeneratingCommitMessage: false,
+    isGeneratingPr: false,
+    isSubmitting: false,
+    ...overrides,
+  });
+}
+
+const noop = () => {};
+
+const meta: Meta<typeof CreatePrDialog> = {
+  title: "Git/CreatePrDialog",
+  component: CreatePrDialog,
+  parameters: { layout: "centered" },
+};
+
+export default meta;
+
+export const SetupFull: StoryObj<typeof CreatePrDialog> = {
+  decorators: [
+    (Story) => {
+      setStoreState({
+        createPrNeedsBranch: true,
+        createPrNeedsCommit: true,
+        createPrBaseBranch: "main",
+        branchName: "feature/add-auth",
+      });
+      return <Story />;
+    },
+  ],
+  render: () => (
+    <CreatePrDialog
+      open={true}
+      onOpenChange={noop}
+      currentBranch="main"
+      diffStats={{ filesChanged: 3, linesAdded: 42, linesRemoved: 12 }}
+      isSubmitting={false}
+      onSubmit={noop}
+      onGenerateCommitMessage={noop}
+      onGeneratePr={noop}
+    />
+  ),
+};
+
+export const SetupCommitOnly: StoryObj<typeof CreatePrDialog> = {
+  decorators: [
+    (Story) => {
+      setStoreState({
+        createPrNeedsCommit: true,
+      });
+      return <Story />;
+    },
+  ],
+  render: () => (
+    <CreatePrDialog
+      open={true}
+      onOpenChange={noop}
+      currentBranch="feature/add-auth"
+      diffStats={{ filesChanged: 1, linesAdded: 10, linesRemoved: 2 }}
+      isSubmitting={false}
+      onSubmit={noop}
+      onGenerateCommitMessage={noop}
+      onGeneratePr={noop}
+    />
+  ),
+};
+
+export const SetupPushOnly: StoryObj<typeof CreatePrDialog> = {
+  decorators: [
+    (Story) => {
+      setStoreState({});
+      return <Story />;
+    },
+  ],
+  render: () => (
+    <CreatePrDialog
+      open={true}
+      onOpenChange={noop}
+      currentBranch="feature/add-auth"
+      diffStats={{ filesChanged: 0, linesAdded: 0, linesRemoved: 0 }}
+      isSubmitting={false}
+      onSubmit={noop}
+      onGenerateCommitMessage={noop}
+      onGeneratePr={noop}
+    />
+  ),
+};
+
+export const SetupWithDraft: StoryObj<typeof CreatePrDialog> = {
+  decorators: [
+    (Story) => {
+      setStoreState({
+        createPrNeedsCommit: true,
+        createPrDraft: true,
+        prTitle: "Add user authentication",
+        prBody: "Closes #123",
+      });
+      return <Story />;
+    },
+  ],
+  render: () => (
+    <CreatePrDialog
+      open={true}
+      onOpenChange={noop}
+      currentBranch="feature/add-auth"
+      diffStats={{ filesChanged: 3, linesAdded: 42, linesRemoved: 12 }}
+      isSubmitting={false}
+      onSubmit={noop}
+      onGenerateCommitMessage={noop}
+      onGeneratePr={noop}
+    />
+  ),
+};
+
+export const SetupWithError: StoryObj<typeof CreatePrDialog> = {
+  decorators: [
+    (Story) => {
+      setStoreState({
+        createPrNeedsBranch: true,
+        createPrError: "Branch name is required.",
+      });
+      return <Story />;
+    },
+  ],
+  render: () => (
+    <CreatePrDialog
+      open={true}
+      onOpenChange={noop}
+      currentBranch="main"
+      diffStats={{ filesChanged: 1, linesAdded: 5, linesRemoved: 0 }}
+      isSubmitting={false}
+      onSubmit={noop}
+      onGenerateCommitMessage={noop}
+      onGeneratePr={noop}
+    />
+  ),
+};
+
+export const SetupGeneratingCommitMessage: StoryObj<typeof CreatePrDialog> = {
+  decorators: [
+    (Story) => {
+      setStoreState({
+        createPrNeedsCommit: true,
+        isGeneratingCommitMessage: true,
+      });
+      return <Story />;
+    },
+  ],
+  render: () => (
+    <CreatePrDialog
+      open={true}
+      onOpenChange={noop}
+      currentBranch="feature/add-auth"
+      diffStats={{ filesChanged: 3, linesAdded: 42, linesRemoved: 12 }}
+      isSubmitting={false}
+      onSubmit={noop}
+      onGenerateCommitMessage={noop}
+      onGeneratePr={noop}
+    />
+  ),
+};
+
+export const SetupGeneratingPr: StoryObj<typeof CreatePrDialog> = {
+  decorators: [
+    (Story) => {
+      setStoreState({
+        createPrNeedsCommit: true,
+        isGeneratingPr: true,
+      });
+      return <Story />;
+    },
+  ],
+  render: () => (
+    <CreatePrDialog
+      open={true}
+      onOpenChange={noop}
+      currentBranch="feature/add-auth"
+      diffStats={{ filesChanged: 3, linesAdded: 42, linesRemoved: 12 }}
+      isSubmitting={false}
+      onSubmit={noop}
+      onGenerateCommitMessage={noop}
+      onGeneratePr={noop}
+    />
+  ),
+};
+
+export const ExecutingCreatingBranch: StoryObj<typeof CreatePrDialog> = {
+  decorators: [
+    (Story) => {
+      setStoreState({
+        createPrNeedsBranch: true,
+        createPrNeedsCommit: true,
+        createPrStep: "creating-branch",
+        branchName: "feature/add-auth",
+      });
+      return <Story />;
+    },
+  ],
+  render: () => (
+    <CreatePrDialog
+      open={true}
+      onOpenChange={noop}
+      currentBranch="main"
+      diffStats={{ filesChanged: 3, linesAdded: 42, linesRemoved: 12 }}
+      isSubmitting={true}
+      onSubmit={noop}
+      onGenerateCommitMessage={noop}
+      onGeneratePr={noop}
+    />
+  ),
+};
+
+export const ExecutingCommitting: StoryObj<typeof CreatePrDialog> = {
+  decorators: [
+    (Story) => {
+      setStoreState({
+        createPrNeedsBranch: true,
+        createPrNeedsCommit: true,
+        createPrStep: "committing",
+        branchName: "feature/add-auth",
+      });
+      return <Story />;
+    },
+  ],
+  render: () => (
+    <CreatePrDialog
+      open={true}
+      onOpenChange={noop}
+      currentBranch="main"
+      diffStats={{ filesChanged: 3, linesAdded: 42, linesRemoved: 12 }}
+      isSubmitting={true}
+      onSubmit={noop}
+      onGenerateCommitMessage={noop}
+      onGeneratePr={noop}
+    />
+  ),
+};
+
+export const ExecutingPushing: StoryObj<typeof CreatePrDialog> = {
+  decorators: [
+    (Story) => {
+      setStoreState({
+        createPrNeedsCommit: true,
+        createPrStep: "pushing",
+      });
+      return <Story />;
+    },
+  ],
+  render: () => (
+    <CreatePrDialog
+      open={true}
+      onOpenChange={noop}
+      currentBranch="feature/add-auth"
+      diffStats={{ filesChanged: 3, linesAdded: 42, linesRemoved: 12 }}
+      isSubmitting={true}
+      onSubmit={noop}
+      onGenerateCommitMessage={noop}
+      onGeneratePr={noop}
+    />
+  ),
+};
+
+export const ExecutingCreatingPr: StoryObj<typeof CreatePrDialog> = {
+  decorators: [
+    (Story) => {
+      setStoreState({
+        createPrNeedsCommit: true,
+        createPrStep: "creating-pr",
+      });
+      return <Story />;
+    },
+  ],
+  render: () => (
+    <CreatePrDialog
+      open={true}
+      onOpenChange={noop}
+      currentBranch="feature/add-auth"
+      diffStats={{ filesChanged: 3, linesAdded: 42, linesRemoved: 12 }}
+      isSubmitting={true}
+      onSubmit={noop}
+      onGenerateCommitMessage={noop}
+      onGeneratePr={noop}
+    />
+  ),
+};
+
+export const ExecutingError: StoryObj<typeof CreatePrDialog> = {
+  decorators: [
+    (Story) => {
+      setStoreState({
+        createPrNeedsBranch: true,
+        createPrNeedsCommit: true,
+        createPrStep: "error",
+        createPrError: "Failed to push: remote rejected (permission denied)",
+        createPrFailedStep: "pushing",
+        branchName: "feature/add-auth",
+      });
+      return <Story />;
+    },
+  ],
+  render: () => (
+    <CreatePrDialog
+      open={true}
+      onOpenChange={noop}
+      currentBranch="main"
+      diffStats={{ filesChanged: 3, linesAdded: 42, linesRemoved: 12 }}
+      isSubmitting={false}
+      onSubmit={noop}
+      onGenerateCommitMessage={noop}
+      onGeneratePr={noop}
+    />
+  ),
+};
diff --git a/apps/code/src/renderer/features/git-interaction/components/CreatePrDialog.tsx b/apps/code/src/renderer/features/git-interaction/components/CreatePrDialog.tsx
new file mode 100644
index 000000000..d044f8432
--- /dev/null
+++ b/apps/code/src/renderer/features/git-interaction/components/CreatePrDialog.tsx
@@ -0,0 +1,322 @@
+import {
+  ErrorContainer,
+  GenerateButton,
+} from "@features/git-interaction/components/GitInteractionDialogs";
+import { useGitInteractionStore } from "@features/git-interaction/state/gitInteractionStore";
+import type { CreatePrStep } from "@features/git-interaction/types";
+import {
+  CheckCircle,
+  Circle,
+  GitPullRequest,
+  XCircle,
+} from "@phosphor-icons/react";
+import {
+  Button,
+  Checkbox,
+  Dialog,
+  Flex,
+  Spinner,
+  Text,
+  TextArea,
+  TextField,
+} from "@radix-ui/themes";
+
+const ICON_SIZE = 14;
+
+interface StepDef {
+  id: CreatePrStep;
+  label: string;
+}
+
+function StepIndicator({
+  steps,
+  currentStep,
+  failedStep,
+}: {
+  steps: StepDef[];
+  currentStep: CreatePrStep;
+  failedStep?: CreatePrStep | null;
+}) {
+  const stepOrder: CreatePrStep[] = [
+    "creating-branch",
+    "committing",
+    "pushing",
+    "creating-pr",
+    "complete",
+  ];
+
+  const currentIndex = stepOrder.indexOf(currentStep);
+  const isError = currentStep === "error";
+
+  return (
+    <Flex direction="column" gap="3">
+      {steps.map((step) => {
+        const stepIndex = stepOrder.indexOf(step.id);
+        const isComplete =
+          currentStep === "complete" || stepIndex < currentIndex;
+        const isActive = step.id === currentStep;
+        const isFailed = isError && step.id === failedStep;
+
+        let icon: React.ReactNode;
+        if (isFailed) {
+          icon = <XCircle size={16} weight="fill" color="var(--red-9)" />;
+        } else if (isComplete) {
+          icon = <CheckCircle size={16} weight="fill" color="var(--green-9)" />;
+        } else if (isActive) {
+          icon = <Spinner size="1" />;
+        } else {
+          icon = <Circle size={16} color="var(--gray-6)" />;
+        }
+
+        return (
+          <Flex
+            key={step.id}
+            align="center"
+            gap="2"
+            style={{
+              transition: "opacity 150ms ease",
+              opacity: isComplete ? 0.6 : 1,
+            }}
+          >
+            <Flex
+              style={{
+                transition: "transform 200ms ease",
+                transform: isActive ? "scale(1.15)" : "scale(1)",
+              }}
+            >
+              {icon}
+            </Flex>
+            <Text
+              size="2"
+              weight={isActive ? "medium" : "regular"}
+              style={{
+                transition: "color 150ms ease",
+                color: isFailed
+                  ? "var(--red-11)"
+                  : isComplete
+                    ? "var(--green-11)"
+                    : isActive
+                      ? "var(--gray-12)"
+                      : "var(--gray-9)",
+              }}
+            >
+              {step.label}
+            </Text>
+          </Flex>
+        );
+      })}
+    </Flex>
+  );
+}
+
+export interface CreatePrDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  currentBranch: string | null;
+  diffStats: { filesChanged: number; linesAdded: number; linesRemoved: number };
+  isSubmitting: boolean;
+  onSubmit: () => void;
+  onGenerateCommitMessage: () => void;
+  onGeneratePr: () => void;
+}
+
+export function CreatePrDialog({
+  open,
+  onOpenChange,
+  currentBranch,
+  diffStats,
+  isSubmitting,
+  onSubmit,
+  onGenerateCommitMessage,
+  onGeneratePr,
+}: CreatePrDialogProps) {
+  const store = useGitInteractionStore();
+  const { actions } = store;
+
+  const { createPrStep: step } = store;
+  const isExecuting = step !== "idle" && step !== "complete";
+
+  // Build the step list based on what's needed
+  const steps: StepDef[] = [];
+  if (store.createPrNeedsBranch) {
+    steps.push({
+      id: "creating-branch",
+      label: `Create branch ${store.branchName || ""}`.trim(),
+    });
+  }
+  if (store.createPrNeedsCommit) {
+    steps.push({ id: "committing", label: "Commit changes" });
+  }
+  steps.push({ id: "pushing", label: "Push to remote" });
+  steps.push({ id: "creating-pr", label: "Create pull request" });
+
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Content maxWidth="500px" size="1">
+        <Flex direction="column" gap="3">
+          <Flex align="center" gap="2">
+            <GitPullRequest size={ICON_SIZE} />
+            <Text size="2" weight="medium">
+              {isExecuting ? "Creating PR..." : "Create PR"}
+            </Text>
+          </Flex>
+
+          {!isExecuting && (
+            <>
+              {store.createPrNeedsBranch && (
+                <Flex direction="column" gap="1">
+                  <Text size="1" color="gray">
+                    Branch
+                  </Text>
+                  <TextField.Root
+                    value={store.branchName}
+                    onChange={(e) => actions.setBranchName(e.target.value)}
+                    placeholder="branch-name"
+                    size="1"
+                    autoFocus
+                  />
+                  {currentBranch && (
+                    <Text size="1" color="gray">
+                      from {currentBranch}
+                    </Text>
+                  )}
+                </Flex>
+              )}
+
+              {store.createPrNeedsCommit && (
+                <Flex direction="column" gap="1">
+                  <Flex align="center" justify="between">
+                    <Text size="1" color="gray">
+                      Commit message
+                    </Text>
+                    <Flex align="center" gap="2">
+                      <Text size="1" color="gray">
+                        {diffStats.filesChanged} file
+                        {diffStats.filesChanged === 1 ? "" : "s"}
+                      </Text>
+                      <Text size="1" color="green">
+                        +{diffStats.linesAdded}
+                      </Text>
+                      <Text size="1" color="red">
+                        -{diffStats.linesRemoved}
+                      </Text>
+                      <GenerateButton
+                        onClick={onGenerateCommitMessage}
+                        isGenerating={store.isGeneratingCommitMessage}
+                      />
+                    </Flex>
+                  </Flex>
+                  <TextArea
+                    value={store.commitMessage}
+                    onChange={(e) => actions.setCommitMessage(e.target.value)}
+                    placeholder="Leave empty to generate"
+                    size="1"
+                    rows={1}
+                    disabled={store.isGeneratingCommitMessage}
+                    autoFocus={!store.createPrNeedsBranch}
+                  />
+                </Flex>
+              )}
+
+              <Flex direction="column" gap="1">
+                <Flex align="center" justify="between">
+                  <Text size="1" color="gray">
+                    PR title
+                  </Text>
+                  <GenerateButton
+                    onClick={onGeneratePr}
+                    isGenerating={store.isGeneratingPr}
+                  />
+                </Flex>
+                <TextField.Root
+                  value={store.prTitle}
+                  onChange={(e) => actions.setPrTitle(e.target.value)}
+                  placeholder="Leave empty to generate"
+                  size="1"
+                  disabled={store.isGeneratingPr}
+                  autoFocus={
+                    !store.createPrNeedsBranch && !store.createPrNeedsCommit
+                  }
+                />
+              </Flex>
+
+              <Flex direction="column" gap="1">
+                <Text size="1" color="gray">
+                  Description
+                </Text>
+                <TextArea
+                  value={store.prBody}
+                  onChange={(e) => actions.setPrBody(e.target.value)}
+                  placeholder="Leave empty to generate"
+                  size="1"
+                  rows={4}
+                  disabled={store.isGeneratingPr}
+                />
+              </Flex>
+
+              <Text as="label" size="1" color="gray">
+                <Flex gap="2" align="center">
+                  <Checkbox
+                    size="1"
+                    checked={store.createPrDraft}
+                    onCheckedChange={(checked) =>
+                      actions.setCreatePrDraft(checked === true)
+                    }
+                  />
+                  Create as draft
+                </Flex>
+              </Text>
+
+              {store.createPrError && (
+                <ErrorContainer error={store.createPrError} />
+              )}
+
+              <Flex gap="2" justify="end">
+                <Dialog.Close>
+                  <Button size="1" variant="soft" color="gray">
+                    Cancel
+                  </Button>
+                </Dialog.Close>
+                <Button
+                  size="1"
+                  disabled={isSubmitting}
+                  loading={isSubmitting}
+                  onClick={onSubmit}
+                >
+                  Create PR
+                </Button>
+              </Flex>
+            </>
+          )}
+
+          {isExecuting && (
+            <>
+              <StepIndicator
+                steps={steps}
+                currentStep={step}
+                failedStep={store.createPrFailedStep}
+              />
+
+              {step === "error" && store.createPrError && (
+                <ErrorContainer error={store.createPrError} />
+              )}
+
+              <Flex gap="2" justify="end">
+                <Dialog.Close>
+                  <Button size="1" variant="soft" color="gray">
+                    {step === "error" ? "Close" : "Cancel"}
+                  </Button>
+                </Dialog.Close>
+                {step === "error" && (
+                  <Button size="1" onClick={onSubmit}>
+                    Retry
+                  </Button>
+                )}
+              </Flex>
+            </>
+          )}
+        </Flex>
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+}
diff --git a/apps/code/src/renderer/features/git-interaction/components/GitInteractionDialogs.stories.tsx b/apps/code/src/renderer/features/git-interaction/components/GitInteractionDialogs.stories.tsx
index 7dbaf6a2a..e358f9998 100644
--- a/apps/code/src/renderer/features/git-interaction/components/GitInteractionDialogs.stories.tsx
+++ b/apps/code/src/renderer/features/git-interaction/components/GitInteractionDialogs.stories.tsx
@@ -1,10 +1,6 @@
 import { Flex } from "@radix-ui/themes";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import {
-  GitCommitDialog,
-  GitPrDialog,
-  GitPushDialog,
-} from "./GitInteractionDialogs";
+import { GitCommitDialog, GitPushDialog } from "./GitInteractionDialogs";
 
 function DialogShowcase() {
   return <Flex direction="column" gap="4" />;
@@ -29,7 +25,6 @@ export const CommitDefault: StoryObj<typeof GitCommitDialog> = {
       onCommitMessageChange={() => {}}
       nextStep="commit"
       onNextStepChange={() => {}}
-      prDisabledReason={null}
       pushDisabledReason={null}
       onContinue={() => {}}
       isSubmitting={false}
@@ -51,29 +46,6 @@ export const CommitWithMessage: StoryObj<typeof GitCommitDialog> = {
       onCommitMessageChange={() => {}}
       nextStep="commit-push"
       onNextStepChange={() => {}}
-      prDisabledReason={null}
-      pushDisabledReason={null}
-      onContinue={() => {}}
-      isSubmitting={false}
-      error={null}
-      onGenerateMessage={() => {}}
-      isGeneratingMessage={false}
-    />
-  ),
-};
-
-export const CommitPrDisabled: StoryObj<typeof GitCommitDialog> = {
-  render: () => (
-    <GitCommitDialog
-      open={true}
-      onOpenChange={() => {}}
-      branchName="main"
-      diffStats={{ filesChanged: 1, linesAdded: 10, linesRemoved: 2 }}
-      commitMessage="Fix typo"
-      onCommitMessageChange={() => {}}
-      nextStep="commit"
-      onNextStepChange={() => {}}
-      prDisabledReason="Checkout a feature branch to create PRs."
       pushDisabledReason={null}
       onContinue={() => {}}
       isSubmitting={false}
@@ -95,7 +67,6 @@ export const CommitSubmitting: StoryObj<typeof GitCommitDialog> = {
       onCommitMessageChange={() => {}}
       nextStep="commit"
       onNextStepChange={() => {}}
-      prDisabledReason={null}
       pushDisabledReason={null}
       onContinue={() => {}}
       isSubmitting={true}
@@ -117,7 +88,6 @@ export const CommitWithError: StoryObj<typeof GitCommitDialog> = {
       onCommitMessageChange={() => {}}
       nextStep="commit"
       onNextStepChange={() => {}}
-      prDisabledReason={null}
       pushDisabledReason={null}
       onContinue={() => {}}
       isSubmitting={false}
@@ -139,7 +109,6 @@ export const CommitWithLongPreCommitError: StoryObj<typeof GitCommitDialog> = {
       onCommitMessageChange={() => {}}
       nextStep="commit"
       onNextStepChange={() => {}}
-      prDisabledReason={null}
       pushDisabledReason={null}
       onContinue={() => {}}
       isSubmitting={false}
@@ -172,7 +141,6 @@ export const CommitGenerating: StoryObj<typeof GitCommitDialog> = {
       onCommitMessageChange={() => {}}
       nextStep="commit"
       onNextStepChange={() => {}}
-      prDisabledReason={null}
       pushDisabledReason={null}
       onContinue={() => {}}
       isSubmitting={false}
@@ -310,103 +278,3 @@ export const PublishSuccess: StoryObj<typeof GitPushDialog> = {
     />
   ),
 };
-
-export const PrCreate: StoryObj<typeof GitPrDialog> = {
-  render: () => (
-    <GitPrDialog
-      open={true}
-      onOpenChange={() => {}}
-      baseBranch="main"
-      headBranch="feature/add-auth"
-      title="Add user authentication"
-      onTitleChange={() => {}}
-      body="Closes #123\n\nAdded login and signup flows."
-      onBodyChange={() => {}}
-      onConfirm={() => {}}
-      isSubmitting={false}
-      error={null}
-      onGenerate={() => {}}
-      isGenerating={false}
-    />
-  ),
-};
-
-export const PrCreateEmpty: StoryObj<typeof GitPrDialog> = {
-  render: () => (
-    <GitPrDialog
-      open={true}
-      onOpenChange={() => {}}
-      baseBranch="main"
-      headBranch="feature/add-auth"
-      title=""
-      onTitleChange={() => {}}
-      body=""
-      onBodyChange={() => {}}
-      onConfirm={() => {}}
-      isSubmitting={false}
-      error={null}
-      onGenerate={() => {}}
-      isGenerating={false}
-    />
-  ),
-};
-
-export const PrGenerating: StoryObj<typeof GitPrDialog> = {
-  render: () => (
-    <GitPrDialog
-      open={true}
-      onOpenChange={() => {}}
-      baseBranch="main"
-      headBranch="feature/add-auth"
-      title=""
-      onTitleChange={() => {}}
-      body=""
-      onBodyChange={() => {}}
-      onConfirm={() => {}}
-      isSubmitting={false}
-      error={null}
-      onGenerate={() => {}}
-      isGenerating={true}
-    />
-  ),
-};
-
-export const PrSubmitting: StoryObj<typeof GitPrDialog> = {
-  render: () => (
-    <GitPrDialog
-      open={true}
-      onOpenChange={() => {}}
-      baseBranch="main"
-      headBranch="feature/add-auth"
-      title="Add user authentication"
-      onTitleChange={() => {}}
-      body="Added login flow"
-      onBodyChange={() => {}}
-      onConfirm={() => {}}
-      isSubmitting={true}
-      error={null}
-      onGenerate={() => {}}
-      isGenerating={false}
-    />
-  ),
-};
-
-export const PrWithError: StoryObj<typeof GitPrDialog> = {
-  render: () => (
-    <GitPrDialog
-      open={true}
-      onOpenChange={() => {}}
-      baseBranch="main"
-      headBranch="feature/add-auth"
-      title="Add user authentication"
-      onTitleChange={() => {}}
-      body="Added login flow"
-      onBodyChange={() => {}}
-      onConfirm={() => {}}
-      isSubmitting={false}
-      error="Failed to create PR: no commits between main and feature/add-auth"
-      onGenerate={() => {}}
-      isGenerating={false}
-    />
-  ),
-};
diff --git a/apps/code/src/renderer/features/git-interaction/components/GitInteractionDialogs.tsx b/apps/code/src/renderer/features/git-interaction/components/GitInteractionDialogs.tsx
index 9b44a4790..9240d0501 100644
--- a/apps/code/src/renderer/features/git-interaction/components/GitInteractionDialogs.tsx
+++ b/apps/code/src/renderer/features/git-interaction/components/GitInteractionDialogs.tsx
@@ -6,7 +6,6 @@ import {
   GitBranch,
   GitCommit,
   GitFork,
-  GitPullRequest,
   Sparkle,
 } from "@phosphor-icons/react";
 import { CheckIcon } from "@radix-ui/react-icons";
@@ -26,7 +25,7 @@ import { useState } from "react";
 
 const ICON_SIZE = 14;
 
-function ErrorContainer({ error }: { error: string }) {
+export function ErrorContainer({ error }: { error: string }) {
   const [copied, setCopied] = useState(false);
 
   const handleCopy = async () => {
@@ -75,6 +74,32 @@ function ErrorContainer({ error }: { error: string }) {
   );
 }
 
+export function GenerateButton({
+  onClick,
+  isGenerating,
+  disabled = false,
+  tooltip = "Generate with AI",
+}: {
+  onClick: () => void;
+  isGenerating: boolean;
+  disabled?: boolean;
+  tooltip?: string;
+}) {
+  return (
+    <Tooltip content={tooltip}>
+      <IconButton
+        size="1"
+        variant="ghost"
+        color="gray"
+        onClick={onClick}
+        disabled={isGenerating || disabled}
+      >
+        {isGenerating ? <Spinner size="1" /> : <Sparkle size={14} />}
+      </IconButton>
+    </Tooltip>
+  );
+}
+
 interface GitDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -221,9 +246,8 @@ interface GitCommitDialogProps {
   diffStats: { filesChanged: number; linesAdded: number; linesRemoved: number };
   commitMessage: string;
   onCommitMessageChange: (value: string) => void;
-  nextStep: "commit" | "commit-push" | "commit-pr";
-  onNextStepChange: (value: "commit" | "commit-push" | "commit-pr") => void;
-  prDisabledReason: string | null;
+  nextStep: "commit" | "commit-push";
+  onNextStepChange: (value: "commit" | "commit-push") => void;
   pushDisabledReason: string | null;
   onContinue: () => void;
   isSubmitting: boolean;
@@ -241,7 +265,6 @@ export function GitCommitDialog({
   onCommitMessageChange,
   nextStep,
   onNextStepChange,
-  prDisabledReason,
   pushDisabledReason,
   onContinue,
   isSubmitting,
@@ -261,12 +284,6 @@ export function GitCommitDialog({
       icon: <CloudArrowUp size={ICON_SIZE} />,
       disabledReason: pushDisabledReason,
     },
-    {
-      id: "commit-pr" as const,
-      label: "Commit and create PR",
-      icon: <GitPullRequest size={ICON_SIZE} />,
-      disabledReason: prDisabledReason,
-    },
   ];
 
   return (
@@ -306,21 +323,12 @@ export function GitCommitDialog({
           <Text size="1" color="gray">
             Message
           </Text>
-          <Tooltip content="Generate commit message with AI">
-            <IconButton
-              size="1"
-              variant="ghost"
-              color="gray"
-              onClick={onGenerateMessage}
-              disabled={isGeneratingMessage || isSubmitting}
-            >
-              {isGeneratingMessage ? (
-                <Spinner size="1" />
-              ) : (
-                <Sparkle size={14} />
-              )}
-            </IconButton>
-          </Tooltip>
+          <GenerateButton
+            onClick={onGenerateMessage}
+            isGenerating={isGeneratingMessage}
+            disabled={isSubmitting}
+            tooltip="Generate commit message with AI"
+          />
         </Flex>
         <TextArea
           value={commitMessage}
@@ -433,103 +441,6 @@ export function GitPushDialog({
   );
 }
 
-interface GitPrDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  baseBranch: string | null;
-  headBranch: string | null;
-  title: string;
-  onTitleChange: (value: string) => void;
-  body: string;
-  onBodyChange: (value: string) => void;
-  onConfirm: () => void;
-  isSubmitting: boolean;
-  error: string | null;
-  onGenerate: () => void;
-  isGenerating: boolean;
-}
-
-export function GitPrDialog({
-  open,
-  onOpenChange,
-  baseBranch,
-  headBranch,
-  title,
-  onTitleChange,
-  body,
-  onBodyChange,
-  onConfirm,
-  isSubmitting,
-  error,
-  onGenerate,
-  isGenerating,
-}: GitPrDialogProps) {
-  return (
-    <GitDialog
-      open={open}
-      onOpenChange={onOpenChange}
-      icon={<GitPullRequest size={ICON_SIZE} />}
-      title="Create PR"
-      error={error}
-      buttonLabel="Create PR"
-      buttonDisabled={!title.trim() || isGenerating}
-      isSubmitting={isSubmitting}
-      onSubmit={onConfirm}
-      maxWidth="500px"
-    >
-      <Flex direction="column" gap="1">
-        <InfoRow label="Base">
-          <BranchBadge branch={baseBranch} />
-        </InfoRow>
-        <InfoRow label="Head">
-          <BranchBadge branch={headBranch} />
-        </InfoRow>
-      </Flex>
-
-      <Flex direction="column" gap="1">
-        <Flex align="center" justify="between">
-          <Text size="1" color="gray">
-            Title
-          </Text>
-          <Tooltip content="Generate title and description with AI">
-            <IconButton
-              size="1"
-              variant="ghost"
-              color="gray"
-              onClick={onGenerate}
-              disabled={isGenerating || isSubmitting}
-            >
-              {isGenerating ? <Spinner size="1" /> : <Sparkle size={14} />}
-            </IconButton>
-          </Tooltip>
-        </Flex>
-        <TextField.Root
-          value={title}
-          onChange={(e) => onTitleChange(e.target.value)}
-          placeholder={isGenerating ? "Generating..." : "PR title"}
-          size="1"
-          autoFocus
-          disabled={isGenerating}
-        />
-      </Flex>
-
-      <Flex direction="column" gap="1">
-        <Text size="1" color="gray">
-          Description
-        </Text>
-        <TextArea
-          value={body}
-          onChange={(e) => onBodyChange(e.target.value)}
-          placeholder={isGenerating ? "Generating..." : "Describe your changes"}
-          size="1"
-          rows={6}
-          disabled={isGenerating}
-        />
-      </Flex>
-    </GitDialog>
-  );
-}
-
 interface GitBranchDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
diff --git a/apps/code/src/renderer/features/git-interaction/components/GitInteractionHeader.tsx b/apps/code/src/renderer/features/git-interaction/components/GitInteractionHeader.tsx
index f9f891453..262dd3b5f 100644
--- a/apps/code/src/renderer/features/git-interaction/components/GitInteractionHeader.tsx
+++ b/apps/code/src/renderer/features/git-interaction/components/GitInteractionHeader.tsx
@@ -1,7 +1,7 @@
+import { CreatePrDialog } from "@features/git-interaction/components/CreatePrDialog";
 import {
   GitBranchDialog,
   GitCommitDialog,
-  GitPrDialog,
   GitPushDialog,
 } from "@features/git-interaction/components/GitInteractionDialogs";
 import { GitInteractionMenu } from "@features/git-interaction/components/GitInteractionMenu";
@@ -46,7 +46,6 @@ export function GitInteractionHeader({ taskId }: GitInteractionHeaderProps) {
         onCommitMessageChange={actions.setCommitMessage}
         nextStep={modals.commitNextStep}
         onNextStepChange={actions.setCommitNextStep}
-        prDisabledReason={state.prDisabledReason}
         pushDisabledReason={state.pushDisabledReason}
         onContinue={actions.runCommit}
         isSubmitting={modals.isSubmitting}
@@ -69,22 +68,17 @@ export function GitInteractionHeader({ taskId }: GitInteractionHeaderProps) {
         isSubmitting={modals.isSubmitting}
       />
 
-      <GitPrDialog
-        open={modals.prOpen}
+      <CreatePrDialog
+        open={modals.createPrOpen}
         onOpenChange={(open) => {
-          if (!open) actions.closePr();
+          if (!open) actions.closeCreatePr();
         }}
-        baseBranch={state.prBaseBranch}
-        headBranch={state.prHeadBranch}
-        title={modals.prTitle}
-        onTitleChange={actions.setPrTitle}
-        body={modals.prBody}
-        onBodyChange={actions.setPrBody}
-        onConfirm={actions.runPr}
+        currentBranch={modals.createPrBaseBranch}
+        diffStats={state.diffStats}
         isSubmitting={modals.isSubmitting}
-        error={modals.prError}
-        onGenerate={actions.generatePrTitleAndBody}
-        isGenerating={modals.isGeneratingPr}
+        onSubmit={actions.runCreatePr}
+        onGenerateCommitMessage={actions.generateCommitMessage}
+        onGeneratePr={actions.generatePrTitleAndBody}
       />
 
       <GitBranchDialog
diff --git a/apps/code/src/renderer/features/git-interaction/hooks/useGitInteraction.ts b/apps/code/src/renderer/features/git-interaction/hooks/useGitInteraction.ts
index 2d47d2fb6..3b4aca6f6 100644
--- a/apps/code/src/renderer/features/git-interaction/hooks/useGitInteraction.ts
+++ b/apps/code/src/renderer/features/git-interaction/hooks/useGitInteraction.ts
@@ -14,19 +14,30 @@ import {
   createBranch,
   getBranchNameInputState,
 } from "@features/git-interaction/utils/branchCreation";
+import { invalidateGitBranchQueries } from "@features/git-interaction/utils/gitCacheKeys";
 import { updateGitCacheFromSnapshot } from "@features/git-interaction/utils/updateGitCache";
 import { trpc, trpcClient } from "@renderer/trpc";
+import { getCloudUrlFromRegion } from "@shared/constants/oauth";
 import { ANALYTICS_EVENTS } from "@shared/types/analytics";
 import { useQueryClient } from "@tanstack/react-query";
 import { track } from "@utils/analytics";
 import { logger } from "@utils/logger";
 import { useMemo } from "react";
+import { sanitizeBranchName } from "../utils/branchNameValidation";
 import { getSuggestedBranchName } from "../utils/getSuggestedBranchName";
 
 const log = logger.scope("git-interaction");
 
 export type { GitMenuAction, GitMenuActionId };
 
+function getLlmCredentials(): { apiKey: string; apiHost: string } | null {
+  const authState = useAuthStore.getState();
+  const apiKey = authState.oauthAccessToken;
+  const cloudRegion = authState.cloudRegion;
+  if (!apiKey || !cloudRegion) return null;
+  return { apiKey, apiHost: getCloudUrlFromRegion(cloudRegion) };
+}
+
 interface GitInteractionState {
   primaryAction: GitMenuAction;
   actions: GitMenuAction[];
@@ -40,7 +51,6 @@ interface GitInteractionState {
   diffStats: { filesChanged: number; linesAdded: number; linesRemoved: number };
   prUrl: string | null;
   pushDisabledReason: string | null;
-  prDisabledReason: string | null;
   isLoading: boolean;
 }
 
@@ -48,7 +58,6 @@ interface GitInteractionActions {
   openAction: (actionId: GitMenuActionId) => void;
   closeCommit: () => void;
   closePush: () => void;
-  closePr: () => void;
   closeBranch: () => void;
   setCommitMessage: (value: string) => void;
   setCommitNextStep: (value: CommitNextStep) => void;
@@ -57,10 +66,13 @@ interface GitInteractionActions {
   setBranchName: (value: string) => void;
   runCommit: () => Promise<void>;
   runPush: () => Promise<void>;
-  runPr: () => Promise<void>;
   runBranch: () => Promise<void>;
+  runCreatePr: () => Promise<void>;
   generateCommitMessage: () => Promise<void>;
   generatePrTitleAndBody: () => Promise<void>;
+  closeCreatePr: () => void;
+  setCreatePrBranchName: (value: string) => void;
+  setCreatePrDraft: (value: boolean) => void;
 }
 
 function trackGitAction(taskId: string, actionType: string, success: boolean) {
@@ -128,34 +140,99 @@ export function useGitInteraction(
     ],
   );
 
-  const openCreatePr = async () => {
-    modal.openPr("", "");
+  const openCreatePr = () => {
+    const prExists = git.prStatus?.prExists ?? false;
+    const needsBranch = !git.isFeatureBranch || prExists;
+    const needsCommit = git.hasChanges;
+    modal.openCreatePr({
+      needsBranch,
+      needsCommit,
+      baseBranch: git.currentBranch,
+      suggestedBranchName: needsBranch
+        ? getSuggestedBranchName(taskId, repoPath)
+        : undefined,
+    });
+  };
+
+  const runCreatePr = async () => {
     if (!repoPath) return;
 
-    const authState = useAuthStore.getState();
-    const apiKey = authState.oauthAccessToken;
-    const cloudRegion = authState.cloudRegion;
-    if (!apiKey || !cloudRegion) return;
+    if (store.createPrNeedsBranch && !store.branchName.trim()) {
+      modal.setCreatePrError("Branch name is required.");
+      return;
+    }
 
-    const apiHost =
-      cloudRegion === "eu"
-        ? "https://eu.posthog.com"
-        : "https://us.posthog.com";
+    modal.setIsSubmitting(true);
+    modal.setCreatePrError(null);
+    modal.setCreatePrStep("idle");
+    modal.setCreatePrFailedStep(null);
+
+    const flowId = crypto.randomUUID();
+
+    const subscription = trpcClient.git.onCreatePrProgress.subscribe(
+      undefined,
+      {
+        onData: (data) => {
+          if (data.flowId !== flowId) return;
+          if (useGitInteractionStore.getState().createPrStep === data.step)
+            return;
+          modal.setCreatePrStep(data.step);
+        },
+      },
+    );
 
-    modal.setIsGeneratingPr(true);
     try {
-      const result = await trpcClient.git.generatePrTitleAndBody.mutate({
+      const credentials = getLlmCredentials() ?? undefined;
+
+      const result = await trpcClient.git.createPr.mutate({
         directoryPath: repoPath,
-        credentials: { apiKey, apiHost },
+        flowId,
+        branchName: store.createPrNeedsBranch
+          ? store.branchName.trim()
+          : undefined,
+        commitMessage: store.commitMessage.trim() || undefined,
+        prTitle: store.prTitle.trim() || undefined,
+        prBody: store.prBody.trim() || undefined,
+        draft: store.createPrDraft || undefined,
+        credentials,
       });
-      if (result.title || result.body) {
-        modal.setPrTitle(result.title);
-        modal.setPrBody(result.body);
+
+      if (!result.success) {
+        trackGitAction(taskId, "create-pr", false);
+        useGitInteractionStore.setState({
+          createPrError: result.message,
+          createPrFailedStep: result.failedStep ?? null,
+          createPrStep: "error",
+        });
+        return;
+      }
+
+      trackGitAction(taskId, "create-pr", true);
+      track(ANALYTICS_EVENTS.PR_CREATED, { task_id: taskId, success: true });
+
+      if (result.state) {
+        updateGitCacheFromSnapshot(queryClient, repoPath, result.state);
       }
+      if (store.createPrNeedsBranch) {
+        invalidateGitBranchQueries(repoPath);
+      }
+
+      if (result.prUrl) {
+        await trpcClient.os.openExternal.mutate({ url: result.prUrl });
+      }
+
+      modal.closeCreatePr();
     } catch (error) {
-      log.error("Failed to auto-generate PR title and body", error);
+      log.error("Create PR flow failed", error);
+      useGitInteractionStore.setState({
+        createPrFailedStep: useGitInteractionStore.getState().createPrStep,
+        createPrError:
+          error instanceof Error ? error.message : "Create PR flow failed.",
+        createPrStep: "error",
+      });
     } finally {
-      modal.setIsGeneratingPr(false);
+      subscription.unsubscribe();
+      modal.setIsSubmitting(false);
     }
   };
 
@@ -186,11 +263,6 @@ export function useGitInteraction(
   const runCommit = async () => {
     if (!repoPath) return;
 
-    if (store.commitNextStep === "commit-pr" && computed.prDisabledReason) {
-      modal.setCommitError(computed.prDisabledReason);
-      return;
-    }
-
     if (store.commitNextStep === "commit-push" && computed.pushDisabledReason) {
       modal.setCommitError(computed.pushDisabledReason);
       return;
@@ -202,11 +274,8 @@ export function useGitInteraction(
     let message = store.commitMessage.trim();
 
     if (!message) {
-      const authState = useAuthStore.getState();
-      const apiKey = authState.oauthAccessToken;
-      const cloudRegion = authState.cloudRegion;
-
-      if (!apiKey || !cloudRegion) {
+      const credentials = getLlmCredentials();
+      if (!credentials) {
         modal.setCommitError(
           "Authentication required to generate commit message.",
         );
@@ -214,15 +283,10 @@ export function useGitInteraction(
         return;
       }
 
-      const apiHost =
-        cloudRegion === "eu"
-          ? "https://eu.posthog.com"
-          : "https://us.posthog.com";
-
       try {
         const generated = await trpcClient.git.generateCommitMessage.mutate({
           directoryPath: repoPath,
-          credentials: { apiKey, apiHost },
+          credentials,
         });
 
         if (!generated.message) {
@@ -268,13 +332,7 @@ export function useGitInteraction(
       modal.setCommitMessage("");
       modal.closeCommit();
 
-      const shouldPush =
-        store.commitNextStep === "commit-push" ||
-        store.commitNextStep === "commit-pr";
-      if (shouldPush) {
-        if (store.commitNextStep === "commit-pr" && !git.prStatus?.prExists) {
-          modal.setOpenPrAfterPush(true);
-        }
+      if (store.commitNextStep === "commit-push") {
         modal.openPush(git.hasRemote ? "push" : "publish");
       }
     } finally {
@@ -316,72 +374,6 @@ export function useGitInteraction(
       }
 
       modal.setPushState("success");
-
-      if (store.openPrAfterPush) {
-        modal.closePush();
-        modal.setOpenPrAfterPush(false);
-        openCreatePr();
-      }
-    } finally {
-      modal.setIsSubmitting(false);
-    }
-  };
-
-  const runPr = async () => {
-    if (!repoPath) return;
-
-    const title = store.prTitle.trim();
-    const body = store.prBody.trim();
-
-    if (!title) {
-      modal.setPrError("PR title is required.");
-      return;
-    }
-
-    modal.setIsSubmitting(true);
-    modal.setPrError(null);
-
-    try {
-      if (!git.hasRemote || git.aheadOfRemote > 0) {
-        const pushFn = git.hasRemote
-          ? trpcClient.git.push
-          : trpcClient.git.publish;
-        const pushResult = await pushFn.mutate({ directoryPath: repoPath });
-
-        if (!pushResult.success) {
-          trackGitAction(taskId, "create-pr", false);
-          modal.setPrError(
-            pushResult.message || "Failed to push before creating PR.",
-          );
-          return;
-        }
-
-        if (pushResult.state) {
-          updateGitCacheFromSnapshot(queryClient, repoPath, pushResult.state);
-        }
-      }
-
-      const result = await trpcClient.git.createPr.mutate({
-        directoryPath: repoPath,
-        title,
-        body,
-      });
-
-      if (!result.success || !result.prUrl) {
-        trackGitAction(taskId, "create-pr", false);
-        modal.setPrError(result.message || "Unable to create PR.");
-        return;
-      }
-
-      trackGitAction(taskId, "create-pr", true);
-      track(ANALYTICS_EVENTS.PR_CREATED, { task_id: taskId, success: true });
-
-      if (result.state) {
-        updateGitCacheFromSnapshot(queryClient, repoPath, result.state);
-      }
-
-      await trpcClient.os.openExternal.mutate({ url: result.prUrl });
-      modal.closePr();
     } finally {
       modal.setIsSubmitting(false);
     }
@@ -390,29 +382,21 @@ export function useGitInteraction(
   const generateCommitMessage = async () => {
     if (!repoPath) return;
 
-    const authState = useAuthStore.getState();
-    const apiKey = authState.oauthAccessToken;
-    const cloudRegion = authState.cloudRegion;
-
-    if (!apiKey || !cloudRegion) {
+    const credentials = getLlmCredentials();
+    if (!credentials) {
       modal.setCommitError(
         "Authentication required to generate commit message.",
       );
       return;
     }
 
-    const apiHost =
-      cloudRegion === "eu"
-        ? "https://eu.posthog.com"
-        : "https://us.posthog.com";
-
     modal.setIsGeneratingCommitMessage(true);
     modal.setCommitError(null);
 
     try {
       const result = await trpcClient.git.generateCommitMessage.mutate({
         directoryPath: repoPath,
-        credentials: { apiKey, apiHost },
+        credentials,
       });
 
       if (result.message) {
@@ -437,38 +421,34 @@ export function useGitInteraction(
   const generatePrTitleAndBody = async () => {
     if (!repoPath) return;
 
-    const authState = useAuthStore.getState();
-    const apiKey = authState.oauthAccessToken;
-    const cloudRegion = authState.cloudRegion;
-
-    if (!apiKey || !cloudRegion) {
-      modal.setPrError("Authentication required to generate PR description.");
+    const credentials = getLlmCredentials();
+    if (!credentials) {
+      modal.setCreatePrError(
+        "Authentication required to generate PR description.",
+      );
       return;
     }
 
-    const apiHost =
-      cloudRegion === "eu"
-        ? "https://eu.posthog.com"
-        : "https://us.posthog.com";
-
     modal.setIsGeneratingPr(true);
-    modal.setPrError(null);
+    modal.setCreatePrError(null);
 
     try {
       const result = await trpcClient.git.generatePrTitleAndBody.mutate({
         directoryPath: repoPath,
-        credentials: { apiKey, apiHost },
+        credentials,
       });
 
       if (result.title || result.body) {
         modal.setPrTitle(result.title);
         modal.setPrBody(result.body);
       } else {
-        modal.setPrError("No changes detected to generate PR description.");
+        modal.setCreatePrError(
+          "No changes detected to generate PR description.",
+        );
       }
     } catch (error) {
       log.error("Failed to generate PR title and body", error);
-      modal.setPrError(
+      modal.setCreatePrError(
         error instanceof Error
           ? error.message
           : "Failed to generate PR description.",
@@ -528,7 +508,6 @@ export function useGitInteraction(
       diffStats: git.diffStats,
       prUrl: computed.prUrl,
       pushDisabledReason: computed.pushDisabledReason,
-      prDisabledReason: computed.prDisabledReason,
       isLoading: git.isLoading,
     },
     modals: store,
@@ -536,7 +515,6 @@ export function useGitInteraction(
       openAction,
       closeCommit: modal.closeCommit,
       closePush: modal.closePush,
-      closePr: modal.closePr,
       closeBranch: modal.closeBranch,
       setCommitMessage: modal.setCommitMessage,
       setCommitNextStep: modal.setCommitNextStep,
@@ -549,10 +527,16 @@ export function useGitInteraction(
       },
       runCommit,
       runPush,
-      runPr,
       runBranch,
+      runCreatePr,
       generateCommitMessage,
       generatePrTitleAndBody,
+      closeCreatePr: modal.closeCreatePr,
+      setCreatePrBranchName: (value: string) => {
+        const sanitized = sanitizeBranchName(value);
+        modal.setBranchName(sanitized);
+      },
+      setCreatePrDraft: modal.setCreatePrDraft,
     },
   };
 }
diff --git a/apps/code/src/renderer/features/git-interaction/state/gitInteractionLogic.test.ts b/apps/code/src/renderer/features/git-interaction/state/gitInteractionLogic.test.ts
index 971558f69..1888d4e22 100644
--- a/apps/code/src/renderer/features/git-interaction/state/gitInteractionLogic.test.ts
+++ b/apps/code/src/renderer/features/git-interaction/state/gitInteractionLogic.test.ts
@@ -29,7 +29,7 @@ function actionIds(result: ReturnType<typeof computeGitInteractionState>) {
 
 describe("computeGitInteractionState", () => {
   describe("on default branch with changes", () => {
-    it("returns branch-here as primary action", () => {
+    it("returns create-pr as primary action", () => {
       const result = computeGitInteractionState(
         makeState({
           currentBranch: "main",
@@ -37,10 +37,10 @@ describe("computeGitInteractionState", () => {
           hasChanges: true,
         }),
       );
-      expect(result.primaryAction.id).toBe("branch-here");
+      expect(result.primaryAction.id).toBe("create-pr");
     });
 
-    it("works without a GitHub remote (defaultBranch null)", () => {
+    it("falls back to branch-here without GitHub remote", () => {
       const result = computeGitInteractionState(
         makeState({
           currentBranch: "main",
@@ -53,7 +53,7 @@ describe("computeGitInteractionState", () => {
       expect(result.primaryAction.id).toBe("branch-here");
     });
 
-    it("includes commit in actions as escape hatch", () => {
+    it("includes create-pr, branch, and commit in actions", () => {
       const result = computeGitInteractionState(
         makeState({
           currentBranch: "main",
@@ -61,7 +61,7 @@ describe("computeGitInteractionState", () => {
           hasChanges: true,
         }),
       );
-      expect(actionIds(result)).toEqual(["branch-here", "commit"]);
+      expect(actionIds(result)).toEqual(["create-pr", "branch-here", "commit"]);
     });
 
     it("disables push and pr with feature branch message", () => {
@@ -73,7 +73,6 @@ describe("computeGitInteractionState", () => {
         }),
       );
       expect(result.pushDisabledReason).toBe("Create a feature branch first.");
-      expect(result.prDisabledReason).toBe("Create a feature branch first.");
     });
 
     it("is not detected as detached head", () => {
@@ -89,7 +88,7 @@ describe("computeGitInteractionState", () => {
   });
 
   describe("on default branch without changes", () => {
-    it("uses normal flow with commit as primary", () => {
+    it("returns branch-here as primary when nothing to ship", () => {
       const result = computeGitInteractionState(
         makeState({
           currentBranch: "main",
@@ -97,11 +96,10 @@ describe("computeGitInteractionState", () => {
           hasChanges: false,
         }),
       );
-      expect(result.primaryAction.id).toBe("commit");
-      expect(result.primaryAction.enabled).toBe(false);
+      expect(result.primaryAction.id).toBe("branch-here");
     });
 
-    it("returns standard three actions", () => {
+    it("returns only branch-here action", () => {
       const result = computeGitInteractionState(
         makeState({
           currentBranch: "main",
@@ -109,12 +107,12 @@ describe("computeGitInteractionState", () => {
           hasChanges: false,
         }),
       );
-      expect(actionIds(result)).toEqual(["commit", "push", "create-pr"]);
+      expect(actionIds(result)).toEqual(["branch-here"]);
     });
   });
 
   describe("on default branch with ahead commits but no changes", () => {
-    it("returns push as primary action", () => {
+    it("returns branch-here as primary", () => {
       const result = computeGitInteractionState(
         makeState({
           currentBranch: "main",
@@ -123,23 +121,43 @@ describe("computeGitInteractionState", () => {
           aheadOfRemote: 2,
         }),
       );
-      expect(result.primaryAction.id).toBe("push");
+      // On default branch without changes, only branch-here is shown
+      expect(result.primaryAction.id).toBe("branch-here");
     });
   });
 
   describe("on feature branch with changes", () => {
-    it("returns commit as primary action", () => {
+    it("returns create-pr as primary action", () => {
       const result = computeGitInteractionState(
         makeState({ currentBranch: "feature/test", hasChanges: true }),
       );
-      expect(result.primaryAction.id).toBe("commit");
+      expect(result.primaryAction.id).toBe("create-pr");
     });
 
-    it("returns standard three actions", () => {
+    it("returns create-pr plus granular actions", () => {
       const result = computeGitInteractionState(
         makeState({ currentBranch: "feature/test", hasChanges: true }),
       );
-      expect(actionIds(result)).toEqual(["commit", "push", "create-pr"]);
+      expect(actionIds(result)).toEqual(["create-pr", "commit", "push"]);
+    });
+  });
+
+  describe("on feature branch with existing PR", () => {
+    it("still offers create-pr for stacking", () => {
+      const result = computeGitInteractionState(
+        makeState({
+          currentBranch: "feature/test",
+          hasChanges: true,
+          prStatus: {
+            prExists: true,
+            baseBranch: "main",
+            headBranch: "feature/test",
+            prUrl: "https://github.com/test/test/pull/1",
+          },
+        }),
+      );
+      // create-pr still enabled — creates a new stacked branch
+      expect(result.primaryAction.id).toBe("create-pr");
     });
   });
 
@@ -161,7 +179,7 @@ describe("computeGitInteractionState", () => {
   });
 
   describe("isFeatureBranch true even on main", () => {
-    it("falls through to normal commit flow", () => {
+    it("returns create-pr as primary", () => {
       const result = computeGitInteractionState(
         makeState({
           currentBranch: "main",
@@ -169,7 +187,7 @@ describe("computeGitInteractionState", () => {
           hasChanges: true,
         }),
       );
-      expect(result.primaryAction.id).toBe("commit");
+      expect(result.primaryAction.id).toBe("create-pr");
     });
   });
 
diff --git a/apps/code/src/renderer/features/git-interaction/state/gitInteractionLogic.ts b/apps/code/src/renderer/features/git-interaction/state/gitInteractionLogic.ts
index c24af1699..71419e965 100644
--- a/apps/code/src/renderer/features/git-interaction/state/gitInteractionLogic.ts
+++ b/apps/code/src/renderer/features/git-interaction/state/gitInteractionLogic.ts
@@ -29,7 +29,6 @@ interface GitComputed {
   actions: GitMenuAction[];
   primaryAction: GitMenuAction;
   pushDisabledReason: string | null;
-  prDisabledReason: string | null;
   prBaseBranch: string | null;
   prHeadBranch: string | null;
   prUrl: string | null;
@@ -95,10 +94,9 @@ function getPushDisabledReason(
   return null;
 }
 
-function getPrDisabledReason(
+function getCreatePrDisabledReason(
   s: GitState,
   repoReason: string | null,
-  opts?: { assumeWillHaveCommits?: boolean },
 ): string | null {
   if (repoReason) return repoReason;
 
@@ -108,18 +106,15 @@ function getPrDisabledReason(
     return "Authenticate GitHub CLI with `gh auth login`";
   if (!s.repoInfo) return "No GitHub remote detected.";
 
-  const isOnDefaultBranch =
-    s.defaultBranch && s.currentBranch === s.defaultBranch;
-  if (isOnDefaultBranch) return "Checkout a feature branch to create PRs.";
-
-  if (s.behind > 0) return "Sync branch with remote first.";
-
-  if (s.prStatus?.prExists) return "PR already exists. Use commit and push.";
-
-  if (!opts?.assumeWillHaveCommits && s.aheadOfDefault === 0) {
-    return "No commits to create PR.";
+  if (s.prStatus?.prExists) {
+    if (!s.hasChanges) return "PR already exists.";
   }
 
+  // Something must be shippable: uncommitted changes or unpushed commits
+  const hasShippableWork =
+    s.hasChanges || s.aheadOfRemote > 0 || s.aheadOfDefault > 0 || !s.hasRemote;
+  if (!hasShippableWork) return "No changes to ship.";
+
   return null;
 }
 
@@ -144,26 +139,31 @@ function getPushAction(
   return makeAction("push", "Push", pushDisabledReason);
 }
 
-function getPrAction(
-  s: GitState,
-  prDisabledReason: string | null,
-): GitMenuAction {
+function getViewPrAction(s: GitState): GitMenuAction | null {
   if (s.prStatus?.prExists) return makeAction("view-pr", "View PR", null);
-  return makeAction("create-pr", "Create PR", prDisabledReason);
+  return null;
+}
+
+function getCreatePrAction(
+  createPrDisabledReason: string | null,
+): GitMenuAction {
+  return makeAction("create-pr", "Create PR", createPrDisabledReason);
 }
 
 function getPrimaryAction(
-  s: GitState,
+  createPrAction: GitMenuAction,
   commitAction: GitMenuAction,
   pushAction: GitMenuAction,
-  prAction: GitMenuAction,
+  viewPrAction: GitMenuAction | null,
 ): GitMenuAction {
-  const allDisabled =
-    !commitAction.enabled && !pushAction.enabled && !prAction.enabled;
-  if (allDisabled) return commitAction;
-  if (s.hasChanges) return commitAction;
-  if (s.aheadOfRemote > 0 || !s.hasRemote || s.behind > 0) return pushAction;
-  return prAction;
+  // createPr handles most cases for getting to a PR (branch creation,
+  // commit, push, etc), so it's always primary when available
+  if (createPrAction.enabled) return createPrAction;
+
+  if (commitAction.enabled) return commitAction;
+  if (pushAction.enabled) return pushAction;
+  if (viewPrAction) return viewPrAction;
+  return commitAction;
 }
 
 export function computeGitInteractionState(input: GitState): GitComputed {
@@ -176,7 +176,6 @@ export function computeGitInteractionState(input: GitState): GitComputed {
       actions: [branchAction],
       primaryAction: branchAction,
       pushDisabledReason: "Create a branch first.",
-      prDisabledReason: "Create a branch first.",
       prBaseBranch: input.defaultBranch,
       prHeadBranch: null,
       prUrl: null,
@@ -186,15 +185,25 @@ export function computeGitInteractionState(input: GitState): GitComputed {
   }
 
   const onDefaultBranch = isOnDefaultBranch(input);
+  const createPrDisabledReason = getCreatePrDisabledReason(input, repoReason);
+  const createPrAction = getCreatePrAction(createPrDisabledReason);
 
-  if (onDefaultBranch && input.hasChanges) {
+  if (onDefaultBranch) {
     const branchAction = makeAction("branch-here", "New branch", repoReason);
     const commitAction = getCommitAction(input, repoReason);
+
+    const actions = input.hasChanges
+      ? [createPrAction, branchAction, commitAction]
+      : [branchAction];
+    const primaryAction =
+      input.hasChanges && createPrAction.enabled
+        ? createPrAction
+        : branchAction;
+
     return {
-      actions: [branchAction, commitAction],
-      primaryAction: branchAction,
+      actions,
+      primaryAction,
       pushDisabledReason: "Create a feature branch first.",
-      prDisabledReason: "Create a feature branch first.",
       prBaseBranch: input.defaultBranch,
       prHeadBranch: input.currentBranch,
       prUrl: input.prStatus?.prUrl ?? null,
@@ -204,27 +213,28 @@ export function computeGitInteractionState(input: GitState): GitComputed {
   }
 
   const pushDisabledReason = getPushDisabledReason(input, repoReason);
-  const prDisabledReason = getPrDisabledReason(input, repoReason);
 
   const commitAction = getCommitAction(input, repoReason);
   const pushAction = getPushAction(input, pushDisabledReason);
-  const prAction = getPrAction(input, prDisabledReason);
+  const viewPrAction = getViewPrAction(input);
   const primaryAction = getPrimaryAction(
-    input,
+    createPrAction,
     commitAction,
     pushAction,
-    prAction,
+    viewPrAction,
   );
 
+  const actions: GitMenuAction[] = [];
+  if (createPrAction.enabled) actions.push(createPrAction);
+  actions.push(commitAction, pushAction);
+  if (viewPrAction) actions.push(viewPrAction);
+
   return {
-    actions: [commitAction, pushAction, prAction],
+    actions,
     primaryAction,
     pushDisabledReason: getPushDisabledReason(input, repoReason, {
       assumeWillHaveCommits: true,
     }),
-    prDisabledReason: getPrDisabledReason(input, repoReason, {
-      assumeWillHaveCommits: true,
-    }),
     prBaseBranch: input.prStatus?.baseBranch ?? input.defaultBranch,
     prHeadBranch: input.prStatus?.headBranch ?? input.currentBranch,
     prUrl: input.prStatus?.prUrl ?? null,
diff --git a/apps/code/src/renderer/features/git-interaction/state/gitInteractionStore.ts b/apps/code/src/renderer/features/git-interaction/state/gitInteractionStore.ts
index 8839fd1f7..457db5d95 100644
--- a/apps/code/src/renderer/features/git-interaction/state/gitInteractionStore.ts
+++ b/apps/code/src/renderer/features/git-interaction/state/gitInteractionStore.ts
@@ -1,5 +1,6 @@
 import type {
   CommitNextStep,
+  CreatePrStep,
   GitMenuActionId,
   PushMode,
   PushState,
@@ -11,7 +12,7 @@ export type { CommitNextStep, PushMode, PushState };
 interface GitInteractionState {
   commitOpen: boolean;
   pushOpen: boolean;
-  prOpen: boolean;
+  createPrOpen: boolean;
   branchOpen: boolean;
   commitMessage: string;
   commitNextStep: CommitNextStep;
@@ -20,12 +21,17 @@ interface GitInteractionState {
   pushError: string | null;
   prTitle: string;
   prBody: string;
-  prError: string | null;
+  createPrStep: CreatePrStep;
+  createPrError: string | null;
+  createPrNeedsBranch: boolean;
+  createPrNeedsCommit: boolean;
+  createPrBaseBranch: string | null;
+  createPrDraft: boolean;
+  createPrFailedStep: CreatePrStep | null;
   commitError: string | null;
   branchName: string;
   branchError: string | null;
   isSubmitting: boolean;
-  openPrAfterPush: boolean;
   isGeneratingCommitMessage: boolean;
   isGeneratingPr: boolean;
 }
@@ -33,7 +39,6 @@ interface GitInteractionState {
 interface GitInteractionActions {
   setCommitOpen: (open: boolean) => void;
   setPushOpen: (open: boolean) => void;
-  setPrOpen: (open: boolean) => void;
   setBranchOpen: (open: boolean) => void;
   setCommitMessage: (value: string) => void;
   setCommitNextStep: (value: CommitNextStep) => void;
@@ -42,22 +47,29 @@ interface GitInteractionActions {
   setPushError: (value: string | null) => void;
   setPrTitle: (value: string) => void;
   setPrBody: (value: string) => void;
-  setPrError: (value: string | null) => void;
   setCommitError: (value: string | null) => void;
   setBranchName: (value: string) => void;
   setBranchError: (value: string | null) => void;
   setIsSubmitting: (value: boolean) => void;
-  setOpenPrAfterPush: (value: boolean) => void;
   setIsGeneratingCommitMessage: (value: boolean) => void;
   setIsGeneratingPr: (value: boolean) => void;
 
   openCommit: (nextStep: CommitNextStep) => void;
   openPush: (mode: PushMode) => void;
-  openPr: (defaultTitle?: string, defaultBody?: string) => void;
+  openCreatePr: (opts: {
+    needsBranch: boolean;
+    needsCommit: boolean;
+    baseBranch: string | null;
+    suggestedBranchName?: string;
+  }) => void;
+  closeCreatePr: () => void;
+  setCreatePrStep: (step: CreatePrStep) => void;
+  setCreatePrError: (error: string | null) => void;
+  setCreatePrDraft: (value: boolean) => void;
+  setCreatePrFailedStep: (step: CreatePrStep | null) => void;
   openBranch: (suggestedName?: string) => void;
   closeCommit: () => void;
   closePush: () => void;
-  closePr: () => void;
   closeBranch: () => void;
 }
 
@@ -68,7 +80,7 @@ export interface GitInteractionStore extends GitInteractionState {
 const initialState: GitInteractionState = {
   commitOpen: false,
   pushOpen: false,
-  prOpen: false,
+  createPrOpen: false,
   branchOpen: false,
   commitMessage: "",
   commitNextStep: "commit",
@@ -77,12 +89,17 @@ const initialState: GitInteractionState = {
   pushError: null,
   prTitle: "",
   prBody: "",
-  prError: null,
+  createPrStep: "idle",
+  createPrError: null,
+  createPrNeedsBranch: false,
+  createPrNeedsCommit: false,
+  createPrBaseBranch: null,
+  createPrDraft: false,
+  createPrFailedStep: null,
   commitError: null,
   branchName: "",
   branchError: null,
   isSubmitting: false,
-  openPrAfterPush: false,
   isGeneratingCommitMessage: false,
   isGeneratingPr: false,
 };
@@ -92,7 +109,6 @@ export const useGitInteractionStore = create<GitInteractionStore>((set) => ({
   actions: {
     setCommitOpen: (open) => set({ commitOpen: open }),
     setPushOpen: (open) => set({ pushOpen: open }),
-    setPrOpen: (open) => set({ prOpen: open }),
     setBranchOpen: (open) => set({ branchOpen: open }),
     setCommitMessage: (value) => set({ commitMessage: value }),
     setCommitNextStep: (value) => set({ commitNextStep: value }),
@@ -101,12 +117,10 @@ export const useGitInteractionStore = create<GitInteractionStore>((set) => ({
     setPushError: (value) => set({ pushError: value }),
     setPrTitle: (value) => set({ prTitle: value }),
     setPrBody: (value) => set({ prBody: value }),
-    setPrError: (value) => set({ prError: value }),
     setCommitError: (value) => set({ commitError: value }),
     setBranchName: (value) => set({ branchName: value }),
     setBranchError: (value) => set({ branchError: value }),
     setIsSubmitting: (value) => set({ isSubmitting: value }),
-    setOpenPrAfterPush: (value) => set({ openPrAfterPush: value }),
     setIsGeneratingCommitMessage: (value) =>
       set({ isGeneratingCommitMessage: value }),
     setIsGeneratingPr: (value) => set({ isGeneratingPr: value }),
@@ -120,13 +134,36 @@ export const useGitInteractionStore = create<GitInteractionStore>((set) => ({
         pushError: null,
         pushOpen: true,
       }),
-    openPr: (defaultTitle, defaultBody) =>
+    openCreatePr: ({
+      needsBranch,
+      needsCommit,
+      baseBranch,
+      suggestedBranchName,
+    }) =>
       set({
-        prTitle: defaultTitle ?? "",
-        prBody: defaultBody ?? "",
-        prError: null,
-        prOpen: true,
+        createPrOpen: true,
+        createPrStep: "idle",
+        createPrError: null,
+        createPrNeedsBranch: needsBranch,
+        createPrNeedsCommit: needsCommit,
+        createPrBaseBranch: baseBranch,
+        createPrDraft: false,
+        createPrFailedStep: null,
+        branchName: suggestedBranchName ?? "",
+        commitMessage: "",
+        prTitle: "",
+        prBody: "",
+        isGeneratingCommitMessage: false,
+        isGeneratingPr: false,
       }),
+    closeCreatePr: () =>
+      set({
+        createPrOpen: false,
+      }),
+    setCreatePrStep: (step) => set({ createPrStep: step }),
+    setCreatePrError: (error) => set({ createPrError: error }),
+    setCreatePrDraft: (value) => set({ createPrDraft: value }),
+    setCreatePrFailedStep: (step) => set({ createPrFailedStep: step }),
     openBranch: (suggestedName) =>
       set({
         branchName: suggestedName ?? "",
@@ -139,10 +176,7 @@ export const useGitInteractionStore = create<GitInteractionStore>((set) => ({
         pushOpen: false,
         pushState: "idle",
         pushError: null,
-        openPrAfterPush: false,
       }),
-    closePr: () =>
-      set({ prOpen: false, prError: null, prTitle: "", prBody: "" }),
     closeBranch: () =>
       set({ branchOpen: false, branchError: null, branchName: "" }),
   },
diff --git a/apps/code/src/renderer/features/git-interaction/types.ts b/apps/code/src/renderer/features/git-interaction/types.ts
index 5b6306265..292f76adf 100644
--- a/apps/code/src/renderer/features/git-interaction/types.ts
+++ b/apps/code/src/renderer/features/git-interaction/types.ts
@@ -14,6 +14,15 @@ export interface GitMenuAction {
   disabledReason: string | null;
 }
 
-export type CommitNextStep = "commit" | "commit-push" | "commit-pr";
+export type CommitNextStep = "commit" | "commit-push";
 export type PushMode = "push" | "sync" | "publish";
 export type PushState = "idle" | "success" | "error";
+
+export type CreatePrStep =
+  | "idle"
+  | "creating-branch"
+  | "committing"
+  | "pushing"
+  | "creating-pr"
+  | "complete"
+  | "error";
diff --git a/apps/code/src/renderer/features/git-interaction/utils/gitFileStatus.ts b/apps/code/src/renderer/features/git-interaction/utils/gitFileStatus.ts
new file mode 100644
index 000000000..9799604ba
--- /dev/null
+++ b/apps/code/src/renderer/features/git-interaction/utils/gitFileStatus.ts
@@ -0,0 +1,25 @@
+import type { GitFileStatus } from "@shared/types";
+
+export type StatusColor = "green" | "orange" | "red" | "blue" | "gray";
+
+export interface StatusIndicator {
+  label: string;
+  fullLabel: string;
+  color: StatusColor;
+}
+
+export function getStatusIndicator(status: GitFileStatus): StatusIndicator {
+  switch (status) {
+    case "added":
+    case "untracked":
+      return { label: "A", fullLabel: "Added", color: "green" };
+    case "deleted":
+      return { label: "D", fullLabel: "Deleted", color: "red" };
+    case "modified":
+      return { label: "M", fullLabel: "Modified", color: "orange" };
+    case "renamed":
+      return { label: "R", fullLabel: "Renamed", color: "blue" };
+    default:
+      return { label: "?", fullLabel: "Unknown", color: "gray" };
+  }
+}
diff --git a/apps/code/src/renderer/features/panels/components/DraggableTab.tsx b/apps/code/src/renderer/features/panels/components/DraggableTab.tsx
index 4264f5b0d..120342b52 100644
--- a/apps/code/src/renderer/features/panels/components/DraggableTab.tsx
+++ b/apps/code/src/renderer/features/panels/components/DraggableTab.tsx
@@ -70,7 +70,7 @@ export const DraggableTab: React.FC<DraggableTabProps> = ({
       e.preventDefault();
 
       let filePath: string | undefined;
-      if (tabData.type === "file" || tabData.type === "diff") {
+      if (tabData.type === "file") {
         filePath = tabData.absolutePath;
       }
 
@@ -94,9 +94,7 @@ export const DraggableTab: React.FC<DraggableTabProps> = ({
         case "external-app":
           if (filePath) {
             const repoPath =
-              tabData.type === "file" || tabData.type === "diff"
-                ? tabData.repoPath
-                : undefined;
+              tabData.type === "file" ? tabData.repoPath : undefined;
             const workspaces = await workspaceApi.getAll();
             const workspace = repoPath
               ? (Object.values(workspaces).find(
diff --git a/apps/code/src/renderer/features/panels/constants/panelConstants.ts b/apps/code/src/renderer/features/panels/constants/panelConstants.ts
index aa990772c..753911836 100644
--- a/apps/code/src/renderer/features/panels/constants/panelConstants.ts
+++ b/apps/code/src/renderer/features/panels/constants/panelConstants.ts
@@ -24,4 +24,5 @@ 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 ce8e6e12e..319141298 100644
--- a/apps/code/src/renderer/features/panels/hooks/usePanelLayoutHooks.tsx
+++ b/apps/code/src/renderer/features/panels/hooks/usePanelLayoutHooks.tsx
@@ -85,7 +85,7 @@ export function useTabInjection(
     () =>
       tabs.map((tab) => {
         let updatedData = tab.data;
-        if (tab.data.type === "file" || tab.data.type === "diff") {
+        if (tab.data.type === "file") {
           const rp = tab.data.relativePath;
           const absolutePath = isAbsolutePath(rp) ? rp : `${repoPath}/${rp}`;
           updatedData = {
@@ -97,7 +97,7 @@ export function useTabInjection(
 
         let icon = tab.icon;
         if (!icon) {
-          if (tab.data.type === "file" || tab.data.type === "diff") {
+          if (tab.data.type === "file") {
             const filename = tab.data.relativePath.split("/").pop() || "";
             icon = <FileIcon filename={filename} size={14} />;
           } else if (tab.data.type === "terminal") {
diff --git a/apps/code/src/renderer/features/panels/index.ts b/apps/code/src/renderer/features/panels/index.ts
index 3c37e5870..0c09a6ec2 100644
--- a/apps/code/src/renderer/features/panels/index.ts
+++ b/apps/code/src/renderer/features/panels/index.ts
@@ -7,10 +7,7 @@ export {
 export { useDragDropHandlers } from "./hooks/useDragDropHandlers";
 export { usePanelLayoutStore } from "./store/panelLayoutStore";
 export { usePanelStore } from "./store/panelStore";
-export {
-  isDiffTabActiveInTree,
-  isFileTabActiveInTree,
-} from "./store/panelStoreHelpers";
+export { isFileTabActiveInTree } from "./store/panelStoreHelpers";
 
 export type {
   GroupId,
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 c9883102d..443aa0337 100644
--- a/apps/code/src/renderer/features/panels/store/panelLayoutStore.test.ts
+++ b/apps/code/src/renderer/features/panels/store/panelLayoutStore.test.ts
@@ -19,7 +19,6 @@ vi.mock("@utils/electronStorage", () => ({
   },
 }));
 
-import { useSettingsStore } from "@features/settings/stores/settingsStore";
 import { usePanelLayoutStore } from "./panelLayoutStore";
 
 describe("panelLayoutStore", () => {
@@ -645,125 +644,5 @@ describe("panelLayoutStore", () => {
         fileTabs?.find((t) => t.id === "file-src/Other.tsx")?.isPreview,
       ).toBe(true);
     });
-
-    it("openDiffByMode creates preview tab by default", () => {
-      usePanelLayoutStore
-        .getState()
-        .openDiffByMode("task-1", "src/App.tsx", "modified");
-
-      const panel = findPanelById(getPanelTree("task-1"), "main-panel");
-      const diffTab = panel?.content.tabs.find((t: { id: string }) =>
-        t.id.startsWith("diff-"),
-      );
-      expect(diffTab?.isPreview).toBe(true);
-    });
-
-    it("openDiffByMode creates permanent tab when asPreview is false", () => {
-      usePanelLayoutStore
-        .getState()
-        .openDiffByMode("task-1", "src/App.tsx", "modified", false);
-
-      const panel = findPanelById(getPanelTree("task-1"), "main-panel");
-      const diffTab = panel?.content.tabs.find((t: { id: string }) =>
-        t.id.startsWith("diff-"),
-      );
-      expect(diffTab?.isPreview).toBe(false);
-    });
-  });
-
-  describe("openDiffByMode", () => {
-    beforeEach(() => {
-      usePanelLayoutStore.getState().initializeTask("task-1");
-    });
-
-    it("opens diff in split pane when mode is split", () => {
-      useSettingsStore.setState({ diffOpenMode: "split" });
-
-      usePanelLayoutStore
-        .getState()
-        .openDiffByMode("task-1", "src/App.tsx", "modified");
-
-      const tree = getPanelTree("task-1");
-      expect(tree.type).toBe("group");
-    });
-
-    it("opens diff in main panel when mode is same-pane", () => {
-      useSettingsStore.setState({ diffOpenMode: "same-pane" });
-
-      usePanelLayoutStore
-        .getState()
-        .openDiffByMode("task-1", "src/App.tsx", "modified");
-
-      const tree = getPanelTree("task-1");
-      expect(tree.type).toBe("leaf");
-      const panel = findPanelById(tree, "main-panel");
-      const diffTab = panel?.content.tabs.find((t: { id: string }) =>
-        t.id.startsWith("diff-"),
-      );
-      expect(diffTab).toBeDefined();
-    });
-
-    it("opens diff in focused panel when mode is last-active-pane", () => {
-      useSettingsStore.setState({ diffOpenMode: "last-active-pane" });
-
-      usePanelLayoutStore
-        .getState()
-        .splitPanel("task-1", "shell", "main-panel", "main-panel", "right");
-
-      const tree = getPanelTree("task-1");
-      if (tree.type !== "group") throw new Error("Expected group");
-      const newPanelId = tree.children[1].id;
-      usePanelLayoutStore.getState().setFocusedPanel("task-1", newPanelId);
-
-      usePanelLayoutStore
-        .getState()
-        .openDiffByMode("task-1", "src/App.tsx", "modified");
-
-      const updatedTree = getPanelTree("task-1");
-      if (updatedTree.type !== "group") throw new Error("Expected group");
-      const secondPanel = findPanelById(updatedTree, newPanelId);
-      const diffTab = secondPanel?.content.tabs.find((t: { id: string }) =>
-        t.id.startsWith("diff-"),
-      );
-      expect(diffTab).toBeDefined();
-      expect(secondPanel?.content.activeTabId).toBe(diffTab?.id);
-    });
-
-    it("opens diff in split on wide window when mode is auto", () => {
-      useSettingsStore.setState({ diffOpenMode: "auto" });
-
-      Object.defineProperty(window, "outerWidth", {
-        value: 1440,
-        writable: true,
-      });
-
-      usePanelLayoutStore
-        .getState()
-        .openDiffByMode("task-1", "src/App.tsx", "modified");
-
-      const tree = getPanelTree("task-1");
-      expect(tree.type).toBe("group");
-    });
-
-    it("opens diff in same pane on narrow window when mode is auto", () => {
-      useSettingsStore.setState({ diffOpenMode: "auto" });
-
-      Object.defineProperty(window, "outerWidth", {
-        value: 1200,
-        writable: true,
-      });
-
-      usePanelLayoutStore
-        .getState()
-        .openDiffByMode("task-1", "src/App.tsx", "modified");
-
-      const tree = getPanelTree("task-1");
-      expect(tree.type).toBe("leaf");
-      const panel = findPanelById(tree, "main-panel");
-      const diffTab = panel?.content.tabs.find((t: { id: string }) =>
-        t.id.startsWith("diff-"),
-      );
-      expect(diffTab).toBeDefined();
-    });
   });
 });
diff --git a/apps/code/src/renderer/features/panels/store/panelLayoutStore.ts b/apps/code/src/renderer/features/panels/store/panelLayoutStore.ts
index 822601a28..63ca90930 100644
--- a/apps/code/src/renderer/features/panels/store/panelLayoutStore.ts
+++ b/apps/code/src/renderer/features/panels/store/panelLayoutStore.ts
@@ -1,3 +1,4 @@
+import { useReviewStore } from "@features/code-review/stores/reviewStore";
 import { useSettingsStore } from "@features/settings/stores/settingsStore";
 import { ANALYTICS_EVENTS } from "@shared/types/analytics";
 import { track } from "@utils/analytics";
@@ -11,11 +12,9 @@ import {
   addNewTabToPanel,
   applyCleanupWithFallback,
   createCloudDiffTabId,
-  createDiffTabId,
   createFileTabId,
   generatePanelId,
   getCloudDiffTabIdsForFile,
-  getDiffTabIdsForFile,
   getLeafPanel,
   getSplitConfig,
   selectNextTabAfterClose,
@@ -80,12 +79,7 @@ export interface PanelLayoutStore {
     filePath: string,
     asPreview?: boolean,
   ) => void;
-  openDiffByMode: (
-    taskId: string,
-    filePath: string,
-    status?: string,
-    asPreview?: boolean,
-  ) => void;
+  openReview: (taskId: string, scrollToFile?: string) => void;
   openCloudDiffByMode: (
     taskId: string,
     filePath: string,
@@ -161,6 +155,14 @@ 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",
@@ -459,10 +461,12 @@ export const usePanelLayoutStore = createWithEqualityFn<PanelLayoutStore>()(
         });
       },
 
-      openDiffByMode: (taskId, filePath, status, asPreview = true) => {
-        const tabId = createDiffTabId(filePath, status);
-        set((state) => openTabByDiffMode(state, taskId, tabId, asPreview));
-        trackDiffViewed(taskId, filePath, status);
+      openReview: (taskId, scrollToFile) => {
+        set((state) => openTab(state, taskId, "review", false));
+        if (scrollToFile) {
+          useReviewStore.getState().setScrollTarget(scrollToFile);
+          trackDiffViewed(taskId, scrollToFile);
+        }
       },
 
       openCloudDiffByMode: (taskId, filePath, status, asPreview = true) => {
@@ -612,7 +616,6 @@ export const usePanelLayoutStore = createWithEqualityFn<PanelLayoutStore>()(
 
         const tabIds = [
           createFileTabId(filePath),
-          ...getDiffTabIdsForFile(filePath),
           ...getCloudDiffTabIdsForFile(filePath),
         ];
 
@@ -628,10 +631,7 @@ export const usePanelLayoutStore = createWithEqualityFn<PanelLayoutStore>()(
         const layout = get().taskLayouts[taskId];
         if (!layout) return;
 
-        const tabIds = [
-          ...getDiffTabIdsForFile(filePath),
-          ...getCloudDiffTabIdsForFile(filePath),
-        ];
+        const tabIds = getCloudDiffTabIdsForFile(filePath);
 
         for (const tabId of tabIds) {
           const tabLocation = findTabInTree(layout.panelTree, tabId);
diff --git a/apps/code/src/renderer/features/panels/store/panelStoreHelpers.ts b/apps/code/src/renderer/features/panels/store/panelStoreHelpers.ts
index 0e8b16afb..380f4c500 100644
--- a/apps/code/src/renderer/features/panels/store/panelStoreHelpers.ts
+++ b/apps/code/src/renderer/features/panels/store/panelStoreHelpers.ts
@@ -7,7 +7,7 @@ import type { GroupPanel, LeafPanel, PanelNode, Tab } from "./panelTypes";
 export const DEFAULT_FALLBACK_TAB = DEFAULT_TAB_IDS.LOGS;
 
 // Tab ID utilities
-export type TabType = "file" | "diff" | "cloud-diff" | "system";
+export type TabType = "file" | "cloud-diff" | "system";
 
 const DIFF_STATUSES = [
   "modified",
@@ -26,17 +26,6 @@ export function createFileTabId(filePath: string): string {
   return `file-${filePath}`;
 }
 
-export function createDiffTabId(filePath: string, status?: string): string {
-  if (status) {
-    return `diff-${status}:${filePath}`;
-  }
-  return `diff-${filePath}`;
-}
-
-export function getDiffTabIdsForFile(filePath: string): string[] {
-  return DIFF_STATUSES.map((s) => createDiffTabId(filePath, s));
-}
-
 export function getCloudDiffTabIdsForFile(filePath: string): string[] {
   return DIFF_STATUSES.map((s) => createCloudDiffTabId(filePath, s));
 }
@@ -59,17 +48,6 @@ export function parseTabId(tabId: string): ParsedTabId & { status?: string } {
     const value = colonIndex !== -1 ? rest.slice(colonIndex + 1) : rest;
     return { type: "cloud-diff", value, status };
   }
-  if (tabId.startsWith("diff-")) {
-    const rest = tabId.slice(5);
-    // Check for status:path format
-    const colonIndex = rest.indexOf(":");
-    if (colonIndex !== -1) {
-      const status = rest.slice(0, colonIndex);
-      const value = rest.slice(colonIndex + 1);
-      return { type: "diff", value, status };
-    }
-    return { type: "diff", value: rest };
-  }
   return { type: "system", value: tabId };
 }
 
@@ -88,11 +66,12 @@ function getStatusLabel(status?: string): 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;
   }
-  if (parsed.type === "diff" || parsed.type === "cloud-diff") {
+  if (parsed.type === "cloud-diff") {
     const fileName = parsed.value.split("/").pop() || parsed.value;
     const label = getStatusLabel(parsed.status);
     return `${fileName} (${label})`;
@@ -187,15 +166,6 @@ export function createNewTab(
         repoPath: "", // Will be populated by tab injection
       };
       break;
-    case "diff":
-      data = {
-        type: "diff",
-        relativePath: parsed.value,
-        absolutePath: "", // Will be populated by tab injection
-        repoPath: "", // Will be populated by tab injection
-        status: (parsed.status || "modified") as GitFileStatus,
-      };
-      break;
     case "cloud-diff":
       data = {
         type: "cloud-diff",
@@ -204,7 +174,9 @@ export function createNewTab(
       };
       break;
     case "system":
-      if (tabId === "logs") {
+      if (tabId === "review") {
+        data = { type: "review" };
+      } else if (tabId === "logs") {
         data = { type: "logs" };
       } else if (tabId.startsWith("shell")) {
         data = {
@@ -325,15 +297,6 @@ function isTabActiveInTree(tree: PanelNode, tabId: string): boolean {
   return tree.children.some((child) => isTabActiveInTree(child, tabId));
 }
 
-export function isDiffTabActiveInTree(
-  tree: PanelNode,
-  filePath: string,
-  status?: string,
-): boolean {
-  const tabId = createDiffTabId(filePath, status);
-  return isTabActiveInTree(tree, tabId);
-}
-
 export function isCloudDiffTabActiveInTree(
   tree: PanelNode,
   filePath: string,
diff --git a/apps/code/src/renderer/features/panels/store/panelTypes.ts b/apps/code/src/renderer/features/panels/store/panelTypes.ts
index 77bc2d723..c95c9b89a 100644
--- a/apps/code/src/renderer/features/panels/store/panelTypes.ts
+++ b/apps/code/src/renderer/features/panels/store/panelTypes.ts
@@ -15,13 +15,6 @@ export type TabData =
       absolutePath: string;
       repoPath: string;
     }
-  | {
-      type: "diff";
-      relativePath: string;
-      absolutePath: string;
-      repoPath: string;
-      status: GitFileStatus;
-    }
   | {
       type: "terminal";
       terminalId: string;
@@ -42,6 +35,9 @@ export type TabData =
   | {
       type: "logs";
     }
+  | {
+      type: "review";
+    }
   | {
       type: "other";
     };
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 24a53391a..9d069c8a6 100644
--- a/apps/code/src/renderer/features/task-detail/components/ChangesPanel.tsx
+++ b/apps/code/src/renderer/features/task-detail/components/ChangesPanel.tsx
@@ -1,18 +1,17 @@
 import { FileIcon } from "@components/ui/FileIcon";
 import { PanelMessage } from "@components/ui/PanelMessage";
 import { Tooltip } from "@components/ui/Tooltip";
+import { useReviewStore } from "@features/code-review/stores/reviewStore";
 import { useExternalApps } from "@features/external-apps/hooks/useExternalApps";
 import {
   useCloudBranchChangedFiles,
   useCloudPrChangedFiles,
   useGitQueries,
 } from "@features/git-interaction/hooks/useGitQueries";
+import { getStatusIndicator } from "@features/git-interaction/utils/gitFileStatus";
 import { updateGitCacheFromSnapshot } from "@features/git-interaction/utils/updateGitCache";
 import { usePanelLayoutStore } from "@features/panels/store/panelLayoutStore";
-import {
-  isCloudDiffTabActiveInTree,
-  isDiffTabActiveInTree,
-} from "@features/panels/store/panelStoreHelpers";
+import { isCloudDiffTabActiveInTree } from "@features/panels/store/panelStoreHelpers";
 import { usePendingPermissionsForTask } from "@features/sessions/stores/sessionStore";
 import { useCwd } from "@features/sidebar/hooks/useCwd";
 import { useCloudRunState } from "@features/task-detail/hooks/useCloudRunState";
@@ -36,7 +35,7 @@ import {
 } from "@radix-ui/themes";
 import { useWorkspace } from "@renderer/features/workspace/hooks/useWorkspace";
 import { trpcClient } from "@renderer/trpc/client";
-import type { ChangedFile, GitFileStatus, Task } from "@shared/types";
+import type { ChangedFile, Task } from "@shared/types";
 import { useQueryClient } from "@tanstack/react-query";
 import { showMessageBox } from "@utils/dialog";
 import { handleExternalAppAction } from "@utils/handleExternalAppAction";
@@ -56,26 +55,6 @@ interface ChangedFileItemProps {
   mainRepoPath?: string;
 }
 
-function getStatusIndicator(status: GitFileStatus): {
-  label: string;
-  fullLabel: string;
-  color: "green" | "orange" | "red" | "blue" | "gray";
-} {
-  switch (status) {
-    case "added":
-    case "untracked":
-      return { label: "A", fullLabel: "Added", color: "green" };
-    case "deleted":
-      return { label: "D", fullLabel: "Deleted", color: "red" };
-    case "modified":
-      return { label: "M", fullLabel: "Modified", color: "orange" };
-    case "renamed":
-      return { label: "R", fullLabel: "Renamed", color: "blue" };
-    default:
-      return { label: "?", fullLabel: "Unknown", color: "gray" };
-  }
-}
-
 function getDiscardInfo(
   file: ChangedFile,
   fileName: string,
@@ -121,10 +100,7 @@ function ChangedFileItem({
   isActive,
   mainRepoPath,
 }: ChangedFileItemProps) {
-  const openDiffByMode = usePanelLayoutStore((state) => state.openDiffByMode);
-  const closeDiffTabsForFile = usePanelLayoutStore(
-    (state) => state.closeDiffTabsForFile,
-  );
+  const openReview = usePanelLayoutStore((state) => state.openReview);
   const queryClient = useQueryClient();
   const { detectedApps } = useExternalApps();
   const workspace = useWorkspace(taskId);
@@ -140,11 +116,11 @@ function ChangedFileItem({
   const indicator = getStatusIndicator(file.status);
 
   const handleClick = () => {
-    openDiffByMode(taskId, file.path, file.status);
+    openReview(taskId, file.path);
   };
 
   const handleDoubleClick = () => {
-    openDiffByMode(taskId, file.path, file.status, false);
+    openReview(taskId, file.path);
   };
 
   const workspaceContext = {
@@ -211,8 +187,6 @@ function ChangedFileItem({
       fileStatus: file.status,
     });
 
-    closeDiffTabsForFile(taskId, file.path);
-
     if (discardResult.state) {
       updateGitCacheFromSnapshot(queryClient, repoPath, discardResult.state);
     }
@@ -625,31 +599,25 @@ export function ChangesPanel({ taskId, task }: ChangesPanelProps) {
 function LocalChangesPanel({ taskId, task: _task }: ChangesPanelProps) {
   const workspace = useWorkspace(taskId);
   const repoPath = useCwd(taskId);
-  const layout = usePanelLayoutStore((state) => state.getLayout(taskId));
-  const openDiffByMode = usePanelLayoutStore((state) => state.openDiffByMode);
+  const openReview = usePanelLayoutStore((state) => state.openReview);
+  const activeFilePath = useReviewStore((s) => s.activeFilePath);
   const pendingPermissions = usePendingPermissionsForTask(taskId);
   const hasPendingPermissions = pendingPermissions.size > 0;
 
   const { changedFiles, changesLoading: isLoading } = useGitQueries(repoPath);
 
-  const getActiveIndex = useCallback((): number => {
-    if (!layout) return -1;
-    return changedFiles.findIndex((file) =>
-      isDiffTabActiveInTree(layout.panelTree, file.path, file.status),
-    );
-  }, [layout, changedFiles]);
+  const activeIndex = changedFiles.findIndex((f) => f.path === activeFilePath);
 
   const handleKeyNavigation = useCallback(
     (direction: "up" | "down") => {
       if (changedFiles.length === 0) return;
 
-      const currentIndex = getActiveIndex();
       const startIndex =
-        currentIndex === -1
+        activeIndex === -1
           ? direction === "down"
             ? -1
             : changedFiles.length
-          : currentIndex;
+          : activeIndex;
       const newIndex =
         direction === "up"
           ? Math.max(0, startIndex - 1)
@@ -657,10 +625,10 @@ function LocalChangesPanel({ taskId, task: _task }: ChangesPanelProps) {
 
       const file = changedFiles[newIndex];
       if (file) {
-        openDiffByMode(taskId, file.path, file.status);
+        openReview(taskId, file.path);
       }
     },
-    [changedFiles, getActiveIndex, openDiffByMode, taskId],
+    [changedFiles, activeIndex, openReview, taskId],
   );
 
   useHotkeys(
@@ -676,11 +644,6 @@ function LocalChangesPanel({ taskId, task: _task }: ChangesPanelProps) {
     [handleKeyNavigation, hasPendingPermissions],
   );
 
-  const isFileActive = (file: ChangedFile): boolean => {
-    if (!layout) return false;
-    return isDiffTabActiveInTree(layout.panelTree, file.path, file.status);
-  };
-
   if (!repoPath) {
     return <PanelMessage>No repository path available</PanelMessage>;
   }
@@ -704,13 +667,13 @@ function LocalChangesPanel({ taskId, task: _task }: ChangesPanelProps) {
   return (
     <Box height="100%" overflowY="auto" py="2">
       <Flex direction="column">
-        {changedFiles.map((file) => (
+        {changedFiles.map((file, index) => (
           <ChangedFileItem
             key={file.path}
             file={file}
             taskId={taskId}
             repoPath={repoPath}
-            isActive={isFileActive(file)}
+            isActive={index === activeIndex}
             mainRepoPath={workspace?.folderPath}
           />
         ))}
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 fa6124ef5..a53a28357 100644
--- a/apps/code/src/renderer/features/task-detail/components/TabContentRenderer.tsx
+++ b/apps/code/src/renderer/features/task-detail/components/TabContentRenderer.tsx
@@ -1,6 +1,6 @@
 import { CloudDiffEditorPanel } from "@features/code-editor/components/CloudDiffEditorPanel";
 import { CodeEditorPanel } from "@features/code-editor/components/CodeEditorPanel";
-import { DiffEditorPanel } from "@features/code-editor/components/DiffEditorPanel";
+import { ReviewPage } from "@features/code-review/components/ReviewPage";
 import type { Tab } from "@features/panels/store/panelTypes";
 import { ActionPanel } from "@features/task-detail/components/ActionPanel";
 import { ChangesPanel } from "@features/task-detail/components/ChangesPanel";
@@ -40,15 +40,6 @@ export function TabContentRenderer({
         />
       );
 
-    case "diff":
-      return (
-        <DiffEditorPanel
-          taskId={taskId}
-          task={task}
-          absolutePath={data.absolutePath}
-        />
-      );
-
     case "action":
       return (
         <ActionPanel
@@ -67,6 +58,9 @@ export function TabContentRenderer({
         />
       );
 
+    case "review":
+      return <ReviewPage taskId={taskId} task={task} />;
+
     case "other":
       // Handle system tabs by ID
       // TODO: These should all have their own type as well
diff --git a/packages/git/src/queries.ts b/packages/git/src/queries.ts
index 7dd960f8b..1a01d2186 100644
--- a/packages/git/src/queries.ts
+++ b/packages/git/src/queries.ts
@@ -143,7 +143,7 @@ export async function getStatus(
   return manager.executeRead(
     baseDir,
     async (git) => {
-      const status = await git.status(["--untracked-files=normal"]);
+      const status = await git.status(["--untracked-files=all"]);
       return {
         isClean: status.isClean(),
         staged: status.staged,
@@ -339,7 +339,7 @@ export async function getChangedFiles(
           } catch {}
         }
 
-        const status = await git.status(["--untracked-files=normal"]);
+        const status = await git.status(["--untracked-files=all"]);
         for (const file of [
           ...status.modified,
           ...status.created,
@@ -430,7 +430,7 @@ export async function getChangedFilesDetailed(
       try {
         const [diffSummary, status] = await Promise.all([
           git.diffSummary(["-M", "HEAD"]),
-          git.status(["--untracked-files=normal"]),
+          git.status(["--untracked-files=all"]),
         ]);
 
         const seenPaths = new Set<string>();
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 424e704ab..24e62d15f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -151,6 +151,9 @@ importers:
       '@phosphor-icons/react':
         specifier: ^2.1.10
         version: 2.1.10(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@pierre/diffs':
+        specifier: ^1.1.7
+        version: 1.1.7(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@posthog/agent':
         specifier: workspace:*
         version: link:../../packages/agent
@@ -3412,6 +3415,16 @@ packages:
       react: '>= 16.8'
       react-dom: '>= 16.8'
 
+  '@pierre/diffs@1.1.7':
+    resolution: {integrity: sha512-FWs2hHrjZPXmJl6ewnfFzOjNEM3aeSH1CB8ynZg4SOg95Wc5AxomeyJJhXf44PK9Cc+PNm1CgsJ1IvOdfgHyHA==}
+    peerDependencies:
+      react: ^18.3.1 || ^19.0.0
+      react-dom: ^18.3.1 || ^19.0.0
+
+  '@pierre/theme@0.0.22':
+    resolution: {integrity: sha512-ePUIdQRNGjrveELTU7fY89Xa7YGHHEy5Po5jQy/18lm32eRn96+tnYJEtFooGdffrx55KBUtOXfvVy/7LDFFhA==}
+    engines: {vscode: ^1.0.0}
+
   '@pixi/colord@2.9.6':
     resolution: {integrity: sha512-nezytU2pw587fQstUu1AsJZDVEynjskwOL+kibwcdxsMBFqPsFFNA7xl0ii/gXuDi6M0xj3mfRJj8pBSc2jCfA==}
 
@@ -4492,6 +4505,30 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@shikijs/core@3.23.0':
+    resolution: {integrity: sha512-NSWQz0riNb67xthdm5br6lAkvpDJRTgB36fxlo37ZzM2yq0PQFFzbd8psqC2XMPgCzo1fW6cVi18+ArJ44wqgA==}
+
+  '@shikijs/engine-javascript@3.23.0':
+    resolution: {integrity: sha512-aHt9eiGFobmWR5uqJUViySI1bHMqrAgamWE1TYSUoftkAeCCAiGawPMwM+VCadylQtF4V3VNOZ5LmfItH5f3yA==}
+
+  '@shikijs/engine-oniguruma@3.23.0':
+    resolution: {integrity: sha512-1nWINwKXxKKLqPibT5f4pAFLej9oZzQTsby8942OTlsJzOBZ0MWKiwzMsd+jhzu8YPCHAswGnnN1YtQfirL35g==}
+
+  '@shikijs/langs@3.23.0':
+    resolution: {integrity: sha512-2Ep4W3Re5aB1/62RSYQInK9mM3HsLeB91cHqznAJMuylqjzNVAVCMnNWRHFtcNHXsoNRayP9z1qj4Sq3nMqYXg==}
+
+  '@shikijs/themes@3.23.0':
+    resolution: {integrity: sha512-5qySYa1ZgAT18HR/ypENL9cUSGOeI2x+4IvYJu4JgVJdizn6kG4ia5Q1jDEOi7gTbN4RbuYtmHh0W3eccOrjMA==}
+
+  '@shikijs/transformers@3.23.0':
+    resolution: {integrity: sha512-F9msZVxdF+krQNSdQ4V+Ja5QemeAoTQ2jxt7nJCwhDsdF1JWS3KxIQXA3lQbyKwS3J61oHRUSv4jYWv3CkaKTQ==}
+
+  '@shikijs/types@3.23.0':
+    resolution: {integrity: sha512-3JZ5HXOZfYjsYSk0yPwBrkupyYSLpAE26Qc0HLghhZNGTZg/SKxXIIgoxOpmmeQP0RRSDJTk1/vPfw9tbw+jSQ==}
+
+  '@shikijs/vscode-textmate@10.0.2':
+    resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
+
   '@sinclair/typebox-codegen@0.11.1':
     resolution: {integrity: sha512-Bckbrf1sJFTIVD88PvI0vWUfE3Sh/6pwu6Jov+6xyMrEqnabOxEFAmPSDWjB1FGPL5C1/HfdScwa1imwAtGi9w==}
 
@@ -6107,6 +6144,10 @@ packages:
   didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
 
+  diff@8.0.3:
+    resolution: {integrity: sha512-qejHi7bcSD4hQAZE0tNAawRK1ZtafHDmMTMkrrIGgSLl7hTnQHmKCeB45xAcbfTqK2zowkM3j3bHt/4b/ARbYQ==}
+    engines: {node: '>=0.3.1'}
+
   dir-compare@4.2.0:
     resolution: {integrity: sha512-2xMCmOoMrdQIPHdsTawECdNPwlVFB9zGcz3kuhmBO6U3oU+UQjsue0i8ayLKpgBcm+hcXPMVSGUN9d+pvJ6+VQ==}
 
@@ -7160,6 +7201,9 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  hast-util-to-html@9.0.5:
+    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
+
   hast-util-to-jsx-runtime@2.3.6:
     resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==}
 
@@ -7202,6 +7246,9 @@ packages:
   html-url-attributes@3.0.1:
     resolution: {integrity: sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==}
 
+  html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
+
   http-cache-semantics@4.2.0:
     resolution: {integrity: sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==}
 
@@ -7943,6 +7990,9 @@ packages:
     resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
     engines: {node: '>=12'}
 
+  lru_map@0.4.1:
+    resolution: {integrity: sha512-I+lBvqMMFfqaV8CJCISjI3wbjmwVu/VyOoU7+qtu9d7ioW5klMgsTTiUOUp+DJvfTTzKXoPbyC6YfgkNcyPSOg==}
+
   lz-string@1.5.0:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
@@ -8594,6 +8644,12 @@ packages:
     resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
     engines: {node: '>=18'}
 
+  oniguruma-parser@0.12.1:
+    resolution: {integrity: sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==}
+
+  oniguruma-to-es@4.3.5:
+    resolution: {integrity: sha512-Zjygswjpsewa0NLTsiizVuMQZbp0MDyM6lIt66OxsF21npUDlzpHi1Mgb/qhQdkb+dWFTzJmFbEWdvZgRho8eQ==}
+
   open@10.2.0:
     resolution: {integrity: sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==}
     engines: {node: '>=18'}
@@ -9455,6 +9511,15 @@ packages:
   regenerator-runtime@0.13.11:
     resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
 
+  regex-recursion@6.0.2:
+    resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==}
+
+  regex-utilities@2.3.0:
+    resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
+
+  regex@6.1.0:
+    resolution: {integrity: sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==}
+
   regexpu-core@6.4.0:
     resolution: {integrity: sha512-0ghuzq67LI9bLXpOX/ISfve/Mq33a4aFRzoQYhnnok1JOFpmE/A2TBGkNVenOGEeSBCjIiWcc6MVOG5HEQv0sA==}
     engines: {node: '>=4'}
@@ -9714,6 +9779,9 @@ packages:
     resolution: {integrity: sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==}
     engines: {node: '>= 0.4'}
 
+  shiki@3.23.0:
+    resolution: {integrity: sha512-55Dj73uq9ZXL5zyeRPzHQsK7Nbyt6Y10k5s7OjuFZGMhpp4r/rsLBH0o/0fstIzX1Lep9VxefWljK/SKCzygIA==}
+
   side-channel-list@1.0.0:
     resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
     engines: {node: '>= 0.4'}
@@ -14263,6 +14331,19 @@ snapshots:
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
 
+  '@pierre/diffs@1.1.7(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@pierre/theme': 0.0.22
+      '@shikijs/transformers': 3.23.0
+      diff: 8.0.3
+      hast-util-to-html: 9.0.5
+      lru_map: 0.4.1
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      shiki: 3.23.0
+
+  '@pierre/theme@0.0.22': {}
+
   '@pixi/colord@2.9.6': {}
 
   '@pkgjs/parseargs@0.11.0':
@@ -15400,6 +15481,44 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.57.1':
     optional: true
 
+  '@shikijs/core@3.23.0':
+    dependencies:
+      '@shikijs/types': 3.23.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
+
+  '@shikijs/engine-javascript@3.23.0':
+    dependencies:
+      '@shikijs/types': 3.23.0
+      '@shikijs/vscode-textmate': 10.0.2
+      oniguruma-to-es: 4.3.5
+
+  '@shikijs/engine-oniguruma@3.23.0':
+    dependencies:
+      '@shikijs/types': 3.23.0
+      '@shikijs/vscode-textmate': 10.0.2
+
+  '@shikijs/langs@3.23.0':
+    dependencies:
+      '@shikijs/types': 3.23.0
+
+  '@shikijs/themes@3.23.0':
+    dependencies:
+      '@shikijs/types': 3.23.0
+
+  '@shikijs/transformers@3.23.0':
+    dependencies:
+      '@shikijs/core': 3.23.0
+      '@shikijs/types': 3.23.0
+
+  '@shikijs/types@3.23.0':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
+  '@shikijs/vscode-textmate@10.0.2': {}
+
   '@sinclair/typebox-codegen@0.11.1':
     dependencies:
       '@sinclair/typebox': 0.33.22
@@ -17212,6 +17331,8 @@ snapshots:
 
   didyoumean@1.2.2: {}
 
+  diff@8.0.3: {}
+
   dir-compare@4.2.0:
     dependencies:
       minimatch: 3.1.2
@@ -18371,6 +18492,20 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  hast-util-to-html@9.0.5:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      comma-separated-tokens: 2.0.3
+      hast-util-whitespace: 3.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.1
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      stringify-entities: 4.0.4
+      zwitch: 2.0.4
+
   hast-util-to-jsx-runtime@2.3.6:
     dependencies:
       '@types/estree': 1.0.8
@@ -18425,6 +18560,8 @@ snapshots:
 
   html-url-attributes@3.0.1: {}
 
+  html-void-elements@3.0.0: {}
+
   http-cache-semantics@4.2.0: {}
 
   http-errors@2.0.1:
@@ -19178,6 +19315,8 @@ snapshots:
 
   lru-cache@7.18.3: {}
 
+  lru_map@0.4.1: {}
+
   lz-string@1.5.0: {}
 
   macos-alias@0.2.12:
@@ -20203,6 +20342,14 @@ snapshots:
     dependencies:
       mimic-function: 5.0.1
 
+  oniguruma-parser@0.12.1: {}
+
+  oniguruma-to-es@4.3.5:
+    dependencies:
+      oniguruma-parser: 0.12.1
+      regex: 6.1.0
+      regex-recursion: 6.0.2
+
   open@10.2.0:
     dependencies:
       default-browser: 5.5.0
@@ -21217,6 +21364,16 @@ snapshots:
 
   regenerator-runtime@0.13.11: {}
 
+  regex-recursion@6.0.2:
+    dependencies:
+      regex-utilities: 2.3.0
+
+  regex-utilities@2.3.0: {}
+
+  regex@6.1.0:
+    dependencies:
+      regex-utilities: 2.3.0
+
   regexpu-core@6.4.0:
     dependencies:
       regenerate: 1.4.2
@@ -21539,6 +21696,17 @@ snapshots:
 
   shell-quote@1.8.3: {}
 
+  shiki@3.23.0:
+    dependencies:
+      '@shikijs/core': 3.23.0
+      '@shikijs/engine-javascript': 3.23.0
+      '@shikijs/engine-oniguruma': 3.23.0
+      '@shikijs/langs': 3.23.0
+      '@shikijs/themes': 3.23.0
+      '@shikijs/types': 3.23.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
   side-channel-list@1.0.0:
     dependencies:
       es-errors: 1.3.0