migrate mcpMarketplaceCatalog (RooCodeInc#4023)

Co-authored-by: Elephant Lumps <[email protected]>

Author: celestial-vault

proto/mcp.proto

@@ -16,6 +16,9 @@ service McpService {
   rpc toggleToolAutoApprove(ToggleToolAutoApproveRequest) returns (McpServers);
   rpc refreshMcpMarketplace(EmptyRequest) returns (McpMarketplaceCatalog);
   rpc openMcpSettings(EmptyRequest) returns (Empty);
+  
+  // Subscribe to MCP marketplace catalog updates
+  rpc subscribeToMcpMarketplaceCatalog(EmptyRequest) returns (stream McpMarketplaceCatalog);
 }
 
 message ToggleMcpServerRequest {

src/core/controller/index.ts

@@ -56,6 +56,7 @@ import { sendStateUpdate } from "./state/subscribeToState"
 import { sendAddToInputEvent } from "./ui/subscribeToAddToInput"
 import { sendAuthCallbackEvent } from "./account/subscribeToAuthCallback"
 import { sendChatButtonClickedEvent } from "./ui/subscribeToChatButtonClicked"
+import { sendMcpMarketplaceCatalogEvent } from "./mcp/subscribeToMcpMarketplaceCatalog"
 import { refreshClineRulesToggles } from "@core/context/instructions/user-instructions/cline-rules"
 import { refreshExternalRulesToggles } from "@core/context/instructions/user-instructions/external-rules"
 import { refreshWorkflowToggles } from "@core/context/instructions/user-instructions/workflows"
@@ -245,10 +246,7 @@ export class Controller {
 
 				getGlobalState(this.context, "mcpMarketplaceCatalog").then((mcpMarketplaceCatalog) => {
 					if (mcpMarketplaceCatalog) {
-						this.postMessageToWebview({
-							type: "mcpMarketplaceCatalog",
-							mcpMarketplaceCatalog: mcpMarketplaceCatalog as McpMarketplaceCatalog,
-						})
+						sendMcpMarketplaceCatalogEvent(mcpMarketplaceCatalog as McpMarketplaceCatalog)
 					}
 				})
 				this.silentlyRefreshMcpMarketplace()
@@ -759,10 +757,6 @@ export class Controller {
 			console.error("Failed to fetch MCP marketplace:", error)
 			if (!silent) {
 				const errorMessage = error instanceof Error ? error.message : "Failed to fetch MCP marketplace"
-				await this.postMessageToWebview({
-					type: "mcpMarketplaceCatalog",
-					error: errorMessage,
-				})
 				vscode.window.showErrorMessage(errorMessage)
 			}
 			return undefined
@@ -808,10 +802,7 @@ export class Controller {
 		try {
 			const catalog = await this.fetchMcpMarketplaceFromApi(true)
 			if (catalog) {
-				await this.postMessageToWebview({
-					type: "mcpMarketplaceCatalog",
-					mcpMarketplaceCatalog: catalog,
-				})
+				await sendMcpMarketplaceCatalogEvent(catalog)
 			}
 		} catch (error) {
 			console.error("Failed to silently refresh MCP marketplace:", error)
@@ -839,27 +830,17 @@ export class Controller {
 				| McpMarketplaceCatalog
 				| undefined
 			if (!forceRefresh && cachedCatalog?.items) {
-				await this.postMessageToWebview({
-					type: "mcpMarketplaceCatalog",
-					mcpMarketplaceCatalog: cachedCatalog,
-				})
+				await sendMcpMarketplaceCatalogEvent(cachedCatalog)
 				return
 			}
 
 			const catalog = await this.fetchMcpMarketplaceFromApi(false)
 			if (catalog) {
-				await this.postMessageToWebview({
-					type: "mcpMarketplaceCatalog",
-					mcpMarketplaceCatalog: catalog,
-				})
+				await sendMcpMarketplaceCatalogEvent(catalog)
 			}
 		} catch (error) {
 			console.error("Failed to handle cached MCP marketplace:", error)
 			const errorMessage = error instanceof Error ? error.message : "Failed to handle cached MCP marketplace"
-			await this.postMessageToWebview({
-				type: "mcpMarketplaceCatalog",
-				error: errorMessage,
-			})
 			vscode.window.showErrorMessage(errorMessage)
 		}
 	}

src/core/controller/mcp/subscribeToMcpMarketplaceCatalog.ts

@@ -0,0 +1,55 @@
+import { Controller } from "../index"
+import { EmptyRequest } from "@shared/proto/common"
+import { McpMarketplaceCatalog } from "@shared/proto/mcp"
+import { StreamingResponseHandler, getRequestRegistry } from "../grpc-handler"
+
+// Keep track of active subscriptions
+const activeMcpMarketplaceSubscriptions = new Set<StreamingResponseHandler>()
+
+/**
+ * Subscribe to MCP marketplace catalog updates
+ * @param controller The controller instance
+ * @param request The empty request
+ * @param responseStream The streaming response handler
+ * @param requestId The ID of the request (passed by the gRPC handler)
+ */
+export async function subscribeToMcpMarketplaceCatalog(
+	controller: Controller,
+	request: EmptyRequest,
+	responseStream: StreamingResponseHandler,
+	requestId?: string,
+): Promise<void> {
+	// Add this subscription to the active subscriptions
+	activeMcpMarketplaceSubscriptions.add(responseStream)
+
+	// Register cleanup when the connection is closed
+	const cleanup = () => {
+		activeMcpMarketplaceSubscriptions.delete(responseStream)
+	}
+
+	// Register the cleanup function with the request registry if we have a requestId
+	if (requestId) {
+		getRequestRegistry().registerRequest(requestId, cleanup, { type: "mcp_marketplace_subscription" }, responseStream)
+	}
+}
+
+/**
+ * Send an MCP marketplace catalog event to all active subscribers
+ */
+export async function sendMcpMarketplaceCatalogEvent(catalog: McpMarketplaceCatalog): Promise<void> {
+	// Send the event to all active subscribers
+	const promises = Array.from(activeMcpMarketplaceSubscriptions).map(async (responseStream) => {
+		try {
+			await responseStream(
+				catalog,
+				false, // Not the last message
+			)
+		} catch (error) {
+			console.error("Error sending MCP marketplace catalog event:", error)
+			// Remove the subscription if there was an error
+			activeMcpMarketplaceSubscriptions.delete(responseStream)
+		}
+	})
+
+	await Promise.all(promises)
+}

src/shared/ExtensionMessage.ts

@@ -26,7 +26,6 @@ export interface ExtensionMessage {
 		| "requestyModels"
 		| "mcpServers"
 		| "relinquishControl"
-		| "mcpMarketplaceCatalog"
 		| "mcpDownloadDetails"
 		| "commitSearchResults"
 		| "openGraphData"

webview-ui/src/components/mcp/configuration/tabs/marketplace/McpMarketplaceView.tsx

@@ -14,15 +14,16 @@ import { vscode } from "@/utils/vscode"
 import McpMarketplaceCard from "./McpMarketplaceCard"
 import McpSubmitCard from "./McpSubmitCard"
 const McpMarketplaceView = () => {
-	const { mcpServers } = useExtensionState()
-	const [items, setItems] = useState<McpMarketplaceItem[]>([])
+	const { mcpServers, mcpMarketplaceCatalog } = useExtensionState()
 	const [isLoading, setIsLoading] = useState(true)
 	const [error, setError] = useState<string | null>(null)
 	const [isRefreshing, setIsRefreshing] = useState(false)
 	const [searchQuery, setSearchQuery] = useState("")
 	const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
 	const [sortBy, setSortBy] = useState<"newest" | "stars" | "name" | "downloadCount">("downloadCount")
 
+	const items = mcpMarketplaceCatalog?.items || []
+
 	const categories = useMemo(() => {
 		const uniqueCategories = new Set(items.map((item) => item.category))
 		return Array.from(uniqueCategories).sort()
@@ -58,16 +59,7 @@ const McpMarketplaceView = () => {
 	useEffect(() => {
 		const handleMessage = (event: MessageEvent) => {
 			const message = event.data
-			if (message.type === "mcpMarketplaceCatalog") {
-				if (message.error) {
-					setError(message.error)
-				} else {
-					setItems(message.mcpMarketplaceCatalog?.items || [])
-					setError(null)
-				}
-				setIsLoading(false)
-				setIsRefreshing(false)
-			} else if (message.type === "mcpDownloadDetails") {
+			if (message.type === "mcpDownloadDetails") {
 				if (message.error) {
 					setError(message.error)
 				}
@@ -76,14 +68,23 @@ const McpMarketplaceView = () => {
 
 		window.addEventListener("message", handleMessage)
 
-		// Fetch marketplace catalog
+		// Fetch marketplace catalog on initial load
 		fetchMarketplace()
 
 		return () => {
 			window.removeEventListener("message", handleMessage)
 		}
 	}, [])
 
+	useEffect(() => {
+		// Update loading state when catalog arrives
+		if (mcpMarketplaceCatalog?.items) {
+			setIsLoading(false)
+			setIsRefreshing(false)
+			setError(null)
+		}
+	}, [mcpMarketplaceCatalog])
+
 	const fetchMarketplace = (forceRefresh: boolean = false) => {
 		if (forceRefresh) {
 			setIsRefreshing(true)

webview-ui/src/context/ExtensionStateContext.tsx

@@ -18,7 +18,7 @@ import {
 	requestyDefaultModelInfo,
 } from "../../../src/shared/api"
 import { McpMarketplaceCatalog, McpServer, McpViewTab } from "../../../src/shared/mcp"
-import { ModelsServiceClient, StateServiceClient, UiServiceClient } from "../services/grpc-client"
+import { ModelsServiceClient, StateServiceClient, UiServiceClient, McpServiceClient } from "../services/grpc-client"
 import { convertTextMateToHljs } from "../utils/textMateToHljs"
 import { vscode } from "../utils/vscode"
 
@@ -232,12 +232,6 @@ export const ExtensionStateContextProvider: React.FC<{
 				setMcpServers(message.mcpServers ?? [])
 				break
 			}
-			case "mcpMarketplaceCatalog": {
-				if (message.mcpMarketplaceCatalog) {
-					setMcpMarketplaceCatalog(message.mcpMarketplaceCatalog)
-				}
-				break
-			}
 		}
 	}, [])
 
@@ -251,6 +245,7 @@ export const ExtensionStateContextProvider: React.FC<{
 	const accountButtonClickedSubscriptionRef = useRef<(() => void) | null>(null)
 	const settingsButtonClickedSubscriptionRef = useRef<(() => void) | null>(null)
 	const partialMessageUnsubscribeRef = useRef<(() => void) | null>(null)
+	const mcpMarketplaceUnsubscribeRef = useRef<(() => void) | null>(null)
 
 	// Subscribe to state updates and UI events using the gRPC streaming API
 	useEffect(() => {
@@ -436,6 +431,20 @@ export const ExtensionStateContextProvider: React.FC<{
 			},
 		})
 
+		// Subscribe to MCP marketplace catalog updates
+		mcpMarketplaceUnsubscribeRef.current = McpServiceClient.subscribeToMcpMarketplaceCatalog(EmptyRequest.create({}), {
+			onResponse: (catalog) => {
+				console.log("[DEBUG] Received MCP marketplace catalog update from gRPC stream")
+				setMcpMarketplaceCatalog(catalog)
+			},
+			onError: (error) => {
+				console.error("Error in MCP marketplace catalog subscription:", error)
+			},
+			onComplete: () => {
+				console.log("MCP marketplace catalog subscription completed")
+			},
+		})
+
 		// Still send the webviewDidLaunch message for other initialization
 		vscode.postMessage({ type: "webviewDidLaunch" })
 
@@ -484,6 +493,10 @@ export const ExtensionStateContextProvider: React.FC<{
 				partialMessageUnsubscribeRef.current()
 				partialMessageUnsubscribeRef.current = null
 			}
+			if (mcpMarketplaceUnsubscribeRef.current) {
+				mcpMarketplaceUnsubscribeRef.current()
+				mcpMarketplaceUnsubscribeRef.current = null
+			}
 		}
 	}, [])