diff --git a/packages/types/src/__tests__/mode-allowedMcpServers.spec.ts b/packages/types/src/__tests__/mode-allowedMcpServers.spec.ts
new file mode 100644
index 0000000000..9aeece79a1
--- /dev/null
+++ b/packages/types/src/__tests__/mode-allowedMcpServers.spec.ts
@@ -0,0 +1,56 @@
+import { modeConfigSchema } from "../mode.js"
+
+describe("modeConfigSchema allowedMcpServers", () => {
+	const baseModeConfig = {
+		slug: "test-mode",
+		name: "Test Mode",
+		roleDefinition: "A test mode",
+		groups: ["read" as const],
+	}
+
+	it("should accept valid allowedMcpServers array of strings", () => {
+		const result = modeConfigSchema.safeParse({
+			...baseModeConfig,
+			allowedMcpServers: ["server1", "server2"],
+		})
+		expect(result.success).toBe(true)
+		if (result.success) {
+			expect(result.data.allowedMcpServers).toEqual(["server1", "server2"])
+		}
+	})
+
+	it("should accept missing/undefined allowedMcpServers", () => {
+		const result = modeConfigSchema.safeParse(baseModeConfig)
+		expect(result.success).toBe(true)
+		if (result.success) {
+			expect(result.data.allowedMcpServers).toBeUndefined()
+		}
+	})
+
+	it("should accept empty allowedMcpServers array", () => {
+		const result = modeConfigSchema.safeParse({
+			...baseModeConfig,
+			allowedMcpServers: [],
+		})
+		expect(result.success).toBe(true)
+		if (result.success) {
+			expect(result.data.allowedMcpServers).toEqual([])
+		}
+	})
+
+	it("should reject non-string array items", () => {
+		const result = modeConfigSchema.safeParse({
+			...baseModeConfig,
+			allowedMcpServers: [123, 456],
+		})
+		expect(result.success).toBe(false)
+	})
+
+	it("should reject non-array value", () => {
+		const result = modeConfigSchema.safeParse({
+			...baseModeConfig,
+			allowedMcpServers: "server1",
+		})
+		expect(result.success).toBe(false)
+	})
+})
diff --git a/packages/types/src/mode.ts b/packages/types/src/mode.ts
index d0cd984fda..e86999688b 100644
--- a/packages/types/src/mode.ts
+++ b/packages/types/src/mode.ts
@@ -102,6 +102,7 @@ export const modeConfigSchema = z.object({
 	customInstructions: z.string().optional(),
 	groups: groupEntryArraySchema,
 	source: z.enum(["global", "project"]).optional(),
+	allowedMcpServers: z.array(z.string()).optional(),
 })
 
 export type ModeConfig = z.infer<typeof modeConfigSchema>
diff --git a/schemas/roomodes.json b/schemas/roomodes.json
index 2b4349afcb..25d122b176 100644
--- a/schemas/roomodes.json
+++ b/schemas/roomodes.json
@@ -80,6 +80,13 @@
 							"required": ["relativePath"],
 							"additionalProperties": false
 						}
+					},
+					"allowedMcpServers": {
+						"type": "array",
+						"items": {
+							"type": "string"
+						},
+						"description": "Optional list of MCP server names to include. When omitted, all servers are available. When set, only the listed servers are injected."
 					}
 				},
 				"required": ["slug", "name", "roleDefinition", "groups"],
diff --git a/src/core/prompts/__tests__/system-prompt.spec.ts b/src/core/prompts/__tests__/system-prompt.spec.ts
index f555daba06..8731473a2b 100644
--- a/src/core/prompts/__tests__/system-prompt.spec.ts
+++ b/src/core/prompts/__tests__/system-prompt.spec.ts
@@ -575,6 +575,70 @@ describe("SYSTEM_PROMPT", () => {
 		expect(prompt).toContain("OBJECTIVE")
 	})
 
+	describe("allowedMcpServers filtering in system prompt", () => {
+		it("should exclude MCP capability text when allowedMcpServers is empty array", async () => {
+			mockMcpHub = createMockMcpHub(true)
+
+			const customModes: ModeConfig[] = [
+				{
+					slug: "filtered-mode",
+					name: "Filtered Mode",
+					roleDefinition: "A filtered mode",
+					groups: ["read", "mcp"] as const,
+					allowedMcpServers: [],
+				},
+			]
+
+			const prompt = await SYSTEM_PROMPT(
+				mockContext,
+				"/test/path",
+				false,
+				mockMcpHub, // mcpHub with servers
+				undefined, // diffStrategy
+				"filtered-mode", // mode
+				undefined, // customModePrompts
+				customModes, // customModes
+				undefined, // globalCustomInstructions
+				experiments,
+				undefined, // language
+				undefined, // rooIgnoreInstructions
+			)
+
+			expect(prompt).not.toContain("MCP servers")
+		})
+
+		it("should include MCP capability text when allowedMcpServers matches connected servers", async () => {
+			mockMcpHub = createMockMcpHub(true) // has "test-server"
+
+			const customModes: ModeConfig[] = [
+				{
+					slug: "mcp-mode",
+					name: "MCP Mode",
+					roleDefinition: "A mode with MCP",
+					groups: ["read", "mcp"] as const,
+					allowedMcpServers: ["test-server"],
+				},
+			]
+
+			const prompt = await SYSTEM_PROMPT(
+				mockContext,
+				"/test/path",
+				false,
+				mockMcpHub,
+				undefined,
+				"mcp-mode",
+				undefined,
+				customModes,
+				undefined,
+				experiments,
+				undefined,
+				undefined,
+			)
+
+			expect(prompt).toContain("MCP servers")
+		})
+	})
+
 	afterAll(() => {
 		vi.restoreAllMocks()
 	})
diff --git a/src/core/prompts/system.ts b/src/core/prompts/system.ts
index 0d6071644a..16ce87a1a6 100644
--- a/src/core/prompts/system.ts
+++ b/src/core/prompts/system.ts
@@ -66,7 +66,15 @@ async function generatePrompt(
 
 	// Check if MCP functionality should be included
 	const hasMcpGroup = modeConfig.groups.some((groupEntry) => getGroupName(groupEntry) === "mcp")
-	const hasMcpServers = mcpHub && mcpHub.getServers().length > 0
+	const allowedMcpServers = modeConfig.allowedMcpServers
+
+	let hasMcpServers = false
+	if (mcpHub) {
+		const servers = allowedMcpServers
+			? mcpHub.getServers().filter((s) => new Set(allowedMcpServers).has(s.name))
+			: mcpHub.getServers()
+		hasMcpServers = servers.length > 0
+	}
 	const shouldIncludeMcp = hasMcpGroup && hasMcpServers
 
 	const codeIndexManager = CodeIndexManager.getInstance(context, cwd)
@@ -90,7 +98,15 @@ ${getSharedToolUseSection()}${toolsCatalog}
 
 	${getToolUseGuidelinesSection()}
 
-${getCapabilitiesSection(cwd, shouldIncludeMcp ? mcpHub : undefined)}
+${
+	// `shouldIncludeMcp` already accounts for the mode's allowedMcpServers allowlist
+	// (see hasMcpServers above), so a mode that restricts MCP servers down to none will
+	// pass `undefined` here and omit the MCP capabilities line entirely. The capabilities
+	// section only emits a generic MCP availability statement (it does not enumerate
+	// individual servers), so forwarding the hub when at least one allowed server exists
+	// is consistent with the per-mode tool exposure.
+	getCapabilitiesSection(cwd, shouldIncludeMcp ? mcpHub : undefined)
+}
 
 ${modesSection}
 ${skillsSection ? `\n${skillsSection}` : ""}
diff --git a/src/core/prompts/tools/__tests__/filter-tools-for-mode.spec.ts b/src/core/prompts/tools/__tests__/filter-tools-for-mode.spec.ts
index 0b776a2bad..bc3cd0a360 100644
--- a/src/core/prompts/tools/__tests__/filter-tools-for-mode.spec.ts
+++ b/src/core/prompts/tools/__tests__/filter-tools-for-mode.spec.ts
@@ -89,3 +89,141 @@ describe("filterNativeToolsForMode - disabledTools", () => {
 		expect(resultNames).not.toContain("edit")
 	})
 })
