feat: better debug logging

chore: cleaner

Author: tatoalo

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

@@ -1184,7 +1184,9 @@ export class PostHogAPIClient {
       path: `/api/projects/${teamId}/sandbox_environments/`,
     });
     if (!response.ok) {
-      throw new Error(`Failed to fetch sandbox environments: ${response.statusText}`);
+      throw new Error(
+        `Failed to fetch sandbox environments: ${response.statusText}`,
+      );
     }
     const data = await response.json();
     return (data.results ?? data) as SandboxEnvironment[];
@@ -1206,7 +1208,9 @@ export class PostHogAPIClient {
       },
     });
     if (!response.ok) {
-      throw new Error(`Failed to create sandbox environment: ${response.statusText}`);
+      throw new Error(
+        `Failed to create sandbox environment: ${response.statusText}`,
+      );
     }
     return (await response.json()) as SandboxEnvironment;
   }
@@ -1228,7 +1232,9 @@ export class PostHogAPIClient {
       },
     });
     if (!response.ok) {
-      throw new Error(`Failed to update sandbox environment: ${response.statusText}`);
+      throw new Error(
+        `Failed to update sandbox environment: ${response.statusText}`,
+      );
     }
     return (await response.json()) as SandboxEnvironment;
   }
@@ -1244,7 +1250,9 @@ export class PostHogAPIClient {
       path: `/api/projects/${teamId}/sandbox_environments/${id}/`,
     });
     if (!response.ok) {
-      throw new Error(`Failed to delete sandbox environment: ${response.statusText}`);
+      throw new Error(
+        `Failed to delete sandbox environment: ${response.statusText}`,
+      );
     }
   }
 }

apps/code/src/renderer/features/environments/components/EnvironmentSelector.tsx

