From a69d114b1d602e575e02acb59566820841ffea19 Mon Sep 17 00:00:00 2001
From: "A.K.M. Adib" <adibakm@google.com>
Date: Fri, 13 Feb 2026 14:41:41 -0500
Subject: [PATCH] address feedback

---
 .../cli/src/ui/components/Composer.test.tsx   | 46 ++++++++++++++++
 packages/cli/src/ui/components/Composer.tsx   | 55 ++++++++++---------
 .../__snapshots__/Composer.test.tsx.snap      | 44 +++++++++++++++
 3 files changed, 120 insertions(+), 25 deletions(-)
 create mode 100644 packages/cli/src/ui/components/__snapshots__/Composer.test.tsx.snap

diff --git a/packages/cli/src/ui/components/Composer.test.tsx b/packages/cli/src/ui/components/Composer.test.tsx
index ba637b9cdc..29e077e126 100644
--- a/packages/cli/src/ui/components/Composer.test.tsx
+++ b/packages/cli/src/ui/components/Composer.test.tsx
@@ -954,4 +954,50 @@ describe('Composer', () => {
       expect(lastFrame()).not.toContain('ShortcutsHelp');
     });
   });
+
+  describe('Snapshots', () => {
+    it('matches snapshot in idle state', () => {
+      const uiState = createMockUIState();
+      const { lastFrame } = renderComposer(uiState);
+      expect(lastFrame()).toMatchSnapshot();
+    });
+
+    it('matches snapshot while streaming', () => {
+      const uiState = createMockUIState({
+        streamingState: StreamingState.Responding,
+        thought: {
+          subject: 'Thinking',
+          description: 'Thinking about the meaning of life...',
+        },
+      });
+      const { lastFrame } = renderComposer(uiState);
+      expect(lastFrame()).toMatchSnapshot();
+    });
+
+    it('matches snapshot in narrow view', () => {
+      const uiState = createMockUIState({
+        terminalWidth: 40,
+      });
+      const { lastFrame } = renderComposer(uiState);
+      expect(lastFrame()).toMatchSnapshot();
+    });
+
+    it('matches snapshot in minimal UI mode', () => {
+      const uiState = createMockUIState({
+        cleanUiDetailsVisible: false,
+      });
+      const { lastFrame } = renderComposer(uiState);
+      expect(lastFrame()).toMatchSnapshot();
+    });
+
+    it('matches snapshot in minimal UI mode while loading', () => {
+      const uiState = createMockUIState({
+        cleanUiDetailsVisible: false,
+        streamingState: StreamingState.Responding,
+        elapsedTime: 1000,
+      });
+      const { lastFrame } = renderComposer(uiState);
+      expect(lastFrame()).toMatchSnapshot();
+    });
+  });
 });
