lael-labs/executor

apps/cloud/drizzle/0015_add_credential_binding_secret_scope.sql+2−0

@@ -0,0 +1,2 @@
	1	ALTER TABLE "credential_binding" ADD COLUMN "secret_scope_id" text;--> statement-breakpoint
	2	CREATE INDEX "credential_binding_secret_scope_id_idx" ON "credential_binding" USING btree ("secret_scope_id");

apps/cloud/drizzle/meta/_journal.json+7−0

@@ -106,6 +106,13 @@ · 105 unmodified lines
106	"when": 1778192434062,	106	"when": 1778192434062,
107	"tag": "0014_repair_openapi_oauth_cutover_residue",	107	"tag": "0014_repair_openapi_oauth_cutover_residue",
108	"breakpoints": true	108	"breakpoints": true
		109	},
		110	{
		111	"idx": 15,
		112	"version": "7",
		113	"when": 1778192434063,
		114	"tag": "0015_add_credential_binding_secret_scope",
		115	"breakpoints": true
109	}	116	}
110	]	117	]
111	}	118	}

apps/cloud/src/services/executor-schema.ts+2−0

     kind: text("kind").notNull(),
     text_value: text("text_value"),
     secret_id: text("secret_id"),
+    secret_scope_id: text("secret_scope_id"),
     connection_id: text("connection_id"),
     created_at: timestamp("created_at").notNull(),
     updated_at: timestamp("updated_at").notNull(),
     index("credential_binding_slot_key_idx").on(table.slot_key),
     index("credential_binding_kind_idx").on(table.kind),
     index("credential_binding_secret_id_idx").on(table.secret_id),
+    index("credential_binding_secret_scope_id_idx").on(table.secret_scope_id),
     index("credential_binding_connection_id_idx").on(table.connection_id),
   ],
 );

apps/cloud/src/services/sources-api.node.test.ts+2−0

           value: {
             kind: "secret",
             secretId: SecretId.make("alice_pat"),
+            secretScopeId: ScopeId.make(aliceScope),
           },
         }),
       );
           value: {
             kind: "secret",
             secretId: SecretId.make("bob_pat"),
+            secretScopeId: ScopeId.make(bobScope),
           },
         }),
       );

apps/local/drizzle/0010_add_credential_binding_secret_scope.sql+2−0

@@ -0,0 +1,2 @@
	1	ALTER TABLE `credential_binding` ADD COLUMN `secret_scope_id` text;--> statement-breakpoint
	2	CREATE INDEX `credential_binding_secret_scope_id_idx` ON `credential_binding` (`secret_scope_id`);

apps/local/drizzle/meta/_journal.json+7−0

@@ -71,6 +71,13 @@ · 70 unmodified lines
71	"when": 1778192434062,	71	"when": 1778192434062,
72	"tag": "0009_repair_openapi_oauth_cutover_residue",	72	"tag": "0009_repair_openapi_oauth_cutover_residue",
73	"breakpoints": true	73	"breakpoints": true
		74	},
		75	{
		76	"idx": 10,
		77	"version": "6",
		78	"when": 1778192434063,
		79	"tag": "0010_add_credential_binding_secret_scope",
		80	"breakpoints": true
74	}	81	}
75	]	82	]
76	}	83	}

apps/local/src/server/executor-schema.ts+2−0

     kind: text("kind").notNull(),
     text_value: text("text_value"),
     secret_id: text("secret_id"),
+    secret_scope_id: text("secret_scope_id"),
     connection_id: text("connection_id"),
     created_at: integer("created_at", { mode: "timestamp_ms" }).notNull(),
     updated_at: integer("updated_at", { mode: "timestamp_ms" }).notNull(),
     index("credential_binding_slot_key_idx").on(table.slot_key),
     index("credential_binding_kind_idx").on(table.kind),
     index("credential_binding_secret_id_idx").on(table.secret_id),
+    index("credential_binding_secret_scope_id_idx").on(table.secret_scope_id),
     index("credential_binding_connection_id_idx").on(table.connection_id),
   ],
 );

