@tmustier/pi-files-widget 0.1.9 → 0.1.11

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to this extension will be documented in this file.
 
+## [0.1.11] - 2026-01-26
+
+### Changed
+- Require `bat`, `delta`, and `glow` before opening `/files`
+- Add a postinstall reminder for required system tools
+- Document install commands next to the Pi install steps
+
+## [0.1.10] - 2026-01-26
+
+### Fixed
+- Treat git-reported directory entries as directories to avoid viewer errors
+- Guard the viewer against opening directories directly
+- Wrap delta diff output without breaking gutters and avoid truncation
+- Add a safe fallback when `bat` fails to render with wrapping
+
 ## [0.1.9] - 2026-01-26
 
 ### Changed

package/README.md

@@ -1,6 +1,6 @@
 # files-widget
 
-In-terminal file browser and viewer for Pi. Navigate files, view diffs, select code, and send comments to the agent without leaving the terminal.
+In-terminal file browser and diff viewer widget for Pi. Navigate files, view diffs, select code, and send comments to the agent without leaving the terminal and without interrupting your agent.
 
 ![Demo](demo.svg)
 
@@ -12,6 +12,16 @@ In-terminal file browser and viewer for Pi. Navigate files, view diffs, select c
 pi install npm:@tmustier/pi-files-widget
 ```
 
+Required deps (needed for /files):
+
+```bash
+# macOS (Homebrew)
+brew install bat git-delta glow
+
+# Ubuntu/Debian
+sudo apt-get install -y bat git-delta glow
+```
+
 ```bash
 pi install git:github.com/tmustier/pi-extensions
 ```
@@ -57,17 +67,13 @@ Then reference it in your settings:
 }
 ```
 
-## Dependencies (recommended)
-
-```bash
-brew install bat git-delta glow
-```
+## Dependencies (required)
 
 - `bat`: syntax highlighting
 - `delta`: formatted diffs
 - `glow`: markdown rendering
 
-If any are missing, the extension will notify you at session start and gracefully fall back to plain rendering.
+The `/files` browser requires these tools and will refuse to open until they are installed.
 
 ## Commands
 

package/file-tree.ts

@@ -1,3 +1,4 @@
+import { statSync } from "node:fs";
 import { join } from "node:path";
 
 import { MAX_TREE_DEPTH } from "./constants";
@@ -5,6 +6,14 @@ import type { DiffStats, FileNode, FlatNode } from "./types";
 
 const collator = new Intl.Collator(undefined, { sensitivity: "base" });
 