@@ -43,7 +43,7 @@ export function EnvironmentSelector({
     setOpen(false);
     useSettingsDialogStore
       .getState()
-      .open("environments", { repoPath: repoPath ?? undefined });
+      .open("cloud-environments", { repoPath: repoPath ?? undefined });
   };
 
   const triggerContent = (

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

@@ -10,7 +10,6 @@ import {
   Code,
   Folder,
   GearSix,
-  HardDrives,
   Keyboard,
   Palette,
   Plugs,
@@ -25,15 +24,14 @@ import { useHotkeys } from "react-hotkeys-hook";
 import { AccountSettings } from "./sections/AccountSettings";
 import { AdvancedSettings } from "./sections/AdvancedSettings";
 import { ClaudeCodeSettings } from "./sections/ClaudeCodeSettings";
-import { EnvironmentsSettings } from "./sections/environments/EnvironmentsSettings";
+import { CloudEnvironmentsSettings } from "./sections/CloudEnvironmentsSettings";
 import { GeneralSettings } from "./sections/GeneralSettings";
 import { McpServersSettings } from "./sections/McpServersSettings";
 import { PersonalizationSettings } from "./sections/PersonalizationSettings";
 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 {

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,

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

@@ -1,6 +1,7 @@
 import { useSandboxEnvironments } from "@features/settings/hooks/useSandboxEnvironments";
 import { useSettingsDialogStore } from "@features/settings/stores/settingsDialogStore";
 import { PencilSimple, Plus, Trash } from "@phosphor-icons/react";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
 import {
   Badge,
   Button,
@@ -10,8 +11,11 @@ import {
   TextArea,
   TextField,
 } from "@radix-ui/themes";
-import { ChevronDownIcon } from "@radix-ui/react-icons";
-import type { NetworkAccessLevel, SandboxEnvironment } from "@shared/types";
+import type {
+  NetworkAccessLevel,
+  SandboxEnvironment,
+  SandboxEnvironmentInput,
+} from "@shared/types";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 
@@ -37,14 +41,18 @@ const NETWORK_ACCESS_OPTIONS: {
   },
 ];
 
-const DOMAIN_RE = /^(\*\.)?[a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?(\.[a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?)*$/;
+const DOMAIN_RE =
+  /^(\*\.)?[a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?(\.[a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?)*$/;
 const ENV_KEY_RE = /^[A-Za-z_][A-Za-z0-9_]*$/;
 
 function isValidDomain(domain: string): boolean {
   return DOMAIN_RE.test(domain);
 }
 
-function validateDomains(text: string): { domains: string[]; errors: string[] } {
+function validateDomains(text: string): {
+  domains: string[];
+  errors: string[];
+} {
   const domains: string[] = [];
   const errors: string[] = [];
   for (const line of text.split("\n")) {
@@ -161,7 +169,10 @@ function NetworkAccessSelect({
               className="flex w-full cursor-pointer flex-col gap-0 border-0 bg-transparent px-3 py-2 text-left transition-colors hover:bg-gray-3 data-[active]:bg-accent-4"
               data-active={opt.value === value || undefined}
             >
-              <Text size="2" weight={opt.value === value ? "medium" : undefined}>
+              <Text
+                size="2"
+                weight={opt.value === value ? "medium" : undefined}
+              >
                 {opt.label}
               </Text>
               <Text size="1" color="gray">
@@ -202,7 +213,8 @@ export function CloudEnvironmentsSettings() {
   const isFormOpen = isCreating || editingEnv !== null;
 
   const domainValidation = useMemo(() => {
-    if (form.network_access_level !== "custom") return { domains: [], errors: [] };
+    if (form.network_access_level !== "custom")
+      return { domains: [], errors: [] };
     return validateDomains(form.allowed_domains_text);
   }, [form.network_access_level, form.allowed_domains_text]);
 
@@ -237,25 +249,22 @@ export function CloudEnvironmentsSettings() {
       return;
     }
 
-    const payload: Record<string, unknown> = {
+    const payload: SandboxEnvironmentInput = {
       name: form.name,
       network_access_level: form.network_access_level,
       allowed_domains:
-        form.network_access_level === "custom"
-          ? domainValidation.domains
-          : [],
+        form.network_access_level === "custom" ? domainValidation.domains : [],
       include_default_domains:
         form.network_access_level === "custom"
           ? form.include_default_domains
           : false,
       private: form.private,
       repositories: [],
+      ...(form.environment_variables_text.trim()
+        ? { environment_variables: envVarValidation.vars }
+        : {}),
     };
 
-    if (form.environment_variables_text.trim()) {
-      payload.environment_variables = envVarValidation.vars;
-    }
-
     if (editingEnv) {
       await updateMutation.mutateAsync({ id: editingEnv.id, ...payload });
     } else {

apps/code/src/renderer/features/settings/hooks/useSandboxEnvironments.ts

@@ -1,6 +1,6 @@
 import { useAuthenticatedMutation } from "@hooks/useAuthenticatedMutation";
 import { useAuthenticatedQuery } from "@hooks/useAuthenticatedQuery";
-import type { SandboxEnvironment, SandboxEnvironmentInput } from "@shared/types";
+import type { SandboxEnvironmentInput } from "@shared/types";
 import { useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
 

apps/code/src/renderer/features/settings/stores/settingsDialogStore.ts

@@ -26,7 +26,10 @@ interface SettingsDialogState {
 }
 
 interface SettingsDialogActions {
-  open: (category?: SettingsCategory, context?: SettingsDialogContext) => void;
+  open: (
+    category?: SettingsCategory,
+    contextOrAction?: SettingsDialogContext | string,
+  ) => void;
   close: () => void;
   setCategory: (category: SettingsCategory) => void;
   clearContext: () => void;
@@ -42,14 +45,16 @@ export const useSettingsDialogStore = create<SettingsDialogStore>()(
     context: {},
     initialAction: null,
 
-    open: (category, context) => {
+    open: (category, contextOrAction) => {
       if (!get().isOpen) {
         window.history.pushState({ settingsOpen: true }, "");
       }
+      const isAction = typeof contextOrAction === "string";
       set({
         isOpen: true,
         activeCategory: category ?? "general",
-        context: context ?? {},
+        context: isAction ? {} : (contextOrAction ?? {}),
+        initialAction: isAction ? contextOrAction : null,
       });
     },
     close: () => {
@@ -58,7 +63,8 @@ export const useSettingsDialogStore = create<SettingsDialogStore>()(
       }
       set({ isOpen: false, context: {}, initialAction: null });
     },
-    setCategory: (category) => set({ activeCategory: category, initialAction: null }),
+    setCategory: (category) =>
+      set({ activeCategory: category, initialAction: null }),
     clearContext: () => set({ context: {} }),
     consumeInitialAction: () => {
       const action = get().initialAction;

apps/code/src/renderer/features/task-detail/components/WorkspaceModeSelect.tsx

@@ -1,6 +1,6 @@
-import { useFeatureFlag } from "@hooks/useFeatureFlag";
 import { useSandboxEnvironments } from "@features/settings/hooks/useSandboxEnvironments";
 import { useSettingsDialogStore } from "@features/settings/stores/settingsDialogStore";
+import { useFeatureFlag } from "@hooks/useFeatureFlag";
 import type { WorkspaceMode } from "@main/services/workspace/schemas";
 import { ArrowsSplit, Cloud, Laptop, Plus } from "@phosphor-icons/react";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
@@ -98,7 +98,9 @@ export function WorkspaceModeSelect({
 
   const triggerIcon = useMemo(() => {
     if (value === "cloud") return CLOUD_ICON;
-    return LOCAL_MODES.find((m) => m.mode === value)?.icon ?? LOCAL_MODES[0].icon;
+    return (
+      LOCAL_MODES.find((m) => m.mode === value)?.icon ?? LOCAL_MODES[0].icon
+    );
   }, [value]);
 
   return (
@@ -125,9 +127,7 @@ export function WorkspaceModeSelect({
             }}
             style={{ padding: "6px 8px", height: "auto" }}
           >
-            <div
-              style={{ display: "flex", gap: 6, alignItems: "flex-start" }}
-            >
+            <div style={{ display: "flex", gap: 6, alignItems: "flex-start" }}>
               <span
                 style={{
                   marginTop: 2,