fix(coding-agent): stabilize user message OSC 133 padding closes #3090

packages/coding-agent/CHANGELOG.md

@@ -8,6 +8,7 @@
 
 ### Fixed
 
+- Fixed interactive user message rendering to keep bottom padding visible in terminals affected by OSC 133 prompt markers without adding an extra blank line before the following assistant message ([#3090](https://github.com/badlogic/pi-mono/issues/3090))
 - Fixed flaky `edit-tool-no-full-redraw` TUI tests by waiting for asynchronous preview and preflight error rendering instead of relying on fixed render ticks.
 - Fixed `kimi-coding` default model selection to use `kimi-for-coding` instead of `kimi-k2-thinking` ([#3242](https://github.com/badlogic/pi-mono/issues/3242))
 - Fixed `ctrl+z` on native Windows to avoid crashing interactive mode, disable the default suspend binding there, and show a status message when suspend is invoked manually ([#3191](https://github.com/badlogic/pi-mono/issues/3191))

packages/coding-agent/src/modes/interactive/components/user-message.ts

@@ -1,4 +1,4 @@
-import { Container, Markdown, type MarkdownTheme, Spacer } from "@mariozechner/pi-tui";
+import { Box, Container, Markdown, type MarkdownTheme } from "@mariozechner/pi-tui";
 import { getMarkdownTheme, theme } from "../theme/theme.js";
 
 const OSC133_ZONE_START = "\x1b]133;A\x07";
@@ -9,15 +9,17 @@ const OSC133_ZONE_FINAL = "\x1b]133;C\x07";
  * Component that renders a user message
  */
 export class UserMessageComponent extends Container {
+	private contentBox: Box;
+
 	constructor(text: string, markdownTheme: MarkdownTheme = getMarkdownTheme()) {
 		super();
-		this.addChild(new Spacer(1));
+		this.contentBox = new Box(1, 1, (content: string) => theme.bg("userMessageBg", content));
-		this.addChild(
+		this.contentBox.addChild(
-			new Markdown(text, 1, 1, markdownTheme, {
+			new Markdown(text, 0, 0, markdownTheme, {
-				bgColor: (text: string) => theme.bg("userMessageBg", text),
+				color: (content: string) => theme.fg("userMessageText", content),
-				color: (text: string) => theme.fg("userMessageText", text),
 			}),
 		);
+		this.addChild(this.contentBox);
 	}
 
 	override render(width: number): string[] {
@@ -27,7 +29,7 @@ export class UserMessageComponent extends Container {
 		}
 
 		lines[0] = OSC133_ZONE_START + lines[0];
-		lines[lines.length - 1] = lines[lines.length - 1] + OSC133_ZONE_END + OSC133_ZONE_FINAL;
+		lines[lines.length - 1] = OSC133_ZONE_END + OSC133_ZONE_FINAL + lines[lines.length - 1];
 		return lines;
 	}
 }

packages/coding-agent/test/user-message.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, test } from "vitest";
+import { UserMessageComponent } from "../src/modes/interactive/components/user-message.js";
+import { initTheme } from "../src/modes/interactive/theme/theme.js";
+
+const OSC133_ZONE_START = "\x1b]133;A\x07";
+const OSC133_ZONE_END = "\x1b]133;B\x07";
+const OSC133_ZONE_FINAL = "\x1b]133;C\x07";
+const BG_RESET = "\x1b[49m";
+
+describe("UserMessageComponent", () => {
+	test("keeps user message height stable while moving closing OSC markers off line end", () => {
+		initTheme("dark");
+
+		const component = new UserMessageComponent("hello");
+		const lines = component.render(20);
+
+		expect(lines).toHaveLength(3);
+		expect(lines[0]).toContain(OSC133_ZONE_START);
+		expect(lines[0].endsWith(BG_RESET)).toBe(true);
+		expect(lines[0]).not.toContain(OSC133_ZONE_END);
+		expect(lines[1]).toContain("hello");
+		expect(lines[2].startsWith(OSC133_ZONE_END + OSC133_ZONE_FINAL)).toBe(true);
+		expect(lines[2].endsWith(BG_RESET)).toBe(true);
+	});
+});