@smoose/pi-beautify 0.1.4 → 0.1.7

package/README.md

@@ -2,10 +2,16 @@
 
 A small pi extension for visual polish.
 
+## Cleaner markdown code blocks
+
+Pi's terminal markdown renderer shows fenced code block borders like ```text. This extension hides those fence lines; plain text fences render as normal prose, while real code remains highlighted and indented.
+
 ## Clipboard image chips
 
 Pi currently pastes clipboard images as long temporary file paths. This extension replaces newly pasted `pi-clipboard-*` paths in the editor with compact chips like `[image1]` for display, then restores those chips to the original file paths before the prompt is sent so the request stays identical to native pi behavior.
 
+On macOS, if Ctrl+V sees Finder file URLs on the clipboard, the extension inserts those original file paths first and skips pi's image-reader path. This avoids Finder-copied files being saved as PNG file icons.
+
 ## Installation
 
 ```bash

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smoose/pi-beautify",
-  "version": "0.1.4",
+  "version": "0.1.7",
   "description": "Small visual polish extensions for pi coding agent",
   "type": "module",
   "files": [

package/src/index.ts

@@ -1,5 +1,7 @@
+import { spawnSync } from "node:child_process";
+
 import { CustomEditor, type AppKeybinding, type ExtensionAPI, type KeybindingsManager, type Theme } from "@earendil-works/pi-coding-agent";
-import { getKeybindings, matchesKey, truncateToWidth, type AutocompleteProvider, type EditorComponent, type EditorTheme, type TUI } from "@earendil-works/pi-tui";
+import { getKeybindings, Markdown, matchesKey, truncateToWidth, type AutocompleteProvider, type EditorComponent, type EditorTheme, type TUI } from "@earendil-works/pi-tui";
 
 interface Attachment {
   token: string;
@@ -9,6 +11,103 @@ interface Attachment {
 const CLIPBOARD_PATH_RE = /(?:[^\s"'`<>]+[\\/])?pi-clipboard-[0-9a-f-]+\.(?:png|jpe?g|webp|gif)/gi;
 const TOKEN_RE = /\[image(\d+)\]/g;
 const TOKEN_LINE_RE = /\[image\d+\]/g;
