feat: add MCP button to ChatTextArea with error indicator

- Added MCP Servers button to the left of the Codebase Indexing button
- Button is hidden when no MCP servers are installed
- Clicking the button navigates to the MCP screen
- Red indicator appears when any MCP server is erroring (disconnected and not disabled)
- Added translation key for the MCP button tooltip

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

@@ -1,7 +1,7 @@
 import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"
 import { useEvent } from "react-use"
 import DynamicTextArea from "react-textarea-autosize"
-import { VolumeX, Image, WandSparkles, SendHorizontal } from "lucide-react"
+import { VolumeX, Image, WandSparkles, SendHorizontal, Server } from "lucide-react"
 
 import { mentionRegex, mentionRegexGlobal, commandRegexGlobal, unescapeSpaces } from "@roo/context-mentions"
 import { WebviewMessage } from "@roo/WebviewMessage"
@@ -82,6 +82,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			taskHistory,
 			clineMessages,
 			commands,
+			mcpServers,
 		} = useExtensionState()
 
 		// Find the ID and display text for the currently selected API configuration.
@@ -1194,6 +1195,44 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 							</StandardTooltip>
 						)}
 						<SlashCommandsPopover />
+						{mcpServers && mcpServers.length > 0 && (
+							<StandardTooltip content={t("chat:mcpServers")}>
+								<button
+									aria-label={t("chat:mcpServers")}
+									onClick={() => {
+										window.postMessage(
+											{
+												type: "action",
+												action: "mcpButtonClicked",
+											},
+											"*",
+										)
+									}}
+									className={cn(
+										"relative inline-flex items-center justify-center",
+										"bg-transparent border-none p-1.5",
+										"rounded-md min-w-[28px] min-h-[28px]",
+										"text-vscode-foreground opacity-85",
+										"transition-all duration-150",
+										"hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
+										"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
+										"active:bg-[rgba(255,255,255,0.1)]",
+										"cursor-pointer",
+									)}>
+									<Server className="w-4 h-4" />
+									{mcpServers.some(
+										(server) => server.status === "disconnected" && !server.disabled,
+									) && (
+										<span
+											className={cn(
+												"absolute top-1 right-1 w-1.5 h-1.5 rounded-full",
+												"bg-red-500",
+											)}
+										/>
+									)}
+								</button>
+							</StandardTooltip>
+						)}
 						<IndexingStatusBadge />
 						<StandardTooltip content={t("chat:addImages")}>
 							<button

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

@@ -127,6 +127,7 @@
 	},
 	"enhancePromptDescription": "The 'Enhance Prompt' button helps improve your prompt by providing additional context, clarification, or rephrasing. Try typing a prompt in here and clicking the button again to see how it works.",
 	"addImages": "Add images to message",
+	"mcpServers": "MCP Servers",
 	"sendMessage": "Send message",
 	"stopTts": "Stop text-to-speech",
 	"typeMessage": "Type a message...",