gsd-pi 2.81.0 → 2.82.0-dev.20138ae42

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

@@ -1,6 +1,5 @@
-/**
- * Component for displaying bash command execution with streaming output.
- */
+// Project/App: GSD-2
+// File Purpose: Interactive terminal bash execution renderer with streaming output and recommended command cards.
 
 import { Container, Loader, Spacer, Text, type TUI } from "@gsd/pi-tui";
 import stripAnsi from "strip-ansi";
@@ -13,6 +12,7 @@ import {
 import { theme } from "../theme/theme.js";
 import { DynamicBorder } from "./dynamic-border.js";
 import { editorKey, keyHint } from "./keybinding-hints.js";
+import { renderCommandCard, renderTranscriptCard, type StatusTone } from "./transcript-design.js";
 import { truncateToVisualLines } from "./visual-truncate.js";
 
 // Preview line limit when not expanded (matches tool execution behavior)
@@ -120,6 +120,67 @@ export class BashExecutionComponent extends Container {
 		this.updateDisplay();
 	}
 
+	override render(width: number): string[] {
+		const frameWidth = Math.max(20, width);
+		const elapsedStatus =
+			this.status === "running"
+				? "running"
+				: this.status === "complete"
+					? "success"
+					: this.status === "cancelled"
+						? "cancelled"
+						: `failed${this.exitCode !== undefined ? ` · exit ${this.exitCode}` : ""}`;
+		const tone: StatusTone =
+			this.status === "running"
+				? "running"
+				: this.status === "complete"
+					? "success"
+					: this.status === "cancelled"
+						? "warning"
+						: "error";
+
+		if (!this.expanded && this.status !== "error") {
+			return [
+				"",
+				...renderCommandCard(this.command.replace(/\s+/g, " ").trim(), frameWidth, {
+					status: elapsedStatus,
+					tone,
+				}),
+			];
+		}
+
+		const output = this.outputLines.join("\n");
+		const contextTruncation = truncateTail(output, {
+			maxLines: DEFAULT_MAX_LINES,
+			maxBytes: DEFAULT_MAX_BYTES,
+		});
+		const truncationResult = this.truncationResult ?? contextTruncation;
+		const fullOutputPath = this.fullOutputPath;
+		const availableLines = contextTruncation.content ? contextTruncation.content.split("\n") : [];
+		const preview = this.expanded ? availableLines : availableLines.slice(-PREVIEW_LINES);
+		const hidden = Math.max(0, availableLines.length - preview.length);
+		const truncationWarning =
+			(truncationResult.truncated || contextTruncation.truncated) && fullOutputPath
+				? [theme.fg("warning", `Output truncated. Full output: ${fullOutputPath}`)]
+				: [];
+		const body = [
+			theme.fg("toolTitle", `$ ${this.command}`),
+			...preview.map((line) => theme.fg("toolOutput", line)),
+			...(hidden > 0 ? [theme.fg("muted", `... ${hidden} earlier lines`)] : []),
+			...truncationWarning,
+		];
+		return [
+			"",
+			...renderTranscriptCard(body, frameWidth, {
+				title: "command",
+				right: elapsedStatus,
+				tone,
+				footerLeft: this.expanded ? "output expanded" : "output preview",
+				footerRight: this.expanded ? "ctrl+o collapse" : "ctrl+o expand",
+			}),
+		];
+	}
+
 	private updateDisplay(): void {
 		// Apply truncation for LLM context limits (same limits as bash tool)
 		const fullOutput = this.outputLines.join("\n");

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

@@ -1,5 +1,5 @@
 import * as Diff from "diff";
-import { theme } from "../theme/theme.js";
+import { getLanguageFromPath, highlightCode, theme } from "../theme/theme.js";
 
 /**
  * Parse diff line to extract prefix, line number, and content.
@@ -66,19 +66,25 @@ function renderIntraLineDiff(oldContent: string, newContent: string): { removedL
 }
 
 export interface RenderDiffOptions {
-	/** File path (unused, kept for API compatibility) */
+	/** File path used to choose syntax highlighting for changed content. */
 	filePath?: string;
 }
 
+function syntaxLine(content: string, lang: string | undefined): string {
+	if (!lang) return content;
+	return highlightCode(content, lang)[0] ?? content;
+}
+
 /**
  * Render a diff string with colored lines and intra-line change highlighting.
  * - Context lines: dim/gray
  * - Removed lines: red, with inverse on changed tokens
  * - Added lines: green, with inverse on changed tokens
  */
-export function renderDiff(diffText: string, _options: RenderDiffOptions = {}): string {
+export function renderDiff(diffText: string, options: RenderDiffOptions = {}): string {
 	const lines = diffText.split("\n");
 	const result: string[] = [];
+	const lang = options.filePath ? getLanguageFromPath(options.filePath) : undefined;
 
 	let i = 0;
 	while (i < lines.length) {
@@ -126,19 +132,19 @@ export function renderDiff(diffText: string, _options: RenderDiffOptions = {}):
 			} else {
 				// Show all removed lines first, then all added lines
 				for (const removed of removedLines) {
-					result.push(theme.fg("toolDiffRemoved", `-${removed.lineNum} ${replaceTabs(removed.content)}`));
+					result.push(`${theme.fg("toolDiffRemoved", `-${removed.lineNum} `)}${syntaxLine(replaceTabs(removed.content), lang)}`);
 				}
 				for (const added of addedLines) {
-					result.push(theme.fg("toolDiffAdded", `+${added.lineNum} ${replaceTabs(added.content)}`));
+					result.push(`${theme.fg("toolDiffAdded", `+${added.lineNum} `)}${syntaxLine(replaceTabs(added.content), lang)}`);
 				}
 			}
 		} else if (parsed.prefix === "+") {
 			// Standalone added line
-			result.push(theme.fg("toolDiffAdded", `+${parsed.lineNum} ${replaceTabs(parsed.content)}`));
+			result.push(`${theme.fg("toolDiffAdded", `+${parsed.lineNum} `)}${syntaxLine(replaceTabs(parsed.content), lang)}`);
 			i++;
 		} else {
 			// Context line
-			result.push(theme.fg("toolDiffContext", ` ${parsed.lineNum} ${replaceTabs(parsed.content)}`));
+			result.push(`${theme.fg("toolDiffContext", ` ${parsed.lineNum} `)}${syntaxLine(replaceTabs(parsed.content), lang)}`);
 			i++;
 		}
 	}

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

@@ -1,8 +1,12 @@
+// Project/App: GSD-2
+// File Purpose: Interactive terminal footer renderer for workspace, model, usage, context, and extension status.
+
 import { type Component, truncateToWidth, visibleWidth } from "@gsd/pi-tui";
 import type { AgentSession } from "../../../core/agent-session.js";
 import type { ReadonlyFooterDataProvider } from "../../../core/footer-data-provider.js";
 import { theme } from "../theme/theme.js";
 import { providerAuthBadge, providerDisplayName } from "./model-selector.js";
+import { renderFooterStrip } from "./transcript-design.js";
 
 /**
  * Sanitize text for display in a single-line status.
@@ -16,6 +20,17 @@ function sanitizeStatusText(text: string): string {
 		.trim();
 }
 
+function truncateFooterPath(text: string, width: number): string {
+	if (visibleWidth(text) <= width) return text;
+	const tailMatch = text.match(/( \([^)]+\)(?: • .*)?)$/);
+	if (!tailMatch) return truncateToWidth(text, width, "...");
+	const tail = tailMatch[1];
+	const tailWidth = visibleWidth(tail);
+	if (tailWidth >= width - 4) return truncateToWidth(text, width, "...");
+	const head = text.slice(0, -tail.length);
+	return `${truncateToWidth(head, width - tailWidth, "...")}${tail}`;
+}
+
 /**
  * Format token counts (similar to web-ui)
  */
@@ -155,8 +170,8 @@ export class FooterComponent implements Component {
 			? Math.max(0, Math.min(BAR_WIDTH, Math.round((contextPercentValue / 100) * BAR_WIDTH)))
 			: 0;
 		const bar =
-			theme.fg(barColor, "━".repeat(filled)) +
-			theme.fg("dim", "─".repeat(Math.max(0, BAR_WIDTH - filled)));
+			theme.fg(barColor, "█".repeat(filled)) +
+			theme.fg("dim", "░".repeat(Math.max(0, BAR_WIDTH - filled)));
 		const pctText = contextPercent === "?" ? "?" : `${contextPercent}%`;
 		const suffix = `/${formatTokens(contextWindow)}${autoIndicator}`;
 		const colorizedPct =
@@ -218,35 +233,6 @@ export class FooterComponent implements Component {
 			}
 		}
 
-		const rightSideWidth = visibleWidth(rightSide);
-		const totalNeeded = statsLeftWidth + minPadding + rightSideWidth;
-
-		let statsLine: string;
-		if (totalNeeded <= width) {
-			// Both fit - add padding to right-align model
-			const padding = " ".repeat(width - statsLeftWidth - rightSideWidth);
-			statsLine = statsLeft + padding + rightSide;
-		} else {
-			// Need to truncate right side
-			const availableForRight = width - statsLeftWidth - minPadding;
-			if (availableForRight > 0) {
-				const truncatedRight = truncateToWidth(rightSide, availableForRight, "");
-				const truncatedRightWidth = visibleWidth(truncatedRight);
-				const padding = " ".repeat(Math.max(0, width - statsLeftWidth - truncatedRightWidth));
-				statsLine = statsLeft + padding + truncatedRight;
-			} else {
-				// Not enough space for right side at all
-				statsLine = statsLeft;
-			}
-		}
-
-		// Apply dim to each part separately. statsLeft may contain color codes (for context %)
-		// that end with a reset, which would clear an outer dim wrapper. So we dim the parts
-		// before and after the colored section independently.
-		const dimStatsLeft = theme.fg("dim", statsLeft);
-		const remainder = statsLine.slice(statsLeft.length); // padding + rightSide
-		const dimRemainder = theme.fg("dim", remainder);
-
 		// Extension statuses right-aligned on the pwd line (sorted by key).
 		// Keeps the footer compact by avoiding a dedicated row when the content
 		// fits alongside pwd. Falls back to pwd-only if the combined line would
@@ -260,18 +246,21 @@ export class FooterComponent implements Component {
 						.join(" ")
 				: "";
 
-		const pwdWidth = visibleWidth(pwd);
-		const extWidth = visibleWidth(extStatusText);
-		let pwdLine: string;
-		if (extStatusText && pwdWidth + 2 + extWidth <= width) {
-			const padding = " ".repeat(width - pwdWidth - extWidth);
-			pwdLine = theme.fg("dim", pwd + padding + extStatusText);
-		} else {
-			pwdLine = truncateToWidth(theme.fg("dim", pwd), width, theme.fg("dim", "..."));
-		}
-
-		const lines = [pwdLine, dimStatsLeft + dimRemainder];
-
-		return lines;
+		const footerRight = [rightSide, extStatusText].filter(Boolean).join(" ");
+		const gsdSegment = theme.fg("accent", "● GSD");
+		const dimStatsLeft = theme.fg("dim", statsLeft);
+		const innerWidth = Math.max(1, width - 2);
+		const rightWidth = visibleWidth(footerRight);
+		const leftBudget = footerRight ? Math.max(1, innerWidth - rightWidth - 3) : innerWidth;
+		const sepWidth = visibleWidth("  │  ");
+		const pwdBudget = Math.max(1, leftBudget - visibleWidth(gsdSegment) - visibleWidth(dimStatsLeft) - sepWidth * 2);
+		const pwdSegment = theme.fg("dim", truncateFooterPath(pwd, pwdBudget));
+
+		const leftSegments = [
+			gsdSegment,
+			pwdSegment,
+			dimStatsLeft,
+		];
+		return renderFooterStrip(leftSegments, footerRight, width);
 	}
 }

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