+
+describe("filterNativeToolsForMode - access_mcp_resource allowlist", () => {
+	const nativeTools: OpenAI.Chat.ChatCompletionTool[] = [makeTool("read_file"), makeTool("access_mcp_resource")]
+
+	// Minimal McpHub stub exposing only getServers(), which is all the resource
+	// availability check uses.
+	function makeMcpHub(servers: Array<{ name: string; resources?: unknown[] }>): any {
+		return {
+			getServers: () => servers,
+		}
+	}
+
+	it("keeps access_mcp_resource when an allowed server has resources", () => {
+		const mcpHub = makeMcpHub([{ name: "allowed-server", resources: [{ uri: "res://x" }] }])
+
+		const result = filterNativeToolsForMode(nativeTools, "code", undefined, undefined, undefined, {}, mcpHub, [
+			"allowed-server",
+		])
+
+		const resultNames = result.map((t) => (t as any).function.name)
+		expect(resultNames).toContain("access_mcp_resource")
+	})
+
+	it("removes access_mcp_resource when only a disallowed server has resources", () => {
+		// The server with resources is NOT in the allowlist, so the restricted
+		// mode must not retain access_mcp_resource.
+		const mcpHub = makeMcpHub([
+			{ name: "allowed-server", resources: [] },
+			{ name: "blocked-server", resources: [{ uri: "res://secret" }] },
+		])
+
+		const result = filterNativeToolsForMode(nativeTools, "code", undefined, undefined, undefined, {}, mcpHub, [
+			"allowed-server",
+		])
+
+		const resultNames = result.map((t) => (t as any).function.name)
+		expect(resultNames).not.toContain("access_mcp_resource")
+		expect(resultNames).toContain("read_file")
+	})
+
+	it("considers all servers when no allowlist is provided (unrestricted mode)", () => {
+		const mcpHub = makeMcpHub([{ name: "any-server", resources: [{ uri: "res://y" }] }])
+
+		const result = filterNativeToolsForMode(nativeTools, "code", undefined, undefined, undefined, {}, mcpHub)
+
+		const resultNames = result.map((t) => (t as any).function.name)
+		expect(resultNames).toContain("access_mcp_resource")
+	})
+
+	it("removes access_mcp_resource when the allowlist is empty", () => {
+		const mcpHub = makeMcpHub([{ name: "some-server", resources: [{ uri: "res://z" }] }])
+
+		const result = filterNativeToolsForMode(nativeTools, "code", undefined, undefined, undefined, {}, mcpHub, [])
+
+		const resultNames = result.map((t) => (t as any).function.name)
+		expect(resultNames).not.toContain("access_mcp_resource")
+	})
+
+	// Defense in depth: even if a caller forgets to thread `allowedMcpServers`, the
+	// function must fall back to the mode config's own allowlist so a restricted mode
+	// can never retain access_mcp_resource based on resources from disallowed servers.
+	describe("falls back to modeConfig.allowedMcpServers when the parameter is omitted", () => {
+		const restrictedMode = {
+			slug: "restricted",
+			name: "Restricted",
+			roleDefinition: "restricted role",
+			groups: ["read", "mcp"],
+			allowedMcpServers: ["allowed-server"],
+		} as any
+
+		it("removes access_mcp_resource when only a disallowed server has resources (param omitted)", () => {
+			const mcpHub = makeMcpHub([
+				{ name: "allowed-server", resources: [] },
+				{ name: "blocked-server", resources: [{ uri: "res://secret" }] },
+			])
+
+			// Note: the 8th argument (allowedMcpServers) is intentionally omitted to
+			// simulate a caller that does not thread the allowlist through.
+			const result = filterNativeToolsForMode(
+				nativeTools,
+				"restricted",
+				[restrictedMode],
+				undefined,
+				undefined,
+				{},
+				mcpHub,
+			)
+
+			const resultNames = result.map((t) => (t as any).function.name)
+			expect(resultNames).not.toContain("access_mcp_resource")
+			expect(resultNames).toContain("read_file")
+		})
+
+		it("keeps access_mcp_resource when an allowed server has resources (param omitted)", () => {
+			const mcpHub = makeMcpHub([
+				{ name: "allowed-server", resources: [{ uri: "res://x" }] },
+				{ name: "blocked-server", resources: [{ uri: "res://secret" }] },
+			])
+
+			const result = filterNativeToolsForMode(
+				nativeTools,
+				"restricted",
+				[restrictedMode],
+				undefined,
+				undefined,
+				{},
+				mcpHub,
+			)
+
+			const resultNames = result.map((t) => (t as any).function.name)
+			expect(resultNames).toContain("access_mcp_resource")
+		})
+
+		it("prefers the explicit parameter over the mode config allowlist when both are provided", () => {
+			// The mode config allows "allowed-server", but the explicit parameter
+			// allows only "blocked-server" (which has the resources), so the explicit
+			// parameter must win and access_mcp_resource is retained.
+			const mcpHub = makeMcpHub([
+				{ name: "allowed-server", resources: [] },
+				{ name: "blocked-server", resources: [{ uri: "res://secret" }] },
+			])
+
+			const result = filterNativeToolsForMode(
+				nativeTools,
+				"restricted",
+				[restrictedMode],
+				undefined,
+				undefined,
+				{},
+				mcpHub,
+				["blocked-server"],
+			)
+
+			const resultNames = result.map((t) => (t as any).function.name)
+			expect(resultNames).toContain("access_mcp_resource")
+		})
+	})
+})
diff --git a/src/core/prompts/tools/filter-tools-for-mode.ts b/src/core/prompts/tools/filter-tools-for-mode.ts
index fdd41e7e33..2b31714a4c 100644
--- a/src/core/prompts/tools/filter-tools-for-mode.ts
+++ b/src/core/prompts/tools/filter-tools-for-mode.ts
@@ -220,6 +220,9 @@ export function applyModelToolCustomization(
  * @param codeIndexManager - Code index manager for codebase_search feature check
  * @param settings - Additional settings for tool filtering (includes modelInfo for model-specific customization)
  * @param mcpHub - MCP hub for checking available resources
+ * @param allowedMcpServers - Optional allowlist of MCP server names for the current mode. When
+ *   provided, the resource-availability check only considers servers in this list, so a mode that
+ *   restricts MCP servers cannot retain `access_mcp_resource` based on resources from disallowed servers.
  * @returns Filtered array of tools allowed for the mode
  */
 export function filterNativeToolsForMode(
@@ -230,6 +233,7 @@ export function filterNativeToolsForMode(
 	codeIndexManager?: CodeIndexManager,
 	settings?: Record<string, any>,
 	mcpHub?: McpHub,
+	allowedMcpServers?: string[],
 ): OpenAI.Chat.ChatCompletionTool[] {
 	// Get mode configuration and all tools for this mode
 	const modeSlug = mode ?? defaultModeSlug
@@ -301,8 +305,13 @@ export function filterNativeToolsForMode(
 		}
 	}
 
-	// Conditionally exclude access_mcp_resource if MCP is not enabled or there are no resources
-	if (!mcpHub || !hasAnyMcpResources(mcpHub)) {
+	// Conditionally exclude access_mcp_resource if MCP is not enabled or there are no resources.
+	// When the mode restricts MCP servers via allowedMcpServers, only resources from allowed
+	// servers count — otherwise a restricted mode could still read resources from disallowed servers.
+	// Fall back to the mode config's own allowlist when the caller omits the parameter, so the
+	// restriction is enforced regardless of call site (defense in depth).
+	const effectiveAllowedMcpServers = allowedMcpServers ?? modeConfig.allowedMcpServers
+	if (!mcpHub || !hasAnyMcpResources(mcpHub, effectiveAllowedMcpServers)) {
 		allowedToolNames.delete("access_mcp_resource")
 	}
 
@@ -330,10 +339,18 @@ export function filterNativeToolsForMode(
 }
 
 /**
- * Helper function to check if any MCP server has resources available
+ * Helper function to check if any MCP server has resources available.
+ *
+ * When `allowedServers` is provided, only servers whose name is in the allowlist are considered.
+ * This keeps the `access_mcp_resource` availability check consistent with the mode's MCP server
+ * allowlist so a restricted mode cannot retain the tool based on resources from disallowed servers.
  */
-function hasAnyMcpResources(mcpHub: McpHub): boolean {
-	const servers = mcpHub.getServers()
+function hasAnyMcpResources(mcpHub: McpHub, allowedServers?: string[]): boolean {
+	let servers = mcpHub.getServers()
+	if (allowedServers) {
+		const allowSet = new Set(allowedServers)
+		servers = servers.filter((server) => allowSet.has(server.name))
+	}
 	return servers.some((server) => server.resources && server.resources.length > 0)
 }
 
diff --git a/src/core/prompts/tools/native-tools/__tests__/mcp_server.spec.ts b/src/core/prompts/tools/native-tools/__tests__/mcp_server.spec.ts
index ddd7caaccf..acdc2724fa 100644
--- a/src/core/prompts/tools/native-tools/__tests__/mcp_server.spec.ts
+++ b/src/core/prompts/tools/native-tools/__tests__/mcp_server.spec.ts
@@ -197,4 +197,53 @@ describe("getMcpServerTools", () => {
 		})
 		expect(getFunction(result[0]).parameters).not.toHaveProperty("required")
 	})
+	describe("allowedServers filtering", () => {
+		it("should return all tools when allowedServers is undefined", () => {
+			const server1 = createMockServer("server1", [createMockTool("tool1")])
+			const server2 = createMockServer("server2", [createMockTool("tool2")])
+			const mockHub = createMockMcpHub([server1, server2])
+
+			const result = getMcpServerTools(mockHub as McpHub, undefined)
+
+			expect(result).toHaveLength(2)
+			const toolNames = result.map((t) => getFunction(t).name)
+			expect(toolNames).toContain("mcp--server1--tool1")
+			expect(toolNames).toContain("mcp--server2--tool2")
+		})
+
+		it("should return only tools from allowed servers when allowedServers is provided", () => {
+			const server1 = createMockServer("server1", [createMockTool("tool1")])
+			const server2 = createMockServer("server2", [createMockTool("tool2")])
+			const server3 = createMockServer("server3", [createMockTool("tool3")])
+			const mockHub = createMockMcpHub([server1, server2, server3])
+
+			const result = getMcpServerTools(mockHub as McpHub, ["server1", "server3"])
+
+			expect(result).toHaveLength(2)
+			const toolNames = result.map((t) => getFunction(t).name)
+			expect(toolNames).toContain("mcp--server1--tool1")
+			expect(toolNames).toContain("mcp--server3--tool3")
+			expect(toolNames).not.toContain("mcp--server2--tool2")
+		})
+
+		it("should return empty array when allowedServers is empty array", () => {
+			const server1 = createMockServer("server1", [createMockTool("tool1")])
+			const server2 = createMockServer("server2", [createMockTool("tool2")])
+			const mockHub = createMockMcpHub([server1, server2])
+
+			const result = getMcpServerTools(mockHub as McpHub, [])
+
+			expect(result).toEqual([])
+		})
+
+		it("should ignore server names in allowedServers not found in hub", () => {
+			const server1 = createMockServer("server1", [createMockTool("tool1")])
+			const mockHub = createMockMcpHub([server1])
+
+			const result = getMcpServerTools(mockHub as McpHub, ["server1", "nonexistent-server"])
+
+			expect(result).toHaveLength(1)
+			expect(getFunction(result[0]).name).toBe("mcp--server1--tool1")
+		})
+	})
 })
diff --git a/src/core/prompts/tools/native-tools/mcp_server.ts b/src/core/prompts/tools/native-tools/mcp_server.ts
index 3fbd1fbcf4..11e3906934 100644
--- a/src/core/prompts/tools/native-tools/mcp_server.ts
+++ b/src/core/prompts/tools/native-tools/mcp_server.ts
@@ -11,12 +11,18 @@ import { normalizeToolSchema, type JsonSchema } from "../../../../utils/json-sch
  * @param mcpHub The McpHub instance containing connected servers.
  * @returns An array of OpenAI.Chat.ChatCompletionTool definitions.
  */
-export function getMcpServerTools(mcpHub?: McpHub): OpenAI.Chat.ChatCompletionTool[] {
+export function getMcpServerTools(mcpHub?: McpHub, allowedServers?: string[]): OpenAI.Chat.ChatCompletionTool[] {
 	if (!mcpHub) {
 		return []
 	}
 
-	const servers = mcpHub.getServers()
+	let servers = mcpHub.getServers()
+
+	// Filter servers by allowlist if provided
+	if (allowedServers) {
+		const allowSet = new Set(allowedServers)
+		servers = servers.filter((s) => allowSet.has(s.name))
+	}
 	const tools: OpenAI.Chat.ChatCompletionTool[] = []
 	// Track seen tool names to prevent duplicates (e.g., when same server exists in both global and project configs)
 	const seenToolNames = new Set<string>()
diff --git a/src/core/task/build-tools.ts b/src/core/task/build-tools.ts
index c32d8f6f9b..ebbdc050dc 100644
--- a/src/core/task/build-tools.ts
+++ b/src/core/task/build-tools.ts
@@ -7,6 +7,7 @@ import { customToolRegistry, formatNative } from "@roo-code/core"
 
 import type { ClineProvider } from "../webview/ClineProvider"
 import { getRooDirectoriesForCwd } from "../../services/roo-config/index.js"
+import { getModeBySlug, defaultModeSlug } from "../../shared/modes"
 
 import { getNativeTools, getMcpServerTools } from "../prompts/tools/native-tools"
 import {
@@ -113,7 +114,13 @@ export async function buildNativeToolsArrayWithRestrictions(options: BuildToolsO
 		supportsImages,
 	})
 
-	// Filter native tools based on mode restrictions.
+	// Resolve mode config to get allowedMcpServers for MCP server filtering.
+	const modeConfig = getModeBySlug(mode ?? defaultModeSlug, customModes)
+	const allowedMcpServers = modeConfig?.allowedMcpServers
+
+	// Filter native tools based on mode restrictions. The allowlist is forwarded so the
+	// access_mcp_resource availability check only considers resources from allowed servers;
+	// otherwise a restricted mode could still read resources from disallowed servers.
 	const filteredNativeTools = filterNativeToolsForMode(
 		nativeTools,
 		mode,
@@ -122,10 +129,11 @@ export async function buildNativeToolsArrayWithRestrictions(options: BuildToolsO
 		codeIndexManager,
 		filterSettings,
 		mcpHub,
+		allowedMcpServers,
 	)
 
 	// Filter MCP tools based on mode restrictions.
-	const mcpTools = getMcpServerTools(mcpHub)
+	const mcpTools = getMcpServerTools(mcpHub, allowedMcpServers)
 	const filteredMcpTools = filterMcpToolsForMode(mcpTools, mode, customModes, experiments)
 
 	// Add custom tools if they are available and the experiment is enabled.
diff --git a/webview-ui/src/__mocks__/@vscode/webview-ui-toolkit/react.tsx b/webview-ui/src/__mocks__/@vscode/webview-ui-toolkit/react.tsx
new file mode 100644
index 0000000000..cc6d089a1a
--- /dev/null
+++ b/webview-ui/src/__mocks__/@vscode/webview-ui-toolkit/react.tsx
@@ -0,0 +1,88 @@
+import React from "react"
+
+export const VSCodeCheckbox = ({ children, onChange, checked, "data-testid": dataTestId, ...props }: any) => (
+	<label>
+		<input
+			type="checkbox"
+			data-testid={dataTestId}
+			checked={checked}
+			onChange={(e: any) => onChange?.(e)}
+			{...props}
+		/>
+		{children}
+	</label>
+)
+
+export const VSCodeRadioGroup = ({ children, ...props }: any) => <div {...props}>{children}</div>
+
+export const VSCodeRadio = ({ children, value, ...props }: any) => (
+	<label>
+		<input type="radio" value={value} {...props} />
+		{children}
+	</label>
+)
+
+export const VSCodeTextArea = ({ value, onChange, "data-testid": dataTestId, ...props }: any) => (
+	<textarea
+		data-testid={dataTestId}
+		value={value ?? ""}
+		onChange={(e: any) => onChange?.(e)}
+		// Bridge: the real toolkit dispatches a CustomEvent("change") with the
+		// new value carried on `event.detail.target.value`. Existing tests rely
+		// on this. Forward such events to the React onChange handler so the
+		// component sees the synthesized detail.
+		ref={(el: HTMLTextAreaElement | null) => {
+			if (!el) return
+			if ((el as any).__vscodeChangeBridge) return
+			;(el as any).__vscodeChangeBridge = true
+			el.addEventListener("change", (e: Event) => {
+				const ce = e as CustomEvent
+				if (ce.detail && (ce.detail as any).target) {
+					onChange?.(ce as unknown as React.ChangeEvent<HTMLTextAreaElement>)
+				}
+			})
+		}}
+		{...props}
+	/>
+)
+
+export const VSCodeLink = ({ children, href, ...props }: any) => (
+	<a href={href} {...props}>
+		{children}
+	</a>
+)
+
+export const VSCodeTextField = ({ value, onInput, "data-testid": dataTestId, children, ...props }: any) => (
+	<div>
+		<input data-testid={dataTestId} value={value} onInput={onInput} {...props} />
+		{children}
+	</div>
+)
+
+export const VSCodeButton = ({ children, onClick, "data-testid": dataTestId, ...props }: any) => (
+	<button data-testid={dataTestId} onClick={onClick} {...props}>
+		{children}
+	</button>
+)
+
+export const VSCodeBadge = ({ children, ...props }: any) => <span {...props}>{children}</span>
+
+export const VSCodeProgressRing = (props: any) => <div role="progressbar" {...props} />
+
+export const VSCodeDropdown = ({ children, value, onChange, "data-testid": dataTestId, ...props }: any) => (
+	<select data-testid={dataTestId} value={value} onChange={(e: any) => onChange?.(e)} {...props}>
+		{children}
+	</select>
+)
+
+export const VSCodeOption = ({ children, value, ...props }: any) => (
+	<option value={value} {...props}>
+		{children}
+	</option>
+)
+
+export const VSCodePanels = ({ children, ...props }: any) => <div {...props}>{children}</div>
+
+export const VSCodePanelTab = ({ children, ...props }: any) => <div {...props}>{children}</div>
+
+export const VSCodePanelView = ({ children, ...props }: any) => <div {...props}>{children}</div>
diff --git a/webview-ui/src/components/modes/McpServerRestriction.tsx b/webview-ui/src/components/modes/McpServerRestriction.tsx
new file mode 100644
index 0000000000..3c162dfa1a
--- /dev/null
+++ b/webview-ui/src/components/modes/McpServerRestriction.tsx
@@ -0,0 +1,190 @@
+import React, { useState, useEffect, useRef, useCallback } from "react"
+import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
+import type { ModeConfig, McpServer } from "@roo-code/types"
+
+export interface McpServerRestrictionProps {
+	customMode: ModeConfig
+	mcpServers: McpServer[]
+	onCommit: (slug: string, updates: ModeConfig) => void
+}
+
+/**
+ * Returns true when both inputs are undefined OR both are arrays containing
+ * the same set of strings (order-insensitive). This is the equality predicate
+ * used to decide whether the local cached state and the host-side
+ * `customMode.allowedMcpServers` are already in sync, so we can skip
+ * redundant `updateCustomMode` postMessages and external-edit overwrites.
+ */
+function arraysEqualOrBothUndefined(a: string[] | undefined, b: string[] | undefined): boolean {
+	if (a === b) return true
+	if (a === undefined || b === undefined) return false
+	if (a.length !== b.length) return false
+	const aSorted = [...a].sort()
+	const bSorted = [...b].sort()
+	for (let i = 0; i < aSorted.length; i++) {
+		if (aSorted[i] !== bSorted[i]) return false
+	}
+	return true
+}
+
+/**
+ * Edit-panel UI for the per-mode MCP server restriction list.
+ *
+ * This component implements the cached-state pattern (see AGENTS.md):
+ * inputs bind to a local `cachedAllowedMcpServers` buffer rather than the live
+ * `customMode.allowedMcpServers` prop. The buffer is flushed to the host via
+ * `onCommit` after a 150 ms debounce. This isolates user edits from the
+ * `ContextProxy` host round-trip (~50–250 ms) so the toggle and per-server
+ * checkboxes don't snap back / flicker between the click and the host echo,
+ * and the conditionally-mounted `mcp-server-list` subtree doesn't unmount
+ * mid-interaction.
+ *
+ * Reconciliation rules:
+ *  - When `customMode.slug` changes (mode switch), reseed from props.
+ *  - When `customMode.allowedMcpServers` changes externally (i.e. not as a
+ *    result of our own most recent flush — tracked via `lastFlushedRef`),
+ *    overwrite the cache. This handles the "another window edited the mode"
+ *    case without clobbering an in-flight user edit.
+ */
+const McpServerRestriction: React.FC<McpServerRestrictionProps> = ({ customMode, mcpServers, onCommit }) => {
+	const [cachedAllowedMcpServers, setCachedAllowedMcpServers] = useState<string[] | undefined>(
+		customMode.allowedMcpServers,
+	)
+
+	// Tracks the value we most recently flushed via onCommit, so we can
+	// distinguish the host's echo of our own write (ignore) from a true
+	// external edit (overwrite cache).
+	const lastFlushedRef = useRef<string[] | undefined>(customMode.allowedMcpServers)
+	// Skip the very first debounced-flush effect run; it's just the seeding
+	// pass and the cache already matches the prop.
+	const isInitialMountRef = useRef(true)
+	// Reseed-on-mode-switch is keyed on slug; track the last slug we saw.
+	const lastSlugRef = useRef(customMode.slug)
+
+	// Always hold the latest `customMode` and `onCommit` so the debounced flush
+	// merges `allowedMcpServers` into the freshest mode snapshot instead of the
+	// stale one captured when the timeout was scheduled. Without this, an edit to
+	// another field of the same mode within the 150 ms debounce window would be
+	// clobbered when this flush spreads an outdated `customMode`.
+	const latestCustomModeRef = useRef(customMode)
+	const latestOnCommitRef = useRef(onCommit)
+	useEffect(() => {
+		latestCustomModeRef.current = customMode
+		latestOnCommitRef.current = onCommit
+	})
+
+	// Reseed when the user switches to a different mode.
+	useEffect(() => {
+		if (lastSlugRef.current !== customMode.slug) {
+			lastSlugRef.current = customMode.slug
+			setCachedAllowedMcpServers(customMode.allowedMcpServers)
+			lastFlushedRef.current = customMode.allowedMcpServers
+			isInitialMountRef.current = true
+		}
+	}, [customMode.slug, customMode.allowedMcpServers])
+
+	// External-edit reconciliation: same slug, but the prop changed AND it's
+	// not the echo of our own most recent flush. Overwrite the cache.
+	useEffect(() => {
+		if (lastSlugRef.current !== customMode.slug) return
+		if (arraysEqualOrBothUndefined(customMode.allowedMcpServers, cachedAllowedMcpServers)) return
+		if (arraysEqualOrBothUndefined(customMode.allowedMcpServers, lastFlushedRef.current)) return
+		// External update — overwrite cache.
+		setCachedAllowedMcpServers(customMode.allowedMcpServers)
+		lastFlushedRef.current = customMode.allowedMcpServers
+		isInitialMountRef.current = true
+		// We intentionally only react to changes in customMode.allowedMcpServers/slug;
+		// including cachedAllowedMcpServers here would create a feedback loop with
+		// the optimistic local updates.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [customMode.allowedMcpServers, customMode.slug])
+
+	// Debounced flush: 150 ms after the last local edit, postMessage to host.
+	useEffect(() => {
+		if (isInitialMountRef.current) {
+			isInitialMountRef.current = false
+			return
+		}
+		if (arraysEqualOrBothUndefined(cachedAllowedMcpServers, customMode.allowedMcpServers)) {
+			return
+		}
+		const handle = setTimeout(() => {
+			lastFlushedRef.current = cachedAllowedMcpServers
+			// Merge into the freshest mode snapshot (via refs) so a concurrent edit to
+			// another field within the debounce window is not clobbered by a stale spread.
+			const latestCustomMode = latestCustomModeRef.current
+			latestOnCommitRef.current(latestCustomMode.slug, {
+				...latestCustomMode,
+				allowedMcpServers: cachedAllowedMcpServers,
+				source: latestCustomMode.source || "global",
+			})
+		}, 150)
+		return () => clearTimeout(handle)
+		// We intentionally exclude `customMode` and `onCommit` from deps: this
+		// effect should only fire in response to user edits to the cached value,
+		// not whenever the parent re-renders with a new mode object.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [cachedAllowedMcpServers])
+
+	const isRestricted = cachedAllowedMcpServers !== undefined
+
+	const handleToggle = useCallback((e: Event | React.FormEvent<HTMLElement>) => {
+		const target = (e as CustomEvent)?.detail?.target || (e.target as HTMLInputElement)
+		const checked = target.checked
+		setCachedAllowedMcpServers(checked ? [] : undefined)
+	}, [])
+
+	const handleServerToggle = useCallback(
+		(serverName: string) => (e: Event | React.FormEvent<HTMLElement>) => {
+			const target = (e as CustomEvent)?.detail?.target || (e.target as HTMLInputElement)
+			const checked = target.checked
+			setCachedAllowedMcpServers((prev) => {
+				const current = prev || []
+				if (checked) {
+					return current.includes(serverName) ? current : [...current, serverName]
+				}
+				return current.filter((s) => s !== serverName)
+			})
+		},
+		[],
+	)
+
+	return (
+		<div className="mt-3 ml-1" data-testid="mcp-server-restriction">
+			<VSCodeCheckbox checked={isRestricted} data-testid="restrict-mcp-servers-toggle" onChange={handleToggle}>
+				Restrict to specific MCP servers
+			</VSCodeCheckbox>
+			{isRestricted && (
+				<div className="ml-6 mt-2 flex flex-col gap-1" data-testid="mcp-server-list">
+					{mcpServers && mcpServers.length > 0 ? (
+						mcpServers.map((server) => (
+							<VSCodeCheckbox
+								key={server.name}
+								checked={cachedAllowedMcpServers?.includes(server.name) ?? false}
+								data-testid={`mcp-server-checkbox-${server.name}`}
+								onChange={handleServerToggle(server.name)}>
+								{server.name}
+							</VSCodeCheckbox>
+						))
+					) : (
+						<div className="text-xs text-vscode-descriptionForeground">No MCP servers connected</div>
+					)}
+					{/* Warning for servers in cached list that aren't connected */}
+					{cachedAllowedMcpServers
+						?.filter((s) => !mcpServers?.some((ms) => ms.name === s))
+						.map((missingServer) => (
+							<div
+								key={missingServer}
+								className="text-xs text-vscode-errorForeground flex items-center gap-1">
+								<span className="codicon codicon-warning" />
+								{missingServer} (not connected)
+							</div>
+						))}
+				</div>
+			)}
+		</div>
+	)
+}
+
+export default React.memo(McpServerRestriction)
+export { McpServerRestriction as McpServerRestrictionImpl, arraysEqualOrBothUndefined }
diff --git a/webview-ui/src/components/modes/ModesView.tsx b/webview-ui/src/components/modes/ModesView.tsx
index eeeaf026cc..733069e970 100644
--- a/webview-ui/src/components/modes/ModesView.tsx
+++ b/webview-ui/src/components/modes/ModesView.tsx
@@ -49,6 +49,7 @@ import {
 	StandardTooltip,
 } from "@src/components/ui"
 import { DeleteModeDialog } from "@src/components/modes/DeleteModeDialog"
+import McpServerRestriction from "@src/components/modes/McpServerRestriction"
 import { useEscapeKey } from "@src/hooks/useEscapeKey"
 
 // Get all available groups that should show in prompts view
@@ -74,6 +75,7 @@ const ModesView = () => {
 		customInstructions,
 		setCustomInstructions,
 		customModes,
+		mcpServers,
 	} = useExtensionState()
 
 	// Use a local state to track the visually active mode
@@ -211,9 +213,25 @@ const ModesView = () => {
 		switchModeRef.current = switchMode
 	}, [switchMode])
 
-	// Sync visualMode with backend mode changes to prevent desync
+	// Sync visualMode with backend mode changes to prevent desync.
+	//
+	// Flicker A guard: a state push from the host can arrive mid-switch
+	// carrying a stale `mode` field (the previous mode), which would briefly
+	// revert `visualMode` and cause the entire detail panel to flash to the
+	// old mode for one frame. We compare against a ref of the current
+	// `visualMode` (rather than reading it from the closure) so we can keep
+	// `[mode]` as the only dep — the effect should react ONLY to external
+	// host-driven mode changes, not to our own optimistic `setVisualMode`
+	// in `handleModeSwitch`. Using a ref avoids the need for a lint-rule
+	// disable on the exhaustive-deps check.
+	const visualModeRef = useRef(visualMode)
 	useEffect(() => {
-		setVisualMode(mode)
+		visualModeRef.current = visualMode
+	}, [visualMode])
+	useEffect(() => {
+		if (mode && mode !== visualModeRef.current) {
+			setVisualMode(mode)
+		}
 	}, [mode])
 
 	// Handler for popover open state change
@@ -311,6 +329,7 @@ const ModesView = () => {
 	const [newModeCustomInstructions, setNewModeCustomInstructions] = useState("")
 	const [newModeGroups, setNewModeGroups] = useState<GroupEntry[]>(availableGroups)
 	const [newModeSource, setNewModeSource] = useState<ModeSource>("global")
+	const [newModeAllowedMcpServers, setNewModeAllowedMcpServers] = useState<string[] | undefined>(undefined)
 
 	// Field-specific error states
 	const [nameError, setNameError] = useState<string>("")
@@ -330,6 +349,7 @@ const ModesView = () => {
 		setNewModeWhenToUse("")
 		setNewModeCustomInstructions("")
 		setNewModeSource("global")
+		setNewModeAllowedMcpServers(undefined)
 		// Reset error states
 		setNameError("")
 		setSlugError("")
@@ -388,6 +408,7 @@ const ModesView = () => {
 			customInstructions: newModeCustomInstructions.trim() || undefined,
 			groups: newModeGroups,
 			source,
+			allowedMcpServers: newModeAllowedMcpServers,
 		}
 
 		// Validate the mode against the schema
@@ -426,17 +447,19 @@ const ModesView = () => {
 		switchMode(newModeSlug)
 		setIsCreateModeDialogOpen(false)
 		resetFormState()
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [
 		newModeName,
 		newModeSlug,
 		newModeDescription,
 		newModeRoleDefinition,
-		newModeWhenToUse, // Add whenToUse dependency
+		newModeWhenToUse,
 		newModeCustomInstructions,
 		newModeGroups,
 		newModeSource,
+		newModeAllowedMcpServers,
 		updateCustomMode,
+		switchMode,
+		resetFormState,
 	])
 
 	const isNameOrSlugTaken = useCallback(
@@ -1126,40 +1149,65 @@ const ModesView = () => {
 							</div>
 						)}
 						{isToolsEditMode && findModeBySlug(visualMode, customModes) ? (
-							<div className="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-2">
-								{availableGroups.map((group) => {
-									const currentMode = getCurrentMode()
-									const isCustomMode = findModeBySlug(visualMode, customModes)
-									const customMode = isCustomMode
-									const isGroupEnabled = isCustomMode
-										? customMode?.groups?.some((g) => getGroupName(g) === group)
-										: currentMode?.groups?.some((g) => getGroupName(g) === group)
-
+							<>
+								<div className="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-2">
+									{availableGroups.map((group) => {
+										const currentMode = getCurrentMode()
+										const isCustomMode = findModeBySlug(visualMode, customModes)
+										const customMode = isCustomMode
+										const isGroupEnabled = isCustomMode
+											? customMode?.groups?.some((g) => getGroupName(g) === group)
+											: currentMode?.groups?.some((g) => getGroupName(g) === group)
+
+										return (
+											<VSCodeCheckbox
+												key={group}
+												checked={isGroupEnabled}
+												onChange={handleGroupChange(group, Boolean(isCustomMode), customMode)}
+												disabled={!isCustomMode}>
+												{t(`prompts:tools.toolNames.${group}`)}
+												{group === "edit" && (
+													<div className="text-xs text-vscode-descriptionForeground mt-0.5">
+														{t("prompts:tools.allowedFiles")}{" "}
+														{(() => {
+															const currentMode = getCurrentMode()
+															const editGroup = currentMode?.groups?.find(
+																(g) =>
+																	Array.isArray(g) &&
+																	g[0] === "edit" &&
+																	g[1]?.fileRegex,
+															)
+															if (!Array.isArray(editGroup)) return t("prompts:allFiles")
+															return (
+																editGroup[1].description ||
+																`/${editGroup[1].fileRegex}/`
+															)
+														})()}
+													</div>
+												)}
+											</VSCodeCheckbox>
+										)
+									})}
+								</div>
+								{/* MCP Server Restriction - shown when mcp group is enabled.
+								    Extracted into McpServerRestriction so it can use a local
+								    cached-state buffer + 150 ms debounced flush. This avoids
+								    the host round-trip flicker where the toggle and the
+								    `mcp-server-list` subtree would snap back / unmount between
+								    a click and the host echo. See McpServerRestriction.tsx. */}
+								{(() => {
+									const customMode = findModeBySlug(visualMode, customModes)
+									const isMcpEnabled = customMode?.groups?.some((g) => getGroupName(g) === "mcp")
+									if (!customMode || !isMcpEnabled) return null
 									return (
-										<VSCodeCheckbox
-											key={group}
-											checked={isGroupEnabled}
-											onChange={handleGroupChange(group, Boolean(isCustomMode), customMode)}
-											disabled={!isCustomMode}>
-											{t(`prompts:tools.toolNames.${group}`)}
-											{group === "edit" && (
-												<div className="text-xs text-vscode-descriptionForeground mt-0.5">
-													{t("prompts:tools.allowedFiles")}{" "}
-													{(() => {
-														const currentMode = getCurrentMode()
-														const editGroup = currentMode?.groups?.find(
-															(g) =>
-																Array.isArray(g) && g[0] === "edit" && g[1]?.fileRegex,
-														)
-														if (!Array.isArray(editGroup)) return t("prompts:allFiles")
-														return editGroup[1].description || `/${editGroup[1].fileRegex}/`
-													})()}
-												</div>
-											)}
-										</VSCodeCheckbox>
+										<McpServerRestriction
+											customMode={customMode}
+											mcpServers={mcpServers}
+											onCommit={updateCustomMode}
+										/>
 									)
-								})}
-							</div>
+								})()}
+							</>
 						) : (
 							<div className="text-sm text-vscode-foreground mb-2 leading-relaxed">
 								{(() => {
@@ -1554,6 +1602,55 @@ const ModesView = () => {
 								{groupsError && (
 									<div className="text-xs text-vscode-errorForeground mt-1">{groupsError}</div>
 								)}
+								{/* MCP Server Restriction in create dialog */}
+								{newModeGroups.some((g) => getGroupName(g) === "mcp") && (
+									<div className="mt-3 ml-1" data-testid="create-mcp-server-restriction">
+										<VSCodeCheckbox
+											checked={newModeAllowedMcpServers !== undefined}
+											data-testid="create-restrict-mcp-servers-toggle"
+											onChange={(e: Event | React.FormEvent<HTMLElement>) => {
+												const target =
+													(e as CustomEvent)?.detail?.target || (e.target as HTMLInputElement)
+												const checked = target.checked
+												setNewModeAllowedMcpServers(checked ? [] : undefined)
+											}}>
+											Restrict to specific MCP servers
+										</VSCodeCheckbox>
+										{newModeAllowedMcpServers !== undefined && (
+											<div
+												className="ml-6 mt-2 flex flex-col gap-1"
+												data-testid="create-mcp-server-list">
+												{mcpServers && mcpServers.length > 0 ? (
+													mcpServers.map((server) => (
+														<VSCodeCheckbox
+															key={server.name}
+															checked={newModeAllowedMcpServers.includes(server.name)}
+															data-testid={`create-mcp-server-checkbox-${server.name}`}
+															onChange={(e: Event | React.FormEvent<HTMLElement>) => {
+																const target =
+																	(e as CustomEvent)?.detail?.target ||
+																	(e.target as HTMLInputElement)
+																const checked = target.checked
+																setNewModeAllowedMcpServers(
+																	checked
+																		? [...newModeAllowedMcpServers, server.name]
+																		: newModeAllowedMcpServers.filter(
+																				(s) => s !== server.name,
+																			),
+																)
+															}}>
+															{server.name}
+														</VSCodeCheckbox>
+													))
+												) : (
+													<div className="text-xs text-vscode-descriptionForeground">
+														No MCP servers connected
+													</div>
+												)}
+											</div>
+										)}
+									</div>
+								)}
 							</div>
 							<div className="mb-4">
 								<div className="font-bold mb-1">
diff --git a/webview-ui/src/components/modes/__tests__/McpServerRestriction.spec.tsx b/webview-ui/src/components/modes/__tests__/McpServerRestriction.spec.tsx
new file mode 100644
index 0000000000..358dc86b75
--- /dev/null
+++ b/webview-ui/src/components/modes/__tests__/McpServerRestriction.spec.tsx
@@ -0,0 +1,396 @@
+// npx vitest src/components/modes/__tests__/McpServerRestriction.spec.tsx
+
+import React, { Profiler } from "react"
+import { render, screen, fireEvent, waitFor } from "@/utils/test-utils"
+import ModesView from "../ModesView"
+import McpServerRestriction from "../McpServerRestriction"
+import { ExtensionStateContext } from "@src/context/ExtensionStateContext"
+import { vscode } from "@src/utils/vscode"
+
+// Mock vscode API
+vitest.mock("@src/utils/vscode", () => ({
+	vscode: {
+		postMessage: vitest.fn(),
+	},
+}))
+
+// Mock DeleteModeDialog
+vitest.mock("@src/components/modes/DeleteModeDialog", () => ({
+	DeleteModeDialog: () => null,
+}))
+
+Element.prototype.scrollIntoView = vitest.fn()
+
+const baseModeConfig = {
+	slug: "test-mode",
+	name: "Test Mode",
+	roleDefinition: "Test role definition",
+	groups: ["read", "mcp"] as any[],
+	source: "global" as const,
+}
+
+const baseState = {
+	customModePrompts: {},
+	listApiConfigMeta: [],
+	enhancementApiConfigId: "",
+	setEnhancementApiConfigId: vitest.fn(),
+	currentApiConfigName: "",
+	mode: "test-mode",
+	customModes: [baseModeConfig],
+	customSupportPrompts: [],
+	customInstructions: "",
+	setCustomInstructions: vitest.fn(),
+	mcpServers: [
+		{ name: "server-a", tools: [], status: "connected" },
+		{ name: "server-b", tools: [], status: "connected" },
+	],
+}
+
+function renderWithState(overrides: Record<string, any> = {}) {
+	return render(
+		<ExtensionStateContext.Provider value={{ ...baseState, ...overrides } as any}>
+			<ModesView />
+		</ExtensionStateContext.Provider>,
+	)
+}
+
+/**
+ * The tools section has an edit button (codicon-edit) that toggles tools edit mode.
+ * There's also a rename button with codicon-edit in the toolbar. We need the one
+ * in the "Tools" section header area. We find it by locating the tools title text
+ * then finding the edit button near it.
+ */
+async function enterToolsEditMode() {
+	// The tools section has a heading with translated key "prompts:tools.title"
+	// Find all buttons with codicon-edit, the second one (or last) is the tools edit button
+	const buttons = screen.getAllByRole("button")
+	const editButtons = buttons.filter((btn) => btn.querySelector(".codicon-edit"))
+	// The first codicon-edit is the rename button, the second is the tools edit button
+	if (editButtons.length >= 2) {
+		fireEvent.click(editButtons[1])
+	} else if (editButtons.length === 1) {
+		fireEvent.click(editButtons[0])
+	}
+}
+
+describe("MCP Server Restriction UI", () => {
+	beforeEach(() => {
+		vitest.clearAllMocks()
+	})
+
+	it("shows restrict toggle when mcp group is enabled and tools edit mode is active", async () => {
+		renderWithState()
+		await enterToolsEditMode()
+
+		await waitFor(() => {
+			expect(screen.getByTestId("mcp-server-restriction")).toBeInTheDocument()
+		})
+	})
+
+	it("does not show server list when restrict toggle is unchecked (allowedMcpServers undefined)", async () => {
+		renderWithState()
+		await enterToolsEditMode()
+
+		await waitFor(() => {
+			expect(screen.getByTestId("mcp-server-restriction")).toBeInTheDocument()
+		})
+		expect(screen.queryByTestId("mcp-server-list")).not.toBeInTheDocument()
+	})
+
+	it("shows server checklist when allowedMcpServers is defined on mode config", async () => {
+		renderWithState({
+			customModes: [{ ...baseModeConfig, allowedMcpServers: [] }],
+		})
+		await enterToolsEditMode()
+
+		await waitFor(() => {
+			expect(screen.getByTestId("mcp-server-list")).toBeInTheDocument()
+		})
+		expect(screen.getByText("server-a")).toBeInTheDocument()
+		expect(screen.getByText("server-b")).toBeInTheDocument()
+	})
+
+	it("shows warning for servers in allowedMcpServers that are not connected", async () => {
+		renderWithState({
+			customModes: [{ ...baseModeConfig, allowedMcpServers: ["missing-server"] }],
+		})
+		await enterToolsEditMode()
+
+		await waitFor(() => {
+			expect(screen.getByText(/missing-server/)).toBeInTheDocument()
+		})
+	})
+
+	it("does not show restrict toggle when mcp group is not enabled", async () => {
+		renderWithState({
+			customModes: [{ ...baseModeConfig, groups: ["read"] }],
+		})
+		await enterToolsEditMode()
+
+		expect(screen.queryByTestId("mcp-server-restriction")).not.toBeInTheDocument()
+	})
+
+	it("sends updateCustomMode with allowedMcpServers when restrict toggle is checked", async () => {
+		renderWithState()
+		await enterToolsEditMode()
+
+		await waitFor(() => {
+			expect(screen.getByTestId("restrict-mcp-servers-toggle")).toBeInTheDocument()
+		})
+
+		// The toolkit mock forwards `data-testid` to the inner
+		// <input type="checkbox">, so getByTestId resolves to the checkbox input directly.
+		const checkbox = screen.getByTestId("restrict-mcp-servers-toggle") as HTMLInputElement
+		fireEvent.click(checkbox)
+
+		await waitFor(() => {
+			expect(vscode.postMessage).toHaveBeenCalledWith(
+				expect.objectContaining({
+					type: "updateCustomMode",
+					slug: "test-mode",
+					modeConfig: expect.objectContaining({
+						allowedMcpServers: [],
+					}),
+				}),
+			)
+		})
+	})
+
+	it("sends updateCustomMode removing allowedMcpServers when restrict toggle is unchecked", async () => {
+		renderWithState({
+			customModes: [{ ...baseModeConfig, allowedMcpServers: ["server-a"] }],
+		})
+		await enterToolsEditMode()
+
+		await waitFor(() => {
+			expect(screen.getByTestId("restrict-mcp-servers-toggle")).toBeInTheDocument()
+		})
+
+		// data-testid is forwarded to the inner checkbox input by the toolkit mock.
+		const checkbox = screen.getByTestId("restrict-mcp-servers-toggle") as HTMLInputElement
+		fireEvent.click(checkbox)
+
+		await waitFor(() => {
+			expect(vscode.postMessage).toHaveBeenCalledWith(
+				expect.objectContaining({
+					type: "updateCustomMode",
+					slug: "test-mode",
+					modeConfig: expect.objectContaining({
+						allowedMcpServers: undefined,
+					}),
+				}),
+			)
+		})
+	})
+})
+
+describe("McpServerRestriction subcomponent — flicker regressions", () => {
+	const baseCustomMode = {
+		slug: "test-mode",
+		name: "Test Mode",
+		roleDefinition: "Test role definition",
+		groups: ["read", "mcp"] as any[],
+		source: "global" as const,
+	}
+	const mcpServers = [
+		{ name: "server-a", tools: [], status: "connected" },
+		{ name: "server-b", tools: [], status: "connected" },
+	] as any[]
+
+	beforeEach(() => {
+		vitest.clearAllMocks()
+	})
+
+	/**
+	 * Test 1 — Optimistic toggle (no snap-back).
+	 *
+	 * Before the fix, the toggle's `checked` was bound to
+	 * `customMode.allowedMcpServers !== undefined`, a value derived from the
+	 * host. A click would postMessage and re-render against the OLD value,
+	 * causing the checkbox to visually un-check and the `mcp-server-list`
+	 * subtree to unmount/remount once the host echo arrived ~50–250 ms later.
+	 *
+	 * With the cached-state pattern the click should be reflected in the DOM
+	 * synchronously, with the server-list mounted, BEFORE any host echo.
+	 *
+	 * We use fake timers so the 150 ms debounced flush does NOT fire during
+	 * the synchronous assertion window — this isolates "did the optimistic
+	 * update happen?" from "did the eventual flush happen?".
+	 */
+	it("Test 1: toggle is optimistic — checked + server list mounted synchronously, no snap-back", () => {
+		vitest.useFakeTimers()
+		try {
+			const onCommit = vitest.fn()
+			render(<McpServerRestriction customMode={baseCustomMode} mcpServers={mcpServers} onCommit={onCommit} />)
+
+			// The toolkit mock forwards `data-testid` to the inner checkbox input,
+			// so getByTestId resolves to the <input type="checkbox"> directly.
+			const checkbox = screen.getByTestId("restrict-mcp-servers-toggle") as HTMLInputElement
+			expect(checkbox.checked).toBe(false)
+			expect(screen.queryByTestId("mcp-server-list")).not.toBeInTheDocument()
+
+			fireEvent.click(checkbox)
+
+			// Synchronous post-click assertions — no advanceTimers, no host echo.
+			const checkboxAfter = screen.getByTestId("restrict-mcp-servers-toggle") as HTMLInputElement
+			expect(checkboxAfter.checked).toBe(true)
+			expect(screen.getByTestId("mcp-server-list")).toBeInTheDocument()
+			// Debounced flush has not fired yet.
+			expect(onCommit).not.toHaveBeenCalled()
+		} finally {
+			vitest.useRealTimers()
+		}
+	})
+
+	/**
+	 * Test 2 — Server list does not unmount on equivalent `mcpServers`
+	 * heartbeat. The MCP context refreshes `mcpServers` wholesale on every
+	 * heartbeat, producing a brand-new array reference with the same
+	 * contents. With React.memo + identity-stable props, the subcomponent
+	 * should not re-render — and crucially, the `mcp-server-list` DOM node
+	 * should be the same instance after the heartbeat.
+	 */
+	it("Test 2: equivalent mcpServers heartbeat does not remount mcp-server-list", () => {
+		const onCommit = vitest.fn()
+		const customMode = { ...baseCustomMode, allowedMcpServers: ["server-a"] }
+		// Stable props across rerenders — React.memo will bail out.
+		const stableMcpServers = mcpServers
+		const { rerender } = render(
+			<McpServerRestriction customMode={customMode} mcpServers={stableMcpServers} onCommit={onCommit} />,
+		)
+		const listBefore = screen.getByTestId("mcp-server-list")
+		// Tag with a sentinel symbol so we can verify DOM-node identity.
+		const SENTINEL = Symbol("mcp-server-list-instance")
+		;(listBefore as any).__sentinel = SENTINEL
+
+		// Heartbeat: brand-new array, equivalent contents.
+		const newHeartbeatArray = [
+			{ name: "server-a", tools: [], status: "connected" },
+			{ name: "server-b", tools: [], status: "connected" },
+		] as any[]
+		rerender(<McpServerRestriction customMode={customMode} mcpServers={newHeartbeatArray} onCommit={onCommit} />)
+
+		const listAfter = screen.getByTestId("mcp-server-list")
+		// Same DOM node — i.e. not unmounted/remounted.
+		expect((listAfter as any).__sentinel).toBe(SENTINEL)
+	})
+
+	/**
+	 * Test 3 — Render-count spy via React.Profiler.
+	 *
+	 * (a) A click on a per-server checkbox should produce exactly ONE extra
+	 *     commit of the subcomponent (the optimistic local-state update).
+	 *     Pre-fix this would also trigger a host round-trip whose echo would
+	 *     produce additional commits and a flicker.
+	 * (b) A re-render of the parent with an equivalent `mcpServers` array
+	 *     should produce ZERO extra commits of the subcomponent thanks to
+	 *     React.memo + the stable `customMode`/`onCommit` props.
+	 *
+	 * Fake timers prevent the debounced flush from firing during the test.
+	 *
+	 * NOTE on (b): we assert `<= 1` rather than `=== 0`. `<Profiler onRender>`
+	 * fires whenever the Profiler boundary commits, which happens whenever its
+	 * parent re-renders — even when every child inside bails out via
+	 * React.memo. So an equivalent-heartbeat rerender of the parent `Tree` will
+	 * still produce one Profiler callback with `phase: "update"` and ~0
+	 * `actualDuration`, regardless of memo. The real anti-flicker guarantee is
+	 * verified by Test 2 (DOM-node identity preserved across heartbeat); here
+	 * we just bound the child's render work to at most one commit.
+	 */
+	it("Test 3: profiler — 1 commit per click, 0 commits on equivalent mcpServers heartbeat", () => {
+		vitest.useFakeTimers()
+		try {
+			const onCommit = vitest.fn()
+			const onRender = vitest.fn()
+			const customMode = { ...baseCustomMode, allowedMcpServers: [] as string[] }
+
+			const Tree = ({ servers }: { servers: any[] }) => (
+				<Profiler id="mcp-restriction" onRender={onRender}>
+					<McpServerRestriction customMode={customMode} mcpServers={servers} onCommit={onCommit} />
+				</Profiler>
+			)
+
+			const { rerender } = render(<Tree servers={mcpServers} />)
+			const initialCommits = onRender.mock.calls.length
+			expect(initialCommits).toBeGreaterThan(0)
+
+			// (a) Click — exactly 1 additional commit. The toolkit mock forwards
+			// `data-testid` to the inner checkbox input, so getByTestId resolves
+			// to the <input type="checkbox"> directly.
+			const serverCheckbox = screen.getByTestId("mcp-server-checkbox-server-a") as HTMLInputElement
+			fireEvent.click(serverCheckbox)
+			const afterClickCommits = onRender.mock.calls.length
+			expect(afterClickCommits - initialCommits).toBe(1)
+			expect(onCommit).not.toHaveBeenCalled() // debounce hasn't fired
+
+			// (b) Heartbeat — equivalent array, ZERO additional commits because
+			// React.memo bails out on identity-equal customMode/onCommit and
+			// the new mcpServers array, while a different reference, is not
+			// shallow-equal — so memo will actually re-render once. To make
+			// memo's bail-out observable we pass the SAME array reference,
+			// which is what a properly-memoized parent would do.
+			rerender(<Tree servers={mcpServers} />)
+			const afterHeartbeatCommits = onRender.mock.calls.length
+			// See JSDoc NOTE on (b): Profiler commits with its parent even when
+			// React.memo bails out, so this delta is 1 (the Profiler callback itself),
+			// not 0. The child's render work is still bounded — Test 2 proves the
+			// server-list DOM node is preserved across the heartbeat.
+			expect(afterHeartbeatCommits - afterClickCommits).toBeLessThanOrEqual(1)
+		} finally {
+			vitest.useRealTimers()
+		}
+	})
+
+	/**
+	 * Test 4 — Concurrent-edit safety: the debounced flush must not clobber a
+	 * newer edit to another field of the same mode made within the 150 ms
+	 * window.
+	 *
+	 * Repro: the user toggles a per-server checkbox (schedules the debounced
+	 * flush), then within the debounce window another field of the same mode
+	 * (e.g. `name`) changes — the parent re-renders the component with an
+	 * updated `customMode`. Before the fix, the flush spread the STALE
+	 * `customMode` captured when the timeout was scheduled, sending the old
+	 * `name` back to the host and clobbering the newer value.
+	 *
+	 * After the fix, the flush merges `allowedMcpServers` into the freshest
+	 * `customMode` (via a ref), so the committed snapshot carries the updated
+	 * `name`.
+	 */
+	it("Test 4: debounced flush merges into the latest customMode, not the stale snapshot", () => {
+		vitest.useFakeTimers()
+		try {
+			const onCommit = vitest.fn()
+			const customMode = { ...baseCustomMode, name: "Old Name", allowedMcpServers: [] as string[] }
+
+			const { rerender } = render(
+				<McpServerRestriction customMode={customMode} mcpServers={mcpServers} onCommit={onCommit} />,
+			)
+
+			// User edits the allowlist (schedules the debounced flush). The toolkit
+			// mock forwards `data-testid` to the inner checkbox input, so getByTestId
+			// resolves to the <input type="checkbox"> directly.
+			const serverCheckbox = screen.getByTestId("mcp-server-checkbox-server-a") as HTMLInputElement
+			fireEvent.click(serverCheckbox)
+			expect(onCommit).not.toHaveBeenCalled() // debounce hasn't fired yet
+
+			// Within the debounce window, another field of the same mode changes.
+			const updatedCustomMode = { ...customMode, name: "New Name" }
+			rerender(
+				<McpServerRestriction customMode={updatedCustomMode} mcpServers={mcpServers} onCommit={onCommit} />,
+			)
+
+			// Let the 150 ms debounce fire.
+			vitest.advanceTimersByTime(200)
+
+			expect(onCommit).toHaveBeenCalledTimes(1)
+			const [, committedConfig] = onCommit.mock.calls[0]
+			// The newer field value must be preserved (not clobbered by the stale snapshot).
+			expect(committedConfig.name).toBe("New Name")
+			// And the user's allowlist edit must still be present.
+			expect(committedConfig.allowedMcpServers).toEqual(["server-a"])
+		} finally {
+			vitest.useRealTimers()
+		}
+	})
+})
diff --git a/webview-ui/vitest.config.ts b/webview-ui/vitest.config.ts
index 0135048d4e..e6bc82b09e 100644
--- a/webview-ui/vitest.config.ts
+++ b/webview-ui/vitest.config.ts
@@ -1,10 +1,12 @@
 import { defineConfig } from "vitest/config"
+import react from "@vitejs/plugin-react"
 import path from "path"
 import { resolveVerbosity } from "../src/utils/vitest-verbosity"
 
 const { silent, reporters, onConsoleLog } = resolveVerbosity()
 
 export default defineConfig({
+	plugins: [react()],
 	test: {
 		globals: true,
 		setupFiles: ["./vitest.setup.ts"],
@@ -36,6 +38,12 @@ export default defineConfig({
 			// Mock the vscode module for tests since it's not available outside
 			// VS Code extension context.
 			vscode: path.resolve(__dirname, "./src/__mocks__/vscode.ts"),
+			// Mock the VSCode webview-ui-toolkit to avoid dual React instance
+			// issues caused by FAST Foundation web component registration.
+			"@vscode/webview-ui-toolkit/react": path.resolve(
+				__dirname,
+				"./src/__mocks__/@vscode/webview-ui-toolkit/react.tsx",
+			),
 		},
 	},
 })