pi-files-widget-overlay 0.3.0

package/src/index.ts

@@ -0,0 +1,147 @@
+/**
+ * Pi Editor Extension
+ *
+ * Provides an in-terminal file browser and viewer.
+ * Use /readfiles to open the file browser, navigate with j/k, Enter to view.
+ */
+
+import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { statSync } from "node:fs";
+import { homedir } from "node:os";
+import { isAbsolute, join, resolve } from "node:path";
+
+import { OVERLAY_MAX_HEIGHT, POLL_INTERVAL_MS } from "./constants";
+import { formatCommentMessage } from "./comment";
+import { getObservedToolActivityPath } from "./activity";
+
+function resolveInitialPath(arg: string | undefined, cwd: string): { path: string; error?: string } {
+  if (!arg) return { path: cwd };
+  let candidate = arg.trim();
+  if (!candidate) return { path: cwd };
+  const home = homedir();
+  if (candidate === "~") {
+    candidate = home;
+  } else if (candidate.startsWith("~/")) {
+    candidate = join(home, candidate.slice(2));
+  }
+  const absolute = isAbsolute(candidate) ? candidate : resolve(cwd, candidate);
+  try {
+    if (!statSync(absolute).isDirectory()) {
+      return { path: cwd, error: `${absolute} is not a directory` };
+    }
+  } catch {
+    return { path: cwd, error: `${absolute} is not accessible` };
+  }
+  return { path: absolute };
+}
+
+export default function editorExtension(pi: ExtensionAPI): void {
+  const cwd = process.cwd();
+  const agentModifiedFiles = new Set<string>();
+
+  pi.registerCommand("readfiles", {
+    description: "Open file browser as a floating overlay (optional: /readfiles <path> to start outside the current directory)",
+    handler: async (args, ctx) => {
+
+      const resolved = resolveInitialPath(args, cwd);
+      if (resolved.error) {
+        ctx.ui.notify(resolved.error, "error");
+        return;
+      }
+      const initialPath = resolved.path;
+      const { createFileBrowser } = await import("./browser");
+
+      await ctx.ui.custom<void>((tui, theme, _kb, done) => {
+        let pollInterval: ReturnType<typeof setInterval> | null = null;
+
+        const cleanup = () => {
+          if (pollInterval) {
+            clearInterval(pollInterval);
+            pollInterval = null;
+          }
+          done();
+        };
+
+        const requestComment = (payload: { relPath: string; lineRange: string; ext: string; selectedText: string }, comment: string) => {
+          const message = formatCommentMessage(payload, comment);
+          if (ctx.isIdle()) {
+            pi.sendUserMessage(message);
+            ctx.ui.notify(`Comment sent to agent for ${payload.relPath} (${payload.lineRange})`, "info");
+          } else {
+            pi.sendUserMessage(message, { deliverAs: "followUp" });
+            ctx.ui.notify(`Comment queued for agent for ${payload.relPath} (${payload.lineRange})`, "info");
+          }
+        };
+
+        const requestRender = () => tui.requestRender();
+        const browser = createFileBrowser(
+          initialPath,
+          agentModifiedFiles,
+          theme,
+          cleanup,
+          requestComment,
+          requestRender,
+          cwd
+        );
+
+        pollInterval = setInterval(() => {
+          requestRender();
+        }, POLL_INTERVAL_MS);
+
+        const renderOverlay = (width: number): string[] => {
+          // Keep the browser usable on narrow terminals: a percentage width is
+          // clamped by Pi to the viewport, while the component truncates safely.
+          if (width < 3) return browser.render(width);
+
+          const innerWidth = width - 2;
+          const padLine = (line: string) => {
+            const truncated = truncateToWidth(line, innerWidth, "", true);
+            return truncated + " ".repeat(Math.max(0, innerWidth - visibleWidth(truncated)));
+          };
+          const border = (character: string) => theme.fg("border", character);
+          const header = padLine(theme.fg("accent", theme.bold(" Files ")));
+
+          return [
+            border(`┌${"─".repeat(innerWidth)}┐`),
+            border("│") + header + border("│"),
+            border(`├${"─".repeat(innerWidth)}┤`),
+            ...browser.render(innerWidth).map(line => border("│") + padLine(line) + border("│")),
+            border(`└${"─".repeat(innerWidth)}┘`),
+          ];
+        };
+
+        return {
+          render: renderOverlay,
+          handleInput: (data) => {
+            browser.handleInput(data);
+            requestRender();
+          },
+          invalidate: () => browser.invalidate(),
+        };
+      }, {
+        overlay: true,
+        overlayOptions: {
+          anchor: "center",
+          width: "95%",
+          maxHeight: OVERLAY_MAX_HEIGHT,
+          margin: 1,
+        },
+      });
+    },
+  });
+
+  pi.on("tool_result", async (event) => {
+    const filePath = getObservedToolActivityPath(event.toolName, event.input, cwd);
+    if (filePath) agentModifiedFiles.add(filePath);
+  });
+
+  pi.on("session_start", async () => {
+
+    agentModifiedFiles.clear();
+  });
+
+  pi.on("session_before_switch", () => {
+    agentModifiedFiles.clear();
+  });
+}

