@oh-my-pi/pi-coding-agent 15.7.5 → 15.7.6

package/src/lsp/diagnostics-ledger.ts

@@ -0,0 +1,51 @@
+import type { FileDiagnosticsResult } from "./index";
+import { summarizeDiagnosticMessages } from "./utils";
+
+const DIAGNOSTIC_LOCATION_PREFIX_RE = /^.*?:\d+:\d+\s+/;
+
+export function diagnosticIdentity(message: string): string {
+	return message.replace(DIAGNOSTIC_LOCATION_PREFIX_RE, "");
+}
+
+export class DiagnosticsLedger {
+	readonly #seen = new Map<string, Set<string>>();
+
+	reduce(absPath: string, result: FileDiagnosticsResult): FileDiagnosticsResult {
+		const previous = this.#seen.get(absPath);
+		const currentIdentities = new Set<string>();
+		const fresh: string[] = [];
+
+		for (const message of result.messages) {
+			const identity = diagnosticIdentity(message);
+			currentIdentities.add(identity);
+			if (!previous?.has(identity)) {
+				fresh.push(message);
+			}
+		}
+
+		if (currentIdentities.size === 0) {
+			this.#seen.delete(absPath);
+		} else {
+			this.#seen.set(absPath, currentIdentities);
+		}
+
+		if (fresh.length === result.messages.length) {
+			return result;
+		}
+
+		return {
+			...result,
+			messages: fresh,
+			...summarizeDiagnosticMessages(fresh),
+		};
+	}
+}
+
+export interface DiagnosticsLedgerOwner {
+	diagnosticsLedger?: DiagnosticsLedger;
+}
+
+export function getDiagnosticsLedger(owner: DiagnosticsLedgerOwner): DiagnosticsLedger {
+	owner.diagnosticsLedger ??= new DiagnosticsLedger();
+	return owner.diagnosticsLedger;
+}

package/src/lsp/index.ts

@@ -79,6 +79,7 @@ import {
 	resolveDiagnosticTargets,
 	resolveSymbolColumn,
 	sortDiagnostics,
+	summarizeDiagnosticMessages,
 	symbolKindToIcon,
 	uriToFile,
 } from "./utils";
@@ -816,12 +817,15 @@ export interface WritethroughOptions {
 	onDeferredDiagnostics?: (diagnostics: FileDiagnosticsResult) => void;
 	/** Signal to cancel a pending deferred diagnostics fetch. */
 	deferredSignal?: AbortSignal;
+	/** Transform diagnostics before surfacing them after a successful fetch. */
+	transformDiagnostics?: (absPath: string, result: FileDiagnosticsResult) => FileDiagnosticsResult;
 }
 
 /** Internal resolved form of {@link WritethroughOptions} that the writethrough machinery operates on. */
 type ResolvedWritethroughOptions = {
 	enableFormat: boolean;
 	enableDiagnostics: boolean;
+	transformDiagnostics?: (absPath: string, result: FileDiagnosticsResult) => FileDiagnosticsResult;
 };
 
 /** Per-file deferred LSP diagnostics wiring for {@link WritethroughCallback}. */
