Add ctx.ui.theme getter for styling status text with theme colors

- Add theme property to HookUIContext interface
- Implement in interactive, RPC, and no-op contexts
- Add status-line.ts example hook
- Document styling with theme colors in hooks.md

packages/coding-agent/src/core/custom-tools/loader.ts

@@ -14,6 +14,7 @@ import * as path from "node:path";
 import { fileURLToPath } from "node:url";
 import { createJiti } from "jiti";
 import { getAgentDir, isBunBinary } from "../../config.js";
+import { theme } from "../../modes/interactive/theme/theme.js";
 import type { ExecOptions } from "../exec.js";
 import { execCommand } from "../exec.js";
 import type { HookUIContext } from "../hooks/types.js";
@@ -94,6 +95,9 @@ function createNoOpUIContext(): HookUIContext {
 		custom: async () => undefined as never,
 		setEditorText: () => {},
 		getEditorText: () => "",
+		get theme() {
+			return theme;
+		},
 	};
 }
 

packages/coding-agent/src/core/export-html/template.js

@@ -1074,7 +1074,12 @@
                 highlighted = escapeHtml(code);
               }
             } else {
-              highlighted = escapeHtml(code);
+              // Auto-detect language if not specified
+              try {
+                highlighted = hljs.highlightAuto(code).value;
+              } catch {
+                highlighted = escapeHtml(code);
+              }
             }
             return `<pre><code class="hljs">${highlighted}</code></pre>`;
           }

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

@@ -4,6 +4,7 @@
 
 import type { AgentMessage } from "@mariozechner/pi-agent-core";
 import type { Model } from "@mariozechner/pi-ai";
+import { theme } from "../../modes/interactive/theme/theme.js";
 import type { ModelRegistry } from "../model-registry.js";
 import type { SessionManager } from "../session-manager.js";
 import type { AppendEntryHandler, LoadedHook, SendMessageHandler } from "./loader.js";
@@ -43,6 +44,9 @@ const noOpUIContext: HookUIContext = {
 	custom: async () => undefined as never,
 	setEditorText: () => {},
 	getEditorText: () => "",
+	get theme() {
+		return theme;
+	},
 };
 
 /**

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

@@ -112,6 +112,16 @@ export interface HookUIContext {
 	 * @returns Current editor text
 	 */
 	getEditorText(): string;
+
+	/**
+	 * Get the current theme for styling text with ANSI codes.
+	 * Use theme.fg() and theme.bg() to style status text.
+	 *
+	 * @example
+	 * const theme = ctx.ui.theme;
+	 * ctx.ui.setStatus("my-hook", theme.fg("success", "✓") + " Ready");
+	 */
+	readonly theme: Theme;
 }
 
 /**

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

@@ -375,6 +375,9 @@ export class InteractiveMode {
 			custom: (factory) => this.showHookCustom(factory),
 			setEditorText: (text) => this.editor.setText(text),
 			getEditorText: () => this.editor.getText(),
+			get theme() {
+				return theme;
+			},
 		};
 		this.setToolUIContext(uiContext, true);
 

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

@@ -15,6 +15,7 @@ import * as crypto from "node:crypto";
 import * as readline from "readline";
 import type { AgentSession } from "../../core/agent-session.js";
 import type { HookUIContext } from "../../core/hooks/index.js";
+import { theme } from "../interactive/theme/theme.js";
 import type { RpcCommand, RpcHookUIRequest, RpcHookUIResponse, RpcResponse, RpcSessionState } from "./rpc-types.js";
 
 // Re-export types for consumers
@@ -150,6 +151,10 @@ export async function runRpcMode(session: AgentSession): Promise<never> {
 			// Host should track editor state locally if needed
 			return "";
 		},
+
+		get theme() {
+			return theme;
+		},
 	});
 
 	// Set up hooks with RPC-based UI context