[dyad] Implement guest mode for builder - wrote 3 file(s), deleted 8 file(s)

src/App.tsx

@@ -6,10 +6,6 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { ThemeProvider } from "@/components/theme-provider";
 import Index from "./pages/Index";
 import NotFound from "./pages/NotFound";
-import Landing from "./pages/Landing";
-import Auth from "./pages/Auth";
-import Dashboard from "./pages/Dashboard";
-import VerifyEmail from "./pages/VerifyEmail";
 
 const queryClient = new QueryClient();
 
@@ -21,11 +17,7 @@ const App = () => (
         <Sonner />
         <BrowserRouter>
           <Routes>
-            <Route path="/" element={<Landing />} />
-            <Route path="/auth" element={<Auth />} />
-            <Route path="/verify-email" element={<VerifyEmail />} />
-            <Route path="/dashboard" element={<Dashboard />} />
-            <Route path="/builder" element={<Index />} />
+            <Route path="/" element={<Index />} />
             <Route path="*" element={<NotFound />} />
           </Routes>
         </BrowserRouter>

src/components/ProjectHistory.tsx

@@ -1,117 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { 
-  CheckCircle, 
-  Clock, 
-  XCircle, 
-  MoreHorizontal,
-  Play,
-  Eye
-} from "lucide-react";
-import { Project } from "@/types/project";
-import { useNavigate } from "react-router-dom";
-
-interface ProjectHistoryProps {
-  projects: Project[];
-  onViewProject: (project: Project) => void;
-}
-
-const ProjectHistory = ({ projects, onViewProject }: ProjectHistoryProps) => {
-  const navigate = useNavigate();
-  const [expandedProject, setExpandedProject] = useState<string | null>(null);
-
-  const getStatusIcon = (status: Project["status"]) => {
-    switch (status) {
-      case 'completed':
-        return <CheckCircle className="h-4 w-4 text-green-500" />;
-      case 'pending':
-        return <Clock className="h-4 w-4 text-blue-500" />;
-      case 'failed':
-        return <XCircle className="h-4 w-4 text-red-500" />;
-      default:
-        return <Clock className="h-4 w-4 text-gray-500" />;
-    }
-  };
-
-  const getStatusBadge = (status: Project["status"]) => {
-    switch (status) {
-      case 'completed':
-        return <Badge variant="secondary" className="bg-green-100 text-green-800">Completed</Badge>;
-      case 'pending':
-        return <Badge variant="secondary" className="bg-blue-100 text-blue-800">In Progress</Badge>;
-      case 'failed':
-        return <Badge variant="secondary" className="bg-red-100 text-red-800">Failed</Badge>;
-      default:
-        return <Badge variant="secondary" className="bg-gray-100 text-gray-800">Unknown</Badge>;
-    }
-  };
-
-  const formatDate = (date: Date) => {
-    return new Intl.DateTimeFormat("en-US", {
-      month: "short",
-      day: "numeric",
-      hour: "2-digit",
-      minute: "2-digit",
-    }).format(date);
-  };
-
-  return (
-    <div className="space-y-4">
-      {projects.map((project) => (
-        <Card key={project.id} className="border border-border">
-          <CardHeader className="pb-3">
-            <div className="flex justify-between items-start">
-              <div className="flex-1 min-w-0">
-                <CardTitle className="text-lg flex items-center gap-2">
-                  <span className="truncate">{project.name}</span>
-                  {getStatusIcon(project.status)}
-                </CardTitle>
-                <p className="text-sm text-muted-foreground mt-1">
-                  Created {formatDate(project.createdAt)}
-                </p>
-              </div>
-              <div className="flex items-center gap-2 ml-4">
-                {getStatusBadge(project.status)}
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={() => setExpandedProject(expandedProject === project.id ? null : project.id)}
-                >
-                  <MoreHorizontal className="h-4 w-4" />
-                </Button>
-              </div>
-            </div>
-          </CardHeader>
-          
-          {expandedProject === project.id && (
-            <CardContent className="pt-0 border-t">
-              <div className="flex gap-2 mt-3">
-                <Button 
-                  size="sm" 
-                  onClick={() => navigate(`/builder?projectId=${project.id}`)}
-                >
-                  <Play className="h-4 w-4 mr-2" />
-                  Continue
-                </Button>
-                <Button 
-                  variant="outline" 
-                  size="sm" 
-                  onClick={() => onViewProject(project)}
-                >
-                  <Eye className="h-4 w-4 mr-2" />
-                  View
-                </Button>
-              </div>
-            </CardContent>
-          )}
-        </Card>
-      ))}
-    </div>
-  );
-};
-
-export default ProjectHistory;

src/hooks/useAuth.ts

@@ -1,56 +0,0 @@
-import { useState, useEffect } from 'react'
-import { supabase } from '@/lib/supabaseClient'
-import { User } from '@supabase/supabase-js'
-
-export const useAuth = () => {
-  const [user, setUser] = useState<User | null>(null)
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    const getUser = async () => {
-      const { data: { user } } = await supabase.auth.getUser()
-      setUser(user)
-      setLoading(false)
-    }
-
-    getUser()
-
-    const { data: { subscription } } = supabase.auth.onAuthStateChange(
-      (_event, session) => {
-        setUser(session?.user || null)
-        setLoading(false)
-      }
-    )
-
-    return () => subscription.unsubscribe()
-  }, [])
-
-  const signIn = async (email: string, password: string) => {
-    const { data, error } = await supabase.auth.signInWithPassword({
-      email,
-      password,
-    })
-    return { data, error }
-  }
-
-  const signUp = async (email: string, password: string, firstName?: string, lastName?: string) => {
-    const { data, error } = await supabase.auth.signUp({
-      email,
-      password,
-      options: {
-        data: {
-          first_name: firstName,
-          last_name: lastName,
-        }
-      }
-    })
-    return { data, error }
-  }
-
-  const signOut = async () => {
-    const { error } = await supabase.auth.signOut()
-    return { error }
-  }
-
-  return { user, loading, signIn, signUp, signOut }
-}

src/hooks/useProjects.ts

