gsd-pi 2.74.0-dev.28a6415 → 2.74.0-dev.658744a

package/packages/pi-coding-agent/src/core/agent-session.ts

@@ -1558,9 +1558,12 @@ export class AgentSession {
 			}
 		}
 
-		this._disconnectFromAgent();
-		await this.abort();
-		this.agent.reset();
+	// #4243: Must call abort() BEFORE _disconnectFromAgent() so that
+	// message_end/agent_end events fire and the #4216 finalization code
+	// can run before we unsubscribe from the event bus.
+	await this.abort();
+	this._disconnectFromAgent();
+	this.agent.reset();
 		// Update cwd to current process directory — auto-mode may have chdir'd
 		// into a worktree since the original session was created.
 		const previousCwd = this._cwd;
@@ -2411,9 +2414,12 @@ export class AgentSession {
 			}
 		}
 
-		this._disconnectFromAgent();
-		await this.abort();
-		this._steeringMessages = [];
+	// #4243: Must call abort() BEFORE _disconnectFromAgent() so that
+	// message_end/agent_end events fire and the #4216 finalization code
+	// can run before we unsubscribe from the event bus.
+	await this.abort();
+	this._disconnectFromAgent();
+	this._steeringMessages = [];
 		this._followUpMessages = [];
 		this._pendingNextTurnMessages = [];
 

package/packages/pi-coding-agent/src/core/chat-controller-ordering.test.ts

@@ -234,6 +234,64 @@ test("chat-controller renders serverToolUse before trailing text matching conten
 	assert.equal(host.chatContainer.children[1]?.constructor?.name, "AssistantMessageComponent");
 });
 
