magus-cli 0.0.0-placeholder → 7.1.0

package/src/ui/screens/McpRegistryScreen.tsx

@@ -0,0 +1,366 @@
+import React, { useEffect, useCallback, useState, useRef } from "react";
+import { ScreenLayout } from "../components/layout/index.js";
+import { useKeyboard } from "../hooks/useKeyboard.js";
+import { useApp, useModal, useNavigation } from "../state/AppContext.js";
+import { useDimensions } from "../state/DimensionsContext.js";
+
+import { addMcpServer, 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 { theme } from "../theme.js";
+
+/**
+ * Deduplicate servers by name, keeping only the latest version.
+ * Uses version string comparison, falling back to published_at date.
+ */
+function deduplicateServers(servers: McpRegistryServer[]): McpRegistryServer[] {
+	const serverMap = new Map<string, McpRegistryServer>();
+
+	for (const server of servers) {
+		const existing = serverMap.get(server.name);
+		if (!existing) {
+			serverMap.set(server.name, server);
+			continue;
+		}
+
+		// Compare versions - keep the newer one
+		const isNewer = compareVersions(server, existing) > 0;
+		if (isNewer) {
+			serverMap.set(server.name, server);
+		}
+	}
+
+	return Array.from(serverMap.values());
+}
+
+/**
+ * Compare two servers by version. Returns:
+ *  > 0 if a is newer
+ *  < 0 if b is newer
+ *  0 if equal or cannot determine
+ */
+function compareVersions(a: McpRegistryServer, b: McpRegistryServer): number {
+	// Try semver comparison first
+	if (a.version && b.version) {
+		const aParts = a.version.split(".").map((n) => Number.parseInt(n, 10) || 0);
+		const bParts = b.version.split(".").map((n) => Number.parseInt(n, 10) || 0);
+
+		for (let i = 0; i < Math.max(aParts.length, bParts.length); i++) {
+			const aVal = aParts[i] || 0;
+			const bVal = bParts[i] || 0;
+			if (aVal !== bVal) {
+				return aVal - bVal;
+			}
+		}
+	}
+
+	// Fall back to published_at date
+	if (a.published_at && b.published_at) {
+		return (
+			new Date(a.published_at).getTime() - new Date(b.published_at).getTime()
+		);
+	}
+
+	// If one has a date and other doesn't, prefer the one with date
+	if (a.published_at && !b.published_at) return 1;
+	if (!a.published_at && b.published_at) return -1;
+
+	return 0;
+}
+
+export function McpRegistryScreen() {
+	const { state, dispatch } = useApp();
+	const { mcpRegistry } = state;
+	const modal = useModal();
+	const { navigateToScreen } = useNavigation();
+	const dimensions = useDimensions();
+
+	const [servers, setServers] = useState<McpRegistryServer[]>([]);
+	const [isLoading, setIsLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+	const [searchQuery, setSearchQuery] = useState(mcpRegistry.searchQuery || "");
+
+	const isSearchActive =
+		state.isSearching &&
+		state.currentRoute.screen === "mcp-registry" &&
+		!state.modal;
+
+	const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+	// 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");
+			}
+			// 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);
+	}, []);
+
+	// Debounced search
+	const debouncedSearch = useCallback(
+		(query: string) => {
+			if (searchTimeoutRef.current) {
+				clearTimeout(searchTimeoutRef.current);
+			}
+			searchTimeoutRef.current = setTimeout(() => {
+				loadServers(query);
+			}, 300);
+		},
+		[loadServers],
+	);
+
+	// Initial load runs once with the query the screen opened with; later edits
+	// go through debouncedSearch, so the live query is deliberately not a dep.
+	const initialQueryRef = useRef(searchQuery);
+	useEffect(() => {
+		loadServers(initialQueryRef.current);
+		return () => {
+			if (searchTimeoutRef.current) {
+				clearTimeout(searchTimeoutRef.current);
+			}
+		};
+	}, [loadServers]);
+
+	// Keyboard handling
+	useKeyboard((event) => {
+		// Handle search mode
+		if (isSearchActive) {
+			if (event.name === "escape") {
+				dispatch({ type: "SET_SEARCHING", isSearching: false });
+			} else if (event.name === "enter") {
+				// Exit search mode and stay on list for navigation
+				dispatch({ type: "SET_SEARCHING", isSearching: false });
+			} else if (event.name === "up") {
+				// Allow navigation while searching
+				const newIndex = Math.max(0, mcpRegistry.selectedIndex - 1);
+				dispatch({ type: "MCPREGISTRY_SELECT", index: newIndex });
+			} else if (event.name === "down") {
+				// Allow navigation while searching
+				const newIndex = Math.min(
+					Math.max(0, servers.length - 1),
+					mcpRegistry.selectedIndex + 1,
+				);
+				dispatch({ type: "MCPREGISTRY_SELECT", index: newIndex });
+			} else if (event.name === "backspace" || event.name === "delete") {
+				const newQuery = searchQuery.slice(0, -1);
+				setSearchQuery(newQuery);
+				dispatch({ type: "MCPREGISTRY_SEARCH", query: newQuery });
+				debouncedSearch(newQuery);
+			} else if (event.name.length === 1 && !event.ctrl && !event.meta) {
+				const newQuery = searchQuery + event.name;
+				setSearchQuery(newQuery);
+				dispatch({ type: "MCPREGISTRY_SEARCH", query: newQuery });
+				debouncedSearch(newQuery);
+			}
+			return;
+		}
+
+		if (state.modal) return;
+
+		// Start search with /
+		if (event.name === "/") {
+			dispatch({ type: "SET_SEARCHING", isSearching: true });
+			return;
+		}
+
+		// Navigation
+		if (event.name === "up" || event.name === "k") {
+			const newIndex = Math.max(0, mcpRegistry.selectedIndex - 1);
+			dispatch({ type: "MCPREGISTRY_SELECT", index: newIndex });
+		} else if (event.name === "down" || event.name === "j") {
+			const newIndex = Math.min(
+				Math.max(0, servers.length - 1),
+				mcpRegistry.selectedIndex + 1,
+			);
+			dispatch({ type: "MCPREGISTRY_SELECT", index: newIndex });
+		} else if (event.name === "l") {
+			navigateToScreen("mcp");
+		} else if (event.name === "r" && event.shift) {
+			// `name` is always the unshifted key, so `=== "R"` never matched and
+			// refresh silently did nothing.
+			loadServers(searchQuery);
+		} else if (event.name === "enter") {
+			handleInstall();
+		}
+	});
+
+	const handleInstall = async () => {
+		const server = servers[mcpRegistry.selectedIndex];
+		if (!server) return;
+
+		const config: McpServerConfig = {
+			type: "http",
+			url: server.url,
+		};
+
+		modal.loading(`Installing ${server.name}...`);
+		try {
+			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",
+			);
+		} catch (error) {
+			modal.hideModal();
+			await modal.message("Error", `Failed to install: ${error}`, "error");
+		}
+	};
+
+	// Get selected server
+	const selectedServer = servers[mcpRegistry.selectedIndex];
+
+	const renderDetail = () => {
+		if (isLoading) {
+			return <text fg={theme.colors.muted}>Loading...</text>;
+		}
+
+		if (error) {
+			return <text fg={theme.colors.danger}>Error: {error}</text>;
+		}
+
+		if (!selectedServer) {
+			return (
+				<text fg={theme.colors.muted}>Select a server to see details</text>
+			);
+		}
+
+		const dateDisplay = selectedServer.published_at
+			? formatDate(selectedServer.published_at)
+			: "unknown";
+
+		const versionDisplay = selectedServer.version
+			? `v${selectedServer.version}`
+			: "unknown";
+
+		return (
+			<box flexDirection="column">
+				<text fg={theme.colors.accent}>
+					<strong>{selectedServer.name}</strong>
+				</text>
+				<box marginTop={1}>
+					<text fg={theme.colors.text}>{selectedServer.short_description}</text>
+				</box>
+				<box marginTop={1}>
+					<text fg={theme.colors.text}>
+						<strong>Version: </strong>
+					</text>
+					<text fg={theme.colors.success}>{versionDisplay}</text>
+				</box>
+				<box>
+					<text fg={theme.colors.text}>
+						<strong>Published: </strong>
+					</text>
+					<text fg={theme.colors.info}>{dateDisplay}</text>
+				</box>
+				<box marginTop={1} flexDirection="column">
+					<text fg={theme.colors.text}>
+						<strong>URL:</strong>
+					</text>
+					<text fg={theme.colors.info}>{selectedServer.url}</text>
+				</box>
+				{selectedServer.source_code_url && (
+					<box marginTop={1} flexDirection="column">
+						<text fg={theme.colors.text}>
+							<strong>Source:</strong>
+						</text>
+						<text fg={theme.colors.muted}>
+							{selectedServer.source_code_url}
+						</text>
+					</box>
+				)}
+				<box marginTop={1}>
+					<text fg={theme.colors.success}>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.colors.accent} fg={theme.hints.fg}>
+				{" "}
+				{server.name}
+				{version}{" "}
+			</text>
+		) : (
+			<text fg={theme.colors.text}>
+				<span>
+					<strong>{server.name}</strong>
+				</span>
+				<span fg={theme.colors.success}>{version}</span>
+			</text>
+		);
+	};
+
+	// Footer hints
+	const footerHints = isSearchActive
+		? [
+				{ keys: ["type"], label: "search" },
+				{ keys: ["↑", "↓"], label: "nav" },
+				{ keys: ["Enter"], label: "done" },
+				{ keys: ["Esc"], label: "cancel" },
+			]
+		: [
+				{ keys: ["↑", "↓"], label: "nav" },
+				{ keys: ["Enter"], label: "install" },
+				{ keys: ["/"], label: "search" },
+				{ keys: ["R"], label: "refresh" },
+				{ keys: ["l"], label: "local" },
+			];
+
+	// Status for search placeholder
+	const searchPlaceholder = `${servers.length} servers │ / to search`;
+
+	return (
+		<ScreenLayout
+			title="magus MCP Registry"
+			subtitle="Powered by MCP Registry"
+			currentScreen="mcp-registry"
+			search={{
+				isActive: isSearchActive,
+				query: searchQuery,
+				placeholder: searchPlaceholder,
+			}}
+			footerHints={footerHints}
+			listPanel={
+				isLoading ? (
+					<text fg={theme.colors.muted}>Loading...</text>
+				) : error ? (
+					<text fg={theme.colors.danger}>Error: {error}</text>
+				) : servers.length === 0 ? (
+					<text fg={theme.colors.muted}>No servers found</text>
+				) : (
+					<ScrollableList
+						items={servers}
+						selectedIndex={mcpRegistry.selectedIndex}
+						renderItem={renderListItem}
+						maxHeight={dimensions.listPanelHeight}
+						getKey={(server) => server.name}
+					/>
+				)
+			}
+			detailPanel={renderDetail()}
+		/>
+	);
+}
+
+export default McpRegistryScreen;

