feat: replace emoji icons with professional text-based names

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

@@ -15,6 +15,7 @@ import { useRooPortal } from "@/components/ui/hooks/useRooPortal"
 import { Popover, PopoverContent, PopoverTrigger, StandardTooltip } from "@/components/ui"
 
 import { IconButton } from "./IconButton"
+import InlineIcon from "../common/InlineIcon"
 
 const SEARCH_THRESHOLD = 6
 
@@ -209,7 +210,19 @@ 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 && (
+							<InlineIcon
+								token={
+									selectedMode.icon.startsWith("codicon-") || selectedMode.icon.startsWith("lucide-")
+										? selectedMode.icon
+										: `codicon-${selectedMode.icon}`
+								}
+								className="text-[11px] leading-none"
+							/>
+						)}
+						<span className="truncate">{selectedMode?.name || ""}</span>
+					</div>
 				</PopoverTrigger>
 			</StandardTooltip>
 			<PopoverContent
@@ -269,7 +282,20 @@ 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 && (
+														<InlineIcon
+															token={
+																mode.icon.startsWith("codicon-") ||
+																mode.icon.startsWith("lucide-")
+																	? mode.icon
+																	: `codicon-${mode.icon}`
+															}
+															className="text-[11px] leading-none"
+														/>
+													)}
+													<span className="truncate">{mode.name}</span>
+												</div>
 												{mode.description && (
 													<div className="text-xs text-vscode-descriptionForeground truncate">
 														{mode.description}

webview-ui/src/components/common/IconButton.tsx

@@ -1,4 +1,5 @@
 import { StandardTooltip } from "@/components/ui"
+import InlineIcon from "./InlineIcon"
 
 interface IconButtonProps {
 	icon: string
@@ -26,13 +27,18 @@ export function IconButton({
 		medium: "w-7 h-7",
 	}
 
+	const iconSize = size === "small" ? 14 : 16
+
 	const variantClasses = {
 		default: "bg-transparent hover:bg-vscode-toolbar-hoverBackground",
 		transparent: "bg-transparent hover:bg-vscode-toolbar-hoverBackground",
 	}
 
 	const handleClick = onClick || ((_event: React.MouseEvent) => {})
 
+	// Support both raw codicon names (e.g., "extensions") and fully-qualified tokens ("codicon-..." | "lucide-...")
+	const token = icon.startsWith("codicon-") || icon.startsWith("lucide-") ? icon : `codicon-${icon}`
+
 	const button = (
 		<button
 			className={`${sizeClasses[size]} flex items-center justify-center border-none text-vscode-editor-foreground cursor-pointer rounded-[3px] ${variantClasses[variant]}`}
@@ -41,7 +47,7 @@ export function IconButton({
 			onMouseDown={onMouseDown}
 			onMouseUp={onMouseUp}
 			onMouseLeave={onMouseLeave}>
-			<span className={`codicon codicon-${icon}`}></span>
+			<InlineIcon token={token} size={iconSize} />
 		</button>
 	)
 

webview-ui/src/components/common/InlineIcon.tsx

@@ -0,0 +1,80 @@
+import React, { Suspense } from "react"
+import { cn } from "@/lib/utils"
+import dynamicIconImports from "lucide-react/dynamicIconImports"
+
+type InlineIconProps = {
+	token?: string
+	className?: string
+	style?: React.CSSProperties
+	size?: number
+	spin?: boolean
+}
+
+function toPascalCase(name: string): string {
+	return name
+		.split(/[-_\s]+/)
+		.filter(Boolean)
+		.map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+		.join("")
+}
+
+export const InlineIcon: React.FC<InlineIconProps> = ({ token, className, style, size = 16, spin = false }) => {
+	if (!token) return null
+
+	const raw = token.trim()
+
+	// Normalize shorthand: default to codicon if no prefix
+	let type: "codicon" | "lucide" = "codicon"
+	let name = raw
+
+	if (raw.startsWith("lucide-")) {
+		type = "lucide"
+		name = raw.slice("lucide-".length)
+	} else if (raw.startsWith("codicon-")) {
+		type = "codicon"
+		name = raw.slice("codicon-".length)
+	} else {
+		// no prefix implies codicon
+		type = "codicon"
+		name = raw
+	}
+
+	// Temporary mapping: show lucide-bug when codicon-debug requested
+	if (type === "codicon" && name === "debug") {
+		type = "lucide"
+		name = "bug"
+	}
+
+	if (type === "codicon") {
+		return (
+			<span
+				className={cn("codicon", `codicon-${name}`, spin && "codicon-modifier-spin", className)}
+				style={style}
+				aria-hidden="true"
+			/>
+		)
+	}
+
+	const pascal = toPascalCase(name)
+	const importer = (dynamicIconImports as Record<string, () => Promise<{ default: React.ComponentType<any> }>>)[
+		pascal
+	]
+
+	if (!importer) {
+		// Fallback to a generic question icon if not found
+		return <span className={cn("codicon", "codicon-question", className)} style={style} aria-hidden="true" />
+	}
+
+	const LucideIcon = React.lazy(importer)
+
+	return (
+		<Suspense
+			fallback={
+				<span className={cn("codicon", "codicon-symbol-icon", className)} style={style} aria-hidden="true" />
+			}>
+			<LucideIcon className={className} width={size} height={size} strokeWidth={1.75} aria-hidden="true" />
+		</Suspense>
+	)
+}
+
+export default InlineIcon