@nghyane/arcane 0.1.0

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

@@ -0,0 +1,196 @@
+/**
+ * Component for displaying user-initiated Python execution with streaming output.
+ * Shares the same kernel session as the agent's Python tool.
+ */
+
+import { sanitizeText } from "@nghyane/arcane-natives";
+import { Container, Loader, Spacer, Text, type TUI } from "@nghyane/arcane-tui";
+import { getSymbolTheme, highlightCode, 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";
+
+const PREVIEW_LINES = 20;
+const MAX_DISPLAY_LINE_CHARS = 4000;
+
+export class PythonExecutionComponent extends Container {
+	#outputLines: string[] = [];
+	#status: "running" | "complete" | "cancelled" | "error" = "running";
+	#exitCode: number | undefined = undefined;
+	#loader: Loader;
+	#truncation?: TruncationMeta;
+	#expanded = false;
+	#contentContainer: Container;
+
+	#formatHeader(colorKey: "dim" | "pythonMode"): Text {
+		const prompt = theme.fg(colorKey, theme.bold(">>>"));
+		const continuation = theme.fg(colorKey, "    ");
+		const codeLines = highlightCode(this.code, "python");
+		const headerLines = codeLines.map((line, index) =>
+			index === 0 ? `${prompt} ${line}` : `${continuation}${line}`,
+		);
+		return new Text(headerLines.join("\n"), 1, 0);
+	}
+
+	constructor(
+		private readonly code: string,
+		ui: TUI,
+		private readonly excludeFromContext = false,
+	) {
+		super();
+
+		const colorKey = this.excludeFromContext ? "dim" : "pythonMode";
+		const borderColor = (str: string) => theme.fg(colorKey, str);
+
+		this.addChild(new Spacer(1));
+		this.addChild(new DynamicBorder(borderColor));
+
+		this.#contentContainer = new Container();
+		this.addChild(this.#contentContainer);
+		this.#contentContainer.addChild(this.#formatHeader(colorKey));
+
+		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);
+
+		this.addChild(new DynamicBorder(borderColor));
+	}
+
+	setExpanded(expanded: boolean): void {
+		this.#expanded = expanded;
+		this.#updateDisplay();
+	}
+
+	override invalidate(): void {
+		super.invalidate();
+		this.#updateDisplay();
+	}
+
+	appendOutput(chunk: string): void {
+		const clean = sanitizeText(chunk);
+
+		const newLines = clean.split("\n").map(line => this.#clampDisplayLine(line));
+		if (this.#outputLines.length > 0 && newLines.length > 0) {
+			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);
+		}
+
+		this.#loader.stop();
+		this.#updateDisplay();
+	}
+
+	#updateDisplay(): void {
+		const availableLines = this.#outputLines;
+		const previewLogicalLines = availableLines.slice(-PREVIEW_LINES);
+		const hiddenLineCount = availableLines.length - previewLogicalLines.length;
+
+		this.#contentContainer.clear();
+
+		const colorKey = this.excludeFromContext ? "dim" : "pythonMode";
+		this.#contentContainer.addChild(this.#formatHeader(colorKey));
+
+		if (availableLines.length > 0) {
+			if (this.#expanded) {
+				const displayText = availableLines.map(line => theme.fg("muted", line)).join("\n");
+				this.#contentContainer.addChild(new Text(`\n${displayText}`, 1, 0));
+			} else {
+				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: () => {},
+				});
+			}
+		}
+
+		if (this.#status === "running") {
+			this.#contentContainer.addChild(this.#loader);
+		} else {
+			const statusParts: string[] = [];
+
+			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)) : [];
+	}
+
+	getOutput(): string {
+		return this.#outputLines.join("\n");
+	}
+
+	getCode(): string {
+		return this.code;
+	}
+}

package/src/modes/components/queue-mode-selector.ts

@@ -0,0 +1,56 @@
+import { Container, type SelectItem, SelectList } from "@nghyane/arcane-tui";
+import { getSelectListTheme } from "../../modes/theme/theme";
+import { DynamicBorder } from "./dynamic-border";
+
+/**
+ * Component that renders a queue mode selector with borders
+ */
+export class QueueModeSelectorComponent extends Container {
+	#selectList: SelectList;
+
+	constructor(
+		currentMode: "all" | "one-at-a-time",
+		onSelect: (mode: "all" | "one-at-a-time") => void,
+		onCancel: () => void,
+	) {
+		super();
+
+		const queueModes: SelectItem[] = [
+			{
+				value: "one-at-a-time",
+				label: "one-at-a-time",
+				description: "Process queued messages one by one (recommended)",
+			},
+			{ value: "all", label: "all", description: "Process all queued messages at once" },
+		];
+
+		// Add top border
+		this.addChild(new DynamicBorder());
+
+		// Create selector
+		this.#selectList = new SelectList(queueModes, 2, getSelectListTheme());
+
+		// Preselect current mode
+		const currentIndex = queueModes.findIndex(item => item.value === currentMode);
+		if (currentIndex !== -1) {
+			this.#selectList.setSelectedIndex(currentIndex);
+		}
+
+		this.#selectList.onSelect = item => {
+			onSelect(item.value as "all" | "one-at-a-time");
+		};
+
+		this.#selectList.onCancel = () => {
+			onCancel();
+		};
+
+		this.addChild(this.#selectList);
+
+		// Add bottom border
+		this.addChild(new DynamicBorder());
+	}
+
+	getSelectList(): SelectList {
+		return this.#selectList;
+	}
+}

