Trying to add Auth

.gitignore

@@ -11,6 +11,7 @@ downloads/
 eggs/
 .eggs/
 lib/
+!FRRONTEEEND/lib/
 lib64/
 parts/
 sdist/

FRRONTEEEND/.env.example

@@ -0,0 +1,4 @@
+# Supabase Configuration
+# Get these values from your Supabase project settings: https://app.supabase.com/
+VITE_SUPABASE_URL=your_supabase_project_url
+VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

FRRONTEEEND/App.tsx

@@ -1,5 +1,5 @@
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { HeroGeometric } from './components/HeroGeometric';
 import ProblemSolution from './components/ProblemSolution';
 import KeyCapabilities from './components/KeyCapabilities';
@@ -9,9 +9,31 @@ import Footer from './components/Footer';
 import { BackgroundPaths } from './components/BackgroundPaths';
 import { Logo } from './components/Logo';
 import { ChatInterface } from './components/ChatInterface';
+import { AuthPage } from './components/AuthPage';
+import { AuthProvider, useAuth } from './lib/AuthContext';
+import { User, LogOut } from 'lucide-react';
 
-const App: React.FC = () => {
-  const [view, setView] = useState<'landing' | 'chat'>('landing');
+// Inner app component that uses auth context
+const AppContent: React.FC = () => {
+  const [view, setView] = useState<'landing' | 'chat' | 'auth'>('landing');
+  const { user, isAuthenticated, loading, signOut } = useAuth();
+  const [showUserMenu, setShowUserMenu] = useState(false);
+
+  // Handle launch console - redirect to auth if not logged in
+  const handleLaunchConsole = () => {
+    // Allow both authenticated and guest users
+    setView('chat');
+  };
+
+  // Show auth page
+  if (view === 'auth') {
+    return (
+      <AuthPage 
+        onSuccess={() => setView('chat')} 
+        onSkip={() => setView('chat')}
+      />
+    );
+  }
 
   if (view === 'chat') {
     return <ChatInterface onBack={() => setView('landing')} />;
@@ -28,16 +50,59 @@ const App: React.FC = () => {
           </span>
         </div>
         
-        <button 
-          onClick={() => setView('chat')}
-          className="px-5 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-sm font-medium transition-all"
-        >
-          Launch Console
-        </button>
+        <div className="flex items-center gap-3">
+          {/* User menu */}
+          {isAuthenticated ? (
+            <div className="relative">
+              <button
+                onClick={() => setShowUserMenu(!showUserMenu)}
+                className="flex items-center gap-2 px-3 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-sm transition-all"
+              >
+                <User className="w-4 h-4" />
+                <span className="hidden sm:block max-w-[120px] truncate">
+                  {user?.email?.split('@')[0]}
+                </span>
+              </button>
+              
+              {showUserMenu && (
+                <div className="absolute right-0 mt-2 w-48 bg-[#1a1a1a] border border-white/10 rounded-lg shadow-xl py-1">
+                  <div className="px-4 py-2 border-b border-white/10">
+                    <p className="text-xs text-white/50">Signed in as</p>
+                    <p className="text-sm text-white truncate">{user?.email}</p>
+                  </div>
+                  <button
+                    onClick={async () => {
+                      await signOut();
+                      setShowUserMenu(false);
+                    }}
+                    className="w-full flex items-center gap-2 px-4 py-2 text-sm text-red-400 hover:bg-white/5 transition-colors"
+                  >
+                    <LogOut className="w-4 h-4" />
+                    Sign Out
+                  </button>
+                </div>
+              )}
+            </div>
+          ) : (
+            <button
+              onClick={() => setView('auth')}
+              className="px-4 py-2 text-sm text-white/70 hover:text-white transition-colors"
+            >
+              Sign In
+            </button>
+          )}
+          
+          <button 
+            onClick={handleLaunchConsole}
+            className="px-5 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-sm font-medium transition-all"
+          >
+            Launch Console
+          </button>
+        </div>
       </nav>
 
       <main>
-        <HeroGeometric onChatClick={() => setView('chat')} />
+        <HeroGeometric onChatClick={handleLaunchConsole} />
         <TechStack />
         <ProblemSolution />
         <KeyCapabilities />
@@ -56,4 +121,13 @@ const App: React.FC = () => {
   );
 };
 
+// Wrap with AuthProvider
+const App: React.FC = () => {
+  return (
+    <AuthProvider>
+      <AppContent />
+    </AuthProvider>
+  );
+};
+
 export default App;

FRRONTEEEND/SUPABASE_SETUP.md

@@ -0,0 +1,120 @@
+# Supabase Authentication & Analytics Setup
+
+## Quick Setup (5 minutes)
+
+### 1. Create Supabase Project
+1. Go to [https://app.supabase.com/](https://app.supabase.com/)
+2. Click "New Project"
+3. Choose organization, name your project (e.g., "ds-agent-analytics")
+4. Set a strong database password (save it!)
+5. Choose a region close to your users
+6. Click "Create new project" and wait ~2 minutes
+
+### 2. Get Your API Keys
+1. Go to **Settings** → **API**
+2. Copy:
+   - **Project URL**: `https://xxxxx.supabase.co`
+   - **anon/public key**: `eyJhbGciOi...` (long string)
+
+### 3. Configure Environment
+Create `.env` file in `FRRONTEEEND/`:
+```bash
+VITE_SUPABASE_URL=https://your-project-id.supabase.co
+VITE_SUPABASE_ANON_KEY=your-anon-key-here
+```
+
+For HuggingFace Spaces, add these as **Secrets**:
+1. Go to your Space → Settings → Repository secrets
+2. Add `VITE_SUPABASE_URL` and `VITE_SUPABASE_ANON_KEY`
+
+### 4. Set Up Database Tables
+1. Go to **SQL Editor** in Supabase dashboard
+2. Copy contents of `supabase_schema.sql`
+3. Click "Run" to create tables and policies
+
+### 5. Enable Authentication Providers (Optional)
+
+#### Email (enabled by default)
+- Works out of the box
+
+#### Google OAuth
+1. Go to **Authentication** → **Providers** → **Google**
+2. Enable it
+3. Create OAuth credentials at [Google Cloud Console](https://console.cloud.google.com/apis/credentials)
+4. Add your Supabase callback URL: `https://your-project.supabase.co/auth/v1/callback`
+5. Copy Client ID and Secret to Supabase
+
+#### GitHub OAuth
+1. Go to **Authentication** → **Providers** → **GitHub**
+2. Enable it
+3. Create OAuth App at [GitHub Developer Settings](https://github.com/settings/developers)
+4. Add callback URL: `https://your-project.supabase.co/auth/v1/callback`
+5. Copy Client ID and Secret to Supabase
+
+## Features Included
+
+### Authentication
+- ✅ Email/Password sign up & sign in
+- ✅ Google OAuth (optional)
+- ✅ GitHub OAuth (optional)
+- ✅ Persistent sessions
+- ✅ Guest mode (can use without signing in)
+
+### Analytics Tracking
+- ✅ Per-query tracking (user, session, query text, success/failure)
+- ✅ Session tracking (start time, end time, query count)
+- ✅ Browser info capture
+- ✅ Anonymous user support
+
+### Dashboard Views (in Supabase)
+- `daily_active_users` - DAU metrics
+- `popular_queries` - Most common queries
+- `agent_usage_stats` - Which agents are used most
+
+## Viewing Analytics
+
+### Quick Stats in Supabase
+1. Go to **Table Editor**
+2. Select `usage_analytics` or `user_sessions`
+3. Use filters and sorting to analyze data
+
+### SQL Queries
+```sql
+-- Total users last 7 days
+SELECT COUNT(DISTINCT user_id) 
+FROM usage_analytics 
+WHERE created_at > NOW() - INTERVAL '7 days';
+
+-- Queries per day
+SELECT DATE(created_at), COUNT(*) 
+FROM usage_analytics 
+GROUP BY DATE(created_at) 
+ORDER BY 1 DESC;
+
+-- Success rate
+SELECT 
+  SUM(CASE WHEN success THEN 1 ELSE 0 END)::float / COUNT(*) * 100 as success_rate
+FROM usage_analytics;
+```
+
+## Free Tier Limits (Plenty for demos!)
+- 50,000 monthly active users
+- 500 MB database storage
+- 1 GB file storage
+- Unlimited API requests
+- 2 projects
+
+## Troubleshooting
+
+### "Invalid API key"
+- Check that your `.env` file has the correct values
+- Make sure you're using the `anon` key, not the `service_role` key
+
+### OAuth not working
+- Verify callback URL is correct in provider settings
+- Check that the provider is enabled in Supabase
+
+### Data not appearing
+- Check browser console for errors
+- Verify RLS policies are created (run the SQL schema)
+- Check Supabase logs for errors

FRRONTEEEND/components/AuthPage.tsx

@@ -0,0 +1,262 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Mail, Lock, User, Github, ArrowLeft, Loader2, AlertCircle, CheckCircle } from 'lucide-react';
+import { useAuth } from '../lib/AuthContext';
+import { Logo } from './Logo';
+
+interface AuthPageProps {
+  onSuccess?: () => void;
+  onSkip?: () => void;
+}
+
+export const AuthPage: React.FC<AuthPageProps> = ({ onSuccess, onSkip }) => {
+  const { signIn, signUp, signInWithGoogle, signInWithGithub } = useAuth();
+  const [mode, setMode] = useState<'signin' | 'signup'>('signin');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    setSuccess(null);
+
+    try {
+      if (mode === 'signup') {
+        const { error } = await signUp(email, password);
+        if (error) {
+          setError(error.message);
+        } else {
+          setSuccess('Check your email to confirm your account!');
+        }
+      } else {
+        const { error } = await signIn(email, password);
+        if (error) {
+          setError(error.message);
+        } else {
+          onSuccess?.();
+        }
+      }
+    } catch (err: any) {
+      setError(err.message || 'An error occurred');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleOAuthSignIn = async (provider: 'google' | 'github') => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const { error } = provider === 'google' ? await signInWithGoogle() : await signInWithGithub();
+      if (error) {
+        setError(error.message);
+      }
+    } catch (err: any) {
+      setError(err.message || 'An error occurred');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-[#0a0a0a] flex items-center justify-center p-4">
+      {/* Background gradient */}
+      <div className="absolute inset-0 overflow-hidden">
+        <div className="absolute -top-40 -right-40 w-80 h-80 bg-indigo-500/10 rounded-full blur-3xl" />
+        <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl" />
+      </div>
+
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="relative w-full max-w-md"
+      >
+        {/* Card */}
+        <div className="bg-white/[0.03] border border-white/10 rounded-2xl p-8 backdrop-blur-xl shadow-2xl">
+          {/* Logo */}
+          <div className="flex justify-center mb-6">
+            <Logo />
+          </div>
+
+          {/* Title */}
+          <div className="text-center mb-8">
+            <h1 className="text-2xl font-bold text-white mb-2">
+              {mode === 'signin' ? 'Welcome Back' : 'Create Account'}
+            </h1>
+            <p className="text-white/50 text-sm">
+              {mode === 'signin'
+                ? 'Sign in to access your data science workflows'
+                : 'Join us to start analyzing your data'}
+            </p>
+          </div>
+
+          {/* OAuth Buttons */}
+          <div className="space-y-3 mb-6">
+            <button
+              onClick={() => handleOAuthSignIn('google')}
+              disabled={loading}
+              className="w-full flex items-center justify-center gap-3 px-4 py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl transition-all text-white font-medium disabled:opacity-50"
+            >
+              <svg className="w-5 h-5" viewBox="0 0 24 24">
+                <path
+                  fill="currentColor"
+                  d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                />
+                <path
+                  fill="currentColor"
+                  d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                />
+                <path
+                  fill="currentColor"
+                  d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                />
+                <path
+                  fill="currentColor"
+                  d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                />
+              </svg>
+              Continue with Google
+            </button>
+
+            <button
+              onClick={() => handleOAuthSignIn('github')}
+              disabled={loading}
+              className="w-full flex items-center justify-center gap-3 px-4 py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl transition-all text-white font-medium disabled:opacity-50"
+            >
+              <Github className="w-5 h-5" />
+              Continue with GitHub
+            </button>
+          </div>
+
+          {/* Divider */}
+          <div className="relative mb-6">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-white/10"></div>
+            </div>
+            <div className="relative flex justify-center text-sm">
+              <span className="px-4 bg-[#0a0a0a] text-white/40">or continue with email</span>
+            </div>
+          </div>
+
+          {/* Form */}
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-white/70 mb-2">Email</label>
+              <div className="relative">
+                <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-white/30" />
+                <input
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="you@example.com"
+                  required
+                  className="w-full pl-11 pr-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-white/30 focus:outline-none focus:border-indigo-500/50 focus:ring-1 focus:ring-indigo-500/50 transition-all"
+                />
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-white/70 mb-2">Password</label>
+              <div className="relative">
+                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-white/30" />
+                <input
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="••••••••"
+                  required
+                  minLength={6}
+                  className="w-full pl-11 pr-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-white/30 focus:outline-none focus:border-indigo-500/50 focus:ring-1 focus:ring-indigo-500/50 transition-all"
+                />
+              </div>
+            </div>
+
+            {/* Error Message */}
+            <AnimatePresence>
+              {error && (
+                <motion.div
+                  initial={{ opacity: 0, y: -10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0 }}
+                  className="flex items-center gap-2 p-3 bg-red-500/10 border border-red-500/20 rounded-xl text-red-400 text-sm"
+                >
+                  <AlertCircle className="w-4 h-4 flex-shrink-0" />
+                  {error}
+                </motion.div>
+              )}
+            </AnimatePresence>
+
+            {/* Success Message */}
+            <AnimatePresence>
+              {success && (
+                <motion.div
+                  initial={{ opacity: 0, y: -10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0 }}
+                  className="flex items-center gap-2 p-3 bg-green-500/10 border border-green-500/20 rounded-xl text-green-400 text-sm"
+                >
+                  <CheckCircle className="w-4 h-4 flex-shrink-0" />
+                  {success}
+                </motion.div>
+              )}
+            </AnimatePresence>
+
+            {/* Submit Button */}
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full py-3 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white font-medium rounded-xl transition-all disabled:opacity-50 flex items-center justify-center gap-2"
+            >
+              {loading ? (
+                <Loader2 className="w-5 h-5 animate-spin" />
+              ) : mode === 'signin' ? (
+                'Sign In'
+              ) : (
+                'Create Account'
+              )}
+            </button>
+          </form>
+
+          {/* Toggle Mode */}
+          <div className="mt-6 text-center">
+            <p className="text-white/50 text-sm">
+              {mode === 'signin' ? "Don't have an account? " : 'Already have an account? '}
+              <button
+                onClick={() => {
+                  setMode(mode === 'signin' ? 'signup' : 'signin');
+                  setError(null);
+                  setSuccess(null);
+                }}
+                className="text-indigo-400 hover:text-indigo-300 font-medium"
+              >
+                {mode === 'signin' ? 'Sign Up' : 'Sign In'}
+              </button>
+            </p>
+          </div>
+
+          {/* Skip Button */}
+          {onSkip && (
+            <div className="mt-4 text-center">
+              <button
+                onClick={onSkip}
+                className="text-white/30 hover:text-white/50 text-sm transition-colors"
+              >
+                Continue without signing in →
+              </button>
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <p className="text-center text-white/30 text-xs mt-6">
+          By signing in, you agree to our Terms of Service and Privacy Policy
+        </p>
+      </motion.div>
+    </div>
+  );
+};

FRRONTEEEND/components/ChatInterface.tsx

@@ -1,10 +1,12 @@
 
 import React, { useState, useRef, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { Send, Plus, Search, Settings, MoreHorizontal, User, Bot, ArrowLeft, Paperclip, Sparkles, Trash2, X, Upload, Package, FileText, BarChart3, ChevronRight } from 'lucide-react';
+import { Send, Plus, Search, Settings, MoreHorizontal, User, Bot, ArrowLeft, Paperclip, Sparkles, Trash2, X, Upload, Package, FileText, BarChart3, ChevronRight, LogOut } from 'lucide-react';
 import { cn } from '../lib/utils';
 import { Logo } from './Logo';
 import ReactMarkdown from 'react-markdown';
+import { useAuth } from '../lib/AuthContext';
+import { trackQuery, incrementSessionQueries } from '../lib/supabase';
 
 interface Message {
   id: string;
@@ -106,6 +108,9 @@ export const ChatInterface: React.FC<{ onBack: () => void }> = ({ onBack }) => {
   const eventSourceRef = useRef<EventSource | null>(null);
   const processedAnalysisRef = useRef<Set<string>>(new Set()); // Track processed analysis_complete events
   
+  // Auth context for user tracking
+  const { user, isAuthenticated, dbSessionId, signOut } = useAuth();
+  
   const activeSession = sessions.find(s => s.id === activeSessionId) || sessions[0];
 
   // Persist sessions to localStorage whenever they change
@@ -409,11 +414,30 @@ export const ChatInterface: React.FC<{ onBack: () => void }> = ({ onBack }) => {
         formData.append('use_cache', 'false');  // Disabled to show multi-agent execution
         formData.append('max_iterations', '20');
         
+        // Track query start time for analytics
+        const queryStartTime = Date.now();
+        
         response = await fetch(`${API_URL}/run-async`, {
           method: 'POST',
           body: formData
         });
         
+        // 📊 Track analytics (non-blocking)
+        if (user || dbSessionId) {
+          trackQuery({
+            user_id: user?.id || 'anonymous',
+            user_email: user?.email,
+            session_id: sessionKey,
+            query: input || 'File analysis',
+            success: response.ok,
+            error_message: response.ok ? undefined : `HTTP ${response.status}`
+          }).catch(console.error);
+          
+          if (dbSessionId) {
+            incrementSessionQueries(dbSessionId).catch(console.error);
+          }
+        }
+        
         setUploadedFile(null);
       } else {
         // No file and no backend session - use simple chat endpoint
@@ -709,17 +733,46 @@ export const ChatInterface: React.FC<{ onBack: () => void }> = ({ onBack }) => {
             ))}
           </div>
 
-          <div className="mt-auto pt-4 border-t border-white/5 flex items-center justify-between px-2">
-            <button onClick={onBack} className="p-2 hover:bg-white/5 rounded-lg transition-colors text-white/40 hover:text-white">
-              <ArrowLeft className="w-5 h-5" />
-            </button>
-            <div className="flex gap-2">
-              <button className="p-2 hover:bg-white/5 rounded-lg transition-colors text-white/40 hover:text-white">
-                <Settings className="w-5 h-5" />
-              </button>
-              <button className="p-2 hover:bg-white/5 rounded-lg transition-colors text-white/40 hover:text-white">
-                <User className="w-5 h-5" />
+          <div className="mt-auto pt-4 border-t border-white/5">
+            {/* User info section */}
+            {isAuthenticated && user ? (
+              <div className="flex items-center gap-3 px-2 py-2 mb-2">
+                <div className="w-8 h-8 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-xs font-bold">
+                  {user.email?.[0]?.toUpperCase() || 'U'}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm text-white truncate">{user.email?.split('@')[0]}</p>
+                  <p className="text-xs text-white/40 truncate">{user.email}</p>
+                </div>
+                <button 
+                  onClick={() => signOut()}
+                  className="p-2 hover:bg-white/5 rounded-lg transition-colors text-white/40 hover:text-red-400"
+                  title="Sign Out"
+                >
+                  <LogOut className="w-4 h-4" />
+                </button>
+              </div>
+            ) : (
+              <div className="flex items-center gap-3 px-2 py-2 mb-2">
+                <div className="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center">
+                  <User className="w-4 h-4 text-white/50" />
+                </div>
+                <div className="flex-1">
+                  <p className="text-sm text-white/50">Guest User</p>
+                  <p className="text-xs text-white/30">Sign in to save history</p>
+                </div>
+              </div>
+            )}
+            
+            <div className="flex items-center justify-between px-2">
+              <button onClick={onBack} className="p-2 hover:bg-white/5 rounded-lg transition-colors text-white/40 hover:text-white">
+                <ArrowLeft className="w-5 h-5" />
               </button>
+              <div className="flex gap-2">
+                <button className="p-2 hover:bg-white/5 rounded-lg transition-colors text-white/40 hover:text-white">
+                  <Settings className="w-5 h-5" />
+                </button>
+              </div>
             </div>
           </div>
         </div>

FRRONTEEEND/lib/AuthContext.tsx

@@ -0,0 +1,140 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { User, Session, AuthChangeEvent } from '@supabase/supabase-js';
+import { supabase, startUserSession, endUserSession } from './supabase';
+
+interface AuthContextType {
+  user: User | null;
+  session: Session | null;
+  dbSessionId: string | null;
+  loading: boolean;
+  signIn: (email: string, password: string) => Promise<{ error: any }>;
+  signUp: (email: string, password: string) => Promise<{ error: any }>;
+  signInWithGoogle: () => Promise<{ error: any }>;
+  signInWithGithub: () => Promise<{ error: any }>;
+  signOut: () => Promise<void>;
+  isAuthenticated: boolean;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [user, setUser] = useState<User | null>(null);
+  const [session, setSession] = useState<Session | null>(null);
+  const [dbSessionId, setDbSessionId] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Get initial session
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      setSession(session);
+      setUser(session?.user ?? null);
+      setLoading(false);
+      
+      // Start tracking session if user is logged in
+      if (session?.user) {
+        startUserSession(session.user.id, session.user.email).then((dbSession) => {
+          if (dbSession) {
+            setDbSessionId(dbSession.id);
+          }
+        });
+      }
+    });
+
+    // Listen for auth changes
+    const { data: { subscription } } = supabase.auth.onAuthStateChange(
+      async (event: AuthChangeEvent, session) => {
+        setSession(session);
+        setUser(session?.user ?? null);
+        setLoading(false);
+
+        if (event === 'SIGNED_IN' && session?.user) {
+          // Start new tracking session
+          const dbSession = await startUserSession(session.user.id, session.user.email);
+          if (dbSession) {
+            setDbSessionId(dbSession.id);
+          }
+        } else if (event === 'SIGNED_OUT') {
+          // End tracking session
+          if (dbSessionId) {
+            await endUserSession(dbSessionId);
+            setDbSessionId(null);
+          }
+        }
+      }
+    );
+
+    // Cleanup on unmount
+    return () => {
+      subscription.unsubscribe();
+      // End session when component unmounts
+      if (dbSessionId) {
+        endUserSession(dbSessionId);
+      }
+    };
+  }, []);
+
+  const signIn = async (email: string, password: string) => {
+    const { error } = await supabase.auth.signInWithPassword({ email, password });
+    return { error };
+  };
+
+  const signUp = async (email: string, password: string) => {
+    const { error } = await supabase.auth.signUp({ email, password });
+    return { error };
+  };
+
+  const signInWithGoogle = async () => {
+    const { error } = await supabase.auth.signInWithOAuth({
+      provider: 'google',
+      options: {
+        redirectTo: window.location.origin
+      }
+    });
+    return { error };
+  };
+
+  const signInWithGithub = async () => {
+    const { error } = await supabase.auth.signInWithOAuth({
+      provider: 'github',
+      options: {
+        redirectTo: window.location.origin
+      }
+    });
+    return { error };
+  };
+
+  const signOut = async () => {
+    if (dbSessionId) {
+      await endUserSession(dbSessionId);
+      setDbSessionId(null);
+    }
+    await supabase.auth.signOut();
+  };
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        session,
+        dbSessionId,
+        loading,
+        signIn,
+        signUp,
+        signInWithGoogle,
+        signInWithGithub,
+        signOut,
+        isAuthenticated: !!user
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};

FRRONTEEEND/lib/supabase.ts

@@ -0,0 +1,170 @@
+import { createClient } from '@supabase/supabase-js';
+
+// Supabase configuration - these will be loaded from environment variables
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL || '';
+const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY || '';
+
+// Create Supabase client
+export const supabase = createClient(supabaseUrl, supabaseAnonKey);
+
+// Types for our analytics
+export interface UsageAnalytics {
+  id?: string;
+  user_id: string;
+  user_email?: string;
+  session_id: string;
+  query: string;
+  agent_used?: string;
+  tools_executed?: string[];
+  tokens_used?: number;
+  duration_ms?: number;
+  success: boolean;
+  error_message?: string;
+  created_at?: string;
+}
+
+export interface UserSession {
+  id?: string;
+  user_id: string;
+  user_email?: string;
+  started_at: string;
+  ended_at?: string;
+  queries_count: number;
+  browser_info?: string;
+}
+
+// Analytics functions
+export const trackQuery = async (analytics: Omit<UsageAnalytics, 'id' | 'created_at'>) => {
+  try {
+    const { data, error } = await supabase
+      .from('usage_analytics')
+      .insert([{
+        ...analytics,
+        created_at: new Date().toISOString()
+      }]);
+    
+    if (error) {
+      console.error('Failed to track query:', error);
+      return null;
+    }
+    return data;
+  } catch (err) {
+    console.error('Analytics tracking error:', err);
+    return null;
+  }
+};
+
+export const startUserSession = async (userId: string, userEmail?: string) => {
+  try {
+    const { data, error } = await supabase
+      .from('user_sessions')
+      .insert([{
+        user_id: userId,
+        user_email: userEmail,
+        started_at: new Date().toISOString(),
+        queries_count: 0,
+        browser_info: typeof navigator !== 'undefined' ? navigator.userAgent : null
+      }])
+      .select()
+      .single();
+    
+    if (error) {
+      console.error('Failed to start session:', error);
+      return null;
+    }
+    return data;
+  } catch (err) {
+    console.error('Session tracking error:', err);
+    return null;
+  }
+};
+
+export const endUserSession = async (sessionId: string) => {
+  try {
+    const { error } = await supabase
+      .from('user_sessions')
+      .update({ ended_at: new Date().toISOString() })
+      .eq('id', sessionId);
+    
+    if (error) {
+      console.error('Failed to end session:', error);
+    }
+  } catch (err) {
+    console.error('Session end error:', err);
+  }
+};
+
+export const incrementSessionQueries = async (sessionId: string) => {
+  try {
+    // Use RPC for atomic increment
+    const { error } = await supabase.rpc('increment_session_queries', {
+      session_id: sessionId
+    });
+    
+    if (error) {
+      // Fallback: fetch and update
+      const { data } = await supabase
+        .from('user_sessions')
+        .select('queries_count')
+        .eq('id', sessionId)
+        .single();
+      
+      if (data) {
+        await supabase
+          .from('user_sessions')
+          .update({ queries_count: (data.queries_count || 0) + 1 })
+          .eq('id', sessionId);
+      }
+    }
+  } catch (err) {
+    console.error('Failed to increment queries:', err);
+  }
+};
+
+// Get usage stats (for admin dashboard)
+export const getUsageStats = async (days: number = 7) => {
+  try {
+    const startDate = new Date();
+    startDate.setDate(startDate.getDate() - days);
+    
+    const { data, error } = await supabase
+      .from('usage_analytics')
+      .select('*')
+      .gte('created_at', startDate.toISOString())
+      .order('created_at', { ascending: false });
+    
+    if (error) {
+      console.error('Failed to get stats:', error);
+      return null;
+    }
+    return data;
+  } catch (err) {
+    console.error('Stats fetch error:', err);
+    return null;
+  }
+};
+
+// Get unique users count
+export const getUniqueUsersCount = async (days: number = 7) => {
+  try {
+    const startDate = new Date();
+    startDate.setDate(startDate.getDate() - days);
+    
+    const { data, error } = await supabase
+      .from('user_sessions')
+      .select('user_id')
+      .gte('started_at', startDate.toISOString());
+    
+    if (error) {
+      console.error('Failed to get unique users:', error);
+      return 0;
+    }
+    
+    // Count unique user IDs
+    const uniqueUsers = new Set(data?.map(d => d.user_id));
+    return uniqueUsers.size;
+  } catch (err) {
+    console.error('Unique users fetch error:', err);
+    return 0;
+  }
+};

FRRONTEEEND/package-lock.json

@@ -8,6 +8,7 @@
       "name": "data-science-agent",
       "version": "0.0.0",
       "dependencies": {
+        "@supabase/supabase-js": "^2.93.3",
         "clsx": "^2.1.1",
         "framer-motion": "^12.23.26",
         "lucide-react": "^0.562.0",
@@ -1113,6 +1114,86 @@
         "win32"
       ]
     },
+    "node_modules/@supabase/auth-js": {
+      "version": "2.93.3",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.93.3.tgz",
+      "integrity": "sha512-JdnkHZPKexVGSNONtu89RHU4bxz3X9kxx+f5ZnR5osoCIX+vs/MckwWRPZEybAEvlJXt5xjomDb3IB876QCxWQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/functions-js": {
+      "version": "2.93.3",
+      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.93.3.tgz",
+      "integrity": "sha512-qWO0gHNDm/5jRjROv/nv9L6sYabCWS1kzorOLUv3kqCwRvEJLYZga93ppJPrZwOgoZfXmJzvpjY8fODA4HQfBw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/postgrest-js": {
+      "version": "2.93.3",
+      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-2.93.3.tgz",
+      "integrity": "sha512-+iJ96g94skO2e4clsRSmEXg22NUOjh9BziapsJSAvnB1grOBf/BA8vGtCHjNOA+Z6lvKXL1jwBqcL9+fS1W/Lg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/realtime-js": {
+      "version": "2.93.3",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.93.3.tgz",
+      "integrity": "sha512-gnYpcFzwy8IkezRP4CDbT5I8jOsiOjrWrqTY1B+7jIriXsnpifmlM6RRjLBm9oD7OwPG0/WksniGPdKW67sXOA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/phoenix": "^1.6.6",
+        "@types/ws": "^8.18.1",
+        "tslib": "2.8.1",
+        "ws": "^8.18.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/storage-js": {
+      "version": "2.93.3",
+      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.93.3.tgz",
+      "integrity": "sha512-cw4qXiLrx3apglDM02Tx/w/stvFlrkKocC6vCvuFAz3JtVEl1zH8MUfDQDTH59kJAQVaVdbewrMWSoBob7REnA==",
+      "license": "MIT",
+      "dependencies": {
+        "iceberg-js": "^0.8.1",
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/supabase-js": {
+      "version": "2.93.3",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.93.3.tgz",
+      "integrity": "sha512-paUqEqdBI9ztr/4bbMoCgeJ6M8ZTm2fpfjSOlzarPuzYveKFM20ZfDZqUpi9CFfYagYj5Iv3m3ztUjaI9/tM1w==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/auth-js": "2.93.3",
+        "@supabase/functions-js": "2.93.3",
+        "@supabase/postgrest-js": "2.93.3",
+        "@supabase/realtime-js": "2.93.3",
+        "@supabase/storage-js": "2.93.3"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1210,13 +1291,17 @@
       "version": "22.19.3",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.3.tgz",
       "integrity": "sha512-1N9SBnWYOJTrNZCdh/yJE+t910Y128BoyY+zBLWhL3r0TYzlTmFdXrPwHL9DyFZmlEXNQQolTZh3KHV31QDhyA==",
-      "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/phoenix": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.7.tgz",
+      "integrity": "sha512-oN9ive//QSBkf19rfDv45M7eZPi0eEXylht2OLEXicu5b4KoQ1OzXIw+xDSGWxSxe1JmepRR/ZH283vsu518/Q==",
+      "license": "MIT"
+    },
     "node_modules/@types/react": {
       "version": "19.2.7",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz",
@@ -1233,6 +1318,15 @@
       "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
       "license": "MIT"
     },
+    "node_modules/@types/ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@ungap/structured-clone": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
@@ -1665,6 +1759,15 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/iceberg-js": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/iceberg-js/-/iceberg-js-0.8.1.tgz",
+      "integrity": "sha512-1dhVQZXhcHje7798IVM+xoo/1ZdVfzOMIc8/rgVSijRK38EDqOJoGula9N/8ZI5RD8QTxNQtK/Gozpr+qUqRRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/inline-style-parser": {
       "version": "0.2.7",
       "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.7.tgz",
@@ -2790,7 +2893,6 @@
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
       "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/unified": {
@@ -3015,6 +3117,27 @@
         }
       }
     },
+    "node_modules/ws": {
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
+      "integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",

FRRONTEEEND/package.json

@@ -9,13 +9,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
+    "@supabase/supabase-js": "^2.93.3",
     "clsx": "^2.1.1",
-    "tailwind-merge": "^3.4.0",
     "framer-motion": "^12.23.26",
     "lucide-react": "^0.562.0",
-    "react-markdown": "^9.0.1"
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "react-markdown": "^9.0.1",
+    "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
     "@types/node": "^22.14.0",

FRRONTEEEND/supabase_schema.sql

@@ -0,0 +1,124 @@
+-- =====================================================
+-- Supabase Database Schema for Data Science Agent Analytics
+-- =====================================================
+-- Run this in your Supabase SQL Editor: https://app.supabase.com/project/_/sql
+
+-- 1. Usage Analytics Table
+-- Tracks individual queries/requests made by users
+CREATE TABLE IF NOT EXISTS usage_analytics (
+    id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
+    user_id TEXT NOT NULL,
+    user_email TEXT,
+    session_id TEXT NOT NULL,
+    query TEXT NOT NULL,
+    agent_used TEXT,
+    tools_executed TEXT[],
+    tokens_used INTEGER,
+    duration_ms INTEGER,
+    success BOOLEAN DEFAULT true,
+    error_message TEXT,
+    created_at TIMESTAMPTZ DEFAULT NOW()
+);
+
+-- 2. User Sessions Table
+-- Tracks user sessions for engagement metrics
+CREATE TABLE IF NOT EXISTS user_sessions (
+    id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
+    user_id TEXT NOT NULL,
+    user_email TEXT,
+    started_at TIMESTAMPTZ DEFAULT NOW(),
+    ended_at TIMESTAMPTZ,
+    queries_count INTEGER DEFAULT 0,
+    browser_info TEXT
+);
+
+-- 3. Indexes for performance
+CREATE INDEX IF NOT EXISTS idx_usage_analytics_user_id ON usage_analytics(user_id);
+CREATE INDEX IF NOT EXISTS idx_usage_analytics_created_at ON usage_analytics(created_at);
+CREATE INDEX IF NOT EXISTS idx_usage_analytics_session_id ON usage_analytics(session_id);
+CREATE INDEX IF NOT EXISTS idx_user_sessions_user_id ON user_sessions(user_id);
+CREATE INDEX IF NOT EXISTS idx_user_sessions_started_at ON user_sessions(started_at);
+
+-- 4. Function to increment session query count atomically
+CREATE OR REPLACE FUNCTION increment_session_queries(session_id UUID)
+RETURNS VOID AS $$
+BEGIN
+    UPDATE user_sessions 
+    SET queries_count = queries_count + 1 
+    WHERE id = session_id;
+END;
+$$ LANGUAGE plpgsql;
+
+-- 5. Enable Row Level Security (RLS)
+ALTER TABLE usage_analytics ENABLE ROW LEVEL SECURITY;
+ALTER TABLE user_sessions ENABLE ROW LEVEL SECURITY;
+
+-- 6. RLS Policies - Allow authenticated users to insert their own data
+-- Policy for usage_analytics
+CREATE POLICY "Users can insert their own analytics" ON usage_analytics
+    FOR INSERT WITH CHECK (true);
+
+CREATE POLICY "Users can view their own analytics" ON usage_analytics
+    FOR SELECT USING (auth.uid()::text = user_id OR user_id = 'anonymous');
+
+-- Policy for user_sessions
+CREATE POLICY "Users can insert their own sessions" ON user_sessions
+    FOR INSERT WITH CHECK (true);
+
+CREATE POLICY "Users can update their own sessions" ON user_sessions
+    FOR UPDATE USING (auth.uid()::text = user_id OR user_id = 'anonymous');
+
+CREATE POLICY "Users can view their own sessions" ON user_sessions
+    FOR SELECT USING (auth.uid()::text = user_id OR user_id = 'anonymous');
+
+-- 7. Helpful Views for Analytics Dashboard
+
+-- Daily active users
+CREATE OR REPLACE VIEW daily_active_users AS
+SELECT 
+    DATE(created_at) as date,
+    COUNT(DISTINCT user_id) as unique_users,
+    COUNT(*) as total_queries
+FROM usage_analytics
+GROUP BY DATE(created_at)
+ORDER BY date DESC;
+
+-- Popular queries
+CREATE OR REPLACE VIEW popular_queries AS
+SELECT 
+    query,
+    COUNT(*) as count,
+    COUNT(DISTINCT user_id) as unique_users
+FROM usage_analytics
+WHERE created_at > NOW() - INTERVAL '7 days'
+GROUP BY query
+ORDER BY count DESC
+LIMIT 50;
+
+-- Agent usage stats
+CREATE OR REPLACE VIEW agent_usage_stats AS
+SELECT 
+    agent_used,
+    COUNT(*) as total_uses,
+    AVG(duration_ms) as avg_duration_ms,
+    SUM(CASE WHEN success THEN 1 ELSE 0 END)::float / COUNT(*) * 100 as success_rate
+FROM usage_analytics
+WHERE agent_used IS NOT NULL
+GROUP BY agent_used
+ORDER BY total_uses DESC;
+
+-- =====================================================
+-- SETUP INSTRUCTIONS:
+-- =====================================================
+-- 1. Go to https://app.supabase.com/ and create a new project
+-- 2. Go to Settings > API to get your Project URL and anon key
+-- 3. Create a .env file in FRRONTEEEND/ with:
+--    VITE_SUPABASE_URL=your_project_url
+--    VITE_SUPABASE_ANON_KEY=your_anon_key
+-- 4. Go to Authentication > Providers and enable:
+--    - Email (enabled by default)
+--    - Google (optional - need OAuth credentials)
+--    - GitHub (optional - need OAuth app)
+-- 5. Run this SQL in the SQL Editor
+-- 6. Done! Your analytics will start tracking automatically
+-- =====================================================