gh_modesview.diff

diff --git a/webview-ui/src/components/modes/ModesView.tsx b/webview-ui/src/components/modes/ModesView.tsx
index eeeaf026c..584ae2ea4 100644
--- a/webview-ui/src/components/modes/ModesView.tsx
+++ b/webview-ui/src/components/modes/ModesView.tsx
@@ -74,6 +74,7 @@ const ModesView = () => {
 		customInstructions,
 		setCustomInstructions,
 		customModes,
+		mcpServers,
 	} = useExtensionState()
 
 	// Use a local state to track the visually active mode
@@ -311,6 +312,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 +332,7 @@ const ModesView = () => {
 		setNewModeWhenToUse("")
 		setNewModeCustomInstructions("")
 		setNewModeSource("global")
+		setNewModeAllowedMcpServers(undefined)
 		// Reset error states
 		setNameError("")
 		setSlugError("")
@@ -388,6 +391,7 @@ const ModesView = () => {
 			customInstructions: newModeCustomInstructions.trim() || undefined,
 			groups: newModeGroups,
 			source,
+			allowedMcpServers: newModeAllowedMcpServers,
 		}
 
 		// Validate the mode against the schema
@@ -1126,40 +1130,107 @@ 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)
-
+									{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 */}
+								{(() => {
+									const customMode = findModeBySlug(visualMode, customModes)
+									const isMcpEnabled = customMode?.groups?.some((g) => getGroupName(g) === "mcp")
+									if (!customMode || !isMcpEnabled) return null
+									const isRestricted = customMode.allowedMcpServers !== undefined
 									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 className="mt-3 ml-1" data-testid="mcp-server-restriction">
+											<VSCodeCheckbox
+												checked={isRestricted}
+												data-testid="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
+													updateCustomMode(customMode.slug, {
+														...customMode,
+														allowedMcpServers: checked ? [] : undefined,
+														source: customMode.source || "global",
+													})
+												}}>
+												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={customMode.allowedMcpServers?.includes(server.name) ?? false}
+																data-testid={`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
+																	const current = customMode.allowedMcpServers || []
+																	const updated = checked
+																		? [...current, server.name]
+																		: current.filter((s) => s !== server.name)
+																	updateCustomMode(customMode.slug, {
+																		...customMode,
+																		allowedMcpServers: updated,
+																		source: customMode.source || "global",
+																	})
+																}}>
+																{server.name}
+															</VSCodeCheckbox>
+														))
+													) : (
+														<div className="text-xs text-vscode-descriptionForeground">
+															No MCP servers connected
+														</div>
+													)}
+													{/* Warning for servers in allowedMcpServers that aren't connected */}
+													{customMode.allowedMcpServers?.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>
 											)}
-										</VSCodeCheckbox>
+										</div>
 									)
-								})}
-							</div>
+								})()}
+						</>
 						) : (
 							<div className="text-sm text-vscode-foreground mb-2 leading-relaxed">
 								{(() => {
@@ -1554,6 +1625,48 @@ 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">