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

Fix image rendering artifacts and improve show-images selector

Browse source 
- Image component returns correct number of lines (rows) for TUI accounting
- Empty lines rendered first, then cursor moves up and image is drawn
- This clears the space the image occupies before rendering
- Add spacer before inline images in tool output
- Create ShowImagesSelectorComponent with borders like other selectors
- Use showSelector pattern for /show-images command
This commit is contained in:
Mario Zechner 2025-12-13 23:53:28 +01:00
parent 883b6b3f9f
commit e4e234ecff
5 changed files with 81 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

11
packages/tui/src/components/image.ts
View file

@ -60,7 +60,16 @@ export class Image implements Component {
const result = renderImage(this.base64Data, this.dimensions, { maxWidthCells: maxWidth });
if (result) {
lines = [result.sequence];
// Return `rows` lines so TUI accounts for image height
// First (rows-1) lines are empty (TUI clears them)
// Last line: move cursor back up, then output image sequence
lines = [];
for (let i = 0; i < result.rows - 1; i++) {
lines.push("");
}
// Move cursor up to first row, then output image
const moveUp = result.rows > 1 ? `\x1b[${result.rows - 1}A` : "";
lines.push(moveUp + result.sequence);
} else {
const fallback = imageFallback(this.mimeType, this.dimensions, this.options.filename);
lines = [this.theme.fallbackColor(fallback)];

32
packages/tui/src/tui.ts
View file

@ -255,38 +255,6 @@ export class TUI extends Container {
return;
}
// Check if image lines changed - they require special handling to avoid duplication
// Only force full re-render if image content actually changed, not just because images exist
const imageLineChanged = (() => {
for (let i = firstChanged; i < Math.max(newLines.length, this.previousLines.length); i++) {
const prevLine = this.previousLines[i] || "";
const newLine = newLines[i] || "";
if (this.containsImage(prevLine) || this.containsImage(newLine)) {
if (prevLine !== newLine) return true;
}
}
return false;
})();
if (imageLineChanged) {
let buffer = "\x1b[?2026h"; // Begin synchronized output
// For Kitty protocol, delete all images before re-render
if (getCapabilities().images === "kitty") {
buffer += "\x1b_Ga=d\x1b\\";
}
buffer += "\x1b[3J\x1b[2J\x1b[H"; // Clear scrollback, screen, and home
for (let i = 0; i < newLines.length; i++) {
if (i > 0) buffer += "\r\n";
buffer += newLines[i];
}
buffer += "\x1b[?2026l"; // End synchronized output
this.terminal.write(buffer);
this.cursorRow = newLines.length - 1;
this.previousLines = newLines;
this.previousWidth = width;
return;
}
// Check if firstChanged is outside the viewport
// cursorRow is the line where cursor is (0-indexed)
// Viewport shows lines from (cursorRow - height + 1) to cursorRow