feat(ui): add cloud workspace mode option

feat(twig): ff implemented

chore: clean

Author: tatoalo

.env.example

@@ -13,4 +13,4 @@ VITE_POSTHOG_UI_HOST=xxx
 
 # PostHog Survey IDs (optional)
 VITE_POSTHOG_BUG_SURVEY_ID=
-VITE_POSTHOG_FEEDBACK_SURVEY_ID=
+VITE_POSTHOG_FEEDBACK_SURVEY_ID=

apps/twig/src/api/posthogClient.ts

@@ -431,4 +431,40 @@ export class PostHogAPIClient {
       slug: org.slug ?? org.id,
     }));
   }
+
+  /**
+   * Check if a feature flag is enabled for the current project.
+   * Returns true if the flag exists and is active, false otherwise.
+   */
+  async isFeatureFlagEnabled(flagKey: string): Promise<boolean> {
+    try {
+      const teamId = await this.getTeamId();
+      const url = new URL(
+        `${this.api.baseUrl}/api/projects/${teamId}/feature_flags/`,
+      );
+      url.searchParams.set("key", flagKey);
+
+      const response = await this.api.fetcher.fetch({
+        method: "get",
+        url,
+        path: `/api/projects/${teamId}/feature_flags/`,
+      });
+
+      if (!response.ok) {
+        log.warn(`Failed to fetch feature flags: ${response.statusText}`);
+        return false;
+      }
+
+      const data = await response.json();
+      const flags = data.results ?? data ?? [];
+      const flag = flags.find(
+        (f: { key: string; active: boolean }) => f.key === flagKey,
+      );
+
+      return flag?.active ?? false;
+    } catch (error) {
+      log.warn(`Error checking feature flag "${flagKey}":`, error);
+      return false;
+    }
+  }
 }

apps/twig/src/renderer/features/task-detail/components/TaskInput.tsx

