pi-diff-review 0.1.10 → 0.1.12

package/README.md

@@ -20,6 +20,13 @@ Or install directly from GitHub:
 pi install https://github.com/cmpadden/pi-diff-review
 ```
 
+For local development, clone the repository and install from the local path:
+
+```bash
+git clone https://github.com/cmpadden/pi-diff-review
+pi install ./pi-diff-review
+```
+
 ## Features
 
 - `/diff` reviews the current unstaged `git diff`
@@ -39,6 +46,21 @@ pi install https://github.com/cmpadden/pi-diff-review
 - Comments are cached per session and restored when reopening the same diff
 - `q` to exit
 
+## Development
+
+Install [pre-commit](https://pre-commit.com/) and enable the repository hooks to run typechecking, tests, and formatting checks before each commit:
+
+```bash
+pre-commit install
+```
+
+Run the same checks manually with either:
+
+```bash
+pre-commit run --all-files
+npm run precommit
+```
+
 ## Release
 
 See [RELEASE.md](./RELEASE.md).

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "pi-diff-review",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "Local diff review TUI extension for pi",
   "license": "MIT",
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cmpadden/pi-diff-review.git"
@@ -26,16 +27,30 @@
     "LICENSE"
   ],
   "scripts": {
-    "format": "prettier --write ."
+    "check": "npm run typecheck && npm test",
+    "format": "prettier --write .",
+    "precommit": "npm run check && npx prettier --check .",
+    "test": "node --import tsx --test test/**/*.test.ts",
+    "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "prettier": "^3.5.3"
+    "@earendil-works/pi-ai": "^0.74.0",
+    "@earendil-works/pi-coding-agent": "^0.74.1",
+    "@earendil-works/pi-tui": "^0.74.1",
+    "@types/node": "^24.12.4",
+    "prettier": "^3.5.3",
+    "tsx": "^4.22.1",
+    "typescript": "^6.0.3"
   },
   "peerDependencies": {
+    "@earendil-works/pi-ai": "*",
     "@earendil-works/pi-coding-agent": "*",
     "@earendil-works/pi-tui": "*"
   },
   "peerDependenciesMeta": {
+    "@earendil-works/pi-ai": {
+      "optional": true
+    },
     "@earendil-works/pi-coding-agent": {
       "optional": true
     },
@@ -46,10 +61,10 @@
   "pi": {
     "extensions": [
       "./extensions"
-    ]
+    ],
+    "image": "https://github.com/user-attachments/assets/3fd00163-5d19-489b-94ed-3d4816c6cad3"
   },
   "dependencies": {
-    "@earendil-works/pi-ai": "^0.74.0",
     "@pierre/diffs": "^1.1.21"
   }
 }

package/src/review-component.ts

@@ -1,3 +1,7 @@
+import {
+  getLanguageFromPath,
+  highlightCode,
+} from "@earendil-works/pi-coding-agent";
 import {
   Editor,
   matchesKey,
@@ -58,6 +62,7 @@ export class ReviewComponent {
   private commentLineKeys = new Map<number, string[]>();
   private commentsRevision = 0;
   private commentLineKeysRevision = -1;
+  private highlightedLineCache = new Map<string, string>();
 
   constructor(
     private tui: ReviewTui,
@@ -389,7 +394,9 @@ export class ReviewComponent {
     return { diffHeight, commentsHeight };
   }
 
-  invalidate(): void {}
+  invalidate(): void {
+    this.highlightedLineCache.clear();
+  }
 
   dispose(): void {
     this.explanationAbort?.abort();
@@ -728,22 +735,8 @@ export class ReviewComponent {
     const commentMark = hasComment ? this.theme.fg("warning", "●") : " ";
     const lineNumber =
       side === "left" ? line.oldLineNumber : line.newLineNumber;
-    const raw = `${commentMark} ${lineNumberCell(lineNumber)} ${this.getDisplayText(line)}`;
-
-    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);
-    }
+    const prefix = `${commentMark} ${lineNumberCell(lineNumber)} `;
+    let styled = this.renderDiffRowContent(line, prefix);
 
     styled = truncateToWidth(styled, width);
     const selection = this.getSelectionBounds();
@@ -752,7 +745,7 @@ export class ReviewComponent {
     if (index === this.selected || inSelection) {
       return this.theme.bg("selectedBg", padToWidth(styled, width));
     }
-    return styled;
+    return this.applyDiffBackground(line, styled, width);
   }
 
   private ensureScroll(viewportHeight: number): void {
@@ -779,43 +772,75 @@ export class ReviewComponent {
       : line.text;
   }
 
-  private renderDiffLine(
+  private applyDiffBackground(
     line: ReviewLine,
-    index: number,
+    styled: string,
     width: number,
-    selected: boolean,
-    selection?: SelectionBounds,
   ): string {
-    const hasComment = this.getCommentKeysForLine(index).length > 0;
-    const commentMark = hasComment ? this.theme.fg("warning", "●") : " ";
-    const numbers = `${lineNumberCell(line.oldLineNumber)} ${lineNumberCell(line.newLineNumber)}`;
-    const raw = `${commentMark} ${numbers} ${this.getDisplayText(line)}`;
+    if (line.kind === "add") {
+      return this.theme.bg("toolSuccessBg", padToWidth(styled, width));
+    }
+    if (line.kind === "remove") {
+      return this.theme.bg("toolErrorBg", padToWidth(styled, width));
+    }
+    return styled;
+  }
 
-    let styled: string;
+  private renderDiffRowContent(line: ReviewLine, prefix: string): string {
     switch (line.kind) {
       case "add":
-        styled = this.theme.fg("toolDiffAdded", raw);
-        break;
+        return `${this.theme.fg("toolDiffAdded", prefix)}${this.getHighlightedDisplayText(line)}`;
       case "remove":
-        styled = this.theme.fg("toolDiffRemoved", raw);
-        break;
+        return `${this.theme.fg("toolDiffRemoved", prefix)}${this.getHighlightedDisplayText(line)}`;
       case "context":
-        styled = this.theme.fg("toolDiffContext", raw);
-        break;
+        return `${this.theme.fg("toolDiffContext", prefix)}${this.getHighlightedDisplayText(line)}`;
       case "hunk":
-        styled = this.theme.fg("accent", raw);
-        break;
+        return this.theme.fg("accent", `${prefix}${this.getDisplayText(line)}`);
       default:
-        styled = this.theme.fg("muted", raw);
+        return this.theme.fg("muted", `${prefix}${this.getDisplayText(line)}`);
+    }
+  }
+
+  private getHighlightedDisplayText(line: ReviewLine): 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 cached = this.highlightedLineCache.get(cacheKey);
+    if (cached != null) return cached;
+
+    let highlighted = code;
+    try {
+      highlighted = highlightCode(code, lang)[0] ?? code;
+    } catch {
+      highlighted = code;
     }
 
+    this.highlightedLineCache.set(cacheKey, highlighted);
+    return highlighted;
+  }
+
+  private renderDiffLine(
+    line: ReviewLine,
+    index: number,
+    width: number,
+    selected: boolean,
+    selection?: SelectionBounds,
+  ): string {
+    const hasComment = this.getCommentKeysForLine(index).length > 0;
+    const commentMark = hasComment ? this.theme.fg("warning", "●") : " ";
+    const numbers = `${lineNumberCell(line.oldLineNumber)} ${lineNumberCell(line.newLineNumber)}`;
+    const prefix = `${commentMark} ${numbers} `;
+    let styled = this.renderDiffRowContent(line, prefix);
+
     styled = truncateToWidth(styled, width);
     const inSelection =
       selection != null && index >= selection.start && index <= selection.end;
     if (selected || inSelection) {
       return this.theme.bg("selectedBg", padToWidth(styled, width));
     }
-    return styled;
+    return this.applyDiffBackground(line, styled, width);
   }
 
   private renderRightPane(