@nghyane/arcane 0.1.12 → 0.1.14

package/src/main.ts

@@ -27,11 +27,11 @@ import { initializeWithSettings } from "./discovery";
 import { exportFromFile } from "./export/html";
 import type { ExtensionUIContext } from "./extensibility/extensions/types";
 import { InteractiveMode, runPrintMode, runRpcMode } from "./modes";
-import { initTheme, stopThemeWatcher } from "./modes/theme/theme";
 import { type CreateAgentSessionOptions, createAgentSession, discoverAuthStorage } from "./sdk";
 import type { AgentSession } from "./session/agent-session";
 import { type SessionInfo, SessionManager } from "./session/session-manager";
 import { resolvePromptInput } from "./system-prompt";
+import { initTheme, stopThemeWatcher } from "./theme/theme";
 import { getChangelogPath, getNewEntries, parseChangelog } from "./utils/changelog";
 import { printTimings, time } from "./utils/timings";
 import { VERSION } from "./version";

package/src/mcp/tool-bridge.ts

@@ -6,16 +6,9 @@
 import type { AgentToolUpdateCallback } from "@nghyane/arcane-agent";
 import type { TSchema } from "@sinclair/typebox";
 import type { SourceMeta } from "../capability/types";
-import type {
-	CustomTool,
-	CustomToolContext,
-	CustomToolResult,
-	RenderResultOptions,
-} from "../extensibility/custom-tools/types";
-import type { Theme } from "../modes/theme/theme";
+import type { CustomTool, CustomToolContext, CustomToolResult } from "../extensibility/custom-tools/types";
 import { ToolAbortError, throwIfAborted } from "../tools/tool-errors";
 import { callTool } from "./client";