@@ -1,4 +1,5 @@
-// GSD-2 Interactive Tool Execution Rendering
+// Project/App: GSD-2
+// File Purpose: Interactive terminal tool execution renderer for commands, tool calls, diffs, images, and summaries.
 import {
 	Box,
 	Container,
@@ -24,6 +25,7 @@ import { getLanguageFromPath, highlightCode, theme } from "../theme/theme.js";
 import { shortenPath } from "../utils/shorten-path.js";
 import { renderDiff } from "./diff.js";
 import { keyHint } from "./keybinding-hints.js";
+import { renderCommandCard, renderToolLineCard, renderTranscriptCard, type StatusTone } from "./transcript-design.js";
 import { truncateToVisualLines } from "./visual-truncate.js";
 
 // Preview line limit for bash when not expanded
@@ -83,73 +85,6 @@ function prettifyToolName(name: string, label?: string): string {
 		.join(" ");
 }
 
-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" ? "toolError" : opts.tone === "pending" ? "toolRunning" : "toolSuccess";
-	const topColor = borderColor;
-	const labelColor = opts.tone === "error" ? "toolError" : opts.tone === "pending" ? "toolRunning" : "toolSuccess";
-	const statusColor = opts.tone === "error" ? "toolError" : opts.tone === "pending" ? "toolRunning" : "toolSuccess";
-	const leftStyled = theme.fg(labelColor, theme.bold(opts.label));
-	const rightStyled = theme.fg(statusColor, opts.status);
-	const titleWidth = Math.max(1, outerWidth - 4);
-	const gap = Math.max(1, titleWidth - visibleWidth(leftStyled) - visibleWidth(rightStyled));
-	const headerRow = `${leftStyled}${" ".repeat(gap)}${rightStyled}`;
-	const headerPad = Math.max(0, titleWidth - visibleWidth(headerRow));
-
-	const sourceLines = trimOuterBlankLines(contentLines);
-	const bodyLines = (sourceLines.length > 0 ? sourceLines : [""]).map((line) => {
-		const clipped = truncateToWidth(line, contentWidth, "");
-		return clipped;
-	});
-
-	return style()
-		.border("rounded")
-		.borderColor((line) => theme.fg(line.startsWith("─") ? topColor : borderColor, line))
-		.title(headerRow + " ".repeat(headerPad))
-		.render(bodyLines, outerWidth);
-}
-
-function renderCollapsedToolRow(
-	label: string,
-	status: string,
-	width: number,
-	tone: Extract<ToolFrameTone, "success">,
-): string[] {
-	const outerWidth = Math.max(20, width);
-	const contentWidth = Math.max(1, outerWidth - 2);
-	const statusColor = tone === "success" ? "toolSuccess" : "toolMuted";
-	const labelStyled = theme.fg(statusColor, label);
-	const statusStyled = theme.fg(statusColor, status);
-	const labelWidth = Math.max(1, contentWidth - visibleWidth(statusStyled) - 1);
-	const clippedLabel = truncateToWidth(labelStyled, labelWidth, "");
-	const gap = Math.max(1, contentWidth - visibleWidth(clippedLabel) - visibleWidth(statusStyled));
-	const line = `${clippedLabel}${" ".repeat(gap)}${statusStyled}`;
-	return style()
-		.border("minimal")
-		.borderColor((text) => theme.fg(statusColor, text))
-		.render([line], outerWidth);
-}
-
 const COMPACT_ARG_VALUE_LIMIT = 60;
 const GENERIC_OUTPUT_PREVIEW_LINES = 10;
 const GENERIC_ARGS_JSON_PREVIEW_LINES = 10;
