From 85da5ddee15ac0349ea422917694c6c8a866ed24 Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Wed, 20 May 2026 21:37:26 -0700
Subject: [PATCH] Fix: stay in select mode when deselecting agents, stagger
 toggle animation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove auto-exit from select mode when selectedKeys empties — only
  Cancel button exits select mode now.
- Stagger team Toggle animations: first chip fades in immediately,
  subsequent chips delay by index * 50ms for a fan-out effect.
---
 .../channels/ui/QuickAddAgentPopover.tsx      | 43 +++++++++++--------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/desktop/src/features/channels/ui/QuickAddAgentPopover.tsx b/desktop/src/features/channels/ui/QuickAddAgentPopover.tsx
index 2fc08b0031..f763a958c1 100644
--- a/desktop/src/features/channels/ui/QuickAddAgentPopover.tsx
+++ b/desktop/src/features/channels/ui/QuickAddAgentPopover.tsx
@@ -311,9 +311,6 @@ export function QuickAddAgentPopover({
       } else {
         next.add(key);
       }
-      if (next.size === 0) {
-        setSelectMode(false);
-      }
       return next;
     });
   }
@@ -501,24 +498,34 @@ export function QuickAddAgentPopover({
                 <motion.div
                   key="team-chips"
                   className="flex flex-1 items-center gap-1.5 overflow-x-auto py-1.5"
-                  initial={{ opacity: 0, x: 20 }}
-                  animate={{ opacity: 1, x: 0 }}
-                  exit={{ opacity: 0, x: 20 }}
-                  transition={{ duration: 0.2 }}
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  transition={{ duration: 0.15 }}
                 >
-                  {usableTeams.map((team) => (
-                    <Toggle
-                      className="h-6 shrink-0 rounded-full px-2.5 text-[11px]"
+                  {usableTeams.map((team, index) => (
+                    <motion.div
                       key={team.id}
-                      onPressedChange={(pressed) =>
-                        handleTeamToggle(team, pressed)
-                      }
-                      pressed={selectedTeamIds.has(team.id)}
-                      size="sm"
-                      variant="outline"
+                      initial={{ opacity: 0, x: 12 }}
+                      animate={{ opacity: 1, x: 0 }}
+                      transition={{
+                        duration: 0.2,
+                        delay: index * 0.05,
+                      }}
+                      className="shrink-0"
                     >
-                      {team.name}
-                    </Toggle>
+                      <Toggle
+                        className="h-6 rounded-full px-2.5 text-[11px]"
+                        onPressedChange={(pressed) =>
+                          handleTeamToggle(team, pressed)
+                        }
+                        pressed={selectedTeamIds.has(team.id)}
+                        size="sm"
+                        variant="outline"
+                      >
+                        {team.name}
+                      </Toggle>
+                    </motion.div>
                   ))}
                 </motion.div>
               ) : (