@workerdeck/ui 3.3.0 → 3.4.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.4.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/client": "3.4.0",
+    "@workerdeck/react": "3.4.0",
+    "@workerdeck/protocol": "3.4.0"
   },
   "peerDependencies": {
     "monaco-editor": "^0.56.0",

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
   }

package/src/components/agent/SessionBrowser.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react'
 import type { HTMLAttributes, ReactNode } from 'react'
-import { Eraser, FolderOpen, Layers, Pencil, Plus, Search, SearchX, Trash2, X } from 'lucide-react'
+import { BedDouble, Eraser, FolderOpen, Layers, Pencil, Plus, Search, SearchX, Trash2, X } from 'lucide-react'
 import { clearFilters, filterRows, groupRows, hasFacetFilter, scopeActive, sessionKey, subsetSummary } from '@workerdeck/protocol'
 import type { SessionGroup, SessionRow, SessionTask, StepDisplay, SubagentDisplay, ViewConfig, WorkspaceScope } from '@workerdeck/protocol'
 import { Button } from '../ui/Button.tsx'
@@ -34,6 +34,7 @@ export interface SessionBrowserProps {
   onDelete?: (row: SessionRow) => void
   onRename?: (row: SessionRow, title: string) => void
   onClearContext?: (row: SessionRow) => void
+  onSleep?: (row: SessionRow) => void
   onSelectSubagent?: (row: SessionRow, toolUseId: string) => void
   onSelectTask?: (row: SessionRow, task: SessionTask) => void
   onStopTask?: (row: SessionRow, toolUseId: string) => void
@@ -74,6 +75,7 @@ export function SessionBrowser({
   onDelete,
   onRename,
   onClearContext,
+  onSleep,
   onSelectSubagent,
   onSelectTask,
   onStopTask,
@@ -119,7 +121,17 @@ export function SessionBrowser({
     const target = project && group.hostId ? { hostId: group.hostId, cwd: group.cwd } : undefined
     return (
       <GroupHeading
-        label={group.label}
+        label={
+          group.gateway && group.project ? (
+            <>
+              {group.gateway}
+              <span aria-hidden> · </span>
+              <span className="text-fg-1">{group.project}</span>
+            </>
+          ) : (
+            group.label
+          )
+        }
         count={group.rows.length}
         title={project && group.cwd ? group.cwd : undefined}
         leading={
@@ -218,6 +230,7 @@ export function SessionBrowser({
                   onDelete={onDelete}
                   onRename={onRename}
                   onClearContext={onClearContext}
+                  onSleep={onSleep}
                   onSelectSubagent={onSelectSubagent}
                   onSelectTask={onSelectTask}
                   onStopTask={onStopTask}
@@ -259,6 +272,7 @@ interface SessionRowItemProps {
   onDelete?: (row: SessionRow) => void
   onRename?: (row: SessionRow, title: string) => void
   onClearContext?: (row: SessionRow) => void
+  onSleep?: (row: SessionRow) => void
   onSelectSubagent?: (row: SessionRow, toolUseId: string) => void
   onSelectTask?: (row: SessionRow, task: SessionTask) => void
   onStopTask?: (row: SessionRow, toolUseId: string) => void
@@ -286,6 +300,7 @@ function SessionRowItem({
   onDelete,
   onRename,
   onClearContext,
+  onSleep,
   onSelectSubagent,
   onSelectTask,
   onStopTask,
@@ -336,6 +351,15 @@ function SessionRowItem({
                 <Eraser className="size-3 text-fg-3" />
               </RowAction>
             ) : null}
+            {onSleep && info.capabilities?.engineSleep && info.status === 'idle' && !info.engineAsleep ? (
+              <RowAction
+                label="Sleep session"
+                title="Stop the engine process to free its memory - the session stays here and wakes on your next message"
+                onClick={() => onSleep(row)}
+              >
+                <BedDouble className="size-3 text-fg-3" />
+              </RowAction>
+            ) : null}
             {onDelete ? (
               <RowAction label="Close session" onClick={() => onDelete(row)}>
                 <Trash2 className="size-3 text-fg-3" />

package/src/components/agent/SessionGroups.tsx

@@ -191,7 +191,7 @@ export function GroupHeading({
   className,
   ...rest
 }: {
-  label: string
+  label: ReactNode
   count: number
   leading?: ReactNode
   actions?: ReactNode

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