apps/local/src/server/migrate-oauth-connections.test.ts+1−3

       );
     `);
-    db.prepare(
+    db.prepare("INSERT INTO `openapi_source` (id, scope_id, oauth2) VALUES (?, ?, ?)").run(
-      "INSERT INTO `openapi_source` (id, scope_id, oauth2) VALUES (?, ?, ?)",
-    ).run(
       "dealcloud_api",
       "org-1",
       JSON.stringify({

notes/product-scope-language.md+47−0

@@ -0,0 +1,47 @@
	1	# Product Scope Language
	2
	3	Executor has a real scope model, but the product should mostly avoid saying
	4	"scope" to users. Use ownership and usage language instead.
	5
	6	## Product Terms
	7
	8	- Personal: only this user can use or update the credential/connection.
	9	- Organization: everyone with access to the source can use the shared
	10	credential/connection.
	11	- Source owner: where the source definition and shared auth method live.
	12	This is usually implicit from the current page/context and should not be
	13	shown as debug information.
	14	- Used by: who uses a specific credential value for a shared auth slot.
	15	- Saved to: where a newly created secret or OAuth token/connection is
	16	stored.
	17
	18	## UI Rules
	19
	20	- Communicate source auth as two separate choices:
	21	- the shared authentication method for the source, such as bearer header,
	22	query parameter, or OAuth;
	23	- the credential/connection value used for that method.
	24	- Do not imply users can change the auth method per person when the backend only
	25	allows credential values to vary per scope.
	26	- Put secret storage choices in the new-secret flow, because choosing Personal
	27	or Organization there creates a reusable secret at that ownership level.
	28	- Put credential usage choices next to the credential picker as Used by,
	29	because attaching a secret to a source slot is separate from where the secret
	30	itself is stored.
	31	- Put OAuth token/connection storage next to Connect via OAuth as **Token
	32	saved to**. This is independent from OAuth client ID/client secret storage.
	33	- Secret lists should show secrets from all visible ownership levels with a
	34	Personal/Organization badge.
	35
	36	## Preferred Copy
	37
	38	- Use "Personal" and "Organization" for selectors.
	39	- Use "Used by" for source credential bindings.
	40	- Use "Save secret to" in secret creation.
	41	- Use "Token saved to" for OAuth sign-in results.
	42	- Use "Add without credentials" whenever the source can be added with missing
	43	initial credential values, not only for OAuth.
	44
	45	Avoid copy like "scope", "target scope", "source scope", "binding scope", or
	46	"credential target scope" in product UI unless it is explicitly a developer or
	47	debug surface.

packages/core/sdk/src/core-schema.ts+3−1

       kind: { type: credentialBindingKinds, required: true, index: true },
       text_value: { type: "string", required: false },
       secret_id: { type: "string", required: false, index: true },
+      secret_scope_id: { type: "string", required: false, index: true },
       connection_id: { type: "string", required: false, index: true },
       created_at: { type: "date", required: true },
       updated_at: { type: "date", required: true },
 type CredentialBindingRowFields = InferDBFieldsOutput<CoreSchema["credential_binding"]["fields"]>;
 type CredentialBindingRowBase = Omit<
   CredentialBindingRowFields,
-  "kind" | "text_value" | "secret_id" | "connection_id"
+  "kind" | "text_value" | "secret_id" | "secret_scope_id" | "connection_id"
 >;
 export type CredentialBindingRow = CredentialBindingRowBase &
     | {
         kind: "secret";
         secret_id: string;
+        secret_scope_id?: string;
       }
     | {
         kind: "connection";

packages/core/sdk/src/credential-bindings.test.ts+127−1

@@ -437,7 +437,10 @@ describe("credential bindings", () => { · 436 unmodified lines
437	sourceId: TEST_SOURCE_ID,	437	sourceId: TEST_SOURCE_ID,
438	sourceScope: harness.scopes.org.id,	438	sourceScope: harness.scopes.org.id,
439	slotKey: "oauth.connection",	439	slotKey: "oauth.connection",
440	value: { kind: "connection", connectionId: ConnectionId.make("oauth-connection") },	440	value: {
		441	kind: "connection",
		442	connectionId: ConnectionId.make("oauth-connection"),
		443	},
441	});	444	});
442		445
443	const userB = yield* harness.create([harness.scopes.userWorkspaceB, harness.scopes.org]);	446	const userB = yield* harness.create([harness.scopes.userWorkspaceB, harness.scopes.org]);
@@ -608,4 +611,127 @@ describe("credential bindings", () => { · 164 unmodified lines
608	expect(Predicate.isTagged("SecretInUseError")(result.failure)).toBe(true);	611	expect(Predicate.isTagged("SecretInUseError")(result.failure)).toBe(true);
609	}),	612	}),
610	);	613	);
		614
		615	it.effect("a personal binding can point at an organization-owned secret", () =>
		616	Effect.gen(function* () {
		617	const harness = makeHarness();
		618	const orgExecutor = yield* harness.create([harness.scopes.org]);
		619	yield* orgExecutor.credentialTest.registerSource(harness.scopes.org.id);
		620	yield* setSecret(orgExecutor, harness.scopes.org.id, "shared-token-id", "sk-org");
		621
		622	const userExecutor = yield* harness.create([
		623	harness.scopes.userWorkspaceA,
		624	harness.scopes.org,
		625	]);
		626
		627	const binding = yield* userExecutor.credentialBindings.set({
		628	targetScope: harness.scopes.userWorkspaceA.id,
		629	pluginId: TEST_PLUGIN_ID,
		630	sourceId: TEST_SOURCE_ID,
		631	sourceScope: harness.scopes.org.id,
		632	slotKey: TEST_SLOT,
		633	value: {
		634	kind: "secret",
		635	secretId: SecretId.make("shared-token-id"),
		636	secretScopeId: harness.scopes.org.id,
		637	},
		638	});
		639
		640	expect(binding.scopeId).toBe(harness.scopes.userWorkspaceA.id);
		641	expect(binding.value).toMatchObject({
		642	kind: "secret",
		643	secretId: SecretId.make("shared-token-id"),
		644	secretScopeId: harness.scopes.org.id,
		645	});
		646
		647	const resolved = yield* userExecutor.credentialBindings.resolve({
		648	pluginId: TEST_PLUGIN_ID,
		649	sourceId: TEST_SOURCE_ID,
		650	sourceScope: harness.scopes.org.id,
		651	slotKey: TEST_SLOT,
		652	});
		653
		654	expect(resolved.status).toBe("resolved");
		655	expect(resolved.bindingScopeId).toBe(harness.scopes.userWorkspaceA.id);
		656	}),
		657	);
		658
		659	it.effect(
		660	"removing an organization secret is blocked when a personal binding references it",
		661	() =>
		662	Effect.gen(function* () {
		663	const harness = makeHarness();
		664	const orgExecutor = yield* harness.create([harness.scopes.org]);
		665	yield* orgExecutor.credentialTest.registerSource(harness.scopes.org.id);
		666	yield* setSecret(orgExecutor, harness.scopes.org.id, "shared-token-id", "sk-org");
		667
		668	const userExecutor = yield* harness.create([
		669	harness.scopes.userWorkspaceA,
		670	harness.scopes.org,
		671	]);
		672	yield* userExecutor.credentialBindings.set({
		673	targetScope: harness.scopes.userWorkspaceA.id,
		674	pluginId: TEST_PLUGIN_ID,
		675	sourceId: TEST_SOURCE_ID,
		676	sourceScope: harness.scopes.org.id,
		677	slotKey: TEST_SLOT,
		678	value: {
		679	kind: "secret",
		680	secretId: SecretId.make("shared-token-id"),
		681	secretScopeId: harness.scopes.org.id,
		682	},
		683	});
		684
		685	const result = yield* Effect.result(
		686	userExecutor.secrets.remove(
		687	new RemoveSecretInput({
		688	id: SecretId.make("shared-token-id"),
		689	targetScope: harness.scopes.org.id,
		690	}),
		691	),
		692	);
		693
		694	expect(Result.isFailure(result)).toBe(true);
		695	if (!Result.isFailure(result)) return;
		696	expect(Predicate.isTagged("SecretInUseError")(result.failure)).toBe(true);
		697	}),
		698	);
		699
		700	it.effect("rejects an organization binding to a personal secret", () =>
		701	Effect.gen(function* () {
		702	const harness = makeHarness();
		703	const orgExecutor = yield* harness.create([harness.scopes.org]);
		704	yield* orgExecutor.credentialTest.registerSource(harness.scopes.org.id);
		705
		706	const userExecutor = yield* harness.create([
		707	harness.scopes.userWorkspaceA,
		708	harness.scopes.org,
		709	]);
		710	yield* setSecret(
		711	userExecutor,
		712	harness.scopes.userWorkspaceA.id,
		713	"personal-token",
		714	"sk-user-a",
		715	);
		716
		717	const result = yield* Effect.result(
		718	userExecutor.credentialBindings.set({
		719	targetScope: harness.scopes.org.id,
		720	pluginId: TEST_PLUGIN_ID,
		721	sourceId: TEST_SOURCE_ID,
		722	sourceScope: harness.scopes.org.id,
		723	slotKey: TEST_SLOT,
		724	value: {
		725	kind: "secret",
		726	secretId: SecretId.make("personal-token"),
		727	secretScopeId: harness.scopes.userWorkspaceA.id,
		728	},
		729	}),
		730	);
		731
		732	expect(Result.isFailure(result)).toBe(true);
		733	if (!Result.isFailure(result)) return;
		734	expect(Predicate.isTagged("StorageError")(result.failure)).toBe(true);
		735	}),
		736	);
611	});	737	});

packages/core/sdk/src/credential-bindings.ts+11−1

   Schema.Struct({
     kind: Schema.Literal("secret"),
     secretId: SecretId,
+    secretScopeId: Schema.optional(ScopeId),
   }),
   Schema.Struct({
     kind: Schema.Literal("connection"),
 export const ConfiguredCredentialValue = Schema.Union([Schema.String, ConfiguredCredentialBinding]);
 export type ConfiguredCredentialValue = typeof ConfiguredCredentialValue.Type;
+export const ScopedSecretCredentialInput = Schema.Struct({
+  secretId: Schema.String,
+  prefix: Schema.optional(Schema.String),
+  targetScope: ScopeId,
+  secretScopeId: Schema.optional(ScopeId),
+});
+export type ScopedSecretCredentialInput = typeof ScopedSecretCredentialInput.Type;
 export class CredentialBindingRef extends Schema.Class<CredentialBindingRef>(
   "CredentialBindingRef",
 )({
       kind: "text" as const,
       text: text_value,
     })),
-    Match.when({ kind: "secret" }, ({ secret_id }) => ({
+    Match.when({ kind: "secret" }, ({ scope_id, secret_id, secret_scope_id }) => ({
       kind: "secret" as const,
       secretId: SecretId.make(secret_id),
+      secretScopeId: ScopeId.make(secret_scope_id ?? scope_id),
     })),
     Match.when({ kind: "connection" }, ({ connection_id }) => ({
       kind: "connection" as const,

packages/core/sdk/src/executor.ts+46−10

     ): Effect.Effect<string | null, SecretOwnedByConnectionError | StorageFailure> =>
       Effect.gen(function* () {
         yield* assertScopeInStack("secret get scope", scope);
-        const row = yield* findSecretRowAtScope({ secretId: id, scopeId: scope });
+        const row = yield* findSecretRowAtScope({
+          secretId: id,
+          scopeId: scope,
+        });
         if (row?.owned_by_connection_id) {
           return yield* new SecretOwnedByConnectionError({
             secretId: SecretId.make(id),
     ): Effect.Effect<string | null, StorageFailure> =>
       Effect.gen(function* () {
         yield* assertScopeInStack("connection secret get scope", scope);
-        const row = yield* findSecretRowAtScope({ secretId: id, scopeId: scope });
+        const row = yield* findSecretRowAtScope({
+          secretId: id,
+          scopeId: scope,
+        });
         return yield* resolveSecretValueAtScope(row, id);
       });
     ): Effect.Effect<ConnectionRef | null, StorageFailure> =>
       Effect.gen(function* () {
         yield* assertScopeInStack("connection get scope", scope);
-        const row = yield* findConnectionRowAtScope({ connectionId: id, scopeId: scope });
+        const row = yield* findConnectionRowAtScope({
+          connectionId: id,
+          scopeId: scope,
+        });
         return row ? rowToConnection(row) : null;
       });
     ): Effect.Effect<string, AccessTokenError> =>
       Effect.gen(function* () {
         yield* assertScopeInStack("connection accessToken scope", scope);
-        const row = yield* findConnectionRowAtScope({ connectionId: id, scopeId: scope });
+        const row = yield* findConnectionRowAtScope({
+          connectionId: id,
+          scopeId: scope,
+        });
         if (!row) {
           return yield* new ConnectionNotFoundError({
             connectionId: ConnectionId.make(id),
         }
         if (input.value.kind === "secret") {
+          const secretScope = input.value.secretScopeId ?? input.targetScope;
+          yield* assertScopeInStack("credential binding secretScope", secretScope);
+          if (scopePrecedence.get(secretScope)! < scopePrecedence.get(input.targetScope)!) {
+            return yield* new StorageError({
+              message:
+                `Cannot bind secret "${input.value.secretId}" from scope "${secretScope}" ` +
+                `to target scope "${input.targetScope}": shared bindings cannot reference inner-scope secrets.`,
+              cause: undefined,
+            });
+          }
           const secret = yield* findSecretRowAtScope({
             secretId: input.value.secretId,
-            scopeId: input.targetScope,
+            scopeId: secretScope,
           });
           if (!secret) {
             return yield* new StorageError({
               message:
-                `Cannot bind secret "${input.value.secretId}" at scope "${input.targetScope}": ` +
+                `Cannot bind secret "${input.value.secretId}" from scope "${secretScope}": ` +
-                `the secret must be owned by the same scope as the binding.`,
+                `the secret must be visible and owned by that scope.`,
               cause: undefined,
             });
           }
             kind: input.value.kind,
             text_value: input.value.kind === "text" ? input.value.text : undefined,
             secret_id: input.value.kind === "secret" ? input.value.secretId : undefined,
+            secret_scope_id:
+              input.value.kind === "secret"
+                ? (input.value.secretScopeId ?? input.targetScope)
+                : undefined,
             connection_id: input.value.kind === "connection" ? input.value.connectionId : undefined,
             created_at: now,
             updated_at: now,
           kind: input.value.kind,
           text_value: input.value.kind === "text" ? input.value.text : undefined,
           secret_id: input.value.kind === "secret" ? input.value.secretId : undefined,
+          secret_scope_id:
+            input.value.kind === "secret"
+              ? (input.value.secretScopeId ?? input.targetScope)
+              : undefined,
           connection_id: input.value.kind === "connection" ? input.value.connectionId : undefined,
           created_at: now,
           updated_at: now,
           if (!row.secret_id) return "missing";
           const secret = yield* findSecretRowAtScope({
             secretId: row.secret_id,
-            scopeId: row.scope_id,
+            scopeId: row.secret_scope_id ?? row.scope_id,
           });
           if (!secret) return "missing";
           return (yield* secretRouteHasBackingValue(secret)) ? "resolved" : "missing";
           (row) =>
             new Usage({
               pluginId: row.plugin_id,
-              scopeId: ScopeId.make(row.scope_id),
+              scopeId: ScopeId.make(
+                row.kind === "secret" ? (row.secret_scope_id ?? row.scope_id) : row.scope_id,
+              ),
               ownerKind: "credential-binding",
               ownerId: row.source_id,
               ownerName: names.get(`${row.source_scope_id}\u0000${row.source_id}`) ?? null,
         const defsMap = new Map<string, unknown>(Object.entries(defs));
         const preview = yield* Effect.sync(() =>
-          buildToolTypeScriptPreview({ inputSchema, outputSchema, defs: defsMap }),
+          buildToolTypeScriptPreview({
+            inputSchema,
+            outputSchema,
+            defs: defsMap,
+          }),
         ).pipe(
           Effect.withSpan("schema.compile.preview", {
             attributes: {

packages/core/sdk/src/index.ts+1−0

@@ -129,6 +129,7 @@ export { · 128 unmodified lines
129	CredentialBindingValue,	129	CredentialBindingValue,
130	ConfiguredCredentialBinding,	130	ConfiguredCredentialBinding,
131	ConfiguredCredentialValue,	131	ConfiguredCredentialValue,
		132	ScopedSecretCredentialInput,
132	CredentialBindingRef,	133	CredentialBindingRef,
133	SetCredentialBindingInput,	134	SetCredentialBindingInput,
134	CredentialBindingSourceInput,	135	CredentialBindingSourceInput,

packages/core/sdk/src/oauth-helpers.ts+94−103

 //     construction keeps the call sync and lets callers opt out of PAR
 // ---------------------------------------------------------------------------
-import { Data, Effect } from "effect";
+import { Data, Effect, Predicate } from "effect";
 import * as oauth from "oauth4webapi";
 // ---------------------------------------------------------------------------
 // to reauth-required) across wrappers.
 // ---------------------------------------------------------------------------
-const isOAuth2Error = (cause: unknown): cause is OAuth2Error =>
+const isOAuth2Error = Predicate.isTagged("OAuth2Error") as (cause: unknown) => cause is OAuth2Error;
-  typeof cause === "object" &&
-  cause !== null &&
-  "_tag" in cause &&
-  (cause as { readonly _tag?: unknown })._tag === "OAuth2Error";
 const responseFromOAuthErrorCause = (cause: unknown): Response | undefined => {
   if (cause instanceof Response) return cause;
   });
 };
-const toOAuth2ErrorWithHttpSummary = async (cause: unknown): Promise<OAuth2Error> => {
+const toOAuth2ErrorWithHttpSummary = (cause: unknown): Effect.Effect<OAuth2Error> => {
-  if (isOAuth2Error(cause)) return cause;
+  if (isOAuth2Error(cause)) return Effect.succeed(cause);
   const base = toOAuth2Error(cause);
   const response = responseFromOAuthErrorCause(cause);
-  if (!response) return base;
+  if (!response) return Effect.succeed(base);
-  const summary = await tokenEndpointHttpSummary(response);
+  return Effect.promise(() => tokenEndpointHttpSummary(response)).pipe(
-  return new OAuth2Error({
+    Effect.map(
-    message: `${base.message} (${summary})`,
+      (summary) =>
-    error: base.error,
+        new OAuth2Error({
-    cause,
+          message: `${base.message} (${summary})`,
-  });
+          error: base.error,
+          cause,
+        }),
+    ),
+  );
 };
+const failOAuth2WithHttpSummary = (cause: unknown): Effect.Effect<never, OAuth2Error> =>
+  toOAuth2ErrorWithHttpSummary(cause).pipe(Effect.flatMap((error) => Effect.fail(error)));
 // ---------------------------------------------------------------------------
 // oauth4webapi adapter helpers
 // ---------------------------------------------------------------------------
 ): Effect.Effect<OAuth2TokenResponse, OAuth2Error> =>
   Effect.tryPromise({
     try: async () => {
-      try {
+      const as = asFromTokenUrlAndIssuer(input.tokenUrl, input.issuerUrl, {
-        const as = asFromTokenUrlAndIssuer(input.tokenUrl, input.issuerUrl, {
+        idTokenSigningAlgValuesSupported: input.idTokenSigningAlgValuesSupported,
-          idTokenSigningAlgValuesSupported: input.idTokenSigningAlgValuesSupported,
+      });
-        });
+      const client: oauth.Client = { client_id: input.clientId };
-        const client: oauth.Client = { client_id: input.clientId };
+      const clientAuth = pickClientAuth(input.clientSecret, input.clientAuth ?? "body");
-        const clientAuth = pickClientAuth(input.clientSecret, input.clientAuth ?? "body");
+      // `authorizationCodeGrantRequest` requires its `callbackParameters`
-        // `authorizationCodeGrantRequest` requires its `callbackParameters`
+      // to have been returned from `validateAuthResponse`. Our public API
-        // to have been returned from `validateAuthResponse`. Our public API
+      // takes the `code` directly (the UI already validated `state` by
-        // takes the `code` directly (the UI already validated `state` by
+      // looking up the session), so skip the library's state-validation
-        // looking up the session), so skip the library's state-validation
+      // rail and go through the generic grant request instead.
-        // rail and go through the generic grant request instead.
+      const params = new URLSearchParams({
-        const params = new URLSearchParams({
+        code: input.code,
-          code: input.code,
+        redirect_uri: input.redirectUrl,
-          redirect_uri: input.redirectUrl,
+        code_verifier: input.codeVerifier,
-          code_verifier: input.codeVerifier,
+      });
-        });
+      if (input.resource) {
-        if (input.resource) {
+        params.set("resource", input.resource);
-          params.set("resource", input.resource);
-        }
-        const response = await oauth.genericTokenEndpointRequest(
-          as,
-          client,
-          clientAuth,
-          "authorization_code",
-          params,
-          oauth4webapiRequestOptions(input.tokenUrl, input.timeoutMs),
-        );
-        return await processTokenEndpointResponse(as, client, response);
-      } catch (cause) {
-        throw await toOAuth2ErrorWithHttpSummary(cause);
       }
+      const response = await oauth.genericTokenEndpointRequest(
+        as,
+        client,
+        clientAuth,
+        "authorization_code",
+        params,
+        oauth4webapiRequestOptions(input.tokenUrl, input.timeoutMs),
+      );
+      return await processTokenEndpointResponse(as, client, response);
     },
-    catch: toOAuth2Error,
+    catch: (cause) => cause,
-  });
+  }).pipe(Effect.catch(failOAuth2WithHttpSummary));
 // ---------------------------------------------------------------------------
 // Exchange client credentials → tokens (RFC 6749 §4.4)
 ): Effect.Effect<OAuth2TokenResponse, OAuth2Error> =>
   Effect.tryPromise({
     try: async () => {
-      try {
+      const as = asFromTokenUrl(input.tokenUrl);
-        const as = asFromTokenUrl(input.tokenUrl);
+      const client: oauth.Client = { client_id: input.clientId };
-        const client: oauth.Client = { client_id: input.clientId };
+      const clientAuth = pickClientAuth(input.clientSecret, input.clientAuth ?? "body");
-        const clientAuth = pickClientAuth(input.clientSecret, input.clientAuth ?? "body");
+      const params = new URLSearchParams();
-        const params = new URLSearchParams();
+      if (input.scopes && input.scopes.length > 0) {
-        if (input.scopes && input.scopes.length > 0) {
+        params.set("scope", input.scopes.join(input.scopeSeparator ?? " "));
-          params.set("scope", input.scopes.join(input.scopeSeparator ?? " "));
-        }
-        const response = await oauth.clientCredentialsGrantRequest(
-          as,
-          client,
-          clientAuth,
-          params,
-          oauth4webapiRequestOptions(input.tokenUrl, input.timeoutMs),
-        );
-        const result = await oauth.processClientCredentialsResponse(as, client, response);
-        return tokenResponseFrom(result);
-      } catch (cause) {
-        throw await toOAuth2ErrorWithHttpSummary(cause);
       }
+      const response = await oauth.clientCredentialsGrantRequest(
+        as,
+        client,
+        clientAuth,
+        params,
+        oauth4webapiRequestOptions(input.tokenUrl, input.timeoutMs),
+      );
+      const result = await oauth.processClientCredentialsResponse(as, client, response);
+      return tokenResponseFrom(result);
     },
-    catch: toOAuth2Error,
+    catch: (cause) => cause,
-  });
+  }).pipe(Effect.catch(failOAuth2WithHttpSummary));
 // ---------------------------------------------------------------------------
 // Refresh access token
 ): Effect.Effect<OAuth2TokenResponse, OAuth2Error> =>
   Effect.tryPromise({
     try: async () => {
-      try {
+      const as = asFromTokenUrlAndIssuer(input.tokenUrl, input.issuerUrl, {
-        const as = asFromTokenUrlAndIssuer(input.tokenUrl, input.issuerUrl, {
+        idTokenSigningAlgValuesSupported: input.idTokenSigningAlgValuesSupported,
-          idTokenSigningAlgValuesSupported: input.idTokenSigningAlgValuesSupported,
+      });
-        });
+      const client: oauth.Client = { client_id: input.clientId };
-        const client: oauth.Client = { client_id: input.clientId };
+      const clientAuth = pickClientAuth(input.clientSecret, input.clientAuth ?? "body");
-        const clientAuth = pickClientAuth(input.clientSecret, input.clientAuth ?? "body");
+      const extraParams = new URLSearchParams();
-        const extraParams = new URLSearchParams();
+      if (input.scopes && input.scopes.length > 0) {
-        if (input.scopes && input.scopes.length > 0) {
+        extraParams.set("scope", input.scopes.join(input.scopeSeparator ?? " "));
-          extraParams.set("scope", input.scopes.join(input.scopeSeparator ?? " "));
-        }
-        if (input.resource) {
-          extraParams.set("resource", input.resource);
-        }
-        const additionalParameters =
-          Array.from(extraParams.keys()).length > 0 ? extraParams : undefined;
-        const response = await oauth.refreshTokenGrantRequest(
-          as,
-          client,
-          clientAuth,
-          input.refreshToken,
-          {
-            ...oauth4webapiRequestOptions(input.tokenUrl, input.timeoutMs),
-            additionalParameters,
-          },
-        );
-        const result = await oauth.processRefreshTokenResponse(
-          as,
-          client,
-          await stripIdToken(response),
-        );
-        return tokenResponseFrom(result);
-      } catch (cause) {
-        throw await toOAuth2ErrorWithHttpSummary(cause);
       }
+      if (input.resource) {
+        extraParams.set("resource", input.resource);
+      }
+      const additionalParameters =
+        Array.from(extraParams.keys()).length > 0 ? extraParams : undefined;
+      const response = await oauth.refreshTokenGrantRequest(
+        as,
+        client,
+        clientAuth,
+        input.refreshToken,
+        {
+          ...oauth4webapiRequestOptions(input.tokenUrl, input.timeoutMs),
+          additionalParameters,
+        },
+      );
+      const result = await oauth.processRefreshTokenResponse(
+        as,
+        client,
+        await stripIdToken(response),
+      );
+      return tokenResponseFrom(result);
     },
-    catch: toOAuth2Error,
+    catch: (cause) => cause,
-  });
+  }).pipe(Effect.catch(failOAuth2WithHttpSummary));
 // ---------------------------------------------------------------------------
 // Refresh-needed predicate

packages/plugins/graphql/src/react/AddGraphqlSource.tsx+67−49

 import {
   HttpCredentialsEditor,
   httpCredentialsValid,
+  serializeScopedHttpCredentials,
   serializeHttpCredentials,
   type HttpCredentialsState,
 } from "@executor-js/react/plugins/http-credentials";
 import {
-  displayNameFromUrl,
+  sourceDisplayNameFromUrl,
   slugifyNamespace,
   SourceIdentityFieldRows,
   useSourceIdentity,
   type OAuthCompletionPayload,
 } from "@executor-js/react/plugins/oauth-sign-in";
 import {
-  CredentialScopeSection,
+  CredentialControlField,
+  CredentialUsageRow,
   useCredentialTargetScope,
 } from "@executor-js/react/plugins/credential-target-scope";
 import { useSecretPickerSecrets } from "@executor-js/react/plugins/use-secret-picker-secrets";
 }) {
   const [endpoint, setEndpoint] = useState(props.initialUrl ?? "");
   const identity = useSourceIdentity({
-    fallbackName: displayNameFromUrl(endpoint) ?? "",
+    fallbackName: sourceDisplayNameFromUrl(endpoint, "GraphQL") ?? "",
   });
   const [credentials, setCredentials] = useState<HttpCredentialsState>(initialGraphqlCredentials);
   const [adding, setAdding] = useState(false);
   const [tokens, setTokens] = useState<OAuthCompletionPayload | null>(null);
   const scopeId = useScope();
-  const { credentialTargetScope, setCredentialTargetScope, credentialScopeOptions } =
+  const { credentialTargetScope: requestCredentialTargetScope } = useCredentialTargetScope();
-    useCredentialTargetScope();
+  const {
+    credentialTargetScope: oauthCredentialTargetScope,
+    setCredentialTargetScope: setOAuthCredentialTargetScope,
+    credentialScopeOptions,
+  } = useCredentialTargetScope();
   const doAdd = useAtomSet(addGraphqlSourceOptimistic(scopeId), {
     mode: "promiseExit",
   });
     const trimmedEndpoint = endpoint.trim();
     const namespace =
       slugifyNamespace(identity.namespace) ||
-      slugifyNamespace(displayNameFromUrl(trimmedEndpoint) ?? "") ||
+      slugifyNamespace(sourceDisplayNameFromUrl(trimmedEndpoint, "GraphQL") ?? "") ||
       "graphql";
-    const displayName = identity.name.trim() || displayNameFromUrl(trimmedEndpoint) || namespace;
+    const displayName =
+      identity.name.trim() || sourceDisplayNameFromUrl(trimmedEndpoint, "GraphQL") || namespace;
     return { trimmedEndpoint, namespace, displayName };
   }, [endpoint, identity.name, identity.namespace]);
         ...(Object.keys(queryParams).length > 0 ? { queryParams } : {}),
         redirectUrl: oauthCallbackUrl(),
         connectionId: oauthConnectionId({ pluginId: "graphql", namespace }),
-        tokenScope: credentialTargetScope,
+        tokenScope: oauthCredentialTargetScope,
         strategy: { kind: "dynamic-dcr" },
         pluginId: "graphql",
         identityLabel: `${displayName} OAuth`,
       },
       onError: setAddError,
     });
-  }, [endpoint, credentials, oauth, sourceIdentity, credentialTargetScope]);
+  }, [endpoint, credentials, oauth, sourceIdentity, oauthCredentialTargetScope]);
   const handleAdd = async () => {
     setAdding(true);
     setAddError(null);
-    const { headers: headerMap, queryParams } = serializeHttpCredentials(credentials);
+    const { headers: headerMap, queryParams } = serializeScopedHttpCredentials(
+      credentials,
+      requestCredentialTargetScope,
+    );
     const { trimmedEndpoint, namespace, displayName } = sourceIdentity();
     const exit = await doAdd({
               queryParams: queryParams as Record<string, GraphqlCredentialInput>,
             }
           : {}),
-        credentialTargetScope,
+        credentialTargetScope:
+          authMode === "oauth2" && tokens
+            ? oauthCredentialTargetScope
+            : requestCredentialTargetScope,
         ...(authMode === "oauth2" && tokens
           ? {
               auth: {
         </CardStackContent>
       </CardStack>
-      <CredentialScopeSection
+      <HttpCredentialsEditor
-        value={credentialTargetScope}
+        credentials={credentials}
-        options={credentialScopeOptions}
+        onChange={setCredentials}
-        onChange={(targetScope) => {
+        existingSecrets={secretList}
-          setCredentialTargetScope(targetScope);
+        sourceName={identity.name}
-          setTokens(null);
+        targetScope={requestCredentialTargetScope}
-        }}
+        credentialScopeOptions={credentialScopeOptions}
-      >
+        bindingScopeOptions={credentialScopeOptions}
-        <HttpCredentialsEditor
+      />
-          credentials={credentials}
-          onChange={setCredentials}
-          existingSecrets={secretList}
-          sourceName={identity.name}
-          targetScope={credentialTargetScope}
-        />
-      </CredentialScopeSection>
-      <section className="space-y-2.5">
+      {/* Temporarily hidden while we revisit GraphQL OAuth discovery and UX. */}
+      <section className="hidden space-y-2.5">
         <div className="flex items-center justify-between gap-3">
           <span className="text-sm font-medium text-foreground">Authentication</span>
           <FilterTabs<AuthMode>
         </div>
         {authMode === "oauth2" && (
-          <div className="flex items-center gap-2 rounded-md border border-border bg-muted/30 px-3 py-2.5">
+          <CredentialUsageRow
-            {tokens ? (
+            value={oauthCredentialTargetScope}
-              <span className="text-xs font-medium text-emerald-600 dark:text-emerald-400">
+            options={credentialScopeOptions}
-                Authenticated
+            onChange={(targetScope) => {
-              </span>
+              setOAuthCredentialTargetScope(targetScope);
-            ) : (
+              setTokens(null);
-              <span className="text-xs text-muted-foreground">
+            }}
-                Sign in before adding so Executor can introspect the schema.
+            label="Connection saved to"
-              </span>
+            help="Choose who can use the OAuth connection."
-            )}
+          >
-            <Button
+            <CredentialControlField label="Connect via OAuth" help="Start the provider OAuth flow.">
-              type="button"
+              <div className="flex min-h-9 items-center gap-2 rounded-md border border-border bg-muted/30 px-3 py-2">
-              variant="outline"
+                {tokens ? (
-              size="sm"
+                  <span className="text-xs font-medium text-emerald-600 dark:text-emerald-400">
-              className="ml-auto h-7 px-2 text-xs"
+                    Authenticated
-              onClick={() => void handleOAuth()}
+                  </span>
-              disabled={!endpoint.trim() || !httpCredentialsValid(credentials) || oauth.busy}
+                ) : (
-            >
+                  <span className="text-xs text-muted-foreground">Not connected</span>
-              {oauth.busy ? "Signing in..." : tokens ? "Reconnect" : "Sign in"}
+                )}
-            </Button>
+                <Button
-          </div>
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="ml-auto h-7 px-2 text-xs"
+                  onClick={() => void handleOAuth()}
+                  disabled={!endpoint.trim() || !httpCredentialsValid(credentials) || oauth.busy}
+                >
+                  {oauth.busy ? "Signing in..." : tokens ? "Reconnect" : "Sign in"}
+                </Button>
+              </div>
+            </CredentialControlField>
+          </CredentialUsageRow>
         )}
       </section>

packages/plugins/graphql/src/react/EditGraphqlSource.tsx+2−1

@@ -222,7 +222,8 @@ function EditForm(props: { · 221 unmodified lines
222	targetScope={credentialTargetScope}	222	targetScope={credentialTargetScope}
223	/>	223	/>
224		224
225	<section className="space-y-2.5">	225	{/* Temporarily hidden while we revisit GraphQL OAuth discovery and UX. */}
		226	<section className="hidden space-y-2.5">
226	<div className="flex items-center justify-between gap-3">	227	<div className="flex items-center justify-between gap-3">
227	<span className="text-sm font-medium text-foreground">Authentication</span>	228	<span className="text-sm font-medium text-foreground">Authentication</span>
228	<FilterTabs<AuthMode>	229	<FilterTabs<AuthMode>

packages/plugins/graphql/src/sdk/plugin.test.ts+62−0

@@ -604,6 +604,68 @@ describe("graphqlPlugin", () => { · 603 unmodified lines
604	}),	604	}),
605	);	605	);
606		606
		607	it.effect("addSource stores direct GraphQL credential bindings at each row scope", () =>
		608	Effect.gen(function* () {
		609	const executor = yield* createExecutor(
		610	makeTestConfig({
		611	scopes: stackedScopes,
		612	plugins: [memorySecretsPlugin(), graphqlPlugin()] as const,
		613	}),
		614	);
		615
		616	yield* executor.secrets.set({
		617	id: SecretId.make("row-user-token"),
		618	scope: ScopeId.make(USER_SCOPE),
		619	name: "User token",
		620	value: "user-secret",
		621	provider: "memory",
		622	});
		623	yield* executor.secrets.set({
		624	id: SecretId.make("row-org-query"),
		625	scope: ScopeId.make(ORG_SCOPE),
		626	name: "Org query",
		627	value: "org-secret",
		628	provider: "memory",
		629	});
		630
		631	yield* executor.graphql.addSource({
		632	endpoint: "https://example.com/graphql",
		633	scope: ORG_SCOPE,
		634	namespace: "row_scoped_credentials",
		635	introspectionJson,
		636	headers: {
		637	Authorization: {
		638	secretId: "row-user-token",
		639	prefix: "Bearer ",
		640	targetScope: USER_SCOPE,
		641	},
		642	},
		643	queryParams: {
		644	token: {
		645	secretId: "row-org-query",
		646	targetScope: ORG_SCOPE,
		647	},
		648	},
		649	});
		650
		651	const bindings = yield* executor.graphql.listSourceBindings(
		652	"row_scoped_credentials",
		653	ORG_SCOPE,
		654	);
		655
		656	expect(bindings.map((binding) => binding.slot).sort()).toEqual([
		657	graphqlHeaderSlot("Authorization"),
		658	graphqlQueryParamSlot("token"),
		659	]);
		660	expect(
		661	bindings.find((binding) => binding.slot === graphqlHeaderSlot("Authorization"))?.scopeId,
		662	).toBe(ScopeId.make(USER_SCOPE));
		663	expect(
		664	bindings.find((binding) => binding.slot === graphqlQueryParamSlot("token"))?.scopeId,
		665	).toBe(ScopeId.make(ORG_SCOPE));
		666	}),
		667	);
		668
607	it.effect("org header binding resolves the org secret when a user has the same secret id", () =>	669	it.effect("org header binding resolves the org secret when a user has the same secret id", () =>
608	Effect.gen(function* () {	670	Effect.gen(function* () {
609	const server = yield* serveGreetingServer;	671	const server = yield* serveGreetingServer;

packages/plugins/graphql/src/sdk/plugin.ts+45−7

   );
 };
+const targetScopeForBinding = (
+  fallbackTargetScope: string | undefined,
+  binding: { readonly targetScope?: string },
+): Effect.Effect<string, GraphqlIntrospectionError> => {
+  const targetScope = binding.targetScope ?? fallbackTargetScope;
+  if (targetScope) return Effect.succeed(targetScope);
+  return Effect.fail(
+    new GraphqlIntrospectionError({
+      message: "credentialTargetScope is required when adding direct GraphQL credentials",
+    }),
+  );
+};
 const canonicalizeCredentialMap = (
   values: Record<string, GraphqlCredentialInput> | undefined,
   slotForName: (name: string) => string,
   readonly bindings: ReadonlyArray<{
     readonly slot: string;
     readonly value: GraphqlSourceBindingValue;
+    readonly targetScope?: string;
   }>;
 } => {
   const nextValues: Record<string, ConfiguredGraphqlCredentialValue> = {};
-  const bindings: Array<{ slot: string; value: GraphqlSourceBindingValue }> = [];
+  const bindings: Array<{
+    slot: string;
+    value: GraphqlSourceBindingValue;
+    targetScope?: string;
+  }> = [];
   for (const [name, value] of Object.entries(values ?? {})) {
     if (typeof value === "string") {
       nextValues[name] = value;
     });
     bindings.push({
       slot,
+      targetScope: "targetScope" in value ? value.targetScope : undefined,
       value: {
         kind: "secret",
         secretId: SecretId.make(value.secretId),
+        ...("secretScopeId" in value && value.secretScopeId
+          ? { secretScopeId: value.secretScopeId }
+          : {}),
       },
     });
   }
   readonly bindings: ReadonlyArray<{
     readonly slot: string;
     readonly value: GraphqlSourceBindingValue;
+    readonly targetScope?: string;
   }>;
 } => {
   if (!auth || auth.kind === "none") return { auth: { kind: "none" }, bindings: [] };
           if (slotResolved?.[name] !== undefined) resolved[name] = slotResolved[name];
           continue;
         }
+        const secretScope =
+          "secretScopeId" in value
+            ? (value.secretScopeId ?? value.targetScope)
+            : (params.targetScope ?? params.sourceScope);
         const secret = yield* ctx.secrets
-          .getAtScope(SecretId.make(value.secretId), params.targetScope ?? params.sourceScope)
+          .getAtScope(SecretId.make(value.secretId), secretScope)
           .pipe(
             Effect.catchTag("SecretOwnedByConnectionError", () =>
               Effect.fail(
           ...canonicalQueryParams.bindings,
           ...canonicalAuth.bindings,
         ];
-        const targetScope = yield* bindingTargetScope(config.credentialTargetScope, directBindings);
+        for (const binding of directBindings) {
-        if (targetScope) {
+          const bindingTargetScope = yield* targetScopeForBinding(
+            config.credentialTargetScope,
+            binding,
+          );
           yield* validateGraphqlBindingTarget(ctx, {
             sourceId: namespace,
             sourceScope: config.scope,
-            targetScope,
+            targetScope: bindingTargetScope,
           });
         }
+        const targetScope =
+          directBindings[0] !== undefined
+            ? yield* targetScopeForBinding(config.credentialTargetScope, directBindings[0])
+            : undefined;
         let introspectionResult: IntrospectionResult;
         if (config.introspectionJson) {
           });
         }
-        if (targetScope) {
+        if (directBindings.length > 0) {
           for (const binding of directBindings) {
+            const bindingTargetScope = yield* targetScopeForBinding(
+              config.credentialTargetScope,
+              binding,
+            );
             yield* ctx.credentialBindings.set({
-              targetScope: ScopeId.make(targetScope),
+              targetScope: ScopeId.make(bindingTargetScope),
               pluginId: GRAPHQL_PLUGIN_ID,
               sourceId: namespace,
               sourceScope: ScopeId.make(config.scope),

packages/plugins/graphql/src/sdk/types.ts+6−1

   ConfiguredCredentialValue as ConfiguredCredentialValueSchema,
   CredentialBindingValue,
   credentialSlotKey,
+  ScopedSecretCredentialInput,
   SecretBackedValue,
   ScopeId,
 } from "@executor-js/sdk/core";
 export const ConfiguredGraphqlCredentialValue = ConfiguredCredentialValueSchema;
 export type ConfiguredGraphqlCredentialValue = typeof ConfiguredGraphqlCredentialValue.Type;
-export const GraphqlCredentialInput = Schema.Union([HeaderValue, ConfiguredGraphqlCredentialValue]);
+export const GraphqlCredentialInput = Schema.Union([
+  ScopedSecretCredentialInput,
+  HeaderValue,
+  ConfiguredGraphqlCredentialValue,
+]);
 export type GraphqlCredentialInput = typeof GraphqlCredentialInput.Type;
 export const graphqlHeaderSlot = (name: string): string => credentialSlotKey("header", name);

packages/plugins/mcp/src/react/AddMcpSource.tsx+122−146

 import { SourceFavicon } from "@executor-js/react/components/source-favicon";
 import { IOSSpinner, Spinner } from "@executor-js/react/components/spinner";
 import { Textarea } from "@executor-js/react/components/textarea";
-import { HeadersList } from "@executor-js/react/plugins/headers-list";
 import {
   emptyHttpCredentials,
   httpCredentialsValid,
   HttpCredentialsEditor,
+  serializeScopedHttpCredentials,
   serializeHttpCredentials,
-  type SecretBackedValue,
 } from "@executor-js/react/plugins/http-credentials";
-import { type HeaderState } from "@executor-js/react/plugins/secret-header-auth";
 import {
-  displayNameFromUrl,
+  sourceDisplayNameFromUrl,
   slugifyNamespace,
   SourceIdentityFieldRows,
   SourceIdentityFields,
   type OAuthCompletionPayload,
 } from "@executor-js/react/plugins/oauth-sign-in";
 import {
-  CredentialScopeSection,
+  CredentialControlField,
+  CredentialUsageRow,
   useCredentialTargetScope,
 } from "@executor-js/react/plugins/credential-target-scope";
-type RemoteAuthMode = "none" | "header" | "oauth2";
+type RemoteAuthMode = "none" | "oauth2";
 import { sourceWriteKeys } from "@executor-js/react/api/reactivity-keys";
 import { probeMcpEndpoint, addMcpSourceOptimistic } from "./atoms";
 import { mcpPresets, type McpPreset } from "../sdk/presets";
-import { MCP_OAUTH_CONNECTION_SLOT } from "../sdk/types";
+import { MCP_OAUTH_CONNECTION_SLOT, type McpCredentialInput } from "../sdk/types";
 const ErrorMessage = Schema.Struct({ message: Schema.String });
 const decodeErrorMessage = Schema.decodeUnknownOption(ErrorMessage);
 type State =
   | { step: "url"; url: string }
-  | { step: "probing"; url: string }
+  | { step: "probing"; url: string; probe: ProbeResult | null }
   | { step: "probed"; url: string; probe: ProbeResult }
   | { step: "oauth-starting"; url: string; probe: ProbeResult }
   | {
       return { step: "url", url: action.url };
     case "probe-start":
-      return { step: "probing", url: state.url };
+      return { step: "probing", url: state.url, probe: "probe" in state ? state.probe : null };
     case "probe-ok":
       return { step: "probed", url: state.url, probe: action.probe };
   );
   const scopeId = useScope();
-  const { credentialTargetScope, setCredentialTargetScope, credentialScopeOptions } =
+  const { credentialTargetScope: requestCredentialTargetScope } = useCredentialTargetScope();
-    useCredentialTargetScope();
+  const {
+    credentialTargetScope: oauthCredentialTargetScope,
+    setCredentialTargetScope: setOAuthCredentialTargetScope,
+    credentialScopeOptions,
+  } = useCredentialTargetScope();
   const doProbe = useAtomSet(probeMcpEndpoint, { mode: "promiseExit" });
   const doAdd = useAtomSet(addMcpSourceOptimistic(scopeId), {
     mode: "promiseExit",
   });
   const [remoteAuthMode, setRemoteAuthMode] = useState<RemoteAuthMode>("none");
-  const [remoteAuthHeaders, setRemoteAuthHeaders] = useState<HeaderState[]>([
-    {
-      name: "Authorization",
-      prefix: "Bearer ",
-      presetKey: "bearer",
-      secretId: null,
-    },
-  ]);
   const [remoteHeaders, setRemoteHeaders] = useState<PlainHeader[]>([]);
   const [remoteCredentials, setRemoteCredentials] = useState(() => emptyHttpCredentials());
   const tokens = "tokens" in state ? state.tokens : null;
   const remoteIdentity = useSourceIdentity({
-    fallbackName: probe?.serverName ?? probe?.name ?? displayNameFromUrl(state.url) ?? "",
+    fallbackName:
+      sourceDisplayNameFromUrl(state.url, "MCP") ?? probe?.serverName ?? probe?.name ?? "",
   });
   const isProbing = state.step === "probing";
   const isAdding = state.step === "adding";
   const isOAuthBusy =
     state.step === "oauth-starting" || state.step === "oauth-waiting" || oauth.busy;
   const canUseNone = probe?.requiresOAuth !== true;
-  const remoteAuthHeader = remoteAuthHeaders[0];
-  const headerAuthComplete = Boolean(remoteAuthHeader?.name.trim() && remoteAuthHeader?.secretId);
   const remoteHeadersComplete = remoteHeaders.every(
     (header) => header.name.trim() && header.value.trim(),
   );
   const remoteCredentialsComplete = httpCredentialsValid(remoteCredentials);
-  const authReady =
+  const authReady = remoteAuthMode === "none" ? canUseNone : tokens !== null;
-    remoteAuthMode === "none"
-      ? canUseNone
-      : remoteAuthMode === "header"
-        ? headerAuthComplete
-        : tokens !== null;
   const canAdd =
     Boolean(probe) &&
     authReady &&
       handleProbeRef.current();
     }, 400);
     return () => clearTimeout(handle);
-  }, [transport, state.step, state.url, remoteCredentials]);
+  }, [transport, state.step, state.url]);
-  const handleRemoteCredentialsChange = useCallback(
+  const handleRemoteCredentialsChange = useCallback((next: typeof remoteCredentials) => {
-    (next: typeof remoteCredentials) => {
+    setRemoteCredentials(next);
-      setRemoteCredentials(next);
+  }, []);
-      if (state.step === "error" || state.step === "probed" || state.step === "oauth-done") {
-        dispatch({ type: "set-url", url: state.url });
-      }
-    },
-    [state],
-  );
   const handleOAuth = useCallback(async () => {
     dispatch({ type: "oauth-start" });
           pluginId: "mcp",
           namespace: namespaceSlug,
         }),
-        tokenScope: credentialTargetScope,
+        tokenScope: oauthCredentialTargetScope,
         strategy: { kind: "dynamic-dcr" },
         pluginId: "mcp",
         identityLabel: `${remoteIdentity.name.trim() || probe?.serverName || probe?.name || "MCP"} OAuth`,
         dispatch({ type: "oauth-waiting", sessionId: result.sessionId }),
       onError: (error) => dispatch({ type: "oauth-fail", error }),
     });
-  }, [state.url, remoteIdentity, probe, remoteCredentials, oauth, credentialTargetScope]);
+  }, [state.url, remoteIdentity, probe, remoteCredentials, oauth, oauthCredentialTargetScope]);
   const handleCancelOAuth = useCallback(() => {
     oauth.cancel();
   const handleAddRemote = useCallback(async () => {
     if (!probe) return;
     dispatch({ type: "add-start" });
-    const headerAuth = remoteAuthHeaders[0];
     const auth =
-      remoteAuthMode === "header" && headerAuth?.secretId
+      remoteAuthMode === "oauth2"
-        ? {
+        ? tokens
-            kind: "header" as const,
+          ? {
-            headerName: headerAuth.name.trim(),
+              kind: "oauth2" as const,
-            secretId: headerAuth.secretId,
+              connectionId: tokens.connectionId,
-            ...(headerAuth.prefix ? { prefix: headerAuth.prefix } : {}),
+            }
-          }
+          : {
-        : remoteAuthMode === "oauth2"
+              kind: "oauth2" as const,
-          ? tokens
+              connectionSlot: MCP_OAUTH_CONNECTION_SLOT,
-            ? {
+            }
-                kind: "oauth2" as const,
+        : { kind: "none" as const };
-                connectionId: tokens.connectionId,
-              }
-            : {
-                kind: "oauth2" as const,
-                connectionSlot: MCP_OAUTH_CONNECTION_SLOT,
-              }
-          : { kind: "none" as const };
     const headers = Object.fromEntries(
       remoteHeaders
         .map((header) => [header.name.trim(), header.value.trim()] as const)
         .filter(([name, value]) => name && value),
     );
-    const credentials = serializeHttpCredentials(remoteCredentials);
+    const credentials = serializeScopedHttpCredentials(
-    const remoteRequestHeaders: Record<string, SecretBackedValue> = {
+      remoteCredentials,
+      requestCredentialTargetScope,
+    );
+    const remoteRequestHeaders: Record<string, McpCredentialInput> = {
       ...headers,
       ...credentials.headers,
     };
         namespace: slugNamespace || undefined,
         endpoint: state.url.trim(),
         auth,
-        credentialTargetScope,
+        credentialTargetScope:
+          remoteAuthMode === "oauth2" && tokens
+            ? oauthCredentialTargetScope
+            : requestCredentialTargetScope,
         ...(Object.keys(remoteRequestHeaders).length > 0 ? { headers: remoteRequestHeaders } : {}),
         ...(Object.keys(credentials.queryParams).length > 0
           ? { queryParams: credentials.queryParams }
   }, [
     probe,
     remoteAuthMode,
-    remoteAuthHeaders,
     remoteHeaders,
     remoteCredentials,
     remoteIdentity,
     doAdd,
     props,
     scopeId,
-    credentialTargetScope,
+    requestCredentialTargetScope,
+    oauthCredentialTargetScope,
   ]);
   // ---- Stdio actions ----
                     <div className="mt-2 space-y-2">
                       <FieldError>{probeError}</FieldError>
                       <Button
+                        type="button"
                         variant="outline"
                         size="sm"
                         onClick={handleProbe}
             onChange={handleRemoteCredentialsChange}
             existingSecrets={secretList}
             sourceName={remoteIdentity.name}
-            targetScope={credentialTargetScope}
+            targetScope={requestCredentialTargetScope}
+            credentialScopeOptions={credentialScopeOptions}
+            bindingScopeOptions={credentialScopeOptions}
             labels={{
               headers: "Request headers",
               queryParams: "Query parameters",
                 <FilterTabs<RemoteAuthMode>
                   tabs={
                     probe.requiresOAuth
-                      ? [
+                      ? [{ value: "oauth2", label: "OAuth" }]
-                          { value: "header", label: "Header" },
-                          { value: "oauth2", label: "OAuth" },
-                        ]
                       : [
                           { value: "none", label: "None" },
-                          { value: "header", label: "Header" },
+                          { value: "oauth2", label: "OAuth" },
                         ]
                   }
                   value={remoteAuthMode}
                 />
               </div>
-              {remoteAuthMode === "header" && (
-                <CredentialScopeSection
-                  value={credentialTargetScope}
-                  options={credentialScopeOptions}
-                  onChange={(targetScope) => {
-                    setCredentialTargetScope(targetScope);
-                    dispatch({ type: "oauth-reset" });
-                  }}
-                >
-                  <HeadersList
-                    headers={remoteAuthHeaders}
-                    onHeadersChange={setRemoteAuthHeaders}
-                    existingSecrets={secretList}
-                    singleHeader
-                    sourceName={remoteIdentity.name}
-                    targetScope={credentialTargetScope}
-                  />
-                </CredentialScopeSection>
-              )}
               {remoteAuthMode === "oauth2" && (
-                <CredentialScopeSection
+                <CredentialUsageRow
-                  value={credentialTargetScope}
+                  value={oauthCredentialTargetScope}
                   options={credentialScopeOptions}
                   onChange={(targetScope) => {
-                    setCredentialTargetScope(targetScope);
+                    setOAuthCredentialTargetScope(targetScope);
                     dispatch({ type: "oauth-reset" });
                   }}
-                  description="Choose who can use the OAuth connection."
+                  label="Connection saved to"
+                  help="Choose who can use the OAuth connection."
                 >
-                  {!tokens && state.step === "probed" && (
+                  <CredentialControlField
-                    <div className="flex flex-col gap-2">
+                    label="Connect via OAuth"
-                      <Button onClick={handleOAuth} variant="outline">
+                    help="Start the provider OAuth flow."
+                  >
+                    {!tokens && state.step === "probed" && (
+                      <Button
+                        type="button"
+                        onClick={handleOAuth}
+                        variant="outline"
+                        className="w-full"
+                      >
                         Sign in
                       </Button>
-                      <p className="text-[11px] text-muted-foreground">
+                    )}
-                        Sign in before adding so Executor can discover and save the tool catalog.
-                      </p>
-                    </div>
-                  )}
-                  {!tokens && state.step === "oauth-starting" && (
+                    {!tokens && state.step === "oauth-starting" && (
-                    <div className="flex items-center gap-2 rounded-md border border-border bg-muted/30 px-3 py-2.5">
+                      <div className="flex min-h-9 items-center gap-2 rounded-md border border-border bg-muted/30 px-3 py-2">
-                      <Spinner className="size-3.5" />
+                        <Spinner className="size-3.5" />
-                      <span className="text-xs text-muted-foreground">Starting authorization…</span>
+                        <span className="text-xs text-muted-foreground">
-                    </div>
+                          Starting authorization...
-                  )}
+                        </span>
+                      </div>
+                    )}
-                  {!tokens && state.step === "oauth-waiting" && (
+                    {!tokens && state.step === "oauth-waiting" && (
-                    <div className="flex items-center gap-2 rounded-md border border-blue-500/30 bg-blue-500/5 px-3 py-2.5">
+                      <div className="flex min-h-9 items-center gap-2 rounded-md border border-blue-500/30 bg-blue-500/5 px-3 py-2">
-                      <Spinner className="size-3.5 text-blue-500" />
+                        <Spinner className="size-3.5 text-blue-500" />
-                      <span className="text-xs text-blue-600 dark:text-blue-400">
+                        <span className="text-xs text-blue-600 dark:text-blue-400">
-                        Waiting for authorization in popup…
+                          Waiting for authorization...
-                      </span>
+                        </span>
-                      <Button
+                        <Button
-                        variant="ghost"
+                          type="button"
-                        size="sm"
+                          variant="ghost"
-                        onClick={handleCancelOAuth}
+                          size="sm"
-                        className="ml-auto h-7 px-2 text-xs"
+                          onClick={handleCancelOAuth}
-                      >
+                          className="ml-auto h-7 px-2 text-xs"
-                        Cancel
+                        >
-                      </Button>
+                          Cancel
-                    </div>
+                        </Button>
-                  )}
+                      </div>
+                    )}
-                  {tokens && (
+                    {tokens && (
-                    <div className="flex items-center gap-2 rounded-md border border-emerald-500/30 bg-emerald-500/5 px-3 py-2.5">
+                      <div className="flex min-h-9 items-center gap-2 rounded-md border border-emerald-500/30 bg-emerald-500/5 px-3 py-2">
-                      <svg viewBox="0 0 16 16" fill="none" className="size-3.5 text-emerald-500">
+                        <svg viewBox="0 0 16 16" fill="none" className="size-3.5 text-emerald-500">
-                        <path
+                          <path
-                          d="M3 8.5l3 3 7-7"
+                            d="M3 8.5l3 3 7-7"
-                          stroke="currentColor"
+                            stroke="currentColor"
-                          strokeWidth="1.5"
+                            strokeWidth="1.5"
-                          strokeLinecap="round"
+                            strokeLinecap="round"
-                          strokeLinejoin="round"
+                            strokeLinejoin="round"
-                        />
+                          />
-                      </svg>
+                        </svg>
-                      <span className="text-xs font-medium text-emerald-600 dark:text-emerald-400">
+                        <span className="text-xs font-medium text-emerald-600 dark:text-emerald-400">
-                        Authenticated
+                          Authenticated
-                      </span>
+                        </span>
-                    </div>
+                      </div>
-                  )}
+                    )}
-                </CredentialScopeSection>
+                  </CredentialControlField>
+                </CredentialUsageRow>
               )}
             </section>
           )}
               <div>
                 <Label>Additional headers</Label>
                 <p className="mt-1 text-[12px] text-muted-foreground">
-                  Plaintext headers sent with every request. Use authentication for secret-backed
+                  Plaintext headers sent with every request. Use request headers above for
-                  auth headers.
+                  secret-backed values.
                 </p>
               </div>
                 <p className="text-[12px] text-destructive">{otherError}</p>
               </div>
               <Button
+                type="button"
                 variant="outline"
                 size="sm"
                 onClick={() => dispatch({ type: "retry" })}
           <FloatActions>
             <Button
+              type="button"
               variant="ghost"
               onClick={() => {
                 oauth.cancel();
               Cancel
             </Button>
             {(probe || isProbing) && (
-              <Button onClick={handleAddRemote} disabled={!canAdd}>
+              <Button type="button" onClick={handleAddRemote} disabled={!canAdd}>
                 {isAdding ? (
                   <>
                     <Spinner className="size-3.5" /> Adding…
           )}
           <FloatActions>
-            <Button variant="ghost" onClick={props.onCancel} disabled={stdioAdding}>
+            <Button type="button" variant="ghost" onClick={props.onCancel} disabled={stdioAdding}>
               Cancel
             </Button>
-            <Button onClick={handleAddStdio} disabled={!stdioCommand.trim() || stdioAdding}>
+            <Button
+              type="button"
+              onClick={handleAddStdio}
+              disabled={!stdioCommand.trim() || stdioAdding}
+            >
               {stdioAdding ? (
                 <>
                   <Spinner className="size-3.5" /> Adding…

packages/plugins/mcp/src/sdk/plugin.ts+67−33

   );
 };
+const targetScopeForBinding = (
+  fallbackTargetScope: string | undefined,
+  binding: { readonly targetScope?: string },
+): Effect.Effect<string, McpConnectionError> => {
+  const targetScope = binding.targetScope ?? fallbackTargetScope;
+  if (targetScope) return Effect.succeed(targetScope);
+  return Effect.fail(
+    new McpConnectionError({
+      transport: "remote",
+      message: "credentialTargetScope is required when adding direct MCP credentials",
+    }),
+  );
+};
 const canonicalizeCredentialMap = (
   values: Record<string, McpCredentialInput> | undefined,
   slotForName: (name: string) => string,
   readonly bindings: ReadonlyArray<{
     readonly slot: string;
     readonly value: McpSourceBindingValue;
+    readonly targetScope?: string;
   }>;
 } => {
   const nextValues: Record<string, ConfiguredMcpCredentialValue> = {};
-  const bindings: Array<{ slot: string; value: McpSourceBindingValue }> = [];
+  const bindings: Array<{ slot: string; value: McpSourceBindingValue; targetScope?: string }> = [];
   for (const [name, value] of Object.entries(values ?? {})) {
     if (typeof value === "string") {
       nextValues[name] = value;
     });
     bindings.push({
       slot,
+      targetScope: "targetScope" in value ? value.targetScope : undefined,
       value: {
         kind: "secret",
         secretId: SecretId.make(value.secretId),
+        ...("secretScopeId" in value && value.secretScopeId
+          ? { secretScopeId: value.secretScopeId }
+          : {}),
       },
     });
   }
   readonly bindings: ReadonlyArray<{
     readonly slot: string;
     readonly value: McpSourceBindingValue;
+    readonly targetScope?: string;
   }>;
 } => {
   if (!auth || auth.kind === "none") return { auth: { kind: "none" }, bindings: [] };
       bindings: [
         {
           slot: MCP_HEADER_AUTH_SLOT,
-          value: { kind: "secret", secretId: SecretId.make(auth.secretId) },
+          targetScope: auth.targetScope,
+          value: {
+            kind: "secret",
+            secretId: SecretId.make(auth.secretId),
+            ...(auth.secretScopeId ? { secretScopeId: auth.secretScopeId } : {}),
+          },
         },
       ],
     };
   }
   if ("connectionSlot" in auth) return { auth, bindings: [] };
-  const bindings: Array<{ slot: string; value: McpSourceBindingValue }> = [
+  const bindings: Array<{ slot: string; value: McpSourceBindingValue; targetScope?: string }> = [
     {
       slot: MCP_OAUTH_CONNECTION_SLOT,
       value: {
         if (slotResolved?.[name] !== undefined) resolved[name] = slotResolved[name];
         continue;
       }
-      const secret = yield* ctx.secrets
+      const secretScope =
-        .getAtScope(SecretId.make(value.secretId), params.targetScope ?? params.sourceScope)
+        "secretScopeId" in value
-        .pipe(
+          ? (value.secretScopeId ?? value.targetScope)
-          Effect.catchTag("SecretOwnedByConnectionError", () =>
+          : (params.targetScope ?? params.sourceScope);
-            Effect.fail(
+      const secret = yield* ctx.secrets.getAtScope(SecretId.make(value.secretId), secretScope).pipe(
-              new McpConnectionError({
+        Effect.catchTag("SecretOwnedByConnectionError", () =>
-                transport: "remote",
+          Effect.fail(
-                message: `Failed to resolve secret for ${params.missingLabel} "${name}"`,
+            new McpConnectionError({
-              }),
+              transport: "remote",
-            ),
+              message: `Failed to resolve secret for ${params.missingLabel} "${name}"`,
+            }),
           ),
-        );
+        ),
+      );
       if (secret === null) {
         return yield* new McpConnectionError({
           transport: "remote",
         const headers = yield* resolveMcpHeaderAuth(ctx, sourceId, sourceScope, auth);
         return { headers };
       }
-      const secret = yield* ctx.secrets
+      const secretScope = auth.secretScopeId ?? auth.targetScope ?? targetScope ?? sourceScope;
-        .getAtScope(SecretId.make(auth.secretId), targetScope ?? sourceScope)
+      const secret = yield* ctx.secrets.getAtScope(SecretId.make(auth.secretId), secretScope).pipe(
-        .pipe(
+        Effect.catchTag("SecretOwnedByConnectionError", () =>
-          Effect.catchTag("SecretOwnedByConnectionError", () =>
+          Effect.fail(
-            Effect.fail(
+            new McpConnectionError({
-              new McpConnectionError({
+              transport: "remote",
-                transport: "remote",
+              message: `Failed to resolve secret "${auth.secretId}"`,
-                message: `Failed to resolve secret "${auth.secretId}"`,
+            }),
-              }),
-            ),
           ),
-        );
+        ),
+      );
       if (secret === null) {
         return yield* new McpConnectionError({
           transport: "remote",
                 ...canonicalRemote.auth.bindings,
               ]
             : [];
-          const targetScope =
+          for (const binding of directBindings) {
-            config.transport === "remote"
+            const bindingTargetScope = yield* targetScopeForBinding(
-              ? yield* bindingTargetScope(config.credentialTargetScope, directBindings)
+              config.transport === "remote" ? config.credentialTargetScope : undefined,
-              : undefined;
+              binding,
-          if (targetScope) {
+            );
             yield* validateMcpBindingTarget(ctx, {
               sourceId: namespace,
               sourceScope: config.scope,
-              targetScope,
+              targetScope: bindingTargetScope,
             });
           }
+          const targetScope =
+            config.transport === "remote" && directBindings[0]
+              ? yield* targetScopeForBinding(config.credentialTargetScope, directBindings[0])
+              : undefined;
           const sd = toStoredSourceData(
             config,
             canonicalRemote
                   })),
                 });
-                if (targetScope) {
+                if (directBindings.length > 0) {
                   for (const binding of directBindings) {
+                    const bindingTargetScope = yield* targetScopeForBinding(
+                      config.transport === "remote" ? config.credentialTargetScope : undefined,
+                      binding,
+                    );
                     yield* ctx.credentialBindings.set({
-                      targetScope: ScopeId.make(targetScope),
+                      targetScope: ScopeId.make(bindingTargetScope),
                       pluginId: MCP_PLUGIN_ID,
                       sourceId: namespace,
                       sourceScope: ScopeId.make(config.scope),

packages/plugins/mcp/src/sdk/types.ts+8−1

   ConfiguredCredentialValue as ConfiguredCredentialValueSchema,
   CredentialBindingValue,
   credentialSlotKey,
+  ScopedSecretCredentialInput,
   ScopeId,
   SecretBackedMap,
   SecretBackedValue,
 export const ConfiguredMcpCredentialValue = ConfiguredCredentialValueSchema;
 export type ConfiguredMcpCredentialValue = typeof ConfiguredMcpCredentialValue.Type;
-export const McpCredentialInput = Schema.Union([SecretBackedValue, ConfiguredMcpCredentialValue]);
+export const McpCredentialInput = Schema.Union([
+  ScopedSecretCredentialInput,
+  SecretBackedValue,
+  ConfiguredMcpCredentialValue,
+]);
 export type McpCredentialInput = typeof McpCredentialInput.Type;
 export const mcpHeaderSlot = (name: string): string => credentialSlotKey("header", name);
     headerName: Schema.String,
     secretId: Schema.String,
     prefix: Schema.optional(Schema.String),
+    targetScope: Schema.optional(ScopeId),
+    secretScopeId: Schema.optional(ScopeId),
   }),
   Schema.Struct({
     kind: Schema.Literal("oauth2"),

packages/plugins/openapi/src/api/group.ts+22−5

 import { HttpApiEndpoint, HttpApiGroup } from "effect/unstable/httpapi";
 import { Schema } from "effect";
-import { ScopeId, SecretBackedValue } from "@executor-js/sdk/core";
+import { ScopeId, ScopedSecretCredentialInput, SecretBackedValue } from "@executor-js/sdk/core";
 import { InternalError } from "@executor-js/api";
 import { OpenApiParseError, OpenApiExtractionError, OpenApiOAuthError } from "../sdk/errors";
   queryParams: Schema.optional(Schema.Record(Schema.String, SecretBackedValue)),
 });
+const ConfiguredCredentialBindingPayload = Schema.Struct({
+  kind: Schema.Literal("binding"),
+  slot: Schema.String,
+  prefix: Schema.optional(Schema.String),
+});
+const ConfiguredCredentialValuePayload = Schema.Union([
+  Schema.String,
+  ConfiguredCredentialBindingPayload,
+]);
+const OpenApiCredentialInputPayload = Schema.Union([
+  ScopedSecretCredentialInput,
+  SecretBackedValue,
+  ConfiguredCredentialValuePayload,
+]);
 // ---------------------------------------------------------------------------
 // Payloads
 // ---------------------------------------------------------------------------
   name: Schema.optional(Schema.String),
   baseUrl: Schema.optional(Schema.String),
   namespace: Schema.optional(Schema.String),
-  headers: Schema.optional(Schema.Record(Schema.String, Schema.Unknown)),
+  headers: Schema.optional(Schema.Record(Schema.String, OpenApiCredentialInputPayload)),
-  queryParams: Schema.optional(Schema.Record(Schema.String, SecretBackedValue)),
+  queryParams: Schema.optional(Schema.Record(Schema.String, OpenApiCredentialInputPayload)),
   oauth2: Schema.optional(OAuth2SourceConfig),
 });
   sourceScope: ScopeId,
   name: Schema.optional(Schema.String),
   baseUrl: Schema.optional(Schema.String),
-  headers: Schema.optional(Schema.Record(Schema.String, Schema.Unknown)),
+  headers: Schema.optional(Schema.Record(Schema.String, OpenApiCredentialInputPayload)),
-  queryParams: Schema.optional(Schema.Record(Schema.String, SecretBackedValue)),
+  queryParams: Schema.optional(Schema.Record(Schema.String, OpenApiCredentialInputPayload)),
   credentialTargetScope: Schema.optional(ScopeId),
   // Set after a successful re-authenticate to refresh the source's
   // stored OAuth2 metadata.

packages/plugins/openapi/src/react/AddOpenApiSource.tsx+312−79

-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import { useAtomSet } from "@effect/atom-react";
 import * as Exit from "effect/Exit";
 import * as Option from "effect/Option";
 import { ConnectionId, ScopeId, SecretId } from "@executor-js/sdk/core";
 import { startOAuth } from "@executor-js/react/api/atoms";
-import { useScope } from "@executor-js/react/api/scope-context";
+import { useScope, useScopeStack } from "@executor-js/react/api/scope-context";
 import { connectionWriteKeys, sourceWriteKeys } from "@executor-js/react/api/reactivity-keys";
 // `addSpec` with an oauth2 payload persists a source row AND (for
   useOAuthPopupFlow,
   type OAuthCompletionPayload,
 } from "@executor-js/react/plugins/oauth-sign-in";
-import {
-  CredentialScopeSection,
-  useCredentialTargetScope,
-} from "@executor-js/react/plugins/credential-target-scope";
 import {
   CreatableSecretPicker,
   matchPresetKey,
 } from "@executor-js/react/components/card-stack";
 import { FieldLabel } from "@executor-js/react/components/field";
 import { FloatActions } from "@executor-js/react/components/float-actions";
+import { HelpTooltip } from "@executor-js/react/components/help-tooltip";
 import { Input } from "@executor-js/react/components/input";
 import { Label } from "@executor-js/react/components/label";
 import { Textarea } from "@executor-js/react/components/textarea";
 import { Checkbox } from "@executor-js/react/components/checkbox";
 import { SourceFavicon } from "@executor-js/react/components/source-favicon";
 import { RadioGroup, RadioGroupItem } from "@executor-js/react/components/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@executor-js/react/components/select";
 import { IOSSpinner, Spinner } from "@executor-js/react/components/spinner";
 import { addOpenApiSpecOptimistic, previewOpenApiSpec, setOpenApiSourceBinding } from "./atoms";
 import type { SpecPreview, HeaderPreset, OAuth2Preset } from "../sdk/preview";
   oauth2ClientIdSlot,
   oauth2ClientSecretSlot,
   oauth2ConnectionSlot,
+  queryParamBindingSlot,
 } from "../sdk/store";
 import {
   ConfiguredHeaderBinding,
   });
 }
+const secretStorageDescription = (label: string): string =>
+  label === "Personal"
+    ? "Only you can use this secret."
+    : "Everyone in the organization can use this secret.";
+function CredentialScopeDropdown(props: {
+  readonly value: ScopeId;
+  readonly options: readonly {
+    readonly scopeId: ScopeId;
+    readonly label: string;
+  }[];
+  readonly onChange: (scopeId: ScopeId) => void;
+  readonly label?: string;
+  readonly help?: ReactNode;
+}) {
+  const label = props.label ?? "Used by";
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center gap-1.5">
+        <FieldLabel className="text-[11px]">{label}</FieldLabel>
+        <HelpTooltip label={label}>
+          {props.help ?? "Choose who uses this credential value."}
+        </HelpTooltip>
+      </div>
+      <Select
+        value={String(props.value)}
+        onValueChange={(value) => props.onChange(ScopeId.make(value))}
+      >
+        <SelectTrigger className="w-full">
+          <SelectValue placeholder={label} />
+        </SelectTrigger>
+        <SelectContent>
+          {props.options.map((option) => (
+            <SelectItem key={option.scopeId} value={option.scopeId}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}
 // ---------------------------------------------------------------------------
 // Main component — single progressive form
 // ---------------------------------------------------------------------------
   // OAuth2 state (only populated while an oauth2 preset is selected)
   const [oauth2ClientIdSecretId, setOauth2ClientIdSecretId] = useState<string | null>(null);
   const [oauth2ClientSecretSecretId, setOauth2ClientSecretSecretId] = useState<string | null>(null);
+  const [oauth2ClientIdScope, setOauth2ClientIdScope] = useState<ScopeId | null>(null);
+  const [oauth2ClientSecretScope, setOauth2ClientSecretScope] = useState<ScopeId | null>(null);
   const [oauth2SelectedScopes, setOauth2SelectedScopes] = useState<Set<string>>(new Set());
   const [oauth2AuthState, setOauth2AuthState] = useState<{
     readonly fingerprint: string;
   const [addError, setAddError] = useState<string | null>(null);
   const scopeId = useScope();
-  const { credentialTargetScope, setCredentialTargetScope, credentialScopeOptions } =
+  const scopeStack = useScopeStack();
-    useCredentialTargetScope();
+  const credentialScopeOptions = useMemo(
+    () =>
+      scopeStack.map((entry, index) => ({
+        scopeId: entry.id,
+        label: index === 0 ? "Personal" : entry.name || "Organization",
+        description: secretStorageDescription(
+          index === 0 ? "Personal" : entry.name || "Organization",
+        ),
+      })),
+    [scopeStack],
+  );
+  const defaultCredentialTargetScope =
+    credentialScopeOptions[credentialScopeOptions.length - 1]?.scopeId ?? scopeId;
+  const defaultOAuthTokenTargetScope = credentialScopeOptions[0]?.scopeId ?? scopeId;
+  const [credentialTargetScope, setCredentialTargetScope] = useState<ScopeId>(
+    defaultCredentialTargetScope,
+  );
+  const [oauthTokenTargetScope, setOAuthTokenTargetScope] = useState<ScopeId>(
+    defaultOAuthTokenTargetScope,
+  );
+  const bindingScopeOptions = useMemo(
+    () => credentialScopeOptions.map((option) => ({ ...option })),
+    [credentialScopeOptions],
+  );
+  useEffect(() => {
+    if (!credentialScopeOptions.some((option) => option.scopeId === credentialTargetScope)) {
+      setCredentialTargetScope(defaultCredentialTargetScope);
+    }
+  }, [credentialScopeOptions, credentialTargetScope, defaultCredentialTargetScope]);
+  useEffect(() => {
+    if (!credentialScopeOptions.some((option) => option.scopeId === oauthTokenTargetScope)) {
+      setOAuthTokenTargetScope(defaultOAuthTokenTargetScope);
+    }
+  }, [credentialScopeOptions, defaultOAuthTokenTargetScope, oauthTokenTargetScope]);
+  const initialCredentialScopeOption =
+    credentialScopeOptions.find((option) => option.scopeId === credentialTargetScope) ??
+    credentialScopeOptions[0];
+  const initialCredentialScopeOptions = initialCredentialScopeOption
+    ? [initialCredentialScopeOption]
+    : [];
   const doPreview = useAtomSet(previewOpenApiSpec, { mode: "promiseExit" });
   const doAdd = useAtomSet(addOpenApiSpecOptimistic(scopeId), {
     mode: "promiseExit",
     mode: "promiseExit",
   });
   const secretList = useSecretPickerSecrets();
+  const initialCredentialSecrets = useMemo(
+    () => secretList.filter((secret) => secret.scopeId === String(credentialTargetScope)),
+    [credentialTargetScope, secretList],
+  );
   const oauth = useOAuthPopupFlow<OAuthCompletionPayload>({
     popupName: OPENAPI_OAUTH_POPUP_NAME,
     popupBlockedMessage: "OAuth popup was blocked by the browser",
   const resolvedBaseUrl = baseUrl.trim();
   const configuredHeaders: Record<string, ConfiguredHeaderBinding> = {};
-  const headerBindings: Array<{ slot: string; secretId: string }> = [];
+  const headerBindings: Array<{
+    slot: string;
+    secretId: string;
+    scope: ScopeId;
+    secretScope: ScopeId;
+  }> = [];
+  const configuredQueryParams: Record<string, string | ConfiguredHeaderBinding> = {};
+  const queryParamBindings: Array<{
+    slot: string;
+    secretId: string;
+    scope: ScopeId;
+    secretScope: ScopeId;
+  }> = [];
   for (const ch of customHeaders) {
     if (!ch.name.trim()) continue;
     const slot = headerBindingSlot(ch.name.trim());
       prefix: ch.prefix,
     });
     if (ch.secretId) {
-      headerBindings.push({ slot, secretId: ch.secretId });
+      headerBindings.push({
+        slot,
+        secretId: ch.secretId,
+        scope: ch.targetScope ?? credentialTargetScope,
+        secretScope: ch.secretScope ?? ch.targetScope ?? credentialTargetScope,
+      });
+    }
+  }
+  for (const param of runtimeCredentials.queryParams) {
+    const name = param.name.trim();
+    if (!name) continue;
+    if (param.secretId) {
+      const slot = queryParamBindingSlot(name);
+      configuredQueryParams[name] = new ConfiguredHeaderBinding({
+        kind: "binding",
+        slot,
+        prefix: param.prefix,
+      });
+      queryParamBindings.push({
+        slot,
+        secretId: param.secretId,
+        scope: param.targetScope ?? credentialTargetScope,
+        secretScope: param.secretScope ?? param.targetScope ?? credentialTargetScope,
+      });
+      continue;
+    }
+    if (param.literalValue?.trim()) {
+      configuredQueryParams[name] = param.literalValue.trim();
     }
   }
       : null;
   const hasHeaders = Object.keys(configuredHeaders).length > 0;
   const oauth2Busy = startingOAuth || oauth.busy;
+  const canConnectOAuth2 = Boolean(oauth2ClientIdSecretId) && resolvedBaseUrl.length > 0;
+  const hasIncompleteHeaderCredentials =
+    strategy.kind !== "none" &&
+    strategy.kind !== "oauth2" &&
+    customHeaders.some((header) => header.name.trim() && !header.secretId);
+  const hasIncompleteQueryCredentials = runtimeCredentials.queryParams.some(
+    (param) => param.name.trim() && !param.secretId && !param.literalValue?.trim(),
+  );
+  const willAddWithoutInitialCredentials =
+    Boolean(selectedOAuth2Preset && !oauth2Auth) ||
+    hasIncompleteHeaderCredentials ||
+    hasIncompleteQueryCredentials;
   const canAdd = preview !== null && resolvedBaseUrl.length > 0;
     }
   };
+  const setInitialCredentialScope = (targetScope: ScopeId) => {
+    setCredentialTargetScope(targetScope);
+    setCustomHeaders((headers) =>
+      headers.map((header) => ({
+        ...header,
+        targetScope,
+        ...(header.secretScope && header.secretScope !== targetScope
+          ? { secretId: null, secretScope: undefined }
+          : {}),
+      })),
+    );
+    setOauth2ClientIdSecretId(null);
+    setOauth2ClientSecretSecretId(null);
+    setOauth2ClientIdScope(null);
+    setOauth2ClientSecretScope(null);
+    setOauth2AuthState(null);
+  };
   const toggleOAuth2Scope = (scope: string) => {
     setOauth2SelectedScopes((prev) => {
       const copy = new Set(prev);
           endpoint: tokenUrl,
           redirectUrl: tokenUrl,
           connectionId,
-          tokenScope: credentialTargetScope,
+          tokenScope: oauthTokenTargetScope,
           strategy: {
             kind: "client-credentials",
             tokenEndpoint: tokenUrl,
     const issuerUrl = inferOAuthIssuerUrl(authorizationUrl);
     await oauth.openAuthorization({
-      tokenScope: credentialTargetScope,
+      tokenScope: oauthTokenTargetScope,
       run: async () => {
         const exit = await doStartOAuth({
           params: { scopeId },
           payload: {
             endpoint: authorizationUrl,
             connectionId: openApiOAuthConnectionId(resolvedSourceId, selectedOAuth2Preset.flow),
-            tokenScope: credentialTargetScope,
+            tokenScope: oauthTokenTargetScope,
             redirectUrl: oauth2RedirectUrl,
             strategy: {
               kind: "authorization-code",
     resolvedSourceId,
     selectedOAuth2Fingerprint,
     oauth,
-    credentialTargetScope,
+    oauthTokenTargetScope,
   ]);
   const handleCancelOAuth2 = useCallback(() => {
         namespace,
         baseUrl: resolvedBaseUrl || undefined,
         ...(hasHeaders ? { headers: configuredHeaders } : {}),
-        ...(Object.keys(serializeHttpCredentials(runtimeCredentials).queryParams).length > 0
+        ...(Object.keys(configuredQueryParams).length > 0
-          ? {
+          ? { queryParams: configuredQueryParams }
-              queryParams: serializeHttpCredentials(runtimeCredentials).queryParams,
-            }
           : {}),
         ...(configuredOAuth2 ? { oauth2: configuredOAuth2 } : {}),
       },
     const sourceId = exit.value.namespace;
     const sourceScope = ScopeId.make(scopeId);
     const bindingScope = ScopeId.make(credentialTargetScope);
+    const oauthTokenBindingScope = ScopeId.make(oauthTokenTargetScope);
+    const clientIdSecretScope = oauth2ClientIdScope ?? bindingScope;
+    const clientSecretSecretScope = oauth2ClientSecretScope ?? bindingScope;
     for (const binding of headerBindings) {
       const bindingExit = await doSetBinding({
         payload: {
           sourceId,
           sourceScope,
-          scope: bindingScope,
+          scope: binding.scope,
           slot: binding.slot,
           value: {
             kind: "secret",
             secretId: SecretId.make(binding.secretId),
+            secretScopeId: binding.secretScope,
+          },
+        },
+        reactivityKeys: bindingWriteKeys,
+      });
+      if (Exit.isFailure(bindingExit)) {
+        setAddError(errorMessageFromExit(bindingExit, "Failed to add source"));
+        setAdding(false);
+        return;
+      }
+    }
+    for (const binding of queryParamBindings) {
+      const bindingExit = await doSetBinding({
+        params: { scopeId },
+        payload: {
+          sourceId,
+          sourceScope,
+          scope: binding.scope,
+          slot: binding.slot,
+          value: {
+            kind: "secret",
+            secretId: SecretId.make(binding.secretId),
+            secretScopeId: binding.secretScope,
           },
         },
         reactivityKeys: bindingWriteKeys,
           value: {
             kind: "secret",
             secretId: SecretId.make(oauth2ClientIdSecretId),
+            secretScopeId: clientIdSecretScope,
           },
         },
         reactivityKeys: bindingWriteKeys,
           value: {
             kind: "secret",
             secretId: SecretId.make(oauth2ClientSecretSecretId),
+            secretScopeId: clientSecretSecretScope,
           },
         },
         reactivityKeys: bindingWriteKeys,
         payload: {
           sourceId,
           sourceScope,
-          scope: bindingScope,
+          scope: oauthTokenBindingScope,
           slot: configuredOAuth2.connectionSlot,
           value: {
             kind: "connection",
     <div className="flex flex-1 flex-col gap-6">
       <div>
         <h1 className="text-xl font-semibold text-foreground">Add OpenAPI Source</h1>
-        <p className="mt-1 text-[13px] text-muted-foreground">
-          Save the source now, then add personal or organization credentials where the API needs
-          them.
-        </p>
       </div>
       {!preview && (
       {preview && (
         <>
           <section className="space-y-2.5">
-            <FieldLabel>Authentication</FieldLabel>
+            <FieldLabel>Authentication method</FieldLabel>
             {/* RadioGroup always renders so the static Custom + None radios
                 stay visible for specs with no security schemes (e.g. MS Graph).
                 The preset .map() blocks below render nothing when their arrays
             {/* Header-based auth input */}
             {strategy.kind !== "none" && strategy.kind !== "oauth2" && (
-              <CredentialScopeSection
+              <div className="space-y-3">
-                value={credentialTargetScope}
-                options={credentialScopeOptions}
-                onChange={(targetScope) => {
-                  setCredentialTargetScope(targetScope);
-                  setOauth2AuthState(null);
-                }}
-              >
                 <HeadersList
                   headers={customHeaders}
                   onHeadersChange={handleHeadersChange}
                   existingSecrets={secretList}
                   sourceName={identity.name}
                   targetScope={credentialTargetScope}
+                  credentialScopeOptions={initialCredentialScopeOptions}
+                  bindingScopeOptions={bindingScopeOptions}
+                  restrictSecretsToTargetScope
+                  emptyLabel="No credentials yet. Add the header value this method should use."
                 />
-              </CredentialScopeSection>
+              </div>
             )}
             <HttpCredentialsEditor
               existingSecrets={secretList}
               sourceName={identity.name}
               targetScope={credentialTargetScope}
+              credentialScopeOptions={initialCredentialScopeOptions}
+              bindingScopeOptions={bindingScopeOptions}
+              restrictSecretsToTargetScope
               sections={{ headers: false, queryParams: true }}
               labels={{ queryParams: "Runtime query parameters" }}
             />
             {/* OAuth2 configuration */}
             {selectedOAuth2Preset && (
               <div className="space-y-3 rounded-lg border border-border/60 bg-muted/10 p-3">
-                <CredentialScopeSection
+                <div className="space-y-3">
-                  value={credentialTargetScope}
-                  options={credentialScopeOptions}
-                  onChange={(targetScope) => {
-                    setCredentialTargetScope(targetScope);
-                    setOauth2AuthState(null);
-                  }}
-                  description="Choose who can use the OAuth client secrets and connection."
-                >
                   <div className="space-y-1.5">
                     <FieldLabel className="text-[11px]">
                       Redirect URL{" "}
                   </div>
                   <div className="space-y-1.5">
                     <FieldLabel className="text-[11px]">Client ID secret</FieldLabel>
-                    <CreatableSecretPicker
+                    <div className="grid gap-2 md:grid-cols-2">
-                      value={oauth2ClientIdSecretId}
+                      <div className="space-y-1.5">
-                      onSelect={(id: string) => {
+                        <div className="flex items-center gap-1.5">
-                        setOauth2ClientIdSecretId(id);
+                          <FieldLabel className="text-[11px]">Secret</FieldLabel>
-                        setOauth2AuthState(null);
+                          <HelpTooltip label="Client ID secret">
-                      }}
+                            Select or create the OAuth client ID secret.
-                      secrets={secretList}
+                          </HelpTooltip>
-                      sourceName={identity.name}
+                        </div>
-                      secretLabel="Client ID"
+                        <CreatableSecretPicker
-                      targetScope={credentialTargetScope}
+                          value={oauth2ClientIdSecretId}
-                    />
+                          onSelect={(id: string, secretScopeId?: ScopeId) => {
+                            setOauth2ClientIdSecretId(id);
+                            setOauth2ClientIdScope(secretScopeId ?? credentialTargetScope);
+                            setOauth2AuthState(null);
+                          }}
+                          secrets={initialCredentialSecrets}
+                          sourceName={identity.name}
+                          secretLabel="Client ID"
+                          targetScope={oauth2ClientIdScope ?? credentialTargetScope}
+                          credentialScopeOptions={initialCredentialScopeOptions}
+                          onCreatedScope={setOauth2ClientIdScope}
+                        />
+                      </div>
+                      <CredentialScopeDropdown
+                        value={credentialTargetScope}
+                        options={bindingScopeOptions}
+                        onChange={setInitialCredentialScope}
+                      />
+                    </div>
                   </div>
                   <div className="space-y-1.5">
                     <FieldLabel className="text-[11px]">
                         · optional for public clients with PKCE
                       </span>
                     </FieldLabel>
-                    <CreatableSecretPicker
+                    <div className="grid gap-2 md:grid-cols-2">
-                      value={oauth2ClientSecretSecretId}
+                      <div className="space-y-1.5">
-                      onSelect={(id: string) => {
+                        <div className="flex items-center gap-1.5">
-                        setOauth2ClientSecretSecretId(id);
+                          <FieldLabel className="text-[11px]">Secret</FieldLabel>
-                        setOauth2AuthState(null);
+                          <HelpTooltip label="Client secret">
-                      }}
+                            Select or create the OAuth client secret.
-                      secrets={secretList}
+                          </HelpTooltip>
-                      sourceName={identity.name}
+                        </div>
-                      secretLabel="Client Secret"
+                        <CreatableSecretPicker
-                      targetScope={credentialTargetScope}
+                          value={oauth2ClientSecretSecretId}
-                    />
+                          onSelect={(id: string, secretScopeId?: ScopeId) => {
+                            setOauth2ClientSecretSecretId(id);
+                            setOauth2ClientSecretScope(secretScopeId ?? credentialTargetScope);
+                            setOauth2AuthState(null);
+                          }}
+                          secrets={initialCredentialSecrets}
+                          sourceName={identity.name}
+                          secretLabel="Client Secret"
+                          targetScope={oauth2ClientSecretScope ?? credentialTargetScope}
+                          credentialScopeOptions={initialCredentialScopeOptions}
+                          onCreatedScope={setOauth2ClientSecretScope}
+                        />
+                      </div>
+                      <CredentialScopeDropdown
+                        value={credentialTargetScope}
+                        options={bindingScopeOptions}
+                        onChange={setInitialCredentialScope}
+                      />
+                    </div>
                   </div>
                   <div className="space-y-1.5">
                     <FieldLabel className="text-[11px]">Scopes</FieldLabel>
                     </div>
                   ) : (
                     <div className="flex flex-col gap-1.5">
-                      <Button
+                      <div className="grid gap-2 md:grid-cols-2">
-                        variant="secondary"
+                        <div className="space-y-1.5">
-                        onClick={handleConnectOAuth2}
+                          <div className="flex items-center gap-1.5">
-                        disabled={!oauth2ClientIdSecretId || resolvedBaseUrl.length === 0}
+                            <FieldLabel className="text-[11px]">OAuth sign-in</FieldLabel>
-                        className="w-full"
+                            <HelpTooltip label="OAuth sign-in">
-                      >
+                              Start the provider OAuth flow.
-                        Connect via OAuth
+                            </HelpTooltip>
-                      </Button>
+                          </div>
-                      <p className="text-[11px] text-muted-foreground">
+                          <Button
-                        You can add the source without this OAuth connection. Secured operations
+                            variant="secondary"
-                        will ask for credentials on the source detail page.
+                            onClick={handleConnectOAuth2}
-                      </p>
+                            disabled={!canConnectOAuth2}
+                            className={
+                              canConnectOAuth2
+                                ? "w-full border border-green-500/30 bg-green-600 text-white hover:bg-green-700 focus-visible:ring-green-500/30 dark:bg-green-500 dark:text-white dark:hover:bg-green-600"
+                                : "w-full"
+                            }
+                          >
+                            Connect via OAuth
+                          </Button>
+                        </div>
+                        <CredentialScopeDropdown
+                          value={oauthTokenTargetScope}
+                          options={credentialScopeOptions}
+                          onChange={(targetScope) => {
+                            setOAuthTokenTargetScope(targetScope);
+                            setOauth2AuthState(null);
+                          }}
+                          label="Token saved to"
+                          help="Choose who can use the signed-in OAuth token."
+                        />
+                      </div>
                     </div>
                   )}
                       <p className="text-[11px] text-destructive">{oauth2Error}</p>
                     </div>
                   )}
-                </CredentialScopeSection>
+                </div>
               </div>
             )}
           </section>
             {adding && <Spinner className="size-3.5" />}
             {adding
               ? "Adding…"
-              : selectedOAuth2Preset && !oauth2Auth
+              : willAddWithoutInitialCredentials
                 ? "Add without credentials"
                 : "Add source"}
           </Button>

packages/plugins/openapi/src/react/EditOpenApiSource.tsx+177−116

   const secretList = useSecretPickerSecrets();
   const doUpdate = useAtomSet(updateOpenApiSource, { mode: "promiseExit" });
-  const doSetBinding = useAtomSet(setOpenApiSourceBinding, { mode: "promiseExit" });
+  const doSetBinding = useAtomSet(setOpenApiSourceBinding, {
-  const doRemoveBinding = useAtomSet(removeOpenApiSourceBinding, { mode: "promiseExit" });
+    mode: "promiseExit",
+  });
+  const doRemoveBinding = useAtomSet(removeOpenApiSourceBinding, {
+    mode: "promiseExit",
+  });
   const doStartOAuth = useAtomSet(startOAuth, { mode: "promiseExit" });
   const oauth = useOAuthPopupFlow<OAuthCompletionPayload>({
     popupName: OPENAPI_OAUTH_POPUP_NAME,
     readonly connectionId: string;
   } | null>(null);
   const [loadedSourceKey, setLoadedSourceKey] = useState<string | null>(null);
-  const [selectedCredentialScope, setSelectedCredentialScope] = useState<string>(
+  const [selectedOAuthTokenScope, setSelectedOAuthTokenScope] = useState<string>(
     userScope !== sourceScopeId ? userScope : sourceScopeId,
   );
   const sourceSaveSeq = useRef(0);
+  useEffect(() => {
+    setSelectedOAuthTokenScope(userScope !== sourceScopeId ? userScope : sourceScopeId);
+  }, [sourceScopeId, userScope]);
   useEffect(() => {
     if (!source) return;
     const sourceKey = `${sourceScopeId}:${source.namespace}`;
     setLoadedSourceKey(sourceKey);
   }, [loadedSourceKey, source, sourceScopeId]);
-  useEffect(() => {
-    setSelectedCredentialScope(userScope !== sourceScopeId ? userScope : sourceScopeId);
-  }, [sourceScopeId, userScope]);
   useEffect(() => {
     if (!source) return;
     const sourceKey = `${sourceScopeId}:${source.namespace}`;
     if (userScope !== sourceScopeId) {
       entries.unshift({ scopeId: ScopeId.make(userScope), label: "Personal" });
     } else {
-      entries[0] = { scopeId: ScopeId.make(sourceScopeId), label: "Credentials" };
+      entries[0] = {
+        scopeId: ScopeId.make(sourceScopeId),
+        label: "Credentials",
+      };
     }
     return entries;
   }, [sourceScopeId, userScope]);
-  const activeCredentialScope =
+  const credentialScopeOptions = useMemo(
-    credentialScopes.find((entry) => entry.scopeId === selectedCredentialScope) ??
+    () =>
+      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 activeCredentialScopeId = activeCredentialScope.scopeId;
+  const activeOAuthTokenScopeId = activeOAuthTokenScope.scopeId;
-  const activeCredentialScopeLabel = activeCredentialScope.label;
+  const activeOAuthTokenScopeLabel = activeOAuthTokenScope.label;
   if (!source) {
     return (
     );
   }
-  const setSecretBinding = async (targetScope: ScopeId, slot: string, secretId: string) => {
+  const setSecretBinding = async (
+    targetScope: ScopeId,
+    slot: string,
+    secretId: string,
+    secretScope: ScopeId,
+  ) => {
     const inputKey = `${targetScope}:${slot}`;
     const trimmed = secretId.trim();
     if (!trimmed) return;
         sourceScope,
         scope: targetScope,
         slot,
-        value: { kind: "secret", secretId: SecretId.make(trimmed) },
+        value: {
+          kind: "secret",
+          secretId: SecretId.make(trimmed),
+          secretScopeId: secretScope,
+        },
       },
       reactivityKeys: sourceWriteKeys,
     });
     <div className="space-y-6">
       <div>
         <h1 className="text-xl font-semibold text-foreground">OpenAPI Source</h1>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Shared source settings stay on the source. Credentials can be saved personally or shared
-          with the organization.
-        </p>
       </div>
       <CardStack>
       <CardStack>
         <CardStackContent className="border-t-0">
-          {credentialScopes.length > 1 && (
+          <CardStackEntry>
-            <CardStackEntry>
+            <CardStackEntryContent>
-              <CardStackEntryContent>
+              <CardStackEntryTitle>Secrets</CardStackEntryTitle>
-                <CardStackEntryTitle>Credentials</CardStackEntryTitle>
+            </CardStackEntryContent>
-                <CardStackEntryDescription>
+          </CardStackEntry>
-                  Choose whether each credential is personal or shared with the organization.
-                </CardStackEntryDescription>
-              </CardStackEntryContent>
-              <FilterTabs
-                tabs={credentialScopes.map((entry) => ({
-                  value: entry.scopeId,
-                  label: entry.label,
-                }))}
-                value={activeCredentialScopeId}
-                onChange={setSelectedCredentialScope}
-              />
-            </CardStackEntry>
-          )}
           {secretSlots
             .filter((slot) => slot.kind === "secret")
             .map((slot) => {
-              const exact = exactBindingForScope(bindingRows, slot.slot, activeCredentialScopeId);
-              const effective = effectiveBindingForScope(
-                bindingRows,
-                slot.slot,
-                activeCredentialScopeId,
-                scopeRanks,
-              );
-              const inputKey = `${activeCredentialScopeId}:${slot.slot}`;
-              const savedHere = !!(exact && isSecretBindingValue(exact.value));
-              const inherited =
-                !savedHere &&
-                effective &&
-                effective.scopeId !== activeCredentialScopeId &&
-                isSecretBindingValue(effective.value);
-              const currentSecretId =
-                exact && isSecretBindingValue(exact.value)
-                  ? exact.value.secretId
-                  : inherited && effective && isSecretBindingValue(effective.value)
-                    ? effective.value.secretId
-                    : null;
               return (
-                <CardStackEntryField
+                <CardStackEntryField key={slot.slot} label={slot.label}>
-                  key={`${slot.slot}:${activeCredentialScopeId}`}
+                  <div className="space-y-3">
-                  label={slot.label}
+                    {secretBindingScopes.map((bindingScope) => {
-                >
+                      const exact = exactBindingForScope(
-                  <div className="space-y-2">
+                        bindingRows,
-                    <CreatableSecretPicker
-                      value={currentSecretId}
-                      onSelect={(secretId) =>
-                        void setSecretBinding(activeCredentialScopeId, slot.slot, secretId)
-                      }
-                      secrets={secretList}
-                      placeholder={
-                        savedHere
-                          ? `Selected in ${activeCredentialScopeLabel.toLowerCase()}`
-                          : inherited
-                            ? "Using organization default"
-                            : "Select or create a secret"
-                      }
-                      targetScope={activeCredentialScopeId}
-                      suggestedId={bindingSecretId(
-                        props.sourceId,
                         slot.slot,
-                        activeCredentialScopeId,
+                        bindingScope.scopeId,
-                      )}
+                      );
-                      sourceName={source.name}
+                      const exactSecretId =
-                      secretLabel={slot.label}
+                        exact && isSecretBindingValue(exact.value) ? exact.value.secretId : null;
-                    />
+                      const inherited =
-                    <div className="flex items-center gap-2">
+                        bindingScope.label === "Personal"
-                      {savedHere && (
+                          ? effectiveBindingForScope(
-                        <Button
+                              bindingRows,
-                          variant="outline"
+                              slot.slot,
-                          size="sm"
+                              bindingScope.scopeId,
-                          onClick={() => void clearBinding(activeCredentialScopeId, slot.slot)}
+                              scopeRanks,
-                          disabled={busyKey === `${activeCredentialScopeId}:${slot.slot}:clear`}
+                            )
+                          : null;
+                      const inheritedSecretId =
+                        inherited &&
+                        inherited.scopeId !== bindingScope.scopeId &&
+                        isSecretBindingValue(inherited.value)
+                          ? inherited.value.secretId
+                          : null;
+                      const inputKey = `${bindingScope.scopeId}:${slot.slot}`;
+                      const clearKey = `${bindingScope.scopeId}:${slot.slot}:clear`;
+                      const rowTitle =
+                        bindingScope.label === "Personal"
+                          ? "My override"
+                          : secretBindingScopes.length === 1
+                            ? "Source credential"
+                            : "Organization default";
+                      return (
+                        <div
+                          key={bindingScope.scopeId}
+                          className="space-y-2 rounded-md border border-border bg-background/40 p-3"
                         >
-                          Clear
+                          <div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between">
-                        </Button>
+                            <div>
-                      )}
+                              <div className="text-sm font-medium text-foreground">{rowTitle}</div>
-                      {busyKey === inputKey && (
+                            </div>
-                        <span className="text-xs text-muted-foreground">Saving…</span>
+                            {bindingScope.label === "Personal" &&
-                      )}
+                              !exactSecretId &&
-                      {slot.hint && (
+                              inheritedSecretId && (
-                        <span className="text-xs text-muted-foreground">{slot.hint}</span>
+                                <span className="text-xs text-muted-foreground">
-                      )}
+                                  Using organization default
-                    </div>
+                                </span>
-                    <p className="text-xs text-muted-foreground">
+                              )}
-                      {savedHere
+                          </div>
-                        ? `Saved in ${activeCredentialScopeLabel.toLowerCase()}.`
+                          <CreatableSecretPicker
-                        : inherited
+                            value={exactSecretId}
-                          ? "No value saved here. Using the organization default."
+                            onSelect={(secretId, secretScopeId) => {
-                          : `No ${activeCredentialScopeLabel.toLowerCase()} value saved yet.`}
+                              void setSecretBinding(
-                    </p>
+                                bindingScope.scopeId,
+                                slot.slot,
+                                secretId,
+                                secretScopeId ?? bindingScope.scopeId,
+                              );
+                            }}
+                            secrets={secretList}
+                            placeholder="Select or create a secret"
+                            targetScope={bindingScope.scopeId}
+                            credentialScopeOptions={credentialScopeOptions}
+                            suggestedId={bindingSecretId(
+                              props.sourceId,
+                              slot.slot,
+                              bindingScope.scopeId,
+                            )}
+                            sourceName={source.name}
+                            secretLabel={slot.label}
+                          />
+                          <div className="flex flex-wrap items-center gap-2">
+                            {exactSecretId && (
+                              <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => void clearBinding(bindingScope.scopeId, slot.slot)}
+                                disabled={busyKey === clearKey}
+                              >
+                                Clear
+                              </Button>
+                            )}
+                            {busyKey === inputKey && (
+                              <span className="text-xs text-muted-foreground">Saving…</span>
+                            )}
+                            {slot.hint && (
+                              <span className="text-xs text-muted-foreground">{slot.hint}</span>
+                            )}
+                          </div>
+                        </div>
+                      );
+                    })}
                   </div>
                 </CardStackEntryField>
               );
                   </p>
                 </div>
               </CardStackEntryField>
+              {credentialScopes.length > 1 && (
+                <CardStackEntry>
+                  <CardStackEntryContent>
+                    <CardStackEntryTitle>OAuth token</CardStackEntryTitle>
+                    <CardStackEntryDescription>
+                      Choose where the signed-in OAuth token is saved.
+                    </CardStackEntryDescription>
+                  </CardStackEntryContent>
+                  <FilterTabs
+                    tabs={credentialScopes.map((entry) => ({
+                      value: entry.scopeId,
+                      label: entry.label,
+                    }))}
+                    value={activeOAuthTokenScopeId}
+                    onChange={setSelectedOAuthTokenScope}
+                  />
+                </CardStackEntry>
+              )}
               <CardStackEntryField label="OAuth Connection">
                 {(() => {
                   const exact = exactBindingForScope(
                     bindingRows,
                     source.config.oauth2!.connectionSlot,
-                    activeCredentialScopeId,
+                    activeOAuthTokenScopeId,
                   );
                   const binding =
                     exact ??
                     effectiveBindingForScope(
                       bindingRows,
                       source.config.oauth2!.connectionSlot,
-                      activeCredentialScopeId,
+                      activeOAuthTokenScopeId,
                       scopeRanks,
                     );
                   const connectionBinding =
                   const bindingScopeId = connectionBinding && binding ? binding.scopeId : null;
                   const isConnecting =
                     busyKey ===
-                    `${activeCredentialScopeId}:${source.config.oauth2.connectionSlot}:connect`;
+                    `${activeOAuthTokenScopeId}:${source.config.oauth2.connectionSlot}:connect`;
                   const isPendingOAuthConnection =
-                    pendingOAuthConnection?.scopeId === activeCredentialScopeId &&
+                    pendingOAuthConnection?.scopeId === activeOAuthTokenScopeId &&
+                    pendingOAuthConnection !== null &&
                     pendingOAuthConnection.slot === source.config.oauth2.connectionSlot;
                   const isConnected = connection !== null && connection !== undefined;
                   const statusText =
                       ? "Saving OAuth connection..."
                       : connectionBinding && bindingScopeId
                         ? connection
-                          ? bindingScopeId === activeCredentialScopeId
+                          ? bindingScopeId === activeOAuthTokenScopeId
-                            ? `Connected in ${activeCredentialScopeLabel.toLowerCase()} as ${
+                            ? `Connected in ${activeOAuthTokenScopeLabel.toLowerCase()} as ${
                                 connection.identityLabel ?? connection.id
                               }`
                             : `Using organization connection ${
                                 connection.identityLabel ?? connection.id
                               }`
-                          : bindingScopeId === activeCredentialScopeId
+                          : bindingScopeId === activeOAuthTokenScopeId
-                            ? `Saved connection is missing in ${activeCredentialScopeLabel.toLowerCase()}`
+                            ? `Saved connection is missing in ${activeOAuthTokenScopeLabel.toLowerCase()}`
                             : "Organization connection is missing"
-                        : `No ${activeCredentialScopeLabel.toLowerCase()} connection`;
+                        : `No ${activeOAuthTokenScopeLabel.toLowerCase()} connection`;
                   return (
                     <div className="space-y-2">
                       <div className="text-sm text-muted-foreground">{statusText}</div>
                       <Button
                         size="sm"
-                        onClick={() => void connectOAuth(activeCredentialScopeId)}
+                        onClick={() => void connectOAuth(activeOAuthTokenScopeId)}
                         disabled={isConnecting}
                       >
                         {isConnecting ? "Connecting…" : isConnected ? "Reconnect" : "Connect"}

packages/plugins/openapi/src/sdk/multi-scope-bearer.test.ts+120−6

@@ -81,9 +81,10 @@ const ProjectsGroupLive = HttpApiBuilder.group(VercelApi, "projects", (handlers) · 80 unmodified lines
81		81
82	const ApiLive = HttpApiBuilder.layer(VercelApi).pipe(Layer.provide(ProjectsGroupLive));	82	const ApiLive = HttpApiBuilder.layer(VercelApi).pipe(Layer.provide(ProjectsGroupLive));
83		83
84	const TestLayer = HttpRouter.serve(ApiLive, { disableListenLog: true, disableLogger: true }).pipe(	84	const TestLayer = HttpRouter.serve(ApiLive, {
85	Layer.provideMerge(NodeHttpServer.layerTest),	85	disableListenLog: true,
86	);	86	disableLogger: true,
		87	}).pipe(Layer.provideMerge(NodeHttpServer.layerTest));
87		88
88	// ---------------------------------------------------------------------------	89	// ---------------------------------------------------------------------------
89	// Tests	90	// Tests
@@ -296,7 +297,10 @@ layer(TestLayer)("OpenAPI multi-scope bearer (Vercel-style)", (it) => { · 206 unmodified lines
296	"vercel.projects.list",	297	"vercel.projects.list",
297	{},	298	{},
298	autoApprove,	299	autoApprove,
299	)) as { data: { authorization?: string; token?: string } \| null; error: unknown };	300	)) as {
		301	data: { authorization?: string; token?: string } \| null;
		302	error: unknown;
		303	};
300	expect(aliceResult.error).toBeNull();	304	expect(aliceResult.error).toBeNull();
301	expect(aliceResult.data?.authorization).toBe("Bearer alice-vercel-token");	305	expect(aliceResult.data?.authorization).toBe("Bearer alice-vercel-token");
302	expect(aliceResult.data?.token).toBe("alice-team");	306	expect(aliceResult.data?.token).toBe("alice-team");
@@ -882,8 +886,16 @@ layer(TestLayer)("OpenAPI multi-scope bearer (Vercel-style)", (it) => { · 579 unmodified lines
882	const adapter = makeMemoryAdapter({ schema: collectSchemas(plugins) });	886	const adapter = makeMemoryAdapter({ schema: collectSchemas(plugins) });
883	const blobs = makeInMemoryBlobStore();	887	const blobs = makeInMemoryBlobStore();
884	const now = new Date();	888	const now = new Date();
885	const orgScope = new Scope({ id: ScopeId.make("org"), name: "org", createdAt: now });	889	const orgScope = new Scope({
886	const userScope = new Scope({ id: ScopeId.make("user"), name: "user", createdAt: now });	890	id: ScopeId.make("org"),
		891	name: "org",
		892	createdAt: now,
		893	});
		894	const userScope = new Scope({
		895	id: ScopeId.make("user"),
		896	name: "user",
		897	createdAt: now,
		898	});
887		899
888	const adminExec = yield* createExecutor({	900	const adminExec = yield* createExecutor({
889	scopes: [orgScope],	901	scopes: [orgScope],
@@ -949,4 +961,106 @@ layer(TestLayer)("OpenAPI multi-scope bearer (Vercel-style)", (it) => { · 59 unmodified lines
949	expect(result.data?.authorization).toBe("Bearer org-token");	961	expect(result.data?.authorization).toBe("Bearer org-token");
950	}),	962	}),
951	);	963	);
		964
		965	it.effect("personal binding can override the source with an org-owned secret", () =>
		966	Effect.gen(function* () {
		967	const secretStore = new Map<string, string>();
		968	const key = (scope: string, id: string) => `${scope}\u0000${id}`;
		969	const memoryProvider: SecretProvider = {
		970	key: "memory",
		971	writable: true,
		972	get: (id, scope) => Effect.sync(() => secretStore.get(key(scope, id)) ?? null),
		973	set: (id, value, scope) =>
		974	Effect.sync(() => {
		975	secretStore.set(key(scope, id), value);
		976	}),
		977	delete: (id, scope) => Effect.sync(() => secretStore.delete(key(scope, id))),
		978	};
		979	const memorySecretsPlugin = definePlugin(() => ({
		980	id: "memory-secrets" as const,
		981	storage: () => ({}),
		982	secretProviders: [memoryProvider],
		983	}));
		984
		985	const httpClient = yield* HttpClient.HttpClient;
		986	const clientLayer = Layer.succeed(HttpClient.HttpClient, httpClient);
		987	const plugins = [
		988	openApiPlugin({ httpClientLayer: clientLayer }),
		989	memorySecretsPlugin(),
		990	] as const;
		991
		992	const adapter = makeMemoryAdapter({ schema: collectSchemas(plugins) });
		993	const blobs = makeInMemoryBlobStore();
		994	const now = new Date();
		995	const orgScope = new Scope({
		996	id: ScopeId.make("org"),
		997	name: "org",
		998	createdAt: now,
		999	});
		1000	const userScope = new Scope({
		1001	id: ScopeId.make("user"),
		1002	name: "user",
		1003	createdAt: now,
		1004	});
		1005
		1006	const adminExec = yield* createExecutor({
		1007	scopes: [orgScope],
		1008	adapter,
		1009	blobs,
		1010	plugins,
		1011	onElicitation: "accept-all",
		1012	});
		1013	const userExec = yield* createExecutor({
		1014	scopes: [userScope, orgScope],
		1015	adapter,
		1016	blobs,
		1017	plugins,
		1018	onElicitation: "accept-all",
		1019	});
		1020
		1021	yield* adminExec.openapi.addSpec({
		1022	spec: specJson,
		1023	scope: String(orgScope.id),
		1024	namespace: "vercel",
		1025	baseUrl: "",
		1026	headers: {
		1027	Authorization: new ConfiguredHeaderBinding({
		1028	kind: "binding",
		1029	slot: "auth:personal-choice",
		1030	prefix: "Bearer ",
		1031	}),
		1032	},
		1033	});
		1034	yield* adminExec.secrets.set(
		1035	new SetSecretInput({
		1036	id: SecretId.make("org-choice-token"),
		1037	scope: orgScope.id,
		1038	name: "Org choice token",
		1039	value: "org-choice",
		1040	}),
		1041	);
		1042
		1043	yield* userExec.openapi.setSourceBinding(
		1044	new OpenApiSourceBindingInput({
		1045	sourceId: "vercel",
		1046	sourceScope: orgScope.id,
		1047	scope: userScope.id,
		1048	slot: "auth:personal-choice",
		1049	value: {
		1050	kind: "secret",
		1051	secretId: SecretId.make("org-choice-token"),
		1052	secretScopeId: orgScope.id,
		1053	},
		1054	}),
		1055	);
		1056
		1057	const result = (yield* userExec.tools.invoke("vercel.projects.list", {}, autoApprove)) as {
		1058	data: { authorization?: string } \| null;
		1059	error: unknown;
		1060	};
		1061
		1062	expect(result.error).toBeNull();
		1063	expect(result.data?.authorization).toBe("Bearer org-choice");
		1064	}),
		1065	);
952	});	1066	});

