Unblock cloud branch picker during slow remote load

Author: charlesvien

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

@@ -36,6 +36,11 @@ const COMBOBOX_LIMIT = 50;
 // plain button the combobox's roving focus skips over.
 const CREATE_BRANCH_ACTION = "__create_branch__";
 
+// Sentinel for the "Use '<input>' as branch name" action in cloud mode.
+// Surfaced as the first list item so it's keyboard-reachable and
+// auto-highlighted while the (slow) remote search is still running.
+const USE_INPUT_BRANCH_ACTION = "__use_input_branch__";
+
 function LoadingRow({ label }: { label: string }) {
   return (
     <div className="flex items-center gap-1 px-2 py-1.5 text-muted-foreground text-xs">
@@ -136,8 +141,6 @@ export function BranchSelector({
 
   const branches = isCloudMode ? (cloudBranches ?? []) : localBranches;
   const effectiveLoading = loading || (isCloudMode && cloudBranchesLoading);
-  const cloudStillLoading =
-    isCloudMode && cloudBranchesLoading && branches.length === 0 && !open;
   const branchListLoading = isCloudMode
     ? !!cloudBranchesLoading
     : localBranchesLoading;
@@ -164,6 +167,40 @@ export function BranchSelector({
     }),
   );
 
+  // In local mode, surface in-progress git operations (rebase/merge/etc.) so the
+  // user understands why there's no current branch and why we won't let them
+  // checkout a different one — checkout would fail with a hard-to-read git error.
+  const localBusy = !isSelectionOnly && busyState?.busy === true;
+  const busyOperationLabel =
+    localBusy && busyState?.busy
+      ? BUSY_OPERATION_LABEL[busyState.operation]
+      : null;
+
+  const displayText = effectiveLoading
+    ? "Loading..."
+    : busyOperationLabel && !displayedBranch
+      ? busyOperationLabel
+      : (displayedBranch ?? "No branch");
+
+  const showSpinner =
+    effectiveLoading || (isCloudMode && open && cloudBranchesFetchingMore);
+
+  const isDisabled = !!(disabled || !repoPath || localBusy);
+  const disabledReason =
+    localBusy && busyOperationLabel
+      ? `${busyOperationLabel} in progress — finish or abort it to switch branches.`
+      : null;
+  const inputValue = isCloudMode ? (cloudSearchQuery ?? "") : searchQuery;
+  const trimmedInputValue = inputValue.trim();
+  const canUseInputBranch =
+    !isDisabled &&
+    trimmedInputValue.length > 0 &&
+    trimmedInputValue !== displayedBranch;
+  const showUseInputBranchAction =
+    isCloudMode &&
+    canUseInputBranch &&
+    !branches.some((branch) => branch === trimmedInputValue);
+
   const handleBranchChange = (value: string | null) => {
     if (!value) return;
     if (value === CREATE_BRANCH_ACTION) {
@@ -175,12 +212,15 @@ export function BranchSelector({
       );
       return;
     }
+    const branchName =
+      value === USE_INPUT_BRANCH_ACTION ? trimmedInputValue : value;
+    if (!branchName) return;
     if (isSelectionOnly) {
-      onBranchSelect?.(value);
-    } else if (value !== currentBranch) {
+      onBranchSelect?.(branchName);
+    } else if (branchName !== currentBranch) {
       checkoutMutation.mutate({
         directoryPath: repoPath as string,
-        branchName: value,
+        branchName,
       });
     }
     if (isCloudMode) {
@@ -198,49 +238,20 @@ export function BranchSelector({
     }
   };
 
-  // In local mode, surface in-progress git operations (rebase/merge/etc.) so the
-  // user understands why there's no current branch and why we won't let them
-  // checkout a different one — checkout would fail with a hard-to-read git error.
-  const localBusy = !isSelectionOnly && busyState?.busy === true;
-  const busyOperationLabel =
-    localBusy && busyState?.busy
-      ? BUSY_OPERATION_LABEL[busyState.operation]
-      : null;
-
-  const displayText = effectiveLoading
-    ? "Loading..."
-    : busyOperationLabel && !displayedBranch
-      ? busyOperationLabel
-      : (displayedBranch ?? "No branch");
-
-  const showSpinner =
-    effectiveLoading || (isCloudMode && open && cloudBranchesFetchingMore);
-
-  const isDisabled = !!(
-    disabled ||
-    !repoPath ||
-    cloudStillLoading ||
-    localBusy
-  );
-  const disabledReason =
-    localBusy && busyOperationLabel
-      ? `${busyOperationLabel} in progress — finish or abort it to switch branches.`
-      : null;
-  const inputValue = isCloudMode ? (cloudSearchQuery ?? "") : searchQuery;
-  const trimmedInputValue = inputValue.trim();
-  const canUseInputBranch =
-    !isDisabled &&
-    trimmedInputValue.length > 0 &&
-    trimmedInputValue !== displayedBranch;
-
   const handleUseInputBranch = () => {
     if (!canUseInputBranch) return;
     handleBranchChange(trimmedInputValue);
   };
 
+  const comboboxItems = isCloudMode
+    ? showUseInputBranchAction
+      ? [USE_INPUT_BRANCH_ACTION, ...branches]
+      : branches
+    : [...branches, CREATE_BRANCH_ACTION];
+
   return (
     <Combobox
-      items={isCloudMode ? branches : [...branches, CREATE_BRANCH_ACTION]}
+      items={comboboxItems}
       limit={COMBOBOX_LIMIT}
       autoHighlight
       value={displayedBranch}
@@ -378,19 +389,35 @@ export function BranchSelector({
         )}
 
         <ComboboxList className="max-h-[min(14rem,calc(var(--available-height,14rem)-5rem))]">
-          {(item: string) =>
-            item === CREATE_BRANCH_ACTION ? (
-              <ComboboxListFooter key="footer">
+          {(item: string) => {
+            if (item === CREATE_BRANCH_ACTION) {
+              return (
+                <ComboboxListFooter key="footer">
+                  <ComboboxItem
+                    value={CREATE_BRANCH_ACTION}
+                    title="Create new branch"
+                    className="text-accent-foreground"
+                  >
+                    <Plus size={11} weight="bold" />
+                    Create new branch
+                  </ComboboxItem>
+                </ComboboxListFooter>
+              );
+            }
+            if (item === USE_INPUT_BRANCH_ACTION) {
+              return (
                 <ComboboxItem
-                  value={CREATE_BRANCH_ACTION}
-                  title="Create new branch"
+                  key={USE_INPUT_BRANCH_ACTION}
+                  value={USE_INPUT_BRANCH_ACTION}
+                  title={`Use "${trimmedInputValue}" as branch name`}
                   className="text-accent-foreground"
                 >
                   <Plus size={11} weight="bold" />
-                  Create new branch
+                  Use "{trimmedInputValue}" as branch name
                 </ComboboxItem>
-              </ComboboxListFooter>
-            ) : (
+              );
+            }
+            return (
               <ComboboxItem
                 key={item}
                 value={item}
@@ -399,8 +426,8 @@ export function BranchSelector({
               >
                 {item}
               </ComboboxItem>
-            )
-          }
+            );
+          }}
         </ComboboxList>
 
         {isCloudMode && cloudBranchesHasMore ? (

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

@@ -5,6 +5,7 @@ import {
   useIntegrationSelectors,
   useIntegrationStore,
 } from "@features/integrations/stores/integrationStore";
+import { useDebounce } from "@hooks/useDebounce";
 import type { UserGitHubIntegration } from "@renderer/api/posthogClient";
 import { useQueries, useQueryClient } from "@tanstack/react-query";
 import {
@@ -17,6 +18,12 @@ import {
 import { useAuthenticatedInfiniteQuery } from "./useAuthenticatedInfiniteQuery";
 import { useAuthenticatedQuery } from "./useAuthenticatedQuery";
 
+// Branch search hits a slow remote endpoint (GitHub via PostHog proxy). Debounce
+// keystrokes so we fire at most one request per typing burst. Empty searches
+// skip the debounce so closing the picker (which resets search to "") clears
+// stale results immediately.
+const BRANCH_SEARCH_DEBOUNCE_MS = 300;
+
 const integrationKeys = {
   all: ["integrations"] as const,
   list: () => [...integrationKeys.all, "list"] as const,
@@ -366,11 +373,15 @@ export function useGithubBranches(
   search?: string,
   enabled: boolean = true,
 ) {
-  const deferredSearch = useDeferredValue(search?.trim() ?? "");
+  const trimmedSearch = search?.trim() ?? "";
+  const debouncedSearch = useDebounce(
+    trimmedSearch,
+    trimmedSearch ? BRANCH_SEARCH_DEBOUNCE_MS : 0,
+  );
   const queryEnabled = enabled && !!integrationId && !!repo;
 
   const query = useAuthenticatedInfiniteQuery<GithubBranchesPage, number>(
-    integrationKeys.branches(integrationId, repo, deferredSearch),
+    integrationKeys.branches(integrationId, repo, debouncedSearch),
     async (client, offset) => {
       if (!integrationId || !repo) {
         return { branches: [], defaultBranch: null, hasMore: false };
@@ -382,7 +393,7 @@ export function useGithubBranches(
         repo,
         offset,
         pageSize,
-        deferredSearch,
+        debouncedSearch,
       );
     },
     {
@@ -435,11 +446,15 @@ export function useUserGithubBranches(
   search?: string,
   enabled: boolean = true,
 ) {
-  const deferredSearch = useDeferredValue(search?.trim() ?? "");
+  const trimmedSearch = search?.trim() ?? "";
+  const debouncedSearch = useDebounce(
+    trimmedSearch,
+    trimmedSearch ? BRANCH_SEARCH_DEBOUNCE_MS : 0,
+  );
   const queryEnabled = enabled && !!installationId && !!repo;
 
   const query = useAuthenticatedInfiniteQuery<GithubBranchesPage, number>(
-    userGithubIntegrationKeys.branches(installationId, repo, deferredSearch),
+    userGithubIntegrationKeys.branches(installationId, repo, debouncedSearch),
     async (client, offset) => {
       if (!installationId || !repo) {
         return { branches: [], defaultBranch: null, hasMore: false };
@@ -451,7 +466,7 @@ export function useUserGithubBranches(
         repo,
         offset,
         pageSize,
-        deferredSearch,
+        debouncedSearch,
       );
     },
     {