fix: prevent empty mode names from being saved (fixes #5766)

- Add frontend validation in ModesView to prevent empty names from being saved
- Add onBlur handler to restore original name if field is left empty
- Add backend validation in CustomModesManager.updateCustomMode using modeConfigSchema
- Provide user feedback when validation fails
- Trim whitespace from mode names before validation

This prevents YAML parsing errors caused by empty mode name fields.

Author: roomote

src/core/config/CustomModesManager.ts

@@ -401,6 +401,18 @@ export class CustomModesManager {
 
 	public async updateCustomMode(slug: string, config: ModeConfig): Promise<void> {
 		try {
+			// Validate the mode configuration before saving
+			const validationResult = modeConfigSchema.safeParse(config)
+			if (!validationResult.success) {
+				const errorMessages = validationResult.error.errors
+					.map((err) => `${err.path.join(".")}: ${err.message}`)
+					.join(", ")
+				const errorMessage = `Invalid mode configuration: ${errorMessages}`
+				logger.error("Mode validation failed", { slug, errors: validationResult.error.errors })
+				vscode.window.showErrorMessage(t("common:customModes.errors.updateFailed", { error: errorMessage }))
+				return
+			}
+
 			const isProjectMode = config.source === "project"
 			let targetPath: string
 

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

@@ -729,11 +729,26 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 										onChange={(e) => {
 											const customMode = findModeBySlug(visualMode, customModes)
 											if (customMode) {
-												updateCustomMode(visualMode, {
-													...customMode,
-													name: e.target.value,
-													source: customMode.source || "global",
-												})
+												const newName = e.target.value.trim()
+												// Only update if the name is not empty
+												if (newName.length > 0) {
+													updateCustomMode(visualMode, {
+														...customMode,
+														name: newName,
+														source: customMode.source || "global",
+													})
+												}
+											}
+										}}
+										onBlur={(e) => {
+											const customMode = findModeBySlug(visualMode, customModes)
+											if (customMode) {
+												const newName = e.target.value.trim()
+												// If the field is empty on blur, restore the original name
+												if (newName.length === 0) {
+													// Force re-render by updating the input value
+													e.target.value = customMode.name
+												}
 											}
 										}}
 										className="w-full"