package/src/input-utils.ts

@@ -0,0 +1,96 @@
+import { decodeKittyPrintable } from "@earendil-works/pi-tui";
+
+const CONTROL_CHARS = /[\u0000-\u0008\u000B-\u001F\u007F]/g;
+const BRACKETED_PASTE_START = "\u001b[200~";
+const BRACKETED_PASTE_END = "\u001b[201~";
+
+interface SanitizeTextInputOptions {
+  preserveNewlines?: boolean;
+}
+
+function sanitizeTextInput(data: string, options: SanitizeTextInputOptions = {}): string {
+  const normalized = decodeKittyPrintable(data) ?? data;
+  if (!normalized || normalized.includes("\u001b")) {
+    return "";
+  }
+
+  const withNewlines = normalized.replace(/\r\n?/g, "\n");
+  const withoutTabs = options.preserveNewlines
+    ? withNewlines.replace(/\t/g, "  ")
+    : withNewlines.replace(/\n/g, " ").replace(/\t/g, " ");
+
+  return withoutTabs.replace(CONTROL_CHARS, "");
+}
+
+function getPendingStartSuffix(data: string): string {
+  const maxLength = BRACKETED_PASTE_START.length - 1;
+  for (let length = Math.min(data.length, maxLength); length > 0; length--) {
+    const suffix = data.slice(-length);
+    if (BRACKETED_PASTE_START.startsWith(suffix)) {
+      return suffix;
+    }
+  }
+  return "";
+}
+
+export interface TextInputBuffer {
+  push(data: string): string;
+  reset(): void;
+}
+
+interface TextInputBufferOptions {
+  preserveNewlines?: boolean;
+}
+
+export function createTextInputBuffer(options: TextInputBufferOptions = {}): TextInputBuffer {
+  let isInPaste = false;
+  let pasteBuffer = "";
+  let pendingStart = "";
+
+  const push = (data: string): string => {
+    if (!data) {
+      return "";
+    }
+
+    const combined = pendingStart + data;
+    pendingStart = "";
+
+    if (!isInPaste) {
+      const startIndex = combined.indexOf(BRACKETED_PASTE_START);
+      if (startIndex === -1) {
+        const pendingSuffix = getPendingStartSuffix(combined);
+        const completeText = pendingSuffix ? combined.slice(0, combined.length - pendingSuffix.length) : combined;
+        pendingStart = pendingSuffix;
+        return sanitizeTextInput(completeText, options);
+      }
+
+      const beforePaste = combined.slice(0, startIndex);
+      const afterStart = combined.slice(startIndex + BRACKETED_PASTE_START.length);
+      isInPaste = true;
+      pasteBuffer = "";
+      return sanitizeTextInput(beforePaste, options) + push(afterStart);
+    }
+
+    pasteBuffer += combined;
+    const endIndex = pasteBuffer.indexOf(BRACKETED_PASTE_END);
+    if (endIndex === -1) {
+      return "";
+    }
+
+    const pastedText = pasteBuffer.slice(0, endIndex);
+    const remaining = pasteBuffer.slice(endIndex + BRACKETED_PASTE_END.length);
+    isInPaste = false;
+    pasteBuffer = "";
+
+    return sanitizeTextInput(pastedText, options) + push(remaining);
+  };
+
+  return {
+    push,
+    reset(): void {
+      isInPaste = false;
+      pasteBuffer = "";
+      pendingStart = "";
+    },
+  };
+}

