From f7edf711906ed8492fc65f3c1cfad1ccd7ede187 Mon Sep 17 00:00:00 2001
From: Taylor Mullen <ntaylormullen@google.com>
Date: Sat, 19 Apr 2025 12:38:09 -0400
Subject: Give Gemini Code a face lift.

- This utilizes `ink-gradient` to render GEMINI CODE in amazing colors.
- Added a shared color configuration for UX (should this be in config?). It's very possible that we shouldn't be talking about the specific colors and instead be mentioning "foreground"/"background"/inlineCode etc. type colors.
- Updated existing color usages to utilize `Colors.*`

Fixes https://b.corp.google.com/issues/411385593
---
 packages/cli/src/ui/components/messages/DiffRenderer.tsx  | 14 +++++++++-----
 packages/cli/src/ui/components/messages/ErrorMessage.tsx  |  5 +++--
 packages/cli/src/ui/components/messages/GeminiMessage.tsx |  5 +++--
 packages/cli/src/ui/components/messages/InfoMessage.tsx   |  5 +++--
 .../ui/components/messages/ToolConfirmationMessage.tsx    |  5 ++++-
 .../cli/src/ui/components/messages/ToolGroupMessage.tsx   |  3 ++-
 packages/cli/src/ui/components/messages/ToolMessage.tsx   | 15 ++++++++-------
 packages/cli/src/ui/components/messages/UserMessage.tsx   |  3 ++-
 8 files changed, 34 insertions(+), 21 deletions(-)

(limited to 'packages/cli/src/ui/components/messages')

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>
-- 
cgit v1.2.3