@skaile/forge-settings 1.3.3 → 2.0.0

package/src/runtime/vue/useProvidersPanel.ts

@@ -24,6 +24,7 @@ import {
   type WritableComputedRef,
   watch,
 } from "vue";
+import { DATA_ZONE_LABELS, dataZoneRefusal, entryDataZone } from "../shared/data-zone";
 import {
   type EnvLayerId,
   type EnvSettingsDocument,
@@ -31,9 +32,30 @@ import {
   type EnvVarView,
   validateEnvVarName,
 } from "../shared/env-vars";
+import { isPlainObject } from "../shared/guards";
+import {
+  AZURE_OPENAI_DEFAULT_API_VERSION,
+  AZURE_OPENAI_PRESET,
+  azureAccountEntries,
+  credentialExpiry,
+  defaultParamValue,
+  EXPERT_PARAMS,
+  FOUNDRY_PRESET,
+  missingRequiredParams,
+  PROVIDER_PARAM_LABELS,
+  type ProviderSignInCredential,
+  type ProviderSignInId,
+  type ProviderSignInOption,
+  presetParamKeys,
+  presetSignInOptions,
+  providerAccountLine,
+  signInCredential,
+  signInOptionOf,
+} from "../shared/provider-accounts";
 import {
   AI_PROVIDER_SURFACES,
   type AIProviderCredentialKind,
+  type AIProviderDataZone,
   type AIProviderKind,
   type AIProviderSurface,
   validateCredentialRef,
@@ -44,6 +66,7 @@ import {
   urlProvidersClient,
 } from "./providers-client";
 import {
+  AZURE_ACCOUNT,
   CREDENTIAL_ENTER_KEY,
   CREDENTIAL_OTHER_REF,
   CUSTOM_PRESET,
@@ -54,29 +77,56 @@ import {
   nonEnvSourceLabel,
   OVERRIDES_INSTANCE_NOTICE,
   PROVIDER_ID_PATTERN,
+  type ProvidersPanelAzureForm,
   type ProvidersPanelCredentialOption,
+  type ProvidersPanelDialogStep,
   type ProvidersPanelEmit,
   type ProvidersPanelEntry,
   type ProvidersPanelForm,
+  type ProvidersPanelModelsForm,
+  type ProvidersPanelModelsMode,
   type ProvidersPanelPreset,
   type ProvidersPanelProps,
   type ProvidersPanelRow,
   type ProvidersPanelRowState,
+  providerModelChoices,
+  providerModelsChip,
   requestErrorMessage,
 } from "./providers-panel-model";
 
 export type {
+  ProvidersPanelAzureForm,
   ProvidersPanelCredentialOption,
+  ProvidersPanelDialogStep,
   ProvidersPanelEmit,
   ProvidersPanelEntry,
   ProvidersPanelForm,
   ProvidersPanelLayer,
+  ProvidersPanelModelsForm,
+  ProvidersPanelModelsMode,
   ProvidersPanelPreset,
   ProvidersPanelProps,
   ProvidersPanelRow,
   ProvidersPanelRowState,
 } from "./providers-panel-model";
-export { CREDENTIAL_ENTER_KEY, CREDENTIAL_OTHER_REF, CUSTOM_PRESET } from "./providers-panel-model";
+export {
+  AZURE_ACCOUNT,
+  CREDENTIAL_ENTER_KEY,
+  CREDENTIAL_OTHER_REF,
+  CUSTOM_PRESET,
+  providerModelChoices,
+  providerModelsChip,
+} from "./providers-panel-model";
+
+/** One parameter field of the add/edit dialog. */
+export interface ProvidersPanelParamField {
+  key: string;
+  label: string;
+  /** The preset requires it. */
+  required: boolean;
+  /** Editable; expert-only parameters are read-only outside expert mode. */
+  editable: boolean;
+}
 
 /** What both `ForgeProvidersPanel` variants bind to. */
 export interface ProvidersPanelState {
@@ -104,14 +154,48 @@ export interface ProvidersPanelState {
   baseUrlPlaceholder: ComputedRef<string>;
   /** "Set value now" is offered: the scope has an `.env` route. */
   canSetValue: ComputedRef<boolean>;
-  /** The dialog shows the env name and secret fields: adding, not editing. */
+  /** The dialog shows the env name and secret fields: the chosen sign-in takes a key. */
   showCredentialFields: ComputedRef<boolean>;
   idError: ComputedRef<string | null>;
+  /** Open the add dialog: on the library, or on `presetId`'s account step. */
   openAdd: (presetId?: string) => void;
   openEdit: (row: ProvidersPanelEntry) => void;
   selectPreset: (value: string) => void;
+  /** Create (Add) or save (Edit). Adding with an explicit client then tests what it created. */
   saveProvider: () => Promise<void>;
 
+  // Add flow: library → account (sign-in, fields) → done (test)
+  dialogStep: Ref<ProvidersPanelDialogStep>;
+  /** The library's presets, catalog order; the Azure OpenAI and Foundry presets sit behind the Azure card. */
+  libraryPresets: ComputedRef<ProvidersPanelPreset[]>;
+  /** Pick a library card: a preset id, {@link CUSTOM_PRESET} or {@link AZURE_ACCOUNT}. */
+  chooseLibrary: (value: string) => void;
+  /** From the account step of an add back to the library. */
+  backToLibrary: () => void;
+  /** The account step is the Microsoft Azure card. */
+  isAzureAccount: ComputedRef<boolean>;
+  /** "How do you sign in?": the kinds the chosen preset accepts (the reference form only in expert mode). */
+  signInOptions: ComputedRef<ProviderSignInOption[]>;
+  signInOption: ComputedRef<ProviderSignInOption | undefined>;
+  selectSignIn: (id: ProviderSignInId) => void;
+  /** The sign-in step is shown; editing an entry whose credential none of the options expresses keeps it as is. */
+  showSignIn: ComputedRef<boolean>;
+  /** The reference field is shown: the chosen sign-in is a typed reference. */
+  showReferenceField: ComputedRef<boolean>;
+  /** The variable a blank key name falls back to: the preset's (the Azure card: Azure OpenAI's). */
+  defaultEnvName: ComputedRef<string | undefined>;
+  /** Parameter fields of the chosen preset (required ones, plus any the edited entry holds). */
+  paramFields: ComputedRef<ProvidersPanelParamField[]>;
+  azureForm: ProvidersPanelAzureForm;
+  addDeploymentRow: () => void;
+  removeDeploymentRow: (index: number) => void;
+  /** Ids the last add created; the done step lists them with their test results. */
+  createdIds: Ref<string[]>;
+  /** Close the dialog from the done step. */
+  finishDialog: () => void;
+  /** "Renew" on a row: re-open its sign-in (the edit dialog, else the row's key or reference editor). */
+  openSignIn: (row: ProvidersPanelRow) => void;
+
   deleteTarget: Ref<ProvidersPanelEntry | null>;
   /** The confirmation dialog's `v-model`; closing it cancels. */
   deleteOpen: WritableComputedRef<boolean>;
@@ -134,6 +218,8 @@ export interface ProvidersPanelState {
   setEnabled: (row: ProvidersPanelRow, enabled: boolean) => Promise<void>;
   /** Delete the workspace patch of an inherited entry. */
   resetPatch: (row: ProvidersPanelRow) => Promise<void>;
+  /** "EU processing is on for this account": writes the entry's `eu_processing`. */
+  setEuProcessing: (row: ProvidersPanelRow, on: boolean) => Promise<void>;
   /** Row id with a write in flight. */
   rowBusy: Ref<string | null>;
   rowError: Ref<{ id: string; message: string } | null>;
@@ -143,7 +229,7 @@ export interface ProvidersPanelState {
   testBusy: Ref<string | null>;
   /** The last test result per row id. */
   testResults: Record<string, ProvidersPanelTestResult>;
-  testProvider: (row: ProvidersPanelEntry) => Promise<void>;
+  testProvider: (row: Pick<ProvidersPanelEntry, "id">) => Promise<void>;
 
   // Inline key editor
   /** "Enter a key…" is offered: the scope has an editable `.env` route. */
@@ -165,6 +251,25 @@ export interface ProvidersPanelState {
   cancelRefEditor: () => void;
   saveRefEditor: () => Promise<void>;
 
+  // "Models allowed here"
+  /** Row id whose model filter is open. */
+  modelsEditing: Ref<string | null>;
+  modelsForm: ProvidersPanelModelsForm;
+  /** The models offered: the entry's `model_map` ids, else what `client.models` lists. */
+  modelsKnown: Ref<string[]>;
+  modelsLoading: Ref<boolean>;
+  /** Why the entry's models could not be listed (the checklist then holds only allowed ids). */
+  modelsListMessage: Ref<string | null>;
+  /** The checklist after the search. */
+  modelChoices: ComputedRef<string[]>;
+  modelsError: Ref<string | null>;
+  openModelsEditor: (row: ProvidersPanelRow) => Promise<void>;
+  setModelsMode: (mode: ProvidersPanelModelsMode) => void;
+  toggleModel: (id: string, on: boolean) => void;
+  cancelModelsEditor: () => void;
+  /** Write `allowed_models`: `null` for All models, else the ticked ids in checklist order. */
+  saveModelsEditor: () => Promise<void>;
+
   // Environment
   envDocument: Ref<EnvSettingsDocument | null>;
   /** The environment document says the caller may write its layer. */
@@ -360,11 +465,23 @@ export function useProvidersPanel(
     return notices;
   }
 
+  /** The muted note of a row the host's data-zone rule keeps out; `null` when it does not. */
+  function blockedNoteOf(
+    zone: AIProviderDataZone,
+    euProcessing: boolean | undefined,
+  ): string | null {
+    const rule = props.dataZoneRule;
+    if (!rule || rule === "any") return null;
+    return dataZoneRefusal(rule, zone, euProcessing) ?? null;
+  }
+
   function buildRow(entry: ProvidersPanelEntry): ProvidersPanelRow {
     const state = stateOf(entry);
     const writable = !props.readOnly && !entry.locked;
     const needsCredential = entry.credentialKind !== "none";
     const envName = envNameOfRef(entry.credentialRef);
+    const zone = entry.dataZone ?? entryDataZone({ preset: entry.preset });
+    const isModelEntry = entry.kind === "llm" || entry.kind === "embed";
     return {
       ...entry,
       state,
@@ -385,6 +502,15 @@ export function useProvidersPanel(
       origin: entry.preset ?? entry.surface ?? entry.kind,
       status: statusOf(entry, needsCredential),
       overrideNotices: overrideNoticesOf(entry),
+      accountLine: providerAccountLine(entry, presets.value),
+      expiry: needsCredential ? credentialExpiry(entry.credentialExpiresAt) : null,
+      canRenew: needsCredential && writable,
+      zone,
+      zoneLabel: DATA_ZONE_LABELS[zone],
+      canSetEuProcessing: zone === "eu_option" && writable && state === "own",
+      blockedNote: blockedNoteOf(zone, entry.euProcessing),
+      modelsChip: isModelEntry ? providerModelsChip(entry.allowedModels) : null,
+      canFilterModels: isModelEntry && writable && state === "own",
     };
   }
 
@@ -395,15 +521,36 @@ export function useProvidersPanel(
   const dialogVisible = ref(false);
   /** The row being edited; `null` while adding. */
   const editing = ref<ProvidersPanelEntry | null>(null);
-  const form = reactive<ProvidersPanelForm>({ ...EMPTY_FORM });
+  const form = reactive<ProvidersPanelForm>({ ...EMPTY_FORM, params: {} });
   const dialogError = ref<string | null>(null);
   const saving = ref(false);
+  const dialogStep = ref<ProvidersPanelDialogStep>("account");
+  const createdIds = ref<string[]>([]);
+  const azureForm = reactive<ProvidersPanelAzureForm>(emptyAzureForm());
+
+  /** A fresh Azure card: Azure OpenAI chosen, one blank deployment row, the default `api_version`. */
+  function emptyAzureForm(): ProvidersPanelAzureForm {
+    return {
+      resource: "",
+      useOpenAI: true,
+      useFoundry: false,
+      deployments: [{ deployment: "", model: "" }],
+      apiVersion: AZURE_OPENAI_DEFAULT_API_VERSION,
+    };
+  }
 
   const presetOptions = computed(() => [
     ...presets.value.map((preset) => ({ label: preset.label, value: preset.id })),
     { label: "Custom", value: CUSTOM_PRESET },
   ]);
 
+  /** Azure OpenAI and Claude on Foundry are added through the Microsoft Azure card. */
+  const libraryPresets = computed(() =>
+    presets.value.filter(
+      (preset) => preset.id !== AZURE_OPENAI_PRESET && preset.id !== FOUNDRY_PRESET,
+    ),
+  );
+
   const surfaceOptions = AI_PROVIDER_SURFACES.map((surface) => ({
     label: surface,
     value: surface,
@@ -413,6 +560,8 @@ export function useProvidersPanel(
 
   const isCustom = computed(() => form.preset === CUSTOM_PRESET);
 
+  const isAzureAccount = computed(() => form.preset === AZURE_ACCOUNT);
+
   /** Kind of a custom entry: the edited one's, else `llm`. */
   const customKind = computed<AIProviderKind>(() => editing.value?.kind ?? "llm");
 
@@ -428,8 +577,83 @@ export function useProvidersPanel(
   /** Whether "Set value now" is offered: the scope has an `.env` route. */
   const canSetValue = computed(() => environmentOn.value);
 
-  /** The dialog collects a credential for a new entry only. */
-  const showCredentialFields = computed(() => editing.value === null);
+  /** The preset whose sign-in kinds the Azure card offers: Azure OpenAI's, Foundry's when only that is used. */
+  const azureSignInPreset = computed<Pick<ProvidersPanelPreset, "credential" | "transport">>(() => {
+    const openai = presets.value.find((p) => p.id === AZURE_OPENAI_PRESET);
+    const foundry = presets.value.find((p) => p.id === FOUNDRY_PRESET);
+    const chosen = !azureForm.useOpenAI && azureForm.useFoundry ? foundry : openai;
+    return (
+      chosen ??
+      openai ??
+      foundry ?? {
+        credential: { kind: "api_key_header", env: "AZURE_OPENAI_API_KEY" },
+        transport: "azure-openai",
+      }
+    );
+  });
+
+  /** The sign-in options the account step offers. */
+  const signInOptions = computed<ProviderSignInOption[]>(() => {
+    const expert = props.expert === true;
+    if (isAzureAccount.value) return presetSignInOptions(azureSignInPreset.value, { expert });
+    if (!form.preset) return [];
+    return presetSignInOptions(isCustom.value ? null : (selectedPreset.value ?? null), { expert });
+  });
+
+  const signInOption = computed(() => signInOptions.value.find((o) => o.id === form.signIn));
+
+  /** The sign-in option the edited entry's stored credential corresponds to. */
+  const storedSignIn = computed(() => {
+    const row = editing.value;
+    if (!row) return undefined;
+    const kind = row.credentialKind ?? selectedPreset.value?.credential.kind;
+    return signInOptionOf({ kind, ref: row.credentialRef }, signInOptions.value);
+  });
+
+  /**
+   * Editing an entry whose stored credential none of the options expresses
+   * (an `oauth` credential, or a `keyring:` reference outside expert mode)
+   * keeps it as is; the row's picker still changes it.
+   */
+  const showSignIn = computed(() => {
+    const row = editing.value;
+    if (!row) return signInOptions.value.length > 0;
+    const option = storedSignIn.value;
+    const kind = row.credentialKind ?? selectedPreset.value?.credential.kind;
+    if (!option || (kind && option.credentialKind !== kind)) return false;
+    const ref = row.credentialRef;
+    if (!ref) return option.fields !== "reference";
+    return option.fields === (envNameOfRef(ref) ? "key" : "reference");
+  });
+
+  /** The dialog collects a key (env name, optional value) for the chosen sign-in. */
+  const showCredentialFields = computed(
+    () => showSignIn.value && signInOption.value?.fields === "key",
+  );
+
+  const showReferenceField = computed(
+    () => showSignIn.value && signInOption.value?.fields === "reference",
+  );
+
+  /** The conventional variable a blank key name falls back to. */
+  const defaultEnvName = computed(() =>
+    isAzureAccount.value
+      ? azureSignInPreset.value.credential.env
+      : selectedPreset.value?.credential.env,
+  );
+
+  const paramFields = computed<ProvidersPanelParamField[]>(() => {
+    if (isCustom.value || isAzureAccount.value) return [];
+    const preset = selectedPreset.value;
+    const kept = editing.value && editing.value.preset === form.preset ? editing.value : null;
+    const required = new Set(preset?.required_params ?? []);
+    return presetParamKeys(preset, kept?.transportParams).map((key) => ({
+      key,
+      label: PROVIDER_PARAM_LABELS[key] ?? key,
+      required: required.has(key),
+      editable: props.expert === true || !EXPERT_PARAMS.includes(key),
+    }));
+  });
 
   const idError = computed(() => {
     const id = form.id.trim();
@@ -438,28 +662,74 @@ export function useProvidersPanel(
       : null;
   });
 
-  const dialogTitle = computed(() =>
-    editing.value ? `Edit provider — ${editing.value.id}` : "Add provider",
-  );
+  const dialogTitle = computed(() => {
+    if (editing.value) return `Edit provider — ${editing.value.id}`;
+    if (dialogStep.value === "done") return "Provider added";
+    if (dialogStep.value === "account" && isAzureAccount.value) return "Add Microsoft Azure";
+    return "Add provider";
+  });
 
   function resetDialog(values: Partial<ProvidersPanelForm>, row: ProvidersPanelEntry | null) {
     Object.assign(form, EMPTY_FORM, values);
+    form.params = { ...(values.params ?? {}) };
+    Object.assign(azureForm, emptyAzureForm());
     editing.value = row;
     dialogError.value = null;
+    createdIds.value = [];
+    dialogStep.value = "account";
     dialogVisible.value = true;
   }
 
-  /** Open the add dialog, optionally on a preset. */
+  /** Pick the first sign-in option when the current one is not offered. */
+  function settleSignIn() {
+    if (!signInOptions.value.some((o) => o.id === form.signIn)) {
+      form.signIn = signInOptions.value[0]?.id ?? "";
+    }
+  }
+
+  /** Open the add dialog: on the library, or straight on `presetId`'s account step. */
   function openAdd(presetId?: string) {
     if (props.readOnly) return;
     resetDialog({}, null);
-    if (presetId) selectPreset(presetId);
+    if (presetId) chooseLibrary(presetId);
+    else dialogStep.value = "library";
+  }
+
+  function chooseLibrary(value: string) {
+    if (props.readOnly || editing.value) return;
+    dialogError.value = null;
+    if (value === AZURE_ACCOUNT) {
+      form.preset = AZURE_ACCOUNT;
+      form.id = "";
+      form.envName = "";
+      form.params = {};
+    } else {
+      if (form.preset === AZURE_ACCOUNT) form.preset = "";
+      selectPreset(value);
+    }
+    settleSignIn();
+    dialogStep.value = "account";
+  }
+
+  function backToLibrary() {
+    if (editing.value) return;
+    dialogError.value = null;
+    dialogStep.value = "library";
+  }
+
+  function selectSignIn(id: ProviderSignInId) {
+    if (signInOptions.value.some((o) => o.id === id)) form.signIn = id;
   }
 
   /** Open the dialog on an entry this scope's document defines; its id stays fixed. */
   function openEdit(row: ProvidersPanelEntry) {
     if (!isEditable(row)) return;
     const preset = presets.value.find((p) => p.id === row.preset);
+    const ref = row.credentialRef;
+    const params: Record<string, string> = {};
+    for (const key of presetParamKeys(preset, row.transportParams)) {
+      params[key] = row.transportParams?.[key] ?? defaultParamValue(preset?.id, key);
+    }
     resetDialog(
       {
         preset: preset ? preset.id : CUSTOM_PRESET,
@@ -467,15 +737,19 @@ export function useProvidersPanel(
         surface: row.surface ?? "",
         // The preset's own endpoint shows as the placeholder, not as a pinned value.
         baseUrl: row.baseUrl && row.baseUrl !== preset?.base_url ? row.baseUrl : "",
+        envName: envNameOfRef(ref) ?? "",
+        credentialRef: ref && !envNameOfRef(ref) ? ref : "",
+        params,
       },
       row,
     );
+    form.signIn = storedSignIn.value?.id ?? signInOptions.value[0]?.id ?? "";
   }
 
   /**
    * Switch the preset. Fields still holding the previous preset's defaults
-   * (the id while adding, the env var, a custom surface) follow the new one;
-   * anything the user typed is kept.
+   * (the id while adding, the env var, a custom surface, the parameters)
+   * follow the new one; anything the user typed is kept.
    */
   function selectPreset(value: string) {
     const previous = selectedPreset.value;
@@ -485,6 +759,50 @@ export function useProvidersPanel(
     if (form.envName === "" || form.envName === previous?.credential.env)
       form.envName = next?.credential.env ?? "";
     if (value === CUSTOM_PRESET && form.surface === "") form.surface = previous?.surface ?? "";
+    const params: Record<string, string> = {};
+    for (const key of presetParamKeys(next)) {
+      const typed = form.params[key]?.trim();
+      params[key] =
+        typed && typed !== defaultParamValue(previous?.id, key)
+          ? typed
+          : defaultParamValue(next?.id, key);
+    }
+    form.params = params;
+    settleSignIn();
+  }
+
+  function addDeploymentRow() {
+    azureForm.deployments.push({ deployment: "", model: "" });
+  }
+
+  function removeDeploymentRow(index: number) {
+    azureForm.deployments.splice(index, 1);
+    if (azureForm.deployments.length === 0) addDeploymentRow();
+  }
+
+  /** The credential the chosen sign-in writes. */
+  function dialogCredential(): ProviderSignInCredential {
+    const option = signInOption.value;
+    if (!option) return { ok: false, error: "Choose how you sign in." };
+    return signInCredential(
+      option,
+      { envName: form.envName, ref: form.credentialRef },
+      { defaultEnv: defaultEnvName.value },
+    );
+  }
+
+  /** Why the key fields cannot be saved, or `null`. */
+  function keyFieldsRefusal(): string | null {
+    if (!showCredentialFields.value) return null;
+    const envName = form.envName.trim();
+    if (envName) {
+      const refusal = validateEnvVarName(envName);
+      if (refusal) return refusal;
+    }
+    if (form.secret && !envName && !defaultEnvName.value) {
+      return "Name the environment variable the value is stored in.";
+    }
+    return null;
   }
 
   /** Why the form cannot be saved, or `null`. */
@@ -494,13 +812,17 @@ export function useProvidersPanel(
     if (idError.value) return idError.value;
     if (showSurface.value && !form.surface) return "Choose the surface a custom provider speaks.";
     if (isCustom.value && !form.baseUrl.trim()) return "A custom provider needs a base URL.";
-    if (showCredentialFields.value) {
-      const envName = form.envName.trim();
-      if (envName) {
-        const refusal = validateEnvVarName(envName);
-        if (refusal) return refusal;
+    if (!isCustom.value && selectedPreset.value) {
+      const missing = missingRequiredParams(selectedPreset.value, form.params)[0];
+      if (missing) {
+        return `Enter the ${(PROVIDER_PARAM_LABELS[missing] ?? missing).toLowerCase()} (${missing}).`;
       }
-      if (form.secret && !envName) return "Name the environment variable the value is stored in.";
+    }
+    if (showSignIn.value) {
+      const keyRefusal = keyFieldsRefusal();
+      if (keyRefusal) return keyRefusal;
+      const credential = dialogCredential();
+      if (!credential.ok) return credential.error;
     }
     return null;
   }
@@ -508,7 +830,8 @@ export function useProvidersPanel(
   /**
    * The `PUT ${providersWriteUrl}/:id` body. The write replaces every editable
    * field, so an edit starts from the defining document's values the dialog
-   * does not show (`layerFields`) and keeps the stored credential.
+   * does not show (`layerFields`). An edit whose credential the sign-in step
+   * cannot express keeps the stored one.
    */
   function buildBody(): Record<string, unknown> {
     const row = editing.value;
@@ -526,43 +849,131 @@ export function useProvidersPanel(
     }
     const baseUrl = form.baseUrl.trim();
     if (baseUrl) body.base_url = baseUrl;
-    const credentialKind: AIProviderCredentialKind =
-      kept?.credentialKind ?? (isCustom.value ? "bearer" : (preset?.credential.kind ?? "bearer"));
-    const envName = row ? "" : form.envName.trim();
-    if (envName) body.credential = { kind: credentialKind, ref: `env:${envName}` };
-    else if (row?.credentialRef) body.credential = { kind: credentialKind, ref: row.credentialRef };
+
+    const fields = paramFields.value;
+    if (fields.length > 0) {
+      const params: Record<string, unknown> =
+        kept && isPlainObject(body.params) ? { ...body.params } : {};
+      for (const { key } of fields) {
+        const value = form.params[key]?.trim();
+        if (value) params[key] = value;
+        else delete params[key];
+      }
+      body.params = params;
+    } else if (!kept) {
+      // Another preset (or custom): the previous preset's parameters do not carry over.
+      delete body.params;
+    }
+
+    if (showSignIn.value) {
+      const credential = dialogCredential();
+      if (credential.ok && credential.credential) body.credential = credential.credential;
+    } else if (row?.credentialRef) {
+      const credentialKind: AIProviderCredentialKind =
+        kept?.credentialKind ?? (isCustom.value ? "bearer" : (preset?.credential.kind ?? "bearer"));
+      body.credential = { kind: credentialKind, ref: row.credentialRef };
+    } else if (kept?.credentialKind) {
+      body.credential = { kind: kept.credentialKind };
+    }
     return body;
   }
 
+  /** Write a "Set value now" secret to the scope's `.env` first, under the key name (else the preset's). */
+  async function writeDialogSecret() {
+    const name = form.envName.trim() || defaultEnvName.value || "";
+    if (!showCredentialFields.value || !form.secret || !environmentOn.value || !name) return;
+    const update: EnvSettingsUpdate = { set: { [name]: form.secret }, unset: [] };
+    await client().updateEnvironment(update);
+    form.secret = "";
+  }
+
+  /**
+   * After an add: with an explicit client, test every created entry and show
+   * the results on the done step; otherwise close the dialog.
+   */
+  async function finishAdd(ids: string[]) {
+    createdIds.value = ids;
+    await afterWrite();
+    if (!canTest.value) {
+      dialogVisible.value = false;
+      return;
+    }
+    dialogStep.value = "done";
+    for (const id of ids) await testProvider({ id });
+  }
+
+  /** Save the Azure card: the secret first, then each entry; ids written before a refusal are named. */
+  async function saveAzureAccount() {
+    const keyRefusal = keyFieldsRefusal();
+    const credential = dialogCredential();
+    const drafts = keyRefusal
+      ? { ok: false as const, error: keyRefusal }
+      : !credential.ok
+        ? credential
+        : azureAccountEntries({
+            resource: azureForm.resource,
+            credential: credential.credential,
+            openai: azureForm.useOpenAI
+              ? { deployments: azureForm.deployments, apiVersion: azureForm.apiVersion }
+              : undefined,
+            foundry: azureForm.useFoundry ? { deployments: [] } : undefined,
+            takenIds: providers.value.map((entry) => entry.id),
+          });
+    if (!drafts.ok) {
+      dialogError.value = drafts.error;
+      return;
+    }
+    saving.value = true;
+    dialogError.value = null;
+    const created: string[] = [];
+    try {
+      await writeDialogSecret();
+      for (const draft of drafts.entries) {
+        await client().upsert(draft.id, draft.body);
+        created.push(draft.id);
+      }
+      await finishAdd(created);
+    } catch (err) {
+      const message = requestErrorMessage(err, "Could not add the Azure account.");
+      dialogError.value =
+        created.length > 0 ? `${message} (created: ${created.join(", ")})` : message;
+      if (created.length > 0) await afterWrite();
+    } finally {
+      saving.value = false;
+    }
+  }
+
   /**
    * Save the dialog. A "Set value now" secret is written first, through the
    * scope's `.env` route as `NAME=value`; only then is the entry — carrying
    * the `env:NAME` reference — written. Refusals from either request stay
-   * inline in the dialog.
+   * inline in the dialog. The Azure card writes up to two entries.
    */
   async function saveProvider() {
     if (props.readOnly) return;
+    if (isAzureAccount.value && !editing.value) {
+      await saveAzureAccount();
+      return;
+    }
     const refusal = formRefusal();
     if (refusal) {
       dialogError.value = refusal;
       return;
     }
     const id = form.id.trim();
+    const adding = editing.value === null;
     saving.value = true;
     dialogError.value = null;
     try {
-      if (showCredentialFields.value && form.secret && environmentOn.value) {
-        const update: EnvSettingsUpdate = {
-          set: { [form.envName.trim()]: form.secret },
-          unset: [],
-        };
-        await client().updateEnvironment(update);
-        form.secret = "";
-      }
+      await writeDialogSecret();
       await client().upsert(id, buildBody());
-      dialogVisible.value = false;
       editing.value = null;
-      await afterWrite();
+      if (adding) {
+        await finishAdd([id]);
+      } else {
+        dialogVisible.value = false;
+        await afterWrite();
+      }
     } catch (err) {
       dialogError.value = requestErrorMessage(err, "Could not save the provider.");
     } finally {
@@ -570,6 +981,20 @@ export function useProvidersPanel(
     }
   }
 
+  function finishDialog() {
+    dialogVisible.value = false;
+    createdIds.value = [];
+  }
+
+  /** "Renew": the edit dialog's sign-in for an own entry, else the row's key or reference editor. */
+  function openSignIn(row: ProvidersPanelRow) {
+    if (!row.canRenew) return;
+    if (isEditable(row)) openEdit(row);
+    else if (canEnterKey.value && (!row.credentialRef || envNameOfRef(row.credentialRef))) {
+      openKeyEditor(row);
+    } else openRefEditor(row);
+  }
+
   // ── Delete ─────────────────────────────────────────────────────────────────
 
   const deleteTarget = ref<ProvidersPanelEntry | null>(null);
@@ -734,6 +1159,100 @@ export function useProvidersPanel(
     );
   }
 
+  async function setEuProcessing(row: ProvidersPanelRow, on: boolean) {
+    if (!row.canSetEuProcessing || row.euProcessing === on) return;
+    await runRowWrite(
+      row.id,
+      () => client().upsert(row.id, { ...ownBody(row), eu_processing: on }),
+      `Could not change EU processing of ${row.id}.`,
+    );
+  }
+
+  // ── Models allowed here ────────────────────────────────────────────────────
+
+  const modelsEditing = ref<string | null>(null);
+  const modelsForm = reactive<ProvidersPanelModelsForm>({ mode: "all", selected: [], query: "" });
+  const modelsKnown = ref<string[]>([]);
+  const modelsLoading = ref(false);
+  const modelsListMessage = ref<string | null>(null);
+  const modelsError = ref<string | null>(null);
+
+  const modelChoices = computed(() =>
+    providerModelChoices(modelsKnown.value, modelsForm.selected, modelsForm.query),
+  );
+
+  /**
+   * Open the row's model filter: its `allowed_models` ticked, the checklist
+   * from its declared `model_map` ids, else from the client's model listing
+   * (`client.models`, the entry's discovery).
+   */
+  async function openModelsEditor(row: ProvidersPanelRow) {
+    if (!row.canFilterModels) return;
+    modelsEditing.value = row.id;
+    modelsForm.mode = row.allowedModels === undefined ? "all" : "only";
+    modelsForm.selected = [...(row.allowedModels ?? [])];
+    modelsForm.query = "";
+    modelsError.value = null;
+    modelsListMessage.value = null;
+    if (row.modelIds && row.modelIds.length > 0) {
+      modelsKnown.value = [...row.modelIds];
+      return;
+    }
+    modelsKnown.value = [];
+    modelsLoading.value = true;
+    try {
+      const listed = await client().models(row.id);
+      if (modelsEditing.value !== row.id) return;
+      modelsKnown.value = listed.models.map((model) => model.id);
+      if (listed.models.length === 0) {
+        modelsListMessage.value = listed.message ?? "This provider lists no models.";
+      }
+    } catch (err) {
+      if (modelsEditing.value === row.id) {
+        modelsListMessage.value = requestErrorMessage(
+          err,
+          `Could not list the models of ${row.id}.`,
+        );
+      }
+    } finally {
+      modelsLoading.value = false;
+    }
+  }
+
+  function setModelsMode(mode: ProvidersPanelModelsMode) {
+    modelsForm.mode = mode;
+  }
+
+  function toggleModel(id: string, on: boolean) {
+    const has = modelsForm.selected.includes(id);
+    if (on && !has) modelsForm.selected = [...modelsForm.selected, id];
+    if (!on && has) modelsForm.selected = modelsForm.selected.filter((model) => model !== id);
+  }
+
+  function cancelModelsEditor() {
+    modelsEditing.value = null;
+    modelsError.value = null;
+  }
+
+  async function saveModelsEditor() {
+    const row = rows.value.find((r) => r.id === modelsEditing.value);
+    if (!row?.canFilterModels) return;
+    const order = providerModelChoices(modelsKnown.value, modelsForm.selected);
+    const allowed =
+      modelsForm.mode === "all" ? null : order.filter((id) => modelsForm.selected.includes(id));
+    rowBusy.value = row.id;
+    modelsError.value = null;
+    try {
+      await client().upsert(row.id, { ...ownBody(row), allowed_models: allowed });
+      modelsEditing.value = null;
+      await afterWrite();
+    } catch (err) {
+      modelsError.value = requestErrorMessage(err, `Could not save the models of ${row.id}.`);
+    } finally {
+      rowBusy.value = null;
+    }
+  }
+
   // ── Connection test ────────────────────────────────────────────────────────
 
   /** Only an explicit client is known to serve the test; the URL routes are a host's concern. A read-only panel offers none. */
@@ -742,7 +1261,7 @@ export function useProvidersPanel(
   const testResults = reactive<Record<string, ProvidersPanelTestResult>>({});
 
   /** Ask the client whether the entry's credential works; the answer shows in its row. */
-  async function testProvider(row: ProvidersPanelEntry) {
+  async function testProvider(row: Pick<ProvidersPanelEntry, "id">) {
     if (!props.client || props.readOnly || testBusy.value !== null) return;
     testBusy.value = row.id;
     delete testResults[row.id];
@@ -925,6 +1444,25 @@ export function useProvidersPanel(
     openEdit,
     selectPreset,
     saveProvider,
+    // add flow
+    dialogStep,
+    libraryPresets,
+    chooseLibrary,
+    backToLibrary,
+    isAzureAccount,
+    signInOptions,
+    signInOption,
+    selectSignIn,
+    showSignIn,
+    showReferenceField,
+    paramFields,
+    azureForm,
+    addDeploymentRow,
+    removeDeploymentRow,
+    createdIds,
+    finishDialog,
+    defaultEnvName,
+    openSignIn,
     // delete
     deleteTarget,
     deleteOpen,
@@ -942,6 +1480,7 @@ export function useProvidersPanel(
     setCredentialEnv,
     setEnabled,
     resetPatch,
+    setEuProcessing,
     rowBusy,
     rowError,
     canTest,
@@ -963,6 +1502,19 @@ export function useProvidersPanel(
     openRefEditor,
     cancelRefEditor,
     saveRefEditor,
+    // models allowed here
+    modelsEditing,
+    modelsForm,
+    modelsKnown,
+    modelsLoading,
+    modelsListMessage,
+    modelChoices,
+    modelsError,
+    openModelsEditor,
+    setModelsMode,
+    toggleModel,
+    cancelModelsEditor,
+    saveModelsEditor,
     // environment
     envDocument,
     envEditable,