feat: add 'Masquerade as Roo Code' setting (3.53.3)

Adds a checkbox under Settings \u2192 UI that dynamically flips the visible name and runtime-swappable icons back to upstream Roo Code branding. Default remains CRC.

Implementation

- New globalSettingsSchema field masqueradeAsRooCode: boolean (default false)

- Webview + extension-host i18next 'brand' post-processor rewrites \bCRC\b \u2192 'Roo Code' when enabled; TranslationContext emits languageChanged so useTranslation and <Trans> consumers re-render

- UI subcategory gains a SearchableSetting bound to cachedState (not live state) per the SettingsView pattern; SettingsView passes masqueradeAsRooCode and includes it in the updateSettings payload

- Non-i18n hardcoded CRC strings moved to translations (Roo.tsx serviceName, Bedrock discovery description, ImageGenerationSettings dropdown, RooHero alt text); ApiOptions PROVIDERS label transformed via new brand helper

- Logo swap: new src/assets/images/roo-code-logo.svg (upstream mark) used when the flag is on; panel-{light,dark}-roo.svg variants applied to the editor-tab WebviewPanel.iconPath; tab title + HTML <title> pick CRC or Roo Code based on the setting, with live refresh via refreshTabPanelBrandAssets

- Tests: new vitest specs for brand post-processor (webview + host) and an expanded UISettings.spec covering the new checkbox; existing TranslationContext + CloudUpsellDialog mocks updated

Scope limitation

VS Code reads the activity-bar icon/title, marketplace display name, sidebar view name, and command-palette category prefix from src/package.nls.json at activation and cannot swap them at runtime; this is documented in the setting's own description.

Co-Authored-By: Oz <oz-agent@warp.dev>

Author: allquixotic

packages/types/src/global-settings.ts

