feat(tui, coding-agent): add configurable code block indent setting (#855)

Add markdown.codeBlockIndent setting to customize indentation prefix for
rendered code blocks. Default remains 2 spaces for visual clarity, but
setting to empty string removes indentation for easier copy/paste of
code snippets to scripts, editors, or other tools.

Changes:
- tui: add optional codeBlockIndent to MarkdownTheme interface
- coding-agent: add MarkdownSettings with codeBlockIndent property
- coding-agent: compose theme with settings at call sites (no global state)
- coding-agent: update message components to accept optional MarkdownTheme

Co-authored-by: Mario Zechner <badlogicgames@gmail.com>

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

@@ -1,5 +1,5 @@
 import type { AssistantMessage } from "@mariozechner/pi-ai";
-import { Container, Markdown, Spacer, Text } from "@mariozechner/pi-tui";
+import { Container, Markdown, type MarkdownTheme, Spacer, Text } from "@mariozechner/pi-tui";
 import { getMarkdownTheme, theme } from "../theme/theme.js";
 
 /**
@@ -8,12 +8,18 @@ import { getMarkdownTheme, theme } from "../theme/theme.js";
 export class AssistantMessageComponent extends Container {
 	private contentContainer: Container;
 	private hideThinkingBlock: boolean;
+	private markdownTheme: MarkdownTheme;
 	private lastMessage?: AssistantMessage;
 
-	constructor(message?: AssistantMessage, hideThinkingBlock = false) {
+	constructor(
+		message?: AssistantMessage,
+		hideThinkingBlock = false,
+		markdownTheme: MarkdownTheme = getMarkdownTheme(),
+	) {
 		super();
 
 		this.hideThinkingBlock = hideThinkingBlock;
+		this.markdownTheme = markdownTheme;
 
 		// Container for text/thinking content
 		this.contentContainer = new Container();
@@ -55,7 +61,7 @@ export class AssistantMessageComponent extends Container {
 			if (content.type === "text" && content.text.trim()) {
 				// Assistant text messages with no background - trim the text
 				// Set paddingY=0 to avoid extra spacing before tool executions
-				this.contentContainer.addChild(new Markdown(content.text.trim(), 1, 0, getMarkdownTheme()));
+				this.contentContainer.addChild(new Markdown(content.text.trim(), 1, 0, this.markdownTheme));
 			} else if (content.type === "thinking" && content.thinking.trim()) {
 				// Check if there's text content after this thinking block
 				const hasTextAfter = message.content.slice(i + 1).some((c) => c.type === "text" && c.text.trim());
@@ -69,7 +75,7 @@ export class AssistantMessageComponent extends Container {
 				} else {
 					// Thinking traces in thinkingText color, italic
 					this.contentContainer.addChild(
-						new Markdown(content.thinking.trim(), 1, 0, getMarkdownTheme(), {
+						new Markdown(content.thinking.trim(), 1, 0, this.markdownTheme, {
 							color: (text: string) => theme.fg("thinkingText", text),
 							italic: true,
 						}),

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

@@ -1,4 +1,4 @@
-import { Box, Markdown, Spacer, Text } from "@mariozechner/pi-tui";
+import { Box, Markdown, type MarkdownTheme, Spacer, Text } from "@mariozechner/pi-tui";
 import type { BranchSummaryMessage } from "../../../core/messages.js";
 import { getMarkdownTheme, theme } from "../theme/theme.js";
 import { editorKey } from "./keybinding-hints.js";
@@ -10,10 +10,12 @@ import { editorKey } from "./keybinding-hints.js";
 export class BranchSummaryMessageComponent extends Box {
 	private expanded = false;
 	private message: BranchSummaryMessage;
+	private markdownTheme: MarkdownTheme;
 
-	constructor(message: BranchSummaryMessage) {
+	constructor(message: BranchSummaryMessage, markdownTheme: MarkdownTheme = getMarkdownTheme()) {
 		super(1, 1, (t) => theme.bg("customMessageBg", t));
 		this.message = message;
+		this.markdownTheme = markdownTheme;
 		this.updateDisplay();
 	}
 
@@ -37,7 +39,7 @@ export class BranchSummaryMessageComponent extends Box {
 		if (this.expanded) {
 			const header = "**Branch Summary**\n\n";
 			this.addChild(
-				new Markdown(header + this.message.summary, 0, 0, getMarkdownTheme(), {
+				new Markdown(header + this.message.summary, 0, 0, this.markdownTheme, {
 					color: (text: string) => theme.fg("customMessageText", text),
 				}),
 			);

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

@@ -1,4 +1,4 @@
-import { Box, Markdown, Spacer, Text } from "@mariozechner/pi-tui";
+import { Box, Markdown, type MarkdownTheme, Spacer, Text } from "@mariozechner/pi-tui";
 import type { CompactionSummaryMessage } from "../../../core/messages.js";
 import { getMarkdownTheme, theme } from "../theme/theme.js";
 import { editorKey } from "./keybinding-hints.js";
@@ -10,10 +10,12 @@ import { editorKey } from "./keybinding-hints.js";
 export class CompactionSummaryMessageComponent extends Box {
 	private expanded = false;
 	private message: CompactionSummaryMessage;
+	private markdownTheme: MarkdownTheme;
 
-	constructor(message: CompactionSummaryMessage) {
+	constructor(message: CompactionSummaryMessage, markdownTheme: MarkdownTheme = getMarkdownTheme()) {
 		super(1, 1, (t) => theme.bg("customMessageBg", t));
 		this.message = message;
+		this.markdownTheme = markdownTheme;
 		this.updateDisplay();
 	}
 
@@ -38,7 +40,7 @@ export class CompactionSummaryMessageComponent extends Box {
 		if (this.expanded) {
 			const header = `**Compacted from ${tokenStr} tokens**\n\n`;
 			this.addChild(
-				new Markdown(header + this.message.summary, 0, 0, getMarkdownTheme(), {
+				new Markdown(header + this.message.summary, 0, 0, this.markdownTheme, {
 					color: (text: string) => theme.fg("customMessageText", text),
 				}),
 			);

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

@@ -1,6 +1,6 @@
 import type { TextContent } from "@mariozechner/pi-ai";
 import type { Component } from "@mariozechner/pi-tui";
-import { Box, Container, Markdown, Spacer, Text } from "@mariozechner/pi-tui";
+import { Box, Container, Markdown, type MarkdownTheme, Spacer, Text } from "@mariozechner/pi-tui";
 import type { MessageRenderer } from "../../../core/extensions/types.js";
 import type { CustomMessage } from "../../../core/messages.js";
 import { getMarkdownTheme, theme } from "../theme/theme.js";
@@ -14,12 +14,18 @@ export class CustomMessageComponent extends Container {
 	private customRenderer?: MessageRenderer;
 	private box: Box;
 	private customComponent?: Component;
+	private markdownTheme: MarkdownTheme;
 	private _expanded = false;
 
-	constructor(message: CustomMessage<unknown>, customRenderer?: MessageRenderer) {
+	constructor(
+		message: CustomMessage<unknown>,
+		customRenderer?: MessageRenderer,
+		markdownTheme: MarkdownTheme = getMarkdownTheme(),
+	) {
 		super();
 		this.message = message;
 		this.customRenderer = customRenderer;
+		this.markdownTheme = markdownTheme;
 
 		this.addChild(new Spacer(1));
 
@@ -93,7 +99,7 @@ export class CustomMessageComponent extends Container {
 		}
 
 		this.box.addChild(
-			new Markdown(text, 0, 0, getMarkdownTheme(), {
+			new Markdown(text, 0, 0, this.markdownTheme, {
 				color: (text: string) => theme.fg("customMessageText", text),
 			}),
 		);

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

@@ -1,15 +1,15 @@
-import { Container, Markdown, Spacer } from "@mariozechner/pi-tui";
+import { Container, Markdown, type MarkdownTheme, Spacer } from "@mariozechner/pi-tui";
 import { getMarkdownTheme, theme } from "../theme/theme.js";
 
 /**
  * Component that renders a user message
  */
 export class UserMessageComponent extends Container {
-	constructor(text: string) {
+	constructor(text: string, markdownTheme: MarkdownTheme = getMarkdownTheme()) {
 		super();
 		this.addChild(new Spacer(1));
 		this.addChild(
-			new Markdown(text, 1, 1, getMarkdownTheme(), {
+			new Markdown(text, 1, 1, markdownTheme, {
 				bgColor: (text: string) => theme.bg("userMessageBg", text),
 				color: (text: string) => theme.fg("userMessageText", text),
 			}),