@nghyane/arcane 0.1.0

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

@@ -0,0 +1,101 @@
+/**
+ * Multi-line editor component for hooks.
+ * Supports Ctrl+G for external editor.
+ */
+import { Container, Editor, matchesKey, Spacer, Text, type TUI } from "@nghyane/arcane-tui";
+import { getEditorTheme, theme } from "../../modes/theme/theme";
+import { getEditorCommand, openInEditor } from "../../utils/external-editor";
+import { DynamicBorder } from "./dynamic-border";
+
+export class HookEditorComponent extends Container {
+	#editor: Editor;
+	#onSubmitCallback: (value: string) => void;
+	#onCancelCallback: () => void;
+	#tui: TUI;
+
+	constructor(
+		tui: TUI,
+		title: string,
+		prefill: string | undefined,
+		onSubmit: (value: string) => void,
+		onCancel: () => void,
+	) {
+		super();
+
+		this.#tui = tui;
+		this.#onSubmitCallback = onSubmit;
+		this.#onCancelCallback = onCancel;
+
+		// Add top border
+		this.addChild(new DynamicBorder());
+		this.addChild(new Spacer(1));
+
+		// Add title
+		this.addChild(new Text(theme.fg("accent", title), 1, 0));
+		this.addChild(new Spacer(1));
+
+		// Create editor
+		this.#editor = new Editor(getEditorTheme());
+		if (prefill) {
+			this.#editor.setText(prefill);
+		}
+		this.addChild(this.#editor);
+
+		this.addChild(new Spacer(1));
+
+		// Add hint
+		const hint = "ctrl+enter submit  esc cancel  ctrl+g external editor";
+		this.addChild(new Text(theme.fg("dim", hint), 1, 0));
+
+		this.addChild(new Spacer(1));
+
+		// Add bottom border
+		this.addChild(new DynamicBorder());
+	}
+
+	handleInput(keyData: string): void {
+		// Ctrl+Enter to submit
+		if (keyData === "\x1b[13;5u" || keyData === "\x1b[27;5;13~") {
+			this.#onSubmitCallback(this.#editor.getText());
+			return;
+		}
+
+		// Plain Enter inserts a new line in hook editor
+		if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
+			this.#editor.handleInput("\n");
+			return;
+		}
+
+		// Escape to cancel
+		if (matchesKey(keyData, "escape") || matchesKey(keyData, "esc")) {
+			this.#onCancelCallback();
+			return;
+		}
+
+		// Ctrl+G for external editor
+		if (matchesKey(keyData, "ctrl+g")) {
+			void this.#openExternalEditor();
+			return;
+		}
+
+		// Forward to editor
+		this.#editor.handleInput(keyData);
+	}
+
+	async #openExternalEditor(): Promise<void> {
+		const editorCmd = getEditorCommand();
+		if (!editorCmd) return;
+
+		const currentText = this.#editor.getText();
+		try {
+			this.#tui.stop();
+			const result = await openInEditor(editorCmd, currentText);
+			if (result !== null) {
+				this.#editor.setText(result);
+			}
+		} finally {
+			this.#tui.start();
+			this.#tui.requestRender(true);
+		}
+	}
+}

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

