gsd-pi 2.81.0 → 2.82.0

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

@@ -0,0 +1,56 @@
+// Project/App: GSD-2
+// File Purpose: Visual contract tests for the recommended indented assistant message rail design.
+
+import { describe, test } from "node:test";
+import assert from "node:assert/strict";
+import stripAnsi from "strip-ansi";
+import type { AssistantMessage } from "@gsd/pi-ai";
+
+import { initTheme } from "../../theme/theme.js";
+import { AssistantMessageComponent } from "../assistant-message.js";
+import { formatTimestamp } from "../timestamp.js";
+
+initTheme("dark", false);
+
+describe("AssistantMessageComponent recommended rail design", () => {
+	test("renders assistant content with a lightly indented left rail", () => {
+		const message = {
+			id: "m1",
+			role: "assistant",
+			provider: "test",
+			model: "gpt-test",
+			timestamp: 1,
+			content: [{ type: "text", text: "I will update the renderer and run verification." }],
+		} as unknown as AssistantMessage;
+
+		const component = new AssistantMessageComponent(message, true);
+		const raw = component.render(80);
+		const plain = raw.map((line) => stripAnsi(line));
+		const joined = plain.join("\n");
+
+		assert.ok(plain.some((line) => line.startsWith("  ┃ ")), `expected indented rail-prefixed lines:\n${joined}`);
+		assert.ok(raw.some((line) => line.includes("\x1b[48;")), `expected faint assistant block background:\n${raw.join("\n")}`);
+		assert.match(joined, /^\s*┃\s*$/m, "assistant block should include vertical padding rows");
+		assert.match(joined, /GSD/);
+		assert.match(joined, /gpt-test/);
+		assert.match(joined, /update the renderer/);
+		assert.doesNotMatch(joined, /^┃/m, "assistant rail should be slightly indented from the left edge");
+		assert.doesNotMatch(joined, /^╭/m, "assistant messages should not use rounded card borders");
+	});
+
+	test("renders metadata for a zero timestamp", () => {
+		const message = {
+			id: "m1",
+			role: "assistant",
+			provider: "test",
+			model: "gpt-test",
+			timestamp: 0,
+			content: [{ type: "text", text: "Finished." }],
+		} as unknown as AssistantMessage;
+
+		const component = new AssistantMessageComponent(message, true);
+		const joined = component.render(80).map((line) => stripAnsi(line)).join("\n");
+
+		assert.match(joined, new RegExp(formatTimestamp(0)));
+	});
+});

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

@@ -1,4 +1,5 @@
-// GSD-2 Interactive Tool Execution Rendering Tests
+// Project/App: GSD-2
+// File Purpose: Tests for interactive terminal tool execution rendering.
 import { describe, test } from "node:test";
 import assert from "node:assert/strict";
 import stripAnsi from "strip-ansi";
@@ -60,6 +61,23 @@ describe("ToolExecutionComponent", () => {
 		assert.match(rendered, /running · \d+(ms|s)/);
 	});
 
