@workerdeck/ui 3.3.0 → 3.5.0

package/src/components/terminal/height.ts

@@ -4,6 +4,7 @@ import { compactionText, formatBytes, formatCost, formatDuration, toolInputPrevi
 import { taskChildItems, type TerminalBlock, type ToolCallItem } from './blocks.ts'
 import { IMAGE_BOX_LINES, hostImagePathOf } from './image-box.ts'
 import { collapsedResult } from './result-preview.ts'
+import { ELAPSED_WIDEST, liveTailLines, runStartedAt, runTailLines, toolBusy } from './live-tool.ts'
 import { shellBodyLines, shellFooterText, shellHeaderText } from './shell-row.ts'
 import { todoLine, todoPreview } from './todos.ts'
 import { isPeerSend, peerName, planRun, runSummary, taskSummary } from './tool-run.ts'
@@ -565,7 +566,11 @@ function toolRowHeight(item: ToolCallItem, m: CellMetrics, extraPx: number): Acc
   const todos = todoPreview(item.name, item.input)
   const preview = todos ? todos.summary : toolInputPreview(item.input)
   const backend = item.backend && item.backend !== 'server' ? ` · ${item.backend}` : ''
-  let acc = rowH(`${item.name}(${preview})${backend}`, m, { gutterCells: 2, extraPx })
+  const elapsed = toolBusy(item) && item.ts !== undefined ? ELAPSED_WIDEST : ''
+  let acc = rowH(`${item.name}(${preview})${backend}${elapsed}`, m, { gutterCells: 2, extraPx })
+  for (const line of liveTailLines(item)) {
+    acc = add(acc, rowH(line || ' ', m, { indentCells: 3, gutterCells: 3, extraPx }))
+  }
 
   const boxes = (item.result?.images?.length ?? 0) + (hostImagePathOf(item) === undefined ? 0 : 1)
   if (boxes > 0) {
@@ -680,7 +685,12 @@ export function blockHeight(block: TerminalBlock, m: CellMetrics): ComputedHeigh
       return itemHeight(plan.item, m)
     }
     const busy = plan.items.some((item) => item.status === 'running' || item.status === 'pending')
-    return rowH(runSummary(plan.items, busy), m)
+    const elapsed = runStartedAt(plan.items) === undefined ? '' : ELAPSED_WIDEST
+    let acc = rowH(runSummary(plan.items, busy) + elapsed, m)
+    for (const line of runTailLines(plan.items)) {
+      acc = add(acc, rowH(line || ' ', m, { indentCells: 3, gutterCells: 3 }))
+    }
+    return acc
   }
   return itemHeight(block.item, m)
 }

package/src/components/terminal/items.tsx

