fix(frontend): update CredentialsProvidersContext state on credential deletion

The delete mutation was using useDeleteV1DeleteCredentials which only
invalidated React Query caches but did not update the context's own
useState-managed credential list. Switch to the context's
deleteCredentials method which both calls the API and removes the
credential from the provider state, so the UI updates immediately.

autogpt_platform/frontend/src/components/contextual/CredentialsInput/CredentialsInput.tsx

@@ -95,7 +95,7 @@ export function CredentialsInput({
     handleDeleteConfirm,
     credentialToDelete,
     setCredentialToDelete,
-    deleteCredentialsMutation,
+    isDeletingCredential,
   } = hookData;
 
   const displayName = toDisplayName(provider);
@@ -202,7 +202,7 @@ export function CredentialsInput({
 
           <DeleteConfirmationModal
             credentialToDelete={credentialToDelete}
-            isDeleting={deleteCredentialsMutation.isPending}
+            isDeleting={isDeletingCredential}
             onClose={() => setCredentialToDelete(null)}
             onConfirm={handleDeleteConfirm}
           />

autogpt_platform/frontend/src/components/contextual/CredentialsInput/useCredentialsInput.ts

@@ -1,4 +1,3 @@
-import { useDeleteV1DeleteCredentials } from "@/app/api/__generated__/endpoints/integrations/integrations";
 import useCredentials from "@/hooks/useCredentials";
 import { useBackendAPI } from "@/lib/autogpt-server-api/context";
 import {
@@ -12,7 +11,6 @@ import {
   OAUTH_ERROR_WINDOW_CLOSED,
   openOAuthPopup,
 } from "@/lib/oauth-popup";
-import { useQueryClient } from "@tanstack/react-query";
 import { useEffect, useRef, useState } from "react";
 import {
   countSupportedTypes,
@@ -61,10 +59,10 @@ export function useCredentialsInput({
   } | null>(null);
 
   const api = useBackendAPI();
-  const queryClient = useQueryClient();
   const credentials = useCredentials(schema, siblingInputs);
   const hasAttemptedAutoSelect = useRef(false);
   const oauthAbortRef = useRef<((reason?: string) => void) | null>(null);
+  const [isDeletingCredential, setIsDeletingCredential] = useState(false);
 
   // Clean up on unmount
   useEffect(() => {
@@ -73,23 +71,6 @@ export function useCredentialsInput({
     };
   }, []);
 
-  const deleteCredentialsMutation = useDeleteV1DeleteCredentials({
-    mutation: {
-      onSuccess: () => {
-        queryClient.invalidateQueries({
-          queryKey: ["/api/integrations/credentials"],
-        });
-        queryClient.invalidateQueries({
-          queryKey: [`/api/integrations/${credentials?.provider}/credentials`],
-        });
-        setCredentialToDelete(null);
-        if (selectedCredential?.id === credentialToDelete?.id) {
-          onSelectCredential(undefined);
-        }
-      },
-    },
-  });
-
   useEffect(() => {
     if (onLoaded) {
       onLoaded(Boolean(credentials && credentials.isLoading === false));
@@ -318,12 +299,23 @@ export function useCredentialsInput({
     setCredentialToDelete(credential);
   }
 
-  function handleDeleteConfirm() {
-    if (credentialToDelete && credentials) {
-      deleteCredentialsMutation.mutate({
-        provider: credentials.provider,
-        credId: credentialToDelete.id,
-      });
+  async function handleDeleteConfirm() {
+    if (
+      !credentialToDelete ||
+      !credentials ||
+      !("deleteCredentials" in credentials)
+    )
+      return;
+
+    setIsDeletingCredential(true);
+    try {
+      await credentials.deleteCredentials(credentialToDelete.id);
+      if (selectedCredential?.id === credentialToDelete.id) {
+        onSelectCredential(undefined);
+      }
+      setCredentialToDelete(null);
+    } finally {
+      setIsDeletingCredential(false);
     }
   }
 
@@ -350,7 +342,7 @@ export function useCredentialsInput({
     isOAuth2FlowInProgress,
     cancelOAuthFlow,
     credentialToDelete,
-    deleteCredentialsMutation,
+    isDeletingCredential,
     actionButtonText: getActionButtonText(
       supportsOAuth2,
       supportsApiKey,