fix: improve lock icon visibility in API config popover

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

@@ -232,16 +232,39 @@ export const ApiConfigSelector = ({
 								onClick={handleEditClick}
 								tooltip={false}
 							/>
-							<IconButton
-								iconClass={lockApiConfigAcrossModes ? "codicon-lock" : "codicon-unlock"}
-								title={
+							<StandardTooltip
+								content={
 									lockApiConfigAcrossModes
 										? t("chat:unlockApiConfigAcrossModes")
 										: t("chat:lockApiConfigAcrossModes")
-								}
-								className={lockApiConfigAcrossModes ? "text-vscode-focusBorder" : "opacity-60"}
-								onClick={onToggleLockApiConfig}
-							/>
+								}>
+								<Button
+									aria-label={
+										lockApiConfigAcrossModes
+											? t("chat:unlockApiConfigAcrossModes")
+											: t("chat:lockApiConfigAcrossModes")
+									}
+									className={cn(
+										"inline-flex items-center gap-1 px-1.5 py-1 h-7 rounded-md text-xs",
+										"bg-transparent border-none cursor-pointer",
+										"transition-all duration-150",
+										"hover:bg-[rgba(255,255,255,0.06)]",
+										"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
+										lockApiConfigAcrossModes
+											? "text-vscode-focusBorder opacity-100"
+											: "text-vscode-descriptionForeground opacity-90 hover:opacity-100",
+									)}
+									onClick={onToggleLockApiConfig}>
+									<span
+										className={cn(
+											"codicon",
+											lockApiConfigAcrossModes ? "codicon-lock" : "codicon-unlock",
+										)}
+										style={{ fontSize: 14 }}
+									/>
+									<span>{lockApiConfigAcrossModes ? t("chat:locked") : t("chat:unlocked")}</span>
+								</Button>
+							</StandardTooltip>
 						</div>
 
 						{/* Info icon and title on the right with matching spacing */}

webview-ui/src/components/chat/__tests__/ChatTextArea.lockApiConfig.spec.tsx

@@ -78,8 +78,8 @@ describe("ChatTextArea - lockApiConfigAcrossModes toggle", () => {
 
 			const button = openPopoverAndGetLockToggle("chat:lockApiConfigAcrossModes")
 			expect(button).toBeInTheDocument()
-			// Unlocked state has muted opacity
-			expect(button.className).toContain("opacity-60")
+			// Unlocked state has visible but muted style
+			expect(button.className).toContain("text-vscode-descriptionForeground")
 			expect(button.className).not.toContain("text-vscode-focusBorder")
 		})
 
@@ -95,7 +95,7 @@ describe("ChatTextArea - lockApiConfigAcrossModes toggle", () => {
 			expect(button).toBeInTheDocument()
 			// Locked state has the focus border highlight color
 			expect(button.className).toContain("text-vscode-focusBorder")
-			expect(button.className).not.toContain("opacity-60")
+			expect(button.className).not.toContain("text-vscode-descriptionForeground")
 		})
 
 		it("renders in unlocked state when lockApiConfigAcrossModes is undefined (default)", () => {
@@ -108,7 +108,7 @@ describe("ChatTextArea - lockApiConfigAcrossModes toggle", () => {
 			const button = openPopoverAndGetLockToggle("chat:lockApiConfigAcrossModes")
 			expect(button).toBeInTheDocument()
 			// Default (undefined/falsy) renders in unlocked style
-			expect(button.className).toContain("opacity-60")
+			expect(button.className).toContain("text-vscode-descriptionForeground")
 		})
 	})
 

webview-ui/src/i18n/locales/en/chat.json

@@ -493,5 +493,7 @@
 		"title": "Provider no longer supported",
 		"message": "Sorry, this provider is no longer supported. We saw very few Roo users actually using it and we need to reduce the surface area of our codebase so we can keep shipping fast and serving our community well in this space. It was a really hard decision but it lets us focus on what matters most to you. It sucks, we know.",
 		"openSettings": "Open Settings"
-	}
+	},
+	"locked": "Locked",
+	"unlocked": "Unlocked"
 }