Fix preview navigation forward/back buttons and add E2E test (#2372)

e2e-tests/refresh.spec.ts

@@ -71,3 +71,73 @@ testSkipIfWindows("refresh preserves current route", async ({ po }) => {
       .getByRole("heading", { name: "Home Page" }),
   ).not.toBeVisible();
 });
+
+testSkipIfWindows(
+  "preview navigation - forward and back buttons work",
+  async ({ po }) => {
+    await po.setUp({ autoApprove: true });
+
+    // Create a multi-page app with react-router navigation
+    await po.sendPrompt("tc=multi-page");
+
+    // Wait for the preview iframe to be visible and loaded
+    await po.expectPreviewIframeIsVisible();
+
+    // Wait for the Home Page content to be visible in the iframe
+    await expect(
+      po.getPreviewIframeElement().contentFrame().getByText("Home Page"),
+    ).toBeVisible({ timeout: Timeout.LONG });
+
+    // Verify back button is disabled initially (no history)
+    await expect(
+      po.page.getByTestId("preview-navigate-back-button"),
+    ).toBeDisabled();
+
+    // Click on the navigation link to go to /about
+    await po
+      .getPreviewIframeElement()
+      .contentFrame()
+      .getByText("Go to About Page")
+      .click();
+
+    // Wait for the About Page content to be visible
+    await expect(
+      po
+        .getPreviewIframeElement()
+        .contentFrame()
+        .getByRole("heading", { name: "About Page" }),
+    ).toBeVisible({ timeout: Timeout.MEDIUM });
+
+    // Now back button should be enabled
+    await expect(
+      po.page.getByTestId("preview-navigate-back-button"),
+    ).toBeEnabled();
+
+    // Click back button to go back to Home Page
+    await po.clickPreviewNavigateBack();
+
+    // Verify we're back on Home Page
+    await expect(
+      po
+        .getPreviewIframeElement()
+        .contentFrame()
+        .getByRole("heading", { name: "Home Page" }),
+    ).toBeVisible({ timeout: Timeout.MEDIUM });
+
+    // Now forward button should be enabled
+    await expect(
+      po.page.getByTestId("preview-navigate-forward-button"),
+    ).toBeEnabled();
+
+    // Click forward button to go back to About Page
+    await po.clickPreviewNavigateForward();
+
+    // Verify we're on About Page again
+    await expect(
+      po
+        .getPreviewIframeElement()
+        .contentFrame()
+        .getByRole("heading", { name: "About Page" }),
+    ).toBeVisible({ timeout: Timeout.MEDIUM });
+  },
+);

src/components/preview_panel/PreviewIframe.tsx

