feat(git): add multi-remote push with remote selection and fork-aware PR creation (#365)

* fix: Usage drop down should be scrollable

* fix: When there are multiple remotes, provide the user with an option of which branch to push to

* feat(gitview): add remote-push selection and auto checkout on create

* feat: enable selecting remote when creating PR

* fix: show PR icon in create button when not creating

* fix(pullrequest): drop remote picker and use explicit remote

* feat: add remote selection for PR status and creation

* fix: improve PR creation with selected remote and fork head

* chore(ui): simplify PR remote link UI

* fix(web): handle cross-repo PRs and branch validation

* feat: add remote selection for commit and push

* feat(git): delegate PR head source resolution to server

* chore(web): remove noisy PR creation logs

packages/ui/src/components/views/git/BranchSelector.tsx

@@ -5,6 +5,7 @@ import {
   RiAddLine,
   RiCloseLine,
   RiLoader4Line,
+  RiArrowLeftLine,
 } from '@remixicon/react';
 import { Button } from '@/components/ui/button';
 import {
@@ -22,6 +23,7 @@ import {
   CommandSeparator,
 } from '@/components/ui/command';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import type { GitRemote } from '@/lib/api/types';
 
 interface BranchInfo {
   ahead?: number;
@@ -34,7 +36,8 @@ interface BranchSelectorProps {
   remoteBranches: string[];
   branchInfo: Record<string, BranchInfo> | undefined;
   onCheckout: (branch: string) => void;
-  onCreate: (name: string) => Promise<void>;
+  onCreate: (name: string, remote?: GitRemote) => Promise<void>;
+  remotes?: GitRemote[];
   disabled?: boolean;
   tooltipDelayMs?: number;
 }
@@ -59,16 +62,20 @@ export const BranchSelector: React.FC<BranchSelectorProps> = ({
   branchInfo,
   onCheckout,
   onCreate,
+  remotes = [],
   disabled = false,
   tooltipDelayMs = 1000,
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [search, setSearch] = React.useState('');
   const [showCreate, setShowCreate] = React.useState(false);
+  const [showRemoteSelect, setShowRemoteSelect] = React.useState(false);
   const [newBranchName, setNewBranchName] = React.useState('');
   const [isCreating, setIsCreating] = React.useState(false);
   const createInputRef = React.useRef<HTMLInputElement>(null);
 
+  const hasMultipleRemotes = remotes.length > 1;
+
   const sanitizedNewBranch = React.useMemo(
     () => sanitizeBranchNameInput(newBranchName),
     [newBranchName]
@@ -103,9 +110,17 @@ export const BranchSelector: React.FC<BranchSelectorProps> = ({
 
   const handleCreate = async () => {
     if (!sanitizedNewBranch || isCreating) return;
+    
+    // If multiple remotes, show remote selection first
+    if (hasMultipleRemotes) {
+      setShowRemoteSelect(true);
+      return;
+    }
+    
+    // Single or no remote - proceed directly
     setIsCreating(true);
     try {
-      await onCreate(sanitizedNewBranch);
+      await onCreate(sanitizedNewBranch, remotes[0]);
       setNewBranchName('');
       setShowCreate(false);
       setIsOpen(false);
@@ -114,15 +129,35 @@ export const BranchSelector: React.FC<BranchSelectorProps> = ({
     }
   };
 
+  const handleSelectRemote = async (remote: GitRemote) => {
+    if (!sanitizedNewBranch || isCreating) return;
+    setIsCreating(true);
+    try {
+      await onCreate(sanitizedNewBranch, remote);
+      setNewBranchName('');
+      setShowCreate(false);
+      setShowRemoteSelect(false);
+      setIsOpen(false);
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  const handleBackFromRemoteSelect = () => {
+    setShowRemoteSelect(false);
+  };
+
   const handleCancelCreate = () => {
     setNewBranchName('');
     setShowCreate(false);
+    setShowRemoteSelect(false);
   };
 
   React.useEffect(() => {
     if (!isOpen) {
       setSearch('');
       setShowCreate(false);
+      setShowRemoteSelect(false);
       setNewBranchName('');
     }
   }, [isOpen]);
@@ -165,7 +200,45 @@ export const BranchSelector: React.FC<BranchSelectorProps> = ({
             <CommandEmpty>No branches found.</CommandEmpty>
 
             <CommandGroup>
-              {!showCreate ? (
+              {showRemoteSelect ? (
+                // Remote selection step
+                <div className="px-2 py-1.5">
+                  <div className="flex items-center gap-2 mb-2">
+                    <button
+                      type="button"
+                      onClick={handleBackFromRemoteSelect}
+                      disabled={isCreating}
+                      className="shrink-0 text-muted-foreground hover:text-foreground disabled:opacity-50"
+                    >
+                      <RiArrowLeftLine className="size-4" />
+                    </button>
+                    <span className="typography-meta text-muted-foreground">
+                      Push <span className="text-foreground font-medium">{sanitizedNewBranch}</span> to:
+                    </span>
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    {remotes.map((remote) => (
+                      <button
+                        key={remote.name}
+                        type="button"
+                        onClick={() => handleSelectRemote(remote)}
+                        disabled={isCreating}
+                        className="flex flex-col items-start gap-0.5 px-2 py-1.5 rounded-md text-left hover:bg-accent disabled:opacity-50"
+                      >
+                        <span className="typography-ui-label text-foreground">
+                          {isCreating ? (
+                            <RiLoader4Line className="inline size-3 mr-1.5 animate-spin" />
+                          ) : null}
+                          {remote.name}
+                        </span>
+                        <span className="typography-micro text-muted-foreground truncate max-w-full">
+                          {remote.pushUrl}
+                        </span>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              ) : !showCreate ? (
                 <CommandItem onSelect={handleShowCreate}>
                   <RiAddLine className="size-4" />
                   <span>Create new branch...</span>

packages/ui/src/components/views/git/CommitSection.tsx

@@ -4,6 +4,7 @@ import {
   RiAiGenerate2,
   RiLoader4Line,
   RiEmotionHappyLine,
+  RiArrowDownSLine,
 } from '@remixicon/react';
 import {
   Collapsible,
@@ -15,6 +16,13 @@ import { CommitInput } from './CommitInput';
 import { AIHighlightsBox } from './AIHighlightsBox';
 import { useDeviceInfo } from '@/lib/device';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import type { GitRemote } from '@/lib/api/types';
 
 type CommitAction = 'commit' | 'commitAndPush' | null;
 
@@ -28,11 +36,12 @@ interface CommitSectionProps {
   onGenerateMessage: () => void;
   isGeneratingMessage: boolean;
   onCommit: () => void;
-  onCommitAndPush: () => void;
+  onCommitAndPush: (remote?: GitRemote) => void;
   commitAction: CommitAction;
   isBusy: boolean;
   gitmojiEnabled: boolean;
   onOpenGitmojiPicker: () => void;
+  remotes?: GitRemote[];
   variant?: 'framed' | 'plain';
 }
 
@@ -51,11 +60,13 @@ export const CommitSection: React.FC<CommitSectionProps> = ({
   isBusy,
   gitmojiEnabled,
   onOpenGitmojiPicker,
+  remotes = [],
   variant = 'framed',
 }) => {
   const hasSelectedFiles = selectedCount > 0;
   const canCommit = commitMessage.trim() && hasSelectedFiles && commitAction === null;
   const { isMobile } = useDeviceInfo();
+  const hasMultipleRemotes = remotes.length > 1;
 
   const containerClassName =
     variant === 'framed'
@@ -165,31 +176,113 @@ export const CommitSection: React.FC<CommitSectionProps> = ({
             </ButtonLarge>
 
             {isMobile ? (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
+              hasMultipleRemotes ? (
+                <DropdownMenu>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          variant="default"
+                          size="sm"
+                          disabled={!canCommit || isGeneratingMessage}
+                          className="h-7 gap-0.5 px-1.5"
+                          aria-label="Commit & Push"
+                        >
+                          {commitAction === 'commitAndPush' ? (
+                            <RiLoader4Line className="size-4 animate-spin" />
+                          ) : (
+                            <>
+                              <RiArrowUpLine className="size-4" />
+                              <RiArrowDownSLine className="size-3 opacity-60" />
+                            </>
+                          )}
+                        </Button>
+                      </DropdownMenuTrigger>
+                    </TooltipTrigger>
+                    <TooltipContent side="top">
+                      <p>Commit & Push</p>
+                    </TooltipContent>
+                  </Tooltip>
+                  <DropdownMenuContent align="end" className="min-w-[200px]">
+                    {remotes.map((remote) => (
+                      <DropdownMenuItem key={remote.name} onSelect={() => onCommitAndPush(remote)}>
+                        <div className="flex flex-col">
+                          <span className="typography-ui-label text-foreground">
+                            {remote.name}
+                          </span>
+                          <span className="typography-meta text-muted-foreground truncate">
+                            {remote.pushUrl}
+                          </span>
+                        </div>
+                      </DropdownMenuItem>
+                    ))}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              ) : (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="default"
+                      size="sm"
+                      onClick={() => onCommitAndPush()}
+                      disabled={!canCommit || isGeneratingMessage}
+                      className="h-7 w-7 p-0"
+                      aria-label="Commit & Push"
+                    >
+                      {commitAction === 'commitAndPush' ? (
+                        <RiLoader4Line className="size-4 animate-spin" />
+                      ) : (
+                        <RiArrowUpLine className="size-4" />
+                      )}
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="top">
+                    <p>Commit & Push</p>
+                  </TooltipContent>
+                </Tooltip>
+              )
+            ) : hasMultipleRemotes ? (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <ButtonLarge
                     variant="default"
-                    size="sm"
-                    onClick={onCommitAndPush}
                     disabled={!canCommit || isGeneratingMessage}
-                    className="h-7 w-7 p-0"
+                    className="commit-actions__btn"
                     aria-label="Commit & Push"
                   >
                     {commitAction === 'commitAndPush' ? (
-                      <RiLoader4Line className="size-4 animate-spin" />
+                      <>
+                        <RiLoader4Line className="size-4 animate-spin" />
+                        <span className="commit-actions__label commit-actions__label--long">Pushing...</span>
+                      </>
                     ) : (
-                      <RiArrowUpLine className="size-4" />
+                      <>
+                        <RiArrowUpLine className="size-4" />
+                        <span className="commit-actions__label commit-actions__label--long">Commit &amp; Push</span>
+                        <RiArrowDownSLine className="size-3.5 opacity-60 -mr-0.5" />
+                      </>
                     )}
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent side="top">
-                  <p>Commit & Push</p>
-                </TooltipContent>
-              </Tooltip>
+                  </ButtonLarge>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="min-w-[200px]">
+                  {remotes.map((remote) => (
+                    <DropdownMenuItem key={remote.name} onSelect={() => onCommitAndPush(remote)}>
+                      <div className="flex flex-col">
+                        <span className="typography-ui-label text-foreground">
+                          {remote.name}
+                        </span>
+                        <span className="typography-meta text-muted-foreground truncate">
+                          {remote.pushUrl}
+                        </span>
+                      </div>
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
             ) : (
               <ButtonLarge
                 variant="default"
-                onClick={onCommitAndPush}
+                onClick={() => onCommitAndPush()}
                 disabled={!canCommit || isGeneratingMessage}
                 className="commit-actions__btn"
                 aria-label="Commit & Push"

packages/ui/src/components/views/git/GitHeader.tsx

@@ -40,7 +40,7 @@ interface GitHeaderProps {
   onPull: (remote: GitRemote) => void;
   onPush: (remote: GitRemote) => void;
   onCheckoutBranch: (branch: string) => void;
-  onCreateBranch: (name: string) => Promise<void>;
+  onCreateBranch: (name: string, remote?: GitRemote) => Promise<void>;
   onRenameBranch?: (oldName: string, newName: string) => Promise<void>;
   activeIdentityProfile: GitIdentityProfile | null;
   availableIdentities: GitIdentityProfile[];
@@ -301,6 +301,7 @@ export const GitHeader: React.FC<GitHeaderProps> = ({
                 branchInfo={branchInfo}
                 onCheckout={onCheckoutBranch}
                 onCreate={onCreateBranch}
+                remotes={remotes}
                 tooltipDelayMs={useTwoRowHeader ? 300 : 1000}
               />
             )}
@@ -334,6 +335,7 @@ export const GitHeader: React.FC<GitHeaderProps> = ({
             branchInfo={branchInfo}
             onCheckout={onCheckoutBranch}
             onCreate={onCreateBranch}
+            remotes={remotes}
           />
         )}
 

packages/ui/src/components/views/git/PullRequestSection.tsx

@@ -28,6 +28,12 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 import { Input } from '@/components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Textarea } from '@/components/ui/textarea';
@@ -53,6 +59,7 @@ import type {
   GitHubCheckRun,
   GitHubPullRequestContextResult,
   GitHubPullRequestStatus,
+  GitRemote,
 } from '@/lib/api/types';
 
 type MergeMethod = 'merge' | 'squash' | 'rebase';
@@ -167,9 +174,10 @@ export const PullRequestSection: React.FC<{
   directory: string;
   branch: string;
   baseBranch: string;
+  remotes?: GitRemote[];
   variant?: 'framed' | 'plain';
   onGeneratedDescription?: () => void;
-}> = ({ directory, branch, baseBranch, variant = 'framed', onGeneratedDescription }) => {
+}> = ({ directory, branch, baseBranch, remotes = [], variant = 'framed', onGeneratedDescription }) => {
   const { github } = useRuntimeAPIs();
   const githubAuthStatus = useGitHubAuthStore((state) => state.status);
   const githubAuthChecked = useGitHubAuthStore((state) => state.hasChecked);
@@ -217,6 +225,16 @@ export const PullRequestSection: React.FC<{
 
   const [isContextOpen, setIsContextOpen] = React.useState(false);
   const [isContextSheetOpen, setIsContextSheetOpen] = React.useState(false);
+  const [selectedRemote, setSelectedRemote] = React.useState<GitRemote | null>(() => remotes[0] ?? null);
+
+  const hasMultipleRemotes = remotes.length > 1;
+
+  // Update selected remote when remotes change
+  React.useEffect(() => {
+    if (remotes.length > 0 && !selectedRemote) {
+      setSelectedRemote(remotes[0]);
+    }
+  }, [remotes, selectedRemote]);
 
   const [checksDialogOpen, setChecksDialogOpen] = React.useState(false);
   const [checkDetails, setCheckDetails] = React.useState<GitHubPullRequestContextResult | null>(null);
@@ -781,7 +799,7 @@ export const PullRequestSection: React.FC<{
     }
     setError(null);
     try {
-      const next = await github.prStatus(directory, branch);
+      const next = await github.prStatus(directory, branch, selectedRemote?.name);
       setStatus((prev) => {
         const nextPr = next.pr;
         const prevPr = prev?.pr;
@@ -828,7 +846,16 @@ export const PullRequestSection: React.FC<{
       }
       isRefreshInFlightRef.current = false;
     }
-  }, [branch, canShow, directory, github, githubAuthChecked, githubAuthStatus]);
+  }, [branch, canShow, directory, github, githubAuthChecked, githubAuthStatus, selectedRemote?.name]);
+
+  // Refetch PR status when selected remote changes
+  const handleRemoteChange = React.useCallback((remote: GitRemote) => {
+    setSelectedRemote(remote);
+    // Clear current status and refetch
+    setStatus(null);
+    setError(null);
+    lastRefreshAtRef.current = 0; // Force refresh
+  }, []);
 
   React.useEffect(() => {
     const snapshot = pullRequestDraftSnapshots.get(snapshotKey) ?? null;
@@ -842,6 +869,13 @@ export const PullRequestSection: React.FC<{
     void refresh({ force: true, markInitialResolved: true });
   }, [branch, refresh, snapshotKey]);
 
+  // Refetch when selected remote changes
+  React.useEffect(() => {
+    if (selectedRemote) {
+      void refresh({ force: true, markInitialResolved: true });
+    }
+  }, [selectedRemote, refresh]);
+
   React.useEffect(() => {
     const onFocus = () => {
       void refresh({ force: true, silent: true });
@@ -951,6 +985,8 @@ export const PullRequestSection: React.FC<{
 
     setIsCreating(true);
     try {
+      // Let the server determine the head source from tracking info
+      // The server will check the branch's tracking remote and use that
       const pr = await github.prCreate({
         directory,
         title: trimmedTitle,
@@ -958,6 +994,7 @@ export const PullRequestSection: React.FC<{
         base: baseBranch,
         ...(body.trim() ? { body } : {}),
         draft,
+        ...(selectedRemote ? { remote: selectedRemote.name } : {}),
       });
       toast.success('PR created');
       setStatus((prev) => (prev ? { ...prev, pr } : prev));
@@ -968,7 +1005,7 @@ export const PullRequestSection: React.FC<{
     } finally {
       setIsCreating(false);
     }
-  }, [baseBranch, body, branch, directory, draft, github, refresh, title]);
+  }, [baseBranch, body, branch, directory, draft, github, refresh, selectedRemote, title]);
 
   const mergePr = React.useCallback(async (pr: GitHubPullRequest) => {
     if (!github?.prMerge) {
@@ -1120,6 +1157,36 @@ export const PullRequestSection: React.FC<{
                 {checks.total > 0 ? `${checks.success}/${checks.total} checks` : `${checks.state} checks`}
               </span>
             ) : null}
+            {hasMultipleRemotes ? (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" size="sm" className="h-6 px-2 gap-1">
+                    <span className="typography-micro">{selectedRemote?.name}</span>
+                    <RiArrowDownSLine className="size-3" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="min-w-[200px]">
+                  {remotes.map((remote) => (
+                    <DropdownMenuItem
+                      key={remote.name}
+                      onSelect={() => handleRemoteChange(remote)}
+                    >
+                      <div className="flex flex-col">
+                        <span className="typography-ui-label text-foreground">
+                          {remote.name}
+                          {remote.name === selectedRemote?.name && (
+                            <span className="ml-2 text-primary">✓</span>
+                          )}
+                        </span>
+                        <span className="typography-meta text-muted-foreground truncate">
+                          {remote.pushUrl}
+                        </span>
+                      </div>
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            ) : null}
           </div>
         </div>
         {pr ? (
@@ -1554,7 +1621,7 @@ export const PullRequestSection: React.FC<{
                     disabled={isCreating || !isConnected}
                   >
                     <span className="inline-flex size-4 items-center justify-center">
-                      {isCreating ? <RiLoader4Line className="size-4 animate-spin" /> : <span className="size-4" aria-hidden="true" />}
+                      {isCreating ? <RiLoader4Line className="size-4 animate-spin" /> : <RiGitPullRequestLine className="size-4" />}
                     </span>
                     <span>Create PR</span>
                   </Button>