@@ -1,253 +0,0 @@
-import { useState, useEffect } from 'react';
-import { supabase } from '@/lib/supabaseClient';
-import { Project, ProjectVersion } from '@/types/project';
-import { ChatMessage } from '@/services/gemini'
-
-export const useProjects = (userId: string | null) => {
-  const [projects, setProjects] = useState<Project[]>([]);
-  const [versions, setVersions] = useState<ProjectVersion[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (userId) {
-      fetchProjects();
-    } else {
-      setProjects([]);
-      setVersions([]);
-      setLoading(false);
-    }
-  }, [userId]);
-
-  const fetchProjects = async () => {
-    try {
-      setLoading(true);
-      const { data, error } = await supabase
-        .from('projects')
-        .select('*')
-        .eq('user_id', userId)
-        .order('updated_at', { ascending: false });
-
-      if (error) throw error;
-      
-      setProjects(data.map(project => ({
-        id: project.id,
-        userId: project.user_id,
-        name: project.name,
-        status: project.status,
-        prompt: project.prompt,
-        code: project.code,
-        createdAt: new Date(project.created_at),
-        updatedAt: new Date(project.updated_at),
-        messages: project.messages || []
-      })));
-    } catch (err: any) {
-      setError(err.message);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const fetchVersions = async (projectId: string) => {
-    if (!projectId) {
-      setVersions([]);
-      return;
-    }
-    
-    try {
-      const { data, error } = await supabase
-        .from('project_versions')
-        .select('*')
-        .eq('project_id', projectId)
-        .order('created_at', { ascending: false });
-
-      if (error) throw error;
-      
-      setVersions(data.map(version => ({
-        id: version.id,
-        projectId: version.project_id,
-        code: version.code,
-        messages: version.messages || [],
-        createdAt: version.created_at
-      })));
-    } catch (err: any) {
-      console.error('Error fetching versions:', err);
-    }
-  };
-
-  const createProjectWithFirstVersion = async (projectData: Omit<Project, 'id' | 'userId' | 'createdAt' | 'updatedAt'>) => {
-    if (!userId) throw new Error('User not authenticated');
-    
-    const { data, error } = await supabase
-      .from('projects')
-      .insert([
-        {
-          user_id: userId,
-          name: projectData.name,
-          status: projectData.status,
-          prompt: projectData.prompt,
-          code: projectData.code,
-          messages: projectData.messages
-        }
-      ])
-      .select()
-      .single();
-
-    if (error) throw error;
-    
-    return {
-      id: data.id,
-      userId: data.user_id,
-      name: data.name,
-      status: data.status,
-      prompt: data.prompt,
-      code: data.code,
-      createdAt: new Date(data.created_at),
-      updatedAt: new Date(data.updated_at),
-      messages: data.messages || []
-    };
-  };
-
-  const createEmptyProject = async (name: string) => {
-    if (!userId) throw new Error('User not authenticated');
-    
-    const { data, error } = await supabase
-      .from('projects')
-      .insert([
-        {
-          user_id: userId,
-          name,
-          status: 'completed',
-          prompt: '',
-          code: '<!DOCTYPE html><html><head><title>Empty Project</title></head><body><h1>New Project</h1></body></html>',
-          messages: []
-        }
-      ])
-      .select()
-      .single();
-
-    if (error) throw error;
-    
-    await fetchProjects();
-    
-    return {
-      id: data.id,
-      userId: data.user_id,
-      name: data.name,
-      status: data.status,
-      prompt: data.prompt,
-      code: data.code,
-      createdAt: new Date(data.created_at),
-      updatedAt: new Date(data.updated_at),
-      messages: data.messages || []
-    };
-  };
-
-  const createNewVersion = async (projectId: string, versionData: { code: string; messages: ChatMessage[] }) => {
-    const { data, error } = await supabase
-      .from('project_versions')
-      .insert([
-        {
-          project_id: projectId,
-          code: versionData.code,
-          messages: versionData.messages
-        }
-      ])
-      .select()
-      .single();
-
-    if (error) throw error;
-    
-    // Update the project with the new code and messages
-    const { data: projectData, error: projectError } = await supabase
-      .from('projects')
-      .update({
-        code: versionData.code,
-        messages: versionData.messages,
-        updated_at: new Date().toISOString()
-      })
-      .eq('id', projectId)
-      .select()
-      .single();
-
-    if (projectError) throw projectError;
-    
-    await fetchProjects();
-    await fetchVersions(projectId);
-    
-    return {
-      id: projectData.id,
-      userId: projectData.user_id,
-      name: projectData.name,
-      status: projectData.status,
-      prompt: projectData.prompt,
-      code: projectData.code,
-      createdAt: new Date(projectData.created_at),
-      updatedAt: new Date(projectData.updated_at),
-      messages: projectData.messages || []
-    };
-  };
-
-  const restoreVersion = async (projectId: string, versionId: string) => {
-    const { data, error } = await supabase
-      .from('project_versions')
-      .select('code, messages')
-      .eq('id', versionId)
-      .single();
-
-    if (error) throw error;
-
-    const { data: projectData, error: projectError } = await supabase
-      .from('projects')
-      .update({
-        code: data.code,
-        messages: data.messages,
-        updated_at: new Date().toISOString()
-      })
-      .eq('id', projectId)
-      .select()
-      .single();
-
-    if (projectError) throw projectError;
-    
-    await fetchProjects();
-    await fetchVersions(projectId);
-    
-    return {
-      id: projectData.id,
-      userId: projectData.user_id,
-      name: projectData.name,
-      status: projectData.status,
-      prompt: projectData.prompt,
-      code: projectData.code,
-      createdAt: new Date(projectData.created_at),
-      updatedAt: new Date(projectData.updated_at),
-      messages: projectData.messages || []
-    };
-  };
-
-  const deleteProject = async (projectId: string) => {
-    const { error } = await supabase
-      .from('projects')
-      .delete()
-      .eq('id', projectId);
-
-    if (error) throw error;
-    
-    await fetchProjects();
-  };
-
-  return {
-    projects,
-    versions,
-    loading,
-    error,
-    fetchProjects,
-    fetchVersions,
-    createProjectWithFirstVersion,
-    createEmptyProject,
-    createNewVersion,
-    restoreVersion,
-    deleteProject
-  };
-};

src/lib/supabaseClient.ts

@@ -1,6 +0,0 @@
-import { createClient } from '@supabase/supabase-js'
-
-const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
-const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY
-
-export const supabase = createClient(supabaseUrl, supabaseAnonKey)

src/pages/Auth.tsx

@@ -1,245 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
-import { useNavigate } from "react-router-dom"
-import { useAuth } from "@/hooks/useAuth"
-import { Sparkles, Mail, Lock, User, ArrowLeft } from "lucide-react"
-import { motion, AnimatePresence } from "framer-motion"
-import AnimatedBackground from "@/components/AnimatedBackground"
-import { Badge } from "@/components/ui/badge"
-
-const Auth = () => {
-  const [isSignUp, setIsSignUp] = useState(false)
-  const [email, setEmail] = useState("")
-  const [password, setPassword] = useState("")
-  const [firstName, setFirstName] = useState("")
-  const [lastName, setLastName] = useState("")
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState("")
-  const navigate = useNavigate()
-  const { signIn, signUp } = useAuth()
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    setLoading(true)
-    setError("")
-
-    try {
-      if (isSignUp) {
-        const { data, error } = await signUp(email, password, firstName, lastName)
-        if (error) throw error
-        
-        // If sign up successful but email not confirmed, redirect to verification page
-        if (data.user && !data.user.email_confirmed_at) {
-          navigate('/verify-email')
-        } else if (data.user) {
-          // If email already confirmed, go to dashboard
-          navigate('/dashboard')
-        }
-      } else {
-        const { error } = await signIn(email, password)
-        if (error) throw error
-        navigate('/dashboard')
-      }
-    } catch (err: any) {
-      setError(err.message || "An error occurred")
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  return (
-    <div className="min-h-screen w-full flex items-center justify-center p-4 relative overflow-hidden">
-      <AnimatedBackground />
-      
-      <motion.div 
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.5 }}
-        className="w-full max-w-md z-10"
-      >
-        <Card className="shadow-2xl backdrop-blur-xl border border-gray-800 bg-gray-900/80">
-          <CardHeader className="text-center pb-6">
-            <motion.div 
-              className="flex justify-center mb-4"
-              whileHover={{ scale: 1.1 }}
-              whileTap={{ scale: 0.9 }}
-            >
-              <div className="w-16 h-16 flex items-center justify-center">
-                <img src="/front-pilot.svg" alt="FrontPilot Logo" className="w-16 h-16" />
-              </div>
-            </motion.div>
-            <div className="flex items-center justify-center">
-              <CardTitle className="text-3xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-400">
-                {isSignUp ? "Create Account" : "Welcome Back"}
-              </CardTitle>
-              <span className="ml-3 text-[0.6rem] bg-yellow-500/20 text-yellow-500 font-bold px-1.5 py-0.5 rounded-full backdrop-blur-sm border border-yellow-500/30">BETA</span>
-            </div>
-            <CardDescription className="text-base text-gray-400">
-              {isSignUp 
-                ? "Join us to start building amazing websites." 
-                : "Sign in to continue to your dashboard."}
-            </CardDescription>
-          </CardHeader>
-          
-          <form onSubmit={handleSubmit}>
-            <CardContent className="space-y-5">
-              {error && (
-                <motion.div 
-                  initial={{ opacity: 0, x: -20 }}
-                  animate={{ opacity: 1, x: 0 }}
-                  className="text-red-400 text-sm p-3 bg-red-500/10 rounded-lg border border-red-500/20"
-                >
-                  {error}
-                </motion.div>
-              )}
-              
-              <AnimatePresence mode="wait">
-                {isSignUp && (
-                  <motion.div
-                    initial={{ opacity: 0, height: 0 }}
-                    animate={{ opacity: 1, height: "auto" }}
-                    exit={{ opacity: 0, height: 0 }}
-                    transition={{ duration: 0.3 }}
-                    className="grid grid-cols-2 gap-4"
-                  >
-                    <div className="space-y-2">
-                      <label htmlFor="firstName" className="text-sm font-medium text-gray-300 flex items-center">
-                        <User className="h-4 w-4 mr-2" />
-                        First Name
-                      </label>
-                      <Input 
-                        id="firstName" 
-                        type="text" 
-                        placeholder="John" 
-                        value={firstName} 
-                        onChange={(e) => setFirstName(e.target.value)} 
-                        required={isSignUp} 
-                        className="bg-gray-800/50 border-gray-700 text-white focus:ring-2 focus:ring-blue-500/50" 
-                      />
-                    </div>
-                    <div className="space-y-2">
-                      <label htmlFor="lastName" className="text-sm font-medium text-gray-300 flex items-center">
-                        <User className="h-4 w-4 mr-2" />
-                        Last Name
-                      </label>
-                      <Input 
-                        id="lastName" 
-                        type="text" 
-                        placeholder="Doe" 
-                        value={lastName} 
-                        onChange={(e) => setLastName(e.target.value)} 
-                        required={isSignUp} 
-                        className="bg-gray-800/50 border-gray-700 text-white focus:ring-2 focus:ring-blue-500/50" 
-                      />
-                    </div>
-                  </motion.div>
-                )}
-              </AnimatePresence>
-              
-              <div className="space-y-2">
-                <label htmlFor="email" className="text-sm font-medium text-gray-300 flex items-center">
-                  <Mail className="h-4 w-4 mr-2" />
-                  Email
-                </label>
-                <Input 
-                  id="email" 
-                  type="email" 
-                  placeholder="name@company.com" 
-                  value={email} 
-                  onChange={(e) => setEmail(e.target.value)} 
-                  required 
-                  className="bg-gray-800/50 border-gray-700 text-white focus:ring-2 focus:ring-blue-500/50" 
-                />
-              </div>
-              
-              <div className="space-y-2">
-                <label htmlFor="password" className="text-sm font-medium text-gray-300 flex items-center">
-                  <Lock className="h-4 w-4 mr-2" />
-                  Password
-                </label>
-                <Input 
-                  id="password" 
-                  type="password" 
-                  placeholder="••••••••" 
-                  value={password} 
-                  onChange={(e) => setPassword(e.target.value)} 
-                  required 
-                  className="bg-gray-800/50 border-gray-700 text-white focus:ring-2 focus:ring-blue-500/50" 
-                />
-              </div>
-            </CardContent>
-            
-            <CardFooter className="flex flex-col pt-4">
-              <motion.div
-                whileHover={{ scale: 1.02 }}
-                whileTap={{ scale: 0.98 }}
-                className="w-full"
-              >
-                <Button 
-                  type="submit" 
-                  className="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white hover:from-blue-700 hover:to-purple-600 py-6 text-lg shadow-lg hover:shadow-xl"
-                  disabled={loading}
-                >
-                  {loading ? (
-                    <motion.span
-                      initial={{ opacity: 0 }}
-                      animate={{ opacity: 1 }}
-                      className="flex items-center"
-                    >
-                      <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                      </svg>
-                      Processing...
-                    </motion.span>
-                  ) : (
-                    isSignUp ? "Create Account" : "Sign In"
-                  )}
-                </Button>
-              </motion.div>
-              
-              <motion.div
-                whileHover={{ scale: 1.02 }}
-                whileTap={{ scale: 0.98 }}
-                className="mt-4 w-full"
-              >
-                <Button 
-                  type="button" 
-                  variant="ghost" 
-                  onClick={() => setIsSignUp(!isSignUp)} 
-                  className="w-full text-gray-300 hover:text-white hover:bg-gray-800/50 py-5"
-                >
-                  {isSignUp 
-                    ? "Already have an account? Sign In" 
-                    : "Don't have an account? Sign Up"}
-                </Button>
-              </motion.div>
-              
-              <motion.div
-                whileHover={{ scale: 1.05 }}
-                whileTap={{ scale: 0.9 }}
-                className="mt-4 w-full"
-              >
-                <Button 
-                  type="button" 
-                  variant="outline" 
-                  onClick={() => navigate('/')} 
-                  className="w-full text-gray-300 hover:text-white hover:bg-gray-800/50 py-5"
-                >
-                  <ArrowLeft className="h-4 w-4 mr-2" />
-                  Back to Home
-                </Button>
-              </motion.div>
-            </CardFooter>
-          </form>
-        </Card>
-      </motion.div>
-    </div>
-  )
-}
-
-export default Auth

