magus-cli 7.11.5 → 7.11.6

package/src/ui/screens/McpRegistryScreen.tsx

@@ -15,9 +15,17 @@ import {
 	addMcpServer,
 	getEnabledMcpServers,
 	getInstalledMcpServers,
+	removeMcpServer,
 	setAllowMcp,
 } from "../../services/claude-settings.js";
-import { formatDate, searchMcpServers } from "../../services/mcp-registry.js";
+import {
+	createLatestOnlyGuard,
+	formatDate,
+	isOfficialMcpServer,
+	officialFirst,
+	registryInstallPlan,
+	searchMcpServers,
+} from "../../services/mcp-registry.js";
 import type { McpRegistryServer, McpServerConfig } from "../../types/index.js";
 import { ScrollableList } from "../components/ScrollableList.js";
 import {
@@ -131,24 +139,52 @@ export function McpRegistryScreen() {
 		void loadInstalled();
 	}, [loadInstalled]);
 
+	// Overlapping loads (first load, debounce, R) can resolve out of order: only
+	// the newest request's response may touch state. Unmounting takes a token too,
+	// so a response that lands afterwards is dropped.
+	const guardRef = useRef(createLatestOnlyGuard());
+	// The name under the cursor, so a replaced list keeps it on the same server.
+	const selectedNameRef = useRef<string | undefined>(undefined);
+	selectedNameRef.current = servers[mcpRegistry.selectedIndex]?.name;
+	// The query the list on screen was loaded with: the cursor follows a name
+	// only across a reload of the same query, never into a different result set.
+	const loadedQueryRef = useRef<string | undefined>(undefined);
+	// The same query as state, for rendering: badges follow the list on screen,
+	// not the text being typed.
+	const [loadedQuery, setLoadedQuery] = useState("");
+
 	// Load servers
