@ryan_nookpi/pi-extension-ask-user-question 0.1.1 → 0.2.0

package/view.test.ts

@@ -0,0 +1,337 @@
+import { describe, expect, it } from "vitest";
+
+import { createAnswerState, normalizeQuestions } from "./state.ts";
+import type { RenderFormInput, RenderTheme } from "./types.ts";
+import { renderFooter, renderForm, renderQuestion, renderSubmitTab, renderTabBar } from "./view.ts";
+
+const theme: RenderTheme = {
+	fg: (_color, text) => text,
+	bg: (_color, text) => `[${text}]`,
+	bold: (text) => `**${text}**`,
+};
+
+function createInput(overrides: Partial<RenderFormInput> = {}): RenderFormInput {
+	const questions =
+		overrides.questions ??
+		normalizeQuestions([
+			{
+				id: "radio",
+				type: "radio",
+				prompt: "Pick one",
+				options: [
+					{ value: "a", label: "Alpha", description: "first" },
+					{ value: "b", label: "Beta" },
+				],
+			},
+			{
+				id: "text",
+				type: "text",
+				prompt: "Explain",
+				placeholder: "Type here",
+			},
+		]);
+	const answerState = overrides.answerState ?? createAnswerState(questions);
+	return {
+		title: "Title",
+		description: "Description",
+		questions,
+		answerState,
+		currentTab: 0,
+		cursorIdx: 0,
+		otherMode: false,
+		width: 80,
+		theme,
+		editorLines: ["editor line"],
+		editorText: "",
+		...overrides,
+	};
+}
+
+describe("ask-user-question/view", () => {
+	it("renders the review tab with missing required answers", () => {
+		const input = createInput({ currentTab: 2 });
+		const output = renderForm(input).join("\n");
+
+		expect(output).toContain("Review & Submit");
+		expect(output).toContain("Q1:");
+		expect(output).toContain("Required: Q1, Q2");
+		expect(output).toContain("Tab/←→ navigate questions • Enter submit • Esc cancel");
+	});
+
+	it("renders radio questions including descriptions and other-mode editor", () => {
+		const questions = normalizeQuestions([
+			{
+				id: "radio",
+				type: "radio",
+				prompt: "Pick one",
+				options: [{ value: "a", label: "Alpha", description: "first" }],
+			},
+		]);
+		const answerState = createAnswerState(questions);
+		answerState.radioAnswers.set("radio", { value: "custom", label: "custom", wasCustom: true });
+
+		const output = renderForm(
+			createInput({
+				questions,
+				answerState,
+				otherMode: true,
+				cursorIdx: 1,
+				editorLines: ["typed value"],
+			}),
+		).join("\n");
+
+		expect(output).toContain("**Pick one** [single-select]");
+		expect(output).toContain("Alpha");
+		expect(output).toContain("first");
+		expect(output).toContain("Other: custom");
+		expect(output).toContain("Your answer:");
+		expect(output).toContain("Enter submit • Esc go back");
+	});
+
+	it("renders checkbox and text questions with placeholders and text footer", () => {
+		const questions = normalizeQuestions([
+			{
+				id: "check",
+				type: "checkbox",
+				prompt: "Pick many",
+				options: [{ value: "a", label: "Alpha" }],
+			},
+			{
+				id: "text",
+				type: "text",
+				prompt: "Explain",
+				placeholder: "Type here",
+			},
+		]);
+		const answerState = createAnswerState(questions);
+		answerState.checkAnswers.set("check", new Set(["a"]));
+		answerState.checkCustom.set("check", "custom option");
+
+		const checkboxOutput = renderForm(createInput({ questions, answerState, editorLines: [], editorText: "" })).join(
+			"\n",
+		);
+		expect(checkboxOutput).toContain("**Pick many** [multi-select]");
+		expect(checkboxOutput).toContain("Other: custom option");
+		expect(checkboxOutput).toContain("Space toggle");
+
+		const textOutput = renderForm(
+			createInput({ questions, answerState, currentTab: 1, editorLines: ["typed line"], editorText: "" }),
+		).join("\n");
+		expect(textOutput).toContain("**Explain** [text]");
+		expect(textOutput).toContain("Type here");
+		expect(textOutput).toContain("typed line");
+		expect(textOutput).toContain("Tab/←→ navigate • Enter submit • Esc cancel");
+	});
+
+	it("renders answered submit states and optional question variants", () => {
+		const questions = normalizeQuestions([
+			{
+				id: "radio",
+				type: "radio",
+				prompt: "Pick one",
+				options: [{ value: "a", label: "Alpha" }],
+				allowOther: false,
+			},
+			{
+				id: "check",
+				type: "checkbox",
+				prompt: "Pick many",
+				options: [{ value: "b", label: "Beta", description: "desc" }],
+				allowOther: false,
+			},
+			{
+				id: "text",
+				type: "text",
+				prompt: "Explain",
+				required: false,
+			},
+		]);
+		const answerState = createAnswerState(questions);
+		answerState.radioAnswers.set("radio", { value: "a", label: "Alpha", wasCustom: false });
+		answerState.checkAnswers.set("check", new Set(["b"]));
+		answerState.textAnswers.set("text", "filled");
+
+		const submitOutput = renderForm(createInput({ questions, answerState, currentTab: 3 })).join("\n");
+		expect(submitOutput).toContain("Press Enter to submit");
+		expect(submitOutput).toContain("Alpha");
+		expect(submitOutput).toContain("b");
+		expect(submitOutput).toContain("filled");
+
+		const radioOutput = renderForm(createInput({ questions, answerState, currentTab: 0, cursorIdx: 0 })).join("\n");
+		expect(radioOutput).toContain("❯ ◉ Alpha");
+		expect(radioOutput).toContain("Enter select • Esc cancel");
+		expect(radioOutput).not.toContain("Other...");
+
+		const checkboxOutput = renderForm(createInput({ questions, answerState, currentTab: 1, cursorIdx: 0 })).join("\n");
+		expect(checkboxOutput).toContain("☑ Beta");
+		expect(checkboxOutput).toContain("desc");
+		expect(checkboxOutput).toContain("Enter next");
+
+		const textOutput = renderForm(
+			createInput({ questions, answerState, currentTab: 2, editorLines: ["filled"], editorText: "filled" }),
+		).join("\n");
+		expect(textOutput).toContain("filled");
+		expect(textOutput).toContain("Enter submit • Esc cancel");
+		expect(textOutput).not.toContain("*required");
+	});
+
+	it("covers direct helper branches for invalid tabs and compact variants", () => {
+		const lines: string[] = [];
+		const add = (text: string) => lines.push(text);
+		const singleQuestionInput = createInput({
+			questions: normalizeQuestions([
+				{ id: "radio", type: "radio", prompt: "Only", options: [{ value: "a", label: "Alpha" }] },
+			]),
+			currentTab: 99,
+		});
+		renderTabBar(singleQuestionInput, add);
+		renderQuestion(singleQuestionInput, add, 80);
+		renderFooter(singleQuestionInput, add);
+		expect(lines).toEqual([]);
+
+		const submitQuestions = normalizeQuestions([
+			{ id: "radio", type: "radio", prompt: "Only", options: [{ value: "a", label: "Alpha" }] },
+			{ id: "check", type: "checkbox", prompt: "Many", options: [{ value: "b", label: "Beta" }] },
+		]);
+		const submitLines: string[] = [];
+		const submitInput = createInput({ questions: submitQuestions, answerState: createAnswerState(submitQuestions) });
+		submitInput.answerState.radioAnswers.set("radio", { value: "custom", label: "custom", wasCustom: true });
+		submitInput.answerState.checkCustom.set("check", "custom");
+		renderSubmitTab(submitInput, (text) => submitLines.push(text), 80);
+		expect(submitLines.join("\n")).toContain("(wrote) custom");
+
+		const unansweredLines: string[] = [];
+		const unansweredInput = createInput({
+			questions: submitQuestions,
+			answerState: createAnswerState(submitQuestions),
+		});
+		unansweredInput.answerState.checkAnswers.delete("check");
+		renderSubmitTab(unansweredInput, (text) => unansweredLines.push(text), 80);
+		expect(unansweredLines.join("\n")).toContain("(unanswered)");
+
+		const output = renderForm(createInput({ currentTab: 99 }));
+		expect(output.length).toBeGreaterThanOrEqual(2);
+	});
+
+	it("covers unchecked and compact render branches", () => {
+		const radioQuestions = normalizeQuestions([
+			{ id: "radio", type: "radio", prompt: "Only", options: [{ value: "a", label: "Alpha" }], allowOther: true },
+		]);
+		const radioState = createAnswerState(radioQuestions);
+		radioState.radioAnswers.set("radio", { value: "a", label: "Alpha", wasCustom: false });
+		const radioLines: string[] = [];
+		renderQuestion(
+			createInput({
+				title: undefined,
+				description: undefined,
+				questions: radioQuestions,
+				answerState: radioState,
+				cursorIdx: 0,
+				editorLines: [],
+			}),
+			(text) => radioLines.push(text),
+			80,
+		);
+		expect(radioLines.join("\n")).toContain("❯ ◉ Alpha");
+		expect(radioLines.join("\n")).toContain("Other...");
+		const radioSelectedLines: string[] = [];
+		renderQuestion(
+			createInput({
+				title: undefined,
+				description: undefined,
+				questions: radioQuestions,
+				answerState: radioState,
+				cursorIdx: 1,
+				editorLines: [],
+			}),
+			(text) => radioSelectedLines.push(text),
+			80,
+		);
+		expect(radioSelectedLines.join("\n")).toContain("◉ Alpha");
+
+		const checkboxQuestions = normalizeQuestions([
+			{ id: "check", type: "checkbox", prompt: "Only", options: [{ value: "a", label: "Alpha" }], allowOther: true },
+		]);
+		const checkboxState = createAnswerState(checkboxQuestions);
+		checkboxState.checkAnswers.delete("check");
+		const checkboxOutput = renderForm(
+			createInput({
+				title: undefined,
+				description: undefined,
+				questions: checkboxQuestions,
+				answerState: checkboxState,
+				editorLines: [],
+			}),
+		).join("\n");
+		expect(checkboxOutput).toContain("☐ Alpha");
+		expect(checkboxOutput).toContain("Other...");
+		expect(checkboxOutput).toContain("Enter submit • Esc cancel");
+		checkboxState.checkAnswers.set("check", new Set(["a"]));
+		const checkboxOtherCursor = renderForm(
+			createInput({
+				title: undefined,
+				description: undefined,
+				questions: checkboxQuestions,
+				answerState: checkboxState,
+				cursorIdx: 1,
+				editorLines: [],
+			}),
+		).join("\n");
+		expect(checkboxOtherCursor).toContain("☑ Alpha");
+		expect(checkboxOtherCursor).toContain("❯ ☐ Other...");
+		const checkboxLines: string[] = [];
+		renderQuestion(
+			createInput({
+				title: undefined,
+				description: undefined,
+				questions: checkboxQuestions,
+				answerState: checkboxState,
+				cursorIdx: 1,
+				editorLines: [],
+			}),
+			(text) => checkboxLines.push(text),
+			80,
+		);
+		expect(checkboxLines.join("\n")).toContain("☑ Alpha");
+		checkboxState.checkAnswers.set("check", new Set());
+		const checkboxMutedLines: string[] = [];
+		renderQuestion(
+			createInput({
+				title: undefined,
+				description: undefined,
+				questions: checkboxQuestions,
+				answerState: checkboxState,
+				cursorIdx: 1,
+				editorLines: [],
+			}),
+			(text) => checkboxMutedLines.push(text),
+			80,
+		);
+		expect(checkboxMutedLines.join("\n")).toContain("☐ Alpha");
+
+		const textQuestions = normalizeQuestions([{ id: "text", type: "text", prompt: "Only", required: false }]);
+		const radioFooterOutput = renderForm(
+			createInput({
+				title: undefined,
+				description: undefined,
+				questions: radioQuestions,
+				answerState: radioState,
+				editorLines: [],
+			}),
+		).join("\n");
+		expect(radioFooterOutput).toContain("Enter select • Esc cancel");
+		const textOutput = renderForm(
+			createInput({
+				title: undefined,
+				description: undefined,
+				questions: textQuestions,
+				answerState: createAnswerState(textQuestions),
+				editorLines: [],
+				editorText: "",
+			}),
+		).join("\n");
+		expect(textOutput).toContain("**Only** [text]");
+		expect(textOutput).toContain("Enter submit • Esc cancel");
+		expect(textOutput).not.toContain("*required");
+	});
+});

