From a85b23f650aabcc71d3dc4e109b63fcd3a9f29fd Mon Sep 17 00:00:00 2001 From: addyCooks Date: Tue, 22 Sep 2026 21:30:19 +0530 Subject: [PATCH] fix(tui): keep the welcome menu from wrapping apart on narrow terminals Each welcome menu row is one line, label then key, as wide as the menu's own text. The menu was chosen by height alone, so on a terminal narrower than that line each row wrapped and its key landed on a line of its own. Offer a menu only when its rows also fit the width: the full menu, then the short one, then none, the same ladder the height budget already uses. Closes #1434. --- .changeset/welcome-menu-fits-width.md | 5 ++++ source/components/welcome-message.spec.tsx | 28 ++++++++++++++++++++++ source/components/welcome-message.tsx | 14 ++++++----- 3 files changed, 41 insertions(+), 6 deletions(-) create mode 100644 .changeset/welcome-menu-fits-width.md diff --git a/.changeset/welcome-menu-fits-width.md b/.changeset/welcome-menu-fits-width.md new file mode 100644 index 000000000..0afe6eb2d --- /dev/null +++ b/.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. diff --git a/source/components/welcome-message.spec.tsx b/source/components/welcome-message.spec.tsx index 1880acca3..139d9a29f 100644 --- a/source/components/welcome-message.spec.tsx +++ b/source/components/welcome-message.spec.tsx @@ -169,6 +169,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().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; diff --git a/source/components/welcome-message.tsx b/source/components/welcome-message.tsx index 6695c5e15..e56f71038 100644 --- a/source/components/welcome-message.tsx +++ b/source/components/welcome-message.tsx @@ -93,10 +93,15 @@ export default memo(function WelcomeMessage({ logoText = actualWidth >= BLOCK_NANOCODER_WIDTH ? LOGO_FULL : LOGO_SHORT; } + // 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; } @@ -106,10 +111,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