feat: cloud environments (#1285)

Co-authored-by: Alessandro Pogliaghi <alessandro@posthog.com>

Author: joshsny

apps/code/src/renderer/api/posthogClient.ts

@@ -1,4 +1,6 @@
 import type {
+  SandboxEnvironment,
+  SandboxEnvironmentInput,
   SignalReportArtefact,
   SignalReportArtefactsResponse,
   SignalReportSignalsResponse,
@@ -504,6 +506,7 @@ export class PostHogAPIClient {
     taskId: string,
     branch?: string | null,
     resumeOptions?: { resumeFromRunId: string; pendingUserMessage: string },
+    sandboxEnvironmentId?: string,
   ): Promise<Task> {
     const teamId = await this.getTeamId();
     const body: Record<string, unknown> = { mode: "interactive" };
@@ -514,6 +517,9 @@ export class PostHogAPIClient {
       body.resume_from_run_id = resumeOptions.resumeFromRunId;
       body.pending_user_message = resumeOptions.pendingUserMessage;
     }
+    if (sandboxEnvironmentId) {
+      body.sandbox_environment_id = sandboxEnvironmentId;
+    }
 
     const data = await this.api.post(
       `/api/projects/{project_id}/tasks/{id}/run/`,
@@ -1164,4 +1170,89 @@ export class PostHogAPIClient {
       return false;
     }
   }
+
+  // Sandbox Environments
+
+  async listSandboxEnvironments(): Promise<SandboxEnvironment[]> {
+    const teamId = await this.getTeamId();
+    const url = new URL(
+      `${this.api.baseUrl}/api/projects/${teamId}/sandbox_environments/`,
+    );
+    const response = await this.api.fetcher.fetch({
+      method: "get",
+      url,
+      path: `/api/projects/${teamId}/sandbox_environments/`,
+    });
+    if (!response.ok) {
+      throw new Error(
+        `Failed to fetch sandbox environments: ${response.statusText}`,
+      );
+    }
+    const data = await response.json();
+    return (data.results ?? data) as SandboxEnvironment[];
+  }
+
+  async createSandboxEnvironment(
+    input: SandboxEnvironmentInput,
+  ): Promise<SandboxEnvironment> {
+    const teamId = await this.getTeamId();
+    const url = new URL(
+      `${this.api.baseUrl}/api/projects/${teamId}/sandbox_environments/`,
+    );
+    const response = await this.api.fetcher.fetch({
+      method: "post",
+      url,
+      path: `/api/projects/${teamId}/sandbox_environments/`,
+      overrides: {
+        body: JSON.stringify(input),
+      },
+    });
+    if (!response.ok) {
+      throw new Error(
+        `Failed to create sandbox environment: ${response.statusText}`,
+      );
+    }
+    return (await response.json()) as SandboxEnvironment;
+  }
+
+  async updateSandboxEnvironment(
+    id: string,
+    input: Partial<SandboxEnvironmentInput>,
+  ): Promise<SandboxEnvironment> {
+    const teamId = await this.getTeamId();
+    const url = new URL(
+      `${this.api.baseUrl}/api/projects/${teamId}/sandbox_environments/${id}/`,
+    );
+    const response = await this.api.fetcher.fetch({
+      method: "patch",
+      url,
+      path: `/api/projects/${teamId}/sandbox_environments/${id}/`,
+      overrides: {
+        body: JSON.stringify(input),
+      },
+    });
+    if (!response.ok) {
+      throw new Error(
+        `Failed to update sandbox environment: ${response.statusText}`,
+      );
+    }
+    return (await response.json()) as SandboxEnvironment;
+  }
+
+  async deleteSandboxEnvironment(id: string): Promise<void> {
+    const teamId = await this.getTeamId();
+    const url = new URL(
+      `${this.api.baseUrl}/api/projects/${teamId}/sandbox_environments/${id}/`,
+    );
+    const response = await this.api.fetcher.fetch({
+      method: "delete",
+      url,
+      path: `/api/projects/${teamId}/sandbox_environments/${id}/`,
+    });
+    if (!response.ok) {
+      throw new Error(
+        `Failed to delete sandbox environment: ${response.statusText}`,
+      );
+    }
+  }
 }

apps/code/src/renderer/features/sessions/components/ConversationView.tsx

@@ -7,7 +7,6 @@ import {
   useSessionForTask,
 } from "@features/sessions/stores/sessionStore";
 import { useSettingsStore } from "@features/settings/stores/settingsStore";
-import { useFeatureFlag } from "@hooks/useFeatureFlag";
 import { ArrowDown, XCircle } from "@phosphor-icons/react";
 import { Box, Button, Flex, Text } from "@radix-ui/themes";
 import type { AcpMessage } from "@shared/types/session-events";
@@ -50,9 +49,8 @@ export function ConversationView({
 }: ConversationViewProps) {
   const listRef = useRef<VirtualizedListHandle>(null);
   const [showScrollButton, setShowScrollButton] = useState(false);
-  const agentLogsEnabled = useFeatureFlag("posthog-code-background-agent-logs");
   const debugLogsCloudRuns = useSettingsStore((s) => s.debugLogsCloudRuns);
-  const showDebugLogs = agentLogsEnabled && debugLogsCloudRuns;
+  const showDebugLogs = debugLogsCloudRuns;
   const contextUsage = useContextUsage(events);
 
   const {

apps/code/src/renderer/features/settings/components/SettingsDialog.tsx

@@ -6,6 +6,7 @@ import {
   ArrowLeft,
   ArrowsClockwise,
   CaretRight,
+  Cloud,
   Code,
   Folder,
   GearSix,
@@ -24,6 +25,7 @@ import { useHotkeys } from "react-hotkeys-hook";
 import { AccountSettings } from "./sections/AccountSettings";
 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 { McpServersSettings } from "./sections/McpServersSettings";
@@ -51,6 +53,11 @@ const SIDEBAR_ITEMS: SidebarItem[] = [
     label: "Environments",
     icon: <HardDrives size={16} />,
   },
+  {
+    id: "cloud-environments",
+    label: "Cloud environments",
+    icon: <Cloud size={16} />,
+  },
   {
     id: "personalization",
     label: "Personalization",
@@ -75,6 +82,7 @@ const CATEGORY_TITLES: Record<SettingsCategory, string> = {
   workspaces: "Workspaces",
   worktrees: "Worktrees",
   environments: "Environments",
+  "cloud-environments": "Cloud environments",
   personalization: "Personalization",
   "claude-code": "Claude Code",
   "mcp-servers": "MCP Servers",
@@ -91,6 +99,7 @@ const CATEGORY_COMPONENTS: Record<SettingsCategory, React.ComponentType> = {
   workspaces: WorkspacesSettings,
   worktrees: WorktreesSettings,
   environments: EnvironmentsSettings,
+  "cloud-environments": CloudEnvironmentsSettings,
   personalization: PersonalizationSettings,
   "claude-code": ClaudeCodeSettings,
   "mcp-servers": McpServersSettings,

apps/code/src/renderer/features/settings/components/sections/AdvancedSettings.tsx

@@ -6,9 +6,8 @@ import { Button, Flex, Switch } from "@radix-ui/themes";
 import { clearApplicationStorage } from "@utils/clearStorage";
 
 export function AdvancedSettings() {
-  const showDebugLogsToggle = useFeatureFlag(
-    "posthog-code-background-agent-logs",
-  );
+  const showDebugLogsToggle =
+    useFeatureFlag("posthog-code-background-agent-logs") || import.meta.env.DEV;
   const debugLogsCloudRuns = useSettingsStore((s) => s.debugLogsCloudRuns);
   const setDebugLogsCloudRuns = useSettingsStore(
     (s) => s.setDebugLogsCloudRuns,