@quandev104/pi-style 0.2.2 → 0.2.4

package/dist/extensions/pi-style.js

@@ -1,3 +1,353 @@
+// extension-src/pi-style/features/messages/image-input.ts
+import { readFile as readFile2, stat as stat2 } from "fs/promises";
+import { tmpdir as tmpdir2 } from "os";
+
+// extension-src/pi-style/shared/clipboard-path.ts
+import { tmpdir } from "os";
+var UUID_PATTERN = "[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}";
+var CLIPBOARD_IMAGE_EXTENSIONS = ["png", "jpg", "jpeg", "webp", "gif"];
+function clipboardImageMarker(index) {
+  return `[Image #${index}]`;
+}
+function escapeRegExp(text) {
+  return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+var clipboardPathRegexCache = /* @__PURE__ */ new Map();
+var CLIPBOARD_PATH_REGEX_CACHE_MAX = 16;
+function clipboardPathRegex(tmpRoot = tmpdir()) {
+  const cached = clipboardPathRegexCache.get(tmpRoot);
+  if (cached) return cached;
+  const exts = CLIPBOARD_IMAGE_EXTENSIONS.join("|");
+  const regex = new RegExp(
+    `(?<![a-zA-Z0-9])(${escapeRegExp(tmpRoot)}/pi-clipboard-${UUID_PATTERN}\\.(${exts}))(?![a-zA-Z0-9])`,
+    "g"
+  );
+  if (clipboardPathRegexCache.size >= CLIPBOARD_PATH_REGEX_CACHE_MAX) {
+    const oldest = clipboardPathRegexCache.keys().next().value;
+    if (oldest !== void 0) clipboardPathRegexCache.delete(oldest);
+  }
+  clipboardPathRegexCache.set(tmpRoot, regex);
+  return regex;
+}
+function isSingleClipboardImagePath(text, tmpRoot) {
+  if (!text || /\s/.test(text)) return false;
+  const match = text.match(clipboardPathRegex(tmpRoot ?? tmpdir()));
+  return match !== null && match.length === 1 && match[0] === text;
+}
+function extractClipboardImageTokens(text, tmpRoot) {
+  const tokens = /* @__PURE__ */ new Set();
+  for (const match of text.matchAll(clipboardPathRegex(tmpRoot ?? tmpdir()))) {
+    const token = match[1];
+    if (token) tokens.add(token);
+  }
+  return [...tokens];
+}
+var MARKER_AT_END_PATTERN = /\[Image #([0-9]+)\]( ?)$/;
+function clipboardMarkerAtEnd(text) {
+  const match = MARKER_AT_END_PATTERN.exec(text);
+  if (!match) return void 0;
+  return { index: Number(match[1]), length: match[0].length };
+}
+
+// extension-src/pi-style/shared/clipboard-presence.ts
+import { realpathSync } from "fs";
+import { createRequire } from "module";
+import { dirname } from "path";
+var cachedModule;
+function clipboardResolutionRoots() {
+  const roots = [];
+  const argvMain = process.argv[1];
+  if (typeof argvMain === "string" && argvMain.startsWith("/")) {
+    try {
+      roots.push(dirname(realpathSync(argvMain)));
+    } catch {
+      roots.push(dirname(argvMain));
+    }
+  }
+  roots.push(import.meta.url);
+  return roots;
+}
+function loadClipboardModule() {
+  if (cachedModule !== void 0) return cachedModule;
+  if (process.env.TERMUX_VERSION) {
+    cachedModule = null;
+    return cachedModule;
+  }
+  for (const root of clipboardResolutionRoots()) {
+    try {
+      const require2 = createRequire(root);
+      const resolved = require2("@mariozechner/clipboard");
+      if (resolved && typeof resolved.hasImage === "function") {
+        cachedModule = resolved;
+        return cachedModule;
+      }
+    } catch {
+    }
+  }
+  cachedModule = null;
+  return cachedModule;
+}
+function clipboardHasImageSync() {
+  const clipboard = loadClipboardModule();
+  if (!clipboard || typeof clipboard.hasImage !== "function") return null;
+  try {
+    return clipboard.hasImage() === true;
+  } catch {
+    return null;
+  }
+}
+async function readClipboardImageBinary(options = {}) {
+  const clipboard = loadClipboardModule();
+  if (!clipboard || typeof clipboard.hasImage !== "function" || typeof clipboard.getImageBinary !== "function") {
+    return null;
+  }
+  try {
+    if (!options.skipPresenceProbe && !clipboard.hasImage()) return null;
+    const imageData = await clipboard.getImageBinary();
+    if (!imageData || imageData.length === 0) return null;
+    const bytes = imageData instanceof Uint8Array ? imageData : Uint8Array.from(imageData);
+    return bytes.length > 0 ? { bytes } : null;
+  } catch {
+    return null;
+  }
+}
+
+// extension-src/pi-style/shared/pending-images.ts
+import { readFile, stat } from "fs/promises";
+var MAX_ATTACHABLE_BYTES = 20 * 1024 * 1024;
+var MIME_BY_EXTENSION = Object.freeze({
+  png: "image/png",
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  webp: "image/webp",
+  gif: "image/gif"
+});
+var pendingImages = /* @__PURE__ */ new Map();
+var nextPendingIndex = 1;
+function resetPendingImageRegistry() {
+  pendingImages.clear();
+  nextPendingIndex = 1;
+}
+function allocatePendingImage() {
+  const index = nextPendingIndex++;
+  let resolveFill = () => {
+  };
+  const entry = {
+    fill: new Promise((resolve3) => {
+      resolveFill = resolve3;
+    }),
+    settled: false
+  };
+  pendingImages.set(index, entry);
+  entry.resolveFill = resolveFill;
+  return { index, marker: `${clipboardImageMarker(index)} ` };
+}
+async function fillPendingImageFromPath(index, path, deps = {}) {
+  const entry = pendingImages.get(index);
+  if (!entry || entry.settled) return;
+  const extension = path.split(".").pop() ?? "";
+  const mimeType = MIME_BY_EXTENSION[extension];
+  if (!mimeType) {
+    settle(entry);
+    return;
+  }
+  const readFileImpl = deps.readFile ?? ((p) => readFile(p));
+  const statSizeImpl = deps.statSize ?? (async (p) => {
+    try {
+      return (await stat(p)).size;
+    } catch {
+      return void 0;
+    }
+  });
+  try {
+    const size = await statSizeImpl(path);
+    if (size === void 0 || size <= 0 || size > MAX_ATTACHABLE_BYTES) {
+      settle(entry);
+      return;
+    }
+    const bytes = await readFileImpl(path);
+    if (bytes.length === 0 || bytes.length > MAX_ATTACHABLE_BYTES) {
+      settle(entry);
+      return;
+    }
+    entry.data = Buffer.from(bytes.buffer, bytes.byteOffset, bytes.byteLength).toString("base64");
+    entry.mimeType = mimeType;
+  } catch {
+  }
+  settle(entry);
+}
+function fillPendingImageBytes(index, data, mimeType) {
+  const entry = pendingImages.get(index);
+  if (!entry || entry.settled) return;
+  if (data.length > 0) {
+    entry.data = data;
+    entry.mimeType = mimeType;
+  }
+  settle(entry);
+}
+function discardPendingImage(index) {
+  const entry = pendingImages.get(index);
+  if (!entry) return;
+  settle(entry);
+  pendingImages.delete(index);
+}
+function isPendingMarkerIndex(index) {
+  return pendingImages.has(index);
+}
+function discardPendingMarkerIndex(index) {
+  discardPendingImage(index);
+}
+function isPendingImageFilled(index) {
+  const entry = pendingImages.get(index);
+  return entry !== void 0 && entry.data !== void 0 && entry.mimeType !== void 0;
+}
+function settle(entry) {
+  entry.settled = true;
+  entry.resolveFill?.();
+}
+async function resolvePendingImagesForSubmit(text) {
+  if (pendingImages.size === 0) return void 0;
+  const markerRe = /\[Image #([0-9]+)\]/g;
+  const found = [];
+  for (const match of text.matchAll(markerRe)) {
+    const index = Number(match[1]);
+    if (Number.isInteger(index) && pendingImages.has(index)) found.push(index);
+  }
+  const matched = new Set(found);
+  await Promise.all(
+    [...pendingImages.entries()].filter(([index]) => matched.has(index)).map(([, entry]) => entry.fill)
+  );
+  const images = [];
+  for (const index of [...matched].sort((a, b) => a - b)) {
+    const entry = pendingImages.get(index);
+    if (entry?.data && entry.mimeType) {
+      images.push({ type: "image", data: entry.data, mimeType: entry.mimeType });
+    }
+  }
+  for (const index of [...pendingImages.keys()]) discardPendingImage(index);
+  return images.length > 0 ? { images } : void 0;
+}
+
+// extension-src/pi-style/features/messages/render-config.ts
+var sessionMessagesConfig = {
+  showImagePreviews: true,
+  clipboardImages: true,
+  previewMaxWidth: 30
+};
+function setMessagesRenderConfig(config) {
+  sessionMessagesConfig = { ...sessionMessagesConfig, ...config };
+}
+function getMessagesRenderConfig() {
+  return sessionMessagesConfig;
+}
+
+// extension-src/pi-style/features/messages/image-input.ts
+var IMAGE_TOKEN = "[image]";
+var MAX_ATTACHABLE_BYTES2 = 20 * 1024 * 1024;
+var MIME_BY_EXTENSION2 = Object.freeze({
+  png: "image/png",
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  webp: "image/webp",
+  gif: "image/gif"
+});
+function createClipboardImagePasteSurface(deps = {}) {
+  const hasImage = deps.hasImage ?? clipboardHasImageSync;
+  const readBinary = deps.readBinary ?? (() => readClipboardImageBinary({ skipPresenceProbe: true }));
+  return {
+    enabled: () => getMessagesRenderConfig().clipboardImages,
+    clipboardHasImage: () => {
+      try {
+        return hasImage();
+      } catch {
+        return null;
+      }
+    },
+    markerFromClipboard() {
+      const { index, marker: marker2 } = allocatePendingImage();
+      void (async () => {
+        try {
+          const image = await readBinary();
+          if (image) {
+            fillPendingImageBytes(
+              index,
+              Buffer.from(image.bytes.buffer, image.bytes.byteOffset, image.bytes.byteLength).toString("base64"),
+              "image/png"
+            );
+            return;
+          }
+        } catch {
+        }
+        discardPendingMarkerIndex(index);
+      })();
+      return marker2;
+    },
+    async markerFromArtifact(path) {
+      const { index, marker: marker2 } = allocatePendingImage();
+      await fillPendingImageFromPath(index, path);
+      return isPendingImageFilled(index) ? marker2 : path;
+    },
+    isMarkerIndexRegistered: (index) => isPendingMarkerIndex(index),
+    discardMarkerIndex: (index) => discardPendingMarkerIndex(index)
+  };
+}
+async function resolvePendingImageMarkers(text) {
+  if (!getMessagesRenderConfig().clipboardImages) return void 0;
+  return resolvePendingImagesForSubmit(text);
+}
+async function transformClipboardImages(text, deps = {}) {
+  if (!getMessagesRenderConfig().clipboardImages) return void 0;
+  const tokens = extractClipboardImageTokens(text, deps.tmpRoot);
+  if (tokens.length === 0) return void 0;
+  const attached = [];
+  const rewritten = /* @__PURE__ */ new Map();
+  for (const token of tokens) {
+    const image = await readAttachable(token, deps);
+    if (!image) continue;
+    attached.push({ type: "image", data: image.data, mimeType: image.mimeType });
+    rewritten.set(token, IMAGE_TOKEN);
+  }
+  if (attached.length === 0) return void 0;
+  return { text: rewriteTokens(text, rewritten, deps.tmpRoot), images: attached };
+}
+async function readAttachable(path, deps) {
+  const extension = path.split(".").pop() ?? "";
+  const mimeType = MIME_BY_EXTENSION2[extension];
+  if (!mimeType) return void 0;
+  const readFileImpl = deps?.readFile ?? ((p) => readFile2(p));
+  const statSizeImpl = deps?.statSize ?? (async (p) => {
+    try {
+      return (await stat2(p)).size;
+    } catch {
+      return void 0;
+    }
+  });
+  try {
+    const size = await statSizeImpl(path);
+    if (size === void 0 || size <= 0 || size > MAX_ATTACHABLE_BYTES2) return void 0;
+    const bytes = await readFileImpl(path);
+    if (bytes.length === 0 || bytes.length > MAX_ATTACHABLE_BYTES2) return void 0;
+    return { data: Buffer.from(bytes).toString("base64"), mimeType };
+  } catch {
+    return void 0;
+  }
+}
+function rewriteTokens(text, rewritten, tmpRoot) {
+  if (rewritten.size === 0) return text;
+  return text.replace(
+    clipboardPathRegex(tmpRoot ?? tmpdir2()),
+    (match, token) => rewritten.has(token) ? IMAGE_TOKEN : match
+  );
+}
+
+// extension-src/pi-style/features/messages/image-preview.ts
+import {
+  getCapabilities,
+  getCellDimensions,
+  getImageDimensions,
+  Image
+} from "@earendil-works/pi-tui";
+
 // extension-src/pi-style/shared/ansi.ts
 import { visibleWidth as tuiVisibleWidth } from "@earendil-works/pi-tui";
 function isFinal(byte) {
@@ -214,6 +564,174 @@ function fgHex(theme, hex, text) {
   return `${escapes.prefix}${text}${escapes.suffix}`;
 }
 
+// extension-src/pi-style/features/messages/image-preview.ts
+var IMAGE_PREVIEW_ENTRY_TYPE = "pi-style-image-preview";
+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;
+  const mimeType = value.mimeType;
+  return typeof data === "string" && data.length > 0 && typeof mimeType === "string" && mimeType.length > 0;
+}
+function stageImagePreviewData(images) {
+  if (!getMessagesRenderConfig().showImagePreviews) return void 0;
+  const valid = images.filter(isPreviewableImage).map((image) => ({ data: image.data, mimeType: image.mimeType }));
+  return valid.length > 0 ? { images: valid } : void 0;
+}
+function flushImagePreviewEntry(pi, data) {
+  if (!getMessagesRenderConfig().showImagePreviews) return;
+  pi.appendEntry(IMAGE_PREVIEW_ENTRY_TYPE, data);
+}
+function previewImagesFromEntryData(data) {
+  if (!data || typeof data !== "object") return void 0;
+  const images = data.images;
+  if (!Array.isArray(images) || images.length === 0) return void 0;
+  if (!images.every(isPreviewableImage)) return void 0;
+  return images;
+}
+function imageLabel(theme, index, dims) {
+  const dimsPart = dims ? ` \xB7 ${dims.widthPx}\xD7${dims.heightPx}` : "";
+  return theme.fg("dim", `#${index}${dimsPart}`);
+}
+var __dimensionParsesForTest = { count: 0 };
+function parseImageDimensions(image) {
+  __dimensionParsesForTest.count++;
+  const fromPrefix = getImageDimensions(image.data.slice(0, 256), image.mimeType);
+  return fromPrefix ?? getImageDimensions(image.data, image.mimeType) ?? void 0;
+}
+var previewCache = /* @__PURE__ */ new WeakMap();
+function renderImagePreviewEntry(entry, options, theme) {
+  if (!getMessagesRenderConfig().showImagePreviews) return void 0;
+  const images = previewImagesFromEntryData(entry?.data);
+  if (!images) return void 0;
+  const fg = theme?.fg;
+  if (typeof fg !== "function") return void 0;
+  const expanded = options?.expanded === true;
+  try {
+    const themed = { fg: fg.bind(theme) };
+    let cached = previewCache.get(entry);
+    if (!cached) {
+      const dims = images.map(parseImageDimensions);
+      const components2 = images.map(
+        (image, index) => new Image(
+          image.data,
+          image.mimeType,
+          { fallbackColor: (text) => themed.fg("toolOutput", text) },
+          {},
+          dims[index]
+        )
+      );
+      const labels2 = images.map((_image, index) => imageLabel(themed, index + 1, dims[index]));
+      cached = { images, dimensions: dims, components: components2, labels: labels2 };
+      previewCache.set(entry, cached);
+    }
+    const { components, dimensions, labels } = cached;
+    let memo;
+    return {
+      invalidate() {
+        memo = void 0;
+        for (const component of components) component.invalidate();
+      },
+      render(width) {
+        const config = getMessagesRenderConfig();
+        const kitty = getCapabilities().images === "kitty";
+        const key = `${width}|${expanded}|${config.previewMaxWidth}|${config.showImagePreviews}|${kitty}`;
+        if (memo && memo.key === key) return memo.lines;
+        const maxWidth = expanded ? IMAGE_PREVIEW_EXPANDED_MAX_WIDTH_CELLS : Math.min(config.previewMaxWidth, IMAGE_PREVIEW_MAX_WIDTH_CELLS);
+        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, dimensions);
+        memo = { key, lines };
+        return lines;
+      }
+    };
+  } catch {
+    return void 0;
+  }
+}
+function renderStacked(width, maxWidth, labels, components) {
+  const lines = [];
+  for (const [index, component] of components.entries()) {
+    if (index > 0) lines.push("");
+    lines.push(labels[index] ?? "");
+    lines.push(...component.render(Math.min(width, Math.max(1, maxWidth + 2))));
+  }
+  return lines;
+}
+function stripTrailingSpaces(line) {
+  if (!line.endsWith(" ")) return line;
+  let end = line.length;
+  while (end > 0 && line.charCodeAt(end - 1) === 32) end--;
+  return line.slice(0, end);
+}
+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));
+  if (columns < 2) return renderStacked(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 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) 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);
+}
+
 // extension-src/pi-style/shared/box.ts
 import { homedir as homedir2 } from "os";
 import { relative, resolve as resolve2 } from "path";
