fix: resolve linting errors in ModesView and test file

Author: MuriloFP

src/core/config/CustomModesManager.ts

@@ -41,6 +41,7 @@ interface ExportResult {
 interface ImportResult {
 	success: boolean
 	error?: string
+	importedModes?: string[] // Slugs of successfully imported modes
 }
 
 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 successfully 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,16 @@ export class CustomModesManager {
 
 				// Import rules files (this also handles cleanup of existing rules folders)
 				await this.importRulesFiles(importMode, rulesFiles || [], source)
+
+				// Record the imported mode slug
+				importedModes.push(importMode.slug)
 			}
 
 			// Refresh the modes after import
 			await this.refreshMergedState()
 
-			return { success: true }
+			// Return success with imported mode slugs
+			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/config/__tests__/CustomModesManager.spec.ts

@@ -1235,6 +1235,47 @@ describe("CustomModesManager", () => {
 				const newRulePath = Object.keys(writtenFiles).find((p) => p.includes("new-rule.md"))
 				expect(writtenFiles[newRulePath!]).toBe("New rule content")
 			})
+
+			it("should return imported mode slugs on successful import", async () => {
+				const importYaml = yaml.stringify({
+					customModes: [
+						{
+							slug: "mode-one",
+							name: "Mode One",
+							roleDefinition: "Role One",
+							groups: ["read"],
+						},
+						{
+							slug: "mode-two",
+							name: "Mode Two",
+							roleDefinition: "Role Two",
+							groups: ["edit"],
+						},
+					],
+				})
+
+				let roomodesContent: any = null
+				;(fs.readFile as Mock).mockImplementation(async (path: string) => {
+					if (path === mockSettingsPath) {
+						return yaml.stringify({ customModes: [] })
+					}
+					if (path === mockRoomodes && roomodesContent) {
+						return yaml.stringify(roomodesContent)
+					}
+					throw new Error("File not found")
+				})
+				;(fs.writeFile as Mock).mockImplementation(async (path: string, content: string) => {
+					if (path === mockRoomodes) {
+						roomodesContent = yaml.parse(content)
+					}
+					return Promise.resolve()
+				})
+
+				const result = await manager.importModeWithRules(importYaml)
+
+				expect(result.success).toBe(true)
+				expect(result.importedModes).toEqual(["mode-one", "mode-two"])
+			})
 		})
 	})
 

src/core/webview/__tests__/webviewMessageHandler.spec.ts