diff --git a/packages/cli/src/ui/components/Composer.tsx b/packages/cli/src/ui/components/Composer.tsx
index f8f105b623..1905f7798b 100644
--- a/packages/cli/src/ui/components/Composer.tsx
+++ b/packages/cli/src/ui/components/Composer.tsx
@@ -141,8 +141,7 @@ export const Composer = ({ isFocused = true }: { isFocused?: boolean }) => {
     settings.merged.ui.showShortcutsHint &&
     !hideShortcutsHintForSuggestions &&
     !hideMinimalModeHintWhileBusy &&
-    !hasPendingActionRequired &&
-    (!showUiDetails || !showLoadingIndicator);
+    !hasPendingActionRequired;
   const showMinimalModeBleedThrough =
     !hideUiDetailsForSuggestions && Boolean(minimalModeBleedThrough);
   const showMinimalInlineLoading = !showUiDetails && showLoadingIndicator;
@@ -185,6 +184,35 @@ export const Composer = ({ isFocused = true }: { isFocused?: boolean }) => {
           alignItems={isNarrow ? 'flex-start' : 'center'}
           justifyContent={isNarrow ? 'flex-start' : 'space-between'}
         >
+          <Box
+            marginLeft={1}
+            marginRight={isNarrow ? 0 : 1}
+            flexDirection="row"
+            alignItems={isNarrow ? 'flex-start' : 'center'}
+            flexGrow={1}
+          >
+            {showUiDetails && showLoadingIndicator && (
+              <LoadingIndicator
+                inline
+                thought={
+                  uiState.streamingState ===
+                    StreamingState.WaitingForConfirmation ||
+                  config.getAccessibility()?.enableLoadingPhrases === false
+                    ? undefined
+                    : uiState.thought
+                }
+                currentLoadingPhrase={
+                  config.getAccessibility()?.enableLoadingPhrases === false
+                    ? undefined
+                    : uiState.currentLoadingPhrase
+                }
+                thoughtLabel={
+                  inlineThinkingMode === 'full' ? 'Thinking ...' : undefined
+                }
+                elapsedTime={uiState.elapsedTime}
+              />
+            )}
+          </Box>
           <Box
             marginTop={isNarrow ? 1 : 0}
             flexDirection="column"
@@ -275,29 +303,6 @@ export const Composer = ({ isFocused = true }: { isFocused?: boolean }) => {
           </Box>
         )}
         {showShortcutsHelp && <ShortcutsHelp />}
-        {showUiDetails && showLoadingIndicator && (
-          <Box marginLeft={1} marginBottom={1}>
-            <LoadingIndicator
-              inline
-              thought={
-                uiState.streamingState ===
-                  StreamingState.WaitingForConfirmation ||
-                config.getAccessibility()?.enableLoadingPhrases === false
-                  ? undefined
-                  : uiState.thought
-              }
-              currentLoadingPhrase={
-                config.getAccessibility()?.enableLoadingPhrases === false
-                  ? undefined
-                  : uiState.currentLoadingPhrase
-              }
-              thoughtLabel={
-                inlineThinkingMode === 'full' ? 'Thinking ...' : undefined
-              }
-              elapsedTime={uiState.elapsedTime}
-            />
-          </Box>
-        )}
         {showUiDetails && <HorizontalLine />}
         {showUiDetails && (
           <Box
diff --git a/packages/cli/src/ui/components/__snapshots__/Composer.test.tsx.snap b/packages/cli/src/ui/components/__snapshots__/Composer.test.tsx.snap
new file mode 100644
index 0000000000..eb3e0096c5
--- /dev/null
+++ b/packages/cli/src/ui/components/__snapshots__/Composer.test.tsx.snap
@@ -0,0 +1,44 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Composer > Snapshots > matches snapshot in idle state 1`] = `
+"
+                                                                                       ShortcutsHint
+────────────────────────────────────────────────────────────────────────────────────────────────────
+ ApprovalModeIndicator                                                                 StatusDisplay
+InputPrompt:   Type your message or @path/to/file
+Footer"
+`;
+
+exports[`Composer > Snapshots > matches snapshot in minimal UI mode 1`] = `
+"
+                                                                                       ShortcutsHint
+InputPrompt:   Type your message or @path/to/file"
+`;
+
+exports[`Composer > Snapshots > matches snapshot in minimal UI mode while loading 1`] = `
+"
+ LoadingIndicator
+InputPrompt:   Type your message or @path/to/file"
+`;
+
+exports[`Composer > Snapshots > matches snapshot in narrow view 1`] = `
+"
+
+ShortcutsHint
+────────────────────────────────────────
+ ApprovalModeIndicator
+
+StatusDisplay
+InputPrompt:   Type your message or
+@path/to/file
+Footer"
+`;
+
+exports[`Composer > Snapshots > matches snapshot while streaming 1`] = `
+"
+ LoadingIndicator: Thinking                                                            ShortcutsHint
+────────────────────────────────────────────────────────────────────────────────────────────────────
+ ApprovalModeIndicator
+InputPrompt:   Type your message or @path/to/file
+Footer"
+`;