feat: added pear ai creator mode with backend only flag to not show it to the users when we don't want it to

Author: Acorn221

src/activate/registerPearListener.ts

@@ -1,6 +1,7 @@
 import * as vscode from "vscode"
 import { ClineProvider } from "../core/webview/ClineProvider"
 import { assert } from "../utils/util"
+import { PEARAI_CREATOR_MODE_WEBAPP_MANAGER_SLUG } from "../shared/modes"
 
 export const getPearaiExtension = async () => {
 	const pearAiExtension = vscode.extensions.getExtension("pearai.pearai")
@@ -51,7 +52,11 @@ export const registerPearListener = async (provider: ClineProvider) => {
 		await new Promise((resolve) => setTimeout(resolve, 3000))
 
 		// * This does actually work but the UI update does not happen. This method calls this.postStateToWebview() so not sure what is going on - James
-		await provider.handleModeSwitch("Creator")
+		if(msg.newProjectType !== "NONE") {
+			// Only switch to the creator manager if we're creating a new project
+			// TODO: later when we need to make a different type of project, we need to change this
+			await provider.handleModeSwitch(PEARAI_CREATOR_MODE_WEBAPP_MANAGER_SLUG);
+		}
 
 		// Clicl the chat btn
 		await provider.postMessageToWebview({ type: "action", action: "chatButtonClicked" })

src/exports/roo-code.d.ts

@@ -364,6 +364,7 @@ type GlobalSettings = {
 					  ]
 				)[]
 				source?: ("global" | "project") | undefined
+				backendOnly?: boolean | undefined
 		  }[]
 		| undefined
 	customModePrompts?:

src/exports/types.ts

@@ -367,6 +367,7 @@ type GlobalSettings = {
 					  ]
 				)[]
 				source?: ("global" | "project") | undefined
+				backendOnly?: boolean | undefined
 		  }[]
 		| undefined
 	customModePrompts?:

src/schemas/index.ts

@@ -215,6 +215,7 @@ export const modeConfigSchema = z.object({
 	customInstructions: z.string().optional(),
 	groups: groupEntryArraySchema,
 	source: z.enum(["global", "project"]).optional(),
+	backendOnly: z.boolean().optional()
 })
 
 export type ModeConfig = z.infer<typeof modeConfigSchema>

src/shared/modes.ts

@@ -51,15 +51,17 @@ export function getToolsForMode(groups: readonly GroupEntry[]): string[] {
 	return Array.from(tools)
 }
 
+export const PEARAI_CREATOR_MODE_WEBAPP_MANAGER_SLUG = 'pearai-creator-webapp-manager' as const;
+
 // Main modes configuration as an ordered array
 export const modes: readonly ModeConfig[] = [
 	{
-		slug: "creator",
-		name: "Creator",
-		// TODO: CHANGE ME TO ACTUALLY BE LIKE THE CREATOR MODE WE WANT
+		slug: PEARAI_CREATOR_MODE_WEBAPP_MANAGER_SLUG,
+		name: "🍐 PearAI Creator Webapp Manager",
 		roleDefinition:
-			"You are PearAI Agent (Powered by Roo Code / Cline), a creative and systematic software architect focused on turning high-level ideas into actionable plans. Your primary goal is to help users transform their ideas into structured action plans.",
+			"<PEARAI CREATOR_WEBAPP_MANAGER></PEARAL_CREATOR_WEBAPP_MANAGER>",
 		groups: ["read", "edit", "browser", "command", "mcp"],
+		backendOnly: true,
 	},
 	{
 		slug: "code",

webview-ui/src/components/chat/ChatTextArea.tsx

@@ -1039,6 +1039,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 										value: mode.slug,
 										label: mode.name,
 										type: DropdownOptionType.ITEM,
+										backendOnly: mode.backendOnly
 									})),
 									{
 										value: "sep-1",

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

@@ -68,7 +68,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 	const [visualMode, setVisualMode] = useState(mode)
 
 	// Memoize modes to preserve array order
-	const modes = useMemo(() => getAllModes(customModes), [customModes])
+	const modes = useMemo(() => getAllModes(customModes).filter(x => !x.backendOnly), [customModes])
 
 	const [testPrompt, setTestPrompt] = useState("")
 	const [isEnhancing, setIsEnhancing] = useState(false)

webview-ui/src/components/ui/select-dropdown.tsx

@@ -21,6 +21,7 @@ export interface DropdownOption {
 	disabled?: boolean
 	type?: DropdownOptionType
 	pinned?: boolean
+	backendOnly?: boolean;
 }
 
 export interface SelectDropdownProps {
@@ -157,7 +158,8 @@ export const SelectDropdown = React.memo(
 					result.pop()
 				}
 
-				return result
+				// filtering out "backendOnly" options
+				return result.filter(x => !x.backendOnly);
 			}, [filteredOptions])
 
 			const handleSelect = React.useCallback(