@workerdeck/ui 3.4.0 → 3.6.1

package/src/components/agent/SessionItem.tsx

@@ -1,7 +1,9 @@
 import { Fragment, useEffect, useRef, useState } from 'react'
+import { Users } from 'lucide-react'
 import type { ReactNode } from 'react'
 import { projectLabel, projectName, projectSubpath, sessionLabel } from '@workerdeck/protocol'
-import type { SessionRow, SessionTask, StepDisplay, SubagentDisplay } from '@workerdeck/protocol'
+import type { SessionInfo, SessionRow, SessionState, SessionTask, StepDisplay, SubagentDisplay } from '@workerdeck/protocol'
+import { AgentAvatar, LeadChip, avatarOf, type AgentAvatars } from './AgentAvatar.tsx'
 import { ContextRing } from './ContextRing.tsx'
 import { EngineIcon, vendorMarkClass, vendorTextClass } from './EngineIcon.tsx'
 import { ProjectIcon } from './ProjectIcon.tsx'
@@ -36,6 +38,19 @@ export interface SessionItemProps {
   editing?: boolean
   onEditingChange?: (editing: boolean) => void
   actions?: ReactNode
+  // Drawn when `row.info.agent` is set: the card then leads with the avatar and names the agent.
+  avatars?: AgentAvatars
+  // `member` is the one-row card a team draws under its lead.
+  variant?: 'card' | 'member'
+  // The state the avatar badge draws, for a folded lead standing in for its team.
+  badgeState?: SessionState
+  // Unread summed over a folded team's members, drawn with the team glyph beside the lead's own.
+  teamUnseen?: number
+  // A folded lead's members, drawn on its first line before the context ring.
+  teamTray?: ReactNode
+  // Draws a session with no agent in the agent card's shape (an engine-mark tile for the avatar), so a list mixing
+  // agents and plain sessions keeps one column.
+  tile?: boolean
   className?: string
 }
 
