diff --git a/apps/web/src/routes/_chat.tsx b/apps/web/src/routes/_chat.tsx
index 427982e1748299701f2a674f19cd6ad694c9316f..702e873b07fdf761c80121b9de3378e86257da4e 100644
--- a/apps/web/src/routes/_chat.tsx
+++ b/apps/web/src/routes/_chat.tsx
@@ -1,17 +1,78 @@
 import { Outlet, createFileRoute } from "@tanstack/react-router";
+import { Activity, Suspense, lazy, type ReactNode } from "react";
 
-import DiffPanel from "../components/DiffPanel";
 import Sidebar from "../components/Sidebar";
+import { useMediaQuery } from "../hooks/useMediaQuery";
 import { useStore } from "../store";
+import { Sheet, SheetPopup } from "../components/ui/sheet";
+
+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: 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 ChatRouteLayout() {
   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>
+    );
 
   return (
     <div className="flex h-screen overflow-hidden bg-background text-foreground isolate">
       <Sidebar />
       <Outlet />
-      {state.diffOpen && <DiffPanel />}
+      <Activity mode={state.diffOpen ? "visible" : "hidden"}>
+        <DiffPanelWrapper sheet={shouldUseDiffSheet}>
+          <Suspense fallback={diffLoadingFallback}>
+            <DiffWorkerPoolProvider>
+              <DiffPanel mode={shouldUseDiffSheet ? "sheet" : "inline"} />
+            </DiffWorkerPoolProvider>
+          </Suspense>
+        </DiffPanelWrapper>
+      </Activity>
     </div>
   );
 }