@@ -155,7 +155,10 @@ export function TaskInput() {
               value={workspaceMode}
               onChange={(mode) => {
                 setWorkspaceMode(mode);
-                setLastUsedLocalWorkspaceMode(mode);
+                // Only persist local modes, not cloud
+                if (mode !== "cloud") {
+                  setLastUsedLocalWorkspaceMode(mode);
+                }
               }}
               size="1"
             />

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

@@ -1,9 +1,12 @@
-import { GitBranch, Laptop } from "@phosphor-icons/react";
+import { useFeatureFlag } from "@hooks/useFeatureFlag";
+import { Cloud, GitBranch, Laptop } from "@phosphor-icons/react";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
 import { Button, DropdownMenu, Flex, Text } from "@radix-ui/themes";
 import type { Responsive } from "@radix-ui/themes/dist/esm/props/prop-def.js";
+import type { WorkspaceMode } from "@shared/types";
+import { useMemo } from "react";
 
-export type WorkspaceMode = "local" | "worktree";
+export type { WorkspaceMode };
 
 interface WorkspaceModeSelectProps {
   value: WorkspaceMode;
@@ -25,13 +28,26 @@ const MODE_CONFIG: Record<
     description: "Edits a copy so your work stays isolated",
     icon: <GitBranch size={16} weight="regular" />,
   },
+  cloud: {
+    label: "Cloud",
+    description: "Runs in isolated sandbox",
+    icon: <Cloud size={16} weight="regular" />,
+  },
 };
 
 export function WorkspaceModeSelect({
   value,
   onChange,
   size = "1",
 }: WorkspaceModeSelectProps) {
+  const cloudModeEnabled = useFeatureFlag("twig-cloud-mode-toggle");
+
+  const availableModes = useMemo<WorkspaceMode[]>(
+    () =>
+      cloudModeEnabled ? ["worktree", "local", "cloud"] : ["worktree", "local"],
+    [cloudModeEnabled],
+  );
+
   const currentMode = MODE_CONFIG[value] ?? MODE_CONFIG.worktree;
 
   return (
@@ -49,40 +65,36 @@ export function WorkspaceModeSelect({
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content align="start" size="1">
-        <DropdownMenu.Item
-          onSelect={() => onChange("worktree")}
-          style={{ padding: "6px 8px", height: "auto" }}
-        >
-          <div style={{ display: "flex", gap: 6, alignItems: "flex-start" }}>
-            <GitBranch
-              size={12}
-              style={{ marginTop: 2, flexShrink: 0, color: "var(--gray-11)" }}
-            />
-            <div>
-              <Text size="1">{MODE_CONFIG.worktree.label}</Text>
-              <Text size="1" color="gray" style={{ display: "block" }}>
-                {MODE_CONFIG.worktree.description}
-              </Text>
-            </div>
-          </div>
-        </DropdownMenu.Item>
-        <DropdownMenu.Item
-          onSelect={() => onChange("local")}
-          style={{ padding: "6px 8px", height: "auto" }}
-        >
-          <div style={{ display: "flex", gap: 6, alignItems: "flex-start" }}>
-            <Laptop
-              size={12}
-              style={{ marginTop: 2, flexShrink: 0, color: "var(--gray-11)" }}
-            />
-            <div>
-              <Text size="1">{MODE_CONFIG.local.label}</Text>
-              <Text size="1" color="gray" style={{ display: "block" }}>
-                {MODE_CONFIG.local.description}
-              </Text>
-            </div>
-          </div>
-        </DropdownMenu.Item>
+        {availableModes.map((mode) => {
+          const config = MODE_CONFIG[mode];
+          return (
+            <DropdownMenu.Item
+              key={mode}
+              onSelect={() => onChange(mode)}
+              style={{ padding: "6px 8px", height: "auto" }}
+            >
+              <div
+                style={{ display: "flex", gap: 6, alignItems: "flex-start" }}
+              >
+                <span
+                  style={{
+                    marginTop: 2,
+                    flexShrink: 0,
+                    color: "var(--gray-11)",
+                  }}
+                >
+                  {config.icon}
+                </span>
+                <div>
+                  <Text size="1">{config.label}</Text>
+                  <Text size="1" color="gray" style={{ display: "block" }}>
+                    {config.description}
+                  </Text>
+                </div>
+              </div>
+            </DropdownMenu.Item>
+          );
+        })}
       </DropdownMenu.Content>
     </DropdownMenu.Root>
   );

apps/twig/src/renderer/features/task-detail/hooks/useTaskCreation.ts

@@ -123,11 +123,15 @@ export function useTaskCreation({
   const { isOnline } = useConnectivity();
 
   const isCloudMode = workspaceMode === "cloud";
+  // Cloud mode can work with either selectedRepository (production) or selectedDirectory (dev testing)
+  const hasRequiredPath = isCloudMode
+    ? !!selectedRepository || !!selectedDirectory
+    : !!selectedDirectory;
   const canSubmit =
     !!editorRef.current &&
     isAuthenticated &&
     isOnline &&
-    (isCloudMode ? !!selectedRepository : !!selectedDirectory) &&
+    hasRequiredPath &&
     !isCreatingTask &&
     !editorIsEmpty;
 

apps/twig/src/renderer/hooks/useFeatureFlag.ts

@@ -0,0 +1,53 @@
+import { useAuthStore } from "@features/auth/stores/authStore";
+import { logger } from "@renderer/lib/logger";
+import { useEffect, useState } from "react";
+
+const log = logger.scope("useFeatureFlag");
+
+// Cache for to avoid having too many repeated API calls
+const flagCache = new Map<string, { value: boolean; timestamp: number }>();
+const CACHE_TTL_MS = 60 * 1000; // 1 minute
+
+export function useFeatureFlag(
+  flagKey: string,
+  defaultValue: boolean = false,
+): boolean {
+  const client = useAuthStore((state) => state.client);
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+  const [enabled, setEnabled] = useState(defaultValue);
+
+  useEffect(() => {
+    if (!isAuthenticated || !client) {
+      log.debug(`Cannot check flag "${flagKey}": not authenticated`);
+      setEnabled(defaultValue);
+      return;
+    }
+
+    // Check cache first
+    const cached = flagCache.get(flagKey);
+    if (cached && Date.now() - cached.timestamp < CACHE_TTL_MS) {
+      log.debug(`Flag "${flagKey}" from cache:`, cached.value);
+      setEnabled(cached.value);
+      return;
+    }
+
+    // Fetch from API
+    client
+      .isFeatureFlagEnabled(flagKey)
+      .then((value) => {
+        log.debug(`Flag "${flagKey}" from API:`, value);
+        flagCache.set(flagKey, { value, timestamp: Date.now() });
+        setEnabled(value);
+      })
+      .catch((error) => {
+        log.warn(`Error checking flag "${flagKey}":`, error);
+        setEnabled(defaultValue);
+      });
+  }, [flagKey, client, isAuthenticated, defaultValue]);
+
+  return enabled;
+}
+
+export function clearFeatureFlagCache(): void {
+  flagCache.clear();
+}

apps/twig/src/renderer/lib/analytics.ts

@@ -156,3 +156,34 @@ export function displaySurvey(surveyId: string) {
 
   posthog.displaySurvey(surveyId);
 }
+
+// ============================================================================
+// Feature Flags
+// ============================================================================
+
+/**
+ * Check if a feature flag is enabled for the current user.
+ * Returns false if PostHog is not initialized or flag is not found.
+ */
+export function isFeatureFlagEnabled(flagKey: string): boolean {
+  if (!isInitialized) {
+    log.warn("PostHog not initialized, cannot check feature flag");
+    return false;
+  }
+
+  return posthog.isFeatureEnabled(flagKey) ?? false;
+}
+
+/**
+ * Subscribe to feature flag changes.
+ * Callback is called when flags are loaded or updated.
+ * Returns unsubscribe function.
+ */
+export function onFeatureFlagsLoaded(callback: () => void): () => void {
+  if (!isInitialized) {
+    log.warn("PostHog not initialized, cannot subscribe to feature flags");
+    return () => {};
+  }
+
+  return posthog.onFeatureFlags(callback);
+}