@nghyane/arcane 0.1.0

package/src/modes/components/ttsr-notification.ts

@@ -0,0 +1,80 @@
+import { Box, Container, Spacer, Text } from "@nghyane/arcane-tui";
+import type { Rule } from "../../capability/rule";
+import { theme } from "../../modes/theme/theme";
+
+/**
+ * Component that renders a TTSR (Time Traveling Stream Rules) notification.
+ * Shows when a rule violation is detected and the stream is being rewound.
+ */
+export class TtsrNotificationComponent extends Container {
+	#box: Box;
+	#expanded = false;
+
+	constructor(private readonly rules: Rule[]) {
+		super();
+
+		this.addChild(new Spacer(1));
+
+		// Use inverse warning color for yellow background effect
+		this.#box = new Box(1, 1, t => theme.inverse(theme.fg("warning", t)));
+		this.addChild(this.#box);
+
+		this.#rebuild();
+	}
+
+	setExpanded(expanded: boolean): void {
+		if (this.#expanded !== expanded) {
+			this.#expanded = expanded;
+			this.#rebuild();
+		}
+	}
+
+	isExpanded(): boolean {
+		return this.#expanded;
+	}
+
+	#rebuild(): void {
+		this.#box.clear();
+
+		// Build header: warning symbol + rule name + rewind icon
+		const ruleNames = this.rules.map(r => theme.bold(r.name)).join(", ");
+		const label = this.rules.length === 1 ? "rule" : "rules";
+		const header = `${theme.icon.warning} Injecting ${label}: ${ruleNames}`;
+
+		// Create header with rewind icon on the right
+		const rewindIcon = theme.icon.rewind;
+
+		this.#box.addChild(new Text(`${header}  ${rewindIcon}`, 0, 0));
+
+		// Show description(s) - italic and truncated
+		for (const rule of this.rules) {
+			const desc = rule.description || rule.content;
+			if (desc) {
+				this.#box.addChild(new Spacer(1));
+
+				let displayText = desc.trim();
+				if (!this.#expanded) {
+					// Truncate to first 2 lines
+					const lines = displayText.split("\n");
+					if (lines.length > 2) {
+						displayText = `${lines.slice(0, 2).join("\n")}…`;
+					}
+				}
+
+				// Use italic for subtle distinction (fg colors conflict with inverse)
+				this.#box.addChild(new Text(theme.italic(displayText), 0, 0));
+			}
+		}
+
+		// Show expand hint if collapsed and there's more content
+		if (!this.#expanded) {
+			const hasMoreContent = this.rules.some(r => {
+				const desc = r.description || r.content;
+				return desc && desc.split("\n").length > 2;
+			});
+			if (hasMoreContent) {
+				this.#box.addChild(new Text(theme.italic(" (ctrl+o to expand)"), 0, 0));
+			}
+		}
+	}
+}

package/src/modes/components/user-message-selector.ts

