Improve MCP image handling with size validation and UI enhancements

- Add early size check to prevent memory spikes from oversized images
- Implement bounds checking for MCP settings (images per response, max size)
- Add image count tooltips and improved accessibility in UI
- Update translations for better user experience across EN/ES/FR
- Refactor base64 validation with reusable regex constant

Author: shivangag

src/core/tools/__tests__/useMcpToolTool.spec.ts

@@ -743,9 +743,9 @@ describe("useMcpToolTool", () => {
 			expect(sayCall[2]).toHaveLength(1)
 			expect(sayCall[2][0]).toContain(smallBase64)
 
-			// Should log warning about size exceeding limit
+			// Should log warning about size exceeding limit (either early check or full validation)
 			expect(consoleSpy).toHaveBeenCalledWith(
-				expect.stringMatching(/MCP image exceeds size limit: .* > 1MB\. Image will be ignored\./),
+				expect.stringMatching(/MCP image (likely exceeds size limit|exceeds size limit)/),
 			)
 
 			expect(mockPushToolResult).toHaveBeenCalledWith(

src/core/tools/useMcpToolTool.ts

@@ -6,6 +6,7 @@ import { McpExecutionStatus } from "@roo-code/types"
 import { t } from "../../i18n"
 
 const SUPPORTED_IMAGE_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"]
+const BASE64_REGEX = /^[A-Za-z0-9+/]*={0,2}$/
 
 interface McpToolParams {
 	server_name?: string
@@ -216,8 +217,8 @@ async function processToolContent(toolResult: any, cline: Task): Promise<{ text:
 
 	// Get MCP settings from the extension's global state
 	const state = await cline.providerRef.deref()?.getState()
-	const maxImagesPerResponse = state?.mcpMaxImagesPerResponse ?? 20
-	const maxImageSizeMB = state?.mcpMaxImageSizeMB ?? 10
+	const maxImagesPerResponse = Math.max(1, Math.min(100, state?.mcpMaxImagesPerResponse ?? 20))
+	const maxImageSizeMB = Math.max(0.1, Math.min(50, state?.mcpMaxImageSizeMB ?? 10))
 
 	toolResult.content.forEach((item: any) => {
 		if (item.type === "text") {
@@ -240,9 +241,17 @@ async function processToolContent(toolResult: any, cline: Task): Promise<{ text:
 							return
 						}
 
+						// Quick size check before full validation to prevent memory spikes
+						const approximateSizeMB = (item.data.length * 0.75) / (1024 * 1024)
+						if (approximateSizeMB > maxImageSizeMB * 1.5) {
+							console.warn(
+								`MCP image likely exceeds size limit based on string length: ~${approximateSizeMB.toFixed(2)}MB`,
+							)
+							return
+						}
+
 						// Basic validation for base64 format
-						const base64Regex = /^[A-Za-z0-9+/]*={0,2}$/
-						if (!base64Regex.test(item.data.replace(/\s/g, ""))) {
+						if (!BASE64_REGEX.test(item.data.replace(/\s/g, ""))) {
 							console.warn("Invalid MCP ImageContent: base64 data contains invalid characters")
 							return
 						}

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

@@ -218,7 +218,9 @@ export const McpExecution = ({
 						{(responseText && responseText.length > 0) || (images && images.length > 0) ? (
 							<div className="flex items-center gap-1">
 								{images && images.length > 0 && (
-									<div className="flex items-center gap-1 text-xs text-vscode-descriptionForeground">
+									<div
+										className="flex items-center gap-1 text-xs text-vscode-descriptionForeground"
+										title={t("execution.imageCountTooltip", { count: images.length })}>
 										<span className="codicon codicon-file-media" />
 										<span>{images.length}</span>
 									</div>

webview-ui/src/components/common/Thumbnails.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useLayoutEffect, memo } from "react"
 import { useWindowSize } from "react-use"
+import { useTranslation } from "react-i18next"
 import { vscode } from "@src/utils/vscode"
 
 interface ThumbnailsProps {
@@ -10,6 +11,7 @@ interface ThumbnailsProps {
 }
 
 const Thumbnails = ({ images, style, setImages, onHeightChange }: ThumbnailsProps) => {
+	const { t } = useTranslation("common")
 	const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
 	const [failedImages, setFailedImages] = useState<Set<number>>(new Set())
 	const containerRef = useRef<HTMLDivElement>(null)
@@ -75,7 +77,7 @@ const Thumbnails = ({ images, style, setImages, onHeightChange }: ThumbnailsProp
 								cursor: "pointer",
 							}}
 							onClick={() => handleImageClick(image)}
-							title="Failed to load image">
+							title={t("thumbnails.failedToLoad")}>
 							<span
 								className="codicon codicon-file-media"
 								style={{
@@ -86,7 +88,7 @@ const Thumbnails = ({ images, style, setImages, onHeightChange }: ThumbnailsProp
 					) : (
 						<img
 							src={image}
-							alt={`Thumbnail ${index + 1}`}
+							alt={t("thumbnails.altText", { index: index + 1 })}
 							style={{
 								width: 34,
 								height: 34,

webview-ui/src/i18n/locales/en/common.json

@@ -95,5 +95,9 @@
 		"months_ago": "{{count}} months ago",
 		"year_ago": "a year ago",
 		"years_ago": "{{count}} years ago"
+	},
+	"thumbnails": {
+		"failedToLoad": "Failed to load image",
+		"altText": "Thumbnail {{index}}"
 	}
 }

webview-ui/src/i18n/locales/en/mcp.json

@@ -60,7 +60,8 @@
 	"execution": {
 		"running": "Running",
 		"completed": "Completed",
-		"error": "Error"
+		"error": "Error",
+		"imageCountTooltip": "{{count}} image(s) in response"
 	},
 	"imageSettings": {
 		"maxImagesLabel": "Max Images",