@@ -774,38 +774,102 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
   // Function to navigate back
   const handleNavigateBack = () => {
     if (canGoBack && iframeRef.current?.contentWindow) {
+      const newPosition = currentHistoryPosition - 1;
+      if (newPosition < 0 || newPosition >= navigationHistory.length) return;
+      const targetUrl = navigationHistory[newPosition];
+      if (!targetUrl) return;
+
+      // Send the target URL to navigate to (browser history.back() doesn't work in Electron iframes)
       iframeRef.current.contentWindow.postMessage(
         {
           type: "navigate",
-          payload: { direction: "backward" },
+          payload: { direction: "backward", url: targetUrl },
         },
         "*",
       );
 
       // Update our local state
-      setCurrentHistoryPosition((prev) => prev - 1);
-      setCanGoBack(currentHistoryPosition - 1 > 0);
+      setCurrentHistoryPosition(newPosition);
+      setCanGoBack(newPosition > 0);
       setCanGoForward(true);
+      // Update iframe URL ref to match
+      currentIframeUrlRef.current = targetUrl;
+
+      // Update preservedUrls to match navigation (for HMR remounts)
+      if (selectedAppId && appUrl) {
+        try {
+          const targetUrlObj = new URL(targetUrl);
+          const appUrlObj = new URL(appUrl);
+          if (targetUrlObj.origin === appUrlObj.origin) {
+            // Clear preserved URL if navigating back to root, otherwise update it
+            if (targetUrlObj.pathname === "/" || targetUrlObj.pathname === "") {
+              setPreservedUrls((prev) => {
+                const newUrls = { ...prev };
+                delete newUrls[selectedAppId];
+                return newUrls;
+              });
+            } else {
+              setPreservedUrls((prev) => ({
+                ...prev,
+                [selectedAppId]: targetUrl,
+              }));
+            }
+          }
+        } catch {
+          // Invalid URL, don't update preservedUrls
+        }
+      }
     }
   };
 
   // Function to navigate forward
   const handleNavigateForward = () => {
     if (canGoForward && iframeRef.current?.contentWindow) {
+      const newPosition = currentHistoryPosition + 1;
+      if (newPosition < 0 || newPosition >= navigationHistory.length) return;
+      const targetUrl = navigationHistory[newPosition];
+      if (!targetUrl) return;
+
+      // Send the target URL to navigate to (browser history.forward() doesn't work in Electron iframes)
       iframeRef.current.contentWindow.postMessage(
         {
           type: "navigate",
-          payload: { direction: "forward" },
+          payload: { direction: "forward", url: targetUrl },
         },
         "*",
       );
 
       // Update our local state
-      setCurrentHistoryPosition((prev) => prev + 1);
+      setCurrentHistoryPosition(newPosition);
       setCanGoBack(true);
-      setCanGoForward(
-        currentHistoryPosition + 1 < navigationHistory.length - 1,
-      );
+      setCanGoForward(newPosition < navigationHistory.length - 1);
+      // Update iframe URL ref to match
+      currentIframeUrlRef.current = targetUrl;
+
+      // Update preservedUrls to match navigation (for HMR remounts)
+      if (selectedAppId && appUrl) {
+        try {
+          const targetUrlObj = new URL(targetUrl);
+          const appUrlObj = new URL(appUrl);
+          if (targetUrlObj.origin === appUrlObj.origin) {
+            // Clear preserved URL if navigating forward to root, otherwise update it
+            if (targetUrlObj.pathname === "/" || targetUrlObj.pathname === "") {
+              setPreservedUrls((prev) => {
+                const newUrls = { ...prev };
+                delete newUrls[selectedAppId];
+                return newUrls;
+              });
+            } else {
+              setPreservedUrls((prev) => ({
+                ...prev,
+                [selectedAppId]: targetUrl,
+              }));
+            }
+          }
+        } catch {
+          // Invalid URL, don't update preservedUrls
+        }
+      }
     }
   };
 

worker/dyad-shim.js

@@ -67,8 +67,17 @@
 
   // --- Listener for Back/Forward Navigation (popstate event) ---
   window.addEventListener("popstate", () => {
+    const oldUrl = previousUrl;
     const currentUrl = window.location.href;
     previousUrl = currentUrl;
+    // Notify parent about the navigation change (for back/forward button support)
+    window.parent.postMessage(
+      {
+        type: "replaceState",
+        payload: { oldUrl: oldUrl, newUrl: currentUrl },
+      },
+      PARENT_TARGET_ORIGIN,
+    );
   });
 
   // --- Listener for Commands from Parent ---
@@ -80,9 +89,38 @@
     )
       return;
     if (event.data.type === "navigate") {
-      const direction = event.data.payload?.direction;
-      if (direction === "forward") history.forward();
-      else if (direction === "backward") history.back();
+      const { direction, url } = event.data.payload || {};
+      // If a URL is provided, use location.replace for navigation
+      // (browser history.back()/forward() doesn't work reliably in Electron iframes)
+      if (url && typeof url === "string") {
+        try {
+          // Validate URL and ensure it's same-origin to prevent javascript:/data: injection
+          const parsedUrl = new URL(url, window.location.href);
+          if (
+            parsedUrl.protocol === "http:" ||
+            parsedUrl.protocol === "https:"
+          ) {
+            // Use location.replace to avoid adding to history
+            window.location.replace(parsedUrl.href);
+          } else {
+            console.warn(
+              "[dyad-shim] Blocked navigation to unsafe URL protocol:",
+              parsedUrl.protocol,
+            );
+          }
+        } catch (e) {
+          console.error("[dyad-shim] Invalid navigation URL:", e);
+        }
+      } else if (url) {
+        console.warn("[dyad-shim] Invalid URL type:", typeof url);
+      } else {
+        // Fallback to history API if no URL provided
+        if (direction === "forward") {
+          window.history.go(1);
+        } else if (direction === "backward") {
+          window.history.go(-1);
+        }
+      }
     }
   });