feat(ui): replace emojis with codicons; use text-based mode names; update tests

- Replace emoji icons with monochrome codicon icons for modes

- Rename mode labels to professional text names: Architect, Ask, Debug, Orchestrator

- Add optional icon to ModeConfig and render in ModeSelector

- Update tests to match new names and icons

Fixes #8729

Author: roomote

packages/types/src/mode.ts

@@ -67,6 +67,7 @@ export const modeConfigSchema = z.object({
 	roleDefinition: z.string().min(1, "Role definition is required"),
 	whenToUse: z.string().optional(),
 	description: z.string().optional(),
+	icon: z.string().optional(),
 	customInstructions: z.string().optional(),
 	groups: groupEntryArraySchema,
 	source: z.enum(["global", "project"]).optional(),
@@ -136,7 +137,8 @@ export type CustomSupportPrompts = z.infer<typeof customSupportPromptsSchema>
 export const DEFAULT_MODES: readonly ModeConfig[] = [
 	{
 		slug: "architect",
-		name: "🏗️ Architect",
+		name: "Architect",
+		icon: "checklist",
 		roleDefinition:
 			"You are Roo, an experienced technical leader who is inquisitive and an excellent planner. Your goal is to gather information and get context to create a detailed plan for accomplishing the user's task, which the user will review and approve before they switch into another mode to implement the solution.",
 		whenToUse:
@@ -148,7 +150,8 @@ export const DEFAULT_MODES: readonly ModeConfig[] = [
 	},
 	{
 		slug: "code",
-		name: "💻 Code",
+		name: "Code",
+		icon: "code",
 		roleDefinition:
 			"You are Roo, a highly skilled software engineer with extensive knowledge in many programming languages, frameworks, design patterns, and best practices.",
 		whenToUse:
@@ -158,7 +161,8 @@ export const DEFAULT_MODES: readonly ModeConfig[] = [
 	},
 	{
 		slug: "ask",
-		name: "❓ Ask",
+		name: "Ask",
+		icon: "question",
 		roleDefinition:
 			"You are Roo, a knowledgeable technical assistant focused on answering questions and providing information about software development, technology, and related topics.",
 		whenToUse:
@@ -170,7 +174,8 @@ export const DEFAULT_MODES: readonly ModeConfig[] = [
 	},
 	{
 		slug: "debug",
-		name: "🪲 Debug",
+		name: "Debug",
+		icon: "debug",
 		roleDefinition:
 			"You are Roo, an expert software debugger specializing in systematic problem diagnosis and resolution.",
 		whenToUse:
@@ -182,7 +187,8 @@ export const DEFAULT_MODES: readonly ModeConfig[] = [
 	},
 	{
 		slug: "orchestrator",
-		name: "🪃 Orchestrator",
+		name: "Orchestrator",
+		icon: "organization",
 		roleDefinition:
 			"You are Roo, a strategic workflow orchestrator who coordinates complex tasks by delegating them to appropriate specialized modes. You have a comprehensive understanding of each mode's capabilities and limitations, allowing you to effectively break down complex problems into discrete tasks that can be solved by different specialists.",
 		whenToUse:

src/core/environment/__tests__/getEnvironmentDetails.spec.ts

@@ -121,7 +121,7 @@ describe("getEnvironmentDetails", () => {
 		// Mock other dependencies.
 		;(getApiMetrics as Mock).mockReturnValue({ contextTokens: 50000, totalCost: 0.25 })
 		;(getFullModeDetails as Mock).mockResolvedValue({
-			name: "💻 Code",
+			name: "Code",
 			roleDefinition: "You are a code assistant",
 			customInstructions: "Custom instructions",
 		})

src/shared/__tests__/modes.spec.ts

@@ -389,7 +389,7 @@ describe("FileRestrictionError", () => {
 			expect(debugMode).toBeDefined()
 			expect(debugMode).toMatchObject({
 				slug: "debug",
-				name: "🪲 Debug",
+				name: "Debug",
 				roleDefinition:
 					"You are Roo, an expert software debugger specializing in systematic problem diagnosis and resolution.",
 				groups: ["read", "edit", "browser", "command", "mcp"],
@@ -410,7 +410,7 @@ describe("FileRestrictionError", () => {
 			const result = await getFullModeDetails("debug")
 			expect(result).toMatchObject({
 				slug: "debug",
-				name: "🪲 Debug",
+				name: "Debug",
 				roleDefinition:
 					"You are Roo, an expert software debugger specializing in systematic problem diagnosis and resolution.",
 			})

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

@@ -209,7 +209,12 @@ export const ModeSelector = ({
 							? "bg-primary opacity-90 hover:bg-primary-hover text-vscode-button-foreground"
 							: null,
 					)}>
-					<span className="truncate">{selectedMode?.name || ""}</span>
+					<div className="flex items-center gap-1 truncate">
+						{selectedMode?.icon && (
+							<span className={`codicon codicon-${selectedMode.icon} text-xs`} aria-hidden="true" />
+						)}
+						<span className="truncate">{selectedMode?.name || ""}</span>
+					</div>
 				</PopoverTrigger>
 			</StandardTooltip>
 			<PopoverContent
@@ -269,7 +274,15 @@ export const ModeSelector = ({
 											)}
 											data-testid="mode-selector-item">
 											<div className="flex-1 min-w-0">
-												<div className="font-bold truncate">{mode.name}</div>
+												<div className="font-bold truncate flex items-center gap-2">
+													{mode.icon && (
+														<span
+															className={`codicon codicon-${mode.icon} text-xs`}
+															aria-hidden="true"
+														/>
+													)}
+													<span className="truncate">{mode.name}</span>
+												</div>
 												{mode.description && (
 													<div className="text-xs text-vscode-descriptionForeground truncate">
 														{mode.description}