@workerdeck/ui 3.3.0 → 3.5.0

package/src/components/agent/SessionBrowser.tsx

@@ -1,15 +1,37 @@
 import { useMemo, useState } from 'react'
 import type { HTMLAttributes, ReactNode } from 'react'
-import { Eraser, FolderOpen, Layers, Pencil, Plus, Search, SearchX, Trash2, X } from 'lucide-react'
-import { clearFilters, filterRows, groupRows, hasFacetFilter, scopeActive, sessionKey, subsetSummary } from '@workerdeck/protocol'
-import type { SessionGroup, SessionRow, SessionTask, StepDisplay, SubagentDisplay, ViewConfig, WorkspaceScope } from '@workerdeck/protocol'
+import { BedDouble, ChevronDown, ChevronRight, Eraser, FolderOpen, Layers, Pencil, Plus, Search, SearchX, Trash2, X } from 'lucide-react'
+import {
+  clearFilters,
+  filterRows,
+  groupRows,
+  hasFacetFilter,
+  isTeamCollapsed,
+  scopeActive,
+  sessionKey,
+  subsetSummary,
+  teamSummary,
+  toggleTeamCollapsed,
+} from '@workerdeck/protocol'
+import type {
+  SessionGroup,
+  SessionRow,
+  SessionState,
+  SessionTask,
+  StepDisplay,
+  SubagentDisplay,
+  ViewConfig,
+  WorkspaceScope,
+} from '@workerdeck/protocol'
+import { AgentAvatar, avatarOf, type AgentAvatars } from './AgentAvatar.tsx'
 import { Button } from '../ui/Button.tsx'
 import { Empty } from '../ui/Empty.tsx'
 import { Input } from '../ui/Input.tsx'
 import { ProjectIcon } from './ProjectIcon.tsx'
 import { SessionFilters } from './SessionFilters.tsx'
 import { SessionItem, type SelectModifiers } from './SessionItem.tsx'
-import { CustomGroupHeader, GroupHeading, HeadingAction, NewGroupButton, useGroupDrag } from './SessionGroups.tsx'
+import { CustomGroupHeader, GroupHeading, HeadingAction, NewGroupButton, useGroupDrag, type DropCue } from './SessionGroups.tsx'
+import type { TeamMove } from '../../lib/team-drop.ts'
 import { cn } from '../../lib/utils.ts'
 
 export { SessionStatusIcon } from './SessionStatusIcon.tsx'
