manual saves

app/api/ask/route.ts

@@ -514,7 +514,7 @@ export async function PUT(request: NextRequest) {
         files.push(file);
       });
 
-      uploadFiles({
+      const response = await uploadFiles({
         repo: {
           type: "space",
           name: repoId,
@@ -528,6 +528,10 @@ export async function PUT(request: NextRequest) {
         ok: true,
         updatedLines,
         pages: updatedPages,
+        commit: {
+          ...response.commit,
+          title: prompt,
+        }
       });
     } else {
       return NextResponse.json(

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

@@ -1,7 +1,8 @@
 import { NextRequest, NextResponse } from "next/server";
-import { RepoDesignation, listFiles, spaceInfo, uploadFiles } from "@huggingface/hub";
+import { RepoDesignation, listFiles, spaceInfo, uploadFiles, deleteFiles } from "@huggingface/hub";
 
 import { isAuthenticated } from "@/lib/auth";
+import { Page } from "@/types";
 
 export async function POST(
   req: NextRequest,
@@ -50,7 +51,9 @@ export async function POST(
 
     // Fetch files from the specific commit
     const files: File[] = [];
+    const pages: Page[] = [];
     const allowedExtensions = ["html", "md", "css", "js", "json", "txt"];
+    const commitFilePaths: Set<string> = new Set();
     
     // Get all files from the specific commit
     for await (const fileInfo of listFiles({
@@ -61,6 +64,8 @@ export async function POST(
       const fileExtension = fileInfo.path.split('.').pop()?.toLowerCase();
       
       if (allowedExtensions.includes(fileExtension || "")) {
+        commitFilePaths.add(fileInfo.path);
+        
         // Fetch the file content from the specific commit
         const response = await fetch(
           `https://huggingface.co/spaces/${namespace}/${repoId}/raw/${commitId}/${fileInfo.path}`
@@ -73,6 +78,11 @@ export async function POST(
           switch (fileExtension) {
             case "html":
               mimeType = "text/html";
+              // Add HTML files to pages array for client-side setPages
+              pages.push({
+                path: fileInfo.path,
+                html: content,
+              });
               break;
             case "css":
               mimeType = "text/css";
@@ -94,28 +104,63 @@ export async function POST(
       }
     }
 
-    if (files.length === 0) {
+    // Get files currently in main branch to identify files to delete
+    const mainBranchFilePaths: Set<string> = new Set();
+    for await (const fileInfo of listFiles({
+      repo,
+      accessToken: user.token as string,
+      revision: "main",
+    })) {
+      const fileExtension = fileInfo.path.split('.').pop()?.toLowerCase();
+      
+      if (allowedExtensions.includes(fileExtension || "")) {
+        mainBranchFilePaths.add(fileInfo.path);
+      }
+    }
+
+    // Identify files to delete (exist in main but not in commit)
+    const filesToDelete: string[] = [];
+    for (const mainFilePath of mainBranchFilePaths) {
+      if (!commitFilePaths.has(mainFilePath)) {
+        filesToDelete.push(mainFilePath);
+      }
+    }
+
+    if (files.length === 0 && filesToDelete.length === 0) {
       return NextResponse.json(
-        { ok: false, error: "No files found in the specified commit" },
+        { ok: false, error: "No files found in the specified commit and no files to delete" },
         { status: 404 }
       );
     }
 
+    // Delete files that exist in main but not in the commit being promoted
+    if (filesToDelete.length > 0) {
+      await deleteFiles({
+        repo,
+        paths: filesToDelete,
+        accessToken: user.token as string,
+        commitTitle: `Removed files from promoting ${commitId.slice(0, 7)}`,
+        commitDescription: `Removed files that don't exist in commit ${commitId}:\n${filesToDelete.map(path => `- ${path}`).join('\n')}`,
+      });
+    }
+
     // Upload the files to the main branch with a promotion commit message
-    await uploadFiles({
-      repo,
-      files,
-      accessToken: user.token as string,
-      commitTitle: `Promote version ${commitId.slice(0, 7)} to main`,
-      commitDescription: `Promoted commit ${commitId} to main branch`,
-    });
+    if (files.length > 0) {
+      await uploadFiles({
+        repo,
+        files,
+        accessToken: user.token as string,
+        commitTitle: `Promote version ${commitId.slice(0, 7)} to main`,
+        commitDescription: `Promoted commit ${commitId} to main branch`,
+      });
+    }
 
     return NextResponse.json(
       { 
         ok: true, 
         message: "Version promoted successfully",
         promotedCommit: commitId,
-        filesPromoted: files.length
+        pages: pages,
       },
       { status: 200 }
     );

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

@@ -96,15 +96,6 @@ export async function GET(
         { status: 403 }
       );
     }
-    // if (space.private) {
-    //   return NextResponse.json(
-    //     {
-    //       ok: false,
-    //       error: "Space must be public to access it",
-    //     },
-    //     { status: 403 }
-    //   );
-    // }
 
     const repo: RepoDesignation = {
       type: "space",
@@ -145,7 +136,7 @@ export async function GET(
     }
     const commits: Commit[] = [];
     for await (const commit of listCommits({ repo, accessToken: user.token as string })) {
-      if (commit.title.includes("initial commit") || commit.title.includes("image(s)") || commit.title.includes("Promote version")) {
+      if (commit.title.includes("initial commit") || commit.title.includes("image(s)") || commit.title.includes("Removed files from promoting")) {
         continue;
       }
       commits.push({

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

@@ -0,0 +1,64 @@
+import { NextRequest, NextResponse } from "next/server";
+import { uploadFiles } from "@huggingface/hub";
+
+import { isAuthenticated } from "@/lib/auth";
+import { Page } from "@/types";
+
+export async function PUT(
+  req: NextRequest,
+  { params }: { params: Promise<{ namespace: string; repoId: string }> }
+) {
+  const user = await isAuthenticated();
+  if (user instanceof NextResponse || !user) {
+    return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+  }
+
+  const param = await params;
+  const { namespace, repoId } = param;
+  const { pages, commitTitle = "Manual changes saved" } = await req.json();
+
+  if (!pages || !Array.isArray(pages) || pages.length === 0) {
+    return NextResponse.json(
+      { ok: false, error: "Pages are required" },
+      { status: 400 }
+    );
+  }
+
+  try {
+    // Prepare files for upload
+    const files: File[] = [];
+    pages.forEach((page: Page) => {
+      const file = new File([page.html], page.path, { type: "text/html" });
+      files.push(file);
+    });
+
+    // Upload files to HuggingFace Hub
+    const response = await uploadFiles({
+      repo: {
+        type: "space",
+        name: `${namespace}/${repoId}`,
+      },
+      files,
+      commitTitle,
+      accessToken: user.token as string,
+    });
+
+    return NextResponse.json({
+      ok: true,
+      pages,
+      commit: {
+        ...response.commit,
+        title: commitTitle,
+      }
+    });
+  } catch (error: any) {
+    console.error("Error saving manual changes:", error);
+    return NextResponse.json(
+      {
+        ok: false,
+        error: error.message || "Failed to save changes",
+      },
+      { status: 500 }
+    );
+  }
+}

components/editor/header/index.tsx

@@ -20,7 +20,6 @@ import {
 export function Header() {
   const { project } = useEditor();
   const { user, openLoginWindow } = useUser();
-  console.log(project);
   return (
     <header className="border-b bg-neutral-950 dark:border-neutral-800 grid grid-cols-3 lg:flex items-center max-lg:gap-3 justify-between z-20">
       <div className="flex items-center justify-between lg:max-w-[600px] lg:w-full py-2 px-2 lg:px-3 lg:pl-6 gap-3">

components/editor/history/index.tsx

@@ -44,7 +44,9 @@ export function History() {
                 className={classNames(
                   "px-4 text-gray-200 py-2 border-b border-gray-800 last:border-0 space-y-1",
                   {
-                    "bg-blue-500/10": currentCommit === item.oid,
+                    "bg-blue-500/10":
+                      currentCommit === item.oid ||
+                      (index === 0 && currentCommit === null),
                   }
                 )}
               >
@@ -64,21 +66,26 @@ export function History() {
                         hour12: false,
                       })}
                   </p>
-                  {currentCommit !== item.oid ? (
+                  {currentCommit === item.oid ||
+                  (index === 0 && currentCommit === null) ? (
+                    <span className="text-blue-500 bg-blue-500/10 border border-blue-500/20 rounded-full text-[10px] px-2 py-0.5">
+                      Current version
+                    </span>
+                  ) : (
                     <Button
                       variant="link"
                       size="xss"
                       className="text-gray-400 hover:text-gray-200"
                       onClick={() => {
-                        setCurrentCommit(item.oid);
+                        if (index === 0) {
+                          setCurrentCommit(null);
+                        } else {
+                          setCurrentCommit(item.oid);
+                        }
                       }}
                     >
                       See version
                     </Button>
-                  ) : (
-                    <span className="text-blue-500 bg-blue-500/10 border border-blue-500/20 rounded-full text-[10px] px-2 py-0.5">
-                      Current version
-                    </span>
                   )}
                 </div>
               </li>

components/editor/index.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useMemo, useRef, useState } from "react";
+import { useMemo, useRef, useState, useEffect } from "react";
 import { useCopyToClipboard } from "react-use";
 import { CopyIcon } from "lucide-react";
 import { toast } from "sonner";
@@ -14,6 +14,7 @@ import { useAi } from "@/hooks/useAi";
 import { ListPages } from "./pages";
 import { AskAi } from "./ask-ai";
 import { Preview } from "./preview";
+import { SaveChangesPopup } from "./save-changes-popup";
 import Loading from "../loading";
 
 export const AppEditor = ({
@@ -32,14 +33,27 @@ export const AppEditor = ({
     currentPageData,
     currentTab,
     currentCommit,
+    hasUnsavedChanges,
+    saveChanges,
+    pages,
   } = useEditor(namespace, repoId);
   const { isAiWorking } = useAi();
   const [, copyToClipboard] = useCopyToClipboard();
+  const [showSavePopup, setShowSavePopup] = useState(false);
 
   const monacoRef = useRef<any>(null);
   const editor = useRef<HTMLDivElement>(null);
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
 
+  // Show save popup when there are unsaved changes
+  useEffect(() => {
+    if (hasUnsavedChanges && !isAiWorking) {
+      setShowSavePopup(true);
+    } else {
+      setShowSavePopup(false);
+    }
+  }, [hasUnsavedChanges, isAiWorking]);
+
   return (
     <section className="h-screen w-full bg-neutral-950 flex flex-col">
       <Header />
@@ -113,6 +127,16 @@ export const AppEditor = ({
         </div>
         <Preview isNew={isNew} />
       </main>
+
+      {/* Save Changes Popup */}
+      <SaveChangesPopup
+        isOpen={showSavePopup}
+        onClose={() => setShowSavePopup(false)}
+        onSave={saveChanges}
+        hasUnsavedChanges={hasUnsavedChanges}
+        pages={pages}
+        project={project}
+      />
     </section>
   );
 };

components/editor/pages/index.tsx

@@ -5,7 +5,7 @@ import { useEditor } from "@/hooks/useEditor";
 export function ListPages() {
   const { pages, setPages, currentPage, setCurrentPage } = useEditor();
   return (
-    <div className="w-full flex items-center justify-start bg-neutral-950 overflow-auto flex-nowrap overflow-y-hidden">
+    <div className="w-full flex items-center justify-start bg-neutral-950 overflow-auto flex-nowrap min-h-[45px]">
       {pages.map((page: Page, i: number) => (
         <ListPagesItem
           key={page.path ?? i}

components/editor/pages/page.tsx

@@ -21,9 +21,9 @@ export function ListPagesItem({
     <div
       key={index}
       className={classNames(
-        "pl-6 pr-1 py-4 text-neutral-400 cursor-pointer text-sm hover:bg-neutral-900 flex items-center justify-center gap-1 group text-nowrap border-r border-neutral-800",
+        "pl-6 pr-1 py-3 text-neutral-400 cursor-pointer text-sm hover:bg-neutral-900 flex items-center justify-center gap-1 group text-nowrap border-r border-neutral-800",
         {
-          "bg-neutral-900 !text-white border-b": currentPage === page.path,
+          "bg-neutral-900 !text-white": currentPage === page.path,
           "!pr-6": index === 0, // Ensure the first item has padding on the right
         }
       )}

components/editor/preview/index.tsx

@@ -30,6 +30,7 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
     setCurrentCommit,
     currentPageData,
     pages,
+    setPages,
     setCurrentPage,
   } = useEditor();
   const {
@@ -37,154 +38,10 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
     setSelectedElement,
     isAiWorking,
     globalAiLoading,
-    setIsEditableModeEnabled,
   } = useAi();
 
   const iframeRef = useRef<HTMLIFrameElement>(null);
 
-  // Inject event handling script
-  const injectInteractivityScript = (html: string) => {
-    const interactivityScript = `
-      <script>        
-        // Add event listeners and communicate with parent
-        document.addEventListener('DOMContentLoaded', function() {
-          let hoveredElement = null;
-          let isEditModeEnabled = false;
-          
-          document.addEventListener('mouseover', function(event) {
-            if (event.target !== document.body && event.target !== document.documentElement) {
-              hoveredElement = event.target;
-              
-              const rect = event.target.getBoundingClientRect();
-              const message = {
-                type: 'ELEMENT_HOVERED',
-                data: {
-                  tagName: event.target.tagName,
-                  rect: {
-                    top: rect.top,
-                    left: rect.left,
-                    width: rect.width,
-                    height: rect.height
-                  },
-                  element: event.target.outerHTML
-                }
-              };
-              parent.postMessage(message, '*');
-            }
-          });
-          
-          document.addEventListener('mouseout', function(event) {
-            hoveredElement = null;
-            
-            parent.postMessage({
-              type: 'ELEMENT_MOUSE_OUT'
-            }, '*');
-          });
-          
-          // Handle clicks - prevent default only in edit mode
-          document.addEventListener('click', function(event) {
-            if (isEditModeEnabled) {
-              event.preventDefault();
-              event.stopPropagation();
-              
-              const rect = event.target.getBoundingClientRect();
-              parent.postMessage({
-                type: 'ELEMENT_CLICKED',
-                data: {
-                  tagName: event.target.tagName,
-                  rect: {
-                    top: rect.top,
-                    left: rect.left,
-                    width: rect.width,
-                    height: rect.height
-                  },
-                  element: event.target.outerHTML
-                }
-              }, '*');
-            } else {
-              // Handle link clicks to navigate between pages
-              const link = event.target.closest('a');
-              if (link && link.href) {
-                event.preventDefault();
-                
-                const url = new URL(link.href, window.location.href);
-                
-                // Check if it's a relative link (same origin)
-                if (url.origin === window.location.origin || link.href.startsWith('/') || link.href.startsWith('./') || link.href.startsWith('../') || !link.href.includes('://')) {
-                  // Extract the path from the link
-                  let targetPath = link.getAttribute('href') || '';
-                  
-                  // Handle relative paths
-                  if (targetPath.startsWith('./')) {
-                    targetPath = targetPath.substring(2);
-                  } else if (targetPath.startsWith('/')) {
-                    targetPath = targetPath.substring(1);
-                  }
-                  
-                  // If no extension, assume .html
-                  if (!targetPath.includes('.') && !targetPath.includes('?') && !targetPath.includes('#')) {
-                    targetPath = targetPath === '' ? 'index.html' : targetPath + '.html';
-                  }
-                  
-                  // Send message to parent to navigate to the page
-                  parent.postMessage({
-                    type: 'NAVIGATE_TO_PAGE',
-                    data: {
-                      targetPath: targetPath
-                    }
-                  }, '*');
-                } else {
-                  // External link - open in new tab
-                  window.open(link.href, '_blank');
-                }
-              }
-            }
-          });
-          
-          // Prevent form submissions when in edit mode
-          document.addEventListener('submit', function(event) {
-            if (isEditModeEnabled) {
-              event.preventDefault();
-              event.stopPropagation();
-            }
-          });
-          
-          // Prevent other navigation events when in edit mode
-          document.addEventListener('keydown', function(event) {
-            if (isEditModeEnabled && event.key === 'Enter' && (event.target.tagName === 'A' || event.target.tagName === 'BUTTON')) {
-              event.preventDefault();
-              event.stopPropagation();
-            }
-          });
-          
-          // Listen for messages from parent
-          window.addEventListener('message', function(event) {
-            if (event.data.type === 'ENABLE_EDIT_MODE') {
-              isEditModeEnabled = true;
-              document.body.style.userSelect = 'none';
-              document.body.style.pointerEvents = 'auto';
-            } else if (event.data.type === 'DISABLE_EDIT_MODE') {
-              isEditModeEnabled = false;
-              document.body.style.userSelect = '';
-              document.body.style.pointerEvents = '';
-            }
-          });
-          
-          // Notify parent that script is ready
-          parent.postMessage({
-            type: 'IFRAME_SCRIPT_READY'
-          }, '*');
-        });
-      </script>
-    `;
-
-    // Inject the script before closing body tag, or at the end if no body tag
-    if (html.includes("</body>")) {
-      return html.replace("</body>", `${interactivityScript}</body>`);
-    } else {
-      return html + interactivityScript;
-    }
-  };
   const [hoveredElement, setHoveredElement] = useState<{
     tagName: string;
     rect: { top: number; left: number; width: number; height: number };
@@ -192,99 +49,12 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
   const [isPromotingVersion, setIsPromotingVersion] = useState(false);
   const [stableHtml, setStableHtml] = useState<string>("");
 
-  // Handle PostMessage communication with iframe
-  useEffect(() => {
-    const handleMessage = (event: MessageEvent) => {
-      // Verify origin for security
-      if (!event.origin.includes(window.location.origin)) {
-        return;
-      }
-
-      const { type, data } = event.data;
-      switch (type) {
-        case "IFRAME_SCRIPT_READY":
-          if (iframeRef.current?.contentWindow) {
-            iframeRef.current.contentWindow.postMessage(
-              {
-                type: isEditableModeEnabled
-                  ? "ENABLE_EDIT_MODE"
-                  : "DISABLE_EDIT_MODE",
-              },
-              "*"
-            );
-          }
-          break;
-        case "ELEMENT_HOVERED":
-          if (isEditableModeEnabled) {
-            setHoveredElement(data);
-          }
-          break;
-        case "ELEMENT_MOUSE_OUT":
-          if (isEditableModeEnabled) {
-            setHoveredElement(null);
-          }
-          break;
-        case "ELEMENT_CLICKED":
-          if (isEditableModeEnabled) {
-            const mockElement = {
-              tagName: data.tagName,
-              getBoundingClientRect: () => data.rect,
-              outerHTML: data.element,
-            };
-            setSelectedElement(mockElement as any);
-            setIsEditableModeEnabled(false);
-          }
-          break;
-        case "NAVIGATE_TO_PAGE":
-          // Handle navigation between pages by updating currentPageData
-          if (data.targetPath) {
-            // Find the page in the pages array
-            const targetPage = pages.find(
-              (page) => page.path === data.targetPath
-            );
-            if (targetPage) {
-              setCurrentPage(data.targetPath);
-            } else {
-              // If page doesn't exist, you might want to create it or show an error
-              console.warn(`Page not found: ${data.targetPath}`);
-              toast.error(`Page not found: ${data.targetPath}`);
-            }
-          }
-          break;
-      }
-    };
-
-    window.addEventListener("message", handleMessage);
-    return () => window.removeEventListener("message", handleMessage);
-  }, [setSelectedElement, isEditableModeEnabled, pages, setCurrentPage]);
-
-  // Send edit mode state to iframe and clear hover state when disabled
-  useUpdateEffect(() => {
-    if (iframeRef.current?.contentWindow) {
-      iframeRef.current.contentWindow.postMessage(
-        {
-          type: isEditableModeEnabled
-            ? "ENABLE_EDIT_MODE"
-            : "DISABLE_EDIT_MODE",
-        },
-        "*"
-      );
-    }
-
-    // Clear hover state when edit mode is disabled
-    if (!isEditableModeEnabled) {
-      setHoveredElement(null);
-    }
-  }, [isEditableModeEnabled, stableHtml]);
-
-  // Update stable HTML only when AI finishes working to prevent blinking
   useEffect(() => {
     if (!isAiWorking && !globalAiLoading && currentPageData?.html) {
       setStableHtml(currentPageData.html);
     }
   }, [isAiWorking, globalAiLoading, currentPageData?.html]);
 
-  // Initialize stable HTML when component first loads
   useEffect(() => {
     if (
       currentPageData?.html &&
@@ -296,6 +66,32 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
     }
   }, [currentPageData?.html, stableHtml, isAiWorking, globalAiLoading]);
 
+  useUpdateEffect(() => {
+    const cleanupListeners = () => {
+      if (iframeRef?.current?.contentDocument) {
+        const iframeDocument = iframeRef.current.contentDocument;
+        iframeDocument.removeEventListener("mouseover", handleMouseOver);
+        iframeDocument.removeEventListener("mouseout", handleMouseOut);
+        iframeDocument.removeEventListener("click", handleClick);
+      }
+    };
+
+    if (iframeRef?.current) {
+      const iframeDocument = iframeRef.current.contentDocument;
+      if (iframeDocument) {
+        cleanupListeners();
+
+        if (isEditableModeEnabled) {
+          iframeDocument.addEventListener("mouseover", handleMouseOver);
+          iframeDocument.addEventListener("mouseout", handleMouseOut);
+          iframeDocument.addEventListener("click", handleClick);
+        }
+      }
+    }
+
+    return cleanupListeners;
+  }, [iframeRef, isEditableModeEnabled]);
+
   const promoteVersion = async () => {
     setIsPromotingVersion(true);
     await api
@@ -305,6 +101,8 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
       .then((res) => {
         if (res.data.ok) {
           setCurrentCommit(null);
+          setPages(res.data.pages);
+          setCurrentPage(res.data.pages[0].path);
           toast.success("Version promoted successfully");
         }
       })
@@ -314,6 +112,99 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
     setIsPromotingVersion(false);
   };
 
+  const handleMouseOver = (event: MouseEvent) => {
+    if (iframeRef?.current) {
+      const iframeDocument = iframeRef.current.contentDocument;
+      if (iframeDocument) {
+        const targetElement = event.target as HTMLElement;
+        if (
+          hoveredElement?.tagName !== targetElement.tagName ||
+          hoveredElement?.rect.top !==
+            targetElement.getBoundingClientRect().top ||
+          hoveredElement?.rect.left !==
+            targetElement.getBoundingClientRect().left ||
+          hoveredElement?.rect.width !==
+            targetElement.getBoundingClientRect().width ||
+          hoveredElement?.rect.height !==
+            targetElement.getBoundingClientRect().height
+        ) {
+          if (targetElement !== iframeDocument.body) {
+            const rect = targetElement.getBoundingClientRect();
+            setHoveredElement({
+              tagName: targetElement.tagName,
+              rect: {
+                top: rect.top,
+                left: rect.left,
+                width: rect.width,
+                height: rect.height,
+              },
+            });
+            targetElement.classList.add("hovered-element");
+          } else {
+            return setHoveredElement(null);
+          }
+        }
+      }
+    }
+  };
+  const handleMouseOut = () => {
+    setHoveredElement(null);
+  };
+  const handleClick = (event: MouseEvent) => {
+    if (iframeRef?.current) {
+      const iframeDocument = iframeRef.current.contentDocument;
+      if (iframeDocument) {
+        const targetElement = event.target as HTMLElement;
+        if (targetElement !== iframeDocument.body) {
+          setSelectedElement(targetElement);
+        }
+      }
+    }
+  };
+
+  const handleCustomNavigation = (event: MouseEvent) => {
+    if (iframeRef?.current) {
+      const iframeDocument = iframeRef.current.contentDocument;
+      if (iframeDocument) {
+        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(event.target as HTMLElement);
+        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 (targetElement) {
+                targetElement.scrollIntoView({ behavior: "smooth" });
+              }
+              return;
+            }
+
+            href = href.split(".html")[0] + ".html";
+            const isPageExist = pages.some((page) => page.path === href);
+            if (isPageExist) {
+              setCurrentPage(href);
+            }
+          }
+        }
+      }
+    }
+  };
+
   return (
     <div
       className={classNames(
@@ -358,7 +249,7 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
           )}
           srcDoc={defaultHTML}
         />
-      ) : isLoadingProject || globalAiLoading ? (
+      ) : isLoadingProject || (globalAiLoading && !stableHtml) ? (
         <div className="w-full h-full flex items-center justify-center relative">
           <div className="py-10 w-full relative z-1 max-w-3xl mx-auto text-center">
             <AiLoading
@@ -368,12 +259,14 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
             <AnimatedBlobs />
             <AnimatedBlobs />
           </div>
-          <LivePreview
-            currentPageData={currentPageData}
-            isAiWorking={isAiWorking}
-            defaultHTML={defaultHTML}
-            className="bottom-4 left-4"
-          />
+          {!isLoadingProject && (
+            <LivePreview
+              currentPageData={currentPageData}
+              isAiWorking={isAiWorking}
+              defaultHTML={defaultHTML}
+              className="bottom-4 left-4"
+            />
+          )}
         </div>
       ) : (
         <>
@@ -395,9 +288,30 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
                   )}--rev-${currentCommit.slice(0, 7)}.static.hf.space`
                 : undefined
             }
-            srcDoc={
+            srcDoc={!currentCommit ? stableHtml : undefined}
+            onLoad={
               !currentCommit
-                ? injectInteractivityScript(stableHtml || "")
+                ? () => {
+                    if (iframeRef?.current?.contentWindow?.document?.body) {
+                      iframeRef.current.contentWindow.document.body.scrollIntoView(
+                        {
+                          block: isAiWorking ? "end" : "start",
+                          inline: "nearest",
+                          behavior: isAiWorking ? "instant" : "smooth",
+                        }
+                      );
+                    }
+                    // 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);
+                      });
+                    }
+                  }
                 : undefined
             }
             sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"

components/editor/save-changes-popup/index.tsx

@@ -0,0 +1,133 @@
+"use client";
+import { useState } from "react";
+import { toast } from "sonner";
+import { Save, X, ChevronUp, ChevronDown } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+import classNames from "classnames";
+
+import { Page } from "@/types";
+import { api } from "@/lib/api";
+import { Button } from "@/components/ui/button";
+import Loading from "@/components/loading";
+
+interface SaveChangesPopupProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: () => Promise<void>;
+  hasUnsavedChanges: boolean;
+  pages: Page[];
+  project?: any;
+}
+
+export const SaveChangesPopup = ({
+  isOpen,
+  onClose,
+  onSave,
+  hasUnsavedChanges,
+  pages,
+  project,
+}: SaveChangesPopupProps) => {
+  const [isSaving, setIsSaving] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  const handleSave = async () => {
+    if (!project || !hasUnsavedChanges) return;
+
+    setIsSaving(true);
+    try {
+      await onSave();
+      toast.success("Changes saved successfully!");
+      onClose();
+    } catch (error: any) {
+      toast.error(error.message || "Failed to save changes");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  if (!hasUnsavedChanges || !isOpen) return null;
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        initial={{ opacity: 0, scale: 0.9, y: 20 }}
+        animate={{ opacity: 1, scale: 1, y: 0 }}
+        exit={{ opacity: 0, scale: 0.9, y: 20 }}
+        className={classNames(
+          "absolute bottom-4 right-4 z-10 bg-white/95 backdrop-blur-sm border border-neutral-200 rounded-xl shadow-lg transition-all duration-300 ease-in-out"
+        )}
+      >
+        {isCollapsed ? (
+          // Collapsed state
+          <div className="flex items-center gap-2 p-3">
+            <Save className="size-4 text-neutral-600" />
+            <span className="text-xs text-neutral-600 font-medium">
+              Unsaved Changes
+            </span>
+            <Button
+              variant="outline"
+              size="iconXs"
+              className="!rounded-md !border-neutral-200"
+              onClick={() => setIsCollapsed(false)}
+            >
+              <ChevronUp className="text-neutral-400 size-3" />
+            </Button>
+          </div>
+        ) : (
+          // Expanded state
+          <div className="p-4 max-w-sm w-full">
+            <div className="flex items-start gap-3">
+              <Save className="size-4 text-neutral-600 translate-y-1.5" />
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center justify-between mb-1">
+                  <div className="flex items-center gap-2">
+                    <p className="font-semibold text-sm text-neutral-800">
+                      Unsaved Changes
+                    </p>
+                  </div>
+                  <Button
+                    variant="outline"
+                    size="iconXs"
+                    className="!rounded-md !border-neutral-200"
+                    onClick={() => setIsCollapsed(true)}
+                  >
+                    <ChevronDown className="text-neutral-400 size-3" />
+                  </Button>
+                </div>
+                <p className="text-xs text-neutral-600 leading-relaxed mb-3">
+                  You have unsaved changes in your project. Save them to
+                  preserve your work.
+                </p>
+                <div className="flex items-center gap-2">
+                  <Button
+                    size="xs"
+                    variant="black"
+                    className="!pr-3"
+                    onClick={handleSave}
+                    disabled={isSaving}
+                  >
+                    {isSaving ? (
+                      <Loading overlay={false} />
+                    ) : (
+                      <Save className="size-3" />
+                    )}
+                    Save Changes
+                  </Button>
+                  <Button
+                    size="xs"
+                    variant="outline"
+                    className="!text-neutral-600 !border-neutral-200"
+                    disabled={isSaving}
+                    onClick={onClose}
+                  >
+                    Later
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </motion.div>
+    </AnimatePresence>
+  );
+};

hooks/useAi.ts

@@ -13,7 +13,7 @@ import { useUser } from "./useUser";
 export const useAi = (onScrollToBottom?: () => void) => {
   const client = useQueryClient();
   const audio = useRef<HTMLAudioElement | null>(null);
-  const { setPages, setCurrentPage, setPrompts, prompts, pages, project, setProject } = useEditor();
+  const { setPages, setCurrentPage, setPrompts, prompts, pages, project, setProject, commits, setCommits, setLastSavedPages } = useEditor();
   const [controller, setController] = useState<AbortController | null>(null);
   const [storageProvider, setStorageProvider] = useLocalStorage("provider", "auto");
   const [storageModel, setStorageModel] = useLocalStorage("model", MODELS[0].value);
@@ -183,6 +183,7 @@ export const useAi = (onScrollToBottom?: () => void) => {
             const newPages = formatPages(contentResponse);
             const projectName = contentResponse.match(/<<<<<<< PROJECT_NAME_START ([\s\S]*?) >>>>>>> PROJECT_NAME_END/)?.[1]?.trim();
             setPages(newPages);
+            setLastSavedPages([...newPages]); // Mark initial pages as saved
             createNewProject(prompt, newPages, projectName);
             setPrompts([...prompts, prompt]);
 
@@ -307,6 +308,8 @@ export const useAi = (onScrollToBottom?: () => void) => {
         ) as HTMLIFrameElement;
 
         setPages(res.pages);
+        setLastSavedPages([...res.pages]); // Mark AI changes as saved
+        setCommits([res.commit, ...commits]);
         setPrompts(
           [...prompts, prompt]
         )

hooks/useEditor.ts

@@ -13,7 +13,7 @@ export const useEditor = (namespace?: string, repoId?: string) => {
   const router = useRouter();
   const [pagesStorage,, removePagesStorage] = useLocalStorage<Page[]>("pages");
 
-  const { data: project, isLoading: isLoadingProject } = useQuery({
+  const { data: project, isFetching: isLoadingProject } = useQuery({
     queryKey: ["editor.project"],
     queryFn: async () => {
       try {
@@ -224,6 +224,84 @@ export const useEditor = (namespace?: string, repoId?: string) => {
     uploadFilesMutation.mutate({ files, project });
   };
 
+  // Unsaved changes tracking
+  const { data: lastSavedPages = [] } = useQuery<Page[]>({
+    queryKey: ["editor.lastSavedPages"],
+    queryFn: async () => [],
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    refetchOnMount: false,
+    initialData: [],
+  });
+  const setLastSavedPages = (newPages: Page[]) => {
+    client.setQueryData(["editor.lastSavedPages"], newPages);
+  };
+
+  const { data: hasUnsavedChanges = false } = useQuery({
+    queryKey: ["editor.hasUnsavedChanges"],
+    queryFn: async () => false,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    refetchOnMount: false,
+  });
+  const setHasUnsavedChanges = (hasChanges: boolean) => {
+    client.setQueryData(["editor.hasUnsavedChanges"], hasChanges);
+  };
+
+  // Save changes mutation
+  const saveChangesMutation = useMutation({
+    mutationFn: async ({ pages, project, namespace, repoId }: { pages: Page[]; project: any; namespace?: string; repoId?: string }) => {
+      if (!project?.space_id || !namespace || !repoId) {
+        throw new Error("Project not found or missing parameters");
+      }
+
+      const response = await api.put(`/me/projects/${namespace}/${repoId}/save`, {
+        pages,
+        commitTitle: "Manual changes saved"
+      });
+
+      if (!response.data.ok) {
+        throw new Error(response.data.message || "Failed to save changes");
+      }
+
+      return response.data;
+    },
+    onSuccess: (data) => {
+      setLastSavedPages([...pages]);
+      setHasUnsavedChanges(false);
+      if (data.commit) {
+        setCommits((prev) => [data.commit, ...prev]);
+      }
+    },
+  });
+
+  const saveChanges = async () => {
+    if (!project || !hasUnsavedChanges || !namespace || !repoId) return;
+    return saveChangesMutation.mutateAsync({ pages, project, namespace, repoId });
+  };
+
+  // Check for unsaved changes when pages change
+  const checkForUnsavedChanges = () => {
+    if (pages.length === 0 || lastSavedPages.length === 0) return;
+    
+    const hasChanges = JSON.stringify(pages) !== JSON.stringify(lastSavedPages);
+    setHasUnsavedChanges(hasChanges);
+  };
+
+  // Update last saved pages when project loads
+  useUpdateEffect(() => {
+    if (project && pages.length > 0 && lastSavedPages.length === 0) {
+      setLastSavedPages([...pages]);
+    }
+  }, [project, pages]);
+
+  // Check for changes when pages change
+  useUpdateEffect(() => {
+    if (lastSavedPages.length > 0) {
+      checkForUnsavedChanges();
+    }
+  }, [pages, lastSavedPages]);
+
   useUpdateEffect(() => {
     if (namespace && repoId) {
       client.invalidateQueries({ queryKey: ["editor.project"] });
@@ -232,6 +310,8 @@ export const useEditor = (namespace?: string, repoId?: string) => {
       client.invalidateQueries({ queryKey: ["editor.commits"] });
       client.invalidateQueries({ queryKey: ["editor.currentPage"] });
       client.invalidateQueries({ queryKey: ["editor.currentCommit"] });
+      client.invalidateQueries({ queryKey: ["editor.lastSavedPages"] });
+      client.invalidateQueries({ queryKey: ["editor.hasUnsavedChanges"] });
     }
   }, [namespace, repoId])
 
@@ -253,10 +333,17 @@ export const useEditor = (namespace?: string, repoId?: string) => {
     setCurrentTab,
     uploadFiles,
     commits,
+    setCommits,
     currentCommit,
     setCurrentCommit,
     setProject,
     isUploading: uploadFilesMutation.isPending,
     globalEditorLoading: uploadFilesMutation.isPending || isLoadingProject,
+    // Unsaved changes functionality
+    hasUnsavedChanges,
+    saveChanges,
+    isSaving: saveChangesMutation.isPending,
+    lastSavedPages,
+    setLastSavedPages,
   };
 };

package-lock.json

@@ -32,6 +32,7 @@
         "classnames": "^2.5.1",
         "clsx": "^2.1.1",
         "date-fns": "^4.1.0",
+        "framer-motion": "^12.23.22",
         "log4js": "^6.9.1",
         "log4js-json-layout": "^2.2.3",
         "lucide-react": "^0.542.0",
@@ -3872,6 +3873,33 @@
         "node": ">= 6"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.23.22",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.22.tgz",
+      "integrity": "sha512-ZgGvdxXCw55ZYvhoZChTlG6pUuehecgvEAJz0BHoC5pQKW1EC5xf1Mul1ej5+ai+pVY0pylyFfdl45qnM1/GsA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.21",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs-extra": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
@@ -4827,6 +4855,21 @@
         "url": "https://opencollective.com/mongoose"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.23.21",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.21.tgz",
+      "integrity": "sha512-5xDXx/AbhrfgsQmSE7YESMn4Dpo6x5/DTZ4Iyy4xqDvVHWvFVoV+V2Ri2S/ksx+D40wrZ7gPYiMWshkdoqNgNQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
     "node_modules/mpath": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/mpath/-/mpath-0.9.0.tgz",

package.json

@@ -32,6 +32,7 @@
     "classnames": "^2.5.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
+    "framer-motion": "^12.23.22",
     "log4js": "^6.9.1",
     "log4js-json-layout": "^2.2.3",
     "lucide-react": "^0.542.0",