Allow ask headers longer than 16 chars (#20041)

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

@@ -173,6 +173,28 @@ describe('TabHeader', () => {
       unmount();
     });
 
+    it('truncates long headers when not selected', async () => {
+      const longTabs: Tab[] = [
+        { key: '0', header: 'ThisIsAVeryLongHeaderThatShouldBeTruncated' },
+        { key: '1', header: 'AnotherVeryLongHeader' },
+      ];
+      const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
+        <TabHeader tabs={longTabs} currentIndex={0} />,
+      );
+      await waitUntilReady();
+      const frame = lastFrame();
+
+      // Current tab (index 0) should NOT be truncated
+      expect(frame).toContain('ThisIsAVeryLongHeaderThatShouldBeTruncated');
+
+      // Inactive tab (index 1) SHOULD be truncated to 16 chars (15 chars + …)
+      const expectedTruncated = 'AnotherVeryLong…';
+      expect(frame).toContain(expectedTruncated);
+      expect(frame).not.toContain('AnotherVeryLongHeader');
+
+      unmount();
+    });
+
     it('falls back to default when renderStatusIcon returns undefined', async () => {
       const renderStatusIcon = () => undefined;
       const { lastFrame, waitUntilReady, unmount } = renderWithProviders(

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

@@ -94,16 +94,19 @@ export function TabHeader({
           {showStatusIcons && (
             <Text color={theme.text.secondary}>{getStatusIcon(tab, i)} </Text>
           )}
-          <Text
-            color={
-              i === currentIndex ? theme.status.success : theme.text.secondary
-            }
-            bold={i === currentIndex}
-            underline={i === currentIndex}
-            aria-current={i === currentIndex ? 'step' : undefined}
-          >
-            {tab.header}
-          </Text>
+          <Box maxWidth={i !== currentIndex ? 16 : 100}>
+            <Text
+              color={
+                i === currentIndex ? theme.status.success : theme.text.secondary
+              }
+              bold={i === currentIndex}
+              underline={i === currentIndex}
+              aria-current={i === currentIndex ? 'step' : undefined}
+              wrap="truncate"
+            >
+              {tab.header}
+            </Text>
+          </Box>
         </React.Fragment>
       ))}
       {showArrows && <Text color={theme.text.secondary}>{' →'}</Text>}