WIP for passing process environment to webview components

Signed-off-by: Geoff Wilson <[email protected]>

Author: suprjinx

src/core/webview/ClineProvider.ts

@@ -395,6 +395,12 @@ export class ClineProvider
 		// and executes code based on the message that is recieved
 		this.setWebviewMessageListener(webviewView.webview)
 
+		// Send process.env to the webview
+		webviewView.webview.postMessage({
+			type: "env",
+			env: process.env,
+		});
+
 		// Subscribe to code index status updates if the manager exists
 		if (this.codeIndexManager) {
 			this.codeIndexStatusSubscription = this.codeIndexManager.onProgressUpdate((update: IndexProgressUpdate) => {

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

@@ -60,6 +60,7 @@ export interface ApiOptionsProps {
 	fromWelcomeView?: boolean
 	errorMessage: string | undefined
 	setErrorMessage: React.Dispatch<React.SetStateAction<string | undefined>>
+	env?: Record<string, string | undefined>
 }
 
 const ApiOptions = ({
@@ -69,6 +70,7 @@ const ApiOptions = ({
 	fromWelcomeView,
 	errorMessage,
 	setErrorMessage,
+	env = {}
 }: ApiOptionsProps) => {
 	const { t } = useAppTranslation()
 
@@ -327,7 +329,10 @@ const ApiOptions = ({
 			)}
 
 			{selectedProvider === "anthropic" && (
-				<Anthropic apiConfiguration={apiConfiguration} setApiConfigurationField={setApiConfigurationField} />
+				<Anthropic 
+					apiConfiguration={apiConfiguration} 
+					setApiConfigurationField={setApiConfigurationField} 
+					env={env} />
 			)}
 
 			{selectedProvider === "openai-native" && (

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

@@ -114,6 +114,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 	const confirmDialogHandler = useRef<() => void>()
 
 	const [cachedState, setCachedState] = useState(extensionState)
+	const [env, setEnv] = useState<Record<string, string | undefined>>({})
 
 	const {
 		alwaysAllowReadOnly,
@@ -407,6 +408,9 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 			if (message.type === "action" && message.action === "didBecomeVisible") {
 				scrollToActiveTab()
 			}
+			if (message.type === "env") {
+				setEnv(message.env)
+			}
 		}
 
 		window.addEventListener("message", handleMessage)
@@ -551,6 +555,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 									setApiConfigurationField={setApiConfigurationField}
 									errorMessage={errorMessage}
 									setErrorMessage={setErrorMessage}
+									env={env}
 								/>
 							</Section>
 						</div>

webview-ui/src/components/settings/__tests__/ApiOptions.test.tsx

@@ -225,6 +225,7 @@ const renderApiOptions = (props: Partial<ApiOptionsProps> = {}) => {
 					uriScheme={undefined}
 					apiConfiguration={{}}
 					setApiConfigurationField={() => {}}
+					env={{}} // Mock environment variables
 					{...props}
 				/>
 			</QueryClientProvider>

webview-ui/src/components/settings/providers/Anthropic.tsx

@@ -12,11 +12,13 @@ import { inputEventTransform, noTransform } from "../transforms"
 type AnthropicProps = {
 	apiConfiguration: ProviderSettings
 	setApiConfigurationField: (field: keyof ProviderSettings, value: ProviderSettings[keyof ProviderSettings]) => void
+	env?: Record<string, string | undefined>
 }
 
-export const Anthropic = ({ apiConfiguration, setApiConfigurationField }: AnthropicProps) => {
+export const Anthropic = ({ apiConfiguration, setApiConfigurationField, env = {}}: AnthropicProps) => {
 	const { t } = useAppTranslation()
-
+	
+	const apiKeyEnvVarExists = !!env["ANTHROPIC_API_KEY"]
 	const [anthropicBaseUrlSelected, setAnthropicBaseUrlSelected] = useState(!!apiConfiguration?.anthropicBaseUrl)
 	const [useApiKeyEnvVar, setUseApiKeyEnvVar] = useState(!!apiConfiguration?.anthropicApiKeyUseEnvVar)
 
@@ -36,11 +38,13 @@ export const Anthropic = ({ apiConfiguration, setApiConfigurationField }: Anthro
 		setApiConfigurationField("anthropicApiKeyUseEnvVar", checked)
 	}
 
+	console.log("Environment from ApiOptions at Anthropic:", env)
+
 	return (
 		<>
 			<VSCodeTextField
-				value={apiConfiguration?.apiKey || ""}
-				type="password"
+				value={env["ANTHROPIC_API_KEY"]}
+				type="text"
 				onInput={handleInputChange("apiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
 				className="w-full"
@@ -54,7 +58,8 @@ export const Anthropic = ({ apiConfiguration, setApiConfigurationField }: Anthro
 			<Checkbox
 				checked={useApiKeyEnvVar}
 				onChange={handleUseApiKeyEnvVarChange}
-				className="mb-2">
+				className="mb-2"
+				disabled={!apiKeyEnvVarExists}>
 				{t("settings:providers.apiKeyUseEnvVar", { name: "ANTHROPIC_API_KEY"})}
 			</Checkbox>
 			{(!(apiConfiguration?.apiKey || apiConfiguration?.anthropicApiKeyUseEnvVar)) && (

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

@@ -135,6 +135,7 @@
 		"openRouterApiKey": "OpenRouter API Key",
 		"getOpenRouterApiKey": "Get OpenRouter API Key",
 		"apiKeyStorageNotice": "API keys are stored securely in VSCode's Secret Storage",
+		"apiKeyUseEnvVar": "Get API key from env var {{name}}",
 		"glamaApiKey": "Glama API Key",
 		"getGlamaApiKey": "Get Glama API Key",
 		"useCustomBaseUrl": "Use custom base URL",