feat: auto-switch to imported mode after successful import

Fixes [#8239](#8239)

## Summary
Automatically switches to the imported mode after a successful mode import,
providing immediate feedback and eliminating the need for manual mode selection.

## Changes

### Backend (CustomModesManager.ts)
- Modified `importModeWithRules()` to return the imported mode's slug in the result
- Returns `{ success: true, slug: importData.customModes[0]?.slug }` on success
- Enables the UI to know which mode was imported for automatic switching

### Message Handler (webviewMessageHandler.ts)
- Updated `importMode` case to handle the new slug return value
- Passes the slug to the webview via `importModeResult` message
- Maintains backward compatibility with existing error handling

### UI (ModesView.tsx)
- Added auto-switch logic in `importModeResult` message handler
- Attempts to find imported mode in fresh customModes list
- Falls back to direct slug-based switch if mode not yet in list
- Updates visual mode state for immediate UI feedback
- Only switches on success with a valid slug provided

### Tests (ModesView.import-switch.spec.tsx)
- Added new test suite for import auto-switch behavior
- Tests successful switch when slug is provided
- Tests no-switch behavior on import failure or missing slug
- Verifies both backend message and UI state updates

## Testing
- New test coverage added for auto-switch scenarios
- Existing import/export functionality remains unchanged
- Works with both global and project-level imports

Author: heyseth

src/core/config/CustomModesManager.ts

@@ -40,6 +40,7 @@ interface ExportResult {
 
 interface ImportResult {
 	success: boolean
+	slug?: string
 	error?: string
 }
 
@@ -989,7 +990,8 @@ export class CustomModesManager {
 			// Refresh the modes after import
 			await this.refreshMergedState()
 
-			return { success: true }
+			// Return the imported mode's slug so the UI can activate it
+			return { success: true, slug: importData.customModes[0]?.slug }
 		} 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

@@ -2222,10 +2222,11 @@ export const webviewMessageHandler = async (
 						await updateGlobalState("customModes", customModes)
 						await provider.postStateToWebview()
 
-						// Send success message to webview
+						// Send success message to webview, include the imported slug so UI can switch
 						provider.postMessageToWebview({
 							type: "importModeResult",
 							success: true,
+							slug: result.slug,
 						})
 
 						// Show success message

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

@@ -186,6 +186,17 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 		[visualMode, switchMode],
 	)
 
+	// Keep latest handleModeSwitch and customModes available inside window message handler
+	const handleModeSwitchRef = useRef(handleModeSwitch)
+	useEffect(() => {
+		handleModeSwitchRef.current = handleModeSwitch
+	}, [handleModeSwitch])
+
+	const customModesRef = useRef(customModes)
+	useEffect(() => {
+		customModesRef.current = customModes
+	}, [customModes])
+
 	// Handler for popover open state change
 	const onOpenChange = useCallback((open: boolean) => {
 		setOpen(open)
@@ -460,7 +471,21 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 				setIsImporting(false)
 				setShowImportDialog(false)
 
-				if (!message.success) {
+				if (message.success) {
+					const slug = (message as any).slug as string | undefined
+					if (slug) {
+						// Try switching using the freshest mode list available
+						const all = getAllModes(customModesRef.current)
+						const importedMode = all.find((m) => m.slug === slug)
+						if (importedMode) {
+							handleModeSwitchRef.current(importedMode)
+						} else {
+							// Fallback: switch by slug to keep backend in sync and update visual selection
+							setVisualMode(slug)
+							switchMode(slug)
+						}
+					}
+				} else {
 					// Only log error if it's not a cancellation
 					if (message.error !== "cancelled") {
 						console.error("Failed to import mode:", message.error)

webview-ui/src/components/modes/__tests__/ModesView.import-switch.spec.tsx

@@ -0,0 +1,94 @@
+import { render, screen, waitFor } from "@/utils/test-utils"
+import ModesView from "../ModesView"
+import { ExtensionStateContext } from "@src/context/ExtensionStateContext"
+import { vscode } from "@src/utils/vscode"
+
+vitest.mock("@src/utils/vscode", () => ({
+	vscode: {
+		postMessage: vitest.fn(),
+	},
+}))
+
+const baseState = {
+	customModePrompts: {},
+	listApiConfigMeta: [],
+	enhancementApiConfigId: "",
+	setEnhancementApiConfigId: vitest.fn(),
+	mode: "code",
+	customModes: [],
+	customSupportPrompts: [],
+	currentApiConfigName: "",
+	customInstructions: "",
+	setCustomInstructions: vitest.fn(),
+}
+
+describe("ModesView - auto switch after import", () => {
+	beforeEach(() => {
+		vitest.clearAllMocks()
+	})
+
+	it("switches to imported mode when import succeeds and slug is provided", async () => {
+		const importedMode = {
+			slug: "imported-mode",
+			name: "Imported Mode",
+			roleDefinition: "Role",
+			groups: ["read"] as const,
+			source: "global" as const,
+		}
+
+		render(
+			<ExtensionStateContext.Provider value={{ ...baseState, customModes: [importedMode] } as any}>
+				<ModesView onDone={vitest.fn()} />
+			</ExtensionStateContext.Provider>,
+		)
+
+		const trigger = screen.getByTestId("mode-select-trigger")
+		expect(trigger).toHaveTextContent("Code")
+
+		// Simulate extension sending successful import result with slug
+		window.dispatchEvent(
+			new MessageEvent("message", {
+				data: { type: "importModeResult", success: true, slug: "imported-mode" },
+			}),
+		)
+
+		// Backend switch message sent
+		await waitFor(() => {
+			expect(vscode.postMessage).toHaveBeenCalledWith({ type: "mode", text: "imported-mode" })
+		})
+
+		// UI reflects new mode selection
+		await waitFor(() => {
+			expect(trigger).toHaveTextContent("Imported Mode")
+		})
+	})
+
+	it("does not switch when import fails or slug missing", async () => {
+		render(
+			<ExtensionStateContext.Provider value={{ ...baseState } as any}>
+				<ModesView onDone={vitest.fn()} />
+			</ExtensionStateContext.Provider>,
+		)
+
+		const trigger = screen.getByTestId("mode-select-trigger")
+		expect(trigger).toHaveTextContent("Code")
+
+		// Import failure
+		window.dispatchEvent(
+			new MessageEvent("message", { data: { type: "importModeResult", success: false, error: "x" } }),
+		)
+
+		await waitFor(() => {
+			expect(vscode.postMessage).not.toHaveBeenCalledWith({ type: "mode", text: expect.any(String) })
+		})
+		expect(trigger).toHaveTextContent("Code")
+
+		// Success but no slug provided
+		window.dispatchEvent(new MessageEvent("message", { data: { type: "importModeResult", success: true } }))
+
+		await waitFor(() => {
+			expect(vscode.postMessage).not.toHaveBeenCalledWith({ type: "mode", text: expect.any(String) })
+		})
+		expect(trigger).toHaveTextContent("Code")
+	})
+})