src/pages/Dashboard.tsx

@@ -1,528 +0,0 @@
-"use client"
-
-import { useState, useEffect } from "react"
-import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Input } from "@/components/ui/input"
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
-import { useNavigate } from "react-router-dom"
-import { useAuth } from "@/hooks/useAuth"
-import { useProjects } from "@/hooks/useProjects"
-import { supabase } from "@/lib/supabaseClient"
-import { Plus, FileText, Calendar, User, Loader2, LayoutDashboard, LogOut, Search, Grid3X3, List, Trash2, MoreHorizontal } from "lucide-react"
-import { Project } from "@/types/project"
-import { ModeToggle } from "@/components/theme-toggle"
-import { motion, AnimatePresence } from "framer-motion"
-import { Badge } from "@/components/ui/badge"
-import { 
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { useToast } from "@/hooks/use-toast"
-
-const Dashboard = () => {
-  const navigate = useNavigate()
-  const { user, signOut } = useAuth()
-  const { projects, loading, error, createEmptyProject, deleteProject } = useProjects(user?.id || null)
-  const [userProfile, setUserProfile] = useState<{ first_name: string; last_name: string } | null>(null)
-  const [profileLoading, setProfileLoading] = useState(true)
-  const [showNameDialog, setShowNameDialog] = useState(false)
-  const [prototypeName, setPrototypeName] = useState("")
-  const [searchTerm, setSearchTerm] = useState("")
-  const [viewMode, setViewMode] = useState<"grid" | "list">("grid")
-  const [projectToDelete, setProjectToDelete] = useState<string | null>(null)
-  const { toast } = useToast()
-
-  useEffect(() => {
-    if (user) {
-      fetchUserProfile()
-    }
-  }, [user])
-
-  const fetchUserProfile = async () => {
-    try {
-      const { data, error } = await supabase
-        .from('profiles')
-        .select('first_name, last_name')
-        .eq('id', user?.id)
-        .single()
-
-      if (error) throw error
-      setUserProfile(data)
-    } catch (err) {
-      console.error('Error fetching user profile:', err)
-    } finally {
-      setProfileLoading(false)
-    }
-  }
-
-  const handleCreatePrototype = () => {
-    setShowNameDialog(true)
-  }
-
-  const handleNameSubmit = async () => {
-    if (!prototypeName.trim()) return;
-    
-    try {
-      const newProject = await createEmptyProject(prototypeName);
-      setShowNameDialog(false);
-      setPrototypeName("");
-      navigate(`/builder?projectId=${newProject.id}`);
-    } catch (err) {
-      console.error('Error creating prototype:', err);
-      toast({
-        title: "Error",
-        description: "Failed to create prototype. Please try again.",
-        variant: "destructive",
-      });
-    }
-  }
-
-  const handleSignOut = async () => {
-    await signOut()
-    navigate('/')
-  }
-
-  const formatDate = (date: Date) => {
-    return new Intl.DateTimeFormat('en-US', {
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric'
-    }).format(date)
-  }
-
-  const handleDeleteProject = async (projectId: string) => {
-    try {
-      await deleteProject(projectId);
-      toast({
-        title: "Project deleted",
-        description: "Your prototype has been successfully deleted.",
-      });
-    } catch (err) {
-      console.error('Error deleting project:', err);
-      toast({
-        title: "Error",
-        description: "Failed to delete project. Please try again.",
-        variant: "destructive",
-      });
-    } finally {
-      setProjectToDelete(null);
-    }
-  }
-
-  const filteredProjects = projects.filter(project => 
-    project.name.toLowerCase().includes(searchTerm.toLowerCase())
-  )
-
-  if (!user) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-secondary/50">
-        <div className="text-center">
-          <Loader2 className="h-8 w-8 animate-spin mx-auto mb-4 text-primary" />
-          <p className="text-muted-foreground">Loading...</p>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="min-h-screen flex bg-background">
-      {/* Sidebar */}
-      <motion.aside 
-        initial={{ x: -300 }}
-        animate={{ x: 0 }}
-        transition={{ type: "spring", stiffness: 300, damping: 30 }}
-        className="w-64 flex-shrink-0 bg-card border-r flex flex-col shadow-xl"
-      >
-        <div className="h-16 border-b flex items-center px-6">
-          <motion.div 
-            className="flex items-center space-x-3"
-            whileHover={{ scale: 1.02 }}
-          >
-            <div className="w-10 h-10 flex items-center justify-center">
-              <img src="/front-pilot.svg" alt="FrontPilot Logo" className="w-10 h-10" />
-            </div>
-            <div className="flex items-center">
-              <span className="font-bold text-xl bg-clip-text text-transparent bg-gradient-to-r from-primary to-indigo-500">
-                FrontPilot
-              </span>
-              <span className="ml-2 text-[0.6rem] bg-yellow-500/20 text-yellow-500 font-bold px-1.5 py-0.5 rounded-full backdrop-blur-sm border border-yellow-500/30">BETA</span>
-            </div>
-          </motion.div>
-        </div>
-        
-        <nav className="flex-1 px-4 py-6 space-y-2">
-          <motion.div
-            whileHover={{ x: 5 }}
-            whileTap={{ scale: 0.98 }}
-          >
-            <Button variant="secondary" className="w-full justify-start py-6 text-base">
-              <LayoutDashboard className="mr-3 h-5 w-5" />
-              Dashboard
-            </Button>
-          </motion.div>
-          
-          <motion.div
-            whileHover={{ x: 5 }}
-            whileTap={{ scale: 0.98 }}
-          >
-            <Button 
-              variant="ghost" 
-              className="w-full justify-start py-6 text-base" 
-              onClick={handleCreatePrototype}
-            >
-              <Plus className="mr-3 h-5 w-5" />
-              New Prototype
-            </Button>
-          </motion.div>
-        </nav>
-        
-        <div className="mt-auto p-4 border-t">
-          <div className="flex items-center mb-4">
-            <div className="w-12 h-12 rounded-xl bg-secondary flex items-center justify-center mr-3 shadow-md">
-              <User className="h-6 w-6 text-muted-foreground" />
-            </div>
-            <div>
-              <p className="text-sm font-medium text-foreground">
-                {profileLoading ? "Loading..." : userProfile ? `${userProfile.first_name} ${userProfile.last_name}` : user.email?.split('@')[0]}
-              </p>
-              <p className="text-xs text-muted-foreground truncate max-w-[120px]">
-                {user.email}
-              </p>
-            </div>
-          </div>
-          
-          <motion.div
-            whileHover={{ scale: 1.02 }}
-            whileTap={{ scale: 0.98 }}
-          >
-            <Button 
-              variant="outline" 
-              className="w-full py-5" 
-              onClick={handleSignOut}
-            >
-              <LogOut className="mr-2 h-4 w-4" />
-              Sign Out
-            </Button>
-          </motion.div>
-        </div>
-      </motion.aside>
-
-      {/* Main Content */}
-      <main className="flex-1 overflow-hidden">
-        <header className="sticky top-0 z-10 border-b bg-background/80 backdrop-blur-xl">
-          <div className="container mx-auto px-6 py-4 flex items-center justify-between">
-            <div>
-              <h1 className="text-2xl font-bold text-foreground">My Prototypes</h1>
-              <p className="text-sm text-muted-foreground">Manage and create your web projects</p>
-            </div>
-            
-            <div className="flex items-center space-x-4">
-              <div className="relative">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                <Input
-                  type="text"
-                  placeholder="Search prototypes..."
-                  className="pl-10 pr-4 py-2 w-64"
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                />
-              </div>
-              
-              <div className="flex items-center space-x-2 bg-secondary rounded-lg p-1">
-                <Button
-                  variant={viewMode === "grid" ? "secondary" : "ghost"}
-                  size="icon"
-                  className="h-9 w-9"
-                  onClick={() => setViewMode("grid")}
-                >
-                  <Grid3X3 className="h-4 w-4" />
-                </Button>
-                <Button
-                  variant={viewMode === "list" ? "secondary" : "ghost"}
-                  size="icon"
-                  className="h-9 w-9"
-                  onClick={() => setViewMode("list")}
-                >
-                  <List className="h-4 w-4" />
-                </Button>
-              </div>
-              
-              <ModeToggle />
-            </div>
-          </div>
-        </header>
-
-        <div className="container mx-auto px-6 py-8">
-          {loading ? (
-            <div className="flex justify-center items-center h-96">
-              <Loader2 className="h-16 w-16 animate-spin text-primary" />
-            </div>
-          ) : error ? (
-            <motion.div 
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              className="text-center py-20"
-            >
-              <div className="mx-auto w-24 h-24 bg-red-500/10 rounded-full flex items-center justify-center mb-6">
-                <svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                </svg>
-              </div>
-              <h3 className="text-3xl font-bold text-foreground mb-4">Error Loading Prototypes</h3>
-              <p className="text-muted-foreground mb-8 max-w-md mx-auto">{error}</p>
-              <Button 
-                onClick={() => window.location.reload()} 
-                className="bg-primary text-primary-foreground hover:bg-primary/90 py-5 px-8 text-lg"
-              >
-                Retry
-              </Button>
-            </motion.div>
-          ) : filteredProjects.length === 0 ? (
-            searchTerm ? (
-              <motion.div 
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                className="text-center py-20"
-              >
-                <div className="mx-auto w-24 h-24 bg-secondary rounded-full flex items-center justify-center mb-6">
-                  <Search className="h-12 w-12 text-muted-foreground" />
-                </div>
-                <h3 className="text-2xl font-bold text-foreground mb-2">No prototypes found</h3>
-                <p className="text-muted-foreground mb-6">
-                  No prototypes match your search for "{searchTerm}"
-                </p>
-                <Button 
-                  onClick={() => setSearchTerm("")}
-                  variant="outline"
-                  className="py-5 px-6"
-                >
-                  Clear Search
-                </Button>
-              </motion.div>
-            ) : (
-              <motion.div 
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5 }}
-                className="text-center py-20 border-2 border-dashed rounded-2xl"
-              >
-                <div className="mx-auto w-24 h-24 bg-secondary rounded-full flex items-center justify-center mb-6">
-                  <FileText className="h-12 w-12 text-muted-foreground" />
-                </div>
-                <h3 className="text-3xl font-bold text-foreground mb-4">No prototypes yet</h3>
-                <p className="text-muted-foreground mb-8 max-w-md mx-auto">
-                  Get started by creating your first prototype. Describe what you want to build and our AI will generate it for you.
-                </p>
-                <motion.div
-                  whileHover={{ scale: 1.05 }}
-                  whileTap={{ scale: 0.95 }}
-                >
-                  <Button 
-                    onClick={handleCreatePrototype} 
-                    className="bg-gradient-to-r from-primary to-indigo-600 text-primary-foreground hover:from-primary/90 hover:to-indigo-700 py-6 px-8 text-lg shadow-xl hover:shadow-2xl"
-                  >
-                    <Plus className="h-5 w-5 mr-2" />
-                    Create Your First Prototype
-                  </Button>
-                </motion.div>
-              </motion.div>
-            )
-          ) : (
-            <motion.div 
-              className={viewMode === "grid" 
-                ? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" 
-                : "space-y-4"
-              }
-              layout
-            >
-              <AnimatePresence>
-                {filteredProjects.map((project) => (
-                  <motion.div
-                    key={project.id}
-                    layout
-                    initial={{ opacity: 0, scale: 0.8 }}
-                    animate={{ opacity: 1, scale: 1 }}
-                    exit={{ opacity: 0, scale: 0.8 }}
-                    transition={{ type: "spring", stiffness: 300, damping: 30 }}
-                    whileHover={{ y: -5 }}
-                    whileTap={{ scale: 0.98 }}
-                    className="w-full"
-                  >
-                    <Card 
-                      className={`cursor-pointer hover:shadow-2xl transition-all h-full border-2 ${
-                        viewMode === "list" ? "flex items-center" : ""
-                      }`}
-                      onClick={() => navigate(`/builder?projectId=${project.id}`)}
-                    >
-                      {viewMode === "list" ? (
-                        <>
-                          <div className="p-6 flex-shrink-0">
-                            <div className="w-3 h-3 rounded-full bg-primary"></div>
-                          </div>
-                          <div className="flex-1 p-6">
-                            <CardTitle className="flex items-center text-lg">
-                              {project.name}
-                            </CardTitle>
-                            <CardDescription className="flex items-center text-xs mt-2">
-                              <Calendar className="h-3 w-3 mr-1" />
-                              {formatDate(project.createdAt)}
-                            </CardDescription>
-                          </div>
-                          <div className="p-6 flex items-center space-x-2">
-                            <span className="text-sm text-muted-foreground capitalize px-3 py-1 bg-secondary rounded-full">
-                              {project.status}
-                            </span>
-                            <DropdownMenu>
-                              <DropdownMenuTrigger asChild>
-                                <Button variant="ghost" size="icon">
-                                  <MoreHorizontal className="h-4 w-4" />
-                                </Button>
-                              </DropdownMenuTrigger>
-                              <DropdownMenuContent align="end">
-                                <DropdownMenuItem 
-                                  className="text-red-600"
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    setProjectToDelete(project.id);
-                                  }}
-                                >
-                                  <Trash2 className="h-4 w-4 mr-2" />
-                                  Delete
-                                </DropdownMenuItem>
-                              </DropdownMenuContent>
-                            </DropdownMenu>
-                          </div>
-                        </>
-                      ) : (
-                        <>
-                          <CardHeader>
-                            <div className="flex justify-between items-start">
-                              <div>
-                                <CardTitle className="flex items-center">
-                                  <div className="w-3 h-3 rounded-full bg-primary mr-2"></div>
-                                  {project.name}
-                                </CardTitle>
-                                <CardDescription className="flex items-center text-xs pt-1">
-                                  <Calendar className="h-3 w-3 mr-1" />
-                                  {formatDate(project.createdAt)}
-                                </CardDescription>
-                              </div>
-                              <DropdownMenu>
-                                <DropdownMenuTrigger asChild>
-                                  <Button 
-                                    variant="ghost" 
-                                    size="icon"
-                                    onClick={(e) => e.stopPropagation()}
-                                  >
-                                    <MoreHorizontal className="h-4 w-4" />
-                                  </Button>
-                                </DropdownMenuTrigger>
-                                <DropdownMenuContent align="end">
-                                  <DropdownMenuItem 
-                                    className="text-red-600"
-                                    onClick={(e) => {
-                                      e.stopPropagation();
-                                      setProjectToDelete(project.id);
-                                    }}
-                                  >
-                                    <Trash2 className="h-4 w-4 mr-2" />
-                                    Delete
-                                  </DropdownMenuItem>
-                                </DropdownMenuContent>
-                              </DropdownMenu>
-                            </div>
-                          </CardHeader>
-                          <CardContent>
-                            <div className="flex items-center justify-between">
-                              <span className="text-sm text-muted-foreground capitalize px-3 py-1 bg-secondary rounded-full">
-                                {project.status}
-                              </span>
-                              <Button variant="ghost" size="sm">Open</Button>
-                            </div>
-                          </CardContent>
-                        </>
-                      )}
-                    </Card>
-                  </motion.div>
-                ))}
-              </AnimatePresence>
-            </motion.div>
-          )}
-        </div>
-      </main>
-
-      {/* Name Prototype Dialog */}
-      <Dialog open={showNameDialog} onOpenChange={setShowNameDialog}>
-        <DialogContent className="sm:max-w-md">
-          <DialogHeader>
-            <DialogTitle className="text-2xl">Name Your Prototype</DialogTitle>
-            <DialogDescription>
-              Give your new prototype a descriptive name to help you identify it later.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="py-4">
-            <Input
-              placeholder="e.g., Landing Page, Dashboard, E-commerce Site"
-              value={prototypeName}
-              onChange={(e) => setPrototypeName(e.target.value)}
-              onKeyPress={(e) => e.key === 'Enter' && handleNameSubmit()}
-              className="text-lg py-6"
-            />
-          </div>
-          <DialogFooter className="gap-3">
-            <Button 
-              variant="outline" 
-              onClick={() => setShowNameDialog(false)}
-              className="py-5 px-6"
-            >
-              Cancel
-            </Button>
-            <motion.div
-              whileHover={{ scale: 1.02 }}
-              whileTap={{ scale: 0.98 }}
-            >
-              <Button 
-                onClick={handleNameSubmit}
-                disabled={!prototypeName.trim()}
-                className="bg-gradient-to-r from-primary to-indigo-600 text-primary-foreground hover:from-primary/90 hover:to-indigo-700 py-5 px-6"
-              >
-                Create Prototype
-              </Button>
-            </motion.div>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      {/* Delete Confirmation Dialog */}
-      <Dialog open={!!projectToDelete} onOpenChange={() => setProjectToDelete(null)}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Delete Prototype</DialogTitle>
-            <DialogDescription>
-              Are you sure you want to delete this prototype? This action cannot be undone.
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter className="gap-3">
-            <Button 
-              variant="outline" 
-              onClick={() => setProjectToDelete(null)}
-            >
-              Cancel
-            </Button>
-            <Button 
-              variant="destructive" 
-              onClick={() => projectToDelete && handleDeleteProject(projectToDelete)}
-            >
-              Delete
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </div>
-  )
-}
-
-export default Dashboard