@@ -511,9 +1029,9 @@ function boxedResultRenderBudget(rawLineBudget = DEFAULT_COLLAPSED_RENDER_LINES)
 // extension-src/pi-style/shared/theme-extras.ts
 import { existsSync, readdirSync, readFileSync } from "fs";
 import { homedir } from "os";
-import { dirname, join, resolve } from "path";
+import { dirname as dirname2, join, resolve } from "path";
 import { fileURLToPath } from "url";
-var extensionDir = dirname(fileURLToPath(import.meta.url));
+var extensionDir = dirname2(fileURLToPath(import.meta.url));
 var THEME_EXTRA_DEFAULTS = Object.freeze({
   assistantPrefix: "\u2022",
   assistantPrefixColor: "",
@@ -4212,16 +4730,16 @@ function parseGitShowStat(text) {
     }
     break;
   }
-  const stat = parseGitDiffStat(lines.slice(i).join("\n"));
-  if (!stat) return null;
+  const stat3 = parseGitDiffStat(lines.slice(i).join("\n"));
+  if (!stat3) return null;
   return {
     kind: "show-stat",
     hash,
     subject,
-    files: stat.files,
-    ...stat.filesChanged !== void 0 ? { filesChanged: stat.filesChanged } : {},
-    ...stat.insertions !== void 0 ? { insertions: stat.insertions } : {},
-    ...stat.deletions !== void 0 ? { deletions: stat.deletions } : {}
+    files: stat3.files,
+    ...stat3.filesChanged !== void 0 ? { filesChanged: stat3.filesChanged } : {},
+    ...stat3.insertions !== void 0 ? { insertions: stat3.insertions } : {},
+    ...stat3.deletions !== void 0 ? { deletions: stat3.deletions } : {}
   };
 }
 var DIFF_GIT_HEADER = /^diff --git a\/(.*) b\/(.*)$/;
