@howaboua/pi-ask 0.0.5 → 0.0.7

package/ask/tui-input.ts

@@ -0,0 +1,145 @@
+import type { KeybindingsManager } from "@earendil-works/pi-coding-agent";
+import type { Editor } from "@earendil-works/pi-tui";
+import type {
+	AskPrompt,
+	AskResponse,
+	PromptChoice,
+	PromptState,
+} from "./contracts.js";
+import { promptStatesToResponses } from "./state.js";
+
+export type EditingKind = "other" | "comment";
+
+export interface AskUiState {
+	tab: number;
+	focus: number;
+	editing: EditingKind | null;
+}
+
+interface EditingInputOptions {
+	advance: () => void;
+	editor: Editor;
+	keybindings: KeybindingsManager;
+	refresh: () => void;
+	saveEditing: (submittedText?: string) => void;
+	state: AskUiState;
+}
+
+export function handleAskEditingInput(
+	data: string,
+	{
+		advance,
+		editor,
+		keybindings,
+		refresh,
+		saveEditing,
+		state,
+	}: EditingInputOptions,
+): void {
+	if (keybindings.matches(data, "tui.input.tab")) {
+		saveEditing(editor.getText());
+		state.editing = null;
+		advance();
+		return;
+	}
+	if (keybindings.matches(data, "tui.select.cancel")) {
+		state.editing = null;
+		refresh();
+		return;
+	}
+	editor.handleInput(data);
+	refresh();
+}
+
+interface PromptInputOptions {
+	advanceWithDefault: () => void;
+	choices: () => PromptChoice[];
+	count: () => number;
+	keybindings: KeybindingsManager;
+	pick: (index: number) => void;
+	refresh: () => void;
+	selectOther: () => void;
+	startEditingComment: () => void;
+	state: AskUiState;
+}
+
+export function handleAskPromptInput(
+	data: string,
+	{
+		advanceWithDefault,
+		choices,
+		count,
+		keybindings,
+		pick,
+		refresh,
+		selectOther,
+		startEditingComment,
+		state,
+	}: PromptInputOptions,
+): void {
+	if (keybindings.matches(data, "tui.select.up")) {
+		state.focus = Math.max(0, state.focus - 1);
+		refresh();
+		return;
+	}
+	if (keybindings.matches(data, "tui.select.down")) {
+		state.focus = Math.min(count() - 1, state.focus + 1);
+		refresh();
+		return;
+	}
+	if (keybindings.matches(data, "tui.input.tab")) {
+		advanceWithDefault();
+		return;
+	}
+	if (!keybindings.matches(data, "tui.select.confirm")) return;
+	if (state.focus === choices().length) {
+		selectOther();
+		return;
+	}
+	if (state.focus === choices().length + 1) {
+		startEditingComment();
+		return;
+	}
+	pick(state.focus);
+}
+
+interface NavigationInputOptions {
+	done: (responses: AskResponse[] | null) => void;
+	isReview: () => boolean;
+	keybindings: KeybindingsManager;
+	promptStates: PromptState[];
+	prompts: AskPrompt[];
+	setTab: (next: number) => void;
+	state: AskUiState;
+}
+
+export function handleAskNavigationInput(
+	data: string,
+	{
+		done,
+		isReview,
+		keybindings,
+		promptStates,
+		prompts,
+		setTab,
+		state,
+	}: NavigationInputOptions,
+): boolean {
+	if (keybindings.matches(data, "tui.select.cancel")) {
+		done(null);
+		return true;
+	}
+	if (keybindings.matches(data, "tui.editor.cursorLeft")) {
+		setTab(state.tab - 1);
+		return true;
+	}
+	if (keybindings.matches(data, "tui.editor.cursorRight")) {
+		setTab(state.tab + 1);
+		return true;
+	}
+	if (!isReview()) return false;
+	if (keybindings.matches(data, "tui.select.confirm")) {
+		done(promptStatesToResponses(prompts, promptStates));
+	}
+	return true;
+}

package/ask/tui-render.ts

