@skaile/forge-settings 1.2.1 → 1.3.0

package/dist/runtime/vue/useProvidersPanel.js

@@ -1,4 +1,3 @@
-import { $fetch } from "ofetch";
 import {
   computed,
   onMounted,
@@ -13,11 +12,13 @@ import {
   AI_PROVIDER_SURFACES,
   validateCredentialRef
 } from "../shared/provider-registry.js";
+import {
+  urlProvidersClient
+} from "./providers-client.js";
 import {
   CREDENTIAL_ENTER_KEY,
   CREDENTIAL_OTHER_REF,
   CUSTOM_PRESET,
-  DEFAULT_PRESETS_URL,
   EMPTY_FORM,
   ENV_SOURCE_LABEL,
   envNameOfRef,
@@ -36,13 +37,30 @@ export function useProvidersPanel(props, emit) {
   const loading = ref(false);
   const loadError = ref(null);
   const envError = ref(null);
+  function client() {
+    if (props.client) return props.client;
+    if (!props.providersUrl || !props.providersWriteUrl) {
+      throw new Error(
+        "ForgeProvidersPanel needs a `client`, or `providersUrl` and `providersWriteUrl`."
+      );
+    }
+    return urlProvidersClient({
+      providersUrl: props.providersUrl,
+      providersWriteUrl: props.providersWriteUrl,
+      presetsUrl: props.presetsUrl,
+      environmentUrl: props.environmentUrl
+    });
+  }
+  const environmentOn = computed(
+    () => props.environmentEnabled ?? (props.client ? true : Boolean(props.environmentUrl))
+  );
   async function loadEnvironment() {
-    if (!props.environmentUrl) {
+    if (!environmentOn.value) {
       envDocument.value = null;
       return;
     }
     try {
-      envDocument.value = await $fetch(props.environmentUrl);
+      envDocument.value = await client().environment();
       envError.value = null;
     } catch (err) {
       envError.value = requestErrorMessage(err, "Could not load the environment variables.");
@@ -52,11 +70,8 @@ export function useProvidersPanel(props, emit) {
     loading.value = true;
     loadError.value = null;
     try {
-      const [list, found] = await Promise.all([
-        $fetch(props.providersUrl, { query: { all: "1" } }),
-        $fetch(`${props.providersWriteUrl}/detected`),
-        loadEnvironment()
-      ]);
+      const api = client();
+      const [list, found] = await Promise.all([api.list(), api.detected(), loadEnvironment()]);
       providers.value = Array.isArray(list) ? list : [];
       detected.value = Array.isArray(found) ? found : [];
     } catch (err) {
@@ -67,15 +82,14 @@ export function useProvidersPanel(props, emit) {
   }
   async function loadPresets() {
     try {
-      const list = await $fetch(
-        props.presetsUrl ?? DEFAULT_PRESETS_URL
-      );
+      const list = await client().presets();
       presets.value = Array.isArray(list) ? list : [];
     } catch (err) {
       loadError.value = requestErrorMessage(err, "Could not load the provider presets.");
     }
   }
   async function afterWrite() {
+    for (const key of Object.keys(testResults)) delete testResults[key];
     await refresh();
     emit("changed");
   }
@@ -84,7 +98,7 @@ export function useProvidersPanel(props, emit) {
     void refresh();
   });
   watch(
-    () => [props.providersUrl, props.providersWriteUrl, props.environmentUrl],
+    () => [props.providersUrl, props.providersWriteUrl, props.environmentUrl, props.client],
     () => void refresh()
   );
   const envVars = computed(() => {
@@ -93,9 +107,7 @@ export function useProvidersPanel(props, emit) {
     return byName;
   });
   const envEditable = computed(() => envDocument.value?.editable === true);
-  const canEnterKey = computed(
-    () => Boolean(props.environmentUrl) && envDocument.value?.editable !== false
-  );
+  const canEnterKey = computed(() => environmentOn.value && envDocument.value?.editable !== false);
   function stateOf(entry) {
     if (props.layer !== "workspace" || !entry.layers.includes("instance")) return "own";
     return entry.layers.includes("workspace") ? "patched" : "inherited";
@@ -206,7 +218,7 @@ export function useProvidersPanel(props, emit) {
   const baseUrlPlaceholder = computed(
     () => selectedPreset.value?.base_url ?? "https://api.example.com/v1"
   );
-  const canSetValue = computed(() => Boolean(props.environmentUrl));
+  const canSetValue = computed(() => environmentOn.value);
   const showCredentialFields = computed(() => editing.value === null);
   const idError = computed(() => {
     const id = form.id.trim();
@@ -296,18 +308,15 @@ export function useProvidersPanel(props, emit) {
     saving.value = true;
     dialogError.value = null;
     try {
-      if (showCredentialFields.value && form.secret && props.environmentUrl) {
+      if (showCredentialFields.value && form.secret && environmentOn.value) {
         const update = {
           set: { [form.envName.trim()]: form.secret },
           unset: []
         };
-        await $fetch(props.environmentUrl, { method: "PUT", body: update });
+        await client().updateEnvironment(update);
         form.secret = "";
       }
-      await $fetch(`${props.providersWriteUrl}/${encodeURIComponent(id)}`, {
-        method: "PUT",
-        body: buildBody()
-      });
+      await client().upsert(id, buildBody());
       dialogVisible.value = false;
       editing.value = null;
       await afterWrite();
@@ -337,9 +346,7 @@ export function useProvidersPanel(props, emit) {
     deleting.value = true;
     deleteError.value = null;
     try {
-      await $fetch(`${props.providersWriteUrl}/${encodeURIComponent(target.id)}`, {
-        method: "DELETE"
-      });
+      await client().remove(target.id);
       deleteTarget.value = null;
       await afterWrite();
     } catch (err) {
@@ -362,12 +369,9 @@ export function useProvidersPanel(props, emit) {
     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 client().upsert(id, {
+        preset: preset.id,
+        credential: { kind: preset.credential.kind, ref: `env:${envName}` }
       });
       await afterWrite();
     } catch (err) {
@@ -399,10 +403,7 @@ export function useProvidersPanel(props, emit) {
   }
   async function putRowChange(row, change) {
     const body = row.state === "own" ? { ...ownBody(row), ...change } : change;
-    await $fetch(`${props.providersWriteUrl}/${encodeURIComponent(row.id)}`, {
-      method: "PUT",
-      body
-    });
+    await client().upsert(row.id, body);
   }
   function credentialFor(row, ref2) {
     return { kind: row.credentialKind ?? FALLBACK_CREDENTIAL_KIND, ref: ref2 };
@@ -442,13 +443,32 @@ export function useProvidersPanel(props, emit) {
     await runRowWrite(
       row.id,
       async () => {
-        await $fetch(`${props.providersWriteUrl}/${encodeURIComponent(row.id)}`, {
-          method: "DELETE"
-        });
+        await client().remove(row.id);
       },
       `Could not reset ${row.id}.`
     );
   }
+  const canTest = computed(() => Boolean(props.client) && !props.readOnly);
+  const testBusy = ref(null);
+  const testResults = reactive({});
+  async function testProvider(row) {
+    if (!props.client || props.readOnly || testBusy.value !== null) return;
+    testBusy.value = row.id;
+    delete testResults[row.id];
+    try {
+      testResults[row.id] = await props.client.test(row.id);
+    } catch (err) {
+      testResults[row.id] = {
+        ok: false,
+        message: requestErrorMessage(
+          err,
+          err instanceof Error && err.message ? err.message : `Could not test ${row.id}.`
+        )
+      };
+    } finally {
+      testBusy.value = null;
+    }
+  }
   const keyEditing = ref(null);
   const keyForm = reactive({ name: "", value: "" });
   const keyError = ref(null);
@@ -476,7 +496,7 @@ export function useProvidersPanel(props, emit) {
   }
   async function saveKeyEditor() {
     const row = rows.value.find((r) => r.id === keyEditing.value);
-    if (!row?.canEditCredential || !props.environmentUrl) return;
+    if (!row?.canEditCredential || !environmentOn.value) return;
     const name = keyForm.name.trim();
     const refusal = validateEnvVarName(name);
     if (refusal) {
@@ -492,7 +512,7 @@ export function useProvidersPanel(props, emit) {
     let wroteEnv = false;
     try {
       const update = { set: { [name]: keyForm.value }, unset: [] };
-      await $fetch(props.environmentUrl, { method: "PUT", body: update });
+      await client().updateEnvironment(update);
       wroteEnv = true;
       const ref2 = `env:${name}`;
       if (row.credentialRef !== ref2) {
@@ -542,11 +562,11 @@ export function useProvidersPanel(props, emit) {
   const envValues = reactive({});
   const envBusy = ref(false);
   async function writeEnvironment(update, fallback) {
-    if (!props.environmentUrl || !envEditable.value) return false;
+    if (!environmentOn.value || !envEditable.value) return false;
     envBusy.value = true;
     envError.value = null;
     try {
-      await $fetch(props.environmentUrl, { method: "PUT", body: update });
+      await client().updateEnvironment(update);
     } catch (err) {
       envError.value = requestErrorMessage(err, fallback);
       return false;
@@ -607,6 +627,10 @@ export function useProvidersPanel(props, emit) {
     resetPatch,
     rowBusy,
     rowError,
+    canTest,
+    testBusy,
+    testResults,
+    testProvider,
     // key editor
     canEnterKey,
     keyEditing,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skaile/forge-settings",
-  "version": "1.2.1",
+  "version": "1.3.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": "^7.8.0",
+    "@skaile/workspaces": "^7.8.0 || ^8.0.0",
     "ofetch": "^1.4.0",
     "yaml": "^2.9.0"
   },
@@ -101,7 +101,7 @@
     "@nuxt/module-builder": "^1.0.0",
     "@nuxt/schema": "^4.0.0",
     "@nuxt/ui": "^4.11.1",
-    "@skaile/forge-editor": "^6.0.0",
+    "@skaile/forge-editor": "^6.4.2",
     "@types/bun": "^1.2.0",
     "@types/node": "^22.0.0",
     "ai": "^7.0.155",

package/src/runtime/components/ForgeModelRolesPanel.vue

@@ -0,0 +1,312 @@
+<template>
+  <div data-testid="model-roles-panel" class="space-y-3">
+    <p v-if="loadError" data-testid="model-roles-error" class="text-sm text-error-500">{{ loadError }}</p>
+    <div v-else-if="loading && !loaded" class="text-xs text-foreground-subtle py-2 text-center">
+      Loading providers…
+    </div>
+    <div v-else-if="rows.length === 0" class="text-xs text-foreground-subtle py-2 text-center">
+      No model roles are enabled.
+    </div>
+
+    <div
+      v-for="row in rows"
+      :key="row.role.id"
+      :data-testid="`model-role-${row.role.id}`"
+      class="p-3 rounded-lg border border-surface-border space-y-2"
+    >
+      <div class="flex items-start gap-2">
+        <div class="flex-1 min-w-0">
+          <p class="text-sm font-medium text-foreground">{{ row.role.label }}</p>
+          <p class="text-xs text-foreground-muted leading-relaxed">{{ row.role.description }}</p>
+        </div>
+        <UBadge
+          v-if="!row.state.assigned"
+          size="sm"
+          variant="subtle"
+          color="neutral"
+          :data-testid="`model-role-unassigned-${row.role.id}`"
+        >Not assigned</UBadge>
+      </div>
+
+      <div class="flex items-start gap-2 flex-wrap">
+        <USelect
+          :model-value="row.state.entryId || undefined"
+          :items="row.state.providerOptions"
+          placeholder="Choose a provider"
+          :disabled="props.readOnly"
+          :data-testid="`model-role-provider-${row.role.id}`"
+          class="min-w-[12rem] bg-surface-ground border-surface-border text-foreground text-xs"
+          @update:model-value="onProvider(row.role, String($event ?? ''))"
+        />
+
+        <template v-if="!row.voice">
+          <USelect
+            v-if="row.modelChoices"
+            :model-value="row.state.modelId || undefined"
+            :items="row.modelChoices"
+            placeholder="Choose a model"
+            :disabled="props.readOnly"
+            :data-testid="`model-role-model-${row.role.id}`"
+            class="min-w-[16rem] bg-surface-ground border-surface-border text-foreground text-xs font-mono"
+            @update:model-value="onModel(row.role, String($event ?? ''))"
+          />
+          <UInput
+            v-else
+            :model-value="drafts[row.role.id] ?? row.state.modelId"
+            placeholder="Model id"
+            :disabled="props.readOnly || !row.state.entryId || row.modelsLoading"
+            :data-testid="`model-role-model-${row.role.id}`"
+            class="min-w-[16rem] bg-surface-ground border-surface-border text-foreground text-xs font-mono"
+            @update:model-value="drafts[row.role.id] = String($event ?? '')"
+            @blur="commitDraft(row.role)"
+            @keydown.enter="commitDraft(row.role)"
+          />
+        </template>
+
+        <UButton
+          v-if="!props.readOnly && (row.state.assigned || row.state.entryId)"
+          size="sm"
+          variant="ghost"
+          :aria-label="`Clear ${row.role.label}`"
+          :data-testid="`model-role-clear-${row.role.id}`"
+          @click="clear(row.role)"
+        >
+          <Icon name="lucide:x" class="mr-1.5 w-3.5 h-3.5" />Clear
+        </UButton>
+      </div>
+
+      <p
+        v-if="row.state.warning"
+        :data-testid="`model-role-warning-${row.role.id}`"
+        class="text-xs text-amber-600 dark:text-amber-400"
+      >{{ row.state.warning }}</p>
+      <p
+        v-if="row.modelsLoading"
+        class="text-xs text-foreground-subtle italic"
+      >Loading models…</p>
+      <p
+        v-else-if="row.modelsHint"
+        :data-testid="`model-role-hint-${row.role.id}`"
+        class="text-xs text-foreground-subtle italic"
+      >{{ row.modelsHint }}</p>
+
+      <slot name="status" :role="row.role" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from "vue";
+import type { ModelRoleAssignments, ModelRoleDefinition } from "../shared/model-roles";
+import {
+  assignmentOf,
+  buildSelector,
+  isVoiceRole,
+  type ModelRoleOption,
+  type ModelRoleRowState,
+  type ModelRolesModelsResult,
+  type ModelRolesPanelClient,
+  modelOptions,
+  modelRoleRowState,
+  withAssignment,
+} from "../vue/model-roles-panel";
+import type { ProvidersPanelEntry } from "../vue/providers-panel-model";
+
+const props = defineProps<{
+  /** Every role the host declares; only `enabled` ones are rendered. */
+  roles: ModelRoleDefinition[];
+  /** Role id to selector (`<entryId>/<modelId>`, or an entry id for `tts` / `stt`). */
+  assignments: ModelRoleAssignments;
+  /** Reads the registry and its models; a `ProvidersPanelClient` fits. */
+  client: ModelRolesPanelClient;
+  /** Disables every change. */
+  readOnly?: boolean;
+}>();
+
+const emit = defineEmits<{
+  /** The full new assignments map after a pick or a clear. The host saves it. */
+  (event: "update:assignments", assignments: ModelRoleAssignments): void;
+}>();
+
+defineSlots<{
+  /** Under a role's row: availability or check text the host knows. */
+  status?(props: { role: ModelRoleDefinition }): unknown;
+}>();
+
+interface ModelsCache {
+  loading: boolean;
+  result?: ModelRolesModelsResult;
+  /** The request failed; the free-text field is offered. */
+  error?: string;
+}
+
+const entries = ref<ProvidersPanelEntry[]>([]);
+const loading = ref(false);
+const loaded = ref(false);
+const loadError = ref<string | null>(null);
+const modelsCache = reactive<Record<string, ModelsCache>>({});
+/** Provider picked on a model role before a model exists. */
+const pending = reactive<Record<string, string>>({});
+/** Free-text model input not yet committed. */
+const drafts = reactive<Record<string, string>>({});
+
+function errorMessage(error: unknown): string {
+  return error instanceof Error && error.message ? error.message : "The request failed.";
+}
+
+async function loadEntries(): Promise<void> {
+  loading.value = true;
+  loadError.value = null;
+  try {
+    entries.value = await props.client.list();
+    loaded.value = true;
+  } catch (error) {
+    loadError.value = errorMessage(error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** Latest request number per provider; a response with another number is stale and dropped. */
+const modelsRequest: Record<string, number> = {};
+let requestCounter = 0;
+
+async function loadModels(entryId: string): Promise<void> {
+  const request = ++requestCounter;
+  modelsRequest[entryId] = request;
+  modelsCache[entryId] = { loading: true };
+  try {
+    const result = await props.client.models(entryId);
+    if (modelsRequest[entryId] !== request) return;
+    modelsCache[entryId] = { loading: false, result };
+  } catch (error) {
+    if (modelsRequest[entryId] !== request) return;
+    modelsCache[entryId] = { loading: false, error: errorMessage(error) };
+  }
+}
+
+/** Reloads the registry and the models of every shown provider. */
+async function refresh(): Promise<void> {
+  // Responses still in flight were asked before the reload; their numbers no longer match.
+  for (const key of Object.keys(modelsRequest)) delete modelsRequest[key];
+  for (const key of Object.keys(modelsCache)) delete modelsCache[key];
+  await loadEntries();
+  loadModelsForRows();
+}
+
+interface Row {
+  role: ModelRoleDefinition;
+  voice: boolean;
+  state: ModelRoleRowState;
+  /** Options for the model select; `null` selects the free-text field. */
+  modelChoices: ModelRoleOption[] | null;
+  modelsLoading: boolean;
+  modelsHint?: string;
+}
+
+const rows = computed<Row[]>(() =>
+  props.roles
+    .filter((role) => role.enabled)
+    .map((role) => {
+      const voice = isVoiceRole(role.kind);
+      const state = modelRoleRowState(role, assignmentOf(props.assignments, role.id), entries.value, pending[role.id]);
+      const cache = state.entryId ? modelsCache[state.entryId] : undefined;
+      const result = cache?.result;
+      const listed = result && result.status !== "unsupported";
+      let modelsHint: string | undefined;
+      if (!voice && cache && !cache.loading && !listed) {
+        modelsHint = cache.error ?? result?.message ?? "This provider does not list models; enter the model id.";
+      } else if (!voice && result?.status === "static") {
+        modelsHint = result.message;
+      }
+      return {
+        role,
+        voice,
+        state,
+        modelChoices: listed ? modelOptions(result.models, state.modelId) : null,
+        modelsLoading: cache?.loading ?? false,
+        modelsHint,
+      };
+    }),
+);
+
+/** Fetches the models of every provider a model row shows and has not fetched. */
+function loadModelsForRows(): void {
+  for (const row of rows.value) {
+    const id = row.state.entryId;
+    if (row.voice || !id || row.state.warning || modelsCache[id]) continue;
+    void loadModels(id);
+  }
+}
+
+function emitAssignments(roleId: string, value: string): void {
+  emit("update:assignments", withAssignment(props.assignments, roleId, value));
+}
+
+function onProvider(role: ModelRoleDefinition, entryId: string): void {
+  if (props.readOnly) return;
+  delete drafts[role.id];
+  if (isVoiceRole(role.kind)) {
+    emitAssignments(role.id, entryId);
+    return;
+  }
+  // The model belongs to the old provider: drop it, keep the pick until a model is chosen.
+  if (entryId === "") delete pending[role.id];
+  else pending[role.id] = entryId;
+  if (assignmentOf(props.assignments, role.id)) emitAssignments(role.id, "");
+}
+
+function onModel(role: ModelRoleDefinition, modelId: string): void {
+  if (props.readOnly) return;
+  const entryId = rows.value.find((row) => row.role.id === role.id)?.state.entryId ?? "";
+  delete drafts[role.id];
+  if (!entryId || modelId === "") return;
+  delete pending[role.id];
+  emitAssignments(role.id, buildSelector(entryId, modelId));
+}
+
+function commitDraft(role: ModelRoleDefinition): void {
+  const draft = drafts[role.id];
+  if (draft === undefined) return;
+  const modelId = draft.trim();
+  const row = rows.value.find((candidate) => candidate.role.id === role.id);
+  if (!row || modelId === row.state.modelId) {
+    delete drafts[role.id];
+    return;
+  }
+  if (modelId === "") {
+    delete drafts[role.id];
+    if (assignmentOf(props.assignments, role.id)) {
+      pending[role.id] = row.state.entryId;
+      emitAssignments(role.id, "");
+    }
+    return;
+  }
+  onModel(role, modelId);
+}
+
+function clear(role: ModelRoleDefinition): void {
+  if (props.readOnly) return;
+  delete pending[role.id];
+  delete drafts[role.id];
+  if (assignmentOf(props.assignments, role.id)) emitAssignments(role.id, "");
+}
+
+// A stored assignment supersedes a pick that was waiting for its model.
+watch(
+  () => props.assignments,
+  (assignments) => {
+    for (const roleId of Object.keys(pending)) {
+      if (assignmentOf(assignments, roleId)) delete pending[roleId];
+    }
+  },
+);
+watch(rows, loadModelsForRows);
+
+onMounted(async () => {
+  await loadEntries();
+  loadModelsForRows();
+});
+
+defineExpose({ refresh });
+</script>

package/src/runtime/components/ForgeProvidersPanel.vue

@@ -170,6 +170,11 @@
                 :data-testid="`provider-override-notice-${row.id}`"
                 class="text-foreground-subtle"
               >{{ notice }}</p>
+              <p
+                v-if="testResults[row.id]"
+                :data-testid="`provider-test-result-${row.id}`"
+                :class="testResults[row.id]?.ok ? 'text-success-500' : 'text-error-500'"
+              >{{ testResults[row.id]?.message }}</p>
               <p
                 v-if="rowError?.id === row.id"
                 :data-testid="`provider-row-error-${row.id}`"
@@ -187,6 +192,17 @@
             </td>
             <td class="px-3 py-2">
               <div class="flex items-center justify-end gap-1">
+                <UButton
+                  v-if="canTest"
+                  size="sm"
+                  variant="ghost"
+                  :loading="testBusy === row.id"
+                  :disabled="testBusy !== null"
+                  :data-testid="`provider-test-${row.id}`"
+                  @click="testProvider(row)"
+                >
+                  <Icon name="lucide:plug-zap" class="mr-1.5 w-3.5 h-3.5" />Test
+                </UButton>
                 <UButton
                   v-if="row.canReset"
                   size="sm"
@@ -376,22 +392,34 @@
 </template>
 
 <script setup lang="ts">
+import type { ProvidersPanelClient } from "../vue/providers-client";
 import { type ProvidersPanelLayer, useProvidersPanel } from "../vue/useProvidersPanel";
 
-const props = defineProps<{
-  /** `GET` merged view for this scope (`/api/providers` | `/api/workspaces/:id/providers`). */
-  providersUrl: string;
-  /** `PUT|DELETE ${providersWriteUrl}/:id`; `GET ${providersWriteUrl}/detected`. */
-  providersWriteUrl: string;
-  /** Catalog preset summaries. Default `/api/providers/presets`. */
-  presetsUrl?: string;
-  /** The scope's `.env` route: hand-entered keys. Omitted, key entry is hidden. */
-  environmentUrl?: string;
-  /** Edit/Delete are offered only for entries this layer defines. */
-  layer: ProvidersPanelLayer;
-  /** Disables add, edit and delete. */
-  readOnly?: boolean;
-}>();
+const props = withDefaults(
+  defineProps<{
+    /**
+     * The panel's transport. Without it the panel calls the URL props below
+     * (`urlProvidersClient`); with it they are ignored and every row offers a Test button.
+     */
+    client?: ProvidersPanelClient;
+    /** `GET` merged view for this scope (`/api/providers` | `/api/workspaces/:id/providers`). Required without `client`. */
+    providersUrl?: string;
+    /** `PUT|DELETE ${providersWriteUrl}/:id`; `GET ${providersWriteUrl}/detected`. Required without `client`. */
+    providersWriteUrl?: string;
+    /** Catalog preset summaries. Default `/api/providers/presets`. */
+    presetsUrl?: string;
+    /** The scope's `.env` route: hand-entered keys. Omitted, key entry is hidden. */
+    environmentUrl?: string;
+    /** Key entry and the environment disclosure. Default: `Boolean(environmentUrl)` without `client`, `true` with one. */
+    environmentEnabled?: boolean;
+    /** Edit/Delete are offered only for entries this layer defines. */
+    layer: ProvidersPanelLayer;
+    /** Disables add, edit and delete. */
+    readOnly?: boolean;
+  }>(),
+  // Without a default Vue casts an absent boolean to `false`; the panel tells absent from `false`.
+  { environmentEnabled: undefined },
+);
 
 const emit = defineEmits<{
   /** After every successful `PUT`/`DELETE`. */
@@ -417,6 +445,10 @@ const {
   showCredentialFields,
   rowBusy,
   rowError,
+  canTest,
+  testBusy,
+  testResults,
+  testProvider,
   onCredentialSelect,
   setEnabled,
   resetPatch,

package/src/runtime/server/index.ts

@@ -9,6 +9,7 @@
 
 export * from "../shared/harness-providers";
 export * from "../shared/harnesses";
+export * from "../shared/model-roles";
 export * from "../shared/provider-registry";
 export type { DomainConfig, SkaileSettings } from "../shared/settings-types";
 export * from "./credential-policy";