fix(ui): tighten ask layout rendering

tests/render-frame.test.ts

@@ -28,6 +28,20 @@ function mockEditor() {
 	} as never;
 }
 
+function plainTheme() {
+	return {
+		fg(_color: string, text: string) {
+			return text;
+		},
+		bg(_color: string, text: string) {
+			return text;
+		},
+		bold(text: string) {
+			return text;
+		},
+	} as never;
+}
+
 test("tab strip always shows dimmed framing arrows on wide screens", () => {
 	const state = createInitialState({
 		title: "Demo",
@@ -98,13 +112,15 @@ test("narrow tab strip keeps active middle tab visible", () => {
 
 	const lines = renderAskScreen({
 		state,
-		theme: mockTheme(),
+		theme: plainTheme(),
 		width: 28,
 		editor: mockEditor(),
 	});
 
-	assert(lines.some((line) => line.includes("Three")));
-	assert(!lines.some((line) => line.includes("{selectedBg}<text> One ")));
+	const tabLine = lines.find((line) => line.includes("← "));
+	assert.ok(tabLine);
+	assert(tabLine.includes("Three"));
+	assert(!tabLine.includes("One"));
 });
 
 test("narrow tab strip keeps submit tab visible when active", () => {
@@ -136,13 +152,69 @@ test("narrow tab strip keeps submit tab visible when active", () => {
 
 	const lines = renderAskScreen({
 		state,
-		theme: mockTheme(),
+		theme: plainTheme(),
 		width: 24,
 		editor: mockEditor(),
 	});
 
-	assert(lines.some((line) => line.includes("Submit")));
-	assert(lines.some((line) => line.includes("←") || line.includes("→")));
+	const tabLine = lines.find((line) => line.includes("Submit"));
+	assert.ok(tabLine);
+	assert(tabLine.includes("Submit"));
+	assert(tabLine.includes("←") || tabLine.includes("→"));
+});
+
+test("tab strip avoids truncation at narrow boundary widths", () => {
+	const state = createInitialState({
+		title: "Demo",
+		questions: [
+			{
+				id: "q1",
+				label: "One",
+				prompt: "One",
+				options: [{ value: "a", label: "A" }],
+			},
+			{
+				id: "q2",
+				label: "Two",
+				prompt: "Two",
+				options: [{ value: "a", label: "A" }],
+			},
+			{
+				id: "q3",
+				label: "Three",
+				prompt: "Three",
+				options: [{ value: "a", label: "A" }],
+			},
+			{
+				id: "q4",
+				label: "Four",
+				prompt: "Four",
+				options: [{ value: "a", label: "A" }],
+			},
+			{
+				id: "q5",
+				label: "Five",
+				prompt: "Five",
+				options: [{ value: "a", label: "A" }],
+			},
+		],
+	});
+	state.activeTabIndex = 2;
+
+	for (const width of [28, 29, 30, 31, 32]) {
+		const lines = renderAskScreen({
+			state,
+			theme: plainTheme(),
+			width,
+			editor: mockEditor(),
+		});
+		const tabLine = lines.find((line) => line.includes("← "));
+		assert.ok(tabLine);
+		assert(tabLine.includes("Three"));
+		assert(!tabLine.includes("..."));
+		assert(!tabLine.includes("Fou..."));
+		assert(!tabLine.includes("Fi..."));
+	}
 });
 
 test("footer hints wrap on narrow screens instead of truncating", () => {
@@ -160,7 +232,7 @@ test("footer hints wrap on narrow screens instead of truncating", () => {
 
 	const lines = renderAskScreen({
 		state,
-		theme: mockTheme(),
+		theme: plainTheme(),
 		width: 26,
 		editor: mockEditor(),
 	});
@@ -169,3 +241,26 @@ test("footer hints wrap on narrow screens instead of truncating", () => {
 	assert(lines.some((line) => line.includes("Enter continue")));
 	assert(lines.some((line) => line.includes("N/Shift+N note")));
 });
+
+test("footer keeps earlier hint chunks when later chunks wrap", () => {
+	const state = createInitialState({
+		questions: [
+			{
+				id: "q1",
+				label: "One",
+				prompt: "One",
+				options: [{ value: "a", label: "A" }],
+			},
+		],
+	});
+
+	const lines = renderAskScreen({
+		state,
+		theme: plainTheme(),
+		width: 22,
+		editor: mockEditor(),
+	});
+
+	assert(lines.some((line) => line.includes("⇆ tab · ↑↓ select")));
+	assert(lines.some((line) => line.includes("Enter confirm")));
+});