@oh-my-pi/pi-coding-agent 16.1.13 → 16.1.14

package/src/modes/components/chat-transcript-builder.ts

@@ -13,8 +13,7 @@
  */
 import type { AgentMessage, AgentTool } from "@oh-my-pi/pi-agent-core";
 import type { Usage } from "@oh-my-pi/pi-ai";
-import { Text, type TUI } from "@oh-my-pi/pi-tui";
-import { formatBytes, formatDuration } from "@oh-my-pi/pi-utils";
+import type { TUI } from "@oh-my-pi/pi-tui";
 import type { AdvisorMessageDetails } from "../../advisor";
 import { COLLAB_PROMPT_MESSAGE_TYPE, type CollabPromptDetails } from "../../collab/protocol";
 import { settings } from "../../config/settings";
@@ -22,16 +21,20 @@ import type { MessageRenderer } from "../../extensibility/extensions/types";
 import {
 	BACKGROUND_TAN_DISPATCH_MESSAGE_TYPE,
 	type CustomMessage,
-	isSilentAbort,
 	LSP_LATE_DIAGNOSTIC_MESSAGE_TYPE,
-	resolveAbortLabel,
 	SKILL_PROMPT_MESSAGE_TYPE,
 	type SkillPromptDetails,
 } from "../../session/messages";
 import type { SessionMessageEntry } from "../../session/session-entries";
-import { createIrcMessageCard } from "../../tools/irc";
-import { canonicalizeMessage } from "../../utils/thinking-display";
 import { theme } from "../theme/theme";
+import {
+	assistantHasVisibleContent,
+	buildAsyncResultBlock,
+	buildFileMentionBlock,
+	buildIrcMessageCard,
+	normalizeToolArgs,
+	resolveAssistantErrorMessage,
+} from "../utils/transcript-render-helpers";
 import { createAdvisorMessageCard } from "./advisor-message";
 import { AssistantMessageComponent } from "./assistant-message";
 import { createBackgroundTanDispatchBlock } from "./background-tan-message";
@@ -49,7 +52,7 @@ import { type LateDiagnosticsFile, LateDiagnosticsMessageComponent } from "./lat
 import { ReadToolGroupComponent, readArgsHaveTarget, readArgsTargetInternalUrl } from "./read-tool-group";
 import { SkillMessageComponent } from "./skill-message";
 import { ToolExecutionComponent } from "./tool-execution";
-import { TranscriptBlock, TranscriptContainer } from "./transcript-container";
+import { TranscriptContainer } from "./transcript-container";
 import { createUsageRowBlock } from "./usage-row";
 import { UserMessageComponent } from "./user-message";
 
@@ -218,27 +221,9 @@ export class ChatTranscriptBuilder {
 				break;
 			}
 			case "fileMention": {
-				const block = new TranscriptBlock();
-				for (const file of message.files) {
-					let suffix: string;
-					if (file.skippedReason === "tooLarge") {
-						const size = typeof file.byteSize === "number" ? formatBytes(file.byteSize) : "unknown size";
-						suffix = `(skipped: ${size})`;
-					} else {
-						suffix = file.image
-							? "(image)"
-							: file.lineCount === undefined
-								? "(unknown lines)"
-								: `(${file.lineCount} lines)`;
-					}
-					const text = `${theme.fg("dim", `${theme.tree.last} `)}${theme.fg("muted", "Read")} ${theme.fg(
-						"accent",
-						file.path,
-					)} ${theme.fg("dim", suffix)}`;
-					// Indent one column to match the transcript's other rows (the viewer renders
-					// body rows without an outer gutter; rows own their left pad).
-					block.addChild(new Text(text, 1, 0));
-				}
+				// Indent one column to match the transcript's other rows (the viewer renders
+				// body rows without an outer gutter; rows own their left pad).
+				const block = buildFileMentionBlock(message.files, 1);
 				if (block.children.length > 0) this.container.addChild(block);
 				break;
 			}
@@ -266,24 +251,14 @@ export class ChatTranscriptBuilder {
 			this.#lastAssistantUsage = message.usage;
 		}
 
