- Toggles sit in a separate row that slides in/out (height animation)
- Agent list uses motion layout to smoothly translate down when row appears
- Header stays clean: just title + Select/Cancel button
- Gradient scroll affordance on the toggle row's right edge
- 'Add agent' title stays visible always; 's' fades in when select mode
activates ('Add agents')
- Team toggles appear to the right of the title, scroll horizontally
- Right-edge gradient (from-popover to-transparent) hints at more
content when overflowing
- Button stays ghost+border (outline look) in both states
- Label changes: 'Select' → 'Cancel' when active
- Toggle chips use default data-[state=on]:bg-primary (removed accent override)
- First team chip: opacity-only animation (no x translate)
- Second+ chips: translate from x:12 + fade, staggered by index
- Header container: px-3 py-1.5 with gap-2 for consistent spacing
around the Select button on all sides
Checkboxes were too busy in the agent list. Selection is now
indicated only by the bg-accent/50 highlight on selected rows.
Button already uses size=sm.
The outline variant includes bg-background which creates a visible
contrast block against bg-popover. Use ghost variant with explicit
border-input border for a truly transparent-bg outlined button.
- Label stays 'Select' in both states (no more 'Cancel' label)
- Inactive: variant='outline' (visible against bg-popover)
- Active: variant='default' (primary) for clear state change
- Popover uses bg-popover token (hsl 220 23% 95% light / 232 23% 18% dark)
- Select button uses Button variant='secondary', switches to 'default'
(primary) when active for clear visual state change
- Checkboxes animate in with fade + scale (motion.div) when entering
select mode
- Agent name uses min-w-0 + truncate for proper text overflow when
checkbox pushes content over
- 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.
- Team chips now use shadcn Toggle component (outline variant) with
visual pressed state via data-[state=on]
- Toggles are selectable/deselectable — clicking again removes the team
- 'Select' button becomes 'Cancel' when active — clears all selections
and exits select mode
- 'Add (N)' button moved to the bottom of the popover, below More Options
- Full-width button, only visible when items are selected
- 'Select' button in the header reveals team filter chips on click
- Title fades out, team chips animate in from right using motion/react
- Clicking a team chip auto-selects all its member agents
- Multi-select mode shows checkboxes + 'Add (N)' confirm button
- Single-click fast path preserved when not in select mode
- Team chips scroll horizontally when overflowing
- Exiting: deselect all returns to default title state
Restructure the dialog from a flat wall of fields into three layers:
1. Primary (always visible): Persona/team selection + runtime picker.
These are the two decisions that matter most.
2. Customize (collapsed): Bot name, system prompt, respond-to allowlist.
Power user controls that don't block the happy path.
3. Advanced (collapsed): Backend provider selection, provider config.
Expert territory hidden by default.
Uses a simple DisclosureSection component with chevron toggle. All
existing functionality preserved — just layered behind progressive
disclosure. Description updated to match the new vibe.
Remove team headers, nesting, multi-select mode, checkboxes, batch
mutations, and team-related imports. The popover returns to its core
purpose: a flat, smartly-ordered list where single-click immediately
adds an agent. Teams and batch selection will live in the 'More options'
dialog instead.
Keeps: overflow-hidden fix, role=menu, smart ordering (running first,
recents, then available), scroll container with mid-item clip.
- Agents now appear indented under their team header as a visual unit
- Ungrouped agents (not in any team) show in a separate section below
- Checkboxes hidden by default, fade in on hover (group-hover)
- Clicking checkbox enters multi-select mode; clicking row still does
single-add (fast path preserved for ungrouped agents)
- Team header click selects all members and enters multi-select mode
- Once in multi-select mode, all checkboxes stay visible
- Running agents still sort to top within their section
Relocate the batch confirm button from the bottom sticky area into the
'Add agent' header row, anchored right. Uses Button size=sm (smallest
variant). Only renders when multi-select mode is active with 1+ items
selected.
Transform the Quick Add Agent popover into a hybrid interaction model:
- Single-click on an individual agent still adds immediately (fast path)
- Clicking a team row selects all its personas and enters multi-select mode
- In multi-select mode, clicking agents toggles checkbox selection
- Sticky 'Add (N)' confirm button appears at the bottom in multi-select
- Teams section at the top shows usable teams with member count
- Scroll container clips mid-item (max-h-[13.75rem]) to hint at more content
- Nothing pre-selected; running agents still sort to top via recency
- Batch add uses useCreateChannelManagedAgentsMutation for new personas
and individual attach for already-running agents
Add overflow-hidden to PopoverContent so hover backgrounds on the
bottom item stay clipped within the rounded corners. Also restore
role=menu on the keyboard-navigable container (lost during revert).
Change DropdownMenuContent from overflow-y-auto to overflow-hidden so
hover/focus backgrounds on menu items are clipped by the container's
rounded corners. Instances that need scrolling (e.g. PulseView) already
pass overflow-y-auto via className which overrides the y-axis.
Matches the existing SubContent pattern which already uses overflow-hidden.
Add a compact '+' icon button immediately left of the ellipsis (⋯)
bulk-actions menu in the Bots section header of the Members side pane.
Remove the old full-width 'Add agent' button from below the bots list.
The trigger opens the same QuickAddAgentPopover as before — just in a
more discoverable, compact location matching the ⋯ button style.
Reorder header action buttons so the Quick Add Agent popover trigger
(+ icon) is positioned directly before the manage channel button,
making it more discoverable next to the channel settings.
Also fix pre-existing lint: add role=menu to popover container and
format QuickAddAgentPopover.tsx per biome rules.
Critical fixes:
1. Null channelId guard — popover renders children-only (no popover
content) when channelId is null. Action handlers also early-return.
2. pickBotName fallback — safeBotName() wraps pickBotName with a
defensive fallback to persona.displayName or 'Agent'.
3. E2E test updates — tests now click through the quick-add popover's
'More options…' button before asserting on the full dialog.
4. Duplicate AddChannelBotDialog — removed the sidebar's own dialog
instance. Dialog state is now lifted to ChannelScreen and passed
down via props. Only one dialog instance exists (in ChannelMembersBar).
Medium fixes:
5. Discriminated union types — QuickAddAgentItem is now a proper
tagged union (RunningAvailableItem | RunningInChannelItem | PersonaItem).
No more optional agent?/persona? fields.
6. Extracted sortProviders utility — shared between ChannelMembersBar
and any future consumer. Single source of truth for provider ordering.
7. Emerald colors kept — matches existing presence pattern (bg-emerald-500)
used throughout the codebase. No design token exists for 'running' status.
8. Keyboard navigation — added arrow-key roving focus via onKeyDown handler
on the popover container, targeting [data-quick-add-item] buttons.
9. Eager queries — channel members query already gated by popover open state.
Other queries (agents, personas, providers) are globally cached by
ChannelMembersBar which is always mounted — no extra network cost.
Replace the direct + → full dialog flow with a lightweight Radix popover
that shows available agents sorted by state (running > configured > catalog).
One click to add. The full AddChannelBotDialog is still accessible via
'More options…' at the bottom of the popover.
Two trigger points:
- The existing + button in ChannelMembersBar now opens the popover
- A new 'Add agent' button at the bottom of the sidebar Bots section
The sidebar already had People/Bots section headers — the inline add
affordance lives at the bottom of the Bots section.
Actions:
- Running agent not in channel → useAttachManagedAgentToChannelMutation
- Persona without running agent → useCreateChannelManagedAgentMutation
(leverages existing reuse logic from agentReuse.ts)
The popover uses useBotRecents for smart ordering and pickBotName for
instance naming. Force-new-instance stays buried in the full dialog.
