@oh-my-pi/pi-coding-agent 13.14.0 → 13.15.2

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

@@ -1,41 +1,41 @@
 import { Editor, type KeyId, matchesKey, parseKittySequence } from "@oh-my-pi/pi-tui";
-import type { AppAction } from "../../config/keybindings";
+import type { AppKeybinding } from "../../config/keybindings";
 
 type ConfigurableEditorAction = Extract<
-	AppAction,
-	| "interrupt"
-	| "clear"
-	| "exit"
-	| "suspend"
-	| "cycleThinkingLevel"
-	| "cycleModelForward"
-	| "cycleModelBackward"
-	| "selectModel"
-	| "expandTools"
-	| "toggleThinking"
-	| "externalEditor"
-	| "historySearch"
-	| "dequeue"
-	| "pasteImage"
-	| "copyPrompt"
+	AppKeybinding,
+	| "app.interrupt"
+	| "app.clear"
+	| "app.exit"
+	| "app.suspend"
+	| "app.thinking.cycle"
+	| "app.model.cycleForward"
+	| "app.model.cycleBackward"
+	| "app.model.select"
+	| "app.tools.expand"
+	| "app.thinking.toggle"
+	| "app.editor.external"
+	| "app.history.search"
+	| "app.message.dequeue"
+	| "app.clipboard.pasteImage"
+	| "app.clipboard.copyPrompt"
 >;
 
 const DEFAULT_ACTION_KEYS: Record<ConfigurableEditorAction, KeyId[]> = {
-	interrupt: ["escape"],
-	clear: ["ctrl+c"],
-	exit: ["ctrl+d"],
-	suspend: ["ctrl+z"],
-	cycleThinkingLevel: ["shift+tab"],
-	cycleModelForward: ["ctrl+p"],
-	cycleModelBackward: ["shift+ctrl+p"],
-	selectModel: ["ctrl+l"],
-	expandTools: ["ctrl+o"],
-	toggleThinking: ["ctrl+t"],
-	externalEditor: ["ctrl+g"],
-	historySearch: ["ctrl+r"],
-	dequeue: ["alt+up"],
-	pasteImage: ["ctrl+v"],
-	copyPrompt: ["alt+shift+c"],
+	"app.interrupt": ["escape"],
+	"app.clear": ["ctrl+c"],
+	"app.exit": ["ctrl+d"],
+	"app.suspend": ["ctrl+z"],
+	"app.thinking.cycle": ["shift+tab"],
+	"app.model.cycleForward": ["ctrl+p"],
+	"app.model.cycleBackward": ["shift+ctrl+p"],
+	"app.model.select": ["ctrl+l"],
+	"app.tools.expand": ["ctrl+o"],
+	"app.thinking.toggle": ["ctrl+t"],
+	"app.editor.external": ["ctrl+g"],
+	"app.history.search": ["ctrl+r"],
+	"app.message.dequeue": ["alt+up"],
+	"app.clipboard.pasteImage": ["ctrl+v"],
+	"app.clipboard.copyPrompt": ["alt+shift+c"],
 };
 
 /**
@@ -115,13 +115,13 @@ export class CustomEditor extends Editor {
 		}
 
 		// Intercept configured image paste (async - fires and handles result)
-		if (this.#matchesAction(data, "pasteImage") && this.onPasteImage) {
+		if (this.#matchesAction(data, "app.clipboard.pasteImage") && this.onPasteImage) {
 			void this.onPasteImage();
 			return;
 		}
 
 		// Intercept configured external editor shortcut
-		if (this.#matchesAction(data, "externalEditor") && this.onExternalEditor) {
+		if (this.#matchesAction(data, "app.editor.external") && this.onExternalEditor) {
 			this.onExternalEditor();
 			return;
 		}
@@ -133,56 +133,56 @@ export class CustomEditor extends Editor {
 		}
 
 		// Intercept configured suspend shortcut
-		if (this.#matchesAction(data, "suspend") && this.onSuspend) {
+		if (this.#matchesAction(data, "app.suspend") && this.onSuspend) {
 			this.onSuspend();
 			return;
 		}
 
 		// Intercept configured thinking block visibility toggle
-		if (this.#matchesAction(data, "toggleThinking") && this.onToggleThinking) {
+		if (this.#matchesAction(data, "app.thinking.toggle") && this.onToggleThinking) {
 			this.onToggleThinking();
 			return;
 		}
 
 		// Intercept configured model selector shortcut
-		if (this.#matchesAction(data, "selectModel") && this.onSelectModel) {
+		if (this.#matchesAction(data, "app.model.select") && this.onSelectModel) {
 			this.onSelectModel();
 			return;
 		}
 
 		// Intercept configured history search shortcut
-		if (this.#matchesAction(data, "historySearch") && this.onHistorySearch) {
+		if (this.#matchesAction(data, "app.history.search") && this.onHistorySearch) {
 			this.onHistorySearch();
 			return;
 		}
 
 		// Intercept configured tool output expansion shortcut
-		if (this.#matchesAction(data, "expandTools") && this.onExpandTools) {
+		if (this.#matchesAction(data, "app.tools.expand") && this.onExpandTools) {
 			this.onExpandTools();
 			return;
 		}
 
 		// Intercept configured backward model cycling (check before forward cycling)
-		if (this.#matchesAction(data, "cycleModelBackward") && this.onCycleModelBackward) {
+		if (this.#matchesAction(data, "app.model.cycleBackward") && this.onCycleModelBackward) {
 			this.onCycleModelBackward();
 			return;
 		}
 
 		// Intercept configured forward model cycling
-		if (this.#matchesAction(data, "cycleModelForward") && this.onCycleModelForward) {
+		if (this.#matchesAction(data, "app.model.cycleForward") && this.onCycleModelForward) {
 			this.onCycleModelForward();
 			return;
 		}
 
 		// Intercept configured thinking level cycling
-		if (this.#matchesAction(data, "cycleThinkingLevel") && this.onCycleThinkingLevel) {
+		if (this.#matchesAction(data, "app.thinking.cycle") && this.onCycleThinkingLevel) {
 			this.onCycleThinkingLevel();
 			return;
 		}
 
 		// Intercept configured interrupt shortcut.
 		// Default behavior keeps autocomplete dismissal, but parent can prioritize global interrupt handling.
-		if (this.#matchesAction(data, "interrupt") && this.onEscape) {
+		if (this.#matchesAction(data, "app.interrupt") && this.onEscape) {
 			if (!this.isShowingAutocomplete() || this.shouldBypassAutocompleteOnEscape?.()) {
 				this.onEscape();
 				return;
@@ -190,13 +190,13 @@ export class CustomEditor extends Editor {
 		}
 
 		// Intercept configured clear shortcut
-		if (this.#matchesAction(data, "clear") && this.onClear) {
+		if (this.#matchesAction(data, "app.clear") && this.onClear) {
 			this.onClear();
 			return;
 		}
 
 		// Intercept configured exit shortcut (only when editor is empty)
-		if (this.#matchesAction(data, "exit")) {
+		if (this.#matchesAction(data, "app.exit")) {
 			if (this.getText().length === 0 && this.onExit) {
 				this.onExit();
 			}
@@ -205,13 +205,13 @@ export class CustomEditor extends Editor {
 		}
 
 		// Intercept configured dequeue shortcut (restore queued message to editor)
-		if (this.#matchesAction(data, "dequeue") && this.onDequeue) {
+		if (this.#matchesAction(data, "app.message.dequeue") && this.onDequeue) {
 			this.onDequeue();
 			return;
 		}
 
 		// Intercept configured copy-prompt shortcut
-		if (this.#matchesAction(data, "copyPrompt") && this.onCopyPrompt) {
+		if (this.#matchesAction(data, "app.clipboard.copyPrompt") && this.onCopyPrompt) {
 			this.onCopyPrompt();
 			return;
 		}

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

@@ -24,6 +24,7 @@ import {
 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 { ExtensionList } from "./extension-list";
 import { InspectorPanel } from "./inspector-panel";
 import { applyFilter, createInitialState, filterByProvider, refreshState, toggleProvider } from "./state-manager";
@@ -251,7 +252,7 @@ export class ExtensionDashboard extends Container {
 		}
 
 		// Escape - clear search first, then close
-		if (matchesKey(data, "escape") || matchesKey(data, "esc")) {
+		if (matchesAppInterrupt(data)) {
 			if (this.#state.searchQuery.length > 0) {
 				this.#state.searchQuery = "";
 				this.#state.searchFiltered = this.#state.tabFiltered;

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

@@ -11,6 +11,7 @@ import {
 	visibleWidth,
 } from "@oh-my-pi/pi-tui";
 import { theme } from "../../modes/theme/theme";
+import { matchesAppInterrupt } from "../../modes/utils/keybinding-matchers";
 import type { HistoryEntry, HistoryStorage } from "../../session/history-storage";
 import { DynamicBorder } from "./dynamic-border";
 
@@ -137,7 +138,7 @@ export class HistorySearchComponent extends Container {
 			return;
 		}
 
-		if (matchesKey(keyData, "escape") || matchesKey(keyData, "esc")) {
+		if (matchesAppInterrupt(keyData)) {
 			this.#onCancel();
 			return;
 		}

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

@@ -4,6 +4,7 @@
  */
 import { Container, Editor, matchesKey, Spacer, Text, type TUI } from "@oh-my-pi/pi-tui";
 import { getEditorTheme, theme } from "../../modes/theme/theme";