package/src/modes/components/read-tool-group.ts

@@ -0,0 +1,119 @@
+import { Container, Text } from "@nghyane/arcane-tui";
+import { theme } from "../../modes/theme/theme";
+import { shortenPath } from "../../tools/render-utils";
+import type { ToolExecutionHandle } from "./tool-execution";
+
+type ReadRenderArgs = {
+	path?: string;
+	file_path?: string;
+	offset?: number;
+	limit?: number;
+};
+
+type ReadEntry = {
+	toolCallId: string;
+	path: string;
+	offset?: number;
+	limit?: number;
+	status: "pending" | "success" | "error";
+};
+
+export class ReadToolGroupComponent extends Container implements ToolExecutionHandle {
+	#entries = new Map<string, ReadEntry>();
+	#text: Text;
+
+	constructor() {
+		super();
+		this.#text = new Text("", 0, 0);
+		this.addChild(this.#text);
+		this.#updateDisplay();
+	}
+
+	updateArgs(args: ReadRenderArgs, toolCallId?: string): void {
+		if (!toolCallId) return;
+		const rawPath = args.file_path || args.path || "";
+		const entry: ReadEntry = this.#entries.get(toolCallId) ?? {
+			toolCallId,
+			path: rawPath,
+			offset: args.offset,
+			limit: args.limit,
+			status: "pending",
+		};
+		entry.path = rawPath;
+		entry.offset = args.offset;
+		entry.limit = args.limit;
+		this.#entries.set(toolCallId, entry);
+		this.#updateDisplay();
+	}
+
+	updateResult(
+		result: { content: Array<{ type: string; text?: string }>; details?: unknown; isError?: boolean },
+		isPartial = false,
+		toolCallId?: string,
+	): void {
+		if (!toolCallId) return;
+		const entry = this.#entries.get(toolCallId);
+		if (!entry) return;
+		if (isPartial) return;
+		entry.status = result.isError ? "error" : "success";
+		this.#updateDisplay();
+	}
+
+	setArgsComplete(_toolCallId?: string): void {
+		this.#updateDisplay();
+	}
+
+	setExpanded(_expanded: boolean): void {
+		this.#updateDisplay();
+	}
+
+	#updateDisplay(): void {
+		const entries = [...this.#entries.values()];
+
+		if (entries.length === 0) {
+			this.#text.setText(` ${theme.format.bullet} ${theme.fg("toolTitle", theme.bold("Read"))}`);
+			return;
+		}
+
+		if (entries.length === 1) {
+			const entry = entries[0];
+			const statusSymbol = this.#formatStatus(entry.status);
+			const pathDisplay = this.#formatPath(entry);
+			this.#text.setText(` ${statusSymbol} ${theme.fg("toolTitle", theme.bold("Read"))} ${pathDisplay}`.trimEnd());
+			return;
+		}
+
+		const header = `${theme.fg("toolTitle", theme.bold("Read"))}${theme.fg("dim", ` (${entries.length})`)}`;
+		const lines = [` ${theme.format.bullet} ${header}`];
+		const total = entries.length;
+		for (const [index, entry] of entries.entries()) {
+			const connector = index === total - 1 ? theme.tree.last : theme.tree.branch;
+			const statusSymbol = this.#formatStatus(entry.status);
+			const pathDisplay = this.#formatPath(entry);
+			lines.push(`   ${theme.fg("dim", connector)} ${statusSymbol} ${pathDisplay}`.trimEnd());
+		}
+
+		this.#text.setText(lines.join("\n"));
+	}
+
+	#formatPath(entry: ReadEntry): string {
+		const filePath = shortenPath(entry.path);
+		let pathDisplay = filePath ? theme.fg("accent", filePath) : theme.fg("toolOutput", "…");
+		if (entry.offset !== undefined || entry.limit !== undefined) {
+			const startLine = entry.offset ?? 1;
+			const endLine = entry.limit !== undefined ? startLine + entry.limit - 1 : "";
+			pathDisplay += theme.fg("warning", `:${startLine}${endLine ? `-${endLine}` : ""}`);
+		}
+		return pathDisplay;
+	}
+
+	#formatStatus(status: ReadEntry["status"]): string {
+		if (status === "success") {
+			return theme.fg("success", theme.status.success);
+		}
+		if (status === "error") {
+			return theme.fg("error", theme.status.error);
+		}
+		return theme.fg("dim", theme.status.pending);
+	}
+}

