@workerdeck/ui 3.2.0 → 3.4.0

package/src/components/terminal/items.tsx

@@ -1,11 +1,12 @@
 import { Fragment, useEffect, useState, type ReactNode } from 'react'
-import type { MessageOrigin } from '@workerdeck/protocol'
+import { peerShortId, type MessageOrigin } from '@workerdeck/protocol'
 import type { ShellItem, TranscriptItem } from '@workerdeck/react'
 import { compactionText, formatBytes, formatCost, formatDuration, toolInputPreview } from '../../lib/format.ts'
 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'
@@ -41,7 +42,7 @@ function clipToChars(lines: string[], maxChars: number): string[] {
 }
 
 export function peerLabel(origin: MessageOrigin): string {
-  const who = origin.name ? `${origin.name} (${origin.sessionId.slice(0, 8)})` : origin.sessionId.slice(0, 8)
+  const who = origin.name ? `${origin.name} (${peerShortId(origin.sessionId)})` : peerShortId(origin.sessionId)
   return `message from ${origin.engine ? `${origin.engine} session ` : 'session '}${who}`
 }
 
@@ -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/components/terminal/tool-run.ts

@@ -1,4 +1,4 @@
-import { isPeerSendTool, peerDeliveredTo, type MessageOrigin } from '@workerdeck/protocol'
+import { isPeerSendTool, peerDeliveredTo, peerShortId, type MessageOrigin } from '@workerdeck/protocol'
 import type { TranscriptItem } from '@workerdeck/react'
 import { toolInputPreview } from '../../lib/format.ts'
 import { isShellTool } from '../../lib/tool-icon.ts'
@@ -12,7 +12,10 @@ export function isPeerSend(item: TranscriptItem): boolean {
 }
 
 export function peerName(origin: MessageOrigin): string {
-  return origin.name ?? origin.sessionId.slice(0, 8)
+  if (!origin.name) {
+    return peerShortId(origin.sessionId)
+  }
+  return origin.hostId ? `${origin.name}@${origin.hostId}` : origin.name
 }
 
 // Every peer this transcript has named, by session id. A conversation names its peers twice over: an
@@ -48,7 +51,7 @@ export function peerSendTarget(item: ToolCallItem, names?: ReadonlyMap<string, s
   if (sessionId === undefined) {
     return 'peer'
   }
-  return delivered?.name ?? names?.get(sessionId) ?? sessionId.slice(0, 8)
+  return delivered?.name ?? names?.get(sessionId) ?? peerShortId(sessionId)
 }
 
 export function peerSendText(item: ToolCallItem): string {

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,
@@ -156,7 +157,13 @@ export {
 export { SkillsDialog, type SkillsDialogProps } from './components/agent/SkillsDialog.tsx'
 export { HostFilesDialog, type HostFilesDialogProps } from './components/agent/HostFilesDialog.tsx'
 export { SessionList, SessionListItem, type SessionListItemProps, type SessionListProps } from './components/agent/SessionList.tsx'
-export { SessionBrowser, SessionSearch, rowShapeClass, type SessionBrowserProps } from './components/agent/SessionBrowser.tsx'
+export {
+  SessionBrowser,
+  SessionSearch,
+  rowShapeClass,
+  type GroupTarget,
+  type SessionBrowserProps,
+} from './components/agent/SessionBrowser.tsx'
 export {
   STEP_DISPLAY_OPTIONS,
   SessionFilters,

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. */