@f5-sales-demo/xcsh 19.51.2

package/src/modes/components/gutter-block.ts

@@ -0,0 +1,315 @@
+import { type Component, Container, type TUI } from "@f5xc-salesdemos/pi-tui";
+import { getSymbolTheme, theme } from "../theme/theme";
+
+const GUTTER_WIDTH = 2; // 1 char indicator + 1 char space
+const SPINNER_INTERVAL_MS = 80;
+const GUTTER_PAD = "  "; // 2 spaces for continuation lines
+
+// Matches CSI SGR escape sequences (\x1b[...m) used for colors and styles.
+// Needed because Box/Text padding lines look like "\x1b[48;5;236m   \x1b[0m" —
+// visually empty but not whitespace, so String.trim() alone leaves the escape
+// codes behind and the line falsely reads as content.
+const ANSI_SGR_RE = /\x1b\[[0-9;]*m/g;
+
+export interface GutterConfig {
+	/** Indicator symbol shown when done (e.g. "●", "✻", "※") */
+	symbol: string;
+	/** Color function for active state (used for static active indicator) */
+	activeColorFn: (s: string) => string;
+	/**
+	 * Neutral done-state color. Used when `setDone()` is called without an
+	 * outcome, or when the specific outcome color function is not configured.
+	 */
+	doneColorFn: (s: string) => string;
+	/** Optional color function used for `setDone("success")`. */
+	doneSuccessColorFn?: (s: string) => string;
+	/** Optional color function used for `setDone("error")`. */
+	doneErrorColorFn?: (s: string) => string;
+	/** Optional color function used for `setDone("warning")`. */
+	doneWarningColorFn?: (s: string) => string;
+	/** Whether to show spinner animation when active */
+	animated: boolean;
+	/**
+	 * Optional custom spinner frames. When set, these frames are used instead
+	 * of the theme's default `spinnerFrames` (braille progression). Useful for
+	 * gutters that want a distinct visual cadence — e.g. tool calls use a
+	 * pulsing ● / blank alternation to differentiate from the ✻ thinking
+	 * braille spinner.
+	 */
+	activeFrames?: string[];
+	/**
+	 * Optional per-frame interval in milliseconds. Defaults to
+	 * `SPINNER_INTERVAL_MS` (80ms, right for the 10-frame braille progression).
+	 * Low-frame-count patterns like the tool-call pulse (2 frames) need a
+	 * slower cadence — otherwise the alternation reads as a rapid strobe
+	 * rather than a breathing pulse.
+	 */
+	activeIntervalMs?: number;
+}
+
+type GutterState = "active" | "done";
+type GutterOutcome = "success" | "error" | "warning";
+
+/**
+ * GutterBlock wraps a child component and prepends a 2-character left gutter
+ * to every rendered line. The first line shows an indicator (optionally animated),
+ * continuation lines show 2 spaces.
+ */
+export class GutterBlock<T extends Component> implements Component {
+	#child: T;
+	#config: GutterConfig;
+	#state: GutterState;
+	#outcome?: GutterOutcome;
+	#ui: TUI;
+
+	// Spinner state
+	#spinnerFrames: string[];
+	#currentFrame = 0;
+	#intervalId?: ReturnType<typeof setInterval>;
+
+	constructor(ui: TUI, child: T, config: GutterConfig, initialState: GutterState = "active") {
+		this.#child = child;
+		this.#config = config;
+		this.#state = initialState;
+		this.#ui = ui;
+		this.#spinnerFrames = config.activeFrames ?? getSymbolTheme().spinnerFrames;
+
+		if (initialState === "active" && config.animated) {
+			this.#startSpinner();
+		}
+	}
+
+	get child(): T {
+		return this.#child;
+	}
+
+	get state(): GutterState {
+		return this.#state;
+	}
+
+	setDone(outcome?: GutterOutcome): void {
+		if (this.#state === "done") return;
+		this.#outcome = outcome;
+		this.#state = "done";
+		this.#stopSpinner();
+		this.#ui.requestRender();
+	}
+
+	/** Switch to thinking mode: change symbol to ✻ and start animated spinner */
+	setThinkingMode(): void {
+		if (this.#state === "done") return;
+		this.#config = {
+			symbol: "✻",
+			activeColorFn: (s: string) => theme.fg("spinnerAccent", s),
+			doneColorFn: (s: string) => theme.fg("dim", s),
+			animated: true,
+		};
+		if (!this.#intervalId) {
+			this.#startSpinner();
+		}
+	}
+
+	/** Forward setExpanded to child if it supports it (duck-typed for isExpandable checks) */
+	setExpanded(expanded: boolean): void {
+		const child = this.#child as any;
+		if (typeof child.setExpanded === "function") {
+			child.setExpanded(expanded);
+		}
+	}
+
+	invalidate(): void {
+		this.#child.invalidate?.();
+	}
+
+	render(width: number): string[] {
+		const childLines = this.#child.render(Math.max(1, width - GUTTER_WIDTH));
+
+		if (childLines.length === 0) {
+			return [];
+		}
+
+		// Find the first visually non-empty line. Leading lines may be plain "" (a
+		// Spacer) or ANSI-background-padded "empty" lines from Box/Text paddingY>=1.
+		// Strip SGR escapes before trim() so the padded lines register as empty.
+		let firstContentIdx = 0;
+		for (let i = 0; i < childLines.length; i++) {
+			if (childLines[i].replace(ANSI_SGR_RE, "").trim() !== "") {
+				firstContentIdx = i;
+				break;
+			}
+		}
+
+		const prefix = this.#buildGutterPrefix();
+		const result: string[] = [];
+		for (let i = 0; i < childLines.length; i++) {
+			result.push((i === firstContentIdx ? prefix : GUTTER_PAD) + childLines[i]);
+		}
+		return result;
+	}
+
+	dispose(): void {
+		this.#stopSpinner();
+	}
+
+	#buildGutterPrefix(): string {
+		if (this.#state === "done") {
+			const colorFn = this.#doneColorFnForOutcome();
+			return `${colorFn(this.#config.symbol)} `;
+		}
+
+		if (this.#config.animated) {
+			const frame = this.#spinnerFrames[this.#currentFrame];
+			return `${this.#config.activeColorFn(frame)} `;
+		}
+
+		return `${this.#config.activeColorFn(this.#config.symbol)} `;
+	}
+
+	#doneColorFnForOutcome(): (s: string) => string {
+		if (this.#outcome === "error" && this.#config.doneErrorColorFn) {
+			return this.#config.doneErrorColorFn;
+		}
+		if (this.#outcome === "warning" && this.#config.doneWarningColorFn) {
+			return this.#config.doneWarningColorFn;
+		}
+		if (this.#outcome === "success" && this.#config.doneSuccessColorFn) {
+			return this.#config.doneSuccessColorFn;
+		}
+		return this.#config.doneColorFn;
+	}
+
+	#startSpinner(): void {
+		const interval = this.#config.activeIntervalMs ?? SPINNER_INTERVAL_MS;
+		this.#intervalId = setInterval(() => {
+			this.#currentFrame = (this.#currentFrame + 1) % this.#spinnerFrames.length;
+			this.#ui.requestRender();
+		}, interval);
+	}
+
+	#stopSpinner(): void {
+		if (this.#intervalId) {
+			clearInterval(this.#intervalId);
+			this.#intervalId = undefined;
+		}
+	}
+}
+
+// ============================================================================
+// DisposableContainer — stops gutter timers on clear/remove
+// ============================================================================
+
+function disposeIfGutter(child: Component): void {
+	if (child instanceof GutterBlock) {
+		child.dispose();
+	}
+}
+
+/**
+ * Container subclass that disposes GutterBlock children when they are
+ * removed or the container is cleared. Prevents orphaned spinner timers.
+ */
+export class DisposableContainer extends Container {
+	override removeChild(component: Component): void {
+		disposeIfGutter(component);
+		super.removeChild(component);
+	}
+
+	override clear(): void {
+		for (const child of this.children) {
+			disposeIfGutter(child);
+		}
+		super.clear();
+	}
+}
+
+// ============================================================================
+// Factory functions
+// ============================================================================
+
+/**
+ * Animated ● gutter for tool calls and slash-command executions.
+ * Active: pulsing dot — alternates ● / blank in `muted` color to
+ *   differentiate from the braille ✻ thinking spinner. Matches the
+ *   xcsh tool-initialization aesthetic.
+ * Done (unknown outcome): `dim` — neutral "completed" color when the call
+ *   site does not have success/error information.
+ * Done (success): `gutterSuccess` (falls back to `success` when the theme
+ *   does not define the dedicated token).
+ * Done (error): `gutterError` (falls back to `error`).
+ * Done (warning): `gutterWarning` (falls back to `warning`).
+ */
+export function createToolGutter<T extends Component>(ui: TUI, child: T): GutterBlock<T> {
+	return new GutterBlock(ui, child, {
+		symbol: "●",
+		activeColorFn: (s: string) => theme.fg("muted", s),
+		activeFrames: ["●", " "],
+		// 600ms/frame ≈ 1.2s full on/off cycle — a breathing pulse rather than a
+		// strobe. The braille spinner's 80ms works for 10 frames; a 2-frame
+		// pulse at the same rate reads as a 6 Hz flicker.
+		activeIntervalMs: 600,
+		doneColorFn: (s: string) => theme.fg("dim", s),
+		doneSuccessColorFn: (s: string) => theme.fg("gutterSuccess", s),
+		doneErrorColorFn: (s: string) => theme.fg("gutterError", s),
+		doneWarningColorFn: (s: string) => theme.fg("gutterWarning", s),
+		animated: true,
+	});
+}
+
+/** Static ● gutter for assistant text — immediately in done state, white/text color */
+export function createTextGutter<T extends Component>(ui: TUI, child: T): GutterBlock<T> {
+	return new GutterBlock(
+		ui,
+		child,
+		{
+			symbol: "●",
+			activeColorFn: (s: string) => theme.fg("text", s),
+			doneColorFn: (s: string) => theme.fg("text", s),
+			animated: false,
+		},
+		"done",
+	);
+}
+
+/**
+ * ● gutter for streaming assistant messages — starts active (non-animated, white ●)
+ * so it can switch to thinking mode (✻ spinner) if thinking content arrives.
+ * Call setDone() when message_end fires.
+ */
+export function createStreamingAssistantGutter<T extends Component>(ui: TUI, child: T): GutterBlock<T> {
+	return new GutterBlock(
+		ui,
+		child,
+		{
+			symbol: "●",
+			activeColorFn: (s: string) => theme.fg("text", s),
+			doneColorFn: (s: string) => theme.fg("text", s),
+			animated: false,
+		},
+		"active",
+	);
+}
+
+/** Animated ✻ gutter for thinking — spinner in spinnerAccent, done in dim */
+export function createThinkingGutter<T extends Component>(ui: TUI, child: T): GutterBlock<T> {
+	return new GutterBlock(ui, child, {
+		symbol: "✻",
+		activeColorFn: (s: string) => theme.fg("spinnerAccent", s),
+		doneColorFn: (s: string) => theme.fg("dim", s),
+		animated: true,
+	});
+}
+
+/** Static ※ gutter for system/recap messages — immediately in done state, dim */
+export function createSystemGutter<T extends Component>(ui: TUI, child: T): GutterBlock<T> {
+	return new GutterBlock(
+		ui,
+		child,
+		{
+			symbol: "※",
+			activeColorFn: (s: string) => theme.fg("dim", s),
+			doneColorFn: (s: string) => theme.fg("dim", s),
+			animated: false,
+		},
+		"done",
+	);
+}

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