package/view.ts

@@ -0,0 +1,218 @@
+import { truncateToWidth, visibleWidth } from "@mariozechner/pi-tui";
+
+import { SYM } from "./constants.ts";
+import { allRequiredAnswered, isAnswered } from "./state.ts";
+import type { RenderFormInput } from "./types.ts";
+
+function createLineHelpers(width: number, theme: RenderFormInput["theme"]) {
+	const lines: string[] = [];
+	const maxWidth = Math.min(width, 120);
+	const add = (text: string) => lines.push(truncateToWidth(text, maxWidth));
+	const hr = () => add(theme.fg("accent", "─".repeat(maxWidth)));
+	return { lines, maxWidth, add, hr };
+}
+
+export function renderSubmitTab(input: RenderFormInput, add: (text: string) => void, maxWidth: number): void {
+	const { questions, answerState, theme } = input;
+	add(` ${theme.fg("accent", theme.bold("Review & Submit"))}`);
+	add("");
+
+	for (const question of questions) {
+		const label = theme.fg("muted", `${question.label}:`);
+		if (question.type === "radio") {
+			const answer = answerState.radioAnswers.get(question.id);
+			if (answer) {
+				const prefix = answer.wasCustom ? theme.fg("dim", "(wrote) ") : "";
+				add(` ${label} ${prefix}${answer.label}`);
+			} else {
+				add(` ${label} ${theme.fg("warning", "(unanswered)")}`);
+			}
+			continue;
+		}
+
+		if (question.type === "checkbox") {
+			const selected = answerState.checkAnswers.get(question.id) ?? new Set<string>();
+			const custom = answerState.checkCustom.get(question.id)?.trim();
+			const values = [...selected];
+			if (custom) values.push(`${theme.fg("dim", "(wrote)")} ${custom}`);
+			add(` ${label} ${values.length ? values.join(", ") : theme.fg("warning", "(unanswered)")}`);
+			continue;
+		}
+
+		const answer = answerState.textAnswers.get(question.id)?.trim();
+		if (answer) {
+			add(` ${label} ${truncateToWidth(answer, maxWidth - visibleWidth(question.label) - 5)}`);
+		} else {
+			add(` ${label} ${theme.fg("warning", "(unanswered)")}`);
+		}
+	}
+
+	add("");
+	if (allRequiredAnswered(answerState, questions)) {
+		add(` ${theme.fg("success", "Press Enter to submit")}`);
+	} else {
+		const missing = questions
+			.filter((question) => question.required && !isAnswered(answerState, question))
+			.map((question) => question.label)
+			.join(", ");
+		add(` ${theme.fg("warning", `Required: ${missing}`)}`);
+	}
+
+	add("");
+	add(theme.fg("dim", " Tab/←→ navigate questions • Enter submit • Esc cancel"));
+}
+
+export function renderTabBar(input: RenderFormInput, add: (text: string) => void): void {
+	const { questions, answerState, currentTab, theme } = input;
+	if (questions.length <= 1) return;
+
+	const tabs: string[] = [];
+	for (let index = 0; index < questions.length; index += 1) {
+		const active = index === currentTab;
+		const answered = isAnswered(answerState, questions[index]);
+		const icon = answered ? theme.fg("success", SYM.check) : theme.fg("dim", SYM.dot);
+		const text = ` ${icon} ${questions[index].label} `;
+		tabs.push(active ? theme.bg("selectedBg", theme.fg("text", text)) : theme.fg(answered ? "success" : "muted", text));
+	}
+
+	const submitActive = currentTab === questions.length;
+	const submitText = ` ${SYM.submit} Submit `;
+	tabs.push(
+		submitActive
+			? theme.bg("selectedBg", theme.fg("text", submitText))
+			: theme.fg(allRequiredAnswered(answerState, questions) ? "success" : "dim", submitText),
+	);
+
+	add(` ${tabs.join(theme.fg("dim", "│"))}`);
+	add("");
+}
+
+export function renderQuestion(input: RenderFormInput, add: (text: string) => void, maxWidth: number): void {
+	const question = input.questions[input.currentTab];
+	if (!question) return;
+
+	const typeTag =
+		question.type === "radio"
+			? input.theme.fg("dim", "[single-select]")
+			: question.type === "checkbox"
+				? input.theme.fg("dim", "[multi-select]")
+				: input.theme.fg("dim", "[text]");
+
+	add(` ${input.theme.fg("text", input.theme.bold(question.prompt))} ${typeTag}`);
+	if (question.required) add(` ${input.theme.fg("warning", "*required")}`);
+	add("");
+
+	if (question.type === "radio") {
+		const selected = input.answerState.radioAnswers.get(question.id);
+		for (let index = 0; index < question.options.length; index += 1) {
+			const option = question.options[index];
+			const isCursor = index === input.cursorIdx;
+			const isSelected = selected?.value === option.value && !selected.wasCustom;
+			const bullet = isSelected ? input.theme.fg("accent", SYM.radioOn) : input.theme.fg("dim", SYM.radioOff);
+			const pointer = isCursor ? input.theme.fg("accent", SYM.pointer) : " ";
+			add(` ${pointer} ${bullet} ${input.theme.fg(isCursor ? "accent" : isSelected ? "text" : "muted", option.label)}`);
+			if (option.description) add(`      ${input.theme.fg("dim", option.description)}`);
+		}
+
+		if (question.allowOther) {
+			const isCursor = input.cursorIdx === question.options.length;
+			const isSelected = selected?.wasCustom === true;
+			const bullet = isSelected ? input.theme.fg("accent", SYM.radioOn) : input.theme.fg("dim", SYM.radioOff);
+			const pointer = isCursor ? input.theme.fg("accent", SYM.pointer) : " ";
+			const label = isSelected ? `Other: ${selected.label}` : "Other...";
+			add(` ${pointer} ${bullet} ${input.theme.fg(isCursor ? "accent" : "muted", label)}`);
+		}
+	}
+
+	if (question.type === "checkbox") {
+		const selected = input.answerState.checkAnswers.get(question.id) ?? new Set<string>();
+		for (let index = 0; index < question.options.length; index += 1) {
+			const option = question.options[index];
+			const isCursor = index === input.cursorIdx;
+			const isChecked = selected.has(option.value);
+			const box = isChecked ? input.theme.fg("accent", SYM.checkOn) : input.theme.fg("dim", SYM.checkOff);
+			const pointer = isCursor ? input.theme.fg("accent", SYM.pointer) : " ";
+			add(` ${pointer} ${box} ${input.theme.fg(isCursor ? "accent" : isChecked ? "text" : "muted", option.label)}`);
+			if (option.description) add(`      ${input.theme.fg("dim", option.description)}`);
+		}
+
+		if (question.allowOther) {
+			const isCursor = input.cursorIdx === question.options.length;
+			const custom = input.answerState.checkCustom.get(question.id)?.trim();
+			const box = custom ? input.theme.fg("accent", SYM.checkOn) : input.theme.fg("dim", SYM.checkOff);
+			const pointer = isCursor ? input.theme.fg("accent", SYM.pointer) : " ";
+			const label = custom ? `Other: ${custom}` : "Other...";
+			add(` ${pointer} ${box} ${input.theme.fg(isCursor ? "accent" : "muted", label)}`);
+		}
+	}
+
+	if (input.otherMode) {
+		add("");
+		add(` ${input.theme.fg("muted", "  Your answer:")}`);
+		for (const line of input.editorLines) add(`   ${line}`);
+		return;
+	}
+
+	if (question.type === "text") {
+		if (question.placeholder && !input.editorText) {
+			add(` ${input.theme.fg("dim", question.placeholder)}`);
+		}
+		for (const line of input.editorLines) {
+			add(`  ${line}`);
+		}
+	}
+
+	if (question.type === "text" && input.editorLines.length === 0) {
+		add(`  ${truncateToWidth("", maxWidth - 2)}`);
+	}
+}
+
+export function renderFooter(input: RenderFormInput, add: (text: string) => void): void {
+	const question = input.questions[input.currentTab];
+	if (!question) return;
+	add("");
+	if (input.otherMode) {
+		add(input.theme.fg("dim", " Enter submit • Esc go back"));
+		return;
+	}
+	if (question.type === "text") {
+		const nav = input.questions.length > 1 ? "Tab/←→ navigate • " : "";
+		add(input.theme.fg("dim", ` ${nav}Enter submit • Esc cancel`));
+		return;
+	}
+	if (question.type === "checkbox") {
+		const nav = input.questions.length > 1 ? "Tab/←→ navigate • " : "";
+		const enterAction = input.questions.length > 1 ? "next" : "submit";
+		add(input.theme.fg("dim", ` ↑↓ navigate • Space toggle • ${nav}Enter ${enterAction} • Esc cancel`));
+		return;
+	}
+	const nav = input.questions.length > 1 ? "Tab/←→ navigate • " : "";
+	add(input.theme.fg("dim", ` ↑↓ navigate • ${nav}Enter select • Esc cancel`));
+}
+
+export function renderForm(input: RenderFormInput): string[] {
+	const { lines, maxWidth, add, hr } = createLineHelpers(input.width, input.theme);
+	hr();
+
+	if (input.title) add(` ${input.theme.fg("accent", input.theme.bold(input.title))}`);
+	if (input.description) add(` ${input.theme.fg("muted", input.description)}`);
+	if (input.title || input.description) add("");
+
+	renderTabBar(input, add);
+
+	if (input.questions.length > 1 && input.currentTab === input.questions.length) {
+		renderSubmitTab(input, add, maxWidth);
+		hr();
+		return lines;
+	}
+
+	if (!input.questions[input.currentTab]) {
+		hr();
+		return lines;
+	}
+
+	renderQuestion(input, add, maxWidth);
+	renderFooter(input, add);
+	hr();
+	return lines;
+}