pi-diff-review 0.1.0 → 0.1.1

package/README.md

@@ -8,6 +8,16 @@ Easily provide code reviews directly within [pi](https://pi.dev/).
 
 ## Install
 
+Install from npm:
+
+```bash
+pi install npm:pi-diff-review
+```
+
+Package: https://www.npmjs.com/package/pi-diff-review
+
+Or install directly from GitHub:
+
 ```bash
 pi install https://github.com/cmpadden/pi-diff-review
 ```
@@ -17,6 +27,8 @@ pi install https://github.com/cmpadden/pi-diff-review
 - `/diff` reviews the current unstaged `git diff`
 - `/diff <git-diff-args>` passes arguments through to `git diff` (for example `/diff main...HEAD`)
 - `j/k` or arrow keys to move
+- `ctrl-u` / `ctrl-d` to move up/down by half a page
+- `t` toggles the diff between unified and side-by-side split rendering
 - `J/K` to extend a highlighted selection into a comment range
 - `esc` clears the active selection, or exits review when no selection is active
 - `n/p` to jump hunks

package/extensions/review.ts

@@ -1,4 +1,11 @@
 import { execFileSync } from "node:child_process";
+import { parsePatchFiles } from "@pierre/diffs";
+import type {
+  ChangeContent,
+  ContextContent,
+  FileDiffMetadata,
+  Hunk,
+} from "@pierre/diffs";
 import type {
   ExtensionAPI,
   ExtensionCommandContext,
@@ -53,6 +60,18 @@ type DiffSource = {
   args: string[];
 };
 
+type ReviewLayout = "side-by-side" | "stacked";
+type DiffRenderMode = "unified" | "split";
+
+type SplitDiffCell = {
+  line: ReviewLine;
+  index: number;
+};
+
+type SplitDiffRow =
+  | { kind: "full"; cell: SplitDiffCell }
+  | { kind: "split"; left?: SplitDiffCell; right?: SplitDiffCell };
+
 function parseDiffSource(args: string): DiffSource {
   const trimmed = args.trim();
   if (!trimmed) {
@@ -72,14 +91,284 @@ function parseDiffSource(args: string): DiffSource {
 }
 
 function getDiff(cwd: string, source: DiffSource): string {
-  return execFileSync("git", ["diff", "--no-color", "--unified=3", ...source.args], {
-    cwd,
-    encoding: "utf8",
-    stdio: ["ignore", "pipe", "pipe"],
-  });
+  return execFileSync(
+    "git",
+    ["diff", "--no-color", "--unified=3", ...source.args],
+    {
+      cwd,
+      encoding: "utf8",
+      stdio: ["ignore", "pipe", "pipe"],
+    },
+  );
 }
 
 function parseDiff(diffText: string): ReviewLine[] {
+  try {
+    const reviewLines = parseDiffWithPierre(diffText);
+    if (reviewLines.length > 0) return reviewLines;
+  } catch {
+    // Fall back to the local parser for any patch formats @pierre/diffs does
+    // not recognize. The review UI should remain available even if the richer
+    // parser fails on unusual diff output.
+  }
+
+  return parseDiffManual(diffText);
+}
+
+function parseDiffWithPierre(diffText: string): ReviewLine[] {
+  const patches = parsePatchFiles(diffText);
+  const parsed: ReviewLine[] = [];
+  let lineIndex = 0;
+
+  const pushLine = (line: Omit<ReviewLine, "id">) => {
+    parsed.push({ id: `line-${lineIndex++}`, ...line });
+  };
+
+  for (const patch of patches) {
+    if (patch.patchMetadata?.trim()) {
+      for (const line of patch.patchMetadata.trimEnd().split("\n")) {
+        pushLine({ kind: "meta", text: line, commentable: false });
+      }
+    }
+
+    for (const file of patch.files) {
+      appendPierreFileDiff(file, pushLine);
+    }
+  }
+
+  return parsed;
+}
+
+function appendPierreFileDiff(
+  file: FileDiffMetadata,
+  pushLine: (line: Omit<ReviewLine, "id">) => void,
+): void {
+  const previousFile =
+    file.prevName ?? (file.type === "new" ? undefined : file.name);
+  const nextFile = file.type === "deleted" ? undefined : file.name;
+  const displayPreviousFile = previousFile ?? file.name;
+  const displayNextFile = nextFile ?? file.name;
+  const currentFile = nextFile ?? previousFile ?? file.name;
+
+  pushLine({
+    kind: "meta",
+    text: `diff --git a/${displayPreviousFile} b/${displayNextFile}`,
+    filePath: currentFile,
+    commentable: false,
+  });
+
+  if (file.type === "new" && file.mode) {
+    pushLine({
+      kind: "meta",
+      text: `new file mode ${file.mode}`,
+      filePath: currentFile,
+      commentable: false,
+    });
+  } else if (file.type === "deleted" && file.mode) {
+    pushLine({
+      kind: "meta",
+      text: `deleted file mode ${file.mode}`,
+      filePath: currentFile,
+      commentable: false,
+    });
+  } else if (file.prevMode && file.mode && file.prevMode !== file.mode) {
+    pushLine({
+      kind: "meta",
+      text: `old mode ${file.prevMode}`,
+      filePath: currentFile,
+      commentable: false,
+    });
+    pushLine({
+      kind: "meta",
+      text: `new mode ${file.mode}`,
+      filePath: currentFile,
+      commentable: false,
+    });
+  }
+
+  if (file.prevObjectId && file.newObjectId) {
+    pushLine({
+      kind: "meta",
+      text: `index ${file.prevObjectId}..${file.newObjectId}${file.mode ? ` ${file.mode}` : ""}`,
+      filePath: currentFile,
+      commentable: false,
+    });
+  }
+
+  if (file.type === "rename-pure" || file.type === "rename-changed") {
+    if (file.prevName) {
+      pushLine({
+        kind: "meta",
+        text: `rename from ${file.prevName}`,
+        filePath: currentFile,
+        commentable: false,
+      });
+    }
+    pushLine({
+      kind: "meta",
+      text: `rename to ${file.name}`,
+      filePath: currentFile,
+      commentable: false,
+    });
+  }
+
+  if (file.hunks.length === 0) return;
+
+  pushLine({
+    kind: "meta",
+    text: previousFile ? `--- a/${previousFile}` : "--- /dev/null",
+    filePath: currentFile,
+    commentable: false,
+  });
+  pushLine({
+    kind: "meta",
+    text: nextFile ? `+++ b/${nextFile}` : "+++ /dev/null",
+    filePath: currentFile,
+    commentable: false,
+  });
+
+  for (const hunk of file.hunks) {
+    appendPierreHunk(file, hunk, currentFile, pushLine);
+  }
+}
+
+function appendPierreHunk(
+  file: FileDiffMetadata,
+  hunk: Hunk,
+  currentFile: string,
+  pushLine: (line: Omit<ReviewLine, "id">) => void,
+): void {
+  const hunkLabel = hunk.hunkSpecs?.trimEnd() ?? "@@";
+  let oldLine = hunk.deletionStart;
+  let newLine = hunk.additionStart;
+  let deletionIndex = hunk.deletionLineIndex;
+  let additionIndex = hunk.additionLineIndex;
+
+  pushLine({
+    kind: "hunk",
+    text: hunkLabel,
+    filePath: currentFile,
+    commentable: false,
+    hunkLabel,
+  });
+
+  for (const content of hunk.hunkContent) {
+    if (content.type === "context") {
+      ({ oldLine, newLine, deletionIndex, additionIndex } = appendPierreContext(
+        file,
+        content,
+        currentFile,
+        hunkLabel,
+        oldLine,
+        newLine,
+        deletionIndex,
+        additionIndex,
+        pushLine,
+      ));
+    } else {
+      ({ oldLine, newLine, deletionIndex, additionIndex } = appendPierreChange(
+        file,
+        content,
+        currentFile,
+        hunkLabel,
+        oldLine,
+        newLine,
+        deletionIndex,
+        additionIndex,
+        pushLine,
+      ));
+    }
+  }
+}
+
+type PierreLineState = {
+  oldLine: number;
+  newLine: number;
+  deletionIndex: number;
+  additionIndex: number;
+};
+
+function appendPierreContext(
+  file: FileDiffMetadata,
+  content: ContextContent,
+  currentFile: string,
+  hunkLabel: string,
+  oldLine: number,
+  newLine: number,
+  deletionIndex: number,
+  additionIndex: number,
+  pushLine: (line: Omit<ReviewLine, "id">) => void,
+): PierreLineState {
+  for (let i = 0; i < content.lines; i++) {
+    const lineText =
+      file.deletionLines[deletionIndex] ??
+      file.additionLines[additionIndex] ??
+      "";
+    pushLine({
+      kind: "context",
+      text: ` ${stripLineEnding(lineText)}`,
+      filePath: currentFile,
+      oldLineNumber: oldLine,
+      newLineNumber: newLine,
+      commentable: true,
+      hunkLabel,
+    });
+    oldLine++;
+    newLine++;
+    deletionIndex++;
+    additionIndex++;
+  }
+
+  return { oldLine, newLine, deletionIndex, additionIndex };
+}
+
+function appendPierreChange(
+  file: FileDiffMetadata,
+  content: ChangeContent,
+  currentFile: string,
+  hunkLabel: string,
+  oldLine: number,
+  newLine: number,
+  deletionIndex: number,
+  additionIndex: number,
+  pushLine: (line: Omit<ReviewLine, "id">) => void,
+): PierreLineState {
+  for (let i = 0; i < content.deletions; i++) {
+    const lineText = file.deletionLines[deletionIndex] ?? "";
+    pushLine({
+      kind: "remove",
+      text: `-${stripLineEnding(lineText)}`,
+      filePath: currentFile,
+      oldLineNumber: oldLine,
+      commentable: true,
+      hunkLabel,
+    });
+    oldLine++;
+    deletionIndex++;
+  }
+
+  for (let i = 0; i < content.additions; i++) {
+    const lineText = file.additionLines[additionIndex] ?? "";
+    pushLine({
+      kind: "add",
+      text: `+${stripLineEnding(lineText)}`,
+      filePath: currentFile,
+      newLineNumber: newLine,
+      commentable: true,
+      hunkLabel,
+    });
+    newLine++;
+    additionIndex++;
+  }
+
+  return { oldLine, newLine, deletionIndex, additionIndex };
+}
+
+function stripLineEnding(text: string): string {
+  return text.replace(/\r?\n$/, "");
+}
+
+function parseDiffManual(diffText: string): ReviewLine[] {
   const lines = diffText.split("\n");
   const parsed: ReviewLine[] = [];
 
@@ -279,6 +568,8 @@ class ReviewComponent {
   private editMode = false;
   private editingCommentKey?: string;
   private selectionAnchor?: number;
+  private layout: ReviewLayout = "side-by-side";
+  private diffRenderMode: DiffRenderMode = "unified";
   private editor: Editor;
 
   constructor(
@@ -318,7 +609,10 @@ class ReviewComponent {
       if (!trimmed) {
         this.comments.delete(key);
       } else {
-        this.comments.set(key, this.buildCommentFromSelection(selection, trimmed));
+        this.comments.set(
+          key,
+          this.buildCommentFromSelection(selection, trimmed),
+        );
       }
 
       this.exitEditMode();
@@ -348,6 +642,18 @@ class ReviewComponent {
       this.done({ action: "cancel" });
       return;
     }
+    if (data === "t") {
+      this.toggleDiffRenderMode();
+      return;
+    }
+    if (matchesKey(data, "ctrl+d")) {
+      this.move(this.getPageMoveAmount());
+      return;
+    }
+    if (matchesKey(data, "ctrl+u")) {
+      this.move(-this.getPageMoveAmount());
+      return;
+    }
     if (data === "j" || matchesKey(data, "down")) {
       this.move(1);
       return;
@@ -390,33 +696,13 @@ class ReviewComponent {
   }
 
   render(width: number): string[] {
-    const terminalRows = this.tui.terminal?.rows ?? 24;
-    const headerHeight = 3;
-    const footerHeight = 2;
-    const viewportHeight = Math.max(
-      6,
-      terminalRows - headerHeight - footerHeight,
-    );
-    this.ensureScroll(viewportHeight);
-
-    const rightWidth = Math.max(28, Math.floor(width * 0.34));
-    const separatorWidth = 3;
-    const leftWidth = Math.max(30, width - rightWidth - separatorWidth);
-
+    const viewportHeight = this.getContentHeight();
     const selectedLine = this.lines[this.selected];
-    const rightPane = this.renderRightPane(
-      rightWidth,
-      viewportHeight,
-      selectedLine,
-    );
     const output: string[] = [];
 
     output.push(
       truncateToWidth(
-        this.theme.fg(
-          "accent",
-          this.theme.bold(`Local Review: ${this.title}`),
-        ),
+        this.theme.fg("accent", this.theme.bold(`Local Review: ${this.title}`)),
         width,
       ),
     );
@@ -428,29 +714,25 @@ class ReviewComponent {
             ? `${this.lines.length} lines • ${this.comments.size} comments • editing comment • Enter save • Esc/Ctrl+C cancel`
             : this.hasSelection()
               ? `${this.lines.length} lines • ${this.comments.size} comments • J/K extend • Esc clear selection • c comment range • R submit`
-              : `${this.lines.length} lines • ${this.comments.size} comments • j/k move • J/K extend • c comment • x delete • n/p hunk • R submit • q quit`,
+              : `${this.lines.length} lines • ${this.comments.size} comments • j/k move • ctrl-u/d page • t unified/split • J/K extend • c comment • x delete • n/p hunk • R submit • q quit`,
         ),
         width,
       ),
     );
     output.push(this.theme.fg("border", "─".repeat(width)));
 
-    const selection = this.getSelectionBounds();
-    for (let row = 0; row < viewportHeight; row++) {
-      const index = this.scrollTop + row;
-      const line = this.lines[index];
-      const left = line
-        ? this.renderDiffLine(
-            line,
-            index,
-            leftWidth,
-            index === this.selected,
-            selection,
-          )
-        : " ".repeat(leftWidth);
-      const right = rightPane[row] ?? " ".repeat(rightWidth);
-      const combined = `${padToWidth(left, leftWidth)}${this.theme.fg("borderMuted", " │ ")}${padToWidth(right, rightWidth)}`;
-      output.push(truncateToWidth(combined, width));
+    if (this.layout === "side-by-side") {
+      this.ensureScroll(viewportHeight);
+      output.push(
+        ...this.renderSideBySide(width, viewportHeight, selectedLine),
+      );
+    } else {
+      const { diffHeight, commentsHeight } =
+        this.getStackedHeights(viewportHeight);
+      this.ensureScroll(diffHeight);
+      output.push(
+        ...this.renderStacked(width, diffHeight, commentsHeight, selectedLine),
+      );
     }
 
     output.push(this.theme.fg("border", "─".repeat(width)));
@@ -463,6 +745,140 @@ class ReviewComponent {
     return output;
   }
 
+  private renderSideBySide(
+    width: number,
+    height: number,
+    selectedLine?: ReviewLine,
+  ): string[] {
+    const rightWidth = Math.max(28, Math.floor(width * 0.34));
+    const separatorWidth = 3;
+    const leftWidth = Math.max(30, width - rightWidth - separatorWidth);
+    const rightPane = this.renderRightPane(rightWidth, height, selectedLine);
+    const output: string[] = [];
+    const diffPane = this.renderDiffRows(leftWidth, height);
+
+    for (let row = 0; row < height; row++) {
+      const left = diffPane[row] ?? " ".repeat(leftWidth);
+      const right = rightPane[row] ?? " ".repeat(rightWidth);
+      const combined = `${padToWidth(left, leftWidth)}${this.theme.fg("borderMuted", " │ ")}${padToWidth(right, rightWidth)}`;
+      output.push(truncateToWidth(combined, width));
+    }
+
+    return output;
+  }
+
+  private renderStacked(
+    width: number,
+    diffHeight: number,
+    commentsHeight: number,
+    selectedLine?: ReviewLine,
+  ): string[] {
+    const comments = this.renderRightPane(width, commentsHeight, selectedLine);
+    return [
+      ...this.renderDiffRows(width, diffHeight),
+      this.theme.fg("borderMuted", "─".repeat(width)),
+      ...Array.from({ length: commentsHeight }, (_, index) =>
+        padToWidth(truncateToWidth(comments[index] ?? "", width), width),
+      ),
+    ];
+  }
+
+  private renderDiffRows(width: number, height: number): string[] {
+    return this.diffRenderMode === "split"
+      ? this.renderSplitDiffRows(width, height)
+      : this.renderUnifiedDiffRows(width, height);
+  }
+
+  private renderUnifiedDiffRows(width: number, height: number): string[] {
+    const output: string[] = [];
+    const selection = this.getSelectionBounds();
+
+    for (let row = 0; row < height; row++) {
+      const index = this.scrollTop + row;
+      const line = this.lines[index];
+      output.push(
+        line
+          ? this.renderDiffLine(
+              line,
+              index,
+              width,
+              index === this.selected,
+              selection,
+            )
+          : " ".repeat(width),
+      );
+    }
+
+    return output;
+  }
+
+  private renderSplitDiffRows(width: number, height: number): string[] {
+    const rows = this.buildSplitDiffRows();
+    const output: string[] = [];
+    const separatorWidth = 3;
+    const leftWidth = Math.max(10, Math.floor((width - separatorWidth) / 2));
+    const rightWidth = Math.max(10, width - leftWidth - separatorWidth);
+
+    for (let row = 0; row < height; row++) {
+      const splitRow = rows[this.scrollTop + row];
+      if (!splitRow) {
+        output.push(" ".repeat(width));
+        continue;
+      }
+
+      if (splitRow.kind === "full") {
+        output.push(
+          this.renderDiffLine(
+            splitRow.cell.line,
+            splitRow.cell.index,
+            width,
+            splitRow.cell.index === this.selected,
+            this.getSelectionBounds(),
+          ),
+        );
+        continue;
+      }
+
+      const left = splitRow.left
+        ? this.renderSplitDiffCell(splitRow.left, leftWidth, "left")
+        : " ".repeat(leftWidth);
+      const right = splitRow.right
+        ? this.renderSplitDiffCell(splitRow.right, rightWidth, "right")
+        : " ".repeat(rightWidth);
+      output.push(
+        truncateToWidth(
+          `${padToWidth(left, leftWidth)}${this.theme.fg("borderMuted", " │ ")}${padToWidth(right, rightWidth)}`,
+          width,
+        ),
+      );
+    }
+
+    return output;
+  }
+
+  private getContentHeight(): number {
+    const terminalRows = this.tui.terminal?.rows ?? 24;
+    const headerHeight = 3;
+    const footerHeight = 2;
+    return Math.max(6, terminalRows - headerHeight - footerHeight);
+  }
+
+  private getStackedHeights(viewportHeight: number): {
+    diffHeight: number;
+    commentsHeight: number;
+  } {
+    const availableForPanes = Math.max(2, viewportHeight - 1);
+    let diffHeight = Math.max(1, Math.floor(availableForPanes * 0.6));
+    let commentsHeight = availableForPanes - diffHeight;
+
+    if (commentsHeight < 3 && availableForPanes >= 4) {
+      commentsHeight = 3;
+      diffHeight = availableForPanes - commentsHeight;
+    }
+
+    return { diffHeight, commentsHeight };
+  }
+
   invalidate(): void {}
 
   private move(delta: number): void {
@@ -473,6 +889,27 @@ class ReviewComponent {
     this.tui.requestRender();
   }
 
+  private toggleLayout(): void {
+    this.layout = this.layout === "side-by-side" ? "stacked" : "side-by-side";
+    this.tui.requestRender(true);
+  }
+
+  private toggleDiffRenderMode(): void {
+    this.diffRenderMode =
+      this.diffRenderMode === "unified" ? "split" : "unified";
+    this.scrollTop = 0;
+    this.tui.requestRender(true);
+  }
+
+  private getPageMoveAmount(): number {
+    const contentHeight = this.getContentHeight();
+    const diffHeight =
+      this.layout === "stacked"
+        ? this.getStackedHeights(contentHeight).diffHeight
+        : contentHeight;
+    return Math.max(1, Math.floor(diffHeight / 2));
+  }
+
   private extendSelection(delta: number): void {
     if (this.selectionAnchor == null) {
       this.selectionAnchor = this.selected;
@@ -490,7 +927,9 @@ class ReviewComponent {
   }
 
   private hasSelection(): boolean {
-    return this.selectionAnchor != null && this.selectionAnchor !== this.selected;
+    return (
+      this.selectionAnchor != null && this.selectionAnchor !== this.selected
+    );
   }
 
   private getSelectionBounds(): SelectionBounds | undefined {
@@ -517,7 +956,9 @@ class ReviewComponent {
     selection: SelectionBounds | undefined,
   ): ReviewComment | undefined {
     if (!selection) return undefined;
-    return this.comments.get(this.getSelectionKey(selection.start, selection.end));
+    return this.comments.get(
+      this.getSelectionKey(selection.start, selection.end),
+    );
   }
 
   private getCommentKeysForLine(index: number): string[] {
@@ -525,8 +966,12 @@ class ReviewComponent {
     if (!line) return [];
     return [...this.comments.entries()]
       .filter(([, comment]) => {
-        const start = this.lines.findIndex((item) => item.id === comment.startLineId);
-        const end = this.lines.findIndex((item) => item.id === comment.endLineId);
+        const start = this.lines.findIndex(
+          (item) => item.id === comment.startLineId,
+        );
+        const end = this.lines.findIndex(
+          (item) => item.id === comment.endLineId,
+        );
         return start !== -1 && end !== -1 && index >= start && index <= end;
       })
       .map(([key]) => key);
@@ -596,7 +1041,10 @@ class ReviewComponent {
 
     const existing = this.getCommentForSelection(selection);
     this.editMode = true;
-    this.editingCommentKey = this.getSelectionKey(selection.start, selection.end);
+    this.editingCommentKey = this.getSelectionKey(
+      selection.start,
+      selection.end,
+    );
     this.editor.setText(existing?.text ?? "");
     this.tui.requestRender(true);
   }
@@ -608,16 +1056,117 @@ class ReviewComponent {
     this.tui.requestRender(true);
   }
 
+  private buildSplitDiffRows(): SplitDiffRow[] {
+    const rows: SplitDiffRow[] = [];
+    let index = 0;
+
+    while (index < this.lines.length) {
+      const line = this.lines[index]!;
+
+      if (line.kind === "remove" || line.kind === "add") {
+        const removals: SplitDiffCell[] = [];
+        const additions: SplitDiffCell[] = [];
+
+        while (this.lines[index]?.kind === "remove") {
+          removals.push({ line: this.lines[index]!, index });
+          index++;
+        }
+        while (this.lines[index]?.kind === "add") {
+          additions.push({ line: this.lines[index]!, index });
+          index++;
+        }
+
+        const count = Math.max(removals.length, additions.length);
+        for (let offset = 0; offset < count; offset++) {
+          rows.push({
+            kind: "split",
+            left: removals[offset],
+            right: additions[offset],
+          });
+        }
+        continue;
+      }
+
+      if (line.kind === "context") {
+        const cell = { line, index };
+        rows.push({ kind: "split", left: cell, right: cell });
+      } else {
+        rows.push({ kind: "full", cell: { line, index } });
+      }
+      index++;
+    }
+
+    return rows;
+  }
+
+  private getSelectedDisplayRow(): number {
+    if (this.diffRenderMode === "unified") return this.selected;
+    const rows = this.buildSplitDiffRows();
+    const row = rows.findIndex((item) =>
+      item.kind === "full"
+        ? item.cell.index === this.selected
+        : item.left?.index === this.selected ||
+          item.right?.index === this.selected,
+    );
+    return row === -1 ? 0 : row;
+  }
+
+  private getDisplayRowCount(): number {
+    return this.diffRenderMode === "unified"
+      ? this.lines.length
+      : this.buildSplitDiffRows().length;
+  }
+
+  private renderSplitDiffCell(
+    cell: SplitDiffCell,
+    width: number,
+    side: "left" | "right",
+  ): string {
+    const { line, index } = cell;
+    const hasComment = this.getCommentKeysForLine(index).length > 0;
+    const commentMark = hasComment ? this.theme.fg("warning", "●") : " ";
+    const lineNumber =
+      side === "left" ? line.oldLineNumber : line.newLineNumber;
+    const raw = `${commentMark} ${lineNumberCell(lineNumber)} ${line.text}`;
+
+    let styled: string;
+    switch (line.kind) {
+      case "add":
+        styled = this.theme.fg("toolDiffAdded", raw);
+        break;
+      case "remove":
+        styled = this.theme.fg("toolDiffRemoved", raw);
+        break;
+      case "context":
+        styled = this.theme.fg("toolDiffContext", raw);
+        break;
+      default:
+        styled = this.theme.fg("muted", raw);
+    }
+
+    styled = truncateToWidth(styled, width);
+    const selection = this.getSelectionBounds();
+    const inSelection =
+      selection != null && index >= selection.start && index <= selection.end;
+    if (index === this.selected || inSelection) {
+      return this.theme.bg("selectedBg", padToWidth(styled, width));
+    }
+    return styled;
+  }
+
   private ensureScroll(viewportHeight: number): void {
-    if (this.selected < this.scrollTop) {
-      this.scrollTop = this.selected;
+    const selectedRow = this.getSelectedDisplayRow();
+    const rowCount = this.getDisplayRowCount();
+
+    if (selectedRow < this.scrollTop) {
+      this.scrollTop = selectedRow;
     }
-    if (this.selected >= this.scrollTop + viewportHeight) {
-      this.scrollTop = this.selected - viewportHeight + 1;
+    if (selectedRow >= this.scrollTop + viewportHeight) {
+      this.scrollTop = selectedRow - viewportHeight + 1;
     }
     this.scrollTop = Math.max(
       0,
-      Math.min(this.scrollTop, Math.max(0, this.lines.length - viewportHeight)),
+      Math.min(this.scrollTop, Math.max(0, rowCount - viewportHeight)),
     );
   }
 
@@ -835,7 +1384,9 @@ export default function (pi: ExtensionAPI) {
         return;
       }
 
-      pi.sendUserMessage(buildReviewPrompt(result.comments, source.promptLabel));
+      pi.sendUserMessage(
+        buildReviewPrompt(result.comments, source.promptLabel),
+      );
     },
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-diff-review",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Local diff review TUI extension for pi",
   "license": "MIT",
   "repository": {
@@ -38,5 +38,8 @@
     "extensions": [
       "./extensions"
     ]
+  },
+  "dependencies": {
+    "@pierre/diffs": "^1.1.21"
   }
 }