Enhance Azure configuration handling and UI updates (#1289)

.gitignore

@@ -101,3 +101,4 @@ out/
 sqlite.db
 userData/
 .env.local
+.idea/
\ No newline at end of file

e2e-tests/azure_provider_settings.spec.ts

@@ -17,27 +17,45 @@ testWithPo("Azure provider settings UI", async ({ po }) => {
     timeout: 5000,
   });
 
-  // Check that Azure-specific UI is displayed
-  await expect(po.page.getByText("Azure OpenAI Configuration")).toBeVisible();
-  await expect(po.page.getByText("AZURE_API_KEY")).toBeVisible();
-  await expect(po.page.getByText("AZURE_RESOURCE_NAME")).toBeVisible();
+  // Confirm the new configuration form is rendered
+  await expect(
+    po.page.getByText("Azure OpenAI Configuration Required"),
+  ).toBeVisible();
+  await expect(po.page.getByLabel("Resource Name")).toBeVisible();
+  await expect(po.page.getByLabel("API Key")).toBeVisible();
+  await expect(
+    po.page.getByRole("button", { name: "Save Settings" }),
+  ).toBeVisible();
 
-  // Check environment variable status indicators exist
+  // Environment variable helper section should still be available
   await expect(
-    po.page.getByText("Environment Variables Configuration"),
+    po.page.getByText("Environment Variables (optional)"),
   ).toBeVisible();
 
-  // Check setup instructions are present
-  await expect(po.page.getByText("How to configure:")).toBeVisible();
+  // FIX: disambiguate text matches to avoid strict mode violation
   await expect(
-    po.page.getByText("Get your API key from the Azure portal"),
+    po.page.getByText("AZURE_API_KEY", { exact: true }),
   ).toBeVisible();
-  await expect(po.page.getByText("Find your resource name")).toBeVisible();
   await expect(
-    po.page.getByText("Set these environment variables before starting Dyad"),
+    po.page.getByText("AZURE_RESOURCE_NAME", { exact: true }),
   ).toBeVisible();
 
-  // Check that status indicators show "Not Set" (since no env vars are configured in test)
-  const statusElements = po.page.locator(".bg-red-100, .bg-red-800\\/20");
-  await expect(statusElements.first()).toBeVisible();
+  // Since no env vars are configured in the test run, both should read "Not Set"
+  await expect(
+    po.page
+      .getByTestId("azure-api-key-status")
+      .getByText("Not Set", { exact: true }),
+  ).toBeVisible();
+  await expect(
+    po.page
+      .getByTestId("azure-resource-name-status")
+      .getByText("Not Set", { exact: true }),
+  ).toBeVisible();
+
+  // The guidance text should explain precedence between saved settings and environment variables
+  await expect(
+    po.page.getByText(
+      "Values saved in Settings take precedence over environment variables.",
+    ),
+  ).toBeVisible();
 });

src/components/settings/ApiKeyConfiguration.tsx

