@workerdeck/ui 2.10.0 → 2.11.0

package/src/components/terminal/items.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, type ReactNode } from 'react'
+import type { MessageOrigin } from '@workerdeck/protocol'
 import type { TranscriptItem } from '@workerdeck/react'
 import { compactionText, formatBytes, formatCost, formatDuration, toolInputPreview } from '../../lib/format.ts'
 import { isMutatingTool } from '../../lib/tool-icon.ts'
@@ -7,13 +8,14 @@ import { PromptTokenText } from '../agent/PromptTokenText.tsx'
 import { BookmarkAction, CopyAction, WithActions } from './affordances.tsx'
 import { TerminalDiff } from './diff.tsx'
 import { TerminalMarkdown } from './markdown.tsx'
+import { usePeerNames } from './peer-names.tsx'
 import { Pressable, useRevealOnOpen } from './press.tsx'
 import { IMAGE_BOX_LINES, IMAGE_UNAVAILABLE, imagePlaceholder } from './image-box.ts'
 import { collapsedResult } from './result-preview.ts'
 import { useToolResultFetcher } from '../agent/tool-result-fetch.tsx'
 import { useToolTitle } from '../agent/tool-titles.tsx'
 import { useToolResultImageSrc } from '../agent/tool-result-image.tsx'
-import { runFailed, runSummary } from './tool-run.ts'
+import { isPeerSend, peerName, peerOneLine, peerSendTarget, peerSendText, planRun, runFailed, runSummary } from './tool-run.ts'
 import { todoLine, todoPreview, type TodoPreview, type TodoStatus } from './todos.ts'
 import { type ToolCallItem } from './blocks.ts'
 import { Band, Blank, Ink, Row, type Tone } from './row.tsx'
@@ -35,21 +37,97 @@ function clipToChars(lines: string[], maxChars: number): string[] {
   return out
 }
 
