@nghyane/arcane 0.1.0

package/src/modes/components/extensions/types.ts

@@ -0,0 +1,191 @@
+/**
+ * Types for the Extension Control Center dashboard.
+ */
+import type { SourceMeta } from "../../../capability/types";
+
+/**
+ * Extension kinds matching capability types.
+ */
+export type ExtensionKind =
+	| "extension-module"
+	| "skill"
+	| "rule"
+	| "tool"
+	| "mcp"
+	| "prompt"
+	| "instruction"
+	| "context-file"
+	| "hook"
+	| "slash-command";
+
+/**
+ * Extension state (active, disabled, or shadowed).
+ */
+export type ExtensionState = "active" | "disabled" | "shadowed";
+
+/**
+ * Reason why an extension is disabled.
+ */
+export type DisabledReason = "provider-disabled" | "item-disabled" | "shadowed";
+
+/**
+ * Unified extension representation for the dashboard.
+ * Normalizes all capability types into a common shape.
+ */
+export interface Extension {
+	/** Unique ID: `${kind}:${name}` */
+	id: string;
+	/** Extension kind */
+	kind: ExtensionKind;
+	/** Extension name */
+	name: string;
+	/** Display name (may differ from name) */
+	displayName: string;
+	/** Description if available */
+	description?: string;
+	/** Trigger pattern (slash command, glob, regex) */
+	trigger?: string;
+	/** Absolute path to source file */
+	path: string;
+	/** Source metadata */
+	source: {
+		provider: string;
+		providerName: string;
+		level: "user" | "project" | "native";
+	};
+	/** Current state */
+	state: ExtensionState;
+	/** Reason for disabled state */
+	disabledReason?: DisabledReason;
+	/** If shadowed, what shadows it */
+	shadowedBy?: string;
+	/** Raw item data for inspector */
+	raw: unknown;
+}
+
+/**
+ * Tree node types for sidebar hierarchy.
+ */
+export type TreeNodeType = "provider" | "kind" | "item";
+
+/**
+ * Sidebar tree node.
+ */
+export interface TreeNode {
+	/** Unique ID */
+	id: string;
+	/** Display label */
+	label: string;
+	/** Node type (provider can be toggled, kind groups items) */
+	type: TreeNodeType;
+	/** Whether this node/provider is enabled */
+	enabled: boolean;
+	/** Whether collapsed */
+	collapsed: boolean;
+	/** Child nodes */
+	children: TreeNode[];
+	/** Extension count (for display) */
+	count?: number;
+}
+
+/**
+ * Flattened tree item for navigation.
+ */
+export interface FlatTreeItem {
+	node: TreeNode;
+	depth: number;
+	index: number;
+}
+
+/**
+ * Focus region in the tabbed dashboard.
+ */
+export type FocusRegion = "tabs" | "list";
+
+/**
+ * Provider tab representation.
+ */
+export interface ProviderTab {
+	/** Provider ID (or "all" for the ALL tab) */
+	id: string;
+	/** Display label */
+	label: string;
+	/** Whether provider is enabled (always true for "all") */
+	enabled: boolean;
+	/** Extension count for this provider */
+	count: number;
+}
+
+/**
+ * Tabbed dashboard state.
+ */
+export interface DashboardState {
+	/** Provider tabs */
+	tabs: ProviderTab[];
+	/** Active tab index */
+	activeTabIndex: number;
+
+	/** All extensions (unfiltered) */
+	extensions: Extension[];
+	/** Extensions filtered by active tab */
+	tabFiltered: Extension[];
+	/** Extensions filtered by search (applied after tab filter) */
+	searchFiltered: Extension[];
+	/** Current search query */
+	searchQuery: string;
+
+	/** Selected index in main list */
+	listIndex: number;
+	/** Scroll offset for main list */
+	scrollOffset: number;
+
+	/** Currently selected extension for inspector */
+	selected: Extension | null;
+}
+
+/**
+ * @deprecated Use FocusRegion instead
+ */
+export type FocusPane = "sidebar" | "main" | "inspector";
+
+/**
+ * Callbacks from dashboard to parent.
+ */
+export interface DashboardCallbacks {
+	/** Called when provider is toggled */
+	onProviderToggle: (providerId: string, enabled: boolean) => void;
+	/** Called when extension item is toggled */
+	onExtensionToggle: (extensionId: string, enabled: boolean) => void;
+	/** Called when dashboard is closed */
+	onClose: () => void;
+}
+
+/**
+ * Create extension ID from kind and name.
+ */
+export function makeExtensionId(kind: ExtensionKind, name: string): string {
+	return `${kind}:${name}`;
+}
+
+/**
+ * Parse extension ID into kind and name.
+ */
+export function parseExtensionId(id: string): { kind: ExtensionKind; name: string } | null {
+	const colonIdx = id.indexOf(":");
+	if (colonIdx === -1) return null;
+	return {
+		kind: id.slice(0, colonIdx) as ExtensionKind,
+		name: id.slice(colonIdx + 1),
+	};
+}
+
+/**
+ * Map SourceMeta to extension source shape.
+ */
+export function sourceFromMeta(meta: SourceMeta): Extension["source"] {
+	return {
+		provider: meta.provider,
+		providerName: meta.providerName,
+		level: meta.level,
+	};
+}

