feat(desktop): show git branch in working directory badge (#5082)

Author: tt-a1i

packages/desktop/apps/electron/src/renderer/components/app-shell/input/FreeFormInput.tsx

@@ -11,6 +11,7 @@ import {
   ChevronDown,
   AlertCircle,
   CornerDownRight,
+  GitBranch,
   X,
 } from 'lucide-react';
 import { Icon_Home, Icon_Folder } from '@craft-agent/ui';
@@ -2753,15 +2754,22 @@ function WorkingDirectoryBadge({
 
   // Fetch git branch when working directory changes
   React.useEffect(() => {
+    let cancelled = false;
+    setGitBranch(null);
+
     if (workingDirectory) {
       window.electronAPI
         ?.getGitBranch?.(workingDirectory)
         .then((branch: string | null) => {
-          setGitBranch(branch);
+          if (!cancelled) {
+            setGitBranch(branch);
+          }
         });
-    } else {
-      setGitBranch(null);
     }
+
+    return () => {
+      cancelled = true;
+    };
   }, [workingDirectory]);
 
   // Reset filter, refresh history, and focus input when popover opens
@@ -2833,6 +2841,7 @@ function WorkingDirectoryBadge({
   const folderName = hasFolder
     ? getPathBasename(workingDirectory) || 'Folder'
     : 'Work in Folder';
+  const visibleGitBranch = hasFolder ? gitBranch : null;
 
   // Show reset option when a folder is selected and it differs from session folder
   const showReset =
@@ -2854,6 +2863,21 @@ function WorkingDirectoryBadge({
             <FreeFormInputContextBadge
               icon={<Icon_Home className="h-4 w-4" />}
               label={folderName}
+              ariaLabel={
+                visibleGitBranch
+                  ? `${folderName}, ${t('chat.onBranch', {
+                      branch: visibleGitBranch,
+                    })}`
+                  : folderName
+              }
+              trailingContent={
+                visibleGitBranch ? (
+                  <span className="inline-flex min-w-0 max-w-[120px] shrink items-center gap-1 text-muted-foreground">
+                    <GitBranch className="h-3 w-3 shrink-0" />
+                    <span className="truncate">{visibleGitBranch}</span>
+                  </span>
+                ) : undefined
+              }
               isExpanded={isEmptySession}
               hasSelection={hasFolder}
               showChevron={true}

packages/desktop/apps/electron/src/renderer/components/app-shell/input/FreeFormInputContextBadge.tsx

@@ -9,6 +9,10 @@ export interface FreeFormInputContextBadgeProps {
   icon: React.ReactNode
   /** Label text - shown in expanded state or collapsed with selection */
   label: string
+  /** Accessible label for the full badge when visible metadata is appended */
+  ariaLabel?: string
+  /** Optional trailing metadata shown after the label */
+  trailingContent?: React.ReactNode
   /** Whether to show expanded state (icon + label + chevron) vs collapsed */
   isExpanded?: boolean
   /** Whether there's an active selection (affects collapsed state styling and shows label) */
@@ -45,6 +49,8 @@ export const FreeFormInputContextBadge = React.forwardRef<HTMLButtonElement, Fre
     {
       icon,
       label,
+      ariaLabel,
+      trailingContent,
       isExpanded = false,
       hasSelection = false,
       showChevron = false,
@@ -68,7 +74,7 @@ export const FreeFormInputContextBadge = React.forwardRef<HTMLButtonElement, Fre
       <button
         ref={mergedRef as React.Ref<HTMLButtonElement>}
         type="button"
-        aria-label={label}
+        aria-label={ariaLabel ?? label}
         onClick={onClick}
         disabled={disabled}
         data-tutorial={dataTutorial}
@@ -107,6 +113,8 @@ export const FreeFormInputContextBadge = React.forwardRef<HTMLButtonElement, Fre
           )
         )}
 
+        {showLabel && trailingContent}
+
         {/* Optional chevron - only in expanded state */}
         {isExpanded && showChevron && (
           <ChevronDown className="h-3 w-3 opacity-50 shrink-0" />