Fixes saving of description when creating and editing modes

Author: Bruno Bergher

packages/types/src/mode.ts

@@ -107,6 +107,7 @@ export type CustomModesSettings = z.infer<typeof customModesSettingsSchema>
 export const promptComponentSchema = z.object({
 	roleDefinition: z.string().optional(),
 	whenToUse: z.string().optional(),
+	description: z.string().optional(),
 	customInstructions: z.string().optional(),
 })
 

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

@@ -5,6 +5,7 @@ import {
 	VSCodeRadio,
 	VSCodeTextArea,
 	VSCodeLink,
+	VSCodeTextField,
 } from "@vscode/webview-ui-toolkit/react"
 import { Trans } from "react-i18next"
 import { ChevronDown, X } from "lucide-react"
@@ -106,6 +107,9 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 			if (updatedPrompt.roleDefinition === getRoleDefinition(mode)) {
 				delete updatedPrompt.roleDefinition
 			}
+			if (updatedPrompt.description === getDescription(mode)) {
+				delete updatedPrompt.description
+			}
 			if (updatedPrompt.whenToUse === getWhenToUse(mode)) {
 				delete updatedPrompt.whenToUse
 			}
@@ -195,6 +199,7 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 	// State for create mode dialog
 	const [newModeName, setNewModeName] = useState("")
 	const [newModeSlug, setNewModeSlug] = useState("")
+	const [newModeDescription, setNewModeDescription] = useState("")
 	const [newModeRoleDefinition, setNewModeRoleDefinition] = useState("")
 	const [newModeWhenToUse, setNewModeWhenToUse] = useState("")
 	const [newModeCustomInstructions, setNewModeCustomInstructions] = useState("")
@@ -212,6 +217,7 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 		// Reset form fields
 		setNewModeName("")
 		setNewModeSlug("")
+		setNewModeDescription("")
 		setNewModeGroups(availableGroups)
 		setNewModeRoleDefinition("")
 		setNewModeWhenToUse("")
@@ -732,8 +738,7 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 						<div className="text-sm text-vscode-descriptionForeground mb-2">
 							{t("prompts:description.description")}
 						</div>
-						<VSCodeTextArea
-							resize="vertical"
+						<VSCodeTextField
 							value={(() => {
 								const customMode = findModeBySlug(visualMode, customModes)
 								const prompt = customModePrompts?.[visualMode] as PromptComponent
@@ -759,8 +764,7 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 								}
 							}}
 							className="w-full"
-							rows={1}
-							data-testid={`${getCurrentMode()?.slug || "code"}-description-textarea`}
+							data-testid={`${getCurrentMode()?.slug || "code"}-description-textfield`}
 						/>
 					</div>
 
@@ -1248,6 +1252,20 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 								)}
 							</div>
 
+							<div className="mb-4">
+								<div className="font-bold mb-1">{t("prompts:createModeDialog.description.label")}</div>
+								<div className="text-[13px] text-vscode-descriptionForeground mb-2">
+									{t("prompts:createModeDialog.description.description")}
+								</div>
+								<VSCodeTextField
+									value={newModeDescription}
+									onChange={(e) => {
+										setNewModeDescription((e.target as HTMLInputElement).value)
+									}}
+									className="w-full"
+								/>
+							</div>
+
 							<div className="mb-4">
 								<div className="font-bold mb-1">{t("prompts:createModeDialog.whenToUse.label")}</div>
 								<div className="text-[13px] text-vscode-descriptionForeground mb-2">

webview-ui/src/i18n/locales/en/prompts.json

@@ -37,7 +37,7 @@
 	"description": {
 		"title": "Short description (for humans)",
 		"resetToDefault": "Reset to default description",
-		"description": "A brief description of this mode that appears in the mode selector dropdown."
+		"description": "A brief description shown in the mode selector dropdown."
 	},
 	"whenToUse": {
 		"title": "When to Use (optional)",
@@ -142,9 +142,13 @@
 			"label": "Role Definition",
 			"description": "Define Roo's expertise and personality for this mode."
 		},
+		"description": {
+			"label": "Short description (for humans)",
+			"description": "A brief description shown in the mode selector dropdown."
+		},
 		"whenToUse": {
 			"label": "When to Use (optional)",
-			"description": "Provide a clear description of when this mode is most effective and what types of tasks it excels at."
+			"description": "Guidance for Roo for when this mode should be used. This helps the Orchestrator choose the right mode for a task."
 		},
 		"tools": {
 			"label": "Available Tools",