Add branch sync action to git controls (#56)

- Show a dedicated sync button when a branch can pull or push
- Add sync state logic and coverage for busy, diverged, and unavailable cases
- Keep sidebar formatting aligned with lint

Author: BunsDev

apps/web/src/components/GitActionsControl.logic.test.ts

@@ -8,6 +8,7 @@ import {
   resolveDefaultBranchActionDialogCopy,
   resolveGitFailureRetryLabel,
   resolveQuickAction,
+  resolveSyncAction,
   summarizeGitFailure,
   summarizeGitResult,
 } from "./GitActionsControl.logic";
@@ -410,6 +411,55 @@ describe("when: branch has diverged from upstream", () => {
   });
 });
 
+describe("sync button state", () => {
+  it("returns pull sync action when the branch is behind upstream", () => {
+    const syncAction = resolveSyncAction(status({ behindCount: 2 }), false);
+    assert.deepEqual(syncAction, {
+      label: "Sync branch",
+      disabled: false,
+      kind: "run_pull",
+    });
+  });
+
+  it("returns push sync action when the branch is ahead of upstream", () => {
+    const syncAction = resolveSyncAction(status({ aheadCount: 3 }), false);
+    assert.deepEqual(syncAction, {
+      label: "Sync branch",
+      disabled: false,
+      kind: "run_action",
+      action: "commit_push",
+    });
+  });
+
+  it("returns a disabled sync hint when the branch has diverged from upstream", () => {
+    const syncAction = resolveSyncAction(status({ aheadCount: 2, behindCount: 1 }), false);
+    assert.deepEqual(syncAction, {
+      label: "Sync branch",
+      disabled: true,
+      kind: "show_hint",
+      hint: "Branch has diverged from upstream. Rebase/merge first.",
+    });
+  });
+
+  it("returns a disabled sync hint while git actions are busy", () => {
+    const syncAction = resolveSyncAction(status({ aheadCount: 1 }), true);
+    assert.deepEqual(syncAction, {
+      label: "Sync branch",
+      disabled: true,
+      kind: "show_hint",
+      hint: "Git action in progress.",
+    });
+  });
+
+  it("does not show when the branch has no upstream", () => {
+    assert.isNull(resolveSyncAction(status({ hasUpstream: false, aheadCount: 1 }), false));
+  });
+
+  it("does not show when the working tree has local changes", () => {
+    assert.isNull(resolveSyncAction(status({ hasWorkingTreeChanges: true, aheadCount: 1 }), false));
+  });
+});
+
 describe("when: working tree has local changes", () => {
   it("resolveQuickAction returns commit, push, and create PR", () => {
     const quick = resolveQuickAction(status({ hasWorkingTreeChanges: true }), false);

apps/web/src/components/GitActionsControl.logic.ts

@@ -26,6 +26,14 @@ export interface GitQuickAction {
   hint?: string;
 }
 
+export interface GitSyncAction {
+  label: string;
+  disabled: boolean;
+  kind: "run_action" | "run_pull" | "show_hint";
+  action?: "commit_push";
+  hint?: string;
+}
+
 export interface DefaultBranchActionDialogCopy {
   title: string;
   description: string;
@@ -338,6 +346,61 @@ export function resolveQuickAction(
   };
 }
 
+export function resolveSyncAction(
+  gitStatus: GitStatusResult | null,
+  isBusy: boolean,
+): GitSyncAction | null {
+  if (!gitStatus) return null;
+  if (
+    gitStatus.branch === null ||
+    gitStatus.hasWorkingTreeChanges ||
+    gitStatus.hasConflicts ||
+    !gitStatus.hasUpstream
+  ) {
+    return null;
+  }
+
+  const isAhead = gitStatus.aheadCount > 0;
+  const isBehind = gitStatus.behindCount > 0;
+
+  if (!isAhead && !isBehind) {
+    return null;
+  }
+
+  if (isBusy) {
+    return {
+      label: "Sync branch",
+      disabled: true,
+      kind: "show_hint",
+      hint: "Git action in progress.",
+    };
+  }
+
+  if (isAhead && isBehind) {
+    return {
+      label: "Sync branch",
+      disabled: true,
+      kind: "show_hint",
+      hint: "Branch has diverged from upstream. Rebase/merge first.",
+    };
+  }
+
+  if (isBehind) {
+    return {
+      label: "Sync branch",
+      disabled: false,
+      kind: "run_pull",
+    };
+  }
+
+  return {
+    label: "Sync branch",
+    disabled: false,
+    kind: "run_action",
+    action: "commit_push",
+  };
+}
+
 export function requiresDefaultBranchConfirmation(
   action: GitStackedAction,
   isDefaultBranch: boolean,

apps/web/src/components/GitActionsControl.tsx

@@ -11,6 +11,7 @@ import { useIsMutating, useMutation, useQuery, useQueryClient } from "@tanstack/
 import { Schema } from "effect";
 import { useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
 import {
+  ArrowUpDownIcon,
   ChevronDownIcon,
   CircleAlertIcon,
   CloudUploadIcon,
@@ -28,8 +29,9 @@ import {
   type DefaultBranchConfirmableAction,
   requiresDefaultBranchConfirmation,
   resolveDefaultBranchActionDialogCopy,
-  resolveQuickAction,
   resolveGitFailureRetryLabel,
+  resolveQuickAction,
+  resolveSyncAction,
   summarizeGitFailure,
   summarizeGitResult,
 } from "./GitActionsControl.logic";
@@ -279,6 +281,10 @@ function GitQuickActionIcon({ quickAction }: { quickAction: GitQuickAction }) {
   return <InfoIcon className={iconClassName} />;
 }
 
+function GitSyncActionIcon() {
+  return <ArrowUpDownIcon className="size-3.5" />;
+}
+
 export default function GitActionsControl({ gitCwd, activeThreadId }: GitActionsControlProps) {
   const { settings } = useAppSettings();
   const threadToastData = useMemo(
@@ -363,9 +369,16 @@ export default function GitActionsControl({ gitCwd, activeThreadId }: GitActions
       resolveQuickAction(gitStatusForActions, isGitActionRunning, isDefaultBranch, hasOriginRemote),
     [gitStatusForActions, hasOriginRemote, isDefaultBranch, isGitActionRunning],
   );
+  const syncAction = useMemo(
+    () => resolveSyncAction(gitStatusForActions, isGitActionRunning),
+    [gitStatusForActions, isGitActionRunning],
+  );
   const quickActionDisabledReason = quickAction.disabled
     ? (quickAction.hint ?? "This action is currently unavailable.")
     : null;
+  const syncActionDisabledReason = syncAction?.disabled
+    ? (syncAction.hint ?? "This action is currently unavailable.")
+    : null;
   const pendingDefaultBranchActionCopy = pendingDefaultBranchAction
     ? resolveDefaultBranchActionDialogCopy({
         action: pendingDefaultBranchAction.action,
@@ -838,30 +851,63 @@ export default function GitActionsControl({ gitCwd, activeThreadId }: GitActions
     void openPromise.catch(() => undefined);
   }, [conflictedFiles, gitCwd, threadToastData]);
 
-  const runQuickAction = useCallback(() => {
-    if (quickAction.kind === "open_pr") {
-      void openExistingPr();
-      return;
-    }
-    if (quickAction.kind === "run_pull") {
+  const runPullWithToast = useCallback(
+    (messages?: {
+      loadingTitle?: string;
+      pulledTitle?: string;
+      skippedTitle?: string;
+      errorTitle?: string;
+    }) => {
       const promise = pullMutation.mutateAsync();
       toastManager.promise(promise, {
-        loading: { title: "Pulling...", data: threadToastData },
+        loading: { title: messages?.loadingTitle ?? "Pulling...", data: threadToastData },
         success: (result) => ({
-          title: result.status === "pulled" ? "Pulled" : "Already up to date",
+          title:
+            result.status === "pulled"
+              ? (messages?.pulledTitle ?? "Pulled")
+              : (messages?.skippedTitle ?? "Already up to date"),
           description:
             result.status === "pulled"
               ? `Updated ${result.branch} from ${result.upstreamBranch ?? "upstream"}`
               : `${result.branch} is already synchronized.`,
           data: threadToastData,
         }),
         error: (err) => ({
-          title: "Pull failed",
+          title: messages?.errorTitle ?? "Pull failed",
           description: err instanceof Error ? err.message : "An error occurred.",
           data: threadToastData,
         }),
       });
       void promise.catch(() => undefined);
+    },
+    [pullMutation, threadToastData],
+  );
+
+  const runSyncAction = useCallback(() => {
+    if (!syncAction || syncAction.disabled) {
+      return;
+    }
+    if (syncAction.kind === "run_pull") {
+      runPullWithToast({
+        loadingTitle: "Syncing...",
+        pulledTitle: "Synced branch",
+        skippedTitle: "Already up to date",
+        errorTitle: "Sync failed",
+      });
+      return;
+    }
+    if (syncAction.kind === "run_action" && syncAction.action === "commit_push") {
+      void runGitActionWithToast({ action: "commit_push", forcePushOnlyProgress: true });
+    }
+  }, [runPullWithToast, syncAction]);
+
+  const runQuickAction = useCallback(() => {
+    if (quickAction.kind === "open_pr") {
+      void openExistingPr();
+      return;
+    }
+    if (quickAction.kind === "run_pull") {
+      runPullWithToast();
       return;
     }
     if (quickAction.kind === "resolve_conflicts") {
@@ -880,7 +926,7 @@ export default function GitActionsControl({ gitCwd, activeThreadId }: GitActions
     if (quickAction.action) {
       void runGitActionWithToast({ action: quickAction.action });
     }
-  }, [openConflictedFilesInEditor, openExistingPr, pullMutation, quickAction, threadToastData]);
+  }, [openConflictedFilesInEditor, openExistingPr, quickAction, runPullWithToast, threadToastData]);
 
   const openDialogForMenuItem = useCallback(
     (item: GitActionMenuItem) => {
@@ -964,6 +1010,41 @@ export default function GitActionsControl({ gitCwd, activeThreadId }: GitActions
         </Button>
       ) : (
         <Group aria-label="Git actions">
+          {syncAction ? (
+            <>
+              {syncActionDisabledReason ? (
+                <Popover>
+                  <PopoverTrigger
+                    openOnHover
+                    render={
+                      <Button
+                        aria-disabled="true"
+                        className="cursor-not-allowed opacity-64"
+                        size="icon-xs"
+                        variant="outline"
+                      />
+                    }
+                  >
+                    <GitSyncActionIcon />
+                  </PopoverTrigger>
+                  <PopoverPopup tooltipStyle side="bottom" align="start">
+                    {syncActionDisabledReason}
+                  </PopoverPopup>
+                </Popover>
+              ) : (
+                <Button
+                  aria-label={syncAction.label}
+                  title={syncAction.label}
+                  size="icon-xs"
+                  variant="outline"
+                  onClick={runSyncAction}
+                >
+                  <GitSyncActionIcon />
+                </Button>
+              )}
+              <GroupSeparator className="hidden @sm/header-actions:block" />
+            </>
+          ) : null}
           {quickActionDisabledReason ? (
             <Popover>
               <PopoverTrigger