feat: Improve git repository context UX (Issue #376)

Enhances the user experience for adding git repositories as context.

Frontend UX Improvements:

1. Enhanced Add Context Modal - Repository options with base/feature branch configuration, protected branch detection, sync configuration
2. Improved Repository Dialog - Branch configuration with branch fetching, protected branch warnings, sync support
3. Enhanced Repository Display - Visual badges, color-coded branch pills, improved layout

Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
Signed-off-by: sallyom <[email protected]>

Author: sallyom

components/frontend/package-lock.json

@@ -13,6 +13,7 @@
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-progress": "^1.1.7",

components/frontend/package.json

@@ -1,14 +1,21 @@
 "use client";
 
 import { useState } from "react";
-import { GitBranch, X, Link, Loader2, CloudUpload } from "lucide-react";
+import { GitBranch, X, Link, Loader2, CloudUpload, GitMerge, Shield } from "lucide-react";
 import { AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 
 type Repository = {
   url: string;
   branch?: string;
+  baseBranch?: string;
+  featureBranch?: string;
+  allowProtectedWork?: boolean;
+  sync?: {
+    url: string;
+    branch?: string;
+  };
 };
 
 type UploadedFile = {
@@ -78,7 +85,7 @@ export function RepositoriesAccordion({
           <p className="text-sm text-muted-foreground">
             Add additional context to improve AI responses.
           </p>
-          
+
           {/* Context Items List (Repos + Uploaded Files) */}
           {totalContextItems === 0 ? (
             <div className="text-center py-6">
@@ -98,26 +105,70 @@ export function RepositoriesAccordion({
                 const repoName = repo.url.split('/').pop()?.replace('.git', '') || `repo-${idx}`;
                 const isRemoving = removingRepo === repoName;
 
+                // Determine which branch info to show
+                const baseBranch = repo.baseBranch || repo.branch || 'main';
+                const featureBranch = repo.featureBranch;
+                const hasSync = !!repo.sync?.url;
+                const allowProtected = repo.allowProtectedWork;
+
                 return (
-                  <div key={`repo-${idx}`} className="flex items-center gap-2 p-2 border rounded bg-muted/30 hover:bg-muted/50 transition-colors">
-                    <GitBranch className="h-4 w-4 text-muted-foreground flex-shrink-0" />
-                    <div className="flex-1 min-w-0">
-                      <div className="text-sm font-medium truncate">{repoName}</div>
-                      <div className="text-xs text-muted-foreground truncate">{repo.url}</div>
+                  <div key={`repo-${idx}`} className="border rounded-lg bg-muted/30 hover:bg-muted/50 transition-colors">
+                    <div className="flex items-start gap-2 p-3">
+                      <GitBranch className="h-4 w-4 text-muted-foreground flex-shrink-0 mt-0.5" />
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-1">
+                          <div className="text-sm font-medium truncate">{repoName}</div>
+                          {hasSync && (
+                            <Badge variant="outline" className="text-xs">
+                              <GitMerge className="h-3 w-3 mr-1" />
+                              Synced
+                            </Badge>
+                          )}
+                          {allowProtected && (
+                            <Badge variant="outline" className="text-xs text-orange-600 border-orange-300">
+                              <Shield className="h-3 w-3 mr-1" />
+                              Protected
+                            </Badge>
+                          )}
+                        </div>
+                        <div className="text-xs text-muted-foreground truncate mb-2">{repo.url}</div>
+
+                        {/* Branch information */}
+                        <div className="flex flex-wrap gap-1 text-xs">
+                          <div className="inline-flex items-center gap-1 bg-background px-2 py-0.5 rounded border">
+                            <span className="text-muted-foreground">Base:</span>
+                            <span className="font-mono">{baseBranch}</span>
+                          </div>
+                          {featureBranch && (
+                            <div className="inline-flex items-center gap-1 bg-blue-50 dark:bg-blue-950 px-2 py-0.5 rounded border border-blue-200 dark:border-blue-800">
+                              <span className="text-blue-700 dark:text-blue-300">Feature:</span>
+                              <span className="font-mono text-blue-900 dark:text-blue-100">{featureBranch}</span>
+                            </div>
+                          )}
+                          {hasSync && (
+                            <div className="inline-flex items-center gap-1 bg-green-50 dark:bg-green-950 px-2 py-0.5 rounded border border-green-200 dark:border-green-800">
+                              <GitMerge className="h-3 w-3 text-green-600 dark:text-green-400" />
+                              <span className="text-green-700 dark:text-green-300">
+                                {repo.sync?.url.split('/').pop()?.replace('.git', '')}
+                              </span>
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-7 w-7 p-0 flex-shrink-0"
+                        onClick={() => handleRemoveRepo(repoName)}
+                        disabled={isRemoving}
+                      >
+                        {isRemoving ? (
+                          <Loader2 className="h-3 w-3 animate-spin" />
+                        ) : (
+                          <X className="h-3 w-3" />
+                        )}
+                      </Button>
                     </div>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="h-7 w-7 p-0 flex-shrink-0"
-                      onClick={() => handleRemoveRepo(repoName)}
-                      disabled={isRemoving}
-                    >
-                      {isRemoving ? (
-                        <Loader2 className="h-3 w-3 animate-spin" />
-                      ) : (
-                        <X className="h-3 w-3" />
-                      )}
-                    </Button>
                   </div>
                 );
               })}
@@ -166,4 +217,3 @@ export function RepositoriesAccordion({
     </AccordionItem>
   );
 }
-