package/src/ui/screens/McpScreen.tsx

@@ -0,0 +1,256 @@
+import React, { useEffect, useCallback, useMemo } from "react";
+import { ScreenLayout } from "../components/layout/index.js";
+import { useKeyboard } from "../hooks/useKeyboard.js";
+import { useApp, useModal, useNavigation } from "../state/AppContext.js";
+import { useDimensions } from "../state/DimensionsContext.js";
+
+import {
+	categoryOrder,
+	getCategoryDisplayName,
+	getMcpServersByCategory,
+} from "../../data/mcp-servers.js";
+import {
+	addMcpServer,
+	getEnabledMcpServers,
+	getInstalledMcpServers,
+	removeMcpServer,
+} from "../../services/claude-settings.js";
+import { fetchCuratedMcpServers } from "../../services/mcp-registry.js";
+import type { McpServer, McpServerConfig } from "../../types/index.js";
+import { ScrollableList } from "../components/ScrollableList.js";
+import {
+	type McpListItem,
+	renderMcpDetail,
+	renderMcpRow,
+} from "../renderers/mcpRenderers.js";
+
+export function McpScreen() {
+	const { state, dispatch } = useApp();
+	const { mcp } = state;
+	const modal = useModal();
+	const { navigateToScreen } = useNavigation();
+	const dimensions = useDimensions();
+
+	const fetchData = useCallback(async () => {
+		dispatch({ type: "MCP_DATA_LOADING" });
+		try {
+			const curatedServers = await fetchCuratedMcpServers(
+				AbortSignal.timeout(10_000),
+			);
+			const serversByCategory = getMcpServersByCategory(curatedServers);
+			const installedServers = await getInstalledMcpServers(state.projectPath);
+			const enabledServers = await getEnabledMcpServers(state.projectPath);
+
+			const servers: McpServer[] = [];
+			for (const category of categoryOrder) {
+				const categoryServers = serversByCategory[category];
+				if (categoryServers) {
+					servers.push(...categoryServers);
+				}
+			}
+
+			const installedAsBooleans: Record<string, boolean> = {};
+			for (const name of Object.keys(installedServers)) {
+				installedAsBooleans[name] = true;
+			}
+
+			dispatch({
+				type: "MCP_DATA_SUCCESS",
+				servers,
+				installedServers: { ...installedAsBooleans, ...enabledServers },
+			});
+		} catch (error) {
+			dispatch({
+				type: "MCP_DATA_ERROR",
+				error: error instanceof Error ? error : new Error(String(error)),
+			});
+		}
+	}, [dispatch, state.projectPath]);
+
+	useEffect(() => {
+		fetchData();
+	}, [fetchData]);
+
+	const allListItems = useMemo((): McpListItem[] => {
+		if (mcp.servers.status !== "success") return [];
+
+		const serversByCategory = getMcpServersByCategory(mcp.servers.data);
+		const items: McpListItem[] = [];
+
+		for (const category of categoryOrder) {
+			const servers = serversByCategory[category];
+			if (!servers || servers.length === 0) continue;
+
+			items.push({ kind: "category", label: getCategoryDisplayName(category) });
+
+			for (const server of servers) {
+				const isInstalled = mcp.installedServers[server.name] !== undefined;
+				items.push({ kind: "server", server, isInstalled });
+			}
+		}
+
+		return items;
+	}, [mcp.servers, mcp.installedServers]);
+
+	useKeyboard((event) => {
+		if (state.isSearching || state.modal) return;
+
+		if (event.name === "/") {
+			dispatch({ type: "SET_SEARCHING", isSearching: true });
+			navigateToScreen("mcp-registry");
+			return;
+		}
+
+		if (event.name === "up" || event.name === "k") {
+			const newIndex = Math.max(0, mcp.selectedIndex - 1);
+			dispatch({ type: "MCP_SELECT", index: newIndex });
+		} else if (event.name === "down" || event.name === "j") {
+			const newIndex = Math.min(allListItems.length - 1, mcp.selectedIndex + 1);
+			dispatch({ type: "MCP_SELECT", index: newIndex });
+		} else if (event.name === "r") {
+			navigateToScreen("mcp-registry");
+		} else if (event.name === "enter") {
+			handleSelect();
+		}
+	});
+
+	const handleSelect = async () => {
+		const item = allListItems[mcp.selectedIndex];
+		if (!item || item.kind === "category") return;
+
+		const { server, isInstalled } = item;
+
+		if (isInstalled) {
+			const confirmed = await modal.confirm(
+				`Remove ${server.name}?`,
+				"This will remove the MCP server configuration.",
+			);
+			if (confirmed) {
+				modal.loading(`Removing ${server.name}...`);
+				try {
+					await removeMcpServer(server.name, state.projectPath);
+					modal.hideModal();
+					await modal.message(
+						"Removed",
+						`${server.name} has been removed.`,
+						"success",
+					);
+					fetchData();
+				} catch (error) {
+					modal.hideModal();
+					await modal.message("Error", `Failed to remove: ${error}`, "error");
+				}
+			}
+		} else {
+			await installMcpServer(server);
+		}
+	};
+
+	const installMcpServer = async (server: McpServer) => {
+		let config: McpServerConfig;
+
+		if (server.type === "http") {
+			if (!server.url)
+				throw new Error(`${server.name} is missing its HTTP URL`);
+			config = { type: "http", url: server.url };
+		} else {
+			if (!server.command) {
+				throw new Error(`${server.name} is missing its launch command`);
+			}
+			config = {
+				command: server.command,
+				args: server.args ? [...server.args] : undefined,
+				env: server.env ? { ...server.env } : undefined,
+			};
+		}
+
+		if (server.requiresConfig && server.configFields) {
+			for (const field of server.configFields) {
+				const envVarName = field.envVar || field.name;
+				const existingValue = process.env[envVarName];
+
+				if (existingValue) {
+					const useExisting = await modal.confirm(
+						`Use ${envVarName}?`,
+						`${envVarName} is set in your environment. Use the existing value?`,
+					);
+					if (useExisting) {
+						config.env = config.env || {};
+						config.env[envVarName] = `\${${envVarName}}`;
+						continue;
+					}
+				}
+
+				const value = await modal.input(
+					`Configure ${server.name}`,
+					`${field.label}${field.required ? " (required)" : ""}:`,
+					field.default,
+				);
+				if (value === null) return;
+
+				if (field.required && !value) {
+					await modal.message(
+						"Required Field",
+						`${field.label} is required.`,
+						"error",
+					);
+					return;
+				}
+
+				if (value) {
+					config.env = config.env || {};
+					config.env[envVarName] = value;
+				}
+			}
+		}
+
+		modal.loading(`Installing ${server.name}...`);
+		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",
+			);
+			fetchData();
+		} catch (error) {
+			modal.hideModal();
+			await modal.message("Error", `Failed to install: ${error}`, "error");
+		}
+	};
+
+	const selectedItem = allListItems[mcp.selectedIndex];
+	const isLoading = mcp.servers.status === "loading";
+
+	const installedCount = Object.keys(mcp.installedServers).length;
+	const enabledCount = Object.values(mcp.installedServers).filter(
+		(v) => v === true,
+	).length;
+	const subtitle = `${enabledCount} enabled │ ${installedCount} configured │ / to search`;
+
+	return (
+		<ScreenLayout
+			title="magus MCP Servers"
+			subtitle={subtitle}
+			currentScreen="mcp"
+			footerHints={[
+				{ keys: ["↑", "↓"], label: "nav" },
+				{ keys: ["Enter"], label: "toggle" },
+				{ keys: ["/"], label: "search" },
+				{ keys: ["r"], label: "registry" },
+			]}
+			listPanel={
+				<ScrollableList
+					items={allListItems}
+					selectedIndex={mcp.selectedIndex}
+					renderItem={renderMcpRow}
+					maxHeight={dimensions.listPanelHeight}
+				/>
+			}
+			detailPanel={renderMcpDetail(selectedItem, isLoading)}
+		/>
+	);
+}
+
+export default McpScreen;