+export function peerLabel(origin: MessageOrigin): string {
+  const who = origin.name ? `${origin.name} (${origin.sessionId.slice(0, 8)})` : origin.sessionId.slice(0, 8)
+  return `message from ${origin.engine ? `${origin.engine} session ` : 'session '}${who}`
+}
+
+export const PEER_IN_GLYPH = '↦'
+export const PEER_OUT_GLYPH = '↤'
+
+// The row peer traffic draws on, both directions. Never folded into a tool run and never summarised
+// away: one agent talking to another is the transcript's headline, not its evidence.
+function PeerRow({ glyph, who, body, tone = 'peer', clip }: { glyph: string; who: string; body: ReactNode; tone?: Tone; clip?: boolean }) {
+  const line = (
+    <>
+      <Ink tone={tone} bold>
+        {who}
+      </Ink>
+      {': '}
+      {body}
+    </>
+  )
+  return (
+    <Row glyph={glyph} glyphTone={tone} tone={tone}>
+      {clip ? <span className="term-clip-1">{line}</span> : line}
+    </Row>
+  )
+}
+
+export function PeerSendRow({ item }: { item: ToolCallItem }) {
+  const [open, setOpen] = useState(false)
+  const names = usePeerNames()
+  const reveal = useRevealOnOpen(open)
+  const lines = peerSendText(item).split('\n')
+  const failed = item.status === 'failed' || item.result?.isError === true
+  const tone: Tone = failed ? 'red' : 'peer'
+
+  return (
+    <WithActions actions={<BookmarkAction id={item.id} />}>
+      <div ref={reveal} className={open ? 'term-open' : undefined}>
+        <Pressable onPress={() => setOpen((v) => !v)} expanded={open}>
+          <PeerRow
+            glyph={PEER_OUT_GLYPH}
+            who={peerSendTarget(item, names)}
+            tone={tone}
+            clip={!open}
+            body={open ? lines[0] || ' ' : peerOneLine(lines.join(' '))}
+          />
+        </Pressable>
+        {open ? (
+          <div>
+            {lines.slice(1).map((line, index) => (
+              <Row key={index} tone={tone}>
+                {line || ' '}
+              </Row>
+            ))}
+            {item.result ? <Row tone="faint">{peerOneLine(item.result.text)}</Row> : null}
+          </div>
+        ) : null}
+      </div>
+    </WithActions>
+  )
+}
+
 export function UserRow({ item }: { item: Extract<TranscriptItem, { kind: 'user' }> }) {
   return (
     <WithActions actions={<BookmarkAction id={item.id} />}>
-      <div className="term-user">
+      <div className="term-user" data-peer={item.origin ? '' : undefined}>
         {item.attachments?.length ? (
           <Row glyph={PROMPT_GLYPH} glyphTone="dim" tone="dim">
             {item.attachments.map((attachment) => attachment.name).join(', ')}
           </Row>
         ) : null}
         {item.text
-          ? item.text.split('\n').map((line, index) => (
-              <Row key={index} glyph={index === 0 ? PROMPT_GLYPH : undefined} glyphTone="dim" tone="fg">
-                {line ? <PromptTokenText text={line} /> : ' '}
-              </Row>
-            ))
+          ? item.text.split('\n').map((line, index) =>
+              item.origin && index === 0 ? (
+                <PeerRow
+                  key={index}
+                  glyph={PEER_IN_GLYPH}
+                  who={peerName(item.origin)}
+                  body={line ? <PromptTokenText text={line} /> : ' '}
+                />
+              ) : (
+                <Row
+                  key={index}
+                  glyph={!item.origin && index === 0 ? PROMPT_GLYPH : undefined}
+                  glyphTone="dim"
+                  tone={item.origin ? 'peer' : 'fg'}
+                >
+                  {line ? <PromptTokenText text={line} /> : ' '}
+                </Row>
+              ),
+            )
           : null}
       </div>
     </WithActions>
@@ -128,7 +206,7 @@ export function ToolRow({ item }: { item: ToolCallItem }) {
       >
         <Pressable onPress={() => setOpen((v) => !v)} expanded={open}>
           <Row glyph={busy ? pulse : '●'} glyphTone={tone} tone="fg" title={title ? item.name : undefined}>
-            <Ink bold tone="bright">
+            <Ink bold tone="bright" className={busy ? 'term-shimmer' : undefined}>
               {title ?? item.name}
             </Ink>
             <Ink tone="dim">({todos ? todos.summary : toolInputPreview(item.input)})</Ink>
@@ -253,7 +331,7 @@ export function ToolRunRow({ items }: { items: ToolCallItem[] }) {
     <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'}>
-          {runSummary(items, busy)}
+          {busy ? <span className="term-shimmer">{runSummary(items, busy)}</span> : runSummary(items, busy)}
         </Row>
       </Pressable>
       {open ? (
@@ -267,6 +345,14 @@ export function ToolRunRow({ items }: { items: ToolCallItem[] }) {
   )
 }
 
+export function RunRow({ items }: { items: ToolCallItem[] }) {
+  const plan = planRun(items)
+  if (plan.kind === 'summary') {
+    return <ToolRunRow items={plan.items} />
+  }
+  return isPeerSend(plan.item) ? <PeerSendRow item={plan.item} /> : <ToolRow item={plan.item} />
+}
+
 export function TurnResultRow({ item }: { item: Extract<TranscriptItem, { kind: 'turn_result' }> }) {
   return (
     <div>
@@ -335,7 +421,7 @@ export function WorkingRow({ label, startedAt, tokens }: { label: string; starte
   const readings = [elapsed, tokens ? `↓ ${(tokens / 1000).toFixed(1)}k tokens` : undefined].filter(Boolean)
   return (
     <Row glyph={pulse} glyphTone="mark" tone="mark">
-      {label}
+      <span className="term-shimmer">{label}</span>
       {readings.length ? <Ink tone="faint"> ({readings.join(' · ')})</Ink> : null}
     </Row>
   )

package/src/components/terminal/peer-names.tsx

@@ -0,0 +1,16 @@
+import { createContext, useContext, useMemo, type ReactNode } from 'react'
+import type { TranscriptItem } from '@workerdeck/react'
+import { peerNamesOf } from './tool-run.ts'
+
+const EMPTY: ReadonlyMap<string, string> = new Map()
+
+const PeerNamesContext = createContext<ReadonlyMap<string, string>>(EMPTY)
+
+export function PeerNamesProvider({ items, children }: { items: readonly TranscriptItem[]; children: ReactNode }) {
+  const names = useMemo(() => peerNamesOf(items), [items])
+  return <PeerNamesContext.Provider value={names}>{children}</PeerNamesContext.Provider>
+}
+
+export function usePeerNames(): ReadonlyMap<string, string> {
+  return useContext(PeerNamesContext)
+}

package/src/components/terminal/row.tsx

@@ -1,7 +1,7 @@
 import type { CSSProperties, HTMLAttributes, ReactNode } from 'react'
 import { cn } from '../../lib/utils.ts'
 
-export type Tone = 'fg' | 'bright' | 'dim' | 'faint' | 'mark' | 'blue' | 'green' | 'red' | 'yellow' | 'magenta'
+export type Tone = 'fg' | 'bright' | 'dim' | 'faint' | 'mark' | 'blue' | 'green' | 'red' | 'yellow' | 'magenta' | 'peer'
 
 export interface RowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
   glyph?: ReactNode

package/src/components/terminal/tool-run.ts

@@ -1,10 +1,69 @@
+import { isPeerSendTool, peerDeliveredTo, type MessageOrigin } from '@workerdeck/protocol'
 import type { TranscriptItem } from '@workerdeck/react'
 import { toolInputPreview } from '../../lib/format.ts'
 import { isShellTool } from '../../lib/tool-icon.ts'
 
 type ToolCallItem = Extract<TranscriptItem, { kind: 'tool_call' }>
 
+// A message to another session draws as itself, always. Folded into a run it becomes one tick of
+// `Ran 4 tools`, which is exactly the collapse that hid the conversation the reader came for.
+export function isPeerSend(item: TranscriptItem): boolean {
+  return item.kind === 'tool_call' && isPeerSendTool(item.name)
+}
+
+export function peerName(origin: MessageOrigin): string {
+  return origin.name ?? origin.sessionId.slice(0, 8)
+}
+
+// Every peer this transcript has named, by session id. A conversation names its peers twice over: an
+// arriving message carries the sender's name, a delivery receipt carries the recipient's. Either one
+// answers for the other direction, so a send that was only ever acknowledged by id still draws as a
+// name once the peer speaks, and a transcript recorded before the receipts carried names heals itself.
+export function peerNamesOf(items: readonly TranscriptItem[]): ReadonlyMap<string, string> {
+  const names = new Map<string, string>()
+  for (const item of items) {
+    if (item.kind === 'user') {
+      if (item.origin?.name) {
+        names.set(item.origin.sessionId, item.origin.name)
+      }
+      continue
+    }
+    if (item.kind === 'tool_call' && isPeerSendTool(item.name) && item.result && !item.result.isError) {
+      const delivered = peerDeliveredTo(item.result.text)
+      if (delivered?.name) {
+        names.set(delivered.sessionId, delivered.name)
+      }
+    }
+  }
+  return names
+}
+
+// Who a `peers_send` went to, read back out of the tool's own reply. Until the call settles there is
+// no reply to read, so the row falls back to what the rest of the transcript knows, then to the id the
+// model addressed.
+export function peerSendTarget(item: ToolCallItem, names?: ReadonlyMap<string, string>): string {
+  const delivered = item.result && !item.result.isError ? peerDeliveredTo(item.result.text) : undefined
+  const addressed = (item.input as { sessionId?: unknown } | null)?.sessionId
+  const sessionId = delivered?.sessionId ?? (typeof addressed === 'string' ? addressed : undefined)
+  if (sessionId === undefined) {
+    return 'peer'
+  }
+  return delivered?.name ?? names?.get(sessionId) ?? sessionId.slice(0, 8)
+}
+
+export function peerSendText(item: ToolCallItem): string {
+  const text = (item.input as { text?: unknown } | null)?.text
+  return typeof text === 'string' ? text : ''
+}
+
+export function peerOneLine(text: string): string {
+  return text.replace(/\s+/g, ' ').trim()
+}
+
 export function foldsTogether(a: ToolCallItem, b: ToolCallItem): boolean {
+  if (isPeerSend(a) || isPeerSend(b)) {
+    return false
+  }
   return a.parentToolUseId === b.parentToolUseId
 }
 
@@ -19,6 +78,15 @@ export function toolFamily(name: string): string {
   return name.toLowerCase()
 }
 
+export type RunPlan = { kind: 'call'; item: ToolCallItem } | { kind: 'summary'; items: ToolCallItem[] }
+
+// Matches iOS's `planRun` (`TerminalPlanner.swift`): a run of exactly one call draws as the call
+// itself, because the summary row would occupy the same one row while throwing away the tool's
+// name, input and result preview.
+export function planRun(items: ToolCallItem[]): RunPlan {
+  return items.length === 1 ? { kind: 'call', item: items[0]! } : { kind: 'summary', items }
+}
+
 export function runSummary(items: readonly ToolCallItem[], busy: boolean): string {
   const verb = busy ? 'Running ' : 'Ran '
   const tail = busy ? '…' : ''

package/src/lib/session-cost.ts

@@ -1,6 +1,8 @@
 import {
   type ByModel,
+  type CostBasis,
   type CostBreakdown,
+  type PricingTable,
   type TokenUsage,
   UNPRICED_WARN_SHARE,
   canonicalModel,
@@ -8,6 +10,7 @@ import {
   costOfByModel,
   rateFor,
   totalTokens,
+  unknownBasisModels,
 } from '@workerdeck/protocol'
 
 export type SessionCostRow = {
@@ -15,6 +18,7 @@ export type SessionCostRow = {
   usage: TokenUsage
   tokens: number
   costUsd: number | undefined
+  costBasis: CostBasis | undefined
 }
 
 export type SessionCost = {
@@ -25,6 +29,8 @@ export type SessionCost = {
   rows: SessionCostRow[]
   unpricedShare: number
   showUnpricedWarning: boolean
+  // Models the engine itself could not match to a rate table, so the figure *it* reports for them is a guess.
+  unknownBasisModels: string[]
   // Both figures price the same tokens, one by the engine and one by us, so a gap is the thing worth reading.
   gapUsd: number | undefined
 }
@@ -33,13 +39,15 @@ export type SessionCostInput = {
   costUsd?: number
   totalCostUsd?: number
   usageByModel?: ByModel
+  pricing?: PricingTable
 }
 
 const GAP_SHARE = 0.02
 
 export function sessionCost(input: SessionCostInput): SessionCost {
   const byModel = input.usageByModel ?? {}
-  const breakdown = costOfByModel(byModel)
+  const pricing = input.pricing
+  const breakdown = costOfByModel(byModel, pricing)
   const computedUsd = input.costUsd ?? (breakdown.unpriced || Object.keys(byModel).length === 0 ? undefined : breakdown.total)
   const reportedUsd = input.totalCostUsd
   const rows = Object.entries(byModel)
@@ -47,7 +55,8 @@ export function sessionCost(input: SessionCostInput): SessionCost {
       model: canonicalModel(model),
       usage,
       tokens: totalTokens(usage),
-      costUsd: rateFor(model) ? costOf(usage, model).total : undefined,
+      costUsd: rateFor(model, pricing) ? costOf(usage, model, pricing).total : undefined,
+      costBasis: usage.costBasis,
     }))
     .sort((a, b) => b.tokens - a.tokens)
   const gap = computedUsd !== undefined && reportedUsd !== undefined ? reportedUsd - computedUsd : undefined
@@ -60,6 +69,7 @@ export function sessionCost(input: SessionCostInput): SessionCost {
     rows,
     unpricedShare: breakdown.unpricedShare,
     showUnpricedWarning: breakdown.unpricedShare > UNPRICED_WARN_SHARE,
+    unknownBasisModels: unknownBasisModels(byModel),
     gapUsd: worthShowing ? gap : undefined,
   }
 }

package/src/lib/tool-icon.ts

@@ -52,7 +52,11 @@ export function toolIcon(toolName: string): LucideIcon {
     case 'Agent': {
       return UsersRound
     }
-    case 'TodoWrite': {
+    case 'TodoWrite':
+    case 'TaskCreate':
+    case 'TaskUpdate':
+    case 'TaskGet':
+    case 'TaskList': {
       return CheckSquare
     }
     case 'Skill': {

package/src/styles/terminal.css

@@ -79,11 +79,24 @@
   --term-faint: #6a6a6a;
 
   --term-mark: #d97757;
+  /* The working mark in motion. Five stops travelling violet to cyan and back,
+     lifted from box's `paint()` so an in-progress line reads the same here as
+     it does in the terminal. Deliberately not the clay accent: the mark states
+     whose turn it is, the shimmer states that something is still moving. */
+  --term-shimmer-1: #c5a3e8;
+  --term-shimmer-2: #a3a4e8;
+  --term-shimmer-3: #7b7ef5;
+  --term-shimmer-4: #8aaeea;
+  --term-shimmer-5: #a8e5ed;
   --term-blue: #afb9fe;
   --term-green: #4ec9a0;
   --term-red: #f14c4c;
   --term-yellow: #d7ba7d;
   --term-magenta: #c586c0;
+  /* Peer traffic - a message from or to another session. Cyan is the one ANSI slot
+     the theme had left, and peer rows must not be confusable with a tool call
+     (blue), a success (green) or a wait (yellow). */
+  --term-peer: #56d4dd;
 
   /* Diff bands. Full-bleed backgrounds, so they are tuned to sit under body
      text rather than to be looked at: the CLI's added block is a dark green
@@ -118,11 +131,19 @@
   --term-faint: #8d8d8d;
 
   --term-mark: #bf5b3d;
+  /* Same five stops walked down for a light ground; the dark set's cyan is
+     invisible on white. */
+  --term-shimmer-1: #7a4fb0;
+  --term-shimmer-2: #5457b8;
+  --term-shimmer-3: #4347c9;
+  --term-shimmer-4: #3f6fb5;
+  --term-shimmer-5: #1f7d8c;
   --term-blue: #0a66c2;
   --term-green: #16794a;
   --term-red: #c62828;
   --term-yellow: #8a6d00;
   --term-magenta: #8b3a8b;
+  --term-peer: #0e7490;
 
   --term-add-fg: #12492a;
   --term-add-bg: #e2f6e5;
@@ -262,6 +283,63 @@
 [data-terminal] [data-tone='magenta'] {
   color: var(--term-magenta);
 }
+[data-terminal] [data-tone='peer'] {
+  color: var(--term-peer);
+}
+
+/* Work in progress. One element, never a span per character: the transcript
+   measures its own rows and supports text selection, and both break the moment
+   a line is shredded into glyphs. The tile is periodic (it ends on the colour
+   it starts on) and the animation travels exactly one tile width, so the loop
+   has no seam. Scoped under `[data-terminal]` to outrank the tone rules, which
+   would otherwise repaint the clipped text opaque. */
+[data-terminal] .term-shimmer {
+  background-image: linear-gradient(
+    90deg,
+    var(--term-shimmer-1),
+    var(--term-shimmer-2),
+    var(--term-shimmer-3),
+    var(--term-shimmer-4),
+    var(--term-shimmer-5),
+    var(--term-shimmer-4),
+    var(--term-shimmer-3),
+    var(--term-shimmer-2),
+    var(--term-shimmer-1)
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  animation: term-shimmer 3s linear infinite;
+}
+
+@keyframes term-shimmer {
+  from {
+    background-position: 0% 0;
+  }
+  to {
+    background-position: 200% 0;
+  }
+}
+
+/* Clipped text with a transparent fill selects invisibly - the highlight paints
+   under glyphs that have no colour of their own. */
+[data-terminal] .term-shimmer::selection {
+  color: var(--term-bright);
+  -webkit-text-fill-color: var(--term-bright);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-terminal] .term-shimmer {
+    animation: none;
+    background-image: none;
+    -webkit-background-clip: border-box;
+    background-clip: border-box;
+    -webkit-text-fill-color: var(--term-shimmer-3);
+    color: var(--term-shimmer-3);
+  }
+}
 
 /* Weight is the only other axis. A terminal has one type size, so emphasis has
    to be carried by weight and colour - never by a larger glyph. */
@@ -411,6 +489,12 @@
   cursor: text;
 }
 
+/* A peer's message is not what you typed, so it drops the prompt band: the peer
+   tone and the arrow carry it, and the band is reserved for the human's turn. */
+[data-terminal] .term-user[data-peer] {
+  background: none;
+}
+
 [data-terminal] .term-link {
   text-decoration: underline;
   text-underline-offset: 2px;
@@ -1130,6 +1214,15 @@ button.term-link {
   overflow: hidden;
 }
 
+/* A closed peer send: one row, ellipsised. The row must stay exactly one line
+   tall or the virtualizer's estimate for it is wrong. */
+.term-clip-1 {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 .term-scrubber .term-scrub-ex {
   display: -webkit-box;
   -webkit-line-clamp: 4;

package/src/styles/theme.css

@@ -271,7 +271,7 @@
   --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
 
   --cw-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-  --cw-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
+  --cw-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
 
   --motion-fast: 120ms;
   --motion-base: 150ms;