getcompanion-ai/co-mono
1
0
Fork 0
mirror of https://github.com/getcompanion-ai/co-mono.git synced 2026-04-16 14:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add inline image rendering for terminals with graphics support

Browse source
This commit is contained in:
Nico Bailon 2025-12-12 19:30:50 -08:00
parent 776fab41e0
commit 9e9d5c94ed
5 changed files with 506 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

52
packages/coding-agent/src/modes/interactive/components/tool-execution.ts
View file

@ -1,5 +1,13 @@
import * as os from "node:os";
import { Container, Spacer, Text } from "@mariozechner/pi-tui";
import {
Container,
getCapabilities,
getImageDimensions,
Image,
imageFallback,
Spacer,
Text,
} from "@mariozechner/pi-tui";
import stripAnsi from "strip-ansi";
import { DEFAULT_MAX_BYTES, DEFAULT_MAX_LINES, formatSize } from "../../../core/tools/truncate.js";
import { theme } from "../theme/theme.js";
@ -27,6 +35,7 @@ function replaceTabs(text: string): string {
*/
export class ToolExecutionComponent extends Container {
private contentText: Text;
private imageComponents: Image[] = [];
private toolName: string;
private args: any;
private expanded = false;
@ -41,7 +50,6 @@ export class ToolExecutionComponent extends Container {
this.toolName = toolName;
this.args = args;
this.addChild(new Spacer(1));
// Content with colored background and padding
this.contentText = new Text("", 1, 1, (text: string) => theme.bg("toolPendingBg", text));
this.addChild(this.contentText);
this.updateDisplay();
@ -75,32 +83,54 @@ export class ToolExecutionComponent extends Container {
this.contentText.setCustomBgFn(bgFn);
this.contentText.setText(this.formatToolExecution());
for (const img of this.imageComponents) {
this.removeChild(img);
}
this.imageComponents = [];
if (this.result) {
const imageBlocks = this.result.content?.filter((c: any) => c.type === "image") || [];
const caps = getCapabilities();
for (const img of imageBlocks) {
if (caps.images && img.data && img.mimeType) {
const imageComponent = new Image(
img.data,
img.mimeType,
{ fallbackColor: (s: string) => theme.fg("toolOutput", s) },
{ maxWidthCells: 60 },
);
this.imageComponents.push(imageComponent);
this.addChild(imageComponent);
}
}
}
}
private getTextOutput(): string {
if (!this.result) return "";
// Extract text from content blocks
const textBlocks = this.result.content?.filter((c: any) => c.type === "text") || [];
const imageBlocks = this.result.content?.filter((c: any) => c.type === "image") || [];
// Strip ANSI codes and carriage returns from raw output
// (bash may emit colors/formatting, and Windows may include \r)
let output = textBlocks
.map((c: any) => {
let text = stripAnsi(c.text || "").replace(/\r/g, "");
// stripAnsi misses some escape sequences like standalone ESC \ (String Terminator)
// and leaves orphaned fragments from malformed sequences (e.g. TUI output captured to file)
// Clean up: remove ESC + any following char, and control chars except newline/tab
text = text.replace(/\x1b./g, "");
text = text.replace(/[\x00-\x08\x0b\x0c\x0e-\x1f\x7f-\x9f]/g, "");
return text;
})
.join("\n");
// Add indicator for images
if (imageBlocks.length > 0) {
const imageIndicators = imageBlocks.map((img: any) => `[Image: ${img.mimeType}]`).join("\n");
const caps = getCapabilities();
if (imageBlocks.length > 0 && !caps.images) {
const imageIndicators = imageBlocks
.map((img: any) => {
const dims = img.data ? (getImageDimensions(img.data, img.mimeType) ?? undefined) : undefined;
return imageFallback(img.mimeType, dims);
})
.join("\n");
output = output ? `${output}\n${imageIndicators}` : imageIndicators;
}