diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 13058c114e267669e256fd4fee8dbb84f7f00e16..598b6a9604dca6171598a6268de518f940940477 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -1,5 +1,5 @@
 import { QueryClient, QueryClientProvider, useQueryClient } from "@tanstack/react-query";
-import { Suspense, lazy, useEffect, useRef } from "react";
+import { Activity, Suspense, lazy, useEffect, useRef, useState } from "react";
 
 import ChatView from "./components/ChatView";
 import Sidebar from "./components/Sidebar";
@@ -15,8 +15,44 @@ import { Sheet, SheetPopup } from "./components/ui/sheet";
 import { invalidateGitQueries } from "./lib/gitReactQuery";
 
 const DiffPanel = lazy(() => import("./components/DiffPanel"));
+const DiffWorkerPoolProvider = lazy(() =>
+  import("./components/DiffPanel").then((module) => ({
+    default: module.DiffWorkerPoolProvider,
+  })),
+);
 const DIFF_INLINE_LAYOUT_MEDIA_QUERY = "(max-width: 1180px)";
 
+const DiffPanelWrapper = (props: { children: React.ReactNode; sheet: boolean }) => {
+  const { state, dispatch } = useStore();
+  if (props.sheet) {
+    return (
+      <Sheet
+        open={state.diffOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            dispatch({ type: "CLOSE_DIFF" });
+          }
+        }}
+      >
+        <SheetPopup
+          side="right"
+          showCloseButton={false}
+          keepMounted
+          className="w-[min(88vw,820px)] max-w-[820px] p-0"
+        >
+          {props.children}
+        </SheetPopup>
+      </Sheet>
+    );
+  }
+
+  return (
+    <aside className={state.diffOpen ? undefined : "hidden"} aria-hidden={!state.diffOpen}>
+      {props.children}
+    </aside>
+  );
+};
+
 function EventRouter() {
   const api = useNativeApi();
   const { dispatch } = useStore();
@@ -181,9 +217,20 @@ function DesktopProjectBootstrap() {
 
 function Layout() {
   const api = useNativeApi();
-  const { state, dispatch } = useStore();
+  const { state } = useStore();
   const shouldUseDiffSheet = useMediaQuery(DIFF_INLINE_LAYOUT_MEDIA_QUERY);
 
+  const diffLoadingFallback =
+    !state.diffOpen || shouldUseDiffSheet ? (
+      <div className="flex h-full min-h-0 items-center justify-center px-4 text-center text-xs text-muted-foreground/70">
+        Loading diff viewer...
+      </div>
+    ) : (
+      <aside className="flex h-full w-[560px] shrink-0 items-center justify-center border-l border-border bg-card px-4 text-center text-xs text-muted-foreground/70">
+        Loading diff viewer...
+      </aside>
+    );
+
   if (!api) {
     return (
       <div className="flex h-screen flex-col bg-background text-foreground">
@@ -201,43 +248,15 @@ function Layout() {
       <DesktopProjectBootstrap />
       <Sidebar />
       <ChatView />
-      {state.diffOpen && !shouldUseDiffSheet && (
-        <Suspense
-          fallback={
-            <aside className="flex h-full w-[560px] shrink-0 items-center justify-center border-l border-border bg-card px-4 text-center text-xs text-muted-foreground/70">
-              Loading diff viewer...
-            </aside>
-          }
-        >
-          <DiffPanel mode="inline" />
-        </Suspense>
-      )}
-      {state.diffOpen && shouldUseDiffSheet && (
-        <Sheet
-          open={state.diffOpen}
-          onOpenChange={(open) => {
-            if (!open) {
-              dispatch({ type: "CLOSE_DIFF" });
-            }
-          }}
-        >
-          <SheetPopup
-            side="right"
-            showCloseButton={false}
-            className="w-[min(88vw,820px)] max-w-[820px] p-0"
-          >
-            <Suspense
-              fallback={
-                <div className="flex h-full min-h-0 items-center justify-center px-4 text-center text-xs text-muted-foreground/70">
-                  Loading diff viewer...
-                </div>
-              }
-            >
-              <DiffPanel mode="sheet" />
-            </Suspense>
-          </SheetPopup>
-        </Sheet>
-      )}
+      <Activity mode={state.diffOpen ? "visible" : "hidden"}>
+        <DiffPanelWrapper sheet={shouldUseDiffSheet}>
+          <Suspense fallback={diffLoadingFallback}>
+            <DiffWorkerPoolProvider>
+              <DiffPanel mode={shouldUseDiffSheet ? "sheet" : "inline"} />
+            </DiffWorkerPoolProvider>
+          </Suspense>
+        </DiffPanelWrapper>
+      </Activity>
     </div>
   );
 }
diff --git a/apps/web/src/components/DiffPanel.tsx b/apps/web/src/components/DiffPanel.tsx
index c1bdc862aa8fb4599ad3af794f3cf4bd12cfea00..c8ce00f7df1337a3b0ffc03e29cbcd738ea02b3f 100644
--- a/apps/web/src/components/DiffPanel.tsx
+++ b/apps/web/src/components/DiffPanel.tsx
@@ -2,7 +2,7 @@ import { parsePatchFiles } from "@pierre/diffs";
 import { FileDiff, type FileDiffMetadata, WorkerPoolContextProvider } from "@pierre/diffs/react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Columns2Icon, Rows3Icon } from "lucide-react";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { type ReactNode, useEffect, useMemo, useRef, useState } from "react";
 import { checkpointDiffQueryOptions, providerQueryKeys } from "~/lib/providerReactQuery";
 import { cn } from "~/lib/utils";
 import { isElectron } from "../env";
@@ -65,6 +65,29 @@ interface DiffPanelProps {
   mode?: "inline" | "sheet";
 }
 
+export function DiffWorkerPoolProvider({ children }: { children?: ReactNode }) {
+  const workerPoolSize = useMemo(() => {
+    const cores = typeof navigator === "undefined" ? 4 : Math.max(1, navigator.hardwareConcurrency || 4);
+    return Math.max(2, Math.min(6, Math.floor(cores / 2)));
+  }, []);
+
+  return (
+    <WorkerPoolContextProvider
+      poolOptions={{
+        workerFactory: () =>
+          new Worker(new URL("../workers/diffs.worker.ts", import.meta.url), { type: "module" }),
+        poolSize: workerPoolSize,
+        totalASTLRUCacheSize: 240,
+      }}
+      highlighterOptions={{
+        tokenizeMaxLineLength: 1_000,
+      }}
+    >
+      {children}
+    </WorkerPoolContextProvider>
+  );
+}
+
 export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
   const api = useNativeApi();
   const { resolvedTheme } = useTheme();
@@ -289,151 +312,135 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
   };
 
   const shouldUseDragRegion = isElectron && mode === "inline";
-  const workerPoolSize = useMemo(() => {
-    const cores = typeof navigator === "undefined" ? 4 : Math.max(1, navigator.hardwareConcurrency || 4);
-    return Math.max(2, Math.min(6, Math.floor(cores / 2)));
-  }, []);
 
   return (
-    <WorkerPoolContextProvider
-      poolOptions={{
-        workerFactory: () =>
-          new Worker(new URL("../workers/diffs.worker.ts", import.meta.url), { type: "module" }),
-        poolSize: workerPoolSize,
-        totalASTLRUCacheSize: 240,
-      }}
-      highlighterOptions={{
-        tokenizeMaxLineLength: 1_000,
-      }}
+    <aside
+      className={cn(
+        "flex h-full min-w-0 flex-col bg-card",
+        mode === "inline"
+          ? "w-[42vw] min-w-[360px] max-w-[560px] shrink-0 border-l border-border"
+          : "w-full",
+      )}
     >
-      <aside
+      <div
         className={cn(
-          "flex h-full min-w-0 flex-col bg-card",
-          mode === "inline"
-            ? "w-[42vw] min-w-[360px] max-w-[560px] shrink-0 border-l border-border"
-            : "w-full",
+          "flex items-center justify-between border-b border-border px-4",
+          shouldUseDragRegion ? "drag-region h-[52px]" : "py-3",
         )}
       >
-        <div
-          className={cn(
-            "flex items-center justify-between border-b border-border px-4",
-            shouldUseDragRegion ? "drag-region h-[52px]" : "py-3",
-          )}
-        >
-          <div className="flex gap-1.5 overflow-x-auto pb-0.5">
-            <button type="button" className="shrink-0 rounded-md" onClick={selectWholeConversation}>
+        <div className="flex gap-1.5 overflow-x-auto pb-0.5">
+          <button type="button" className="shrink-0 rounded-md" onClick={selectWholeConversation}>
+            <div
+              className={cn(
+                "rounded-md border px-2 py-1 text-left transition-colors",
+                selectedTurnId === null
+                  ? "border-border bg-accent text-accent-foreground"
+                  : "border-border/70 bg-background/70 text-muted-foreground/80 hover:border-border hover:text-foreground/80",
+              )}
+            >
+              <div className="text-[10px] font-medium">All turns</div>
+              <div className="text-[8px] opacity-70">Conversation</div>
+            </div>
+          </button>
+          {turnDiffSummaries.map((summary, index) => (
+            <button
+              key={summary.turnId}
+              type="button"
+              className="shrink-0 rounded-md"
+              onClick={() => selectTurn(summary.turnId)}
+              title={summary.turnId}
+            >
               <div
                 className={cn(
                   "rounded-md border px-2 py-1 text-left transition-colors",
-                  selectedTurnId === null
+                  summary.turnId === selectedTurn?.turnId
                     ? "border-border bg-accent text-accent-foreground"
                     : "border-border/70 bg-background/70 text-muted-foreground/80 hover:border-border hover:text-foreground/80",
                 )}
               >
-                <div className="text-[10px] font-medium">All turns</div>
-                <div className="text-[8px] opacity-70">Conversation</div>
+                <div className="text-[10px] font-medium">
+                  Turn {turnDiffSummaries.length - index}
+                </div>
+                <div className="text-[8px] opacity-70">{formatTimestamp(summary.completedAt)}</div>
               </div>
             </button>
-            {turnDiffSummaries.map((summary, index) => (
-              <button
-                key={summary.turnId}
-                type="button"
-                className="shrink-0 rounded-md"
-                onClick={() => selectTurn(summary.turnId)}
-                title={summary.turnId}
-              >
-                <div
-                  className={cn(
-                    "rounded-md border px-2 py-1 text-left transition-colors",
-                    summary.turnId === selectedTurn?.turnId
-                      ? "border-border bg-accent text-accent-foreground"
-                      : "border-border/70 bg-background/70 text-muted-foreground/80 hover:border-border hover:text-foreground/80",
-                  )}
-                >
-                  <div className="text-[10px] font-medium">
-                    Turn {turnDiffSummaries.length - index}
+          ))}
+        </div>
+        <ToggleGroup
+          variant="outline"
+          size="xs"
+          value={[diffRenderMode]}
+          onValueChange={(value) => {
+            const next = value[0];
+            if (next === "stacked" || next === "split") {
+              setDiffRenderMode(next);
+            }
+          }}
+        >
+          <Toggle aria-label="Stacked diff view" value="stacked">
+            <Rows3Icon className="size-3" />
+          </Toggle>
+          <Toggle aria-label="Split diff view" value="split">
+            <Columns2Icon className="size-3" />
+          </Toggle>
+        </ToggleGroup>
+      </div>
+
+      {!activeThread ? (
+        <div className="flex flex-1 items-center justify-center px-5 text-center text-xs text-muted-foreground/70">
+          Select a thread to inspect turn diffs.
+        </div>
+      ) : turnDiffSummaries.length === 0 ? (
+        <div className="flex flex-1 items-center justify-center px-5 text-center text-xs text-muted-foreground/70">
+          No completed turns yet.
+        </div>
+      ) : (
+        <>
+          <div ref={patchViewportRef} className="min-w-0 flex-1 overflow-auto px-3 py-2">
+            {!canApplyStoredTarget && state.diffThreadId && (
+              <p className="mb-2 text-[11px] text-muted-foreground/65">
+                Showing diffs for the active thread.
+              </p>
+            )}
+            {checkpointDiffError && !renderablePatch && (
+              <p className="mb-2 text-[11px] text-red-500/80">{checkpointDiffError}</p>
+            )}
+            {!renderablePatch ? (
+              <div className="flex h-full items-center justify-center text-xs text-muted-foreground/70">
+                {isLoadingCheckpointDiff
+                  ? "Loading checkpoint diff..."
+                  : "No patch available for this selection."}
+              </div>
+            ) : renderablePatch.kind === "files" ? (
+              <div className="space-y-3">
+                {renderableFiles.map((fileDiff) => (
+                  <div
+                    key={fileDiff.cacheKey ?? `${fileDiff.prevName ?? "none"}:${fileDiff.name}`}
+                    data-diff-file-path={resolveFileDiffPath(fileDiff)}
+                    className="rounded-md"
+                  >
+                    <FileDiff
+                      fileDiff={fileDiff}
+                      options={{
+                        diffStyle: diffRenderMode === "split" ? "split" : "unified",
+                        lineDiffType: "none",
+                        themeType: resolvedTheme,
+                      }}
+                    />
                   </div>
-                  <div className="text-[8px] opacity-70">{formatTimestamp(summary.completedAt)}</div>
-                </div>
-              </button>
-            ))}
+                ))}
+              </div>
+            ) : (
+              <div className="space-y-2">
+                <p className="text-[11px] text-muted-foreground/75">{renderablePatch.reason}</p>
+                <pre className="max-h-[72vh] overflow-auto rounded-md border border-border/70 bg-background/70 p-3 font-mono text-[11px] leading-relaxed text-muted-foreground/90">
+                  {renderablePatch.text}
+                </pre>
+              </div>
+            )}
           </div>
-          <ToggleGroup
-            variant="outline"
-            size="xs"
-            value={[diffRenderMode]}
-            onValueChange={(value) => {
-              const next = value[0];
-              if (next === "stacked" || next === "split") {
-                setDiffRenderMode(next);
-              }
-            }}
-          >
-            <Toggle aria-label="Stacked diff view" value="stacked">
-              <Rows3Icon className="size-3" />
-            </Toggle>
-            <Toggle aria-label="Split diff view" value="split">
-              <Columns2Icon className="size-3" />
-            </Toggle>
-          </ToggleGroup>
-        </div>
-
-        {!activeThread ? (
-          <div className="flex flex-1 items-center justify-center px-5 text-center text-xs text-muted-foreground/70">
-            Select a thread to inspect turn diffs.
-          </div>
-        ) : turnDiffSummaries.length === 0 ? (
-          <div className="flex flex-1 items-center justify-center px-5 text-center text-xs text-muted-foreground/70">
-            No completed turns yet.
-          </div>
-        ) : (
-          <>
-            <div ref={patchViewportRef} className="min-w-0 flex-1 overflow-auto px-3 py-2">
-              {!canApplyStoredTarget && state.diffThreadId && (
-                <p className="mb-2 text-[11px] text-muted-foreground/65">
-                  Showing diffs for the active thread.
-                </p>
-              )}
-              {checkpointDiffError && !renderablePatch && (
-                <p className="mb-2 text-[11px] text-red-500/80">{checkpointDiffError}</p>
-              )}
-              {!renderablePatch ? (
-                <div className="flex h-full items-center justify-center text-xs text-muted-foreground/70">
-                  {isLoadingCheckpointDiff
-                    ? "Loading checkpoint diff..."
-                    : "No patch available for this selection."}
-                </div>
-              ) : renderablePatch.kind === "files" ? (
-                <div className="space-y-3">
-                  {renderableFiles.map((fileDiff) => (
-                    <div
-                      key={fileDiff.cacheKey ?? `${fileDiff.prevName ?? "none"}:${fileDiff.name}`}
-                      data-diff-file-path={resolveFileDiffPath(fileDiff)}
-                      className="rounded-md"
-                    >
-                      <FileDiff
-                        fileDiff={fileDiff}
-                        options={{
-                          diffStyle: diffRenderMode === "split" ? "split" : "unified",
-                          lineDiffType: "none",
-                          themeType: resolvedTheme,
-                        }}
-                      />
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <div className="space-y-2">
-                  <p className="text-[11px] text-muted-foreground/75">{renderablePatch.reason}</p>
-                  <pre className="max-h-[72vh] overflow-auto rounded-md border border-border/70 bg-background/70 p-3 font-mono text-[11px] leading-relaxed text-muted-foreground/90">
-                    {renderablePatch.text}
-                  </pre>
-                </div>
-              )}
-            </div>
-          </>
-        )}
-      </aside>
-    </WorkerPoolContextProvider>
+        </>
+      )}
+    </aside>
   );
 }
diff --git a/apps/web/src/components/ui/sheet.tsx b/apps/web/src/components/ui/sheet.tsx
index c5ca5101bbaa8df4e40042a98c3c7129b1b7eae1..0a27f5697df2e34aa9bb77bf7a54d850cd3e380b 100644
--- a/apps/web/src/components/ui/sheet.tsx
+++ b/apps/web/src/components/ui/sheet.tsx
@@ -60,16 +60,18 @@ function SheetPopup({
   className,
   children,
   showCloseButton = true,
+  keepMounted = false,
   side = "right",
   variant = "default",
   ...props
 }: SheetPrimitive.Popup.Props & {
   showCloseButton?: boolean;
+  keepMounted?: boolean;
   side?: "right" | "left" | "top" | "bottom";
   variant?: "default" | "inset";
 }) {
   return (
-    <SheetPortal>
+    <SheetPortal keepMounted={keepMounted}>
       <SheetBackdrop />
       <SheetViewport side={side} variant={variant}>
         <SheetPrimitive.Popup