+import { matchesAppInterrupt } from "../../modes/utils/keybinding-matchers";
 import { getEditorCommand, openInEditor } from "../../utils/external-editor";
 import { DynamicBorder } from "./dynamic-border";
 
@@ -67,7 +68,7 @@ export class HookEditorComponent extends Container {
 		}
 
 		// Escape to cancel
-		if (matchesKey(keyData, "escape") || matchesKey(keyData, "esc")) {
+		if (matchesAppInterrupt(keyData)) {
 			this.#onCancelCallback();
 			return;
 		}

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

@@ -1,8 +1,9 @@
 /**
  * Simple text input component for hooks.
  */
-import { Container, Input, matchesKey, Spacer, Text, type TUI } from "@oh-my-pi/pi-tui";
-import { theme } from "../../modes/theme/theme";
+import { Container, Input, Markdown, matchesKey, Spacer, Text, type TUI } from "@oh-my-pi/pi-tui";
+import { getMarkdownTheme, theme } from "../../modes/theme/theme";
+import { matchesAppInterrupt } from "../../modes/utils/keybinding-matchers";
 import { CountdownTimer } from "./countdown-timer";
 import { DynamicBorder } from "./dynamic-border";
 
@@ -16,7 +17,7 @@ export class HookInputComponent extends Container {
 	#input: Input;
 	#onSubmitCallback: (value: string) => void;
 	#onCancelCallback: () => void;
-	#titleText: Text;
+	#titleComponent: Markdown;
 	#baseTitle: string;
 	#countdown: CountdownTimer | undefined;
 
@@ -36,15 +37,15 @@ export class HookInputComponent extends Container {
 		this.addChild(new DynamicBorder());
 		this.addChild(new Spacer(1));
 
-		this.#titleText = new Text(theme.fg("accent", title), 1, 0);
-		this.addChild(this.#titleText);
+		this.#titleComponent = new Markdown(title, 1, 0, getMarkdownTheme(), { color: t => theme.fg("accent", t) });
+		this.addChild(this.#titleComponent);
 		this.addChild(new Spacer(1));
 
 		if (opts?.timeout && opts.timeout > 0 && opts.tui) {
 			this.#countdown = new CountdownTimer(
 				opts.timeout,
 				opts.tui,
-				s => this.#titleText.setText(theme.fg("accent", `${this.#baseTitle} (${s}s)`)),
+				s => this.#titleComponent.setText(`${this.#baseTitle} (${s}s)`),
 				() => {
 					opts.onTimeout?.();
 					this.#onCancelCallback();
@@ -65,7 +66,7 @@ export class HookInputComponent extends Container {
 		this.#countdown?.reset();
 		if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
 			this.#onSubmitCallback(this.#input.getValue());
-		} else if (matchesKey(keyData, "escape") || matchesKey(keyData, "esc")) {
+		} else if (matchesAppInterrupt(keyData)) {
 			this.#onCancelCallback();
 		} else {
 			this.#input.handleInput(keyData);

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

@@ -4,8 +4,10 @@
  */
 import {
 	Container,
+	Markdown,
 	matchesKey,
 	padding,
+	renderInlineMarkdown,
 	replaceTabs,
 	Spacer,
 	Text,
@@ -13,7 +15,8 @@ import {
 	truncateToWidth,
 	visibleWidth,
 } from "@oh-my-pi/pi-tui";
-import { theme } from "../../modes/theme/theme";
+import { getMarkdownTheme, theme } from "../../modes/theme/theme";
+import { matchesSelectCancel } from "../../modes/utils/keybinding-matchers";
 import { CountdownTimer } from "./countdown-timer";
 import { DynamicBorder } from "./dynamic-border";
 
@@ -59,7 +62,7 @@ export class HookSelectorComponent extends Container {
 	#outlinedList: OutlinedList | undefined;
 	#onSelectCallback: (option: string) => void;
 	#onCancelCallback: () => void;
-	#titleText: Text;
+	#titleComponent: Markdown;
 	#baseTitle: string;
 	#countdown: CountdownTimer | undefined;
 	#onLeftCallback: (() => void) | undefined;
@@ -85,15 +88,15 @@ export class HookSelectorComponent extends Container {
 		this.addChild(new DynamicBorder());
 		this.addChild(new Spacer(1));
 
-		this.#titleText = new Text(theme.fg("accent", title), 1, 0);
-		this.addChild(this.#titleText);
+		this.#titleComponent = new Markdown(title, 1, 0, getMarkdownTheme(), { color: t => theme.fg("accent", t) });
+		this.addChild(this.#titleComponent);
 		this.addChild(new Spacer(1));
 
 		if (opts?.timeout && opts.timeout > 0 && opts.tui) {
 			this.#countdown = new CountdownTimer(
 				opts.timeout,
 				opts.tui,
-				s => this.#titleText.setText(theme.fg("accent", `${this.#baseTitle} (${s}s)`)),
+				s => this.#titleComponent.setText(`${this.#baseTitle} (${s}s)`),
 				() => {
 					opts?.onTimeout?.();
 					// Auto-select current option on timeout (typically the first/recommended option)
@@ -131,12 +134,14 @@ export class HookSelectorComponent extends Container {
 		);
 		const endIndex = Math.min(startIndex + this.#maxVisible, this.#options.length);
 
+		const mdTheme = getMarkdownTheme();
 		for (let i = startIndex; i < endIndex; i++) {
 			const isSelected = i === this.#selectedIndex;
-			const text = isSelected
-				? theme.fg("accent", `${theme.nav.cursor} `) + theme.fg("accent", this.#options[i])
-				: `  ${theme.fg("text", this.#options[i])}`;
-			lines.push(text);
+			const label = isSelected
+				? renderInlineMarkdown(this.#options[i], mdTheme, t => theme.fg("accent", t))
+				: renderInlineMarkdown(this.#options[i], mdTheme, t => theme.fg("text", t));
+			const prefix = isSelected ? theme.fg("accent", `${theme.nav.cursor} `) : "  ";
+			lines.push(prefix + label);
 		}
 
 		if (startIndex > 0 || endIndex < this.#options.length) {
@@ -169,7 +174,7 @@ export class HookSelectorComponent extends Container {
 			this.#onLeftCallback?.();
 		} else if (matchesKey(keyData, "right")) {
 			this.#onRightCallback?.();
-		} else if (matchesKey(keyData, "escape") || matchesKey(keyData, "esc") || matchesKey(keyData, "ctrl+c")) {
+		} else if (matchesSelectCancel(keyData)) {
 			this.#onCancelCallback();
 		}
 	}

package/src/modes/components/keybinding-hints.ts

@@ -1,8 +1,8 @@
 /**
  * Utilities for formatting keybinding hints in the UI.
  */
-import { type EditorAction, getEditorKeybindings, type KeyId } from "@oh-my-pi/pi-tui";
-import type { AppAction, KeybindingsManager } from "../../config/keybindings";
+import { getKeybindings, type Keybinding, type KeyId } from "@oh-my-pi/pi-tui";
+import type { AppKeybinding, KeybindingsManager } from "../../config/keybindings";
 import { theme } from "../../modes/theme/theme";
 
 /**
@@ -17,14 +17,14 @@ function formatKeys(keys: KeyId[]): string {
 /**
  * Get display string for an editor action.
  */
-export function editorKey(action: EditorAction): string {
-	return formatKeys(getEditorKeybindings().getKeys(action));
+export function editorKey(action: Keybinding): string {
+	return formatKeys(getKeybindings().getKeys(action));
 }
 
 /**
  * Get display string for an app action.
  */
-export function appKey(keybindings: KeybindingsManager, action: AppAction): string {
+export function appKey(keybindings: KeybindingsManager, action: AppKeybinding): string {
 	return formatKeys(keybindings.getKeys(action));
 }
 
@@ -32,11 +32,11 @@ export function appKey(keybindings: KeybindingsManager, action: AppAction): stri
  * Format a keybinding hint with consistent styling: dim key, muted description.
  * Looks up the key from editor keybindings automatically.
  *
- * @param action - Editor action name (e.g., "selectConfirm", "expandTools")
+ * @param action - Keybinding action name (e.g., "tui.select.confirm", "app.tools.expand")
  * @param description - Description text (e.g., "to expand", "cancel")
  * @returns Formatted string with dim key and muted description
  */
-export function keyHint(action: EditorAction, description: string): string {
+export function keyHint(action: Keybinding, description: string): string {
 	return theme.fg("dim", editorKey(action)) + theme.fg("muted", ` ${description}`);
 }
 
@@ -45,11 +45,11 @@ export function keyHint(action: EditorAction, description: string): string {
  * Requires the KeybindingsManager instance.
  *
  * @param keybindings - KeybindingsManager instance
- * @param action - App action name (e.g., "interrupt", "externalEditor")
+ * @param action - App keybinding name (e.g., "app.interrupt", "app.editor.external")
  * @param description - Description text
  * @returns Formatted string with dim key and muted description
  */
-export function appKeyHint(keybindings: KeybindingsManager, action: AppAction, description: string): string {
+export function appKeyHint(keybindings: KeybindingsManager, action: AppKeybinding, description: string): string {
 	return theme.fg("dim", appKey(keybindings, action)) + theme.fg("muted", ` ${description}`);
 }
 

package/src/modes/components/login-dialog.ts

@@ -1,5 +1,5 @@
 import { getOAuthProviders } from "@oh-my-pi/pi-ai";
-import { Container, getEditorKeybindings, Input, Spacer, Text, type TUI } from "@oh-my-pi/pi-tui";
+import { Container, getKeybindings, Input, Spacer, Text, type TUI } from "@oh-my-pi/pi-tui";
 import { theme } from "../../modes/theme/theme";
 import { openPath } from "../../utils/open";
 import { DynamicBorder } from "./dynamic-border";
@@ -151,9 +151,9 @@ export class LoginDialogComponent extends Container {
 	}
 
 	handleInput(data: string): void {
-		const kb = getEditorKeybindings();
+		const kb = getKeybindings();
 
-		if (kb.matches(data, "selectCancel")) {
+		if (kb.matches(data, "tui.select.cancel")) {
 			this.#cancel();
 			return;
 		}

package/src/modes/components/mcp-add-wizard.ts

@@ -19,6 +19,7 @@ import { analyzeAuthError, discoverOAuthEndpoints } from "../../mcp/oauth-discov
 import type { MCPHttpServerConfig, MCPServerConfig, MCPSseServerConfig, MCPStdioServerConfig } from "../../mcp/types";
 import { shortenPath } from "../../tools/render-utils";
 import { theme } from "../theme/theme";
+import { matchesAppInterrupt } from "../utils/keybinding-matchers";
 import { DynamicBorder } from "./dynamic-border";
 
 type TransportType = "stdio" | "http" | "sse";
@@ -452,7 +453,7 @@ export class MCPAddWizard extends Container {
 		}
 
 		// Handle Escape (always handled by wizard)
-		if (matchesKey(keyData, "escape")) {
+		if (matchesAppInterrupt(keyData)) {
 			if (this.#currentStep === "name") {
 				// Cancel wizard
 				this.#onCancelCallback();

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

@@ -1,6 +1,17 @@
 import { ThinkingLevel } from "@oh-my-pi/pi-agent-core";
 import { getSupportedEfforts, type Model, modelsAreEqual } from "@oh-my-pi/pi-ai";
-import { Container, Input, matchesKey, Spacer, type Tab, TabBar, Text, type TUI, visibleWidth } from "@oh-my-pi/pi-tui";
+import {
+	Container,
+	getKeybindings,
+	Input,
+	matchesKey,
+	Spacer,
+	type Tab,
+	TabBar,
+	Text,
+	type TUI,
+	visibleWidth,
+} from "@oh-my-pi/pi-tui";
 import { MODEL_ROLE_IDS, MODEL_ROLES, type ModelRegistry, type ModelRole } from "../../config/model-registry";
 import { resolveModelRoleValue } from "../../config/model-resolver";
 import type { Settings } from "../../config/settings";
@@ -647,7 +658,7 @@ export class ModelSelectorComponent extends Container {
 		}
 
 		// Escape or Ctrl+C - close selector
-		if (matchesKey(keyData, "escape") || matchesKey(keyData, "esc") || matchesKey(keyData, "ctrl+c")) {
+		if (getKeybindings().matches(keyData, "tui.select.cancel")) {
 			this.#onCancelCallback();
 			return;
 		}
@@ -698,7 +709,7 @@ export class ModelSelectorComponent extends Container {
 			return;
 		}
 
-		if (matchesKey(keyData, "escape") || matchesKey(keyData, "esc") || matchesKey(keyData, "ctrl+c")) {
+		if (getKeybindings().matches(keyData, "tui.select.cancel")) {
 			if (this.#menuStep === "thinking" && this.#menuSelectedRole !== null) {
 				this.#menuStep = "role";
 				const roleIndex = MENU_ROLE_ACTIONS.findIndex(action => action.role === this.#menuSelectedRole);

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

@@ -1,6 +1,7 @@
 import { getOAuthProviders, type OAuthProviderInfo } from "@oh-my-pi/pi-ai";
 import { Container, matchesKey, Spacer, TruncatedText } from "@oh-my-pi/pi-tui";
 import { theme } from "../../modes/theme/theme";
+import { matchesSelectCancel } from "../../modes/utils/keybinding-matchers";
 import type { AuthStorage } from "../../session/auth-storage";
 import { DynamicBorder } from "./dynamic-border";
 /**
@@ -202,7 +203,7 @@ export class OAuthSelectorComponent extends Container {
 			}
 		}
 		// Escape or Ctrl+C
-		else if (matchesKey(keyData, "escape") || matchesKey(keyData, "esc") || matchesKey(keyData, "ctrl+c")) {
+		else if (matchesSelectCancel(keyData)) {
 			this.stopValidation();
 			this.#onCancelCallback();
 		}

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

@@ -72,9 +72,8 @@ export class PythonExecutionComponent extends Container {
 	}
 
 	appendOutput(chunk: string): void {
-		const clean = sanitizeText(chunk);
-
-		const newLines = clean.split("\n").map(line => this.#clampDisplayLine(line));
+		// Chunk is pre-sanitized by OutputSink.push() — no need to sanitize again.
+		const newLines = chunk.split("\n").map(line => this.#clampDisplayLine(line));
 		if (this.#outputLines.length > 0 && newLines.length > 0) {
 			this.#outputLines[this.#outputLines.length - 1] = this.#clampDisplayLine(
 				`${this.#outputLines[this.#outputLines.length - 1]}${newLines[0]}`,

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

@@ -11,6 +11,7 @@ import {
 	visibleWidth,
 } from "@oh-my-pi/pi-tui";
 import { theme } from "../../modes/theme/theme";
+import { matchesAppInterrupt } from "../../modes/utils/keybinding-matchers";
 import type { SessionInfo } from "../../session/session-manager";
 import { fuzzyFilter } from "../../utils/fuzzy";
 import { DynamicBorder } from "./dynamic-border";
@@ -219,7 +220,7 @@ class SessionList implements Component {
 			return;
 		}
 		// Escape - cancel
-		if (matchesKey(keyData, "escape") || matchesKey(keyData, "esc")) {
+		if (matchesAppInterrupt(keyData)) {
 			if (this.onCancel) {
 				this.onCancel();
 			}

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

@@ -21,6 +21,7 @@ import type {
 } from "../../config/settings-schema";
 import { SETTING_TABS, TAB_METADATA } from "../../config/settings-schema";
 import { getCurrentThemeName, getSelectListTheme, getSettingsListTheme, theme } from "../../modes/theme/theme";
+import { matchesAppInterrupt } from "../../modes/utils/keybinding-matchers";
 import { getTabBarTheme } from "../shared";
 import { DynamicBorder } from "./dynamic-border";
 import { PluginSettingsComponent } from "./plugin-settings";
@@ -521,7 +522,7 @@ export class SettingsSelectorComponent extends Container {
 		}
 
 		// Escape at top level cancels
-		if ((matchesKey(data, "escape") || matchesKey(data, "esc")) && !this.#currentSubmenu) {
+		if (matchesAppInterrupt(data) && !this.#currentSubmenu) {
 			this.callbacks.onCancel();
 			return;
 		}

package/src/modes/components/status-line-segment-editor.ts

@@ -11,6 +11,7 @@
 import { Container, matchesKey, padding } from "@oh-my-pi/pi-tui";
 import type { StatusLineSegmentId } from "../../config/settings-schema";
 import { theme } from "../../modes/theme/theme";
+import { matchesAppInterrupt } from "../../modes/utils/keybinding-matchers";
 import { ALL_SEGMENT_IDS } from "./status-line/segments";
 
 // Segment display names and short descriptions
@@ -239,7 +240,7 @@ export class StatusLineSegmentEditorComponent extends Container {
 			const left = this.#getSegmentsForColumn("left").map(s => s.id);
 			const right = this.#getSegmentsForColumn("right").map(s => s.id);
 			this.callbacks.onSave(left, right);
-		} else if (matchesKey(data, "escape") || matchesKey(data, "esc")) {
+		} else if (matchesAppInterrupt(data)) {
 			this.callbacks.onCancel();
 		}
 	}

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

@@ -105,17 +105,16 @@ export class ToolExecutionComponent extends Container {
 	// Cached converted images for Kitty protocol (which requires PNG), keyed by index
 	#convertedImages: Map<number, { data: string; mimeType: string }> = new Map();
 	// Spinner animation for partial task results
-	#spinnerFrame = 0;
+	#spinnerFrame?: number;
 	#spinnerInterval?: NodeJS.Timeout;
 	// Track if args are still being streamed (for edit/write spinner)
 	#argsComplete = false;
 	#renderState: {
-		spinnerFrame: number;
+		spinnerFrame?: number;
 		expanded: boolean;
 		isPartial: boolean;
 		renderContext?: Record<string, unknown>;
 	} = {
-		spinnerFrame: 0,
 		expanded: false,
 		isPartial: true,
 	};
@@ -328,10 +327,9 @@ export class ToolExecutionComponent extends Container {
 			this.#spinnerInterval = setInterval(() => {
 				const frameCount = theme.spinnerFrames.length;
 				if (frameCount === 0) return;
-				this.#spinnerFrame = (this.#spinnerFrame + 1) % frameCount;
+				this.#spinnerFrame = ((this.#spinnerFrame ?? -1) + 1) % frameCount;
 				this.#renderState.spinnerFrame = this.#spinnerFrame;
 				this.#ui.requestRender();
-				// NO updateDisplay() — existing component closures read from renderState
 			}, 80);
 		} else if (!needsSpinner && this.#spinnerInterval) {
 			clearInterval(this.#spinnerInterval);
@@ -346,6 +344,7 @@ export class ToolExecutionComponent extends Container {
 		if (this.#spinnerInterval) {
 			clearInterval(this.#spinnerInterval);
 			this.#spinnerInterval = undefined;
+			this.#spinnerFrame = undefined;
 		}
 	}
 

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

@@ -12,6 +12,7 @@ import {
 } from "@oh-my-pi/pi-tui";
 import type { TreeFilterMode } from "../../config/settings-schema";
 import { theme } from "../../modes/theme/theme";
+import { matchesAppInterrupt } from "../../modes/utils/keybinding-matchers";
 import type { SessionTreeNode } from "../../session/session-manager";
 import { shortenPath } from "../../tools/render-utils";
 import { DynamicBorder } from "./dynamic-border";
@@ -702,7 +703,7 @@ class TreeList implements Component {
 			if (selected && this.onSelect) {
 				this.onSelect(selected.node.entry.id);
 			}
-		} else if (matchesKey(keyData, "escape") || matchesKey(keyData, "esc")) {
+		} else if (matchesAppInterrupt(keyData)) {
 			if (this.#searchQuery) {
 				this.#searchQuery = "";
 				this.#applyFilter();
@@ -807,7 +808,7 @@ class LabelInput implements Component {
 		if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
 			const value = this.#input.getValue().trim();
 			this.onSubmit?.(this.entryId, value || undefined);
-		} else if (matchesKey(keyData, "escape") || matchesKey(keyData, "esc")) {
+		} else if (matchesAppInterrupt(keyData)) {
 			this.onCancel?.();
 		} else {
 			this.#input.handleInput(keyData);