@workerdeck/ui 2.10.0 → 2.11.0

package/build/workspace.mjs

@@ -1,4 +1,4 @@
-import { At as Spinner, B as EntryIcon, Ft as TooltipProvider, Nt as Tip, Ot as Splitter, an as Button, i as SessionPanel, n as usePathLinks, nn as Input, sn as cn, t as resolveAgainstCwd } from "./use-path-links-CvcxdUXL.mjs";
+import { At as Spinner, B as EntryIcon, Ft as TooltipProvider, Nt as Tip, Ot as Splitter, an as Button, i as SessionPanel, n as usePathLinks, nn as Input, sn as cn, t as resolveAgainstCwd } from "./use-path-links-DO_79-wX.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": "2.10.0",
+  "version": "2.11.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/client": "2.10.0",
-    "@workerdeck/react": "2.10.0",
-    "@workerdeck/protocol": "2.10.0"
+    "@workerdeck/client": "2.11.0",
+    "@workerdeck/protocol": "2.11.0",
+    "@workerdeck/react": "2.11.0"
   },
   "peerDependencies": {
     "monaco-editor": "^0.56.0",

package/src/components/agent/SessionItem.tsx

@@ -1,6 +1,6 @@
 import { Fragment, useEffect, useRef, useState } from 'react'
 import type { ReactNode } from 'react'
-import { projectLabel, projectSubpath, sessionLabel } from '@workerdeck/protocol'
+import { projectLabel, projectName, projectSubpath, sessionLabel } from '@workerdeck/protocol'
 import type { SessionRow } from '@workerdeck/protocol'
 import { ContextRing } from './ContextRing.tsx'
 import { EngineIcon, vendorMarkClass, vendorTextClass } from './EngineIcon.tsx'
@@ -68,6 +68,7 @@ export function SessionItem({
 
   const engine = info.engine ?? 'claude'
   const project = showProject ? projectLabel(row) : projectSubpath(row)
+  const projectTitle = showProject ? projectName(row) : undefined
   const projectIcon = showProject ? info.project?.icon : undefined
   const iconSrc = projectIcon?.type === 'image' ? projectIcons?.[projectIcon.hash] : undefined
   const cost = formatCost(info.costUsd ?? info.totalCostUsd)
@@ -88,8 +89,8 @@ export function SessionItem({
   }
   if (project !== undefined) {
     parts.push(
-      <span key="project">
-        <ProjectIcon icon={projectIcon} src={iconSrc} name={project} className="mr-1.5 size-4 align-[-0.3em]" />
+      <span key="project" title={projectTitle}>
+        <ProjectIcon icon={projectIcon} src={iconSrc} name={projectTitle} className="mr-1.5 size-4 align-[-0.3em]" />
         {project}
       </span>,
     )

package/src/components/agent/SessionPanel.tsx

@@ -264,6 +264,7 @@ export function SessionPanel({
     replaying,
     protocolMismatch,
     shell,
+    pricing,
     models,
     effectiveModel,
     handle,
@@ -835,6 +836,7 @@ export function SessionPanel({
                         totalCostUsd={state.totalCostUsd}
                         costUsd={state.costUsd}
                         usageByModel={state.usageByModel}
+                        pricing={pricing}
                         spend={profileSpend}
                         updatedAt={usageUpdatedAt}
                         open={panel === 'usage'}

package/src/components/agent/TranscriptItemView.tsx

@@ -10,6 +10,7 @@ import { Response } from './Response.tsx'
 import { ToolCallCard } from './ToolCallCard.tsx'
 import { Row } from '../terminal/row.tsx'
 import { TerminalItemView } from '../terminal/TerminalTranscript.tsx'
+import { peerLabel } from '../terminal/items.tsx'
 
 function TurnResultRow({ item }: { item: Extract<TranscriptItem, { kind: 'turn_result' }> }) {
   return (
@@ -69,6 +70,7 @@ export function TranscriptItemView({
     case 'user': {
       return (
         <Message from="user">
+          {item.origin ? <div className="wd-peer-origin text-xs text-muted-foreground">{peerLabel(item.origin)}</div> : null}
           {item.attachments?.length ? <SentAttachments attachments={item.attachments} attachmentUrl={attachmentUrl} /> : null}
           {item.text ? (
             <MessageContent>

package/src/components/agent/TranscriptRows.tsx

@@ -6,14 +6,15 @@ import type { PermissionRequest } from '@workerdeck/protocol'
 import type { TranscriptItem } from '@workerdeck/react'
 import { cn } from '../../lib/utils.ts'
 import { resolveAffordances, type TerminalAffordances } from '../terminal/affordances.tsx'
-import { ToolRunRow } from '../terminal/items.tsx'
+import { RunRow } from '../terminal/items.tsx'
 import { parentOf } from '../terminal/blocks.ts'
 import { briefPx, estimateBlockPx } from '../terminal/height.ts'
+import { PeerNamesProvider } from '../terminal/peer-names.tsx'
 import { TerminalScrubber } from '../terminal/scrubber.tsx'
 import { Scrubber } from './Scrubber.tsx'
 import { gapBefore, positionInRow, rowIndexForItem, type TranscriptRow } from './transcript-rows.ts'
 import { useHeightEpoch } from './use-height-epoch.ts'
-import { useTranscriptJumps } from './use-transcript-jumps.ts'
+import { absorbScrollerResize, useTranscriptJumps } from './use-transcript-jumps.ts'
 import { BriefRow, TaskRow } from '../terminal/TerminalTranscript.tsx'
 import { RecapRow, TranscriptItemView } from './TranscriptItemView.tsx'
 
@@ -167,9 +168,10 @@ export function TranscriptRows({
       if (height === last) {
         return
       }
+      const difference = height - last
       last = height
       if (stick.state.isAtBottom) {
-        void stick.scrollToBottom('instant')
+        absorbScrollerResize(stick, difference)
       }
     })
     observer.observe(scrollElement)
@@ -318,64 +320,66 @@ export function TranscriptRows({
 
   return (
     <div ref={rowsRef} data-slot="transcript-rows" className="relative w-full" style={{ height: virtualizer.getTotalSize() }}>
-      {virtualizer.getVirtualItems().map((virtualRow) => {
-        const row = rows[virtualRow.index]
-        const gapClass = virtualRow.index > 0 && (!terminal || gapBefore(rows, virtualRow.index)) ? gap.className : undefined
-        const content =
-          'run' in row ? (
-            <div className={cn(read(boundary, row.index) && 'opacity-45')}>
-              <ToolRunRow items={row.run} />
-            </div>
-          ) : 'item' in row ? (
-            <div className={cn(read(boundary, row.index) && 'opacity-45', nestedClass(row.item, frameParentId))}>
-              <TranscriptItemView
-                item={row.item}
-                fileUrl={fileUrl}
-                attachmentUrl={attachmentUrl}
-                hostImage={hostImage}
+      <PeerNamesProvider items={items}>
+        {virtualizer.getVirtualItems().map((virtualRow) => {
+          const row = rows[virtualRow.index]
+          const gapClass = virtualRow.index > 0 && (!terminal || gapBefore(rows, virtualRow.index)) ? gap.className : undefined
+          const content =
+            'run' in row ? (
+              <div className={cn(read(boundary, row.index) && 'opacity-45')}>
+                <RunRow items={row.run} />
+              </div>
+            ) : 'item' in row ? (
+              <div className={cn(read(boundary, row.index) && 'opacity-45', nestedClass(row.item, frameParentId))}>
+                <TranscriptItemView
+                  item={row.item}
+                  fileUrl={fileUrl}
+                  attachmentUrl={attachmentUrl}
+                  hostImage={hostImage}
+                  terminal={terminal}
+                />
+              </div>
+            ) : 'text' in row && row.key === 'brief' ? (
+              <BriefRow text={row.text} terminal={terminal} />
+            ) : 'line' in row ? (
+              <RecapRow line={row.line} since={since} terminal={terminal} />
+            ) : (
+              <div className={cn(read(boundary, row.index) && 'opacity-45')}>
+                <TaskRow block={row} fileUrl={fileUrl} onOpenSubagent={onOpenSubagent} />
+              </div>
+            )
+          if (stickyPrompt && 'item' in row && row.item.kind === 'user' && parentOf(row.item) === undefined) {
+            const next = promptRows.find((index) => index > virtualRow.index)
+            const laneEnd = next === undefined ? virtualizer.getTotalSize() : (measurements[next]?.start ?? virtualRow.start)
+            return (
+              <StickyPromptLane
+                key={row.key}
+                top={virtualRow.start}
+                height={Math.max(laneEnd - virtualRow.start, 0)}
+                gapClass={gapClass}
+                gapPx={gap.px}
                 terminal={terminal}
+                scrollRoot={scrollElement}
+                index={virtualRow.index}
+                measureRef={virtualizer.measureElement}
+                head={terminal ? content : promptHeadText(row.item)}
+                content={content}
               />
-            </div>
-          ) : 'text' in row && row.key === 'brief' ? (
-            <BriefRow text={row.text} terminal={terminal} />
-          ) : 'line' in row ? (
-            <RecapRow line={row.line} since={since} terminal={terminal} />
-          ) : (
-            <div className={cn(read(boundary, row.index) && 'opacity-45')}>
-              <TaskRow block={row} fileUrl={fileUrl} onOpenSubagent={onOpenSubagent} />
-            </div>
-          )
-        if (stickyPrompt && 'item' in row && row.item.kind === 'user' && parentOf(row.item) === undefined) {
-          const next = promptRows.find((index) => index > virtualRow.index)
-          const laneEnd = next === undefined ? virtualizer.getTotalSize() : (measurements[next]?.start ?? virtualRow.start)
+            )
+          }
           return (
-            <StickyPromptLane
+            <div
               key={row.key}
-              top={virtualRow.start}
-              height={Math.max(laneEnd - virtualRow.start, 0)}
-              gapClass={gapClass}
-              gapPx={gap.px}
-              terminal={terminal}
-              scrollRoot={scrollElement}
-              index={virtualRow.index}
-              measureRef={virtualizer.measureElement}
-              head={terminal ? content : promptHeadText(row.item)}
-              content={content}
-            />
+              ref={virtualizer.measureElement}
+              data-index={virtualRow.index}
+              className={cn('absolute inset-x-0 top-0', gapClass)}
+              style={{ transform: `translateY(${virtualRow.start}px)` }}
+            >
+              {content}
+            </div>
           )
-        }
-        return (
-          <div
-            key={row.key}
-            ref={virtualizer.measureElement}
-            data-index={virtualRow.index}
-            className={cn('absolute inset-x-0 top-0', gapClass)}
-            style={{ transform: `translateY(${virtualRow.start}px)` }}
-          >
-            {content}
-          </div>
-        )
-      })}
+        })}
+      </PeerNamesProvider>
       {scrubber && scrollElement?.parentElement
         ? createPortal(
             terminal ? (

package/src/components/agent/UsageDialog.tsx

@@ -1,5 +1,5 @@
-import type { ByModel, ProfileEngine, ProfileSpend, UsageWindowRow } from '@workerdeck/protocol'
-import { PRICING_NOTE } from '@workerdeck/protocol'
+import type { ByModel, PricingTable, ProfileEngine, ProfileSpend, UsageWindowRow } from '@workerdeck/protocol'
+import { PRICING_NOTE, pricingAgeNote } from '@workerdeck/protocol'
 import { Badge } from '../ui/Badge.tsx'
 import { Dialog, DialogBody, DialogContent, DialogHeader } from '../ui/Dialog.tsx'
 import { formatAgoPrecise, formatCost, formatTokens } from '../../lib/format.ts'
@@ -13,6 +13,7 @@ export interface UsageDialogProps {
   totalCostUsd?: number
   costUsd?: number
   usageByModel?: ByModel
+  pricing?: PricingTable
   spend?: ProfileSpend
   updatedAt?: number
   open: boolean
@@ -20,6 +21,10 @@ export interface UsageDialogProps {
   className?: string
 }
 
+function engineLabel(engine: ProfileEngine): string {
+  return engine === 'claude' ? 'Claude Code' : engine
+}
+
 function Line({ label, value, tone }: { label: string; value: string; tone?: 'muted' }) {
   return (
     <div className="flex items-baseline justify-between gap-4">
@@ -62,9 +67,15 @@ function CostEvidence({ cost, engine }: { cost: SessionCost; engine: ProfileEngi
           rather than an estimate.
         </p>
       ) : null}
+      {cost.unknownBasisModels.length > 0 ? (
+        <p className="text-label text-warning">
+          {engineLabel(engine)} matched no rate table of its own to {cost.unknownBasisModels.join(', ')}, so the figure it reports for those
+          tokens is a guess rather than a rate.
+        </p>
+      ) : null}
       {cost.gapUsd !== undefined ? (
         <p className="text-label text-fg-4">
-          {engine === 'claude' ? 'Claude Code' : engine} reports {formatCost(cost.reportedUsd)} for the same tokens.
+          {engineLabel(engine)} reports {formatCost(cost.reportedUsd)} for the same tokens.
         </p>
       ) : null}
     </div>
@@ -98,6 +109,7 @@ export function UsageDialog({
   totalCostUsd,
   costUsd,
   usageByModel,
+  pricing,
   spend,
   updatedAt,
   open,
@@ -105,13 +117,14 @@ export function UsageDialog({
   className,
 }: UsageDialogProps) {
   const now = useMinuteClock(open)
-  const cost = sessionCost({ costUsd, totalCostUsd, usageByModel })
+  const cost = sessionCost({ costUsd, totalCostUsd, usageByModel, pricing })
+  const ageNote = pricingAgeNote(now)
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className={className}>
         <DialogHeader
           title="Usage"
-          description={engine === 'claude' ? 'Claude Code' : engine}
+          description={engineLabel(engine)}
           actions={
             subscriptionType ? (
               <Badge variant="accent" className="mt-0.5 shrink-0 capitalize">
@@ -134,7 +147,7 @@ export function UsageDialog({
             <CostEvidence cost={cost} engine={engine} />
           </div>
           {spend ? <ProfileSpendSection spend={spend} /> : null}
-          <p className="mt-3 text-label text-fg-4">{PRICING_NOTE}</p>
+          <p className="mt-3 text-label text-fg-4">{ageNote ? `${PRICING_NOTE} ${ageNote}` : PRICING_NOTE}</p>
           {updatedAt ? <p className="mt-2 text-label text-fg-4">Updated {formatAgoPrecise(updatedAt, now)}</p> : null}
         </DialogBody>
       </DialogContent>

package/src/components/agent/pulse.tsx

@@ -1,9 +1,57 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useSyncExternalStore } from 'react'
 
-export const PULSE_FRAMES = ['⋄', '◇', '◈', '◆'] as const
-export const PULSE_MS = 150
+export const PULSE_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'] as const
+export const PULSE_MS = 90
 
-export const PULSE_REST = PULSE_FRAMES[PULSE_FRAMES.length - 1]
+export const PULSE_REST = '⠿'
+
+const listeners = new Set<() => void>()
+let ticker: ReturnType<typeof setInterval> | undefined
+let current = PULSE_REST
+
+export function pulseFrameAt(now: number): string {
+  return PULSE_FRAMES[Math.floor(now / PULSE_MS) % PULSE_FRAMES.length]!
+}
+
+function tick(): void {
+  const next = pulseFrameAt(Date.now())
+  if (next === current) {
+    return
+  }
+  current = next
+  for (const listener of listeners) {
+    listener()
+  }
+}
+
+function subscribe(listener: () => void): () => void {
+  listeners.add(listener)
+  if (ticker === undefined) {
+    current = pulseFrameAt(Date.now())
+    ticker = setInterval(tick, PULSE_MS)
+  }
+  return () => {
+    listeners.delete(listener)
+    if (listeners.size === 0 && ticker !== undefined) {
+      clearInterval(ticker)
+      ticker = undefined
+    }
+  }
+}
+
+function subscribeRest(): () => void {
+  return unsubscribeRest
+}
+
+function unsubscribeRest(): void {}
+
+function readFrame(): string {
+  return current
+}
+
+function readRest(): string {
+  return PULSE_REST
+}
 
 export function usePrefersReducedMotion(): boolean {
   const [reduced, setReduced] = useState(false)
@@ -23,16 +71,5 @@ export function usePrefersReducedMotion(): boolean {
 export function usePulse(animated: boolean): string {
   const reduced = usePrefersReducedMotion()
   const running = animated && !reduced
-  const [frame, setFrame] = useState(0)
-  useEffect(() => {
-    if (!running) {
-      return
-    }
-    const timer = setInterval(() => setFrame((f) => f + 1), PULSE_MS)
-    return () => clearInterval(timer)
-  }, [running])
-  if (!running) {
-    return PULSE_REST
-  }
-  return PULSE_FRAMES[frame % PULSE_FRAMES.length]!
+  return useSyncExternalStore(running ? subscribe : subscribeRest, running ? readFrame : readRest, readRest)
 }

package/src/components/agent/use-transcript-jumps.ts

@@ -26,6 +26,31 @@ export function repinToBottom(stick: RepinTarget): void {
   state.scrollTop = state.calculatedTargetScrollTop
 }
 
+// A scroller whose height changes clamps `scrollTop`, and the browser reports that clamp as an
+// ordinary scroll event, which the library reads as scroll-up intent and answers by escaping the
+// bottom lock. Its guard against exactly that, `resizeDifference`, is set only by the observer on
+// the *content*, so a composer collapsing after send breaks the lock while the view still sits at
+// the bottom, and the turn's later output streams past unfollowed (GOTCHAS "A scroller resize
+// escapes the bottom lock"). Set the flag ourselves, on the library's schedule. A live send re-pin
+// owns `state.animation` and `scrollToBottom` would clear it, dropping the `ignoreEscapes` hold
+// into the momentum tail, so press that scroll by hand instead.
+export function absorbScrollerResize(stick: RepinTarget, difference: number): void {
+  const { state } = stick
+  state.resizeDifference = difference
+  requestAnimationFrame(() => {
+    setTimeout(() => {
+      if (state.resizeDifference === difference) {
+        state.resizeDifference = 0
+      }
+    }, 1)
+  })
+  if (state.animation?.ignoreEscapes) {
+    state.scrollTop = state.calculatedTargetScrollTop
+    return
+  }
+  void stick.scrollToBottom('instant')
+}
+
 export function useTranscriptJumps(options: {
   rows: TranscriptRow[]
   terminal: boolean

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