@workerdeck/ui 3.3.0 → 3.5.0

package/src/components/agent/SessionItem.tsx

@@ -1,7 +1,9 @@
 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, SessionTask, StepDisplay, SubagentDisplay } from '@workerdeck/protocol'
+import type { 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'
 import { ProjectIcon } from './ProjectIcon.tsx'
@@ -36,6 +38,19 @@ export interface SessionItemProps {
   editing?: boolean
   onEditingChange?: (editing: boolean) => void
   actions?: ReactNode
+  // Drawn when `row.info.agent` is set: the card then leads with the avatar and names the agent.
+  avatars?: AgentAvatars
+  // `member` is the one-row card a team draws under its lead.
+  variant?: 'card' | 'member'
+  // The state the avatar badge draws, for a folded lead standing in for its team.
+  badgeState?: SessionState
+  // Unread summed over a folded team's members, drawn with the team glyph beside the lead's own.
+  teamUnseen?: number
+  // A folded lead's members, drawn on its first line before the context ring.
+  teamTray?: ReactNode
+  // Draws a session with no agent in the agent card's shape (an engine-mark tile for the avatar), so a list mixing
+  // agents and plain sessions keeps one column.
+  tile?: boolean
   className?: string
 }
 
@@ -64,6 +79,12 @@ export function SessionItem({
   editing,
   onEditingChange,
   actions,
+  avatars,
+  variant = 'card',
+  badgeState,
+  teamUnseen = 0,
+  teamTray,
+  tile = false,
   className,
 }: SessionItemProps) {
   const { info } = row
@@ -125,11 +146,61 @@ export function SessionItem({
     },
   )
   const holdsOpenStep = steps.some((s) => s.key === activeStepKey)
+  const agent = info.agent
+  const label = agent ? agent.name : sessionLabel(info)
+  const editable = agent ? agent.name : (info.title ?? '')
+  const time = formatRelativeTime(info.lastActivityAt ?? info.createdAt)
+  const nameLabel =
+    isEditing && onRename ? (
+      <NameEditor
+        initial={editable}
+        placeholder={agent ? 'Agent name' : 'Session name'}
+        onCommit={(title) => {
+          setEditing(false)
+          if (title !== editable && (title || !agent)) {
+            onRename(title)
+          }
+        }}
+        onCancel={() => setEditing(false)}
+      />
+    ) : (
+      <span
+        onDoubleClick={
+          onRename && renameOn === 'doubleClick'
+            ? (e) => {
+                e.stopPropagation()
+                setEditing(true)
+              }
+            : undefined
+        }
+        className="min-w-0 shrink truncate text-body-sm font-medium tracking-[-0.005em] text-fg-1"
+      >
+        {label}
+      </span>
+    )
+  const unread =
+    row.unseen > 0 ? (
+      <span
+        // Prose, not rows: `unseen` counts messages a person has not read (`proseCount`).
+        title={`${row.unseen} new message${row.unseen === 1 ? '' : 's'}`}
+        className={cn(
+          'flex h-4 min-w-6 shrink-0 items-center justify-center rounded-full px-2',
+          'text-[0.75rem] leading-none tracking-[-0.005em] tabular-nums',
+          // Grey while the turn is still producing, accent once it has stopped: the badge's colour
+          // answers "is this waiting for me", and a working session is not yet.
+          row.state === 'working' ? 'bg-badge text-badge-fg' : 'bg-accent text-accent-fg',
+        )}
+      >
+        {row.unseen}
+      </span>
+    ) : null
 
   return (
     <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,75 +225,107 @@ export function SessionItem({
         className,
       )}
     >
-      <div className="flex flex-col gap-1 py-0.5 pr-0.5 pl-1.5">
-        <div className="flex h-5 items-center gap-1.5 overflow-hidden">
-          <Gutter>
-            <SessionStatusIcon row={row} />
-          </Gutter>
-          {isEditing && onRename ? (
-            <NameEditor
-              initial={info.title ?? ''}
-              onCommit={(title) => {
-                setEditing(false)
-                if (title !== (info.title ?? '')) {
-                  onRename(title)
-                }
-              }}
-              onCancel={() => setEditing(false)}
-            />
-          ) : (
-            <span
-              onDoubleClick={
-                onRename && renameOn === 'doubleClick'
-                  ? (e) => {
-                      e.stopPropagation()
-                      setEditing(true)
-                    }
-                  : undefined
-              }
-              className="min-w-0 flex-1 truncate text-body-sm font-medium tracking-[-0.005em] text-fg-1"
-            >
-              {sessionLabel(info)}
-            </span>
-          )}
-          {row.unseen > 0 ? (
-            <span
-              // Prose, not rows: `unseen` counts messages a person has not read (`proseCount`).
-              title={`${row.unseen} new message${row.unseen === 1 ? '' : 's'}`}
-              className={cn(
-                'flex h-4 min-w-6 shrink-0 items-center justify-center rounded-full px-2',
-                'text-[0.75rem] leading-none tracking-[-0.005em] tabular-nums',
-                // Grey while the turn is still producing, accent once it has stopped: the badge's colour
-                // answers "is this waiting for me", and a working session is not yet.
-                row.state === 'working' ? 'bg-badge text-badge-fg' : 'bg-accent text-accent-fg',
+      {agent && variant === 'member' ? (
+        <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" />}
+          {unread}
+          <span className="shrink-0 text-body-sm text-fg-4">{time}</span>
+          {actions}
+        </div>
+      ) : agent || tile ? (
+        <div className={cn('flex items-center gap-2 py-0.5 pr-0.5 pl-1.5', info.engineAsleep && 'opacity-60')}>
+          <AgentAvatar row={row} image={avatarOf(avatars, agent)} state={badgeState} />
+          <div className="flex min-w-0 flex-1 flex-col gap-1">
+            <div className="flex h-5 items-center gap-1.5 overflow-hidden">
+              {nameLabel}
+              {agent?.leads ? <LeadChip /> : null}
+              <span className="flex-1" />
+              {unread}
+              {teamUnseen > 0 ? (
+                <span
+                  title={`${teamUnseen} new message${teamUnseen === 1 ? '' : 's'} in the team`}
+                  className="flex h-4 shrink-0 items-center gap-0.5 rounded-full bg-accent px-1.5 text-[0.75rem] leading-none text-accent-fg tabular-nums"
+                >
+                  <Users className="size-3" />
+                  {teamUnseen}
+                </span>
+              ) : null}
+              {teamTray}
+              <ContextRing usage={info.contextUsage} engine={engine} size={16} className="p-0.5" />
+            </div>
+            <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>
+                </>
+              ) : (
+                <>
+                  <span className="min-w-0 truncate text-fg-4">
+                    {parts.map((part, i) => (
+                      <Fragment key={i}>
+                        {i > 0 ? ' · ' : ''}
+                        {part}
+                      </Fragment>
+                    ))}
+                  </span>
+                  <span className="shrink-0 text-fg-4">
+                    {parts.length > 0 ? '· ' : ''}
+                    {time}
+                  </span>
+                </>
               )}
-            >
-              {row.unseen}
-            </span>
-          ) : null}
-          <ContextRing usage={info.contextUsage} engine={engine} size={16} className="p-0.5" />
+              <span className="min-w-0 flex-1" />
+              {actions}
+            </div>
+          </div>
         </div>
+      ) : (
+        <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} />
+            </Gutter>
+            {nameLabel}
+            <span className="flex-1" />
+            {unread}
+            <ContextRing usage={info.contextUsage} engine={engine} size={16} className="p-0.5" />
+          </div>
 
-        <div className="flex h-5 items-center gap-1.5 overflow-hidden text-body-sm tracking-[-0.005em]">
-          <Gutter>
-            <EngineIcon engine={engine} model={info.model} className={cn('size-4', vendorMarkClass(engine, info.model))} />
-          </Gutter>
-          <span className="min-w-0 truncate text-fg-4">
-            {parts.map((part, i) => (
-              <Fragment key={i}>
-                {i > 0 ? ' · ' : ''}
-                {part}
-              </Fragment>
-            ))}
-          </span>
-          <span className="shrink-0 text-fg-4">
-            {parts.length > 0 ? '· ' : ''}
-            {formatRelativeTime(info.lastActivityAt ?? info.createdAt)}
-          </span>
-          <span className="min-w-0 flex-1" />
-          {actions}
+          <div className="flex h-5 items-center gap-1.5 overflow-hidden text-body-sm tracking-[-0.005em]">
+            <Gutter>
+              <EngineIcon engine={engine} model={info.model} className={cn('size-4', vendorMarkClass(engine, info.model))} />
+            </Gutter>
+            <span className="min-w-0 truncate text-fg-4">
+              {parts.map((part, i) => (
+                <Fragment key={i}>
+                  {i > 0 ? ' · ' : ''}
+                  {part}
+                </Fragment>
+              ))}
+            </span>
+            <span className="shrink-0 text-fg-4">
+              {parts.length > 0 ? '· ' : ''}
+              {time}
+            </span>
+            <span className="min-w-0 flex-1" />
+            {actions}
+          </div>
         </div>
-      </div>
+      )}
 
       {steps.length > 0 ? (
         <div className="flex flex-col">
@@ -239,7 +342,17 @@ function Gutter({ children }: { children: ReactNode }) {
   return <span className="flex size-4 shrink-0 items-center justify-center">{children}</span>
 }
 
-function NameEditor({ initial, onCommit, onCancel }: { initial: string; onCommit: (title: string) => void; onCancel: () => void }) {
+function NameEditor({
+  initial,
+  placeholder,
+  onCommit,
+  onCancel,
+}: {
+  initial: string
+  placeholder: string
+  onCommit: (title: string) => void
+  onCancel: () => void
+}) {
   const [value, setValue] = useState(initial)
   const ref = useRef<HTMLInputElement>(null)
   useEffect(() => {
@@ -259,8 +372,8 @@ function NameEditor({ initial, onCommit, onCancel }: { initial: string; onCommit
       ref={ref}
       value={value}
       spellCheck={false}
-      placeholder="Session name"
-      aria-label="Session name"
+      placeholder={placeholder}
+      aria-label={placeholder}
       onClick={(e) => e.stopPropagation()}
       onDoubleClick={(e) => e.stopPropagation()}
       onChange={(e) => setValue(e.target.value)}

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