feat(cli): full drawer collapse during tool approval and compact context summary

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

@@ -457,9 +457,8 @@ describe('Composer', () => {
 
       const { lastFrame } = await renderComposer(uiState);
 
-      const output = lastFrame();
-      expect(output).not.toContain('LoadingIndicator');
-      expect(output).not.toContain('esc to cancel');
+      const output = lastFrame({ allowEmpty: true });
+      expect(output).toBe('');
     });
 
     it('renders LoadingIndicator when embedded shell is focused but background shell is visible', async () => {
@@ -712,9 +711,7 @@ describe('Composer', () => {
       });
 
       const { lastFrame } = await renderComposer(uiState);
-      const output = lastFrame();
-      expect(output).not.toContain('plan');
-      expect(output).not.toContain('ShortcutsHint');
+      expect(lastFrame({ allowEmpty: true })).toBe('');
     });
 
     it('shows Esc rewind prompt in minimal mode without showing full UI', async () => {
@@ -867,9 +864,10 @@ describe('Composer', () => {
         ),
       });
 
-      const { lastFrame } = await renderComposer(uiState);
+      const { lastFrame, unmount } = await renderComposer(uiState);
 
-      expect(lastFrame()).not.toContain('ShortcutsHint');
+      expect(lastFrame({ allowEmpty: true })).toBe('');
+      unmount();
     });
 
     it('keeps shortcuts hint visible when no action is required', async () => {
@@ -1003,24 +1001,22 @@ describe('Composer', () => {
       expect(lastFrame()).not.toContain('ShortcutsHelp');
       unmount();
     });
-
     it('hides shortcuts help when action is required', async () => {
       const uiState = createMockUIState({
         shortcutsHelpVisible: true,
         customDialog: (
           <Box>
-            <Text>Dialog content</Text>
+            <Text>Test Dialog</Text>
           </Box>
         ),
       });
 
       const { lastFrame, unmount } = await renderComposer(uiState);
 
-      expect(lastFrame()).not.toContain('ShortcutsHelp');
+      expect(lastFrame({ allowEmpty: true })).toBe('');
       unmount();
     });
   });
