@skaile/forge-settings 1.3.3 → 1.4.0

package/dist/runtime/vue/useProvidersPanel.js

@@ -5,9 +5,27 @@ import {
   ref,
   watch
 } from "vue";
+import { DATA_ZONE_LABELS, dataZoneRefusal, entryDataZone } from "../shared/data-zone.js";
 import {
   validateEnvVarName
 } from "../shared/env-vars.js";
+import { isPlainObject } from "../shared/guards.js";
+import {
+  AZURE_OPENAI_DEFAULT_API_VERSION,
+  AZURE_OPENAI_PRESET,
+  azureAccountEntries,
+  credentialExpiry,
+  defaultParamValue,
+  EXPERT_PARAMS,
+  FOUNDRY_PRESET,
+  missingRequiredParams,
+  PROVIDER_PARAM_LABELS,
+  presetParamKeys,
+  presetSignInOptions,
+  providerAccountLine,
+  signInCredential,
+  signInOptionOf
+} from "../shared/provider-accounts.js";
 import {
   AI_PROVIDER_SURFACES,
   validateCredentialRef
@@ -16,6 +34,7 @@ import {
   urlProvidersClient
 } from "./providers-client.js";
 import {
+  AZURE_ACCOUNT,
   CREDENTIAL_ENTER_KEY,
   CREDENTIAL_OTHER_REF,
   CUSTOM_PRESET,
@@ -26,9 +45,18 @@ import {
   nonEnvSourceLabel,
   OVERRIDES_INSTANCE_NOTICE,
   PROVIDER_ID_PATTERN,
+  providerModelChoices,
+  providerModelsChip,
   requestErrorMessage
 } from "./providers-panel-model.js";
-export { CREDENTIAL_ENTER_KEY, CREDENTIAL_OTHER_REF, CUSTOM_PRESET } from "./providers-panel-model.js";
+export {
+  AZURE_ACCOUNT,
+  CREDENTIAL_ENTER_KEY,
+  CREDENTIAL_OTHER_REF,
+  CUSTOM_PRESET,
+  providerModelChoices,
+  providerModelsChip
+} from "./providers-panel-model.js";
 export function useProvidersPanel(props, emit) {
   const providers = ref([]);
   const presets = ref([]);
@@ -173,11 +201,18 @@ export function useProvidersPanel(props, emit) {
     if (entry.locked) notices.push("Locked by the control plane.");
     return notices;
   }
+  function blockedNoteOf(zone, euProcessing) {
+    const rule = props.dataZoneRule;
+    if (!rule || rule === "any") return null;
+    return dataZoneRefusal(rule, zone, euProcessing) ?? null;
+  }
   function buildRow(entry) {
     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,
@@ -192,25 +227,52 @@ export function useProvidersPanel(props, emit) {
       credentialOptions: needsCredential ? credentialOptionsOf(entry) : [],
       origin: entry.preset ?? entry.surface ?? entry.kind,
       status: statusOf(entry, needsCredential),
-      overrideNotices: overrideNoticesOf(entry)
+      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"
     };
   }
   const rows = computed(() => providers.value.map(buildRow));
   const dialogVisible = ref(false);
   const editing = ref(null);
-  const form = reactive({ ...EMPTY_FORM });
+  const form = reactive({ ...EMPTY_FORM, params: {} });
   const dialogError = ref(null);
   const saving = ref(false);
+  const dialogStep = ref("account");
+  const createdIds = ref([]);
+  const azureForm = reactive(emptyAzureForm());
+  function emptyAzureForm() {
+    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 }
   ]);
+  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
   }));
   const selectedPreset = computed(() => presets.value.find((preset) => preset.id === form.preset));
   const isCustom = computed(() => form.preset === CUSTOM_PRESET);
