fix(ui): Truncate long loading text (#9768)

packages/cli/src/ui/components/LoadingIndicator.test.tsx

@@ -233,6 +233,21 @@ describe('<LoadingIndicator />', () => {
     expect(output).not.toContain('This should not be displayed');
   });
 
+  it('should truncate long primary text instead of wrapping', () => {
+    const { lastFrame } = renderWithContext(
+      <LoadingIndicator
+        {...defaultProps}
+        currentLoadingPhrase={
+          'This is an extremely long loading phrase that should be truncated in the UI to keep the primary line concise.'
+        }
+      />,
+      StreamingState.Responding,
+      80,
+    );
+
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
   describe('responsive layout', () => {
     it('should render on a single line on a wide terminal', () => {
       const { lastFrame } = renderWithContext(

packages/cli/src/ui/components/LoadingIndicator.tsx

@@ -61,7 +61,11 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
               }
             />
           </Box>
-          {primaryText && <Text color={theme.text.accent}>{primaryText}</Text>}
+          {primaryText && (
+            <Text color={theme.text.accent} wrap="truncate-end">
+              {primaryText}
+            </Text>
+          )}
           {!isNarrow && cancelAndTimerContent && (
             <Text color={theme.text.secondary}> {cancelAndTimerContent}</Text>
           )}

packages/cli/src/ui/components/__snapshots__/LoadingIndicator.test.tsx.snap

@@ -0,0 +1,6 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<LoadingIndicator /> > should truncate long primary text instead of wrapping 1`] = `
+"MockResponding This is an extremely long loading phrase that should be truncated in t (esc to
+Spinner                                                                              cancel, 5s)"
+`;