Add to MCP settings too

Author: mrubens

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

@@ -1,7 +1,6 @@
-import React, { useCallback, useMemo } from "react"
+import React, { useCallback } from "react"
 import { useAppTranslation } from "@/i18n/TranslationContext"
-import { useExtensionState } from "@src/context/ExtensionStateContext"
-import { MAX_MCP_TOOLS_THRESHOLD } from "@roo-code/types"
+import { useTooManyTools } from "@src/hooks/useTooManyTools"
 import WarningRow from "./WarningRow"
 
 /**
@@ -16,55 +15,20 @@ import WarningRow from "./WarningRow"
  */
 export const TooManyToolsWarning: React.FC = () => {
 	const { t } = useAppTranslation()
-	const { mcpServers } = useExtensionState()
-
-	const { enabledServerCount, enabledToolCount } = useMemo(() => {
-		let serverCount = 0
-		let toolCount = 0
-
-		for (const server of mcpServers) {
-			// Skip disabled servers
-			if (server.disabled) continue
-
-			// Skip servers that are not connected
-			if (server.status !== "connected") continue
-
-			serverCount++
-
-			// Count enabled tools on this server
-			if (server.tools) {
-				for (const tool of server.tools) {
-					// Tool is enabled if enabledForPrompt is undefined (default) or true
-					if (tool.enabledForPrompt !== false) {
-						toolCount++
-					}
-				}
-			}
-		}
-
-		return { enabledServerCount: serverCount, enabledToolCount: toolCount }
-	}, [mcpServers])
+	const { isOverThreshold, title, message } = useTooManyTools()
 
 	const handleOpenMcpSettings = useCallback(() => {
 		window.postMessage({ type: "action", action: "settingsButtonClicked", values: { section: "mcp" } }, "*")
 	}, [])
 
 	// Don't show warning if under threshold
-	if (enabledToolCount <= MAX_MCP_TOOLS_THRESHOLD) {
+	if (!isOverThreshold) {
 		return null
 	}
 
-	const toolsPart = t("chat:tooManyTools.toolsPart", { count: enabledToolCount })
-	const serversPart = t("chat:tooManyTools.serversPart", { count: enabledServerCount })
-	const message = t("chat:tooManyTools.messageTemplate", {
-		tools: toolsPart,
-		servers: serversPart,
-		threshold: MAX_MCP_TOOLS_THRESHOLD,
-	})
-
 	return (
 		<WarningRow
-			title={t("chat:tooManyTools.title")}
+			title={title}
 			message={message}
 			actionText={t("chat:tooManyTools.openMcpSettings")}
 			onAction={handleOpenMcpSettings}

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

@@ -13,6 +13,7 @@ import type { McpServer } from "@roo-code/types"
 import { vscode } from "@src/utils/vscode"
 import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
+import { useTooManyTools } from "@src/hooks/useTooManyTools"
 import {
 	Button,
 	Dialog,
@@ -43,6 +44,7 @@ const McpView = () => {
 	} = useExtensionState()
 
 	const { t } = useAppTranslation()
+	const { isOverThreshold, title, message } = useTooManyTools()
 
 	return (
 		<div>
@@ -99,6 +101,31 @@ const McpView = () => {
 							</div>
 						</div>
 
+						{/* Too Many Tools Warning */}
+						{isOverThreshold && (
+							<div style={{ marginBottom: 15 }}>
+								<div
+									style={{
+										display: "flex",
+										alignItems: "center",
+										gap: "6px",
+										fontWeight: "500",
+										color: "var(--vscode-editorWarning-foreground)",
+										marginBottom: "5px",
+									}}>
+									<span className="codicon codicon-warning" />
+									{title}
+								</div>
+								<div
+									style={{
+										fontSize: "12px",
+										color: "var(--vscode-descriptionForeground)",
+									}}>
+									{message}
+								</div>
+							</div>
+						)}
+
 						{/* Server List */}
 						{servers.length > 0 && (
 							<div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>

webview-ui/src/hooks/useTooManyTools.ts

@@ -0,0 +1,82 @@
+import { useMemo } from "react"
+import { useExtensionState } from "@src/context/ExtensionStateContext"
+import { useAppTranslation } from "@src/i18n/TranslationContext"
+import { MAX_MCP_TOOLS_THRESHOLD } from "@roo-code/types"
+
+export interface TooManyToolsInfo {
+	/** Number of enabled and connected MCP servers */
+	enabledServerCount: number
+	/** Total number of enabled tools across all enabled servers */
+	enabledToolCount: number
+	/** Whether the tool count exceeds the threshold */
+	isOverThreshold: boolean
+	/** The maximum recommended threshold */
+	threshold: number
+	/** Localized title string */
+	title: string
+	/** Localized message string */
+	message: string
+}
+
+/**
+ * Hook that calculates tool counts and provides localized warning messages.
+ * Used by TooManyToolsWarning components in both chat and MCP settings views.
+ *
+ * @returns Tool count information and localized messages
+ *
+ * @example
+ * const { isOverThreshold, title, message } = useTooManyTools()
+ * if (isOverThreshold) {
+ *   // Show warning
+ * }
+ */
+export function useTooManyTools(): TooManyToolsInfo {
+	const { t } = useAppTranslation()
+	const { mcpServers } = useExtensionState()
+
+	const { enabledServerCount, enabledToolCount } = useMemo(() => {
+		let serverCount = 0
+		let toolCount = 0
+
+		for (const server of mcpServers) {
+			// Skip disabled servers
+			if (server.disabled) continue
+
+			// Skip servers that are not connected
+			if (server.status !== "connected") continue
+
+			serverCount++
+
+			// Count enabled tools on this server
+			if (server.tools) {
+				for (const tool of server.tools) {
+					// Tool is enabled if enabledForPrompt is undefined (default) or true
+					if (tool.enabledForPrompt !== false) {
+						toolCount++
+					}
+				}
+			}
+		}
+
+		return { enabledServerCount: serverCount, enabledToolCount: toolCount }
+	}, [mcpServers])
+
+	const isOverThreshold = enabledToolCount > MAX_MCP_TOOLS_THRESHOLD
+
+	const toolsPart = t("chat:tooManyTools.toolsPart", { count: enabledToolCount })
+	const serversPart = t("chat:tooManyTools.serversPart", { count: enabledServerCount })
+	const message = t("chat:tooManyTools.messageTemplate", {
+		tools: toolsPart,
+		servers: serversPart,
+		threshold: MAX_MCP_TOOLS_THRESHOLD,
+	})
+
+	return {
+		enabledServerCount,
+		enabledToolCount,
+		isOverThreshold,
+		threshold: MAX_MCP_TOOLS_THRESHOLD,
+		title: t("chat:tooManyTools.title"),
+		message,
+	}
+}