From 236dc24e04a9edabcd4ec9bedb0e297b45e12237 Mon Sep 17 00:00:00 2001
From: Dion Low <dion@withampersand.com>
Date: Tue, 23 Jun 2026 11:02:56 -0700
Subject: [PATCH 1/3] fix(ApiKeyAuth): add persistent label to API key field

Customer feedback noted it was unclear that the API key input is for an
API key, since the field only had a placeholder that disappears on focus
or typing.

Render the API key field with the same DocsHelperTextHeader UI used by the
metadata inputs in the same form: a persistent "{Provider} API Key" header
with the docs link folded into a "Help" expander. Covers both the initial
setup and update-connection flows via the shared ApiKeyAuthForm.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../auth/ApiKeyAuth/ApiKeyAuthContent.tsx     | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/components/auth/ApiKeyAuth/ApiKeyAuthContent.tsx b/src/components/auth/ApiKeyAuth/ApiKeyAuthContent.tsx
index 90aea973..7f61b445 100644
--- a/src/components/auth/ApiKeyAuth/ApiKeyAuthContent.tsx
+++ b/src/components/auth/ApiKeyAuth/ApiKeyAuthContent.tsx
@@ -11,7 +11,7 @@ import {
 import { capitalize } from "src/utils";
 
 import { MetadataInput } from "components/auth/MetadataInput";
-import { DocsHelperText } from "components/Docs/DocsHelperText";
+import { DocsHelperTextHeader } from "components/Docs/DocsHelperTextMinimal";
 
 import {
   getProviderMetadata,
@@ -80,19 +80,18 @@ export function ApiKeyAuthForm({
         marginTop: "1rem",
       }}
     >
-      {docsURL && (
-        <DocsHelperText
+      <div style={{ display: "flex", flexDirection: "column", gap: "0.25rem" }}>
+        <DocsHelperTextHeader
           url={docsURL}
-          providerDisplayName={providerName || capitalize(provider)}
-          credentialName="API key"
+          inputName={`${providerName || capitalize(provider)} API Key`}
         />
-      )}
-      <FormComponent.PasswordInput
-        id="apiKey"
-        name="apiKey"
-        placeholder="API Key"
-        onChange={handleChange}
-      />
+        <FormComponent.PasswordInput
+          id="apiKey"
+          name="apiKey"
+          placeholder="API Key"
+          onChange={handleChange}
+        />
+      </div>
       {metadataInputs.map((metadata: MetadataItemInput) => (
         <MetadataInput
           key={metadata.name}

From a1ef607da71d1b063c090ad8cfc749a4149533e4 Mon Sep 17 00:00:00 2001
From: Dion Low <dion@withampersand.com>
Date: Tue, 23 Jun 2026 11:37:49 -0700
Subject: [PATCH 2/3] feat(ApiKeyAuth): add lead-in text to API key Help
 section
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The docs link previously rendered as a bare "Learn more →" inside the
Help expander, which was vague. Pass a prompt to DocsHelperTextHeader so
the expanded Help reads "Where to find your {Provider} API key: Learn
more →". Gated on docsURL so providers without docs show no expander.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/auth/ApiKeyAuth/ApiKeyAuthContent.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/auth/ApiKeyAuth/ApiKeyAuthContent.tsx b/src/components/auth/ApiKeyAuth/ApiKeyAuthContent.tsx
index 7f61b445..36fe01d9 100644
--- a/src/components/auth/ApiKeyAuth/ApiKeyAuthContent.tsx
+++ b/src/components/auth/ApiKeyAuth/ApiKeyAuthContent.tsx
@@ -61,6 +61,7 @@ export function ApiKeyAuthForm({
   const isSubmitDisabled =
     isButtonDisabled || !isApiKeyValid || !isMetadataValid;
   const docsURL = providerInfo.apiKeyOpts?.docsURL;
+  const providerDisplayName = providerName || capitalize(provider);
 
   const onHandleSubmit = () => {
     const metadata = getProviderMetadata(metadataInputs, formData);
@@ -83,7 +84,12 @@ export function ApiKeyAuthForm({
       <div style={{ display: "flex", flexDirection: "column", gap: "0.25rem" }}>
         <DocsHelperTextHeader
           url={docsURL}
-          inputName={`${providerName || capitalize(provider)} API Key`}
+          inputName={`${providerDisplayName} API Key`}
+          prompt={
+            docsURL
+              ? `Where to find your ${providerDisplayName} API key:`
+              : undefined
+          }
         />
         <FormComponent.PasswordInput
           id="apiKey"

From e5bccd753de8a7ad1979a802bbcf66d76b155905 Mon Sep 17 00:00:00 2001
From: Dion Low <dion@withampersand.com>
Date: Tue, 23 Jun 2026 12:08:34 -0700
Subject: [PATCH 3/3] feat(ApiKeyAuth): clearer placeholder and lowercase docs
 link
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- API key field placeholder now reads "Paste your API key here" instead
  of the terse "API Key".
- Lowercase the "learn more →" docs link in DocsHelperTextHeader so it
  reads naturally inline (applies to API key and metadata field help).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/Docs/DocsHelperTextMinimal.tsx        | 4 ++--
 src/components/auth/ApiKeyAuth/ApiKeyAuthContent.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Docs/DocsHelperTextMinimal.tsx b/src/components/Docs/DocsHelperTextMinimal.tsx
index 739d2538..ebf39e1c 100644
--- a/src/components/Docs/DocsHelperTextMinimal.tsx
+++ b/src/components/Docs/DocsHelperTextMinimal.tsx
@@ -55,7 +55,7 @@ export function DocsHelperTextHeader({
               trailing={
                 url && (
                   <AccessibleLink href={url} newTab>
-                    Learn more →
+                    learn more →
                   </AccessibleLink>
                 )
               }
@@ -67,7 +67,7 @@ export function DocsHelperTextHeader({
                 newTab
                 className={styles.learnMoreLink}
               >
-                Learn more →
+                learn more →
               </AccessibleLink>
             )
           )}
diff --git a/src/components/auth/ApiKeyAuth/ApiKeyAuthContent.tsx b/src/components/auth/ApiKeyAuth/ApiKeyAuthContent.tsx
index 36fe01d9..7f6df631 100644
--- a/src/components/auth/ApiKeyAuth/ApiKeyAuthContent.tsx
+++ b/src/components/auth/ApiKeyAuth/ApiKeyAuthContent.tsx
@@ -94,7 +94,7 @@ export function ApiKeyAuthForm({
         <FormComponent.PasswordInput
           id="apiKey"
           name="apiKey"
-          placeholder="API Key"
+          placeholder="Paste your API key here"
           onChange={handleChange}
         />
       </div>