pi-diff-review 0.1.12 → 0.1.14

package/src/review-component.ts

@@ -9,60 +9,71 @@ import {
   visibleWidth,
   wrapTextWithAnsi,
 } from "@earendil-works/pi-tui";
-import type {
-  DiffExplainer,
-  ExplanationScope,
-  ExplanationState,
-} from "./explain.ts";
-import { formatLocation } from "./prompt.ts";
+import type { DiffExplainer } from "./explain.ts";
+import {
+  GLOBAL_COMMENT_KEY,
+  buildCommentFromSelection,
+  buildCommentLineKeys,
+  buildGlobalComment,
+  getSelectionKey,
+} from "./comment-manager.ts";
+import {
+  ExplanationController,
+  getCurrentHunkScope,
+} from "./explanation-controller.ts";
+import { formatCommentLocation, formatLocation } from "./prompt.ts";
+import { ReviewNavigationState } from "./review-navigation.ts";
+import { padToWidth, lineNumberCell } from "./render-utils.ts";
+import { buildSplitDiffRows } from "./split-diff.ts";
 import type {
   DiffRenderMode,
   ReviewComment,
-  ReviewLayout,
   ReviewLine,
   ReviewResult,
   ReviewTheme,
   ReviewTui,
-  RightPaneMode,
   SelectionBounds,
   SplitDiffCell,
   SplitDiffRow,
 } from "./types.ts";
 
-function padToWidth(text: string, width: number): string {
-  const visible = visibleWidth(text);
-  if (visible >= width) return truncateToWidth(text, width);
-  return text + " ".repeat(width - visible);
-}
+type InlineBoxPart = "top" | "body" | "bottom";
+type InlineBoxRowKind = "comment" | "editor" | "explanation";
+type InlineBoxRow = {
+  kind: InlineBoxRowKind;
+  text: string;
+  part: InlineBoxPart;
+};
 
-function lineNumberCell(value?: number): string {
-  return value == null ? "    " : String(value).padStart(4, " ");
-}
-
-const GLOBAL_COMMENT_KEY = "__global_diff_comment__";
+type AnnotatedDiffRow =
+  | { kind: "diff"; lineIndex: number }
+  | { kind: "split"; splitRowIndex: number }
+  | InlineBoxRow;
 
 export class ReviewComponent {
-  private selected = 0;
-  private scrollTop = 0;
+  private navigation: ReviewNavigationState;
   private editMode = false;
   private editingCommentKey?: string;
-  private selectionAnchor?: number;
-  private layout: ReviewLayout = "side-by-side";
-  private diffRenderMode: DiffRenderMode = "unified";
-  private rightPaneMode: RightPaneMode = "comments";
-  private explanations = new Map<string, ExplanationState>();
-  private explanationAbort?: AbortController;
-  private explanationRequestId = 0;
-  private loadingFrame = 0;
-  private loadingTimer?: ReturnType<typeof setInterval>;
+
+  private inlineAnnotationsVisible = true;
+  private visibleExplanationKeys = new Set<string>();
+  private explanationController: ExplanationController;
   private editor: Editor;
   private splitRows?: SplitDiffRow[];
-  private splitRowByLineIndex?: number[];
   private lineIndexById = new Map<string, number>();
   private commentLineKeys = new Map<number, string[]>();
   private commentsRevision = 0;
   private commentLineKeysRevision = -1;
   private highlightedLineCache = new Map<string, string>();
+  private annotatedRows?: AnnotatedDiffRow[];
+  private annotatedRowsWidth = 0;
+  private annotatedRowsRevision = -1;
+  private annotatedRowsEditMode = false;
+  private annotatedRowsEditingCommentKey?: string;
+  private annotatedRowsMode?: DiffRenderMode;
+  private annotatedRowsInlineAnnotationsVisible = true;
+  private annotatedRowsVisibleExplanationCount = 0;
+  private annotatedRowByLineIndex?: number[];
 
   constructor(
     private tui: ReviewTui,
@@ -73,10 +84,21 @@ export class ReviewComponent {
     private done: (result: ReviewResult) => void,
     private explainer?: DiffExplainer,
     private onCommentsChanged?: (comments: Map<string, ReviewComment>) => void,
+    cachedExplanations?: Map<string, string>,
+    private onExplanationsChanged?: (explanations: Map<string, string>) => void,
   ) {
     const firstCommentable = this.lines.findIndex((line) => line.commentable);
-    this.selected = firstCommentable >= 0 ? firstCommentable : 0;
+    this.navigation = new ReviewNavigationState(
+      this.lines.length,
+      firstCommentable >= 0 ? firstCommentable : 0,
+    );
     this.lines.forEach((line, index) => this.lineIndexById.set(line.id, index));
+    this.explanationController = new ExplanationController(
+      tui,
+      explainer,
+      cachedExplanations,
+      onExplanationsChanged,
+    );
 
     this.editor = new Editor(tui as never, {
       borderColor: (s) => theme.fg("accent", s),
@@ -96,10 +118,7 @@ export class ReviewComponent {
           if (this.comments.delete(GLOBAL_COMMENT_KEY))
             this.markCommentsChanged();
         } else {
-          this.comments.set(
-            GLOBAL_COMMENT_KEY,
-            this.buildGlobalComment(trimmed),
-          );
+          this.comments.set(GLOBAL_COMMENT_KEY, buildGlobalComment(trimmed));
           this.markCommentsChanged();
         }
         this.exitEditMode();
@@ -118,15 +137,36 @@ export class ReviewComponent {
       } else {
         this.comments.set(
           key,
-          this.buildCommentFromSelection(selection, trimmed),
+          buildCommentFromSelection(this.lines, selection, trimmed),
         );
         this.markCommentsChanged();
       }
 
+      this.navigation.clearSelection();
       this.exitEditMode();
     };
   }
 
+  private get selected(): number {
+    return this.navigation.selected;
+  }
+
+  private set selected(value: number) {
+    this.navigation.selected = value;
+  }
+
+  private get scrollTop(): number {
+    return this.navigation.scrollTop;
+  }
+
+  private set scrollTop(value: number) {
+    this.navigation.scrollTop = value;
+  }
+
+  private get diffRenderMode(): DiffRenderMode {
+    return this.navigation.diffRenderMode;
+  }
+
   handleInput(data: string): void {
     if (this.editMode) {
       if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c")) {
@@ -134,6 +174,7 @@ export class ReviewComponent {
         return;
       }
       this.editor.handleInput(data);
+      this.invalidateAnnotatedRows();
       this.tui.requestRender();
       return;
     }
@@ -151,6 +192,10 @@ export class ReviewComponent {
       return;
     }
     if (data === "t") {
+      this.toggleInlineAnnotations();
+      return;
+    }
+    if (data === "v") {
       this.toggleDiffRenderMode();
       return;
     }
@@ -229,27 +274,17 @@ export class ReviewComponent {
         this.theme.fg(
           "dim",
           this.editMode
-            ? `${this.lines.length} lines • ${this.comments.size} comments • editing comment • Enter save • Esc/Ctrl+C cancel`
+            ? `${this.title} • ${this.lines.length} lines • ${this.comments.size} comments • editing inline 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 • C overall comment • Enter submit`
-              : `${this.lines.length} lines • ${this.comments.size} comments • ${this.getPositionText(selectedLine)} • j/k move • g/G top/bottom • ctrl-u/d page • t unified/split • ? explain • J/K extend • c comment • C overall • x delete • n/p hunk • Enter submit • q quit`,
+              ? `${this.title} • ${this.lines.length} lines • ${this.comments.size} comments • J/K extend • Esc clear selection • c comment range • C overall comment • Enter submit`
+              : `${this.title} • ${this.lines.length} lines • ${this.comments.size} comments • ${this.getPositionText(selectedLine)} • inline ${this.inlineAnnotationsVisible ? "shown" : "hidden"} • j/k move • g/G top/bottom • ctrl-u/d page • t annotations • v unified/split • ? explain • J/K extend • c comment • C overall • x delete • n/p hunk • Enter submit • q quit`,
         ),
         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),
-      );
-    }
+
+    this.ensureScroll(viewportHeight, width);
+    output.push(...this.renderAnnotatedDiffRows(width, viewportHeight));
 
     output.push(
       truncateToWidth(
@@ -260,232 +295,495 @@ export 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);
+  private renderAnnotatedDiffRows(width: number, height: number): string[] {
+    const rows = this.getAnnotatedRows(width);
     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));
+      const annotated = rows[this.scrollTop + row];
+      if (!annotated) {
+        output.push(" ".repeat(width));
+        continue;
+      }
+
+      if (annotated.kind === "diff") {
+        const index = annotated.lineIndex;
+        const line = this.lines[index]!;
+        output.push(
+          this.renderDiffLine(
+            line,
+            index,
+            width,
+            index === this.selected,
+            this.getSelectionBounds(),
+          ),
+        );
+        continue;
+      }
+
+      if (annotated.kind === "split") {
+        output.push(this.renderSplitDiffRowAt(annotated.splitRowIndex, width));
+        continue;
+      }
+
+      output.push(this.renderInlineAnnotationRow(annotated, width));
     }
 
     return output;
   }
 