@@ -0,0 +1,158 @@
+import {
+	type Component,
+	Container,
+	Ellipsis,
+	Input,
+	matchesKey,
+	padding,
+	Spacer,
+	Text,
+	truncateToWidth,
+	visibleWidth,
+} from "@f5xc-salesdemos/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";
+
+class HistoryResultsList implements Component {
+	#results: HistoryEntry[] = [];
+	#selectedIndex = 0;
+	#maxVisible = 10;
+
+	setResults(results: HistoryEntry[], selectedIndex: number): void {
+		this.#results = results;
+		this.#selectedIndex = selectedIndex;
+	}
+
+	setSelectedIndex(selectedIndex: number): void {
+		this.#selectedIndex = selectedIndex;
+	}
+
+	invalidate(): void {
+		// No cached state to invalidate currently
+	}
+
+	render(width: number): string[] {
+		const lines: string[] = [];
+
+		if (this.#results.length === 0) {
+			lines.push(theme.fg("muted", "  No matching history"));
+			return lines;
+		}
+
+		const startIndex = Math.max(
+			0,
+			Math.min(this.#selectedIndex - Math.floor(this.#maxVisible / 2), this.#results.length - this.#maxVisible),
+		);
+		const endIndex = Math.min(startIndex + this.#maxVisible, this.#results.length);
+
+		for (let i = startIndex; i < endIndex; i++) {
+			const entry = this.#results[i];
+			const isSelected = i === this.#selectedIndex;
+
+			const cursorSymbol = `${theme.nav.cursor} `;
+			const cursorWidth = visibleWidth(cursorSymbol);
+			const cursor = isSelected ? theme.fg("chromeAccent", cursorSymbol) : padding(cursorWidth);
+			const maxWidth = width - cursorWidth;
+
+			const normalized = entry.prompt.replace(/\s+/g, " ").trim();
+			const truncated = truncateToWidth(normalized, maxWidth);
+			lines.push(cursor + (isSelected ? theme.bold(truncated) : truncated));
+		}
+
+		if (startIndex > 0 || endIndex < this.#results.length) {
+			const scrollText = `  (${this.#selectedIndex + 1}/${this.#results.length})`;
+			lines.push(theme.fg("muted", truncateToWidth(scrollText, width, Ellipsis.Omit)));
+		}
+
+		return lines;
+	}
+}
+
+export class HistorySearchComponent extends Container {
+	#historyStorage: HistoryStorage;
+	#searchInput: Input;
+	#results: HistoryEntry[] = [];
+	#selectedIndex = 0;
+	#resultsList: HistoryResultsList;
+	#onSelect: (prompt: string) => void;
+	#onCancel: () => void;
+	#resultLimit = 100;
+
+	constructor(historyStorage: HistoryStorage, onSelect: (prompt: string) => void, onCancel: () => void) {
+		super();
+		this.#historyStorage = historyStorage;
+		this.#onSelect = onSelect;
+		this.#onCancel = onCancel;
+
+		this.#searchInput = new Input();
+		this.#searchInput.onSubmit = () => {
+			const selected = this.#results[this.#selectedIndex];
+			if (selected) {
+				this.#onSelect(selected.prompt);
+			}
+		};
+		this.#searchInput.onEscape = () => {
+			this.#onCancel();
+		};
+
+		this.#resultsList = new HistoryResultsList();
+
+		this.addChild(new Spacer(1));
+		this.addChild(new Text(theme.bold("Search History (Ctrl+R)"), 1, 0));
+		this.addChild(new Spacer(1));
+		this.addChild(new DynamicBorder());
+		this.addChild(new Spacer(1));
+		this.addChild(this.#searchInput);
+		this.addChild(new Spacer(1));
+		this.addChild(this.#resultsList);
+		this.addChild(new Spacer(1));
+		this.addChild(new Text(theme.fg("muted", "up/down navigate  enter select  esc cancel"), 1, 0));
+		this.addChild(new Spacer(1));
+		this.addChild(new DynamicBorder());
+
+		this.#updateResults();
+	}
+
+	handleInput(keyData: string): void {
+		if (matchesKey(keyData, "up")) {
+			if (this.#results.length === 0) return;
+			this.#selectedIndex = Math.max(0, this.#selectedIndex - 1);
+			this.#resultsList.setSelectedIndex(this.#selectedIndex);
+			return;
+		}
+
+		if (matchesKey(keyData, "down")) {
+			if (this.#results.length === 0) return;
+			this.#selectedIndex = Math.min(this.#results.length - 1, this.#selectedIndex + 1);
+			this.#resultsList.setSelectedIndex(this.#selectedIndex);
+			return;
+		}
+
+		if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
+			const selected = this.#results[this.#selectedIndex];
+			if (selected) {
+				this.#onSelect(selected.prompt);
+			}
+			return;
+		}
+
+		if (matchesAppInterrupt(keyData)) {
+			this.#onCancel();
+			return;
+		}
+
+		this.#searchInput.handleInput(keyData);
+		this.#updateResults();
+	}
+
+	#updateResults(): void {
+		const query = this.#searchInput.getValue().trim();
+		this.#results = query
+			? this.#historyStorage.search(query, this.#resultLimit)
+			: this.#historyStorage.getRecent(this.#resultLimit);
+		this.#selectedIndex = 0;
+		this.#resultsList.setResults(this.#results, this.#selectedIndex);
+	}
+}

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

@@ -0,0 +1,151 @@
+/**
+ * Multi-line editor component for hooks and ask custom input.
+ * Supports Ctrl+G for external editor.
+ *
+ * Two modes:
+ * - Default (hook): Enter inserts newline, Ctrl+Enter submits, bordered popup
+ * - Prompt-style (ask): Enter submits, Shift+Enter inserts newline, legacy ask chrome
+ */
+import { Container, Editor, matchesKey, Spacer, Text, type TUI } from "@f5xc-salesdemos/pi-tui";
+import { getEditorTheme, theme } from "../../modes/theme/theme";
+import { matchesAppExternalEditor, matchesAppInterrupt } from "../../modes/utils/keybinding-matchers";
+import { getEditorCommand, openInEditor } from "../../utils/external-editor";
+import { DynamicBorder } from "./dynamic-border";
+
+export interface HookEditorOptions {
+	/** When true, use prompt-style keybindings with the legacy ask prompt chrome. */
+	promptStyle?: boolean;
+}
+
+export class HookEditorComponent extends Container {
+	#editor: Editor;
+	#onSubmitCallback: (value: string) => void;
+	#onCancelCallback: () => void;
+	#tui: TUI;
+	#promptStyle: boolean;
+
+	constructor(
+		tui: TUI,
+		title: string,
+		prefill: string | undefined,
+		onSubmit: (value: string) => void,
+		onCancel: () => void,
+		options?: HookEditorOptions,
+	) {
+		super();
+
+		this.#tui = tui;
+		this.#onSubmitCallback = onSubmit;
+		this.#onCancelCallback = onCancel;
+		this.#promptStyle = options?.promptStyle ?? false;
+
+		this.addChild(new DynamicBorder());
+		this.addChild(new Spacer(1));
+
+		// Title
+		this.addChild(new Text(theme.fg("contentAccent", title), 1, 0));
+		this.addChild(new Spacer(1));
+
+		// Editor
+		this.#editor = new Editor(getEditorTheme());
+		if (this.#promptStyle) {
+			this.#editor.setBorderVisible(false);
+			this.#editor.setPromptGutter("> ");
+			this.#editor.disableSubmit = true;
+		}
+		if (prefill) {
+			this.#editor.setText(prefill);
+		}
+		this.addChild(this.#editor);
+
+		this.addChild(new Spacer(1));
+
+		// Hint
+		const hint = this.#promptStyle
+			? "enter submit  esc cancel  ctrl+g external editor"
+			: "ctrl+enter submit  esc cancel  ctrl+g external editor";
+		this.addChild(new Text(theme.fg("dim", hint), 1, 0));
+
+		this.addChild(new Spacer(1));
+		this.addChild(new DynamicBorder());
+	}
+
+	handleInput(keyData: string): void {
+		if (this.#promptStyle) {
+			this.#handlePromptStyleInput(keyData);
+		} else {
+			this.#handleHookStyleInput(keyData);
+		}
+	}
+
+	/** Prompt-style: raw Enter submits; Editor owns newline-producing sequences. */
+	#handlePromptStyleInput(keyData: string): void {
+		// Prompt-style keeps Escape as an explicit cancel key and also honors app.interrupt remaps.
+		if (matchesKey(keyData, "escape") || matchesKey(keyData, "esc") || matchesAppInterrupt(keyData)) {
+			this.#onCancelCallback();
+			return;
+		}
+
+		// Ctrl+G for external editor
+		if (matchesAppExternalEditor(keyData)) {
+			void this.#openExternalEditor();
+			return;
+		}
+
+		// Submit on any plain Enter encoding, including terminals that report unmodified Enter as LF.
+		if (matchesKey(keyData, "enter") || matchesKey(keyData, "return")) {
+			this.#onSubmitCallback(this.#editor.getText());
+			return;
+		}
+
+		// Let Editor handle modified newline-producing variants (Shift+Enter, Ctrl+Enter, Alt+Enter, etc.)
+		this.#editor.handleInput(keyData);
+	}
+
+	/** Hook-style: Enter=newline, Ctrl+Enter=submit (original behavior) */
+	#handleHookStyleInput(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 (matchesAppInterrupt(keyData)) {
+			this.#onCancelCallback();
+			return;
+		}
+
+		// Ctrl+G for external editor
+		if (matchesAppExternalEditor(keyData)) {
+			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,81 @@
+/**
+ * Simple text input component for hooks.
+ */
+import { Container, Input, Markdown, matchesKey, Spacer, Text, type TUI } from "@f5xc-salesdemos/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";
+
+export interface HookInputOptions {
+	tui?: TUI;
+	timeout?: number;
+	onTimeout?: () => void;
+}
+
+export class HookInputComponent extends Container {
+	#input: Input;
+	#onSubmitCallback: (value: string) => void;
+	#onCancelCallback: () => void;
+	#titleComponent: Markdown;
+	#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.#titleComponent = new Markdown(title, 1, 0, getMarkdownTheme(), {
+			color: t => theme.fg("contentAccent", 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.#titleComponent.setText(`${this.#baseTitle} (${s}s)`),
+				() => {
+					opts.onTimeout?.();
+					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 {
+		// Reset countdown on any interaction
+		this.#countdown?.reset();
+		if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
+			this.#onSubmitCallback(this.#input.getValue());
+		} else if (matchesAppInterrupt(keyData)) {
+			this.#onCancelCallback();
+		} else {
+			this.#input.handleInput(keyData);
+		}
+	}
+
+	dispose(): void {
+		this.#countdown?.dispose();
+	}
+}