From 2819c7d887dbcf8d969a1f4d09a93c9d02fbcd31 Mon Sep 17 00:00:00 2001
From: lgzzzz <lgzzzz@foxmail.com>
Date: Wed, 4 Mar 2026 15:33:33 +0800
Subject: [PATCH] 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 | 1 +
 packages/cli/src/ui/utils/CodeColorizer.tsx              | 6 +++++-
 packages/cli/src/ui/utils/MarkdownDisplay.tsx            | 2 ++
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/cli/src/ui/components/messages/DiffRenderer.tsx b/packages/cli/src/ui/components/messages/DiffRenderer.tsx
index 3670be34b..9bae38394 100644
--- a/packages/cli/src/ui/components/messages/DiffRenderer.tsx
+++ b/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,
diff --git a/packages/cli/src/ui/utils/CodeColorizer.tsx b/packages/cli/src/ui/utils/CodeColorizer.tsx
index 0dabddb22..ec9e27244 100644
--- a/packages/cli/src/ui/utils/CodeColorizer.tsx
+++ b/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;
 
diff --git a/packages/cli/src/ui/utils/MarkdownDisplay.tsx b/packages/cli/src/ui/utils/MarkdownDisplay.tsx
index b67b8fd61..50595fc32 100644
--- a/packages/cli/src/ui/utils/MarkdownDisplay.tsx
+++ b/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,