fix: implement global session management and fix page access

🔧 Authentication System Improvements:
- Create global AuthProvider for consistent session management
- Add demo mode support with localStorage persistence
- Fix client-side authentication state management
- Ensure session persists across page navigation

📱 Page Access Fixes:
- Convert server-side auth pages to client-side
- Update graph, actions, modules, workbench pages
- Add proper loading states and redirects
- Support both Supabase auth and demo mode

✨ Demo Mode Features:
- Seamless demo mode activation from login/signup
- Persistent demo session across page refreshes
- Clear demo mode indicators in UI
- Proper demo mode sign out handling

🛡️ Session Persistence:
- Global auth state management via React Context
- Automatic session restoration on page load
- Consistent authentication checks across all pages
- Proper cleanup on sign out

This fixes the issue where users couldn't access protected pages
after login and ensures session state is maintained globally.

Author: leavenotrace

app/actions/page.tsx

@@ -1,26 +1,31 @@
-import { createClient, isSupabaseConfigured } from "@/lib/supabase/server"
-import { redirect } from "next/navigation"
+"use client"
+
+import { useAuth } from "@/components/providers/auth-provider"
+import { useRouter } from "next/navigation"
+import { useEffect } from "react"
 import ActionsDashboard from "@/components/actions-dashboard"
