@workerdeck/ui 2.9.0 → 2.11.0

package/src/components/terminal/items.tsx

@@ -1,18 +1,21 @@
-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'
 import { usePulse } from '../agent/pulse.tsx'
+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'
@@ -34,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 || ' '}
-              </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>
@@ -127,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>
@@ -252,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 ? (
@@ -266,11 +345,19 @@ 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>
       <Row tone={item.isError ? 'red' : 'faint'}>
-        {item.isError ? item.subtype : 'done'} · {formatDuration(item.durationMs)} · {formatCost(item.totalCostUsd)}
+        {item.isError ? item.subtype : 'done'} · {formatDuration(item.durationMs)} · {formatCost(item.costUsd ?? item.totalCostUsd)}
       </Row>
       {item.errors?.map((message, index) => (
         <Row key={index} tone="red">
@@ -334,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

@@ -63,6 +63,8 @@ export { Band, Blank, Ink, Row, type RowProps, type Tone } from './components/te
 export { CopyAction, WithActions, useAffordances, type TerminalAffordances } from './components/terminal/affordances.tsx'
 export { FileLinkProvider, useFileLinks, type FileLinkHandle, type FileLinkOpener } from './components/terminal/file-link.tsx'
 export { parseFileLink, type FileLink } from './lib/file-link.ts'
+export { matchPath, type PathHit, type PathMatch } from './lib/path-match.ts'
+export { usePathLinks, resolveAgainstCwd } from './components/agent/use-path-links.ts'
 export { Conversation, ConversationContent, ConversationScrollButton, type ConversationProps } from './components/agent/Conversation.tsx'
 export { Message, MessageContent, type MessageProps } from './components/agent/Message.tsx'
 export {
@@ -119,7 +121,7 @@ export { SkillsDialog, type SkillsDialogProps } from './components/agent/SkillsD
 export { HostFilesDialog, type HostFilesDialogProps } from './components/agent/HostFilesDialog.tsx'
 export { SessionList, SessionListItem, type SessionListItemProps, type SessionListProps } from './components/agent/SessionList.tsx'
 export { SessionBrowser, rowShapeClass, type SessionBrowserProps } from './components/agent/SessionBrowser.tsx'
-export { SessionItem, type SessionItemProps } from './components/agent/SessionItem.tsx'
+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'

package/src/lib/path-match.ts

@@ -0,0 +1,51 @@
+// One path segment: no whitespace, no separator, none of the characters that bracket a path in
+// prose. `:` is out because it introduces `:line`.
+const SEG = '[^\\s:\'"`()\\[\\]{}<>|]+'
+
+// The first segment of a relative path additionally cannot start with `@`: in an `@file` mention
+// (`@_docs/BACKLOG.md`) the `@` is the mention's sigil, not part of the name.
+const HEAD = '[^\\s:\'"`()\\[\\]{}<>|@,]+'
+
+// The match must start at a token boundary, never consumed into the path: unanchored,
+// `@_docs/BACKLOG.md` matched the suffix `/BACKLOG.md` and opened at the filesystem root.
+const PATH_PATTERN = new RegExp(`(?:^|[\\s'"\`([{<@,])((?:\\.\\.?)?(?:/${SEG})+|${HEAD}(?:/${SEG})+)(?::(\\d+))?`)
+
+const FILE_PATTERN = /^([\w.@-]+\.[A-Za-z0-9]{1,10})(?::(\d+))?$/
+
+const TRAILING = /[.,;:!?)\]}'"`]+$/
+
+const FILENAME = /\.[A-Za-z0-9]{1,10}$/
+
+export type PathHit = { path: string; line?: number }
+
+export type PathMatch = PathHit & {
+  // How much of the inspected text the path accounted for, the "mostly a path" test the hover makes.
+  length: number
+}
+
+export function matchPath(text: string | null | undefined, inCode = false): PathMatch | undefined {
+  const source = text ?? ''
+  const match = PATH_PATTERN.exec(source)
+  if (!match) {
+    return inCode ? matchFilename(source) : undefined
+  }
+  const path = match[1]!.replace(TRAILING, '')
+  if (!path.includes('/') || path.endsWith('/')) {
+    return undefined
+  }
+  const rooted = path.startsWith('/') || path.startsWith('./') || path.startsWith('../')
+  if (!rooted && !FILENAME.test(path)) {
+    return undefined
+  }
+  const line = match[2] ? Number(match[2]) : undefined
+  return { path, line, length: path.length + (match[2] ? match[2].length + 1 : 0) }
+}
+
+function matchFilename(text: string): PathMatch | undefined {
+  const hit = FILE_PATTERN.exec(text.trim())
+  if (!hit) {
+    return undefined
+  }
+  const line = hit[2] ? Number(hit[2]) : undefined
+  return { path: hit[1]!, line, length: hit[0].length }
+}

package/src/lib/session-cost.ts

@@ -0,0 +1,75 @@
+import {
+  type ByModel,
+  type CostBasis,
+  type CostBreakdown,
+  type PricingTable,
+  type TokenUsage,
+  UNPRICED_WARN_SHARE,
+  canonicalModel,
+  costOf,
+  costOfByModel,
+  rateFor,
+  totalTokens,
+  unknownBasisModels,
+} from '@workerdeck/protocol'
+
+export type SessionCostRow = {
+  model: string
+  usage: TokenUsage
+  tokens: number
+  costUsd: number | undefined
+  costBasis: CostBasis | undefined
+}
+
+export type SessionCost = {
+  displayUsd: number | undefined
+  computedUsd: number | undefined
+  reportedUsd: number | undefined
+  breakdown: CostBreakdown
+  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
+}
+
+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 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)
+    .map(([model, usage]) => ({
+      model: canonicalModel(model),
+      usage,
+      tokens: totalTokens(usage),
+      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
+  const worthShowing = gap !== undefined && Math.abs(gap) > Math.max(0.01, GAP_SHARE * Math.max(computedUsd ?? 0, reportedUsd ?? 0))
+  return {
+    displayUsd: computedUsd ?? reportedUsd,
+    computedUsd,
+    reportedUsd,
+    breakdown,
+    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;