diff options
Diffstat (limited to 'packages/cli/src/ui/components/messages')
10 files changed, 81 insertions, 58 deletions
diff --git a/packages/cli/src/ui/components/messages/CompressionMessage.tsx b/packages/cli/src/ui/components/messages/CompressionMessage.tsx index c7ef122b..8f46a361 100644 --- a/packages/cli/src/ui/components/messages/CompressionMessage.tsx +++ b/packages/cli/src/ui/components/messages/CompressionMessage.tsx @@ -8,7 +8,7 @@ import React from 'react'; import { Box, Text } from 'ink'; import { CompressionProps } from '../../types.js'; import Spinner from 'ink-spinner'; -import { Colors } from '../../colors.js'; +import { theme } from '../../semantic-colors.js'; export interface CompressionDisplayProps { compression: CompressionProps; @@ -32,13 +32,13 @@ export const CompressionMessage: React.FC<CompressionDisplayProps> = ({ {compression.isPending ? ( <Spinner type="dots" /> ) : ( - <Text color={Colors.AccentPurple}>✦</Text> + <Text color={theme.text.accent}>✦</Text> )} </Box> <Box> <Text color={ - compression.isPending ? Colors.AccentPurple : Colors.AccentGreen + compression.isPending ? theme.text.accent : theme.status.success } > {text} diff --git a/packages/cli/src/ui/components/messages/DiffRenderer.tsx b/packages/cli/src/ui/components/messages/DiffRenderer.tsx index fda5f1d4..edea9939 100644 --- a/packages/cli/src/ui/components/messages/DiffRenderer.tsx +++ b/packages/cli/src/ui/components/messages/DiffRenderer.tsx @@ -6,11 +6,9 @@ import React from 'react'; import { Box, Text } from 'ink'; -import { Colors } from '../../colors.js'; import crypto from 'crypto'; import { colorizeCode, colorizeLine } from '../../utils/CodeColorizer.js'; import { MaxSizedBox } from '../shared/MaxSizedBox.js'; -import { theme } from '../../semantic-colors.js'; interface DiffLine { type: 'add' | 'del' | 'context' | 'hunk' | 'other'; @@ -108,14 +106,20 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({ theme, }) => { if (!diffContent || typeof diffContent !== 'string') { - return <Text color={Colors.AccentYellow}>No diff content.</Text>; + return ( + <Text color={theme?.semanticColors.status.warning}>No diff content.</Text> + ); } const parsedLines = parseDiffWithLineNumbers(diffContent); if (parsedLines.length === 0) { return ( - <Box borderStyle="round" borderColor={Colors.Gray} padding={1}> + <Box + borderStyle="round" + borderColor={theme?.semanticColors.border.default} + padding={1} + > <Text dimColor>No changes detected.</Text> </Box> ); @@ -158,6 +162,7 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({ tabWidth, availableTerminalHeight, terminalWidth, + theme, ); } @@ -170,6 +175,7 @@ const renderDiffContent = ( tabWidth = DEFAULT_TAB_WIDTH, availableTerminalHeight: number | undefined, terminalWidth: number, + theme: import('../../themes/theme.js').Theme | undefined, ) => { // 1. Normalize whitespace (replace tabs with spaces) *before* further processing const normalizedLines = parsedLines.map((line) => ({ @@ -184,7 +190,11 @@ const renderDiffContent = ( if (displayableLines.length === 0) { return ( - <Box borderStyle="round" borderColor={Colors.Gray} padding={1}> + <Box + borderStyle="round" + borderColor={theme?.semanticColors.border.default} + padding={1} + > <Text dimColor>No changes detected.</Text> </Box> ); @@ -248,7 +258,10 @@ const renderDiffContent = ( ) { acc.push( <Box key={`gap-${index}`}> - <Text wrap="truncate" color={Colors.Gray}> + <Text + wrap="truncate" + color={theme?.semanticColors.border.default} + > {'═'.repeat(terminalWidth)} </Text> </Box>, @@ -289,12 +302,12 @@ const renderDiffContent = ( acc.push( <Box key={lineKey} flexDirection="row"> <Text - color={theme.text.secondary} + color={theme?.semanticColors.text.secondary} backgroundColor={ line.type === 'add' - ? theme.background.diff.added + ? theme?.semanticColors.background.diff.added : line.type === 'del' - ? theme.background.diff.removed + ? theme?.semanticColors.background.diff.removed : undefined } > @@ -302,30 +315,32 @@ const renderDiffContent = ( </Text> {line.type === 'context' ? ( <> - <Text>{prefixSymbol} </Text> + <Text color={theme?.semanticColors.text.primary}> + {prefixSymbol}{' '} + </Text> <Text wrap="wrap"> - {colorizeLine(displayContent, language)} + {colorizeLine(displayContent, language, theme)} </Text> </> ) : ( <Text backgroundColor={ line.type === 'add' - ? theme.background.diff.added - : theme.background.diff.removed + ? theme?.semanticColors.background.diff.added + : theme?.semanticColors.background.diff.removed } wrap="wrap" > <Text color={ line.type === 'add' - ? theme.status.success - : theme.status.error + ? theme?.semanticColors.status.success + : theme?.semanticColors.status.error } > {prefixSymbol} </Text>{' '} - {colorizeLine(displayContent, language)} + {colorizeLine(displayContent, language, theme)} </Text> )} </Box>, diff --git a/packages/cli/src/ui/components/messages/ErrorMessage.tsx b/packages/cli/src/ui/components/messages/ErrorMessage.tsx index edbea435..bc249acf 100644 --- a/packages/cli/src/ui/components/messages/ErrorMessage.tsx +++ b/packages/cli/src/ui/components/messages/ErrorMessage.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { Text, Box } from 'ink'; -import { Colors } from '../../colors.js'; +import { theme } from '../../semantic-colors.js'; interface ErrorMessageProps { text: string; @@ -19,10 +19,10 @@ export const ErrorMessage: React.FC<ErrorMessageProps> = ({ text }) => { return ( <Box flexDirection="row" marginBottom={1}> <Box width={prefixWidth}> - <Text color={Colors.AccentRed}>{prefix}</Text> + <Text color={theme.status.error}>{prefix}</Text> </Box> <Box flexGrow={1}> - <Text wrap="wrap" color={Colors.AccentRed}> + <Text wrap="wrap" color={theme.status.error}> {text} </Text> </Box> diff --git a/packages/cli/src/ui/components/messages/GeminiMessage.tsx b/packages/cli/src/ui/components/messages/GeminiMessage.tsx index 9863acd6..21c2f77d 100644 --- a/packages/cli/src/ui/components/messages/GeminiMessage.tsx +++ b/packages/cli/src/ui/components/messages/GeminiMessage.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { Text, Box } from 'ink'; import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js'; -import { Colors } from '../../colors.js'; +import { theme } from '../../semantic-colors.js'; interface GeminiMessageProps { text: string; @@ -28,7 +28,7 @@ export const GeminiMessage: React.FC<GeminiMessageProps> = ({ return ( <Box flexDirection="row"> <Box width={prefixWidth}> - <Text color={Colors.AccentPurple}>{prefix}</Text> + <Text color={theme.text.accent}>{prefix}</Text> </Box> <Box flexGrow={1} flexDirection="column"> <MarkdownDisplay diff --git a/packages/cli/src/ui/components/messages/InfoMessage.tsx b/packages/cli/src/ui/components/messages/InfoMessage.tsx index c9129999..5b69216d 100644 --- a/packages/cli/src/ui/components/messages/InfoMessage.tsx +++ b/packages/cli/src/ui/components/messages/InfoMessage.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { Text, Box } from 'ink'; -import { Colors } from '../../colors.js'; +import { theme } from '../../semantic-colors.js'; interface InfoMessageProps { text: string; @@ -19,10 +19,10 @@ export const InfoMessage: React.FC<InfoMessageProps> = ({ text }) => { return ( <Box flexDirection="row" marginTop={1}> <Box width={prefixWidth}> - <Text color={Colors.AccentYellow}>{prefix}</Text> + <Text color={theme.status.warning}>{prefix}</Text> </Box> <Box flexGrow={1}> - <Text wrap="wrap" color={Colors.AccentYellow}> + <Text wrap="wrap" color={theme.status.warning}> {text} </Text> </Box> diff --git a/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx b/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx index 2f93609e..599b5445 100644 --- a/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx +++ b/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { Box, Text } from 'ink'; import { DiffRenderer } from './DiffRenderer.js'; -import { Colors } from '../../colors.js'; +import { theme } from '../../semantic-colors.js'; import { ToolCallConfirmationDetails, ToolConfirmationOutcome, @@ -112,13 +112,13 @@ export const ToolConfirmationMessage: React.FC< <Box minWidth="90%" borderStyle="round" - borderColor={Colors.Gray} + borderColor={theme.border.default} justifyContent="space-around" padding={1} overflow="hidden" > - <Text>Modify in progress: </Text> - <Text color={Colors.AccentGreen}> + <Text color={theme.text.primary}>Modify in progress: </Text> + <Text color={theme.status.success}> Save and close external editor to continue </Text> </Box> @@ -192,7 +192,7 @@ export const ToolConfirmationMessage: React.FC< maxWidth={Math.max(childWidth - 4, 1)} > <Box> - <Text color={Colors.AccentCyan}>{executionProps.command}</Text> + <Text color={theme.text.accent}>{executionProps.command}</Text> </Box> </MaxSizedBox> </Box> @@ -222,12 +222,15 @@ export const ToolConfirmationMessage: React.FC< bodyContent = ( <Box flexDirection="column" paddingX={1} marginLeft={1}> - <Text color={Colors.AccentCyan}>{infoProps.prompt}</Text> + <Text color={theme.text.accent}>{infoProps.prompt}</Text> {displayUrls && infoProps.urls && infoProps.urls.length > 0 && ( <Box flexDirection="column" marginTop={1}> - <Text>URLs to fetch:</Text> + <Text color={theme.text.primary}>URLs to fetch:</Text> {infoProps.urls.map((url) => ( - <Text key={url}> - {url}</Text> + <Text key={url} color={theme.text.primary}> + {' '} + - {url} + </Text> ))} </Box> )} @@ -239,8 +242,8 @@ export const ToolConfirmationMessage: React.FC< bodyContent = ( <Box flexDirection="column" paddingX={1} marginLeft={1}> - <Text color={Colors.AccentCyan}>MCP Server: {mcpProps.serverName}</Text> - <Text color={Colors.AccentCyan}>Tool: {mcpProps.toolName}</Text> + <Text color={theme.text.accent}>MCP Server: {mcpProps.serverName}</Text> + <Text color={theme.text.accent}>Tool: {mcpProps.toolName}</Text> </Box> ); @@ -275,7 +278,9 @@ export const ToolConfirmationMessage: React.FC< {/* Confirmation Question */} <Box marginBottom={1} flexShrink={0}> - <Text wrap="truncate">{question}</Text> + <Text wrap="truncate" color={theme.text.primary}> + {question} + </Text> </Box> {/* Select Input for Options */} diff --git a/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx b/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx index e2df3d9c..3e7a317c 100644 --- a/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx +++ b/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx @@ -9,7 +9,7 @@ import { Box } from 'ink'; import { IndividualToolCallDisplay, ToolCallStatus } from '../../types.js'; import { ToolMessage } from './ToolMessage.js'; import { ToolConfirmationMessage } from './ToolConfirmationMessage.js'; -import { Colors } from '../../colors.js'; +import { theme } from '../../semantic-colors.js'; import { Config } from '@google/gemini-cli-core'; import { SHELL_COMMAND_NAME } from '../../constants.js'; @@ -35,7 +35,7 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({ ); const isShellCommand = toolCalls.some((t) => t.name === SHELL_COMMAND_NAME); const borderColor = - hasPending || isShellCommand ? Colors.AccentYellow : Colors.Gray; + hasPending || isShellCommand ? theme.status.warning : theme.border.default; const staticHeight = /* border */ 2 + /* marginBottom */ 1; // This is a bit of a magic number, but it accounts for the border and diff --git a/packages/cli/src/ui/components/messages/ToolMessage.tsx b/packages/cli/src/ui/components/messages/ToolMessage.tsx index e1eb75b8..bf82c400 100644 --- a/packages/cli/src/ui/components/messages/ToolMessage.tsx +++ b/packages/cli/src/ui/components/messages/ToolMessage.tsx @@ -8,7 +8,7 @@ import React from 'react'; import { Box, Text } from 'ink'; import { IndividualToolCallDisplay, ToolCallStatus } from '../../types.js'; import { DiffRenderer } from './DiffRenderer.js'; -import { Colors } from '../../colors.js'; +import { theme } from '../../semantic-colors.js'; import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js'; import { GeminiRespondingSpinner } from '../GeminiRespondingSpinner.js'; import { MaxSizedBox } from '../shared/MaxSizedBox.js'; @@ -90,7 +90,9 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({ {typeof resultDisplay === 'string' && !renderOutputAsMarkdown && ( <MaxSizedBox maxHeight={availableHeight} maxWidth={childWidth}> <Box> - <Text wrap="wrap">{resultDisplay}</Text> + <Text wrap="wrap" color={theme.text.primary}> + {resultDisplay} + </Text> </Box> </MaxSizedBox> )} @@ -118,7 +120,7 @@ const ToolStatusIndicator: React.FC<ToolStatusIndicatorProps> = ({ }) => ( <Box minWidth={STATUS_INDICATOR_WIDTH}> {status === ToolCallStatus.Pending && ( - <Text color={Colors.AccentGreen}>o</Text> + <Text color={theme.status.success}>o</Text> )} {status === ToolCallStatus.Executing && ( <GeminiRespondingSpinner @@ -127,18 +129,18 @@ const ToolStatusIndicator: React.FC<ToolStatusIndicatorProps> = ({ /> )} {status === ToolCallStatus.Success && ( - <Text color={Colors.AccentGreen}>✔</Text> + <Text color={theme.status.success}>✔</Text> )} {status === ToolCallStatus.Confirming && ( - <Text color={Colors.AccentYellow}>?</Text> + <Text color={theme.status.warning}>?</Text> )} {status === ToolCallStatus.Canceled && ( - <Text color={Colors.AccentYellow} bold> + <Text color={theme.status.warning} bold> - </Text> )} {status === ToolCallStatus.Error && ( - <Text color={Colors.AccentRed} bold> + <Text color={theme.status.error} bold> x </Text> )} @@ -160,11 +162,11 @@ const ToolInfo: React.FC<ToolInfo> = ({ const nameColor = React.useMemo<string>(() => { switch (emphasis) { case 'high': - return Colors.Foreground; + return theme.text.primary; case 'medium': - return Colors.Foreground; + return theme.text.primary; case 'low': - return Colors.Gray; + return theme.text.secondary; default: { const exhaustiveCheck: never = emphasis; return exhaustiveCheck; @@ -176,18 +178,19 @@ const ToolInfo: React.FC<ToolInfo> = ({ <Text wrap="truncate-end" strikethrough={status === ToolCallStatus.Canceled} + color={theme.text.primary} > <Text color={nameColor} bold> {name} </Text>{' '} - <Text color={Colors.Gray}>{description}</Text> + <Text color={theme.text.secondary}>{description}</Text> </Text> </Box> ); }; const TrailingIndicator: React.FC = () => ( - <Text color={Colors.Foreground} wrap="truncate"> + <Text color={theme.text.primary} wrap="truncate"> {' '} ← </Text> diff --git a/packages/cli/src/ui/components/messages/UserMessage.tsx b/packages/cli/src/ui/components/messages/UserMessage.tsx index 332cb0f4..f9a6f7a5 100644 --- a/packages/cli/src/ui/components/messages/UserMessage.tsx +++ b/packages/cli/src/ui/components/messages/UserMessage.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { Text, Box } from 'ink'; -import { Colors } from '../../colors.js'; +import { theme } from '../../semantic-colors.js'; interface UserMessageProps { text: string; @@ -17,8 +17,8 @@ export const UserMessage: React.FC<UserMessageProps> = ({ text }) => { const prefixWidth = prefix.length; const isSlashCommand = text.startsWith('/'); - const textColor = isSlashCommand ? Colors.AccentPurple : Colors.Gray; - const borderColor = isSlashCommand ? Colors.AccentPurple : Colors.Gray; + const textColor = isSlashCommand ? theme.text.accent : theme.text.secondary; + const borderColor = isSlashCommand ? theme.text.accent : theme.border.default; return ( <Box diff --git a/packages/cli/src/ui/components/messages/UserShellMessage.tsx b/packages/cli/src/ui/components/messages/UserShellMessage.tsx index 946ca7e7..57b917d0 100644 --- a/packages/cli/src/ui/components/messages/UserShellMessage.tsx +++ b/packages/cli/src/ui/components/messages/UserShellMessage.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { Box, Text } from 'ink'; -import { Colors } from '../../colors.js'; +import { theme } from '../../semantic-colors.js'; interface UserShellMessageProps { text: string; @@ -18,8 +18,8 @@ export const UserShellMessage: React.FC<UserShellMessageProps> = ({ text }) => { return ( <Box> - <Text color={Colors.AccentCyan}>$ </Text> - <Text>{commandToDisplay}</Text> + <Text color={theme.text.accent}>$ </Text> + <Text color={theme.text.primary}>{commandToDisplay}</Text> </Box> ); }; |