@oh-my-pi/pi-tui 18.2.4 → 18.2.6

package/src/overlays/hook-editor.ts

@@ -0,0 +1,272 @@
+/**
+ * Multi-line editor component for hooks and ask custom input.
+ * Supports Ctrl+G for external editor.
+ *
+ * Two modes:
+ * - Default (hook): Enter inserts newline, the `app.message.followUp` chord
+ *   (Ctrl+Q / Ctrl+Enter) submits, bordered popup
+ * - Prompt-style (ask): Enter submits, Shift+Enter inserts newline, legacy ask chrome
+ */
+import { Editor, type Focusable, matchesKey, Spacer, Text, type TUI } from "../index";
+import { BracketedPasteHandler } from "../bracketed-paste";
+import { getEditorTheme, theme } from "../theme/theme";
+import { matchesAppExternalEditor, matchesAppFollowUp, matchesAppInterrupt } from "../keybinding-matchers";
+import { formTheme } from "../chrome/form-theme";
+import { OverlayPanel } from "../chrome/overlay-box";
+import { FormField } from "../components/form";
+
+export interface HookEditorOptions {
+	/** Edit text with the host's configured external editor. */
+	externalEditor?: (text: string) => Promise<string | null>;
+	/** When true, use prompt-style keybindings with the legacy ask prompt chrome. */
+	promptStyle?: boolean;
+	/**
+	 * Max rows the inner Editor may occupy. When omitted, the editor is
+	 * bounded to the current terminal height minus the component's chrome
+	 * (≈10 rows) so long content scrolls instead of pushing the submit
+	 * hint out of view.
+	 */
+	maxHeight?: number;
+}
+
+/** Interactive multiline dialog used by hooks and the ask tool's Other response. */
+export class HookEditorComponent extends OverlayPanel implements Focusable {
+	#editor: Editor;
+	#field: FormField;
+	#onSubmitCallback: (value: string) => void;
+	#onCancelCallback: () => void;
+	#tui: TUI;
+	#promptStyle: boolean;
+	#externalEditor: HookEditorOptions["externalEditor"];
+	#pasteHandler = new BracketedPasteHandler();
+	#pendingPastes: { settled: boolean; text: string | undefined }[] = [];
+	#submitQueued = false;
+	#disposed = false;
+	/** Focus state mirrored to the nested editor during rendering. */
+	focused = false;
+
+	constructor(
+		tui: TUI,
+		title: string,
+		prefill: string | undefined,
+		onSubmit: (value: string) => void,
+		onCancel: () => void,
+		options?: HookEditorOptions,
+	) {
+		// First title line insets into the panel border; remaining lines (e.g. the
+		// bounded ask question under "◆ Other (type your own)") stay as body rows
+		// so they are never truncated into the one-row border.
+		const [titleLine = "", ...detailLines] = title.split("\n");
+		super(titleLine);
+
+		this.#tui = tui;
+		this.#onSubmitCallback = onSubmit;
+		this.#onCancelCallback = onCancel;
+		this.#promptStyle = options?.promptStyle ?? false;
+		this.#externalEditor = options?.externalEditor;
+
+		// Editor
+		this.#editor = new Editor(getEditorTheme());
+		if (this.#promptStyle) {
+			this.#editor.setBorderVisible(false);
+			this.#editor.setPromptGutter("> ");
+			this.#editor.disableSubmit = true;
+		}
+		// Bound the editor so long content scrolls instead of pushing the
+		// submit hint off-screen. Caller may override via options.maxHeight.
+		const termRows = this.#tui.terminal?.rows ?? process.stdout.rows ?? 40;
+		this.#editor.setMaxHeight(options?.maxHeight ?? Math.max(3, termRows - 12));
+		this.#editor.setScrollbarVisible(true);
+		if (prefill) {
+			this.#editor.setText(prefill);
+		}
+		// Hint
+		const hint = this.#promptStyle
+			? "enter or ctrl+q submit  esc cancel  ctrl+g external editor"
+			: "ctrl+q/ctrl+enter submit  esc cancel  ctrl+g external editor";
+		this.#field = new FormField(this.#editor, {
+			theme: formTheme,
+			details:
+				detailLines.length > 0
+					? [new Spacer(1), ...detailLines.map(line => new Text(theme.fg("accent", line), 0, 0))]
+					: undefined,
+			hint,
+		});
+		this.addChild(this.#field);
+		this.addChild(new Spacer(1));
+	}
+
+	/** Keep the nested editor's software/hardware cursor mode aligned with the dialog focus target. */
+	setUseTerminalCursor(useTerminalCursor: boolean): void {
+		this.#field.setUseTerminalCursor(useTerminalCursor);
+	}
+
+	/** Render the dialog after forwarding its focus state to the nested editor. */
+	override render(width: number): readonly string[] {
+		this.#field.focused = this.focused;
+		return super.render(width);
+	}
+
+	handleInput(keyData: string): void {
+		if (this.#disposed) return;
+		const paste = this.#pasteHandler.process(keyData);
+		if (paste.handled) {
+			if (paste.pasteContent === undefined) return;
+			this.pasteText(paste.pasteContent);
+			if (paste.remaining.length > 0) this.handleInput(paste.remaining);
+			return;
+		}
+		if (this.#promptStyle) {
+			this.#handlePromptStyleInput(keyData);
+		} else {
+			this.#handleHookStyleInput(keyData);
+		}
+	}
+
+	#submitCurrentText(requireText = false): void {
+		if (this.#disposed) return;
+		if (this.#pendingPastes.length > 0) {
+			this.#submitQueued = true;
+			return;
+		}
+		const text = this.#editor.getExpandedText();
+		if (requireText && text.trim().length === 0) return;
+		this.dispose();
+		this.#onSubmitCallback(text);
+	}
+
+	/** Reserve ordered clipboard delivery. Completion accepts nonempty text once, or releases on undefined. */
+	beginPaste(): (text: string | undefined) => boolean {
+		if (this.#disposed) return () => false;
+		const pending: { settled: boolean; text: string | undefined } = { settled: false, text: undefined };
+		this.#pendingPastes.push(pending);
+		return text => {
+			if (this.#disposed || pending.settled) return false;
+			pending.settled = true;
+			pending.text = text;
+			// A failed/empty read releases the wait, but must not submit an answer.
+			if (!text) this.#submitQueued = false;
+			let delivered = 0;
+			for (const paste of this.#pendingPastes) {
+				if (!paste.settled) break;
+				if (paste.text) this.#editor.pasteText(paste.text);
+				delivered++;
+			}
+			if (delivered > 0) this.#pendingPastes.splice(0, delivered);
+			if (this.#pendingPastes.length === 0 && this.#submitQueued) {
+				this.#submitQueued = false;
+				this.#submitCurrentText(true);
+			}
+			return !!text;
+		};
+	}
+
+	override dispose(): void {
+		if (this.#disposed) return;
+		this.#disposed = true;
+		this.#submitQueued = false;
+		this.#pendingPastes.length = 0;
+		super.dispose();
+	}
+
+	#cancel(): void {
+		this.dispose();
+		this.#onCancelCallback();
+	}
+
+	/** Route non-bracketed paste transports (e.g. kitty's OSC 5522 enhanced clipboard)
+	 *  into the inner editor, mirroring bracketed-paste semantics. Without this hook,
+	 *  enhanced-paste routing falls back to the main prompt editor hidden behind the
+	 *  dialog (#2127 routing contract). */
+	pasteText(text: string): void {
+		if (this.#disposed) return;
+		if (this.#pendingPastes.length > 0) this.beginPaste()(text);
+		else this.#editor.pasteText(text);
+	}
+
+	/**
+	 * Prompt-style: raw Enter submits; Editor owns newline-producing sequences.
+	 * The follow-up chord (`app.message.followUp` → Ctrl+Q / Ctrl+Enter) also
+	 * submits, so muscle memory from the main editor / hook-style surface works
+	 * here and Windows Terminal — which can't deliver a distinct Ctrl+Enter
+	 * event (#1903) — still has a working chord via Ctrl+Q (#3353).
+	 */
+	#handlePromptStyleInput(keyData: string): void {
+		// Submit on the follow-up chord first so it wins over Editor's own
+		// Ctrl+Enter newline handling. Mirrors #handleHookStyleInput.
+		if (matchesAppFollowUp(keyData)) {
+			this.#submitCurrentText();
+			return;
+		}
+
+		// 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.#cancel();
+			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.#submitCurrentText();
+			return;
+		}
+
+		// Let Editor handle modified newline-producing variants (Shift+Enter, Ctrl+Enter, Alt+Enter, etc.)
+		this.#editor.handleInput(keyData);
+	}
+
+	/** Hook-style: Enter=newline, app.message.followUp chord (Ctrl+Q/Ctrl+Enter) submits. */
+	#handleHookStyleInput(keyData: string): void {
+		// Submit on the follow-up chord. Uses the shared keybinding so Ctrl+Q works
+		// on Windows Terminal (#1903) and any user remap of `app.message.followUp`
+		// applies here too.
+		if (matchesAppFollowUp(keyData)) {
+			this.#submitCurrentText();
+			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.#cancel();
+			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 externalEditor = this.#externalEditor;
+		if (!externalEditor) return;
+
+		const currentText = this.#editor.getExpandedText();
+		try {
+			this.#tui.stop();
+			const result = await externalEditor(currentText);
+			if (!this.#disposed && result !== null) {
+				this.#editor.setText(result);
+			}
+		} finally {
+			this.#tui.start();
+			this.#tui.requestRender(true);
+		}
+	}
+}

package/src/overlays/hook-input.ts

@@ -0,0 +1,84 @@
+/**
+ * Simple text input component for hooks.
+ */
+import { Spacer, type TUI } from "../index";
+import { matchesAppInterrupt } from "../keybinding-matchers";
+import { CountdownTimer } from "../chrome/countdown-timer";
+import { formTheme } from "../chrome/form-theme";
+import { OverlayPanel } from "../chrome/overlay-box";
+import { Form, TextFormField } from "../components/form";
+
+export interface HookInputOptions {
+	tui?: TUI;
+	timeout?: number;
+	onTimeout?: () => void;
+}
+
+export class HookInputComponent extends OverlayPanel {
+	#field: TextFormField;
+	#form: Form;
+	#onSubmitCallback: (value: string) => void;
+	#onCancelCallback: () => void;
+	#baseTitle: string;
+	#countdown: CountdownTimer | undefined;
+
+	constructor(
+		title: string,
+		_placeholder: string | undefined,
+		onSubmit: (value: string) => void,
+		onCancel: () => void,
+		opts?: HookInputOptions,
+	) {
+		super(title);
+
+		this.#onSubmitCallback = onSubmit;
+		this.#onCancelCallback = onCancel;
+		this.#baseTitle = title;
+
+		if (opts?.timeout && opts.timeout > 0 && opts.tui) {
+			this.#countdown = new CountdownTimer(
+				opts.timeout,
+				opts.tui,
+				s => (this.title = `${this.#baseTitle} (${s}s)`),
+				() => {
+					opts.onTimeout?.();
+					this.#onCancelCallback();
+				},
+			);
+		}
+
+		this.#field = new TextFormField({
+			theme: formTheme,
+			hint: "enter submit  esc cancel",
+			empty: "submit",
+			onSubmit: value => this.#onSubmitCallback(value),
+			onCancel: () => this.#onCancelCallback(),
+		});
+		this.#form = new Form({
+			fields: [this.#field],
+			onCancel: () => this.#onCancelCallback(),
+			isCancel: matchesAppInterrupt,
+		});
+		this.addChild(this.#form);
+		this.addChild(new Spacer(1));
+	}
+
+	handleInput(keyData: string): void {
+		// Reset countdown on any interaction
+		this.#countdown?.reset();
+		this.#form.handleInput(keyData);
+	}
+
+	/** Route non-bracketed paste transports (e.g. kitty's OSC 5522 enhanced clipboard)
+	 *  into the inner field, mirroring bracketed-paste semantics. Pasting counts as
+	 *  interaction, so the timeout countdown resets like any keystroke. */
+	pasteText(text: string): void {
+		this.#countdown?.reset();
+		this.#form.pasteText(text);
+	}
+
+	override dispose(): void {
+		this.#countdown?.dispose();
+		super.dispose();
+	}
+}