@wahack/pi-coding-agent 15.11.0

package/src/modes/components/assistant-message.ts

@@ -0,0 +1,307 @@
+import type { AssistantMessage, ImageContent, Usage } from "@oh-my-pi/pi-ai";
+import { Container, Image, type ImageBudget, ImageProtocol, Markdown, Spacer, TERMINAL, Text } from './stubs/tui/index.ts';
+import { formatNumber } from "@oh-my-pi/pi-utils";
+import { settings } from "../../config/settings";
+import type { AssistantThinkingRenderer } from "../../extensibility/extensions/types";
+import { getMarkdownTheme, theme } from "../../modes/theme/theme";
+import { resolveAbortLabel, shouldRenderAbortReason } from "../../session/messages";
+import { getPreviewLines, resolveImageOptions, TRUNCATE_LENGTHS } from "../../tools/render-utils";
+
+/**
+ * Max lines of a turn-ending provider error rendered inline in the transcript.
+ * Bounds pathological error bodies — e.g. a proxy 502 whose body is a full HTML
+ * page — so they can't flood the scrollback. Blank lines are dropped and each
+ * line is width-truncated by {@link getPreviewLines}. Full text is still kept in
+ * the persisted session.
+ */
+const MAX_TRANSCRIPT_ERROR_LINES = 8;
+
+/**
+ * Component that renders a complete assistant message
+ */
+export class AssistantMessageComponent extends Container {
+	#contentContainer: Container;
+	#lastMessage?: AssistantMessage;
+	#toolImagesByCallId = new Map<string, ImageContent[]>();
+	#usageInfo?: Usage;
+	#convertedKittyImages = new Map<string, ImageContent>();
+	#kittyConversionsInFlight = new Set<string>();
+	#transcriptBlockFinalized: boolean;
+	/**
+	 * When true, the turn-ending `Error: …` line for `stopReason === "error"` is
+	 * suppressed because the same error is currently shown in the pinned banner
+	 * above the editor (see `EventController` + `ErrorBannerComponent`). Avoids
+	 * rendering the identical error twice (inline + banner) at the error moment.
+	 * Restored to `false` when the banner is cleared at the next turn so the
+	 * transcript keeps the error in history.
+	 */
+	#errorPinned = false;
+	/** Whether the last updateContent carried an in-flight streaming partial; such
+	 *  renders bypass the markdown module LRU (see Markdown.transientRenderCache). */
+	#lastUpdateTransient = false;
+
+	constructor(
+		message?: AssistantMessage,
+		private hideThinkingBlock = false,
+		private readonly onImageUpdate?: () => void,
+		private readonly thinkingRenderers: readonly AssistantThinkingRenderer[] = [],
+		private readonly imageBudget?: ImageBudget,
+	) {
+		super();
+		this.#transcriptBlockFinalized = message !== undefined;
+
+		// Container for text/thinking content
+		this.#contentContainer = new Container();
+		this.addChild(this.#contentContainer);
+
+		if (message) {
+			this.updateContent(message);
+		}
+	}
+
+	override invalidate(): void {
+		super.invalidate();
+		if (this.#lastMessage) {
+			this.updateContent(this.#lastMessage, { transient: this.#lastUpdateTransient });
+		}
+	}
+
+	setHideThinkingBlock(hide: boolean): void {
+		this.hideThinkingBlock = hide;
+	}
+
+	/**
+	 * Toggle suppression of the inline `Error: …` line while the same error is
+	 * pinned in the banner above the editor. Re-renders so the change is visible.
+	 */
+	setErrorPinned(pinned: boolean): void {
+		if (this.#errorPinned === pinned) return;
+		this.#errorPinned = pinned;
+		if (this.#lastMessage) {
+			this.updateContent(this.#lastMessage, { transient: this.#lastUpdateTransient });
+		}
+	}
+
+	isTranscriptBlockFinalized(): boolean {
+		return this.#transcriptBlockFinalized;
+	}
+
+	markTranscriptBlockFinalized(): void {
+		this.#transcriptBlockFinalized = true;
+	}
+
+	/**
+	 * Render a turn-ending provider error inline. Drops blank lines, clamps the
+	 * line count to {@link MAX_TRANSCRIPT_ERROR_LINES}, and width-truncates each
+	 * line so a pathological body — e.g. the HTML page a proxy returns on a 502 —
+	 * can't flood the transcript. Mirrors {@link ErrorBannerComponent}.
+	 */
+	#appendErrorBlock(message: string): void {
+		const lines = getPreviewLines(message, MAX_TRANSCRIPT_ERROR_LINES, TRUNCATE_LENGTHS.LINE);
+		if (lines.length === 0) lines.push("Unknown error");
+		this.#contentContainer.addChild(new Spacer(1));
+		this.#contentContainer.addChild(new Text(theme.fg("error", `Error: ${lines[0]}`), 1, 0));
+		for (const line of lines.slice(1)) {
+			this.#contentContainer.addChild(new Text(theme.fg("error", `  ${line}`), 1, 0));
+		}
+	}
+
+	setToolResultImages(toolCallId: string, images: ImageContent[]): void {
+		if (!toolCallId) return;
+		const validImages = images.filter(img => img.type === "image" && img.data && img.mimeType);
+		for (const key of Array.from(this.#convertedKittyImages.keys())) {
+			if (key.startsWith(`${toolCallId}:`)) {
+				this.#convertedKittyImages.delete(key);
+			}
+		}
+		for (const key of Array.from(this.#kittyConversionsInFlight)) {
+			if (key.startsWith(`${toolCallId}:`)) {
+				this.#kittyConversionsInFlight.delete(key);
+			}
+		}
+		if (validImages.length === 0) {
+			this.#toolImagesByCallId.delete(toolCallId);
+		} else {
+			this.#toolImagesByCallId.set(toolCallId, validImages);
+			this.#convertToolImagesForKitty(toolCallId, validImages);
+		}
+		if (this.#lastMessage) {
+			this.updateContent(this.#lastMessage, { transient: this.#lastUpdateTransient });
+		}
+	}
+
+	#convertToolImagesForKitty(toolCallId: string, images: ImageContent[]): void {
+		if (TERMINAL.imageProtocol !== ImageProtocol.Kitty) return;
+		for (let index = 0; index < images.length; index++) {
+			const image = images[index];
+			if (!image || image.mimeType === "image/png") continue;
+			const key = `${toolCallId}:${index}`;
+			if (this.#convertedKittyImages.has(key) || this.#kittyConversionsInFlight.has(key)) continue;
+			this.#kittyConversionsInFlight.add(key);
+			new Bun.Image(Buffer.from(image.data, "base64"))
+				.png()
+				.toBase64()
+				.then(data => {
+					this.#kittyConversionsInFlight.delete(key);
+					this.#convertedKittyImages.set(key, {
+						type: "image",
+						data,
+						mimeType: "image/png",
+					});
+					if (this.#lastMessage) {
+						this.updateContent(this.#lastMessage, { transient: this.#lastUpdateTransient });
+					}
+					this.onImageUpdate?.();
+				})
+				.catch(() => {
+					this.#kittyConversionsInFlight.delete(key);
+				});
+		}
+	}
+
+	setUsageInfo(usage: Usage): void {
+		this.#usageInfo = usage;
+		if (this.#lastMessage) {
+			this.updateContent(this.#lastMessage, { transient: this.#lastUpdateTransient });
+		}
+	}
+
+	#renderToolImages(): void {
+		const imageEntries = Array.from(this.#toolImagesByCallId.entries()).flatMap(([toolCallId, images]) =>
+			images.map((image, index) => ({ image, key: `${toolCallId}:${index}` })),
+		);
+		if (imageEntries.length === 0) return;
+
+		this.#contentContainer.addChild(new Spacer(1));
+		for (const { image, key } of imageEntries) {
+			const displayImage =
+				TERMINAL.imageProtocol === ImageProtocol.Kitty && image.mimeType !== "image/png"
+					? this.#convertedKittyImages.get(key)
+					: image;
+			if (TERMINAL.imageProtocol && displayImage) {
+				this.#contentContainer.addChild(
+					new Image(
+						displayImage.data,
+						displayImage.mimeType,
+						{ fallbackColor: (text: string) => theme.fg("toolOutput", text) },
+						{ ...resolveImageOptions(), budget: this.imageBudget, imageKey: key },
+					),
+				);
+				continue;
+			}
+			this.#contentContainer.addChild(new Text(theme.fg("toolOutput", `[Image: ${image.mimeType}]`), 1, 0));
+		}
+	}
+
+	#appendThinkingExtensions(contentIndex: number, thinkingIndex: number, text: string): void {
+		for (const renderer of this.thinkingRenderers) {
+			try {
+				const component = renderer(
+					{
+						contentIndex,
+						thinkingIndex,
+						text,
+						requestRender: () => this.onImageUpdate?.(),
+					},
+					theme,
+				);
+				if (component) {
+					this.#contentContainer.addChild(component);
+				}
+			} catch {
+				// Ignore extension renderer failures and keep the original thinking block visible.
+			}
+		}
+	}
+
+	updateContent(message: AssistantMessage, opts?: { transient?: boolean }): void {
+		this.#lastMessage = message;
+		this.#lastUpdateTransient = opts?.transient === true;
+
+		// Clear content container
+		this.#contentContainer.clear();
+
+		const hasVisibleContent = message.content.some(
+			c =>
+				(c.type === "text" && c.text.trim()) ||
+				(!this.hideThinkingBlock && c.type === "thinking" && c.thinking.trim()),
+		);
+
+		// Render content in order
+		let thinkingIndex = 0;
+		for (let i = 0; i < message.content.length; i++) {
+			const content = message.content[i];
+			if (content.type === "text" && content.text.trim()) {
+				// Assistant text messages with no background - trim the text
+				// Set paddingY=0 to avoid extra spacing before tool executions
+				const markdown = new Markdown(content.text.trim(), 1, 0, getMarkdownTheme());
+				markdown.transientRenderCache = this.#lastUpdateTransient;
+				this.#contentContainer.addChild(markdown);
+			} else if (content.type === "thinking" && content.thinking.trim()) {
+				if (this.hideThinkingBlock) {
+					thinkingIndex += 1;
+					continue;
+				}
+				// Add spacing only when another visible assistant content block follows.
+				// This avoids a superfluous blank line before separately-rendered tool execution blocks.
+				const hasVisibleContentAfter = message.content
+					.slice(i + 1)
+					.some(c => (c.type === "text" && c.text.trim()) || (c.type === "thinking" && c.thinking.trim()));
+
+				const thinkingText = content.thinking.trim();
+				// Thinking traces in thinkingText color, italic
+				const thinkingMarkdown = new Markdown(thinkingText, 1, 0, getMarkdownTheme(), {
+					color: (text: string) => theme.fg("thinkingText", text),
+					italic: true,
+				});
+				thinkingMarkdown.transientRenderCache = this.#lastUpdateTransient;
+				this.#contentContainer.addChild(thinkingMarkdown);
+				this.#appendThinkingExtensions(i, thinkingIndex, thinkingText);
+				thinkingIndex += 1;
+				if (hasVisibleContentAfter) {
+					this.#contentContainer.addChild(new Spacer(1));
+				}
+			}
+		}
+
+		this.#renderToolImages();
+		// Check if aborted - show after partial content
+		// But only if there are no tool calls (tool execution components will show the error)
+		const hasToolCalls = message.content.some(c => c.type === "toolCall");
+		if (!hasToolCalls) {
+			if (message.stopReason === "aborted" && shouldRenderAbortReason(message.errorMessage)) {
+				const abortMessage = resolveAbortLabel(message.errorMessage);
+				if (hasVisibleContent) {
+					this.#contentContainer.addChild(new Spacer(1));
+				} else {
+					this.#contentContainer.addChild(new Spacer(1));
+				}
+				this.#contentContainer.addChild(new Text(theme.fg("error", abortMessage), 1, 0));
+			} else if (message.stopReason === "error" && !this.#errorPinned) {
+				this.#appendErrorBlock(message.errorMessage || "Unknown error");
+			}
+		}
+		if (
+			message.errorMessage &&
+			shouldRenderAbortReason(message.errorMessage) &&
+			message.stopReason !== "aborted" &&
+			message.stopReason !== "error"
+		) {
+			this.#appendErrorBlock(message.errorMessage);
+		}
+
+		// Token usage metadata
+		if (settings.get("display.showTokenUsage") && this.#usageInfo) {
+			const usage = this.#usageInfo;
+			const totalInput = usage.input + usage.cacheWrite;
+			const parts: string[] = [];
+			parts.push(`${theme.icon.input} ${formatNumber(totalInput)}`);
+			parts.push(`${theme.icon.output} ${formatNumber(usage.output)}`);
+			if (usage.cacheRead > 0) {
+				parts.push(`cache: ${formatNumber(usage.cacheRead)}`);
+			}
+			this.#contentContainer.addChild(new Spacer(1));
+			this.#contentContainer.addChild(new Text(theme.fg("dim", parts.join("  ")), 1, 0));
+		}
+	}
+}

package/src/modes/components/bash-execution.ts

@@ -0,0 +1,220 @@
+/**
+ * Component for displaying bash command execution with streaming output.
+ */
+
+import {
+	Container,
+	Ellipsis,
+	ImageProtocol,
+	type Loader,
+	TERMINAL,
+	Text,
+	type TUI,
+	truncateToWidth,
+	visibleWidth,
+} from './stubs/tui/index.ts';
+import { sanitizeText } from "@oh-my-pi/pi-utils";
+import { theme } from "../../modes/theme/theme";
+import type { TruncationMeta } from "../../tools/output-meta";
+import { getSixelLineMask, isSixelPassthroughEnabled, sanitizeWithOptionalSixelPassthrough } from "../../utils/sixel";
+import {
+	buildExecutionFrame,
+	buildStatusFooter,
+	createCollapsedPreview,
+	type ExecutionStatus,
+	resolveExecutionStatus,
+} from "./execution-shared";
+
+// Preview line limit when not expanded (matches tool execution behavior)
+const PREVIEW_LINES = 20;
+const STREAMING_LINE_CAP = PREVIEW_LINES * 5;
+const MAX_DISPLAY_LINE_CHARS = 4000;
+// Minimum interval between processing incoming chunks for display (ms).
+// Chunks arriving faster than this are accumulated and processed in one batch.
+const CHUNK_THROTTLE_MS = 50;
+
+export class BashExecutionComponent extends Container {
+	#outputLines: string[] = [];
+	#status: ExecutionStatus = "running";
+	#exitCode: number | undefined = undefined;
+	#loader: Loader;
+	#truncation?: TruncationMeta;
+	#expanded = false;
+	#displayDirty = false;
+	#chunkGate = false;
+	#contentContainer: Container;
+	#headerText: Text;
+
+	constructor(
+		private readonly command: string,
+		ui: TUI,
+		excludeFromContext = false,
+	) {
+		super();
+
+		// Use dim border for excluded-from-context commands (!! prefix)
+		const colorKey = excludeFromContext ? "dim" : "bashMode";
+		const { contentContainer, loader } = buildExecutionFrame(this, ui, colorKey);
+		this.#contentContainer = contentContainer;
+		this.#loader = loader;
+
+		// Command header
+		this.#headerText = new Text(theme.fg(colorKey, theme.bold(`$ ${command}`)), 1, 0);
+		this.#contentContainer.addChild(this.#headerText);
+		this.#contentContainer.addChild(this.#loader);
+	}
+
+	/**
+	 * Set whether the output is expanded (shows full output) or collapsed (preview only).
+	 */
+	setExpanded(expanded: boolean): void {
+		this.#expanded = expanded;
+		this.#updateDisplay();
+	}
+
+	override invalidate(): void {
+		super.invalidate();
+		this.#displayDirty = false;
+		this.#updateDisplay();
+	}
+
+	appendOutput(chunk: string): void {
+		// During high-throughput output (e.g. seq 1 500M), processing every
+		// chunk would saturate the event loop. Instead, accept one chunk per
+		// throttle window and drop the rest — the OutputSink captures everything
+		// for the artifact, and setComplete() replaces with the final output.
+		if (this.#chunkGate) return;
+		this.#chunkGate = true;
+		setTimeout(() => {
+			this.#chunkGate = false;
+		}, CHUNK_THROTTLE_MS);
+
+		const incomingLines = chunk.split("\n");
+		if (this.#outputLines.length > 0 && incomingLines.length > 0) {
+			const lastIndex = this.#outputLines.length - 1;
+			const mergedLines = [`${this.#outputLines[lastIndex]}${incomingLines[0]}`, ...incomingLines.slice(1)];
+			const clampedMergedLines = this.#clampLinesPreservingSixel(mergedLines);
+			this.#outputLines[lastIndex] = clampedMergedLines[0] ?? "";
+			this.#outputLines.push(...clampedMergedLines.slice(1));
+		} else {
+			this.#outputLines.push(...this.#clampLinesPreservingSixel(incomingLines));
+		}
+
+		// Cap stored lines during streaming to avoid unbounded memory growth
+		if (this.#outputLines.length > STREAMING_LINE_CAP) {
+			this.#outputLines = this.#outputLines.slice(-STREAMING_LINE_CAP);
+		}
+
+		this.#displayDirty = true;
+	}
+
+	setComplete(
+		exitCode: number | undefined,
+		cancelled: boolean,
+		options?: { output?: string; truncation?: TruncationMeta },
+	): void {
+		this.#exitCode = exitCode;
+		this.#status = resolveExecutionStatus(exitCode, cancelled);
+		this.#truncation = options?.truncation;
+		if (options?.output !== undefined) {
+			this.#setOutput(options.output);
+		}
+
+		// Stop loader
+		this.#loader.stop();
+
+		this.#updateDisplay();
+	}
+
+	override render(width: number): readonly string[] {
+		if (this.#displayDirty) {
+			this.#displayDirty = false;
+			this.#updateDisplay();
+		}
+		return super.render(width);
+	}
+
+	#updateDisplay(): void {
+		const availableLines = this.#outputLines;
+
+		// Apply preview truncation based on expanded state
+		const previewLogicalLines = availableLines.slice(-PREVIEW_LINES);
+		const hiddenLineCount = availableLines.length - previewLogicalLines.length;
+		const sixelLineMask =
+			TERMINAL.imageProtocol === ImageProtocol.Sixel && isSixelPassthroughEnabled()
+				? getSixelLineMask(availableLines)
+				: undefined;
+		const hasSixelOutput = sixelLineMask?.some(Boolean) ?? false;
+
+		// Rebuild content container
+		this.#contentContainer.clear();
+
+		// Command header
+		this.#contentContainer.addChild(this.#headerText);
+
+		// Output
+		if (availableLines.length > 0) {
+			if (this.#expanded || hasSixelOutput) {
+				const displayText = availableLines
+					.map((line, index) => (sixelLineMask?.[index] ? line : theme.fg("muted", line)))
+					.join("\n");
+				this.#contentContainer.addChild(new Text(`\n${displayText}`, 1, 0));
+			} else {
+				// Use shared visual truncation utility, recomputed per render width
+				const styledOutput = previewLogicalLines.map(line => theme.fg("muted", line)).join("\n");
+				this.#contentContainer.addChild(createCollapsedPreview(`\n${styledOutput}`, PREVIEW_LINES));
+			}
+		}
+
+		// Loader or status
+		if (this.#status === "running") {
+			this.#contentContainer.addChild(this.#loader);
+		} else {
+			const footer = buildStatusFooter({
+				status: this.#status,
+				exitCode: this.#exitCode,
+				truncation: this.#truncation,
+				hiddenLineCount,
+				suppressHiddenCount: hasSixelOutput,
+			});
+			if (footer) this.#contentContainer.addChild(footer);
+		}
+	}
+
+	#clampDisplayLine(line: string): string {
+		const visible = visibleWidth(line);
+		if (visible <= MAX_DISPLAY_LINE_CHARS) {
+			return line;
+		}
+		const omitted = visible - MAX_DISPLAY_LINE_CHARS;
+		return `${truncateToWidth(line, MAX_DISPLAY_LINE_CHARS, Ellipsis.Omit)}… [${omitted} visible columns omitted]`;
+	}
+
+	#clampLinesPreservingSixel(lines: string[]): string[] {
+		if (lines.length === 0) return [];
+		const sixelLineMask = getSixelLineMask(lines);
+		if (!sixelLineMask.some(Boolean)) {
+			return lines.map(line => this.#clampDisplayLine(line));
+		}
+		return lines.map((line, index) => (sixelLineMask[index] ? line : this.#clampDisplayLine(line)));
+	}
+
+	#setOutput(output: string): void {
+		const clean = sanitizeWithOptionalSixelPassthrough(output, sanitizeText);
+		this.#outputLines = clean ? this.#clampLinesPreservingSixel(clean.split("\n")) : [];
+	}
+
+	/**
+	 * Get the raw output for creating BashExecutionMessage.
+	 */
+	getOutput(): string {
+		return this.#outputLines.join("\n");
+	}
+
+	/**
+	 * Get the command that was executed.
+	 */
+	getCommand(): string {
+		return this.command;
+	}
+}

package/src/modes/components/bordered-loader.ts

@@ -0,0 +1,41 @@
+import { CancellableLoader, Container, Spacer, Text, type TUI } from './stubs/tui/index.ts';
+import type { Theme } from "../../modes/theme/theme";
+import { DynamicBorder } from "./dynamic-border";
+
+/** Loader wrapped with borders for hook UI */
+export class BorderedLoader extends Container {
+	#loader: CancellableLoader;
+
+	constructor(tui: TUI, theme: Theme, message: string) {
+		super();
+		const borderColor = (s: string) => theme.fg("border", s);
+		this.addChild(new DynamicBorder(borderColor));
+		this.#loader = new CancellableLoader(
+			tui,
+			s => theme.fg("accent", s),
+			s => theme.fg("muted", s),
+			message,
+		);
+		this.addChild(this.#loader);
+		this.addChild(new Spacer(1));
+		this.addChild(new Text(theme.fg("muted", "esc cancel"), 1, 0));
+		this.addChild(new Spacer(1));
+		this.addChild(new DynamicBorder(borderColor));
+	}
+
+	get signal(): AbortSignal {
+		return this.#loader.signal;
+	}
+
+	set onAbort(fn: (() => void) | undefined) {
+		this.#loader.onAbort = fn;
+	}
+
+	handleInput(data: string): void {
+		this.#loader.handleInput(data);
+	}
+
+	dispose(): void {
+		this.#loader.dispose();
+	}
+}

package/src/modes/components/branch-summary-message.ts

@@ -0,0 +1,45 @@
+import { Box, Markdown, Spacer, Text } from './stubs/tui/index.ts';
+import { getMarkdownTheme, theme } from "../../modes/theme/theme";
+import type { BranchSummaryMessage } from "../../session/messages";
+
+/**
+ * Component that renders a branch summary message with collapsed/expanded state.
+ * Uses same background color as hook messages for visual consistency.
+ */
+export class BranchSummaryMessageComponent extends Box {
+	#expanded = false;
+
+	constructor(private readonly message: BranchSummaryMessage) {
+		super(1, 1, t => theme.bg("customMessageBg", t));
+		this.#updateDisplay();
+	}
+
+	setExpanded(expanded: boolean): void {
+		this.#expanded = expanded;
+		this.#updateDisplay();
+	}
+
+	override invalidate(): void {
+		super.invalidate();
+		this.#updateDisplay();
+	}
+
+	#updateDisplay(): void {
+		this.clear();
+
+		const label = theme.fg("customMessageLabel", theme.bold("[branch]"));
+		this.addChild(new Text(label, 0, 0));
+		this.addChild(new Spacer(1));
+
+		if (this.#expanded) {
+			const header = "**Branch Summary**\n\n";
+			this.addChild(
+				new Markdown(header + this.message.summary, 0, 0, getMarkdownTheme(), {
+					color: (text: string) => theme.fg("customMessageText", text),
+				}),
+			);
+		} else {
+			this.addChild(new Text(theme.fg("customMessageText", "Branch summary (ctrl+o to expand)"), 0, 0));
+		}
+	}
+}