Fix image rendering artifacts and improve show-images selector

- 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

packages/coding-agent/src/modes/interactive/components/show-images-selector.ts

@@ -0,0 +1,45 @@
+import { Container, type SelectItem, SelectList } from "@mariozechner/pi-tui";
+import { getSelectListTheme } from "../theme/theme.js";
+import { DynamicBorder } from "./dynamic-border.js";
+
+/**
+ * Component that renders a show images selector with borders
+ */
+export class ShowImagesSelectorComponent extends Container {
+	private selectList: SelectList;
+
+	constructor(currentValue: boolean, onSelect: (show: boolean) => void, onCancel: () => void) {
+		super();
+
+		const items: SelectItem[] = [
+			{ value: "yes", label: "Yes", description: "Show images inline in terminal" },
+			{ value: "no", label: "No", description: "Show text placeholder instead" },
+		];
+
+		// Add top border
+		this.addChild(new DynamicBorder());
+
+		// Create selector
+		this.selectList = new SelectList(items, 5, getSelectListTheme());
+
+		// Preselect current value
+		this.selectList.setSelectedIndex(currentValue ? 0 : 1);
+
+		this.selectList.onSelect = (item) => {
+			onSelect(item.value === "yes");
+		};
+
+		this.selectList.onCancel = () => {
+			onCancel();
+		};
+
+		this.addChild(this.selectList);
+
+		// Add bottom border
+		this.addChild(new DynamicBorder());
+	}
+
+	getSelectList(): SelectList {
+		return this.selectList;
+	}
+}

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

@@ -107,6 +107,7 @@ export class ToolExecutionComponent extends Container {
 			for (const img of imageBlocks) {
 				// Show inline image only if terminal supports it AND user setting allows it
 				if (caps.images && this.showImages && img.data && img.mimeType) {
+					this.addChild(new Spacer(1));
 					const imageComponent = new Image(
 						img.data,
 						img.mimeType,

packages/coding-agent/src/modes/interactive/interactive-mode.ts

@@ -17,7 +17,6 @@ import {
 	Loader,
 	Markdown,
 	ProcessTerminal,
-	SelectList,
 	Spacer,
 	Text,
 	TruncatedText,
@@ -49,12 +48,13 @@ import { ModelSelectorComponent } from "./components/model-selector.js";
 import { OAuthSelectorComponent } from "./components/oauth-selector.js";
 import { QueueModeSelectorComponent } from "./components/queue-mode-selector.js";
 import { SessionSelectorComponent } from "./components/session-selector.js";
+import { ShowImagesSelectorComponent } from "./components/show-images-selector.js";
 import { ThemeSelectorComponent } from "./components/theme-selector.js";
 import { ThinkingSelectorComponent } from "./components/thinking-selector.js";
 import { ToolExecutionComponent } from "./components/tool-execution.js";
 import { UserMessageComponent } from "./components/user-message.js";
 import { UserMessageSelectorComponent } from "./components/user-message-selector.js";
-import { getEditorTheme, getMarkdownTheme, getSelectListTheme, onThemeChange, setTheme, theme } from "./theme/theme.js";
+import { getEditorTheme, getMarkdownTheme, onThemeChange, setTheme, theme } from "./theme/theme.js";
 
 export class InteractiveMode {
 	private session: AgentSession;
@@ -593,7 +593,7 @@ export class InteractiveMode {
 				return;
 			}
 			if (text === "/show-images") {
-				this.handleShowImagesCommand();
+				this.showShowImagesSelector();
 				this.editor.setText("");
 				return;
 			}
@@ -1652,7 +1652,7 @@ export class InteractiveMode {
 		this.showStatus(`Auto-compaction: ${newState ? "on" : "off"}`);
 	}
 
-	private handleShowImagesCommand(): void {
+	private showShowImagesSelector(): void {
 		// Only available if terminal supports images
 		const caps = getCapabilities();
 		if (!caps.images) {
@@ -1660,41 +1660,29 @@ export class InteractiveMode {
 			return;
 		}
 
-		const currentValue = this.settingsManager.getShowImages();
-		const items = [
-			{ value: "yes", label: "Yes", description: "Show images inline in terminal" },
-			{ value: "no", label: "No", description: "Show text placeholder instead" },
-		];
+		this.showSelector((done) => {
+			const selector = new ShowImagesSelectorComponent(
+				this.settingsManager.getShowImages(),
+				(newValue) => {
+					this.settingsManager.setShowImages(newValue);
 
-		const selector = new SelectList(items, 5, getSelectListTheme());
-		selector.setSelectedIndex(currentValue ? 0 : 1);
+					// Update all existing tool execution components with new setting
+					for (const child of this.chatContainer.children) {
+						if (child instanceof ToolExecutionComponent) {
+							child.setShowImages(newValue);
+						}
+					}
 
-		selector.onSelect = (item) => {
-			const newValue = item.value === "yes";
-			this.settingsManager.setShowImages(newValue);
-			this.showStatus(`Inline images: ${newValue ? "on" : "off"}`);
-			this.chatContainer.removeChild(selector);
-
-			// Update all existing tool execution components with new setting
-			for (const child of this.chatContainer.children) {
-				if (child instanceof ToolExecutionComponent) {
-					child.setShowImages(newValue);
-				}
-			}
-
-			this.ui.setFocus(this.editor);
-			this.ui.requestRender();
-		};
-
-		selector.onCancel = () => {
-			this.chatContainer.removeChild(selector);
-			this.ui.setFocus(this.editor);
-			this.ui.requestRender();
-		};
-
-		this.chatContainer.addChild(selector);
-		this.ui.setFocus(selector);
-		this.ui.requestRender();
+					done();
+					this.showStatus(`Inline images: ${newValue ? "on" : "off"}`);
+				},
+				() => {
+					done();
+					this.ui.requestRender();
+				},
+			);
+			return { component: selector, focus: selector.getSelectList() };
+		});
 	}
 
 	private async executeCompaction(customInstructions?: string, isAuto = false): Promise<void> {