@xynogen/pix-core 0.1.0

package/src/tool/ask/single-select-layout.test.ts

@@ -0,0 +1,108 @@
+import { describe, expect, test } from "bun:test";
+import { renderSingleSelectRows } from "./single-select-layout";
+
+describe("renderSingleSelectRows", () => {
+	test("wraps long option titles instead of truncating them away", () => {
+		const rows = renderSingleSelectRows({
+			options: [
+				{
+					title:
+						"I want help with a coding or implementation task that involves changing, creating, reviewing, refactoring, or understanding code in a project",
+				},
+			],
+			selectedIndex: 0,
+			width: 40,
+			allowFreeform: false,
+		});
+
+		expect(rows.length).toBeGreaterThan(1);
+		expect(rows.map((r) => r.line).join(" ")).toContain("implementation task");
+		expect(rows.map((r) => r.line).join(" ")).toContain("understanding code");
+	});
+
+	test("wraps long descriptions under their option instead of clipping them", () => {
+		const rows = renderSingleSelectRows({
+			options: [
+				{
+					title: "Planning help",
+					description:
+						"Choose this if you are still deciding what to do, want a plan first, need architecture guidance, or want to evaluate alternatives before touching code.",
+				},
+			],
+			selectedIndex: 0,
+			width: 44,
+			allowFreeform: false,
+		});
+
+		const rendered = rows.map((r) => r.line).join(" ").replace(/\s+/g, " ").trim();
+		expect(rendered).toContain("want a plan first");
+		expect(rendered).toContain("before touching code");
+		expect(rows.length).toBeGreaterThan(2);
+	});
+
+	test("caps the rendered rows and keeps the selected option visible when content is taller than the viewport", () => {
+		const rows = renderSingleSelectRows({
+			options: [
+				{
+					title:
+						"I want help with a coding or implementation task that involves changing, creating, reviewing, refactoring, or understanding code in a project",
+					description:
+						"Choose this if your main goal is to build something, fix code, understand existing code, add a feature, improve architecture, write tests, or get help with development work.",
+				},
+				{
+					title:
+						"I want help troubleshooting, debugging, diagnosing, reproducing, isolating, or explaining a bug, failure, regression, flaky test, unexpected behavior, runtime error, build issue, deployment problem, configuration mistake, performance bottleneck, or environment-specific issue",
+					description:
+						"Choose this if something is broken, inconsistent, failing, slow, confusing, or behaving differently than expected and you want systematic help narrowing it down.",
+				},
+			],
+			selectedIndex: 1,
+			width: 44,
+			allowFreeform: false,
+			maxRows: 6,
+		});
+
+		expect(rows.length).toBeLessThanOrEqual(6);
+		expect(rows.map((r) => r.line).join(" ").replace(/\s+/g, " ")).toContain("troubleshooting");
+	});
+
+	test("does not duplicate a short word after wrapping an exact-width long word", () => {
+		const rows = renderSingleSelectRows({
+			options: [
+				{
+					title: "Alpha",
+					description: "hi aaaaaaaaaaaaaaaa",
+				},
+			],
+			selectedIndex: 0,
+			width: 12,
+			allowFreeform: false,
+		});
+
+		expect(rows.map((r) => r.line).filter((line) => line.trim() === "hi")).toHaveLength(1);
+		expect(rows.map((r) => r.line).filter((line) => line.trim() === "aaaaaaaa")).toHaveLength(2);
+	});
+
+	test("marks selected item rows as selected in annotated output", () => {
+		const rows = renderSingleSelectRows({
+			options: [
+				{ title: "Alpha" },
+				{ title: "Beta with a very long title that should wrap to multiple lines when rendered" },
+				{ title: "Gamma" },
+			],
+			selectedIndex: 1,
+			width: 30,
+			allowFreeform: false,
+		});
+
+		const selectedRows = rows.filter((r) => r.selected);
+		const nonSelectedRows = rows.filter((r) => !r.selected);
+
+		expect(selectedRows.length).toBeGreaterThan(1);
+		for (const row of selectedRows) {
+			expect(row.line).not.toContain("Alpha");
+			expect(row.line).not.toContain("Gamma");
+		}
+		expect(nonSelectedRows.length).toBeGreaterThan(0);
+	});
+});

package/src/tool/ask/single-select-layout.ts

