Only allow for customizing shoprt descriptions of custom modes, leaving built-in ones intact

Author: Bruno Bergher

src/shared/modes.ts

@@ -289,7 +289,7 @@ export const defaultPrompts: Readonly<CustomModePrompts> = Object.freeze(
 				roleDefinition: mode.roleDefinition,
 				whenToUse: mode.whenToUse,
 				customInstructions: mode.customInstructions,
-				// Note: description is not included here as it's not part of the PromptComponent interface
+				description: mode.description,
 			},
 		]),
 	),
@@ -330,8 +330,7 @@ export async function getFullModeDetails(
 	// Get the base custom instructions
 	const baseCustomInstructions = promptComponent?.customInstructions || baseMode.customInstructions || ""
 	const baseWhenToUse = promptComponent?.whenToUse || baseMode.whenToUse || ""
-	// Description is not part of PromptComponent, so we use it directly from the mode
-	const baseDescription = baseMode.description || ""
+	const baseDescription = promptComponent?.description || baseMode.description || ""
 
 	// If we have cwd, load and combine all custom instructions
 	let fullCustomInstructions = baseCustomInstructions

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

@@ -209,6 +209,7 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 	// Field-specific error states
 	const [nameError, setNameError] = useState<string>("")
 	const [slugError, setSlugError] = useState<string>("")
+	const [descriptionError, setDescriptionError] = useState<string>("")
 	const [roleDefinitionError, setRoleDefinitionError] = useState<string>("")
 	const [groupsError, setGroupsError] = useState<string>("")
 
@@ -226,6 +227,7 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 		// Reset error states
 		setNameError("")
 		setSlugError("")
+		setDescriptionError("")
 		setRoleDefinitionError("")
 		setGroupsError("")
 	}, [])
@@ -259,6 +261,7 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 		// Clear previous errors
 		setNameError("")
 		setSlugError("")
+		setDescriptionError("")
 		setRoleDefinitionError("")
 		setGroupsError("")
 
@@ -289,6 +292,9 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 					case "slug":
 						setSlugError(message)
 						break
+					case "description":
+						setDescriptionError(message)
+						break
 					case "roleDefinition":
 						setRoleDefinitionError(message)
 						break
@@ -619,6 +625,7 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 					</div>
 				</div>
 
+				{/* Name section */}
 				<div className="mb-5">
 					{/* Only show name and delete for custom modes */}
 					{visualMode && findModeBySlug(visualMode, customModes) && (
@@ -657,6 +664,8 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 							</div>
 						</div>
 					)}
+
+					{/* Role Definition section */}
 					<div className="mb-4">
 						<div className="flex justify-between items-center mb-1">
 							<div className="font-bold">{t("prompts:roleDefinition.title")}</div>
@@ -716,57 +725,60 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 					</div>
 
 					{/* Description section */}
-					<div className="mb-4">
-						<div className="flex justify-between items-center mb-1">
-							<div className="font-bold">{t("prompts:description.title")}</div>
-							{!findModeBySlug(visualMode, customModes) && (
-								<Button
-									variant="ghost"
-									size="icon"
-									onClick={() => {
-										const currentMode = getCurrentMode()
-										if (currentMode?.slug) {
-											handleAgentReset(currentMode.slug, "description")
-										}
-									}}
-									title={t("prompts:description.resetToDefault")}
-									data-testid="description-reset">
-									<span className="codicon codicon-discard"></span>
-								</Button>
-							)}
-						</div>
-						<div className="text-sm text-vscode-descriptionForeground mb-2">
-							{t("prompts:description.description")}
+					{/* Only show description for custom modes */}
+					{visualMode && findModeBySlug(visualMode, customModes) && (
+						<div className="mb-4">
+							<div className="flex justify-between items-center mb-1">
+								<div className="font-bold">{t("prompts:description.title")}</div>
+								{!findModeBySlug(visualMode, customModes) && (
+									<Button
+										variant="ghost"
+										size="icon"
+										onClick={() => {
+											const currentMode = getCurrentMode()
+											if (currentMode?.slug) {
+												handleAgentReset(currentMode.slug, "description")
+											}
+										}}
+										title={t("prompts:description.resetToDefault")}
+										data-testid="description-reset">
+										<span className="codicon codicon-discard"></span>
+									</Button>
+								)}
+							</div>
+							<div className="text-sm text-vscode-descriptionForeground mb-2">
+								{t("prompts:description.description")}
+							</div>
+							<VSCodeTextField
+								value={(() => {
+									const customMode = findModeBySlug(visualMode, customModes)
+									const prompt = customModePrompts?.[visualMode] as PromptComponent
+									return customMode?.description ?? prompt?.description ?? getDescription(visualMode)
+								})()}
+								onChange={(e) => {
+									const value =
+										(e as unknown as CustomEvent)?.detail?.target?.value ||
+										((e as any).target as HTMLTextAreaElement).value
+									const customMode = findModeBySlug(visualMode, customModes)
+									if (customMode) {
+										// For custom modes, update the JSON file
+										updateCustomMode(visualMode, {
+											...customMode,
+											description: value.trim() || undefined,
+											source: customMode.source || "global",
+										})
+									} else {
+										// For built-in modes, update the prompts
+										updateAgentPrompt(visualMode, {
+											description: value.trim() || undefined,
+										})
+									}
+								}}
+								className="w-full"
+								data-testid={`${getCurrentMode()?.slug || "code"}-description-textfield`}
+							/>
 						</div>
-						<VSCodeTextField
-							value={(() => {
-								const customMode = findModeBySlug(visualMode, customModes)
-								const prompt = customModePrompts?.[visualMode] as PromptComponent
-								return customMode?.description ?? prompt?.description ?? getDescription(visualMode)
-							})()}
-							onChange={(e) => {
-								const value =
-									(e as unknown as CustomEvent)?.detail?.target?.value ||
-									((e as any).target as HTMLTextAreaElement).value
-								const customMode = findModeBySlug(visualMode, customModes)
-								if (customMode) {
-									// For custom modes, update the JSON file
-									updateCustomMode(visualMode, {
-										...customMode,
-										description: value.trim() || undefined,
-										source: customMode.source || "global",
-									})
-								} else {
-									// For built-in modes, update the prompts
-									updateAgentPrompt(visualMode, {
-										description: value.trim() || undefined,
-									})
-								}
-							}}
-							className="w-full"
-							data-testid={`${getCurrentMode()?.slug || "code"}-description-textfield`}
-						/>
-					</div>
+					)}
 
 					{/* When to Use section */}
 					<div className="mb-4">
@@ -1264,6 +1276,9 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 									}}
 									className="w-full"
 								/>
+								{descriptionError && (
+									<div className="text-xs text-vscode-errorForeground mt-1">{descriptionError}</div>
+								)}
 							</div>
 
 							<div className="mb-4">