@workerdeck/ui 3.2.0 → 3.4.0

package/src/components/agent/SessionGroups.tsx

@@ -0,0 +1,248 @@
+import { useState } from 'react'
+import type { DragEvent, HTMLAttributes, ReactNode } from 'react'
+import { GripVertical, Pencil, Plus, Trash2 } from 'lucide-react'
+import {
+  addCustomGroup,
+  moveCustomGroup,
+  moveToCustomGroup,
+  newCustomGroupId,
+  removeCustomGroup,
+  renameCustomGroup,
+} from '@workerdeck/protocol'
+import type { CustomGroup, SessionGroup } from '@workerdeck/protocol'
+import { Button } from '../ui/Button.tsx'
+import { Input } from '../ui/Input.tsx'
+import { cn } from '../../lib/utils.ts'
+
+type DragItem = { kind: 'session'; key: string } | { kind: 'group'; id: string }
+
+export type GroupDrag = ReturnType<typeof useGroupDrag>
+
+// The payload lives in state rather than `dataTransfer`, which is unreadable during `dragover`; `setData` is still
+// written because some engines refuse to start a drag without it.
+export function useGroupDrag(groups: readonly CustomGroup[], onChange: (groups: CustomGroup[]) => void) {
+  const [item, setItem] = useState<DragItem>()
+  const [over, setOver] = useState<string>()
+  const end = () => {
+    setItem(undefined)
+    setOver(undefined)
+  }
+  const start = (e: DragEvent, next: DragItem) => {
+    e.stopPropagation()
+    e.dataTransfer.effectAllowed = 'move'
+    e.dataTransfer.setData('text/plain', next.kind === 'session' ? next.key : next.id)
+    setItem(next)
+  }
+  const accept = (e: DragEvent, spot: string) => {
+    e.preventDefault()
+    e.stopPropagation()
+    e.dataTransfer.dropEffect = 'move'
+    setOver(spot)
+  }
+
+  function session(key: string, group: SessionGroup): HTMLAttributes<HTMLDivElement> {
+    return {
+      draggable: true,
+      onDragStart: (e) => start(e, { kind: 'session', key }),
+      onDragEnd: end,
+      onDragOver: (e) => {
+        if (item?.kind === 'session') {
+          accept(e, `row:${key}`)
+        }
+      },
+      onDrop: (e) => {
+        if (item?.kind !== 'session') {
+          return
+        }
+        e.preventDefault()
+        e.stopPropagation()
+        if (item.key !== key) {
+          onChange(moveToCustomGroup(groups, item.key, group.custom, group.custom ? key : undefined))
+        }
+        end()
+      },
+    }
+  }
+
+  function container(group: SessionGroup): HTMLAttributes<HTMLDivElement> {
+    return {
+      onDragOver: (e) => {
+        if (item) {
+          accept(e, `group:${group.key}`)
+        }
+      },
+      onDrop: (e) => {
+        e.preventDefault()
+        if (item?.kind === 'session') {
+          onChange(moveToCustomGroup(groups, item.key, group.custom))
+        } else if (item?.kind === 'group') {
+          onChange(moveCustomGroup(groups, item.id, group.custom))
+        }
+        end()
+      },
+    }
+  }
+
+  function header(group: SessionGroup): HTMLAttributes<HTMLDivElement> {
+    const id = group.custom
+    if (id === undefined) {
+      return {}
+    }
+    return { draggable: true, onDragStart: (e) => start(e, { kind: 'group', id }), onDragEnd: end }
+  }
+
+  return {
+    dragging: item !== undefined,
+    isOver: (spot: string) => over === spot,
+    session,
+    container,
+    header,
+    create: (name = 'New group') => {
+      const id = newCustomGroupId()
+      onChange(addCustomGroup(groups, name, id))
+      return id
+    },
+    rename: (id: string, name: string) => onChange(renameCustomGroup(groups, id, name)),
+    remove: (id: string) => onChange(removeCustomGroup(groups, id)),
+  }
+}
+
+export function CustomGroupHeader({
+  group,
+  editing,
+  onEditingChange,
+  onRename,
+  onRemove,
+  dragProps,
+}: {
+  group: SessionGroup
+  editing: boolean
+  onEditingChange: (editing: boolean) => void
+  onRename: (name: string) => void
+  onRemove: () => void
+  dragProps: HTMLAttributes<HTMLDivElement>
+}) {
+  if (editing) {
+    return <GroupNameInput initial={group.label ?? ''} onRename={onRename} onDone={() => onEditingChange(false)} />
+  }
+
+  const custom = group.custom !== undefined
+  return (
+    <GroupHeading
+      {...dragProps}
+      label={group.label ?? ''}
+      count={group.rows.length}
+      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}
+      actions={
+        custom ? (
+          <>
+            <HeadingAction label="Rename group" onClick={() => onEditingChange(true)}>
+              <Pencil className="size-3" />
+            </HeadingAction>
+            <HeadingAction label="Delete group" title="Delete the group - its sessions move to Ungrouped" onClick={onRemove}>
+              <Trash2 className="size-3" />
+            </HeadingAction>
+          </>
+        ) : undefined
+      }
+    />
+  )
+}
+
+function GroupNameInput({ initial, onRename, onDone }: { initial: string; onRename: (name: string) => void; onDone: () => void }) {
+  const [draft, setDraft] = useState(initial)
+  const commit = () => {
+    const name = draft.trim()
+    if (name && name !== initial) {
+      onRename(name)
+    }
+    onDone()
+  }
+  return (
+    <div className="px-2">
+      <Input
+        autoFocus
+        aria-label="Group name"
+        value={draft}
+        onFocus={(e) => e.currentTarget.select()}
+        onChange={(e) => setDraft(e.target.value)}
+        onBlur={commit}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            commit()
+          } else if (e.key === 'Escape') {
+            e.stopPropagation()
+            onDone()
+          }
+        }}
+        className="h-6 text-label"
+      />
+    </div>
+  )
+}
+
+export function GroupHeading({
+  label,
+  count,
+  leading,
+  actions,
+  className,
+  ...rest
+}: {
+  label: ReactNode
+  count: number
+  leading?: ReactNode
+  actions?: ReactNode
+} & 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="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">
+          {actions}
+        </span>
+      ) : null}
+    </div>
+  )
+}
+
+export function HeadingAction({
+  label,
+  title,
+  onClick,
+  children,
+}: {
+  label: string
+  title?: string
+  onClick: () => void
+  children: ReactNode
+}) {
+  return (
+    <Button
+      variant="ghost"
+      size="icon-sm"
+      aria-label={label}
+      title={title ?? label}
+      className="size-5 text-fg-3"
+      onClick={(e) => {
+        e.stopPropagation()
+        onClick()
+      }}
+    >
+      {children}
+    </Button>
+  )
+}
+
+export function NewGroupButton({ onClick }: { onClick: () => void }) {
+  return (
+    <Button variant="ghost" size="xs" className="mx-1 self-start text-fg-3" onClick={onClick}>
+      <Plus />
+      New group
+    </Button>
+  )
+}