@@ -0,0 +1,203 @@
+export interface QuestionOption {
+	title: string;
+	description?: string;
+}
+
+export interface AnnotatedRow {
+	line: string;
+	selected: boolean;
+}
+
+export interface RenderSingleSelectRowsParams {
+	options: QuestionOption[];
+	selectedIndex: number;
+	width: number;
+	allowFreeform: boolean;
+	allowComment?: boolean;
+	commentEnabled?: boolean;
+	maxRows?: number;
+	hideDescriptions?: boolean;
+}
+
+function wrapText(text: string, width: number): string[] {
+	const normalized = text.replace(/\s+/g, " ").trim();
+	if (!normalized) return [""];
+	if (width <= 1) return normalized.split("");
+
+	const words = normalized.split(" ");
+	const lines: string[] = [];
+	let current = "";
+
+	for (const word of words) {
+		if (!current) {
+			if (word.length <= width) {
+				current = word;
+			} else {
+				for (let i = 0; i < word.length; i += width) {
+					lines.push(word.slice(i, i + width));
+				}
+			}
+			continue;
+		}
+
+		const candidate = `${current} ${word}`;
+		if (candidate.length <= width) {
+			current = candidate;
+			continue;
+		}
+
+		lines.push(current);
+		if (word.length <= width) {
+			current = word;
+		} else {
+			current = "";
+			for (let i = 0; i < word.length; i += width) {
+				const chunk = word.slice(i, i + width);
+				if (chunk.length === width || i + width < word.length) lines.push(chunk);
+				else current = chunk;
+			}
+		}
+	}
+
+	if (current) lines.push(current);
+	return lines;
+}
+
+function padLine(prefix: string, content: string): string {
+	return `${prefix}${content}`.trimEnd();
+}
+
+interface ItemBlock {
+	itemIndex: number;
+	lines: string[];
+}
+
+type ListItem =
+	| { type: "option"; option: QuestionOption }
+	| { type: "comment-toggle"; option: QuestionOption }
+	| { type: "freeform"; option: QuestionOption };
+
+function buildItemBlocks(
+	options: QuestionOption[],
+	width: number,
+	allowFreeform: boolean,
+	allowComment: boolean,
+	commentEnabled: boolean,
+	selectedIndex: number,
+	hideDescriptions = false,
+): ItemBlock[] {
+	const normalizedWidth = Math.max(12, width);
+	const freeformLabel = "Type something. — Enter a custom response";
+	const commentToggleLabel = `${commentEnabled ? "[✓]" : "[ ]"} Add extra context after selection`;
+	const allItems: ListItem[] = options.map((option) => ({ type: "option", option }));
+	if (allowComment) {
+		allItems.push({ type: "comment-toggle", option: { title: commentToggleLabel } });
+	}
+	if (allowFreeform) {
+		allItems.push({ type: "freeform", option: { title: freeformLabel } });
+	}
+
+	return allItems.map((item, itemIndex) => {
+		const pointer = itemIndex === selectedIndex ? "→" : " ";
+		const lines: string[] = [];
+
+		if (item.type === "comment-toggle" || item.type === "freeform") {
+			const prefix = `${pointer}   `;
+			const wrapped = wrapText(item.option.title, Math.max(8, normalizedWidth - prefix.length));
+			wrapped.forEach((line, lineIndex) => {
+				lines.push(padLine(lineIndex === 0 ? prefix : " ".repeat(prefix.length), line));
+			});
+			return { itemIndex, lines };
+		}
+
+		const numberPrefix = `${pointer} ${itemIndex + 1}. `;
+		const continuationPrefix = " ".repeat(numberPrefix.length);
+		const titleLines = wrapText(item.option.title, Math.max(8, normalizedWidth - numberPrefix.length));
+		titleLines.forEach((line, lineIndex) => {
+			lines.push(padLine(lineIndex === 0 ? numberPrefix : continuationPrefix, line));
+		});
+
+		if (item.option.description && !hideDescriptions) {
+			const descriptionPrefix = "      ";
+			const descriptionLines = wrapText(
+				item.option.description,
+				Math.max(8, normalizedWidth - descriptionPrefix.length),
+			);
+			descriptionLines.forEach((line) => {
+				lines.push(padLine(descriptionPrefix, line));
+			});
+		}
+
+		return { itemIndex, lines };
+	});
+}
+
+function flatten(blocks: ItemBlock[], selectedIndex: number): AnnotatedRow[] {
+	return blocks.flatMap((block) =>
+		block.lines.map((line) => ({
+			line,
+			selected: block.itemIndex === selectedIndex,
+		})),
+	);
+}
+
+export function renderSingleSelectRows({
+	options,
+	selectedIndex,
+	width,
+	allowFreeform,
+	allowComment = false,
+	commentEnabled = false,
+	maxRows,
+	hideDescriptions,
+}: RenderSingleSelectRowsParams): AnnotatedRow[] {
+	const itemCount = options.length + (allowComment ? 1 : 0) + (allowFreeform ? 1 : 0);
+	const blocks = buildItemBlocks(options, width, allowFreeform, allowComment, commentEnabled, selectedIndex, hideDescriptions);
+	const allRows = flatten(blocks, selectedIndex);
+
+	if (!Number.isFinite(maxRows) || !maxRows || maxRows <= 0 || allRows.length <= maxRows) {
+		return allRows;
+	}
+
+	const safeMaxRows = Math.max(1, Math.floor(maxRows));
+	const selectedBlock = blocks[selectedIndex] ?? blocks[0];
+	if (!selectedBlock) return [];
+
+	const indicator = `  (${selectedIndex + 1}/${itemCount})`;
+	const availableRows = safeMaxRows > 1 ? safeMaxRows - 1 : 1;
+
+	if (selectedBlock.lines.length >= availableRows) {
+		const visible = selectedBlock.lines.slice(0, availableRows).map((line) => ({
+			line,
+			selected: true,
+		}));
+		if (safeMaxRows > 1) visible.push({ line: indicator, selected: false });
+		return visible.slice(0, safeMaxRows);
+	}
+
+	let start = selectedIndex;
+	let end = selectedIndex + 1;
+	let usedRows = selectedBlock.lines.length;
+
+	while (true) {
+		const nextCanFit = end < blocks.length && usedRows + blocks[end]!.lines.length <= availableRows;
+		if (nextCanFit) {
+			usedRows += blocks[end]!.lines.length;
+			end += 1;
+			continue;
+		}
+
+		const prevCanFit = start > 0 && usedRows + blocks[start - 1]!.lines.length <= availableRows;
+		if (prevCanFit) {
+			start -= 1;
+			usedRows += blocks[start]!.lines.length;
+			continue;
+		}
+
+		break;
+	}
+
+	const visible = flatten(blocks.slice(start, end), selectedIndex);
+	visible.push({ line: indicator, selected: false });
+	return visible.slice(0, safeMaxRows);
+}