@executor-js/plugin-openapi 1.4.29 → 1.4.30

package/dist/{EditOpenApiSource-I4NIGIIJ.js → EditOpenApiSource-AOA7APR2.js}

@@ -4,19 +4,15 @@ import {
   OpenApiSourceDetailsFields,
   inferOAuthIssuerUrl,
   resolveOAuthUrl
-} from "./chunk-TGDT6QCH.js";
+} from "./chunk-YJMXYKYX.js";
 import {
   openApiSourceAtom,
-  openApiSourceBindingsAtom,
-  removeOpenApiSourceBinding,
-  setOpenApiSourceBinding,
-  updateOpenApiSource
-} from "./chunk-GFQUEZUW.js";
+  openApiSourceBindingsAtom
+} from "./chunk-ZZBTLFTA.js";
 import {
   OAuth2SourceConfig,
-  OpenApiSourceBindingInput,
   oauth2ClientSecretSlot
-} from "./chunk-E7PZ2QGD.js";
+} from "./chunk-EOXXE5DG.js";
 
 // src/react/EditOpenApiSource.tsx
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -25,8 +21,14 @@ import * as Exit from "effect/Exit";
 import * as Option from "effect/Option";
 import * as Schema from "effect/Schema";
 import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
-import { connectionsAtom, sourceAtom, startOAuth } from "@executor-js/react/api/atoms";
-import { useScope, useScopeStack, useUserScope } from "@executor-js/react/api/scope-context";
+import {
+  connectionsAtom,
+  configureSource,
+  setSourceCredentialBinding,
+  sourceAtom,
+  startOAuth
+} from "@executor-js/react/api/atoms";
+import { useScope, useUserScope } from "@executor-js/react/api/scope-context";
 import { connectionWriteKeys, sourceWriteKeys } from "@executor-js/react/api/reactivity-keys";
 import { Button } from "@executor-js/react/components/button";
 import { CopyButton } from "@executor-js/react/components/copy-button";
@@ -36,18 +38,28 @@ import {
   CardStackEntry,
   CardStackEntryContent,
   CardStackEntryDescription,
-  CardStackEntryField,
-  CardStackEntryTitle
+  CardStackEntryTitle,
+  CardStackEntryField
 } from "@executor-js/react/components/card-stack";
-import { FilterTabs } from "@executor-js/react/components/filter-tabs";
+import { FieldLabel } from "@executor-js/react/components/field";
+import { HelpTooltip } from "@executor-js/react/components/help-tooltip";
 import { Input } from "@executor-js/react/components/input";
 import { sourceWriteKeys as openApiWriteKeys } from "@executor-js/react/api/reactivity-keys";
-import { ConnectionId, ScopeId, SecretId } from "@executor-js/sdk/core";
+import {
+  ConnectionId,
+  ScopeId,
+  SetSourceCredentialBindingInput
+} from "@executor-js/sdk/shared";
 import { useSecretPickerSecrets } from "@executor-js/react/plugins/use-secret-picker-secrets";
 import {
   oauthCallbackUrl,
   useOAuthPopupFlow
 } from "@executor-js/react/plugins/oauth-sign-in";
