Merge branch 'todo/viewport-row-windowing-prototype'

benvinegar · benvinegar · commit 5b2440c579fb · 2026-03-18T13:44:05.000-04:00
# Conflicts:
#	package.json
#	src/ui/components/panes/DiffPane.tsx
diff --git a/package.json b/package.json
@@ -17,7 +17,8 @@
     "test": "bun test",
     "test:tty-smoke": "bun test test/tty-render-smoke.test.ts",
     "bench:bootstrap-load": "bun run test/bootstrap-load-benchmark.ts",
-    "bench:highlight-prefetch": "bun run test/adjacent-highlight-prefetch-benchmark.ts"
+    "bench:highlight-prefetch": "bun run test/adjacent-highlight-prefetch-benchmark.ts",
+    "bench:large-stream": "bun run test/large-stream-windowing-benchmark.ts"
   },
   "devDependencies": {
     "@types/bun": "latest",
diff --git a/src/ui/components/panes/DiffPane.tsx b/src/ui/components/panes/DiffPane.tsx
@@ -2,8 +2,10 @@ import type { ScrollBoxRenderable } from "@opentui/core";
 import { useCallback, useEffect, useMemo, useState, type RefObject } from "react";
 import type { AgentAnnotation, DiffFile, LayoutMode } from "../../../core/types";
 import type { VisibleAgentNote } from "../../lib/agentAnnotations";
+import { estimateDiffBodyRows } from "../../lib/sectionHeights";
 import type { AppTheme } from "../../themes";
 import { DiffSection } from "./DiffSection";
+import { DiffSectionPlaceholder } from "./DiffSectionPlaceholder";
 
 const EMPTY_VISIBLE_AGENT_NOTES: VisibleAgentNote[] = [];
 
@@ -117,6 +119,74 @@ export function DiffPane({
     return next;
   }, [activeAnnotations, dismissedAgentNoteIds, selectedFileId, selectedHunkIndex, showAgentNotes]);
 
+  // Keep exact row rendering for wrapped lines and visible notes; otherwise reserve
+  // offscreen section height and only materialize rows near the viewport.
+  const windowingEnabled = !wrapLines && visibleAgentNotesByFile.size === 0;
+  const [scrollViewport, setScrollViewport] = useState({ top: 0, height: 0 });
+
+  useEffect(() => {
+    if (!windowingEnabled) {
+      setScrollViewport({ top: 0, height: 0 });
+      return;
+    }
+
+    const updateViewport = () => {
+      const nextTop = scrollRef.current?.scrollTop ?? 0;
+      const nextHeight = scrollRef.current?.viewport.height ?? 0;
+
+      setScrollViewport((current) =>
+        current.top === nextTop && current.height === nextHeight ? current : { top: nextTop, height: nextHeight },
+      );
+    };
+
+    updateViewport();
+    const interval = setInterval(updateViewport, 50);
+    return () => clearInterval(interval);
+  }, [scrollRef, windowingEnabled]);
+
+  const estimatedBodyHeights = useMemo(
+    () => files.map((file) => estimateDiffBodyRows(file, layout, showHunkHeaders)),
+    [files, layout, showHunkHeaders],
+  );
+
+  const visibleWindowedFileIds = useMemo(() => {
+    if (!windowingEnabled) {
+      return null;
+    }
+
+    const overscanRows = 40;
+    const minVisibleY = Math.max(0, scrollViewport.top - overscanRows);
+    const maxVisibleY = scrollViewport.top + scrollViewport.height + overscanRows;
+    let offsetY = 0;
+    const next = new Set<string>();
+
+    files.forEach((file, index) => {
+      const sectionHeight = (index > 0 ? 1 : 0) + 1 + (estimatedBodyHeights[index] ?? 0);
+      const sectionStart = offsetY;
+      const sectionEnd = sectionStart + sectionHeight;
+
+      if (
+        file.id === selectedFileId ||
+        adjacentPrefetchFileIds.has(file.id) ||
+        (sectionEnd >= minVisibleY && sectionStart <= maxVisibleY)
+      ) {
+        next.add(file.id);
+      }
+
+      offsetY = sectionEnd;
+    });
+
+    return next;
+  }, [
+    adjacentPrefetchFileIds,
+    estimatedBodyHeights,
+    files,
+    scrollViewport.height,
+    scrollViewport.top,
+    selectedFileId,
+    windowingEnabled,
+  ]);
+
   return (
     <box
       style={{
@@ -144,30 +214,46 @@ export function DiffPane({
           horizontalScrollbarOptions={{ visible: false }}
         >
           <box style={{ width: "100%", flexDirection: "column" }}>
-            {files.map((file, index) => (
-              <DiffSection
-                key={file.id}
-                file={file}
-                headerLabelWidth={headerLabelWidth}
-                headerStatsWidth={headerStatsWidth}
-                layout={layout}
-                selected={file.id === selectedFileId}
-                selectedHunkIndex={file.id === selectedFileId ? selectedHunkIndex : -1}
-                shouldLoadHighlight={file.id === selectedFileId || adjacentPrefetchFileIds.has(file.id)}
-                onHighlightReady={file.id === selectedFileId ? handleSelectedHighlightReady : undefined}
-                separatorWidth={separatorWidth}
-                showSeparator={index > 0}
-                showLineNumbers={showLineNumbers}
-                showHunkHeaders={showHunkHeaders}
-                wrapLines={wrapLines}
-                theme={theme}
-                viewWidth={diffContentWidth}
-                visibleAgentNotes={visibleAgentNotesByFile.get(file.id) ?? EMPTY_VISIBLE_AGENT_NOTES}
-                onDismissAgentNote={onDismissAgentNote}
-                onOpenAgentNotesAtHunk={(hunkIndex) => onOpenAgentNotesAtHunk(file.id, hunkIndex)}
-                onSelect={() => onSelectFile(file.id)}
-              />
-            ))}
+            {files.map((file, index) => {
+              const shouldRenderSection = visibleWindowedFileIds?.has(file.id) ?? true;
+
+              return shouldRenderSection ? (
+                <DiffSection
+                  key={file.id}
+                  file={file}
+                  headerLabelWidth={headerLabelWidth}
+                  headerStatsWidth={headerStatsWidth}
+                  layout={layout}
+                  selected={file.id === selectedFileId}
+                  selectedHunkIndex={file.id === selectedFileId ? selectedHunkIndex : -1}
+                  shouldLoadHighlight={file.id === selectedFileId || adjacentPrefetchFileIds.has(file.id)}
+                  onHighlightReady={file.id === selectedFileId ? handleSelectedHighlightReady : undefined}
+                  separatorWidth={separatorWidth}
+                  showSeparator={index > 0}
+                  showLineNumbers={showLineNumbers}
+                  showHunkHeaders={showHunkHeaders}
+                  wrapLines={wrapLines}
+                  theme={theme}
+                  viewWidth={diffContentWidth}
+                  visibleAgentNotes={visibleAgentNotesByFile.get(file.id) ?? EMPTY_VISIBLE_AGENT_NOTES}
+                  onDismissAgentNote={onDismissAgentNote}
+                  onOpenAgentNotesAtHunk={(hunkIndex) => onOpenAgentNotesAtHunk(file.id, hunkIndex)}
+                  onSelect={() => onSelectFile(file.id)}
+                />
+              ) : (
+                <DiffSectionPlaceholder
+                  key={file.id}
+                  bodyHeight={estimatedBodyHeights[index] ?? 0}
+                  file={file}
+                  headerLabelWidth={headerLabelWidth}
+                  headerStatsWidth={headerStatsWidth}
+                  separatorWidth={separatorWidth}
+                  showSeparator={index > 0}
+                  theme={theme}
+                  onSelect={() => onSelectFile(file.id)}
+                />
+              );
+            })}
           </box>
         </scrollbox>
       ) : (
diff --git a/src/ui/components/panes/DiffSectionPlaceholder.tsx b/src/ui/components/panes/DiffSectionPlaceholder.tsx
@@ -0,0 +1,78 @@
+import type { DiffFile } from "../../../core/types";
+import { diffSectionId } from "../../lib/ids";
+import { fileLabel } from "../../lib/files";
+import { fitText } from "../../lib/text";
+import type { AppTheme } from "../../themes";
+
+interface DiffSectionPlaceholderProps {
+  bodyHeight: number;
+  file: DiffFile;
+  headerLabelWidth: number;
+  headerStatsWidth: number;
+  separatorWidth: number;
+  showSeparator: boolean;
+  theme: AppTheme;
+  onSelect: () => void;
+}
+
+/** Reserve offscreen section height without mounting its full diff rows. */
+export function DiffSectionPlaceholder({
+  bodyHeight,
+  file,
+  headerLabelWidth,
+  headerStatsWidth,
+  separatorWidth,
+  showSeparator,
+  theme,
+  onSelect,
+}: DiffSectionPlaceholderProps) {
+  const additionsText = `+${file.stats.additions}`;
+  const deletionsText = `-${file.stats.deletions}`;
+
+  return (
+    <box
+      id={diffSectionId(file.id)}
+      style={{
+        width: "100%",
+        flexDirection: "column",
+        backgroundColor: theme.panel,
+      }}
+    >
+      {showSeparator ? (
+        <box
+          style={{
+            width: "100%",
+            height: 1,
+            paddingLeft: 1,
+            paddingRight: 1,
+            backgroundColor: theme.panel,
+          }}
+        >
+          <text fg={theme.border}>{fitText("─".repeat(separatorWidth), separatorWidth)}</text>
+        </box>
+      ) : null}
+
+      <box
+        style={{
+          width: "100%",
+          height: 1,
+          flexDirection: "row",
+          justifyContent: "space-between",
+          paddingLeft: 1,
+          paddingRight: 1,
+          backgroundColor: theme.panel,
+        }}
+        onMouseUp={onSelect}
+      >
+        <text fg={theme.text}>{fitText(fileLabel(file), headerLabelWidth)}</text>
+        <box style={{ width: headerStatsWidth, height: 1, flexDirection: "row", justifyContent: "flex-end" }}>
+          <text fg={theme.badgeAdded}>{additionsText}</text>
+          <text fg={theme.muted}> </text>
+          <text fg={theme.badgeRemoved}>{deletionsText}</text>
+        </box>
+      </box>
+
+      <box style={{ width: "100%", height: bodyHeight, backgroundColor: theme.panel }} />
+    </box>
+  );
+}
diff --git a/src/ui/lib/sectionHeights.ts b/src/ui/lib/sectionHeights.ts
@@ -0,0 +1,57 @@
+import type { FileDiffMetadata } from "@pierre/diffs";
+import type { DiffFile, LayoutMode } from "../../core/types";
+
+/** Count hidden unchanged lines after the final visible hunk when Pierre omits them. */
+function trailingCollapsedLines(metadata: FileDiffMetadata) {
+  const lastHunk = metadata.hunks.at(-1);
+  if (!lastHunk || metadata.isPartial) {
+    return 0;
+  }
+
+  const additionRemaining = metadata.additionLines.length - (lastHunk.additionLineIndex + lastHunk.additionCount);
+  const deletionRemaining = metadata.deletionLines.length - (lastHunk.deletionLineIndex + lastHunk.deletionCount);
+
+  if (additionRemaining !== deletionRemaining) {
+    return 0;
+  }
+
+  return Math.max(additionRemaining, 0);
+}
+
+/** Estimate the number of diff-body rows for one file when wrapping and note cards are off. */
+export function estimateDiffBodyRows(
+  file: DiffFile,
+  layout: Exclude<LayoutMode, "auto">,
+  showHunkHeaders: boolean,
+) {
+  if (file.metadata.hunks.length === 0) {
+    return 1;
+  }
+
+  let rows = 0;
+
+  for (const hunk of file.metadata.hunks) {
+    if (hunk.collapsedBefore > 0) {
+      rows += 1;
+    }
+
+    if (showHunkHeaders) {
+      rows += 1;
+    }
+
+    for (const content of hunk.hunkContent) {
+      if (content.type === "context") {
+        rows += content.lines;
+        continue;
+      }
+
+      rows += layout === "split" ? Math.max(content.deletions, content.additions) : content.deletions + content.additions;
+    }
+  }
+
+  if (trailingCollapsedLines(file.metadata) > 0) {
+    rows += 1;
+  }
+
+  return rows;
+}
diff --git a/test/large-stream-windowing-benchmark.ts b/test/large-stream-windowing-benchmark.ts
@@ -0,0 +1,92 @@
+// Measure first-frame cost for a very large multi-file review stream.
+import { performance } from "perf_hooks";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { parseDiffFromFile } from "@pierre/diffs";
+import { act } from "react";
+import { App } from "../src/ui/App";
+import type { AppBootstrap, DiffFile } from "../src/core/types";
+
+const FILE_COUNT = 180;
+const LINES_PER_FILE = 120;
+
+function createDiffFile(index: number): DiffFile {
+  const path = `src/stream${index}.ts`;
+  const before = Array.from({ length: LINES_PER_FILE }, (_, lineIndex) => {
+    const line = lineIndex + 1;
+    return `export function stream${index}_${line}(value: number) { return value + ${line}; }\n`;
+  }).join("");
+
+  const after = Array.from({ length: LINES_PER_FILE }, (_, lineIndex) => {
+    const line = lineIndex + 1;
+    if (lineIndex >= 36 && lineIndex < 84) {
+      return `export function stream${index}_${line}(value: number) { return value * ${line} + ${index}; }\n`;
+    }
+
+    return `export function stream${index}_${line}(value: number) { return value + ${line}; }\n`;
+  }).join("");
+
+  const metadata = parseDiffFromFile(
+    {
+      name: path,
+      contents: before,
+      cacheKey: `stream:${index}:before`,
+    },
+    {
+      name: path,
+      contents: after,
+      cacheKey: `stream:${index}:after`,
+    },
+    { context: 3 },
+    true,
+  );
+
+  return {
+    id: `stream:${index}`,
+    path,
+    patch: "",
+    language: "typescript",
+    stats: { additions: 48, deletions: 48 },
+    metadata,
+    agent: null,
+  };
+}
+
+function createBootstrap(): AppBootstrap {
+  return {
+    input: {
+      kind: "git",
+      staged: false,
+      options: {
+        mode: "auto",
+      },
+    },
+    changeset: {
+      id: "changeset:large-stream-windowing",
+      sourceLabel: "repo",
+      title: "repo working tree",
+      files: Array.from({ length: FILE_COUNT }, (_, index) => createDiffFile(index + 1)),
+    },
+    initialMode: "split",
+    initialTheme: "midnight",
+  };
+}
+
+const start = performance.now();
+const setup = await testRender(React.createElement(App, { bootstrap: createBootstrap() }), { width: 240, height: 28 });
+
+try {
+  await act(async () => {
+    await setup.renderOnce();
+    await Bun.sleep(0);
+  });
+
+  const firstFrameMs = performance.now() - start;
+  console.log(`METRIC first_frame_ms=${firstFrameMs.toFixed(2)}`);
+  console.log(`METRIC files=${FILE_COUNT}`);
+  console.log(`METRIC lines_per_file=${LINES_PER_FILE}`);
+} finally {
+  await act(async () => {
+    setup.renderer.destroy();
+  });
+}
