From ea8d1edbbf0d65179b97fc15c73759009d1c3463 Mon Sep 17 00:00:00 2001
From: Vojta Bartos <vojtech.b@posthog.com>
Date: Wed, 6 May 2026 12:11:02 +0200
Subject: [PATCH] chore(code): merge environments + cloud environments settings
 into one page

Combine the two sidebar entries into a single Environments page with a
SegmentedControl for switching between Local and Cloud. Adds shared intro
copy framing what an environment is, and sharper per-segment copy. Hides
the page chrome (title + tabs) when the form is open via a new formMode
flag in the settings store. Cloud form gets a Back to environments
button and matching header styling.

Generated-By: PostHog Code
Task-Id: f97e9506-0ae1-4d8a-aa7c-fc1fea276f87
---
 .../settings/components/SettingsDialog.tsx    |  47 +++---
 .../CloudEnvironmentsSettings.tsx             |  56 +++++--
 .../environments/EnvironmentsSettings.tsx     | 157 ++++++------------
 .../LocalEnvironmentsSettings.tsx             | 128 ++++++++++++++
 .../environments/ProjectEnvironmentCard.tsx   |   2 +-
 .../settings/stores/settingsDialogStore.ts    |  14 +-
 6 files changed, 256 insertions(+), 148 deletions(-)
 rename apps/code/src/renderer/features/settings/components/sections/{ => environments}/CloudEnvironmentsSettings.tsx (90%)
 create mode 100644 apps/code/src/renderer/features/settings/components/sections/environments/LocalEnvironmentsSettings.tsx

