diff --git a/.gitignore b/.gitignore
index 82479fd..a96a1a9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -52,4 +52,5 @@ next-env.d.ts
 
 /public/typescript/
 /app/m-plus-rounded-1c-nohint/
-node_modules
\ No newline at end of file
+node_modules
+.wrangler
diff --git a/app/accountMenu.tsx b/app/accountMenu.tsx
index 5a73a14..6e13860 100644
--- a/app/accountMenu.tsx
+++ b/app/accountMenu.tsx
@@ -2,7 +2,7 @@
 
 import { authClient } from "@/lib/auth-client";
 import { usePathname, useRouter } from "next/navigation";
-import { useEffect } from "react";
+import { ReactNode, useEffect, useState } from "react";
 
 export function AutoAnonymousLogin() {
   const { data: session, isPending } = authClient.useSession();
@@ -19,6 +19,12 @@ export function AccountMenu() {
   const { data: session, isPending } = authClient.useSession();
   const pathname = usePathname();
   const router = useRouter();
+  const [signingInProvider, setSigningInProvider] = useState<
+    "github" | "google" | null
+  >(null);
+  const [signinErrorMessage, setSigninErrorMessage] = useState<string | null>(
+    null
+  );
 
   const signout = () => {
     if (
@@ -42,86 +48,101 @@ export function AccountMenu() {
       });
     }
   };
+  const signInWithSocial = async (provider: "github" | "google") => {
+    if (signingInProvider) return;
+    setSigninErrorMessage(null);
+    setSigningInProvider(provider);
+    try {
+      const result = await authClient.signIn.social({
+        provider,
+        callbackURL: `/clear-cache?redirect=${encodeURIComponent(pathname)}`,
+      });
+      if (result?.error) {
+        throw new Error(result.error.message);
+      }
+    } catch {
+      setSigningInProvider(null);
+      setSigninErrorMessage(
+        "ログインに失敗しました。しばらくしてから再度お試しください。"
+      );
+    }
+  };
 
   if (isPending || !session) {
     return <div className="w-10 h-10 skeleton rounded-full"></div>;
   }
 
+  let avatar: ReactNode;
+  let content: ReactNode;
   if (session && !session.user.isAnonymous) {
-    return (
-      <div className="dropdown dropdown-end">
-        <label tabIndex={0} className="btn btn-ghost btn-circle avatar">
-          <div className="w-8 h-8 rounded-full">
-            <img
-              src={
-                session.user?.image ??
-                `https://avatar.vercel.sh/${session.user?.name}`
-              }
-              alt="user avatar"
-              crossOrigin="anonymous"
-            />
-          </div>
-        </label>
-        <ul
-          tabIndex={0}
-          className="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52"
-        >
-          <li>
-            <a onClick={signout}>ログアウト</a>
-          </li>
-        </ul>
+    avatar = (
+      <div className="w-8 h-8 rounded-full">
+        <img
+          src={
+            session.user?.image ??
+            `https://avatar.vercel.sh/${session.user?.name}`
+          }
+          alt="user avatar"
+          crossOrigin="anonymous"
+        />
       </div>
     );
-  }
-
-  return (
-    <div className="dropdown dropdown-end">
-      <label tabIndex={0} className="btn btn-ghost btn-circle avatar">
-        <div className="w-8 h-8 rounded-full">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            strokeWidth={1.5}
-            stroke="currentColor"
-            className="w-full h-full"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-            />
-          </svg>
-        </div>
-      </label>
-      <ul className="z-1 shadow-md dropdown-content bg-base-100 rounded-box menu w-64">
+    content = (
+      <>
+        <li>
+          <a onClick={signout}>ログアウト</a>
+        </li>
+      </>
+    );
+  } else {
+    avatar = (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        stroke="currentColor"
+        className="w-8 h-8"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+        />
+      </svg>
+    );
+    content = (
+      <>
         <li className="menu-title">
           ログインすると、チャット履歴を保存し別のデバイスからもアクセスできるようになります。
         </li>
         <li>
           <button
-            onClick={() =>
-              authClient.signIn.social({
-                provider: "github",
-                callbackURL: `/clear-cache?redirect=${encodeURIComponent(pathname)}`,
-              })
-            }
+            onClick={() => signInWithSocial("github")}
+            disabled={signingInProvider !== null}
+            aria-busy={signingInProvider === "github"}
           >
+            {signingInProvider === "github" && (
+              <span className="loading loading-spinner loading-xs" />
+            )}
             GitHub でログイン
           </button>
         </li>
         <li>
           <button
-            onClick={() =>
-              authClient.signIn.social({
-                provider: "google",
-                callbackURL: `/clear-cache?redirect=${encodeURIComponent(pathname)}`,
-              })
-            }
+            onClick={() => signInWithSocial("google")}
+            disabled={signingInProvider !== null}
+            aria-busy={signingInProvider === "google"}
           >
+            {signingInProvider === "google" && (
+              <span className="loading loading-spinner loading-xs" />
+            )}
             Google でログイン
           </button>
         </li>
+        {signinErrorMessage && (
+          <li className="text-error px-4 py-2 text-sm">{signinErrorMessage}</li>
+        )}
         {session?.user && (
           <>
             <div className="divider my-0" />
@@ -132,7 +153,16 @@ export function AccountMenu() {
             </li>
           </>
         )}
+      </>
+    );
+  }
+
+  return (
+    <details className="dropdown dropdown-end">
+      <summary className="btn btn-ghost btn-circle avatar">{avatar}</summary>
+      <ul className="z-1 shadow-md dropdown-content bg-base-100 rounded-box menu w-64">
+        {content}
       </ul>
-    </div>
+    </details>
   );
 }
diff --git a/packages/runtime/vitest.config.ts b/packages/runtime/vitest.config.ts
index 339f289..a3192f7 100644
--- a/packages/runtime/vitest.config.ts
+++ b/packages/runtime/vitest.config.ts
@@ -28,6 +28,7 @@ export default defineConfig({
       enabled: true,
       provider: webdriverio(),
       instances: [{ browser: "chrome" }],
+      screenshotFailures: false,
     },
   },
   optimizeDeps: {