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

package/src/modes/components/agent-dashboard.ts

@@ -21,7 +21,6 @@ import {
 	type Component,
 	Container,
 	Editor,
-	extractPrintableText,
 	fuzzyMatch,
 	Input,
 	matchesKey,
@@ -59,6 +58,7 @@ import {
 	matchesSelectUp,
 } from "../utils/keybinding-matchers";
 import { DynamicBorder } from "./dynamic-border";
+import { clampSelection, handleTabSwitchKey, padLinesToHeight, searchableChar } from "./selector-helpers";
 
 type SourceTabId = "all" | AgentSource;
 type AgentScope = "project" | "user";
@@ -521,31 +521,19 @@ export class AgentDashboard extends Container {
 		const lines = super.render(width);
 		// Pad to the full viewport so every state (list, edit, create) covers the
 		// screen as a true full-screen view 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;
+		// through below it.
+		return padLinesToHeight(lines, this.#terminalRows());
 	}
 
 	#clampSelection(): void {
-		if (this.#filteredAgents.length === 0) {
-			this.#selectedIndex = 0;
-			this.#scrollOffset = 0;
-			return;
-		}
-
-		this.#selectedIndex = Math.min(this.#selectedIndex, this.#filteredAgents.length - 1);
-		this.#selectedIndex = Math.max(0, this.#selectedIndex);
-
-		const maxVisible = this.#getMaxVisibleItems();
-		if (this.#selectedIndex < this.#scrollOffset) {
-			this.#scrollOffset = this.#selectedIndex;
-		} else if (this.#selectedIndex >= this.#scrollOffset + maxVisible) {
-			this.#scrollOffset = this.#selectedIndex - maxVisible + 1;
-		}
+		const next = clampSelection(
+			this.#selectedIndex,
+			this.#scrollOffset,
+			this.#filteredAgents.length,
+			this.#getMaxVisibleItems(),
+		);
+		this.#selectedIndex = next.selectedIndex;
+		this.#scrollOffset = next.scrollOffset;
 	}
 
 	#persistDisabledAgents(): void {
@@ -1150,12 +1138,7 @@ export class AgentDashboard extends Container {
 			return;
 		}
 
-		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;
 		}
 
@@ -1190,17 +1173,11 @@ export class AgentDashboard extends Container {
 			return;
 		}
 
-		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.#searchQuery += printableText;
-				this.#applyFilters();
-				this.#buildLayout();
-			}
+		const char = searchableChar(data);
+		if (char !== null) {
+			this.#searchQuery += char;
+			this.#applyFilters();
+			this.#buildLayout();
 		}
 	}
 }

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.test.ts

@@ -3,6 +3,7 @@ import { $ } from "bun";
 import { getEditorTheme, initTheme } from "../theme/theme";
 import {
 	CustomEditor,
+	extractBracketedImagePastePaths,
 	SPACE_HOLD_MECHANICAL_RUN,
 	SPACE_HOLD_RELEASE_MS,
 	SPACE_REPEAT_MAX_GAP_MS,
@@ -21,6 +22,12 @@ function makeEditor() {
 const REPEAT_GAP_MS = 30;
 /** A gap above the threshold — looks like a deliberate keypress. */
 const TAP_GAP_MS = SPACE_REPEAT_MAX_GAP_MS + 80;
+const BRACKETED_PASTE_START = "\x1b[200~";
+const BRACKETED_PASTE_END = "\x1b[201~";
+
+function bracketedPaste(text: string): string {
+	return `${BRACKETED_PASTE_START}${text}${BRACKETED_PASTE_END}`;
+}
 
 /** Feed `count` spaces `gapMs` apart on the fake clock. The first space of a run has no prior
  *  space, so its gap is effectively infinite and it always reads as a deliberate tap. */
@@ -66,6 +73,21 @@ describe("CustomEditor placeholder decoration", () => {
 	});
 });
 
