@workerdeck/ui 3.5.0 → 3.6.1

package/build/scoped.css

@@ -440,6 +440,9 @@
   .wd-root .-mr-1 {
     margin-right: calc(var(--spacing) * -1);
   }
+  .wd-root .-mr-1\.5 {
+    margin-right: calc(var(--spacing) * -1.5);
+  }
   .wd-root .mr-1 {
     margin-right: var(--spacing);
   }
@@ -697,6 +700,9 @@
   .wd-root .w-36 {
     width: calc(var(--spacing) * 36);
   }
+  .wd-root .w-44 {
+    width: calc(var(--spacing) * 44);
+  }
   .wd-root .w-48 {
     width: calc(var(--spacing) * 48);
   }
@@ -757,6 +763,9 @@
   .wd-root .max-w-full {
     max-width: 100%;
   }
+  .wd-root .max-w-max {
+    max-width: max-content;
+  }
   .wd-root .max-w-md {
     max-width: var(--container-md);
   }
@@ -817,6 +826,9 @@
   .wd-root .grow {
     flex-grow: 1;
   }
+  .wd-root .basis-0 {
+    flex-basis: 0px;
+  }
   .wd-root .border-collapse {
     border-collapse: collapse;
   }
@@ -891,6 +903,9 @@
   .wd-root .appearance-none {
     appearance: none;
   }
+  .wd-root .grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
   .wd-root .flex-col {
     flex-direction: column;
   }
@@ -1022,6 +1037,9 @@
   .wd-root .rounded {
     border-radius: 0.25rem;
   }
+  .wd-root .rounded-\[2px\] {
+    border-radius: 2px;
+  }
   .wd-root .rounded-\[3px\] {
     border-radius: 3px;
   }
@@ -1293,6 +1311,9 @@
   .wd-root .bg-red-100 {
     background-color: var(--color-red-100);
   }
+  .wd-root .bg-row-attention {
+    background-color: var(--row-attention);
+  }
   .wd-root .bg-row-hover\/50 {
     background-color: var(--row-hover);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1878,12 +1899,22 @@
       --tw-ring-color: color-mix(in oklab, var(--danger) 60%, transparent);
     }
   }
+  .wd-root .ring-fg-3 {
+    --tw-ring-color: var(--fg-3);
+  }
   .wd-root .ring-ring\/30 {
     --tw-ring-color: var(--ring);
     @supports (color: color-mix(in lab, red, red)) {
       --tw-ring-color: color-mix(in oklab, var(--ring) 30%, transparent);
     }
   }
+  .wd-root .ring-offset-1 {
+    --tw-ring-offset-width: 1px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  }
+  .wd-root .ring-offset-surface {
+    --tw-ring-offset-color: var(--surface);
+  }
   .wd-root .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -1977,6 +2008,9 @@
   .wd-root .\[image-rendering\:pixelated\] {
     image-rendering: pixelated;
   }
