magus-cli 7.7.0 → 7.9.0

package/src/ui/screens/EnvVarsScreen.tsx

@@ -9,6 +9,7 @@ import {
 	type SettingsBrowserItem,
 	buildSettingsBrowserItems,
 } from "../adapters/settingsAdapter.js";
+import { stepFailureReport } from "../adapters/startupReports.js";
 import { ScrollableList } from "../components/ScrollableList.js";
 import { ScreenLayout } from "../components/layout/index.js";
 import { ErrorNotice } from "../components/primitives/index.js";
@@ -18,7 +19,7 @@ import {
 	renderSettingDetail,
 	renderSettingRow,
 } from "../renderers/settingsRenderers.js";
-import { useApp, useModal } from "../state/AppContext.js";
+import { useApp, useFailurePopup, useModal } from "../state/AppContext.js";
 import { useDimensions } from "../state/DimensionsContext.js";
 import { theme } from "../theme.js";
 
@@ -26,8 +27,19 @@ export function SettingsScreen() {
 	const { state, dispatch } = useApp();
 	const { settings } = state;
 	const modal = useModal();
+	const showFailures = useFailurePopup();
 	const dimensions = useDimensions();
 
+	/** A setting that did not save, at the scope it was being saved to. */
+	const reportNotSaved = (
+		name: string,
+		scope: "user" | "project",
+		error: unknown,
+	): Promise<void> =>
+		showFailures(
+			stepFailureReport(`${name} was not saved`, scope.toUpperCase(), error),
+		);
+
 	const fetchData = useCallback(async () => {
 		dispatch({ type: "SETTINGS_DATA_LOADING" });
 		try {
@@ -84,7 +96,7 @@ export function SettingsScreen() {
 				await writeSettingValue(setting, newValue, scope, state.projectPath);
 				await fetchData();
 			} catch (error) {
-				await modal.message("Error", `Failed to update: ${error}`, "error");
+				await reportNotSaved(setting.name, scope, error);
 			}
 		} else if (setting.type === "select" && setting.options) {
 			const options = setting.options.map((o) => ({
@@ -110,7 +122,7 @@ export function SettingsScreen() {
 				await writeSettingValue(setting, val, scope, state.projectPath);
 				await fetchData();
 			} catch (error) {
-				await modal.message("Error", `Failed to update: ${error}`, "error");
+				await reportNotSaved(setting.name, scope, error);
 			}
 		} else {
 			// String type: if already set, clear it; if unset, show input modal
@@ -119,7 +131,7 @@ export function SettingsScreen() {
 					await writeSettingValue(setting, undefined, scope, state.projectPath);
 					await fetchData();
 				} catch (error) {
-					await modal.message("Error", `Failed to update: ${error}`, "error");
+					await reportNotSaved(setting.name, scope, error);
 				}
 			} else {
 				const newValue = await modal.input(
@@ -137,7 +149,7 @@ export function SettingsScreen() {
 					);
 					await fetchData();
 				} catch (error) {
-					await modal.message("Error", `Failed to update: ${error}`, "error");
+					await reportNotSaved(setting.name, scope, error);
 				}
 			}
 		}

package/src/ui/screens/GitignoreScreen.tsx

@@ -12,6 +12,11 @@ import {
 	loadGitignoreState,
 } from "../../services/gitignore-service.js";
 import type { ResolvedRule, Tier, Violation } from "../../types/gitignore.js";
+import {
+	gitignoreFixReport,
+	gitignoreTemplateReport,
+	stepFailureReport,
+} from "../adapters/startupReports.js";
 import { ScreenLayout } from "../components/layout/index.js";
 import { useScreenKeys } from "../input/KeyRouter.js";
 import { moveDirection } from "../keymap.js";
@@ -19,7 +24,8 @@ import {
 	type RuleRow,
 	renderRuleRow,
 } from "../renderers/gitignoreRenderers.js";
-import { useApp, useModal, useNotify } from "../state/AppContext.js";
+import { useApp, useModal } from "../state/AppContext.js";
+import type { FailureReport } from "../state/types.js";
 import { theme } from "../theme.js";
 
 // Clean rows are grouped by the manifest that defined them. Order = display
@@ -36,7 +42,6 @@ const SOURCE_LABELS: Record<Tier, string> = {
 export function GitignoreScreen() {
 	const { state } = useApp();
 	const modal = useModal();
-	const notify = useNotify();
 	const renderer = useRenderer();
 	const cwd = state.projectPath;
 
@@ -139,109 +144,83 @@ export function GitignoreScreen() {
 	const handleFixAll = useCallback(async () => {
 		if (!data || toFixRows.length === 0) return;
 		try {
-			const messages: string[] = [];
-			const failures: string[] = [];
+			const failures: Array<{ path: string; message: string }> = [];
 			for (const { row } of toFixRows) {
 				for (const v of row.violations) {
 					const r = await applyDestructiveFix(cwd, v, row.rule.pattern);
-					(r.applied ? messages : failures).push(r.message);
+					if (!r.applied) failures.push({ path: v.path, message: r.message });
 				}
 			}
 			await reload();
-			if (failures.length > 0) {
-				await modal.message(
-					"Some fixes didn't apply",
-					[...failures, ...messages].join("\n"),
-					"error",
-				);
-			}
+			// Only what did not apply, each with why; the reloaded rows show the rest.
+			const report = gitignoreFixReport(failures);
+			if (report) await modal.failures(report);
 		} catch (err) {
-			await modal.message(
-				"Fix failed",
-				err instanceof Error ? err.message : String(err),
-				"error",
+			await modal.failures(
+				stepFailureReport("The fixes were not applied", ".gitignore", err),
 			);
 		}
 	}, [cwd, data, toFixRows, reload, modal]);
 
 	// Fix just the highlighted row.
 	const handleFixOne = useCallback(async () => {
-		if (!selectedRow) {
-			notify("Highlight a row that needs fixing, then press f", "warning");
-			return;
-		}
-		if (selectedRow.violations.length === 0) {
-			notify(`${selectedRow.rule.pattern} already matches — nothing to fix`);
-			return;
-		}
+		// Nothing highlighted, or a row that already matches: nothing to fix.
+		if (!selectedRow || selectedRow.violations.length === 0) return;
 
 		try {
-			const results: Array<{ applied: boolean; message: string }> = [];
+			const failures: Array<{ path: string; message: string }> = [];
 			for (const v of selectedRow.violations) {
-				results.push(
-					await applyDestructiveFix(cwd, v, selectedRow.rule.pattern),
-				);
+				const r = await applyDestructiveFix(cwd, v, selectedRow.rule.pattern);
+				if (!r.applied) failures.push({ path: v.path, message: r.message });
 			}
-			const failed = results.filter((r) => !r.applied);
 			await reload();
-			// Success is silent — the reload removes the fixed row. Only surface a
-			// modal when something didn't apply.
-			if (failed.length > 0) {
-				await modal.message(
-					"Some fixes didn't apply",
-					results.map((r) => r.message).join("\n"),
-					"error",
-				);
-			}
+			// Success is silent — the reload removes the fixed row. Only what did
+			// not apply goes into the failure popup.
+			const report = gitignoreFixReport(failures);
+			if (report) await modal.failures(report);
 		} catch (err) {
-			await modal.message(
-				"Fix failed",
-				err instanceof Error ? err.message : String(err),
-				"error",
+			await modal.failures(
+				stepFailureReport(
+					"The fix was not applied",
+					selectedRow.rule.pattern,
+					err,
+				),
 			);
 		}
-	}, [selectedRow, modal, notify, cwd, reload]);
+	}, [selectedRow, modal, cwd, reload]);
 
 	const handleApplyTemplate = useCallback(async () => {
 		const names = Object.keys(BUILTIN_TEMPLATES);
-		if (names.length === 0) {
-			notify("No built-in templates available", "warning");
-			return;
-		}
+		if (names.length === 0) return;
 		const selected = await modal.select(
 			"Apply template",
 			"Merge the template into the project manifest at .claude/gitignore.json.",
 			names.map((n) => ({ label: n, value: n })),
 		);
 		if (!selected) return;
+		let report: FailureReport | null = null;
 		try {
+			// What was merged shows in the list. What was skipped does not, so it
+			// is the one thing said — in the failure popup.
 			const r = await applyTemplate(cwd, selected);
-			notify(
-				`Applied "${selected}": ${r.added.ignore.length} ignore + ${r.added.track.length} track entries`,
-			);
-			// Skipped entries are not visible in the list, so they get their own line.
-			if (r.conflicts.length > 0) {
-				notify(
-					`Skipped, conflicting with existing rules: ${r.conflicts.join(", ")}`,
-					"warning",
-				);
-			}
+			report = gitignoreTemplateReport(selected, r.conflicts);
 		} catch (err) {
-			await modal.message(
-				"Template failed",
-				err instanceof Error ? err.message : String(err),
-				"error",
+			report = stepFailureReport(
+				`Template "${selected}" was not applied`,
+				".claude/gitignore.json",
+				err,
 			);
 		}
 		await reload();
-	}, [cwd, modal, notify, reload]);
+		if (report) await modal.failures(report);
+	}, [cwd, modal, reload]);
 
 	/**
 	 * Open the project manifest in $EDITOR, creating it first if needed.
 	 *
 	 * Every await sits inside the try: this runs fire-and-forget from a key, and a
 	 * rejection nobody catches ends the app. A manifest that cannot be read or
-	 * created is said in a dialog on this screen instead.
+	 * created is said in the failure popup instead.
 	 */
 	const handleEditManifest = useCallback(async () => {
 		let projectManifest: string;
@@ -252,10 +231,12 @@ export function GitignoreScreen() {
 				current.resolved,
 			);
 		} catch (err) {
-			await modal.message(
-				"Cannot open the manifest",
-				err instanceof Error ? err.message : String(err),
-				"error",
+			await modal.failures(
+				stepFailureReport(
+					"The project's rules were not opened for editing",
+					".claude/gitignore.json",
+					err,
+				),
 			);
 			return;
 		}

package/src/ui/screens/McpRegistryScreen.tsx

@@ -1,20 +1,30 @@
 import React, { useEffect, useCallback, useState, useRef } from "react";
+import { stepFailureReport } from "../adapters/startupReports.js";
 import { ScreenLayout } from "../components/layout/index.js";
 import { useScreenKeys, useSearchInput } from "../input/KeyRouter.js";
 import { moveDirection } from "../keymap.js";
 import {
 	useApp,
+	useFailurePopup,
 	useModal,
 	useNavigation,
-	useNotify,
 } from "../state/AppContext.js";
 import { useDimensions } from "../state/DimensionsContext.js";
 
-import { addMcpServer, setAllowMcp } from "../../services/claude-settings.js";
+import {
+	addMcpServer,
+	getEnabledMcpServers,
+	getInstalledMcpServers,
+	setAllowMcp,
+} from "../../services/claude-settings.js";
 import { formatDate, searchMcpServers } from "../../services/mcp-registry.js";
 import type { McpRegistryServer, McpServerConfig } from "../../types/index.js";
 import { ScrollableList } from "../components/ScrollableList.js";
-import { rowLead } from "../components/primitives/index.js";
+import {
+	type McpRegistryListItem,
+	renderMcpRegistryRow,
+	renderMcpRegistryStatus,
+} from "../renderers/mcpRenderers.js";
 import { theme } from "../theme.js";
 
 /**
@@ -80,7 +90,7 @@ export function McpRegistryScreen() {
 	const { state, dispatch } = useApp();
 	const { mcpRegistry } = state;
 	const modal = useModal();
-	const notify = useNotify();
+	const showFailures = useFailurePopup();
 	const { navigateToScreen } = useNavigation();
 	const dimensions = useDimensions();
 
@@ -94,6 +104,33 @@ export function McpRegistryScreen() {
 
 	const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
+	/**
+	 * The servers this project has configured, read from the same place the MCP
+	 * screen reads. A row here shows installed from THIS, and the restart from
+	 * `mcp.changedThisSession` — the same two states a curated row carries.
+	 */
+	const [installedNames, setInstalledNames] = useState<ReadonlySet<string>>(
+		new Set(),
+	);
+	const loadInstalled = useCallback(async () => {
+		try {
+			const [installed, enabled] = await Promise.all([
+				getInstalledMcpServers(state.projectPath),
+				getEnabledMcpServers(state.projectPath),
+			]);
+			setInstalledNames(
+				new Set([...Object.keys(installed), ...Object.keys(enabled)]),
+			);
+		} catch {
+			// A configuration that cannot be read is the MCP screen's to report,
+			// where it replaces the list; here the rows simply carry no marks.
+			setInstalledNames(new Set());
+		}
+	}, [state.projectPath]);
+	useEffect(() => {
+		void loadInstalled();
+	}, [loadInstalled]);
+
 	// Load servers
 	const loadServers = useCallback(async (query: string) => {
 		setIsLoading(true);
@@ -196,16 +233,28 @@ export function McpRegistryScreen() {
 			await setAllowMcp(true, state.projectPath);
 			await addMcpServer(server.name, config, state.projectPath);
 			modal.hideModal();
-			// A warning: the server does nothing until the user restarts.
-			notify(`Added ${server.name} — restart Claude Code to use it`, "warning");
+			// Shown on THIS row as its state — installed, and "↻ restart Claude
+			// Code" — not as a message. The MCP screen lists curated servers only,
+			// so this row is where the user can see it.
+			dispatch({ type: "MCP_SERVER_CHANGED", name: server.name });
+			await loadInstalled();
 		} catch (error) {
 			modal.hideModal();
-			await modal.message("Error", `Failed to install: ${error}`, "error");
+			await showFailures(
+				stepFailureReport(`Could not add ${server.name}`, server.name, error),
+			);
 		}
 	};
 
+	const listItems: McpRegistryListItem[] = servers.map((server) => ({
+		server,
+		isInstalled: installedNames.has(server.name),
+		needsRestart: state.mcp.changedThisSession.includes(server.name),
+	}));
+
 	// Get selected server
-	const selectedServer = servers[mcpRegistry.selectedIndex];
+	const selectedItem = listItems[mcpRegistry.selectedIndex];
+	const selectedServer = selectedItem?.server;
 
 	const renderDetail = () => {
 		if (isLoading) {
@@ -216,7 +265,7 @@ export function McpRegistryScreen() {
 			return <text fg={theme.colors.danger}>Error: {error}</text>;
 		}
 
-		if (!selectedServer) {
+		if (!selectedServer || !selectedItem) {
 			return (
 				<text fg={theme.colors.muted}>Select a server to see details</text>
 			);
@@ -238,6 +287,7 @@ export function McpRegistryScreen() {
 				<box marginTop={1}>
 					<text fg={theme.colors.text}>{selectedServer.short_description}</text>
 				</box>
+				<box marginTop={1}>{renderMcpRegistryStatus(selectedItem)}</box>
 				<box flexDirection="row" marginTop={1}>
 					<text fg={theme.colors.text}>
 						<strong>Version: </strong>
@@ -266,36 +316,15 @@ export function McpRegistryScreen() {
 						</text>
 					</box>
 				)}
-				<box marginTop={1}>
-					<text fg={theme.colors.muted}>Press Enter to install</text>
-				</box>
+				{selectedItem.isInstalled ? null : (
+					<box marginTop={1}>
+						<text fg={theme.colors.muted}>Press Enter to install</text>
+					</box>
+				)}
 			</box>
 		);
 	};
 
-	const renderListItem = (
-		server: McpRegistryServer,
-		_idx: number,
-		isSelected: boolean,
-	) => {
-		const version = server.version ? ` v${server.version}` : "";
-		return isSelected ? (
-			<text bg={theme.selection.bg} fg={theme.selection.fg}>
-				{rowLead(true)}
-				{server.name}
-				{version}{" "}
-			</text>
-		) : (
-			<text fg={theme.colors.text}>
-				<span>{rowLead(false)}</span>
-				<span>
-					<strong>{server.name}</strong>
-				</span>
-				<span fg={theme.colors.info}>{version}</span>
-			</text>
-		);
-	};
-
 	// Status for search placeholder
 	const searchPlaceholder = `${servers.length} servers │ / to search`;
 
@@ -319,11 +348,11 @@ export function McpRegistryScreen() {
 					<text fg={theme.colors.muted}>No servers found</text>
 				) : (
 					<ScrollableList
-						items={servers}
+						items={listItems}
 						selectedIndex={mcpRegistry.selectedIndex}
-						renderItem={renderListItem}
+						renderItem={renderMcpRegistryRow}
 						maxHeight={dimensions.listPanelHeight}
-						getKey={(server) => server.name}
+						getKey={(item) => item.server.name}
 					/>
 				)
 			}

package/src/ui/screens/McpScreen.tsx

@@ -1,12 +1,14 @@
 import React, { useEffect, useCallback, useMemo } from "react";
+import { failureReport } from "../adapters/failureReport.js";
+import { stepFailureReport } from "../adapters/startupReports.js";
 import { ScreenLayout } from "../components/layout/index.js";
 import { useScreenKeys } from "../input/KeyRouter.js";
 import { moveDirection } from "../keymap.js";
 import {
 	useApp,
+	useFailurePopup,
 	useModal,
 	useNavigation,
-	useNotify,
 } from "../state/AppContext.js";
 import { useDimensions } from "../state/DimensionsContext.js";
 
@@ -35,7 +37,7 @@ export function McpScreen() {
 	const { state, dispatch } = useApp();
 	const { mcp } = state;
 	const modal = useModal();
-	const notify = useNotify();
+	const showFailures = useFailurePopup();
 	const { navigateToScreen } = useNavigation();
 	const dimensions = useDimensions();
 
@@ -96,22 +98,34 @@ export function McpScreen() {
 
 			for (const server of servers) {
 				const isInstalled = mcp.installedServers[server.name] !== undefined;
-				items.push({ kind: "server", server, isInstalled });
+				items.push({
+					kind: "server",
+					server,
+					isInstalled,
+					needsRestart: mcp.changedThisSession.includes(server.name),
+				});
 			}
 		}
 
 		return items;
-	}, [mcp.servers, mcp.installedServers]);
+	}, [mcp.servers, mcp.installedServers, mcp.changedThisSession]);
 
 	useScreenKeys("mcp", {
 		// Guarded: `installMcpServer` throws on a catalogue entry with no URL or
 		// command, and a rejection nobody catches ends the app.
 		toggle: () => {
+			const item = allListItems[mcp.selectedIndex];
+			if (item?.kind !== "server") return;
+			const { name } = item.server;
 			handleSelect().catch((error: unknown) =>
-				modal.message(
-					"Error",
-					error instanceof Error ? error.message : String(error),
-					"error",
+				showFailures(
+					stepFailureReport(
+						item.isInstalled
+							? `Could not remove ${name}`
+							: `Could not add ${name}`,
+						name,
+						error,
+					),
 				),
 			);
 		},
@@ -147,11 +161,19 @@ export function McpScreen() {
 				try {
 					await removeMcpServer(server.name, state.projectPath);
 					modal.hideModal();
-					// The row turns uninstalled; nothing else to say.
+					// The row turns uninstalled, and says a running Claude Code still
+					// has it until it restarts.
+					dispatch({ type: "MCP_SERVER_CHANGED", name: server.name });
 					fetchData();
 				} catch (error) {
 					modal.hideModal();
-					await modal.message("Error", `Failed to remove: ${error}`, "error");
+					await showFailures(
+						stepFailureReport(
+							`Could not remove ${server.name}`,
+							server.name,
+							error,
+						),
+					);
 				}
 			}
 		} else {
@@ -202,10 +224,14 @@ export function McpScreen() {
 				if (value === null) return;
 
 				if (field.required && !value) {
-					await modal.message(
-						"Required Field",
-						`${field.label} is required.`,
-						"error",
+					await showFailures(
+						failureReport(`Could not add ${server.name}`, [
+							{
+								subject: field.label,
+								reason: "is required, and was left empty",
+								fix: `Press Enter on ${server.name} again and fill it in`,
+							},
+						]),
 					);
 					return;
 				}
@@ -221,14 +247,15 @@ export function McpScreen() {
 		try {
 			await addMcpServer(server.name, config, state.projectPath);
 			modal.hideModal();
-			// The row shows it installed; the restart it needs does not show,
-			// and it is something the user has to do — so a warning, which also
-			// stays long enough to be read.
-			notify(`Added ${server.name} — restart Claude Code to use it`, "warning");
+			// The row shows it installed AND that it needs a restart to be used —
+			// state on the server, not a message that scrolls away.
+			dispatch({ type: "MCP_SERVER_CHANGED", name: server.name });
 			fetchData();
 		} catch (error) {
 			modal.hideModal();
-			await modal.message("Error", `Failed to install: ${error}`, "error");
+			await showFailures(
+				stepFailureReport(`Could not add ${server.name}`, server.name, error),
+			);
 		}
 	};