@@ -0,0 +1,72 @@
+/**
+ * Simple text input component for hooks.
+ */
+import { Container, Input, matchesKey, Spacer, Text, type TUI } from "@nghyane/arcane-tui";
+import { theme } from "../../modes/theme/theme";
+import { CountdownTimer } from "./countdown-timer";
+import { DynamicBorder } from "./dynamic-border";
+
+export interface HookInputOptions {
+	tui?: TUI;
+	timeout?: number;
+}
+
+export class HookInputComponent extends Container {
+	#input: Input;
+	#onSubmitCallback: (value: string) => void;
+	#onCancelCallback: () => void;
+	#titleText: Text;
+	#baseTitle: string;
+	#countdown: CountdownTimer | undefined;
+
+	constructor(
+		title: string,
+		_placeholder: string | undefined,
+		onSubmit: (value: string) => void,
+		onCancel: () => void,
+		opts?: HookInputOptions,
+	) {
+		super();
+
+		this.#onSubmitCallback = onSubmit;
+		this.#onCancelCallback = onCancel;
+		this.#baseTitle = title;
+
+		this.addChild(new DynamicBorder());
+		this.addChild(new Spacer(1));
+
+		this.#titleText = new Text(theme.fg("accent", title), 1, 0);
+		this.addChild(this.#titleText);
+		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)`)),
+				() => this.#onCancelCallback(),
+			);
+		}
+
+		this.#input = new Input();
+		this.addChild(this.#input);
+		this.addChild(new Spacer(1));
+		this.addChild(new Text(theme.fg("dim", "enter submit  esc cancel"), 1, 0));
+		this.addChild(new Spacer(1));
+		this.addChild(new DynamicBorder());
+	}
+
+	handleInput(keyData: string): void {
+		if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
+			this.#onSubmitCallback(this.#input.getValue());
+		} else if (matchesKey(keyData, "escape") || matchesKey(keyData, "esc")) {
+			this.#onCancelCallback();
+		} else {
+			this.#input.handleInput(keyData);
+		}
+	}
+
+	dispose(): void {
+		this.#countdown?.dispose();
+	}
+}

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

@@ -0,0 +1,100 @@
+import type { TextContent } from "@nghyane/arcane-ai";
+import type { Component } from "@nghyane/arcane-tui";
+import { Box, Container, Markdown, Spacer, Text } from "@nghyane/arcane-tui";
+import type { HookMessageRenderer } from "../../extensibility/hooks/types";
+import { getMarkdownTheme, theme } from "../../modes/theme/theme";
+import type { HookMessage } from "../../session/messages";
+
+/**
+ * Component that renders a custom message entry from hooks.
+ * Uses distinct styling to differentiate from user messages.
+ */
+export class HookMessageComponent extends Container {
+	#box: Box;
+	#customComponent?: Component;
+	#expanded = false;
+
+	constructor(
+		private readonly message: HookMessage<unknown>,
+		private readonly customRenderer?: HookMessageRenderer,
+	) {
+		super();
+
+		this.addChild(new Spacer(1));
+
+		// Create box with purple background (used for default rendering)
+		this.#box = new Box(1, 1, t => theme.bg("customMessageBg", t));
+
+		this.#rebuild();
+	}
+
+	setExpanded(expanded: boolean): void {
+		if (this.#expanded !== expanded) {
+			this.#expanded = expanded;
+			this.#rebuild();
+		}
+	}
+
+	override invalidate(): void {
+		super.invalidate();
+		this.#rebuild();
+	}
+
+	#rebuild(): void {
+		// Remove previous content component
+		if (this.#customComponent) {
+			this.removeChild(this.#customComponent);
+			this.#customComponent = undefined;
+		}
+		this.removeChild(this.#box);
+
+		// Try custom renderer first - it handles its own styling
+		if (this.customRenderer) {
+			try {
+				const component = this.customRenderer(this.message, { expanded: this.#expanded }, theme);
+				if (component) {
+					// Custom renderer provides its own styled component
+					this.#customComponent = component;
+					this.addChild(component);
+					return;
+				}
+			} catch {
+				// Fall through to default rendering
+			}
+		}
+
+		// Default rendering uses our box
+		this.addChild(this.#box);
+		this.#box.clear();
+
+		// Default rendering: label + content
+		const label = theme.fg("customMessageLabel", theme.bold(`[${this.message.customType}]`));
+		this.#box.addChild(new Text(label, 0, 0));
+		this.#box.addChild(new Spacer(1));
+
+		// Extract text content
+		let text: string;
+		if (typeof this.message.content === "string") {
+			text = this.message.content;
+		} else {
+			text = this.message.content
+				.filter((c): c is TextContent => c.type === "text")
+				.map(c => c.text)
+				.join("\n");
+		}
+
+		// Limit lines when collapsed
+		if (!this.#expanded) {
+			const lines = text.split("\n");
+			if (lines.length > 5) {
+				text = `${lines.slice(0, 5).join("\n")}\n…`;
+			}
+		}
+
+		this.#box.addChild(
+			new Markdown(text, 0, 0, getMarkdownTheme(), {
+				color: (text: string) => theme.fg("customMessageText", text),
+			}),
+		);
+	}
+}

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

@@ -0,0 +1,155 @@
+/**
+ * Generic selector component for hooks.
+ * Displays a list of string options with keyboard navigation.
+ */
+import { Container, matchesKey, padding, Spacer, Text, type TUI, visibleWidth } from "@nghyane/arcane-tui";
+import { theme } from "../../modes/theme/theme";
+import { CountdownTimer } from "./countdown-timer";
+import { DynamicBorder } from "./dynamic-border";
+
+export interface HookSelectorOptions {
+	tui?: TUI;
+	timeout?: number;
+	initialIndex?: number;
+	outline?: boolean;
+	maxVisible?: number;
+}
+
+class OutlinedList extends Container {
+	#lines: string[] = [];
+
+	setLines(lines: string[]): void {
+		this.#lines = lines;
+		this.invalidate();
+	}
+
+	render(width: number): string[] {
+		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 pad = Math.max(0, innerWidth - visibleWidth(line));
+			return `${borderColor(theme.boxSharp.vertical)}${line}${padding(pad)}${borderColor(theme.boxSharp.vertical)}`;
+		});
+		return [horizontal, ...content, horizontal];
+	}
+}
+
+export class HookSelectorComponent extends Container {
+	#options: string[];
+	#selectedIndex: number;
+	#maxVisible: number;
+	#listContainer: Container | undefined;
+	#outlinedList: OutlinedList | undefined;
+	#onSelectCallback: (option: string) => void;
+	#onCancelCallback: () => void;
+	#titleText: Text;
+	#baseTitle: string;
+	#countdown: CountdownTimer | undefined;
+
+	constructor(
+		title: string,
+		options: string[],
+		onSelect: (option: string) => void,
+		onCancel: () => void,
+		opts?: HookSelectorOptions,
+	) {
+		super();
+
+		this.#options = options;
+		this.#selectedIndex = Math.min(opts?.initialIndex ?? 0, options.length - 1);
+		this.#maxVisible = Math.max(3, opts?.maxVisible ?? 12);
+		this.#onSelectCallback = onSelect;
+		this.#onCancelCallback = onCancel;
+		this.#baseTitle = title;
+
+		this.addChild(new DynamicBorder());
+		this.addChild(new Spacer(1));
+
+		this.#titleText = new Text(theme.fg("accent", title), 1, 0);
+		this.addChild(this.#titleText);
+		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)`)),
+				() => {
+					// Auto-select current option on timeout (typically the first/recommended option)
+					const selected = this.#options[this.#selectedIndex];
+					if (selected) {
+						this.#onSelectCallback(selected);
+					} else {
+						this.#onCancelCallback();
+					}
+				},
+			);
+		}
+
+		if (opts?.outline) {
+			this.#outlinedList = new OutlinedList();
+			this.addChild(this.#outlinedList);
+		} else {
+			this.#listContainer = new Container();
+			this.addChild(this.#listContainer);
+		}
+		this.addChild(new Spacer(1));
+		this.addChild(new Text(theme.fg("dim", "up/down navigate  enter select  esc cancel"), 1, 0));
+		this.addChild(new Spacer(1));
+		this.addChild(new DynamicBorder());
+
+		this.#updateList();
+	}
+
+	#updateList(): void {
+		const lines: string[] = [];
+		const startIndex = Math.max(
+			0,
+			Math.min(this.#selectedIndex - Math.floor(this.#maxVisible / 2), this.#options.length - this.#maxVisible),
+		);
+		const endIndex = Math.min(startIndex + this.#maxVisible, this.#options.length);
+
+		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);
+		}
+
+		if (startIndex > 0 || endIndex < this.#options.length) {
+			lines.push(theme.fg("dim", `  (${this.#selectedIndex + 1}/${this.#options.length})`));
+		}
+		if (this.#outlinedList) {
+			this.#outlinedList.setLines(lines);
+			return;
+		}
+		this.#listContainer?.clear();
+		for (const line of lines) {
+			this.#listContainer?.addChild(new Text(line, 1, 0));
+		}
+	}
+
+	handleInput(keyData: string): void {
+		// Reset countdown on any interaction
+		this.#countdown?.reset();
+
+		if (matchesKey(keyData, "up") || keyData === "k") {
+			this.#selectedIndex = Math.max(0, this.#selectedIndex - 1);
+			this.#updateList();
+		} else if (matchesKey(keyData, "down") || keyData === "j") {
+			this.#selectedIndex = Math.min(this.#options.length - 1, this.#selectedIndex + 1);
+			this.#updateList();
+		} else if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
+			const selected = this.#options[this.#selectedIndex];
+			if (selected) this.#onSelectCallback(selected);
+		} else if (matchesKey(keyData, "escape") || matchesKey(keyData, "esc") || matchesKey(keyData, "ctrl+c")) {
+			this.#onCancelCallback();
+		}
+	}
+
+	dispose(): void {
+		this.#countdown?.dispose();
+	}
+}

