Collapsible Panel for MCP Responses (RooCodeInc#3528)

* feat: the response of the mcps is represented by a collapsible

* feat: the response of the mcps is represented by a collapsible

* fix: message for error parsing response

* fix: format

* feat: added cline.mcp.defaultPanelState settings

* chore: merge

* feat: improve global state

* chore: re-trigger  workflow

* chore: lint fix

* revert: unnecessary changes

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

Co-authored-by: Toshii <[email protected]>

* chore: change MCP Response Display Mode to a button

* fix: improve ui mcp response panel

* refactor: change name and type for property mcpDefaultPanelState to mcpResponsesCollapsed

* chore: rename props

---------

Co-authored-by: Toshii <[email protected]>

Author: valinha

.changeset/smart-ladybugs-give.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": minor
+---
+
+the response of the mcps is displayed with a collapsible which allows to focus on the model responses.

src/core/controller/index.ts

@@ -328,6 +328,10 @@ export class Controller {
 					await updateGlobalState(this.context, "mcpMarketplaceEnabled", message.mcpMarketplaceEnabled)
 				}
 
+				if (typeof message.mcpResponsesCollapsed === "boolean") {
+					await updateGlobalState(this.context, "mcpResponsesCollapsed", message.mcpResponsesCollapsed)
+				}
+
 				// chat settings (including preferredLanguage and openAIReasoningEffort)
 				if (message.chatSettings) {
 					await updateGlobalState(this.context, "chatSettings", message.chatSettings)
@@ -1100,6 +1104,7 @@ export class Controller {
 			shellIntegrationTimeout,
 			terminalReuseEnabled,
 			isNewUser,
+			mcpResponsesCollapsed,
 		} = await getAllExtensionState(this.context)
 
 		const localClineRulesToggles =
@@ -1145,6 +1150,7 @@ export class Controller {
 			shellIntegrationTimeout,
 			terminalReuseEnabled,
 			isNewUser,
+			mcpResponsesCollapsed,
 		}
 	}
 

src/core/storage/state-keys.ts

@@ -91,6 +91,7 @@ export type GlobalStateKey =
 	| "favoritedModelIds"
 	| "requestTimeoutMs"
 	| "shellIntegrationTimeout"
+	| "mcpResponsesCollapsed"
 	| "terminalReuseEnabled"
 	| "isNewUser"
 

src/core/storage/state.ts

@@ -164,6 +164,7 @@ export async function getAllExtensionState(context: vscode.ExtensionContext) {
 		shellIntegrationTimeout,
 		enableCheckpointsSettingRaw,
 		mcpMarketplaceEnabledRaw,
+		mcpResponsesCollapsedRaw,
 		globalWorkflowToggles,
 		terminalReuseEnabled,
 	] = await Promise.all([
@@ -255,6 +256,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, "mcpResponsesCollapsed") as Promise<boolean | undefined>,
 		getGlobalState(context, "globalWorkflowToggles") as Promise<ClineRulesToggles | undefined>,
 		getGlobalState(context, "terminalReuseEnabled") as Promise<boolean | undefined>,
 	])
