@workerdeck/ui 3.4.0 → 3.5.0

package/build/scoped.css

@@ -311,18 +311,27 @@
   .wd-root .right-4 {
     right: calc(var(--spacing) * 4);
   }
+  .wd-root .-bottom-1 {
+    bottom: calc(var(--spacing) * -1);
+  }
   .wd-root .bottom-0 {
     bottom: 0px;
   }
   .wd-root .bottom-2 {
     bottom: calc(var(--spacing) * 2);
   }
+  .wd-root .bottom-3 {
+    bottom: calc(var(--spacing) * 3);
+  }
   .wd-root .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
   .wd-root .bottom-full {
     bottom: 100%;
   }
+  .wd-root .-left-\[7px\] {
+    left: calc(7px * -1);
+  }
   .wd-root .left-0 {
     left: 0px;
   }
@@ -455,6 +464,12 @@
   .wd-root .ml-1 {
     margin-left: var(--spacing);
   }
+  .wd-root .ml-3 {
+    margin-left: calc(var(--spacing) * 3);
+  }
+  .wd-root .ml-3\.5 {
+    margin-left: calc(var(--spacing) * 3.5);
+  }
   .wd-root .ml-auto {
     margin-left: auto;
   }
@@ -501,6 +516,10 @@
     width: calc(var(--spacing) * 1.5);
     height: calc(var(--spacing) * 1.5);
   }
+  .wd-root .size-1\/2 {
+    width: calc(1 / 2 * 100%);
+    height: calc(1 / 2 * 100%);
+  }
   .wd-root .size-2 {
     width: calc(var(--spacing) * 2);
     height: calc(var(--spacing) * 2);
@@ -1003,6 +1022,9 @@
   .wd-root .rounded {
     border-radius: 0.25rem;
   }
+  .wd-root .rounded-\[3px\] {
+    border-radius: 3px;
+  }
   .wd-root .rounded-\[4px\] {
     border-radius: 4px;
   }
@@ -1064,6 +1086,12 @@
   .wd-root .border-\[var\(--wd-shell-accent\)\] {
     border-color: var(--wd-shell-accent);
   }
+  .wd-root .border-accent\/50 {
+    border-color: var(--accent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--accent) 50%, transparent);
+    }
+  }
   .wd-root .border-border {
     border-color: var(--border);
   }
@@ -1139,6 +1167,12 @@
   .wd-root .bg-accent-bg {
     background-color: var(--accent-bg);
   }
+  .wd-root .bg-accent\/10 {
+    background-color: var(--accent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--accent) 10%, transparent);
+    }
+  }
   .wd-root .bg-background {
     background-color: var(--background);
   }
@@ -1352,6 +1386,9 @@
   .wd-root .p-px {
     padding: 1px;
   }
+  .wd-root .px-0\.5 {
+    padding-inline: calc(var(--spacing) * 0.5);
+  }
   .wd-root .px-1 {
     padding-inline: var(--spacing);
   }
@@ -1475,6 +1512,9 @@
   .wd-root .pb-\[var\(--wd-composer-padding\)\] {
     padding-bottom: var(--wd-composer-padding);
   }
+  .wd-root .pl-1 {
+    padding-left: var(--spacing);
+  }
   .wd-root .pl-1\.5 {
     padding-left: calc(var(--spacing) * 1.5);
   }
@@ -1571,9 +1611,16 @@
   .wd-root .text-\[0\.75rem\] {
     font-size: 0.75rem;
   }
+  .wd-root .text-\[0\.625rem\] {
+    font-size: 0.625rem;
+  }
   .wd-root .text-\[9px\] {
     font-size: 9px;
   }