@@ -0,0 +1,146 @@
+import { type Component, Container, matchesKey, Spacer, Text, truncateToWidth } from "@nghyane/arcane-tui";
+import { theme } from "../../modes/theme/theme";
+import { DynamicBorder } from "./dynamic-border";
+
+interface UserMessageItem {
+	id: string; // Entry ID in the session
+	text: string; // The message text
+	timestamp?: string; // Optional timestamp if available
+}
+
+/**
+ * Custom user message list component with selection
+ */
+class UserMessageList implements Component {
+	#selectedIndex: number = 0;
+	onSelect?: (entryId: string) => void;
+	onCancel?: () => void;
+	#maxVisible: number = 10; // Max messages visible
+
+	constructor(private readonly messages: UserMessageItem[]) {
+		// Store messages in chronological order (oldest to newest)
+		// Start with the last (most recent) message selected
+		this.#selectedIndex = Math.max(0, this.messages.length - 1);
+	}
+
+	invalidate(): void {
+		// No cached state to invalidate currently
+	}
+
+	render(width: number): string[] {
+		const lines: string[] = [];
+
+		if (this.messages.length === 0) {
+			lines.push(theme.fg("muted", "  No user messages found"));
+			return lines;
+		}
+
+		// Calculate visible range with scrolling
+		const startIndex = Math.max(
+			0,
+			Math.min(this.#selectedIndex - Math.floor(this.#maxVisible / 2), this.messages.length - this.#maxVisible),
+		);
+		const endIndex = Math.min(startIndex + this.#maxVisible, this.messages.length);
+
+		// Render visible messages (2 lines per message + blank line)
+		for (let i = startIndex; i < endIndex; i++) {
+			const message = this.messages[i];
+			const isSelected = i === this.#selectedIndex;
+
+			// Normalize message to single line
+			const normalizedMessage = message.text.replace(/\n/g, " ").trim();
+
+			// First line: cursor + message
+			const cursor = isSelected ? theme.fg("accent", "› ") : "  ";
+			const maxMsgWidth = width - 2; // Account for cursor (2 chars)
+			const truncatedMsg = truncateToWidth(normalizedMessage, maxMsgWidth);
+			const messageLine = cursor + (isSelected ? theme.bold(truncatedMsg) : truncatedMsg);
+
+			lines.push(messageLine);
+
+			// Second line: metadata (position in history)
+			const position = i + 1;
+			const metadata = `  Message ${position} of ${this.messages.length}`;
+			const metadataLine = theme.fg("muted", metadata);
+			lines.push(metadataLine);
+			lines.push(""); // Blank line between messages
+		}
+
+		// Add scroll indicator if needed
+		if (startIndex > 0 || endIndex < this.messages.length) {
+			const scrollInfo = theme.fg("muted", `  (${this.#selectedIndex + 1}/${this.messages.length})`);
+			lines.push(scrollInfo);
+		}
+
+		return lines;
+	}
+
+	handleInput(keyData: string): void {
+		// Up arrow - go to previous (older) message, wrap to bottom when at top
+		if (matchesKey(keyData, "up")) {
+			this.#selectedIndex = this.#selectedIndex === 0 ? this.messages.length - 1 : this.#selectedIndex - 1;
+		}
+		// Down arrow - go to next (newer) message, wrap to top when at bottom
+		else if (matchesKey(keyData, "down")) {
+			this.#selectedIndex = this.#selectedIndex === this.messages.length - 1 ? 0 : this.#selectedIndex + 1;
+		}
+		// Enter - select message and branch
+		else if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
+			const selected = this.messages[this.#selectedIndex];
+			if (selected && this.onSelect) {
+				this.onSelect(selected.id);
+			}
+		}
+		// Escape - cancel
+		else if (matchesKey(keyData, "escape") || matchesKey(keyData, "esc")) {
+			if (this.onCancel) {
+				this.onCancel();
+			}
+		}
+		// Ctrl+C - cancel
+		else if (matchesKey(keyData, "ctrl+c")) {
+			if (this.onCancel) {
+				this.onCancel();
+			}
+		}
+	}
+}
+
+/**
+ * Component that renders a user message selector for branching
+ */
+export class UserMessageSelectorComponent extends Container {
+	#messageList: UserMessageList;
+
+	constructor(messages: UserMessageItem[], onSelect: (entryId: string) => void, onCancel: () => void) {
+		super();
+
+		// Add header
+		this.addChild(new Spacer(1));
+		this.addChild(new Text(theme.bold("Branch from Message"), 1, 0));
+		this.addChild(new Text(theme.fg("muted", "Select a message to create a new branch from that point"), 1, 0));
+		this.addChild(new Spacer(1));
+		this.addChild(new DynamicBorder());
+		this.addChild(new Spacer(1));
+
+		// Create message list
+		this.#messageList = new UserMessageList(messages);
+		this.#messageList.onSelect = onSelect;
+		this.#messageList.onCancel = onCancel;
+
+		this.addChild(this.#messageList);
+
+		// Add bottom border
+		this.addChild(new Spacer(1));
+		this.addChild(new DynamicBorder());
+
+		// Auto-cancel if no messages
+		if (messages.length === 0) {
+			setTimeout(() => onCancel(), 100);
+		}
+	}
+
+	getMessageList(): UserMessageList {
+		return this.#messageList;
+	}
+}

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

@@ -0,0 +1,22 @@
+import { Container, Markdown, Spacer } from "@nghyane/arcane-tui";
+import { getMarkdownTheme, theme } from "../../modes/theme/theme";
+
+/**
+ * Component that renders a user message
+ */
+export class UserMessageComponent extends Container {
+	constructor(text: string, synthetic = false) {
+		super();
+		const bgColor = (value: string) => theme.bg("userMessageBg", value);
+		const color = synthetic
+			? (value: string) => theme.fg("dim", value)
+			: (value: string) => theme.fg("userMessageText", value);
+		this.addChild(new Spacer(1));
+		this.addChild(
+			new Markdown(text, 1, 1, getMarkdownTheme(), {
+				bgColor,
+				color,
+			}),
+		);
+	}
+}

package/src/modes/components/visual-truncate.ts

@@ -0,0 +1,63 @@
+/**
+ * Shared utility for truncating text to visual lines (accounting for line wrapping).
+ * Used by both tool-execution.ts and bash-execution.ts for consistent behavior.
+ */
+import { Text } from "@nghyane/arcane-tui";
+
+export interface VisualTruncateResult {
+	/** The visual lines to display */
+	visualLines: string[];
+	/** Number of visual lines that were skipped (hidden) */
+	skippedCount: number;
+}
+
+const textCache = new Map<number, Text>();
+
+function getCachedText(paddingX: number): Text {
+	let text = textCache.get(paddingX);
+	if (!text) {
+		text = new Text("", paddingX, 0);
+		textCache.set(paddingX, text);
+	}
+	return text;
+}
+
+/**
+ * Truncate text to a maximum number of visual lines (from the end).
+ * This accounts for line wrapping based on terminal width.
+ *
+ * @param text - The text content (may contain newlines)
+ * @param maxVisualLines - Maximum number of visual lines to show
+ * @param width - Terminal/render width
+ * @param paddingX - Horizontal padding for Text component (default 0).
+ *                   Use 0 when result will be placed in a Box (Box adds its own padding).
+ *                   Use 1 when result will be placed in a plain Container.
+ * @returns The truncated visual lines and count of skipped lines
+ */
+export function truncateToVisualLines(
+	text: string,
+	maxVisualLines: number,
+	width: number,
+	paddingX: number = 0,
+): VisualTruncateResult {
+	if (!text) {
+		return { visualLines: [], skippedCount: 0 };
+	}
+
+	// Create a temporary Text component to render and get visual lines
+	const tempText = getCachedText(paddingX);
+	if (tempText.getText() !== text) {
+		tempText.setText(text);
+	}
+	const allVisualLines = tempText.render(width);
+
+	if (allVisualLines.length <= maxVisualLines) {
+		return { visualLines: allVisualLines, skippedCount: 0 };
+	}
+
+	// Take the last N visual lines
+	const truncatedLines = allVisualLines.slice(-maxVisualLines);
+	const skippedCount = allVisualLines.length - maxVisualLines;
+
+	return { visualLines: truncatedLines, skippedCount };
+}

package/src/modes/components/welcome.ts

@@ -0,0 +1,247 @@
+import { type Component, padding, truncateToWidth, visibleWidth } from "@nghyane/arcane-tui";
+import { APP_NAME } from "@nghyane/arcane-utils/dirs";
+import { theme } from "../../modes/theme/theme";
+
+export interface RecentSession {
+	name: string;
+	timeAgo: string;
+}
+
+export interface LspServerInfo {
+	name: string;
+	status: "ready" | "error" | "connecting";
+	fileTypes: string[];
+}
+
+/**
+ * Premium welcome screen with block-based OMP logo and two-column layout.
+ */
+export class WelcomeComponent implements Component {
+	constructor(
+		private readonly version: string,
+		private modelName: string,
+		private providerName: string,
+		private recentSessions: RecentSession[] = [],
+		private lspServers: LspServerInfo[] = [],
+	) {}
+
+	invalidate(): void {}
+
+	setModel(modelName: string, providerName: string): void {
+		this.modelName = modelName;
+		this.providerName = providerName;
+	}
+
+	setRecentSessions(sessions: RecentSession[]): void {
+		this.recentSessions = sessions;
+	}
+
+	setLspServers(servers: LspServerInfo[]): void {
+		this.lspServers = servers;
+	}
+
+	render(termWidth: number): string[] {
+		// Box dimensions - responsive with max width and small-terminal support
+		const maxWidth = 100;
+		const boxWidth = Math.min(maxWidth, Math.max(0, termWidth - 2));
+		if (boxWidth < 4) {
+			return [];
+		}
+		const dualContentWidth = boxWidth - 3; // 3 = │ + │ + │
+		const preferredLeftCol = 26;
+		const minLeftCol = 14; // logo width
+		const minRightCol = 20;
+		const leftMinContentWidth = Math.max(
+			minLeftCol,
+			visibleWidth("Welcome back!"),
+			visibleWidth(this.modelName),
+			visibleWidth(this.providerName),
+		);
+		const desiredLeftCol = Math.min(preferredLeftCol, Math.max(minLeftCol, Math.floor(dualContentWidth * 0.35)));
+		const dualLeftCol =
+			dualContentWidth >= minRightCol + 1
+				? Math.min(desiredLeftCol, dualContentWidth - minRightCol)
+				: Math.max(1, dualContentWidth - 1);
+		const dualRightCol = Math.max(1, dualContentWidth - dualLeftCol);
+		const showRightColumn = dualLeftCol >= leftMinContentWidth && dualRightCol >= minRightCol;
+		const leftCol = showRightColumn ? dualLeftCol : boxWidth - 2;
+		const rightCol = showRightColumn ? dualRightCol : 0;
+
+		// Block-based OMP logo (gradient: magenta → cyan)
+		// biome-ignore format: preserve ASCII art layout
+		const piLogo = ["▀████████████▀", " ╘███    ███  ", "  ███    ███  ", "  ███    ███  ", " ▄███▄  ▄███▄ "];
+
+		// Apply gradient to logo
+		const logoColored = piLogo.map(line => this.#gradientLine(line));
+
+		// Left column - centered content
+		const leftLines = [
+			"",
+			this.#centerText(theme.bold("Welcome back!"), leftCol),
+			"",
+			...logoColored.map(l => this.#centerText(l, leftCol)),
+			"",
+			this.#centerText(theme.fg("muted", this.modelName), leftCol),
+			this.#centerText(theme.fg("borderMuted", this.providerName), leftCol),
+		];
+
+		// Right column separator
+		const separatorWidth = Math.max(0, rightCol - 2); // padding on each side
+		const separator = ` ${theme.fg("dim", theme.boxRound.horizontal.repeat(separatorWidth))}`;
+
+		// Recent sessions content
+		const sessionLines: string[] = [];
+		if (this.recentSessions.length === 0) {
+			sessionLines.push(` ${theme.fg("dim", "No recent sessions")}`);
+		} else {
+			for (const session of this.recentSessions.slice(0, 3)) {
+				sessionLines.push(
+					` ${theme.fg("dim", `${theme.md.bullet} `)}${theme.fg("muted", session.name)}${theme.fg("dim", ` (${session.timeAgo})`)}`,
+				);
+			}
+		}
+
+		// LSP servers content
+		const lspLines: string[] = [];
+		if (this.lspServers.length === 0) {
+			lspLines.push(` ${theme.fg("dim", "No LSP servers")}`);
+		} else {
+			for (const server of this.lspServers) {
+				const icon =
+					server.status === "ready"
+						? theme.styledSymbol("status.success", "success")
+						: server.status === "connecting"
+							? theme.styledSymbol("status.disabled", "warning")
+							: theme.styledSymbol("status.error", "error");
+				const exts = server.fileTypes.slice(0, 3).join(" ");
+				lspLines.push(` ${icon} ${theme.fg("muted", server.name)} ${theme.fg("dim", exts)}`);
+			}
+		}
+
+		// Right column
+		const rightLines = [
+			` ${theme.bold(theme.fg("accent", "Tips"))}`,
+			` ${theme.fg("dim", "?")}${theme.fg("muted", " for keyboard shortcuts")}`,
+			` ${theme.fg("dim", "/")}${theme.fg("muted", " for commands")}`,
+			` ${theme.fg("dim", "!")}${theme.fg("muted", " to run bash")}`,
+			` ${theme.fg("dim", "$")}${theme.fg("muted", " to run python")}`,
+			separator,
+			` ${theme.bold(theme.fg("accent", "LSP Servers"))}`,
+			...lspLines,
+			separator,
+			` ${theme.bold(theme.fg("accent", "Recent sessions"))}`,
+			...sessionLines,
+			"",
+		];
+
+		// Border characters (dim)
+		const hChar = theme.boxRound.horizontal;
+		const h = theme.fg("dim", hChar);
+		const v = theme.fg("dim", theme.boxRound.vertical);
+		const tl = theme.fg("dim", theme.boxRound.topLeft);
+		const tr = theme.fg("dim", theme.boxRound.topRight);
+		const bl = theme.fg("dim", theme.boxRound.bottomLeft);
+		const br = theme.fg("dim", theme.boxRound.bottomRight);
+
+		const lines: string[] = [];
+
+		// Top border with embedded title
+		const title = ` ${APP_NAME} v${this.version} `;
+		const titlePrefixRaw = hChar.repeat(3);
+		const titleStyled = theme.fg("dim", titlePrefixRaw) + theme.fg("muted", title);
+		const titleVisLen = visibleWidth(titlePrefixRaw) + visibleWidth(title);
+		const titleSpace = boxWidth - 2;
+		if (titleVisLen >= titleSpace) {
+			lines.push(tl + truncateToWidth(titleStyled, titleSpace) + tr);
+		} else {
+			const afterTitle = titleSpace - titleVisLen;
+			lines.push(tl + titleStyled + theme.fg("dim", hChar.repeat(afterTitle)) + tr);
+		}
+
+		// Content rows
+		const maxRows = showRightColumn ? Math.max(leftLines.length, rightLines.length) : leftLines.length;
+		for (let i = 0; i < maxRows; i++) {
+			const left = this.#fitToWidth(leftLines[i] ?? "", leftCol);
+			if (showRightColumn) {
+				const right = this.#fitToWidth(rightLines[i] ?? "", rightCol);
+				lines.push(v + left + v + right + v);
+			} else {
+				lines.push(v + left + v);
+			}
+		}
+		// Bottom border
+		if (showRightColumn) {
+			lines.push(bl + h.repeat(leftCol) + theme.fg("dim", theme.boxSharp.teeUp) + h.repeat(rightCol) + br);
+		} else {
+			lines.push(bl + h.repeat(leftCol) + br);
+		}
+
+		return lines;
+	}
+
+	/** Center text within a given width */
+	#centerText(text: string, width: number): string {
+		const visLen = visibleWidth(text);
+		if (visLen >= width) {
+			return truncateToWidth(text, width);
+		}
+		const leftPad = Math.floor((width - visLen) / 2);
+		const rightPad = width - visLen - leftPad;
+		return padding(leftPad) + text + padding(rightPad);
+	}
+
+	/** Apply magenta→cyan gradient to a string */
+	#gradientLine(line: string): string {
+		const colors = [
+			"\x1b[38;5;199m", // bright magenta
+			"\x1b[38;5;171m", // magenta-purple
+			"\x1b[38;5;135m", // purple
+			"\x1b[38;5;99m", // purple-blue
+			"\x1b[38;5;75m", // cyan-blue
+			"\x1b[38;5;51m", // bright cyan
+		];
+		const reset = "\x1b[0m";
+
+		let result = "";
+		let colorIdx = 0;
+		const step = Math.max(1, Math.floor(line.length / colors.length));
+
+		for (let i = 0; i < line.length; i++) {
+			if (i > 0 && i % step === 0 && colorIdx < colors.length - 1) {
+				colorIdx++;
+			}
+			const char = line[i];
+			if (char !== " ") {
+				result += colors[colorIdx] + char + reset;
+			} else {
+				result += char;
+			}
+		}
+		return result;
+	}
+
+	/** Fit string to exact width with ANSI-aware truncation/padding */
+	#fitToWidth(str: string, width: number): string {
+		const visLen = visibleWidth(str);
+		if (visLen > width) {
+			const ellipsis = "…";
+			const ellipsisWidth = visibleWidth(ellipsis);
+			const maxWidth = Math.max(0, width - ellipsisWidth);
+			let truncated = "";
+			let currentWidth = 0;
+			let inEscape = false;
+			for (const char of str) {
+				if (char === "\x1b") inEscape = true;
+				if (inEscape) {
+					truncated += char;
+					if (char === "m") inEscape = false;
+				} else if (currentWidth < maxWidth) {
+					truncated += char;
+					currentWidth++;
+				}
+			}
+			return `${truncated}${ellipsis}`;
+		}
+		return str + padding(width - visLen);
+	}
+}