@nghyane/arcane 0.1.0

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

@@ -0,0 +1,369 @@
+import type { AgentTool } from "@nghyane/arcane-agent";
+import type { Component, TUI } from "@nghyane/arcane-tui";
+import { Text } from "@nghyane/arcane-tui";
+import { getSymbolTheme, theme } from "../../modes/theme/theme";
+import { shortenPath } from "../../tools/render-utils";
+import { getTreeBranch, getTreeContinuePrefix } from "../../tui";
+import { ToolExecutionComponent, type ToolExecutionHandle, type ToolExecutionOptions } from "./tool-execution";
+
+/** Visible width of the tree prefix added to each sub-tool line. */
+const TREE_PREFIX_WIDTH = 6; // 3 leading spaces + branch/continue chars + trailing space
+
+type ReadEntry = {
+	path: string;
+	offset?: number;
+	limit?: number;
+	status: "pending" | "success" | "error";
+	text: Text;
+};
+
+type ToolHistoryEntry = { tool: string; args: string; status: "success" | "error" | "running" };
+
+const SUBAGENT_TOOLS = new Set(["explore", "oracle", "librarian", "code_review"]);
+
+const SUBAGENT_LABELS: Record<string, string> = {
+	explore: "Explore",
+	oracle: "Oracle",
+	librarian: "Librarian",
+	code_review: "Code Review",
+};
+
+class SubagentComponent implements Component, ToolExecutionHandle {
+	#label: string;
+	#description: string;
+	#status: "pending" | "success" | "error" = "pending";
+	#toolHistory: ToolHistoryEntry[] = [];
+	#dirty = true;
+	#cachedLines: string[] = [];
+	#cachedWidth = 0;
+
+	constructor(toolName: string, args: Record<string, unknown>) {
+		this.#label = SUBAGENT_LABELS[toolName] ?? toolName;
+		const raw = ((args.query ?? args.task ?? args.diff_description ?? "") as string).trim();
+		this.#description = raw;
+	}
+
+	// --- Component ---
+
+	render(width: number): string[] {
+		if (!this.#dirty && this.#cachedWidth === width) return this.#cachedLines;
+		this.#cachedWidth = width;
+		this.#dirty = false;
+
+		const lines: string[] = [];
+
+		// Header line: ✓ Explore  Find all code that references...
+		const icon = this.#statusIcon(this.#status);
+		const desc = this.#description ? `  ${theme.fg("dim", this.#description)}` : "";
+		lines.push(`${icon} ${theme.fg("toolTitle", theme.bold(this.#label))}${desc}`);
+
+		// Child tool history with inner tree branches
+		for (let i = 0; i < this.#toolHistory.length; i++) {
+			const entry = this.#toolHistory[i];
+			const isLast = i === this.#toolHistory.length - 1;
+			const branch = getTreeBranch(isLast, theme);
+			const childIcon = this.#statusIcon(entry.status);
+			const toolLabel = this.#childToolLabel(entry);
+			const line = `${theme.fg("dim", branch)} ${childIcon} ${toolLabel}`;
+			lines.push(line);
+		}
+
+		this.#cachedLines = lines;
+		return lines;
+	}
+
+	invalidate(): void {
+		this.#dirty = true;
+	}
+
+	// --- ToolExecutionHandle ---
+
+	updateArgs(): void {}
+
+	updateResult(result: any, isPartial?: boolean): void {
+		if (isPartial) {
+			const progress = result?.details?.progress as Array<{ toolHistory?: ToolHistoryEntry[] }> | undefined;
+			if (progress?.[0]?.toolHistory) {
+				this.#toolHistory = progress[0].toolHistory;
+				this.#dirty = true;
+			}
+			return;
+		}
+		this.#status = result?.isError ? "error" : "success";
+		// Final result may also carry toolHistory
+		const progress = result?.details?.progress as Array<{ toolHistory?: ToolHistoryEntry[] }> | undefined;
+		if (progress?.[0]?.toolHistory) {
+			this.#toolHistory = progress[0].toolHistory;
+		}
+		this.#dirty = true;
+	}
+
+	setArgsComplete(): void {}
+	setExpanded(): void {}
+
+	// --- Private ---
+
+	#statusIcon(status: "pending" | "success" | "error" | "running"): string {
+		switch (status) {
+			case "success":
+				return theme.fg("success", theme.status.success);
+			case "error":
+				return theme.fg("error", theme.status.error);
+			case "running":
+				return theme.fg("dim", theme.status.pending);
+			default:
+				return theme.fg("dim", theme.status.pending);
+		}
+	}
+
+	#childToolLabel(entry: ToolHistoryEntry): string {
+		const name = theme.fg("toolTitle", theme.bold(this.#prettyToolName(entry.tool)));
+		const args = entry.args ? `  ${theme.fg("dim", entry.args)}` : "";
+		return `${name}${args}`;
+	}
+
+	#prettyToolName(name: string): string {
+		// Capitalize first letter: grep → Grep, read → Read
+		return name.charAt(0).toUpperCase() + name.slice(1);
+	}
+}
+
+export class CodeModeGroupComponent implements Component, ToolExecutionHandle {
+	#header: Text;
+	#logsText: Text;
+	#orderedSubTools: Component[] = [];
+	#entries = new Map<string, { toolCallId: string; component: ToolExecutionComponent }>();
+	#readEntries = new Map<string, ReadEntry>();
+	#intent = "";
+	#expanded = false;
+	#logs: string[] = [];
+	#done = false;
+	#ui: TUI;
+	#spinnerFrames: string[];
+	#spinnerFrame = 0;
+	#spinnerInterval?: NodeJS.Timeout;
+
+	constructor(ui: TUI) {
+		this.#ui = ui;
+		this.#header = new Text("", 0, 0);
+		this.#logsText = new Text("", 0, 0);
+		this.#spinnerFrames = getSymbolTheme().spinnerFrames;
+		this.#startSpinner();
+		this.#updateHeader();
+	}
+
+	// --- Component ---
+
+	render(width: number): string[] {
+		const lines: string[] = [];
+
+		// Spacer
+		lines.push("");
+
+		// Header
+		lines.push(...this.#header.render(width));
+
+		// Sub-tools with tree connectors
+		const subToolWidth = Math.max(1, width - TREE_PREFIX_WIDTH);
+		for (let i = 0; i < this.#orderedSubTools.length; i++) {
+			const isLast = i === this.#orderedSubTools.length - 1;
+			const tool = this.#orderedSubTools[i];
+			const toolLines = tool.render(subToolWidth);
+
+			const branch = getTreeBranch(isLast, theme);
+			const cont = getTreeContinuePrefix(isLast, theme);
+			const branchPfx = `   ${theme.fg("dim", branch)} `;
+			const contPfx = `   ${theme.fg("dim", cont)}`;
+
+			let firstContent = true;
+			const contentLines: string[] = [];
+			for (const line of toolLines) {
+				// Skip leading empty lines (from Spacer(1) in ToolExecutionComponent)
+				if (firstContent && !line.trim()) continue;
+
+				if (firstContent) {
+					contentLines.push(`${branchPfx}${line}`);
+					firstContent = false;
+				} else {
+					contentLines.push(line.trim() ? `${contPfx}${line}` : "");
+				}
+			}
+			// Only emit if the sub-tool produced visible content
+			if (!firstContent) {
+				lines.push(...contentLines);
+			}
+		}
+
+		// Logs
+		lines.push(...this.#logsText.render(width));
+
+		return lines;
+	}
+
+	invalidate(): void {
+		this.#header.invalidate?.();
+		this.#logsText.invalidate?.();
+		for (const tool of this.#orderedSubTools) {
+			tool.invalidate?.();
+		}
+	}
+
+	// --- ToolExecutionHandle (no-ops on the group itself) ---
+
+	updateArgs(_args: any, _toolCallId?: string): void {}
+
+	updateResult(
+		_result: {
+			content: Array<{ type: string; text?: string; data?: string; mimeType?: string }>;
+			details?: any;
+			isError?: boolean;
+		},
+		_isPartial?: boolean,
+		_toolCallId?: string,
+	): void {}
+
+	setArgsComplete(_toolCallId?: string): void {}
+
+	setExpanded(expanded: boolean): void {
+		this.#expanded = expanded;
+		for (const entry of this.#entries.values()) {
+			entry.component.setExpanded(expanded);
+		}
+	}
+
+	// --- Sub-tool management ---
+
+	addSubTool(
+		toolCallId: string,
+		toolName: string,
+		args: any,
+		tool: AgentTool | undefined,
+		options: ToolExecutionOptions,
+		ui: TUI,
+		cwd: string,
+	): ToolExecutionHandle {
+		if (toolName === "read") {
+			return this.#addReadItem(toolCallId, args);
+		}
+		if (SUBAGENT_TOOLS.has(toolName)) {
+			const component = new SubagentComponent(toolName, args as Record<string, unknown>);
+			this.#orderedSubTools.push(component);
+			return component;
+		}
+
+		const component = new ToolExecutionComponent(toolName, args, options, tool, ui, cwd, { compact: true });
+		component.setExpanded(this.#expanded);
+		this.#entries.set(toolCallId, { toolCallId, component });
+		this.#orderedSubTools.push(component);
+		return component;
+	}
+
+	getSubTool(toolCallId: string): ToolExecutionHandle | undefined {
+		return this.#entries.get(toolCallId)?.component;
+	}
+
+	// --- Read items (flat, no sub-tree) ---
+
+	#addReadItem(toolCallId: string, args: any): ToolExecutionHandle {
+		const readArgs = args as { path?: string; file_path?: string; offset?: number; limit?: number };
+		const text = new Text("", 0, 0);
+		const entry: ReadEntry = {
+			path: readArgs.file_path || readArgs.path || "",
+			offset: readArgs.offset,
+			limit: readArgs.limit,
+			status: "pending",
+			text,
+		};
+		this.#readEntries.set(toolCallId, entry);
+		this.#orderedSubTools.push(text);
+		this.#updateReadDisplay(entry);
+
+		return {
+			updateArgs: (newArgs: any, _toolCallId?: string) => {
+				const a = newArgs as { path?: string; file_path?: string; offset?: number; limit?: number };
+				entry.path = a.file_path || a.path || entry.path;
+				entry.offset = a.offset ?? entry.offset;
+				entry.limit = a.limit ?? entry.limit;
+				this.#updateReadDisplay(entry);
+			},
+			updateResult: (result: any, isPartial?: boolean, _toolCallId?: string) => {
+				if (isPartial) return;
+				entry.status = result.isError ? "error" : "success";
+				this.#updateReadDisplay(entry);
+			},
+			setArgsComplete: () => {},
+			setExpanded: () => {},
+		};
+	}
+
+	#updateReadDisplay(entry: ReadEntry): void {
+		const statusIcon =
+			entry.status === "success"
+				? theme.fg("success", theme.status.success)
+				: entry.status === "error"
+					? theme.fg("error", theme.status.error)
+					: theme.fg("dim", theme.status.pending);
+		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}` : ""}`);
+		}
+		entry.text.setText(`${statusIcon} ${theme.fg("toolTitle", theme.bold("Read"))} ${pathDisplay}`.trimEnd());
+	}
+
+	// --- Public setters ---
+
+	setIntent(intent: string): void {
+		this.#intent = intent;
+		this.#updateHeader();
+	}
+
+	setLogs(logs: string[]): void {
+		this.#logs = logs;
+		this.#updateLogs();
+	}
+
+	setDone(): void {
+		this.#done = true;
+		this.#stopSpinner();
+		this.#updateHeader();
+	}
+
+	// --- Rendering ---
+
+	#updateHeader(): void {
+		const icon = this.#done
+			? theme.fg("success", theme.status.success)
+			: theme.fg("accent", this.#spinnerFrames[this.#spinnerFrame] ?? theme.format.bullet);
+		const intent = this.#intent || "Running";
+		this.#header.setText(` ${icon} ${theme.fg("muted", intent)}`);
+	}
+
+	#startSpinner(): void {
+		if (this.#spinnerInterval) return;
+		this.#spinnerInterval = setInterval(() => {
+			if (this.#done) return;
+			this.#spinnerFrame = (this.#spinnerFrame + 1) % this.#spinnerFrames.length;
+			this.#updateHeader();
+			this.#ui.requestRender();
+		}, 80);
+	}
+
+	#stopSpinner(): void {
+		if (this.#spinnerInterval) {
+			clearInterval(this.#spinnerInterval);
+			this.#spinnerInterval = undefined;
+		}
+	}
+
+	#updateLogs(): void {
+		if (this.#logs.length === 0) {
+			this.#logsText.setText("");
+			return;
+		}
+		const lines = this.#logs.map(log => `   ${theme.tree.vertical} ${theme.fg("dim", log)}`);
+		this.#logsText.setText(lines.join("\n"));
+	}
+}

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

