gsd-pi 2.74.0-dev.ffbcc03 → 2.75.0-dev.063e5a3

package/packages/pi-coding-agent/dist/modes/interactive/components/compaction-summary-message.js

@@ -1,32 +1,34 @@
-import { Box, Markdown, Spacer, Text } from "@gsd/pi-tui";
+import { Container, Markdown, Text } from "@gsd/pi-tui";
 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 {
     constructor(message, markdownTheme = getMarkdownTheme()) {
-        super(1, 1, (t) => theme.bg("customMessageBg", t));
+        super();
         this.expanded = false;
         this.message = message;
         this.markdownTheme = markdownTheme;
-        this.updateDisplay();
+        this.rebuild();
     }
     setExpanded(expanded) {
-        this.expanded = expanded;
-        this.updateDisplay();
+        if (this.expanded !== expanded) {
+            this.expanded = expanded;
+            this.rebuild();
+        }
     }
     invalidate() {
         super.invalidate();
-        this.updateDisplay();
+        this.rebuild();
     }
-    updateDisplay() {
+    rebuild() {
         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`;
             this.addChild(new Markdown(header + this.message.summary, 0, 0, this.markdownTheme, {
@@ -39,5 +41,17 @@ export class CompactionSummaryMessageComponent extends Box {
                 theme.fg("customMessageText", " to expand)"), 0, 0));
         }
     }
+    render(width) {
+        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;
+    }
 }
 //# sourceMappingURL=compaction-summary-message.js.map

package/packages/pi-coding-agent/dist/modes/interactive/components/compaction-summary-message.js.map

@@ -1 +1 @@
-{"version":3,"file":"compaction-summary-message.js","sourceRoot":"","sources":["../../../../src/modes/interactive/components/compaction-summary-message.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAsB,MAAM,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAE9E,OAAO,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD;;;GAGG;AACH,MAAM,OAAO,iCAAkC,SAAQ,GAAG;IAKzD,YAAY,OAAiC,EAAE,gBAA+B,gBAAgB,EAAE;QAC/F,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,CAAC;QAL5C,aAAQ,GAAG,KAAK,CAAC;QAMxB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;QACnC,IAAI,CAAC,aAAa,EAAE,CAAC;IACtB,CAAC;IAED,WAAW,CAAC,QAAiB;QAC5B,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,IAAI,CAAC,aAAa,EAAE,CAAC;IACtB,CAAC;IAEQ,UAAU;QAClB,KAAK,CAAC,UAAU,EAAE,CAAC;QACnB,IAAI,CAAC,aAAa,EAAE,CAAC;IACtB,CAAC;IAEO,aAAa;QACpB,IAAI,CAAC,KAAK,EAAE,CAAC;QAEb,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,cAAc,EAAE,CAAC;QAC5D,MAAM,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,oBAAoB,EAAE,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;QACzE,IAAI,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QACrC,IAAI,CAAC,QAAQ,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAE7B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,MAAM,MAAM,GAAG,oBAAoB,QAAQ,eAAe,CAAC;YAC3D,IAAI,CAAC,QAAQ,CACZ,IAAI,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE;gBACrE,KAAK,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,mBAAmB,EAAE,IAAI,CAAC;aAC5D,CAAC,CACF,CAAC;QACH,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,QAAQ,CACZ,IAAI,IAAI,CACP,KAAK,CAAC,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,QAAQ,WAAW,CAAC;gBACnE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;gBACzC,KAAK,CAAC,EAAE,CAAC,mBAAmB,EAAE,aAAa,CAAC,EAC7C,CAAC,EACD,CAAC,CACD,CACD,CAAC;QACH,CAAC;IACF,CAAC;CACD","sourcesContent":["import { Box, Markdown, type MarkdownTheme, Spacer, Text } from \"@gsd/pi-tui\";\nimport type { CompactionSummaryMessage } from \"../../../core/messages.js\";\nimport { getMarkdownTheme, theme } from \"../theme/theme.js\";\nimport { editorKey } from \"./keybinding-hints.js\";\n\n/**\n * Component that renders a compaction message with collapsed/expanded state.\n * Uses same background color as custom messages for visual consistency.\n */\nexport class CompactionSummaryMessageComponent extends Box {\n\tprivate expanded = false;\n\tprivate message: CompactionSummaryMessage;\n\tprivate markdownTheme: MarkdownTheme;\n\n\tconstructor(message: CompactionSummaryMessage, markdownTheme: MarkdownTheme = getMarkdownTheme()) {\n\t\tsuper(1, 1, (t) => theme.bg(\"customMessageBg\", t));\n\t\tthis.message = message;\n\t\tthis.markdownTheme = markdownTheme;\n\t\tthis.updateDisplay();\n\t}\n\n\tsetExpanded(expanded: boolean): void {\n\t\tthis.expanded = expanded;\n\t\tthis.updateDisplay();\n\t}\n\n\toverride invalidate(): void {\n\t\tsuper.invalidate();\n\t\tthis.updateDisplay();\n\t}\n\n\tprivate updateDisplay(): void {\n\t\tthis.clear();\n\n\t\tconst tokenStr = this.message.tokensBefore.toLocaleString();\n\t\tconst label = theme.fg(\"customMessageLabel\", theme.bold(\"[compaction]\"));\n\t\tthis.addChild(new Text(label, 0, 0));\n\t\tthis.addChild(new Spacer(1));\n\n\t\tif (this.expanded) {\n\t\t\tconst header = `**Compacted from ${tokenStr} tokens**\\n\\n`;\n\t\t\tthis.addChild(\n\t\t\t\tnew Markdown(header + this.message.summary, 0, 0, this.markdownTheme, {\n\t\t\t\t\tcolor: (text: string) => theme.fg(\"customMessageText\", text),\n\t\t\t\t}),\n\t\t\t);\n\t\t} else {\n\t\t\tthis.addChild(\n\t\t\t\tnew Text(\n\t\t\t\t\ttheme.fg(\"customMessageText\", `Compacted from ${tokenStr} tokens (`) +\n\t\t\t\t\t\ttheme.fg(\"dim\", editorKey(\"expandTools\")) +\n\t\t\t\t\t\ttheme.fg(\"customMessageText\", \" to expand)\"),\n\t\t\t\t\t0,\n\t\t\t\t\t0,\n\t\t\t\t),\n\t\t\t);\n\t\t}\n\t}\n}\n"]}
+{"version":3,"file":"compaction-summary-message.js","sourceRoot":"","sources":["../../../../src/modes/interactive/components/compaction-summary-message.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAsB,IAAI,EAAE,MAAM,aAAa,CAAC;AAE5E,OAAO,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD;;;;;GAKG;AACH,MAAM,OAAO,iCAAkC,SAAQ,SAAS;IAK/D,YACC,OAAiC,EACjC,gBAA+B,gBAAgB,EAAE;QAEjD,KAAK,EAAE,CAAC;QARD,aAAQ,GAAG,KAAK,CAAC;QASxB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;QACnC,IAAI,CAAC,OAAO,EAAE,CAAC;IAChB,CAAC;IAED,WAAW,CAAC,QAAiB;QAC5B,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAChC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;YACzB,IAAI,CAAC,OAAO,EAAE,CAAC;QAChB,CAAC;IACF,CAAC;IAEQ,UAAU;QAClB,KAAK,CAAC,UAAU,EAAE,CAAC;QACnB,IAAI,CAAC,OAAO,EAAE,CAAC;IAChB,CAAC;IAEO,OAAO;QACd,IAAI,CAAC,KAAK,EAAE,CAAC;QAEb,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,cAAc,EAAE,CAAC;QAE5D,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,MAAM,MAAM,GAAG,oBAAoB,QAAQ,eAAe,CAAC;YAC3D,IAAI,CAAC,QAAQ,CACZ,IAAI,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE;gBACrE,KAAK,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,mBAAmB,EAAE,IAAI,CAAC;aAC5D,CAAC,CACF,CAAC;QACH,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,QAAQ,CACZ,IAAI,IAAI,CACP,KAAK,CAAC,EAAE,CACP,mBAAmB,EACnB,kBAAkB,QAAQ,WAAW,CACrC;gBACA,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;gBACzC,KAAK,CAAC,EAAE,CAAC,mBAAmB,EAAE,aAAa,CAAC,EAC7C,CAAC,EACD,CAAC,CACD,CACD,CAAC;QACH,CAAC;IACF,CAAC;IAEQ,MAAM,CAAC,KAAa;QAC5B,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;QACvC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,CAAC;QACjD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;QACzC,MAAM,MAAM,GAAG,eAAe,CAAC,KAAK,EAAE,UAAU,EAAE;YACjD,KAAK,EAAE,YAAY;YACnB,IAAI,EAAE,YAAY;YAClB,eAAe,EAAE,eAAe;YAChC,aAAa,EAAE,KAAK;SACpB,CAAC,CAAC;QACH,OAAO,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IACrD,CAAC;CACD","sourcesContent":["import { Container, Markdown, type MarkdownTheme, Text } from \"@gsd/pi-tui\";\nimport type { CompactionSummaryMessage } from \"../../../core/messages.js\";\nimport { getMarkdownTheme, theme } from \"../theme/theme.js\";\nimport { renderChatFrame } from \"./chat-frame.js\";\nimport { editorKey } from \"./keybinding-hints.js\";\n\n/**\n * Renders a compaction notice in the shared chat-frame style (top rule,\n * `• compaction` header, `│ ` body margin) with purple border/label so it\n * visually matches the other framed messages (user / assistant / tool\n * execution) while standing apart from the conversation flow.\n */\nexport class CompactionSummaryMessageComponent extends Container {\n\tprivate expanded = false;\n\tprivate message: CompactionSummaryMessage;\n\tprivate markdownTheme: MarkdownTheme;\n\n\tconstructor(\n\t\tmessage: CompactionSummaryMessage,\n\t\tmarkdownTheme: MarkdownTheme = getMarkdownTheme(),\n\t) {\n\t\tsuper();\n\t\tthis.message = message;\n\t\tthis.markdownTheme = markdownTheme;\n\t\tthis.rebuild();\n\t}\n\n\tsetExpanded(expanded: boolean): void {\n\t\tif (this.expanded !== expanded) {\n\t\t\tthis.expanded = expanded;\n\t\t\tthis.rebuild();\n\t\t}\n\t}\n\n\toverride invalidate(): void {\n\t\tsuper.invalidate();\n\t\tthis.rebuild();\n\t}\n\n\tprivate rebuild(): void {\n\t\tthis.clear();\n\n\t\tconst tokenStr = this.message.tokensBefore.toLocaleString();\n\n\t\tif (this.expanded) {\n\t\t\tconst header = `**Compacted from ${tokenStr} tokens**\\n\\n`;\n\t\t\tthis.addChild(\n\t\t\t\tnew Markdown(header + this.message.summary, 0, 0, this.markdownTheme, {\n\t\t\t\t\tcolor: (text: string) => theme.fg(\"customMessageText\", text),\n\t\t\t\t}),\n\t\t\t);\n\t\t} else {\n\t\t\tthis.addChild(\n\t\t\t\tnew Text(\n\t\t\t\t\ttheme.fg(\n\t\t\t\t\t\t\"customMessageText\",\n\t\t\t\t\t\t`Compacted from ${tokenStr} tokens (`,\n\t\t\t\t\t) +\n\t\t\t\t\t\ttheme.fg(\"dim\", editorKey(\"expandTools\")) +\n\t\t\t\t\t\ttheme.fg(\"customMessageText\", \" to expand)\"),\n\t\t\t\t\t0,\n\t\t\t\t\t0,\n\t\t\t\t),\n\t\t\t);\n\t\t}\n\t}\n\n\toverride render(width: number): string[] {\n\t\tconst frameWidth = Math.max(20, width);\n\t\tconst contentWidth = Math.max(1, frameWidth - 4);\n\t\tconst lines = super.render(contentWidth);\n\t\tconst framed = renderChatFrame(lines, frameWidth, {\n\t\t\tlabel: \"compaction\",\n\t\t\ttone: \"compaction\",\n\t\t\ttimestampFormat: \"date-time-iso\",\n\t\t\tshowTimestamp: false,\n\t\t});\n\t\treturn framed.length > 0 ? [\"\", ...framed] : framed;\n\t}\n}\n"]}

package/packages/pi-coding-agent/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gsd/pi-coding-agent",
-  "version": "2.74.0",
+  "version": "2.75.0",
   "description": "Coding agent CLI (vendored from pi-mono)",
   "type": "module",
   "piConfig": {

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