block ui when clonign

Author: jonathanlab

src/renderer/features/repository-picker/components/RepositoryPicker.tsx

@@ -4,6 +4,7 @@ import { ChevronDownIcon } from "@radix-ui/react-icons";
 import { Box, Button, Flex, Popover, Text, TextField } from "@radix-ui/themes";
 import { useRepositoryIntegration } from "@renderer/hooks/useIntegrations";
 import type { RepositoryConfig } from "@shared/types";
+import { cloneStore } from "@stores/cloneStore";
 import { useMemo, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 
@@ -34,6 +35,7 @@ export function RepositoryPicker({
   const searchInputRef = useRef<HTMLInputElement>(null);
 
   const { repositories, githubIntegration } = useRepositoryIntegration();
+  const { isCloning } = cloneStore();
 
   const displayValue = value ? `${value.repository}` : placeholder;
 
@@ -103,19 +105,32 @@ export function RepositoryPicker({
     }
   };
 
-  const renderItem = (repo: RepositoryConfig) => (
-    <Command.Item
-      key={`${repo.organization}/${repo.repository}`}
-      onSelect={() => handleSelect(repo)}
-    >
-      <Flex direction="row" gap="4">
-        <Text size="1">{repo.repository}</Text>
-        <Text size="1" color="gray" className="text-gray-9">
-          {repo.organization}
-        </Text>
-      </Flex>
-    </Command.Item>
-  );
+  const renderItem = (repo: RepositoryConfig) => {
+    const repoKey = `${repo.organization}/${repo.repository}`;
+    const cloning = isCloning(repoKey);
+
+    return (
+      <Command.Item
+        key={repoKey}
+        onSelect={() => handleSelect(repo)}
+        disabled={cloning}
+      >
+        <Flex direction="row" gap="4" align="center">
+          <Text size="1" color={cloning ? "gray" : undefined}>
+            {repo.repository}
+          </Text>
+          <Text size="1" color="gray" className="text-gray-9">
+            {repo.organization}
+          </Text>
+          {cloning && (
+            <Text size="1" color="amber">
+              Cloning...
+            </Text>
+          )}
+        </Flex>
+      </Command.Item>
+    );
+  };
 
   const hasIntegration = githubIntegration !== null;
 

src/renderer/features/tasks/components/CliTaskPanel.tsx

@@ -11,6 +11,7 @@ import { useTaskExecutionStore } from "@features/tasks/stores/taskExecutionStore
 import { ShellTerminal } from "@features/terminal/components/ShellTerminal";
 import { Box, Flex, Text } from "@radix-ui/themes";
 import type { RepositoryConfig } from "@shared/types";
+import { cloneStore } from "@stores/cloneStore";
 import { useLayoutStore } from "@stores/layoutStore";
 import { repositoryWorkspaceStore } from "@stores/repositoryWorkspaceStore";
 import { useTabStore } from "@stores/tabStore";
@@ -51,10 +52,20 @@ export function CliTaskPanel() {
     selectedRepository,
     derivedPath,
     pathExists,
+    isInitiatingClone,
     selectRepository,
     validateAndUpdatePath,
   } = repositoryWorkspaceStore();
 
+  const { isCloning } = cloneStore();
+  const repoIsCloning =
+    isInitiatingClone ||
+    (selectedRepository
+      ? isCloning(
+          `${selectedRepository.organization}/${selectedRepository.repository}`,
+        )
+      : false);
+
   const [isFocused, setIsFocused] = useState(false);
   const [isShellFocused, setIsShellFocused] = useState(false);
   const caretRef = useRef<HTMLDivElement>(null);
@@ -196,6 +207,13 @@ export function CliTaskPanel() {
     }
   }, [cliMode, editor]);
 
+  // Update editor editable state based on clone status
+  useEffect(() => {
+    if (editor) {
+      editor.setEditable(!repoIsCloning);
+    }
+  }, [editor, repoIsCloning]);
+
   // Validate path on mount if repository is selected
   useEffect(() => {
     if (selectedRepository) {
@@ -204,7 +222,13 @@ export function CliTaskPanel() {
   }, [selectedRepository, validateAndUpdatePath]);
 
   const handleSubmit = useCallback(() => {
-    if (!editor || !isAuthenticated || !client || !selectedRepository) {
+    if (
+      !editor ||
+      !isAuthenticated ||
+      !client ||
+      !selectedRepository ||
+      repoIsCloning
+    ) {
       return;
     }
 
@@ -268,6 +292,7 @@ export function CliTaskPanel() {
     lastUsedRunMode,
     setRunMode,
     runTask,
+    repoIsCloning,
   ]);
 
   return (
@@ -360,6 +385,8 @@ export function CliTaskPanel() {
             >
               {!selectedRepository ? (
                 <EmptyStateMessage message="Select a repository to start" />
+              ) : repoIsCloning ? (
+                <EmptyStateMessage message="Repository is being cloned..." />
               ) : (
                 <>
                   <Text

src/renderer/stores/repositoryWorkspaceStore.ts

@@ -10,6 +10,7 @@ interface RepositoryWorkspaceState {
   derivedPath: string;
   pathExists: boolean;
   isValidating: boolean;
+  isInitiatingClone: boolean;
 
   selectRepository: (repo: RepositoryConfig) => Promise<void>;
   clearRepository: () => void;
@@ -151,6 +152,7 @@ export const repositoryWorkspaceStore = create<RepositoryWorkspaceState>()(
         derivedPath: "",
         pathExists: false,
         isValidating: false,
+        isInitiatingClone: false,
 
         clearRepository: () => {
           stopPolling();
@@ -186,6 +188,21 @@ export const repositoryWorkspaceStore = create<RepositoryWorkspaceState>()(
         },
 
         selectRepository: async (repo: RepositoryConfig) => {
+          const repoKey = `${repo.organization}/${repo.repository}`;
+          const { isCloning } = cloneStore.getState();
+
+          if (isCloning(repoKey)) {
+            await window.electronAPI.showMessageBox({
+              type: "warning",
+              title: "Repository cloning",
+              message: `${repoKey} is currently being cloned`,
+              detail:
+                "Please wait for the clone to complete before selecting this repository.",
+              buttons: ["OK"],
+            });
+            return;
+          }
+
           const targetPath = getDerivedPath(repo);
 
           if (!targetPath) {
@@ -216,10 +233,15 @@ export const repositoryWorkspaceStore = create<RepositoryWorkspaceState>()(
             selectedRepository: repo,
             derivedPath: targetPath,
             pathExists: false,
+            isInitiatingClone: true,
           });
 
-          await initiateClone(repo, targetPath);
-          startPolling();
+          try {
+            await initiateClone(repo, targetPath);
+            startPolling();
+          } finally {
+            set({ isInitiatingClone: false });
+          }
         },
       };
     },