fix: infer existing branch when typed but not selected

- When the user types an exact branch name and leaves the field, auto-select the
  matching existing branch to keep workspace creation semantics correct
- Prefer origin when the same remote branch name exists on multiple remotes
- Add unit tests for selection inference

Change-Id: I6b3652949bc54534096afae6616965cacc7788b3
Signed-off-by: Thomas Kosiewski <tk@coder.com>

Author: ThomasK33

src/browser/components/BranchNameInput.tsx

@@ -1,9 +1,10 @@
-import React, { useCallback, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Check, ChevronRight, Globe, Loader2, Plus, Wand2 } from "lucide-react";
 import { cn } from "@/common/lib/utils";
 import { Popover, PopoverContent, PopoverAnchor } from "./ui/popover";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 import type { ExistingBranchSelection } from "@/common/types/branchSelection";
+import { inferExactExistingBranchSelection } from "./branchNameInputSelection";
 import type { BranchListResult } from "@/common/orpc/types";
 
 interface RemoteGroup {
@@ -70,6 +71,12 @@ export function BranchNameInput(props: BranchNameInputProps) {
   } = props;
 
   const inputRef = useRef<HTMLInputElement>(null);
+  const selectedExistingBranchRef = useRef<ExistingBranchSelection | null>(selectedExistingBranch);
+
+  useEffect(() => {
+    selectedExistingBranchRef.current = selectedExistingBranch;
+  }, [selectedExistingBranch]);
+
   const [isOpen, setIsOpen] = useState(false);
   const [expandedRemotes, setExpandedRemotes] = useState<Set<string>>(new Set());
 
@@ -106,15 +113,17 @@ export function BranchNameInput(props: BranchNameInputProps) {
   const hasAnyBranches =
     localBranches.length > 0 || remoteGroups.some((g) => g.branches.length > 0);
 
-  // Check if input exactly matches an existing branch
-  const exactLocalMatch = localBranches.find((b) => b.toLowerCase() === searchLower);
-  const exactRemoteMatch = remoteGroups.find((g) =>
-    g.branches.some((b) => b.toLowerCase() === searchLower)
+  const exactExistingBranchSelection = useMemo(
+    () =>
+      inferExactExistingBranchSelection({
+        value,
+        localBranches,
+        remoteGroups,
+      }),
+    [value, localBranches, remoteGroups]
   );
-  const hasExactMatch = exactLocalMatch ?? exactRemoteMatch;
 
-  // Show "Create new branch" option when there's input that doesn't exactly match
-  const showCreateOption = value.length > 0 && !hasExactMatch;
+  const showCreateOption = value.length > 0 && exactExistingBranchSelection === null;
 
   // Handle input focus - show dropdown and disable auto-generate
   const handleFocus = useCallback(() => {
@@ -170,13 +179,33 @@ export function BranchNameInput(props: BranchNameInputProps) {
     inputRef.current?.blur();
   }, [onSelectExistingBranch]);
 
-  // Handle input blur - close dropdown
+  // Handle input blur - close dropdown and opportunistically auto-select exact matches.
+  //
+  // Important: We only auto-select when the user *typed* an exact match but didn't click
+  // a dropdown item. If a dropdown item click already selected a branch, don't override it.
   const handleBlur = useCallback(() => {
     // Small delay to allow click events on dropdown items to fire first
     setTimeout(() => {
       setIsOpen(false);
+
+      if (disabled || !branchesLoaded) return;
+
+      // If the user clicked a dropdown item, selection was already set.
+      if (selectedExistingBranchRef.current) return;
+
+      if (value.length === 0) return;
+
+      if (exactExistingBranchSelection) {
+        onSelectExistingBranch(exactExistingBranchSelection);
+      }
     }, 150);
-  }, []);
+  }, [
+    branchesLoaded,
+    disabled,
+    exactExistingBranchSelection,
+    onSelectExistingBranch,
+    value.length,
+  ]);
 
   // Handle keyboard navigation
   const handleKeyDown = useCallback(
@@ -186,23 +215,21 @@ export function BranchNameInput(props: BranchNameInputProps) {
         inputRef.current?.blur();
       } else if (e.key === "Enter") {
         // If exact match exists, select it
-        if (exactLocalMatch) {
-          handleSelectLocalBranch(exactLocalMatch);
-        } else if (exactRemoteMatch) {
-          const branch = exactRemoteMatch.branches.find((b) => b.toLowerCase() === searchLower);
-          if (branch) {
-            handleSelectRemoteBranch(exactRemoteMatch.remote, branch);
-          }
+        if (exactExistingBranchSelection?.kind === "local") {
+          handleSelectLocalBranch(exactExistingBranchSelection.branch);
+        } else if (exactExistingBranchSelection?.kind === "remote") {
+          handleSelectRemoteBranch(
+            exactExistingBranchSelection.remote,
+            exactExistingBranchSelection.branch
+          );
         } else if (value.length > 0) {
           // No match - use as new branch name
           handleSelectCreateNew();
         }
       }
     },
     [
-      exactLocalMatch,
-      exactRemoteMatch,
-      searchLower,
+      exactExistingBranchSelection,
       value.length,
       handleSelectLocalBranch,
       handleSelectRemoteBranch,

src/browser/components/branchNameInputSelection.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, test } from "bun:test";
+
+import { inferExactExistingBranchSelection } from "./branchNameInputSelection";
+
+describe("inferExactExistingBranchSelection", () => {
+  test("returns local selection on exact local match", () => {
+    const selection = inferExactExistingBranchSelection({
+      value: "feature/foo",
+      localBranches: ["main", "feature/foo"],
+      remoteGroups: [{ remote: "origin", branches: ["feature/foo"] }],
+    });
+
+    expect(selection).toEqual({ kind: "local", branch: "feature/foo" });
+  });
+
+  test("returns remote selection on exact remote match", () => {
+    const selection = inferExactExistingBranchSelection({
+      value: "feature/foo",
+      localBranches: ["main"],
+      remoteGroups: [{ remote: "origin", branches: ["feature/foo"] }],
+    });
+
+    expect(selection).toEqual({ kind: "remote", remote: "origin", branch: "feature/foo" });
+  });
+
+  test("prefers origin when multiple remotes contain the same branch", () => {
+    const selection = inferExactExistingBranchSelection({
+      value: "feature/foo",
+      localBranches: [],
+      remoteGroups: [
+        { remote: "upstream", branches: ["feature/foo"] },
+        { remote: "origin", branches: ["feature/foo"] },
+      ],
+    });
+
+    expect(selection).toEqual({ kind: "remote", remote: "origin", branch: "feature/foo" });
+  });
+
+  test("returns null when there is no exact match", () => {
+    const selection = inferExactExistingBranchSelection({
+      value: "feature/foo",
+      localBranches: ["main"],
+      remoteGroups: [{ remote: "origin", branches: ["feature/bar"] }],
+    });
+
+    expect(selection).toBeNull();
+  });
+});

src/browser/components/branchNameInputSelection.ts

@@ -0,0 +1,46 @@
+import type { ExistingBranchSelection } from "@/common/types/branchSelection";
+
+export interface RemoteBranchGroupLike {
+  remote: string;
+  branches: string[];
+}
+
+/**
+ * Infer whether the current input value exactly matches an existing branch.
+ *
+ * This is used to keep workspace creation semantics correct:
+ * - If the name matches an existing local branch, treat it as existing.
+ * - If the name matches an existing remote-only branch, treat it as existing and prefer `origin`
+ *   when the same branch name exists on multiple remotes.
+ */
+export function inferExactExistingBranchSelection(params: {
+  value: string;
+  localBranches: string[];
+  remoteGroups: RemoteBranchGroupLike[];
+}): ExistingBranchSelection | null {
+  if (params.value.length === 0) return null;
+
+  const searchLower = params.value.toLowerCase();
+
+  const exactLocalMatch = params.localBranches.find((b) => b.toLowerCase() === searchLower);
+  if (exactLocalMatch) {
+    return { kind: "local", branch: exactLocalMatch };
+  }
+
+  const remoteMatches: Array<{ remote: string; branch: string }> = [];
+  for (const group of params.remoteGroups) {
+    const branch = group.branches.find((b) => b.toLowerCase() === searchLower);
+    if (branch) {
+      remoteMatches.push({ remote: group.remote, branch });
+    }
+  }
+
+  if (remoteMatches.length === 0) return null;
+
+  const chosen =
+    remoteMatches.length === 1
+      ? remoteMatches[0]
+      : (remoteMatches.find((m) => m.remote === "origin") ?? remoteMatches[0]);
+
+  return { kind: "remote", remote: chosen.remote, branch: chosen.branch };
+}