arpeprojet

Sleeping

App Files Files Community

enzostvs HF Staff commited on Sep 25

Commit

4fb6d26

1 Parent(s): e0eec0d

wip: remove readonly

Browse files

Files changed (5) hide show

app/api/proxy/route.ts +0 -240
components/editor/history-notification/index.tsx +119 -0
components/editor/index.tsx +13 -7
components/editor/preview/index.tsx +104 -128
components/my-projects/project-card.tsx +4 -1

app/api/proxy/route.ts DELETED Viewed

@@ -1,240 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { isAuthenticated } from "@/lib/auth";
-export async function GET(req: NextRequest) {
-  const user: any = await isAuthenticated();
-  if (user instanceof NextResponse || !user) {
-    return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
-  }
-  const { searchParams } = new URL(req.url);
-  const spaceId = searchParams.get('spaceId');
-  const commitId = searchParams.get('commitId');
-  const path = searchParams.get('path') || '/';
-  if (!spaceId) {
-    return NextResponse.json({ error: "spaceId parameter required" }, { status: 400 });
-  }
-  try {
-    const spaceDomain = `${spaceId.replace("/", "-")}${commitId !== null? `--rev-${commitId.slice(0, 7)}` : ""}.static.hf.space`;
-    const targetUrl = `https://${spaceDomain}${path}`;
-    console.log("targetUrl", targetUrl);
-    const response = await fetch(targetUrl, {
-      headers: {
-        'User-Agent': req.headers.get('user-agent') || '',
-      },
-    });
-    if (!response.ok) {
-      console.error('Failed to fetch from HF space:', response.status, response.statusText);
-      return NextResponse.json({
-        error: "Failed to fetch content",
-        details: `${response.status} ${response.statusText}`,
-        targetUrl
-      }, { status: response.status });
-    }
-    let content = await response.text();
-    const contentType = response.headers.get('content-type') || 'text/html';
-    // Rewrite relative URLs to go through the proxy
-    if (contentType.includes('text/html')) {
-      const baseUrl = `https://${spaceDomain}`;
-      // Fix relative URLs in href attributes
-      content = content.replace(/href="([^"]+)"/g, (match, url) => {
-        if (url.startsWith('/') && !url.startsWith('//')) {
-          // Relative URL starting with /
-          return `href="${baseUrl}${url}"`;
-        } else if (!url.includes('://') && !url.startsWith('#') && !url.startsWith('mailto:') && !url.startsWith('tel:')) {
-          // Relative URL not starting with /
-          return `href="${baseUrl}/${url}"`;
-        }
-        return match;
-      });
-      // Fix relative URLs in src attributes
-      content = content.replace(/src="([^"]+)"/g, (match, url) => {
-        if (url.startsWith('/') && !url.startsWith('//')) {
-          return `src="${baseUrl}${url}"`;
-        } else if (!url.includes('://')) {
-          return `src="${baseUrl}/${url}"`;
-        }
-        return match;
-      });
-      // Add base tag to ensure relative URLs work correctly
-      const baseTag = `<base href="${baseUrl}/">`;
-      if (content.includes('<head>')) {
-        content = content.replace('<head>', `<head>${baseTag}`);
-      } else if (content.includes('<html>')) {
-        content = content.replace('<html>', `<html><head>${baseTag}</head>`);
-      } else {
-        content = `<head>${baseTag}</head>` + content;
-      }
-    }
-    const injectedScript = `
-      <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) {
-            // Only prevent default if edit mode is enabled
-            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 {
-              // In non-edit mode, handle link clicks to maintain proxy context
-              const link = event.target.closest('a');
-              if (link && link.href) {
-                event.preventDefault();
-                const url = new URL(link.href);
-                // If it's an external link (different domain than the space), open in new tab
-                if (url.hostname !== '${spaceDomain}') {
-                  window.open(link.href, '_blank');
-                } else {
-                  // For internal links within the space, navigate through the proxy
-                  // Extract the path and query parameters from the original link
-                  const targetPath = url.pathname + url.search + url.hash;
-                  // Get current proxy URL parameters
-                  const currentUrl = new URL(window.location.href);
-                  const spaceId = currentUrl.searchParams.get('spaceId') || '';
-                  const commitId = currentUrl.searchParams.get('commitId') || '';
-                  // Construct new proxy URL with the target path
-                  const proxyUrl = '/api/proxy/?' +
-                    'spaceId=' + encodeURIComponent(spaceId) +
-                    (commitId ? '&commitId=' + encodeURIComponent(commitId) : '') +
-                    '&path=' + encodeURIComponent(targetPath);
-                  // Navigate to the new URL through the parent window
-                  parent.postMessage({
-                    type: 'NAVIGATE_TO_PROXY',
-                    data: {
-                      proxyUrl: proxyUrl,
-                      targetPath: targetPath
-                    }
-                  }, '*');
-                }
-              }
-            }
-          });
-          // 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: 'PROXY_SCRIPT_READY'
-          }, '*');
-        });
-      </script>
-    `;
-    let modifiedContent;
-    if (content.includes('</body>')) {
-      modifiedContent = content.replace(
-        /<\/body>/i,
-        `${injectedScript}</body>`
-      );
-    } else {
-      modifiedContent = content + injectedScript;
-    }
-    return new NextResponse(modifiedContent, {
-      headers: {
-        'Content-Type': contentType,
-        'Cache-Control': 'no-cache, no-store, must-revalidate',
-      },
-    });
-  } catch (error) {
-    return NextResponse.json({
-      error: "Proxy request failed",
-      details: error instanceof Error ? error.message : String(error),
-      spaceId
-    }, { status: 500 });
-  }
-}

components/editor/history-notification/index.tsx ADDED Viewed

	@@ -0,0 +1,119 @@

+"use client";
+import { useState } from "react";
+import classNames from "classnames";
+import { Button } from "@/components/ui/button";
+import Loading from "@/components/loading";
+import {
+  History,
+  ChevronUp,
+  ChevronDown,
+  MousePointerClick,
+} from "lucide-react";
+interface HistoryNotificationProps {
+  /** Whether the historical version notification should be visible */
+  isVisible: boolean;
+  /** Whether the version promotion is in progress */
+  isPromotingVersion: boolean;
+  /** Function to promote the current historical version */
+  onPromoteVersion: () => void;
+  /** Function to go back to the current version */
+  onGoBackToCurrent: () => void;
+  /** Additional CSS classes */
+  className?: string;
+}
+export const HistoryNotification = ({
+  isVisible,
+  isPromotingVersion,
+  onPromoteVersion,
+  onGoBackToCurrent,
+  className,
+}: HistoryNotificationProps) => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  if (!isVisible) {
+    return null;
+  }
+  return (
+    <div
+      className={classNames(
+        "absolute bottom-4 left-4 z-10 bg-white/95 backdrop-blur-sm border border-neutral-200 rounded-xl shadow-lg transition-all duration-300 ease-in-out",
+        className
+      )}
+    >
+      {isCollapsed ? (
+        // Collapsed state
+        <div className="flex items-center gap-2 p-3">
+          <History className="size-4 text-neutral-600" />
+          <span className="text-xs text-neutral-600 font-medium">
+            Historical Version
+          </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">
+            <History 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">
+                    Historical Version
+                  </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're viewing a previous version of this project. Promote this
+                version to make it current and deploy it live.
+              </p>
+              <div className="flex items-center gap-2">
+                <Button
+                  size="xs"
+                  variant="black"
+                  className="!pr-3"
+                  onClick={onPromoteVersion}
+                  disabled={isPromotingVersion}
+                >
+                  {isPromotingVersion ? (
+                    <Loading overlay={false} />
+                  ) : (
+                    <MousePointerClick className="size-3" />
+                  )}
+                  Promote Version
+                </Button>
+                <Button
+                  size="xs"
+                  variant="outline"
+                  className=" !text-neutral-600 !border-neutral-200"
+                  disabled={isPromotingVersion}
+                  onClick={onGoBackToCurrent}
+                >
+                  Go back to current
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

components/editor/index.tsx CHANGED Viewed

@@ -25,10 +25,15 @@ export const AppEditor = ({
   repoId?: string;
   isNew?: boolean;
 }) => {
-  const { project, setPages, files, currentPageData, currentTab } = useEditor(
-    namespace,
-    repoId
-  );
   const [, copyToClipboard] = useCopyToClipboard();
   const monacoRef = useRef<any>(null);
@@ -71,10 +76,11 @@ export const AppEditor = ({
                 horizontal: "hidden",
               },
               wordWrap: "on",
-              readOnly: true,
               readOnlyMessage: {
-                value:
-                  "You can't edit the code, ask DeepSite to do it for you!",
                 isTrusted: true,
               },
             }}

   repoId?: string;
   isNew?: boolean;
 }) => {
+  const {
+    project,
+    setPages,
+    files,
+    currentPageData,
+    currentTab,
+    currentCommit,
+  } = useEditor(namespace, repoId);
+  const { isAiWorking } = useAi();
   const [, copyToClipboard] = useCopyToClipboard();
   const monacoRef = useRef<any>(null);
                 horizontal: "hidden",
               },
               wordWrap: "on",
+              readOnly: !!isAiWorking || !!currentCommit,
               readOnlyMessage: {
+                value: currentCommit
+                  ? "You can't edit the code, as this is an old version of the project."
+                  : "Wait for DeepSite to finish working...",
                 isTrusted: true,
               },
             }}

