Fix refresh to preserve current route (#253) (#2336)

e2e-tests/fixtures/multi-page.md

+Creating a multi-page app with navigation.
+
+<dyad-write path="src/pages/Index.tsx" description="Home page with navigation link">
+import { Link } from "react-router-dom";
+
+const Index = () => {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-100">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold mb-4">Home Page</h1>
+        <Link
+          to="/about"
+          className="text-blue-500 hover:text-blue-700 underline"
+          data-testid="nav-to-about"
+        >
+          Go to About Page
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default Index;
+</dyad-write>
+
+<dyad-write path="src/pages/About.tsx" description="About page with navigation link back">
+import { Link } from "react-router-dom";
+
+const About = () => {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-100">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold mb-4">About Page</h1>
+        <Link
+          to="/"
+          className="text-blue-500 hover:text-blue-700 underline"
+          data-testid="nav-to-home"
+        >
+          Go to Home Page
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default About;
+</dyad-write>
+
+<dyad-write path="src/App.tsx" description="App with router">
+import { Toaster } from "@/components/ui/toaster";
+import { Toaster as Sonner } from "@/components/ui/sonner";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Index from "./pages/Index";
+import About from "./pages/About";
+
+const queryClient = new QueryClient();
+
+const App = () => (
+  <QueryClientProvider client={queryClient}>
+    <TooltipProvider>
+      <Toaster />
+      <Sonner />
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Index />} />
+          <Route path="/about" element={<About />} />
+        </Routes>
+      </BrowserRouter>
+    </TooltipProvider>
+  </QueryClientProvider>
+);
+
+export default App;
+</dyad-write>

e2e-tests/refresh.spec.ts

-import { testSkipIfWindows } from "./helpers/test_helper";
+import { testSkipIfWindows, Timeout } from "./helpers/test_helper";
+import { expect } from "@playwright/test";
 
 testSkipIfWindows("refresh app", async ({ po }) => {
   await po.setUp({ autoApprove: true });
@@ -17,3 +18,56 @@ testSkipIfWindows("refresh app", async ({ po }) => {
   await po.clickPreviewRefresh();
   await po.snapshotPreview();
 });
+
+testSkipIfWindows("refresh preserves current route", 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 });
+
+  // Click on the navigation link to go to /about (realistic user behavior)
+  await po
+    .getPreviewIframeElement()
+    .contentFrame()
+    .getByText("Go to About Page")
+    .click();
+
+  // Wait for the About Page content to be visible
+  await expect(
+    po.getPreviewIframeElement().contentFrame().getByText("About Page"),
+  ).toBeVisible({ timeout: Timeout.MEDIUM });
+
+  // Click refresh
+  await po.clickPreviewRefresh();
+
+  // Verify the route is preserved after refresh - About Page should still be visible
+  await expect(
+    po.getPreviewIframeElement().contentFrame().getByText("About Page"),
+  ).toBeVisible({ timeout: Timeout.MEDIUM });
+
+  // Wait to see if the page stays on About Page (reproducing local issue with HMR)
+  await po.page.waitForTimeout(5_000);
+
+  // Verify it's STILL on About Page after waiting - check that About Page heading is visible
+  // and the Home Page heading is not (use getByRole to match the heading, not the link text)
+  await expect(
+    po
+      .getPreviewIframeElement()
+      .contentFrame()
+      .getByRole("heading", { name: "About Page" }),
+  ).toBeVisible({ timeout: Timeout.MEDIUM });
+  await expect(
+    po
+      .getPreviewIframeElement()
+      .contentFrame()
+      .getByRole("heading", { name: "Home Page" }),
+  ).not.toBeVisible();
+});

src/atoms/appAtoms.ts

@@ -24,6 +24,10 @@ export const envVarsAtom = atom<Record<string, string | undefined>>({});
 
 export const previewPanelKeyAtom = atom<number>(0);
 
+// Stores the current preview URL to preserve route across HMR-induced remounts
+// Maps appId to the current URL for that app
+export const previewCurrentUrlAtom = atom<Record<number, string>>({});
+
 export const previewErrorMessageAtom = atom<
   { message: string; source: "preview-app" | "dyad-app" } | undefined
 >(undefined);