+  const isAzureAccount = computed(() => form.preset === AZURE_ACCOUNT);
   const customKind = computed(() => editing.value?.kind ?? "llm");
   const showSurface = computed(
     () => isCustom.value && (customKind.value === "llm" || customKind.value === "embed")
@@ -219,38 +281,135 @@ export function useProvidersPanel(props, emit) {
     () => selectedPreset.value?.base_url ?? "https://api.example.com/v1"
   );
   const canSetValue = computed(() => environmentOn.value);
-  const showCredentialFields = computed(() => editing.value === null);
+  const azureSignInPreset = computed(() => {
+    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"
+    };
+  });
+  const signInOptions = computed(() => {
+    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));
+  const storedSignIn = computed(() => {
+    const row = editing.value;
+    if (!row) return void 0;
+    const kind = row.credentialKind ?? selectedPreset.value?.credential.kind;
+    return signInOptionOf({ kind, ref: row.credentialRef }, signInOptions.value);
+  });
+  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 ref2 = row.credentialRef;
+    if (!ref2) return option.fields !== "reference";
+    return option.fields === (envNameOfRef(ref2) ? "key" : "reference");
+  });
+  const showCredentialFields = computed(
+    () => showSignIn.value && signInOption.value?.fields === "key"
+  );
+  const showReferenceField = computed(
+    () => showSignIn.value && signInOption.value?.fields === "reference"
+  );
+  const defaultEnvName = computed(
+    () => isAzureAccount.value ? azureSignInPreset.value.credential.env : selectedPreset.value?.credential.env
+  );
+  const paramFields = computed(() => {
+    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();
     return id && !PROVIDER_ID_PATTERN.test(id) ? "Use lower-case letters, digits, '-' and '_', starting with a letter or digit." : null;
   });
-  const dialogTitle = computed(
-    () => editing.value ? `Edit provider \u2014 ${editing.value.id}` : "Add provider"
-  );
+  const dialogTitle = computed(() => {
+    if (editing.value) return `Edit provider \u2014 ${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, row) {
     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;
   }
+  function settleSignIn() {
+    if (!signInOptions.value.some((o) => o.id === form.signIn)) {
+      form.signIn = signInOptions.value[0]?.id ?? "";
+    }
+  }
   function openAdd(presetId) {
     if (props.readOnly) return;
     resetDialog({}, null);
-    if (presetId) selectPreset(presetId);
+    if (presetId) chooseLibrary(presetId);
+    else dialogStep.value = "library";
+  }
+  function chooseLibrary(value) {
+    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) {
+    if (signInOptions.value.some((o) => o.id === id)) form.signIn = id;
   }
   function openEdit(row) {
     if (!isEditable(row)) return;
     const preset = presets.value.find((p) => p.id === row.preset);
+    const ref2 = row.credentialRef;
+    const params = {};
+    for (const key of presetParamKeys(preset, row.transportParams)) {
+      params[key] = row.transportParams?.[key] ?? defaultParamValue(preset?.id, key);
+    }
     resetDialog(
       {
         preset: preset ? preset.id : CUSTOM_PRESET,
         id: row.id,
         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 : ""
+        baseUrl: row.baseUrl && row.baseUrl !== preset?.base_url ? row.baseUrl : "",
+        envName: envNameOfRef(ref2) ?? "",
+        credentialRef: ref2 && !envNameOfRef(ref2) ? ref2 : "",
+        params
       },
       row
     );
+    form.signIn = storedSignIn.value?.id ?? signInOptions.value[0]?.id ?? "";
   }
   function selectPreset(value) {
     const previous = selectedPreset.value;
@@ -260,6 +419,41 @@ export function useProvidersPanel(props, emit) {
     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 = {};
+    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) {
+    azureForm.deployments.splice(index, 1);
+    if (azureForm.deployments.length === 0) addDeploymentRow();
+  }
+  function dialogCredential() {
+    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 }
+    );
+  }
+  function keyFieldsRefusal() {
+    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;
   }
   function formRefusal() {
     if (!form.preset) return "Choose a preset or Custom.";
@@ -267,13 +461,17 @@ export function useProvidersPanel(props, emit) {
     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;
   }
@@ -291,41 +489,120 @@ export function useProvidersPanel(props, emit) {
     }
     const baseUrl = form.baseUrl.trim();
     if (baseUrl) body.base_url = baseUrl;
-    const credentialKind = 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 = 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) {
+      delete body.params;
+    }
+    if (showSignIn.value) {
+      const credential = dialogCredential();
+      if (credential.ok && credential.credential) body.credential = credential.credential;
+    } else if (row?.credentialRef) {
+      const credentialKind = 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;
   }
+  async function writeDialogSecret() {
+    const name = form.envName.trim() || defaultEnvName.value || "";
+    if (!showCredentialFields.value || !form.secret || !environmentOn.value || !name) return;
+    const update = { set: { [name]: form.secret }, unset: [] };
+    await client().updateEnvironment(update);
+    form.secret = "";
+  }
+  async function finishAdd(ids) {
+    createdIds.value = ids;
+    await afterWrite();
+    if (!canTest.value) {
+      dialogVisible.value = false;
+      return;
+    }
+    dialogStep.value = "done";
+    for (const id of ids) await testProvider({ id });
+  }
+  async function saveAzureAccount() {
+    const keyRefusal = keyFieldsRefusal();
+    const credential = dialogCredential();
+    const drafts = keyRefusal ? { ok: false, error: keyRefusal } : !credential.ok ? credential : azureAccountEntries({
+      resource: azureForm.resource,
+      credential: credential.credential,
+      openai: azureForm.useOpenAI ? { deployments: azureForm.deployments, apiVersion: azureForm.apiVersion } : void 0,
+      foundry: azureForm.useFoundry ? { deployments: [] } : void 0,
+      takenIds: providers.value.map((entry) => entry.id)
+    });
+    if (!drafts.ok) {
+      dialogError.value = drafts.error;
+      return;
+    }
+    saving.value = true;
+    dialogError.value = null;
+    const created = [];
+    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;
+    }
+  }
   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 = {
-          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 {
       saving.value = false;
     }
   }
+  function finishDialog() {
+    dialogVisible.value = false;
+    createdIds.value = [];
+  }
+  function openSignIn(row) {
+    if (!row.canRenew) return;
+    if (isEditable(row)) openEdit(row);
+    else if (canEnterKey.value && (!row.credentialRef || envNameOfRef(row.credentialRef))) {
+      openKeyEditor(row);
+    } else openRefEditor(row);
+  }
   const deleteTarget = ref(null);
   const deleteError = ref(null);
   const deleting = ref(false);
@@ -448,6 +725,84 @@ export function useProvidersPanel(props, emit) {
       `Could not reset ${row.id}.`
     );
   }
+  async function setEuProcessing(row, on) {
+    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}.`
+    );
+  }
+  const modelsEditing = ref(null);
+  const modelsForm = reactive({ mode: "all", selected: [], query: "" });
+  const modelsKnown = ref([]);
+  const modelsLoading = ref(false);
+  const modelsListMessage = ref(null);
+  const modelsError = ref(null);
+  const modelChoices = computed(
+    () => providerModelChoices(modelsKnown.value, modelsForm.selected, modelsForm.query)
+  );
+  async function openModelsEditor(row) {
+    if (!row.canFilterModels) return;
+    modelsEditing.value = row.id;
+    modelsForm.mode = row.allowedModels === void 0 ? "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) {
+    modelsForm.mode = mode;
+  }
+  function toggleModel(id, on) {
+    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;
+    }
+  }
   const canTest = computed(() => Boolean(props.client) && !props.readOnly);
   const testBusy = ref(null);
   const testResults = reactive({});
