Fix token UI success handling, fetch error surfacing, and docs key stability

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);
+    const created = await api.handleCreate(extraBody);
-    // Reset admin-specific fields on success
+    // Reset admin-specific fields only when create succeeds
-    if (!api.error) {
+    if (created) {
       setNewTokenUserId('');
       setNewTokenRole('');
     }
@@ -124,6 +124,8 @@ export function ApiTab() {
               </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"
                 >

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}

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"
                 >

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) {
+      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);
     }