pi-diff-review 0.1.11 → 0.1.13

package/src/review-component.ts

@@ -2,23 +2,30 @@ import {
   getLanguageFromPath,
   highlightCode,
 } from "@earendil-works/pi-coding-agent";
+import { Editor, matchesKey, truncateToWidth } from "@earendil-works/pi-tui";
+import type { DiffExplainer } from "./explain.ts";
 import {
-  Editor,
-  matchesKey,
-  truncateToWidth,
-  visibleWidth,
-  wrapTextWithAnsi,
-} from "@earendil-works/pi-tui";
-import type {
-  DiffExplainer,
-  ExplanationScope,
-  ExplanationState,
-} from "./explain.ts";
+  GLOBAL_COMMENT_KEY,
+  buildCommentFromSelection,
+  buildCommentLineKeys,
+  buildGlobalComment,
+  getSelectionKey,
+} from "./comment-manager.ts";
+import {
+  ExplanationController,
+  getCurrentHunkScope,
+} from "./explanation-controller.ts";
 import { formatLocation } from "./prompt.ts";
+import { ReviewNavigationState } from "./review-navigation.ts";
+import {
+  renderCommentsPane as renderCommentsPaneContent,
+  renderExplanationPane as renderExplanationPaneContent,
+} from "./review-panes.ts";
+import { padToWidth, lineNumberCell } from "./render-utils.ts";
+import { buildSplitDiffRows } from "./split-diff.ts";
 import type {
   DiffRenderMode,
   ReviewComment,
-  ReviewLayout,
   ReviewLine,
   ReviewResult,
   ReviewTheme,
@@ -29,32 +36,14 @@ import type {
   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);
-}
-
-function lineNumberCell(value?: number): string {
-  return value == null ? "    " : String(value).padStart(4, " ");
-}
-
-const GLOBAL_COMMENT_KEY = "__global_diff_comment__";
-
 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 showRightPane = true;
   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 explanationController: ExplanationController;
   private editor: Editor;
   private splitRows?: SplitDiffRow[];
   private splitRowByLineIndex?: number[];
@@ -73,10 +62,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 +96,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,7 +115,7 @@ export class ReviewComponent {
       } else {
         this.comments.set(
           key,
-          this.buildCommentFromSelection(selection, trimmed),
+          buildCommentFromSelection(this.lines, selection, trimmed),
         );
         this.markCommentsChanged();
       }
@@ -127,6 +124,26 @@ export class ReviewComponent {
     };
   }
 
+  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")) {
@@ -151,6 +168,10 @@ export class ReviewComponent {
       return;
     }
     if (data === "t") {
+      this.toggleRightPane();
+      return;
+    }
+    if (data === "v") {
       this.toggleDiffRenderMode();
       return;
     }
@@ -232,22 +253,18 @@ export 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 • 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.lines.length} lines • ${this.comments.size} comments • ${this.getPositionText(selectedLine)} • ${this.showRightPane ? "sidebar shown" : "sidebar hidden"} • j/k move • g/G top/bottom • ctrl-u/d page • t sidebar • 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") {
+    if (!this.showRightPane) {
       this.ensureScroll(viewportHeight);
-      output.push(
-        ...this.renderSideBySide(width, viewportHeight, selectedLine),
-      );
+      output.push(...this.renderFullWidthDiffRows(width, viewportHeight));
     } else {
-      const { diffHeight, commentsHeight } =
-        this.getStackedHeights(viewportHeight);
-      this.ensureScroll(diffHeight);
+      this.ensureScroll(viewportHeight);
       output.push(
-        ...this.renderStacked(width, diffHeight, commentsHeight, selectedLine),
+        ...this.renderSideBySide(width, viewportHeight, selectedLine),
       );
     }
 
@@ -282,28 +299,18 @@ export class ReviewComponent {
     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 renderFullWidthDiffRows(width: number, height: number): string[] {
+    return this.renderDiffRows(width, height).map((row) =>
+      padToWidth(truncateToWidth(row, width), width),
+    );
+  }
+
   private renderUnifiedDiffRows(width: number, height: number): string[] {
     const output: string[] = [];
     const selection = this.getSelectionBounds();
@@ -378,66 +385,42 @@ export class ReviewComponent {
     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 {
     this.highlightedLineCache.clear();
   }
 
   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 toggleRightPane(): void {
+    this.showRightPane = !this.showRightPane;
     this.tui.requestRender(true);
   }
 
+  private showCommentsPane(): void {
+    this.showRightPane = true;
+    this.rightPaneMode = "comments";
+  }
+
   private toggleExplanationPane(): void {
+    this.showRightPane = true;
     this.rightPaneMode =
       this.rightPaneMode === "comments" ? "explanation" : "comments";
     if (this.rightPaneMode === "explanation") {
@@ -448,44 +431,25 @@ export class ReviewComponent {
 
   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 +461,7 @@ 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 getCommentForSelection(
@@ -522,62 +486,13 @@ export class ReviewComponent {
   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,7 +536,7 @@ export class ReviewComponent {
 
   private startGlobalEditMode(): void {
     const existing = this.comments.get(GLOBAL_COMMENT_KEY);
-    this.rightPaneMode = "comments";
+    this.showCommentsPane();
     this.editMode = true;
     this.editingCommentKey = GLOBAL_COMMENT_KEY;
     this.editor.setText(existing?.text ?? "");
@@ -637,7 +552,7 @@ export class ReviewComponent {
     if (startLine.filePath !== endLine.filePath) return;
 
     const existing = this.getCommentForSelection(selection);
-    this.rightPaneMode = "comments";
+    this.showCommentsPane();
     this.editMode = true;
     this.editingCommentKey = this.getSelectionKey(
       selection.start,
@@ -657,57 +572,7 @@ export class ReviewComponent {
   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, rowByLineIndex } = buildSplitDiffRows(this.lines);
     this.splitRows = rows;
     this.splitRowByLineIndex = rowByLineIndex;
     return rows;
@@ -749,18 +614,10 @@ export class ReviewComponent {
   }
 
   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)),
+    this.navigation.ensureScroll(
+      viewportHeight,
+      this.getSelectedDisplayRow(),
+      this.getDisplayRowCount(),
     );
   }
 
@@ -858,169 +715,22 @@ export class ReviewComponent {
     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);
+    return renderCommentsPaneContent({
+      width,
+      height,
+      selectedLine,
+      theme: this.theme,
+      lines: this.lines,
+      comments: this.comments,
+      editor: this.editor,
+      editMode: this.editMode,
+      editingCommentKey: this.editingCommentKey,
+      selection,
+      currentComment: this.getCommentForSelection(selection),
+      footerText: this.getFooterText(selectedLine),
+      hasSelection: this.hasSelection(),
+    });
   }
 
   private renderExplanationPane(
@@ -1028,198 +738,21 @@ export class ReviewComponent {
     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);
+    return renderExplanationPaneContent({
+      width,
+      height,
+      selectedLine,
+      theme: this.theme,
+      scope: this.getCurrentHunkScope(),
+      controller: this.explanationController,
+    });
   }
 
   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);
   }
 }