gsd-pi 2.74.0-dev.703eabc → 2.74.0-dev.b2838e6

package/packages/pi-coding-agent/src/modes/interactive/components/__tests__/chat-frame-compaction-tone.test.ts

@@ -0,0 +1,92 @@
+import { test, describe } from "node:test";
+import assert from "node:assert/strict";
+import stripAnsi from "strip-ansi";
+import { renderChatFrame } from "../chat-frame.js";
+import { initTheme } from "../../theme/theme.js";
+
+initTheme("dark", false);
+
+// Regression tests for the "compaction" tone added to renderChatFrame.
+// The compaction notice shares the same visual frame as user / assistant
+// messages (top rule, `• label` header, `│ ` body prefix) but uses the
+// purple `customMessageLabel` color key so it is visually distinct from
+// conversation turns.
+
+describe("renderChatFrame — compaction tone", () => {
+	test("produces a top rule, `• compaction` header row, and a │ body margin", () => {
+		const lines = renderChatFrame(
+			["Compacted from 1,224,262 tokens (ctrl+o to expand)"],
+			60,
+			{
+				label: "compaction",
+				tone: "compaction",
+				timestampFormat: "date-time-iso",
+				showTimestamp: false,
+			},
+		);
+
+		// Structure: top rule, header, body line(s)
+		assert.ok(lines.length >= 3, `expected at least 3 frame lines, got ${lines.length}`);
+
+		const plain = lines.map((line) => stripAnsi(line));
+
+		// Top rule is a solid horizontal bar
+		assert.match(plain[0], /^─+$/, "first line should be the solid top rule");
+
+		// Header row contains `• compaction`
+		assert.ok(
+			plain[1].includes("• compaction"),
+			`expected header to contain "• compaction", got ${JSON.stringify(plain[1])}`,
+		);
+
+		// Body line(s) start with `│ `
+		assert.ok(
+			plain[2].startsWith("│ "),
+			`expected body line to start with "│ ", got ${JSON.stringify(plain[2])}`,
+		);
+		assert.ok(
+			plain[2].includes("Compacted from 1,224,262 tokens"),
+			"body line should include the original content",
+		);
+	});
+
+	test("does not render a right-aligned timestamp when showTimestamp is false", () => {
+		const lines = renderChatFrame(["body"], 60, {
+			label: "compaction",
+			tone: "compaction",
+			timestamp: Date.now(),
+			timestampFormat: "date-time-iso",
+			showTimestamp: false,
+		});
+
+		const header = stripAnsi(lines[1]);
+		// No four-digit year should appear anywhere in the header row
+		assert.ok(
+			!/\b20\d{2}\b/.test(header),
+			`timestamp should be suppressed when showTimestamp=false, got ${JSON.stringify(header)}`,
+		);
+	});
+
+	test("emits ANSI color codes distinct from the assistant tone", () => {
+		const assistantFrame = renderChatFrame(["body"], 60, {
+			label: "claude",
+			tone: "assistant",
+			timestampFormat: "date-time-iso",
+			showTimestamp: false,
+		}).join("\n");
+
+		const compactionFrame = renderChatFrame(["body"], 60, {
+			label: "compaction",
+			tone: "compaction",
+			timestampFormat: "date-time-iso",
+			showTimestamp: false,
+		}).join("\n");
+
+		// Both frames carry ANSI; the compaction frame should not be identical
+		// to the assistant frame (different color mappings).
+		assert.ok(
+			assistantFrame !== compactionFrame,
+			"compaction tone must produce a different styled output than assistant tone",
+		);
+	});
+});

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

@@ -2,7 +2,7 @@ import { truncateToWidth, visibleWidth } from "@gsd/pi-tui";
 import { theme } from "../theme/theme.js";
 import { formatTimestamp, type TimestampFormat } from "./timestamp.js";
 
