Improve compaction UI styling

- Simplified collapsed state: warning-colored text instead of styled banner
- Shows token count inline: 'Earlier messages compacted from X tokens'
- Removed redundant success message after compaction
- Cleaner vertical spacing using paddingY instead of explicit Spacers

Fixes #108

packages/coding-agent/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Changed
+
+- **Compaction UI**: Simplified collapsed compaction indicator to show warning-colored text with token count instead of styled banner. Removed redundant success message after compaction. ([#108](https://github.com/badlogic/pi-mono/issues/108))
+
 ### Added
 
 - **`--append-system-prompt` Flag**: Append additional text or file contents to the system prompt. Supports both inline text and file paths. Complements `--system-prompt` for layering custom instructions without replacing the base system prompt. ([#114](https://github.com/badlogic/pi-mono/pull/114) by [@markusylisiurunen](https://github.com/markusylisiurunen))

packages/coding-agent/src/tui/compaction.ts

@@ -25,10 +25,10 @@ export class CompactionComponent extends Container {
 
 	private updateDisplay(): void {
 		this.clear();
-		this.addChild(new Spacer(1));
 
 		if (this.expanded) {
 			// Show header + summary as markdown (like user message)
+			this.addChild(new Spacer(1));
 			const header = `**Context compacted from ${this.tokensBefore.toLocaleString()} tokens**\n\n`;
 			this.addChild(
 				new Markdown(header + this.summary, 1, 1, getMarkdownTheme(), {
@@ -36,17 +36,17 @@ export class CompactionComponent extends Container {
 					color: (text: string) => theme.fg("userMessageText", text),
 				}),
 			);
+			this.addChild(new Spacer(1));
 		} else {
-			// Collapsed: just show the header line with user message styling
+			// Collapsed: simple text in warning color with token count
+			const tokenStr = this.tokensBefore.toLocaleString();
 			this.addChild(
 				new Text(
-					theme.fg("userMessageText", `--- Earlier messages compacted (CTRL+O to expand) ---`),
+					theme.fg("warning", `Earlier messages compacted from ${tokenStr} tokens (ctrl+o to expand)`),
 					1,
 					1,
-					(text: string) => theme.bg("userMessageBg", text),
 				),
 			);
 		}
-		this.addChild(new Spacer(1));
 	}
 }

packages/coding-agent/src/tui/tui-renderer.ts

@@ -1175,15 +1175,6 @@ export class TuiRenderer {
 		this.ui.requestRender();
 	}
 
-	private showSuccess(message: string, detail?: string): void {
-		this.chatContainer.addChild(new Spacer(1));
-		const text = detail
-			? `${theme.fg("success", message)}\n${theme.fg("muted", detail)}`
-			: theme.fg("success", message);
-		this.chatContainer.addChild(new Text(text, 1, 1));
-		this.ui.requestRender();
-	}
-
 	private showThinkingSelector(): void {
 		// Create thinking selector with current level
 		this.thinkingSelector = new ThinkingSelectorComponent(
@@ -1914,10 +1905,6 @@ export class TuiRenderer {
 
 			// Update footer with new state (fixes context % display)
 			this.footer.updateState(this.agent.state);
-
-			// Show success message
-			const successTitle = isAuto ? "✓ Context auto-compacted" : "✓ Context compacted";
-			this.showSuccess(successTitle, `Reduced from ${compactionEntry.tokensBefore.toLocaleString()} tokens`);
 		} catch (error) {
 			const message = error instanceof Error ? error.message : String(error);
 			if (message === "Compaction cancelled" || (error instanceof Error && error.name === "AbortError")) {