miladyai 2.0.0-alpha.27

package/dist/tui/components/plugins-store-tab.js

@@ -0,0 +1,148 @@
+import { tuiTheme } from "../theme.js";
+import { Input, SelectList, getEditorKeybindings } from "@mariozechner/pi-tui";
+
+//#region src/tui/components/plugins-store-tab.ts
+/**
+* Plugin Store tab — browse and search the remote plugin registry,
+* install plugins directly from the TUI.
+*/
+var PluginStoreTab = class {
+	constructor(options) {
+		this.focused = false;
+		this.searchInput = new Input();
+		this.allItems = [];
+		this.loading = true;
+		this.installing = null;
+		this.installStatus = "";
+		this.searchTimeout = null;
+		this.options = options;
+		this.selectList = new SelectList([], 14, tuiTheme.selectList);
+		this.selectList.onCancel = () => options.onClose();
+		this.selectList.onSelect = (item) => {
+			this.handleSelect(item.value);
+		};
+		this.searchInput.setValue("");
+		this.loadTopPlugins();
+	}
+	/** Whether the tab is in an input-consuming state. Always false for store tab. */
+	isCapturingInput() {
+		return false;
+	}
+	async loadTopPlugins() {
+		this.loading = true;
+		this.options.requestRender();
+		try {
+			const plugins = await this.options.getRegistryPlugins();
+			this.updateList(plugins);
+		} catch {} finally {
+			this.loading = false;
+			this.options.requestRender();
+		}
+	}
+	updateList(plugins) {
+		this.allItems = plugins.map((p) => {
+			const installedBadge = p.installed ? tuiTheme.success(" ✓ installed") : "";
+			const version = p.latestVersion ? `v${p.latestVersion}` : "";
+			const stars = p.stars > 0 ? `★${p.stars}` : "";
+			return {
+				value: p.name,
+				label: `${p.name}${installedBadge}`,
+				description: [
+					p.description,
+					version,
+					stars
+				].filter(Boolean).join("  ")
+			};
+		});
+		this.selectList = new SelectList(this.allItems, 14, tuiTheme.selectList);
+		this.selectList.onCancel = () => this.options.onClose();
+		this.selectList.onSelect = (item) => {
+			this.handleSelect(item.value);
+		};
+	}
+	async handleSelect(name) {
+		if (this.installing) return;
+		if (this.options.isInstalled(name)) return;
+		this.installing = name;
+		this.installStatus = "installing…";
+		this.options.requestRender();
+		try {
+			const result = await this.options.installPlugin(name);
+			this.installStatus = result.success ? tuiTheme.success("✓ installed") : tuiTheme.error(`✗ ${result.message}`);
+		} catch (err) {
+			this.installStatus = tuiTheme.error(`✗ ${err instanceof Error ? err.message : String(err)}`);
+		} finally {
+			this.installing = null;
+			this.options.requestRender();
+			setTimeout(() => {
+				this.loadTopPlugins();
+			}, 1500);
+		}
+	}
+	scheduleSearch(query) {
+		if (this.searchTimeout) clearTimeout(this.searchTimeout);
+		this.searchTimeout = setTimeout(async () => {
+			this.loading = true;
+			this.options.requestRender();
+			try {
+				if (!query.trim()) {
+					await this.loadTopPlugins();
+					return;
+				}
+				const results = await this.options.searchPlugins(query);
+				this.updateList(results);
+			} catch {} finally {
+				this.loading = false;
+				this.options.requestRender();
+			}
+		}, 300);
+	}
+	handleInput(data) {
+		const kb = getEditorKeybindings();
+		if (kb.matches(data, "selectUp") || kb.matches(data, "selectDown") || kb.matches(data, "selectConfirm") || kb.matches(data, "selectCancel")) {
+			this.selectList.handleInput(data);
+			return;
+		}
+		const before = this.searchInput.getValue();
+		this.searchInput.handleInput(data);
+		const after = this.searchInput.getValue();
+		if (after !== before) this.scheduleSearch(after);
+	}
+	render(width) {
+		this.searchInput.focused = this.focused;
+		const lines = [...this.searchInput.render(width).map((l) => `  ${l}`), ""];
+		if (this.loading) {
+			lines.push(tuiTheme.dim("  Loading plugins from registry…"));
+			return lines;
+		}
+		if (this.installing) {
+			lines.push(`  ${tuiTheme.accent("Installing")} ${this.installing}… ${this.installStatus}`);
+			lines.push("");
+		} else if (this.installStatus) {
+			lines.push(`  ${this.installStatus}`);
+			lines.push("");
+		}
+		if (this.allItems.length === 0) {
+			const query = this.searchInput.getValue().trim();
+			if (query) lines.push(tuiTheme.dim(`  No plugins match "${query}".`));
+			else lines.push(tuiTheme.dim("  No plugins available."));
+		} else lines.push(...this.selectList.render(width));
+		lines.push("");
+		lines.push(tuiTheme.dim("  ↑↓ navigate • Enter details • type to search"));
+		return lines;
+	}
+	/** Cancel any pending debounced search. */
+	dispose() {
+		if (this.searchTimeout) {
+			clearTimeout(this.searchTimeout);
+			this.searchTimeout = null;
+		}
+	}
+	invalidate() {
+		this.searchInput.invalidate();
+		this.selectList.invalidate();
+	}
+};
+
+//#endregion
+export { PluginStoreTab };