-type FrameTone = "assistant" | "user";
+type FrameTone = "assistant" | "user" | "compaction";
 
 function trimOuterBlankLines(lines: string[]): string[] {
 	let start = 0;
@@ -25,8 +25,14 @@ export function renderChatFrame(
 ): 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 borderColor =
+		opts.tone === "user"
+			? "borderAccent"
+			: opts.tone === "compaction"
+				? "customMessageLabel"
+				: "border";
+	const borderMuted =
+		opts.tone === "compaction" ? "customMessageLabel" : "borderMuted";
 	const border = (s: string) => theme.fg(borderColor, s);
 	const leftRaw = `• ${opts.label}`;
 	const rightRaw =
@@ -41,7 +47,9 @@ export function renderChatFrame(
 	const leftStyled =
 		opts.tone === "user"
 			? theme.fg("accent", theme.bold(left))
-			: theme.fg("muted", theme.bold(left));
+			: opts.tone === "compaction"
+				? theme.fg("customMessageLabel", theme.bold(left))
+				: theme.fg("muted", theme.bold(left));
 	const rightStyled = rightRaw ? theme.fg("dim", rightRaw) : "";
 	const gap =
 		rightRaw.length > 0

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

@@ -1,41 +1,46 @@
-import { Box, Markdown, type MarkdownTheme, Spacer, Text } from "@gsd/pi-tui";
+import { Container, Markdown, type MarkdownTheme, Text } from "@gsd/pi-tui";
 import type { CompactionSummaryMessage } from "../../../core/messages.js";
 import { getMarkdownTheme, theme } from "../theme/theme.js";
+import { renderChatFrame } from "./chat-frame.js";
 import { editorKey } from "./keybinding-hints.js";
 
 /**
- * Component that renders a compaction message with collapsed/expanded state.
- * Uses same background color as custom messages for visual consistency.
+ * Renders a compaction notice in the shared chat-frame style (top rule,
+ * `• compaction` header, `│ ` body margin) with purple border/label so it
+ * visually matches the other framed messages (user / assistant / tool
+ * execution) while standing apart from the conversation flow.
  */
-export class CompactionSummaryMessageComponent extends Box {
+export class CompactionSummaryMessageComponent extends Container {
 	private expanded = false;
 	private message: CompactionSummaryMessage;
 	private markdownTheme: MarkdownTheme;
 
-	constructor(message: CompactionSummaryMessage, markdownTheme: MarkdownTheme = getMarkdownTheme()) {
-		super(1, 1, (t) => theme.bg("customMessageBg", t));
+	constructor(
+		message: CompactionSummaryMessage,
+		markdownTheme: MarkdownTheme = getMarkdownTheme(),
+	) {
+		super();
 		this.message = message;
 		this.markdownTheme = markdownTheme;
-		this.updateDisplay();
+		this.rebuild();
 	}
 
 	setExpanded(expanded: boolean): void {
-		this.expanded = expanded;
-		this.updateDisplay();
+		if (this.expanded !== expanded) {
+			this.expanded = expanded;
+			this.rebuild();
+		}
 	}
 
 	override invalidate(): void {
 		super.invalidate();
-		this.updateDisplay();
+		this.rebuild();
 	}
 
-	private updateDisplay(): void {
+	private rebuild(): void {
 		this.clear();
 
 		const tokenStr = this.message.tokensBefore.toLocaleString();
-		const label = theme.fg("customMessageLabel", theme.bold("[compaction]"));
-		this.addChild(new Text(label, 0, 0));
-		this.addChild(new Spacer(1));
 
 		if (this.expanded) {
 			const header = `**Compacted from ${tokenStr} tokens**\n\n`;
@@ -47,7 +52,10 @@ export class CompactionSummaryMessageComponent extends Box {
 		} else {
 			this.addChild(
 				new Text(
-					theme.fg("customMessageText", `Compacted from ${tokenStr} tokens (`) +
+					theme.fg(
+						"customMessageText",
+						`Compacted from ${tokenStr} tokens (`,
+					) +
 						theme.fg("dim", editorKey("expandTools")) +
 						theme.fg("customMessageText", " to expand)"),
 					0,
@@ -56,4 +64,17 @@ export class CompactionSummaryMessageComponent extends Box {
 			);
 		}
 	}
+
+	override render(width: number): string[] {
+		const frameWidth = Math.max(20, width);
+		const contentWidth = Math.max(1, frameWidth - 4);
+		const lines = super.render(contentWidth);
+		const framed = renderChatFrame(lines, frameWidth, {
+			label: "compaction",
+			tone: "compaction",
+			timestampFormat: "date-time-iso",
+			showTimestamp: false,
+		});
+		return framed.length > 0 ? ["", ...framed] : framed;
+	}
 }

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

@@ -427,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.
 	 */

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

@@ -1827,6 +1827,8 @@ export class InteractiveMode {
 			this.showError(message);
 		} else if (type === "warning") {
 			this.showWarning(message);
+		} else if (type === "success") {
+			this.showSuccess(message);
 		} else {
 			this.showStatus(message, { append: true });
 		}
@@ -2339,6 +2341,12 @@ export class InteractiveMode {
 			}
 		}
 
+		// Any pendingTools entries left over after replay are historical tool
+		// calls whose results were squashed out of session context (commonly by
+		// compaction). Mark them finished so the frame stops showing "Running".
+		for (const component of this.pendingTools.values()) {
+			component.markHistoricalNoResult();
+		}
 		this.pendingTools.clear();
 		this.trimChatHistory();
 		this.ui.requestRender();
@@ -2737,6 +2745,17 @@ export class InteractiveMode {
 		this.ui.requestRender();
 	}
 
+	showSuccess(successMessage: string): void {
+		this.chatContainer.addChild(new Spacer(1));
+		this.chatContainer.addChild(new DynamicBorder((text) => theme.fg("success", text)));
+		this.chatContainer.addChild(
+			new Text(theme.fg("success", successMessage), 1, 0),
+		);
+		this.chatContainer.addChild(new DynamicBorder((text) => theme.fg("success", text)));
+		this.chatContainer.addChild(new Spacer(1));
+		this.ui.requestRender();
+	}
+
 	showTip(message: string): void {
 		this.chatContainer.addChild(new Spacer(1));
 		this.chatContainer.addChild(new Text(theme.fg("dim", `💡 ${message}`), 1, 0));