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.
This commit is contained in:
Mario Zechner 2025-11-11 23:24:48 +01:00
parent 7beb354337
commit 001beff394
5 changed files with 49 additions and 5 deletions

View file

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