+const IMAGE_FILE_RE = /\.(?:png|jpe?g|webp|gif)$/i;
+const MARKDOWN_PATCH_STATE = Symbol.for("smoose.pi-beautify.markdown.patch");
+const PLAIN_CODE_LANGS = new Set(["", "text", "plain", "plaintext"]);
+const MACOS_CLIPBOARD_FILE_PATHS_SCRIPT = `
+ObjC.import('AppKit');
+ObjC.import('Foundation');
+const pb = $.NSPasteboard.generalPasteboard;
+const classes = $.NSArray.arrayWithObject($.NSURL);
+const options = $.NSDictionary.dictionaryWithObjectForKey($.NSNumber.numberWithBool(true), $.NSPasteboardURLReadingFileURLsOnlyKey);
+const urls = pb.readObjectsForClassesOptions(classes, options);
+const paths = [];
+if (urls) {
+  for (let i = 0; i < urls.count; i++) {
+    const url = urls.objectAtIndex(i);
+    if (url.isFileURL) paths.push(ObjC.unwrap(url.path));
+  }
+}
+JSON.stringify(paths);
+`;
+
+interface MarkdownCodeToken {
+  type: "code";
+  lang?: string;
+  text?: string;
+}
+
+interface BeautifyMarkdownTheme {
+  codeBlock: (text: string) => string;
+  codeBlockIndent?: string;
+  highlightCode?: (code: string, lang?: string) => string[];
+}
+
+interface MarkdownRuntime {
+  theme: BeautifyMarkdownTheme;
+  applyDefaultStyle?: (text: string) => string;
+}
+
+type MarkdownRenderToken = (this: MarkdownRuntime, token: unknown, width: number, nextTokenType?: string, styleContext?: unknown) => string[];
+
+interface MarkdownPatchState {
+  installed: true;
+  original: MarkdownRenderToken;
+  renderCodeToken: (instance: MarkdownRuntime, token: MarkdownCodeToken, nextTokenType?: string) => string[];
+}
+
+type PatchedMarkdownPrototype = {
+  renderToken?: MarkdownRenderToken;
+  [key: symbol]: unknown;
+};
+
+function isMarkdownCodeToken(token: unknown): token is MarkdownCodeToken {
+  return typeof token === "object" && token !== null && (token as { type?: unknown }).type === "code";
+}
+
+function renderCodeTokenWithoutFences(instance: MarkdownRuntime, token: MarkdownCodeToken, nextTokenType?: string): string[] {
+  const raw = typeof token.text === "string" ? token.text : "";
+  const lang = typeof token.lang === "string" ? token.lang.trim().toLowerCase() : "";
+  const lines: string[] = [];
+
+  if (PLAIN_CODE_LANGS.has(lang)) {
+    for (const line of raw.split("\n")) lines.push(instance.applyDefaultStyle?.(line) ?? line);
+  } else if (instance.theme.highlightCode) {
+    const indent = instance.theme.codeBlockIndent ?? "  ";
+    for (const line of instance.theme.highlightCode(raw, token.lang)) lines.push(`${indent}${line}`);
+  } else {
+    const indent = instance.theme.codeBlockIndent ?? "  ";
+    for (const line of raw.split("\n")) lines.push(`${indent}${instance.theme.codeBlock(line)}`);
+  }
+
+  if (nextTokenType && nextTokenType !== "space") lines.push("");
+  return lines;
+}
+
+function installMarkdownFencePatch(): void {
+  const proto = Markdown.prototype as unknown as PatchedMarkdownPrototype;
+  const existing = proto[MARKDOWN_PATCH_STATE] as MarkdownPatchState | undefined;
+  if (existing?.installed) {
+    existing.renderCodeToken = renderCodeTokenWithoutFences;
+    return;
+  }
+
+  const original = proto.renderToken;
+  if (typeof original !== "function") return;
+
+  const state: MarkdownPatchState = {
+    installed: true,
+    original,
+    renderCodeToken: renderCodeTokenWithoutFences,
+  };
+  proto[MARKDOWN_PATCH_STATE] = state;
+
+  proto.renderToken = function (this: MarkdownRuntime, token: unknown, width: number, nextTokenType?: string, styleContext?: unknown): string[] {
+    const current = proto[MARKDOWN_PATCH_STATE] as MarkdownPatchState | undefined;
+    if (current && isMarkdownCodeToken(token)) return current.renderCodeToken(this, token, nextTokenType);
+    return (current?.original ?? original).call(this, token, width, nextTokenType, styleContext);
+  };
+}
 
 function imageChip(id: number): string {
   return `[image${id}]`;
@@ -18,6 +117,47 @@ function displayChip(token: string, theme: Theme): string {
   return theme.fg("toolDiffAdded", theme.inverse(token));
 }
 
+function readClipboardFilePaths(): string[] {
+  if (process.platform !== "darwin") return [];
+
+  const result = spawnSync("osascript", ["-l", "JavaScript", "-e", MACOS_CLIPBOARD_FILE_PATHS_SCRIPT], {
+    encoding: "utf8",
+    timeout: 700,
+    maxBuffer: 1024 * 1024,
+  });
+  if (result.error || result.status !== 0) return [];
+
+  try {
+    const parsed: unknown = JSON.parse(result.stdout.trim() || "[]");
+    if (!Array.isArray(parsed)) return [];
+    const seen = new Set<string>();
+    return parsed.filter((path): path is string => {
+      if (typeof path !== "string" || path.length === 0 || seen.has(path)) return false;
+      seen.add(path);
+      return true;
+    });
+  } catch {
+    return [];
+  }
+}
+
+function pasteClipboardFilePaths(editor: EditorComponent, imageTokens: ImageTokenController, tui: TUI): boolean {
+  const paths = readClipboardFilePaths();
+  if (paths.length === 0) return false;
+
+  const text = imageTokens.formatClipboardFilePaths(paths, editor.getText());
+  if (!text) return false;
+
+  if (editor.insertTextAtCursor) {
+    editor.insertTextAtCursor(text);
+  } else {
+    editor.setText(editor.getText() + text);
+    editor.onChange?.(editor.getText());
+  }
+  tui.requestRender();
+  return true;
+}
+
 interface EditorInternals {
   state: { lines: string[]; cursorLine: number; cursorCol: number };
   historyIndex: number;
@@ -42,6 +182,12 @@ class ImageTokenController {
     return text.replace(CLIPBOARD_PATH_RE, (path) => this.createImageToken(path, usedIds));
   }
 
+  formatClipboardFilePaths(paths: string[], existingText = ""): string {
+    const usedIds = this.collectUsedIds(existingText);
+    const pieces = paths.map((path) => (IMAGE_FILE_RE.test(path) ? this.createImageToken(path, usedIds).trimEnd() : path));
+    return pieces.length > 0 ? `${pieces.join(paths.length > 1 ? "\n" : "")} ` : "";
+  }
+
   replaceClipboardPathsInEditor(editor: EditorComponent, tui: TUI): void {
     const current = editor.getText();
     const usedIds = this.collectUsedIds(current);
@@ -126,9 +272,15 @@ class BeautifyEditor extends CustomEditor {
 
   handleInput(data: string): void {
     const isImagePaste = this.appKeybindings.matches(data, "app.clipboard.pasteImage");
+    if (isImagePaste) {
+      if (this.onExtensionShortcut?.(data)) return;
+      if (pasteClipboardFilePaths(this, this.imageTokens, this.tui)) return;
+      this.onPasteImage?.();
+      this.scheduleClipboardPathScan();
+      return;
+    }
     if (this.imageTokens.deleteImageTokenAtCursor(this, data, this.tui)) return;
     super.handleInput(data);
-    if (isImagePaste) this.scheduleClipboardPathScan();
   }
 
   insertTextAtCursor(text: string): void {
@@ -256,6 +408,7 @@ class BeautifyEditorWrapper implements EditorComponent {
     if (this.onExtensionShortcut?.(data)) return;
     if (this.imageTokens.deleteImageTokenAtCursor(this.inner, data, this.tui)) return;
     if (isImagePaste) {
+      if (pasteClipboardFilePaths(this, this.imageTokens, this.tui)) return;
       this.onPasteImage?.();
       this.scheduleClipboardPathScan();
       return;
@@ -326,6 +479,8 @@ function collectImageAttachments(text: string, attachments: Map<string, Attachme
 }
 
 export default function piBeautify(pi: ExtensionAPI) {
+  installMarkdownFencePatch();
+
   const attachments = new Map<string, Attachment>();
 
   pi.on("session_start", (_event, ctx) => {