From e69e23e4a0ed618df69b22f8ecae70d51c2874cc Mon Sep 17 00:00:00 2001 From: Keith Guerin Date: Tue, 24 Feb 2026 00:12:29 -0800 Subject: [PATCH] Shortcuts: Move SectionHeader title below top line and refine styling (#18721) --- packages/cli/src/test-utils/render.tsx | 8 +++--- .../cli/src/ui/components/ShortcutsHelp.tsx | 2 +- .../__snapshots__/ShortcutsHelp.test.tsx.snap | 12 ++++++--- .../components/shared/SectionHeader.test.tsx | 10 ++++++-- .../ui/components/shared/SectionHeader.tsx | 25 ++++++++++++------- .../__snapshots__/SectionHeader.test.tsx.snap | 15 ++++++++--- 6 files changed, 50 insertions(+), 22 deletions(-) diff --git a/packages/cli/src/test-utils/render.tsx b/packages/cli/src/test-utils/render.tsx index a13d6e2558..73ec9af2d3 100644 --- a/packages/cli/src/test-utils/render.tsx +++ b/packages/cli/src/test-utils/render.tsx @@ -393,9 +393,11 @@ export const render = ( exitOnCtrlC: false, patchConsole: false, onRender: (metrics: RenderMetrics) => { - if (isInkRenderMetrics(metrics)) { - stdout.onRender(metrics.staticOutput ?? '', metrics.output); - } + const output = isInkRenderMetrics(metrics) ? metrics.output : '...'; + const staticOutput = isInkRenderMetrics(metrics) + ? (metrics.staticOutput ?? '') + : ''; + stdout.onRender(staticOutput, output); }, }); }); diff --git a/packages/cli/src/ui/components/ShortcutsHelp.tsx b/packages/cli/src/ui/components/ShortcutsHelp.tsx index dfa867d46c..63183ab922 100644 --- a/packages/cli/src/ui/components/ShortcutsHelp.tsx +++ b/packages/cli/src/ui/components/ShortcutsHelp.tsx @@ -67,7 +67,7 @@ export const ShortcutsHelp: React.FC = () => { return ( - + {itemsForDisplay.map((item, index) => ( renders correctly in 'narrow' mode on 'linux' 1`] = ` -"── Shortcuts (for more, see /help) ───── +"──────────────────────────────────────── + Shortcuts See /help for more ! shell mode @ select file or folder Esc Esc clear & rewind @@ -16,7 +17,8 @@ exports[`ShortcutsHelp > renders correctly in 'narrow' mode on 'linux' 1`] = ` `; exports[`ShortcutsHelp > renders correctly in 'narrow' mode on 'mac' 1`] = ` -"── Shortcuts (for more, see /help) ───── +"──────────────────────────────────────── + Shortcuts See /help for more ! shell mode @ select file or folder Esc Esc clear & rewind @@ -31,7 +33,8 @@ exports[`ShortcutsHelp > renders correctly in 'narrow' mode on 'mac' 1`] = ` `; exports[`ShortcutsHelp > renders correctly in 'wide' mode on 'linux' 1`] = ` -"── Shortcuts (for more, see /help) ───────────────────────────────────────────────────────────────── +"──────────────────────────────────────────────────────────────────────────────────────────────────── + Shortcuts See /help for more ! shell mode Shift+Tab cycle mode Ctrl+V paste images @ select file or folder Ctrl+Y YOLO mode Alt+M raw markdown mode Esc Esc clear & rewind Ctrl+R reverse-search history Ctrl+X open external editor @@ -40,7 +43,8 @@ exports[`ShortcutsHelp > renders correctly in 'wide' mode on 'linux' 1`] = ` `; exports[`ShortcutsHelp > renders correctly in 'wide' mode on 'mac' 1`] = ` -"── Shortcuts (for more, see /help) ───────────────────────────────────────────────────────────────── +"──────────────────────────────────────────────────────────────────────────────────────────────────── + Shortcuts See /help for more ! shell mode Shift+Tab cycle mode Ctrl+V paste images @ select file or folder Ctrl+Y YOLO mode Option+M raw markdown mode Esc Esc clear & rewind Ctrl+R reverse-search history Ctrl+X open external editor diff --git a/packages/cli/src/ui/components/shared/SectionHeader.test.tsx b/packages/cli/src/ui/components/shared/SectionHeader.test.tsx index 253e81f0f0..c7ff4e9c82 100644 --- a/packages/cli/src/ui/components/shared/SectionHeader.test.tsx +++ b/packages/cli/src/ui/components/shared/SectionHeader.test.tsx @@ -30,9 +30,15 @@ describe('', () => { title: 'Narrow Container', width: 25, }, - ])('$description', async ({ title, width }) => { + { + description: 'renders correctly with a subtitle', + title: 'Shortcuts', + subtitle: ' See /help for more', + width: 40, + }, + ])('$description', async ({ title, subtitle, width }) => { const { lastFrame, waitUntilReady, unmount } = renderWithProviders( - , + , { width }, ); await waitUntilReady(); diff --git a/packages/cli/src/ui/components/shared/SectionHeader.tsx b/packages/cli/src/ui/components/shared/SectionHeader.tsx index daa41379fb..3f0963ae50 100644 --- a/packages/cli/src/ui/components/shared/SectionHeader.tsx +++ b/packages/cli/src/ui/components/shared/SectionHeader.tsx @@ -8,16 +8,13 @@ import type React from 'react'; import { Box, Text } from 'ink'; import { theme } from '../../semantic-colors.js'; -export const SectionHeader: React.FC<{ title: string }> = ({ title }) => ( - - - {`── ${title}`} - +export const SectionHeader: React.FC<{ title: string; subtitle?: string }> = ({ + title, + subtitle, +}) => ( + = ({ title }) => ( borderRight={false} borderColor={theme.text.secondary} /> + + + {title} + + {subtitle && ( + + {subtitle} + + )} + ); diff --git a/packages/cli/src/ui/components/shared/__snapshots__/SectionHeader.test.tsx.snap b/packages/cli/src/ui/components/shared/__snapshots__/SectionHeader.test.tsx.snap index 9968ec88d0..fb18e546a8 100644 --- a/packages/cli/src/ui/components/shared/__snapshots__/SectionHeader.test.tsx.snap +++ b/packages/cli/src/ui/components/shared/__snapshots__/SectionHeader.test.tsx.snap @@ -1,16 +1,25 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[` > 'renders correctly in a narrow contain…' 1`] = ` -"── Narrow Container ───── +"───────────────────────── +Narrow Container " `; exports[` > 'renders correctly when title is trunc…' 1`] = ` -"── Very Long Hea… ── +"──────────────────── +Very Long Header Ti… " `; exports[` > 'renders correctly with a standard tit…' 1`] = ` -"── My Header ─────────────────────────── +"──────────────────────────────────────── +My Header +" +`; + +exports[` > 'renders correctly with a subtitle' 1`] = ` +"──────────────────────────────────────── +Shortcuts See /help for more " `;