feat: Add MCP button to ChatTextArea with error indicator

[roomote]

Summary

This PR adds a new MCP (Model Context Protocol) button to the ChatTextArea component, positioned to the left of the Codebase Indexing button.

Changes

• Added MCP Servers button with Server icon from lucide-react
• Button is conditionally rendered only when MCP servers are installed
• Clicking the button navigates to the MCP screen
• Red error indicator appears when any MCP server is erroring (disconnected and not disabled)
• Added translation key for the MCP button tooltip

Implementation Details

• The button follows the same styling patterns as other buttons in the ChatTextArea
• Uses the existing message passing system to trigger navigation to the MCP tab
• Error detection logic checks for servers with status 'disconnected' that are not intentionally disabled
• All tests pass successfully

Testing

• ✅ All existing tests pass
• ✅ Linting passes
• ✅ Type checking passes

Screenshots

The button appears between the Slash Commands button and the Codebase Indexing button when MCPs are installed.

Fixes: Slack request to add MCP button to chat interface

---

Important

Adds an MCP button to ChatTextArea with error indicator for disconnected servers, including a new translation key for the tooltip.

• Behavior:
  • Adds MCP button to ChatTextArea with Server icon, conditionally rendered when MCP servers are present.
  • Clicking navigates to MCP screen; red error indicator for disconnected servers.
• Styling:
  • Follows existing button styling in ChatTextArea.
• Localization:
  • Adds mcpServers translation key in chat.json for button tooltip.
• Testing:
  • All tests, linting, and type checking pass.

^{This description was created by for 7ade8e4. You can customize this summary. It will automatically update as commits are pushed.}

[roomote]

I reviewed my own code and found it surprisingly readable. Must be a bug.

[roomote]

The mcpServers property is destructured from useExtensionState() but doesn't appear to be typed in the hook's return type. Could this cause TypeScript errors if strict typing is enabled? Consider adding the proper type definition to ensure type safety.

[roomote]

The error indicator (red dot) doesn't have any accessible text for screen reader users. Consider adding an aria-label to the button or the error indicator span to improve accessibility:

Suggested change

	<span
	{mcpServers.some(
	(server) => server.status === "disconnected" && !server.disabled,
	) && (
	<span
	aria-label="MCP server error"
	className={cn(
	"absolute top-1 right-1 w-1.5 h-1.5 rounded-full",
	"bg-red-500",
	)}
	/>
	)}

[roomote]

For better readability, consider extracting the error detection logic to a variable:

Suggested change

	{mcpServers.some(
	const hasErroringServers = mcpServers.some(
	(server) => server.status === "disconnected" && !server.disabled,
	);
	{hasErroringServers && (

[roomote]

The "mcpServers" translation key should be added to all other locale files to maintain i18n consistency. Currently it's only in the English locale. Could we ensure all locale files are updated?