Code review fixes for show question mark pr. (#18480)

packages/cli/src/ui/components/shared/HorizontalLine.tsx

@@ -5,21 +5,23 @@
  */
 
 import type React from 'react';
-import { Text } from 'ink';
-import { useTerminalSize } from '../../hooks/useTerminalSize.js';
+import { Box } from 'ink';
 import { theme } from '../../semantic-colors.js';
 
 interface HorizontalLineProps {
-  width?: number;
   color?: string;
 }
 
 export const HorizontalLine: React.FC<HorizontalLineProps> = ({
-  width,
   color = theme.border.default,
-}) => {
-  const { columns } = useTerminalSize();
-  const resolvedWidth = Math.max(1, width ?? columns);
-
-  return <Text color={color}>{'─'.repeat(resolvedWidth)}</Text>;
-};
+}) => (
+  <Box
+    width="100%"
+    borderStyle="single"
+    borderTop
+    borderBottom={false}
+    borderLeft={false}
+    borderRight={false}
+    borderColor={color}
+  />
+);

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

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { renderWithProviders } from '../../../test-utils/render.js';
+import { SectionHeader } from './SectionHeader.js';
+
+describe('<SectionHeader />', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it.each([
+    {
+      description: 'renders correctly with a standard title',
+      title: 'My Header',
+      width: 40,
+    },
+    {
+      description:
+        'renders correctly when title is truncated but still shows dashes',
+      title: 'Very Long Header Title That Will Truncate',
+      width: 20,
+    },
+    {
+      description: 'renders correctly in a narrow container',
+      title: 'Narrow Container',
+      width: 25,
+    },
+  ])('$description', ({ title, width }) => {
+    const { lastFrame, unmount } = renderWithProviders(
+      <SectionHeader title={title} />,
+      { width },
+    );
+
+    expect(lastFrame()).toMatchSnapshot();
+    unmount();
+  });
+});

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

@@ -5,27 +5,25 @@
  */
 
 import type React from 'react';
-import { Text } from 'ink';
-import stringWidth from 'string-width';
-import { useTerminalSize } from '../../hooks/useTerminalSize.js';
+import { Box, Text } from 'ink';
 import { theme } from '../../semantic-colors.js';
 
-const buildHeaderLine = (title: string, width: number) => {
-  const prefix = `── ${title} `;
-  const prefixWidth = stringWidth(prefix);
-  if (width <= prefixWidth) {
-    return prefix.slice(0, Math.max(0, width));
-  }
-  return prefix + '─'.repeat(Math.max(0, width - prefixWidth));
-};
-
-export const SectionHeader: React.FC<{ title: string; width?: number }> = ({
-  title,
-  width,
-}) => {
-  const { columns: terminalWidth } = useTerminalSize();
-  const resolvedWidth = Math.max(10, width ?? terminalWidth);
-  const text = buildHeaderLine(title, resolvedWidth);
-
-  return <Text color={theme.text.secondary}>{text}</Text>;
-};
+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>
+    <Box
+      flexGrow={1}
+      flexShrink={0}
+      minWidth={2}
+      marginLeft={1}
+      borderStyle="single"
+      borderTop
+      borderBottom={false}
+      borderLeft={false}
+      borderRight={false}
+      borderColor={theme.text.secondary}
+    />
+  </Box>
+);

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

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<SectionHeader /> > 'renders correctly in a narrow contain…' 1`] = `"── Narrow Container ─────"`;
+
+exports[`<SectionHeader /> > 'renders correctly when title is trunc…' 1`] = `"── Very Long Hea… ──"`;
+
+exports[`<SectionHeader /> > 'renders correctly with a standard tit…' 1`] = `"── My Header ───────────────────────────"`;