🤖 feat: prompt to create folder when path doesn't exist (#1175)

ibetitsmike · web-flow · commit 0efc3991a745 · 2025-12-17T18:19:58.000Z
When users type a non-existent path in the Add Project modal or the
remote DirectoryPickerModal, they now see a 'Create Folder' button
instead of just an error. Clicking it creates the folder (recursively
like `mkdir -p`) and then either adds the project or navigates to the
newly created directory.

## Changes
- Add `general.createDirectory` API endpoint (recursive mkdir)
- Detect 'path does not exist' errors in ProjectCreateModal
- Detect ENOENT errors in DirectoryPickerModal  
- Show inline 'Create Folder' button when path doesn't exist

## Testing
1. Open Add Project modal
2. Type a non-existent path (e.g., `~/new-project-folder`)
3. Click 'Add Project' - should see 'This folder doesn't exist.' with
'Create Folder' button
4. Click 'Create Folder' - folder is created and project is added

For remote directory picker:
1. Connect to mux server in browser
2. Open Add Project → Browse
3. Type non-existent path in path input, press Enter
4. Should see 'Folder doesn't exist.' with 'Create Folder' button
5. Click it - folder created and navigated to

---
_Generated with `mux` • Model: `claude-sonnet-4-20250514` • Thinking:
`none`_
diff --git a/src/browser/components/DirectoryPickerModal.tsx b/src/browser/components/DirectoryPickerModal.tsx
@@ -33,6 +33,8 @@ export const DirectoryPickerModal: React.FC<DirectoryPickerModalProps> = ({
   const [root, setRoot] = useState<FileTreeNode | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  // Track if we can offer to create the folder (path doesn't exist)
+  const [canCreateFolder, setCanCreateFolder] = useState(false);
   const [pathInput, setPathInput] = useState(initialPath || "");
   const [selectedIndex, setSelectedIndex] = useState(0);
   const treeRef = useRef<HTMLDivElement>(null);
@@ -45,13 +47,22 @@ export const DirectoryPickerModal: React.FC<DirectoryPickerModalProps> = ({
       }
       setIsLoading(true);
       setError(null);
+      setCanCreateFolder(false);
 
       try {
         const result = await api.general.listDirectory({ path });
 
         if (!result.success) {
           const errorMessage = typeof result.error === "string" ? result.error : "Unknown error";
-          setError(`Failed to load directory: ${errorMessage}`);
+          // Detect "no such file or directory" to offer folder creation
+          const isNotFound =
+            errorMessage.includes("ENOENT") || errorMessage.includes("no such file or directory");
+          if (isNotFound) {
+            setCanCreateFolder(true);
+            setError("Folder doesn't exist.");
+          } else {
+            setError(`Failed to load directory: ${errorMessage}`);
+          }
           setRoot(null);
           return;
         }
@@ -70,8 +81,10 @@ export const DirectoryPickerModal: React.FC<DirectoryPickerModalProps> = ({
     [api]
   );
 
+  // Sync pathInput with initialPath when modal opens (component stays mounted)
   useEffect(() => {
     if (!isOpen) return;
+    setPathInput(initialPath || "");
     void loadDirectory(initialPath || ".");
   }, [isOpen, initialPath, loadDirectory]);
 
@@ -87,14 +100,78 @@ export const DirectoryPickerModal: React.FC<DirectoryPickerModalProps> = ({
     void loadDirectory(`${root.path}/..`);
   }, [loadDirectory, root]);
 
-  const handleConfirm = useCallback(() => {
+  const handleConfirm = useCallback(async () => {
+    const trimmedInput = pathInput.trim();
+
+    // If user has typed a different path, try to load it first
+    if (trimmedInput && trimmedInput !== root?.path) {
+      if (!api) return;
+      setIsLoading(true);
+      setError(null);
+      setCanCreateFolder(false);
+
+      try {
+        const result = await api.general.listDirectory({ path: trimmedInput });
+        if (!result.success) {
+          const errorMessage = typeof result.error === "string" ? result.error : "Unknown error";
+          const isNotFound =
+            errorMessage.includes("ENOENT") || errorMessage.includes("no such file or directory");
+          if (isNotFound) {
+            setCanCreateFolder(true);
+            setError("Folder doesn't exist.");
+          } else {
+            setError(`Failed to load directory: ${errorMessage}`);
+          }
+          setRoot(null);
+          return;
+        }
+        // Success - select this path
+        onSelectPath(result.data.path);
+        onClose();
+      } catch (err) {
+        const message = err instanceof Error ? err.message : String(err);
+        setError(`Failed to load directory: ${message}`);
+        setRoot(null);
+      } finally {
+        setIsLoading(false);
+      }
+      return;
+    }
+
+    // Otherwise use the current root
     if (!root) {
       return;
     }
 
     onSelectPath(root.path);
     onClose();
-  }, [onClose, onSelectPath, root]);
+  }, [onClose, onSelectPath, root, pathInput, api]);
+
+  const handleCreateFolder = useCallback(async () => {
+    const trimmedPath = pathInput.trim();
+    if (!trimmedPath || !api) return;
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const createResult = await api.general.createDirectory({ path: trimmedPath });
+      if (!createResult.success) {
+        setError(createResult.error ?? "Failed to create folder");
+        setCanCreateFolder(false);
+        return;
+      }
+      // Folder created - now navigate to it
+      setCanCreateFolder(false);
+      void loadDirectory(createResult.data.normalizedPath);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "An unexpected error occurred";
+      setError(`Failed to create folder: ${errorMessage}`);
+      setCanCreateFolder(false);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [pathInput, api, loadDirectory]);
 
   const handleOpenChange = useCallback(
     (open: boolean) => {
@@ -120,7 +197,7 @@ export const DirectoryPickerModal: React.FC<DirectoryPickerModalProps> = ({
       } else if ((e.ctrlKey || e.metaKey) && e.key === "o") {
         e.preventDefault();
         if (!isLoading && root) {
-          handleConfirm();
+          void handleConfirm();
         }
       }
     },
@@ -144,13 +221,30 @@ export const DirectoryPickerModal: React.FC<DirectoryPickerModalProps> = ({
         <div className="mb-3">
           <Input
             value={pathInput}
-            onChange={(e) => setPathInput(e.target.value)}
+            onChange={(e) => {
+              setPathInput(e.target.value);
+              setCanCreateFolder(false);
+            }}
             onKeyDown={handlePathInputKeyDown}
             placeholder="Enter path..."
             className="bg-modal-bg border-border-medium h-9 font-mono text-sm"
           />
         </div>
-        {error && <div className="text-error mb-3 text-xs">{error}</div>}
+        {error && (
+          <div className="mb-3 flex items-center gap-2 text-xs">
+            <span className={canCreateFolder ? "text-muted" : "text-error"}>{error}</span>
+            {canCreateFolder && (
+              <Button
+                size="sm"
+                onClick={() => void handleCreateFolder()}
+                disabled={isLoading}
+                className="h-6 px-2 py-0 text-xs"
+              >
+                Create Folder
+              </Button>
+            )}
+          </div>
+        )}
         <div
           ref={treeRef}
           className="bg-modal-bg border-border-medium mb-4 h-80 overflow-hidden rounded border"
@@ -161,7 +255,7 @@ export const DirectoryPickerModal: React.FC<DirectoryPickerModalProps> = ({
             isLoading={isLoading}
             onNavigateTo={handleNavigateTo}
             onNavigateParent={handleNavigateParent}
-            onConfirm={handleConfirm}
+            onConfirm={() => void handleConfirm()}
             selectedIndex={selectedIndex}
             onSelectedIndexChange={setSelectedIndex}
           />
diff --git a/src/browser/components/ProjectCreateModal.tsx b/src/browser/components/ProjectCreateModal.tsx
@@ -32,6 +32,8 @@ export const ProjectCreateModal: React.FC<ProjectCreateModalProps> = ({
   const { api } = useAPI();
   const [path, setPath] = useState("");
   const [error, setError] = useState("");
+  // Track if the error is specifically "path does not exist" so we can offer to create it
+  const [canCreateFolder, setCanCreateFolder] = useState(false);
   // In Electron mode, window.api exists (set by preload) and has native directory picker via ORPC
   // In browser mode, window.api doesn't exist and we use web-based DirectoryPickerModal
   const isDesktop = !!window.api;
@@ -42,12 +44,14 @@ export const ProjectCreateModal: React.FC<ProjectCreateModalProps> = ({
   const handleCancel = useCallback(() => {
     setPath("");
     setError("");
+    setCanCreateFolder(false);
     onClose();
   }, [onClose]);
 
   const handleWebPickerPathSelected = useCallback((selected: string) => {
     setPath(selected);
     setError("");
+    setCanCreateFolder(false);
   }, []);
 
   const handleBrowse = useCallback(async () => {
@@ -56,6 +60,7 @@ export const ProjectCreateModal: React.FC<ProjectCreateModalProps> = ({
       if (selectedPath) {
         setPath(selectedPath);
         setError("");
+        setCanCreateFolder(false);
       }
     } catch (err) {
       console.error("Failed to pick directory:", err);
@@ -70,6 +75,7 @@ export const ProjectCreateModal: React.FC<ProjectCreateModalProps> = ({
     }
 
     setError("");
+    setCanCreateFolder(false);
     if (!api) {
       setError("Not connected to server");
       return;
@@ -101,7 +107,13 @@ export const ProjectCreateModal: React.FC<ProjectCreateModalProps> = ({
         // Backend validation error - show inline, keep modal open
         const errorMessage =
           typeof result.error === "string" ? result.error : "Failed to add project";
-        setError(errorMessage);
+        // Detect "Path does not exist" error to offer folder creation
+        if (errorMessage.includes("Path does not exist")) {
+          setCanCreateFolder(true);
+          setError("This folder doesn't exist.");
+        } else {
+          setError(errorMessage);
+        }
       }
     } catch (err) {
       // Unexpected error
@@ -112,6 +124,32 @@ export const ProjectCreateModal: React.FC<ProjectCreateModalProps> = ({
     }
   }, [path, onSuccess, onClose, api]);
 
+  const handleCreateFolder = useCallback(async () => {
+    const trimmedPath = path.trim();
+    if (!trimmedPath || !api) return;
+
+    setIsCreating(true);
+    setError("");
+
+    try {
+      const createResult = await api.general.createDirectory({ path: trimmedPath });
+      if (!createResult.success) {
+        setError(createResult.error ?? "Failed to create folder");
+        setCanCreateFolder(false);
+        setIsCreating(false);
+        return;
+      }
+      // Folder created - now retry adding the project (handleSelect manages isCreating)
+      setCanCreateFolder(false);
+      await handleSelect();
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "An unexpected error occurred";
+      setError(`Failed to create folder: ${errorMessage}`);
+      setCanCreateFolder(false);
+      setIsCreating(false);
+    }
+  }, [path, api, handleSelect]);
+
   const handleBrowseClick = useCallback(() => {
     if (isDesktop) {
       void handleBrowse();
@@ -154,6 +192,7 @@ export const ProjectCreateModal: React.FC<ProjectCreateModalProps> = ({
               onChange={(e) => {
                 setPath(e.target.value);
                 setError("");
+                setCanCreateFolder(false);
               }}
               onKeyDown={handleKeyDown}
               placeholder="/home/user/projects/my-project"
@@ -172,12 +211,26 @@ export const ProjectCreateModal: React.FC<ProjectCreateModalProps> = ({
               </Button>
             )}
           </div>
-          {error && <div className="text-error text-xs">{error}</div>}
+          {error && (
+            <div className="flex items-center gap-2 text-xs">
+              <span className={canCreateFolder ? "text-muted" : "text-error"}>{error}</span>
+              {canCreateFolder && (
+                <Button
+                  size="sm"
+                  onClick={() => void handleCreateFolder()}
+                  disabled={isCreating}
+                  className="h-6 px-2 py-0 text-xs"
+                >
+                  Create Folder
+                </Button>
+              )}
+            </div>
+          )}
           <DialogFooter>
             <Button variant="secondary" onClick={handleCancel} disabled={isCreating}>
               Cancel
             </Button>
-            <Button onClick={() => void handleSelect()} disabled={isCreating}>
+            <Button onClick={() => void handleSelect()} disabled={isCreating || canCreateFolder}>
               {isCreating ? "Adding..." : "Add Project"}
             </Button>
           </DialogFooter>
diff --git a/src/common/orpc/schemas/api.ts b/src/common/orpc/schemas/api.ts
@@ -606,6 +606,14 @@ export const general = {
     input: z.object({ path: z.string() }),
     output: ResultSchema(FileTreeNodeSchema),
   },
+  /**
+   * Create a directory at the specified path.
+   * Creates parent directories recursively if they don't exist (like mkdir -p).
+   */
+  createDirectory: {
+    input: z.object({ path: z.string() }),
+    output: ResultSchema(z.object({ normalizedPath: z.string() }), z.string()),
+  },
   ping: {
     input: z.string(),
     output: z.string(),
diff --git a/src/node/orpc/router.ts b/src/node/orpc/router.ts
@@ -165,6 +165,12 @@ export const router = (authToken?: string) => {
         .handler(async ({ context, input }) => {
           return context.projectService.listDirectory(input.path);
         }),
+      createDirectory: t
+        .input(schemas.general.createDirectory.input)
+        .output(schemas.general.createDirectory.output)
+        .handler(async ({ context, input }) => {
+          return context.projectService.createDirectory(input.path);
+        }),
       ping: t
         .input(schemas.general.ping.input)
         .output(schemas.general.ping.output)
diff --git a/src/node/services/projectService.ts b/src/node/services/projectService.ts
@@ -173,6 +173,26 @@ export class ProjectService {
       };
     }
   }
+
+  async createDirectory(
+    requestedPath: string
+  ): Promise<Result<{ normalizedPath: string }, string>> {
+    try {
+      // Expand ~ to home directory
+      const expanded =
+        requestedPath === "~" || requestedPath.startsWith("~/")
+          ? requestedPath.replace("~", os.homedir())
+          : requestedPath;
+      const normalizedPath = path.resolve(expanded);
+
+      await fsPromises.mkdir(normalizedPath, { recursive: true });
+      return Ok({ normalizedPath });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      return Err(`Failed to create directory: ${message}`);
+    }
+  }
+
   async updateSecrets(projectPath: string, secrets: Secret[]): Promise<Result<void>> {
     try {
       await this.config.updateProjectSecrets(projectPath, secrets);