-  private renderStacked(
+  private getAnnotatedRows(width: number): AnnotatedDiffRow[] {
+    if (
+      this.annotatedRows &&
+      this.annotatedRowsWidth === width &&
+      this.annotatedRowsRevision === this.commentsRevision &&
+      this.annotatedRowsEditMode === this.editMode &&
+      this.annotatedRowsEditingCommentKey === this.editingCommentKey &&
+      this.annotatedRowsMode === this.diffRenderMode &&
+      this.annotatedRowsInlineAnnotationsVisible ===
+        this.inlineAnnotationsVisible &&
+      this.annotatedRowsVisibleExplanationCount ===
+        this.visibleExplanationKeys.size &&
+      this.visibleExplanationKeys.size === 0
+    ) {
+      return this.annotatedRows;
+    }
+
+    const rows: AnnotatedDiffRow[] = [];
+    const rowByLineIndex: number[] = [];
+
+    this.pushGlobalAnnotationRows(rows, width);
+
+    if (this.diffRenderMode === "split") {
+      this.pushAnnotatedSplitRows(rows, rowByLineIndex, width);
+    } else {
+      this.pushAnnotatedUnifiedRows(rows, rowByLineIndex, width);
+    }
+
+    this.annotatedRows = rows;
+    this.annotatedRowsWidth = width;
+    this.annotatedRowsRevision = this.commentsRevision;
+    this.annotatedRowsEditMode = this.editMode;
+    this.annotatedRowsEditingCommentKey = this.editingCommentKey;
+    this.annotatedRowsMode = this.diffRenderMode;
+    this.annotatedRowsInlineAnnotationsVisible = this.inlineAnnotationsVisible;
+    this.annotatedRowsVisibleExplanationCount =
+      this.visibleExplanationKeys.size;
+    this.annotatedRowByLineIndex = rowByLineIndex;
+    return rows;
+  }
+
+  private pushAnnotatedUnifiedRows(
+    rows: AnnotatedDiffRow[],
+    rowByLineIndex: number[],
     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),
-      ),
-    ];
+  ): void {
+    for (let index = 0; index < this.lines.length; index++) {
+      rowByLineIndex[index] = rows.length;
+      rows.push({ kind: "diff", lineIndex: index });
+
+      if (!this.inlineAnnotationsVisible) continue;
+
+      this.pushInlineCommentRows(rows, index, width);
+      this.pushInlineEditorRows(rows, index, width);
+      this.pushInlineExplanationRows(rows, index, width);
+    }
   }
 
