@oh-my-pi/pi-coding-agent 15.9.5 → 15.9.67

package/src/lsp/client.ts

@@ -1,3 +1,4 @@
+import * as path from "node:path";
 import { isEnoent, logger, ptree, untilAborted } from "@oh-my-pi/pi-utils";
 import { ToolAbortError, throwIfAborted } from "../tools/tool-errors";
 import { applyWorkspaceEdit } from "./edits";
@@ -147,6 +148,7 @@ const CLIENT_CAPABILITIES = {
 			failureHandling: "textOnlyTransactional",
 		},
 		configuration: true,
+		workspaceFolders: true,
 		symbol: {
 			dynamicRegistration: false,
 			symbolKind: {
@@ -318,6 +320,22 @@ async function startMessageReader(client: LspClient): Promise<void> {
 	}
 }
 
+/**
+ * Build the workspace folder list advertised to the server. Identical shape
+ * for `initialize` params and `workspace/workspaceFolders` server requests.
+ */
+function currentWorkspaceFolders(client: LspClient): Array<{ uri: string; name: string }> {
+	return [{ uri: fileToUri(client.cwd), name: path.basename(client.cwd) || "workspace" }];
+}
+
+/**
+ * Handle workspace/workspaceFolders requests from the server.
+ */
+async function handleWorkspaceFoldersRequest(client: LspClient, message: LspJsonRpcRequest): Promise<void> {
+	if (typeof message.id !== "number") return;
+	await sendResponse(client, message.id, currentWorkspaceFolders(client), "workspace/workspaceFolders");
+}
+
 /**
  * Handle workspace/configuration requests from the server.
  */
@@ -364,6 +382,10 @@ async function handleServerRequest(client: LspClient, message: LspJsonRpcRequest
 		await handleConfigurationRequest(client, message);
 		return;
 	}
+	if (message.method === "workspace/workspaceFolders") {
+		await handleWorkspaceFoldersRequest(client, message);
+		return;
+	}
 	if (message.method === "workspace/applyEdit") {
 		await handleApplyEditRequest(client, message);
 		return;
@@ -412,7 +434,60 @@ async function sendResponse(
 /** Timeout for warmup initialize requests (5 seconds) */
 export const WARMUP_TIMEOUT_MS = 5000;
 
-/** Max time to wait for the server to report project loading completion via $/progress */
+/** Max time to poll rust-analyzer after progress ends but before Cargo workspaces are ready. */
+const RUST_ANALYZER_WORKSPACE_READY_TIMEOUT_MS = 5_000;
+const RUST_ANALYZER_WORKSPACE_READY_POLL_MS = 100;
+const RUST_ANALYZER_WORKSPACE_READY_SETTLE_MS = 2_000;
+const rustAnalyzerReadyClients = new WeakSet<LspClient>();
+
+function commandBasename(command: string): string {
+	const slash = command.lastIndexOf("/");
+	const backslash = command.lastIndexOf("\\");
+	const separator = Math.max(slash, backslash);
+	return separator === -1 ? command : command.slice(separator + 1);
+}
+
+function isRustAnalyzerClient(client: LspClient): boolean {
+	return (
+		commandBasename(client.config.command) === "rust-analyzer" ||
+		(client.config.resolvedCommand ? commandBasename(client.config.resolvedCommand) === "rust-analyzer" : false)
+	);
+}
+
+function isRustAnalyzerStatusTimeout(err: unknown): boolean {
+	return err instanceof Error && err.message.startsWith("LSP request rust-analyzer/analyzerStatus timed out after ");
+}
+
+async function waitForRustAnalyzerWorkspace(client: LspClient, signal?: AbortSignal): Promise<void> {
+	if (rustAnalyzerReadyClients.has(client)) {
+		return;
+	}
+	const started = Date.now();
+	const deadline = started + RUST_ANALYZER_WORKSPACE_READY_TIMEOUT_MS;
+	while (true) {
+		throwIfAborted(signal);
+		let status: unknown;
+		try {
+			status = await sendRequest(client, "rust-analyzer/analyzerStatus", {}, signal, 1_000);
+		} catch (err) {
+			if (!isRustAnalyzerStatusTimeout(err) || Date.now() >= deadline) {
+				return;
+			}
+			await Bun.sleep(RUST_ANALYZER_WORKSPACE_READY_POLL_MS);
+			continue;
+		}
+		const ready = typeof status === "string" && !status.startsWith("No workspaces");
+		if (ready && Date.now() - started >= RUST_ANALYZER_WORKSPACE_READY_SETTLE_MS) {
+			rustAnalyzerReadyClients.add(client);
+			return;
+		}
+		if (Date.now() >= deadline) {
+			return;
+		}
+		await Bun.sleep(RUST_ANALYZER_WORKSPACE_READY_POLL_MS);
+	}
+}
+
 const PROJECT_LOAD_TIMEOUT_MS = 15_000;
 
 /** Max time to wait for graceful LSP shutdown and process exit. */
@@ -530,7 +605,7 @@ export async function getOrCreateClient(config: ServerConfig, cwd: string, initT
 					rootPath: cwd,
 					capabilities: CLIENT_CAPABILITIES,
 					initializationOptions: config.initOptions ?? {},
-					workspaceFolders: [{ uri: fileToUri(cwd), name: cwd.split("/").pop() ?? "workspace" }],
+					workspaceFolders: currentWorkspaceFolders(client),
 				},
 				undefined, // signal
 				initTimeoutMs,
@@ -635,6 +710,9 @@ export async function waitForProjectLoaded(client: LspClient, signal?: AbortSign
 			? [new Promise<void>(resolve => signal.addEventListener("abort", () => resolve(), { once: true }))]
 			: []),
 	]);
+	if (isRustAnalyzerClient(client)) {
+		await waitForRustAnalyzerWorkspace(client, signal);
+	}
 }
 
 /**

package/src/lsp/index.ts

@@ -304,6 +304,32 @@ const SINGLE_DIAGNOSTICS_WAIT_TIMEOUT_MS = 3000;
 const BATCH_DIAGNOSTICS_WAIT_TIMEOUT_MS = 400;
 const MAX_GLOB_DIAGNOSTIC_TARGETS = 20;
 const WORKSPACE_SYMBOL_LIMIT = 200;
+const PROJECT_INDEXED_ACTIONS: ReadonlySet<string> = new Set([
+	"definition",
+	"type_definition",
+	"implementation",
+	"references",
+	"rename",
+	"hover",
+]);
+
+const RUST_WORKSPACE_MARKERS = ["Cargo.toml", "rust-analyzer.toml"] as const;
+
+function hasRustWorkspaceAncestor(filePath: string): boolean {
+	let dir = path.dirname(filePath);
+	while (true) {
+		for (const marker of RUST_WORKSPACE_MARKERS) {
+			if (fs.existsSync(path.join(dir, marker))) {
+				return true;
+			}
+		}
+		const parent = path.dirname(dir);
+		if (parent === dir) {
+			return false;
+		}
+		dir = parent;
+	}
+}
 
 function limitDiagnosticMessages(messages: string[]): string[] {
 	if (messages.length <= DIAGNOSTIC_MESSAGE_LIMIT) {
@@ -1940,10 +1966,21 @@ export class LspTool implements AgentTool<typeof lspSchema, LspToolDetails, Them
 		try {
 			const client = await getOrCreateClient(serverConfig, this.session.cwd);
 			const targetFile = resolvedFile;
+			const isRustAnalyzerServer =
+				serverName === "rust-analyzer" ||
+				path.basename(serverConfig.command) === "rust-analyzer" ||
+				(serverConfig.resolvedCommand ? path.basename(serverConfig.resolvedCommand) === "rust-analyzer" : false);
+			const needsProjectIndex =
+				targetFile !== null && PROJECT_INDEXED_ACTIONS.has(action) && isProjectAwareLspServer(serverConfig);
+			const rustWorkspaceWait =
+				needsProjectIndex && isRustAnalyzerServer && targetFile !== null && hasRustWorkspaceAncestor(targetFile);
 
 			if (targetFile) {
 				await ensureFileOpen(client, targetFile, signal);
 			}
+			if (rustWorkspaceWait) {
+				await waitForProjectLoaded(client, signal);
+			}
 
 			// For project-aware servers, references/rename/definition without a `symbol`
 			// silently falls back to the first non-whitespace column on the line, which
@@ -1968,10 +2005,7 @@ export class LspTool implements AgentTool<typeof lspSchema, LspToolDetails, Them
 
 			let output: string;
 
-			// Wait for project loading to complete before cross-file operations
-			// to ensure the server has indexed all project files.
-			const crossFileActions = new Set(["definition", "type_definition", "implementation", "references", "rename"]);
-			if (crossFileActions.has(action)) {
+			if (needsProjectIndex && !isRustAnalyzerServer) {
 				await waitForProjectLoaded(client, signal);
 			}
 

package/src/lsp/render.ts

@@ -21,7 +21,7 @@ import {
 	truncateToWidth,
 } from "../tools/render-utils";
 import { renderStatusLine } from "../tui";
-import { CachedOutputBlock } from "../tui/output-block";
+import { CachedOutputBlock, markFramedBlockComponent } from "../tui/output-block";
 import type { LspParams, LspToolDetails } from "./types";
 
 // =============================================================================
@@ -138,7 +138,7 @@ export function renderResult(
 
 	const outputBlock = new CachedOutputBlock();
 
-	return {
+	return markFramedBlockComponent({
 		render(width: number): string[] {
 			// Read mutable state at render time
 			const { expanded, isPartial, spinnerFrame } = options;
@@ -194,7 +194,7 @@ export function renderResult(
 		invalidate() {
 			outputBlock.invalidate();
 		},
-	};
+	});
 }
 
 // =============================================================================

package/src/main.ts

@@ -268,7 +268,7 @@ async function runInteractiveMode(
 		force: forceSetupWizard,
 	});
 
-	await mode.init({ suppressWelcomeIntro: setupScenes.length > 0 });
+	await mode.init({ suppressWelcomeIntro: resuming || setupScenes.length > 0 });
 
 	if (setupScenes.length > 0) {
 		await runSetupWizard(mode, setupScenes);

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

@@ -27,6 +27,7 @@ import {
 	matchesKey,
 	padding,
 	replaceTabs,
+	ScrollView,
 	Spacer,
 	Text,
 	truncateToWidth,
@@ -205,9 +206,12 @@ class AgentListPane implements Component {
 			return lines;
 		}
 
+		const overflow = this.agents.length > this.maxVisible;
+		const rowWidth = Math.max(0, width - (overflow ? 1 : 0));
 		const start = this.scrollOffset;
 		const end = Math.min(start + this.maxVisible, this.agents.length);
 
+		const rows: string[] = [];
 		for (let i = start; i < end; i++) {
 			const agent = this.agents[i];
 			const selected = i === this.selectedIndex;
@@ -224,12 +228,17 @@ class AgentListPane implements Component {
 				line = theme.fg("dim", line);
 			}
 
-			lines.push(truncateToWidth(line, width));
+			rows.push(truncateToWidth(line, rowWidth));
 		}
 
-		if (this.agents.length > this.maxVisible) {
-			lines.push(theme.fg("muted", `  (${this.selectedIndex + 1}/${this.agents.length})`));
-		}
+		const sv = new ScrollView(rows, {
+			height: rows.length,
+			scrollbar: "auto",
+			totalRows: this.agents.length,
+			theme: { track: t => theme.fg("muted", t), thumb: t => theme.fg("accent", t) },
+		});
+		sv.setScrollOffset(this.scrollOffset);
+		lines.push(...sv.render(width));
 
 		return lines;
 	}

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

@@ -18,6 +18,15 @@ export class AssistantMessageComponent extends Container {
 	#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;
 
 	constructor(
 		message?: AssistantMessage,
@@ -49,6 +58,18 @@ export class AssistantMessageComponent extends Container {
 		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);
+		}
+	}
+
 	isTranscriptBlockFinalized(): boolean {
 		return this.#transcriptBlockFinalized;
 	}
@@ -246,7 +267,7 @@ export class AssistantMessageComponent extends Container {
 					this.#contentContainer.addChild(new Spacer(1));
 				}
 				this.#contentContainer.addChild(new Text(theme.fg("error", abortMessage), 1, 0));
-			} else if (message.stopReason === "error") {
+			} else if (message.stopReason === "error" && !this.#errorPinned) {
 				const errorMsg = message.errorMessage || "Unknown error";
 				this.#contentContainer.addChild(new Spacer(1));
 				this.#contentContainer.addChild(new Text(theme.fg("error", `Error: ${errorMsg}`), 1, 0));

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

@@ -0,0 +1,249 @@
+import { type Component, matchesKey, padding, Text, truncateToWidth, visibleWidth } from "@oh-my-pi/pi-tui";
+import { replaceTabs } from "../../tools/render-utils";
+import { highlightCode, theme } from "../theme/theme";
+import type { CopyTarget } from "../utils/copy-targets";
+import {
+	matchesSelectCancel,
+	matchesSelectDown,
+	matchesSelectPageDown,
+	matchesSelectPageUp,
+	matchesSelectUp,
+} from "../utils/keybinding-matchers";
+import { keyHint, rawKeyHint } from "./keybinding-hints";
+
+/** Minimum rows reserved for the tree even on short terminals. */
+const MIN_TREE_ROWS = 3;
+/** Fixed chrome rows: top border, two dividers, footer, bottom border. */
+const CHROME_ROWS = 5;
+
+export interface CopySelectorCallbacks {
+	/** A copy target was chosen — copy its `content`. */
+	onPick: (target: CopyTarget) => void;
+	/** The picker was dismissed. */
+	onCancel: () => void;
+}
+
+interface FlatNode {
+	target: CopyTarget;
+	depth: number;
+	/** Last among its siblings (drives └─ vs ├─). */
+	isLast: boolean;
+	/** Per-ancestor flag: does ancestor at that level have a following sibling? */
+	ancestorHasNext: boolean[];
+}
+
+/** Pad or truncate a (possibly ANSI-styled) string to exactly `width` columns. */
+function fit(text: string, width: number): string {
+	if (width <= 0) return "";
+	const w = visibleWidth(text);
+	if (w === width) return text;
+	if (w < width) return text + padding(width - w);
+	const cut = truncateToWidth(text, width);
+	const cw = visibleWidth(cut);
+	return cw < width ? cut + padding(width - cw) : cut;
+}
+
+function paint(s: string): string {
+	return theme.fg("border", s);
+}
+
+function topBorder(width: number, title: string): string {
+	const box = theme.boxSharp;
+	const inner = Math.max(0, width - 2);
+	if (!title) return paint(box.topLeft + box.horizontal.repeat(inner) + box.topRight);
+	const shown = truncateToWidth(` ${title} `, Math.max(0, inner - 2));
+	const fillWidth = Math.max(0, inner - 1 - visibleWidth(shown));
+	return (
+		paint(box.topLeft + box.horizontal) +
+		theme.bold(theme.fg("accent", shown)) +
+		paint(box.horizontal.repeat(fillWidth) + box.topRight)
+	);
+}
+
+function divider(width: number): string {
+	const box = theme.boxSharp;
+	return paint(box.teeRight + box.horizontal.repeat(Math.max(0, width - 2)) + box.teeLeft);
+}
+
+function bottomBorder(width: number): string {
+	const box = theme.boxSharp;
+	return paint(box.bottomLeft + box.horizontal.repeat(Math.max(0, width - 2)) + box.bottomRight);
+}
+
+/** Wrap pre-styled content in vertical borders with single-column insets. */
+function row(content: string, width: number): string {
+	const box = theme.boxSharp;
+	return `${paint(box.vertical)} ${fit(content, Math.max(0, width - 4))} ${paint(box.vertical)}`;
+}
+
+/** Render one tree connector as exactly three cells (e.g. "├─ ", "└─ ", "|--"). */
+function connectorCells(symbol: string): string {
+	const chars = Array.from(symbol);
+	return (chars[0] ?? " ") + (chars[1] ?? theme.tree.horizontal) + (chars[2] ?? " ");
+}
+
+/** The 3-cell ancestor gutter: a vertical guide when the ancestor continues. */
+function gutterCells(hasNext: boolean): string {
+	return `${hasNext ? theme.tree.vertical : " "}  `;
+}
+
+/**
+ * Fullscreen `/copy` picker rendered as a `/tree`-style tree inside one
+ * outlined box: a title, the tree of copy targets (recent assistant messages
+ * with their code blocks nested beneath), a live preview of the highlighted
+ * node, and a keybinding footer. Every node copies its `content` on Enter.
+ */
+export class CopySelectorComponent implements Component {
+	#roots: CopyTarget[];
+	#cursorId: string;
+	#treeRows = MIN_TREE_ROWS;
+	// Reused across renders to wrap preview content to the pane width.
+	#previewText = new Text("", 0, 0);
+
+	constructor(
+		roots: CopyTarget[],
+		private readonly callbacks: CopySelectorCallbacks,
+	) {
+		this.#roots = roots;
+		this.#cursorId = roots[0]?.id ?? "";
+	}
+
+	invalidate(): void {}
+
+	#flatten(): FlatNode[] {
+		const out: FlatNode[] = [];
+		const walk = (nodes: CopyTarget[], depth: number, ancestorHasNext: boolean[]) => {
+			nodes.forEach((target, i) => {
+				const isLast = i === nodes.length - 1;
+				out.push({ target, depth, isLast, ancestorHasNext });
+				if (target.children?.length) walk(target.children, depth + 1, [...ancestorHasNext, !isLast]);
+			});
+		};
+		walk(this.#roots, 0, []);
+		return out;
+	}
+
+	handleInput(keyData: string): void {
+		if (matchesSelectCancel(keyData)) {
+			this.callbacks.onCancel();
+			return;
+		}
+
+		const flat = this.#flatten();
+		if (flat.length === 0) return;
+		const idx = Math.max(
+			0,
+			flat.findIndex(n => n.target.id === this.#cursorId),
+		);
+
+		if (matchesSelectUp(keyData)) {
+			this.#cursorId = flat[idx === 0 ? flat.length - 1 : idx - 1]!.target.id;
+		} else if (matchesSelectDown(keyData)) {
+			this.#cursorId = flat[idx === flat.length - 1 ? 0 : idx + 1]!.target.id;
+		} else if (matchesSelectPageUp(keyData)) {
+			this.#cursorId = flat[Math.max(0, idx - this.#treeRows)]!.target.id;
+		} else if (matchesSelectPageDown(keyData)) {
+			this.#cursorId = flat[Math.min(flat.length - 1, idx + this.#treeRows)]!.target.id;
+		} else if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
+			const target = flat[idx]!.target;
+			if (target.content !== undefined) this.callbacks.onPick(target);
+		}
+	}
+
+	#renderTree(width: number, flat: FlatNode[], cursorIdx: number, rows: number): string[] {
+		const inner = Math.max(0, width - 4);
+		const start = Math.max(0, Math.min(cursorIdx - Math.floor(rows / 2), Math.max(0, flat.length - rows)));
+		const out: string[] = [];
+		for (let r = 0; r < rows; r++) {
+			const i = start + r;
+			const node = flat[i];
+			if (!node) {
+				out.push(row("", width));
+				continue;
+			}
+			const target = node.target;
+			const isSelected = i === cursorIdx;
+
+			let prefix = "";
+			for (let l = 0; l < node.depth - 1; l++) prefix += gutterCells(node.ancestorHasNext[l]!);
+			if (node.depth > 0) prefix += connectorCells(node.isLast ? theme.tree.last : theme.tree.branch);
+
+			const cursor = isSelected ? "❯ " : "  ";
+			const hint = target.hint ?? "";
+			const hintWidth = hint ? visibleWidth(hint) + 2 : 0;
+			const used = visibleWidth(cursor) + visibleWidth(prefix);
+			const labelPlain = truncateToWidth(target.label, Math.max(1, inner - used - hintWidth));
+			const left = isSelected
+				? theme.fg("accent", cursor) + theme.fg("dim", prefix) + theme.bold(theme.fg("accent", labelPlain))
+				: cursor + theme.fg("dim", prefix) + labelPlain;
+			const gap = Math.max(1, inner - used - visibleWidth(labelPlain) - visibleWidth(hint));
+			out.push(row(left + padding(gap) + (hint ? theme.fg("dim", hint) : ""), width));
+		}
+		return out;
+	}
+
+	#renderPreview(width: number, target: CopyTarget | undefined, rows: number): string[] {
+		const out: string[] = [];
+		const hint = target?.hint;
+		out.push(row(theme.fg("dim", `Preview${hint ? ` · ${hint}` : ""}`), width));
+
+		const contentRows = rows - 1;
+		if (!target || contentRows <= 0) {
+			while (out.length < rows) out.push(row("", width));
+			return out;
+		}
+
+		// Code/command previews are syntax-highlighted; everything else is shown
+		// as plain text. Both are wrapped (not hard-truncated) to the pane width.
+		const isCode = target.language !== undefined;
+		const source = isCode
+			? highlightCode(replaceTabs(target.preview), target.language).join("\n")
+			: replaceTabs(target.preview);
+		this.#previewText.setText(source);
+		const wrapped = this.#previewText.render(Math.max(1, width - 4));
+
+		const hasMore = wrapped.length > contentRows;
+		const visibleCount = hasMore ? contentRows - 1 : Math.min(wrapped.length, contentRows);
+		for (let k = 0; k < contentRows; k++) {
+			if (k < visibleCount) {
+				out.push(row(isCode ? wrapped[k]! : theme.fg("muted", wrapped[k]!), width));
+			} else if (k === visibleCount && hasMore) {
+				out.push(row(theme.fg("dim", `… ${wrapped.length - visibleCount} more lines`), width));
+			} else {
+				out.push(row("", width));
+			}
+		}
+		return out;
+	}
+
+	render(width: number): string[] {
+		const height = process.stdout.rows || 40;
+		const flat = this.#flatten();
+		const cursorIdx = Math.max(
+			0,
+			flat.findIndex(n => n.target.id === this.#cursorId),
+		);
+		const selected = flat[cursorIdx]?.target;
+
+		const available = Math.max(MIN_TREE_ROWS + 1, height - CHROME_ROWS);
+		const treeRows = Math.max(1, Math.min(flat.length, Math.floor(available / 2)));
+		this.#treeRows = treeRows;
+		const previewRows = Math.max(1, available - treeRows);
+
+		const footer = [
+			rawKeyHint("↑↓", "move"),
+			keyHint("tui.select.confirm", "copy"),
+			keyHint("tui.select.cancel", "quit"),
+		].join(theme.fg("dim", " · "));
+
+		return [
+			topBorder(width, "Copy to clipboard"),
+			...this.#renderTree(width, flat, cursorIdx, treeRows),
+			divider(width),
+			...this.#renderPreview(width, selected, previewRows),
+			divider(width),
+			row(footer, width),
+			bottomBorder(width),
+		];
+	}
+}

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

