@xynogen/pix-ask 0.2.5 → 0.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@xynogen/pix-ask",
-	"version": "0.2.5",
+	"version": "0.2.7",
 	"description": "Pi tool — structured questionnaire UI (ask_user)",
 	"type": "module",
 	"main": "src/index.ts",

package/src/ask.test.ts

@@ -17,11 +17,7 @@ import {
 
 // ── Fixtures ──────────────────────────────────────────────────────────
 
-const opt = (
-	label: string,
-	description = "Test option",
-	preview?: string,
-): OptionData => ({
+const opt = (label: string, description = "Test option", preview?: string): OptionData => ({
 	label,
 	description,
 	...(preview ? { preview } : {}),
@@ -30,10 +26,7 @@ const opt = (
 const qSingle: QuestionData = {
 	question: "Which approach?",
 	header: "Approach",
-	options: [
-		opt("REST", "Traditional REST API"),
-		opt("GraphQL", "Query language for APIs"),
-	],
+	options: [opt("REST", "Traditional REST API"), opt("GraphQL", "Query language for APIs")],
 };
 
 const qMulti: QuestionData = {

package/src/components.ts

@@ -43,10 +43,7 @@ export class TabBar implements Component {
 			truncateToWidth(
 				t.fg("accent", "╭─") +
 					line +
-					t.fg(
-						"accent",
-						`${"─".repeat(Math.max(0, inner - line.length - 1))}╮`,
-					),
+					t.fg("accent", `${"─".repeat(Math.max(0, inner - line.length - 1))}╮`),
 				width,
 				"",
 			),

package/src/frame.ts

@@ -60,8 +60,7 @@ export function frameLines(opts: FrameOptions): string[] {
 
 	const row = (content: string): string => {
 		const pad = inner - visibleWidth(content);
-		const padded =
-			pad > 0 ? content + " ".repeat(pad) : truncateToWidth(content, inner);
+		const padded = pad > 0 ? content + " ".repeat(pad) : truncateToWidth(content, inner);
 		return bg(`${color("│")} ${reassert(padded)} ${color("│")}`);
 	};
 

package/src/glyphs.test.ts

@@ -4,36 +4,28 @@ import { checkboxGlyphs, selectionGlyph } from "./glyphs.js";
 
 describe("selectionGlyph", () => {
 	test("multi checked → ▣ / success", () => {
-		expect(
-			selectionGlyph({ multi: true, selected: false, checked: true }),
-		).toEqual({
+		expect(selectionGlyph({ multi: true, selected: false, checked: true })).toEqual({
 			glyph: "▣",
 			color: "success",
 		});
 	});
 
 	test("multi unchecked → ☐ / dim", () => {
-		expect(
-			selectionGlyph({ multi: true, selected: true, checked: false }),
-		).toEqual({
+		expect(selectionGlyph({ multi: true, selected: true, checked: false })).toEqual({
 			glyph: "☐",
 			color: "dim",
 		});
 	});
 
 	test("radio selected → ◉ / accent", () => {
-		expect(
-			selectionGlyph({ multi: false, selected: true, checked: false }),
-		).toEqual({
+		expect(selectionGlyph({ multi: false, selected: true, checked: false })).toEqual({
 			glyph: "◉",
 			color: "accent",
 		});
 	});
 
 	test("radio unselected → ○ / dim", () => {
-		expect(
-			selectionGlyph({ multi: false, selected: false, checked: false }),
-		).toEqual({
+		expect(selectionGlyph({ multi: false, selected: false, checked: false })).toEqual({
 			glyph: "○",
 			color: "dim",
 		});

package/src/glyphs.ts

@@ -6,11 +6,10 @@ const RADIO_SELECTED = "◉";
 const RADIO_UNSELECTED = "○";
 
 /** Glyph + theme color token for a selection row. Caller applies theme.fg(color, glyph). */
-export function selectionGlyph(opts: {
-	multi: boolean;
-	selected: boolean;
-	checked: boolean;
-}): { glyph: string; color: string } {
+export function selectionGlyph(opts: { multi: boolean; selected: boolean; checked: boolean }): {
+	glyph: string;
+	color: string;
+} {
 	if (opts.multi) {
 		return opts.checked
 			? { glyph: CHECKBOX_CHECKED, color: "success" }
@@ -28,8 +27,7 @@ export function selectionGlyph(opts: {
  */
 export function checkboxGlyphs(): { checked: string; unchecked: string } {
 	const unicodeSafe =
-		visibleWidth(CHECKBOX_CHECKED) === 1 &&
-		visibleWidth(CHECKBOX_UNCHECKED) === 1;
+		visibleWidth(CHECKBOX_CHECKED) === 1 && visibleWidth(CHECKBOX_UNCHECKED) === 1;
 	return unicodeSafe
 		? { checked: CHECKBOX_CHECKED, unchecked: CHECKBOX_UNCHECKED }
 		: { checked: "[x]", unchecked: "[ ]" };

package/src/helpers.ts

@@ -20,15 +20,11 @@ export function safeMarkdownTheme(): MarkdownTheme | undefined {
 // ── Option / question helpers ──────────────────────────────────────────
 
 export function hasAnyPreview(q: QuestionData): boolean {
-	return q.options.some(
-		(o) => typeof o.preview === "string" && o.preview.length > 0,
-	);
+	return q.options.some((o) => typeof o.preview === "string" && o.preview.length > 0);
 }
 
 /** Which sentinel rows are auto-appended for a question. */
-export function sentinelsFor(
-	q: QuestionData,
-): Array<{ kind: string; label: string }> {
+export function sentinelsFor(q: QuestionData): Array<{ kind: string; label: string }> {
 	const out: Array<{ kind: string; label: string }> = [];
 	if (q.multiSelect) {
 		out.push({ kind: "next", label: SENTINEL_NEXT });
@@ -47,10 +43,7 @@ export function formatAnswerScalar(a: QuestionAnswer): string {
 	return a.answer ?? "(selected)";
 }
 
-export function buildResponseText(
-	answers: QuestionAnswer[],
-	questions: QuestionData[],
-): string {
+export function buildResponseText(answers: QuestionAnswer[], questions: QuestionData[]): string {
 	const segs: string[] = [];
 	for (const a of answers) {
 		const q = questions[a.questionIndex]?.question ?? `Q${a.questionIndex + 1}`;
@@ -58,9 +51,7 @@ export function buildResponseText(
 		if (a.preview) s += `. selected preview: ${a.preview}`;
 		segs.push(s);
 	}
-	return segs.length
-		? `User answered: ${segs.join(". ")}.`
-		: "User declined to answer questions.";
+	return segs.length ? `User answered: ${segs.join(". ")}.` : "User declined to answer questions.";
 }
 
 // ── Scroll indicator ───────────────────────────────────────────────────

package/src/index.ts

@@ -6,13 +6,7 @@ import { once } from "./once.ts";
 import { AskQuestionnaire } from "./questionnaire.js";
 import { rpcFallback } from "./rpc.js";
 import type { Params } from "./schema.js";
-import {
-	MAX_OPTIONS,
-	MAX_QUESTIONS,
-	MIN_OPTIONS,
-	ParamsSchema,
-	SENTINEL_FREEFORM,
-} from "./schema.js";
+import { MAX_OPTIONS, MAX_QUESTIONS, MIN_OPTIONS, ParamsSchema } from "./schema.js";
 import type { QuestionAnswer, QuestionnaireResult } from "./types.js";
 
 // ── Re-exports (consumed by tests and single-select-layout) ───────────
@@ -41,8 +35,6 @@ export default function registerAsk(pi: ExtensionAPI): void {
 			promptSnippet: `Ask the user up to ${MAX_QUESTIONS} structured questions (${MIN_OPTIONS}-${MAX_OPTIONS} options each) when requirements are ambiguous`,
 			promptGuidelines: [
 				`Use ask whenever the user's request is underspecified and you cannot proceed without concrete decisions — you can ask up to ${MAX_QUESTIONS} questions per invocation.`,
-				`Each question MUST have ${MIN_OPTIONS}-${MAX_OPTIONS} options. Every option requires a concise label (1-5 words) and a description explaining what the choice means or its trade-offs. The user can additionally type a custom answer ("${SENTINEL_FREEFORM}" row is appended automatically to single-select questions).`,
-				`Set multiSelect: true when multiple answers are valid; this suppresses the "${SENTINEL_FREEFORM}" row. Provide an options[].preview markdown string when an option benefits from richer side-by-side context (mockups, code snippets, diagrams, configs) — single-select only. NOTE: any non-empty preview on a single-select question ALSO suppresses the "${SENTINEL_FREEFORM}" row (no room in the side-by-side layout). If you recommend a specific option, make it the first option and append "(Recommended)" to its label.`,
 				"Do not stack multiple ask calls back-to-back — group all clarifying questions into one invocation.",
 			],
 			executionMode: "sequential",
@@ -60,9 +52,7 @@ export default function registerAsk(pi: ExtensionAPI): void {
 
 				if (!Array.isArray(typed.questions) || typed.questions.length === 0) {
 					return {
-						content: [
-							{ type: "text", text: "At least one question is required." },
-						],
+						content: [{ type: "text", text: "At least one question is required." }],
 						isError: true,
 						details: { answers: [], cancelled: true },
 					};
@@ -79,11 +69,9 @@ export default function registerAsk(pi: ExtensionAPI): void {
 				const result = await ctx.ui.custom<QuestionnaireResult | null>(
 					(tui, theme, keybindings, done) => {
 						if (signal) {
-							signal.addEventListener(
-								"abort",
-								() => done({ answers: [], cancelled: true }),
-								{ once: true },
-							);
+							signal.addEventListener("abort", () => done({ answers: [], cancelled: true }), {
+								once: true,
+							});
 						}
 						return new AskQuestionnaire(typed, tui, theme, keybindings, done);
 					},
@@ -92,9 +80,7 @@ export default function registerAsk(pi: ExtensionAPI): void {
 
 				if (!result || result.cancelled) {
 					return {
-						content: [
-							{ type: "text", text: "User cancelled the questionnaire" },
-						],
+						content: [{ type: "text", text: "User cancelled the questionnaire" }],
 						details: result ?? { answers: [], cancelled: true },
 					};
 				}
@@ -106,7 +92,7 @@ export default function registerAsk(pi: ExtensionAPI): void {
 			renderCall(args, theme) {
 				const questions = Array.isArray(args.questions) ? args.questions : [];
 				const count = questions.length;
-				const firstQ = (questions[0]?.question ?? "") as string;
+				const firstQ = questions[0]?.question ?? "";
 				let text = theme.fg("toolTitle", theme.bold(`ask (${count}) `));
 				text += theme.fg("muted", firstQ);
 				if (count > 1) text += theme.fg("dim", ` +${count - 1} more`);
@@ -124,10 +110,7 @@ export default function registerAsk(pi: ExtensionAPI): void {
 					return new Text(theme.fg("warning", "Cancelled"), 0, 0);
 				}
 				const texts = details.answers.map((a) => {
-					const v =
-						a.kind === "multi"
-							? (a.selected ?? []).join(", ")
-							: (a.answer ?? "");
+					const v = a.kind === "multi" ? (a.selected ?? []).join(", ") : (a.answer ?? "");
 					return `${a.questionIndex + 1}: ${v}`;
 				});
 				return new Text(theme.fg("success", `✓ ${texts.join(" • ")}`), 0, 0);

package/src/questionnaire.ts

@@ -17,17 +17,8 @@ import { frameLines, modalWidth } from "./frame.js";
 import { checkboxGlyphs, selectionGlyph } from "./glyphs.js";
 import { safeMarkdownTheme, sentinelsFor } from "./helpers.js";
 import type { OptionData, Params, QuestionData } from "./schema.js";
-import {
-	SENTINEL_FREEFORM,
-	SENTINEL_NEXT,
-	SEPARATOR,
-	SPLIT_PANE_MIN_WIDTH,
-} from "./schema.js";
-import type {
-	AnswerKind,
-	QuestionAnswer,
-	QuestionnaireResult,
-} from "./types.js";
+import { SENTINEL_FREEFORM, SENTINEL_NEXT, SEPARATOR, SPLIT_PANE_MIN_WIDTH } from "./schema.js";
+import type { AnswerKind, QuestionAnswer, QuestionnaireResult } from "./types.js";
 
 // ── AskQuestionnaire ───────────────────────────────────────────────────
 
@@ -84,8 +75,7 @@ export class AskQuestionnaire extends Container {
 		label?: string;
 		option?: OptionData;
 	}> {
-		const items: Array<{ kind: string; label?: string; option?: OptionData }> =
-			[];
+		const items: Array<{ kind: string; label?: string; option?: OptionData }> = [];
 		for (const o of this.filteredOptions) {
 			items.push({ kind: "option", option: o });
 		}
@@ -137,9 +127,7 @@ export class AskQuestionnaire extends Container {
 		selected?: string[],
 		preview?: string,
 	): void {
-		this.answers = this.answers.filter(
-			(a) => a.questionIndex !== this.currentIndex,
-		);
+		this.answers = this.answers.filter((a) => a.questionIndex !== this.currentIndex);
 		this.answers.push({
 			questionIndex: this.currentIndex,
 			question: this.currentQ.question,
@@ -158,12 +146,7 @@ export class AskQuestionnaire extends Container {
 		}
 
 		if (item.kind === "option" && item.option) {
-			this.recordAnswer(
-				"option",
-				item.option.label,
-				undefined,
-				item.option.preview,
-			);
+			this.recordAnswer("option", item.option.label, undefined, item.option.preview);
 			this.nextQuestion();
 		} else if (item.kind === "other") {
 			this.inputMode = true;
@@ -172,7 +155,7 @@ export class AskQuestionnaire extends Container {
 		} else if (item.kind === "next") {
 			const selected = Array.from(this.multiChecked)
 				.sort((a, b) => a - b)
-				.map((i) => this.currentQ.options[i]?.label);
+				.map((i) => this.currentQ.options[i]?.label ?? "");
 			if (selected.length === 0) {
 				this.cancel();
 				return;
@@ -204,9 +187,7 @@ export class AskQuestionnaire extends Container {
 	}
 
 	private restoreAnswerState(): void {
-		const prev = this.answers.find(
-			(a) => a.questionIndex === this.currentIndex,
-		);
+		const prev = this.answers.find((a) => a.questionIndex === this.currentIndex);
 		if (!prev) return;
 		const q = this.currentQ;
 		if (prev.kind === "multi") {
@@ -287,8 +268,7 @@ export class AskQuestionnaire extends Container {
 			matchesKey(data, Key.ctrl("k"))
 		) {
 			if (total > 0) {
-				this.selectedOptionIndex =
-					(this.selectedOptionIndex - 1 + total) % total;
+				this.selectedOptionIndex = (this.selectedOptionIndex - 1 + total) % total;
 				this.refresh();
 			}
 			return;
@@ -423,10 +403,7 @@ export class AskQuestionnaire extends Container {
 		const maxVisible = Math.min(total, 12);
 		const start = Math.max(
 			0,
-			Math.min(
-				this.selectedOptionIndex - Math.floor(maxVisible / 2),
-				total - maxVisible,
-			),
+			Math.min(this.selectedOptionIndex - Math.floor(maxVisible / 2), total - maxVisible),
 		);
 		const end = Math.min(start + maxVisible, total);
 
@@ -462,24 +439,18 @@ export class AskQuestionnaire extends Container {
 				const label = sel
 					? t.fg("accent", t.bold(SENTINEL_FREEFORM))
 					: t.fg("text", t.bold(SENTINEL_FREEFORM));
-				lines.push(
-					truncateToWidth(`${ptr} ${t.fg("dim", "✎")} ${label}`, inner, ""),
-				);
+				lines.push(truncateToWidth(`${ptr} ${t.fg("dim", "✎")} ${label}`, inner, ""));
 			} else if (item.kind === "next") {
 				const label = sel
 					? t.fg("accent", t.bold(SENTINEL_NEXT))
 					: t.fg("text", t.bold(SENTINEL_NEXT));
-				lines.push(
-					truncateToWidth(`${ptr} ${t.fg("dim", "→")} ${label}`, inner, ""),
-				);
+				lines.push(truncateToWidth(`${ptr} ${t.fg("dim", "→")} ${label}`, inner, ""));
 			}
 		}
 
 		if (start > 0 || end < total) {
 			const count =
-				this.filteredOptions.length > 0
-					? `${this.selectedOptionIndex + 1}/${total}`
-					: `${total}`;
+				this.filteredOptions.length > 0 ? `${this.selectedOptionIndex + 1}/${total}` : `${total}`;
 			lines.push(t.fg("dim", truncateToWidth(`  ${count}`, inner, "")));
 		}
 
@@ -496,19 +467,12 @@ export class AskQuestionnaire extends Container {
 		const mdWidth = Math.max(10, width);
 
 		if (this.mdTheme) {
-			const md = new Markdown(
-				`## ${item.option.label}\n\n${mdText}`,
-				0,
-				0,
-				this.mdTheme,
-			);
+			const md = new Markdown(`## ${item.option.label}\n\n${mdText}`, 0, 0, this.mdTheme);
 			return md.render(mdWidth);
 		}
 
 		const lines = wrapTextWithAnsi(mdText, mdWidth);
-		return lines.map((l) =>
-			truncateToWidth(this.theme.fg("muted", l), mdWidth, ""),
-		);
+		return lines.map((l) => truncateToWidth(this.theme.fg("muted", l), mdWidth, ""));
 	}
 
 	override render(termWidth: number): string[] {
@@ -520,9 +484,7 @@ export class AskQuestionnaire extends Container {
 		const t = this.theme;
 		const isMulti = !!this.currentQ.multiSelect;
 		const hasPreview =
-			!isMulti &&
-			this.selectedItem?.kind === "option" &&
-			!!this.selectedItem?.option?.preview;
+			!isMulti && this.selectedItem?.kind === "option" && !!this.selectedItem?.option?.preview;
 
 		const useSplit = hasPreview && width >= SPLIT_PANE_MIN_WIDTH;
 		const leftWidth = useSplit ? Math.floor((width - 2) * 0.45) : inner;
@@ -530,8 +492,7 @@ export class AskQuestionnaire extends Container {
 
 		const lines: string[] = [];
 
-		const row = (content: string): string =>
-			truncateToWidth(content, width, "");
+		const row = (content: string): string => truncateToWidth(content, width, "");
 
 		// Tab bar — rendered as the framed top edge (frameLines `top`).
 		let top: string | undefined;
@@ -554,10 +515,7 @@ export class AskQuestionnaire extends Container {
 		lines.push(row(`${chip}${prog}`));
 
 		// Question text
-		for (const w of wrapTextWithAnsi(
-			this.currentQ.question,
-			Math.max(10, inner),
-		)) {
+		for (const w of wrapTextWithAnsi(this.currentQ.question, Math.max(10, inner))) {
 			lines.push(row(t.fg("text", t.bold(w))));
 		}
 
@@ -601,28 +559,17 @@ export class AskQuestionnaire extends Container {
 		}
 
 		// Footer hints
-		const navHint =
-			this.params.questions.length > 1 ? "↑↓ nav • ←→ question" : "↑↓ nav";
+		const navHint = this.params.questions.length > 1 ? "↑↓ nav • ←→ question" : "↑↓ nav";
 		const hintParts = isMulti
-			? [
-					`${navHint} • space toggle • enter commit • esc clear`,
-					"ctrl+c cancel",
-				]
-			: [
-					`${navHint} • type filter • enter select • esc clear`,
-					"ctrl+c cancel",
-				];
+			? [`${navHint} • space toggle • enter commit • esc clear`, "ctrl+c cancel"]
+			: [`${navHint} • type filter • enter select • esc clear`, "ctrl+c cancel"];
 		lines.push(row(dim(t)(hintParts.join(" • "))));
 
 		return this.frame(mw, lines, top);
 	}
 
 	/** Wrap body lines in the rounded modal border at the given outer width. */
-	private frame(
-		outerWidth: number,
-		lines: string[],
-		top: string | undefined,
-	): string[] {
+	private frame(outerWidth: number, lines: string[], top: string | undefined): string[] {
 		const t = this.theme;
 		return frameLines({
 			width: outerWidth,

package/src/rpc.ts

@@ -21,9 +21,7 @@ export async function rpcFallback(
 		const header = q.header;
 
 		if (q.multiSelect) {
-			const lines = q.options.map(
-				(o, idx) => `${idx + 1}. ${o.label} — ${o.description}`,
-			);
+			const lines = q.options.map((o, idx) => `${idx + 1}. ${o.label} — ${o.description}`);
 			const raw = await ui.input(
 				`${header}: ${q.question}\n\n${lines.join("\n")}\n\nEnter numbers separated by commas:`,
 				"e.g. 1,3",
@@ -36,7 +34,7 @@ export async function rpcFallback(
 				.split(",")
 				.map((s) => Number(s.trim()))
 				.filter((n) => n >= 1 && n <= q.options.length);
-			const selected = indices.map((n) => q.options[n - 1]?.label);
+			const selected = indices.map((n) => q.options[n - 1]?.label ?? "");
 			if (selected.length > 0) {
 				answers.push({
 					questionIndex: i,
@@ -71,8 +69,7 @@ export async function rpcFallback(
 				});
 			} else {
 				const opt = q.options.find(
-					(o) =>
-						chosen === o.label || `${o.label} — ${o.description}` === chosen,
+					(o) => chosen === o.label || `${o.label} — ${o.description}` === chosen,
 				);
 				answers.push({
 					questionIndex: i,

package/src/schema.ts

@@ -27,8 +27,7 @@ export const OptionSchema = Type.Object({
 	}),
 	preview: Type.Optional(
 		Type.String({
-			description:
-				"Optional markdown preview for side-by-side layout (single-select only).",
+			description: "Optional markdown preview for side-by-side layout (single-select only).",
 		}),
 	),
 });
@@ -44,14 +43,12 @@ export const QuestionSchema = Type.Object({
 	options: Type.Array(OptionSchema, {
 		minItems: MIN_OPTIONS,
 		maxItems: MAX_OPTIONS,
-		description:
-			"2-4 options. 'Type something.' is auto-appended for single-select.",
+		description: "2-4 options. 'Type something.' is auto-appended for single-select.",
 	}),
 	multiSelect: Type.Optional(
 		Type.Boolean({
 			default: false,
-			description:
-				"Allow multiple selections. Suppresses 'Type something.' row.",
+			description: "Allow multiple selections. Suppresses 'Type something.' row.",
 		}),
 	),
 });