Shortcuts: Move SectionHeader title below top line and refine styling (#18721)

packages/cli/src/ui/components/shared/SectionHeader.test.tsx

@@ -30,9 +30,15 @@ describe('<SectionHeader />', () => {
       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(
-      <SectionHeader title={title} />,
+      <SectionHeader title={title} subtitle={subtitle} />,
       { width },
     );
     await waitUntilReady();

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 }) => (
-  <Box width="100%" flexDirection="row" overflow="hidden">
-    <Text color={theme.text.secondary} wrap="truncate-end">
-      {`── ${title}`}
-    </Text>
+export const SectionHeader: React.FC<{ title: string; subtitle?: string }> = ({
+  title,
+  subtitle,
+}) => (
+  <Box width="100%" flexDirection="column" overflow="hidden">
     <Box
-      flexGrow={1}
-      flexShrink={0}
-      minWidth={2}
-      marginLeft={1}
+      width="100%"
       borderStyle="single"
       borderTop
       borderBottom={false}
@@ -25,5 +22,15 @@ export const SectionHeader: React.FC<{ title: string }> = ({ title }) => (
       borderRight={false}
       borderColor={theme.text.secondary}
     />
+    <Box flexDirection="row">
+      <Text color={theme.text.primary} bold wrap="truncate-end">
+        {title}
+      </Text>
+      {subtitle && (
+        <Text color={theme.text.secondary} wrap="truncate-end">
+          {subtitle}
+        </Text>
+      )}
+    </Box>
   </Box>
 );

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[`<SectionHeader /> > 'renders correctly in a narrow contain…' 1`] = `
-"── Narrow Container ─────
+"─────────────────────────
+Narrow Container
 "
 `;
 
 exports[`<SectionHeader /> > 'renders correctly when title is trunc…' 1`] = `
-"── Very Long Hea… ──
+"────────────────────
+Very Long Header Ti…
 "
 `;
 
 exports[`<SectionHeader /> > 'renders correctly with a standard tit…' 1`] = `
-"── My Header ───────────────────────────
+"────────────────────────────────────────
+My Header
+"
+`;
+
+exports[`<SectionHeader /> > 'renders correctly with a subtitle' 1`] = `
+"────────────────────────────────────────
+Shortcuts See /help for more
 "
 `;