Refactor: shared exec utility, rename CustomMessageRenderer to HookMessageRenderer

- Extract execCommand to src/core/exec.ts, shared by hooks and custom-tools
- Rename CustomMessageRenderer -> HookMessageRenderer
- Rename registerCustomMessageRenderer -> registerMessageRenderer
- Renderer now receives HookMessage instead of CustomMessageEntry
- CustomMessageComponent now has setExpanded() and responds to Ctrl+E toggle
- Re-export ExecOptions/ExecResult from exec.ts for backward compatibility

packages/coding-agent/src/modes/interactive/components/custom-message.ts

@@ -1,6 +1,6 @@
 import type { TextContent } from "@mariozechner/pi-ai";
 import { Box, Container, Markdown, Spacer, Text } from "@mariozechner/pi-tui";
-import type { CustomMessageRenderer } from "../../../core/hooks/types.js";
+import type { HookMessage, HookMessageRenderer } from "../../../core/hooks/types.js";
 import type { CustomMessageEntry } from "../../../core/session-manager.js";
 import { getMarkdownTheme, theme } from "../theme/theme.js";
 
@@ -9,21 +9,49 @@ import { getMarkdownTheme, theme } from "../theme/theme.js";
  * Uses distinct styling to differentiate from user messages.
  */
 export class CustomMessageComponent extends Container {
-	constructor(entry: CustomMessageEntry, customRenderer?: CustomMessageRenderer) {
+	private entry: CustomMessageEntry;
+	private customRenderer?: HookMessageRenderer;
+	private box: Box;
+	private _expanded = false;
+
+	constructor(entry: CustomMessageEntry, customRenderer?: HookMessageRenderer) {
 		super();
+		this.entry = entry;
+		this.customRenderer = customRenderer;
 
 		this.addChild(new Spacer(1));
 
 		// Create box with purple background
-		const box = new Box(1, 1, (t) => theme.bg("customMessageBg", t));
+		this.box = new Box(1, 1, (t) => theme.bg("customMessageBg", t));
+		this.addChild(this.box);
+
+		this.rebuild();
+	}
+
+	setExpanded(expanded: boolean): void {
+		if (this._expanded !== expanded) {
+			this._expanded = expanded;
+			this.rebuild();
+		}
+	}
+
+	private rebuild(): void {
+		this.box.clear();
+
+		// Convert entry to HookMessage for renderer
+		const message: HookMessage = {
+			customType: this.entry.customType,
+			content: this.entry.content,
+			display: this.entry.display,
+			details: this.entry.details,
+		};
 
 		// Try custom renderer first
-		if (customRenderer) {
+		if (this.customRenderer) {
 			try {
-				const component = customRenderer(entry, { expanded: false }, theme);
+				const component = this.customRenderer(message, { expanded: this._expanded }, theme);
 				if (component) {
-					box.addChild(component);
-					this.addChild(box);
+					this.box.addChild(component);
 					return;
 				}
 			} catch {
@@ -32,27 +60,25 @@ export class CustomMessageComponent extends Container {
 		}
 
 		// Default rendering: label + content
-		const label = theme.fg("customMessageLabel", `\x1b[1m[${entry.customType}]\x1b[22m`);
-		box.addChild(new Text(label, 0, 0));
-		box.addChild(new Spacer(1));
+		const label = theme.fg("customMessageLabel", `\x1b[1m[${this.entry.customType}]\x1b[22m`);
+		this.box.addChild(new Text(label, 0, 0));
+		this.box.addChild(new Spacer(1));
 
 		// Extract text content
 		let text: string;
-		if (typeof entry.content === "string") {
-			text = entry.content;
+		if (typeof this.entry.content === "string") {
+			text = this.entry.content;
 		} else {
-			text = entry.content
+			text = this.entry.content
 				.filter((c): c is TextContent => c.type === "text")
 				.map((c) => c.text)
 				.join("\n");
 		}
 
-		box.addChild(
+		this.box.addChild(
 			new Markdown(text, 0, 0, getMarkdownTheme(), {
 				color: (text: string) => theme.fg("customMessageText", text),
 			}),
 		);
-
-		this.addChild(box);
 	}
 }

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

@@ -1028,7 +1028,7 @@ export class InteractiveMode {
 					parentId: null,
 					timestamp: new Date().toISOString(),
 				};
-				const renderer = this.session.hookRunner?.getCustomMessageRenderer(message.customType);
+				const renderer = this.session.hookRunner?.getMessageRenderer(message.customType);
 				this.chatContainer.addChild(new CustomMessageComponent(entry, renderer));
 			}
 		} else if (message.role === "user") {
@@ -1077,7 +1077,7 @@ export class InteractiveMode {
 			// Check if this is a custom_message entry
 			if (entry?.type === "custom_message") {
 				if (entry.display) {
-					const renderer = this.session.hookRunner?.getCustomMessageRenderer(entry.customType);
+					const renderer = this.session.hookRunner?.getMessageRenderer(entry.customType);
 					this.chatContainer.addChild(new CustomMessageComponent(entry, renderer));
 				}
 				continue;
@@ -1271,6 +1271,8 @@ export class InteractiveMode {
 				child.setExpanded(this.toolOutputExpanded);
 			} else if (child instanceof BashExecutionComponent) {
 				child.setExpanded(this.toolOutputExpanded);
+			} else if (child instanceof CustomMessageComponent) {
+				child.setExpanded(this.toolOutputExpanded);
 			}
 		}
 		this.ui.requestRender();