@workerdeck/ui 1.1.0 → 1.3.0

package/src/components/agent/SessionPanel.tsx

@@ -46,7 +46,9 @@ import { BookmarkProvider, type BookmarkHandle, type TerminalAffordances } from
 import { SessionInfoDialog } from './SessionInfoDialog.tsx'
 import { StatusBar } from './StatusBar.tsx'
 import { Transcript } from './Transcript.tsx'
+import { HeldSendsBar, useHeldSends } from './held-sends.tsx'
 import { ToolResultFetchProvider } from './tool-result-fetch.tsx'
+import { ToolTitleProvider } from './tool-titles.tsx'
 import { ToolResultImageProvider, useToolResultImages } from './tool-result-image.tsx'
 import {
   TranscriptDensityProvider,
@@ -99,7 +101,7 @@ export interface SessionPanelProps {
   affordances?: TerminalAffordances | boolean
   terminalMetrics?: TerminalMetrics
   scrubber?: boolean
-  /** Bookmarked transcript item ids — the host owns membership and persistence. */
+  // Bookmarked transcript item ids — the host owns membership and persistence.
   bookmarks?: readonly string[]
   onToggleBookmark?: (itemId: string) => void
   reveal?: { toolUseId: string; nonce: number }
@@ -108,6 +110,9 @@ export interface SessionPanelProps {
   stickyPrompt?: boolean
   transcriptDensity?: TranscriptDensity
   transcriptFont?: TranscriptFont
+  // 'fold' sends a mid-turn message straight through, and the engine folds it into the running
+  // turn (catch-up mode). 'hold' keeps it here until the turn ends.
+  midTurnSend?: 'fold' | 'hold'
   controlsSurface?: 'internal' | 'external' | 'status'
   onControls?: (controls: SessionControls | undefined) => void
   focusComposerOnClick?: boolean
@@ -162,11 +167,9 @@ export type SessionVitals = {
   cwd: TranscriptState['cwd']
   contextUsage: TranscriptState['contextUsage']
   rateLimits: TranscriptState['rateLimits']
-  /**
-   * When the newest window in `rateLimits` was reported, as event time — not receive time. External chrome (the
-   * VS Code status bar, iOS) cannot otherwise tell a live reading from one a days-old session just replayed.
-   * Absent means unknown, which is not the same as fresh.
-   */
+  // When the newest window in `rateLimits` was reported, as event time — not receive time. External chrome (the
+  // VS Code status bar, iOS) cannot otherwise tell a live reading from one a days-old session just replayed.
+  // Absent means unknown, which is not the same as fresh.
   rateLimitsUpdatedAt: number | undefined
   itemCount: number
   totalCostUsd: number
@@ -184,6 +187,7 @@ export function SessionPanel({
   transcriptVariant = 'cards',
   transcriptDensity = 'comfortable',
   transcriptFont = 'sans',
+  midTurnSend = 'fold',
   affordances,
   terminalMetrics,
   scrubber = false,
@@ -395,6 +399,8 @@ export function SessionPanel({
     return [{ name: 'model', description: 'Switch the model for this session', argumentHint: '<model>' }, ...state.commands]
   }, [state.commands])
 
+  const heldSends = useHeldSends({ hold: midTurnSend === 'hold', busy: busy && !ended, send })
+
   const handleSend = (text: string, attachmentIds: string[]) => {
     if (attachmentIds.length === 0) {
       const modelCommand = /^\/model\s+(\S+)$/.exec(text)
@@ -409,7 +415,7 @@ export function SessionPanel({
     }
     setCaughtUp(true)
     repinTranscript.current?.()
-    send(text, attachmentIds)
+    heldSends.submit(text, attachmentIds)
   }
 
   const actionsMenu = (
@@ -540,196 +546,202 @@ export function SessionPanel({
     <TranscriptVariantProvider value={transcriptVariant}>
       <TranscriptDensityProvider value={transcriptDensity}>
         <ToolResultFetchProvider value={loadFullResult}>
-          <ToolResultImageProvider value={resultImages}>
-            <div
-              ref={panelRef}
-              data-slot="session-panel"
-              data-agent-font={transcriptFont}
-              onClick={handleClick}
-              className={cn('flex h-full min-h-0 flex-col overflow-hidden bg-bg', className)}
-              style={fontSize !== undefined ? ({ '--wd-font-size': `${Math.round(fontSize)}px` } as React.CSSProperties) : undefined}
-            >
-              {headerTakesActions ? header({ actions: menu }) : header}
-              {statusPlacement === 'top' ? statusBar : null}
-              {protocolMismatch !== undefined ? (
-                <Notice level="warning">
-                  Server speaks protocol v{protocolMismatch}, this build renders v{PROTOCOL_VERSION}. Some events may not render.
-                </Notice>
-              ) : null}
-              {protocolError ? (
-                <Notice level="error" onDismiss={() => setProtocolError(undefined)}>
-                  {protocolError}
-                </Notice>
-              ) : null}
-              {subagentId !== undefined ? (
-                <SubagentStrip
-                  task={subagentTask}
-                  items={subagentFrameItems}
-                  label={subagentFallbackLabel}
-                  onBack={leaveSubagent}
-                  terminal={terminal}
-                  fontSize={effectiveTermFontSize}
-                  lineHeight={effectiveTermLineHeight}
-                />
-              ) : null}
-              <BookmarkProvider value={bookmarkHandle}>
-                <Transcript
-                  key={subagentId ?? 'session'}
-                  state={state}
-                  fileUrl={sessionId ? (path) => client.sessionFileUrl(sessionId, path) : undefined}
-                  attachmentUrl={sessionId ? (id) => client.attachmentUrl(sessionId, id) : undefined}
-                  canBrowseFiles={hostFiles.available}
-                  hostImage={hostImage}
-                  variant={transcriptVariant}
-                  density={transcriptDensity}
-                  fontSize={effectiveTermFontSize}
-                  lineHeight={effectiveTermLineHeight}
-                  affordances={affordances}
-                  stickyPrompt={stickyPrompt}
-                  scrubber={scrubber}
-                  bookmarks={bookmarks}
-                  replaying={replaying}
-                  catchUp={catchUp && newCount > 0 ? { from: catchUp.itemCount, since: catchUp.since } : undefined}
-                  reveal={returnReveal ?? reveal}
-                  frame={subagentId === undefined ? undefined : { parentToolUseId: subagentId }}
-                  onOpenSubagent={enterSubagent}
-                  emptyState={emptyState}
-                  jumpToRecapRef={jumpToRecap}
-                  repinRef={repinTranscript}
-                />
-              </BookmarkProvider>
-              {catchUp && newCount > 0 && !replaying && subagentId === undefined ? (
-                <div className="px-3 pb-1">
-                  <div
-                    data-slot="catch-up"
-                    className="mx-auto flex w-full max-w-[var(--wd-transcript-max-width)] items-center gap-2 text-label text-fg-3"
-                  >
-                    <span aria-hidden className={cn('select-none', terminal ? 'text-fg-3' : 'text-accent')}>
-                      ※
-                    </span>
-                    <span className="min-w-0 flex-1 truncate">
-                      {newCount} new {newCount === 1 ? 'row' : 'rows'}
-                      {catchUp.since !== undefined ? ` since you were last here` : ''}
-                    </span>
-                    <button
-                      type="button"
-                      onClick={() => jumpToRecap.current?.()}
-                      className="shrink-0 underline-offset-2 hover:text-fg-1 hover:underline"
-                    >
-                      jump
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => setCaughtUp(true)}
-                      className="shrink-0 underline-offset-2 hover:text-fg-1 hover:underline"
-                    >
-                      dismiss
-                    </button>
-                  </div>
-                </div>
-              ) : null}
-              {!readOnly && capabilities.interactiveApprovals && state.pendingApprovals.length > 0 ? (
-                <div className={cn(terminal ? 'pb-2' : 'px-3 pb-2')}>
-                  <PromptSurface
+          <ToolTitleProvider value={state.toolTitles}>
+            <ToolResultImageProvider value={resultImages}>
+              <div
+                ref={panelRef}
+                data-slot="session-panel"
+                data-agent-font={transcriptFont}
+                onClick={handleClick}
+                className={cn('flex h-full min-h-0 flex-col overflow-hidden bg-bg', className)}
+                style={fontSize !== undefined ? ({ '--wd-font-size': `${Math.round(fontSize)}px` } as React.CSSProperties) : undefined}
+              >
+                {headerTakesActions ? header({ actions: menu }) : header}
+                {statusPlacement === 'top' ? statusBar : null}
+                {protocolMismatch !== undefined ? (
+                  <Notice level="warning">
+                    Server speaks protocol v{protocolMismatch}, this build renders v{PROTOCOL_VERSION}. Some events may not render.
+                  </Notice>
+                ) : null}
+                {protocolError ? (
+                  <Notice level="error" onDismiss={() => setProtocolError(undefined)}>
+                    {protocolError}
+                  </Notice>
+                ) : null}
+                {subagentId !== undefined ? (
+                  <SubagentStrip
+                    task={subagentTask}
+                    items={subagentFrameItems}
+                    label={subagentFallbackLabel}
+                    onBack={leaveSubagent}
                     terminal={terminal}
-                    metrics={{ fontSize: effectiveTermFontSize, lineHeight: effectiveTermLineHeight }}
+                    fontSize={effectiveTermFontSize}
+                    lineHeight={effectiveTermLineHeight}
+                  />
+                ) : null}
+                <BookmarkProvider value={bookmarkHandle}>
+                  <Transcript
+                    key={subagentId ?? 'session'}
+                    state={state}
+                    fileUrl={sessionId ? (path) => client.sessionFileUrl(sessionId, path) : undefined}
+                    attachmentUrl={sessionId ? (id) => client.attachmentUrl(sessionId, id) : undefined}
+                    canBrowseFiles={hostFiles.available}
+                    hostImage={hostImage}
+                    variant={transcriptVariant}
+                    density={transcriptDensity}
+                    fontSize={effectiveTermFontSize}
+                    lineHeight={effectiveTermLineHeight}
                     affordances={affordances}
-                  >
-                    {state.pendingApprovals.map((request) => {
-                      const isQuestion = request.toolName === 'AskUserQuestion' && parseUserQuestions(request.input).length > 0
-                      if (terminal) {
+                    stickyPrompt={stickyPrompt}
+                    scrubber={scrubber}
+                    bookmarks={bookmarks}
+                    replaying={replaying}
+                    catchUp={catchUp && newCount > 0 ? { from: catchUp.itemCount, since: catchUp.since } : undefined}
+                    reveal={returnReveal ?? reveal}
+                    frame={subagentId === undefined ? undefined : { parentToolUseId: subagentId }}
+                    onOpenSubagent={enterSubagent}
+                    emptyState={emptyState}
+                    jumpToRecapRef={jumpToRecap}
+                    repinRef={repinTranscript}
+                  />
+                </BookmarkProvider>
+                {catchUp && newCount > 0 && !replaying && subagentId === undefined ? (
+                  <div className="px-3 pb-1">
+                    <div
+                      data-slot="catch-up"
+                      className="mx-auto flex w-full max-w-[var(--wd-transcript-max-width)] items-center gap-2 text-label text-fg-3"
+                    >
+                      <span aria-hidden className={cn('select-none', terminal ? 'text-fg-3' : 'text-accent')}>
+                        ※
+                      </span>
+                      <span className="min-w-0 flex-1 truncate">
+                        {newCount} new {newCount === 1 ? 'row' : 'rows'}
+                        {catchUp.since !== undefined ? ` since you were last here` : ''}
+                      </span>
+                      <button
+                        type="button"
+                        onClick={() => jumpToRecap.current?.()}
+                        className="shrink-0 underline-offset-2 hover:text-fg-1 hover:underline"
+                      >
+                        jump
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => setCaughtUp(true)}
+                        className="shrink-0 underline-offset-2 hover:text-fg-1 hover:underline"
+                      >
+                        dismiss
+                      </button>
+                    </div>
+                  </div>
+                ) : null}
+                {!readOnly && capabilities.interactiveApprovals && state.pendingApprovals.length > 0 ? (
+                  <div className={cn(terminal ? 'pb-2' : 'px-3 pb-2')}>
+                    <PromptSurface
+                      terminal={terminal}
+                      metrics={{ fontSize: effectiveTermFontSize, lineHeight: effectiveTermLineHeight }}
+                      affordances={affordances}
+                    >
+                      {state.pendingApprovals.map((request) => {
+                        const isQuestion = request.toolName === 'AskUserQuestion' && parseUserQuestions(request.input).length > 0
+                        if (terminal) {
+                          return isQuestion ? (
+                            <TerminalQuestionPrompt
+                              key={request.id}
+                              request={request}
+                              onAnswer={approve}
+                              onDismiss={(id) => deny(id, 'Question dismissed by user')}
+                            />
+                          ) : (
+                            <TerminalPermissionPrompt key={request.id} request={request} onApprove={approve} onDeny={deny} />
+                          )
+                        }
                         return isQuestion ? (
-                          <TerminalQuestionPrompt
+                          <QuestionPrompt
                             key={request.id}
                             request={request}
                             onAnswer={approve}
                             onDismiss={(id) => deny(id, 'Question dismissed by user')}
                           />
                         ) : (
-                          <TerminalPermissionPrompt key={request.id} request={request} onApprove={approve} onDeny={deny} />
+                          <PermissionPrompt key={request.id} request={request} onApprove={approve} onDeny={deny} />
                         )
-                      }
-                      return isQuestion ? (
-                        <QuestionPrompt
-                          key={request.id}
-                          request={request}
-                          onAnswer={approve}
-                          onDismiss={(id) => deny(id, 'Question dismissed by user')}
-                        />
-                      ) : (
-                        <PermissionPrompt key={request.id} request={request} onApprove={approve} onDeny={deny} />
-                      )
-                    })}
-                  </PromptSurface>
-                </div>
-              ) : null}
-              {readOnly || subagentId !== undefined ? null : (
-                <Composer
-                  ref={composerRef}
-                  onSend={handleSend}
-                  onInterrupt={interrupt}
-                  busy={busy}
-                  disabled={ended || !sessionId}
-                  commands={capabilities.slashCommands ? commands : undefined}
-                  skills={capabilities.skillsList ? state.skills : undefined}
-                  attachments={attachments}
-                  draft={draft}
-                  onSearchFiles={hostFiles.available ? searchComposerFiles : undefined}
-                  layout={controlsExternal ? 'inline' : 'stacked'}
-                  toolbar={controlsExternal ? undefined : sessionControls}
-                  fontSize={effectiveTermFontSize}
-                  lineHeight={effectiveTermLineHeight}
-                  affordances={affordances}
-                />
-              )}
-              {statusPlacement === 'bottom' ? statusBar : null}
+                      })}
+                    </PromptSurface>
+                  </div>
+                ) : null}
+                {readOnly || subagentId !== undefined ? null : (
+                  <>
+                    <HeldSendsBar held={heldSends.held} onSendNow={heldSends.flush} />
+                    <Composer
+                      ref={composerRef}
+                      onSend={handleSend}
+                      onInterrupt={interrupt}
+                      busy={busy}
+                      disabled={ended || !sessionId}
+                      commands={capabilities.slashCommands ? commands : undefined}
+                      skills={capabilities.skillsList ? state.skills : undefined}
+                      attachments={attachments}
+                      draft={draft}
+                      onSearchFiles={hostFiles.available ? searchComposerFiles : undefined}
+                      layout={controlsExternal ? 'inline' : 'stacked'}
+                      toolbar={controlsExternal ? undefined : sessionControls}
+                      fontSize={effectiveTermFontSize}
+                      lineHeight={effectiveTermLineHeight}
+                      affordances={affordances}
+                    />
+                  </>
+                )}
+                {statusPlacement === 'bottom' ? statusBar : null}
 
-              {!external ? (
-                <>
-                  <SessionInfoDialog
-                    state={state}
-                    client={client}
-                    sessionId={sessionId}
-                    open={panel === 'info'}
-                    onOpenChange={(next) => setPanel(next ? 'info' : undefined)}
-                  />
-                  <ContextDialog
-                    usage={state.contextUsage}
-                    open={panel === 'context'}
-                    onOpenChange={(next) => setPanel(next ? 'context' : undefined)}
-                  />
-                  <UsageDialog
-                    rateLimits={windows}
-                    subscriptionType={state.subscriptionType}
-                    engine={state.engine ?? 'claude'}
-                    totalCostUsd={state.totalCostUsd}
-                    updatedAt={usageUpdatedAt}
-                    open={panel === 'usage'}
-                    onOpenChange={(next) => setPanel(next ? 'usage' : undefined)}
-                  />
-                  <McpDialog
-                    client={client}
-                    sessionId={sessionId}
-                    canManageServers={capabilities.mcpServerActions}
-                    open={panel === 'mcp'}
-                    onOpenChange={(next) => setPanel(next ? 'mcp' : undefined)}
-                  />
-                  <SkillsDialog
-                    skills={state.skills}
-                    open={panel === 'skills'}
-                    onOpenChange={(next) => setPanel(next ? 'skills' : undefined)}
-                    onUse={(skill) => composerRef.current?.insertText(skillPrompt(skill))}
-                  />
-                  <HostFilesDialog
-                    client={client}
-                    cwd={state.cwd}
-                    open={panel === 'files'}
-                    onOpenChange={(next) => setPanel(next ? 'files' : undefined)}
-                  />
-                </>
-              ) : null}
-            </div>
-          </ToolResultImageProvider>
+                {!external ? (
+                  <>
+                    <SessionInfoDialog
+                      state={state}
+                      client={client}
+                      sessionId={sessionId}
+                      open={panel === 'info'}
+                      onOpenChange={(next) => setPanel(next ? 'info' : undefined)}
+                    />
+                    <ContextDialog
+                      usage={state.contextUsage}
+                      engine={state.engine ?? 'claude'}
+                      open={panel === 'context'}
+                      onOpenChange={(next) => setPanel(next ? 'context' : undefined)}
+                    />
+                    <UsageDialog
+                      rateLimits={windows}
+                      subscriptionType={state.subscriptionType}
+                      engine={state.engine ?? 'claude'}
+                      totalCostUsd={state.totalCostUsd}
+                      updatedAt={usageUpdatedAt}
+                      open={panel === 'usage'}
+                      onOpenChange={(next) => setPanel(next ? 'usage' : undefined)}
+                    />
+                    <McpDialog
+                      client={client}
+                      sessionId={sessionId}
+                      canManageServers={capabilities.mcpServerActions}
+                      open={panel === 'mcp'}
+                      onOpenChange={(next) => setPanel(next ? 'mcp' : undefined)}
+                    />
+                    <SkillsDialog
+                      skills={state.skills}
+                      open={panel === 'skills'}
+                      onOpenChange={(next) => setPanel(next ? 'skills' : undefined)}
+                      onUse={(skill) => composerRef.current?.insertText(skillPrompt(skill))}
+                    />
+                    <HostFilesDialog
+                      client={client}
+                      cwd={state.cwd}
+                      open={panel === 'files'}
+                      onOpenChange={(next) => setPanel(next ? 'files' : undefined)}
+                    />
+                  </>
+                ) : null}
+              </div>
+            </ToolResultImageProvider>
+          </ToolTitleProvider>
         </ToolResultFetchProvider>
       </TranscriptDensityProvider>
     </TranscriptVariantProvider>

package/src/components/agent/SessionWorkspace.tsx

@@ -19,6 +19,7 @@ export interface SessionWorkspaceProps {
   transcriptVariant?: SessionPanelProps['transcriptVariant']
   transcriptDensity?: SessionPanelProps['transcriptDensity']
   transcriptFont?: SessionPanelProps['transcriptFont']
+  midTurnSend?: SessionPanelProps['midTurnSend']
   scrubber?: SessionPanelProps['scrubber']
   bookmarks?: SessionPanelProps['bookmarks']
   onToggleBookmark?: SessionPanelProps['onToggleBookmark']
@@ -51,6 +52,7 @@ export function SessionWorkspace({
   transcriptVariant,
   transcriptDensity,
   transcriptFont,
+  midTurnSend,
   scrubber,
   bookmarks,
   onToggleBookmark,
@@ -209,6 +211,7 @@ export function SessionWorkspace({
             transcriptVariant={transcriptVariant}
             transcriptDensity={transcriptDensity}
             transcriptFont={transcriptFont}
+            midTurnSend={midTurnSend}
             scrubber={scrubber}
             bookmarks={bookmarks}
             onToggleBookmark={onToggleBookmark}

package/src/components/agent/StatusBar.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, type ReactNode } from 'react'
 import type { ConnectionState, TranscriptState } from '@workerdeck/react'
-import type { ContextUsage, RateLimitInfo } from '@workerdeck/protocol'
+import type { ContextUsage, ProfileEngine, RateLimitInfo } from '@workerdeck/protocol'
 import { RefreshCw, WifiOff } from 'lucide-react'
 import { Badge } from '../ui/Badge.tsx'
 import { ProgressRing } from '../ui/ProgressRing.tsx'
@@ -8,6 +8,7 @@ import { Spinner } from '../ui/Spinner.tsx'
 import { Tip } from '../ui/Tooltip.tsx'
 import { cn } from '../../lib/utils.ts'
 import { formatCost, formatCountdown, formatTokens } from '../../lib/format.ts'
+import { contextNote } from '../../lib/context-note.ts'
 import { meterColorClass } from '../../lib/status.ts'
 import { cssColor } from '../../lib/css.ts'
 import { STATUS_META } from './status.ts'
@@ -37,11 +38,12 @@ function useNow(intervalMs = 30_000): number {
   return now
 }
 
-function ContextMeter({ usage }: { usage: ContextUsage }) {
+function ContextMeter({ usage, engine }: { usage: ContextUsage; engine: ProfileEngine | undefined }) {
+  const note = contextNote(engine)
   return (
     <Tip
       content={
-        <div className="flex min-w-44 flex-col gap-1 py-0.5">
+        <div className="flex max-w-64 min-w-44 flex-col gap-1 py-0.5">
           {usage.categories.map((c) => (
             <div key={c.name} className="flex items-center gap-2">
               <span className="size-2 shrink-0 rounded-full bg-fg-4" style={cssColor(c.color) ? { backgroundColor: c.color } : undefined} />
@@ -55,6 +57,12 @@ function ContextMeter({ usage }: { usage: ContextUsage }) {
               {formatTokens(usage.totalTokens)} / {formatTokens(usage.maxTokens)} ({usage.percentage.toFixed(0)}%)
             </span>
           </div>
+          {note ? (
+            <div className="mt-0.5 flex flex-col gap-1 border-t border-border pt-1 text-fg-3">
+              <span>{note.summary}</span>
+              <span>{note.hint}</span>
+            </div>
+          ) : null}
         </div>
       }
     >
@@ -166,7 +174,7 @@ export function StatusBar({
       </Slot>
       {state.capabilities.contextUsage && state.contextUsage ? (
         <Slot onClick={onOpenContext} hint="Context breakdown">
-          <ContextMeter usage={state.contextUsage} />
+          <ContextMeter usage={state.contextUsage} engine={state.engine} />
         </Slot>
       ) : null}
       {session || weekly ? (

package/src/components/agent/ToolCallCard.tsx

@@ -8,6 +8,7 @@ import { cn } from '../../lib/utils.ts'
 import { toolInputPreview } from '../../lib/format.ts'
 import { toolIcon } from '../../lib/tool-icon.ts'
 import { useToolResultFetcher } from './tool-result-fetch.tsx'
+import { useToolTitle } from './tool-titles.tsx'
 import { useToolResultImageSrc } from './tool-result-image.tsx'
 import { IMAGE_UNAVAILABLE, imagePlaceholder } from '../terminal/image-box.ts'
 
@@ -110,6 +111,7 @@ export function ToolCallCard({ item, hostImage, className }: ToolCallCardProps)
   const badge = STATE_BADGE[status]
   const isError = status === 'failed' || item.result?.isError === true
   const Icon = toolIcon(item.name)
+  const title = useToolTitle(item.name)
 
   const resultText = item.result?.text ?? ''
   const clipped = !fullResult && resultText.length > RESULT_PREVIEW_CHARS
@@ -119,6 +121,7 @@ export function ToolCallCard({ item, hostImage, className }: ToolCallCardProps)
 
   const details = open ? (
     <div className="flex flex-col gap-2 border-t border-border p-2.5">
+      {title ? <p className="font-mono text-label text-fg-4">{item.name}</p> : null}
       <PlainPayload code={JSON.stringify(item.input, null, 2)} language="json" label="Parameters" />
       {item.logs?.length ? <PlainPayload code={item.logs.join('\n')} label="Logs" /> : null}
       {item.result !== undefined ? (
@@ -177,7 +180,9 @@ export function ToolCallCard({ item, hostImage, className }: ToolCallCardProps)
         )}
       >
         <Icon className="size-3.5 shrink-0 text-fg-3" />
-        <span className="shrink-0 font-mono text-body-sm font-medium text-fg-1">{item.name}</span>
+        <span className={cn('shrink-0 text-body-sm font-medium text-fg-1', title === undefined && 'font-mono')} title={item.name}>
+          {title ?? item.name}
+        </span>
         {item.backend && item.backend !== 'server' ? (
           <Badge variant="neutral" className="shrink-0">
             {item.backend}

package/src/components/agent/TranscriptItemView.tsx

@@ -1,7 +1,7 @@
 import type { MessageAttachment } from '@workerdeck/protocol'
 import type { TranscriptItem } from '@workerdeck/react'
 import { cn } from '../../lib/utils.ts'
-import { formatCost, formatDuration, formatRelativeTime } from '../../lib/format.ts'
+import { COMPACTION_TEXT, formatCost, formatDuration, formatRelativeTime } from '../../lib/format.ts'
 import { FileCard } from './FileCard.tsx'
 import { Message, MessageContent } from './Message.tsx'
 import { PromptTokenText } from './PromptTokenText.tsx'
@@ -48,7 +48,7 @@ function NoticeRow({ item }: { item: Extract<TranscriptItem, { kind: 'notice' }>
   )
 }
 
-/** The item-view switch: one transcript item, drawn for the active variant. */
+// The item-view switch: one transcript item, drawn for the active variant.
 export function TranscriptItemView({
   item,
   fileUrl,
@@ -99,6 +99,9 @@ export function TranscriptItemView({
     case 'notice': {
       return <NoticeRow item={item} />
     }
+    case 'compaction': {
+      return <CompactionRow />
+    }
     case 'file_delivered': {
       return <FileCard item={item} href={fileUrl?.(item.path)} />
     }
@@ -108,6 +111,16 @@ export function TranscriptItemView({
   }
 }
 
+function CompactionRow() {
+  return (
+    <div data-slot="compaction" className="flex items-center gap-2 py-1">
+      <div className="h-px flex-1 bg-border" />
+      <span className="font-mono text-label text-fg-3">≡ {COMPACTION_TEXT}</span>
+      <div className="h-px flex-1 bg-border" />
+    </div>
+  )
+}
+
 export function RecapRow({ line, since, terminal }: { line: string; since?: number; terminal?: boolean }) {
   const away = since === undefined ? undefined : formatRelativeTime(since)
   const text = away ? `${line} · last here ${away}` : line

package/src/components/agent/TranscriptRows.tsx

@@ -90,12 +90,10 @@ function StickyPromptLane({
   )
 }
 
-/**
- * The virtualized row lane and its scroll-ownership regime. Two things want to write
- * `scrollTop` — the follow spring and the virtualizer's size-change corrections — and they are
- * split by regime here: pinned, corrections are suppressed outright; escaped, the virtualizer
- * corrects so the scrollback holds still (GOTCHAS "The transcript is virtualized").
- */
+// The virtualized row lane and its scroll-ownership regime. Two things want to write
+// `scrollTop` — the follow spring and the virtualizer's size-change corrections — and they are
+// split by regime here: pinned, corrections are suppressed outright; escaped, the virtualizer
+// corrects so the scrollback holds still (GOTCHAS "The transcript is virtualized").
 export function TranscriptRows({
   rows,
   boundary,