MediaMetz/gemini-cli
1
0
Fork 0
mirror of https://github.com/google-gemini/gemini-cli.git synced 2026-04-02 01:11:24 -07:00
Code Issues Packages Projects Releases Wiki Activity

chore: sync with latest stable-footer-ux changes

Browse Source
This commit is contained in:
Keith Guerin
2026-03-02 00:03:43 -08:00
parent 2ebe51cf0d 7ce6bf7b28
commit f7fbb8cf8e
18 changed files with 158 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/cli/src/config/settingsSchema.ts
View File

@@ -639,6 +639,16 @@ const SETTINGS_SCHEMA = {
description: 'Hide the footer from the UI',
showInDialog: true,
},
collapseDrawerDuringApproval: {
type: 'boolean',
label: 'Collapse Drawer During Approval',
category: 'UI',
requiresRestart: false,
default: true,
description:
'Collapse the entire drawer (status, context, input, footer) when a tool approval request is displayed.',
showInDialog: true,
},
newFooterLayout: {
type: 'enum',
label: 'New Footer Layout',

3
packages/cli/src/test-utils/AppRig.tsx
View File

@@ -264,6 +264,9 @@ export class AppRig {
enabled: false,
hasSeenNudge: true,
},
ui: {
collapseDrawerDuringApproval: false,
},
},
});
}

2
packages/cli/src/ui/__snapshots__/App.test.tsx.snap
View File

@@ -130,7 +130,7 @@ HistoryItemDisplay
│ Allow execution of: 'ls'? │
│ │
│ ● 1. Allow once │
│ 2. Allow for this session │
│ 2. Allow for this session Enter to select · ↑/↓ to navigate · Esc to cancel │
│ 3. No, suggest changes (esc) │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯

22
packages/cli/src/ui/components/Composer.test.tsx
View File