-		const hasVisibleAssistantContent = message.content.some(
-			content =>
-				(content.type === "text" && canonicalizeMessage(content.text)) ||
-				(content.type === "thinking" && canonicalizeMessage(content.thinking)),
-		);
+		const hasVisibleAssistantContent = assistantHasVisibleContent(message);
 		if (hasVisibleAssistantContent) {
 			// New visible turn content closes the current read run (mirrors rebuild).
 			this.#readGroup?.seal();
 			this.#readGroup = null;
 		}
 
-		const isAbortedSilently = message.stopReason === "aborted" && isSilentAbort(message.errorMessage);
-		const hasErrorStop = !isAbortedSilently && (message.stopReason === "aborted" || message.stopReason === "error");
-		const errorMessage = hasErrorStop
-			? message.stopReason === "aborted"
-				? resolveAbortLabel(message.errorMessage)
-				: message.errorMessage || "Error"
-			: null;
+		const { hasErrorStop, errorMessage } = resolveAssistantErrorMessage(message);
 
 		for (const content of message.content) {
 			if (content.type !== "toolCall") continue;
@@ -303,10 +278,7 @@ export class ChatTranscriptBuilder {
 						content.id,
 					);
 				} else {
-					const normalizedArgs =
-						content.arguments && typeof content.arguments === "object" && !Array.isArray(content.arguments)
-							? (content.arguments as Record<string, unknown>)
-							: {};
+					const normalizedArgs = normalizeToolArgs(content.arguments);
 					this.#readArgs.set(content.id, normalizedArgs);
 				}
 				continue;
