magus-cli 7.6.0 → 7.8.0

package/src/ui/screens/McpRegistryScreen.tsx

@@ -1,15 +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, useModal, useNavigation } from "../state/AppContext.js";
+import {
+	useApp,
+	useFailurePopup,
+	useModal,
+	useNavigation,
+} 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";
 
 /**
@@ -75,6 +90,7 @@ export function McpRegistryScreen() {
 	const { state, dispatch } = useApp();
 	const { mcpRegistry } = state;
 	const modal = useModal();
+	const showFailures = useFailurePopup();
 	const { navigateToScreen } = useNavigation();
 	const dimensions = useDimensions();
 
@@ -88,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);
@@ -190,19 +233,28 @@ export function McpRegistryScreen() {
 			await setAllowMcp(true, state.projectPath);
 			await addMcpServer(server.name, config, state.projectPath);
 			modal.hideModal();
-			await modal.message(
-				"Installed",
-				`${server.name} has been configured.\n\nRestart Claude Code to activate.`,
-				"success",
-			);
+			// 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) {
@@ -213,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>
 			);
@@ -235,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>
@@ -263,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`;
 
@@ -316,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,8 +1,15 @@
 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, useModal, useNavigation } from "../state/AppContext.js";
+import {
+	useApp,
+	useFailurePopup,
+	useModal,
+	useNavigation,
+} from "../state/AppContext.js";
 import { useDimensions } from "../state/DimensionsContext.js";
 
 import {
@@ -30,6 +37,7 @@ export function McpScreen() {
 	const { state, dispatch } = useApp();
 	const { mcp } = state;
 	const modal = useModal();
+	const showFailures = useFailurePopup();
 	const { navigateToScreen } = useNavigation();
 	const dimensions = useDimensions();
 
@@ -69,9 +77,12 @@ export function McpScreen() {
 		}
 	}, [dispatch, state.projectPath]);
 
+	// Load data on mount or when dataRefreshVersion changes — a profile
+	// activating changes what this screen shows.
+	// biome-ignore lint/correctness/useExhaustiveDependencies: dataRefreshVersion is the external refresh trigger; bumping it must re-run the fetch even though the body never reads it
 	useEffect(() => {
 		fetchData();
-	}, [fetchData]);
+	}, [fetchData, state.dataRefreshVersion]);
 
 	const allListItems = useMemo((): McpListItem[] => {
 		if (mcp.servers.status !== "success") return [];
@@ -87,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,
+					),
 				),
 			);
 		},
@@ -138,15 +161,19 @@ export function McpScreen() {
 				try {
 					await removeMcpServer(server.name, state.projectPath);
 					modal.hideModal();
-					await modal.message(
-						"Removed",
-						`${server.name} has been removed.`,
-						"success",
-					);
+					// 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 {
@@ -197,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;
 				}
@@ -216,15 +247,15 @@ export function McpScreen() {
 		try {
 			await addMcpServer(server.name, config, state.projectPath);
 			modal.hideModal();
-			await modal.message(
-				"Installed",
-				`${server.name} has been configured.\n\nRestart Claude Code to activate.`,
-				"success",
-			);
+			// 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),
+			);
 		}
 	};
 

package/src/ui/screens/ModelsScreen.tsx

@@ -7,11 +7,13 @@ import {
 	readModelsConfig,
 	readModelsStatus,
 } from "../../services/models-manager.js";
+import { failureReport } from "../adapters/failureReport.js";
 import {
 	type ModelsBrowserItem,
 	buildModelsItems,
 	firstSelectableIndex,
 } from "../adapters/modelsAdapter.js";
+import { stepFailureReport } from "../adapters/startupReports.js";
 import { EmptyFilterState } from "../components/EmptyFilterState.js";
 import { ScrollableList } from "../components/ScrollableList.js";
 import { ScreenLayout } from "../components/layout/index.js";
@@ -23,7 +25,7 @@ import {
 	renderModelRow,
 	renderModelsSummary,
 } from "../renderers/modelRenderers.js";
-import { useApp } from "../state/AppContext.js";
+import { useApp, useFailurePopup } from "../state/AppContext.js";
 import { useDimensions } from "../state/DimensionsContext.js";
 import { asyncValue } from "../state/types.js";
 import { theme } from "../theme.js";
@@ -134,22 +136,15 @@ export function ModelsScreen() {
 		};
 	}, [dispatch]);
 
-	// ── Status line ───────────────────────────────────────────────────────────
+	// ── Feedback ──────────────────────────────────────────────────────────────
 
 	/**
-	 * Set the status line.
-	 *
-	 * No timer, matching the Styles screen: a message that erased itself after a
-	 * few seconds was usually gone by the time anyone looked. It is cleared when
-	 * the NEXT action starts instead.
+	 * No status line and no messages. A success shows as the screen's state —
+	 * the reloaded list, "Model tiers: on", "writing…" while a write runs. What
+	 * did not happen goes into the one failure popup, with why and, when there
+	 * is one, what to do. A key pressed where it does nothing does nothing.
 	 */
