fix(app): optimize large review panes (#35375)

packages/app/src/pages/session.tsx

@@ -2157,6 +2157,7 @@ export default function Page() {
             diffsReady={reviewReady}
             empty={reviewEmptyText}
             hasReview={hasReview}
+            reviewHasFocusableContent={hasReview}
             reviewCount={reviewCount}
             reviewPanel={reviewPanel}
             activeDiff={tree.activeDiff}
@@ -2168,14 +2169,20 @@ export default function Page() {
         <Show when={newSessionDesign()}>
           <Show when={isDesktop() ? desktopV2PanelLayout().visible : terminalOpen()}>
             <div class="min-w-0 h-full flex flex-1 flex-col">
-              <Show when={isDesktop() && (desktopV2ReviewOpen() || desktopFileTreeOpen())}>
-                <div class="min-h-0 flex-1">
+              <Show when={isDesktop()}>
+                <div
+                  classList={{
+                    "min-h-0 flex-1": desktopV2ReviewOpen() || desktopFileTreeOpen(),
+                    "size-0 shrink-0 overflow-hidden": !(desktopV2ReviewOpen() || desktopFileTreeOpen()),
+                  }}
+                >
                   <SessionSidePanel
                     canReview={canReview}
                     diffs={reviewDiffs}
                     diffsReady={reviewReady}
                     empty={reviewEmptyText}
                     hasReview={hasReview}
+                    reviewHasFocusableContent={() => hasReview() || reviewV2State.sidebarOpened()}
                     reviewCount={reviewCount}
                     reviewPanel={reviewPanelV2}
                     activeDiff={tree.activeDiff}
@@ -2204,7 +2211,12 @@ export default function Page() {
                 </div>
               </Show>
               <Show when={terminalOpen()}>
-                <div class="min-h-0 flex-1">
+                <div
+                  classList={{
+                    "min-h-0 shrink-0": desktopV2PanelLayout().stacked,
+                    "min-h-0 flex-1": !desktopV2PanelLayout().stacked,
+                  }}
+                >
                   <TerminalPanelV2 stacked={desktopV2PanelLayout().stacked} />
                 </div>
               </Show>

packages/app/src/pages/session/session-side-panel.tsx

@@ -14,6 +14,9 @@ import { useDialog } from "@opencode-ai/ui/context/dialog"
 
 import FileTree from "@/components/file-tree"
 import { SessionContextUsage } from "@/components/session-context-usage"
+
+const reviewTabID = "session-side-panel-review-tab"
+const reviewTabPanelID = "session-side-panel-review-tabpanel"
 import { SessionContextTab, SortableTab, FileVisual } from "@/components/session"
 import { useCommand } from "@/context/command"
 import { useFile, type SelectedLineRange } from "@/context/file"
@@ -45,6 +48,7 @@ export function SessionSidePanel(props: {
   diffsReady: () => boolean
   empty: () => string
   hasReview: () => boolean
+  reviewHasFocusableContent: () => boolean
   reviewCount: () => number
   reviewPanel: () => JSX.Element
   activeDiff?: string
@@ -75,6 +79,7 @@ export function SessionSidePanel(props: {
       }),
   )
   const open = createMemo(() => reviewOpen() || fileOpen())
+  const rendered = createMemo<boolean>((previous) => previous || open(), false)
   const reviewTab = createMemo(() => isDesktop())
   const panelWidth = createMemo(() => {
     if (!open()) return "0px"
@@ -155,6 +160,10 @@ export function SessionSidePanel(props: {
   const openedTabs = tabState.openedTabs
   const activeTab = tabState.activeTab
   const activeFileTab = tabState.activeFileTab
+  const reviewContentRendered = createMemo<boolean>(
+    (previous) => previous || (reviewOpen() && activeTab() === "review"),
+    false,
+  )
 
   const fileTreeTab = () => layout.fileTree.tab()
 
@@ -223,7 +232,7 @@ export function SessionSidePanel(props: {
         class="relative min-w-0 flex overflow-hidden bg-background-base"
         classList={{
           "h-full shrink-0": !props.stacked,
-          "min-h-0 flex-1": props.stacked,
+          "h-full min-h-0": props.stacked,
           "pointer-events-none": !open(),
           "transition-[width] duration-[240ms] ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width] motion-reduce:transition-none":
             !props.size.active() && !props.reviewSnap,
@@ -232,7 +241,7 @@ export function SessionSidePanel(props: {
         }}
         style={{ width: panelWidth() }}
       >
-        <Show when={open()}>
+        <Show when={rendered()}>
           <div
             class="size-full flex"
             classList={{
@@ -265,7 +274,11 @@ export function SessionSidePanel(props: {
                         }}
                       >
                         <Show when={reviewTab() && props.canReview()}>
-                          <Tabs.Trigger value="review">
+                          <Tabs.Trigger
+                            value="review"
+                            id={reviewTabID}
+                            aria-controls={activeTab() === "review" ? reviewTabPanelID : undefined}
+                          >
                             <div class="flex items-center gap-1.5">
                               <div>{language.t("session.tab.review")}</div>
                               <Show when={props.hasReview()}>
@@ -328,10 +341,20 @@ export function SessionSidePanel(props: {
                       </Tabs.List>
                     </div>
 
-                    <Show when={reviewTab() && props.canReview()}>
-                      <Tabs.Content value="review" class="flex flex-col h-full overflow-hidden contain-strict">
-                        <Show when={reviewOpen() && activeTab() === "review"}>{props.reviewPanel()}</Show>
-                      </Tabs.Content>
+                    <Show when={reviewTab() && props.canReview() && reviewContentRendered()}>
+                      <div
+                        id={reviewTabPanelID}
+                        role="tabpanel"
+                        aria-labelledby={reviewTabID}
+                        aria-hidden={activeTab() !== "review"}
+                        inert={activeTab() !== "review"}
+                        tabIndex={props.reviewHasFocusableContent() ? undefined : 0}
+                        data-slot="tabs-content"
+                        class="flex flex-col h-full overflow-hidden contain-strict"
+                        classList={{ hidden: activeTab() !== "review" }}
+                      >
+                        {props.reviewPanel()}
+                      </div>
                     </Show>
 
                     <Tabs.Content value="empty" class="flex flex-col h-full overflow-hidden contain-strict">

packages/app/src/pages/session/v2/review-diff-kinds.test.ts

@@ -12,6 +12,13 @@ describe("reviewDiffKinds", () => {
     expect(kinds.get("src/b.ts")).toBe("del")
     expect(kinds.get("src")).toBe("mix")
   })
+
+  test("normalizes file and directory paths", () => {
+    const kinds = reviewDiffKinds([{ file: "\\src//lib/a.ts/", additions: 1, deletions: 1, status: "modified" }])
+
+    expect(kinds.get("src/lib/a.ts")).toBe("mix")
+    expect(kinds.get("src/lib")).toBe("mix")
+  })
 })
 
 describe("filterReviewFiles", () => {

packages/app/src/pages/session/v2/review-diff-kinds.ts

@@ -1,10 +1,11 @@
 import type { SnapshotFileDiff, VcsFileDiff } from "@opencode-ai/sdk/v2"
 import type { Kind } from "@/components/file-tree-v2"
+import { normalizeFileTreeV2Path } from "@/components/file-tree-v2-model"
 
 export type RenderDiff = (SnapshotFileDiff & { file: string }) | VcsFileDiff
 
 export function normalizePath(p: string) {
-  return p.replaceAll("\\", "/").replace(/\/+$/, "")
+  return normalizeFileTreeV2Path(p)
 }
 
 export function filterRenderableDiff(value: SnapshotFileDiff | VcsFileDiff): value is RenderDiff {

packages/app/src/pages/session/v2/review-panel-v2.tsx

@@ -203,7 +203,6 @@ function ReviewPanelV2Sidebar(props: {
           when={props.searching()}
           fallback={
             <FileTreeV2
-              path=""
               allowed={props.filteredFiles()}
               kinds={props.kinds()}
               draggable={false}

packages/app/src/pages/session/v2/session-file-list-v2.tsx

@@ -1,9 +1,11 @@
 import { FileIcon } from "@opencode-ai/ui/file-icon"
 import "@opencode-ai/ui/v2/file-tree-v2.css"
 import { getDirectory, getFilename } from "@opencode-ai/core/util/path"
-import { createEffect, For, Show } from "solid-js"
+import { createEffect, createMemo, createSignal, For, Show } from "solid-js"
 import { kindChange, kindLabel, type Kind } from "@/components/file-tree-v2"
 import { normalizePath } from "@/pages/session/v2/review-diff-kinds"
+import { createVirtualizer, defaultRangeExtractor } from "@tanstack/solid-virtual"
+import { virtualScrollElement } from "@/components/virtual-scroll-element"
 
 // Drives the highlight/selection of the flat search-result list from the filter
 // input's keyboard events.
@@ -45,62 +47,107 @@ export function SessionFileListV2(props: {
 }) {
   const active = () => normalizePath(props.active ?? "")
   const highlighted = () => normalizePath(props.highlighted ?? "")
-  let rootRef: HTMLDivElement | undefined
+  const normalized = createMemo(() => props.files.map(normalizePath))
+  const [root, setRoot] = createSignal<HTMLDivElement>()
+  const [focused, setFocused] = createSignal<string>()
+  const virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
+    get count() {
+      return props.files.length
+    },
+    getScrollElement: () => virtualScrollElement(root()),
+    initialRect: { width: 0, height: 600 },
+    estimateSize: () => 28,
+    gap: 2,
+    overscan: 10,
+    get getItemKey() {
+      const files = props.files
+      return (index: number) => files[index] ?? index
+    },
+    rangeExtractor: (range) => {
+      const indexes = defaultRangeExtractor(range)
+      const path = focused()
+      const index = path ? props.files.indexOf(path) : -1
+      if (index < 0 || indexes.includes(index)) return indexes
+      return [...indexes, index].sort((a, b) => a - b)
+    },
+  })
 
   createEffect(() => {
-    highlighted()
-    if (!rootRef) return
+    const index = normalized().indexOf(highlighted())
+    if (index < 0) return
     queueMicrotask(() => {
-      const row = rootRef?.querySelector<HTMLElement>('[data-slot="file-tree-v2-row"][data-highlighted]')
-      row?.scrollIntoView({ block: "nearest" })
+      if (virtualizer.range && index >= virtualizer.range.startIndex && index <= virtualizer.range.endIndex) return
+      virtualizer.scrollToIndex(index, { align: "auto" })
     })
   })
+  const virtualItemByKey = createMemo(
+    () => new Map(virtualizer.getVirtualItems().map((item) => [item.key, item] as const)),
+  )
+  const virtualRowKeys = createMemo(() => virtualizer.getVirtualItems().map((item) => item.key))
 
   return (
     <div
-      ref={(el) => {
-        rootRef = el
-      }}
+      ref={setRoot}
       data-component="file-tree-v2"
+      data-total-rows={props.files.length}
+      style={{ position: "relative", height: `${virtualizer.getTotalSize()}px` }}
     >
-      <For each={props.files}>
-        {(path) => {
-          const normalized = normalizePath(path)
-          const selected = () => {
-            if (highlighted()) return highlighted() === normalized
-            return active() === normalized
-          }
-          const highlightedRow = () => highlighted() === normalized
-          const kind = () => props.kinds?.get(normalized)
-          const directory = () => (normalized.includes("/") ? getDirectory(normalized) : undefined)
-          const filename = () => getFilename(normalized)
+      <For each={virtualRowKeys()}>
+        {(key) => {
+          const path = key as string
+          const value = normalizePath(path)
+          const selected = () => (highlighted() ? highlighted() === value : active() === value)
+          const highlightedRow = () => highlighted() === value
+          const kind = () => props.kinds?.get(value)
+          const directory = () => (value.includes("/") ? getDirectory(value) : undefined)
+          const filename = () => getFilename(value)
           return (
-            <button
-              type="button"
-              data-slot="file-tree-v2-row"
-              data-selected={selected() ? "" : undefined}
-              data-highlighted={highlightedRow() ? "" : undefined}
-              style="padding-left: 8px"
-              onClick={() => props.onFileClick(path)}
-            >
-              <span class="filetree-iconpair size-4">
-                <FileIcon node={{ path, type: "file" }} class="size-4 filetree-icon filetree-icon--color" />
-                <FileIcon node={{ path, type: "file" }} class="size-4 filetree-icon filetree-icon--mono" mono />
-              </span>
-              <span class="flex min-w-0 flex-1 items-center overflow-hidden whitespace-nowrap">
-                <Show when={directory()}>
-                  {(value) => <span class="text-12-medium text-text-muted truncate min-w-0 shrink">{value()}</span>}
-                </Show>
-                <span class="text-12-medium text-text-base truncate min-w-0 shrink-0">{filename()}</span>
-              </span>
-              <Show when={kind()}>
-                {(value) => (
-                  <span data-slot="file-tree-v2-change" data-change={kindChange(value())}>
-                    {kindLabel(value())}
-                  </span>
-                )}
-              </Show>
-            </button>
+            <Show when={virtualItemByKey().get(key)}>
+              {(item) => (
+                <div
+                  style={{
+                    position: "absolute",
+                    top: "0",
+                    left: "0",
+                    width: "100%",
+                    height: `${item().size}px`,
+                    transform: `translateY(${item().start}px)`,
+                  }}
+                >
+                  <button
+                    type="button"
+                    data-slot="file-tree-v2-row"
+                    data-path={path}
+                    data-selected={selected() ? "" : undefined}
+                    data-highlighted={highlightedRow() ? "" : undefined}
+                    style="padding-left: 8px"
+                    onFocus={() => setFocused(path)}
+                    onBlur={() => setFocused(undefined)}
+                    onClick={() => props.onFileClick(path)}
+                  >
+                    <span class="filetree-iconpair size-4">
+                      <FileIcon node={{ path, type: "file" }} class="size-4 filetree-icon filetree-icon--color" />
+                      <FileIcon node={{ path, type: "file" }} class="size-4 filetree-icon filetree-icon--mono" mono />
+                    </span>
+                    <span class="flex min-w-0 flex-1 items-center overflow-hidden whitespace-nowrap">
+                      <Show when={directory()}>
+                        {(value) => (
+                          <span class="text-12-medium text-text-muted truncate min-w-0 shrink">{value()}</span>
+                        )}
+                      </Show>
+                      <span class="text-12-medium text-text-base truncate min-w-0 shrink-0">{filename()}</span>
+                    </span>
+                    <Show when={kind()}>
+                      {(value) => (
+                        <span data-slot="file-tree-v2-change" data-change={kindChange(value())}>
+                          {kindLabel(value())}
+                        </span>
+                      )}
+                    </Show>
+                  </button>
+                </div>
+              )}
+            </Show>
           )
         }}
       </For>