pi-cc-extensions 0.8.7 → 0.8.9

package/extensions/ask-user-question/rpc-fallback.ts

@@ -0,0 +1,160 @@
+/**
+ * RPC / dialog-primitive fallback for `ask_user_question`.
+ *
+ * The canonical TUI path (`ctx.ui.custom()`) renders a tabbed temporary editor that
+ * needs a real terminal. RPC-mode hosts (the VSCode pendant, ACP clients such
+ * as Zed or Paseo) report `hasUI: true` because pi's dialog sub-protocol
+ * (`extension_ui_request`/`extension_ui_response`) works, but `ui.custom()`
+ * resolves `undefined` without rendering anything (issue #78). `ui.select()`
+ * and `ui.input()` ARE functional there — the host renders them natively — so
+ * this module walks the questions sequentially with those primitives and
+ * returns the same `QuestionnaireResult` shapes the TUI produces, feeding the
+ * shared `buildQuestionnaireResponse` envelope.
+ *
+ * Parity trade-offs vs the TUI, inherent to the select/input API surface: no
+ * side-by-side preview pane (previews are folded into the prompt title), no
+ * tabbed multi-question review (one dialog per question), and multi-select is
+ * a free-text numbers input instead of checkbox rows. The "Type something."
+ * escape is preserved on both variants — multi-select treats any non-index
+ * input as a typed custom answer — matching
+ * `ROW_INTENT_META.other.autoAppendOnMultiSelect`.
+ */
+
+import { ROW_INTENT_META } from "./state/row-intent.js";
+import type { QuestionAnswer, QuestionData, QuestionnaireResult, QuestionParams } from "./tool/types.js";
+
+const MULTI_SELECT_INSTRUCTIONS =
+	'Enter the numbers of all that apply, comma-separated (e.g. "1,3"), or type a custom answer as plain text.';
+const CUSTOM_ANSWER_TITLE = "Type your answer:";
+const MULTI_SELECT_PLACEHOLDER = "1,3";
+
+/** Longest preview slice folded into a select title before truncation. */
+const MAX_PREVIEW_CHARS = 600;
+
+/**
+ * The dialog-primitive slice of `ExtensionUIContext` this walker needs.
+ * Structural on purpose: the pinned pi 0.74 peer types predate `ctx.mode`,
+ * and jiti transpiles without type-checking — `hasDialogUI` is the runtime
+ * gate that makes the shape trustworthy.
+ */
+export type DialogUI = {
+	select: (title: string, options: string[]) => Promise<string | undefined>;
+	input: (title: string, placeholder?: string) => Promise<string | undefined>;
+};
+
+/** True when the host implements the select/input dialog primitives. */
+export function hasDialogUI(ui: unknown): ui is DialogUI {
+	const u = ui as Partial<Record<"select" | "input", unknown>> | null | undefined;
+	return typeof u?.select === "function" && typeof u?.input === "function";
+}
+
+type Option = QuestionData["options"][number];
+
+function formatOptionLine(option: Option, index: number): string {
+	return `${index + 1}. ${option.label} — ${option.description}`;
+}
+
+/**
+ * Parse a user-entered (or select-returned) "N…" token to a 0-based option
+ * index. `parseInt` reads the leading digits of "2. B — b" as 2; NaN and
+ * out-of-range fail the bounds check and return null.
+ */
+function parseIndex(token: string, count: number): number | null {
+	const i = Number.parseInt(token, 10) - 1;
+	return i >= 0 && i < count ? i : null;
+}
+
+/** Previews folded into the select title — RPC has no side-by-side pane. */
+function buildPreviewBlock(question: QuestionData): string {
+	const blocks = question.options.flatMap((o, i) =>
+		o.preview && o.preview.length > 0
+			? [`--- ${i + 1}. ${o.label} preview ---\n${o.preview.slice(0, MAX_PREVIEW_CHARS)}`]
+			: [],
+	);
+	return blocks.length > 0 ? `\n\n${blocks.join("\n\n")}` : "";
+}
+
+/**
+ * Walk the questionnaire one native dialog at a time. Dismissing any dialog
+ * (the primitive resolves `undefined`) cancels the whole questionnaire —
+ * mirroring Esc in the TUI — and the shared envelope emits DECLINE. A
+ * `QuestionAnswer` is produced per question otherwise, so the envelope is
+ * identical to the TUI path's.
+ */
+export async function runRpcQuestionnaire(ui: DialogUI, params: QuestionParams): Promise<QuestionnaireResult> {
+	const answers: QuestionAnswer[] = [];
+	for (let qi = 0; qi < params.questions.length; qi++) {
+		const q = params.questions[qi];
+		const header = q.header ? `[${q.header}] ` : "";
+		const answer = q.multiSelect ? await askMultiSelect(ui, q, qi, header) : await askSingleSelect(ui, q, qi, header);
+		if (answer === undefined) return { answers, cancelled: true };
+		answers.push(answer);
+	}
+	return { answers, cancelled: false };
+}
+
+/** `undefined` means the user dismissed the dialog (cancel the questionnaire). */
+async function askSingleSelect(
+	ui: DialogUI,
+	q: QuestionData,
+	questionIndex: number,
+	header: string,
+): Promise<QuestionAnswer | undefined> {
+	const options = q.options.map(formatOptionLine);
+	options.push(`${q.options.length + 1}. ${ROW_INTENT_META.other.label}`);
+	const chosen = await ui.select(`${header}${q.question}${buildPreviewBlock(q)}`, options);
+	if (chosen == null) return undefined;
+	const idx = parseIndex(chosen, options.length);
+	// A host returning something outside the offered list is indistinguishable
+	// from a dismissal — treat it as one rather than fabricate an answer.
+	if (idx == null) return undefined;
+	if (idx < q.options.length) {
+		const o = q.options[idx];
+		return {
+			questionIndex,
+			question: q.question,
+			kind: "option",
+			answer: o.label,
+			preview: o.preview && o.preview.length > 0 ? o.preview : undefined,
+		};
+	}
+	// "Type something." sentinel → free-text follow-up.
+	const typed = await ui.input(`${header}${q.question}\n\n${CUSTOM_ANSWER_TITLE}`, "");
+	if (typed == null) return undefined;
+	return { questionIndex, question: q.question, kind: "custom", answer: typed };
+}
+
+/** `undefined` means the user dismissed the dialog (cancel the questionnaire). */
+async function askMultiSelect(
+	ui: DialogUI,
+	q: QuestionData,
+	questionIndex: number,
+	header: string,
+): Promise<QuestionAnswer | undefined> {
+	const list = q.options.map(formatOptionLine).join("\n");
+	const value = await ui.input(
+		`${header}${q.question}\n\n${list}\n\n${MULTI_SELECT_INSTRUCTIONS}`,
+		MULTI_SELECT_PLACEHOLDER,
+	);
+	if (value == null) return undefined;
+	const trimmed = value.trim();
+	if (trimmed.length === 0) {
+		// Deliberate empty commit — same as pressing "Next" with nothing toggled.
+		return { questionIndex, question: q.question, kind: "multi", answer: null, selected: [] };
+	}
+	const tokens = trimmed.split(/[,\s]+/).filter((tok) => tok.length > 0);
+	const indices = tokens.map((tok) => (/^\d+\.?$/.test(tok) ? parseIndex(tok, q.options.length) : null));
+	if (indices.every((i): i is number => i != null)) {
+		const selected: string[] = [];
+		for (const i of indices) {
+			const label = q.options[i].label;
+			if (!selected.includes(label)) selected.push(label);
+		}
+		return { questionIndex, question: q.question, kind: "multi", answer: null, selected };
+	}
+	// Any non-index token (words, or an out-of-range number like "13" for three
+	// options) means the user typed an answer, not a selection. Preserve it
+	// verbatim as a custom answer instead of silently dropping their input —
+	// this is also the multi-select "Type something." escape.
+	return { questionIndex, question: q.question, kind: "custom", answer: trimmed };
+}

