@workerdeck/ui 3.3.0 → 3.4.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,

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

@@ -743,9 +743,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. */