@@ -0,0 +1,51 @@
+import { Box, Markdown, Spacer, Text } from "@nghyane/arcane-tui";
+import { getMarkdownTheme, theme } from "../../modes/theme/theme";
+import type { CompactionSummaryMessage } from "../../session/messages";
+
+/**
+ * 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 {
+	#expanded = false;
+
+	constructor(private readonly message: CompactionSummaryMessage) {
+		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 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));
+
+		if (this.#expanded) {
+			const header = `**Compacted from ${tokenStr} tokens**\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", `Compacted from ${tokenStr} tokens (ctrl+o to expand)`), 0, 0),
+			);
+			if (this.message.shortSummary) {
+				this.addChild(new Text(theme.fg("customMessageText", this.message.shortSummary), 0, 1));
+			}
+		}
+	}
+}

package/src/modes/components/countdown-timer.ts

@@ -0,0 +1,46 @@
+/**
+ * Reusable countdown timer for dialog components.
+ */
+import type { TUI } from "@nghyane/arcane-tui";
+
+export class CountdownTimer {
+	#intervalId: NodeJS.Timeout | undefined;
+	#remainingSeconds: number;
+	readonly #initialMs: number;
+
+	constructor(
+		timeoutMs: number,
+		private tui: TUI | undefined,
+		private onTick: (seconds: number) => void,
+		private onExpire: () => void,
+	) {
+		this.#initialMs = timeoutMs;
+		this.#remainingSeconds = Math.ceil(timeoutMs / 1000);
+		this.onTick(this.#remainingSeconds);
+
+		this.#intervalId = setInterval(() => {
+			this.#remainingSeconds--;
+			this.onTick(this.#remainingSeconds);
+			this.tui?.requestRender();
+
+			if (this.#remainingSeconds <= 0) {
+				this.dispose();
+				this.onExpire();
+			}
+		}, 1000);
+	}
+
+	/** Reset the countdown to its initial value */
+	reset(): void {
+		this.#remainingSeconds = Math.ceil(this.#initialMs / 1000);
+		this.onTick(this.#remainingSeconds);
+		this.tui?.requestRender();
+	}
+
+	dispose(): void {
+		if (this.#intervalId) {
+			clearInterval(this.#intervalId);
+			this.#intervalId = undefined;
+		}
+	}
+}

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

@@ -0,0 +1,181 @@
+import { Editor, type KeyId, matchesKey, parseKittySequence } from "@nghyane/arcane-tui";
+
+/**
+ * Custom editor that handles Escape and Ctrl+C keys for coding-agent
+ */
+export class CustomEditor extends Editor {
+	onEscape?: () => void;
+	shouldBypassAutocompleteOnEscape?: () => boolean;
+	onCtrlC?: () => void;
+	onCtrlD?: () => void;
+	onShiftTab?: () => void;
+	onCtrlP?: () => void;
+	onShiftCtrlP?: () => void;
+	onCtrlL?: () => void;
+	onCtrlR?: () => void;
+	onCtrlO?: () => void;
+	onCtrlT?: () => void;
+	onCtrlG?: () => void;
+	onCtrlZ?: () => void;
+	onQuestionMark?: () => void;
+	onCapsLock?: () => void;
+	onAltP?: () => void;
+	/** Called when Alt+Shift+C is pressed to copy prompt to clipboard. */
+	onCopyPrompt?: () => void;
+	/** Called when Ctrl+V is pressed. Returns true if handled (image found), false to fall through to text paste. */
+	onCtrlV?: () => Promise<boolean>;
+	/** Called when Alt+Up is pressed (dequeue keybinding). */
+	onAltUp?: () => void;
+
+	/** Custom key handlers from extensions */
+	#customKeyHandlers = new Map<KeyId, () => void>();
+
+	/**
+	 * Register a custom key handler. Extensions use this for shortcuts.
+	 */
+	setCustomKeyHandler(key: KeyId, handler: () => void): void {
+		this.#customKeyHandlers.set(key, handler);
+	}
+
+	/**
+	 * Remove a custom key handler.
+	 */
+	removeCustomKeyHandler(key: KeyId): void {
+		this.#customKeyHandlers.delete(key);
+	}
+
+	/**
+	 * Clear all custom key handlers.
+	 */
+	clearCustomKeyHandlers(): void {
+		this.#customKeyHandlers.clear();
+	}
+
+	handleInput(data: string): void {
+		const parsed = parseKittySequence(data);
+		if (parsed && (parsed.modifier & 64) !== 0 && this.onCapsLock) {
+			// Caps Lock is modifier bit 64
+			this.onCapsLock();
+			return;
+		}
+
+		// Intercept Ctrl+V for image paste (async - fires and handles result)
+		if (matchesKey(data, "ctrl+v") && this.onCtrlV) {
+			void this.onCtrlV();
+			return;
+		}
+
+		// Intercept Ctrl+G for external editor
+		if (matchesKey(data, "ctrl+g") && this.onCtrlG) {
+			this.onCtrlG();
+			return;
+		}
+
+		// Intercept Alt+P for quick model switching
+		if (matchesKey(data, "alt+p") && this.onAltP) {
+			this.onAltP();
+			return;
+		}
+
+		// Intercept Ctrl+Z for suspend
+		if (matchesKey(data, "ctrl+z") && this.onCtrlZ) {
+			this.onCtrlZ();
+			return;
+		}
+
+		// Intercept Ctrl+T for thinking block visibility toggle
+		if (matchesKey(data, "ctrl+t") && this.onCtrlT) {
+			this.onCtrlT();
+			return;
+		}
+
+		// Intercept Ctrl+L for model selector
+		if (matchesKey(data, "ctrl+l") && this.onCtrlL) {
+			this.onCtrlL();
+			return;
+		}
+
+		// Intercept Ctrl+R for history search
+		if (matchesKey(data, "ctrl+r") && this.onCtrlR) {
+			this.onCtrlR();
+			return;
+		}
+
+		// Intercept Ctrl+O for tool output expansion
+		if (matchesKey(data, "ctrl+o") && this.onCtrlO) {
+			this.onCtrlO();
+			return;
+		}
+
+		// Intercept Shift+Ctrl+P for backward model cycling (check before Ctrl+P)
+		if ((matchesKey(data, "shift+ctrl+p") || matchesKey(data, "ctrl+shift+p")) && this.onShiftCtrlP) {
+			this.onShiftCtrlP();
+			return;
+		}
+
+		// Intercept Ctrl+P for model cycling
+		if (matchesKey(data, "ctrl+p") && this.onCtrlP) {
+			this.onCtrlP();
+			return;
+		}
+
+		// Intercept Shift+Tab for thinking level cycling
+		if (matchesKey(data, "shift+tab") && this.onShiftTab) {
+			this.onShiftTab();
+			return;
+		}
+
+		// Intercept Escape key.
+		// Default behavior keeps autocomplete dismissal, but parent can prioritize global escape handling.
+		if ((matchesKey(data, "escape") || matchesKey(data, "esc")) && this.onEscape) {
+			if (!this.isShowingAutocomplete() || this.shouldBypassAutocompleteOnEscape?.()) {
+				this.onEscape();
+				return;
+			}
+		}
+
+		// Intercept Ctrl+C
+		if (matchesKey(data, "ctrl+c") && this.onCtrlC) {
+			this.onCtrlC();
+			return;
+		}
+
+		// Intercept Ctrl+D (only when editor is empty)
+		if (matchesKey(data, "ctrl+d")) {
+			if (this.getText().length === 0 && this.onCtrlD) {
+				this.onCtrlD();
+			}
+			// Always consume Ctrl+D (don't pass to parent)
+			return;
+		}
+
+		// Intercept Alt+Up for dequeue (restore queued message to editor)
+		if (matchesKey(data, "alt+up") && this.onAltUp) {
+			this.onAltUp();
+			return;
+		}
+
+		// Intercept Alt+Shift+C to copy prompt to clipboard
+		if (matchesKey(data, "alt+shift+c") && this.onCopyPrompt) {
+			this.onCopyPrompt();
+			return;
+		}
+
+		// Intercept ? when editor is empty to show hotkeys
+		if (data === "?" && this.getText().length === 0 && this.onQuestionMark) {
+			this.onQuestionMark();
+			return;
+		}
+
+		// Check custom key handlers (extensions)
+		for (const [keyId, handler] of this.#customKeyHandlers) {
+			if (matchesKey(data, keyId)) {
+				handler();
+				return;
+			}
+		}
+
+		// Pass to parent for normal handling
+		super.handleInput(data);
+	}
+}