+  .wd-root .ring-inset {
+    --tw-ring-inset: inset;
+  }
   @media (hover: hover) {
     .wd-root .group-hover\:block:is(:where(.group):hover *) {
       display: block;
@@ -2145,6 +2179,13 @@
     .wd-root .hover\:opacity-100:hover {
       opacity: 100%;
     }
+    .wd-root .hover\:ring-1:hover {
+      --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 .hover\:ring-border:hover {
+      --tw-ring-color: var(--border);
+    }
   }
   .wd-root .focus-visible\:border-ring:focus-visible {
     border-color: var(--ring);
@@ -3212,6 +3253,7 @@
   --row-active: rgb(0 0 0 / 0.08);
   --row-selected: #cfe4f7;
   --row-selected-weak: #e4e6f1;
+  --row-attention: #fbdcb8;
   --badge: #c4c4c4;
   --badge-fg: #333333;
   --border: #ebebeb;
@@ -3265,6 +3307,7 @@
   --row-active: rgb(255 255 255 / 0.1);
   --row-selected: #04395e;
   --row-selected-weak: #37373d;
+  --row-attention: #5c3906;
   --badge: #616161;
   --badge-fg: #cccccc;
   --border: #1f1f1f;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workerdeck/ui",
-  "version": "3.5.0",
+  "version": "3.6.1",
   "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/protocol": "3.5.0",
-    "@workerdeck/client": "3.5.0",
-    "@workerdeck/react": "3.5.0"
+    "@workerdeck/client": "3.6.1",
+    "@workerdeck/react": "3.6.1",
+    "@workerdeck/protocol": "3.6.1"
   },
   "peerDependencies": {
     "monaco-editor": "^0.56.0",

package/src/components/agent/SessionBrowser.tsx

@@ -143,6 +143,8 @@ export function SessionBrowser({
       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)}
@@ -246,7 +248,7 @@ 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}

package/src/components/agent/SessionGroups.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
 import type { DragEvent, HTMLAttributes, ReactNode } from 'react'
-import { GripVertical, Pencil, Plus, Trash2 } from 'lucide-react'
+import { GripVertical, Image as ImageIcon, Pencil, Plus, Trash2 } from 'lucide-react'
 import {
   addCustomGroup,
   moveCustomGroup,
@@ -9,11 +9,15 @@ import {
   removeCustomGroup,
   renameCustomGroup,
   sessionKey,
+  styleCustomGroup,
+  customGroupColor,
+  PROJECT_ACCENTS,
 } 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 { Popover, PopoverContent, PopoverTrigger } from '../ui/Popover.tsx'
 import { cn } from '../../lib/utils.ts'
 
 type DragItem = { kind: 'session'; key: string } | { kind: 'group'; id: string }
@@ -213,23 +217,29 @@ export function useGroupDrag(
       return id
     },
     rename: (id: string, name: string) => onChange(renameCustomGroup(groups, id, name)),
+    style: (id: string, look: { color?: string | null; icon?: string | null }) => onChange(styleCustomGroup(groups, id, look)),
     remove: (id: string) => onChange(removeCustomGroup(groups, id)),
   }
 }
 
 export function CustomGroupHeader({
   group,
+  look,
   editing,
   onEditingChange,
   onRename,
   onRemove,
+  onStyle,
   dragProps,
 }: {
   group: SessionGroup
+  // The stored group, for its colour and image; absent for the ungrouped bucket.
+  look?: CustomGroup
   editing: boolean
   onEditingChange: (editing: boolean) => void
   onRename: (name: string) => void
   onRemove: () => void
+  onStyle?: (look: { color?: string | null; icon?: string | null }) => void
   dragProps: HTMLAttributes<HTMLDivElement>
 }) {
   if (editing) {
@@ -242,9 +252,17 @@ export function CustomGroupHeader({
       {...dragProps}
       label={group.label ?? ''}
       count={group.rows.length}
+      caps={!custom}
       className={cn('group/heading', custom && 'cursor-grab')}
       onDoubleClick={custom ? () => onEditingChange(true) : undefined}
-      leading={custom ? <GripVertical className="-ml-1.5 size-3 opacity-0 group-hover/heading:opacity-60" /> : undefined}
+      leading={
+        custom ? (
+          <>
+            <GripVertical className="-mr-1.5 -ml-1.5 size-3 opacity-0 group-hover/heading:opacity-60" />
+            {look ? <GroupBadge group={look} onStyle={onStyle} /> : null}
+          </>
+        ) : undefined
+      }
       actions={
         custom ? (
           <>
@@ -298,6 +316,7 @@ export function GroupHeading({
   count,
   leading,
   actions,
+  caps = true,
   className,
   ...rest
 }: {
@@ -305,11 +324,13 @@ export function GroupHeading({
   count: number
   leading?: ReactNode
   actions?: ReactNode
+  // Off for a name the operator typed, which keeps its own case.
+  caps?: boolean
 } & HTMLAttributes<HTMLDivElement>) {
   return (
     <div {...rest} className={cn('group/heading flex min-h-5 items-center gap-2 px-2 text-label font-medium text-fg-4', className)}>
       {leading}
-      <span className="min-w-0 truncate uppercase tracking-wide">{label}</span>
+      <span className={cn('min-w-0 truncate', caps ? 'uppercase tracking-wide' : 'text-fg-3')}>{label}</span>
       <span className="text-fg-4/70">{count}</span>
       {actions ? (
         <span className="ml-auto flex items-center gap-0.5 opacity-0 transition-opacity group-hover/heading:opacity-100 focus-within:opacity-100">
@@ -356,3 +377,105 @@ export function NewGroupButton({ onClick }: { onClick: () => void }) {
     </Button>
   )
 }
+
+const ICON_PX = 64
+
+// A group's badge: its image, else its colour; pressing it picks either.
+export function GroupBadge({
+  group,
+  onStyle,
+}: {
+  group: CustomGroup
+  onStyle?: (look: { color?: string | null; icon?: string | null }) => void
+}) {
+  const [error, setError] = useState<string>()
+  const file = useRef<HTMLInputElement>(null)
+  const mark = group.icon ? (
+    <img src={group.icon} alt="" className="size-3.5 rounded-[3px] object-cover" draggable={false} />
+  ) : (
+    <span className="size-2 rounded-[2px]" style={{ background: customGroupColor(group) }} />
+  )
+  if (!onStyle) {
+    return <span className="flex size-3.5 shrink-0 items-center justify-center">{mark}</span>
+  }
+  return (
+    <Popover>
+      <PopoverTrigger
+        render={
+          <button
+            type="button"
+            aria-label={`Colour or image for ${group.name}`}
+            title="Colour or image"
+            onClick={(e) => e.stopPropagation()}
+            onDoubleClick={(e) => e.stopPropagation()}
+            className="flex size-3.5 shrink-0 items-center justify-center rounded-[3px] hover:ring-1 hover:ring-border"
+          >
+            {mark}
+          </button>
+        }
+      />
+      <PopoverContent align="start" className="flex w-44 flex-col gap-2">
+        <div className="grid grid-cols-4 gap-1.5">
+          {PROJECT_ACCENTS.map((color) => (
+            <button
+              key={color}
+              type="button"
+              aria-label={`Colour ${color}`}
+              onClick={() => onStyle({ color, icon: null })}
+              className={cn(
+                'h-6 rounded-[4px] ring-offset-1 ring-offset-surface',
+                !group.icon && customGroupColor(group) === color && 'ring-2 ring-fg-3',
+              )}
+              style={{ background: color }}
+            />
+          ))}
+        </div>
+        <input
+          ref={file}
+          type="file"
+          accept="image/*"
+          className="hidden"
+          onChange={(e) => {
+            const picked = e.target.files?.[0]
+            e.target.value = ''
+            if (!picked) {
+              return
+            }
+            setError(undefined)
+            void iconFromFile(picked)
+              .then((icon) => onStyle({ icon }))
+              .catch(() => setError('That image could not be read'))
+          }}
+        />
+        <Button variant="outline" size="xs" onClick={() => file.current?.click()}>
+          <ImageIcon />
+          Choose image…
+        </Button>
+        {group.icon ? (
+          <Button variant="ghost" size="xs" onClick={() => onStyle({ icon: null })}>
+            Remove image
+          </Button>
+        ) : null}
+        {error ? <span className="text-label text-danger">{error}</span> : null}
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+// Scaled to cover a 64 px square and re-encoded, so a photo from disk stores as a few kB in the view config.
+async function iconFromFile(file: File): Promise<string> {
+  const bitmap = await createImageBitmap(file)
+  const canvas = document.createElement('canvas')
+  canvas.width = ICON_PX
+  canvas.height = ICON_PX
+  const context = canvas.getContext('2d')
+  if (!context) {
+    throw new Error('no canvas')
+  }
+  const scale = Math.max(ICON_PX / bitmap.width, ICON_PX / bitmap.height)
+  const width = bitmap.width * scale
+  const height = bitmap.height * scale
+  context.drawImage(bitmap, (ICON_PX - width) / 2, (ICON_PX - height) / 2, width, height)
+  bitmap.close()
+  return canvas.toDataURL('image/png')
+}

package/src/components/agent/SessionItem.tsx

@@ -2,7 +2,7 @@ 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, SessionState, 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'
@@ -108,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(
@@ -116,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}>
@@ -221,7 +231,13 @@ 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,
       )}
     >
@@ -229,7 +245,13 @@ export function SessionItem({
         <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}
-          {info.title ? <span className="min-w-0 flex-1 truncate text-body-sm text-fg-3">{info.title}</span> : <span className="flex-1" />}
+          {status ? (
+            <span title={status} className="min-w-0 flex-1 truncate text-body-sm text-fg-3">
+              {status}
+            </span>
+          ) : (
+            <span className="flex-1" />
+          )}
           {unread}
           <span className="shrink-0 text-body-sm text-fg-4">{time}</span>
           {actions}
@@ -241,6 +263,7 @@ export function SessionItem({
             <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 ? (
@@ -258,19 +281,13 @@ export function SessionItem({
             <div className="flex h-5 items-center gap-1.5 overflow-hidden text-body-sm tracking-[-0.005em]">
               {agent ? (
                 <>
-                  {info.title ? <span className="min-w-0 truncate text-fg-4">{info.title}</span> : null}
-                  <span className="shrink-0 text-fg-4">
-                    {model ? (
-                      <>
-                        {info.title ? '· ' : ''}
-                        <span className={vendorTextClass(engine, info.model)}>{model}</span>
-                        {' · '}
-                      </>
-                    ) : info.title ? (
-                      '· '
-                    ) : null}
-                    {time}
-                  </span>
+                  {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}
                 </>
               ) : (
                 <>
@@ -398,3 +415,7 @@ function NameEditor({
     />
   )
 }
+
+export function statusLine(label: SessionInfo['statusLabel']): string | undefined {
+  return label ? (label.emoji ? `${label.emoji} ${label.text}` : label.text) : undefined
+}

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: