feat(desktop): browser profiles for the preview browser#7254

@@ -99,19 +109,47 @@ export class BrowserSession extends Context.Service<
   {
     readonly getPartition: (
       scope?: string,
+      persistent?: boolean,
+      namespace?: BrowserSessionPartitionNamespace,
     ) => Effect.Effect<string, BrowserSessionPartitionDerivationError>;
     readonly isPartition: (partition: string) => boolean;
-    readonly getSession: (scope?: string) => Effect.Effect<Session, BrowserSessionGetSessionError>;
-    readonly clearCookies: () => Effect.Effect<void, BrowserSessionStorageClearError>;
-    readonly clearCache: () => Effect.Effect<void, BrowserSessionCacheClearError>;
+    readonly getSession: (
+      scope?: string,
+      persistent?: boolean,
+      namespace?: BrowserSessionPartitionNamespace,
+    ) => Effect.Effect<Session, BrowserSessionGetSessionError>;
+    /** Omit `partitions` to clear every known partition. */
+    readonly clearCookies: (
+      partitions?: ReadonlyArray<string>,
+    ) => Effect.Effect<void, BrowserSessionStorageClearError>;
+    readonly clearCache: (
+      partitions?: ReadonlyArray<string>,
+    ) => Effect.Effect<void, BrowserSessionCacheClearError>;
   }
 >()("@t3tools/desktop/preview/BrowserSession") {}
 