@@ -43,10 +43,14 @@ vi.mock("vscode", () => ({
 	window: {
 		showInformationMessage: vi.fn(),
 		showErrorMessage: vi.fn(),
+		showOpenDialog: vi.fn(),
 	},
 	workspace: {
 		workspaceFolders: [{ uri: { fsPath: "/mock/workspace" } }],
 	},
+	Uri: {
+		file: vi.fn((path: string) => ({ fsPath: path })),
+	},
 }))
 
 vi.mock("../../../i18n", () => ({
@@ -70,14 +74,17 @@ vi.mock("../../../i18n", () => ({
 vi.mock("fs/promises", () => {
 	const mockRm = vi.fn().mockResolvedValue(undefined)
 	const mockMkdir = vi.fn().mockResolvedValue(undefined)
+	const mockReadFile = vi.fn().mockResolvedValue("")
 
 	return {
 		default: {
 			rm: mockRm,
 			mkdir: mockMkdir,
+			readFile: mockReadFile,
 		},
 		rm: mockRm,
 		mkdir: mockMkdir,
+		readFile: mockReadFile,
 	}
 })
 
@@ -374,6 +381,167 @@ describe("webviewMessageHandler - requestRouterModels", () => {
 	})
 })
 
+describe("webviewMessageHandler - importMode", () => {
+	beforeEach(() => {
+		vi.clearAllMocks()
+		// Add handleModeSwitch to the mock
+		mockClineProvider.handleModeSwitch = vi.fn()
+		// Cast to any to add mock methods
+		;(mockClineProvider.customModesManager as any).importModeWithRules = vi.fn()
+	})
+
+	it("should switch to imported mode after successful import", async () => {
+		const mockImportResult = {
+			success: true,
+			importedModes: ["imported-mode"],
+		}
+
+		vi.mocked(mockClineProvider.customModesManager.importModeWithRules).mockResolvedValue(mockImportResult)
+		// Mock getCustomModes to return the imported mode so validation passes
+		vi.mocked(mockClineProvider.customModesManager.getCustomModes).mockResolvedValue([
+			{
+				name: "Imported Mode",
+				slug: "imported-mode",
+				roleDefinition: "Test Role",
+				groups: [],
+				source: "project",
+			} as ModeConfig,
+		])
+
+		// Mock vscode.window.showOpenDialog
+		const vscode = await import("vscode")
+		vi.mocked(vscode.window.showOpenDialog).mockResolvedValue([{ fsPath: "/path/to/mode.yaml" }] as any)
+
+		// Mock fs.readFile
+		const fs = await import("fs/promises")
+		vi.mocked(fs.readFile).mockResolvedValue("yaml content")
+
+		await webviewMessageHandler(mockClineProvider, {
+			type: "importMode",
+			source: "project",
+		})
+
+		expect(mockClineProvider.handleModeSwitch).toHaveBeenCalledWith("imported-mode")
+		expect(mockClineProvider.postMessageToWebview).toHaveBeenCalledWith({
+			type: "importModeResult",
+			success: true,
+			importedModes: ["imported-mode"],
+		})
+	})
+
+	it("should not switch mode if import fails", async () => {
+		const mockImportResult = {
+			success: false,
+			error: "Import failed",
+		}
+
+		vi.mocked(mockClineProvider.customModesManager.importModeWithRules).mockResolvedValue(mockImportResult)
+
+		// Mock vscode.window.showOpenDialog
+		const vscode = await import("vscode")
+		vi.mocked(vscode.window.showOpenDialog).mockResolvedValue([{ fsPath: "/path/to/mode.yaml" }] as any)
+
+		// Mock fs.readFile
+		const fs = await import("fs/promises")
+		vi.mocked(fs.readFile).mockResolvedValue("yaml content")
+
+		await webviewMessageHandler(mockClineProvider, {
+			type: "importMode",
+			source: "project",
+		})
+
+		expect(mockClineProvider.handleModeSwitch).not.toHaveBeenCalled()
+		expect(mockClineProvider.postMessageToWebview).toHaveBeenCalledWith({
+			type: "importModeResult",
+			success: false,
+			error: "Import failed",
+		})
+	})
+
+	it("should switch to first mode when multiple modes are imported", async () => {
+		const mockImportResult = {
+			success: true,
+			importedModes: ["mode-one", "mode-two", "mode-three"],
+		}
+
+		vi.mocked(mockClineProvider.customModesManager.importModeWithRules).mockResolvedValue(mockImportResult)
+		// Mock getCustomModes to return the imported modes so validation passes
+		vi.mocked(mockClineProvider.customModesManager.getCustomModes).mockResolvedValue([
+			{
+				name: "Mode One",
+				slug: "mode-one",
+				roleDefinition: "Test Role",
+				groups: [],
+				source: "project",
+			} as ModeConfig,
+			{
+				name: "Mode Two",
+				slug: "mode-two",
+				roleDefinition: "Test Role",
+				groups: [],
+				source: "project",
+			} as ModeConfig,
+			{
+				name: "Mode Three",
+				slug: "mode-three",
+				roleDefinition: "Test Role",
+				groups: [],
+				source: "project",
+			} as ModeConfig,
+		])
+
+		// Mock vscode.window.showOpenDialog
+		const vscode = await import("vscode")
+		vi.mocked(vscode.window.showOpenDialog).mockResolvedValue([{ fsPath: "/path/to/modes.yaml" }] as any)
+
+		// Mock fs.readFile
+		const fs = await import("fs/promises")
+		vi.mocked(fs.readFile).mockResolvedValue("yaml content with multiple modes")
+
+		await webviewMessageHandler(mockClineProvider, {
+			type: "importMode",
+			source: "project",
+		})
+
+		// Should switch to the first mode only
+		expect(mockClineProvider.handleModeSwitch).toHaveBeenCalledWith("mode-one")
+		expect(mockClineProvider.handleModeSwitch).toHaveBeenCalledTimes(1)
+	})
+
+	it("should handle invalid mode slug gracefully", async () => {
+		const mockImportResult = {
+			success: true,
+			importedModes: ["invalid-mode-that-does-not-exist"],
+		}
+
+		vi.mocked(mockClineProvider.customModesManager.importModeWithRules).mockResolvedValue(mockImportResult)
+		vi.mocked(mockClineProvider.customModesManager.getCustomModes).mockResolvedValue([])
+
+		// Mock vscode.window.showOpenDialog
+		const vscode = await import("vscode")
+		vi.mocked(vscode.window.showOpenDialog).mockResolvedValue([{ fsPath: "/path/to/mode.yaml" }] as any)
+
+		// Mock fs.readFile
+		const fs = await import("fs/promises")
+		vi.mocked(fs.readFile).mockResolvedValue("yaml content")
+
+		await webviewMessageHandler(mockClineProvider, {
+			type: "importMode",
+			source: "project",
+		})
+
+		// Should not call handleModeSwitch with invalid mode
+		expect(mockClineProvider.handleModeSwitch).not.toHaveBeenCalled()
+
+		// Should still send success message
+		expect(mockClineProvider.postMessageToWebview).toHaveBeenCalledWith({
+			type: "importModeResult",
+			success: true,
+			importedModes: ["invalid-mode-that-does-not-exist"],
+		})
+	})
+})
+
 describe("webviewMessageHandler - deleteCustomMode", () => {
 	beforeEach(() => {
 		vi.clearAllMocks()

src/core/webview/webviewMessageHandler.ts

@@ -11,6 +11,7 @@ import {
 	type ProviderSettings,
 	type GlobalState,
 	type ClineMessage,
+	type ModeConfig,
 	TelemetryEventName,
 } from "@roo-code/types"
 import { CloudService } from "@roo-code/cloud"
@@ -25,6 +26,7 @@ import { supportPrompt } from "../../shared/support-prompt"
 import { MessageEnhancer } from "./messageEnhancer"
 
 import { checkoutDiffPayloadSchema, checkoutRestorePayloadSchema, WebviewMessage } from "../../shared/WebviewMessage"
+import { ExtensionMessage } from "../../shared/ExtensionMessage"
 import { checkExistKey } from "../../shared/checkExistApiConfig"
 import { experimentDefault } from "../../shared/experiments"
 import { Terminal } from "../../integrations/terminal/Terminal"
@@ -1876,13 +1878,34 @@ export const webviewMessageHandler = async (
 						// Update state after importing
 						const customModes = await provider.customModesManager.getCustomModes()
 						await updateGlobalState("customModes", customModes)
-						await provider.postStateToWebview()
 
-						// Send success message to webview
+						// Switch to the first imported mode if any were imported
+						if (result.importedModes && result.importedModes.length > 0) {
+							try {
+								// Switch to the first imported mode
+								const modeToSwitch = result.importedModes[0]
+
+								// Validate the mode exists before switching
+								const allModes = await provider.customModesManager.getCustomModes()
+								const validMode = allModes.find((m: ModeConfig) => m.slug === modeToSwitch)
+
+								if (validMode) {
+									await provider.handleModeSwitch(modeToSwitch as Mode)
+									// Update the webview with the new mode
+									await provider.postStateToWebview()
+								}
+							} catch (error) {
+								provider.log(`Failed to switch to imported mode: ${error}`)
+								// Continue with success response - import succeeded even if switch failed
+							}
+						}
+
+						// Send success message to webview with imported modes info
 						provider.postMessageToWebview({
 							type: "importModeResult",
 							success: true,
-						})
+							importedModes: result.importedModes,
+						} as ExtensionMessage)
 
 						// Show success message
 						vscode.window.showInformationMessage(t("common:info.mode_imported"))
@@ -1892,7 +1915,7 @@ export const webviewMessageHandler = async (
 							type: "importModeResult",
 							success: false,
 							error: result.error,
-						})
+						} as ExtensionMessage)
 
 						// Show error message
 						vscode.window.showErrorMessage(t("common:errors.mode_import_failed", { error: result.error }))

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

@@ -460,10 +460,23 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 				setIsImporting(false)
 				setShowImportDialog(false)
 
-				if (!message.success) {
+				// Extract data directly from message
+				const { success, importedModes, error } = message
+
+				if (success && importedModes && importedModes.length > 0) {
+					// Find the imported mode configuration
+					const importedModeSlug = importedModes[0]
+					const importedMode =
+						findModeBySlug(importedModeSlug, customModes) || modes.find((m) => m.slug === importedModeSlug)
+
+					if (importedMode) {
+						// Switch to the imported mode
+						handleModeSwitch(importedMode)
+					}
+				} else if (!success) {
 					// Only log error if it's not a cancellation
-					if (message.error !== "cancelled") {
-						console.error("Failed to import mode:", message.error)
+					if (error !== "cancelled") {
+						console.error("Failed to import mode:", error)
 					}
 				}
 			} else if (message.type === "checkRulesDirectoryResult") {
@@ -487,7 +500,7 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 
 		window.addEventListener("message", handler)
 		return () => window.removeEventListener("message", handler)
-	}, []) // Empty dependency array - only register once
+	}, [customModes, findModeBySlug, handleModeSwitch, modes])
 
 	const handleAgentReset = (
 		modeSlug: string,