@@ -0,0 +1,276 @@
+import {
+	type ExtensionContext,
+	type KeybindingsManager,
+} from "@earendil-works/pi-coding-agent";
+import { Editor, wrapTextWithAnsi } from "@earendil-works/pi-tui";
+import { OTHER_OPTION_LABEL } from "./constants.js";
+import type { AskPrompt, PromptChoice, PromptState } from "./contracts.js";
+import type { AskUiState, EditingKind } from "./tui-input.js";
+
+type AskTheme = ExtensionContext["ui"]["theme"];
+type AskKeybinding = Parameters<KeybindingsManager["getKeys"]>[0];
+type AddLine = (line?: string) => void;
+interface RenderTabsOptions {
+	handoff: boolean;
+	prompts: AskPrompt[];
+	responded: (index: number) => boolean;
+	steering: boolean;
+	tab: number;
+	theme: AskTheme;
+}
+
+interface RenderReviewOptions {
+	add: AddLine;
+	handoff: boolean;
+	keybindings: KeybindingsManager;
+	promptStates: PromptState[];
+	prompts: AskPrompt[];
+	theme: AskTheme;
+	width: number;
+}
+
+interface RenderChoiceOptions {
+	add: AddLine;
+	checked: boolean | undefined;
+	choice: PromptChoice;
+	selected: boolean;
+	theme: AskTheme;
+	width: number;
+}
+
+interface RenderPromptOptions {
+	add: AddLine;
+	editor: Editor;
+	handoff: boolean;
+	isEditing: EditingKind | null;
+	keybindings: KeybindingsManager;
+	choices: PromptChoice[];
+	prompt: AskPrompt;
+	promptState: PromptState | undefined;
+	state: AskUiState;
+	theme: AskTheme;
+	width: number;
+}
+
+function addWrapped(
+	add: AddLine,
+	text: string,
+	width: number,
+	indent = "",
+): void {
+	for (const line of wrapTextWithAnsi(
+		text,
+		Math.max(1, width - indent.length),
+	)) {
+		add(`${indent}${line}`);
+	}
+}
+
+function renderKeyHint(
+	theme: AskTheme,
+	keybindings: KeybindingsManager,
+	action: AskKeybinding,
+	description: string,
+): string {
+	return (
+		theme.fg("dim", keybindings.getKeys(action).join("/")) +
+		theme.fg("muted", ` ${description}`)
+	);
+}
+export function renderAskTabs({
+	handoff,
+	prompts,
+	responded,
+	steering,
+	tab,
+	theme,
+}: RenderTabsOptions): string {
+	const tabs = Array.from({ length: prompts.length + 1 }, (_, index) => {
+		const active = index === tab;
+		const label =
+			index === prompts.length
+				? handoff
+					? "Resume"
+					: "Review"
+				: `${responded(index) ? "■" : "□"} ${index + 1}`;
+		return active
+			? theme.bg("selectedBg", theme.fg("text", ` ${label} `))
+			: theme.fg("muted", ` ${label} `);
+	}).join(" ");
+	return ` ${tabs}${steering ? theme.fg("muted", "  Agent continues while you decide") : ""}`;
+}
+
+export function renderAskReview({
+	add,
+	handoff,
+	keybindings,
+	promptStates,
+	prompts,
+	theme,
+	width,
+}: RenderReviewOptions): void {
+	add(theme.fg("accent", handoff ? " Resume agent" : " Review"));
+	add();
+	prompts.forEach((prompt, index) => {
+		const promptState = promptStates[index];
+		const selections = promptState?.selections ?? [];
+		addWrapped(
+			add,
+			theme.fg("muted", `${index + 1}. ${prompt.title}`),
+			width,
+			" ",
+		);
+		addWrapped(
+			add,
+			theme.fg("text", selections.join(", ") || "No selection"),
+			width,
+			"    ",
+		);
+		if (promptState?.comment.trim()) {
+			addWrapped(
+				add,
+				theme.fg("muted", `Comment: ${promptState.comment.trim()}`),
+				width,
+				"    ",
+			);
+		}
+	});
+	add();
+	addWrapped(
+		add,
+		" " +
+			renderKeyHint(
+				theme,
+				keybindings,
+				"tui.select.confirm",
+				handoff ? "return control" : "submit",
+			) +
+			" • " +
+			renderKeyHint(
+				theme,
+				keybindings,
+				"tui.editor.cursorLeft",
+				"previous prompt",
+			) +
+			" • " +
+			renderKeyHint(
+				theme,
+				keybindings,
+				"tui.editor.cursorRight",
+				"next prompt",
+			) +
+			" • " +
+			renderKeyHint(theme, keybindings, "tui.select.cancel", "dismiss"),
+		width,
+	);
+}
+
+function renderAskChoice({
+	add,
+	checked,
+	choice,
+	selected,
+	theme,
+	width,
+}: RenderChoiceOptions): void {
+	add(
+		`${selected ? theme.fg("accent", "> ") : "  "}${checked ? theme.fg("success", "✓ ") : "  "}${theme.fg(selected ? "accent" : "text", choice.label)}`,
+	);
+	if (choice.description) {
+		addWrapped(add, theme.fg("muted", choice.description), width, "    ");
+	}
+}
+
+export function renderAskPrompt({
+	add,
+	editor,
+	handoff,
+	isEditing,
+	keybindings,
+	choices,
+	prompt,
+	promptState,
+	state,
+	theme,
+	width,
+}: RenderPromptOptions): void {
+	if (handoff) {
+		add(theme.fg("accent", " Human action needed"));
+		add();
+	}
+	addWrapped(add, theme.fg("text", prompt.title), width, " ");
+	add(
+		theme.fg(
+			"muted",
+			` ${prompt.multiple ? "Choose any that apply" : "Choose one"}`,
+		),
+	);
+	if (prompt.body) {
+		add();
+		addWrapped(add, theme.fg("muted", prompt.body), width, "   ");
+	}
+	add();
+	choices.forEach((choice, index) => {
+		renderAskChoice({
+			add,
+			checked: promptState?.selections.includes(choice.label),
+			choice,
+			selected: state.focus === index,
+			theme,
+			width,
+		});
+	});
+	const selectedOther = state.focus === choices.length;
+	add(
+		`${selectedOther ? theme.fg("accent", "> ") : "  "}${promptState?.customEnabled ? theme.fg("success", "✓ ") : "  "}${theme.fg(selectedOther ? "accent" : "muted", OTHER_OPTION_LABEL)}${promptState?.customText.trim() ? theme.fg("text", `: ${promptState.customText.trim()}`) : ""}`,
+	);
+	if (isEditing === "other") {
+		add();
+		for (const line of editor.render(width - 2)) add(` ${line}`);
+	}
+	const selectedComment = state.focus === choices.length + 1;
+	add();
+	add(
+		`${selectedComment ? theme.fg("accent", "> ") : "  "}${theme.fg(selectedComment ? "accent" : "text", "Comment (optional)")}`,
+	);
+	if (promptState?.comment.trim()) {
+		addWrapped(
+			add,
+			theme.fg("muted", promptState.comment.trim()),
+			width,
+			"    ",
+		);
+	}
+	if (isEditing === "comment") {
+		add();
+		for (const line of editor.render(width - 2)) add(` ${line}`);
+	}
+	add();
+	if (isEditing) {
+		addWrapped(
+			add,
+			" " +
+				renderKeyHint(theme, keybindings, "tui.input.submit", "save") +
+				" • " +
+				renderKeyHint(theme, keybindings, "tui.input.tab", "next/default") +
+				" • " +
+				renderKeyHint(theme, keybindings, "tui.select.cancel", "cancel edit"),
+			width,
+		);
+		return;
+	}
+	addWrapped(
+		add,
+		" " +
+			renderKeyHint(theme, keybindings, "tui.select.up", "up") +
+			" • " +
+			renderKeyHint(theme, keybindings, "tui.select.down", "down") +
+			" • " +
+			renderKeyHint(theme, keybindings, "tui.select.confirm", "choose/type") +
+			" • " +
+			renderKeyHint(theme, keybindings, "tui.input.tab", "next/default") +
+			" • blank Other/rephrase = follow-up • " +
+			renderKeyHint(theme, keybindings, "tui.select.cancel", "close"),
+		width,
+	);
+}