+/**
+ * Restricts a clear to the given partitions. Omitting them keeps the historical
+ * "every partition" behaviour, which callers now only use for an explicit
+ * "all profiles" action — a per-profile clear must never reach across profiles.
+ */
+const selectSessions = (
+  sessions: ReadonlyMap<string, Session>,
+  partitions: ReadonlyArray<string> | undefined,
+): ReadonlyArray<readonly [string, Session]> =>
+  [...sessions.entries()].filter(
+    ([partition]) => partitions === undefined || partitions.includes(partition),
+  );
+
 export const make = Effect.gen(function* BrowserSessionMake() {
   const crypto = yield* Crypto.Crypto;
   const sessionsRef = yield* SynchronizedRef.make<ReadonlyMap<string, Session>>(new Map());
 
-  const getPartition = Effect.fn("BrowserSession.getPartition")(function* (scope = "shared") {
+  const getPartition = Effect.fn("BrowserSession.getPartition")(function* (
+    scope = "shared",
+    persistent = true,
+    namespace?: BrowserSessionPartitionNamespace,
+  ) {
     const digest = yield* crypto.digest("SHA-256", new TextEncoder().encode(scope)).pipe(

@@ -453,11 +507,277 @@ function DesktopOnlyBrowserDefaults({ children }: { readonly children: ReactNode
   );
 }
 
+/**
+ * Create, rename, and remove browser profiles.
+ *
+ * Built-ins render without controls: they are synthesized rather than stored,
+ * so there is nothing to rename and removing them would strand every tab that
+ * opened under them.
+ */
+function BrowserProfilesSetting({ disabled }: { readonly disabled: boolean }) {
+  const userProfiles = useClientSettings((settings) => settings.browserProfiles);
+  const updateSettings = useUpdatePrimarySettings();
+  const { environments, isReady: environmentsReady } = useEnvironments();
+  const [profilePendingRemoval, setProfilePendingRemoval] = useState<BrowserProfile | null>(null);
+  const [profileRemovalError, setProfileRemovalError] = useState<string | null>(null);
+  const [profileRemovalInFlight, setProfileRemovalInFlight] = useState(false);
+  const removalAvailable = browserProfileRemovalAvailable(
+    previewBridge !== null,
+    environmentsReady,
+    environments.length,
+  );
+
+  const addProfile = () => {
+    const currentProfiles = getClientSettings().browserProfiles;
+    if (currentProfiles.length >= BROWSER_PROFILE_MAX_COUNT) return;
+    const taken = new Set(resolveBrowserProfiles(currentProfiles).map((profile) => profile.name));
+    let name = "New profile";
+    for (let index = 2; taken.has(name); index += 1) name = `New profile ${index}`;
+    updateSettings({
+      browserProfiles: [
+        ...currentProfiles,
+        { id: `profile-${randomUUID()}`, name, kind: "persistent" as const },
+      ],
+    });
+  };
+
+  const renameProfile = (id: string, next: string) => {
+    const name = next.trim().slice(0, BROWSER_PROFILE_NAME_MAX_LENGTH);
+    if (name === "") return;
+    const currentProfiles = getClientSettings().browserProfiles;
+    updateSettings({
+      browserProfiles: currentProfiles.map((profile) =>
+        profile.id === id ? { ...profile, name } : profile,
+      ),
+    });
+  };
+
+  const removeProfile = async (id: string) => {
+    if (!removalAvailable) {
+      setProfileRemovalError("Connect to an environment before removing this profile.");
+      return;
+    }
+    setProfileRemovalError(null);
+    setProfileRemovalInFlight(true);
+    // Drop the partition's data too, otherwise a removed profile's cookies
+    // stay on disk with nothing in the UI pointing at them.
+    try {
+      await clearBrowserProfileData(
+        previewBridge,
+        environmentsReady ? environments.map((environment) => environment.environmentId) : [],
+        id,
+      );
+    } catch {
+      setProfileRemovalError("Profile data could not be deleted. Try again.");
+      setProfileRemovalInFlight(false);
+      return;
+    }
+    const currentSettings = getClientSettings();
+    updateSettings({
+      browserProfiles: currentSettings.browserProfiles.filter((profile) => profile.id !== id),
+      // Reassign the default rather than leaving it pointing at nothing.
+      ...(currentSettings.browserDefaultProfileId === id
+        ? { browserDefaultProfileId: DEFAULT_BROWSER_PROFILE_ID }
+        : {}),
+    });
+    setProfileRemovalInFlight(false);
+    setProfilePendingRemoval(null);
+  };
+
+  return (
+    <SettingsRow
+      {...searchableSetting("browser-profiles")}
+      description="Each profile keeps its own cookies and logins, so a tab opened under one can't see another's. Incognito discards everything when the app closes."
+      control={
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={disabled || userProfiles.length >= BROWSER_PROFILE_MAX_COUNT}
+          onClick={addProfile}
+        >
+          <PlusIcon />
+          Add profile
+        </Button>
+      }
+    >
+      {/*
+        Each profile is its own bounded row, and the list carries the bottom
+        spacing `SettingsRow` leaves to its children (`pt-3 pb-1`). Bare rows
+        stack on narrow viewports with a larger gap inside a row than between
+        rows, which reads as the remove button belonging to the profile below.
+      */}
+      <div className="mt-2 space-y-1 pb-2">
+        {resolveBrowserProfiles(userProfiles).map((profile) => {
+          const builtIn = isBuiltInBrowserProfileId(profile.id);
+          return (
+            <div
+              key={profile.id}
+              className={cn(
+                ITEM_ROW_INNER_CLASSNAME,
+                "rounded-lg border border-border/60 px-3 py-2",
+              )}
+            >
+              {builtIn ? (
+                // Dimmed here rather than on the list, which is the only
+                // content in the row without a disabled treatment of its own:
+                // a wrapper-level dim would stack with the rename field's and
+                // the remove button's, landing them near 0.41 while every
+                // other disabled control in the block sits at 0.64.
+                <span
+                  className={cn(
+                    "flex min-w-0 items-center gap-2 text-sm text-foreground",
+                    disabled && "opacity-64",
+                  )}
+                >
+                  {profile.name}
+                  <Badge variant="outline">
+                    {profile.kind === "incognito" ? "Ephemeral" : "Built-in"}
+                  </Badge>
+                </span>
+              ) : (
+                <DraftInput
+                  nativeInput
+                  size="sm"
+                  className="w-full sm:w-64"
+                  aria-label={`Rename ${profile.name}`}
+                  disabled={disabled}
+                  maxLength={BROWSER_PROFILE_NAME_MAX_LENGTH}
+                  value={profile.name}
+                  onCommit={(next) => renameProfile(profile.id, next)}
+                />
+              )}
+              {builtIn ? null : (
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <Button
+                        size="icon-sm"
+                        variant="ghost-muted"
+                        disabled={disabled || !removalAvailable}
+                        aria-label={`Remove ${profile.name}`}
+                        onClick={() => setProfilePendingRemoval(profile)}
+                      >
+                        <Trash2Icon />
+                      </Button>
+                    }
+                  />

@@ -453,11 +499,252 @@ function DesktopOnlyBrowserDefaults({ children }: { readonly children: ReactNode
   );
 }
 
+/**
+ * Create, rename, and remove browser profiles.
+ *
+ * Built-ins render without controls: they are synthesized rather than stored,
+ * so there is nothing to rename and removing them would strand every tab that
+ * opened under them.
+ */
+function BrowserProfilesSetting({ disabled }: { readonly disabled: boolean }) {
+  const userProfiles = useClientSettings((settings) => settings.browserProfiles);
+  const updateSettings = useUpdatePrimarySettings();
+  const { environments, isReady: environmentsReady } = useEnvironments();
+  const [profilePendingRemoval, setProfilePendingRemoval] = useState<BrowserProfile | null>(null);
+  const [profileRemovalError, setProfileRemovalError] = useState<string | null>(null);
+  const [profileRemovalInFlight, setProfileRemovalInFlight] = useState(false);
+
+  const addProfile = () => {
+    const currentProfiles = getClientSettings().browserProfiles;
+    if (currentProfiles.length >= BROWSER_PROFILE_MAX_COUNT) return;
+    const taken = new Set(resolveBrowserProfiles(currentProfiles).map((profile) => profile.name));
+    let name = "New profile";
+    for (let index = 2; taken.has(name); index += 1) name = `New profile ${index}`;
+    updateSettings({
+      browserProfiles: [
+        ...currentProfiles,
+        { id: `profile-${randomUUID()}`, name, kind: "persistent" as const },
+      ],
+    });
+  };
+
+  const renameProfile = (id: string, next: string) => {
+    const name = next.trim().slice(0, BROWSER_PROFILE_NAME_MAX_LENGTH);
+    if (name === "") return;
+    const currentProfiles = getClientSettings().browserProfiles;
+    updateSettings({
+      browserProfiles: currentProfiles.map((profile) =>
+        profile.id === id ? { ...profile, name } : profile,
+      ),
+    });
+  };
+
+  const removeProfile = async (id: string) => {
+    setProfileRemovalError(null);
+    setProfileRemovalInFlight(true);
+    // Drop the partition's data too, otherwise a removed profile's cookies
+    // stay on disk with nothing in the UI pointing at them.
+    try {
+      await clearBrowserProfileData(
+        previewBridge,
+        environmentsReady ? environments.map((environment) => environment.environmentId) : [],
+        id,
+      );
+    } catch {
+      setProfileRemovalError("Profile data could not be deleted. Try again.");
+      setProfileRemovalInFlight(false);
+      return;
+    }
+    const currentSettings = getClientSettings();
+    updateSettings({
+      browserProfiles: currentSettings.browserProfiles.filter((profile) => profile.id !== id),
+      // Reassign the default rather than leaving it pointing at nothing.
+      ...(currentSettings.browserDefaultProfileId === id
+        ? { browserDefaultProfileId: DEFAULT_BROWSER_PROFILE_ID }
+        : {}),
+    });
+    setProfileRemovalInFlight(false);
+    setProfilePendingRemoval(null);
+  };
+
+  return (
+    <SettingsRow
+      {...searchableSetting("browser-profiles")}
+      description="Each profile keeps its own cookies and logins, so a tab opened under one can't see another's. Incognito discards everything when the app closes."
+      control={
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={disabled || userProfiles.length >= BROWSER_PROFILE_MAX_COUNT}
+          onClick={addProfile}
+        >
+          <PlusIcon />
+          Add profile
+        </Button>
+      }
+    >
+      {/*
+        Each profile is its own bounded row, and the list carries the bottom
+        spacing `SettingsRow` leaves to its children (`pt-3 pb-1`). Bare rows
+        stack on narrow viewports with a larger gap inside a row than between
+        rows, which reads as the remove button belonging to the profile below.
+      */}
+      <div className="mt-2 space-y-1 pb-2">
+        {resolveBrowserProfiles(userProfiles).map((profile) => {
+          const builtIn = isBuiltInBrowserProfileId(profile.id);
+          return (
+            <div
+              key={profile.id}
+              className={cn(
+                ITEM_ROW_INNER_CLASSNAME,
+                "rounded-lg border border-border/60 px-3 py-2",
+              )}
+            >
+              {builtIn ? (
+                // Dimmed here rather than on the list, which is the only
+                // content in the row without a disabled treatment of its own:
+                // a wrapper-level dim would stack with the rename field's and
+                // the remove button's, landing them near 0.41 while every
+                // other disabled control in the block sits at 0.64.
+                <span
+                  className={cn(
+                    "flex min-w-0 items-center gap-2 text-sm text-foreground",
+                    disabled && "opacity-64",
+                  )}
+                >
+                  {profile.name}
+                  <Badge variant="outline">
+                    {profile.kind === "incognito" ? "Ephemeral" : "Built-in"}
+                  </Badge>
+                </span>
+              ) : (
+                <DraftInput
+                  nativeInput
+                  size="sm"
+                  className="w-full sm:w-64"
+                  aria-label={`Rename ${profile.name}`}
+                  disabled={disabled}
+                  maxLength={BROWSER_PROFILE_NAME_MAX_LENGTH}
+                  value={profile.name}
+                  onCommit={(next) => renameProfile(profile.id, next)}
+                />
+              )}
+              {builtIn ? null : (
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <Button
+                        size="icon-sm"
+                        variant="ghost-muted"
+                        disabled={disabled || !environmentsReady}
+                        aria-label={`Remove ${profile.name}`}
+                        onClick={() => setProfilePendingRemoval(profile)}
+                      >
+                        <Trash2Icon />
+                      </Button>
+                    }
+                  />
+                  <TooltipPopup side="top">Remove profile and its data</TooltipPopup>
+                </Tooltip>
+              )}
+            </div>
+          );
+        })}
+      </div>
+      <AlertDialog
+        open={profilePendingRemoval !== null}
+        onOpenChange={(open) => {
+          if (!open && !profileRemovalInFlight) {
+            setProfilePendingRemoval(null);
+            setProfileRemovalError(null);
+          }
+        }}
+      >
+        <AlertDialogPopup>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Remove “{profilePendingRemoval?.name}”?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Its cookies, logins, and cache are deleted with it. Tabs open in this profile move to
+              the default one.
+            </AlertDialogDescription>
+            {profileRemovalError ? (
+              <p aria-live="polite" className="text-sm text-destructive">
+                {profileRemovalError}
+              </p>
+            ) : null}
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogClose render={<Button variant="outline" />}>Cancel</AlertDialogClose>

@@ -501,11 +556,307 @@ function DesktopOnlyBrowserDefaults({ children }: { readonly children: ReactNode
   );
 }
 
+/**
+ * Create, rename, and remove browser profiles.
+ *
+ * Built-ins render without controls: they are synthesized rather than stored,
+ * so there is nothing to rename and removing them would strand every tab that
+ * opened under them.
+ */
+function BrowserProfilesSetting({ disabled }: { readonly disabled: boolean }) {
+  const userProfiles = useClientSettings((settings) => settings.browserProfiles);
+  const settingsHydrated = useClientSettingsHydrated();
+  const updateSettings = useUpdatePrimarySettings();
+  const { environments, isReady: environmentsReady } = useEnvironments();
+  const [profilePendingRemoval, setProfilePendingRemoval] = useState<BrowserProfile | null>(null);
+  const [profileRemovalError, setProfileRemovalError] = useState<string | null>(null);
+  const [profileRemovalInFlight, setProfileRemovalInFlight] = useState(false);
+  const removalAvailable = browserProfileRemovalAvailable(
+    previewBridge !== null,
+    environmentsReady,
+    environments.length,
+  );
+  const profileWritesDisabled = disabled || !settingsHydrated;
+
+  const addProfile = () => {
+    if (!settingsHydrated) return;
+    const currentProfiles = getClientSettings().browserProfiles;
+    if (currentProfiles.length >= BROWSER_PROFILE_MAX_COUNT) return;
+    const taken = new Set(resolveBrowserProfiles(currentProfiles).map((profile) => profile.name));
+    let name = "New profile";
+    for (let index = 2; taken.has(name); index += 1) name = `New profile ${index}`;
+    updateSettings({
+      browserProfiles: [
+        ...currentProfiles,
+        { id: `profile-${randomUUID()}`, name, kind: "persistent" as const },
+      ],
+    });
+  };
+
+  const renameProfile = (id: string, next: string) => {
+    if (!settingsHydrated) return;
+    const name = next.trim().slice(0, BROWSER_PROFILE_NAME_MAX_LENGTH);
+    if (name === "") return;
+    const currentProfiles = getClientSettings().browserProfiles;
+    updateSettings({
+      browserProfiles: currentProfiles.map((profile) =>
+        profile.id === id ? { ...profile, name } : profile,
+      ),
+    });
+  };
+
+  const removeProfile = async (id: string) => {
+    if (!settingsHydrated) return;
+    if (!removalAvailable) {
+      setProfileRemovalError("Connect to an environment before removing this profile.");
+      return;
+    }
+    setProfileRemovalError(null);
+    setProfileRemovalInFlight(true);
+    // Drop the partition's data too, otherwise a removed profile's cookies
+    // stay on disk with nothing in the UI pointing at them.
+    try {
+      await clearBrowserProfileData(
+        previewBridge,
+        environmentsReady ? environments.map((environment) => environment.environmentId) : [],
+        id,
+      );
+    } catch {
+      setProfileRemovalError("Profile data could not be deleted. Try again.");
+      setProfileRemovalInFlight(false);
+      return;
+    }
+    const currentSettings = getClientSettings();
+    updateSettings({
+      browserProfiles: currentSettings.browserProfiles.filter((profile) => profile.id !== id),
+      // Reassign the default rather than leaving it pointing at nothing.
+      ...(currentSettings.browserDefaultProfileId === id
+        ? { browserDefaultProfileId: DEFAULT_BROWSER_PROFILE_ID }
+        : {}),
+    });
+    setProfileRemovalInFlight(false);
+    setProfilePendingRemoval(null);
+  };
+
+  return (
+    <SettingsRow
+      {...searchableSetting("browser-profiles")}
+      description="Each profile keeps its own cookies and logins, so a tab opened under one can't see another's. Incognito discards everything when the app closes."
+      control={
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={profileWritesDisabled || userProfiles.length >= BROWSER_PROFILE_MAX_COUNT}
+          onClick={addProfile}
+        >
+          <PlusIcon />
+          Add profile
+        </Button>
+      }
+    >
+      {/*
+        Each profile is its own bounded row, and the list carries the bottom
+        spacing `SettingsRow` leaves to its children (`pt-3 pb-1`). Bare rows
+        stack on narrow viewports with a larger gap inside a row than between
+        rows, which reads as the remove button belonging to the profile below.
+      */}
+      <div className="mt-2 space-y-1 pb-2">
+        {resolveBrowserProfiles(userProfiles).map((profile) => {
+          const builtIn = isBuiltInBrowserProfileId(profile.id);
+          return (
+            <div
+              key={profile.id}
+              className={cn(
+                ITEM_ROW_INNER_CLASSNAME,
+                "rounded-lg border border-border/60 px-3 py-2",
+              )}
+            >
+              {builtIn ? (
+                // Dimmed here rather than on the list, which is the only
+                // content in the row without a disabled treatment of its own:
+                // a wrapper-level dim would stack with the rename field's and
+                // the remove button's, landing them near 0.41 while every
+                // other disabled control in the block sits at 0.64.
+                <span
+                  className={cn(
+                    "flex min-w-0 items-center gap-2 text-sm text-foreground",
+                    profileWritesDisabled && "opacity-64",
+                  )}
+                >
+                  {profile.name}
+                  <Badge variant="outline">
+                    {profile.kind === "incognito" ? "Ephemeral" : "Built-in"}
+                  </Badge>
+                </span>
+              ) : (
+                <DraftInput
+                  nativeInput
+                  size="sm"
+                  className="w-full sm:w-64"
+                  aria-label={`Rename ${profile.name}`}
+                  disabled={profileWritesDisabled}
+                  maxLength={BROWSER_PROFILE_NAME_MAX_LENGTH}
+                  value={profile.name}
+                  onCommit={(next) => renameProfile(profile.id, next)}
+                />
+              )}
+              {builtIn ? null : (
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <span className="inline-flex" {...(!removalAvailable ? { tabIndex: 0 } : {})}>
+                        <Button
+                          size="icon-sm"
+                          variant="ghost-muted"
+                          disabled={profileWritesDisabled || !removalAvailable}
+                          aria-label={`Remove ${profile.name}`}
+                          onClick={() => setProfilePendingRemoval(profile)}
+                        >
+                          <Trash2Icon />
+                        </Button>
+                      </span>
+                    }
+                  />
+                  <TooltipPopup side="top">
+                    {removalAvailable
+                      ? "Remove profile and its data"
+                      : "Connect to an environment to remove this profile"}
+                  </TooltipPopup>
+                </Tooltip>
+              )}
+            </div>
+          );
+        })}
+      </div>
+      <AlertDialog
+        open={profilePendingRemoval !== null}
+        onOpenChange={(open) => {
+          if (!open && !profileRemovalInFlight) {
+            setProfilePendingRemoval(null);
+            setProfileRemovalError(null);
+          }
+        }}
+      >
+        <AlertDialogPopup>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Remove “{profilePendingRemoval?.name}”?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Its cookies, logins, and cache are deleted with it. Tabs already open in this profile
+              stay open until you close them.
+            </AlertDialogDescription>
+            {profileRemovalError ? (
+              <p aria-live="polite" className="text-sm text-destructive">
+                {profileRemovalError}
+              </p>
+            ) : null}
+            {!removalAvailable ? (
+              <p className="text-sm text-muted-foreground">
+                Connect to an environment to remove this profile and its data.
+              </p>
+            ) : null}
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogClose
+              disabled={profileRemovalInFlight}
+              render={<Button variant="outline" disabled={profileRemovalInFlight} />}
+            >
+              Cancel
+            </AlertDialogClose>
+            <Button
+              variant="destructive"
+              disabled={profileRemovalInFlight || !settingsHydrated || !removalAvailable}
+              onClick={() => {
+                if (profilePendingRemoval && settingsHydrated && removalAvailable) {
+                  void removeProfile(profilePendingRemoval.id);
+                }
+              }}
+            >
+              {profileRemovalInFlight ? "Removing…" : "Remove profile"}
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogPopup>
+      </AlertDialog>
+    </SettingsRow>
+  );
+}
+
+function BrowserDefaultProfileSetting({ disabled }: { readonly disabled: boolean }) {
+  const userProfiles = useClientSettings((settings) => settings.browserProfiles);
+  const defaultProfileId = useClientSettings((settings) => settings.browserDefaultProfileId);
+  const settingsHydrated = useClientSettingsHydrated();
+  const updateSettings = useUpdatePrimarySettings();
+  const profileWritesDisabled = disabled || !settingsHydrated;
+  // Incognito is deliberately absent: as a default it would open every tab
+  // into storage that is discarded on close.
+  const profiles = resolveBrowserProfiles(userProfiles).filter(
+    (profile) => profile.kind !== "incognito",
+  );
+  const selected = findBrowserProfile(profiles, defaultProfileId) ?? profiles[0];
+
+  return (
+    <SettingsRow
+      {...searchableSetting("browser-default-profile")}
+      description="Profile new browser tabs open under, including tabs an agent opens."
+      resetAction={
+        !profileWritesDisabled && defaultProfileId !== DEFAULT_BROWSER_PROFILE_ID ? (
+          <SettingResetButton
+            label="default browser profile"
+            onClick={() => {
+              if (settingsHydrated) {
+                updateSettings({ browserDefaultProfileId: DEFAULT_BROWSER_PROFILE_ID });
+              }
+            }}
+          />
+        ) : null
+      }
+      control={
+        <Select
+          disabled={profileWritesDisabled}
+          value={selected?.id ?? DEFAULT_BROWSER_PROFILE_ID}
+          onValueChange={(value) => {
+            if (settingsHydrated && value !== null) {
+              updateSettings({ browserDefaultProfileId: value });
+            }
+          }}
+        >
+          <SelectTrigger size="sm" className="w-full sm:w-44" aria-label="Default browser profile">
+            <SelectValue>{selected?.name ?? "Default"}</SelectValue>
+          </SelectTrigger>
+          {/*
+            Capped and truncated like the tab menu's profile list: names are
+            user-supplied and run to 48 characters, which would otherwise
+            widen the popup to fit the longest one. The cap goes on the glass
+            shell (`popupClassName`) and not just the list, and the trigger
+            width is not matched, or a full-width trigger on small screens
+            would leave empty chrome beside a 16rem list. `ItemText` renders a
+            block, so the label must be a block too for `truncate` to apply.
+          */}
+          <SelectPopup
+            align="end"
+            alignItemWithTrigger={false}
+            matchTriggerWidth={false}
+            popupClassName="max-w-64"
+            className="max-w-64"
+          >

@@ -453,11 +476,211 @@ function DesktopOnlyBrowserDefaults({ children }: { readonly children: ReactNode
   );
 }
 
+/**
+ * Create, rename, and remove browser profiles.
+ *
+ * Built-ins render without controls: they are synthesized rather than stored,
+ * so there is nothing to rename and removing them would strand every tab that
+ * opened under them.
+ */
+function BrowserProfilesSetting({ disabled }: { readonly disabled: boolean }) {
+  const userProfiles = useClientSettings((settings) => settings.browserProfiles);
+  const defaultProfileId = useClientSettings((settings) => settings.browserDefaultProfileId);
+  const updateSettings = useUpdatePrimarySettings();
+  const environmentId = usePrimaryEnvironment()?.environmentId;
+  const [profilePendingRemoval, setProfilePendingRemoval] = useState<BrowserProfile | null>(null);
+
+  const addProfile = () => {
+    if (userProfiles.length >= BROWSER_PROFILE_MAX_COUNT) return;
+    const taken = new Set(resolveBrowserProfiles(userProfiles).map((profile) => profile.name));
+    let name = "New profile";
+    for (let index = 2; taken.has(name); index += 1) name = `New profile ${index}`;
+    updateSettings({
+      browserProfiles: [
+        ...userProfiles,
+        { id: `profile-${randomUUID()}`, name, kind: "persistent" as const },
+      ],
+    });
+  };
+
+  const renameProfile = (id: string, next: string) => {
+    const name = next.trim().slice(0, BROWSER_PROFILE_NAME_MAX_LENGTH);
+    if (name === "") return;
+    updateSettings({
+      browserProfiles: userProfiles.map((profile) =>
+        profile.id === id ? { ...profile, name } : profile,
+      ),
+    });
+  };
+
+  const removeProfile = (id: string) => {
+    setProfilePendingRemoval(null);
+    // Drop the partition's data too, otherwise a removed profile's cookies
+    // stay on disk with nothing in the UI pointing at them.
+    if (environmentId) {
+      void previewBridge?.clearCookies(environmentId, id).catch(() => undefined);
+      void previewBridge?.clearCache(environmentId, id).catch(() => undefined);
+    }
+    updateSettings({
+      browserProfiles: userProfiles.filter((profile) => profile.id !== id),
+      // Reassign the default rather than leaving it pointing at nothing.
+      ...(defaultProfileId === id ? { browserDefaultProfileId: DEFAULT_BROWSER_PROFILE_ID } : {}),
+    });
+  };
+
+  return (
+    <SettingsRow
+      {...searchableSetting("browser-profiles")}
+      description="Each profile keeps its own cookies and logins, so a tab opened under one can't see another's. Incognito discards everything when the app closes."
+      control={
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={disabled || userProfiles.length >= BROWSER_PROFILE_MAX_COUNT}
+          onClick={addProfile}
+        >
+          <PlusIcon />
+          Add profile
+        </Button>
+      }
+    >
+      {/*
+        Dimmed as a whole when the section is unavailable. The built-in rows
+        are a plain span and a badge rather than `h3`/`p` or disabled controls,
+        so the block's own dimming does not reach them and they would be the
+        only full-contrast content inside "only available in the desktop app".
+      */}
+      <div className={cn("mt-1 space-y-1", disabled && "opacity-64")}>
+        {resolveBrowserProfiles(userProfiles).map((profile) => {
+          const builtIn = isBuiltInBrowserProfileId(profile.id);
+          return (
+            <div key={profile.id} className={ITEM_ROW_INNER_CLASSNAME}>
+              {builtIn ? (
+                <span className="flex min-w-0 items-center gap-2 text-sm text-foreground">

@@ -909,6 +932,54 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
                 >
                   {addSurfaceActions.map((action) => {
                     const Icon = action.icon;
+                    // Browser collapses into one row: clicking the trigger opens
+                    // the default profile (the common case stays one click),
+                    // while hover or arrow reveals the profiles. The choice
+                    // lives at open time because a tab's profile is fixed then —
+                    // Electron only honours a partition before attach.
+                    if (action.label === "Browser" && action.available) {
+                      return (
+                        <MenuSub key={action.label}>
+                          <MenuSubTrigger
+                            aria-keyshortcuts={action.shortcut}

@@ -177,12 +188,27 @@ export function PreviewMoreMenu({
           </span>
         </MenuItem>
         <MenuSeparator />
-        <MenuItem onClick={() => void bridge.clearCookies().catch(() => undefined)}>
-          Clear cookies
-        </MenuItem>
-        <MenuItem onClick={() => void bridge.clearCache().catch(() => undefined)}>
-          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)

@@ -453,11 +465,172 @@ function DesktopOnlyBrowserDefaults({ children }: { readonly children: ReactNode
   );
 }
 
+/**
+ * Create, rename, and remove browser profiles.
+ *
+ * Built-ins render without controls: they are synthesized rather than stored,
+ * so there is nothing to rename and removing them would strand every tab that
+ * opened under them.
+ */
+function BrowserProfilesSetting({ disabled }: { readonly disabled: boolean }) {
+  const userProfiles = useClientSettings((settings) => settings.browserProfiles);
+  const defaultProfileId = useClientSettings((settings) => settings.browserDefaultProfileId);
+  const updateSettings = useUpdatePrimarySettings();
+  const environmentId = usePrimaryEnvironment()?.environmentId;
+
+  const addProfile = () => {
+    if (userProfiles.length >= BROWSER_PROFILE_MAX_COUNT) return;
+    const taken = new Set(resolveBrowserProfiles(userProfiles).map((profile) => profile.name));
+    let name = "New profile";
+    for (let index = 2; taken.has(name); index += 1) name = `New profile ${index}`;
+    updateSettings({
+      browserProfiles: [
+        ...userProfiles,
+        { id: `profile-${randomUUID()}`, name, kind: "persistent" as const },
+      ],
+    });
+  };
+
+  const renameProfile = (id: string, next: string) => {
+    const name = next.trim().slice(0, BROWSER_PROFILE_NAME_MAX_LENGTH);
+    if (name === "") return;
+    updateSettings({
+      browserProfiles: userProfiles.map((profile) =>
+        profile.id === id ? { ...profile, name } : profile,
+      ),
+    });
+  };
+
+  const removeProfile = (id: string) => {
+    // Drop the partition's data too, otherwise a removed profile's cookies
+    // stay on disk with nothing in the UI pointing at them.
+    if (environmentId) {
+      void previewBridge?.clearCookies(environmentId, id).catch(() => undefined);
+      void previewBridge?.clearCache(environmentId, id).catch(() => undefined);
+    }
+    updateSettings({
+      browserProfiles: userProfiles.filter((profile) => profile.id !== id),
+      // Reassign the default rather than leaving it pointing at nothing.
+      ...(defaultProfileId === id ? { browserDefaultProfileId: DEFAULT_BROWSER_PROFILE_ID } : {}),
+    });

@@ -453,11 +465,172 @@ function DesktopOnlyBrowserDefaults({ children }: { readonly children: ReactNode
   );
 }
 
+/**
+ * Create, rename, and remove browser profiles.
+ *
+ * Built-ins render without controls: they are synthesized rather than stored,
+ * so there is nothing to rename and removing them would strand every tab that
+ * opened under them.
+ */
+function BrowserProfilesSetting({ disabled }: { readonly disabled: boolean }) {
+  const userProfiles = useClientSettings((settings) => settings.browserProfiles);
+  const defaultProfileId = useClientSettings((settings) => settings.browserDefaultProfileId);
+  const updateSettings = useUpdatePrimarySettings();
+  const environmentId = usePrimaryEnvironment()?.environmentId;
+
+  const addProfile = () => {
+    if (userProfiles.length >= BROWSER_PROFILE_MAX_COUNT) return;
+    const taken = new Set(resolveBrowserProfiles(userProfiles).map((profile) => profile.name));
+    let name = "New profile";
+    for (let index = 2; taken.has(name); index += 1) name = `New profile ${index}`;
+    updateSettings({
+      browserProfiles: [
+        ...userProfiles,
+        { id: `profile-${randomUUID()}`, name, kind: "persistent" as const },
+      ],
+    });
+  };
+
+  const renameProfile = (id: string, next: string) => {
+    const name = next.trim().slice(0, BROWSER_PROFILE_NAME_MAX_LENGTH);
+    if (name === "") return;
+    updateSettings({
+      browserProfiles: userProfiles.map((profile) =>
+        profile.id === id ? { ...profile, name } : profile,
+      ),
+    });
+  };
+
+  const removeProfile = (id: string) => {
+    // Drop the partition's data too, otherwise a removed profile's cookies
+    // stay on disk with nothing in the UI pointing at them.
+    if (environmentId) {
+      void previewBridge?.clearCookies(environmentId, id).catch(() => undefined);
+      void previewBridge?.clearCache(environmentId, id).catch(() => undefined);
+    }
+    updateSettings({
+      browserProfiles: userProfiles.filter((profile) => profile.id !== id),
+      // Reassign the default rather than leaving it pointing at nothing.
+      ...(defaultProfileId === id ? { browserDefaultProfileId: DEFAULT_BROWSER_PROFILE_ID } : {}),
+    });

@@ -177,12 +193,36 @@ export function PreviewMoreMenu({
           </span>
         </MenuItem>
         <MenuSeparator />
-        <MenuItem onClick={() => void bridge.clearCookies().catch(() => undefined)}>
-          Clear cookies
-        </MenuItem>
-        <MenuItem onClick={() => void bridge.clearCache().catch(() => undefined)}>
-          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>
+          {/*
+            The heading carries the profile so the actions below can keep
+            fixed-length labels: repeating a name of up to 48 characters in
+            each one drove the popup far past its width.
+          */}
+          {profileName ? (
+            <MenuGroupLabel>
+              <span className="min-w-0 truncate">Profile: {profileName}</span>
+            </MenuGroupLabel>

@@ -196,33 +199,84 @@ export const closePictureInPicture = tabMethod(
 
 export const clearCookies = DesktopIpc.makeIpcMethod({
   channel: IpcChannels.PREVIEW_CLEAR_COOKIES_CHANNEL,
-  payload: Schema.Void,
+  payload: DesktopPreviewClearDataInputSchema,
   result: Schema.Void,
-  handler: Effect.fn("desktop.ipc.preview.clearCookies")(function* () {
+  handler: Effect.fn("desktop.ipc.preview.clearCookies")(function* ({ environmentId, profileId }) {
     const manager = yield* PreviewManager.PreviewManager;
-    yield* manager.clearCookies();
+    yield* manager.clearCookies(yield* resolveClearPartitions(manager, environmentId, profileId));
   }),
 });
 
 export const clearCache = DesktopIpc.makeIpcMethod({
   channel: IpcChannels.PREVIEW_CLEAR_CACHE_CHANNEL,
-  payload: Schema.Void,
+  payload: DesktopPreviewClearDataInputSchema,
   result: Schema.Void,
-  handler: Effect.fn("desktop.ipc.preview.clearCache")(function* () {
+  handler: Effect.fn("desktop.ipc.preview.clearCache")(function* ({ environmentId, profileId }) {
     const manager = yield* PreviewManager.PreviewManager;
-    yield* manager.clearCache();
+    yield* manager.clearCache(yield* resolveClearPartitions(manager, environmentId, profileId));
   }),
 });
 
+/**
+ * Partition scope for an (environment, profile) pair.
+ *
+ * The default profile keeps the bare environment id it used before profiles
+ * existed, so upgrading does not strand anyone's existing logins in an
+ * orphaned partition. Incognito derives a non-persistent partition.
+ */
+export function resolvePartitionScope(
+  environmentId: string,
+  profileId: string | undefined,
+): {
+  readonly scope: string;
+  readonly persistent: boolean;
+  readonly namespace?: "profile";
+} {
+  if (profileId === undefined || profileId === DEFAULT_BROWSER_PROFILE_ID) {
+    return { scope: environmentId, persistent: true };
+  }
+  // Encode each component independently so delimiters inside either id cannot
+  // make two distinct pairs hash to the same Electron partition.
+  return {
+    scope: `${encodeURIComponent(environmentId)}::${encodeURIComponent(profileId)}`,

@@ -0,0 +1,78 @@
+/**
+ * Browser profiles - named identities for the in-app preview browser.
+ *
+ * Each profile maps to its own Electron session partition, so cookies and
+ * storage are isolated between them: a tab opened under "Work" cannot see
+ * "Personal"'s logins. Profiles are client-local, like the other browser
+ * defaults, because the Chromium guest they configure is desktop-local.
+ *
+ * Two profiles are built in and cannot be edited or removed:
+ * - `default` keeps the partition scope the browser used before profiles
+ *   existed, so upgrading does not sign anyone out.
+ * - `incognito` maps to a non-persistent partition for throwaway sessions.
+ *
+ * @module BrowserProfile
+ */
+import { Schema } from "effect";
+import { TrimmedNonEmptyString } from "./baseSchemas.ts";
+
+export const BROWSER_PROFILE_NAME_MAX_LENGTH = 48;
+export const BROWSER_PROFILE_MAX_COUNT = 24;
+
+export const BrowserProfileId = TrimmedNonEmptyString.check(Schema.isMaxLength(64));
+export type BrowserProfileId = typeof BrowserProfileId.Type;
+
+export const BrowserProfileName = TrimmedNonEmptyString.check(
+  Schema.isMaxLength(BROWSER_PROFILE_NAME_MAX_LENGTH),
+);
+
+/**
+ * `persistent` profiles keep cookies on disk across restarts; `incognito`
+ * uses an in-memory partition that Chromium discards with the process.
+ */
+export const BrowserProfileKind = Schema.Literals(["persistent", "incognito"]);
+export type BrowserProfileKind = typeof BrowserProfileKind.Type;
+
+export const BrowserProfile = Schema.Struct({
+  id: BrowserProfileId,
+  name: BrowserProfileName,
+  kind: BrowserProfileKind,
+});
+export type BrowserProfile = typeof BrowserProfile.Type;
+
+export const DEFAULT_BROWSER_PROFILE_ID: BrowserProfileId = "default";
+export const INCOGNITO_BROWSER_PROFILE_ID: BrowserProfileId = "incognito";
+
+/**
+ * Built-ins are synthesized rather than stored, so they cannot be renamed out
+ * of existence or deleted by editing the settings file by hand.
+ */
+export const BUILT_IN_BROWSER_PROFILES: ReadonlyArray<BrowserProfile> = [
+  { id: DEFAULT_BROWSER_PROFILE_ID, name: "Default", kind: "persistent" },
+  { id: INCOGNITO_BROWSER_PROFILE_ID, name: "Incognito", kind: "incognito" },
+];
+
+export function isBuiltInBrowserProfileId(id: string): boolean {
+  return BUILT_IN_BROWSER_PROFILES.some((profile) => profile.id === id);
+}
+
+/**
+ * The full picker list: built-ins first, then the user's own profiles with any
+ * entry that collides with a built-in id dropped, so a hand-edited settings
+ * file cannot shadow "Default" or "Incognito".
+ */
+export function resolveBrowserProfiles(
+  userProfiles: ReadonlyArray<BrowserProfile>,
+): ReadonlyArray<BrowserProfile> {
+  return [
+    ...BUILT_IN_BROWSER_PROFILES,
+    ...userProfiles.filter((profile) => !isBuiltInBrowserProfileId(profile.id)),
+  ];

@@ -453,11 +507,279 @@ function DesktopOnlyBrowserDefaults({ children }: { readonly children: ReactNode
   );
 }
 
+/**
+ * Create, rename, and remove browser profiles.
+ *
+ * Built-ins render without controls: they are synthesized rather than stored,
+ * so there is nothing to rename and removing them would strand every tab that
+ * opened under them.
+ */
+function BrowserProfilesSetting({ disabled }: { readonly disabled: boolean }) {
+  const userProfiles = useClientSettings((settings) => settings.browserProfiles);
+  const updateSettings = useUpdatePrimarySettings();
+  const { environments, isReady: environmentsReady } = useEnvironments();
+  const [profilePendingRemoval, setProfilePendingRemoval] = useState<BrowserProfile | null>(null);
+  const [profileRemovalError, setProfileRemovalError] = useState<string | null>(null);
+  const [profileRemovalInFlight, setProfileRemovalInFlight] = useState(false);
+  const removalAvailable = browserProfileRemovalAvailable(
+    previewBridge !== null,
+    environmentsReady,
+    environments.length,
+  );
+
+  const addProfile = () => {
+    const currentProfiles = getClientSettings().browserProfiles;

@@ -453,11 +476,205 @@ function DesktopOnlyBrowserDefaults({ children }: { readonly children: ReactNode
   );
 }
 
+/**
+ * Create, rename, and remove browser profiles.
+ *
+ * Built-ins render without controls: they are synthesized rather than stored,
+ * so there is nothing to rename and removing them would strand every tab that
+ * opened under them.
+ */
+function BrowserProfilesSetting({ disabled }: { readonly disabled: boolean }) {
+  const userProfiles = useClientSettings((settings) => settings.browserProfiles);
+  const defaultProfileId = useClientSettings((settings) => settings.browserDefaultProfileId);
+  const updateSettings = useUpdatePrimarySettings();
+  const environmentId = usePrimaryEnvironment()?.environmentId;
+  const [profilePendingRemoval, setProfilePendingRemoval] = useState<BrowserProfile | null>(null);
+
+  const addProfile = () => {
+    if (userProfiles.length >= BROWSER_PROFILE_MAX_COUNT) return;
+    const taken = new Set(resolveBrowserProfiles(userProfiles).map((profile) => profile.name));
+    let name = "New profile";
+    for (let index = 2; taken.has(name); index += 1) name = `New profile ${index}`;
+    updateSettings({
+      browserProfiles: [
+        ...userProfiles,
+        { id: `profile-${randomUUID()}`, name, kind: "persistent" as const },
+      ],
+    });
+  };
+
+  const renameProfile = (id: string, next: string) => {
+    const name = next.trim().slice(0, BROWSER_PROFILE_NAME_MAX_LENGTH);
+    if (name === "") return;
+    updateSettings({
+      browserProfiles: userProfiles.map((profile) =>
+        profile.id === id ? { ...profile, name } : profile,
+      ),
+    });
+  };
+
+  const removeProfile = (id: string) => {
+    setProfilePendingRemoval(null);
+    // Drop the partition's data too, otherwise a removed profile's cookies
+    // stay on disk with nothing in the UI pointing at them.
+    if (environmentId) {
+      void previewBridge?.clearCookies(environmentId, id).catch(() => undefined);
+      void previewBridge?.clearCache(environmentId, id).catch(() => undefined);
+    }
+    updateSettings({

@@ -453,11 +476,205 @@ function DesktopOnlyBrowserDefaults({ children }: { readonly children: ReactNode
   );
 }
 
+/**
+ * Create, rename, and remove browser profiles.
+ *
+ * Built-ins render without controls: they are synthesized rather than stored,
+ * so there is nothing to rename and removing them would strand every tab that
+ * opened under them.
+ */
+function BrowserProfilesSetting({ disabled }: { readonly disabled: boolean }) {
+  const userProfiles = useClientSettings((settings) => settings.browserProfiles);
+  const defaultProfileId = useClientSettings((settings) => settings.browserDefaultProfileId);
+  const updateSettings = useUpdatePrimarySettings();
+  const environmentId = usePrimaryEnvironment()?.environmentId;
+  const [profilePendingRemoval, setProfilePendingRemoval] = useState<BrowserProfile | null>(null);
+
+  const addProfile = () => {
+    if (userProfiles.length >= BROWSER_PROFILE_MAX_COUNT) return;
+    const taken = new Set(resolveBrowserProfiles(userProfiles).map((profile) => profile.name));
+    let name = "New profile";
+    for (let index = 2; taken.has(name); index += 1) name = `New profile ${index}`;
+    updateSettings({
+      browserProfiles: [
+        ...userProfiles,
+        { id: `profile-${randomUUID()}`, name, kind: "persistent" as const },
+      ],
+    });
+  };
+
+  const renameProfile = (id: string, next: string) => {
+    const name = next.trim().slice(0, BROWSER_PROFILE_NAME_MAX_LENGTH);
+    if (name === "") return;
+    updateSettings({
+      browserProfiles: userProfiles.map((profile) =>
+        profile.id === id ? { ...profile, name } : profile,
+      ),
+    });
+  };
+
+  const removeProfile = (id: string) => {
+    setProfilePendingRemoval(null);
+    // Drop the partition's data too, otherwise a removed profile's cookies
+    // stay on disk with nothing in the UI pointing at them.
+    if (environmentId) {
+      void previewBridge?.clearCookies(environmentId, id).catch(() => undefined);
+      void previewBridge?.clearCache(environmentId, id).catch(() => undefined);
+    }
+    updateSettings({
+      browserProfiles: userProfiles.filter((profile) => profile.id !== id),
+      // Reassign the default rather than leaving it pointing at nothing.
+      ...(defaultProfileId === id ? { browserDefaultProfileId: DEFAULT_BROWSER_PROFILE_ID } : {}),
+    });
+  };
+
+  return (
+    <SettingsRow
+      {...searchableSetting("browser-profiles")}
+      description="Each profile keeps its own cookies and logins, so a tab opened under one can't see another's. Incognito discards everything when the app closes."
+      control={
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={disabled || userProfiles.length >= BROWSER_PROFILE_MAX_COUNT}
+          onClick={addProfile}
+        >
+          <PlusIcon />
+          Add profile
+        </Button>
+      }
+    >
+      <div className="mt-1 space-y-1">

@@ -453,11 +476,205 @@ function DesktopOnlyBrowserDefaults({ children }: { readonly children: ReactNode
   );
 }
 
+/**
+ * Create, rename, and remove browser profiles.
+ *
+ * Built-ins render without controls: they are synthesized rather than stored,
+ * so there is nothing to rename and removing them would strand every tab that
+ * opened under them.
+ */
+function BrowserProfilesSetting({ disabled }: { readonly disabled: boolean }) {
+  const userProfiles = useClientSettings((settings) => settings.browserProfiles);
+  const defaultProfileId = useClientSettings((settings) => settings.browserDefaultProfileId);
+  const updateSettings = useUpdatePrimarySettings();
+  const environmentId = usePrimaryEnvironment()?.environmentId;
+  const [profilePendingRemoval, setProfilePendingRemoval] = useState<BrowserProfile | null>(null);
+
+  const addProfile = () => {
+    if (userProfiles.length >= BROWSER_PROFILE_MAX_COUNT) return;
+    const taken = new Set(resolveBrowserProfiles(userProfiles).map((profile) => profile.name));
+    let name = "New profile";
+    for (let index = 2; taken.has(name); index += 1) name = `New profile ${index}`;
+    updateSettings({
+      browserProfiles: [

@@ -453,11 +476,227 @@ function DesktopOnlyBrowserDefaults({ children }: { readonly children: ReactNode
   );
 }
 
+/**
+ * Create, rename, and remove browser profiles.
+ *
+ * Built-ins render without controls: they are synthesized rather than stored,
+ * so there is nothing to rename and removing them would strand every tab that
+ * opened under them.
+ */
+function BrowserProfilesSetting({ disabled }: { readonly disabled: boolean }) {
+  const userProfiles = useClientSettings((settings) => settings.browserProfiles);
+  const defaultProfileId = useClientSettings((settings) => settings.browserDefaultProfileId);
+  const updateSettings = useUpdatePrimarySettings();
+  const environmentId = usePrimaryEnvironment()?.environmentId;
+  const [profilePendingRemoval, setProfilePendingRemoval] = useState<BrowserProfile | null>(null);
+
+  const addProfile = () => {
+    if (userProfiles.length >= BROWSER_PROFILE_MAX_COUNT) return;
+    const taken = new Set(resolveBrowserProfiles(userProfiles).map((profile) => profile.name));
+    let name = "New profile";
+    for (let index = 2; taken.has(name); index += 1) name = `New profile ${index}`;
+    updateSettings({
+      browserProfiles: [
+        ...userProfiles,
+        { id: `profile-${randomUUID()}`, name, kind: "persistent" as const },
+      ],
+    });
+  };
+
+  const renameProfile = (id: string, next: string) => {
+    const name = next.trim().slice(0, BROWSER_PROFILE_NAME_MAX_LENGTH);
+    if (name === "") return;
+    updateSettings({
+      browserProfiles: userProfiles.map((profile) =>
+        profile.id === id ? { ...profile, name } : profile,
+      ),
+    });
+  };
+
+  const removeProfile = (id: string) => {
+    setProfilePendingRemoval(null);
+    // Drop the partition's data too, otherwise a removed profile's cookies
+    // stay on disk with nothing in the UI pointing at them.
+    if (environmentId) {
+      void previewBridge?.clearCookies(environmentId, id).catch(() => undefined);
+      void previewBridge?.clearCache(environmentId, id).catch(() => undefined);
+    }
+    updateSettings({
+      browserProfiles: userProfiles.filter((profile) => profile.id !== id),
+      // Reassign the default rather than leaving it pointing at nothing.
+      ...(defaultProfileId === id ? { browserDefaultProfileId: DEFAULT_BROWSER_PROFILE_ID } : {}),
+    });

@@ -453,11 +476,205 @@ function DesktopOnlyBrowserDefaults({ children }: { readonly children: ReactNode
   );
 }
 
+/**
+ * Create, rename, and remove browser profiles.
+ *
+ * Built-ins render without controls: they are synthesized rather than stored,
+ * so there is nothing to rename and removing them would strand every tab that
+ * opened under them.
+ */
+function BrowserProfilesSetting({ disabled }: { readonly disabled: boolean }) {
+  const userProfiles = useClientSettings((settings) => settings.browserProfiles);
+  const defaultProfileId = useClientSettings((settings) => settings.browserDefaultProfileId);
+  const updateSettings = useUpdatePrimarySettings();
+  const environmentId = usePrimaryEnvironment()?.environmentId;
+  const [profilePendingRemoval, setProfilePendingRemoval] = useState<BrowserProfile | null>(null);
+
+  const addProfile = () => {
+    if (userProfiles.length >= BROWSER_PROFILE_MAX_COUNT) return;
+    const taken = new Set(resolveBrowserProfiles(userProfiles).map((profile) => profile.name));
+    let name = "New profile";
+    for (let index = 2; taken.has(name); index += 1) name = `New profile ${index}`;
+    updateSettings({
+      browserProfiles: [
+        ...userProfiles,
+        { id: `profile-${randomUUID()}`, name, kind: "persistent" as const },
+      ],
+    });
+  };
+
+  const renameProfile = (id: string, next: string) => {
+    const name = next.trim().slice(0, BROWSER_PROFILE_NAME_MAX_LENGTH);
+    if (name === "") return;
+    updateSettings({
+      browserProfiles: userProfiles.map((profile) =>
+        profile.id === id ? { ...profile, name } : profile,
+      ),
+    });
+  };
+
+  const removeProfile = (id: string) => {
+    setProfilePendingRemoval(null);
+    // Drop the partition's data too, otherwise a removed profile's cookies
+    // stay on disk with nothing in the UI pointing at them.
+    if (environmentId) {
+      void previewBridge?.clearCookies(environmentId, id).catch(() => undefined);
+      void previewBridge?.clearCache(environmentId, id).catch(() => undefined);
+    }
+    updateSettings({
+      browserProfiles: userProfiles.filter((profile) => profile.id !== id),
+      // Reassign the default rather than leaving it pointing at nothing.
+      ...(defaultProfileId === id ? { browserDefaultProfileId: DEFAULT_BROWSER_PROFILE_ID } : {}),
+    });
+  };
+
+  return (
+    <SettingsRow
+      {...searchableSetting("browser-profiles")}
+      description="Each profile keeps its own cookies and logins, so a tab opened under one can't see another's. Incognito discards everything when the app closes."
+      control={
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={disabled || userProfiles.length >= BROWSER_PROFILE_MAX_COUNT}
+          onClick={addProfile}
+        >
+          <PlusIcon />
+          Add profile
+        </Button>
+      }
+    >
+      <div className="mt-1 space-y-1">
+        {resolveBrowserProfiles(userProfiles).map((profile) => {
+          const builtIn = isBuiltInBrowserProfileId(profile.id);
+          return (
+            <div key={profile.id} className={ITEM_ROW_INNER_CLASSNAME}>

@@ -501,11 +556,297 @@ function DesktopOnlyBrowserDefaults({ children }: { readonly children: ReactNode
   );
 }
 
+/**
+ * Create, rename, and remove browser profiles.
+ *
+ * Built-ins render without controls: they are synthesized rather than stored,
+ * so there is nothing to rename and removing them would strand every tab that
+ * opened under them.
+ */
+function BrowserProfilesSetting({ disabled }: { readonly disabled: boolean }) {
+  const userProfiles = useClientSettings((settings) => settings.browserProfiles);
+  const settingsHydrated = useClientSettingsHydrated();
+  const updateSettings = useUpdatePrimarySettings();
+  const { environments, isReady: environmentsReady } = useEnvironments();
+  const [profilePendingRemoval, setProfilePendingRemoval] = useState<BrowserProfile | null>(null);
+  const [profileRemovalError, setProfileRemovalError] = useState<string | null>(null);
+  const [profileRemovalInFlight, setProfileRemovalInFlight] = useState(false);
+  const removalAvailable = browserProfileRemovalAvailable(
+    previewBridge !== null,
+    environmentsReady,
+    environments.length,
+  );
+  const profileWritesDisabled = disabled || !settingsHydrated;
+
+  const addProfile = () => {
+    if (!settingsHydrated) return;
+    const currentProfiles = getClientSettings().browserProfiles;
+    if (currentProfiles.length >= BROWSER_PROFILE_MAX_COUNT) return;
+    const taken = new Set(resolveBrowserProfiles(currentProfiles).map((profile) => profile.name));
+    let name = "New profile";
+    for (let index = 2; taken.has(name); index += 1) name = `New profile ${index}`;
+    updateSettings({
+      browserProfiles: [
+        ...currentProfiles,
+        { id: `profile-${randomUUID()}`, name, kind: "persistent" as const },
+      ],
+    });
+  };
+
+  const renameProfile = (id: string, next: string) => {
+    if (!settingsHydrated) return;
+    const name = next.trim().slice(0, BROWSER_PROFILE_NAME_MAX_LENGTH);
+    if (name === "") return;
+    const currentProfiles = getClientSettings().browserProfiles;
+    updateSettings({
+      browserProfiles: currentProfiles.map((profile) =>
+        profile.id === id ? { ...profile, name } : profile,
+      ),
+    });
+  };
+
+  const removeProfile = async (id: string) => {
+    if (!settingsHydrated) return;
+    if (!removalAvailable) {
+      setProfileRemovalError("Connect to an environment before removing this profile.");
+      return;
+    }
+    setProfileRemovalError(null);
+    setProfileRemovalInFlight(true);
+    // Drop the partition's data too, otherwise a removed profile's cookies
+    // stay on disk with nothing in the UI pointing at them.
+    try {
+      await clearBrowserProfileData(
+        previewBridge,
+        environmentsReady ? environments.map((environment) => environment.environmentId) : [],
+        id,
+      );
+    } catch {
+      setProfileRemovalError("Profile data could not be deleted. Try again.");
+      setProfileRemovalInFlight(false);
+      return;
+    }
+    const currentSettings = getClientSettings();
+    updateSettings({
+      browserProfiles: currentSettings.browserProfiles.filter((profile) => profile.id !== id),
+      // Reassign the default rather than leaving it pointing at nothing.
+      ...(currentSettings.browserDefaultProfileId === id
+        ? { browserDefaultProfileId: DEFAULT_BROWSER_PROFILE_ID }
+        : {}),
+    });
+    setProfileRemovalInFlight(false);
+    setProfilePendingRemoval(null);
+  };
+
+  return (
+    <SettingsRow
+      {...searchableSetting("browser-profiles")}
+      description="Each profile keeps its own cookies and logins, so a tab opened under one can't see another's. Incognito discards everything when the app closes."
+      control={
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={profileWritesDisabled || userProfiles.length >= BROWSER_PROFILE_MAX_COUNT}
+          onClick={addProfile}
+        >
+          <PlusIcon />
+          Add profile
+        </Button>
+      }
+    >
+      {/*
+        Each profile is its own bounded row, and the list carries the bottom
+        spacing `SettingsRow` leaves to its children (`pt-3 pb-1`). Bare rows
+        stack on narrow viewports with a larger gap inside a row than between
+        rows, which reads as the remove button belonging to the profile below.
+      */}
+      <div className="mt-2 space-y-1 pb-2">
+        {resolveBrowserProfiles(userProfiles).map((profile) => {
+          const builtIn = isBuiltInBrowserProfileId(profile.id);
+          return (
+            <div
+              key={profile.id}
+              className={cn(
+                ITEM_ROW_INNER_CLASSNAME,
+                "rounded-lg border border-border/60 px-3 py-2",
+              )}
+            >
+              {builtIn ? (
+                // Dimmed here rather than on the list, which is the only
+                // content in the row without a disabled treatment of its own:
+                // a wrapper-level dim would stack with the rename field's and
+                // the remove button's, landing them near 0.41 while every
+                // other disabled control in the block sits at 0.64.
+                <span
+                  className={cn(
+                    "flex min-w-0 items-center gap-2 text-sm text-foreground",
+                    profileWritesDisabled && "opacity-64",
+                  )}
+                >
+                  {profile.name}
+                  <Badge variant="outline">
+                    {profile.kind === "incognito" ? "Ephemeral" : "Built-in"}
+                  </Badge>
+                </span>
+              ) : (
+                <DraftInput
+                  nativeInput
+                  size="sm"
+                  className="w-full sm:w-64"
+                  aria-label={`Rename ${profile.name}`}
+                  disabled={profileWritesDisabled}
+                  maxLength={BROWSER_PROFILE_NAME_MAX_LENGTH}
+                  value={profile.name}
+                  onCommit={(next) => renameProfile(profile.id, next)}
+                />
+              )}
+              {builtIn ? null : (
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <span className="inline-flex" {...(!removalAvailable ? { tabIndex: 0 } : {})}>
+                        <Button
+                          size="icon-sm"
+                          variant="ghost-muted"
+                          disabled={profileWritesDisabled || !removalAvailable}
+                          aria-label={`Remove ${profile.name}`}
+                          onClick={() => setProfilePendingRemoval(profile)}
+                        >
+                          <Trash2Icon />
+                        </Button>
+                      </span>
+                    }
+                  />
+                  <TooltipPopup side="top">
+                    {removalAvailable
+                      ? "Remove profile and its data"
+                      : "Connect to an environment to remove this profile"}
+                  </TooltipPopup>
+                </Tooltip>
+              )}
+            </div>
+          );
+        })}
+      </div>
+      <AlertDialog
+        open={profilePendingRemoval !== null}
+        onOpenChange={(open) => {
+          if (!open && !profileRemovalInFlight) {
+            setProfilePendingRemoval(null);
+            setProfileRemovalError(null);
+          }
+        }}
+      >
+        <AlertDialogPopup>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Remove “{profilePendingRemoval?.name}”?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Its cookies, logins, and cache are deleted with it. Tabs already open in this profile
+              stay open until you close them.
+            </AlertDialogDescription>
+            {profileRemovalError ? (
+              <p aria-live="polite" className="text-sm text-destructive">
+                {profileRemovalError}
+              </p>
+            ) : null}
+            {!removalAvailable ? (
+              <p className="text-sm text-muted-foreground">
+                Connect to an environment to remove this profile and its data.
+              </p>
+            ) : null}
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogClose
+              disabled={profileRemovalInFlight}
+              render={<Button variant="outline" disabled={profileRemovalInFlight} />}
+            >
+              Cancel
+            </AlertDialogClose>
+            <Button
+              variant="destructive"
+              disabled={profileRemovalInFlight || !settingsHydrated || !removalAvailable}
+              onClick={() => {
+                if (profilePendingRemoval && settingsHydrated && removalAvailable) {
+                  void removeProfile(profilePendingRemoval.id);
+                }
+              }}
+            >
+              {profileRemovalInFlight ? "Removing…" : "Remove profile"}
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogPopup>
+      </AlertDialog>
+    </SettingsRow>
+  );
+}
+
+function BrowserDefaultProfileSetting({ disabled }: { readonly disabled: boolean }) {
+  const userProfiles = useClientSettings((settings) => settings.browserProfiles);
+  const defaultProfileId = useClientSettings((settings) => settings.browserDefaultProfileId);
+  const settingsHydrated = useClientSettingsHydrated();
+  const updateSettings = useUpdatePrimarySettings();
+  const profileWritesDisabled = disabled || !settingsHydrated;
+  // Incognito is deliberately absent: as a default it would open every tab
+  // into storage that is discarded on close.
+  const profiles = resolveBrowserProfiles(userProfiles).filter(
+    (profile) => profile.kind !== "incognito",
+  );
+  const selected = findBrowserProfile(profiles, defaultProfileId) ?? profiles[0];
+
+  return (
+    <SettingsRow
+      {...searchableSetting("browser-default-profile")}
+      description="Profile new browser tabs open under, including tabs an agent opens."
+      resetAction={
+        !profileWritesDisabled && defaultProfileId !== DEFAULT_BROWSER_PROFILE_ID ? (
+          <SettingResetButton
+            label="default browser profile"
+            onClick={() => {
+              if (settingsHydrated) {
+                updateSettings({ browserDefaultProfileId: DEFAULT_BROWSER_PROFILE_ID });
+              }
+            }}
+          />
+        ) : null
+      }
+      control={
+        <Select
+          disabled={profileWritesDisabled}
+          value={selected?.id ?? DEFAULT_BROWSER_PROFILE_ID}
+          onValueChange={(value) => {
+            if (settingsHydrated && value !== null) {
+              updateSettings({ browserDefaultProfileId: value });
+            }
+          }}
+        >
+          <SelectTrigger size="sm" className="w-full sm:w-44" aria-label="Default browser profile">
+            <SelectValue>{selected?.name ?? "Default"}</SelectValue>
+          </SelectTrigger>
+          {/*
+            Capped and truncated like the tab menu's profile list: names are
+            user-supplied and run to 48 characters, which would otherwise
+            widen the popup to fit the longest one.
+          */}
+          <SelectPopup align="end" alignItemWithTrigger={false} className="max-w-64">
+            {profiles.map((profile) => (
+              <SelectItem hideIndicator key={profile.id} value={profile.id}>
+                <span className="min-w-0 truncate">{profile.name}</span>

@@ -683,9 +693,29 @@ 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 ? (
+            // Capped: profile names run to 48 characters, and an unbounded
+            // badge in this row takes its width from the URL input, the only
+            // flexible element in the compact chrome. The cap sits on the
+            // badge and the truncation on an inner span, because `Badge` is an
+            // `inline-flex` with `whitespace-nowrap` — `text-overflow` never
+            // reaches a bare text node inside it, so the name would be cut off
+            // at both ends with no ellipsis.
+            <Badge variant="outline" className="max-w-28 shrink-0" title={activeProfile.name}>

@@ -196,33 +199,77 @@ export const closePictureInPicture = tabMethod(
 
 export const clearCookies = DesktopIpc.makeIpcMethod({
   channel: IpcChannels.PREVIEW_CLEAR_COOKIES_CHANNEL,
-  payload: Schema.Void,
+  payload: DesktopPreviewClearDataInputSchema,
   result: Schema.Void,
-  handler: Effect.fn("desktop.ipc.preview.clearCookies")(function* () {
+  handler: Effect.fn("desktop.ipc.preview.clearCookies")(function* ({ environmentId, profileId }) {
     const manager = yield* PreviewManager.PreviewManager;
-    yield* manager.clearCookies();
+    yield* manager.clearCookies(yield* resolveClearPartitions(manager, environmentId, profileId));
   }),
 });
 
 export const clearCache = DesktopIpc.makeIpcMethod({
   channel: IpcChannels.PREVIEW_CLEAR_CACHE_CHANNEL,
-  payload: Schema.Void,
+  payload: DesktopPreviewClearDataInputSchema,
   result: Schema.Void,
-  handler: Effect.fn("desktop.ipc.preview.clearCache")(function* () {
+  handler: Effect.fn("desktop.ipc.preview.clearCache")(function* ({ environmentId, profileId }) {
     const manager = yield* PreviewManager.PreviewManager;
-    yield* manager.clearCache();
+    yield* manager.clearCache(yield* resolveClearPartitions(manager, environmentId, profileId));
   }),
 });
 
+/**
+ * Partition scope for an (environment, profile) pair.
+ *
+ * The default profile keeps the bare environment id it used before profiles
+ * existed, so upgrading does not strand anyone's existing logins in an
+ * orphaned partition. Incognito derives a non-persistent partition.
+ */
+function resolvePartitionScope(
+  environmentId: string,
+  profileId: string | undefined,
+): { readonly scope: string; readonly persistent: boolean } {
+  if (profileId === undefined || profileId === DEFAULT_BROWSER_PROFILE_ID) {
+    return { scope: environmentId, persistent: true };
+  }
+  return {
+    scope: `${environmentId}::${profileId}`,

@@ -43,7 +45,15 @@ export async function openUrlInPreview<E>(input: {
 }): Promise<AtomCommandResult<void, E>> {
   const result = await input.openPreview({
     environmentId: input.threadRef.environmentId,
-    input: { threadId: input.threadRef.threadId, url: input.url },
+    input: {
+      threadId: input.threadRef.threadId,
+      url: input.url,
+      // Built here rather than via `openPreviewSession` because this path
+      // maps the result differently, so the configured defaults have to be
+      // applied explicitly or file/link opens would ignore them.
+      viewport: browserDefaultOpenViewport(),

@@ -45,32 +45,51 @@ type PreviewConfigBridge = Pick<DesktopPreviewBridge, "getPreviewConfig">;
 
 export const loadPreviewWebviewConfig = (
   environmentId: EnvironmentId,
+  profileId?: string,
   bridge: PreviewConfigBridge | null = previewBridge,
 ): Effect.Effect<DesktopPreviewWebviewConfig, PreviewWebviewConfigError> => {
   if (bridge === null) {
     return Effect.fail(new PreviewWebviewBridgeUnavailableError({ environmentId }));
   }
 
   return Effect.tryPromise({
-    try: () => bridge.getPreviewConfig(environmentId),
+    try: () => bridge.getPreviewConfig(environmentId, profileId),
     catch: (cause) => new PreviewWebviewConfigLoadError({ environmentId, cause }),
   });
 };
 
-const previewWebviewConfigAtom = Atom.family((environmentId: EnvironmentId) =>
-  Atom.make(loadPreviewWebviewConfig(environmentId)).pipe(
+/**
+ * `Atom.family` keys on its argument, so the environment and profile are
+ * folded into one string: passing an object would allocate a fresh entry on
+ * every render.
+ */
+const configKey = (environmentId: EnvironmentId, profileId: string | undefined): string =>
+  `${environmentId}\u0000${profileId ?? ""}`;
+
+const parseConfigKey = (key: string): { environmentId: EnvironmentId; profileId?: string } => {
+  const [environmentId = "", profileId = ""] = key.split("\u0000");
+  return {
+    environmentId: environmentId as EnvironmentId,
+    ...(profileId === "" ? {} : { profileId }),
+  };
+};

@@ -453,11 +499,252 @@ function DesktopOnlyBrowserDefaults({ children }: { readonly children: ReactNode
   );
 }
 
+/**
+ * Create, rename, and remove browser profiles.
+ *
+ * Built-ins render without controls: they are synthesized rather than stored,
+ * so there is nothing to rename and removing them would strand every tab that
+ * opened under them.
+ */
+function BrowserProfilesSetting({ disabled }: { readonly disabled: boolean }) {
+  const userProfiles = useClientSettings((settings) => settings.browserProfiles);
+  const updateSettings = useUpdatePrimarySettings();
+  const { environments, isReady: environmentsReady } = useEnvironments();
+  const [profilePendingRemoval, setProfilePendingRemoval] = useState<BrowserProfile | null>(null);
+  const [profileRemovalError, setProfileRemovalError] = useState<string | null>(null);
+  const [profileRemovalInFlight, setProfileRemovalInFlight] = useState(false);
+
+  const addProfile = () => {
+    const currentProfiles = getClientSettings().browserProfiles;
+    if (currentProfiles.length >= BROWSER_PROFILE_MAX_COUNT) return;
+    const taken = new Set(resolveBrowserProfiles(currentProfiles).map((profile) => profile.name));
+    let name = "New profile";
+    for (let index = 2; taken.has(name); index += 1) name = `New profile ${index}`;
+    updateSettings({
+      browserProfiles: [
+        ...currentProfiles,
+        { id: `profile-${randomUUID()}`, name, kind: "persistent" as const },
+      ],
+    });
+  };
+
+  const renameProfile = (id: string, next: string) => {
+    const name = next.trim().slice(0, BROWSER_PROFILE_NAME_MAX_LENGTH);
+    if (name === "") return;
+    const currentProfiles = getClientSettings().browserProfiles;
+    updateSettings({
+      browserProfiles: currentProfiles.map((profile) =>
+        profile.id === id ? { ...profile, name } : profile,
+      ),
+    });
+  };
+
+  const removeProfile = async (id: string) => {
+    setProfileRemovalError(null);
+    setProfileRemovalInFlight(true);
+    // Drop the partition's data too, otherwise a removed profile's cookies
+    // stay on disk with nothing in the UI pointing at them.
+    try {
+      await clearBrowserProfileData(
+        previewBridge,
+        environmentsReady ? environments.map((environment) => environment.environmentId) : [],
+        id,
+      );
+    } catch {
+      setProfileRemovalError("Profile data could not be deleted. Try again.");
+      setProfileRemovalInFlight(false);
+      return;
+    }
+    const currentSettings = getClientSettings();
+    updateSettings({
+      browserProfiles: currentSettings.browserProfiles.filter((profile) => profile.id !== id),
+      // Reassign the default rather than leaving it pointing at nothing.
+      ...(currentSettings.browserDefaultProfileId === id
+        ? { browserDefaultProfileId: DEFAULT_BROWSER_PROFILE_ID }
+        : {}),
+    });
+    setProfileRemovalInFlight(false);
+    setProfilePendingRemoval(null);
+  };
+
+  return (
+    <SettingsRow
+      {...searchableSetting("browser-profiles")}
+      description="Each profile keeps its own cookies and logins, so a tab opened under one can't see another's. Incognito discards everything when the app closes."
+      control={
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={disabled || userProfiles.length >= BROWSER_PROFILE_MAX_COUNT}
+          onClick={addProfile}
+        >
+          <PlusIcon />
+          Add profile
+        </Button>
+      }
+    >
+      {/*
+        Each profile is its own bounded row, and the list carries the bottom
+        spacing `SettingsRow` leaves to its children (`pt-3 pb-1`). Bare rows
+        stack on narrow viewports with a larger gap inside a row than between
+        rows, which reads as the remove button belonging to the profile below.
+      */}
+      <div className="mt-2 space-y-1 pb-2">
+        {resolveBrowserProfiles(userProfiles).map((profile) => {
+          const builtIn = isBuiltInBrowserProfileId(profile.id);
+          return (
+            <div
+              key={profile.id}
+              className={cn(
+                ITEM_ROW_INNER_CLASSNAME,
+                "rounded-lg border border-border/60 px-3 py-2",
+              )}
+            >
+              {builtIn ? (
+                // Dimmed here rather than on the list, which is the only
+                // content in the row without a disabled treatment of its own:
+                // a wrapper-level dim would stack with the rename field's and
+                // the remove button's, landing them near 0.41 while every
+                // other disabled control in the block sits at 0.64.
+                <span
+                  className={cn(
+                    "flex min-w-0 items-center gap-2 text-sm text-foreground",
+                    disabled && "opacity-64",
+                  )}
+                >
+                  {profile.name}
+                  <Badge variant="outline">
+                    {profile.kind === "incognito" ? "Ephemeral" : "Built-in"}
+                  </Badge>
+                </span>
+              ) : (
+                <DraftInput
+                  nativeInput
+                  size="sm"
+                  className="w-full sm:w-64"
+                  aria-label={`Rename ${profile.name}`}
+                  disabled={disabled}
+                  maxLength={BROWSER_PROFILE_NAME_MAX_LENGTH}
+                  value={profile.name}
+                  onCommit={(next) => renameProfile(profile.id, next)}
+                />
+              )}
+              {builtIn ? null : (
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <Button
+                        size="icon-sm"
+                        variant="ghost-muted"
+                        disabled={disabled || !environmentsReady}

@@ -453,11 +476,227 @@ function DesktopOnlyBrowserDefaults({ children }: { readonly children: ReactNode
   );
 }
 
+/**
+ * Create, rename, and remove browser profiles.
+ *
+ * Built-ins render without controls: they are synthesized rather than stored,
+ * so there is nothing to rename and removing them would strand every tab that
+ * opened under them.
+ */
+function BrowserProfilesSetting({ disabled }: { readonly disabled: boolean }) {
+  const userProfiles = useClientSettings((settings) => settings.browserProfiles);
+  const defaultProfileId = useClientSettings((settings) => settings.browserDefaultProfileId);
+  const updateSettings = useUpdatePrimarySettings();
+  const environmentId = usePrimaryEnvironment()?.environmentId;
+  const [profilePendingRemoval, setProfilePendingRemoval] = useState<BrowserProfile | null>(null);
+
+  const addProfile = () => {
+    if (userProfiles.length >= BROWSER_PROFILE_MAX_COUNT) return;
+    const taken = new Set(resolveBrowserProfiles(userProfiles).map((profile) => profile.name));
+    let name = "New profile";
+    for (let index = 2; taken.has(name); index += 1) name = `New profile ${index}`;
+    updateSettings({
+      browserProfiles: [
+        ...userProfiles,
+        { id: `profile-${randomUUID()}`, name, kind: "persistent" as const },
+      ],
+    });
+  };
+
+  const renameProfile = (id: string, next: string) => {
+    const name = next.trim().slice(0, BROWSER_PROFILE_NAME_MAX_LENGTH);
+    if (name === "") return;
+    updateSettings({
+      browserProfiles: userProfiles.map((profile) =>
+        profile.id === id ? { ...profile, name } : profile,
+      ),
+    });
+  };
+
+  const removeProfile = (id: string) => {
+    setProfilePendingRemoval(null);
+    // Drop the partition's data too, otherwise a removed profile's cookies
+    // stay on disk with nothing in the UI pointing at them.
+    if (environmentId) {
+      void previewBridge?.clearCookies(environmentId, id).catch(() => undefined);
+      void previewBridge?.clearCache(environmentId, id).catch(() => undefined);
+    }

@@ -453,11 +476,205 @@ function DesktopOnlyBrowserDefaults({ children }: { readonly children: ReactNode
   );
 }
 
+/**
+ * Create, rename, and remove browser profiles.
+ *
+ * Built-ins render without controls: they are synthesized rather than stored,
+ * so there is nothing to rename and removing them would strand every tab that
+ * opened under them.
+ */
+function BrowserProfilesSetting({ disabled }: { readonly disabled: boolean }) {
+  const userProfiles = useClientSettings((settings) => settings.browserProfiles);
+  const defaultProfileId = useClientSettings((settings) => settings.browserDefaultProfileId);
+  const updateSettings = useUpdatePrimarySettings();
+  const environmentId = usePrimaryEnvironment()?.environmentId;
+  const [profilePendingRemoval, setProfilePendingRemoval] = useState<BrowserProfile | null>(null);
+
+  const addProfile = () => {
+    if (userProfiles.length >= BROWSER_PROFILE_MAX_COUNT) return;
+    const taken = new Set(resolveBrowserProfiles(userProfiles).map((profile) => profile.name));
+    let name = "New profile";
+    for (let index = 2; taken.has(name); index += 1) name = `New profile ${index}`;
+    updateSettings({
+      browserProfiles: [
+        ...userProfiles,
+        { id: `profile-${randomUUID()}`, name, kind: "persistent" as const },
+      ],
+    });
+  };
+
+  const renameProfile = (id: string, next: string) => {
+    const name = next.trim().slice(0, BROWSER_PROFILE_NAME_MAX_LENGTH);
+    if (name === "") return;
+    updateSettings({
+      browserProfiles: userProfiles.map((profile) =>
+        profile.id === id ? { ...profile, name } : profile,
+      ),
+    });
+  };
+
+  const removeProfile = (id: string) => {
+    setProfilePendingRemoval(null);
+    // Drop the partition's data too, otherwise a removed profile's cookies
+    // stay on disk with nothing in the UI pointing at them.
+    if (environmentId) {

@@ -0,0 +1,78 @@
+/**
+ * Browser profiles - named identities for the in-app preview browser.
+ *
+ * Each profile maps to its own Electron session partition, so cookies and
+ * storage are isolated between them: a tab opened under "Work" cannot see
+ * "Personal"'s logins. Profiles are client-local, like the other browser
+ * defaults, because the Chromium guest they configure is desktop-local.
+ *
+ * Two profiles are built in and cannot be edited or removed:
+ * - `default` keeps the partition scope the browser used before profiles
+ *   existed, so upgrading does not sign anyone out.
+ * - `incognito` maps to a non-persistent partition for throwaway sessions.
+ *
+ * @module BrowserProfile
+ */
+import { Schema } from "effect";
+import { TrimmedNonEmptyString } from "./baseSchemas.ts";
+
+export const BROWSER_PROFILE_NAME_MAX_LENGTH = 48;
+export const BROWSER_PROFILE_MAX_COUNT = 24;
+
+export const BrowserProfileId = TrimmedNonEmptyString.check(Schema.isMaxLength(64));
+export type BrowserProfileId = typeof BrowserProfileId.Type;
+
+export const BrowserProfileName = TrimmedNonEmptyString.check(
+  Schema.isMaxLength(BROWSER_PROFILE_NAME_MAX_LENGTH),
+);
+
+/**
+ * `persistent` profiles keep cookies on disk across restarts; `incognito`
+ * uses an in-memory partition that Chromium discards with the process.
+ */
+export const BrowserProfileKind = Schema.Literals(["persistent", "incognito"]);

@@ -453,11 +465,172 @@ function DesktopOnlyBrowserDefaults({ children }: { readonly children: ReactNode
   );
 }
 
+/**
+ * Create, rename, and remove browser profiles.
+ *
+ * Built-ins render without controls: they are synthesized rather than stored,
+ * so there is nothing to rename and removing them would strand every tab that
+ * opened under them.
+ */
+function BrowserProfilesSetting({ disabled }: { readonly disabled: boolean }) {
+  const userProfiles = useClientSettings((settings) => settings.browserProfiles);
+  const defaultProfileId = useClientSettings((settings) => settings.browserDefaultProfileId);
+  const updateSettings = useUpdatePrimarySettings();
+  const environmentId = usePrimaryEnvironment()?.environmentId;
+
+  const addProfile = () => {
+    if (userProfiles.length >= BROWSER_PROFILE_MAX_COUNT) return;
+    const taken = new Set(resolveBrowserProfiles(userProfiles).map((profile) => profile.name));
+    let name = "New profile";
+    for (let index = 2; taken.has(name); index += 1) name = `New profile ${index}`;
+    updateSettings({
+      browserProfiles: [
+        ...userProfiles,
+        { id: `profile-${randomUUID()}`, name, kind: "persistent" as const },
+      ],
+    });
+  };
+
+  const renameProfile = (id: string, next: string) => {
+    const name = next.trim().slice(0, BROWSER_PROFILE_NAME_MAX_LENGTH);
+    if (name === "") return;
+    updateSettings({
+      browserProfiles: userProfiles.map((profile) =>
+        profile.id === id ? { ...profile, name } : profile,
+      ),
+    });
+  };
+
+  const removeProfile = (id: string) => {
+    // Drop the partition's data too, otherwise a removed profile's cookies
+    // stay on disk with nothing in the UI pointing at them.
+    if (environmentId) {
+      void previewBridge?.clearCookies(environmentId, id).catch(() => undefined);
+      void previewBridge?.clearCache(environmentId, id).catch(() => undefined);
+    }
+    updateSettings({
+      browserProfiles: userProfiles.filter((profile) => profile.id !== id),
+      // Reassign the default rather than leaving it pointing at nothing.
+      ...(defaultProfileId === id ? { browserDefaultProfileId: DEFAULT_BROWSER_PROFILE_ID } : {}),
+    });
+  };
+
+  return (
+    <SettingsRow
+      {...searchableSetting("browser-profiles")}
+      description="Each profile keeps its own cookies and logins, so a tab opened under one can't see another's. Incognito discards everything when the app closes."
+      control={
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={disabled || userProfiles.length >= BROWSER_PROFILE_MAX_COUNT}
+          onClick={addProfile}
+        >
+          <PlusIcon />
+          Add profile
+        </Button>
+      }
+    >
+      <div className="mt-1 space-y-1">
+        {resolveBrowserProfiles(userProfiles).map((profile) => {
+          const builtIn = isBuiltInBrowserProfileId(profile.id);
+          return (
+            <div key={profile.id} className={ITEM_ROW_INNER_CLASSNAME}>
+              {builtIn ? (
+                <span className="flex min-w-0 items-center gap-2 text-sm text-foreground">
+                  {profile.name}
+                  <Badge variant="outline">
+                    {profile.kind === "incognito" ? "Ephemeral" : "Built-in"}
+                  </Badge>
+                </span>
+              ) : (
+                <DraftInput
+                  nativeInput
+                  size="sm"
+                  className="w-full sm:w-64"
+                  aria-label={`Rename ${profile.name}`}
+                  disabled={disabled}
+                  maxLength={BROWSER_PROFILE_NAME_MAX_LENGTH}
+                  value={profile.name}
+                  onCommit={(next) => renameProfile(profile.id, next)}
+                />
+              )}
+              {builtIn ? null : (
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <Button
+                        size="icon-sm"
+                        variant="ghost-muted"
+                        disabled={disabled}
+                        aria-label={`Remove ${profile.name}`}
+                        onClick={() => removeProfile(profile.id)}

@@ -695,14 +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>
+                      {/*
+                        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
+                        onClick={() => {
+                          setAddSurfaceMenuOpen(false);
+                          props.onAddBrowser();
+                        }}
+                      >
+                        <Globe2 />
+                        Browser
+                      </MenuSubTrigger>
+                      <MenuSubPopup className="min-w-40">
+                        {browserProfiles.map((profile) => (
+                          <MenuItem
+                            key={profile.id}
+                            onClick={() => props.onAddBrowserInProfile(profile.id)}
+                          >
+                            {profile.name}
+                          </MenuItem>
+                        ))}
+                      </MenuSubPopup>

@@ -453,11 +476,205 @@ function DesktopOnlyBrowserDefaults({ children }: { readonly children: ReactNode
   );
 }
 
+/**
+ * Create, rename, and remove browser profiles.
+ *
+ * Built-ins render without controls: they are synthesized rather than stored,
+ * so there is nothing to rename and removing them would strand every tab that
+ * opened under them.
+ */
+function BrowserProfilesSetting({ disabled }: { readonly disabled: boolean }) {
+  const userProfiles = useClientSettings((settings) => settings.browserProfiles);
+  const defaultProfileId = useClientSettings((settings) => settings.browserDefaultProfileId);
+  const updateSettings = useUpdatePrimarySettings();
+  const environmentId = usePrimaryEnvironment()?.environmentId;
+  const [profilePendingRemoval, setProfilePendingRemoval] = useState<BrowserProfile | null>(null);
+
+  const addProfile = () => {
+    if (userProfiles.length >= BROWSER_PROFILE_MAX_COUNT) return;
+    const taken = new Set(resolveBrowserProfiles(userProfiles).map((profile) => profile.name));
+    let name = "New profile";
+    for (let index = 2; taken.has(name); index += 1) name = `New profile ${index}`;
+    updateSettings({
+      browserProfiles: [
+        ...userProfiles,
+        { id: `profile-${randomUUID()}`, name, kind: "persistent" as const },
+      ],
+    });
+  };
+
+  const renameProfile = (id: string, next: string) => {
+    const name = next.trim().slice(0, BROWSER_PROFILE_NAME_MAX_LENGTH);
+    if (name === "") return;
+    updateSettings({
+      browserProfiles: userProfiles.map((profile) =>
+        profile.id === id ? { ...profile, name } : profile,
+      ),
+    });
+  };
+
+  const removeProfile = (id: string) => {
+    setProfilePendingRemoval(null);
+    // Drop the partition's data too, otherwise a removed profile's cookies
+    // stay on disk with nothing in the UI pointing at them.
+    if (environmentId) {
+      void previewBridge?.clearCookies(environmentId, id).catch(() => undefined);

@@ -909,6 +926,41 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
                 >
                   {addSurfaceActions.map((action) => {
                     const Icon = action.icon;
+                    // Browser collapses into one row: clicking the trigger opens
+                    // the default profile (the common case stays one click),
+                    // while hover or arrow reveals the profiles. The choice
+                    // lives at open time because a tab's profile is fixed then —
+                    // Electron only honours a partition before attach.
+                    if (action.label === "Browser" && action.available) {
+                      return (
+                        <MenuSub key={action.label}>
+                          <MenuSubTrigger
+                            onClick={() => {
+                              setAddSurfaceMenuOpen(false);
+                              action.onClick();
+                            }}
+                          >
+                            <Icon />
+                            {action.label}
+                          </MenuSubTrigger>

@@ -501,11 +556,297 @@ function DesktopOnlyBrowserDefaults({ children }: { readonly children: ReactNode
   );
 }
 
+/**
+ * Create, rename, and remove browser profiles.
+ *
+ * Built-ins render without controls: they are synthesized rather than stored,
+ * so there is nothing to rename and removing them would strand every tab that
+ * opened under them.
+ */
+function BrowserProfilesSetting({ disabled }: { readonly disabled: boolean }) {
+  const userProfiles = useClientSettings((settings) => settings.browserProfiles);
+  const settingsHydrated = useClientSettingsHydrated();
+  const updateSettings = useUpdatePrimarySettings();
+  const { environments, isReady: environmentsReady } = useEnvironments();
+  const [profilePendingRemoval, setProfilePendingRemoval] = useState<BrowserProfile | null>(null);
+  const [profileRemovalError, setProfileRemovalError] = useState<string | null>(null);
+  const [profileRemovalInFlight, setProfileRemovalInFlight] = useState(false);
+  const removalAvailable = browserProfileRemovalAvailable(
+    previewBridge !== null,
+    environmentsReady,
+    environments.length,
+  );
+  const profileWritesDisabled = disabled || !settingsHydrated;
+
+  const addProfile = () => {
+    if (!settingsHydrated) return;
+    const currentProfiles = getClientSettings().browserProfiles;
+    if (currentProfiles.length >= BROWSER_PROFILE_MAX_COUNT) return;
+    const taken = new Set(resolveBrowserProfiles(currentProfiles).map((profile) => profile.name));
+    let name = "New profile";
+    for (let index = 2; taken.has(name); index += 1) name = `New profile ${index}`;
+    updateSettings({
+      browserProfiles: [
+        ...currentProfiles,
+        { id: `profile-${randomUUID()}`, name, kind: "persistent" as const },
+      ],
+    });
+  };
+
+  const renameProfile = (id: string, next: string) => {
+    if (!settingsHydrated) return;
+    const name = next.trim().slice(0, BROWSER_PROFILE_NAME_MAX_LENGTH);
+    if (name === "") return;
+    const currentProfiles = getClientSettings().browserProfiles;
+    updateSettings({
+      browserProfiles: currentProfiles.map((profile) =>
+        profile.id === id ? { ...profile, name } : profile,
+      ),
+    });
+  };
+
+  const removeProfile = async (id: string) => {
+    if (!settingsHydrated) return;
+    if (!removalAvailable) {
+      setProfileRemovalError("Connect to an environment before removing this profile.");
+      return;
+    }
+    setProfileRemovalError(null);
+    setProfileRemovalInFlight(true);
+    // Drop the partition's data too, otherwise a removed profile's cookies
+    // stay on disk with nothing in the UI pointing at them.
+    try {
+      await clearBrowserProfileData(
+        previewBridge,
+        environmentsReady ? environments.map((environment) => environment.environmentId) : [],
+        id,
+      );
+    } catch {
+      setProfileRemovalError("Profile data could not be deleted. Try again.");
+      setProfileRemovalInFlight(false);
+      return;
+    }
+    const currentSettings = getClientSettings();
+    updateSettings({
+      browserProfiles: currentSettings.browserProfiles.filter((profile) => profile.id !== id),
+      // Reassign the default rather than leaving it pointing at nothing.
+      ...(currentSettings.browserDefaultProfileId === id
+        ? { browserDefaultProfileId: DEFAULT_BROWSER_PROFILE_ID }
+        : {}),
+    });
+    setProfileRemovalInFlight(false);
+    setProfilePendingRemoval(null);
+  };
+
+  return (
+    <SettingsRow
+      {...searchableSetting("browser-profiles")}
+      description="Each profile keeps its own cookies and logins, so a tab opened under one can't see another's. Incognito discards everything when the app closes."
+      control={
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={profileWritesDisabled || userProfiles.length >= BROWSER_PROFILE_MAX_COUNT}
+          onClick={addProfile}
+        >
+          <PlusIcon />
+          Add profile
+        </Button>
+      }
+    >
+      {/*
+        Each profile is its own bounded row, and the list carries the bottom
+        spacing `SettingsRow` leaves to its children (`pt-3 pb-1`). Bare rows
+        stack on narrow viewports with a larger gap inside a row than between
+        rows, which reads as the remove button belonging to the profile below.
+      */}
+      <div className="mt-2 space-y-1 pb-2">
+        {resolveBrowserProfiles(userProfiles).map((profile) => {
+          const builtIn = isBuiltInBrowserProfileId(profile.id);
+          return (
+            <div
+              key={profile.id}
+              className={cn(
+                ITEM_ROW_INNER_CLASSNAME,
+                "rounded-lg border border-border/60 px-3 py-2",
+              )}
+            >
+              {builtIn ? (
+                // Dimmed here rather than on the list, which is the only
+                // content in the row without a disabled treatment of its own:
+                // a wrapper-level dim would stack with the rename field's and
+                // the remove button's, landing them near 0.41 while every
+                // other disabled control in the block sits at 0.64.
+                <span
+                  className={cn(
+                    "flex min-w-0 items-center gap-2 text-sm text-foreground",
+                    profileWritesDisabled && "opacity-64",
+                  )}
+                >
+                  {profile.name}
+                  <Badge variant="outline">
+                    {profile.kind === "incognito" ? "Ephemeral" : "Built-in"}
+                  </Badge>
+                </span>
+              ) : (
+                <DraftInput
+                  nativeInput
+                  size="sm"
+                  className="w-full sm:w-64"
+                  aria-label={`Rename ${profile.name}`}
+                  disabled={profileWritesDisabled}
+                  maxLength={BROWSER_PROFILE_NAME_MAX_LENGTH}
+                  value={profile.name}
+                  onCommit={(next) => renameProfile(profile.id, next)}
+                />
+              )}
+              {builtIn ? null : (
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <span className="inline-flex" {...(!removalAvailable ? { tabIndex: 0 } : {})}>
+                        <Button
+                          size="icon-sm"
+                          variant="ghost-muted"
+                          disabled={profileWritesDisabled || !removalAvailable}
+                          aria-label={`Remove ${profile.name}`}
+                          onClick={() => setProfilePendingRemoval(profile)}
+                        >
+                          <Trash2Icon />
+                        </Button>
+                      </span>
+                    }
+                  />
+                  <TooltipPopup side="top">
+                    {removalAvailable
+                      ? "Remove profile and its data"
+                      : "Connect to an environment to remove this profile"}
+                  </TooltipPopup>
+                </Tooltip>
+              )}
+            </div>
+          );
+        })}
+      </div>
+      <AlertDialog
+        open={profilePendingRemoval !== null}
+        onOpenChange={(open) => {
+          if (!open && !profileRemovalInFlight) {
+            setProfilePendingRemoval(null);
+            setProfileRemovalError(null);
+          }
+        }}
+      >
+        <AlertDialogPopup>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Remove “{profilePendingRemoval?.name}”?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Its cookies, logins, and cache are deleted with it. Tabs already open in this profile
+              stay open until you close them.
+            </AlertDialogDescription>
+            {profileRemovalError ? (
+              <p aria-live="polite" className="text-sm text-destructive">
+                {profileRemovalError}
+              </p>
+            ) : null}
+            {!removalAvailable ? (
+              <p className="text-sm text-muted-foreground">
+                Connect to an environment to remove this profile and its data.
+              </p>
+            ) : null}
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogClose
+              disabled={profileRemovalInFlight}
+              render={<Button variant="outline" disabled={profileRemovalInFlight} />}
+            >
+              Cancel
+            </AlertDialogClose>
+            <Button
+              variant="destructive"
+              disabled={profileRemovalInFlight || !settingsHydrated || !removalAvailable}
+              onClick={() => {
+                if (profilePendingRemoval && settingsHydrated && removalAvailable) {
+                  void removeProfile(profilePendingRemoval.id);
+                }
+              }}
+            >
+              {profileRemovalInFlight ? "Removing…" : "Remove profile"}
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogPopup>
+      </AlertDialog>
+    </SettingsRow>
+  );
+}
+
+function BrowserDefaultProfileSetting({ disabled }: { readonly disabled: boolean }) {
+  const userProfiles = useClientSettings((settings) => settings.browserProfiles);
+  const defaultProfileId = useClientSettings((settings) => settings.browserDefaultProfileId);
+  const settingsHydrated = useClientSettingsHydrated();
+  const updateSettings = useUpdatePrimarySettings();
+  const profileWritesDisabled = disabled || !settingsHydrated;
+  // Incognito is deliberately absent: as a default it would open every tab
+  // into storage that is discarded on close.
+  const profiles = resolveBrowserProfiles(userProfiles).filter(
+    (profile) => profile.kind !== "incognito",
+  );
+  const selected = findBrowserProfile(profiles, defaultProfileId) ?? profiles[0];
+
+  return (
+    <SettingsRow
+      {...searchableSetting("browser-default-profile")}
+      description="Profile new browser tabs open under, including tabs an agent opens."
+      resetAction={
+        !profileWritesDisabled && defaultProfileId !== DEFAULT_BROWSER_PROFILE_ID ? (
+          <SettingResetButton
+            label="default browser profile"
+            onClick={() => {
+              if (settingsHydrated) {
+                updateSettings({ browserDefaultProfileId: DEFAULT_BROWSER_PROFILE_ID });
+              }
+            }}
+          />
+        ) : null
+      }
+      control={
+        <Select
+          disabled={profileWritesDisabled}
+          value={selected?.id ?? DEFAULT_BROWSER_PROFILE_ID}
+          onValueChange={(value) => {
+            if (settingsHydrated && value !== null) {
+              updateSettings({ browserDefaultProfileId: value });
+            }
+          }}
+        >
+          <SelectTrigger size="sm" className="w-full sm:w-44" aria-label="Default browser profile">
+            <SelectValue>{selected?.name ?? "Default"}</SelectValue>
+          </SelectTrigger>
+          {/*
+            Capped and truncated like the tab menu's profile list: names are
+            user-supplied and run to 48 characters, which would otherwise
+            widen the popup to fit the longest one.
+          */}
+          <SelectPopup align="end" alignItemWithTrigger={false} className="max-w-64">

@@ -235,7 +235,11 @@ function MenuSubTrigger({
   return (
     <MenuPrimitive.SubmenuTrigger
       className={cn(
-        "flex min-h-8 items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-popup-open:bg-accent data-inset:ps-8 data-highlighted:text-accent-foreground data-popup-open:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none",
+        // Leading-icon treatment matches `MenuItem`: a sub-trigger sits in the
+        // same column as the items around it, so its icon has to align and dim
+        // with theirs. Scoped to the first svg because the chevron below is
+        // also a direct child, and `-mx-0.5` would override its `-me-0.5`.
+        "[&>svg:first-of-type]:-mx-0.5 flex min-h-8 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:cursor-not-allowed data-disabled:pointer-events-none data-highlighted:bg-accent data-popup-open:bg-accent data-inset:ps-8 data-highlighted:text-accent-foreground data-popup-open:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&>svg:first-of-type:not([class*='opacity-'])]:opacity-80 [&_svg]:pointer-events-none [&>svg]:shrink-0",

@@ -43,7 +45,15 @@ export async function openUrlInPreview<E>(input: {
 }): Promise<AtomCommandResult<void, E>> {
   const result = await input.openPreview({
     environmentId: input.threadRef.environmentId,
-    input: { threadId: input.threadRef.threadId, url: input.url },
+    input: {
+      threadId: input.threadRef.threadId,
+      url: input.url,
+      // Built here rather than via `openPreviewSession` because this path
+      // maps the result differently, so the configured defaults have to be
+      // applied explicitly or file/link opens would ignore them.
+      viewport: browserDefaultOpenViewport(),
+      profileId: browserDefaultOpenProfileId(),
+    },

@@ -177,12 +193,27 @@ export function PreviewMoreMenu({
           </span>
         </MenuItem>
         <MenuSeparator />
-        <MenuItem onClick={() => void bridge.clearCookies().catch(() => undefined)}>
-          Clear cookies
-        </MenuItem>
-        <MenuItem onClick={() => void bridge.clearCache().catch(() => undefined)}>
-          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>

@@ -501,11 +556,292 @@ function DesktopOnlyBrowserDefaults({ children }: { readonly children: ReactNode
   );
 }
 
+/**
+ * Create, rename, and remove browser profiles.
+ *
+ * Built-ins render without controls: they are synthesized rather than stored,
+ * so there is nothing to rename and removing them would strand every tab that
+ * opened under them.
+ */
+function BrowserProfilesSetting({ disabled }: { readonly disabled: boolean }) {
+  const userProfiles = useClientSettings((settings) => settings.browserProfiles);
+  const settingsHydrated = useClientSettingsHydrated();
+  const updateSettings = useUpdatePrimarySettings();
+  const { environments, isReady: environmentsReady } = useEnvironments();
+  const [profilePendingRemoval, setProfilePendingRemoval] = useState<BrowserProfile | null>(null);
+  const [profileRemovalError, setProfileRemovalError] = useState<string | null>(null);
+  const [profileRemovalInFlight, setProfileRemovalInFlight] = useState(false);
+  const removalAvailable = browserProfileRemovalAvailable(
+    previewBridge !== null,
+    environmentsReady,
+    environments.length,
+  );
+  const profileWritesDisabled = disabled || !settingsHydrated;
+
+  const addProfile = () => {
+    if (!settingsHydrated) return;
+    const currentProfiles = getClientSettings().browserProfiles;
+    if (currentProfiles.length >= BROWSER_PROFILE_MAX_COUNT) return;
+    const taken = new Set(resolveBrowserProfiles(currentProfiles).map((profile) => profile.name));
+    let name = "New profile";
+    for (let index = 2; taken.has(name); index += 1) name = `New profile ${index}`;
+    updateSettings({
+      browserProfiles: [
+        ...currentProfiles,
+        { id: `profile-${randomUUID()}`, name, kind: "persistent" as const },
+      ],
+    });
+  };
+
+  const renameProfile = (id: string, next: string) => {
+    if (!settingsHydrated) return;
+    const name = next.trim().slice(0, BROWSER_PROFILE_NAME_MAX_LENGTH);
+    if (name === "") return;
+    const currentProfiles = getClientSettings().browserProfiles;
+    updateSettings({
+      browserProfiles: currentProfiles.map((profile) =>
+        profile.id === id ? { ...profile, name } : profile,
+      ),
+    });
+  };
+
+  const removeProfile = async (id: string) => {
+    if (!settingsHydrated) return;
+    if (!removalAvailable) {
+      setProfileRemovalError("Connect to an environment before removing this profile.");
+      return;
+    }
+    setProfileRemovalError(null);
+    setProfileRemovalInFlight(true);
+    // Drop the partition's data too, otherwise a removed profile's cookies
+    // stay on disk with nothing in the UI pointing at them.
+    try {
+      await clearBrowserProfileData(
+        previewBridge,
+        environmentsReady ? environments.map((environment) => environment.environmentId) : [],
+        id,
+      );
+    } catch {
+      setProfileRemovalError("Profile data could not be deleted. Try again.");
+      setProfileRemovalInFlight(false);
+      return;
+    }
+    const currentSettings = getClientSettings();
+    updateSettings({
+      browserProfiles: currentSettings.browserProfiles.filter((profile) => profile.id !== id),
+      // Reassign the default rather than leaving it pointing at nothing.
+      ...(currentSettings.browserDefaultProfileId === id
+        ? { browserDefaultProfileId: DEFAULT_BROWSER_PROFILE_ID }
+        : {}),
+    });
+    setProfileRemovalInFlight(false);
+    setProfilePendingRemoval(null);
+  };
+
+  return (
+    <SettingsRow
+      {...searchableSetting("browser-profiles")}
+      description="Each profile keeps its own cookies and logins, so a tab opened under one can't see another's. Incognito discards everything when the app closes."
+      control={
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={profileWritesDisabled || userProfiles.length >= BROWSER_PROFILE_MAX_COUNT}
+          onClick={addProfile}
+        >
+          <PlusIcon />
+          Add profile
+        </Button>
+      }
+    >
+      {/*
+        Each profile is its own bounded row, and the list carries the bottom
+        spacing `SettingsRow` leaves to its children (`pt-3 pb-1`). Bare rows
+        stack on narrow viewports with a larger gap inside a row than between
+        rows, which reads as the remove button belonging to the profile below.
+      */}
+      <div className="mt-2 space-y-1 pb-2">
+        {resolveBrowserProfiles(userProfiles).map((profile) => {
+          const builtIn = isBuiltInBrowserProfileId(profile.id);
+          return (
+            <div
+              key={profile.id}
+              className={cn(
+                ITEM_ROW_INNER_CLASSNAME,
+                "rounded-lg border border-border/60 px-3 py-2",
+              )}
+            >
+              {builtIn ? (
+                // Dimmed here rather than on the list, which is the only
+                // content in the row without a disabled treatment of its own:
+                // a wrapper-level dim would stack with the rename field's and
+                // the remove button's, landing them near 0.41 while every
+                // other disabled control in the block sits at 0.64.
+                <span
+                  className={cn(
+                    "flex min-w-0 items-center gap-2 text-sm text-foreground",
+                    profileWritesDisabled && "opacity-64",
+                  )}
+                >
+                  {profile.name}
+                  <Badge variant="outline">
+                    {profile.kind === "incognito" ? "Ephemeral" : "Built-in"}
+                  </Badge>
+                </span>
+              ) : (
+                <DraftInput
+                  nativeInput
+                  size="sm"
+                  className="w-full sm:w-64"
+                  aria-label={`Rename ${profile.name}`}
+                  disabled={profileWritesDisabled}
+                  maxLength={BROWSER_PROFILE_NAME_MAX_LENGTH}
+                  value={profile.name}
+                  onCommit={(next) => renameProfile(profile.id, next)}
+                />
+              )}
+              {builtIn ? null : (
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <span className="inline-flex" {...(!removalAvailable ? { tabIndex: 0 } : {})}>
+                        <Button
+                          size="icon-sm"
+                          variant="ghost-muted"
+                          disabled={profileWritesDisabled || !removalAvailable}
+                          aria-label={`Remove ${profile.name}`}
+                          onClick={() => setProfilePendingRemoval(profile)}
+                        >
+                          <Trash2Icon />
+                        </Button>
+                      </span>
+                    }
+                  />
+                  <TooltipPopup side="top">
+                    {removalAvailable
+                      ? "Remove profile and its data"
+                      : "Connect to an environment to remove this profile"}
+                  </TooltipPopup>
+                </Tooltip>
+              )}
+            </div>
+          );
+        })}
+      </div>
+      <AlertDialog
+        open={profilePendingRemoval !== null}
+        onOpenChange={(open) => {
+          if (!open && !profileRemovalInFlight) {
+            setProfilePendingRemoval(null);
+            setProfileRemovalError(null);
+          }
+        }}
+      >
+        <AlertDialogPopup>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Remove “{profilePendingRemoval?.name}”?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Its cookies, logins, and cache are deleted with it. Tabs already open in this profile
+              stay open until you close them.
+            </AlertDialogDescription>
+            {profileRemovalError ? (
+              <p aria-live="polite" className="text-sm text-destructive">
+                {profileRemovalError}
+              </p>
+            ) : null}
+            {!removalAvailable ? (
+              <p className="text-sm text-muted-foreground">
+                Connect to an environment to remove this profile and its data.
+              </p>
+            ) : null}
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogClose
+              disabled={profileRemovalInFlight}
+              render={<Button variant="outline" disabled={profileRemovalInFlight} />}
+            >
+              Cancel
+            </AlertDialogClose>
+            <Button
+              variant="destructive"
+              disabled={profileRemovalInFlight || !settingsHydrated || !removalAvailable}
+              onClick={() => {
+                if (profilePendingRemoval && settingsHydrated && removalAvailable) {
+                  void removeProfile(profilePendingRemoval.id);
+                }
+              }}
+            >
+              {profileRemovalInFlight ? "Removing…" : "Remove profile"}
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogPopup>
+      </AlertDialog>
+    </SettingsRow>
+  );
+}
+
+function BrowserDefaultProfileSetting({ disabled }: { readonly disabled: boolean }) {
+  const userProfiles = useClientSettings((settings) => settings.browserProfiles);
+  const defaultProfileId = useClientSettings((settings) => settings.browserDefaultProfileId);
+  const settingsHydrated = useClientSettingsHydrated();
+  const updateSettings = useUpdatePrimarySettings();
+  const profileWritesDisabled = disabled || !settingsHydrated;
+  // Incognito is deliberately absent: as a default it would open every tab
+  // into storage that is discarded on close.
+  const profiles = resolveBrowserProfiles(userProfiles).filter(
+    (profile) => profile.kind !== "incognito",
+  );
+  const selected = findBrowserProfile(profiles, defaultProfileId) ?? profiles[0];
+
+  return (
+    <SettingsRow
+      {...searchableSetting("browser-default-profile")}
+      description="Profile new browser tabs open under, including tabs an agent opens."
+      resetAction={
+        !profileWritesDisabled && defaultProfileId !== DEFAULT_BROWSER_PROFILE_ID ? (
+          <SettingResetButton
+            label="default browser profile"
+            onClick={() => {
+              if (settingsHydrated) {
+                updateSettings({ browserDefaultProfileId: DEFAULT_BROWSER_PROFILE_ID });
+              }
+            }}
+          />
+        ) : null
+      }
+      control={
+        <Select
+          disabled={profileWritesDisabled}
+          value={selected?.id ?? DEFAULT_BROWSER_PROFILE_ID}
+          onValueChange={(value) => {
+            if (settingsHydrated && value !== null) {
+              updateSettings({ browserDefaultProfileId: value });
+            }
+          }}
+        >
+          <SelectTrigger size="sm" className="w-full sm:w-44" aria-label="Default browser profile">
+            <SelectValue>{selected?.name ?? "Default"}</SelectValue>
+          </SelectTrigger>
+          <SelectPopup align="end" alignItemWithTrigger={false}>
+            {profiles.map((profile) => (
+              <SelectItem hideIndicator key={profile.id} value={profile.id}>
+                {profile.name}
+              </SelectItem>
+            ))}
+          </SelectPopup>