feat: Adjust file changes toolbar + add diff counts (#209)

charlesvien · web-flow · commit fbd57f68e0d7 · 2025-12-05T16:53:17.000-08:00
diff --git a/apps/array/src/main/services/git.ts b/apps/array/src/main/services/git.ts
@@ -13,6 +13,19 @@ const execAsync = promisify(exec);
 const execFileAsync = promisify(execFile);
 const fsPromises = fs.promises;
 
+const countFileLines = async (filePath: string): Promise<number> => {
+  try {
+    const content = await fsPromises.readFile(filePath, "utf-8");
+    if (!content) return 0;
+
+    // Match git line counting: do not count trailing newline as extra line
+    const lines = content.split("\n");
+    return lines[lines.length - 1] === "" ? lines.length - 1 : lines.length;
+  } catch {
+    return 0;
+  }
+};
+
 const getAllFilesInDirectory = async (
   directoryPath: string,
   basePath: string,
@@ -194,26 +207,63 @@ const getChangedFilesAgainstHead = async (
     const files: ChangedFile[] = [];
     const seenPaths = new Set<string>();
 
-    // Use git diff with -M to detect renames in working tree
-    const { stdout: diffOutput } = await execAsync(
-      "git diff -M --name-status HEAD",
-      { cwd: directoryPath },
-    );
+    // Run git commands in parallel
+    const [nameStatusResult, numstatResult, statusResult] = await Promise.all([
+      execAsync("git diff -M --name-status HEAD", { cwd: directoryPath }),
+      execAsync("git diff -M --numstat HEAD", { cwd: directoryPath }),
+      execAsync("git status --porcelain", { cwd: directoryPath }),
+    ]);
+
+    // Build line stats map from numstat output
+    // Format: ADDED\tREMOVED\tPATH or for renames: ADDED\tREMOVED\tOLD_PATH => NEW_PATH
+    const lineStats = new Map<string, { added: number; removed: number }>();
+    for (const line of numstatResult.stdout
+      .trim()
+      .split("\n")
+      .filter(Boolean)) {
+      const parts = line.split("\t");
+      if (parts.length >= 3) {
+        const added = parts[0] === "-" ? 0 : parseInt(parts[0], 10) || 0;
+        const removed = parts[1] === "-" ? 0 : parseInt(parts[1], 10) || 0;
+        const filePath = parts.slice(2).join("\t");
+        // For renames, numstat shows "old => new" - extract both paths
+        if (filePath.includes(" => ")) {
+          const renameParts = filePath.split(" => ");
+          // Store under both old and new path for lookup
+          lineStats.set(renameParts[0], { added, removed });
+          lineStats.set(renameParts[1], { added, removed });
+        } else {
+          lineStats.set(filePath, { added, removed });
+        }
+      }
+    }
 
-    for (const line of diffOutput.trim().split("\n").filter(Boolean)) {
-      // Format: STATUS\tPATH or STATUS\tOLD_PATH\tNEW_PATH for renames
+    // Parse name-status output for file status
+    // Format: STATUS\tPATH or STATUS\tOLD_PATH\tNEW_PATH for renames
+    for (const line of nameStatusResult.stdout
+      .trim()
+      .split("\n")
+      .filter(Boolean)) {
       const parts = line.split("\t");
       const statusChar = parts[0][0]; // First char (ignore rename percentage like R100)
 
       if (statusChar === "R" && parts.length >= 3) {
         // Rename: R100\told-path\tnew-path
         const originalPath = parts[1];
         const newPath = parts[2];
-        files.push({ path: newPath, status: "renamed", originalPath });
+        const stats = lineStats.get(newPath) || lineStats.get(originalPath);
+        files.push({
+          path: newPath,
+          status: "renamed",
+          originalPath,
+          linesAdded: stats?.added,
+          linesRemoved: stats?.removed,
+        });
         seenPaths.add(newPath);
         seenPaths.add(originalPath);
       } else if (parts.length >= 2) {
         const filePath = parts[1];
+        const stats = lineStats.get(filePath);
         let status: GitFileStatus;
         switch (statusChar) {
           case "D":
@@ -225,23 +275,22 @@ const getChangedFilesAgainstHead = async (
           default:
             status = "modified";
         }
-        files.push({ path: filePath, status });
+        files.push({
+          path: filePath,
+          status,
+          linesAdded: stats?.added,
+          linesRemoved: stats?.removed,
+        });
         seenPaths.add(filePath);
       }
     }
 
     // Add untracked files from git status
-    const { stdout: statusOutput } = await execAsync("git status --porcelain", {
-      cwd: directoryPath,
-    });
-
-    for (const line of statusOutput.trim().split("\n").filter(Boolean)) {
+    for (const line of statusResult.stdout.trim().split("\n").filter(Boolean)) {
       const statusCode = line.substring(0, 2);
       const filePath = line.substring(3);
 
-      // Only add untracked files not already seen
       if (statusCode === "??" && !seenPaths.has(filePath)) {
-        // Check if it's a directory (git shows directories with trailing /)
         if (filePath.endsWith("/")) {
           const dirPath = filePath.slice(0, -1);
           try {
@@ -251,14 +300,28 @@ const getChangedFilesAgainstHead = async (
             );
             for (const file of dirFiles) {
               if (!seenPaths.has(file)) {
-                files.push({ path: file, status: "untracked" });
+                const lineCount = await countFileLines(
+                  path.join(directoryPath, file),
+                );
+                files.push({
+                  path: file,
+                  status: "untracked",
+                  linesAdded: lineCount || undefined,
+                });
               }
             }
           } catch {
             // Directory might not exist or be inaccessible
           }
         } else {
-          files.push({ path: filePath, status: "untracked" });
+          const lineCount = await countFileLines(
+            path.join(directoryPath, filePath),
+          );
+          files.push({
+            path: filePath,
+            status: "untracked",
+            linesAdded: lineCount || undefined,
+          });
         }
       }
     }
diff --git a/apps/array/src/renderer/features/task-detail/components/ChangesPanel.tsx b/apps/array/src/renderer/features/task-detail/components/ChangesPanel.tsx
@@ -127,7 +127,7 @@ function ChangedFileItem({
 
     await window.electronAPI.discardFileChanges(
       repoPath,
-      file.path,
+      file.originalPath ?? file.path, // For renames, use the original path
       file.status,
     );
 
@@ -138,6 +138,9 @@ function ChangedFileItem({
     });
   };
 
+  const hasLineStats =
+    file.linesAdded !== undefined || file.linesRemoved !== undefined;
+
   return (
     <Flex
       align="center"
@@ -154,13 +157,6 @@ function ChangedFileItem({
         paddingRight: "8px",
       }}
     >
-      <Badge
-        size="1"
-        color={indicator.color}
-        style={{ flexShrink: 0, fontSize: "10px", padding: "0 4px" }}
-      >
-        {indicator.label}
-      </Badge>
       <FileIcon
         size={14}
         weight="regular"
@@ -190,18 +186,56 @@ function ChangedFileItem({
       >
         {file.originalPath ? `${file.originalPath} → ${file.path}` : file.path}
       </Text>
-      <Tooltip content="Discard changes">
-        <IconButton
-          size="1"
-          variant="ghost"
-          color="gray"
-          onClick={handleDiscard}
-          className={isActive ? "" : "opacity-0 group-hover:opacity-100"}
-          style={{ flexShrink: 0, width: "20px", height: "20px" }}
+
+      {hasLineStats && (
+        <Flex
+          align="center"
+          gap="1"
+          className="group-hover:hidden"
+          style={{ flexShrink: 0, fontSize: "10px", fontFamily: "monospace" }}
         >
-          <ArrowCounterClockwiseIcon size={12} />
-        </IconButton>
-      </Tooltip>
+          {(file.linesAdded ?? 0) > 0 && (
+            <Text style={{ color: "var(--green-9)" }}>+{file.linesAdded}</Text>
+          )}
+          {(file.linesRemoved ?? 0) > 0 && (
+            <Text style={{ color: "var(--red-9)" }}>-{file.linesRemoved}</Text>
+          )}
+        </Flex>
+      )}
+
+      <Flex
+        align="center"
+        gap="1"
+        className="hidden group-hover:flex"
+        style={{ flexShrink: 0 }}
+      >
+        <Tooltip content="Discard changes">
+          <IconButton
+            size="1"
+            variant="ghost"
+            color="gray"
+            onClick={handleDiscard}
+            style={{
+              flexShrink: 0,
+              width: "18px",
+              height: "18px",
+              padding: 0,
+              marginLeft: "2px",
+              marginRight: "2px",
+            }}
+          >
+            <ArrowCounterClockwiseIcon size={12} />
+          </IconButton>
+        </Tooltip>
+      </Flex>
+
+      <Badge
+        size="1"
+        color={indicator.color}
+        style={{ flexShrink: 0, fontSize: "10px", padding: "0 4px" }}
+      >
+        {indicator.label}
+      </Badge>
     </Flex>
   );
 }
diff --git a/apps/array/src/renderer/features/task-detail/components/ChangesTabBadge.tsx b/apps/array/src/renderer/features/task-detail/components/ChangesTabBadge.tsx
@@ -31,7 +31,7 @@ export function ChangesTabBadge({ taskId, task }: ChangesTabBadgeProps) {
   const filesLabel = diffStats.filesChanged === 1 ? "file" : "files";
 
   return (
-    <Flex gap="2">
+    <Flex gap="2" mr="2">
       {diffStats.linesAdded > 0 && (
         <Text size="1">
           <Text size="1" color="green">
diff --git a/apps/array/src/shared/types.ts b/apps/array/src/shared/types.ts
@@ -184,6 +184,8 @@ export interface ChangedFile {
   path: string;
   status: GitFileStatus;
   originalPath?: string; // For renames: the old path
+  linesAdded?: number;
+  linesRemoved?: number;
 }
 
 // External apps detection types

Original file line number	Diff line number	Diff line change
`@@ -184,6 +184,8 @@ export interface ChangedFile {`
`184`	`184`	`path: string;`
`185`	`185`	`status: GitFileStatus;`
`186`	`186`	`originalPath?: string; // For renames: the old path`
	`187`	`+ linesAdded?: number;`
	`188`	`+ linesRemoved?: number;`
`187`	`189`	`}`
`188`	`190`
`189`	`191`	`// External apps detection types`