fix(ui): make UI language change consistent (#2185)

.roo/rules-translate/001-general-rules.md

@@ -30,7 +30,10 @@
 # 4. WEBVIEW UI LOCALIZATION (webview-ui/src/)
 
 - Located in webview-ui/src/i18n/locales/
-- Uses standard React i18next patterns with the useTranslation hook
+- Use react-i18next's `useTranslation` and `Trans` (`import { Trans, useTranslation } from "react-i18next"`):
+    - Always pass the component's `t` to `Trans` (`<Trans t={t} i18nKey="..." />`); `Trans` does not follow language changes on its own (ESLint enforces this)
+    - Never use the global `t` from `i18next` (`i18next.t`); memoized output would keep showing the previous language after a switch (ESLint enforces this). Pass `t` to helpers instead, as `utils/format.ts` and `utils/validate.ts` do
+- `useTranslation()` takes fully qualified keys (`t("chat:about")`); `useTranslation("chat")` also takes keys relative to that namespace (`t("about")`); fully qualified keys still work
 - All user interface strings should be internationalized
 - Always use the Trans component with named components for text with embedded components
 
@@ -40,6 +43,7 @@
 
 ```
   <Trans
+    t={t}
     i18nKey="welcome:telemetry.changeSettings"
     components={{
       settingsLink: <VSCodeLink href="#" onClick={handleOpenSettings} />

.roo/skills/roo-translation/SKILL.md

@@ -70,7 +70,10 @@ This guidance file is loaded at runtime and should be consulted for the latest b
 ## WebView UI Localization (webview-ui/src/)
 
 - Located in `webview-ui/src/i18n/locales/`
-- Uses standard React i18next patterns with the `useTranslation` hook
+- Use react-i18next's `useTranslation` and `Trans` (`import { Trans, useTranslation } from "react-i18next"`):
+    - Always pass the component's `t` to `Trans` (`<Trans t={t} i18nKey="..." />`); `Trans` does not follow language changes on its own (ESLint enforces this)
+    - Never use the global `t` from `i18next` (`i18next.t`); memoized output would keep showing the previous language after a switch (ESLint enforces this). Pass `t` to helpers instead, as `utils/format.ts` and `utils/validate.ts` do
+- `useTranslation()` takes fully qualified keys (`t("chat:about")`); `useTranslation("chat")` also takes keys relative to that namespace (`t("about")`); fully qualified keys still work
 - All user interface strings should be internationalized
 - Always use the `Trans` component with named components for text with embedded components
 
@@ -86,6 +89,7 @@ React component usage:
 
 ```tsx
 <Trans
+	t={t}
 	i18nKey="welcome:telemetry.changeSettings"
 	components={{
 		settingsLink: <VSCodeLink href="#" onClick={handleOpenSettings} />,

webview-ui/eslint.config.mjs

@@ -40,6 +40,40 @@ export default [
 			"no-case-declarations": "off",
 		},
 	},
+	{
+		// Translations must come from the component's `t` (react-i18next's `useTranslation`), which changes
+		// identity on a language switch; the global `t` gives React (and React Compiler caches) nothing to
+		// invalidate on, so memoized output would keep the previous language.
+		files: ["src/**/*.{ts,tsx}"],
+		ignores: ["src/i18n/**"],
+		rules: {
+			"no-restricted-imports": [
+				"error",
+				{
+					paths: [
+						{
+							name: "i18next",
+							importNames: ["t"],
+							message:
+								"Use t from react-i18next's useTranslation so memoized output follows language changes.",
+						},
+					],
+				},
+			],
+			"no-restricted-syntax": [
+				"error",
+				{
+					selector: "MemberExpression[object.name='i18next'][property.name='t']",
+					message: "Use t from react-i18next's useTranslation so memoized output follows language changes.",
+				},
+				{
+					selector: "JSXOpeningElement[name.name='Trans']:not(:has(JSXAttribute[name.name='t']))",
+					message:
+						"Pass t={t} from useTranslation: Trans does not subscribe to language changes, so a cached <Trans> keeps the previous language.",
+				},
+			],
+		},
+	},
 	{
 		files: ["src/__mocks__/**/*.js"],
 		rules: {

webview-ui/playwright/AppProviders.tsx

@@ -4,10 +4,8 @@ import { I18nextProvider } from "react-i18next"
 import { providerIdentifiers } from "@roo-code/types"
 
 import { ExtensionStateContextProvider } from "@/context/ExtensionStateContext"
-import TranslationProvider from "@/i18n/TranslationContext"
 import i18next, { loadTranslations } from "@/i18n/setup"
 import { TooltipProvider } from "@/components/ui/tooltip"
-import { TranslationContext as PlaywrightTranslationContext } from "@src/i18n/TranslationContext"
 
 loadTranslations()
 
@@ -42,16 +40,11 @@ export function AppProviders({ children, initialState }: AppProvidersProps) {
 	return (
 		<I18nextProvider i18n={i18next}>
 			<ExtensionStateContextProvider initialState={{ ...defaultInitialState, ...initialState }}>
-				<TranslationProvider>
-					<PlaywrightTranslationContext.Provider
-						value={{ t: (key, options) => i18next.t(key, options), i18n: i18next }}>
-						<QueryClientProvider client={queryClient}>
-							<TooltipProvider>
-								<div data-testid="ct-app-shell">{children}</div>
-							</TooltipProvider>
-						</QueryClientProvider>
-					</PlaywrightTranslationContext.Provider>
-				</TranslationProvider>
+				<QueryClientProvider client={queryClient}>
+					<TooltipProvider>
+						<div data-testid="ct-app-shell">{children}</div>
+					</TooltipProvider>
+				</QueryClientProvider>
 			</ExtensionStateContextProvider>
 		</I18nextProvider>
 	)

webview-ui/playwright/vite.config.ts

@@ -48,10 +48,6 @@ export default defineConfig({
 				find: "@src/context/ExtensionStateContext",
 				replacement: path.resolve(dirname, "ExtensionStateContext.tsx"),
 			},
-			{
-				find: "@src/i18n/TranslationContext",
-				replacement: path.resolve(dirname, "TranslationContext.ts"),
-			},
 			{ find: "@", replacement: path.resolve(webviewRoot, "src") },
 			{ find: "@src", replacement: path.resolve(webviewRoot, "src") },
 			{ find: "@roo", replacement: path.resolve(webviewRoot, "../src/shared") },

webview-ui/src/App.tsx

@@ -4,7 +4,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 
 import { type ExtensionMessage, TelemetryEventName } from "@roo-code/types"
 
-import TranslationProvider from "./i18n/TranslationContext"
+import "./i18n/setup"
 import { MarketplaceViewStateManager } from "./components/marketplace/MarketplaceViewStateManager"
 
 import { vscode } from "./utils/vscode"
@@ -344,13 +344,11 @@ const queryClient = new QueryClient()
 const AppWithProviders = () => (
 	<ErrorBoundary>
 		<ExtensionStateContextProvider>
-			<TranslationProvider>
-				<QueryClientProvider client={queryClient}>
-					<TooltipProvider delayDuration={STANDARD_TOOLTIP_DELAY}>
-						<App />
-					</TooltipProvider>
-				</QueryClientProvider>
-			</TranslationProvider>
+			<QueryClientProvider client={queryClient}>
+				<TooltipProvider delayDuration={STANDARD_TOOLTIP_DELAY}>
+					<App />
+				</TooltipProvider>
+			</QueryClientProvider>
 		</ExtensionStateContextProvider>
 	</ErrorBoundary>
 )

webview-ui/src/__tests__/App.spec.tsx

@@ -114,36 +114,18 @@ vi.mock("react-i18next", () => {
 			MockedComponent.displayName = `withTranslation(${Component.displayName || Component.name || "Component"})`
 			return MockedComponent
 		},
-		Trans: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-		useTranslation: () => {
-			return {
-				t: tFunction,
-				i18n: {
-					t: tFunction,
-					changeLanguage: vi.fn(() => Promise.resolve()),
-				},
-			}
-		},
-		initReactI18next: {
-			type: "3rdParty",
-			init: vi.fn(),
-		},
-	}
-})
-
-// Mock TranslationProvider to pass through children
-vi.mock("@src/i18n/TranslationContext", () => {
-	const tFunction = (key: string) => key
-	return {
-		__esModule: true,
-		default: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-		useAppTranslation: () => ({
+		useTranslation: () => ({
 			t: tFunction,
 			i18n: {
 				t: tFunction,
 				changeLanguage: vi.fn(() => Promise.resolve()),
 			},
 		}),
+		Trans: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+		initReactI18next: {
+			type: "3rdParty",
+			init: vi.fn(),
+		},
 	}
 })
 

webview-ui/src/__tests__/FileChangesPanel.spec.tsx

@@ -2,7 +2,6 @@ import React from "react"
 import { act } from "@testing-library/react"
 import { fireEvent, render, screen } from "@/utils/test-utils"
 import type { ClineMessage } from "@roo-code/types"
-import { TranslationProvider } from "@/i18n/__mocks__/TranslationContext"
 import FileChangesPanel from "../components/chat/FileChangesPanel"
 
 const mockPostMessage = vi.fn()
@@ -69,11 +68,7 @@ function createFileEditMessage(
 }
 
 function renderPanel(messages: ClineMessage[] | undefined, taskId?: string) {
-	return render(
-		<TranslationProvider>
-			<FileChangesPanel clineMessages={messages} taskId={taskId} />
-		</TranslationProvider>,
-	)
+	return render(<FileChangesPanel clineMessages={messages} taskId={taskId} />)
 }
 
 describe("FileChangesPanel", () => {
@@ -333,11 +328,7 @@ describe("FileChangesPanel", () => {
 			expandRow()
 			expect(requestsOfType("readOriginalContent")).toHaveLength(1)
 
-			rerender(
-				<TranslationProvider>
-					<FileChangesPanel clineMessages={messages} taskId="task-1" />
-				</TranslationProvider>,
-			)
+			rerender(<FileChangesPanel clineMessages={messages} taskId="task-1" />)
 			fireEvent.click(screen.getByTestId("accordian-toggle"))
 
 			const requests = requestsOfType("readOriginalContent")
@@ -347,11 +338,7 @@ describe("FileChangesPanel", () => {
 
 		it("does not send a duplicate request when switching A -> B -> A before the first response arrives", () => {
 			const messages = [createEditWithOriginal({ originalContentLength: 5000 })]
-			const panel = (taskId: string) => (
-				<TranslationProvider>
-					<FileChangesPanel clineMessages={messages} taskId={taskId} />
-				</TranslationProvider>
-			)
+			const panel = (taskId: string) => <FileChangesPanel clineMessages={messages} taskId={taskId} />
 			const { rerender } = renderPanel(messages, "task-A")
 			expandRow()
 			expect(requestsOfType("readOriginalContent")).toHaveLength(1)
@@ -372,11 +359,7 @@ describe("FileChangesPanel", () => {
 
 		it("requests again after a response that arrived for a task that is no longer current", () => {
 			const messages = [createEditWithOriginal({ originalContentLength: 5000 })]
-			const panel = (taskId: string) => (
-				<TranslationProvider>
-					<FileChangesPanel clineMessages={messages} taskId={taskId} />
-				</TranslationProvider>
-			)
+			const panel = (taskId: string) => <FileChangesPanel clineMessages={messages} taskId={taskId} />
 			const { rerender } = renderPanel(messages, "task-A")
 			expandRow()
 
@@ -397,11 +380,7 @@ describe("FileChangesPanel", () => {
 			expandRow()
 			mockPostMessage.mockClear()
 
-			rerender(
-				<TranslationProvider>
-					<FileChangesPanel clineMessages={messages} taskId="task-B" />
-				</TranslationProvider>,
-			)
+			rerender(<FileChangesPanel clineMessages={messages} taskId="task-B" />)
 
 			expect(mockPostMessage).not.toHaveBeenCalled()
 		})
@@ -417,11 +396,7 @@ describe("FileChangesPanel", () => {
 			})
 			expect(requestsOfType("readOriginalContent")).toHaveLength(1)
 
-			rerender(
-				<TranslationProvider>
-					<FileChangesPanel clineMessages={[...first]} taskId="task-A" />
-				</TranslationProvider>,
-			)
+			rerender(<FileChangesPanel clineMessages={[...first]} taskId="task-A" />)
 			fireEvent.click(screen.getByTestId("accordian-toggle"))
 			respond({ type: "fileContent", fileContent: { path: "src/foo.ts", content: "new line\n" } })
 

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

@@ -1,9 +1,8 @@
 import { memo, type MouseEvent, type ReactNode, useState } from "react"
-import { Trans } from "react-i18next"
 import { SiDiscord, SiReddit, SiX } from "react-icons/si"
 
 import { Package } from "@roo/package"
-import { useAppTranslation } from "@src/i18n/TranslationContext"
+import { Trans, useTranslation } from "react-i18next"
 import { vscode } from "@src/utils/vscode"
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@src/components/ui"
 import { EXTERNAL_LINKS } from "@src/constants/externalLinks"
@@ -24,7 +23,7 @@ interface AnnouncementProps {
  */
 
 const Announcement = ({ hideAnnouncement }: AnnouncementProps) => {
-	const { t } = useAppTranslation()
+	const { t } = useTranslation()
 	const [open, setOpen] = useState(true)
 
 	return (
@@ -72,7 +71,7 @@ const Announcement = ({ hideAnnouncement }: AnnouncementProps) => {
 					</div>
 
 					<div className="mt-3 text-sm text-center text-vscode-descriptionForeground">
-						<Trans i18nKey="chat:announcement.support" components={{ githubLink: <GitHubLink /> }} />
+						<Trans t={t} i18nKey="chat:announcement.support" components={{ githubLink: <GitHubLink /> }} />
 					</div>
 				</div>
 			</DialogContent>

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

@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils"
 import { enabledSelectorTriggerClassName, selectorTriggerClassName } from "@/components/ui/selectorTriggerStyles"
 import { useRooPortal } from "@/components/ui/hooks/useRooPortal"
 import { Popover, PopoverContent, PopoverTrigger, StandardTooltip } from "@/components/ui"
-import { useAppTranslation } from "@/i18n/TranslationContext"
+import { useTranslation } from "react-i18next"
 import { vscode } from "@/utils/vscode"
 import { Button } from "@/components/ui"
 
@@ -38,7 +38,7 @@ export const ApiConfigSelector = ({
 	lockApiConfigAcrossModes,
 	onToggleLockApiConfig,
 }: ApiConfigSelectorProps) => {
-	const { t } = useAppTranslation()
+	const { t } = useTranslation()
 	const [open, setOpen] = useState(false)
 	const [searchValue, setSearchValue] = useState("")
 	const portalContainer = useRooPortal("roo-portal")

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

@@ -8,7 +8,7 @@ import { enabledSelectorTriggerClassName, selectorTriggerClassName } from "@/com
 
 import { useExtensionState } from "@/context/ExtensionStateContext"
 
-import { useAppTranslation } from "@/i18n/TranslationContext"
+import { useTranslation } from "react-i18next"
 
 import { useAutoApprovalToggles } from "@/hooks/useAutoApprovalToggles"
 import { useAutoApprovalState } from "@/hooks/useAutoApprovalState"
@@ -27,7 +27,7 @@ interface AutoApproveDropdownProps {
 export const AutoApproveDropdown = ({ disabled = false, triggerClassName = "" }: AutoApproveDropdownProps) => {
 	const [open, setOpen] = React.useState(false)
 	const portalContainer = useRooPortal("roo-portal")
-	const { t } = useAppTranslation()
+	const { t } = useTranslation()
 
 	const {
 		autoApprovalEnabled,