-	const showStatus = useCallback(
-		(text: string, tone: "success" | "error" = "success") => {
-			dispatch({ type: "MODELS_STATUS_SET", status: { text, tone } });
-		},
-		[dispatch],
-	);
-	const statusMsg = modelsState.status;
+	const showFailures = useFailurePopup();
 
 	// ── Derived ───────────────────────────────────────────────────────────────
 
@@ -189,18 +184,17 @@ export function ModelsScreen() {
 	 *
 	 * No `ensureManifest` is passed. That helper prompts on the terminal, and
 	 * this process's terminal belongs to OpenTUI — a project with no profiles
-	 * gets a plain `.claude/models.json`, and the status line says so.
+	 * gets a plain `.claude/models.json`.
+	 *
+	 * A press while a write is in flight does nothing: the header already says
+	 * "writing…". Neither does one with no preset under the cursor — the only
+	 * other row is the status header, which the cursor never lands on, so that
+	 * is an empty filtered list.
 	 */
 	const handleApply = useCallback(async () => {
-		if (modelsState.isApplying) {
-			showStatus("Already writing the routing — one at a time", "error");
-			return;
-		}
-		if (!selectedItem || selectedItem.kind !== "preset") {
-			showStatus("Move to a preset row and press a", "error");
-			return;
-		}
-		const { config, custom } = selectedItem;
+		if (modelsState.isApplying) return;
+		if (!selectedItem || selectedItem.kind !== "preset") return;
+		const { config, custom, label } = selectedItem;
 
 		dispatch({ type: "MODELS_APPLY_START" });
 		try {
@@ -213,24 +207,24 @@ export function ModelsScreen() {
 				projectPath: state.projectPath,
 				preset: custom ? config : config.preset,
 			});
+			// Applied: the reloaded list and the header show it. Said only when
+			// the profile did NOT record it — the next magus install renders the
+			// live settings from the profile and drops the routing.
 			await fetchData();
-			const where = result.profile
-				? `profile "${result.profile}"`
-				: "this project";
-			// Say plainly when the manifest was NOT updated: without that record a
-			// `magus install` rewrites the profile and the routing disappears.
-			const durability =
-				result.profile && !result.recordedInManifest
-					? " — not in profiles.json, so `magus install` will drop it"
-					: "";
-			showStatus(
-				`Applied ${selectedItem.label} in ${where}, hook ${result.hook}${durability}`,
-				result.profile && !result.recordedInManifest ? "error" : "success",
-			);
+			if (result.profile && !result.recordedInManifest) {
+				await showFailures(
+					failureReport(`${label} is active, but not saved in the profile`, [
+						{
+							subject: `profile ${result.profile}`,
+							reason:
+								"the routing is not recorded in it, so the next magus install drops it",
+						},
+					]),
+				);
+			}
 		} catch (error) {
-			showStatus(
-				error instanceof Error ? error.message : String(error),
-				"error",
+			await showFailures(
+				stepFailureReport("No model routing was applied", label, error),
 			);
 		} finally {
 			dispatch({ type: "MODELS_APPLY_END" });
@@ -240,26 +234,24 @@ export function ModelsScreen() {
 		selectedItem,
 		state.projectPath,
 		fetchData,
-		showStatus,
+		showFailures,
 		dispatch,
 	]);
 
+	// Off: the reloaded header reads "Model tiers: off".
 	const handleClear = useCallback(async () => {
-		if (modelsState.isApplying) {
-			showStatus("Already writing the routing — one at a time", "error");
-			return;
-		}
+		if (modelsState.isApplying) return;
 		dispatch({ type: "MODELS_APPLY_START" });
 		try {
 			await clearModels(state.projectPath);
 			await fetchData();
-			showStatus(
-				"Model tiers off — subagents inherit the session model again. The hook stays registered and is a no-op without a config.",
-			);
 		} catch (error) {
-			showStatus(
-				error instanceof Error ? error.message : String(error),
-				"error",
+			await showFailures(
+				stepFailureReport(
+					"Model tiers were not turned off",
+					"model routing",
+					error,
+				),
 			);
 		} finally {
 			dispatch({ type: "MODELS_APPLY_END" });
@@ -268,7 +260,7 @@ export function ModelsScreen() {
 		modelsState.isApplying,
 		state.projectPath,
 		fetchData,
-		showStatus,
+		showFailures,
 		dispatch,
 	]);
 
@@ -301,67 +293,36 @@ export function ModelsScreen() {
 		blur: () => dispatch({ type: "SET_SEARCHING", isSearching: false }),
 	});
 
-	/**
-	 * The previous message belongs to the previous ACTION, so every key this
-	 * screen acts on clears it first. Keys another layer takes — a digit or Tab
-	 * leaving the tab, text typed into the search box — leave it alone, so a
-	 * round trip through another tab keeps it.
-	 */
-	const clearStatus = () => {
-		if (modelsState.status) dispatch({ type: "MODELS_STATUS_CLEAR" });
-	};
-
 	useScreenKeys("models", {
 		// Enter and `a` are the same action here. There is nothing to "open" on
 		// this screen — a preset row has one thing it can do — so binding Enter
 		// to anything else would leave the most obvious key doing nothing.
 		apply: () => {
-			clearStatus();
 			void handleApply();
 		},
 		off: () => {
-			clearStatus();
 			void handleClear();
 		},
 		reload: () => {
-			clearStatus();
 			void fetchData();
 		},
 		search: () => {
-			clearStatus();
 			dispatch({ type: "SET_SEARCHING", isSearching: true });
 		},
 		// Only while a committed filter is set; otherwise Esc is the global back.
 		"clear-filter": () => {
 			if (!modelsState.searchQuery) return false;
-			clearStatus();
 			dispatch({ type: "MODELS_SET_SEARCH", query: "" });
 			dispatch({ type: "MODELS_SELECT", index: 0 });
 			return true;
 		},
 		move: (key) => {
-			clearStatus();
 			move(moveDirection(key));
 		},
 	});
 
 	// ── Chrome ────────────────────────────────────────────────────────────────
 
-	// Transient feedback takes the full-width notice row under the header, never
-	// the header itself: a long message beside the title shrinks the title away
-	// and the two read as one garbled sentence.
-	const noticeContent = statusMsg ? (
-		<text
-			fg={
-				statusMsg.tone === "success"
-					? theme.colors.success
-					: theme.colors.danger
-			}
-		>
-			{statusMsg.text}
-		</text>
-	) : undefined;
-
 	// The file's `preset` string is deliberately not shown beside the state: it records what
 	// was last APPLIED, so a config edited afterwards would wear a built-in's name here while
 	// the list correctly calls it `Custom`.
@@ -398,7 +359,6 @@ export function ModelsScreen() {
 			title="magus Models"
 			currentScreen="models"
 			statusLine={statusContent}
-			notice={noticeContent}
 			search={
 				modelsState.searchQuery || isSearchActive
 					? {
@@ -469,8 +429,8 @@ export function ModelsScreen() {
 								configPath: snapshot?.path ?? null,
 								width: listWidth,
 								// Rows the list did not use. One held back because the
-								// search bar and the notice each take a row from the panel
-								// without taking one from `listPanelHeight` — and an
+								// search bar takes a row from the panel without taking
+								// one from `listPanelHeight` — and an
 								// over-tall panel overprints rather than clipping.
 								available:
 									dimensions.listPanelHeight -