src/pages/Index.tsx

@@ -2,24 +2,16 @@
 
 import { useState, useEffect, useRef } from "react";
 import { Button } from "@/components/ui/button";
-import { Eye, Code, Download, History, FileText, Plus, Play, Save, GitBranch, Loader2, Wifi, WifiOff, MousePointer, ExternalLink } from "lucide-react";
-import { MadeWithDyad } from "@/components/made-with-dyad";
+import { Eye, Code, History, Plus, GitBranch, Loader2, WifiOff, MousePointer, ExternalLink, RefreshCw } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
 import { generateCode, modifyCode, ChatMessage } from "@/services/gemini";
-import { Project, ProjectFile } from "@/types/project";
+import { ProjectFile, ProjectVersion } from "@/types/project";
 import ChatInterface from "@/components/ChatInterface";
 import VersionsPanel from "@/components/VersionsPanel";
 import CodeEditor from "@/components/CodeEditor";
 import PreviewPanel from "@/components/PreviewPanel";
-import { DiffResult, generateDiff, generateDiffSummary } from "@/services/diffPatch";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { useNavigate, useSearchParams } from "react-router-dom";
-import { useAuth } from "@/hooks/useAuth";
-import { useProjects } from "@/hooks/useProjects";
+import { DiffResult, generateDiff } from "@/services/diffPatch";
 import DiffReviewModal from "@/components/DiffReviewModal";
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
 import { ModeToggle } from "@/components/theme-toggle";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import JSZip from "jszip";
@@ -41,22 +33,15 @@ const Index = () => {
   
   const [leftTab, setLeftTab] = useState("chat");
   const [rightTab, setRightTab] = useState("preview");
-  const [activeProject, setActiveProject] = useState<Project | null>(null);
   const { toast } = useToast();
   const [leftPanelWidth, setLeftPanelWidth] = useState(40);
   const containerRef = useRef<HTMLDivElement>(null);
   const isResizingRef = useRef(false);
-  const navigate = useNavigate();
-  const [searchParams] = useSearchParams();
-  const { user, loading: authLoading } = useAuth();
-  const { projects, versions, fetchVersions, createEmptyProject, createProjectWithFirstVersion, createNewVersion, restoreVersion } = useProjects(user?.id || null);
-  const projectIdFromUrl = searchParams.get('projectId');
-
+  
+  const [versions, setVersions] = useState<ProjectVersion[]>([]);
   const [pendingModification, setPendingModification] = useState<{ changes: ChangeProposal[]; newMessages: ChatMessage[] } | null>(null);
   const [isDiffModalOpen, setIsDiffModalOpen] = useState(false);
   const [diffToReview, setDiffToReview] = useState<DiffResult | null>(null);
-  const [showNameDialog, setShowNameDialog] = useState(false);
-  const [prototypeName, setPrototypeName] = useState("");
   const [isAIReady, setIsAIReady] = useState(false);
   const [selectedElement, setSelectedElement] = useState<{ tagName: string; description: string } | null>(null);
   
@@ -74,30 +59,7 @@ const Index = () => {
         variant: "destructive",
       });
     }
-  }, []);
-
-  useEffect(() => {
-    if (!user && !authLoading) {
-      navigate('/auth');
-    }
-  }, [user, authLoading, navigate]);
-
-  useEffect(() => {
-    if (projectIdFromUrl && projects.length > 0) {
-      const project = projects.find(p => p.id === projectIdFromUrl);
-      if (project && (!activeProject || activeProject.id !== project.id)) {
-        loadProject(project);
-      }
-    }
-  }, [projectIdFromUrl, projects]);
-
-  useEffect(() => {
-    if (activeProject) {
-      fetchVersions(activeProject.id);
-    } else {
-      fetchVersions('');
-    }
-  }, [activeProject]);
+  }, [toast]);
 
   useEffect(() => {
     const handleMessage = (event: MessageEvent) => {
@@ -221,7 +183,7 @@ const Index = () => {
     const newMessages = [...messages, userMessage];
     setMessages(newMessages);
     
-    if (activeProject) {
+    if (files.length > 0) {
       handleModificationRequest(messageContent, newMessages);
     } else {
       handleNewProjectRequest(prompt, newMessages);
@@ -251,16 +213,14 @@ const Index = () => {
         setActivePreviewFile(newFiles[0].name);
       }
 
-      const newProject = await createProjectWithFirstVersion({
-        name: prompt.substring(0, 30) + (prompt.length > 30 ? "..." : ""),
-        status: 'completed',
-        prompt,
+      const newVersion: ProjectVersion = {
+        id: new Date().toISOString(),
         code: JSON.stringify(newFiles),
-        messages: finalMessages as any
-      });
-      
-      setActiveProject(newProject);
-      navigate(`/builder?projectId=${newProject.id}`, { replace: true });
+        messages: finalMessages,
+        createdAt: new Date().toISOString(),
+      };
+      setVersions([newVersion]);
+
     } catch (error: any) {
       console.error("Error generating code:", error);
       toast({ 
@@ -306,7 +266,7 @@ const Index = () => {
   };
 
   const handleAcceptChanges = async () => {
-    if (!pendingModification || !activeProject) return;
+    if (!pendingModification) return;
 
     const { changes, newMessages } = pendingModification;
     const updatedFiles = [...files];
@@ -325,9 +285,14 @@ const Index = () => {
     setFiles(updatedFiles);
     setMessages(finalMessages);
     
-    await createNewVersion(activeProject.id, { code: JSON.stringify(updatedFiles), messages: finalMessages as any });
+    const newVersion: ProjectVersion = {
+      id: new Date().toISOString(),
+      code: JSON.stringify(updatedFiles),
+      messages: finalMessages,
+      createdAt: new Date().toISOString(),
+    };
+    setVersions(prev => [newVersion, ...prev]);
     
-    setActiveProject(prev => prev ? { ...prev, code: JSON.stringify(updatedFiles), messages: finalMessages as any } : null);
     setPendingModification(null);
     toast({ title: "Changes Accepted", description: "A new version has been saved." });
   };
@@ -345,52 +310,35 @@ const Index = () => {
     setIsDiffModalOpen(true);
   };
 
-  const handleRestoreVersion = async (versionId: string) => {
-    if (!activeProject) return;
-    try {
-      const restoredProject = await restoreVersion(activeProject.id, versionId);
-      if (restoredProject) {
-        loadProject(restoredProject);
+  const handleRestoreVersion = (versionId: string) => {
+    const versionToRestore = versions.find(v => v.id === versionId);
+    if (versionToRestore) {
+      try {
+        const parsedFiles = JSON.parse(versionToRestore.code);
+        setFiles(parsedFiles);
+        setMessages(versionToRestore.messages);
+        if (parsedFiles.length > 0) {
+          setActiveEditorFile(parsedFiles[0].name);
+          setActivePreviewFile(parsedFiles[0].name);
+        }
         toast({ title: "Version Restored", description: "The prototype has been restored to a previous version." });
+      } catch (error) {
+        toast({ title: "Error", description: "Failed to parse version data.", variant: "destructive" });
       }
-    } catch (error: any) {
-      toast({ title: "Error", description: `Failed to restore version: ${error.message}.`, variant: "destructive" });
     }
   };
 
-  const loadProject = (project: Project) => {
-    setActiveProject(project);
-    setMessages(project.messages || []);
-    try {
-      const parsedFiles = JSON.parse(project.code);
-      if (Array.isArray(parsedFiles) && parsedFiles.length > 0) {
-        setFiles(parsedFiles);
-        setActiveEditorFile(parsedFiles[0].name);
-        setActivePreviewFile(parsedFiles[0].name);
-      } else { throw new Error("Not an array"); }
-    } catch (e) {
-      const fallbackFiles = [{ name: 'index.html', code: project.code }];
-      setFiles(fallbackFiles);
-      setActiveEditorFile('index.html');
-      setActivePreviewFile('index.html');
-    }
+  const handleStartOver = () => {
+    setPrompt("");
+    setMessages([]);
+    setIsLoading(false);
+    setFiles([]);
+    setActiveEditorFile("");
+    setActivePreviewFile("");
+    setVersions([]);
     setPendingModification(null);
-    toast({ title: "Prototype loaded", description: `Loaded prototype: ${project.name}` });
-  };
-
-  const createNewPrototype = () => setShowNameDialog(true);
-
-  const handleNameSubmit = async () => {
-    if (!prototypeName.trim()) return;
-    try {
-      const newProject = await createEmptyProject(prototypeName);
-      setShowNameDialog(false);
-      setPrototypeName("");
-      navigate(`/builder?projectId=${newProject.id}`);
-      loadProject(newProject);
-    } catch (err) {
-      toast({ title: "Error", description: "Failed to create prototype.", variant: "destructive" });
-    }
+    setSelectedElement(null);
+    toast({ title: "Started Over", description: "The builder has been reset." });
   };
 
   const exportProjectAsZip = () => {
@@ -403,7 +351,7 @@ const Index = () => {
       zip.file(file.name, file.code);
     });
     zip.generateAsync({ type: "blob" }).then(content => {
-      saveAs(content, `${activeProject?.name || "project"}.zip`);
+      saveAs(content, `project.zip`);
     });
     toast({ title: "Project exported", description: "Your project has been downloaded as a zip file." });
   };
@@ -415,7 +363,6 @@ const Index = () => {
       return;
     }
   
-    // Create a Blob directly from the HTML content of the selected file
     const blob = new Blob([fileToOpen.code], { type: 'text/html' });
     const url = URL.createObjectURL(blob);
     window.open(url, '_blank');
@@ -464,10 +411,6 @@ const Index = () => {
     }
   };
 
-  if (authLoading) {
-    return <div className="min-h-screen flex items-center justify-center"><Loader2 className="h-8 w-8 animate-spin" /></div>;
-  }
-
   return (
     <div className="flex flex-col h-screen bg-background text-foreground">
       <header className="border-b bg-card shadow-sm">
@@ -490,9 +433,8 @@ const Index = () => {
               </div>
             )}
             <ModeToggle />
-            <Button size="sm" onClick={() => navigate('/dashboard')} variant="outline">Dashboard</Button>
-            <Button size="sm" onClick={createNewPrototype} className="bg-primary text-primary-foreground hover:bg-primary/90">
-              <Plus className="h-4 w-4 mr-1" /> New Prototype
+            <Button size="sm" onClick={handleStartOver} variant="outline">
+              <RefreshCw className="h-4 w-4 mr-1" /> Start Over
             </Button>
           </div>
         </div>
@@ -508,7 +450,7 @@ const Index = () => {
           </div>
           <div className="flex-1 overflow-hidden">
             {leftTab === 'chat' && <ChatInterface prompt={prompt} setPrompt={setPrompt} messages={messages} isLoading={isLoading} onSubmit={handleSubmit} pendingModification={pendingModification} onAccept={handleAcceptChanges} onReject={handleRejectChanges} onReview={handleReviewChanges} selectedElement={selectedElement} onClearSelectedElement={() => setSelectedElement(null)} />}
-            {leftTab === 'versions' && activeProject && <VersionsPanel versions={versions} onRestoreVersion={handleRestoreVersion} />}
+            {leftTab === 'versions' && <VersionsPanel versions={versions} onRestoreVersion={handleRestoreVersion} />}
           </div>
         </div>
 
@@ -531,18 +473,9 @@ const Index = () => {
             {rightTab === 'preview' && <PreviewPanel code={getPreviewCode()} ref={iframeRef} className={isSelectingElement ? "cursor-crosshair" : ""} />}
             {rightTab === 'code' && <CodeEditor files={files} activeFile={activeEditorFile} onFileChange={handleFileChange} onFileSelect={setActiveEditorFile} onExport={exportProjectAsZip} />}
           </div>
-          {activeProject && <div className="border-t bg-card px-4 py-2 flex items-center justify-between"><div className="flex items-center"><div className="w-2 h-2 rounded-full bg-primary mr-2"></div><span className="text-sm font-medium truncate max-w-xs">{activeProject.name}</span></div></div>}
         </div>
       </div>
       <DiffReviewModal isOpen={isDiffModalOpen} onClose={() => setIsDiffModalOpen(false)} diffResult={diffToReview} onApply={handleAcceptChanges} />
-      
-      <Dialog open={showNameDialog} onOpenChange={setShowNameDialog}>
-        <DialogContent>
-          <DialogHeader><DialogTitle>Name Your New Prototype</DialogTitle><DialogDescription>Give your new prototype a name to get started.</DialogDescription></DialogHeader>
-          <div className="py-4"><Input placeholder="e.g., My Awesome Landing Page" value={prototypeName} onChange={(e) => setPrototypeName(e.target.value)} onKeyPress={(e) => e.key === 'Enter' && handleNameSubmit()} /></div>
-          <DialogFooter><Button variant="outline" onClick={() => setShowNameDialog(false)}>Cancel</Button><Button onClick={handleNameSubmit} disabled={!prototypeName.trim()} className="bg-primary text-primary-foreground hover:bg-primary/90">Create Prototype</Button></DialogFooter>
-        </DialogContent>
-      </Dialog>
     </div>
   );
 };

src/pages/Landing.tsx

@@ -1,288 +0,0 @@
-"use client"
-
-import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
-import { Code, Zap, Users, ArrowRight } from "lucide-react"
-import { useNavigate } from "react-router-dom"
-import { useAuth } from "@/hooks/useAuth"
-import { motion } from "framer-motion"
-import AnimatedBackground from "@/components/AnimatedBackground"
-import { useEffect } from "react"
-
-const Landing = () => {
-  const navigate = useNavigate()
-  const { user, loading } = useAuth()
-
-  // Redirect logged-in users to dashboard
-  useEffect(() => {
-    if (user && !loading) {
-      navigate('/dashboard')
-    }
-  }, [user, loading, navigate])
-
-  const handleGetStarted = () => {
-    if (user) {
-      navigate('/dashboard')
-    } else {
-      navigate('/auth')
-    }
-  }
-
-  // Show loading state while checking auth
-  if (loading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-background">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
-          <p className="text-muted-foreground">Loading...</p>
-        </div>
-      </div>
-    )
-  }
-
-  const fadeInUp = {
-    initial: { opacity: 0, y: 30 },
-    animate: { opacity: 1, y: 0 },
-  }
-
-  return (
-    <div className="min-h-screen text-gray-100 overflow-x-hidden">
-      <AnimatedBackground />
-
-      {/* Navigation */}
-      <motion.nav 
-        initial={{ y: -100, opacity: 0 }}
-        animate={{ y: 0, opacity: 1 }}
-        transition={{ duration: 0.8, ease: "easeOut" }}
-        className="sticky top-0 z-50 border-b border-gray-800 bg-gray-900/80 backdrop-blur-xl"
-      >
-        <div className="container mx-auto px-4 py-3 flex items-center justify-between">
-          <motion.div 
-            className="flex items-center space-x-2"
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
-          >
-            <div className="w-10 h-10 flex items-center justify-center">
-              <img src="/front-pilot.svg" alt="FrontPilot Logo" className="w-10 h-10" />
-            </div>
-            <div className="flex items-center">
-              <span className="font-bold text-2xl bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-400">
-                FrontPilot
-              </span>
-              <span className="ml-2 text-[0.6rem] bg-yellow-500/20 text-yellow-500 font-bold px-1.5 py-0.5 rounded-full backdrop-blur-sm border border-yellow-500/30">BETA</span>
-            </div>
-          </motion.div>
-          <div className="flex items-center space-x-3">
-            <Button 
-              variant="ghost" 
-              onClick={() => navigate('/auth')}
-              className="text-gray-300 hover:text-white hover:bg-gray-800 transition-all"
-            >
-              Sign In
-            </Button>
-            <motion.div
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.95 }}
-            >
-              <Button 
-                onClick={handleGetStarted}
-                className="bg-gradient-to-r from-blue-600 to-purple-600 text-white hover:from-blue-700 hover:to-purple-600 text-lg py-6 px-8 shadow-xl hover:shadow-2xl"
-              >
-                Start Building Free
-              </Button>
-            </motion.div>
-          </div>
-        </div>
-      </motion.nav>
-
-      {/* Hero Section */}
-      <section className="relative py-20 md:py-32 overflow-hidden">
-        <div className="container mx-auto px-4 text-center max-w-5xl relative z-10">
-          <motion.div
-            variants={fadeInUp}
-            initial="initial"
-            animate="animate"
-            transition={{ duration: 0.8, ease: "easeOut" }}
-          >
-            <Badge className="mb-6 bg-gray-800 text-blue-400 border-gray-700 px-4 py-1 text-sm">
-              <Zap className="h-3.5 w-3.5 mr-1.5" />
-              AI-Powered Development
-            </Badge>
-          </motion.div>
-          
-          <motion.h1 
-            variants={fadeInUp}
-            initial="initial"
-            animate="animate"
-            transition={{ duration: 0.8, ease: "easeOut", delay: 0.1 }}
-            className="text-5xl md:text-7xl font-extrabold text-white mb-6 leading-tight"
-          >
-            Build Websites with <span className="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">Front Pilot</span>
-          </motion.h1>
-          
-          <motion.p 
-            variants={fadeInUp}
-            initial="initial"
-            animate="animate"
-            transition={{ duration: 0.8, ease: "easeOut", delay: 0.2 }}
-            className="text-xl md:text-2xl text-gray-300 mb-10 max-w-3xl mx-auto"
-          >
-            Create stunning websites in seconds with our AI-powered prototyping tool. 
-            No coding required - just describe what you want and watch it come to life.
-          </motion.p>
-          
-          <motion.div 
-            variants={fadeInUp}
-            initial="initial"
-            animate="animate"
-            transition={{ duration: 0.8, ease: "easeOut", delay: 0.3 }}
-            className="flex justify-center"
-          >
-            <motion.div
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.95 }}
-            >
-              <Button 
-                size="lg" 
-                onClick={handleGetStarted}
-                className="bg-gradient-to-r from-blue-600 to-purple-600 text-white hover:from-blue-700 hover:to-purple-600 text-lg py-6 px-8 shadow-xl hover:shadow-2xl"
-              >
-                Start Building Free
-              </Button>
-            </motion.div>
-          </motion.div>
-        </div>
-      </section>
-
-      {/* Features Section */}
-      <section className="py-28 relative">
-        <div className="container mx-auto px-4">
-          <motion.div 
-            initial={{ opacity: 0 }}
-            whileInView={{ opacity: 1 }}
-            viewport={{ once: true, amount: 0.3 }}
-            transition={{ duration: 0.7 }}
-            className="text-center mb-20"
-          >
-            <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
-              Powerful Features
-            </h2>
-            <p className="text-xl text-gray-300 max-w-2xl mx-auto">
-              Everything you need to create amazing websites without writing code
-            </p>
-          </motion.div>
-          
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-            {[
-              { 
-                icon: Code, 
-                title: "AI-Powered Creation", 
-                description: "Describe your website in plain English and our AI will generate a fully functional prototype in seconds.",
-                delay: 0.1,
-                upcoming: false
-              },
-              { 
-                icon: Zap, 
-                title: "Instant Prototyping", 
-                description: "Get a working prototype immediately. No more waiting for development cycles or design iterations.",
-                delay: 0.2,
-                upcoming: false
-              },
-              { 
-                icon: Users, 
-                title: "Team Collaboration", 
-                description: "Share projects with your team, get feedback, and iterate together in real-time.",
-                delay: 0.3,
-                upcoming: true
-              }
-            ].map((feature, index) => (
-              <motion.div
-                key={index}
-                initial={{ opacity: 0, y: 50 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true, amount: 0.3 }}
-                transition={{ duration: 0.5, delay: feature.delay }}
-                whileHover={{ y: -10 }}
-                className="relative bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-2xl p-6 overflow-hidden"
-              >
-                <div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 to-purple-500/5 opacity-0 transition-opacity duration-300 hover:opacity-100" />
-                <div className="relative z-10">
-                  <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-blue-500/10">
-                    <feature.icon className="h-6 w-6 text-blue-400" />
-                  </div>
-                  <div className="flex items-center mb-2">
-                    <h3 className="text-xl font-bold text-white">{feature.title}</h3>
-                    {feature.upcoming && (
-                      <Badge className="ml-2 text-xs bg-orange-500/20 text-orange-300 border border-orange-500/30">
-                        UPCOMING
-                      </Badge>
-                    )}
-                  </div>
-                  <p className="text-gray-300">{feature.description}</p>
-                </div>
-              </motion.div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* CTA Section */}
-      <section className="py-28 relative overflow-hidden">
-        <div className="container mx-auto px-4 text-center relative z-10">
-          <motion.h2 
-            initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true, amount: 0.3 }}
-            transition={{ duration: 0.7 }}
-            className="text-4xl md:text-5xl font-bold text-white mb-6"
-          >
-            Ready to build your next website?
-          </motion.h2>
-          <motion.p 
-            initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true, amount: 0.3 }}
-            transition={{ duration: 0.7, delay: 0.1 }}
-            className="text-xl text-gray-300 mb-10 max-w-2xl mx-auto"
-          >
-            Join thousands of creators who are building amazing websites with FrontPilot
-          </motion.p>
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true, amount: 0.3 }}
-            transition={{ duration: 0.7, delay: 0.2 }}
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
-          >
-            <Button 
-              size="lg" 
-              onClick={handleGetStarted}
-              className="bg-white text-gray-900 hover:bg-gray-100 text-lg py-6 px-10 shadow-2xl hover:shadow-3xl"
-            >
-              Get Started Free
-            </Button>
-          </motion.div>
-        </div>
-      </section>
-
-      {/* Footer */}
-      <footer className="py-12 bg-gray-900/50 border-t border-gray-800">
-        <div className="container mx-auto px-4 text-center">
-          <div className="flex items-center justify-center space-x-3 mb-6">
-            <div className="w-10 h-10 flex items-center justify-center">
-              <img src="/front-pilot.svg" alt="FrontPilot Logo" className="w-10 h-10" />
-            </div>
-            <span className="font-bold text-2xl text-white">FrontPilot</span>
-          </div>
-          <p className="mb-6 max-w-lg mx-auto text-gray-400">AI-powered rapid prototyping for modern web development</p>
-          <div className="text-sm text-gray-500">
-            &copy; {new Date().getFullYear()} Halopai Inc. All rights reserved.
-          </div>
-        </div>
-      </footer>
-    </div>
-  )
-}
-
-export default Landing

src/pages/VerifyEmail.tsx

@@ -1,159 +0,0 @@
-"use client"
-
-import { useState, useEffect } from "react"
-import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
-import { useNavigate } from "react-router-dom"
-import { useAuth } from "@/hooks/useAuth"
-import { motion } from "framer-motion"
-import AnimatedBackground from "@/components/AnimatedBackground"
-import { Badge } from "@/components/ui/badge"
-import { Mail, CheckCircle, RefreshCw } from "lucide-react"
-
-const VerifyEmail = () => {
-  const [isVerifying, setIsVerifying] = useState(false)
-  const [verificationStatus, setVerificationStatus] = useState<"pending" | "verified" | "error">("pending")
-  const navigate = useNavigate()
-  const { user, signOut } = useAuth()
-
-  useEffect(() => {
-    // If user is already verified, redirect to dashboard
-    if (user && user.email_confirmed_at) {
-      navigate('/dashboard')
-    }
-  }, [user, navigate])
-
-  const handleResendEmail = async () => {
-    setIsVerifying(true)
-    try {
-      // In a real app, you would call a function to resend verification email
-      // For now, we'll just simulate it
-      await new Promise(resolve => setTimeout(resolve, 1500))
-      setVerificationStatus("pending")
-    } catch (error) {
-      setVerificationStatus("error")
-    } finally {
-      setIsVerifying(false)
-    }
-  }
-
-  const handleSignOut = async () => {
-    await signOut()
-    navigate('/auth')
-  }
-
-  return (
-    <div className="min-h-screen w-full flex items-center justify-center p-4 relative overflow-hidden">
-      <AnimatedBackground />
-      
-      <motion.div 
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.5 }}
-        className="w-full max-w-md z-10"
-      >
-        <Card className="shadow-2xl backdrop-blur-xl border border-gray-800 bg-gray-900/80">
-          <CardHeader className="text-center pb-6">
-            <motion.div 
-              className="flex justify-center mb-4"
-              whileHover={{ scale: 1.1 }}
-              whileTap={{ scale: 0.9 }}
-            >
-              <div className="w-16 h-16 flex items-center justify-center">
-                <img src="/front-pilot.svg" alt="FrontPilot Logo" className="w-16 h-16" />
-              </div>
-            </motion.div>
-            <div className="flex items-center justify-center">
-              <CardTitle className="text-3xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-400">
-                Verify Your Email
-              </CardTitle>
-              <span className="ml-3 text-[0.6rem] bg-yellow-500/20 text-yellow-500 font-bold px-1.5 py-0.5 rounded-full backdrop-blur-sm border border-yellow-500/30">BETA</span>
-            </div>
-            <CardDescription className="text-base text-gray-400">
-              Please check your email for a verification link
-            </CardDescription>
-          </CardHeader>
-          
-          <CardContent className="space-y-6">
-            <div className="text-center">
-              <div className="mx-auto w-20 h-20 bg-blue-500/10 rounded-full flex items-center justify-center mb-4">
-                <Mail className="h-10 w-10 text-blue-400" />
-              </div>
-              <p className="text-gray-300 mb-4">
-                We've sent a verification email to <span className="font-medium text-white">{user?.email}</span>
-              </p>
-              <p className="text-sm text-gray-400">
-                Please click the link in the email to verify your account and activate your FrontPilot access.
-              </p>
-            </div>
-            
-            <div className="bg-gray-800/50 border border-gray-700 rounded-lg p-4">
-              <h3 className="font-medium text-gray-200 mb-2 flex items-center">
-                <CheckCircle className="h-4 w-4 mr-2 text-green-400" />
-                Didn't receive the email?
-              </h3>
-              <ul className="text-sm text-gray-400 space-y-1">
-                <li>• Check your spam or junk folder</li>
-                <li>• Wait a few minutes for delivery</li>
-                <li>• Ensure you entered the correct email address</li>
-              </ul>
-            </div>
-          </CardContent>
-          
-          <CardFooter className="flex flex-col pt-4">
-            <motion.div
-              whileHover={{ scale: 1.02 }}
-              whileTap={{ scale: 0.98 }}
-              className="w-full"
-            >
-              <Button 
-                onClick={() => window.location.reload()} 
-                className="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white hover:from-blue-700 hover:to-purple-600 py-6 text-lg shadow-lg hover:shadow-xl"
-              >
-                I've Verified My Email - Continue
-              </Button>
-            </motion.div>
-            
-            <motion.div
-              whileHover={{ scale: 1.02 }}
-              whileTap={{ scale: 0.98 }}
-              className="mt-4 w-full"
-            >
-              <Button 
-                variant="outline" 
-                onClick={handleResendEmail}
-                disabled={isVerifying}
-                className="w-full border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white hover:border-gray-500 py-5"
-              >
-                {isVerifying ? (
-                  <>
-                    <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
-                    Sending...
-                  </>
-                ) : (
-                  "Resend Verification Email"
-                )}
-              </Button>
-            </motion.div>
-            
-            <motion.div
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.9 }}
-              className="mt-4 w-full"
-            >
-              <Button 
-                variant="ghost" 
-                onClick={handleSignOut}
-                className="w-full text-gray-400 hover:text-white hover:bg-gray-800/50 py-5"
-              >
-                Sign Out
-              </Button>
-            </motion.div>
-          </CardFooter>
-        </Card>
-      </motion.div>
-    </div>
-  )
-}
-
-export default VerifyEmail

src/types/project.ts

@@ -3,28 +3,14 @@ export interface ProjectFile {
   code: string;
 }
 
-export interface Project {
-  id: string;
-  userId: string;
-  name: string;
-  status: 'pending' | 'completed' | 'failed';
-  prompt: string;
-  code: string;
-  createdAt: Date;
-  updatedAt: Date;
-  messages: ChatMessage[];
+export interface ChatMessage {
+  role: 'user' | 'assistant';
+  content: string;
 }
 
 export interface ProjectVersion {
   id: string;
-  projectId: string;
-  code: string;
+  code: string; // This will be a JSON string of ProjectFile[]
   messages: ChatMessage[];
   createdAt: string;
-  // Removed 'name' property as it doesn't exist in the database schema
-}
-
-export interface ChatMessage {
-  role: 'user' | 'assistant';
-  content: string;
 }