package/dist/tui/components/settings-overlay.js

@@ -0,0 +1,61 @@
+import { tuiTheme } from "../theme.js";
+import { ModalFrame } from "./modal-frame.js";
+import { SettingsList } from "@mariozechner/pi-tui";
+
+//#region src/tui/components/settings-overlay.ts
+const settingsListTheme = {
+	label: (text, selected) => selected ? tuiTheme.accent(text) : text,
+	value: (text, selected) => selected ? tuiTheme.accent(text) : tuiTheme.muted(text),
+	description: (text) => tuiTheme.dim(text),
+	cursor: tuiTheme.accent("→ "),
+	hint: (text) => tuiTheme.dim(text)
+};
+/**
+* Settings overlay using pi-tui SettingsList.
+* Toggleable options for the TUI session.
+*/
+var SettingsOverlayComponent = class {
+	constructor(options) {
+		this.focused = false;
+		this.frame = new ModalFrame({
+			title: "Settings",
+			hint: "↑↓ navigate • Enter/Space toggle • Esc close"
+		});
+		this.list = new SettingsList([{
+			id: "thinking",
+			label: "Show thinking",
+			description: "Display model thinking/reasoning traces",
+			currentValue: options.showThinking ? "on" : "off",
+			values: ["on", "off"]
+		}, {
+			id: "toolExpand",
+			label: "Expand tool output",
+			description: "Show full tool/action output",
+			currentValue: options.toolExpand ? "on" : "off",
+			values: ["on", "off"]
+		}], 10, settingsListTheme, (id, newValue) => {
+			switch (id) {
+				case "thinking":
+					options.onToggleThinking(newValue === "on");
+					break;
+				case "toolExpand":
+					options.onToggleToolExpand(newValue === "on");
+					break;
+			}
+		}, () => {
+			options.onClose();
+		});
+	}
+	handleInput(data) {
+		this.list.handleInput(data);
+	}
+	render(width) {
+		return this.frame.render(width, this.list.render(width));
+	}
+	invalidate() {
+		this.list.invalidate();
+	}
+};
+
+//#endregion
+export { SettingsOverlayComponent };

package/dist/tui/components/status-bar.js

@@ -0,0 +1,64 @@
+import { tuiTheme } from "../theme.js";
+import { truncateToWidth, visibleWidth } from "@mariozechner/pi-tui";
+
+//#region src/tui/components/status-bar.ts
+/**
+* Format token counts compactly (similar to Pi TUI).
+*/
+function formatTokens(count) {
+	if (count < 1e3) return count.toString();
+	if (count < 1e4) return `${(count / 1e3).toFixed(1)}k`;
+	if (count < 1e6) return `${Math.round(count / 1e3)}k`;
+	return `${(count / 1e6).toFixed(1)}M`;
+}
+/**
+* Status bar showing pwd, token stats, and model info (Pi-style footer).
+*
+* Line 1: cwd (with ~ substitution)
+* Line 2: token stats (left) + model (right)
+*/
+var StatusBar = class {
+	constructor() {
+		this.data = {
+			modelId: "",
+			modelProvider: "",
+			inputTokens: 0,
+			outputTokens: 0,
+			isStreaming: false,
+			agentName: "milady"
+		};
+	}
+	update(partial) {
+		Object.assign(this.data, partial);
+	}
+	render(width) {
+		const safeWidth = Math.max(1, width);
+		const d = this.data;
+		let pwd = process.cwd();
+		const home = process.env.HOME || process.env.USERPROFILE;
+		if (home && pwd.startsWith(home)) pwd = `~${pwd.slice(home.length)}`;
+		const pwdLine = tuiTheme.dim(truncateToWidth(pwd, safeWidth, "..."));
+		const statsParts = [];
+		if (d.inputTokens) statsParts.push(`↑${formatTokens(d.inputTokens)}`);
+		if (d.outputTokens) statsParts.push(`↓${formatTokens(d.outputTokens)}`);
+		if (d.isStreaming) statsParts.push(tuiTheme.warning("● streaming"));
+		const statsLeft = statsParts.length > 0 ? statsParts.join(" ") : "";
+		const modelName = d.modelId ? `${d.modelProvider}/${d.modelId}` : "no model";
+		const dimLeft = tuiTheme.dim(statsLeft);
+		const dimRight = tuiTheme.dim(modelName);
+		const leftWidth = visibleWidth(dimLeft);
+		const rightWidth = visibleWidth(dimRight);
+		const minPad = 2;
+		let statsLine;
+		if (leftWidth + minPad + rightWidth <= safeWidth) statsLine = dimLeft + " ".repeat(safeWidth - leftWidth - rightWidth) + dimRight;
+		else if (leftWidth + minPad < safeWidth) {
+			const availRight = safeWidth - leftWidth - minPad;
+			statsLine = dimLeft + " ".repeat(minPad) + truncateToWidth(dimRight, availRight, "");
+		} else statsLine = truncateToWidth(dimLeft, safeWidth, "");
+		return [pwdLine, statsLine];
+	}
+	invalidate() {}
+};
+
+//#endregion
+export { StatusBar };

