Mcp rich display setting (RooCodeInc#4029)

* + Adding a global setting for mcp rich display in features settings, storing it in global storage, and using it as the starting value for each new session to still allow local toggle of mcp rich display on the tab, but let users keep the base stored default

* + adding changest

* + fxing linting post conflict merge

* fix

---------

Co-authored-by: 0xtoshii <[email protected]>

Author: Vl4diC0de

.changeset/wild-cycles-cough.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": minor
+---
+
+Adding MCP Rich Display settings in cline's settings page, to enable users to change it in a persistent manner

proto/state.proto

@@ -95,6 +95,7 @@ message UpdateSettingsRequest {
   optional int64 shell_integration_timeout = 8;
   optional bool terminal_reuse_enabled = 9;
   optional bool mcp_responses_collapsed = 10;
+  optional bool mcp_rich_display_enabled = 11;
 }
 
 // Complete API Configuration message

src/core/controller/index.ts

@@ -948,6 +948,7 @@ export class Controller {
 			chatSettings,
 			userInfo,
 			mcpMarketplaceEnabled,
+			mcpRichDisplayEnabled,
 			telemetrySetting,
 			planActSeparateModelsSetting,
 			enableCheckpointsSetting,
@@ -989,6 +990,7 @@ export class Controller {
 			chatSettings,
 			userInfo,
 			mcpMarketplaceEnabled,
+			mcpRichDisplayEnabled,
 			telemetrySetting,
 			planActSeparateModelsSetting,
 			enableCheckpointsSetting: enableCheckpointsSetting ?? true,

src/core/controller/state/updateSettings.ts

@@ -50,6 +50,11 @@ export async function updateSettings(controller: Controller, request: UpdateSett
 			await controller.context.globalState.update("mcpResponsesCollapsed", request.mcpResponsesCollapsed)
 		}
 
+		// Update MCP responses collapsed setting
+		if (request.mcpRichDisplayEnabled !== undefined) {
+			await controller.context.globalState.update("mcpRichDisplayEnabled", request.mcpRichDisplayEnabled)
+		}
+
 		// Update chat settings
 		if (request.chatSettings) {
 			const chatSettings = convertProtoChatSettingsToChatSettings(request.chatSettings)

src/core/storage/state-keys.ts

@@ -69,6 +69,7 @@ export type GlobalStateKey =
 	| "terminalReuseEnabled"
 	| "defaultTerminalProfile"
 	| "isNewUser"
+	| "mcpRichDisplayEnabled"
 
 export type LocalStateKey =
 	| "localClineRulesToggles"

src/core/storage/state.ts

@@ -234,6 +234,7 @@ export async function getAllExtensionState(context: vscode.ExtensionContext) {
 		shellIntegrationTimeout,
 		enableCheckpointsSettingRaw,
 		mcpMarketplaceEnabledRaw,
+		mcpRichDisplayEnabled,
 		mcpResponsesCollapsedRaw,
 		globalWorkflowToggles,
 		terminalReuseEnabled,
@@ -298,6 +299,7 @@ export async function getAllExtensionState(context: vscode.ExtensionContext) {
 		getGlobalState(context, "shellIntegrationTimeout") as Promise<number | undefined>,
 		getGlobalState(context, "enableCheckpointsSetting") as Promise<boolean | undefined>,
 		getGlobalState(context, "mcpMarketplaceEnabled") as Promise<boolean | undefined>,
+		getGlobalState(context, "mcpRichDisplayEnabled") as Promise<boolean | undefined>,
 		getGlobalState(context, "mcpResponsesCollapsed") as Promise<boolean | undefined>,
 		getGlobalState(context, "globalWorkflowToggles") as Promise<ClineRulesToggles | undefined>,
 		getGlobalState(context, "terminalReuseEnabled") as Promise<boolean | undefined>,
@@ -492,6 +494,7 @@ export async function getAllExtensionState(context: vscode.ExtensionContext) {
 		previousModeAwsBedrockCustomSelected,
 		previousModeAwsBedrockCustomModelBaseId,
 		mcpMarketplaceEnabled: mcpMarketplaceEnabled,
+		mcpRichDisplayEnabled: mcpRichDisplayEnabled ?? true,
 		mcpResponsesCollapsed: mcpResponsesCollapsed,
 		telemetrySetting: telemetrySetting || "unset",
 		planActSeparateModelsSetting,

src/shared/ExtensionMessage.ts

@@ -82,6 +82,7 @@ export interface ExtensionState {
 	clineMessages: ClineMessage[]
 	currentTaskItem?: HistoryItem
 	mcpMarketplaceEnabled?: boolean
+	mcpRichDisplayEnabled: boolean
 	planActSeparateModelsSetting: boolean
 	enableCheckpointsSetting?: boolean
 	platform: Platform

src/shared/WebviewMessage.ts

@@ -45,6 +45,7 @@ export interface WebviewMessage {
 	mcpMarketplaceEnabled?: boolean
 	mcpResponsesCollapsed?: boolean
 	telemetrySetting?: TelemetrySetting
+	mcpRichDisplayEnabled?: boolean
 	mentionsRequestId?: string
 	query?: string
 	// For toggleFavoriteModel

webview-ui/src/components/mcp/chat-display/McpResponseDisplay.tsx

@@ -117,36 +117,19 @@ interface UrlMatch {
 }
 
 const McpResponseDisplay: React.FC<McpResponseDisplayProps> = ({ responseText }) => {
-	const { mcpResponsesCollapsed } = useExtensionState() // Get setting from context
+	const { mcpResponsesCollapsed, mcpRichDisplayEnabled } = useExtensionState() // Get setting from context
 	const [isExpanded, setIsExpanded] = useState(!mcpResponsesCollapsed) // Initialize with context setting
 	const [isLoading, setIsLoading] = useState(false) // Initial loading state for rich content
 	const [displayMode, setDisplayMode] = useState<"rich" | "plain">(() => {
-		// Get saved preference from localStorage, default to 'rich'
-		const savedMode = localStorage.getItem("mcpDisplayMode")
-		return savedMode === "plain" ? "plain" : "rich"
+		// Initialize directly from the global setting.
+		return mcpRichDisplayEnabled ? "rich" : "plain"
 	})
 	const [urlMatches, setUrlMatches] = useState<UrlMatch[]>([])
 	const [error, setError] = useState<string | null>(null)
-	// Add a counter state for forcing re-renders to make toggling run smoother
-	const [forceUpdateCounter, setForceUpdateCounter] = useState(0)
 
 	const toggleDisplayMode = useCallback(() => {
-		const newMode = displayMode === "rich" ? "plain" : "rich"
-		// Force an immediate re-render
-		setForceUpdateCounter((prev) => prev + 1)
-		// Update display mode and save preference
-		setDisplayMode(newMode)
-		localStorage.setItem("mcpDisplayMode", newMode)
-		// If switching to plain mode, cancel any ongoing processing
-		if (newMode === "plain") {
-			console.log("Switching to plain mode - cancelling URL processing")
-			setUrlMatches([]) // Clear any existing matches when switching to plain mode
-		} else {
-			// If switching to rich mode, the useEffect will re-run and fetch data
-			console.log("Switching to rich mode - will start URL processing")
-			setUrlMatches([])
-		}
-	}, [displayMode])
+		setDisplayMode((prevMode) => (prevMode === "rich" ? "plain" : "rich"))
+	}, [])
 
 	const toggleExpand = useCallback(() => {
 		setIsExpanded((prev) => !prev)
@@ -155,14 +138,16 @@ const McpResponseDisplay: React.FC<McpResponseDisplayProps> = ({ responseText })
 	// Effect to update isExpanded if mcpResponsesCollapsed changes from context
 	useEffect(() => {
 		setIsExpanded(!mcpResponsesCollapsed)
-	}, [])
+	}, [mcpResponsesCollapsed])
 
 	// Find all URLs in the text and determine if they're images
 	useEffect(() => {
 		// Skip all processing if in plain mode
 		if (!isExpanded || displayMode === "plain") {
 			setIsLoading(false)
-			setUrlMatches([]) // Clear any existing matches when in plain mode
+			if (urlMatches.length > 0) {
+				setUrlMatches([]) // Clear any existing matches when in plain mode
+			}
 			return
 		}
 
@@ -280,7 +265,7 @@ const McpResponseDisplay: React.FC<McpResponseDisplayProps> = ({ responseText })
 			processingCanceled = true
 			console.log("Cleaning up URL processing")
 		}
-	}, [responseText, displayMode, forceUpdateCounter, isExpanded])
+	}, [responseText, displayMode, isExpanded])
 
 	// Function to render content based on display mode
 	const renderContent = () => {

webview-ui/src/components/settings/FeatureSettingsSection.tsx

@@ -9,6 +9,8 @@ const FeatureSettingsSection = () => {
 		setEnableCheckpointsSetting,
 		mcpMarketplaceEnabled,
 		setMcpMarketplaceEnabled,
+		mcpRichDisplayEnabled,
+		setMcpRichDisplayEnabled,
 		mcpResponsesCollapsed,
 		setMcpResponsesCollapsed,
 		chatSettings,
@@ -44,6 +46,19 @@ const FeatureSettingsSection = () => {
 					Enables the MCP Marketplace tab for discovering and installing MCP servers.
 				</p>
 			</div>
+			<div style={{ marginTop: 10 }}>
+				<VSCodeCheckbox
+					checked={mcpRichDisplayEnabled}
+					onChange={(e: any) => {
+						const checked = e.target.checked === true
+						setMcpRichDisplayEnabled(checked)
+					}}>
+					Enable Rich MCP Display
+				</VSCodeCheckbox>
+				<p className="text-xs text-[var(--vscode-descriptionForeground)]">
+					Enables rich formatting for MCP responses. When disabled, responses will be shown in plain text.
+				</p>
+			</div>
 			<div style={{ marginTop: 10 }}>
 				<VSCodeCheckbox
 					checked={mcpResponsesCollapsed}