components/editor/preview/index.tsx CHANGED Viewed

@@ -14,13 +14,8 @@ import { AiLoading } from "../ask-ai/loading";
 import { defaultHTML } from "@/lib/consts";
 import { Button } from "@/components/ui/button";
 import { LivePreview } from "../live-preview";
-import {
-  MousePointerClick,
-  History,
-  AlertCircle,
-  ChevronDown,
-  ChevronUp,
-} from "lucide-react";
 import { api } from "@/lib/api";
 import { toast } from "sonner";
 import Loading from "@/components/loading";
@@ -34,26 +29,20 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
     currentCommit,
     setCurrentCommit,
     currentPageData,
   } = useEditor();
   const {
     isEditableModeEnabled,
     setSelectedElement,
     isAiWorking,
     setIsEditableModeEnabled,
   } = useAi();
-  const iframeSrc = project?.space_id
-    ? `/api/proxy/?spaceId=${encodeURIComponent(project.space_id)}${
-        currentCommit ? `&commitId=${currentCommit}` : ""
-      }`
-    : "";
   const iframeRef = useRef<HTMLIFrameElement>(null);
-  // For private projects, use srcDoc instead of proxy URL
-  const shouldUseCustomIframe = project?.private && currentPageData?.html;
-  // Inject event handling script for private projects
   const injectInteractivityScript = (html: string) => {
     const interactivityScript = `
       <script>
@@ -112,6 +101,43 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
                   element: event.target.outerHTML
                 }
               }, '*');
             }
           });
@@ -146,7 +172,7 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
           // Notify parent that script is ready
           parent.postMessage({
-            type: 'PROXY_SCRIPT_READY'
           }, '*');
         });
       </script>
@@ -163,9 +189,8 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
     tagName: string;
     rect: { top: number; left: number; width: number; height: number };
   } | null>(null);
-  const [isHistoryNotificationCollapsed, setIsHistoryNotificationCollapsed] =
-    useState(false);
   const [isPromotingVersion, setIsPromotingVersion] = useState(false);
   // Handle PostMessage communication with iframe
   useEffect(() => {
@@ -177,7 +202,7 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
       const { type, data } = event.data;
       switch (type) {
-        case "PROXY_SCRIPT_READY":
           if (iframeRef.current?.contentWindow) {
             iframeRef.current.contentWindow.postMessage(
               {
@@ -210,10 +235,20 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
             setIsEditableModeEnabled(false);
           }
           break;
-        case "NAVIGATE_TO_PROXY":
-          // Handle navigation within the iframe while maintaining proxy context
-          if (iframeRef.current && data.proxyUrl) {
-            iframeRef.current.src = data.proxyUrl;
           }
           break;
       }
@@ -221,7 +256,7 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
-  }, [setSelectedElement, isEditableModeEnabled]);
   // Send edit mode state to iframe and clear hover state when disabled
   useUpdateEffect(() => {
@@ -240,12 +275,26 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
     if (!isEditableModeEnabled) {
       setHoveredElement(null);
     }
-  }, [
-    isEditableModeEnabled,
-    project?.space_id,
-    shouldUseCustomIframe,
-    currentPageData?.html,
-  ]);
   const promoteVersion = async () => {
     setIsPromotingVersion(true);
@@ -298,7 +347,7 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
           </span>
         </div>
       )}
-      {isNew && !isAiWorking ? (
         <iframe
           className={classNames(
             "w-full select-none transition-all duration-200 bg-black h-full",
@@ -309,18 +358,11 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
           )}
           srcDoc={defaultHTML}
         />
-      ) : iframeSrc === "" ||
-        isLoadingProject ||
-        (isAiWorking && iframeSrc == "") ||
-        (shouldUseCustomIframe && !currentPageData?.html) ? (
         <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
-              text={
-                isAiWorking && iframeSrc === ""
-                  ? undefined
-                  : "Fetching your space..."
-              }
               className="flex-col"
             />
             <AnimatedBlobs />
@@ -345,94 +387,28 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
                   device === "mobile",
               }
             )}
-            {...(shouldUseCustomIframe
-              ? {
-                  srcDoc: injectInteractivityScript(
-                    currentPageData?.html || ""
-                  ),
-                }
-              : { src: iframeSrc })}
             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"
           />
-          <div
-            className={classNames(
-              "absolute bottom-4 left-4 z-10 bg-white/95 backdrop-blur-sm border border-neutral-200 rounded-xl shadow-lg transition-all duration-300 ease-in-out",
-              {
-                hidden: !currentCommit,
-              }
-            )}
-          >
-            {isHistoryNotificationCollapsed ? (
-              // Collapsed state
-              <div className="flex items-center gap-2 p-3">
-                <History className="size-4 text-neutral-600" />
-                <span className="text-xs text-neutral-600 font-medium">
-                  Historical Version
-                </span>
-                <Button
-                  variant="outline"
-                  size="iconXs"
-                  className="!rounded-md !border-neutral-200"
-                  onClick={() => setIsHistoryNotificationCollapsed(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">
-                  <History 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">
-                          Historical Version
-                        </p>
-                      </div>
-                      <Button
-                        variant="outline"
-                        size="iconXs"
-                        className="!rounded-md !border-neutral-200"
-                        onClick={() => setIsHistoryNotificationCollapsed(true)}
-                      >
-                        <ChevronDown className="text-neutral-400 size-3" />
-                      </Button>
-                    </div>
-                    <p className="text-xs text-neutral-600 leading-relaxed mb-3">
-                      You're viewing a previous version of this project. Promote
-                      this version to make it current and deploy it live.
-                    </p>
-                    <div className="flex items-center gap-2">
-                      <Button
-                        size="xs"
-                        variant="black"
-                        className="!pr-3"
-                        onClick={() => promoteVersion()}
-                        disabled={isPromotingVersion}
-                      >
-                        {isPromotingVersion ? (
-                          <Loading overlay={false} />
-                        ) : (
-                          <MousePointerClick className="size-3" />
-                        )}
-                        Promote Version
-                      </Button>
-                      <Button
-                        size="xs"
-                        variant="outline"
-                        className=" !text-neutral-600 !border-neutral-200"
-                        disabled={isPromotingVersion}
-                        onClick={() => setCurrentCommit(null)}
-                      >
-                        Go back to current
-                      </Button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            )}
-          </div>
         </>
       )}
     </div>

 import { defaultHTML } from "@/lib/consts";
 import { Button } from "@/components/ui/button";
 import { LivePreview } from "../live-preview";
+import { HistoryNotification } from "../history-notification";
+import { AlertCircle } from "lucide-react";
 import { api } from "@/lib/api";
 import { toast } from "sonner";
 import Loading from "@/components/loading";
     currentCommit,
     setCurrentCommit,
     currentPageData,
+    pages,
+    setCurrentPage,
   } = useEditor();
   const {
     isEditableModeEnabled,
     setSelectedElement,
     isAiWorking,
+    globalAiLoading,
     setIsEditableModeEnabled,
   } = useAi();
   const iframeRef = useRef<HTMLIFrameElement>(null);
+  // Inject event handling script
   const injectInteractivityScript = (html: string) => {
     const interactivityScript = `
       <script>
                   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');
+                }
+              }
             }
           });
           // Notify parent that script is ready
           parent.postMessage({
+            type: 'IFRAME_SCRIPT_READY'
           }, '*');
         });
       </script>
     tagName: string;
     rect: { top: number; left: number; width: number; height: number };
   } | null>(null);
   const [isPromotingVersion, setIsPromotingVersion] = useState(false);
