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

chore: refactor based on feedback

Browse Source
This commit is contained in:
Jack Wotherspoon
2026-02-16 12:54:39 -05:00
committed by Keith Guerin
parent 39be41d6ae
commit 686998c1c8
11 changed files with 918 additions and 1013 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/cli/src/config/footerItems.ts
+11
View File
@@ -9,60 +9,70 @@ import type { MergedSettings } from './settings.js';
export const ALL_ITEMS = [
{
id: 'cwd',
header: 'Path',
label: 'cwd',
description: 'Current directory path',
defaultEnabled: true,
},
{
id: 'git-branch',
header: 'Branch',
label: 'git-branch',
description: 'Current git branch name',
defaultEnabled: true,
},
{
id: 'sandbox-status',
header: '/docs',
label: 'sandbox-status',
description: 'Sandbox type and trust indicator',
defaultEnabled: true,
},
{
id: 'model-name',
header: '/model',
label: 'model-name',
description: 'Current model identifier',
defaultEnabled: true,
},
{
id: 'context-remaining',
header: 'Context',
label: 'context-remaining',
description: 'Percentage of context window remaining',
defaultEnabled: false,
},
{
id: 'quota',
header: '/stats',
label: 'quota',
description: 'Remaining usage on daily limit',
defaultEnabled: true,
},
{
id: 'memory-usage',
header: 'Memory',
label: 'memory-usage',
description: 'Node.js heap memory usage',
defaultEnabled: false,
},
{
id: 'session-id',
header: 'Session',
label: 'session-id',
description: 'Unique identifier for the current session',
defaultEnabled: false,
},
{
id: 'code-changes',
header: 'Diff',
label: 'code-changes',
description: 'Lines added/removed in the session',
defaultEnabled: true,
},
{
id: 'token-count',
header: 'Tokens',
label: 'token-count',
description: 'Total tokens used in the session',
defaultEnabled: false,
@@ -73,6 +83,7 @@ export type FooterItemId = (typeof ALL_ITEMS)[number]['id'];
export interface FooterItem {
id: string;
header: string;
label: string;
description: string;
defaultEnabled: boolean;
packages/cli/src/config/settingsSchema.ts
+10
View File
@@ -582,6 +582,16 @@ const SETTINGS_SCHEMA = {
showInDialog: false,
items: { type: 'string' },
},
showLabels: {
type: 'boolean',
label: 'Show Footer Labels',
category: 'UI',
requiresRestart: false,
default: true,
description:
'Display a second line above the footer items with descriptive headers (e.g., /model).',
showInDialog: false,
},
hideCWD: {
type: 'boolean',
label: 'Hide CWD',
packages/cli/src/ui/components/ContextUsageDisplay.test.tsx
+8 -14
View File
@@ -27,46 +27,40 @@ vi.mock('../../config/settings.js', () => ({
}));
describe('ContextUsageDisplay', () => {
it('renders correct percentage left', async () => {
const { lastFrame, waitUntilReady, unmount } = render(
it('renders correct percentage left', () => {
const { lastFrame } = render(
<ContextUsageDisplay
promptTokenCount={5000}
model="gemini-pro"
terminalWidth={120}
/>,
);
await waitUntilReady();
const output = lastFrame();
expect(output).toContain('50% context left');
unmount();
expect(output).toContain('50% left');
});
it('renders short label when terminal width is small', async () => {
const { lastFrame, waitUntilReady, unmount } = render(
it('renders short label when terminal width is small', () => {
const { lastFrame } = render(
<ContextUsageDisplay
promptTokenCount={2000}
model="gemini-pro"
terminalWidth={80}
/>,
);
await waitUntilReady();
const output = lastFrame();
expect(output).toContain('80%');
expect(output).not.toContain('context left');
unmount();
});
it('renders 0% when full', async () => {
const { lastFrame, waitUntilReady, unmount } = render(
it('renders 0% when full', () => {
const { lastFrame } = render(
<ContextUsageDisplay
promptTokenCount={10000}
model="gemini-pro"
terminalWidth={120}
/>,
);
await waitUntilReady();
const output = lastFrame();
expect(output).toContain('0% context left');
unmount();
expect(output).toContain('0% left');
});
});
packages/cli/src/ui/components/ContextUsageDisplay.tsx
+4 -2
View File
@@ -12,18 +12,20 @@ export const ContextUsageDisplay = ({
promptTokenCount,
model,
terminalWidth,
color = theme.text.primary,
}: {
promptTokenCount: number;
model: string;
terminalWidth: number;
color?: string;
}) => {
const percentage = getContextUsagePercentage(promptTokenCount, model);
const percentageLeft = ((1 - percentage) * 100).toFixed(0);
const label = terminalWidth < 100 ? '%' : '% context left';
const label = terminalWidth < 100 ? '%' : '% left';
return (
<Text color={theme.text.secondary}>
<Text color={color}>
{percentageLeft}
{label}
</Text>
packages/cli/src/ui/components/Footer.test.tsx
+477 -697
View File
File diff suppressed because it is too large Load Diff
packages/cli/src/ui/components/Footer.tsx
+252 -220
View File
@@ -17,23 +17,24 @@ import { ConsoleSummaryDisplay } from './ConsoleSummaryDisplay.js';
import process from 'node:process';
import { MemoryUsageDisplay } from './MemoryUsageDisplay.js';
import { ContextUsageDisplay } from './ContextUsageDisplay.js';
import { QuotaDisplay } from './QuotaDisplay.js';
import {
getStatusColor,
QUOTA_THRESHOLD_HIGH,
QUOTA_THRESHOLD_MEDIUM,
} from '../utils/displayUtils.js';
import { DebugProfiler } from './DebugProfiler.js';
import { isDevelopment } from '../../utils/installationInfo.js';
import { useUIState } from '../contexts/UIStateContext.js';
import { useConfig } from '../contexts/ConfigContext.js';
import { useSettings } from '../contexts/SettingsContext.js';
import { useVimMode } from '../contexts/VimModeContext.js';
import { ALL_ITEMS, type FooterItemId } from '../../config/footerItems.js';
import {
ALL_ITEMS,
type FooterItemId,
deriveItemsFromLegacySettings,
} from '../../config/footerItems.js';
interface CwdIndicatorProps {
targetDir: string;
terminalWidth: number;
maxWidth: number;
debugMode?: boolean;
debugMessage?: string;
color?: string;
@@ -41,21 +42,19 @@ interface CwdIndicatorProps {
const CwdIndicator: React.FC<CwdIndicatorProps> = ({
targetDir,
terminalWidth,
maxWidth,
debugMode,
debugMessage,
color = theme.text.primary,
}) => {
const pathLength = Math.max(20, Math.floor(terminalWidth * 0.25));
const displayPath = shortenPath(tildeifyPath(targetDir), pathLength);
const debugSuffix = debugMode ? ' ' + (debugMessage || '--debug') : '';
const availableForPath = Math.max(10, maxWidth - debugSuffix.length);
const displayPath = shortenPath(tildeifyPath(targetDir), availableForPath);
return (
<Text color={color}>
{displayPath}
{debugMode && (
<Text color={theme.status.error}>
{' ' + (debugMessage || '--debug')}
</Text>
)}
{debugMode && <Text color={theme.status.error}>{debugSuffix}</Text>}
</Text>
);
};
@@ -63,13 +62,15 @@ const CwdIndicator: React.FC<CwdIndicatorProps> = ({
interface BranchIndicatorProps {
branchName: string;
showParentheses?: boolean;
color?: string;
}
const BranchIndicator: React.FC<BranchIndicatorProps> = ({
branchName,
showParentheses = true,
color = theme.text.primary,
}) => (
<Text color={theme.text.secondary}>
<Text color={color}>
{showParentheses ? `(${branchName}*)` : `${branchName}*`}
</Text>
);
@@ -100,7 +101,7 @@ const SandboxIndicator: React.FC<SandboxIndicatorProps> = ({
return (
<Text color={theme.status.warning}>
macOS Seatbelt{' '}
<Text color={theme.text.secondary}>
<Text color={theme.ui.comment}>
({process.env['SEATBELT_PROFILE']})
</Text>
</Text>
@@ -141,6 +142,14 @@ function isFooterItemId(id: string): id is FooterItemId {
return ALL_ITEMS.some((i) => i.id === id);
}
interface FooterColumn {
id: string;
header: string;
element: (maxWidth: number) => React.ReactNode;
width: number;
isHighPriority: boolean;
}
export const Footer: React.FC = () => {
const uiState = useUIState();
const config = useConfig();
@@ -176,264 +185,213 @@ export const Footer: React.FC = () => {
};
const displayVimMode = vimEnabled ? vimMode : undefined;
const items =
settings.merged.ui.footer.items ??
deriveItemsFromLegacySettings(settings.merged);
const showLabels = settings.merged.ui.footer.showLabels !== false;
const itemColor = showLabels ? theme.text.primary : theme.ui.comment;
const hasCustomItems = settings.merged.ui.footer.items != null;
const potentialColumns: FooterColumn[] = [];
if (!hasCustomItems) {
const showMemoryUsage =
config.getDebugMode() || settings.merged.ui.showMemoryUsage;
const hideCWD = settings.merged.ui.footer.hideCWD;
const hideSandboxStatus = settings.merged.ui.footer.hideSandboxStatus;
const hideModelInfo = settings.merged.ui.footer.hideModelInfo;
const hideContextPercentage =
settings.merged.ui.footer.hideContextPercentage;
const justifyContent =
hideCWD && hideModelInfo ? 'center' : 'space-between';
const showDebugProfiler = debugMode || isDevelopment;
return (
<Box
justifyContent={justifyContent}
width={terminalWidth}
flexDirection="row"
alignItems="center"
paddingX={1}
>
{(showDebugProfiler || displayVimMode || !hideCWD) && (
<Box>
{showDebugProfiler && <DebugProfiler />}
{displayVimMode && (
<Text color={theme.text.secondary}>[{displayVimMode}] </Text>
)}
{!hideCWD && (
<Box flexDirection="row">
<CwdIndicator
targetDir={targetDir}
terminalWidth={terminalWidth}
debugMode={debugMode}
debugMessage={debugMessage}
/>
{branchName && (
<>
<Text> </Text>
<BranchIndicator branchName={branchName} />
</>
)}
</Box>
)}
</Box>
)}
{/* Middle Section: Centered Trust/Sandbox Info */}
{!hideSandboxStatus && (
<Box
flexGrow={1}
alignItems="center"
justifyContent="center"
display="flex"
>
<SandboxIndicator
isTrustedFolder={isTrustedFolder}
terminalWidth={terminalWidth}
showDocsHint={true}
/>
</Box>
)}
{/* Right Section: Gemini Label and Console Summary */}
{!hideModelInfo && (
<Box alignItems="center" justifyContent="flex-end">
<Box alignItems="center">
<Text color={theme.text.primary}>
<Text color={theme.text.secondary}>/model </Text>
{getDisplayString(model)}
{!hideContextPercentage && (
<>
{' '}
<ContextUsageDisplay
promptTokenCount={promptTokenCount}
model={model}
terminalWidth={terminalWidth}
/>
</>
)}
{quotaStats && (
<>
{' '}
<QuotaDisplay
remaining={quotaStats.remaining}
limit={quotaStats.limit}
resetTime={quotaStats.resetTime}
terse={true}
/>
</>
)}
</Text>
{showMemoryUsage && (
<>
<Text color={theme.text.secondary}> | </Text>
<MemoryUsageDisplay />
</>
)}
</Box>
<Box alignItems="center">
{corgiMode && (
<Box paddingLeft={1} flexDirection="row">
<Text color={theme.ui.symbol}>| </Text>
<CorgiIndicator />
</Box>
)}
{!showErrorDetails && errorCount > 0 && (
<Box paddingLeft={1} flexDirection="row">
<Text color={theme.ui.comment}>| </Text>
<ErrorIndicator errorCount={errorCount} />
</Box>
)}
</Box>
</Box>
)}
</Box>
);
}
// Items-based rendering path
const items = settings.merged.ui.footer.items ?? [];
const elements: React.ReactNode[] = [];
const addElement = (id: string, element: React.ReactNode) => {
if (elements.length > 0) {
elements.push(
<Text key={`sep-${id}`} color={theme.text.secondary}>
{' | '}
</Text>,
);
}
elements.push(<Box key={id}>{element}</Box>);
const addCol = (
id: string,
header: string,
element: (maxWidth: number) => React.ReactNode,
dataWidth: number,
isHighPriority = false,
) => {
potentialColumns.push({
id,
header: showLabels ? header : '',
element,
width: Math.max(dataWidth, showLabels ? header.length : 0),
isHighPriority,
});
};
// Prepend Vim mode if enabled
// 1. System Indicators (Far Left, high priority)
if (uiState.showDebugProfiler) {
addCol('debug', '', () => <DebugProfiler />, 45, true);
}
if (displayVimMode) {
elements.push(
<Box key="vim-mode-static">
<Text color={theme.text.secondary}>[{displayVimMode}] </Text>
</Box>,
const vimStr = `[${displayVimMode}]`;
addCol(
'vim',
'',
() => <Text color={theme.text.accent}>{vimStr}</Text>,
vimStr.length,
true,
);
}
// 2. Main Configurable Items
for (const id of items) {
if (!isFooterItemId(id)) {
continue;
}
if (!isFooterItemId(id)) continue;
const itemConfig = ALL_ITEMS.find((i) => i.id === id);
const header = itemConfig?.header ?? id;
switch (id) {
case 'cwd': {
addElement(
const fullPath = tildeifyPath(targetDir);
const debugSuffix = debugMode ? ' ' + (debugMessage || '--debug') : '';
addCol(
id,
<CwdIndicator
targetDir={targetDir}
terminalWidth={terminalWidth}
debugMode={debugMode}
debugMessage={debugMessage}
color={theme.text.secondary}
/>,
header,
(maxWidth) => (
<CwdIndicator
targetDir={targetDir}
maxWidth={maxWidth}
debugMode={debugMode}
debugMessage={debugMessage}
color={itemColor}
/>
),
fullPath.length + debugSuffix.length,
);
break;
}
case 'git-branch': {
if (branchName) {
addElement(
const str = `${branchName}*`;
addCol(
id,
<BranchIndicator branchName={branchName} showParentheses={false} />,
header,
() => (
<BranchIndicator
branchName={branchName}
showParentheses={false}
color={itemColor}
/>
),
str.length,
);
}
break;
}
case 'sandbox-status': {
addElement(
let str = 'no sandbox';
const sandbox = process.env['SANDBOX'];
if (isTrustedFolder === false) str = 'untrusted';
else if (sandbox === 'sandbox-exec')
str = `macOS Seatbelt (${process.env['SEATBELT_PROFILE']})`;
else if (sandbox) str = sandbox.replace(/^gemini-(?:cli-)?/, '');
addCol(
id,
<SandboxIndicator
isTrustedFolder={isTrustedFolder}
terminalWidth={terminalWidth}
/>,
header,
() => (
<SandboxIndicator
isTrustedFolder={isTrustedFolder}
terminalWidth={terminalWidth}
/>
),
str.length,
);
break;
}
case 'model-name': {
addElement(
const str = getDisplayString(model);
addCol(
id,
<Text color={theme.text.secondary}>{getDisplayString(model)}</Text>,
header,
() => <Text color={itemColor}>{str}</Text>,
str.length,
);
break;
}
case 'context-remaining': {
addElement(
id,
<ContextUsageDisplay
promptTokenCount={promptTokenCount}
model={model}
terminalWidth={terminalWidth}
/>,
);
if (!settings.merged.ui.footer.hideContextPercentage) {
addCol(
id,
header,
() => (
<ContextUsageDisplay
promptTokenCount={promptTokenCount}
model={model}
terminalWidth={terminalWidth}
color={itemColor}
/>
),
10, // "100% left" is 9 chars
);
}
break;
}
case 'quota': {
if (
quotaStats &&
quotaStats.remaining !== undefined &&
quotaStats.limit
) {
if (quotaStats?.remaining !== undefined && quotaStats.limit) {
const percentage = (quotaStats.remaining / quotaStats.limit) * 100;
const color = getStatusColor(percentage, {
green: QUOTA_THRESHOLD_HIGH,
yellow: QUOTA_THRESHOLD_MEDIUM,
});
let color = itemColor;
if (percentage < QUOTA_THRESHOLD_MEDIUM) {
color = theme.status.error;
} else if (percentage < QUOTA_THRESHOLD_HIGH) {
color = theme.status.warning;
}
const text =
quotaStats.remaining === 0
? 'limit reached'
: `daily ${percentage.toFixed(0)}%`;
addElement(id, <Text color={color}>{text}</Text>);
addCol(
id,
header,
() => <Text color={color}>{text}</Text>,
text.length,
);
}
break;
}
case 'memory-usage': {
addElement(id, <MemoryUsageDisplay />);
addCol(id, header, () => <MemoryUsageDisplay color={itemColor} />, 10);
break;
}
case 'session-id': {
const idShort = uiState.sessionStats.sessionId.slice(0, 8);
addElement(id, <Text color={theme.text.secondary}>{idShort}</Text>);
addCol(
id,
header,
() => (
<Text color={itemColor}>
{uiState.sessionStats.sessionId.slice(0, 8)}
</Text>
),
8,
);
break;
}
case 'code-changes': {
const added = uiState.sessionStats.metrics.files.totalLinesAdded;
const removed = uiState.sessionStats.metrics.files.totalLinesRemoved;
if (added > 0 || removed > 0) {
addElement(
const str = `+${added} -${removed}`;
addCol(
id,
<Text>
<Text color={theme.status.success}>+{added}</Text>{' '}
<Text color={theme.status.error}>-{removed}</Text>
</Text>,
header,
() => (
<Text>
<Text color={theme.status.success}>+{added}</Text>{' '}
<Text color={theme.status.error}>-{removed}</Text>
</Text>
),
str.length,
);
}
break;
}
case 'token-count': {
let totalTokens = 0;
for (const m of Object.values(uiState.sessionStats.metrics.models)) {
totalTokens += m.tokens.total;
}
if (totalTokens > 0) {
const formatter = new Intl.NumberFormat('en-US', {
notation: 'compact',
maximumFractionDigits: 1,
});
const formatted = formatter.format(totalTokens).toLowerCase();
addElement(
let total = 0;
for (const m of Object.values(uiState.sessionStats.metrics.models))
total += m.tokens.total;
if (total > 0) {
const formatted =
new Intl.NumberFormat('en-US', {
notation: 'compact',
maximumFractionDigits: 1,
})
.format(total)
.toLowerCase() + ' tokens';
addCol(
id,
<Text color={theme.text.secondary}>{formatted} tokens</Text>,
header,
() => <Text color={itemColor}>{formatted}</Text>,
formatted.length,
);
}
break;
@@ -444,14 +402,88 @@ export const Footer: React.FC = () => {
}
}
if (corgiMode) {
addElement('corgi-transient', <CorgiIndicator />);
// 3. Transients
if (corgiMode) addCol('corgi', '', () => <CorgiIndicator />, 5);
if (!showErrorDetails && errorCount > 0) {
addCol(
'error-count',
'',
() => <ErrorIndicator errorCount={errorCount} />,
12,
true,
);
}
if (!showErrorDetails && errorCount > 0) {
addElement(
'error-count-transient',
<ErrorIndicator errorCount={errorCount} />,
// --- Width Fitting Logic ---
const COLUMN_GAP = 3;
let currentWidth = 2; // Initial padding
const columnsToRender: FooterColumn[] = [];
let droppedAny = false;
for (let i = 0; i < potentialColumns.length; i++) {
const col = potentialColumns[i];
const gap = columnsToRender.length > 0 ? (showLabels ? COLUMN_GAP : 3) : 0; // Use 3 for dot separator width
const budgetWidth = col.id === 'cwd' ? 20 : col.width;
if (
col.isHighPriority ||
currentWidth + gap + budgetWidth <= terminalWidth - 2
) {
columnsToRender.push(col);
currentWidth += gap + budgetWidth;
} else {
droppedAny = true;
}
}
const totalBudgeted = columnsToRender.reduce(
(sum, c, idx) =>
sum +
(c.id === 'cwd' ? 20 : c.width) +
(idx > 0 ? (showLabels ? COLUMN_GAP : 3) : 0),
2,
);
const excessSpace = Math.max(0, terminalWidth - totalBudgeted);
const finalElements: React.ReactNode[] = [];
columnsToRender.forEach((col, idx) => {
if (idx > 0 && !showLabels) {
finalElements.push(
<Box key={`sep-${col.id}`} height={1}>
<Text color={theme.ui.comment}> · </Text>
</Box>,
);
}
const maxWidth = col.id === 'cwd' ? 20 + excessSpace : col.width;
finalElements.push(
<Box key={col.id} flexDirection="column">
{showLabels && (
<Box height={1}>
<Text color={theme.ui.comment}>{col.header}</Text>
</Box>
)}
<Box height={1}>{col.element(maxWidth)}</Box>
</Box>,
);
});
if (droppedAny) {
if (!showLabels) {
finalElements.push(
<Box key="sep-ellipsis" height={1}>
<Text color={theme.ui.comment}> · </Text>
</Box>,
);
}
finalElements.push(
<Box key="ellipsis" flexDirection="column">
{showLabels && <Box height={1} />}
<Box height={1}>
<Text color={theme.ui.comment}>…</Text>
</Box>
</Box>,
);
}
@@ -459,12 +491,12 @@ export const Footer: React.FC = () => {
<Box
width={terminalWidth}
flexDirection="row"
alignItems="center"
paddingX={1}
flexWrap="nowrap"
overflow="hidden"
flexWrap="nowrap"
columnGap={showLabels ? COLUMN_GAP : 0}
>
{elements}
{finalElements}
</Box>
);
};
packages/cli/src/ui/components/FooterConfigDialog.test.tsx
+9 -5
View File
@@ -83,8 +83,10 @@ describe('<FooterConfigDialog />', () => {
// Initial order: cwd, git-branch, ...
const output = lastFrame();
const cwdIdx = output!.indexOf('cwd');
const branchIdx = output!.indexOf('git-branch');
const cwdIdx = output!.indexOf('] cwd');
const branchIdx = output!.indexOf('] git-branch');
expect(cwdIdx).toBeGreaterThan(-1);
expect(branchIdx).toBeGreaterThan(-1);
expect(cwdIdx).toBeLessThan(branchIdx);
// Move cwd down (right arrow)
@@ -94,8 +96,10 @@ describe('<FooterConfigDialog />', () => {
await waitFor(() => {
const outputAfter = lastFrame();
const cwdIdxAfter = outputAfter!.indexOf('cwd');
const branchIdxAfter = outputAfter!.indexOf('git-branch');
const cwdIdxAfter = outputAfter!.indexOf('] cwd');
const branchIdxAfter = outputAfter!.indexOf('] git-branch');
expect(cwdIdxAfter).toBeGreaterThan(-1);
expect(branchIdxAfter).toBeGreaterThan(-1);
expect(branchIdxAfter).toBeLessThan(cwdIdxAfter);
});
});
@@ -142,7 +146,7 @@ describe('<FooterConfigDialog />', () => {
{ settings },
);
for (let i = 0; i < 5; i++) {
for (let i = 0; i < 10; i++) {
act(() => {
stdin.write('\r'); // Toggle (deselect)
stdin.write('\u001b[B'); // Down arrow
packages/cli/src/ui/components/FooterConfigDialog.tsx
+124 -52
View File
@@ -13,6 +13,7 @@ import { useKeypress, type Key } from '../hooks/useKeypress.js';
import { keyMatchers, Command } from '../keyMatchers.js';
import { TextInput } from './shared/TextInput.js';
import { useFuzzyList } from '../hooks/useFuzzyList.js';
import { MemoryUsageDisplay } from './MemoryUsageDisplay.js';
import {
ALL_ITEMS,
DEFAULT_ORDER,
@@ -55,7 +56,7 @@ function footerConfigReducer(
switch (action.type) {
case 'MOVE_UP': {
const { filteredCount, maxToShow } = action;
const totalSlots = filteredCount + 1;
const totalSlots = filteredCount + 2; // +1 for showLabels, +1 for reset
const newIndex =
state.activeIndex > 0 ? state.activeIndex - 1 : totalSlots - 1;
let newOffset = state.scrollOffset;
@@ -71,7 +72,7 @@ function footerConfigReducer(
}
case 'MOVE_DOWN': {
const { filteredCount, maxToShow } = action;
const totalSlots = filteredCount + 1;
const totalSlots = filteredCount + 2;
const newIndex =
state.activeIndex < totalSlots - 1 ? state.activeIndex + 1 : 0;
let newOffset = state.scrollOffset;
@@ -108,8 +109,8 @@ function footerConfigReducer(
return { ...state, orderedIds: newOrderedIds, activeIndex: newIndex };
}
case 'TOGGLE_ITEM': {
const isResetFocused = state.activeIndex === action.filteredItems.length;
if (isResetFocused) return state; // Handled by separate effect/callback if needed, or we can add a RESET_DEFAULTS action
const isSystemFocused = state.activeIndex >= action.filteredItems.length;
if (isSystemFocused) return state;
const item = action.filteredItems[state.activeIndex];
if (!item) return state;
@@ -209,7 +210,8 @@ export const FooterConfigDialog: React.FC<FooterConfigDialogProps> = ({
dispatch({ type: 'RESET_INDEX' });
}, [searchQuery]);
const isResetFocused = activeIndex === filteredItems.length;
const isResetFocused = activeIndex === filteredItems.length + 1;
const isShowLabelsFocused = activeIndex === filteredItems.length;
const handleResetToDefaults = useCallback(() => {
setSetting(SettingScope.User, 'ui.footer.items', undefined);
@@ -231,6 +233,11 @@ export const FooterConfigDialog: React.FC<FooterConfigDialogProps> = ({
});
}, [setSetting, settings.merged]);
const handleToggleLabels = useCallback(() => {
const current = settings.merged.ui.footer.showLabels !== false;
setSetting(SettingScope.User, 'ui.footer.showLabels', !current);
}, [setSetting, settings.merged.ui.footer.showLabels]);
useKeypress(
(key: Key) => {
if (keyMatchers[Command.ESCAPE](key)) {
@@ -269,6 +276,8 @@ export const FooterConfigDialog: React.FC<FooterConfigDialogProps> = ({
if (keyMatchers[Command.RETURN](key)) {
if (isResetFocused) {
handleResetToDefaults();
} else if (isShowLabelsFocused) {
handleToggleLabels();
} else {
dispatch({ type: 'TOGGLE_ITEM', filteredItems });
}
@@ -286,12 +295,13 @@ export const FooterConfigDialog: React.FC<FooterConfigDialogProps> = ({
);
const activeId = filteredItems[activeIndex]?.key;
const showLabels = settings.merged.ui.footer.showLabels !== false;
// Preview logic
const previewText = useMemo(() => {
const previewContent = useMemo(() => {
if (isResetFocused) {
return (
<Text color={theme.text.secondary} italic>
<Text color={theme.ui.comment} italic>
Default footer (uses legacy settings)
</Text>
);
@@ -302,53 +312,103 @@ export const FooterConfigDialog: React.FC<FooterConfigDialogProps> = ({
);
if (itemsToPreview.length === 0) return null;
const itemColor = showLabels ? theme.text.primary : theme.ui.comment;
const getColor = (id: string, defaultColor?: string) =>
id === activeId ? 'white' : defaultColor || theme.text.secondary;
id === activeId ? 'white' : defaultColor || itemColor;
// Mock values for preview
const mockValues: Record<string, React.ReactNode> = {
cwd: <Text color={getColor('cwd')}>~/project/path</Text>,
'git-branch': <Text color={getColor('git-branch')}>main*</Text>,
'sandbox-status': (
<Text color={getColor('sandbox-status', 'green')}>docker</Text>
),
'model-name': (
<Box flexDirection="row">
<Text color={getColor('model-name')}>gemini-2.5-pro</Text>
</Box>
),
'context-remaining': (
<Text color={getColor('context-remaining')}>85% context left</Text>
),
quota: <Text color={getColor('quota')}>daily 97%</Text>,
'memory-usage': <Text color={getColor('memory-usage')}>124MB</Text>,
'session-id': <Text color={getColor('session-id')}>769992f9</Text>,
'code-changes': (
<Box flexDirection="row">
<Text color={getColor('code-changes', theme.status.success)}>
+12
</Text>
<Text color={getColor('code-changes')}> </Text>
<Text color={getColor('code-changes', theme.status.error)}>-4</Text>
</Box>
),
'token-count': <Text color={getColor('token-count')}>1.5k tokens</Text>,
const mockValues: Record<
string,
{ header: string; data: React.ReactNode }
> = {
cwd: {
header: 'Path',
data: <Text color={getColor('cwd', itemColor)}>~/project/path</Text>,
},
'git-branch': {
header: 'Branch',
data: <Text color={getColor('git-branch', itemColor)}>main*</Text>,
},
'sandbox-status': {
header: '/docs',
data: <Text color={getColor('sandbox-status', 'green')}>docker</Text>,
},
'model-name': {
header: '/model',
data: (
<Text color={getColor('model-name', itemColor)}>gemini-2.5-pro</Text>
),
},
'context-remaining': {
header: 'Context',
data: (
<Text color={getColor('context-remaining', itemColor)}>85% left</Text>
),
},
quota: {
header: '/stats',
data: <Text color={getColor('quota', itemColor)}>daily 97%</Text>,
},
'memory-usage': {
header: 'Memory',
data: <MemoryUsageDisplay color={itemColor} />,
},
'session-id': {
header: 'Session',
data: <Text color={getColor('session-id', itemColor)}>769992f9</Text>,
},
'code-changes': {
header: 'Diff',
data: (
<Box flexDirection="row">
<Text color={getColor('code-changes', theme.status.success)}>
+12
</Text>
<Text color={getColor('code-changes')}> </Text>
<Text color={getColor('code-changes', theme.status.error)}>-4</Text>
</Box>
),
},
'token-count': {
header: 'Tokens',
data: (
<Text color={getColor('token-count', itemColor)}>1.5k tokens</Text>
),
},
};
const elements: React.ReactNode[] = [];
const previewElements: React.ReactNode[] = [];
itemsToPreview.forEach((id: string, idx: number) => {
if (idx > 0) {
elements.push(
<Text key={`sep-${id}`} color={theme.text.secondary}>
{' | '}
</Text>,
const mock = mockValues[id];
if (!mock) return;
if (idx > 0 && !showLabels) {
previewElements.push(
<Box key={`sep-${id}`} height={1}>
<Text color={theme.ui.comment}> · </Text>
</Box>,
);
}
elements.push(<Box key={id}>{mockValues[id] || id}</Box>);
previewElements.push(
<Box key={id} flexDirection="column">
{showLabels && (
<Box height={1}>
<Text color={theme.ui.comment}>{mock.header}</Text>
</Box>
)}
<Box height={1}>{mock.data}</Box>
</Box>,
);
});
return elements;
}, [orderedIds, selectedIds, activeId, isResetFocused]);
return (
<Box flexDirection="row" flexWrap="nowrap" columnGap={showLabels ? 3 : 0}>
{previewElements}
</Box>
);
}, [orderedIds, selectedIds, activeId, isResetFocused, showLabels]);
return (
<Box
@@ -403,13 +463,25 @@ export const FooterConfigDialog: React.FC<FooterConfigDialogProps> = ({
)}
</Box>
<Box marginTop={1}>
<Text
color={isResetFocused ? theme.status.warning : theme.text.secondary}
>
{isResetFocused ? '> ' : ' '}
Reset to default footer
</Text>
<Box marginTop={1} flexDirection="column">
<Box flexDirection="row">
<Text color={isShowLabelsFocused ? theme.status.success : undefined}>
{isShowLabelsFocused ? '> ' : ' '}
</Text>
<Text color={isShowLabelsFocused ? theme.status.success : undefined}>
[{showLabels ? '✓' : ' '}] Show footer labels
</Text>
</Box>
<Box flexDirection="row">
<Text color={isResetFocused ? theme.status.warning : undefined}>
{isResetFocused ? '> ' : ' '}
</Text>
<Text
color={isResetFocused ? theme.status.warning : theme.text.secondary}
>
Reset to default footer
</Text>
</Box>
</Box>
<Box marginTop={1} flexDirection="column">
@@ -431,7 +503,7 @@ export const FooterConfigDialog: React.FC<FooterConfigDialogProps> = ({
flexDirection="column"
>
<Text bold>Preview:</Text>
<Box flexDirection="row">{previewText}</Box>
<Box flexDirection="row">{previewContent}</Box>
</Box>
</Box>
);
packages/cli/src/ui/components/MemoryUsageDisplay.tsx
+6 -8
View File
@@ -11,26 +11,24 @@ import { theme } from '../semantic-colors.js';
import process from 'node:process';
import { formatBytes } from '../utils/formatters.js';
export const MemoryUsageDisplay: React.FC = () => {
export const MemoryUsageDisplay: React.FC<{ color?: string }> = ({
color = theme.text.primary,
}) => {
const [memoryUsage, setMemoryUsage] = useState<string>('');
const [memoryUsageColor, setMemoryUsageColor] = useState<string>(
theme.text.secondary,
);
const [memoryUsageColor, setMemoryUsageColor] = useState<string>(color);
useEffect(() => {
const updateMemory = () => {
const usage = process.memoryUsage().rss;
setMemoryUsage(formatBytes(usage));
setMemoryUsageColor(
usage >= 2 * 1024 * 1024 * 1024
? theme.status.error
: theme.text.secondary,
usage >= 2 * 1024 * 1024 * 1024 ? theme.status.error : color,
);
};
const intervalId = setInterval(updateMemory, 2000);
updateMemory(); // Initial update
return () => clearInterval(intervalId);
}, []);
}, [color]);
return (
<Box>
packages/cli/src/ui/components/__snapshots__/Footer.test.tsx.snap
+14 -14
View File
@@ -1,38 +1,38 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`<Footer /> > displays "Limit reached" message when remaining is 0 1`] = `
" ...directories/to/make/it/long no sandbox (see /docs) /model gemini-pro Limit reached
"
" Path /docs /model /stats
/Users/test/project/foo/bar/and/some/more/directories/to/make/it/long no sandbox gemini-pro limit reached"
`;
exports[`<Footer /> > displays the usage indicator when usage is low 1`] = `
" ...directories/to/make/it/long no sandbox (see /docs) /model gemini-pro 15%
"
" Path /docs /model /stats
/Users/test/project/foo/bar/and/some/more/directories/to/make/it/long no sandbox gemini-pro daily 15%"
`;
exports[`<Footer /> > footer configuration filtering (golden snapshots) > renders complete footer in narrow terminal (baseline narrow) > complete-footer-narrow 1`] = `
" ...s/to/make/it/long no sandbox /model gemini-pro 100%
"
" Path /docs /model Context
/Users/.../directories/to/make/it/long no sandbox gemini-pro 100%"
`;
exports[`<Footer /> > footer configuration filtering (golden snapshots) > renders complete footer with all sections visible (baseline) > complete-footer-wide 1`] = `
" ...directories/to/make/it/long no sandbox (see /docs) /model gemini-pro 100% context left
"
" Path /docs /model Context
/Users/test/project/foo/bar/and/some/more/directories/to/make/it/long no sandbox gemini-pro 100% 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)
"
" /docs
no sandbox"
`;
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 no sandbox (see /docs)
"
" Path /docs
/Users/test/project/foo/bar/and/some/more/directories/to/make/it/long no sandbox"
`;
exports[`<Footer /> > hides the usage indicator when usage is not near limit 1`] = `
" ...directories/to/make/it/long no sandbox (see /docs) /model gemini-pro
"
" Path /docs /model /stats
/Users/test/project/foo/bar/and/some/more/directories/to/make/it/long no sandbox gemini-pro daily 85%"
`;
packages/cli/src/ui/components/__snapshots__/FooterConfigDialog.test.tsx.snap
+3 -1
View File
@@ -22,13 +22,15 @@ exports[`<FooterConfigDialog /> > renders correctly with default settings 1`] =
│ [ ] code-changes Lines added/removed in the session │
│ [ ] token-count Total tokens used in the session │
│ │
│ [✓] Show footer labels │
│ Reset to default footer │
│ │
│ ↑/↓ navigate · ←/→ reorder · enter select · esc close │
│ │
│ ┌────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐ │
│ │ Preview: │ │
│ │ ~/project/path | main* | docker | gemini-2.5-pro | daily 97% │ │
│ │ Path Branch /docs /model /stats │ │
│ │ ~/project/path main* docker gemini-2.5-pro daily 97% │ │
│ └────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘ │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯"