@nghyane/arcane 0.1.0

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

@@ -0,0 +1,529 @@
+import type { ThinkingLevel } from "@nghyane/arcane-agent";
+import {
+	Container,
+	matchesKey,
+	type SelectItem,
+	SelectList,
+	type SettingItem,
+	SettingsList,
+	Spacer,
+	type Tab,
+	TabBar,
+	type TabBarTheme,
+	Text,
+} from "@nghyane/arcane-tui";
+import { type SettingPath, settings } from "../../config/settings";
+import type {
+	SettingTab,
+	StatusLinePreset,
+	StatusLineSegmentId,
+	StatusLineSeparatorStyle,
+} from "../../config/settings-schema";
+import { SETTING_TABS, TAB_METADATA } from "../../config/settings-schema";
+import { getCurrentThemeName, getSelectListTheme, getSettingsListTheme, theme } from "../../modes/theme/theme";
+import { DynamicBorder } from "./dynamic-border";
+import { PluginSettingsComponent } from "./plugin-settings";
+import { getSettingsForTab, type SettingDef } from "./settings-defs";
+import { getPreset } from "./status-line/presets";
+
+function getTabBarTheme(): TabBarTheme {
+	return {
+		label: text => theme.bold(theme.fg("accent", text)),
+		activeTab: text => theme.bold(theme.bg("selectedBg", theme.fg("text", text))),
+		inactiveTab: text => theme.fg("muted", text),
+		hint: text => theme.fg("dim", text),
+	};
+}
+
+/**
+ * A submenu component for selecting from a list of options.
+ */
+class SelectSubmenu extends Container {
+	#selectList: SelectList;
+	#previewText: Text | null = null;
+	#previewUpdateRequestId: number = 0;
+
+	constructor(
+		title: string,
+		description: string,
+		options: ReadonlyArray<SelectItem>,
+		currentValue: string,
+		onSelect: (value: string) => void,
+		onCancel: () => void,
+		onSelectionChange?: (value: string) => void | Promise<void>,
+		private readonly getPreview?: () => string,
+	) {
+		super();
+
+		// Title
+		this.addChild(new Text(theme.bold(theme.fg("accent", title)), 0, 0));
+
+		// Description
+		if (description) {
+			this.addChild(new Spacer(1));
+			this.addChild(new Text(theme.fg("muted", description), 0, 0));
+		}
+
+		// Preview (if provided)
+		if (getPreview) {
+			this.addChild(new Spacer(1));
+			this.addChild(new Text(theme.fg("muted", "Preview:"), 0, 0));
+			this.#previewText = new Text(getPreview(), 0, 0);
+			this.addChild(this.#previewText);
+		}
+
+		// Spacer
+		this.addChild(new Spacer(1));
+
+		// Select list
+		this.#selectList = new SelectList(options, Math.min(options.length, 10), getSelectListTheme());
+
+		// Pre-select current value
+		const currentIndex = options.findIndex(o => o.value === currentValue);
+		if (currentIndex !== -1) {
+			this.#selectList.setSelectedIndex(currentIndex);
+		}
+
+		this.#selectList.onSelect = item => {
+			onSelect(item.value);
+		};
+
+		this.#selectList.onCancel = onCancel;
+
+		if (onSelectionChange) {
+			this.#selectList.onSelectionChange = item => {
+				const requestId = ++this.#previewUpdateRequestId;
+				const result = onSelectionChange(item.value);
+				if (result && typeof (result as Promise<void>).then === "function") {
+					void (result as Promise<void>).finally(() => {
+						if (requestId === this.#previewUpdateRequestId) {
+							this.#updatePreview();
+						}
+					});
+					return;
+				}
+				if (requestId === this.#previewUpdateRequestId) {
+					this.#updatePreview();
+				}
+			};
+		}
+
+		this.addChild(this.#selectList);
+
+		// Hint
+		this.addChild(new Spacer(1));
+		this.addChild(new Text(theme.fg("dim", "  Enter to select · Esc to go back"), 0, 0));
+	}
+
+	#updatePreview(): void {
+		if (this.#previewText && this.getPreview) {
+			this.#previewText.setText(this.getPreview());
+		}
+	}
+
+	handleInput(data: string): void {
+		this.#selectList.handleInput(data);
+	}
+}
+
+function getSettingsTabs(): Tab[] {
+	return [
+		...SETTING_TABS.map(id => {
+			const meta = TAB_METADATA[id];
+			const icon = theme.symbol(meta.icon as Parameters<typeof theme.symbol>[0]);
+			return { id, label: `${icon} ${meta.label}` };
+		}),
+		{ id: "plugins", label: `${theme.icon.package} Plugins` },
+	];
+}
+
+/**
+ * Dynamic context for settings that need runtime data.
+ * Some settings (like thinking level) are managed by the session, not Settings.
+ */
+export interface SettingsRuntimeContext {
+	/** Available thinking levels (from session) */
+	availableThinkingLevels: ThinkingLevel[];
+	/** Current thinking level (from session) */
+	thinkingLevel: ThinkingLevel;
+	/** Available themes */
+	availableThemes: string[];
+	/** Working directory for plugins tab */
+	cwd: string;
+}
+
+/** Status line settings subset for preview */
+export interface StatusLinePreviewSettings {
+	preset?: StatusLinePreset;
+	leftSegments?: StatusLineSegmentId[];
+	rightSegments?: StatusLineSegmentId[];
+	separator?: StatusLineSeparatorStyle;
+}
+
+export interface SettingsCallbacks {
+	/** Called when any setting value changes */
+	onChange: (path: SettingPath, newValue: unknown) => void;
+	/** Called for theme preview while browsing */
+	onThemePreview?: (theme: string) => void | Promise<void>;
+	/** Called for status line preview while configuring */
+	onStatusLinePreview?: (settings: StatusLinePreviewSettings) => void;
+	/** Get current rendered status line for inline preview */
+	getStatusLinePreview?: () => string;
+	/** Called when plugins change */
+	onPluginsChanged?: () => void;
+	/** Called when settings panel is closed */
+	onCancel: () => void;
+}
+
+/**
+ * Main tabbed settings selector component.
+ * Uses declarative settings definitions from settings-defs.ts.
+ */
+export class SettingsSelectorComponent extends Container {
+	#tabBar: TabBar;
+	#currentList: SettingsList | null = null;
+	#currentSubmenu: Container | null = null;
+	#pluginComponent: PluginSettingsComponent | null = null;
+	#statusPreviewContainer: Container | null = null;
+	#statusPreviewText: Text | null = null;
+	#currentTabId: SettingTab | "plugins" = "display";
+
+	constructor(
+		private readonly context: SettingsRuntimeContext,
+		private readonly callbacks: SettingsCallbacks,
+	) {
+		super();
+
+		// Add top border
+		this.addChild(new DynamicBorder());
+
+		// Tab bar
+		this.#tabBar = new TabBar("Settings", getSettingsTabs(), getTabBarTheme());
+		this.#tabBar.onTabChange = () => {
+			this.#switchToTab(this.#tabBar.getActiveTab().id as SettingTab | "plugins");
+		};
+		this.addChild(this.#tabBar);
+
+		// Spacer after tab bar
+		this.addChild(new Spacer(1));
+
+		// Initialize with first tab
+		this.#switchToTab("display");
+
+		// Add bottom border
+		this.addChild(new DynamicBorder());
+	}
+
+	#switchToTab(tabId: SettingTab | "plugins"): void {
+		this.#currentTabId = tabId;
+
+		// Remove current content
+		if (this.#currentList) {
+			this.removeChild(this.#currentList);
+			this.#currentList = null;
+		}
+		if (this.#pluginComponent) {
+			this.removeChild(this.#pluginComponent);
+			this.#pluginComponent = null;
+		}
+		if (this.#statusPreviewContainer) {
+			this.removeChild(this.#statusPreviewContainer);
+			this.#statusPreviewContainer = null;
+			this.#statusPreviewText = null;
+		}
+
+		// Remove bottom border temporarily
+		const bottomBorder = this.children[this.children.length - 1];
+		this.removeChild(bottomBorder);
+
+		if (tabId === "plugins") {
+			this.#showPluginsTab();
+		} else {
+			this.#showSettingsTab(tabId);
+		}
+
+		// Re-add bottom border
+		this.addChild(bottomBorder);
+	}
+
+	/**
+	 * Convert a setting definition to a SettingItem for the UI.
+	 */
+	#defToItem(def: SettingDef): SettingItem | null {
+		// Check condition
+		if (def.type === "boolean" && def.condition && !def.condition()) {
+			return null;
+		}
+
+		const currentValue = this.#getCurrentValue(def);
+
+		switch (def.type) {
+			case "boolean":
+				return {
+					id: def.path,
+					label: def.label,
+					description: def.description,
+					currentValue: currentValue ? "true" : "false",
+					values: ["true", "false"],
+				};
+
+			case "enum":
+				return {
+					id: def.path,
+					label: def.label,
+					description: def.description,
+					currentValue: currentValue as string,
+					values: [...def.values],
+				};
+
+			case "submenu":
+				return {
+					id: def.path,
+					label: def.label,
+					description: def.description,
+					currentValue: String(currentValue ?? ""),
+					submenu: (cv, done) => this.#createSubmenu(def, cv, done),
+				};
+		}
+	}
+
+	/**
+	 * Get the current value for a setting.
+	 */
+	#getCurrentValue(def: SettingDef): unknown {
+		return settings.get(def.path);
+	}
+
+	/**
+	 * Create a submenu for a submenu-type setting.
+	 */
+	#createSubmenu(
+		def: SettingDef & { type: "submenu" },
+		currentValue: string,
+		done: (value?: string) => void,
+	): Container {
+		let options = def.options;
+
+		// Special case: inject runtime options for thinking level
+		if (def.path === "defaultThinkingLevel") {
+			options = this.context.availableThinkingLevels.map(level => {
+				const baseOpt = options.find(o => o.value === level);
+				return baseOpt || { value: level, label: level };
+			});
+		} else if (def.path === "theme.dark" || def.path === "theme.light") {
+			options = this.context.availableThemes.map(t => ({ value: t, label: t }));
+		}
+
+		// Preview handlers
+		let onPreview: ((value: string) => void | Promise<void>) | undefined;
+		let onPreviewCancel: (() => void) | undefined;
+
+		const activeThemeBeforePreview = getCurrentThemeName() ?? currentValue;
+		if (def.path === "theme.dark" || def.path === "theme.light") {
+			onPreview = value => {
+				return this.callbacks.onThemePreview?.(value);
+			};
+			onPreviewCancel = () => {
+				this.callbacks.onThemePreview?.(activeThemeBeforePreview);
+			};
+		} else if (def.path === "statusLine.preset") {
+			onPreview = value => {
+				const presetDef = getPreset(
+					value as "default" | "minimal" | "compact" | "full" | "nerd" | "ascii" | "custom",
+				);
+				this.callbacks.onStatusLinePreview?.({
+					preset: value as StatusLinePreset,
+					leftSegments: presetDef.leftSegments,
+					rightSegments: presetDef.rightSegments,
+					separator: presetDef.separator,
+				});
+				this.#updateStatusPreview();
+			};
+			onPreviewCancel = () => {
+				const currentPreset = settings.get("statusLine.preset");
+				const presetDef = getPreset(currentPreset);
+				this.callbacks.onStatusLinePreview?.({
+					preset: currentPreset,
+					leftSegments: presetDef.leftSegments,
+					rightSegments: presetDef.rightSegments,
+					separator: presetDef.separator,
+				});
+				this.#updateStatusPreview();
+			};
+		} else if (def.path === "statusLine.separator") {
+			onPreview = value => {
+				this.callbacks.onStatusLinePreview?.({ separator: value as StatusLineSeparatorStyle });
+				this.#updateStatusPreview();
+			};
+			onPreviewCancel = () => {
+				const separator = settings.get("statusLine.separator");
+				this.callbacks.onStatusLinePreview?.({ separator });
+				this.#updateStatusPreview();
+			};
+		}
+
+		// Provide status line preview for theme selection
+		const isThemeSetting = def.path === "theme.dark" || def.path === "theme.light";
+		const getPreview = isThemeSetting ? this.callbacks.getStatusLinePreview : undefined;
+
+		return new SelectSubmenu(
+			def.label,
+			def.description,
+			options,
+			currentValue,
+			value => {
+				this.#setSettingValue(def.path, value);
+				this.callbacks.onChange(def.path, value);
+				done(value);
+			},
+			() => {
+				onPreviewCancel?.();
+				done();
+			},
+			onPreview,
+			getPreview,
+		);
+	}
+
+	/**
+	 * Set a setting value, handling type conversion.
+	 */
+	#setSettingValue(path: SettingPath, value: string): void {
+		// Handle number conversions
+		const currentValue = settings.get(path);
+		if (typeof currentValue === "number") {
+			settings.set(path, Number(value) as never);
+		} else if (typeof currentValue === "boolean") {
+			settings.set(path, (value === "true") as never);
+		} else {
+			settings.set(path, value as never);
+		}
+	}
+
+	/**
+	 * Show a settings tab using definitions.
+	 */
+	#showSettingsTab(tabId: SettingTab): void {
+		const defs = getSettingsForTab(tabId);
+		const items: SettingItem[] = [];
+
+		for (const def of defs) {
+			const item = this.#defToItem(def);
+			if (item) {
+				items.push(item);
+			}
+		}
+
+		// Add status line preview for status tab
+		if (tabId === "status") {
+			this.#statusPreviewContainer = new Container();
+			this.#statusPreviewContainer.addChild(new Spacer(1));
+			this.#statusPreviewContainer.addChild(new Text(theme.fg("muted", "Preview:"), 0, 0));
+			this.#statusPreviewText = new Text(this.#getStatusPreviewString(), 0, 0);
+			this.#statusPreviewContainer.addChild(this.#statusPreviewText);
+			this.#statusPreviewContainer.addChild(new Spacer(1));
+			this.addChild(this.#statusPreviewContainer);
+		}
+
+		this.#currentList = new SettingsList(
+			items,
+			10,
+			getSettingsListTheme(),
+			(id, newValue) => {
+				const def = defs.find(d => d.path === id);
+				if (!def) return;
+
+				const path = def.path;
+
+				if (def.type === "boolean") {
+					const boolValue = newValue === "true";
+					settings.set(path, boolValue as never);
+					this.callbacks.onChange(path, boolValue);
+
+					if (tabId === "status") {
+						this.#triggerStatusLinePreview();
+					}
+				} else if (def.type === "enum") {
+					settings.set(path, newValue as never);
+					this.callbacks.onChange(path, newValue);
+				}
+				// Submenu types are handled in createSubmenu
+			},
+			() => this.callbacks.onCancel(),
+		);
+
+		this.addChild(this.#currentList);
+	}
+
+	/**
+	 * Get the status line preview string.
+	 */
+	#getStatusPreviewString(): string {
+		if (this.callbacks.getStatusLinePreview) {
+			return this.callbacks.getStatusLinePreview();
+		}
+		return theme.fg("dim", "(preview not available)");
+	}
+
+	/**
+	 * Trigger status line preview with current settings.
+	 */
+	#triggerStatusLinePreview(): void {
+		const statusLineSettings: StatusLinePreviewSettings = {
+			preset: settings.get("statusLine.preset"),
+			leftSegments: settings.get("statusLine.leftSegments"),
+			rightSegments: settings.get("statusLine.rightSegments"),
+			separator: settings.get("statusLine.separator"),
+		};
+		this.callbacks.onStatusLinePreview?.(statusLineSettings);
+		this.#updateStatusPreview();
+	}
+
+	/**
+	 * Update the inline status preview text.
+	 */
+	#updateStatusPreview(): void {
+		if (this.#statusPreviewText && this.#currentTabId === "status") {
+			this.#statusPreviewText.setText(this.#getStatusPreviewString());
+		}
+	}
+
+	#showPluginsTab(): void {
+		this.#pluginComponent = new PluginSettingsComponent(this.context.cwd, {
+			onClose: () => this.callbacks.onCancel(),
+			onPluginChanged: () => this.callbacks.onPluginsChanged?.(),
+		});
+		this.addChild(this.#pluginComponent);
+	}
+
+	getFocusComponent(): SettingsList | PluginSettingsComponent {
+		// Return the current focusable component - one of these will always be set
+		return (this.#currentList || this.#pluginComponent)!;
+	}
+
+	handleInput(data: string): void {
+		// Handle tab switching first (tab, shift+tab, or left/right arrows)
+		if (
+			matchesKey(data, "tab") ||
+			matchesKey(data, "shift+tab") ||
+			matchesKey(data, "left") ||
+			matchesKey(data, "right")
+		) {
+			this.#tabBar.handleInput(data);
+			return;
+		}
+
+		// Escape at top level cancels
+		if ((matchesKey(data, "escape") || matchesKey(data, "esc")) && !this.#currentSubmenu) {
+			this.callbacks.onCancel();
+			return;
+		}
+
+		// Pass to current content
+		if (this.#currentList) {
+			this.#currentList.handleInput(data);
+		} else if (this.#pluginComponent) {
+			this.#pluginComponent.handleInput(data);
+		}
+	}
+}

package/src/modes/components/show-images-selector.ts

@@ -0,0 +1,45 @@
+import { Container, type SelectItem, SelectList } from "@nghyane/arcane-tui";
+import { getSelectListTheme } from "../../modes/theme/theme";
+import { DynamicBorder } from "./dynamic-border";
+
+/**
+ * Component that renders a show images selector with borders
+ */
+export class ShowImagesSelectorComponent extends Container {
+	#selectList: SelectList;
+
+	constructor(currentValue: boolean, onSelect: (show: boolean) => void, onCancel: () => void) {
+		super();
+
+		const items: SelectItem[] = [
+			{ value: "yes", label: "Yes", description: "Show images inline in terminal" },
+			{ value: "no", label: "No", description: "Show text placeholder instead" },
+		];
+
+		// Add top border
+		this.addChild(new DynamicBorder());
+
+		// Create selector
+		this.#selectList = new SelectList(items, 5, getSelectListTheme());
+
+		// Preselect current value
+		this.#selectList.setSelectedIndex(currentValue ? 0 : 1);
+
+		this.#selectList.onSelect = item => {
+			onSelect(item.value === "yes");
+		};
+
+		this.#selectList.onCancel = () => {
+			onCancel();
+		};
+
+		this.addChild(this.#selectList);
+
+		// Add bottom border
+		this.addChild(new DynamicBorder());
+	}
+
+	getSelectList(): SelectList {
+		return this.#selectList;
+	}
+}

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

@@ -0,0 +1,90 @@
+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 { getMarkdownTheme, theme } from "../../modes/theme/theme";
+import type { CustomMessage, SkillPromptDetails } from "../../session/messages";
+
+export class SkillMessageComponent extends Container {
+	#box: Box;
+	#contentComponent?: Component;
+	#expanded = false;
+
+	constructor(private readonly message: CustomMessage<SkillPromptDetails>) {
+		super();
+		this.addChild(new Spacer(1));
+
+		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 {
+		if (this.#contentComponent) {
+			this.removeChild(this.#contentComponent);
+			this.#contentComponent = undefined;
+		}
+
+		this.removeChild(this.#box);
+		this.addChild(this.#box);
+		this.#box.clear();
+
+		const label = theme.fg("customMessageLabel", theme.bold("[skill]"));
+		this.#box.addChild(new Text(label, 0, 0));
+		this.#box.addChild(new Spacer(1));
+
+		const details = this.message.details;
+		const args = details?.args?.trim();
+		const infoLines = [
+			`Skill: ${details?.name ?? "unknown"}`,
+			args ? `Args: ${args}` : undefined,
+			details?.path ? `Path: ${details.path}` : undefined,
+			typeof details?.lineCount === "number" ? `Prompt: ${details.lineCount} lines` : undefined,
+		].filter((line): line is string => Boolean(line));
+
+		this.#box.addChild(
+			new Markdown(infoLines.join("\n"), 0, 0, getMarkdownTheme(), {
+				color: (value: string) => theme.fg("customMessageText", value),
+			}),
+		);
+
+		if (!this.#expanded) {
+			return;
+		}
+
+		const text = this.#extractText();
+		if (!text) {
+			return;
+		}
+
+		this.#box.addChild(new Spacer(1));
+		const promptHeader = theme.fg("customMessageLabel", theme.bold("Prompt"));
+		this.#box.addChild(new Text(promptHeader, 0, 0));
+		this.#box.addChild(new Spacer(1));
+
+		this.#contentComponent = new Markdown(text, 0, 0, getMarkdownTheme(), {
+			color: (value: string) => theme.fg("customMessageText", value),
+		});
+		this.#box.addChild(this.#contentComponent);
+	}
+
+	#extractText(): string {
+		if (typeof this.message.content === "string") {
+			return this.message.content;
+		}
+		return this.message.content
+			.filter((c): c is TextContent => c.type === "text")
+			.map(c => c.text)
+			.join("\n");
+	}
+}

package/src/modes/components/status-line/index.ts

@@ -0,0 +1,4 @@
+export * from "./presets";
+export * from "./segments";
+export * from "./separators";
+export * from "./types";