@workerdeck/ui 3.3.0 → 3.5.0

package/build/workspace.d.mts

@@ -1,4 +1,4 @@
-import { r as SessionPanelProps } from "./SessionPanel-BNNc8grK.mjs";
+import { r as SessionPanelProps } from "./SessionPanel-DIi4sEgh.mjs";
 import { CSSProperties } from "react";
 import { ShellInfo } from "@workerdeck/protocol";
 import { OpenFile, UseHostFileSearchResult, UseHostFileTreeResult } from "@workerdeck/react";

package/build/workspace.mjs

@@ -1,4 +1,4 @@
-import { $t as Spinner, En as Input, N as ShellTerminal, Zt as Splitter, i as SessionPanel, in as TooltipProvider, jn as cn, kn as Button, n as usePathLinks, nn as Tip, q as EntryIcon, t as resolveAgainstCwd } from "./use-path-links-Cby4i_VL.mjs";
+import { $t as Splitter, N as ShellTerminal, Nn as cn, On as Input, Y as EntryIcon, i as SessionPanel, in as Tip, jn as Button, n as usePathLinks, on as TooltipProvider, t as resolveAgainstCwd, tn as Spinner } from "./use-path-links-WCsysQPy.mjs";
 import { m as formatBytes } from "./status-kmsBhuFG.mjs";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workerdeck/ui",
-  "version": "3.3.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/protocol": "3.3.0",
-    "@workerdeck/react": "3.3.0",
-    "@workerdeck/client": "3.3.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>
+  )
+}

package/src/components/agent/Composer.tsx