+describe("CustomEditor bracketed image-path paste", () => {
+	it("leaves a pasted bare .png filename on the normal text path", () => {
+		expect(extractBracketedImagePastePaths(bracketedPaste("icon-photo-default.png"))).toBeUndefined();
+	});
+
+	it("extracts explicit local image paths for attachment", () => {
+		expect(extractBracketedImagePastePaths(bracketedPaste("/tmp/icon-photo-default.png"))).toEqual([
+			"/tmp/icon-photo-default.png",
+		]);
+		expect(extractBracketedImagePastePaths(bracketedPaste("C:\\Users\\me\\icon-photo-default.png"))).toEqual([
+			"C:\\Users\\me\\icon-photo-default.png",
+		]);
+	});
+});
+
 describe("CustomEditor space-hold push-to-talk", () => {
 	beforeAll(async () => {
 		await initTheme();

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";
@@ -63,6 +64,9 @@ const BRACKETED_PASTE_END = "\x1b[201~";
 const BRACKETED_IMAGE_PATH_REGEX = /\.(?:png|jpe?g|gif|webp)$/i;
 const BRACKETED_IMAGE_PATH_BOUNDARY_REGEX = /\.(?:png|jpe?g|gif|webp)(?=$|["']?\s)/gi;
 const SHELL_ESCAPED_PATH_CHAR_REGEX = /\\([\\\s'"()[\]{}&;<>|?*!$`])/g;
+const URI_SCHEME_REGEX = /^[a-z][a-z0-9+.-]*:/i;
+const FILE_URI_REGEX = /^file:\/\//i;
+const WINDOWS_DRIVE_PATH_REGEX = /^[a-z]:[\\/]/i;
 
 /** Max gap (ms) between two spaces for the later one to count as OS key auto-repeat rather than a
  *  deliberate press. OS auto-repeat is fast; a deliberate tap (even a fast one) is slower. */
@@ -117,6 +121,12 @@ function normalizePastedImagePath(path: string): string {
 	return unquoted.replace(SHELL_ESCAPED_PATH_CHAR_REGEX, "$1");
 }
 
+function isExplicitPastedImagePath(path: string): boolean {
+	if (WINDOWS_DRIVE_PATH_REGEX.test(path) || FILE_URI_REGEX.test(path)) return true;
+	if (URI_SCHEME_REGEX.test(path)) return false;
+	return path.includes("/") || path.includes("\\");
+}
+
 export function extractBracketedImagePastePaths(data: string): string[] | undefined {
 	if (!data.startsWith(BRACKETED_PASTE_START)) return undefined;
 	const endIndex = data.indexOf(BRACKETED_PASTE_END, BRACKETED_PASTE_START.length);
@@ -138,7 +148,7 @@ export function extractBracketedImagePastePaths(data: string): string[] | undefi
 		if (boundaryEnd === undefined) continue;
 
 		const path = normalizePastedImagePath(pasted.slice(segmentStart, boundaryEnd));
-		if (!path || !BRACKETED_IMAGE_PATH_REGEX.test(path)) return undefined;
+		if (!path || !BRACKETED_IMAGE_PATH_REGEX.test(path) || !isExplicitPastedImagePath(path)) return undefined;
 		paths.push(path);
 
 		segmentStart = boundaryEnd;
@@ -163,6 +173,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/footer.ts

@@ -142,7 +142,8 @@ export class FooterComponent implements Component {
 		// After compaction, tokens are unknown until the next LLM response.
 		const contextUsage = this.session.getContextUsage();
 		const contextWindow = contextUsage?.contextWindow ?? state.model?.contextWindow ?? 0;
-		const contextPercentValue = contextUsage?.percent ?? 0;
+		const contextTokens = contextUsage?.tokens ?? 0;
+		const contextPercentValue = contextWindow > 0 ? (contextUsage?.percent ?? 0) : null;
 
 		// Replace home directory with ~
 		let pwd = shortenPath(getProjectDir());
@@ -186,8 +187,8 @@ export class FooterComponent implements Component {
 		// Colorize context percentage based on usage
 		let contextPercentStr: string;
 		const autoIndicator = this.#autoCompactEnabled ? " (auto)" : "";
-		const contextPercentDisplay = `${formatContextUsage(contextPercentValue, contextWindow)}${autoIndicator}`;
-		if (contextUsage) {
+		const contextPercentDisplay = `${formatContextUsage(contextPercentValue, contextWindow, contextTokens)}${autoIndicator}`;
+		if (contextUsage && contextPercentValue !== null) {
 			const color = getContextUsageThemeColor(getContextUsageLevel(contextPercentValue, contextWindow));
 			contextPercentStr =
 				color === "statusLineContext" ? contextPercentDisplay : theme.fg(color, contextPercentDisplay);

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;
 	}
 }