+import {
+  CredentialControlField,
+  CredentialScopeDropdown,
+  CredentialUsageRow
+} from "@executor-js/react/plugins/credential-target-scope";
 import {
   effectiveCredentialBindingForScope,
   exactCredentialBindingForScope,
@@ -55,6 +67,11 @@ import {
   isSecretCredentialBindingValue
 } from "@executor-js/react/plugins/credential-bindings";
 import { SecretCredentialSlotBindings } from "@executor-js/react/plugins/credential-slot-bindings";
+import {
+  useSourceCredentialBindingScopes,
+  useSourceCredentialBindingWriter
+} from "@executor-js/react/plugins/source-credential-bindings";
+import { CreatableSecretPicker } from "@executor-js/react/plugins/secret-header-auth";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ErrorMessage = Schema.Struct({ message: Schema.String });
 var decodeErrorMessage = Schema.decodeUnknownOption(ErrorMessage);
@@ -77,27 +94,26 @@ var openApiOAuthConnectionId = (sourceId, securitySchemeName, targetScope) => Co
 var effectiveClientSecretSlot = (oauth2) => oauth2.clientSecretSlot ?? oauth2ClientSecretSlot(oauth2.securitySchemeName);
 function EditOpenApiSource(props) {
   const displayScope = useScope();
-  const scopeStack = useScopeStack();
   const userScope = useUserScope();
   const sourceSummaryResult = useAtomValue(sourceAtom(props.sourceId, displayScope));
   const sourceSummary = AsyncResult.isSuccess(sourceSummaryResult) && sourceSummaryResult.value ? sourceSummaryResult.value : null;
   const sourceScopeId = sourceSummary?.scopeId ?? displayScope;
   const sourceScope = ScopeId.make(sourceScopeId);
-  const scopeRanks = useMemo(
-    () => new Map(scopeStack.map((scope, index) => [scope.id, index])),
-    [scopeStack]
-  );
+  const {
+    credentialScopes,
+    credentialScopeOptions,
+    organizationCredentialScope,
+    secretBindingScopes,
+    scopeRanks
+  } = useSourceCredentialBindingScopes({ sourceScope });
   const sourceResult = useAtomValue(openApiSourceAtom(sourceScope, props.sourceId));
   const bindingsResult = useAtomValue(
     openApiSourceBindingsAtom(displayScope, props.sourceId, sourceScope)
   );
   const connectionsResult = useAtomValue(connectionsAtom(displayScope));
   const secretList = useSecretPickerSecrets();
-  const doUpdate = useAtomSet(updateOpenApiSource, { mode: "promiseExit" });
-  const doSetBinding = useAtomSet(setOpenApiSourceBinding, {
-    mode: "promiseExit"
-  });
-  const doRemoveBinding = useAtomSet(removeOpenApiSourceBinding, {
+  const doConfigure = useAtomSet(configureSource, { mode: "promiseExit" });
+  const doSetBinding = useAtomSet(setSourceCredentialBinding, {
     mode: "promiseExit"
   });
   const doStartOAuth = useAtomSet(startOAuth, { mode: "promiseExit" });
@@ -115,11 +131,20 @@ function EditOpenApiSource(props) {
   const [sourceSaveState, setSourceSaveState] = useState("idle");
   const [error, setError] = useState(null);
   const [busyKey, setBusyKey] = useState(null);
+  const sourceBindingWriter = useSourceCredentialBindingWriter({
+    displayScope,
+    source: { id: props.sourceId, scope: sourceScope },
+    onError: setError,
+    errorMessageFromExit
+  });
   const [pendingOAuthConnection, setPendingOAuthConnection] = useState(null);
   const [loadedSourceKey, setLoadedSourceKey] = useState(null);
   const [selectedOAuthTokenScope, setSelectedOAuthTokenScope] = useState(
     userScope !== sourceScopeId ? userScope : sourceScopeId
   );
+  const [selectedOAuthClientIdScope, setSelectedOAuthClientIdScope] = useState(sourceScopeId);
+  const [selectedOAuthClientSecretScope, setSelectedOAuthClientSecretScope] = useState(sourceScopeId);
+  const [oauthEndpointsOpen, setOAuthEndpointsOpen] = useState(false);
   const [oauth2AuthorizationUrl, setOAuth2AuthorizationUrl] = useState(
     source?.config.oauth2?.authorizationUrl ?? ""
   );
@@ -141,6 +166,8 @@ function EditOpenApiSource(props) {
   const oauth2EndpointsSaveSeq = useRef(0);
   useEffect(() => {
     setSelectedOAuthTokenScope(userScope !== sourceScopeId ? userScope : sourceScopeId);
+    setSelectedOAuthClientIdScope(sourceScopeId);
+    setSelectedOAuthClientSecretScope(sourceScopeId);
   }, [sourceScopeId, userScope]);
   useEffect(() => {
     if (!source) return;
@@ -151,6 +178,7 @@ function EditOpenApiSource(props) {
     setOAuth2AuthorizationUrl(source.config.oauth2?.authorizationUrl ?? "");
     setOAuth2TokenUrl(source.config.oauth2?.tokenUrl ?? "");
     setOAuth2EndpointsSaveState("idle");
+    setOAuthEndpointsOpen(false);
     setSourceSaveState("idle");
     setLoadedSourceKey(sourceKey);
   }, [loadedSourceKey, source, sourceScopeId]);
@@ -170,12 +198,17 @@ function EditOpenApiSource(props) {
       setSourceSaveState("saving");
       setError(null);
       void (async () => {
-        const exit = await doUpdate({
-          params: { scopeId: displayScope, namespace: props.sourceId },
+        const exit = await doConfigure({
+          params: { scopeId: displayScope },
           payload: {
-            sourceScope,
-            name: nextName || void 0,
-            baseUrl: nextBaseUrl || void 0
+            source: { id: props.sourceId, scope: sourceScope },
+            scope: sourceScope,
+            type: "openapi",
+            config: {
+              scope: sourceScope,
+              name: nextName || void 0,
+              baseUrl: nextBaseUrl || void 0
+            }
           },
           reactivityKeys: openApiWriteKeys
         });
@@ -195,7 +228,7 @@ function EditOpenApiSource(props) {
   }, [
     baseUrl,
     displayScope,
-    doUpdate,
+    doConfigure,
     loadedSourceKey,
     name,
     props.sourceId,
@@ -236,29 +269,6 @@ function EditOpenApiSource(props) {
     }
     return slots;
   }, [source]);
-  const credentialScopes = useMemo(() => {
-    const entries = [{ scopeId: ScopeId.make(sourceScopeId), label: "Organization" }];
-    if (userScope !== sourceScopeId) {
-      entries.unshift({ scopeId: ScopeId.make(userScope), label: "Personal" });
-    } else {
-      entries[0] = {
-        scopeId: ScopeId.make(sourceScopeId),
-        label: "Credentials"
-      };
-    }
-    return entries;
-  }, [sourceScopeId, userScope]);
-  const credentialScopeOptions = useMemo(
-    () => credentialScopes.map((entry) => ({
-      scopeId: entry.scopeId,
-      label: entry.label,
-      description: entry.label === "Personal" ? "Saved only for your account." : "Shared with everyone who can use this source."
-    })),
-    [credentialScopes]
-  );
-  const organizationCredentialScope = credentialScopes.find((entry) => entry.label === "Organization") ?? credentialScopes[0];
-  const personalCredentialScope = credentialScopes.find((entry) => entry.label === "Personal") ?? null;
-  const secretBindingScopes = personalCredentialScope && personalCredentialScope.scopeId !== organizationCredentialScope.scopeId ? [organizationCredentialScope, personalCredentialScope] : [organizationCredentialScope];
   const activeOAuthTokenScope = credentialScopes.find((entry) => entry.scopeId === selectedOAuthTokenScope) ?? credentialScopes[0];
   const activeOAuthTokenScopeId = activeOAuthTokenScope.scopeId;
   const activeOAuthTokenScopeLabel = activeOAuthTokenScope.label;
@@ -268,50 +278,10 @@ function EditOpenApiSource(props) {
       /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Loading configuration\u2026" })
     ] });
   }
-  const setSecretBinding = async (targetScope, slot, secretId, secretScope) => {
-    const inputKey = `${targetScope}:${slot}`;
-    const trimmed = secretId.trim();
-    if (!trimmed) return;
-    setBusyKey(inputKey);
-    setError(null);
-    const exit = await doSetBinding({
-      params: { scopeId: displayScope },
-      payload: OpenApiSourceBindingInput.make({
-        sourceId: props.sourceId,
-        sourceScope,
-        scope: targetScope,
-        slot,
-        value: {
-          kind: "secret",
-          secretId: SecretId.make(trimmed),
-          secretScopeId: secretScope
-        }
-      }),
-      reactivityKeys: sourceWriteKeys
-    });
-    if (Exit.isFailure(exit)) {
-      setError(errorMessageFromExit(exit, "Failed to save credential binding"));
-    }
-    setBusyKey(null);
-  };
-  const clearBinding = async (targetScope, slot) => {
-    setBusyKey(`${targetScope}:${slot}:clear`);
-    setError(null);
-    const exit = await doRemoveBinding({
-      params: { scopeId: displayScope },
-      payload: {
-        sourceId: props.sourceId,
-        sourceScope,
-        slot,
-        scope: targetScope
-      },
-      reactivityKeys: sourceWriteKeys
-    });
-    if (Exit.isFailure(exit)) {
-      setError(errorMessageFromExit(exit, "Failed to clear credential binding"));
-    }
-    setBusyKey(null);
-  };
+  const oauthClientSecretSlot = source.config.oauth2 ? effectiveClientSecretSlot(source.config.oauth2) : null;
+  const nonOAuthSecretSlots = secretSlots.filter(
+    (slot) => slot.kind === "secret" && (!source.config.oauth2 || slot.slot !== source.config.oauth2.clientIdSlot && slot.slot !== oauthClientSecretSlot)
+  );
   const connectOAuth = async (targetScope) => {
     const oauth2 = source.config.oauth2;
     if (!oauth2) return;
@@ -333,11 +303,13 @@ function EditOpenApiSource(props) {
       return;
     }
     const clientIdSecretId = clientIdBinding.value.secretId;
+    const clientIdSecretScopeId = clientIdBinding.value.secretScopeId ?? clientIdBinding.scopeId;
     if (oauth2.flow === "clientCredentials" && (!clientSecretBinding || !isSecretCredentialBindingValue(clientSecretBinding.value))) {
       setError("Client secret must be bound before connecting");
       return;
     }
     const clientSecretValue = oauth2.flow === "clientCredentials" && clientSecretBinding && isSecretCredentialBindingValue(clientSecretBinding.value) ? clientSecretBinding.value : null;
+    const clientSecretSecretScopeId = clientSecretBinding && isSecretCredentialBindingValue(clientSecretBinding.value) ? clientSecretBinding.value.secretScopeId ?? clientSecretBinding.scopeId : null;
     const existingConnection = exactCredentialBindingForScope(
       bindingRows,
       oauth2.connectionSlot,
@@ -370,7 +342,9 @@ function EditOpenApiSource(props) {
             kind: "client-credentials",
             tokenEndpoint: tokenUrl,
             clientIdSecretId,
+            clientIdSecretScopeId: String(clientIdSecretScopeId),
             clientSecretSecretId: clientSecretValue.secretId,
+            clientSecretSecretScopeId: clientSecretSecretScopeId ? String(clientSecretSecretScopeId) : null,
             scopes: [...oauth2.scopes]
           },
           pluginId: "openapi",
@@ -388,11 +362,10 @@ function EditOpenApiSource(props) {
       }
       const setBindingExit = await doSetBinding({
         params: { scopeId: displayScope },
-        payload: OpenApiSourceBindingInput.make({
-          sourceId: props.sourceId,
-          sourceScope,
+        payload: SetSourceCredentialBindingInput.make({
+          source: { id: props.sourceId, scope: sourceScope },
           scope: targetScope,
-          slot: oauth2.connectionSlot,
+          slotKey: oauth2.connectionSlot,
           value: {
             kind: "connection",
             connectionId: ConnectionId.make(response2.completedConnection.connectionId)
@@ -426,7 +399,9 @@ function EditOpenApiSource(props) {
           tokenEndpoint: tokenUrl,
           issuerUrl,
           clientIdSecretId,
+          clientIdSecretScopeId: String(clientIdSecretScopeId),
           clientSecretSecretId: clientSecretBinding && isSecretCredentialBindingValue(clientSecretBinding.value) ? clientSecretBinding.value.secretId : null,
+          clientSecretSecretScopeId: clientSecretSecretScopeId ? String(clientSecretSecretScopeId) : null,
           scopes: [...oauth2.scopes]
         },
         pluginId: "openapi",
@@ -451,11 +426,10 @@ function EditOpenApiSource(props) {
       onSuccess: async (result) => {
         const setBindingExit = await doSetBinding({
           params: { scopeId: displayScope },
-          payload: OpenApiSourceBindingInput.make({
-            sourceId: props.sourceId,
-            sourceScope,
+          payload: SetSourceCredentialBindingInput.make({
+            source: { id: props.sourceId, scope: sourceScope },
             scope: targetScope,
-            slot: oauth2.connectionSlot,
+            slotKey: oauth2.connectionSlot,
             value: {
               kind: "connection",
               connectionId: ConnectionId.make(result.connectionId)
@@ -497,23 +471,28 @@ function EditOpenApiSource(props) {
       }
     ),
     /* @__PURE__ */ jsx(CardStack, { children: /* @__PURE__ */ jsxs(CardStackContent, { className: "border-t-0", children: [
-      /* @__PURE__ */ jsx(CardStackEntry, { children: /* @__PURE__ */ jsx(CardStackEntryContent, { children: /* @__PURE__ */ jsx(CardStackEntryTitle, { children: "Secrets" }) }) }),
-      /* @__PURE__ */ jsx(
-        SecretCredentialSlotBindings,
-        {
-          slots: secretSlots.filter((slot) => slot.kind === "secret"),
-          bindingScopes: secretBindingScopes,
-          bindingRows,
-          scopeRanks,
-          secrets: secretList,
-          sourceId: props.sourceId,
-          sourceName: source.name,
-          credentialScopeOptions,
-          busyKey,
-          onSetSecretBinding: setSecretBinding,
-          onClearBinding: clearBinding
-        }
-      ),
+      nonOAuthSecretSlots.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(CardStackEntry, { children: /* @__PURE__ */ jsxs(CardStackEntryContent, { children: [
+          /* @__PURE__ */ jsx(CardStackEntryTitle, { children: "Request credentials" }),
+          /* @__PURE__ */ jsx(CardStackEntryDescription, { children: "Headers and query parameters sent with every API request." })
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          SecretCredentialSlotBindings,
+          {
+            slots: nonOAuthSecretSlots,
+            bindingScopes: secretBindingScopes,
+            bindingRows,
+            scopeRanks,
+            secrets: secretList,
+            sourceId: props.sourceId,
+            sourceName: source.name,
+            credentialScopeOptions,
+            busyKey: sourceBindingWriter.busyKey,
+            onSetSecretBinding: sourceBindingWriter.setSecretBinding,
+            onClearBinding: sourceBindingWriter.clearBinding
+          }
+        )
+      ] }),
       source.config.oauth2 && (() => {
         const oauth2 = source.config.oauth2;
         const trimmedAuthUrl = oauth2AuthorizationUrl.trim();
@@ -529,22 +508,27 @@ function EditOpenApiSource(props) {
           const seq = ++oauth2EndpointsSaveSeq.current;
           setOAuth2EndpointsSaveState("saving");
           setError(null);
-          const exit = await doUpdate({
-            params: { scopeId: displayScope, namespace: props.sourceId },
+          const exit = await doConfigure({
+            params: { scopeId: displayScope },
             payload: {
-              sourceScope,
-              oauth2: OAuth2SourceConfig.make({
-                kind: "oauth2",
-                securitySchemeName: oauth2.securitySchemeName,
-                flow: oauth2.flow,
-                tokenUrl: trimmedTokenUrl,
-                authorizationUrl: isAuthCode ? trimmedAuthUrl || null : null,
-                issuerUrl: oauth2.issuerUrl ?? null,
-                clientIdSlot: oauth2.clientIdSlot,
-                clientSecretSlot: oauth2.clientSecretSlot,
-                connectionSlot: oauth2.connectionSlot,
-                scopes: [...oauth2.scopes]
-              })
+              source: { id: props.sourceId, scope: sourceScope },
+              scope: sourceScope,
+              type: "openapi",
+              config: {
+                scope: sourceScope,
+                oauth2Source: OAuth2SourceConfig.make({
+                  kind: "oauth2",
+                  securitySchemeName: oauth2.securitySchemeName,
+                  flow: oauth2.flow,
+                  tokenUrl: trimmedTokenUrl,
+                  authorizationUrl: isAuthCode ? trimmedAuthUrl || null : null,
+                  issuerUrl: oauth2.issuerUrl ?? null,
+                  clientIdSlot: oauth2.clientIdSlot,
+                  clientSecretSlot: oauth2.clientSecretSlot,
+                  connectionSlot: oauth2.connectionSlot,
+                  scopes: [...oauth2.scopes]
+                })
+              }
             },
             reactivityKeys: openApiWriteKeys
           });
@@ -580,78 +564,203 @@ function EditOpenApiSource(props) {
         const isConnected = connection !== null && connection !== void 0;
         const statusText = isConnecting || isPendingOAuthConnection ? "Saving OAuth connection..." : connectionBinding && bindingScopeId ? connection ? bindingScopeId === activeOAuthTokenScopeId ? `Connected in ${activeOAuthTokenScopeLabel.toLowerCase()} as ${connection.identityLabel ?? connection.id}` : `Using organization connection ${connection.identityLabel ?? connection.id}` : bindingScopeId === activeOAuthTokenScopeId ? `Saved connection is missing in ${activeOAuthTokenScopeLabel.toLowerCase()}` : "Organization connection is missing" : `No ${activeOAuthTokenScopeLabel.toLowerCase()} connection`;
         const connectDisabled = isConnecting || endpointsDirty || saving;
+        const clientSecretSlot = effectiveClientSecretSlot(oauth2);
+        const renderAppSecret = (input) => {
+          const activeScope = credentialScopes.find((entry) => entry.scopeId === input.scopeId) ?? organizationCredentialScope;
+          const exactSecret = exactCredentialBindingForScope(
+            bindingRows,
+            input.slot,
+            activeScope.scopeId
+          );
+          const effectiveSecret = effectiveCredentialBindingForScope(
+            bindingRows,
+            input.slot,
+            activeScope.scopeId,
+            scopeRanks
+          );
+          const exactSecretId = exactSecret && isSecretCredentialBindingValue(exactSecret.value) ? exactSecret.value.secretId : null;
+          const inheritedSecret = !exactSecretId && effectiveSecret && effectiveSecret.scopeId !== activeScope.scopeId && isSecretCredentialBindingValue(effectiveSecret.value) ? effectiveSecret : null;
+          const status = exactSecretId ? `${activeScope.label} credential set` : inheritedSecret ? "Using organization credential" : "Not set";
+          const inputKey = `${activeScope.scopeId}:${input.slot}`;
+          const clearKey = `${activeScope.scopeId}:${input.slot}:clear`;
+          return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+            /* @__PURE__ */ jsxs(FieldLabel, { className: "text-[11px]", children: [
+              input.label,
+              " ",
+              input.hint && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                "\xB7 ",
+                input.hint
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "grid gap-2 md:grid-cols-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                  /* @__PURE__ */ jsx(FieldLabel, { className: "text-[11px]", children: "Secret" }),
+                  /* @__PURE__ */ jsxs(HelpTooltip, { label: `${input.label} secret`, children: [
+                    "Select or create the OAuth ",
+                    input.label.toLowerCase(),
+                    " secret."
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: "ml-auto truncate text-xs text-muted-foreground", children: status })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
+                    CreatableSecretPicker,
+                    {
+                      value: exactSecretId,
+                      onSelect: (secretId, secretScopeId) => void sourceBindingWriter.setSecretBinding(
+                        activeScope.scopeId,
+                        input.slot,
+                        secretId,
+                        secretScopeId ?? activeScope.scopeId
+                      ),
+                      secrets: secretList,
+                      placeholder: "Select or create a secret",
+                      targetScope: activeScope.scopeId,
+                      credentialScopeOptions,
+                      suggestedId: `source-binding-${slugify(props.sourceId)}-${slugify(
+                        input.slot
+                      )}-${slugify(activeScope.scopeId)}`,
+                      sourceName: source.name,
+                      secretLabel: input.label
+                    }
+                  ) }),
+                  exactSecretId && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "outline",
+                      size: "sm",
+                      onClick: () => void sourceBindingWriter.clearBinding(
+                        activeScope.scopeId,
+                        input.slot
+                      ),
+                      disabled: sourceBindingWriter.busyKey === clearKey,
+                      children: "Clear"
+                    }
+                  ),
+                  sourceBindingWriter.busyKey === inputKey && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Saving\u2026" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                CredentialScopeDropdown,
+                {
+                  value: activeScope.scopeId,
+                  options: credentialScopeOptions,
+                  onChange: input.onScopeChange,
+                  label: "Used by",
+                  help: `Choose where this OAuth ${input.label.toLowerCase()} credential lives.`
+                }
+              )
+            ] })
+          ] });
+        };
         return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(CardStackEntry, { children: /* @__PURE__ */ jsxs(CardStackEntryContent, { children: [
+            /* @__PURE__ */ jsx(CardStackEntryTitle, { children: "OAuth" }),
+            /* @__PURE__ */ jsx(CardStackEntryDescription, { children: "Configure app credentials and connect accounts for this source." })
+          ] }) }),
+          /* @__PURE__ */ jsx(CardStackEntryField, { label: "OAuth app credentials", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4 rounded-lg border border-border/60 bg-muted/10 p-3", children: [
+            renderAppSecret({
+              slot: oauth2.clientIdSlot,
+              label: "Client ID",
+              scopeId: ScopeId.make(selectedOAuthClientIdScope),
+              onScopeChange: setSelectedOAuthClientIdScope
+            }),
+            renderAppSecret({
+              slot: clientSecretSlot,
+              label: "Client secret",
+              hint: oauth2.flow === "authorizationCode" ? "Optional for public clients with PKCE" : void 0,
+              scopeId: ScopeId.make(selectedOAuthClientSecretScope),
+              onScopeChange: setSelectedOAuthClientSecretScope
+            })
+          ] }) }),
+          /* @__PURE__ */ jsx(CardStackEntryField, { label: "Account connection", children: /* @__PURE__ */ jsx(
+            CredentialUsageRow,
+            {
+              value: activeOAuthTokenScopeId,
+              options: credentialScopeOptions,
+              onChange: setSelectedOAuthTokenScope,
+              label: "Connection saved to",
+              help: "Choose where the signed-in OAuth token is saved.",
+              children: /* @__PURE__ */ jsxs(
+                CredentialControlField,
+                {
+                  label: "OAuth connection",
+                  help: "Start the provider OAuth flow.",
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex min-h-9 items-center gap-2 rounded-md border border-border bg-muted/30 px-3 py-2", children: [
+                      /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-xs text-muted-foreground", children: statusText }),
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          size: "sm",
+                          onClick: () => void connectOAuth(activeOAuthTokenScopeId),
+                          disabled: connectDisabled,
+                          children: isConnecting ? "Connecting\u2026" : isConnected ? "Reconnect" : "Connect"
+                        }
+                      )
+                    ] }),
+                    endpointsDirty && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Save endpoint changes before reconnecting." })
+                  ]
+                }
+              )
+            }
+          ) }),
           /* @__PURE__ */ jsxs(CardStackEntry, { children: [
             /* @__PURE__ */ jsxs(CardStackEntryContent, { children: [
-              /* @__PURE__ */ jsx(CardStackEntryTitle, { children: "OAuth Endpoints" }),
-              /* @__PURE__ */ jsx(CardStackEntryDescription, { children: "Override the URLs from the OpenAPI spec when a provider publishes the wrong values." })
+              /* @__PURE__ */ jsx(CardStackEntryTitle, { children: "Advanced endpoints" }),
+              /* @__PURE__ */ jsx(CardStackEntryDescription, { children: "Override provider URLs only when the OpenAPI spec is wrong." })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
               oauth2EndpointsSaveState !== "idle" && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: saving ? "Saving\u2026" : "Saved" }),
               /* @__PURE__ */ jsx(
                 Button,
                 {
+                  variant: "outline",
                   size: "sm",
-                  onClick: () => void saveOAuth2Endpoints(),
-                  disabled: !canSave,
-                  children: "Save"
+                  onClick: () => setOAuthEndpointsOpen((open) => !open),
+                  children: oauthEndpointsOpen ? "Hide" : endpointsDirty ? "Review" : "Show"
                 }
               )
             ] })
           ] }),
-          isAuthCode && /* @__PURE__ */ jsx(CardStackEntryField, { label: "Authorization URL", children: /* @__PURE__ */ jsx(
-            Input,
-            {
-              value: oauth2AuthorizationUrl,
-              onChange: (e) => setOAuth2AuthorizationUrl(e.target.value),
-              className: "font-mono text-sm"
-            }
-          ) }),
-          /* @__PURE__ */ jsx(CardStackEntryField, { label: "Token URL", children: /* @__PURE__ */ jsx(
-            Input,
-            {
-              value: oauth2TokenUrl,
-              onChange: (e) => setOAuth2TokenUrl(e.target.value),
-              className: "font-mono text-sm"
-            }
-          ) }),
-          /* @__PURE__ */ jsx(CardStackEntryField, { label: "Redirect URL", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 rounded-md border border-border bg-background/50 px-2.5 py-1.5 font-mono text-[11px]", children: [
-              /* @__PURE__ */ jsx("span", { className: "truncate flex-1 text-foreground", children: oauth2RedirectUrl }),
-              /* @__PURE__ */ jsx(CopyButton, { value: oauth2RedirectUrl })
-            ] }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Add this to your OAuth app's allowed redirects." })
-          ] }) }),
-          credentialScopes.length > 1 && /* @__PURE__ */ jsxs(CardStackEntry, { children: [
-            /* @__PURE__ */ jsxs(CardStackEntryContent, { children: [
-              /* @__PURE__ */ jsx(CardStackEntryTitle, { children: "OAuth token" }),
-              /* @__PURE__ */ jsx(CardStackEntryDescription, { children: "Choose where the signed-in OAuth token is saved." })
-            ] }),
-            /* @__PURE__ */ jsx(
-              FilterTabs,
+          oauthEndpointsOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+            isAuthCode && /* @__PURE__ */ jsx(CardStackEntryField, { label: "Authorization URL", children: /* @__PURE__ */ jsx(
+              Input,
               {
-                tabs: credentialScopes.map((entry) => ({
-                  value: entry.scopeId,
-                  label: entry.label
-                })),
-                value: activeOAuthTokenScopeId,
-                onChange: setSelectedOAuthTokenScope
+                value: oauth2AuthorizationUrl,
+                onChange: (e) => setOAuth2AuthorizationUrl(e.target.value),
+                className: "font-mono text-sm"
               }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(CardStackEntryField, { label: "OAuth Connection", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: statusText }),
-            /* @__PURE__ */ jsx(
-              Button,
+            ) }),
+            /* @__PURE__ */ jsx(CardStackEntryField, { label: "Token URL", children: /* @__PURE__ */ jsx(
+              Input,
               {
-                size: "sm",
-                onClick: () => void connectOAuth(activeOAuthTokenScopeId),
-                disabled: connectDisabled,
-                children: isConnecting ? "Connecting\u2026" : isConnected ? "Reconnect" : "Connect"
+                value: oauth2TokenUrl,
+                onChange: (e) => setOAuth2TokenUrl(e.target.value),
+                className: "font-mono text-sm"
               }
-            ),
-            endpointsDirty && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Save endpoint changes before reconnecting." })
-          ] }) })
+            ) }),
+            /* @__PURE__ */ jsx(CardStackEntryField, { label: "Redirect URL", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 rounded-md border border-border bg-background/50 px-2.5 py-1.5 font-mono text-[11px]", children: [
+                /* @__PURE__ */ jsx("span", { className: "truncate flex-1 text-foreground", children: oauth2RedirectUrl }),
+                /* @__PURE__ */ jsx(CopyButton, { value: oauth2RedirectUrl })
+              ] }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Add this to your OAuth app's allowed redirects." })
+            ] }) }),
+            /* @__PURE__ */ jsxs(CardStackEntry, { children: [
+              /* @__PURE__ */ jsx(CardStackEntryContent, { children: /* @__PURE__ */ jsx(CardStackEntryDescription, { children: "Save endpoint changes before reconnecting." }) }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "sm",
+                  onClick: () => void saveOAuth2Endpoints(),
+                  disabled: !canSave,
+                  children: "Save endpoints"
+                }
+              )
+            ] })
+          ] })
         ] });
       })()
     ] }) }),
@@ -662,4 +771,4 @@ function EditOpenApiSource(props) {
 export {
   EditOpenApiSource as default
 };
-//# sourceMappingURL=EditOpenApiSource-I4NIGIIJ.js.map
+//# sourceMappingURL=EditOpenApiSource-AOA7APR2.js.map