@skaile/forge-settings 1.2.2 → 1.3.1

package/src/runtime/vue/useProvidersPanel.ts

@@ -14,7 +14,6 @@
  * value.
  */
 
-import { $fetch } from "ofetch";
 import {
   type ComputedRef,
   computed,
@@ -39,11 +38,15 @@ import {
   type AIProviderSurface,
   validateCredentialRef,
 } from "../shared/provider-registry";
+import {
+  type ProvidersPanelClient,
+  type ProvidersPanelTestResult,
+  urlProvidersClient,
+} from "./providers-client";
 import {
   CREDENTIAL_ENTER_KEY,
   CREDENTIAL_OTHER_REF,
   CUSTOM_PRESET,
-  DEFAULT_PRESETS_URL,
   EMPTY_FORM,
   ENV_SOURCE_LABEL,
   envNameOfRef,
@@ -52,8 +55,8 @@ import {
   OVERRIDES_INSTANCE_NOTICE,
   PROVIDER_ID_PATTERN,
   type ProvidersPanelCredentialOption,
-  type ProvidersPanelEntry,
   type ProvidersPanelEmit,
+  type ProvidersPanelEntry,
   type ProvidersPanelForm,
   type ProvidersPanelPreset,
   type ProvidersPanelProps,
@@ -62,7 +65,6 @@ import {
   requestErrorMessage,
 } from "./providers-panel-model";
 
-export { CREDENTIAL_ENTER_KEY, CREDENTIAL_OTHER_REF, CUSTOM_PRESET } from "./providers-panel-model";
 export type {
   ProvidersPanelCredentialOption,
   ProvidersPanelEmit,
@@ -74,6 +76,7 @@ export type {
   ProvidersPanelRow,
   ProvidersPanelRowState,
 } from "./providers-panel-model";
+export { CREDENTIAL_ENTER_KEY, CREDENTIAL_OTHER_REF, CUSTOM_PRESET } from "./providers-panel-model";
 
 /** What both `ForgeProvidersPanel` variants bind to. */
 export interface ProvidersPanelState {
@@ -134,6 +137,13 @@ export interface ProvidersPanelState {
   /** Row id with a write in flight. */
   rowBusy: Ref<string | null>;
   rowError: Ref<{ id: string; message: string } | null>;
+  /** The panel was given an explicit client: rows offer a connection test. */
+  canTest: ComputedRef<boolean>;
+  /** Row id with a test in flight. */
+  testBusy: Ref<string | null>;
+  /** The last test result per row id. */
+  testResults: Record<string, ProvidersPanelTestResult>;
+  testProvider: (row: ProvidersPanelEntry) => Promise<void>;
 
   // Inline key editor
   /** "Enter a key…" is offered: the scope has an editable `.env` route. */
@@ -180,16 +190,37 @@ export function useProvidersPanel(
   const loadError = ref<string | null>(null);
   const envError = ref<string | null>(null);
 
+  /** The explicit client, else the URL props. Throws when neither is given. */
+  function client(): ProvidersPanelClient {
+    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,
+    });
+  }
+
+  /** The scope's environment is read and written: `environmentEnabled`, else a client, else `environmentUrl`. */
+  const environmentOn = computed(
+    () => props.environmentEnabled ?? (props.client ? true : Boolean(props.environmentUrl)),
+  );
+
   // ── Loading ────────────────────────────────────────────────────────────────
 
   /** Read the scope's `.env` document. A failure shows in the disclosure and blocks nothing else. */
   async function loadEnvironment() {
-    if (!props.environmentUrl) {
+    if (!environmentOn.value) {
       envDocument.value = null;
       return;
     }
     try {
-      envDocument.value = (await $fetch(props.environmentUrl)) as EnvSettingsDocument;
+      envDocument.value = await client().environment();
       envError.value = null;
     } catch (err) {
       envError.value = requestErrorMessage(err, "Could not load the environment variables.");
@@ -201,11 +232,8 @@ export function useProvidersPanel(
     loading.value = true;
     loadError.value = null;
     try {
-      const [list, found] = await Promise.all([
-        $fetch(props.providersUrl, { query: { all: "1" } }) as Promise<ProvidersPanelEntry[]>,
-        $fetch(`${props.providersWriteUrl}/detected`) as Promise<ProvidersPanelPreset[]>,
-        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) {
@@ -217,9 +245,7 @@ export function useProvidersPanel(
 
   async function loadPresets() {
     try {
-      const list = (await $fetch(
-        props.presetsUrl ?? DEFAULT_PRESETS_URL,
-      )) as ProvidersPanelPreset[];
+      const list = await client().presets();
       presets.value = Array.isArray(list) ? list : [];
     } catch (err) {
       loadError.value = requestErrorMessage(err, "Could not load the provider presets.");
@@ -228,6 +254,8 @@ export function useProvidersPanel(
 
   /** After every successful write: reload list, banner and environment, tell the host. */
   async function afterWrite() {
+    // A test result describes the credential as it was; a write may have changed or removed it.
+    for (const key of Object.keys(testResults)) delete testResults[key];
     await refresh();
     emit("changed");
   }
@@ -238,7 +266,7 @@ export function useProvidersPanel(
   });
 
   watch(
-    () => [props.providersUrl, props.providersWriteUrl, props.environmentUrl],
+    () => [props.providersUrl, props.providersWriteUrl, props.environmentUrl, props.client],
     () => void refresh(),
   );
 
@@ -252,9 +280,7 @@ export function useProvidersPanel(
 
   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);
 
   /** Where an entry lives relative to this scope's own document. */
   function stateOf(entry: Pick<ProvidersPanelEntry, "layers">): ProvidersPanelRowState {
@@ -400,7 +426,7 @@ export function useProvidersPanel(
   );
 
   /** Whether "Set value now" is offered: the scope has an `.env` route. */
-  const canSetValue = computed(() => Boolean(props.environmentUrl));
+  const canSetValue = computed(() => environmentOn.value);
 
   /** The dialog collects a credential for a new entry only. */
   const showCredentialFields = computed(() => editing.value === null);
@@ -525,18 +551,15 @@ export function useProvidersPanel(
     saving.value = true;
     dialogError.value = null;
     try {
-      if (showCredentialFields.value && form.secret && props.environmentUrl) {
+      if (showCredentialFields.value && form.secret && environmentOn.value) {
         const update: EnvSettingsUpdate = {
           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();
@@ -573,9 +596,7 @@ export function useProvidersPanel(
     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) {
@@ -609,12 +630,9 @@ export function useProvidersPanel(
     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) {
@@ -664,10 +682,7 @@ export function useProvidersPanel(
     change: { credential?: { kind: AIProviderCredentialKind; ref: string }; enabled?: boolean },
   ) {
     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: ProvidersPanelRow, ref: string) {
@@ -713,14 +728,39 @@ export function useProvidersPanel(
     await runRowWrite(
       row.id,
       async () => {
-        await $fetch(`${props.providersWriteUrl}/${encodeURIComponent(row.id)}`, {
-          method: "DELETE",
-        });
+        await client().remove(row.id);
       },
       `Could not reset ${row.id}.`,
     );
   }
 
+  // ── 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. */
+  const canTest = computed(() => Boolean(props.client) && !props.readOnly);
+  const testBusy = ref<string | null>(null);
+  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) {
+    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;
+    }
+  }
+
   // ── Inline key editor ──────────────────────────────────────────────────────
 
   const keyEditing = ref<string | null>(null);
@@ -761,7 +801,7 @@ export function useProvidersPanel(
    */
   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) {
@@ -777,7 +817,7 @@ export function useProvidersPanel(
     let wroteEnv = false;
     try {
       const update: EnvSettingsUpdate = { set: { [name]: keyForm.value }, unset: [] };
-      await $fetch(props.environmentUrl, { method: "PUT", body: update });
+      await client().updateEnvironment(update);
       wroteEnv = true;
       const ref = `env:${name}`;
       if (row.credentialRef !== ref) {
@@ -837,11 +877,11 @@ export function useProvidersPanel(
 
   /** Write one change to the scope's `.env`, then reload and tell the host. */
   async function writeEnvironment(update: EnvSettingsUpdate, fallback: string): Promise<boolean> {
-    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;
@@ -904,6 +944,10 @@ export function useProvidersPanel(
     resetPatch,
     rowBusy,
     rowError,
+    canTest,
+    testBusy,
+    testResults,
+    testProvider,
     // key editor
     canEnterKey,
     keyEditing,