-
   describe('Snapshots', () => {
     it('matches snapshot in idle state', async () => {
       const uiState = createMockUIState();

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

@@ -91,6 +91,7 @@ export const Composer = ({ isFocused = true }: { isFocused?: boolean }) => {
     Boolean(uiState.quota.proQuotaRequest) ||
     Boolean(uiState.quota.validationRequest) ||
     Boolean(uiState.customDialog);
+
   const isPassiveShortcutsHelpState =
     uiState.isInputActive &&
     uiState.streamingState === StreamingState.Idle &&
@@ -180,6 +181,13 @@ export const Composer = ({ isFocused = true }: { isFocused?: boolean }) => {
     return () => clearTimeout(timeout);
   }, [canShowShortcutsHint]);
 
+  if (
+    hasPendingActionRequired &&
+    settings.merged.ui.collapseDrawerDuringApproval
+  ) {
+    return null;
+  }
+
   const showShortcutsHint =
     settings.merged.ui.showShortcutsHint &&
     !hideShortcutsHintForSuggestions &&
@@ -751,8 +759,6 @@ export const Composer = ({ isFocused = true }: { isFocused?: boolean }) => {
 
       {showUiDetails &&
         !settings.merged.ui.hideFooter &&
-        (!hasPendingActionRequired ||
-          !settings.merged.ui.hideFooterDuringApproval) &&
         !isScreenReaderEnabled && <Footer />}
     </Box>
   );

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

@@ -78,32 +78,6 @@ describe('<ContextSummaryDisplay />', () => {
     unmount();
   });
 
-  it('should switch layout at the 80-column breakpoint', async () => {
-    const props = {
-      ...baseProps,
-      geminiMdFileCount: 1,
-      contextFileNames: ['GEMINI.md'],
-      mcpServers: { 'test-server': { command: 'test' } },
-      ideContext: {
-        workspaceState: {
-          openFiles: [{ path: '/a/b/c', timestamp: Date.now() }],
-        },
-      },
-    };
-
-    // At 80 columns, should be on one line
-    const { lastFrame: wideFrame, unmount: unmountWide } =
-      await renderWithWidth(80, props);
-    expect(wideFrame().trim().includes('\n')).toBe(false);
-    unmountWide();
-
-    // At 79 columns, should be on multiple lines
-    const { lastFrame: narrowFrame, unmount: unmountNarrow } =
-      await renderWithWidth(79, props);
-    expect(narrowFrame().trim().includes('\n')).toBe(true);
-    expect(narrowFrame().trim().split('\n').length).toBe(4);
-    unmountNarrow();
-  });
   it('should not render empty parts', async () => {
     const props = {
       ...baseProps,

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

@@ -8,8 +8,6 @@ import type React from 'react';
 import { Box, Text } from 'ink';
 import { theme } from '../semantic-colors.js';
 import { type IdeContext, type MCPServerConfig } from '@google/gemini-cli-core';
-import { useTerminalSize } from '../hooks/useTerminalSize.js';
-import { isNarrowWidth } from '../utils/isNarrowWidth.js';
 
 interface ContextSummaryDisplayProps {
   geminiMdFileCount: number;
@@ -30,8 +28,6 @@ export const ContextSummaryDisplay: React.FC<ContextSummaryDisplayProps> = ({
   skillCount,
   backgroundProcessCount = 0,
 }) => {
-  const { columns: terminalWidth } = useTerminalSize();
-  const isNarrow = isNarrowWidth(terminalWidth);
   const mcpServerCount = Object.keys(mcpServers || {}).length;
   const blockedMcpServerCount = blockedMcpServers?.length || 0;
   const openFileCount = ideContext?.workspaceState?.openFiles?.length ?? 0;
@@ -113,21 +109,14 @@ export const ContextSummaryDisplay: React.FC<ContextSummaryDisplayProps> = ({
     backgroundText,
   ].filter(Boolean);
 
-  if (isNarrow) {
-    return (
-      <Box flexDirection="column" paddingX={1}>
-        {summaryParts.map((part, index) => (
-          <Text key={index} color={theme.text.secondary}>
-            - {part}
-          </Text>
-        ))}
-      </Box>
-    );
-  }
-
   return (
-    <Box paddingX={1}>
-      <Text color={theme.text.secondary}>{summaryParts.join(' | ')}</Text>
+    <Box paddingX={1} flexDirection="row" flexWrap="wrap">
+      {summaryParts.map((part, index) => (
+        <Box key={index} flexDirection="row">
+          {index > 0 && <Text color={theme.text.secondary}>{' · '}</Text>}
+          <Text color={theme.text.secondary}>{part}</Text>
+        </Box>
+      ))}
     </Box>
   );
 };

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

@@ -1,19 +1,16 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<ContextSummaryDisplay /> > should not render empty parts 1`] = `
-" - 1 open file (ctrl+g to view)
+" 1 open file (ctrl+g to view)
 "
 `;
 
 exports[`<ContextSummaryDisplay /> > should render on a single line on a wide screen 1`] = `
-" 1 open file (ctrl+g to view) | 1 GEMINI.md file | 1 MCP server | 1 skill
+" 1 open file (ctrl+g to view) · 1 GEMINI.md file · 1 MCP server · 1 skill
 "
 `;
 
 exports[`<ContextSummaryDisplay /> > should render on multiple lines on a narrow screen 1`] = `
-" - 1 open file (ctrl+g to view)
- - 1 GEMINI.md file
- - 1 MCP server
- - 1 skill
+" 1 open file (ctrl+g to view) · 1 GEMINI.md file · 1 MCP server · 1 skill
 "
 `;