From 8a0a2523ca50eabe1e0701ac049e2e5c7f61791a Mon Sep 17 00:00:00 2001
From: Miguel Solorio <miguelsolorio@google.com>
Date: Thu, 5 Jun 2025 14:35:47 -0700
Subject: Allow themes to theme the UI (#769)

---
 packages/cli/src/ui/components/AboutBox.tsx                |  2 +-
 packages/cli/src/ui/components/AutoAcceptIndicator.tsx     |  2 +-
 packages/cli/src/ui/components/ConsoleSummaryDisplay.tsx   |  2 +-
 packages/cli/src/ui/components/ContextSummaryDisplay.tsx   |  2 +-
 packages/cli/src/ui/components/DetailedMessagesDisplay.tsx |  9 ++++-----
 packages/cli/src/ui/components/Footer.tsx                  | 14 +++++---------
 packages/cli/src/ui/components/Help.tsx                    |  4 ++--
 packages/cli/src/ui/components/InputPrompt.tsx             |  2 +-
 packages/cli/src/ui/components/LoadingIndicator.tsx        |  2 +-
 packages/cli/src/ui/components/MemoryUsageDisplay.tsx      | 10 +++-------
 packages/cli/src/ui/components/ShellModeIndicator.tsx      |  2 +-
 packages/cli/src/ui/components/SuggestionsDisplay.tsx      |  2 +-
 packages/cli/src/ui/components/ThemeDialog.tsx             | 11 ++++++-----
 packages/cli/src/ui/components/messages/DiffRenderer.tsx   |  8 ++++----
 .../cli/src/ui/components/messages/ToolGroupMessage.tsx    |  2 +-
 packages/cli/src/ui/components/messages/ToolMessage.tsx    |  6 +++---
 .../cli/src/ui/components/shared/RadioButtonSelect.tsx     |  4 +---
 17 files changed, 37 insertions(+), 47 deletions(-)

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

diff --git a/packages/cli/src/ui/components/AboutBox.tsx b/packages/cli/src/ui/components/AboutBox.tsx
index 472bf979..0744beff 100644
--- a/packages/cli/src/ui/components/AboutBox.tsx
+++ b/packages/cli/src/ui/components/AboutBox.tsx
@@ -24,7 +24,7 @@ export const AboutBox: React.FC<AboutBoxProps> = ({
 }) => (
   <Box
     borderStyle="round"
-    borderColor={Colors.SubtleComment}
+    borderColor={Colors.Gray}
     flexDirection="column"
     padding={1}
     marginY={1}
diff --git a/packages/cli/src/ui/components/AutoAcceptIndicator.tsx b/packages/cli/src/ui/components/AutoAcceptIndicator.tsx
index dbdb3e9a..9375a7d6 100644
--- a/packages/cli/src/ui/components/AutoAcceptIndicator.tsx
+++ b/packages/cli/src/ui/components/AutoAcceptIndicator.tsx
@@ -40,7 +40,7 @@ export const AutoAcceptIndicator: React.FC<AutoAcceptIndicatorProps> = ({
     <Box>
       <Text color={textColor}>
         {textContent}
-        {subText && <Text color={Colors.SubtleComment}>{subText}</Text>}
+        {subText && <Text color={Colors.Gray}>{subText}</Text>}
       </Text>
     </Box>
   );
diff --git a/packages/cli/src/ui/components/ConsoleSummaryDisplay.tsx b/packages/cli/src/ui/components/ConsoleSummaryDisplay.tsx
index fba536d2..6012b565 100644
--- a/packages/cli/src/ui/components/ConsoleSummaryDisplay.tsx
+++ b/packages/cli/src/ui/components/ConsoleSummaryDisplay.tsx
@@ -27,7 +27,7 @@ export const ConsoleSummaryDisplay: React.FC<ConsoleSummaryDisplayProps> = ({
       {errorCount > 0 && (
         <Text color={Colors.AccentRed}>
           {errorIcon} {errorCount} error{errorCount > 1 ? 's' : ''}{' '}
-          <Text color={Colors.SubtleComment}>(ctrl+O for details)</Text>
+          <Text color={Colors.Gray}>(ctrl+O for details)</Text>
         </Text>
       )}
     </Box>
diff --git a/packages/cli/src/ui/components/ContextSummaryDisplay.tsx b/packages/cli/src/ui/components/ContextSummaryDisplay.tsx
index 3cfb4d8d..b42785a2 100644
--- a/packages/cli/src/ui/components/ContextSummaryDisplay.tsx
+++ b/packages/cli/src/ui/components/ContextSummaryDisplay.tsx
@@ -47,5 +47,5 @@ export const ContextSummaryDisplay: React.FC<ContextSummaryDisplayProps> = ({
     summaryText += mcpText;
   }
 
-  return <Text color={Colors.SubtleComment}>{summaryText}</Text>;
+  return <Text color={Colors.Gray}>{summaryText}</Text>;
 };
diff --git a/packages/cli/src/ui/components/DetailedMessagesDisplay.tsx b/packages/cli/src/ui/components/DetailedMessagesDisplay.tsx
index cd3f37bb..c2ecb803 100644
--- a/packages/cli/src/ui/components/DetailedMessagesDisplay.tsx
+++ b/packages/cli/src/ui/components/DetailedMessagesDisplay.tsx
@@ -27,13 +27,12 @@ export const DetailedMessagesDisplay: React.FC<
       flexDirection="column"
       marginTop={1}
       borderStyle="round"
-      borderColor={Colors.SubtleComment}
+      borderColor={Colors.Gray}
       paddingX={1}
     >
       <Box marginBottom={1}>
         <Text bold color={Colors.Foreground}>
-          Debug Console{' '}
-          <Text color={Colors.SubtleComment}>(ctrl+O to close)</Text>
+          Debug Console <Text color={Colors.Gray}>(ctrl+O to close)</Text>
         </Text>
       </Box>
       {messages.map((msg, index) => {
@@ -50,7 +49,7 @@ export const DetailedMessagesDisplay: React.FC<
             icon = '\u2716'; // Heavy multiplication x (✖)
             break;
           case 'debug':
-            textColor = Colors.SubtleComment; // Or Colors.Gray
+            textColor = Colors.Gray; // Or Colors.Gray
             icon = '\u1F50D'; // Left-pointing magnifying glass (????)
             break;
           case 'log':
@@ -65,7 +64,7 @@ export const DetailedMessagesDisplay: React.FC<
             <Text color={textColor} wrap="wrap">
               {msg.content}
               {msg.count && msg.count > 1 && (
-                <Text color={Colors.SubtleComment}> (x{msg.count})</Text>
+                <Text color={Colors.Gray}> (x{msg.count})</Text>
               )}
             </Text>
           </Box>
diff --git a/packages/cli/src/ui/components/Footer.tsx b/packages/cli/src/ui/components/Footer.tsx
index 46d669b7..ea83a031 100644
--- a/packages/cli/src/ui/components/Footer.tsx
+++ b/packages/cli/src/ui/components/Footer.tsx
@@ -40,9 +40,7 @@ export const Footer: React.FC<FooterProps> = ({
     <Box>
       <Text color={Colors.LightBlue}>
         {shortenPath(tildeifyPath(targetDir), 70)}
-        {branchName && (
-          <Text color={Colors.SubtleComment}> ({branchName}*)</Text>
-        )}
+        {branchName && <Text color={Colors.Gray}> ({branchName}*)</Text>}
       </Text>
       {debugMode && (
         <Text color={Colors.AccentRed}>
@@ -65,13 +63,11 @@ export const Footer: React.FC<FooterProps> = ({
       ) : process.env.SANDBOX === 'sandbox-exec' ? (
         <Text color={Colors.AccentYellow}>
           sandbox-exec{' '}
-          <Text color={Colors.SubtleComment}>
-            ({process.env.SEATBELT_PROFILE})
-          </Text>
+          <Text color={Colors.Gray}>({process.env.SEATBELT_PROFILE})</Text>
         </Text>
       ) : (
         <Text color={Colors.AccentRed}>
-          no sandbox <Text color={Colors.SubtleComment}>(see README)</Text>
+          no sandbox <Text color={Colors.Gray}>(see README)</Text>
         </Text>
       )}
     </Box>
@@ -81,7 +77,7 @@ export const Footer: React.FC<FooterProps> = ({
       <Text color={Colors.AccentBlue}> {model} </Text>
       {corgiMode && (
         <Text>
-          <Text color={Colors.SubtleComment}>| </Text>
+          <Text color={Colors.Gray}>| </Text>
           <Text color={Colors.AccentRed}>▼</Text>
           <Text color={Colors.Foreground}>(´</Text>
           <Text color={Colors.AccentRed}>ᴥ</Text>
@@ -91,7 +87,7 @@ export const Footer: React.FC<FooterProps> = ({
       )}
       {!showErrorDetails && errorCount > 0 && (
         <Box>
-          <Text color={Colors.SubtleComment}>| </Text>
+          <Text color={Colors.Gray}>| </Text>
           <ConsoleSummaryDisplay errorCount={errorCount} />
         </Box>
       )}
diff --git a/packages/cli/src/ui/components/Help.tsx b/packages/cli/src/ui/components/Help.tsx
index 74d03573..92e94a8a 100644
--- a/packages/cli/src/ui/components/Help.tsx
+++ b/packages/cli/src/ui/components/Help.tsx
@@ -31,7 +31,7 @@ export const Help: React.FC<Help> = ({ commands }) => (
     {commands
       .filter((command) => command.description)
       .map((command: SlashCommand) => (
-        <Text key={command.name} color={Colors.SubtleComment}>
+        <Text key={command.name} color={Colors.Gray}>
           <Text bold color={Colors.AccentPurple}>
             {' '}
             /{command.name}
@@ -39,7 +39,7 @@ export const Help: React.FC<Help> = ({ commands }) => (
           {command.description && ' - ' + command.description}
         </Text>
       ))}
-    <Text color={Colors.SubtleComment}>
+    <Text color={Colors.Gray}>
       <Text bold color={Colors.AccentPurple}>
         {' '}
         !{' '}
diff --git a/packages/cli/src/ui/components/InputPrompt.tsx b/packages/cli/src/ui/components/InputPrompt.tsx
index 7e4c8c8b..4d71e612 100644
--- a/packages/cli/src/ui/components/InputPrompt.tsx
+++ b/packages/cli/src/ui/components/InputPrompt.tsx
@@ -349,7 +349,7 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
         </Text>
         <Box flexGrow={1} flexDirection="column">
           {buffer.text.length === 0 && placeholder ? (
-            <Text color={Colors.SubtleComment}>{placeholder}</Text>
+            <Text color={Colors.Gray}>{placeholder}</Text>
           ) : (
             linesToRender.map((lineText, visualIdxInRenderedSet) => {
               const cursorVisualRow = cursorVisualRowAbsolute - scrollVisualRow;
diff --git a/packages/cli/src/ui/components/LoadingIndicator.tsx b/packages/cli/src/ui/components/LoadingIndicator.tsx
index 6ff4dac8..61b74b89 100644
--- a/packages/cli/src/ui/components/LoadingIndicator.tsx
+++ b/packages/cli/src/ui/components/LoadingIndicator.tsx
@@ -40,7 +40,7 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
       {currentLoadingPhrase && (
         <Text color={Colors.AccentPurple}>{currentLoadingPhrase}</Text>
       )}
-      <Text color={Colors.SubtleComment}>
+      <Text color={Colors.Gray}>
         {streamingState === StreamingState.WaitingForConfirmation
           ? ''
           : ` (esc to cancel, ${elapsedTime}s)`}
diff --git a/packages/cli/src/ui/components/MemoryUsageDisplay.tsx b/packages/cli/src/ui/components/MemoryUsageDisplay.tsx
index 5d9a7c49..d768445c 100644
--- a/packages/cli/src/ui/components/MemoryUsageDisplay.tsx
+++ b/packages/cli/src/ui/components/MemoryUsageDisplay.tsx
@@ -12,18 +12,14 @@ import { formatMemoryUsage } from '../utils/formatters.js';
 
 export const MemoryUsageDisplay: React.FC = () => {
   const [memoryUsage, setMemoryUsage] = useState<string>('');
-  const [memoryUsageColor, setMemoryUsageColor] = useState<string>(
-    Colors.SubtleComment,
-  );
+  const [memoryUsageColor, setMemoryUsageColor] = useState<string>(Colors.Gray);
 
   useEffect(() => {
     const updateMemory = () => {
       const usage = process.memoryUsage().rss;
       setMemoryUsage(formatMemoryUsage(usage));
       setMemoryUsageColor(
-        usage >= 2 * 1024 * 1024 * 1024
-          ? Colors.AccentRed
-          : Colors.SubtleComment,
+        usage >= 2 * 1024 * 1024 * 1024 ? Colors.AccentRed : Colors.Gray,
       );
     };
     const intervalId = setInterval(updateMemory, 2000);
@@ -33,7 +29,7 @@ export const MemoryUsageDisplay: React.FC = () => {
 
   return (
     <Box>
-      <Text color={Colors.SubtleComment}>| </Text>
+      <Text color={Colors.Gray}>| </Text>
       <Text color={memoryUsageColor}>{memoryUsage}</Text>
     </Box>
   );
diff --git a/packages/cli/src/ui/components/ShellModeIndicator.tsx b/packages/cli/src/ui/components/ShellModeIndicator.tsx
index 612af1a6..f5b11b24 100644
--- a/packages/cli/src/ui/components/ShellModeIndicator.tsx
+++ b/packages/cli/src/ui/components/ShellModeIndicator.tsx
@@ -12,7 +12,7 @@ export const ShellModeIndicator: React.FC = () => (
   <Box>
     <Text color={Colors.AccentYellow}>
       shell mode enabled
-      <Text color={Colors.SubtleComment}> (esc to disable)</Text>
+      <Text color={Colors.Gray}> (esc to disable)</Text>
     </Text>
   </Box>
 );
diff --git a/packages/cli/src/ui/components/SuggestionsDisplay.tsx b/packages/cli/src/ui/components/SuggestionsDisplay.tsx
index fb8005f6..0620665f 100644
--- a/packages/cli/src/ui/components/SuggestionsDisplay.tsx
+++ b/packages/cli/src/ui/components/SuggestionsDisplay.tsx
@@ -57,7 +57,7 @@ export function SuggestionsDisplay({
       {visibleSuggestions.map((suggestion, index) => {
         const originalIndex = startIndex + index;
         const isActive = originalIndex === activeIndex;
-        const textColor = isActive ? Colors.AccentPurple : Colors.SubtleComment;
+        const textColor = isActive ? Colors.AccentPurple : Colors.Gray;
 
         return (
           <Box key={`${suggestion}-${originalIndex}`} width={width}>
diff --git a/packages/cli/src/ui/components/ThemeDialog.tsx b/packages/cli/src/ui/components/ThemeDialog.tsx
index 81a34ff4..eeccee4c 100644
--- a/packages/cli/src/ui/components/ThemeDialog.tsx
+++ b/packages/cli/src/ui/components/ThemeDialog.tsx
@@ -97,7 +97,7 @@ export function ThemeDialog({
   return (
     <Box
       borderStyle="round"
-      borderColor={Colors.SubtleComment}
+      borderColor={Colors.Gray}
       flexDirection="row"
       padding={1}
       width="100%"
@@ -106,7 +106,7 @@ export function ThemeDialog({
       <Box flexDirection="column" width="45%" paddingRight={2}>
         <Text bold={focusedSection === 'theme'}>
           {focusedSection === 'theme' ? '> ' : '  '}Select Theme{' '}
-          <Text color={Colors.SubtleComment}>{otherScopeModifiedMessage}</Text>
+          <Text color={Colors.Gray}>{otherScopeModifiedMessage}</Text>
         </Text>
         <RadioButtonSelect
           key={selectInputKey}
@@ -132,7 +132,7 @@ export function ThemeDialog({
         </Box>
 
         <Box marginTop={1}>
-          <Text color={Colors.SubtleComment}>
+          <Text color={Colors.Gray}>
             (Use Enter to select, Tab to change focus)
           </Text>
         </Box>
@@ -143,12 +143,13 @@ export function ThemeDialog({
         <Text bold>Preview</Text>
         <Box
           borderStyle="single"
-          borderColor={Colors.SubtleComment}
+          borderColor={Colors.Gray}
           padding={1}
           flexDirection="column"
         >
           {colorizeCode(
-            `def fibonacci(n):
+            `# function
+def fibonacci(n):
     a, b = 0, 1
     for _ in range(n):
         a, b = b, a + b
diff --git a/packages/cli/src/ui/components/messages/DiffRenderer.tsx b/packages/cli/src/ui/components/messages/DiffRenderer.tsx
index 1a4c69c0..0b35e32d 100644
--- a/packages/cli/src/ui/components/messages/DiffRenderer.tsx
+++ b/packages/cli/src/ui/components/messages/DiffRenderer.tsx
@@ -107,7 +107,7 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
 
   if (parsedLines.length === 0) {
     return (
-      <Box borderStyle="round" borderColor={Colors.SubtleComment} padding={1}>
+      <Box borderStyle="round" borderColor={Colors.Gray} padding={1}>
         <Text dimColor>No changes detected.</Text>
       </Box>
     );
@@ -162,7 +162,7 @@ const renderDiffContent = (
 
   if (displayableLines.length === 0) {
     return (
-      <Box borderStyle="round" borderColor={Colors.SubtleComment} padding={1}>
+      <Box borderStyle="round" borderColor={Colors.Gray} padding={1}>
         <Text dimColor>No changes detected.</Text>
       </Box>
     );
@@ -217,7 +217,7 @@ const renderDiffContent = (
               borderRight={false}
               borderLeft={false}
               borderStyle="double"
-              borderColor={Colors.SubtleComment}
+              borderColor={Colors.Gray}
             ></Box>,
           );
         }
@@ -260,7 +260,7 @@ const renderDiffContent = (
 
         acc.push(
           <Box key={lineKey} flexDirection="row">
-            <Text color={Colors.SubtleComment}>{gutterNumStr.padEnd(4)} </Text>
+            <Text color={Colors.Gray}>{gutterNumStr.padEnd(4)} </Text>
             <Text color={color} dimColor={dim}>
               {prefixSymbol}{' '}
             </Text>
diff --git a/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx b/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx
index 280b4321..71e6a59b 100644
--- a/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx
+++ b/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx
@@ -25,7 +25,7 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({
   const hasPending = !toolCalls.every(
     (t) => t.status === ToolCallStatus.Success,
   );
-  const borderColor = hasPending ? Colors.AccentYellow : Colors.SubtleComment;
+  const borderColor = hasPending ? Colors.AccentYellow : Colors.Gray;
 
   const staticHeight = /* border */ 2 + /* marginBottom */ 1;
 
diff --git a/packages/cli/src/ui/components/messages/ToolMessage.tsx b/packages/cli/src/ui/components/messages/ToolMessage.tsx
index 0cb5a101..3883d361 100644
--- a/packages/cli/src/ui/components/messages/ToolMessage.tsx
+++ b/packages/cli/src/ui/components/messages/ToolMessage.tsx
@@ -72,7 +72,7 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
           <Box flexDirection="column">
             {hiddenLines > 0 && (
               <Box>
-                <Text color={Colors.SubtleComment}>
+                <Text color={Colors.Gray}>
                   ... first {hiddenLines} line{hiddenLines === 1 ? '' : 's'}{' '}
                   hidden ...
                 </Text>
@@ -162,7 +162,7 @@ const ToolInfo: React.FC<ToolInfo> = ({
       case 'medium':
         return Colors.Foreground;
       case 'low':
-        return Colors.SubtleComment;
+        return Colors.Gray;
       default: {
         const exhaustiveCheck: never = emphasis;
         return exhaustiveCheck;
@@ -178,7 +178,7 @@ const ToolInfo: React.FC<ToolInfo> = ({
         <Text color={nameColor} bold>
           {name}
         </Text>{' '}
-        <Text color={Colors.SubtleComment}>{description}</Text>
+        <Text color={Colors.Gray}>{description}</Text>
       </Text>
     </Box>
   );
diff --git a/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx b/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx
index 5cd25c7c..22b5cecd 100644
--- a/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx
+++ b/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx
@@ -111,9 +111,7 @@ export function RadioButtonSelect<T>({
       return (
         <Text color={textColor}>
           {itemWithThemeProps.themeNameDisplay}{' '}
-          <Text color={Colors.SubtleComment}>
-            {itemWithThemeProps.themeTypeDisplay}
-          </Text>
+          <Text color={Colors.Gray}>{itemWithThemeProps.themeTypeDisplay}</Text>
         </Text>
       );
     }
-- 
cgit v1.2.3