From 866708b2bbceccb99a0483f75a41dcfca8126579 Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Sun, 26 Oct 2025 06:22:18 +0000
Subject: [PATCH 1/2] feat(ui): codicon-based mode icons; add ModeConfig.icon;
 remove emojis

---
 packages/types/src/mode.ts                    | 16 ++++++++++-----
 .../src/components/chat/ModeSelector.tsx      | 20 +++++++++++++++++--
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/packages/types/src/mode.ts b/packages/types/src/mode.ts
index 88dcbb957471..e2ed3f99a0b2 100644
--- a/packages/types/src/mode.ts
+++ b/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:
diff --git a/webview-ui/src/components/chat/ModeSelector.tsx b/webview-ui/src/components/chat/ModeSelector.tsx
index 3f843344a227..9f87c62e0091 100644
--- a/webview-ui/src/components/chat/ModeSelector.tsx
+++ b/webview-ui/src/components/chat/ModeSelector.tsx
@@ -209,7 +209,15 @@ 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-[11px] leading-none`}
+								aria-hidden="true"
+							/>
+						)}
+						<span className="truncate">{selectedMode?.name || ""}</span>
+					</div>
 				</PopoverTrigger>
 			</StandardTooltip>
 			<PopoverContent
@@ -269,7 +277,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-1">
+													{mode.icon && (
+														<span
+															className={`codicon codicon-${mode.icon} text-[11px] leading-none`}
+															aria-hidden="true"
+														/>
+													)}
+													<span className="truncate">{mode.name}</span>
+												</div>
 												{mode.description && (
 													<div className="text-xs text-vscode-descriptionForeground truncate">
 														{mode.description}

From 8cdb6a32979b192461cf0c297c65c5614d4b32c6 Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Sun, 26 Oct 2025 06:29:30 +0000
Subject: [PATCH 2/2] test: update modes.spec to reflect Debug mode name
 without emoji

---
 src/shared/__tests__/modes.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared/__tests__/modes.spec.ts b/src/shared/__tests__/modes.spec.ts
index 52e4424d8db4..22e877fd0b0b 100644
--- a/src/shared/__tests__/modes.spec.ts
+++ b/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.",
 			})