@@ -277,6 +279,7 @@ export async function getAllExtensionState(context: vscode.ExtensionContext) {
 
 	const mcpMarketplaceEnabled = await migrateMcpMarketplaceEnableSetting(mcpMarketplaceEnabledRaw)
 	const enableCheckpointsSetting = await migrateEnableCheckpointsSetting(enableCheckpointsSettingRaw)
+	const mcpResponsesCollapsed = mcpResponsesCollapsedRaw ?? false
 
 	// Plan/Act separate models setting is a boolean indicating whether the user wants to use different models for plan and act. Existing users expect this to be enabled, while we want new users to opt in to this being disabled by default.
 	// On win11 state sometimes initializes as empty string instead of undefined
@@ -387,6 +390,7 @@ export async function getAllExtensionState(context: vscode.ExtensionContext) {
 		previousModeAwsBedrockCustomSelected,
 		previousModeAwsBedrockCustomModelBaseId,
 		mcpMarketplaceEnabled: mcpMarketplaceEnabled,
+		mcpResponsesCollapsed: mcpResponsesCollapsed,
 		telemetrySetting: telemetrySetting || "unset",
 		planActSeparateModelsSetting,
 		enableCheckpointsSetting: enableCheckpointsSetting,

src/shared/ExtensionMessage.ts

@@ -123,6 +123,7 @@ export interface ExtensionState {
 	globalWorkflowToggles: ClineRulesToggles
 	localCursorRulesToggles: ClineRulesToggles
 	localWindsurfRulesToggles: ClineRulesToggles
+	mcpResponsesCollapsed?: boolean
 }
 
 export interface ClineMessage {

src/shared/WebviewMessage.ts

@@ -52,6 +52,7 @@ export interface WebviewMessage {
 	planActSeparateModelsSetting?: boolean
 	enableCheckpointsSetting?: boolean
 	mcpMarketplaceEnabled?: boolean
+	mcpResponsesCollapsed?: boolean
 	telemetrySetting?: TelemetrySetting
 	customInstructionsSetting?: string
 	mentionsRequestId?: string

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

@@ -1,4 +1,6 @@
 import React, { useEffect, useState, useCallback } from "react"
+import { VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react" // Import ProgressRing
+import { useExtensionState } from "../../../context/ExtensionStateContext"
 import LinkPreview from "./LinkPreview"
 import ImagePreview from "./ImagePreview"
 import styled from "styled-components"
@@ -28,6 +30,10 @@ const ResponseHeader = styled.div`
 		text-overflow: ellipsis;
 		margin-right: 8px;
 	}
+
+	.header-icon {
+		margin-right: 6px;
+	}
 `
 
 const ToggleSwitch = styled.div`
@@ -111,7 +117,9 @@ interface UrlMatch {
 }
 
 const McpResponseDisplay: React.FC<McpResponseDisplayProps> = ({ responseText }) => {
-	const [isLoading, setIsLoading] = useState(true)
+	const { mcpResponsesCollapsed } = 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")
@@ -124,41 +132,46 @@ const McpResponseDisplay: React.FC<McpResponseDisplayProps> = ({ responseText })
 
 	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])
 
+	const toggleExpand = useCallback(() => {
+		setIsExpanded((prev) => !prev)
+	}, [])
+
+	// Effect to update isExpanded if mcpResponsesCollapsed changes from context
+	useEffect(() => {
+		setIsExpanded(!mcpResponsesCollapsed)
+	}, [])
+
 	// Find all URLs in the text and determine if they're images
 	useEffect(() => {
 		// Skip all processing if in plain mode
-		if (displayMode === "plain") {
+		if (!isExpanded || displayMode === "plain") {
 			setIsLoading(false)
 			setUrlMatches([]) // Clear any existing matches when in plain mode
 			return
 		}
 
 		// Use a direct boolean for cancellation that's scoped to this effect run
 		let processingCanceled = false
-
 		const processResponse = async () => {
 			console.log("Processing MCP response for URL extraction")
 			setIsLoading(true)
 			setError(null)
-
 			try {
 				const text = responseText || ""
 				const matches: UrlMatch[] = []
@@ -267,12 +280,24 @@ const McpResponseDisplay: React.FC<McpResponseDisplayProps> = ({ responseText })
 			processingCanceled = true
 			console.log("Cleaning up URL processing")
 		}
-	}, [responseText, displayMode, forceUpdateCounter])
+	}, [responseText, displayMode, forceUpdateCounter, isExpanded])
 
 	// Function to render content based on display mode
 	const renderContent = () => {
+		if (!isExpanded) {
+			return null // Don't render content if not expanded
+		}
+
+		if (isLoading && displayMode === "rich") {
+			return (
+				<div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "50px" }}>
+					<VSCodeProgressRing />
+				</div>
+			)
+		}
+
 		// For plain text mode, just show the text
-		if (displayMode === "plain" || isLoading) {
+		if (displayMode === "plain") {
 			return <UrlText>{responseText}</UrlText>
 		}
 
@@ -287,7 +312,7 @@ const McpResponseDisplay: React.FC<McpResponseDisplayProps> = ({ responseText })
 		}
 
 		// For rich display mode, show the text with embedded content
-		if (!isLoading) {
+		if (displayMode === "rich") {
 			// We already know displayMode is "rich" if we get here
 			// Create an array of text segments and embedded content
 			const segments: JSX.Element[] = []
@@ -385,30 +410,48 @@ const McpResponseDisplay: React.FC<McpResponseDisplayProps> = ({ responseText })
 	try {
 		return (
 			<ResponseContainer>
-				<ResponseHeader>
-					<span className="header-title">Response</span>
-					<ToggleSwitch>
-						<span className="toggle-label">{displayMode === "rich" ? "Rich Display" : "Plain Text"}</span>
-						<div className={`toggle-container ${displayMode === "rich" ? "active" : ""}`} onClick={toggleDisplayMode}>
-							<div className="toggle-handle"></div>
-						</div>
-					</ToggleSwitch>
+				<ResponseHeader
+					onClick={toggleExpand}
+					style={{
+						borderBottom: isExpanded ? "1px dashed var(--vscode-editorGroup-border)" : "none",
+						marginBottom: isExpanded ? "8px" : "0px",
+					}}>
+					<div className="header-title">
+						<span className={`codicon codicon-chevron-${isExpanded ? "down" : "right"} header-icon`}></span>
+						Response
+					</div>
+					<div style={{ minWidth: isExpanded ? "auto" : "0", visibility: isExpanded ? "visible" : "hidden" }}>
+						<ToggleSwitch onClick={(e) => e.stopPropagation()}>
+							<span className="toggle-label">{displayMode === "rich" ? "Rich Display" : "Plain Text"}</span>
+							<div
+								className={`toggle-container ${displayMode === "rich" ? "active" : ""}`}
+								onClick={toggleDisplayMode}>
+								<div className="toggle-handle"></div>
+							</div>
+						</ToggleSwitch>
+					</div>
 				</ResponseHeader>
 
-				<div className="response-content">{renderContent()}</div>
+				{isExpanded && <div className="response-content">{renderContent()}</div>}
 			</ResponseContainer>
 		)
 	} catch (error) {
-		console.log("Error rendering MCP response - falling back to plain text")
+		console.log("Error rendering MCP response - falling back to plain text") // Restored comment
+		// Fallback for critical rendering errors
 		return (
 			<ResponseContainer>
-				<ResponseHeader>
-					<span className="header-title">Response</span>
+				<ResponseHeader onClick={toggleExpand}>
+					<div className="header-title">
+						<span className={`codicon codicon-chevron-${isExpanded ? "down" : "right"} header-icon`}></span>
+						Response (Error)
+					</div>
 				</ResponseHeader>
-				<div className="response-content">
-					<div>Error parsing response:</div>
-					<UrlText>{responseText}</UrlText>
-				</div>
+				{isExpanded && (
+					<div className="response-content">
+						<div style={{ color: "var(--vscode-errorForeground)" }}>Error parsing response:</div>
+						<UrlText>{responseText}</UrlText>
+					</div>
+				)}
 			</ResponseContainer>
 		)
 	}

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

@@ -9,6 +9,8 @@ const FeatureSettingsSection = () => {
 		setEnableCheckpointsSetting,
 		mcpMarketplaceEnabled,
 		setMcpMarketplaceEnabled,
+		mcpResponsesCollapsed,
+		setMcpResponsesCollapsed,
 		chatSettings,
 		setChatSettings,
 	} = useExtensionState()
@@ -42,6 +44,19 @@ const FeatureSettingsSection = () => {
 					Enables the MCP Marketplace tab for discovering and installing MCP servers.
 				</p>
 			</div>
+			<div style={{ marginTop: 10 }}>
+				<VSCodeCheckbox
+					checked={mcpResponsesCollapsed}
+					onChange={(e: any) => {
+						const checked = e.target.checked === true
+						setMcpResponsesCollapsed(checked)
+					}}>
+					Collapse MCP Responses
+				</VSCodeCheckbox>
+				<p className="text-xs text-[var(--vscode-descriptionForeground)]">
+					Sets the default display mode for MCP response panels
+				</p>
+			</div>
 			<div style={{ marginTop: 10 }}>
 				<label
 					htmlFor="openai-reasoning-effort-dropdown"

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

@@ -130,6 +130,8 @@ const SettingsView = ({ onDone, targetSection }: SettingsViewProps) => {
 		setShellIntegrationTimeout,
 		terminalReuseEnabled,
 		setTerminalReuseEnabled,
+		mcpResponsesCollapsed,
+		setMcpResponsesCollapsed,
 		setApiConfiguration,
 	} = useExtensionState()
 
@@ -141,6 +143,7 @@ const SettingsView = ({ onDone, targetSection }: SettingsViewProps) => {
 		planActSeparateModelsSetting,
 		enableCheckpointsSetting,
 		mcpMarketplaceEnabled,
+		mcpResponsesCollapsed,
 		chatSettings,
 		shellIntegrationTimeout,
 		terminalReuseEnabled,
@@ -186,6 +189,7 @@ const SettingsView = ({ onDone, targetSection }: SettingsViewProps) => {
 			mcpMarketplaceEnabled,
 			shellIntegrationTimeout,
 			terminalReuseEnabled,
+			mcpResponsesCollapsed,
 			apiConfiguration: apiConfigurationToSubmit,
 		})
 
@@ -208,6 +212,7 @@ const SettingsView = ({ onDone, targetSection }: SettingsViewProps) => {
 			planActSeparateModelsSetting !== originalState.current.planActSeparateModelsSetting ||
 			enableCheckpointsSetting !== originalState.current.enableCheckpointsSetting ||
 			mcpMarketplaceEnabled !== originalState.current.mcpMarketplaceEnabled ||
+			mcpResponsesCollapsed !== originalState.current.mcpResponsesCollapsed ||
 			JSON.stringify(chatSettings) !== JSON.stringify(originalState.current.chatSettings) ||
 			shellIntegrationTimeout !== originalState.current.shellIntegrationTimeout ||
 			terminalReuseEnabled !== originalState.current.terminalReuseEnabled
@@ -220,6 +225,7 @@ const SettingsView = ({ onDone, targetSection }: SettingsViewProps) => {
 		planActSeparateModelsSetting,
 		enableCheckpointsSetting,
 		mcpMarketplaceEnabled,
+		mcpResponsesCollapsed,
 		chatSettings,
 		shellIntegrationTimeout,
 		terminalReuseEnabled,
@@ -260,6 +266,9 @@ const SettingsView = ({ onDone, targetSection }: SettingsViewProps) => {
 				if (typeof setTerminalReuseEnabled === "function") {
 					setTerminalReuseEnabled(originalState.current.terminalReuseEnabled ?? true)
 				}
+				if (typeof setMcpResponsesCollapsed === "function") {
+					setMcpResponsesCollapsed(originalState.current.mcpResponsesCollapsed ?? false)
+				}
 				// Close settings view
 				onDone()
 			}
@@ -277,6 +286,7 @@ const SettingsView = ({ onDone, targetSection }: SettingsViewProps) => {
 		setApiConfiguration,
 		setEnableCheckpointsSetting,
 		setMcpMarketplaceEnabled,
+		setMcpResponsesCollapsed,
 	])
 
 	// Handle confirmation dialog actions

webview-ui/src/context/ExtensionStateContext.tsx

@@ -52,6 +52,7 @@ interface ExtensionStateContextType extends ExtensionState {
 	setPlanActSeparateModelsSetting: (value: boolean) => void
 	setEnableCheckpointsSetting: (value: boolean) => void
 	setMcpMarketplaceEnabled: (value: boolean) => void
+	setMcpResponsesCollapsed: (value: boolean) => void
 	setShellIntegrationTimeout: (value: number) => void
 	setTerminalReuseEnabled: (value: boolean) => void
 	setChatSettings: (value: ChatSettings) => void
@@ -179,6 +180,7 @@ export const ExtensionStateContextProvider: React.FC<{
 		shellIntegrationTimeout: 4000, // default timeout for shell integration
 		terminalReuseEnabled: true, // default to enabled for backward compatibility
 		isNewUser: false,
+		mcpResponsesCollapsed: false, // Default value (expanded), will be overwritten by extension state
 	})
 	const [didHydrateState, setDidHydrateState] = useState(false)
 	const [showWelcome, setShowWelcome] = useState(false)
@@ -622,6 +624,12 @@ export const ExtensionStateContextProvider: React.FC<{
 				...prevState,
 				mcpMarketplaceEnabled: value,
 			})),
+		setMcpResponsesCollapsed: (value) => {
+			setState((prevState) => ({
+				...prevState,
+				mcpResponsesCollapsed: value,
+			}))
+		},
 		setShowAnnouncement,
 		setShouldShowAnnouncement: (value) =>
 			setState((prevState) => ({
@@ -656,6 +664,7 @@ export const ExtensionStateContextProvider: React.FC<{
 				planActSeparateModelsSetting: state.planActSeparateModelsSetting,
 				enableCheckpointsSetting: state.enableCheckpointsSetting,
 				mcpMarketplaceEnabled: state.mcpMarketplaceEnabled,
+				mcpResponsesCollapsed: state.mcpResponsesCollapsed,
 			})
 		},
 		setGlobalClineRulesToggles: (toggles) =>