package/dist/tui/components/tool-execution.js

@@ -0,0 +1,68 @@
+import { tuiTheme } from "../theme.js";
+import { Box, Loader, Text } from "@mariozechner/pi-tui";
+
+//#region src/tui/components/tool-execution.ts
+/**
+* Tool execution component styled with background tints (like Pi TUI).
+* Uses Box with bg color that changes based on status.
+*/
+var ToolExecutionComponent = class {
+	constructor(actionName, args, tui) {
+		this.actionName = actionName;
+		this.args = args;
+		this.status = "running";
+		this.resultText = "";
+		this.expanded = false;
+		this.loader = new Loader(tui, (spinner) => tuiTheme.warning(spinner), (text) => tuiTheme.muted(text), `Running ${actionName}...`);
+		this.box = new Box(1, 0, (text) => tuiTheme.toolPendingBg(text));
+		this.rebuildBox();
+	}
+	updateResult(result) {
+		this.status = result.isError ? "error" : "success";
+		this.resultText = result.text ?? "";
+		this.loader?.stop();
+		this.loader = null;
+		const bgFn = this.status === "error" ? (text) => tuiTheme.toolErrorBg(text) : (text) => tuiTheme.toolSuccessBg(text);
+		this.box.setBgFn(bgFn);
+		this.rebuildBox();
+	}
+	setExpanded(expanded) {
+		this.expanded = expanded;
+		this.rebuildBox();
+	}
+	render(width) {
+		return this.box.render(width);
+	}
+	invalidate() {
+		this.box.invalidate();
+		this.loader?.invalidate();
+	}
+	rebuildBox() {
+		this.box.clear();
+		const argSummary = this.summarizeArgs(80);
+		const headerText = argSummary ? `${tuiTheme.bold(this.actionName)} ${tuiTheme.muted(argSummary)}` : tuiTheme.bold(this.actionName);
+		this.box.addChild(new Text(headerText, 0, 0));
+		if (this.status === "running" && this.loader) this.box.addChild(this.loader);
+		if (this.status !== "running" && this.resultText) {
+			const resultLines = this.resultText.split("\n");
+			const isShort = resultLines.length <= 5;
+			const showAll = this.expanded || isShort;
+			const display = showAll ? resultLines : resultLines.slice(0, 5);
+			const colorFn = this.status === "error" ? (t) => tuiTheme.error(t) : (t) => tuiTheme.muted(t);
+			const body = display.map((line) => colorFn(line)).join("\n");
+			this.box.addChild(new Text(`\n${body}`, 0, 0));
+			if (!showAll) this.box.addChild(new Text(tuiTheme.dim(`... (${resultLines.length - 5} more lines, Ctrl+E to expand)`), 0, 0));
+		}
+	}
+	summarizeArgs(maxWidth) {
+		const entries = Object.entries(this.args);
+		if (entries.length === 0) return "";
+		const summary = entries.map(([k, v]) => {
+			return `${k}=${typeof v === "string" ? v.length > 30 ? `${v.slice(0, 27)}...` : v : JSON.stringify(v)}`;
+		}).join(" ");
+		return summary.length > maxWidth ? `${summary.slice(0, Math.max(0, maxWidth - 3))}...` : summary;
+	}
+};
+
+//#endregion
+export { ToolExecutionComponent };

package/dist/tui/components/user-message.js

@@ -0,0 +1,22 @@
+import { miladyMarkdownTheme, tuiTheme } from "../theme.js";
+import { Markdown } from "@mariozechner/pi-tui";
+
+//#region src/tui/components/user-message.ts
+/**
+* User message with a tinted background (Pi-style).
+* Renders exactly: 1 blank line + markdown-with-bg.
+*/
+var UserMessageComponent = class {
+	constructor(text, markdownTheme = miladyMarkdownTheme) {
+		this.markdown = new Markdown(text, 1, 0, markdownTheme, { bgColor: (t) => tuiTheme.userMsgBg(t) });
+	}
+	render(width) {
+		return ["", ...this.markdown.render(width)];
+	}
+	invalidate() {
+		this.markdown.invalidate();
+	}
+};
+
+//#endregion
+export { UserMessageComponent };