chore(code): loading all branches

Author: VojtechBartos

apps/code/src/renderer/api/posthogClient.ts

@@ -995,6 +995,43 @@ export class PostHogAPIClient {
     };
   }
 
+  async getGithubBranchesPage(
+    integrationId: string | number,
+    repo: string,
+    offset: number,
+    limit: number,
+  ): Promise<{
+    branches: string[];
+    defaultBranch: string | null;
+    hasMore: boolean;
+  }> {
+    const teamId = await this.getTeamId();
+    const url = new URL(
+      `${this.api.baseUrl}/api/environments/${teamId}/integrations/${integrationId}/github_branches/`,
+    );
+    url.searchParams.set("repo", repo);
+    url.searchParams.set("offset", String(offset));
+    url.searchParams.set("limit", String(limit));
+    const response = await this.api.fetcher.fetch({
+      method: "get",
+      url,
+      path: `/api/environments/${teamId}/integrations/${integrationId}/github_branches/`,
+    });
+
+    if (!response.ok) {
+      throw new Error(
+        `Failed to fetch GitHub branches: ${response.statusText}`,
+      );
+    }
+
+    const data = await response.json();
+    return {
+      branches: data.branches ?? data.results ?? data ?? [],
+      defaultBranch: data.default_branch ?? null,
+      hasMore: data.has_more ?? false,
+    };
+  }
+
   async getGithubRepositories(
     integrationId: string | number,
   ): Promise<string[]> {

apps/code/src/renderer/features/git-interaction/components/BranchSelector.tsx

@@ -21,6 +21,7 @@ interface BranchSelectorProps {
   onBranchSelect?: (branch: string | null) => void;
   cloudBranches?: string[];
   cloudBranchesLoading?: boolean;
+  cloudBranchesFetchingMore?: boolean;
   taskId?: string;
 }
 
@@ -36,6 +37,7 @@ export function BranchSelector({
   onBranchSelect,
   cloudBranches,
   cloudBranchesLoading,
+  cloudBranchesFetchingMore,
   taskId,
 }: BranchSelectorProps) {
   const [open, setOpen] = useState(false);
@@ -61,6 +63,8 @@ export function BranchSelector({
 
   const branches = isCloudMode ? (cloudBranches ?? []) : localBranches;
   const effectiveLoading = loading || (isCloudMode && cloudBranchesLoading);
+  const cloudStillLoading =
+    isCloudMode && cloudBranchesLoading && branches.length === 0;
 
   const checkoutMutation = useMutation(
     trpc.git.checkoutBranch.mutationOptions({
@@ -93,9 +97,12 @@ export function BranchSelector({
     ? "Loading..."
     : (displayedBranch ?? "No branch");
 
+  const showSpinner =
+    effectiveLoading || (isCloudMode && cloudBranchesFetchingMore);
+
   const triggerContent = (
     <Flex align="center" gap="1" style={{ minWidth: 0 }}>
-      {effectiveLoading ? (
+      {showSpinner ? (
         <Spinner size="1" />
       ) : (
         <GitBranch size={16} weight="regular" style={{ flexShrink: 0 }} />
@@ -104,6 +111,8 @@ export function BranchSelector({
     </Flex>
   );
 
+  console.log("branches", branches);
+
   return (
     <Tooltip content={displayedBranch} delayDuration={300}>
       <Combobox.Root
@@ -112,7 +121,7 @@ export function BranchSelector({
         open={open}
         onOpenChange={setOpen}
         size="1"
-        disabled={disabled || !repoPath}
+        disabled={disabled || !repoPath || cloudStillLoading}
       >
         <Combobox.Trigger variant={variant} placeholder="No branch">
           {triggerContent}
@@ -126,6 +135,17 @@ export function BranchSelector({
           {({ filtered, hasMore, moreCount }) => (
             <>
               <Combobox.Input placeholder="Search branches" />
+              {isCloudMode && cloudBranchesFetchingMore && (
+                <Flex
+                  align="center"
+                  gap="1"
+                  className="combobox-label"
+                  style={{ padding: "6px 8px" }}
+                >
+                  <Spinner size="1" />
+                  Loading more ({branches.length})…
+                </Flex>
+              )}
               <Combobox.Empty>No branches found.</Combobox.Empty>
 
               {filtered.length > 0 && (

apps/code/src/renderer/features/onboarding/components/TutorialStep.tsx

@@ -102,8 +102,11 @@ export function TutorialStep({ onComplete, onBack }: TutorialStepProps) {
     ? getIntegrationIdForRepo(selectedRepository)
     : undefined;
 
-  const { data: cloudBranchData, isPending: cloudBranchesLoading } =
-    useGithubBranches(selectedIntegrationId, selectedRepository);
+  const {
+    data: cloudBranchData,
+    isPending: cloudBranchesLoading,
+    isFetchingMore: cloudBranchesFetchingMore,
+  } = useGithubBranches(selectedIntegrationId, selectedRepository);
   const cloudBranches = cloudBranchData?.branches;
   const cloudDefaultBranch = cloudBranchData?.defaultBranch ?? null;
 
@@ -359,6 +362,7 @@ export function TutorialStep({ onComplete, onBack }: TutorialStepProps) {
                   onBranchSelect={setSelectedBranch}
                   cloudBranches={cloudBranches}
                   cloudBranchesLoading={cloudBranchesLoading}
+                  cloudBranchesFetchingMore={cloudBranchesFetchingMore}
                 />
               </TourHighlight>
             </Flex>

apps/code/src/renderer/features/task-detail/components/TaskInput.tsx

@@ -119,8 +119,11 @@ export function TaskInput({
     ? getIntegrationIdForRepo(selectedCloudRepository)
     : undefined;
 
-  const { data: cloudBranchData, isPending: cloudBranchesLoading } =
-    useGithubBranches(selectedIntegrationId, selectedCloudRepository);
+  const {
+    data: cloudBranchData,
+    isPending: cloudBranchesLoading,
+    isFetchingMore: cloudBranchesFetchingMore,
+  } = useGithubBranches(selectedIntegrationId, selectedCloudRepository);
   const cloudBranches = cloudBranchData?.branches;
   const cloudDefaultBranch = cloudBranchData?.defaultBranch ?? null;
 
@@ -464,6 +467,7 @@ export function TaskInput({
               onBranchSelect={setSelectedBranch}
               cloudBranches={cloudBranches}
               cloudBranchesLoading={cloudBranchesLoading}
+              cloudBranchesFetchingMore={cloudBranchesFetchingMore}
             />
             {workspaceMode === "worktree" && (
               <EnvironmentSelector

apps/code/src/renderer/hooks/useIntegrations.ts

@@ -7,6 +7,7 @@ import {
 } from "@features/integrations/stores/integrationStore";
 import { useQueries } from "@tanstack/react-query";
 import { useCallback, useEffect, useMemo } from "react";
+import { useAuthenticatedInfiniteQuery } from "./useAuthenticatedInfiniteQuery";
 import { useAuthenticatedQuery } from "./useAuthenticatedQuery";
 
 const integrationKeys = {
@@ -67,18 +68,63 @@ function useAllGithubRepositories(githubIntegrations: Integration[]) {
   });
 }
 
+const BRANCHES_PAGE_SIZE = 1000;
+
+interface GithubBranchesPage {
+  branches: string[];
+  defaultBranch: string | null;
+  hasMore: boolean;
+}
+
 export function useGithubBranches(
   integrationId?: number,
   repo?: string | null,
 ) {
-  return useAuthenticatedQuery(
+  const query = useAuthenticatedInfiniteQuery<GithubBranchesPage, number>(
     integrationKeys.branches(integrationId, repo),
-    async (client) => {
-      if (!integrationId || !repo) return { branches: [], defaultBranch: null };
-      return await client.getGithubBranches(integrationId, repo);
+    async (client, offset) => {
+      if (!integrationId || !repo) {
+        return { branches: [], defaultBranch: null, hasMore: false };
+      }
+      return await client.getGithubBranchesPage(
+        integrationId,
+        repo,
+        offset,
+        BRANCHES_PAGE_SIZE,
+      );
+    },
+    {
+      initialPageParam: 0,
+      getNextPageParam: (lastPage, allPages) => {
+        if (!lastPage.hasMore) return undefined;
+        return allPages.reduce((n, p) => n + p.branches.length, 0);
+      },
+      staleTime: 0,
     },
-    { staleTime: 0, refetchOnMount: "always" },
   );
+
+  // Auto-fetch remaining pages in background once the first page arrives
+  useEffect(() => {
+    if (query.hasNextPage && !query.isFetchingNextPage) {
+      query.fetchNextPage();
+    }
+  }, [query.hasNextPage, query.isFetchingNextPage, query.fetchNextPage]);
+
+  const data = useMemo(() => {
+    if (!query.data?.pages.length) {
+      return { branches: [] as string[], defaultBranch: null };
+    }
+    return {
+      branches: query.data.pages.flatMap((p) => p.branches),
+      defaultBranch: query.data.pages[0]?.defaultBranch ?? null,
+    };
+  }, [query.data?.pages]);
+
+  return {
+    data,
+    isPending: query.isPending,
+    isFetchingMore: query.isFetchingNextPage || (query.hasNextPage ?? false),
+  };
 }
 
 export function useRepositoryIntegration() {