From a01471f469aeac720d9ff2f2704de9faf4afad83 Mon Sep 17 00:00:00 2001
From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com>
Date: Tue, 18 Feb 2025 15:37:42 -0800
Subject: [PATCH] Show MCP server display name instead of ID

---
 src/core/webview/ClineProvider.ts              | 18 +++++++++---------
 webview-ui/src/components/chat/ChatRow.tsx     |  9 ++++++---
 webview-ui/src/components/mcp/McpView.tsx      |  5 ++++-
 .../src/context/ExtensionStateContext.tsx      | 12 ++++++++++--
 4 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/src/core/webview/ClineProvider.ts b/src/core/webview/ClineProvider.ts
index b19295cdd6..5ccdea2a95 100644
--- a/src/core/webview/ClineProvider.ts
+++ b/src/core/webview/ClineProvider.ts
@@ -406,7 +406,15 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 						// (see normalizeApiConfiguration > openrouter)
 						// Prefetch marketplace and OpenRouter models
 
-						this.prefetchMcpMarketplace()
+						this.getGlobalState("mcpMarketplaceCatalog").then((mcpMarketplaceCatalog) => {
+							if (mcpMarketplaceCatalog) {
+								this.postMessageToWebview({
+									type: "mcpMarketplaceCatalog",
+									mcpMarketplaceCatalog: mcpMarketplaceCatalog as McpMarketplaceCatalog,
+								})
+							}
+						})
+						this.silentlyRefreshMcpMarketplace()
 						this.refreshOpenRouterModels().then(async (openRouterModels) => {
 							if (openRouterModels) {
 								// update model info in state (this needs to be done here since we don't want to update state while settings is open, and we may refresh models there)
@@ -1114,14 +1122,6 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 		}
 	}
 
-	async prefetchMcpMarketplace() {
-		try {
-			await this.fetchMcpMarketplaceFromApi(true)
-		} catch (error) {
-			console.error("Failed to prefetch MCP marketplace:", error)
-		}
-	}
-
 	async silentlyRefreshMcpMarketplace() {
 		try {
 			const catalog = await this.fetchMcpMarketplaceFromApi(true)
diff --git a/webview-ui/src/components/chat/ChatRow.tsx b/webview-ui/src/components/chat/ChatRow.tsx
index c5e13d39ec..f77019fc3f 100644
--- a/webview-ui/src/components/chat/ChatRow.tsx
+++ b/webview-ui/src/components/chat/ChatRow.tsx
@@ -13,7 +13,7 @@ import {
 } from "../../../../src/shared/ExtensionMessage"
 import { COMMAND_OUTPUT_STRING, COMMAND_REQ_APP_STRING } from "../../../../src/shared/combineCommandSequences"
 import { useExtensionState } from "../../context/ExtensionStateContext"
-import { findMatchingResourceOrTemplate } from "../../utils/mcp"
+import { findMatchingResourceOrTemplate, getMcpServerDisplayName } from "../../utils/mcp"
 import { vscode } from "../../utils/vscode"
 import { CheckpointControls, CheckpointOverlay } from "../common/CheckpointControls"
 import CodeAccordian, { cleanPathPrefix } from "../common/CodeAccordian"
@@ -100,7 +100,7 @@ const ChatRow = memo(
 export default ChatRow
 
 export const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifiedMessage, isLast }: ChatRowContentProps) => {
-	const { mcpServers } = useExtensionState()
+	const { mcpServers, mcpMarketplaceCatalog } = useExtensionState()
 
 	const [seeNewChangesDisabled, setSeeNewChangesDisabled] = useState(false)
 
@@ -203,7 +203,10 @@ export const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifi
 					),
 					<span style={{ color: normalColor, fontWeight: "bold", wordBreak: "break-word" }}>
 						Cline wants to {mcpServerUse.type === "use_mcp_tool" ? "use a tool" : "access a resource"} on the{" "}
-						<code style={{ wordBreak: "break-all" }}>{mcpServerUse.serverName}</code> MCP server:
+						<code style={{ wordBreak: "break-all" }}>
+							{getMcpServerDisplayName(mcpServerUse.serverName, mcpMarketplaceCatalog)}
+						</code>{" "}
+						MCP server:
 					</span>,
 				]
 			case "completion_result":
diff --git a/webview-ui/src/components/mcp/McpView.tsx b/webview-ui/src/components/mcp/McpView.tsx
index 6cc31f2956..7f5d3b0809 100644
--- a/webview-ui/src/components/mcp/McpView.tsx
+++ b/webview-ui/src/components/mcp/McpView.tsx
@@ -7,6 +7,7 @@ import McpToolRow from "./McpToolRow"
 import McpResourceRow from "./McpResourceRow"
 import McpMarketplaceView from "./marketplace/McpMarketplaceView"
 import styled from "styled-components"
+import { getMcpServerDisplayName } from "../../utils/mcp"
 
 type McpViewProps = {
 	onDone: () => void
@@ -238,6 +239,8 @@ const TabButton = ({ children, isActive, onClick }: { children: React.ReactNode;
 
 // Server Row Component
 const ServerRow = ({ server }: { server: McpServer }) => {
+	const { mcpMarketplaceCatalog } = useExtensionState()
+
 	const [isExpanded, setIsExpanded] = useState(false)
 
 	const getStatusColor = () => {
@@ -290,7 +293,7 @@ const ServerRow = ({ server }: { server: McpServer }) => {
 						alignItems: "center",
 						marginRight: "4px",
 					}}>
-					{server.name}
+					{getMcpServerDisplayName(server.name, mcpMarketplaceCatalog)}
 				</span>
 				<div style={{ display: "flex", alignItems: "center", marginRight: "8px" }} onClick={(e) => e.stopPropagation()}>
 					<div
diff --git a/webview-ui/src/context/ExtensionStateContext.tsx b/webview-ui/src/context/ExtensionStateContext.tsx
index ec7dad6bc1..0b428ef79d 100644
--- a/webview-ui/src/context/ExtensionStateContext.tsx
+++ b/webview-ui/src/context/ExtensionStateContext.tsx
@@ -4,7 +4,7 @@ import { DEFAULT_AUTO_APPROVAL_SETTINGS } from "../../../src/shared/AutoApproval
 import { ExtensionMessage, ExtensionState, DEFAULT_PLATFORM } from "../../../src/shared/ExtensionMessage"
 import { ApiConfiguration, ModelInfo, openRouterDefaultModelId, openRouterDefaultModelInfo } from "../../../src/shared/api"
 import { findLastIndex } from "../../../src/shared/array"
-import { McpServer } from "../../../src/shared/mcp"
+import { McpMarketplaceCatalog, McpServer } from "../../../src/shared/mcp"
 import { convertTextMateToHljs } from "../utils/textMateToHljs"
 import { vscode } from "../utils/vscode"
 import { DEFAULT_BROWSER_SETTINGS } from "../../../src/shared/BrowserSettings"
@@ -17,6 +17,7 @@ interface ExtensionStateContextType extends ExtensionState {
 	openRouterModels: Record<string, ModelInfo>
 	openAiModels: string[]
 	mcpServers: McpServer[]
+	mcpMarketplaceCatalog: McpMarketplaceCatalog
 	filePaths: string[]
 	setApiConfiguration: (config: ApiConfiguration) => void
 	setCustomInstructions: (value?: string) => void
@@ -49,7 +50,7 @@ export const ExtensionStateContextProvider: React.FC<{
 
 	const [openAiModels, setOpenAiModels] = useState<string[]>([])
 	const [mcpServers, setMcpServers] = useState<McpServer[]>([])
-
+	const [mcpMarketplaceCatalog, setMcpMarketplaceCatalog] = useState<McpMarketplaceCatalog>({ items: [] })
 	const handleMessage = useCallback((event: MessageEvent) => {
 		const message: ExtensionMessage = event.data
 		switch (message.type) {
@@ -121,6 +122,12 @@ export const ExtensionStateContextProvider: React.FC<{
 				setMcpServers(message.mcpServers ?? [])
 				break
 			}
+			case "mcpMarketplaceCatalog": {
+				if (message.mcpMarketplaceCatalog) {
+					setMcpMarketplaceCatalog(message.mcpMarketplaceCatalog)
+				}
+				break
+			}
 		}
 	}, [])
 
@@ -138,6 +145,7 @@ export const ExtensionStateContextProvider: React.FC<{
 		openRouterModels,
 		openAiModels,
 		mcpServers,
+		mcpMarketplaceCatalog,
 		filePaths,
 		setApiConfiguration: (value) =>
 			setState((prevState) => ({