From bd1c7e1d9ae77e1c047e19ef895c089c00d87aa5 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Wed, 18 Feb 2026 17:56:30 -0800
Subject: [PATCH] Virtualize DiffPanel rendering with @pierre/diffs beta

- upgrade `@pierre/diffs` to `^1.1.0-beta.16`
- switch file diff list to `Virtualizer` for smoother large patch rendering
- adjust diff panel container/layout handling and theme typing
---
 apps/web/package.json                 |  2 +-
 apps/web/src/App.tsx                  |  2 +-
 apps/web/src/components/DiffPanel.tsx | 90 +++++++++++++++++----------
 bun.lock                              |  4 +-
 4 files changed, 61 insertions(+), 37 deletions(-)

diff --git a/apps/web/package.json b/apps/web/package.json
index 517a6bba0b52274109d9610ab80ad1272f60af69..f777c322208965df8f78a8144e91c75b297c44a4 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.2.0",
-    "@pierre/diffs": "^1.0.11",
+    "@pierre/diffs": "^1.1.0-beta.16",
     "@t3tools/contracts": "workspace:*",
     "@tanstack/react-pacer": "^0.19.4",
     "@tanstack/react-query": "^5.90.0",
diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 598b6a9604dca6171598a6268de518f940940477..3afec7e3a2989b8ae0437241d735ae3d99dc1c1c 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 { Activity, Suspense, lazy, useEffect, useRef, useState } from "react";
+import { Activity, Suspense, lazy, useEffect, useRef } from "react";
 
 import ChatView from "./components/ChatView";
 import Sidebar from "./components/Sidebar";
diff --git a/apps/web/src/components/DiffPanel.tsx b/apps/web/src/components/DiffPanel.tsx
index c8ce00f7df1337a3b0ffc03e29cbcd738ea02b3f..6cf7b61ced6d2da91e8e7fc90968151a062f245f 100644
--- a/apps/web/src/components/DiffPanel.tsx
+++ b/apps/web/src/components/DiffPanel.tsx
@@ -1,5 +1,10 @@
 import { parsePatchFiles } from "@pierre/diffs";
-import { FileDiff, type FileDiffMetadata, WorkerPoolContextProvider } from "@pierre/diffs/react";
+import {
+  FileDiff,
+  type FileDiffMetadata,
+  Virtualizer,
+  WorkerPoolContextProvider,
+} from "@pierre/diffs/react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Columns2Icon, Rows3Icon } from "lucide-react";
 import { type ReactNode, useEffect, useMemo, useRef, useState } from "react";
@@ -15,6 +20,7 @@ import { useStore } from "../store";
 import { ToggleGroup, Toggle } from "./ui/toggle-group";
 
 type DiffRenderMode = "stacked" | "split";
+type DiffThemeType = "light" | "dark" | "system";
 
 type RenderablePatch =
   | {
@@ -61,6 +67,10 @@ function resolveFileDiffPath(fileDiff: FileDiffMetadata): string {
   return raw;
 }
 
+function buildFileDiffRenderKey(fileDiff: FileDiffMetadata): string {
+  return fileDiff.cacheKey ?? `${fileDiff.prevName ?? "none"}:${fileDiff.name}`;
+}
+
 interface DiffPanelProps {
   mode?: "inline" | "sheet";
 }
@@ -396,46 +406,60 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
         </div>
       ) : (
         <>
-          <div ref={patchViewportRef} className="min-w-0 flex-1 overflow-auto px-3 py-2">
+          <div ref={patchViewportRef} className="min-h-0 min-w-0 flex-1 overflow-hidden">
             {!canApplyStoredTarget && state.diffThreadId && (
-              <p className="mb-2 text-[11px] text-muted-foreground/65">
-                Showing diffs for the active thread.
-              </p>
+              <div className="px-3 pt-2">
+                <p className="mb-2 text-[11px] text-muted-foreground/65">
+                  Showing diffs for the active thread.
+                </p>
+              </div>
             )}
             {checkpointDiffError && !renderablePatch && (
-              <p className="mb-2 text-[11px] text-red-500/80">{checkpointDiffError}</p>
+              <div className="px-3">
+                <p className="mb-2 text-[11px] text-red-500/80">{checkpointDiffError}</p>
+              </div>
             )}
             {!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 className="flex h-full items-center justify-center px-3 py-2 text-xs text-muted-foreground/70">
+                <p>
+                  {isLoadingCheckpointDiff
+                    ? "Loading checkpoint diff..."
+                    : "No patch available for this selection."}
+                </p>
               </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>
+              <Virtualizer
+                className="h-full min-h-0 overflow-auto px-3 py-2"
+                config={{
+                  overscrollSize: 600,
+                  intersectionObserverMargin: 1200,
+                }}
+              >
+                {renderableFiles.map((fileDiff) => {
+                  const filePath = resolveFileDiffPath(fileDiff);
+                  const fileKey = buildFileDiffRenderKey(fileDiff);
+                  return (
+                    <div key={fileKey} data-diff-file-path={filePath} className="rounded-md">
+                      <FileDiff
+                        fileDiff={fileDiff}
+                        options={{
+                          diffStyle: diffRenderMode === "split" ? "split" : "unified",
+                          lineDiffType: "none",
+                          themeType: resolvedTheme as DiffThemeType,
+                        }}
+                      />
+                    </div>
+                  );
+                })}
+              </Virtualizer>
             ) : (
-              <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 className="h-full overflow-auto px-3 py-2">
+                <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>
             )}
           </div>
