pi-paster 0.2.0 → 0.2.2

package/src/index.ts

@@ -1,14 +1,24 @@
 import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
 import { readClipboardImage } from "./clipboard.ts";
+import { registerImageCompressionCommand } from "./compress.ts";
 import { type PasterConfig, resolvePasterConfig } from "./config.ts";
 import { PasterEditor } from "./editor.ts";
-import { imagesForTextOptimized } from "./image-utils.ts";
-import { CursorImagePreviewWidget, ImagePreviewMessage } from "./preview.ts";
+import { appendImagePathContext, imagesForTextOptimized } from "./image-utils.ts";
+import {
+  CursorImagePreviewWidget,
+  ImageCompressionReportMessage,
+  ImagePreviewMessage,
+} from "./preview.ts";
 import { AttachmentStore } from "./store.ts";
 import { createImagePasteTerminalInputHandler } from "./terminal-input.ts";
-import type { ImageAttachment, PasterPreviewDetails } from "./types.ts";
+import type {
+  ImageAttachment,
+  ImageCompressionReportDetails,
+  PasterPreviewDetails,
+} from "./types.ts";
 
 export * from "./clipboard.ts";
+export * from "./compress.ts";
 export * from "./optimize-image.ts";
 export * from "./config.ts";
 export * from "./editor.ts";
