feat(ui): replace emojis with monochrome codicon icons for modes; add optional icon to ModeConfig; render icons in ModeSelector

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(),
@@ -137,6 +138,7 @@ export const DEFAULT_MODES: readonly ModeConfig[] = [
 	{
 		slug: "architect",
 		name: "Architect",
+		icon: "symbol-structure",
 		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:
@@ -159,6 +162,7 @@ export const DEFAULT_MODES: readonly ModeConfig[] = [
 	{
 		slug: "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:
@@ -171,6 +175,7 @@ export const DEFAULT_MODES: readonly ModeConfig[] = [
 	{
 		slug: "debug",
 		name: "Debug",
+		icon: "debug",
 		roleDefinition:
 			"You are Roo, an expert software debugger specializing in systematic problem diagnosis and resolution.",
 		whenToUse:
@@ -183,6 +188,7 @@ export const DEFAULT_MODES: readonly ModeConfig[] = [
 	{
 		slug: "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:

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}