diff --git a/packages/coding-agent/src/modes/interactive/components/hook-message.ts b/packages/coding-agent/src/modes/interactive/components/hook-message.ts
index ee5be2b6..186e902f 100644
--- a/packages/coding-agent/src/modes/interactive/components/hook-message.ts
+++ b/packages/coding-agent/src/modes/interactive/components/hook-message.ts
@@ -1,4 +1,5 @@
 import type { TextContent } from "@mariozechner/pi-ai";
+import type { Component } from "@mariozechner/pi-tui";
 import { Box, Container, Markdown, Spacer, Text } from "@mariozechner/pi-tui";
 import type { HookMessageRenderer } from "../../../core/hooks/types.js";
 import type { HookMessage } from "../../../core/messages.js";
@@ -12,6 +13,7 @@ export class HookMessageComponent extends Container {
 	private message: HookMessage<unknown>;
 	private customRenderer?: HookMessageRenderer;
 	private box: Box;
+	private customComponent?: Component;
 	private _expanded = false;
 
 	constructor(message: HookMessage<unknown>, customRenderer?: HookMessageRenderer) {
@@ -21,9 +23,8 @@ export class HookMessageComponent extends Container {
 
 		this.addChild(new Spacer(1));
 
-		// Create box with purple background
+		// Create box with purple background (used for default rendering)
 		this.box = new Box(1, 1, (t) => theme.bg("customMessageBg", t));
-		this.addChild(this.box);
 
 		this.rebuild();
 	}
@@ -36,14 +37,21 @@ export class HookMessageComponent extends Container {
 	}
 
 	private rebuild(): void {
-		this.box.clear();
+		// Remove previous content component
+		if (this.customComponent) {
+			this.removeChild(this.customComponent);
+			this.customComponent = undefined;
+		}
+		this.removeChild(this.box);
 
-		// Try custom renderer first
+		// Try custom renderer first - it handles its own styling
 		if (this.customRenderer) {
 			try {
 				const component = this.customRenderer(this.message, { expanded: this._expanded }, theme);
 				if (component) {
-					this.box.addChild(component);
+					// Custom renderer provides its own styled component
+					this.customComponent = component;
+					this.addChild(component);
 					return;
 				}
 			} catch {
@@ -51,6 +59,10 @@ export class HookMessageComponent extends Container {
 			}
 		}
 
+		// Default rendering uses our box
+		this.addChild(this.box);
+		this.box.clear();
+
 		// Default rendering: label + content
 		const label = theme.fg("customMessageLabel", `\x1b[1m[${this.message.customType}]\x1b[22m`);
 		this.box.addChild(new Text(label, 0, 0));