fix(desktop): target=_blank links in a preview tab open a new preview tab

apps/desktop/src/ipc/channels.ts

@@ -110,6 +110,7 @@ export const PREVIEW_RECORDING_SAVE_CHANNEL = "desktop:preview-recording-save";
 export const PREVIEW_RECORDING_FRAME_CHANNEL = "desktop:preview-recording-frame";
 export const PREVIEW_STATE_CHANGE_CHANNEL = "desktop:preview-state-change";
 export const PREVIEW_POINTER_EVENT_CHANNEL = "desktop:preview-pointer-event";
+export const PREVIEW_OPEN_LINK_CHANNEL = "desktop:preview-open-link";
 
 export const MAC_PERMISSION_HELPER_CHANNEL = "desktop:mac-permission-helper";
 

apps/desktop/src/ipc/methods/preview.ts

@@ -58,6 +58,9 @@ export const installPreviewEventForwarding = Effect.fn(
   yield* manager.subscribePointerEvents((event) =>
     electronWindow.sendAll(IpcChannels.PREVIEW_POINTER_EVENT_CHANNEL, event),
   );
+  yield* manager.subscribeOpenLinks((event) =>
+    electronWindow.sendAll(IpcChannels.PREVIEW_OPEN_LINK_CHANNEL, event),
+  );
 });
 
 export const createTab = DesktopIpc.makeIpcMethod({

apps/desktop/src/preload.ts

@@ -1,5 +1,6 @@
 import type {
   DesktopBridge,
+  DesktopPreviewOpenLinkEvent,
   DesktopPreviewPointerEvent,
   DesktopPreviewRecordingInputEvent,
   DesktopPreviewRecordingFrame,
@@ -402,5 +403,14 @@ contextBridge.exposeInMainWorld("desktopBridge", {
       return () =>
         ipcRenderer.removeListener(IpcChannels.PREVIEW_POINTER_EVENT_CHANNEL, wrappedListener);
     },
+    onOpenLink: (listener) => {
+      const wrappedListener = (_event: Electron.IpcRendererEvent, linkEvent: unknown) => {
+        if (typeof linkEvent !== "object" || linkEvent === null) return;
+        listener(linkEvent as DesktopPreviewOpenLinkEvent);
+      };
+      ipcRenderer.on(IpcChannels.PREVIEW_OPEN_LINK_CHANNEL, wrappedListener);
+      return () =>
+        ipcRenderer.removeListener(IpcChannels.PREVIEW_OPEN_LINK_CHANNEL, wrappedListener);
+    },
   },
 } satisfies DesktopBridge);

apps/desktop/src/preview/Manager.test.ts

@@ -139,6 +139,7 @@ describe("previewWindowOpenAction", () => {
   const details = (overrides: {
     readonly url?: string;
     readonly disposition?: Electron.HandlerDetails["disposition"];
+    readonly postBody?: Electron.PostBody;
   }) => ({
     url: "https://accounts.google.com/o/oauth2/auth",
     disposition: "new-window" as Electron.HandlerDetails["disposition"],
@@ -154,11 +155,25 @@ describe("previewWindowOpenAction", () => {
     ).toBe("popup");
   });
 
-  it("keeps target=_blank links in the preview tab", () => {
+  it("opens target=_blank links as a new tab", () => {
     expect(PreviewManager.previewWindowOpenAction(details({ disposition: "foreground-tab" }))).toBe(
-      "navigate",
+      "new-tab",
     );
     expect(PreviewManager.previewWindowOpenAction(details({ disposition: "background-tab" }))).toBe(
+      "new-tab",
+    );
+  });
+
+  it("keeps a form POST with a body on the in-place path", () => {
+    // A new tab can only reopen the URL as a GET, which would drop the body.
+    const postBody = { data: [], contentType: "application/x-www-form-urlencoded" };
+    expect(
+      PreviewManager.previewWindowOpenAction(details({ disposition: "foreground-tab", postBody })),
+    ).toBe("navigate");
+  });
+
+  it("keeps other dispositions loading in the preview tab", () => {
+    expect(PreviewManager.previewWindowOpenAction(details({ disposition: "default" }))).toBe(
       "navigate",
     );
   });
@@ -4119,6 +4134,66 @@ describe("PreviewManager", () => {
       ),
   );
 
+  effectIt.effect("opens a target=_blank link as a new tab without navigating the opener", () =>
+    withManager((manager) =>
+      Effect.gen(function* () {
+        let openHandler:
+          | ((details: { url: string; disposition: string }) => { action: string })
+          | undefined;
+        const loadURL = vi.fn(async () => undefined);
+        fromId.mockReturnValue({
+          id: 42,
+          hostWebContents: makeTestHostWebContents(),
+          setBackgroundThrottling: vi.fn(),
+          isDestroyed: () => false,
+          getType: () => "webview",
+          getURL: () => "http://localhost:8976/",
+          getTitle: () => "Picker",
+          isLoading: () => false,
+          isDevToolsOpened: () => false,
+          getZoomFactor: () => 1,
+          setZoomFactor: vi.fn(),
+          setAudioMuted: vi.fn(),
+          isCurrentlyAudible: () => false,
+          on: vi.fn(),
+          off: vi.fn(),
+          ipc: { on: vi.fn(), off: vi.fn() },
+          navigationHistory: { canGoBack: () => false, canGoForward: () => false },
+          setIgnoreMenuShortcuts: vi.fn(),
+          setWindowOpenHandler: vi.fn((handler: typeof openHandler) => {
+            openHandler = handler;
+          }),
+          send: vi.fn(),
+          loadURL,
+        } as never);
+        const opened: Array<{ tabId: string; url: string; background: boolean }> = [];
+        yield* manager.subscribeOpenLinks((event) => Effect.sync(() => void opened.push(event)));
+        yield* manager.createTab("tab_1");
+        yield* manager.registerWebview("tab_1", 42);
+
+        const result = openHandler?.({
+          url: "https://github.com/issues/1",
+          disposition: "foreground-tab",
+        });
+        yield* Effect.yieldNow;
+
+        expect(result).toEqual({ action: "deny" });
+        expect(loadURL).not.toHaveBeenCalled();
+        expect(opened).toEqual([
+          { tabId: "tab_1", url: "https://github.com/issues/1", background: false },
+        ]);
+
+        openHandler?.({ url: "https://github.com/issues/2", disposition: "background-tab" });
+        yield* Effect.yieldNow;
+        expect(opened[1]).toEqual({
+          tabId: "tab_1",
+          url: "https://github.com/issues/2",
+          background: true,
+        });
+      }),
+    ),
+  );
+
   effectIt.effect("types in background webviews and enables native key input", () =>
     withManager((manager) =>
       Effect.gen(function* () {

apps/desktop/src/preview/Manager.ts

@@ -15,6 +15,7 @@ import type {
   DesktopPreviewAutomationStatus,
   DesktopPreviewColorScheme,
   DesktopPreviewFavicon,
+  DesktopPreviewOpenLinkEvent,
   DesktopPreviewPointerEvent,
   PreviewAnnotationPayload,
   PreviewAnnotationRect,
@@ -502,6 +503,8 @@ type RecordingInputListener = (event: DesktopPreviewRecordingInputEvent) => Effe
 
 type PointerEventListener = (event: DesktopPreviewPointerEvent) => Effect.Effect<void>;
 
+type OpenLinkListener = (event: DesktopPreviewOpenLinkEvent) => Effect.Effect<void>;
+
 interface ExpectedAgentInput {
   readonly signal: PreviewInputSignal;
   readonly expiresAt: number;
@@ -553,14 +556,23 @@ const POPUP_WINDOW_OPTIONS = {
  * navigating the preview tab instead destroys the opener the popup has to
  * `postMessage` its result back to.
  *
- * `target="_blank"` links arrive as a tab disposition and keep loading in the
- * preview tab, which is what people expect from a link inside a preview.
+ * `"new-tab"` hands a `target="_blank"` link (a tab disposition) to the web
+ * app, which opens it as another preview tab so the page that held the link
+ * stays put. Schemes a popup cannot be hardened for keep loading in place, and
+ * so does a form POST with a body, which a new tab could only reopen as a GET.
  */
 export const previewWindowOpenAction = (details: {
   readonly url: string;
   readonly disposition: Electron.HandlerDetails["disposition"];
-}): "popup" | "navigate" =>
-  details.disposition === "new-window" && isPopupUrl(details.url) ? "popup" : "navigate";
+  readonly postBody?: Electron.PostBody;
+}): "popup" | "new-tab" | "navigate" => {
+  if (!isPopupUrl(details.url)) return "navigate";
+  if (details.disposition === "new-window") return "popup";
+  return !details.postBody &&
+    (details.disposition === "foreground-tab" || details.disposition === "background-tab")
+    ? "new-tab"
+    : "navigate";
+};
 
 export const isPreviewRefreshShortcut = (input: Electron.Input): boolean =>
   input.type === "keyDown" &&
@@ -651,6 +663,7 @@ const makeNativeOperations = Effect.fn("PreviewManager.makeOperations")(function
   const attachedRef = yield* Ref.make<ReadonlyMap<number, ManagedListeners>>(new Map());
   const listenersRef = yield* Ref.make<ReadonlySet<Listener>>(new Set());
   const pointerEventListenersRef = yield* Ref.make<ReadonlySet<PointerEventListener>>(new Set());
+  const openLinkListenersRef = yield* Ref.make<ReadonlySet<OpenLinkListener>>(new Set());
   const recordingInputListenersRef = yield* Ref.make<ReadonlySet<RecordingInputListener>>(
     new Set(),
   );
@@ -937,7 +950,12 @@ const makeNativeOperations = Effect.fn("PreviewManager.makeOperations")(function
   });
 
   const deliverEvent = (
-    eventKind: "state-change" | "recording-frame" | "recording-input" | "pointer-event",
+    eventKind:
+      | "state-change"
+      | "recording-frame"
+      | "recording-input"
+      | "pointer-event"
+      | "open-link",
     tabId: string,
     delivery: () => Effect.Effect<void>,
   ) =>
@@ -2048,9 +2066,20 @@ const makeNativeOperations = Effect.fn("PreviewManager.makeOperations")(function
         wc.ipc.on(RECORDING_INPUT_CHANNEL, recordingInput);
         wc.ipc.on(MOUSE_NAVIGATE_CHANNEL, mouseNavigate);
         wc.setWindowOpenHandler((details) => {
-          if (previewWindowOpenAction(details) === "popup") {
+          const action = previewWindowOpenAction(details);
+          if (action === "popup") {
             return { action: "allow", overrideBrowserWindowOptions: POPUP_WINDOW_OPTIONS };
           }
+          if (action === "new-tab") {
+            runFork(
+              emitOpenLink({
+                tabId,
+                url: details.url,
+                background: details.disposition === "background-tab",
+              }),
+            );
+            return { action: "deny" };
+          }
           runFork(
             attemptPromise({ operation: "openPreviewWindow", tabId, webContentsId: wc.id }, () =>
               wc.loadURL(details.url),
@@ -3825,6 +3854,17 @@ const makeNativeOperations = Effect.fn("PreviewManager.makeOperations")(function
     return point;
   });
 
+  const emitOpenLink = Effect.fn("PreviewManager.emitOpenLink")(function* (
+    event: DesktopPreviewOpenLinkEvent,
+  ) {
+    const listeners = yield* Ref.get(openLinkListenersRef);
+    yield* Effect.forEach(
+      listeners,
+      (listener) => deliverEvent("open-link", event.tabId, () => listener(event)),
+      { discard: true },
+    );
+  });
+
   const emitPointerEvent = Effect.fn("PreviewManager.emitPointerEvent")(function* (
     event: DesktopPreviewPointerEvent,
   ) {
@@ -4598,6 +4638,7 @@ const makeNativeOperations = Effect.fn("PreviewManager.makeOperations")(function
         Ref.set(listenersRef, new Set()),
         Ref.set(expectedAgentInputsRef, new Map()),
         Ref.set(pointerEventListenersRef, new Set()),
+        Ref.set(openLinkListenersRef, new Set()),
         Ref.set(recordingFrameListenersRef, new Set()),
         Ref.set(recordingInputListenersRef, new Set()),
       ],
@@ -4643,6 +4684,7 @@ const makeNativeOperations = Effect.fn("PreviewManager.makeOperations")(function
     stopRecording,
     subscribePointerEvents: (listener: PointerEventListener) =>
       subscribe(pointerEventListenersRef, listener),
+    subscribeOpenLinks: (listener: OpenLinkListener) => subscribe(openLinkListenersRef, listener),
     subscribeRecordingInputs: (listener: RecordingInputListener) =>
       subscribe(recordingInputListenersRef, listener),
     subscribeRecordingFrames: (listener: RecordingFrameListener) =>
@@ -5053,6 +5095,9 @@ export class PreviewManager extends Context.Service<
     readonly subscribePointerEvents: (
       listener: PointerEventListener,
     ) => Effect.Effect<void, never, Scope.Scope>;
+    readonly subscribeOpenLinks: (
+      listener: OpenLinkListener,
+    ) => Effect.Effect<void, never, Scope.Scope>;
     readonly subscribeRecordingInputs: (
       listener: RecordingInputListener,
     ) => Effect.Effect<void, never, Scope.Scope>;
@@ -5148,6 +5193,7 @@ export const make = Effect.gen(function* PreviewManagerMake() {
     automationWaitFor: operations.automationWaitFor,
     subscribeStateChanges: operations.subscribeStateChanges,
     subscribePointerEvents: operations.subscribePointerEvents,
+    subscribeOpenLinks: operations.subscribeOpenLinks,
     subscribeRecordingFrames: operations.subscribeRecordingFrames,
     subscribeRecordingInputs: operations.subscribeRecordingInputs,
   });

apps/web/src/browser/ElectronBrowserHost.tsx

@@ -2,15 +2,18 @@
 
 import { parseScopedThreadKey } from "@t3tools/client-runtime/environment";
 import { FILL_PREVIEW_VIEWPORT } from "@t3tools/contracts";
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useRef } from "react";
 
 import { isElectron } from "~/env";
 import { useTheme } from "~/hooks/useTheme";
 import { useActivePreviewSessions } from "~/previewStateStore";
+import { previewEnvironment } from "~/state/preview";
+import { useAtomCommand } from "~/state/use-atom-command";
 
 import { readPreviewAnnotationTheme } from "./annotationTheme";
 import { useBrowserPointerStore } from "./browserPointerStore";
 import { HostedBrowserWebview } from "./HostedBrowserWebview";
+import { openUrlInPreview } from "./openFileInPreview";
 import { previewRuntimeTabId } from "./previewRuntimeTabId";
 
 export function ElectronBrowserHost() {
@@ -79,6 +82,31 @@ export function ElectronBrowserHost() {
     });
   }, []);
 
+  // A `target="_blank"` link inside a hosted page opens as another tab of the
+  // same thread, so the page that held the link stays where it is.
+  const openPreview = useAtomCommand(previewEnvironment.open, { reportFailure: true });
+  const sessionByRuntimeTabId = useRef(new Map<string, (typeof sessions)[number]>());
+  sessionByRuntimeTabId.current = new Map(
+    sessions.map((session) => [session.runtimeTabId, session]),
+  );
+  useEffect(() => {
+    const preview = window.desktopBridge?.preview;
+    if (!preview) return;
+    return preview.onOpenLink(({ tabId, url, background }) => {
+      const source = sessionByRuntimeTabId.current.get(tabId);
+      // The new tab keeps the source tab's profile so its cookies carry over.
+      if (source) {
+        void openUrlInPreview({
+          threadRef: source.threadRef,
+          url,
+          openPreview,
+          profileId: source.snapshot.profileId,
+          background,
+        });
+      }
+    });
+  }, [openPreview]);
+
   if (!isElectron) return null;
   return (
     <div className="contents" data-electron-browser-host>

apps/web/src/browser/openFileInPreview.ts

@@ -19,7 +19,10 @@ import { resolveAssetUrl } from "~/assets/assetUrls";
 import {
   applyPreviewServerSnapshot,
   isPreviewSupportedInRuntime,
+  readThreadPreviewState,
   rememberPreviewUrl,
+  setActivePreviewTab,
+  updatePreviewServerSnapshot,
 } from "~/previewStateStore";
 import { useRightPanelStore } from "~/rightPanelStore";
 
@@ -55,13 +58,18 @@ export async function openUrlInPreview<E>(input: {
   readonly threadRef: ScopedThreadRef;
   readonly url: string;
   readonly openPreview: OpenPreviewMutation<E>;
+  /** Profile to open under; omit for the configured default. */
+  readonly profileId?: PreviewOpenInput["profileId"];
+  /** Open the tab without switching the thread to it. */
+  readonly background?: boolean;
 }): Promise<AtomCommandResult<void, E | BrowserSettingsReadError>> {
   const defaults = await resolveBrowserDefaults().catch(
     (cause: unknown) => new BrowserSettingsReadError({ cause }),
   );
   if (defaults instanceof BrowserSettingsReadError) {
     return AsyncResult.failure(Cause.fail(defaults));
   }
+  const previousActiveTabId = readThreadPreviewState(input.threadRef).activeTabId;
   const result = await input.openPreview({
     environmentId: input.threadRef.environmentId,
     input: {
@@ -71,12 +79,18 @@ export async function openUrlInPreview<E>(input: {
       // maps the result differently, so the configured defaults have to be
       // applied explicitly or file/link opens would ignore them.
       viewport: browserDefaultOpenViewport(defaults),
-      profileId: browserDefaultOpenProfileId(defaults),
+      profileId: input.profileId ?? browserDefaultOpenProfileId(defaults),
     },
   });
   return mapAtomCommandResult(result, (snapshot) => {
-    applyPreviewServerSnapshot(input.threadRef, snapshot);
     rememberPreviewUrl(input.threadRef, input.url);
+    if (input.background) {
+      updatePreviewServerSnapshot(input.threadRef, snapshot);
+      // The server's "opened" event activates the new tab; hand focus back.
+      if (previousActiveTabId) setActivePreviewTab(input.threadRef, previousActiveTabId);
+      return;
+    }
+    applyPreviewServerSnapshot(input.threadRef, snapshot);
     useRightPanelStore.getState().openBrowser(input.threadRef, snapshot.tabId);
   });
 }