feat(ask): refine inline answer and navigation UX

tests/render-question.test.ts

@@ -0,0 +1,83 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { applyNumberShortcut, createInitialState } from "../src/state.ts";
+import { getRenderableOptions } from "../src/state/selectors.ts";
+import { renderQuestionScreen } from "../src/ui/render-question.ts";
+
+function mockTheme() {
+	return {
+		fg(color: string, text: string) {
+			return `<${color}>${text}</${color}>`;
+		},
+		bg(color: string, text: string) {
+			return `{${color}}${text}{/${color}}`;
+		},
+		bold(text: string) {
+			return text;
+		},
+	} as never;
+}
+
+function mockEditor(text = "") {
+	return {
+		getText() {
+			return text;
+		},
+		render() {
+			return [];
+		},
+	} as never;
+}
+
+test("custom option stays labeled before selection", () => {
+	const state = createInitialState({
+		questions: [
+			{
+				id: "q1",
+				prompt: "Pick one",
+				options: [{ value: "a", label: "A" }],
+			},
+		],
+	});
+
+	const lines: string[] = [];
+	renderQuestionScreen({
+		lines,
+		state,
+		question: state.questions[0],
+		options: getRenderableOptions(state.questions[0]),
+		theme: mockTheme(),
+		width: 80,
+		editor: mockEditor(),
+	});
+
+	assert(lines.some((line) => line.includes("Type your own")));
+	assert(!lines.some((line) => line.includes("Type your answer...")));
+});
+
+test("selected custom option becomes inline input", () => {
+	let state = createInitialState({
+		questions: [
+			{
+				id: "q1",
+				prompt: "Pick one",
+				options: [{ value: "a", label: "A" }],
+			},
+		],
+	});
+	state = applyNumberShortcut(state, 2);
+
+	const lines: string[] = [];
+	renderQuestionScreen({
+		lines,
+		state,
+		question: state.questions[0],
+		options: getRenderableOptions(state.questions[0]),
+		theme: mockTheme(),
+		width: 80,
+		editor: mockEditor(""),
+	});
+
+	assert(lines.some((line) => line.includes("Type your answer...")));
+	assert(!lines.some((line) => line.includes("Type your own answer")));
+});