@oh-my-pi/pi-coding-agent 14.0.4 → 14.0.5

package/src/tools/render-utils.ts

@@ -14,7 +14,7 @@ import type { Theme } from "../modes/theme/theme";
 import { formatDimensionNote, type ResizedImage } from "../utils/image-resize";
 
 export { Ellipsis } from "@oh-my-pi/pi-natives";
-export { replaceTabs, truncateToWidth } from "@oh-my-pi/pi-tui";
+export { replaceTabs, truncateToWidth, wrapTextWithAnsi } from "@oh-my-pi/pi-tui";
 
 // =============================================================================
 // Standardized Display Constants

package/src/utils/image-resize.ts

@@ -2,10 +2,10 @@ import type { ImageContent } from "@oh-my-pi/pi-ai";
 import { ImageFormat, PhotonImage, SamplingFilter } from "@oh-my-pi/pi-natives";
 
 export interface ImageResizeOptions {
-	maxWidth?: number; // Default: 2000
-	maxHeight?: number; // Default: 2000
-	maxBytes?: number; // Default: 4.5MB (below Anthropic's 5MB limit)
-	jpegQuality?: number; // Default: 80
+	maxWidth?: number; // Default: 1568
+	maxHeight?: number; // Default: 1568
+	maxBytes?: number; // Default: 500KB
+	jpegQuality?: number; // Default: 75
 }
 
 export interface ResizedImage {
@@ -19,22 +19,25 @@ export interface ResizedImage {
 	get data(): string;
 }
 
-// 4.5MB - provides headroom below Anthropic's 5MB limit
-const DEFAULT_MAX_BYTES = 4.5 * 1024 * 1024;
+// 500KB target — aggressive compression; Anthropic's 5MB per-image cap is rarely the
+// binding constraint once images are downsized to 1568px (Anthropic's internal threshold).
+const DEFAULT_MAX_BYTES = 500 * 1024;
 
 const DEFAULT_OPTIONS: Required<ImageResizeOptions> = {
-	maxWidth: 2000,
-	maxHeight: 2000,
+	// 1568px — Anthropic downscales anything larger; OpenAI tiles at 768px;
+	// sending bigger pixels wastes bandwidth the model never sees.
+	maxWidth: 1568,
+	maxHeight: 1568,
 	maxBytes: DEFAULT_MAX_BYTES,
-	jpegQuality: 80,
+	jpegQuality: 75,
 };
 
-/** Helper to pick the smaller of two buffers */
-function pickSmaller(
-	a: { buffer: Uint8Array; mimeType: string },
-	b: { buffer: Uint8Array; mimeType: string },
-): { buffer: Uint8Array; mimeType: string } {
-	return a.buffer.length <= b.buffer.length ? a : b;
+/** Pick the smallest of N encoded buffers. */
+function pickSmallest(...candidates: Array<{ buffer: Uint8Array; mimeType: string }>): {
+	buffer: Uint8Array;
+	mimeType: string;
+} {
+	return candidates.reduce((best, c) => (c.buffer.length < best.buffer.length ? c : best));
 }
 
 /** Polyfill for Buffer.toBase64, technically since it derives from Uint8Array it should exist but Bun reasons... */
@@ -43,17 +46,22 @@ Buffer.prototype.toBase64 = function (this: Buffer) {
 };
 
 /**
- * Resize an image to fit within the specified max dimensions and file size.
- * Returns the original image if it already fits within the limits.
+ * Resize and recompress an image to fit within the specified max dimensions and file size.
  *
- * Uses Photon for image processing. If Photon is not available,
- * returns the original image unchanged.
+ * Defaults target Anthropic's internal 1568px downscale threshold and produce small
+ * lossy JPEG output suitable for tool-call payloads (~100–500KB typical).
  *
- * Strategy for staying under maxBytes:
- * 1. First resize to maxWidth/maxHeight
- * 2. Try both PNG and JPEG formats, pick the smaller one
- * 3. If still too large, try JPEG with decreasing quality
- * 4. If still too large, progressively reduce dimensions
+ * Strategy:
+ * 1. Fast path — if input already fits dimensions AND is at <=25% of byte budget,
+ *    return as-is. Avoids re-encoding tiny icons/diagrams.
+ * 2. Resize to maxWidth/maxHeight, encode both PNG and JPEG at default quality,
+ *    pick whichever is smaller. PNG wins for line art / few-color UI; JPEG wins
+ *    for photographic content.
+ * 3. If still too large, JPEG-only quality ladder (PNG quality is a no-op).
+ * 4. If still too large, progressively reduce dimensions and retry the JPEG ladder.
+ * 5. Last resort: ship the smallest variant produced.
+ *
+ * On any decode failure, returns the original bytes unchanged with wasResized=false.
  */
 export async function resizeImage(img: ImageContent, options?: ImageResizeOptions): Promise<ResizedImage> {
 	const opts = { ...DEFAULT_OPTIONS, ...options };
@@ -68,7 +76,12 @@ export async function resizeImage(img: ImageContent, options?: ImageResizeOption
 
 		// Check if already within all limits (dimensions AND size)
 		const originalSize = inputBuffer.length;
-		if (originalWidth <= opts.maxWidth && originalHeight <= opts.maxHeight && originalSize <= opts.maxBytes) {
+		// Fast path: skip if already within dimensions AND well under budget.
+		// Threshold is 1/4 of budget — if already that compact, don't re-encode.
+		// Avoids wasted work on tiny icons/diagrams while ensuring larger PNGs
+		// still get JPEG-compressed.
+		const comfortableSize = opts.maxBytes / 4;
+		if (originalWidth <= opts.maxWidth && originalHeight <= opts.maxHeight && originalSize <= comfortableSize) {
 			return {
 				buffer: inputBuffer,
 				mimeType: img.mimeType ?? `image/${format}`,
@@ -96,35 +109,58 @@ export async function resizeImage(img: ImageContent, options?: ImageResizeOption
 			targetHeight = opts.maxHeight;
 		}
 
-		// Helper to resize and encode in both formats, returning the smaller one
-		async function tryBothFormats(
+		// First-attempt encoder: try PNG, JPEG, and lossy WebP — return whichever is smallest.
+		// PNG wins for line art / few-color UI; JPEG and WebP win for photographic content;
+		// WebP usually beats JPEG by 25–35% at the same perceptual quality.
+		async function encodeSmallest(
 			width: number,
 			height: number,
 			quality: number,
 		): Promise<{ buffer: Uint8Array; mimeType: string }> {
 			const resized = await image.resize(width, height, SamplingFilter.Lanczos3);
 
-			const [pngBuffer, jpegBuffer] = await Promise.all([
+			const [pngBuffer, jpegBuffer, webpBuffer] = await Promise.all([
 				resized.encode(ImageFormat.PNG, quality),
 				resized.encode(ImageFormat.JPEG, quality),
+				resized.encode(ImageFormat.WEBP, quality),
 			]);
 
-			return pickSmaller(
+			return pickSmallest(
 				{ buffer: pngBuffer, mimeType: "image/png" },
 				{ buffer: jpegBuffer, mimeType: "image/jpeg" },
+				{ buffer: webpBuffer, mimeType: "image/webp" },
+			);
+		}
+
+		// Lossy-only encoder — used in quality/dimension fallback ladders where PNG can't shrink
+		// further (PNG quality is a no-op). Picks the smaller of JPEG vs lossy WebP at the
+		// requested quality.
+		async function encodeLossy(
+			width: number,
+			height: number,
+			quality: number,
+		): Promise<{ buffer: Uint8Array; mimeType: string }> {
+			const resized = await image.resize(width, height, SamplingFilter.Lanczos3);
+			const [jpegBuffer, webpBuffer] = await Promise.all([
+				resized.encode(ImageFormat.JPEG, quality),
+				resized.encode(ImageFormat.WEBP, quality),
+			]);
+			return pickSmallest(
+				{ buffer: jpegBuffer, mimeType: "image/jpeg" },
+				{ buffer: webpBuffer, mimeType: "image/webp" },
 			);
 		}
 
-		// Try to produce an image under maxBytes
-		const qualitySteps = [85, 70, 55, 40];
+		// Quality ladder — more aggressive steps for tighter budgets
+		const qualitySteps = [70, 60, 50, 40];
 		const scaleSteps = [1.0, 0.75, 0.5, 0.35, 0.25];
 
 		let best: { buffer: Uint8Array; mimeType: string };
 		let finalWidth = targetWidth;
 		let finalHeight = targetHeight;
 
-		// First attempt: resize to target dimensions, try both formats
-		best = await tryBothFormats(targetWidth, targetHeight, opts.jpegQuality);
+		// First attempt: resize to target, try both PNG and JPEG, pick smaller
+		best = await encodeSmallest(targetWidth, targetHeight, opts.jpegQuality);
 
 		if (best.buffer.length <= opts.maxBytes) {
 			return {
@@ -141,9 +177,9 @@ export async function resizeImage(img: ImageContent, options?: ImageResizeOption
 			};
 		}
 
-		// Still too large - try JPEG with decreasing quality
+		// Still too large — lossy ladder (JPEG vs WebP, smallest wins) with decreasing quality
 		for (const quality of qualitySteps) {
-			best = await tryBothFormats(targetWidth, targetHeight, quality);
+			best = await encodeLossy(targetWidth, targetHeight, quality);
 
 			if (best.buffer.length <= opts.maxBytes) {
 				return {
@@ -161,7 +197,7 @@ export async function resizeImage(img: ImageContent, options?: ImageResizeOption
 			}
 		}
 
-		// Still too large - reduce dimensions progressively
+		// Still too large — reduce dimensions progressively with the lossy ladder
 		for (const scale of scaleSteps) {
 			finalWidth = Math.round(targetWidth * scale);
 			finalHeight = Math.round(targetHeight * scale);
@@ -171,7 +207,7 @@ export async function resizeImage(img: ImageContent, options?: ImageResizeOption
 			}
 
 			for (const quality of qualitySteps) {
-				best = await tryBothFormats(finalWidth, finalHeight, quality);
+				best = await encodeLossy(finalWidth, finalHeight, quality);
 
 				if (best.buffer.length <= opts.maxBytes) {
 					return {

package/src/web/scrapers/types.ts

@@ -2,6 +2,8 @@
  * Shared types and utilities for web-fetch handlers
  */
 import { ptree } from "@oh-my-pi/pi-utils";
+import TurndownService from "turndown";
+import { gfm } from "turndown-plugin-gfm";
 import { ToolAbortError } from "../../tools/tool-errors";
 
 export { formatNumber } from "@oh-my-pi/pi-utils";
@@ -153,41 +155,57 @@ export async function loadPage(url: string, options: LoadPageOptions = {}): Prom
 	return { content: "", contentType: "", finalUrl: url, ok: false };
 }
 
+/** Module-level Turndown instance — matches markit-ai's configuration. */
+const turndown = new TurndownService({
+	headingStyle: "atx",
+	codeBlockStyle: "fenced",
+	bulletListMarker: "-",
+});
+turndown.use(gfm);
+turndown.addRule("strikethrough", {
+	filter: ["del", "s", "strike"],
+	replacement(content) {
+		return `~~${content}~~`;
+	},
+});
+turndown.addRule("heading", {
+	filter: ["h1", "h2", "h3", "h4", "h5", "h6"],
+	replacement(content, node) {
+		const level = Number(node.nodeName.charAt(1));
+		const prefix = "#".repeat(level);
+		const cleaned = content.replace(/\\([.])/g, "$1").trim();
+		return `\n\n${prefix} ${cleaned}\n\n`;
+	},
+});
+
+type TurndownListParent = {
+	nodeName: string;
+	getAttribute(name: string): string | null;
+	children: ArrayLike<unknown>;
+};
+
+turndown.addRule("listItem", {
+	filter: "li",
+	replacement(content, node, options) {
+		content = content.replace(/^\n+/, "").replace(/\n+$/, "\n").replace(/\n/gm, "\n  ");
+		const parent = node.parentNode as unknown as TurndownListParent | null;
+		let prefix = `${options.bulletListMarker} `;
+		if (parent?.nodeName === "OL") {
+			const start = parent.getAttribute("start");
+			const index = Array.prototype.indexOf.call(parent.children, node);
+			prefix = `${(start ? Number(start) : 1) + index}. `;
+		}
+		return prefix + content + (node.nextSibling ? "\n" : "");
+	},
+});
+
 /**
- * Convert basic HTML to markdown
+ * Convert HTML to markdown using Turndown with GFM support.
+ * Strips script/style tags before conversion.
  */
 export function htmlToBasicMarkdown(html: string): string {
-	const stripped = html
-		.replace(/<pre[^>]*><code[^>]*>/g, "\n```\n")
-		.replace(/<\/code><\/pre>/g, "\n```\n")
-		.replace(/<code[^>]*>/g, "`")
-		.replace(/<\/code>/g, "`")
-		.replace(/<strong[^>]*>/g, "**")
-		.replace(/<\/strong>/g, "**")
-		.replace(/<b[^>]*>/g, "**")
-		.replace(/<\/b>/g, "**")
-		.replace(/<em[^>]*>/g, "*")
-		.replace(/<\/em>/g, "*")
-		.replace(/<i[^>]*>/g, "*")
-		.replace(/<\/i>/g, "*")
-		.replace(
-			/<a[^>]*href="([^"]+)"[^>]*>([\s\S]*?)<\/a>/g,
-			(_, href, text) => `[${text.replace(/<[^>]+>/g, "").trim()}](${href})`,
-		)
-		.replace(/<p[^>]*>/g, "\n\n")
-		.replace(/<\/p>/g, "")
-		.replace(/<br\s*\/?>/g, "\n")
-		.replace(/<li[^>]*>/g, "- ")
-		.replace(/<\/li>/g, "\n")
-		.replace(/<\/?[uo]l[^>]*>/g, "\n")
-		.replace(/<h(\d)[^>]*>/g, (_, n) => `\n${"#".repeat(parseInt(n, 10))} `)
-		.replace(/<\/h\d>/g, "\n")
-		.replace(/<blockquote[^>]*>/g, "\n> ")
-		.replace(/<\/blockquote>/g, "\n")
-		.replace(/<[^>]+>/g, "")
-		.replace(/\n{3,}/g, "\n\n")
-		.trim();
-	return decodeHtmlEntities(stripped);
+	const cleaned = html.replace(/<script[\s\S]*?<\/script>/gi, "").replace(/<style[\s\S]*?<\/style>/gi, "");
+	return turndown.turndown(cleaned).trim();
 }
 
 /**

package/src/web/search/providers/codex.ts

@@ -90,6 +90,10 @@ interface CodexResponse {
 	usage?: CodexUsage;
 }
 
+function isImagePlaceholderAnswer(text: string): boolean {
+	return text.trim().toLowerCase() === "(see attached image)";
+}
+
 /**
  * Decodes a JWT token and extracts the payload.
  * @param token - JWT token string
@@ -232,6 +236,7 @@ async function callCodexSearch(
 
 	// Parse SSE stream
 	const answerParts: string[] = [];
+	const streamedAnswerParts: string[] = [];
 	const sources: SearchSource[] = [];
 	let model = requestedModel;
 	let requestId = "";
@@ -241,7 +246,12 @@ async function callCodexSearch(
 		const eventType = typeof rawEvent.type === "string" ? rawEvent.type : "";
 		if (!eventType) continue;
 
-		if (eventType === "response.output_item.done") {
+		if (eventType === "response.output_text.delta") {
+			const delta = typeof rawEvent.delta === "string" ? rawEvent.delta : "";
+			if (delta) {
+				streamedAnswerParts.push(delta);
+			}
+		} else if (eventType === "response.output_item.done") {
 			const item = rawEvent.item as CodexResponseItem | undefined;
 			if (!item) continue;
 
@@ -302,8 +312,17 @@ async function callCodexSearch(
 		}
 	}
 
+	const finalAnswer = answerParts.join("\n\n").trim();
+	const streamedAnswer = streamedAnswerParts.join("").trim();
+	const answer =
+		finalAnswer.length > 0 && !isImagePlaceholderAnswer(finalAnswer)
+			? finalAnswer
+			: streamedAnswer.length > 0
+				? streamedAnswer
+				: finalAnswer;
+
 	return {
-		answer: answerParts.join("\n\n"),
+		answer,
 		sources,
 		model,
 		requestId,