+function isDirectoryPath(path: string): boolean {
+  try {
+    return statSync(path).isDirectory();
+  } catch {
+    return false;
+  }
+}
+
 function compareNodes(a: FileNode, b: FileNode): number {
   if (a.isDirectory !== b.isDirectory) {
     return a.isDirectory ? -1 : 1;
@@ -153,11 +162,41 @@ export function buildFileTreeFromPaths(
 
     const fileRelPath = parts.join("/");
     if (seenFiles.has(fileRelPath)) continue;
-    seenFiles.add(fileRelPath);
 
     const filePath = join(cwd, fileRelPath);
-    const fileGitStatus = gitStatus.get(fileRelPath);
+    const fileGitStatus = gitStatus.get(fileRelPath) ?? gitStatus.get(`${fileRelPath}/`);
     const fileDiffStats = diffStats.get(fileRelPath);
+    const existingDir = directoryMap.get(fileRelPath);
+
+    if (existingDir) {
+      if (fileGitStatus) {
+        existingDir.gitStatus = fileGitStatus;
+      }
+      if (fileDiffStats) {
+        existingDir.diffStats = fileDiffStats;
+      }
+      continue;
+    }
+
+    const isDirEntry = normalized.endsWith("/") || isDirectoryPath(filePath);
+    if (isDirEntry) {
+      const depth = parts.length;
+      const dirNode: FileNode = {
+        name: fileName,
+        path: filePath,
+        isDirectory: true,
+        children: [],
+        expanded: depth < 1,
+        hasChangedChildren: false,
+        gitStatus: fileGitStatus,
+        diffStats: fileDiffStats,
+      };
+      directoryMap.set(fileRelPath, dirNode);
+      current.children?.push(dirNode);
+      continue;
+    }
+
+    seenFiles.add(fileRelPath);
 
     current.children?.push({
       name: fileName,

package/file-viewer.ts

@@ -1,9 +1,157 @@
+import { visibleWidth, wrapTextWithAnsi } from "@mariozechner/pi-tui";
 import { execSync } from "node:child_process";
-import { readFileSync } from "node:fs";
+import { readFileSync, statSync } from "node:fs";
 
 import { isGitRepo } from "./git";
 import { hasCommand, stripLeadingEmptyLines } from "./utils";
 
+const DIFF_CONTENT_PREFIXES = new Set(["+", "-", " "]);
+
+function isDiffContentLine(line: string): boolean {
+  if (!line) return false;
+  if (!DIFF_CONTENT_PREFIXES.has(line[0])) return false;
+  if (line.startsWith("+++ ") || line.startsWith("--- ")) return false;
+  return true;
+}
+
+function wrapLine(line: string, width: number): string[] {
+  if (width <= 0 || line.length <= width) {
+    return [line];
+  }
+  const wrapped: string[] = [];
+  for (let i = 0; i < line.length; i += width) {
+    wrapped.push(line.slice(i, i + width));
+  }
+  return wrapped;
+}
+
+function wrapDiffLines(lines: string[], width: number): string[] {
+  if (width <= 0) return lines;
+  const wrapped: string[] = [];
+  for (const line of lines) {
+    if (line.length <= width) {
+      wrapped.push(line);
+      continue;
+    }
+    if (isDiffContentLine(line)) {
+      const prefix = line[0];
+      const content = line.slice(1);
+      const contentWidth = Math.max(width - 1, 1);
+      for (const chunk of wrapLine(content, contentWidth)) {
+        wrapped.push(prefix + chunk);
+      }
+    } else {
+      wrapped.push(...wrapLine(line, width));
+    }
+  }
+  return wrapped;
+}
+
+function extractAnsiCode(str: string, pos: number): { length: number } | null {
+  if (pos >= str.length || str[pos] !== "\x1b") return null;
+  const next = str[pos + 1];
+  if (next === "[") {
+    let j = pos + 2;
+    while (j < str.length && !/[mGKHJ]/.test(str[j])) j++;
+    if (j < str.length) return { length: j + 1 - pos };
+    return null;
+  }
+  if (next === "]") {
+    let j = pos + 2;
+    while (j < str.length) {
+      if (str[j] === "\x07") return { length: j + 1 - pos };
+      if (str[j] === "\x1b" && str[j + 1] === "\\") return { length: j + 2 - pos };
+      j++;
+    }
+    return null;
+  }
+  if (next === "_") {
+    let j = pos + 2;
+    while (j < str.length) {
+      if (str[j] === "\x07") return { length: j + 1 - pos };
+      if (str[j] === "\x1b" && str[j + 1] === "\\") return { length: j + 2 - pos };
+      j++;
+    }
+    return null;
+  }
+  return null;
+}
+
+function stripAnsiCodes(line: string): string {
+  let result = "";
+  for (let i = 0; i < line.length;) {
+    const ansi = extractAnsiCode(line, i);
+    if (ansi) {
+      i += ansi.length;
+      continue;
+    }
+    result += line[i];
+    i += 1;
+  }
+  return result;
+}
+
+function splitByVisibleWidth(line: string, width: number): { prefix: string; rest: string } {
+  if (width <= 0) return { prefix: "", rest: line };
+  let visible = 0;
+  let i = 0;
+  while (i < line.length) {
+    const ansi = extractAnsiCode(line, i);
+    if (ansi) {
+      i += ansi.length;
+      continue;
+    }
+    const charWidth = visibleWidth(line[i]);
+    if (visible + charWidth > width) break;
+    visible += charWidth;
+    i += 1;
+  }
+  return { prefix: line.slice(0, i), rest: line.slice(i) };
+}
+
+function maskDigits(line: string): string {
+  let result = "";
+  for (let i = 0; i < line.length;) {
+    const ansi = extractAnsiCode(line, i);
+    if (ansi) {
+      result += line.slice(i, i + ansi.length);
+      i += ansi.length;
+      continue;
+    }
+    const char = line[i];
+    result += char >= "0" && char <= "9" ? " " : char;
+    i += 1;
+  }
+  return result;
+}
+
+function wrapDeltaLine(line: string, width: number): string[] {
+  const clean = stripAnsiCodes(line);
+  let separatorIndex = clean.indexOf("│");
+  if (separatorIndex === -1) separatorIndex = clean.indexOf("|");
+  if (separatorIndex === -1) return wrapTextWithAnsi(line, width);
+
+  let prefixWidth = visibleWidth(clean.slice(0, separatorIndex + 1));
+  if (clean[separatorIndex + 1] === " ") prefixWidth += 1;
+  if (prefixWidth >= width) return wrapTextWithAnsi(line, width);
+
+  const { prefix, rest } = splitByVisibleWidth(line, prefixWidth);
+  const contentWidth = Math.max(width - visibleWidth(prefix), 1);
+  const continuationPrefix = maskDigits(prefix);
+  const wrappedContent = wrapTextWithAnsi(rest, contentWidth);
+
+  return wrappedContent.map((chunk, index) => (index === 0 ? prefix : continuationPrefix) + chunk);
+}
+
+function wrapDeltaLines(lines: string[], width: number): string[] {
+  if (width <= 0) return lines;
+  const wrapped: string[] = [];
+  for (const line of lines) {
+    wrapped.push(...wrapDeltaLine(line, width));
+  }
+  return wrapped;
+}
+
 export function loadFileContent(
   filePath: string,
   cwd: string,
@@ -15,23 +163,31 @@ export function loadFileContent(
   const termWidth = width || process.stdout.columns || 80;
 
   try {
+    try {
+      if (statSync(filePath).isDirectory()) {
+        return ["Directory selected - expand it in the file tree instead of opening it."];
+      }
+    } catch {
+      // Ignore stat errors and fall through to normal handling
+    }
+
     if (diffMode && hasChanges && isGitRepo(cwd)) {
       try {
         // Try different diff strategies
         let diffOutput = "";
 
         // First try: unstaged changes
-        const unstaged = execSync(`git diff -- "${filePath}"`, { cwd, encoding: "utf-8", timeout: 10000, stdio: "pipe" });
+        const unstaged = execSync(`git diff --no-color -- "${filePath}"`, { cwd, encoding: "utf-8", timeout: 10000, stdio: "pipe" });
         if (unstaged.trim()) {
           diffOutput = unstaged;
         } else {
           // Second try: staged changes
-          const staged = execSync(`git diff --cached -- "${filePath}"`, { cwd, encoding: "utf-8", timeout: 10000, stdio: "pipe" });
+          const staged = execSync(`git diff --no-color --cached -- "${filePath}"`, { cwd, encoding: "utf-8", timeout: 10000, stdio: "pipe" });
           if (staged.trim()) {
             diffOutput = staged;
           } else {
             // Third try: diff against HEAD (for new files that are staged)
-            const headDiff = execSync(`git diff HEAD -- "${filePath}"`, { cwd, encoding: "utf-8", timeout: 10000, stdio: "pipe" });
+            const headDiff = execSync(`git diff --no-color HEAD -- "${filePath}"`, { cwd, encoding: "utf-8", timeout: 10000, stdio: "pipe" });
             if (headDiff.trim()) {
               diffOutput = headDiff;
             }
@@ -46,7 +202,7 @@ export function loadFileContent(
           // Pipe through delta with line numbers for better readability
           try {
             const deltaOutput = execSync(
-              `delta --no-gitconfig --width=${termWidth} --line-numbers`,
+              `delta --no-gitconfig --width=${termWidth} --line-numbers --wrap-max-lines=unlimited --max-line-length=0`,
               {
                 cwd,
                 encoding: "utf-8",
@@ -55,13 +211,13 @@ export function loadFileContent(
                 stdio: ["pipe", "pipe", "pipe"],
               }
             );
-            return stripLeadingEmptyLines(deltaOutput.split("\n"));
+            return wrapDeltaLines(stripLeadingEmptyLines(deltaOutput.split("\n")), termWidth);
           } catch {
             // Fall back to raw diff
           }
         }
 
-        return diffOutput.split("\n");
+        return wrapDiffLines(stripLeadingEmptyLines(diffOutput.split("\n")), termWidth);
       } catch (e: any) {
         return [`Diff error: ${e.message}`];
       }
@@ -79,10 +235,21 @@ export function loadFileContent(
     }
 
     if (hasCommand("bat")) {
-      return execSync(
-        `bat --style=numbers --color=always --paging=never --wrap=auto --terminal-width=${termWidth} "${filePath}"`,
-        { encoding: "utf-8", timeout: 10000 }
-      ).split("\n");
+      try {
+        return execSync(
+          `bat --style=numbers --color=always --paging=never --wrap=auto --terminal-width=${termWidth} "${filePath}"`,
+          { encoding: "utf-8", timeout: 10000 }
+        ).split("\n");
+      } catch {
+        try {
+          return execSync(
+            `bat --style=numbers --color=always --paging=never --terminal-width=${termWidth} "${filePath}"`,
+            { encoding: "utf-8", timeout: 10000 }
+          ).split("\n");
+        } catch {
+          // Fall through to raw file read
+        }
+      }
     }
 
     const raw = readFileSync(filePath, "utf-8");

package/index.ts

@@ -17,10 +17,18 @@ import { hasCommand } from "./utils";
 export default function editorExtension(pi: ExtensionAPI): void {
   const cwd = process.cwd();
   const agentModifiedFiles = new Set<string>();
+  const requiredDeps = ["bat", "delta", "glow"] as const;
+  const getMissingDeps = () => requiredDeps.filter((dep) => !hasCommand(dep));
 
   pi.registerCommand("files", {
     description: "Open file browser",
     handler: async (_args, ctx) => {
+      const missing = getMissingDeps();
+      if (missing.length > 0) {
+        ctx.ui.notify(`files-widget requires ${missing.join(", ")}. Install: brew install bat git-delta glow`, "error");
+        return;
+      }
+
       await ctx.ui.custom<void>((tui, theme, _kb, done) => {
         let pollInterval: ReturnType<typeof setInterval> | null = null;
 
@@ -122,13 +130,9 @@ export default function editorExtension(pi: ExtensionAPI): void {
   });
 
   pi.on("session_start", async (_event, ctx) => {
-    const missing: string[] = [];
-    if (!hasCommand("bat")) missing.push("bat");
-    if (!hasCommand("delta")) missing.push("delta");
-    if (!hasCommand("glow")) missing.push("glow");
-
+    const missing = getMissingDeps();
     if (missing.length > 0) {
-      ctx.ui.notify(`Editor: install ${missing.join(", ")} for better experience`, "info");
+      ctx.ui.notify(`files-widget requires ${missing.join(", ")}. Install: brew install bat git-delta glow`, "error");
     }
 
     agentModifiedFiles.clear();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tmustier/pi-files-widget",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "In-terminal file browser and viewer for Pi.",
   "license": "MIT",
   "author": "Thomas Mustier",
@@ -14,6 +14,13 @@
   },
   "bugs": "https://github.com/tmustier/pi-extensions/issues",
   "homepage": "https://github.com/tmustier/pi-extensions/tree/main/files-widget",
+  "peerDependencies": {
+    "@mariozechner/pi-coding-agent": "^0.50.0",
+    "@mariozechner/pi-tui": "^0.50.0"
+  },
+  "scripts": {
+    "postinstall": "node -e \"console.log('pi-files-widget: required deps: bat, delta, glow. Install with: brew install bat git-delta glow')\""
+  },
   "pi": {
     "extensions": [
       "index.ts"