Color enhancements (#680)

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>

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) => {

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>
 

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)`}

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>

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>
+        {lines.map((line, index) => (
+          <Text key={index}>
+            <Text color={activeTheme.colors.SubtleComment}>
+              {`${String(index + 1).padStart(3, ' ')} `}
+            </Text>
             <Text color={activeTheme.defaultColor}>
-        {renderHastNode(hastTree, activeTheme, undefined)}
+              {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>
+    );
   }
 }