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

Author: MuriloFP

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

@@ -21,6 +21,7 @@ import { ShareButton } from "./ShareButton"
 import { ContextWindowProgress } from "./ContextWindowProgress"
 import { Mention } from "./Mention"
 import { TodoListDisplay } from "./TodoListDisplay"
+import { ModeBadge } from "@/components/common/ModeBadge"
 
 export interface TaskHeaderProps {
 	task: ClineMessage
@@ -90,11 +91,12 @@ const TaskHeader = ({
 						<div className="flex items-center shrink-0">
 							<span className={`codicon codicon-chevron-${isTaskExpanded ? "down" : "right"}`}></span>
 						</div>
-						<div className="ml-1.5 whitespace-nowrap overflow-hidden text-ellipsis grow min-w-0">
+						<div className="ml-1.5 whitespace-nowrap overflow-hidden text-ellipsis grow min-w-0 flex items-center gap-2">
 							<span className="font-bold">
 								{t("chat:task.title")}
 								{!isTaskExpanded && ":"}
 							</span>
+							{currentTaskItem?.mode && <ModeBadge modeSlug={currentTaskItem.mode} />}
 							{!isTaskExpanded && (
 								<span className="ml-1">
 									<Mention text={task.text} />

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

@@ -33,17 +33,33 @@ vi.mock("@vscode/webview-ui-toolkit/react", () => ({
 }))
 
 // Mock the ExtensionStateContext
+const { mockGetCurrentTaskItem, mockSetCurrentTaskItem } = vi.hoisted(() => {
+	let currentTaskItem: any = { id: "test-task-id", mode: "code" }
+	return {
+		mockGetCurrentTaskItem: () => currentTaskItem,
+		mockSetCurrentTaskItem: (newItem: any) => {
+			currentTaskItem = newItem
+		},
+	}
+})
+
 vi.mock("@src/context/ExtensionStateContext", () => ({
 	useExtensionState: () => ({
 		apiConfiguration: {
 			apiProvider: "anthropic",
-			apiKey: "test-api-key", // Add relevant fields
-			apiModelId: "claude-3-opus-20240229", // Add relevant fields
-		} as ProviderSettings, // Optional: Add type assertion if ProviderSettings is imported
-		currentTaskItem: { id: "test-task-id" },
+			apiKey: "test-api-key",
+			apiModelId: "claude-3-opus-20240229",
+		} as ProviderSettings,
+		currentTaskItem: mockGetCurrentTaskItem(),
+		customModes: [],
 	}),
 }))
 
+// Mock ModeBadge component
+vi.mock("@/components/common/ModeBadge", () => ({
+	ModeBadge: ({ modeSlug }: { modeSlug: string }) => <div data-testid="mode-badge">{modeSlug}</div>,
+}))
+
 describe("TaskHeader", () => {
 	const defaultProps: TaskHeaderProps = {
 		task: { type: "say", ts: Date.now(), text: "Test task", images: [] },
@@ -122,4 +138,31 @@ describe("TaskHeader", () => {
 		fireEvent.click(condenseButton!)
 		expect(handleCondenseContext).not.toHaveBeenCalled()
 	})
+
+	it("should display mode badge when currentTaskItem has mode", () => {
+		renderTaskHeader()
+		expect(screen.getByTestId("mode-badge")).toBeInTheDocument()
+		expect(screen.getByText("code")).toBeInTheDocument()
+	})
+
+	it("should not display mode badge when currentTaskItem has no mode", () => {
+		// Override the mock for this test
+		const originalTaskItem = mockGetCurrentTaskItem()
+		mockSetCurrentTaskItem({
+			id: "test-task-id",
+			number: 1,
+			ts: Date.now(),
+			task: "Test task",
+			tokensIn: 100,
+			tokensOut: 50,
+			totalCost: 0.05,
+			// No mode property
+		})
+
+		renderTaskHeader()
+		expect(screen.queryByTestId("mode-badge")).not.toBeInTheDocument()
+
+		// Restore original mock
+		mockSetCurrentTaskItem(originalTaskItem)
+	})
 })

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

@@ -0,0 +1,37 @@
+import React from "react"
+import { findModeBySlug, getAllModes } from "@roo/modes"
+import { useExtensionState } from "@/context/ExtensionStateContext"
+import { StandardTooltip } from "@/components/ui"
+import { cn } from "@/lib/utils"
+
+interface ModeBadgeProps {
+	modeSlug?: string
+	className?: string
+}
+
+export const ModeBadge: React.FC<ModeBadgeProps> = ({ modeSlug, className }) => {
+	const { customModes } = useExtensionState()
+
+	if (!modeSlug) {
+		return null
+	}
+
+	// Get all modes (built-in + custom)
+	const allModes = getAllModes(customModes)
+	const mode = findModeBySlug(modeSlug, allModes)
+	const displayName = mode?.name || modeSlug // Fallback to slug if mode deleted
+
+	return (
+		<StandardTooltip content={displayName}>
+			<span
+				className={cn(
+					"inline-flex items-center px-2 py-0.5 rounded text-xs font-medium",
+					"bg-vscode-badge-background text-vscode-badge-foreground",
+					"max-w-[120px] truncate",
+					className,
+				)}>
+				{displayName}
+			</span>
+		</StandardTooltip>
+	)
+}

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

@@ -0,0 +1,51 @@
+import { render, screen } from "@/utils/test-utils"
+import { ModeBadge } from "../ModeBadge"
+
+// Mock the shared modes module
+vi.mock("@roo/modes", () => ({
+	findModeBySlug: vi.fn((slug, _modes) => {
+		if (slug === "code") return { slug: "code", name: "💻 Code" }
+		if (slug === "architect") return { slug: "architect", name: "🏗️ Architect" }
+		if (slug === "custom") return { slug: "custom", name: "Very Long Custom Mode Name That Should Be Truncated" }
+		return undefined
+	}),
+	getAllModes: vi.fn(() => []),
+}))
+
+// Mock ExtensionStateContext
+vi.mock("@/context/ExtensionStateContext", () => ({
+	useExtensionState: () => ({
+		customModes: [],
+	}),
+}))
+
+describe("ModeBadge", () => {
+	it("renders mode name when mode exists", () => {
+		render(<ModeBadge modeSlug="code" />)
+		expect(screen.getByText("💻 Code")).toBeInTheDocument()
+	})
+
+	it("renders slug as fallback when mode not found", () => {
+		render(<ModeBadge modeSlug="deleted-mode" />)
+		expect(screen.getByText("deleted-mode")).toBeInTheDocument()
+	})
+
+	it("returns null when no mode slug provided", () => {
+		const { container } = render(<ModeBadge />)
+		expect(container.firstChild).toBeNull()
+	})
+
+	it("truncates long mode names", () => {
+		render(<ModeBadge modeSlug="custom" />)
+		const badge = screen.getByText(/Very Long Custom Mode Name/)
+		expect(badge).toHaveClass("truncate")
+		expect(badge).toHaveClass("max-w-[120px]")
+	})
+
+	it("shows full name in tooltip", async () => {
+		render(<ModeBadge modeSlug="custom" />)
+		// Tooltip content would be tested with user interaction
+		// This is a simplified test
+		expect(screen.getByText(/Very Long Custom Mode Name/)).toBeInTheDocument()
+	})
+})

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 */}

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

@@ -8,6 +8,11 @@ vi.mock("@src/i18n/TranslationContext", () => ({
 	}),
 }))
 
+// Mock ModeBadge component
+vi.mock("@/components/common/ModeBadge", () => ({
+	ModeBadge: ({ modeSlug }: { modeSlug: string }) => <div data-testid="mode-badge">{modeSlug}</div>,
+}))
+
 const mockItem = {
 	id: "1",
 	number: 1,
@@ -32,4 +37,20 @@ describe("TaskItemHeader", () => {
 
 		expect(screen.getByRole("button")).toBeInTheDocument()
 	})
+
+	it("shows mode badge when item has mode", () => {
+		const itemWithMode = { ...mockItem, mode: "code" }
+		render(<TaskItemHeader item={itemWithMode} isSelectionMode={false} onDelete={vi.fn()} />)
+
+		// ModeBadge would be mocked in the test
+		expect(screen.getByTestId("mode-badge")).toBeInTheDocument()
+		expect(screen.getByText("code")).toBeInTheDocument()
+	})
+
+	it("does not show mode badge when item has no mode", () => {
+		render(<TaskItemHeader item={mockItem} isSelectionMode={false} onDelete={vi.fn()} />)
+
+		// Verify no mode badge is rendered
+		expect(screen.queryByTestId("mode-badge")).not.toBeInTheDocument()
+	})
 })