feat: Add mode display indicators on task cards (#6493)

- Created ModeBadge component to display mode names with proper styling
- Updated TaskItemHeader to show mode badge next to timestamp in history view
- Updated TaskHeader to display mode badge in main chat view
- Added comprehensive unit tests for ModeBadge component
- Handles custom modes, deleted modes, and long mode names with truncation
- Only displays badge when mode information exists (no empty badges)

Author: MuriloFP

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

@@ -15,6 +15,7 @@ import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { useSelectedModel } from "@/components/ui/hooks/useSelectedModel"
 
 import Thumbnails from "../common/Thumbnails"
+import { ModeBadge } from "../common/ModeBadge"
 
 import { TaskActions } from "./TaskActions"
 import { ShareButton } from "./ShareButton"
@@ -101,6 +102,11 @@ const TaskHeader = ({
 								</span>
 							)}
 						</div>
+						{currentTaskItem?.mode && (
+							<div className="ml-2 flex-shrink-0">
+								<ModeBadge modeSlug={currentTaskItem.mode} />
+							</div>
+						)}
 					</div>
 					<StandardTooltip content={t("chat:task.closeAndStart")}>
 						<Button variant="ghost" size="icon" onClick={onClose} className="shrink-0 w-5 h-5">

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

@@ -0,0 +1,42 @@
+import React from "react"
+import { getModeBySlug } from "@roo/modes"
+import { Badge } from "@/components/ui/badge"
+import { StandardTooltip } from "@/components/ui"
+import { cn } from "@/lib/utils"
+import { useExtensionState } from "@/context/ExtensionStateContext"
+
+interface ModeBadgeProps {
+	modeSlug: string | undefined
+	className?: string
+}
+
+export const ModeBadge: React.FC<ModeBadgeProps> = ({ modeSlug, className }) => {
+	const { customModes } = useExtensionState()
+
+	if (!modeSlug) {
+		return null
+	}
+
+	const mode = getModeBySlug(modeSlug, customModes)
+
+	// If mode is not found (e.g., deleted custom mode), show the slug as fallback
+	const displayName = mode?.name || modeSlug
+
+	// Truncate long mode names
+	const truncatedName = displayName.length > 20 ? `${displayName.substring(0, 17)}...` : displayName
+
+	return (
+		<StandardTooltip content={displayName}>
+			<Badge
+				variant="outline"
+				className={cn(
+					"text-xs font-normal px-1.5 py-0 h-5",
+					"bg-vscode-badge-background text-vscode-badge-foreground",
+					"border-vscode-badge-background",
+					className,
+				)}>
+				{truncatedName}
+			</Badge>
+		</StandardTooltip>
+	)
+}

webview-ui/src/components/common/__tests__/ModeBadge.spec.tsx

@@ -0,0 +1,172 @@
+import { render, screen } from "@testing-library/react"
+import { ModeBadge } from "../ModeBadge"
+import { getModeBySlug } from "@roo/modes"
+import { useExtensionState } from "@/context/ExtensionStateContext"
+
+// Mock dependencies
+vi.mock("@roo/modes")
+vi.mock("@/context/ExtensionStateContext")
+vi.mock("@/components/ui", () => ({
+	StandardTooltip: ({ children, content }: any) => <div title={content}>{children}</div>,
+	Badge: ({ children, className }: any) => <div className={className}>{children}</div>,
+}))
+
+const mockGetModeBySlug = vi.mocked(getModeBySlug)
+const mockUseExtensionState = vi.mocked(useExtensionState)
+
+describe("ModeBadge", () => {
+	beforeEach(() => {
+		vi.clearAllMocks()
+		mockUseExtensionState.mockReturnValue({
+			customModes: [],
+		} as any)
+	})
+
+	it("should not render when modeSlug is undefined", () => {
+		const { container } = render(<ModeBadge modeSlug={undefined} />)
+		expect(container.firstChild).toBeNull()
+	})
+
+	it("should render mode name for built-in mode", () => {
+		mockGetModeBySlug.mockReturnValue({
+			slug: "code",
+			name: "💻 Code",
+			roleDefinition: "You are a code assistant",
+			groups: ["read", "edit"] as const,
+		} as any)
+
+		render(<ModeBadge modeSlug="code" />)
+
+		expect(screen.getByText("💻 Code")).toBeInTheDocument()
+		expect(mockGetModeBySlug).toHaveBeenCalledWith("code", [])
+	})
+
+	it("should render mode name for custom mode", () => {
+		const customModes = [
+			{
+				slug: "custom-mode",
+				name: "🎨 Custom Mode",
+				roleDefinition: "Custom role",
+				groups: ["read"] as const,
+			},
+		]
+
+		mockUseExtensionState.mockReturnValue({
+			customModes,
+		} as any)
+
+		mockGetModeBySlug.mockReturnValue(customModes[0] as any)
+
+		render(<ModeBadge modeSlug="custom-mode" />)
+
+		expect(screen.getByText("🎨 Custom Mode")).toBeInTheDocument()
+		expect(mockGetModeBySlug).toHaveBeenCalledWith("custom-mode", customModes)
+	})
+
+	it("should render mode slug as fallback for deleted custom mode", () => {
+		mockGetModeBySlug.mockReturnValue(undefined)
+
+		render(<ModeBadge modeSlug="deleted-mode" />)
+
+		expect(screen.getByText("deleted-mode")).toBeInTheDocument()
+	})
+
+	it("should truncate long mode names", () => {
+		mockGetModeBySlug.mockReturnValue({
+			slug: "long-mode",
+			name: "This is a very long mode name that should be truncated",
+			roleDefinition: "Long mode",
+			groups: ["read"] as const,
+		} as any)
+
+		render(<ModeBadge modeSlug="long-mode" />)
+
+		expect(screen.getByText("This is a very lo...")).toBeInTheDocument()
+	})
+
+	it("should show full name in tooltip", () => {
+		const longName = "This is a very long mode name that should be truncated"
+		mockGetModeBySlug.mockReturnValue({
+			slug: "long-mode",
+			name: longName,
+			roleDefinition: "Long mode",
+			groups: ["read"] as const,
+		} as any)
+
+		render(<ModeBadge modeSlug="long-mode" />)
+
+		// The StandardTooltip component should have the full name as content
+		const badge = screen.getByText("This is a very lo...")
+		expect(badge.closest("[title]")).toHaveAttribute("title", longName)
+	})
+
+	it("should apply custom className", () => {
+		mockGetModeBySlug.mockReturnValue({
+			slug: "code",
+			name: "Code",
+			roleDefinition: "Code mode",
+			groups: ["read"] as const,
+		} as any)
+
+		render(<ModeBadge modeSlug="code" className="custom-class" />)
+
+		const badge = screen.getByText("Code")
+		expect(badge).toHaveClass("custom-class")
+	})
+
+	it("should handle mode without emoji", () => {
+		mockGetModeBySlug.mockReturnValue({
+			slug: "plain-mode",
+			name: "Plain Mode",
+			roleDefinition: "Plain mode",
+			groups: ["read"] as const,
+		} as any)
+
+		render(<ModeBadge modeSlug="plain-mode" />)
+
+		expect(screen.getByText("Plain Mode")).toBeInTheDocument()
+	})
+
+	it("should use correct styling classes", () => {
+		mockGetModeBySlug.mockReturnValue({
+			slug: "test-mode",
+			name: "Test Mode",
+			roleDefinition: "Test mode",
+			groups: ["read"] as const,
+		} as any)
+
+		render(<ModeBadge modeSlug="test-mode" />)
+
+		const badge = screen.getByText("Test Mode")
+		expect(badge).toHaveClass("bg-vscode-badge-background")
+		expect(badge).toHaveClass("text-vscode-badge-foreground")
+		expect(badge).toHaveClass("border-vscode-badge-background")
+		expect(badge).toHaveClass("text-xs")
+		expect(badge).toHaveClass("font-normal")
+		expect(badge).toHaveClass("px-1.5")
+		expect(badge).toHaveClass("py-0")
+		expect(badge).toHaveClass("h-5")
+	})
+
+	it("should handle all built-in modes", () => {
+		const builtInModes = [
+			{ slug: "architect", name: "🏗️ Architect" },
+			{ slug: "code", name: "💻 Code" },
+			{ slug: "ask", name: "❓ Ask" },
+			{ slug: "debug", name: "🪲 Debug" },
+			{ slug: "test", name: "🧪 Test" },
+		]
+
+		builtInModes.forEach((mode) => {
+			mockGetModeBySlug.mockReturnValue({
+				...mode,
+				roleDefinition: "Test",
+				groups: ["read"] as const,
+			} as any)
+
+			const { unmount } = render(<ModeBadge modeSlug={mode.slug} />)
+			expect(screen.getByText(mode.name)).toBeInTheDocument()
+			unmount()
+		})
+	})
+})

webview-ui/src/components/history/TaskItemHeader.tsx

@@ -3,6 +3,7 @@ import type { HistoryItem } from "@roo-code/types"
 import { formatDate } from "@/utils/format"
 import { DeleteButton } from "./DeleteButton"
 import { cn } from "@/lib/utils"
+import { ModeBadge } from "@/components/common/ModeBadge"
 
 export interface TaskItemHeaderProps {
 	item: HistoryItem
@@ -22,6 +23,7 @@ const TaskItemHeader: React.FC<TaskItemHeaderProps> = ({ item, isSelectionMode,
 				<span className="text-vscode-descriptionForeground font-medium text-sm uppercase">
 					{formatDate(item.ts)}
 				</span>
+				{item.mode && <ModeBadge modeSlug={item.mode} />}
 			</div>
 
 			{/* Action Buttons */}