@@ -213,6 +148,40 @@ function formatToolTarget(target: ToolTargetMetadata): string | undefined {
 	return appendLineOrRange(displayPath, target);
 }
 
+function directDetailsTarget(details: unknown, action: string): ToolTargetMetadata | undefined {
+	if (!details || typeof details !== "object") return undefined;
+	const record = details as Record<string, unknown>;
+	const rawPath = record.resolvedPath ?? record.inputPath ?? record.file_path ?? record.path;
+	if (typeof rawPath !== "string" || rawPath.trim().length === 0) return undefined;
+	const target: ToolTargetMetadata = {
+		kind: "file",
+		action,
+		resolvedPath: typeof record.resolvedPath === "string" ? record.resolvedPath : rawPath,
+		inputPath: typeof record.inputPath === "string" ? record.inputPath : rawPath,
+	};
+	if (typeof record.line === "number") {
+		target.line = record.line;
+	}
+	const range = record.range;
+	if (range && typeof range === "object") {
+		const rangeRecord = range as Record<string, unknown>;
+		target.range = {
+			start: typeof rangeRecord.start === "number" ? rangeRecord.start : undefined,
+			end: typeof rangeRecord.end === "number" ? rangeRecord.end : undefined,
+		};
+	}
+	return target;
+}
+
+function firstStringArg(args: Record<string, unknown>, keys: string[]): string | null {
+	for (const key of keys) {
+		const value = str(args[key]);
+		if (value === null) continue;
+		if (value) return value;
+	}
+	return "";
+}
+
 function formatArgsPathTarget(path: string | null, args: Record<string, unknown>): string | undefined {
 	if (!path) return undefined;
 	const start = typeof args.offset === "number" ? args.offset : undefined;
@@ -692,22 +661,47 @@ export class ToolExecutionComponent extends Container {
 		}
 		const frameWidth = Math.max(20, width);
 		const contentWidth = Math.max(1, frameWidth - 4);
-		const frameTone: ToolFrameTone =
+		const frameTone: "pending" | "success" | "error" =
 			this.result?.isError ? "error" : this.isPartial || !this.result ? "pending" : "success";
 		const elapsed = formatElapsed((this.endedAt ?? Date.now()) - this.startedAt);
-		const frameStatus = `${this.isPartial || !this.result ? "running" : this.result.isError ? "failed" : "success"} · ${elapsed}`;
+		const statusWord = this.isPartial || !this.result ? "running" : this.result.isError ? "failed" : "success";
+		const frameStatus = `${statusWord} · ${elapsed}`;
 		const parsed = parseMcpToolName(this.toolName);
 		const frameLabel = parsed
 			? `${parsed.server}·${parsed.tool}`
 			: prettifyToolName(this.toolName, this.toolDefinition?.label) || "unknown";
-		if (this.shouldRenderCompactSuccess()) {
-			return ["", ...renderCollapsedToolRow(this.getCompactSummary(frameLabel), frameStatus, frameWidth, "success")];
+		const recommendedTone: StatusTone =
+			frameTone === "pending" ? "running" : frameTone === "error" ? "error" : "success";
+
+		if (this.normalizedToolName === "bash" && !this.expanded && !this.result?.isError) {
+			const command = str(this.args?.command);
+			return [
+				"",
+				...renderCommandCard(command && command.length > 0 ? formatCommandPreview(command) : frameLabel, frameWidth, {
+					status: frameStatus,
+					tone: recommendedTone,
+				}),
+			];
+		}
+		const hasImages = this.result?.content?.some((block) => block.type === "image") ?? false;
+		if (!this.expanded && !this.result?.isError && !hasImages) {
+			const compactTarget = this.getCompactTarget();
+			return [
+				"",
+				...renderToolLineCard(frameLabel, compactTarget, frameWidth, {
+					status: frameStatus,
+					tone: recommendedTone,
+					hidden: !this.isPartial && !!this.result,
+				}),
+			];
 		}
 		const lines = super.render(contentWidth);
-		const framed = renderToolFrame(lines, frameWidth, {
-			label: frameLabel,
-			status: frameStatus,
-			tone: frameTone,
+		const framed = renderTranscriptCard(lines, frameWidth, {
+			title: frameLabel,
+			right: frameStatus,
+			tone: recommendedTone,
+			footerLeft: this.expanded ? "output expanded" : undefined,
+			footerRight: this.expanded ? "ctrl+o collapse" : undefined,
 		});
 		return framed.length > 0 ? ["", ...framed] : framed;
 	}
@@ -748,15 +742,6 @@ export class ToolExecutionComponent extends Container {
 		return "Other tool actions";
 	}
 
-	private getCompactSummary(frameLabel: string): string {
-		if (this.normalizedToolName === "bash") {
-			const command = str(this.args?.command);
-			return command ? `bash ${formatCommandPreview(command)}` : frameLabel;
-		}
-		const target = this.getCompactTarget();
-		return target ? `${this.getCompactAction()} ${target}` : frameLabel;
-	}
-
 	private getCompactAction(): string {
 		const target = this.getTargetMetadata();
 		if (target?.action) return target.action === "list" ? "ls" : target.action;
@@ -765,7 +750,8 @@ export class ToolExecutionComponent extends Container {
 
 	private getTargetMetadata(): ToolTargetMetadata | undefined {
 		const target = this.result?.details?.target;
-		return target && typeof target === "object" ? target : undefined;
+		if (target && typeof target === "object") return target;
+		return directDetailsTarget(this.result?.details, this.normalizedToolName);
 	}
 
 	private getCompactTarget(): string | undefined {
@@ -773,7 +759,7 @@ export class ToolExecutionComponent extends Container {
 		const metadataTarget = metadata ? formatToolTarget(metadata) : undefined;
 		if (metadataTarget) return metadataTarget;
 
-		const path = str(this.args?.file_path ?? this.args?.path);
+		const path = firstStringArg(this.args ?? {}, ["file_path", "path", "notebook_path"]);
 		if (path === null) return undefined;
 		if (this.normalizedToolName === "read" || this.normalizedToolName === "hashline_read") {
 			return formatArgsPathTarget(path, this.args);
@@ -782,16 +768,18 @@ export class ToolExecutionComponent extends Container {
 			return path ? shortenPath(path) : undefined;
 		}
 		if (this.normalizedToolName === "ls") {
-			return shortenPath(path || ".");
+			return path ? shortenPath(path) : undefined;
 		}
 		if (this.normalizedToolName === "find") {
 			const pattern = str(this.args?.pattern);
-			return pattern ? `${pattern} in ${shortenPath(path || ".")}` : shortenPath(path || ".");
+			if (pattern) return path ? `${pattern} in ${shortenPath(path)}` : pattern;
+			return path ? shortenPath(path) : undefined;
 		}
 		if (this.normalizedToolName === "grep") {
 			const pattern = str(this.args?.pattern);
 			const glob = str(this.args?.glob);
-			const label = pattern ? `${pattern} in ${shortenPath(path || ".")}` : shortenPath(path || ".");
+			const label = pattern ? (path ? `${pattern} in ${shortenPath(path)}` : pattern) : path ? shortenPath(path) : undefined;
+			if (!label) return glob || undefined;
 			return glob ? `${label} (${glob})` : label;
 		}
 		return undefined;
@@ -1410,23 +1398,14 @@ export class ToolExecutionComponent extends Container {
 			}
 		} else {
 			// Generic tool / MCP tool without a registered renderer.
-			// MCP tool names from Claude Code arrive as `mcp__<server>__<tool>`;
-			// render the server prefix in muted style so the tool name reads
-			// cleanly. GSD-registered MCP tools have already had their prefix
-			// stripped upstream in partial-builder.ts and won't reach this branch.
-			const parsed = parseMcpToolName(this.toolName);
-			const displayName = parsed
-				? parsed.tool
-				: prettifyToolName(this.toolName, this.toolDefinition?.label);
-			const serverPrefix = parsed ? theme.fg("muted", `${parsed.server}\u00b7`) : "";
-			text = serverPrefix + theme.fg("toolTitle", theme.bold(displayName));
-
+			// The frame header already contains the tool identity, so the body
+			// should show only arguments and output.
 			const argsText = formatCompactArgs(this.args, this.expanded);
 			if (argsText) {
 				if (argsText.includes("\n")) {
-					text += `\n\n${theme.fg("toolOutput", argsText)}`;
+					text = theme.fg("toolOutput", argsText);
 				} else {
-					text += " " + theme.fg("toolOutput", argsText);
+					text = theme.fg("toolOutput", argsText);
 				}
 			}
 
@@ -1437,7 +1416,8 @@ export class ToolExecutionComponent extends Container {
 					const maxLines = this.expanded ? lines.length : GENERIC_OUTPUT_PREVIEW_LINES;
 					const displayLines = lines.slice(0, maxLines);
 					const remaining = lines.length - maxLines;
-					text += `\n\n${displayLines.map((line: string) => theme.fg("toolOutput", line)).join("\n")}`;
+					const outputText = displayLines.map((line: string) => theme.fg("toolOutput", line)).join("\n");
+					text += `${text ? "\n\n" : ""}${outputText}`;
 					if (remaining > 0) {
 						text += `${theme.fg("muted", `\n... (${remaining} more lines,`)} ${keyHint("expandTools", "to expand")})`;
 					}