@smoose/pi-beautify 0.1.3 → 0.1.6

package/README.md

@@ -2,9 +2,13 @@
 
 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 `[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.3",
+  "version": "0.1.6",
   "description": "Small visual polish extensions for pi coding agent",
   "type": "module",
   "files": [

package/src/index.ts

@@ -1,25 +1,93 @@
 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";
+import { getKeybindings, Markdown, matchesKey, truncateToWidth, type AutocompleteProvider, type EditorComponent, type EditorTheme, type TUI } from "@earendil-works/pi-tui";
 
 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;
+const MARKDOWN_PATCH_STATE = Symbol.for("smoose.pi-beautify.markdown.patch");
+const PLAIN_CODE_LANGS = new Set(["", "text", "plain", "plaintext"]);
 
-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";
+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 {
@@ -118,7 +186,7 @@ class ImageTokenController {
     while (usedIds.has(id)) id++;
     usedIds.add(id);
     const token = imageChip(id);
-    this.attachments.set(token, { token, path, mimeType: mimeTypeForPath(path) });
+    this.attachments.set(token, { token, path });
     return `${token} `;
   }
 }
@@ -337,16 +405,9 @@ 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) {
+  installMarkdownFencePatch();
+
   const attachments = new Map<string, Attachment>();
 
   pi.on("session_start", (_event, ctx) => {
@@ -368,23 +429,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,
     };
   });
 }