Color enhancements (#680)

6 files changed, 49 insertions, 15 deletions

diff --git a/packages/cli/src/ui/components/ConsoleSummaryDisplay.tsx b/packages/cli/src/ui/components/ConsoleSummaryDisplay.tsx
index 762a4faa..fba536d2 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.SubtleComment}>(ctrl+O for details)</Text>
         </Text>
       )}
     </Box>
diff --git a/packages/cli/src/ui/components/DetailedMessagesDisplay.tsx b/packages/cli/src/ui/components/DetailedMessagesDisplay.tsx
index 1ab78426..cd3f37bb 100644
--- a/packages/cli/src/ui/components/DetailedMessagesDisplay.tsx
+++ b/packages/cli/src/ui/components/DetailedMessagesDisplay.tsx
@@ -33,7 +33,7 @@ export const DetailedMessagesDisplay: React.FC<
       <Box marginBottom={1}>
         <Text bold color={Colors.Foreground}>
           Debug Console{' '}
-          <Text color={Colors.SubtleComment}>(CTRL-O to close)</Text>
+          <Text color={Colors.SubtleComment}>(ctrl+O to close)</Text>
         </Text>
       </Box>
       {messages.map((msg, index) => {
diff --git a/packages/cli/src/ui/components/Footer.tsx b/packages/cli/src/ui/components/Footer.tsx
index 61632bcb..46d669b7 100644
--- a/packages/cli/src/ui/components/Footer.tsx
+++ b/packages/cli/src/ui/components/Footer.tsx
@@ -64,10 +64,15 @@ export const Footer: React.FC<FooterProps> = ({
         </Text>
       ) : process.env.SANDBOX === 'sandbox-exec' ? (
         <Text color={Colors.AccentYellow}>
-          sandbox-exec ({process.env.SEATBELT_PROFILE})
+          sandbox-exec{' '}
+          <Text color={Colors.SubtleComment}>
+            ({process.env.SEATBELT_PROFILE})
+          </Text>
         </Text>
       ) : (
-        <Text color={Colors.AccentRed}>no sandbox (see README)</Text>
+        <Text color={Colors.AccentRed}>
+          no sandbox <Text color={Colors.SubtleComment}>(see README)</Text>
+        </Text>
       )}
     </Box>
 
diff --git a/packages/cli/src/ui/components/LoadingIndicator.tsx b/packages/cli/src/ui/components/LoadingIndicator.tsx
index 31c6fee9..64059d53 100644
--- a/packages/cli/src/ui/components/LoadingIndicator.tsx
+++ b/packages/cli/src/ui/components/LoadingIndicator.tsx
@@ -37,8 +37,8 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
           }
         />
       </Box>
-      <Text color={Colors.AccentPurple}>
-        {currentLoadingPhrase}
+      <Text color={Colors.AccentPurple}>{currentLoadingPhrase}</Text>
+      <Text color={Colors.SubtleComment}>
         {streamingState === StreamingState.WaitingForConfirmation
           ? ''
           : ` (esc to cancel, ${elapsedTime}s)`}
diff --git a/packages/cli/src/ui/components/messages/DiffRenderer.tsx b/packages/cli/src/ui/components/messages/DiffRenderer.tsx
index 8780d9c2..1a4c69c0 100644
--- a/packages/cli/src/ui/components/messages/DiffRenderer.tsx
+++ b/packages/cli/src/ui/components/messages/DiffRenderer.tsx
@@ -260,7 +260,7 @@ const renderDiffContent = (
 
         acc.push(
           <Box key={lineKey} flexDirection="row">
-            <Text color={Colors.Foreground}>{gutterNumStr.padEnd(4)} </Text>
+            <Text color={Colors.SubtleComment}>{gutterNumStr.padEnd(4)} </Text>
             <Text color={color} dimColor={dim}>
               {prefixSymbol}{' '}
             </Text>
diff --git a/packages/cli/src/ui/utils/CodeColorizer.tsx b/packages/cli/src/ui/utils/CodeColorizer.tsx
index 1916ff50..8f905498 100644
--- a/packages/cli/src/ui/utils/CodeColorizer.tsx
+++ b/packages/cli/src/ui/utils/CodeColorizer.tsx
@@ -94,16 +94,31 @@ export function colorizeCode(
   const activeTheme = themeManager.getActiveTheme();
 
   try {
-    const hastTree =
-      !language || !lowlight.registered(language)
-        ? lowlight.highlightAuto(codeToHighlight)
-        : lowlight.highlight(language, codeToHighlight);
-
     // Render the HAST tree using the adapted theme
     // Apply the theme's default foreground color to the top-level Text element
+    const lines = codeToHighlight.split('\n');
+    const getHighlightedLines = (line: string) =>
+      !language || !lowlight.registered(language)
+        ? lowlight.highlightAuto(line)
+        : lowlight.highlight(language, line);
+
     return (
-      <Text color={activeTheme.defaultColor}>
-        {renderHastNode(hastTree, activeTheme, undefined)}
+      <Text>
+        {lines.map((line, index) => (
+          <Text key={index}>
+            <Text color={activeTheme.colors.SubtleComment}>
+              {`${String(index + 1).padStart(3, ' ')} `}
+            </Text>
+            <Text color={activeTheme.defaultColor}>
+              {renderHastNode(
+                getHighlightedLines(line),
+                activeTheme,
+                undefined,
+              )}
+            </Text>
+            {index < lines.length - 1 && '\n'}
+          </Text>
+        ))}
       </Text>
     );
   } catch (error) {
@@ -112,6 +127,20 @@ export function colorizeCode(
       error,
     );
     // Fallback to plain text with default color on error
-    return <Text color={activeTheme.defaultColor}>{codeToHighlight}</Text>;
+    // Also display line numbers in fallback
+    const lines = codeToHighlight.split('\n');
+    return (
+      <Text>
+        {lines.map((line, index) => (
+          <Text key={index}>
+            <Text color={activeTheme.colors.SubtleComment}>
+              {`${String(index + 1).padStart(3, ' ')} `}
+            </Text>
+            <Text color={activeTheme.defaultColor}>{line}</Text>
+            {index < lines.length - 1 && '\n'}
+          </Text>
+        ))}
+      </Text>
+    );
   }
 }