@@ -5,7 +5,8 @@ import { compactionText, formatBytes, formatCost, formatDuration, toolInputPrevi
 import { isMutatingTool } from '../../lib/tool-icon.ts'
 import { usePulse } from '../agent/pulse.tsx'
 import { PromptTokenText } from '../agent/PromptTokenText.tsx'
-import { ActionPlacementProvider, BookmarkAction, CopyAction, WithActions } from './affordances.tsx'
+import { ActionPlacementProvider, BackgroundAction, BookmarkAction, CopyAction, WithActions } from './affordances.tsx'
+import { canBackground, elapsedLabel, liveTailLines, runStartedAt, runTailLines } from './live-tool.ts'
 import { TerminalDiff } from './diff.tsx'
 import { TerminalMarkdown } from './markdown.tsx'
 import { usePeerNames } from './peer-names.tsx'
@@ -191,6 +192,9 @@ export function ToolRow({ item }: { item: ToolCallItem }) {
   const busy = status === 'running' || status === 'pending'
   const isError = status === 'failed' || item.result?.isError === true
   const pulse = usePulse(busy)
+  const now = useTicker(busy && item.ts !== undefined)
+  const elapsed = busy ? elapsedLabel(item.ts, now) : undefined
+  const tail = liveTailLines(item)
 
   const text = item.result?.text ?? ''
   const lines = text.trimEnd().split('\n')
@@ -214,6 +218,7 @@ export function ToolRow({ item }: { item: ToolCallItem }) {
       <WithActions
         actions={
           <>
+            {canBackground(item) ? <BackgroundAction toolUseId={item.id} /> : null}
             <BookmarkAction id={item.id} />
             {copyable ? <CopyAction text={copyable} label="Copy" /> : null}
           </>
@@ -225,10 +230,18 @@ export function ToolRow({ item }: { item: ToolCallItem }) {
               {title ?? item.name}
             </Ink>
             <Ink tone="dim">({todos ? todos.summary : toolInputPreview(item.input)})</Ink>
+            {elapsed ? (
+              <Ink tone="faint">
+                {' '}
+                ·{'\u00a0'}
+                {elapsed}
+              </Ink>
+            ) : null}
             {title && open ? <Ink tone="faint"> · {item.name}</Ink> : null}
             {item.backend && item.backend !== 'server' ? <Ink tone="faint"> · {item.backend}</Ink> : null}
           </Row>
         </Pressable>
+        <LiveTail lines={tail} />
         {hostPath !== undefined ? <TerminalHostImage path={hostPath} /> : null}
         {item.result?.images?.map((image) => (
           <TerminalImage key={image.partIndex} toolUseId={item.id} name={resultImageName(item.name, image)} image={image} />
@@ -373,14 +386,25 @@ export function ToolRunRow({ items }: { items: ToolCallItem[] }) {
   })
   const failed = runFailed(items)
   const pulse = usePulse(busy)
+  const startedAt = runStartedAt(items)
+  const now = useTicker(startedAt !== undefined)
+  const elapsed = elapsedLabel(startedAt, now)
 
   return (
     <div ref={reveal} className={open ? 'term-open' : undefined}>
       <Pressable onPress={() => setOpen((v) => !v)} expanded={open}>
         <Row glyph={busy ? pulse : undefined} glyphTone={busy ? 'mark' : undefined} tone={failed ? 'red' : 'dim'}>
           {busy ? <span className="term-shimmer">{runSummary(items, busy)}</span> : runSummary(items, busy)}
+          {elapsed ? (
+            <Ink tone="faint">
+              {' '}
+              ·{'\u00a0'}
+              {elapsed}
+            </Ink>
+          ) : null}
         </Row>
       </Pressable>
+      {open ? null : <LiveTail lines={runTailLines(items)} />}
       {open ? (
         <div>
           {items.map((item, index) => (
@@ -511,6 +535,14 @@ export function FileRow({ item, href }: { item: Extract<TranscriptItem, { kind:
   )
 }
 
+function LiveTail({ lines }: { lines: string[] }) {
+  return lines.map((line, index) => (
+    <Row key={index} indent={1} columns={3} glyph={index === 0 ? '⎿' : undefined} tone="faint">
+      {line || ' '}
+    </Row>
+  ))
+}
+
 export function useTicker(on: boolean): number {
   const [now, setNow] = useState(() => Date.now())
   useEffect(() => {

package/src/components/terminal/live-tool.ts

@@ -0,0 +1,71 @@
+import { formatDuration } from '../../lib/format.ts'
+import type { TranscriptItem } from '@workerdeck/react'
+import type { ToolCallItem } from './blocks.ts'
+
+export const LIVE_TAIL_LINES = 5
+export const ELAPSED_AFTER_MS = 5000
+export const SEND_NOW_AFTER_MS = 5000
+// The widest label the header grows by while busy, so a height estimate never undercounts a wrap.
+export const ELAPSED_WIDEST = ' ·\u00a059m\u00a059s'
+
+const BACKGROUNDABLE = new Set(['Bash', 'Task', 'Agent'])
+
+export function toolBusy(item: ToolCallItem): boolean {
+  const status = item.status ?? (item.result === undefined ? 'running' : 'settled')
+  return status === 'running' || status === 'pending'
+}
+
+export function liveTailLines(item: ToolCallItem): string[] {
+  if (!item.liveTail || !toolBusy(item)) {
+    return []
+  }
+  return item.liveTail.split('\n').slice(-LIVE_TAIL_LINES)
+}
+
+export function elapsedLabel(startedAt: number | undefined, now: number): string | undefined {
+  if (startedAt === undefined || now - startedAt < ELAPSED_AFTER_MS) {
+    return undefined
+  }
+  return formatDuration(Math.floor((now - startedAt) / 1000) * 1000).replace(' ', '\u00a0')
+}
+
+export function runStartedAt(items: readonly ToolCallItem[]): number | undefined {
+  let earliest: number | undefined
+  for (const item of items) {
+    if (toolBusy(item) && item.ts !== undefined && (earliest === undefined || item.ts < earliest)) {
+      earliest = item.ts
+    }
+  }
+  return earliest
+}
+
+export function canBackground(item: ToolCallItem): boolean {
+  return BACKGROUNDABLE.has(item.name) && item.parentToolUseId == null && toolBusy(item)
+}
+
+export function runTailLines(items: readonly ToolCallItem[]): string[] {
+  for (let index = items.length - 1; index >= 0; index--) {
+    const lines = liveTailLines(items[index]!)
+    if (lines.length > 0) {
+      return lines
+    }
+  }
+  return []
+}
+
+// Walks back only through the current turn: a running call is never older than the last prompt.
+// The earliest start among them, or 0 when a call carries no `ts`.
+export function backgroundableSince(items: readonly TranscriptItem[]): number | undefined {
+  let since: number | undefined
+  for (let index = items.length - 1; index >= 0; index--) {
+    const item = items[index]!
+    if (item.kind === 'user' && item.parentToolUseId == null) {
+      break
+    }
+    if (item.kind === 'tool_call' && canBackground(item)) {
+      const ts = item.ts ?? 0
+      since = since === undefined ? ts : Math.min(since, ts)
+    }
+  }
+  return since
+}

package/src/index.ts

@@ -123,6 +123,7 @@ export {
   type ComposerRow,
 } from './components/agent/composer-commands.ts'
 export { ModelSelect, type ModelSelectProps } from './components/agent/ModelSelect.tsx'
+export { EffortSelect, effortChoices, type EffortSelectProps } from './components/agent/EffortSelect.tsx'
 export {
   PERMISSION_MODES,
   PermissionModeSelect,
@@ -163,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,
@@ -172,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/terminal.css

@@ -483,9 +483,13 @@
 :is([data-terminal], [data-cards]) [data-slot='transcript-rows'] [data-index]:not(.absolute) {
   position: relative;
 }
-:is([data-terminal], [data-cards]) [data-slot='transcript-rows'] [data-index]:is(:hover, :focus-within) {
+:is([data-terminal], [data-cards]) [data-slot='transcript-rows'] [data-index]:focus-within {
   z-index: 1;
 }
+/* Above a focused row too: the row just clicked open keeps focus and would cover the bar beneath the hovered one. */
+:is([data-terminal], [data-cards]) [data-slot='transcript-rows'] [data-index]:hover {
+  z-index: 2;
+}
 @media (hover: none) {
   :is([data-terminal], [data-cards]) .term-actions {
     opacity: 1;
@@ -785,9 +789,12 @@ button.term-link {
  * it is the same `--bg`, and the row it covers is its own content.
  */
 [data-terminal] [data-slot='transcript-rows'] > [data-sticky-lane] {
-  z-index: 3;
   pointer-events: none;
 }
+/* Raised only while pinned: a raised idle lane covered the hover bar of the row above its prompt. */
+[data-terminal] [data-slot='transcript-rows'] > [data-sticky-lane]:has(> [data-sticky-headlane] > [data-stuck]) {
+  z-index: 3;
+}
 
 /* The prompt itself is *inside* the lane, not beneath it, so the lane's `none`
    reached it too and made a user message the one block in the transcript the

package/src/styles/theme.css

@@ -666,6 +666,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% {
@@ -743,9 +760,11 @@
  * row's first line, so it has no in-flow y to match, and the 1st prompt (no
  * gap) and every later one (pt-4/pt-2) share these rules unchanged. */
 [data-slot='transcript-rows'] > [data-sticky-lane='cards'] {
-  z-index: 3;
   pointer-events: none;
 }
+[data-slot='transcript-rows'] > [data-sticky-lane='cards']:has(> [data-sticky-headlane] > [data-stuck]) {
+  z-index: 3;
+}
 
 /* The head's own strip: the full lane, out of flow - see terminal.css for why
    sticky confinement wants the border box, not a cancelled margin box. */