fix: open OAuth login in new tab to bypass iframe restrictions, auto-poll for cookie

app/globals.css

@@ -134,6 +134,8 @@ h4 {
   background: var(--accent);
   padding: 12px 28px;
   border-radius: 8px;
+  border: none;
+  cursor: pointer;
   text-decoration: none;
   transition: background 0.2s;
 }

app/page.js

@@ -349,14 +349,34 @@ export default function Home() {
 
     // Gate: require HF OAuth login
     if (!annotatorName) {
+        const handleLogin = () => {
+            // Open login in a new tab to bypass iframe restrictions
+            window.open('/api/auth/login', '_blank');
+            // Poll for the cookie to appear (set by callback)
+            const poll = setInterval(() => {
+                try {
+                    const cookie = document.cookie
+                        .split('; ')
+                        .find(c => c.startsWith('hf_user='));
+                    if (cookie) {
+                        clearInterval(poll);
+                        const user = JSON.parse(decodeURIComponent(cookie.split('=').slice(1).join('=')));
+                        if (user.username) {
+                            setAnnotatorName(user.username);
+                        }
+                    }
+                } catch (e) { /* ignore */ }
+            }, 2000);
+        };
+
         return (
             <div className="login-gate">
                 <div className="login-card">
                     <h1>🔒 Annotation Tool</h1>
                     <p>Sign in with your HuggingFace account to access the annotation tool.</p>
-                    <a href="/api/auth/login" className="btn btn-login-large">
+                    <button onClick={handleLogin} className="btn btn-login-large">
                         🤗 Sign in with HuggingFace
-                    </a>
+                    </button>
                     <p className="login-note">Only authorized annotators can access this tool.</p>
                 </div>
             </div>