-  private renderDiffRows(width: number, height: number): string[] {
-    return this.diffRenderMode === "split"
-      ? this.renderSplitDiffRows(width, height)
-      : this.renderUnifiedDiffRows(width, height);
+  private pushAnnotatedSplitRows(
+    rows: AnnotatedDiffRow[],
+    rowByLineIndex: number[],
+    width: number,
+  ): void {
+    const splitRows = this.getSplitDiffRows();
+    for (
+      let splitRowIndex = 0;
+      splitRowIndex < splitRows.length;
+      splitRowIndex++
+    ) {
+      const splitRow = splitRows[splitRowIndex]!;
+      const lineIndexes = this.getLineIndexesForSplitRow(splitRow);
+      for (const lineIndex of lineIndexes) {
+        rowByLineIndex[lineIndex] = rows.length;
+      }
+
+      rows.push({ kind: "split", splitRowIndex });
+      if (!this.inlineAnnotationsVisible) continue;
+
+      for (const lineIndex of lineIndexes) {
+        this.pushInlineCommentRows(rows, lineIndex, width);
+        this.pushInlineEditorRows(rows, lineIndex, width);
+        this.pushInlineExplanationRows(rows, lineIndex, width);
+      }
+    }
   }
 
-  private renderUnifiedDiffRows(width: number, height: number): string[] {
-    const output: string[] = [];
-    const selection = this.getSelectionBounds();
+  private getLineIndexesForSplitRow(row: SplitDiffRow): number[] {
+    if (row.kind === "full") return [row.cell.index];
+    const indexes: number[] = [];
+    if (row.left) indexes.push(row.left.index);
+    if (row.right && row.right.index !== row.left?.index) {
+      indexes.push(row.right.index);
+    }
+    return indexes;
+  }
 
-    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),
+  private pushGlobalAnnotationRows(
+    rows: AnnotatedDiffRow[],
+    width: number,
+  ): void {
+    if (!this.inlineAnnotationsVisible) return;
+
+    const globalComment = this.comments.get(GLOBAL_COMMENT_KEY);
+    if (globalComment) {
+      this.pushAnnotationBlock(
+        rows,
+        "comment",
+        globalComment.text,
+        width,
+        "Overall diff comment",
       );
     }
 
-    return output;
+    if (this.editMode && this.editingCommentKey === GLOBAL_COMMENT_KEY) {
+      this.pushInlineEditorBlock(rows, "Draft overall diff note", width);
+    }
   }
 
-  private renderSplitDiffRows(width: number, height: number): string[] {
-    const rows = this.getSplitDiffRows();
-    const output: string[] = [];
-    const separatorWidth = 3;
-    const leftWidth = Math.max(10, Math.floor((width - separatorWidth) / 2));
-    const rightWidth = Math.max(10, width - leftWidth - separatorWidth);
+  private pushInlineCommentRows(
+    rows: AnnotatedDiffRow[],
+    lineIndex: number,
+    width: number,
+  ): void {
+    for (const comment of this.getCommentsEndingAtLine(lineIndex)) {
+      if (this.editMode && comment.id === this.editingCommentKey) continue;
+      this.pushAnnotationBlock(
+        rows,
+        "comment",
+        comment.text,
+        width,
+        formatCommentLocation(comment),
+      );
+    }
+  }
 
-    for (let row = 0; row < height; row++) {
-      const splitRow = rows[this.scrollTop + row];
-      if (!splitRow) {
-        output.push(" ".repeat(width));
-        continue;
-      }
+  private pushInlineEditorRows(
+    rows: AnnotatedDiffRow[],
+    lineIndex: number,
+    width: number,
+  ): void {
+    if (!this.editMode || this.editingCommentKey === GLOBAL_COMMENT_KEY) return;
+    const selection = this.getActiveCommentSelection();
+    if (!selection || selection.end !== lineIndex) return;
+    this.pushInlineEditorBlock(
+      rows,
+      `Draft note - ${this.formatSelectionLocation(selection)}`,
+      width,
+    );
+  }
 
-      if (splitRow.kind === "full") {
-        output.push(
-          this.renderDiffLine(
-            splitRow.cell.line,
-            splitRow.cell.index,
-            width,
-            splitRow.cell.index === this.selected,
-            this.getSelectionBounds(),
-          ),
-        );
-        continue;
-      }
+  private pushInlineExplanationRows(
+    rows: AnnotatedDiffRow[],
+    lineIndex: number,
+    width: number,
+  ): void {
+    const scope = getCurrentHunkScope(this.lines, lineIndex);
+    if (!scope || !this.visibleExplanationKeys.has(scope.key)) return;
+
+    const end = this.getHunkEndIndex(lineIndex);
+    if (end !== lineIndex) return;
+
+    const explanation = this.explanationController.getState(scope);
+    if (!this.explanationController.isAvailable) {
+      this.pushExplanationBlock(rows, "Explanation unavailable.", width);
+    } else if (!explanation) {
+      this.pushExplanationBlock(rows, "No explanation generated yet.", width);
+    } else if (explanation.status === "loading") {
+      this.pushExplanationBlock(
+        rows,
+        `${this.explanationController.getLoadingFrame()} ${explanation.text || "Generating explanation..."}`,
+        width,
+      );
+    } else if (explanation.status === "error") {
+      this.pushExplanationBlock(
+        rows,
+        `Explanation failed: ${explanation.message}`,
+        width,
+      );
+    } else {
+      this.pushExplanationBlock(rows, explanation.text, width);
+    }
+  }
 
-      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,
-        ),
+  private pushAnnotationBlock(
+    rows: AnnotatedDiffRow[],
+    kind: "comment",
+    text: string,
+    width: number,
+    title?: string,
+  ): void {
+    this.pushCommentBlock(rows, text, width, title);
+  }
+
+  private pushCommentBlock(
+    rows: AnnotatedDiffRow[],
+    text: string,
+    width: number,
+    title?: string,
+  ): void {
+    rows.push({
+      kind: "comment",
+      text: title ? this.theme.fg("accent", ` ${title} `) : "",
+      part: "top",
+    });
+    const wrapped = wrapTextWithAnsi(
+      this.theme.fg("text", text),
+      this.getInlineContentWidth(width),
+    );
+    for (const line of wrapped.length > 0 ? wrapped : [""]) {
+      rows.push({ kind: "comment", text: line, part: "body" });
+    }
+    rows.push({ kind: "comment", text: "", part: "bottom" });
+  }
+
+  private pushExplanationBlock(
+    rows: AnnotatedDiffRow[],
+    text: string,
+    width: number,
+  ): void {
+    rows.push({
+      kind: "explanation",
+      text: this.theme.fg("accent", " ✨ Explanation "),
+      part: "top",
+    });
+    const wrapped = wrapTextWithAnsi(
+      this.theme.fg("muted", text),
+      this.getInlineContentWidth(width),
+    );
+    for (const line of wrapped.length > 0 ? wrapped : [""]) {
+      rows.push({ kind: "explanation", text: line, part: "body" });
+    }
+    rows.push({ kind: "explanation", text: "", part: "bottom" });
+  }
+
+  private pushInlineEditorBlock(
+    rows: AnnotatedDiffRow[],
+    title: string,
+    width: number,
+  ): void {
+    rows.push({
+      kind: "editor",
+      text: this.theme.fg("accent", ` ${title} `),
+      part: "top",
+    });
+    const editorLines = this.editor.render(this.getInlineContentWidth(width));
+    const bodyLines = editorLines.slice(1, -1);
+    for (const line of bodyLines.length > 0 ? bodyLines : [""]) {
+      rows.push({ kind: "editor", text: line, part: "body" });
+    }
+    rows.push({ kind: "editor", text: "", part: "bottom" });
+  }
+
+  private renderInlineAnnotationRow(
+    row: Exclude<AnnotatedDiffRow, { kind: "diff" } | { kind: "split" }>,
+    width: number,
+  ): string {
+    if (row.kind === "editor") {
+      return this.renderInlineBoxRow(
+        { text: row.text, part: row.part },
+        width,
+        "accent",
       );
     }
 
-    return output;
+    if (row.kind === "comment" || row.kind === "explanation") {
+      return this.renderInlineBoxRow(
+        { text: row.text, part: row.part },
+        width,
+        "borderMuted",
+      );
+    }
+
+    return " ".repeat(width);
   }
 
-  private getContentHeight(): number {
-    const terminalRows = this.tui.terminal?.rows ?? 24;
-    const headerHeight = 3;
-    const footerHeight = 2;
-    return Math.max(6, terminalRows - headerHeight - footerHeight);
+  private renderInlineBoxRow(
+    row: { text: string; part: "top" | "body" | "bottom" },
+    width: number,
+    borderColor: "accent" | "borderMuted",
+  ): string {
+    const indent = "      ";
+    const contentWidth = this.getInlineContentWidth(width);
+    const body =
+      row.part === "top" || row.part === "bottom"
+        ? this.renderInlineBoxHorizontal(row.text, contentWidth, borderColor)
+        : padToWidth(truncateToWidth(row.text, contentWidth), contentWidth);
+    const left = row.part === "top" ? "╭" : row.part === "bottom" ? "╰" : "│";
+    const right = row.part === "top" ? "╮" : row.part === "bottom" ? "╯" : "│";
+    return padToWidth(
+      truncateToWidth(
+        `${indent}${this.theme.fg(borderColor, left)}${body}${this.theme.fg(borderColor, right)}`,
+        width,
+      ),
+      width,
+    );
   }
 
-  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;
+  private renderInlineBoxHorizontal(
+    title: string,
+    width: number,
+    borderColor: "accent" | "borderMuted",
+  ): string {
+    if (!title) return this.theme.fg(borderColor, "─".repeat(width));
 
-    if (commentsHeight < 3 && availableForPanes >= 4) {
-      commentsHeight = 3;
-      diffHeight = availableForPanes - commentsHeight;
+    const visibleTitle = truncateToWidth(title, Math.max(0, width));
+    const remaining = Math.max(0, width - visibleWidth(visibleTitle));
+    return `${visibleTitle}${this.theme.fg(borderColor, "─".repeat(remaining))}`;
+  }
+
+  private getInlineContentWidth(width: number): number {
+    return Math.max(10, width - 8);
+  }
+
+  private invalidateAnnotatedRows(): void {
+    this.annotatedRows = undefined;
+    this.annotatedRowByLineIndex = undefined;
+  }
+
+  private getCommentsEndingAtLine(lineIndex: number): ReviewComment[] {
+    const comments: ReviewComment[] = [];
+    for (const comment of this.comments.values()) {
+      if (comment.global) continue;
+      const start = this.lineIndexById.get(comment.startLineId);
+      const end = this.lineIndexById.get(comment.endLineId);
+      if (start == null || end == null) continue;
+      if (Math.max(start, end) === lineIndex) comments.push(comment);
     }
+    return comments.sort((a, b) => a.id.localeCompare(b.id));
+  }
+
+  private getHunkEndIndex(selected: number): number | undefined {
+    const selectedLine = this.lines[selected];
+    if (!selectedLine?.filePath || !selectedLine.hunkLabel) return undefined;
 
-    return { diffHeight, commentsHeight };
+    let end = selected;
+    while (
+      end + 1 < this.lines.length &&
+      this.lines[end + 1]?.filePath === selectedLine.filePath &&
+      this.lines[end + 1]?.hunkLabel === selectedLine.hunkLabel
+    ) {
+      end++;
+    }
+    return end;
+  }
+
+  private renderSplitDiffRowAt(splitRowIndex: number, width: number): string {
+    const splitRow = this.getSplitDiffRows()[splitRowIndex];
+    if (!splitRow) return " ".repeat(width);
+
+    if (splitRow.kind === "full") {
+      return this.renderDiffLine(
+        splitRow.cell.line,
+        splitRow.cell.index,
+        width,
+        splitRow.cell.index === this.selected,
+        this.getSelectionBounds(),
+      );
+    }
+
+    const separatorWidth = 3;
+    const leftWidth = Math.max(10, Math.floor((width - separatorWidth) / 2));
+    const rightWidth = Math.max(10, width - leftWidth - separatorWidth);
+    const left = splitRow.left
+      ? this.renderSplitDiffCell(splitRow.left, leftWidth, "left")
+      : " ".repeat(leftWidth);
+    const right = splitRow.right
+      ? this.renderSplitDiffCell(splitRow.right, rightWidth, "right")
+      : " ".repeat(rightWidth);
+    return truncateToWidth(
+      `${padToWidth(left, leftWidth)}${this.theme.fg("borderMuted", " │ ")}${padToWidth(right, rightWidth)}`,
+      width,
+    );
+  }
+
+  private getContentHeight(): number {
+    const terminalRows = this.tui.terminal?.rows ?? 24;
+    const headerHeight = 3;
+    const footerHeight = 2;
+    return Math.max(6, terminalRows - headerHeight - footerHeight);
   }
 
   invalidate(): void {
     this.highlightedLineCache.clear();
+    this.invalidateAnnotatedRows();
   }
 
   dispose(): void {
-    this.explanationAbort?.abort();
-    this.stopLoadingTimer();
+    this.explanationController.dispose();
   }
 
   private move(delta: number): void {
-    const next = Math.max(
-      0,
-      Math.min(this.lines.length - 1, this.selected + delta),
-    );
-    if (next === this.selected) return;
-    this.selected = next;
+    if (!this.navigation.move(delta)) return;
     this.tui.requestRender();
   }
 
   private jumpToBoundary(boundary: "start" | "end"): void {
-    const next = boundary === "start" ? 0 : Math.max(0, this.lines.length - 1);
-    const hadSelection = this.selectionAnchor != null;
-    if (next === this.selected && !hadSelection) return;
-    this.selected = next;
-    if (hadSelection) {
-      this.clearSelection();
-    } else {
-      this.tui.requestRender();
-    }
+    const result = this.navigation.jumpToBoundary(boundary);
+    if (!result.changed) return;
+    this.tui.requestRender();
   }
 
-  private toggleLayout(): void {
-    this.layout = this.layout === "side-by-side" ? "stacked" : "side-by-side";
+  private toggleDiffRenderMode(): void {
+    this.navigation.toggleDiffRenderMode();
     this.tui.requestRender(true);
   }
 
-  private toggleDiffRenderMode(): void {
-    this.diffRenderMode =
-      this.diffRenderMode === "unified" ? "split" : "unified";
-    this.scrollTop = 0;
+  private toggleInlineAnnotations(): void {
+    this.inlineAnnotationsVisible = !this.inlineAnnotationsVisible;
+    this.invalidateAnnotatedRows();
     this.tui.requestRender(true);
   }
 
+  private hideInlineExplanation(): void {
+    this.visibleExplanationKeys.clear();
+  }
+
   private toggleExplanationPane(): void {
-    this.rightPaneMode =
-      this.rightPaneMode === "comments" ? "explanation" : "comments";
-    if (this.rightPaneMode === "explanation") {
+    const scope = this.getCurrentHunkScope();
+    if (!scope) return;
+
+    if (this.visibleExplanationKeys.has(scope.key)) {
+      this.visibleExplanationKeys.delete(scope.key);
+    } else {
+      this.visibleExplanationKeys.add(scope.key);
       this.ensureCurrentExplanation();
     }
+
+    this.invalidateAnnotatedRows();
     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));
+    return Math.max(1, Math.floor(contentHeight / 2));
   }
 
   private extendSelection(delta: number): void {
-    if (this.selectionAnchor == null) {
-      this.selectionAnchor = this.selected;
-    }
-    const next = Math.max(
-      0,
-      Math.min(this.lines.length - 1, this.selected + delta),
-    );
-    if (next === this.selected) return;
-    this.selected = next;
+    if (!this.navigation.extendSelection(delta)) return;
     this.tui.requestRender();
   }
 
   private clearSelection(): void {
-    if (this.selectionAnchor == null) return;
-    this.selectionAnchor = undefined;
+    if (!this.navigation.clearSelection()) return;
     this.tui.requestRender();
   }
 
   private hasSelection(): boolean {
-    return (
-      this.selectionAnchor != null && this.selectionAnchor !== this.selected
-    );
+    return this.navigation.hasSelection();
   }
 
   private getSelectionBounds(): SelectionBounds | undefined {
-    if (this.selectionAnchor == null) return undefined;
-    return {
-      start: Math.min(this.selectionAnchor, this.selected),
-      end: Math.max(this.selectionAnchor, this.selected),
-    };
+    return this.navigation.getSelectionBounds();
   }
 
   private getActiveCommentSelection(): SelectionBounds | undefined {
@@ -497,7 +795,17 @@ export class ReviewComponent {
   }
 
   private getSelectionKey(start: number, end: number): string {
-    return `${this.lines[start]?.id ?? start}:${this.lines[end]?.id ?? end}`;
+    return getSelectionKey(this.lines, start, end);
+  }
+
+  private formatSelectionLocation(selection: SelectionBounds): string {
+    const startLine = this.lines[selection.start];
+    const endLine = this.lines[selection.end];
+    if (!startLine || !endLine) return "diff";
+
+    const start = formatLocation(startLine);
+    const end = formatLocation(endLine);
+    return start === end ? start : `${start} -> ${end}`;
   }
 
   private getCommentForSelection(
@@ -516,68 +824,20 @@ export class ReviewComponent {
 
   private markCommentsChanged(): void {
     this.commentsRevision++;
+    this.invalidateAnnotatedRows();
     this.onCommentsChanged?.(this.comments);
   }
 
   private ensureCommentLineKeys(): void {
     if (this.commentLineKeysRevision === this.commentsRevision) return;
 
-    this.commentLineKeys = new Map<number, string[]>();
-    for (const [key, comment] of this.comments) {
-      const start = this.lineIndexById.get(comment.startLineId);
-      const end = this.lineIndexById.get(comment.endLineId);
-      if (start == null || end == null) continue;
-      const from = Math.min(start, end);
-      const to = Math.max(start, end);
-      for (let index = from; index <= to; index++) {
-        const keys = this.commentLineKeys.get(index);
-        if (keys) {
-          keys.push(key);
-        } else {
-          this.commentLineKeys.set(index, [key]);
-        }
-      }
-    }
-
+    this.commentLineKeys = buildCommentLineKeys(
+      this.comments,
+      this.lineIndexById,
+    );
     this.commentLineKeysRevision = this.commentsRevision;
   }
 
-  private buildGlobalComment(text: string): ReviewComment {
-    return {
-      id: GLOBAL_COMMENT_KEY,
-      filePath: "Overall diff",
-      text,
-      global: true,
-      startLineId: GLOBAL_COMMENT_KEY,
-      endLineId: GLOBAL_COMMENT_KEY,
-      lineText: "",
-    };
-  }
-
-  private buildCommentFromSelection(
-    selection: SelectionBounds,
-    text: string,
-  ): ReviewComment {
-    const startLine = this.lines[selection.start]!;
-    const endLine = this.lines[selection.end]!;
-    const excerpt = this.lines
-      .slice(selection.start, selection.end + 1)
-      .map((line) => line.text)
-      .join("\n");
-    return {
-      id: this.getSelectionKey(selection.start, selection.end),
-      filePath: startLine.filePath ?? endLine.filePath ?? "(unknown file)",
-      text,
-      startLineId: startLine.id,
-      endLineId: endLine.id,
-      startOldLineNumber: startLine.oldLineNumber,
-      startNewLineNumber: startLine.newLineNumber,
-      endOldLineNumber: endLine.oldLineNumber,
-      endNewLineNumber: endLine.newLineNumber,
-      lineText: excerpt,
-    };
-  }
-
   private getPositionText(selectedLine?: ReviewLine): string {
     const position = `${Math.min(this.selected + 1, this.lines.length)}/${this.lines.length}`;
     return selectedLine?.filePath
@@ -621,10 +881,12 @@ export class ReviewComponent {
 
   private startGlobalEditMode(): void {
     const existing = this.comments.get(GLOBAL_COMMENT_KEY);
-    this.rightPaneMode = "comments";
+    this.inlineAnnotationsVisible = true;
+    this.hideInlineExplanation();
     this.editMode = true;
     this.editingCommentKey = GLOBAL_COMMENT_KEY;
     this.editor.setText(existing?.text ?? "");
+    this.invalidateAnnotatedRows();
     this.tui.requestRender(true);
   }
 
@@ -637,13 +899,15 @@ export class ReviewComponent {
     if (startLine.filePath !== endLine.filePath) return;
 
     const existing = this.getCommentForSelection(selection);
-    this.rightPaneMode = "comments";
+    this.inlineAnnotationsVisible = true;
+    this.hideInlineExplanation();
     this.editMode = true;
     this.editingCommentKey = this.getSelectionKey(
       selection.start,
       selection.end,
     );
     this.editor.setText(existing?.text ?? "");
+    this.invalidateAnnotatedRows();
     this.tui.requestRender(true);
   }
 
@@ -651,78 +915,25 @@ export class ReviewComponent {
     this.editMode = false;
     this.editingCommentKey = undefined;
     this.editor.setText("");
+    this.invalidateAnnotatedRows();
     this.tui.requestRender(true);
   }
 
   private getSplitDiffRows(): SplitDiffRow[] {
     if (this.splitRows) return this.splitRows;
 
-    const rows: SplitDiffRow[] = [];
-    const rowByLineIndex: number[] = [];
-    let index = 0;
-
-    const pushRow = (row: SplitDiffRow) => {
-      const displayRow = rows.length;
-      rows.push(row);
-      if (row.kind === "full") {
-        rowByLineIndex[row.cell.index] = displayRow;
-      } else {
-        if (row.left) rowByLineIndex[row.left.index] = displayRow;
-        if (row.right) rowByLineIndex[row.right.index] = displayRow;
-      }
-    };
-
-    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++) {
-          pushRow({
-            kind: "split",
-            left: removals[offset],
-            right: additions[offset],
-          });
-        }
-        continue;
-      }
-
-      if (line.kind === "context") {
-        const cell = { line, index };
-        pushRow({ kind: "split", left: cell, right: cell });
-      } else {
-        pushRow({ kind: "full", cell: { line, index } });
-      }
-      index++;
-    }
-
+    const { rows } = buildSplitDiffRows(this.lines);
     this.splitRows = rows;
-    this.splitRowByLineIndex = rowByLineIndex;
     return rows;
   }
 
-  private getSelectedDisplayRow(): number {
-    if (this.diffRenderMode === "unified") return this.selected;
-    this.getSplitDiffRows();
-    return this.splitRowByLineIndex?.[this.selected] ?? 0;
+  private getSelectedDisplayRow(width: number): number {
+    this.getAnnotatedRows(width);
+    return this.annotatedRowByLineIndex?.[this.selected] ?? 0;
   }
 
-  private getDisplayRowCount(): number {
-    return this.diffRenderMode === "unified"
-      ? this.lines.length
-      : this.getSplitDiffRows().length;
+  private getDisplayRowCount(width: number): number {
+    return this.getAnnotatedRows(width).length;
   }
 
   private renderSplitDiffCell(
@@ -732,7 +943,7 @@ export class ReviewComponent {
   ): string {
     const { line, index } = cell;
     const hasComment = this.getCommentKeysForLine(index).length > 0;
-    const commentMark = hasComment ? this.theme.fg("warning", "●") : " ";
+    const commentMark = hasComment ? this.theme.fg("borderAccent", "│") : " ";
     const lineNumber =
       side === "left" ? line.oldLineNumber : line.newLineNumber;
     const prefix = `${commentMark} ${lineNumberCell(lineNumber)} `;
@@ -748,19 +959,11 @@ export class ReviewComponent {
     return this.applyDiffBackground(line, styled, width);
   }
 
-  private ensureScroll(viewportHeight: number): void {
-    const selectedRow = this.getSelectedDisplayRow();
-    const rowCount = this.getDisplayRowCount();
-
-    if (selectedRow < this.scrollTop) {
-      this.scrollTop = selectedRow;
-    }
-    if (selectedRow >= this.scrollTop + viewportHeight) {
-      this.scrollTop = selectedRow - viewportHeight + 1;
-    }
-    this.scrollTop = Math.max(
-      0,
-      Math.min(this.scrollTop, Math.max(0, rowCount - viewportHeight)),
+  private ensureScroll(viewportHeight: number, width: number): void {
+    this.navigation.ensureScroll(
+      viewportHeight,
+      this.getSelectedDisplayRow(width),
+      this.getDisplayRowCount(width),
     );
   }
 
@@ -829,7 +1032,7 @@ export class ReviewComponent {
     selection?: SelectionBounds,
   ): string {
     const hasComment = this.getCommentKeysForLine(index).length > 0;
-    const commentMark = hasComment ? this.theme.fg("warning", "●") : " ";
+    const commentMark = hasComment ? this.theme.fg("borderAccent", "│") : " ";
     const numbers = `${lineNumberCell(line.oldLineNumber)} ${lineNumberCell(line.newLineNumber)}`;
     const prefix = `${commentMark} ${numbers} `;
     let styled = this.renderDiffRowContent(line, prefix);
@@ -843,383 +1046,11 @@ export class ReviewComponent {
     return this.applyDiffBackground(line, styled, width);
   }
 
-  private renderRightPane(
-    width: number,
-    height: number,
-    selectedLine?: ReviewLine,
-  ): string[] {
-    return this.rightPaneMode === "explanation"
-      ? this.renderExplanationPane(width, height, selectedLine)
-      : this.renderCommentsPane(width, height, selectedLine);
-  }
-
-  private renderCommentsPane(
-    width: number,
-    height: number,
-    selectedLine?: ReviewLine,
-  ): string[] {
-    const lines: string[] = [];
-    const title = this.theme.fg("accent", this.theme.bold("Comments"));
-    const selection = this.getActiveCommentSelection();
-    const currentComment = this.getCommentForSelection(selection);
-
-    lines.push(truncateToWidth(title, width));
-    lines.push(
-      truncateToWidth(
-        this.theme.fg(
-          "dim",
-          selection
-            ? this.getFooterText(selectedLine)
-            : selectedLine
-              ? formatLocation(selectedLine)
-              : "No selection",
-        ),
-        width,
-      ),
-    );
-    lines.push("");
-
-    if (this.editMode && this.editingCommentKey === GLOBAL_COMMENT_KEY) {
-      lines[1] = truncateToWidth(
-        this.theme.fg("dim", "Overall diff comment"),
-        width,
-      );
-      lines.push(
-        ...wrapTextWithAnsi(
-          this.theme.fg(
-            "dim",
-            "Editing overall diff comment. Enter saves. Esc or Ctrl+C cancels.",
-          ),
-          width,
-        ),
-      );
-      lines.push("");
-      for (const line of this.editor.render(Math.max(10, width))) {
-        lines.push(truncateToWidth(line, width));
-      }
-      return lines.slice(0, height);
-    }
-
-    const globalComment = this.comments.get(GLOBAL_COMMENT_KEY);
-    if (globalComment) {
-      lines.push(
-        truncateToWidth(
-          this.theme.fg("accent", this.theme.bold("Overall diff comment")),
-          width,
-        ),
-      );
-      lines.push(
-        ...wrapTextWithAnsi(this.theme.fg("text", globalComment.text), width),
-      );
-      lines.push(...wrapTextWithAnsi(this.theme.fg("dim", "C edits"), width));
-      lines.push("");
-    }
-
-    if (!selectedLine) {
-      lines.push(
-        ...wrapTextWithAnsi(
-          this.theme.fg("muted", "No diff lines available."),
-          width,
-        ),
-      );
-      return lines.slice(0, height);
-    }
-
-    if (!selection) {
-      lines.push(
-        ...wrapTextWithAnsi(
-          this.theme.fg(
-            "muted",
-            "Move to a diff line and press c to add a comment, or press C for an overall diff comment.",
-          ),
-          width,
-        ),
-      );
-      return lines.slice(0, height);
-    }
-
-    if (this.editMode && currentComment?.id === this.editingCommentKey) {
-      lines.push(
-        ...wrapTextWithAnsi(
-          this.theme.fg(
-            "dim",
-            "Editing comment. Enter saves. Esc or Ctrl+C cancels.",
-          ),
-          width,
-        ),
-      );
-      lines.push("");
-      for (const line of this.editor.render(Math.max(10, width))) {
-        lines.push(truncateToWidth(line, width));
-      }
-    } else if (this.editMode && this.editingCommentKey) {
-      lines.push(
-        ...wrapTextWithAnsi(
-          this.theme.fg(
-            "dim",
-            "Editing comment. Enter saves. Esc or Ctrl+C cancels.",
-          ),
-          width,
-        ),
-      );
-      lines.push("");
-      for (const line of this.editor.render(Math.max(10, width))) {
-        lines.push(truncateToWidth(line, width));
-      }
-    } else if (currentComment) {
-      lines.push(
-        ...wrapTextWithAnsi(this.theme.fg("text", currentComment.text), width),
-      );
-      lines.push("");
-      lines.push(
-        ...wrapTextWithAnsi(
-          this.theme.fg("dim", "x deletes this comment • c edits"),
-          width,
-        ),
-      );
-    } else {
-      lines.push(
-        ...wrapTextWithAnsi(
-          this.theme.fg(
-            "muted",
-            this.hasSelection()
-              ? "No comment on this range."
-              : "No comment on this line.",
-          ),
-          width,
-        ),
-      );
-      lines.push("");
-      lines.push(
-        ...wrapTextWithAnsi(
-          this.theme.fg(
-            "dim",
-            this.hasSelection()
-              ? "Press c to add a range comment, or C for an overall diff comment."
-              : "Press c to add one. Use J/K to extend a range. Press C for an overall diff comment.",
-          ),
-          width,
-        ),
-      );
-    }
-
-    lines.push("");
-    lines.push(
-      truncateToWidth(
-        this.theme.fg("accent", this.theme.bold("Excerpt")),
-        width,
-      ),
-    );
-    const excerpt = this.lines
-      .slice(selection.start, selection.end + 1)
-      .map((line) => line.text)
-      .join("\n");
-    lines.push(
-      ...wrapTextWithAnsi(
-        this.theme.fg("toolDiffContext", excerpt || "(blank line)"),
-        width,
-      ),
-    );
-    return lines.slice(0, height);
-  }
-
-  private renderExplanationPane(
-    width: number,
-    height: number,
-    selectedLine?: ReviewLine,
-  ): string[] {
-    const lines: string[] = [];
-    const title = this.theme.fg("accent", this.theme.bold("Explanation"));
-    const scope = this.getCurrentHunkScope();
-
-    lines.push(truncateToWidth(title, width));
-    lines.push(
-      truncateToWidth(
-        this.theme.fg(
-          "dim",
-          scope?.title ??
-            (selectedLine ? formatLocation(selectedLine) : "No selection"),
-        ),
-        width,
-      ),
-    );
-    lines.push("");
-
-    if (!this.explainer) {
-      lines.push(
-        ...wrapTextWithAnsi(
-          this.theme.fg("warning", "Diff explanations are unavailable."),
-          width,
-        ),
-      );
-      return lines.slice(0, height);
-    }
-
-    if (!scope) {
-      lines.push(
-        ...wrapTextWithAnsi(
-          this.theme.fg(
-            "muted",
-            "Move to a changed hunk and press ? to generate an explanation.",
-          ),
-          width,
-        ),
-      );
-      return lines.slice(0, height);
-    }
-
-    const explanation = this.explanations.get(scope.key);
-    if (!explanation) {
-      lines.push(
-        ...wrapTextWithAnsi(
-          this.theme.fg(
-            "muted",
-            "No explanation generated yet. Press ? again after returning to comments to generate this hunk.",
-          ),
-          width,
-        ),
-      );
-    } else if (explanation.status === "loading") {
-      const spinner = this.getLoadingFrame();
-      lines.push(
-        truncateToWidth(
-          this.theme.fg("accent", `${spinner} Generating explanation...`),
-          width,
-        ),
-      );
-      if (explanation.text.trim()) {
-        lines.push("");
-        lines.push(
-          ...wrapTextWithAnsi(this.theme.fg("text", explanation.text), width),
-        );
-      }
-    } else if (explanation.status === "error") {
-      lines.push(
-        ...wrapTextWithAnsi(
-          this.theme.fg(
-            "warning",
-            `Unable to explain diff: ${explanation.message}`,
-          ),
-          width,
-        ),
-      );
-    } else {
-      lines.push(
-        ...wrapTextWithAnsi(this.theme.fg("text", explanation.text), width),
-      );
-    }
-
-    lines.push("");
-    lines.push(...wrapTextWithAnsi(this.theme.fg("dim", "? comments"), width));
-    return lines.slice(0, height);
-  }
-
   private ensureCurrentExplanation(): void {
-    const scope = this.getCurrentHunkScope();
-    if (!scope || !this.explainer) return;
-    if (this.explanations.has(scope.key)) return;
-
-    this.explanationAbort?.abort();
-    const controller = new AbortController();
-    this.explanationAbort = controller;
-    const requestId = ++this.explanationRequestId;
-    let text = "";
-
-    this.explanations.set(scope.key, { status: "loading", text });
-    this.startLoadingTimer();
-
-    void this.explainer
-      .explain(scope, {
-        signal: controller.signal,
-        onDelta: (delta) => {
-          if (requestId !== this.explanationRequestId) return;
-          text += delta;
-          this.explanations.set(scope.key, { status: "loading", text });
-          this.tui.requestRender();
-        },
-      })
-      .then((finalText) => {
-        if (requestId !== this.explanationRequestId) return;
-        this.explanations.set(scope.key, {
-          status: "ready",
-          text: finalText.trim() || text.trim() || "No explanation returned.",
-        });
-      })
-      .catch((error) => {
-        if (requestId !== this.explanationRequestId) return;
-        if (controller.signal.aborted) return;
-        this.explanations.set(scope.key, {
-          status: "error",
-          message: error instanceof Error ? error.message : String(error),
-        });
-      })
-      .finally(() => {
-        if (requestId !== this.explanationRequestId) return;
-        this.stopLoadingTimerIfIdle();
-        this.tui.requestRender();
-      });
-
-    this.tui.requestRender();
-  }
-
-  private getCurrentHunkScope(): ExplanationScope | undefined {
-    const selectedLine = this.lines[this.selected];
-    if (!selectedLine?.filePath || !selectedLine.hunkLabel) return undefined;
-
-    let start = this.selected;
-    while (
-      start > 0 &&
-      this.lines[start - 1]?.filePath === selectedLine.filePath &&
-      this.lines[start - 1]?.hunkLabel === selectedLine.hunkLabel
-    ) {
-      start--;
-    }
-
-    let end = this.selected;
-    while (
-      end + 1 < this.lines.length &&
-      this.lines[end + 1]?.filePath === selectedLine.filePath &&
-      this.lines[end + 1]?.hunkLabel === selectedLine.hunkLabel
-    ) {
-      end++;
-    }
-
-    const diffText = this.lines
-      .slice(start, end + 1)
-      .map((line) => line.text)
-      .join("\n");
-    return {
-      key: `hunk:${selectedLine.filePath}:${selectedLine.hunkLabel}:${start}:${end}`,
-      kind: "hunk",
-      title: `${selectedLine.filePath} ${selectedLine.hunkLabel}`,
-      filePath: selectedLine.filePath,
-      diffText,
-    };
-  }
-
-  private getLoadingFrame(): string {
-    const frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
-    return frames[this.loadingFrame % frames.length] ?? "⠋";
-  }
-
-  private startLoadingTimer(): void {
-    if (this.loadingTimer) return;
-    this.loadingTimer = setInterval(() => {
-      this.loadingFrame++;
-      this.tui.requestRender();
-    }, 120);
-  }
-
-  private stopLoadingTimerIfIdle(): void {
-    const hasLoading = [...this.explanations.values()].some(
-      (explanation) => explanation.status === "loading",
-    );
-    if (!hasLoading) this.stopLoadingTimer();
+    this.explanationController.ensure(this.getCurrentHunkScope());
   }
 
-  private stopLoadingTimer(): void {
-    if (!this.loadingTimer) return;
-    clearInterval(this.loadingTimer);
-    this.loadingTimer = undefined;
+  private getCurrentHunkScope() {
+    return getCurrentHunkScope(this.lines, this.selected);
   }
 }