@nghyane/arcane 0.1.0

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

@@ -0,0 +1,91 @@
+import type { TextContent } from "@nghyane/arcane-ai";
+import type { Component } from "@nghyane/arcane-tui";
+import { Box, Container, Markdown, Spacer, Text } from "@nghyane/arcane-tui";
+import type { MessageRenderer } from "../../extensibility/extensions/types";
+import { getMarkdownTheme, theme } from "../../modes/theme/theme";
+import type { CustomMessage } from "../../session/messages";
+
+/**
+ * Component that renders a custom message entry from extensions.
+ * Uses distinct styling to differentiate from user messages.
+ */
+export class CustomMessageComponent extends Container {
+	#box: Box;
+	#customComponent?: Component;
+	#expanded = false;
+
+	constructor(
+		private readonly message: CustomMessage<unknown>,
+		private readonly customRenderer?: MessageRenderer,
+	) {
+		super();
+
+		this.addChild(new Spacer(1));
+
+		// Create box with custom background (used for default rendering)
+		this.#box = new Box(1, 1, t => theme.bg("customMessageBg", t));
+
+		this.#rebuild();
+	}
+
+	setExpanded(expanded: boolean): void {
+		if (this.#expanded !== expanded) {
+			this.#expanded = expanded;
+			this.#rebuild();
+		}
+	}
+
+	override invalidate(): void {
+		super.invalidate();
+		this.#rebuild();
+	}
+
+	#rebuild(): void {
+		// Remove previous content component
+		if (this.#customComponent) {
+			this.removeChild(this.#customComponent);
+			this.#customComponent = undefined;
+		}
+		this.removeChild(this.#box);
+
+		// Try custom renderer first - it handles its own styling
+		if (this.customRenderer) {
+			try {
+				const component = this.customRenderer(this.message, { expanded: this.#expanded }, theme);
+				if (component) {
+					this.#customComponent = component;
+					this.addChild(component);
+					return;
+				}
+			} catch {
+				// Fall through to default rendering
+			}
+		}
+
+		// Default rendering uses our box
+		this.addChild(this.#box);
+		this.#box.clear();
+
+		// Default rendering: label + content
+		const label = theme.fg("customMessageLabel", theme.bold(`[${this.message.customType}]`));
+		this.#box.addChild(new Text(label, 0, 0));
+		this.#box.addChild(new Spacer(1));
+
+		// Extract text content
+		let text: string;
+		if (typeof this.message.content === "string") {
+			text = this.message.content;
+		} else {
+			text = this.message.content
+				.filter((c): c is TextContent => c.type === "text")
+				.map(c => c.text)
+				.join("\n");
+		}
+
+		this.#box.addChild(
+			new Markdown(text, 0, 0, getMarkdownTheme(), {
+				color: (value: string) => theme.fg("customMessageText", value),
+			}),
+		);
+	}
+}

package/src/modes/components/diff.ts

@@ -0,0 +1,186 @@
+import * as Diff from "diff";
+import { theme } from "../../modes/theme/theme";
+import { replaceTabs } from "../../tools/render-utils";
+
+/** SGR dim on / normal intensity — additive, preserves fg/bg colors. */
+const DIM = "\x1b[2m";
+const DIM_OFF = "\x1b[22m";
+
+/**
+ * Visualize leading whitespace (indentation) with dim glyphs.
+ * Tabs become ` → ` and spaces become `·`. Only affects whitespace
+ * before the first non-whitespace character; remaining tabs in code
+ * content are replaced with spaces (like replaceTabs).
+ */
+function visualizeIndent(text: string): string {
+	const match = text.match(/^([ \t]+)/);
+	if (!match) return replaceTabs(text);
+	const indent = match[1];
+	const rest = text.slice(indent.length);
+	// Normalize: collapse 3-space groups (tab-width) into tab arrows,
+	// then handle remaining tabs and lone spaces.
+	const normalized = indent.replaceAll("\t", "   ");
+	let visible = "";
+	let pos = 0;
+	while (pos < normalized.length) {
+		if (pos + 3 <= normalized.length && normalized.slice(pos, pos + 3) === "   ") {
+			visible += `${DIM} → ${DIM_OFF}`;
+			pos += 3;
+		} else {
+			visible += `${DIM}·${DIM_OFF}`;
+			pos++;
+		}
+	}
+	return `${visible}${replaceTabs(rest)}`;
+}
+
+/**
+ * Parse diff line to extract prefix, line number, and content.
+ * Supported formats: "+123|content" (canonical) and "+123 content" (legacy).
+ */
+function parseDiffLine(line: string): { prefix: string; lineNum: string; content: string } | null {
+	const canonical = line.match(/^([+-\s])(\s*\d+)\|(.*)$/);
+	if (canonical) {
+		return { prefix: canonical[1], lineNum: canonical[2], content: canonical[3] };
+	}
+	const legacy = line.match(/^([+-\s])(?:(\s*\d+)\s)?(.*)$/);
+	if (!legacy) return null;
+	return { prefix: legacy[1], lineNum: legacy[2] ?? "", content: legacy[3] };
+}
+
+/**
+ * Compute word-level diff and render with inverse on changed parts.
+ * Uses diffWords which groups whitespace with adjacent words for cleaner highlighting.
+ * Strips leading whitespace from inverse to avoid highlighting indentation.
+ */
+function renderIntraLineDiff(oldContent: string, newContent: string): { removedLine: string; addedLine: string } {
+	const wordDiff = Diff.diffWords(oldContent, newContent);
+
+	let removedLine = "";
+	let addedLine = "";
+	let isFirstRemoved = true;
+	let isFirstAdded = true;
+
+	for (const part of wordDiff) {
+		if (part.removed) {
+			let value = part.value;
+			// Strip leading whitespace from the first removed part
+			if (isFirstRemoved) {
+				const leadingWs = value.match(/^(\s*)/)?.[1] || "";
+				value = value.slice(leadingWs.length);
+				removedLine += leadingWs;
+				isFirstRemoved = false;
+			}
+			if (value) {
+				removedLine += theme.inverse(value);
+			}
+		} else if (part.added) {
+			let value = part.value;
+			// Strip leading whitespace from the first added part
+			if (isFirstAdded) {
+				const leadingWs = value.match(/^(\s*)/)?.[1] || "";
+				value = value.slice(leadingWs.length);
+				addedLine += leadingWs;
+				isFirstAdded = false;
+			}
+			if (value) {
+				addedLine += theme.inverse(value);
+			}
+		} else {
+			removedLine += part.value;
+			addedLine += part.value;
+		}
+	}
+
+	return { removedLine, addedLine };
+}
+
+export interface RenderDiffOptions {
+	/** File path (unused, kept for API compatibility) */
+	filePath?: string;
+}
+
+/**
+ * Render a diff string with colored lines and intra-line change highlighting.
+ * - Context lines: dim/gray
+ * - Removed lines: red, with inverse on changed tokens
+ * - Added lines: green, with inverse on changed tokens
+ */
+export function renderDiff(diffText: string, _options: RenderDiffOptions = {}): string {
+	const lines = diffText.split("\n");
+	const result: string[] = [];
+
+	const formatLine = (prefix: string, lineNum: string, content: string): string => {
+		if (lineNum.trim().length === 0) {
+			return `${prefix}${content}`;
+		}
+		return `${prefix}${lineNum}|${content}`;
+	};
+
+	let i = 0;
+	while (i < lines.length) {
+		const line = lines[i];
+		const parsed = parseDiffLine(line);
+
+		if (!parsed) {
+			result.push(theme.fg("toolDiffContext", line));
+			i++;
+			continue;
+		}
+
+		if (parsed.prefix === "-") {
+			// Collect consecutive removed lines
+			const removedLines: { lineNum: string; content: string }[] = [];
+			while (i < lines.length) {
+				const p = parseDiffLine(lines[i]);
+				if (!p || p.prefix !== "-") break;
+				removedLines.push({ lineNum: p.lineNum, content: p.content });
+				i++;
+			}
+
+			// Collect consecutive added lines
+			const addedLines: { lineNum: string; content: string }[] = [];
+			while (i < lines.length) {
+				const p = parseDiffLine(lines[i]);
+				if (!p || p.prefix !== "+") break;
+				addedLines.push({ lineNum: p.lineNum, content: p.content });
+				i++;
+			}
+
+			// Only do intra-line diffing when there's exactly one removed and one added line
+			// (indicating a single line modification). Otherwise, show lines as-is.
+			if (removedLines.length === 1 && addedLines.length === 1) {
+				const removed = removedLines[0];
+				const added = addedLines[0];
+
+				const { removedLine, addedLine } = renderIntraLineDiff(
+					replaceTabs(removed.content),
+					replaceTabs(added.content),
+				);
+
+				result.push(theme.fg("toolDiffRemoved", formatLine("-", removed.lineNum, visualizeIndent(removedLine))));
+				result.push(theme.fg("toolDiffAdded", formatLine("+", added.lineNum, visualizeIndent(addedLine))));
+			} else {
+				// Show all removed lines first, then all added lines
+				for (const removed of removedLines) {
+					result.push(
+						theme.fg("toolDiffRemoved", formatLine("-", removed.lineNum, visualizeIndent(removed.content))),
+					);
+				}
+				for (const added of addedLines) {
+					result.push(theme.fg("toolDiffAdded", formatLine("+", added.lineNum, visualizeIndent(added.content))));
+				}
+			}
+		} else if (parsed.prefix === "+") {
+			// Standalone added line
+			result.push(theme.fg("toolDiffAdded", formatLine("+", parsed.lineNum, visualizeIndent(parsed.content))));
+			i++;
+		} else {
+			// Context line
+			result.push(theme.fg("toolDiffContext", formatLine(" ", parsed.lineNum, visualizeIndent(parsed.content))));
+			i++;
+		}
+	}
+
+	return result.join("\n");
+}

package/src/modes/components/dynamic-border.ts

@@ -0,0 +1,25 @@
+import type { Component } from "@nghyane/arcane-tui";
+import { theme } from "../../modes/theme/theme";
+
+/**
+ * Dynamic border component that adjusts to viewport width.
+ *
+ * Note: When used from hooks loaded via jiti, the global `theme` may be undefined
+ * because jiti creates a separate module cache. Always pass an explicit color
+ * function when using DynamicBorder in components exported for hook use.
+ */
+export class DynamicBorder implements Component {
+	#color: (str: string) => string;
+
+	constructor(color: (str: string) => string = str => theme.fg("border", str)) {
+		this.#color = color;
+	}
+
+	invalidate(): void {
+		// No cached state to invalidate currently
+	}
+
+	render(width: number): string[] {
+		return [this.#color(theme.boxSharp.horizontal.repeat(Math.max(1, width)))];
+	}
+}

package/src/modes/components/extensions/extension-dashboard.ts

@@ -0,0 +1,325 @@
+/**
+ * ExtensionDashboard - Tabbed layout for the Extension Control Center.
+ *
+ * Layout:
+ * - Top: Horizontal tab bar for provider selection
+ * - Body: 2-column grid (inventory list | preview panel)
+ *
+ * Navigation:
+ * - TAB/Shift+TAB: Cycle through provider tabs
+ * - Up/Down/j/k: Navigate list
+ * - Space: Toggle selected item (or master switch)
+ * - Esc: Close dashboard (clears search first if active)
+ */
+import {
+	type Component,
+	Container,
+	matchesKey,
+	padding,
+	Spacer,
+	Text,
+	truncateToWidth,
+	visibleWidth,
+} from "@nghyane/arcane-tui";
+import { Settings } from "../../../config/settings";
+import { DynamicBorder } from "../../../modes/components/dynamic-border";
+import { theme } from "../../../modes/theme/theme";
+import { ExtensionList } from "./extension-list";
+import { InspectorPanel } from "./inspector-panel";
+import { applyFilter, createInitialState, filterByProvider, refreshState, toggleProvider } from "./state-manager";
+import type { DashboardState } from "./types";
+
+export class ExtensionDashboard extends Container {
+	#state!: DashboardState;
+	#mainList!: ExtensionList;
+	#inspector!: InspectorPanel;
+
+	onClose?: () => void;
+
+	private constructor(
+		private readonly cwd: string,
+		private readonly settings: Settings | null,
+		private readonly terminalHeight: number,
+	) {
+		super();
+	}
+
+	static async create(
+		cwd: string,
+		settings: Settings | null = null,
+		terminalHeight?: number,
+	): Promise<ExtensionDashboard> {
+		const dashboard = new ExtensionDashboard(cwd, settings, terminalHeight ?? process.stdout.rows ?? 24);
+		await dashboard.#init();
+		return dashboard;
+	}
+
+	async #init(): Promise<void> {
+		const sm = this.settings ?? (await Settings.init());
+		const disabledIds = sm ? ((sm.get("disabledExtensions") as string[]) ?? []) : [];
+		this.#state = await createInitialState(this.cwd, disabledIds);
+
+		// Calculate max visible items based on terminal height
+		// Reserve ~10 lines for header, tabs, help text, borders
+		const maxVisible = Math.max(5, Math.floor((this.terminalHeight - 10) / 2));
+
+		// Create main list - always focused
+		this.#mainList = new ExtensionList(
+			this.#state.searchFiltered,
+			{
+				onSelectionChange: ext => {
+					this.#state.selected = ext;
+					this.#inspector.setExtension(ext);
+				},
+				onToggle: (extensionId, enabled) => {
+					this.#handleExtensionToggle(extensionId, enabled);
+				},
+				onMasterToggle: providerId => {
+					this.#handleProviderToggle(providerId);
+				},
+				masterSwitchProvider: this.#getActiveProviderId(),
+			},
+			maxVisible,
+		);
+		this.#mainList.setFocused(true);
+
+		// Create inspector
+		this.#inspector = new InspectorPanel();
+		if (this.#state.selected) {
+			this.#inspector.setExtension(this.#state.selected);
+		}
+
+		this.#buildLayout();
+	}
+
+	#getActiveProviderId(): string | null {
+		const tab = this.#state.tabs[this.#state.activeTabIndex];
+		return tab && tab.id !== "all" ? tab.id : null;
+	}
+
+	#buildLayout(): void {
+		this.clear();
+
+		// Top border
+		this.addChild(new DynamicBorder());
+
+		// Title
+		this.addChild(new Text(theme.bold(theme.fg("accent", " Extension Control Center")), 0, 0));
+
+		// Tab bar
+		this.addChild(new Text(this.#renderTabBar(), 0, 0));
+		this.addChild(new Spacer(1));
+
+		// 2-column body with height limit
+		// Reserve ~8 lines for header, tabs, help text, borders
+		const bodyMaxHeight = Math.max(5, this.terminalHeight - 8);
+		this.addChild(new TwoColumnBody(this.#mainList, this.#inspector, bodyMaxHeight));
+
+		this.addChild(new Spacer(1));
+		this.addChild(new Text(theme.fg("dim", " ↑/↓: navigate  Space: toggle  Tab: next provider  Esc: close"), 0, 0));
+
+		// Bottom border
+		this.addChild(new DynamicBorder());
+	}
+
+	#renderTabBar(): string {
+		const parts: string[] = [" "];
+
+		for (let i = 0; i < this.#state.tabs.length; i++) {
+			const tab = this.#state.tabs[i];
+			const isActive = i === this.#state.activeTabIndex;
+			const isEmpty = tab.count === 0 && tab.id !== "all";
+			const isDisabled = !tab.enabled && tab.id !== "all";
+
+			// Build label with count
+			let label = tab.label;
+			if (tab.count > 0) {
+				label += ` (${tab.count})`;
+			}
+
+			const displayLabel = isDisabled ? `${theme.status.disabled} ${label}` : label;
+
+			if (isActive) {
+				// Active tab: background highlight
+				parts.push(theme.bg("selectedBg", ` ${displayLabel} `));
+			} else if (isDisabled) {
+				// Disabled provider: dim
+				parts.push(theme.fg("dim", ` ${displayLabel} `));
+			} else if (isEmpty) {
+				// Empty enabled provider: very dim, unselectable
+				parts.push(theme.fg("dim", ` ${label} `));
+			} else {
+				// Normal enabled provider
+				parts.push(theme.fg("muted", ` ${label} `));
+			}
+		}
+
+		return parts.join("");
+	}
+
+	#handleProviderToggle(providerId: string): void {
+		toggleProvider(providerId);
+		void this.#refreshFromState();
+	}
+
+	#handleExtensionToggle(extensionId: string, enabled: boolean): void {
+		const sm = this.settings ?? Settings.instance;
+		if (!sm) return;
+
+		const disabled = ((sm.get("disabledExtensions") as string[]) ?? []).slice();
+		if (enabled) {
+			const index = disabled.indexOf(extensionId);
+			if (index !== -1) {
+				disabled.splice(index, 1);
+				sm.set("disabledExtensions", disabled);
+			}
+		} else {
+			if (!disabled.includes(extensionId)) {
+				disabled.push(extensionId);
+				sm.set("disabledExtensions", disabled);
+			}
+		}
+
+		void this.#refreshFromState();
+	}
+
+	async #refreshFromState(): Promise<void> {
+		// Remember current tab ID before refresh
+		const currentTabId = this.#state.tabs[this.#state.activeTabIndex]?.id;
+
+		const sm = this.settings ?? Settings.instance;
+		const disabledIds = sm ? ((sm.get("disabledExtensions") as string[]) ?? []) : [];
+		this.#state = await refreshState(this.#state, this.cwd, disabledIds);
+
+		// Find the same tab in the new (re-sorted) list
+		if (currentTabId) {
+			const newIndex = this.#state.tabs.findIndex(t => t.id === currentTabId);
+			if (newIndex >= 0) {
+				this.#state.activeTabIndex = newIndex;
+			}
+		}
+
+		this.#mainList.setExtensions(this.#state.searchFiltered);
+		this.#mainList.setMasterSwitchProvider(this.#getActiveProviderId());
+
+		if (this.#state.selected) {
+			this.#inspector.setExtension(this.#state.selected);
+		}
+
+		this.#buildLayout();
+	}
+
+	#switchTab(direction: 1 | -1): void {
+		const numTabs = this.#state.tabs.length;
+		if (numTabs === 0) return;
+
+		// Find next selectable tab (skip empty+enabled providers)
+		let nextIndex = this.#state.activeTabIndex;
+		for (let i = 0; i < numTabs; i++) {
+			nextIndex = (nextIndex + direction + numTabs) % numTabs;
+			const tab = this.#state.tabs[nextIndex];
+			const isEmptyEnabled = tab.count === 0 && tab.enabled && tab.id !== "all";
+			if (!isEmptyEnabled) break;
+		}
+		this.#state.activeTabIndex = nextIndex;
+
+		// Re-filter for new tab
+		const tab = this.#state.tabs[this.#state.activeTabIndex];
+		this.#state.tabFiltered = filterByProvider(this.#state.extensions, tab.id);
+		this.#state.searchFiltered = applyFilter(this.#state.tabFiltered, this.#state.searchQuery);
+		this.#state.listIndex = 0;
+		this.#state.scrollOffset = 0;
+		this.#state.selected = this.#state.searchFiltered[0] ?? null;
+
+		// Update list
+		this.#mainList.setExtensions(this.#state.searchFiltered);
+		this.#mainList.setMasterSwitchProvider(this.#getActiveProviderId());
+		this.#mainList.resetSelection();
+
+		if (this.#state.selected) {
+			this.#inspector.setExtension(this.#state.selected);
+		}
+
+		this.#buildLayout();
+	}
+
+	handleInput(data: string): void {
+		// Ctrl+C - close immediately
+		if (matchesKey(data, "ctrl+c")) {
+			this.onClose?.();
+			return;
+		}
+
+		// Escape - clear search first, then close
+		if (matchesKey(data, "escape") || matchesKey(data, "esc")) {
+			if (this.#state.searchQuery.length > 0) {
+				this.#state.searchQuery = "";
+				this.#state.searchFiltered = this.#state.tabFiltered;
+				this.#mainList.setExtensions(this.#state.searchFiltered);
+				this.#mainList.clearSearch();
+				this.#buildLayout();
+				return;
+			}
+			this.onClose?.();
+			return;
+		}
+
+		// Tab/Shift+Tab: Cycle through tabs
+		if (matchesKey(data, "tab")) {
+			this.#switchTab(1);
+			return;
+		}
+		if (matchesKey(data, "shift+tab")) {
+			this.#switchTab(-1);
+			return;
+		}
+
+		// All other input goes to the list
+		this.#mainList.handleInput(data);
+
+		// Sync search query back to state
+		const query = this.#mainList.getSearchQuery();
+		if (query !== this.#state.searchQuery) {
+			this.#state.searchQuery = query;
+			this.#state.searchFiltered = applyFilter(this.#state.tabFiltered, query);
+		}
+	}
+}
+
+/**
+ * Two-column body component for side-by-side rendering.
+ */
+class TwoColumnBody implements Component {
+	constructor(
+		private readonly leftPane: ExtensionList,
+		private readonly rightPane: InspectorPanel,
+		private readonly maxHeight: number,
+	) {}
+
+	render(width: number): string[] {
+		const leftWidth = Math.floor(width * 0.5);
+		const rightWidth = width - leftWidth - 3;
+
+		const leftLines = this.leftPane.render(leftWidth);
+		const rightLines = this.rightPane.render(rightWidth);
+
+		// Limit to maxHeight lines
+		const numLines = Math.min(this.maxHeight, Math.max(leftLines.length, rightLines.length));
+		const combined: string[] = [];
+		const separator = theme.fg("dim", ` ${theme.boxSharp.vertical} `);
+
+		for (let i = 0; i < numLines; i++) {
+			const left = truncateToWidth(leftLines[i] ?? "", leftWidth);
+			const leftPadded = left + padding(Math.max(0, leftWidth - visibleWidth(left)));
+			const right = truncateToWidth(rightLines[i] ?? "", rightWidth);
+			combined.push(leftPadded + separator + right);
+		}
+
+		return combined;
+	}
+
+	invalidate(): void {
+		this.leftPane.invalidate?.();
+		this.rightPane.invalidate?.();
+	}
+}