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

This reverts commit af0cd5b0fc.

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

@@ -66,7 +66,6 @@ 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(
@@ -112,23 +111,26 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 			text: slug,
 		})
 	}, [])
-	// Handle mode tab selection without actually switching modes
+
+	// Handle mode switching with explicit state initialization
 	const handleModeSwitch = useCallback(
 		(modeConfig: ModeConfig) => {
-			if (modeConfig.slug === selectedModeTab) return // Prevent unnecessary updates
+			if (modeConfig.slug === mode) return // Prevent unnecessary updates
 
-			// Update selected tab and reset tools edit mode
-			setSelectedModeTab(modeConfig.slug)
+			// First switch the mode
+			switchMode(modeConfig.slug)
+
+			// Exit tools edit mode when switching modes
 			setIsToolsEditMode(false)
 		},
-		[selectedModeTab, setIsToolsEditMode],
+		[mode, switchMode, setIsToolsEditMode],
 	)
 
 	// Helper function to get current mode's config
 	const getCurrentMode = useCallback((): ModeConfig | undefined => {
-		const findMode = (m: ModeConfig): boolean => m.slug === selectedModeTab
+		const findMode = (m: ModeConfig): boolean => m.slug === mode
 		return customModes?.find(findMode) || modes.find(findMode)
-	}, [selectedModeTab, customModes, modes])
+	}, [mode, customModes, modes])
 
 	// Helper function to safely access mode properties
 	const getModeProperty = <T extends keyof ModeConfig>(
@@ -154,11 +156,6 @@ 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
@@ -188,6 +185,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 			groups: newModeGroups,
 		}
 		updateCustomMode(newModeSlug, newMode)
+		switchMode(newModeSlug)
 		setIsCreateModeDialogOpen(false)
 		setNewModeName("")
 		setNewModeSlug("")
@@ -478,7 +476,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 							padding: "4px 0",
 						}}>
 						{modes.map((modeConfig) => {
-							const isActive = selectedModeTab === modeConfig.slug
+							const isActive = mode === modeConfig.slug
 							return (
 								<button
 									key={modeConfig.slug}
@@ -506,22 +504,20 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 
 				<div style={{ marginBottom: "20px" }}>
 					{/* Only show name and delete for custom modes */}
-					{selectedModeTab && findModeBySlug(selectedModeTab, customModes) && (
+					{mode && findModeBySlug(mode, 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(selectedModeTab, customModes), "name") ?? ""
-										}
+										value={getModeProperty(findModeBySlug(mode, customModes), "name") ?? ""}
 										onChange={(e: Event | React.FormEvent<HTMLElement>) => {
 											const target =
 												(e as CustomEvent)?.detail?.target ||
 												((e as any).target as HTMLInputElement)
-											const customMode = findModeBySlug(selectedModeTab, customModes)
+											const customMode = findModeBySlug(mode, customModes)
 											if (customMode) {
-												updateCustomMode(selectedModeTab, {
+												updateCustomMode(mode, {
 													...customMode,
 													name: target.value,
 												})
@@ -535,7 +531,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 										onClick={() => {
 											vscode.postMessage({
 												type: "deleteCustomMode",
-												slug: selectedModeTab,
+												slug: mode,
 											})
 										}}>
 										<span className="codicon codicon-trash"></span>
@@ -553,7 +549,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 								marginBottom: "4px",
 							}}>
 							<div style={{ fontWeight: "bold" }}>Role Definition</div>
-							{!findModeBySlug(selectedModeTab, customModes) && (
+							{!findModeBySlug(mode, customModes) && (
 								<VSCodeButton
 									appearance="icon"
 									onClick={() => {
@@ -579,28 +575,24 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 						</div>
 						<VSCodeTextArea
 							value={(() => {
-								const customMode = findModeBySlug(selectedModeTab, customModes)
-								const prompt = customModePrompts?.[selectedModeTab] as PromptComponent
-								return (
-									customMode?.roleDefinition ??
-									prompt?.roleDefinition ??
-									getRoleDefinition(selectedModeTab)
-								)
+								const customMode = findModeBySlug(mode, customModes)
+								const prompt = customModePrompts?.[mode] as PromptComponent
+								return customMode?.roleDefinition ?? prompt?.roleDefinition ?? getRoleDefinition(mode)
 							})()}
 							onChange={(e) => {
 								const value =
 									(e as CustomEvent)?.detail?.target?.value ||
 									((e as any).target as HTMLTextAreaElement).value
-								const customMode = findModeBySlug(selectedModeTab, customModes)
+								const customMode = findModeBySlug(mode, customModes)
 								if (customMode) {
 									// For custom modes, update the JSON file
-									updateCustomMode(selectedModeTab, {
+									updateCustomMode(mode, {
 										...customMode,
 										roleDefinition: value.trim() || "",
 									})
 								} else {
 									// For built-in modes, update the prompts
-									updateAgentPrompt(selectedModeTab, {
+									updateAgentPrompt(mode, {
 										roleDefinition: value.trim() || undefined,
 									})
 								}
@@ -762,7 +754,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 								marginBottom: "4px",
 							}}>
 							<div style={{ fontWeight: "bold" }}>Mode-specific Custom Instructions</div>
-							{!findModeBySlug(selectedModeTab, customModes) && (
+							{!findModeBySlug(mode, customModes) && (
 								<VSCodeButton
 									appearance="icon"
 									onClick={() => {
@@ -787,29 +779,29 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 						</div>
 						<VSCodeTextArea
 							value={(() => {
-								const customMode = findModeBySlug(selectedModeTab, customModes)
-								const prompt = customModePrompts?.[selectedModeTab] as PromptComponent
+								const customMode = findModeBySlug(mode, customModes)
+								const prompt = customModePrompts?.[mode] as PromptComponent
 								return (
 									customMode?.customInstructions ??
 									prompt?.customInstructions ??
-									getCustomInstructions(selectedModeTab, customModes)
+									getCustomInstructions(mode, customModes)
 								)
 							})()}
 							onChange={(e) => {
 								const value =
 									(e as CustomEvent)?.detail?.target?.value ||
 									((e as any).target as HTMLTextAreaElement).value
-								const customMode = findModeBySlug(selectedModeTab, customModes)
+								const customMode = findModeBySlug(mode, customModes)
 								if (customMode) {
 									// For custom modes, update the JSON file
-									updateCustomMode(selectedModeTab, {
+									updateCustomMode(mode, {
 										...customMode,
 										customInstructions: value.trim() || undefined,
 									})
 								} else {
 									// For built-in modes, update the prompts
-									const existingPrompt = customModePrompts?.[selectedModeTab] as PromptComponent
-									updateAgentPrompt(selectedModeTab, {
+									const existingPrompt = customModePrompts?.[mode] as PromptComponent
+									updateAgentPrompt(mode, {
 										...existingPrompt,
 										customInstructions: value.trim() || undefined,
 									})