package/src/modes/components/index.ts

@@ -0,0 +1,41 @@
+// UI Components barrel export
+export { AssistantMessageComponent } from "./assistant-message";
+export { BashExecutionComponent } from "./bash-execution";
+export { BorderedLoader } from "./bordered-loader";
+export { BranchSummaryMessageComponent } from "./branch-summary-message";
+export { CompactionSummaryMessageComponent } from "./compaction-summary-message";
+export { CountdownTimer } from "./countdown-timer";
+export { CustomEditor } from "./custom-editor";
+export { CustomMessageComponent } from "./custom-message";
+export { type RenderDiffOptions, renderDiff } from "./diff";
+export { DynamicBorder } from "./dynamic-border";
+export { FooterComponent } from "./footer";
+export { HookEditorComponent } from "./hook-editor";
+export { HookInputComponent, type HookInputOptions } from "./hook-input";
+export { HookMessageComponent } from "./hook-message";
+export { HookSelectorComponent } from "./hook-selector";
+export { appKey, appKeyHint, editorKey, keyHint, rawKeyHint } from "./keybinding-hints";
+export { LoginDialogComponent } from "./login-dialog";
+export { ModelSelectorComponent } from "./model-selector";
+export { OAuthSelectorComponent } from "./oauth-selector";
+export { QueueModeSelectorComponent } from "./queue-mode-selector";
+export { ReadToolGroupComponent } from "./read-tool-group";
+export { SessionSelectorComponent } from "./session-selector";
+export {
+	type SettingsCallbacks,
+	type SettingsRuntimeContext,
+	SettingsSelectorComponent,
+	type StatusLinePreviewSettings,
+} from "./settings-selector";
+export { ShowImagesSelectorComponent } from "./show-images-selector";
+export { StatusLineComponent } from "./status-line";
+export { ThemeSelectorComponent } from "./theme-selector";
+export { ThinkingSelectorComponent } from "./thinking-selector";
+export { TodoReminderComponent } from "./todo-reminder";
+export { ToolExecutionComponent, type ToolExecutionHandle, type ToolExecutionOptions } from "./tool-execution";
+export { TreeSelectorComponent } from "./tree-selector";
+export { TtsrNotificationComponent } from "./ttsr-notification";
+export { UserMessageComponent } from "./user-message";
+export { UserMessageSelectorComponent } from "./user-message-selector";
+export { truncateToVisualLines, type VisualTruncateResult } from "./visual-truncate";
+export { type LspServerInfo, type RecentSession, WelcomeComponent } from "./welcome";

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