package/src/modes/components/session-selector.ts

@@ -0,0 +1,242 @@
+import {
+	type Component,
+	Container,
+	Input,
+	matchesKey,
+	padding,
+	Spacer,
+	Text,
+	truncateToWidth,
+	visibleWidth,
+} from "@nghyane/arcane-tui";
+import { theme } from "../../modes/theme/theme";
+import type { SessionInfo } from "../../session/session-manager";
+import { fuzzyFilter } from "../../utils/fuzzy";
+import { DynamicBorder } from "./dynamic-border";
+
+/**
+ * Custom session list component with multi-line items and search
+ */
+class SessionList implements Component {
+	#filteredSessions: SessionInfo[] = [];
+	#selectedIndex: number = 0;
+	readonly #searchInput: Input;
+	onSelect?: (sessionPath: string) => void;
+	onCancel?: () => void;
+	onExit: () => void = () => {};
+	#maxVisible: number = 5; // Max sessions visible (each session is 3 lines: msg + metadata + blank)
+
+	constructor(
+		private readonly allSessions: SessionInfo[],
+		private readonly showCwd = false,
+	) {
+		this.#filteredSessions = allSessions;
+		this.#searchInput = new Input();
+
+		// Handle Enter in search input - select current item
+		this.#searchInput.onSubmit = () => {
+			if (this.#filteredSessions[this.#selectedIndex]) {
+				const selected = this.#filteredSessions[this.#selectedIndex];
+				if (this.onSelect) {
+					this.onSelect(selected.path);
+				}
+			}
+		};
+	}
+
+	#filterSessions(query: string): void {
+		this.#filteredSessions = fuzzyFilter(this.allSessions, query, session => {
+			const parts = [
+				session.id,
+				session.title ?? "",
+				session.cwd ?? "",
+				session.firstMessage ?? "",
+				session.allMessagesText,
+				session.path,
+			];
+			return parts.filter(Boolean).join(" ");
+		});
+		this.#selectedIndex = Math.min(this.#selectedIndex, Math.max(0, this.#filteredSessions.length - 1));
+	}
+
+	invalidate(): void {
+		// No cached state to invalidate currently
+	}
+
+	render(width: number): string[] {
+		const lines: string[] = [];
+
+		// Render search input
+		lines.push(...this.#searchInput.render(width));
+		lines.push(""); // Blank line after search
+
+		if (this.#filteredSessions.length === 0) {
+			if (this.showCwd) {
+				// "All" scope - no sessions anywhere that match filter
+				lines.push(truncateToWidth(theme.fg("muted", "  No sessions found"), width));
+			} else {
+				// "Current folder" scope - hint to try "all"
+				lines.push(
+					truncateToWidth(theme.fg("muted", "  No sessions in current folder. Press Tab to view all."), width),
+				);
+			}
+			return lines;
+		}
+
+		// Format dates
+		const formatDate = (date: Date): string => {
+			const now = new Date();
+			const diffMs = now.getTime() - date.getTime();
+			const diffMins = Math.floor(diffMs / 60000);
+			const diffHours = Math.floor(diffMs / 3600000);
+			const diffDays = Math.floor(diffMs / 86400000);
+
+			if (diffMins < 1) return "just now";
+			if (diffMins < 60) return `${diffMins} minute${diffMins !== 1 ? "s" : ""} ago`;
+			if (diffHours < 24) return `${diffHours} hour${diffHours !== 1 ? "s" : ""} ago`;
+			if (diffDays === 1) return "1 day ago";
+			if (diffDays < 7) return `${diffDays} days ago`;
+
+			return date.toLocaleDateString();
+		};
+
+		// Calculate visible range with scrolling
+		const startIndex = Math.max(
+			0,
+			Math.min(
+				this.#selectedIndex - Math.floor(this.#maxVisible / 2),
+				this.#filteredSessions.length - this.#maxVisible,
+			),
+		);
+		const endIndex = Math.min(startIndex + this.#maxVisible, this.#filteredSessions.length);
+
+		// Render visible sessions (2-3 lines per session + blank line)
+		for (let i = startIndex; i < endIndex; i++) {
+			const session = this.#filteredSessions[i];
+			const isSelected = i === this.#selectedIndex;
+
+			// Normalize first message to single line
+			const normalizedMessage = session.firstMessage.replace(/\n/g, " ").trim();
+
+			// First line: cursor + title (or first message if no title)
+			const cursorSymbol = `${theme.nav.cursor} `;
+			const cursorWidth = visibleWidth(cursorSymbol);
+			const cursor = isSelected ? theme.fg("accent", cursorSymbol) : padding(cursorWidth);
+			const maxWidth = width - cursorWidth; // Account for cursor width
+
+			if (session.title) {
+				// Has title: show title on first line, dimmed first message on second line
+				const truncatedTitle = truncateToWidth(session.title, maxWidth);
+				const titleLine = cursor + (isSelected ? theme.bold(truncatedTitle) : truncatedTitle);
+				lines.push(titleLine);
+
+				// Second line: dimmed first message preview
+				const truncatedPreview = truncateToWidth(normalizedMessage, maxWidth);
+				lines.push(`  ${theme.fg("dim", truncatedPreview)}`);
+			} else {
+				// No title: show first message as main line
+				const truncatedMsg = truncateToWidth(normalizedMessage, maxWidth);
+				const messageLine = cursor + (isSelected ? theme.bold(truncatedMsg) : truncatedMsg);
+				lines.push(messageLine);
+			}
+
+			// Metadata line: date + message count
+			const modified = formatDate(session.modified);
+			const msgCount = `${session.messageCount} message${session.messageCount !== 1 ? "s" : ""}`;
+			const metadata = `  ${modified} ${theme.sep.dot} ${msgCount}`;
+			const metadataLine = theme.fg("dim", truncateToWidth(metadata, width));
+
+			lines.push(metadataLine);
+			lines.push(""); // Blank line between sessions
+		}
+
+		// Add scroll indicator if needed
+		if (startIndex > 0 || endIndex < this.#filteredSessions.length) {
+			const scrollText = `  (${this.#selectedIndex + 1}/${this.#filteredSessions.length})`;
+			const scrollInfo = theme.fg("muted", truncateToWidth(scrollText, width));
+			lines.push(scrollInfo);
+		}
+
+		return lines;
+	}
+
+	handleInput(keyData: string): void {
+		// Up arrow
+		if (matchesKey(keyData, "up")) {
+			this.#selectedIndex = Math.max(0, this.#selectedIndex - 1);
+		}
+		// Down arrow
+		else if (matchesKey(keyData, "down")) {
+			this.#selectedIndex = Math.min(this.#filteredSessions.length - 1, this.#selectedIndex + 1);
+		}
+		// Page up - jump up by maxVisible items
+		else if (matchesKey(keyData, "pageUp")) {
+			this.#selectedIndex = Math.max(0, this.#selectedIndex - this.#maxVisible);
+		}
+		// Page down - jump down by maxVisible items
+		else if (matchesKey(keyData, "pageDown")) {
+			this.#selectedIndex = Math.min(this.#filteredSessions.length - 1, this.#selectedIndex + this.#maxVisible);
+		}
+		// Enter
+		else if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
+			const selected = this.#filteredSessions[this.#selectedIndex];
+			if (selected && this.onSelect) {
+				this.onSelect(selected.path);
+			}
+		}
+		// Escape - cancel
+		else if (matchesKey(keyData, "escape") || matchesKey(keyData, "esc")) {
+			if (this.onCancel) {
+				this.onCancel();
+			}
+		}
+		// Ctrl+C - exit
+		else if (matchesKey(keyData, "ctrl+c")) {
+			this.onExit();
+		}
+		// Pass everything else to search input
+		else {
+			this.#searchInput.handleInput(keyData);
+			this.#filterSessions(this.#searchInput.getValue());
+		}
+	}
+}
+
+/**
+ * Component that renders a session selector
+ */
+export class SessionSelectorComponent extends Container {
+	#sessionList: SessionList;
+
+	constructor(
+		sessions: SessionInfo[],
+		onSelect: (sessionPath: string) => void,
+		onCancel: () => void,
+		onExit: () => void,
+	) {
+		super();
+
+		// Add header
+		this.addChild(new Spacer(1));
+		this.addChild(new Text(theme.bold("Resume Session"), 1, 0));
+		this.addChild(new Spacer(1));
+		this.addChild(new DynamicBorder());
+		this.addChild(new Spacer(1));
+
+		// Create session list
+		this.#sessionList = new SessionList(sessions);
+		this.#sessionList.onSelect = onSelect;
+		this.#sessionList.onCancel = onCancel;
+		this.#sessionList.onExit = onExit;
+
+		this.addChild(this.#sessionList);
+
+		// Add bottom border
+		this.addChild(new Spacer(1));
+		this.addChild(new DynamicBorder());
+	}
+
+	getSessionList(): SessionList {
+		return this.#sessionList;
+	}
+}