@workerdeck/ui 2.10.0 → 2.12.0

package/src/components/terminal/TerminalTranscript.tsx

@@ -8,7 +8,8 @@ import {
   CompactionRow,
   FileRow,
   NoticeRow,
-  ToolRunRow,
+  PeerSendRow,
+  RunRow,
   ThinkingRow,
   ToolRow,
   TurnResultRow,
@@ -17,8 +18,9 @@ import {
 } from './items.tsx'
 import { blockNeedsBlank, taskChildItems, terminalBlocks, type TaskBlock } from './blocks.ts'
 import { usePulse } from '../agent/pulse.tsx'
+import { PeerNamesProvider } from './peer-names.tsx'
 import { Pressable, useRevealOnOpen } from './press.tsx'
-import { taskBrief, taskBusy, taskFailed, taskSummary } from './tool-run.ts'
+import { isPeerSend, taskBrief, taskBusy, taskFailed, taskSummary } from './tool-run.ts'
 import { BRIEF_LINES } from './height.ts'
 import { Blank, Row } from './row.tsx'
 import { TerminalSurface } from './surface.tsx'
@@ -44,7 +46,7 @@ export function TerminalItemView({ item, fileUrl }: { item: TranscriptItem; file
       return <ThinkingRow item={item} />
     }
     case 'tool_call': {
-      return <ToolRow item={item} />
+      return isPeerSend(item) ? <PeerSendRow item={item} /> : <ToolRow item={item} />
     }
     case 'turn_result': {
       return <TurnResultRow item={item} />
@@ -110,7 +112,7 @@ export function TaskRow({
     <div ref={reveal} className={open ? 'term-open' : undefined}>
       <Pressable onPress={() => setOpen((v) => !v)} expanded={open}>
         <Row glyph={busy ? pulse : '●'} glyphTone={failed ? 'red' : busy ? 'mark' : 'dim'} tone={failed ? 'red' : 'green'}>
-          {taskSummary(block.task, children)}
+          {busy ? <span className="term-shimmer">{taskSummary(block.task, children)}</span> : taskSummary(block.task, children)}
         </Row>
       </Pressable>
       {open ? (
@@ -119,7 +121,7 @@ export function TaskRow({
           {block.children.map((leaf, index) => (
             <Fragment key={leaf.key}>
               {index > 0 && blockNeedsBlank(block.children[index - 1]!, leaf) ? <Blank /> : null}
-              {'run' in leaf ? <ToolRunRow items={leaf.run} /> : <TerminalItemView item={leaf.item} fileUrl={fileUrl} />}
+              {'run' in leaf ? <RunRow items={leaf.run} /> : <TerminalItemView item={leaf.item} fileUrl={fileUrl} />}
             </Fragment>
           ))}
         </div>
@@ -170,28 +172,30 @@ export function TerminalTranscript({ state, fileUrl, fontSize, lineHeight, affor
       bleed="1ch"
       className={cn('term-transcript', className)}
     >
-      {blocks.map((block, index) => (
-        <Fragment key={block.key}>
-          {index > 0 && blockNeedsBlank(blocks[index - 1]!, block) ? <Blank /> : null}
-          {'run' in block ? (
-            <ToolRunRow items={block.run} />
-          ) : 'item' in block ? (
-            <TerminalItemView item={block.item} fileUrl={fileUrl} />
-          ) : (
-            <TaskRow block={block} fileUrl={fileUrl} />
-          )}
-        </Fragment>
-      ))}
-      {working(state) ? (
-        <>
-          {state.items.length > 0 ? <Blank /> : null}
-          <WorkingRow
-            label={state.status === 'starting' ? 'Starting…' : 'Working…'}
-            startedAt={runStartedAt}
-            tokens={state.contextUsage?.totalTokens}
-          />
-        </>
-      ) : null}
+      <PeerNamesProvider items={state.items}>
+        {blocks.map((block, index) => (
+          <Fragment key={block.key}>
+            {index > 0 && blockNeedsBlank(blocks[index - 1]!, block) ? <Blank /> : null}
+            {'run' in block ? (
+              <RunRow items={block.run} />
+            ) : 'item' in block ? (
+              <TerminalItemView item={block.item} fileUrl={fileUrl} />
+            ) : (
+              <TaskRow block={block} fileUrl={fileUrl} />
+            )}
+          </Fragment>
+        ))}
+        {working(state) ? (
+          <>
+            {state.items.length > 0 ? <Blank /> : null}
+            <WorkingRow
+              label={state.status === 'starting' ? 'Starting…' : 'Working…'}
+              startedAt={runStartedAt}
+              tokens={state.contextUsage?.totalTokens}
+            />
+          </>
+        ) : null}
+      </PeerNamesProvider>
     </TerminalSurface>
   )
 }

package/src/components/terminal/blocks.ts

@@ -1,5 +1,5 @@
 import type { TranscriptItem } from '@workerdeck/react'
-import { foldsTogether } from './tool-run.ts'
+import { foldsTogether, isPeerSend } from './tool-run.ts'
 
 export type ToolCallItem = Extract<TranscriptItem, { kind: 'tool_call' }>
 
@@ -42,7 +42,7 @@ export function taskChildItems(block: TaskBlock): TranscriptItem[] {
 
 function pushLeaf(out: LeafBlock[], item: TranscriptItem, index: number): void {
   const previous = out.at(-1)
-  if (isRunCall(item)) {
+  if (isRunCall(item) && !isPeerSend(item)) {
     if (previous && 'run' in previous && foldsTogether(previous.run[0]!, item)) {
       previous.run.push(item)
       previous.indices.push(index)
@@ -112,13 +112,21 @@ export function terminalBlocks(items: readonly TranscriptItem[], offset = 0, fol
 }
 
 export function needsBlank(previous: TranscriptItem, next: TranscriptItem): boolean {
-  if (previous.kind === 'tool_call' && next.kind === 'tool_call') {
-    return false
+  if (isPeerSend(previous) || isPeerSend(next)) {
+    return true
   }
-  return true
+  return !(previous.kind === 'tool_call' && next.kind === 'tool_call')
+}
+
+function blockKind(block: TerminalBlock): string {
+  if (!('item' in block)) {
+    return 'tool_call'
+  }
+  // A peer send is a tool call on the wire and a message on the page, so it takes the blank line
+  // every other message gets rather than sitting flush against the run above it.
+  return isPeerSend(block.item) ? 'peer_send' : block.item.kind
 }
 
 export function blockNeedsBlank(previous: TerminalBlock, next: TerminalBlock): boolean {
-  const kind = (block: TerminalBlock) => ('item' in block ? block.item.kind : 'tool_call')
-  return !(kind(previous) === 'tool_call' && kind(next) === 'tool_call')
+  return !(blockKind(previous) === 'tool_call' && blockKind(next) === 'tool_call')
 }

package/src/components/terminal/height.ts

@@ -5,7 +5,7 @@ import { taskChildItems, type TerminalBlock, type ToolCallItem } from './blocks.
 import { IMAGE_BOX_LINES } from './image-box.ts'
 import { collapsedResult } from './result-preview.ts'
 import { todoLine, todoPreview } from './todos.ts'
-import { runSummary, taskSummary } from './tool-run.ts'
+import { isPeerSend, peerName, planRun, runSummary, taskSummary } from './tool-run.ts'
 
 export type CellMetrics = {
   width: number
@@ -595,8 +595,9 @@ export function itemHeight(item: TranscriptItem, m: CellMetrics): ComputedHeight
         acc = add(acc, rowH(item.attachments.map((a) => a.name).join(', '), m, { extraPx }))
       }
       if (item.text) {
-        for (const line of item.text.split('\n')) {
-          acc = add(acc, rowH(line || ' ', m, { extraPx }))
+        const who = item.origin ? `${peerName(item.origin)}: ` : ''
+        for (const [index, line] of item.text.split('\n').entries()) {
+          acc = add(acc, rowH((index === 0 ? who : '') + (line || ' '), m, { extraPx }))
         }
       }
       return acc
@@ -608,6 +609,10 @@ export function itemHeight(item: TranscriptItem, m: CellMetrics): ComputedHeight
       return rowH(item.text, m, { extraPx })
     }
     case 'tool_call': {
+      // A closed peer send is exactly one ellipsised row, whatever the message's length.
+      if (isPeerSend(item)) {
+        return { px: m.line + extraPx, exact: true }
+      }
       return toolRowHeight(item, m, extraPx)
     }
     case 'turn_result': {
@@ -640,8 +645,12 @@ export function blockHeight(block: TerminalBlock, m: CellMetrics): ComputedHeigh
     return rowH(taskSummary(block.task, taskChildItems(block)), m)
   }
   if ('run' in block) {
-    const busy = block.run.some((item) => item.status === 'running' || item.status === 'pending')
-    return rowH(runSummary(block.run, busy), m)
+    const plan = planRun(block.run)
+    if (plan.kind === 'call') {
+      return itemHeight(plan.item, m)
+    }
+    const busy = plan.items.some((item) => item.status === 'running' || item.status === 'pending')
+    return rowH(runSummary(plan.items, busy), m)
   }
   return itemHeight(block.item, m)
 }

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/index.ts

@@ -94,6 +94,7 @@ export { Composer, type ComposerFileMatch, type ComposerHandle, type ComposerPro
 export {
   mergeComposerRows,
   rankComposerRows,
+  rankPeerSessions,
   matchClientCommand,
   skillPrompt,
   type ClientCommand,
@@ -124,11 +125,18 @@ export { SessionBrowser, rowShapeClass, type SessionBrowserProps } from './compo
 export { SessionItem, type SelectModifiers, type SessionItemProps } from './components/agent/SessionItem.tsx'
 export { SessionStatusIcon } from './components/agent/SessionStatusIcon.tsx'
 export { EngineIcon, engineMark, vendorMarkClass, vendorTextClass } from './components/agent/EngineIcon.tsx'
-export { type Step, StepRow, StepToggle, runningSteps, sessionSteps } from './components/agent/SessionSteps.tsx'
+export { type Step, StepRow, sessionSteps } from './components/agent/SessionSteps.tsx'
+export {
+  SUBAGENT_DISPLAY_META,
+  SUBAGENT_DISPLAY_ORDER,
+  SubagentDisplayIcon,
+  SubagentToggle,
+  type SubagentToggleProps,
+} from './components/agent/SubagentToggle.tsx'
 export { SubagentStrip } from './components/agent/SubagentStrip.tsx'
 export { ProjectIcon } from './components/agent/ProjectIcon.tsx'
 export { SessionEmptyState, type SessionEmptyStateProps } from './components/agent/SessionEmptyState.tsx'
-export { PromptTokenText } from './components/agent/PromptTokenText.tsx'
+export { PromptTokenText, SessionNamesProvider, SkillNamesProvider } from './components/agent/PromptTokenText.tsx'
 export { STATUS_META } from './components/agent/status.ts'
 export { ContextRing } from './components/agent/ContextRing.tsx'
 

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': {