Fix Windows backslash paths in component taggers and visual editing (#2280)

src/__tests__/path_utils.test.ts

@@ -50,16 +50,14 @@ describe("safeJoin", () => {
 
     it("should handle Windows-style relative paths with backslashes", () => {
       const result = safeJoin(testBaseDir, "src\\components\\Button.tsx");
-      expect(result).toBe(
-        path.join(testBaseDir, "src\\components\\Button.tsx"),
-      );
+      // safeJoin normalizes backslashes to forward slashes
+      expect(result).toBe("/app/workspace/src/components/Button.tsx");
     });
 
     it("should handle mixed forward/backslashes in relative paths", () => {
       const result = safeJoin(testBaseDir, "src/components\\ui/button.tsx");
-      expect(result).toBe(
-        path.join(testBaseDir, "src/components\\ui/button.tsx"),
-      );
+      // safeJoin normalizes backslashes to forward slashes
+      expect(result).toBe("/app/workspace/src/components/ui/button.tsx");
     });
 
     it("should handle Windows-style nested directories", () => {
@@ -67,14 +65,14 @@ describe("safeJoin", () => {
         testBaseDir,
         "pages\\home\\components\\index.tsx",
       );
-      expect(result).toBe(
-        path.join(testBaseDir, "pages\\home\\components\\index.tsx"),
-      );
+      // safeJoin normalizes backslashes to forward slashes
+      expect(result).toBe("/app/workspace/pages/home/components/index.tsx");
     });
 
     it("should handle relative paths starting with dot and backslash", () => {
       const result = safeJoin(testBaseDir, ".\\src\\file.txt");
-      expect(result).toBe(path.join(testBaseDir, ".\\src\\file.txt"));
+      // safeJoin normalizes backslashes to forward slashes
+      expect(result).toBe("/app/workspace/src/file.txt");
     });
   });
 
@@ -174,19 +172,19 @@ describe("safeJoin", () => {
 
     it("should allow Windows-style paths that look like drive letters but aren't", () => {
       // These look like they could be problematic but are actually safe relative paths
+      // safeJoin normalizes backslashes to forward slashes
       const result1 = safeJoin(testBaseDir, "C_drive\\file.txt");
-      expect(result1).toBe(path.join(testBaseDir, "C_drive\\file.txt"));
+      expect(result1).toBe("/app/workspace/C_drive/file.txt");
 
       const result2 = safeJoin(testBaseDir, "src\\C-file.txt");
-      expect(result2).toBe(path.join(testBaseDir, "src\\C-file.txt"));
+      expect(result2).toBe("/app/workspace/src/C-file.txt");
     });
 
     it("should handle Windows paths with multiple backslashes (not UNC)", () => {
       // Single backslashes in the middle are fine - it's only \\ at the start that's UNC
+      // safeJoin normalizes backslashes to forward slashes
       const result = safeJoin(testBaseDir, "src\\\\components\\\\Button.tsx");
-      expect(result).toBe(
-        path.join(testBaseDir, "src\\\\components\\\\Button.tsx"),
-      );
+      expect(result).toBe("/app/workspace/src/components/Button.tsx");
     });
 
     it("should provide descriptive error messages", () => {

src/ipc/utils/git_utils.ts

@@ -321,18 +321,19 @@ export async function gitAddAll({ path }: GitBaseParams): Promise<void> {
 }
 
 export async function gitAdd({ path, filepath }: GitFileParams): Promise<void> {
+  const normalizedFilepath = normalizePath(filepath);
   const settings = readSettings();
   if (settings.enableNativeGit) {
     await execOrThrow(
-      ["add", "--", filepath],
+      ["add", "--", normalizedFilepath],
       path,
-      `Failed to stage file '${filepath}'`,
+      `Failed to stage file '${normalizedFilepath}'`,
     );
   } else {
     await git.add({
       fs,
       dir: path,
-      filepath,
+      filepath: normalizedFilepath,
     });
   }
 }

src/ipc/utils/path_utils.ts

 import path from "node:path";
+import { normalizePath } from "../../../shared/normalizePath";
 
 /**
  * Safely joins paths while ensuring the result stays within the base directory.
@@ -11,8 +12,11 @@ import path from "node:path";
  * @throws Error if the resulting path would be outside the base directory
  */
 export function safeJoin(basePath: string, ...paths: string[]): string {
+  // Normalize backslashes to forward slashes for cross-platform consistency
+  const normalizedPaths = paths.map((p) => normalizePath(p));
+
   // Check if any of the path segments are absolute paths (which would be unsafe)
-  for (const pathSegment of paths) {
+  for (const pathSegment of normalizedPaths) {
     if (path.isAbsolute(pathSegment)) {
       throw new Error(
         `Unsafe path: joining "${paths.join(", ")}" with base "${basePath}" would escape the base directory`,
@@ -39,7 +43,7 @@ export function safeJoin(basePath: string, ...paths: string[]): string {
   }
 
   // Join all the paths
-  const joinedPath = path.join(basePath, ...paths);
+  const joinedPath = path.join(basePath, ...normalizedPaths);
 
   // Resolve both paths to absolute paths to handle any ".." components
   const resolvedBasePath = path.resolve(basePath);

src/pro/main/ipc/handlers/visual_editing_handlers.ts

@@ -10,8 +10,7 @@ import {
   stylesToTailwind,
   extractClassPrefixes,
 } from "../../../../utils/style-utils";
-import git from "isomorphic-git";
-import { gitCommit } from "../../../../ipc/utils/git_utils";
+import { gitAdd, gitCommit } from "../../../../ipc/utils/git_utils";
 import { safeJoin } from "@/ipc/utils/path_utils";
 import {
   AnalyseComponentParams,
@@ -21,6 +20,7 @@ import {
   transformContent,
   analyzeComponent,
 } from "../../utils/visual_editing_utils";
+import { normalizePath } from "../../../../../shared/normalizePath";
 
 export function registerVisualEditingHandlers() {
   ipcMain.handle(
@@ -67,21 +67,21 @@ export function registerVisualEditingHandlers() {
 
         // Apply changes to each file
         for (const [relativePath, lineChanges] of fileChanges) {
-          const filePath = safeJoin(appPath, relativePath);
+          const normalizedRelativePath = normalizePath(relativePath);
+          const filePath = safeJoin(appPath, normalizedRelativePath);
           const content = await fsPromises.readFile(filePath, "utf-8");
           const transformedContent = transformContent(content, lineChanges);
           await fsPromises.writeFile(filePath, transformedContent, "utf-8");
           // Check if git repository exists and commit the change
           if (fs.existsSync(path.join(appPath, ".git"))) {
-            await git.add({
-              fs,
-              dir: appPath,
-              filepath: relativePath,
+            await gitAdd({
+              path: appPath,
+              filepath: normalizedRelativePath,
             });
 
             await gitCommit({
               path: appPath,
-              message: `Updated ${relativePath}`,
+              message: `Updated ${normalizedRelativePath}`,
             });
           }
         }