pi-image-tools 1.0.0

package/src/index.ts

@@ -0,0 +1,260 @@
+import type { ExtensionAPI } from "@mariozechner/pi-coding-agent";
+
+import { readClipboardImage } from "./clipboard.js";
+import { registerPasteImageCommand } from "./commands.js";
+import {
+  IMAGE_PREVIEW_CUSTOM_TYPE,
+  buildPreviewItems,
+  registerImagePreviewDisplay,
+  type ImagePayload,
+} from "./image-preview.js";
+import { registerInlineUserImagePreview } from "./inline-user-preview.js";
+import { registerImagePasteKeybindings } from "./keybindings.js";
+import {
+  RECENT_IMAGE_CACHE_DIR_ENV_VAR,
+  RECENT_IMAGE_ENV_VAR,
+  discoverRecentImages,
+  formatRecentImageLabel,
+  getRecentImageCacheDirectory,
+  loadRecentImage,
+  persistImageToRecentCache,
+} from "./recent-images.js";
+import type { ClipboardImage, PasteContext } from "./types.js";
+
+const IMAGE_ATTACHMENT_INDICATOR = "[󰈟 Image Attached]";
+
+interface PendingImage extends ImagePayload {}
+
+function getErrorMessage(error: unknown): string {
+  if (error instanceof Error && error.message.trim().length > 0) {
+    return error.message;
+  }
+
+  return "Unknown error";
+}
+
+function isWindowsPlatform(platform: NodeJS.Platform = process.platform): boolean {
+  return platform === "win32";
+}
+
+function imageToBase64(image: ClipboardImage): string {
+  return Buffer.from(image.bytes).toString("base64");
+}
+
+function countOccurrences(text: string, token: string): number {
+  if (token.length === 0) {
+    return 0;
+  }
+
+  let count = 0;
+  let cursor = 0;
+  while (cursor < text.length) {
+    const index = text.indexOf(token, cursor);
+    if (index === -1) {
+      break;
+    }
+
+    count += 1;
+    cursor = index + token.length;
+  }
+
+  return count;
+}
+
+function removeAttachmentIndicators(text: string): string {
+  const withoutMarkers = text.split(IMAGE_ATTACHMENT_INDICATOR).join("");
+  return withoutMarkers.replace(/\n{3,}/g, "\n\n").trim();
+}
+
+function queueImageAttachment(
+  ctx: PasteContext,
+  pendingImages: PendingImage[],
+  image: ClipboardImage,
+  successMessage: string,
+  options: { cacheForRecentPicker?: boolean } = {},
+): void {
+  pendingImages.push({
+    type: "image",
+    data: imageToBase64(image),
+    mimeType: image.mimeType,
+  });
+
+  if (options.cacheForRecentPicker) {
+    try {
+      persistImageToRecentCache(image);
+    } catch (error) {
+      if (ctx.hasUI) {
+        ctx.ui.notify(
+          `Image attached, but failed to cache for /paste-image recent: ${getErrorMessage(error)}`,
+          "warning",
+        );
+      }
+    }
+  }
+
+  if (!ctx.hasUI) {
+    return;
+  }
+
+  ctx.ui.pasteToEditor(`${IMAGE_ATTACHMENT_INDICATOR} `);
+  ctx.ui.notify(successMessage, "info");
+}
+
+function buildRecentImageEmptyStateMessage(searchedDirectories: readonly string[]): string {
+  const searched =
+    searchedDirectories.length > 0
+      ? searchedDirectories.join("; ")
+      : "No directories configured";
+  const cacheDirectory = getRecentImageCacheDirectory();
+
+  return [
+    `No recent images found. Searched: ${searched}`,
+    `Clipboard-pasted images are cached in: ${cacheDirectory}`,
+    `Set ${RECENT_IMAGE_ENV_VAR} to a semicolon-separated list of directories to override defaults.`,
+    `Set ${RECENT_IMAGE_CACHE_DIR_ENV_VAR} to customize the cache directory.`,
+  ].join(" ");
+}
+
+function showRecentSelectionPreview(
+  pi: ExtensionAPI,
+  image: ClipboardImage,
+): void {
+  const previewItems = buildPreviewItems([
+    {
+      type: "image",
+      data: imageToBase64(image),
+      mimeType: image.mimeType,
+    },
+  ]);
+
+  if (previewItems.length === 0) {
+    return;
+  }
+
+  pi.sendMessage(
+    {
+      customType: IMAGE_PREVIEW_CUSTOM_TYPE,
+      content: "",
+      display: true,
+      details: { items: previewItems },
+    },
+    { triggerTurn: false },
+  );
+}
+
+export default function imageToolsExtension(pi: ExtensionAPI): void {
+  if (!isWindowsPlatform()) {
+    return;
+  }
+
+  const pendingImages: PendingImage[] = [];
+
+  registerInlineUserImagePreview(pi);
+  registerImagePreviewDisplay(pi);
+
+  const pasteImageFromClipboard = async (ctx: PasteContext): Promise<void> => {
+    if (!ctx.hasUI) {
+      return;
+    }
+
+    try {
+      const image = await readClipboardImage();
+      if (!image) {
+        ctx.ui.notify("No image found in clipboard.", "warning");
+        return;
+      }
+
+      queueImageAttachment(
+        ctx,
+        pendingImages,
+        image,
+        "Image attached from clipboard. Add your message, then send. A terminal preview will render after submit.",
+        { cacheForRecentPicker: true },
+      );
+    } catch (error) {
+      ctx.ui.notify(`Image paste failed: ${getErrorMessage(error)}`, "warning");
+    }
+  };
+
+  const pasteImageFromRecent = async (ctx: PasteContext): Promise<void> => {
+    if (!ctx.hasUI) {
+      ctx.ui.notify("/paste-image recent requires interactive TUI mode.", "warning");
+      return;
+    }
+
+    try {
+      const discovery = discoverRecentImages();
+      if (discovery.candidates.length === 0) {
+        ctx.ui.notify(buildRecentImageEmptyStateMessage(discovery.searchedDirectories), "warning");
+        return;
+      }
+
+      const options = discovery.candidates.map((candidate, index) => {
+        const rank = String(index + 1).padStart(2, "0");
+        return `${rank}. ${formatRecentImageLabel(candidate)}`;
+      });
+
+      const selectedOption = await ctx.ui.select("Select a recent image", options);
+      if (!selectedOption) {
+        return;
+      }
+
+      const selectedIndex = options.indexOf(selectedOption);
+      if (selectedIndex === -1) {
+        ctx.ui.notify("Selected image no longer exists in the recent list. Please retry.", "warning");
+        return;
+      }
+
+      const selectedCandidate = discovery.candidates[selectedIndex];
+      const selectedImage = loadRecentImage(selectedCandidate);
+
+      try {
+        showRecentSelectionPreview(pi, selectedImage);
+      } catch (error) {
+        ctx.ui.notify(`Could not render recent image preview: ${getErrorMessage(error)}`, "warning");
+      }
+
+      queueImageAttachment(
+        ctx,
+        pendingImages,
+        selectedImage,
+        `Recent image attached: ${selectedCandidate.name}. Add your message, then send. A terminal preview will render after submit.`,
+      );
+    } catch (error) {
+      ctx.ui.notify(`Recent image picker failed: ${getErrorMessage(error)}`, "warning");
+    }
+  };
+
+  pi.on("input", async (event) => {
+    if (event.source === "extension") {
+      return { action: "continue" as const };
+    }
+
+    if (pendingImages.length === 0) {
+      return { action: "continue" as const };
+    }
+
+    const markerCount = countOccurrences(event.text, IMAGE_ATTACHMENT_INDICATOR);
+    if (markerCount === 0) {
+      pendingImages.length = 0;
+      return { action: "continue" as const };
+    }
+
+    const imagesToAttach = pendingImages.splice(0, markerCount);
+    if (imagesToAttach.length === 0) {
+      return { action: "continue" as const };
+    }
+
+    return {
+      action: "transform" as const,
+      text: removeAttachmentIndicators(event.text),
+      images: [...(event.images ?? []), ...imagesToAttach],
+    };
+  });
+
+  registerImagePasteKeybindings(pi, pasteImageFromClipboard);
+  registerPasteImageCommand(pi, {
+    fromClipboard: pasteImageFromClipboard,
+    fromRecent: pasteImageFromRecent,
+  });
+}