package/extensions/ask-user-question/state/build-questionnaire.ts

@@ -0,0 +1,291 @@
+import { getMarkdownTheme, type Theme } from "@earendil-works/pi-coding-agent";
+import { Input } from "@earendil-works/pi-tui";
+import type { QuestionData } from "../tool/types.js";
+import {
+	type BoundGlobalBinding,
+	type BoundPerTabBinding,
+	globalBinding,
+	perTabBinding,
+} from "../view/component-binding.js";
+import { MultiSelectView } from "../view/components/multi-select-view.js";
+import { OptionListView } from "../view/components/option-list-view.js";
+import { PreviewBlockRenderer } from "../view/components/preview/preview-block-renderer.js";
+import { crossTabLeftWidthWithDonation } from "../view/components/preview/preview-layout-decider.js";
+import type { PreviewPaneProps } from "../view/components/preview/preview-pane.js";
+import { PreviewPane } from "../view/components/preview/preview-pane.js";
+import { SubmitPicker } from "../view/components/submit-picker.js";
+import { TabBar } from "../view/components/tab-bar.js";
+import type { WrappingSelectItem, WrappingSelectTheme } from "../view/components/wrapping-select.js";
+import { DialogView } from "../view/dialog-builder.js";
+import { QuestionnairePropsAdapter } from "../view/props-adapter.js";
+import type { StatefulView } from "../view/stateful-view.js";
+import type { TabBodyHeights, TabComponents } from "../view/tab-components.js";
+import type { PerTabSelector } from "./selectors/contract.js";
+import { selectActivePreviewPaneIndex } from "./selectors/derivations.js";
+import {
+	selectDialogProps,
+	selectMultiSelectProps,
+	selectOptionListProps,
+	selectPreviewPaneProps,
+	selectSubmitPickerProps,
+	selectTabBarProps,
+} from "./selectors/projections.js";
+import type { QuestionnaireState } from "./state.js";
+import { getDialogMaxRows } from "./dialog-height.js";
+
+export interface QuestionnaireBuildConfig {
+	tui: { terminal: { columns: number; rows: number }; requestRender(): void };
+	theme: Theme;
+	questions: readonly QuestionData[];
+	itemsByTab: ReadonlyArray<readonly WrappingSelectItem[]>;
+	isMulti: boolean;
+	initialState: QuestionnaireState;
+	getCurrentTab: () => number;
+}
+
+export interface QuestionnaireBuilt {
+	adapter: QuestionnairePropsAdapter;
+	notesInput: Input;
+	inlineInput: Input;
+	render: (width: number) => string[];
+	invalidate: () => void;
+}
+
+interface HeightComputers {
+	current: (width: number) => number;
+}
+
+function previewBodyHeights(pane: PreviewPane): (width: number) => TabBodyHeights {
+	return (width) => ({
+		current: pane.naturalHeight(width),
+		max: pane.maxNaturalHeight(width),
+	});
+}
+
+function multiSelectBodyHeights(view: MultiSelectView): (width: number) => TabBodyHeights {
+	return (width) => {
+		const h = view.naturalHeight(width);
+		return { current: h, max: h };
+	};
+}
+
+const isActiveTab: PerTabSelector<boolean> = (s, ctx) =>
+	ctx.i === selectActivePreviewPaneIndex(s.currentTab, ctx.totalQuestions);
+
+/**
+ * Pure factory: assembles every TUI component, the props adapter, and a
+ * lifecycle handle. Session-state dependencies arrive via `getCurrentTab` and
+ * the `inputBuffer` cell. Initial paint is delegated to
+ * `adapter.apply(initialState)` (called by the session at construction-end);
+ * no selector is invoked here.
+ */
+export function buildQuestionnaire(config: QuestionnaireBuildConfig): QuestionnaireBuilt {
+	return new QuestionnaireBuilder(config).build();
+}
+
+/**
+ * Programming-by-intention assembly: each private method names one
+ * construction step from `build()`. Read top-down; the class is build-only and
+ * discarded once the handle is returned.
+ */
+class QuestionnaireBuilder {
+	private readonly tui: QuestionnaireBuildConfig["tui"];
+	private readonly theme: Theme;
+	private readonly questions: readonly QuestionData[];
+	private readonly itemsByTab: ReadonlyArray<readonly WrappingSelectItem[]>;
+	private readonly isMulti: boolean;
+	private readonly initialState: QuestionnaireState;
+	private readonly getCurrentTab: () => number;
+
+	private readonly selectTheme: WrappingSelectTheme;
+	private readonly markdownTheme = getMarkdownTheme();
+	private readonly notesInput = new Input();
+	private readonly inlineInput = new Input();
+	private readonly getTerminalWidth = () => this.tui.terminal.columns;
+	private readonly getTerminalRows = () => getDialogMaxRows(this.tui.terminal.rows);
+
+	constructor(config: QuestionnaireBuildConfig) {
+		this.tui = config.tui;
+		this.theme = config.theme;
+		this.questions = config.questions;
+		this.itemsByTab = config.itemsByTab;
+		this.isMulti = config.isMulti;
+		this.initialState = config.initialState;
+		this.getCurrentTab = config.getCurrentTab;
+
+		this.selectTheme = this.makeSelectTheme();
+	}
+
+	build(): QuestionnaireBuilt {
+		const tabs = this.buildTabComponents();
+		this.injectGlobalLeftWidth(tabs);
+		const submitPicker = this.buildSubmitPicker();
+		const tabBar = this.buildTabBar();
+		const heights = this.buildHeightComputers(tabs);
+		const dialog = this.buildDialog(tabs, submitPicker, tabBar, heights);
+		const globalBindings = this.buildGlobalBindings(dialog, submitPicker, tabBar);
+		const perTabBindings = this.buildPerTabBindings();
+		const adapter = this.buildAdapter(tabs, globalBindings, perTabBindings);
+		return this.handle(adapter, dialog);
+	}
+
+	private makeSelectTheme(): WrappingSelectTheme {
+		const t = this.theme;
+		return {
+			selectedText: (s) => t.fg("accent", t.bold(s)),
+			description: (s) => t.fg("muted", s),
+			scrollInfo: (s) => t.fg("dim", s),
+		};
+	}
+
+	private buildTabComponents(): ReadonlyArray<TabComponents> {
+		return this.questions.map((q, i) => this.buildTabFor(q, i));
+	}
+
+	private buildTabFor(question: QuestionData, index: number): TabComponents {
+		const optionList = new OptionListView({
+			items: this.itemsByTab[index] ?? [],
+			theme: this.selectTheme,
+		});
+		const previewBlock = new PreviewBlockRenderer({
+			question,
+			theme: this.theme,
+			markdownTheme: this.markdownTheme,
+		});
+		const preview = new PreviewPane({
+			question,
+			getTerminalWidth: this.getTerminalWidth,
+			optionListView: optionList,
+			previewBlock,
+		});
+		const multiSelect = question.multiSelect ? new MultiSelectView(this.theme, question) : undefined;
+		const bodyHeights = this.buildBodyHeights(question, preview, multiSelect);
+		return { optionList, preview, multiSelect, bodyHeights };
+	}
+
+	private buildBodyHeights(
+		question: QuestionData,
+		preview: PreviewPane,
+		multiSelect: MultiSelectView | undefined,
+	): (width: number) => TabBodyHeights {
+		return question.multiSelect ? multiSelectBodyHeights(multiSelect!) : previewBodyHeights(preview);
+	}
+
+	/**
+	 * Compute cross-tab max adaptive left width and inject into each PreviewPane.
+	 * Iterates all tabs and takes the maximum adaptive width.
+	 * Called after buildTabComponents, before buildDialog (so setGlobalLeftWidth
+	 * is set before any rendering occurs).
+	 */
+	private injectGlobalLeftWidth(tabs: ReadonlyArray<TabComponents>): void {
+		const questions = this.questions;
+		const itemsByTab = this.itemsByTab;
+		const tabsDescriptor = questions.map((q) => ({ multiSelect: q.multiSelect }));
+		const globalLeftWidth = (paneWidth: number): number =>
+			crossTabLeftWidthWithDonation(tabsDescriptor, itemsByTab, questions, paneWidth);
+		for (const tab of tabs) {
+			tab.preview.setGlobalLeftWidth(globalLeftWidth);
+		}
+	}
+
+	private buildSubmitPicker(): SubmitPicker | undefined {
+		return this.isMulti ? new SubmitPicker(this.theme) : undefined;
+	}
+
+	private buildTabBar(): TabBar | undefined {
+		return this.isMulti ? new TabBar(this.theme) : undefined;
+	}
+
+	private buildHeightComputers(tabs: ReadonlyArray<TabComponents>): HeightComputers {
+		const current = (width: number): number => {
+			const idx = Math.min(this.getCurrentTab(), tabs.length - 1);
+			return Math.max(0, tabs[idx]?.bodyHeights(width).current ?? 0);
+		};
+		return { current };
+	}
+
+	private pickInitialActivePreview(tabs: ReadonlyArray<TabComponents>): StatefulView<PreviewPaneProps> {
+		const idx = selectActivePreviewPaneIndex(this.initialState.currentTab, this.questions.length);
+		return tabs[idx]?.preview ?? tabs[0]!.preview;
+	}
+
+	private buildDialog(
+		tabs: ReadonlyArray<TabComponents>,
+		submitPicker: SubmitPicker | undefined,
+		tabBar: TabBar | undefined,
+		heights: HeightComputers,
+	): DialogView {
+		return new DialogView(
+			{
+				theme: this.theme,
+				questions: this.questions,
+				tabBar,
+				notesInput: this.notesInput,
+				isMulti: this.isMulti,
+				tabsByIndex: tabs,
+				submitPicker,
+				getCurrentBodyHeight: heights.current,
+				getTerminalRows: this.getTerminalRows,
+			},
+			{ state: this.initialState, activePreviewPane: this.pickInitialActivePreview(tabs) },
+		);
+	}
+
+	private buildGlobalBindings(
+		dialog: DialogView,
+		submitPicker: SubmitPicker | undefined,
+		tabBar: TabBar | undefined,
+	): ReadonlyArray<BoundGlobalBinding> {
+		return [
+			globalBinding({ component: dialog, select: selectDialogProps }),
+			...(submitPicker ? [globalBinding({ component: submitPicker, select: selectSubmitPickerProps })] : []),
+			...(tabBar ? [globalBinding({ component: tabBar, select: selectTabBarProps })] : []),
+		];
+	}
+
+	private buildPerTabBindings(): ReadonlyArray<BoundPerTabBinding> {
+		return [
+			perTabBinding({
+				resolve: (tab) => tab.optionList,
+				predicate: isActiveTab,
+				select: selectOptionListProps,
+			}),
+			perTabBinding({
+				resolve: (tab) => tab.preview,
+				predicate: isActiveTab,
+				select: selectPreviewPaneProps,
+			}),
+			perTabBinding({
+				resolve: (tab) => tab.multiSelect,
+				select: selectMultiSelectProps,
+			}),
+		];
+	}
+
+	private buildAdapter(
+		tabs: ReadonlyArray<TabComponents>,
+		globalBindings: ReadonlyArray<BoundGlobalBinding>,
+		perTabBindings: ReadonlyArray<BoundPerTabBinding>,
+	): QuestionnairePropsAdapter {
+		return new QuestionnairePropsAdapter({
+			tui: this.tui,
+			questions: this.questions,
+			itemsByTab: this.itemsByTab,
+			tabsByIndex: tabs,
+			inlineInput: this.inlineInput,
+			globalBindings,
+			perTabBindings,
+			extraInvalidatables: [this.notesInput],
+		});
+	}
+
+	private handle(adapter: QuestionnairePropsAdapter, dialog: DialogView): QuestionnaireBuilt {
+		return {
+			adapter,
+			notesInput: this.notesInput,
+			inlineInput: this.inlineInput,
+			render: (w) => dialog.render(w),
+			invalidate: () => adapter.invalidate(),
+		};
+	}
+}

package/extensions/ask-user-question/state/dialog-height.ts

@@ -0,0 +1,16 @@
+const FULL_HEIGHT_BREAKPOINT = 16;
+const MIN_DIALOG_ROWS = 10;
+const MIN_HISTORY_ROWS = 6;
+const HISTORY_RATIO = 0.3;
+
+/**
+ * Keep recent transcript rows visible above the temporary questionnaire editor.
+ * Very small terminals fall back to full height so the dialog remains usable.
+ */
+export function getDialogMaxRows(terminalRows: number): number {
+	const rows = Math.max(1, Math.floor(terminalRows));
+	if (rows < FULL_HEIGHT_BREAKPOINT) return rows;
+
+	const historyRows = Math.max(MIN_HISTORY_ROWS, Math.floor(rows * HISTORY_RATIO));
+	return Math.min(rows, Math.max(MIN_DIALOG_ROWS, rows - historyRows));
+}