Update diff colors (#4747)

Co-authored-by: Jacob Richman <jacob314@gmail.com>

packages/cli/src/ui/colors.ts

@@ -38,6 +38,12 @@ export const Colors: ColorsTheme = {
   get AccentRed() {
     return themeManager.getActiveTheme().colors.AccentRed;
   },
+  get DiffAdded() {
+    return themeManager.getActiveTheme().colors.DiffAdded;
+  },
+  get DiffRemoved() {
+    return themeManager.getActiveTheme().colors.DiffRemoved;
+  },
   get Comment() {
     return themeManager.getActiveTheme().colors.Comment;
   },

packages/cli/src/ui/components/ThemeDialog.tsx

@@ -279,18 +279,23 @@ export function ThemeDialog({
               >
                 {colorizeCode(
                   `# function
--def fibonacci(n):
+def fibonacci(n):
--    a, b = 0, 1
+    a, b = 0, 1
--    for _ in range(n):
+    for _ in range(n):
--        a, b = b, a + b
+        a, b = b, a + b
--    return a`,
+    return a`,
                   'python',
                   codeBlockHeight,
                   colorizeCodeWidth,
                 )}
                 <Box marginTop={1} />
                 <DiffRenderer
-                  diffContent={`--- a/old_file.txt\n+++ b/new_file.txt\n@@ -1,6 +1,7 @@\n # function\n-def fibonacci(n):\n-    a, b = 0, 1\n-    for _ in range(n):\n-        a, b = b, a + b\n-    return a\n+def fibonacci(n):\n+    a, b = 0, 1\n+    for _ in range(n):\n+        a, b = b, a + b\n+    return a\n+\n+print(fibonacci(10))\n`}
+                  diffContent={`--- a/util.py
++++ b/util.py
+@@ -1,2 +1,2 @@
+- print("Hello, " + name)
++ print(f"Hello, {name}!")
+`}
                   availableTerminalHeight={diffHeight}
                   terminalWidth={colorizeCodeWidth}
                   theme={previewTheme}

packages/cli/src/ui/components/messages/DiffRenderer.test.tsx

@@ -130,8 +130,8 @@ index 0000001..0000002 100644
     );
     const output = lastFrame();
     const lines = output!.split('\n');
-    expect(lines[0]).toBe('1    - old line');
+    expect(lines[0]).toBe('1 - old line');
-    expect(lines[1]).toBe('1    + new line');
+    expect(lines[1]).toBe('1 + new line');
   });
 
   it('should handle diff with only header and no changes', () => {
@@ -253,35 +253,35 @@ index 123..789 100644
       {
         terminalWidth: 80,
         height: undefined,
-        expected: `1      console.log('first hunk');
+        expected: ` 1   console.log('first hunk');
-2    - const oldVar = 1;
+ 2 - const oldVar = 1;
-2    + const newVar = 1;
+ 2 + const newVar = 1;
-3      console.log('end of first hunk');
+ 3   console.log('end of first hunk');
 ════════════════════════════════════════════════════════════════════════════════
-20     console.log('second hunk');
+20   console.log('second hunk');
-21   - const anotherOld = 'test';
+21 - const anotherOld = 'test';
-21   + const anotherNew = 'test';
+21 + const anotherNew = 'test';
-22     console.log('end of second hunk');`,
+22   console.log('end of second hunk');`,
       },
       {
         terminalWidth: 80,
         height: 6,
         expected: `... first 4 lines hidden ...
 ════════════════════════════════════════════════════════════════════════════════
-20     console.log('second hunk');
+20   console.log('second hunk');
-21   - const anotherOld = 'test';
+21 - const anotherOld = 'test';
-21   + const anotherNew = 'test';
+21 + const anotherNew = 'test';
-22     console.log('end of second hunk');`,
+22   console.log('end of second hunk');`,
       },
       {
         terminalWidth: 30,
         height: 6,
         expected: `... first 10 lines hidden ...
-       'test';
+   ;
-21   + const anotherNew =
+21 + const anotherNew = 'test'
-       'test';
+   ;
-22     console.log('end of
+22   console.log('end of
-       second hunk');`,
+     second hunk');`,
       },
     ])(
       'with terminalWidth $terminalWidth and height $height',
@@ -329,11 +329,11 @@ fileDiff Index: file.txt
     );
     const output = lastFrame();
 
-    expect(output).toEqual(`1    - const oldVar = 1;
+    expect(output).toEqual(` 1 - const oldVar = 1;
-1    + const newVar = 1;
+ 1 + const newVar = 1;
 ════════════════════════════════════════════════════════════════════════════════
-20   - const anotherOld = 'test';
+20 - const anotherOld = 'test';
-20   + const anotherNew = 'test';`);
+20 + const anotherNew = 'test';`);
   });
 
   it('should correctly render a new file with no file extension correctly', () => {

packages/cli/src/ui/components/messages/DiffRenderer.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 import { Box, Text } from 'ink';
 import { Colors } from '../../colors.js';
 import crypto from 'crypto';
-import { colorizeCode } from '../../utils/CodeColorizer.js';
+import { colorizeCode, colorizeLine } from '../../utils/CodeColorizer.js';
 import { MaxSizedBox } from '../shared/MaxSizedBox.js';
 
 interface DiffLine {
@@ -157,7 +157,6 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
       tabWidth,
       availableTerminalHeight,
       terminalWidth,
-      theme,
     );
   }
 
@@ -170,7 +169,6 @@ const renderDiffContent = (
   tabWidth = DEFAULT_TAB_WIDTH,
   availableTerminalHeight: number | undefined,
   terminalWidth: number,
-  theme?: import('../../themes/theme.js').Theme,
 ) => {
   // 1. Normalize whitespace (replace tabs with spaces) *before* further processing
   const normalizedLines = parsedLines.map((line) => ({
@@ -191,6 +189,18 @@ const renderDiffContent = (
     );
   }
 
+  const maxLineNumber = Math.max(
+    0,
+    ...displayableLines.map((l) => l.oldLine ?? 0),
+    ...displayableLines.map((l) => l.newLine ?? 0),
+  );
+  const gutterWidth = Math.max(1, maxLineNumber.toString().length);
+
+  const fileExtension = filename?.split('.').pop() || null;
+  const language = fileExtension
+    ? getLanguageFromExtension(fileExtension)
+    : null;
+
   // Calculate the minimum indentation across all displayable lines
   let baseIndentation = Infinity; // Start high to find the minimum
   for (const line of displayableLines) {
@@ -237,27 +247,25 @@ const renderDiffContent = (
         ) {
           acc.push(
             <Box key={`gap-${index}`}>
-              <Text wrap="truncate">{'═'.repeat(terminalWidth)}</Text>
+              <Text wrap="truncate" color={Colors.Gray}>
+                {'═'.repeat(terminalWidth)}
+              </Text>
             </Box>,
           );
         }
 
         const lineKey = `diff-line-${index}`;
         let gutterNumStr = '';
-        let color: string | undefined = undefined;
         let prefixSymbol = ' ';
-        let dim = false;
 
         switch (line.type) {
           case 'add':
             gutterNumStr = (line.newLine ?? '').toString();
-            color = theme?.colors?.AccentGreen || 'green';
             prefixSymbol = '+';
             lastLineNumber = line.newLine ?? null;
             break;
           case 'del':
             gutterNumStr = (line.oldLine ?? '').toString();
-            color = theme?.colors?.AccentRed || 'red';
             prefixSymbol = '-';
             // For deletions, update lastLineNumber based on oldLine if it's advancing.
             // This helps manage gaps correctly if there are multiple consecutive deletions
@@ -268,7 +276,6 @@ const renderDiffContent = (
             break;
           case 'context':
             gutterNumStr = (line.newLine ?? '').toString();
-            dim = true;
             prefixSymbol = ' ';
             lastLineNumber = line.newLine ?? null;
             break;
@@ -280,13 +287,26 @@ const renderDiffContent = (
 
         acc.push(
           <Box key={lineKey} flexDirection="row">
-            <Text color={Colors.Gray}>{gutterNumStr.padEnd(4)} </Text>
+            <Text color={Colors.Gray}>
-            <Text color={color} dimColor={dim}>
+              {gutterNumStr.padStart(gutterWidth)}{' '}
-              {prefixSymbol}{' '}
-            </Text>
-            <Text color={color} dimColor={dim} wrap="wrap">
-              {displayContent}
             </Text>
+            {line.type === 'context' ? (
+              <>
+                <Text>{prefixSymbol} </Text>
+                <Text wrap="wrap">
+                  {colorizeLine(displayContent, language)}
+                </Text>
+              </>
+            ) : (
+              <Text
+                backgroundColor={
+                  line.type === 'add' ? Colors.DiffAdded : Colors.DiffRemoved
+                }
+                wrap="wrap"
+              >
+                {prefixSymbol} {colorizeLine(displayContent, language)}
+              </Text>
+            )}
           </Box>,
         );
         return acc;

packages/cli/src/ui/themes/ansi-light.ts

@@ -17,6 +17,8 @@ const ansiLightColors: ColorsTheme = {
   AccentGreen: 'green',
   AccentYellow: 'orange',
   AccentRed: 'red',
+  DiffAdded: '#E5F2E5',
+  DiffRemoved: '#FFE5E5',
   Comment: 'gray',
   Gray: 'gray',
   GradientColors: ['blue', 'green'],

packages/cli/src/ui/themes/ansi.ts

@@ -17,6 +17,8 @@ const ansiColors: ColorsTheme = {
   AccentGreen: 'green',
   AccentYellow: 'yellow',
   AccentRed: 'red',
+  DiffAdded: '#003300',
+  DiffRemoved: '#4D0000',
   Comment: 'gray',
   Gray: 'gray',
   GradientColors: ['cyan', 'green'],

packages/cli/src/ui/themes/atom-one-dark.ts

@@ -17,6 +17,8 @@ const atomOneDarkColors: ColorsTheme = {
   AccentGreen: '#98c379',
   AccentYellow: '#e6c07b',
   AccentRed: '#e06c75',
+  DiffAdded: '#39544E',
+  DiffRemoved: '#562B2F',
   Comment: '#5c6370',
   Gray: '#5c6370',
   GradientColors: ['#61aeee', '#98c379'],

packages/cli/src/ui/themes/ayu-light.ts

@@ -17,8 +17,10 @@ const ayuLightColors: ColorsTheme = {
   AccentGreen: '#86b300',
   AccentYellow: '#f2ae49',
   AccentRed: '#f07171',
+  DiffAdded: '#C6EAD8',
+  DiffRemoved: '#FFCCCC',
   Comment: '#ABADB1',
-  Gray: '#CCCFD3',
+  Gray: '#a6aaaf',
   GradientColors: ['#399ee6', '#86b300'],
 };
 

packages/cli/src/ui/themes/ayu.ts

@@ -17,8 +17,10 @@ const ayuDarkColors: ColorsTheme = {
   AccentGreen: '#AAD94C',
   AccentYellow: '#FFB454',
   AccentRed: '#F26D78',
+  DiffAdded: '#293022',
+  DiffRemoved: '#3D1215',
   Comment: '#646A71',
-  Gray: '##3D4149',
+  Gray: '#3D4149',
   GradientColors: ['#FFB454', '#F26D78'],
 };
 

packages/cli/src/ui/themes/dracula.ts

@@ -17,6 +17,8 @@ const draculaColors: ColorsTheme = {
   AccentGreen: '#50fa7b',
   AccentYellow: '#f1fa8c',
   AccentRed: '#ff5555',
+  DiffAdded: '#11431d',
+  DiffRemoved: '#6e1818',
   Comment: '#6272a4',
   Gray: '#6272a4',
   GradientColors: ['#ff79c6', '#8be9fd'],

packages/cli/src/ui/themes/github-dark.ts

@@ -17,6 +17,8 @@ const githubDarkColors: ColorsTheme = {
   AccentGreen: '#85E89D',
   AccentYellow: '#FFAB70',
   AccentRed: '#F97583',
+  DiffAdded: '#3C4636',
+  DiffRemoved: '#502125',
   Comment: '#6A737D',
   Gray: '#6A737D',
   GradientColors: ['#79B8FF', '#85E89D'],

packages/cli/src/ui/themes/github-light.ts

@@ -17,6 +17,8 @@ const githubLightColors: ColorsTheme = {
   AccentGreen: '#008080',
   AccentYellow: '#990073',
   AccentRed: '#d14',
+  DiffAdded: '#C6EAD8',
+  DiffRemoved: '#FFCCCC',
   Comment: '#998',
   Gray: '#999',
   GradientColors: ['#458', '#008080'],

packages/cli/src/ui/themes/googlecode.ts

@@ -17,6 +17,8 @@ const googleCodeColors: ColorsTheme = {
   AccentGreen: '#080',
   AccentYellow: '#660',
   AccentRed: '#800',
+  DiffAdded: '#C6EAD8',
+  DiffRemoved: '#FEDEDE',
   Comment: '#5f6368',
   Gray: lightTheme.Gray,
   GradientColors: ['#066', '#606'],

packages/cli/src/ui/themes/no-color.ts

@@ -17,6 +17,8 @@ const noColorColorsTheme: ColorsTheme = {
   AccentGreen: '',
   AccentYellow: '',
   AccentRed: '',
+  DiffAdded: '',
+  DiffRemoved: '',
   Comment: '',
   Gray: '',
 };

packages/cli/src/ui/themes/shades-of-purple.ts

@@ -22,6 +22,8 @@ const shadesOfPurpleColors: ColorsTheme = {
   AccentGreen: '#A5FF90', // Strings and many others
   AccentYellow: '#fad000', // Title, main yellow
   AccentRed: '#ff628c', // Error/deletion accent
+  DiffAdded: '#383E45',
+  DiffRemoved: '#572244',
   Comment: '#B362FF', // Comment color (same as AccentPurple)
   Gray: '#726c86', // Gray color
   GradientColors: ['#4d21fc', '#847ace', '#ff628c'],

packages/cli/src/ui/themes/theme-manager.test.ts

@@ -23,10 +23,12 @@ const validCustomTheme: CustomTheme = {
   AccentPurple: '#8B5CF6',
   AccentCyan: '#06B6D4',
   AccentGreen: '#3CA84B',
-  AccentYellow: '#D5A40A',
+  AccentYellow: 'yellow',
-  AccentRed: '#DD4C4C',
+  AccentRed: 'red',
-  Comment: '#008000',
+  DiffAdded: 'green',
-  Gray: '#B7BECC',
+  DiffRemoved: 'red',
+  Comment: 'gray',
+  Gray: 'gray',
 };
 
 describe('ThemeManager', () => {

packages/cli/src/ui/themes/theme.ts

@@ -20,6 +20,8 @@ export interface ColorsTheme {
   AccentGreen: string;
   AccentYellow: string;
   AccentRed: string;
+  DiffAdded: string;
+  DiffRemoved: string;
   Comment: string;
   Gray: string;
   GradientColors?: string[];
@@ -41,8 +43,10 @@ export const lightTheme: ColorsTheme = {
   AccentGreen: '#3CA84B',
   AccentYellow: '#D5A40A',
   AccentRed: '#DD4C4C',
+  DiffAdded: '#C6EAD8',
+  DiffRemoved: '#FFCCCC',
   Comment: '#008000',
-  Gray: '#B7BECC',
+  Gray: '#97a0b0',
   GradientColors: ['#4796E4', '#847ACE', '#C3677F'],
 };
 
@@ -57,6 +61,8 @@ export const darkTheme: ColorsTheme = {
   AccentGreen: '#A6E3A1',
   AccentYellow: '#F9E2AF',
   AccentRed: '#F38BA8',
+  DiffAdded: '#28350B',
+  DiffRemoved: '#430000',
   Comment: '#6C7086',
   Gray: '#6C7086',
   GradientColors: ['#4796E4', '#847ACE', '#C3677F'],
@@ -73,6 +79,8 @@ export const ansiTheme: ColorsTheme = {
   AccentGreen: 'green',
   AccentYellow: 'yellow',
   AccentRed: 'red',
+  DiffAdded: 'green',
+  DiffRemoved: 'red',
   Comment: 'gray',
   Gray: 'gray',
 };
@@ -328,6 +336,8 @@ export function validateCustomTheme(customTheme: Partial<CustomTheme>): {
     'AccentGreen',
     'AccentYellow',
     'AccentRed',
+    'DiffAdded',
+    'DiffRemoved',
     'Comment',
     'Gray',
   ];
@@ -352,6 +362,8 @@ export function validateCustomTheme(customTheme: Partial<CustomTheme>): {
     'AccentGreen',
     'AccentYellow',
     'AccentRed',
+    'DiffAdded',
+    'DiffRemoved',
     'Comment',
     'Gray',
   ];

packages/cli/src/ui/themes/xcode.ts

@@ -17,6 +17,8 @@ const xcodeColors: ColorsTheme = {
   AccentGreen: '#007400',
   AccentYellow: '#836C28',
   AccentRed: '#c41a16',
+  DiffAdded: '#C6EAD8',
+  DiffRemoved: '#FEDEDE',
   Comment: '#007400',
   Gray: '#c0c0c0',
   GradientColors: ['#1c00cf', '#007400'],

packages/cli/src/ui/utils/CodeColorizer.tsx

@@ -88,6 +88,34 @@ function renderHastNode(
   return null;
 }
 
+function highlightAndRenderLine(
+  line: string,
+  language: string | null,
+  theme: Theme,
+): React.ReactNode {
+  try {
+    const getHighlightedLine = () =>
+      !language || !lowlight.registered(language)
+        ? lowlight.highlightAuto(line)
+        : lowlight.highlight(language, line);
+
+    const renderedNode = renderHastNode(getHighlightedLine(), theme, undefined);
+
+    return renderedNode !== null ? renderedNode : line;
+  } catch (_error) {
+    return line;
+  }
+}
+
+export function colorizeLine(
+  line: string,
+  language: string | null,
+  theme?: Theme,
+): React.ReactNode {
+  const activeTheme = theme || themeManager.getActiveTheme();
+  return highlightAndRenderLine(line, language, activeTheme);
+}
+
 /**
  * Renders syntax-highlighted code for Ink applications using a selected theme.
  *
@@ -123,11 +151,6 @@ export function colorizeCode(
       }
     }
 
-    const getHighlightedLines = (line: string) =>
-      !language || !lowlight.registered(language)
-        ? lowlight.highlightAuto(line)
-        : lowlight.highlight(language, line);
-
     return (
       <MaxSizedBox
         maxHeight={availableHeight}
@@ -136,17 +159,19 @@ export function colorizeCode(
         overflowDirection="top"
       >
         {lines.map((line, index) => {
-          const renderedNode = renderHastNode(
+          const contentToRender = highlightAndRenderLine(
-            getHighlightedLines(line),
+            line,
+            language,
             activeTheme,
-            undefined,
           );
 
-          const contentToRender = renderedNode !== null ? renderedNode : line;
           return (
             <Box key={index}>
               <Text color={activeTheme.colors.Gray}>
-                {`${String(index + 1 + hiddenLinesCount).padStart(padWidth, ' ')} `}
+                {`${String(index + 1 + hiddenLinesCount).padStart(
+                  padWidth,
+                  ' ',
+                )} `}
               </Text>
               <Text color={activeTheme.defaultColor} wrap="wrap">
                 {contentToRender}