Link to marketplace from modes and MCP tab (#5580)

Author: mrubens

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

@@ -23,6 +23,7 @@ import {
 	DialogDescription,
 	DialogFooter,
 	ToggleSwitch,
+	StandardTooltip,
 } from "@src/components/ui"
 import { buildDocLink } from "@src/utils/docLinks"
 
@@ -124,13 +125,13 @@ const McpView = ({ onDone }: McpViewProps) => {
 							style={{
 								marginTop: "10px",
 								width: "100%",
-								display: "flex",
-								flexWrap: "wrap",
+								display: "grid",
+								gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
 								gap: "10px",
 							}}>
 							<Button
 								variant="secondary"
-								style={{ flex: "1 1 auto", minWidth: "120px" }}
+								style={{ width: "100%" }}
 								onClick={() => {
 									vscode.postMessage({ type: "openMcpSettings" })
 								}}>
@@ -139,7 +140,7 @@ const McpView = ({ onDone }: McpViewProps) => {
 							</Button>
 							<Button
 								variant="secondary"
-								style={{ flex: "1 1 auto", minWidth: "120px" }}
+								style={{ width: "100%" }}
 								onClick={() => {
 									vscode.postMessage({ type: "openProjectMcpSettings" })
 								}}>
@@ -148,13 +149,31 @@ const McpView = ({ onDone }: McpViewProps) => {
 							</Button>
 							<Button
 								variant="secondary"
-								style={{ flex: "1 1 auto", minWidth: "120px" }}
+								style={{ width: "100%" }}
 								onClick={() => {
 									vscode.postMessage({ type: "refreshAllMcpServers" })
 								}}>
 								<span className="codicon codicon-refresh" style={{ marginRight: "6px" }}></span>
 								{t("mcp:refreshMCP")}
 							</Button>
+							<StandardTooltip content={t("mcp:marketplace")}>
+								<Button
+									variant="secondary"
+									style={{ width: "100%" }}
+									onClick={() => {
+										window.postMessage(
+											{
+												type: "action",
+												action: "marketplaceButtonClicked",
+												values: { marketplaceTab: "mcp" },
+											},
+											"*",
+										)
+									}}>
+									<span className="codicon codicon-extensions" style={{ marginRight: "6px" }}></span>
+									{t("mcp:marketplace")}
+								</Button>
+							</StandardTooltip>
 						</div>
 						<div
 							style={{

webview-ui/src/components/modes/ModesView.tsx

@@ -561,6 +561,23 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 									</div>
 								)}
 							</div>
+							<StandardTooltip content={t("chat:modeSelector.marketplace")}>
+								<Button
+									variant="ghost"
+									size="icon"
+									onClick={() => {
+										window.postMessage(
+											{
+												type: "action",
+												action: "marketplaceButtonClicked",
+												values: { marketplaceTab: "mode" },
+											},
+											"*",
+										)
+									}}>
+									<span className="codicon codicon-extensions"></span>
+								</Button>
+							</StandardTooltip>
 						</div>
 					</div>
 

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

@@ -1,6 +1,7 @@
 {
 	"title": "Servidors MCP",
 	"done": "Fet",
+	"marketplace": "Mercat de MCP",
 	"description": "El <0>Model Context Protocol</0> permet la comunicació amb servidors MCP que s'executen localment i proporcionen eines i recursos addicionals per ampliar les capacitats de Roo. Pots utilitzar <1>servidors creats per la comunitat</1> o demanar a Roo que creï noves eines específiques per al teu flux de treball (per exemple, \"afegir una eina que obtingui la documentació més recent de npm\").",
 	"instructions": "Instruccions",
 	"enableToggle": {

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

@@ -1,6 +1,7 @@
 {
 	"title": "MCP-Server",
 	"done": "Fertig",
+	"marketplace": "MCP-Marktplatz",
 	"description": "Das <0>Model Context Protocol</0> ermöglicht die Kommunikation mit lokal laufenden MCP-Servern, die zusätzliche Tools und Ressourcen zur Erweiterung der Fähigkeiten von Roo bereitstellen. Du kannst <1>von der Community erstellte Server</1> verwenden oder Roo bitten, neue Tools speziell für deinen Workflow zu erstellen (z.B. \"ein Tool hinzufügen, das die neueste npm-Dokumentation abruft\").",
 	"instructions": "Anweisungen",
 	"enableToggle": {

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

@@ -1,6 +1,7 @@
 {
 	"title": "MCP Servers",
 	"done": "Done",
+	"marketplace": "MCP Marketplace",
 	"description": "The <0>Model Context Protocol</0> enables communication with locally running MCP servers that provide additional tools and resources to extend Roo's capabilities. You can use <1>community-made servers</1> or ask Roo to create new tools specific to your workflow (e.g., \"add a tool that gets the latest npm docs\").",
 	"instructions": "Instructions",
 	"enableToggle": {

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

@@ -1,6 +1,7 @@
 {
 	"title": "Servidores MCP",
 	"done": "Listo",
+	"marketplace": "Mercado MCP",
 	"description": "El <0>Model Context Protocol</0> permite la comunicación con servidores MCP que se ejecutan localmente y proporcionan herramientas y recursos adicionales para extender las capacidades de Roo. Puedes usar <1>servidores creados por la comunidad</1> o pedir a Roo que cree nuevas herramientas específicas para tu flujo de trabajo (por ejemplo, \"añadir una herramienta que obtenga la documentación más reciente de npm\").",
 	"instructions": "Instrucciones",
 	"enableToggle": {

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

@@ -1,6 +1,7 @@
 {
 	"title": "Serveurs MCP",
 	"done": "Terminé",
+	"marketplace": "Marché MCP",
 	"description": "Le <0>Model Context Protocol</0> permet la communication avec des serveurs MCP exécutés localement qui fournissent des outils et des ressources supplémentaires pour étendre les capacités de Roo. Vous pouvez utiliser <1>des serveurs créés par la communauté</1> ou demander à Roo de créer de nouveaux outils spécifiques à votre flux de travail (par exemple, \"ajouter un outil qui récupère la dernière documentation npm\").",
 	"instructions": "Instructions",
 	"enableToggle": {

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

@@ -1,6 +1,7 @@
 {
 	"title": "MCP सर्वर",
 	"done": "हो गया",
+	"marketplace": "MCP मार्केटप्लेस",
 	"description": "<0>मॉडल कॉन्टेक्स्ट प्रोटोकॉल</0> स्थानीय रूप से चल रहे MCP सर्वरों के साथ संचार को सक्षम बनाता है जो Roo की क्षमताओं का विस्तार करने के लिए अतिरिक्त उपकरण और संसाधन प्रदान करते हैं। आप <1>समुदाय द्वारा बनाए गए सर्वरों</1> का उपयोग कर सकते हैं या Roo से अपने कार्यप्रवाह के लिए विशिष्ट नए उपकरण बनाने के लिए कह सकते हैं (जैसे, \"नवीनतम npm दस्तावेज़ प्राप्त करने वाला उपकरण जोड़ें\")।",
 	"instructions": "निर्देश",
 	"enableToggle": {

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

@@ -1,6 +1,7 @@
 {
 	"title": "Server MCP",
 	"done": "Selesai",
+	"marketplace": "Marketplace MCP",
 	"description": "<0>Model Context Protocol</0> memungkinkan komunikasi dengan server MCP yang berjalan secara lokal yang menyediakan tools dan resources tambahan untuk memperluas kemampuan Roo Code. Anda dapat menggunakan <1>server buatan komunitas</1> atau meminta Roo membuat tools baru yang spesifik untuk workflow Anda (misalnya, \"tambahkan tool yang mendapatkan dokumentasi npm terbaru\").",
 	"instructions": "Instruksi",
 	"enableToggle": {

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

@@ -1,6 +1,7 @@
 {
 	"title": "Server MCP",
 	"done": "Fatto",
+	"marketplace": "Marketplace MCP",
 	"description": "Il <0>Model Context Protocol</0> permette la comunicazione con server MCP in esecuzione locale che forniscono strumenti e risorse aggiuntive per estendere le capacità di Roo. Puoi utilizzare <1>server creati dalla comunità</1> o chiedere a Roo di creare nuovi strumenti specifici per il tuo flusso di lavoro (ad esempio, \"aggiungi uno strumento che ottiene la documentazione npm più recente\").",
 	"instructions": "Istruzioni",
 	"enableToggle": {