packages/plugins/openapi/src/sdk/plugin.test.ts+1−0

@@ -1122,6 +1122,7 @@ layer(TestLayer)("OpenAPI Plugin", (it) => { · 1121 unmodified lines
1122	expect(clientIdBinding?.value).toEqual({	1122	expect(clientIdBinding?.value).toEqual({
1123	kind: "secret",	1123	kind: "secret",
1124	secretId: SecretId.make("acme-client-id"),	1124	secretId: SecretId.make("acme-client-id"),
		1125	secretScopeId: ScopeId.make(TEST_SCOPE),
1125	});	1126	});
1126		1127
1127	const connectionBinding = yield* executor.openapi	1128	const connectionBinding = yield* executor.openapi

packages/plugins/openapi/src/sdk/plugin.ts+58−27

   ConfiguredHeaderValue as ConfiguredHeaderValueSchema,
   ConfiguredHeaderBinding,
   OAuth2SourceConfig,
+  OpenApiCredentialInput as OpenApiCredentialInputSchema,
   OpenApiSourceBindingInput,
   OpenApiSourceBindingRef,
+  type OpenApiCredentialInput as OpenApiCredentialInputValue,
   type OpenApiSourceBindingValue,
   OperationBinding,
   type ConfiguredHeaderValue as ConfiguredHeaderValueValue,
 export type HeaderValue = HeaderValueValue;
 export type ConfiguredHeaderValue = ConfiguredHeaderValueValue;
 export type OpenApiHeaderInput = HeaderValue | ConfiguredHeaderValue;
-export type OpenApiCredentialInput = HeaderValue | ConfiguredHeaderValue;
+export type OpenApiCredentialInput = OpenApiCredentialInputValue;
 export type OpenApiOAuthInput = OAuth2SourceConfig;
 export interface OpenApiSpecFetchCredentialsInput {
   readonly name?: string;
   readonly baseUrl?: string;
   readonly namespace?: string;
-  readonly headers?: Record<string, OpenApiHeaderInput>;
+  readonly headers?: Record<string, OpenApiCredentialInput>;
   readonly queryParams?: Record<string, OpenApiCredentialInput>;
   readonly oauth2?: OpenApiOAuthInput;
   readonly credentialTargetScope?: string;
 export interface OpenApiUpdateSourceInput {
   readonly name?: string;
   readonly baseUrl?: string;
-  readonly headers?: Record<string, OpenApiHeaderInput>;
+  readonly headers?: Record<string, OpenApiCredentialInput>;
   readonly queryParams?: Record<string, OpenApiCredentialInput>;
   readonly credentialTargetScope?: string;
   /** Refresh the source's stored OAuth2 metadata after a successful
 type PreviewSpecInput = typeof PreviewSpecInputSchema.Type;
 const OpenApiHeaderInputSchema = Schema.Union([HeaderValueSchema, ConfiguredHeaderValueSchema]);
-const OpenApiCredentialInputSchema = Schema.Union([HeaderValueSchema, ConfiguredHeaderValueSchema]);
 const OpenApiOAuthInputSchema = OAuth2SourceConfig;
 const AddSourceInputSchema = Schema.Struct({
   `spec_fetch_query_param:${slotPart(name)}`;
 const canonicalizeHeaders = (
-  headers: Record<string, OpenApiHeaderInput> | undefined,
+  headers: Record<string, OpenApiCredentialInput> | undefined,
 ): {
   readonly headers: Record<string, ConfiguredHeaderValue>;
   readonly bindings: ReadonlyArray<{
     readonly slot: string;
     readonly value: OpenApiSourceBindingValue;
+    readonly targetScope?: string;
   }>;
 } => {
   const nextHeaders: Record<string, ConfiguredHeaderValue> = {};
-  const bindings: Array<{ slot: string; value: OpenApiSourceBindingValue }> = [];
+  const bindings: Array<{
+    slot: string;
+    value: OpenApiSourceBindingValue;
+    targetScope?: string;
+  }> = [];
   for (const [name, value] of Object.entries(headers ?? {})) {
     if (typeof value === "string") {
       nextHeaders[name] = value;
     });
     bindings.push({
       slot,
+      targetScope: "targetScope" in value ? value.targetScope : undefined,
       value: {
         kind: "secret",
         secretId: SecretId.make(value.secretId),
+        ...("secretScopeId" in value && value.secretScopeId
+          ? { secretScopeId: value.secretScopeId }
+          : {}),
       },
     });
   }
   readonly bindings: ReadonlyArray<{
     readonly slot: string;
     readonly value: OpenApiSourceBindingValue;
+    readonly targetScope?: string;
   }>;
 } => {
   const nextValues: Record<string, ConfiguredHeaderValue> = {};
-  const bindings: Array<{ slot: string; value: OpenApiSourceBindingValue }> = [];
+  const bindings: Array<{
+    slot: string;
+    value: OpenApiSourceBindingValue;
+    targetScope?: string;
+  }> = [];
   for (const [name, value] of Object.entries(values ?? {})) {
     if (typeof value === "string") {
       nextValues[name] = value;
     });
     bindings.push({
       slot,
+      targetScope: "targetScope" in value ? value.targetScope : undefined,
       value: {
         kind: "secret",
         secretId: SecretId.make(value.secretId),
+        ...("secretScopeId" in value && value.secretScopeId
+          ? { secretScopeId: value.secretScopeId }
+          : {}),
       },
     });
   }
   readonly bindings: ReadonlyArray<{
     readonly slot: string;
     readonly value: OpenApiSourceBindingValue;
+    readonly targetScope?: string;
   }>;
 } => {
   const headers = canonicalizeCredentialMap(credentials?.headers, specFetchHeaderSlotFromName);
     }
   });
-const bindingTargetScope = (
+const targetScopeForBinding = (
-  targetScope: string | undefined,
+  fallbackTargetScope: string | undefined,
-  bindings: readonly unknown[],
+  binding: { readonly slot: string; readonly targetScope?: string },
-): Effect.Effect<string | undefined, OpenApiOAuthError> => {
+): Effect.Effect<string, OpenApiOAuthError> => {
-  if (bindings.length === 0) return Effect.succeed(undefined);
+  const targetScope = binding.targetScope ?? fallbackTargetScope;
   if (targetScope) return Effect.succeed(targetScope);
   return Effect.fail(
     new OpenApiOAuthError({
         value.slot,
       );
       if (binding?.value.kind === "secret") {
-        const secret = yield* ctx.secrets.getAtScope(binding.value.secretId, binding.scopeId).pipe(
+        const secret = yield* ctx.secrets
-          Effect.catchTag("SecretOwnedByConnectionError", () =>
+          .getAtScope(binding.value.secretId, binding.value.secretScopeId ?? binding.scopeId)
-            Effect.fail(
+          .pipe(
-              new OpenApiOAuthError({
+            Effect.catchTag("SecretOwnedByConnectionError", () =>
-                message: `Secret not found for header "${name}"`,
+              Effect.fail(
-              }),
+                new OpenApiOAuthError({
+                  message: `Secret not found for header "${name}"`,
+                }),
+              ),
             ),
-          ),
+          );
-        );
         if (secret === null) {
           return yield* new OpenApiOAuthError({
             message: `Missing secret "${binding.value.secretId}" for ${params.missingLabel} "${name}"`,
         ...canonicalSpecFetchCredentials.bindings,
         ...canonicalOAuth2.bindings,
       ];
-      const targetScope = yield* bindingTargetScope(input.credentialTargetScope, directBindings);
+      for (const binding of directBindings) {
-      if (targetScope) {
+        const bindingTargetScope = yield* targetScopeForBinding(
+          input.credentialTargetScope,
+          binding,
+        );
         yield* validateOpenApiBindingTarget(ctx, {
           sourceId: namespace,
           sourceScope: input.scope,
-          targetScope,
+          targetScope: bindingTargetScope,
         });
       }
       const definitions = compileToolDefinitions(result.operations);
       const sourceName = input.name ?? Option.getOrElse(result.title, () => namespace);
             })),
           });
-          if (targetScope) {
+          if (directBindings.length > 0) {
             for (const binding of directBindings) {
+              const bindingTargetScope = yield* targetScopeForBinding(
+                input.credentialTargetScope,
+                binding,
+              );
               yield* ctx.credentialBindings.set({
-                targetScope: ScopeId.make(targetScope),
+                targetScope: ScopeId.make(bindingTargetScope),
                 pluginId: OPENAPI_PLUGIN_ID,
                 sourceId: namespace,
                 sourceScope: ScopeId.make(input.scope),
                   sourceScope: ScopeId.make(scope),
                 });
                 yield* ctx.storage.removeSource(namespace, scope);
-                yield* ctx.core.sources.unregister({ id: namespace, targetScope: scope });
+                yield* ctx.core.sources.unregister({
+                  id: namespace,
+                  targetScope: scope,
+                });
               }),
             );
             if (configFile) {

packages/plugins/openapi/src/sdk/store.ts+3−0

@@ -304,6 +304,9 @@ const slugifySlotPart = (value: string): string => · 303 unmodified lines
304	export const headerBindingSlot = (headerName: string): string =>	304	export const headerBindingSlot = (headerName: string): string =>
305	`header:${slugifySlotPart(headerName)}`;	305	`header:${slugifySlotPart(headerName)}`;
306		306
		307	export const queryParamBindingSlot = (name: string): string =>
		308	`query_param:${slugifySlotPart(name)}`;
		309
307	export const oauth2ClientIdSlot = (securitySchemeName: string): string =>	310	export const oauth2ClientIdSlot = (securitySchemeName: string): string =>
308	`oauth2:${slugifySlotPart(securitySchemeName)}:client-id`;	311	`oauth2:${slugifySlotPart(securitySchemeName)}:client-id`;
309		312

packages/plugins/openapi/src/sdk/types.ts+15−1

 import { Schema } from "effect";
-import { ConnectionId, ScopeId, SecretBackedValue, SecretId } from "@executor-js/sdk/core";
+import {
+  ConnectionId,
+  ScopeId,
+  ScopedSecretCredentialInput,
+  SecretBackedValue,
+  SecretId,
+} from "@executor-js/sdk/core";
 // ---------------------------------------------------------------------------
 // Branded IDs
 export const ConfiguredHeaderValue = Schema.Union([Schema.String, ConfiguredHeaderBinding]);
 export type ConfiguredHeaderValue = typeof ConfiguredHeaderValue.Type;
+export const OpenApiCredentialInput = Schema.Union([
+  ScopedSecretCredentialInput,
+  HeaderValue,
+  ConfiguredHeaderValue,
+]);
+export type OpenApiCredentialInput = typeof OpenApiCredentialInput.Type;
 export const OpenApiSourceBindingValue = Schema.Union([
   Schema.Struct({
     kind: Schema.Literal("secret"),
     secretId: SecretId,
+    secretScopeId: Schema.optional(ScopeId),
   }),
   Schema.Struct({
     kind: Schema.Literal("connection"),

packages/react/src/components/help-tooltip.tsx+32−0

@@ -0,0 +1,32 @@
	1	import { InfoIcon } from "lucide-react";
	2
	3	import { cn } from "../lib/utils";
	4	import { Button } from "./button";
	5	import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
	6
	7	export function HelpTooltip(props: {
	8	readonly label: string;
	9	readonly children: React.ReactNode;
	10	readonly className?: string;
	11	}) {
	12	return (
	13	<TooltipProvider>
	14	<Tooltip>
	15	<TooltipTrigger asChild>
	16	<Button
	17	type="button"
	18	variant="ghost"
	19	size="icon-xs"
	20	className="inline-flex size-4 items-center justify-center rounded-full text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
	21	aria-label={`${props.label} help`}
	22	>
	23	<InfoIcon className="size-3.5" aria-hidden />
	24	</Button>
	25	</TooltipTrigger>
	26	<TooltipContent className={cn("w-max max-w-72 text-left text-wrap", props.className)}>
	27	{props.children}
	28	</TooltipContent>
	29	</Tooltip>
	30	</TooltipProvider>
	31	);
	32	}

packages/react/src/pages/secrets.tsx+11−0

 import { SecretId, SecretInUseError, type ScopeId } from "@executor-js/sdk";
 import { SecretForm } from "../plugins/secret-form";
 import { useScope } from "../hooks/use-scope";
+import { useScopeStack } from "../api/scope-context";
 import {
   Dialog,
   DialogContent,
   usageScopeId: ScopeId;
   showProvider: boolean;
   secret: { id: string; scopeId: ScopeId; name: string; provider?: string };
+  scopeLabel: string;
   onRemove: () => void;
 }) {
   const { secret, showProvider } = props;
         </Suspense>
       </CardStackEntryContent>
       <CardStackEntryActions>
+        <Badge variant="secondary">{props.scopeLabel}</Badge>
         {showProvider && secret.provider && <Badge variant="outline">{secret.provider}</Badge>}
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
   const secretProviderPlugins = useSecretProviderPlugins();
   const [addOpen, setAddOpen] = useState(false);
   const scopeId = useScope();
+  const scopeStack = useScopeStack();
   const secrets = useAtomValue(secretsOptimisticAtom(scopeId));
+  const scopeLabel = (secretScopeId: ScopeId): string => {
+    const index = scopeStack.findIndex((entry) => entry.id === secretScopeId);
+    if (index === 0) return "Personal";
+    if (index > 0) return scopeStack[index]?.name || "Organization";
+    return "Scoped";
+  };
   const existingSecretIds = useMemo(
     () =>
       AsyncResult.match(secrets, {
                           name: s.name,
                           provider: s.provider ? String(s.provider) : undefined,
                         }}
+                        scopeLabel={scopeLabel(s.scopeId)}
                         onRemove={() => handleRemove(s)}
                       />
                     ),

packages/react/src/plugins/credential-target-scope.tsx+91−3

@@ -1,7 +1,7 @@
1	import { useEffect, useMemo, useState } from "react";	1	import { useEffect, useMemo, useState } from "react";
2	import type { ReactNode } from "react";	2	import type { ReactNode } from "react";
3		3
4	import type { ScopeId } from "@executor-js/sdk";	4	import { ScopeId } from "@executor-js/sdk";
5		5
6	import { useScope, useUserScope } from "../api/scope-context";	6	import { useScope, useUserScope } from "../api/scope-context";
7	import {	7	import {
@@ -13,6 +13,15 @@ import { · 5 unmodified lines
13	CardStackEntryTitle,	13	CardStackEntryTitle,
14	} from "../components/card-stack";	14	} from "../components/card-stack";
15	import { FilterTabs } from "../components/filter-tabs";	15	import { FilterTabs } from "../components/filter-tabs";
		16	import { FieldLabel } from "../components/field";
		17	import { HelpTooltip } from "../components/help-tooltip";
		18	import {
		19	Select,
		20	SelectContent,
		21	SelectItem,
		22	SelectTrigger,
		23	SelectValue,
		24	} from "../components/select";
16		25
17	export interface CredentialTargetScopeOption {	26	export interface CredentialTargetScopeOption {
18	readonly scopeId: ScopeId;	27	readonly scopeId: ScopeId;
@@ -147,10 +156,89 @@ export function CredentialScopeSection(props: { · 128 unmodified lines
147	value={props.value}	156	value={props.value}
148	options={props.options}	157	options={props.options}
149	onChange={props.onChange}	158	onChange={props.onChange}
150	title={props.title ?? "Save credentials to"}	159	title={props.title ?? "Used by"}
151	description={props.description ?? "Choose who can use the credentials attached below."}	160	description={props.description ?? "Choose who can use these credentials."}
152	/>	161	/>
153	{props.children}	162	{props.children}
154	</div>	163	</div>
155	);	164	);
156	}	165	}
		166
		167	export function CredentialScopeDropdown(props: {
		168	readonly value: ScopeId;
		169	readonly options: readonly CredentialTargetScopeOption[];
		170	readonly onChange: (scope: ScopeId) => void;
		171	readonly label?: string;
		172	readonly help?: ReactNode;
		173	}) {
		174	const label = props.label ?? "Used by";
		175	if (props.options.length <= 1) return null;
		176
		177	return (
		178	<div className="space-y-1.5">
		179	<div className="flex items-center gap-1.5">
		180	<FieldLabel className="text-[11px]">{label}</FieldLabel>
		181	<HelpTooltip label={label}>
		182	{props.help ?? "Choose who can use these credentials."}
		183	</HelpTooltip>
		184	</div>
		185	<Select
		186	value={String(props.value)}
		187	onValueChange={(value) => props.onChange(ScopeId.make(value))}
		188	>
		189	<SelectTrigger className="w-full">
		190	<SelectValue placeholder={label} />
		191	</SelectTrigger>
		192	<SelectContent>
		193	{props.options.map((option) => (
		194	<SelectItem key={option.scopeId} value={option.scopeId}>
		195	{option.label}
		196	</SelectItem>
		197	))}
		198	</SelectContent>
		199	</Select>
		200	</div>
		201	);
		202	}
		203
		204	export function CredentialControlField(props: {
		205	readonly label: string;
		206	readonly children: ReactNode;
		207	readonly help?: ReactNode;
		208	}) {
		209	return (
		210	<div className="space-y-1.5">
		211	<div className="flex items-center gap-1.5">
		212	<FieldLabel className="text-[11px]">{props.label}</FieldLabel>
		213	{props.help ? <HelpTooltip label={props.label}>{props.help}</HelpTooltip> : null}
		214	</div>
		215	{props.children}
		216	</div>
		217	);
		218	}
		219
		220	export function CredentialUsageRow(props: {
		221	readonly value: ScopeId;
		222	readonly options: readonly CredentialTargetScopeOption[];
		223	readonly onChange: (scope: ScopeId) => void;
		224	readonly children: ReactNode;
		225	readonly label?: string;
		226	readonly help?: ReactNode;
		227	}) {
		228	if (props.options.length <= 1) {
		229	return <div className="space-y-2.5">{props.children}</div>;
		230	}
		231
		232	return (
		233	<div className="grid gap-2 md:grid-cols-2">
		234	<div className="min-w-0 space-y-2.5">{props.children}</div>
		235	<CredentialScopeDropdown
		236	value={props.value}
		237	options={props.options}
		238	onChange={props.onChange}
		239	label={props.label}
		240	help={props.help}
		241	/>
		242	</div>
		243	);
		244	}

packages/react/src/plugins/headers-list.tsx+54−6

   type HeaderAuthPreset,
   type HeaderState,
   SecretHeaderAuthRow,
+  type SecretCredentialPreviewComponent,
+  type SecretCredentialRowCopy,
 } from "./secret-header-auth";
+import type { CredentialTargetScopeOption } from "./credential-target-scope";
 import type { SecretPickerSecret } from "./secret-picker";
 export interface HeadersListProps {
   readonly singleHeader?: boolean;
   /** Text shown in the empty state. */
   readonly emptyLabel?: ReactNode;
+  readonly addLabel?: ReactNode;
+  readonly addAriaLabel?: string;
+  readonly rowCopy?: Partial<SecretCredentialRowCopy>;
+  readonly rowPreviewComponent?: SecretCredentialPreviewComponent;
   /**
    * Display name of the source that owns these headers (e.g. "Axiom"). Used
    * to derive unique default secret labels/IDs like `axiom-authorization`.
   readonly sourceName?: string;
   /** Inline-created secrets are written to this explicit scope. */
   readonly targetScope: ScopeId;
+  /** Scope choices shown only inside the inline "+ New secret" form. */
+  readonly credentialScopeOptions?: readonly CredentialTargetScopeOption[];
+  /** Scope choices for where this source credential is used. */
+  readonly bindingScopeOptions?: readonly CredentialTargetScopeOption[];
+  readonly restrictSecretsToTargetScope?: boolean;
 }
 export function HeadersList({
   presets = defaultHeaderAuthPresets,
   singleHeader = false,
   emptyLabel = "No headers",
+  addLabel,
+  addAriaLabel = "Add header",
+  rowCopy,
+  rowPreviewComponent,
   sourceName,
   targetScope,
+  credentialScopeOptions,
+  bindingScopeOptions,
+  restrictSecretsToTargetScope,
 }: HeadersListProps) {
   const [picking, setPicking] = useState(false);
   const canAddMore = !singleHeader || headers.length === 0;
+  const addFirstPreset = () => {
+    const preset = presets[0];
+    if (presets.length === 1 && preset) {
+      addHeaderFromPreset(preset);
+      return;
+    }
+    setPicking(true);
+  };
   const addHeaderFromPreset = (preset: HeaderAuthPreset) => {
     onHeadersChange([
         prefix: preset.prefix,
         presetKey: preset.key,
         secretId: null,
+        targetScope,
       },
     ]);
     setPicking(false);
       secretId: string | null;
       prefix?: string;
       presetKey?: string;
+      targetScope?: ScopeId;
+      secretScope?: ScopeId;
     }>,
   ) => {
     onHeadersChange(headers.map((entry, i) => (i === index ? { ...entry, ...update } : entry)));
           />
         ) : headers.length === 0 ? (
           canAddMore ? (
-            <AddHeaderRow leading={<span>{emptyLabel}</span>} onClick={() => setPicking(true)} />
+            <AddHeaderRow
+              leading={<span>{emptyLabel}</span>}
+              onClick={addFirstPreset}
+              ariaLabel={addAriaLabel}
+            />
           ) : (
             <CardStackEmpty>
               <span>{emptyLabel}</span>
                 prefix={header.prefix}
                 presetKey={header.presetKey}
                 secretId={header.secretId}
+                secretScope={header.secretScope}
                 onChange={(update) => updateHeader(index, update)}
-                onSelectSecret={(secretId) => updateHeader(index, { secretId })}
+                onSelectSecret={(secretId, scopeId) =>
+                  updateHeader(index, {
+                    secretId,
+                    ...(scopeId ? { secretScope: scopeId } : {}),
+                  })
+                }
                 onRemove={singleHeader ? undefined : () => removeHeader(index)}
                 existingSecrets={existingSecrets}
                 sourceName={sourceName}
-                targetScope={targetScope}
+                targetScope={header.targetScope ?? targetScope}
+                credentialScopeOptions={credentialScopeOptions}
+                bindingScopeOptions={bindingScopeOptions}
+                restrictSecretsToTargetScope={restrictSecretsToTargetScope}
+                copy={rowCopy}
+                previewComponent={rowPreviewComponent}
               />
             ))}
-            {canAddMore && <AddHeaderRow onClick={() => setPicking(true)} />}
+            {canAddMore && (
+              <AddHeaderRow leading={addLabel} onClick={addFirstPreset} ariaLabel={addAriaLabel} />
+            )}
           </>
         )}
       </CardStackContent>
 interface AddHeaderRowProps {
   readonly onClick: () => void;
   readonly leading?: ReactNode;
+  readonly ariaLabel: string;
 }
