feat(ExperimentalSettings): add "key configured" placeholder and i18n strings

Author: edelauna

webview-ui/src/components/settings/ExperimentalSettings.tsx

@@ -21,7 +21,7 @@ type ExperimentalSettingsProps = HTMLAttributes<HTMLDivElement> & {
 	apiConfiguration?: any
 	setApiConfigurationField?: any
 	imageGenerationProvider?: ImageGenerationProvider
-	openRouterImageApiKey?: string
+	openRouterImageApiKeyConfigured: boolean
 	openRouterImageGenerationSelectedModel?: string
 	setImageGenerationProvider?: (provider: ImageGenerationProvider) => void
 	setOpenRouterImageApiKey?: (apiKey: string) => void
@@ -34,7 +34,7 @@ export const ExperimentalSettings = ({
 	apiConfiguration,
 	setApiConfigurationField,
 	imageGenerationProvider,
-	openRouterImageApiKey,
+	openRouterImageApiKeyConfigured,
 	openRouterImageGenerationSelectedModel,
 	setImageGenerationProvider,
 	setOpenRouterImageApiKey,
@@ -74,7 +74,7 @@ export const ExperimentalSettings = ({
 											setExperimentEnabled(EXPERIMENT_IDS.IMAGE_GENERATION, enabled)
 										}
 										imageGenerationProvider={imageGenerationProvider}
-										openRouterImageApiKey={openRouterImageApiKey}
+										openRouterImageApiKeyConfigured={openRouterImageApiKeyConfigured}
 										openRouterImageGenerationSelectedModel={openRouterImageGenerationSelectedModel}
 										setImageGenerationProvider={setImageGenerationProvider}
 										setOpenRouterImageApiKey={setOpenRouterImageApiKey}

webview-ui/src/components/settings/ImageGenerationSettings.tsx

@@ -7,7 +7,7 @@ interface ImageGenerationSettingsProps {
 	enabled: boolean
 	onChange: (enabled: boolean) => void
 	imageGenerationProvider?: ImageGenerationProvider
-	openRouterImageApiKey?: string
+	openRouterImageApiKeyConfigured: boolean
 	openRouterImageGenerationSelectedModel?: string
 	setImageGenerationProvider: (provider: ImageGenerationProvider) => void
 	setOpenRouterImageApiKey: (apiKey: string) => void
@@ -18,7 +18,7 @@ export const ImageGenerationSettings = ({
 	enabled,
 	onChange,
 	imageGenerationProvider,
-	openRouterImageApiKey,
+	openRouterImageApiKeyConfigured,
 	openRouterImageGenerationSelectedModel,
 	setImageGenerationProvider,
 	setOpenRouterImageApiKey,
@@ -88,7 +88,7 @@ export const ImageGenerationSettings = ({
 	}
 
 	const requiresApiKey = currentProvider === "openrouter"
-	const isConfigured = !requiresApiKey || (requiresApiKey && openRouterImageApiKey)
+	const isConfigured = !requiresApiKey || openRouterImageApiKeyConfigured
 
 	return (
 		<div className="space-y-4">
@@ -133,9 +133,14 @@ export const ImageGenerationSettings = ({
 								{t("settings:experimental.IMAGE_GENERATION.openRouterApiKeyLabel")}
 							</label>
 							<VSCodeTextField
-								value={openRouterImageApiKey || ""}
 								onInput={(e: any) => handleApiKeyChange(e.target.value)}
-								placeholder={t("settings:experimental.IMAGE_GENERATION.openRouterApiKeyPlaceholder")}
+								placeholder={
+									openRouterImageApiKeyConfigured
+										? t(
+												"settings:experimental.IMAGE_GENERATION.openRouterApiKeyConfiguredPlaceholder",
+											)
+										: t("settings:experimental.IMAGE_GENERATION.openRouterApiKeyPlaceholder")
+								}
 								className="w-full"
 								type="password"
 							/>

webview-ui/src/components/settings/__tests__/ImageGenerationSettings.spec.tsx

@@ -19,7 +19,7 @@ describe("ImageGenerationSettings", () => {
 		enabled: false,
 		onChange: mockOnChange,
 		imageGenerationProvider: undefined,
-		openRouterImageApiKey: undefined,
+		openRouterImageApiKeyConfigured: false,
 		openRouterImageGenerationSelectedModel: undefined,
 		setImageGenerationProvider: mockSetImageGenerationProvider,
 		setOpenRouterImageApiKey: mockSetOpenRouterImageApiKey,
@@ -44,7 +44,7 @@ describe("ImageGenerationSettings", () => {
 			render(
 				<ImageGenerationSettings
 					{...defaultProps}
-					openRouterImageApiKey="existing-key"
+					openRouterImageApiKeyConfigured={true}
 					openRouterImageGenerationSelectedModel="google/gemini-2.5-flash-image"
 				/>,
 			)
@@ -90,6 +90,21 @@ describe("ImageGenerationSettings", () => {
 			).toBeInTheDocument()
 		})
 
+		it("should show configured placeholder when openRouterImageApiKeyConfigured is true", () => {
+			const { getByPlaceholderText } = render(
+				<ImageGenerationSettings
+					{...defaultProps}
+					enabled={true}
+					imageGenerationProvider="openrouter"
+					openRouterImageApiKeyConfigured={true}
+				/>,
+			)
+
+			expect(
+				getByPlaceholderText("settings:experimental.IMAGE_GENERATION.openRouterApiKeyConfiguredPlaceholder"),
+			).toBeInTheDocument()
+		})
+
 		it("should not render API key field when provider is roo", () => {
 			const { queryByPlaceholderText } = render(
 				<ImageGenerationSettings {...defaultProps} enabled={true} imageGenerationProvider="roo" />,

webview-ui/src/i18n/locales/ca/settings.json

@@ -866,6 +866,7 @@
 			"providerDescription": "Select which provider to use for image generation.",
 			"openRouterApiKeyLabel": "OpenRouter API Key",
 			"openRouterApiKeyPlaceholder": "Enter your OpenRouter API key",
+			"openRouterApiKeyConfiguredPlaceholder": "API key configured — type to replace",
 			"getApiKeyText": "Get your API key from",
 			"modelSelectionLabel": "Image Generation Model",
 			"modelSelectionDescription": "Select the model to use for image generation",