From 27319f9dc8a70f4f70775a3d067e88ec126a1aa8 Mon Sep 17 00:00:00 2001
From: ashx-j <281260375+ashx-j@users.noreply.github.com>
Date: Tue, 6 Oct 2026 18:19:32 +0200
Subject: [PATCH 1/3] fix(preview): failed floating previews show retry
 controls

---
 apps/server/src/preview/ServerBrowser.test.ts |  86 +++++
 apps/server/src/preview/ServerBrowser.ts      |  26 +-
 apps/web/src/browser/ServerBrowserSurface.tsx |   7 +-
 .../src/components/RightPanelTabs.test.tsx    |   1 +
 .../preview/ThreadPreviewMiniPlayer.test.tsx  | 355 ++++++++++++++++++
 .../preview/ThreadPreviewMiniPlayer.tsx       | 112 +++++-
 .../components/preview/usePreviewBridge.ts    |   1 +
 apps/web/src/previewStateStore.test.ts        |   5 +
 apps/web/src/previewStateStore.ts             |   5 +
 packages/contracts/src/preview.test.ts        |  18 +
 packages/contracts/src/previewAutomation.ts   |   8 +
 11 files changed, 613 insertions(+), 11 deletions(-)
 create mode 100644 apps/web/src/components/preview/ThreadPreviewMiniPlayer.test.tsx

diff --git a/apps/server/src/preview/ServerBrowser.test.ts b/apps/server/src/preview/ServerBrowser.test.ts
index dce0c23b96cf..67dbf23ecdfe 100644
--- a/apps/server/src/preview/ServerBrowser.test.ts
+++ b/apps/server/src/preview/ServerBrowser.test.ts
@@ -261,6 +261,92 @@ beforeEach(() => {
   desktopConnections.length = 0;
 });
 
