From 9b54df8feed4ae3e94cc6e10306c4c2f2c371e86 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sat, 19 Sep 2026 21:44:11 +0000
Subject: [PATCH 1/8] fix(webapp): improve preview branch auto-archive settings
 UI

---
 .../preview-auto-archive-settings-ui.md       |   6 +
 .../route.tsx                                 | 104 +++---
 .../resources.branches.auto-archive.tsx       | 330 +++++++++++-------
 3 files changed, 264 insertions(+), 176 deletions(-)
 create mode 100644 .server-changes/preview-auto-archive-settings-ui.md

diff --git a/.server-changes/preview-auto-archive-settings-ui.md b/.server-changes/preview-auto-archive-settings-ui.md
new file mode 100644
index 00000000000..3c69a43040e
--- /dev/null
+++ b/.server-changes/preview-auto-archive-settings-ui.md
@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Simplify preview branch auto-archive settings with clearer descriptions, individual fields for branches to keep, and an option to disable auto-archiving in the settings dialog.
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.branches/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.branches/route.tsx
index 48a31788eb7..baf236d19c7 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.branches/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.branches/route.tsx
@@ -287,57 +287,67 @@ export default function Page() {
               Branches docs
             </LinkButton>
           </WhenAgentUnavailable>
-
-          {limits.isAtLimit ? (
-            <UpgradePanel
-              limits={limits}
-              canUpgrade={canUpgrade ?? false}
-              canPurchaseBranches={canPurchaseBranches}
-              branchPricing={branchPricing}
-              extraBranches={extraBranches}
-              maxBranchQuota={maxBranchQuota}
-              planBranchLimit={planBranchLimit}
-            />
-          ) : (
-            <NewBranchPanel
-              button={
-                <Button
-                  variant="primary/small"
-                  shortcut={{ key: "n" }}
-                  LeadingIcon={PlusIcon}
-                  leadingIconClassName="text-white"
-                  fullWidth
-                  textAlignLeft
-                  disabled={!canManageBranches}
-                  tooltip={
-                    canManageBranches ? undefined : "You don't have permission to create branches."
-                  }
-                >
-                  New branch…
-                </Button>
-              }
-              env="preview"
-            />
-          )}
         </PageAccessories>
       </NavBar>
       <PageBody scrollable={false}>
-        <div className="grid max-h-full min-h-full grid-rows-[auto_1fr_auto]">
-          <div className="flex items-center justify-between gap-x-1.5 p-2">
-            <BranchFilters>
-              {autoArchiveAvailable && (
-                <AutoArchiveSettings
-                  environment={branchableEnvironment}
-                  canManage={canManageBranches}
+        <div
+          className={cn(
+            "grid max-h-full min-h-full",
+            hasBranches ? "grid-rows-[auto_1fr_auto]" : "grid-rows-[1fr]"
+          )}
+        >
+          {hasBranches && (
+            <div className="flex items-center justify-between gap-x-1.5 p-2">
+              <BranchFilters>
+                {autoArchiveAvailable && (
+                  <AutoArchiveSettings
+                    environment={branchableEnvironment}
+                    canManage={canManageBranches}
+                  />
+                )}
+              </BranchFilters>
+              <div className="flex shrink-0 items-center gap-2">
+                <PaginationControls
+                  currentPage={currentPage}
+                  totalPages={totalPages}
+                  showPageNumbers={false}
                 />
-              )}
-            </BranchFilters>
-            <PaginationControls
-              currentPage={currentPage}
-              totalPages={totalPages}
-              showPageNumbers={false}
-            />
-          </div>
+                {limits.isAtLimit ? (
+                  <UpgradePanel
+                    limits={limits}
+                    canUpgrade={canUpgrade ?? false}
+                    canPurchaseBranches={canPurchaseBranches}
+                    branchPricing={branchPricing}
+                    extraBranches={extraBranches}
+                    maxBranchQuota={maxBranchQuota}
+                    planBranchLimit={planBranchLimit}
+                  />
+                ) : (
+                  <NewBranchPanel
+                    button={
+                      <Button
+                        variant="primary/small"
+                        shortcut={{ key: "n" }}
+                        LeadingIcon={PlusIcon}
+                        leadingIconClassName="text-white"
+                        fullWidth
+                        textAlignLeft
+                        disabled={!canManageBranches}
+                        tooltip={
+                          canManageBranches
+                            ? undefined
+                            : "You don't have permission to create branches."
+                        }
+                      >
+                        New branch…
+                      </Button>
+                    }
+                    env="preview"
+                  />
+                )}
+              </div>
+            </div>
+          )}
           {!hasBranches ? (
             <MainCenteredContainer className="max-w-md">
               <BranchesNoBranches
diff --git a/apps/webapp/app/routes/resources.branches.auto-archive.tsx b/apps/webapp/app/routes/resources.branches.auto-archive.tsx
index d44bc623e15..ae0ec399b49 100644
--- a/apps/webapp/app/routes/resources.branches.auto-archive.tsx
+++ b/apps/webapp/app/routes/resources.branches.auto-archive.tsx
@@ -1,7 +1,7 @@
 import { type ActionFunctionArgs, type SerializeFrom, json } from "@remix-run/server-runtime";
 import { useFetcher } from "@remix-run/react";
 import { useEffect, useRef, useState } from "react";
-import { Cog6ToothIcon } from "@heroicons/react/20/solid";
+import { Cog6ToothIcon, TrashIcon } from "@heroicons/react/20/solid";
 import { prisma } from "~/db.server";
 import { requireUserId } from "~/services/session.server";
 import { rbac } from "~/services/rbac.server";
@@ -12,15 +12,27 @@ import {
 } from "~/services/previewAutoArchive.server";
 import { PreviewAutoArchivePolicy } from "~/utils/previewAutoArchive";
 import { Button } from "~/components/primitives/Buttons";
-import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "~/components/primitives/Dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "~/components/primitives/Dialog";
 import { Input } from "~/components/primitives/Input";
-import { TextArea } from "~/components/primitives/TextArea";
-import { Label } from "~/components/primitives/Label";
+import { Fieldset } from "~/components/primitives/Fieldset";
+import { InputGroup } from "~/components/primitives/InputGroup";
+import { Hint } from "~/components/primitives/Hint";
+import { Label, labelVariants } from "~/components/primitives/Label";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { FormError } from "~/components/primitives/FormError";
 import { Switch } from "~/components/primitives/Switch";
 import { readBoundedBodyText } from "~/utils/boundedRequestBody.server";
 
+import { trail } from "agentcrumbs"; // @crumbs
+const crumb = trail("webapp"); // @crumbs
+
 export async function action({ request }: ActionFunctionArgs) {
   const userId = await requireUserId(request);
   if (request.headers.get("content-type")?.split(";")[0] !== "application/x-www-form-urlencoded") {
@@ -46,7 +58,7 @@ export async function action({ request }: ActionFunctionArgs) {
     return json(
       {
         ok: false,
-        error: "Enter 1–365 days and up to 100 valid branch names, one per line.",
+        error: "Enter 1–365 days and up to 100 valid branch names.",
       } as const,
       { status: 400 }
     );
@@ -137,61 +149,43 @@ export function AutoArchiveSettings({
   canManage: boolean;
 }) {
   const [open, setOpen] = useState(false);
-  const fetcher = useFetcher<typeof action>();
-  const toggleRef = useRef<HTMLButtonElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
   const enabled = environment.previewAutoArchiveAfterDays !== null;
 
-  function handleToggle(checked: boolean) {
-    if (checked) {
-      setOpen(true);
-    } else {
-      fetcher.submit(
-        {
-          environmentId: environment.id,
-          intent: "save",
-          excludedBranches: environment.previewAutoArchiveExcludedBranches.join("\n"),
-        },
-        { method: "post", action: "/resources/branches/auto-archive" }
-      );
-    }
-  }
-
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <div className="flex shrink-0 flex-col gap-1">
-        <div className="flex items-center gap-1.5">
-          <Switch
-            ref={toggleRef}
-            label="Auto-archive"
+      {enabled ? (
+        <DialogTrigger asChild>
+          <Button
+            ref={triggerRef}
             variant="secondary/small"
-            checked={enabled}
-            onCheckedChange={handleToggle}
-            disabled={!canManage || fetcher.state !== "idle"}
-          />
-          {enabled && (
-            <DialogTrigger asChild>
-              <Button
-                variant="secondary/small"
-                LeadingIcon={Cog6ToothIcon}
-                aria-label="Auto-archive settings"
-                className="shrink-0 whitespace-nowrap"
-                disabled={!canManage || fetcher.state !== "idle"}
-              >
-                Settings
-              </Button>
-            </DialogTrigger>
-          )}
-        </div>
-        {fetcher.data && !fetcher.data.ok && <FormError>{fetcher.data.error}</FormError>}
-      </div>
+            LeadingIcon={Cog6ToothIcon}
+            className="shrink-0 whitespace-nowrap"
+            disabled={!canManage}
+          >
+            Manage auto-archive
+          </Button>
+        </DialogTrigger>
+      ) : (
+        <Switch
+          ref={triggerRef}
+          label="Auto-archive"
+          variant="secondary/small"
+          checked={false}
+          onCheckedChange={() => setOpen(true)}
+          disabled={!canManage}
+        />
+      )}
       <DialogContent
         className="max-h-[90vh] overflow-y-auto"
         onCloseAutoFocus={(event) => {
           event.preventDefault();
-          toggleRef.current?.focus();
+          triggerRef.current?.focus();
         }}
       >
-        <DialogHeader>Auto-archive preview branches</DialogHeader>
+        <DialogHeader>
+          <DialogTitle>Auto-archive preview branches</DialogTitle>
+        </DialogHeader>
         {open && <AutoArchiveForm environment={environment} onSaved={() => setOpen(false)} />}
       </DialogContent>
     </Dialog>
@@ -216,9 +210,40 @@ function AutoArchiveForm({
   }>({ pending: false });
   const [requestedKey, setRequestedKey] = useState<string | null>(null);
   const [days, setDays] = useState(String(environment.previewAutoArchiveAfterDays ?? 14));
-  const [excluded, setExcluded] = useState(
-    environment.previewAutoArchiveExcludedBranches.join("\n")
+  const [excludedRows, setExcludedRows] = useState(() =>
+    [...environment.previewAutoArchiveExcludedBranches, ""].map((name, id) => ({ id, name }))
   );
+  const nextRowId = useRef(excludedRows.length);
+  const excluded = excludedRows.map(({ name }) => name).join("\n");
+  const enabled = environment.previewAutoArchiveAfterDays !== null;
+
+  function updateExcludedBranch(id: number, name: string) {
+    const rows = excludedRows.map((row) => (row.id === id ? { ...row, name } : row));
+    if (rows.every((row) => row.name.trim() !== "") && rows.length < 100) {
+      rows.push({ id: nextRowId.current++, name: "" });
+    }
+    setExcludedRows(rows);
+  }
+
+  function removeExcludedBranch(id: number) {
+    const rows = excludedRows.filter((row) => row.id !== id);
+    if (rows.length === 0 || rows.every((row) => row.name.trim() !== "")) {
+      rows.push({ id: nextRowId.current++, name: "" });
+    }
+    setExcludedRows(rows);
+  }
+
+  function disableAutoArchive() {
+    crumb("disable preview auto-archive", { environmentId: environment.id }); // @crumbs
+    fetcher.submit(
+      {
+        environmentId: environment.id,
+        intent: "save",
+        excludedBranches: environment.previewAutoArchiveExcludedBranches.join("\n"),
+      },
+      { method: "post", action: "/resources/branches/auto-archive" }
+    );
+  }
   const policyKey = JSON.stringify({
     days: Number(days),
     excludedBranches: [
@@ -283,89 +308,136 @@ function AutoArchiveForm({
     >
       <input type="hidden" name="environmentId" value={environment.id} />
       <input type="hidden" name="enabled" value="on" />
-      <div className="flex flex-col gap-2">
-        <Label htmlFor="archive-days">Days without a deployment</Label>
-        <Input
-          id="archive-days"
-          name="days"
-          type="number"
-          min={1}
-          max={365}
-          required
-          disabled={busy}
-          value={days}
-          onChange={(event) => setDays(event.target.value)}
-        />
-      </div>
-      <div className="flex flex-col gap-2">
-        <Label htmlFor="archive-exclusions">Protected branches</Label>
-        <TextArea
-          id="archive-exclusions"
-          name="excludedBranches"
-          rows={3}
-          maxLength={25_600}
-          placeholder="staging"
-          disabled={busy}
-          value={excluded}
-          onChange={(event) => setExcluded(event.target.value)}
-        />
-        <Paragraph>Exact branch names, one per line.</Paragraph>
-      </div>
-      <section
-        className="min-h-36 max-h-48 overflow-y-auto rounded border border-grid-bright p-3"
-        aria-label="Archive preview"
-        aria-live="polite"
-        aria-busy={valid && !reviewed && preview.pending}
-      >
-        <Paragraph className="mb-2 text-text-bright">Preview</Paragraph>
-        {!valid ? (
-          <Paragraph>Enter 1–365 days and valid branch names to see the preview.</Paragraph>
-        ) : reviewed && preview.data?.ok ? (
-          <div className="space-y-2 text-sm text-text-dimmed">
-            <ul className="list-disc space-y-1 pl-4">
-              <li className={preview.data.count > 0 ? "text-amber-400" : undefined}>
-                {preview.data.partial ? "At least " : ""}
-                {preview.data.count} {preview.data.count === 1 ? "branch is" : "branches are"} ready
-                to archive now.
-                {preview.data.count > 0 &&
-                  " Saving will make these branches eligible for the next cleanup check."}
-              </li>
-              <li>
-                {preview.data.partial ? "At least " : ""}
-                {preview.data.scheduled}{" "}
-                {preview.data.scheduled === 1 ? "branch will" : "branches will"} archive later if no
-                new deployments occur.
-              </li>
-              <li>
-                {preview.data.partial ? "At least " : ""}
-                {preview.data.protectedBranches.length} protected{" "}
-                {preview.data.protectedBranches.length === 1 ? "branch will" : "branches will"} be
-                ignored.
-              </li>
-              {preview.data.inProgress > 0 && (
+      <input type="hidden" name="excludedBranches" value={excluded} />
+      <Fieldset>
+        <InputGroup fullWidth>
+          <Label htmlFor="archive-days">Automatically archive preview branches after</Label>
+          <Input
+            id="archive-days"
+            name="days"
+            type="number"
+            min={1}
+            max={365}
+            required
+            disabled={busy}
+            value={days}
+            onChange={(event) => setDays(event.target.value)}
+            className="min-w-0"
+            accessory={<span className="text-sm text-text-bright">days</span>}
+            aria-describedby="archive-days-description"
+          />
+          <div id="archive-days-description">
+            <Hint>Since the last deployment, or branch creation if never deployed.</Hint>
+          </div>
+        </InputGroup>
+        <InputGroup fullWidth>
+          <Label htmlFor={`archive-exclusion-${excludedRows[0].id}`} required={false}>
+            Branches to keep
+          </Label>
+          {excludedRows.map((row, index) => (
+            <div key={row.id} className="flex items-center gap-2">
+              <Input
+                id={`archive-exclusion-${row.id}`}
+                aria-label={`Branch to keep ${index + 1}`}
+                aria-describedby="archive-exclusions-description"
+                maxLength={255}
+                placeholder={index === 0 ? "Branch name, e.g. staging" : "Add another branch"}
+                disabled={busy}
+                value={row.name}
+                onChange={(event) => updateExcludedBranch(row.id, event.target.value)}
+              />
+              {(row.name !== "" || index < excludedRows.length - 1) && (
+                <Button
+                  type="button"
+                  variant="secondary/medium"
+                  LeadingIcon={TrashIcon}
+                  aria-label={`Remove branch ${row.name || index + 1}`}
+                  disabled={busy}
+                  onClick={() => removeExcludedBranch(row.id)}
+                />
+              )}
+            </div>
+          ))}
+          <div id="archive-exclusions-description">
+            <Hint>
+              Never auto-archive these branches. Use exact names; wildcards aren’t supported.
+            </Hint>
+          </div>
+        </InputGroup>
+        <section
+          className="max-h-48 overflow-y-auto"
+          aria-labelledby="archive-preview-title"
+          aria-live="polite"
+          aria-busy={valid && !reviewed && preview.pending}
+        >
+          <h3 id="archive-preview-title" className={`${labelVariants.medium.text} mb-2`}>
+            Preview
+          </h3>
+          {!valid ? (
+            <Paragraph>Enter 1–365 days and valid branch names to see the preview.</Paragraph>
+          ) : reviewed && preview.data?.ok ? (
+            <div className="space-y-2 text-sm text-text-dimmed">
+              <ul className="list-disc space-y-1 pl-4">
+                <li className={preview.data.count > 0 ? "text-amber-400" : undefined}>
+                  {preview.data.partial ? "At least " : ""}
+                  {preview.data.count} {preview.data.count === 1 ? "branch is" : "branches are"}{" "}
+                  ready to archive now.
+                  {preview.data.count > 0 &&
+                    " Saving will make these branches eligible for the next cleanup check."}
+                </li>
+                <li>
+                  {preview.data.partial ? "At least " : ""}
+                  {preview.data.scheduled}{" "}
+                  {preview.data.scheduled === 1 ? "branch will" : "branches will"} archive later if
+                  no new deployments occur.
+                </li>
                 <li>
                   {preview.data.partial ? "At least " : ""}
-                  {preview.data.inProgress}{" "}
-                  {preview.data.inProgress === 1 ? "branch has" : "branches have"} a deployment in
-                  progress and will be skipped.
+                  {preview.data.protectedBranches.length} protected{" "}
+                  {preview.data.protectedBranches.length === 1 ? "branch will" : "branches will"} be
+                  ignored.
                 </li>
+                {preview.data.inProgress > 0 && (
+                  <li>
+                    {preview.data.partial ? "At least " : ""}
+                    {preview.data.inProgress}{" "}
+                    {preview.data.inProgress === 1 ? "branch has" : "branches have"} a deployment in
+                    progress and will be skipped.
+                  </li>
+                )}
+              </ul>
+              {preview.data.protectedBranches.length > 0 && (
+                <p className="break-words">
+                  Protected: {preview.data.protectedBranches.join(", ")}
+                </p>
               )}
-            </ul>
-            {preview.data.protectedBranches.length > 0 && (
-              <p className="break-words">Protected: {preview.data.protectedBranches.join(", ")}</p>
-            )}
-            {preview.data.partial && (
-              <p>Preview limited to the first 1,000 branches. Cleanup checks all branches.</p>
-            )}
-          </div>
-        ) : requestedKey === policyKey && !preview.pending && preview.data && !preview.data.ok ? (
-          <FormError>{preview.data.error}</FormError>
+              {preview.data.partial && (
+                <p>Preview limited to the first 1,000 branches. Cleanup checks all branches.</p>
+              )}
+            </div>
+          ) : requestedKey === policyKey && !preview.pending && preview.data && !preview.data.ok ? (
+            <FormError>{preview.data.error}</FormError>
+          ) : (
+            <Paragraph>Checking branches…</Paragraph>
+          )}
+        </section>
+      </Fieldset>
+      {fetcher.data && !fetcher.data.ok && <FormError>{fetcher.data.error}</FormError>}
+      <DialogFooter>
+        {enabled ? (
+          <Button
+            type="button"
+            variant="secondary/medium"
+            disabled={busy}
+            onClick={disableAutoArchive}
+          >
+            Disable auto-archiving
+          </Button>
         ) : (
-          <Paragraph>Checking branches…</Paragraph>
+          <Button type="button" variant="secondary/medium" disabled={busy} onClick={onSaved}>
+            Cancel
+          </Button>
         )}
-      </section>
-      {fetcher.data && !fetcher.data.ok && <FormError>{fetcher.data.error}</FormError>}
-      <div className="flex justify-end gap-2">
         <Button
           type="submit"
           name="intent"
@@ -375,7 +447,7 @@ function AutoArchiveForm({
         >
           Save settings
         </Button>
-      </div>
+      </DialogFooter>
     </fetcher.Form>
   );
 }

From 3c470765b594454aab50f34a8687fe078db9c90d Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sun, 20 Sep 2026 09:48:51 +0000
Subject: [PATCH 2/8] fix(webapp): make preview branch exclusions opt-in

---
 .../resources.branches.auto-archive.tsx       | 81 +++++++++++--------
 1 file changed, 49 insertions(+), 32 deletions(-)

diff --git a/apps/webapp/app/routes/resources.branches.auto-archive.tsx b/apps/webapp/app/routes/resources.branches.auto-archive.tsx
index ae0ec399b49..b88870722f2 100644
--- a/apps/webapp/app/routes/resources.branches.auto-archive.tsx
+++ b/apps/webapp/app/routes/resources.branches.auto-archive.tsx
@@ -21,6 +21,7 @@ import {
   DialogTrigger,
 } from "~/components/primitives/Dialog";
 import { Input } from "~/components/primitives/Input";
+import { Checkbox } from "~/components/primitives/Checkbox";
 import { Fieldset } from "~/components/primitives/Fieldset";
 import { InputGroup } from "~/components/primitives/InputGroup";
 import { Hint } from "~/components/primitives/Hint";
@@ -210,11 +211,14 @@ function AutoArchiveForm({
   }>({ pending: false });
   const [requestedKey, setRequestedKey] = useState<string | null>(null);
   const [days, setDays] = useState(String(environment.previewAutoArchiveAfterDays ?? 14));
+  const [keepSpecificBranches, setKeepSpecificBranches] = useState(
+    environment.previewAutoArchiveExcludedBranches.length > 0
+  );
   const [excludedRows, setExcludedRows] = useState(() =>
     [...environment.previewAutoArchiveExcludedBranches, ""].map((name, id) => ({ id, name }))
   );
   const nextRowId = useRef(excludedRows.length);
-  const excluded = excludedRows.map(({ name }) => name).join("\n");
+  const excluded = keepSpecificBranches ? excludedRows.map(({ name }) => name).join("\n") : "";
   const enabled = environment.previewAutoArchiveAfterDays !== null;
 
   function updateExcludedBranch(id: number, name: string) {
@@ -331,38 +335,51 @@ function AutoArchiveForm({
           </div>
         </InputGroup>
         <InputGroup fullWidth>
-          <Label htmlFor={`archive-exclusion-${excludedRows[0].id}`} required={false}>
-            Branches to keep
-          </Label>
-          {excludedRows.map((row, index) => (
-            <div key={row.id} className="flex items-center gap-2">
-              <Input
-                id={`archive-exclusion-${row.id}`}
-                aria-label={`Branch to keep ${index + 1}`}
-                aria-describedby="archive-exclusions-description"
-                maxLength={255}
-                placeholder={index === 0 ? "Branch name, e.g. staging" : "Add another branch"}
-                disabled={busy}
-                value={row.name}
-                onChange={(event) => updateExcludedBranch(row.id, event.target.value)}
-              />
-              {(row.name !== "" || index < excludedRows.length - 1) && (
-                <Button
-                  type="button"
-                  variant="secondary/medium"
-                  LeadingIcon={TrashIcon}
-                  aria-label={`Remove branch ${row.name || index + 1}`}
-                  disabled={busy}
-                  onClick={() => removeExcludedBranch(row.id)}
-                />
-              )}
-            </div>
-          ))}
-          <div id="archive-exclusions-description">
-            <Hint>
-              Never auto-archive these branches. Use exact names; wildcards aren’t supported.
-            </Hint>
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id="keep-specific-branches"
+              checked={keepSpecificBranches}
+              disabled={busy}
+              onChange={(event) => setKeepSpecificBranches(event.target.checked)}
+              aria-controls="archive-exclusions"
+            />
+            <Label htmlFor="keep-specific-branches" className="cursor-pointer">
+              Keep specific branches
+            </Label>
           </div>
+          {keepSpecificBranches && (
+            <div id="archive-exclusions" className="grid gap-1.5 pl-6">
+              {excludedRows.map((row, index) => (
+                <div key={row.id} className="flex items-center gap-2">
+                  <Input
+                    id={`archive-exclusion-${row.id}`}
+                    aria-label={`Branch to keep ${index + 1}`}
+                    aria-describedby="archive-exclusions-description"
+                    maxLength={255}
+                    placeholder={index === 0 ? "Branch name, e.g. staging" : "Add another branch"}
+                    disabled={busy}
+                    value={row.name}
+                    onChange={(event) => updateExcludedBranch(row.id, event.target.value)}
+                  />
+                  {(row.name !== "" || index < excludedRows.length - 1) && (
+                    <Button
+                      type="button"
+                      variant="secondary/medium"
+                      LeadingIcon={TrashIcon}
+                      aria-label={`Remove branch ${row.name || index + 1}`}
+                      disabled={busy}
+                      onClick={() => removeExcludedBranch(row.id)}
+                    />
+                  )}
+                </div>
+              ))}
+              <div id="archive-exclusions-description">
+                <Hint>
+                  Never auto-archive these branches. Use exact names; wildcards aren’t supported.
+                </Hint>
+              </div>
+            </div>
+          )}
         </InputGroup>
         <section
           className="max-h-48 overflow-y-auto"

From e9f476c98a8ce678ec36c4dcc17f2fc2e7b8c148 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sun, 20 Sep 2026 09:51:33 +0000
Subject: [PATCH 3/8] fix(webapp): refine auto-archive copy and toolbar spacing

---
 .../route.tsx                                                | 4 ++--
 apps/webapp/app/routes/resources.branches.auto-archive.tsx   | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.branches/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.branches/route.tsx
index baf236d19c7..0399e6c5740 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.branches/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.branches/route.tsx
@@ -306,7 +306,7 @@ export default function Page() {
                   />
                 )}
               </BranchFilters>
-              <div className="flex shrink-0 items-center gap-2">
+              <div className="flex shrink-0 items-center gap-1.5">
                 <PaginationControls
                   currentPage={currentPage}
                   totalPages={totalPages}
@@ -599,7 +599,7 @@ export function BranchFilters({ children }: { children?: ReactNode }) {
   return (
     <div className="flex w-full flex-wrap items-center justify-between gap-2">
       <SearchInput placeholder="Search branch name…" resetParams={["page"]} />
-      <div className="ml-auto flex flex-wrap items-center gap-2">
+      <div className="ml-auto flex flex-wrap items-center gap-1.5">
         <Switch
           checked={showArchived ?? false}
           onCheckedChange={handleArchivedChange}
diff --git a/apps/webapp/app/routes/resources.branches.auto-archive.tsx b/apps/webapp/app/routes/resources.branches.auto-archive.tsx
index b88870722f2..fe161a4d1f8 100644
--- a/apps/webapp/app/routes/resources.branches.auto-archive.tsx
+++ b/apps/webapp/app/routes/resources.branches.auto-archive.tsx
@@ -375,7 +375,8 @@ function AutoArchiveForm({
               ))}
               <div id="archive-exclusions-description">
                 <Hint>
-                  Never auto-archive these branches. Use exact names; wildcards aren’t supported.
+                  Never auto-archive these branches. Enter one exact branch name per field; no
+                  wildcards.
                 </Hint>
               </div>
             </div>
@@ -462,7 +463,7 @@ function AutoArchiveForm({
           variant="primary/medium"
           disabled={busy || !reviewed}
         >
-          Save settings
+          Save
         </Button>
       </DialogFooter>
     </fetcher.Form>

From b3256603ca6088bdfbcdacaeacbced231ebf1b07 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sun, 20 Sep 2026 09:56:01 +0000
Subject: [PATCH 4/8] fix(webapp): align preview and protected branch summaries

---
 .../resources.branches.auto-archive.tsx       | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/apps/webapp/app/routes/resources.branches.auto-archive.tsx b/apps/webapp/app/routes/resources.branches.auto-archive.tsx
index fe161a4d1f8..c6964bd1066 100644
--- a/apps/webapp/app/routes/resources.branches.auto-archive.tsx
+++ b/apps/webapp/app/routes/resources.branches.auto-archive.tsx
@@ -394,7 +394,7 @@ function AutoArchiveForm({
           {!valid ? (
             <Paragraph>Enter 1–365 days and valid branch names to see the preview.</Paragraph>
           ) : reviewed && preview.data?.ok ? (
-            <div className="space-y-2 text-sm text-text-dimmed">
+            <div className="space-y-2 text-sm tabular-nums text-text-dimmed">
               <ul className="list-disc space-y-1 pl-4">
                 <li className={preview.data.count > 0 ? "text-amber-400" : undefined}>
                   {preview.data.partial ? "At least " : ""}
@@ -424,11 +424,6 @@ function AutoArchiveForm({
                   </li>
                 )}
               </ul>
-              {preview.data.protectedBranches.length > 0 && (
-                <p className="break-words">
-                  Protected: {preview.data.protectedBranches.join(", ")}
-                </p>
-              )}
               {preview.data.partial && (
                 <p>Preview limited to the first 1,000 branches. Cleanup checks all branches.</p>
               )}
@@ -439,6 +434,20 @@ function AutoArchiveForm({
             <Paragraph>Checking branches…</Paragraph>
           )}
         </section>
+        {reviewed && preview.data?.ok && preview.data.protectedBranches.length > 0 && (
+          <section className="max-h-48 overflow-y-auto" aria-labelledby="protected-branches-title">
+            <h3 id="protected-branches-title" className={`${labelVariants.medium.text} mb-2`}>
+              Protected branches
+            </h3>
+            <ul className="list-disc space-y-1 pl-4 text-sm text-text-dimmed">
+              {preview.data.protectedBranches.map((branch) => (
+                <li key={branch} className="break-words">
+                  {branch}
+                </li>
+              ))}
+            </ul>
+          </section>
+        )}
       </Fieldset>
       {fetcher.data && !fetcher.data.ok && <FormError>{fetcher.data.error}</FormError>}
       <DialogFooter>

From 53e6d94f3aff9f53cadf37d085c3e66878989cdd Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sun, 20 Sep 2026 09:58:26 +0000
Subject: [PATCH 5/8] fix(webapp): show protected branch loading spinner

---
 .../resources.branches.auto-archive.tsx       | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/apps/webapp/app/routes/resources.branches.auto-archive.tsx b/apps/webapp/app/routes/resources.branches.auto-archive.tsx
index c6964bd1066..1adce8c9c46 100644
--- a/apps/webapp/app/routes/resources.branches.auto-archive.tsx
+++ b/apps/webapp/app/routes/resources.branches.auto-archive.tsx
@@ -29,6 +29,7 @@ import { Label, labelVariants } from "~/components/primitives/Label";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { FormError } from "~/components/primitives/FormError";
 import { Switch } from "~/components/primitives/Switch";
+import { Spinner } from "~/components/primitives/Spinner";
 import { readBoundedBodyText } from "~/utils/boundedRequestBody.server";
 
 import { trail } from "agentcrumbs"; // @crumbs
@@ -262,6 +263,9 @@ function AutoArchiveForm({
   const valid = PreviewAutoArchivePolicy.safeParse(JSON.parse(policyKey)).success;
   const reviewed =
     valid && !preview.pending && preview.data?.ok && preview.data.policyKey === policyKey;
+  const checkingProtectedBranches =
+    valid && !reviewed && excluded.trim() !== "" && (preview.pending || requestedKey !== policyKey);
+  const protectedBranches = reviewed && preview.data?.ok ? preview.data.protectedBranches : [];
   const busy = fetcher.state !== "idle";
   useEffect(() => {
     if (!valid || busy) return;
@@ -434,18 +438,25 @@ function AutoArchiveForm({
             <Paragraph>Checking branches…</Paragraph>
           )}
         </section>
-        {reviewed && preview.data?.ok && preview.data.protectedBranches.length > 0 && (
-          <section className="max-h-48 overflow-y-auto" aria-labelledby="protected-branches-title">
+        {(checkingProtectedBranches || protectedBranches.length > 0) && (
+          <section
+            className="max-h-48 overflow-y-auto"
+            aria-labelledby="protected-branches-title"
+            aria-busy={checkingProtectedBranches}
+          >
             <h3 id="protected-branches-title" className={`${labelVariants.medium.text} mb-2`}>
               Protected branches
+              {checkingProtectedBranches && <Spinner color="blue" className="ml-1 size-3" />}
             </h3>
-            <ul className="list-disc space-y-1 pl-4 text-sm text-text-dimmed">
-              {preview.data.protectedBranches.map((branch) => (
-                <li key={branch} className="break-words">
-                  {branch}
-                </li>
-              ))}
-            </ul>
+            {!checkingProtectedBranches && (
+              <ul className="list-disc space-y-1 pl-4 text-sm text-text-dimmed">
+                {protectedBranches.map((branch) => (
+                  <li key={branch} className="break-words">
+                    {branch}
+                  </li>
+                ))}
+              </ul>
+            )}
           </section>
         )}
       </Fieldset>

From 1b4b419df9fc9738dfe78ac3e56e38f67c67d436 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sun, 20 Sep 2026 10:05:08 +0000
Subject: [PATCH 6/8] fix(webapp): animate auto-archive preview and branch
 fields

---
 .../resources.branches.auto-archive.tsx       | 251 ++++++++++--------
 1 file changed, 142 insertions(+), 109 deletions(-)

diff --git a/apps/webapp/app/routes/resources.branches.auto-archive.tsx b/apps/webapp/app/routes/resources.branches.auto-archive.tsx
index 1adce8c9c46..cd00caf139d 100644
--- a/apps/webapp/app/routes/resources.branches.auto-archive.tsx
+++ b/apps/webapp/app/routes/resources.branches.auto-archive.tsx
@@ -1,6 +1,8 @@
 import { type ActionFunctionArgs, type SerializeFrom, json } from "@remix-run/server-runtime";
 import { useFetcher } from "@remix-run/react";
-import { useEffect, useRef, useState } from "react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
+import { motion, useReducedMotion } from "framer-motion";
+import { useMeasure } from "react-use";
 import { Cog6ToothIcon, TrashIcon } from "@heroicons/react/20/solid";
 import { prisma } from "~/db.server";
 import { requireUserId } from "~/services/session.server";
@@ -263,9 +265,13 @@ function AutoArchiveForm({
   const valid = PreviewAutoArchivePolicy.safeParse(JSON.parse(policyKey)).success;
   const reviewed =
     valid && !preview.pending && preview.data?.ok && preview.data.policyKey === policyKey;
-  const checkingProtectedBranches =
-    valid && !reviewed && excluded.trim() !== "" && (preview.pending || requestedKey !== policyKey);
-  const protectedBranches = reviewed && preview.data?.ok ? preview.data.protectedBranches : [];
+  const previewError =
+    requestedKey === policyKey && !preview.pending && preview.data && !preview.data.ok
+      ? preview.data.error
+      : undefined;
+  const checkingPreview = valid && !reviewed && !previewError;
+  const protectedBranches =
+    valid && !previewError && preview.data?.ok ? preview.data.protectedBranches : [];
   const busy = fetcher.state !== "idle";
   useEffect(() => {
     if (!valid || busy) return;
@@ -273,7 +279,8 @@ function AutoArchiveForm({
     const timer = setTimeout(async () => {
       const policy = JSON.parse(policyKey) as { days: number; excludedBranches: string[] };
       setRequestedKey(policyKey);
-      setPreview({ pending: true });
+      // Keep the previous results and their height while refreshing the preview.
+      setPreview((previous) => ({ ...previous, pending: true }));
       try {
         // A read-only POST avoids URL-size limits for exclusions and Remix's
         // page-wide action revalidation while the user edits the form.
@@ -351,114 +358,122 @@ function AutoArchiveForm({
               Keep specific branches
             </Label>
           </div>
-          {keepSpecificBranches && (
-            <div id="archive-exclusions" className="grid gap-1.5 pl-6">
-              {excludedRows.map((row, index) => (
-                <div key={row.id} className="flex items-center gap-2">
-                  <Input
-                    id={`archive-exclusion-${row.id}`}
-                    aria-label={`Branch to keep ${index + 1}`}
-                    aria-describedby="archive-exclusions-description"
-                    maxLength={255}
-                    placeholder={index === 0 ? "Branch name, e.g. staging" : "Add another branch"}
-                    disabled={busy}
-                    value={row.name}
-                    onChange={(event) => updateExcludedBranch(row.id, event.target.value)}
-                  />
-                  {(row.name !== "" || index < excludedRows.length - 1) && (
-                    <Button
-                      type="button"
-                      variant="secondary/medium"
-                      LeadingIcon={TrashIcon}
-                      aria-label={`Remove branch ${row.name || index + 1}`}
-                      disabled={busy}
-                      onClick={() => removeExcludedBranch(row.id)}
-                    />
-                  )}
+          <AnimatedHeight>
+            <div id="archive-exclusions">
+              {keepSpecificBranches && (
+                <div className="grid gap-1.5 pl-6">
+                  {excludedRows.map((row, index) => (
+                    <div key={row.id} className="flex items-center gap-2">
+                      <Input
+                        id={`archive-exclusion-${row.id}`}
+                        aria-label={`Branch to keep ${index + 1}`}
+                        aria-describedby="archive-exclusions-description"
+                        maxLength={255}
+                        placeholder={
+                          index === 0 ? "Branch name, e.g. staging" : "Add another branch"
+                        }
+                        disabled={busy}
+                        value={row.name}
+                        onChange={(event) => updateExcludedBranch(row.id, event.target.value)}
+                      />
+                      {(row.name !== "" || index < excludedRows.length - 1) && (
+                        <Button
+                          type="button"
+                          variant="secondary/medium"
+                          LeadingIcon={TrashIcon}
+                          aria-label={`Remove branch ${row.name || index + 1}`}
+                          disabled={busy}
+                          onClick={() => removeExcludedBranch(row.id)}
+                        />
+                      )}
+                    </div>
+                  ))}
+                  <div id="archive-exclusions-description">
+                    <Hint>
+                      Never auto-archive these branches. Enter one exact branch name per field; no
+                      wildcards.
+                    </Hint>
+                  </div>
                 </div>
-              ))}
-              <div id="archive-exclusions-description">
-                <Hint>
-                  Never auto-archive these branches. Enter one exact branch name per field; no
-                  wildcards.
-                </Hint>
-              </div>
-            </div>
-          )}
-        </InputGroup>
-        <section
-          className="max-h-48 overflow-y-auto"
-          aria-labelledby="archive-preview-title"
-          aria-live="polite"
-          aria-busy={valid && !reviewed && preview.pending}
-        >
-          <h3 id="archive-preview-title" className={`${labelVariants.medium.text} mb-2`}>
-            Preview
-          </h3>
-          {!valid ? (
-            <Paragraph>Enter 1–365 days and valid branch names to see the preview.</Paragraph>
-          ) : reviewed && preview.data?.ok ? (
-            <div className="space-y-2 text-sm tabular-nums text-text-dimmed">
-              <ul className="list-disc space-y-1 pl-4">
-                <li className={preview.data.count > 0 ? "text-amber-400" : undefined}>
-                  {preview.data.partial ? "At least " : ""}
-                  {preview.data.count} {preview.data.count === 1 ? "branch is" : "branches are"}{" "}
-                  ready to archive now.
-                  {preview.data.count > 0 &&
-                    " Saving will make these branches eligible for the next cleanup check."}
-                </li>
-                <li>
-                  {preview.data.partial ? "At least " : ""}
-                  {preview.data.scheduled}{" "}
-                  {preview.data.scheduled === 1 ? "branch will" : "branches will"} archive later if
-                  no new deployments occur.
-                </li>
-                <li>
-                  {preview.data.partial ? "At least " : ""}
-                  {preview.data.protectedBranches.length} protected{" "}
-                  {preview.data.protectedBranches.length === 1 ? "branch will" : "branches will"} be
-                  ignored.
-                </li>
-                {preview.data.inProgress > 0 && (
-                  <li>
-                    {preview.data.partial ? "At least " : ""}
-                    {preview.data.inProgress}{" "}
-                    {preview.data.inProgress === 1 ? "branch has" : "branches have"} a deployment in
-                    progress and will be skipped.
-                  </li>
-                )}
-              </ul>
-              {preview.data.partial && (
-                <p>Preview limited to the first 1,000 branches. Cleanup checks all branches.</p>
               )}
             </div>
-          ) : requestedKey === policyKey && !preview.pending && preview.data && !preview.data.ok ? (
-            <FormError>{preview.data.error}</FormError>
-          ) : (
-            <Paragraph>Checking branches…</Paragraph>
-          )}
-        </section>
-        {(checkingProtectedBranches || protectedBranches.length > 0) && (
-          <section
-            className="max-h-48 overflow-y-auto"
-            aria-labelledby="protected-branches-title"
-            aria-busy={checkingProtectedBranches}
-          >
-            <h3 id="protected-branches-title" className={`${labelVariants.medium.text} mb-2`}>
-              Protected branches
-              {checkingProtectedBranches && <Spinner color="blue" className="ml-1 size-3" />}
-            </h3>
-            {!checkingProtectedBranches && (
-              <ul className="list-disc space-y-1 pl-4 text-sm text-text-dimmed">
-                {protectedBranches.map((branch) => (
-                  <li key={branch} className="break-words">
-                    {branch}
-                  </li>
-                ))}
-              </ul>
+          </AnimatedHeight>
+        </InputGroup>
+        <AnimatedHeight>
+          <div className="flex flex-col gap-5">
+            <section
+              className="max-h-48 overflow-y-auto"
+              aria-labelledby="archive-preview-title"
+              aria-live="polite"
+              aria-busy={checkingPreview}
+            >
+              <h3 id="archive-preview-title" className={`${labelVariants.medium.text} mb-2`}>
+                Preview
+                {checkingPreview && <Spinner color="blue" className="ml-1 size-3" />}
+              </h3>
+              {!valid ? (
+                <Paragraph>Enter 1–365 days and valid branch names to see the preview.</Paragraph>
+              ) : previewError ? (
+                <FormError>{previewError}</FormError>
+              ) : preview.data?.ok ? (
+                <div className="space-y-2 text-sm tabular-nums text-text-dimmed">
+                  <ul className="list-disc space-y-1 pl-4">
+                    <li className={preview.data.count > 0 ? "text-amber-400" : undefined}>
+                      {preview.data.partial ? "At least " : ""}
+                      {preview.data.count} {preview.data.count === 1 ? "branch is" : "branches are"}{" "}
+                      ready to archive now.
+                      {preview.data.count > 0 &&
+                        " Saving will make these branches eligible for the next cleanup check."}
+                    </li>
+                    <li>
+                      {preview.data.partial ? "At least " : ""}
+                      {preview.data.scheduled}{" "}
+                      {preview.data.scheduled === 1 ? "branch will" : "branches will"} archive later
+                      if no new deployments occur.
+                    </li>
+                    <li>
+                      {preview.data.partial ? "At least " : ""}
+                      {preview.data.protectedBranches.length} protected{" "}
+                      {preview.data.protectedBranches.length === 1
+                        ? "branch will"
+                        : "branches will"}{" "}
+                      be ignored.
+                    </li>
+                    {preview.data.inProgress > 0 && (
+                      <li>
+                        {preview.data.partial ? "At least " : ""}
+                        {preview.data.inProgress}{" "}
+                        {preview.data.inProgress === 1 ? "branch has" : "branches have"} a
+                        deployment in progress and will be skipped.
+                      </li>
+                    )}
+                  </ul>
+                  {preview.data.partial && (
+                    <p>Preview limited to the first 1,000 branches. Cleanup checks all branches.</p>
+                  )}
+                </div>
+              ) : null}
+            </section>
+            {protectedBranches.length > 0 && (
+              <section
+                className="max-h-48 overflow-y-auto"
+                aria-labelledby="protected-branches-title"
+                aria-busy={checkingPreview}
+              >
+                <h3 id="protected-branches-title" className={`${labelVariants.medium.text} mb-2`}>
+                  Protected branches
+                </h3>
+                <ul className="list-disc space-y-1 pl-4 text-sm text-text-dimmed">
+                  {protectedBranches.map((branch) => (
+                    <li key={branch} className="break-words">
+                      {branch}
+                    </li>
+                  ))}
+                </ul>
+              </section>
             )}
-          </section>
-        )}
+          </div>
+        </AnimatedHeight>
       </Fieldset>
       {fetcher.data && !fetcher.data.ok && <FormError>{fetcher.data.error}</FormError>}
       <DialogFooter>
@@ -489,3 +504,21 @@ function AutoArchiveForm({
     </fetcher.Form>
   );
 }
+
+function AnimatedHeight({ children }: { children: ReactNode }) {
+  const [contentRef, { height, width }] = useMeasure<HTMLDivElement>();
+  const reduceMotion = useReducedMotion();
+
+  return (
+    <motion.div
+      initial={false}
+      animate={{ height: width > 0 ? height : "auto" }}
+      transition={{ duration: reduceMotion ? 0 : 0.2, ease: "easeInOut" }}
+      className="overflow-hidden"
+    >
+      <div ref={contentRef} className="flow-root">
+        {children}
+      </div>
+    </motion.div>
+  );
+}

From 1201dd9ed2faa1ec5f9976d67801049dac55ea13 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sun, 20 Sep 2026 10:07:07 +0000
Subject: [PATCH 7/8] chore: remove preview branch UI release note

---
 .server-changes/preview-auto-archive-settings-ui.md | 6 ------
 1 file changed, 6 deletions(-)
 delete mode 100644 .server-changes/preview-auto-archive-settings-ui.md

diff --git a/.server-changes/preview-auto-archive-settings-ui.md b/.server-changes/preview-auto-archive-settings-ui.md
deleted file mode 100644
index 3c69a43040e..00000000000
--- a/.server-changes/preview-auto-archive-settings-ui.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-area: webapp
-type: improvement
----
-
-Simplify preview branch auto-archive settings with clearer descriptions, individual fields for branches to keep, and an option to disable auto-archiving in the settings dialog.

From 28aaf1c561d1eafeafed18167d4b49728e63f24c Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sun, 20 Sep 2026 10:10:35 +0000
Subject: [PATCH 8/8] fix(webapp): retain branch purchasing for empty projects

---
 .../route.tsx                                         | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.branches/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.branches/route.tsx
index 0399e6c5740..a3648bcbfbc 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.branches/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.branches/route.tsx
@@ -287,6 +287,17 @@ export default function Page() {
               Branches docs
             </LinkButton>
           </WhenAgentUnavailable>
+          {!hasBranches && limits.isAtLimit && (
+            <UpgradePanel
+              limits={limits}
+              canUpgrade={canUpgrade ?? false}
+              canPurchaseBranches={canPurchaseBranches}
+              branchPricing={branchPricing}
+              extraBranches={extraBranches}
+              maxBranchQuota={maxBranchQuota}
+              planBranchLimit={planBranchLimit}
+            />
+          )}
         </PageAccessories>
       </NavBar>
       <PageBody scrollable={false}>