pi-diff-review 0.1.20 → 0.1.21

package/README.md

@@ -78,7 +78,7 @@ Open one or more files or folders with `/view`:
 - `t` toggles inline comments/explanations
 - `v` toggles the diff between unified and side-by-side split rendering
 - `?` toggles an AI-generated explanation for the current hunk
-- `/` searches diff lines; `n/N` moves between matches while a search is active
+- `/` searches visible diff text, highlights matches, and `n/N` moves between them while a search is active
 - `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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-diff-review",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "description": "Local diff review TUI extension for pi",
   "license": "MIT",
   "type": "module",

package/src/review/component.ts

@@ -1375,7 +1375,7 @@ export class ReviewComponent {
     const lineNumber =
       side === "left" ? line.oldLineNumber : line.newLineNumber;
     const prefix = `${commentMark} ${lineNumberCell(lineNumber)} `;
-    let styled = this.renderDiffRowContent(line, prefix);
+    let styled = this.renderDiffRowContent(line, prefix, index);
 
     styled = truncateToWidth(styled, width);
     const selection = this.getSelectionBounds();
@@ -1428,14 +1428,18 @@ export class ReviewComponent {
     return styled;
   }
 
-  private renderDiffRowContent(line: ReviewLine, prefix: string): string {
+  private renderDiffRowContent(
+    line: ReviewLine,
+    prefix: string,
+    index: number,
+  ): string {
     switch (line.kind) {
       case "add":
-        return `${this.theme.fg("toolDiffAdded", prefix)}${this.getHighlightedDisplayText(line)}`;
+        return `${this.theme.fg("toolDiffAdded", prefix)}${this.getHighlightedDisplayText(line, index)}`;
       case "remove":
-        return `${this.theme.fg("toolDiffRemoved", prefix)}${this.getHighlightedDisplayText(line)}`;
+        return `${this.theme.fg("toolDiffRemoved", prefix)}${this.getHighlightedDisplayText(line, index)}`;
       case "context":
-        return `${this.theme.fg("toolDiffContext", prefix)}${this.getHighlightedDisplayText(line)}`;
+        return `${this.theme.fg("toolDiffContext", prefix)}${this.getHighlightedDisplayText(line, index)}`;
       case "hunk":
         return this.theme.fg("accent", `${prefix}${this.getDisplayText(line)}`);
       default:
@@ -1443,15 +1447,21 @@ export class ReviewComponent {
     }
   }
 
-  private getHighlightedDisplayText(line: ReviewLine): string {
+  private getHighlightedDisplayText(line: ReviewLine, index: number): string {
     const code = this.getDisplayText(line);
     if (!code) return code;
 
     const lang = line.filePath ? getLanguageFromPath(line.filePath) : undefined;
-    const cacheKey = `${line.id}\0${lang ?? ""}\0${code}`;
+    const cacheKey = `${line.id}\0${lang ?? ""}\0${this.search.getHighlightCacheKey()}\0${code}`;
     const cached = this.highlightedLineCache.get(cacheKey);
     if (cached != null) return cached;
 
+    const searchHighlighted = this.getSearchHighlightedDisplayText(code, index);
+    if (searchHighlighted) {
+      this.highlightedLineCache.set(cacheKey, searchHighlighted);
+      return searchHighlighted;
+    }
+
     let highlighted = code;
     try {
       highlighted = highlightCode(code, lang)[0] ?? code;
@@ -1463,6 +1473,32 @@ export class ReviewComponent {
     return highlighted;
   }
 
+  private getSearchHighlightedDisplayText(
+    code: string,
+    index: number,
+  ): string | undefined {
+    const matches = this.search.getMatchesForLine(index);
+    if (matches.length === 0) return undefined;
+
+    const activeMatch = this.search.getActiveMatch();
+    let result = "";
+    let cursor = 0;
+    for (const match of matches) {
+      result += code.slice(cursor, match.start);
+      const text = code.slice(match.start, match.end);
+      const isActive =
+        activeMatch?.lineIndex === match.lineIndex &&
+        activeMatch.start === match.start &&
+        activeMatch.end === match.end;
+      result += isActive
+        ? this.theme.bg("selectedBg", this.theme.fg("warning", text))
+        : this.theme.bg("selectedBg", this.theme.fg("accent", text));
+      cursor = match.end;
+    }
+    result += code.slice(cursor);
+    return result;
+  }
+
   private renderDiffLine(
     line: ReviewLine,
     index: number,
@@ -1474,7 +1510,7 @@ export class ReviewComponent {
     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);
+    let styled = this.renderDiffRowContent(line, prefix, index);
 
     styled = truncateToWidth(styled, width);
     const inSelection =

package/src/review/search.ts

@@ -1,18 +1,42 @@
 import { matchesKey } from "@earendil-works/pi-tui";
 import type { ReviewLine } from "./types.ts";
 
+function getSearchableLineText(line: ReviewLine): string {
+  return (
+    line.kind === "add" || line.kind === "remove" || line.kind === "context"
+      ? line.text.slice(1)
+      : line.text
+  ).toLocaleLowerCase();
+}
+
 export type SearchInputResult = {
   selected?: number;
 };
 
+export type SearchMatch = {
+  lineIndex: number;
+  start: number;
+  end: number;
+};
+
 export class ReviewSearchState {
   mode = false;
-  query = "";
   draftQuery = "";
   message = "";
+  private _query = "";
+  private activeMatchIndex = -1;
 
   constructor(private readonly lines: ReviewLine[]) {}
 
+  get query(): string {
+    return this._query;
+  }
+
+  set query(value: string) {
+    this._query = value;
+    this.activeMatchIndex = -1;
+  }
+
   start(): void {
     this.mode = true;
     this.draftQuery = this.query;
@@ -63,46 +87,85 @@ export class ReviewSearchState {
     const query = this.query.trim();
     if (!query) return {};
 
-    const matches = this.getMatchIndexes(query);
+    const matches = this.getMatches(query);
     if (matches.length === 0) {
+      this.activeMatchIndex = -1;
       this.message = `No matches for /${query}`;
       return {};
     }
 
     this.message = "";
-    const current =
-      direction === 1
-        ? matches.find((index) => index > selected)
-        : [...matches].reverse().find((index) => index < selected);
-    return {
-      selected:
-        current ??
-        (direction === 1 ? matches[0]! : matches[matches.length - 1]!),
-    };
+    let nextIndex: number;
+    if (this.activeMatchIndex >= 0 && this.activeMatchIndex < matches.length) {
+      nextIndex =
+        (this.activeMatchIndex + direction + matches.length) % matches.length;
+    } else {
+      if (direction === 1) {
+        nextIndex = matches.findIndex((match) => match.lineIndex >= selected);
+      } else {
+        nextIndex = -1;
+        for (let index = matches.length - 1; index >= 0; index--) {
+          if (matches[index]!.lineIndex <= selected) {
+            nextIndex = index;
+            break;
+          }
+        }
+      }
+      if (nextIndex < 0) nextIndex = direction === 1 ? 0 : matches.length - 1;
+    }
+
+    this.activeMatchIndex = nextIndex;
+    return { selected: matches[nextIndex]!.lineIndex };
   }
 
-  getStatusText(selected: number): string {
+  getStatusText(_selected: number): string {
     if (this.message) return this.message;
     if (!this.query) return "";
 
-    const matches = this.getMatchIndexes(this.query);
+    const matches = this.getMatches(this.query);
     if (matches.length === 0) return `No matches for /${this.query}`;
 
-    const current = matches.findIndex((index) => index === selected);
     const position =
-      current >= 0
-        ? `${current + 1}/${matches.length}`
+      this.activeMatchIndex >= 0 && this.activeMatchIndex < matches.length
+        ? `${this.activeMatchIndex + 1}/${matches.length}`
         : `${matches.length} matches`;
     return `Search /${this.query} • ${position} • n next • N previous • Esc clear search`;
   }
 
-  private getMatchIndexes(query: string): number[] {
+  getMatchesForLine(lineIndex: number): SearchMatch[] {
+    if (!this.query.trim()) return [];
+    return this.getMatches(this.query).filter(
+      (match) => match.lineIndex === lineIndex,
+    );
+  }
+
+  getActiveMatch(): SearchMatch | undefined {
+    if (!this.query.trim()) return undefined;
+    const matches = this.getMatches(this.query);
+    return this.activeMatchIndex >= 0 && this.activeMatchIndex < matches.length
+      ? matches[this.activeMatchIndex]
+      : undefined;
+  }
+
+  getHighlightCacheKey(): string {
+    const active = this.getActiveMatch();
+    return active
+      ? `${this.query}\0${active.lineIndex}:${active.start}-${active.end}`
+      : this.query;
+  }
+
+  private getMatches(query: string): SearchMatch[] {
     const needle = query.toLocaleLowerCase();
     if (!needle) return [];
 
-    const matches: number[] = [];
-    this.lines.forEach((line, index) => {
-      if (line.text.toLocaleLowerCase().includes(needle)) matches.push(index);
+    const matches: SearchMatch[] = [];
+    this.lines.forEach((line, lineIndex) => {
+      const haystack = getSearchableLineText(line);
+      let start = haystack.indexOf(needle);
+      while (start >= 0) {
+        matches.push({ lineIndex, start, end: start + needle.length });
+        start = haystack.indexOf(needle, start + needle.length);
+      }
     });
     return matches;
   }