+it.live(
+  "reports main-frame navigation failures until a retry begins while keeping the host available",
+  () =>
+    Effect.scoped(
+      Effect.gen(function* () {
+        const { broker, tabId } = yield* ready;
+        const page = contexts[0]!.page;
+        const url = "http://localhost:5733/";
+        yield* Effect.promise(() => page.goto(url));
+        const request = {
+          isNavigationRequest: () => true,
+          frame: () => page,
+          url: () => url,
+          method: () => "GET",
+          failure: () => ({ errorText: "net::ERR_CONNECTION_REFUSED" }),
+        };
+        page.emit("request", request);
+        page.emit("requestfailed", request);
+        page.emit("load");
+        yield* Effect.promise(() => page.emitAsync("framenavigated", page));
+        const failed = yield* broker.invoke<PreviewAutomationStatus>({
+          scope,
+          tabId,
+          operation: "status",
+          input: {},
+        });
+        expect(failed).toMatchObject({
+          available: true,
+          loading: false,
+          navigationError: { url, code: -102, description: "ERR_CONNECTION_REFUSED" },
+        });
+
+        page.emit("requestfailed", {
+          ...request,
+          frame: () => ({}),
+          failure: () => ({ errorText: "net::ERR_NAME_NOT_RESOLVED" }),
+        });
+        expect(
+          yield* broker.invoke<PreviewAutomationStatus>({
+            scope,
+            tabId,
+            operation: "status",
+            input: {},
+          }),
+        ).toMatchObject({ navigationError: failed.navigationError });
+
+        yield* Effect.promise(() => page.goto("https://previous.example/"));
+        yield* Effect.promise(() => page.emitAsync("framenavigated", page));
+        const restored = yield* broker.invoke<PreviewAutomationStatus>({
+          scope,
+          tabId,
+          operation: "status",
+          input: {},
+        });
+        expect(restored).toMatchObject({
+          available: true,
+          loading: false,
+          url: "https://previous.example/",
+        });
+        expect(restored).not.toHaveProperty("navigationError");
+
+        page.emit("request", request);
+        page.emit("requestfailed", request);
+
+        page.emit("request", request);
+        const retrying = yield* broker.invoke<PreviewAutomationStatus>({
+          scope,
+          tabId,
+          operation: "status",
+          input: {},
+        });
+        expect(retrying.loading).toBe(true);
+        expect(retrying).not.toHaveProperty("navigationError");
+        yield* Effect.promise(() => page.goto(url));
+        const loaded = yield* broker.invoke<PreviewAutomationStatus>({
+          scope,
+          tabId,
+          operation: "status",
+          input: {},
+        });
+        expect(loaded).toMatchObject({ available: true, loading: false, url });
+        expect(loaded).not.toHaveProperty("navigationError");
+      }),
+    ).pipe(Effect.provide(layer)),
+);
+
 it.live("readiness none responds immediately but takeover input waits for navigation commit", () =>
   Effect.scoped(
     Effect.gen(function* () {
diff --git a/apps/server/src/preview/ServerBrowser.ts b/apps/server/src/preview/ServerBrowser.ts
index 42dc916abb61..6a529fb18e84 100644
--- a/apps/server/src/preview/ServerBrowser.ts
+++ b/apps/server/src/preview/ServerBrowser.ts
@@ -308,6 +308,7 @@ interface ServerTab {
   colorScheme: PreviewAppearancePreference;
   zoomFactor: number;
   loading: boolean;
+  loadFailure: Extract<PreviewNavStatus, { _tag: "LoadFailed" }> | null;
   closing: boolean;
   recording: Recording | null;
   initialNavigation: Promise<void> | null;
@@ -515,6 +516,7 @@ const make = Effect.gen(function* () {
   };
 
   const report = (tab: ServerTab, navStatus: PreviewNavStatus) => {
+    tab.loadFailure = navStatus._tag === "LoadFailed" ? navStatus : null;
     void tab.cdp
       .send("Page.getNavigationHistory")
       .catch(() => null)
@@ -536,13 +538,19 @@ const make = Effect.gen(function* () {
       });
   };
 
-  const reportLoaded = async (tab: ServerTab) => {
+  const reportLoaded = async (tab: ServerTab, confirmedNavigation = false) => {
     const url = tab.page.url();
+    const loadFailure = tab.loadFailure;
     // Chromium's error page loads after `requestfailed` and must not clear LoadFailed.
-    if (url === "about:blank" || url.startsWith("chrome-error://")) return;
+    if (
+      (loadFailure && (!confirmedNavigation || url === loadFailure.url)) ||
+      url === "about:blank" ||
+      url.startsWith("chrome-error://")
+    )
+      return;
     const title = (await tab.page.title().catch(() => "")).slice(0, 512);
     // A navigation that started while reading the title owns the status now.
-    if (tab.loading || tab.page.url() !== url) return;
+    if (tab.loadFailure !== loadFailure || tab.loading || tab.page.url() !== url) return;
     report(tab, { _tag: "Success", url: url.slice(0, 2048), title });
   };
 
@@ -751,6 +759,7 @@ const make = Effect.gen(function* () {
       colorScheme: "system",
       zoomFactor: 1,
       loading: false,
+      loadFailure: snapshot.navStatus._tag === "LoadFailed" ? snapshot.navStatus : null,
       closing: false,
       recording: null,
       recordingStart: null,
@@ -775,7 +784,7 @@ const make = Effect.gen(function* () {
     });
     page.on("framenavigated", (frame) => {
       // Same-document navigations (SPA routes) fire no load event.
-      if (frame === page.mainFrame() && !tab.loading) void reportLoaded(tab);
+      if (frame === page.mainFrame() && !tab.loading) void reportLoaded(tab, true);
     });
     page.on("requestfailed", (request) => {
       const errorText = request.failure()?.errorText ?? "";
@@ -1119,6 +1128,15 @@ const make = Effect.gen(function* () {
       url: url === "about:blank" ? null : url,
       title: null,
       loading: tab.loading,
+      ...(tab.loadFailure
+        ? {
+            navigationError: {
+              url: tab.loadFailure.url,
+              code: tab.loadFailure.code,
+              description: tab.loadFailure.description,
+            },
+          }
+        : {}),
       control: {
         owner:
           tab.control.controller !== null
diff --git a/apps/web/src/browser/ServerBrowserSurface.tsx b/apps/web/src/browser/ServerBrowserSurface.tsx
index 26013d720bc5..50cccc1da80e 100644
--- a/apps/web/src/browser/ServerBrowserSurface.tsx
+++ b/apps/web/src/browser/ServerBrowserSurface.tsx
@@ -26,6 +26,7 @@ import {
   type KeyboardEvent,
   type PointerEvent,
   type Ref,
+  type ReactNode,
   useCallback,
   useEffect,
   useEffectEvent,
@@ -153,6 +154,8 @@ export function ServerBrowserSurface(props: {
   readonly onFirstFrame?: () => void;
   readonly onViewport?: (viewport: PreviewStreamViewport) => void;
   readonly onControl?: (control: PreviewStreamControl | null) => void;
+  /** Replaces the page while keeping the stream and ownership controls connected. */
+  readonly pageOverlay?: ReactNode;
   readonly className?: string;
   readonly ref?: Ref<ServerBrowserHandle>;
 }) {
@@ -166,6 +169,7 @@ export function ServerBrowserSurface(props: {
     onFirstFrame,
     onViewport,
     onControl,
+    pageOverlay,
     className,
     ref,
   } = props;
@@ -747,7 +751,7 @@ export function ServerBrowserSurface(props: {
       <div className="relative min-h-0 flex-1">
         <canvas
           ref={canvasRef}
-          className="block size-full touch-none object-contain"
+          className={cn("block size-full touch-none object-contain", pageOverlay && "invisible")}
           onPointerDown={handlePointer}
           onPointerMove={handlePointer}
           onPointerUp={handlePointer}
@@ -762,6 +766,7 @@ export function ServerBrowserSurface(props: {
             controller={control?.controller === "agent" ? "agent" : "none"}
           />
         ) : null}
+        {pageOverlay ? <div className="absolute inset-0 z-10">{pageOverlay}</div> : null}
         {/* Focus target for page keyboard input. Pinned top-left so focusing it never
           scrolls the surface; 16px keeps iOS from zooming the app on focus. */}
         <textarea
diff --git a/apps/web/src/components/RightPanelTabs.test.tsx b/apps/web/src/components/RightPanelTabs.test.tsx
index 25b0997813e1..2ebc7805011f 100644
--- a/apps/web/src/components/RightPanelTabs.test.tsx
+++ b/apps/web/src/components/RightPanelTabs.test.tsx
@@ -76,6 +76,7 @@ function overlay(
 ) {
   return {
     hasWebContents: true,
+    loadFailure: null,
     canGoBack: false,
     canGoForward: false,
     loading: false,
diff --git a/apps/web/src/components/preview/ThreadPreviewMiniPlayer.test.tsx b/apps/web/src/components/preview/ThreadPreviewMiniPlayer.test.tsx
new file mode 100644
index 000000000000..2ef543e216e9
--- /dev/null
+++ b/apps/web/src/components/preview/ThreadPreviewMiniPlayer.test.tsx
@@ -0,0 +1,355 @@
+// @vitest-environment jsdom
+
+import {
+  EnvironmentId,
+  ThreadId,
+  type DesktopPreviewTabState,
+  type PreviewSessionSnapshot,
+} from "@t3tools/contracts";
+import type { PreviewStreamControl } from "@t3tools/client-runtime/preview/server-browser-stream";
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test";
+
+import { useBrowserSurfaceStore } from "~/browser/browserSurfaceStore";
+import { previewRuntimeTabId } from "~/browser/previewRuntimeTabId";
+import {
+  browserMiniPlayerSource,
+  selectThreadPreviewMiniPlayer,
+  usePreviewMiniPlayerStore,
+} from "~/previewMiniPlayerStore";
+import {
+  applyPreviewDesktopState,
+  applyPreviewServerSnapshot,
+  readThreadPreviewState,
+  resetPreviewStateForTests,
+  updatePreviewServerSnapshot,
+} from "~/previewStateStore";
+import { AppAtomRegistryProvider } from "~/rpc/atomRegistry";
+
+import { ChatCanvasContext } from "../chat/ChatCanvasContext";
+import { resolveChatCanvasLayout } from "../chat/chatCanvasLayout";
+import { ThreadPreviewMiniPlayer } from "./ThreadPreviewMiniPlayer";
+import { projectDesktopState } from "./usePreviewBridge";
+
+const mocks = vi.hoisted(() => ({
+  refresh: vi.fn<(tabId: string) => Promise<void>>(),
+  closePictureInPicture: vi.fn<(tabId: string) => Promise<void>>(),
+  toast: vi.fn(),
+}));
+
+vi.mock("./previewBridge", () => ({
+  previewBridge: {
+    refresh: mocks.refresh,
+    pictureInPicture: { close: mocks.closePictureInPicture },
+  },
+}));
+vi.mock("~/browser/browserRecording", () => ({
+  findActiveBrowserRecordingRuntimeTabId: () => null,
+  useActiveBrowserRecordingTabIds: () => new Set<string>(),
+}));
+vi.mock("~/components/ui/toast", () => ({ toastManager: { add: mocks.toast } }));
+vi.mock("~/rightPanelStore", () => ({
+  useRightPanelStore: { getState: () => ({ openBrowser: vi.fn() }) },
+}));
+vi.mock("~/state/device", () => ({ useDeviceState: vi.fn() }));
+vi.mock("../device/DeviceStreamView", () => ({ DeviceStreamView: () => null }));
+vi.mock("~/state/previewStream", () => {
+  const access = {
+    httpBase: "http://preview.test/api/preview-stream",
+    wsBase: "ws://preview.test/api/preview-stream",
+    query: {},
+    credentials: true,
+  };
+  return { usePreviewStreamAccess: () => access, refreshPreviewStreamAccess: vi.fn() };
+});
+
+class FakeSocket extends EventTarget {
+  static readonly OPEN = 1;
+  static current: FakeSocket;
+  readyState = 1;
+  binaryType = "";
+  readonly sent: string[] = [];
+  constructor(_url: string) {
+    super();
+    FakeSocket.current = this;
+  }
+  send(value: string) {
+    this.sent.push(value);
+  }
+  close() {
+    this.readyState = 3;
+  }
+  control(value: PreviewStreamControl) {
+    this.dispatchEvent(
+      new MessageEvent("message", { data: JSON.stringify({ type: "control", ...value }) }),
+    );
+  }
+}
+
+const threadRef = {
+  environmentId: EnvironmentId.make("mini-player-environment"),
+  threadId: ThreadId.make("mini-player-thread"),
+};
+const tabId = "mini-player-tab";
+const url = "http://localhost:5733/";
+const runtimeTabId = previewRuntimeTabId(threadRef, null, tabId);
+const failure = {
+  kind: "LoadFailed",
+  url,
+  title: "",
+  code: -102,
+  description: "ERR_CONNECTION_REFUSED",
+} as const;
+const snapshot: PreviewSessionSnapshot = {
+  threadId: threadRef.threadId,
+  tabId,
+  navStatus: { _tag: "Success", url, title: "App" },
+  viewport: { _tag: "freeform", width: 1280, height: 800 },
+  canGoBack: false,
+  canGoForward: false,
+  updatedAt: "2026-10-06T00:00:00.000Z",
+};
+const canvas = {
+  container: { width: 1200, height: 800 },
+  lane: { padding: 20, minChatWidth: 640 },
+  previewKey: `browser:${tabId}`,
+  layout: resolveChatCanvasLayout({
+    container: { width: 1200, height: 800 },
+    preview: {
+      key: `browser:${tabId}`,
+      width: 320,
+      position: null,
+      source: { width: 1280, height: 800 },
+    },
+  }),
+  reportPreview: vi.fn(),
+  clearPreview: vi.fn(),
+  registerTimeline: vi.fn(),
+  reportDetailsCard: vi.fn(),
+};
+
+function desktopState(
+  navStatus: DesktopPreviewTabState["navStatus"],
+  overrides: Partial<DesktopPreviewTabState> = {},
+) {
+  applyPreviewDesktopState(
+    threadRef,
+    tabId,
+    projectDesktopState({
+      tabId: runtimeTabId,
+      navStatus,
+      webContentsId: 42,
+      canGoBack: false,
+      canGoForward: false,
+      zoomFactor: 1,
+      pictureInPicture: false,
+      colorScheme: "system",
+      audioMuted: false,
+      audible: false,
+      controller: "none",
+      updatedAt: snapshot.updatedAt,
+      ...overrides,
+    }),
+  );
+}
+
+function Player() {
+  const miniPlayer = usePreviewMiniPlayerStore((state) =>
+    selectThreadPreviewMiniPlayer(state.byThreadKey, threadRef),
+  );
+  return miniPlayer ? (
+    <ThreadPreviewMiniPlayer threadRef={threadRef} miniPlayer={miniPlayer} />
+  ) : null;
+}
+
+let root: Root;
+let container: HTMLDivElement;
+
+function button(label: string) {
+  const found = Array.from(container.querySelectorAll("button")).find(
+    (element) => element.textContent === label || element.getAttribute("aria-label") === label,
+  );
+  if (!found) throw new Error(`Missing button: ${label}`);
+  return found;
+}
+
+beforeEach(async () => {
+  vi.clearAllMocks();
+  mocks.refresh.mockReset().mockResolvedValue(undefined);
+  mocks.closePictureInPicture.mockReset().mockResolvedValue(undefined);
+  resetPreviewStateForTests();
+  useBrowserSurfaceStore.setState({ activityByTabId: {}, byTabId: {} });
+  usePreviewMiniPlayerStore.setState({ byThreadKey: {} });
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  vi.stubGlobal(
+    "ResizeObserver",
+    class {
+      constructor(private readonly onResize: () => void) {}
+      observe() {
+        this.onResize();
+      }
+      disconnect() {}
+    },
+  );
+  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockReturnValue(
+    new DOMRect(868, 588, 320, 200),
+  );
+  vi.stubGlobal("WebSocket", FakeSocket);
+  vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue(null);
+  applyPreviewServerSnapshot(threadRef, snapshot);
+  desktopState({ kind: "Success", url, title: "App" });
+  usePreviewMiniPlayerStore.getState().open(threadRef, browserMiniPlayerSource(tabId));
+  container = document.createElement("div");
+  document.body.appendChild(container);
+  root = createRoot(container);
+  await act(() => {
+    root.render(
+      <AppAtomRegistryProvider>
+        <ChatCanvasContext value={canvas}>
+          <Player />
+        </ChatCanvasContext>
+      </AppAtomRegistryProvider>,
+    );
+  });
+});
+
+afterEach(async () => {
+  await act(() => root.unmount());
+  container.remove();
+  resetPreviewStateForTests();
+  useBrowserSurfaceStore.setState({ activityByTabId: {}, byTabId: {} });
+  usePreviewMiniPlayerStore.setState({ byThreadKey: {} });
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+  vi.useRealTimers();
+});
+
+describe("floating browser navigation", () => {
+  it("keeps a failed server stream connected so takeover can enable retry and success restores its canvas", async () => {
+    vi.useFakeTimers();
+    const serverSnapshot = {
+      ...snapshot,
+      runtime: "server" as const,
+      navStatus: {
+        _tag: "LoadFailed" as const,
+        url,
+        title: "",
+        code: failure.code,
+        description: failure.description,
+      },
+    };
+    await act(() => updatePreviewServerSnapshot(threadRef, serverSnapshot));
+    await act(() => vi.advanceTimersByTimeAsync(0));
+    const socket = FakeSocket.current;
+    const canvas = container.querySelector("canvas");
+    expect(container.querySelector('[role="alert"]')?.textContent).toContain(
+      "Preview couldn't load",
+    );
+    expect(button("Retry").disabled).toBe(true);
+
+    const control: PreviewStreamControl = {
+      canOperate: true,
+      controller: "agent",
+      generation: 1,
+      dialog: null,
+    };
+    await act(() => socket.control(control));
+    await act(() => button("Take control").click());
+    expect(socket.sent.map((value) => JSON.parse(value))).toEqual([{ type: "takeControl" }]);
+    await act(() => socket.control({ ...control, controller: "you", generation: 2 }));
+    expect(button("Retry").disabled).toBe(false);
+    await act(() => button("Retry").click());
+    expect(socket.sent.map((value) => JSON.parse(value))).toContainEqual({ type: "reload" });
+    expect(mocks.refresh).not.toHaveBeenCalled();
+
+    await act(() =>
+      updatePreviewServerSnapshot(threadRef, {
+        ...serverSnapshot,
+        navStatus: { _tag: "Loading", url, title: "" },
+      }),
+    );
+    expect(container.textContent).toContain("Loading preview…");
+    expect(socket.readyState).toBe(FakeSocket.OPEN);
+    await act(() =>
+      updatePreviewServerSnapshot(threadRef, { ...serverSnapshot, navStatus: snapshot.navStatus }),
+    );
+    expect(container.querySelector('[role="alert"]')).toBeNull();
+    expect(container.querySelector("canvas")).toBe(canvas);
+    expect(FakeSocket.current).toBe(socket);
+    expect(socket.readyState).toBe(FakeSocket.OPEN);
+  });
+
+  it("hides the failed guest, shows retry progress, and restores the same frame after success", async () => {
+    const frameStyle = container.querySelector("section")?.getAttribute("style");
+    expect(useBrowserSurfaceStore.getState().byTabId[runtimeTabId]?.visible).toBe(true);
+
+    await act(() => desktopState(failure));
+    expect(container.querySelector('[role="alert"]')?.textContent).toContain(
+      "Preview couldn't load",
+    );
+    expect(container.textContent).toContain(url);
+    expect(useBrowserSurfaceStore.getState().byTabId[runtimeTabId]?.visible).toBe(false);
+    expect(button("Retry").disabled).toBe(false);
+
+    await act(() => {
+      updatePreviewServerSnapshot(threadRef, {
+        ...snapshot,
+        navStatus: {
+          _tag: "LoadFailed",
+          url,
+          title: "",
+          code: -102,
+          description: failure.description,
+        },
+      });
+      button("Retry").click();
+      desktopState({ kind: "Loading", url, title: "" });
+    });
+    expect(mocks.refresh).toHaveBeenCalledExactlyOnceWith(runtimeTabId);
+    expect(container.querySelector('[role="alert"]')).toBeNull();
+    expect(container.querySelector('[role="status"]')?.textContent).toBe("Loading preview…");
+    expect(useBrowserSurfaceStore.getState().byTabId[runtimeTabId]?.visible).toBe(false);
+
+    await act(() => desktopState({ kind: "Success", url, title: "App" }));
+    expect(readThreadPreviewState(threadRef).sessions[tabId]?.navStatus._tag).toBe("LoadFailed");
+    expect(container.querySelector('[role="status"]')).toBeNull();
+    expect(useBrowserSurfaceStore.getState().byTabId[runtimeTabId]?.visible).toBe(true);
+    expect(container.querySelector("section")?.getAttribute("style")).toBe(frameStyle);
+  });
+
+  it("publishes failures while the guest remains stopped and closes only the floating presentation", async () => {
+    await act(() => desktopState(failure));
+    await act(() => desktopState({ ...failure, description: "ERR_NAME_NOT_RESOLVED", code: -105 }));
+    expect(container.textContent).toContain("DNS address could not be found");
+    await act(() => button("Close").click());
+    expect(container.querySelector("section")).toBeNull();
+    expect(useBrowserSurfaceStore.getState().byTabId[runtimeTabId]?.visible).toBe(false);
+    expect(readThreadPreviewState(threadRef).sessions[tabId]).toBeDefined();
+  });
+
+  it("keeps close available while reconnecting and reports a rejected retry", async () => {
+    await act(() => desktopState(failure));
+    mocks.refresh.mockRejectedValueOnce(new Error("Guest disconnected"));
+    await act(() => button("Retry").click());
+    expect(mocks.toast).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: "Unable to retry preview",
+        description: "Guest disconnected",
+      }),
+    );
+    expect(useBrowserSurfaceStore.getState().byTabId[runtimeTabId]?.visible).toBe(false);
+
+    await act(() => desktopState({ kind: "Idle" }, { webContentsId: null }));
+    expect(container.querySelector('[role="status"]')?.textContent).toBe("Reconnecting preview…");
+    await act(() => button("Close").click());
+    expect(container.querySelector("section")).toBeNull();
+  });
+
+  it("allows an existing separate window to close during failed navigation", async () => {
+    await act(() => desktopState(failure, { pictureInPicture: true }));
+    expect(button("Close popped-out preview").disabled).toBe(false);
+    await act(() => button("Close popped-out preview").click());
+    expect(mocks.closePictureInPicture).toHaveBeenCalledExactlyOnceWith(runtimeTabId);
+  });
+});
diff --git a/apps/web/src/components/preview/ThreadPreviewMiniPlayer.tsx b/apps/web/src/components/preview/ThreadPreviewMiniPlayer.tsx
index 91f0453c29a8..2ef51f64aaa8 100644
--- a/apps/web/src/components/preview/ThreadPreviewMiniPlayer.tsx
+++ b/apps/web/src/components/preview/ThreadPreviewMiniPlayer.tsx
@@ -47,8 +47,12 @@ import { useDeviceState } from "~/state/device";
 
 import { DeviceStreamView } from "../device/DeviceStreamView";
 import type { DeviceScreenSize } from "@t3tools/client-runtime/device/stream";
-import type { PreviewStreamViewport } from "@t3tools/client-runtime/preview/server-browser-stream";
+import type {
+  PreviewStreamControl,
+  PreviewStreamViewport,
+} from "@t3tools/client-runtime/preview/server-browser-stream";
 import { previewBridge } from "./previewBridge";
+import { describePreviewError } from "./errorCodeMessages";
 import {
   clampPreviewMiniPlayerPosition,
   NO_PREVIEW_MINI_PLAYER_OBSTACLES,
@@ -130,7 +134,17 @@ function BrowserMiniPlayer({ threadRef, tabId, miniPlayer }: Props & { readonly
   );
   const nativeServerTab = useRendersServerTabNatively(threadRef.environmentId, snapshot);
   const serverTab = snapshot?.runtime === "server" && !nativeServerTab;
+  const loadFailure =
+    serverTab || !desktopOverlay
+      ? snapshot?.navStatus._tag === "LoadFailed"
+        ? snapshot.navStatus
+        : null
+      : desktopOverlay.loadFailure;
+  const loading =
+    serverTab || !desktopOverlay ? snapshot?.navStatus._tag === "Loading" : desktopOverlay.loading;
+  const nativeSurfaceVisible = Boolean(desktopOverlay?.hasWebContents) && !loadFailure && !loading;
   const [streamViewport, setStreamViewport] = useState<PreviewStreamViewport | null>(null);
+  const [serverControl, setServerControl] = useState<PreviewStreamControl | null>(null);
   const serverSurfaceRef = useRef<ServerBrowserHandle | null>(null);
   const serverPictureInPicture =
     useServerPictureInPictureKey() === serverPictureInPictureKey(threadRef.threadId, tabId);
@@ -148,6 +162,22 @@ function BrowserMiniPlayer({ threadRef, tabId, miniPlayer }: Props & { readonly
     useRightPanelStore.getState().openBrowser(threadRef, tabId);
   };
 
+  const close = () => usePreviewMiniPlayerStore.getState().close(threadRef);
+
+  const retry = () => {
+    if (serverTab) {
+      serverSurfaceRef.current?.reload();
+    } else if (previewBridge) {
+      void previewBridge.refresh(runtimeTabId).catch((error) => {
+        toastManager.add({
+          type: "error",
+          title: "Unable to retry preview",
+          description: error instanceof Error ? error.message : "An error occurred.",
+        });
+      });
+    }
+  };
+
   const toggleNativePictureInPicture = async () => {
     try {
       if (serverTab) {
@@ -196,7 +226,10 @@ function BrowserMiniPlayer({ threadRef, tabId, miniPlayer }: Props & { readonly
                   aria-label={
                     poppedOut ? "Close popped-out preview" : "Pop preview into separate window"
                   }
-                  disabled={!serverTab && !desktopOverlay?.hasWebContents}
+                  disabled={
+                    !poppedOut &&
+                    (serverTab ? Boolean(loadFailure || loading) : !nativeSurfaceVisible)
+                  }
                   onPointerDown={(event) => event.stopPropagation()}
                   onClick={toggleNativePictureInPicture}
                 />
@@ -226,6 +259,18 @@ function BrowserMiniPlayer({ threadRef, tabId, miniPlayer }: Props & { readonly
               followSize={false}
               controlPosition="bottom"
               onViewport={setStreamViewport}
+              onControl={setServerControl}
+              pageOverlay={
+                loadFailure || loading ? (
+                  <BrowserMiniPlayerStatus
+                    loadFailure={loadFailure}
+                    loading={loading}
+                    retryDisabled={serverControl?.controller !== "you"}
+                    onRetry={retry}
+                    onClose={close}
+                  />
+                ) : undefined
+              }
               className="size-full"
             />
           </div>
@@ -233,16 +278,22 @@ function BrowserMiniPlayer({ threadRef, tabId, miniPlayer }: Props & { readonly
           <>
             <BrowserSurfaceSlot
               tabId={runtimeTabId}
-              visible={Boolean(desktopOverlay?.hasWebContents)}
+              visible={nativeSurfaceVisible}
               cornerRadius={PREVIEW_MINI_PLAYER_CORNER_RADIUS}
               zIndex={PREVIEW_MINI_PLAYER_WEBVIEW_Z_INDEX}
               fitSourceContent
               layoutVersion={`${frame.x}:${frame.y}`}
               className="absolute inset-0"
             />
-            {!desktopOverlay?.hasWebContents ? (
-              <div className="pointer-events-none absolute inset-0 z-[49] flex items-center justify-center rounded-[inherit] bg-muted text-xs text-muted-foreground">
-                Reconnecting preview…
+            {!nativeSurfaceVisible ? (
+              <div className="pointer-events-auto absolute inset-0 z-[48] overflow-hidden rounded-[inherit]">
+                <BrowserMiniPlayerStatus
+                  loadFailure={loadFailure}
+                  loading={loading}
+                  retryDisabled={!previewBridge || !desktopOverlay?.hasWebContents}
+                  onRetry={retry}
+                  onClose={close}
+                />
               </div>
             ) : null}
           </>
@@ -252,6 +303,55 @@ function BrowserMiniPlayer({ threadRef, tabId, miniPlayer }: Props & { readonly
   );
 }
 
+function BrowserMiniPlayerStatus({
+  loadFailure,
+  loading,
+  retryDisabled,
+  onRetry,
+  onClose,
+}: {
+  readonly loadFailure: { readonly url: string; readonly description: string } | null;
+  readonly loading: boolean;
+  readonly retryDisabled: boolean;
+  readonly onRetry: () => void;
+  readonly onClose: () => void;
+}) {
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-3 overflow-auto bg-background px-4 py-3 text-center text-xs text-muted-foreground">
+      <div role={loadFailure ? "alert" : "status"} className="min-w-0 w-full">
+        <p className="font-medium text-foreground">
+          {loadFailure
+            ? "Preview couldn't load"
+            : loading
+              ? "Loading preview…"
+              : "Reconnecting preview…"}
+        </p>
+        {loadFailure ? (
+          <>
+            <Tooltip>
+              <TooltipTrigger render={<p className="mt-1 truncate" />}>
+                {loadFailure.url}
+              </TooltipTrigger>
+              <TooltipPopup>{loadFailure.url}</TooltipPopup>
+            </Tooltip>
+            <p className="mt-1">{describePreviewError(loadFailure.description)}</p>
+          </>
+        ) : null}
+      </div>
+      <div className="flex shrink-0 items-center gap-2">
+        {loadFailure ? (
+          <Button size="xs" disabled={retryDisabled} onClick={onRetry}>
+            Retry
+          </Button>
+        ) : null}
+        <Button variant="outline" size="xs" onClick={onClose}>
+          Close
+        </Button>
+      </div>
+    </div>
+  );
+}
+
 function DeviceMiniPlayer({
   threadRef,
   source,
diff --git a/apps/web/src/components/preview/usePreviewBridge.ts b/apps/web/src/components/preview/usePreviewBridge.ts
index ee737892a58d..2ed06a73486e 100644
--- a/apps/web/src/components/preview/usePreviewBridge.ts
+++ b/apps/web/src/components/preview/usePreviewBridge.ts
@@ -120,6 +120,7 @@ export function projectDesktopState(state: DesktopPreviewTabState): DesktopPrevi
     canGoBack: state.canGoBack,
     canGoForward: state.canGoForward,
     loading: state.navStatus.kind === "Loading",
+    loadFailure: state.navStatus.kind === "LoadFailed" ? state.navStatus : null,
     zoomFactor: state.zoomFactor,
     pictureInPicture: state.pictureInPicture,
     colorScheme: state.colorScheme,
diff --git a/apps/web/src/previewStateStore.test.ts b/apps/web/src/previewStateStore.test.ts
index 9fa1fae7e54f..3734228e4016 100644
--- a/apps/web/src/previewStateStore.test.ts
+++ b/apps/web/src/previewStateStore.test.ts
@@ -315,6 +315,7 @@ describe("previewStateStore (single-tab)", () => {
     });
     applyPreviewDesktopState(ref, snapshot.tabId, {
       hasWebContents: true,
+      loadFailure: null,
       canGoBack: true,
       canGoForward: false,
       loading: false,
@@ -336,6 +337,7 @@ describe("previewStateStore (single-tab)", () => {
     applyPreviewServerSnapshot(ref, snapshot);
     const overlay = {
       hasWebContents: true,
+      loadFailure: null,
       canGoBack: true,
       canGoForward: false,
       loading: false,
@@ -370,6 +372,7 @@ describe("previewStateStore (single-tab)", () => {
     applyPreviewServerSnapshot(ref, second);
     applyPreviewDesktopState(ref, first.tabId, {
       hasWebContents: true,
+      loadFailure: null,
       canGoBack: true,
       canGoForward: false,
       loading: false,
@@ -421,6 +424,7 @@ describe("previewStateStore (single-tab)", () => {
     applyPreviewServerSnapshot(ref, active);
     applyPreviewDesktopState(ref, stale.tabId, {
       hasWebContents: true,
+      loadFailure: null,
       canGoBack: false,
       canGoForward: false,
       loading: false,
@@ -551,6 +555,7 @@ describe("previewStateStore (single-tab)", () => {
     beginPreviewSessionClose(ref, previous.tabId);
     applyPreviewDesktopState(ref, previous.tabId, {
       hasWebContents: true,
+      loadFailure: null,
       canGoBack: false,
       canGoForward: false,
       loading: false,
diff --git a/apps/web/src/previewStateStore.ts b/apps/web/src/previewStateStore.ts
index 13ce14a26dfa..edca79ed6e64 100644
--- a/apps/web/src/previewStateStore.ts
+++ b/apps/web/src/previewStateStore.ts
@@ -10,6 +10,7 @@ import { scopedThreadKey } from "@t3tools/client-runtime/environment";
 import {
   type DesktopPreviewColorScheme,
   type DesktopPreviewFavicon,
+  type DesktopPreviewNavStatus,
   type PreviewEvent,
   type PreviewListResult,
   type PreviewSessionSnapshot,
@@ -25,6 +26,7 @@ export interface DesktopPreviewOverlay {
   canGoBack: boolean;
   canGoForward: boolean;
   loading: boolean;
+  loadFailure: Extract<DesktopPreviewNavStatus, { kind: "LoadFailed" }> | null;
   zoomFactor: number;
   pictureInPicture: boolean;
   colorScheme: DesktopPreviewColorScheme;
@@ -373,6 +375,9 @@ function isPreviewStateEqual(
       previous.canGoBack === next.canGoBack &&
       previous.canGoForward === next.canGoForward &&
       previous.loading === next.loading &&
+      previous.loadFailure?.url === next.loadFailure?.url &&
+      previous.loadFailure?.code === next.loadFailure?.code &&
+      previous.loadFailure?.description === next.loadFailure?.description &&
       previous.zoomFactor === next.zoomFactor &&
       previous.pictureInPicture === next.pictureInPicture &&
       previous.colorScheme === next.colorScheme &&
diff --git a/packages/contracts/src/preview.test.ts b/packages/contracts/src/preview.test.ts
index 24f429745ef8..d838aee3246e 100644
--- a/packages/contracts/src/preview.test.ts
+++ b/packages/contracts/src/preview.test.ts
@@ -32,6 +32,7 @@ const decodeResizeResult = Schema.decodeUnknownSync(PreviewAutomationResizeResul
 const decodeAutomationHost = Schema.decodeUnknownSync(PreviewAutomationHost);
 const decodeAutomationError = Schema.decodeUnknownSync(PreviewAutomationError);
 const decodeAutomationStatus = Schema.decodeUnknownSync(PreviewAutomationStatus);
+const encodeAutomationStatus = Schema.encodeSync(PreviewAutomationStatus);
 
 describe("PreviewAutomationOpenInput", () => {
   it("accepts the inline preview visibility flag", () => {
@@ -203,6 +204,23 @@ describe("PreviewAutomationError", () => {
 });
 
 describe("PreviewAutomationStatus", () => {
+  it("preserves main-frame failure details through status serialization", () => {
+    const status = {
+      available: true,
+      visible: false,
+      tabId: "preview-t",
+      url: "http://localhost:5733/",
+      title: "",
+      loading: false,
+      navigationError: {
+        url: "http://localhost:5733/",
+        code: -102,
+        description: "ERR_CONNECTION_REFUSED",
+      },
+    };
+    expect(decodeAutomationStatus(encodeAutomationStatus(status))).toEqual(status);
+  });
+
   it("accepts old hosts without viewport data and exposes it from current hosts", () => {
     const base = {
       available: true,
diff --git a/packages/contracts/src/previewAutomation.ts b/packages/contracts/src/previewAutomation.ts
index fa16511bd3e8..0bf0c4859089 100644
--- a/packages/contracts/src/previewAutomation.ts
+++ b/packages/contracts/src/previewAutomation.ts
@@ -79,6 +79,14 @@ export const PreviewAutomationStatus = Schema.Struct({
   url: Schema.NullOr(Schema.String),
   title: Schema.NullOr(Schema.String),
   loading: Schema.Boolean,
+  /** Present after a failed main-frame navigation. Availability describes the host, not the page. */
+  navigationError: Schema.optional(
+    Schema.Struct({
+      url: Schema.String,
+      code: Schema.Int,
+      description: Schema.String,
+    }),
+  ),
   control: Schema.optional(
     Schema.Struct({
       owner: Schema.Literals(["agent", "human", "unclaimed"]),

From 32ef4e091756f0cac481ee9b0246b5ce84b292c2 Mon Sep 17 00:00:00 2001
From: ashx-j <281260375+ashx-j@users.noreply.github.com>
Date: Tue, 6 Oct 2026 18:47:36 +0200
Subject: [PATCH 2/3] fix(preview): retry the failed navigation destination

---
 .../preview/ThreadPreviewMiniPlayer.test.tsx  | 46 +++++++++++++------
 .../preview/ThreadPreviewMiniPlayer.tsx       |  7 +--
 2 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/components/preview/ThreadPreviewMiniPlayer.test.tsx b/apps/web/src/components/preview/ThreadPreviewMiniPlayer.test.tsx
index 2ef543e216e9..f9ac4f355440 100644
--- a/apps/web/src/components/preview/ThreadPreviewMiniPlayer.test.tsx
+++ b/apps/web/src/components/preview/ThreadPreviewMiniPlayer.test.tsx
@@ -3,6 +3,7 @@
 import {
   EnvironmentId,
   ThreadId,
+  type DesktopPreviewBridge,
   type DesktopPreviewTabState,
   type PreviewSessionSnapshot,
 } from "@t3tools/contracts";
@@ -33,6 +34,7 @@ import { ThreadPreviewMiniPlayer } from "./ThreadPreviewMiniPlayer";
 import { projectDesktopState } from "./usePreviewBridge";
 
 const mocks = vi.hoisted(() => ({
+  navigate: vi.fn<DesktopPreviewBridge["navigate"]>(),
   refresh: vi.fn<(tabId: string) => Promise<void>>(),
   closePictureInPicture: vi.fn<(tabId: string) => Promise<void>>(),
   toast: vi.fn(),
@@ -40,6 +42,7 @@ const mocks = vi.hoisted(() => ({
 
 vi.mock("./previewBridge", () => ({
   previewBridge: {
+    navigate: mocks.navigate,
     refresh: mocks.refresh,
     pictureInPicture: { close: mocks.closePictureInPicture },
   },
@@ -93,6 +96,7 @@ const threadRef = {
 };
 const tabId = "mini-player-tab";
 const url = "http://localhost:5733/";
+const previousUrl = "https://previous.example/";
 const runtimeTabId = previewRuntimeTabId(threadRef, null, tabId);
 const failure = {
   kind: "LoadFailed",
@@ -104,7 +108,7 @@ const failure = {
 const snapshot: PreviewSessionSnapshot = {
   threadId: threadRef.threadId,
   tabId,
-  navStatus: { _tag: "Success", url, title: "App" },
+  navStatus: { _tag: "Success", url: previousUrl, title: "Previous page" },
   viewport: { _tag: "freeform", width: 1280, height: 800 },
   canGoBack: false,
   canGoForward: false,
@@ -176,6 +180,7 @@ function button(label: string) {
 
 beforeEach(async () => {
   vi.clearAllMocks();
+  mocks.navigate.mockReset().mockResolvedValue(undefined);
   mocks.refresh.mockReset().mockResolvedValue(undefined);
   mocks.closePictureInPicture.mockReset().mockResolvedValue(undefined);
   resetPreviewStateForTests();
@@ -198,7 +203,7 @@ beforeEach(async () => {
   vi.stubGlobal("WebSocket", FakeSocket);
   vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue(null);
   applyPreviewServerSnapshot(threadRef, snapshot);
-  desktopState({ kind: "Success", url, title: "App" });
+  desktopState({ kind: "Success", url: previousUrl, title: "Previous page" });
   usePreviewMiniPlayerStore.getState().open(threadRef, browserMiniPlayerSource(tabId));
   container = document.createElement("div");
   document.body.appendChild(container);
@@ -231,18 +236,23 @@ describe("floating browser navigation", () => {
     const serverSnapshot = {
       ...snapshot,
       runtime: "server" as const,
-      navStatus: {
-        _tag: "LoadFailed" as const,
-        url,
-        title: "",
-        code: failure.code,
-        description: failure.description,
-      },
     };
     await act(() => updatePreviewServerSnapshot(threadRef, serverSnapshot));
     await act(() => vi.advanceTimersByTimeAsync(0));
     const socket = FakeSocket.current;
     const canvas = container.querySelector("canvas");
+    await act(() =>
+      updatePreviewServerSnapshot(threadRef, {
+        ...serverSnapshot,
+        navStatus: {
+          _tag: "LoadFailed",
+          url,
+          title: "",
+          code: failure.code,
+          description: failure.description,
+        },
+      }),
+    );
     expect(container.querySelector('[role="alert"]')?.textContent).toContain(
       "Preview couldn't load",
     );
@@ -255,12 +265,15 @@ describe("floating browser navigation", () => {
       dialog: null,
     };
     await act(() => socket.control(control));
+    await act(() => button("Retry").click());
+    expect(socket.sent).toEqual([]);
     await act(() => button("Take control").click());
     expect(socket.sent.map((value) => JSON.parse(value))).toEqual([{ type: "takeControl" }]);
     await act(() => socket.control({ ...control, controller: "you", generation: 2 }));
     expect(button("Retry").disabled).toBe(false);
     await act(() => button("Retry").click());
-    expect(socket.sent.map((value) => JSON.parse(value))).toContainEqual({ type: "reload" });
+    expect(socket.sent.map((value) => JSON.parse(value))).toContainEqual({ type: "navigate", url });
+    expect(mocks.navigate).not.toHaveBeenCalled();
     expect(mocks.refresh).not.toHaveBeenCalled();
 
     await act(() =>
@@ -272,7 +285,10 @@ describe("floating browser navigation", () => {
     expect(container.textContent).toContain("Loading preview…");
     expect(socket.readyState).toBe(FakeSocket.OPEN);
     await act(() =>
-      updatePreviewServerSnapshot(threadRef, { ...serverSnapshot, navStatus: snapshot.navStatus }),
+      updatePreviewServerSnapshot(threadRef, {
+        ...serverSnapshot,
+        navStatus: { _tag: "Success", url, title: "App" },
+      }),
     );
     expect(container.querySelector('[role="alert"]')).toBeNull();
     expect(container.querySelector("canvas")).toBe(canvas);
@@ -291,6 +307,9 @@ describe("floating browser navigation", () => {
     expect(container.textContent).toContain(url);
     expect(useBrowserSurfaceStore.getState().byTabId[runtimeTabId]?.visible).toBe(false);
     expect(button("Retry").disabled).toBe(false);
+    expect(readThreadPreviewState(threadRef).sessions[tabId]?.navStatus).toMatchObject({
+      url: previousUrl,
+    });
 
     await act(() => {
       updatePreviewServerSnapshot(threadRef, {
@@ -306,7 +325,8 @@ describe("floating browser navigation", () => {
       button("Retry").click();
       desktopState({ kind: "Loading", url, title: "" });
     });
-    expect(mocks.refresh).toHaveBeenCalledExactlyOnceWith(runtimeTabId);
+    expect(mocks.navigate).toHaveBeenCalledExactlyOnceWith(runtimeTabId, url);
+    expect(mocks.refresh).not.toHaveBeenCalled();
     expect(container.querySelector('[role="alert"]')).toBeNull();
     expect(container.querySelector('[role="status"]')?.textContent).toBe("Loading preview…");
     expect(useBrowserSurfaceStore.getState().byTabId[runtimeTabId]?.visible).toBe(false);
@@ -330,7 +350,7 @@ describe("floating browser navigation", () => {
 
   it("keeps close available while reconnecting and reports a rejected retry", async () => {
     await act(() => desktopState(failure));
-    mocks.refresh.mockRejectedValueOnce(new Error("Guest disconnected"));
+    mocks.navigate.mockRejectedValueOnce(new Error("Guest disconnected"));
     await act(() => button("Retry").click());
     expect(mocks.toast).toHaveBeenCalledWith(
       expect.objectContaining({
diff --git a/apps/web/src/components/preview/ThreadPreviewMiniPlayer.tsx b/apps/web/src/components/preview/ThreadPreviewMiniPlayer.tsx
index 2ef51f64aaa8..53208e2a865d 100644
--- a/apps/web/src/components/preview/ThreadPreviewMiniPlayer.tsx
+++ b/apps/web/src/components/preview/ThreadPreviewMiniPlayer.tsx
@@ -166,9 +166,10 @@ function BrowserMiniPlayer({ threadRef, tabId, miniPlayer }: Props & { readonly
 
   const retry = () => {
     if (serverTab) {
-      serverSurfaceRef.current?.reload();
-    } else if (previewBridge) {
-      void previewBridge.refresh(runtimeTabId).catch((error) => {
+      if (loadFailure) serverSurfaceRef.current?.navigate(loadFailure.url);
+      else serverSurfaceRef.current?.reload();
+    } else if (previewBridge && loadFailure) {
+      void previewBridge.navigate(runtimeTabId, loadFailure.url).catch((error) => {
         toastManager.add({
           type: "error",
           title: "Unable to retry preview",

From 74955b66f43fa64b464e9b88645a969a3862fda8 Mon Sep 17 00:00:00 2001
From: ashx-j <281260375+ashx-j@users.noreply.github.com>
Date: Sun, 11 Oct 2026 10:12:12 +0200
Subject: [PATCH 3/3] test(preview): update floating browser fixtures for
 current layout

---
 .../preview/ThreadPreviewMiniPlayer.test.tsx  | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/preview/ThreadPreviewMiniPlayer.test.tsx b/apps/web/src/components/preview/ThreadPreviewMiniPlayer.test.tsx
index f9ac4f355440..d85daaaca15f 100644
--- a/apps/web/src/components/preview/ThreadPreviewMiniPlayer.test.tsx
+++ b/apps/web/src/components/preview/ThreadPreviewMiniPlayer.test.tsx
@@ -131,6 +131,7 @@ const canvas = {
   clearPreview: vi.fn(),
   registerTimeline: vi.fn(),
   reportDetailsCard: vi.fn(),
+  detailsCardTopInset: 0,
 };
 
 function desktopState(
@@ -190,10 +191,21 @@ beforeEach(async () => {
   vi.stubGlobal(
     "ResizeObserver",
     class {
-      constructor(private readonly onResize: () => void) {}
-      observe() {
-        this.onResize();
+      constructor(private readonly onResize: (entries: readonly ResizeObserverEntry[]) => void) {}
+      observe(target: Element) {
+        queueMicrotask(() =>
+          this.onResize([
+            {
+              target,
+              contentRect: target.getBoundingClientRect(),
+              borderBoxSize: [],
+              contentBoxSize: [],
+              devicePixelContentBoxSize: [],
+            },
+          ]),
+        );
       }
+      unobserve() {}
       disconnect() {}
     },
   );
@@ -238,7 +250,8 @@ describe("floating browser navigation", () => {
       runtime: "server" as const,
     };
     await act(() => updatePreviewServerSnapshot(threadRef, serverSnapshot));
-    await act(() => vi.advanceTimersByTimeAsync(0));
+    await act(() => vi.runOnlyPendingTimersAsync());
+    await act(() => vi.runOnlyPendingTimersAsync());
     const socket = FakeSocket.current;
     const canvas = container.querySelector("canvas");
     await act(() =>