diff options
| -rw-r--r-- | packages/cli/src/ui/components/ContextUsageDisplay.tsx | 25 | ||||
| -rw-r--r-- | packages/cli/src/ui/components/Footer.tsx | 152 |
2 files changed, 99 insertions, 78 deletions
diff --git a/packages/cli/src/ui/components/ContextUsageDisplay.tsx b/packages/cli/src/ui/components/ContextUsageDisplay.tsx new file mode 100644 index 00000000..037be333 --- /dev/null +++ b/packages/cli/src/ui/components/ContextUsageDisplay.tsx @@ -0,0 +1,25 @@ +/** + * @license + * Copyright 2025 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ + +import { Text } from 'ink'; +import { Colors } from '../colors.js'; +import { tokenLimit } from '@google/gemini-cli-core'; + +export const ContextUsageDisplay = ({ + promptTokenCount, + model, +}: { + promptTokenCount: number; + model: string; +}) => { + const percentage = promptTokenCount / tokenLimit(model); + + return ( + <Text color={Colors.Gray}> + ({((1 - percentage) * 100).toFixed(0)}% context left) + </Text> + ); +}; diff --git a/packages/cli/src/ui/components/Footer.tsx b/packages/cli/src/ui/components/Footer.tsx index acc55870..14cda5f3 100644 --- a/packages/cli/src/ui/components/Footer.tsx +++ b/packages/cli/src/ui/components/Footer.tsx @@ -7,12 +7,12 @@ import React from 'react'; import { Box, Text } from 'ink'; import { Colors } from '../colors.js'; -import { shortenPath, tildeifyPath, tokenLimit } from '@google/gemini-cli-core'; +import { shortenPath, tildeifyPath } from '@google/gemini-cli-core'; import { ConsoleSummaryDisplay } from './ConsoleSummaryDisplay.js'; import process from 'node:process'; import Gradient from 'ink-gradient'; import { MemoryUsageDisplay } from './MemoryUsageDisplay.js'; - +import { ContextUsageDisplay } from './ContextUsageDisplay.js'; import { DebugProfiler } from './DebugProfiler.js'; interface FooterProps { @@ -43,85 +43,81 @@ export const Footer: React.FC<FooterProps> = ({ promptTokenCount, nightly, vimMode, -}) => { - const limit = tokenLimit(model); - const percentage = promptTokenCount / limit; - - return ( - <Box justifyContent="space-between" width="100%"> - <Box> - {debugMode && <DebugProfiler />} - {vimMode && <Text color={Colors.Gray}>[{vimMode}] </Text>} - {nightly ? ( - <Gradient colors={Colors.GradientColors}> - <Text> - {shortenPath(tildeifyPath(targetDir), 70)} - {branchName && <Text> ({branchName}*)</Text>} - </Text> - </Gradient> - ) : ( - <Text color={Colors.LightBlue}> +}) => ( + <Box justifyContent="space-between" width="100%"> + <Box> + {debugMode && <DebugProfiler />} + {vimMode && <Text color={Colors.Gray}>[{vimMode}] </Text>} + {nightly ? ( + <Gradient colors={Colors.GradientColors}> + <Text> {shortenPath(tildeifyPath(targetDir), 70)} - {branchName && <Text color={Colors.Gray}> ({branchName}*)</Text>} + {branchName && <Text> ({branchName}*)</Text>} </Text> - )} - {debugMode && ( - <Text color={Colors.AccentRed}> - {' ' + (debugMessage || '--debug')} - </Text> - )} - </Box> + </Gradient> + ) : ( + <Text color={Colors.LightBlue}> + {shortenPath(tildeifyPath(targetDir), 70)} + {branchName && <Text color={Colors.Gray}> ({branchName}*)</Text>} + </Text> + )} + {debugMode && ( + <Text color={Colors.AccentRed}> + {' ' + (debugMessage || '--debug')} + </Text> + )} + </Box> - {/* Middle Section: Centered Sandbox Info */} - <Box - flexGrow={1} - alignItems="center" - justifyContent="center" - display="flex" - > - {process.env.SANDBOX && process.env.SANDBOX !== 'sandbox-exec' ? ( - <Text color="green"> - {process.env.SANDBOX.replace(/^gemini-(?:cli-)?/, '')} - </Text> - ) : process.env.SANDBOX === 'sandbox-exec' ? ( - <Text color={Colors.AccentYellow}> - macOS Seatbelt{' '} - <Text color={Colors.Gray}>({process.env.SEATBELT_PROFILE})</Text> - </Text> - ) : ( - <Text color={Colors.AccentRed}> - no sandbox <Text color={Colors.Gray}>(see /docs)</Text> - </Text> - )} - </Box> + {/* Middle Section: Centered Sandbox Info */} + <Box + flexGrow={1} + alignItems="center" + justifyContent="center" + display="flex" + > + {process.env.SANDBOX && process.env.SANDBOX !== 'sandbox-exec' ? ( + <Text color="green"> + {process.env.SANDBOX.replace(/^gemini-(?:cli-)?/, '')} + </Text> + ) : process.env.SANDBOX === 'sandbox-exec' ? ( + <Text color={Colors.AccentYellow}> + macOS Seatbelt{' '} + <Text color={Colors.Gray}>({process.env.SEATBELT_PROFILE})</Text> + </Text> + ) : ( + <Text color={Colors.AccentRed}> + no sandbox <Text color={Colors.Gray}>(see /docs)</Text> + </Text> + )} + </Box> - {/* Right Section: Gemini Label and Console Summary */} - <Box alignItems="center"> - <Text color={Colors.AccentBlue}> - {' '} - {model}{' '} - <Text color={Colors.Gray}> - ({((1 - percentage) * 100).toFixed(0)}% context left) - </Text> + {/* Right Section: Gemini Label and Console Summary */} + <Box alignItems="center"> + <Text color={Colors.AccentBlue}> + {' '} + {model}{' '} + <ContextUsageDisplay + promptTokenCount={promptTokenCount} + model={model} + /> + </Text> + {corgiMode && ( + <Text> + <Text color={Colors.Gray}>| </Text> + <Text color={Colors.AccentRed}>▼</Text> + <Text color={Colors.Foreground}>(´</Text> + <Text color={Colors.AccentRed}>ᴥ</Text> + <Text color={Colors.Foreground}>`)</Text> + <Text color={Colors.AccentRed}>▼ </Text> </Text> - {corgiMode && ( - <Text> - <Text color={Colors.Gray}>| </Text> - <Text color={Colors.AccentRed}>▼</Text> - <Text color={Colors.Foreground}>(´</Text> - <Text color={Colors.AccentRed}>ᴥ</Text> - <Text color={Colors.Foreground}>`)</Text> - <Text color={Colors.AccentRed}>▼ </Text> - </Text> - )} - {!showErrorDetails && errorCount > 0 && ( - <Box> - <Text color={Colors.Gray}>| </Text> - <ConsoleSummaryDisplay errorCount={errorCount} /> - </Box> - )} - {showMemoryUsage && <MemoryUsageDisplay />} - </Box> + )} + {!showErrorDetails && errorCount > 0 && ( + <Box> + <Text color={Colors.Gray}>| </Text> + <ConsoleSummaryDisplay errorCount={errorCount} /> + </Box> + )} + {showMemoryUsage && <MemoryUsageDisplay />} </Box> - ); -}; + </Box> +); |