claudeup 1.8.0 → 3.3.0

package/src/ui/screens/McpRegistryScreen.tsx

@@ -0,0 +1,331 @@
+import React, { useEffect, useCallback, useState, useRef } from "react";
+import { useApp, useModal, useNavigation } from "../state/AppContext.js";
+import { useDimensions } from "../state/DimensionsContext.js";
+import { useKeyboard } from "../hooks/useKeyboard.js";
+import { ScreenLayout } from "../components/layout/index.js";
+import { ScrollableList } from "../components/ScrollableList.js";
+import { searchMcpServers, formatDate } from "../../services/mcp-registry.js";
+import { addMcpServer, setAllowMcp } from "../../services/claude-settings.js";
+import type { McpRegistryServer, McpServerConfig } from "../../types/index.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) => parseInt(n, 10) || 0);
+		const bParts = b.version.split(".").map((n) => 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],
+	);
+
+	useEffect(() => {
+		loadServers(searchQuery);
+		return () => {
+			if (searchTimeoutRef.current) {
+				clearTimeout(searchTimeoutRef.current);
+			}
+		};
+	}, []);
+
+	// 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") {
+			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="gray">Loading...</text>;
+		}
+
+		if (error) {
+			return <text fg="red">Error: {error}</text>;
+		}
+
+		if (!selectedServer) {
+			return <text fg="gray">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="magenta"><strong>{selectedServer.name}</strong></text>
+				<box marginTop={1}>
+					<text>{selectedServer.short_description}</text>
+				</box>
+				<box marginTop={1}>
+					<text><strong>Version: </strong></text>
+					<text fg="green">{versionDisplay}</text>
+				</box>
+				<box>
+					<text><strong>Published: </strong></text>
+					<text fg="cyan">{dateDisplay}</text>
+				</box>
+				<box marginTop={1} flexDirection="column">
+					<text><strong>URL:</strong></text>
+					<text fg="cyan">{selectedServer.url}</text>
+				</box>
+				{selectedServer.source_code_url && (
+					<box marginTop={1} flexDirection="column">
+						<text><strong>Source:</strong></text>
+						<text fg="gray">{selectedServer.source_code_url}</text>
+					</box>
+				)}
+				<box marginTop={1}>
+					<text fg="green">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="magenta" fg="white">
+				{" "}
+				{server.name}
+				{version}{" "}
+			</text>
+		) : (
+			<text>
+				<span><strong>{server.name}</strong></span>
+				<span fg="green">{version}</span>
+			</text>
+		);
+	};
+
+	// Footer hints
+	const footerHints = isSearchActive
+		? "Type to search │ ↑↓:nav │ Enter:done │ Esc:cancel"
+		: "↑↓:nav │ Enter:install │ /:search │ R:refresh │ l:local";
+
+	// Status for search placeholder
+	const searchPlaceholder = `${servers.length} servers │ / to search`;
+
+	return (
+		<ScreenLayout
+			title="claudeup MCP Registry"
+			subtitle="Powered by MCP Registry"
+			currentScreen="mcp-registry"
+			search={{
+				isActive: isSearchActive,
+				query: searchQuery,
+				placeholder: searchPlaceholder,
+			}}
+			footerHints={footerHints}
+			listPanel={
+				isLoading ? (
+					<text fg="gray">Loading...</text>
+				) : error ? (
+					<text fg="red">Error: {error}</text>
+				) : servers.length === 0 ? (
+					<text fg="gray">No servers found</text>
+				) : (
+					<ScrollableList
+						items={servers}
+						selectedIndex={mcpRegistry.selectedIndex}
+						renderItem={renderListItem}
+						maxHeight={dimensions.listPanelHeight}
+					/>
+				)
+			}
+			detailPanel={renderDetail()}
+		/>
+	);
+}
+
+export default McpRegistryScreen;

package/{dist → src}/ui/screens/McpScreen.js

