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'}
>
-
- {showUiDetails && showLoadingIndicator && (
-
- )}
-
{
)}
{showShortcutsHelp && }
+ {showUiDetails && showLoadingIndicator && (
+
+
+
+ )}
{showUiDetails && }
{showUiDetails && (
{
{hasToast ? (
) : (
- !showLoadingIndicator && (
-
- {showApprovalIndicator && (
-
- )}
- {uiState.shellModeActive && (
-
-
-
- )}
- {showRawMarkdownIndicator && (
-
-
-
- )}
-
- )
+
+ {showApprovalIndicator && (
+
+ )}
+ {!showLoadingIndicator && (
+ <>
+ {uiState.shellModeActive && (
+
+
+
+ )}
+ {showRawMarkdownIndicator && (
+
+
+
+ )}
+ >
+ )}
+
)}