feat(web): show which profile a browser tab is running in

A tab's profile was only discoverable by opening the three-dot menu, which is
a poor place for something that changes what you are logged into.

The chrome row gains a leading slot before the URL bar, and the preview names
the tab's profile there. Only when it differs from the default: labelling
every tab "Default" would be noise on the common case, while a tab running in
another profile is exactly what needs calling out.

Also gives the three-dot menu's profile heading a `MenuGroup` ancestor —
`MenuGroupLabel` reads Base UI's group context and throws without one, which
took the app to its error boundary as soon as the menu opened.

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

Author: juliusmarminge

apps/web/src/components/preview/PreviewChromeRow.tsx

@@ -58,6 +58,11 @@ interface Props {
    * to mount the three-dot menu (hard reload, devtools, zoom, clear data).
    */
   trailingActions?: ReactNode;
+  /**
+   * Slot between the nav buttons and the URL input. The preview view uses it
+   * to name the tab's browser profile, which is otherwise invisible.
+   */
+  leadingActions?: ReactNode;
 }
 
 const NOOP = () => {};
@@ -87,6 +92,7 @@ export function PreviewChromeRow({
   pickDisabled,
   pickDisabledReason,
   trailingActions,
+  leadingActions,
 }: Props) {
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [draft, setDraft] = useState(url);
@@ -168,6 +174,8 @@ export function PreviewChromeRow({
           </Tooltip>
         </div>
 
+        {leadingActions}
+
         <InputGroup variant="ghost" className="group/address h-7 flex-1">
           <Tooltip>
             <TooltipTrigger

apps/web/src/components/preview/PreviewMoreMenu.tsx

@@ -10,6 +10,7 @@ import {
   MenuPopup,
   MenuRadioGroup,
   MenuRadioItem,
+  MenuGroup,
   MenuGroupLabel,
   MenuSeparator,
   MenuSub,
@@ -187,21 +188,27 @@ export function PreviewMoreMenu({
           </span>
         </MenuItem>
         <MenuSeparator />
-        {profileName ? (
-          // Otherwise the tab's profile is invisible: it is fixed at open, and
-          // nothing else in the chrome says which one you are browsing in.
-          <MenuGroupLabel>Profile: {profileName}</MenuGroupLabel>
-        ) : null}
-        <MenuItem
-          onClick={() => void bridge.clearCookies(environmentId, profileId).catch(() => undefined)}
-        >
-          {profileName ? `Clear cookies (${profileName})` : "Clear cookies"}
-        </MenuItem>
-        <MenuItem
-          onClick={() => void bridge.clearCache(environmentId, profileId).catch(() => undefined)}
-        >
-          {profileName ? `Clear cache (${profileName})` : "Clear cache"}
-        </MenuItem>
+        {/*
+          Grouped so the heading has a `MenuGroup` ancestor — `MenuGroupLabel`
+          reads its context and throws without one. The heading also answers
+          which profile the tab is in, which is otherwise invisible: it is fixed
+          at open and nothing else in the chrome shows it.
+        */}
+        <MenuGroup>
+          {profileName ? <MenuGroupLabel>Profile: {profileName}</MenuGroupLabel> : null}
+          <MenuItem
+            onClick={() =>
+              void bridge.clearCookies(environmentId, profileId).catch(() => undefined)
+            }
+          >
+            {profileName ? `Clear cookies (${profileName})` : "Clear cookies"}
+          </MenuItem>
+          <MenuItem
+            onClick={() => void bridge.clearCache(environmentId, profileId).catch(() => undefined)}
+          >
+            {profileName ? `Clear cache (${profileName})` : "Clear cache"}
+          </MenuItem>
+        </MenuGroup>
       </MenuPopup>
     </Menu>
   );

apps/web/src/components/preview/PreviewView.tsx

@@ -48,6 +48,7 @@ import { previewRuntimeTabId } from "~/browser/previewRuntimeTabId";
 import { PreviewUnreachable } from "./PreviewUnreachable";
 import { revealInFileExplorerLabel } from "./fileExplorerLabel";
 import { shouldShowPreviewEmptyState } from "./previewEmptyStateLogic";
+import { Badge } from "~/components/ui/badge";
 import { BrowserSurfaceSlot } from "~/browser/BrowserSurfaceSlot";
 import { useBrowserSurfaceStore } from "~/browser/browserSurfaceStore";
 import { useLoadingProgress } from "./useLoadingProgress";
@@ -145,6 +146,9 @@ export function PreviewView({
   const loadProgress = useLoadingProgress(loading);
   const viewport = snapshot?.viewport ?? FILL_PREVIEW_VIEWPORT;
   const browserDefaults = useBrowserDefaults();
+  const activeProfile = browserDefaults.profiles.find(
+    (profile) => profile.id === (snapshot?.profileId ?? browserDefaults.profileId),
+  );
   const panelRect = useBrowserSurfaceStore((state) =>
     runtimeTabId ? (state.byTabId[runtimeTabId]?.rect ?? null) : null,
   );
@@ -686,16 +690,22 @@ export function PreviewView({
         pickDisabledReason={
           isUnreachable ? "Page didn't load — pick unavailable until the page renders" : undefined
         }
+        leadingActions={
+          // Only when it differs from the default: labelling every tab
+          // "Default" would be noise on the common case, while a tab in
+          // another profile is exactly what needs calling out.
+          activeProfile && activeProfile.id !== browserDefaults.profileId ? (
+            <Badge variant="outline" className="shrink-0">
+              {activeProfile.name}
+            </Badge>
+          ) : null
+        }
         trailingActions={
           previewBridge ? (
             <PreviewMoreMenu
               environmentId={threadRef.environmentId}
               profileId={snapshot?.profileId}
-              profileName={
-                browserDefaults.profiles.find(
-                  (profile) => profile.id === (snapshot?.profileId ?? browserDefaults.profileId),
-                )?.name
-              }
+              profileName={activeProfile?.name}
               tabId={runtimeTabId}
               hasWebContents={desktopOverlay?.hasWebContents ?? false}
               zoomFactor={desktopOverlay?.zoomFactor ?? 1}