fix(coding-agent): restore assistant/user turn spacing

packages/coding-agent/CHANGELOG.md

@@ -6,6 +6,7 @@
 
 - Fixed missing root exports for `RpcClient` and RPC protocol types from `@mariozechner/pi-coding-agent`, so ESM consumers can import them from the main package entrypoint ([#3275](https://github.com/badlogic/pi-mono/issues/3275))
 - Fixed Bun binary asset path resolution to honor `PI_PACKAGE_DIR` for built-in themes, HTML export templates, and interactive bundled assets ([#3074](https://github.com/badlogic/pi-mono/issues/3074))
+- Fixed user-message turn spacing in interactive mode by restoring an inter-message spacer before user turns (except the first user message), preventing assistant and user blocks from rendering flush together.
 
 ## [0.67.6] - 2026-04-16
 

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

@@ -2,6 +2,10 @@ import type { AssistantMessage } from "@mariozechner/pi-ai";
 import { Container, Markdown, type MarkdownTheme, Spacer, Text } from "@mariozechner/pi-tui";
 import { getMarkdownTheme, theme } from "../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";
+
 /**
  * Component that renders a complete assistant message
  */
@@ -11,6 +15,7 @@ export class AssistantMessageComponent extends Container {
 	private markdownTheme: MarkdownTheme;
 	private hiddenThinkingLabel: string;
 	private lastMessage?: AssistantMessage;
+	private hasToolCalls = false;
 
 	constructor(
 		message?: AssistantMessage,
@@ -54,6 +59,17 @@ export class AssistantMessageComponent extends Container {
 		}
 	}
 
+	override render(width: number): string[] {
+		const lines = super.render(width);
+		if (this.hasToolCalls || lines.length === 0) {
+			return lines;
+		}
+
+		lines[0] = OSC133_ZONE_START + lines[0];
+		lines[lines.length - 1] = OSC133_ZONE_END + OSC133_ZONE_FINAL + lines[lines.length - 1];
+		return lines;
+	}
+
 	updateContent(message: AssistantMessage): void {
 		this.lastMessage = message;
 
@@ -108,6 +124,7 @@ export class AssistantMessageComponent extends Container {
 		// Check if aborted - show after partial content
 		// But only if there are no tool calls (tool execution components will show the error)
 		const hasToolCalls = message.content.some((c) => c.type === "toolCall");
+		this.hasToolCalls = hasToolCalls;
 		if (!hasToolCalls) {
 			if (message.stopReason === "aborted") {
 				const abortMessage =

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

@@ -47,7 +47,7 @@ import {
 	VERSION,
 } from "../../config.js";
 import { type AgentSession, type AgentSessionEvent, parseSkillBlock } from "../../core/agent-session.js";
-import { type AgentSessionRuntime, SessionImportFileNotFoundError } from "../../core/agent-session-runtime.js";
+import type { AgentSessionRuntime } from "../../core/agent-session-runtime.js";
 import type {
 	ExtensionContext,
 	ExtensionRunner,
@@ -226,6 +226,9 @@ export class InteractiveMode {
 	// Tool execution tracking: toolCallId -> component
 	private pendingTools = new Map<string, ToolExecutionComponent>();
 
+	// Track first user message to avoid leading spacer at top of chat
+	private isFirstUserMessage = true;
+
 	// Tool output expansion state
 	private toolOutputExpanded = false;
 
@@ -2841,10 +2844,12 @@ export class InteractiveMode {
 			case "user": {
 				const textContent = this.getUserMessageText(message);
 				if (textContent) {
+					if (!this.isFirstUserMessage) {
+						this.chatContainer.addChild(new Spacer(1));
+					}
 					const skillBlock = parseSkillBlock(textContent);
 					if (skillBlock) {
 						// Render skill block (collapsible)
-						this.chatContainer.addChild(new Spacer(1));
 						const component = new SkillInvocationMessageComponent(
 							skillBlock,
 							this.getMarkdownThemeWithSettings(),
@@ -2863,6 +2868,7 @@ export class InteractiveMode {
 						const userComponent = new UserMessageComponent(textContent, this.getMarkdownThemeWithSettings());
 						this.chatContainer.addChild(userComponent);
 					}
+					this.isFirstUserMessage = false;
 					if (options?.populateHistory) {
 						this.editor.addToHistory?.(textContent);
 					}
@@ -2900,6 +2906,7 @@ export class InteractiveMode {
 		options: { updateFooter?: boolean; populateHistory?: boolean } = {},
 	): void {
 		this.pendingTools.clear();
+		this.isFirstUserMessage = true;
 
 		if (options.updateFooter) {
 			this.footer.invalidate();
@@ -4410,6 +4417,20 @@ export class InteractiveMode {
 			return;
 		}
 
+		const handleImportResult = async (result: "ok" | "cancelled" | "not_found"): Promise<void> => {
+			if (result === "cancelled") {
+				this.showStatus("Import cancelled");
+				return;
+			}
+			if (result === "not_found") {
+				this.showError(`Failed to import session: File not found: ${path.resolve(inputPath)}`);
+				return;
+			}
+			await this.handleRuntimeSessionChange();
+			this.renderCurrentSessionState();
+			this.showStatus(`Session imported from: ${inputPath}`);
+		};
+
 		try {
 			if (this.loadingAnimation) {
 				this.loadingAnimation.stop();
@@ -4417,13 +4438,7 @@ export class InteractiveMode {
 			}
 			this.statusContainer.clear();
 			const result = await this.runtimeHost.importFromJsonl(inputPath);
-			if (result.cancelled) {
+			await handleImportResult(result);
-				this.showStatus("Import cancelled");
-				return;
-			}
-			await this.handleRuntimeSessionChange();
-			this.renderCurrentSessionState();
-			this.showStatus(`Session imported from: ${inputPath}`);
 		} catch (error: unknown) {
 			if (error instanceof MissingSessionCwdError) {
 				const selectedCwd = await this.promptForMissingSessionCwd(error);
@@ -4432,17 +4447,7 @@ export class InteractiveMode {
 					return;
 				}
 				const result = await this.runtimeHost.importFromJsonl(inputPath, selectedCwd);
-				if (result.cancelled) {
+				await handleImportResult(result);
-					this.showStatus("Import cancelled");
-					return;
-				}
-				await this.handleRuntimeSessionChange();
-				this.renderCurrentSessionState();
-				this.showStatus(`Session imported from: ${inputPath}`);
-				return;
-			}
-			if (error instanceof SessionImportFileNotFoundError) {
-				this.showError(`Failed to import session: ${error.message}`);
 				return;
 			}
 			await this.handleFatalRuntimeError("Failed to import session", error);

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

@@ -0,0 +1,57 @@
+import type { AssistantMessage } from "@mariozechner/pi-ai";
+import { describe, expect, test } from "vitest";
+import { AssistantMessageComponent } from "../src/modes/interactive/components/assistant-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";
+
+function createAssistantMessage(content: AssistantMessage["content"]): AssistantMessage {
+	return {
+		role: "assistant",
+		content,
+		api: "openai-responses",
+		provider: "openai",
+		model: "gpt-4o-mini",
+		usage: {
+			input: 0,
+			output: 0,
+			cacheRead: 0,
+			cacheWrite: 0,
+			totalTokens: 0,
+			cost: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0, total: 0 },
+		},
+		stopReason: "stop",
+		timestamp: Date.now(),
+	};
+}
+
+describe("AssistantMessageComponent", () => {
+	test("adds OSC 133 zone markers to assistant messages without tool calls", () => {
+		initTheme("dark");
+
+		const component = new AssistantMessageComponent(createAssistantMessage([{ type: "text", text: "hello" }]));
+		const lines = component.render(40);
+
+		expect(lines).not.toHaveLength(0);
+		expect(lines[0]).toContain(OSC133_ZONE_START);
+		expect(lines[lines.length - 1].startsWith(OSC133_ZONE_END + OSC133_ZONE_FINAL)).toBe(true);
+	});
+
+	test("does not add OSC 133 zone markers when assistant message contains tool calls", () => {
+		initTheme("dark");
+
+		const component = new AssistantMessageComponent(
+			createAssistantMessage([
+				{ type: "text", text: "calling tool" },
+				{ type: "toolCall", id: "tool-1", name: "read", arguments: { path: "file.txt" } },
+			]),
+		);
+		const rendered = component.render(60).join("\n");
+
+		expect(rendered.includes(OSC133_ZONE_START)).toBe(false);
+		expect(rendered.includes(OSC133_ZONE_END)).toBe(false);
+		expect(rendered.includes(OSC133_ZONE_FINAL)).toBe(false);
+	});
+});