Fix: Update MCP console handling to properly display stdout and error messages with correct styling

Author: robertheadley

src/services/mcp/McpHub.ts

@@ -499,10 +499,12 @@ export class McpHub {
 						if (isInfoOrStartupMessage) {
 							// Log normal informational messages
 							console.log(`Server "${name}" info:`, output)
-							// Add to connection history with stdout level so they appear in white
+							// Tag the message with stdout_info so we can identify it in the UI
+							// but map it to "info" level for type compatibility
 							const connection = this.findConnection(name, source)
 							if (connection) {
-								this.appendErrorMessage(connection, output, "stdout")
+								// Add a prefix to identify this as a stdout message that's been mapped to info
+								this.appendErrorMessage(connection, `[STDOUT] ${output}`, "info")
 								await this.notifyWebviewOfServerChanges()
 							}
 						} else {
@@ -530,7 +532,8 @@ export class McpHub {
 						console.log(`Server "${name}" stdout:`, output)
 						const connection = this.findConnection(name, source)
 						if (connection) {
-							this.appendErrorMessage(connection, output, "stdout")
+							// Add a prefix to identify this as a stdout message that's been mapped to info
+							this.appendErrorMessage(connection, `[STDOUT] ${output}`, "info")
 							await this.notifyWebviewOfServerChanges()
 						}
 					})
@@ -619,14 +622,14 @@ export class McpHub {
 			connection.server.errorHistory = []
 		}
 
-		// Map "stdout" to "info" to avoid TypeScript errors
-		// while still allowing them to be displayed differently in the UI
-		const mappedLevel = level === "stdout" ? "info" : level
+		// Note: We no longer need to map "stdout" to "info" here
+		// as we're now adding the [STDOUT] prefix to the message itself
+		// and directly using "info" level in the calling code
 
 		connection.server.errorHistory.push({
 			message: truncatedError,
 			timestamp: Date.now(),
-			level: mappedLevel,
+			level: level,
 		})
 
 		// Keep only the last 100 errors

webview-ui/src/components/mcp/McpErrorRow.tsx

@@ -12,6 +12,12 @@ export const McpErrorRow = ({ error }: McpErrorRowProps) => {
 		// Add debugging to log what level is coming in
 		console.log(`McpErrorRow level: ${error.level} for message: ${error.message.substring(0, 20)}...`)
 
+		// First check for explicitly prefixed stdout messages
+		if (error.level === "info" && error.message.startsWith("[STDOUT]")) {
+			// Use regular foreground color for stdout messages
+			return "var(--vscode-foreground)"
+		}
+
 		// Check if this is a stdout message (mapped to info in backend)
 		// Common patterns for stdout messages
 		const isStdoutMessage =
@@ -44,10 +50,15 @@ export const McpErrorRow = ({ error }: McpErrorRowProps) => {
 		}
 	}, [error.level, error.message])
 
+	// Strip [STDOUT] prefix from the message for cleaner display
+	const displayMessage = error.message.startsWith("[STDOUT]")
+		? error.message.substring("[STDOUT]".length).trim()
+		: error.message
+
 	return (
 		<div className="text-sm bg-vscode-textCodeBlock-background border-l-2 p-2" style={{ borderColor: color }}>
 			<div className="mb-1" style={{ color }}>
-				{error.message}
+				{displayMessage}
 			</div>
 			<div className="text-xs text-vscode-descriptionForeground">
 				{formatRelative(error.timestamp, new Date())}