changeset

.changeset/sweet-toes-bake.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": minor
+---
+
+Refactor to not pass a message for showing the MCP View from the servers modal

src/core/controller/index.ts

@@ -457,10 +457,6 @@ export class Controller {
 				await this.fetchUserCreditsData()
 				break
 			}
-			case "showMcpView": {
-				await this.postMessageToWebview({ type: "action", action: "mcpButtonClicked", tab: message.tab || undefined })
-				break
-			}
 			case "openMcpSettings": {
 				const mcpSettingsFilePath = await this.mcpHub?.getMcpSettingsFilePath()
 				if (mcpSettingsFilePath) {

src/shared/WebviewMessage.ts

@@ -51,7 +51,6 @@ export interface WebviewMessage {
 		| "downloadMcp"
 		| "silentlyRefreshMcpMarketplace"
 		| "searchCommits"
-		| "showMcpView"
 		| "fetchLatestMcpServersFromHub"
 		| "telemetrySetting"
 		| "openSettings"

webview-ui/src/App.tsx

@@ -10,60 +10,67 @@ import { ExtensionStateContextProvider, useExtensionState } from "./context/Exte
 import { FirebaseAuthProvider } from "./context/FirebaseAuthContext"
 import { vscode } from "./utils/vscode"
 import McpView from "./components/mcp/configuration/McpConfigurationView"
-import { McpViewTab } from "@shared/mcp"
 
 const AppContent = () => {
-	const { didHydrateState, showWelcome, shouldShowAnnouncement, telemetrySetting, vscMachineId } = useExtensionState()
+	const { didHydrateState, showWelcome, shouldShowAnnouncement, showMcp, mcpTab } = useExtensionState()
 	const [showSettings, setShowSettings] = useState(false)
 	const hideSettings = useCallback(() => setShowSettings(false), [])
 	const [showHistory, setShowHistory] = useState(false)
-	const [showMcp, setShowMcp] = useState(false)
 	const [showAccount, setShowAccount] = useState(false)
 	const [showAnnouncement, setShowAnnouncement] = useState(false)
-	const [mcpTab, setMcpTab] = useState<McpViewTab | undefined>(undefined)
 
-	const handleMessage = useCallback((e: MessageEvent) => {
-		const message: ExtensionMessage = e.data
-		switch (message.type) {
-			case "action":
-				switch (message.action!) {
-					case "settingsButtonClicked":
-						setShowSettings(true)
-						setShowHistory(false)
-						setShowMcp(false)
-						setShowAccount(false)
-						break
-					case "historyButtonClicked":
-						setShowSettings(false)
-						setShowHistory(true)
-						setShowMcp(false)
-						setShowAccount(false)
-						break
-					case "mcpButtonClicked":
-						setShowSettings(false)
-						setShowHistory(false)
-						if (message.tab) {
-							setMcpTab(message.tab)
-						}
-						setShowMcp(true)
-						setShowAccount(false)
-						break
-					case "accountButtonClicked":
-						setShowSettings(false)
-						setShowHistory(false)
-						setShowMcp(false)
-						setShowAccount(true)
-						break
-					case "chatButtonClicked":
-						setShowSettings(false)
-						setShowHistory(false)
-						setShowMcp(false)
-						setShowAccount(false)
-						break
-				}
-				break
-		}
-	}, [])
+	const { setShowMcp, setMcpTab } = useExtensionState()
+
+	const closeMcpView = useCallback(() => {
+		setShowMcp(false)
+		setMcpTab(undefined)
+	}, [setShowMcp, setMcpTab])
+
+	const handleMessage = useCallback(
+		(e: MessageEvent) => {
+			const message: ExtensionMessage = e.data
+			switch (message.type) {
+				case "action":
+					switch (message.action!) {
+						case "settingsButtonClicked":
+							setShowSettings(true)
+							setShowHistory(false)
+							closeMcpView()
+							setShowAccount(false)
+							break
+						case "historyButtonClicked":
+							setShowSettings(false)
+							setShowHistory(true)
+							closeMcpView()
+							setShowAccount(false)
+							break
+						case "mcpButtonClicked":
+							setShowSettings(false)
+							setShowHistory(false)
+							if (message.tab) {
+								setMcpTab(message.tab)
+							}
+							setShowMcp(true)
+							setShowAccount(false)
+							break
+						case "accountButtonClicked":
+							setShowSettings(false)
+							setShowHistory(false)
+							closeMcpView()
+							setShowAccount(true)
+							break
+						case "chatButtonClicked":
+							setShowSettings(false)
+							setShowHistory(false)
+							closeMcpView()
+							setShowAccount(false)
+							break
+					}
+					break
+			}
+		},
+		[setShowMcp, setMcpTab, closeMcpView],
+	)
 
 	useEvent("message", handleMessage)
 
@@ -95,13 +102,13 @@ const AppContent = () => {
 				<>
 					{showSettings && <SettingsView onDone={hideSettings} />}
 					{showHistory && <HistoryView onDone={() => setShowHistory(false)} />}
-					{showMcp && <McpView initialTab={mcpTab} onDone={() => setShowMcp(false)} />}
+					{showMcp && <McpView initialTab={mcpTab} onDone={closeMcpView} />}
 					{showAccount && <AccountView onDone={() => setShowAccount(false)} />}
 					{/* Do not conditionally load ChatView, it's expensive and there's state we don't want to lose (user input, disableInput, askResponse promise, etc.) */}
 					<ChatView
 						showHistoryView={() => {
 							setShowSettings(false)
-							setShowMcp(false)
+							closeMcpView()
 							setShowAccount(false)
 							setShowHistory(true)
 						}}

webview-ui/src/components/chat/ServersToggleModal.tsx

@@ -1,6 +1,7 @@
 import React, { useRef, useState, useEffect } from "react"
 import { useClickAway, useWindowSize } from "react-use"
 import { useExtensionState } from "@/context/ExtensionStateContext"
+import { useNavigator } from "@/hooks/useNavigator"
 import { CODE_BLOCK_BG_COLOR } from "@/components/common/CodeBlock"
 import ServersToggleList from "@/components/mcp/configuration/tabs/installed/ServersToggleList"
 import { vscode } from "@/utils/vscode"
@@ -9,6 +10,7 @@ import Tooltip from "@/components/common/Tooltip"
 
 const ServersToggleModal: React.FC = () => {
 	const { mcpServers } = useExtensionState()
+	const { navigateToMcp } = useNavigator()
 	const [isVisible, setIsVisible] = useState(false)
 	const buttonRef = useRef<HTMLDivElement>(null)
 	const modalRef = useRef<HTMLDivElement>(null)
@@ -81,11 +83,8 @@ const ServersToggleModal: React.FC = () => {
 						<VSCodeButton
 							appearance="icon"
 							onClick={() => {
-								vscode.postMessage({
-									type: "showMcpView",
-									tab: "installed",
-								})
 								setIsVisible(false)
+								navigateToMcp("installed")
 							}}>
 							<span className="codicon codicon-gear text-[10px]"></span>
 						</VSCodeButton>

webview-ui/src/context/ExtensionStateContext.tsx

@@ -11,7 +11,7 @@ import {
 	requestyDefaultModelInfo,
 } from "../../../src/shared/api"
 import { findLastIndex } from "@shared/array"
-import { McpMarketplaceCatalog, McpServer } from "../../../src/shared/mcp"
+import { McpMarketplaceCatalog, McpServer, McpViewTab } from "../../../src/shared/mcp"
 import { convertTextMateToHljs } from "../utils/textMateToHljs"
 import { vscode } from "../utils/vscode"
 import { DEFAULT_BROWSER_SETTINGS } from "@shared/BrowserSettings"
@@ -29,12 +29,21 @@ interface ExtensionStateContextType extends ExtensionState {
 	mcpMarketplaceCatalog: McpMarketplaceCatalog
 	filePaths: string[]
 	totalTasksSize: number | null
+	// View state
+	showMcp: boolean
+	mcpTab?: McpViewTab
+
+	// Setters
 	setApiConfiguration: (config: ApiConfiguration) => void
 	setCustomInstructions: (value?: string) => void
 	setTelemetrySetting: (value: TelemetrySetting) => void
 	setShowAnnouncement: (value: boolean) => void
 	setPlanActSeparateModelsSetting: (value: boolean) => void
 	setMcpServers: (value: McpServer[]) => void
+
+	// Navigation
+	setShowMcp: (value: boolean) => void
+	setMcpTab: (tab?: McpViewTab) => void
 }
 
 const ExtensionStateContext = createContext<ExtensionStateContextType | undefined>(undefined)
@@ -42,6 +51,10 @@ const ExtensionStateContext = createContext<ExtensionStateContextType | undefine
 export const ExtensionStateContextProvider: React.FC<{
 	children: React.ReactNode
 }> = ({ children }) => {
+	// UI view state
+	const [showMcp, setShowMcp] = useState(false)
+	const [mcpTab, setMcpTab] = useState<McpViewTab | undefined>(undefined)
+
 	const [state, setState] = useState<ExtensionState>({
 		version: "",
 		clineMessages: [],
@@ -200,6 +213,8 @@ export const ExtensionStateContextProvider: React.FC<{
 		mcpMarketplaceCatalog,
 		filePaths,
 		totalTasksSize,
+		showMcp,
+		mcpTab,
 		globalClineRulesToggles: state.globalClineRulesToggles || {},
 		localClineRulesToggles: state.localClineRulesToggles || {},
 		setApiConfiguration: (value) =>
@@ -228,6 +243,8 @@ export const ExtensionStateContextProvider: React.FC<{
 				shouldShowAnnouncement: value,
 			})),
 		setMcpServers: (mcpServers: McpServer[]) => setMcpServers(mcpServers),
+		setShowMcp,
+		setMcpTab,
 	}
 
 	return <ExtensionStateContext.Provider value={contextValue}>{children}</ExtensionStateContext.Provider>

webview-ui/src/hooks/useNavigator.ts

@@ -0,0 +1,24 @@
+import { useExtensionState } from "../context/ExtensionStateContext"
+import { McpViewTab } from "@shared/mcp"
+
+/**
+ * Hook for navigating between different views in the application.
+ */
+export const useNavigator = () => {
+	const { setShowMcp, setMcpTab } = useExtensionState()
+
+	/**
+	 * Navigate to the MCP view
+	 * @param tab Optional tab to show in the MCP view
+	 */
+	const navigateToMcp = (tab?: McpViewTab) => {
+		if (tab) {
+			setMcpTab(tab)
+		}
+		setShowMcp(true)
+	}
+
+	return {
+		navigateToMcp,
+	}
+}