diff --git a/bun.lock b/bun.lock
index b6cd4bdae866aa380f627c3b7fa605f8cabe033a..687ca1bd4831d604f60ea58b21e73b162db2b743 100644
--- a/bun.lock
+++ b/bun.lock
@@ -52,7 +52,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@base-ui/react": "^1.2.0",
-        "@pierre/diffs": "^1.0.11",
+        "@pierre/diffs": "^1.1.0-beta.16",
         "@t3tools/contracts": "workspace:*",
         "@tanstack/react-pacer": "^0.19.4",
         "@tanstack/react-query": "^5.90.0",
@@ -305,7 +305,7 @@
 
     "@oxlint/binding-win32-x64-msvc": ["@oxlint/binding-win32-x64-msvc@1.46.0", "", { "os": "win32", "cpu": "x64" }, "sha512-DJbQsSJUr4KSi9uU0QqOgI7PX2C+fKGZX+YDprt3vM2sC0dWZsgVTLoN2vtkNyEWJSY2mnvRFUshWXT3bmo0Ug=="],
 
-    "@pierre/diffs": ["@pierre/diffs@1.0.11", "", { "dependencies": { "@shikijs/core": "^3.0.0", "@shikijs/engine-javascript": "^3.0.0", "@shikijs/transformers": "^3.0.0", "diff": "8.0.3", "hast-util-to-html": "9.0.5", "lru_map": "0.4.1", "shiki": "^3.0.0" }, "peerDependencies": { "react": "^18.3.1 || ^19.0.0", "react-dom": "^18.3.1 || ^19.0.0" } }, "sha512-j6zIEoyImQy1HfcJqbrDwP0O5I7V2VNXAaw53FqQ+SykRfaNwABeZHs9uibXO4supaXPmTx6LEH9Lffr03e1Tw=="],
+    "@pierre/diffs": ["@pierre/diffs@1.1.0-beta.16", "", { "dependencies": { "@shikijs/transformers": "^3.0.0", "diff": "8.0.3", "hast-util-to-html": "9.0.5", "lru_map": "0.4.1", "shiki": "^3.0.0" }, "peerDependencies": { "react": "^18.3.1 || ^19.0.0", "react-dom": "^18.3.1 || ^19.0.0" } }, "sha512-McjTuEPuacSIcXdoI2O9W6VSHIOs9ApEHnEUwONKZnKqIo2GGv1vNg9Pr8tgBOL7lgBWNEHX5ROJ5z1X74sENQ=="],
 
     "@quansync/fs": ["@quansync/fs@1.0.0", "", { "dependencies": { "quansync": "^1.0.0" } }, "sha512-4TJ3DFtlf1L5LDMaM6CanJ/0lckGNtJcMjQ1NAV6zDmA0tEHKZtxNKin8EgPaVX1YzljbxckyT2tJrpQKAtngQ=="],
 
-- 
2.54.0