claudeup 3.17.0 → 4.0.1

package/src/ui/screens/McpScreen.tsx

@@ -16,12 +16,11 @@ import {
 	getEnabledMcpServers,
 } from "../../services/claude-settings.js";
 import type { McpServer, McpServerConfig } from "../../types/index.js";
-
-interface ListItem {
-	label: string;
-	server?: McpServer;
-	isCategory?: boolean;
-}
+import {
+	renderMcpRow,
+	renderMcpDetail,
+	type McpListItem,
+} from "../renderers/mcpRenderers.js";
 
 export function McpScreen() {
 	const { state, dispatch } = useApp();
@@ -30,7 +29,6 @@ export function McpScreen() {
 	const { navigateToScreen } = useNavigation();
 	const dimensions = useDimensions();
 
-	// Fetch data
 	const fetchData = useCallback(async () => {
 		dispatch({ type: "MCP_DATA_LOADING" });
 		try {
@@ -38,7 +36,6 @@ export function McpScreen() {
 			const installedServers = await getInstalledMcpServers(state.projectPath);
 			const enabledServers = await getEnabledMcpServers(state.projectPath);
 
-			// Build flat list of all servers
 			const servers: McpServer[] = [];
 			for (const category of categoryOrder) {
 				const categoryServers = serversByCategory[category];
@@ -47,7 +44,6 @@ export function McpScreen() {
 				}
 			}
 
-			// Convert McpServerConfig to boolean - server exists = installed
 			const installedAsBooleans: Record<string, boolean> = {};
 			for (const name of Object.keys(installedServers)) {
 				installedAsBooleans[name] = true;
@@ -70,53 +66,30 @@ export function McpScreen() {
 		fetchData();
 	}, [fetchData]);
 
-	// Build list items with categories
-	const allListItems = useMemo((): ListItem[] => {
+	const allListItems = useMemo((): McpListItem[] => {
 		if (mcp.servers.status !== "success") return [];
 
 		const serversByCategory = getMcpServersByCategory();
-		const items: ListItem[] = [];
+		const items: McpListItem[] = [];
 
 		for (const category of categoryOrder) {
 			const servers = serversByCategory[category];
 			if (!servers || servers.length === 0) continue;
 
-			items.push({
-				label: getCategoryDisplayName(category),
-				isCategory: true,
-			});
+			items.push({ kind: "category", label: getCategoryDisplayName(category) });
 
 			for (const server of servers) {
 				const isInstalled = mcp.installedServers[server.name] !== undefined;
-				const isEnabled = mcp.installedServers[server.name] === true;
-
-				let status = "○";
-				if (isInstalled && isEnabled) {
-					status = "●";
-				} else if (isInstalled) {
-					status = "●";
-				}
-
-				const configTag = server.requiresConfig ? " *" : "";
-
-				items.push({
-					label: `  ${status} ${server.name}${configTag}`,
-					server,
-				});
+				items.push({ kind: "server", server, isInstalled });
 			}
 		}
 
 		return items;
 	}, [mcp.servers.status, mcp.installedServers]);
 
-	// Use all items - search goes to global registry, not local filter
-	const listItems = allListItems;
-
-	// Keyboard handling
 	useKeyboard((event) => {
 		if (state.isSearching || state.modal) return;
 
-		// Start search - navigate to registry with search mode active
 		if (event.name === "/") {
 			dispatch({ type: "SET_SEARCHING", isSearching: true });
 			navigateToScreen("mcp-registry");
@@ -127,7 +100,7 @@ export function McpScreen() {
 			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(listItems.length - 1, mcp.selectedIndex + 1);
+			const newIndex = Math.min(allListItems.length - 1, mcp.selectedIndex + 1);
 			dispatch({ type: "MCP_SELECT", index: newIndex });
 		} else if (event.name === "r") {
 			navigateToScreen("mcp-registry");
@@ -137,11 +110,10 @@ export function McpScreen() {
 	});
 
 	const handleSelect = async () => {
-		const item = listItems[mcp.selectedIndex];
-		if (!item || item.isCategory || !item.server) return;
+		const item = allListItems[mcp.selectedIndex];
+		if (!item || item.kind === "category") return;
 
-		const server = item.server;
-		const isInstalled = mcp.installedServers[server.name] !== undefined;
+		const { server, isInstalled } = item;
 
 		if (isInstalled) {
 			const confirmed = await modal.confirm(
@@ -153,11 +125,7 @@ export function McpScreen() {
 				try {
 					await removeMcpServer(server.name, state.projectPath);
 					modal.hideModal();
-					await modal.message(
-						"Removed",
-						`${server.name} has been removed.`,
-						"success",
-					);
+					await modal.message("Removed", `${server.name} has been removed.`, "success");
 					fetchData();
 				} catch (error) {
 					modal.hideModal();
@@ -165,7 +133,6 @@ export function McpScreen() {
 				}
 			}
 		} else {
-			// Install server
 			await installMcpServer(server);
 		}
 	};
@@ -183,7 +150,6 @@ export function McpScreen() {
 			};
 		}
 
-		// Handle configuration fields if required
 		if (server.requiresConfig && server.configFields) {
 			for (const field of server.configFields) {
 				const envVarName = field.envVar || field.name;
@@ -206,15 +172,10 @@ export function McpScreen() {
 					`${field.label}${field.required ? " (required)" : ""}:`,
 					field.default,
 				);
-
-				if (value === null) return; // User cancelled
+				if (value === null) return;
 
 				if (field.required && !value) {
-					await modal.message(
-						"Required Field",
-						`${field.label} is required.`,
-						"error",
-					);
+					await modal.message("Required Field", `${field.label} is required.`, "error");
 					return;
 				}
 
@@ -241,139 +202,9 @@ export function McpScreen() {
 		}
 	};
 
-	// Get selected item
-	const selectedItem = listItems[mcp.selectedIndex];
-
-	const renderDetail = () => {
-		if (mcp.servers.status === "loading") {
-			return <text fg="gray">Loading MCP servers...</text>;
-		}
-
-		if (!selectedItem || selectedItem.isCategory || !selectedItem.server) {
-			return (
-				<box
-					flexDirection="column"
-					alignItems="center"
-					justifyContent="center"
-					flexGrow={1}
-				>
-					<text fg="gray">Select a server to see details</text>
-				</box>
-			);
-		}
-
-		const server = selectedItem.server;
-		const isInstalled = mcp.installedServers[server.name] !== undefined;
-		const isEnabled = mcp.installedServers[server.name] === true;
-
-		return (
-			<box flexDirection="column">
-				<box marginBottom={1}>
-					<text fg="cyan">
-						<strong>⚡ {server.name}</strong>
-					</text>
-					{server.requiresConfig && <text fg="yellow"> ⚙</text>}
-				</box>
-
-				<text fg="gray">{server.description}</text>
-
-				<box marginTop={1} flexDirection="column">
-					<box>
-						<text fg="gray">Status </text>
-						{isInstalled && isEnabled ? (
-							<text fg="green">● Installed</text>
-						) : isInstalled ? (
-							<text fg="yellow">● Disabled</text>
-						) : (
-							<text fg="gray">○ Not installed</text>
-						)}
-					</box>
-					<box>
-						<text fg="gray">Type </text>
-						<text fg="white">
-							{server.type === "http" ? "HTTP" : "Command"}
-						</text>
-					</box>
-					{server.type === "http" ? (
-						<box>
-							<text fg="gray">URL </text>
-							<text fg="#5c9aff">{server.url}</text>
-						</box>
-					) : (
-						<box>
-							<text fg="gray">Command </text>
-							<text fg="cyan">{server.command}</text>
-						</box>
-					)}
-					{server.requiresConfig && (
-						<box>
-							<text fg="gray">Config </text>
-							<text fg="yellow">
-								{server.configFields?.length || 0} fields required
-							</text>
-						</box>
-					)}
-				</box>
-
-				<box marginTop={2}>
-					{isInstalled ? (
-						<box>
-							<text bg="red" fg="white">
-								{" "}
-								Enter{" "}
-							</text>
-							<text fg="gray"> Remove server</text>
-						</box>
-					) : (
-						<box>
-							<text bg="green" fg="black">
-								{" "}
-								Enter{" "}
-							</text>
-							<text fg="gray"> Install server</text>
-						</box>
-					)}
-				</box>
-			</box>
-		);
-	};
-
-	const renderListItem = (
-		item: ListItem,
-		_idx: number,
-		isSelected: boolean,
-	) => {
-		// Category header
-		if (item.isCategory) {
-			return (
-				<text fg="magenta">
-					<strong>▸ {item.label}</strong>
-				</text>
-			);
-		}
-
-		// Server item
-		const server = item.server;
-		const isInstalled =
-			server && mcp.installedServers[server.name] !== undefined;
-		const icon = isInstalled ? "●" : "○";
-		const iconColor = isInstalled ? "green" : "gray";
-
-		return isSelected ? (
-			<text bg="magenta" fg="white">
-				{" "}
-				{icon} {server?.name || ""}{" "}
-			</text>
-		) : (
-			<text>
-				<span fg={iconColor}>{icon}</span>
-				<span fg="white"> {server?.name || ""}</span>
-				{server?.requiresConfig && <span fg="yellow"> ⚙</span>}
-			</text>
-		);
-	};
+	const selectedItem = allListItems[mcp.selectedIndex];
+	const isLoading = mcp.servers.status === "loading";
 
-	// Calculate status counts
 	const installedCount = Object.keys(mcp.installedServers).length;
 	const enabledCount = Object.values(mcp.installedServers).filter(
 		(v) => v === true,
@@ -388,13 +219,13 @@ export function McpScreen() {
 			footerHints="↑↓:nav │ Enter:toggle │ /:search │ r:registry"
 			listPanel={
 				<ScrollableList
-					items={listItems}
+					items={allListItems}
 					selectedIndex={mcp.selectedIndex}
-					renderItem={renderListItem}
+					renderItem={renderMcpRow}
 					maxHeight={dimensions.listPanelHeight}
 				/>
 			}
-			detailPanel={renderDetail()}
+			detailPanel={renderMcpDetail(selectedItem, isLoading)}
 		/>
 	);
 }