pi-image-tools 1.0.8 → 1.0.10

package/src/index.ts

@@ -114,28 +114,33 @@ function buildRecentImageEmptyStateMessage(searchedDirectories: readonly string[
 function showRecentSelectionPreview(
   pi: ExtensionAPI,
   image: ClipboardImage,
+  cwd: string,
 ): void {
-  const previewItems = buildPreviewItems([
-    {
-      type: "image",
-      data: imageToBase64(image),
-      mimeType: image.mimeType,
-    },
-  ]);
+  const previewItems = buildPreviewItems(
+    [
+      {
+        type: "image",
+        data: imageToBase64(image),
+        mimeType: image.mimeType,
+      },
+    ],
+    { cwd },
+  );
 
   if (previewItems.length === 0) {
     return;
   }
 
-  pi.sendMessage(
-    {
-      customType: IMAGE_PREVIEW_CUSTOM_TYPE,
-      content: "",
-      display: true,
-      details: { items: previewItems },
-    },
-    { triggerTurn: false },
-  );
+  const previewMessage = {
+    customType: IMAGE_PREVIEW_CUSTOM_TYPE,
+    content: "",
+    display: true,
+    details: { items: previewItems },
+  };
+
+  setTimeout(() => {
+    pi.sendMessage(previewMessage, { triggerTurn: false });
+  }, 0);
 }
 
 export default function imageToolsExtension(pi: ExtensionAPI): void {
@@ -201,7 +206,7 @@ export default function imageToolsExtension(pi: ExtensionAPI): void {
       const selectedImage = loadRecentImage(selectedCandidate);
 
       try {
-        showRecentSelectionPreview(pi, selectedImage);
+        showRecentSelectionPreview(pi, selectedImage, ctx.cwd);
       } catch (error) {
         ctx.ui.notify(`Could not render recent image preview: ${getErrorMessage(error)}`, "warning");
       }

package/src/inline-user-preview.ts

@@ -6,10 +6,8 @@ import {
 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\\";
-const KITTY_IMAGE_LINE_MARKER = "\x1b_G";
-const ITERM_IMAGE_LINE_MARKER = "\x1b]1337;File=";
+import { buildSixelRenderLines, isInlineImageProtocolLine } from "./sixel-protocol.js";
+import { setActiveTerminalImageSettingsCwd } from "./terminal-image-width.js";
 
 type UserMessageRenderFn = (width: number) => string[];
 
@@ -49,17 +47,6 @@ interface InteractiveModeLike {
   };
 }
 
-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 [];
@@ -79,20 +66,9 @@ function buildNativeLines(item: ImagePreviewItem, width: number): string[] {
   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) ||
-    line.startsWith(KITTY_IMAGE_LINE_MARKER) ||
-    line.includes(KITTY_IMAGE_LINE_MARKER) ||
-    line.startsWith(ITERM_IMAGE_LINE_MARKER) ||
-    line.includes(ITERM_IMAGE_LINE_MARKER)
-  );
-}
-
 function fitLineToWidth(line: string, width: number): string {
   const safeWidth = Math.max(1, Math.floor(width));
-  if (isInlineImageLine(line)) {
+  if (isInlineImageProtocolLine(line)) {
     return line;
   }
 
@@ -118,7 +94,7 @@ function renderPreviewLines(items: readonly ImagePreviewItem[], width: number):
     lines.push("");
 
     if (item.protocol === "sixel" && item.sixelSequence) {
-      lines.push(...buildSixelLines(item.sixelSequence, item.rows));
+      lines.push(...buildSixelRenderLines(item.sixelSequence, item.rows));
     } else {
       lines.push(...buildNativeLines(item, width));
     }
@@ -340,15 +316,18 @@ export function registerInlineUserImagePreview(pi: ExtensionAPI): void {
     }, 25);
   };
 
-  pi.on("session_start", async () => {
+  pi.on("session_start", async (_event, ctx) => {
+    setActiveTerminalImageSettingsCwd(ctx.cwd);
     schedulePatch();
   });
 
-  pi.on("before_agent_start", async () => {
+  pi.on("before_agent_start", async (_event, ctx) => {
+    setActiveTerminalImageSettingsCwd(ctx.cwd);
     schedulePatch();
   });
 
-  pi.on("session_switch", async () => {
+  pi.on("session_switch", async (_event, ctx) => {
+    setActiveTerminalImageSettingsCwd(ctx.cwd);
     schedulePatch();
   });
 }

package/src/sixel-protocol.ts

@@ -0,0 +1,57 @@
+const SIXEL_IMAGE_LINE_MARKER = "\x1b_Gm=0;\x1b\\";
+const KITTY_IMAGE_LINE_MARKER = "\x1b_G";
+const ITERM_IMAGE_LINE_MARKER = "\x1b]1337;File=";
+const SIXEL_DCS_PREFIX = "\x1bP";
+const STRING_TERMINATOR = "\x1b\\";
+const MAX_IMAGE_ROWS = 80;
+
+function sanitizeRows(rows: number): number {
+  return Math.max(1, Math.min(Math.trunc(rows), MAX_IMAGE_ROWS));
+}
+
+function normalizeSixelOutput(value: string): string {
+  return value.replace(/\r?\n/g, "").replace(/\s+$/g, "");
+}
+
+/**
+ * Ensure the PowerShell Sixel output is emitted as a complete DCS sequence.
+ * Some converters return only the sixel payload body; terminals need the
+ * enclosing ESC P ... ESC \\ wrapper to render it as an image.
+ */
+export function ensureCompleteSixelSequence(sequence: string): string {
+  let normalized = normalizeSixelOutput(sequence);
+  if (normalized.length === 0) {
+    return "";
+  }
+
+  if (!normalized.startsWith(SIXEL_DCS_PREFIX)) {
+    normalized = `${SIXEL_DCS_PREFIX}${normalized.startsWith("q") ? normalized : `q${normalized}`}`;
+  }
+
+  if (!normalized.endsWith(STRING_TERMINATOR)) {
+    normalized = `${normalized}${STRING_TERMINATOR}`;
+  }
+
+  return normalized;
+}
+
+export function buildSixelRenderLines(sequence: string, rows: number): string[] {
+  const safeRows = sanitizeRows(rows);
+  const completeSequence = ensureCompleteSixelSequence(sequence);
+  if (completeSequence.length === 0) {
+    return [];
+  }
+
+  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}${completeSequence}`];
+}
+
+export function isInlineImageProtocolLine(line: string): boolean {
+  return (
+    line.includes(SIXEL_IMAGE_LINE_MARKER) ||
+    line.includes(KITTY_IMAGE_LINE_MARKER) ||
+    line.includes(ITERM_IMAGE_LINE_MARKER) ||
+    line.includes(SIXEL_DCS_PREFIX)
+  );
+}

package/src/terminal-image-width.ts

@@ -0,0 +1,90 @@
+import { SettingsManager, getAgentDir } from "@mariozechner/pi-coding-agent";
+import { resolve } from "node:path";
+
+export const DEFAULT_TERMINAL_IMAGE_WIDTH_CELLS = 60;
+
+export interface TerminalImageWidthOptions {
+  cwd?: string;
+  agentDir?: string;
+}
+
+interface SettingsWithOptionalTerminalWidth {
+  terminal?: {
+    imageWidthCells?: unknown;
+  };
+}
+
+type SettingsManagerWithOptionalWidthGetter = SettingsManager & {
+  getImageWidthCells?: () => number;
+};
+
+let activeTerminalSettingsCwd = process.cwd();
+
+function normalizeDirectoryPath(value: string | undefined): string | undefined {
+  if (typeof value !== "string") {
+    return undefined;
+  }
+
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return undefined;
+  }
+
+  return resolve(trimmed);
+}
+
+function normalizeImageWidthCells(value: unknown): number {
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    return DEFAULT_TERMINAL_IMAGE_WIDTH_CELLS;
+  }
+
+  return Math.max(1, Math.floor(value));
+}
+
+function readRawImageWidthCells(settings: unknown): unknown {
+  if (!settings || typeof settings !== "object" || Array.isArray(settings)) {
+    return undefined;
+  }
+
+  return (settings as SettingsWithOptionalTerminalWidth).terminal?.imageWidthCells;
+}
+
+function resolveSettingsManagerImageWidthCells(settingsManager: SettingsManager): unknown {
+  const settingsManagerWithOptionalWidthGetter =
+    settingsManager as SettingsManagerWithOptionalWidthGetter;
+
+  if (typeof settingsManagerWithOptionalWidthGetter.getImageWidthCells === "function") {
+    return settingsManagerWithOptionalWidthGetter.getImageWidthCells();
+  }
+
+  const projectWidth = readRawImageWidthCells(settingsManager.getProjectSettings());
+  if (projectWidth !== undefined) {
+    return projectWidth;
+  }
+
+  return readRawImageWidthCells(settingsManager.getGlobalSettings());
+}
+
+export function setActiveTerminalImageSettingsCwd(cwd: string | undefined): void {
+  const normalized = normalizeDirectoryPath(cwd);
+  if (normalized) {
+    activeTerminalSettingsCwd = normalized;
+  }
+}
+
+export function resolveTerminalImageWidthCells(
+  options: TerminalImageWidthOptions = {},
+): number {
+  const cwd = normalizeDirectoryPath(options.cwd) ?? activeTerminalSettingsCwd;
+
+  try {
+    const settingsManager = SettingsManager.create(
+      cwd,
+      normalizeDirectoryPath(options.agentDir) ?? getAgentDir(),
+    );
+
+    return normalizeImageWidthCells(resolveSettingsManagerImageWidthCells(settingsManager));
+  } catch {
+    return DEFAULT_TERMINAL_IMAGE_WIDTH_CELLS;
+  }
+}