fix(modes): address parser consistency, UI desync, and test coverage issues

- Use parseYamlSafely() in importModeWithRules for consistent YAML parsing
across the codebase, ensuring BOM stripping and character cleaning
- Sync visualMode with context.mode to prevent UI desync when modes are
switched programmatically from outside the component
- Add test coverage for fallback branch when imported mode slug is not
yet present in customModes state

Fixes parser inconsistency (P2), visualMode desync risk (P3), and missing
test coverage (P3) identified in code review.

Author: heyseth

src/core/config/CustomModesManager.ts

@@ -932,7 +932,7 @@ export class CustomModesManager {
 			// Parse the YAML content with proper type validation
 			let importData: ImportData
 			try {
-				const parsed = yaml.parse(yamlContent)
+				const parsed = this.parseYamlSafely(yamlContent, '')
 
 				// Validate the structure
 				if (!parsed?.customModes || !Array.isArray(parsed.customModes) || parsed.customModes.length === 0) {

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

@@ -205,6 +205,11 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 		switchModeRef.current = switchMode
 	}, [switchMode])
 
+	// Sync visualMode with backend mode changes to prevent desync
+	useEffect(() => {
+		setVisualMode(mode)
+	}, [mode])
+
 	// Handler for popover open state change
 	const onOpenChange = useCallback((open: boolean) => {
 		setOpen(open)

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

@@ -91,4 +91,28 @@ describe("ModesView - auto switch after import", () => {
 		})
 		expect(trigger).toHaveTextContent("Code")
 	})
+
+	it("uses fallback branch when imported slug not yet present in customModes", async () => {
+		// Render with empty customModes - imported mode hasn't been added to state yet
+		render(
+			<ExtensionStateContext.Provider value={{ ...baseState, customModes: [] } as any}>
+				<ModesView onDone={vitest.fn()} />
+			</ExtensionStateContext.Provider>,
+		)
+
+		const trigger = screen.getByTestId("mode-select-trigger")
+		expect(trigger).toHaveTextContent("Code")
+
+		// Simulate successful import for a slug not yet in customModes (timing race condition)
+		window.dispatchEvent(
+			new MessageEvent("message", {
+				data: { type: "importModeResult", success: true, slug: "not-yet-loaded-mode" },
+			}),
+		)
+
+		// Fallback branch should send backend switch message
+		await waitFor(() => {
+			expect(vscode.postMessage).toHaveBeenCalledWith({ type: "mode", text: "not-yet-loaded-mode" })
+		})
+	})
 })