Fix: Resolve multiple ClerkProvider issue and hide Reset HUD button when user is not authenticated

app/layout.tsx

@@ -2,7 +2,7 @@ import type { Metadata } from "next"
 import { jetbrainsMono } from '@/lib/fonts'
 import "./globals.css"
 import { siteConfig } from "./siteConfig"
-import ResetHUDButton from "@/components/ResetHUDButton"
+import ClientResetHUDButton from "@/components/ClientResetHUDButton"
 
 export const metadata: Metadata = {
   metadataBase: new URL("https://openagents.com"),
@@ -40,7 +40,7 @@ export default function RootLayout({
         className={`${jetbrainsMono.variable} min-h-screen scroll-auto antialiased selection:bg-white selection:text-black dark:bg-black font-mono`}
       >
         <div className="fixed top-4 right-4 z-50">
-          <ResetHUDButton />
+          <ClientResetHUDButton />
         </div>
         {children}
       </body>

components/ClientResetHUDButton.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import React from 'react';
+import { useAuth, ClerkProvider } from "@clerk/nextjs";
+import ResetHUDButton from "./ResetHUDButton";
+
+const AuthenticatedResetHUDButton: React.FC = () => {
+  const { isSignedIn } = useAuth();
+
+  if (!isSignedIn) {
+    return null;
+  }
+
+  return <ResetHUDButton />;
+};
+
+const ClientResetHUDButton: React.FC = () => {
+  return (
+    <ClerkProvider>
+      <AuthenticatedResetHUDButton />
+    </ClerkProvider>
+  );
+};
+
+export default ClientResetHUDButton;