@quandev104/pi-style 0.2.3 → 0.2.4

package/dist/extensions/pi-style.js

@@ -343,6 +343,7 @@ function rewriteTokens(text, rewritten, tmpRoot) {
 // extension-src/pi-style/features/messages/image-preview.ts
 import {
   getCapabilities,
+  getCellDimensions,
   getImageDimensions,
   Image
 } from "@earendil-works/pi-tui";
@@ -569,6 +570,8 @@ var IMAGE_PREVIEW_EXPANDED_MAX_WIDTH_CELLS = 60;
 var IMAGE_PREVIEW_MAX_WIDTH_CELLS = 60;
 var GRID_GAP = 2;
 var GRID_MIN_COLUMN = 14;
+var GRID_MAX_HEIGHT_RATIO = 1.5;
+var FALLBACK_IMAGE_DIMENSIONS = { widthPx: 800, heightPx: 600 };
 function isPreviewableImage(value) {
   if (!value || typeof value !== "object") return false;
   const data = value.data;
@@ -624,10 +627,10 @@ function renderImagePreviewEntry(entry, options, theme) {
         )
       );
       const labels2 = images.map((_image, index) => imageLabel(themed, index + 1, dims[index]));
-      cached = { images, components: components2, labels: labels2 };
+      cached = { images, dimensions: dims, components: components2, labels: labels2 };
       previewCache.set(entry, cached);
     }
