[BIG UPDATE 🚀] New generation files

app/api/ask/route.ts

@@ -10,12 +10,12 @@ import {
   FOLLOW_UP_SYSTEM_PROMPT,
   INITIAL_SYSTEM_PROMPT,
   MAX_REQUESTS_PER_IP,
-  NEW_PAGE_END,
-  NEW_PAGE_START,
+  NEW_FILE_END,
+  NEW_FILE_START,
   REPLACE_END,
   SEARCH_START,
-  UPDATE_PAGE_START,
-  UPDATE_PAGE_END,
+  UPDATE_FILE_START,
+  UPDATE_FILE_END,
   PROMPT_FOR_PROJECT_NAME,
 } from "@/lib/prompts";
 import { calculateMaxTokens, estimateInputTokens, getProviderSpecificConfig } from "@/lib/max-tokens";
@@ -27,6 +27,7 @@ import { getBestProvider } from "@/lib/best-provider";
 // import { rewritePrompt } from "@/lib/rewrite-prompt";
 import { COLORS } from "@/lib/utils";
 import { templates } from "@/lib/templates";
+import { injectDeepSiteBadge, isIndexPage } from "@/lib/inject-badge";
 
 const ipAddresses = new Map();
 
@@ -192,11 +193,9 @@ export async function POST(request: NextRequest) {
           );
         }
       } finally {
-        // Ensure the writer is always closed, even if already closed
         try {
           await writer?.close();
         } catch {
-          // Ignore errors when closing the writer as it might already be closed
         }
       }
     })();
