fix: update AgentSelector and EditAgentControls localization keys and tests

- Update AgentSelector component to use chat:agentSelector.* keys
- Update EditAgentControls to use chat:selectAgent key
- Fix AgentSelector tests to use correct localization keys
- Fix EditAgentControls tests to mock AgentSelector and use correct keys
- All component tests now pass successfully

Author: roomote

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

@@ -157,7 +157,7 @@ export const AgentSelector = ({
 	const showSearch = !disableSearch && modes.length > SEARCH_THRESHOLD
 
 	// Combine instruction text for tooltip
-	const instructionText = `${t("chat:modeSelector.description")} ${modeShortcutText}`
+	const instructionText = `${t("chat:agentSelector.description")} ${modeShortcutText}`
 
 	const trigger = (
 		<PopoverTrigger
@@ -198,7 +198,7 @@ export const AgentSelector = ({
 								ref={searchInputRef}
 								value={searchValue}
 								onChange={(e) => setSearchValue(e.target.value)}
-								placeholder={t("chat:modeSelector.searchPlaceholder")}
+								placeholder={t("chat:agentSelector.searchPlaceholder")}
 								className="w-full h-8 px-2 py-1 text-xs bg-vscode-input-background text-vscode-input-foreground border border-vscode-input-border rounded focus:outline-0"
 								data-testid="agent-search-input"
 							/>
@@ -221,7 +221,7 @@ export const AgentSelector = ({
 					<div className="max-h-[300px] overflow-y-auto">
 						{filteredModes.length === 0 && searchValue ? (
 							<div className="py-2 px-3 text-sm text-vscode-foreground/70">
-								{t("chat:modeSelector.noResults")}
+								{t("chat:agentSelector.noResults")}
 							</div>
 						) : (
 							<div className="py-1">
@@ -257,7 +257,7 @@ export const AgentSelector = ({
 						<div className="flex flex-row gap-1">
 							<IconButton
 								iconClass="codicon-extensions"
-								title={t("chat:modeSelector.marketplace")}
+								title={t("chat:agentSelector.marketplace")}
 								onClick={() => {
 									window.postMessage(
 										{
@@ -272,7 +272,7 @@ export const AgentSelector = ({
 							/>
 							<IconButton
 								iconClass="codicon-settings-gear"
-								title={t("chat:modeSelector.settings")}
+								title={t("chat:agentSelector.settings")}
 								onClick={() => {
 									vscode.postMessage({
 										type: "switchTab",
@@ -291,7 +291,7 @@ export const AgentSelector = ({
 								</StandardTooltip>
 							)}
 							<h4 className="m-0 font-medium text-sm text-vscode-descriptionForeground">
-								{t("chat:modeSelector.title")}
+								{t("chat:agentSelector.title")}
 							</h4>
 						</div>
 					</div>

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

@@ -49,7 +49,7 @@ export const EditAgentControls: React.FC<EditAgentControlsProps> = ({
 				<div className="shrink-0">
 					<AgentSelector
 						value={mode}
-						title={t("chat:selectMode")}
+						title={t("chat:selectAgent")}
 						onChange={onModeChange}
 						triggerClassName="w-full"
 						modeShortcutText={modeShortcutText}

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

@@ -14,8 +14,8 @@ vi.mock("@/utils/vscode", () => ({
 
 vi.mock("@/context/ExtensionStateContext", () => ({
 	useExtensionState: () => ({
-		hasOpenedAgentSelector: false,
-		setHasOpenedAgentSelector: vi.fn(),
+		hasOpenedModeSelector: false,
+		setHasOpenedModeSelector: vi.fn(),
 	}),
 }))
 
@@ -50,7 +50,7 @@ describe("AgentSelector", () => {
 	test("shows custom description from customModePrompts", () => {
 		const customModePrompts = {
 			code: {
-				description: "Custom code mode description",
+				description: "Custom code agent description",
 			},
 		}
 
@@ -93,7 +93,7 @@ describe("AgentSelector", () => {
 		expect(screen.getByTestId("agent-search-input")).toBeInTheDocument()
 
 		// Info icon should be visible
-		expect(screen.getByText("chat:modeSelector.title")).toBeInTheDocument()
+		expect(screen.getByText("chat:agentSelector.title")).toBeInTheDocument()
 		const infoIcon = document.querySelector(".codicon-info")
 		expect(infoIcon).toBeInTheDocument()
 	})
@@ -117,7 +117,7 @@ describe("AgentSelector", () => {
 		expect(screen.queryByTestId("agent-search-input")).not.toBeInTheDocument()
 
 		// Info blurb should be visible
-		expect(screen.getByText(/chat:modeSelector.description/)).toBeInTheDocument()
+		expect(screen.getByText(/chat:agentSelector.description/)).toBeInTheDocument()
 
 		// Info icon should NOT be visible
 		const infoIcon = document.querySelector(".codicon-info")
@@ -174,7 +174,7 @@ describe("AgentSelector", () => {
 		expect(screen.queryByTestId("agent-search-input")).not.toBeInTheDocument()
 
 		// Info blurb should be visible instead
-		expect(screen.getByText(/chat:modeSelector.description/)).toBeInTheDocument()
+		expect(screen.getByText(/chat:agentSelector.description/)).toBeInTheDocument()
 
 		// Info icon should NOT be visible
 		const infoIcon = document.querySelector(".codicon-info")

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

@@ -21,16 +21,48 @@ vi.mock("@/components/ui", () => ({
 	StandardTooltip: ({ children, content }: any) => <div title={content}>{children}</div>,
 }))
 
-// Mock ModeSelector
-vi.mock("../ModeSelector", () => ({
+// Mock AgentSelector
+vi.mock("../AgentSelector", () => ({
 	default: ({ value, onChange, title }: any) => (
-		<select value={value} onChange={(e) => onChange(e.target.value)} title={title}>
+		<select value={value} onChange={(e) => onChange(e.target.value)} title={title || "chat:selectAgent"}>
 			<option value="code">Code</option>
 			<option value="architect">Architect</option>
 		</select>
 	),
 }))
 
+// Mock ExtensionStateContext
+vi.mock("@/context/ExtensionStateContext", () => ({
+	useExtensionState: () => ({
+		hasOpenedModeSelector: false,
+		setHasOpenedModeSelector: vi.fn(),
+	}),
+}))
+
+// Mock other dependencies
+vi.mock("@/utils/vscode", () => ({
+	vscode: {
+		postMessage: vi.fn(),
+	},
+}))
+
+vi.mock("@/components/ui/hooks/useRooPortal", () => ({
+	useRooPortal: () => document.body,
+}))
+
+vi.mock("@/utils/TelemetryClient", () => ({
+	telemetryClient: {
+		capture: vi.fn(),
+	},
+}))
+
+vi.mock("@roo/modes", () => ({
+	getAllModes: () => [
+		{ slug: "code", name: "Code", description: "Code mode" },
+		{ slug: "architect", name: "Architect", description: "Architect mode" },
+	],
+}))
+
 describe("EditAgentControls", () => {
 	const defaultProps = {
 		mode: "code" as Mode,
@@ -52,8 +84,8 @@ describe("EditAgentControls", () => {
 	it("renders all controls correctly", () => {
 		render(<EditAgentControls {...defaultProps} />)
 
-		// Check for mode selector
-		expect(screen.getByTitle("chat:selectMode")).toBeInTheDocument()
+		// Check for agent selector
+		expect(screen.getByTitle("chat:selectAgent")).toBeInTheDocument()
 
 		// Check for Cancel button
 		expect(screen.getByText("Cancel")).toBeInTheDocument()
@@ -130,8 +162,8 @@ describe("EditAgentControls", () => {
 	it("calls onModeChange when mode is changed", () => {
 		render(<EditAgentControls {...defaultProps} />)
 
-		const modeSelector = screen.getByTitle("chat:selectMode")
-		fireEvent.change(modeSelector, { target: { value: "architect" } })
+		const agentSelector = screen.getByTitle("chat:selectAgent")
+		fireEvent.change(agentSelector, { target: { value: "architect" } })
 
 		expect(defaultProps.onModeChange).toHaveBeenCalledWith("architect")
 	})