-    const { components, labels } = cached;
+    const { components, dimensions, labels } = cached;
     let memo;
     return {
       invalidate() {
@@ -643,7 +646,7 @@ function renderImagePreviewEntry(entry, options, theme) {
         let lines;
         if (width <= 0) lines = [];
         else if (images.length === 1 || !kitty) lines = renderStacked(width, maxWidth, labels, components);
-        else lines = renderGrid(width, maxWidth, labels, components);
+        else lines = renderGrid(width, maxWidth, labels, components, dimensions);
         memo = { key, lines };
         return lines;
       }
@@ -667,7 +670,7 @@ function stripTrailingSpaces(line) {
   while (end > 0 && line.charCodeAt(end - 1) === 32) end--;
   return line.slice(0, end);
 }
-function renderGrid(width, maxWidth, labels, components) {
+function renderGrid(width, maxWidth, labels, components, dimensions) {
   const usable = Math.max(1, width - 2);
   const maxColumns = Math.floor((usable + GRID_GAP) / (GRID_MIN_COLUMN + GRID_GAP));
   const columns = Math.max(1, Math.min(components.length, maxColumns, 3));
@@ -675,31 +678,56 @@ function renderGrid(width, maxWidth, labels, components) {
   const columnWidth = Math.min(maxWidth, Math.floor((usable - (columns - 1) * GRID_GAP) / columns));
   if (columnWidth < GRID_MIN_COLUMN) return renderStacked(width, maxWidth, labels, components);
   const lines = [];
+  const cellDimensions = getCellDimensions();
   for (let start = 0; start < components.length; start += columns) {
     const group = components.slice(start, start + columns);
     const groupLabels = labels.slice(start, start + columns);
+    const groupDimensions = dimensions.slice(start, start + columns);
     if (start > 0) lines.push("");
     const rendered = group.map((component) => component.render(columnWidth));
-    const labelRow = groupLabels.map((label, _index) => {
-      const pad = Math.max(0, columnWidth - visibleWidth(stripAnsi(label)));
+    const sizes = groupDimensions.map((imageDimensions) => imageCellSize(imageDimensions, columnWidth, cellDimensions));
+    const rowCounts = rendered.map((column) => column.length).filter((count) => count > 0);
+    const minRows = Math.min(...rowCounts);
+    const maxRows = Math.max(...rowCounts);
+    if (rowCounts.length > 1 && minRows > 0 && maxRows >= minRows * GRID_MAX_HEIGHT_RATIO) {
+      return renderStacked(width, maxWidth, labels, components);
+    }
+    const slotWidths = groupLabels.map(
+      (label, index) => Math.max(sizes[index]?.columns ?? 1, visibleWidth(stripAnsi(label)))
+    );
+    const labelRow = groupLabels.map((label, index) => {
+      const pad = Math.max(0, (slotWidths[index] ?? 0) - visibleWidth(stripAnsi(label)));
       return label + " ".repeat(pad);
     }).join(" ".repeat(GRID_GAP)).trimEnd();
     lines.push(labelRow);
     const rows = Math.max(...rendered.map((column) => column.length));
     for (let row = 0; row < rows; row++) {
       let line = "";
+      let startCol = 0;
       for (let column = 0; column < rendered.length; column++) {
-        if (column > 0) {
-          const startCol = column * (columnWidth + GRID_GAP);
-          line += `\x1B[${startCol + 1}G`;
-        }
+        if (column > 0) line += `\x1B[${startCol + 1}G`;
         line += rendered[column]?.[row] ?? "";
+        startCol += (slotWidths[column] ?? 0) + GRID_GAP;
       }
       lines.push(stripTrailingSpaces(line));
     }
   }
   return lines;
 }
+function imageCellSize(dimensions, requestedWidth, cellDimensions) {
+  const imageDimensions = dimensions ?? FALLBACK_IMAGE_DIMENSIONS;
+  const maxWidth = Math.max(1, Math.min(requestedWidth - 2, 60));
+  const maxHeight = Math.max(1, Math.ceil(maxWidth * cellDimensions.widthPx / cellDimensions.heightPx));
+  const imageWidth = Math.max(1, imageDimensions.widthPx);
+  const imageHeight = Math.max(1, imageDimensions.heightPx);
+  const widthScale = maxWidth * cellDimensions.widthPx / imageWidth;
+  const heightScale = maxHeight * cellDimensions.heightPx / imageHeight;
+  const scale = Math.min(widthScale, heightScale);
+  return {
+    columns: Math.max(1, Math.min(maxWidth, Math.ceil(imageWidth * scale / cellDimensions.widthPx))),
+    rows: Math.max(1, Math.min(maxHeight, Math.ceil(imageHeight * scale / cellDimensions.heightPx)))
+  };
+}
 function registerImagePreviewSurface(pi) {
   pi.registerEntryRenderer(IMAGE_PREVIEW_ENTRY_TYPE, renderImagePreviewEntry);
 }
@@ -13285,9 +13313,9 @@ function piStyleExtension(pi) {
   registerPiStyleCommand(pi, coordinator.app);
   registerImagePreviewSurface(pi);
   let stagedImagePreview;
+  let previewFlushTimer;
   pi.on("before_agent_start", (event) => {
-    const staged = stageImagePreviewData(event.images ?? []);
-    if (staged) stagedImagePreview = staged;
+    stagedImagePreview = stageImagePreviewData(event.images ?? []);
   });
   pi.on("session_start", async (event, ctx) => {
     resetUsageFromSessionCache(ctx.sessionManager);
@@ -13339,7 +13367,20 @@ function piStyleExtension(pi) {
   );
   pi.on("message_start", (event) => {
     closeActiveBatch();
+    if (event.message?.role === "user" && stagedImagePreview && !previewFlushTimer) {
+      const pending = stagedImagePreview;
+      previewFlushTimer = setTimeout(() => {
+        previewFlushTimer = void 0;
+        if (stagedImagePreview !== pending) return;
+        flushImagePreviewEntry(pi, pending);
+        stagedImagePreview = void 0;
+      }, 0);
+    }
     if (stagedImagePreview && event.message?.role === "assistant") {
+      if (previewFlushTimer) {
+        clearTimeout(previewFlushTimer);
+        previewFlushTimer = void 0;
+      }
       flushImagePreviewEntry(pi, stagedImagePreview);
       stagedImagePreview = void 0;
     }