fix(web): repair the Browser surface card and collapse the profile menu row

Widening `onAddBrowser` to `(profileId?: string)` broke the empty-state
Browser card: it is passed straight to a DOM click handler, so React handed
the MouseEvent in as the profile id and the open silently failed schema
validation.

Fixed structurally rather than at the call site — `onAddBrowser` goes back to
taking no arguments, and choosing a profile is a separate
`onAddBrowserInProfile(profileId)`. The type now rejects wiring the profile
variant to a DOM handler, so this cannot recur; adding it surfaced all four
call sites immediately.

The "+" menu is one row again. The submenu trigger is itself clickable and
opens the default profile, with hover or arrow revealing the rest, so the
common case stays a single click. The menu is controlled so that action can
dismiss it, which a submenu trigger does not do on its own.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: juliusmarminge

apps/web/src/components/ChatView.tsx

@@ -6642,7 +6642,8 @@ function ChatViewContent(props: ChatViewProps) {
           onCloseSurfacesToRight={closeRightPanelSurfacesToRight}
           onCloseAllSurfaces={closeAllRightPanelSurfaces}
           onCopyFilePath={copyRightPanelFilePath}
-          onAddBrowser={createBrowserSurface}
+          onAddBrowser={() => createBrowserSurface()}
+          onAddBrowserInProfile={createBrowserSurface}
           onAddTerminal={addTerminalSurface}
           onAddDiff={addDiffSurface}
           onAddFiles={addFilesSurface}
@@ -6681,7 +6682,8 @@ function ChatViewContent(props: ChatViewProps) {
             onCloseSurfacesToRight={closeRightPanelSurfacesToRight}
             onCloseAllSurfaces={closeAllRightPanelSurfaces}
             onCopyFilePath={copyRightPanelFilePath}
-            onAddBrowser={createBrowserSurface}
+            onAddBrowser={() => createBrowserSurface()}
+            onAddBrowserInProfile={createBrowserSurface}
             onAddTerminal={addTerminalSurface}
             onAddDiff={addDiffSurface}
             onAddFiles={addFilesSurface}

apps/web/src/components/RightPanelTabs.test.tsx

@@ -73,6 +73,7 @@ function renderTabs(first: DesktopPreviewFavicon | null, second?: DesktopPreview
       onCloseAllSurfaces={() => undefined}
       onCopyFilePath={() => undefined}
       onAddBrowser={() => undefined}
+      onAddBrowserInProfile={() => undefined}
       onAddTerminal={() => undefined}
       onAddPullRequest={() => undefined}
       onAddDiff={() => undefined}

apps/web/src/components/RightPanelTabs.tsx

@@ -68,7 +68,13 @@ interface RightPanelTabsProps {
   onCloseSurfacesToRight: (surface: RightPanelSurface) => void;
   onCloseAllSurfaces: () => void;
   onCopyFilePath: (relativePath: string) => void;
-  onAddBrowser: (profileId?: string) => void;
+  onAddBrowser: () => void;
+  /**
+   * Separate from `onAddBrowser` on purpose: that one is passed directly as a
+   * DOM click handler, and a `(profileId?: string)` signature would silently
+   * accept the MouseEvent as a profile id.
+   */
+  onAddBrowserInProfile: (profileId: string) => void;
   onAddTerminal: () => void;
   onAddDiff: () => void;
   onAddFiles: () => void;
@@ -526,6 +532,9 @@ function SurfaceIcon({
 export function RightPanelTabs(props: RightPanelTabsProps) {
   const ownsDesktopTitleBar = isElectron && props.mode === "inline";
   const browserProfiles = useBrowserDefaults().profiles;
+  // Controlled so the submenu trigger's own action can dismiss the menu; a
+  // submenu trigger does not close it the way a plain item does.
+  const [addSurfaceMenuOpen, setAddSurfaceMenuOpen] = useState(false);
   const { resolvedTheme } = useTheme();
   const tabListRef = useRef<HTMLDivElement>(null);
 
@@ -691,7 +700,7 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
               );
             })}
             {props.surfaces.length > 0 ? (
-              <Menu>
+              <Menu open={addSurfaceMenuOpen} onOpenChange={setAddSurfaceMenuOpen}>
                 <MenuTrigger
                   render={
                     <Button
@@ -705,34 +714,45 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
                   <Plus className="size-3.5" />
                 </MenuTrigger>
                 <MenuPopup align="start" side="bottom" sideOffset={6} className="min-w-44">
-                  <SurfaceMenuItem
-                    available={props.browserAvailable}
-                    disabledReason={SURFACE_DISABLED_REASONS.browser}
-                    onClick={() => props.onAddBrowser()}
-                  >
-                    <Globe2 />
-                    Browser
-                  </SurfaceMenuItem>
                   {props.browserAvailable ? (
                     <MenuSub>
                       {/*
-                        A tab's profile is fixed at open — Electron only honours
-                        a partition before the guest attaches — so the choice
-                        belongs here rather than on an already-open tab.
+                        Clicking the trigger opens the default profile, so the
+                        common case stays one click and there is no second row;
+                        hover or arrow reveals the rest. The choice lives at
+                        open time because a tab's profile is fixed then —
+                        Electron only honours a partition before attach.
                       */}
-                      <MenuSubTrigger>
+                      <MenuSubTrigger
+                        onClick={() => {
+                          setAddSurfaceMenuOpen(false);
+                          props.onAddBrowser();
+                        }}
+                      >
                         <Globe2 />
-                        Browser in profile
+                        Browser
                       </MenuSubTrigger>
                       <MenuSubPopup className="min-w-40">
                         {browserProfiles.map((profile) => (
-                          <MenuItem key={profile.id} onClick={() => props.onAddBrowser(profile.id)}>
+                          <MenuItem
+                            key={profile.id}
+                            onClick={() => props.onAddBrowserInProfile(profile.id)}
+                          >
                             {profile.name}
                           </MenuItem>
                         ))}
                       </MenuSubPopup>
                     </MenuSub>
-                  ) : null}
+                  ) : (
+                    <SurfaceMenuItem
+                      available={false}
+                      disabledReason={SURFACE_DISABLED_REASONS.browser}
+                      onClick={props.onAddBrowser}
+                    >
+                      <Globe2 />
+                      Browser
+                    </SurfaceMenuItem>
+                  )}
                   <SurfaceMenuItem
                     available={props.terminalAvailable}
                     disabledReason={SURFACE_DISABLED_REASONS.terminal}

apps/web/src/components/preview/addBrowserSurface.test.ts

@@ -37,6 +37,24 @@ beforeEach(() => {
 });
 
 describe("addBrowserSurface", () => {
+  it("opens under the requested profile", async () => {
+    const openPreview = vi.fn(async (_input: PreviewOpenInput) =>
+      AsyncResult.success(snapshot("tab-1")),
+    );
+
+    await addBrowserSurface({
+      threadRef,
+      openPreview: ({ input }) => openPreview(input),
+      profileId: "profile-work",
+    });
+
+    expect(openPreview).toHaveBeenCalledWith({
+      threadId: "thread-1",
+      viewport: FILL_PREVIEW_VIEWPORT,
+      profileId: "profile-work",
+    });
+  });
+
   it("creates another preview session when a browser tab is already active", async () => {
     const first = snapshot("tab-1");
     const second = snapshot("tab-2");

apps/web/src/routes/_chat.pull-requests.tsx

@@ -1571,6 +1571,7 @@ function PullRequestsRouteView() {
             onCloseAllSurfaces={closeAllSurfaces}
             onCopyFilePath={() => undefined}
             onAddBrowser={() => undefined}
+            onAddBrowserInProfile={() => undefined}
             onAddTerminal={() => undefined}
             onAddDiff={() => undefined}
             onAddFiles={() => undefined}