From de938a04837ee63f136760cf86ca46f9b5d429db Mon Sep 17 00:00:00 2001
From: "A.K.M. Adib" <adibakm@google.com>
Date: Thu, 12 Feb 2026 16:05:27 -0500
Subject: [PATCH] complete

---
 .../cli/src/ui/components/Composer.test.tsx   |  17 +++
 packages/cli/src/ui/components/Composer.tsx   | 136 +++++++++---------
 2 files changed, 85 insertions(+), 68 deletions(-)

diff --git a/packages/cli/src/ui/components/Composer.test.tsx b/packages/cli/src/ui/components/Composer.test.tsx
index 353e1ad535..ba637b9cdc 100644
--- a/packages/cli/src/ui/components/Composer.test.tsx
+++ b/packages/cli/src/ui/components/Composer.test.tsx
@@ -455,6 +455,23 @@ describe('Composer', () => {
       expect(output).toContain('LoadingIndicator');
     });
 
+    it('renders both LoadingIndicator and ApprovalModeIndicator when streaming in full UI mode', () => {
+      const uiState = createMockUIState({
+        streamingState: StreamingState.Responding,
+        thought: {
+          subject: 'Thinking',
+          description: '',
+        },
+        showApprovalModeIndicator: ApprovalMode.PLAN,
+      });
+
+      const { lastFrame } = renderComposer(uiState);
+
+      const output = lastFrame();
+      expect(output).toContain('LoadingIndicator: Thinking');
+      expect(output).toContain('ApprovalModeIndicator');
+    });
+
     it('does NOT render LoadingIndicator when embedded shell is focused and background shell is NOT visible', () => {
       const uiState = createMockUIState({
         streamingState: StreamingState.Responding,
diff --git a/packages/cli/src/ui/components/Composer.tsx b/packages/cli/src/ui/components/Composer.tsx
index 8101e7303c..f8f105b623 100644
--- a/packages/cli/src/ui/components/Composer.tsx
+++ b/packages/cli/src/ui/components/Composer.tsx
@@ -185,35 +185,6 @@ 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="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"
@@ -304,6 +275,29 @@ 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
@@ -326,45 +320,51 @@ export const Composer = ({ isFocused = true }: { isFocused?: boolean }) => {
               {hasToast ? (
                 <ToastDisplay />
               ) : (
-                !showLoadingIndicator && (
-                  <Box
-                    flexDirection={isNarrow ? 'column' : 'row'}
-                    alignItems={isNarrow ? 'flex-start' : 'center'}
-                  >
-                    {showApprovalIndicator && (
-                      <ApprovalModeIndicator
-                        approvalMode={showApprovalModeIndicator}
-                        isPlanEnabled={config.isPlanEnabled()}
-                      />
-                    )}
-                    {uiState.shellModeActive && (
-                      <Box
-                        marginLeft={showApprovalIndicator && !isNarrow ? 1 : 0}
-                        marginTop={showApprovalIndicator && isNarrow ? 1 : 0}
-                      >
-                        <ShellModeIndicator />
-                      </Box>
-                    )}
-                    {showRawMarkdownIndicator && (
-                      <Box
-                        marginLeft={
-                          (showApprovalIndicator || uiState.shellModeActive) &&
-                          !isNarrow
-                            ? 1
-                            : 0
-                        }
-                        marginTop={
-                          (showApprovalIndicator || uiState.shellModeActive) &&
-                          isNarrow
-                            ? 1
-                            : 0
-                        }
-                      >
-                        <RawMarkdownIndicator />
-                      </Box>
-                    )}
-                  </Box>
-                )
+                <Box
+                  flexDirection={isNarrow ? 'column' : 'row'}
+                  alignItems={isNarrow ? 'flex-start' : 'center'}
+                >
+                  {showApprovalIndicator && (
+                    <ApprovalModeIndicator
+                      approvalMode={showApprovalModeIndicator}
+                      isPlanEnabled={config.isPlanEnabled()}
+                    />
+                  )}
+                  {!showLoadingIndicator && (
+                    <>
+                      {uiState.shellModeActive && (
+                        <Box
+                          marginLeft={
+                            showApprovalIndicator && !isNarrow ? 1 : 0
+                          }
+                          marginTop={showApprovalIndicator && isNarrow ? 1 : 0}
+                        >
+                          <ShellModeIndicator />
+                        </Box>
+                      )}
+                      {showRawMarkdownIndicator && (
+                        <Box
+                          marginLeft={
+                            (showApprovalIndicator ||
+                              uiState.shellModeActive) &&
+                            !isNarrow
+                              ? 1
+                              : 0
+                          }
+                          marginTop={
+                            (showApprovalIndicator ||
+                              uiState.shellModeActive) &&
+                            isNarrow
+                              ? 1
+                              : 0
+                          }
+                        >
+                          <RawMarkdownIndicator />
+                        </Box>
+                      )}
+                    </>
+                  )}
+                </Box>
               )}
             </Box>