@mariozechner/pi-coding-agent 0.45.3 → 0.45.4

package/examples/extensions/question.ts

@@ -1,23 +1,50 @@
 /**
- * Question Tool - Let the LLM ask the user a question with options
+ * Question Tool - Single question with options
+ * Full custom UI: options list + inline editor for "Type something..."
+ * Escape in editor returns to options, Escape in options cancels
  */
 
 import type { ExtensionAPI } from "@mariozechner/pi-coding-agent";
-import { Text } from "@mariozechner/pi-tui";
+import { Editor, type EditorTheme, Key, matchesKey, Text, truncateToWidth } from "@mariozechner/pi-tui";
 import { Type } from "@sinclair/typebox";
 
+interface OptionWithDesc {
+	label: string;
+	description?: string;
+}
+
+type DisplayOption = OptionWithDesc & { isOther?: boolean };
+
 interface QuestionDetails {
 	question: string;
 	options: string[];
 	answer: string | null;
+	wasCustom?: boolean;
 }
 
+// Support both simple strings and objects with descriptions
+const OptionSchema = Type.Union([
+	Type.String(),
+	Type.Object({
+		label: Type.String({ description: "Display label for the option" }),
+		description: Type.Optional(Type.String({ description: "Optional description shown below label" })),
+	}),
+]);
+
 const QuestionParams = Type.Object({
 	question: Type.String({ description: "The question to ask the user" }),
-	options: Type.Array(Type.String(), { description: "Options for the user to choose from" }),
+	options: Type.Array(OptionSchema, { description: "Options for the user to choose from" }),
 });
 
