@skaile/forge-settings 0.0.0-stage → 1.0.1

package/dist/runtime/vue/useProvidersPanel.js

@@ -0,0 +1,633 @@
+import { $fetch } from "ofetch";
+import {
+  computed,
+  onMounted,
+  reactive,
+  ref,
+  watch
+} from "vue";
+import {
+  validateEnvVarName
+} from "../shared/env-vars.js";
+import {
+  AI_PROVIDER_SURFACES,
+  validateCredentialRef
+} from "../shared/provider-registry.js";
+import {
+  CREDENTIAL_ENTER_KEY,
+  CREDENTIAL_OTHER_REF,
+  CUSTOM_PRESET,
+  DEFAULT_PRESETS_URL,
+  EMPTY_FORM,
+  ENV_SOURCE_LABEL,
+  envNameOfRef,
+  FALLBACK_CREDENTIAL_KIND,
+  nonEnvSourceLabel,
+  OVERRIDES_INSTANCE_NOTICE,
+  PROVIDER_ID_PATTERN,
+  requestErrorMessage
+} from "./providers-panel-model.js";
+export { CREDENTIAL_ENTER_KEY, CREDENTIAL_OTHER_REF, CUSTOM_PRESET } from "./providers-panel-model.js";
+export function useProvidersPanel(props, emit) {
+  const providers = ref([]);
+  const presets = ref([]);
+  const detected = ref([]);
+  const envDocument = ref(null);
+  const loading = ref(false);
+  const loadError = ref(null);
+  const envError = ref(null);
+  async function loadEnvironment() {
+    if (!props.environmentUrl) {
+      envDocument.value = null;
+      return;
+    }
+    try {
+      envDocument.value = await $fetch(props.environmentUrl);
+      envError.value = null;
+    } catch (err) {
+      envError.value = requestErrorMessage(err, "Could not load the environment variables.");
+    }
+  }
+  async function refresh() {
+    loading.value = true;
+    loadError.value = null;
+    try {
+      const [list, found] = await Promise.all([
+        $fetch(props.providersUrl, { query: { all: "1" } }),
+        $fetch(`${props.providersWriteUrl}/detected`),
+        loadEnvironment()
+      ]);
+      providers.value = Array.isArray(list) ? list : [];
+      detected.value = Array.isArray(found) ? found : [];
+    } catch (err) {
+      loadError.value = requestErrorMessage(err, "Could not load the providers.");
+    } finally {
+      loading.value = false;
+    }
+  }
+  async function loadPresets() {
+    try {
+      const list = await $fetch(
+        props.presetsUrl ?? DEFAULT_PRESETS_URL
+      );
+      presets.value = Array.isArray(list) ? list : [];
+    } catch (err) {
+      loadError.value = requestErrorMessage(err, "Could not load the provider presets.");
+    }
+  }
+  async function afterWrite() {
+    await refresh();
+    emit("changed");
+  }
+  onMounted(() => {
+    void loadPresets();
+    void refresh();
+  });
+  watch(
+    () => [props.providersUrl, props.providersWriteUrl, props.environmentUrl],
+    () => void refresh()
+  );
+  const envVars = computed(() => {
+    const byName = /* @__PURE__ */ new Map();
+    for (const v of envDocument.value?.vars ?? []) byName.set(v.name, v);
+    return byName;
+  });
+  const envEditable = computed(() => envDocument.value?.editable === true);
+  const canEnterKey = computed(
+    () => Boolean(props.environmentUrl) && envDocument.value?.editable !== false
+  );
+  function stateOf(entry) {
+    if (props.layer !== "workspace" || !entry.layers.includes("instance")) return "own";
+    return entry.layers.includes("workspace") ? "patched" : "inherited";
+  }
+  function isEditable(entry) {
+    return !props.readOnly && !entry.locked && stateOf(entry) === "own";
+  }
+  function credentialOptionsOf(entry) {
+    const doc = envDocument.value;
+    const currentEnv = envNameOfRef(entry.credentialRef);
+    const names = /* @__PURE__ */ new Set();
+    for (const v of doc?.vars ?? []) names.add(v.name);
+    for (const m of doc?.missing ?? []) names.add(m.name);
+    const rowPresetEnv = presets.value.find((p) => p.id === entry.preset)?.credential.env;
+    if (rowPresetEnv) names.add(rowPresetEnv);
+    for (const p of detected.value) if (p.credential.env) names.add(p.credential.env);
+    if (currentEnv) names.add(currentEnv);
+    const options = [...names].sort().map((name) => {
+      const v = envVars.value.get(name);
+      if (!doc) return { value: name, label: name };
+      if (!v) return { value: name, label: `${name} (not set)`, defined: false };
+      return {
+        value: name,
+        label: v.hint ? `${name} \u2022\u2022\u2022\u2022${v.hint}` : name,
+        defined: true,
+        hint: v.hint,
+        source: v.source
+      };
+    });
+    if (entry.credentialRef && !currentEnv) {
+      options.push({ value: entry.credentialRef, label: entry.credentialRef });
+    }
+    if (canEnterKey.value) {
+      options.push({ value: CREDENTIAL_ENTER_KEY, label: "Enter a key\u2026", action: "enter-key" });
+    }
+    options.push({ value: CREDENTIAL_OTHER_REF, label: "Other reference\u2026", action: "other-ref" });
+    return options;
+  }
+  function statusOf(entry, needsCredential) {
+    if (!needsCredential) return "No credential needed.";
+    const ref2 = entry.credentialRef;
+    const envName = envNameOfRef(ref2);
+    if (entry.configured) {
+      const source = envName ? (() => {
+        const v = envVars.value.get(envName);
+        return v ? ENV_SOURCE_LABEL[v.source] : void 0;
+      })() : ref2 ? nonEnvSourceLabel(ref2) : void 0;
+      return source ? `configured \xB7 ${source}` : "configured";
+    }
+    const missing = envName ?? entry.envKeyName;
+    return missing ? `missing ${missing}` : entry.error ?? "not configured";
+  }
+  function overrideNoticesOf(entry) {
+    const notices = [];
+    const envName = envNameOfRef(entry.credentialRef);
+    const v = envName ? envVars.value.get(envName) : void 0;
+    if (v && v.shadows.length > 0) {
+      notices.push(`Also defined in ${v.shadows.join(", ")}; the ${v.source} value is used.`);
+    }
+    if (v && props.layer === "workspace" && (v.source === "instance" || v.source === "process")) {
+      notices.push(OVERRIDES_INSTANCE_NOTICE);
+    }
+    if (entry.locked) notices.push("Locked by the control plane.");
+    return notices;
+  }
+  function buildRow(entry) {
+    const state = stateOf(entry);
+    const writable = !props.readOnly && !entry.locked;
+    const needsCredential = entry.credentialKind !== "none";
+    const envName = envNameOfRef(entry.credentialRef);
+    return {
+      ...entry,
+      state,
+      badge: state === "patched" ? "instance \xB7 overridden here" : state === "inherited" ? "instance" : props.layer,
+      inheritedNote: state === "inherited" ? "Inherited from the instance." : void 0,
+      editable: writable && state === "own",
+      canReset: writable && state === "patched",
+      canToggle: writable,
+      needsCredential,
+      canEditCredential: needsCredential && writable,
+      credentialValue: envName ?? entry.credentialRef ?? "",
+      credentialOptions: needsCredential ? credentialOptionsOf(entry) : [],
+      origin: entry.preset ?? entry.surface ?? entry.kind,
+      status: statusOf(entry, needsCredential),
+      overrideNotices: overrideNoticesOf(entry)
+    };
+  }
+  const rows = computed(() => providers.value.map(buildRow));
+  const dialogVisible = ref(false);
+  const editing = ref(null);
+  const form = reactive({ ...EMPTY_FORM });
+  const dialogError = ref(null);
+  const saving = ref(false);
+  const presetOptions = computed(() => [
+    ...presets.value.map((preset) => ({ label: preset.label, value: preset.id })),
+    { label: "Custom", value: CUSTOM_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 customKind = computed(() => editing.value?.kind ?? "llm");
+  const showSurface = computed(
+    () => isCustom.value && (customKind.value === "llm" || customKind.value === "embed")
+  );
+  const baseUrlPlaceholder = computed(
+    () => selectedPreset.value?.base_url ?? "https://api.example.com/v1"
+  );
+  const canSetValue = computed(() => Boolean(props.environmentUrl));
+  const showCredentialFields = computed(() => editing.value === null);
+  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"
+  );
+  function resetDialog(values, row) {
+    Object.assign(form, EMPTY_FORM, values);
+    editing.value = row;
+    dialogError.value = null;
+    dialogVisible.value = true;
+  }
+  function openAdd(presetId) {
+    if (props.readOnly) return;
+    resetDialog({}, null);
+    if (presetId) selectPreset(presetId);
+  }
+  function openEdit(row) {
+    if (!isEditable(row)) return;
+    const preset = presets.value.find((p) => p.id === row.preset);
+    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 : ""
+      },
+      row
+    );
+  }
+  function selectPreset(value) {
+    const previous = selectedPreset.value;
+    const next = presets.value.find((preset) => preset.id === value);
+    form.preset = value;
+    if (!editing.value && (form.id === "" || form.id === previous?.id)) form.id = next?.id ?? "";
+    if (form.envName === "" || form.envName === previous?.credential.env)
+      form.envName = next?.credential.env ?? "";
+    if (value === CUSTOM_PRESET && form.surface === "") form.surface = previous?.surface ?? "";
+  }
+  function formRefusal() {
+    if (!form.preset) return "Choose a preset or Custom.";
+    if (!form.id.trim()) return "Enter a provider id.";
+    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 (form.secret && !envName) return "Name the environment variable the value is stored in.";
+    }
+    return null;
+  }
+  function buildBody() {
+    const row = editing.value;
+    const body = { ...row?.layerFields ?? {} };
+    const preset = selectedPreset.value;
+    const kept = row && form.preset === (row.preset ?? CUSTOM_PRESET) ? row : null;
+    if (isCustom.value) {
+      body.kind = customKind.value;
+      if (showSurface.value) body.surface = form.surface;
+    } else {
+      body.preset = form.preset;
+      if (kept?.surface && kept.surface !== preset?.surface) body.surface = kept.surface;
+    }
+    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 };
+    return body;
+  }
+  async function saveProvider() {
+    if (props.readOnly) return;
+    const refusal = formRefusal();
+    if (refusal) {
+      dialogError.value = refusal;
+      return;
+    }
+    const id = form.id.trim();
+    saving.value = true;
+    dialogError.value = null;
+    try {
+      if (showCredentialFields.value && form.secret && props.environmentUrl) {
+        const update = {
+          set: { [form.envName.trim()]: form.secret },
+          unset: []
+        };
+        await $fetch(props.environmentUrl, { method: "PUT", body: update });
+        form.secret = "";
+      }
+      await $fetch(`${props.providersWriteUrl}/${encodeURIComponent(id)}`, {
+        method: "PUT",
+        body: buildBody()
+      });
+      dialogVisible.value = false;
+      editing.value = null;
+      await afterWrite();
+    } catch (err) {
+      dialogError.value = requestErrorMessage(err, "Could not save the provider.");
+    } finally {
+      saving.value = false;
+    }
+  }
+  const deleteTarget = ref(null);
+  const deleteError = ref(null);
+  const deleting = ref(false);
+  const deleteOpen = computed({
+    get: () => deleteTarget.value !== null,
+    set: (open) => {
+      if (!open) deleteTarget.value = null;
+    }
+  });
+  function requestDelete(row) {
+    if (!isEditable(row)) return;
+    deleteError.value = null;
+    deleteTarget.value = row;
+  }
+  async function confirmDelete() {
+    const target = deleteTarget.value;
+    if (!target || props.readOnly) return;
+    deleting.value = true;
+    deleteError.value = null;
+    try {
+      await $fetch(`${props.providersWriteUrl}/${encodeURIComponent(target.id)}`, {
+        method: "DELETE"
+      });
+      deleteTarget.value = null;
+      await afterWrite();
+    } catch (err) {
+      deleteError.value = requestErrorMessage(err, `Could not delete ${target.id}.`);
+    } finally {
+      deleting.value = false;
+    }
+  }
+  const detectedBusy = ref(null);
+  const detectedError = ref(null);
+  async function addDetected(preset) {
+    if (props.readOnly) return;
+    const taken = new Set(providers.value.map((entry) => entry.id));
+    const id = [preset.id, `${preset.id}-env`].find((candidate) => !taken.has(candidate));
+    const envName = preset.credential.env;
+    if (!id || !envName) {
+      openAdd(preset.id);
+      return;
+    }
+    detectedBusy.value = preset.id;
+    detectedError.value = null;
+    try {
+      await $fetch(`${props.providersWriteUrl}/${encodeURIComponent(id)}`, {
+        method: "PUT",
+        body: {
+          preset: preset.id,
+          credential: { kind: preset.credential.kind, ref: `env:${envName}` }
+        }
+      });
+      await afterWrite();
+    } catch (err) {
+      detectedError.value = requestErrorMessage(err, `Could not add ${preset.label}.`);
+    } finally {
+      detectedBusy.value = null;
+    }
+  }
+  const rowBusy = ref(null);
+  const rowError = ref(null);
+  function ownBody(row) {
+    const body = { ...row.layerFields ?? {} };
+    const preset = presets.value.find((p) => p.id === row.preset);
+    if (row.preset) {
+      body.preset = row.preset;
+      if (row.surface && row.surface !== preset?.surface) body.surface = row.surface;
+    } else {
+      body.kind = row.kind;
+      if (row.surface) body.surface = row.surface;
+    }
+    if (row.baseUrl && row.baseUrl !== preset?.base_url) body.base_url = row.baseUrl;
+    if (row.credentialRef) {
+      body.credential = {
+        kind: row.credentialKind ?? FALLBACK_CREDENTIAL_KIND,
+        ref: row.credentialRef
+      };
+    }
+    return body;
+  }
+  async function putRowChange(row, change) {
+    const body = row.state === "own" ? { ...ownBody(row), ...change } : change;
+    await $fetch(`${props.providersWriteUrl}/${encodeURIComponent(row.id)}`, {
+      method: "PUT",
+      body
+    });
+  }
+  function credentialFor(row, ref2) {
+    return { kind: row.credentialKind ?? FALLBACK_CREDENTIAL_KIND, ref: ref2 };
+  }
+  async function runRowWrite(id, work, fallback) {
+    rowBusy.value = id;
+    rowError.value = null;
+    try {
+      await work();
+      await afterWrite();
+    } catch (err) {
+      rowError.value = { id, message: requestErrorMessage(err, fallback) };
+    } finally {
+      rowBusy.value = null;
+    }
+  }
+  async function setCredentialEnv(row, name) {
+    if (!row.canEditCredential) return;
+    const ref2 = `env:${name}`;
+    if (row.credentialRef === ref2) return;
+    await runRowWrite(
+      row.id,
+      () => putRowChange(row, { credential: credentialFor(row, ref2) }),
+      `Could not change the credential of ${row.id}.`
+    );
+  }
+  async function setEnabled(row, enabled) {
+    if (!row.canToggle) return;
+    await runRowWrite(
+      row.id,
+      () => putRowChange(row, { enabled }),
+      `Could not ${enabled ? "enable" : "disable"} ${row.id}.`
+    );
+  }
+  async function resetPatch(row) {
+    if (!row.canReset) return;
+    await runRowWrite(
+      row.id,
+      async () => {
+        await $fetch(`${props.providersWriteUrl}/${encodeURIComponent(row.id)}`, {
+          method: "DELETE"
+        });
+      },
+      `Could not reset ${row.id}.`
+    );
+  }
+  const keyEditing = ref(null);
+  const keyForm = reactive({ name: "", value: "" });
+  const keyError = ref(null);
+  const refEditing = ref(null);
+  const refForm = reactive({ ref: "" });
+  const refError = ref(null);
+  function cancelKeyEditor() {
+    keyEditing.value = null;
+    keyForm.name = "";
+    keyForm.value = "";
+    keyError.value = null;
+  }
+  function cancelRefEditor() {
+    refEditing.value = null;
+    refForm.ref = "";
+    refError.value = null;
+  }
+  function openKeyEditor(row) {
+    if (!row.canEditCredential || !canEnterKey.value) return;
+    cancelRefEditor();
+    cancelKeyEditor();
+    const presetEnv = presets.value.find((p) => p.id === row.preset)?.credential.env;
+    keyForm.name = envNameOfRef(row.credentialRef) ?? presetEnv ?? "";
+    keyEditing.value = row.id;
+  }
+  async function saveKeyEditor() {
+    const row = rows.value.find((r) => r.id === keyEditing.value);
+    if (!row?.canEditCredential || !props.environmentUrl) return;
+    const name = keyForm.name.trim();
+    const refusal = validateEnvVarName(name);
+    if (refusal) {
+      keyError.value = refusal;
+      return;
+    }
+    if (!keyForm.value) {
+      keyError.value = "Enter the key.";
+      return;
+    }
+    rowBusy.value = row.id;
+    keyError.value = null;
+    let wroteEnv = false;
+    try {
+      const update = { set: { [name]: keyForm.value }, unset: [] };
+      await $fetch(props.environmentUrl, { method: "PUT", body: update });
+      wroteEnv = true;
+      const ref2 = `env:${name}`;
+      if (row.credentialRef !== ref2) {
+        await putRowChange(row, { credential: credentialFor(row, ref2) });
+      }
+      cancelKeyEditor();
+    } catch (err) {
+      keyError.value = requestErrorMessage(err, "Could not save the key.");
+    } finally {
+      rowBusy.value = null;
+    }
+    if (wroteEnv) await afterWrite();
+  }
+  function openRefEditor(row) {
+    if (!row.canEditCredential) return;
+    cancelKeyEditor();
+    cancelRefEditor();
+    refForm.ref = row.credentialRef && !envNameOfRef(row.credentialRef) ? row.credentialRef : "";
+    refEditing.value = row.id;
+  }
+  async function saveRefEditor() {
+    const row = rows.value.find((r) => r.id === refEditing.value);
+    if (!row?.canEditCredential) return;
+    const ref2 = refForm.ref.trim();
+    const refusal = ref2 ? validateCredentialRef(ref2) : "Enter a reference.";
+    if (refusal) {
+      refError.value = refusal;
+      return;
+    }
+    rowBusy.value = row.id;
+    refError.value = null;
+    try {
+      await putRowChange(row, { credential: credentialFor(row, ref2) });
+      cancelRefEditor();
+      await afterWrite();
+    } catch (err) {
+      refError.value = requestErrorMessage(err, "Could not save the reference.");
+    } finally {
+      rowBusy.value = null;
+    }
+  }
+  function onCredentialSelect(row, value) {
+    if (value === CREDENTIAL_ENTER_KEY) openKeyEditor(row);
+    else if (value === CREDENTIAL_OTHER_REF) openRefEditor(row);
+    else if (value !== row.credentialValue) void setCredentialEnv(row, value);
+  }
+  const envValues = reactive({});
+  const envBusy = ref(false);
+  async function writeEnvironment(update, fallback) {
+    if (!props.environmentUrl || !envEditable.value) return false;
+    envBusy.value = true;
+    envError.value = null;
+    try {
+      await $fetch(props.environmentUrl, { method: "PUT", body: update });
+    } catch (err) {
+      envError.value = requestErrorMessage(err, fallback);
+      return false;
+    } finally {
+      envBusy.value = false;
+    }
+    await afterWrite();
+    return true;
+  }
+  async function setEnvValue(name) {
+    const value = envValues[name];
+    if (!value) return;
+    if (await writeEnvironment({ set: { [name]: value }, unset: [] }, `Could not save ${name}.`)) {
+      delete envValues[name];
+    }
+  }
+  return {
+    // table
+    rows,
+    loading,
+    loadError,
+    refresh,
+    // dialog
+    dialogVisible,
+    dialogTitle,
+    editing,
+    form,
+    dialogError,
+    saving,
+    presetOptions,
+    surfaceOptions,
+    isCustom,
+    showSurface,
+    baseUrlPlaceholder,
+    canSetValue,
+    showCredentialFields,
+    idError,
+    openAdd,
+    openEdit,
+    selectPreset,
+    saveProvider,
+    // delete
+    deleteTarget,
+    deleteOpen,
+    deleteError,
+    deleting,
+    requestDelete,
+    confirmDelete,
+    // detected
+    detected,
+    detectedBusy,
+    detectedError,
+    addDetected,
+    // row actions
+    onCredentialSelect,
+    setCredentialEnv,
+    setEnabled,
+    resetPatch,
+    rowBusy,
+    rowError,
+    // key editor
+    canEnterKey,
+    keyEditing,
+    keyForm,
+    keyError,
+    openKeyEditor,
+    cancelKeyEditor,
+    saveKeyEditor,
+    // reference editor
+    refEditing,
+    refForm,
+    refError,
+    openRefEditor,
+    cancelRefEditor,
+    saveRefEditor,
+    // environment
+    envDocument,
+    envEditable,
+    envValues,
+    envError,
+    envBusy,
+    setEnvValue
+  };
+}

package/dist/types.d.mts

@@ -0,0 +1,9 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module.mjs'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module.mjs'
+
+export { type ForgeSettingsOptions } from './module.mjs'