@@ -0,0 +1,65 @@
+/**
+ * Utilities for formatting keybinding hints in the UI.
+ */
+import { type EditorAction, getEditorKeybindings, type KeyId } from "@nghyane/arcane-tui";
+import type { AppAction, KeybindingsManager } from "../../config/keybindings";
+import { theme } from "../../modes/theme/theme";
+
+/**
+ * Format keys array as display string (e.g., ["ctrl+c", "escape"] -> "ctrl+c/escape").
+ */
+function formatKeys(keys: KeyId[]): string {
+	if (keys.length === 0) return "";
+	if (keys.length === 1) return keys[0]!;
+	return keys.join("/");
+}
+
+/**
+ * Get display string for an editor action.
+ */
+export function editorKey(action: EditorAction): string {
+	return formatKeys(getEditorKeybindings().getKeys(action));
+}
+
+/**
+ * Get display string for an app action.
+ */
+export function appKey(keybindings: KeybindingsManager, action: AppAction): string {
+	return formatKeys(keybindings.getKeys(action));
+}
+
+/**
+ * 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 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 {
+	return theme.fg("dim", editorKey(action)) + theme.fg("muted", ` ${description}`);
+}
+
+/**
+ * Format a keybinding hint for app-level actions.
+ * Requires the KeybindingsManager instance.
+ *
+ * @param keybindings - KeybindingsManager instance
+ * @param action - App action name (e.g., "interrupt", "externalEditor")
+ * @param description - Description text
+ * @returns Formatted string with dim key and muted description
+ */
+export function appKeyHint(keybindings: KeybindingsManager, action: AppAction, description: string): string {
+	return theme.fg("dim", appKey(keybindings, action)) + theme.fg("muted", ` ${description}`);
+}
+
+/**
+ * Format a raw key string with description (for non-configurable keys like ↑↓).
+ *
+ * @param key - Raw key string
+ * @param description - Description text
+ * @returns Formatted string with dim key and muted description
+ */
+export function rawKeyHint(key: string, description: string): string {
+	return theme.fg("dim", key) + theme.fg("muted", ` ${description}`);
+}

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

