@smoose/pi-beautify 0.1.2 → 0.1.4

package/README.md

@@ -4,7 +4,7 @@ A small pi extension for visual polish.
 
 ## 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 `[image:1]`, then turns those chips back into attached image content before the prompt is sent.
+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.
 
 ## Installation
 

package/package.json

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

package/src/index.ts

@@ -1,27 +1,15 @@
 import { CustomEditor, type AppKeybinding, type ExtensionAPI, type KeybindingsManager, type Theme } from "@earendil-works/pi-coding-agent";
-import type { ImageContent } from "@earendil-works/pi-ai";
 import { getKeybindings, matchesKey, truncateToWidth, type AutocompleteProvider, type EditorComponent, type EditorTheme, type TUI } from "@earendil-works/pi-tui";
-import { existsSync, readFileSync } from "node:fs";
-import { extname } from "node:path";
 
 interface Attachment {
   token: string;
   path: string;
-  mimeType: string;
 }
 
 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;
 
-function mimeTypeForPath(path: string): string {
-  const ext = extname(path).toLowerCase();
-  if (ext === ".jpg" || ext === ".jpeg") return "image/jpeg";
-  if (ext === ".webp") return "image/webp";
-  if (ext === ".gif") return "image/gif";
-  return "image/png";
-}
-
 function imageChip(id: number): string {
   return `[image${id}]`;
 }
@@ -39,8 +27,6 @@ interface EditorInternals {
 }
 
 class ImageTokenController {
-  private nextId = 1;
-
   constructor(private readonly attachments: Map<string, Attachment>) {}
 
   renderChips(lines: string[], theme: Theme, width: number): string[] {
@@ -51,16 +37,18 @@ class ImageTokenController {
     return rendered.map((line) => truncateToWidth(line, width, ""));
   }
 
-  replaceClipboardPathsInText(text: string): string {
-    return text.replace(CLIPBOARD_PATH_RE, (path) => this.createImageToken(path));
+  replaceClipboardPathsInText(text: string, existingText = ""): string {
+    const usedIds = this.collectUsedIds(`${existingText}\n${text}`);
+    return text.replace(CLIPBOARD_PATH_RE, (path) => this.createImageToken(path, usedIds));
   }
 
   replaceClipboardPathsInEditor(editor: EditorComponent, tui: TUI): void {
     const current = editor.getText();
+    const usedIds = this.collectUsedIds(current);
     let changed = false;
     const next = current.replace(CLIPBOARD_PATH_RE, (path) => {
       changed = true;
-      return this.createImageToken(path);
+      return this.createImageToken(path, usedIds);
     });
     if (!changed) return;
     editor.setText(next);
@@ -107,9 +95,18 @@ class ImageTokenController {
     return undefined;
   }
 
-  private createImageToken(path: string): string {
-    const token = imageChip(this.nextId++);
-    this.attachments.set(token, { token, path, mimeType: mimeTypeForPath(path) });
+  private collectUsedIds(text: string): Set<number> {
+    const usedIds = new Set<number>();
+    for (const match of text.matchAll(TOKEN_RE)) usedIds.add(Number(match[1]));
+    return usedIds;
+  }
+
+  private createImageToken(path: string, usedIds: Set<number>): string {
+    let id = 1;
+    while (usedIds.has(id)) id++;
+    usedIds.add(id);
+    const token = imageChip(id);
+    this.attachments.set(token, { token, path });
     return `${token} `;
   }
 }
@@ -135,7 +132,7 @@ class BeautifyEditor extends CustomEditor {
   }
 
   insertTextAtCursor(text: string): void {
-    super.insertTextAtCursor(this.imageTokens.replaceClipboardPathsInText(text));
+    super.insertTextAtCursor(this.imageTokens.replaceClipboardPathsInText(text, this.getText()));
   }
 
   render(width: number): string[] {
@@ -221,7 +218,7 @@ class BeautifyEditorWrapper implements EditorComponent {
   }
 
   insertTextAtCursor(text: string): void {
-    const next = this.imageTokens.replaceClipboardPathsInText(text);
+    const next = this.imageTokens.replaceClipboardPathsInText(text, this.inner.getText());
     if (this.inner.insertTextAtCursor) {
       this.inner.insertTextAtCursor(next);
       return;
@@ -328,15 +325,6 @@ function collectImageAttachments(text: string, attachments: Map<string, Attachme
   return selected;
 }
 
-function toImageContent(attachment: Attachment): ImageContent | undefined {
-  if (!existsSync(attachment.path)) return undefined;
-  return {
-    type: "image",
-    data: readFileSync(attachment.path).toString("base64"),
-    mimeType: attachment.mimeType,
-  };
-}
-
 export default function piBeautify(pi: ExtensionAPI) {
   const attachments = new Map<string, Attachment>();
 
@@ -359,23 +347,17 @@ export default function piBeautify(pi: ExtensionAPI) {
     if (ctx.hasUI) ctx.ui.setStatus("pi-beautify", undefined);
   });
 
-  pi.on("input", async (event, ctx) => {
+  pi.on("input", async (event) => {
     const selected = collectImageAttachments(event.text, attachments);
     if (selected.length === 0) return { action: "continue" };
 
-    const converted = selected.map(toImageContent).filter((image): image is ImageContent => image !== undefined);
-    if (converted.length === 0) {
-      if (ctx.hasUI) ctx.ui.notify("pi-beautify: image file disappeared before submit", "warning");
-      return { action: "continue" };
-    }
-
+    const text = event.text.replace(TOKEN_RE, (full, id) => attachments.get(imageChip(Number(id)))?.path ?? full);
     for (const attachment of selected) attachments.delete(attachment.token);
 
-    const text = event.text.replace(TOKEN_RE, (_full, id) => `[attached image ${id}]`);
     return {
       action: "transform",
       text,
-      images: [...(event.images ?? []), ...converted],
+      images: event.images,
     };
   });
 }