From d2d9ae3f91f07be9d61da246847d82ffb96027e7 Mon Sep 17 00:00:00 2001
From: Sandy Tao <sandytao520@icloud.com>
Date: Thu, 25 Sep 2025 11:33:06 -0700
Subject: [PATCH] fix(ui): Truncate long loading text (#9768)

---
 .../src/ui/components/LoadingIndicator.test.tsx   | 15 +++++++++++++++
 .../cli/src/ui/components/LoadingIndicator.tsx    |  6 +++++-
 .../__snapshots__/LoadingIndicator.test.tsx.snap  |  6 ++++++
 3 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 packages/cli/src/ui/components/__snapshots__/LoadingIndicator.test.tsx.snap

diff --git a/packages/cli/src/ui/components/LoadingIndicator.test.tsx b/packages/cli/src/ui/components/LoadingIndicator.test.tsx
index e55cc09070..1d1e89ba7f 100644
--- a/packages/cli/src/ui/components/LoadingIndicator.test.tsx
+++ b/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(
diff --git a/packages/cli/src/ui/components/LoadingIndicator.tsx b/packages/cli/src/ui/components/LoadingIndicator.tsx
index b6bb3a1a4b..ed089fe0fd 100644
--- a/packages/cli/src/ui/components/LoadingIndicator.tsx
+++ b/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>
           )}
diff --git a/packages/cli/src/ui/components/__snapshots__/LoadingIndicator.test.tsx.snap b/packages/cli/src/ui/components/__snapshots__/LoadingIndicator.test.tsx.snap
new file mode 100644
index 0000000000..3d472f97e2
--- /dev/null
+++ b/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)"
+`;