feat: add tabWidth support for code highlighting and replace tabs with spaces in CodeColorizer

(cherry picked from commit 2849f907f68022ed2879216a764668878a0bb282)

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

@@ -157,6 +157,7 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
     renderedOutput = colorizeCode(
       addedContent,
       language,
+      tabWidth,
       availableTerminalHeight,
       contentWidth,
       theme,

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

@@ -125,17 +125,21 @@ export function colorizeLine(
  *
  * @param code The code string to highlight.
  * @param language The language identifier (e.g., 'javascript', 'css', 'html')
+ * @param tabWidth The tabWidth of the language, default is 4
  * @returns A React.ReactNode containing Ink <Text> elements for the highlighted code.
  */
 export function colorizeCode(
   code: string,
   language: string | null,
+  tabWidth = 4,
   availableHeight?: number,
   maxWidth?: number,
   theme?: Theme,
   settings?: LoadedSettings,
 ): React.ReactNode {
-  const codeToHighlight = code.replace(/\n$/, '');
+  const codeToHighlight = code
+    .replace(/\n$/, '')
+    .replace(/\t/g, ' '.repeat(tabWidth));
   const activeTheme = theme || themeManager.getActiveTheme();
   const showLineNumbers = settings?.merged.ui?.showLineNumbers ?? true;
 

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

@@ -328,6 +328,7 @@ const RenderCodeBlockInternal: React.FC<RenderCodeBlockProps> = ({
       const colorizedTruncatedCode = colorizeCode(
         truncatedContent.join('\n'),
         lang,
+        4,
         availableTerminalHeight,
         contentWidth - CODE_BLOCK_PREFIX_PADDING,
         undefined,
@@ -346,6 +347,7 @@ const RenderCodeBlockInternal: React.FC<RenderCodeBlockProps> = ({
   const colorizedCode = colorizeCode(
     fullContent,
     lang,
+    4,
     availableTerminalHeight,
     contentWidth - CODE_BLOCK_PREFIX_PADDING,
     undefined,