@@ -373,42 +345,7 @@ export class ChatTranscriptBuilder {
 	#appendCustomMessage(message: Extract<AgentMessage, { role: "custom" | "hookMessage" }>): void {
 		if (!message.display) return;
 		if (message.customType === "async-result") {
-			const details = (
-				message as CustomMessage<{
-					jobId?: string;
-					type?: "bash" | "task";
-					label?: string;
-					durationMs?: number;
-					jobs?: Array<{ jobId?: string; type?: "bash" | "task"; label?: string; durationMs?: number }>;
-				}>
-			).details;
-			const jobs =
-				details?.jobs && details.jobs.length > 0
-					? details.jobs
-					: [
-							{
-								jobId: details?.jobId,
-								type: details?.type,
-								label: details?.label,
-								durationMs: details?.durationMs,
-							},
-						];
-			const block = new TranscriptBlock();
-			for (const job of jobs) {
-				const jobId = job.jobId ?? "unknown";
-				const typeLabel = job.type ? `[${job.type}]` : "[job]";
-				const duration = typeof job.durationMs === "number" ? formatDuration(job.durationMs) : undefined;
-				const line = [
-					theme.fg("success", `${theme.status.done} Background job completed`),
-					theme.fg("dim", typeLabel),
-					theme.fg("accent", jobId),
-					duration ? theme.fg("dim", `(${duration})`) : undefined,
-				]
-					.filter(Boolean)
-					.join(" ");
-				block.addChild(new Text(line, 1, 0));
-			}
-			this.container.addChild(block);
+			this.container.addChild(buildAsyncResultBlock(message));
 			return;
 		}
 		if (message.customType === LSP_LATE_DIAGNOSTIC_MESSAGE_TYPE) {
@@ -433,28 +370,7 @@ export class ChatTranscriptBuilder {
 			message.customType === "irc:autoreply" ||
 			message.customType === "irc:relay"
 		) {
-			const details = (
-				message as CustomMessage<{ from?: string; to?: string; message?: string; body?: string; replyTo?: string }>
-			).details;
-			const kind =
-				message.customType === "irc:incoming"
-					? ("incoming" as const)
-					: message.customType === "irc:autoreply"
-						? ("autoreply" as const)
-						: ("relay" as const);
-			const card = createIrcMessageCard(
-				{
-					kind,
-					from: details?.from,
-					to: details?.to,
-					body: kind === "incoming" ? details?.message : details?.body,
-					replyTo: details?.replyTo,
-					timestamp: message.timestamp,
-				},
-				() => this.#expanded,
-				theme,
-			);
-			this.container.addChild(card);
+			this.container.addChild(buildIrcMessageCard(message, () => this.#expanded));
 			return;
 		}
 		if (message.customType === "advisor") {

package/src/modes/components/custom-editor.ts

@@ -1,3 +1,4 @@
+import type { ImageContent } from "@oh-my-pi/pi-ai";
 import { addKeyAliases, canonicalKeyId, Editor, type KeyId, parseKey, parseKittySequence } from "@oh-my-pi/pi-tui";
 import type { AppKeybinding } from "../../config/keybindings";
 import { isSettingsInitialized, settings } from "../../config/settings";
@@ -163,6 +164,24 @@ export function extractBracketedImagePastePath(data: string): string | undefined
 export class CustomEditor extends Editor {
 	imageLinks?: readonly (string | undefined)[];
 
+	/** Draft images pasted into the composer, consumed on submit. Co-located with
+	 *  {@link imageLinks} so every piece of draft-image state lives on the editor. */
+	pendingImages: ImageContent[] = [];
+	/** Per-image source links (file:// targets) parallel to {@link pendingImages};
+	 *  `undefined` entries are images without a backing reference yet. */
+	pendingImageLinks: (string | undefined)[] = [];
+
+	/** Clear the composer draft: optionally commit `historyText` to history, then
+	 *  reset the editor text and all pending draft-image state. The shared tail of
+	 *  every "message submitted" path; pass no argument for a plain discard. */
+	clearDraft(historyText?: string): void {
+		if (historyText !== undefined) this.addToHistory(historyText);
+		this.setText("");
+		this.imageLinks = undefined;
+		this.pendingImages = [];
+		this.pendingImageLinks = [];
+	}
+
 	/** Treat image/paste markers as indivisible: a stray backspace deletes the whole token
 	 *  instead of corrupting `[Paste #1, +30 lines]` into plain text. */
 	override atomicTokenPattern = PLACEHOLDER_REGEX;

package/src/modes/components/extensions/extension-dashboard.ts

@@ -26,6 +26,7 @@ import { Settings } from "../../../config/settings";
 import { DynamicBorder } from "../../../modes/components/dynamic-border";
 import { theme } from "../../../modes/theme/theme";
 import { matchesAppInterrupt } from "../../../modes/utils/keybinding-matchers";
+import { handleTabSwitchKey, padLinesToHeight } from "../selector-helpers";
 import { ExtensionList } from "./extension-list";
 import { InspectorPanel } from "./inspector-panel";
 import {
@@ -145,13 +146,8 @@ export class ExtensionDashboard extends Container {
 		}
 		const lines = super.render(width);
 		// Pad to the full viewport so the dashboard covers the screen instead of
-		// letting the transcript peek through below it. Copy before padding — the
-		// container's render result is component-owned and must not be mutated.
-		const rows = this.#terminalRows();
-		if (lines.length >= rows) return lines;
-		const padded = lines.slice();
-		while (padded.length < rows) padded.push("");
-		return padded;
+		// letting the transcript peek through below it.
+		return padLinesToHeight(lines, this.#terminalRows());
 	}
 
 	#buildLayout(): void {
@@ -339,12 +335,7 @@ export class ExtensionDashboard extends Container {
 		}
 
 		// Tab/Shift+Tab or Left/Right: Cycle through tabs
-		if (matchesKey(data, "tab") || matchesKey(data, "right")) {
-			this.#switchTab(1);
-			return;
-		}
-		if (matchesKey(data, "shift+tab") || matchesKey(data, "left")) {
-			this.#switchTab(-1);
+		if (handleTabSwitchKey(data, direction => this.#switchTab(direction))) {
 			return;
 		}
 

package/src/modes/components/extensions/extension-list.ts

@@ -5,18 +5,11 @@
  * that toggles the entire provider. All items below are dimmed when the
  * master switch is off.
  */
-import {
-	type Component,
-	extractPrintableText,
-	matchesKey,
-	padding,
-	ScrollView,
-	truncateToWidth,
-	visibleWidth,
-} from "@oh-my-pi/pi-tui";
+import { type Component, matchesKey, padding, truncateToWidth, visibleWidth } from "@oh-my-pi/pi-tui";
 import { isProviderEnabled } from "../../../discovery";
 import { theme } from "../../../modes/theme/theme";
 import { matchesSelectDown, matchesSelectUp } from "../../utils/keybinding-matchers";
+import { clampSelection, contentRowWidth, renderScrollableList, searchableChar } from "../selector-helpers";
 import { applyFilter } from "./state-manager";
 import type { Extension, ExtensionKind, ExtensionState } from "./types";
 
@@ -136,8 +129,7 @@ export class ExtensionList implements Component {
 		const endIdx = Math.min(startIdx + this.#maxVisible, this.#listItems.length);
 
 		// Reserve the rightmost column for the scrollbar when overflowing
-		const overflow = this.#listItems.length > this.#maxVisible;
-		const rowWidth = Math.max(0, width - (overflow ? 1 : 0));
+		const rowWidth = contentRowWidth(width, this.#listItems.length, this.#maxVisible);
 
 		// Render visible items
 		const rows: string[] = [];
@@ -154,14 +146,13 @@ export class ExtensionList implements Component {
 			}
 		}
 
-		const sv = new ScrollView(rows, {
-			height: rows.length,
-			scrollbar: "auto",
-			totalRows: this.#listItems.length,
-			theme: { track: t => theme.fg("muted", t), thumb: t => theme.fg("accent", t) },
-		});
-		sv.setScrollOffset(this.#scrollOffset);
-		lines.push(...sv.render(width));
+		lines.push(
+			...renderScrollableList(rows, {
+				width,
+				totalRows: this.#listItems.length,
+				scrollOffset: this.#scrollOffset,
+			}),
+		);
 
 		return lines;
 	}
@@ -391,21 +382,9 @@ export class ExtensionList implements Component {
 	}
 
 	#clampSelection(): void {
-		if (this.#listItems.length === 0) {
-			this.#selectedIndex = 0;
-			this.#scrollOffset = 0;
-			return;
-		}
-
-		this.#selectedIndex = Math.min(this.#selectedIndex, this.#listItems.length - 1);
-		this.#selectedIndex = Math.max(0, this.#selectedIndex);
-
-		// Adjust scroll offset
-		if (this.#selectedIndex < this.#scrollOffset) {
-			this.#scrollOffset = this.#selectedIndex;
-		} else if (this.#selectedIndex >= this.#scrollOffset + this.#maxVisible) {
-			this.#scrollOffset = this.#selectedIndex - this.#maxVisible + 1;
-		}
+		const next = clampSelection(this.#selectedIndex, this.#scrollOffset, this.#listItems.length, this.#maxVisible);
+		this.#selectedIndex = next.selectedIndex;
+		this.#scrollOffset = next.scrollOffset;
 	}
 
 	handleInput(data: string): void {
@@ -462,16 +441,9 @@ export class ExtensionList implements Component {
 		}
 
 		// Printable characters -> search
-		const printableText = extractPrintableText(data);
-		if (printableText && printableText.length === 1) {
-			const printableCharCode = printableText.charCodeAt(0);
-			if (printableCharCode > 32 && printableCharCode < 127) {
-				if (printableText === "j" || printableText === "k") {
-					return;
-				}
-				this.setSearchQuery(this.#searchQuery + printableText);
-				return;
-			}
+		const char = searchableChar(data);
+		if (char !== null) {
+			this.setSearchQuery(this.#searchQuery + char);
 		}
 	}
 

package/src/modes/components/history-search.ts

@@ -5,7 +5,6 @@ import {
 	Input,
 	matchesKey,
 	padding,
-	ScrollView,
 	Spacer,
 	Text,
 	truncateToWidth,
@@ -22,6 +21,7 @@ import {
 import type { HistoryEntry, HistoryStorage } from "../../session/history-storage";
 import { DynamicBorder } from "./dynamic-border";
 import { rawKeyHint } from "./keybinding-hints";
+import { centeredWindow, contentRowWidth, renderScrollableList } from "./selector-helpers";
 
 /** Visible result rows; also the jump distance for PageUp/PageDown. */
 const MAX_VISIBLE = 10;
@@ -110,14 +110,9 @@ class HistoryResultsList implements Component {
 		const cursorSymbol = `${theme.nav.cursor} `;
 		const gutterWidth = visibleWidth(cursorSymbol);
 
-		const startIndex = Math.max(
-			0,
-			Math.min(this.#selectedIndex - Math.floor(this.#maxVisible / 2), this.#results.length - this.#maxVisible),
-		);
-		const endIndex = Math.min(startIndex + this.#maxVisible, this.#results.length);
+		const { startIndex, endIndex } = centeredWindow(this.#selectedIndex, this.#results.length, this.#maxVisible);
 
-		const overflow = this.#results.length > this.#maxVisible;
-		const rowWidth = Math.max(0, width - (overflow ? 1 : 0));
+		const rowWidth = contentRowWidth(width, this.#results.length, this.#maxVisible);
 		const rows: string[] = [];
 
 		for (let i = startIndex; i < endIndex; i++) {
@@ -148,14 +143,7 @@ class HistoryResultsList implements Component {
 			);
 		}
 
-		const sv = new ScrollView(rows, {
-			height: rows.length,
-			scrollbar: "auto",
-			totalRows: this.#results.length,
-			theme: { track: t => theme.fg("muted", t), thumb: t => theme.fg("accent", t) },
-		});
-		sv.setScrollOffset(startIndex);
-		lines.push(...sv.render(width));
+		lines.push(...renderScrollableList(rows, { width, totalRows: this.#results.length, scrollOffset: startIndex }));
 		return lines;
 	}
 }

package/src/modes/components/selector-helpers.ts

@@ -0,0 +1,129 @@
+/**
+ * Shared scaffolding for the TUI selector/list/dashboard components: viewport
+ * windowing, scrollbar-aware row widths, ScrollView rendering, selection
+ * clamping, search-character classification, tab-cycling keys, and full-screen
+ * padding. Behaviour is identical to the per-component copies these helpers
+ * replace.
+ */
+import { extractPrintableText, matchesKey, ScrollView } from "@oh-my-pi/pi-tui";
+import { theme } from "../theme/theme";
+
+/**
+ * Render `rows` through a {@link ScrollView} with the shared list theme (muted
+ * track / accent thumb) and an "auto" scrollbar, positioned at `scrollOffset`.
+ * Returns the rendered lines for the caller to append to its output.
+ */
+export function renderScrollableList(
+	rows: readonly string[],
+	options: { width: number; totalRows: number; scrollOffset: number },
+): readonly string[] {
+	const sv = new ScrollView(rows, {
+		height: rows.length,
+		scrollbar: "auto",
+		totalRows: options.totalRows,
+		theme: { track: t => theme.fg("muted", t), thumb: t => theme.fg("accent", t) },
+	});
+	sv.setScrollOffset(options.scrollOffset);
+	return sv.render(options.width);
+}
+
+/**
+ * Center a viewport window of `maxVisible` rows on `selectedIndex` within a
+ * list of `total` rows, clamped to valid bounds. Used by the selection-centered
+ * list panes (history search, tree selector).
+ */
+export function centeredWindow(
+	selectedIndex: number,
+	total: number,
+	maxVisible: number,
+): { startIndex: number; endIndex: number } {
+	const startIndex = Math.max(0, Math.min(selectedIndex - Math.floor(maxVisible / 2), total - maxVisible));
+	const endIndex = Math.min(startIndex + maxVisible, total);
+	return { startIndex, endIndex };
+}
+
+/**
+ * Width available for row content, reserving the rightmost column for the
+ * scrollbar when the list overflows its visible window.
+ */
+export function contentRowWidth(width: number, total: number, maxVisible: number): number {
+	const overflow = total > maxVisible;
+	return Math.max(0, width - (overflow ? 1 : 0));
+}
+
+/**
+ * Clamp `selectedIndex` into `[0, total)` and nudge `scrollOffset` so the
+ * selection stays within the visible window of `maxVisible` rows. Returns the
+ * adjusted pair; on an empty list both reset to 0.
+ */
+export function clampSelection(
+	selectedIndex: number,
+	scrollOffset: number,
+	total: number,
+	maxVisible: number,
+): { selectedIndex: number; scrollOffset: number } {
+	if (total === 0) {
+		return { selectedIndex: 0, scrollOffset: 0 };
+	}
+
+	const selected = Math.max(0, Math.min(selectedIndex, total - 1));
+
+	let scroll = scrollOffset;
+	if (selected < scroll) {
+		scroll = selected;
+	} else if (selected >= scroll + maxVisible) {
+		scroll = selected - maxVisible + 1;
+	}
+
+	return { selectedIndex: selected, scrollOffset: scroll };
+}
+
+/**
+ * Classify a key event for search-query text entry. Returns the single
+ * printable character to append to the query, or `null` when the key is not a
+ * searchable character: non-printable, multi-byte, or a reserved `j`/`k`
+ * navigation key.
+ */
+export function searchableChar(data: string): string | null {
+	const printableText = extractPrintableText(data);
+	if (printableText && printableText.length === 1) {
+		const printableCharCode = printableText.charCodeAt(0);
+		if (printableCharCode > 32 && printableCharCode < 127) {
+			if (printableText === "j" || printableText === "k") {
+				return null;
+			}
+			return printableText;
+		}
+	}
+	return null;
+}
+
+/**
+ * Handle the shared tab-cycling keys: Tab/Right advance to the next tab,
+ * Shift+Tab/Left to the previous. Invokes `switchTab` with the direction and
+ * returns true when the key was consumed.
+ */
+export function handleTabSwitchKey(data: string, switchTab: (direction: 1 | -1) => void): boolean {
+	if (matchesKey(data, "tab") || matchesKey(data, "right")) {
+		switchTab(1);
+		return true;
+	}
+	if (matchesKey(data, "shift+tab") || matchesKey(data, "left")) {
+		switchTab(-1);
+		return true;
+	}
+	return false;
+}
+
+/**
+ * Pad `lines` with blank rows up to `rows` so a full-screen overlay covers the
+ * viewport instead of letting the transcript peek through below it. Copies
+ * before padding — the source array may be component-owned and must not be
+ * mutated.
+ */
+export function padLinesToHeight(lines: readonly string[], rows: number): readonly string[] {
+	if (lines.length >= rows) return lines;
+	const padded = lines.slice();
+	while (padded.length < rows) padded.push("");
+	return padded;
+}

package/src/modes/components/settings-selector.ts

@@ -473,15 +473,17 @@ export class SettingsSelectorComponent implements Component {
 			return true;
 		}
 
-		if (event.wheel !== null) {
-			list?.handleWheel(event.wheel);
-			return true;
-		}
-
 		const tabLine = event.row - this.#tabRowStart;
 		const overTabs = tabLine >= 0 && tabLine < this.#tabRowCount;
 		const overContent = contentLine >= 0 && contentLine < this.#contentRowCount;
 
+		if (event.wheel !== null) {
+			if (overContent) {
+				list?.handleWheelAt(event.wheel, contentLine, innerCol);
+			}
+			return true;
+		}
+
 		if (event.motion) {
 			const hovered = overTabs ? this.#tabBar.tabAt(tabLine, innerCol) : undefined;
 			this.#tabBar.setHoverTab(hovered && !hovered.muted ? hovered.id : null);

package/src/modes/components/tree-selector.ts

@@ -6,7 +6,6 @@ import {
 	fuzzyMatch,
 	Input,
 	matchesKey,
-	ScrollView,
 	Spacer,
 	Text,
 	TruncatedText,
@@ -20,6 +19,7 @@ import { shortenPath } from "../../tools/render-utils";
 import { toPathList } from "../../tools/search";
 import { canonicalizeMessage } from "../../utils/thinking-display";
 import { DynamicBorder } from "./dynamic-border";
+import { centeredWindow, contentRowWidth, renderScrollableList } from "./selector-helpers";
 
 /** Gutter info: position (displayIndent where connector was) and whether to show │ */
 interface GutterInfo {
@@ -475,14 +475,11 @@ class TreeList implements Component {
 			return lines;
 		}
 
-		const startIndex = Math.max(
-			0,
-			Math.min(
-				this.#selectedIndex - Math.floor(this.maxVisibleLines / 2),
-				this.#filteredNodes.length - this.maxVisibleLines,
-			),
+		const { startIndex, endIndex } = centeredWindow(
+			this.#selectedIndex,
+			this.#filteredNodes.length,
+			this.maxVisibleLines,
 		);
-		const endIndex = Math.min(startIndex + this.maxVisibleLines, this.#filteredNodes.length);
 
 		// Cap the per-row gutter prefix so a content budget is always preserved.
 		// Each indent level renders as 3 cells; deep branching would otherwise eat the
@@ -494,8 +491,7 @@ class TreeList implements Component {
 		const contentReserve = Math.max(MIN_CONTENT_COLS, Math.floor(width / 2));
 		const maxIndentLevels = Math.max(1, Math.floor((width - contentReserve - OVERHEAD_COLS) / 3));
 
-		const overflow = this.#filteredNodes.length > this.maxVisibleLines;
-		const rowWidth = Math.max(0, width - (overflow ? 1 : 0));
+		const rowWidth = contentRowWidth(width, this.#filteredNodes.length, this.maxVisibleLines);
 		const rows: string[] = [];
 
 		for (let i = startIndex; i < endIndex; i++) {
@@ -584,14 +580,13 @@ class TreeList implements Component {
 			rows.push(truncateToWidth(line, rowWidth));
 		}
 
-		const sv = new ScrollView(rows, {
-			height: rows.length,
-			scrollbar: "auto",
-			totalRows: this.#filteredNodes.length,
-			theme: { track: t => theme.fg("muted", t), thumb: t => theme.fg("accent", t) },
-		});
-		sv.setScrollOffset(startIndex);
-		lines.push(...sv.render(width));
+		lines.push(
+			...renderScrollableList(rows, {
+				width,
+				totalRows: this.#filteredNodes.length,
+				scrollOffset: startIndex,
+			}),
+		);
 
 		const filterLabel = this.#getFilterLabel();
 		if (filterLabel) {

package/src/modes/controllers/event-controller.ts

@@ -5,7 +5,7 @@ import { INTENT_FIELD } from "@oh-my-pi/pi-wire";
 import { extractTextContent } from "../../commit/utils";
 import { settings } from "../../config/settings";
 import { getFileSnapshotStore } from "../../edit/file-snapshot-store";
-import { AssistantMessageComponent } from "../../modes/components/assistant-message";
+import type { AssistantMessageComponent } from "../../modes/components/assistant-message";
 import { detectCacheInvalidation } from "../../modes/components/cache-invalidation-marker";
 import {
 	ReadToolGroupComponent,
@@ -25,6 +25,7 @@ import type { ResolveToolDetails } from "../../tools/resolve";
 import { vocalizer } from "../../tts/vocalizer";
 import { canonicalizeMessage } from "../../utils/thinking-display";
 import { interruptHint } from "../shared";
+import { createAssistantMessageComponent } from "../utils/interactive-context-helpers";
 import { StreamingRevealController } from "./streaming-reveal";
 import { ToolArgsRevealController } from "./tool-args-reveal";
 
@@ -332,14 +333,7 @@ export class EventController {
 			this.ctx.ui.requestRender();
 		} else if (event.message.role === "assistant") {
 			this.#lastVisibleBlockCount = 0;
-			this.ctx.streamingComponent = new AssistantMessageComponent(
-				undefined,
-				this.ctx.hideThinkingBlock,
-				() => this.ctx.ui.requestRender(),
-				this.ctx.viewSession.extensionRunner?.getAssistantThinkingRenderers(),
-				this.ctx.ui.imageBudget,
-				this.ctx.proseOnlyThinking,
-			);
+			this.ctx.streamingComponent = createAssistantMessageComponent(this.ctx);
 			this.ctx.streamingMessage = event.message;
 			this.ctx.chatContainer.addChild(this.ctx.streamingComponent);
 			this.#streamingReveal.begin(this.ctx.streamingComponent, this.ctx.streamingMessage);