Fix tab rendering in TUI components

Replace tabs with 3 spaces for consistent rendering and width calculation:
- Updated visibleWidth() to normalize tabs before measuring
- Updated Text and Markdown components to replace tabs when rendering
- Updated tool-execution display for read/write tools to replace tabs

This fixes background color rendering issues when displaying files with tab indentation.

packages/coding-agent/src/tui/tool-execution.ts

@@ -13,6 +13,13 @@ function shortenPath(path: string): string {
 	return path;
 }
 
+/**
+ * Replace tabs with spaces for consistent rendering
+ */
+function replaceTabs(text: string): string {
+	return text.replace(/\t/g, "   ");
+}
+
 /**
  * Generate a unified diff between old and new strings with line numbers
  */
@@ -120,7 +127,7 @@ export class ToolExecutionComponent extends Container {
 				const displayLines = lines.slice(0, maxLines);
 				const remaining = lines.length - maxLines;
 
-				text += "\n\n" + displayLines.map((line: string) => chalk.dim(line)).join("\n");
+				text += "\n\n" + displayLines.map((line: string) => chalk.dim(replaceTabs(line))).join("\n");
 				if (remaining > 0) {
 					text += chalk.dim(`\n... (${remaining} more lines)`);
 				}
@@ -142,7 +149,7 @@ export class ToolExecutionComponent extends Container {
 				const displayLines = lines.slice(0, maxLines);
 				const remaining = lines.length - maxLines;
 
-				text += "\n\n" + displayLines.map((line: string) => chalk.dim(line)).join("\n");
+				text += "\n\n" + displayLines.map((line: string) => chalk.dim(replaceTabs(line))).join("\n");
 				if (remaining > 0) {
 					text += chalk.dim(`\n... (${remaining} more lines)`);
 				}

packages/coding-agent/test.json

@@ -0,0 +1,28 @@
+{
+	"name": "test-file",
+	"version": "1.0.0",
+	"description": "A test JSON file with tab indentation",
+	"author": "coding-agent",
+	"data": {
+		"items": [
+			{
+				"id": 1,
+				"name": "First item",
+				"active": true
+			},
+			{
+				"id": 2,
+				"name": "Second item",
+				"active": false
+			}
+		],
+		"metadata": {
+			"created": "2024-11-11",
+			"tags": [
+				"test",
+				"example",
+				"json"
+			]
+		}
+	}
+}