+	test("does not duplicate running generic tool labels before args", () => {
+		const rendered = renderToolCollapsed(
+			"Agent",
+			{
+				description: "Scout habit tracker codebase",
+				subagent_type: "Explore",
+				prompt: "Read these files and give me a concise summary of each.",
+			},
+		);
+
+		const labelMatches = rendered.match(/Agent/g) ?? [];
+		assert.equal(labelMatches.length, 1, `expected only the card title to contain Agent:\n${rendered}`);
+		assert.doesNotMatch(rendered, /description="Scout habit tracker codebase"/);
+		assert.doesNotMatch(rendered, /subagent_type="Explore"/);
+		assert.match(rendered, /running · \d+(ms|s)/);
+	});
+
 	test("renders framed header with failed status for failed tool result", () => {
 		const rendered = renderTool(
 			"mcp__demo__do_thing",
@@ -87,6 +105,19 @@ describe("ToolExecutionComponent", () => {
 		assert.doesNotMatch(rendered, /ok=true/);
 	});
 
+	test("does not duplicate generic tool labels in collapsed cards", () => {
+		const rendered = renderToolCollapsed(
+			"TodoWrite",
+			{ todos: [{ content: "Ship it", status: "pending" }] },
+			{ content: [{ type: "text", text: "TodoWrite" }], isError: false },
+		);
+
+		const labelMatches = rendered.match(/TodoWrite/g) ?? [];
+		assert.equal(labelMatches.length, 1, `expected only the card title to contain TodoWrite:\n${rendered}`);
+		assert.match(rendered, /output hidden/);
+		assert.match(rendered, /ctrl\+o expand/);
+	});
+
 	test("exposes phase metadata for successful low-signal tool rows", () => {
 		const component = new ToolExecutionComponent(
 			"gsd_requirement_update",
@@ -132,8 +163,41 @@ describe("ToolExecutionComponent", () => {
 			},
 		);
 
-		assert.match(rendered, /read .*src\/Inspector\.tsx:4-12/);
+		assert.match(rendered, /Read/);
+		assert.match(rendered, /src\/Inspector\.tsx:4-12/);
 		assert.doesNotMatch(rendered, /source/);
+		assert.doesNotMatch(rendered, /output hidden\n\s*│\s*ctrl\+o expand/);
+	});
+
+	test("renders compact capitalized read rows from file_path args", () => {
+		const rendered = renderToolCollapsed(
+			"Read",
+			{ file_path: "~/Github/gsd-2/src/resources/extensions/gsd/health-widget-core.ts" },
+			{ content: [{ type: "text", text: "hidden body output" }], isError: false },
+		);
+
+		assert.match(rendered, /Read/);
+		assert.match(rendered, /health-widget-core\.ts/);
+		assert.doesNotMatch(rendered, /hidden body output/);
+	});
+
+	test("renders compact read rows from direct result details path", () => {
+		const rendered = renderToolCollapsed(
+			"read",
+			{},
+			{
+				content: [{ type: "text", text: "hidden body output" }],
+				isError: false,
+				details: {
+					path: "/tmp/project/src/resources/extensions/gsd/health-widget-core.ts",
+					range: { start: 1, end: 12 },
+				},
+			},
+		);
+
+		assert.match(rendered, /Read/);
+		assert.match(rendered, /health-widget-core\.ts:1-12/);
+		assert.doesNotMatch(rendered, /hidden body output/);
 	});
 
 	test("renders compact edit rows with target metadata", () => {
@@ -155,10 +219,21 @@ describe("ToolExecutionComponent", () => {
 			},
 		);
 
-		assert.match(rendered, /edit .*src\/Inspector\.tsx:42/);
+		assert.match(rendered, /Edit/);
+		assert.match(rendered, /src\/Inspector\.tsx:42/);
 		assert.doesNotMatch(rendered, /Updated src\/Inspector\.tsx/);
 	});
 
+	test("renders running edit rows with title and target on the top line", () => {
+		const rendered = renderToolCollapsed("edit", { path: "src/Inspector.tsx" });
+
+		const labelMatches = rendered.match(/Edit/g) ?? [];
+		assert.equal(labelMatches.length, 1, `expected tool name only in the card title:\n${rendered}`);
+		assert.match(rendered, /src\/Inspector\.tsx/);
+		assert.match(rendered, /Edit src\/Inspector\.tsx/);
+		assert.match(rendered, /running · \d+(ms|s)/);
+	});
+
 	test("renders compact write rows with target metadata", () => {
 		const rendered = renderToolCollapsed(
 			"write",
@@ -177,10 +252,36 @@ describe("ToolExecutionComponent", () => {
 			},
 		);
 
-		assert.match(rendered, /write .*src\/output\.ts/);
+		assert.match(rendered, /Write/);
+		assert.match(rendered, /src\/output\.ts/);
 		assert.doesNotMatch(rendered, /Successfully wrote/);
 	});
 
+	test("omits default cwd placeholders for collapsed search tools", () => {
+		const rendered = renderToolCollapsed(
+			"Grep",
+			{},
+			{ content: [{ type: "text", text: "hidden body output" }], isError: false },
+		);
+
+		assert.match(rendered, /Grep/);
+		assert.doesNotMatch(rendered, /^│\.\s+│/m, `expected no placeholder cwd body:\n${rendered}`);
+		assert.match(rendered, /output hidden/);
+		assert.doesNotMatch(rendered, /hidden body output/);
+		assert.doesNotMatch(rendered, /^│\s+output hidden/m, `expected compact footer text on the top row:\n${rendered}`);
+	});
+
+	test("keeps meaningful collapsed search targets", () => {
+		const rendered = renderToolCollapsed(
+			"Grep",
+			{ pattern: "Project Initialized", path: "src/resources/extensions/gsd", glob: "*.ts" },
+			{ content: [{ type: "text", text: "hidden body output" }], isError: false },
+		);
+
+		assert.match(rendered, /Project Initialized in src\/resources\/extensions\/gsd \(\*\.ts\)/);
+		assert.doesNotMatch(rendered, /hidden body output/);
+	});
+
 	test("renders compact bash rows with command preview", () => {
 		const rendered = renderToolCollapsed(
 			"bash",
@@ -188,7 +289,8 @@ describe("ToolExecutionComponent", () => {
 			{ content: [{ type: "text", text: "ok" }], isError: false, details: { cwd: "/tmp/project" } },
 		);
 
-		assert.match(rendered, /bash npm run typecheck -- --watch false/);
+		assert.match(rendered, /\$ npm run typecheck -- --watch false/);
+		assert.doesNotMatch(rendered, /├/, "collapsed command cards should not include internal divider lines");
 		assert.doesNotMatch(rendered, /\bok\b/);
 	});
 
@@ -339,7 +441,7 @@ describe("ToolExecutionComponent", () => {
 		assert.doesNotMatch(rendered, /gsd_requirement_update/);
 	});
 
-	test("formatCompactArgs truncates long string values inline instead of dumping JSON", () => {
+	test("collapsed generic running tools hide primitive args", () => {
 		const longPath = "/Users/alice/.gsd/projects/4dce7b775013/worktrees/slice-S03-some-long-path-that-exceeds-limit";
 		const rendered = renderToolCollapsed("gsd_slice_complete", {
 			sliceId: "S03",
@@ -347,9 +449,11 @@ describe("ToolExecutionComponent", () => {
 			worktree: longPath,
 		});
 
-		assert.match(rendered, /sliceId="S03"/);
-		assert.match(rendered, /milestoneId="M001"/);
-		assert.match(rendered, /worktree=".*…"/);
+		assert.match(rendered, /Slice Complete/);
+		assert.match(rendered, /running · \d+(ms|s)/);
+		assert.doesNotMatch(rendered, /sliceId="S03"/);
+		assert.doesNotMatch(rendered, /milestoneId="M001"/);
+		assert.doesNotMatch(rendered, /worktree=/);
 		assert.doesNotMatch(rendered, /"sliceId":\s*"S03"/);
 	});
 

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

@@ -0,0 +1,48 @@
+// Project/App: GSD-2
+// File Purpose: Visual contract tests for left-edge user chat rails.
+
+import { describe, test } from "node:test";
+import assert from "node:assert/strict";
+import { stripVTControlCharacters } from "node:util";
+import type { AssistantMessage } from "@gsd/pi-ai";
+
+import { initTheme } from "../../theme/theme.js";
+import { AssistantMessageComponent } from "../assistant-message.js";
+import { UserMessageComponent } from "../user-message.js";
+
+initTheme("dark", false);
+
+describe("UserMessageComponent chat rail design", () => {
+	test("renders user messages against the left edge", () => {
+		const component = new UserMessageComponent("Can we make the transcript feel like chat?", undefined, 1, "date-time-iso");
+		const raw = component.render(100);
+		const plain = raw.map((line) => stripVTControlCharacters(line));
+		const joined = plain.join("\n");
+
+		assert.ok(plain.some((line) => /^┃ You/.test(line)), `expected left-edge user rail header:\n${joined}`);
+		assert.ok(plain.some((line) => /^┃ Can we make the transcript feel like chat\?/.test(line)), `expected left-edge user rail body:\n${joined}`);
+		assert.ok(raw.some((line) => line.includes("\x1b[48;")), `expected faint user block background:\n${raw.join("\n")}`);
+		assert.match(joined, /^┃\s*$/m, "user block should include vertical padding rows");
+		assert.match(joined, /feel like chat/);
+		assert.doesNotMatch(joined, /[╭╮╰╯]/, "user rail should not use boxed bubble corners");
+		assert.doesNotMatch(joined, /^  ┃ You/m, "user rail should not be indented like GSD messages");
+	});
+
+	test("uses a different faint background than GSD messages", () => {
+		const user = new UserMessageComponent("Use a distinct user color.");
+		const assistant = new AssistantMessageComponent({
+			id: "m1",
+			role: "assistant",
+			provider: "test",
+			model: "gpt-test",
+			content: [{ type: "text", text: "GSD message." }],
+		} as unknown as AssistantMessage);
+
+		const userBg = user.render(100).join("\n").match(/\x1b\[48;[^m]+m/)?.[0];
+		const assistantBg = assistant.render(100).join("\n").match(/\x1b\[48;[^m]+m/)?.[0];
+
+		assert.ok(userBg, "expected user message background color");
+		assert.ok(assistantBg, "expected assistant message background color");
+		assert.notEqual(userBg, assistantBg, "user and GSD message backgrounds should be distinct");
+	});
+});

package/packages/pi-coding-agent/src/modes/interactive/components/adaptive-layout.test.ts

@@ -1,4 +1,5 @@
-// GSD2 - Runtime tests for adaptive terminal layout rendering
+// Project/App: GSD-2
+// File Purpose: Runtime tests for adaptive command-center terminal layout rendering.
 
 import assert from "node:assert/strict";
 import { describe, it, before } from "node:test";
@@ -15,7 +16,7 @@ function render(component: AdaptiveLayoutComponent, width: number): string {
 }
 
 describe("AdaptiveLayoutComponent", () => {
-	it("renders workflow command center and inspector on wide terminals", () => {
+	it("renders a rounded workflow command center on wide terminals", () => {
 		const component = new AdaptiveLayoutComponent(() => ({
 			override: "workflow",
 			activeToolCount: 2,
@@ -26,8 +27,13 @@ describe("AdaptiveLayoutComponent", () => {
 
 		const output = render(component, 132);
 		assert.match(output, /GSD Command Center/);
-		assert.match(output, /signals/);
+		assert.match(output, /workflow · ready/);
 		assert.match(output, /2 running/);
+		assert.match(output, /watch tool output/);
+		assert.doesNotMatch(output, /signals/);
+		assert.doesNotMatch(output, /inspector/);
+		assert.doesNotMatch(output, /\bauto\b/i);
+		assert.match(output, /^╭─+╮/m);
 	});
 
 	it("falls back to a single compact row for narrow workflow terminals", () => {
@@ -41,6 +47,7 @@ describe("AdaptiveLayoutComponent", () => {
 		const output = render(component, 68);
 		assert.match(output, /GSD compact/);
 		assert.doesNotMatch(output, /signals/);
+		assert.doesNotMatch(output, /\bauto\b/i);
 	});
 
 	it("renders blocking failure context in debug mode", () => {

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

@@ -1,9 +1,11 @@
-// GSD2 - Adaptive terminal mode dashboard for the interactive TUI
+// Project/App: GSD-2
+// File Purpose: Adaptive command-center dashboard for the interactive TUI.
 
-import { style, truncateToWidth, visibleWidth, type Component } from "@gsd/pi-tui";
+import { style, truncateToWidth, type Component } from "@gsd/pi-tui";
 import type { TuiAdaptiveMode, TuiMode } from "../tui-mode.js";
 import { resolveTuiMode } from "../tui-mode.js";
 import { theme, type ThemeColor } from "../theme/theme.js";
+import { alignRight, breakpoint, keyValue, roundedPanel } from "./tui-style-kit.js";
 
 export interface AdaptiveLayoutState {
 	override: TuiAdaptiveMode;
@@ -41,34 +43,44 @@ export class AdaptiveLayoutComponent implements Component {
 	}
 
 	private renderWorkflow(width: number, state: AdaptiveLayoutState): string[] {
-		if (width < 112) return this.renderCompact(width, "workflow", state);
+		if (width < 72) return this.renderCompact(width, "workflow", state);
 
-		const leftWidth = Math.max(44, Math.floor(width * 0.56));
-		const rightWidth = Math.max(32, width - leftWidth - 2);
 		const phase = state.gsdPhase ?? "Ready";
-		const left = this.frame(
-			[
-				this.metric("Active", phase, "modeWorkflow"),
-				this.metric("Tools", state.activeToolCount > 0 ? `${state.activeToolCount} running` : "idle", "toolRunning"),
-				this.metric("Mode", state.override === "auto" ? "auto workflow" : state.override, "modeWorkflow"),
-			],
-			leftWidth,
-			"GSD Command Center",
-			"workflow",
-			"modeWorkflow",
-		);
-		const right = this.frame(
-			[
-				`Session ${state.sessionName ?? "current"}`,
-				`Path ${this.basename(state.cwd)}`,
-				`Next ${state.activeToolCount > 0 ? "watch tool output" : "continue from prompt"}`,
-			],
-			rightWidth,
-			"signals",
-			"inspector",
-			"surfaceAccent",
-		);
-		return this.columns(left, right, leftWidth);
+		const tools = state.activeToolCount > 0 ? `${state.activeToolCount} running` : "idle";
+		const next = state.activeToolCount > 0 ? "watch tool output" : "continue from prompt";
+		const modeLabel = state.override === "auto" ? "workflow" : state.override;
+		const bp = breakpoint(width);
+
+		const rows = bp === "regular"
+			? [
+					keyValue("Status", phase, "modeWorkflow"),
+					keyValue("Tools", tools, state.activeToolCount > 0 ? "toolRunning" : "toolMuted"),
+					keyValue("Session", state.sessionName ?? "current", "text"),
+					keyValue("Next", next, "surfaceAccent"),
+				]
+			: [
+					alignRight(
+						keyValue("Status", phase, "modeWorkflow"),
+						keyValue("Tools", tools, state.activeToolCount > 0 ? "toolRunning" : "toolMuted"),
+						Math.max(1, width - 2),
+					),
+					alignRight(
+						keyValue("Session", state.sessionName ?? "current", "text"),
+						keyValue("Path", this.basename(state.cwd), "text"),
+						Math.max(1, width - 2),
+					),
+					alignRight(
+						keyValue("Next", next, "surfaceAccent"),
+						keyValue("Mode", modeLabel, "modeWorkflow"),
+						Math.max(1, width - 2),
+					),
+				];
+
+		return roundedPanel(rows, width, {
+			title: "GSD Command Center",
+			rightTitle: `${modeLabel} · ${state.lastError ? "blocked" : "ready"}`,
+			tone: state.lastError ? "error" : "default",
+		});
 	}
 
 	private renderValidation(width: number, state: AdaptiveLayoutState): string[] {
@@ -140,21 +152,10 @@ export class AdaptiveLayoutComponent implements Component {
 		return `${theme.fg("surfaceMuted", `${label.padEnd(8)} `)}${theme.fg(color, value)}`;
 	}
 
-	private columns(left: string[], right: string[], leftWidth: number): string[] {
-		const rows = Math.max(left.length, right.length);
-		const output: string[] = [];
-		for (let i = 0; i < rows; i++) {
-			const leftLine = left[i] ?? "";
-			const rightLine = right[i] ?? "";
-			const gap = " ".repeat(Math.max(2, leftWidth - visibleWidth(leftLine) + 2));
-			output.push(`${leftLine}${gap}${rightLine}`);
-		}
-		return output;
-	}
-
 	private basename(cwd: string): string {
-		const trimmed = cwd.replace(/\/+$/, "");
-		const slash = trimmed.lastIndexOf("/");
+		const trimmed = cwd.replace(/[\\/]+$/, "");
+		if (!trimmed) return cwd.includes("\\") ? "\\" : "/";
+		const slash = Math.max(trimmed.lastIndexOf("/"), trimmed.lastIndexOf("\\"));
 		return slash === -1 ? trimmed : trimmed.slice(slash + 1);
 	}
 }

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

@@ -1,9 +1,11 @@
-// GSD2 TUI - Assistant message card renderer for interactive terminal sessions.
+// Project/App: GSD-2
+// File Purpose: Assistant message rail renderer for interactive terminal sessions.
 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 { type TimestampFormat } from "./timestamp.js";
-import { renderChatFrame } from "./chat-frame.js";
+import { formatTimestamp } from "./timestamp.js";
+import { renderAssistantRail } from "./transcript-design.js";
 
 export interface ContentRange {
 	startIndex: number;
@@ -163,19 +165,17 @@ export class AssistantMessageComponent extends Container {
 
 	override render(width: number): string[] {
 		const frameWidth = Math.max(20, width);
-		const contentWidth = Math.max(1, frameWidth - 4);
+		const contentWidth = Math.max(1, frameWidth - 2);
 		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;
+		const metaParts = [];
+		if (this.lastMessage?.model) metaParts.push(this.lastMessage.model);
+		if (this.showMetadata && this.lastMessage?.timestamp != null) {
+			metaParts.push(formatTimestamp(this.lastMessage.timestamp, this.timestampFormat));
 		}
-		return ["", ...framed];
+		const rendered = renderAssistantRail(lines, frameWidth, {
+			label: "GSD",
+			meta: metaParts.length > 0 ? `· ${metaParts.join(" · ")}` : undefined,
+		});
+		return rendered.length > 0 ? ["", ...rendered] : rendered;
 	}
 }

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++;
 		}
 	}