feat: enhance custom modes management and UI interactions

Author: mechanicmuthu

src/core/config/CustomModesManager.ts

@@ -488,6 +488,8 @@ export class CustomModesManager {
 		}
 
 		settings.customModes = operation(settings.customModes)
+		// Log write operations so extension host logs show when custom modes are persisted.
+		console.info(`[CustomModesManager] Writing custom modes to: ${filePath}`)
 		await fs.writeFile(filePath, yaml.stringify(settings, { lineWidth: 0 }), "utf-8")
 	}
 
@@ -1047,12 +1049,32 @@ export class CustomModesManager {
 		try {
 			const modes = await this.getCustomModes()
 			const updatesByFile = new Map<string, Array<{ slug: string; disabled: boolean }>>()
+			// Collect built-in modes that need to be copied into the global custom modes file
+			const addsForSettings: ModeConfig[] = []
 
 			// Group updates by source/file
 			for (const update of updates) {
 				const mode = modes.find((m) => m.slug === update.slug)
 				if (!mode) {
-					console.warn(`Mode not found: ${update.slug}`)
+					// If mode isn't present in custom modes, it might be a built-in mode.
+					// Try loading built-in definitions and create a custom copy in the global file.
+					try {
+						const { modes: builtInModes } = await import("../../shared/modes")
+						const builtIn = builtInModes.find((b: any) => b.slug === update.slug)
+						if (builtIn) {
+							// Create a global-scoped custom mode based on the built-in definition
+							const modeToAdd: ModeConfig = {
+								...builtIn,
+								disabled: update.disabled,
+								source: "global",
+							}
+							addsForSettings.push(modeToAdd)
+							continue
+						}
+						console.warn(`Mode not found: ${update.slug}`)
+					} catch (e) {
+						console.warn(`Mode not found and failed to load built-ins: ${update.slug}`)
+					}
 					continue
 				}
 
@@ -1086,6 +1108,18 @@ export class CustomModesManager {
 				})
 			}
 
+			// If we found built-in modes that need to be copied to settings, add them now
+			if (addsForSettings.length > 0) {
+				const settingsPath = await this.getCustomModesFilePath()
+				await this.queueWrite(async () => {
+					await this.updateModesInFile(settingsPath, (modes) => {
+						// Remove any existing entries with the same slugs, then append new ones
+						const filtered = modes.filter((m) => !addsForSettings.some((a) => a.slug === m.slug))
+						return [...filtered, ...addsForSettings]
+					})
+				})
+			}
+
 			await this.refreshMergedState()
 		} catch (error) {
 			const errorMessage = error instanceof Error ? error.message : String(error)

src/core/webview/webviewMessageHandler.ts

@@ -2660,8 +2660,6 @@ export const webviewMessageHandler = async (
 					await provider.postStateToWebview()
 
 					await provider.postMessageToWebview({ type: "modeDisabledStatesUpdated", success: true })
-
-					vscode.window.showInformationMessage(t("common:info.modes_updated"))
 				} catch (error) {
 					provider.log(`Error updating mode disabled states: ${error}`)
 

webview-ui/src/App.tsx

@@ -165,6 +165,22 @@ const App = () => {
 				setModeDialogOpen(true)
 			}
 
+			// Internal request from child components to open the delete flow in Modes settings
+			if ((message as any).type === "openDeleteModeInSettingsRequest" && (message as any).slug) {
+				// Switch to modes tab so ModesView is mounted and can receive the forwarded message
+				switchTab("modes")
+				// Forward the request to ModesView to trigger its delete flow
+				window.postMessage(
+					{ type: "openDeleteModeInSettings", slug: (message as any).slug, name: (message as any).name },
+					"*",
+				)
+			}
+			// Internal request from ModesView to open the enable/disable dialog
+			if ((message as any).type === "showModeEnableDisableDialogRequest" && (message as any).modes) {
+				setModeDialogModes((message as any).modes as any[])
+				setModeDialogOpen(true)
+			}
+
 			if (message.type === "showDeleteMessageDialog" && message.messageTs) {
 				setDeleteMessageDialogState({ isOpen: true, messageTs: message.messageTs })
 			}

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react"
-import { Check, X, Eye, EyeOff, HelpCircle } from "lucide-react"
+import { Eye, EyeOff, HelpCircle } from "lucide-react"
 import {
 	Dialog,
 	DialogContent,
@@ -234,18 +234,19 @@ export const ModeEnableDisableDialog: React.FC<ModeEnableDisableDialogProps> = (
 			<div className="status-indicator flex items-center gap-1 flex-shrink-0">
 				{mode.disabled ? <EyeOff className="size-4 disabled" /> : <Eye className="size-4 enabled" />}
 				{/* Show delete for global custom modes (they override built-in or are user-created) */}
-				{mode.source === "global" && (
+				{(mode.source === "global" || mode.source === "project") && (
 					<div className="flex items-center gap-1">
 						<Button
 							variant="ghost"
 							size="icon"
 							onClick={() => {
-								// Ask the extension to check for rules folder and return path via message
-								window.parent.postMessage(
-									{ type: "deleteCustomMode", slug: mode.slug, checkOnly: true },
+								// Request the App to switch to Modes and forward the delete request
+								window.postMessage(
+									{ type: "openDeleteModeInSettingsRequest", slug: mode.slug, name: mode.name },
 									"*",
 								)
-							}}>
+							}}
+							className="text-vscode-foreground">
 							<span className="codicon codicon-trash"></span>
 						</Button>
 
@@ -279,8 +280,6 @@ export const ModeEnableDisableDialog: React.FC<ModeEnableDisableDialogProps> = (
 		const allEnabled = enabled === total
 		const noneEnabled = enabled === 0
 
-		if (modes.length === 0) return null
-
 		return (
 			<div className="space-y-3">
 				<div className="flex items-center justify-between">
@@ -301,24 +300,30 @@ export const ModeEnableDisableDialog: React.FC<ModeEnableDisableDialogProps> = (
 							size="sm"
 							onClick={() => attemptToggleSourceGroup(source, true)}
 							disabled={allEnabled}
-							className="enable-disable-button text-xs h-7 px-2">
+							className="text-xs h-7 px-2 text-vscode-foreground">
 							Enable All
 						</Button>
-						<Button
-							variant="outline"
-							size="sm"
-							onClick={() => attemptToggleSourceGroup(source, false)}
-							disabled={noneEnabled}
-							className="enable-disable-button text-xs h-7 px-2">
-							Disable All
-						</Button>
+						{source !== "builtin" && (
+							<Button
+								variant="outline"
+								size="sm"
+								onClick={() => attemptToggleSourceGroup(source, false)}
+								disabled={noneEnabled}
+								className="text-xs h-7 px-2 text-vscode-foreground">
+								Disable All
+							</Button>
+						)}
 					</div>
 				</div>
-				<div className="space-y-2">
-					{modes.map((mode) => (
-						<ModeItem key={mode.slug} mode={mode} />
-					))}
-				</div>
+				{modes.length === 0 ? (
+					<div className="py-4 text-sm text-vscode-descriptionForeground">Nothing to see here.</div>
+				) : (
+					<div className="space-y-2">
+						{modes.map((mode) => (
+							<ModeItem key={mode.slug} mode={mode} />
+						))}
+					</div>
+				)}
 			</div>
 		)
 	}
@@ -338,15 +343,15 @@ export const ModeEnableDisableDialog: React.FC<ModeEnableDisableDialogProps> = (
 				</DialogHeader>
 
 				{/* Statistics and bulk actions */}
-				<div className="flex items-center justify-between py-3 px-4 bg-gray-50 rounded-lg">
+				<div className="flex items-center justify-between py-3 px-4 bg-vscode-editor-background border border-vscode-input-border rounded-lg">
 					<div className="flex items-center gap-4 text-sm">
-						<span className="text-gray-700">
+						<span className="text-vscode-foreground">
 							<strong>{stats.total}</strong> total modes
 						</span>
-						<span className="text-green-700">
+						<span className="text-vscode-descriptionForeground">
 							<strong>{stats.enabled}</strong> enabled
 						</span>
-						<span className="text-red-700">
+						<span className="text-vscode-descriptionForeground">
 							<strong>{stats.disabled}</strong> disabled
 						</span>
 					</div>
@@ -356,19 +361,10 @@ export const ModeEnableDisableDialog: React.FC<ModeEnableDisableDialogProps> = (
 							size="sm"
 							onClick={() => attemptToggleAllModes(true)}
 							disabled={stats.enabled === stats.total}
-							className="enable-disable-button text-xs">
-							<Check className="size-3 mr-1" />
+							className="text-xs h-7 px-2">
 							Enable All
 						</Button>
-						<Button
-							variant="outline"
-							size="sm"
-							onClick={() => attemptToggleAllModes(false)}
-							disabled={stats.disabled === stats.total}
-							className="enable-disable-button text-xs">
-							<X className="size-3 mr-1" />
-							Disable All
-						</Button>
+						{/* Per design, omit a global "Disable All" here */}
 					</div>
 				</div>
 

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

@@ -471,6 +471,13 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 					...prev,
 					[message.slug]: message.hasContent,
 				}))
+			} else if (message.type === "openDeleteModeInSettings") {
+				// Received forwarded request to open the delete flow for a specific mode.
+				if (message.slug && message.name) {
+					setModeToDelete({ slug: message.slug, name: message.name, source: "global" })
+					// Ask the extension to check for rules folder and return path via message
+					vscode.postMessage({ type: "deleteCustomMode", slug: message.slug, checkOnly: true })
+				}
 			} else if (message.type === "deleteCustomModeCheck") {
 				// Handle the check response
 				// Use the ref to get the current modeToDelete value
@@ -523,23 +530,7 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 								</Button>
 							</StandardTooltip>
 							<div className="relative inline-block">
-								<StandardTooltip content={t("prompts:modes.editModesConfig")}>
-									<Button
-										variant="ghost"
-										size="icon"
-										className="flex"
-										onClick={(e: React.MouseEvent) => {
-											e.preventDefault()
-											e.stopPropagation()
-											setShowConfigMenu((prev) => !prev)
-										}}
-										onBlur={() => {
-											// Add slight delay to allow menu item clicks to register
-											setTimeout(() => setShowConfigMenu(false), 200)
-										}}>
-										<span className="codicon codicon-json"></span>
-									</Button>
-								</StandardTooltip>
+								{/* Single Edit modes configuration button (removed duplicate) */}
 								{showConfigMenu && (
 									<div
 										onClick={(e) => e.stopPropagation()}
@@ -577,6 +568,36 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 									</div>
 								)}
 							</div>
+							<StandardTooltip content={t("prompts:modes.editModesConfig")}>
+								<Button
+									variant="ghost"
+									size="icon"
+									className="flex"
+									onClick={(e: React.MouseEvent) => {
+										e.preventDefault()
+										e.stopPropagation()
+										setShowConfigMenu((prev) => !prev)
+									}}
+									onBlur={() => {
+										// Add slight delay to allow menu item clicks to register
+										setTimeout(() => setShowConfigMenu(false), 200)
+									}}>
+									<span className="codicon codicon-json"></span>
+								</Button>
+							</StandardTooltip>
+							{/* Enable/Disable Modes button - placed between Edit config and Marketplace */}
+							<StandardTooltip content={t("prompts:modes.enableDisable")}>
+								<Button
+									variant="ghost"
+									size="icon"
+									onClick={() => {
+										// Ask the App to open the Enable/Disable dialog with current modes.
+										window.postMessage({ type: "openModeEnableDisableDialog", modes }, "*")
+									}}
+									className="flex">
+									<span className="codicon codicon-eye"></span>
+								</Button>
+							</StandardTooltip>
 							<StandardTooltip content={t("chat:modeSelector.marketplace")}>
 								<Button
 									variant="ghost"