FIX: GUI target config shows wrong model name due to env var override

frontend/e2e/chat.spec.ts

@@ -690,9 +690,9 @@ test.describe("Target type scenarios", () => {
     await page.getByTitle("Configuration").click();
     await expect(page.getByText("Target Configuration")).toBeVisible({ timeout: 10000 });
 
-    await expect(page.getByText("OpenAIChatTarget")).toBeVisible();
-    await expect(page.getByText("OpenAIImageTarget")).toBeVisible();
-    await expect(page.getByText("OpenAITTSTarget")).toBeVisible();
+    await expect(page.locator("table").getByText("OpenAIChatTarget")).toBeVisible();
+    await expect(page.locator("table").getByText("OpenAIImageTarget")).toBeVisible();
+    await expect(page.locator("table").getByText("OpenAITTSTarget")).toBeVisible();
   });
 
   test("should activate image target and show it in chat ribbon", async ({ page }) => {

frontend/e2e/config.spec.ts

@@ -55,8 +55,8 @@ test.describe("Target Configuration Page", () => {
     // Table should appear with both targets
     await expect(page.getByText("gpt-4o")).toBeVisible({ timeout: 10000 });
     await expect(page.getByText("dall-e-3")).toBeVisible();
-    await expect(page.getByText("OpenAIChatTarget")).toBeVisible();
-    await expect(page.getByText("OpenAIImageTarget")).toBeVisible();
+    await expect(page.locator("table").getByText("OpenAIChatTarget")).toBeVisible();
+    await expect(page.locator("table").getByText("OpenAIImageTarget")).toBeVisible();
   });
 
   test("should show empty state when no targets exist", async ({ page }) => {
@@ -94,7 +94,7 @@ test.describe("Target Configuration Page", () => {
     await setActiveBtns.first().click();
 
     // After clicking, the first target should show "Active" badge
-    await expect(page.getByText("Active", { exact: true })).toBeVisible();
+    await expect(page.locator("table").getByText("Active", { exact: true }).first()).toBeVisible();
   });
 
   test("should open create target dialog", async ({ page }) => {
@@ -177,7 +177,7 @@ test.describe("Create Target Dialog", () => {
     await dialog.getByPlaceholder("https://your-resource.openai.azure.com/").fill("https://my-endpoint.openai.azure.com/");
 
     // Fill model name
-    await dialog.getByPlaceholder("e.g. gpt-4o, dall-e-3").fill("gpt-4o-test");
+    await dialog.getByPlaceholder("e.g. gpt-4o, my-deployment").fill("gpt-4o-test");
 
     // Click Create Target
     await dialog.getByRole("button", { name: "Create Target" }).click();

frontend/src/components/Config/CreateTargetDialog.test.tsx

@@ -112,7 +112,7 @@ describe("CreateTargetDialog", () => {
     fireEvent.change(endpointInput, { target: { value: "https://api.openai.com" } });
 
     // Fill model name — use fireEvent.change for consistency (same reason as endpoint)
-    const modelInput = screen.getByPlaceholderText("e.g. gpt-4o, dall-e-3");
+    const modelInput = screen.getByPlaceholderText("e.g. gpt-4o, my-deployment");
     fireEvent.change(modelInput, { target: { value: "gpt-4" } });
 
     // Submit
@@ -130,6 +130,95 @@ describe("CreateTargetDialog", () => {
     });
   });
 
+  it("should send underlying_model when toggle is enabled", async () => {
+    const onCreated = jest.fn();
+    const user = userEvent.setup();
+    mockedTargetsApi.createTarget.mockResolvedValue({
+      target_registry_name: "azure_deployment",
+      target_type: "OpenAIChatTarget",
+    });
+
+    render(
+      <TestWrapper>
+        <CreateTargetDialog {...defaultProps} onCreated={onCreated} />
+      </TestWrapper>
+    );
+
+    // Select target type
+    await selectTargetType(user, "OpenAIChatTarget");
+
+    // Fill endpoint
+    const endpointInput = screen.getByPlaceholderText(
+      "https://your-resource.openai.azure.com/"
+    );
+    fireEvent.change(endpointInput, { target: { value: "https://api.azure.com" } });
+
+    // Fill model name
+    const modelInput = screen.getByPlaceholderText("e.g. gpt-4o, my-deployment");
+    fireEvent.change(modelInput, { target: { value: "my-gpt4o-deployment" } });
+
+    // Toggle underlying model switch
+    await user.click(screen.getByRole("switch"));
+
+    // Fill underlying model
+    const underlyingInput = screen.getByPlaceholderText("e.g. gpt-4o-2024-08-06");
+    fireEvent.change(underlyingInput, { target: { value: "gpt-4o" } });
+
+    // Submit
+    await user.click(screen.getByText("Create Target"));
+
+    await waitFor(() => {
+      expect(mockedTargetsApi.createTarget).toHaveBeenCalledWith({
+        type: "OpenAIChatTarget",
+        params: {
+          endpoint: "https://api.azure.com",
+          model_name: "my-gpt4o-deployment",
+          underlying_model: "gpt-4o",
+        },
+      });
+      expect(onCreated).toHaveBeenCalled();
+    });
+  });
+
+  it("should not send underlying_model when toggle is off", async () => {
+    const onCreated = jest.fn();
+    const user = userEvent.setup();
+    mockedTargetsApi.createTarget.mockResolvedValue({
+      target_registry_name: "simple_target",
+      target_type: "OpenAIChatTarget",
+    });
+
+    render(
+      <TestWrapper>
+        <CreateTargetDialog {...defaultProps} onCreated={onCreated} />
+      </TestWrapper>
+    );
+
+    await selectTargetType(user, "OpenAIChatTarget");
+
+    const endpointInput = screen.getByPlaceholderText(
+      "https://your-resource.openai.azure.com/"
+    );
+    fireEvent.change(endpointInput, { target: { value: "https://api.openai.com" } });
+
+    const modelInput = screen.getByPlaceholderText("e.g. gpt-4o, my-deployment");
+    fireEvent.change(modelInput, { target: { value: "gpt-4o" } });
+
+    // Do NOT toggle the underlying model switch
+
+    await user.click(screen.getByText("Create Target"));
+
+    await waitFor(() => {
+      expect(mockedTargetsApi.createTarget).toHaveBeenCalledWith({
+        type: "OpenAIChatTarget",
+        params: {
+          endpoint: "https://api.openai.com",
+          model_name: "gpt-4o",
+        },
+      });
+    });
+  });
+
   it("should show error when createTarget fails", async () => {
     const user = userEvent.setup();
     mockedTargetsApi.createTarget.mockRejectedValue(

frontend/src/components/Config/CreateTargetDialog.tsx

@@ -10,6 +10,8 @@ import {
   Input,
   Label,
   Select,
+  Switch,
+  Text,
   tokens,
   Field,
   MessageBar,
@@ -38,6 +40,8 @@ export default function CreateTargetDialog({ open, onClose, onCreated }: CreateT
   const [targetType, setTargetType] = useState('')
   const [endpoint, setEndpoint] = useState('')
   const [modelName, setModelName] = useState('')
+  const [hasDifferentUnderlying, setHasDifferentUnderlying] = useState(false)
+  const [underlyingModel, setUnderlyingModel] = useState('')
   const [apiKey, setApiKey] = useState('')
   const [submitting, setSubmitting] = useState(false)
   const [error, setError] = useState<string | null>(null)
@@ -47,6 +51,8 @@ export default function CreateTargetDialog({ open, onClose, onCreated }: CreateT
     setTargetType('')
     setEndpoint('')
     setModelName('')
+    setHasDifferentUnderlying(false)
+    setUnderlyingModel('')
     setApiKey('')
     setError(null)
     setFieldErrors({})
@@ -75,6 +81,7 @@ export default function CreateTargetDialog({ open, onClose, onCreated }: CreateT
         endpoint,
       }
       if (modelName) params.model_name = modelName
+      if (hasDifferentUnderlying && underlyingModel) params.underlying_model = underlyingModel
       if (apiKey) params.api_key = apiKey
 
       await targetsApi.createTarget({
@@ -139,12 +146,36 @@ export default function CreateTargetDialog({ open, onClose, onCreated }: CreateT
 
               <Field label="Model / Deployment Name">
                 <Input
-                  placeholder="e.g. gpt-4o, dall-e-3"
+                  placeholder="e.g. gpt-4o, my-deployment"
                   value={modelName}
                   onChange={(_, data) => setModelName(data.value)}
                 />
               </Field>
 
+              <div>
+                <Switch
+                  checked={hasDifferentUnderlying}
+                  onChange={(_, data) => {
+                    setHasDifferentUnderlying(data.checked)
+                    if (!data.checked) setUnderlyingModel('')
+                  }}
+                  label="Underlying model differs from deployment name"
+                />
+                <Text size={200} style={{ color: tokens.colorNeutralForeground3, display: 'block', marginTop: '2px' }}>
+                  On Azure, the deployment name (e.g. my-gpt4-deployment) may differ from the actual model (e.g. gpt-4o).
+                </Text>
+              </div>
+
+              {hasDifferentUnderlying && (
+                <Field label="Underlying Model">
+                  <Input
+                    placeholder="e.g. gpt-4o-2024-08-06"
+                    value={underlyingModel}
+                    onChange={(_, data) => setUnderlyingModel(data.value)}
+                  />
+                </Field>
+              )}
+
               <Field label="API Key">
                 <Input
                   type="password"