@@ -25,19 +35,44 @@ export function createPaster(config: PasterConfig = {}): (pi: ExtensionAPI) => v
 export default function paster(pi: ExtensionAPI, config: PasterConfig = {}): void {
   const resolvedConfig = resolvePasterConfig(config);
   const store = new AttachmentStore();
+  registerImageCompressionCommand(pi, resolvedConfig.imageCompression);
   let pendingPreview: ImageAttachment[] = [];
   let activeEditor: PasterEditor | undefined;
   let unsubscribeTerminalInput: (() => void) | undefined;
 
-  pi.registerMessageRenderer<PasterPreviewDetails>("paster-preview", (message, _options, theme) => {
+  pi.registerMessageRenderer<ImageCompressionReportDetails>(
+    "paster-image-compress-report",
+    (message, options, theme) => {
+      const details = message.details;
+      if (!details) return undefined;
+      return new ImageCompressionReportMessage(
+        details,
+        {
+          background: (text) => theme.bg("toolSuccessBg", text),
+          title: (text) => theme.fg("toolTitle", theme.bold(text)),
+          muted: (text) => theme.fg("muted", text),
+        },
+        options.expanded,
+      );
+    },
+  );
+
+  pi.registerMessageRenderer<PasterPreviewDetails>("paster-preview", (message, options, theme) => {
     const placeholders = message.details?.placeholders ?? [];
     const attachments = store
       .list()
       .filter((attachment) => placeholders.includes(attachment.placeholder));
     if (attachments.length === 0) return undefined;
-    return new ImagePreviewMessage(attachments, {
-      fallbackColor: (text) => theme.fg("muted", text),
-    });
+    return new ImagePreviewMessage(
+      attachments,
+      {
+        fallbackColor: (text) => theme.fg("muted", text),
+        background: (text) => theme.bg("toolSuccessBg", text),
+        title: (text) => theme.fg("toolTitle", theme.bold(text)),
+        muted: (text) => theme.fg("muted", text),
+      },
+      { expanded: options.expanded, style: resolvedConfig.submittedPreviewStyle },
+    );
   });
 
   pi.on("session_start", (_event, ctx) => {
@@ -142,10 +177,13 @@ export default function paster(pi: ExtensionAPI, config: PasterConfig = {}): voi
     // 32 MB/request caps. Per-attachment caching means each image is only
     // resized/recompressed once across the whole session.
     const images = await imagesForTextOptimized(store, event.text, event.images);
+    const text = resolvedConfig.includeImagePathsInPrompt
+      ? appendImagePathContext(event.text, attachments)
+      : event.text;
 
     return {
       action: "transform" as const,
-      text: event.text,
+      text,
       images,
     };
   });

package/src/preview.ts

@@ -1,12 +1,16 @@
 import {
+  Box,
+  Container,
   getCellDimensions,
   Image,
   type Component,
   type ImageTheme,
+  Spacer,
+  Text,
   truncateToWidth,
   visibleWidth,
 } from "@earendil-works/pi-tui";
-import type { ImageAttachment } from "./types.ts";
+import type { ImageAttachment, ImageCompressionReportDetails } from "./types.ts";
 
 function formatAttachmentLine(
   attachment: ImageAttachment,
@@ -18,12 +22,21 @@ function formatAttachmentLine(
   return visibleWidth(line) > maxWidth ? truncateToWidth(line, maxWidth, "") : line;
 }
 
+export type ImagePreviewMessageStyle = "raw" | "collapsible";
+
+interface ImagePreviewMessageTheme extends ImageTheme {
+  background?: (text: string) => string;
+  title?: (text: string) => string;
+  muted?: (text: string) => string;
+}
+
 export class ImagePreviewMessage implements Component {
   private readonly images: Image[];
 
   constructor(
     private readonly attachments: ImageAttachment[],
-    private readonly theme: ImageTheme,
+    private readonly theme: ImagePreviewMessageTheme,
+    private readonly options: { expanded?: boolean; style?: ImagePreviewMessageStyle } = {},
   ) {
     this.images = attachments.map(
       (attachment) =>
@@ -35,7 +48,17 @@ export class ImagePreviewMessage implements Component {
     );
   }
 
+  invalidate(): void {
+    for (const image of this.images) image.invalidate();
+  }
+
   render(width: number): string[] {
+    return this.options.style === "collapsible"
+      ? this.renderCollapsible(width)
+      : this.renderRaw(width);
+  }
+
+  private renderRaw(width: number): string[] {
     const lines: string[] = [];
     const safeWidth = Math.max(1, width);
     for (let index = 0; index < this.attachments.length; index++) {
@@ -46,9 +69,75 @@ export class ImagePreviewMessage implements Component {
     return lines;
   }
 
-  invalidate(): void {
-    for (const image of this.images) image.invalidate();
+  private renderCollapsible(width: number): string[] {
+    const container = new Container();
+    container.addChild(new Spacer(1));
+    const box = new Box(1, 1, this.theme.background);
+    container.addChild(box);
+
+    const title = this.theme.title ?? this.theme.fallbackColor;
+    const muted = this.theme.muted ?? this.theme.fallbackColor;
+    const summary =
+      this.attachments.length === 1
+        ? `Attached ${this.attachments[0]!.placeholder}`
+        : `Attached ${this.attachments.length} images`;
+    const suffix = this.options.expanded ? " (ctrl+o to collapse)" : " (ctrl+o to expand)";
+    box.addChild(new Text(`${title(summary)}${muted(suffix)}`, 0, 0));
+
+    for (const attachment of this.attachments) {
+      box.addChild(new Text(formatAttachmentLine(attachment, width, muted), 0, 0));
+    }
+
+    const lines = container.render(width);
+    if (!this.options.expanded) return lines;
+
+    const safeWidth = Math.max(1, width);
+    for (let index = 0; index < this.attachments.length; index++) {
+      lines.push(...this.images[index]!.render(safeWidth));
+    }
+    return lines;
+  }
+}
+
+interface CompressionReportTheme {
+  background?: (text: string) => string;
+  title: (text: string) => string;
+  muted: (text: string) => string;
+}
+
+export class ImageCompressionReportMessage implements Component {
+  constructor(
+    private readonly details: ImageCompressionReportDetails,
+    private readonly theme: CompressionReportTheme,
+    private readonly expanded = false,
+  ) {}
+
+  render(width: number): string[] {
+    const container = new Container();
+    container.addChild(new Spacer(1));
+    const box = new Box(1, 1, this.theme.background);
+    container.addChild(box);
+
+    const suffix = this.expanded ? " (ctrl+o to collapse)" : " (ctrl+o to expand)";
+    box.addChild(
+      new Text(
+        `${this.theme.title(`Compressed ${this.details.imageCount} image block(s) into ${this.details.summaryCount} summary/summaries`)}${this.theme.muted(suffix)}`,
+        0,
+        0,
+      ),
+    );
+
+    if (this.expanded) {
+      for (const item of this.details.items) {
+        box.addChild(new Text(this.theme.muted(`Image ${item.index}:`), 0, 0));
+        box.addChild(new Text(truncateToWidth(item.summary, Math.max(1, width - 4), "…"), 0, 0));
+      }
+    }
+
+    return container.render(width);
   }
+
+  invalidate(): void {}
 }
 
 interface CursorPreviewTheme {

package/src/types.ts

@@ -57,3 +57,14 @@ export type LoadImageResult =
 export interface PasterPreviewDetails {
   placeholders: string[];
 }
+
+export interface ImageCompressionReportItem {
+  index: number;
+  summary: string;
+}
+
+export interface ImageCompressionReportDetails {
+  imageCount: number;
+  summaryCount: number;
+  items: ImageCompressionReportItem[];
+}