@@ -32,6 +32,7 @@ interface ApiKeyConfigurationProps {
   onSaveKey: () => Promise<void>;
   onDeleteKey: () => Promise<void>;
   isDyad: boolean;
+  updateSettings: (settings: Partial<UserSettings>) => Promise<UserSettings>;
 }
 
 export function ApiKeyConfiguration({
@@ -47,10 +48,17 @@ export function ApiKeyConfiguration({
   onSaveKey,
   onDeleteKey,
   isDyad,
+  updateSettings,
 }: ApiKeyConfigurationProps) {
   // Special handling for Azure OpenAI which requires environment variables
   if (provider === "azure") {
-    return <AzureConfiguration envVars={envVars} />;
+    return (
+      <AzureConfiguration
+        settings={settings}
+        envVars={envVars}
+        updateSettings={updateSettings}
+      />
+    );
   }
   // Special handling for Google Vertex AI which uses service account credentials
   if (provider === "vertex") {

src/components/settings/ProviderSettingsPage.tsx

@@ -11,7 +11,11 @@ import {} from "@/components/ui/accordion";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
 import { showError } from "@/lib/toast";
-import { UserSettings } from "@/lib/schemas";
+import {
+  UserSettings,
+  AzureProviderSetting,
+  VertexProviderSetting,
+} from "@/lib/schemas";
 
 import { ProviderSettingsHeader } from "./ProviderSettingsHeader";
 import { ApiKeyConfiguration } from "./ApiKeyConfiguration";
@@ -69,20 +73,34 @@ export function ProviderSettingsPage({ provider }: ProviderSettingsPageProps) {
     userApiKey !== "Not Set";
   const hasEnvKey = !!(envVarName && envVars[envVarName]);
 
-  // Special handling for Azure OpenAI configuration
-  const isAzureConfigured =
-    provider === "azure"
-      ? !!(envVars["AZURE_API_KEY"] && envVars["AZURE_RESOURCE_NAME"])
-      : false;
+  const azureSettings = settings?.providerSettings?.azure as
+    | AzureProviderSetting
+    | undefined;
+  const azureApiKeyFromSettings = (azureSettings?.apiKey?.value ?? "").trim();
+  const azureResourceNameFromSettings = (
+    azureSettings?.resourceName ?? ""
+  ).trim();
+  const azureHasSavedSettings = Boolean(
+    azureApiKeyFromSettings && azureResourceNameFromSettings,
+  );
+  const azureHasEnvConfiguration = Boolean(
+    envVars["AZURE_API_KEY"] && envVars["AZURE_RESOURCE_NAME"],
+  );
 
-  // Special handling for Vertex configuration status
-  const vertexSettings = settings?.providerSettings?.vertex as any;
+  const vertexSettings = settings?.providerSettings?.vertex as
+    | VertexProviderSetting
+    | undefined;
   const isVertexConfigured = Boolean(
     vertexSettings?.projectId &&
       vertexSettings?.location &&
       vertexSettings?.serviceAccountKey?.value,
   );
 
+  const isAzureConfigured =
+    provider === "azure"
+      ? azureHasSavedSettings || azureHasEnvConfiguration
+      : false;
+
   const isConfigured =
     provider === "azure"
       ? isAzureConfigured
@@ -280,6 +298,7 @@ export function ProviderSettingsPage({ provider }: ProviderSettingsPageProps) {
             onSaveKey={handleSaveKey}
             onDeleteKey={handleDeleteKey}
             isDyad={isDyad}
+            updateSettings={updateSettings}
           />
         )}
 

src/hooks/useLanguageModelProviders.ts

@@ -2,7 +2,11 @@ import { useQuery } from "@tanstack/react-query";
 import { IpcClient } from "@/ipc/ipc_client";
 import type { LanguageModelProvider } from "@/ipc/ipc_types";
 import { useSettings } from "./useSettings";
-import { cloudProviders, VertexProviderSetting } from "@/lib/schemas";
+import {
+  cloudProviders,
+  VertexProviderSetting,
+  AzureProviderSetting,
+} from "@/lib/schemas";
 
 export function useLanguageModelProviders() {
   const ipcClient = IpcClient.getInstance();
@@ -32,6 +36,20 @@ export function useLanguageModelProviders() {
       }
       return false;
     }
+    if (provider === "azure") {
+      const azureSettings = providerSettings as AzureProviderSetting;
+      const hasSavedSettings = Boolean(
+        (azureSettings?.apiKey?.value ?? "").trim() &&
+          (azureSettings?.resourceName ?? "").trim(),
+      );
+      if (hasSavedSettings) {
+        return true;
+      }
+      if (envVars["AZURE_API_KEY"] && envVars["AZURE_RESOURCE_NAME"]) {
+        return true;
+      }
+      return false;
+    }
     if (providerSettings?.apiKey?.value) {
       return true;
     }

src/ipc/utils/get_model_client.ts

@@ -3,7 +3,7 @@ import { createGoogleGenerativeAI as createGoogle } from "@ai-sdk/google";
 import { createAnthropic } from "@ai-sdk/anthropic";
 import { createXai } from "@ai-sdk/xai";
 import { createVertex as createGoogleVertex } from "@ai-sdk/google-vertex";
-import { azure } from "@ai-sdk/azure";
+import { createAzure } from "@ai-sdk/azure";
 import { LanguageModelV2 } from "@ai-sdk/provider";
 import { createOpenRouter } from "@openrouter/ai-sdk-provider";
 import { createOpenAICompatible } from "@ai-sdk/openai-compatible";
@@ -12,6 +12,7 @@ import type {
   LargeLanguageModel,
   UserSettings,
   VertexProviderSetting,
+  AzureProviderSetting,
 } from "../../lib/schemas";
 import { getEnvVar } from "./read_env";
 import log from "electron-log";
@@ -335,28 +336,41 @@ function getRegularModelClient(
         };
       }
 
-      // Azure OpenAI requires both API key and resource name as env vars
-      // We use environment variables for Azure configuration
-      const resourceName = getEnvVar("AZURE_RESOURCE_NAME");
-      const azureApiKey = getEnvVar("AZURE_API_KEY");
+      const azureSettings = settings.providerSettings?.azure as
+        | AzureProviderSetting
+        | undefined;
+      const azureApiKeyFromSettings = (
+        azureSettings?.apiKey?.value ?? ""
+      ).trim();
+      const azureResourceNameFromSettings = (
+        azureSettings?.resourceName ?? ""
+      ).trim();
+      const envResourceName = (getEnvVar("AZURE_RESOURCE_NAME") ?? "").trim();
+      const envAzureApiKey = (getEnvVar("AZURE_API_KEY") ?? "").trim();
+
+      const resourceName = azureResourceNameFromSettings || envResourceName;
+      const azureApiKey = azureApiKeyFromSettings || envAzureApiKey;
 
       if (!resourceName) {
         throw new Error(
-          "Azure OpenAI resource name is required. Please set the AZURE_RESOURCE_NAME environment variable.",
+          "Azure OpenAI resource name is required. Provide it in Settings or set the AZURE_RESOURCE_NAME environment variable.",
         );
       }
 
       if (!azureApiKey) {
         throw new Error(
-          "Azure OpenAI API key is required. Please set the AZURE_API_KEY environment variable.",
+          "Azure OpenAI API key is required. Provide it in Settings or set the AZURE_API_KEY environment variable.",
         );
       }
 
-      // Use the default Azure provider with environment variables
-      // The azure provider automatically picks up AZURE_RESOURCE_NAME and AZURE_API_KEY
+      const provider = createAzure({
+        resourceName,
+        apiKey: azureApiKey,
+      });
+
       return {
         modelClient: {
-          model: azure(model.name),
+          model: provider(model.name),
           builtinProviderId: providerId,
         },
         backupModelClients: [],

src/lib/schemas.ts

@@ -98,6 +98,11 @@ export const RegularProviderSettingSchema = z.object({
   apiKey: SecretSchema.optional(),
 });
 
+export const AzureProviderSettingSchema = z.object({
+  apiKey: SecretSchema.optional(),
+  resourceName: z.string().optional(),
+});
+
 export const VertexProviderSettingSchema = z.object({
   // We make this undefined so that it makes existing callsites easier.
   apiKey: z.undefined(),
@@ -109,6 +114,7 @@ export const VertexProviderSettingSchema = z.object({
 export const ProviderSettingSchema = z.union([
   // Must use more specific type first!
   // Zod uses the first type that matches.
+  AzureProviderSettingSchema,
   VertexProviderSettingSchema,
   RegularProviderSettingSchema,
 ]);
@@ -120,6 +126,7 @@ export type ProviderSetting = z.infer<typeof ProviderSettingSchema>;
 export type RegularProviderSetting = z.infer<
   typeof RegularProviderSettingSchema
 >;
+export type AzureProviderSetting = z.infer<typeof AzureProviderSettingSchema>;
 export type VertexProviderSetting = z.infer<typeof VertexProviderSettingSchema>;
 
 export const RuntimeModeSchema = z.enum(["web-sandbox", "local-node", "unset"]);