magus-cli 0.0.0-placeholder → 7.1.0

package/src/ui/screens/CliToolsScreen.tsx

@@ -0,0 +1,367 @@
+import { execFile } from "node:child_process";
+import { promisify } from "node:util";
+import React, { useEffect, useCallback, useState, useRef } from "react";
+import { ScreenLayout } from "../components/layout/index.js";
+import { useKeyboard } from "../hooks/useKeyboard.js";
+import { useApp, useModal } from "../state/AppContext.js";
+import { useDimensions } from "../state/DimensionsContext.js";
+
+import { cliTools } from "../../data/cli-tools.js";
+import { loadActiveClosure } from "../../services/active-closure.js";
+import { cliToolUninstall } from "../../services/cli-tool-commands.js";
+import {
+	type InstallInfo,
+	PROBE_CONCURRENCY,
+	REAL_TOOL_PROBE_IO,
+	detectInstallMethods,
+	probeTools,
+	specForCatalogTool,
+} from "../../services/tool-probe.js";
+import type { Command } from "../../utils/command-utils.js";
+import { formatCommand } from "../../utils/command-utils.js";
+import {
+	type CliToolRow,
+	buildToolRow,
+	countToolRows,
+	isInstalled,
+} from "../adapters/cliToolsAdapter.js";
+import { ScrollableList } from "../components/ScrollableList.js";
+import {
+	renderCliToolDetail,
+	renderCliToolRow,
+} from "../renderers/cliToolRenderers.js";
+import { theme } from "../theme.js";
+
+const execFileAsync = promisify(execFile);
+
+// ─── Session cache ─────────────────────────────────────────────────────────────
+//
+// The probe itself lives in services/tool-probe.ts — the same one `magus
+// update` uses — so this screen and the CLI cannot disagree about a tool. It
+// used to carry a private copy: a `/bin/bash` `which`, an `npm view` per tool,
+// its own version comparator, and a string-form `exec` of each check command.
+
+let cachedRows: CliToolRow[] | null = null;
+let cacheInitialized = false;
+/** Bumped by every fetch, so a refresh discards the answers of the one before. */
+let fetchGeneration = 0;
+
+function clearCliToolsCache(): void {
+	cachedRows = null;
+	cacheInitialized = false;
+}
+
+/** Rows before anything is known: the catalogue mapping, checking. */
+function initialRows(): CliToolRow[] {
+	return cliTools.map((tool) =>
+		buildToolRow(tool, specForCatalogTool(tool, null, undefined), undefined),
+	);
+}
+
+/** `fn` over `items`, at most `limit` at a time, results in input order. */
+async function mapLimited<T, R>(
+	items: readonly T[],
+	limit: number,
+	fn: (item: T) => Promise<R>,
+): Promise<R[]> {
+	const out: R[] = new Array(items.length);
+	let next = 0;
+	const worker = async () => {
+		while (next < items.length) {
+			const i = next++;
+			const item = items[i];
+			if (item !== undefined) out[i] = await fn(item);
+		}
+	};
+	await Promise.all(
+		Array.from({ length: Math.min(limit, items.length) }, worker),
+	);
+	return out;
+}
+
+// ─── Component ─────────────────────────────────────────────────────────────────
+
+export function CliToolsScreen() {
+	const { state, dispatch } = useApp();
+	const { cliTools: cliToolsState } = state;
+	const modal = useModal();
+	const dimensions = useDimensions();
+
+	const [rows, setRows] = useState<CliToolRow[]>(
+		() => cachedRows || initialRows(),
+	);
+
+	const rowsRef = useRef(rows);
+	rowsRef.current = rows;
+
+	const setAndCache = useCallback(
+		(update: (prev: CliToolRow[]) => CliToolRow[]) => {
+			setRows((prev) => {
+				const next = update(prev);
+				cachedRows = next;
+				return next;
+			});
+		},
+		[],
+	);
+
+	/**
+	 * Detection first — it decides which installer each tool is probed through
+	 * (§4.5 of the design: the closure's spec, else the detected installer, else
+	 * the catalogue) — then one shared probe, rows filling in as tools settle.
+	 */
+	const fetchVersionInfo = useCallback(async () => {
+		const generation = ++fetchGeneration;
+		const projectPath = state.projectPath || process.cwd();
+		const [active, installs] = await Promise.all([
+			// Full resolution, not `resolveBins: false`: a catalogue tool may be
+			// declared by a PLUGIN's requires.bin, and parity needs the spec the
+			// CLI plans with. `resolveBins: false` would still keep the profile's
+			// own cliTools, but lose every plugin-declared bin and its pin.
+			loadActiveClosure(projectPath),
+			mapLimited(cliTools, PROBE_CONCURRENCY, (tool) =>
+				detectInstallMethods(tool, REAL_TOOL_PROBE_IO),
+			),
+		]);
+		if (generation !== fetchGeneration) return;
+
+		const closureBins = active?.closure.bins ?? null;
+		const planned = cliTools.map((tool, i) => ({
+			tool,
+			install: installs[i],
+			spec: specForCatalogTool(tool, closureBins, installs[i]),
+		}));
+		setAndCache(() =>
+			planned.map((p) => buildToolRow(p.tool, p.spec, undefined, p.install)),
+		);
+
+		await probeTools(
+			planned.map((p) => p.spec),
+			REAL_TOOL_PROBE_IO,
+			{
+				onResult: (facts, { index }) => {
+					if (generation !== fetchGeneration) return;
+					const p = planned[index];
+					if (!p) return;
+					const row = buildToolRow(p.tool, p.spec, facts, p.install);
+					setAndCache((prev) => {
+						const next = [...prev];
+						next[index] = row;
+						return next;
+					});
+				},
+			},
+		);
+	}, [setAndCache, state.projectPath]);
+
+	useEffect(() => {
+		if (!cacheInitialized) {
+			cacheInitialized = true;
+			cachedRows = rows;
+			void fetchVersionInfo();
+		}
+	}, [fetchVersionInfo, rows]);
+
+	useKeyboard((event) => {
+		if (state.isSearching || state.modal) return;
+
+		if (event.name === "up" || event.name === "k") {
+			const newIndex = Math.max(0, cliToolsState.selectedIndex - 1);
+			dispatch({ type: "CLITOOLS_SELECT", index: newIndex });
+		} else if (event.name === "down" || event.name === "j") {
+			const newIndex = Math.min(
+				rows.length - 1,
+				cliToolsState.selectedIndex + 1,
+			);
+			dispatch({ type: "CLITOOLS_SELECT", index: newIndex });
+		} else if (event.name === "r") {
+			handleRefresh();
+		} else if (event.name === "a") {
+			handleUpdateAll();
+		} else if (event.name === "c") {
+			handleResolveConflict();
+		} else if (event.name === "enter" || event.name === "return") {
+			handleInstall();
+		}
+	});
+
+	const handleRefresh = () => {
+		clearCliToolsCache();
+		setRows(initialRows());
+		cacheInitialized = true;
+		void fetchVersionInfo();
+	};
+
+	/**
+	 * Run one installer command and report success.
+	 *
+	 * `execFile`, so there is no shell to re-parse a package name — the same
+	 * reason `utils/run.ts` exists. It does NOT call that shared `runCommand`:
+	 * that one inherits stdio, and a TUI must never hand the terminal to a
+	 * child. Output is captured and discarded here; the modal is the progress
+	 * indicator.
+	 */
+	const runCommand = async (
+		command: Command,
+	): Promise<{ ok: boolean; error?: string }> => {
+		try {
+			await execFileAsync(command.cmd, [...command.args], { timeout: 60000 });
+			return { ok: true };
+		} catch (err) {
+			const msg = err instanceof Error ? err.message : String(err);
+			return { ok: false, error: msg };
+		}
+	};
+
+	const handleInstall = async () => {
+		const row = rows[cliToolsState.selectedIndex];
+		if (!row || row.checking) return;
+
+		const { tool, status, updateCommand, installCommand } = row;
+		const installed = isInstalled(status);
+		// Enter on an `unknown` row still offers the detected-method command:
+		// an explicit user action, not a plan. The detail panel shows why the
+		// row is unverified beside it.
+		const action = !installed
+			? "Installing"
+			: status?.state === "upgrade" || status?.state === "unknown"
+				? "Updating"
+				: "Reinstalling";
+		// Both sides come from the row, which built them from the SAME rule its
+		// state came from — a declared tool's pin included.
+		const command = installed && updateCommand ? updateCommand : installCommand;
+
+		modal.loading(`${action} ${tool.displayName}...`);
+		const result = await runCommand(command);
+		modal.hideModal();
+
+		if (result.ok) {
+			handleRefresh();
+		} else {
+			await modal.message(
+				"Error",
+				`Failed to ${action.toLowerCase()} ${tool.displayName}.\n\nTry running manually:\n${formatCommand(command)}`,
+				"error",
+			);
+		}
+	};
+
+	const handleResolveConflict = async () => {
+		const row = rows[cliToolsState.selectedIndex];
+		const install: InstallInfo | undefined = row?.install;
+		if (!row || !install || install.all.length < 2) return;
+
+		const { tool } = row;
+		const allMethods = install.all;
+
+		// Let user pick which install to keep
+		const options = allMethods.map((method) => ({
+			label: `Keep ${method}${method === install.primary ? " (active)" : ""}, remove others`,
+			value: method,
+		}));
+
+		const keep = await modal.select(
+			`Resolve ${tool.displayName} conflict`,
+			`Installed via ${allMethods.join(" + ")}. Which to keep?`,
+			options,
+		);
+		if (keep === null) return;
+
+		const toRemove = allMethods.filter((m) => m !== keep);
+		modal.loading(`Removing ${toRemove.join(", ")} install(s)...`);
+
+		const errors: string[] = [];
+		for (const method of toRemove) {
+			const cmd = cliToolUninstall(tool, method, install.brewFormula);
+			if (!cmd) continue;
+			const result = await runCommand(cmd);
+			if (!result.ok) errors.push(`${method}: ${formatCommand(cmd)}`);
+		}
+
+		modal.hideModal();
+
+		if (errors.length > 0) {
+			await modal.message(
+				"Partial",
+				`Some removals failed. Try manually:\n\n${errors.join("\n")}`,
+				"error",
+			);
+		}
+
+		handleRefresh();
+	};
+
+	const handleUpdateAll = async () => {
+		// Only rows the shared classifier says are behind. An `unknown` is never
+		// swept up in a bulk action — that is exactly the "cannot tell, so run
+		// it anyway" the CLI no longer does either.
+		const updatable = rows.filter((r) => r.status?.state === "upgrade");
+		if (updatable.length === 0) {
+			await modal.message(
+				"Up to Date",
+				"No tool is known to be behind.",
+				"info",
+			);
+			return;
+		}
+
+		modal.loading(`Updating ${updatable.length} tool(s)...`);
+
+		for (const row of updatable) {
+			await runCommand(row.updateCommand ?? row.installCommand);
+		}
+
+		modal.hideModal();
+		handleRefresh();
+	};
+
+	const selectedRow = rows[cliToolsState.selectedIndex];
+
+	const counts = countToolRows(rows);
+	const statusContent = (
+		<text fg={theme.colors.text}>
+			<span fg={theme.colors.muted}>Installed: </span>
+			<span fg={theme.colors.info}>
+				{counts.installed}/{rows.length}
+			</span>
+			{counts.updates > 0 && (
+				<>
+					<span fg={theme.colors.muted}> │ Updates: </span>
+					<span fg={theme.colors.warning}>{counts.updates}</span>
+				</>
+			)}
+			{counts.unverified > 0 && (
+				<>
+					<span fg={theme.colors.muted}> │ Unverified: </span>
+					<span fg={theme.colors.warning}>{counts.unverified}</span>
+				</>
+			)}
+		</text>
+	);
+
+	return (
+		<ScreenLayout
+			title="magus CLI Tools"
+			currentScreen="cli-tools"
+			statusLine={statusContent}
+			footerHints={[
+				{ keys: ["Enter"], label: "install" },
+				{ keys: ["a"], label: "update all" },
+				{ keys: ["c"], label: "fix conflict" },
+				{ keys: ["r"], label: "refresh" },
+			]}
+			listPanel={
+				<ScrollableList
+					items={rows}
+					selectedIndex={cliToolsState.selectedIndex}
+					renderItem={renderCliToolRow}
+					maxHeight={dimensions.listPanelHeight}
+					getKey={(row) => row.tool.name}
+				/>
+			}
+			detailPanel={renderCliToolDetail(selectedRow)}
+		/>
+	);
+}
+
+export default CliToolsScreen;