+test("chat-controller replays final message_end content when result adds unstreamed trailing text", async () => {
+	(globalThis as any)[Symbol.for("@gsd/pi-coding-agent:theme")] = {
+		fg: (_key: string, text: string) => text,
+		bg: (_key: string, text: string) => text,
+		bold: (text: string) => text,
+		italic: (text: string) => text,
+		truncate: (text: string) => text,
+	};
+
+	const host = createHost();
+	host.getMarkdownThemeWithSettings = () => ({});
+
+	const tool = {
+		type: "toolCall",
+		id: "mcp-end-replay-1",
+		name: "read",
+		mcpServer: "filesystem",
+		arguments: { filePath: "/tmp/demo.txt" },
+	};
+
+	await handleAgentEvent(host, { type: "message_start", message: makeAssistant([]) } as any);
+
+	const streamedContent = [
+		tool,
+		{ type: "thinking", thinking: "I am analyzing tool output..." },
+	];
+	await handleAgentEvent(
+		host,
+		{
+			type: "message_update",
+			message: makeAssistant(streamedContent),
+			assistantMessageEvent: {
+				type: "thinking_delta",
+				contentIndex: 1,
+				delta: "I am analyzing tool output...",
+				partial: makeAssistant(streamedContent),
+			},
+		} as any,
+	);
+
+	assert.equal(host.chatContainer.children.length, 2, "streaming shows tool + thinking only");
+	assert.equal(host.chatContainer.children[0]?.constructor?.name, "ToolExecutionComponent");
+	assert.equal(host.chatContainer.children[1]?.constructor?.name, "AssistantMessageComponent");
+
+	// Final payload includes trailing text that never arrived as message_update.
+	const finalContent = [
+		tool,
+		{ type: "thinking", thinking: "I am analyzing tool output..." },
+		{ type: "text", text: "Correct anything important I missed?" },
+	];
+	await handleAgentEvent(host, { type: "message_end", message: makeAssistant(finalContent) } as any);
+
+	assert.equal(host.chatContainer.children.length, 3, "message_end should replay and include trailing text segment");
+	assert.equal(host.chatContainer.children[0]?.constructor?.name, "ToolExecutionComponent");
+	assert.equal(host.chatContainer.children[1]?.constructor?.name, "AssistantMessageComponent");
+	assert.equal(host.chatContainer.children[2]?.constructor?.name, "AssistantMessageComponent");
+});
+
 test("chat-controller keeps pre-tool prose visible until post-tool prose arrives, then prunes it", async () => {
 	(globalThis as any)[Symbol.for("@gsd/pi-coding-agent:theme")] = {
 		fg: (_key: string, text: string) => text,
@@ -392,6 +450,89 @@ test("chat-controller keeps pre-tool thinking visible for claude-code MCP turns
 	await handleAgentEvent(host, { type: "message_end", message: makeAssistant([thinkingOnly[0], mcpTool]) } as any);
 });
 
+test("chat-controller keeps pre-tool question text for claude-code MCP when post-tool prose exists", async () => {
+	(globalThis as any)[Symbol.for("@gsd/pi-coding-agent:theme")] = {
+		fg: (_key: string, text: string) => text,
+		bg: (_key: string, text: string) => text,
+		bold: (text: string) => text,
+		italic: (text: string) => text,
+		truncate: (text: string) => text,
+	};
+
+	const host = createHost();
+	host.getMarkdownThemeWithSettings = () => ({});
+
+	const mcpTool = {
+		type: "toolCall",
+		id: "mcp-tool-question-1",
+		name: "glob",
+		mcpServer: "filesystem",
+		arguments: { pattern: "**/*" },
+	};
+
+	await handleAgentEvent(host, { type: "message_start", message: makeAssistant([]) } as any);
+
+	const questionText = { type: "text", text: "Which file should I inspect?" };
+
+	await handleAgentEvent(
+		host,
+		{
+			type: "message_update",
+			message: makeAssistant([questionText]),
+			assistantMessageEvent: {
+				type: "text_delta",
+				contentIndex: 0,
+				delta: questionText.text,
+				partial: makeAssistant([questionText]),
+			},
+		} as any,
+	);
+
+	await handleAgentEvent(
+		host,
+		{
+			type: "message_update",
+			message: makeAssistant([questionText, mcpTool]),
+			assistantMessageEvent: {
+				type: "toolcall_end",
+				contentIndex: 1,
+				toolCall: {
+					...mcpTool,
+					externalResult: {
+						content: [{ type: "text", text: "glob output" }],
+						details: {},
+						isError: false,
+					},
+				},
+				partial: makeAssistant([questionText, mcpTool]),
+			},
+		} as any,
+	);
+
+	const postTool = { type: "text", text: "I'll review that next." };
+	const finalContent = [questionText, mcpTool, postTool];
+	await handleAgentEvent(
+		host,
+		{
+			type: "message_update",
+			message: makeAssistant(finalContent),
+			assistantMessageEvent: {
+				type: "text_delta",
+				contentIndex: 2,
+				delta: postTool.text,
+				partial: makeAssistant(finalContent),
+			},
+		} as any,
+	);
+
+	assert.equal(host.chatContainer.children.length, 3, "question text should remain alongside MCP tool and post-tool prose");
+	assert.equal(host.chatContainer.children[0]?.constructor?.name, "AssistantMessageComponent", "pre-tool question stays visible");
+	assert.equal(host.chatContainer.children[1]?.constructor?.name, "ToolExecutionComponent", "tool renders in the middle");
+	assert.equal(host.chatContainer.children[2]?.constructor?.name, "AssistantMessageComponent", "post-tool prose renders last");
+
+	await handleAgentEvent(host, { type: "message_end", message: makeAssistant(finalContent) } as any);
+});
+
 test("chat-controller prunes orphaned provisional text after claude-code sub-turn shrink when MCP tools appear", async () => {
 	(globalThis as any)[Symbol.for("@gsd/pi-coding-agent:theme")] = {
 		fg: (_key: string, text: string) => text,
@@ -493,6 +634,138 @@ test("chat-controller prunes orphaned provisional text after claude-code sub-tur
 	await handleAgentEvent(host, { type: "message_end", message: makeAssistant(finalContent) } as any);
 });
 
+test("chat-controller prunes orphans from multiple sub-turn shrinks before MCP post-tool prose", async () => {
+	(globalThis as any)[Symbol.for("@gsd/pi-coding-agent:theme")] = {
+		fg: (_key: string, text: string) => text,
+		bg: (_key: string, text: string) => text,
+		bold: (text: string) => text,
+		italic: (text: string) => text,
+		truncate: (text: string) => text,
+	};
+
+	const host = createHost();
+	host.getMarkdownThemeWithSettings = () => ({});
+
+	const mcpTool = {
+		type: "toolCall",
+		id: "mcp-tool-multi-shrink-1",
+		name: "glob",
+		mcpServer: "filesystem",
+		arguments: { pattern: "**/*" },
+	};
+
+	await handleAgentEvent(host, { type: "message_start", message: makeAssistant([]) } as any);
+
+	// Sub-turn 1: 3 text blocks (merged into one text-run).
+	const subTurn1 = [
+		{ type: "text", text: "First provisional A." },
+		{ type: "text", text: "First provisional B." },
+		{ type: "text", text: "First provisional C." },
+	];
+	await handleAgentEvent(
+		host,
+		{
+			type: "message_update",
+			message: makeAssistant(subTurn1),
+			assistantMessageEvent: {
+				type: "text_delta",
+				contentIndex: 2,
+				delta: "First provisional C.",
+				partial: makeAssistant(subTurn1),
+			},
+		} as any,
+	);
+	assert.equal(host.chatContainer.children.length, 1, "first sub-turn renders 1 text-run");
+
+	// Sub-turn 2 (first shrink 3 → 2 blocks).
+	const subTurn2 = [
+		{ type: "text", text: "Second provisional A." },
+		{ type: "text", text: "Second provisional B." },
+	];
+	await handleAgentEvent(
+		host,
+		{
+			type: "message_update",
+			message: makeAssistant(subTurn2),
+			assistantMessageEvent: {
+				type: "text_delta",
+				contentIndex: 1,
+				delta: "Second provisional B.",
+				partial: makeAssistant(subTurn2),
+			},
+		} as any,
+	);
+	assert.equal(host.chatContainer.children.length, 2, "first shrink appends, keeps prior text as frozen history");
+
+	// Sub-turn 3 (second shrink 2 → 1 block). This is the critical step —
+	// without orphan accumulation, sub-turn 1's orphaned segment would be
+	// dropped from tracking here and later strand in the container.
+	const subTurn3 = [{ type: "text", text: "Third provisional." }];
+	await handleAgentEvent(
+		host,
+		{
+			type: "message_update",
+			message: makeAssistant(subTurn3),
+			assistantMessageEvent: {
+				type: "text_delta",
+				contentIndex: 0,
+				delta: "Third provisional.",
+				partial: makeAssistant(subTurn3),
+			},
+		} as any,
+	);
+	assert.equal(host.chatContainer.children.length, 3, "second shrink appends again, still no prune (no post-tool text)");
+
+	// MCP tool appears — tool-only window still keeps provisional prose visible.
+	await handleAgentEvent(
+		host,
+		{
+			type: "message_update",
+			message: makeAssistant([{ type: "text", text: "Third provisional." }, mcpTool]),
+			assistantMessageEvent: {
+				type: "toolcall_end",
+				contentIndex: 1,
+				toolCall: {
+					...mcpTool,
+					externalResult: {
+						content: [{ type: "text", text: "glob output" }],
+						details: {},
+						isError: false,
+					},
+				},
+				partial: makeAssistant([{ type: "text", text: "Third provisional." }, mcpTool]),
+			},
+		} as any,
+	);
+	assert.equal(host.chatContainer.children.length, 4, "tool-only window keeps all three provisional text-runs");
+
+	// Final post-tool text arrives — prune must drop ALL three pre-tool
+	// provisional text-runs across both shrinks, leaving only tool + final text.
+	const finalContent = [mcpTool, { type: "text", text: "Final answer." }];
+	await handleAgentEvent(
+		host,
+		{
+			type: "message_update",
+			message: makeAssistant(finalContent),
+			assistantMessageEvent: {
+				type: "text_delta",
+				contentIndex: 1,
+				delta: "Final answer.",
+				partial: makeAssistant(finalContent),
+			},
+		} as any,
+	);
+	assert.equal(
+		host.chatContainer.children.length,
+		2,
+		"all pre-tool provisional segments from every shrink must be pruned once post-tool prose arrives",
+	);
+	assert.equal(host.chatContainer.children[0]?.constructor?.name, "ToolExecutionComponent");
+	assert.equal(host.chatContainer.children[1]?.constructor?.name, "AssistantMessageComponent");
+
+	await handleAgentEvent(host, { type: "message_end", message: makeAssistant(finalContent) } as any);
+});
+
 test("chat-controller pins latest assistant text above editor when tool calls are present", async () => {
 	(globalThis as any)[Symbol.for("@gsd/pi-coding-agent:theme")] = {
 		fg: (_key: string, text: string) => text,

package/packages/pi-coding-agent/src/modes/interactive/components/__tests__/tool-execution.test.ts

@@ -48,6 +48,25 @@ function renderToolCollapsed(
 }
 
 describe("ToolExecutionComponent", () => {
+	test("renders framed header with Running status while tool is partial", () => {
+		const rendered = renderToolCollapsed("mcp__demo__do_thing", { ok: true });
+
+		assert.match(rendered, /Tool demo\u00b7do_thing/);
+		assert.match(rendered, /Running/);
+	});
+
+	test("renders framed header with Error status for failed tool result", () => {
+		const rendered = renderTool(
+			"mcp__demo__do_thing",
+			{ ok: true },
+			{ content: [{ type: "text", text: "boom" }], isError: true },
+		);
+
+		assert.match(rendered, /Tool demo\u00b7do_thing/);
+		assert.match(rendered, /Error/);
+		assert.match(rendered, /boom/);
+	});
+
 	test("renders capitalized Claude Code Bash tool names with bash output instead of generic args JSON", () => {
 		const rendered = renderTool(
 			"Bash",

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

@@ -1,7 +1,8 @@
 import type { AssistantMessage } from "@gsd/pi-ai";
 import { Container, Markdown, type MarkdownTheme, Spacer, Text } from "@gsd/pi-tui";
 import { getMarkdownTheme, theme } from "../theme/theme.js";
-import { formatTimestamp, type TimestampFormat } from "./timestamp.js";
+import { type TimestampFormat } from "./timestamp.js";
+import { renderChatFrame } from "./chat-frame.js";
 
 export interface ContentRange {
 	startIndex: number;
@@ -94,10 +95,6 @@ export class AssistantMessageComponent extends Container {
 		// manual thinking toggle every turn.
 		const shouldCapThinking = hasTextContent || hasToolContent || message.provider === "claude-code";
 
-		if (hasVisibleContent) {
-			this.contentContainer.addChild(new Spacer(1));
-		}
-
 		// Render content in order; non-text/thinking blocks are silently skipped
 		for (let i = 0; i < slice.length; i++) {
 			const content = slice[i];
@@ -160,10 +157,24 @@ export class AssistantMessageComponent extends Container {
 				}
 			}
 
-			if (message.stopReason && message.timestamp) {
-				const timeStr = formatTimestamp(message.timestamp, this.timestampFormat);
-				this.contentContainer.addChild(new Text(theme.fg("dim", timeStr), 1, 0));
-			}
 		}
 	}
+
+	override render(width: number): string[] {
+		const frameWidth = Math.max(20, width);
+		const contentWidth = Math.max(1, frameWidth - 4);
+		const lines = super.render(contentWidth);
+		const headerLabel = this.lastMessage?.model ? `GSD - ${this.lastMessage.model}` : "GSD";
+		const framed = renderChatFrame(lines, frameWidth, {
+			label: headerLabel,
+			tone: "assistant",
+			timestamp: this.lastMessage?.timestamp,
+			timestampFormat: this.timestampFormat,
+			showTimestamp: this.showMetadata,
+		});
+		if (framed.length === 0) {
+			return framed;
+		}
+		return ["", ...framed];
+	}
 }

package/packages/pi-coding-agent/src/modes/interactive/components/chat-frame.ts

@@ -0,0 +1,67 @@
+import { truncateToWidth, visibleWidth } from "@gsd/pi-tui";
+import { theme } from "../theme/theme.js";
+import { formatTimestamp, type TimestampFormat } from "./timestamp.js";
+
+type FrameTone = "assistant" | "user";
+
+function trimOuterBlankLines(lines: string[]): string[] {
+	let start = 0;
+	let end = lines.length;
+	while (start < end && lines[start].trim().length === 0) start++;
+	while (end > start && lines[end - 1].trim().length === 0) end--;
+	return lines.slice(start, end);
+}
+
+export function renderChatFrame(
+	contentLines: string[],
+	width: number,
+	opts: {
+		label: string;
+		tone: FrameTone;
+		timestamp?: number;
+		timestampFormat: TimestampFormat;
+		showTimestamp?: boolean;
+	},
+): string[] {
+	const outerWidth = Math.max(20, width);
+	const contentWidth = Math.max(1, outerWidth - 2); // "│ " + content
+	const borderColor = opts.tone === "user" ? "borderAccent" : "border";
+	const borderMuted = opts.tone === "user" ? "borderMuted" : "borderMuted";
+	const border = (s: string) => theme.fg(borderColor, s);
+	const leftRaw = `• ${opts.label}`;
+	const rightRaw =
+		opts.showTimestamp === false || !opts.timestamp
+			? ""
+			: formatTimestamp(opts.timestamp, opts.timestampFormat);
+
+	const leftBudget = rightRaw
+		? Math.max(1, outerWidth - visibleWidth(rightRaw) - 1)
+		: outerWidth;
+	const left = truncateToWidth(leftRaw, leftBudget, "");
+	const leftStyled =
+		opts.tone === "user"
+			? theme.fg("accent", theme.bold(left))
+			: theme.fg("muted", theme.bold(left));
+	const rightStyled = rightRaw ? theme.fg("dim", rightRaw) : "";
+	const gap =
+		rightRaw.length > 0
+			? Math.max(
+					1,
+					outerWidth - visibleWidth(leftStyled) - visibleWidth(rightStyled),
+				)
+			: Math.max(0, outerWidth - visibleWidth(leftStyled));
+	const headerRow = `${leftStyled}${" ".repeat(gap)}${rightStyled}`;
+	const headerPad = Math.max(0, outerWidth - visibleWidth(headerRow));
+
+	const sourceLines = trimOuterBlankLines(contentLines);
+	const bodyLines = (sourceLines.length > 0 ? sourceLines : [""]).map((line) => {
+		const clipped = truncateToWidth(line, contentWidth, "");
+		return border("│ ") + clipped;
+	});
+
+	return [
+		theme.fg(borderMuted, "─".repeat(outerWidth)),
+		headerRow + " ".repeat(headerPad),
+		...bodyLines,
+	];
+}

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

@@ -9,6 +9,7 @@ import {
 	Text,
 	type TUI,
 	truncateToWidth,
+	visibleWidth,
 } from "@gsd/pi-tui";
 import stripAnsi from "strip-ansi";
 import type { ToolDefinition } from "../../../core/extensions/types.js";
@@ -65,6 +66,53 @@ function parseMcpToolName(name: string): { server: string; tool: string } | null
 	return { server: rest.slice(0, delim), tool: rest.slice(delim + 2) };
 }
 
+type ToolFrameTone = "pending" | "success" | "error";
+
+function trimOuterBlankLines(lines: string[]): string[] {
+	let start = 0;
+	let end = lines.length;
+	while (start < end && lines[start].trim().length === 0) start++;
+	while (end > start && lines[end - 1].trim().length === 0) end--;
+	return lines.slice(start, end);
+}
+
+function renderToolFrame(
+	contentLines: string[],
+	width: number,
+	opts: {
+		label: string;
+		status: string;
+		tone: ToolFrameTone;
+	},
+): string[] {
+	const outerWidth = Math.max(20, width);
+	const contentWidth = Math.max(1, outerWidth - 2); // "│ " + content
+
+	const borderColor = opts.tone === "error" ? "error" : "toolTitle";
+	const topColor = opts.tone === "error" ? "error" : "toolTitle";
+	const labelColor = opts.tone === "error" ? "error" : "toolTitle";
+	const statusColor = opts.tone === "error" ? "error" : opts.tone === "pending" ? "warning" : "success";
+	const border = (s: string) => theme.fg(borderColor, s);
+
+	const leftStyled = theme.fg(labelColor, theme.bold(`• ${opts.label}`));
+	const rightStyled = theme.fg(statusColor, opts.status);
+	const gap = Math.max(1, outerWidth - visibleWidth(leftStyled) - visibleWidth(rightStyled));
+	const headerRow = `${leftStyled}${" ".repeat(gap)}${rightStyled}`;
+	const headerPad = Math.max(0, outerWidth - visibleWidth(headerRow));
+
+	const sourceLines = trimOuterBlankLines(contentLines);
+	const bodyLines = (sourceLines.length > 0 ? sourceLines : [""]).map((line) => {
+		const clipped = truncateToWidth(line, contentWidth, "");
+		return border("│ ") + clipped;
+	});
+
+	return [
+		theme.fg(topColor, "─".repeat(outerWidth)),
+		headerRow + " ".repeat(headerPad),
+		...bodyLines,
+	];
+}
+
 const COMPACT_ARG_VALUE_LIMIT = 60;
 const GENERIC_OUTPUT_PREVIEW_LINES = 10;
 const GENERIC_ARGS_JSON_PREVIEW_LINES = 10;
@@ -379,6 +427,23 @@ export class ToolExecutionComponent extends Container {
 		this.maybeConvertImagesForKitty();
 	}
 
+	/**
+	 * Mark a tool call as historical when replaying from session context and
+	 * no matching tool result is available. Happens after compaction squashes
+	 * tool_result messages out of history — the tool call block survives but
+	 * the result is gone. Without this, the component stays in "Running" state
+	 * forever even though the tool completed long ago.
+	 */
+	markHistoricalNoResult(): void {
+		if (this.result) return; // real result already set, nothing to do
+		this.isPartial = false;
+		this.result = {
+			content: [],
+			isError: false,
+		};
+		this.updateDisplay();
+	}
+
 	/**
 	 * Finalize a pending tool call as failed/interrupted while preserving any streamed partial output.
 	 */
@@ -452,16 +517,27 @@ export class ToolExecutionComponent extends Container {
 		if (this.hideComponent) {
 			return [];
 		}
-		return super.render(width);
+		const frameWidth = Math.max(20, width);
+		const contentWidth = Math.max(1, frameWidth - 4);
+		const lines = super.render(contentWidth);
+		const frameTone: ToolFrameTone =
+			this.result?.isError ? "error" : this.isPartial || !this.result ? "pending" : "success";
+		const frameStatus = this.isPartial || !this.result ? "Running" : this.result.isError ? "Error" : "Done";
+		const parsed = parseMcpToolName(this.toolName);
+		const frameLabel = parsed
+			? `Tool ${parsed.server}·${parsed.tool}`
+			: `Tool ${this.normalizedToolName || this.toolName || "unknown"}`;
+		const framed = renderToolFrame(lines, frameWidth, {
+			label: frameLabel,
+			status: frameStatus,
+			tone: frameTone,
+		});
+		return framed.length > 0 ? ["", ...framed] : framed;
 	}
 
 	private updateDisplay(): void {
-		// Set background based on state
-		const bgFn = this.isPartial
-			? (text: string) => theme.bg("toolPendingBg", text)
-			: this.result?.isError
-				? (text: string) => theme.bg("toolErrorBg", text)
-				: (text: string) => theme.bg("toolSuccessBg", text);
+		// Tool body now uses transparent background; status is conveyed in the frame header.
+		const bgFn = (text: string) => text;
 
 		const useBuiltInRenderer = this.shouldUseBuiltInRenderer();
 		let customRendererHasContent = false;

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

@@ -1,6 +1,7 @@
-import { Container, Markdown, type MarkdownTheme, Spacer, Text } from "@gsd/pi-tui";
-import { getMarkdownTheme, theme } from "../theme/theme.js";
-import { formatTimestamp, type TimestampFormat } from "./timestamp.js";
+import { Container, Markdown, type MarkdownTheme } from "@gsd/pi-tui";
+import { getMarkdownTheme } from "../theme/theme.js";
+import { type TimestampFormat } from "./timestamp.js";
+import { renderChatFrame } from "./chat-frame.js";
 
 const OSC133_ZONE_START = "\x1b]133;A\x07";
 const OSC133_ZONE_END = "\x1b]133;B\x07";
@@ -16,32 +17,28 @@ export class UserMessageComponent extends Container {
 		super();
 		this.timestamp = timestamp;
 		this.timestampFormat = timestampFormat;
-		this.addChild(new Spacer(1));
-		this.addChild(
-			new Markdown(text, 1, 1, markdownTheme, {
-				bgColor: (text: string) => theme.bg("userMessageBg", text),
-				color: (text: string) => theme.fg("userMessageText", text),
-			}),
-		);
+		this.addChild(new Markdown(text, 0, 0, markdownTheme));
 	}
 
 	override render(width: number): string[] {
-		const lines = super.render(width);
-		if (lines.length === 0) {
-			return lines;
+		const frameWidth = Math.max(20, width);
+		const contentWidth = Math.max(1, frameWidth - 4);
+		const lines = super.render(contentWidth);
+		const framed = renderChatFrame(lines, frameWidth, {
+			label: "You",
+			tone: "user",
+			timestamp: this.timestamp,
+			timestampFormat: this.timestampFormat,
+			showTimestamp: true,
+		});
+		if (framed.length === 0) {
+			return framed;
 		}
-
-		// Insert right-aligned timestamp above the message content
-		if (this.timestamp) {
-			const timeStr = formatTimestamp(this.timestamp, this.timestampFormat);
-			const label = theme.fg("dim", timeStr);
-			const padding = Math.max(0, width - timeStr.length - 1);
-			const timestampLine = " ".repeat(padding) + label;
-			lines.splice(0, 0, timestampLine);
-		}
-
-		lines[0] = OSC133_ZONE_START + lines[0];
-		lines[lines.length - 1] = lines[lines.length - 1] + OSC133_ZONE_END;
-		return lines;
+		const out = ["", ...framed];
+		const firstFrameLine = 1;
+		const lastFrameLine = out.length - 1;
+		out[firstFrameLine] = OSC133_ZONE_START + out[firstFrameLine];
+		out[lastFrameLine] = out[lastFrameLine] + OSC133_ZONE_END;
+		return out;
 	}
 }