feat: quick-add agent popover with two entry points

desktop/scripts/check-file-sizes.mjs

@@ -34,7 +34,7 @@ const overrides = new Map([
   ["src-tauri/src/managed_agents/teams.rs", 580], // built-in team registry (Kit & Scout) + merge_teams + validate_team_deletion + JSON export/import + tests
   ["src-tauri/src/managed_agents/persona_card.rs", 970], // PNG/ZIP/MD persona card codec + pack-zip detection + nested root finder + provider/model/namePool fields + 27 unit tests
   ["src/app/AppShell.tsx", 815], // message edit state + handlers + ChannelPane edit prop threading + scrollback pagination + workflows view + projects view + memory-leak safeguards + home-badge state lifted here so it consumes the same NIP-RS read-state as the sidebar (single ReadStateManager)
-  ["src/features/channels/hooks.ts", 550], // canvas query + mutation hooks + DM hide mutation
+  ["src/features/channels/hooks.ts", 560], // canvas query + mutation hooks + DM hide mutation + optimistic remove
   ["src/features/channels/ui/ChannelManagementSheet.tsx", 800],
   ["src/features/channels/ui/ChannelPane.tsx", 520], // composer/timeline/sidebar orchestration + anchored agent activity footers
   ["src/features/channels/ui/ChannelScreen.tsx", 550], // profile panel state + mutual exclusion wiring + ProfilePanelProvider context + agent typing classification
@@ -55,7 +55,7 @@ const overrides = new Map([
   ["src-tauri/src/managed_agents/types.rs", 715], // ManagedAgentRecord/Summary + Create/Update request structs + RespondTo enum + validate_respond_to_allowlist + tests + persona/agent env_vars field
   ["src-tauri/src/managed_agents/backend.rs", 700], // provider IPC, validation, discovery, binary resolution + tests + redact_secrets_with for user env values + env_secrets_from_request + redact_env_values_in (shared with model discovery)
   ["src/features/huddle/HuddleContext.tsx", 650], // huddle lifecycle context + joinHuddle + connectAndSetupMedia shared helper + activeSpeakers/isReconnecting state + PTT (reusable AudioContext) + TTS subscription + mic level analyser (10fps throttle) + agent pubkey refresh
-  ["src/features/agents/hooks.ts", 540], // agent query/mutation surface now includes built-in persona library activation + useUpdateManagedAgentMutation
+  ["src/features/agents/hooks.ts", 610], // agent query/mutation surface + optimistic member updates + reuse-guard context fetch
   ["src/features/agents/ui/AgentsView.tsx", 880], // remote agent lifecycle controls + persona/team management + persona import-update dialog wiring + built-in catalog/library state orchestration
   ["src/features/agents/ui/UnifiedAgentsSection.tsx", 570], // unified persona-grouped agent view with collapsible groups, bulk actions, drag-drop import, empty/loading states
   ["src/features/agents/ui/ManagedAgentRow.tsx", 530], // EditAgentDialog integration + provider/local branching

desktop/src/features/agents/hooks.ts

@@ -13,6 +13,7 @@ import {
   discoverAcpProviders,
   discoverBackendProviders,
   discoverManagedAgentPrereqs,
+  getChannelMembers,
   getManagedAgentLog,
   listManagedAgents,
   listRelayAgents,
@@ -38,6 +39,7 @@ import {
 import type {
   AgentPersona,
   AgentTeam,
+  ChannelMember,
   CreateManagedAgentInput,
   CreatePersonaInput,
   CreateTeamInput,
@@ -46,6 +48,7 @@ import type {
   UpdatePersonaInput,
   UpdateTeamInput,
 } from "@/shared/api/types";
+import { normalizePubkey } from "@/shared/lib/pubkey";
 import type {
   AttachManagedAgentToChannelInput,
   AttachManagedAgentToChannelResult,
@@ -356,6 +359,29 @@ export function useAttachManagedAgentToChannelMutation(
 
       return attachManagedAgentToChannel(channelId, input);
     },
+    onMutate: async (input) => {
+      if (!channelId) return;
+      const membersKey = ["channels", channelId, "members"];
+      await queryClient.cancelQueries({ queryKey: membersKey });
+      const previous =
+        queryClient.getQueryData<ChannelMember[]>(membersKey) ?? [];
+      const optimistic: ChannelMember = {
+        pubkey: normalizePubkey(input.agent.pubkey),
+        role: input.role ?? "bot",
+        joinedAt: new Date().toISOString(),
+        displayName: input.agent.name,
+      };
+      queryClient.setQueryData<ChannelMember[]>(membersKey, [
+        ...previous,
+        optimistic,
+      ]);
+      return { previous, membersKey };
+    },
+    onError: (_err, _vars, context) => {
+      if (context?.membersKey) {
+        queryClient.setQueryData(context.membersKey, context.previous);
+      }
+    },
     onSettled: async () => {
       await invalidateAgentQueries(queryClient, channelId);
     },
@@ -392,7 +418,39 @@ export function useCreateChannelManagedAgentMutation(channelId: string | null) {
         throw new Error("No channel selected.");
       }
 
-      return createChannelManagedAgent(channelId, input);
+      const [managedAgents, members] = await Promise.all([
+        listManagedAgents(),
+        getChannelMembers(channelId),
+      ]);
+      const channelMemberPubkeys = new Set(
+        members.map((m) => normalizePubkey(m.pubkey)),
+      );
+
+      return createChannelManagedAgent(channelId, input, {
+        managedAgents,
+        channelMemberPubkeys,
+      });
+    },
+    onSuccess: (result) => {
+      if (!channelId) return;
+      const membersKey = ["channels", channelId, "members"];
+      const current =
+        queryClient.getQueryData<ChannelMember[]>(membersKey) ?? [];
+      const alreadyPresent = current.some(
+        (m) =>
+          normalizePubkey(m.pubkey) === normalizePubkey(result.agent.pubkey),
+      );
+      if (!alreadyPresent) {
+        queryClient.setQueryData<ChannelMember[]>(membersKey, [
+          ...current,
+          {
+            pubkey: normalizePubkey(result.agent.pubkey),
+            role: "bot",
+            joinedAt: new Date().toISOString(),
+            displayName: result.agent.name,
+          },
+        ]);
+      }
     },
     onSettled: async () => {
       await invalidateAgentQueries(queryClient, channelId);
@@ -415,6 +473,29 @@ export function useCreateChannelManagedAgentsMutation(
 
       return createChannelManagedAgents(channelId, inputs);
     },
+    onSuccess: (result) => {
+      if (!channelId) return;
+      const membersKey = ["channels", channelId, "members"];
+      const current =
+        queryClient.getQueryData<ChannelMember[]>(membersKey) ?? [];
+      const existingPubkeys = new Set(
+        current.map((m) => normalizePubkey(m.pubkey)),
+      );
+      const newMembers: ChannelMember[] = result.successes
+        .filter((s) => !existingPubkeys.has(normalizePubkey(s.agent.pubkey)))
+        .map((s) => ({
+          pubkey: normalizePubkey(s.agent.pubkey),
+          role: "bot" as const,
+          joinedAt: new Date().toISOString(),
+          displayName: s.agent.name,
+        }));
+      if (newMembers.length > 0) {
+        queryClient.setQueryData<ChannelMember[]>(membersKey, [
+          ...current,
+          ...newMembers,
+        ]);
+      }
+    },
     onSettled: async () => {
       await invalidateAgentQueries(queryClient, channelId);
     },

desktop/src/features/agents/lib/sortProviders.ts

@@ -0,0 +1,18 @@
+import type { AcpProvider } from "@/shared/api/types";
+
+/**
+ * Sort ACP providers with "goose" first, then alphabetically by label.
+ * Used by any surface that presents a provider list to the user.
+ */
+export function sortProviders(
+  providers: readonly AcpProvider[],
+): AcpProvider[] {
+  return [...providers].sort((left, right) => {
+    const leftPriority = left.id === "goose" ? 0 : 1;
+    const rightPriority = right.id === "goose" ? 0 : 1;
+    if (leftPriority !== rightPriority) {
+      return leftPriority - rightPriority;
+    }
+    return left.label.localeCompare(right.label);
+  });
+}

desktop/src/features/channels/hooks.ts

@@ -29,12 +29,14 @@ import type {
   AddChannelMembersInput,
   Channel,
   ChannelDetail,
+  ChannelMember,
   CreateChannelInput,
   OpenDmInput,
   SetChannelPurposeInput,
   SetChannelTopicInput,
   UpdateChannelInput,
 } from "@/shared/api/types";
+import { normalizePubkey } from "@/shared/lib/pubkey";
 
 export const channelsQueryKey = ["channels"] as const;
 const channelDetailQueryKey = (channelId: string) =>
@@ -410,6 +412,25 @@ export function useRemoveChannelMemberMutation(channelId: string | null) {
 
       await removeChannelMemberWithManagedAgentCleanup(channelId, pubkey);
     },
+    onMutate: async (pubkey) => {
+      if (!channelId) return;
+      const membersKey = channelMembersQueryKey(channelId);
+      await queryClient.cancelQueries({ queryKey: membersKey });
+      const previous =
+        queryClient.getQueryData<ChannelMember[]>(membersKey) ?? [];
+      queryClient.setQueryData<ChannelMember[]>(
+        membersKey,
+        previous.filter(
+          (m) => normalizePubkey(m.pubkey) !== normalizePubkey(pubkey),
+        ),
+      );
+      return { previous, membersKey };
+    },
+    onError: (_err, _vars, context) => {
+      if (context?.membersKey) {
+        queryClient.setQueryData(context.membersKey, context.previous);
+      }
+    },
     onSettled: async () => {
       await Promise.all([
         invalidateChannelState(queryClient, channelId),

desktop/src/features/channels/ui/AddChannelBotDialog.tsx

@@ -477,7 +477,7 @@ export function AddChannelBotDialog({
         footerClassName="justify-end gap-2"
         footerTestId="add-channel-bot-dialog-footer"
         headerTestId="add-channel-bot-dialog-header"
-        scrollAreaClassName="space-y-5"
+        scrollAreaClassName="space-y-6"
         scrollAreaTestId="add-channel-bot-dialog-scroll-area"
         title="Add agents"
       >

desktop/src/features/channels/ui/ChannelMembersBar.tsx

@@ -9,26 +9,36 @@ import {
   useManagedAgentsQuery,
   useRelayAgentsQuery,
 } from "@/features/agents/hooks";
+import { sortProviders } from "@/features/agents/lib/sortProviders";
 import { useChannelMembersQuery } from "@/features/channels/hooks";
 import type { Channel } from "@/shared/api/types";
 import { normalizePubkey } from "@/shared/lib/pubkey";
 import { Button } from "@/shared/ui/button";
 import { AddChannelBotDialog } from "./AddChannelBotDialog";
+import { QuickAddAgentPopover } from "./QuickAddAgentPopover";
 
 type ChannelMembersBarProps = {
   channel: Channel;
   currentPubkey?: string;
+  isAddBotDialogOpen?: boolean;
+  onAddBotDialogOpenChange?: (open: boolean) => void;
   onManageChannel: () => void;
   onToggleMembers: () => void;
 };
 
 export function ChannelMembersBar({
   channel,
   currentPubkey,
+  isAddBotDialogOpen,
+  onAddBotDialogOpenChange,
   onManageChannel,
   onToggleMembers,
 }: ChannelMembersBarProps) {
-  const [isAddBotOpen, setIsAddBotOpen] = React.useState(false);
+  // Dialog state: controlled externally if props provided, otherwise local.
+  const [localIsAddBotOpen, setLocalIsAddBotOpen] = React.useState(false);
+  const isAddBotOpen = isAddBotDialogOpen ?? localIsAddBotOpen;
+  const setIsAddBotOpen = onAddBotDialogOpenChange ?? setLocalIsAddBotOpen;
+  const [isQuickAddOpen, setIsQuickAddOpen] = React.useState(false);
   const { startHuddle, isStarting: isStartingHuddle } = useHuddle();
   const queryClient = useQueryClient();
   const membersQuery = useChannelMembersQuery(channel.id);
@@ -39,16 +49,7 @@ export function ChannelMembersBar({
   const members = membersQuery.data ?? [];
   const memberCount = membersQuery.data?.length ?? channel.memberCount;
   const providers = React.useMemo(
-    () =>
-      [...(providersQuery.data ?? [])].sort((left, right) => {
-        const leftPriority = left.id === "goose" ? 0 : 1;
-        const rightPriority = right.id === "goose" ? 0 : 1;
-        if (leftPriority !== rightPriority) {
-          return leftPriority - rightPriority;
-        }
-
-        return left.label.localeCompare(right.label);
-      }),
+    () => sortProviders(providersQuery.data ?? []),
     [providersQuery.data],
   );
   const normalizedCurrentPubkey = currentPubkey
@@ -73,7 +74,8 @@ export function ChannelMembersBar({
 
     previousChannelIdRef.current = channel.id;
     setIsAddBotOpen(false);
-  }, [channel.id]);
+    setIsQuickAddOpen(false);
+  }, [channel.id, setIsAddBotOpen]);
 
   const dialogErrorMessage =
     providersQuery.error instanceof Error
@@ -87,20 +89,24 @@ export function ChannelMembersBar({
   return (
     <React.Fragment>
       <div className="flex items-center gap-1">
-        <Button
-          aria-label="Add agent"
-          className="h-7 w-7 rounded-full"
-          data-testid="channel-add-bot-trigger"
-          disabled={!canAddAgents}
-          onClick={() => {
-            setIsAddBotOpen(true);
-          }}
-          size="icon"
-          type="button"
-          variant="outline"
+        <QuickAddAgentPopover
+          channelId={channel.id}
+          open={isQuickAddOpen}
+          onOpenChange={setIsQuickAddOpen}
+          onMoreOptions={() => setIsAddBotOpen(true)}
         >
-          <Plus className="h-3 w-3" />
-        </Button>
+          <Button
+            aria-label="Add agent"
+            className="h-7 w-7 rounded-full"
+            data-testid="channel-add-bot-trigger"
+            disabled={!canAddAgents}
+            size="icon"
+            type="button"
+            variant="outline"
+          >
+            <Plus className="h-3 w-3" />
+          </Button>
+        </QuickAddAgentPopover>
 
         <HuddleIndicator
           className="h-7 w-7"

desktop/src/features/channels/ui/ChannelScreen.tsx

@@ -85,6 +85,7 @@ export function ChannelScreen({
     string | null
   >(null);
   const [isMembersSidebarOpen, setIsMembersSidebarOpen] = React.useState(false);
+  const [isAddBotDialogOpen, setIsAddBotDialogOpen] = React.useState(false);
   const [openThreadHeadId, setOpenThreadHeadId] = React.useState<string | null>(
     null,
   );
@@ -436,7 +437,9 @@ export function ChannelScreen({
           activeChannelTitle={activeChannelTitle}
           activeDmPresenceStatus={activeDmPresenceStatus}
           currentPubkey={currentPubkey}
+          isAddBotDialogOpen={isAddBotDialogOpen}
           isJoining={joinChannelMutation.isPending}
+          onAddBotDialogOpenChange={setIsAddBotDialogOpen}
           onJoinChannel={joinChannelMutation.mutateAsync}
           onManageChannel={openChannelManagement}
           onToggleMembers={() => setIsMembersSidebarOpen((prev) => !prev)}
@@ -530,6 +533,7 @@ export function ChannelScreen({
           currentPubkey={currentPubkey}
           open={isMembersSidebarOpen}
           onOpenChange={setIsMembersSidebarOpen}
+          onOpenAddBotDialog={() => setIsAddBotDialogOpen(true)}
           onViewActivity={handleOpenAgentSession}
         />
       </ProfilePanelProvider>

desktop/src/features/channels/ui/ChannelScreenHeader.tsx

@@ -14,7 +14,9 @@ type ChannelScreenHeaderProps = {
   activeChannelTitle: string;
   activeDmPresenceStatus: PresenceStatus | null;
   currentPubkey?: string;
+  isAddBotDialogOpen?: boolean;
   isJoining?: boolean;
+  onAddBotDialogOpenChange?: (open: boolean) => void;
   onJoinChannel?: () => Promise<void>;
   onManageChannel: () => void;
   onToggleMembers: () => void;
@@ -26,7 +28,9 @@ export function ChannelScreenHeader({
   activeChannelTitle,
   activeDmPresenceStatus,
   currentPubkey,
+  isAddBotDialogOpen,
   isJoining = false,
+  onAddBotDialogOpenChange,
   onJoinChannel,
   onManageChannel,
   onToggleMembers,
@@ -56,6 +60,8 @@ export function ChannelScreenHeader({
             <ChannelMembersBar
               channel={activeChannel}
               currentPubkey={currentPubkey}
+              isAddBotDialogOpen={isAddBotDialogOpen}
+              onAddBotDialogOpenChange={onAddBotDialogOpenChange}
               onManageChannel={onManageChannel}
               onToggleMembers={onToggleMembers}
             />