MediaMetz/gemini-cli
1
0
Fork 0
mirror of https://github.com/google-gemini/gemini-cli.git synced 2026-03-10 22:21:22 -07:00
Code Issues Packages Projects Releases Wiki Activity

Revert reducing margin on narrow screens (#10375)

Browse Source
This commit is contained in:
Billy Biggs
2025-10-01 14:50:33 -07:00
committed by GitHub
parent 6eca199c39
commit ef76a801c4
7 changed files with 74 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
packages/cli/src/ui/App.tsx
View File

@@ -5,34 +5,15 @@
*/
import { useIsScreenReaderEnabled } from 'ink';
import { useTerminalSize } from './hooks/useTerminalSize.js';
import { lerp } from '../utils/math.js';
import { useUIState } from './contexts/UIStateContext.js';
import { StreamingContext } from './contexts/StreamingContext.js';
import { QuittingDisplay } from './components/QuittingDisplay.js';
import { ScreenReaderAppLayout } from './layouts/ScreenReaderAppLayout.js';
import { DefaultAppLayout } from './layouts/DefaultAppLayout.js';
const getContainerWidth = (terminalWidth: number): string => {
if (terminalWidth <= 80) {
return '98%';
}
if (terminalWidth >= 132) {
return '90%';
}
// Linearly interpolate between 80 columns (98%) and 132 columns (90%).
const t = (terminalWidth - 80) / (132 - 80);
const percentage = lerp(98, 90, t);
return `${Math.round(percentage)}%`;
};
export const App = () => {
const uiState = useUIState();
const isScreenReaderEnabled = useIsScreenReaderEnabled();
const { columns } = useTerminalSize();
const containerWidth = getContainerWidth(columns);
if (uiState.quittingMessages) {
return <QuittingDisplay />;
@@ -40,11 +21,7 @@ export const App = () => {
return (
<StreamingContext.Provider value={uiState.streamingState}>
{isScreenReaderEnabled ? (
<ScreenReaderAppLayout />
) : (
<DefaultAppLayout width={containerWidth} />
)}
{isScreenReaderEnabled ? <ScreenReaderAppLayout /> : <DefaultAppLayout />}
</StreamingContext.Provider>
);
};

8
packages/cli/src/ui/components/ContextUsageDisplay.tsx
View File

@@ -11,21 +11,15 @@ import { tokenLimit } from '@google/gemini-cli-core';
export const ContextUsageDisplay = ({
promptTokenCount,
model,
terminalWidth,
}: {
promptTokenCount: number;
model: string;
terminalWidth: number;
}) => {
const percentage = promptTokenCount / tokenLimit(model);
const percentageLeft = ((1 - percentage) * 100).toFixed(0);
const label = terminalWidth < 100 ? '%' : '% context left';
return (
<Text color={theme.text.secondary}>
({percentageLeft}
{label})
({((1 - percentage) * 100).toFixed(0)}% context left)
</Text>
);
};

35
packages/cli/src/ui/components/Footer.test.tsx
View File

@@ -9,6 +9,7 @@ import { describe, it, expect, vi } from 'vitest';
import { Footer } from './Footer.js';
import * as useTerminalSize from '../hooks/useTerminalSize.js';
import { tildeifyPath } from '@google/gemini-cli-core';
import path from 'node:path';
import { type UIState, UIStateContext } from '../contexts/UIStateContext.js';
import { ConfigContext } from '../contexts/ConfigContext.js';
import { SettingsContext } from '../contexts/SettingsContext.js';
@@ -102,22 +103,34 @@ describe('<Footer />', () => {
});
describe('path display', () => {
it('should display a shortened path on a narrow terminal', () => {
const { lastFrame } = renderWithWidth(79, createMockUIState());
it('should display shortened path on a wide terminal', () => {
const { lastFrame } = renderWithWidth(120, createMockUIState());
const tildePath = tildeifyPath(defaultProps.targetDir);
const pathLength = Math.max(20, Math.floor(79 * 0.25));
const expectedPath =
'...' + tildePath.slice(tildePath.length - pathLength + 3);
const expectedPath = '...' + tildePath.slice(tildePath.length - 48 + 3);
expect(lastFrame()).toContain(expectedPath);
});
it('should display only the base directory name on a narrow terminal', () => {
const { lastFrame } = renderWithWidth(79, createMockUIState());
const expectedPath = path.basename(defaultProps.targetDir);
expect(lastFrame()).toContain(expectedPath);
});
it('should use wide layout at 80 columns', () => {
const { lastFrame } = renderWithWidth(80, createMockUIState());
const tildePath = tildeifyPath(defaultProps.targetDir);
const expectedPath =
'...' + tildePath.slice(tildePath.length - 80 * 0.25 + 3);
const expectedPath = '...' + tildePath.slice(tildePath.length - 32 + 3);
expect(lastFrame()).toContain(expectedPath);
});
it('should use narrow layout at 79 columns', () => {
const { lastFrame } = renderWithWidth(79, createMockUIState());
const expectedPath = path.basename(defaultProps.targetDir);
expect(lastFrame()).toContain(expectedPath);
const tildePath = tildeifyPath(defaultProps.targetDir);
const unexpectedPath = '...' + tildePath.slice(tildePath.length - 31 + 3);
expect(lastFrame()).not.toContain(unexpectedPath);
});
});
it('displays the branch name when provided', () => {
@@ -138,13 +151,7 @@ describe('<Footer />', () => {
it('displays the model name and context percentage', () => {
const { lastFrame } = renderWithWidth(120, createMockUIState());
expect(lastFrame()).toContain(defaultProps.model);
expect(lastFrame()).toMatch(/\(\d+% context left\)/);
});
it('displays the model name and abbreviated context percentage', () => {
const { lastFrame } = renderWithWidth(99, createMockUIState());
expect(lastFrame()).toContain(defaultProps.model);
expect(lastFrame()).toMatch(/\(\d+%\)/);
expect(lastFrame()).toMatch(/\(\d+% context[\s\S]*left\)/);
});
describe('sandbox and trust info', () => {

62
packages/cli/src/ui/components/Footer.tsx
View File

@@ -10,11 +10,14 @@ import { theme } from '../semantic-colors.js';
import { shortenPath, tildeifyPath } from '@google/gemini-cli-core';
import { ConsoleSummaryDisplay } from './ConsoleSummaryDisplay.js';
import process from 'node:process';
import path from 'node:path';
import Gradient from 'ink-gradient';
import { MemoryUsageDisplay } from './MemoryUsageDisplay.js';
import { ContextUsageDisplay } from './ContextUsageDisplay.js';
import { DebugProfiler } from './DebugProfiler.js';
import { useTerminalSize } from '../hooks/useTerminalSize.js';
import { isNarrowWidth } from '../utils/isNarrowWidth.js';
import { useUIState } from '../contexts/UIStateContext.js';
import { useConfig } from '../contexts/ConfigContext.js';
@@ -62,8 +65,13 @@ export const Footer: React.FC = () => {
const { columns: terminalWidth } = useTerminalSize();
const pathLength = Math.max(20, Math.floor(terminalWidth * 0.25));
const displayPath = shortenPath(tildeifyPath(targetDir), pathLength);
const isNarrow = isNarrowWidth(terminalWidth);
// Adjust path length based on terminal width
const pathLength = Math.max(20, Math.floor(terminalWidth * 0.4));
const displayPath = isNarrow
? path.basename(tildeifyPath(targetDir))
: shortenPath(tildeifyPath(targetDir), pathLength);
const justifyContent = hideCWD && hideModelInfo ? 'center' : 'space-between';
const displayVimMode = vimEnabled ? vimMode : undefined;
@@ -72,8 +80,8 @@ export const Footer: React.FC = () => {
<Box
justifyContent={justifyContent}
width="100%"
flexDirection="row"
alignItems="center"
flexDirection={isNarrow ? 'column' : 'row'}
alignItems={isNarrow ? 'flex-start' : 'center'}
>
{(debugMode || displayVimMode || !hideCWD) && (
<Box>
@@ -108,10 +116,12 @@ export const Footer: React.FC = () => {
{/* Middle Section: Centered Trust/Sandbox Info */}
{!hideSandboxStatus && (
<Box
flexGrow={1}
flexGrow={isNarrow || hideCWD || hideModelInfo ? 0 : 1}
alignItems="center"
justifyContent="center"
justifyContent={isNarrow || hideCWD ? 'flex-start' : 'center'}
display="flex"
paddingX={isNarrow ? 0 : 1}
paddingTop={isNarrow ? 1 : 0}
>
{isTrustedFolder === false ? (
<Text color={theme.status.warning}>untrusted</Text>
@@ -129,33 +139,35 @@ export const Footer: React.FC = () => {
</Text>
) : (
<Text color={theme.status.error}>
no sandbox
{terminalWidth >= 100 && (
<Text color={theme.text.secondary}> (see /docs)</Text>
)}
no sandbox <Text color={theme.text.secondary}>(see /docs)</Text>
</Text>
)}
</Box>
)}
{/* Right Section: Gemini Label and Console Summary */}
{!hideModelInfo && (
<Box alignItems="center" justifyContent="flex-end">
<Box alignItems="center">
<Text color={theme.text.accent}>
{model}{' '}
<ContextUsageDisplay
promptTokenCount={promptTokenCount}
model={model}
terminalWidth={terminalWidth}
/>
</Text>
{showMemoryUsage && <MemoryUsageDisplay />}
</Box>
{(!hideModelInfo ||
showMemoryUsage ||
corgiMode ||
(!showErrorDetails && errorCount > 0)) && (
<Box alignItems="center" paddingTop={isNarrow ? 1 : 0}>
{!hideModelInfo && (
<Box alignItems="center">
<Text color={theme.text.accent}>
{isNarrow ? '' : ' '}
{model}{' '}
<ContextUsageDisplay
promptTokenCount={promptTokenCount}
model={model}
/>
</Text>
{showMemoryUsage && <MemoryUsageDisplay />}
</Box>
)}
<Box alignItems="center" paddingLeft={2}>
{corgiMode && (
<Text>
<Text color={theme.ui.symbol}>| </Text>
{!hideModelInfo && <Text color={theme.ui.comment}>| </Text>}
<Text color={theme.status.error}>▼</Text>
<Text color={theme.text.primary}>(´</Text>
<Text color={theme.status.error}>ᴥ</Text>
@@ -165,7 +177,7 @@ export const Footer: React.FC = () => {
)}
{!showErrorDetails && errorCount > 0 && (
<Box>
<Text color={theme.ui.symbol}>| </Text>
{!hideModelInfo && <Text color={theme.ui.comment}>| </Text>}
<ConsoleSummaryDisplay errorCount={errorCount} />
</Box>
)}

15
packages/cli/src/ui/components/__snapshots__/Footer.test.tsx.snap
View File

@@ -1,11 +1,20 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`<Footer /> > footer configuration filtering (golden snapshots) > renders complete footer in narrow terminal (baseline narrow) > complete-footer-narrow 1`] = `"...s/to/make/it/long (main*) no sandbox gemini-pro (100%)"`;
exports[`<Footer /> > footer configuration filtering (golden snapshots) > renders complete footer in narrow terminal (baseline narrow) > complete-footer-narrow 1`] = `
"long (main*)
exports[`<Footer /> > footer configuration filtering (golden snapshots) > renders complete footer with all sections visible (baseline) > complete-footer-wide 1`] = `"...directories/to/make/it/long (main*) no sandbox (see /docs) gemini-pro (100% context left)"`;
no sandbox (see /docs)
gemini-pro (100% context left)"
`;
exports[`<Footer /> > footer configuration filtering (golden snapshots) > renders complete footer with all sections visible (baseline) > complete-footer-wide 1`] = `
"...bar/and/some/more/directories/to/make/it/long no sandbox (see gemini-pro (100% context
(main*) /docs) left)"
`;
exports[`<Footer /> > footer configuration filtering (golden snapshots) > renders footer with CWD and model info hidden to test alignment (only sandbox visible) > footer-only-sandbox 1`] = `" no sandbox (see /docs)"`;
exports[`<Footer /> > footer configuration filtering (golden snapshots) > renders footer with all optional sections hidden (minimal footer) > footer-minimal 1`] = `""`;
exports[`<Footer /> > footer configuration filtering (golden snapshots) > renders footer with only model info hidden (partial filtering) > footer-no-model 1`] = `"...directories/to/make/it/long (main*) no sandbox (see /docs)"`;
exports[`<Footer /> > footer configuration filtering (golden snapshots) > renders footer with only model info hidden (partial filtering) > footer-no-model 1`] = `"...bar/and/some/more/directories/to/make/it/long (main*) no sandbox (see /docs)"`;

6
packages/cli/src/ui/layouts/DefaultAppLayout.tsx
View File

@@ -13,13 +13,11 @@ import { Composer } from '../components/Composer.js';
import { ExitWarning } from '../components/ExitWarning.js';
import { useUIState } from '../contexts/UIStateContext.js';
export const DefaultAppLayout: React.FC<{ width?: string }> = ({
width = '90%',
}) => {
export const DefaultAppLayout: React.FC = () => {
const uiState = useUIState();
return (
<Box flexDirection="column" width={width}>
<Box flexDirection="column" width="90%">
<MainContent />
<Box flexDirection="column" ref={uiState.mainControlsRef}>

15
packages/cli/src/utils/math.ts
View File

@@ -1,15 +0,0 @@
/**
* @license
* Copyright 2025 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
/**
* Linearly interpolates between two values.
*
* @param start The start value.
* @param end The end value.
* @param t The interpolation amount (typically between 0 and 1).
*/
export const lerp = (start: number, end: number, t: number): number =>
start + (end - start) * t;