feat: automatically switch to imported mode after successful import

- Add importedModes field to ImportResult interface to track imported mode slugs
- Modify importModeWithRules method to collect and return imported mode slugs
- Update webview message handler to automatically switch to first imported mode
- Update ModesView.tsx to handle successful import with mode switching

Fixes #6491

Author: roomote

src/core/config/CustomModesManager.ts

@@ -41,6 +41,7 @@ interface ExportResult {
 interface ImportResult {
 	success: boolean
 	error?: string
+	importedModes?: string[]
 }
 
 export class CustomModesManager {
@@ -786,7 +787,7 @@ export class CustomModesManager {
 								// This excludes the rules-{slug} folder from the path
 								const relativePath = path.relative(modeRulesDir, filePath)
 								// Normalize path to use forward slashes for cross-platform compatibility
-								const normalizedRelativePath = relativePath.replace(/\\/g, '/')
+								const normalizedRelativePath = relativePath.replace(/\\/g, "/")
 								rulesFiles.push({ relativePath: normalizedRelativePath, content: content.trim() })
 							}
 						}
@@ -949,6 +950,9 @@ export class CustomModesManager {
 				}
 			}
 
+			// Track imported mode slugs
+			const importedModes: string[] = []
+
 			// Process each mode in the import
 			for (const importMode of importData.customModes) {
 				const { rulesFiles, ...modeConfig } = importMode
@@ -980,12 +984,15 @@ export class CustomModesManager {
 
 				// Import rules files (this also handles cleanup of existing rules folders)
 				await this.importRulesFiles(importMode, rulesFiles || [], source)
+
+				// Track the imported mode slug
+				importedModes.push(importMode.slug)
 			}
 
 			// Refresh the modes after import
 			await this.refreshMergedState()
 
-			return { success: true }
+			return { success: true, importedModes }
 		} catch (error) {
 			const errorMessage = error instanceof Error ? error.message : String(error)
 			logger.error("Failed to import mode with rules", { error: errorMessage })

src/core/webview/webviewMessageHandler.ts

@@ -1876,6 +1876,14 @@ export const webviewMessageHandler = async (
 						// Update state after importing
 						const customModes = await provider.customModesManager.getCustomModes()
 						await updateGlobalState("customModes", customModes)
+
+						// Automatically switch to imported mode if modes were imported
+						if (result.importedModes && result.importedModes.length > 0) {
+							// Switch to the first imported mode
+							const modeToSwitchTo = result.importedModes[0]
+							await updateGlobalState("mode", modeToSwitchTo)
+						}
+
 						await provider.postStateToWebview()
 
 						// Send success message to webview

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

@@ -460,7 +460,10 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 				setIsImporting(false)
 				setShowImportDialog(false)
 
-				if (!message.success) {
+				if (message.success) {
+					// The backend has already switched the mode, so we just need to update the visual state
+					// The mode change will be reflected in the next state update from the backend
+				} else {
 					// Only log error if it's not a cancellation
 					if (message.error !== "cancelled") {
 						console.error("Failed to import mode:", message.error)