feat: cloud/local run selection (#186)

jonathanlab · web-flow · commit ffd2566fe074 · 2025-12-03T13:08:33.000Z
diff --git a/apps/array/src/renderer/features/settings/stores/settingsStore.ts b/apps/array/src/renderer/features/settings/stores/settingsStore.ts
@@ -1,17 +1,23 @@
+import type { WorkspaceMode } from "@shared/types";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 
 export type DefaultRunMode = "local" | "cloud" | "last_used";
+export type LocalWorkspaceMode = "worktree" | "root";
 
 interface SettingsStore {
   autoRunTasks: boolean;
   defaultRunMode: DefaultRunMode;
   lastUsedRunMode: "local" | "cloud";
+  lastUsedLocalWorkspaceMode: LocalWorkspaceMode;
+  lastUsedWorkspaceMode: WorkspaceMode;
   createPR: boolean;
 
   setAutoRunTasks: (autoRun: boolean) => void;
   setDefaultRunMode: (mode: DefaultRunMode) => void;
   setLastUsedRunMode: (mode: "local" | "cloud") => void;
+  setLastUsedLocalWorkspaceMode: (mode: LocalWorkspaceMode) => void;
+  setLastUsedWorkspaceMode: (mode: WorkspaceMode) => void;
   setCreatePR: (createPR: boolean) => void;
 }
 
@@ -21,11 +27,16 @@ export const useSettingsStore = create<SettingsStore>()(
       autoRunTasks: true,
       defaultRunMode: "last_used",
       lastUsedRunMode: "local",
+      lastUsedLocalWorkspaceMode: "worktree",
+      lastUsedWorkspaceMode: "worktree",
       createPR: true,
 
       setAutoRunTasks: (autoRun) => set({ autoRunTasks: autoRun }),
       setDefaultRunMode: (mode) => set({ defaultRunMode: mode }),
       setLastUsedRunMode: (mode) => set({ lastUsedRunMode: mode }),
+      setLastUsedLocalWorkspaceMode: (mode) =>
+        set({ lastUsedLocalWorkspaceMode: mode }),
+      setLastUsedWorkspaceMode: (mode) => set({ lastUsedWorkspaceMode: mode }),
       setCreatePR: (createPR) => set({ createPR }),
     }),
     {
diff --git a/apps/array/src/renderer/features/sidebar/components/SidebarItem.tsx b/apps/array/src/renderer/features/sidebar/components/SidebarItem.tsx
@@ -6,7 +6,7 @@ interface SidebarItemProps {
   depth: number;
   icon?: React.ReactNode;
   label: string;
-  subtitle?: string;
+  subtitle?: React.ReactNode;
   isActive?: boolean;
   onClick?: () => void;
   onContextMenu?: (e: React.MouseEvent) => void;
diff --git a/apps/array/src/renderer/features/sidebar/components/SidebarMenu.tsx b/apps/array/src/renderer/features/sidebar/components/SidebarMenu.tsx
@@ -1,4 +1,5 @@
 import { RenameTaskDialog } from "@components/RenameTaskDialog";
+import { useTaskExecutionStore } from "@features/task-detail/stores/taskExecutionStore";
 import { useTasks } from "@features/tasks/hooks/useTasks";
 import { useTaskStore } from "@features/tasks/stores/taskStore";
 import { useMeQuery } from "@hooks/useMeQuery";
@@ -32,6 +33,7 @@ function SidebarMenuComponent() {
   const collapsedSections = useSidebarStore((state) => state.collapsedSections);
   const toggleSection = useSidebarStore((state) => state.toggleSection);
   const workspaces = useWorkspaceStore.use.workspaces();
+  const taskStates = useTaskExecutionStore((state) => state.taskStates);
 
   const { showContextMenu, renameTask, renameDialogOpen, setRenameDialogOpen } =
     useTaskContextMenu();
@@ -179,6 +181,7 @@ function SidebarMenuComponent() {
                     workspaces[task.id]?.worktreePath ??
                     workspaces[task.id]?.folderPath
                   }
+                  workspaceMode={taskStates[task.id]?.workspaceMode}
                   onClick={() => handleTaskClick(task.id)}
                   onContextMenu={(e) => handleTaskContextMenu(task.id, e)}
                 />
diff --git a/apps/array/src/renderer/features/sidebar/components/items/TaskItem.tsx b/apps/array/src/renderer/features/sidebar/components/items/TaskItem.tsx
@@ -1,8 +1,10 @@
 import {
   CheckCircleIcon,
   CircleIcon,
+  Cloud,
   XCircleIcon,
 } from "@phosphor-icons/react";
+import type { WorkspaceMode } from "@shared/types";
 import { useQuery } from "@tanstack/react-query";
 import type { TaskStatus } from "../../types";
 import { SidebarItem } from "../SidebarItem";
@@ -24,6 +26,7 @@ interface TaskItemProps {
   isActive: boolean;
   worktreeName?: string;
   worktreePath?: string;
+  workspaceMode?: WorkspaceMode;
   onClick: () => void;
   onContextMenu: (e: React.MouseEvent) => void;
 }
@@ -101,11 +104,21 @@ export function TaskItem({
   isActive,
   worktreeName,
   worktreePath,
+  workspaceMode,
   onClick,
   onContextMenu,
 }: TaskItemProps) {
   const { data: currentBranch } = useCurrentBranch(worktreePath, worktreeName);
-  const subtitle = worktreeName ?? currentBranch;
+
+  const isCloudTask = workspaceMode === "cloud";
+  const subtitle = isCloudTask ? (
+    <span style={{ display: "flex", alignItems: "center", gap: "4px" }}>
+      <Cloud size={10} />
+      <span>Cloud</span>
+    </span>
+  ) : (
+    (worktreeName ?? currentBranch)
+  );
 
   return (
     <SidebarItem
@@ -117,7 +130,7 @@ export function TaskItem({
       onClick={onClick}
       onContextMenu={onContextMenu}
       endContent={
-        worktreePath ? (
+        !isCloudTask && worktreePath ? (
           <DiffStatsDisplay worktreePath={worktreePath} />
         ) : undefined
       }
diff --git a/apps/array/src/renderer/features/task-detail/components/RunModeSelect.tsx b/apps/array/src/renderer/features/task-detail/components/RunModeSelect.tsx
@@ -0,0 +1,64 @@
+import { Cloud, Desktop } 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";
+
+export type RunMode = "local" | "cloud";
+
+interface RunModeSelectProps {
+  value: RunMode;
+  onChange: (mode: RunMode) => void;
+  size?: Responsive<"1" | "2">;
+}
+
+const MODE_CONFIG: Record<RunMode, { label: string; icon: React.ReactNode }> = {
+  local: {
+    label: "Local",
+    icon: <Desktop size={16} weight="regular" />,
+  },
+  cloud: {
+    label: "Cloud",
+    icon: <Cloud size={16} weight="regular" />,
+  },
+};
+
+export function RunModeSelect({
+  value,
+  onChange,
+  size = "1",
+}: RunModeSelectProps) {
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>
+        <Button color="gray" variant="outline" size={size}>
+          <Flex justify="between" align="center" gap="2">
+            <Flex align="center" gap="2" style={{ minWidth: 0 }}>
+              {MODE_CONFIG[value].icon}
+              <Text size={size}>{MODE_CONFIG[value].label}</Text>
+            </Flex>
+            <ChevronDownIcon style={{ flexShrink: 0 }} />
+          </Flex>
+        </Button>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Content
+        align="start"
+        style={{ minWidth: "var(--radix-dropdown-menu-trigger-width)" }}
+        size={size}
+      >
+        <DropdownMenu.Item onSelect={() => onChange("local")}>
+          <Flex align="center" gap="2">
+            <Desktop size={12} />
+            <Text size={size}>Local</Text>
+          </Flex>
+        </DropdownMenu.Item>
+        <DropdownMenu.Item onSelect={() => onChange("cloud")}>
+          <Flex align="center" gap="2">
+            <Cloud size={12} />
+            <Text size={size}>Cloud</Text>
+          </Flex>
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  );
+}
diff --git a/apps/array/src/renderer/features/task-detail/components/TaskInput.tsx b/apps/array/src/renderer/features/task-detail/components/TaskInput.tsx
@@ -1,28 +1,36 @@
 import { FolderPicker } from "@features/folder-picker/components/FolderPicker";
+import { useSettingsStore } from "@features/settings/stores/settingsStore";
 import { useSetHeaderContent } from "@hooks/useSetHeaderContent";
-import { Box, Flex } from "@radix-ui/themes";
+import { Flex } from "@radix-ui/themes";
 import { useRegisteredFoldersStore } from "@renderer/stores/registeredFoldersStore";
 import type { WorkspaceMode } from "@shared/types";
 import { useNavigationStore } from "@stores/navigationStore";
 import { useTaskDirectoryStore } from "@stores/taskDirectoryStore";
 import { useEffect, useState } from "react";
 import { useEditorSetup } from "../hooks/useEditorSetup";
 import { useTaskCreation } from "../hooks/useTaskCreation";
+import { type RunMode, RunModeSelect } from "./RunModeSelect";
 import { SuggestedTasks } from "./SuggestedTasks";
 import { TaskInputEditor } from "./TaskInputEditor";
 
 const DOT_FILL = "var(--gray-6)";
 
+type LocalWorkspaceMode = "worktree" | "root";
+
 export function TaskInput() {
   useSetHeaderContent(null);
 
   const { view } = useNavigationStore();
   const { lastUsedDirectory } = useTaskDirectoryStore();
   const { folders } = useRegisteredFoldersStore();
+  const { lastUsedRunMode, lastUsedLocalWorkspaceMode } = useSettingsStore();
+
   const [selectedDirectory, setSelectedDirectory] = useState(
     lastUsedDirectory || "",
   );
-  const [workspaceMode, setWorkspaceMode] = useState<WorkspaceMode>("worktree");
+  const [runMode, setRunMode] = useState<RunMode>(lastUsedRunMode);
+  const [localWorkspaceMode, setLocalWorkspaceMode] =
+    useState<LocalWorkspaceMode>(lastUsedLocalWorkspaceMode);
 
   useEffect(() => {
     if (view.folderId) {
@@ -43,10 +51,14 @@ export function TaskInput() {
     repoPath: selectedDirectory,
   });
 
+  // Compute the effective workspace mode for task creation
+  const effectiveWorkspaceMode: WorkspaceMode =
+    runMode === "cloud" ? "cloud" : localWorkspaceMode;
+
   const { isCreatingTask, canSubmit, handleSubmit } = useTaskCreation({
     editor,
     selectedDirectory,
-    workspaceMode,
+    workspaceMode: effectiveWorkspaceMode,
   });
 
   return (
@@ -98,20 +110,22 @@ export function TaskInput() {
           zIndex: 1,
         }}
       >
-        <Box>
+        <Flex gap="2" align="center">
           <FolderPicker
             value={selectedDirectory}
             onChange={handleDirectoryChange}
             placeholder="Select working directory..."
             size="1"
           />
-        </Box>
+          <RunModeSelect value={runMode} onChange={setRunMode} size="1" />
+        </Flex>
 
         <TaskInputEditor
           editor={editor}
           isCreatingTask={isCreatingTask}
-          workspaceMode={workspaceMode}
-          onWorkspaceModeChange={setWorkspaceMode}
+          runMode={runMode}
+          localWorkspaceMode={localWorkspaceMode}
+          onLocalWorkspaceModeChange={setLocalWorkspaceMode}
           canSubmit={canSubmit}
           onSubmit={handleSubmit}
           hasDirectory={!!selectedDirectory}
diff --git a/apps/array/src/renderer/features/task-detail/components/TaskInputEditor.tsx b/apps/array/src/renderer/features/task-detail/components/TaskInputEditor.tsx
@@ -1,15 +1,18 @@
 import { ArrowUpIcon, GitBranchIcon } from "@phosphor-icons/react";
 import { Box, Flex, IconButton, Text, Tooltip } from "@radix-ui/themes";
-import type { WorkspaceMode } from "@shared/types";
 import type { Editor } from "@tiptap/react";
 import { EditorContent } from "@tiptap/react";
+import type { RunMode } from "./RunModeSelect";
 import "./TaskInput.css";
 
+type LocalWorkspaceMode = "worktree" | "root";
+
 interface TaskInputEditorProps {
   editor: Editor | null;
   isCreatingTask: boolean;
-  workspaceMode: WorkspaceMode;
-  onWorkspaceModeChange: (mode: WorkspaceMode) => void;
+  runMode: RunMode;
+  localWorkspaceMode: LocalWorkspaceMode;
+  onLocalWorkspaceModeChange: (mode: LocalWorkspaceMode) => void;
   canSubmit: boolean;
   onSubmit: () => void;
   hasDirectory: boolean;
@@ -18,13 +21,15 @@ interface TaskInputEditorProps {
 export function TaskInputEditor({
   editor,
   isCreatingTask,
-  workspaceMode,
-  onWorkspaceModeChange,
+  runMode,
+  localWorkspaceMode,
+  onLocalWorkspaceModeChange,
   canSubmit,
   onSubmit,
   hasDirectory,
 }: TaskInputEditorProps) {
-  const isWorktreeMode = workspaceMode === "worktree";
+  const isWorktreeMode = localWorkspaceMode === "worktree";
+  const isCloudMode = runMode === "cloud";
 
   const getSubmitTooltip = () => {
     if (canSubmit) return "Create task";
@@ -104,29 +109,33 @@ export function TaskInputEditor({
       </Flex>
 
       <Flex justify="end" align="center" gap="4" px="3" pb="3">
-        <Tooltip
-          content={
-            isWorktreeMode
-              ? "Work in a separate directory with its own branch"
-              : "Work directly in the selected folder"
-          }
-        >
-          <IconButton
-            size="1"
-            variant="ghost"
-            onClick={(e) => {
-              e.stopPropagation();
-              onWorkspaceModeChange(isWorktreeMode ? "root" : "worktree");
-            }}
-            className="worktree-toggle-button"
-            data-active={isWorktreeMode}
+        {!isCloudMode && (
+          <Tooltip
+            content={
+              isWorktreeMode
+                ? "Work in a separate directory with its own branch"
+                : "Work directly in the selected folder"
+            }
           >
-            <GitBranchIcon
-              size={16}
-              weight={isWorktreeMode ? "fill" : "regular"}
-            />
-          </IconButton>
-        </Tooltip>
+            <IconButton
+              size="1"
+              variant="ghost"
+              onClick={(e) => {
+                e.stopPropagation();
+                onLocalWorkspaceModeChange(
+                  isWorktreeMode ? "root" : "worktree",
+                );
+              }}
+              className="worktree-toggle-button"
+              data-active={isWorktreeMode}
+            >
+              <GitBranchIcon
+                size={16}
+                weight={isWorktreeMode ? "fill" : "regular"}
+              />
+            </IconButton>
+          </Tooltip>
+        )}
 
         <Tooltip content={getSubmitTooltip()}>
           <IconButton
diff --git a/apps/array/src/renderer/features/task-detail/hooks/useTaskCreation.ts b/apps/array/src/renderer/features/task-detail/hooks/useTaskCreation.ts
diff --git a/apps/array/src/renderer/features/workspace/stores/workspaceStore.ts b/apps/array/src/renderer/features/workspace/stores/workspaceStore.ts
diff --git a/apps/array/src/shared/types.ts b/apps/array/src/shared/types.ts
