Make line wrapping responsive in large diffs (#8006)

* perf(app): make diff line wrapping responsive on large changes

Wrapping eagerly shaped every expanded line before the viewport could paint. Estimate off-screen heights and measure rows as they enter the window, preserving the scroll anchor as geometry becomes exact. Add shared layout and browser benchmarks to track toggle latency and shaping cost.

* fix(app): preserve wrapped diff anchors across bounded relayouts

Resizing can move the viewed row outside the old materialization window. Keep its estimated wrap geometry available to anchor resolution, and measure the anchored row in the same layout pass so inaccurate estimates cannot discard the exact fragment or pixel offset.

packages/app/src/git/diff-document/model.ts

@@ -154,27 +154,38 @@ function appendReusableFileRows(candidate: {
 }): FileRowsResult {
   const reusedRows = candidate.model.rows.slice(candidate.file.rowStart, candidate.file.rowEnd);
   const retainsRowGeometry =
-    !candidate.input.wrapLines &&
     candidate.model.reviewGeometryKey === candidate.reviewGeometryKey &&
     candidate.file.top === candidate.fileTop &&
     candidate.file.fileIndex === candidate.fileIndex &&
     candidate.file.rowStart === candidate.rows.length;
   let top = candidate.bodyTop;
   for (const reusedRow of reusedRows) {
-    let nextRow = retainsRowGeometry ? reusedRow : repositionReusedRow(reusedRow, candidate, top);
+    let nextRow =
+      retainsRowGeometry && reusedRow.top === top
+        ? reusedRow
+        : repositionReusedRow(reusedRow, candidate, top);
     if (
       nextRow.kind === "line" &&
-      intersectsMaterializationWindow(candidate.input, top, top + nextRow.height) &&
+      (intersectsMaterializationWindow(candidate.input, top, top + nextRow.height) ||
+        containsMaterializationAnchor(candidate.input, candidate.file.path, nextRow.cells)) &&
       nextRow.cells.some((cell) => cell && cell.fragments.length === 0)
     ) {
+      const cells = materializeCells(
+        nextRow.cells,
+        candidate.file.file,
+        candidate.file.gutterWidth,
+        candidate.input,
+      );
       nextRow = {
         ...nextRow,
-        cells: materializeCells(
-          nextRow.cells,
-          candidate.file.file,
-          candidate.file.gutterWidth,
-          candidate.input,
-        ),
+        cells,
+        height:
+          Math.max(
+            candidate.input.typography.lineHeight,
+            ...cells.map(
+              (cell) => (cell?.fragments.length ?? 1) * candidate.input.typography.lineHeight,
+            ),
+          ) + nextRow.reviewHeight,
       };
     }
     candidate.rows.push(nextRow);
@@ -240,6 +251,7 @@ function appendNewFileRows(candidate: {
   const lines = geometryLines(
     lineSources(candidate.file, candidate.input.layout, false),
     candidate.input,
+    candidate.gutterWidth,
   );
   const fileBottom =
     candidate.bodyTop +
@@ -252,8 +264,8 @@ function appendNewFileRows(candidate: {
   let maximumHorizontalOverflow = 0;
   for (const line of lines) {
     const shouldMaterialize =
-      candidate.input.wrapLines ||
-      intersectsMaterializationWindow(candidate.input, top, top + line.height);
+      intersectsMaterializationWindow(candidate.input, top, top + line.height) ||
+      containsMaterializationAnchor(candidate.input, candidate.file.path, line.cells);
     const cells = shouldMaterialize
       ? materializeCells(line.cells, candidate.file, candidate.gutterWidth, candidate.input)
       : line.cells;
@@ -275,7 +287,7 @@ function appendNewFileRows(candidate: {
       candidate.input.typography.lineHeight,
       ...cells.map((cell) => (cell?.fragments.length ?? 1) * candidate.input.typography.lineHeight),
     );
-    const height = textHeight + line.reviewHeight;
+    const height = shouldMaterialize ? textHeight + line.reviewHeight : line.height;
     candidate.rows.push({
       kind: "line",
       index: candidate.rows.length,
@@ -412,13 +424,14 @@ function cellSource(line: SplitDiffDisplayLine | null, includeTokens: boolean):
   };
 }
 
-function geometryCell(source: CellSource): DiffCell {
+function geometryCell(source: CellSource, estimatedWrapColumns: number): DiffCell {
   return {
     type: source.type,
     content: source.content,
     lineNumber: source.lineNumber,
     tokens: [],
     fragments: [],
+    estimatedWrapColumns,
     reviewTarget: source.reviewTarget,
     sourceIdentity: source.sourceIdentity,
   };
@@ -427,20 +440,87 @@ function geometryCell(source: CellSource): DiffCell {
 function geometryLines(
   sources: Array<[CellSource] | [CellSource | null, CellSource | null]>,
   input: BuildDiffDocumentModelInput,
+  gutterWidth: number,
 ): GeometryLine[] {
+  const characterWidth = input.wrapLines ? input.measureText.measure("M") : 0;
   return sources.map((sourceCells) => {
+    const columns = input.wrapLines
+      ? Math.max(
+          1,
+          Math.floor(
+            (input.viewportWidth / sourceCells.length - gutterWidth - CODE_HORIZONTAL_PADDING) /
+              characterWidth,
+          ),
+        )
+      : Infinity;
     const cells = sourceCells.map((source) =>
-      source ? geometryCell(source) : null,
+      source ? geometryCell(source, columns) : null,
     ) as DiffLineRow["cells"];
     const reviewHeight = reviewHeightForCells(cells, input);
     return {
       cells,
       reviewHeight,
-      height: input.typography.lineHeight + reviewHeight,
+      // Unseen wrapped rows use a monospace estimate; materialization replaces
+      // it with the exact fragment count without changing source identity.
+      height:
+        input.typography.lineHeight *
+          Math.max(
+            1,
+            ...cells.map((cell) => {
+              return cell && input.wrapLines
+                ? Math.ceil(estimatedDisplayOffset(cell.content) / columns)
+                : 1;
+            }),
+          ) +
+        reviewHeight,
     };
   });
 }
 
+// Use the same tab expansion and column count for estimated heights and anchors.
+function estimatedDisplayOffset(text: string): number {
+  return text.length + (text.match(/\t/g)?.length ?? 0) * 3;
+}
+
+function estimatedVisualLine(cell: DiffCell, sourceOffset: number): number {
+  return Math.floor(
+    estimatedDisplayOffset(cell.content.slice(0, sourceOffset)) /
+      (cell.estimatedWrapColumns ?? Infinity),
+  );
+}
+
+function estimatedFragment(cell: DiffCell, visualIndex: number, lineHeight: number) {
+  const columns = cell.estimatedWrapColumns ?? Infinity;
+  const lastIndex = Math.max(0, Math.ceil(estimatedDisplayOffset(cell.content) / columns) - 1);
+  const index = Math.min(visualIndex, lastIndex);
+  const displayOffset = index === 0 ? 0 : index * columns;
+  let start = Math.min(displayOffset, cell.content.length);
+  if (cell.content.includes("\t")) {
+    let offset = 0;
+    start = 0;
+    while (start < cell.content.length && offset < displayOffset) {
+      offset += cell.content[start] === "\t" ? 4 : 1;
+      start += 1;
+    }
+  }
+  return { start, top: index * lineHeight };
+}
+
+// A resize can move the anchor outside the old window. Measure that row in the
+// same pass: estimated columns cannot identify exact shaped-text fragments.
+function containsMaterializationAnchor(
+  input: BuildDiffDocumentModelInput,
+  path: string,
+  cells: DiffLineRow["cells"],
+): boolean {
+  const anchor = input.materializationAnchor;
+  return (
+    anchor?.kind === "text" &&
+    anchor.path === path &&
+    cells.some((cell) => cell && sameSourceIdentity(cell.sourceIdentity, anchor.sourceIdentity))
+  );
+}
+
 function intersectsMaterializationWindow(
   input: BuildDiffDocumentModelInput,
   fileTop: number,
@@ -795,17 +875,27 @@ export function captureScrollAnchor(
   }
   const textY = Math.max(0, Math.min(scrollTop - row.top, row.height - row.reviewHeight));
   const visualIndex = Math.max(0, Math.floor(textY / model.lineHeight));
-  let cellIndex = row.cells.findIndex((cell) => Boolean(cell?.fragments[visualIndex]));
+  let cellIndex = row.cells.findIndex(
+    (cell) =>
+      cell &&
+      (cell.fragments.length > 0
+        ? Boolean(cell.fragments[visualIndex])
+        : estimatedFragment(cell, visualIndex, model.lineHeight).top ===
+          visualIndex * model.lineHeight),
+  );
   if (cellIndex < 0) cellIndex = row.cells.findIndex((cell) => cell !== null);
   const cell = row.cells[cellIndex];
   if (!cell) return { kind: "header", path: file.path, viewportDelta: row.top - scrollTop };
-  const fragment = cell.fragments[Math.min(cell.fragments.length - 1, visualIndex)];
-  const anchorY = row.top + (fragment?.top ?? 0);
+  const fragment =
+    cell.fragments.length > 0
+      ? cell.fragments[Math.min(cell.fragments.length - 1, visualIndex)]!
+      : estimatedFragment(cell, visualIndex, model.lineHeight);
+  const anchorY = row.top + fragment.top;
   return {
     kind: "text",
     path: file.path,
     sourceIdentity: cell.sourceIdentity,
-    cellOffset: fragment?.start ?? 0,
+    cellOffset: fragment.start,
     viewportDelta: anchorY - scrollTop,
   };
 }
@@ -831,8 +921,10 @@ export function resolveScrollAnchor(model: DiffDocumentModel, anchor: DiffScroll
   const fragment =
     cell.fragments.find(
       (candidate) => candidate.start <= anchor.cellOffset && anchor.cellOffset < candidate.end,
-    ) ?? cell.fragments.at(-1);
-  return Math.max(0, row.top + (fragment?.top ?? 0) - anchor.viewportDelta);
+    ) ??
+    cell.fragments.at(-1) ??
+    estimatedFragment(cell, estimatedVisualLine(cell, anchor.cellOffset), model.lineHeight);
+  return Math.max(0, row.top + fragment.top - anchor.viewportDelta);
 }
 
 export function resolveRelayoutScrollTop(