@@ -210,6 +210,14 @@ export const globalSettingsSchema = z.object({
 	 */
 	enterBehavior: z.enum(["send", "newline"]).optional(),
 	defaultRenderContext: z.enum(["sidebar", "editor"]).optional(),
+	/**
+	 * When enabled, the extension displays "Roo Code" branding in all runtime-rendered UI
+	 * surfaces (webview translations, logos, webview panel title/icon) instead of "CRC".
+	 * Static VS Code manifest surfaces (activity bar icon, marketplace name, command palette
+	 * category prefix) are unaffected because they are read from package.nls.json at activation.
+	 * @default false
+	 */
+	masqueradeAsRooCode: z.boolean().optional(),
 	profileThresholds: z.record(z.string(), z.number()).optional(),
 	hasOpenedModeSelector: z.boolean().optional(),
 	lastModeExportPath: z.string().optional(),

packages/types/src/vscode-extension-host.ts

@@ -320,6 +320,7 @@ export type ExtensionState = Pick<
 	| "maxGitStatusFiles"
 	| "autoImportSettingsOnStartup"
 	| "defaultRenderContext"
+	| "masqueradeAsRooCode"
 	| "requestDelaySeconds"
 	| "showWorktreesInHomeScreen"
 	| "disabledTools"

src/activate/registerCommands.ts

@@ -31,6 +31,49 @@ export function getVisibleProviderOrLog(outputChannel: vscode.OutputChannel): Cl
 let sidebarPanel: vscode.WebviewView | undefined = undefined
 let tabPanel: vscode.WebviewPanel | undefined = undefined
 
+/**
+ * Returns the title string that should be used for the editor-tab webview
+ * panel, honoring the "Masquerade as Roo Code" setting.
+ */
+function getTabPanelTitle(contextProxy: ContextProxy): string {
+	const masquerade = contextProxy.getValue("masqueradeAsRooCode") ?? false
+	return masquerade ? "Roo Code" : "CRC"
+}
+
+/**
+ * Returns the `WebviewPanel.iconPath` that should be used for the editor-tab
+ * webview panel, honoring the "Masquerade as Roo Code" setting.
+ */
+function getTabPanelIconPath(
+	extensionUri: vscode.Uri,
+	contextProxy: ContextProxy,
+): { light: vscode.Uri; dark: vscode.Uri } {
+	const masquerade = contextProxy.getValue("masqueradeAsRooCode") ?? false
+	const lightIcon = masquerade ? "panel-light-roo.svg" : "panel-light.svg"
+	const darkIcon = masquerade ? "panel-dark-roo.svg" : "panel-dark.svg"
+	return {
+		light: vscode.Uri.joinPath(extensionUri, "assets", "icons", lightIcon),
+		dark: vscode.Uri.joinPath(extensionUri, "assets", "icons", darkIcon),
+	}
+}
+
+/**
+ * Refresh the editor-tab panel title + icon to match the current value of the
+ * "Masquerade as Roo Code" setting. Safe to call any number of times and a
+ * no-op when no tab panel is currently open.
+ */
+export function refreshTabPanelBrandAssets(extensionUri: vscode.Uri, contextProxy: ContextProxy): void {
+	if (!tabPanel) {
+		return
+	}
+	try {
+		tabPanel.title = getTabPanelTitle(contextProxy)
+		tabPanel.iconPath = getTabPanelIconPath(extensionUri, contextProxy)
+	} catch {
+		// Panel may have just been disposed; ignore.
+	}
+}
+
 /**
  * Get the currently active panel
  * @returns WebviewPanel或WebviewView
@@ -218,19 +261,21 @@ export const openClineInNewTab = async ({ context, outputChannel }: Omit<Registe
 
 	const targetCol = hasVisibleEditors ? Math.max(lastCol + 1, 1) : vscode.ViewColumn.Two
 
-	const newPanel = vscode.window.createWebviewPanel(ClineProvider.tabPanelId, "CRC", targetCol, {
-		enableScripts: true,
-		retainContextWhenHidden: true,
-		localResourceRoots: [context.extensionUri],
-	})
+	const newPanel = vscode.window.createWebviewPanel(
+		ClineProvider.tabPanelId,
+		getTabPanelTitle(contextProxy),
+		targetCol,
+		{
+			enableScripts: true,
+			retainContextWhenHidden: true,
+			localResourceRoots: [context.extensionUri],
+		},
+	)
 
 	// Save as tab type panel.
 	setPanel(newPanel, "tab")
 
-	newPanel.iconPath = {
-		light: vscode.Uri.joinPath(context.extensionUri, "assets", "icons", "panel-light.svg"),
-		dark: vscode.Uri.joinPath(context.extensionUri, "assets", "icons", "panel-dark.svg"),
-	}
+	newPanel.iconPath = getTabPanelIconPath(context.extensionUri, contextProxy)
 
 	await tabProvider.resolveWebviewView(newPanel)
 

src/assets/icons/panel-dark-roo.svg

@@ -82,9 +82,9 @@ import {
 	shouldRedirectSidebarToEditor,
 } from "../../utils/renderContext"
 
-import { setPanel } from "../../activate/registerCommands"
+import { setPanel, refreshTabPanelBrandAssets } from "../../activate/registerCommands"
 
-import { t } from "../../i18n"
+import { t, setMasqueradeMode as setHostMasqueradeMode } from "../../i18n"
 
 import { buildApiHandler } from "../../api"
 import { forceFullModelDetailsLoad, hasLoadedFullDetails } from "../../api/providers/fetchers/lmstudio"
@@ -1485,6 +1485,7 @@ export class ClineProvider
 
 		const file = "src/index.tsx"
 		const scriptUri = `http://${localServerUrl}/${file}`
+		const docTitle = (this.contextProxy.getValue("masqueradeAsRooCode") ?? false) ? "Roo Code" : "CRC"
 
 		const reactRefresh = /*html*/ `
 			<script nonce="${nonce}" type="module">
@@ -1520,7 +1521,7 @@ export class ClineProvider
 						window.AUDIO_BASE_URI = "${audioUri}"
 						window.MATERIAL_ICONS_BASE_URI = "${materialIconsUri}"
 					</script>
-					<title>CRC</title>
+					<title>${docTitle}</title>
 				</head>
 				<body>
 					<div id="root"></div>
@@ -1563,6 +1564,7 @@ export class ClineProvider
 		])
 		const imagesUri = getUri(webview, this.contextProxy.extensionUri, ["assets", "images"])
 		const audioUri = getUri(webview, this.contextProxy.extensionUri, ["webview-ui", "audio"])
+		const docTitle = (this.contextProxy.getValue("masqueradeAsRooCode") ?? false) ? "Roo Code" : "CRC"
 
 		// Use a nonce to only allow a specific script to be run.
 		/*
@@ -1599,7 +1601,7 @@ export class ClineProvider
 				window.AUDIO_BASE_URI = "${audioUri}"
 				window.MATERIAL_ICONS_BASE_URI = "${materialIconsUri}"
 			</script>
-            <title>CRC</title>
+            <title>${docTitle}</title>
           </head>
           <body>
             <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -2305,6 +2307,12 @@ export class ClineProvider
 		const taskStateSeq = ++this.clineMessagesSeq
 		const state = await this.getStateToPostToWebview()
 		state.clineMessagesSeq = taskStateSeq
+		// Keep the extension-host i18n post-processor in sync with the user's
+		// "Masquerade as Roo Code" setting so that any t(...) calls executed in
+		// the host (VS Code notifications, error toasts, etc.) render with the
+		// user's chosen branding.
+		setHostMasqueradeMode(state.masqueradeAsRooCode ?? false)
+		refreshTabPanelBrandAssets(this.context.extensionUri, this.contextProxy)
 		this.postMessageToWebview({ type: "state", state })
 
 		// Check MDM compliance and send user to account tab if not compliant
@@ -2545,6 +2553,7 @@ export class ClineProvider
 			openRouterImageApiKey,
 			openRouterImageGenerationSelectedModel,
 			defaultRenderContext,
+			masqueradeAsRooCode,
 			lockApiConfigAcrossModes,
 		} = await this.getState()
 
@@ -2675,6 +2684,7 @@ export class ClineProvider
 			historyPreviewCollapsed: historyPreviewCollapsed ?? false,
 			reasoningBlockCollapsed: reasoningBlockCollapsed ?? true,
 			enterBehavior: enterBehavior ?? "send",
+			masqueradeAsRooCode: masqueradeAsRooCode ?? false,
 			cloudUserInfo,
 			cloudIsAuthenticated: cloudIsAuthenticated ?? false,
 			cloudAuthSkipModel: this.context.globalState.get<boolean>("roo-auth-skip-model") ?? false,
@@ -2896,6 +2906,7 @@ export class ClineProvider
 			reasoningBlockCollapsed: stateValues.reasoningBlockCollapsed ?? true,
 			enterBehavior: stateValues.enterBehavior ?? "send",
 			defaultRenderContext: stateValues.defaultRenderContext ?? "editor",
+			masqueradeAsRooCode: stateValues.masqueradeAsRooCode ?? false,
 			cloudUserInfo,
 			cloudIsAuthenticated,
 			sharingEnabled,

src/assets/icons/panel-light-roo.svg

@@ -0,0 +1,43 @@
+import { describe, it, expect, beforeEach } from "vitest"
+
+import i18next, { setMasqueradeMode, applyBrandMasquerade } from "../setup"
+
+describe("extension-host brand masquerade", () => {
+	beforeEach(() => {
+		setMasqueradeMode(false)
+		i18next.addResourceBundle(
+			"en",
+			"brandTest",
+			{
+				auth: "Sign in to CRC Cloud to continue",
+				storage: "Default path: D:\\CRCStorage",
+			},
+			true,
+			true,
+		)
+	})
+
+	it("pure transform leaves input unchanged when flag is off", () => {
+		expect(applyBrandMasquerade("Welcome to CRC!", false)).toBe("Welcome to CRC!")
+	})
+
+	it("pure transform swaps standalone CRC tokens", () => {
+		expect(applyBrandMasquerade("Welcome to CRC!", true)).toBe("Welcome to Roo Code!")
+	})
+
+	it("i18next output is branded when masquerade is on", () => {
+		setMasqueradeMode(true)
+		expect(i18next.t("brandTest:auth")).toBe("Sign in to Roo Code Cloud to continue")
+	})
+
+	it("i18next output preserves embedded CRC occurrences", () => {
+		setMasqueradeMode(true)
+		expect(i18next.t("brandTest:storage")).toBe("Default path: D:\\CRCStorage")
+	})
+
+	it("toggling off restores the original translation", () => {
+		setMasqueradeMode(true)
+		setMasqueradeMode(false)
+		expect(i18next.t("brandTest:auth")).toBe("Sign in to CRC Cloud to continue")
+	})
+})

src/assets/images/roo-code-logo.svg

@@ -1,5 +1,7 @@
 import i18next from "./setup"
 
+export { setMasqueradeMode, applyBrandMasquerade } from "./setup"
+
 /**
  * Initialize i18next with the specified language
  *

src/core/webview/ClineProvider.ts

@@ -1,5 +1,35 @@
 import i18next from "i18next"
 
+/**
+ * Runtime flag for the "Masquerade as Roo Code" setting. The extension host
+ * updates this flag whenever the setting is read from the context proxy so
+ * that VS Code notifications / error messages emitted via `t(...)` reflect the
+ * current branding without requiring a reload.
+ */
+let masqueradeMode = false
+
+export function setMasqueradeMode(enabled: boolean): void {
+	masqueradeMode = enabled
+}
+
+export function applyBrandMasquerade(value: string, enabled: boolean = masqueradeMode): string {
+	if (!enabled || typeof value !== "string" || value.length === 0) {
+		return value
+	}
+	return value.replace(/\bCRC\b/g, "Roo Code")
+}
+
+i18next.use({
+	type: "postProcessor",
+	name: "brand",
+	process: (value: unknown) => {
+		if (typeof value !== "string") {
+			return value as any
+		}
+		return applyBrandMasquerade(value)
+	},
+} as any)
+
 // Build translations object
 const translations: Record<string, Record<string, any>> = {}
 
@@ -77,6 +107,7 @@ i18next.init({
 	interpolation: {
 		escapeValue: false,
 	},
+	postProcess: ["brand"],
 })
 
 export default i18next