-function AddHeaderRow({ onClick, leading }: AddHeaderRowProps) {
+function AddHeaderRow({ onClick, leading, ariaLabel }: AddHeaderRowProps) {
   return (
     // oxlint-disable-next-line react/forbid-elements
     <button
         event.stopPropagation();
         onClick();
       }}
-      aria-label="Add header"
+      aria-label={ariaLabel}
       className="flex w-full items-center justify-between gap-4 px-4 py-3 text-sm text-muted-foreground outline-none transition-[background-color] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] hover:bg-accent/40 focus-visible:bg-accent/40"
     >
       <span className="min-w-0 flex-1 text-left">{leading}</span>

packages/react/src/plugins/http-credentials.tsx+84−166

@@ -1,18 +1,15 @@
1	import { useId } from "react";	1	import type { ScopeId, ScopedSecretCredentialInput, SecretBackedValue } from "@executor-js/sdk";
2	import { PlusIcon } from "lucide-react";
3	import type { ScopeId, SecretBackedValue } from "@executor-js/sdk";
4		2
5	import { Button } from "../components/button";	3	import { FieldLabel } from "../components/field";
6	import { CardStack, CardStackContent, CardStackEntry } from "../components/card-stack";
7	import { Field, FieldGroup, FieldLabel } from "../components/field";
8	import { Input } from "../components/input";
9	import { HeadersList } from "./headers-list";	4	import { HeadersList } from "./headers-list";
10	import {	5	import {
11	CreatableSecretPicker,
12	headerValueToState,	6	headerValueToState,
13	headersFromState,	7	headersFromState,
		8	QueryParamCredentialValuePreview,
		9	type HeaderAuthPreset,
14	type HeaderState,	10	type HeaderState,
15	} from "./secret-header-auth";	11	} from "./secret-header-auth";
		12	import type { CredentialTargetScopeOption } from "./credential-target-scope";
16	import type { SecretPickerSecret } from "./secret-picker";	13	import type { SecretPickerSecret } from "./secret-picker";
17		14
18	export type { SecretBackedValue };	15	export type { SecretBackedValue };
@@ -22,8 +19,14 @@ export type QueryParamState = { · 3 unmodified lines
22	secretId: string \| null;	19	secretId: string \| null;
23	prefix?: string;	20	prefix?: string;
24	literalValue?: string;	21	literalValue?: string;
		22	targetScope?: ScopeId;
		23	secretScope?: ScopeId;
25	};	24	};
26		25
		26	const queryParamPresets: readonly HeaderAuthPreset[] = [
		27	{ key: "custom", label: "Query parameter", name: "" },
		28	];
		29