diff --git a/apps/code/src/renderer/features/settings/components/SettingsDialog.tsx b/apps/code/src/renderer/features/settings/components/SettingsDialog.tsx
index 0f4ee8269f..dc35eadc24 100644
--- a/apps/code/src/renderer/features/settings/components/SettingsDialog.tsx
+++ b/apps/code/src/renderer/features/settings/components/SettingsDialog.tsx
@@ -14,13 +14,12 @@ import {
   ArrowLeft,
   ArrowsClockwise,
   CaretRight,
-  Cloud,
   Code,
   CreditCard,
+  Cube,
   Folder,
   GearSix,
   GithubLogo,
-  HardDrives,
   Keyboard,
   Palette,
   SignOut,
@@ -34,7 +33,6 @@ import { type ReactNode, useEffect, useMemo } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { AdvancedSettings } from "./sections/AdvancedSettings";
 import { ClaudeCodeSettings } from "./sections/ClaudeCodeSettings";
-import { CloudEnvironmentsSettings } from "./sections/CloudEnvironmentsSettings";
 import { EnvironmentsSettings } from "./sections/environments/EnvironmentsSettings";
 import { GeneralSettings } from "./sections/GeneralSettings";
 import { GitHubSettings } from "./sections/GitHubSettings";
@@ -61,12 +59,7 @@ const SIDEBAR_ITEMS: SidebarItem[] = [
   {
     id: "environments",
     label: "Environments",
-    icon: <HardDrives size={16} />,
-  },
-  {
-    id: "cloud-environments",
-    label: "Cloud environments",
-    icon: <Cloud size={16} />,
+    icon: <Cube size={16} />,
   },
   {
     id: "personalization",
@@ -92,7 +85,7 @@ const CATEGORY_TITLES: Record<SettingsCategory, string> = {
   workspaces: "Workspaces",
   worktrees: "Worktrees",
   environments: "Environments",
-  "cloud-environments": "Cloud environments",
+  "cloud-environments": "Environments",
   personalization: "Personalization",
   "claude-code": "Claude Code",
   shortcuts: "Shortcuts",
@@ -109,7 +102,7 @@ const CATEGORY_COMPONENTS: Record<SettingsCategory, React.ComponentType> = {
   workspaces: WorkspacesSettings,
   worktrees: WorktreesSettings,
   environments: EnvironmentsSettings,
-  "cloud-environments": CloudEnvironmentsSettings,
+  "cloud-environments": EnvironmentsSettings,
   personalization: PersonalizationSettings,
   "claude-code": ClaudeCodeSettings,
   shortcuts: ShortcutsSettings,
@@ -121,7 +114,7 @@ const CATEGORY_COMPONENTS: Record<SettingsCategory, React.ComponentType> = {
 };
 
 export function SettingsDialog() {
-  const { isOpen, activeCategory, close, setCategory } =
+  const { isOpen, activeCategory, close, setCategory, formMode } =
     useSettingsDialogStore();
   const isAuthenticated = useAuthStateValue(
     (state) => state.status === "authenticated",
@@ -211,14 +204,20 @@ export function SettingsDialog() {
 
         <ScrollArea className="flex-1">
           <div className="flex flex-col pt-2">
-            {sidebarItems.map((item) => (
-              <SidebarNavItem
-                key={item.id}
-                item={item}
-                isActive={activeCategory === item.id}
-                onClick={() => setCategory(item.id)}
-              />
-            ))}
+            {sidebarItems.map((item) => {
+              const isActive =
+                activeCategory === item.id ||
+                (item.id === "environments" &&
+                  activeCategory === "cloud-environments");
+              return (
+                <SidebarNavItem
+                  key={item.id}
+                  item={item}
+                  isActive={isActive}
+                  onClick={() => setCategory(item.id)}
+                />
+              );
+            })}
           </div>
         </ScrollArea>
 
@@ -273,9 +272,11 @@ export function SettingsDialog() {
           <ScrollArea className="h-full w-full">
             <Box p="6" mx="auto" className="relative z-[1] max-w-[800px]">
               <Flex direction="column" gap="4">
-                <Text className="font-medium text-lg leading-6.5">
-                  {CATEGORY_TITLES[activeCategory]}
-                </Text>
+                {!formMode && (
+                  <Text className="font-medium text-lg leading-6.5">
+                    {CATEGORY_TITLES[activeCategory]}
+                  </Text>
+                )}
                 <ActiveComponent />
               </Flex>
             </Box>
diff --git a/apps/code/src/renderer/features/settings/components/sections/CloudEnvironmentsSettings.tsx b/apps/code/src/renderer/features/settings/components/sections/environments/CloudEnvironmentsSettings.tsx
similarity index 90%
rename from apps/code/src/renderer/features/settings/components/sections/CloudEnvironmentsSettings.tsx
rename to apps/code/src/renderer/features/settings/components/sections/environments/CloudEnvironmentsSettings.tsx
index 8becbe7d65..399190ab24 100644
--- a/apps/code/src/renderer/features/settings/components/sections/CloudEnvironmentsSettings.tsx
+++ b/apps/code/src/renderer/features/settings/components/sections/environments/CloudEnvironmentsSettings.tsx
@@ -1,6 +1,6 @@
 import { useSandboxEnvironments } from "@features/settings/hooks/useSandboxEnvironments";
 import { useSettingsDialogStore } from "@features/settings/stores/settingsDialogStore";
-import { PencilSimple, Plus, Trash } from "@phosphor-icons/react";
+import { ArrowLeft, PencilSimple, Plus, Trash } from "@phosphor-icons/react";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
 import {
   Badge,
@@ -195,6 +195,7 @@ export function CloudEnvironmentsSettings() {
   const consumeInitialAction = useSettingsDialogStore(
     (s) => s.consumeInitialAction,
   );
+  const setFormMode = useSettingsDialogStore((s) => s.setFormMode);
   const [editingEnv, setEditingEnv] = useState<SandboxEnvironment | null>(null);
   const [isCreating, setIsCreating] = useState(false);
   const [form, setForm] = useState<FormState>(emptyForm());
@@ -210,6 +211,11 @@ export function CloudEnvironmentsSettings() {
 
   const isFormOpen = isCreating || editingEnv !== null;
 
+  useEffect(() => {
+    setFormMode(isFormOpen);
+    return () => setFormMode(false);
+  }, [isFormOpen, setFormMode]);
+
   const domainValidation = useMemo(() => {
     if (form.network_access_level !== "custom")
       return { domains: [], errors: [] };
@@ -289,14 +295,26 @@ export function CloudEnvironmentsSettings() {
   if (isFormOpen) {
     return (
       <Flex direction="column" gap="4">
-        <Text className="font-medium text-base">
-          {editingEnv ? "Update cloud environment" : "New cloud environment"}
-        </Text>
-        <Text color="gray" className="text-[13px]">
+        <button
+          type="button"
+          onClick={closeForm}
+          className="flex w-fit cursor-pointer items-center gap-1 border-0 bg-transparent p-0 text-[12px] text-gray-11 hover:text-gray-12"
+        >
+          <ArrowLeft size={10} />
+          <span>Back to environments</span>
+        </button>
+
+        <Text className="font-medium text-[13px]">
           {editingEnv
-            ? "Changes take effect on the next session that uses this environment; running sessions are not affected."
-            : "Once created, you can pick this environment in the Cloud section of the workspace picker when starting a task."}
+            ? `Editing cloud environment ${editingEnv.name}`
+            : "Creating cloud environment"}
         </Text>
+        {editingEnv && (
+          <Text color="gray" className="text-[12px]">
+            Changes take effect on the next session that uses this environment;
+            running sessions are not affected.
+          </Text>
+        )}
 
         <Flex direction="column" gap="1">
           <Text className="font-medium text-sm">Name</Text>
@@ -482,15 +500,21 @@ export function CloudEnvironmentsSettings() {
 
   return (
     <Flex direction="column" gap="4">
-      <Flex justify="between" align="start" gap="4">
-        <Text color="gray" className="text-[13px]">
-          A cloud environment is a reusable configuration applied to remote
-          sandbox sessions — it controls which outbound network hosts the
-          sandbox can reach and what environment variables (like API keys) are
-          available to the agent. Pick an environment in the Cloud section of
-          the workspace picker when starting a task; the Default option uses
-          full network access.
-        </Text>
+      <Text color="gray" className="text-[13px]">
+        A cloud environment is a sandbox profile for tasks that run remotely. It
+        controls which outbound hosts the sandbox can reach and which
+        environment variables — like API keys — are injected before the agent
+        starts. Account-wide, so the same profile is available across all your
+        projects. The built-in{" "}
+        <Text color="gray" className="font-medium text-[13px]">
+          Default
+        </Text>{" "}
+        uses full network access; create your own to lock things down or share
+        secrets with the agent. Pick one in the Cloud section of the workspace
+        picker when starting a task.
+      </Text>
+      <Flex justify="between" align="center">
+        <Text className="font-medium text-[13px]">Environments</Text>
         <Button size="1" variant="outline" onClick={openCreate}>
           <Plus size={12} />
           New environment
diff --git a/apps/code/src/renderer/features/settings/components/sections/environments/EnvironmentsSettings.tsx b/apps/code/src/renderer/features/settings/components/sections/environments/EnvironmentsSettings.tsx
index 2ccf19061a..74d084aaeb 100644
--- a/apps/code/src/renderer/features/settings/components/sections/environments/EnvironmentsSettings.tsx
+++ b/apps/code/src/renderer/features/settings/components/sections/environments/EnvironmentsSettings.tsx
@@ -1,119 +1,64 @@
-import { useFolders } from "@features/folders/hooks/useFolders";
 import { useSettingsDialogStore } from "@features/settings/stores/settingsDialogStore";
-import type { Environment } from "@main/services/environment/schemas";
-import type { RegisteredFolder } from "@main/services/folders/schemas";
-import { Flex, Text } from "@radix-ui/themes";
-import { useTRPC } from "@renderer/trpc/client";
-import { useQueries } from "@tanstack/react-query";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { EnvironmentForm } from "./EnvironmentForm";
-import { ProjectEnvironmentCard } from "./ProjectEnvironmentCard";
+import { Cloud, HardDrives } from "@phosphor-icons/react";
+import { Flex, SegmentedControl, Text } from "@radix-ui/themes";
+import { CloudEnvironmentsSettings } from "./CloudEnvironmentsSettings";
+import { LocalEnvironmentsSettings } from "./LocalEnvironmentsSettings";
 
-export interface ProjectEnvironments {
-  folder: RegisteredFolder;
-  environments: Environment[];
-  isLoading: boolean;
-}
-
-interface FormTarget {
-  folder: RegisteredFolder;
-  environment?: Environment;
-}
+type Segment = "local" | "cloud";
 
 export function EnvironmentsSettings() {
-  const trpc = useTRPC();
-  const { folders } = useFolders();
-  const [formTarget, setFormTarget] = useState<FormTarget | null>(null);
-
-  const environmentQueries = useQueries({
-    queries: folders.map((folder) =>
-      trpc.environment.list.queryOptions(
-        { repoPath: folder.path },
-        { staleTime: 30_000 },
-      ),
-    ),
-  });
-
-  const projects = useMemo(() => {
-    const result: ProjectEnvironments[] = [];
-
-    for (let i = 0; i < folders.length; i++) {
-      const folder = folders[i];
-      const query = environmentQueries[i];
-
-      result.push({
-        folder,
-        environments: query?.data ?? [],
-        isLoading: query?.isLoading ?? true,
-      });
-    }
-
-    return result.sort((a, b) => a.folder.name.localeCompare(b.folder.name));
-  }, [folders, environmentQueries]);
+  const activeCategory = useSettingsDialogStore((s) => s.activeCategory);
+  const setCategory = useSettingsDialogStore((s) => s.setCategory);
+  const formMode = useSettingsDialogStore((s) => s.formMode);
 
-  const context = useSettingsDialogStore((s) => s.context);
-  const clearContext = useSettingsDialogStore((s) => s.clearContext);
+  const segment: Segment =
+    activeCategory === "cloud-environments" ? "cloud" : "local";
 
-  useEffect(() => {
-    if (!context.repoPath) return;
-    const folder = folders.find((f) => f.path === context.repoPath);
-    if (folder) {
-      setFormTarget({ folder });
-    }
-    clearContext();
-  }, [context.repoPath, folders, clearContext]);
-
-  const handleCreate = useCallback((folder: RegisteredFolder) => {
-    setFormTarget({ folder });
-  }, []);
-
-  const handleEdit = useCallback(
-    (folder: RegisteredFolder, environment: Environment) => {
-      setFormTarget({ folder, environment });
-    },
-    [],
-  );
-
-  const handleBack = useCallback(() => {
-    setFormTarget(null);
-  }, []);
-
-  if (formTarget) {
-    return (
-      <EnvironmentForm
-        key={formTarget.environment?.id ?? formTarget.folder.id}
-        folder={formTarget.folder}
-        environment={formTarget.environment}
-        onBack={handleBack}
-      />
-    );
-  }
+  const handleSegmentChange = (value: string) => {
+    setCategory(value === "cloud" ? "cloud-environments" : "environments");
+  };
 
   return (
     <Flex direction="column" gap="4">
-      <Text color="gray" className="text-[13px]">
-        An environment defines how a fresh worktree of a project is prepared.
-        The setup script runs once when the worktree is created, so the agent
-        starts in a project that's already installed, built, and ready.
-        Environments are stored as TOML files inside the project and can be
-        committed so teammates share the same setup.
-      </Text>
-      <Text className="font-medium text-[13px]">Projects</Text>
-      {projects.length === 0 ? (
-        <Text color="gray" className="text-[13px]">
-          No projects registered. Open a folder to get started.
-        </Text>
+      {!formMode && (
+        <>
+          <Text color="gray" className="text-[13px]">
+            An environment defines what the agent works inside when you start a
+            task.{" "}
+            <Text color="gray" className="font-medium text-[13px]">
+              Local
+            </Text>{" "}
+            environments prepare a project on your machine;{" "}
+            <Text color="gray" className="font-medium text-[13px]">
+              cloud
+            </Text>{" "}
+            environments configure remote sandboxes.
+          </Text>
+          <SegmentedControl.Root
+            value={segment}
+            onValueChange={handleSegmentChange}
+            size="2"
+          >
+            <SegmentedControl.Item value="local">
+              <Flex align="center" gap="2">
+                <HardDrives size={14} />
+                <Text>Local</Text>
+              </Flex>
+            </SegmentedControl.Item>
+            <SegmentedControl.Item value="cloud">
+              <Flex align="center" gap="2">
+                <Cloud size={14} />
+                <Text>Cloud</Text>
+              </Flex>
+            </SegmentedControl.Item>
+          </SegmentedControl.Root>
+        </>
+      )}
+
+      {segment === "cloud" ? (
+        <CloudEnvironmentsSettings />
       ) : (
-        <Flex direction="column" gap="3">
-          {projects.map((project) => (
-            <ProjectEnvironmentCard
-              key={project.folder.id}
-              project={project}
-              onCreate={handleCreate}
-              onEdit={handleEdit}
-            />
-          ))}
-        </Flex>
+        <LocalEnvironmentsSettings />
       )}
     </Flex>
   );
diff --git a/apps/code/src/renderer/features/settings/components/sections/environments/LocalEnvironmentsSettings.tsx b/apps/code/src/renderer/features/settings/components/sections/environments/LocalEnvironmentsSettings.tsx
new file mode 100644
index 0000000000..b272dc22c7
--- /dev/null
+++ b/apps/code/src/renderer/features/settings/components/sections/environments/LocalEnvironmentsSettings.tsx
@@ -0,0 +1,128 @@
+import { useFolders } from "@features/folders/hooks/useFolders";
+import { useSettingsDialogStore } from "@features/settings/stores/settingsDialogStore";
+import type { Environment } from "@main/services/environment/schemas";
+import type { RegisteredFolder } from "@main/services/folders/schemas";
+import { Flex, Text } from "@radix-ui/themes";
+import { useTRPC } from "@renderer/trpc/client";
+import { useQueries } from "@tanstack/react-query";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { EnvironmentForm } from "./EnvironmentForm";
+import { ProjectEnvironmentCard } from "./ProjectEnvironmentCard";
+
+export interface ProjectEnvironments {
+  folder: RegisteredFolder;
+  environments: Environment[];
+  isLoading: boolean;
+}
+
+interface FormTarget {
+  folder: RegisteredFolder;
+  environment?: Environment;
+}
+
+export function LocalEnvironmentsSettings() {
+  const trpc = useTRPC();
+  const { folders } = useFolders();
+  const [formTarget, setFormTarget] = useState<FormTarget | null>(null);
+
+  const environmentQueries = useQueries({
+    queries: folders.map((folder) =>
+      trpc.environment.list.queryOptions(
+        { repoPath: folder.path },
+        { staleTime: 30_000 },
+      ),
+    ),
+  });
+
+  const projects = useMemo(() => {
+    const result: ProjectEnvironments[] = [];
+
+    for (let i = 0; i < folders.length; i++) {
+      const folder = folders[i];
+      const query = environmentQueries[i];
+
+      result.push({
+        folder,
+        environments: query?.data ?? [],
+        isLoading: query?.isLoading ?? true,
+      });
+    }
+
+    return result.sort((a, b) => a.folder.name.localeCompare(b.folder.name));
+  }, [folders, environmentQueries]);
+
+  const context = useSettingsDialogStore((s) => s.context);
+  const clearContext = useSettingsDialogStore((s) => s.clearContext);
+  const setFormMode = useSettingsDialogStore((s) => s.setFormMode);
+
+  useEffect(() => {
+    if (!context.repoPath) return;
+    const folder = folders.find((f) => f.path === context.repoPath);
+    if (folder) {
+      setFormTarget({ folder });
+    }
+    clearContext();
+  }, [context.repoPath, folders, clearContext]);
+
+  useEffect(() => {
+    setFormMode(formTarget !== null);
+    return () => setFormMode(false);
+  }, [formTarget, setFormMode]);
+
+  const handleCreate = useCallback((folder: RegisteredFolder) => {
+    setFormTarget({ folder });
+  }, []);
+
+  const handleEdit = useCallback(
+    (folder: RegisteredFolder, environment: Environment) => {
+      setFormTarget({ folder, environment });
+    },
+    [],
+  );
+
+  const handleBack = useCallback(() => {
+    setFormTarget(null);
+  }, []);
+
+  if (formTarget) {
+    return (
+      <EnvironmentForm
+        key={formTarget.environment?.id ?? formTarget.folder.id}
+        folder={formTarget.folder}
+        environment={formTarget.environment}
+        onBack={handleBack}
+      />
+    );
+  }
+
+  return (
+    <Flex direction="column" gap="4">
+      <Text color="gray" className="text-[13px]">
+        A local environment is a setup recipe for one of your projects. When you
+        start a task locally, the agent creates a fresh worktree and runs the
+        recipe's setup script once — installing dependencies, running a build,
+        or starting a dev server — so the agent begins in a project that's ready
+        to work in. Stored as a TOML file inside each project; commit it and
+        your teammates get the same setup. Pick one in the workspace picker when
+        starting a task.
+      </Text>
+      <Text className="font-medium text-[13px]">Projects</Text>
+      {projects.length === 0 ? (
+        <Text color="gray" className="text-[13px]">
+          No projects registered. Open a folder to get started.
+        </Text>
+      ) : (
+        <Flex direction="column" gap="3">
+          {projects.map((project) => (
+            <ProjectEnvironmentCard
+              key={project.folder.id}
+              project={project}
+              onCreate={handleCreate}
+              onEdit={handleEdit}
+            />
+          ))}
+        </Flex>
+      )}
+    </Flex>
+  );
+}
diff --git a/apps/code/src/renderer/features/settings/components/sections/environments/ProjectEnvironmentCard.tsx b/apps/code/src/renderer/features/settings/components/sections/environments/ProjectEnvironmentCard.tsx
index 4e6cdf870b..dad8552ccc 100644
--- a/apps/code/src/renderer/features/settings/components/sections/environments/ProjectEnvironmentCard.tsx
+++ b/apps/code/src/renderer/features/settings/components/sections/environments/ProjectEnvironmentCard.tsx
@@ -3,7 +3,7 @@ import type { RegisteredFolder } from "@main/services/folders/schemas";
 import { Folder as FolderIcon, Plus } from "@phosphor-icons/react";
 import { Flex, IconButton, Text } from "@radix-ui/themes";
 import { EnvironmentRow } from "./EnvironmentRow";
-import type { ProjectEnvironments } from "./EnvironmentsSettings";
+import type { ProjectEnvironments } from "./LocalEnvironmentsSettings";
 
 function extractOrgName(remoteUrl: string | null): string | null {
   if (!remoteUrl) return null;
diff --git a/apps/code/src/renderer/features/settings/stores/settingsDialogStore.ts b/apps/code/src/renderer/features/settings/stores/settingsDialogStore.ts
index b173175697..b17c8ce593 100644
--- a/apps/code/src/renderer/features/settings/stores/settingsDialogStore.ts
+++ b/apps/code/src/renderer/features/settings/stores/settingsDialogStore.ts
@@ -24,6 +24,7 @@ interface SettingsDialogState {
   activeCategory: SettingsCategory;
   context: SettingsDialogContext;
   initialAction: string | null;
+  formMode: boolean;
 }
 
 interface SettingsDialogActions {
@@ -35,6 +36,7 @@ interface SettingsDialogActions {
   setCategory: (category: SettingsCategory) => void;
   clearContext: () => void;
   consumeInitialAction: () => string | null;
+  setFormMode: (formMode: boolean) => void;
 }
 
 type SettingsDialogStore = SettingsDialogState & SettingsDialogActions;
@@ -45,6 +47,7 @@ export const useSettingsDialogStore = create<SettingsDialogStore>()(
     activeCategory: "general",
     context: {},
     initialAction: null,
+    formMode: false,
 
     open: (category, contextOrAction) => {
       if (!get().isOpen) {
@@ -56,21 +59,28 @@ export const useSettingsDialogStore = create<SettingsDialogStore>()(
         activeCategory: category ?? "general",
         context: isAction ? {} : (contextOrAction ?? {}),
         initialAction: isAction ? contextOrAction : null,
+        formMode: false,
       });
     },
     close: () => {
       if (get().isOpen && window.history.state?.settingsOpen) {
         window.history.back();
       }
-      set({ isOpen: false, context: {}, initialAction: null });
+      set({
+        isOpen: false,
+        context: {},
+        initialAction: null,
+        formMode: false,
+      });
     },
     setCategory: (category) =>
-      set({ activeCategory: category, initialAction: null }),
+      set({ activeCategory: category, initialAction: null, formMode: false }),
     clearContext: () => set({ context: {} }),
     consumeInitialAction: () => {
       const action = get().initialAction;
       if (action) set({ initialAction: null });
       return action;
     },
+    setFormMode: (formMode) => set({ formMode }),
   }),
 );