Add validation and i18n for MCP image settings

- Add input validation for max images per response (1-100 range)
- Add input validation for max image size in MB (1-100 range)
- Display error messages for invalid inputs
- Internationalize all image settings labels and descriptions
- Update translations across all supported locales

Author: shivangag

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

@@ -53,6 +53,8 @@ const McpView = ({ onDone }: McpViewProps) => {
 	} = useExtensionState()
 
 	const { t } = useAppTranslation()
+	const [maxImagesError, setMaxImagesError] = useState("")
+	const [maxSizeError, setMaxSizeError] = useState("")
 
 	return (
 		<Tab>
@@ -117,43 +119,71 @@ const McpView = ({ onDone }: McpViewProps) => {
 								<VSCodeTextField
 									value={mcpMaxImagesPerResponse.toString()}
 									onChange={(e: any) => {
-										const value = parseInt(e.target.value) || 20
-										setMcpMaxImagesPerResponse(value)
-										vscode.postMessage({ type: "mcpMaxImagesPerResponse", value })
+										const value = e.target.value
+										if (value === "") {
+											setMaxImagesError("")
+											return
+										}
+										const numValue = parseInt(value, 10)
+										if (isNaN(numValue) || numValue < 1 || numValue > 100) {
+											setMaxImagesError(t("mcp:imageSettings.validationError"))
+										} else {
+											setMaxImagesError("")
+											setMcpMaxImagesPerResponse(numValue)
+											vscode.postMessage({ type: "mcpMaxImagesPerResponse", value: numValue })
+										}
 									}}
 									style={{ width: "100px" }}>
-									Max Images Per Response
+									{t("mcp:imageSettings.maxImagesLabel")}
 								</VSCodeTextField>
+								{maxImagesError && (
+									<div style={{ color: "red", fontSize: "12px", marginTop: "5px" }}>
+										{maxImagesError}
+									</div>
+								)}
 								<div
 									style={{
 										fontSize: "12px",
 										marginTop: "5px",
 										color: "var(--vscode-descriptionForeground)",
 									}}>
-									The maximum number of images that can be returned in a single MCP tool response.
-									Additional images will be ignored to prevent performance issues.
+									{t("mcp:imageSettings.maxImagesDescription")}
 								</div>
 							</div>
 
 							<div style={{ marginBottom: 10 }}>
 								<VSCodeTextField
 									value={mcpMaxImageSizeMB.toString()}
 									onChange={(e: any) => {
-										const value = parseFloat(e.target.value) || 10
-										setMcpMaxImageSizeMB(value)
-										vscode.postMessage({ type: "mcpMaxImageSizeMB", value })
+										const value = e.target.value
+										if (value === "") {
+											setMaxSizeError("")
+											return
+										}
+										const numValue = parseFloat(value)
+										if (isNaN(numValue) || numValue < 1 || numValue > 100) {
+											setMaxSizeError(t("mcp:imageSettings.validationError"))
+										} else {
+											setMaxSizeError("")
+											setMcpMaxImageSizeMB(numValue)
+											vscode.postMessage({ type: "mcpMaxImageSizeMB", value: numValue })
+										}
 									}}
 									style={{ width: "100px" }}>
-									Max Image Size (MB)
+									{t("mcp:imageSettings.maxSizeLabel")}
 								</VSCodeTextField>
+								{maxSizeError && (
+									<div style={{ color: "red", fontSize: "12px", marginTop: "5px" }}>
+										{maxSizeError}
+									</div>
+								)}
 								<div
 									style={{
 										fontSize: "12px",
 										marginTop: "5px",
 										color: "var(--vscode-descriptionForeground)",
 									}}>
-									The maximum size (in MB) for a single base64-encoded image from an MCP tool
-									response. Images exceeding this size will be ignored.
+									{t("mcp:imageSettings.maxSizeDescription")}
 								</div>
 							</div>
 						</div>

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

@@ -61,5 +61,12 @@
 		"running": "Running",
 		"completed": "Completed",
 		"error": "Error"
+	},
+	"imageSettings": {
+		"maxImagesLabel": "Max Images",
+		"maxImagesDescription": "The maximum number of images that can be included in a single request.",
+		"maxSizeLabel": "Max Size (MB)",
+		"maxSizeDescription": "The maximum file size for each image, in megabytes.",
+		"validationError": "Please enter a valid number between 1 and 100."
 	}
 }