@@ -4548,17 +5066,17 @@ function parseGitPull(text) {
     return null;
   }
   if (!range || ffIndex < 0) return null;
-  const stat = parseGitDiffStat(lines.slice(ffIndex + 1).join("\n"));
-  if (!stat) return null;
+  const stat3 = parseGitDiffStat(lines.slice(ffIndex + 1).join("\n"));
+  if (!stat3) return null;
   return {
     kind: "action",
     command: "pull",
-    files: stat.files,
+    files: stat3.files,
     status: "Fast-forward",
     range,
-    ...stat.filesChanged !== void 0 ? { filesChanged: stat.filesChanged } : {},
-    ...stat.insertions !== void 0 ? { insertions: stat.insertions } : {},
-    ...stat.deletions !== void 0 ? { deletions: stat.deletions } : {}
+    ...stat3.filesChanged !== void 0 ? { filesChanged: stat3.filesChanged } : {},
+    ...stat3.insertions !== void 0 ? { insertions: stat3.insertions } : {},
+    ...stat3.deletions !== void 0 ? { deletions: stat3.deletions } : {}
   };
 }
 function parseGitFetch(text) {
@@ -4700,30 +5218,30 @@ function parseGitMerge(text) {
   }
   const marker2 = body[idx] ?? "";
   if (range && marker2 === "Fast-forward") {
-    const stat = parseGitDiffStatTolerant(body.slice(idx + 1).join("\n"));
-    if (!stat) return null;
+    const stat3 = parseGitDiffStatTolerant(body.slice(idx + 1).join("\n"));
+    if (!stat3) return null;
     return {
       kind: "action",
       command: "merge",
-      files: stat.files,
+      files: stat3.files,
       status: "Fast-forward",
       range,
-      ...stat.filesChanged !== void 0 ? { filesChanged: stat.filesChanged } : {},
-      ...stat.insertions !== void 0 ? { insertions: stat.insertions } : {},
-      ...stat.deletions !== void 0 ? { deletions: stat.deletions } : {}
+      ...stat3.filesChanged !== void 0 ? { filesChanged: stat3.filesChanged } : {},
+      ...stat3.insertions !== void 0 ? { insertions: stat3.insertions } : {},
+      ...stat3.deletions !== void 0 ? { deletions: stat3.deletions } : {}
     };
   }
   if (MERGE_MADE.exec(marker2)) {
-    const stat = parseGitDiffStatTolerant(body.slice(idx + 1).join("\n"));
-    if (!stat) return null;
+    const stat3 = parseGitDiffStatTolerant(body.slice(idx + 1).join("\n"));
+    if (!stat3) return null;
     return {
       kind: "action",
       command: "merge",
-      files: stat.files,
+      files: stat3.files,
       status: marker2,
-      ...stat.filesChanged !== void 0 ? { filesChanged: stat.filesChanged } : {},
-      ...stat.insertions !== void 0 ? { insertions: stat.insertions } : {},
-      ...stat.deletions !== void 0 ? { deletions: stat.deletions } : {}
+      ...stat3.filesChanged !== void 0 ? { filesChanged: stat3.filesChanged } : {},
+      ...stat3.insertions !== void 0 ? { insertions: stat3.insertions } : {},
+      ...stat3.deletions !== void 0 ? { deletions: stat3.deletions } : {}
     };
   }
   return null;
@@ -7095,7 +7613,7 @@ var DEFAULT_CONFIG = Object.freeze({
   startup: Object.freeze({ mode: "compact", showResources: false, alwaysExpanded: false }),
   statusLine: Object.freeze({
     enabled: true,
-    separator: "powerline-thin",
+    separator: "|",
     layout: Object.freeze({
       left: ["path", "git", "context_bar", "cost"],
       right: ["model_effort"],
@@ -7112,7 +7630,10 @@ var DEFAULT_CONFIG = Object.freeze({
     assistantPrefix: true,
     specialBlocks: true,
     hideThinkingLabel: true,
-    hideInterimText: true
+    hideInterimText: true,
+    showImagePreviews: true,
+    clipboardImages: true,
+    previewMaxWidth: 30
   }),
   tools: Object.freeze({
     enabled: true,
@@ -7229,7 +7750,10 @@ function normalizeConfig(input, defaults = DEFAULT_CONFIG) {
       assistantPrefix: bool(messages.assistantPrefix, defaults.messages.assistantPrefix),
       specialBlocks: bool(messages.specialBlocks, defaults.messages.specialBlocks),
       hideThinkingLabel: bool(messages.hideThinkingLabel, defaults.messages.hideThinkingLabel),
-      hideInterimText: bool(messages.hideInterimText, defaults.messages.hideInterimText)
+      hideInterimText: bool(messages.hideInterimText, defaults.messages.hideInterimText),
+      showImagePreviews: bool(messages.showImagePreviews, defaults.messages.showImagePreviews),
+      clipboardImages: bool(messages.clipboardImages, defaults.messages.clipboardImages),
+      previewMaxWidth: boundedInt(messages.previewMaxWidth, defaults.messages.previewMaxWidth, 8, 60)
     }),
     tools: Object.freeze({
       enabled: bool(tools.enabled, defaults.tools.enabled),
@@ -7283,6 +7807,8 @@ var BOOL_PATHS = /* @__PURE__ */ new Set([
   "messages.specialBlocks",
   "messages.hideThinkingLabel",
   "messages.hideInterimText",
+  "messages.showImagePreviews",
+  "messages.clipboardImages",
   "tools.enabled",
   "tools.showElapsed",
   "tools.dimOutput",
@@ -7328,6 +7854,8 @@ function validLeaf(path, value) {
     return typeof value === "string";
   if (path === "tools.maxCollapsedLines" || path === "tools.maxExpandedLines")
     return typeof value === "number" && Number.isFinite(value) && value >= 0;
+  if (path === "messages.previewMaxWidth")
+    return typeof value === "number" && Number.isFinite(value) && value >= 8 && value <= 60;
   if (path === "statusLine.bottomMargin" || path === "statusLine.contextBarWidth")
     return typeof value === "number" && Number.isFinite(value) && value >= 0;
   if (STRING_ARRAY_PATHS.has(path)) return Array.isArray(value) && value.every((item) => typeof item === "string");
@@ -7751,6 +8279,9 @@ var allowedPaths = /* @__PURE__ */ new Set([
   "messages.specialBlocks",
   "messages.hideThinkingLabel",
   "messages.hideInterimText",
+  "messages.showImagePreviews",
+  "messages.clipboardImages",
+  "messages.previewMaxWidth",
   "tools.enabled",
   "tools.style",
   "tools.maxCollapsedLines",
@@ -7783,6 +8314,9 @@ function validatePathValue(path, value) {
     "messages.specialBlocks",
     "messages.hideThinkingLabel",
     "messages.hideInterimText",
+    "messages.showImagePreviews",
+    "messages.clipboardImages",
+    "messages.previewMaxWidth",
     "tools.enabled",
     "tools.showElapsed",
     "tools.dimOutput",
@@ -7805,6 +8339,8 @@ function validatePathValue(path, value) {
     return typeof value === "string";
   if (path === "tools.maxCollapsedLines" || path === "tools.maxExpandedLines")
     return typeof value === "number" && Number.isFinite(value) && value >= 0;
+  if (path === "messages.previewMaxWidth")
+    return typeof value === "number" && Number.isFinite(value) && value >= 8 && value <= 60;
   if (path === "statusLine.bottomMargin" || path === "statusLine.contextBarWidth")
     return typeof value === "number" && Number.isFinite(value) && value >= 0;
   if (path.endsWith(".colors") || path.endsWith(".glyphs"))
@@ -7937,8 +8473,8 @@ function runCommand(args, host, app, storage) {
 }
 
 // extension-src/pi-style/pi/config-host.ts
-import { mkdir, readFile, rename, unlink, writeFile } from "fs/promises";
-import { dirname as dirname2, join as join2 } from "path";
+import { mkdir, readFile as readFile3, rename, unlink, writeFile } from "fs/promises";
+import { dirname as dirname3, join as join2 } from "path";
 import { CONFIG_DIR_NAME, getAgentDir } from "@earendil-works/pi-coding-agent";
 var locks = /* @__PURE__ */ new Map();
 function serialize(path, operation) {
@@ -7951,14 +8487,14 @@ function serialize(path, operation) {
 }
 function createPiConfigFilePort(fs = {}) {
   const fsMkdir = fs.mkdir ?? mkdir;
-  const fsReadFile = fs.readFile ?? readFile;
+  const fsReadFile = fs.readFile ?? readFile3;
   const fsRename = fs.rename ?? rename;
   const fsUnlink = fs.unlink ?? unlink;
   const fsWriteFile = fs.writeFile ?? writeFile;
   return {
     read: (path) => fsReadFile(path, "utf8"),
     writeAtomic: async (path, content) => serialize(path, async () => {
-      await fsMkdir(dirname2(path), { recursive: true });
+      await fsMkdir(dirname3(path), { recursive: true });
       const temporary = `${path}.pi-style-${process.pid}-${Date.now()}.tmp`;
       try {
         await fsWriteFile(temporary, content, { mode: 384 });
@@ -8147,12 +8683,17 @@ function createBuiltinSegments() {
       const percent = contextPercent(snapshot.context ?? {});
       if (percent === void 0) return { visible: false, content: "" };
       const token = contextBarToken(percent);
-      const window = snapshot.context?.windowTokens;
-      const label = `ctx${window !== void 0 ? ` (${formatTokens(window)})` : ""}:`;
       const width = options.context_bar?.width ?? CONTEXT_BAR_WIDTH;
+      const pipe = theme.apply("separator", "|");
+      const bar = `${theme.apply("muted", "[")}${theme.apply(token, contextBar(percent, width))}${theme.apply("muted", "]")}`;
+      const parts = [bar, `${theme.apply(token, `${Math.round(percent)}%`)}${theme.apply("muted", " used")}`];
+      const current = snapshot.context?.currentTokens;
+      const window = snapshot.context?.windowTokens;
+      if (current !== void 0 && window !== void 0)
+        parts.push(theme.apply("muted", `${formatTokens(current)}/${formatTokens(window)}`));
       return {
         visible: true,
-        content: `${theme.apply("muted", label)} ${theme.apply(token, contextBar(percent, width))} ${theme.apply(token, `${Math.round(percent)}%`)}`,
+        content: parts.join(` ${pipe} `),
         compactContent: theme.apply(token, `${Math.round(percent)}%`)
       };
     }),
@@ -8235,10 +8776,7 @@ function contextBarToken(percent) {
   return "success";
 }
 function formatTokens(value) {
-  if (value >= 1e6) {
-    const millions = value / 1e6;
-    return `${Number.isInteger(millions) ? millions : millions.toFixed(1)}M`;
-  }
+  if (value >= 1e6) return `${(value / 1e6).toFixed(1)}M`;
   if (value >= 1e3) {
     const thousands = value / 1e3;
     return `${Number.isInteger(thousands) ? thousands : thousands.toFixed(1)}K`;
@@ -8546,6 +9084,10 @@ var StyledEditor = class extends CustomEditor {
   semanticDirty = false;
   disposed = false;
   renderPlanCache;
+  clipboardImagePaste;
+  /** Keybinding matcher (the factory's KeybindingsManager) for keystroke-level
+   *  interception: the paste keybinding and backspace checks below. */
+  editorKeybindings;
   constructor(tui, theme, keybindings, options) {
     super(tui, theme, keybindings);
     this.config = options.config;
@@ -8553,6 +9095,8 @@ var StyledEditor = class extends CustomEditor {
     this.piTheme = theme;
     this.fullTheme = options.fullTheme;
     this.onSnapshot = options.onSnapshot;
+    this.clipboardImagePaste = options.clipboardImagePaste;
+    this.editorKeybindings = keybindings;
     this.semantic = semanticTheme(theme, options.config);
     this.setPaddingX(0);
   }
@@ -8569,9 +9113,88 @@ var StyledEditor = class extends CustomEditor {
   }
   handleInput(data) {
     if (this.disposed) return;
+    if (this.handleClipboardImagePasteKeystroke(data)) return;
+    if (this.handleAtomicMarkerBackspace(data)) return;
     super.handleInput(data);
     this.onSnapshot({ ...this.snapshot });
   }
+  /**
+   * Instant marker (ADR 0009): when the built-in paste keybinding fires, the
+   * clipboard holds an image (sync native probe), and the surface is enabled,
+   * the keystroke is owned here — an `[Image #N] ` marker is inserted
+   * immediately (zero-latency feedback) and the bytes fill the registry
+   * entry asynchronously. Pi's own paste handler never runs for this
+   * keystroke, so no temp artifact is written. Text pastes (no image) and
+   * probe-unavailable hosts fall through to the native path untouched.
+   */
+  handleClipboardImagePasteKeystroke(data) {
+    const surface = this.clipboardImagePaste;
+    if (!surface?.enabled()) return false;
+    if (!this.editorKeybindings.matches(data, "app.clipboard.pasteImage")) return false;
+    if (surface.clipboardHasImage() !== true) return false;
+    super.insertTextAtCursor(surface.markerFromClipboard());
+    this.onSnapshot({ ...this.snapshot });
+    return true;
+  }
+  /**
+   * Atomic marker backspace (ADR 0009): backspacing directly after a
+   * registered `[Image #N] ` marker deletes the whole marker as one unit —
+   * the image is discarded (image-paste semantics). Direct state surgery
+   * (O(1)) mirroring pi-tui's handleBackspace mutation protocol: no setText
+   * round-trip (it clears the pastes registry, and undo snapshots store that
+   * Map by reference — silently breaking `[paste #N]` atomicity on undo) and
+   * no per-column left-arrow inputs (O(K·L) through the keybinding chain and
+   * visual line maps). No undo snapshot is pushed: the discarded image
+   * cannot be restored, so the deletion is intentionally non-undoable.
+   */
+  handleAtomicMarkerBackspace(data) {
+    const surface = this.clipboardImagePaste;
+    if (!surface?.enabled()) return false;
+    const isBackspace = this.editorKeybindings.matches(data, "tui.editor.deleteCharBackward") || data === "\x7F";
+    if (!isBackspace) return false;
+    const lines = this.getLines();
+    const cursor = this.getCursor();
+    const current = lines[cursor.line];
+    if (current === void 0) return false;
+    const before = current.slice(0, cursor.col);
+    const hit = clipboardMarkerAtEnd(before);
+    if (!hit || !surface.isMarkerIndexRegistered(hit.index)) return false;
+    const editor = this;
+    const targetCol = cursor.col - hit.length;
+    editor.exitHistoryBrowsing();
+    editor.lastAction = null;
+    editor.cancelAutocomplete();
+    editor.state.lines[cursor.line] = current.slice(0, targetCol) + current.slice(cursor.col);
+    editor.setCursorCol(targetCol);
+    editor.onChange?.(this.getText());
+    surface.discardMarkerIndex(hit.index);
+    this.invalidate();
+    this.onSnapshot({ ...this.snapshot });
+    return true;
+  }
+  /**
+   * Artifact-path fallback (ADR 0009): when the keystroke was not owned
+   * (probe unavailable, native editor path, config toggled) Pi's built-in
+   * paste still inserts a `<tmpdir>/pi-clipboard-<uuid>.<ext>` path through
+   * this method. Convert it to a marker when the artifact reads successfully;
+   * every failure inserts the original text verbatim (exact native behavior).
+   */
+  insertTextAtCursor(text) {
+    const surface = this.clipboardImagePaste;
+    if (!surface?.enabled() || !isSingleClipboardImagePath(text)) {
+      super.insertTextAtCursor(text);
+      return;
+    }
+    void (async () => {
+      let replacement = text;
+      try {
+        replacement = await surface.markerFromArtifact(text);
+      } catch {
+      }
+      super.insertTextAtCursor(replacement);
+      this.tui.requestRender();
+    })();
+  }
   invalidate() {
     super.invalidate();
     if (this.semanticDirty) {
@@ -8787,6 +9410,7 @@ function installEditor(options) {
       snapshot,
       theme,
       ...options.host.theme ? { fullTheme: options.host.theme } : {},
+      ...options.clipboardImagePaste ? { clipboardImagePaste: options.clipboardImagePaste } : {},
       onSnapshot: (next) => {
         if (!disposed && options.isCurrent?.() !== false) snapshot = next;
       }
@@ -9363,7 +9987,7 @@ function renderGroup(items, separator, padding) {
 }
 function renderStatus(layout, snapshot, width, options) {
   if (width <= 0) return { primary: "", lines: [], visibleSegments: [] };
-  const separator = options.separator ?? "\u2502";
+  const separator = options.separator ?? "|";
   const padding = options.padding ?? " ";
   const normalized = uniqueLayout(layout);
   const context = { snapshot, theme: options.theme, options: options.options ?? {}, width };
@@ -10180,7 +10804,10 @@ function createPiStyleRuntime(host, generation2, requestRender = host.requestRen
         config: currentConfig,
         generation: generation2,
         initialSnapshot: currentSnapshot,
-        isCurrent: () => !disposed
+        isCurrent: () => !disposed,
+        // Clipboard image paste surface (ADR 0009): instant `[Image #N] `
+        // markers at keystroke time, artifact fallback, atomic backspace.
+        clipboardImagePaste: createClipboardImagePasteSurface()
       });
       if (editor) {
         disposables.add(editor);
@@ -10878,7 +11505,7 @@ function isTierCAuthorized(input) {
 
 // extension-src/pi-style/pi/compatibility-probe.ts
 import { readFileSync as readFileSync2 } from "fs";
-import { dirname as dirname3, join as join3 } from "path";
+import { dirname as dirname4, join as join3 } from "path";
 import { fileURLToPath as fileURLToPath2 } from "url";
 import {
   AssistantMessageComponent,
@@ -11675,19 +12302,19 @@ function detectPiVersion(resolution = {}) {
       );
     }
   });
-  const readFile2 = resolution.readFile ?? ((path) => readFileSync2(path, "utf8"));
+  const readFile4 = resolution.readFile ?? ((path) => readFileSync2(path, "utf8"));
   try {
     const entry = resolvePackageEntry("@earendil-works/pi-coding-agent");
-    let directory = dirname3(entry);
+    let directory = dirname4(entry);
     for (; ; ) {
       const packagePath = join3(directory, "package.json");
       try {
-        const packageJson = JSON.parse(readFile2(packagePath));
+        const packageJson = JSON.parse(readFile4(packagePath));
         if (packageJson.name === "@earendil-works/pi-coding-agent" && typeof packageJson.version === "string")
           return { version: packageJson.version };
       } catch {
       }
-      const parent = dirname3(directory);
+      const parent = dirname4(directory);
       if (parent === directory) break;
       directory = parent;
     }
@@ -12350,6 +12977,11 @@ function createPiStyleSessionCoordinator(pi, hooks = {}) {
   };
   const applyMessagesConfig = (config) => {
     sessionUi?.setHiddenThinkingLabel?.(config.messages.hideThinkingLabel ? "" : void 0);
+    setMessagesRenderConfig({
+      showImagePreviews: config.messages.showImagePreviews,
+      clipboardImages: config.messages.clipboardImages,
+      previewMaxWidth: config.messages.previewMaxWidth
+    });
   };
   const applyAutoTheme = (config, ctx) => {
     const target = config.theme.autoApply;
@@ -12409,6 +13041,7 @@ function createPiStyleSessionCoordinator(pi, hooks = {}) {
       resetBatchRegistry();
       resetGrepRegistry();
       resetBashTreeRegistry();
+      resetPendingImageRegistry();
       resetTurnRegistry();
       rebuildTurnRegistryFromEntries(ctx.sessionManager.getEntries());
       stopAllElapsedTickers();
@@ -12474,6 +13107,7 @@ function createPiStyleSessionCoordinator(pi, hooks = {}) {
       resetBatchRegistry();
       resetGrepRegistry();
       resetBashTreeRegistry();
+      resetPendingImageRegistry();
       resetTurnRegistry();
       stopAllElapsedTickers();
       app.sessionShutdown();
@@ -12677,6 +13311,12 @@ function piStyleExtension(pi) {
   pi.registerFlag("pi-style-ascii", { type: "boolean", description: "Use ASCII pi-style markers" });
   const coordinator = createPiStyleSessionCoordinator(pi, compatibilityTestHooks);
   registerPiStyleCommand(pi, coordinator.app);
+  registerImagePreviewSurface(pi);
+  let stagedImagePreview;
+  let previewFlushTimer;
+  pi.on("before_agent_start", (event) => {
+    stagedImagePreview = stageImagePreviewData(event.images ?? []);
+  });
   pi.on("session_start", async (event, ctx) => {
     resetUsageFromSessionCache(ctx.sessionManager);
     if (pi.getFlag("pi-style-readonly-tools") === true) {
@@ -12688,7 +13328,7 @@ function piStyleExtension(pi) {
     coordinator.app.runtime.current?.dismissStartup();
     beginAgentRun();
   });
-  pi.on("input", (event, _ctx) => {
+  pi.on("input", async (event, _ctx) => {
     coordinator.app.runtime.current?.dismissStartup();
     if (event.source === "interactive") {
       const trimmed = event.text.trimStart();
@@ -12697,6 +13337,15 @@ function piStyleExtension(pi) {
         if (trimmed.slice(bangLength).trim() === "") return { action: "handled" };
       }
     }
+    const markerResult = await resolvePendingImageMarkers(event.text);
+    const pathResult = event.source === "interactive" ? await transformClipboardImages(event.text) : void 0;
+    if (markerResult || pathResult) {
+      return {
+        action: "transform",
+        text: pathResult?.text ?? event.text,
+        images: [...markerResult?.images ?? [], ...pathResult?.images ?? []]
+      };
+    }
     return void 0;
   });
   pi.on("tool_execution_start", () => coordinator.app.runtime.current?.dismissStartup());
@@ -12716,8 +13365,25 @@ function piStyleExtension(pi) {
     "session_info_changed",
     (event) => coordinator.app.update({ sessionName: event.name }, "coalesced", { refreshExtensionStatuses: true })
   );
-  pi.on("message_start", () => {
+  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;
+    }
   });
   pi.on("message_update", () => coordinator.app.update({}, "coalesced"));
   pi.on(