From 81813dc6255e41a7447abc721d88642016deca81 Mon Sep 17 00:00:00 2001
From: Michael Borohovski <borski@kobofoundry.com>
Date: Wed, 4 Mar 2026 16:37:00 -0800
Subject: [PATCH] Fix token UI success handling, fetch error surfacing, and
 docs key stability

---
 src/app/admin/settings/tabs/ApiTab/ApiTab.tsx | 16 +++++++------
 src/app/api-docs/page.tsx                     |  2 +-
 src/components/profile/ApiTokensSection.tsx   |  2 ++
 src/lib/hooks/useApiTokens.ts                 | 24 +++++++++++++++----
 4 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/src/app/admin/settings/tabs/ApiTab/ApiTab.tsx b/src/app/admin/settings/tabs/ApiTab/ApiTab.tsx
index f57bfb0..30508d8 100644
--- a/src/app/admin/settings/tabs/ApiTab/ApiTab.tsx
+++ b/src/app/admin/settings/tabs/ApiTab/ApiTab.tsx
@@ -47,9 +47,9 @@ export function ApiTab() {
     const extraBody: Record<string, string> = {};
     if (newTokenUserId) extraBody.userId = newTokenUserId;
     if (newTokenRole) extraBody.role = newTokenRole;
-    await api.handleCreate(extraBody);
-    // Reset admin-specific fields on success
-    if (!api.error) {
+    const created = await api.handleCreate(extraBody);
+    // Reset admin-specific fields only when create succeeds
+    if (created) {
       setNewTokenUserId('');
       setNewTokenRole('');
     }
@@ -123,10 +123,12 @@ export function ApiTab() {
                 </button>
               </div>
             </div>
-            <button
-              onClick={api.dismissCreatedToken}
-              className="flex-shrink-0 text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200"
-            >
+                <button
+                  type="button"
+                  aria-label="Dismiss token banner"
+                  onClick={api.dismissCreatedToken}
+                  className="flex-shrink-0 text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200"
+                >
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
               </svg>
diff --git a/src/app/api-docs/page.tsx b/src/app/api-docs/page.tsx
index dac95e5..1454c01 100644
--- a/src/app/api-docs/page.tsx
+++ b/src/app/api-docs/page.tsx
@@ -120,7 +120,7 @@ export default function ApiDocsPage() {
           <div className="space-y-4">
             {API_TOKEN_ENDPOINT_DOCS.map((endpoint) => (
               <EndpointCard
-                key={endpoint.path}
+                key={`${endpoint.method}:${endpoint.path}`}
                 endpoint={endpoint}
                 token={token}
                 useSession={useSession}
diff --git a/src/components/profile/ApiTokensSection.tsx b/src/components/profile/ApiTokensSection.tsx
index 9d4eb2b..b3586ee 100644
--- a/src/components/profile/ApiTokensSection.tsx
+++ b/src/components/profile/ApiTokensSection.tsx
@@ -63,6 +63,8 @@ export function ApiTokensSection() {
                   </div>
                 </div>
                 <button
+                  type="button"
+                  aria-label="Dismiss token banner"
                   onClick={api.dismissCreatedToken}
                   className="flex-shrink-0 text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200"
                 >
diff --git a/src/lib/hooks/useApiTokens.ts b/src/lib/hooks/useApiTokens.ts
index 4a0b4ad..4c0b1d6 100644
--- a/src/lib/hooks/useApiTokens.ts
+++ b/src/lib/hooks/useApiTokens.ts
@@ -39,7 +39,7 @@ export interface UseApiTokensReturn<T extends ApiToken = ApiToken> {
   confirmRevokeId: string | null;
   setConfirmRevokeId: (id: string | null) => void;
   fetchTokens: () => Promise<void>;
-  handleCreate: (extraBody?: Partial<CreateTokenBody>) => Promise<void>;
+  handleCreate: (extraBody?: Partial<CreateTokenBody>) => Promise<boolean>;
   handleDeleteConfirmed: () => Promise<void>;
   handleCopy: () => Promise<void>;
   dismissCreatedToken: () => void;
@@ -69,10 +69,21 @@ export function useApiTokens<T extends ApiToken = ApiToken>(
   const fetchTokens = useCallback(async () => {
     try {
       const response = await fetchWithAuth(config.basePath);
-      if (response.ok) {
-        const data = await response.json();
-        setTokens(data.tokens);
+      if (!response.ok) {
+        let message = 'Failed to load API tokens';
+        try {
+          const data = await response.json();
+          message = data.error || message;
+        } catch {
+          // Keep default message when response body is not JSON
+        }
+        setError(message);
+        return;
       }
+
+      const data = await response.json();
+      setTokens(data.tokens);
+      setError(null);
     } catch {
       setError('Failed to load API tokens');
     } finally {
@@ -98,7 +109,7 @@ export function useApiTokens<T extends ApiToken = ApiToken>(
   const handleCreate = async (extraBody?: Partial<CreateTokenBody>) => {
     if (!newTokenName.trim()) {
       setError('Token name is required');
-      return;
+      return false;
     }
 
     setCreating(true);
@@ -124,12 +135,15 @@ export function useApiTokens<T extends ApiToken = ApiToken>(
         setNewTokenExpiry('never');
         setShowCreateForm(false);
         await fetchTokens();
+        return true;
       } else {
         const data = await response.json();
         setError(data.error || 'Failed to create token');
+        return false;
       }
     } catch {
       setError('Failed to create token');
+      return false;
     } finally {
       setCreating(false);
     }