@nghyane/arcane 0.1.0

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

@@ -0,0 +1,144 @@
+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";
+
+/**
+ * Component that renders a complete assistant message
+ */
+export class AssistantMessageComponent extends Container {
+	#contentContainer: Container;
+	#lastMessage?: AssistantMessage;
+	#prerenderInFlight = false;
+
+	constructor(
+		message?: AssistantMessage,
+		private hideThinkingBlock = false,
+	) {
+		super();
+
+		// Container for text/thinking content
+		this.#contentContainer = new Container();
+		this.addChild(this.#contentContainer);
+
+		if (message) {
+			this.updateContent(message);
+		}
+	}
+
+	override invalidate(): void {
+		super.invalidate();
+		if (this.#lastMessage) {
+			this.updateContent(this.#lastMessage);
+		}
+	}
+
+	setHideThinkingBlock(hide: boolean): void {
+		this.hideThinkingBlock = hide;
+	}
+
+	#triggerMermaidPrerender(message: AssistantMessage): void {
+		if (!TERMINAL.imageProtocol || this.#prerenderInFlight) return;
+
+		// Check if any text content has pending mermaid blocks
+		const hasPending = message.content.some(c => c.type === "text" && c.text.trim() && hasPendingMermaid(c.text));
+		if (!hasPending) return;
+
+		this.#prerenderInFlight = true;
+
+		// Fire off background prerender
+		void (async () => {
+			try {
+				for (const content of message.content) {
+					if (content.type === "text" && content.text.trim() && hasPendingMermaid(content.text)) {
+						await prerenderMermaid(content.text);
+					}
+				}
+			} catch (error) {
+				logger.warn("Background mermaid prerender failed", {
+					error: error instanceof Error ? error.message : String(error),
+				});
+			} finally {
+				this.#prerenderInFlight = false;
+				// Invalidate to re-render with cached images
+				this.invalidate();
+			}
+		})();
+	}
+
+	updateContent(message: AssistantMessage): void {
+		this.#lastMessage = message;
+
+		// Clear content container
+		this.#contentContainer.clear();
+
+		// Trigger background mermaid pre-rendering if needed
+		this.#triggerMermaidPrerender(message);
+
+		const hasVisibleContent = message.content.some(
+			c => (c.type === "text" && c.text.trim()) || (c.type === "thinking" && c.thinking.trim()),
+		);
+
+		if (hasVisibleContent) {
+			this.#contentContainer.addChild(new Spacer(1));
+		}
+
+		// Render content in order
+		for (let i = 0; i < message.content.length; i++) {
+			const content = message.content[i];
+			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()));
+			} 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.
+				const hasVisibleContentAfter = message.content
+					.slice(i + 1)
+					.some(c => (c.type === "text" && c.text.trim()) || (c.type === "thinking" && c.thinking.trim()));
+
+				if (this.hideThinkingBlock) {
+					// Show static "Thinking..." label when hidden
+					this.#contentContainer.addChild(new Text(theme.italic(theme.fg("thinkingText", "Thinking...")), 1, 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(), {
+							color: (text: string) => theme.fg("thinkingText", text),
+							italic: true,
+						}),
+					);
+					if (hasVisibleContentAfter) {
+						this.#contentContainer.addChild(new Spacer(1));
+					}
+				}
+			}
+		}
+
+		// Check if aborted - show after partial content
+		// But only if there are no tool calls (tool execution components will show the error)
+		const hasToolCalls = message.content.some(c => c.type === "toolCall");
+		if (!hasToolCalls) {
+			if (message.stopReason === "aborted") {
+				const abortMessage =
+					message.errorMessage && message.errorMessage !== "Request was aborted"
+						? message.errorMessage
+						: "Operation aborted";
+				if (hasVisibleContent) {
+					this.#contentContainer.addChild(new Spacer(1));
+				} else {
+					this.#contentContainer.addChild(new Spacer(1));
+				}
+				this.#contentContainer.addChild(new Text(theme.fg("error", abortMessage), 1, 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));
+			}
+		}
+	}
+}

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

