Don't change the actual mode when you view different mode configurations on the prompts tab

Author: mrubens

webview-ui/src/components/prompts/PromptsView.tsx

@@ -65,6 +65,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 	const [isToolsEditMode, setIsToolsEditMode] = useState(false)
 	const [isCreateModeDialogOpen, setIsCreateModeDialogOpen] = useState(false)
 	const [activeSupportTab, setActiveSupportTab] = useState<SupportPromptType>("ENHANCE")
+	const [selectedModeTab, setSelectedModeTab] = useState<string>(mode)
 
 	// Direct update functions
 	const updateAgentPrompt = useCallback(
@@ -110,26 +111,23 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 			text: slug,
 		})
 	}, [])
-
-	// Handle mode switching with explicit state initialization
+	// Handle mode tab selection without actually switching modes
 	const handleModeSwitch = useCallback(
 		(modeConfig: ModeConfig) => {
-			if (modeConfig.slug === mode) return // Prevent unnecessary updates
-
-			// First switch the mode
-			switchMode(modeConfig.slug)
+			if (modeConfig.slug === selectedModeTab) return // Prevent unnecessary updates
 
-			// Exit tools edit mode when switching modes
+			// Update selected tab and reset tools edit mode
+			setSelectedModeTab(modeConfig.slug)
 			setIsToolsEditMode(false)
 		},
-		[mode, switchMode, setIsToolsEditMode],
+		[selectedModeTab, setIsToolsEditMode],
 	)
 
 	// Helper function to get current mode's config
 	const getCurrentMode = useCallback((): ModeConfig | undefined => {
-		const findMode = (m: ModeConfig): boolean => m.slug === mode
+		const findMode = (m: ModeConfig): boolean => m.slug === selectedModeTab
 		return customModes?.find(findMode) || modes.find(findMode)
-	}, [mode, customModes, modes])
+	}, [selectedModeTab, customModes, modes])
 
 	// Helper function to safely access mode properties
 	const getModeProperty = <T extends keyof ModeConfig>(
@@ -155,6 +153,11 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 		}
 	}, [isCreateModeDialogOpen])
 
+	// Keep selected tab in sync with actual mode
+	useEffect(() => {
+		setSelectedModeTab(mode)
+	}, [mode])
+
 	// Helper function to generate a unique slug from a name
 	const generateSlug = useCallback((name: string, attempt = 0): string => {
 		const baseSlug = name
@@ -184,7 +187,6 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 			groups: newModeGroups,
 		}
 		updateCustomMode(newModeSlug, newMode)
-		switchMode(newModeSlug)
 		setIsCreateModeDialogOpen(false)
 		setNewModeName("")
 		setNewModeSlug("")
@@ -479,7 +481,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 							padding: "4px 0",
 						}}>
 						{modes.map((modeConfig) => {
-							const isActive = mode === modeConfig.slug
+							const isActive = selectedModeTab === modeConfig.slug
 							return (
 								<button
 									key={modeConfig.slug}
@@ -507,20 +509,22 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 
 				<div style={{ marginBottom: "20px" }}>
 					{/* Only show name and delete for custom modes */}
-					{mode && findModeBySlug(mode, customModes) && (
+					{selectedModeTab && findModeBySlug(selectedModeTab, customModes) && (
 						<div style={{ display: "flex", gap: "12px", marginBottom: "16px" }}>
 							<div style={{ flex: 1 }}>
 								<div style={{ fontWeight: "bold", marginBottom: "4px" }}>Name</div>
 								<div style={{ display: "flex", gap: "8px" }}>
 									<VSCodeTextField
-										value={getModeProperty(findModeBySlug(mode, customModes), "name") ?? ""}
+										value={
+											getModeProperty(findModeBySlug(selectedModeTab, customModes), "name") ?? ""
+										}
 										onChange={(e: Event | React.FormEvent<HTMLElement>) => {
 											const target =
 												(e as CustomEvent)?.detail?.target ||
 												((e as any).target as HTMLInputElement)
-											const customMode = findModeBySlug(mode, customModes)
+											const customMode = findModeBySlug(selectedModeTab, customModes)
 											if (customMode) {
-												updateCustomMode(mode, {
+												updateCustomMode(selectedModeTab, {
 													...customMode,
 													name: target.value,
 												})
@@ -534,7 +538,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 										onClick={() => {
 											vscode.postMessage({
 												type: "deleteCustomMode",
-												slug: mode,
+												slug: selectedModeTab,
 											})
 										}}>
 										<span className="codicon codicon-trash"></span>
@@ -552,7 +556,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 								marginBottom: "4px",
 							}}>
 							<div style={{ fontWeight: "bold" }}>Role Definition</div>
-							{!findModeBySlug(mode, customModes) && (
+							{!findModeBySlug(selectedModeTab, customModes) && (
 								<VSCodeButton
 									appearance="icon"
 									onClick={() => {
@@ -578,24 +582,28 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 						</div>
 						<VSCodeTextArea
 							value={(() => {
-								const customMode = findModeBySlug(mode, customModes)
-								const prompt = customModePrompts?.[mode] as PromptComponent
-								return customMode?.roleDefinition ?? prompt?.roleDefinition ?? getRoleDefinition(mode)
+								const customMode = findModeBySlug(selectedModeTab, customModes)
+								const prompt = customModePrompts?.[selectedModeTab] as PromptComponent
+								return (
+									customMode?.roleDefinition ??
+									prompt?.roleDefinition ??
+									getRoleDefinition(selectedModeTab)
+								)
 							})()}
 							onChange={(e) => {
 								const value =
 									(e as CustomEvent)?.detail?.target?.value ||
 									((e as any).target as HTMLTextAreaElement).value
-								const customMode = findModeBySlug(mode, customModes)
+								const customMode = findModeBySlug(selectedModeTab, customModes)
 								if (customMode) {
 									// For custom modes, update the JSON file
-									updateCustomMode(mode, {
+									updateCustomMode(selectedModeTab, {
 										...customMode,
 										roleDefinition: value.trim() || "",
 									})
 								} else {
 									// For built-in modes, update the prompts
-									updateAgentPrompt(mode, {
+									updateAgentPrompt(selectedModeTab, {
 										roleDefinition: value.trim() || undefined,
 									})
 								}
@@ -760,25 +768,25 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 						</div>
 						<VSCodeTextArea
 							value={(() => {
-								const customMode = findModeBySlug(mode, customModes)
-								const prompt = customModePrompts?.[mode] as PromptComponent
+								const customMode = findModeBySlug(selectedModeTab, customModes)
+								const prompt = customModePrompts?.[selectedModeTab] as PromptComponent
 								return customMode?.customInstructions ?? prompt?.customInstructions ?? ""
 							})()}
 							onChange={(e) => {
 								const value =
 									(e as CustomEvent)?.detail?.target?.value ||
 									((e as any).target as HTMLTextAreaElement).value
-								const customMode = findModeBySlug(mode, customModes)
+								const customMode = findModeBySlug(selectedModeTab, customModes)
 								if (customMode) {
 									// For custom modes, update the JSON file
-									updateCustomMode(mode, {
+									updateCustomMode(selectedModeTab, {
 										...customMode,
 										customInstructions: value.trim() || undefined,
 									})
 								} else {
 									// For built-in modes, update the prompts
-									const existingPrompt = customModePrompts?.[mode] as PromptComponent
-									updateAgentPrompt(mode, {
+									const existingPrompt = customModePrompts?.[selectedModeTab] as PromptComponent
+									updateAgentPrompt(selectedModeTab, {
 										...existingPrompt,
 										customInstructions: value.trim() || undefined,
 									})