@@ -10,6 +10,7 @@ import {
 	extractPrintableText,
 	matchesKey,
 	padding,
+	ScrollView,
 	truncateToWidth,
 	visibleWidth,
 } from "@oh-my-pi/pi-tui";
@@ -134,25 +135,33 @@ export class ExtensionList implements Component {
 		const startIdx = this.#scrollOffset;
 		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));
+
 		// Render visible items
+		const rows: string[] = [];
 		for (let i = startIdx; i < endIdx; i++) {
 			const listItem = this.#listItems[i];
 			const isSelected = this.#focused && i === this.#selectedIndex;
 
 			if (listItem.type === "master") {
-				lines.push(this.#renderMasterSwitch(listItem, isSelected, width));
+				rows.push(this.#renderMasterSwitch(listItem, isSelected, rowWidth));
 			} else if (listItem.type === "kind-header") {
-				lines.push(this.#renderKindHeader(listItem, isSelected, width));
+				rows.push(this.#renderKindHeader(listItem, isSelected, rowWidth));
 			} else {
-				lines.push(this.#renderExtensionRow(listItem.item, isSelected, width, masterDisabled));
+				rows.push(this.#renderExtensionRow(listItem.item, isSelected, rowWidth, masterDisabled));
 			}
 		}
 
-		// Scroll indicator
-		if (this.#listItems.length > this.#maxVisible) {
-			const indicator = theme.fg("muted", `  (${this.#selectedIndex + 1}/${this.#listItems.length})`);
-			lines.push(indicator);
-		}
+		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));
 
 		return lines;
 	}

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

@@ -5,6 +5,7 @@ import {
 	Input,
 	matchesKey,
 	padding,
+	ScrollView,
 	Spacer,
 	Text,
 	truncateToWidth,
@@ -115,15 +116,19 @@ class HistoryResultsList implements Component {
 		);
 		const endIndex = Math.min(startIndex + this.#maxVisible, this.#results.length);
 
+		const overflow = this.#results.length > this.#maxVisible;
+		const rowWidth = Math.max(0, width - (overflow ? 1 : 0));
+		const rows: string[] = [];
+
 		for (let i = startIndex; i < endIndex; i++) {
 			const entry = this.#results[i];
 			const isSelected = i === this.#selectedIndex;
 
 			const timeStr = relativeTime(entry.created_at);
 			const timeWidth = visibleWidth(timeStr);
-			const showTime = width >= gutterWidth + 12 + timeWidth;
+			const showTime = rowWidth >= gutterWidth + 12 + timeWidth;
 
-			const promptBudget = Math.max(4, width - gutterWidth - (showTime ? timeWidth + 1 : 0));
+			const promptBudget = Math.max(4, rowWidth - gutterWidth - (showTime ? timeWidth + 1 : 0));
 			const normalized = entry.prompt.replace(/\s+/g, " ").trim();
 			const plain = truncateToWidth(normalized, promptBudget);
 			const highlighted = highlightTokens(plain, this.#tokens);
@@ -133,21 +138,24 @@ class HistoryResultsList implements Component {
 
 			if (showTime) {
 				// Pad the prompt region so the timestamp sits flush right with a one-cell gap.
-				line = `${truncateToWidth(line, width - timeWidth - 1, Ellipsis.Unicode, true)} ${theme.fg("dim", timeStr)}`;
+				line = `${truncateToWidth(line, rowWidth - timeWidth - 1, Ellipsis.Unicode, true)} ${theme.fg("dim", timeStr)}`;
 			}
 
-			lines.push(
+			rows.push(
 				isSelected
-					? theme.bg("selectedBg", truncateToWidth(line, width, Ellipsis.Omit, true))
-					: truncateToWidth(line, width),
+					? theme.bg("selectedBg", truncateToWidth(line, rowWidth, Ellipsis.Omit, true))
+					: truncateToWidth(line, rowWidth),
 			);
 		}
 
-		if (startIndex > 0 || endIndex < this.#results.length) {
-			const scrollText = `  ${this.#selectedIndex + 1}/${this.#results.length}`;
-			lines.push(theme.fg("muted", truncateToWidth(scrollText, width, Ellipsis.Omit)));
-		}
-
+		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));
 		return lines;
 	}
 }