@@ -0,0 +1,218 @@
+/**
+ * Component for displaying bash command execution with streaming output.
+ */
+
+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 type { TruncationMeta } from "../../tools/output-meta";
+import { DynamicBorder } from "./dynamic-border";
+import { truncateToVisualLines } from "./visual-truncate";
+
+// Preview line limit when not expanded (matches tool execution behavior)
+const PREVIEW_LINES = 20;
+const MAX_DISPLAY_LINE_CHARS = 4000;
+
+export class BashExecutionComponent extends Container {
+	#outputLines: string[] = [];
+	#status: "running" | "complete" | "cancelled" | "error" = "running";
+	#exitCode: number | undefined = undefined;
+	#loader: Loader;
+	#truncation?: TruncationMeta;
+	#expanded = false;
+	#contentContainer: Container;
+
+	constructor(
+		private readonly command: string,
+		ui: TUI,
+		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);
+
+		// Command header
+		const header = new Text(theme.fg(colorKey, theme.bold(`$ ${command}`)), 1, 0);
+		this.#contentContainer.addChild(header);
+
+		// Loader
+		this.#loader = new Loader(
+			ui,
+			spinner => theme.fg(colorKey, spinner),
+			text => theme.fg("muted", text),
+			`Running… (esc to cancel)`,
+			getSymbolTheme().spinnerFrames,
+		);
+		this.#contentContainer.addChild(this.#loader);
+
+		// Bottom border
+		this.addChild(new DynamicBorder(borderColor));
+	}
+
+	/**
+	 * Set whether the output is expanded (shows full output) or collapsed (preview only).
+	 */
+	setExpanded(expanded: boolean): void {
+		this.#expanded = expanded;
+		this.#updateDisplay();
+	}
+
+	override invalidate(): void {
+		super.invalidate();
+		this.#updateDisplay();
+	}
+
+	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]}`,
+			);
+			this.#outputLines.push(...newLines.slice(1));
+		} else {
+			this.#outputLines.push(...newLines);
+		}
+
+		this.#updateDisplay();
+	}
+
+	setComplete(
+		exitCode: number | undefined,
+		cancelled: boolean,
+		options?: { output?: string; truncation?: TruncationMeta },
+	): void {
+		this.#exitCode = exitCode;
+		this.#status = cancelled
+			? "cancelled"
+			: exitCode !== 0 && exitCode !== undefined && exitCode !== null
+				? "error"
+				: "complete";
+		this.#truncation = options?.truncation;
+		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: () => {},
+				});
+			}
+		}
+
+		// Loader or status
+		if (this.#status === "running") {
+			this.#contentContainer.addChild(this.#loader);
+		} else {
+			const statusParts: string[] = [];
+
+			// Show how many lines are hidden (collapsed preview)
+			if (hiddenLineCount > 0) {
+				statusParts.push(theme.fg("dim", `… ${hiddenLineCount} more lines (ctrl+o to expand)`));
+			}
+
+			if (this.#status === "cancelled") {
+				statusParts.push(theme.fg("warning", "(cancelled)"));
+			} else if (this.#status === "error") {
+				statusParts.push(theme.fg("error", `(exit ${this.#exitCode})`));
+			}
+
+			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));
+			}
+		}
+	}
+
+	#clampDisplayLine(line: string): string {
+		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]`;
+	}
+
+	#setOutput(output: string): void {
+		const clean = sanitizeText(output);
+		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

@@ -0,0 +1,41 @@
+import { CancellableLoader, Container, Spacer, Text, type TUI } from "@nghyane/arcane-tui";
+import type { Theme } from "../../modes/theme/theme";
+import { DynamicBorder } from "./dynamic-border";
+
+/** Loader wrapped with borders for hook UI */
+export class BorderedLoader extends Container {
+	#loader: CancellableLoader;
+
+	constructor(tui: TUI, theme: Theme, message: string) {
+		super();
+		const borderColor = (s: string) => theme.fg("border", s);
+		this.addChild(new DynamicBorder(borderColor));
+		this.#loader = new CancellableLoader(
+			tui,
+			s => theme.fg("accent", s),
+			s => theme.fg("muted", s),
+			message,
+		);
+		this.addChild(this.#loader);
+		this.addChild(new Spacer(1));
+		this.addChild(new Text(theme.fg("muted", "esc cancel"), 1, 0));
+		this.addChild(new Spacer(1));
+		this.addChild(new DynamicBorder(borderColor));
+	}
+
+	get signal(): AbortSignal {
+		return this.#loader.signal;
+	}
+
+	set onAbort(fn: (() => void) | undefined) {
+		this.#loader.onAbort = fn;
+	}
+
+	handleInput(data: string): void {
+		this.#loader.handleInput(data);
+	}
+
+	dispose(): void {
+		this.#loader.dispose();
+	}
+}

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

@@ -0,0 +1,45 @@
+import { Box, Markdown, Spacer, Text } from "@nghyane/arcane-tui";
+import { getMarkdownTheme, theme } from "../../modes/theme/theme";
+import type { BranchSummaryMessage } from "../../session/messages";
+
+/**
+ * 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 {
+	#expanded = false;
+
+	constructor(private readonly message: BranchSummaryMessage) {
+		super(1, 1, t => theme.bg("customMessageBg", t));
+		this.#updateDisplay();
+	}
+
+	setExpanded(expanded: boolean): void {
+		this.#expanded = expanded;
+		this.#updateDisplay();
+	}
+
+	override invalidate(): void {
+		super.invalidate();
+		this.#updateDisplay();
+	}
+
+	#updateDisplay(): void {
+		this.clear();
+
+		const label = theme.fg("customMessageLabel", theme.bold("[branch]"));
+		this.addChild(new Text(label, 0, 0));
+		this.addChild(new Spacer(1));
+
+		if (this.#expanded) {
+			const header = "**Branch Summary**\n\n";
+			this.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));
+		}
+	}
+}