27	export type HttpCredentialsState = {	30	export type HttpCredentialsState = {
28	headers: HeaderState[];	31	headers: HeaderState[];
29	queryParams: QueryParamState[];	32	queryParams: QueryParamState[];
@@ -84,6 +87,58 @@ export const serializeHttpCredentials = ( · 54 unmodified lines
84	queryParams: serializeQueryCredentials(credentials.queryParams),	87	queryParams: serializeQueryCredentials(credentials.queryParams),
85	});	88	});
86		89
		90	export const serializeScopedHeaderCredentials = (
		91	headers: readonly HeaderState[],
		92	fallbackTargetScope: ScopeId,
		93	): Record<string, ScopedSecretCredentialInput> => {
		94	const result: Record<string, ScopedSecretCredentialInput> = {};
		95	for (const header of headers) {
		96	const name = header.name.trim();
		97	if (!name \|\| !header.secretId) continue;
		98	const targetScope = header.targetScope ?? fallbackTargetScope;
		99	result[name] = {
		100	secretId: header.secretId,
		101	targetScope,
		102	...(header.secretScope ? { secretScopeId: header.secretScope } : {}),
		103	...(header.prefix ? { prefix: header.prefix } : {}),
		104	};
		105	}
		106	return result;
		107	};
		108
		109	export const serializeScopedQueryCredentials = (
		110	queryParams: readonly QueryParamState[],
		111	fallbackTargetScope: ScopeId,
		112	): Record<string, string \| ScopedSecretCredentialInput> => {
		113	const result: Record<string, string \| ScopedSecretCredentialInput> = {};
		114	for (const param of queryParams) {
		115	const name = param.name.trim();
		116	if (!name) continue;
		117	if (param.secretId) {
		118	const targetScope = param.targetScope ?? fallbackTargetScope;
		119	result[name] = {
		120	secretId: param.secretId,
		121	targetScope,
		122	...(param.secretScope ? { secretScopeId: param.secretScope } : {}),
		123	...(param.prefix ? { prefix: param.prefix } : {}),
		124	};
		125	continue;
		126	}
		127	if (param.literalValue?.trim()) {
		128	result[name] = param.literalValue.trim();
		129	}
		130	}
		131	return result;
		132	};
		133
		134	export const serializeScopedHttpCredentials = (
		135	credentials: HttpCredentialsState,
		136	fallbackTargetScope: ScopeId,
		137	) => ({
		138	headers: serializeScopedHeaderCredentials(credentials.headers, fallbackTargetScope),
		139	queryParams: serializeScopedQueryCredentials(credentials.queryParams, fallbackTargetScope),
		140	});
		141
