Add CustomMessageEntry rendering infrastructure

- Add renderCustomMessage to HookAPI for registering custom renderers
- Add CustomMessageRenderer type and CustomMessageRenderOptions
- Store customMessageRenderers in LoadedHook
- Add getCustomMessageRenderer(customType) to HookRunner
- SessionContext.entries now aligned with messages (same length, corresponding indices)

TUI can now correlate messages with their source entries to identify
custom_message entries and use hook-provided renderers.

packages/coding-agent/src/core/hooks/index.ts

@@ -5,6 +5,8 @@ export type {
 	AgentEndEvent,
 	AgentStartEvent,
 	BashToolResultEvent,
+	CustomMessageRenderer,
+	CustomMessageRenderOptions,
 	CustomToolResultEvent,
 	EditToolResultEvent,
 	ExecResult,

packages/coding-agent/src/core/hooks/loader.ts

@@ -10,7 +10,7 @@ import { fileURLToPath } from "node:url";
 import type { Attachment } from "@mariozechner/pi-agent-core";
 import { createJiti } from "jiti";
 import { getAgentDir } from "../../config.js";
-import type { HookAPI, HookFactory } from "./types.js";
+import type { CustomMessageRenderer, HookAPI, HookFactory } from "./types.js";
 
 // Create require function to resolve module paths at runtime
 const require = createRequire(import.meta.url);
@@ -61,6 +61,8 @@ export interface LoadedHook {
 	resolvedPath: string;
 	/** Map of event type to handler functions */
 	handlers: Map<string, HandlerFn[]>;
+	/** Map of customType to custom message renderer */
+	customMessageRenderers: Map<string, CustomMessageRenderer>;
 	/** Set the send handler for this hook's pi.send() */
 	setSendHandler: (handler: SendHandler) => void;
 }
@@ -110,16 +112,18 @@ function resolveHookPath(hookPath: string, cwd: string): string {
 }
 
 /**
- * Create a HookAPI instance that collects handlers.
- * Returns the API and a function to set the send handler later.
+ * Create a HookAPI instance that collects handlers and renderers.
+ * Returns the API, renderers map, and a function to set the send handler later.
  */
 function createHookAPI(handlers: Map<string, HandlerFn[]>): {
 	api: HookAPI;
+	customMessageRenderers: Map<string, CustomMessageRenderer>;
 	setSendHandler: (handler: SendHandler) => void;
 } {
 	let sendHandler: SendHandler = () => {
 		// Default no-op until mode sets the handler
 	};
+	const customMessageRenderers = new Map<string, CustomMessageRenderer>();
 
 	const api: HookAPI = {
 		on(event: string, handler: HandlerFn): void {
@@ -130,10 +134,14 @@ function createHookAPI(handlers: Map<string, HandlerFn[]>): {
 		send(text: string, attachments?: Attachment[]): void {
 			sendHandler(text, attachments);
 		},
+		renderCustomMessage(customType: string, renderer: CustomMessageRenderer): void {
+			customMessageRenderers.set(customType, renderer);
+		},
 	} as HookAPI;
 
 	return {
 		api,
+		customMessageRenderers,
 		setSendHandler: (handler: SendHandler) => {
 			sendHandler = handler;
 		},
@@ -164,13 +172,13 @@ async function loadHook(hookPath: string, cwd: string): Promise<{ hook: LoadedHo
 
 		// Create handlers map and API
 		const handlers = new Map<string, HandlerFn[]>();
-		const { api, setSendHandler } = createHookAPI(handlers);
+		const { api, customMessageRenderers, setSendHandler } = createHookAPI(handlers);
 
 		// Call factory to register handlers
 		factory(api);
 
 		return {
-			hook: { path: hookPath, resolvedPath, handlers, setSendHandler },
+			hook: { path: hookPath, resolvedPath, handlers, customMessageRenderers, setSendHandler },
 			error: null,
 		};
 	} catch (err) {

packages/coding-agent/src/core/hooks/runner.ts

@@ -5,6 +5,7 @@
 import { spawn } from "node:child_process";
 import type { LoadedHook, SendHandler } from "./loader.js";
 import type {
+	CustomMessageRenderer,
 	ExecOptions,
 	ExecResult,
 	HookError,
@@ -203,6 +204,20 @@ export class HookRunner {
 		return false;
 	}
 
+	/**
+	 * Get a custom message renderer for the given customType.
+	 * Returns the first renderer found across all hooks, or undefined if none.
+	 */
+	getCustomMessageRenderer(customType: string): CustomMessageRenderer | undefined {
+		for (const hook of this.hooks) {
+			const renderer = hook.customMessageRenderers.get(customType);
+			if (renderer) {
+				return renderer;
+			}
+		}
+		return undefined;
+	}
+
 	/**
 	 * Create the event context for handlers.
 	 */

packages/coding-agent/src/core/hooks/types.ts

@@ -7,9 +7,11 @@
 
 import type { AppMessage, Attachment } from "@mariozechner/pi-agent-core";
 import type { ImageContent, Model, TextContent, ToolResultMessage } from "@mariozechner/pi-ai";
+import type { Component } from "@mariozechner/pi-tui";
+import type { Theme } from "../../modes/interactive/theme/theme.js";
 import type { CompactionPreparation, CompactionResult } from "../compaction.js";
 import type { ModelRegistry } from "../model-registry.js";
-import type { CompactionEntry, SessionManager } from "../session-manager.js";
+import type { CompactionEntry, CustomMessageEntry, SessionManager } from "../session-manager.js";
 import type {
 	BashToolDetails,
 	FindToolDetails,
@@ -368,6 +370,24 @@ export interface SessionEventResult {
  */
 export type HookHandler<E, R = void> = (event: E, ctx: HookEventContext) => Promise<R>;
 
+/**
+ * Options passed to custom message renderers.
+ */
+export interface CustomMessageRenderOptions {
+	/** Whether the view is expanded */
+	expanded: boolean;
+}
+
+/**
+ * Renderer for custom message entries.
+ * Hooks register these to provide custom TUI rendering for their CustomMessageEntry types.
+ */
+export type CustomMessageRenderer<T = unknown> = (
+	entry: CustomMessageEntry<T>,
+	options: CustomMessageRenderOptions,
+	theme: Theme,
+) => Component | null;
+
 /**
  * HookAPI passed to hook factory functions.
  * Hooks use pi.on() to subscribe to events and pi.send() to inject messages.
@@ -388,6 +408,13 @@ export interface HookAPI {
 	 * If the agent is idle, a new agent loop is started.
 	 */
 	send(text: string, attachments?: Attachment[]): void;
+
+	/**
+	 * Register a custom renderer for CustomMessageEntry with a specific customType.
+	 * The renderer is called when rendering the entry in the TUI.
+	 * Return null to use the default renderer.
+	 */
+	renderCustomMessage<T = unknown>(customType: string, renderer: CustomMessageRenderer<T>): void;
 }
 
 /**