+  .wd-root .leading-3\.5 {
+    --tw-leading: calc(var(--spacing) * 3.5);
+    line-height: calc(var(--spacing) * 3.5);
+  }
   .wd-root .leading-4 {
     --tw-leading: calc(var(--spacing) * 4);
     line-height: calc(var(--spacing) * 4);
@@ -1790,6 +1837,10 @@
     --tw-shadow: var(--shadow-xs);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .wd-root .shadow-\[inset_0_-2px_0_0_var\(--color-accent\)\] {
+    --tw-shadow: inset 0 -2px 0 0 var(--tw-shadow-color, var(--color-accent));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .wd-root .shadow-\[inset_0_2px_0_0_var\(--color-accent\)\] {
     --tw-shadow: inset 0 2px 0 0 var(--tw-shadow-color, var(--color-accent));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1810,10 +1861,23 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .wd-root .ring-1 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .wd-root .ring-2 {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .wd-root .ring-accent {
+    --tw-ring-color: var(--accent);
+  }
+  .wd-root .ring-danger\/60 {
+    --tw-ring-color: var(--danger);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--danger) 60%, transparent);
+    }
+  }
   .wd-root .ring-ring\/30 {
     --tw-ring-color: var(--ring);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1828,6 +1892,10 @@
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .wd-root .grayscale {
+    --tw-grayscale: grayscale(100%);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .wd-root .backdrop-blur-\[1px\] {
     --tw-backdrop-blur: blur(1px);
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -1906,6 +1974,9 @@
   .wd-root .\[counter-reset\:line\] {
     counter-reset: line;
   }
+  .wd-root .\[image-rendering\:pixelated\] {
+    image-rendering: pixelated;
+  }
   @media (hover: hover) {
     .wd-root .group-hover\:block:is(:where(.group):hover *) {
       display: block;
@@ -3424,6 +3495,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-root .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-root .wd-avatar-strip {
+    animation: none;
+  }
+}
 @keyframes prompt-area-chip-ripple {
   0% {
     transform: scale(0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workerdeck/ui",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "type": "module",
   "description": "Styled agent-control component library for WorkerDeck: session panel, transcript with streaming, tool-call cards, permission prompts, session list, composer. Tailwind v4 + Base UI + cva. Pairs with the headless @workerdeck/react layer.",
   "license": "MIT",
@@ -39,9 +39,9 @@
     "streamdown": "^2.6.0",
     "tailwind-merge": "^3.7.0",
     "use-stick-to-bottom": "^1.1.6",
-    "@workerdeck/client": "3.4.0",
-    "@workerdeck/react": "3.4.0",
-    "@workerdeck/protocol": "3.4.0"
+    "@workerdeck/protocol": "3.5.0",
+    "@workerdeck/client": "3.5.0",
+    "@workerdeck/react": "3.5.0"
   },
   "peerDependencies": {
     "monaco-editor": "^0.56.0",

package/src/components/agent/AgentAvatar.tsx

@@ -0,0 +1,117 @@
+import type { CSSProperties } from 'react'
+import type { AgentRef, SessionRow, SessionState } from '@workerdeck/protocol'
+import { EngineIcon, vendorMarkClass } from './EngineIcon.tsx'
+import { SessionStatusIcon } from './SessionStatusIcon.tsx'
+import { cn } from '../../lib/utils.ts'
+
+export type AgentAvatarImage = { still: string; busy?: { src: string; durations: number[] } }
+
+// Keyed by `AgentRef.avatar`, the gateway path: the host fetches with its own credentials and hands over data URLs.
+export type AgentAvatars = Record<string, AgentAvatarImage>
+
+export function avatarOf(avatars: AgentAvatars | undefined, agent: AgentRef | undefined): AgentAvatarImage | undefined {
+  return agent?.avatar === undefined ? undefined : avatars?.[agent.avatar]
+}
+
+export interface AgentAvatarProps {
+  row: SessionRow
+  image?: AgentAvatarImage
+  size?: number
+  // The state the corner badge draws; a folded lead passes its team's most urgent one.
+  state?: SessionState
+  badge?: boolean
+  className?: string
+}
+
+export function AgentAvatar({ row, image, size = 32, state, badge = true, className }: AgentAvatarProps) {
+  const { info } = row
+  const shown = state ?? row.state
+  const busy = shown === 'working' && image?.busy && image.busy.durations.length > 1 ? image.busy : undefined
+  const asleep = info.engineAsleep === true
+  const engine = info.engine ?? 'claude'
+  const badgeSize = size >= 28 ? 14 : 11
+  return (
+    <span
+      data-slot="agent-avatar"
+      className={cn('relative inline-flex shrink-0', className)}
+      style={{ width: size, height: size }}
+      title={info.agent?.name}
+    >
+      {busy ? (
+        <span
+          aria-hidden
+          className="wd-avatar-strip size-full rounded-[4px]"
+          style={
+            {
+              backgroundImage: `url(${busy.src})`,
+              backgroundSize: `${busy.durations.length * size}px ${size}px`,
+              '--wd-strip-end': `-${busy.durations.length * size}px`,
+              '--wd-strip-steps': busy.durations.length,
+              animationDuration: `${busy.durations.reduce((sum, ms) => sum + ms, 0)}ms`,
+            } as CSSProperties
+          }
+        />
+      ) : image ? (
+        <img
+          src={image.still}
+          alt=""
+          draggable={false}
+          className={cn('size-full rounded-[4px] [image-rendering:pixelated]', asleep && 'opacity-60 grayscale')}
+        />
+      ) : (
+        <span className="flex size-full items-center justify-center rounded-[4px] border border-dashed border-border">
+          <EngineIcon engine={engine} model={info.model} className={cn('size-1/2', vendorMarkClass(engine, info.model))} />
+        </span>
+      )}
+      {badge && (shown !== 'idle' || asleep) ? (
+        <span
+          className="absolute -right-1 -bottom-1 flex items-center justify-center rounded-full bg-bg"
+          style={{ width: badgeSize, height: badgeSize }}
+        >
+          <SessionStatusIcon row={{ ...row, state: shown }} className="size-full p-px" />
+        </span>
+      ) : null}
+    </span>
+  )
+}
+
+export function LeadChip({ className }: { className?: string }) {
+  return (
+    <span
+      className={cn(
+        'shrink-0 rounded-[3px] border border-accent/50 px-1 text-[0.625rem] leading-3.5 font-medium tracking-wide text-accent',
+        className,
+      )}
+    >
+      LEAD
+    </span>
+  )
+}
+
+export interface AgentHeadingProps {
+  row: SessionRow
+  image?: AgentAvatarImage
+  // Overrides `AgentRef.conversation`, which a gateway sends from the second conversation on.
+  conversation?: number
+  className?: string
+}
+
+// A session panel's title for an agent: avatar, name, its place in a team. Plain sessions keep the host's own title.
+export function AgentHeading({ row, image, conversation, className }: AgentHeadingProps) {
+  const agent = row.info.agent
+  if (!agent) {
+    return null
+  }
+  const n = conversation ?? agent.conversation ?? 1
+  const detail = [agent.lead !== undefined && agent.team ? `${agent.team} team` : undefined, `conversation ${n}`]
+    .filter(Boolean)
+    .join(' · ')
+  return (
+    <span data-slot="agent-heading" className={cn('flex min-w-0 items-center gap-2', className)}>
+      <AgentAvatar row={row} image={image} size={24} />
+      <span className="truncate text-body-sm font-medium text-fg-1">{agent.name}</span>
+      {agent.leads ? <LeadChip /> : null}
+      {detail ? <span className="shrink-0 text-label text-fg-4">{detail}</span> : null}
+    </span>
+  )
+}