feat(mcp): improve mcp with McpExecution, make UX like terminal execute

Implements a new UI component and status tracking system for MCP tool executions, providing users with feedback on tool execution progress and results.

- Add McpExecutionStatus schema with started/output/completed/error states
- Enhance useMcpToolTool to send status updates at different execution stages
- Create new McpExecution component with status indicators and expandable sections
- Refactor ChatRow to use the new component for better visualization
- Update CodeAccordian to support custom headers for arguments/response sections

This change improves the user experience by providing clear visual feedback during MCP tool execution, similar to the existing command execution experience.

Author: samhvw8

src/core/tools/useMcpToolTool.ts

@@ -2,6 +2,7 @@ import { Task } from "../task/Task"
 import { ToolUse, AskApproval, HandleError, PushToolResult, RemoveClosingTag } from "../../shared/tools"
 import { formatResponse } from "../prompts/responses"
 import { ClineAskUseMcpServer } from "../../shared/ExtensionMessage"
+import { McpExecutionStatus } from "../../schemas"
 
 export async function useMcpToolTool(
 	cline: Task,
@@ -67,6 +68,7 @@ export async function useMcpToolTool(
 				arguments: mcp_arguments,
 			} satisfies ClineAskUseMcpServer)
 
+			const executionId = cline.lastMessageTs?.toString() ?? Date.now().toString()
 			const didApprove = await askApproval("use_mcp_server", completeMessage)
 
 			if (!didApprove) {
@@ -76,15 +78,31 @@ export async function useMcpToolTool(
 			// Now execute the tool
 			await cline.say("mcp_server_request_started") // same as browser_action_result
 
+			// Send started status
+			const clineProvider = await cline.providerRef.deref()
+			const startedStatus: McpExecutionStatus = {
+				executionId,
+				status: "started",
+				serverName: server_name,
+				toolName: tool_name,
+			}
+			clineProvider?.postMessageToWebview({
+				type: "mcpExecutionStatus",
+				text: JSON.stringify(startedStatus),
+			})
+
 			const toolResult = await cline.providerRef
 				.deref()
 				?.getMcpHub()
 				?.callTool(server_name, tool_name, parsedArguments)
 
-			// TODO: add progress indicator and ability to parse images and non-text responses
-			const toolResultPretty =
-				(toolResult?.isError ? "Error:\n" : "") +
-					toolResult?.content
+			// Process the result
+			let toolResultPretty = "(No response)"
+
+			if (toolResult) {
+				// Send output status if there's content
+				if (toolResult.content && toolResult.content.length > 0) {
+					const outputText = toolResult.content
 						.map((item) => {
 							if (item.type === "text") {
 								return item.text
@@ -96,7 +114,48 @@ export async function useMcpToolTool(
 							return ""
 						})
 						.filter(Boolean)
-						.join("\n\n") || "(No response)"
+						.join("\n\n")
+
+					if (outputText) {
+						const outputStatus: McpExecutionStatus = {
+							executionId,
+							status: "output",
+							response: outputText,
+						}
+						clineProvider?.postMessageToWebview({
+							type: "mcpExecutionStatus",
+							text: JSON.stringify(outputStatus),
+						})
+
+						toolResultPretty = (toolResult.isError ? "Error:\n" : "") + outputText
+					}
+				}
+
+				// Send completed or error status
+				const completedStatus: McpExecutionStatus = {
+					executionId,
+					status: toolResult.isError ? "error" : "completed",
+					response: toolResultPretty,
+					error: toolResult.isError ? "Error executing MCP tool" : undefined,
+				}
+				clineProvider?.postMessageToWebview({
+					type: "mcpExecutionStatus",
+					text: JSON.stringify(completedStatus),
+				})
+			} else {
+				// Send error status if no result
+				const errorStatus: McpExecutionStatus = {
+					executionId,
+					status: "error",
+					error: "No response from MCP server",
+				}
+				clineProvider?.postMessageToWebview({
+					type: "mcpExecutionStatus",
+					text: JSON.stringify(errorStatus),
+				})
+
+				toolResultPretty = "(No response)"
+			}
 
 			await cline.say("mcp_server_response", toolResultPretty)
 			pushToolResult(formatResponse.toolResult(toolResultPretty))

src/schemas/index.ts

@@ -308,6 +308,36 @@ export const commandExecutionStatusSchema = z.discriminatedUnion("status", [
 
 export type CommandExecutionStatus = z.infer<typeof commandExecutionStatusSchema>
 
+/**
+ * McpExecutionStatus
+ */
+
+export const mcpExecutionStatusSchema = z.discriminatedUnion("status", [
+	z.object({
+		executionId: z.string(),
+		status: z.literal("started"),
+		serverName: z.string(),
+		toolName: z.string(),
+	}),
+	z.object({
+		executionId: z.string(),
+		status: z.literal("output"),
+		response: z.string(),
+	}),
+	z.object({
+		executionId: z.string(),
+		status: z.literal("completed"),
+		response: z.string().optional(),
+	}),
+	z.object({
+		executionId: z.string(),
+		status: z.literal("error"),
+		error: z.string().optional(),
+	}),
+])
+
+export type McpExecutionStatus = z.infer<typeof mcpExecutionStatusSchema>
+
 /**
  * ExperimentId
  */

src/shared/ExtensionMessage.ts

@@ -68,6 +68,7 @@ export interface ExtensionMessage {
 		| "acceptInput"
 		| "setHistoryPreviewCollapsed"
 		| "commandExecutionStatus"
+		| "mcpExecutionStatus"
 		| "vsCodeSetting"
 	text?: string
 	action?:
@@ -275,6 +276,7 @@ export interface ClineAskUseMcpServer {
 	toolName?: string
 	arguments?: string
 	uri?: string
+	response?: string
 }
 
 export interface ClineApiReqInfo {

src/shared/__tests__/combineCommandSequences.test.ts

@@ -1,47 +1,183 @@
-// npx jest src/shared/__tests__/combineCommandSequences.test.ts
-
+import { combineCommandSequences } from "../combineCommandSequences"
 import { ClineMessage } from "../ExtensionMessage"
 
-import { combineCommandSequences } from "../combineCommandSequences"
+describe("combineCommandSequences", () => {
+	describe("command sequences", () => {
+		it("should combine command and command_output messages", () => {
+			const messages: ClineMessage[] = [
+				{ type: "ask", ask: "command", text: "ls", ts: 1625097600000 },
+				{ type: "ask", ask: "command_output", text: "file1.txt", ts: 1625097601000 },
+				{ type: "ask", ask: "command_output", text: "file2.txt", ts: 1625097602000 },
+			]
 
-const messages: ClineMessage[] = [
-	{
-		ts: 1745710928469,
-		type: "say",
-		say: "api_req_started",
-		text: '{"request":"<task>\\nRun the command \\"ping w…tes":12117,"cacheReads":0,"cost":0.020380125}',
-		images: undefined,
-	},
-	{
-		ts: 1745710930332,
-		type: "say",
-		say: "text",
-		text: "Okay, I can run that command for you. The `pin…'s reachable and measure the round-trip time.",
-		images: undefined,
-	},
-	{ ts: 1745710930748, type: "ask", ask: "command", text: "ping www.google.com", partial: false },
-	{ ts: 1745710930894, type: "say", say: "command_output", text: "", images: undefined },
-	{ ts: 1745710930894, type: "ask", ask: "command_output", text: "" },
-	{
-		ts: 1745710930954,
-		type: "say",
-		say: "command_output",
-		text: "PING www.google.com (142.251.46.228): 56 data bytes\n",
-		images: undefined,
-	},
-	{
-		ts: 1745710930954,
-		type: "ask",
-		ask: "command_output",
-		text: "PING www.google.com (142.251.46.228): 56 data bytes\n",
-	},
-]
+			const result = combineCommandSequences(messages)
 
-describe("combineCommandSequences", () => {
-	it("should combine command sequences", () => {
-		const message = combineCommandSequences(messages).at(-1)
-		expect(message!.text).toEqual(
-			"ping www.google.com\nOutput:PING www.google.com (142.251.46.228): 56 data bytes\n",
-		)
+			expect(result).toHaveLength(1)
+			expect(result[0]).toEqual({
+				type: "ask",
+				ask: "command",
+				text: "ls\nOutput:file1.txt\nfile2.txt",
+				ts: 1625097600000,
+			})
+		})
+	})
+
+	describe("MCP server responses", () => {
+		it("should combine use_mcp_server and mcp_server_response messages", () => {
+			const messages: ClineMessage[] = [
+				{
+					type: "ask",
+					ask: "use_mcp_server",
+					text: JSON.stringify({
+						serverName: "test-server",
+						toolName: "test-tool",
+						arguments: { param: "value" },
+					}),
+					ts: 1625097600000,
+				},
+				{ type: "say", say: "mcp_server_response", text: "Response data", ts: 1625097601000 },
+			]
+
+			const result = combineCommandSequences(messages)
+
+			expect(result).toHaveLength(1)
+			expect(result[0]).toEqual({
+				type: "ask",
+				ask: "use_mcp_server",
+				text: JSON.stringify({
+					serverName: "test-server",
+					toolName: "test-tool",
+					arguments: { param: "value" },
+					response: "Response data",
+				}),
+				ts: 1625097600000,
+			})
+		})
+
+		it("should handle multiple mcp_server_response messages", () => {
+			const messages: ClineMessage[] = [
+				{
+					type: "ask",
+					ask: "use_mcp_server",
+					text: JSON.stringify({
+						serverName: "test-server",
+						toolName: "test-tool",
+						arguments: { param: "value" },
+					}),
+					ts: 1625097600000,
+				},
+				{ type: "say", say: "mcp_server_response", text: "First response", ts: 1625097601000 },
+				{ type: "say", say: "mcp_server_response", text: "Second response", ts: 1625097602000 },
+			]
+
+			const result = combineCommandSequences(messages)
+
+			expect(result).toHaveLength(1)
+			expect(result[0]).toEqual({
+				type: "ask",
+				ask: "use_mcp_server",
+				text: JSON.stringify({
+					serverName: "test-server",
+					toolName: "test-tool",
+					arguments: { param: "value" },
+					response: "First response\nSecond response",
+				}),
+				ts: 1625097600000,
+			})
+		})
+
+		it("should handle multiple MCP server requests", () => {
+			const messages: ClineMessage[] = [
+				{
+					type: "ask",
+					ask: "use_mcp_server",
+					text: JSON.stringify({
+						serverName: "test-server-1",
+						toolName: "test-tool-1",
+						arguments: { param: "value1" },
+					}),
+					ts: 1625097600000,
+				},
+				{ type: "say", say: "mcp_server_response", text: "Response 1", ts: 1625097601000 },
+				{
+					type: "ask",
+					ask: "use_mcp_server",
+					text: JSON.stringify({
+						serverName: "test-server-2",
+						toolName: "test-tool-2",
+						arguments: { param: "value2" },
+					}),
+					ts: 1625097602000,
+				},
+				{ type: "say", say: "mcp_server_response", text: "Response 2", ts: 1625097603000 },
+			]
+
+			const result = combineCommandSequences(messages)
+
+			expect(result).toHaveLength(2)
+			expect(result[0]).toEqual({
+				type: "ask",
+				ask: "use_mcp_server",
+				text: JSON.stringify({
+					serverName: "test-server-1",
+					toolName: "test-tool-1",
+					arguments: { param: "value1" },
+					response: "Response 1",
+				}),
+				ts: 1625097600000,
+			})
+			expect(result[1]).toEqual({
+				type: "ask",
+				ask: "use_mcp_server",
+				text: JSON.stringify({
+					serverName: "test-server-2",
+					toolName: "test-tool-2",
+					arguments: { param: "value2" },
+					response: "Response 2",
+				}),
+				ts: 1625097602000,
+			})
+		})
+	})
+
+	describe("mixed sequences", () => {
+		it("should handle both command and MCP server sequences", () => {
+			const messages: ClineMessage[] = [
+				{ type: "ask", ask: "command", text: "ls", ts: 1625097600000 },
+				{ type: "ask", ask: "command_output", text: "file1.txt", ts: 1625097601000 },
+				{
+					type: "ask",
+					ask: "use_mcp_server",
+					text: JSON.stringify({
+						serverName: "test-server",
+						toolName: "test-tool",
+						arguments: { param: "value" },
+					}),
+					ts: 1625097602000,
+				},
+				{ type: "say", say: "mcp_server_response", text: "MCP response", ts: 1625097603000 },
+			]
+
+			const result = combineCommandSequences(messages)
+
+			expect(result).toHaveLength(2)
+			expect(result[0]).toEqual({
+				type: "ask",
+				ask: "command",
+				text: "ls\nOutput:file1.txt",
+				ts: 1625097600000,
+			})
+			expect(result[1]).toEqual({
+				type: "ask",
+				ask: "use_mcp_server",
+				text: JSON.stringify({
+					serverName: "test-server",
+					toolName: "test-tool",
+					arguments: { param: "value" },
+					response: "MCP response",
+				}),
+				ts: 1625097602000,
+			})
+		})
 	})
 })