@@ -64,6 +79,12 @@ export function SessionItem({
   editing,
   onEditingChange,
   actions,
+  avatars,
+  variant = 'card',
+  badgeState,
+  teamUnseen = 0,
+  teamTray,
+  tile = false,
   className,
 }: SessionItemProps) {
   const { info } = row
@@ -87,6 +108,9 @@ export function SessionItem({
   ].filter((part): part is string => Boolean(part))
 
   const model = friendlyModel(info.model)
+  const status = statusLine(info.statusLabel)
+  // Its own approval or question, or (on a lead) a team member's: the one card that asks for an action.
+  const needsYou = row.state === 'attention' || row.teamState === 'attention' || badgeState === 'attention'
   const parts: ReactNode[] = []
   if (model) {
     parts.push(
@@ -95,6 +119,13 @@ export function SessionItem({
       </span>,
     )
   }
+  if (status) {
+    parts.push(
+      <span key="status" title={status} className="text-fg-3">
+        {status}
+      </span>,
+    )
+  }
   if (project !== undefined) {
     parts.push(
       <span key="project" title={projectTitle}>
@@ -125,6 +156,54 @@ export function SessionItem({
     },
   )
   const holdsOpenStep = steps.some((s) => s.key === activeStepKey)
+  const agent = info.agent
+  const label = agent ? agent.name : sessionLabel(info)
+  const editable = agent ? agent.name : (info.title ?? '')
+  const time = formatRelativeTime(info.lastActivityAt ?? info.createdAt)
+  const nameLabel =
+    isEditing && onRename ? (
+      <NameEditor
+        initial={editable}
+        placeholder={agent ? 'Agent name' : 'Session name'}
+        onCommit={(title) => {
+          setEditing(false)
+          if (title !== editable && (title || !agent)) {
+            onRename(title)
+          }
+        }}
+        onCancel={() => setEditing(false)}
+      />
+    ) : (
+      <span
+        onDoubleClick={
+          onRename && renameOn === 'doubleClick'
+            ? (e) => {
+                e.stopPropagation()
+                setEditing(true)
+              }
+            : undefined
+        }
+        className="min-w-0 shrink truncate text-body-sm font-medium tracking-[-0.005em] text-fg-1"
+      >
+        {label}
+      </span>
+    )
+  const unread =
+    row.unseen > 0 ? (
+      <span
+        // Prose, not rows: `unseen` counts messages a person has not read (`proseCount`).
+        title={`${row.unseen} new message${row.unseen === 1 ? '' : 's'}`}
+        className={cn(
+          'flex h-4 min-w-6 shrink-0 items-center justify-center rounded-full px-2',
+          'text-[0.75rem] leading-none tracking-[-0.005em] tabular-nums',
+          // Grey while the turn is still producing, accent once it has stopped: the badge's colour
+          // answers "is this waiting for me", and a working session is not yet.
+          row.state === 'working' ? 'bg-badge text-badge-fg' : 'bg-accent text-accent-fg',
+        )}
+      >
+        {row.unseen}
+      </span>
+    ) : null
 
   return (
     <div
@@ -152,79 +231,118 @@ export function SessionItem({
       className={cn(
         'group flex w-full cursor-pointer flex-col p-1 text-left outline-none',
         'rounded-[4px] transition-colors focus-visible:ring-2 focus-visible:ring-ring',
-        holdsOpenStep ? 'bg-row-selected-weak' : active ? 'bg-row-selected' : 'hover:bg-row-hover',
+        needsYou
+          ? cn('bg-row-attention', active && 'ring-1 ring-accent ring-inset')
+          : holdsOpenStep
+            ? 'bg-row-selected-weak'
+            : active
+              ? 'bg-row-selected'
+              : 'hover:bg-row-hover',
         className,
       )}
     >
-      <div className={cn('flex flex-col gap-1 py-0.5 pr-0.5 pl-1.5', info.engineAsleep && 'opacity-60')}>
-        <div className="flex h-5 items-center gap-1.5 overflow-hidden">
-          <Gutter>
-            <SessionStatusIcon row={row} />
-          </Gutter>
-          {isEditing && onRename ? (
-            <NameEditor
-              initial={info.title ?? ''}
-              onCommit={(title) => {
-                setEditing(false)
-                if (title !== (info.title ?? '')) {
-                  onRename(title)
-                }
-              }}
-              onCancel={() => setEditing(false)}
-            />
-          ) : (
-            <span
-              onDoubleClick={
-                onRename && renameOn === 'doubleClick'
-                  ? (e) => {
-                      e.stopPropagation()
-                      setEditing(true)
-                    }
-                  : undefined
-              }
-              className="min-w-0 flex-1 truncate text-body-sm font-medium tracking-[-0.005em] text-fg-1"
-            >
-              {sessionLabel(info)}
+      {agent && variant === 'member' ? (
+        <div className={cn('flex h-6 items-center gap-1.5 overflow-hidden py-0.5 pr-0.5 pl-1.5', info.engineAsleep && 'opacity-60')}>
+          <AgentAvatar row={row} image={avatarOf(avatars, agent)} size={22} />
+          {nameLabel}
+          {status ? (
+            <span title={status} className="min-w-0 flex-1 truncate text-body-sm text-fg-3">
+              {status}
             </span>
+          ) : (
+            <span className="flex-1" />
           )}
-          {row.unseen > 0 ? (
-            <span
-              // Prose, not rows: `unseen` counts messages a person has not read (`proseCount`).
-              title={`${row.unseen} new message${row.unseen === 1 ? '' : 's'}`}
-              className={cn(
-                'flex h-4 min-w-6 shrink-0 items-center justify-center rounded-full px-2',
-                'text-[0.75rem] leading-none tracking-[-0.005em] tabular-nums',
-                // Grey while the turn is still producing, accent once it has stopped: the badge's colour
-                // answers "is this waiting for me", and a working session is not yet.
-                row.state === 'working' ? 'bg-badge text-badge-fg' : 'bg-accent text-accent-fg',
+          {unread}
+          <span className="shrink-0 text-body-sm text-fg-4">{time}</span>
+          {actions}
+        </div>
+      ) : agent || tile ? (
+        <div className={cn('flex items-center gap-2 py-0.5 pr-0.5 pl-1.5', info.engineAsleep && 'opacity-60')}>
+          <AgentAvatar row={row} image={avatarOf(avatars, agent)} state={badgeState} />
+          <div className="flex min-w-0 flex-1 flex-col gap-1">
+            <div className="flex h-5 items-center gap-1.5 overflow-hidden">
+              {nameLabel}
+              {agent?.leads ? <LeadChip /> : null}
+              {agent ? <span className="w-max max-w-max min-w-0 grow basis-0 truncate text-label text-fg-4/70">{time}</span> : null}
+              <span className="flex-1" />
+              {unread}
+              {teamUnseen > 0 ? (
+                <span
+                  title={`${teamUnseen} new message${teamUnseen === 1 ? '' : 's'} in the team`}
+                  className="flex h-4 shrink-0 items-center gap-0.5 rounded-full bg-accent px-1.5 text-[0.75rem] leading-none text-accent-fg tabular-nums"
+                >
+                  <Users className="size-3" />
+                  {teamUnseen}
+                </span>
+              ) : null}
+              {teamTray}
+              <ContextRing usage={info.contextUsage} engine={engine} size={16} className="p-0.5" />
+            </div>
+            <div className="flex h-5 items-center gap-1.5 overflow-hidden text-body-sm tracking-[-0.005em]">
+              {agent ? (
+                <>
+                  {model ? <span className={cn('shrink-0', vendorTextClass(engine, info.model))}>{model}</span> : null}
+                  {status ? (
+                    <span title={status} className="min-w-0 truncate text-fg-3">
+                      {model ? '· ' : ''}
+                      {status}
+                    </span>
+                  ) : null}
+                </>
+              ) : (
+                <>
+                  <span className="min-w-0 truncate text-fg-4">
+                    {parts.map((part, i) => (
+                      <Fragment key={i}>
+                        {i > 0 ? ' · ' : ''}
+                        {part}
+                      </Fragment>
+                    ))}
+                  </span>
+                  <span className="shrink-0 text-fg-4">
+                    {parts.length > 0 ? '· ' : ''}
+                    {time}
+                  </span>
+                </>
               )}
-            >
-              {row.unseen}
-            </span>
-          ) : null}
-          <ContextRing usage={info.contextUsage} engine={engine} size={16} className="p-0.5" />
+              <span className="min-w-0 flex-1" />
+              {actions}
+            </div>
+          </div>
         </div>
+      ) : (
+        <div className={cn('flex flex-col gap-1 py-0.5 pr-0.5 pl-1.5', info.engineAsleep && 'opacity-60')}>
+          <div className="flex h-5 items-center gap-1.5 overflow-hidden">
+            <Gutter>
+              <SessionStatusIcon row={row} />
+            </Gutter>
+            {nameLabel}
+            <span className="flex-1" />
+            {unread}
+            <ContextRing usage={info.contextUsage} engine={engine} size={16} className="p-0.5" />
+          </div>
 
-        <div className="flex h-5 items-center gap-1.5 overflow-hidden text-body-sm tracking-[-0.005em]">
-          <Gutter>
-            <EngineIcon engine={engine} model={info.model} className={cn('size-4', vendorMarkClass(engine, info.model))} />
-          </Gutter>
-          <span className="min-w-0 truncate text-fg-4">
-            {parts.map((part, i) => (
-              <Fragment key={i}>
-                {i > 0 ? ' · ' : ''}
-                {part}
-              </Fragment>
-            ))}
-          </span>
-          <span className="shrink-0 text-fg-4">
-            {parts.length > 0 ? '· ' : ''}
-            {formatRelativeTime(info.lastActivityAt ?? info.createdAt)}
-          </span>
-          <span className="min-w-0 flex-1" />
-          {actions}
+          <div className="flex h-5 items-center gap-1.5 overflow-hidden text-body-sm tracking-[-0.005em]">
+            <Gutter>
+              <EngineIcon engine={engine} model={info.model} className={cn('size-4', vendorMarkClass(engine, info.model))} />
+            </Gutter>
+            <span className="min-w-0 truncate text-fg-4">
+              {parts.map((part, i) => (
+                <Fragment key={i}>
+                  {i > 0 ? ' · ' : ''}
+                  {part}
+                </Fragment>
+              ))}
+            </span>
+            <span className="shrink-0 text-fg-4">
+              {parts.length > 0 ? '· ' : ''}
+              {time}
+            </span>
+            <span className="min-w-0 flex-1" />
+            {actions}
+          </div>
         </div>
-      </div>
+      )}
 
       {steps.length > 0 ? (
         <div className="flex flex-col">
@@ -241,7 +359,17 @@ function Gutter({ children }: { children: ReactNode }) {
   return <span className="flex size-4 shrink-0 items-center justify-center">{children}</span>
 }
 
-function NameEditor({ initial, onCommit, onCancel }: { initial: string; onCommit: (title: string) => void; onCancel: () => void }) {
+function NameEditor({
+  initial,
+  placeholder,
+  onCommit,
+  onCancel,
+}: {
+  initial: string
+  placeholder: string
+  onCommit: (title: string) => void
+  onCancel: () => void
+}) {
   const [value, setValue] = useState(initial)
   const ref = useRef<HTMLInputElement>(null)
   useEffect(() => {
@@ -261,8 +389,8 @@ function NameEditor({ initial, onCommit, onCancel }: { initial: string; onCommit
       ref={ref}
       value={value}
       spellCheck={false}
-      placeholder="Session name"
-      aria-label="Session name"
+      placeholder={placeholder}
+      aria-label={placeholder}
       onClick={(e) => e.stopPropagation()}
       onDoubleClick={(e) => e.stopPropagation()}
       onChange={(e) => setValue(e.target.value)}
@@ -287,3 +415,7 @@ function NameEditor({ initial, onCommit, onCancel }: { initial: string; onCommit
     />
   )
 }
+
+export function statusLine(label: SessionInfo['statusLabel']): string | undefined {
+  return label ? (label.emoji ? `${label.emoji} ${label.text}` : label.text) : undefined
+}

package/src/index.ts

@@ -164,6 +164,7 @@ export {
   type GroupTarget,
   type SessionBrowserProps,
 } from './components/agent/SessionBrowser.tsx'
+export { teamDropRefusal, type TeamMove } from './lib/team-drop.ts'
 export {
   STEP_DISPLAY_OPTIONS,
   SessionFilters,
@@ -173,6 +174,16 @@ export {
   type SessionFiltersProps,
 } from './components/agent/SessionFilters.tsx'
 export { SessionItem, type SelectModifiers, type SessionItemProps } from './components/agent/SessionItem.tsx'
+export {
+  AgentAvatar,
+  AgentHeading,
+  LeadChip,
+  avatarOf,
+  type AgentAvatarImage,
+  type AgentAvatarProps,
+  type AgentAvatars,
+  type AgentHeadingProps,
+} from './components/agent/AgentAvatar.tsx'
 export { SessionStatusIcon } from './components/agent/SessionStatusIcon.tsx'
 export { EngineIcon, engineMark, vendorMarkClass, vendorTextClass } from './components/agent/EngineIcon.tsx'
 export {

package/src/lib/team-drop.ts

@@ -0,0 +1,65 @@
+import type { SessionRow } from '@workerdeck/protocol'
+
+export type DropZone = 'before' | 'join' | 'after'
+
+// What a drop asks of the host: `lead: null` leaves the team. Joining renumbers the team densely from 0, so
+// `siblings` lists the other members whose `order` changes; teams are small and most of them never moved.
+export type TeamMove = { row: SessionRow; lead: SessionRow | null; order?: number; siblings?: { row: SessionRow; order: number }[] }
+
+export function dropZone(offsetY: number, height: number): DropZone {
+  if (height <= 0) {
+    return 'join'
+  }
+  const at = offsetY / height
+  return at < 0.25 ? 'before' : at > 0.75 ? 'after' : 'join'
+}
+
+// Mirrors the gateway's `leadRefusal`, so a drag can say no before it asks; the 409 stays the authority.
+export function teamDropRefusal(dragged: SessionRow, lead: SessionRow): string | undefined {
+  const mover = dragged.info.agent
+  const target = lead.info.agent
+  if (dragged.hostId !== lead.hostId) {
+    return 'a team stays on one gateway'
+  }
+  if (!target) {
+    return 'only an agent can lead a team'
+  }
+  if (mover?.id === target.id || dragged.info.id === lead.info.id) {
+    return 'an agent cannot lead its own team'
+  }
+  if (target.lead !== undefined) {
+    return `${target.name} is a member of a team; teams are one level deep`
+  }
+  if (mover?.leads) {
+    return `${mover.name} leads a team; teams are one level deep`
+  }
+  return undefined
+}
+
+// The move a drop over a member asks for: join (or reorder within) that member's team, at the member's place.
+export function memberDrop(dragged: SessionRow, lead: SessionRow, member: SessionRow, zone: DropZone): TeamMove | string {
+  const refusal = teamDropRefusal(dragged, lead)
+  if (refusal) {
+    return refusal
+  }
+  const others = (lead.members ?? []).filter((row) => row.info.id !== dragged.info.id || row.hostId !== dragged.hostId)
+  const at = others.findIndex((row) => row.info.id === member.info.id && row.hostId === member.hostId)
+  const index = at < 0 ? others.length : zone === 'before' ? at : at + 1
+  return placeMember(dragged, lead, others, index)
+}
+
+export function joinDrop(dragged: SessionRow, lead: SessionRow): TeamMove | string {
+  const refusal = teamDropRefusal(dragged, lead)
+  if (refusal) {
+    return refusal
+  }
+  const others = (lead.members ?? []).filter((row) => row.info.id !== dragged.info.id || row.hostId !== dragged.hostId)
+  return placeMember(dragged, lead, others, others.length)
+}
+
+function placeMember(dragged: SessionRow, lead: SessionRow, others: readonly SessionRow[], index: number): TeamMove {
+  const siblings = others
+    .map((row, i) => ({ row, order: i < index ? i : i + 1 }))
+    .filter(({ row, order }) => row.info.agent?.order !== order)
+  return { row: dragged, lead, order: index, ...(siblings.length ? { siblings } : {}) }
+}

package/src/styles/theme.css

@@ -65,6 +65,9 @@
   --row-active: rgb(0 0 0 / 0.08);
   --row-selected: #cfe4f7;
   --row-selected-weak: #e4e6f1;
+  /* A card that is waiting on the person: an approval or a question, its own or a team member's. As loud as
+     the selection, in the warning hue, because it is the one card that asks for an action. */
+  --row-attention: #fbdcb8;
 
   /* A count badge that is NOT an alert. The unread badge wears `--accent`
      because unread is a call to look; a plain count (how many sub-agents, how
@@ -187,6 +190,7 @@
   --row-active: rgb(255 255 255 / 0.1);
   --row-selected: #04395e;
   --row-selected-weak: #37373d;
+  --row-attention: #5c3906;
 
   /* See the light block. */
   --badge: #616161;
@@ -352,6 +356,7 @@
   --color-row-active: var(--row-active);
   --color-row-selected: var(--row-selected);
   --color-row-selected-weak: var(--row-selected-weak);
+  --color-row-attention: var(--row-attention);
   --color-badge: var(--badge);
   --color-badge-fg: var(--badge-fg);
   /* Named code-bg (not code) so it can't shadow the --text-code font-size token:
@@ -666,6 +671,23 @@
   opacity: 0;
   animation: wd-hold-appear 150ms ease-out 600ms forwards;
 }
+@keyframes wd-avatar-strip {
+  to {
+    background-position-x: var(--wd-strip-end);
+  }
+}
+.wd-avatar-strip {
+  image-rendering: pixelated;
+  background-repeat: no-repeat;
+  animation-name: wd-avatar-strip;
+  animation-timing-function: steps(var(--wd-strip-steps));
+  animation-iteration-count: infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .wd-avatar-strip {
+    animation: none;
+  }
+}
 
 @keyframes prompt-area-chip-ripple {
   0% {