package/src/modes/components/footer.ts

@@ -0,0 +1,315 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+import { type Component, padding, truncateToWidth, visibleWidth } from "@nghyane/arcane-tui";
+import { isEnoent } from "@nghyane/arcane-utils";
+import { getProjectDir } from "@nghyane/arcane-utils/dirs";
+import { theme } from "../../modes/theme/theme";
+import type { AgentSession } from "../../session/agent-session";
+import { shortenPath } from "../../tools/render-utils";
+
+/**
+ * Sanitize text for display in a single-line status.
+ * Removes newlines, tabs, carriage returns, and other control characters.
+ */
+function sanitizeStatusText(text: string): string {
+	// Replace newlines, tabs, carriage returns with space, then collapse multiple spaces
+	return text
+		.replace(/[\r\n\t]/g, " ")
+		.replace(/ +/g, " ")
+		.trim();
+}
+
+/** Find the git root by walking up from cwd. Returns path and content of .git/HEAD if found. */
+async function findGitHeadPath(): Promise<{ path: string; content: string } | null> {
+	let dir = getProjectDir();
+	while (true) {
+		const gitHeadPath = path.join(dir, ".git", "HEAD");
+		try {
+			const content = await Bun.file(gitHeadPath).text();
+			return { path: gitHeadPath, content };
+		} catch (err) {
+			if (!isEnoent(err)) throw err;
+		}
+		const parent = path.dirname(dir);
+		if (parent === dir) {
+			return null;
+		}
+		dir = parent;
+	}
+}
+
+/**
+ * Footer component that shows pwd, token stats, and context usage
+ */
+export class FooterComponent implements Component {
+	#cachedBranch: string | null | undefined = undefined; // undefined = not checked yet, null = not in git repo, string = branch name
+	#gitWatcher: fs.FSWatcher | null = null;
+	#onBranchChange: (() => void) | null = null;
+	#autoCompactEnabled: boolean = true;
+	#extensionStatuses: Map<string, string> = new Map();
+
+	constructor(private readonly session: AgentSession) {}
+
+	setAutoCompactEnabled(enabled: boolean): void {
+		this.#autoCompactEnabled = enabled;
+	}
+
+	/**
+	 * Set extension status text to display in the footer.
+	 * Text is sanitized (newlines/tabs replaced with spaces) and truncated to terminal width.
+	 * ANSI escape codes for styling are preserved.
+	 * @param key - Unique key to identify this status
+	 * @param text - Status text, or undefined to clear
+	 */
+	setExtensionStatus(key: string, text: string | undefined): void {
+		if (text === undefined) {
+			this.#extensionStatuses.delete(key);
+		} else {
+			this.#extensionStatuses.set(key, text);
+		}
+	}
+
+	/**
+	 * Set up a file watcher on .git/HEAD to detect branch changes.
+	 * Call the provided callback when branch changes.
+	 */
+	watchBranch(onBranchChange: () => void): void {
+		this.#onBranchChange = onBranchChange;
+		this.#setupGitWatcher();
+	}
+
+	#setupGitWatcher(): void {
+		// Clean up existing watcher
+		if (this.#gitWatcher) {
+			this.#gitWatcher.close();
+			this.#gitWatcher = null;
+		}
+
+		findGitHeadPath().then(result => {
+			if (!result) {
+				return;
+			}
+
+			try {
+				this.#gitWatcher = fs.watch(result.path, () => {
+					this.#cachedBranch = undefined; // Invalidate cache
+					if (this.#onBranchChange) {
+						this.#onBranchChange();
+					}
+				});
+			} catch {
+				// Silently fail if we can't watch
+			}
+		});
+	}
+
+	/**
+	 * Clean up the file watcher
+	 */
+	dispose(): void {
+		if (this.#gitWatcher) {
+			this.#gitWatcher.close();
+			this.#gitWatcher = null;
+		}
+	}
+
+	invalidate(): void {
+		// Invalidate cached branch so it gets re-read on next render
+		this.#cachedBranch = undefined;
+	}
+
+	/**
+	 * Get current git branch by reading .git/HEAD directly.
+	 * Returns null if not in a git repo, branch name otherwise.
+	 */
+	#getCurrentBranch(): string | null {
+		// Return cached value if available
+		if (this.#cachedBranch !== undefined) {
+			return this.#cachedBranch;
+		}
+
+		// Note: fire-and-forget async call - will return undefined on first call
+		// This is acceptable since it's a cached value that will update on next render
+		findGitHeadPath().then(result => {
+			if (!result) {
+				this.#cachedBranch = null;
+				if (this.#onBranchChange) {
+					this.#onBranchChange();
+				}
+				return;
+			}
+			const content = result.content.trim();
+
+			if (content.startsWith("ref: refs/heads/")) {
+				this.#cachedBranch = content.slice(16);
+			} else {
+				this.#cachedBranch = "detached";
+			}
+			if (this.#onBranchChange) {
+				this.#onBranchChange();
+			}
+		});
+
+		// Return undefined while loading (will show on next render once loaded)
+		return null;
+	}
+
+	render(width: number): string[] {
+		const state = this.session.state;
+
+		// Calculate cumulative usage from ALL session entries (not just post-compaction messages)
+		let totalInput = 0;
+		let totalOutput = 0;
+		let totalCacheRead = 0;
+		let totalCacheWrite = 0;
+		let totalCost = 0;
+
+		for (const entry of this.session.sessionManager.getEntries()) {
+			if (entry.type === "message" && entry.message.role === "assistant") {
+				totalInput += entry.message.usage.input;
+				totalOutput += entry.message.usage.output;
+				totalCacheRead += entry.message.usage.cacheRead;
+				totalCacheWrite += entry.message.usage.cacheWrite;
+				totalCost += entry.message.usage.cost.total;
+			}
+		}
+
+		// Calculate context usage from session (handles compaction correctly).
+		// After compaction, tokens are unknown until the next LLM response.
+		const contextUsage = this.session.getContextUsage();
+		const contextWindow = contextUsage?.contextWindow ?? state.model?.contextWindow ?? 0;
+		const contextPercentValue = contextUsage?.percent ?? 0;
+		const contextPercent = contextUsage?.percent !== null ? contextPercentValue.toFixed(1) : "?";
+
+		// Format token counts (similar to web-ui)
+		const formatTokens = (count: number): string => {
+			if (count < 1000) return count.toString();
+			if (count < 10000) return `${(count / 1000).toFixed(1)}k`;
+			if (count < 1000000) return `${Math.round(count / 1000)}k`;
+			if (count < 10000000) return `${(count / 1000000).toFixed(1)}M`;
+			return `${Math.round(count / 1000000)}M`;
+		};
+
+		// Replace home directory with ~
+		let pwd = shortenPath(getProjectDir());
+
+		// Add git branch if available
+		const branch = this.#getCurrentBranch();
+		if (branch) {
+			pwd = `${pwd} (${branch})`;
+		}
+
+		// Truncate path if too long to fit width
+		if (pwd.length > width) {
+			const half = Math.floor(width / 2) - 1;
+			if (half > 1) {
+				const start = pwd.slice(0, half);
+				const end = pwd.slice(-(half - 1));
+				pwd = `${start}…${end}`;
+			} else {
+				pwd = pwd.slice(0, Math.max(1, width));
+			}
+		}
+
+		// Build stats line
+		const statsParts = [];
+		if (totalInput) statsParts.push(`↑${formatTokens(totalInput)}`);
+		if (totalOutput) statsParts.push(`↓${formatTokens(totalOutput)}`);
+		if (totalCacheRead) statsParts.push(`R${formatTokens(totalCacheRead)}`);
+		if (totalCacheWrite) statsParts.push(`W${formatTokens(totalCacheWrite)}`);
+
+		// Show cost with "(sub)" indicator if using OAuth subscription
+		const usingSubscription = state.model ? this.session.modelRegistry.isUsingOAuth(state.model) : false;
+		if (totalCost || usingSubscription) {
+			const costStr = `$${totalCost.toFixed(3)}${usingSubscription ? " (sub)" : ""}`;
+			statsParts.push(costStr);
+		}
+
+		// Colorize context percentage based on usage
+		let contextPercentStr: string;
+		const autoIndicator = this.#autoCompactEnabled ? " (auto)" : "";
+		const contextPercentDisplay =
+			contextPercent === "?"
+				? `?/${formatTokens(contextWindow)}${autoIndicator}`
+				: `${contextPercent}%/${formatTokens(contextWindow)}${autoIndicator}`;
+		if (contextPercentValue > 90) {
+			contextPercentStr = theme.fg("error", contextPercentDisplay);
+		} else if (contextPercentValue > 70) {
+			contextPercentStr = theme.fg("warning", contextPercentDisplay);
+		} else {
+			contextPercentStr = contextPercentDisplay;
+		}
+		statsParts.push(contextPercentStr);
+
+		let statsLeft = statsParts.join(" ");
+
+		// Add model name on the right side, plus thinking level if model supports it
+		const modelName = state.model?.id || "no-model";
+
+		// Add thinking level hint if model supports reasoning and thinking is enabled
+		let rightSide = modelName;
+		if (state.model?.reasoning) {
+			const thinkingLevel = state.thinkingLevel || "off";
+			if (thinkingLevel !== "off") {
+				rightSide = `${modelName} • ${thinkingLevel}`;
+			}
+		}
+
+		let statsLeftWidth = visibleWidth(statsLeft);
+		const rightSideWidth = visibleWidth(rightSide);
+
+		// If statsLeft is too wide, truncate it
+		if (statsLeftWidth > width) {
+			// Truncate statsLeft to fit width (no room for right side)
+			const plainStatsLeft = statsLeft.replace(/\x1b\[[0-9;]*m/g, "");
+			statsLeft = `${plainStatsLeft.substring(0, width - 1)}…`;
+			statsLeftWidth = visibleWidth(statsLeft);
+		}
+
+		// Calculate available space for padding (minimum 2 spaces between stats and model)
+		const minPadding = 2;
+		const totalNeeded = statsLeftWidth + minPadding + rightSideWidth;
+
+		let statsLine: string;
+		if (totalNeeded <= width) {
+			// Both fit - add padding to right-align model
+			const pad = padding(width - statsLeftWidth - rightSideWidth);
+			statsLine = statsLeft + pad + rightSide;
+		} else {
+			// Need to truncate right side
+			const availableForRight = width - statsLeftWidth - minPadding;
+			if (availableForRight > 3) {
+				// Truncate to fit (strip ANSI codes for length calculation, then truncate raw string)
+				const plainRightSide = rightSide.replace(/\x1b\[[0-9;]*m/g, "");
+				const truncatedPlain = plainRightSide.substring(0, availableForRight);
+				// For simplicity, just use plain truncated version (loses color, but fits)
+				const pad = padding(width - statsLeftWidth - truncatedPlain.length);
+				statsLine = statsLeft + pad + truncatedPlain;
+			} else {
+				// Not enough space for right side at all
+				statsLine = statsLeft;
+			}
+		}
+
+		// Apply dim to each part separately. statsLeft may contain color codes (for context %)
+		// that end with a reset, which would clear an outer dim wrapper. So we dim the parts
+		// before and after the colored section independently.
+		const dimStatsLeft = theme.fg("dim", statsLeft);
+		const remainder = statsLine.slice(statsLeft.length); // padding + rightSide
+		const dimRemainder = theme.fg("dim", remainder);
+
+		const lines = [theme.fg("dim", pwd), dimStatsLeft + dimRemainder];
+
+		// Add extension statuses on a single line, sorted by key alphabetically
+		if (this.#extensionStatuses.size > 0) {
+			const sortedStatuses = Array.from(this.#extensionStatuses.entries())
+				.sort(([a], [b]) => a.localeCompare(b))
+				.map(([, text]) => sanitizeStatusText(text));
+			const statusLine = sortedStatuses.join(" ");
+			// Truncate to terminal width with dim ellipsis for consistency with footer style
+			lines.push(truncateToWidth(statusLine, width));
+		}
+
+		return lines;
+	}
+}

package/src/modes/components/history-search.ts

@@ -0,0 +1,157 @@
+import {
+	type Component,
+	Container,
+	Ellipsis,
+	Input,
+	matchesKey,
+	padding,
+	Spacer,
+	Text,
+	truncateToWidth,
+	visibleWidth,
+} from "@nghyane/arcane-tui";
+import { theme } from "../../modes/theme/theme";
+import type { HistoryEntry, HistoryStorage } from "../../session/history-storage";
+import { DynamicBorder } from "./dynamic-border";
+
+class HistoryResultsList implements Component {
+	#results: HistoryEntry[] = [];
+	#selectedIndex = 0;
+	#maxVisible = 10;
+
+	setResults(results: HistoryEntry[], selectedIndex: number): void {
+		this.#results = results;
+		this.#selectedIndex = selectedIndex;
+	}
+
+	setSelectedIndex(selectedIndex: number): void {
+		this.#selectedIndex = selectedIndex;
+	}
+
+	invalidate(): void {
+		// No cached state to invalidate currently
+	}
+
+	render(width: number): string[] {
+		const lines: string[] = [];
+
+		if (this.#results.length === 0) {
+			lines.push(theme.fg("muted", "  No matching history"));
+			return lines;
+		}
+
+		const startIndex = Math.max(
+			0,
+			Math.min(this.#selectedIndex - Math.floor(this.#maxVisible / 2), this.#results.length - this.#maxVisible),
+		);
+		const endIndex = Math.min(startIndex + this.#maxVisible, this.#results.length);
+
+		for (let i = startIndex; i < endIndex; i++) {
+			const entry = this.#results[i];
+			const isSelected = i === this.#selectedIndex;
+
+			const cursorSymbol = `${theme.nav.cursor} `;
+			const cursorWidth = visibleWidth(cursorSymbol);
+			const cursor = isSelected ? theme.fg("accent", cursorSymbol) : padding(cursorWidth);
+			const maxWidth = width - cursorWidth;
+
+			const normalized = entry.prompt.replace(/\s+/g, " ").trim();
+			const truncated = truncateToWidth(normalized, maxWidth);
+			lines.push(cursor + (isSelected ? theme.bold(truncated) : truncated));
+		}
+
+		if (startIndex > 0 || endIndex < this.#results.length) {
+			const scrollText = `  (${this.#selectedIndex + 1}/${this.#results.length})`;
+			lines.push(theme.fg("muted", truncateToWidth(scrollText, width, Ellipsis.Omit)));
+		}
+
+		return lines;
+	}
+}
+
+export class HistorySearchComponent extends Container {
+	#historyStorage: HistoryStorage;
+	#searchInput: Input;
+	#results: HistoryEntry[] = [];
+	#selectedIndex = 0;
+	#resultsList: HistoryResultsList;
+	#onSelect: (prompt: string) => void;
+	#onCancel: () => void;
+	#resultLimit = 100;
+
+	constructor(historyStorage: HistoryStorage, onSelect: (prompt: string) => void, onCancel: () => void) {
+		super();
+		this.#historyStorage = historyStorage;
+		this.#onSelect = onSelect;
+		this.#onCancel = onCancel;
+
+		this.#searchInput = new Input();
+		this.#searchInput.onSubmit = () => {
+			const selected = this.#results[this.#selectedIndex];
+			if (selected) {
+				this.#onSelect(selected.prompt);
+			}
+		};
+		this.#searchInput.onEscape = () => {
+			this.#onCancel();
+		};
+
+		this.#resultsList = new HistoryResultsList();
+
+		this.addChild(new Spacer(1));
+		this.addChild(new Text(theme.bold("Search History (Ctrl+R)"), 1, 0));
+		this.addChild(new Spacer(1));
+		this.addChild(new DynamicBorder());
+		this.addChild(new Spacer(1));
+		this.addChild(this.#searchInput);
+		this.addChild(new Spacer(1));
+		this.addChild(this.#resultsList);
+		this.addChild(new Spacer(1));
+		this.addChild(new Text(theme.fg("muted", "up/down navigate  enter select  esc cancel"), 1, 0));
+		this.addChild(new Spacer(1));
+		this.addChild(new DynamicBorder());
+
+		this.#updateResults();
+	}
+
+	handleInput(keyData: string): void {
+		if (matchesKey(keyData, "up")) {
+			if (this.#results.length === 0) return;
+			this.#selectedIndex = Math.max(0, this.#selectedIndex - 1);
+			this.#resultsList.setSelectedIndex(this.#selectedIndex);
+			return;
+		}
+
+		if (matchesKey(keyData, "down")) {
+			if (this.#results.length === 0) return;
+			this.#selectedIndex = Math.min(this.#results.length - 1, this.#selectedIndex + 1);
+			this.#resultsList.setSelectedIndex(this.#selectedIndex);
+			return;
+		}
+
+		if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
+			const selected = this.#results[this.#selectedIndex];
+			if (selected) {
+				this.#onSelect(selected.prompt);
+			}
+			return;
+		}
+
+		if (matchesKey(keyData, "escape") || matchesKey(keyData, "esc")) {
+			this.#onCancel();
+			return;
+		}
+
+		this.#searchInput.handleInput(keyData);
+		this.#updateResults();
+	}
+
+	#updateResults(): void {
+		const query = this.#searchInput.getValue().trim();
+		this.#results = query
+			? this.#historyStorage.search(query, this.#resultLimit)
+			: this.#historyStorage.getRecent(this.#resultLimit);
+		this.#selectedIndex = 0;
+		this.#resultsList.setResults(this.#results, this.#selectedIndex);
+	}
+}