@@ -881,6 +885,7 @@ function getOrCreateWritethroughBatch(id: string, options: ResolvedWritethroughO
 	if (existing) {
 		existing.options.enableFormat ||= options.enableFormat;
 		existing.options.enableDiagnostics ||= options.enableDiagnostics;
+		existing.options.transformDiagnostics ??= options.transformDiagnostics;
 		return existing;
 	}
 	const batch: LspWritethroughBatchState = {
@@ -904,27 +909,6 @@ export async function flushLspWritethroughBatch(
 	return flushWritethroughBatch(Array.from(state.entries.values()), cwd, state.options, signal);
 }
 
-function summarizeDiagnosticMessages(messages: string[]): { summary: string; errored: boolean } {
-	const counts = { error: 0, warning: 0, info: 0, hint: 0 };
-	for (const message of messages) {
-		const match = message.match(/\[(error|warning|info|hint)\]/i);
-		if (!match) continue;
-		const key = match[1].toLowerCase() as keyof typeof counts;
-		counts[key] += 1;
-	}
-
-	const parts: string[] = [];
-	if (counts.error > 0) parts.push(`${counts.error} error(s)`);
-	if (counts.warning > 0) parts.push(`${counts.warning} warning(s)`);
-	if (counts.info > 0) parts.push(`${counts.info} info(s)`);
-	if (counts.hint > 0) parts.push(`${counts.hint} hint(s)`);
-
-	return {
-		summary: parts.length > 0 ? parts.join(", ") : "no issues",
-		errored: counts.error > 0,
-	};
-}
-
 function mergeDiagnostics(
 	results: Array<FileDiagnosticsResult | undefined>,
 	options: ResolvedWritethroughOptions,
@@ -1083,12 +1067,14 @@ async function runLspWritethrough(
 
 			// 6. Get diagnostics from all servers (wait for fresh results)
 			if (enableDiagnostics) {
-				diagnostics = await getDiagnosticsForFile(dst, cwd, servers, {
+				const fetched = await getDiagnosticsForFile(dst, cwd, servers, {
 					signal: operationSignal,
 					minVersions,
 					expectedDocumentVersions,
 					allowUnversionedLspDiagnostics: false,
 				});
+				diagnostics =
+					fetched && options.transformDiagnostics ? options.transformDiagnostics(dst, fetched) : fetched;
 			}
 		});
 	} catch {
@@ -1155,6 +1141,7 @@ export function createLspWritethrough(cwd: string, options?: WritethroughOptions
 	const resolvedOptions: ResolvedWritethroughOptions = {
 		enableFormat: options?.enableFormat ?? false,
 		enableDiagnostics: options?.enableDiagnostics ?? false,
+		transformDiagnostics: options?.transformDiagnostics,
 	};
 	if (!resolvedOptions.enableFormat && !resolvedOptions.enableDiagnostics) {
 		return writethroughNoop;

package/src/lsp/utils.ts

@@ -221,6 +221,27 @@ export function formatDiagnosticsSummary(diagnostics: Diagnostic[]): string {
 	return parts.length > 0 ? parts.join(", ") : "no issues";
 }
 
+export function summarizeDiagnosticMessages(messages: string[]): { summary: string; errored: boolean } {
+	const counts = { error: 0, warning: 0, info: 0, hint: 0 };
+	for (const message of messages) {
+		const match = message.match(/\[(error|warning|info|hint)\]/i);
+		if (!match) continue;
+		const key = match[1].toLowerCase() as keyof typeof counts;
+		counts[key] += 1;
+	}
+
+	const parts: string[] = [];
+	if (counts.error > 0) parts.push(`${counts.error} error(s)`);
+	if (counts.warning > 0) parts.push(`${counts.warning} warning(s)`);
+	if (counts.info > 0) parts.push(`${counts.info} info(s)`);
+	if (counts.hint > 0) parts.push(`${counts.hint} hint(s)`);
+
+	return {
+		summary: parts.length > 0 ? parts.join(", ") : "no issues",
+		errored: counts.error > 0,
+	};
+}
+
 // =============================================================================
 // Location Formatting
 // =============================================================================

package/src/modes/acp/acp-agent.ts

@@ -47,7 +47,11 @@ import { logger, VERSION } from "@oh-my-pi/pi-utils";
 import { disableProvider, enableProvider, reset as resetCapabilities } from "../../capability";
 import { Settings } from "../../config/settings";
 import { clearPluginRootsAndCaches, resolveActiveProjectRegistryPath } from "../../discovery/helpers";
-import type { ExtensionUIContext, ExtensionUIDialogOptions } from "../../extensibility/extensions";
+import {
+	type ExtensionUIContext,
+	type ExtensionUIDialogOptions,
+	getExtensionUISelectOptionLabel,
+} from "../../extensibility/extensions";
 import { runExtensionCompact } from "../../extensibility/extensions/compact-handler";
 import { getSessionSlashCommands } from "../../extensibility/extensions/get-commands-handler";
 import { buildSkillPromptMessage, getSkillSlashCommandName } from "../../extensibility/skills";
@@ -302,7 +306,7 @@ export function createAcpExtensionUiContext(
 				getSessionId(),
 				"select",
 				title,
-				{ type: "string", enum: options },
+				{ type: "string", enum: options.map(getExtensionUISelectOptionLabel) },
 				dialogOptions,
 			);
 			return typeof value === "string" ? value : undefined;
@@ -1981,7 +1985,7 @@ export class AcpAgent implements Agent {
 		}
 		if (servers.length === 0) {
 			record.mcpManager = undefined;
-			await record.session.refreshMCPTools([]);
+			await record.session.refreshMCPTools([], { activateAll: true });
 			return;
 		}
 
@@ -2008,7 +2012,7 @@ export class AcpAgent implements Agent {
 		}
 
 		record.mcpManager = manager;
-		await record.session.refreshMCPTools(result.tools);
+		await record.session.refreshMCPTools(result.tools, { activateAll: true });
 	}
 
 	#toMcpConfig(server: McpServer): MCPServerConfig {

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

@@ -2,6 +2,7 @@ import type { AssistantMessage, ImageContent, Usage } from "@oh-my-pi/pi-ai";
 import { Container, Image, ImageProtocol, Markdown, Spacer, TERMINAL, Text } from "@oh-my-pi/pi-tui";
 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 { isSilentAbort } from "../../session/messages";
 import { resolveImageOptions } from "../../tools/render-utils";
@@ -21,6 +22,7 @@ export class AssistantMessageComponent extends Container {
 		message?: AssistantMessage,
 		private hideThinkingBlock = false,
 		private readonly onImageUpdate?: () => void,
+		private readonly thinkingRenderers: readonly AssistantThinkingRenderer[] = [],
 	) {
 		super();
 
@@ -131,6 +133,27 @@ export class AssistantMessageComponent extends Container {
 		}
 	}
 
+	#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): void {
 		this.#lastMessage = message;
 
@@ -146,6 +169,7 @@ export class AssistantMessageComponent extends Container {
 		}
 
 		// 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()) {
@@ -166,13 +190,16 @@ export class AssistantMessageComponent extends Container {
 						this.#contentContainer.addChild(new Spacer(1));
 					}
 				} else {
+					const thinkingText = content.thinking.trim();
 					// Thinking traces in thinkingText color, italic
 					this.#contentContainer.addChild(
-						new Markdown(content.thinking.trim(), 1, 0, getMarkdownTheme(), {
+						new Markdown(thinkingText, 1, 0, getMarkdownTheme(), {
 							color: (text: string) => theme.fg("thinkingText", text),
 							italic: true,
 						}),
 					);
+					this.#appendThinkingExtensions(i, thinkingIndex, thinkingText);
+					thinkingIndex += 1;
 					if (hasVisibleContentAfter) {
 						this.#contentContainer.addChild(new Spacer(1));
 					}

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

@@ -49,7 +49,6 @@ export class CustomEditor extends Editor {
 	 *  them, skipping any occurrence inside code spans, fenced blocks, or XML sections. */
 	decorateText = (text: string): string => highlightMagicKeywords(text);
 	onEscape?: () => void;
-	shouldBypassAutocompleteOnEscape?: () => boolean;
 	onClear?: () => void;
 	onExit?: () => void;
 	onCycleThinkingLevel?: () => void;
@@ -186,12 +185,15 @@ export class CustomEditor extends Editor {
 		}
 
 		// Intercept configured interrupt shortcut.
-		// Default behavior keeps autocomplete dismissal, but parent can prioritize global interrupt handling.
-		if (this.#matchesAction(data, "app.interrupt") && this.onEscape) {
-			if (!this.isShowingAutocomplete() || this.shouldBypassAutocompleteOnEscape?.()) {
-				this.onEscape();
-				return;
-			}
+		// When the autocomplete popup is visible, ESC's first job is to dismiss
+		// the popup — let super.handleInput() route it to #cancelAutocomplete().
+		// The user can press ESC again afterward to fire the global interrupt
+		// handler. This matches the standard TUI/IDE pattern and prevents a
+		// single ESC from both closing an @ completion and aborting an active
+		// agent run (#1655).
+		if (this.#matchesAction(data, "app.interrupt") && this.onEscape && !this.isShowingAutocomplete()) {
+			this.onEscape();
+			return;
 		}
 
 		// Intercept configured clear shortcut

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

@@ -7,6 +7,7 @@ import {
 	extractPrintableText,
 	fuzzyFilter,
 	Markdown,
+	type MarkdownTheme,
 	matchesKey,
 	padding,
 	renderInlineMarkdown,
@@ -14,8 +15,8 @@ import {
 	Spacer,
 	Text,
 	type TUI,
-	truncateToWidth,
 	visibleWidth,
+	wrapTextWithAnsi,
 } from "@oh-my-pi/pi-tui";
 import { getMarkdownTheme, type ThemeColor, theme } from "../../modes/theme/theme";
 import {
@@ -69,6 +70,34 @@ export interface HookSelectorOptions {
 	slider?: HookSelectorSlider;
 }
 
+export interface HookSelectorOption {
+	label: string;
+	description?: string;
+}
+
+export type HookSelectorOptionInput = string | HookSelectorOption;
+
+function normalizeHookSelectorOption(option: HookSelectorOptionInput): HookSelectorOption {
+	if (typeof option === "string") return { label: option };
+	if (option.description?.trim()) {
+		return { label: option.label, description: option.description.trim() };
+	}
+	return { label: option.label };
+}
+
+function splitLeadingSpacesForWrap(line: string, width: number): { indent: string; body: string } {
+	let indentLength = 0;
+	while (indentLength < line.length && line.charCodeAt(indentLength) === 32) {
+		indentLength += 1;
+	}
+	const maxIndentLength = Math.max(0, width - 1);
+	const clampedIndentLength = Math.min(indentLength, maxIndentLength);
+	return {
+		indent: line.slice(0, clampedIndentLength),
+		body: line.slice(indentLength),
+	};
+}
+
 class OutlinedList extends Container {
 	#lines: string[] = [];
 
@@ -81,19 +110,26 @@ class OutlinedList extends Container {
 		const borderColor = (text: string) => theme.fg("border", text);
 		const horizontal = borderColor(theme.boxSharp.horizontal.repeat(Math.max(1, width)));
 		const innerWidth = Math.max(1, width - 2);
-		const content = this.#lines.map(line => {
+		const content: string[] = [];
+		for (const line of this.#lines) {
 			const normalized = replaceTabs(line);
-			const fitted = truncateToWidth(normalized, innerWidth);
-			const pad = Math.max(0, innerWidth - visibleWidth(fitted));
-			return `${borderColor(theme.boxSharp.vertical)}${fitted}${padding(pad)}${borderColor(theme.boxSharp.vertical)}`;
-		});
+			const { indent, body } = splitLeadingSpacesForWrap(normalized, innerWidth);
+			const wrapped = wrapTextWithAnsi(body, Math.max(1, innerWidth - visibleWidth(indent)));
+			for (const wrappedBody of wrapped.length > 0 ? wrapped : [""]) {
+				const wrappedLine = `${indent}${wrappedBody}`;
+				const pad = Math.max(0, innerWidth - visibleWidth(wrappedLine));
+				content.push(
+					`${borderColor(theme.boxSharp.vertical)}${wrappedLine}${padding(pad)}${borderColor(theme.boxSharp.vertical)}`,
+				);
+			}
+		}
 		return [horizontal, ...content, horizontal];
 	}
 }
 
 export class HookSelectorComponent extends Container {
-	#options: string[];
-	#filteredOptions: string[];
+	#options: HookSelectorOption[];
+	#filteredOptions: HookSelectorOption[];
 	#searchQuery = "";
 	#selectedIndex: number;
 	#maxVisible: number;
@@ -110,17 +146,18 @@ export class HookSelectorComponent extends Container {
 	#slider: HookSelectorSlider | undefined;
 	#sliderIndex: number = 0;
 	#sliderComponent: Text | undefined;
+	#lastRenderWidth: number | undefined;
 	constructor(
 		title: string,
-		options: string[],
+		options: HookSelectorOptionInput[],
 		onSelect: (option: string) => void,
 		onCancel: () => void,
 		opts?: HookSelectorOptions,
 	) {
 		super();
 
-		this.#options = options;
-		this.#filteredOptions = options;
+		this.#options = options.map(normalizeHookSelectorOption);
+		this.#filteredOptions = this.#options;
 		this.#selectedIndex = Math.min(opts?.initialIndex ?? 0, this.#filteredOptions.length - 1);
 		this.#maxVisible = Math.max(3, opts?.maxVisible ?? 12);
 		this.#onSelectCallback = onSelect;
@@ -156,7 +193,7 @@ export class HookSelectorComponent extends Container {
 					opts?.onTimeout?.();
 					const selected = this.#filteredOptions[this.#selectedIndex];
 					if (selected) {
-						this.#onSelectCallback(selected);
+						this.#onSelectCallback(selected.label);
 					} else {
 						this.#onCancelCallback();
 					}
@@ -180,32 +217,111 @@ export class HookSelectorComponent extends Container {
 		this.#updateList();
 	}
 
-	#updateList(): void {
+	#renderOptionLines(option: HookSelectorOption, isSelected: boolean, mdTheme: MarkdownTheme): string[] {
+		const label = isSelected
+			? renderInlineMarkdown(option.label, mdTheme, t => theme.fg("accent", t))
+			: renderInlineMarkdown(option.label, mdTheme, t => theme.fg("text", t));
+		const prefix = isSelected ? theme.fg("accent", `${theme.nav.cursor} `) : "  ";
+		const lines = [prefix + label];
+		if (option.description) {
+			const description = renderInlineMarkdown(option.description, mdTheme, t => theme.fg("muted", t));
+			lines.push(`    ${description}`);
+		}
+		return lines;
+	}
+
+	#renderedLineRowCount(line: string, renderWidth: number): number {
+		const normalized = replaceTabs(line);
+		if (this.#outlinedList) {
+			const innerWidth = Math.max(1, renderWidth - 2);
+			const { indent, body } = splitLeadingSpacesForWrap(normalized, innerWidth);
+			const wrapped = wrapTextWithAnsi(body, Math.max(1, innerWidth - visibleWidth(indent)));
+			return Math.max(1, wrapped.length);
+		}
+		const wrapped = wrapTextWithAnsi(normalized, Math.max(1, renderWidth - 2));
+		return Math.max(1, wrapped.length);
+	}
+
+	#optionRowCount(
+		option: HookSelectorOption,
+		renderWidth: number | undefined,
+		isSelected: boolean,
+		mdTheme: MarkdownTheme,
+	): number {
+		if (renderWidth === undefined) return option.description ? 2 : 1;
+		let rows = 0;
+		for (const line of this.#renderOptionLines(option, isSelected, mdTheme)) {
+			rows += this.#renderedLineRowCount(line, renderWidth);
+		}
+		return rows;
+	}
+
+	#totalOptionRows(options: HookSelectorOption[], renderWidth?: number, mdTheme?: MarkdownTheme): number {
+		const themeForRows = mdTheme ?? getMarkdownTheme();
+		let rows = 0;
+		for (const option of options) {
+			rows += this.#optionRowCount(option, renderWidth, false, themeForRows);
+		}
+		return rows;
+	}
+
+	#getVisibleOptionRange(
+		total: number,
+		renderWidth?: number,
+		mdTheme: MarkdownTheme = getMarkdownTheme(),
+	): { startIndex: number; endIndex: number } {
+		if (total === 0) return { startIndex: 0, endIndex: 0 };
+
+		const rowBudget = Math.max(1, this.#maxVisible);
+		const selectedIndex = Math.max(0, Math.min(this.#selectedIndex, total - 1));
+		let startIndex = selectedIndex;
+		let endIndex = selectedIndex + 1;
+		let rows = this.#optionRowCount(this.#filteredOptions[selectedIndex]!, renderWidth, true, mdTheme);
+		let beforeRows = 0;
+		const targetBeforeRows = Math.max(0, Math.floor((rowBudget - rows) / 2));
+
+		while (startIndex > 0) {
+			const cost = this.#optionRowCount(this.#filteredOptions[startIndex - 1]!, renderWidth, false, mdTheme);
+			if (beforeRows + cost > targetBeforeRows || rows + cost > rowBudget) break;
+			startIndex--;
+			beforeRows += cost;
+			rows += cost;
+		}
+
+		while (endIndex < total) {
+			const cost = this.#optionRowCount(this.#filteredOptions[endIndex]!, renderWidth, false, mdTheme);
+			if (rows + cost > rowBudget) break;
+			endIndex++;
+			rows += cost;
+		}
+
+		while (startIndex > 0) {
+			const cost = this.#optionRowCount(this.#filteredOptions[startIndex - 1]!, renderWidth, false, mdTheme);
+			if (rows + cost > rowBudget) break;
+			startIndex--;
+			rows += cost;
+		}
+
+		return { startIndex, endIndex };
+	}
+
+	#updateList(renderWidth = this.#lastRenderWidth): void {
 		const lines: string[] = [];
 		const total = this.#filteredOptions.length;
-		const startIndex = Math.max(
-			0,
-			Math.min(this.#selectedIndex - Math.floor(this.#maxVisible / 2), total - this.#maxVisible),
-		);
-		const endIndex = Math.min(startIndex + this.#maxVisible, total);
-
 		const mdTheme = getMarkdownTheme();
+		const { startIndex, endIndex } = this.#getVisibleOptionRange(total, renderWidth, mdTheme);
+
 		for (let i = startIndex; i < endIndex; i++) {
 			const option = this.#filteredOptions[i];
 			if (option === undefined) continue;
-			const isSelected = i === this.#selectedIndex;
-			const label = isSelected
-				? renderInlineMarkdown(option, mdTheme, t => theme.fg("accent", t))
-				: renderInlineMarkdown(option, mdTheme, t => theme.fg("text", t));
-			const prefix = isSelected ? theme.fg("accent", `${theme.nav.cursor} `) : "  ";
-			lines.push(prefix + label);
+			lines.push(...this.#renderOptionLines(option, i === this.#selectedIndex, mdTheme));
 		}
 
 		if (total === 0) {
 			lines.push(theme.fg("dim", "  No matching options"));
 		}
 
-		if (startIndex > 0 || endIndex < total || this.#shouldRenderSearchStatus()) {
+		if (startIndex > 0 || endIndex < total || this.#shouldRenderSearchStatus(renderWidth, mdTheme)) {
 			lines.push(this.#renderStatusLine(total));
 		}
 		if (this.#outlinedList) {
@@ -253,12 +369,12 @@ export class HookSelectorComponent extends Container {
 		slider.onChange?.(next);
 	}
 
-	#isSearchEnabled(): boolean {
-		return this.#options.length > this.#maxVisible;
+	#isSearchEnabled(renderWidth = this.#lastRenderWidth, mdTheme?: MarkdownTheme): boolean {
+		return this.#totalOptionRows(this.#options, renderWidth, mdTheme) > this.#maxVisible;
 	}
 
-	#shouldRenderSearchStatus(): boolean {
-		return this.#isSearchEnabled() || this.#searchQuery.length > 0;
+	#shouldRenderSearchStatus(renderWidth = this.#lastRenderWidth, mdTheme?: MarkdownTheme): boolean {
+		return this.#isSearchEnabled(renderWidth, mdTheme) || this.#searchQuery.length > 0;
 	}
 
 	#renderStatusLine(total: number): string {
@@ -273,7 +389,9 @@ export class HookSelectorComponent extends Container {
 
 	#setSearchQuery(query: string): void {
 		this.#searchQuery = query;
-		this.#filteredOptions = query.trim() ? fuzzyFilter(this.#options, query, option => option) : this.#options;
+		this.#filteredOptions = query.trim()
+			? fuzzyFilter(this.#options, query, option => `${option.label} ${option.description ?? ""}`)
+			: this.#options;
 		this.#selectedIndex = 0;
 		this.#updateList();
 	}
@@ -322,7 +440,7 @@ export class HookSelectorComponent extends Container {
 			}
 		} else if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
 			const selected = this.#filteredOptions[this.#selectedIndex];
-			if (selected) this.#onSelectCallback(selected);
+			if (selected) this.#onSelectCallback(selected.label);
 		} else if (matchesKey(keyData, "left") || (this.#slider && !this.#isSearchEnabled() && keyData === "h")) {
 			if (this.#slider) this.#moveSlider(-1);
 			else this.#onLeftCallback?.();
@@ -334,6 +452,15 @@ export class HookSelectorComponent extends Container {
 		}
 	}
 
+	override render(width: number): string[] {
+		const renderWidth = Math.max(1, width);
+		if (this.#lastRenderWidth !== renderWidth) {
+			this.#lastRenderWidth = renderWidth;
+			this.#updateList(renderWidth);
+		}
+		return super.render(renderWidth);
+	}
+
 	dispose(): void {
 		this.#countdown?.dispose();
 	}

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

@@ -141,6 +141,14 @@ export interface ToolExecutionHandle {
 	setExpanded(expanded: boolean): void;
 }
 
+/** Drive pending-tool redraws at ~60fps so the animated border sweep is smooth.
+ * The TUI already throttles at its 16ms `MIN_RENDER_INTERVAL_MS`, so this is the
+ * natural upper bound and static frames diff to a no-op redraw at ~zero cost. */
+const SPINNER_RENDER_INTERVAL_MS = 16;
+/** Advance the spinner glyph at its classic ~12.5fps step, decoupled from the
+ * 60fps render cadence (mirrors `Loader`). */
+const SPINNER_GLYPH_ADVANCE_MS = 80;
+
 /**
  * Component that renders a tool call with its result (updateable)
  */
@@ -177,6 +185,7 @@ export class ToolExecutionComponent extends Container {
 	// Spinner animation for partial task results
 	#spinnerFrame?: number;
 	#spinnerInterval?: NodeJS.Timeout;
+	#lastSpinnerAdvanceAt = 0;
 	// Todo write completion strikethrough reveal animation
 	#todoStrikeInterval?: NodeJS.Timeout;
 	// Track if args are still being streamed (for edit/write spinner)
@@ -404,13 +413,20 @@ export class ToolExecutionComponent extends Container {
 			this.#isPartial && shimmerEnabled() && (this.#toolName === "bash" || this.#toolName === "eval");
 		const needsSpinner = isStreamingArgs || isPartialTask || isPendingExecBlock;
 		if (needsSpinner && !this.#spinnerInterval) {
+			this.#lastSpinnerAdvanceAt = performance.now();
 			this.#spinnerInterval = setInterval(() => {
+				const now = performance.now();
 				const frameCount = theme.spinnerFrames.length;
-				if (frameCount === 0) return;
-				this.#spinnerFrame = ((this.#spinnerFrame ?? -1) + 1) % frameCount;
-				this.#renderState.spinnerFrame = this.#spinnerFrame;
+				// Redraw at ~60fps for a smooth border sweep, but only step the spinner
+				// glyph at its classic ~12.5fps cadence. The TUI throttles renders at
+				// 16ms and the differ drops no-op redraws, so the extra ticks are free.
+				if (frameCount > 0 && now - this.#lastSpinnerAdvanceAt >= SPINNER_GLYPH_ADVANCE_MS) {
+					this.#spinnerFrame = ((this.#spinnerFrame ?? -1) + 1) % frameCount;
+					this.#renderState.spinnerFrame = this.#spinnerFrame;
+					this.#lastSpinnerAdvanceAt = now;
+				}
 				this.#ui.requestRender();
-			}, 80);
+			}, SPINNER_RENDER_INTERVAL_MS);
 		} else if (!needsSpinner && this.#spinnerInterval) {
 			clearInterval(this.#spinnerInterval);
 			this.#spinnerInterval = undefined;

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

@@ -277,8 +277,11 @@ export class EventController {
 			this.#lastThinkingCount = 0;
 			this.#assistantMessageStreaming = true;
 			this.#resetReadGroup();
-			this.ctx.streamingComponent = new AssistantMessageComponent(undefined, this.ctx.hideThinkingBlock, () =>
-				this.ctx.ui.requestRender(),
+			this.ctx.streamingComponent = new AssistantMessageComponent(
+				undefined,
+				this.ctx.hideThinkingBlock,
+				() => this.ctx.ui.requestRender(),
+				this.ctx.session.extensionRunner?.getAssistantThinkingRenderers(),
 			);
 			this.ctx.streamingMessage = event.message;
 			this.ctx.chatContainer.addChild(this.ctx.streamingComponent);