Merge pull request #9 from ReactiveBayes/fix/deeplink-switches-history-api

fix(frontend): deep-linked switches frozen — commit selection via History API

Author: bvdmitri

frontend/src/components/dashboard/DashboardPage.test.tsx

@@ -12,15 +12,16 @@ import {
   makeResultFile,
 } from "@/test/fixtures";
 
-const replaceMock = vi.fn();
 let currentParams = new URLSearchParams();
 
 vi.mock("next/navigation", () => ({
-  useRouter: () => ({ replace: replaceMock }),
   usePathname: () => "/",
   useSearchParams: () => currentParams,
 }));
 
+// Selections are committed via the native History API (see useSelection).
+const replaceState = vi.spyOn(window.history, "replaceState");
+
 import { DashboardPage } from "./DashboardPage";
 
 function stubFetch() {
@@ -43,7 +44,7 @@ function stubFetch() {
 
 describe("DashboardPage", () => {
   beforeEach(() => {
-    replaceMock.mockClear();
+    replaceState.mockClear();
     currentParams = new URLSearchParams();
     stubFetch();
   });
@@ -88,7 +89,7 @@ describe("DashboardPage", () => {
     expect(within(drawer).getByRole("link", { name: /how it works/i })).toBeInTheDocument();
 
     await user.click(within(drawer).getByRole("button", { name: "Coin Toss Model" }));
-    expect(replaceMock).toHaveBeenCalled();
+    expect(replaceState).toHaveBeenCalled();
   });
 
   it("renders an error card when the index cannot be fetched", async () => {

frontend/src/lib/hooks/useSelection.test.tsx

@@ -1,23 +1,31 @@
-import { describe, expect, it, vi, beforeEach } from "vitest";
+import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
 import { renderHook, act } from "@testing-library/react";
 
-const replaceMock = vi.fn();
 let currentParams = new URLSearchParams();
 
 vi.mock("next/navigation", () => ({
-  useRouter: () => ({ replace: replaceMock }),
   usePathname: () => "/",
   useSearchParams: () => currentParams,
 }));
 
 import { useSelection } from "./useSelection";
 
+// Selections are committed via the native History API (Next.js syncs useSearchParams
+// with window.history.replaceState) rather than the router's navigation machinery,
+// which breaks on deep-linked static-export loads.
+const replaceState = vi.spyOn(window.history, "replaceState");
+const replacedUrl = () => replaceState.mock.calls[0][2] as string;
+
 describe("useSelection", () => {
   beforeEach(() => {
-    replaceMock.mockClear();
+    replaceState.mockClear();
     currentParams = new URLSearchParams();
   });
 
+  afterEach(() => {
+    replaceState.mockReset();
+  });
+
   it("exposes defaults when no params are set", () => {
     const { result } = renderHook(() => useSelection());
     expect(result.current.benchmark).toBeNull();
@@ -39,11 +47,11 @@ describe("useSelection", () => {
     expect(result.current.julia).toBe("1.12");
   });
 
-  it("select() writes params via router.replace and drops defaults", () => {
+  it("select() writes params via history.replaceState and drops defaults", () => {
     const { result } = renderHook(() => useSelection());
     act(() => result.current.select({ benchmark: "basic/coin_toss", metric: "all" }));
-    expect(replaceMock).toHaveBeenCalledTimes(1);
-    const url = replaceMock.mock.calls[0][0] as string;
+    expect(replaceState).toHaveBeenCalledTimes(1);
+    const url = replacedUrl();
     expect(url).toContain("b=basic%2Fcoin_toss");
     expect(url).not.toContain("m="); // "all" is the default -> omitted
   });
@@ -52,7 +60,7 @@ describe("useSelection", () => {
     currentParams = new URLSearchParams("b=basic%2Fkalman&m=cold_run_ms");
     const { result } = renderHook(() => useSelection());
     act(() => result.current.select({ benchmark: null }));
-    const url = replaceMock.mock.calls[0][0] as string;
+    const url = replacedUrl();
     expect(url).not.toContain("b=");
     expect(url).toContain("m=cold_run_ms"); // untouched params survive
   });

frontend/src/lib/hooks/useSelection.ts

@@ -3,7 +3,7 @@
 // All dashboard state lives in query params (design/frontend.md): the
 // benchmark universe is runtime-fetched, so static-export dynamic routes are
 // impossible — and query params make every view a shareable link.
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { usePathname, useSearchParams } from "next/navigation";
 import { useCallback } from "react";
 
 export interface Selection {
@@ -40,7 +40,6 @@ const PARAM_KEYS = {
 } as const;
 
 export function useSelection() {
-  const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
@@ -71,9 +70,14 @@ export function useSelection() {
         else params.delete(PARAM_KEYS.compare);
       }
       const query = params.toString();
-      router.replace(query ? `${pathname}?${query}` : pathname, { scroll: false });
+      // Commit via the native History API, not router.replace: Next.js syncs
+      // useSearchParams/usePathname with pushState/replaceState, and this avoids the
+      // App Router navigation/transition machinery, which fails to update the URL on
+      // deep-linked static-export loads (most visibly in Safari) — freezing every switch.
+      const url = query ? `${pathname}?${query}` : pathname;
+      window.history.replaceState(null, "", url);
     },
-    [router, pathname, searchParams],
+    [pathname, searchParams],
   );
 
   return { ...selection, select };