package/src/types.ts

@@ -0,0 +1,31 @@
+export interface DiffStats {
+  additions: number;
+  deletions: number;
+}
+
+export interface FileNode {
+  name: string;
+  path: string;
+  isDirectory: boolean;
+  isSymlink?: boolean;
+  realPath?: string;
+  parent?: FileNode;
+  children?: FileNode[];
+  expanded?: boolean;
+  gitStatus?: string;
+  agentModified?: boolean;
+  lineCount?: number;
+  diffStats?: DiffStats;
+  hasChangedChildren?: boolean; // For directories
+  // Aggregated stats for directories
+  totalLines?: number;
+  totalAdditions?: number;
+  totalDeletions?: number;
+  lineCountComplete?: boolean;
+  loading?: boolean;
+}
+
+export interface FlatNode {
+  node: FileNode;
+  depth: number;
+}

package/src/utils.ts

@@ -0,0 +1,59 @@
+import { accessSync, constants, statSync } from "node:fs";
+import { extname, join } from "node:path";
+
+export interface CommandLookupOptions {
+  platform?: NodeJS.Platform;
+  path?: string;
+  pathExt?: string;
+  cwd?: string;
+}
+
+export function hasCommand(cmd: string, options: CommandLookupOptions = {}): boolean {
+  const platform = options.platform ?? process.platform;
+  const pathValue = options.path ?? process.env.PATH ?? "";
+  const pathEntries = pathValue.split(platform === "win32" ? ";" : ":");
+  const searchDirectories = platform === "win32"
+    ? [options.cwd ?? process.cwd(), ...pathEntries]
+    : pathEntries;
+  const extensions = platform === "win32" && !extname(cmd)
+    ? (options.pathExt ?? process.env.PATHEXT ?? ".COM;.EXE;.BAT;.CMD").split(";").filter(Boolean)
+    : [""];
+  const accessMode = platform === "win32" ? constants.F_OK : constants.X_OK;
+
+  for (const rawDirectory of searchDirectories) {
+    const directory = platform === "win32" && rawDirectory.startsWith('"') && rawDirectory.endsWith('"')
+      ? rawDirectory.slice(1, -1)
+      : rawDirectory;
+    for (const extension of extensions) {
+      try {
+        const candidate = join(directory || ".", `${cmd}${extension}`);
+        accessSync(candidate, accessMode);
+        if (statSync(candidate).isFile()) return true;
+      } catch {
+        // Continue searching PATH.
+      }
+    }
+  }
+
+  return false;
+}
+
+export function isUntrackedStatus(status?: string): boolean {
+  return status === "?" || status === "??";
+}
+
+export function isIgnoredStatus(status?: string): boolean {
+  return status === "!" || status === "!!";
+}
+
+export function isMarkdownPath(path: string): boolean {
+  return path.toLowerCase().endsWith(".md");
+}
+
+export function stripLeadingEmptyLines(lines: string[]): string[] {
+  let startIdx = 0;
+  while (startIdx < lines.length && !lines[startIdx].trim()) {
+    startIdx++;
+  }
+  return lines.slice(startIdx);
+}