Fix: Login button debugging and YouTube iframe lazy-loading for HF Spaces

- Add console logging to AuthModal and AuthContext for debugging
- Implement click-to-load pattern for YouTube video to avoid nested iframe issues
- Add /auth proxy route to Vite dev server for local development

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/components/auth/AuthModal.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import {
   Dialog,
   DialogContent,
@@ -17,13 +17,25 @@ interface AuthModalProps {
 
 export function AuthModal({ open, onOpenChange }: AuthModalProps) {
   const { login, authState } = useAuth();
+  const [showVideo, setShowVideo] = useState(false);
+
+  // Debug: Log auth state when modal renders
+  console.log("🔍 AuthModal render - authState:", {
+    isLoading: authState.isLoading,
+    isAuthenticated: authState.isAuthenticated,
+    error: authState.error,
+    buttonDisabled: authState.isLoading,
+  });
 
   const handleLogin = async () => {
+    console.log("🖱️ Login button clicked!");
     try {
+      console.log("🔄 Calling login()...");
       await login();
+      console.log("✅ login() completed");
       // Don't close modal here, it will close after successful auth
     } catch (error) {
-      console.error("Login failed:", error);
+      console.error("❌ Login failed:", error);
     }
   };
 
@@ -117,17 +129,29 @@ export function AuthModal({ open, onOpenChange }: AuthModalProps) {
 
           {/* Right side - Demo Content */}
           <div className="bg-secondary/20 p-8 lg:p-12 space-y-6">
-            {/* Demo Video */}
+            {/* Demo Video - Click to load to avoid iframe issues in HF Spaces */}
             <Card className="bg-background/50 backdrop-blur-sm border-border/50">
               <CardContent className="p-0">
-                <div className="relative aspect-video rounded-lg overflow-hidden">
-                  <iframe
-                    src="https://www.youtube.com/embed/btrS9pfDYJY?si=dDX4tIs-oS2O2d2p"
-                    title="AgentGraph: Interactive Analysis Platform Demo"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                    allowFullScreen
-                    className="w-full h-full"
-                  />
+                <div className="relative aspect-video rounded-lg overflow-hidden bg-muted">
+                  {showVideo ? (
+                    <iframe
+                      src="https://www.youtube.com/embed/btrS9pfDYJY?si=dDX4tIs-oS2O2d2p&autoplay=1"
+                      title="AgentGraph: Interactive Analysis Platform Demo"
+                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                      allowFullScreen
+                      className="w-full h-full"
+                    />
+                  ) : (
+                    <button
+                      onClick={() => setShowVideo(true)}
+                      className="w-full h-full flex flex-col items-center justify-center gap-4 hover:bg-muted/80 transition-colors cursor-pointer"
+                    >
+                      <div className="w-16 h-16 rounded-full bg-primary/90 flex items-center justify-center shadow-lg">
+                        <Play className="w-8 h-8 text-white ml-1" />
+                      </div>
+                      <span className="text-sm text-muted-foreground">Click to play demo video</span>
+                    </button>
+                  )}
                 </div>
                 <div className="p-4">
                   <div className="flex items-center space-x-2 text-sm text-muted-foreground">

frontend/src/context/AuthContext.tsx

@@ -231,8 +231,10 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   };
 
   const login = async () => {
+    console.log("🚀 login() function called");
     try {
       dispatch({ type: "AUTH_START" });
+      console.log("📤 Dispatched AUTH_START");
 
       // Check if we're in HF Spaces environment
       const isHFSpaces =
@@ -241,13 +243,22 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         window.location.hostname.includes("huggingface.co") ||
         document.querySelector('meta[name="hf:space"]') !== null;
 
+      console.log("🔍 HF Spaces detection in login():", {
+        isHFSpaces,
+        hostname: window.location.hostname,
+        hasHuggingface: !!window.huggingface,
+      });
+
       if (isHFSpaces) {
         // In HF Spaces, get OAuth config from backend API
         console.log("🔐 Getting OAuth config from backend");
 
         try {
+          console.log("📡 Fetching /auth/oauth-config...");
           const response = await fetch("/auth/oauth-config");
+          console.log("📡 Fetch response status:", response.status);
           const oauthConfig = await response.json();
+          console.log("📡 OAuth config response:", oauthConfig);
 
           if (!oauthConfig.oauth_enabled) {
             throw new Error("OAuth not enabled or configured on backend");
@@ -277,17 +288,18 @@ export function AuthProvider({ children }: { children: ReactNode }) {
             `state=${state}&` +
             `prompt=consent`;
 
-          console.log("🔄 Redirecting to HF OAuth with client_id");
+          console.log("🔄 Redirecting to HF OAuth:", oauthUrl.substring(0, 100) + "...");
           window.location.href = oauthUrl;
         } catch (configError) {
           console.error(
-            "Failed to get OAuth config from backend:",
+            "❌ Failed to get OAuth config from backend:",
             configError
           );
           throw new Error("OAuth configuration not available from backend");
         }
       } else {
         // For local development, show a message or redirect to HF
+        console.log("⚠️ Not in HF Spaces, dispatching AUTH_ERROR");
         dispatch({
           type: "AUTH_ERROR",
           payload:
@@ -295,7 +307,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         });
       }
     } catch (error) {
-      console.error("Login failed:", error);
+      console.error("❌ Login failed:", error);
       dispatch({
         type: "AUTH_ERROR",
         payload: "Failed to initiate login",

frontend/vite.config.ts

@@ -46,6 +46,20 @@ export default defineConfig({
         },
         timeout: 60000,
       },
+      "/auth": {
+        target: process.env.VITE_API_URL || "http://127.0.0.1:5280",
+        changeOrigin: true,
+        secure: false,
+        configure: (proxy, _options) => {
+          proxy.on("error", (err, req, res) => {
+            console.log("auth proxy error", err);
+          });
+          proxy.on("proxyReq", (proxyReq, req, _res) => {
+            console.log("Proxying auth to backend:", req.method, req.url);
+          });
+        },
+        timeout: 60000,
+      },
     },
   },
 });