cloud environments

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,81 @@ 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/settings/components/SettingsDialog.tsx

@@ -6,6 +6,7 @@ import {
   ArrowLeft,
   ArrowsClockwise,
   CaretRight,
+  Cloud,
   Code,
   Folder,
   GearSix,
@@ -32,6 +33,7 @@ import { ShortcutsSettings } from "./sections/ShortcutsSettings";
 import { SignalSourcesSettings } from "./sections/SignalSourcesSettings";
 import { UpdatesSettings } from "./sections/UpdatesSettings";
 import { WorkspacesSettings } from "./sections/WorkspacesSettings";
+import { CloudEnvironmentsSettings } from "./sections/CloudEnvironmentsSettings";
 import { WorktreesSettings } from "./sections/worktrees/WorktreesSettings";
 
 interface SidebarItem {
@@ -47,9 +49,9 @@ const SIDEBAR_ITEMS: SidebarItem[] = [
   { id: "workspaces", label: "Workspaces", icon: <Folder size={16} /> },
   { id: "worktrees", label: "Worktrees", icon: <TreeStructure size={16} /> },
   {
-    id: "environments",
-    label: "Environments",
-    icon: <HardDrives size={16} />,
+    id: "cloud-environments",
+    label: "Cloud environments",
+    icon: <Cloud size={16} />,
   },
   {
     id: "personalization",
@@ -74,7 +76,7 @@ const CATEGORY_TITLES: Record<SettingsCategory, string> = {
   account: "Account",
   workspaces: "Workspaces",
   worktrees: "Worktrees",
-  environments: "Environments",
+  "cloud-environments": "Cloud environments",
   personalization: "Personalization",
   "claude-code": "Claude Code",
   "mcp-servers": "MCP Servers",
@@ -90,7 +92,7 @@ const CATEGORY_COMPONENTS: Record<SettingsCategory, React.ComponentType> = {
   account: AccountSettings,
   workspaces: WorkspacesSettings,
   worktrees: WorktreesSettings,
-  environments: EnvironmentsSettings,
+  "cloud-environments": CloudEnvironmentsSettings,
   personalization: PersonalizationSettings,
   "claude-code": ClaudeCodeSettings,
   "mcp-servers": McpServersSettings,