Update CHANGELOG with CustomMessageEntry and hook rendering API

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

@@ -0,0 +1,58 @@
+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 { CustomMessageEntry } from "../../../core/session-manager.js";
+import { getMarkdownTheme, theme } from "../theme/theme.js";
+
+/**
+ * Component that renders a custom message entry from hooks.
+ * Uses distinct styling to differentiate from user messages.
+ */
+export class CustomMessageComponent extends Container {
+	constructor(entry: CustomMessageEntry, customRenderer?: CustomMessageRenderer) {
+		super();
+
+		this.addChild(new Spacer(1));
+
+		// Create box with purple background
+		const box = new Box(1, 1, (t) => theme.bg("customMessageBg", t));
+
+		// Try custom renderer first
+		if (customRenderer) {
+			try {
+				const component = customRenderer(entry, { expanded: false }, theme);
+				if (component) {
+					box.addChild(component);
+					this.addChild(box);
+					return;
+				}
+			} catch {
+				// Fall through to default rendering
+			}
+		}
+
+		// 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));
+
+		// Extract text content
+		let text: string;
+		if (typeof entry.content === "string") {
+			text = entry.content;
+		} else {
+			text = entry.content
+				.filter((c): c is TextContent => c.type === "text")
+				.map((c) => c.text)
+				.join("\n");
+		}
+
+		box.addChild(
+			new Markdown(text, 0, 0, getMarkdownTheme(), {
+				color: (text: string) => theme.fg("customMessageText", text),
+			}),
+		);
+
+		this.addChild(box);
+	}
+}