claudeup 3.16.0 → 4.0.0

package/src/ui/screens/McpScreen.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { jsx as _jsx } from "@opentui/react/jsx-runtime";
 import { useEffect, useCallback, useMemo } from "react";
 import { useApp, useModal, useNavigation } from "../state/AppContext.js";
 import { useDimensions } from "../state/DimensionsContext.js";
@@ -7,20 +7,19 @@ import { ScreenLayout } from "../components/layout/index.js";
 import { ScrollableList } from "../components/ScrollableList.js";
 import { getMcpServersByCategory, getCategoryDisplayName, categoryOrder, } from "../../data/mcp-servers.js";
 import { addMcpServer, removeMcpServer, getInstalledMcpServers, getEnabledMcpServers, } from "../../services/claude-settings.js";
+import { renderMcpRow, renderMcpDetail, } from "../renderers/mcpRenderers.js";
 export function McpScreen() {
     const { state, dispatch } = useApp();
     const { mcp } = state;
     const modal = useModal();
     const { navigateToScreen } = useNavigation();
     const dimensions = useDimensions();
-    // Fetch data
     const fetchData = useCallback(async () => {
         dispatch({ type: "MCP_DATA_LOADING" });
         try {
             const serversByCategory = getMcpServersByCategory();
             const installedServers = await getInstalledMcpServers(state.projectPath);
             const enabledServers = await getEnabledMcpServers(state.projectPath);
-            // Build flat list of all servers
             const servers = [];
             for (const category of categoryOrder) {
                 const categoryServers = serversByCategory[category];
@@ -28,7 +27,6 @@ export function McpScreen() {
                     servers.push(...categoryServers);
                 }
             }
-            // Convert McpServerConfig to boolean - server exists = installed
             const installedAsBooleans = {};
             for (const name of Object.keys(installedServers)) {
                 installedAsBooleans[name] = true;
@@ -49,7 +47,6 @@ export function McpScreen() {
     useEffect(() => {
         fetchData();
     }, [fetchData]);
-    // Build list items with categories
     const allListItems = useMemo(() => {
         if (mcp.servers.status !== "success")
             return [];
@@ -59,36 +56,17 @@ export function McpScreen() {
             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");
@@ -99,7 +77,7 @@ export function McpScreen() {
             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") {
@@ -110,11 +88,10 @@ export function McpScreen() {
         }
     });
     const handleSelect = async () => {
-        const item = listItems[mcp.selectedIndex];
-        if (!item || item.isCategory || !item.server)
+        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(`Remove ${server.name}?`, "This will remove the MCP server configuration.");
             if (confirmed) {
@@ -132,7 +109,6 @@ export function McpScreen() {
             }
         }
         else {
-            // Install server
             await installMcpServer(server);
         }
     };
@@ -148,7 +124,6 @@ export function McpScreen() {
                 env: server.env ? { ...server.env } : undefined,
             };
         }
-        // Handle configuration fields if required
         if (server.requiresConfig && server.configFields) {
             for (const field of server.configFields) {
                 const envVarName = field.envVar || field.name;
@@ -163,7 +138,7 @@ export function McpScreen() {
                 }
                 const value = await modal.input(`Configure ${server.name}`, `${field.label}${field.required ? " (required)" : ""}:`, field.default);
                 if (value === null)
-                    return; // User cancelled
+                    return;
                 if (field.required && !value) {
                     await modal.message("Required Field", `${field.label} is required.`, "error");
                     return;
@@ -186,36 +161,11 @@ export function McpScreen() {
             await modal.message("Error", `Failed to install: ${error}`, "error");
         }
     };
-    // Get selected item
-    const selectedItem = listItems[mcp.selectedIndex];
-    const renderDetail = () => {
-        if (mcp.servers.status === "loading") {
-            return _jsx("text", { fg: "gray", children: "Loading MCP servers..." });
-        }
-        if (!selectedItem || selectedItem.isCategory || !selectedItem.server) {
-            return (_jsx("box", { flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1, children: _jsx("text", { fg: "gray", children: "Select a server to see details" }) }));
-        }
-        const server = selectedItem.server;
-        const isInstalled = mcp.installedServers[server.name] !== undefined;
-        const isEnabled = mcp.installedServers[server.name] === true;
-        return (_jsxs("box", { flexDirection: "column", children: [_jsxs("box", { marginBottom: 1, children: [_jsx("text", { fg: "cyan", children: _jsxs("strong", { children: ["\u26A1 ", server.name] }) }), server.requiresConfig && _jsx("text", { fg: "yellow", children: " \u2699" })] }), _jsx("text", { fg: "gray", children: server.description }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("box", { children: [_jsx("text", { fg: "gray", children: "Status " }), isInstalled && isEnabled ? (_jsx("text", { fg: "green", children: "\u25CF Installed" })) : isInstalled ? (_jsx("text", { fg: "yellow", children: "\u25CF Disabled" })) : (_jsx("text", { fg: "gray", children: "\u25CB Not installed" }))] }), _jsxs("box", { children: [_jsx("text", { fg: "gray", children: "Type " }), _jsx("text", { fg: "white", children: server.type === "http" ? "HTTP" : "Command" })] }), server.type === "http" ? (_jsxs("box", { children: [_jsx("text", { fg: "gray", children: "URL " }), _jsx("text", { fg: "#5c9aff", children: server.url })] })) : (_jsxs("box", { children: [_jsx("text", { fg: "gray", children: "Command " }), _jsx("text", { fg: "cyan", children: server.command })] })), server.requiresConfig && (_jsxs("box", { children: [_jsx("text", { fg: "gray", children: "Config " }), _jsxs("text", { fg: "yellow", children: [server.configFields?.length || 0, " fields required"] })] }))] }), _jsx("box", { marginTop: 2, children: isInstalled ? (_jsxs("box", { children: [_jsxs("text", { bg: "red", fg: "white", children: [" ", "Enter", " "] }), _jsx("text", { fg: "gray", children: " Remove server" })] })) : (_jsxs("box", { children: [_jsxs("text", { bg: "green", fg: "black", children: [" ", "Enter", " "] }), _jsx("text", { fg: "gray", children: " Install server" })] })) })] }));
-    };
-    const renderListItem = (item, _idx, isSelected) => {
-        // Category header
-        if (item.isCategory) {
-            return (_jsx("text", { fg: "magenta", children: _jsxs("strong", { children: ["\u25B8 ", item.label] }) }));
-        }
-        // Server item
-        const server = item.server;
-        const isInstalled = server && mcp.installedServers[server.name] !== undefined;
-        const icon = isInstalled ? "●" : "○";
-        const iconColor = isInstalled ? "green" : "gray";
-        return isSelected ? (_jsxs("text", { bg: "magenta", fg: "white", children: [" ", icon, " ", server?.name || "", " "] })) : (_jsxs("text", { children: [_jsx("span", { fg: iconColor, children: icon }), _jsxs("span", { fg: "white", children: [" ", server?.name || ""] }), server?.requiresConfig && _jsx("span", { fg: "yellow", children: " \u2699" })] }));
-    };
-    // Calculate status counts
+    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 (_jsx(ScreenLayout, { title: "claudeup MCP Servers", subtitle: subtitle, currentScreen: "mcp", footerHints: "\u2191\u2193:nav \u2502 Enter:toggle \u2502 /:search \u2502 r:registry", listPanel: _jsx(ScrollableList, { items: listItems, selectedIndex: mcp.selectedIndex, renderItem: renderListItem, maxHeight: dimensions.listPanelHeight }), detailPanel: renderDetail() }));
+    return (_jsx(ScreenLayout, { title: "claudeup MCP Servers", subtitle: subtitle, currentScreen: "mcp", footerHints: "\u2191\u2193:nav \u2502 Enter:toggle \u2502 /:search \u2502 r:registry", listPanel: _jsx(ScrollableList, { items: allListItems, selectedIndex: mcp.selectedIndex, renderItem: renderMcpRow, maxHeight: dimensions.listPanelHeight }), detailPanel: renderMcpDetail(selectedItem, isLoading) }));
 }
 export default McpScreen;

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)}
 		/>
 	);
 }