diff --git a/.github/pr-assets/composer-add-menu-closed.png b/.github/pr-assets/composer-add-menu-closed.png
new file mode 100644
index 000000000..afff5910f
Binary files /dev/null and b/.github/pr-assets/composer-add-menu-closed.png differ
diff --git a/.github/pr-assets/composer-add-menu-open.png b/.github/pr-assets/composer-add-menu-open.png
new file mode 100644
index 000000000..8feb909b1
Binary files /dev/null and b/.github/pr-assets/composer-add-menu-open.png differ
diff --git a/crates/agent-gateway/web/src/index.css b/crates/agent-gateway/web/src/index.css
index 71ef56fdf..eb8d0e918 100644
--- a/crates/agent-gateway/web/src/index.css
+++ b/crates/agent-gateway/web/src/index.css
@@ -88,12 +88,41 @@
       inset 0 0 0 1px rgba(167, 139, 250, 0.12);
   }
 
+  .composer-add-dropdown,
+  .composer-branch-dropdown,
+  .composer-safety-dropdown {
+    transform-origin: var(--transform-origin, bottom left);
+    transition:
+      opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
+      transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  .composer-add-dropdown[data-starting-style],
+  .composer-add-dropdown[data-ending-style],
+  .composer-branch-dropdown[data-starting-style],
+  .composer-branch-dropdown[data-ending-style],
+  .composer-safety-dropdown[data-starting-style],
+  .composer-safety-dropdown[data-ending-style] {
+    opacity: 0;
+    transform: translateY(6px) scale(0.97);
+  }
+
+  .composer-add-dropdown[data-ending-style],
+  .composer-branch-dropdown[data-ending-style],
+  .composer-safety-dropdown[data-ending-style] {
+    transition-duration: 0.12s;
+    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+    transform: translateY(5px) scale(0.975);
+  }
+
+  .composer-add-dropdown[data-state="open"],
   .composer-branch-dropdown[data-state="open"],
   .composer-safety-dropdown[data-state="open"] {
     animation: composerReasoningDropdownIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
     transform-origin: var(--transform-origin, bottom left);
   }
 
+  .composer-add-dropdown[data-state="closed"],
   .composer-branch-dropdown[data-state="closed"],
   .composer-safety-dropdown[data-state="closed"] {
     animation: composerReasoningDropdownOut 0.12s cubic-bezier(0.4, 0, 1, 1) forwards;
@@ -101,10 +130,12 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
+    .composer-add-dropdown,
     .composer-branch-dropdown,
     .composer-safety-dropdown {
       /* biome-ignore lint/complexity/noImportantStyles: Reduced-motion overrides dropdown open/close animations. */
       animation: none !important;
+      transition: none !important;
     }
 
     .composer-reasoning-trigger,
diff --git a/crates/agent-gui/src/index.css b/crates/agent-gui/src/index.css
index e01eaf3bd..c8c4c643f 100644
--- a/crates/agent-gui/src/index.css
+++ b/crates/agent-gui/src/index.css
@@ -180,8 +180,8 @@
       scale(0.98);
   }
 
-  /* Composer reasoning select / branch selector animations.
-   * Base UI drives both popups, so open styling keys off data-popup-open on
+  /* Composer reasoning select / add menu / branch selector animations.
+   * Base UI drives these popups, so open styling keys off data-popup-open on
    * the trigger and enter/exit key off data-starting-style / data-ending-style
    * on the popup (data-state rules never match Base UI). */
   .composer-reasoning-trigger[data-popup-open] {
@@ -190,6 +190,7 @@
       inset 0 0 0 1px rgba(167, 139, 250, 0.12);
   }
 
+  .composer-add-dropdown,
   .composer-branch-dropdown,
   .composer-safety-dropdown {
     transform-origin: var(--transform-origin);
@@ -198,6 +199,8 @@
       transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
   }
 
+  .composer-add-dropdown[data-starting-style],
+  .composer-add-dropdown[data-ending-style],
   .composer-branch-dropdown[data-starting-style],
   .composer-branch-dropdown[data-ending-style],
   .composer-safety-dropdown[data-starting-style],
@@ -206,6 +209,7 @@
     transform: translateY(6px) scale(0.97);
   }
 
+  .composer-add-dropdown[data-ending-style],
   .composer-branch-dropdown[data-ending-style],
   .composer-safety-dropdown[data-ending-style] {
     transition-duration: 0.12s;
@@ -216,6 +220,7 @@
   @media (prefers-reduced-motion: reduce) {
     .composer-reasoning-trigger,
     .composer-reasoning-trigger svg:last-child,
+    .composer-add-dropdown,
     .composer-branch-dropdown,
     .composer-safety-dropdown {
       /* biome-ignore lint/complexity/noImportantStyles: Reduced-motion must override component open/close transition states. */