@@ -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 () => {
@@ -564,7 +563,7 @@ describe('Composer', () => {
const output = lastFrame();
expect(output).toContain('ToastDisplay');
expect(output).not.toContain('ApprovalModeIndicator');
expect(output).toContain('StatusDisplay');
expect(output).not.toContain('StatusDisplay');
});
it('shows ToastDisplay for other toast types', 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();

88
packages/cli/src/ui/components/Composer.tsx
View File

@@ -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 &&
@@ -518,28 +526,20 @@ export const Composer = ({ isFocused = true }: { isFocused?: boolean }) => {
{showShortcutsHelp && <ShortcutsHelp />}
{showUiDetails && (
<Box
justifyContent={
settings.merged.ui.hideContextSummary
? 'flex-start'
: 'space-between'
}
width="100%"
flexDirection={isNarrow ? 'column' : 'row'}
alignItems={isNarrow ? 'flex-start' : 'center'}
flexDirection="row"
flexWrap="wrap"
alignItems="center"
marginLeft={1}
>
<Box
marginLeft={1}
marginRight={isNarrow ? 0 : 1}
flexDirection="row"
alignItems="center"
flexGrow={1}
>
{hasToast ? (
<ToastDisplay />
) : (
{hasToast ? (
<ToastDisplay />
) : (
<>
<Box
flexDirection={isNarrow ? 'column' : 'row'}
alignItems={isNarrow ? 'flex-start' : 'center'}
flexDirection="row"
alignItems="center"
flexWrap="wrap"
>
{showApprovalIndicator && (
<ApprovalModeIndicator
@@ -550,52 +550,30 @@ export const Composer = ({ isFocused = true }: { isFocused?: boolean }) => {
{!showLoadingIndicator && (
<>
{uiState.shellModeActive && (
<Box
marginLeft={
showApprovalIndicator && !isNarrow ? 1 : 0
}
marginTop={
showApprovalIndicator && isNarrow ? 1 : 0
}
>
<Box marginLeft={1}>
<ShellModeIndicator />
</Box>
)}
{showRawMarkdownIndicator && (
<Box
marginLeft={
(showApprovalIndicator ||
uiState.shellModeActive) &&
!isNarrow
? 1
: 0
}
marginTop={
(showApprovalIndicator ||
uiState.shellModeActive) &&
isNarrow
? 1
: 0
}
>
<Box marginLeft={1}>
<RawMarkdownIndicator />
</Box>
)}
</>
)}
</Box>
)}
</Box>
<Box
marginTop={isNarrow ? 1 : 0}
flexDirection="column"
alignItems={isNarrow ? 'flex-start' : 'flex-end'}
>
{!showLoadingIndicator && (
<StatusDisplay hideContextSummary={hideContextSummary} />
)}
</Box>
{!showLoadingIndicator && (
<>
<Box marginLeft={1}>
<Text color={theme.text.secondary}>·</Text>
</Box>
<StatusDisplay
hideContextSummary={hideContextSummary}
/>
</>
)}
</>
)}
</Box>
)}
</Box>

7
packages/cli/src/ui/components/ConsentPrompt.tsx
View File

@@ -9,6 +9,7 @@ import { type ReactNode } from 'react';
import { theme } from '../semantic-colors.js';
import { MarkdownDisplay } from '../utils/MarkdownDisplay.js';
import { RadioButtonSelect } from './shared/RadioButtonSelect.js';
import { DialogFooter } from './shared/DialogFooter.js';
type ConsentPromptProps = {
// If a simple string is given, it will render using markdown by default.
@@ -37,7 +38,7 @@ export const ConsentPrompt = (props: ConsentPromptProps) => {
) : (
prompt
)}
<Box marginTop={1}>
<Box marginTop={1} flexDirection="column">
<RadioButtonSelect
items={[
{ label: 'Yes', value: true, key: 'Yes' },
@@ -45,6 +46,10 @@ export const ConsentPrompt = (props: ConsentPromptProps) => {
]}
onSelect={onConfirm}
/>
<DialogFooter
primaryAction="Enter to select"
navigationActions="↑/↓ to navigate"
/>
</Box>
</Box>
);

26
packages/cli/src/ui/components/ContextSummaryDisplay.test.tsx
View File

@@ -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,

27
packages/cli/src/ui/components/ContextSummaryDisplay.tsx
View File

@@ -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;
@@ -44,7 +40,7 @@ export const ContextSummaryDisplay: React.FC<ContextSummaryDisplayProps> = ({
skillCount === 0 &&
backgroundProcessCount === 0
) {
return <Text> </Text>; // Render an empty space to reserve height
return null;
}
const openFilesText = (() => {
@@ -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>
);
};

6
packages/cli/src/ui/components/__snapshots__/Composer.test.tsx.snap
View File

@@ -2,7 +2,7 @@
exports[`Composer > Snapshots > matches snapshot in idle state 1`] = `
" ShortcutsHint
ApprovalModeIndicator StatusDisplay
ApprovalModeIndicator ·StatusDisplay
InputPrompt: Type your message or @path/to/file
Footer
"
@@ -23,9 +23,7 @@ InputPrompt: Type your message or @path/to/file
exports[`Composer > Snapshots > matches snapshot in narrow view 1`] = `
"
ShortcutsHint
ApprovalModeIndicator
StatusDisplay
ApprovalModeIndicator ·StatusDisplay
InputPrompt: Type your message or
@path/to/file
Footer

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

@@ -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
"
`;

16
packages/cli/src/ui/components/__snapshots__/ToolConfirmationQueue.test.tsx.snap
View File

@@ -11,8 +11,8 @@ exports[`ToolConfirmationQueue > calculates availableContentHeight based on avai
│ Apply this change? │
│ │
│ ● 1. Allow once │
│ 2. Allow for this session │
│ 3. Modify with external editor │
│ 2. Allow for this session Enter to select · ↑/↓ to navigate · Esc to │
│ 3. Modify with external edi…cancel │
│ 4. No, suggest changes (esc) │
│ │
╰──────────────────────────────────────────────────────────────────────────────╯
@@ -33,8 +33,8 @@ exports[`ToolConfirmationQueue > does not render expansion hint when constrainHe
│ Apply this change? │
│ │
│ ● 1. Allow once │
│ 2. Allow for this session │
│ 3. Modify with external editor │
│ 2. Allow for this session Enter to select · ↑/↓ to navigate · Esc to │
│ 3. Modify with external edi…cancel │
│ 4. No, suggest changes (esc) │
│ │
╰──────────────────────────────────────────────────────────────────────────────╯
@@ -101,8 +101,8 @@ exports[`ToolConfirmationQueue > renders expansion hint when content is long and
│ Apply this change? │
│ │
│ ● 1. Allow once │
│ 2. Allow for this session │
│ 3. Modify with external editor │
│ 2. Allow for this session Enter to select · ↑/↓ to navigate · Esc to │
│ 3. Modify with external edi…cancel │
│ 4. No, suggest changes (esc) │
│ │
╰──────────────────────────────────────────────────────────────────────────────╯
@@ -120,8 +120,8 @@ exports[`ToolConfirmationQueue > renders the confirming tool with progress indic
│ Allow execution of: 'ls'? │
│ │
│ ● 1. Allow once │
│ 2. Allow for this session │
│ 3. No, suggest changes (esc) │
│ 2. Allow for this session Enter to select · ↑/↓ to navigate · Esc to │
│ 3. No, suggest changes (e… cancel │
│ │
╰──────────────────────────────────────────────────────────────────────────────╯
"

4
packages/cli/src/ui/components/messages/ToolConfirmationMessage.test.tsx
View File

@@ -574,7 +574,7 @@ describe('ToolConfirmationMessage', () => {
const output = lastFrame();
expect(output).toContain('MCP Tool Details:');
expect(output).toContain('(press Ctrl+O to expand MCP tool details)');
expect(output).toContain('Ctrl+O to expand details');
expect(output).not.toContain('https://www.google.co.jp');
expect(output).not.toContain('Navigates browser to a URL.');
unmount();
@@ -606,7 +606,7 @@ describe('ToolConfirmationMessage', () => {
const output = lastFrame();
expect(output).toContain('MCP Tool Details:');
expect(output).toContain('(press Ctrl+O to expand MCP tool details)');
expect(output).toContain('Ctrl+O to expand details');
expect(output).not.toContain('Invocation Arguments:');
unmount();
});

26
packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx
View File

@@ -40,6 +40,7 @@ import {
import { AskUserDialog } from '../AskUserDialog.js';
import { ExitPlanModeDialog } from '../ExitPlanModeDialog.js';
import { WarningMessage } from './WarningMessage.js';
import { DialogFooter } from '../shared/DialogFooter.js';
import {
getDeceptiveUrlDetails,
toUnicodeUrl,
@@ -603,17 +604,8 @@ export const ToolConfirmationMessage: React.FC<
{hasMcpToolDetails && (
<Box flexDirection="column" marginTop={1}>
<Text color={theme.text.primary}>MCP Tool Details:</Text>
{isMcpToolDetailsExpanded ? (
<>
<Text color={theme.text.secondary}>
(press {expandDetailsHintKey} to collapse MCP tool details)
</Text>
<Text color={theme.text.link}>{mcpToolDetailsText}</Text>
</>
) : (
<Text color={theme.text.secondary}>
(press {expandDetailsHintKey} to expand MCP tool details)
</Text>
{isMcpToolDetailsExpanded && (
<Text color={theme.text.link}>{mcpToolDetailsText}</Text>
)}
</Box>
)}
@@ -632,7 +624,6 @@ export const ToolConfirmationMessage: React.FC<
isMcpToolDetailsExpanded,
hasMcpToolDetails,
mcpToolDetailsText,
expandDetailsHintKey,
getPreferredEditor,
]);
@@ -698,6 +689,17 @@ export const ToolConfirmationMessage: React.FC<
onSelect={handleSelect}
isFocused={isFocused}
/>
<DialogFooter
primaryAction="Enter to select"
navigationActions="↑/↓ to navigate"
extraParts={
hasMcpToolDetails
? [
`${expandDetailsHintKey} to ${isMcpToolDetailsExpanded ? 'collapse' : 'expand'} details`,
]
: []
}
/>
</Box>
</>
)}

2
packages/cli/src/ui/components/messages/__snapshots__/RedirectionConfirmation.test.tsx.snap
View File

@@ -8,7 +8,7 @@ Tip: Toggle auto-edit (Shift+Tab) to allow redirection in the future.
Allow execution of: 'echo, redirection (>)'?
● 1. Allow once
2. Allow for this session
2. Allow for this session Enter to select · ↑/↓ to navigate · Esc to cancel
3. No, suggest changes (esc)
"
`;

24
packages/cli/src/ui/components/messages/__snapshots__/ToolConfirmationMessage.test.tsx.snap
View File

@@ -7,7 +7,7 @@ whoami
Allow execution of 3 commands?
● 1. Allow once
2. Allow for this session
2. Allow for this session Enter to select · ↑/↓ to navigate · Esc to cancel
3. No, suggest changes (esc)
"
`;
@@ -20,7 +20,7 @@ URLs to fetch:
Do you want to proceed?
● 1. Allow once
2. Allow for this session
2. Allow for this session Enter to select · ↑/↓ to navigate · Esc to cancel
3. No, suggest changes (esc)
"
`;
@@ -30,7 +30,7 @@ exports[`ToolConfirmationMessage > should not display urls if prompt and url are
Do you want to proceed?
● 1. Allow once
2. Allow for this session
2. Allow for this session Enter to select · ↑/↓ to navigate · Esc to cancel
3. No, suggest changes (esc)
"
`;
@@ -41,7 +41,7 @@ Tool: testtool
Allow execution of MCP tool "testtool" from server "testserver"?
● 1. Allow once
2. Allow tool for this session
2. Allow tool for this session Enter to select · ↑/↓ to navigate · Esc to cancel
3. Allow all server tools for this session
4. No, suggest changes (esc)
"
@@ -56,7 +56,7 @@ exports[`ToolConfirmationMessage > with folder trust > 'for edit confirmations'
Apply this change?
● 1. Allow once
2. Modify with external editor
2. Modify with external editorEnter to select · ↑/↓ to navigate · Esc to cancel
3. No, suggest changes (esc)
"
`;
@@ -70,7 +70,7 @@ exports[`ToolConfirmationMessage > with folder trust > 'for edit confirmations'
Apply this change?
● 1. Allow once
2. Allow for this session
2. Allow for this session Enter to select · ↑/↓ to navigate · Esc to cancel
3. Modify with external editor
4. No, suggest changes (esc)
"
@@ -81,7 +81,7 @@ exports[`ToolConfirmationMessage > with folder trust > 'for exec confirmations'
Allow execution of: 'echo'?
● 1. Allow once
2. No, suggest changes (esc)
2. No, suggest changes (esc)Enter to select · ↑/↓ to navigate · Esc to cancel
"
`;
@@ -90,7 +90,7 @@ exports[`ToolConfirmationMessage > with folder trust > 'for exec confirmations'
Allow execution of: 'echo'?
● 1. Allow once
2. Allow for this session
2. Allow for this session Enter to select · ↑/↓ to navigate · Esc to cancel
3. No, suggest changes (esc)
"
`;
@@ -100,7 +100,7 @@ exports[`ToolConfirmationMessage > with folder trust > 'for info confirmations'
Do you want to proceed?
● 1. Allow once
2. No, suggest changes (esc)
2. No, suggest changes (esc)Enter to select · ↑/↓ to navigate · Esc to cancel
"
`;
@@ -109,7 +109,7 @@ exports[`ToolConfirmationMessage > with folder trust > 'for info confirmations'
Do you want to proceed?
● 1. Allow once
2. Allow for this session
2. Allow for this session Enter to select · ↑/↓ to navigate · Esc to cancel
3. No, suggest changes (esc)
"
`;
@@ -120,7 +120,7 @@ Tool: test-tool
Allow execution of MCP tool "test-tool" from server "test-server"?
● 1. Allow once
2. No, suggest changes (esc)
2. No, suggest changes (esc)Enter to select · ↑/↓ to navigate · Esc to cancel
"
`;
@@ -130,7 +130,7 @@ Tool: test-tool
Allow execution of MCP tool "test-tool" from server "test-server"?
● 1. Allow once
2. Allow tool for this session
2. Allow tool for this session Enter to select · ↑/↓ to navigate · Esc to cancel
3. Allow all server tools for this session
4. No, suggest changes (esc)
"