@@ -33,13 +55,20 @@ export interface SessionBrowserProps {
   onSelect?: (row: SessionRow, modifiers: SelectModifiers) => void
   onDelete?: (row: SessionRow) => void
   onRename?: (row: SessionRow, title: string) => void
+  // An agent card's name is the agent's, not the session title; without this, agent cards are not renamable.
+  onRenameAgent?: (row: SessionRow, name: string) => void
   onClearContext?: (row: SessionRow) => void
+  onSleep?: (row: SessionRow) => void
   onSelectSubagent?: (row: SessionRow, toolUseId: string) => void
   onSelectTask?: (row: SessionRow, task: SessionTask) => void
   onStopTask?: (row: SessionRow, toolUseId: string) => void
   onSelectShell?: (row: SessionRow, shellId: string) => void
   onKillShell?: (row: SessionRow, shellId: string) => void
   onShellAgentWrite?: (row: SessionRow, shellId: string, enabled: boolean) => void
+  avatars?: AgentAvatars
+  // Makes cards draggable onto each other: the middle of a card joins its team, a member dropped outside leaves.
+  // Reject with an Error to draw its message under the card.
+  onTeamMove?: (move: TeamMove) => Promise<void> | void
   // Draws a `+` on each project heading: start a session on that gateway, in that project's root.
   onCreateInGroup?: (target: GroupTarget) => void
   emptyState?: ReactNode
@@ -73,13 +102,17 @@ export function SessionBrowser({
   onSelect,
   onDelete,
   onRename,
+  onRenameAgent,
   onClearContext,
+  onSleep,
   onSelectSubagent,
   onSelectTask,
   onStopTask,
   onSelectShell,
   onKillShell,
   onShellAgentWrite,
+  avatars,
+  onTeamMove,
   onCreateInGroup,
   emptyState,
   showControls = true,
@@ -91,13 +124,19 @@ export function SessionBrowser({
   const rowGateways = useMemo(() => new Set(rows.map((row) => row.hostId)).size, [rows])
   const gateways = gatewayCount ?? rowGateways
   const visible = useMemo(() => filterRows(rows, config, scope), [rows, config, scope])
-  const groups = useMemo(() => groupRows(visible, config, { gatewayCount: gateways }), [visible, config, gateways])
+  const groups = useMemo(() => groupRows(visible, config, { gatewayCount: gateways, all: rows }), [visible, config, gateways, rows])
   const subset = subsetSummary(config, scope, visible.length, rows.length)
+  const tiles = useMemo(() => rows.some((row) => row.info.agent !== undefined), [rows])
   const custom = config.groupBy === 'custom'
   const [editingGroup, setEditingGroup] = useState<string>()
 
   const set = (patch: Partial<ViewConfig>) => onConfigChange({ ...config, ...patch })
-  const drag = useGroupDrag(config.customGroups ?? [], (customGroups) => set({ customGroups }))
+  const byKey = useMemo(() => new Map(rows.map((row) => [sessionKey(row), row])), [rows])
+  const drag = useGroupDrag(config.customGroups ?? [], (customGroups) => set({ customGroups }), {
+    custom,
+    team: onTeamMove ? { rowOf: (key) => byKey.get(key), onMove: onTeamMove } : undefined,
+  })
+  const draggable = custom || onTeamMove !== undefined
 
   const heading = (group: SessionGroup) => {
     if (custom) {
@@ -112,6 +151,19 @@ export function SessionBrowser({
         />
       )
     }
+    if (group.earlier) {
+      return (
+        <button
+          type="button"
+          aria-expanded={config.earlierOpen === true}
+          onClick={() => set({ earlierOpen: !config.earlierOpen })}
+          className="flex items-center gap-1 px-2 text-left text-label text-fg-4 hover:text-fg-2"
+        >
+          {config.earlierOpen ? <ChevronDown className="size-3.5" /> : <ChevronRight className="size-3.5" />}
+          Earlier · {group.rows.length} one-off session{group.rows.length === 1 ? '' : 's'}
+        </button>
+      )
+    }
     if (config.groupBy === 'none' || !group.label) {
       return null
     }
@@ -119,7 +171,17 @@ export function SessionBrowser({
     const target = project && group.hostId ? { hostId: group.hostId, cwd: group.cwd } : undefined
     return (
       <GroupHeading
-        label={group.label}
+        label={
+          group.gateway && group.project ? (
+            <>
+              {group.gateway}
+              <span aria-hidden> · </span>
+              <span className="text-fg-1">{group.project}</span>
+            </>
+          ) : (
+            group.label
+          )
+        }
         count={group.rows.length}
         title={project && group.cwd ? group.cwd : undefined}
         leading={
@@ -188,8 +250,8 @@ export function SessionBrowser({
           {groups.map((group) => (
             <div
               key={group.key}
-              {...(custom ? drag.container(group) : {})}
-              className={cn('flex flex-col gap-1 rounded-md', custom && drag.isOver(`group:${group.key}`) && 'bg-row-hover/50')}
+              {...(draggable ? drag.container(group) : {})}
+              className={cn('flex flex-col gap-1 rounded-md', draggable && drag.isOver(`group:${group.key}`) && 'bg-row-hover/50')}
             >
               {heading(group)}
               {custom && group.custom !== undefined && group.rows.length === 0 ? (
@@ -197,35 +259,70 @@ export function SessionBrowser({
                   Drag sessions here
                 </div>
               ) : null}
-              {group.rows.map((row) => (
-                <SessionRowItem
-                  key={sessionKey(row)}
-                  dragProps={custom ? drag.session(sessionKey(row), group) : undefined}
-                  dropTarget={custom && drag.isOver(`row:${sessionKey(row)}`)}
-                  row={row}
-                  active={isActive(row)}
-                  activeSubagentId={activeSubagentId}
-                  activeShellId={activeShellId}
-                  actions={rowActions?.(row)}
-                  now={now}
-                  showGateway={gateways > 1 && config.groupBy !== 'project'}
-                  showProject={config.groupBy !== 'project'}
-                  subagents={config.subagents}
-                  shells={config.shells}
-                  tasks={config.tasks}
-                  projectIcons={projectIcons}
-                  onSelect={onSelect}
-                  onDelete={onDelete}
-                  onRename={onRename}
-                  onClearContext={onClearContext}
-                  onSelectSubagent={onSelectSubagent}
-                  onSelectTask={onSelectTask}
-                  onStopTask={onStopTask}
-                  onSelectShell={onSelectShell}
-                  onKillShell={onKillShell}
-                  onShellAgentWrite={onShellAgentWrite}
-                />
-              ))}
+              {group.earlier && !config.earlierOpen
+                ? null
+                : group.rows.map((row) => {
+                    const item = (member: SessionRow, variant: 'card' | 'member', extra: Partial<SessionRowItemProps> = {}) => (
+                      <SessionRowItem
+                        key={sessionKey(member)}
+                        dragProps={
+                          onTeamMove || (custom && variant === 'card')
+                            ? drag.session(sessionKey(member), group, variant === 'member' ? { row: member, lead: row } : { row })
+                            : undefined
+                        }
+                        dropCue={draggable ? drag.cue(sessionKey(member)) : undefined}
+                        row={member}
+                        variant={variant}
+                        active={isActive(member)}
+                        activeSubagentId={activeSubagentId}
+                        activeShellId={activeShellId}
+                        actions={rowActions?.(member)}
+                        now={now}
+                        showGateway={gateways > 1 && config.groupBy !== 'project'}
+                        showProject={config.groupBy !== 'project'}
+                        subagents={config.subagents}
+                        shells={config.shells}
+                        tasks={config.tasks}
+                        projectIcons={projectIcons}
+                        avatars={avatars}
+                        tile={tiles}
+                        onSelect={onSelect}
+                        onDelete={onDelete}
+                        onRename={member.info.agent ? onRenameAgent : onRename}
+                        onClearContext={onClearContext}
+                        onSleep={onSleep}
+                        onSelectSubagent={onSelectSubagent}
+                        onSelectTask={onSelectTask}
+                        onStopTask={onStopTask}
+                        onSelectShell={onSelectShell}
+                        onKillShell={onKillShell}
+                        onShellAgentWrite={onShellAgentWrite}
+                        {...extra}
+                      />
+                    )
+                    if (!row.members?.length) {
+                      return item(row, 'card', { className: row.context ? 'opacity-50' : undefined })
+                    }
+                    const collapsed = isTeamCollapsed(config, row)
+                    return (
+                      <TeamBlock
+                        key={sessionKey(row)}
+                        lead={row}
+                        collapsed={collapsed}
+                        avatars={avatars}
+                        onToggle={() => onConfigChange(toggleTeamCollapsed(config, row))}
+                        renderLead={(summary, tray) =>
+                          item(row, 'card', {
+                            className: row.context ? 'opacity-50' : undefined,
+                            badgeState: collapsed ? row.teamState : undefined,
+                            teamUnseen: collapsed ? summary.unseen : 0,
+                            teamTray: tray,
+                          })
+                        }
+                        renderMember={(member) => item(member, 'member')}
+                      />
+                    )
+                  })}
             </div>
           ))}
           {custom ? <NewGroupButton onClick={() => setEditingGroup(drag.create())} /> : null}
@@ -242,8 +339,15 @@ function iconSrcOf(row: SessionRow | undefined, icons: Record<string, string> |
 
 interface SessionRowItemProps {
   row: SessionRow
+  variant?: 'card' | 'member'
+  avatars?: AgentAvatars
+  badgeState?: SessionState
+  teamUnseen?: number
+  teamTray?: ReactNode
+  tile?: boolean
+  className?: string
   dragProps?: HTMLAttributes<HTMLDivElement>
-  dropTarget?: boolean
+  dropCue?: DropCue
   active?: boolean
   actions?: ReactNode
   activeSubagentId?: string
@@ -259,6 +363,7 @@ interface SessionRowItemProps {
   onDelete?: (row: SessionRow) => void
   onRename?: (row: SessionRow, title: string) => void
   onClearContext?: (row: SessionRow) => void
+  onSleep?: (row: SessionRow) => void
   onSelectSubagent?: (row: SessionRow, toolUseId: string) => void
   onSelectTask?: (row: SessionRow, task: SessionTask) => void
   onStopTask?: (row: SessionRow, toolUseId: string) => void
@@ -269,8 +374,15 @@ interface SessionRowItemProps {
 
 function SessionRowItem({
   row,
+  variant,
+  avatars,
+  badgeState,
+  teamUnseen,
+  teamTray,
+  tile,
+  className,
   dragProps,
-  dropTarget,
+  dropCue,
   active,
   actions,
   activeSubagentId,
@@ -286,6 +398,7 @@ function SessionRowItem({
   onDelete,
   onRename,
   onClearContext,
+  onSleep,
   onSelectSubagent,
   onSelectTask,
   onStopTask,
@@ -299,6 +412,13 @@ function SessionRowItem({
   const item = (
     <SessionItem
       row={row}
+      variant={variant}
+      avatars={avatars}
+      badgeState={badgeState}
+      teamUnseen={teamUnseen}
+      teamTray={teamTray}
+      tile={tile}
+      className={className}
       active={active === true}
       activeStepKey={active ? (activeShellId ?? activeSubagentId) : undefined}
       now={now}
@@ -323,7 +443,7 @@ function SessionRowItem({
         actions ?? (
           <>
             {onRename && !editing ? (
-              <RowAction label="Rename session" onClick={() => setEditing(true)}>
+              <RowAction label={info.agent ? 'Rename agent' : 'Rename session'} onClick={() => setEditing(true)}>
                 <Pencil className="size-3 text-fg-3" />
               </RowAction>
             ) : null}
@@ -336,6 +456,15 @@ function SessionRowItem({
                 <Eraser className="size-3 text-fg-3" />
               </RowAction>
             ) : null}
+            {onSleep && info.capabilities?.engineSleep && info.status === 'idle' && !info.engineAsleep ? (
+              <RowAction
+                label="Sleep session"
+                title="Stop the engine process to free its memory - the session stays here and wakes on your next message"
+                onClick={() => onSleep(row)}
+              >
+                <BedDouble className="size-3 text-fg-3" />
+              </RowAction>
+            ) : null}
             {onDelete ? (
               <RowAction label="Close session" onClick={() => onDelete(row)}>
                 <Trash2 className="size-3 text-fg-3" />
@@ -349,9 +478,105 @@ function SessionRowItem({
   if (!dragProps) {
     return item
   }
+  const zone = dropCue?.zone
   return (
-    <div {...dragProps} className={cn('rounded-md', dropTarget && 'shadow-[inset_0_2px_0_0_var(--color-accent)]')}>
+    <div
+      {...dragProps}
+      title={zone === 'refused' ? dropCue?.message : undefined}
+      className={cn(
+        'rounded-md',
+        zone === 'before' && 'shadow-[inset_0_2px_0_0_var(--color-accent)]',
+        zone === 'after' && 'shadow-[inset_0_-2px_0_0_var(--color-accent)]',
+        zone === 'join' && 'bg-accent/10 ring-1 ring-accent',
+        zone === 'refused' && 'ring-1 ring-danger/60',
+      )}
+    >
       {item}
+      {zone === 'refused' && dropCue?.message ? (
+        <div role="status" className="px-3 pb-1 text-label text-danger">
+          {dropCue.message}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+const TRAY_MAX = 4
+
+// A folded team draws its members on the lead's first line (avatar and status each) and no row of its own; the tray
+// unfolds it. Expanded, a tree line runs from the lead's avatar with the knob atop it, so neither state needs a twistie.
+function TeamBlock({
+  lead,
+  collapsed,
+  avatars,
+  onToggle,
+  renderLead,
+  renderMember,
+}: {
+  lead: SessionRow
+  collapsed: boolean
+  avatars?: AgentAvatars
+  onToggle: () => void
+  renderLead: (summary: ReturnType<typeof teamSummary>, tray?: ReactNode) => ReactNode
+  renderMember: (member: SessionRow) => ReactNode
+}) {
+  const members = lead.members ?? []
+  const summary = teamSummary(lead)
+  if (collapsed) {
+    const surfaced = members.filter((member) => member.state === 'attention')
+    const counts = [
+      `${summary.members} member${summary.members === 1 ? '' : 's'}`,
+      summary.working ? `${summary.working} working` : undefined,
+      summary.attention ? `${summary.attention} need${summary.attention === 1 ? 's' : ''} you` : undefined,
+    ].filter(Boolean)
+    const hidden = members.length - TRAY_MAX
+    const tray = (
+      <button
+        type="button"
+        aria-expanded={false}
+        aria-label={`Expand ${lead.info.agent?.name ?? 'team'}: ${counts.join(', ')}`}
+        title={counts.join(' · ')}
+        onClick={(e) => {
+          e.stopPropagation()
+          onToggle()
+        }}
+        className="flex shrink-0 items-center gap-1 rounded-[4px] px-0.5 hover:bg-row-hover"
+      >
+        {members.slice(0, hidden > 0 ? TRAY_MAX - 1 : TRAY_MAX).map((member) => (
+          <AgentAvatar
+            key={sessionKey(member)}
+            row={member}
+            image={avatarOf(avatars, member.info.agent)}
+            size={16}
+            className="rounded-[3px]"
+          />
+        ))}
+        {hidden > 0 ? <span className="text-label text-fg-4 tabular-nums">+{hidden + 1}</span> : null}
+      </button>
+    )
+    return (
+      <div data-slot="team" data-collapsed className="flex flex-col">
+        {renderLead(summary, tray)}
+        {surfaced.length ? <div className="ml-3 flex flex-col">{surfaced.map(renderMember)}</div> : null}
+      </div>
+    )
+  }
+  return (
+    <div data-slot="team" className="flex flex-col">
+      {renderLead(summary)}
+      <div className="relative ml-3.5 flex flex-col pl-1">
+        <span aria-hidden className="absolute top-0 bottom-3 left-0 w-px bg-border" />
+        <button
+          type="button"
+          aria-expanded
+          aria-label={`Collapse ${lead.info.agent?.name ?? 'team'}`}
+          onClick={onToggle}
+          className="absolute -top-1 -left-[7px] flex size-3.5 items-center justify-center rounded-full border border-border bg-bg text-fg-4 hover:text-fg-1"
+        >
+          <ChevronDown className="size-2.5" />
+        </button>
+        {members.map(renderMember)}
+      </div>
     </div>
   )
 }

package/src/components/agent/SessionGroups.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import type { DragEvent, HTMLAttributes, ReactNode } from 'react'
 import { GripVertical, Pencil, Plus, Trash2 } from 'lucide-react'
 import {
@@ -8,8 +8,10 @@ import {
   newCustomGroupId,
   removeCustomGroup,
   renameCustomGroup,
+  sessionKey,
 } from '@workerdeck/protocol'
-import type { CustomGroup, SessionGroup } from '@workerdeck/protocol'
+import type { CustomGroup, SessionGroup, SessionRow } from '@workerdeck/protocol'
+import { dropZone, joinDrop, memberDrop, type DropZone, type TeamMove } from '../../lib/team-drop.ts'
 import { Button } from '../ui/Button.tsx'
 import { Input } from '../ui/Input.tsx'
 import { cn } from '../../lib/utils.ts'
@@ -18,11 +20,36 @@ type DragItem = { kind: 'session'; key: string } | { kind: 'group'; id: string }
 
 export type GroupDrag = ReturnType<typeof useGroupDrag>
 
+// Where a card sits: `lead` is set for a member, the team it is drawn under.
+export type DragPlace = { row: SessionRow; lead?: SessionRow }
+
+export type TeamDrag = {
+  rowOf: (key: string) => SessionRow | undefined
+  // A rejection's message is drawn under the card it was dropped on: a gateway 409 is user-facing copy.
+  onMove: (move: TeamMove) => Promise<void> | void
+}
+
+type Over = { spot: string; refusal?: string }
+
+export type DropCue = { zone?: DropZone | 'refused'; message?: string }
+type Landing = Over & { run?: () => void }
+
+const ERROR_MS = 5000
+
 // The payload lives in state rather than `dataTransfer`, which is unreadable during `dragover`; `setData` is still
-// written because some engines refuse to start a drag without it.
-export function useGroupDrag(groups: readonly CustomGroup[], onChange: (groups: CustomGroup[]) => void) {
+// written because some engines refuse to start a drag without it. A card is split in three: the middle joins its
+// team, the edges reorder (custom groups) or leave a team.
+export function useGroupDrag(
+  groups: readonly CustomGroup[],
+  onChange: (groups: CustomGroup[]) => void,
+  options: { custom: boolean; team?: TeamDrag },
+) {
+  const { custom, team } = options
   const [item, setItem] = useState<DragItem>()
-  const [over, setOver] = useState<string>()
+  const [over, setOver] = useState<Over>()
+  const [failure, setFailure] = useState<{ key: string; message: string }>()
+  const failureTimer = useRef<ReturnType<typeof setTimeout>>(undefined)
+  useEffect(() => () => clearTimeout(failureTimer.current), [])
   const end = () => {
     setItem(undefined)
     setOver(undefined)
@@ -33,49 +60,109 @@ export function useGroupDrag(groups: readonly CustomGroup[], onChange: (groups:
     e.dataTransfer.setData('text/plain', next.kind === 'session' ? next.key : next.id)
     setItem(next)
   }
-  const accept = (e: DragEvent, spot: string) => {
+  const accept = (e: DragEvent, next: Over) => {
     e.preventDefault()
     e.stopPropagation()
-    e.dataTransfer.dropEffect = 'move'
-    setOver(spot)
+    e.dataTransfer.dropEffect = next.refusal ? 'none' : 'move'
+    if (over?.spot !== next.spot || over.refusal !== next.refusal) {
+      setOver(next)
+    }
+  }
+  const fail = (key: string, err: unknown) => {
+    clearTimeout(failureTimer.current)
+    setFailure({ key, message: err instanceof Error ? err.message : String(err) })
+    failureTimer.current = setTimeout(() => setFailure(undefined), ERROR_MS)
+  }
+  const move = (key: string, next: TeamMove) => () => {
+    setFailure(undefined)
+    void Promise.resolve()
+      .then(() => team!.onMove(next))
+      .catch((err: unknown) => fail(key, err))
+  }
+
+  function land(e: DragEvent<HTMLDivElement>, key: string, group: SessionGroup, place?: DragPlace): Landing | undefined {
+    if (item?.kind !== 'session' || item.key === key) {
+      return undefined
+    }
+    const reorder = custom
+      ? { spot: `row:${key}`, run: () => onChange(moveToCustomGroup(groups, item.key, group.custom, group.custom ? key : undefined)) }
+      : undefined
+    const dragged = team?.rowOf(item.key)
+    if (!team || !dragged || !place) {
+      return reorder
+    }
+    const rect = e.currentTarget.getBoundingClientRect()
+    const zone = dropZone(e.clientY - rect.top, rect.height)
+    if (place.lead) {
+      const result = memberDrop(dragged, place.lead, place.row, zone)
+      return typeof result === 'string'
+        ? { spot: `refused:${key}`, refusal: result }
+        : { spot: `${zone === 'before' ? 'before' : 'after'}:${key}`, run: move(key, result) }
+    }
+    if (zone === 'join') {
+      const result = joinDrop(dragged, place.row)
+      if (typeof result !== 'string') {
+        return { spot: `join:${key}`, run: move(key, result) }
+      }
+      return reorder ?? { spot: `refused:${key}`, refusal: result }
+    }
+    if (dragged.info.agent?.lead !== undefined) {
+      const leave = move(key, { row: dragged, lead: null })
+      return {
+        spot: `${zone}:${key}`,
+        run: () => {
+          leave()
+          reorder?.run()
+        },
+      }
+    }
+    return reorder ? { ...reorder, spot: `${zone}:${key}` } : undefined
   }
 
-  function session(key: string, group: SessionGroup): HTMLAttributes<HTMLDivElement> {
+  function session(key: string, group: SessionGroup, place?: DragPlace): HTMLAttributes<HTMLDivElement> {
     return {
       draggable: true,
       onDragStart: (e) => start(e, { kind: 'session', key }),
       onDragEnd: end,
       onDragOver: (e) => {
-        if (item?.kind === 'session') {
-          accept(e, `row:${key}`)
+        const landing = land(e, key, group, place)
+        if (landing) {
+          accept(e, landing)
         }
       },
       onDrop: (e) => {
-        if (item?.kind !== 'session') {
+        const landing = land(e, key, group, place)
+        if (!landing) {
           return
         }
         e.preventDefault()
         e.stopPropagation()
-        if (item.key !== key) {
-          onChange(moveToCustomGroup(groups, item.key, group.custom, group.custom ? key : undefined))
-        }
+        landing.run?.()
         end()
       },
     }
   }
 
   function container(group: SessionGroup): HTMLAttributes<HTMLDivElement> {
+    const leaving = () => {
+      const dragged = item?.kind === 'session' ? team?.rowOf(item.key) : undefined
+      return dragged?.info.agent?.lead !== undefined ? dragged : undefined
+    }
     return {
       onDragOver: (e) => {
-        if (item) {
-          accept(e, `group:${group.key}`)
+        if (item && (custom || leaving())) {
+          accept(e, { spot: `group:${group.key}` })
         }
       },
       onDrop: (e) => {
         e.preventDefault()
-        if (item?.kind === 'session') {
+        const member = leaving()
+        if (member) {
+          move(sessionKey(member), { row: member, lead: null })()
+        }
+        if (custom && item?.kind === 'session') {
           onChange(moveToCustomGroup(groups, item.key, group.custom))
-        } else if (item?.kind === 'group') {
+        } else if (custom && item?.kind === 'group') {
           onChange(moveCustomGroup(groups, item.id, group.custom))
         }
         end()
@@ -91,9 +178,32 @@ export function useGroupDrag(groups: readonly CustomGroup[], onChange: (groups:
     return { draggable: true, onDragStart: (e) => start(e, { kind: 'group', id }), onDragEnd: end }
   }
 
+  // What to draw on a card while something hovers it, and a rejected drop's message for a while after.
+  function cue(key: string): DropCue {
+    if (failure?.key === key) {
+      return { zone: 'refused', message: failure.message }
+    }
+    const spot = over?.spot
+    if (!spot || spot.slice(spot.indexOf(':') + 1) !== key) {
+      return {}
+    }
+    const kind = spot.slice(0, spot.indexOf(':'))
+    if (kind === 'refused') {
+      return { zone: 'refused', message: over?.refusal }
+    }
+    return kind === 'row' || kind === 'before'
+      ? { zone: 'before' }
+      : kind === 'after'
+        ? { zone: 'after' }
+        : kind === 'join'
+          ? { zone: 'join' }
+          : {}
+  }
+
   return {
     dragging: item !== undefined,
-    isOver: (spot: string) => over === spot,
+    isOver: (spot: string) => over?.spot === spot,
+    cue,
     session,
     container,
     header,
@@ -191,7 +301,7 @@ export function GroupHeading({
   className,
   ...rest
 }: {
-  label: string
+  label: ReactNode
   count: number
   leading?: ReactNode
   actions?: ReactNode