From dd6ef68b35aca115c10a5d7755b9b5c6bba18aac Mon Sep 17 00:00:00 2001
From: KCM <knightedcodemonkey@gmail.com>
Date: Mon, 23 Mar 2026 20:35:43 -0500
Subject: [PATCH 1/2] refactor: pr dependent dropdowns, toast position on
 mobile.

---
 playwright/app.spec.ts          |  87 +++++++++++++++
 src/index.html                  |  12 +-
 src/modules/github-api.js       |  56 ++++++++++
 src/modules/github-pr-drawer.js | 189 +++++++++++++++++++++++++++++++-
 src/styles/ai-controls.css      |  14 ++-
 src/styles/dialogs-overlays.css |   5 +-
 6 files changed, 350 insertions(+), 13 deletions(-)

diff --git a/playwright/app.spec.ts b/playwright/app.spec.ts
index 14a2a6f..225a87f 100644
--- a/playwright/app.spec.ts
+++ b/playwright/app.spec.ts
@@ -165,6 +165,17 @@ const connectByotWithSingleRepo = async (page: Page) => {
     })
   })
 
+  await page.route(
+    'https://api.github.com/repos/knightedcodemonkey/develop/branches**',
+    async route => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify([{ name: 'main' }, { name: 'release' }]),
+      })
+    },
+  )
+
   await page.locator('#github-token-input').fill('github_pat_fake_chat_1234567890')
   await page.locator('#github-token-add').click()
   await expect(page.locator('#status')).toHaveText('Loaded 1 writable repositories')
@@ -717,6 +728,82 @@ test('Open PR drawer confirms and submits component/styles filepaths', async ({
   )
 })
 
+test('Open PR drawer base dropdown updates from mocked repo branches', async ({
+  page,
+}) => {
+  const branchRequestUrls: string[] = []
+
+  await page.route('https://api.github.com/user/repos**', async route => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify([
+        {
+          id: 2,
+          owner: { login: 'knightedcodemonkey' },
+          name: 'develop',
+          full_name: 'knightedcodemonkey/develop',
+          default_branch: 'main',
+          permissions: { push: true },
+        },
+        {
+          id: 1,
+          owner: { login: 'knightedcodemonkey' },
+          name: 'css',
+          full_name: 'knightedcodemonkey/css',
+          default_branch: 'stable',
+          permissions: { push: true },
+        },
+      ]),
+    })
+  })
+
+  await page.route('https://api.github.com/repos/**/branches**', async route => {
+    const url = route.request().url()
+    branchRequestUrls.push(url)
+
+    const branchNames = url.includes('/repos/knightedcodemonkey/css/branches')
+      ? ['stable', 'release/1.x']
+      : ['main', 'develop-next']
+
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify(branchNames.map(name => ({ name }))),
+    })
+  })
+
+  await waitForAppReady(page, `${appEntryPath}?feature-ai=true`)
+
+  await page.locator('#github-token-input').fill('github_pat_fake_1234567890')
+  await page.locator('#github-token-add').click()
+  await expect(page.locator('#status')).toHaveText('Loaded 2 writable repositories')
+
+  await ensureOpenPrDrawerOpen(page)
+
+  const repoSelect = page.locator('#github-pr-repo-select')
+  const baseSelect = page.locator('#github-pr-base-branch')
+
+  await repoSelect.selectOption('knightedcodemonkey/develop')
+  await expect(baseSelect).toHaveValue('main')
+  await expect(baseSelect.locator('option')).toHaveText(['main', 'develop-next'])
+
+  await repoSelect.selectOption('knightedcodemonkey/css')
+  await expect(baseSelect).toHaveValue('stable')
+  await expect(baseSelect.locator('option')).toHaveText(['stable', 'release/1.x'])
+
+  expect(
+    branchRequestUrls.some(url =>
+      url.includes('https://api.github.com/repos/knightedcodemonkey/develop/branches'),
+    ),
+  ).toBe(true)
+  expect(
+    branchRequestUrls.some(url =>
+      url.includes('https://api.github.com/repos/knightedcodemonkey/css/branches'),
+    ),
+  ).toBe(true)
+})
+
 test('Open PR drawer validates unsafe filepaths', async ({ page }) => {
   await waitForAppReady(page, `${appEntryPath}?feature-ai=true`)
   await connectByotWithSingleRepo(page)
diff --git a/src/index.html b/src/index.html
index d7fecba..6c8be3e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -659,13 +659,13 @@ <h2>Open Pull Request</h2>
             for="github-pr-base-branch"
           >
             <span>Base</span>
-            <input
+            <select
               id="github-pr-base-branch"
-              type="text"
-              autocomplete="off"
-              spellcheck="false"
-              placeholder="main"
-            />
+              aria-label="Pull request base branch"
+              disabled
+            >
+              <option value="main" selected>main</option>
+            </select>
           </label>
 
           <label
diff --git a/src/modules/github-api.js b/src/modules/github-api.js
index 2d73a32..37007ff 100644
--- a/src/modules/github-api.js
+++ b/src/modules/github-api.js
@@ -107,6 +107,14 @@ const normalizeRepo = repo => {
 
 const hasWritePermission = permissions => Boolean(permissions && permissions.push)
 
+const normalizeBranchName = branch => {
+  if (!branch || typeof branch !== 'object') {
+    return null
+  }
+
+  return typeof branch.name === 'string' && branch.name.trim() ? branch.name : null
+}
+
 const buildRequestHeaders = token => ({
   Accept: 'application/vnd.github+json',
   Authorization: `Bearer ${token}`,
@@ -363,6 +371,19 @@ const listReposPage = async ({ token, url, signal }) => {
   }
 }
 
+const listBranchesPage = async ({ token, url, signal }) => {
+  const { data, nextPageUrl } = await fetchJson({ token, url, signal })
+
+  if (!Array.isArray(data)) {
+    throw new Error('Unexpected response while loading repository branches from GitHub.')
+  }
+
+  return {
+    branches: data.map(normalizeBranchName).filter(Boolean),
+    nextPageUrl,
+  }
+}
+
 export const listWritableRepositories = async ({ token, signal }) => {
   if (typeof token !== 'string' || token.trim().length === 0) {
     throw new Error('A GitHub token is required to load repositories.')
@@ -394,6 +415,41 @@ export const listWritableRepositories = async ({ token, signal }) => {
   return writableRepos
 }
 
+export const listRepositoryBranches = async ({ token, owner, repo, signal }) => {
+  if (typeof token !== 'string' || token.trim().length === 0) {
+    throw new Error('A GitHub token is required to load branches.')
+  }
+
+  if (typeof owner !== 'string' || !owner || typeof repo !== 'string' || !repo) {
+    throw new Error('A valid repository owner/name is required to load branches.')
+  }
+
+  const branches = []
+  const dedupe = new Set()
+  let nextPageUrl = `${githubApiBaseUrl}/repos/${owner}/${repo}/branches?per_page=100`
+  let remainingPageBudget = 5
+
+  while (nextPageUrl && remainingPageBudget > 0) {
+    /* Branch pagination depends on the prior Link header response. */
+    // eslint-disable-next-line no-await-in-loop
+    const page = await listBranchesPage({ token, url: nextPageUrl, signal })
+    for (const name of page.branches) {
+      if (dedupe.has(name)) {
+        continue
+      }
+
+      dedupe.add(name)
+      branches.push(name)
+    }
+
+    nextPageUrl = page.nextPageUrl
+    remainingPageBudget -= 1
+  }
+
+  branches.sort((left, right) => left.localeCompare(right))
+  return branches
+}
+
 export const streamGitHubChatCompletion = async ({
   token,
   messages,
diff --git a/src/modules/github-pr-drawer.js b/src/modules/github-pr-drawer.js
index cbee5ee..f75fc4f 100644
--- a/src/modules/github-pr-drawer.js
+++ b/src/modules/github-pr-drawer.js
@@ -1,4 +1,4 @@
-import { createEditorContentPullRequest } from './github-api.js'
+import { createEditorContentPullRequest, listRepositoryBranches } from './github-api.js'
 
 const prConfigStoragePrefix = 'knighted:develop:github-pr-config:'
 
@@ -192,6 +192,50 @@ const buildSummary = ({
   ].join('\n')
 }
 
+const toBranchCacheKey = repository => {
+  const owner = toSafeText(repository?.owner)
+  const name = toSafeText(repository?.name)
+  if (!owner || !name) {
+    return ''
+  }
+
+  return `${owner}/${name}`
+}
+
+const createSelectOption = ({ value, label, selected = false, disabled = false }) => {
+  const option = document.createElement('option')
+  option.value = value
+  option.textContent = label
+  option.selected = selected
+  option.disabled = disabled
+  return option
+}
+
+const mergeBranchOptions = ({ preferredBranch, branchNames }) => {
+  const dedupe = new Set()
+  const result = []
+
+  const pushBranch = branch => {
+    const safeBranch = toSafeText(branch)
+    if (!safeBranch || dedupe.has(safeBranch)) {
+      return
+    }
+
+    dedupe.add(safeBranch)
+    result.push(safeBranch)
+  }
+
+  pushBranch(preferredBranch)
+
+  if (Array.isArray(branchNames)) {
+    for (const branchName of branchNames) {
+      pushBranch(branchName)
+    }
+  }
+
+  return result
+}
+
 export const createGitHubPrDrawer = ({
   featureEnabled,
   toggleButton,
@@ -233,7 +277,9 @@ export const createGitHubPrDrawer = ({
   let open = false
   let submitting = false
   let pendingAbortController = null
+  let pendingBranchesAbortController = null
   let resetOnNextOpen = false
+  const baseBranchesByRepository = new Map()
   const submitButtonDefaultLabel =
     submitButton instanceof HTMLButtonElement && toSafeText(submitButton.textContent)
       ? toSafeText(submitButton.textContent)
@@ -293,6 +339,122 @@ export const createGitHubPrDrawer = ({
     }
   }
 
+  const abortPendingBranchesRequest = () => {
+    pendingBranchesAbortController?.abort()
+    pendingBranchesAbortController = null
+  }
+
+  const renderBaseBranchOptions = ({ preferredBranch, branchNames, loading = false }) => {
+    const baseBranch = toSafeText(preferredBranch) || 'main'
+
+    if (baseBranchInput instanceof HTMLInputElement) {
+      baseBranchInput.value = baseBranch
+      return
+    }
+
+    if (!(baseBranchInput instanceof HTMLSelectElement)) {
+      return
+    }
+
+    if (loading) {
+      baseBranchInput.replaceChildren(
+        createSelectOption({
+          value: baseBranch,
+          label: 'Loading branches...',
+        }),
+      )
+      baseBranchInput.value = baseBranch
+      baseBranchInput.disabled = true
+      return
+    }
+
+    const mergedOptions = mergeBranchOptions({ preferredBranch: baseBranch, branchNames })
+
+    const options = mergedOptions.map(branchName =>
+      createSelectOption({
+        value: branchName,
+        label: branchName,
+        selected: branchName === baseBranch,
+      }),
+    )
+
+    baseBranchInput.replaceChildren(...options)
+    baseBranchInput.disabled = submitting
+    baseBranchInput.value = baseBranch
+  }
+
+  const getPreferredBaseBranchForRepository = repository => {
+    const repositoryFullName = getRepositoryFullName(repository)
+    const savedConfig = readRepositoryPrConfig(repositoryFullName)
+    return (
+      toSafeText(savedConfig.baseBranch) ||
+      toSafeText(repository?.defaultBranch) ||
+      'main'
+    )
+  }
+
+  const loadBaseBranchesForSelectedRepository = async ({ preferredBranch }) => {
+    const repository = getSelectedRepositoryObject()
+    const cacheKey = toBranchCacheKey(repository)
+    const nextPreferredBranch =
+      toSafeText(preferredBranch) || getPreferredBaseBranchForRepository(repository)
+
+    if (!cacheKey) {
+      renderBaseBranchOptions({ preferredBranch: nextPreferredBranch, branchNames: [] })
+      return
+    }
+
+    const token = toSafeText(getToken?.())
+    if (!token) {
+      renderBaseBranchOptions({ preferredBranch: nextPreferredBranch, branchNames: [] })
+      return
+    }
+
+    const cachedBranches = baseBranchesByRepository.get(cacheKey)
+    if (Array.isArray(cachedBranches) && cachedBranches.length > 0) {
+      renderBaseBranchOptions({
+        preferredBranch: nextPreferredBranch,
+        branchNames: cachedBranches,
+      })
+      return
+    }
+
+    abortPendingBranchesRequest()
+    renderBaseBranchOptions({ preferredBranch: nextPreferredBranch, loading: true })
+
+    const abortController = new AbortController()
+    pendingBranchesAbortController = abortController
+
+    try {
+      const branches = await listRepositoryBranches({
+        token,
+        owner: repository.owner,
+        repo: repository.name,
+        signal: abortController.signal,
+      })
+
+      if (pendingBranchesAbortController !== abortController) {
+        return
+      }
+
+      baseBranchesByRepository.set(cacheKey, branches)
+      renderBaseBranchOptions({
+        preferredBranch: nextPreferredBranch,
+        branchNames: branches,
+      })
+    } catch {
+      if (abortController.signal.aborted) {
+        return
+      }
+
+      renderBaseBranchOptions({ preferredBranch: nextPreferredBranch, branchNames: [] })
+    } finally {
+      if (pendingBranchesAbortController === abortController) {
+        pendingBranchesAbortController = null
+      }
+    }
+  }
+
   const syncRepositorySelect = ({ repositories, selectedRepository }) => {
     if (!(repositorySelect instanceof HTMLSelectElement)) {
       return
@@ -360,9 +522,7 @@ export const createGitHubPrDrawer = ({
       toSafeText(repository?.defaultBranch) ||
       'main'
 
-    if (baseBranchInput instanceof HTMLInputElement) {
-      baseBranchInput.value = baseBranch
-    }
+    renderBaseBranchOptions({ preferredBranch: baseBranch, branchNames: [] })
 
     if (headBranchInput instanceof HTMLInputElement) {
       if (resetAll || resetBranch || !toSafeText(headBranchInput.value)) {
@@ -417,6 +577,9 @@ export const createGitHubPrDrawer = ({
     const selectedRepository = getSelectedRepositoryObject()
     syncRepositorySelect({ repositories, selectedRepository })
     syncFormForRepository()
+    void loadBaseBranchesForSelectedRepository({
+      preferredBranch: getFormValues().baseBranch,
+    })
   }
 
   const setOpen = nextOpen => {
@@ -441,9 +604,15 @@ export const createGitHubPrDrawer = ({
         resetAll: resetOnNextOpen,
         resetBranch: resetOnNextOpen,
       })
+      void loadBaseBranchesForSelectedRepository({
+        preferredBranch: getFormValues().baseBranch,
+      })
       resetOnNextOpen = false
       repositorySelect?.focus()
+      return
     }
+
+    abortPendingBranchesRequest()
   }
 
   const runSubmit = async () => {
@@ -602,6 +771,9 @@ export const createGitHubPrDrawer = ({
 
     setSelectedRepository?.(repositoryFullName)
     syncFormForRepository({ resetBranch: true })
+    void loadBaseBranchesForSelectedRepository({
+      preferredBranch: getFormValues().baseBranch,
+    })
   })
 
   componentPathInput?.addEventListener('blur', persistCurrentPaths)
@@ -631,8 +803,16 @@ export const createGitHubPrDrawer = ({
       }
 
       if (!hasToken) {
+        abortPendingBranchesRequest()
+        baseBranchesByRepository.clear()
         setOpen(false)
+        renderBaseBranchOptions({ preferredBranch: 'main', branchNames: [] })
+        return
       }
+
+      void loadBaseBranchesForSelectedRepository({
+        preferredBranch: getFormValues().baseBranch,
+      })
     },
     setSelectedRepository: () => {
       syncRepositories()
@@ -641,6 +821,7 @@ export const createGitHubPrDrawer = ({
     dispose: () => {
       pendingAbortController?.abort()
       pendingAbortController = null
+      abortPendingBranchesRequest()
     },
   }
 }
diff --git a/src/styles/ai-controls.css b/src/styles/ai-controls.css
index 081be38..fa9f45b 100644
--- a/src/styles/ai-controls.css
+++ b/src/styles/ai-controls.css
@@ -802,7 +802,19 @@
   }
 
   .github-pr-drawer__form-grid {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .github-pr-field--repo,
+  .github-pr-field--component-filename,
+  .github-pr-field--styles-filename,
+  .github-pr-field--full {
+    grid-column: 1 / -1;
+  }
+
+  .github-pr-field--base,
+  .github-pr-field--head {
+    grid-column: span 1;
   }
 
   .ai-chat-drawer__meta {
diff --git a/src/styles/dialogs-overlays.css b/src/styles/dialogs-overlays.css
index 1ca96c2..a12479a 100644
--- a/src/styles/dialogs-overlays.css
+++ b/src/styles/dialogs-overlays.css
@@ -113,7 +113,7 @@
   padding: 10px 12px;
   font-size: 0.84rem;
   line-height: 1.35;
-  z-index: 130;
+  z-index: 140;
   opacity: 0;
   transform: translateY(-6px);
   transition:
@@ -129,7 +129,8 @@
 
 @media (max-width: 900px) {
   .app-toast {
-    top: 66px;
+    top: auto;
+    bottom: 12px;
     left: 12px;
     right: 12px;
     max-width: none;

From d53830932fa7fc0e1485a99d21c754fca615e7e1 Mon Sep 17 00:00:00 2001
From: KCM <knightedcodemonkey@gmail.com>
Date: Mon, 23 Mar 2026 21:02:22 -0500
Subject: [PATCH 2/2] refactor: address pr comments.

---
 playwright/app.spec.ts          | 46 ++++++++++++++++++++++++++-------
 src/modules/github-api.js       | 28 +++++++++++++-------
 src/modules/github-pr-drawer.js | 33 ++++++++++++++++++++++-
 3 files changed, 87 insertions(+), 20 deletions(-)

diff --git a/playwright/app.spec.ts b/playwright/app.spec.ts
index 225a87f..bdd38b5 100644
--- a/playwright/app.spec.ts
+++ b/playwright/app.spec.ts
@@ -27,6 +27,8 @@ type PullRequestCreateBody = {
   base?: string
 }
 
+type BranchesByRepo = Record<string, string[]>
+
 const waitForAppReady = async (page: Page, path = appEntryPath) => {
   await page.goto(path)
   await expect(page.getByRole('heading', { name: '@knighted/develop' })).toBeVisible()
@@ -147,6 +149,28 @@ const ensureOpenPrDrawerOpen = async (page: Page) => {
   await expect(page.locator('#github-pr-drawer')).toBeVisible()
 }
 
+const mockRepositoryBranches = async (
+  page: Page,
+  branchesByRepo: BranchesByRepo = {},
+) => {
+  await page.route('https://api.github.com/repos/**/branches**', async route => {
+    const url = new URL(route.request().url())
+    const match = url.pathname.match(/^\/repos\/([^/]+)\/([^/]+)\/branches$/)
+    const repositoryKey = match ? `${match[1]}/${match[2]}` : ''
+
+    const branchNames =
+      branchesByRepo[repositoryKey] && branchesByRepo[repositoryKey].length > 0
+        ? branchesByRepo[repositoryKey]
+        : ['main']
+
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify(branchNames.map(name => ({ name }))),
+    })
+  })
+}
+
 const connectByotWithSingleRepo = async (page: Page) => {
   await page.route('https://api.github.com/user/repos**', async route => {
     await route.fulfill({
@@ -165,16 +189,9 @@ const connectByotWithSingleRepo = async (page: Page) => {
     })
   })
 
-  await page.route(
-    'https://api.github.com/repos/knightedcodemonkey/develop/branches**',
-    async route => {
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify([{ name: 'main' }, { name: 'release' }]),
-      })
-    },
-  )
+  await mockRepositoryBranches(page, {
+    'knightedcodemonkey/develop': ['main', 'release'],
+  })
 
   await page.locator('#github-token-input').fill('github_pat_fake_chat_1234567890')
   await page.locator('#github-token-add').click()
@@ -539,6 +556,11 @@ test('BYOT remembers selected repository across reloads', async ({ page }) => {
     })
   })
 
+  await mockRepositoryBranches(page, {
+    'knightedcodemonkey/develop': ['main', 'release'],
+    'knightedcodemonkey/css': ['main', 'release/1.x'],
+  })
+
   await waitForAppReady(page, `${appEntryPath}?feature-ai=true`)
 
   await page.locator('#github-token-input').fill('github_pat_fake_1234567890')
@@ -588,6 +610,10 @@ test('Open PR drawer confirms and submits component/styles filepaths', async ({
     })
   })
 
+  await mockRepositoryBranches(page, {
+    'knightedcodemonkey/develop': ['main', 'release'],
+  })
+
   await page.route(
     'https://api.github.com/repos/knightedcodemonkey/develop/git/ref/**',
     async route => {
diff --git a/src/modules/github-api.js b/src/modules/github-api.js
index 37007ff..ee17cc6 100644
--- a/src/modules/github-api.js
+++ b/src/modules/github-api.js
@@ -420,19 +420,22 @@ export const listRepositoryBranches = async ({ token, owner, repo, signal }) =>
     throw new Error('A GitHub token is required to load branches.')
   }
 
-  if (typeof owner !== 'string' || !owner || typeof repo !== 'string' || !repo) {
+  const normalizedOwner = typeof owner === 'string' ? owner.trim() : ''
+  const normalizedRepo = typeof repo === 'string' ? repo.trim() : ''
+
+  if (!normalizedOwner || !normalizedRepo) {
     throw new Error('A valid repository owner/name is required to load branches.')
   }
 
   const branches = []
   const dedupe = new Set()
-  let nextPageUrl = `${githubApiBaseUrl}/repos/${owner}/${repo}/branches?per_page=100`
-  let remainingPageBudget = 5
+  const collectBranchesByPage = async ({ url, remainingPageBudget }) => {
+    if (!url || remainingPageBudget <= 0) {
+      return
+    }
+
+    const page = await listBranchesPage({ token, url, signal })
 
-  while (nextPageUrl && remainingPageBudget > 0) {
-    /* Branch pagination depends on the prior Link header response. */
-    // eslint-disable-next-line no-await-in-loop
-    const page = await listBranchesPage({ token, url: nextPageUrl, signal })
     for (const name of page.branches) {
       if (dedupe.has(name)) {
         continue
@@ -442,10 +445,17 @@ export const listRepositoryBranches = async ({ token, owner, repo, signal }) =>
       branches.push(name)
     }
 
-    nextPageUrl = page.nextPageUrl
-    remainingPageBudget -= 1
+    await collectBranchesByPage({
+      url: page.nextPageUrl,
+      remainingPageBudget: remainingPageBudget - 1,
+    })
   }
 
+  await collectBranchesByPage({
+    url: `${githubApiBaseUrl}/repos/${normalizedOwner}/${normalizedRepo}/branches?per_page=100`,
+    remainingPageBudget: 5,
+  })
+
   branches.sort((left, right) => left.localeCompare(right))
   return branches
 }
diff --git a/src/modules/github-pr-drawer.js b/src/modules/github-pr-drawer.js
index f75fc4f..13e51d0 100644
--- a/src/modules/github-pr-drawer.js
+++ b/src/modules/github-pr-drawer.js
@@ -278,6 +278,8 @@ export const createGitHubPrDrawer = ({
   let submitting = false
   let pendingAbortController = null
   let pendingBranchesAbortController = null
+  let pendingBranchesRequestKey = ''
+  let pendingBranchesPromise = null
   let resetOnNextOpen = false
   const baseBranchesByRepository = new Map()
   const submitButtonDefaultLabel =
@@ -398,6 +400,7 @@ export const createGitHubPrDrawer = ({
     const cacheKey = toBranchCacheKey(repository)
     const nextPreferredBranch =
       toSafeText(preferredBranch) || getPreferredBaseBranchForRepository(repository)
+    const requestKey = `${cacheKey}:${nextPreferredBranch}`
 
     if (!cacheKey) {
       renderBaseBranchOptions({ preferredBranch: nextPreferredBranch, branchNames: [] })
@@ -419,13 +422,18 @@ export const createGitHubPrDrawer = ({
       return
     }
 
+    if (pendingBranchesPromise && pendingBranchesRequestKey === requestKey) {
+      await pendingBranchesPromise
+      return
+    }
+
     abortPendingBranchesRequest()
     renderBaseBranchOptions({ preferredBranch: nextPreferredBranch, loading: true })
 
     const abortController = new AbortController()
     pendingBranchesAbortController = abortController
 
-    try {
+    const runBranchRequest = async () => {
       const branches = await listRepositoryBranches({
         token,
         owner: repository.owner,
@@ -442,6 +450,15 @@ export const createGitHubPrDrawer = ({
         preferredBranch: nextPreferredBranch,
         branchNames: branches,
       })
+    }
+
+    const requestPromise = runBranchRequest()
+
+    pendingBranchesRequestKey = requestKey
+    pendingBranchesPromise = requestPromise
+
+    try {
+      await requestPromise
     } catch {
       if (abortController.signal.aborted) {
         return
@@ -452,6 +469,11 @@ export const createGitHubPrDrawer = ({
       if (pendingBranchesAbortController === abortController) {
         pendingBranchesAbortController = null
       }
+
+      if (pendingBranchesPromise === requestPromise) {
+        pendingBranchesPromise = null
+        pendingBranchesRequestKey = ''
+      }
     }
   }
 
@@ -577,6 +599,10 @@ export const createGitHubPrDrawer = ({
     const selectedRepository = getSelectedRepositoryObject()
     syncRepositorySelect({ repositories, selectedRepository })
     syncFormForRepository()
+    if (!open) {
+      return
+    }
+
     void loadBaseBranchesForSelectedRepository({
       preferredBranch: getFormValues().baseBranch,
     })
@@ -778,6 +804,7 @@ export const createGitHubPrDrawer = ({
 
   componentPathInput?.addEventListener('blur', persistCurrentPaths)
   stylesPathInput?.addEventListener('blur', persistCurrentPaths)
+  baseBranchInput?.addEventListener('change', persistCurrentPaths)
   baseBranchInput?.addEventListener('blur', persistCurrentPaths)
   headBranchInput?.addEventListener('blur', persistCurrentPaths)
   prTitleInput?.addEventListener('blur', persistCurrentPaths)
@@ -810,6 +837,10 @@ export const createGitHubPrDrawer = ({
         return
       }
 
+      if (!open) {
+        return
+      }
+
       void loadBaseBranchesForSelectedRepository({
         preferredBranch: getFormValues().baseBranch,
       })