-export default function (pi: ExtensionAPI) {
+// Normalize option to { label, description? }
+function normalizeOption(opt: string | { label: string; description?: string }): OptionWithDesc {
+	if (typeof opt === "string") {
+		return { label: opt };
+	}
+	return opt;
+}
+
+export default function question(pi: ExtensionAPI) {
 	pi.registerTool({
 		name: "question",
 		label: "Question",
@@ -28,7 +55,11 @@ export default function (pi: ExtensionAPI) {
 			if (!ctx.hasUI) {
 				return {
 					content: [{ type: "text", text: "Error: UI not available (running in non-interactive mode)" }],
-					details: { question: params.question, options: params.options, answer: null } as QuestionDetails,
+					details: {
+						question: params.question,
+						options: params.options.map((o) => (typeof o === "string" ? o : o.label)),
+						answer: null,
+					} as QuestionDetails,
 				};
 			}
 
@@ -39,25 +70,183 @@ export default function (pi: ExtensionAPI) {
 				};
 			}
 
-			const answer = await ctx.ui.select(params.question, params.options);
+			// Normalize options
+			const normalizedOptions = params.options.map(normalizeOption);
+			const allOptions: DisplayOption[] = [...normalizedOptions, { label: "Type something.", isOther: true }];
+
+			const result = await ctx.ui.custom<{ answer: string; wasCustom: boolean; index?: number } | null>(
+				(tui, theme, _kb, done) => {
+					let optionIndex = 0;
+					let editMode = false;
+					let cachedLines: string[] | undefined;
+
+					const editorTheme: EditorTheme = {
+						borderColor: (s) => theme.fg("accent", s),
+						selectList: {
+							selectedPrefix: (t) => theme.fg("accent", t),
+							selectedText: (t) => theme.fg("accent", t),
+							description: (t) => theme.fg("muted", t),
+							scrollInfo: (t) => theme.fg("dim", t),
+							noMatch: (t) => theme.fg("warning", t),
+						},
+					};
+					const editor = new Editor(editorTheme);
+
+					editor.onSubmit = (value) => {
+						const trimmed = value.trim();
+						if (trimmed) {
+							done({ answer: trimmed, wasCustom: true });
+						} else {
+							editMode = false;
+							editor.setText("");
+							refresh();
+						}
+					};
+
+					function refresh() {
+						cachedLines = undefined;
+						tui.requestRender();
+					}
+
+					function handleInput(data: string) {
+						if (editMode) {
+							if (matchesKey(data, Key.escape)) {
+								editMode = false;
+								editor.setText("");
+								refresh();
+								return;
+							}
+							editor.handleInput(data);
+							refresh();
+							return;
+						}
+
+						if (matchesKey(data, Key.up)) {
+							optionIndex = Math.max(0, optionIndex - 1);
+							refresh();
+							return;
+						}
+						if (matchesKey(data, Key.down)) {
+							optionIndex = Math.min(allOptions.length - 1, optionIndex + 1);
+							refresh();
+							return;
+						}
+
+						if (matchesKey(data, Key.enter)) {
+							const selected = allOptions[optionIndex];
+							if (selected.isOther) {
+								editMode = true;
+								refresh();
+							} else {
+								done({ answer: selected.label, wasCustom: false, index: optionIndex + 1 });
+							}
+							return;
+						}
+
+						if (matchesKey(data, Key.escape)) {
+							done(null);
+						}
+					}
+
+					function render(width: number): string[] {
+						if (cachedLines) return cachedLines;
 
-			if (answer === undefined) {
+						const lines: string[] = [];
+						const add = (s: string) => lines.push(truncateToWidth(s, width));
+
+						add(theme.fg("accent", "─".repeat(width)));
+						add(theme.fg("text", ` ${params.question}`));
+						lines.push("");
+
+						for (let i = 0; i < allOptions.length; i++) {
+							const opt = allOptions[i];
+							const selected = i === optionIndex;
+							const isOther = opt.isOther === true;
+							const prefix = selected ? theme.fg("accent", "> ") : "  ";
+
+							if (isOther && editMode) {
+								add(prefix + theme.fg("accent", `${i + 1}. ${opt.label} ✎`));
+							} else if (selected) {
+								add(prefix + theme.fg("accent", `${i + 1}. ${opt.label}`));
+							} else {
+								add(`  ${theme.fg("text", `${i + 1}. ${opt.label}`)}`);
+							}
+
+							// Show description if present
+							if (opt.description) {
+								add(`     ${theme.fg("muted", opt.description)}`);
+							}
+						}
+
+						if (editMode) {
+							lines.push("");
+							add(theme.fg("muted", " Your answer:"));
+							for (const line of editor.render(width - 2)) {
+								add(` ${line}`);
+							}
+						}
+
+						lines.push("");
+						if (editMode) {
+							add(theme.fg("dim", " Enter to submit • Esc to go back"));
+						} else {
+							add(theme.fg("dim", " ↑↓ navigate • Enter to select • Esc to cancel"));
+						}
+						add(theme.fg("accent", "─".repeat(width)));
+
+						cachedLines = lines;
+						return lines;
+					}
+
+					return {
+						render,
+						invalidate: () => {
+							cachedLines = undefined;
+						},
+						handleInput,
+					};
+				},
+			);
+
+			// Build simple options list for details
+			const simpleOptions = normalizedOptions.map((o) => o.label);
+
+			if (!result) {
 				return {
 					content: [{ type: "text", text: "User cancelled the selection" }],
-					details: { question: params.question, options: params.options, answer: null } as QuestionDetails,
+					details: { question: params.question, options: simpleOptions, answer: null } as QuestionDetails,
 				};
 			}
 
+			if (result.wasCustom) {
+				return {
+					content: [{ type: "text", text: `User wrote: ${result.answer}` }],
+					details: {
+						question: params.question,
+						options: simpleOptions,
+						answer: result.answer,
+						wasCustom: true,
+					} as QuestionDetails,
+				};
+			}
 			return {
-				content: [{ type: "text", text: `User selected: ${answer}` }],
-				details: { question: params.question, options: params.options, answer } as QuestionDetails,
+				content: [{ type: "text", text: `User selected: ${result.index}. ${result.answer}` }],
+				details: {
+					question: params.question,
+					options: simpleOptions,
+					answer: result.answer,
+					wasCustom: false,
+				} as QuestionDetails,
 			};
 		},
 
 		renderCall(args, theme) {
 			let text = theme.fg("toolTitle", theme.bold("question ")) + theme.fg("muted", args.question);
-			if (args.options?.length) {
-				text += `\n${theme.fg("dim", `  Options: ${args.options.join(", ")}`)}`;
+			const opts = Array.isArray(args.options) ? args.options : [];
+			if (opts.length) {
+				const labels = opts.map((o: string | { label: string }) => (typeof o === "string" ? o : o.label));
+				const numbered = [...labels, "Type something."].map((o, i) => `${i + 1}. ${o}`);
+				text += `\n${theme.fg("dim", `  Options: ${numbered.join(", ")}`)}`;
 			}
 			return new Text(text, 0, 0);
 		},
@@ -73,7 +262,16 @@ export default function (pi: ExtensionAPI) {
 				return new Text(theme.fg("warning", "Cancelled"), 0, 0);
 			}
 
-			return new Text(theme.fg("success", "✓ ") + theme.fg("accent", details.answer), 0, 0);
+			if (details.wasCustom) {
+				return new Text(
+					theme.fg("success", "✓ ") + theme.fg("muted", "(wrote) ") + theme.fg("accent", details.answer),
+					0,
+					0,
+				);
+			}
+			const idx = details.options.indexOf(details.answer) + 1;
+			const display = idx > 0 ? `${idx}. ${details.answer}` : details.answer;
+			return new Text(theme.fg("success", "✓ ") + theme.fg("accent", display), 0, 0);
 		},
 	});
 }

package/examples/extensions/questionnaire.ts

@@ -0,0 +1,427 @@
+/**
+ * Questionnaire Tool - Unified tool for asking single or multiple questions
+ *
+ * Single question: simple options list
+ * Multiple questions: tab bar navigation between questions
+ */
+
+import type { ExtensionAPI } from "@mariozechner/pi-coding-agent";
+import { Editor, type EditorTheme, Key, matchesKey, Text, truncateToWidth } from "@mariozechner/pi-tui";
+import { Type } from "@sinclair/typebox";
+
+// Types
+interface QuestionOption {
+	value: string;
+	label: string;
+	description?: string;
+}
+
+type RenderOption = QuestionOption & { isOther?: boolean };
+
+interface Question {
+	id: string;
+	label: string;
+	prompt: string;
+	options: QuestionOption[];
+	allowOther: boolean;
+}
+
+interface Answer {
+	id: string;
+	value: string;
+	label: string;
+	wasCustom: boolean;
+	index?: number;
+}
+
+interface QuestionnaireResult {
+	questions: Question[];
+	answers: Answer[];
+	cancelled: boolean;
+}
+
+// Schema
+const QuestionOptionSchema = Type.Object({
+	value: Type.String({ description: "The value returned when selected" }),
+	label: Type.String({ description: "Display label for the option" }),
+	description: Type.Optional(Type.String({ description: "Optional description shown below label" })),
+});
+
+const QuestionSchema = Type.Object({
+	id: Type.String({ description: "Unique identifier for this question" }),
+	label: Type.Optional(
+		Type.String({
+			description: "Short contextual label for tab bar, e.g. 'Scope', 'Priority' (defaults to Q1, Q2)",
+		}),
+	),
+	prompt: Type.String({ description: "The full question text to display" }),
+	options: Type.Array(QuestionOptionSchema, { description: "Available options to choose from" }),
+	allowOther: Type.Optional(Type.Boolean({ description: "Allow 'Type something' option (default: true)" })),
+});
+
+const QuestionnaireParams = Type.Object({
+	questions: Type.Array(QuestionSchema, { description: "Questions to ask the user" }),
+});
+
+function errorResult(
+	message: string,
+	questions: Question[] = [],
+): { content: { type: "text"; text: string }[]; details: QuestionnaireResult } {
+	return {
+		content: [{ type: "text", text: message }],
+		details: { questions, answers: [], cancelled: true },
+	};
+}
+
+export default function questionnaire(pi: ExtensionAPI) {
+	pi.registerTool({
+		name: "questionnaire",
+		label: "Questionnaire",
+		description:
+			"Ask the user one or more questions. Use for clarifying requirements, getting preferences, or confirming decisions. For single questions, shows a simple option list. For multiple questions, shows a tab-based interface.",
+		parameters: QuestionnaireParams,
+
+		async execute(_toolCallId, params, _onUpdate, ctx, _signal) {
+			if (!ctx.hasUI) {
+				return errorResult("Error: UI not available (running in non-interactive mode)");
+			}
+			if (params.questions.length === 0) {
+				return errorResult("Error: No questions provided");
+			}
+
+			// Normalize questions with defaults
+			const questions: Question[] = params.questions.map((q, i) => ({
+				...q,
+				label: q.label || `Q${i + 1}`,
+				allowOther: q.allowOther !== false,
+			}));
+
+			const isMulti = questions.length > 1;
+			const totalTabs = questions.length + 1; // questions + Submit
+
+			const result = await ctx.ui.custom<QuestionnaireResult>((tui, theme, _kb, done) => {
+				// State
+				let currentTab = 0;
+				let optionIndex = 0;
+				let inputMode = false;
+				let inputQuestionId: string | null = null;
+				let cachedLines: string[] | undefined;
+				const answers = new Map<string, Answer>();
+
+				// Editor for "Type something" option
+				const editorTheme: EditorTheme = {
+					borderColor: (s) => theme.fg("accent", s),
+					selectList: {
+						selectedPrefix: (t) => theme.fg("accent", t),
+						selectedText: (t) => theme.fg("accent", t),
+						description: (t) => theme.fg("muted", t),
+						scrollInfo: (t) => theme.fg("dim", t),
+						noMatch: (t) => theme.fg("warning", t),
+					},
+				};
+				const editor = new Editor(editorTheme);
+
+				// Helpers
+				function refresh() {
+					cachedLines = undefined;
+					tui.requestRender();
+				}
+
+				function submit(cancelled: boolean) {
+					done({ questions, answers: Array.from(answers.values()), cancelled });
+				}
+
+				function currentQuestion(): Question | undefined {
+					return questions[currentTab];
+				}
+
+				function currentOptions(): RenderOption[] {
+					const q = currentQuestion();
+					if (!q) return [];
+					const opts: RenderOption[] = [...q.options];
+					if (q.allowOther) {
+						opts.push({ value: "__other__", label: "Type something.", isOther: true });
+					}
+					return opts;
+				}
+
+				function allAnswered(): boolean {
+					return questions.every((q) => answers.has(q.id));
+				}
+
+				function advanceAfterAnswer() {
+					if (!isMulti) {
+						submit(false);
+						return;
+					}
+					if (currentTab < questions.length - 1) {
+						currentTab++;
+					} else {
+						currentTab = questions.length; // Submit tab
+					}
+					optionIndex = 0;
+					refresh();
+				}
+
+				function saveAnswer(questionId: string, value: string, label: string, wasCustom: boolean, index?: number) {
+					answers.set(questionId, { id: questionId, value, label, wasCustom, index });
+				}
+
+				// Editor submit callback
+				editor.onSubmit = (value) => {
+					if (!inputQuestionId) return;
+					const trimmed = value.trim() || "(no response)";
+					saveAnswer(inputQuestionId, trimmed, trimmed, true);
+					inputMode = false;
+					inputQuestionId = null;
+					editor.setText("");
+					advanceAfterAnswer();
+				};
+
+				function handleInput(data: string) {
+					// Input mode: route to editor
+					if (inputMode) {
+						if (matchesKey(data, Key.escape)) {
+							inputMode = false;
+							inputQuestionId = null;
+							editor.setText("");
+							refresh();
+							return;
+						}
+						editor.handleInput(data);
+						refresh();
+						return;
+					}
+
+					const q = currentQuestion();
+					const opts = currentOptions();
+
+					// Tab navigation (multi-question only)
+					if (isMulti) {
+						if (matchesKey(data, Key.tab) || matchesKey(data, Key.right)) {
+							currentTab = (currentTab + 1) % totalTabs;
+							optionIndex = 0;
+							refresh();
+							return;
+						}
+						if (matchesKey(data, Key.shift("tab")) || matchesKey(data, Key.left)) {
+							currentTab = (currentTab - 1 + totalTabs) % totalTabs;
+							optionIndex = 0;
+							refresh();
+							return;
+						}
+					}
+
+					// Submit tab
+					if (currentTab === questions.length) {
+						if (matchesKey(data, Key.enter) && allAnswered()) {
+							submit(false);
+						} else if (matchesKey(data, Key.escape)) {
+							submit(true);
+						}
+						return;
+					}
+
+					// Option navigation
+					if (matchesKey(data, Key.up)) {
+						optionIndex = Math.max(0, optionIndex - 1);
+						refresh();
+						return;
+					}
+					if (matchesKey(data, Key.down)) {
+						optionIndex = Math.min(opts.length - 1, optionIndex + 1);
+						refresh();
+						return;
+					}
+
+					// Select option
+					if (matchesKey(data, Key.enter) && q) {
+						const opt = opts[optionIndex];
+						if (opt.isOther) {
+							inputMode = true;
+							inputQuestionId = q.id;
+							editor.setText("");
+							refresh();
+							return;
+						}
+						saveAnswer(q.id, opt.value, opt.label, false, optionIndex + 1);
+						advanceAfterAnswer();
+						return;
+					}
+
+					// Cancel
+					if (matchesKey(data, Key.escape)) {
+						submit(true);
+					}
+				}
+
+				function render(width: number): string[] {
+					if (cachedLines) return cachedLines;
+
+					const lines: string[] = [];
+					const q = currentQuestion();
+					const opts = currentOptions();
+
+					// Helper to add truncated line
+					const add = (s: string) => lines.push(truncateToWidth(s, width));
+
+					add(theme.fg("accent", "─".repeat(width)));
+
+					// Tab bar (multi-question only)
+					if (isMulti) {
+						const tabs: string[] = ["← "];
+						for (let i = 0; i < questions.length; i++) {
+							const isActive = i === currentTab;
+							const isAnswered = answers.has(questions[i].id);
+							const lbl = questions[i].label;
+							const box = isAnswered ? "■" : "□";
+							const color = isAnswered ? "success" : "muted";
+							const text = ` ${box} ${lbl} `;
+							const styled = isActive ? theme.bg("selectedBg", theme.fg("text", text)) : theme.fg(color, text);
+							tabs.push(`${styled} `);
+						}
+						const canSubmit = allAnswered();
+						const isSubmitTab = currentTab === questions.length;
+						const submitText = " ✓ Submit ";
+						const submitStyled = isSubmitTab
+							? theme.bg("selectedBg", theme.fg("text", submitText))
+							: theme.fg(canSubmit ? "success" : "dim", submitText);
+						tabs.push(`${submitStyled} →`);
+						add(` ${tabs.join("")}`);
+						lines.push("");
+					}
+
+					// Helper to render options list
+					function renderOptions() {
+						for (let i = 0; i < opts.length; i++) {
+							const opt = opts[i];
+							const selected = i === optionIndex;
+							const isOther = opt.isOther === true;
+							const prefix = selected ? theme.fg("accent", "> ") : "  ";
+							const color = selected ? "accent" : "text";
+							// Mark "Type something" differently when in input mode
+							if (isOther && inputMode) {
+								add(prefix + theme.fg("accent", `${i + 1}. ${opt.label} ✎`));
+							} else {
+								add(prefix + theme.fg(color, `${i + 1}. ${opt.label}`));
+							}
+							if (opt.description) {
+								add(`     ${theme.fg("muted", opt.description)}`);
+							}
+						}
+					}
+
+					// Content
+					if (inputMode && q) {
+						add(theme.fg("text", ` ${q.prompt}`));
+						lines.push("");
+						// Show options for reference
+						renderOptions();
+						lines.push("");
+						add(theme.fg("muted", " Your answer:"));
+						for (const line of editor.render(width - 2)) {
+							add(` ${line}`);
+						}
+						lines.push("");
+						add(theme.fg("dim", " Enter to submit • Esc to cancel"));
+					} else if (currentTab === questions.length) {
+						add(theme.fg("accent", theme.bold(" Ready to submit")));
+						lines.push("");
+						for (const question of questions) {
+							const answer = answers.get(question.id);
+							if (answer) {
+								const prefix = answer.wasCustom ? "(wrote) " : "";
+								add(`${theme.fg("muted", ` ${question.label}: `)}${theme.fg("text", prefix + answer.label)}`);
+							}
+						}
+						lines.push("");
+						if (allAnswered()) {
+							add(theme.fg("success", " Press Enter to submit"));
+						} else {
+							const missing = questions
+								.filter((q) => !answers.has(q.id))
+								.map((q) => q.label)
+								.join(", ");
+							add(theme.fg("warning", ` Unanswered: ${missing}`));
+						}
+					} else if (q) {
+						add(theme.fg("text", ` ${q.prompt}`));
+						lines.push("");
+						renderOptions();
+					}
+
+					lines.push("");
+					if (!inputMode) {
+						const help = isMulti
+							? " Tab/←→ navigate • ↑↓ select • Enter confirm • Esc cancel"
+							: " ↑↓ navigate • Enter select • Esc cancel";
+						add(theme.fg("dim", help));
+					}
+					add(theme.fg("accent", "─".repeat(width)));
+
+					cachedLines = lines;
+					return lines;
+				}
+
+				return {
+					render,
+					invalidate: () => {
+						cachedLines = undefined;
+					},
+					handleInput,
+				};
+			});
+
+			if (result.cancelled) {
+				return {
+					content: [{ type: "text", text: "User cancelled the questionnaire" }],
+					details: result,
+				};
+			}
+
+			const answerLines = result.answers.map((a) => {
+				const qLabel = questions.find((q) => q.id === a.id)?.label || a.id;
+				if (a.wasCustom) {
+					return `${qLabel}: user wrote: ${a.label}`;
+				}
+				return `${qLabel}: user selected: ${a.index}. ${a.label}`;
+			});
+
+			return {
+				content: [{ type: "text", text: answerLines.join("\n") }],
+				details: result,
+			};
+		},
+
+		renderCall(args, theme) {
+			const qs = (args.questions as Question[]) || [];
+			const count = qs.length;
+			const labels = qs.map((q) => q.label || q.id).join(", ");
+			let text = theme.fg("toolTitle", theme.bold("questionnaire "));
+			text += theme.fg("muted", `${count} question${count !== 1 ? "s" : ""}`);
+			if (labels) {
+				text += theme.fg("dim", ` (${truncateToWidth(labels, 40)})`);
+			}
+			return new Text(text, 0, 0);
+		},
+
+		renderResult(result, _options, theme) {
+			const details = result.details as QuestionnaireResult | undefined;
+			if (!details) {
+				const text = result.content[0];
+				return new Text(text?.type === "text" ? text.text : "", 0, 0);
+			}
+			if (details.cancelled) {
+				return new Text(theme.fg("warning", "Cancelled"), 0, 0);
+			}
+			const lines = details.answers.map((a) => {
+				if (a.wasCustom) {
+					return `${theme.fg("success", "✓ ")}${theme.fg("accent", a.id)}: ${theme.fg("muted", "(wrote) ")}${a.label}`;
+				}
+				const display = a.index ? `${a.index}. ${a.label}` : a.label;
+				return `${theme.fg("success", "✓ ")}${theme.fg("accent", a.id)}: ${display}`;
+			});
+			return new Text(lines.join("\n"), 0, 0);
+		},
+	});
+}