@@ -1,12 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useCallback, useMemo } from 'react';
-import { Box, Text, useInput } from 'ink';
-import { useApp, useModal, useNavigation } from '../state/AppContext.js';
-import { useDimensions } from '../state/DimensionsContext.js';
-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 { jsx as _jsx, jsxs as _jsxs } 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";
+import { useKeyboard } from "../hooks/useKeyboard.js";
+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";
 export function McpScreen() {
     const { state, dispatch } = useApp();
     const { mcp } = state;
@@ -15,7 +15,7 @@ export function McpScreen() {
     const dimensions = useDimensions();
     // Fetch data
     const fetchData = useCallback(async () => {
-        dispatch({ type: 'MCP_DATA_LOADING' });
+        dispatch({ type: "MCP_DATA_LOADING" });
         try {
             const serversByCategory = getMcpServersByCategory();
             const installedServers = await getInstalledMcpServers(state.projectPath);
@@ -34,14 +34,14 @@ export function McpScreen() {
                 installedAsBooleans[name] = true;
             }
             dispatch({
-                type: 'MCP_DATA_SUCCESS',
+                type: "MCP_DATA_SUCCESS",
                 servers,
                 installedServers: { ...installedAsBooleans, ...enabledServers },
             });
         }
         catch (error) {
             dispatch({
-                type: 'MCP_DATA_ERROR',
+                type: "MCP_DATA_ERROR",
                 error: error instanceof Error ? error : new Error(String(error)),
             });
         }
@@ -51,7 +51,7 @@ export function McpScreen() {
     }, [fetchData]);
     // Build list items with categories
     const allListItems = useMemo(() => {
-        if (mcp.servers.status !== 'success')
+        if (mcp.servers.status !== "success")
             return [];
         const serversByCategory = getMcpServersByCategory();
         const items = [];
@@ -66,14 +66,14 @@ export function McpScreen() {
             for (const server of servers) {
                 const isInstalled = mcp.installedServers[server.name] !== undefined;
                 const isEnabled = mcp.installedServers[server.name] === true;
-                let status = '○';
+                let status = "○";
                 if (isInstalled && isEnabled) {
-                    status = '●';
+                    status = "●";
                 }
                 else if (isInstalled) {
-                    status = '●';
+                    status = "●";
                 }
-                const configTag = server.requiresConfig ? ' *' : '';
+                const configTag = server.requiresConfig ? " *" : "";
                 items.push({
                     label: `  ${status} ${server.name}${configTag}`,
                     server,
@@ -85,27 +85,27 @@ export function McpScreen() {
     // Use all items - search goes to global registry, not local filter
     const listItems = allListItems;
     // Keyboard handling
-    useInput((input, key) => {
+    useKeyboard((event) => {
         if (state.isSearching || state.modal)
             return;
         // Start search - navigate to registry with search mode active
-        if (input === '/') {
-            dispatch({ type: 'SET_SEARCHING', isSearching: true });
-            navigateToScreen('mcp-registry');
+        if (event.name === "/") {
+            dispatch({ type: "SET_SEARCHING", isSearching: true });
+            navigateToScreen("mcp-registry");
             return;
         }
-        if (key.upArrow || input === 'k') {
+        if (event.name === "up" || event.name === "k") {
             const newIndex = Math.max(0, mcp.selectedIndex - 1);
-            dispatch({ type: 'MCP_SELECT', index: newIndex });
+            dispatch({ type: "MCP_SELECT", index: newIndex });
         }
-        else if (key.downArrow || input === 'j') {
+        else if (event.name === "down" || event.name === "j") {
             const newIndex = Math.min(listItems.length - 1, mcp.selectedIndex + 1);
-            dispatch({ type: 'MCP_SELECT', index: newIndex });
+            dispatch({ type: "MCP_SELECT", index: newIndex });
         }
-        else if (input === 'r') {
-            navigateToScreen('mcp-registry');
+        else if (event.name === "r") {
+            navigateToScreen("mcp-registry");
         }
-        else if (key.return) {
+        else if (event.name === "enter") {
             handleSelect();
         }
     });
@@ -116,18 +116,18 @@ export function McpScreen() {
         const server = item.server;
         const isInstalled = mcp.installedServers[server.name] !== undefined;
         if (isInstalled) {
-            const confirmed = await modal.confirm(`Remove ${server.name}?`, 'This will remove the MCP server configuration.');
+            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');
+                    await modal.message("Removed", `${server.name} has been removed.`, "success");
                     fetchData();
                 }
                 catch (error) {
                     modal.hideModal();
-                    await modal.message('Error', `Failed to remove: ${error}`, 'error');
+                    await modal.message("Error", `Failed to remove: ${error}`, "error");
                 }
             }
         }
@@ -138,8 +138,8 @@ export function McpScreen() {
     };
     const installMcpServer = async (server) => {
         let config;
-        if (server.type === 'http') {
-            config = { type: 'http', url: server.url };
+        if (server.type === "http") {
+            config = { type: "http", url: server.url };
         }
         else {
             config = {
@@ -161,11 +161,11 @@ export function McpScreen() {
                         continue;
                     }
                 }
-                const value = await modal.input(`Configure ${server.name}`, `${field.label}${field.required ? ' (required)' : ''}:`, field.default);
+                const value = await modal.input(`Configure ${server.name}`, `${field.label}${field.required ? " (required)" : ""}:`, field.default);
                 if (value === null)
                     return; // User cancelled
                 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;
                 }
                 if (value) {
@@ -178,45 +178,44 @@ 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');
+            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');
+            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, { color: "gray", children: "Loading MCP servers..." });
+        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, { color: "gray", children: "Select a server to see details" }) }));
+            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: [_jsxs(Text, { bold: true, color: "cyan", children: ["\u26A1 ", server.name] }), server.requiresConfig && _jsx(Text, { color: "yellow", children: " \u2699" })] }), _jsx(Text, { color: "gray", children: server.description }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: "gray", children: "Status   " }), isInstalled && isEnabled ? (_jsx(Text, { color: "green", children: "\u25CF Installed" })) : isInstalled ? (_jsx(Text, { color: "yellow", children: "\u25CF Disabled" })) : (_jsx(Text, { color: "gray", children: "\u25CB Not installed" }))] }), _jsxs(Box, { children: [_jsx(Text, { color: "gray", children: "Type     " }), _jsx(Text, { color: "white", children: server.type === 'http' ? 'HTTP' : 'Command' })] }), server.type === 'http' ? (_jsxs(Box, { children: [_jsx(Text, { color: "gray", children: "URL      " }), _jsx(Text, { color: "blue", children: server.url })] })) : (_jsxs(Box, { children: [_jsx(Text, { color: "gray", children: "Command  " }), _jsx(Text, { color: "cyan", children: server.command })] })), server.requiresConfig && (_jsxs(Box, { children: [_jsx(Text, { color: "gray", children: "Config   " }), _jsxs(Text, { color: "yellow", children: [server.configFields?.length || 0, " fields required"] })] }))] }), _jsx(Box, { marginTop: 2, children: isInstalled ? (_jsxs(Box, { children: [_jsxs(Text, { backgroundColor: "red", color: "white", children: [' ', "Enter", ' '] }), _jsx(Text, { color: "gray", children: " Remove server" })] })) : (_jsxs(Box, { children: [_jsxs(Text, { backgroundColor: "green", color: "black", children: [' ', "Enter", ' '] }), _jsx(Text, { color: "gray", children: " Install server" })] })) })] }));
+        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: "blue", 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: [_jsx("text", { bg: "red", fg: "white", children: " Enter " }), _jsx("text", { fg: "gray", children: " Remove server" })] })) : (_jsxs("box", { children: [_jsx("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 (_jsxs(Text, { bold: true, color: "magenta", children: ["\u25B8 ", item.label] }));
+            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, { backgroundColor: "magenta", color: "white", wrap: "truncate", children: [' ', icon, " ", server?.name || '', ' '] })) : (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: iconColor, children: icon }), _jsxs(Text, { color: "white", children: [' ', server?.name || ''] }), server?.requiresConfig && _jsx(Text, { color: "yellow", children: " \u2699" })] }));
+        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 installedCount = Object.keys(mcp.installedServers).length;
-    const enabledCount = Object.values(mcp.installedServers).filter(v => v === true).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() }));
 }
 export default McpScreen;
-//# sourceMappingURL=McpScreen.js.map