Merge branch 'feat/ctrl-n-external-editor' - configurable keybindings (#405)

packages/coding-agent/src/modes/interactive/components/custom-editor.ts

@@ -1,113 +1,65 @@
-import {
-	Editor,
-	isAltEnter,
-	isCtrlC,
-	isCtrlD,
-	isCtrlG,
-	isCtrlL,
-	isCtrlO,
-	isCtrlP,
-	isCtrlT,
-	isCtrlZ,
-	isEscape,
-	isShiftCtrlP,
-	isShiftTab,
-} from "@mariozechner/pi-tui";
+import { Editor, type EditorTheme } from "@mariozechner/pi-tui";
+import type { AppAction, KeybindingsManager } from "../../../core/keybindings.js";
 
 /**
- * Custom editor that handles Escape and Ctrl+C keys for coding-agent
+ * Custom editor that handles app-level keybindings for coding-agent.
  */
 export class CustomEditor extends Editor {
+	private keybindings: KeybindingsManager;
+	private actionHandlers: Map<AppAction, () => void> = new Map();
+
+	// Special handlers that can be dynamically replaced
 	public onEscape?: () => void;
-	public onCtrlC?: () => void;
 	public onCtrlD?: () => void;
-	public onShiftTab?: () => void;
-	public onCtrlP?: () => void;
-	public onShiftCtrlP?: () => void;
-	public onCtrlL?: () => void;
-	public onCtrlO?: () => void;
-	public onCtrlT?: () => void;
-	public onCtrlG?: () => void;
-	public onCtrlZ?: () => void;
-	public onAltEnter?: () => void;
+
+	constructor(theme: EditorTheme, keybindings: KeybindingsManager) {
+		super(theme);
+		this.keybindings = keybindings;
+	}
+
+	/**
+	 * Register a handler for an app action.
+	 */
+	onAction(action: AppAction, handler: () => void): void {
+		this.actionHandlers.set(action, handler);
+	}
 
 	handleInput(data: string): void {
-		// Intercept Alt+Enter for follow-up messages
-		if (isAltEnter(data) && this.onAltEnter) {
-			this.onAltEnter();
-			return;
-		}
-		// Intercept Ctrl+G for external editor
-		if (isCtrlG(data) && this.onCtrlG) {
-			this.onCtrlG();
-			return;
-		}
+		// Check app keybindings first
 
-		// Intercept Ctrl+Z for suspend
-		if (isCtrlZ(data) && this.onCtrlZ) {
-			this.onCtrlZ();
-			return;
-		}
-
-		// Intercept Ctrl+T for thinking block visibility toggle
-		if (isCtrlT(data) && this.onCtrlT) {
-			this.onCtrlT();
-			return;
-		}
-
-		// Intercept Ctrl+L for model selector
-		if (isCtrlL(data) && this.onCtrlL) {
-			this.onCtrlL();
-			return;
-		}
-
-		// Intercept Ctrl+O for tool output expansion
-		if (isCtrlO(data) && this.onCtrlO) {
-			this.onCtrlO();
-			return;
-		}
-
-		// Intercept Shift+Ctrl+P for backward model cycling (check before Ctrl+P)
-		if (isShiftCtrlP(data) && this.onShiftCtrlP) {
-			this.onShiftCtrlP();
-			return;
-		}
-
-		// Intercept Ctrl+P for model cycling
-		if (isCtrlP(data) && this.onCtrlP) {
-			this.onCtrlP();
-			return;
-		}
-
-		// Intercept Shift+Tab for thinking level cycling
-		if (isShiftTab(data) && this.onShiftTab) {
-			this.onShiftTab();
-			return;
-		}
-
-		// Intercept Escape key - but only if autocomplete is NOT active
-		// (let parent handle escape for autocomplete cancellation)
-		if (isEscape(data) && this.onEscape && !this.isShowingAutocomplete()) {
-			this.onEscape();
-			return;
-		}
-
-		// Intercept Ctrl+C
-		if (isCtrlC(data) && this.onCtrlC) {
-			this.onCtrlC();
-			return;
-		}
-
-		// Intercept Ctrl+D (only when editor is empty)
-		if (isCtrlD(data)) {
-			if (this.getText().length === 0 && this.onCtrlD) {
-				this.onCtrlD();
+		// Escape/interrupt - only if autocomplete is NOT active
+		if (this.keybindings.matches(data, "interrupt")) {
+			if (!this.isShowingAutocomplete()) {
+				// Use dynamic onEscape if set, otherwise registered handler
+				const handler = this.onEscape ?? this.actionHandlers.get("interrupt");
+				if (handler) {
+					handler();
+					return;
+				}
 			}
-			// Always consume Ctrl+D (don't pass to parent)
+			// Let parent handle escape for autocomplete cancellation
+			super.handleInput(data);
 			return;
 		}
 
-		// Pass to parent for normal handling
+		// Exit (Ctrl+D) - only when editor is empty
+		if (this.keybindings.matches(data, "exit")) {
+			if (this.getText().length === 0) {
+				const handler = this.onCtrlD ?? this.actionHandlers.get("exit");
+				if (handler) handler();
+			}
+			return; // Always consume
+		}
+
+		// Check all other app actions
+		for (const [action, handler] of this.actionHandlers) {
+			if (action !== "interrupt" && action !== "exit" && this.keybindings.matches(data, action)) {
+				handler();
+				return;
+			}
+		}
+
+		// Pass to parent for editor handling
 		super.handleInput(data);
 	}
 }

packages/coding-agent/src/modes/interactive/components/hook-editor.ts

@@ -7,7 +7,7 @@ import { spawnSync } from "node:child_process";
 import * as fs from "node:fs";
 import * as os from "node:os";
 import * as path from "node:path";
-import { Container, Editor, isCtrlC, isCtrlG, isEscape, Spacer, Text, type TUI } from "@mariozechner/pi-tui";
+import { Container, Editor, getEditorKeybindings, matchesKey, Spacer, Text, type TUI } from "@mariozechner/pi-tui";
 import { getEditorTheme, theme } from "../theme/theme.js";
 import { DynamicBorder } from "./dynamic-border.js";
 
@@ -67,14 +67,15 @@ export class HookEditorComponent extends Container {
 			return;
 		}
 
+		const kb = getEditorKeybindings();
 		// Escape or Ctrl+C to cancel
-		if (isEscape(keyData) || isCtrlC(keyData)) {
+		if (kb.matches(keyData, "selectCancel")) {
 			this.onCancelCallback();
 			return;
 		}
 
-		// Ctrl+G for external editor
-		if (isCtrlG(keyData)) {
+		// Ctrl+G for external editor (keep matchesKey for this app-specific action)
+		if (matchesKey(keyData, "ctrl+g")) {
 			this.openExternalEditor();
 			return;
 		}

packages/coding-agent/src/modes/interactive/components/hook-input.ts

@@ -2,7 +2,7 @@
  * Simple text input component for hooks.
  */
 
-import { Container, Input, isCtrlC, isEnter, isEscape, Spacer, Text } from "@mariozechner/pi-tui";
+import { Container, getEditorKeybindings, Input, Spacer, Text } from "@mariozechner/pi-tui";
 import { theme } from "../theme/theme.js";
 import { DynamicBorder } from "./dynamic-border.js";
 
@@ -46,14 +46,15 @@ export class HookInputComponent extends Container {
 	}
 
 	handleInput(keyData: string): void {
+		const kb = getEditorKeybindings();
 		// Enter
-		if (isEnter(keyData) || keyData === "\n") {
+		if (kb.matches(keyData, "selectConfirm") || keyData === "\n") {
 			this.onSubmitCallback(this.input.getValue());
 			return;
 		}
 
 		// Escape or Ctrl+C to cancel
-		if (isEscape(keyData) || isCtrlC(keyData)) {
+		if (kb.matches(keyData, "selectCancel")) {
 			this.onCancelCallback();
 			return;
 		}

packages/coding-agent/src/modes/interactive/components/hook-selector.ts

@@ -3,7 +3,7 @@
  * Displays a list of string options with keyboard navigation.
  */
 
-import { Container, isArrowDown, isArrowUp, isCtrlC, isEnter, isEscape, Spacer, Text } from "@mariozechner/pi-tui";
+import { Container, getEditorKeybindings, Spacer, Text } from "@mariozechner/pi-tui";
 import { theme } from "../theme/theme.js";
 import { DynamicBorder } from "./dynamic-border.js";
 
@@ -66,25 +66,26 @@ export class HookSelectorComponent extends Container {
 	}
 
 	handleInput(keyData: string): void {
+		const kb = getEditorKeybindings();
 		// Up arrow or k
-		if (isArrowUp(keyData) || keyData === "k") {
+		if (kb.matches(keyData, "selectUp") || keyData === "k") {
 			this.selectedIndex = Math.max(0, this.selectedIndex - 1);
 			this.updateList();
 		}
 		// Down arrow or j
-		else if (isArrowDown(keyData) || keyData === "j") {
+		else if (kb.matches(keyData, "selectDown") || keyData === "j") {
 			this.selectedIndex = Math.min(this.options.length - 1, this.selectedIndex + 1);
 			this.updateList();
 		}
 		// Enter
-		else if (isEnter(keyData) || keyData === "\n") {
+		else if (kb.matches(keyData, "selectConfirm") || keyData === "\n") {
 			const selected = this.options[this.selectedIndex];
 			if (selected) {
 				this.onSelectCallback(selected);
 			}
 		}
 		// Escape or Ctrl+C
-		else if (isEscape(keyData) || isCtrlC(keyData)) {
+		else if (kb.matches(keyData, "selectCancel")) {
 			this.onCancelCallback();
 		}
 	}

packages/coding-agent/src/modes/interactive/components/model-selector.ts

@@ -1,16 +1,5 @@
 import { type Model, modelsAreEqual } from "@mariozechner/pi-ai";
-import {
-	Container,
-	Input,
-	isArrowDown,
-	isArrowUp,
-	isCtrlC,
-	isEnter,
-	isEscape,
-	Spacer,
-	Text,
-	type TUI,
-} from "@mariozechner/pi-tui";
+import { Container, getEditorKeybindings, Input, Spacer, Text, type TUI } from "@mariozechner/pi-tui";
 import type { ModelRegistry } from "../../../core/model-registry.js";
 import type { SettingsManager } from "../../../core/settings-manager.js";
 import { fuzzyFilter } from "../../../utils/fuzzy.js";
@@ -216,27 +205,28 @@ export class ModelSelectorComponent extends Container {
 	}
 
 	handleInput(keyData: string): void {
+		const kb = getEditorKeybindings();
 		// Up arrow - wrap to bottom when at top
-		if (isArrowUp(keyData)) {
+		if (kb.matches(keyData, "selectUp")) {
 			if (this.filteredModels.length === 0) return;
 			this.selectedIndex = this.selectedIndex === 0 ? this.filteredModels.length - 1 : this.selectedIndex - 1;
 			this.updateList();
 		}
 		// Down arrow - wrap to top when at bottom
-		else if (isArrowDown(keyData)) {
+		else if (kb.matches(keyData, "selectDown")) {
 			if (this.filteredModels.length === 0) return;
 			this.selectedIndex = this.selectedIndex === this.filteredModels.length - 1 ? 0 : this.selectedIndex + 1;
 			this.updateList();
 		}
 		// Enter
-		else if (isEnter(keyData)) {
+		else if (kb.matches(keyData, "selectConfirm")) {
 			const selectedModel = this.filteredModels[this.selectedIndex];
 			if (selectedModel) {
 				this.handleSelect(selectedModel.model);
 			}
 		}
 		// Escape or Ctrl+C
-		else if (isEscape(keyData) || isCtrlC(keyData)) {
+		else if (kb.matches(keyData, "selectCancel")) {
 			this.onCancelCallback();
 		}
 		// Pass everything else to search input

packages/coding-agent/src/modes/interactive/components/oauth-selector.ts

@@ -1,14 +1,5 @@
 import { getOAuthProviders, type OAuthProviderInfo } from "@mariozechner/pi-ai";
-import {
-	Container,
-	isArrowDown,
-	isArrowUp,
-	isCtrlC,
-	isEnter,
-	isEscape,
-	Spacer,
-	TruncatedText,
-} from "@mariozechner/pi-tui";
+import { Container, getEditorKeybindings, Spacer, TruncatedText } from "@mariozechner/pi-tui";
 import type { AuthStorage } from "../../../core/auth-storage.js";
 import { theme } from "../theme/theme.js";
 import { DynamicBorder } from "./dynamic-border.js";
@@ -104,25 +95,26 @@ export class OAuthSelectorComponent extends Container {
 	}
 
 	handleInput(keyData: string): void {
+		const kb = getEditorKeybindings();
 		// Up arrow
-		if (isArrowUp(keyData)) {
+		if (kb.matches(keyData, "selectUp")) {
 			this.selectedIndex = Math.max(0, this.selectedIndex - 1);
 			this.updateList();
 		}
 		// Down arrow
-		else if (isArrowDown(keyData)) {
+		else if (kb.matches(keyData, "selectDown")) {
 			this.selectedIndex = Math.min(this.allProviders.length - 1, this.selectedIndex + 1);
 			this.updateList();
 		}
 		// Enter
-		else if (isEnter(keyData)) {
+		else if (kb.matches(keyData, "selectConfirm")) {
 			const selectedProvider = this.allProviders[this.selectedIndex];
 			if (selectedProvider?.available) {
 				this.onSelectCallback(selectedProvider.id);
 			}
 		}
 		// Escape or Ctrl+C
-		else if (isEscape(keyData) || isCtrlC(keyData)) {
+		else if (kb.matches(keyData, "selectCancel")) {
 			this.onCancelCallback();
 		}
 	}

packages/coding-agent/src/modes/interactive/components/session-selector.ts

@@ -1,12 +1,8 @@
 import {
 	type Component,
 	Container,
+	getEditorKeybindings,
 	Input,
-	isArrowDown,
-	isArrowUp,
-	isCtrlC,
-	isEnter,
-	isEscape,
 	Spacer,
 	Text,
 	truncateToWidth,
@@ -126,31 +122,28 @@ class SessionList implements Component {
 	}
 
 	handleInput(keyData: string): void {
+		const kb = getEditorKeybindings();
 		// Up arrow
-		if (isArrowUp(keyData)) {
+		if (kb.matches(keyData, "selectUp")) {
 			this.selectedIndex = Math.max(0, this.selectedIndex - 1);
 		}
 		// Down arrow
-		else if (isArrowDown(keyData)) {
+		else if (kb.matches(keyData, "selectDown")) {
 			this.selectedIndex = Math.min(this.filteredSessions.length - 1, this.selectedIndex + 1);
 		}
 		// Enter
-		else if (isEnter(keyData)) {
+		else if (kb.matches(keyData, "selectConfirm")) {
 			const selected = this.filteredSessions[this.selectedIndex];
 			if (selected && this.onSelect) {
 				this.onSelect(selected.path);
 			}
 		}
 		// Escape - cancel
-		else if (isEscape(keyData)) {
+		else if (kb.matches(keyData, "selectCancel")) {
 			if (this.onCancel) {
 				this.onCancel();
 			}
 		}
-		// Ctrl+C - exit
-		else if (isCtrlC(keyData)) {
-			this.onExit();
-		}
 		// Pass everything else to search input
 		else {
 			this.searchInput.handleInput(keyData);

packages/coding-agent/src/modes/interactive/components/tree-selector.ts

@@ -1,17 +1,9 @@
 import {
 	type Component,
 	Container,
+	getEditorKeybindings,
 	Input,
-	isArrowDown,
-	isArrowLeft,
-	isArrowRight,
-	isArrowUp,
-	isBackspace,
-	isCtrlC,
-	isCtrlO,
-	isEnter,
-	isEscape,
-	isShiftCtrlO,
+	matchesKey,
 	Spacer,
 	Text,
 	TruncatedText,
@@ -664,43 +656,42 @@ class TreeList implements Component {
 	}
 
 	handleInput(keyData: string): void {
-		if (isArrowUp(keyData)) {
+		const kb = getEditorKeybindings();
+		if (kb.matches(keyData, "selectUp")) {
 			this.selectedIndex = this.selectedIndex === 0 ? this.filteredNodes.length - 1 : this.selectedIndex - 1;
-		} else if (isArrowDown(keyData)) {
+		} else if (kb.matches(keyData, "selectDown")) {
 			this.selectedIndex = this.selectedIndex === this.filteredNodes.length - 1 ? 0 : this.selectedIndex + 1;
-		} else if (isArrowLeft(keyData)) {
+		} else if (kb.matches(keyData, "cursorLeft")) {
 			// Page up
 			this.selectedIndex = Math.max(0, this.selectedIndex - this.maxVisibleLines);
-		} else if (isArrowRight(keyData)) {
+		} else if (kb.matches(keyData, "cursorRight")) {
 			// Page down
 			this.selectedIndex = Math.min(this.filteredNodes.length - 1, this.selectedIndex + this.maxVisibleLines);
-		} else if (isEnter(keyData)) {
+		} else if (kb.matches(keyData, "selectConfirm")) {
 			const selected = this.filteredNodes[this.selectedIndex];
 			if (selected && this.onSelect) {
 				this.onSelect(selected.node.entry.id);
 			}
-		} else if (isEscape(keyData)) {
+		} else if (kb.matches(keyData, "selectCancel")) {
 			if (this.searchQuery) {
 				this.searchQuery = "";
 				this.applyFilter();
 			} else {
 				this.onCancel?.();
 			}
-		} else if (isCtrlC(keyData)) {
-			this.onCancel?.();
-		} else if (isShiftCtrlO(keyData)) {
+		} else if (matchesKey(keyData, "shift+ctrl+o")) {
 			// Cycle filter backwards
 			const modes: FilterMode[] = ["default", "no-tools", "user-only", "labeled-only", "all"];
 			const currentIndex = modes.indexOf(this.filterMode);
 			this.filterMode = modes[(currentIndex - 1 + modes.length) % modes.length];
 			this.applyFilter();
-		} else if (isCtrlO(keyData)) {
+		} else if (matchesKey(keyData, "ctrl+o")) {
 			// Cycle filter forwards: default → no-tools → user-only → labeled-only → all → default
 			const modes: FilterMode[] = ["default", "no-tools", "user-only", "labeled-only", "all"];
 			const currentIndex = modes.indexOf(this.filterMode);
 			this.filterMode = modes[(currentIndex + 1) % modes.length];
 			this.applyFilter();
-		} else if (isBackspace(keyData)) {
+		} else if (kb.matches(keyData, "deleteCharBackward")) {
 			if (this.searchQuery.length > 0) {
 				this.searchQuery = this.searchQuery.slice(0, -1);
 				this.applyFilter();
@@ -768,10 +759,11 @@ class LabelInput implements Component {
 	}
 
 	handleInput(keyData: string): void {
-		if (isEnter(keyData)) {
+		const kb = getEditorKeybindings();
+		if (kb.matches(keyData, "selectConfirm")) {
 			const value = this.input.getValue().trim();
 			this.onSubmit?.(this.entryId, value || undefined);
-		} else if (isEscape(keyData)) {
+		} else if (kb.matches(keyData, "selectCancel")) {
 			this.onCancel?.();
 		} else {
 			this.input.handleInput(keyData);

packages/coding-agent/src/modes/interactive/components/user-message-selector.ts

@@ -1,15 +1,4 @@
-import {
-	type Component,
-	Container,
-	isArrowDown,
-	isArrowUp,
-	isCtrlC,
-	isEnter,
-	isEscape,
-	Spacer,
-	Text,
-	truncateToWidth,
-} from "@mariozechner/pi-tui";
+import { type Component, Container, getEditorKeybindings, Spacer, Text, truncateToWidth } from "@mariozechner/pi-tui";
 import { theme } from "../theme/theme.js";
 import { DynamicBorder } from "./dynamic-border.js";
 
@@ -89,29 +78,24 @@ class UserMessageList implements Component {
 	}
 
 	handleInput(keyData: string): void {
+		const kb = getEditorKeybindings();
 		// Up arrow - go to previous (older) message, wrap to bottom when at top
-		if (isArrowUp(keyData)) {
+		if (kb.matches(keyData, "selectUp")) {
 			this.selectedIndex = this.selectedIndex === 0 ? this.messages.length - 1 : this.selectedIndex - 1;
 		}
 		// Down arrow - go to next (newer) message, wrap to top when at bottom
-		else if (isArrowDown(keyData)) {
+		else if (kb.matches(keyData, "selectDown")) {
 			this.selectedIndex = this.selectedIndex === this.messages.length - 1 ? 0 : this.selectedIndex + 1;
 		}
 		// Enter - select message and branch
-		else if (isEnter(keyData)) {
+		else if (kb.matches(keyData, "selectConfirm")) {
 			const selected = this.messages[this.selectedIndex];
 			if (selected && this.onSelect) {
 				this.onSelect(selected.id);
 			}
 		}
 		// Escape - cancel
-		else if (isEscape(keyData)) {
-			if (this.onCancel) {
-				this.onCancel();
-			}
-		}
-		// Ctrl+C - cancel
-		else if (isCtrlC(keyData)) {
+		else if (kb.matches(keyData, "selectCancel")) {
 			if (this.onCancel) {
 				this.onCancel();
 			}