From fff8a6398f26a8abf0720562b3a1d6c60ea92c80 Mon Sep 17 00:00:00 2001
From: Kacper <kacperlachowiczwp.pl@wp.pl>
Date: Wed, 10 Dec 2025 14:21:52 +0100
Subject: [PATCH] feat(ui): improve git diff panel with grouped file status
 display
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace individual file status badges with grouped status summaries showing count and icon for each file type (modified, untracked, etc.). This improves UX when dealing with large changesets by reducing visual clutter.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4 <noreply@anthropic.com>
---
 .automaker/feature_list.json             | 19 +++++++
 app/src/components/ui/git-diff-panel.tsx | 71 ++++++++++++++++++------
 2 files changed, 74 insertions(+), 16 deletions(-)

diff --git a/.automaker/feature_list.json b/.automaker/feature_list.json
index 709b0c05..5aaa0dd3 100644
--- a/.automaker/feature_list.json
+++ b/.automaker/feature_list.json
@@ -292,5 +292,24 @@
     "skipTests": true,
     "model": "sonnet",
     "thinkingLevel": "medium"
+  },
+  {
+    "id": "feature-1765372497502-kxppqqv3k",
+    "category": "Uncategorized",
+    "description": "As u can see in our git diff panel on each new file its show modified or untracked if it untracked and that not good for ui / ux what if user / agett change over 40-50 files in one go this wiould be complete mess i would rather do 1 type for each with number and icon",
+    "steps": [],
+    "status": "verified",
+    "startedAt": "2025-12-10T13:15:19.417Z",
+    "imagePaths": [
+      {
+        "id": "img-1765372428239-jg07w3zxv",
+        "path": "/Users/shirone/Library/Application Support/automaker/images/1765372428236-6t02kvclp_SCR-20251210-mplr.png",
+        "filename": "SCR-20251210-mplr.png",
+        "mimeType": "image/png"
+      }
+    ],
+    "skipTests": false,
+    "model": "sonnet",
+    "thinkingLevel": "none"
   }
 ]
\ No newline at end of file
diff --git a/app/src/components/ui/git-diff-panel.tsx b/app/src/components/ui/git-diff-panel.tsx
index c24d94ee..ae734a9c 100644
--- a/app/src/components/ui/git-diff-panel.tsx
+++ b/app/src/components/ui/git-diff-panel.tsx
@@ -82,6 +82,27 @@ const getStatusBadgeColor = (status: string) => {
   }
 };
 
+const getStatusDisplayName = (status: string) => {
+  switch (status) {
+    case "A":
+      return "Added";
+    case "?":
+      return "Untracked";
+    case "D":
+      return "Deleted";
+    case "M":
+      return "Modified";
+    case "U":
+      return "Updated";
+    case "R":
+      return "Renamed";
+    case "C":
+      return "Copied";
+    default:
+      return "Changed";
+  }
+};
+
 /**
  * Parse unified diff format into structured data
  */
@@ -505,23 +526,41 @@ export function GitDiffPanel({
               {/* Summary bar */}
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-4 flex-wrap">
-                  {files.map((file) => (
-                    <div
-                      key={file.path}
-                      className="flex items-center gap-1.5"
-                      title={file.path}
-                    >
-                      {getFileIcon(file.status)}
-                      <span
-                        className={cn(
-                          "text-xs px-1.5 py-0.5 rounded border",
-                          getStatusBadgeColor(file.status)
-                        )}
+                  {(() => {
+                    // Group files by status
+                    const statusGroups = files.reduce((acc, file) => {
+                      const status = file.status;
+                      if (!acc[status]) {
+                        acc[status] = {
+                          count: 0,
+                          statusText: getStatusDisplayName(status),
+                          files: []
+                        };
+                      }
+                      acc[status].count += 1;
+                      acc[status].files.push(file.path);
+                      return acc;
+                    }, {} as Record<string, {count: number, statusText: string, files: string[]}>);
+
+                    return Object.entries(statusGroups).map(([status, group]) => (
+                      <div
+                        key={status}
+                        className="flex items-center gap-1.5"
+                        title={group.files.join('\n')}
+                        data-testid={`git-status-group-${status.toLowerCase()}`}
                       >
-                        {file.statusText}
-                      </span>
-                    </div>
-                  ))}
+                        {getFileIcon(status)}
+                        <span
+                          className={cn(
+                            "text-xs px-1.5 py-0.5 rounded border font-medium",
+                            getStatusBadgeColor(status)
+                          )}
+                        >
+                          {group.count} {group.statusText}
+                        </span>
+                      </div>
+                    ));
+                  })()}
                 </div>
                 <div className="flex items-center gap-2">
                   <Button