-	const loadServers = useCallback(async (query: string) => {
-		setIsLoading(true);
-		setError(null);
-		try {
-			const response = await searchMcpServers({ query, limit: 50 });
-			if (!response || !Array.isArray(response.servers)) {
-				throw new Error("Invalid response from MCP Registry API");
+	const loadServers = useCallback(
+		async (query: string) => {
+			const guard = guardRef.current;
+			const token = guard.next();
+			setIsLoading(true);
+			setError(null);
+			try {
+				const response = await searchMcpServers({ query, limit: 50 });
+				if (!response || !Array.isArray(response.servers)) {
+					throw new Error("Invalid response from MCP Registry API");
+				}
+				if (!guard.isLatest(token)) return;
+				// Deduplicate to show only latest version of each server, official first
+				const next = officialFirst(deduplicateServers(response.servers), query);
+				const sameQuery = loadedQueryRef.current === query;
+				const keptAt = sameQuery
+					? next.findIndex((server) => server.name === selectedNameRef.current)
+					: -1;
+				loadedQueryRef.current = query;
+				setLoadedQuery(query);
+				setServers(next);
+				dispatch({ type: "MCPREGISTRY_SELECT", index: Math.max(0, keptAt) });
+			} catch (err) {
+				if (!guard.isLatest(token)) return;
+				setError(err instanceof Error ? err.message : "Failed to load servers");
+				setServers([]);
 			}
-			// Deduplicate to show only latest version of each server
-			const deduplicated = deduplicateServers(response.servers);
-			setServers(deduplicated);
-		} catch (err) {
-			setError(err instanceof Error ? err.message : "Failed to load servers");
-			setServers([]);
-		}
-		setIsLoading(false);
-	}, []);
+			if (guard.isLatest(token)) setIsLoading(false);
+		},
+		[dispatch],
+	);
 
 	// Debounced search
 	const debouncedSearch = useCallback(
@@ -168,7 +204,9 @@ export function McpRegistryScreen() {
 	const initialQueryRef = useRef(searchQuery);
 	useEffect(() => {
 		loadServers(initialQueryRef.current);
+		const guard = guardRef.current;
 		return () => {
+			guard.next();
 			if (searchTimeoutRef.current) {
 				clearTimeout(searchTimeoutRef.current);
 			}
@@ -179,6 +217,12 @@ export function McpRegistryScreen() {
 
 	/** A new query: the list reloads, debounced, and the cursor starts over. */
 	const setQuery = (query: string) => {
+		// The shown list is stale from this keystroke: drop any response still in
+		// flight and mark the list pending until the scheduled load settles, so
+		// install/remove cannot act on the old rows. The scheduled loadServers
+		// always runs (or the screen unmounts) and clears this in every outcome.
+		guardRef.current.next();
+		setIsLoading(true);
 		setSearchQuery(query);
 		dispatch({ type: "MCPREGISTRY_SEARCH", query });
 		dispatch({ type: "MCPREGISTRY_SELECT", index: 0 });
@@ -201,6 +245,9 @@ export function McpRegistryScreen() {
 		},
 		search: () => dispatch({ type: "SET_SEARCHING", isSearching: true }),
 		local: () => navigateToScreen("mcp"),
+		remove: () => {
+			void handleRemove();
+		},
 		reload: () => {
 			void loadServers(searchQuery);
 		},
@@ -219,14 +266,53 @@ export function McpRegistryScreen() {
 		},
 	});
 
+	const handleRemove = async () => {
+		if (isLoading) return;
+		const server = servers[mcpRegistry.selectedIndex];
+		if (!server || !installedNames.has(server.name)) return;
+
+		const confirmed = await modal.confirm(
+			`Remove ${server.name}?`,
+			"This will remove the MCP server configuration.",
+		);
+		if (!confirmed) return;
+
+		modal.loading(`Removing ${server.name}...`);
+		try {
+			await removeMcpServer(server.name, state.projectPath);
+			modal.hideModal();
+			dispatch({ type: "MCP_SERVER_CHANGED", name: server.name });
+			await loadInstalled();
+		} catch (error) {
+			modal.hideModal();
+			await showFailures(
+				stepFailureReport(
+					`Could not remove ${server.name}`,
+					server.name,
+					error,
+				),
+			);
+		}
+	};
+
 	const handleInstall = async () => {
+		// While loading, the visible panel is "Loading..." and `servers` is the
+		// previous, hidden list: installing from it would add a row nobody sees.
+		if (isLoading) return;
 		const server = servers[mcpRegistry.selectedIndex];
 		if (!server) return;
 
-		const config: McpServerConfig = {
-			type: "http",
-			url: server.url,
-		};
+		const plan = registryInstallPlan(server);
+		if (!plan.ok) {
+			// Nothing is written: the popup comes before the modal and the writes.
+			await showFailures({
+				headline: `${server.name} wasn't installed`,
+				rows: [{ subject: server.name, reason: plan.reason }],
+				fix: null,
+			});
+			return;
+		}
+		const config: McpServerConfig = plan.config;
 
 		modal.loading(`Installing ${server.name}...`);
 		try {
@@ -250,6 +336,7 @@ export function McpRegistryScreen() {
 		server,
 		isInstalled: installedNames.has(server.name),
 		needsRestart: state.mcp.changedThisSession.includes(server.name),
+		isOfficial: isOfficialMcpServer(server, loadedQuery),
 	}));
 
 	// Get selected server
@@ -279,6 +366,9 @@ export function McpRegistryScreen() {
 			? `v${selectedServer.version}`
 			: "unknown";
 
+		const plan = registryInstallPlan(selectedServer);
+		const packageRuns = plan.ok && plan.kind !== "http" ? plan.config : null;
+
 		return (
 			<box flexDirection="column">
 				<text fg={theme.colors.accent}>
@@ -288,6 +378,30 @@ export function McpRegistryScreen() {
 					<text fg={theme.colors.text}>{selectedServer.short_description}</text>
 				</box>
 				<box marginTop={1}>{renderMcpRegistryStatus(selectedItem)}</box>
+				{selectedItem.isOfficial ? (
+					<box flexDirection="row">
+						<text fg={theme.colors.muted}>{"Publisher "}</text>
+						<text fg={theme.colors.success}>{"official"}</text>
+					</box>
+				) : null}
+				{packageRuns ? (
+					<box flexDirection="column" marginTop={1}>
+						<box flexDirection="row">
+							<text fg={theme.colors.muted}>{"Runs  "}</text>
+							<text fg={theme.colors.text}>
+								{[packageRuns.command, ...(packageRuns.args ?? [])].join(" ")}
+							</text>
+						</box>
+						<text fg={theme.colors.warning}>
+							It may need API keys or settings to work. magus doesn't add any.
+						</text>
+						{selectedServer.source_code_url ? (
+							<text fg={theme.colors.muted}>
+								The source below says what to set.
+							</text>
+						) : null}
+					</box>
+				) : null}
 				<box flexDirection="row" marginTop={1}>
 					<text fg={theme.colors.text}>
 						<strong>Version: </strong>
@@ -316,11 +430,17 @@ export function McpRegistryScreen() {
 						</text>
 					</box>
 				)}
-				{selectedItem.isInstalled ? null : (
-					<box marginTop={1}>
-						<text fg={theme.colors.muted}>Press Enter to install</text>
-					</box>
-				)}
+				<box marginTop={1}>
+					{!selectedItem.isInstalled && !plan.ok ? (
+						<text fg={theme.colors.warning}>{plan.reason}</text>
+					) : (
+						<text fg={theme.colors.muted}>
+							{selectedItem.isInstalled
+								? "Press d to remove"
+								: "Press Enter to install"}
+						</text>
+					)}
+				</box>
 			</box>
 		);
 	};