package/src/components/agent/SessionItem.tsx

@@ -130,6 +130,8 @@ export function SessionItem({
     <div
       data-slot="session-item"
       data-active={active || undefined}
+      data-asleep={info.engineAsleep || undefined}
+      title={info.engineAsleep ? 'Asleep, wakes on your next message' : undefined}
       role="button"
       tabIndex={0}
       onClick={(e) => {
@@ -154,7 +156,7 @@ export function SessionItem({
         className,
       )}
     >
-      <div className="flex flex-col gap-1 py-0.5 pr-0.5 pl-1.5">
+      <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} />

package/src/components/agent/SessionPanel.tsx

@@ -54,14 +54,23 @@ import { HostFilesDialog } from './HostFilesDialog.tsx'
 import { McpDialog } from './McpDialog.tsx'
 import { SkillsDialog } from './SkillsDialog.tsx'
 import { ModelSelect } from './ModelSelect.tsx'
+import { EffortSelect, effortChoices } from './EffortSelect.tsx'
 import { PermissionModeSelect, permissionModeChoices, type PermissionModeChoice } from './PermissionModeSelect.tsx'
 import { SubagentStrip } from './SubagentStrip.tsx'
 import { useSubagentFrame } from './use-subagent-frame.ts'
 import { ShellStrip } from './ShellStrip.tsx'
 import { ShellTerminal } from './ShellTerminal.tsx'
 import { useShellFrame } from './use-shell-frame.ts'
-import { BookmarkProvider, type BookmarkHandle, type TerminalAffordances } from '../terminal/affordances.tsx'
+import {
+  BookmarkProvider,
+  TaskControlProvider,
+  type BookmarkHandle,
+  type TaskControlHandle,
+  type TerminalAffordances,
+} from '../terminal/affordances.tsx'
 import type { FileLinkOpener } from '../terminal/file-link.tsx'
+import { backgroundableSince, SEND_NOW_AFTER_MS } from '../terminal/live-tool.ts'
+import { useTicker } from '../terminal/items.tsx'
 import { ApprovalPrompts, type ApprovalPromptProps } from './ApprovalPrompts.tsx'
 import { SessionPanelProviders } from './session-panel-providers.tsx'
 import { useCatchUp } from './use-catch-up.ts'
@@ -127,6 +136,7 @@ export interface SessionPanelProps {
 
 export type SessionControls = {
   setModel: (model?: string) => void
+  setEffort: (effort?: string) => void
   setPermissionMode: (mode: PermissionMode) => void
   interrupt: () => void
   focusComposer: () => void
@@ -169,6 +179,8 @@ export type SessionVitals = {
   capabilities: TranscriptState['capabilities']
   model: string | undefined
   models: ModelOption[]
+  effort: TranscriptState['effort']
+  efforts: readonly string[]
   permissionMode: TranscriptState['permissionMode']
   permissionModes: PermissionModeChoice[]
   skills: SkillInfo[] | undefined
@@ -252,8 +264,10 @@ export function SessionPanel({
     approve,
     deny,
     interrupt,
+    backgroundTask,
     clearContext,
     setModel,
+    setEffort,
     setPermissionMode,
     reconnectNow,
     loadFullResult,
@@ -351,9 +365,13 @@ export function SessionPanel({
   )
 
   const hasModels = models.length > 0
+  const efforts = useMemo(
+    () => effortChoices(models, effectiveModel ?? state.model, capabilities),
+    [models, effectiveModel, state.model, capabilities],
+  )
   const clientCommands = useMemo(
-    () => buildClientCommands({ capabilities, hasModels, setModel, setPermissionMode, clearContext, openPanel }),
-    [capabilities, hasModels, openPanel, clearContext, setModel, setPermissionMode],
+    () => buildClientCommands({ capabilities, hasModels, efforts, setModel, setEffort, setPermissionMode, clearContext, openPanel }),
+    [capabilities, hasModels, efforts, openPanel, clearContext, setModel, setEffort, setPermissionMode],
   )
 
   const composerCommands = useMemo(
@@ -382,6 +400,8 @@ export function SessionPanel({
     capabilities: state.capabilities,
     model: vitalsModel,
     models,
+    effort: state.effort,
+    efforts,
     permissionMode: state.permissionMode,
     permissionModes,
     skills: state.skills,
@@ -406,10 +426,11 @@ export function SessionPanel({
 
   const onControlsRef = useRef(onControls)
   onControlsRef.current = onControls
-  const setters = useRef({ setModel, setPermissionMode, interrupt })
-  setters.current = { setModel, setPermissionMode, interrupt }
+  const setters = useRef({ setModel, setEffort, setPermissionMode, interrupt })
+  setters.current = { setModel, setEffort, setPermissionMode, interrupt }
   const controls = useRef<SessionControls>({
     setModel: (model) => setters.current.setModel(model),
+    setEffort: (effort) => setters.current.setEffort(effort),
     setPermissionMode: (mode) => setters.current.setPermissionMode(mode),
     interrupt: () => setters.current.interrupt(),
     focusComposer: () => composerRef.current?.focus(),
@@ -426,6 +447,12 @@ export function SessionPanel({
     [bookmarkSet, onToggleBookmark],
   )
 
+  const canBackgroundTasks = !readOnly && capabilities.backgroundTasks === true
+  const taskControl = useMemo<TaskControlHandle | undefined>(
+    () => (canBackgroundTasks ? { background: backgroundTask } : undefined),
+    [canBackgroundTasks, backgroundTask],
+  )
+
   const busy = state.status === 'running' || state.status === 'awaiting_approval'
   const ended = state.status === 'failed' || state.status === 'closed'
   const attachments = useAttachments(client, sessionId, {
@@ -463,6 +490,14 @@ export function SessionPanel({
     send(text, attachmentIds)
   }
 
+  const foregroundSince = canBackgroundTasks ? backgroundableSince(state.items) : undefined
+  const tick = useTicker(foregroundSince !== undefined)
+  const runningForeground = foregroundSince !== undefined && tick - foregroundSince >= SEND_NOW_AFTER_MS
+  const handleSendNow = (text: string, attachmentIds: string[]) => {
+    handleSend(text, attachmentIds)
+    backgroundTask()
+  }
+
   const menuShows: Record<MenuPanel, boolean> = {
     context: capabilities.contextUsage,
     usage: capabilities.rateLimits,
@@ -505,6 +540,15 @@ export function SessionPanel({
           className={controlsInStatus ? 'h-5' : undefined}
         />
       ) : null}
+      {efforts.length && state.effort !== null ? (
+        <EffortSelect
+          efforts={efforts}
+          effort={state.effort}
+          onEffortChange={setEffort}
+          disabled={ended}
+          className={controlsInStatus ? 'h-5' : undefined}
+        />
+      ) : null}
       {state.permissionMode ? (
         <PermissionModeSelect
           mode={state.permissionMode}
@@ -630,29 +674,31 @@ export function SessionPanel({
             <ShellTerminal key={framedShellId} handle={handle} shellId={framedShellId} fontSize={cell.fontSize} />
           ) : (
             <BookmarkProvider value={bookmarkHandle}>
-              <Transcript
-                key={subagentId ?? 'session'}
-                state={state}
-                fileUrl={sessionId ? (path) => client.sessionFileUrl(sessionId, path) : undefined}
-                attachmentUrl={sessionId ? (id) => client.attachmentUrl(sessionId, id) : undefined}
-                canBrowseFiles={hostFiles.available}
-                sessionNames={peers.names}
-                hostImage={hostImage}
-                variant={transcriptVariant}
-                {...cell}
-                affordances={affordances}
-                stickyPrompt={stickyPrompt}
-                scrubber={scrubber}
-                bookmarks={bookmarks}
-                replaying={replaying}
-                catchUp={catchUp && newCount > 0 ? { from: catchUp.itemCount, since: catchUp.since } : undefined}
-                reveal={frameReturnReveal ?? reveal}
-                frame={subagentId === undefined ? undefined : { parentToolUseId: subagentId }}
-                onOpenSubagent={enterSubagent}
-                emptyState={emptyState}
-                jumpToRecapRef={jumpToRecap}
-                repinRef={repinTranscript}
-              />
+              <TaskControlProvider value={taskControl}>
+                <Transcript
+                  key={subagentId ?? 'session'}
+                  state={state}
+                  fileUrl={sessionId ? (path) => client.sessionFileUrl(sessionId, path) : undefined}
+                  attachmentUrl={sessionId ? (id) => client.attachmentUrl(sessionId, id) : undefined}
+                  canBrowseFiles={hostFiles.available}
+                  sessionNames={peers.names}
+                  hostImage={hostImage}
+                  variant={transcriptVariant}
+                  {...cell}
+                  affordances={affordances}
+                  stickyPrompt={stickyPrompt}
+                  scrubber={scrubber}
+                  bookmarks={bookmarks}
+                  replaying={replaying}
+                  catchUp={catchUp && newCount > 0 ? { from: catchUp.itemCount, since: catchUp.since } : undefined}
+                  reveal={frameReturnReveal ?? reveal}
+                  frame={subagentId === undefined ? undefined : { parentToolUseId: subagentId }}
+                  onOpenSubagent={enterSubagent}
+                  emptyState={emptyState}
+                  jumpToRecapRef={jumpToRecap}
+                  repinRef={repinTranscript}
+                />
+              </TaskControlProvider>
             </BookmarkProvider>
           )}
           {catchUp && newCount > 0 && !replaying && subagentId === undefined && framedShellId === undefined ? (
@@ -680,6 +726,7 @@ export function SessionPanel({
               <Composer
                 ref={composerRef}
                 onSend={handleSend}
+                onSendNow={runningForeground ? handleSendNow : undefined}
                 onInterrupt={interrupt}
                 busy={busy}
                 disabled={ended || !sessionId}

package/src/components/agent/TranscriptItemView.tsx

@@ -12,9 +12,10 @@ import { ToolCallCard } from './ToolCallCard.tsx'
 import { Row } from '../terminal/row.tsx'
 import { TerminalItemView } from '../terminal/TerminalTranscript.tsx'
 import { ViewableImage } from './image-viewer.tsx'
-import { peerLabel } from '../terminal/items.tsx'
+import { peerLabel, useTicker } from '../terminal/items.tsx'
+import { canBackground, elapsedLabel, liveTailLines, toolBusy } from '../terminal/live-tool.ts'
 import { ShellItemActions, useShellActions, useVerifyRunning } from './shell-actions.tsx'
-import { BookmarkAction, CopyAction, WithActions } from '../terminal/affordances.tsx'
+import { BackgroundAction, BookmarkAction, CopyAction, WithActions } from '../terminal/affordances.tsx'
 import { shellBodyLines, shellFailed, shellFooterText, shellLabel, shellStatusText } from '../terminal/shell-row.ts'
 
 function TurnResultRow({ item }: { item: Extract<TranscriptItem, { kind: 'turn_result' }> }) {
@@ -145,16 +146,33 @@ function ToolCard({
     <WithActions
       actions={
         <>
+          {canBackground(item) ? <BackgroundAction toolUseId={item.id} /> : null}
           <BookmarkAction id={item.id} />
           {copyable ? <CopyAction text={copyable} label="Copy" /> : null}
         </>
       }
     >
       <ToolCallCard item={item} hostImage={hostImage} />
+      {toolBusy(item) ? <LiveToolStrip item={item} /> : null}
     </WithActions>
   )
 }
 
+function LiveToolStrip({ item }: { item: Extract<TranscriptItem, { kind: 'tool_call' }> }) {
+  const now = useTicker(item.ts !== undefined)
+  const elapsed = elapsedLabel(item.ts, now)
+  const tail = liveTailLines(item)
+  if (!elapsed && tail.length === 0) {
+    return null
+  }
+  return (
+    <div data-slot="tool-live" className="mt-1 text-label text-fg-4">
+      {elapsed ? <div>running {elapsed}</div> : null}
+      {tail.length > 0 ? <pre className="overflow-x-auto font-mono whitespace-pre-wrap text-fg-3">{tail.join('\n')}</pre> : null}
+    </div>
+  )
+}
+
 function ShellCard({ item }: { item: ShellItem }) {
   const [open, setOpen] = useState(false)
   const actions = useShellActions()

package/src/components/agent/composer-commands.ts

@@ -176,7 +176,9 @@ export type ClientCommandPanel = 'info' | 'context' | 'usage' | 'mcp' | 'skills'
 export type ClientCommandSources = {
   capabilities: Pick<EngineCapabilities, 'permissionModes' | 'clearContext' | 'mcpStatus' | 'contextUsage' | 'rateLimits' | 'skillsList'>
   hasModels: boolean
+  efforts?: readonly string[]
   setModel: (model: string) => void
+  setEffort?: (effort?: string) => void
   setPermissionMode: (mode: PermissionMode) => void
   clearContext: () => void
   openPanel: (panel: ClientCommandPanel) => void
@@ -185,7 +187,9 @@ export type ClientCommandSources = {
 export function buildClientCommands({
   capabilities,
   hasModels,
+  efforts = [],
   setModel,
+  setEffort,
   setPermissionMode,
   clearContext,
   openPanel,
@@ -208,6 +212,26 @@ export function buildClientCommands({
       },
     })
   }
+  if (efforts.length && setEffort) {
+    built.push({
+      name: 'effort',
+      description: `Set the reasoning effort (${efforts.join(', ')}, default)`,
+      argumentHint: '<level>',
+      requiresArgs: true,
+      run: (args) => {
+        const wanted = args.split(/\s+/)[0]
+        if (wanted === 'default') {
+          setEffort(undefined)
+          return true
+        }
+        if (!wanted || !efforts.includes(wanted)) {
+          return false
+        }
+        setEffort(wanted)
+        return true
+      },
+    })
+  }
   if (modes.length > 1) {
     built.push({
       name: 'permissions',

package/src/components/terminal/affordances.tsx

@@ -1,4 +1,4 @@
-import { Bot, BotOff, Check, Copy, Maximize2, SquareTerminal, Star, X, type LucideIcon } from 'lucide-react'
+import { ArrowDownToLine, Bot, BotOff, Check, Copy, Maximize2, SquareTerminal, Star, X, type LucideIcon } from 'lucide-react'
 import { createContext, useContext, useState, type ReactNode } from 'react'
 import { copyText } from '../../lib/clipboard.ts'
 import { cn } from '../../lib/utils.ts'
@@ -134,6 +134,34 @@ export function BookmarkAction({ id }: { id: string }) {
   )
 }
 
+// Present only where the engine can move a running tool call to the background (Claude's Ctrl+B).
+export type TaskControlHandle = { background: (toolUseId?: string) => void }
+
+const TaskControlContext = createContext<TaskControlHandle | undefined>(undefined)
+
+export function TaskControlProvider({ value, children }: { value: TaskControlHandle | undefined; children: ReactNode }) {
+  return <TaskControlContext.Provider value={value}>{children}</TaskControlContext.Provider>
+}
+
+export function useTaskControl(): TaskControlHandle | undefined {
+  return useContext(TaskControlContext)
+}
+
+export function BackgroundAction({ toolUseId }: { toolUseId: string }) {
+  const handle = useContext(TaskControlContext)
+  if (!handle) {
+    return null
+  }
+  return (
+    <ActionButton
+      icon={ArrowDownToLine}
+      word="background"
+      label="Move to background (the command keeps running, the agent continues)"
+      onPress={() => handle.background(toolUseId)}
+    />
+  )
+}
+
 export function OpenSubagentAction({ onOpen, label = 'Open sub-agent' }: { onOpen: () => void; label?: string }) {
   return <ActionButton icon={Maximize2} word="open" label={label} onPress={onOpen} />
 }

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)
 }