@workerdeck/ui 2.15.0 → 3.1.0

package/src/components/agent/Transcript.tsx

@@ -4,7 +4,7 @@ import { cn } from '../../lib/utils.ts'
 import { Conversation, ConversationContent, ConversationScrollButton } from './Conversation.tsx'
 import { Loader } from './Loader.tsx'
 import { SessionEmptyState } from './SessionEmptyState.tsx'
-import { type TerminalAffordances } from '../terminal/affordances.tsx'
+import { AffordanceProvider, resolveAffordances, type TerminalAffordances } from '../terminal/affordances.tsx'
 import { WorkingRow } from '../terminal/items.tsx'
 import { subagentItems, terminalBlocks, type ToolCallItem } from '../terminal/blocks.ts'
 import { taskBrief, taskBusy } from '../terminal/tool-run.ts'
@@ -12,7 +12,8 @@ import { type TranscriptRow } from './transcript-rows.ts'
 import { TranscriptRows } from './TranscriptRows.tsx'
 import { SessionNamesProvider, SkillNamesProvider } from './PromptTokenText.tsx'
 import { TerminalSurface } from '../terminal/surface.tsx'
-import { ROW_GAP, TranscriptVariantProvider, type TranscriptDensity, type TranscriptVariant } from './transcript-variant.tsx'
+import { ROW_GAP, TranscriptVariantProvider, type TranscriptVariant } from './transcript-variant.tsx'
+import { HostImageProvider } from './tool-result-image.tsx'
 
 function useRunStart(status: TranscriptState['status']): number | undefined {
   const running = status === 'running' || status === 'starting'
@@ -54,7 +55,11 @@ function TerminalShell({
   children: ReactNode
 }) {
   if (!active) {
-    return <>{children}</>
+    return (
+      <div data-cards="" className="contents">
+        <AffordanceProvider value={resolveAffordances(affordances)}>{children}</AffordanceProvider>
+      </div>
+    )
   }
   return (
     <TerminalSurface fontSize={fontSize} lineHeight={lineHeight} affordances={affordances} bleed="1ch" className="term-transcript">
@@ -72,7 +77,6 @@ export interface TranscriptProps {
   canBrowseFiles?: boolean
   hostImage?: (path: string) => Promise<string | undefined>
   variant?: TranscriptVariant
-  density?: TranscriptDensity
   fontSize?: number
   lineHeight?: number
   affordances?: TerminalAffordances | boolean
@@ -99,7 +103,6 @@ export function Transcript({
   canBrowseFiles,
   hostImage,
   variant = 'cards',
-  density = 'comfortable',
   fontSize,
   lineHeight,
   affordances,
@@ -124,7 +127,7 @@ export function Transcript({
       frame ? state.items.find((item): item is ToolCallItem => item.kind === 'tool_call' && item.id === frame.parentToolUseId) : undefined,
     [state.items, frame],
   )
-  const gap = ROW_GAP[variant][density]
+  const gap = ROW_GAP[variant]
   const runStartedAt = useRunStart(state.status)
   const boundary = !frame && catchUp && catchUp.from > 0 && catchUp.from < state.items.length ? catchUp.from : undefined
   const recap = useMemo(() => (boundary === undefined ? undefined : recapLine(summarizeSince(state, boundary))), [state, boundary])
@@ -143,98 +146,113 @@ export function Transcript({
   const skillNames = useMemo(() => state.skills?.map((skill) => skill.name), [state.skills])
   return (
     <TranscriptVariantProvider value={variant}>
-      <SkillNamesProvider names={skillNames}>
-        <SessionNamesProvider names={sessionNames}>
-          <Conversation className={cn(replaying && 'invisible', className)}>
-            <ConversationContent className={cn(terminal && 'gap-0 p-0')}>
-              <TerminalShell active={terminal} fontSize={fontSize} lineHeight={lineHeight} affordances={affordances}>
-                {frame ? (
-                  frameTask === undefined && !replaying ? (
-                    <div className={cn(terminal ? 'term-row text-fg-4' : 'p-4 text-body-sm text-fg-4')}>
-                      This sub-agent's work is not in this transcript.
-                    </div>
-                  ) : null
-                ) : items.length === 0 && state.status !== 'starting' ? (
-                  emptyState !== undefined ? (
-                    emptyState
-                  ) : (
-                    <SessionEmptyState
-                      cwd={state.cwd}
-                      hasCommands={!!state.commands?.length}
-                      hasSkills={!!state.skills?.some((s) => s.enabled)}
-                      canBrowseFiles={canBrowseFiles}
-                    />
-                  )
-                ) : null}
-                {frame && frameTask === undefined && !replaying ? null : (
-                  <TranscriptRows
-                    rows={rows}
-                    boundary={boundary}
-                    since={catchUp?.since}
-                    terminal={terminal}
-                    replaying={replaying}
-                    stickyPrompt={!frame && stickyPrompt}
-                    gap={gap}
-                    fontSize={fontSize}
-                    lineHeight={lineHeight}
-                    items={items}
-                    pendingApprovals={state.pendingApprovals}
-                    scrubber={scrubber}
-                    bookmarks={frame ? undefined : bookmarks}
-                    affordances={affordances}
-                    fileUrl={fileUrl}
-                    attachmentUrl={attachmentUrl}
-                    hostImage={hostImage}
-                    jumpToRecapRef={jumpToRecapRef}
-                    repinRef={repinRef}
-                    reveal={frame ? undefined : reveal}
-                    frameParentId={frame?.parentToolUseId}
-                    onOpenSubagent={frame ? undefined : onOpenSubagent}
-                  />
-                )}
-                {(frame ? frameTask !== undefined && taskBusy(frameTask, items) : showLoader(state)) ? (
-                  terminal ? (
-                    <>
-                      {state.items.length > 0 ? <div className="term-blank" aria-hidden /> : null}
-                      <WorkingRow
-                        label={state.status === 'starting' ? 'Starting…' : 'Working…'}
-                        startedAt={runStartedAt}
-                        tokens={state.contextUsage?.totalTokens}
+      <HostImageProvider value={hostImage}>
+        <SkillNamesProvider names={skillNames}>
+          <SessionNamesProvider names={sessionNames}>
+            <Conversation className={cn(replaying && 'invisible', className)}>
+              <ConversationContent className={cn(terminal && 'gap-0 p-0')}>
+                <TerminalShell active={terminal} fontSize={fontSize} lineHeight={lineHeight} affordances={affordances}>
+                  {frame ? (
+                    frameTask === undefined && !replaying ? (
+                      <div className={cn(terminal ? 'term-row text-fg-4' : 'p-4 text-body-sm text-fg-4')}>
+                        This sub-agent's work is not in this transcript.
+                      </div>
+                    ) : null
+                  ) : items.length === 0 && state.status !== 'starting' ? (
+                    emptyState !== undefined ? (
+                      emptyState
+                    ) : (
+                      <SessionEmptyState
+                        cwd={state.cwd}
+                        hasCommands={!!state.commands?.length}
+                        hasSkills={!!state.skills?.some((s) => s.enabled)}
+                        canBrowseFiles={canBrowseFiles}
                       />
-                    </>
-                  ) : (
-                    <Loader label={state.status === 'starting' ? 'Starting session…' : undefined} />
-                  )
-                ) : null}
-              </TerminalShell>
-            </ConversationContent>
-            <ConversationScrollButton />
-            {replaying ? (
-              <div
-                data-slot="transcript-hold"
-                aria-hidden
-                className="wd-hold-appear visible pointer-events-none absolute inset-0 overflow-hidden"
-              >
-                <div className={cn('mx-auto w-full max-w-[var(--wd-transcript-max-width)]', !terminal && 'px-4 py-4')}>
-                  {terminal ? (
-                    <TerminalSurface
+                    )
+                  ) : null}
+                  {frame && frameTask === undefined && !replaying ? null : (
+                    <TranscriptRows
+                      rows={rows}
+                      boundary={boundary}
+                      since={catchUp?.since}
+                      terminal={terminal}
+                      replaying={replaying}
+                      stickyPrompt={!frame && stickyPrompt}
+                      gap={gap}
                       fontSize={fontSize}
                       lineHeight={lineHeight}
-                      affordances={false}
-                      bleed="1ch"
-                      className="term-transcript"
-                    >
-                      <WorkingRow label="Loading…" />
-                    </TerminalSurface>
-                  ) : (
-                    <Loader label="Loading session…" />
+                      items={items}
+                      pendingApprovals={state.pendingApprovals}
+                      scrubber={scrubber}
+                      bookmarks={frame ? undefined : bookmarks}
+                      affordances={affordances}
+                      fileUrl={fileUrl}
+                      attachmentUrl={attachmentUrl}
+                      hostImage={hostImage}
+                      jumpToRecapRef={jumpToRecapRef}
+                      repinRef={repinRef}
+                      reveal={frame ? undefined : reveal}
+                      frameParentId={frame?.parentToolUseId}
+                      onOpenSubagent={frame ? undefined : onOpenSubagent}
+                    />
                   )}
+                  {(frame ? frameTask !== undefined && taskBusy(frameTask, items) : showLoader(state)) ? (
+                    terminal ? (
+                      <>
+                        {state.items.length > 0 ? <div className="term-blank" aria-hidden /> : null}
+                        <WorkingRow
+                          label={state.status === 'starting' ? 'Starting…' : 'Working…'}
+                          startedAt={runStartedAt}
+                          tokens={state.contextUsage?.totalTokens}
+                        />
+                      </>
+                    ) : (
+                      <Loader label={state.status === 'starting' ? 'Starting session…' : undefined} />
+                    )
+                  ) : null}
+                </TerminalShell>
+              </ConversationContent>
+              <ConversationScrollButton />
+              {replaying ? (
+                <div
+                  data-slot="transcript-hold"
+                  aria-hidden
+                  className="wd-hold-appear visible pointer-events-none absolute inset-0 overflow-hidden"
+                >
+                  <div className={cn('mx-auto w-full max-w-[var(--wd-transcript-max-width)]', !terminal && 'px-4 py-4')}>
+                    {terminal ? (
+                      <TerminalSurface
+                        fontSize={fontSize}
+                        lineHeight={lineHeight}
+                        affordances={false}
+                        bleed="1ch"
+                        className="term-transcript"
+                      >
+                        <WorkingRow label="Loading…" />
+                      </TerminalSurface>
+                    ) : (
+                      <Loader label="Loading session…" />
+                    )}
+                  </div>
                 </div>
-              </div>
-            ) : null}
-          </Conversation>
-        </SessionNamesProvider>
-      </SkillNamesProvider>
+              ) : null}
+            </Conversation>
+          </SessionNamesProvider>
+        </SkillNamesProvider>
+      </HostImageProvider>
     </TranscriptVariantProvider>
   )
 }
+
+export interface TerminalTranscriptProps {
+  state: TranscriptState
+  fileUrl?: (path: string) => string
+  fontSize?: number
+  lineHeight?: number
+  affordances?: TerminalAffordances | boolean
+  className?: string
+}
+
+export function TerminalTranscript(props: TerminalTranscriptProps) {
+  return <Transcript {...props} variant="terminal" />
+}

package/src/components/agent/TranscriptItemView.tsx

@@ -1,5 +1,5 @@
 import type { MessageAttachment } from '@workerdeck/protocol'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import type { ShellItem, TranscriptItem } from '@workerdeck/react'
 import { cn } from '../../lib/utils.ts'
 import { compactionText, formatCost, formatDuration, formatRelativeTime } from '../../lib/format.ts'
@@ -11,8 +11,10 @@ import { Response } from './Response.tsx'
 import { ToolCallCard } from './ToolCallCard.tsx'
 import { Row } from '../terminal/row.tsx'
 import { TerminalItemView } from '../terminal/TerminalTranscript.tsx'
+import { ViewableImage } from './image-viewer.tsx'
 import { peerLabel } from '../terminal/items.tsx'
-import { useShellActions } from './shell-actions.tsx'
+import { ShellItemActions, useShellActions, useVerifyRunning } from './shell-actions.tsx'
+import { BookmarkAction, CopyAction, WithActions } from '../terminal/affordances.tsx'
 import { shellBodyLines, shellFailed, shellFooterText, shellLabel, shellStatusText } from '../terminal/shell-row.ts'
 
 function TurnResultRow({ item }: { item: Extract<TranscriptItem, { kind: 'turn_result' }> }) {
@@ -67,36 +69,47 @@ export function TranscriptItemView({
   terminal?: boolean
 }) {
   if (terminal) {
-    return <TerminalItemView item={item} fileUrl={fileUrl} />
+    return <TerminalItemView item={item} fileUrl={fileUrl} attachmentUrl={attachmentUrl} />
   }
   switch (item.kind) {
     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>
-              <PromptTokenText text={item.text} />
-            </MessageContent>
-          ) : null}
-        </Message>
+        <WithActions actions={<BookmarkAction id={item.id} />}>
+          <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>
+                <PromptTokenText text={item.text} />
+              </MessageContent>
+            ) : null}
+          </Message>
+        </WithActions>
       )
     }
     case 'assistant_text': {
       return (
-        <Message from="assistant">
-          <MessageContent>
-            <Response streaming={item.streaming}>{item.text}</Response>
-          </MessageContent>
-        </Message>
+        <WithActions
+          actions={
+            <>
+              <BookmarkAction id={item.id} />
+              {item.streaming ? null : <CopyAction text={item.text} label="Copy message" />}
+            </>
+          }
+        >
+          <Message from="assistant">
+            <MessageContent>
+              <Response streaming={item.streaming}>{item.text}</Response>
+            </MessageContent>
+          </Message>
+        </WithActions>
       )
     }
     case 'thinking': {
       return <Reasoning isStreaming={item.id === 'streaming-thinking'}>{item.text}</Reasoning>
     }
     case 'tool_call': {
-      return <ToolCallCard item={item} hostImage={hostImage} />
+      return <ToolCard item={item} hostImage={hostImage} />
     }
     case 'turn_result': {
       return <TurnResultRow item={item} />
@@ -119,70 +132,68 @@ export function TranscriptItemView({
   }
 }
 
+function ToolCard({
+  item,
+  hostImage,
+}: {
+  item: Extract<TranscriptItem, { kind: 'tool_call' }>
+  hostImage?: (path: string) => Promise<string | undefined>
+}) {
+  const command = (item.input as { command?: unknown } | null)?.command
+  const copyable = typeof command === 'string' ? command : (item.result?.text ?? '')
+  return (
+    <WithActions
+      actions={
+        <>
+          <BookmarkAction id={item.id} />
+          {copyable ? <CopyAction text={copyable} label="Copy" /> : null}
+        </>
+      }
+    >
+      <ToolCallCard item={item} hostImage={hostImage} />
+    </WithActions>
+  )
+}
+
 function ShellCard({ item }: { item: ShellItem }) {
   const [open, setOpen] = useState(false)
   const actions = useShellActions()
-  const running = item.shell.status === 'running'
   const failed = shellFailed(item)
   const lines = shellBodyLines(item, open)
   const footer = shellFooterText(item, open, lines.length)
 
   const shellId = item.shell.id
-  const verify = actions.verify
-  useEffect(() => {
-    if (running) {
-      void verify(shellId)
-    }
-  }, [running, shellId, verify])
+  useVerifyRunning(item)
 
   return (
-    <div data-slot="shell" className="overflow-hidden rounded-md border border-border bg-surface">
-      <div className="flex items-center gap-2 px-3 py-1.5">
-        <span className="font-mono text-label text-[var(--wd-shell-accent)]">$</span>
-        <button
-          type="button"
-          aria-expanded={open}
-          className="min-w-0 flex-1 truncate text-left font-mono text-label text-fg-1"
-          onClick={() => {
-            const next = !open
-            setOpen(next)
-            if (next && item.truncated && item.expanded === undefined && !item.missing) {
-              void actions.loadOutput(shellId)
-            }
-          }}
-        >
-          {shellLabel(item)}
-        </button>
-        <span className={cn('shrink-0 text-label', failed ? 'text-danger' : 'text-fg-4')}>{shellStatusText(item)}</span>
-        {actions.open ? (
-          <button
-            type="button"
-            aria-label="Open terminal"
-            title="Open terminal"
-            className="shrink-0 text-label text-fg-3 hover:text-fg-1"
-            onClick={() => actions.open?.(shellId)}
-          >
-            ⤢
-          </button>
-        ) : null}
-        {running ? (
+    <WithActions actions={<ShellItemActions item={item} />}>
+      <div data-slot="shell" className="overflow-hidden rounded-md border border-border bg-surface">
+        <div className="flex items-center gap-2 px-3 py-1.5">
+          <span className="font-mono text-label text-[var(--wd-shell-accent)]">$</span>
           <button
             type="button"
-            aria-label="Kill this shell"
-            className="shrink-0 text-label text-fg-3"
-            onClick={() => void actions.kill(shellId)}
+            aria-expanded={open}
+            className="min-w-0 flex-1 truncate text-left font-mono text-label text-fg-1"
+            onClick={() => {
+              const next = !open
+              setOpen(next)
+              if (next && item.truncated && item.expanded === undefined && !item.missing) {
+                void actions.loadOutput(shellId)
+              }
+            }}
           >
-            ✕
+            {shellLabel(item)}
           </button>
+          <span className={cn('shrink-0 text-label', failed ? 'text-danger' : 'text-fg-4')}>{shellStatusText(item)}</span>
+        </div>
+        {lines.length > 0 ? (
+          <pre className="overflow-x-auto border-t border-border px-3 py-2 font-mono text-label whitespace-pre-wrap text-fg-2">
+            {lines.join('\n')}
+          </pre>
         ) : null}
+        {footer ? <div className="px-3 pb-2 text-label text-fg-4">{footer}</div> : null}
       </div>
-      {lines.length > 0 ? (
-        <pre className="overflow-x-auto border-t border-border px-3 py-2 font-mono text-label whitespace-pre-wrap text-fg-2">
-          {lines.join('\n')}
-        </pre>
-      ) : null}
-      {footer ? <div className="px-3 pb-2 text-label text-fg-4">{footer}</div> : null}
-    </div>
+    </WithActions>
   )
 }
 
@@ -233,7 +244,9 @@ function SentAttachments({
       {attachments.map((attachment) => {
         const href = attachmentUrl?.(attachment.id)
         return attachment.mediaType.startsWith('image/') && href ? (
-          <img key={attachment.id} src={href} alt={attachment.name} className="size-20 rounded-md border border-border object-cover" />
+          <ViewableImage key={attachment.id} image={{ src: href, name: attachment.name }} className="rounded-md">
+            <img src={href} alt={attachment.name} className="size-20 rounded-md border border-border object-cover" />
+          </ViewableImage>
         ) : (
           <span key={attachment.id} className="rounded-full border border-border bg-surface px-2.5 py-1 text-body-xs text-fg-3">
             {attachment.name}

package/src/components/agent/TranscriptRows.tsx

@@ -5,7 +5,7 @@ import { useStickToBottomContext } from 'use-stick-to-bottom'
 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 { ActionPlacementProvider, resolveAffordances, type TerminalAffordances } from '../terminal/affordances.tsx'
 import { RunRow } from '../terminal/items.tsx'
 import { parentOf } from '../terminal/blocks.ts'
 import { briefPx, estimateBlockPx } from '../terminal/height.ts'
@@ -324,7 +324,8 @@ export function TranscriptRows({
         {virtualizer.getVirtualItems().map((virtualRow) => {
           const row = rows[virtualRow.index]
           const gapClass = virtualRow.index > 0 && (!terminal || gapBefore(rows, virtualRow.index)) ? gap.className : undefined
-          const content =
+          const flushBelow = terminal && virtualRow.index < rows.length - 1 && !gapBefore(rows, virtualRow.index + 1)
+          const view =
             'run' in row ? (
               <div className={cn(read(boundary, row.index) && 'opacity-45')}>
                 <RunRow items={row.run} />
@@ -348,6 +349,7 @@ export function TranscriptRows({
                 <TaskRow block={row} fileUrl={fileUrl} onOpenSubagent={onOpenSubagent} />
               </div>
             )
+          const content = <ActionPlacementProvider value={flushBelow ? 'inline' : 'below'}>{view}</ActionPlacementProvider>
           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)

package/src/components/agent/composer-commands.ts

@@ -1,4 +1,4 @@
-import type { SkillInfo, SlashCommandInfo } from '@workerdeck/protocol'
+import type { EngineCapabilities, PermissionMode, SkillInfo, SlashCommandInfo } from '@workerdeck/protocol'
 
 export type ClientCommand = {
   name: string
@@ -170,3 +170,82 @@ export function composerCommandRows(rows: readonly ComposerRow[]): ComposerComma
         },
   )
 }
+
+export type ClientCommandPanel = 'info' | 'context' | 'usage' | 'mcp' | 'skills'
+
+export type ClientCommandSources = {
+  capabilities: Pick<EngineCapabilities, 'permissionModes' | 'clearContext' | 'mcpStatus' | 'contextUsage' | 'rateLimits' | 'skillsList'>
+  hasModels: boolean
+  setModel: (model: string) => void
+  setPermissionMode: (mode: PermissionMode) => void
+  clearContext: () => void
+  openPanel: (panel: ClientCommandPanel) => void
+}
+
+export function buildClientCommands({
+  capabilities,
+  hasModels,
+  setModel,
+  setPermissionMode,
+  clearContext,
+  openPanel,
+}: ClientCommandSources): ClientCommand[] {
+  const modes = capabilities.permissionModes
+  const built: ClientCommand[] = []
+  if (hasModels) {
+    built.push({
+      name: 'model',
+      description: 'Switch the model for this session',
+      argumentHint: '<model>',
+      requiresArgs: true,
+      run: (args) => {
+        const wanted = args.split(/\s+/)[0]
+        if (!wanted) {
+          return false
+        }
+        setModel(wanted)
+        return true
+      },
+    })
+  }
+  if (modes.length > 1) {
+    built.push({
+      name: 'permissions',
+      description: `Set the permission mode (${modes.join(', ')})`,
+      argumentHint: '<mode>',
+      requiresArgs: true,
+      run: (args) => {
+        const wanted = args.split(/\s+/)[0] as PermissionMode
+        if (!modes.includes(wanted)) {
+          return false
+        }
+        setPermissionMode(wanted)
+        return true
+      },
+    })
+  }
+  if (capabilities.clearContext) {
+    built.push({
+      name: 'clear',
+      description: 'Clear the conversation - the session keeps running and the old one stays resumable',
+      run: () => {
+        clearContext()
+        return true
+      },
+    })
+  }
+  if (capabilities.mcpStatus) {
+    built.push({ name: 'mcp', description: 'MCP servers and their status', run: () => (openPanel('mcp'), true) })
+  }
+  if (capabilities.contextUsage) {
+    built.push({ name: 'context', description: 'Context window usage', run: () => (openPanel('context'), true) })
+  }
+  built.push({ name: 'status', description: 'Session details', run: () => (openPanel('info'), true) })
+  if (capabilities.rateLimits) {
+    built.push({ name: 'usage', description: 'Rate limits and spend', run: () => (openPanel('usage'), true) })
+  }
+  if (capabilities.skillsList) {
+    built.push({ name: 'skills', description: 'Browse the skills this session can use', run: () => (openPanel('skills'), true) })
+  }
+  return built
+}