@workerdeck/ui 3.4.0 → 3.6.1

package/src/components/agent/SessionBrowser.tsx

@@ -1,15 +1,37 @@
 import { useMemo, useState } from 'react'
 import type { HTMLAttributes, ReactNode } from 'react'
-import { BedDouble, 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,6 +55,8 @@ 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
@@ -41,6 +65,10 @@ export interface SessionBrowserProps {
   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
@@ -74,6 +102,7 @@ export function SessionBrowser({
   onSelect,
   onDelete,
   onRename,
+  onRenameAgent,
   onClearContext,
   onSleep,
   onSelectSubagent,
@@ -82,6 +111,8 @@ export function SessionBrowser({
   onSelectShell,
   onKillShell,
   onShellAgentWrite,
+  avatars,
+  onTeamMove,
   onCreateInGroup,
   emptyState,
   showControls = true,
@@ -93,19 +124,27 @@ 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) {
       return (
         <CustomGroupHeader
           group={group}
+          look={config.customGroups?.find((custom) => custom.id === group.custom)}
+          onStyle={(look) => group.custom && drag.style(group.custom, look)}
           editing={group.custom !== undefined && editingGroup === group.custom}
           onEditingChange={(editing) => setEditingGroup(editing ? group.custom : undefined)}
           onRename={(name) => group.custom && drag.rename(group.custom, name)}
@@ -114,6 +153,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
     }
@@ -196,12 +248,12 @@ export function SessionBrowser({
           <Empty icon={<Layers />} title="Nothing here" description="No session to show." />
         )
       ) : (
-        <div className="flex flex-col gap-4 px-1">
+        <div className="flex flex-col gap-2 px-1">
           {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 ? (
@@ -209,36 +261,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}
-                  onSleep={onSleep}
-                  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}
@@ -255,8 +341,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
@@ -283,8 +376,15 @@ interface SessionRowItemProps {
 
 function SessionRowItem({
   row,
+  variant,
+  avatars,
+  badgeState,
+  teamUnseen,
+  teamTray,
+  tile,
+  className,
   dragProps,
-  dropTarget,
+  dropCue,
   active,
   actions,
   activeSubagentId,
@@ -314,6 +414,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}
@@ -338,7 +445,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}
@@ -373,9 +480,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>
   )
 }