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..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,8 +287,7 @@ export default function Page() {
               Branches docs
             </LinkButton>
           </WhenAgentUnavailable>
-
-          {limits.isAtLimit ? (
+          {!hasBranches && limits.isAtLimit && (
             <UpgradePanel
               limits={limits}
               canUpgrade={canUpgrade ?? false}
@@ -298,46 +297,68 @@ export default function Page() {
               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-1.5">
+                <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
@@ -589,7 +610,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 d44bc623e15..cd00caf139d 100644
--- a/apps/webapp/app/routes/resources.branches.auto-archive.tsx
+++ b/apps/webapp/app/routes/resources.branches.auto-archive.tsx
@@ -1,7 +1,9 @@
 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 { 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";
 import { rbac } from "~/services/rbac.server";
@@ -12,15 +14,29 @@ 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 { Checkbox } from "~/components/primitives/Checkbox";
+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 { Spinner } from "~/components/primitives/Spinner";
 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 +62,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 +153,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 +214,43 @@ 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 [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 = keepSpecificBranches ? 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: [
@@ -233,6 +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 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;
@@ -240,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.
@@ -283,89 +323,174 @@ 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 && (
-                <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>
+      <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>
+          <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>
+          <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>
               )}
-            </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>
+          </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>
             )}
           </div>
-        ) : requestedKey === policyKey && !preview.pending && preview.data && !preview.data.ok ? (
-          <FormError>{preview.data.error}</FormError>
+        </AnimatedHeight>
+      </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"
@@ -373,9 +498,27 @@ function AutoArchiveForm({
           variant="primary/medium"
           disabled={busy || !reviewed}
         >
-          Save settings
+          Save
         </Button>
-      </div>
+      </DialogFooter>
     </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>
+  );
+}