+  const [stableHtml, setStableHtml] = useState<string>("");
   // Handle PostMessage communication with iframe
   useEffect(() => {
       const { type, data } = event.data;
       switch (type) {
+        case "IFRAME_SCRIPT_READY":
           if (iframeRef.current?.contentWindow) {
             iframeRef.current.contentWindow.postMessage(
               {
             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 (!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 &&
+      !stableHtml &&
+      !isAiWorking &&
+      !globalAiLoading
+    ) {
+      setStableHtml(currentPageData.html);
+    }
+  }, [currentPageData?.html, stableHtml, isAiWorking, globalAiLoading]);
   const promoteVersion = async () => {
     setIsPromotingVersion(true);
           </span>
         </div>
       )}
+      {isNew && !isLoadingProject ? (
         <iframe
           className={classNames(
             "w-full select-none transition-all duration-200 bg-black h-full",
           )}
           srcDoc={defaultHTML}
         />
+      ) : isLoadingProject || globalAiLoading ? (
         <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
+              text={isLoadingProject ? "Fetching your project..." : undefined}
               className="flex-col"
             />
             <AnimatedBlobs />
                   device === "mobile",
               }
             )}
+            src={
+              currentCommit
+                ? `https://${project?.space_id?.replaceAll(
+                    "/",
+                    "-"
+                  )}--rev-${currentCommit.slice(0, 7)}.static.hf.space`
+                : undefined
+            }
+            srcDoc={
+              !currentCommit
+                ? injectInteractivityScript(stableHtml || "")
+                : undefined
+            }
+            sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
             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"
           />
+          <HistoryNotification
+            isVisible={!!currentCommit}
+            isPromotingVersion={isPromotingVersion}
+            onPromoteVersion={promoteVersion}
+            onGoBackToCurrent={() => setCurrentCommit(null)}
+          />
         </>
       )}
     </div>

components/my-projects/project-card.tsx CHANGED Viewed

@@ -67,7 +67,10 @@ export function ProjectCard({
         ) : (
           <div className="absolute inset-0 w-full h-full overflow-hidden">
             <iframe
-              src={`/api/proxy/?spaceId=${encodeURIComponent(project.name)}`}
               className="w-[1200px] h-[675px] border-0 origin-top-left"
               style={{
                 transform: "scale(0.5)",

         ) : (
           <div className="absolute inset-0 w-full h-full overflow-hidden">
             <iframe
+              src={`https://${project.name.replaceAll(
+                "/",
+                "-"
+              )}.static.hf.space`}
               className="w-[1200px] h-[675px] border-0 origin-top-left"
               style={{
                 transform: "scale(0.5)",