diff options
Diffstat (limited to 'packages/cli/src/ui/components/messages')
8 files changed, 34 insertions, 21 deletions
diff --git a/packages/cli/src/ui/components/messages/DiffRenderer.tsx b/packages/cli/src/ui/components/messages/DiffRenderer.tsx index b16a2561..01cc4938 100644 --- a/packages/cli/src/ui/components/messages/DiffRenderer.tsx +++ b/packages/cli/src/ui/components/messages/DiffRenderer.tsx @@ -6,6 +6,7 @@ import React from 'react'; import { Box, Text } from 'ink'; +import { Colors } from '../../colors.js'; interface DiffLine { type: 'add' | 'del' | 'context' | 'hunk' | 'other'; @@ -96,7 +97,7 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({ tabWidth = DEFAULT_TAB_WIDTH, }) => { if (!diffContent || typeof diffContent !== 'string') { - return <Text color="yellow">No diff content.</Text>; + return <Text color={Colors.AccentYellow}>No diff content.</Text>; } const parsedLines = parseDiffWithLineNumbers(diffContent); @@ -114,7 +115,7 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({ if (displayableLines.length === 0) { return ( - <Box borderStyle="round" borderColor="gray" padding={1}> + <Box borderStyle="round" borderColor={Colors.SubtleComment} padding={1}> <Text dimColor>No changes detected.</Text> </Box> ); @@ -137,7 +138,11 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({ // --- End Modification --- return ( - <Box borderStyle="round" borderColor="gray" flexDirection="column"> + <Box + borderStyle="round" + borderColor={Colors.SubtleComment} + flexDirection="column" + > {/* Iterate over the lines that should be displayed (already normalized) */} {displayableLines.map((line, index) => { const key = `diff-line-${index}`; @@ -165,7 +170,6 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({ break; default: throw new Error(`Unknown line type: ${line.type}`); - break; } // Render the line content *after* stripping the calculated *minimum* baseIndentation. @@ -175,7 +179,7 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({ return ( // Using your original rendering structure <Box key={key} flexDirection="row"> - <Text color="gray">{gutterNumStr} </Text> + <Text color={Colors.SubtleComment}>{gutterNumStr} </Text> <Text color={color} dimColor={dim}> {prefixSymbol}{' '} </Text> diff --git a/packages/cli/src/ui/components/messages/ErrorMessage.tsx b/packages/cli/src/ui/components/messages/ErrorMessage.tsx index fc770dc0..22d82465 100644 --- a/packages/cli/src/ui/components/messages/ErrorMessage.tsx +++ b/packages/cli/src/ui/components/messages/ErrorMessage.tsx @@ -6,6 +6,7 @@ import React from 'react'; import { Text, Box } from 'ink'; +import { Colors } from '../../colors.js'; interface ErrorMessageProps { text: string; @@ -18,10 +19,10 @@ export const ErrorMessage: React.FC<ErrorMessageProps> = ({ text }) => { return ( <Box flexDirection="row"> <Box width={prefixWidth}> - <Text color="red">{prefix}</Text> + <Text color={Colors.AccentRed}>{prefix}</Text> </Box> <Box flexGrow={1}> - <Text wrap="wrap" color="red"> + <Text wrap="wrap" color={Colors.AccentRed}> {text} </Text> </Box> diff --git a/packages/cli/src/ui/components/messages/GeminiMessage.tsx b/packages/cli/src/ui/components/messages/GeminiMessage.tsx index 08f6cc68..3319dd63 100644 --- a/packages/cli/src/ui/components/messages/GeminiMessage.tsx +++ b/packages/cli/src/ui/components/messages/GeminiMessage.tsx @@ -7,6 +7,7 @@ import React from 'react'; import { Text, Box } from 'ink'; import { MarkdownRenderer } from '../../utils/MarkdownRenderer.js'; +import { Colors } from '../../colors.js'; interface GeminiMessageProps { text: string; @@ -28,7 +29,7 @@ export const GeminiMessage: React.FC<GeminiMessageProps> = ({ text }) => { return ( <Box flexDirection="row"> <Box width={prefixWidth}> - <Text color="blue">{prefix}</Text> + <Text color={Colors.AccentPurple}>{prefix}</Text> </Box> <Box flexGrow={1}></Box> </Box> @@ -38,7 +39,7 @@ export const GeminiMessage: React.FC<GeminiMessageProps> = ({ text }) => { return ( <Box flexDirection="row"> <Box width={prefixWidth}> - <Text color="blue">{prefix}</Text> + <Text color={Colors.AccentPurple}>{prefix}</Text> </Box> <Box flexGrow={1} flexDirection="column"> {renderedBlocks} diff --git a/packages/cli/src/ui/components/messages/InfoMessage.tsx b/packages/cli/src/ui/components/messages/InfoMessage.tsx index 95f49522..b30e4473 100644 --- a/packages/cli/src/ui/components/messages/InfoMessage.tsx +++ b/packages/cli/src/ui/components/messages/InfoMessage.tsx @@ -6,6 +6,7 @@ import React from 'react'; import { Text, Box } from 'ink'; +import { Colors } from '../../colors.js'; interface InfoMessageProps { text: string; @@ -18,10 +19,10 @@ export const InfoMessage: React.FC<InfoMessageProps> = ({ text }) => { return ( <Box flexDirection="row"> <Box width={prefixWidth}> - <Text color="yellow">{prefix}</Text> + <Text color={Colors.AccentYellow}>{prefix}</Text> </Box> <Box flexGrow={1}> - <Text wrap="wrap" color="yellow"> + <Text wrap="wrap" color={Colors.AccentYellow}> {text} </Text> </Box> diff --git a/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx b/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx index 32a7dc1d..ee0b7ef7 100644 --- a/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx +++ b/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx @@ -16,6 +16,7 @@ import { import { PartListUnion } from '@google/genai'; import { DiffRenderer } from './DiffRenderer.js'; import { UI_WIDTH } from '../../constants.js'; +import { Colors } from '../../colors.js'; export interface ToolConfirmationMessageProps { confirmationDetails: ToolCallConfirmationDetails; @@ -74,7 +75,9 @@ export const ToolConfirmationMessage: React.FC< confirmationDetails as ToolExecuteConfirmationDetails; // For execution, we still need context display and description - const commandDisplay = <Text color="cyan">{executionProps.command}</Text>; + const commandDisplay = ( + <Text color={Colors.AccentCyan}>{executionProps.command}</Text> + ); // Combine command and description into bodyContent for layout consistency bodyContent = ( diff --git a/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx b/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx index 0662e333..448ed4c5 100644 --- a/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx +++ b/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx @@ -10,6 +10,7 @@ import { IndividualToolCallDisplay, ToolCallStatus } from '../../types.js'; import { ToolMessage } from './ToolMessage.js'; import { PartListUnion } from '@google/genai'; import { ToolConfirmationMessage } from './ToolConfirmationMessage.js'; +import { Colors } from '../../colors.js'; interface ToolGroupMessageProps { toolCalls: IndividualToolCallDisplay[]; @@ -22,7 +23,7 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({ onSubmit, }) => { const hasPending = toolCalls.some((t) => t.status === ToolCallStatus.Pending); - const borderColor = hasPending ? 'yellow' : 'blue'; + const borderColor = hasPending ? Colors.AccentYellow : Colors.AccentBlue; return ( <Box flexDirection="column" borderStyle="round" borderColor={borderColor}> diff --git a/packages/cli/src/ui/components/messages/ToolMessage.tsx b/packages/cli/src/ui/components/messages/ToolMessage.tsx index 9c1dd36b..372d5ffe 100644 --- a/packages/cli/src/ui/components/messages/ToolMessage.tsx +++ b/packages/cli/src/ui/components/messages/ToolMessage.tsx @@ -16,6 +16,7 @@ import { } from '../../types.js'; import { DiffRenderer } from './DiffRenderer.js'; import { FileDiff, ToolResultDisplay } from '../../../tools/tools.js'; +import { Colors } from '../../colors.js'; export const ToolMessage: React.FC<IndividualToolCallDisplay> = ({ callId, @@ -31,7 +32,7 @@ export const ToolMessage: React.FC<IndividualToolCallDisplay> = ({ | undefined; const typedResultDisplay = resultDisplay as ToolResultDisplay | undefined; - let color = 'gray'; + let color = Colors.SubtleComment; let prefix = ''; switch (status) { case ToolCallStatus.Pending: @@ -41,15 +42,15 @@ export const ToolMessage: React.FC<IndividualToolCallDisplay> = ({ prefix = 'Executing:'; break; case ToolCallStatus.Confirming: - color = 'yellow'; + color = Colors.AccentYellow; prefix = 'Confirm:'; break; case ToolCallStatus.Success: - color = 'green'; + color = Colors.AccentGreen; prefix = 'Success:'; break; case ToolCallStatus.Error: - color = 'red'; + color = Colors.AccentRed; prefix = 'Error:'; break; default: @@ -60,11 +61,11 @@ export const ToolMessage: React.FC<IndividualToolCallDisplay> = ({ const title = `${prefix} ${name}`; return ( - <Box key={callId} borderStyle="round" paddingX={1} flexDirection="column"> + <Box key={callId} flexDirection="column" paddingX={1}> <Box> {status === ToolCallStatus.Invoked && ( <Box marginRight={1}> - <Text color="blue"> + <Text color={Colors.AccentBlue}> <Spinner type="dots" /> </Text> </Box> @@ -91,7 +92,7 @@ export const ToolMessage: React.FC<IndividualToolCallDisplay> = ({ )} {/* Display command for execute */} {'command' in typedConfirmationDetails && ( - <Text color="yellow"> + <Text color={Colors.AccentYellow}> Command:{' '} { (typedConfirmationDetails as ToolExecuteConfirmationDetails) diff --git a/packages/cli/src/ui/components/messages/UserMessage.tsx b/packages/cli/src/ui/components/messages/UserMessage.tsx index bc9822a4..e9771b82 100644 --- a/packages/cli/src/ui/components/messages/UserMessage.tsx +++ b/packages/cli/src/ui/components/messages/UserMessage.tsx @@ -6,6 +6,7 @@ import React from 'react'; import { Text, Box } from 'ink'; +import { Colors } from '../../colors.js'; interface UserMessageProps { text: string; @@ -18,7 +19,7 @@ export const UserMessage: React.FC<UserMessageProps> = ({ text }) => { return ( <Box flexDirection="row"> <Box width={prefixWidth}> - <Text color="gray">{prefix}</Text> + <Text color={Colors.SubtleComment}>{prefix}</Text> </Box> <Box flexGrow={1}> <Text wrap="wrap">{text}</Text> |