87	export const httpCredentialsValid = (credentials: HttpCredentialsState): boolean =>	142	export const httpCredentialsValid = (credentials: HttpCredentialsState): boolean =>
88	credentials.headers.every((header) => header.name.trim() && header.secretId) &&	143	credentials.headers.every((header) => header.name.trim() && header.secretId) &&
89	credentials.queryParams.every((param) => {	144	credentials.queryParams.every((param) => {
@@ -97,6 +152,9 @@ export function HttpCredentialsEditor(props: { · 7 unmodified lines
97	readonly existingSecrets: readonly SecretPickerSecret[];	152	readonly existingSecrets: readonly SecretPickerSecret[];
98	readonly sourceName?: string;	153	readonly sourceName?: string;
99	readonly targetScope: ScopeId;	154	readonly targetScope: ScopeId;
		155	readonly credentialScopeOptions?: readonly CredentialTargetScopeOption[];
		156	readonly bindingScopeOptions?: readonly CredentialTargetScopeOption[];
		157	readonly restrictSecretsToTargetScope?: boolean;
100	readonly sections?: {	158	readonly sections?: {
101	readonly headers?: boolean;	159	readonly headers?: boolean;
102	readonly queryParams?: boolean;	160	readonly queryParams?: boolean;
@@ -120,6 +178,9 @@ export function HttpCredentialsEditor(props: { · 17 unmodified lines
120	existingSecrets={props.existingSecrets}	178	existingSecrets={props.existingSecrets}
121	sourceName={props.sourceName}	179	sourceName={props.sourceName}
122	targetScope={props.targetScope}	180	targetScope={props.targetScope}
		181	credentialScopeOptions={props.credentialScopeOptions}
		182	bindingScopeOptions={props.bindingScopeOptions}
		183	restrictSecretsToTargetScope={props.restrictSecretsToTargetScope}
123	/>	184	/>
124	</section>	185	</section>
125	)}	186	)}
@@ -127,170 +188,27 @@ export function HttpCredentialsEditor(props: { · 1 unmodified line
127	{showQueryParams && (	188	{showQueryParams && (
128	<section className="space-y-2.5">	189	<section className="space-y-2.5">
129	<FieldLabel>{props.labels?.queryParams ?? "Query parameters"}</FieldLabel>	190	<FieldLabel>{props.labels?.queryParams ?? "Query parameters"}</FieldLabel>
130	<QueryParamsList	191	<HeadersList
131	queryParams={props.credentials.queryParams}	192	headers={props.credentials.queryParams}
132	onQueryParamsChange={(queryParams) =>	193	onHeadersChange={(queryParams) => props.onChange({ ...props.credentials, queryParams })}
133	props.onChange({ ...props.credentials, queryParams })
134	}
135	existingSecrets={props.existingSecrets}	194	existingSecrets={props.existingSecrets}
136	sourceName={props.sourceName}	195	sourceName={props.sourceName}
137	targetScope={props.targetScope}	196	targetScope={props.targetScope}
		197	credentialScopeOptions={props.credentialScopeOptions}
		198	bindingScopeOptions={props.bindingScopeOptions}
		199	restrictSecretsToTargetScope={props.restrictSecretsToTargetScope}
		200	presets={queryParamPresets}
		201	emptyLabel="No query parameters"
		202	addLabel="Add query parameter"
		203	addAriaLabel="Add query parameter"
		204	rowCopy={{
		205	rowLabel: "Query parameter",
		206	namePlaceholder: "token",
		207	}}
		208	rowPreviewComponent={QueryParamCredentialValuePreview}
138	/>	209	/>
139	</section>	210	</section>
140	)}	211	)}
141	</div>	212	</div>
142	);	213	);
143	}	214	}
144
145	function QueryParamsList(props: {
146	readonly queryParams: readonly QueryParamState[];
147	readonly onQueryParamsChange: (queryParams: QueryParamState[]) => void;
148	readonly existingSecrets: readonly SecretPickerSecret[];
149	readonly sourceName?: string;
150	readonly targetScope: ScopeId;
151	}) {
152	const addParam = () => {
153	props.onQueryParamsChange([...props.queryParams, { name: "", secretId: null }]);
154	};
155	const updateParam = (index: number, update: Partial<QueryParamState>) => {
156	props.onQueryParamsChange(
157	props.queryParams.map((param, i) => (i === index ? { ...param, ...update } : param)),
158	);
159	};
160	const removeParam = (index: number) => {
161	props.onQueryParamsChange(props.queryParams.filter((_, i) => i !== index));
162	};
163
164	return (
165	<CardStack>
166	<CardStackContent className="[&>+]:before:inset-x-0">
167	{props.queryParams.length === 0 ? (
168	<AddQueryParamRow leading={<span>No query parameters</span>} onClick={addParam} />
169	) : (
170	<>
171	{props.queryParams.map((param, index) => (
172	<QueryParamRow
173	key={index}
174	param={param}
175	existingSecrets={props.existingSecrets}
176	sourceName={props.sourceName}
177	targetScope={props.targetScope}
178	onChange={(update) => updateParam(index, update)}
179	onRemove={() => removeParam(index)}
180	/>
181	))}
182	<AddQueryParamRow onClick={addParam} />
183	</>
184	)}
185	</CardStackContent>
186	</CardStack>
187	);
188	}
189
190	function QueryParamRow(props: {
191	readonly param: QueryParamState;
192	readonly existingSecrets: readonly SecretPickerSecret[];
193	readonly sourceName?: string;
194	readonly targetScope: ScopeId;
195	readonly onChange: (update: Partial<QueryParamState>) => void;
196	readonly onRemove: () => void;
197	}) {
198	const nameInputId = useId();
199	const prefixInputId = useId();
200	const literalInputId = useId();
201	const name = props.param.name.trim();
202	const secretLabel = name ? `${name} query parameter` : "Query parameter";
203
204	return (
205	<div className="space-y-2.5 px-4 py-3">
206	<div className="flex w-full items-center justify-between gap-4">
207	<span className="text-[10px] uppercase tracking-wider text-muted-foreground">
208	Query parameter
209	</span>
210	<Button
211	type="button"
212	variant="ghost"
213	size="xs"
214	className="text-muted-foreground hover:text-destructive"
215	onClick={props.onRemove}
216	>
217	Remove
218	</Button>
219	</div>
220
221	<FieldGroup className="grid grid-cols-2 gap-3">
222	<Field>
223	<FieldLabel htmlFor={nameInputId}>Name</FieldLabel>
224	<Input
225	id={nameInputId}
226	value={props.param.name}
227	onChange={(event) => props.onChange({ name: event.currentTarget.value })}
228	placeholder="token"
229	className="font-mono"
230	/>
231	</Field>
232	<Field>
233	<FieldLabel htmlFor={prefixInputId}>
234	Prefix <span className="font-normal text-muted-foreground/60">(optional)</span>
235	</FieldLabel>
236	<Input
237	id={prefixInputId}
238	value={props.param.prefix ?? ""}
239	onChange={(event) => props.onChange({ prefix: event.currentTarget.value \|\| undefined })}
240	placeholder="Bearer "
241	className="font-mono"
242	/>
243	</Field>
244	</FieldGroup>
245
246	<CreatableSecretPicker
247	value={props.param.secretId}
248	onSelect={(secretId) => props.onChange({ secretId, literalValue: undefined })}
249	secrets={props.existingSecrets}
250	placeholder="Select a secret"
251	sourceName={props.sourceName}
252	secretLabel={secretLabel}
253	targetScope={props.targetScope}
254	/>
255
256	{!props.param.secretId && props.param.literalValue !== undefined && (
257	<Field>
258	<FieldLabel htmlFor={literalInputId}>Literal value</FieldLabel>
259	<Input
260	id={literalInputId}
261	value={props.param.literalValue}
262	onChange={(event) => props.onChange({ literalValue: event.currentTarget.value })}
263	placeholder="value"
264	className="font-mono"
265	/>
266	</Field>
267	)}
268	</div>
269	);
270	}
271
272	function AddQueryParamRow(props: {
273	readonly onClick: () => void;
274	readonly leading?: React.ReactNode;
275	}) {
276	return (
277	<CardStackEntry
278	asChild
279	className="justify-between gap-4 px-0 py-0 text-sm text-muted-foreground"
280	>
281	<Button
282	type="button"
283	variant="ghost"
284	onClick={(event) => {
285	event.stopPropagation();
286	props.onClick();
287	}}
288	aria-label="Add query parameter"
289	className="h-auto w-full justify-between rounded-none px-4 py-3 text-left text-muted-foreground hover:bg-accent/40 focus-visible:bg-accent/40"
290	>
291	<span className="min-w-0 flex-1">{props.leading}</span>
292	<PlusIcon aria-hidden className="size-4 shrink-0" />
293	</Button>
294	</CardStackEntry>
295	);
296	}

packages/react/src/plugins/secret-form.tsx+3−2

   const doSet = useAtomSet(setSecret, { mode: "promiseExit" });
   const [state, setState] = useState<SecretFormState>(() => ({
-    name: "",
+    name: suggestedName,
     value: "",
     idOverride: null,
     provider: initialProvider,
   );
 }
-function ValueField(props: { revealable?: boolean; placeholder?: string }) {
+function ValueField(props: { revealable?: boolean; placeholder?: string; autoFocus?: boolean }) {
   const { state, actions } = useSecretForm();
   const inputId = useId();
   const revealable = props.revealable ?? false;
           value={state.value}
           onChange={(e) => actions.setValue((e.target as HTMLInputElement).value)}
           placeholder={props.placeholder ?? "ghp_xxxxxxxxxxxxxxxxxxxx"}
+          autoFocus={props.autoFocus}
           className={revealable ? "pr-9 font-mono" : "font-mono"}
           style={
             revealable && !state.revealed

packages/react/src/plugins/secret-header-auth.tsx+280−55

@@ -1,11 +1,30 @@
1	import { useId, useState } from "react";	1	import { useId, useState, type ReactNode } from "react";
2		2
3	import { type ScopeId } from "@executor-js/sdk";	3	import { ScopeId } from "@executor-js/sdk";
4	import { Button } from "../components/button";	4	import { Button } from "../components/button";
5	import { Field, FieldGroup, FieldLabel } from "../components/field";	5	import { Field, FieldGroup, FieldLabel } from "../components/field";
		6	import { HelpTooltip } from "../components/help-tooltip";
6	import { Input } from "../components/input";	7	import { Input } from "../components/input";
		8	import {
		9	Dialog,
		10	DialogContent,
		11	DialogDescription,
		12	DialogHeader,
		13	DialogTitle,
		14	} from "../components/dialog";
		15	import {
		16	Select,
		17	SelectContent,
		18	SelectItem,
		19	SelectTrigger,
		20	SelectValue,
		21	} from "../components/select";
7	import { SecretForm } from "./secret-form";	22	import { SecretForm } from "./secret-form";
8	import { SecretPicker, type SecretPickerSecret } from "./secret-picker";	23	import { SecretPicker, type SecretPickerSecret } from "./secret-picker";
		24	import {
		25	CredentialTargetScopeSelector,
		26	type CredentialTargetScopeOption,
		27	} from "./credential-target-scope";
9		28
10	export const secretsForCredentialTarget = (	29	export const secretsForCredentialTarget = (
11	secrets: readonly SecretPickerSecret[],	30	secrets: readonly SecretPickerSecret[],
@@ -21,8 +40,18 @@ export interface HeaderAuthPreset { · 9 unmodified lines
21	}	40	}
22		41
23	export const defaultHeaderAuthPresets: readonly HeaderAuthPreset[] = [	42	export const defaultHeaderAuthPresets: readonly HeaderAuthPreset[] = [
24	{ key: "bearer", label: "Bearer Token", name: "Authorization", prefix: "Bearer " },	43	{
25	{ key: "basic", label: "Basic Auth", name: "Authorization", prefix: "Basic " },	44	key: "bearer",
		45	label: "Bearer Token",
		46	name: "Authorization",
		47	prefix: "Bearer ",
		48	},
		49	{
		50	key: "basic",
		51	label: "Basic Auth",
		52	name: "Authorization",
		53	prefix: "Basic ",
		54	},
26	{ key: "api-key", label: "API Key", name: "X-API-Key" },	55	{ key: "api-key", label: "API Key", name: "X-API-Key" },
27	{ key: "auth-token", label: "Auth Token", name: "X-Auth-Token" },	56	{ key: "auth-token", label: "Auth Token", name: "X-Auth-Token" },
28	{ key: "access-token", label: "Access Token", name: "X-Access-Token" },	57	{ key: "access-token", label: "Access Token", name: "X-Access-Token" },
@@ -30,51 +59,141 @@ export const defaultHeaderAuthPresets: readonly HeaderAuthPreset[] = [ · 1 unmodified line
30	{ key: "custom", label: "Custom", name: "" },	59	{ key: "custom", label: "Custom", name: "" },
31	];	60	];
32		61
33	export function InlineCreateSecret(props: {	62	function CreateSecretContent(props: {
34	suggestedName: string;	63	suggestedName: string;
35	existingSecretIds: readonly string[];	64	existingSecretIds: readonly string[];
36	onCreated: (secretId: string) => void;	65	onCreated: (secretId: string, scopeId: ScopeId) => void;
37	onCancel: () => void;	66	onCancel?: () => void;
38	fallbackId?: string;	67	fallbackId?: string;
39	targetScope: ScopeId;	68	targetScope: ScopeId;
		69	credentialScopeOptions?: readonly CredentialTargetScopeOption[];
40	}) {	70	}) {
		71	const [scopeId, setScopeId] = useState(props.targetScope);
		72	const activeScope = props.credentialScopeOptions?.find((option) => option.scopeId === scopeId);
		73
41	return (	74	return (
42	<SecretForm.Provider	75	<SecretForm.Provider
43	existingSecretIds={props.existingSecretIds}	76	existingSecretIds={props.existingSecretIds}
44	suggestedName={props.suggestedName}	77	suggestedName={props.suggestedName}
45	fallbackId={props.fallbackId ?? "custom-header"}	78	fallbackId={props.fallbackId ?? "custom-header"}
46	scopeId={props.targetScope}	79	scopeId={scopeId}
47	onCreated={props.onCreated}	80	onCreated={(secretId) => props.onCreated(secretId, scopeId)}
48	>	81	>
49	<div className="bg-primary/[0.03] px-4 py-3 space-y-3">	82	<div className="space-y-3">
50	<p className="text-[11px] font-semibold text-primary tracking-wide uppercase">New secret</p>	83	{props.credentialScopeOptions && props.credentialScopeOptions.length > 1 && (
		84	<CredentialTargetScopeSelector
		85	value={scopeId}
		86	options={props.credentialScopeOptions}
		87	onChange={setScopeId}
		88	title="Save secret to"
		89	description={activeScope?.description ?? "Choose where this secret is saved."}
		90	/>
		91	)}
51	<FieldGroup className="gap-3">	92	<FieldGroup className="gap-3">
52	<div className="grid grid-cols-2 gap-3">	93	<div className="grid grid-cols-2 gap-3">
53	<SecretForm.NameField label="Label" placeholder="API Token" />	94	<SecretForm.NameField label="Label" placeholder="API Token" />
54	<SecretForm.IdField placeholder="my-api-token" />	95	<SecretForm.IdField placeholder="my-api-token" />
55	</div>	96	</div>
56	<SecretForm.ValueField revealable placeholder="paste your token or key…" />	97	<SecretForm.ValueField revealable autoFocus placeholder="paste your token or key…" />
57	</FieldGroup>	98	</FieldGroup>
58	<div className="flex justify-end gap-1.5 pt-0.5">	99	<div className="flex justify-end gap-2 pt-0.5">
59	<Button variant="outline" size="xs" onClick={props.onCancel}>	100	{props.onCancel && (
60	Cancel	101	<Button type="button" variant="outline" size="sm" onClick={props.onCancel}>
61	</Button>	102	Cancel
62	<SecretForm.SubmitButton size="xs">Create and use</SecretForm.SubmitButton>	103	</Button>
		104	)}
		105	<SecretForm.SubmitButton size="sm">Create and use</SecretForm.SubmitButton>
63	</div>	106	</div>
64	</div>	107	</div>
65	</SecretForm.Provider>	108	</SecretForm.Provider>
66	);	109	);
67	}	110	}
68		111
69	function HeaderValuePreview(props: { headerName: string; secretId: string; prefix?: string }) {	112	export function InlineCreateSecret(props: {
70	const { headerName, prefix } = props;	113	suggestedName: string;
		114	existingSecretIds: readonly string[];
		115	onCreated: (secretId: string, scopeId: ScopeId) => void;
		116	onCancel: () => void;
		117	fallbackId?: string;
		118	targetScope: ScopeId;
		119	credentialScopeOptions?: readonly CredentialTargetScopeOption[];
		120	}) {
		121	return (
		122	<div className="bg-primary/[0.03] px-4 py-3">
		123	<p className="mb-3 text-[11px] font-semibold tracking-wide text-primary uppercase">
		124	New secret
		125	</p>
		126	<CreateSecretContent {...props} />
		127	</div>
		128	);
		129	}
		130
		131	function CreateSecretDialog(props: {
		132	readonly open: boolean;
		133	readonly onOpenChange: (open: boolean) => void;
		134	readonly suggestedName: string;
		135	readonly existingSecretIds: readonly string[];
		136	readonly onCreated: (secretId: string, scopeId: ScopeId) => void;
		137	readonly fallbackId?: string;
		138	readonly targetScope: ScopeId;
		139	readonly credentialScopeOptions?: readonly CredentialTargetScopeOption[];
		140	}) {
		141	return (
		142	<Dialog open={props.open} onOpenChange={props.onOpenChange}>
		143	<DialogContent>
		144	<DialogHeader>
		145	<DialogTitle>New secret</DialogTitle>
		146	<DialogDescription>
		147	Create a reusable secret, then use it for this credential.
		148	</DialogDescription>
		149	</DialogHeader>
		150	<CreateSecretContent
		151	suggestedName={props.suggestedName}
		152	existingSecretIds={props.existingSecretIds}
		153	fallbackId={props.fallbackId}
		154	onCreated={props.onCreated}
		155	onCancel={() => props.onOpenChange(false)}
		156	targetScope={props.targetScope}
		157	credentialScopeOptions={props.credentialScopeOptions}
		158	/>
		159	</DialogContent>
		160	</Dialog>
		161	);
		162	}
		163
		164	export type SecretCredentialPreviewProps = {
		165	readonly name: string;
		166	readonly secretId: string;
		167	readonly prefix?: string;
		168	};
		169
		170	export type SecretCredentialPreviewComponent = (props: SecretCredentialPreviewProps) => ReactNode;
		171
		172	export function HeaderCredentialValuePreview(props: SecretCredentialPreviewProps) {
		173	const { name, prefix } = props;
		174	const maskedValue = "•".repeat(12);
71		175
72	return (	176	return (
73	<div className="flex items-center gap-1.5 rounded-md border border-border bg-muted/30 px-2.5 py-1.5 font-mono text-xs">	177	<div className="flex items-center gap-1.5 rounded-md border border-border bg-muted/30 px-2.5 py-1.5 font-mono text-xs">
74	<span className="text-muted-foreground shrink-0">{headerName}:</span>	178	<span className="text-muted-foreground shrink-0">{name}:</span>
75	<span className="text-foreground truncate">	179	<span className="text-foreground truncate">
76	{prefix && <span className="text-muted-foreground">{prefix}</span>}	180	{prefix && <span className="text-muted-foreground">{prefix}</span>}
77	{"•".repeat(12)}	181	{maskedValue}
		182	</span>
		183	</div>
		184	);
		185	}
		186
		187	export function QueryParamCredentialValuePreview(props: SecretCredentialPreviewProps) {
		188	const { name, prefix } = props;
		189	const maskedValue = "•".repeat(12);
		190
		191	return (
		192	<div className="rounded-md border border-border bg-muted/30 px-2.5 py-1.5 font-mono text-xs">
		193	<span className="text-muted-foreground">?{name}=</span>
		194	<span className="text-foreground">
		195	{prefix && <span className="text-muted-foreground">{prefix}</span>}
		196	{maskedValue}
78	</span>	197	</span>
79	</div>	198	</div>
80	);	199	);
@@ -90,6 +209,10 @@ export type HeaderState = { · 9 unmodified lines
90	prefix?: string;	209	prefix?: string;
91	presetKey?: string;	210	presetKey?: string;
92	fromPreset?: boolean;	211	fromPreset?: boolean;
		212	/** Scope where this source credential value is used. */
		213	targetScope?: ScopeId;
		214	/** Scope that owns the selected reusable secret. */
		215	secretScope?: ScopeId;
93	};	216	};
94		217
95	export function matchPresetKey(name: string, prefix?: string): string {	218	export function matchPresetKey(name: string, prefix?: string): string {
@@ -99,6 +222,39 @@ export function matchPresetKey(name: string, prefix?: string): string { · 3 unmodified lines
99	return preset?.key ?? "custom";	222	return preset?.key ?? "custom";
100	}	223	}
101		224
		225	function InfoLabel(props: { readonly children: string; readonly tooltip: string }) {
		226	return (
		227	<div className="flex items-center gap-1.5">
		228	<FieldLabel>{props.children}</FieldLabel>
		229	<HelpTooltip label={props.children}>{props.tooltip}</HelpTooltip>
		230	</div>
		231	);
		232	}
		233
		234	export type SecretCredentialRowCopy = {
		235	readonly rowLabel: string;
		236	readonly nameLabel: string;
		237	readonly namePlaceholder: string;
		238	readonly prefixLabel: string;
		239	readonly prefixPlaceholder: string;
		240	readonly secretLabel: string;
		241	readonly secretHelp: string;
		242	readonly usedByLabel: string;
		243	readonly usedByHelp: string;
		244	};
		245
		246	const defaultSecretCredentialRowCopy: SecretCredentialRowCopy = {
		247	rowLabel: "Header",
		248	nameLabel: "Name",
		249	namePlaceholder: "Authorization",
		250	prefixLabel: "Prefix",
		251	prefixPlaceholder: "Bearer ",
		252	secretLabel: "Secret",
		253	secretHelp: "Select or create a reusable secret.",
		254	usedByLabel: "Used by",
		255	usedByHelp: "Choose who uses this credential value.",
		256	};
		257
102	export function headerValueToState(	258	export function headerValueToState(
103	name: string,	259	name: string,
104	value: { secretId: string; prefix?: string } \| string,	260	value: { secretId: string; prefix?: string } \| string,
@@ -138,12 +294,21 @@ export function SecretHeaderAuthRow(props: { · 33 unmodified lines
138	prefix?: string;	294	prefix?: string;
139	presetKey?: string;	295	presetKey?: string;
140	secretId: string \| null;	296	secretId: string \| null;
141	onChange: (update: { name: string; prefix?: string; presetKey?: string }) => void;	297	secretScope?: ScopeId;
142	onSelectSecret: (secretId: string) => void;	298	onChange: (update: {
		299	name: string;
		300	secretId?: string \| null;
		301	prefix?: string;
		302	presetKey?: string;
		303	targetScope?: ScopeId;
		304	secretScope?: ScopeId;
		305	}) => void;
		306	onSelectSecret: (secretId: string, scopeId?: ScopeId) => void;
143	existingSecrets: readonly SecretPickerSecret[];	307	existingSecrets: readonly SecretPickerSecret[];
144	onRemove?: () => void;	308	onRemove?: () => void;
145	removeLabel?: string;	309	removeLabel?: string;
146	label?: string;	310	copy?: Partial<SecretCredentialRowCopy>;
		311	previewComponent?: SecretCredentialPreviewComponent;
147	/**	312	/**
148	* Display name of the source this header belongs to (e.g. "Axiom"). Used	313	* Display name of the source this header belongs to (e.g. "Axiom"). Used
149	* to prefix the suggested secret label and ID so tokens from different	314	* to prefix the suggested secret label and ID so tokens from different
@@ -151,6 +316,9 @@ export function SecretHeaderAuthRow(props: { · 1 unmodified line
151	*/	316	*/
152	sourceName?: string;	317	sourceName?: string;
153	targetScope: ScopeId;	318	targetScope: ScopeId;
		319	credentialScopeOptions?: readonly CredentialTargetScopeOption[];
		320	bindingScopeOptions?: readonly CredentialTargetScopeOption[];
		321	restrictSecretsToTargetScope?: boolean;
154	}) {	322	}) {
155	const [creating, setCreating] = useState(false);	323	const [creating, setCreating] = useState(false);
156	const nameInputId = useId();	324	const nameInputId = useId();
@@ -160,42 +328,49 @@ export function SecretHeaderAuthRow(props: { · 3 unmodified lines
160	prefix,	328	prefix,
161	presetKey,	329	presetKey,
162	secretId,	330	secretId,
		331	secretScope,
163	onChange,	332	onChange,
164	onSelectSecret,	333	onSelectSecret,
165	existingSecrets,	334	existingSecrets,
166	onRemove,	335	onRemove,
167	removeLabel = "Remove",	336	removeLabel = "Remove",
168	label = "Header",	337	copy: copyOverride,
		338	previewComponent: PreviewComponent = HeaderCredentialValuePreview,
169	sourceName,	339	sourceName,
170	targetScope,	340	targetScope,
		341	credentialScopeOptions,
		342	bindingScopeOptions,
		343	restrictSecretsToTargetScope = false,
171	} = props;	344	} = props;
172		345
173	const isCustom = presetKey === "custom" \|\| presetKey === undefined;	346	const isCustom = presetKey === "custom" \|\| presetKey === undefined;
		347	const copy = { ...defaultSecretCredentialRowCopy, ...copyOverride };
174	const headerLabel = name.trim() \|\| "Custom Header";	348	const headerLabel = name.trim() \|\| "Custom Header";
175	const suggestedName = [sourceName?.trim(), headerLabel].filter(Boolean).join(" ");	349	const suggestedName = [sourceName?.trim(), headerLabel].filter(Boolean).join(" ");
176	const scopedSecrets = secretsForCredentialTarget(existingSecrets, targetScope);	350	const scopedSecrets = secretsForCredentialTarget(existingSecrets, targetScope);
		351	const selectableSecrets = restrictSecretsToTargetScope ? scopedSecrets : existingSecrets;
177		352
178	if (creating) {	353	return (
179	return (	354	<div className="space-y-2.5 px-4 py-3">
180	<InlineCreateSecret	355	<CreateSecretDialog
		356	open={creating}
		357	onOpenChange={setCreating}
181	suggestedName={suggestedName}	358	suggestedName={suggestedName}
182	existingSecretIds={scopedSecrets.map((secret) => secret.id)}	359	existingSecretIds={scopedSecrets.map((secret) => secret.id)}
183	onCreated={(id) => {	360	onCreated={(id, scopeId) => {
184	onSelectSecret(id);	361	onSelectSecret(id, scopeId);
185	setCreating(false);	362	setCreating(false);
186	}}	363	}}
187	onCancel={() => setCreating(false)}
188	targetScope={targetScope}	364	targetScope={targetScope}
		365	credentialScopeOptions={credentialScopeOptions}
189	/>	366	/>
190	);
191	}
192
193	return (
194	<div className="space-y-2.5 px-4 py-3">
195	<div className="flex w-full items-center justify-between gap-4">	367	<div className="flex w-full items-center justify-between gap-4">
196	<span className="text-[10px] uppercase tracking-wider text-muted-foreground">{label}</span>	368	<span className="text-[10px] uppercase tracking-wider text-muted-foreground">
		369	{copy.rowLabel}
		370	</span>
197	{onRemove && (	371	{onRemove && (
198	<Button	372	<Button
		373	type="button"
199	variant="ghost"	374	variant="ghost"
200	size="xs"	375	size="xs"
201	className="text-muted-foreground hover:text-destructive"	376	className="text-muted-foreground hover:text-destructive"
@@ -208,7 +383,7 @@ export function SecretHeaderAuthRow(props: { · 6 unmodified lines
208		383
209	<FieldGroup className="grid grid-cols-2 gap-3">	384	<FieldGroup className="grid grid-cols-2 gap-3">
210	<Field>	385	<Field>
211	<FieldLabel htmlFor={nameInputId}>Name</FieldLabel>	386	<FieldLabel htmlFor={nameInputId}>{copy.nameLabel}</FieldLabel>
212	<Input	387	<Input
213	id={nameInputId}	388	id={nameInputId}
214	value={name}	389	value={name}
@@ -219,13 +394,14 @@ export function SecretHeaderAuthRow(props: { · 4 unmodified lines
219	presetKey: isCustom ? "custom" : presetKey,	394	presetKey: isCustom ? "custom" : presetKey,
220	})	395	})
221	}	396	}
222	placeholder="Authorization"	397	placeholder={copy.namePlaceholder}
223	className="font-mono"	398	className="font-mono"
224	/>	399	/>
225	</Field>	400	</Field>
226	<Field>	401	<Field>
227	<FieldLabel htmlFor={prefixInputId}>	402	<FieldLabel htmlFor={prefixInputId}>
228	Prefix <span className="font-normal text-muted-foreground/60">(optional)</span>	403	{copy.prefixLabel}{" "}
		404	<span className="font-normal text-muted-foreground/60">(optional)</span>
229	</FieldLabel>	405	</FieldLabel>
230	<Input	406	<Input
231	id={prefixInputId}	407	id={prefixInputId}
@@ -237,21 +413,62 @@ export function SecretHeaderAuthRow(props: { · 5 unmodified lines
237	presetKey: isCustom ? "custom" : presetKey,	413	presetKey: isCustom ? "custom" : presetKey,
238	})	414	})
239	}	415	}
240	placeholder="Bearer "	416	placeholder={copy.prefixPlaceholder}
241	className="font-mono"	417	className="font-mono"
242	/>	418	/>
243	</Field>	419	</Field>
244	</FieldGroup>	420	</FieldGroup>
245		421
246	<SecretPicker	422	<div
247	value={secretId}	423	className={
248	onSelect={onSelectSecret}	424	bindingScopeOptions && bindingScopeOptions.length > 1
249	secrets={scopedSecrets}	425	? "grid gap-2 md:grid-cols-2"
250	onCreateNew={() => setCreating(true)}	426	: undefined
251	/>	427	}
		428	>
		429	<div className="space-y-1.5">
		430	<InfoLabel tooltip={copy.secretHelp}>{copy.secretLabel}</InfoLabel>
		431	<SecretPicker
		432	value={secretId}
		433	valueScopeId={secretScope ? String(secretScope) : undefined}
		434	onSelect={(id, scopeId) => onSelectSecret(id, ScopeId.make(scopeId))}
		435	secrets={selectableSecrets}
		436	onCreateNew={() => setCreating(true)}
		437	/>
		438	</div>
		439	{bindingScopeOptions && bindingScopeOptions.length > 1 && (
		440	<div className="space-y-1.5">
		441	<InfoLabel tooltip={copy.usedByHelp}>{copy.usedByLabel}</InfoLabel>
		442	<Select
		443	value={String(targetScope)}
		444	onValueChange={(nextScope) =>
		445	onChange({
		446	name,
		447	secretId: null,
		448	secretScope: undefined,
		449	prefix,
		450	presetKey,
		451	targetScope: ScopeId.make(nextScope),
		452	})
		453	}
		454	>
		455	<SelectTrigger className="w-full">
		456	<SelectValue placeholder="Used by" />
		457	</SelectTrigger>
		458	<SelectContent>
		459	{bindingScopeOptions.map((option) => (
		460	<SelectItem key={option.scopeId} value={option.scopeId}>
		461	{option.label}
		462	</SelectItem>
		463	))}
		464	</SelectContent>
		465	</Select>
		466	</div>
		467	)}
		468	</div>
252		469
253	{secretId && name.trim() && (	470	{secretId && name.trim() && (
254	<HeaderValuePreview headerName={name.trim()} secretId={secretId} prefix={prefix} />	471	<PreviewComponent name={name.trim()} secretId={secretId} prefix={prefix} />
255	)}	472	)}
256	</div>	473	</div>
257	);	474	);
@@ -263,10 +480,12 @@ export function SecretHeaderAuthRow(props: { · 5 unmodified lines
263		480
264	export function CreatableSecretPicker(props: {	481	export function CreatableSecretPicker(props: {
265	readonly value: string \| null;	482	readonly value: string \| null;
266	readonly onSelect: (secretId: string) => void;	483	readonly onSelect: (secretId: string, scopeId?: ScopeId) => void;
267	readonly secrets: readonly SecretPickerSecret[];	484	readonly secrets: readonly SecretPickerSecret[];
268	readonly placeholder?: string;	485	readonly placeholder?: string;
269	readonly targetScope: ScopeId;	486	readonly targetScope: ScopeId;
		487	readonly credentialScopeOptions?: readonly CredentialTargetScopeOption[];
		488	readonly onCreatedScope?: (scopeId: ScopeId) => void;
270	readonly suggestedId?: string;	489	readonly suggestedId?: string;
271	/**	490	/**
272	* Display name of the source the secret belongs to (e.g. "Stripe").	491	* Display name of the source the secret belongs to (e.g. "Stripe").
@@ -284,6 +503,8 @@ export function CreatableSecretPicker(props: { · 11 unmodified lines
284	sourceName,	503	sourceName,
285	secretLabel,	504	secretLabel,
286	targetScope,	505	targetScope,
		506	credentialScopeOptions,
		507	onCreatedScope,
287	suggestedId: suggestedIdProp,	508	suggestedId: suggestedIdProp,
288	} = props;	509	} = props;
289	const [creating, setCreating] = useState(false);	510	const [creating, setCreating] = useState(false);
@@ -293,16 +514,19 @@ export function CreatableSecretPicker(props: { · 3 unmodified lines
293		514
294	if (creating) {	515	if (creating) {
295	return (	516	return (
296	<InlineCreateSecret	517	<CreateSecretDialog
		518	open={creating}
		519	onOpenChange={setCreating}
297	suggestedName={suggestedName}	520	suggestedName={suggestedName}
298	existingSecretIds={scopedSecrets.map((secret) => secret.id)}	521	existingSecretIds={scopedSecrets.map((secret) => secret.id)}
299	fallbackId={suggestedIdProp?.trim() \|\| "secret"}	522	fallbackId={suggestedIdProp?.trim() \|\| "secret"}
300	onCreated={(id) => {	523	onCreated={(id, scopeId) => {
301	onSelect(id);	524	onCreatedScope?.(scopeId);
		525	onSelect(id, scopeId);
302	setCreating(false);	526	setCreating(false);
303	}}	527	}}
304	onCancel={() => setCreating(false)}
305	targetScope={targetScope}	528	targetScope={targetScope}
		529	credentialScopeOptions={credentialScopeOptions}
306	/>	530	/>
307	);	531	);
308	}	532	}
@@ -310,8 +534,9 @@ export function CreatableSecretPicker(props: { · 1 unmodified line
310	return (	534	return (
311	<SecretPicker	535	<SecretPicker
312	value={value}	536	value={value}
313	onSelect={onSelect}	537	valueScopeId={String(targetScope)}
314	secrets={scopedSecrets}	538	onSelect={(id, scopeId) => onSelect(id, ScopeId.make(scopeId))}
		539	secrets={secrets}
315	placeholder={placeholder}	540	placeholder={placeholder}
316	onCreateNew={() => setCreating(true)}	541	onCreateNew={() => setCreating(true)}
317	/>	542	/>

packages/react/src/plugins/secret-picker.tsx+33−7

 import { PlusIcon } from "lucide-react";
 import { Input } from "../components/input";
+import { Badge } from "../components/badge";
 import {
   Command,
   CommandEmpty,
   CommandSeparator,
 } from "../components/command";
 import { Popover, PopoverAnchor, PopoverContent } from "../components/popover";
+import { useScopeStack } from "../api/scope-context";
 export interface SecretPickerSecret {
   readonly id: string;
 export function SecretPicker(props: {
   readonly value: string | null;
-  readonly onSelect: (secretId: string) => void;
+  readonly valueScopeId?: string;
+  readonly onSelect: (secretId: string, scopeId: string) => void;
   readonly secrets: readonly SecretPickerSecret[];
   readonly placeholder?: string;
   /** When provided, renders a "+ New secret" row at the top of the dropdown. */
   readonly onCreateNew?: () => void;
 }) {
-  const { value, onSelect, secrets, placeholder = "Search secrets…", onCreateNew } = props;
+  const {
+    value,
+    valueScopeId,
+    onSelect,
+    secrets,
+    placeholder = "Search secrets…",
+    onCreateNew,
+  } = props;
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState("");
+  const scopeStack = useScopeStack();
+  const scopeLabel = (scopeId: string): string => {
+    const index = scopeStack.findIndex((entry) => String(entry.id) === scopeId);
+    if (index === 0) return "Personal";
+    if (index > 0) return scopeStack[index]?.name || "Organization";
+    return "Scoped";
+  };
-  const selected = secrets.find((secret) => secret.id === value) ?? null;
+  const selected =
+    secrets.find(
+      (secret) =>
+        secret.id === value && (valueScopeId === undefined || secret.scopeId === valueScopeId),
+    ) ??
+    secrets.find((secret) => secret.id === value) ??
+    null;
   const grouped = new Map<string, SecretPickerSecret[]>();
   for (const secret of secrets) {
                   <CommandGroup key={label} heading={showGroupHeadings ? label : undefined}>
                     {filtered.map((secret) => (
                       <CommandItem
-                        key={secret.id}
+                        key={`${secret.scopeId}:${secret.id}`}
-                        value={`${secret.name} ${secret.id}`}
+                        value={`${secret.name} ${secret.id} ${secret.scopeId}`}
                         onSelect={() => {
-                          onSelect(secret.id);
+                          onSelect(secret.id, secret.scopeId);
                           setOpen(false);
                           setQuery("");
                         }}
                       >
-                        <span className="truncate">{secret.name}</span>
+                        <span className="min-w-0 flex-1 truncate">{secret.name}</span>
+                        <Badge variant="outline" className="ml-2 shrink-0 text-[10px]">
+                          {scopeLabel(secret.scopeId)}
+                        </Badge>
                       </CommandItem>
                     ))}
                   </CommandGroup>

packages/react/src/plugins/source-identity.test.ts+24−0

@@ -0,0 +1,24 @@
	1	import { describe, expect, it } from "@effect/vitest";
	2
	3	import {
	4	domainLabelFromUrl,
	5	pascalCaseDomainLabel,
	6	sourceDisplayNameFromUrl,
	7	} from "./source-identity";
	8
	9	describe("source identity URL display names", () => {
	10	it("uses the apex domain label without the public suffix", () => {
	11	expect(domainLabelFromUrl("https://api.example.co.uk/graphql")).toBe("example");
	12	});
	13
	14	it("normalizes domain labels to PascalCase", () => {
	15	expect(pascalCaseDomainLabel("my-api")).toBe("MyApi");
	16	});
	17
	18	it("appends the source kind to the PascalCase domain label", () => {
	19	expect(sourceDisplayNameFromUrl("https://mcp.linear.app/sse", "MCP")).toBe("Linear MCP");
	20	expect(sourceDisplayNameFromUrl("https://api.shopify.com/graphql", "GraphQL")).toBe(
	21	"Shopify GraphQL",
	22	);
	23	});
	24	});

packages/react/src/plugins/source-identity.tsx+26−0

@@ -20,6 +20,32 @@ export function displayNameFromUrl(url: string): string \| null { · 19 unmodified lines
20	return label.charAt(0).toUpperCase() + label.slice(1);	20	return label.charAt(0).toUpperCase() + label.slice(1);
21	}	21	}
22		22
		23	export function domainLabelFromUrl(url: string): string \| null {
		24	const trimmed = url.trim();
		25	if (!trimmed) return null;
		26	return parse(trimmed).domainWithoutSuffix ?? null;
		27	}
		28
		29	export function pascalCaseDomainLabel(label: string): string \| null {
		30	const words = label
		31	.split(/[^a-z0-9]+/i)
		32	.map((word) => word.trim())
		33	.filter(Boolean);
		34	if (words.length === 0) return null;
		35	return words
		36	.map((word) => {
		37	const normalized = word.toLowerCase();
		38	return normalized.charAt(0).toUpperCase() + normalized.slice(1);
		39	})
		40	.join("");
		41	}
		42
		43	export function sourceDisplayNameFromUrl(url: string, sourceKind: string): string \| null {
		44	const label = domainLabelFromUrl(url);
		45	const displayLabel = label ? pascalCaseDomainLabel(label) : null;
		46	return displayLabel ? `${displayLabel} ${sourceKind}` : null;
		47	}
		48
23	// ---------------------------------------------------------------------------	49	// ---------------------------------------------------------------------------
24	// Hook — owns the name + namespace state with namespace auto-derivation	50	// Hook — owns the name + namespace state with namespace auto-derivation
25	// ---------------------------------------------------------------------------	51	// ---------------------------------------------------------------------------