-import { renderMCPCall, renderMCPResult } from "./render";
 import type { MCPContent, MCPServerConnection, MCPToolDefinition } from "./types";
 
 function withAbort<T>(promise: Promise<T>, signal?: AbortSignal): Promise<T> {
@@ -198,14 +191,6 @@ export class MCPTool implements CustomTool<TSchema, MCPToolDetails> {
 		this.mcpServerName = connection.name;
 	}
 
-	renderCall(args: unknown, _options: RenderResultOptions, theme: Theme) {
-		return renderMCPCall((args ?? {}) as Record<string, unknown>, theme, this.label);
-	}
-
-	renderResult(result: CustomToolResult<MCPToolDetails>, options: RenderResultOptions, theme: Theme, args?: unknown) {
-		return renderMCPResult(result, options, theme, (args ?? {}) as Record<string, unknown>);
-	}
-
 	async execute(
 		_toolCallId: string,
 		params: unknown,
@@ -304,14 +289,6 @@ export class DeferredMCPTool implements CustomTool<TSchema, MCPToolDetails> {
 		this.#fallbackProviderName = source?.providerName;
 	}
 
-	renderCall(args: unknown, _options: RenderResultOptions, theme: Theme) {
-		return renderMCPCall((args ?? {}) as Record<string, unknown>, theme, this.label);
-	}
-
-	renderResult(result: CustomToolResult<MCPToolDetails>, options: RenderResultOptions, theme: Theme, args?: unknown) {
-		return renderMCPResult(result, options, theme, (args ?? {}) as Record<string, unknown>);
-	}
-
 	async execute(
 		_toolCallId: string,
 		params: unknown,

package/src/modes/components/assistant-message.ts

@@ -1,8 +1,8 @@
 import type { AssistantMessage } from "@nghyane/arcane-ai";
 import { Container, Markdown, Spacer, TERMINAL, Text } from "@nghyane/arcane-tui";
 import { logger } from "@nghyane/arcane-utils";
-import { hasPendingMermaid, prerenderMermaid } from "../../modes/theme/mermaid-cache";
-import { getMarkdownTheme, theme } from "../../modes/theme/theme";
+import { hasPendingMermaid, prerenderMermaid } from "../../theme/mermaid-cache";
+import { getMarkdownTheme, theme } from "../../theme/theme";
 
 /**
  * Component that renders a complete assistant message
@@ -90,7 +90,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(), 2, 0, getMarkdownTheme()));
 			} else if (content.type === "thinking" && content.thinking.trim()) {
 				// Add spacing only when another visible assistant content block follows.
 				// This avoids a superfluous blank line before separately-rendered tool execution blocks.
@@ -100,14 +100,14 @@ export class AssistantMessageComponent extends Container {
 
 				if (this.hideThinkingBlock) {
 					// Show static "Thinking..." label when hidden
-					this.#contentContainer.addChild(new Text(theme.italic(theme.fg("thinkingText", "Thinking...")), 1, 0));
+					this.#contentContainer.addChild(new Text(theme.italic(theme.fg("thinkingText", "Thinking...")), 2, 0));
 					if (hasVisibleContentAfter) {
 						this.#contentContainer.addChild(new Spacer(1));
 					}
 				} else {
 					// Thinking traces in thinkingText color, italic
 					this.#contentContainer.addChild(
-						new Markdown(content.thinking.trim(), 1, 0, getMarkdownTheme(), {
+						new Markdown(content.thinking.trim(), 2, 0, getMarkdownTheme(), {
 							color: (text: string) => theme.fg("thinkingText", text),
 							italic: true,
 						}),
@@ -133,11 +133,11 @@ export class AssistantMessageComponent extends Container {
 				} else {
 					this.#contentContainer.addChild(new Spacer(1));
 				}
-				this.#contentContainer.addChild(new Text(theme.fg("error", abortMessage), 1, 0));
+				this.#contentContainer.addChild(new Text(theme.fg("error", abortMessage), 2, 0));
 			} else if (message.stopReason === "error") {
 				const errorMsg = message.errorMessage || "Unknown error";
 				this.#contentContainer.addChild(new Spacer(1));
-				this.#contentContainer.addChild(new Text(theme.fg("error", `Error: ${errorMsg}`), 1, 0));
+				this.#contentContainer.addChild(new Text(theme.fg("error", `Error: ${errorMsg}`), 2, 0));
 			}
 		}
 	}

package/src/modes/components/bash-execution.ts

@@ -1,17 +1,16 @@
 /**
  * Component for displaying bash command execution with streaming output.
+ * Tree-style output: tail 4 lines on success, all on error.
  */
 
 import { sanitizeText } from "@nghyane/arcane-natives";
 import { Container, Loader, Spacer, Text, type TUI } from "@nghyane/arcane-tui";
-import { getSymbolTheme, theme } from "../../modes/theme/theme";
-import { formatBytes } from "../../session/streaming-output";
+import { getSymbolTheme, theme } from "../../theme/theme";
 import type { TruncationMeta } from "../../tools/output-meta";
-import { DynamicBorder } from "./dynamic-border";
-import { truncateToVisualLines } from "./visual-truncate";
+import { renderStatusLine } from "../../tui/status-line";
+import { formatCount, replaceTabs } from "../../ui/render-utils";
 
-// Preview line limit when not expanded (matches tool execution behavior)
-const PREVIEW_LINES = 20;
+const TAIL_LINES = 4;
 const MAX_DISPLAY_LINE_CHARS = 4000;
 
 export class BashExecutionComponent extends Container {
@@ -21,50 +20,37 @@ export class BashExecutionComponent extends Container {
 	#loader: Loader;
 	#truncation?: TruncationMeta;
 	#expanded = false;
-	#contentContainer: Container;
+	#headerText: Text;
+	#bodyText: Text;
 
 	constructor(
 		private readonly command: string,
 		ui: TUI,
-		excludeFromContext = false,
+		_excludeFromContext = false,
 	) {
 		super();
-
-		// Use dim border for excluded-from-context commands (!! prefix)
-		const colorKey = excludeFromContext ? "dim" : "bashMode";
-		const borderColor = (str: string) => theme.fg(colorKey, str);
-
-		// Add spacer
 		this.addChild(new Spacer(1));
 
-		// Top border
-		this.addChild(new DynamicBorder(borderColor));
-
-		// Content container (holds dynamic content between borders)
-		this.#contentContainer = new Container();
-		this.addChild(this.#contentContainer);
+		this.#headerText = new Text(
+			renderStatusLine({ icon: "running", title: "Bash", description: `$ ${command}` }, theme),
+			1,
+			0,
+		);
+		this.addChild(this.#headerText);
 
-		// Command header
-		const header = new Text(theme.fg(colorKey, theme.bold(`$ ${command}`)), 1, 0);
-		this.#contentContainer.addChild(header);
+		this.#bodyText = new Text("", 1, 0);
+		this.addChild(this.#bodyText);
 
-		// Loader
 		this.#loader = new Loader(
 			ui,
-			spinner => theme.fg(colorKey, spinner),
+			spinner => theme.fg("accent", spinner),
 			text => theme.fg("muted", text),
-			`Running… (esc to cancel)`,
+			"Running\u2026 (esc to cancel)",
 			getSymbolTheme().spinnerFrames,
 		);
-		this.#contentContainer.addChild(this.#loader);
-
-		// Bottom border
-		this.addChild(new DynamicBorder(borderColor));
+		this.addChild(this.#loader);
 	}
 
-	/**
-	 * Set whether the output is expanded (shows full output) or collapsed (preview only).
-	 */
 	setExpanded(expanded: boolean): void {
 		this.#expanded = expanded;
 		this.#updateDisplay();
@@ -77,11 +63,8 @@ export class BashExecutionComponent extends Container {
 
 	appendOutput(chunk: string): void {
 		const clean = sanitizeText(chunk);
-
-		// Append to output lines
 		const newLines = clean.split("\n").map(line => this.#clampDisplayLine(line));
 		if (this.#outputLines.length > 0 && newLines.length > 0) {
-			// Append first chunk to last line (incomplete line continuation)
 			this.#outputLines[this.#outputLines.length - 1] = this.#clampDisplayLine(
 				`${this.#outputLines[this.#outputLines.length - 1]}${newLines[0]}`,
 			);
@@ -89,7 +72,6 @@ export class BashExecutionComponent extends Container {
 		} else {
 			this.#outputLines.push(...newLines);
 		}
-
 		this.#updateDisplay();
 	}
 
@@ -108,93 +90,52 @@ export class BashExecutionComponent extends Container {
 		if (options?.output !== undefined) {
 			this.#setOutput(options.output);
 		}
-
-		// Stop loader
 		this.#loader.stop();
-
 		this.#updateDisplay();
 	}
 
 	#updateDisplay(): void {
-		const availableLines = this.#outputLines;
-
-		// Apply preview truncation based on expanded state
-		const previewLogicalLines = availableLines.slice(-PREVIEW_LINES);
-		const hiddenLineCount = availableLines.length - previewLogicalLines.length;
-
-		// Rebuild content container
-		this.#contentContainer.clear();
-
-		// Command header
-		const header = new Text(theme.fg("bashMode", theme.bold(`$ ${this.command}`)), 1, 0);
-		this.#contentContainer.addChild(header);
-
-		// Output
-		if (availableLines.length > 0) {
-			if (this.#expanded) {
-				// Show all lines
-				const displayText = availableLines.map(line => theme.fg("muted", line)).join("\n");
-				this.#contentContainer.addChild(new Text(`\n${displayText}`, 1, 0));
-			} else {
-				// Use shared visual truncation utility, recomputed per render width
-				const styledOutput = previewLogicalLines.map(line => theme.fg("muted", line)).join("\n");
-				const previewText = `\n${styledOutput}`;
-				this.#contentContainer.addChild({
-					render: (width: number) => {
-						const { visualLines } = truncateToVisualLines(previewText, PREVIEW_LINES, width, 1);
-						return visualLines;
-					},
-					invalidate: () => {},
-				});
-			}
+		const isError = this.#status === "error";
+		const isDone = this.#status !== "running";
+		const lines = this.#outputLines.filter(l => l.trim());
+		const total = lines.length;
+
+		// Update header
+		if (isDone) {
+			const icon = isError ? "error" : this.#status === "cancelled" ? "warning" : "success";
+			const meta: string[] = [];
+			if (isError && this.#exitCode !== undefined) meta.push(`exit ${this.#exitCode}`);
+			if (total > 0) meta.push(formatCount("line", total));
+			this.#headerText.setText(
+				renderStatusLine({ icon, title: "Bash", description: `$ ${this.command}`, meta }, theme),
+			);
 		}
 
-		// Loader or status
-		if (this.#status === "running") {
-			this.#contentContainer.addChild(this.#loader);
-		} else {
-			const statusParts: string[] = [];
+		// Build tree-style body
+		const bodyLines: string[] = [];
+		if (total > 0) {
+			const showAll = isError || this.#expanded;
+			const displayLines = showAll ? lines : lines.slice(-TAIL_LINES);
+			const skipped = total - displayLines.length;
 
-			// Show how many lines are hidden (collapsed preview)
-			if (hiddenLineCount > 0) {
-				statusParts.push(theme.fg("dim", `… ${hiddenLineCount} more lines (ctrl+o to expand)`));
+			if (skipped > 0) {
+				bodyLines.push(theme.fg("dim", `\u2026 (${skipped} earlier lines)`));
 			}
-
-			if (this.#status === "cancelled") {
-				statusParts.push(theme.fg("warning", "(cancelled)"));
-			} else if (this.#status === "error") {
-				statusParts.push(theme.fg("error", `(exit ${this.#exitCode})`));
+			for (let i = 0; i < displayLines.length; i++) {
+				bodyLines.push(theme.fg("toolOutput", replaceTabs(displayLines[i])));
 			}
-
 			if (this.#truncation) {
-				const warnings: string[] = [];
-				if (this.#truncation.artifactId) {
-					warnings.push(`Full output: artifact://${this.#truncation.artifactId}`);
-				}
-				if (this.#truncation.truncatedBy === "lines") {
-					warnings.push(
-						`Truncated: showing ${this.#truncation.outputLines} of ${this.#truncation.totalLines} lines`,
-					);
-				} else {
-					warnings.push(
-						`Truncated: ${this.#truncation.outputLines} lines shown (${formatBytes(this.#truncation.outputBytes)} limit)`,
-					);
-				}
-				statusParts.push(theme.fg("warning", warnings.join(". ")));
-			}
-
-			if (statusParts.length > 0) {
-				this.#contentContainer.addChild(new Text(`\n${statusParts.join("\n")}`, 1, 0));
+				bodyLines.push(theme.fg("warning", "output truncated"));
 			}
 		}
+
+		this.#bodyText.setText(bodyLines.length > 0 ? bodyLines.join("\n") : "");
 	}
 
 	#clampDisplayLine(line: string): string {
-		if (line.length <= MAX_DISPLAY_LINE_CHARS) {
-			return line;
-		}
+		if (line.length <= MAX_DISPLAY_LINE_CHARS) return line;
 		const omitted = line.length - MAX_DISPLAY_LINE_CHARS;
-		return `${line.slice(0, MAX_DISPLAY_LINE_CHARS)}… [${omitted} chars omitted]`;
+		return `${line.slice(0, MAX_DISPLAY_LINE_CHARS)}\u2026 [${omitted} chars omitted]`;
 	}
 
 	#setOutput(output: string): void {
@@ -202,16 +143,10 @@ export class BashExecutionComponent extends Container {
 		this.#outputLines = clean ? clean.split("\n").map(line => this.#clampDisplayLine(line)) : [];
 	}
 
-	/**
-	 * Get the raw output for creating BashExecutionMessage.
-	 */
 	getOutput(): string {
 		return this.#outputLines.join("\n");
 	}
 
-	/**
-	 * Get the command that was executed.
-	 */
 	getCommand(): string {
 		return this.command;
 	}

package/src/modes/components/bordered-loader.ts

@@ -1,5 +1,5 @@
 import { CancellableLoader, Container, Spacer, Text, type TUI } from "@nghyane/arcane-tui";
-import type { Theme } from "../../modes/theme/theme";
+import type { Theme } from "../../theme/theme";
 import { DynamicBorder } from "./dynamic-border";
 
 /** Loader wrapped with borders for hook UI */

package/src/modes/components/branch-summary-message.ts

@@ -1,16 +1,19 @@
-import { Box, Markdown, Spacer, Text } from "@nghyane/arcane-tui";
-import { getMarkdownTheme, theme } from "../../modes/theme/theme";
+import { Container, LeftBorderBox, Markdown, Spacer, Text } from "@nghyane/arcane-tui";
 import type { BranchSummaryMessage } from "../../session/messages";
+import { getMarkdownTheme, theme } from "../../theme/theme";
 
 /**
  * Component that renders a branch summary message with collapsed/expanded state.
- * Uses same background color as hook messages for visual consistency.
  */
-export class BranchSummaryMessageComponent extends Box {
+export class BranchSummaryMessageComponent extends Container {
+	#box: LeftBorderBox;
 	#expanded = false;
 
 	constructor(private readonly message: BranchSummaryMessage) {
-		super(1, 1, t => theme.bg("customMessageBg", t));
+		super();
+		this.addChild(new Spacer(1));
+		this.#box = new LeftBorderBox(1, 1, s => theme.fg("dim", s));
+		this.addChild(this.#box);
 		this.#updateDisplay();
 	}
 
@@ -25,21 +28,21 @@ export class BranchSummaryMessageComponent extends Box {
 	}
 
 	#updateDisplay(): void {
-		this.clear();
+		this.#box.clear();
 
 		const label = theme.fg("customMessageLabel", theme.bold("[branch]"));
-		this.addChild(new Text(label, 0, 0));
-		this.addChild(new Spacer(1));
+		this.#box.addChild(new Text(label, 0, 0));
+		this.#box.addChild(new Spacer(1));
 
 		if (this.#expanded) {
 			const header = "**Branch Summary**\n\n";
-			this.addChild(
+			this.#box.addChild(
 				new Markdown(header + this.message.summary, 0, 0, getMarkdownTheme(), {
 					color: (text: string) => theme.fg("customMessageText", text),
 				}),
 			);
 		} else {
-			this.addChild(new Text(theme.fg("customMessageText", "Branch summary (ctrl+o to expand)"), 0, 0));
+			this.#box.addChild(new Text(theme.fg("customMessageText", "Branch summary"), 0, 0));
 		}
 	}
 }

package/src/modes/components/compaction-summary-message.ts

@@ -1,16 +1,19 @@
-import { Box, Markdown, Spacer, Text } from "@nghyane/arcane-tui";
-import { getMarkdownTheme, theme } from "../../modes/theme/theme";
+import { Container, LeftBorderBox, Markdown, Spacer, Text } from "@nghyane/arcane-tui";
 import type { CompactionSummaryMessage } from "../../session/messages";
+import { getMarkdownTheme, theme } from "../../theme/theme";
 
 /**
  * Component that renders a compaction message with collapsed/expanded state.
- * Uses same background color as hook messages for visual consistency.
  */
-export class CompactionSummaryMessageComponent extends Box {
+export class CompactionSummaryMessageComponent extends Container {
+	#box: LeftBorderBox;
 	#expanded = false;
 
 	constructor(private readonly message: CompactionSummaryMessage) {
-		super(1, 1, t => theme.bg("customMessageBg", t));
+		super();
+		this.addChild(new Spacer(1));
+		this.#box = new LeftBorderBox(1, 1, s => theme.fg("dim", s));
+		this.addChild(this.#box);
 		this.#updateDisplay();
 	}
 
@@ -25,26 +28,24 @@ export class CompactionSummaryMessageComponent extends Box {
 	}
 
 	#updateDisplay(): void {
-		this.clear();
+		this.#box.clear();
 
 		const tokenStr = this.message.tokensBefore.toLocaleString();
 		const label = theme.fg("customMessageLabel", theme.bold("[compaction]"));
-		this.addChild(new Text(label, 0, 0));
-		this.addChild(new Spacer(1));
+		this.#box.addChild(new Text(label, 0, 0));
+		this.#box.addChild(new Spacer(1));
 
 		if (this.#expanded) {
 			const header = `**Compacted from ${tokenStr} tokens**\n\n`;
-			this.addChild(
+			this.#box.addChild(
 				new Markdown(header + this.message.summary, 0, 0, getMarkdownTheme(), {
 					color: (text: string) => theme.fg("customMessageText", text),
 				}),
 			);
 		} else {
-			this.addChild(
-				new Text(theme.fg("customMessageText", `Compacted from ${tokenStr} tokens (ctrl+o to expand)`), 0, 0),
-			);
+			this.#box.addChild(new Text(theme.fg("customMessageText", `Compacted from ${tokenStr} tokens`), 0, 0));
 			if (this.message.shortSummary) {
-				this.addChild(new Text(theme.fg("customMessageText", this.message.shortSummary), 0, 1));
+				this.#box.addChild(new Text(theme.fg("customMessageText", this.message.shortSummary), 0, 1));
 			}
 		}
 	}

package/src/modes/components/context-group.ts

@@ -0,0 +1,106 @@
+import type { Component } from "@nghyane/arcane-tui";
+import { Spacer } from "@nghyane/arcane-tui";
+import { theme } from "../../theme/theme";
+import { formatCount, formatStatusIcon } from "../../ui/render-utils";
+import type { ToolExecutionComponent } from "./tool-execution";
+
+const CONTEXT_TOOL_LABELS: Record<string, string> = {
+	read: "read",
+	grep: "grep",
+	find: "find",
+	fetch: "fetch",
+	search_code: "search",
+	lsp: "lsp",
+	notebook: "notebook",
+};
+
+/**
+ * Groups consecutive context-gathering tools (read, grep, find, etc.) into
+ * a single collapsible summary line to reduce visual noise.
+ *
+ * Collapsed: "Gathered context  3 reads, 2 greps, 1 find"
+ * Expanded: summary + individual tool components
+ */
+export class ContextGroupComponent implements Component {
+	#entries: Array<{ name: string; component: ToolExecutionComponent }> = [];
+	#expanded = false;
+	#pendingCount = 0;
+	#spacer: Spacer;
+
+	constructor() {
+		this.#spacer = new Spacer(1);
+	}
+
+	addTool(name: string, component: ToolExecutionComponent): void {
+		this.#entries.push({ name, component });
+		this.#pendingCount++;
+		component.setExpanded(this.#expanded);
+	}
+
+	markDone(): void {
+		this.#pendingCount = Math.max(0, this.#pendingCount - 1);
+	}
+
+	setExpanded(expanded: boolean): void {
+		if (this.#expanded === expanded) return;
+		this.#expanded = expanded;
+		for (const entry of this.#entries) {
+			entry.component.setExpanded(expanded);
+		}
+	}
+
+	setMarginTop(lines: number): void {
+		this.#spacer.setLines(lines);
+	}
+
+	get size(): number {
+		return this.#entries.length;
+	}
+
+	invalidate(): void {
+		for (const entry of this.#entries) {
+			entry.component.invalidate?.();
+		}
+	}
+
+	render(width: number): string[] {
+		const lines: string[] = [];
+
+		// Margin
+		lines.push(...this.#spacer.render(width));
+
+		// Summary line
+		const allDone = this.#pendingCount <= 0;
+		const icon = allDone ? formatStatusIcon("success", theme) : formatStatusIcon("running", theme);
+		const label = allDone ? "Gathered context" : "Gathering context…";
+
+		// Count by tool type
+		const counts = new Map<string, number>();
+		for (const entry of this.#entries) {
+			const displayName = CONTEXT_TOOL_LABELS[entry.name] ?? entry.name;
+			counts.set(displayName, (counts.get(displayName) ?? 0) + 1);
+		}
+		const parts: string[] = [];
+		for (const [name, count] of counts) {
+			parts.push(formatCount(name, count));
+		}
+		const summary = parts.join(", ");
+
+		const summaryLine = `  ${icon} ${theme.fg("muted", label)}  ${theme.fg("dim", summary)}`;
+		lines.push(summaryLine);
+
+		// Always show individual tool entries, indented under summary
+		const indent = "     ";
+		const innerWidth = width - indent.length;
+		for (let i = 0; i < this.#entries.length; i++) {
+			const entryLines = this.#entries[i].component.render(innerWidth);
+			for (const line of entryLines) {
+				if (line.trim()) {
+					lines.push(indent + line);
+				}
+			}
+		}
+
+		return lines;
+	}
+}

package/src/modes/components/custom-message.ts

@@ -1,16 +1,16 @@
 import type { TextContent } from "@nghyane/arcane-ai";
 import type { Component } from "@nghyane/arcane-tui";
-import { Box, Container, Markdown, Spacer, Text } from "@nghyane/arcane-tui";
+import { Container, LeftBorderBox, Markdown, Spacer, Text } from "@nghyane/arcane-tui";
 import type { MessageRenderer } from "../../extensibility/extensions/types";
-import { getMarkdownTheme, theme } from "../../modes/theme/theme";
 import type { CustomMessage } from "../../session/messages";
+import { getMarkdownTheme, theme } from "../../theme/theme";
 
 /**
  * Component that renders a custom message entry from extensions.
  * Uses distinct styling to differentiate from user messages.
  */
 export class CustomMessageComponent extends Container {
-	#box: Box;
+	#box: LeftBorderBox;
 	#customComponent?: Component;
 	#expanded = false;
 
@@ -22,8 +22,7 @@ export class CustomMessageComponent extends Container {
 
 		this.addChild(new Spacer(1));
 
-		// Create box with custom background (used for default rendering)
-		this.#box = new Box(1, 1, t => theme.bg("customMessageBg", t));
+		this.#box = new LeftBorderBox(1, 1, s => theme.fg("dim", s));
 
 		this.#rebuild();
 	}

package/src/modes/components/diff.ts

@@ -1,6 +1,6 @@
 import * as Diff from "diff";
-import { theme } from "../../modes/theme/theme";
-import { replaceTabs } from "../../tools/render-utils";
+import { theme } from "../../theme/theme";
+import { replaceTabs } from "../../ui/render-utils";
 
 /** SGR dim on / normal intensity — additive, preserves fg/bg colors. */
 const DIM = "\x1b[2m";

package/src/modes/components/dynamic-border.ts

@@ -1,5 +1,5 @@
 import type { Component } from "@nghyane/arcane-tui";
-import { theme } from "../../modes/theme/theme";
+import { theme } from "../../theme/theme";
 
 /**
  * Dynamic border component that adjusts to viewport width.

package/src/modes/components/extensions/extension-dashboard.ts

@@ -23,7 +23,7 @@ import {
 } from "@nghyane/arcane-tui";
 import { Settings } from "../../../config/settings";
 import { DynamicBorder } from "../../../modes/components/dynamic-border";
-import { theme } from "../../../modes/theme/theme";
+import { theme } from "../../../theme/theme";
 import { ExtensionList } from "./extension-list";
 import { InspectorPanel } from "./inspector-panel";
 import { applyFilter, createInitialState, filterByProvider, refreshState, toggleProvider } from "./state-manager";
@@ -298,7 +298,7 @@ class TwoColumnBody implements Component {
 
 	render(width: number): string[] {
 		const leftWidth = Math.floor(width * 0.5);
-		const rightWidth = width - leftWidth - 3;
+		const rightWidth = Math.max(0, width - leftWidth - 3);
 
 		const leftLines = this.leftPane.render(leftWidth);
 		const rightLines = this.rightPane.render(rightWidth);

package/src/modes/components/extensions/extension-list.ts

@@ -7,7 +7,7 @@
  */
 import { type Component, matchesKey, padding, truncateToWidth, visibleWidth } from "@nghyane/arcane-tui";
 import { isProviderEnabled } from "../../../discovery";
-import { theme } from "../../../modes/theme/theme";
+import { theme } from "../../../theme/theme";
 import { applyFilter } from "./state-manager";
 import type { Extension, ExtensionKind, ExtensionState } from "./types";