fix(coding-agent): configure inline tool image width

closes #3508
This commit is contained in:
Mario Zechner
2026-04-22 00:56:01 +02:00
parent 780d536727
commit 97a38bf652
6 changed files with 57 additions and 3 deletions

View File

@@ -31,6 +31,7 @@ const THINKING_DESCRIPTIONS: Record<ThinkingLevel, string> = {
export interface SettingsConfig {
autoCompact: boolean;
showImages: boolean;
imageWidthCells: number;
autoResizeImages: boolean;
blockImages: boolean;
enableSkillCommands: boolean;
@@ -56,6 +57,7 @@ export interface SettingsConfig {
export interface SettingsCallbacks {
onAutoCompactChange: (enabled: boolean) => void;
onShowImagesChange: (enabled: boolean) => void;
onImageWidthCellsChange: (width: number) => void;
onAutoResizeImagesChange: (enabled: boolean) => void;
onBlockImagesChange: (blocked: boolean) => void;
onEnableSkillCommandsChange: (enabled: boolean) => void;
@@ -292,10 +294,17 @@ export class SettingsSelectorComponent extends Container {
currentValue: config.showImages ? "true" : "false",
values: ["true", "false"],
});
items.splice(2, 0, {
id: "image-width-cells",
label: "Image width",
description: "Preferred inline image width in terminal cells",
currentValue: String(config.imageWidthCells),
values: ["60", "80", "120"],
});
}
// Image auto-resize toggle (always available, affects both attached and read images)
items.splice(supportsImages ? 2 : 1, 0, {
items.splice(supportsImages ? 3 : 1, 0, {
id: "auto-resize-images",
label: "Auto-resize images",
description: "Resize large images to 2000x2000 max for better model compatibility",
@@ -378,6 +387,9 @@ export class SettingsSelectorComponent extends Container {
case "show-images":
callbacks.onShowImagesChange(newValue === "true");
break;
case "image-width-cells":
callbacks.onImageWidthCellsChange(parseInt(newValue, 10));
break;
case "auto-resize-images":
callbacks.onAutoResizeImagesChange(newValue === "true");
break;

View File

@@ -7,6 +7,7 @@ import { theme } from "../theme/theme.js";
export interface ToolExecutionOptions {
showImages?: boolean;
imageWidthCells?: number;
}
export class ToolExecutionComponent extends Container {
@@ -23,6 +24,7 @@ export class ToolExecutionComponent extends Container {
private args: any;
private expanded = false;
private showImages: boolean;
private imageWidthCells: number;
private isPartial = true;
private toolDefinition?: ToolDefinition<any, any>;
private builtInToolDefinition?: ToolDefinition<any, any>;
@@ -54,6 +56,7 @@ export class ToolExecutionComponent extends Container {
this.toolDefinition = toolDefinition;
this.builtInToolDefinition = createAllToolDefinitions(cwd)[toolName as ToolName];
this.showImages = options.showImages ?? true;
this.imageWidthCells = options.imageWidthCells ?? 60;
this.ui = ui;
this.cwd = cwd;
@@ -205,6 +208,11 @@ export class ToolExecutionComponent extends Container {
this.updateDisplay();
}
setImageWidthCells(width: number): void {
this.imageWidthCells = Math.max(1, Math.floor(width));
this.updateDisplay();
}
override invalidate(): void {
super.invalidate();
this.updateDisplay();
@@ -312,7 +320,7 @@ export class ToolExecutionComponent extends Container {
imageData,
imageMimeType,
{ fallbackColor: (s: string) => theme.fg("toolOutput", s) },
{ maxWidthCells: 60 },
{ maxWidthCells: this.imageWidthCells },
);
this.imageComponents.push(imageComponent);
this.addChild(imageComponent);