package/src/ui/screens/EnvVarsScreen.tsx

@@ -0,0 +1,221 @@
+import React, { useEffect, useCallback, useMemo } from "react";
+import { SETTINGS_CATALOG } from "../../data/settings-catalog.js";
+import {
+	discoverOutputStyles,
+	readAllSettingsBothScopes,
+	writeSettingValue,
+} from "../../services/settings-manager.js";
+import {
+	type SettingsBrowserItem,
+	buildSettingsBrowserItems,
+} from "../adapters/settingsAdapter.js";
+import { ScrollableList } from "../components/ScrollableList.js";
+import { ScreenLayout } from "../components/layout/index.js";
+import { useKeyboard } from "../hooks/useKeyboard.js";
+import {
+	renderSettingDetail,
+	renderSettingRow,
+} from "../renderers/settingsRenderers.js";
+import { useApp, useModal } from "../state/AppContext.js";
+import { useDimensions } from "../state/DimensionsContext.js";
+import { theme } from "../theme.js";
+
+export function SettingsScreen() {
+	const { state, dispatch } = useApp();
+	const { settings } = state;
+	const modal = useModal();
+	const dimensions = useDimensions();
+
+	const fetchData = useCallback(async () => {
+		dispatch({ type: "SETTINGS_DATA_LOADING" });
+		try {
+			// Populate dynamic output style options from installed plugins
+			const outputStyleSetting = SETTINGS_CATALOG.find(
+				(s) => s.id === "output-style",
+			);
+			if (outputStyleSetting && outputStyleSetting.type === "select") {
+				outputStyleSetting.options = await discoverOutputStyles(
+					state.projectPath,
+				);
+			}
+
+			const values = await readAllSettingsBothScopes(
+				SETTINGS_CATALOG,
+				state.projectPath,
+			);
+			dispatch({ type: "SETTINGS_DATA_SUCCESS", values });
+		} catch (error) {
+			dispatch({
+				type: "SETTINGS_DATA_ERROR",
+				error: error instanceof Error ? error : new Error(String(error)),
+			});
+		}
+	}, [dispatch, state.projectPath]);
+
+	useEffect(() => {
+		fetchData();
+	}, [fetchData]);
+
+	const listItems = useMemo((): SettingsBrowserItem[] => {
+		if (settings.values.status !== "success") return [];
+		return buildSettingsBrowserItems(settings.values.data);
+	}, [settings.values]);
+
+	const handleScopeChange = async (scope: "user" | "project") => {
+		const item = listItems[settings.selectedIndex];
+		if (!item || item.kind !== "setting") return;
+
+		const { setting, scopedValues } = item;
+		const currentValue =
+			scope === "user" ? scopedValues.user : scopedValues.project;
+
+		if (setting.type === "boolean") {
+			const currentBool =
+				currentValue === "true" ||
+				currentValue === "1" ||
+				(currentValue === undefined && setting.defaultValue === "true");
+			const newValue = currentBool ? "false" : "true";
+			try {
+				await writeSettingValue(setting, newValue, scope, state.projectPath);
+				await fetchData();
+			} catch (error) {
+				await modal.message("Error", `Failed to update: ${error}`, "error");
+			}
+		} else if (setting.type === "select" && setting.options) {
+			const options = setting.options.map((o) => ({
+				label: o.label + (currentValue === o.value ? " (current)" : ""),
+				value: o.value,
+			}));
+			const currentIndex = setting.options.findIndex(
+				(o) => o.value === currentValue,
+			);
+			if (currentValue !== undefined) {
+				options.push({ label: "Clear (use default)", value: "__clear__" });
+			}
+			const selected = await modal.select(
+				`${setting.name} — ${scope}`,
+				setting.description,
+				options,
+				currentIndex >= 0 ? currentIndex : undefined,
+			);
+			if (selected === null) return;
+			try {
+				const val =
+					selected === "__clear__" ? undefined : selected || undefined;
+				await writeSettingValue(setting, val, scope, state.projectPath);
+				await fetchData();
+			} catch (error) {
+				await modal.message("Error", `Failed to update: ${error}`, "error");
+			}
+		} else {
+			// String type: if already set, clear it; if unset, show input modal
+			if (currentValue !== undefined && currentValue !== "") {
+				try {
+					await writeSettingValue(setting, undefined, scope, state.projectPath);
+					await fetchData();
+				} catch (error) {
+					await modal.message("Error", `Failed to update: ${error}`, "error");
+				}
+			} else {
+				const newValue = await modal.input(
+					`${setting.name} — ${scope}`,
+					setting.description,
+					currentValue || setting.defaultValue || "",
+				);
+				if (newValue === null) return;
+				try {
+					await writeSettingValue(
+						setting,
+						newValue || undefined,
+						scope,
+						state.projectPath,
+					);
+					await fetchData();
+				} catch (error) {
+					await modal.message("Error", `Failed to update: ${error}`, "error");
+				}
+			}
+		}
+	};
+
+	useKeyboard((event) => {
+		if (state.isSearching || state.modal) return;
+
+		if (event.name === "up" || event.name === "k") {
+			const newIndex = Math.max(0, settings.selectedIndex - 1);
+			dispatch({ type: "SETTINGS_SELECT", index: newIndex });
+		} else if (event.name === "down" || event.name === "j") {
+			const newIndex = Math.min(
+				Math.max(0, listItems.length - 1),
+				settings.selectedIndex + 1,
+			);
+			dispatch({ type: "SETTINGS_SELECT", index: newIndex });
+		} else if (event.name === "u") {
+			handleScopeChange("user");
+		} else if (event.name === "p") {
+			handleScopeChange("project");
+		} else if (event.name === "enter") {
+			handleScopeChange("project");
+		}
+	});
+
+	const selectedItem = listItems[settings.selectedIndex];
+
+	const renderDetail = () => {
+		if (settings.values.status === "loading") {
+			return <text fg={theme.colors.muted}>Loading settings...</text>;
+		}
+		if (settings.values.status === "error") {
+			return <text fg={theme.colors.danger}>Failed to load settings</text>;
+		}
+		return renderSettingDetail(selectedItem);
+	};
+
+	const totalSet =
+		settings.values.status === "success"
+			? Array.from(settings.values.data.values()).filter(
+					(v) => v.user !== undefined || v.project !== undefined,
+				).length
+			: 0;
+
+	const statusContent = (
+		<text fg={theme.colors.text}>
+			<span fg={theme.colors.muted}>Settings: </span>
+			<span fg={theme.colors.info}>{totalSet} configured</span>
+			<span fg={theme.colors.muted}> │ u:user p:project</span>
+		</text>
+	);
+
+	return (
+		<ScreenLayout
+			title="magus Settings"
+			currentScreen="settings"
+			statusLine={statusContent}
+			footerHints={[
+				{ keys: ["↑", "↓"], label: "nav" },
+				{ keys: ["u"], label: "user scope" },
+				{ keys: ["p"], label: "project scope" },
+				{ keys: ["Enter"], label: "project" },
+			]}
+			listPanel={
+				settings.values.status !== "success" ? (
+					<text fg={theme.colors.muted}>
+						{settings.values.status === "loading"
+							? "Loading..."
+							: "Error loading settings"}
+					</text>
+				) : (
+					<ScrollableList
+						items={listItems}
+						selectedIndex={settings.selectedIndex}
+						renderItem={renderSettingRow}
+						maxHeight={dimensions.listPanelHeight}
+					/>
+				)
+			}
+			detailPanel={renderDetail()}
+		/>
+	);
+}
+
+export default SettingsScreen;