Add TUI rendering for CustomMessageEntry

- Add CustomMessageComponent with purple-tinted styling
- Add theme colors: customMessageBg, customMessageText, customMessageLabel
- Rename renderMessages to renderSessionContext taking SessionContext directly
- renderInitialMessages now gets context from sessionManager
- Skip rendering for display: false entries

packages/coding-agent/src/modes/interactive/theme/dark.json

@@ -14,7 +14,8 @@
 		"userMsgBg": "#343541",
 		"toolPendingBg": "#282832",
 		"toolSuccessBg": "#283228",
-		"toolErrorBg": "#3c2828"
+		"toolErrorBg": "#3c2828",
+		"customMsgBg": "#2d2838"
 	},
 	"colors": {
 		"accent": "accent",
@@ -30,6 +31,9 @@
 
 		"userMessageBg": "userMsgBg",
 		"userMessageText": "",
+		"customMessageBg": "customMsgBg",
+		"customMessageText": "",
+		"customMessageLabel": "#9575cd",
 		"toolPendingBg": "toolPendingBg",
 		"toolSuccessBg": "toolSuccessBg",
 		"toolErrorBg": "toolErrorBg",

packages/coding-agent/src/modes/interactive/theme/light.json

@@ -13,7 +13,8 @@
 		"userMsgBg": "#e8e8e8",
 		"toolPendingBg": "#e8e8f0",
 		"toolSuccessBg": "#e8f0e8",
-		"toolErrorBg": "#f0e8e8"
+		"toolErrorBg": "#f0e8e8",
+		"customMsgBg": "#ede7f6"
 	},
 	"colors": {
 		"accent": "teal",
@@ -29,6 +30,9 @@
 
 		"userMessageBg": "userMsgBg",
 		"userMessageText": "",
+		"customMessageBg": "customMsgBg",
+		"customMessageText": "",
+		"customMessageLabel": "#7e57c2",
 		"toolPendingBg": "toolPendingBg",
 		"toolSuccessBg": "toolSuccessBg",
 		"toolErrorBg": "toolErrorBg",

packages/coding-agent/src/modes/interactive/theme/theme-schema.json

@@ -47,6 +47,9 @@
 				"text",
 				"userMessageBg",
 				"userMessageText",
+				"customMessageBg",
+				"customMessageText",
+				"customMessageLabel",
 				"toolPendingBg",
 				"toolSuccessBg",
 				"toolErrorBg",
@@ -122,6 +125,18 @@
 					"$ref": "#/$defs/colorValue",
 					"description": "User message text color"
 				},
+				"customMessageBg": {
+					"$ref": "#/$defs/colorValue",
+					"description": "Custom message background (hook-injected messages)"
+				},
+				"customMessageText": {
+					"$ref": "#/$defs/colorValue",
+					"description": "Custom message text color"
+				},
+				"customMessageLabel": {
+					"$ref": "#/$defs/colorValue",
+					"description": "Custom message type label color"
+				},
 				"toolPendingBg": {
 					"$ref": "#/$defs/colorValue",
 					"description": "Tool execution box (pending state)"

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

@@ -34,9 +34,12 @@ const ThemeJsonSchema = Type.Object({
 		muted: ColorValueSchema,
 		dim: ColorValueSchema,
 		text: ColorValueSchema,
-		// Backgrounds & Content Text (7 colors)
+		// Backgrounds & Content Text (10 colors)
 		userMessageBg: ColorValueSchema,
 		userMessageText: ColorValueSchema,
+		customMessageBg: ColorValueSchema,
+		customMessageText: ColorValueSchema,
+		customMessageLabel: ColorValueSchema,
 		toolPendingBg: ColorValueSchema,
 		toolSuccessBg: ColorValueSchema,
 		toolErrorBg: ColorValueSchema,
@@ -95,6 +98,8 @@ export type ThemeColor =
 	| "dim"
 	| "text"
 	| "userMessageText"
+	| "customMessageText"
+	| "customMessageLabel"
 	| "toolTitle"
 	| "toolOutput"
 	| "mdHeading"
@@ -127,7 +132,7 @@ export type ThemeColor =
 	| "thinkingXhigh"
 	| "bashMode";
 
-export type ThemeBg = "userMessageBg" | "toolPendingBg" | "toolSuccessBg" | "toolErrorBg";
+export type ThemeBg = "userMessageBg" | "customMessageBg" | "toolPendingBg" | "toolSuccessBg" | "toolErrorBg";
 
 type ColorMode = "truecolor" | "256color";
 
@@ -482,7 +487,13 @@ function createTheme(themeJson: ThemeJson, mode?: ColorMode): Theme {
 	const resolvedColors = resolveThemeColors(themeJson.colors, themeJson.vars);
 	const fgColors: Record<ThemeColor, string | number> = {} as Record<ThemeColor, string | number>;
 	const bgColors: Record<ThemeBg, string | number> = {} as Record<ThemeBg, string | number>;
-	const bgColorKeys: Set<string> = new Set(["userMessageBg", "toolPendingBg", "toolSuccessBg", "toolErrorBg"]);
+	const bgColorKeys: Set<string> = new Set([
+		"userMessageBg",
+		"customMessageBg",
+		"toolPendingBg",
+		"toolSuccessBg",
+		"toolErrorBg",
+	]);
 	for (const [key, value] of Object.entries(resolvedColors)) {
 		if (bgColorKeys.has(key)) {
 			bgColors[key as ThemeBg] = value;