package/src/inline-user-preview.ts

@@ -0,0 +1,345 @@
+import {
+  type ExtensionAPI,
+  InteractiveMode,
+  UserMessageComponent,
+} from "@mariozechner/pi-coding-agent";
+import { Image, truncateToWidth, visibleWidth } from "@mariozechner/pi-tui";
+
+import { buildPreviewItems, type ImagePayload, type ImagePreviewItem } from "./image-preview.js";
+
+const SIXEL_IMAGE_LINE_MARKER = "\x1b_Gm=0;\x1b\\";
+
+type UserMessageRenderFn = (width: number) => string[];
+
+type UserMessagePrototype = {
+  render: UserMessageRenderFn;
+  __piImageToolsInlineOriginalRender?: UserMessageRenderFn;
+  __piImageToolsInlinePatched?: boolean;
+};
+
+type UserMessageInstance = {
+  __piImageToolsInlineAssigned?: boolean;
+  __piImageToolsInlineItems?: ImagePreviewItem[];
+};
+
+type InteractiveModePrototype = {
+  addMessageToChat: (message: unknown, options?: unknown) => void;
+  getUserMessageText: (message: unknown) => string;
+  __piImageToolsOriginalAddMessageToChat?: (message: unknown, options?: unknown) => void;
+  __piImageToolsOriginalGetUserMessageText?: (message: unknown) => string;
+  __piImageToolsPreviewPatched?: boolean;
+};
+
+interface UserImageContent {
+  type: "image";
+  data: string;
+  mimeType: string;
+}
+
+interface UserMessageLike {
+  role?: unknown;
+  content?: unknown;
+}
+
+interface InteractiveModeLike {
+  chatContainer?: {
+    children?: unknown[];
+  };
+}
+
+function sanitizeRows(rows: number): number {
+  return Math.max(1, Math.min(Math.trunc(rows), 80));
+}
+
+function buildSixelLines(sequence: string, rows: number): string[] {
+  const safeRows = sanitizeRows(rows);
+  const lines = Array.from({ length: Math.max(0, safeRows - 1) }, () => "");
+  const moveUp = safeRows > 1 ? `\x1b[${safeRows - 1}A` : "";
+  return [...lines, `${SIXEL_IMAGE_LINE_MARKER}${moveUp}${sequence}`];
+}
+
+function buildNativeLines(item: ImagePreviewItem, width: number): string[] {
+  if (!item.data) {
+    return [];
+  }
+
+  const image = new Image(
+    item.data,
+    item.mimeType,
+    {
+      fallbackColor: (text: string) => text,
+    },
+    {
+      maxWidthCells: item.maxWidthCells,
+    },
+  );
+
+  return image.render(Math.max(8, width));
+}
+
+function isInlineImageLine(line: string): boolean {
+  return line.startsWith(SIXEL_IMAGE_LINE_MARKER) || line.includes(SIXEL_IMAGE_LINE_MARKER);
+}
+
+function fitLineToWidth(line: string, width: number): string {
+  const safeWidth = Math.max(1, Math.floor(width));
+  if (isInlineImageLine(line)) {
+    return line;
+  }
+
+  if (visibleWidth(line) <= safeWidth) {
+    return line;
+  }
+
+  return truncateToWidth(line, safeWidth, "", true);
+}
+
+function fitLinesToWidth(lines: readonly string[], width: number): string[] {
+  return lines.map((line) => fitLineToWidth(line, width));
+}
+
+function renderPreviewLines(items: readonly ImagePreviewItem[], width: number): string[] {
+  if (items.length === 0) {
+    return [];
+  }
+
+  const lines: string[] = ["", "↳ pasted image preview"];
+
+  for (const item of items) {
+    lines.push("");
+
+    if (item.protocol === "sixel" && item.sixelSequence) {
+      lines.push(...buildSixelLines(item.sixelSequence, item.rows));
+    } else {
+      lines.push(...buildNativeLines(item, width));
+    }
+
+    if (item.warning) {
+      lines.push(...item.warning.split(/\r?\n/).filter((line) => line.length > 0));
+    }
+  }
+
+  return fitLinesToWidth(lines, width);
+}
+
+function toUserMessage(value: unknown): UserMessageLike {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return {};
+  }
+
+  return value as UserMessageLike;
+}
+
+function toImageContent(value: unknown): UserImageContent | null {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return null;
+  }
+
+  const record = value as Record<string, unknown>;
+  if (record.type !== "image") {
+    return null;
+  }
+
+  if (typeof record.data !== "string" || record.data.length === 0) {
+    return null;
+  }
+
+  return {
+    type: "image",
+    data: record.data,
+    mimeType: typeof record.mimeType === "string" && record.mimeType.length > 0
+      ? record.mimeType
+      : "image/png",
+  };
+}
+
+function extractImagePayloads(message: unknown): ImagePayload[] {
+  const userMessage = toUserMessage(message);
+  if (userMessage.role !== "user") {
+    return [];
+  }
+
+  if (!Array.isArray(userMessage.content)) {
+    return [];
+  }
+
+  const payloads: ImagePayload[] = [];
+  for (const part of userMessage.content) {
+    const image = toImageContent(part);
+    if (!image) {
+      continue;
+    }
+
+    payloads.push({
+      type: "image",
+      data: image.data,
+      mimeType: image.mimeType,
+    });
+  }
+
+  return payloads;
+}
+
+function imagePlaceholderText(count: number): string {
+  if (count <= 1) {
+    return "[󰈟 1 image attached]";
+  }
+
+  return `[󰈟 ${count} images attached]`;
+}
+
+function patchUserMessageRender(): void {
+  const prototype = (UserMessageComponent as unknown as { prototype: UserMessagePrototype }).prototype;
+  if (typeof prototype.render !== "function") {
+    return;
+  }
+
+  if (!prototype.__piImageToolsInlineOriginalRender) {
+    prototype.__piImageToolsInlineOriginalRender = prototype.render;
+  }
+
+  if (prototype.__piImageToolsInlinePatched) {
+    return;
+  }
+
+  prototype.render = function renderWithInlineImagePreview(width: number): string[] {
+    const originalRender = prototype.__piImageToolsInlineOriginalRender;
+    if (!originalRender) {
+      return [];
+    }
+
+    const instance = this as unknown as UserMessageInstance;
+    if (!instance.__piImageToolsInlineAssigned) {
+      instance.__piImageToolsInlineAssigned = true;
+      if (!Array.isArray(instance.__piImageToolsInlineItems)) {
+        instance.__piImageToolsInlineItems = [];
+      }
+    }
+
+    const baseLines = originalRender.call(this, width);
+    const previewLines = renderPreviewLines(instance.__piImageToolsInlineItems ?? [], width);
+    if (previewLines.length === 0) {
+      return baseLines;
+    }
+
+    return [...baseLines, ...previewLines];
+  };
+
+  prototype.__piImageToolsInlinePatched = true;
+}
+
+function assignPreviewItemsToLatestUserMessage(
+  mode: InteractiveModeLike,
+  fromChildIndex: number,
+  previewItems: ImagePreviewItem[],
+): void {
+  const children = mode.chatContainer?.children;
+  if (!Array.isArray(children) || children.length === 0) {
+    return;
+  }
+
+  const start = Math.max(0, fromChildIndex);
+  for (let index = children.length - 1; index >= start; index -= 1) {
+    const child = children[index];
+    if (!(child instanceof UserMessageComponent)) {
+      continue;
+    }
+
+    const instance = child as unknown as UserMessageInstance;
+    instance.__piImageToolsInlineItems = previewItems;
+    instance.__piImageToolsInlineAssigned = true;
+    return;
+  }
+}
+
+function patchInteractiveMode(): void {
+  const prototype = (InteractiveMode as unknown as { prototype: InteractiveModePrototype }).prototype;
+  if (!prototype) {
+    return;
+  }
+
+  if (!prototype.__piImageToolsOriginalGetUserMessageText) {
+    prototype.__piImageToolsOriginalGetUserMessageText = prototype.getUserMessageText;
+  }
+
+  if (!prototype.__piImageToolsOriginalAddMessageToChat) {
+    prototype.__piImageToolsOriginalAddMessageToChat = prototype.addMessageToChat;
+  }
+
+  if (prototype.__piImageToolsPreviewPatched) {
+    return;
+  }
+
+  prototype.getUserMessageText = function getUserMessageTextWithImagePlaceholder(message: unknown): string {
+    const original = prototype.__piImageToolsOriginalGetUserMessageText;
+    const text = original ? original.call(this, message) : "";
+    if (text.trim().length > 0) {
+      return text;
+    }
+
+    const images = extractImagePayloads(message);
+    if (images.length === 0) {
+      return text;
+    }
+
+    return imagePlaceholderText(images.length);
+  };
+
+  prototype.addMessageToChat = function addMessageToChatWithImagePreview(message: unknown, options?: unknown): void {
+    const mode = this as unknown as InteractiveModeLike;
+    const beforeCount = Array.isArray(mode.chatContainer?.children)
+      ? mode.chatContainer?.children.length ?? 0
+      : 0;
+
+    const imagePayloads = extractImagePayloads(message);
+    let previewItems: ImagePreviewItem[] = [];
+    if (imagePayloads.length > 0) {
+      try {
+        previewItems = buildPreviewItems(imagePayloads);
+      } catch {
+        previewItems = [];
+      }
+    }
+
+    const original = prototype.__piImageToolsOriginalAddMessageToChat;
+    if (!original) {
+      return;
+    }
+
+    original.call(this, message, options);
+
+    if (previewItems.length === 0) {
+      return;
+    }
+
+    assignPreviewItemsToLatestUserMessage(mode, beforeCount, previewItems);
+  };
+
+  prototype.__piImageToolsPreviewPatched = true;
+}
+
+export function registerInlineUserImagePreview(pi: ExtensionAPI): void {
+  const schedulePatch = (): void => {
+    setTimeout(() => {
+      patchInteractiveMode();
+      patchUserMessageRender();
+    }, 0);
+
+    setTimeout(() => {
+      patchInteractiveMode();
+      patchUserMessageRender();
+    }, 25);
+  };
+
+  pi.on("session_start", async () => {
+    schedulePatch();
+  });
+
+  pi.on("before_agent_start", async () => {
+    schedulePatch();
+  });
+
+  pi.on("session_switch", async () => {
+    schedulePatch();
+  });
+}

package/src/keybindings.ts

@@ -0,0 +1,15 @@
+import type { ExtensionAPI } from "@mariozechner/pi-coding-agent";
+import type { KeyId } from "@mariozechner/pi-tui";
+
+import type { PasteImageHandler } from "./types.js";
+
+const IMAGE_PASTE_SHORTCUTS: KeyId[] = ["alt+v", "ctrl+alt+v"];
+
+export function registerImagePasteKeybindings(pi: ExtensionAPI, handler: PasteImageHandler): void {
+  for (const shortcut of IMAGE_PASTE_SHORTCUTS) {
+    pi.registerShortcut(shortcut, {
+      description: "Attach clipboard image to draft (send when ready)",
+      handler,
+    });
+  }
+}