@@ -608,6 +963,25 @@ export function useProvidersPanel(props, emit) {
     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,
@@ -625,6 +999,7 @@ export function useProvidersPanel(props, emit) {
     setCredentialEnv,
     setEnabled,
     resetPatch,
+    setEuProcessing,
     rowBusy,
     rowError,
     canTest,
@@ -646,6 +1021,19 @@ export function useProvidersPanel(props, emit) {
     openRefEditor,
     cancelRefEditor,
     saveRefEditor,
+    // models allowed here
+    modelsEditing,
+    modelsForm,
+    modelsKnown,
+    modelsLoading,
+    modelsListMessage,
+    modelChoices,
+    modelsError,
+    openModelsEditor,
+    setModelsMode,
+    toggleModel,
+    cancelModelsEditor,
+    saveModelsEditor,
     // environment
     envDocument,
     envEditable,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skaile/forge-settings",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "description": "Provider and settings operations for Skaile forge apps: provider registry layers, credential store, env layers, model discovery, the providers panel, and editor / AI SDK model adapters.",
   "type": "module",
   "packageManager": "bun@1.3.9",
@@ -55,7 +55,7 @@
   },
   "dependencies": {
     "@nuxt/kit": "^4.0.0",
-    "@skaile/workspaces": "^9.0.0",
+    "@skaile/workspaces": "^9.1.0",
     "ofetch": "^1.4.0",
     "yaml": "^2.9.0"
   },