@@ -0,0 +1,164 @@
+import { getOAuthProviders } from "@nghyane/arcane-ai";
+import { Container, getEditorKeybindings, Input, Spacer, Text, type TUI } from "@nghyane/arcane-tui";
+import { theme } from "../../modes/theme/theme";
+import { openPath } from "../../utils/open";
+import { DynamicBorder } from "./dynamic-border";
+
+/**
+ * Login dialog component - replaces editor during OAuth login flow
+ */
+export class LoginDialogComponent extends Container {
+	#contentContainer: Container;
+	#input: Input;
+	#tui: TUI;
+	#abortController = new AbortController();
+	#inputResolver?: (value: string) => void;
+	#inputRejecter?: (error: Error) => void;
+
+	constructor(
+		tui: TUI,
+		providerId: string,
+		private onComplete: (success: boolean, message?: string) => void,
+	) {
+		super();
+		this.#tui = tui;
+
+		const providerInfo = getOAuthProviders().find(p => p.id === providerId);
+		const providerName = providerInfo?.name || providerId;
+
+		// Top border
+		this.addChild(new DynamicBorder());
+
+		// Title
+		this.addChild(new Text(theme.fg("warning", `Login to ${providerName}`), 1, 0));
+
+		// Dynamic content area
+		this.#contentContainer = new Container();
+		this.addChild(this.#contentContainer);
+
+		// Input (always present, used when needed)
+		this.#input = new Input();
+		this.#input.onSubmit = () => {
+			if (this.#inputResolver) {
+				this.#inputResolver(this.#input.getValue());
+				this.#inputResolver = undefined;
+				this.#inputRejecter = undefined;
+			}
+		};
+		this.#input.onEscape = () => {
+			this.#cancel();
+		};
+
+		// Bottom border
+		this.addChild(new DynamicBorder());
+	}
+
+	get signal(): AbortSignal {
+		return this.#abortController.signal;
+	}
+
+	#cancel(): void {
+		this.#abortController.abort();
+		if (this.#inputRejecter) {
+			this.#inputRejecter(new Error("Login cancelled"));
+			this.#inputResolver = undefined;
+			this.#inputRejecter = undefined;
+		}
+		this.onComplete(false, "Login cancelled");
+	}
+
+	/**
+	 * Called by onAuth callback - show URL and optional instructions
+	 */
+	showAuth(url: string, instructions?: string): void {
+		this.#contentContainer.clear();
+		this.#contentContainer.addChild(new Spacer(1));
+		this.#contentContainer.addChild(new Text(theme.fg("accent", url), 1, 0));
+
+		const clickHint = process.platform === "darwin" ? "Cmd+click to open" : "Ctrl+click to open";
+		const hyperlink = `\x1b]8;;${url}\x07${clickHint}\x1b]8;;\x07`;
+		this.#contentContainer.addChild(new Text(theme.fg("dim", hyperlink), 1, 0));
+
+		if (instructions) {
+			this.#contentContainer.addChild(new Spacer(1));
+			this.#contentContainer.addChild(new Text(theme.fg("warning", instructions), 1, 0));
+		}
+
+		// Open browser (best-effort)
+		openPath(url);
+
+		this.#tui.requestRender();
+	}
+
+	/**
+	 * Show input for manual code/URL entry (for callback server providers)
+	 */
+	showManualInput(prompt: string): Promise<string> {
+		this.#contentContainer.addChild(new Spacer(1));
+		this.#contentContainer.addChild(new Text(theme.fg("dim", prompt), 1, 0));
+		if (!this.#contentContainer.children.includes(this.#input)) {
+			this.#contentContainer.addChild(this.#input);
+		}
+		this.#contentContainer.addChild(new Text(theme.fg("dim", "(Escape to cancel)"), 1, 0));
+		this.#tui.requestRender();
+
+		const { promise, resolve, reject } = Promise.withResolvers<string>();
+		this.#inputResolver = resolve;
+		this.#inputRejecter = reject;
+		return promise;
+	}
+
+	/**
+	 * Called by onPrompt callback - show prompt and wait for input
+	 * Note: Does NOT clear content, appends to existing (preserves URL from showAuth)
+	 */
+	showPrompt(message: string, placeholder?: string): Promise<string> {
+		this.#contentContainer.addChild(new Spacer(1));
+		this.#contentContainer.addChild(new Text(theme.fg("text", message), 1, 0));
+		if (placeholder) {
+			this.#contentContainer.addChild(new Text(theme.fg("dim", `e.g., ${placeholder}`), 1, 0));
+		}
+		if (!this.#contentContainer.children.includes(this.#input)) {
+			this.#contentContainer.addChild(this.#input);
+		}
+		this.#contentContainer.addChild(new Text(theme.fg("dim", "(Escape to cancel, Enter to submit)"), 1, 0));
+
+		this.#input.setValue("");
+		this.#tui.requestRender();
+
+		const { promise, resolve, reject } = Promise.withResolvers<string>();
+		this.#inputResolver = resolve;
+		this.#inputRejecter = reject;
+		return promise;
+	}
+
+	/**
+	 * Show waiting message (for polling flows like GitHub Copilot)
+	 */
+	showWaiting(message: string): void {
+		this.#contentContainer.addChild(new Spacer(1));
+		this.#contentContainer.addChild(new Text(theme.fg("dim", message), 1, 0));
+		this.#contentContainer.addChild(new Text(theme.fg("dim", "(Escape to cancel)"), 1, 0));
+		this.#tui.requestRender();
+	}
+
+	/**
+	 * Called by onProgress callback
+	 */
+	showProgress(message: string): void {
+		this.#contentContainer.addChild(new Text(theme.fg("dim", message), 1, 0));
+		this.#tui.requestRender();
+	}
+
+	handleInput(data: string): void {
+		const kb = getEditorKeybindings();
+
+		if (kb.matches(data, "selectCancel")) {
+			this.#cancel();
+			return;
+		}
+
+		// Pass to input
+		this.#input.handleInput(data);
+	}
+}