fix(tui): keep the welcome menu from wrapping apart on narrow terminals

.changeset/welcome-menu-fits-width.md

@@ -0,0 +1,5 @@
+---
+"@nanocollective/nanocoder": patch
+---
+
+Fixed the welcome screen's menu wrapping apart on narrow terminals, with each command landing on its own line. The menu now steps down to the short version, or is left out, when its rows would not fit the terminal width, the same way it already does for height. Closes #1434.

source/components/welcome-message.spec.tsx

@@ -184,6 +184,34 @@ test('WelcomeMessage shows menu for normal terminal', t => {
 	process.stdout.columns = originalColumns;
 });
 
+// Each menu row is one line, label then key. Where the full menu no longer
+// fits across, the short one takes over, and below that the menu is left out,
+// rather than any row wrapping its key onto a line of its own.
+test('WelcomeMessage steps the menu down to fit narrow terminals', t => {
+	const originalColumns = process.stdout.columns;
+	const menuAt = (columns: number) => {
+		process.stdout.columns = columns;
+		return stripAnsi(
+			renderWithTheme(<WelcomeMessage availableRows={40} tip="x" />).lastFrame()!,
+		);
+	};
+
+	try {
+		const full = menuAt(25);
+		t.regex(full, /Resume session +\/resume/);
+
+		const short = menuAt(20);
+		t.notRegex(short, /Resume session/);
+		t.regex(short, /Help +\/help/);
+		t.regex(short, /Quit +\/exit/);
+
+		const none = menuAt(12);
+		t.notRegex(none, /\/help|\/exit/);
+	} finally {
+		process.stdout.columns = originalColumns;
+	}
+});
+
 test('WelcomeMessage shows location and shortcuts for normal terminal', t => {
 	const originalColumns = process.stdout.columns;
 	process.stdout.columns = 80;

source/components/welcome-message.tsx

@@ -150,10 +150,15 @@ export default memo(function WelcomeMessage({
 		}
 	}
 
+	// Each menu row is a single line this wide: label, gap, key. A menu is only
+	// offered when that line fits the width too, or its rows wrap apart.
+	const menuWidth = (items: Array<[string, string]>) =>
+		Math.max(...items.map(([l, k]) => l.length + k.length)) + 4;
+
 	let menu: Array<[string, string]> = [];
-	if (budget >= MENU_FULL_ROWS) {
+	if (budget >= MENU_FULL_ROWS && menuWidth(MENU_FULL) <= actualWidth) {
 		menu = MENU_FULL;
-	} else if (budget >= MENU_MIN_ROWS) {
+	} else if (budget >= MENU_MIN_ROWS && menuWidth(MENU_MIN) <= actualWidth) {
 		menu = MENU_MIN;
 	}
 
@@ -163,10 +168,7 @@ export default memo(function WelcomeMessage({
 		return marker ? `${branch} (${marker})` : branch;
 	})();
 
-	const colW =
-		menu.length > 0
-			? Math.max(...menu.map(([l, k]) => l.length + k.length)) + 4
-			: 0;
+	const colW = menu.length > 0 ? menuWidth(menu) : 0;
 
 	// Full terminal width for every row so the wordmark and the text below it
 	// share one center axis — a capped box would sit left of the centered