@@ -39,6 +39,8 @@ export type ComposerHandle = {
 
 export interface ComposerProps {
   onSend: (text: string, attachmentIds: string[]) => void
+  // Present while a foreground command the engine can background is running: ⌥↵ sends and moves it to the background.
+  onSendNow?: (text: string, attachmentIds: string[]) => void
   onInterrupt: () => void
   busy: boolean
   disabled?: boolean
@@ -70,6 +72,7 @@ export interface ComposerProps {
 
 export function Composer({
   onSend,
+  onSendNow,
   onInterrupt,
   busy,
   disabled,
@@ -184,7 +187,7 @@ export function Composer({
             rankPeerSessions(query, peers).map((peer) => ({
               value: peer.slug,
               label: peer.label,
-              description: [peer.engine, peer.project, peer.status].filter(Boolean).join(' · '),
+              description: [peer.gateway, peer.engine, peer.project, peer.status].filter(Boolean).join(' · '),
               icon: <Users className="size-3.5 text-fg-3" />,
             })),
           onSelect: (suggestion) => suggestion.value,
@@ -214,7 +217,7 @@ export function Composer({
   const staged = attachments?.items ?? []
   const canSend = !disabled && (!isEmpty || staged.length > 0) && !attachments?.uploading && !attachments?.hasFailure
 
-  const submit = () => {
+  const submit = (now = false) => {
     if (!canSend) {
       return
     }
@@ -230,7 +233,8 @@ export function Composer({
       focus()
       return
     }
-    onSend(plainText.trim(), attachments?.readyIds ?? [])
+    const deliver = now && onSendNow ? onSendNow : onSend
+    deliver(plainText.trim(), attachments?.readyIds ?? [])
     attachments?.clear()
     draft?.clear()
     clear()
@@ -275,6 +279,11 @@ export function Composer({
             setHelpOpen(true)
             return
           }
+          if (e.key === 'Enter' && e.altKey && onSendNow && canSend) {
+            e.preventDefault()
+            submit(true)
+            return
+          }
           if (helpOpen) {
             setHelpOpen(false)
           }
@@ -351,9 +360,16 @@ export function Composer({
     </span>
   )
 
+  const sendNow =
+    onSendNow && canSend && !shellMode ? (
+      <button type="button" className="term-press term-link text-label" onClick={() => submit(true)}>
+        ⌥↵ send now - moves the running command to the background
+      </button>
+    ) : null
+
   const interrupting = busy && !canSend
   const submitButton = terminal ? (
-    <GlyphButton label="Send" disabled={!canSend} onClick={submit} tone={canSend ? 'blue' : undefined}>
+    <GlyphButton label="Send" disabled={!canSend} onClick={() => submit()} tone={canSend ? 'blue' : undefined}>
       ↵
     </GlyphButton>
   ) : interrupting ? (
@@ -361,7 +377,7 @@ export function Composer({
       <Square className="size-3" />
     </Button>
   ) : (
-    <Button size="icon-sm" aria-label="Send" className="rounded-full" disabled={!canSend} onClick={submit}>
+    <Button size="icon-sm" aria-label="Send" className="rounded-full" disabled={!canSend} onClick={() => submit()}>
       <ArrowUp className="size-4" />
     </Button>
   )
@@ -402,7 +418,7 @@ export function Composer({
       triggers={triggers}
       markdown={false}
       normalizeBullets={false}
-      onSubmit={submit}
+      onSubmit={() => submit()}
       disabled={disabled}
       placeholder={disabled ? 'Session ended' : shellMode ? SHELL_PLACEHOLDER : placeholder}
       minHeight={minHeight}
@@ -428,6 +444,12 @@ export function Composer({
           className={cn('term-composer', shellMode && 'term-composer-shell', disabled && 'opacity-60')}
         >
           <div className="term-composer-body">
+            {sendNow ? (
+              <div className="term-row">
+                <span aria-hidden className="term-gutter" />
+                {sendNow}
+              </div>
+            ) : null}
             {stagedStrip}
             <div className="term-row">
               {canAttach && !shellMode ? fileField : null}
@@ -464,6 +486,7 @@ export function Composer({
   return (
     <div data-slot="composer" className={cn('px-[var(--wd-composer-padding)] pb-[var(--wd-composer-padding)]', className)}>
       {helpRow}
+      {sendNow ? <div className="mx-auto mb-1 w-full max-w-[var(--wd-transcript-max-width)] text-text-muted">{sendNow}</div> : null}
       <div
         {...dropHandlers}
         className={cn(

package/src/components/agent/EffortSelect.tsx

@@ -0,0 +1,64 @@
+import type { EngineCapabilities, ModelOption } from '@workerdeck/protocol'
+import { Brain } from 'lucide-react'
+import { Select, SelectContent, SelectItem, SelectItemText, SelectTrigger, SelectValue } from '../ui/Select.tsx'
+import { cn } from '../../lib/utils.ts'
+import { matchModel } from './ModelSelect.tsx'
+
+const DEFAULT_VALUE = 'default'
+
+export function effortChoices(
+  models: readonly ModelOption[],
+  model: string | undefined,
+  capabilities: Pick<EngineCapabilities, 'reasoningEfforts'>,
+): readonly string[] {
+  return matchModel(models, model)?.reasoningEfforts ?? capabilities.reasoningEfforts ?? []
+}
+
+export interface EffortSelectProps {
+  efforts: readonly string[]
+  effort?: string | null
+  onEffortChange: (effort?: string) => void
+  variant?: 'toolbar' | 'form'
+  disabled?: boolean
+  className?: string
+}
+
+export function EffortSelect({ efforts, effort, onEffortChange, variant = 'toolbar', disabled, className }: EffortSelectProps) {
+  const items = [{ value: DEFAULT_VALUE, label: 'Default' }, ...efforts.map((value) => ({ value, label: value }))]
+  return (
+    <Select
+      items={items}
+      value={effort ?? null}
+      onValueChange={(value) => {
+        if (typeof value !== 'string' || value === effort) {
+          return
+        }
+        onEffortChange(value === DEFAULT_VALUE ? undefined : value)
+      }}
+      disabled={disabled}
+    >
+      <SelectTrigger
+        aria-label="Reasoning effort"
+        className={cn(
+          variant === 'toolbar' && 'h-6 max-w-32 border-transparent bg-transparent text-fg-3 hover:bg-surface-hover',
+          className,
+        )}
+      >
+        <span className={cn('flex items-center gap-1 truncate', variant === 'toolbar' && 'font-mono text-label')}>
+          <Brain className="size-3 shrink-0" />
+          <SelectValue placeholder="effort" />
+        </span>
+      </SelectTrigger>
+      <SelectContent className="min-w-40">
+        {items.map((item) => (
+          <SelectItem key={item.value} value={item.value}>
+            <SelectItemText>
+              <span className="font-medium">{item.label}</span>
+            </SelectItemText>
+            {item.value === DEFAULT_VALUE ? <span className="text-label text-fg-4">The model's configured default</span> : null}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}

package/src/components/agent/ModelSelect.tsx

@@ -39,7 +39,7 @@ function optionMatches(option: ModelOption, model: string): boolean {
   return token !== '' && token === family(dropVariant(option.value))
 }
 
-function matchModel(models: ModelOption[], model?: string): ModelOption | undefined {
+export function matchModel(models: readonly ModelOption[], model?: string): ModelOption | undefined {
   if (!model) {
     return undefined
   }