@@ -216,7 +215,6 @@ export async function POST(request: NextRequest) {
 }
 
 export async function PUT(request: NextRequest) {
-  console.log("PUT request received");
   const user = await isAuthenticated();
   if (user instanceof NextResponse || !user) {
     return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
@@ -225,7 +223,7 @@ export async function PUT(request: NextRequest) {
   const authHeaders = await headers();
 
   const body = await request.json();
-  const { prompt, previousPrompts, provider, selectedElementHtml, model, pages, files, repoId: repoIdFromBody, isNew, enhancedSettings } =
+  const { prompt, provider, selectedElementHtml, model, pages, files, repoId: repoIdFromBody, isNew } =
     body;
 
   let repoId = repoIdFromBody;
@@ -301,7 +299,6 @@ export async function PUT(request: NextRequest) {
     const systemPrompt = FOLLOW_UP_SYSTEM_PROMPT + (isNew ? PROMPT_FOR_PROJECT_NAME : "");
     const userContext = "You are modifying the HTML file based on the user's request.";
     
-    // Send all pages without filtering
     const allPages = pages || [];
     const pagesContext = allPages
       .map((p: Page) => `- ${p.path}\n${p.html}`)
@@ -368,18 +365,18 @@ export async function PUT(request: NextRequest) {
       let newHtml = "";
       const updatedPages = [...(pages || [])];
 
-      const updatePageRegex = new RegExp(`${UPDATE_PAGE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}([^\\s]+)\\s*${UPDATE_PAGE_END.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}([\\s\\S]*?)(?=${UPDATE_PAGE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}|${NEW_PAGE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}|$)`, 'g');
-      let updatePageMatch;
+      const updateFileRegex = new RegExp(`${UPDATE_FILE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}([^\\s]+)\\s*${UPDATE_FILE_END.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}([\\s\\S]*?)(?=${UPDATE_FILE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}|${NEW_FILE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}|$)`, 'g');
+      let updateFileMatch;
       
-      while ((updatePageMatch = updatePageRegex.exec(chunk)) !== null) {
-        const [, pagePath, pageContent] = updatePageMatch;
+      while ((updateFileMatch = updateFileRegex.exec(chunk)) !== null) {
+        const [, filePath, fileContent] = updateFileMatch;
         
-        const pageIndex = updatedPages.findIndex(p => p.path === pagePath);
+        const pageIndex = updatedPages.findIndex(p => p.path === filePath);
         if (pageIndex !== -1) {
           let pageHtml = updatedPages[pageIndex].html;
           
-          let processedContent = pageContent;
-          const htmlMatch = pageContent.match(/```html\s*([\s\S]*?)\s*```/);
+          let processedContent = fileContent;
+          const htmlMatch = fileContent.match(/```html\s*([\s\S]*?)\s*```/);
           if (htmlMatch) {
             processedContent = htmlMatch[1];
           }
@@ -438,40 +435,48 @@ export async function PUT(request: NextRequest) {
 
           updatedPages[pageIndex].html = pageHtml;
           
-          if (pagePath === '/' || pagePath === '/index' || pagePath === 'index') {
+          if (filePath === '/' || filePath === '/index' || filePath === 'index' || filePath === 'index.html') {
             newHtml = pageHtml;
           }
         }
       }
 
-      const newPageRegex = new RegExp(`${NEW_PAGE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}([^\\s]+)\\s*${NEW_PAGE_END.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}([\\s\\S]*?)(?=${UPDATE_PAGE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}|${NEW_PAGE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}|$)`, 'g');
-      let newPageMatch;
+      const newFileRegex = new RegExp(`${NEW_FILE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}([^\\s]+)\\s*${NEW_FILE_END.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}([\\s\\S]*?)(?=${UPDATE_FILE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}|${NEW_FILE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}|$)`, 'g');
+      let newFileMatch;
       
-      while ((newPageMatch = newPageRegex.exec(chunk)) !== null) {
-        const [, pagePath, pageContent] = newPageMatch;
+      while ((newFileMatch = newFileRegex.exec(chunk)) !== null) {
+        const [, filePath, fileContent] = newFileMatch;
+        
+        let fileData = fileContent;
+        // Try to extract content from code blocks
+        const htmlMatch = fileContent.match(/```html\s*([\s\S]*?)\s*```/);
+        const cssMatch = fileContent.match(/```css\s*([\s\S]*?)\s*```/);
+        const jsMatch = fileContent.match(/```javascript\s*([\s\S]*?)\s*```/);
         
-        let pageHtml = pageContent;
-        const htmlMatch = pageContent.match(/```html\s*([\s\S]*?)\s*```/);
         if (htmlMatch) {
-          pageHtml = htmlMatch[1];
+          fileData = htmlMatch[1];
+        } else if (cssMatch) {
+          fileData = cssMatch[1];
+        } else if (jsMatch) {
+          fileData = jsMatch[1];
         }
         
-        const existingPageIndex = updatedPages.findIndex(p => p.path === pagePath);
+        const existingFileIndex = updatedPages.findIndex(p => p.path === filePath);
         
-        if (existingPageIndex !== -1) {
-          updatedPages[existingPageIndex] = {
-            path: pagePath,
-            html: pageHtml.trim()
+        if (existingFileIndex !== -1) {
+          updatedPages[existingFileIndex] = {
+            path: filePath,
+            html: fileData.trim()
           };
         } else {
           updatedPages.push({
-            path: pagePath,
-            html: pageHtml.trim()
+            path: filePath,
+            html: fileData.trim()
           });
         }
       }
 
-      if (updatedPages.length === pages?.length && !chunk.includes(UPDATE_PAGE_START)) {
+      if (updatedPages.length === pages?.length && !chunk.includes(UPDATE_FILE_START)) {
         let position = 0;
         let moreBlocks = true;
 
@@ -525,7 +530,6 @@ export async function PUT(request: NextRequest) {
           position = replaceEndIndex + REPLACE_END.length;
         }
 
-        // Update the main HTML if it's the index page
         const mainPageIndex = updatedPages.findIndex(p => p.path === '/' || p.path === '/index' || p.path === 'index');
         if (mainPageIndex !== -1) {
           updatedPages[mainPageIndex].html = newHtml;
@@ -534,12 +538,23 @@ export async function PUT(request: NextRequest) {
 
       const files: File[] = [];
       updatedPages.forEach((page: Page) => {
-        const file = new File([page.html], page.path, { type: "text/html" });
+        let mimeType = "text/html";
+        if (page.path.endsWith(".css")) {
+          mimeType = "text/css";
+        } else if (page.path.endsWith(".js")) {
+          mimeType = "text/javascript";
+        } else if (page.path.endsWith(".json")) {
+          mimeType = "application/json";
+        }
+        const content = (mimeType === "text/html" && isIndexPage(page.path)) 
+          ? injectDeepSiteBadge(page.html) 
+          : page.html;
+        const file = new File([content], page.path, { type: mimeType });
         files.push(file);
       });
 
       if (isNew) {
-        const projectName = chunk.match(/<<<<<<< PROJECT_NAME_START ([\s\S]*?) >>>>>>> PROJECT_NAME_END/)?.[1]?.trim();
+        const projectName = chunk.match(/<<<<<<< PROJECT_NAME_START\s*([\s\S]*?)\s*>>>>>>> PROJECT_NAME_END/)?.[1]?.trim();
         const formattedTitle = projectName?.toLowerCase()
           .replace(/[^a-z0-9]+/g, "-")
           .split("-")

app/api/me/projects/[namespace]/[repoId]/route.ts

@@ -108,7 +108,7 @@ export async function GET(
     const allowedFilesExtensions = ["jpg", "jpeg", "png", "gif", "svg", "webp", "avif", "heic", "heif", "ico", "bmp", "tiff", "tif", "mp4", "webm", "ogg", "avi", "mov", "mp3", "wav", "ogg", "aac", "m4a"];
     
     for await (const fileInfo of listFiles({repo, accessToken: user.token as string})) {
-      if (fileInfo.path.endsWith(".html")) {
+      if (fileInfo.path.endsWith(".html") || fileInfo.path.endsWith(".css") || fileInfo.path.endsWith(".js")) {
         const blob = await downloadFile({ repo, accessToken: user.token as string, path: fileInfo.path, raw: true });
         const html = await blob?.text();
         if (!html) {
@@ -126,10 +126,20 @@ export async function GET(
           });
         }
       }
-      if (fileInfo.type === "directory" && ["videos", "images", "audio"].includes(fileInfo.path)) {
-        for await (const imageInfo of listFiles({repo, accessToken: user.token as string, path: fileInfo.path})) {
-          if (allowedFilesExtensions.includes(imageInfo.path.split(".").pop() || "")) {
-            files.push(`https://huggingface.co/spaces/${namespace}/${repoId}/resolve/main/${imageInfo.path}`);
+      if (fileInfo.type === "directory" && (["videos", "images", "audio"].includes(fileInfo.path) || fileInfo.path === "components")) {
+        for await (const subFileInfo of listFiles({repo, accessToken: user.token as string, path: fileInfo.path})) {
+          if (subFileInfo.path.includes("components")) {
+            const blob = await downloadFile({ repo, accessToken: user.token as string, path: subFileInfo.path, raw: true });
+            const html = await blob?.text();
+            if (!html) {
+              continue;
+            }
+            htmlFiles.push({
+              path: subFileInfo.path,
+              html,
+            });
+          } else if (allowedFilesExtensions.includes(subFileInfo.path.split(".").pop() || "")) {
+            files.push(`https://huggingface.co/spaces/${namespace}/${repoId}/resolve/main/${subFileInfo.path}`);
           }
         }
       }

app/api/me/projects/[namespace]/[repoId]/save/route.ts

@@ -3,6 +3,7 @@ import { uploadFiles } from "@huggingface/hub";
 
 import { isAuthenticated } from "@/lib/auth";
 import { Page } from "@/types";
+import { injectDeepSiteBadge, isIndexPage } from "@/lib/inject-badge";
 
 export async function PUT(
   req: NextRequest,
@@ -28,11 +29,23 @@ export async function PUT(
     // Prepare files for upload
     const files: File[] = [];
     pages.forEach((page: Page) => {
-      const file = new File([page.html], page.path, { type: "text/html" });
+      // Determine MIME type based on file extension
+      let mimeType = "text/html";
+      if (page.path.endsWith(".css")) {
+        mimeType = "text/css";
+      } else if (page.path.endsWith(".js")) {
+        mimeType = "text/javascript";
+      } else if (page.path.endsWith(".json")) {
+        mimeType = "application/json";
+      }
+      // Inject the DeepSite badge script into index pages only (not components or other HTML files)
+      const content = (mimeType === "text/html" && isIndexPage(page.path)) 
+        ? injectDeepSiteBadge(page.html) 
+        : page.html;
+      const file = new File([content], page.path, { type: mimeType });
       files.push(file);
     });
 
-    // Upload files to HuggingFace Hub
     const response = await uploadFiles({
       repo: {
         type: "space",

app/api/me/projects/route.ts

@@ -4,6 +4,7 @@ import { RepoDesignation, createRepo, listCommits, spaceInfo, uploadFiles } from
 import { isAuthenticated } from "@/lib/auth";
 import { Commit, Page } from "@/types";
 import { COLORS } from "@/lib/utils";
+import { injectDeepSiteBadge, isIndexPage } from "@/lib/inject-badge";
 
 export async function POST(
   req: NextRequest,
@@ -50,7 +51,20 @@ This project was created with [DeepSite](https://deepsite.hf.co).
   const readmeFile = new File([README], "README.md", { type: "text/markdown" });
   files.push(readmeFile);
   pages.forEach((page: Page) => {
-    const file = new File([page.html], page.path, { type: "text/html" });
+    // Determine MIME type based on file extension
+    let mimeType = "text/html";
+    if (page.path.endsWith(".css")) {
+      mimeType = "text/css";
+    } else if (page.path.endsWith(".js")) {
+      mimeType = "text/javascript";
+    } else if (page.path.endsWith(".json")) {
+      mimeType = "application/json";
+    }
+    // Inject the DeepSite badge script into index pages only (not components or other HTML files)
+    const content = (mimeType === "text/html" && isIndexPage(page.path)) 
+      ? injectDeepSiteBadge(page.html) 
+      : page.html;
+    const file = new File([content], page.path, { type: mimeType });
     files.push(file);
   });
 

components/editor/ask-ai/context.tsx

@@ -0,0 +1,124 @@
+import { useState, useMemo } from "react";
+import { FileCode, FileText, Braces, AtSign } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { useEditor } from "@/hooks/useEditor";
+import { useAi } from "@/hooks/useAi";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import classNames from "classnames";
+
+export const Context = () => {
+  const { pages, currentPage, globalEditorLoading } = useEditor();
+  const { contextFile, setContextFile, globalAiLoading } = useAi();
+  const [open, setOpen] = useState(false);
+
+  const selectedFile = contextFile || null;
+
+  const getFileIcon = (filePath: string, size = "size-3.5") => {
+    if (filePath.endsWith(".css")) {
+      return <Braces className={size} />;
+    } else if (filePath.endsWith(".js")) {
+      return <FileCode className={size} />;
+    } else {
+      return <FileText className={size} />;
+    }
+  };
+
+  const buttonContent = useMemo(() => {
+    if (selectedFile) {
+      return (
+        <>
+          <span className="truncate max-w-[120px]">{selectedFile}</span>
+        </>
+      );
+    }
+    return <>Add Context</>;
+  }, [selectedFile]);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          size="xs"
+          variant={open ? "default" : "outline"}
+          className={classNames("!rounded-md", {
+            "!bg-blue-500/10 !border-blue-500/30 !text-blue-400":
+              selectedFile && selectedFile.endsWith(".css"),
+            "!bg-orange-500/10 !border-orange-500/30 !text-orange-400":
+              selectedFile && selectedFile.endsWith(".html"),
+            "!bg-amber-500/10 !border-amber-500/30 !text-amber-400":
+              selectedFile && selectedFile.endsWith(".js"),
+          })}
+          disabled={
+            globalAiLoading || globalEditorLoading || pages.length === 0
+          }
+        >
+          <AtSign className="size-3.5" />
+
+          {buttonContent}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        className="w-64 !bg-neutral-900 !border-neutral-800 !p-0 !rounded-2xl overflow-hidden"
+      >
+        <header className="flex items-center justify-center text-xs px-2 py-2.5 border-b gap-2 bg-neutral-950 border-neutral-800 font-semibold text-neutral-200">
+          Select a file to send as context
+        </header>
+        <main className="space-y-1 p-2">
+          <div className="max-h-[200px] overflow-y-auto space-y-0.5">
+            {pages.length === 0 ? (
+              <div className="px-2 py-2 text-xs text-neutral-500">
+                No files available
+              </div>
+            ) : (
+              <>
+                <button
+                  onClick={() => {
+                    setContextFile(null);
+                    setOpen(false);
+                  }}
+                  className={`cursor-pointer w-full px-2 py-1.5 text-xs text-left rounded-md hover:bg-neutral-800 transition-colors ${
+                    !selectedFile
+                      ? "bg-neutral-800 text-neutral-200 font-medium"
+                      : "text-neutral-400 hover:text-neutral-200"
+                  }`}
+                >
+                  All files (default)
+                </button>
+                {pages.map((page) => (
+                  <button
+                    key={page.path}
+                    onClick={() => {
+                      setContextFile(page.path);
+                      setOpen(false);
+                    }}
+                    className={`cursor-pointer w-full px-2 py-1.5 text-xs text-left rounded-md hover:bg-neutral-800 transition-colors flex items-center gap-1.5 ${
+                      selectedFile === page.path
+                        ? "bg-neutral-800 text-neutral-200 font-medium"
+                        : "text-neutral-400 hover:text-neutral-200"
+                    }`}
+                  >
+                    <span className="shrink-0">
+                      {getFileIcon(page.path, "size-3")}
+                    </span>
+                    <span className="truncate flex-1">{page.path}</span>
+                    {page.path === currentPage && (
+                      <span className="text-[10px] text-neutral-500 shrink-0">
+                        (current)
+                      </span>
+                    )}
+                  </button>
+                ))}
+              </>
+            )}
+          </div>
+        </main>
+      </PopoverContent>
+    </Popover>
+  );
+};

components/editor/ask-ai/index.tsx

@@ -15,6 +15,7 @@ import { Uploader } from "@/components/editor/ask-ai/uploader";
 import { ReImagine } from "@/components/editor/ask-ai/re-imagine";
 import { Selector } from "@/components/editor/ask-ai/selector";
 import { PromptBuilder } from "@/components/editor/ask-ai/prompt-builder";
+import { Context } from "@/components/editor/ask-ai/context";
 import { useUser } from "@/hooks/useUser";
 import { useLoginModal } from "@/components/contexts/login-context";
 import { Settings } from "./settings";
@@ -41,11 +42,8 @@ export const AskAi = ({
     setSelectedFiles,
     selectedElement,
     setSelectedElement,
-    setIsThinking,
     callAiNewProject,
     callAiFollowUp,
-    setModel,
-    selectedModel,
     audio: hookAudio,
     cancelRequest,
   } = useAi(onScrollToBottom);
@@ -112,9 +110,6 @@ export const AskAi = ({
 
       if (result?.success) {
         setPrompt("");
-        // if (selectedModel?.isThinker) {
-        //   setModel(MODELS[0].value);
-        // }
       }
     }
   };
@@ -284,10 +279,14 @@ export const AskAi = ({
         </div>
         <div className="flex items-center justify-between gap-2 px-4 pb-3 mt-2">
           <div className="flex-1 flex items-center justify-start gap-1.5 flex-wrap">
-            <PromptBuilder
-              enhancedSettings={enhancedSettings!}
-              setEnhancedSettings={setEnhancedSettings}
-            />
+            {isNew ? (
+              <PromptBuilder
+                enhancedSettings={enhancedSettings!}
+                setEnhancedSettings={setEnhancedSettings}
+              />
+            ) : (
+              <Context />
+            )}
             <Settings
               open={openProvider}
               error={providerError}

components/editor/ask-ai/uploader.tsx

@@ -2,13 +2,12 @@ import { useRef, useState } from "react";
 import {
   CheckCircle,
   ImageIcon,
-  Images,
-  Link,
   Paperclip,
   Upload,
   Video,
   Music,
   FileVideo,
+  Lock,
 } from "lucide-react";
 import Image from "next/image";
 
@@ -24,8 +23,12 @@ import { useUser } from "@/hooks/useUser";
 import { useEditor } from "@/hooks/useEditor";
 import { useAi } from "@/hooks/useAi";
 import { useLoginModal } from "@/components/contexts/login-context";
+import Link from "next/link";
 
 export const getFileType = (url: string) => {
+  if (typeof url !== "string") {
+    return "unknown";
+  }
   const extension = url.split(".").pop()?.toLowerCase();
   if (["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(extension || "")) {
     return "image";
@@ -40,7 +43,13 @@ export const getFileType = (url: string) => {
 export const Uploader = ({ project }: { project: Project | undefined }) => {
   const { user } = useUser();
   const { openLoginModal } = useLoginModal();
-  const { uploadFiles, isUploading, files, globalEditorLoading } = useEditor();
+  const {
+    uploadFiles,
+    isUploading,
+    files,
+    globalEditorLoading,
+    project: editorProject,
+  } = useEditor();
   const { selectedFiles, setSelectedFiles, globalAiLoading } = useAi();
 
   const [open, setOpen] = useState(false);
@@ -112,6 +121,27 @@ export const Uploader = ({ project }: { project: Project | undefined }) => {
             </p>
           </header>
           <main className="space-y-4 p-5">
+            {editorProject?.private && (
+              <div className="flex items-center justify-center flex-col gap-2 bg-amber-500/10 rounded-md p-3 border border-amber-500/10">
+                <Lock className="size-4 text-lg text-amber-700" />
+                <p className="text-xs text-amber-700">
+                  You can upload media files to your private project, but
+                  probably won't be able to see them in the preview.
+                </p>
+                <Link
+                  href={`https://huggingface.co/spaces/${editorProject.space_id}/settings`}
+                  target="_blank"
+                >
+                  <Button
+                    variant="black"
+                    size="xs"
+                    className="!bg-amber-600 !text-white"
+                  >
+                    Make it public
+                  </Button>
+                </Link>
+              </div>
+            )}
             <div>
               <p className="text-xs text-left text-neutral-700 mb-2">
                 Uploaded Media Files

components/editor/file-browser/index.tsx

@@ -0,0 +1,458 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import {
+  FolderOpen,
+  FileCode2,
+  Folder,
+  ChevronRight,
+  ChevronDown,
+} from "lucide-react";
+import classNames from "classnames";
+
+import { Page } from "@/types";
+import { useEditor } from "@/hooks/useEditor";
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+interface FileNode {
+  name: string;
+  path: string;
+  type: "file" | "folder";
+  children?: FileNode[];
+  page?: Page;
+}
+
+export function FileBrowser() {
+  const { pages, currentPage, setCurrentPage, globalEditorLoading, project } =
+    useEditor();
+  const [open, setOpen] = useState(false);
+  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(
+    new Set(["/"])
+  );
+
+  const toggleFolder = (path: string) => {
+    setExpandedFolders((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      return next;
+    });
+  };
+
+  const fileTree = useMemo(() => {
+    const root: FileNode = {
+      name: "root",
+      path: "/",
+      type: "folder",
+      children: [],
+    };
+
+    pages.forEach((page) => {
+      const parts = page.path.split("/").filter(Boolean);
+      let currentNode = root;
+
+      parts.forEach((part, index) => {
+        const isFile = index === parts.length - 1;
+        const currentPath = "/" + parts.slice(0, index + 1).join("/");
+
+        if (!currentNode.children) {
+          currentNode.children = [];
+        }
+
+        let existingNode = currentNode.children.find((n) => n.name === part);
+
+        if (!existingNode) {
+          existingNode = {
+            name: part,
+            path: currentPath,
+            type: isFile ? "file" : "folder",
+            children: isFile ? undefined : [],
+            page: isFile ? page : undefined,
+          };
+          currentNode.children.push(existingNode);
+        }
+
+        if (!isFile) {
+          currentNode = existingNode;
+        }
+      });
+    });
+
+    // Sort: folders first, then files, both alphabetically
+    const sortNodes = (nodes: FileNode[] = []): FileNode[] => {
+      return nodes
+        .sort((a, b) => {
+          if (a.type !== b.type) {
+            return a.type === "folder" ? -1 : 1;
+          }
+          return a.name.localeCompare(b.name);
+        })
+        .map((node) => ({
+          ...node,
+          children: node.children ? sortNodes(node.children) : undefined,
+        }));
+    };
+
+    root.children = sortNodes(root.children);
+    return root;
+  }, [pages]);
+
+  const getFileIcon = (path: string) => {
+    const extension = path.split(".").pop()?.toLowerCase();
+
+    switch (extension) {
+      case "html":
+        return (
+          <svg className="size-4 shrink-0" viewBox="0 0 32 32" fill="none">
+            <path
+              d="M5.902 27.201L3.656 2h24.688l-2.249 25.197L15.985 30 5.902 27.201z"
+              fill="#E44D26"
+            />
+            <path
+              d="M16 27.858l8.17-2.265 1.922-21.532H16v23.797z"
+              fill="#F16529"
+            />
+            <path
+              d="M16 13.407h4.09l.282-3.165H16V7.151h7.75l-.074.829-.759 8.518H16v-3.091z"
+              fill="#EBEBEB"
+            />
+            <path
+              d="M16 21.434l-.014.004-3.442-.929-.22-2.465H9.221l.433 4.852 6.332 1.758.014-.004v-3.216z"
+              fill="#EBEBEB"
+            />
+            <path
+              d="M19.90 16.18l-.372 4.148-3.543.956v3.216l6.336-1.755.047-.522.537-6.043H19.90z"
+              fill="#FFF"
+            />
+            <path
+              d="M16 7.151v3.091h-7.3l-.062-.695-.141-1.567-.074-.829H16zM16 13.407v3.091h-3.399l-.062-.695-.14-1.566-.074-.83H16z"
+              fill="#FFF"
+            />
+          </svg>
+        );
+      case "css":
+        return (
+          <svg className="size-4 shrink-0" viewBox="0 0 32 32" fill="none">
+            <path
+              d="M5.902 27.201L3.656 2h24.688l-2.249 25.197L15.985 30 5.902 27.201z"
+              fill="#1572B6"
+            />
+            <path
+              d="M16 27.858l8.17-2.265 1.922-21.532H16v23.797z"
+              fill="#33A9DC"
+            />
+            <path
+              d="M16 13.191h4.09l.282-3.165H16V6.935h7.75l-.074.829-.759 8.518H16v-3.091z"
+              fill="#FFF"
+            />
+            <path
+              d="M16.019 21.218l-.014.004-3.442-.929-.22-2.465H9.24l.433 4.852 6.331 1.758.015-.004v-3.216z"
+              fill="#EBEBEB"
+            />
+            <path
+              d="M19.827 16.151l-.372 4.148-3.436.929v3.216l6.336-1.755.047-.522.726-8.016h-7.636v3h4.335z"
+              fill="#FFF"
+            />
+            <path
+              d="M16.011 6.935v3.091h-7.3l-.062-.695-.141-1.567-.074-.829h7.577zM16 13.191v3.091h-3.399l-.062-.695-.14-1.566-.074-.83H16z"
+              fill="#EBEBEB"
+            />
+          </svg>
+        );
+      case "js":
+      case "jsx":
+        return (
+          <svg className="size-4 shrink-0" viewBox="0 0 32 32" fill="none">
+            <rect width="32" height="32" rx="2" fill="#F7DF1E" />
+            <path
+              d="M20.63 22.3c.54.88 1.24 1.53 2.48 1.53.98 0 1.6-.48 1.6-1.16 0-.8-.64-1.1-1.72-1.57l-.59-.25c-1.7-.72-2.83-1.63-2.83-3.55 0-1.77 1.35-3.12 3.46-3.12 1.5 0 2.58.52 3.36 1.9l-1.84 1.18c-.4-.72-.84-1-1.51-1-.69 0-1.12.43-1.12 1 0 .7.43 1 1.43 1.43l.59.25c2 .86 3.13 1.73 3.13 3.7 0 2.12-1.66 3.3-3.9 3.3-2.18 0-3.6-1.04-4.3-2.4l1.96-1.12z"
+              fill="#000"
+            />
+            <path
+              d="M11.14 22.56c.35.62.67 1.15 1.44 1.15.74 0 1.2-.29 1.2-1.42V14.7h2.4v7.63c0 2.34-1.37 3.4-3.37 3.4-1.8 0-2.85-.94-3.38-2.06l1.71-1.1z"
+              fill="#000"
+            />
+          </svg>
+        );
+      case "json":
+        return (
+          <svg className="size-4 shrink-0" viewBox="0 0 32 32" fill="none">
+            <rect width="32" height="32" rx="2" fill="#F7DF1E" />
+            <path
+              d="M16 2L4 8v16l12 6 12-6V8L16 2zm8.8 20.4l-8.8 4.4-8.8-4.4V9.6l8.8-4.4 8.8 4.4v12.8z"
+              fill="#000"
+              opacity="0.15"
+            />
+            <text
+              x="50%"
+              y="50%"
+              dominantBaseline="middle"
+              textAnchor="middle"
+              fill="#000"
+              fontSize="14"
+              fontWeight="600"
+            >
+              {}
+            </text>
+          </svg>
+        );
+      default:
+        return <FileCode2 className="size-4 shrink-0 text-neutral-400" />;
+    }
+  };
+
+  const getFileExtension = (path: string) => {
+    return path.split(".").pop()?.toLowerCase() || "";
+  };
+
+  const getLanguageTag = (path: string) => {
+    const extension = path.split(".").pop()?.toLowerCase();
+
+    switch (extension) {
+      case "html":
+        return {
+          name: "HTML",
+          color: "bg-orange-500/20 border-orange-500/30 text-orange-400",
+        };
+      case "css":
+        return {
+          name: "CSS",
+          color: "bg-blue-500/20 border-blue-500/30 text-blue-400",
+        };
+      case "js":
+        return {
+          name: "JS",
+          color: "bg-yellow-500/20 border-yellow-500/30 text-yellow-400",
+        };
+      case "json":
+        return {
+          name: "JSON",
+          color: "bg-yellow-500/20 border-yellow-500/30 text-yellow-400",
+        };
+      default:
+        return {
+          name: extension?.toUpperCase() || "FILE",
+          color: "bg-neutral-500/20 border-neutral-500/30 text-neutral-400",
+        };
+    }
+  };
+
+  const currentPageData = pages.find((p) => p.path === currentPage);
+
+  const renderFileTree = (nodes: FileNode[], depth = 0) => {
+    return nodes.map((node) => {
+      if (node.type === "folder") {
+        const isExpanded = expandedFolders.has(node.path);
+        return (
+          <div key={node.path}>
+            <div
+              className="flex items-center gap-2 px-3 py-1 cursor-pointer text-[13px] group transition-colors hover:bg-neutral-800"
+              style={{ paddingLeft: `${depth * 12 + 12}px` }}
+              onClick={() => toggleFolder(node.path)}
+            >
+              {isExpanded ? (
+                <ChevronDown className="size-3.5 text-neutral-400 shrink-0" />
+              ) : (
+                <ChevronRight className="size-3.5 text-neutral-400 shrink-0" />
+              )}
+              <Folder className="size-4 text-blue-400 shrink-0" />
+              <span className="text-neutral-300 truncate flex-1 font-normal">
+                {node.name}
+              </span>
+              <span className="text-[10px] text-neutral-500">
+                {node.children?.length || 0}
+              </span>
+            </div>
+            {isExpanded &&
+              node.children &&
+              renderFileTree(node.children, depth + 1)}
+          </div>
+        );
+      } else {
+        const isActive = currentPage === node.page?.path;
+        return (
+          <div
+            key={node.path}
+            className={classNames(
+              "flex items-center gap-2.5 px-3 py-1 cursor-pointer text-[13px] group transition-colors relative",
+              {
+                "bg-neutral-700 text-white": isActive,
+                "text-neutral-300 hover:bg-neutral-800": !isActive,
+              }
+            )}
+            style={{ paddingLeft: `${depth * 12 + 12 + 16}px` }}
+            onClick={() => {
+              if (node.page) {
+                setCurrentPage(node.page.path);
+                setOpen(false);
+              }
+            }}
+          >
+            <div className="w-4 flex justify-center shrink-0">
+              {getFileIcon(node.name)}
+            </div>
+
+            <span className="truncate flex-1 font-normal">{node.name}</span>
+
+            <span
+              className={classNames(
+                "text-[10px] px-1.5 py-0.5 rounded uppercase font-semibold transition-opacity shrink-0",
+                isActive
+                  ? `opacity-100 ${getLanguageTag(node.name).color}`
+                  : "opacity-0 group-hover:opacity-100 bg-white/5 text-neutral-500"
+              )}
+            >
+              {getFileExtension(node.name)}
+            </span>
+
+            {isActive && (
+              <div className="absolute left-0 top-0 bottom-0 w-[2px] bg-blue-500" />
+            )}
+          </div>
+        );
+      }
+    });
+  };
+
+  return (
+    <div>
+      {/* VS Code-style Tab Bar */}
+      <div className="w-full flex items-center bg-neutral-900 min-h-[35px] border-b border-neutral-800">
+        <div className="flex items-stretch overflow-x-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-neutral-700">
+          {currentPageData && (
+            <div className="flex items-center gap-2 px-4 py-2.5 bg-neutral-900 border-r border-neutral-800 text-sm min-w-0 relative group">
+              <div className="flex items-center gap-2 flex-1 min-w-0">
+                {getFileIcon(currentPageData.path)}
+                <span className="text-neutral-300 truncate font-normal text-[13px]">
+                  {currentPageData.path}
+                </span>
+                <span
+                  className={classNames(
+                    "text-[9px] px-1.5 py-0.5 rounded border backdrop-blur-sm font-semibold uppercase tracking-wide",
+                    getLanguageTag(currentPageData.path).color
+                  )}
+                >
+                  {getLanguageTag(currentPageData.path).name}
+                </span>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Open Explorer Button */}
+        <TooltipProvider>
+          <Tooltip>
+            <Sheet open={open} onOpenChange={setOpen} modal={false}>
+              <TooltipTrigger asChild>
+                <SheetTrigger asChild>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    disabled={pages.length === 0 || globalEditorLoading}
+                    className="ml-auto mr-2 text-neutral-300 hover:text-white hover:bg-neutral-800 h-7 text-[13px] font-normal gap-1.5"
+                  >
+                    <FolderOpen className="size-3.5" />
+                    <span className="hidden sm:inline">Files</span>
+                    <span className="text-[11px] px-1.5 py-0.5 rounded bg-neutral-800 text-neutral-500 font-semibold">
+                      {pages.length}
+                    </span>
+                  </Button>
+                </SheetTrigger>
+              </TooltipTrigger>
+              <TooltipContent
+                side="bottom"
+                className="bg-neutral-800 border-neutral-700 text-neutral-300 text-xs"
+              >
+                <p>
+                  Open File Explorer ({pages.length}{" "}
+                  {pages.length === 1 ? "file" : "files"})
+                </p>
+              </TooltipContent>
+
+              <SheetContent
+                side="left"
+                className="w-[320px] bg-neutral-900 border-neutral-800 p-0"
+              >
+                <SheetHeader className="px-5 py-2.5 border-b border-neutral-800 space-y-0">
+                  <SheetTitle className="flex items-center gap-2">
+                    <FolderOpen className="size-4 text-neutral-300" />
+                    <span className="text-[11px] uppercase tracking-wider text-neutral-300 font-semibold">
+                      Explorer
+                    </span>
+                  </SheetTitle>
+                </SheetHeader>
+
+                <div className="px-3 py-3 border-b border-neutral-800">
+                  <div className="flex items-center gap-2 px-2 py-1">
+                    <svg
+                      className="size-4 text-neutral-300"
+                      fill="currentColor"
+                      viewBox="0 0 16 16"
+                    >
+                      <path d="M1.5 1h11l2 2v10l-2 2h-11l-2-2V3l2-2zm0 1l-1 1v10l1 1h11l1-1V3l-1-1h-11z" />
+                      <path d="M7.5 4.5v3h-3v1h3v3h1v-3h3v-1h-3v-3h-1z" />
+                    </svg>
+                    <span className="text-[13px] text-neutral-300 font-normal">
+                      {project?.space_id || "No space selected"}
+                    </span>
+                    <span className="ml-auto text-[11px] text-neutral-500">
+                      {pages.length || 0}
+                    </span>
+                  </div>
+                </div>
+
+                <div
+                  className="py-1 overflow-y-auto"
+                  style={{ height: "calc(100vh - 160px)" }}
+                >
+                  {fileTree.children && renderFileTree(fileTree.children)}
+                </div>
+
+                <div className="absolute bottom-0 left-0 right-0 px-5 py-3 border-t border-neutral-800 bg-neutral-900">
+                  <div className="grid grid-cols-2 gap-2 text-[11px]">
+                    <div className="flex items-center gap-2 text-neutral-500">
+                      <div className="size-2 rounded-full bg-orange-600" />
+                      <span>
+                        HTML:{" "}
+                        {pages.filter((p) => p.path.endsWith(".html")).length}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-2 text-neutral-500">
+                      <div className="size-2 rounded-full bg-blue-600" />
+                      <span>
+                        CSS:{" "}
+                        {pages.filter((p) => p.path.endsWith(".css")).length}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-2 text-neutral-500">
+                      <div className="size-2 rounded-full bg-yellow-400" />
+                      <span>
+                        JS: {pages.filter((p) => p.path.endsWith(".js")).length}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </SheetContent>
+            </Sheet>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+    </div>
+  );
+}

components/editor/header/index.tsx

@@ -1,4 +1,11 @@
-import { ArrowRight, HelpCircle, RefreshCcw, Lock } from "lucide-react";
+import {
+  ArrowRight,
+  HelpCircle,
+  RefreshCcw,
+  Lock,
+  Eye,
+  Sparkles,
+} from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 
@@ -82,15 +89,24 @@ export function Header() {
         <div className="flex items-center gap-2">
           {project?.space_id && (
             <Link
-              href={`https://huggingface.co/spaces/${project.space_id}`}
+              href={
+                project?.private
+                  ? `https://huggingface.co/spaces/${project.space_id}`
+                  : `https://${project.space_id.replaceAll(
+                      "/",
+                      "-"
+                    )}.static.hf.space`
+              }
               target="_blank"
             >
               <Button
                 size="xs"
                 variant="bordered"
-                className="flex items-center gap-1 justify-center border-gray-200/20 bg-gray-200/10 text-gray-200 max-lg:hidden"
+                className="flex items-center gap-1.5 justify-center bg-gradient-to-r from-emerald-500/20 to-cyan-500/20 hover:from-emerald-500/30 hover:to-cyan-500/30 border-emerald-500/30 text-emerald-400 hover:text-emerald-300 backdrop-blur-sm shadow-lg hover:shadow-emerald-500/20 transition-all duration-300 max-lg:hidden font-medium"
               >
+                <Eye className="size-3.5" />
                 See Live Preview
+                <Sparkles className="size-3" />
               </Button>
             </Link>
           )}

components/editor/index.tsx

@@ -10,9 +10,8 @@ import Editor from "@monaco-editor/react";
 import { useEditor } from "@/hooks/useEditor";
 import { Header } from "@/components/editor/header";
 import { useAi } from "@/hooks/useAi";
-import { defaultHTML } from "@/lib/consts";
 
-import { ListPages } from "./pages";
+import { FileBrowser } from "./file-browser";
 import { AskAi } from "./ask-ai";
 import { Preview } from "./preview";
 import { SaveChangesPopup } from "./save-changes-popup";
@@ -37,6 +36,7 @@ export const AppEditor = ({
     currentCommit,
     hasUnsavedChanges,
     saveChanges,
+    globalEditorLoading,
     pages,
   } = useEditor(namespace, repoId);
   const { isAiWorking } = useAi();
@@ -63,6 +63,22 @@ export const AppEditor = ({
     }
   }, [hasUnsavedChanges, isAiWorking]);
 
+  // Determine the language based on file extension
+  const editorLanguage = useMemo(() => {
+    const path = currentPageData.path;
+    if (path.endsWith(".css")) return "css";
+    if (path.endsWith(".js")) return "javascript";
+    return "html";
+  }, [currentPageData.path]);
+
+  // Determine the copy message based on file type
+  const copyMessage = useMemo(() => {
+    if (editorLanguage === "css") return "CSS copied to clipboard!";
+    if (editorLanguage === "javascript")
+      return "JavaScript copied to clipboard!";
+    return "HTML copied to clipboard!";
+  }, [editorLanguage]);
+
   return (
     <section className="h-screen w-full bg-neutral-950 flex flex-col">
       <Header />
@@ -77,16 +93,16 @@ export const AppEditor = ({
             }
           )}
         >
-          <ListPages />
+          <FileBrowser />
           <CopyIcon
             className="size-4 absolute top-14 right-5 text-neutral-500 hover:text-neutral-300 z-2 cursor-pointer"
             onClick={() => {
               copyToClipboard(currentPageData.html);
-              toast.success("HTML copied to clipboard!");
+              toast.success(copyMessage);
             }}
           />
           <Editor
-            defaultLanguage="html"
+            language={editorLanguage}
             theme="vs-dark"
             loading={<Loading overlay={false} />}
             className="h-full absolute left-0 top-0 lg:min-w-[600px]"
@@ -99,13 +115,16 @@ export const AppEditor = ({
                 horizontal: "hidden",
               },
               wordWrap: "on",
-              readOnly: !!isAiWorking || !!currentCommit,
+              readOnly: !!isAiWorking || !!currentCommit || globalEditorLoading,
               readOnlyMessage: {
-                value: currentCommit
+                value: globalEditorLoading
+                  ? "Wait for DeepSite loading your project..."
+                  : currentCommit
                   ? "You can't edit the code, as this is an old version of the project."
                   : "Wait for DeepSite to finish working...",
                 isTrusted: true,
               },
+              cursorBlinking: "smooth",
             }}
             value={currentPageData.html}
             onChange={(value) => {

components/editor/preview/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useRef, useState, useEffect } from "react";
+import { useRef, useState, useEffect, useCallback, useMemo } from "react";
 import { useUpdateEffect } from "react-use";
 import classNames from "classnames";
 
@@ -28,7 +28,8 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
     pages,
     setPages,
     setCurrentPage,
-    isSameHtml,
+    previewPage,
+    setPreviewPage,
   } = useEditor();
   const {
     isEditableModeEnabled,
@@ -48,70 +49,213 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
   const [throttledHtml, setThrottledHtml] = useState<string>("");
   const lastUpdateTimeRef = useRef<number>(0);
 
-  // For new projects, throttle HTML updates to every 3 seconds
   useEffect(() => {
-    if (isNew && currentPageData?.html) {
+    if (!previewPage && pages.length > 0) {
+      const indexPage = pages.find(
+        (p) => p.path === "index.html" || p.path === "index" || p.path === "/"
+      );
+      const firstHtmlPage = pages.find((p) => p.path.endsWith(".html"));
+      setPreviewPage(indexPage?.path || firstHtmlPage?.path || "index.html");
+    }
+  }, [pages, previewPage]);
+
+  const previewPageData = useMemo(() => {
+    const found = pages.find((p) => {
+      const normalizedPagePath = p.path.replace(/^\.?\//, "");
+      const normalizedPreviewPage = previewPage.replace(/^\.?\//, "");
+      return normalizedPagePath === normalizedPreviewPage;
+    });
+    return found || currentPageData;
+  }, [pages, previewPage, currentPageData]);
+
+  const injectAssetsIntoHtml = useCallback(
+    (html: string): string => {
+      if (!html) return html;
+
+      // Find all CSS and JS files (including those in subdirectories)
+      const cssFiles = pages.filter(
+        (p) => p.path.endsWith(".css") && p.path !== previewPageData?.path
+      );
+      const jsFiles = pages.filter(
+        (p) => p.path.endsWith(".js") && p.path !== previewPageData?.path
+      );
+
+      let modifiedHtml = html;
+
+      // Inject all CSS files
+      if (cssFiles.length > 0) {
+        const allCssContent = cssFiles
+          .map(
+            (file) =>
+              `<style data-injected-from="${file.path}">\n${file.html}\n</style>`
+          )
+          .join("\n");
+
+        if (modifiedHtml.includes("</head>")) {
+          modifiedHtml = modifiedHtml.replace(
+            "</head>",
+            `${allCssContent}\n</head>`
+          );
+        } else if (modifiedHtml.includes("<head>")) {
+          modifiedHtml = modifiedHtml.replace(
+            "<head>",
+            `<head>\n${allCssContent}`
+          );
+        } else {
+          // If no head tag, prepend to document
+          modifiedHtml = allCssContent + "\n" + modifiedHtml;
+        }
+
+        // Remove all link tags that reference CSS files we're injecting
+        cssFiles.forEach((file) => {
+          const escapedPath = file.path.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+          modifiedHtml = modifiedHtml.replace(
+            new RegExp(
+              `<link\\s+[^>]*href=["'][\\.\/]*${escapedPath}["'][^>]*>`,
+              "gi"
+            ),
+            ""
+          );
+        });
+      }
+
+      // Inject all JS files
+      if (jsFiles.length > 0) {
+        const allJsContent = jsFiles
+          .map(
+            (file) =>
+              `<script data-injected-from="${file.path}">\n${file.html}\n</script>`
+          )
+          .join("\n");
+
+        if (modifiedHtml.includes("</body>")) {
+          modifiedHtml = modifiedHtml.replace(
+            "</body>",
+            `${allJsContent}\n</body>`
+          );
+        } else if (modifiedHtml.includes("<body>")) {
+          modifiedHtml = modifiedHtml + allJsContent;
+        } else {
+          // If no body tag, append to document
+          modifiedHtml = modifiedHtml + "\n" + allJsContent;
+        }
+
+        // Remove all script tags that reference JS files we're injecting
+        jsFiles.forEach((file) => {
+          const escapedPath = file.path.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+          modifiedHtml = modifiedHtml.replace(
+            new RegExp(
+              `<script\\s+[^>]*src=["'][\\.\/]*${escapedPath}["'][^>]*><\\/script>`,
+              "gi"
+            ),
+            ""
+          );
+        });
+      }
+
+      return modifiedHtml;
+    },
+    [pages, previewPageData?.path]
+  );
+
+  useEffect(() => {
+    if (isNew && previewPageData?.html) {
       const now = Date.now();
       const timeSinceLastUpdate = now - lastUpdateTimeRef.current;
 
-      // If this is the first update or 3 seconds have passed, update immediately
       if (lastUpdateTimeRef.current === 0 || timeSinceLastUpdate >= 3000) {
-        setThrottledHtml(currentPageData.html);
+        const processedHtml = injectAssetsIntoHtml(previewPageData.html);
+        setThrottledHtml(processedHtml);
         lastUpdateTimeRef.current = now;
       } else {
-        // Otherwise, schedule an update for when 3 seconds will have passed
         const timeUntilNextUpdate = 3000 - timeSinceLastUpdate;
         const timer = setTimeout(() => {
-          setThrottledHtml(currentPageData.html);
+          const processedHtml = injectAssetsIntoHtml(previewPageData.html);
+          setThrottledHtml(processedHtml);
           lastUpdateTimeRef.current = Date.now();
         }, timeUntilNextUpdate);
         return () => clearTimeout(timer);
       }
     }
-  }, [isNew, currentPageData?.html]);
+  }, [isNew, previewPageData?.html, injectAssetsIntoHtml]);
 
   useEffect(() => {
-    if (!isAiWorking && !globalAiLoading && currentPageData?.html) {
-      setStableHtml(currentPageData.html);
+    if (!isAiWorking && !globalAiLoading && previewPageData?.html) {
+      const processedHtml = injectAssetsIntoHtml(previewPageData.html);
+      setStableHtml(processedHtml);
     }
-  }, [isAiWorking, globalAiLoading, currentPageData?.html]);
+  }, [
+    isAiWorking,
+    globalAiLoading,
+    previewPageData?.html,
+    injectAssetsIntoHtml,
+    previewPage,
+  ]);
 
   useEffect(() => {
     if (
-      currentPageData?.html &&
+      previewPageData?.html &&
       !stableHtml &&
       !isAiWorking &&
       !globalAiLoading
     ) {
-      setStableHtml(currentPageData.html);
+      const processedHtml = injectAssetsIntoHtml(previewPageData.html);
+      setStableHtml(processedHtml);
     }
-  }, [currentPageData?.html, stableHtml, isAiWorking, globalAiLoading]);
+  }, [
+    previewPageData?.html,
+    stableHtml,
+    isAiWorking,
+    globalAiLoading,
+    injectAssetsIntoHtml,
+  ]);
+
+  const setupIframeListeners = () => {
+    if (iframeRef?.current?.contentDocument) {
+      const iframeDocument = iframeRef.current.contentDocument;
+
+      // Use event delegation to catch clicks on anchors in both light and shadow DOM
+      iframeDocument.addEventListener(
+        "click",
+        handleCustomNavigation as any,
+        true
+      );
 
-  useUpdateEffect(() => {
+      if (isEditableModeEnabled) {
+        iframeDocument.addEventListener("mouseover", handleMouseOver);
+        iframeDocument.addEventListener("mouseout", handleMouseOut);
+        iframeDocument.addEventListener("click", handleClick);
+      }
+    }
+  };
+
+  useEffect(() => {
     const cleanupListeners = () => {
       if (iframeRef?.current?.contentDocument) {
         const iframeDocument = iframeRef.current.contentDocument;
+        iframeDocument.removeEventListener(
+          "click",
+          handleCustomNavigation as any,
+          true
+        );
         iframeDocument.removeEventListener("mouseover", handleMouseOver);
         iframeDocument.removeEventListener("mouseout", handleMouseOut);
         iframeDocument.removeEventListener("click", handleClick);
       }
     };
 
-    if (iframeRef?.current) {
-      const iframeDocument = iframeRef.current.contentDocument;
-      if (iframeDocument) {
+    const timer = setTimeout(() => {
+      if (iframeRef?.current?.contentDocument) {
         cleanupListeners();
-
-        if (isEditableModeEnabled) {
-          iframeDocument.addEventListener("mouseover", handleMouseOver);
-          iframeDocument.addEventListener("mouseout", handleMouseOut);
-          iframeDocument.addEventListener("click", handleClick);
-        }
+        setupIframeListeners();
       }
-    }
+    }, 50);
 
-    return cleanupListeners;
-  }, [iframeRef, isEditableModeEnabled]);
+    return () => {
+      clearTimeout(timer);
+      cleanupListeners();
+    };
+  }, [isEditableModeEnabled, stableHtml, throttledHtml, previewPage]);
 
   const promoteVersion = async () => {
     setIsPromotingVersion(true);
@@ -124,6 +268,7 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
           setCurrentCommit(null);
           setPages(res.data.pages);
           setCurrentPage(res.data.pages[0].path);
+          setPreviewPage(res.data.pages[0].path);
           toast.success("Version promoted successfully");
         }
       })
@@ -176,6 +321,26 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
       const iframeDocument = iframeRef.current.contentDocument;
       if (iframeDocument) {
         const targetElement = event.target as HTMLElement;
+
+        const findClosestAnchor = (
+          element: HTMLElement
+        ): HTMLAnchorElement | null => {
+          let current = element;
+          while (current && current !== iframeDocument.body) {
+            if (current.tagName === "A") {
+              return current as HTMLAnchorElement;
+            }
+            current = current.parentElement as HTMLElement;
+          }
+          return null;
+        };
+
+        const anchorElement = findClosestAnchor(targetElement);
+
+        if (anchorElement) {
+          return;
+        }
+
         if (targetElement !== iframeDocument.body) {
           setSelectedElement(targetElement);
         }
@@ -187,38 +352,85 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
     if (iframeRef?.current) {
       const iframeDocument = iframeRef.current.contentDocument;
       if (iframeDocument) {
+        const path = event.composedPath();
+        const actualTarget = path[0] as HTMLElement;
+
         const findClosestAnchor = (
           element: HTMLElement
         ): HTMLAnchorElement | null => {
-          let current = element;
+          let current: HTMLElement | null = element;
           while (current && current !== iframeDocument.body) {
             if (current.tagName === "A") {
               return current as HTMLAnchorElement;
             }
-            current = current.parentElement as HTMLElement;
+            const parent: Node | null = current.parentNode;
+            if (parent instanceof ShadowRoot) {
+              current = parent.host as HTMLElement;
+            } else if (parent instanceof HTMLElement) {
+              current = parent;
+            } else {
+              break;
+            }
           }
           return null;
         };
 
-        const anchorElement = findClosestAnchor(event.target as HTMLElement);
+        const anchorElement = findClosestAnchor(actualTarget);
         if (anchorElement) {
           let href = anchorElement.getAttribute("href");
           if (href) {
             event.stopPropagation();
             event.preventDefault();
 
-            if (href.includes("#") && !href.includes(".html")) {
-              const targetElement = iframeDocument.querySelector(href);
+            if (href.startsWith("#")) {
+              let targetElement = iframeDocument.querySelector(href);
+
+              if (!targetElement) {
+                const searchInShadows = (
+                  root: Document | ShadowRoot
+                ): Element | null => {
+                  const elements = root.querySelectorAll("*");
+                  for (const el of elements) {
+                    if (el.shadowRoot) {
+                      const found = el.shadowRoot.querySelector(href);
+                      if (found) return found;
+                      const nested = searchInShadows(el.shadowRoot);
+                      if (nested) return nested;
+                    }
+                  }
+                  return null;
+                };
+                targetElement = searchInShadows(iframeDocument);
+              }
+
               if (targetElement) {
                 targetElement.scrollIntoView({ behavior: "smooth" });
               }
               return;
             }
 
-            href = href.split(".html")[0] + ".html";
-            const isPageExist = pages.some((page) => page.path === href);
+            let normalizedHref = href.replace(/^\.?\//, "");
+
+            if (normalizedHref === "" || normalizedHref === "/") {
+              normalizedHref = "index.html";
+            }
+
+            const hashIndex = normalizedHref.indexOf("#");
+            if (hashIndex !== -1) {
+              normalizedHref = normalizedHref.substring(0, hashIndex);
+            }
+
+            if (!normalizedHref.includes(".")) {
+              normalizedHref = normalizedHref + ".html";
+            }
+
+            const isPageExist = pages.some((page) => {
+              const pagePath = page.path.replace(/^\.?\//, "");
+              return pagePath === normalizedHref;
+            });
+
             if (isPageExist) {
-              setCurrentPage(href);
+              setPreviewPage(normalizedHref);
             }
           }
         }
@@ -244,6 +456,7 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
           "[mask-image:radial-gradient(900px_circle_at_center,white,transparent)] opacity-40"
         )}
       />
+      {/* Preview page indicator */}
       {!isAiWorking && hoveredElement && isEditableModeEnabled && (
         <div
           className="cursor-pointer absolute bg-sky-500/10 border-[2px] border-dashed border-sky-500 rounded-r-lg rounded-b-lg p-3 z-10 pointer-events-none"
@@ -306,20 +519,12 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
                         }
                       );
                     }
-                    // add event listener to all links in the iframe to handle navigation
-                    if (iframeRef?.current?.contentWindow?.document) {
-                      const links =
-                        iframeRef.current.contentWindow.document.querySelectorAll(
-                          "a"
-                        );
-                      links.forEach((link) => {
-                        link.addEventListener("click", handleCustomNavigation);
-                      });
-                    }
+                    // Set up event listeners after iframe loads
+                    setupIframeListeners();
                   }
                 : undefined
             }
-            sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
+            sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-modals allow-forms"
             allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; clipboard-read; clipboard-write; display-capture; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; serial; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking"
           />
           {!isNew && (

components/ui/sheet.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-neutral-900 p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+);
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+);
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};

hooks/useAi.ts

@@ -14,12 +14,13 @@ import { isTheSameHtml } from "@/lib/compare-html-diff";
 export const useAi = (onScrollToBottom?: () => void) => {
   const client = useQueryClient();
   const audio = useRef<HTMLAudioElement | null>(null);
-  const { setPages, setCurrentPage, setPrompts, prompts, pages, project, setProject, commits, setCommits, setLastSavedPages, isSameHtml } = useEditor();
+  const { setPages, setCurrentPage, setPreviewPage, setPrompts, prompts, pages, project, setProject, commits, setCommits, setLastSavedPages, isSameHtml } = useEditor();
   const [controller, setController] = useState<AbortController | null>(null);
   const [storageProvider, setStorageProvider] = useLocalStorage("provider", "auto");
   const [storageModel, setStorageModel] = useLocalStorage("model", MODELS[0].value);
   const router = useRouter();
   const { projects, setProjects } = useUser();
+  const streamingPagesRef = useRef<Set<string>>(new Set());
 
   const { data: isAiWorking = false } = useQuery({
     queryKey: ["ai.isAiWorking"],
@@ -78,6 +79,18 @@ export const useAi = (onScrollToBottom?: () => void) => {
     client.setQueryData(["ai.selectedFiles"], newFiles)
   };
 
+  const { data: contextFile } = useQuery<string | null>({
+    queryKey: ["ai.contextFile"],
+    queryFn: async () => null,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    refetchOnMount: false,
+    initialData: null
+  });
+  const setContextFile = (newContextFile: string | null) => {
+    client.setQueryData(["ai.contextFile"], newContextFile)
+  };
+
   const { data: provider } = useQuery({
     queryKey: ["ai.provider"],
     queryFn: async () => storageProvider ?? "auto",
@@ -113,19 +126,25 @@ export const useAi = (onScrollToBottom?: () => void) => {
 
   const createNewProject = async (prompt: string, htmlPages: Page[], projectName: string | undefined, isLoggedIn?: boolean) => {
     if (isLoggedIn) {
-      const response = await api.post("/me/projects", {
+      api.post("/me/projects", {
         title: projectName,
         pages: htmlPages,
         prompt,
-      });
-      if (response.data.ok) {
+      })
+      .then((response) => {
+        if (response.data.ok) {
+          setIsAiWorking(false);
+          router.replace(`/${response.data.space.project.space_id}`);
+          setProject(response.data.space);
+          setProjects([...projects, response.data.space]);
+          toast.success("AI responded successfully");
+          if (audio.current) audio.current.play();
+        }
+      })
+      .catch((error) => {
         setIsAiWorking(false);
-        router.replace(`/${response.data.space.project.space_id}`);
-        setProject(response.data.space);
-        setProjects([...projects, response.data.space]);
-        toast.success("AI responded successfully");
-        if (audio.current) audio.current.play();
-      }
+        toast.error(error?.response?.data?.message || error?.message || "Failed to create project");
+      });
     } else {
       setIsAiWorking(false);
       toast.success("AI responded successfully");
@@ -138,6 +157,7 @@ export const useAi = (onScrollToBottom?: () => void) => {
     if (!redesignMarkdown && !prompt.trim()) return;
     
     setIsAiWorking(true);
+    streamingPagesRef.current.clear(); // Reset tracking for new generation
     
     const abortController = new AbortController();
     setController(abortController);
@@ -186,12 +206,11 @@ export const useAi = (onScrollToBottom?: () => void) => {
                   }
                 }
               } catch (e) {
-                // Not valid JSON, treat as normal content
               }
             }
             
-            const newPages = formatPages(contentResponse);
-            let projectName = contentResponse.match(/<<<<<<< PROJECT_NAME_START ([\s\S]*?) >>>>>>> PROJECT_NAME_END/)?.[1]?.trim();
+            const newPages = formatPages(contentResponse, false);
+            let projectName = contentResponse.match(/<<<<<<< PROJECT_NAME_START\s*([\s\S]*?)\s*>>>>>>> PROJECT_NAME_END/)?.[1]?.trim();
             if (!projectName) {
               projectName = prompt.substring(0, 40).replace(/[^a-zA-Z0-9]/g, "-").slice(0, 40);
             }
@@ -226,13 +245,11 @@ export const useAi = (onScrollToBottom?: () => void) => {
                 }
               }
             } catch (e) {
-              // Not a complete JSON yet, continue reading
             }
           }
 
-          formatPages(contentResponse);
+          formatPages(contentResponse, true);
           
-          // Continue reading
           return read();
         };
 
@@ -266,6 +283,10 @@ export const useAi = (onScrollToBottom?: () => void) => {
     setController(abortController);
     
     try {
+      const pagesToSend = contextFile 
+        ? pages.filter(page => page.path === contextFile)
+        : pages;
+
       const request = await fetch("/api/ask", {
         method: "PUT",
         body: JSON.stringify({
@@ -273,7 +294,7 @@ export const useAi = (onScrollToBottom?: () => void) => {
           provider,
           previousPrompts: prompts,
           model,
-          pages,
+          pages: pagesToSend,
           selectedElementHtml: selectedElement?.outerHTML,
           files: selectedFiles,
           repoId: project?.space_id,
@@ -316,16 +337,28 @@ export const useAi = (onScrollToBottom?: () => void) => {
           router.push(`/${res.repoId}`);
           setIsAiWorking(false);
         } else {
-          setPages(res.pages);
-          setLastSavedPages([...res.pages]); // Mark AI changes as saved
+          const returnedPages = res.pages as Page[];
+          const updatedPagesMap = new Map(returnedPages.map((p: Page) => [p.path, p]));
+          const mergedPages: Page[] = pages.map(page => 
+            updatedPagesMap.has(page.path) ? updatedPagesMap.get(page.path)! : page
+          );
+          returnedPages.forEach((page: Page) => {
+            if (!pages.find(p => p.path === page.path)) {
+              mergedPages.push(page);
+            }
+          });
+          
+          setPages(mergedPages);
+          setLastSavedPages([...mergedPages]);
           setCommits([res.commit, ...commits]);
           setPrompts(
             [...prompts, prompt]
           )
           setSelectedElement(null);
           setSelectedFiles([]);
+          // setContextFile(null); not needed yet, keep context for the next request.
           setIsEditableModeEnabled(false);
-          setIsAiWorking(false); // This was missing!
+          setIsAiWorking(false);
         }
 
         if (audio.current) audio.current.play();
@@ -348,35 +381,36 @@ export const useAi = (onScrollToBottom?: () => void) => {
     }
   };
 
-  const formatPages = (content: string) => {
+  const formatPages = (content: string, isStreaming: boolean = true) => {
     const pages: Page[] = [];
-    if (!content.match(/<<<<<<< START_TITLE (.*?) >>>>>>> END_TITLE/)) {
+    if (!content.match(/<<<<<<< NEW_FILE_START (.*?) >>>>>>> NEW_FILE_END/)) {
       return pages;
     }
 
     const cleanedContent = content.replace(
-      /[\s\S]*?<<<<<<< START_TITLE (.*?) >>>>>>> END_TITLE/,
-      "<<<<<<< START_TITLE $1 >>>>>>> END_TITLE"
+      /[\s\S]*?<<<<<<< NEW_FILE_START (.*?) >>>>>>> NEW_FILE_END/,
+      "<<<<<<< NEW_FILE_START $1 >>>>>>> NEW_FILE_END"
     );
-    const htmlChunks = cleanedContent.split(
-      /<<<<<<< START_TITLE (.*?) >>>>>>> END_TITLE/
+    const fileChunks = cleanedContent.split(
+      /<<<<<<< NEW_FILE_START (.*?) >>>>>>> NEW_FILE_END/
     );
     const processedChunks = new Set<number>();
 
-    htmlChunks.forEach((chunk, index) => {
+    fileChunks.forEach((chunk, index) => {
       if (processedChunks.has(index) || !chunk?.trim()) {
         return;
       }
-      const htmlContent = extractHtmlContent(htmlChunks[index + 1]);
+      const filePath = chunk.trim();
+      const fileContent = extractFileContent(fileChunks[index + 1], filePath);
 
-      if (htmlContent) {
+      if (fileContent) {
         const page: Page = {
-          path: chunk.trim(),
-          html: htmlContent,
+          path: filePath,
+          html: fileContent,
         };
         pages.push(page);
 
-        if (htmlContent.length > 200) {
+        if (fileContent.length > 200) {
           onScrollToBottom?.();
         }
 
@@ -386,68 +420,82 @@ export const useAi = (onScrollToBottom?: () => void) => {
     });
     if (pages.length > 0) {
       setPages(pages);
-      const lastPagePath = pages[pages.length - 1]?.path;
-      setCurrentPage(lastPagePath || "index.html");
+      if (isStreaming) {
+        // Find new pages that haven't been shown yet (HTML, CSS, JS, etc.)
+        const newPages = pages.filter(p => 
+          !streamingPagesRef.current.has(p.path)
+        );
+        
+        if (newPages.length > 0) {
+          const newPage = newPages[0];
+          setCurrentPage(newPage.path);
+          streamingPagesRef.current.add(newPage.path);
+          
+          // Update preview if it's an HTML file not in components folder
+          if (newPage.path.endsWith('.html') && !newPage.path.includes('/components/')) {
+            setPreviewPage(newPage.path);
+          }
+        }
+      } else {
+        streamingPagesRef.current.clear();
+        const indexPage = pages.find(p => p.path === 'index.html' || p.path === 'index' || p.path === '/');
+        if (indexPage) {
+          setCurrentPage(indexPage.path);
+        }
+      }
     }
 
     return pages;
   };
 
-  const formatPage = (content: string, currentPagePath: string) => {
-    if (!content.match(/<<<<<<< START_TITLE (.*?) >>>>>>> END_TITLE/)) {
-      return null;
-    }
-
-    const cleanedContent = content.replace(
-      /[\s\S]*?<<<<<<< START_TITLE (.*?) >>>>>>> END_TITLE/,
-      "<<<<<<< START_TITLE $1 >>>>>>> END_TITLE"
-    );
-
-    const htmlChunks = cleanedContent.split(
-      /<<<<<<< START_TITLE (.*?) >>>>>>> END_TITLE/
-    )?.filter(Boolean);
-
-    const pagePath = htmlChunks[0]?.trim() || "";
-    const htmlContent = extractHtmlContent(htmlChunks[1]);
-
-    if (!pagePath || !htmlContent) {
-      return null;
-    }
-
-    const page: Page = {
-      path: pagePath,
-      html: htmlContent,
-    };
-
-    setPages(prevPages => {
-      const existingPageIndex = prevPages.findIndex(p => p.path === currentPagePath || p.path === pagePath);
-      
-      if (existingPageIndex !== -1) {
-        const updatedPages = [...prevPages];
-        updatedPages[existingPageIndex] = page;
-        return updatedPages;
+  const extractFileContent = (chunk: string, filePath: string): string => {
+    if (!chunk) return "";
+    
+    // Remove backticks first
+    let content = chunk.trim();
+    
+    // Handle different file types
+    if (filePath.endsWith('.css')) {
+      // Try to extract CSS from complete code blocks first
+      const cssMatch = content.match(/```css\s*([\s\S]*?)\s*```/);
+      if (cssMatch) {
+        content = cssMatch[1];
       } else {
-        return [...prevPages, page];
+        // Handle incomplete code blocks during streaming (remove opening fence)
+        content = content.replace(/^```css\s*/i, "");
       }
-    });
-
-    setCurrentPage(pagePath);
-
-    if (htmlContent.length > 200) {
-      onScrollToBottom?.();
+      // Remove any remaining backticks
+      return content.replace(/```/g, "").trim();
+    } else if (filePath.endsWith('.js')) {
+      // Try to extract JavaScript from complete code blocks first
+      const jsMatch = content.match(/```(?:javascript|js)\s*([\s\S]*?)\s*```/);
+      if (jsMatch) {
+        content = jsMatch[1];
+      } else {
+        // Handle incomplete code blocks during streaming (remove opening fence)
+        content = content.replace(/^```(?:javascript|js)\s*/i, "");
+      }
+      // Remove any remaining backticks
+      return content.replace(/```/g, "").trim();
+    } else {
+      // Handle HTML files
+      const htmlMatch = content.match(/```html\s*([\s\S]*?)\s*```/);
+      if (htmlMatch) {
+        content = htmlMatch[1];
+      } else {
+        // Handle incomplete code blocks during streaming (remove opening fence)
+        content = content.replace(/^```html\s*/i, "");
+        // Try to find HTML starting with DOCTYPE
+        const doctypeMatch = content.match(/<!DOCTYPE html>[\s\S]*/);
+        if (doctypeMatch) {
+          content = doctypeMatch[0];
+        }
+      }
+      
+      let htmlContent = content.replace(/```/g, "");
+      htmlContent = ensureCompleteHtml(htmlContent);
+      return htmlContent;
     }
-
-    return page;
-  };
-
-  const extractHtmlContent = (chunk: string): string => {
-    if (!chunk) return "";
-    const htmlMatch = chunk.trim().match(/<!DOCTYPE html>[\s\S]*/);
-    if (!htmlMatch) return "";
-    let htmlContent = htmlMatch[0];
-    htmlContent = ensureCompleteHtml(htmlContent);
-    htmlContent = htmlContent.replace(/```/g, "");
-    return htmlContent;
   };
 
   const ensureCompleteHtml = (html: string): string => {
@@ -488,6 +536,8 @@ export const useAi = (onScrollToBottom?: () => void) => {
     setSelectedElement,
     selectedFiles,
     setSelectedFiles,
+    contextFile,
+    setContextFile,
     isEditableModeEnabled,
     setIsEditableModeEnabled,
     globalAiLoading: isThinking || isAiWorking,

hooks/useEditor.ts

@@ -98,6 +98,17 @@ export const useEditor = (namespace?: string, repoId?: string) => {
     client.setQueryData(["editor.currentPage"], newCurrentPage);
   };
 
+  const { data: previewPage = "" } = useQuery({
+    queryKey: ["editor.previewPage"],
+    queryFn: async () => "",
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    refetchOnMount: false,
+  });
+  const setPreviewPage = (newPreviewPage: string) => {
+    client.setQueryData(["editor.previewPage"], newPreviewPage);
+  };
+
   const { data: prompts = [] } = useQuery({
     queryKey: ["editor.prompts"],
     queryFn: async () => [],
@@ -338,6 +349,8 @@ export const useEditor = (namespace?: string, repoId?: string) => {
     setDevice,
     currentPage,
     setCurrentPage,
+    previewPage,
+    setPreviewPage,
     currentPageData,
     currentTab,
     setCurrentTab,

lib/inject-badge.ts

@@ -0,0 +1,50 @@
+/**
+ * Injects the DeepSite badge script into HTML content before the closing </body> tag.
+ * If the script already exists, it ensures only one instance is present.
+ * 
+ * @param html - The HTML content to inject the script into
+ * @returns The HTML content with the badge script injected
+ */
+export function injectDeepSiteBadge(html: string): string {
+  const badgeScript = '<script src="https://deepsite.hf.co/deepsite-badge.js"></script>';
+  
+  // Remove any existing badge script to avoid duplicates
+  const cleanedHtml = html.replace(
+    /<script\s+src=["']https:\/\/deepsite\.hf\.co\/deepsite-badge\.js["']\s*><\/script>\s*/gi,
+    ''
+  );
+  
+  // Check if there's a closing body tag
+  const bodyCloseIndex = cleanedHtml.lastIndexOf('</body>');
+  
+  if (bodyCloseIndex !== -1) {
+    // Inject the script before the closing </body> tag
+    return (
+      cleanedHtml.slice(0, bodyCloseIndex) +
+      badgeScript +
+      '\n' +
+      cleanedHtml.slice(bodyCloseIndex)
+    );
+  }
+  
+  // If no closing body tag, append the script at the end
+  return cleanedHtml + '\n' + badgeScript;
+}
+
+/**
+ * Checks if a page path represents the main index page
+ * 
+ * @param path - The page path to check
+ * @returns True if the path represents the main index page
+ */
+export function isIndexPage(path: string): boolean {
+  const normalizedPath = path.toLowerCase();
+  return (
+    normalizedPath === '/' ||
+    normalizedPath === 'index' ||
+    normalizedPath === '/index' ||
+    normalizedPath === 'index.html' ||
+    normalizedPath === '/index.html'
+  );
+}
+

lib/prompts.ts

@@ -2,20 +2,15 @@ export const SEARCH_START = "<<<<<<< SEARCH";
 export const DIVIDER = "=======";
 export const REPLACE_END = ">>>>>>> REPLACE";
 export const MAX_REQUESTS_PER_IP = 4;
-export const TITLE_PAGE_START = "<<<<<<< START_TITLE ";
-export const TITLE_PAGE_END = " >>>>>>> END_TITLE";
-export const NEW_PAGE_START = "<<<<<<< NEW_PAGE_START ";
-export const NEW_PAGE_END = " >>>>>>> NEW_PAGE_END";
-export const UPDATE_PAGE_START = "<<<<<<< UPDATE_PAGE_START ";
-export const UPDATE_PAGE_END = " >>>>>>> UPDATE_PAGE_END";
-export const PROJECT_NAME_START = "<<<<<<< PROJECT_NAME_START ";
-export const PROJECT_NAME_END = " >>>>>>> PROJECT_NAME_END";
+export const NEW_FILE_START = "<<<<<<< NEW_FILE_START ";
+export const NEW_FILE_END = " >>>>>>> NEW_FILE_END";
+export const UPDATE_FILE_START = "<<<<<<< UPDATE_FILE_START ";
+export const UPDATE_FILE_END = " >>>>>>> UPDATE_FILE_END";
+export const PROJECT_NAME_START = "<<<<<<< PROJECT_NAME_START";
+export const PROJECT_NAME_END = ">>>>>>> PROJECT_NAME_END";
 export const PROMPT_FOR_REWRITE_PROMPT = "<<<<<<< PROMPT_FOR_REWRITE_PROMPT ";
 export const PROMPT_FOR_REWRITE_PROMPT_END = " >>>>>>> PROMPT_FOR_REWRITE_PROMPT_END";
 
-// TODO REVIEW LINK. MAYBE GO BACK TO SANDPACK.
-// FIX PREVIEW LINK NOT WORKING ONCE THE SITE IS DEPLOYED.
-
 export const PROMPT_FOR_IMAGE_GENERATION = `If you want to use image placeholder, http://Static.photos Usage:Format: http://static.photos/[category]/[dimensions]/[seed] where dimensions must be one of: 200x200, 320x240, 640x360, 1024x576, or 1200x630; seed can be any number (1-999+) for consistent images or omit for random; categories include: nature, office, people, technology, minimal, abstract, aerial, blurred, bokeh, gradient, monochrome, vintage, white, black, blue, red, green, yellow, cityscape, workspace, food, travel, textures, industry, indoor, outdoor, studio, finance, medical, season, holiday, event, sport, science, legal, estate, restaurant, retail, wellness, agriculture, construction, craft, cosmetic, automotive, gaming, or education.
 Examples: http://static.photos/red/320x240/133 (red-themed with seed 133), http://static.photos/640x360 (random category and image), http://static.photos/nature/1200x630/42 (nature-themed with seed 42).`
 export const PROMPT_FOR_PROJECT_NAME = `REQUIRED: Generate a name for the project, based on the user's request. Try to be creative and unique. Add a emoji at the end of the name. It should be short, like 6 words. Be fancy, creative and funny. DON'T FORGET IT, IT'S IMPORTANT!`
@@ -28,24 +23,91 @@ If you want to use ICONS import Feather Icons (Make sure to add <script src="htt
 For interactive animations you can use: Vanta.js (Make sure to add <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> and <script>VANTA.GLOBE({...</script> in the body.).
 Don't hesitate to use real public API for the datas, you can find good ones here https://github.com/public-apis/public-apis depending on what the user asks for.
 You can create multiple pages website at once (following the format rules below) or a Single Page Application. But make sure to create multiple pages if the user asks for different pages.
+IMPORTANT: To avoid duplicate code across pages, you MUST create separate style.css and script.js files for shared CSS and JavaScript code. Each HTML file should link to these files using <link rel="stylesheet" href="style.css"> and <script src="script.js"></script>.
+WEB COMPONENTS: For reusable UI elements like navbars, footers, sidebars, headers, etc., create Native Web Components as separate files in components/ folder:
+- Create each component as a separate .js file in components/ folder (e.g., components/navbar.js, components/footer.js)
+- Each component file defines a class extending HTMLElement and registers it with customElements.define()
+- Use Shadow DOM for style encapsulation
+- Components render using template literals with inline styles
+- Include component files in HTML before using them: <script src="components/navbar.js"></script>
+- Use them in HTML pages with custom element tags (e.g., <custom-navbar></custom-navbar>)
+- If you want to use ICON you can use Feather Icons, as it's already included in the main pages.
+IMPORTANT: NEVER USE ONCLICK FUNCTION TO MAKE A REDIRECT TO NEW PAGE. MAKE SURE TO ALWAYS USE <a href=""/>, OTHERWISE IT WONT WORK WITH SHADOW ROOT AND WEB COMPONENTS.
+Example components/navbar.js:
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = \`
+      <style>
+        nav {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          padding: 1rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .logo { color: white; font-weight: bold; }
+        ul { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
+        a { color: white; text-decoration: none; }
+      </style>
+      <nav>
+        <div class="logo">My Website</div>
+        <ul>
+          <li><a href="/">Home</a></li>
+          <li><a href="/about.html">About</a></li>
+        </ul>
+      </nav>
+    \`;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);
+
+Example components/footer.js:
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = \`
+      <style>
+        footer {
+          background: #1a202c;
+          color: white;
+          padding: 2rem;
+          text-align: center;
+        }
+      </style>
+      <footer>
+        <p>&copy; 2024 My Website. All rights reserved.</p>
+      </footer>
+    \`;
+  }
+}
+customElements.define('custom-footer', CustomFooter);
+
+Then in HTML, include the component scripts and use the tags:
+<script src="components/navbar.js"></script>
+<script src="components/footer.js"></script>
+<custom-navbar></custom-navbar>
+<custom-footer></custom-footer>
 ${PROMPT_FOR_IMAGE_GENERATION}
 ${PROMPT_FOR_PROJECT_NAME}
 No need to explain what you did. Just return the expected result. AVOID Chinese characters in the code if not asked by the user.
-Return the results in a \`\`\`html\`\`\` markdown. Format the results like:
+Return the results following this format:
 1. Start with ${PROJECT_NAME_START}.
 2. Add the name of the project, right after the start tag.
 3. Close the start tag with the ${PROJECT_NAME_END}.
 4. The name of the project should be short and concise.
-5. Start with ${TITLE_PAGE_START}.
-6. Add the name of the page without special character, such as spaces or punctuation, using the .html format only, right after the start tag.
-7. Close the start tag with the ${TITLE_PAGE_END}.
-8. Start the HTML response with the triple backticks, like \`\`\`html.
-9. Insert the following html there.
-10. Close with the triple backticks, like \`\`\`.
-11. Retry if another pages.
+5. Generate files in this ORDER: index.html FIRST, then style.css, then script.js, then web components (components/navbar.js, components/footer.js, etc.), then other HTML pages.
+6. For each file, start with ${NEW_FILE_START}.
+7. Add the file name (index.html, style.css, script.js, components/navbar.js, about.html, etc.) right after the start tag.
+8. Close the start tag with the ${NEW_FILE_END}.
+9. Start the file content with the triple backticks and appropriate language marker (\`\`\`html, \`\`\`css, or \`\`\`javascript).
+10. Insert the file content there.
+11. Close with the triple backticks, like \`\`\`.
+12. Repeat for each file.
+13. Web components should be in separate .js files in components/ folder and included via <script> tags before use.
 Example Code:
-${PROJECT_NAME_START}Project Name${PROJECT_NAME_END}
-${TITLE_PAGE_START}index.html${TITLE_PAGE_END}
+${PROJECT_NAME_START} Project Name ${PROJECT_NAME_END}
+${NEW_FILE_START}index.html${NEW_FILE_END}
 \`\`\`html
 <!DOCTYPE html>
 <html lang="en">
@@ -54,34 +116,113 @@ ${TITLE_PAGE_START}index.html${TITLE_PAGE_END}
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Index</title>
     <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
 </head>
 <body>
+    <custom-navbar></custom-navbar>
     <h1>Hello World</h1>
-    <script>const { animate } = anime;</script>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
     <script>feather.replace();</script>
 </body>
 </html>
 \`\`\`
-IMPORTANT: The first file should be always named index.html.`
+${NEW_FILE_START}style.css${NEW_FILE_END}
+\`\`\`css
+/* Shared styles across all pages */
+body {
+    font-family: 'Inter', sans-serif;
+}
+\`\`\`
+${NEW_FILE_START}script.js${NEW_FILE_END}
+\`\`\`javascript
+// Shared JavaScript across all pages
+console.log('App loaded');
+\`\`\`
+${NEW_FILE_START}components/navbar.js${NEW_FILE_END}
+\`\`\`javascript
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = \`
+      <style>
+        nav {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          padding: 1rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .logo { color: white; font-weight: bold; font-size: 1.25rem; }
+        ul { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
+        a { color: white; text-decoration: none; transition: opacity 0.2s; }
+        a:hover { opacity: 0.8; }
+      </style>
+      <nav>
+        <div class="logo">My Website</div>
+        <ul>
+          <li><a href="/">Home</a></li>
+          <li><a href="/about.html">About</a></li>
+        </ul>
+      </nav>
+    \`;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);
+\`\`\`
+${NEW_FILE_START}components/footer.js${NEW_FILE_END}
+\`\`\`javascript
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = \`
+      <style>
+        footer {
+          background: #1a202c;
+          color: white;
+          padding: 2rem;
+          text-align: center;
+          margin-top: auto;
+        }
+      </style>
+      <footer>
+        <p>&copy; 2024 My Website. All rights reserved.</p>
+      </footer>
+    \`;
+  }
+}
+customElements.define('custom-footer', CustomFooter);
+\`\`\`
+CRITICAL: The first file MUST always be index.html. Then generate style.css and script.js. If you create web components, place them in components/ folder as separate .js files. All HTML files MUST include <link rel="stylesheet" href="style.css"> and component scripts before using them (e.g., <script src="components/navbar.js"></script>), then <script src="script.js"></script>.`
 
-export const FOLLOW_UP_SYSTEM_PROMPT = `You are an expert UI/UX and Front-End Developer modifying an existing HTML files.
-The user wants to apply changes and probably add new features/pages to the website, based on their request.
-You MUST output ONLY the changes required using the following UPDATE_PAGE_START and SEARCH/REPLACE format. Do NOT output the entire file.
+export const FOLLOW_UP_SYSTEM_PROMPT = `You are an expert UI/UX and Front-End Developer modifying existing files (HTML, CSS, JavaScript).
+The user wants to apply changes and probably add new features/pages/styles/scripts to the website, based on their request.
+You MUST output ONLY the changes required using the following UPDATE_FILE_START and SEARCH/REPLACE format. Do NOT output the entire file.
 Don't hesitate to use real public API for the datas, you can find good ones here https://github.com/public-apis/public-apis depending on what the user asks for.
-If it's a new page, you MUST applied the following NEW_PAGE_START and UPDATE_PAGE_END format.
+If it's a new file (HTML page, CSS, JS, or Web Component), you MUST use the NEW_FILE_START and NEW_FILE_END format.
+IMPORTANT: When adding shared CSS or JavaScript code, modify the style.css or script.js files. Make sure all HTML files include <link rel="stylesheet" href="style.css"> and <script src="script.js"></script> tags.
+WEB COMPONENTS: For reusable UI elements like navbars, footers, sidebars, headers, etc., create or update Native Web Components as separate files in components/ folder:
+- Create each component as a separate .js file in components/ folder (e.g., components/navbar.js, components/footer.js)
+- Each component file defines a class extending HTMLElement and registers it with customElements.define()
+- Use Shadow DOM (attachShadow) for style encapsulation
+- Use template literals for HTML/CSS content
+- Include component files in HTML pages where needed: <script src="components/navbar.js"></script>
+- Use custom element tags in HTML (e.g., <custom-navbar></custom-navbar>, <custom-footer></custom-footer>)
+IMPORTANT: NEVER USE ONCLICK FUNCTION TO MAKE A REDIRECT TO NEW PAGE. MAKE SURE TO ALWAYS USE <a href=""/>, OTHERWISE IT WONT WORK WITH SHADOW ROOT AND WEB COMPONENTS.
 ${PROMPT_FOR_IMAGE_GENERATION}
 Do NOT explain the changes or what you did, just return the expected results.
 Update Format Rules:
 1. Start with ${PROJECT_NAME_START}.
 2. Add the name of the project, right after the start tag.
 3. Close the start tag with the ${PROJECT_NAME_END}.
-4. Start with ${UPDATE_PAGE_START}
-5. Provide the name of the page you are modifying.
-6. Close the start tag with the ${UPDATE_PAGE_END}.
+4. Start with ${UPDATE_FILE_START}
+5. Provide the name of the file you are modifying (index.html, style.css, script.js, etc.).
+6. Close the start tag with the ${UPDATE_FILE_END}.
 7. Start with ${SEARCH_START}
 8. Provide the exact lines from the current code that need to be replaced.
 9. Use ${DIVIDER} to separate the search block from the replacement.
@@ -94,8 +235,8 @@ Update Format Rules:
 Example Modifying Code:
 \`\`\`
 Some explanation...
-${PROJECT_NAME_START}Project Name${PROJECT_NAME_END}
-${UPDATE_PAGE_START}index.html${UPDATE_PAGE_END}
+${PROJECT_NAME_START} Project Name ${PROJECT_NAME_END}
+${UPDATE_FILE_START}index.html${UPDATE_FILE_END}
 ${SEARCH_START}
     <h1>Old Title</h1>
 ${DIVIDER}
@@ -104,67 +245,184 @@ ${REPLACE_END}
 ${SEARCH_START}
   </body>
 ${DIVIDER}
-    <script>console.log("Added script");</script>
+    <script src="script.js"></script>
   </body>
 ${REPLACE_END}
 \`\`\`
+Example Updating CSS:
+\`\`\`
+${UPDATE_FILE_START}style.css${UPDATE_FILE_END}
+${SEARCH_START}
+body {
+    background: white;
+}
+${DIVIDER}
+body {
+    background: linear-gradient(to right, #667eea, #764ba2);
+}
+${REPLACE_END}
+\`\`\`
 Example Deleting Code:
 \`\`\`
 Removing the paragraph...
-${TITLE_PAGE_START}index.html${TITLE_PAGE_END}
+${UPDATE_FILE_START}index.html${UPDATE_FILE_END}
 ${SEARCH_START}
   <p>This paragraph will be deleted.</p>
 ${DIVIDER}
 ${REPLACE_END}
 \`\`\`
-The user can also ask to add a new page, in this case you should return the new page in the following format:
-1. Start with ${NEW_PAGE_START}.
-2. Add the name of the page without special character, such as spaces or punctuation, using the .html format only, right after the start tag.
-3. Close the start tag with the ${NEW_PAGE_END}.
-4. Start the HTML response with the triple backticks, like \`\`\`html.
-5. Insert the following html there.
+The user can also ask to add a new file (HTML page, CSS, JS, or Web Component), in this case you should return the new file in the following format:
+1. Start with ${NEW_FILE_START}.
+2. Add the name of the file (e.g., about.html, style.css, script.js, components/navbar.html), right after the start tag.
+3. Close the start tag with the ${NEW_FILE_END}.
+4. Start the file content with the triple backticks and appropriate language marker (\`\`\`html, \`\`\`css, or \`\`\`javascript).
+5. Insert the file content there.
 6. Close with the triple backticks, like \`\`\`.
-7. Retry if another pages.
-Example Code:
-${NEW_PAGE_START}index.html${NEW_PAGE_END}
+7. Repeat for additional files.
+Example Creating New HTML Page:
+${NEW_FILE_START}about.html${NEW_FILE_END}
 \`\`\`html
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Index</title>
+    <title>About</title>
     <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
-    <script src="https://unpkg.com/feather-icons"></script>
 </head>
 <body>
-    <h1>Hello World</h1>
-    <script>const { animate } = anime;</script>
-    <script>feather.replace();</script>
+    <custom-navbar></custom-navbar>
+    <h1>About Page</h1>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
 </body>
 </html>
 \`\`\`
-IMPORTANT: While creating a new page, UPDATE ALL THE OTHERS (using the UPDATE_PAGE_START and SEARCH/REPLACE format) pages to add or replace the link to the new page, otherwise the user will not be able to navigate to the new page. (Dont use onclick to navigate, only href)
+Example Creating New Web Component:
+${NEW_FILE_START}components/sidebar.js${NEW_FILE_END}
+\`\`\`javascript
+class CustomSidebar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = \`
+      <style>
+        aside {
+          width: 250px;
+          background: #f7fafc;
+          padding: 1rem;
+          height: 100vh;
+          position: fixed;
+          left: 0;
+          top: 0;
+          border-right: 1px solid #e5e7eb;
+        }
+        h3 { margin: 0 0 1rem 0; }
+        ul { list-style: none; padding: 0; margin: 0; }
+        li { margin: 0.5rem 0; }
+        a { color: #374151; text-decoration: none; }
+        a:hover { color: #667eea; }
+      </style>
+      <aside>
+        <h3>Sidebar</h3>
+        <ul>
+          <li><a href="/">Home</a></li>
+          <li><a href="/about.html">About</a></li>
+        </ul>
+      </aside>
+    \`;
+  }
+}
+customElements.define('custom-sidebar', CustomSidebar);
+\`\`\`
+Then UPDATE HTML files to include the component:
+${UPDATE_FILE_START}index.html${UPDATE_FILE_END}
+${SEARCH_START}
+  <script src="script.js"></script>
+</body>
+${DIVIDER}
+  <script src="components/sidebar.js"></script>
+  <script src="script.js"></script>
+</body>
+${REPLACE_END}
+${SEARCH_START}
+<body>
+  <custom-navbar></custom-navbar>
+${DIVIDER}
+<body>
+  <custom-sidebar></custom-sidebar>
+  <custom-navbar></custom-navbar>
+${REPLACE_END}
+IMPORTANT: While creating a new HTML page, UPDATE ALL THE OTHER HTML files (using the UPDATE_FILE_START and SEARCH/REPLACE format) to add or replace the link to the new page, otherwise the user will not be able to navigate to the new page. (Don't use onclick to navigate, only href)
+When creating new CSS/JS files, UPDATE ALL HTML files to include the appropriate <link> or <script> tags.
+When creating new Web Components:
+1. Create a NEW FILE in components/ folder (e.g., components/sidebar.js) with the component definition
+2. UPDATE ALL HTML files that need the component to include <script src="components/componentname.js"></script> before the closing </body> tag
+3. Use the custom element tag (e.g., <custom-componentname></custom-componentname>) in HTML pages where needed
 No need to explain what you did. Just return the expected result.`
 
 export const PROMPTS_FOR_AI = [
-  "Create a landing page for a SaaS product, with a hero section, a features section, a pricing section, and a call to action section.",
-  "Create a portfolio website for a designer, with a hero section, a projects section, a about section, and a contact section.",
-  "Create a blog website for a writer, with a hero section, a blog section, a about section, and a contact section.",
-  "Create a Tic Tac Toe game, with a game board, a history section, and a score section.",
-  "Create a Weather App, with a search bar, a weather section, and a forecast section.",
-  "Create a Calculator, with a calculator section, and a history section.",
-  "Create a Todo List, with a todo list section, and a history section.",
-  "Create a Calendar, with a calendar section, and a history section.",
-  "Create a Music Player, with a music player section, and a history section.",
-  "Create a Quiz App, with a quiz section, and a history section.",
-  "Create a Pomodoro Timer, with a timer section, and a history section.",
-  "Create a Notes App, with a notes section, and a history section.",
-  "Create a Task Manager, with a task list section, and a history section.",
-  "Create a Password Generator, with a password generator section, and a history section.",
-  "Create a Currency Converter, with a currency converter section, and a history section.",
-  "Create a Dictionary, with a dictionary section, and a history section.",
+  // Business & SaaS
+  "Create a modern SaaS landing page with a hero section featuring a product demo, benefits section with icons, pricing plans comparison table, customer testimonials with photos, FAQ accordion, and a prominent call-to-action footer.",
+  "Create a professional startup landing page with animated hero section, problem-solution showcase, feature highlights with screenshots, team members grid, investor logos, press mentions, and email signup form.",
+  "Create a business consulting website with a hero banner, services we offer section with hover effects, case studies carousel, client testimonials, team profiles with LinkedIn links, blog preview, and contact form.",
+  
+  // E-commerce & Retail
+  "Create an e-commerce product landing page with hero image carousel, product features grid, size/color selector, customer reviews with star ratings, related products section, add to cart button, and shipping information.",
+  "Create an online store homepage with navigation menu, banner slider, featured products grid with hover effects, category cards, special offers section, newsletter signup, and footer with social links.",
+  "Create a fashion brand website with a full-screen hero image, new arrivals section, shop by category grid, Instagram feed integration, brand story section, and styling lookbook gallery.",
+  
+  // Food & Restaurant
+  "Create a restaurant website with a hero section showing signature dishes, menu with categories and prices, chef's special highlights, reservation form with date picker, location map, opening hours, and customer reviews.",
+  "Create a modern coffee shop website with a cozy hero image, menu board with drinks and pastries, about our story section, location finder, online ordering button, and Instagram gallery showing café atmosphere.",
+  "Create a food delivery landing page with cuisine categories, featured restaurants carousel, how it works steps, delivery zones map, app download buttons, promotional offers banner, and customer testimonials.",
+  
+  // Real Estate & Property
+  "Create a real estate agency website with property search filters (location, price, bedrooms), featured listings grid with images, virtual tour options, mortgage calculator, agent profiles, neighborhood guides, and contact form.",
+  "Create a luxury property showcase website with full-screen image slider, property details with floor plans, amenities icons, 360° virtual tour button, location highlights, similar properties section, and inquiry form.",
+  
+  // Creative & Portfolio
+  "Create a professional portfolio website for a photographer with a masonry image gallery, project categories filter, full-screen lightbox viewer, about me section with photo, services offered, client logos, and contact form.",
+  "Create a creative agency portfolio with animated hero section, featured projects showcase with case studies, services we provide, team members grid, client testimonials slider, awards section, and get a quote form.",
+  "Create a UX/UI designer portfolio with hero section showcasing best work, projects grid with filter tags, detailed case studies with before/after, design process timeline, skills and tools, testimonials, and hire me button.",
+  
+  // Personal & Blog
+  "Create a personal brand website with an engaging hero section, about me with professional photo, skills and expertise cards, featured blog posts, speaking engagements, social media links, and newsletter signup.",
+  "Create a modern blog website with featured post hero, article cards grid with thumbnails, categories sidebar, search functionality, author bio section, related posts, social sharing buttons, and comment section.",
+  "Create a travel blog with full-width destination photos, travel stories grid, interactive world map showing visited places, travel tips section, gear recommendations, and subscription form.",
+  
+  // Health & Fitness
+  "Create a fitness gym website with motivational hero video, class schedule timetable, trainer profiles with specializations, membership pricing comparison, transformation gallery, facilities photos, and trial class signup form.",
+  "Create a yoga studio website with calming hero section, class types with descriptions, instructor bios with photos, weekly schedule calendar, pricing packages, meditation tips blog, studio location map, and booking form.",
+  "Create a health & wellness landing page with hero section, service offerings, nutritionist/trainer profiles, success stories before/after, health blog articles, free consultation booking, and testimonials slider.",
+  
+  // Education & Learning
+  "Create an online course landing page with course overview, curriculum breakdown with expandable modules, instructor credentials, student testimonials with videos, pricing and enrollment options, FAQ section, and money-back guarantee badge.",
+  "Create a university/school website with hero carousel, academic programs grid, campus life photo gallery, upcoming events calendar, faculty directory, admissions process timeline, virtual campus tour, and application form.",
+  "Create a tutoring service website with subjects offered, tutor profiles with qualifications, pricing plans, scheduling calendar, student success stories, free trial lesson signup, learning resources, and parent testimonials.",
+  
+  // Events & Entertainment
+  "Create an event conference website with hero countdown timer, speaker lineup with bios, schedule/agenda tabs, venue information with map, ticket tiers and pricing, sponsors logos grid, past event highlights, and registration form.",
+  "Create a music festival landing page with artist/band lineup, stage schedule, venue map, ticket options with early bird pricing, photo gallery from previous years, camping information, FAQ, and buy tickets button.",
+  "Create a wedding website with couple's story, event timeline, venue details with directions, RSVP form, photo gallery, gift registry links, accommodation suggestions, and message board for guests.",
+  
+  // Professional Services
+  "Create a law firm website with practice areas grid, attorney profiles with expertise, case results/wins, legal resources blog, testimonials, office locations, consultation booking form, and trust badges.",
+  "Create a dental clinic website with services offered, meet the dentist section with credentials, patient testimonials, before/after smile gallery, insurance accepted, appointment booking system, emergency contact, and dental tips blog.",
+  "Create an architecture firm website with portfolio of completed projects with large images, services overview, design process timeline, team members, awards and recognition, sustainable design approach, and project inquiry form.",
+  
+  // Technology & Apps
+  "Create an app landing page with hero section showing app screenshots, key features with icons, how it works steps, pricing plans, user testimonials, app store download buttons, video demo, and early access signup.",
+  "Create a software product page with hero demo video, features comparison table, integration logos, API documentation link, use cases with examples, security certifications, customer stories, and free trial signup.",
+  
+  // Non-profit & Community
+  "Create a non-profit organization website with mission statement hero, our impact statistics, current campaigns, donation form with amounts, volunteer opportunities, success stories, upcoming events, and newsletter signup.",
+  "Create a community organization website with welcome hero, about our mission, programs and services offered, event calendar, member spotlights, resources library, donation/support options, and get involved form.",
+  
+  // Misc & Utility (keeping a few interactive examples)
+  "Create an interactive weather dashboard with current conditions, 5-day forecast cards, hourly temperature graph, air quality index, UV index, sunrise/sunset times, and location search with autocomplete.",
+  "Create a modern calculator with basic operations, scientific mode toggle, calculation history log, memory functions, keyboard support, light/dark theme switch, and copy result button.",
 ];

public/deepsite-badge.js

@@ -0,0 +1,170 @@
+(function() {
+  'use strict';
+  
+  // Check if badge already exists
+  if (document.getElementById('deepsite-badge-wrapper')) {
+    return;
+  }
+
+  // Inject keyframes for gradient rotation
+  const style = document.createElement('style');
+  style.textContent = `
+    @keyframes deepsite-spin {
+      0% {
+        transform: translate(-50%, -50%) rotate(0deg);
+      }
+      100% {
+        transform: translate(-50%, -50%) rotate(360deg);
+      }
+    }
+    
+    #deepsite-badge-wrapper i {
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: -1;
+      padding: 1.5px;
+      transition-property: all;
+      transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+      transition-duration: .2s;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
+      border-radius: inherit;
+    }
+    
+    #deepsite-badge-wrapper i::before {
+      content: "";
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      display: block;
+      border-radius: 9999px;
+      opacity: 0;
+      background: conic-gradient(from 0deg at 50% 50%, #ec4899, #fbbf24, #3b82f6, #ec4899);
+      width: calc(100% * 2);
+      padding-bottom: calc(100% * 2);
+      transform: translate(-50%, -50%);
+      z-index: -1;
+      will-change: transform;
+    }
+    
+    #deepsite-badge-wrapper:hover i::before {
+      opacity: 1;
+      animation: deepsite-spin 3s linear infinite;
+    }
+  `;
+  document.head.appendChild(style);
+
+  // Create badge wrapper (like the button element)
+  const badgeWrapper = document.createElement('div');
+  badgeWrapper.id = 'deepsite-badge-wrapper';
+  
+  // Create inner badge (like the span element)
+  const badgeInner = document.createElement('span');
+  badgeInner.id = 'deepsite-badge-inner';
+  
+  // Create mask element (the i element)
+  const borderMask = document.createElement('i');
+  
+  // Create link
+  const link = document.createElement('a');
+  link.href = 'https://deepsite.hf.co';
+  link.target = '_blank';
+  link.rel = 'noopener noreferrer';
+  
+  // Create icon placeholder
+  const icon = document.createElement('img');
+  icon.src = 'https://deepsite.hf.co/logo.svg';
+  icon.alt = 'DeepSite';
+  icon.style.marginRight = '8px';
+  icon.style.width = '20px';
+  icon.style.height = '20px';
+  icon.style.filter = 'brightness(0) invert(1)';
+  
+  // Create text
+  const text = document.createTextNode('Made with DeepSite');
+  
+  // Apply styles to wrapper (like button element)
+  Object.assign(badgeWrapper.style, {
+    position: 'fixed',
+    bottom: '20px',
+    left: '20px',
+    zIndex: '999999',
+    color: '#ffffff',
+    borderRadius: '9999px',
+    background: 'rgba(0, 0, 0, 0.4)',
+    fontSize: '14px',
+    fontWeight: '500',
+    display: 'inline-block',
+    cursor: 'pointer',
+    padding: '1.5px',
+    overflow: 'hidden',
+    backdropFilter: 'blur(16px) saturate(180%)',
+    WebkitBackdropFilter: 'blur(16px) saturate(180%)',
+  });
+  
+  // Apply styles to inner badge (like span element)
+  Object.assign(badgeInner.style, {
+    background: 'rgba(0, 0, 0, 0.6)',
+    padding: '10px 20px',
+    display: 'flex',
+    alignItems: 'center',
+    borderRadius: '9999px',
+    boxShadow: '0 8px 32px 0 rgba(0, 0, 0, 0.5)',
+    transition: 'all 0.3s ease',
+    border: '1px solid rgba(255, 255, 255, 0.1)'
+  });
+  
+  // Apply styles to link
+  Object.assign(link.style, {
+    color: '#ffffff',
+    textDecoration: 'none',
+    fontWeight: '500',
+    display: 'flex',
+    alignItems: 'center',
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    textShadow: '0 2px 4px rgba(0, 0, 0, 0.3)'
+  });
+  
+  // Add hover effect
+  badgeWrapper.addEventListener('mouseenter', function() {
+    badgeInner.style.background = 'rgba(0, 0, 0, 0.75)';
+    badgeInner.style.boxShadow = '0 8px 32px 0 rgba(0, 0, 0, 0.7)';
+  });
+  
+  badgeWrapper.addEventListener('mouseleave', function() {
+    badgeInner.style.background = 'rgba(0, 0, 0, 0.6)';
+    badgeInner.style.boxShadow = '0 8px 32px 0 rgba(0, 0, 0, 0.5)';
+  });
+  
+  // Append elements
+  link.appendChild(icon);
+  link.appendChild(text);
+  badgeInner.appendChild(link);
+  badgeWrapper.appendChild(badgeInner);
+  badgeWrapper.appendChild(borderMask);
+  
+  // Wait for DOM to be ready
+  function init() {
+    if (document.body) {
+      document.body.appendChild(badgeWrapper);
+    } else {
+      document.addEventListener('DOMContentLoaded', function() {
+        document.body.appendChild(badgeWrapper);
+      });
+    }
+  }
+  
+  // Initialize
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();
+