Implement popup login modal system

✨ Major UX Improvement:
- Replace full-page login with overlay modal
- Users can now see the platform in background before login
- Created AuthContext for centralized auth state management
- Added LoginModal component with embedded video and paper
- Modified API to trigger login modal on 401 errors
- Removed forced auth redirect from root route

🎨 Design Features:
- Glass-morphism modal design consistent with platform
- Embedded demo video and research paper download
- Responsive layout with proper backdrop blur
- Smooth loading states and transitions

🔧 Technical Changes:
- New AuthContext with HF Spaces detection
- Custom auth-required events from API layer
- Conditional authentication based on environment
- Proper error handling for unauthorized requests

This provides a much better user experience where users can
explore the interface before deciding to authenticate.

backend/app.py

@@ -177,11 +177,11 @@ async def shutdown_event():
     # scheduler_service.stop() # This line is now commented out
 
 
-# Root redirect to React app (requires authentication)
+# Root redirect to React app (no authentication required - frontend handles login modal)
 @app.get("/")
-async def root(request: Request, auth_check = Depends(require_auth_in_hf_spaces)):
-    # This endpoint is protected by dependency injection
-    # If user reaches here, they are authenticated (or in local dev)
+async def root(request: Request):
+    # Allow all users to access the main interface
+    # Authentication will be handled by frontend login modal
     return RedirectResponse(url="/agentgraph")
 
 

backend/routers/knowledge_graphs.py

@@ -23,7 +23,7 @@ import math
 # Add the project root to the Python path for proper imports
 sys.path.append(os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__)))))
 
-from backend.dependencies import get_db_session
+from backend.dependencies import get_db_session, get_current_user_optional
 from backend.services import KnowledgeGraphService
 from backend.models import KnowledgeGraphResponse, PlatformStatsResponse
 from backend.database import get_db

backend/templates/login.html

@@ -210,9 +210,17 @@
             <div class="glass-card p-6 rounded-2xl">
               <div class="flex items-center space-x-4">
                 <div class="flex-shrink-0">
-                  <svg class="w-8 h-8 text-primary" fill="currentColor" viewBox="0 0 20 20">
-                    <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 0v12h8V4H6z" clip-rule="evenodd"/>
-                    <path d="M8 6h4v1H8V6zM8 8h4v1H8V8zM8 10h2v1H8v-1z"/>
+                  <svg
+                    class="w-8 h-8 text-primary"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 0v12h8V4H6z"
+                      clip-rule="evenodd"
+                    />
+                    <path d="M8 6h4v1H8V6zM8 8h4v1H8V8zM8 10h2v1H8v-1z" />
                   </svg>
                 </div>
                 <div class="flex-1">
@@ -220,15 +228,26 @@
                     Research Paper
                   </h3>
                   <p class="text-sm text-muted-foreground mb-3">
-                    AgentGraph: Trace-to-Graph Platform for Interactive Analysis and Robustness Testing in Agentic AI Systems
+                    AgentGraph: Trace-to-Graph Platform for Interactive Analysis
+                    and Robustness Testing in Agentic AI Systems
                   </p>
                   <a
                     href="/static/papers/agentgraph_paper.pdf"
                     target="_blank"
                     class="inline-flex items-center text-primary hover:text-primary/80 transition-colors"
                   >
-                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+                    <svg
+                      class="w-4 h-4 mr-2"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                      />
                     </svg>
                     Download PDF
                   </a>

frontend/src/App.tsx

@@ -5,14 +5,29 @@ import { NotificationProvider } from "./context/NotificationContext";
 import { ModalProvider, useModal } from "./context/ModalContext";
 import { NavigationProvider } from "./context/NavigationContext";
 import { KGDisplayModeProvider } from "./context/KGDisplayModeContext";
+import { AuthProvider, useAuth } from "./context/AuthContext";
 import { MainLayout } from "./components/layout/MainLayout";
 import { ModalSystem } from "./components/shared/ModalSystem";