+import { LoadingSpinner } from "@/components/ui/loading-spinner"
+
+export default function ActionsPage() {
+  const { user, loading } = useAuth()
+  const router = useRouter()
 
-export default async function ActionsPage() {
-  // If Supabase is not configured, show setup message
-  if (!isSupabaseConfigured) {
+  useEffect(() => {
+    if (!loading && !user) {
+      router.push("/auth/login")
+    }
+  }, [user, loading, router])
+
+  if (loading) {
     return (
-      <div className="flex min-h-screen items-center justify-center bg-slate-950">
-        <h1 className="text-2xl font-bold mb-4 text-white">Connect Supabase to get started</h1>
+      <div className="min-h-screen bg-slate-950 flex items-center justify-center">
+        <LoadingSpinner size="lg" text="Loading action management..." />
       </div>
     )
   }
 
-  // Get the user from the server
-  const supabase = await createClient()
-  const {
-    data: { user },
-  } = await supabase.auth.getUser()
-
-  // If no user, redirect to login
   if (!user) {
-    redirect("/auth/login")
+    return null // Will redirect via useEffect
   }
 
   return (

app/auth/login/page.tsx

@@ -1,63 +1,55 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { useRouter } from "next/navigation"
 import Link from "next/link"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Alert, AlertDescription } from "@/components/ui/alert"
-import { createClient } from "@/lib/supabase/client"
+import { useAuth } from "@/components/providers/auth-provider"
 import { Eye, EyeOff, Home, Loader2 } from "lucide-react"
 import { toastUtils } from "@/lib/toast-utils"
 
 export default function LoginPage() {
   const [email, setEmail] = useState("")
   const [password, setPassword] = useState("")
   const [showPassword, setShowPassword] = useState(false)
-  const [loading, setLoading] = useState(false)
   const [error, setError] = useState("")
   const router = useRouter()
+  
+  const { signIn, loading, user, enterDemoMode } = useAuth()
+
+  // Redirect if already authenticated
+  useEffect(() => {
+    if (user) {
+      router.push("/dashboard")
+    }
+  }, [user, router])
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
-    setLoading(true)
     setError("")
 
     if (!email || !password) {
       setError("Please fill in all fields")
-      setLoading(false)
       return
     }
 
-    try {
-      const supabase = createClient()
-      const { error } = await supabase.auth.signInWithPassword({
-        email,
-        password,
-      })
-
-      if (error) {
-        setError(error.message)
-        toastUtils.error(error.message)
-      } else {
-        toastUtils.success("Successfully signed in!")
-        router.push("/dashboard")
-        router.refresh()
-      }
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : "An unexpected error occurred"
-      setError(errorMessage)
-      toastUtils.error(errorMessage)
-    } finally {
-      setLoading(false)
+    const result = await signIn(email, password)
+    
+    if (result.error) {
+      setError(result.error)
+      toastUtils.error(result.error)
+    } else {
+      // Success will be handled by the auth provider
+      router.push("/dashboard")
     }
   }
 
   const handleDemoLogin = () => {
-    toastUtils.info("Demo mode - redirecting to dashboard")
-    router.push("/dashboard")
+    enterDemoMode()
   }
 
   return (

app/auth/signup/page.tsx

@@ -1,14 +1,14 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { useRouter } from "next/navigation"
 import Link from "next/link"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Alert, AlertDescription } from "@/components/ui/alert"
-import { createClient } from "@/lib/supabase/client"
+import { useAuth } from "@/components/providers/auth-provider"
 import { Eye, EyeOff, Home, Loader2, CheckCircle } from "lucide-react"
 import { toastUtils } from "@/lib/toast-utils"
 
@@ -18,10 +18,18 @@ export default function SignUpPage() {
   const [confirmPassword, setConfirmPassword] = useState("")
   const [showPassword, setShowPassword] = useState(false)
   const [showConfirmPassword, setShowConfirmPassword] = useState(false)
-  const [loading, setLoading] = useState(false)
   const [error, setError] = useState("")
   const [success, setSuccess] = useState(false)
   const router = useRouter()
+  
+  const { signUp, loading, user, enterDemoMode } = useAuth()
+
+  // Redirect if already authenticated
+  useEffect(() => {
+    if (user) {
+      router.push("/dashboard")
+    }
+  }, [user, router])
 
   const validatePassword = (password: string) => {
     if (password.length < 6) {
@@ -32,55 +40,38 @@ export default function SignUpPage() {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
-    setLoading(true)
     setError("")
     setSuccess(false)
 
     if (!email || !password || !confirmPassword) {
       setError("Please fill in all fields")
-      setLoading(false)
       return
     }
 
     const passwordError = validatePassword(password)
     if (passwordError) {
       setError(passwordError)
-      setLoading(false)
       return
     }
 
     if (password !== confirmPassword) {
       setError("Passwords do not match")
-      setLoading(false)
       return
     }
 
-    try {
-      const supabase = createClient()
-      const { error } = await supabase.auth.signUp({
-        email,
-        password,
-      })
-
-      if (error) {
-        setError(error.message)
-        toastUtils.error(error.message)
-      } else {
-        setSuccess(true)
-        toastUtils.success("Account created successfully! Please check your email to verify your account.")
-      }
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : "An unexpected error occurred"
-      setError(errorMessage)
-      toastUtils.error(errorMessage)
-    } finally {
-      setLoading(false)
+    const result = await signUp(email, password)
+    
+    if (result.error) {
+      setError(result.error)
+      toastUtils.error(result.error)
+    } else if (result.success) {
+      setSuccess(true)
+      toastUtils.success(result.success)
     }
   }
 
   const handleDemoMode = () => {
-    toastUtils.info("Demo mode - redirecting to dashboard")
-    router.push("/dashboard")
+    enterDemoMode()
   }
 
   if (success) {

app/dashboard/page.tsx

@@ -1,18 +1,51 @@
+"use client"
+
+import { useAuth } from "@/components/providers/auth-provider"
+import { useRouter } from "next/navigation"
+import { useEffect } from "react"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
+import { LoadingSpinner } from "@/components/ui/loading-spinner"
 import { BarChart3, Network, Layers, Zap, Eye, BookOpen, Plus, TrendingUp, Clock, CheckCircle } from "lucide-react"
 import Link from "next/link"
 
 export default function DashboardPage() {
+  const { user, loading, isDemoMode } = useAuth()
+  const router = useRouter()
+
+  useEffect(() => {
+    if (!loading && !user) {
+      router.push("/auth/login")
+    }
+  }, [user, loading, router])
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-slate-950 flex items-center justify-center">
+        <LoadingSpinner size="lg" text="Loading dashboard..." />
+      </div>
+    )
+  }
+
+  if (!user) {
+    return null // Will redirect via useEffect
+  }
   return (
     <div className="container mx-auto px-4 py-8">
       <div className="max-w-6xl mx-auto space-y-8">
         {/* Header */}
         <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
           <div>
             <h1 className="text-3xl font-bold text-white">Dashboard</h1>
-            <p className="text-slate-400 mt-1">Welcome to your TimeWeave workspace</p>
+            <p className="text-slate-400 mt-1">
+              Welcome to your TimeWeave workspace
+              {isDemoMode && (
+                <Badge variant="secondary" className="ml-2">
+                  Demo Mode
+                </Badge>
+              )}
+            </p>
           </div>
           <div className="flex gap-2">
             <Link href="/demo">

app/graph/page.tsx

@@ -1,26 +1,31 @@
-import { createClient, isSupabaseConfigured } from "@/lib/supabase/server"
-import { redirect } from "next/navigation"
+"use client"
+
+import { useAuth } from "@/components/providers/auth-provider"
+import { useRouter } from "next/navigation"
+import { useEffect } from "react"
 import GraphDashboard from "@/components/graph-dashboard"
+import { LoadingSpinner } from "@/components/ui/loading-spinner"
+
+export default function GraphPage() {
+  const { user, loading } = useAuth()
+  const router = useRouter()
 
-export default async function GraphPage() {
-  // If Supabase is not configured, show setup message
-  if (!isSupabaseConfigured) {
+  useEffect(() => {
+    if (!loading && !user) {
+      router.push("/auth/login")
+    }
+  }, [user, loading, router])
+
+  if (loading) {
     return (
-      <div className="flex min-h-screen items-center justify-center bg-slate-950">
-        <h1 className="text-2xl font-bold mb-4 text-white">Connect Supabase to get started</h1>
+      <div className="min-h-screen bg-slate-950 flex items-center justify-center">
+        <LoadingSpinner size="lg" text="Loading knowledge graph..." />
       </div>
     )
   }
 
-  // Get the user from the server
-  const supabase = await createClient()
-  const {
-    data: { user },
-  } = await supabase.auth.getUser()
-
-  // If no user, redirect to login
   if (!user) {
-    redirect("/auth/login")
+    return null // Will redirect via useEffect
   }
 
   return (

app/layout.tsx

@@ -7,6 +7,7 @@ import Navigation from "@/components/navigation"
 import { Toaster } from "react-hot-toast"
 import { ErrorProvider } from "@/components/providers/error-provider"
 import { LoadingProvider } from "@/components/providers/loading-provider"
+import { AuthProvider } from "@/components/providers/auth-provider"
 import { ErrorBoundary } from "@/components/ui/error-boundary"
 import { NetworkStatus } from "@/components/ui/network-status"
 
@@ -36,7 +37,8 @@ html {
       <body>
         <ErrorProvider>
           <LoadingProvider>
-            <ErrorBoundary level="page" maxRetries={3} showErrorDetails={process.env.NODE_ENV === "development"}>
+            <AuthProvider>
+              <ErrorBoundary level="page" maxRetries={3} showErrorDetails={process.env.NODE_ENV === "development"}>
               <Navigation />
               <div className="pt-16 pb-16 md:pb-0">
                 {/* Network status banner */}
@@ -78,7 +80,8 @@ html {
                   }}
                 />
               </div>
-            </ErrorBoundary>
+              </ErrorBoundary>
+            </AuthProvider>
           </LoadingProvider>
         </ErrorProvider>
       </body>