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

frontend/e2e/config.spec.ts

@@ -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/Chat/ChatWindow.tsx

@@ -520,7 +520,7 @@ export default function ChatWindow({
                 <Tooltip content={activeTarget.target_registry_name} relationship="label">
                   <Badge appearance="outline" size="medium">
                     {activeTarget.target_type}
-                    {activeTarget.model_name ? ` (${activeTarget.model_name})` : ''}
+                    {activeTarget.deployment_name ? ` (${activeTarget.deployment_name})` : activeTarget.model_name ? ` (${activeTarget.model_name})` : ''}
                   </Badge>
                 </Tooltip>
               </div>

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

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"

frontend/src/components/Config/TargetTable.styles.ts

@@ -17,4 +17,8 @@ export const useTargetTableStyles = makeStyles({
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
   },
+  paramsCell: {
+    whiteSpace: 'pre-line',
+    wordBreak: 'break-word',
+  },
 })