+import { LoginModal } from "./components/auth/LoginModal";
 import { Toaster } from "./components/ui/toaster";
 import { ErrorBoundary } from "./components/shared/ErrorBoundary";
 import "./styles/globals.css";
 
 function AppContent() {
   const { modalState, closeModal } = useModal();
+  const { showLoginModal, setShowLoginModal, isLoading } = useAuth();
+
+  // Show loading screen while checking auth status
+  if (isLoading) {
+    return (
+      <div className="h-screen bg-background text-foreground flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
+          <p className="text-muted-foreground">Loading AgentGraph...</p>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div className="h-screen bg-background text-foreground flex flex-col">
@@ -21,6 +36,10 @@ function AppContent() {
       </ErrorBoundary>
       <Toaster />
       <ModalSystem modalState={modalState} onClose={closeModal} />
+      <LoginModal
+        isOpen={showLoginModal}
+        onClose={() => setShowLoginModal(false)}
+      />
     </div>
   );
 }
@@ -29,17 +48,19 @@ function App() {
   return (
     <ErrorBoundary>
       <ThemeProvider>
-        <NotificationProvider>
-          <NavigationProvider>
-            <ModalProvider>
-              <KGDisplayModeProvider>
-                <AgentGraphProvider>
-                  <AppContent />
-                </AgentGraphProvider>
-              </KGDisplayModeProvider>
-            </ModalProvider>
-          </NavigationProvider>
-        </NotificationProvider>
+        <AuthProvider>
+          <NotificationProvider>
+            <NavigationProvider>
+              <ModalProvider>
+                <KGDisplayModeProvider>
+                  <AgentGraphProvider>
+                    <AppContent />
+                  </AgentGraphProvider>
+                </KGDisplayModeProvider>
+              </ModalProvider>
+            </NavigationProvider>
+          </NotificationProvider>
+        </AuthProvider>
       </ThemeProvider>
     </ErrorBoundary>
   );

frontend/src/components/auth/LoginModal.tsx

@@ -0,0 +1,136 @@
+import React from "react";
+import { X, FileText, ExternalLink } from "lucide-react";
+import { useAuth } from "../../context/AuthContext";
+
+interface LoginModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function LoginModal({ isOpen, onClose }: LoginModalProps) {
+  const { login, isHFSpaces } = useAuth();
+
+  if (!isOpen) return null;
+
+  const handleLogin = () => {
+    login();
+  };
+
+  const handleOverlayClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
+      onClick={handleOverlayClick}
+    >
+      <div className="bg-card border border-border rounded-2xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-hidden">
+        {/* Header */}
+        <div className="flex justify-between items-center p-6 border-b border-border">
+          <h2 className="text-2xl font-bold text-foreground">
+            Welcome to AgentGraph
+          </h2>
+          <button
+            onClick={onClose}
+            className="p-2 hover:bg-muted rounded-lg transition-colors"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <div className="grid lg:grid-cols-2 gap-8 p-6">
+          {/* Content Section */}
+          <div className="space-y-6">
+            {/* Title */}
+            <div className="space-y-4">
+              <h1 className="text-3xl lg:text-4xl font-bold bg-gradient-to-r from-foreground to-primary bg-clip-text text-transparent">
+                AgentGraph
+              </h1>
+              <p className="text-lg text-muted-foreground">
+                Trace-to-Graph Platform for Interactive Analysis and Robustness
+                Testing in Agentic AI Systems
+              </p>
+            </div>
+
+            {/* Description */}
+            <p className="text-muted-foreground">
+              Convert execution logs into interactive knowledge graphs with
+              actionable insights for AI system analysis and robustness testing.
+            </p>
+
+            {/* CTA Section */}
+            <div className="space-y-4">
+              <button
+                onClick={handleLogin}
+                className="w-full bg-primary hover:bg-primary/90 text-primary-foreground font-semibold py-3 px-6 rounded-lg transition-colors flex items-center justify-center gap-2"
+              >
+                {isHFSpaces ? (
+                  <>
+                    Login with Hugging Face
+                    <ExternalLink className="w-4 h-4" />
+                  </>
+                ) : (
+                  "Continue to Platform"
+                )}
+              </button>
+
+              <div className="bg-muted/30 p-4 rounded-lg">
+                <p className="text-sm text-muted-foreground">
+                  {isHFSpaces
+                    ? "Authentication required for responsible AI resource usage"
+                    : "Local development mode - no authentication required"}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Video and Paper Section */}
+          <div className="space-y-6">
+            {/* Demo Video */}
+            <div className="bg-muted/20 rounded-xl overflow-hidden">
+              <div className="relative aspect-video">
+                <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 rounded-xl"
+                />
+              </div>
+            </div>
+
+            {/* Research Paper */}
+            <div className="bg-muted/20 p-4 rounded-xl">
+              <div className="flex items-center space-x-3">
+                <div className="flex-shrink-0">
+                  <FileText className="w-6 h-6 text-primary" />
+                </div>
+                <div className="flex-1">
+                  <h3 className="font-semibold text-foreground mb-1">
+                    Research Paper
+                  </h3>
+                  <p className="text-sm text-muted-foreground mb-2">
+                    AgentGraph: Trace-to-Graph Platform for Interactive Analysis
+                    and Robustness Testing in Agentic AI Systems
+                  </p>
+                  <a
+                    href="/static/papers/agentgraph_paper.pdf"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex items-center text-primary hover:text-primary/80 transition-colors text-sm"
+                  >
+                    <FileText className="w-4 h-4 mr-1" />
+                    Download PDF
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/context/AuthContext.tsx

@@ -0,0 +1,158 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  ReactNode,
+} from "react";
+
+export interface User {
+  id: string;
+  username: string;
+  name: string;
+  email?: string;
+  avatar_url?: string;
+  auth_method: string;
+}
+
+interface AuthState {
+  user: User | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  isHFSpaces: boolean;
+  authRequired: boolean;
+}
+
+interface AuthContextType extends AuthState {
+  login: () => void;
+  logout: () => void;
+  checkAuthStatus: () => Promise<void>;
+  showLoginModal: boolean;
+  setShowLoginModal: (show: boolean) => void;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+}
+
+interface AuthProviderProps {
+  children: ReactNode;
+}
+
+export function AuthProvider({ children }: AuthProviderProps) {
+  const [user, setUser] = useState<User | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isHFSpaces, setIsHFSpaces] = useState(false);
+  const [authRequired, setAuthRequired] = useState(false);
+  const [showLoginModal, setShowLoginModal] = useState(false);
+
+  const isAuthenticated = user !== null;
+
+  const checkAuthStatus = async () => {
+    try {
+      setIsLoading(true);
+      const response = await fetch("/auth/status");
+      const data = await response.json();
+
+      setIsHFSpaces(data.environment === "huggingface_spaces");
+      setAuthRequired(
+        data.login_required && data.environment === "huggingface_spaces"
+      );
+
+      if (data.user_authenticated && data.user_info) {
+        setUser({
+          id: data.user_info.user_id || "unknown",
+          username: data.user_info.username || "Unknown User",
+          name:
+            data.user_info.name || data.user_info.username || "Unknown User",
+          email: data.user_info.email,
+          avatar_url: data.user_info.avatar_url,
+          auth_method: data.user_info.auth_method || "unknown",
+        });
+        setShowLoginModal(false);
+      } else {
+        setUser(null);
+        // Show login modal if in HF Spaces and auth is required
+        if (data.environment === "huggingface_spaces" && data.login_required) {
+          setShowLoginModal(true);
+        }
+      }
+    } catch (error) {
+      console.error("Failed to check auth status:", error);
+      setUser(null);
+      // Assume local development if fetch fails
+      setIsHFSpaces(false);
+      setAuthRequired(false);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const login = () => {
+    if (isHFSpaces) {
+      // For HF Spaces, redirect to OAuth login
+      window.location.href = "/auth/login";
+    } else {
+      // For local development, just close the modal
+      setShowLoginModal(false);
+      setUser({
+        id: "local_dev",
+        username: "local_user",
+        name: "Local Development User",
+        auth_method: "local_dev",
+      });
+    }
+  };
+
+  const logout = async () => {
+    try {
+      if (isHFSpaces) {
+        await fetch("/auth/logout");
+        window.location.reload();
+      } else {
+        setUser(null);
+        setShowLoginModal(false);
+      }
+    } catch (error) {
+      console.error("Failed to logout:", error);
+    }
+  };
+
+  useEffect(() => {
+    checkAuthStatus();
+
+    // Listen for auth-required events from API calls
+    const handleAuthRequired = () => {
+      if (authRequired && !isAuthenticated) {
+        setShowLoginModal(true);
+      }
+    };
+
+    window.addEventListener('auth-required', handleAuthRequired);
+    
+    return () => {
+      window.removeEventListener('auth-required', handleAuthRequired);
+    };
+  }, [authRequired, isAuthenticated]);
+
+  const value: AuthContextType = {
+    user,
+    isAuthenticated,
+    isLoading,
+    isHFSpaces,
+    authRequired,
+    login,
+    logout,
+    checkAuthStatus,
+    showLoginModal,
+    setShowLoginModal,
+  };
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}

frontend/src/lib/api.ts

@@ -33,6 +33,18 @@ async function fetchApi<T>(
   });
 
   if (!response.ok) {
+    // Handle 401 (Unauthorized) - trigger login modal
+    if (response.status === 401) {
+      // Check if running in browser environment
+      if (typeof window !== 'undefined') {
+        // Dispatch a custom event to trigger login modal
+        window.dispatchEvent(new CustomEvent('auth-required', {
+          detail: { message: 'Authentication required to access this feature' }
+        }));
+      }
+      throw new ApiError(response.status, 'Authentication required');
+    }
+
     // Handle 429 (Too Many Requests) with exponential backoff
     if (response.status === 429 && retryCount < 3) {
       const backoffDelay = Math.pow(2, retryCount) * 1000; // 1s, 2s, 4s