@workerdeck/ui 2.15.0 → 3.0.1

package/src/components/terminal/items.tsx

@@ -1,24 +1,42 @@
-import { useEffect, useState, type ReactNode } from 'react'
+import { Fragment, useEffect, useState, type ReactNode } from 'react'
 import type { MessageOrigin } from '@workerdeck/protocol'
 import type { ShellItem, 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, KillShellAction, OpenShellAction, WithActions } from './affordances.tsx'
+import {
+  ActionPlacementProvider,
+  AgentWriteAction,
+  BookmarkAction,
+  CopyAction,
+  KillShellAction,
+  OpenShellAction,
+  WithActions,
+} from './affordances.tsx'
 import { TerminalDiff } from './diff.tsx'
 import { TerminalMarkdown } from './markdown.tsx'
 import { usePeerNames } from './peer-names.tsx'
 import { Pressable, useRevealOnOpen, type PressModifiers } from './press.tsx'
-import { IMAGE_BOX_LINES, IMAGE_UNAVAILABLE, imagePlaceholder } from './image-box.ts'
+import { IMAGE_BOX_LINES, IMAGE_UNAVAILABLE, baseName, hostImagePathOf, imagePlaceholder, resultImageName } 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 { useHostImageSrc, useToolResultImageSrc, type ToolResultImageState } from '../agent/tool-result-image.tsx'
+import { ViewableImage, useOpenImage } from '../agent/image-viewer.tsx'
 import { isPeerSend, peerName, peerOneLine, peerSendTarget, peerSendText, planRun, runFailed, runSummary } from './tool-run.ts'
 import { todoLine, todoPreview, type TodoPreview, type TodoStatus } from './todos.ts'
 import { useShellActions } from '../agent/shell-actions.tsx'
-import { SHELL_GLYPH, shellBodyLines, shellFailed, shellFooterText, shellLabel, shellStatusText } from './shell-row.ts'
+import {
+  SHELL_GLYPH,
+  shellAgentWriteLabel,
+  shellBodyLines,
+  shellFailed,
+  shellFooterText,
+  shellGrantable,
+  shellLabel,
+  shellStatusText,
+} from './shell-row.ts'
 import { type ToolCallItem } from './blocks.ts'
 import { Band, Blank, Ink, Row, type Tone } from './row.tsx'
 
@@ -101,13 +119,24 @@ export function PeerSendRow({ item }: { item: ToolCallItem }) {
   )
 }
 
-export function UserRow({ item }: { item: Extract<TranscriptItem, { kind: 'user' }> }) {
+export function UserRow({
+  item,
+  attachmentUrl,
+}: {
+  item: Extract<TranscriptItem, { kind: 'user' }>
+  attachmentUrl?: (attachmentId: string) => string
+}) {
   return (
     <WithActions actions={<BookmarkAction id={item.id} />}>
       <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(', ')}
+            {item.attachments.map((attachment, index) => (
+              <Fragment key={attachment.id}>
+                {index > 0 ? ', ' : null}
+                <AttachmentName attachment={attachment} href={attachmentUrl?.(attachment.id)} />
+              </Fragment>
+            ))}
           </Row>
         ) : null}
         {item.text
@@ -195,6 +224,7 @@ export function ToolRow({ item }: { item: ToolCallItem }) {
   const copyable = typeof command === 'string' ? command : text
   const todos = todoPreview(item.name, item.input)
   const title = useToolTitle(item.name)
+  const hostPath = hostImagePathOf(item)
 
   return (
     <div ref={reveal} className={open ? 'term-open' : undefined}>
@@ -216,8 +246,9 @@ export function ToolRow({ item }: { item: ToolCallItem }) {
             {item.backend && item.backend !== 'server' ? <Ink tone="faint"> · {item.backend}</Ink> : null}
           </Row>
         </Pressable>
+        {hostPath !== undefined ? <TerminalHostImage path={hostPath} /> : null}
         {item.result?.images?.map((image) => (
-          <TerminalImage key={image.partIndex} toolUseId={item.id} image={image} />
+          <TerminalImage key={image.partIndex} toolUseId={item.id} name={resultImageName(item.name, image)} image={image} />
         ))}
         {item.patch && !open ? (
           <TerminalDiff patch={item.patch} />
@@ -298,10 +329,39 @@ function TerminalTodos({ preview }: { preview: TodoPreview }) {
   )
 }
 
+function AttachmentName({ attachment, href }: { attachment: { name: string; mediaType: string }; href?: string }) {
+  const open = useOpenImage()
+  if (!open || !href || !attachment.mediaType.startsWith('image/')) {
+    return <>{attachment.name}</>
+  }
+  return (
+    <button
+      type="button"
+      className="term-press term-link"
+      onClick={(event) => {
+        event.stopPropagation()
+        open({ src: href, name: attachment.name })
+      }}
+    >
+      {attachment.name}
+    </button>
+  )
+}
+
 type ToolResultImage = NonNullable<NonNullable<ToolCallItem['result']>['images']>[number]
 
-function TerminalImage({ toolUseId, image }: { toolUseId: string; image: ToolResultImage }) {
-  const { src, failed } = useToolResultImageSrc({ toolUseId, ...image })
+function TerminalImage({ toolUseId, name, image }: { toolUseId: string; name: string; image: ToolResultImage }) {
+  const state = useToolResultImageSrc({ toolUseId, ...image })
+  return <TerminalImageBox state={state} name={name} placeholder={imagePlaceholder(image)} />
+}
+
+function TerminalHostImage({ path }: { path: string }) {
+  const state = useHostImageSrc(path)
+  return <TerminalImageBox state={state} name={baseName(path)} placeholder={baseName(path)} />
+}
+
+function TerminalImageBox({ state, name, placeholder }: { state: ToolResultImageState; name: string; placeholder: string }) {
+  const { src, failed } = state
   return (
     <Row indent={1} columns={3}>
       <div
@@ -310,9 +370,11 @@ function TerminalImage({ toolUseId, image }: { toolUseId: string; image: ToolRes
         style={{ height: `calc(var(--term-line) * ${IMAGE_BOX_LINES})` }}
       >
         {src ? (
-          <img src={src} alt={imagePlaceholder(image)} />
+          <ViewableImage image={{ src, name }}>
+            <img src={src} alt={name} />
+          </ViewableImage>
         ) : (
-          <Ink tone="faint">{failed ? IMAGE_UNAVAILABLE : imagePlaceholder(image)}</Ink>
+          <Ink tone="faint">{failed ? IMAGE_UNAVAILABLE : placeholder}</Ink>
         )}
       </div>
     </Row>
@@ -338,8 +400,17 @@ export function ToolRunRow({ items }: { items: ToolCallItem[] }) {
       </Pressable>
       {open ? (
         <div>
-          {items.map((item) => (
-            <ToolRow key={item.id} item={item} />
+          {items.map((item, index) => (
+            <Fragment key={item.id}>
+              {index > 0 ? <Blank /> : null}
+              {index < items.length - 1 ? (
+                <ActionPlacementProvider value="below">
+                  <ToolRow item={item} />
+                </ActionPlacementProvider>
+              ) : (
+                <ToolRow item={item} />
+              )}
+            </Fragment>
           ))}
         </div>
       ) : null}
@@ -427,6 +498,13 @@ export function ShellRow({ item }: { item: ShellItem }) {
         actions={
           <>
             {actions.open ? <OpenShellAction onOpen={() => actions.open?.(shellId)} /> : null}
+            {actions.agentWrite && shellGrantable(item.shell) ? (
+              <AgentWriteAction
+                granted={item.shell.agentWrite === true}
+                label={shellAgentWriteLabel(item.shell)}
+                onToggle={() => void actions.agentWrite?.(shellId, item.shell.agentWrite !== true)}
+              />
+            ) : null}
             {running ? <KillShellAction onKill={() => void actions.kill(shellId)} /> : null}
             <BookmarkAction id={item.id} />
             <CopyAction text={item.shell.command} label="Copy command" />

package/src/components/terminal/markdown.tsx

@@ -5,6 +5,7 @@ import { parseFileLink } from '../../lib/file-link.ts'
 import { CopyAction, WithActions } from './affordances.tsx'
 import { useFileLinks } from './file-link.tsx'
 import { Band } from './row.tsx'
+import { MARKDOWN_REHYPE_PLUGINS, MarkdownImage } from '../agent/markdown-image.tsx'
 
 function codeText(node: ReactNode): string {
   if (node === null || node === undefined || typeof node === 'boolean') {
@@ -29,7 +30,7 @@ function fenceLanguage(node: ReactNode): string | undefined {
 
 function CodeBand({ code, language }: { code: string; language?: string }) {
   return (
-    <WithActions className="term-block" actions={<CopyAction text={code} label="Copy code" />}>
+    <WithActions className="term-block" placement="inline" actions={<CopyAction text={code} label="Copy code" />}>
       <Band className="term-code" data-language={language}>
         <pre className="term-pre">{code}</pre>
       </Band>
@@ -116,6 +117,7 @@ const TERMINAL_COMPONENTS: Components = {
   ),
   em: ({ children }) => <em className="term-em">{children}</em>,
   a: ({ children, href }) => <Link href={href}>{children}</Link>,
+  img: ({ src, alt }) => <MarkdownImage src={src} alt={alt} terminal />,
 
   table: ({ children }) => (
     <div className="term-block term-table-wrap">
@@ -148,6 +150,7 @@ export const TerminalMarkdown = memo(
         parseIncompleteMarkdown={streaming}
         controls={false}
         components={TERMINAL_COMPONENTS}
+        rehypePlugins={MARKDOWN_REHYPE_PLUGINS}
         className={cn('term-md', className)}
       >
         {children}

package/src/components/terminal/shell-row.ts

@@ -1,4 +1,4 @@
-import type { ShellInfo } from '@workerdeck/protocol'
+import { SHELL_INTERACTIVE_NOTE, type ShellInfo } from '@workerdeck/protocol'
 import type { ShellItem } from '@workerdeck/react'
 
 export const SHELL_GLYPH = '$'
@@ -9,6 +9,17 @@ export const SHELL_EXPAND_CHARS = 100_000
 
 export const SHELL_MISSING = 'output expired or not tracked by this gateway'
 
+export const SHELL_AGENT_WRITE_NOTE = 'agent may type'
+
+// Only a running shell the user started takes a grant: the agent already drives its own.
+export function shellGrantable(shell: ShellInfo): boolean {
+  return shell.status === 'running' && shell.owner === 'user'
+}
+
+export function shellAgentWriteLabel(shell: ShellInfo): string {
+  return shell.agentWrite === true ? 'Revoke the agent’s access to this shell' : 'Let the agent type into this shell'
+}
+
 export function shellInfoLabel(shell: ShellInfo): string {
   return shell.label || shell.command.split('\n')[0] || ''
 }
@@ -31,7 +42,7 @@ export function shellInfoFailed(shell: ShellInfo): boolean {
 
 export function shellInfoStatusText(shell: ShellInfo): string {
   if (shell.status === 'running') {
-    return 'running'
+    return shell.agentWrite === true ? `running · ${SHELL_AGENT_WRITE_NOTE}` : 'running'
   }
   if (typeof shell.exitCode === 'number') {
     return shell.exitCode === 0 ? 'exit 0' : `exit ${shell.exitCode}`
@@ -68,7 +79,7 @@ export function shellHeaderText(item: ShellItem): string {
 
 export function shellBodyLines(item: ShellItem, open: boolean): string[] {
   const source = open && item.expanded !== undefined ? item.expanded : item.text
-  if (source === '') {
+  if (source === '' || item.shell.interactive) {
     return []
   }
   const lines = source.split('\n')
@@ -89,6 +100,9 @@ export function shellBodyLines(item: ShellItem, open: boolean): string[] {
 
 // The footer is the row's one affordance line: what expanding will fetch, what it clipped, or why it cannot.
 export function shellFooterText(item: ShellItem, open: boolean, shown: number): string | undefined {
+  if (item.shell.interactive) {
+    return SHELL_INTERACTIVE_NOTE
+  }
   if (item.missing) {
     return SHELL_MISSING
   }

package/src/index.ts

@@ -60,7 +60,14 @@ export { TerminalQuestionPrompt, type TerminalQuestionPromptProps } from './comp
 export { TerminalDiff, previewPatch } from './components/terminal/diff.tsx'
 export { TerminalMarkdown, type TerminalMarkdownProps } from './components/terminal/markdown.tsx'
 export { Band, Blank, Ink, Row, type RowProps, type Tone } from './components/terminal/row.tsx'
-export { CopyAction, WithActions, useAffordances, type TerminalAffordances } from './components/terminal/affordances.tsx'
+export {
+  AgentWriteIcon,
+  CopyAction,
+  WithActions,
+  useAffordances,
+  type ActionPlacement,
+  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'
@@ -68,11 +75,8 @@ export { usePathLinks, resolveAgainstCwd } from './components/agent/use-path-lin
 export { Conversation, ConversationContent, ConversationScrollButton, type ConversationProps } from './components/agent/Conversation.tsx'
 export { Message, MessageContent, type MessageProps } from './components/agent/Message.tsx'
 export {
-  TranscriptDensityProvider,
   TranscriptVariantProvider,
-  useTranscriptDensity,
   useTranscriptVariant,
-  type TranscriptDensity,
   type TranscriptFont,
   type TranscriptVariant,
 } from './components/agent/transcript-variant.tsx'
@@ -81,6 +85,14 @@ export { Reasoning, type ReasoningProps } from './components/agent/Reasoning.tsx
 export { Loader } from './components/agent/Loader.tsx'
 export { ToolCallCard, type ToolCallCardProps, type ToolCallItem } from './components/agent/ToolCallCard.tsx'
 export { ToolTitleProvider, useToolTitle } from './components/agent/tool-titles.tsx'
+export {
+  ImageViewer,
+  ImageViewerProvider,
+  ViewableImage,
+  useOpenImage,
+  type OpenImage,
+  type ViewedImage,
+} from './components/agent/image-viewer.tsx'
 export { FileCard, type FileCardProps, type FileDeliveredItem } from './components/agent/FileCard.tsx'
 export { PermissionPrompt, type PermissionPromptProps } from './components/agent/PermissionPrompt.tsx'
 export {
@@ -138,8 +150,11 @@ export { ShellStrip, type ShellStripProps } from './components/agent/ShellStrip.
 export { useShellFrame, type ShellFrame, type ShellFrameOptions } from './components/agent/use-shell-frame.ts'
 export { ShellActionsProvider, useShellActions, type ShellActions } from './components/agent/shell-actions.tsx'
 export {
+  SHELL_AGENT_WRITE_NOTE,
   SHELL_GLYPH,
   SHELL_KILL_GLYPH,
+  shellAgentWriteLabel,
+  shellGrantable,
   shellInfoFailed,
   shellInfoLabel,
   shellInfoStatusText,

package/src/lib/shell-request.ts

@@ -0,0 +1,115 @@
+// The agent's shell write tools on a permission card. Allow-lists key on the tool name, and the danger is in the
+// payload, so the card shows the command, the typed text and the keys verbatim rather than a JSON summary.
+export type ShellRequestPayload =
+  | { kind: 'run'; command: string }
+  | { kind: 'write'; shellId: string; data?: string; keys?: string[] }
+  | { kind: 'kill'; shellId: string }
+  | { kind: 'grant'; shellId: string; reason: string }
+
+type RequestLike = { toolName?: unknown; input?: unknown }
+
+const CONTROL_NAMES: Record<string, string> = {
+  '\r': 'enter',
+  '\n': 'newline',
+  '\t': 'tab',
+  '\x1b': 'escape',
+  '\x7f': 'backspace',
+}
+
+type ShellWriteTool = 'shell_run' | 'shell_write' | 'shell_kill' | 'shell_request_write'
+
+const SHELL_WRITE_TOOLS: readonly string[] = ['shell_run', 'shell_write', 'shell_kill', 'shell_request_write']
+
+export function shellToolOf(toolName: unknown): ShellWriteTool | undefined {
+  if (typeof toolName !== 'string') {
+    return undefined
+  }
+  const bare = toolName.startsWith('mcp__') ? toolName.slice(toolName.indexOf('__', 5) + 2) : toolName
+  return SHELL_WRITE_TOOLS.includes(bare) ? (bare as ShellWriteTool) : undefined
+}
+
+export function shellRequestPayload(request: RequestLike | null | undefined): ShellRequestPayload | undefined {
+  const tool = shellToolOf(request?.toolName)
+  if (!tool) {
+    return undefined
+  }
+  const input = request?.input !== null && typeof request?.input === 'object' ? (request.input as Record<string, unknown>) : {}
+  const shellId = typeof input.shellId === 'string' ? input.shellId : ''
+  switch (tool) {
+    case 'shell_run': {
+      return { kind: 'run', command: typeof input.command === 'string' ? input.command : '' }
+    }
+    case 'shell_write': {
+      const keys = Array.isArray(input.keys) ? input.keys.filter((key): key is string => typeof key === 'string') : undefined
+      return {
+        kind: 'write',
+        shellId,
+        ...(typeof input.data === 'string' ? { data: input.data } : {}),
+        ...(keys && keys.length > 0 ? { keys } : {}),
+      }
+    }
+    case 'shell_kill': {
+      return { kind: 'kill', shellId }
+    }
+    case 'shell_request_write': {
+      return { kind: 'grant', shellId, reason: typeof input.reason === 'string' ? input.reason : '' }
+    }
+  }
+}
+
+export function shellRequestTitle(payload: ShellRequestPayload): string {
+  switch (payload.kind) {
+    case 'run': {
+      return 'Agent wants to start a shell'
+    }
+    case 'write': {
+      return `Agent wants to type into shell ${payload.shellId}`
+    }
+    case 'kill': {
+      return `Agent wants to kill shell ${payload.shellId}`
+    }
+    case 'grant': {
+      return `Agent asks to type into your shell ${payload.shellId}`
+    }
+  }
+}
+
+// The lines drawn verbatim under the title. Typed text keeps its shape; a control character is named in brackets
+// so a hidden Enter or Escape is visible on the card.
+export function shellRequestLines(payload: ShellRequestPayload): string[] {
+  switch (payload.kind) {
+    case 'run': {
+      return payload.command.split('\n').map((line, index) => (index === 0 ? `$ ${line}` : `  ${line}`))
+    }
+    case 'write': {
+      const lines: string[] = []
+      if (payload.data !== undefined) {
+        lines.push(`types: ${visibleControls(payload.data)}`)
+      }
+      if (payload.keys) {
+        lines.push(`presses: ${payload.keys.map((key) => `[${key}]`).join(' ')}`)
+      }
+      return lines
+    }
+    case 'kill': {
+      return [`kill ${payload.shellId}`]
+    }
+    case 'grant': {
+      return [`why: ${visibleControls(payload.reason)}`, 'until the shell ends or you revoke it']
+    }
+  }
+}
+
+export function visibleControls(text: string): string {
+  let out = ''
+  for (const char of text) {
+    const code = char.codePointAt(0)!
+    if (code >= 0x20 && code !== 0x7f) {
+      out += char
+      continue
+    }
+    const named = CONTROL_NAMES[char]
+    out += named ? `[${named}]` : `[ctrl-${String.fromCharCode(code + 64).toLowerCase()}]`
+  }
+  return out
+}

package/src/lib/tool-icon.ts

@@ -22,7 +22,19 @@ export function toolIcon(toolName: string): LucideIcon {
   switch (toolName) {
     case 'Bash':
     case 'BashOutput':
-    case 'KillShell': {
+    case 'KillShell':
+    case 'shell_list':
+    case 'shell_read':
+    case 'shell_run':
+    case 'shell_write':
+    case 'shell_kill':
+    case 'shell_request_write':
+    case 'mcp__workerdeck__shell_list':
+    case 'mcp__workerdeck__shell_read':
+    case 'mcp__workerdeck__shell_run':
+    case 'mcp__workerdeck__shell_write':
+    case 'mcp__workerdeck__shell_kill':
+    case 'mcp__workerdeck__shell_request_write': {
       return Terminal
     }
     case 'Read': {

package/src/styles/terminal.css

@@ -436,46 +436,144 @@
 .term-hoverable {
   position: relative;
 }
-/* Pinned to the block's first line at its right edge. Absolute, so the rows
-   below are exactly where they would have been without it. */
-[data-terminal] .term-actions {
+/* `below` sits in the blank line (cards: the row gap) under the block; `inline`
+   pins to the block's first line at its right edge, for blocks with no blank
+   line beneath them. Absolute either way, so no row moves when they appear. */
+:is([data-terminal], [data-cards]) .term-actions {
   position: absolute;
-  top: 0;
-  right: 0;
-  height: var(--term-line);
+  z-index: 1;
   display: flex;
+  align-items: center;
+  opacity: 0;
+  transition: opacity var(--motion-fast, 120ms);
+}
+[data-terminal] .term-actions {
+  height: var(--term-line);
   gap: 1ch;
+}
+[data-cards] .term-actions {
+  height: 20px;
+  gap: 6px;
+}
+:is([data-terminal], [data-cards]) [data-placement='below'] > .term-actions {
+  top: 100%;
+}
+[data-terminal] [data-placement='below'] > .term-actions {
+  left: var(--term-cell);
+}
+[data-cards] [data-placement='below'] > .term-actions {
+  left: 0;
+}
+:is([data-terminal], [data-cards]) [data-placement='inline'] > .term-actions {
+  top: 0;
+  right: 0;
   padding-inline: 1ch;
   background: var(--bg, transparent);
-  opacity: 0;
-  transition: opacity var(--motion-fast, 120ms);
 }
-[data-terminal] .term-hoverable:hover .term-actions,
-[data-terminal] .term-hoverable:focus-within .term-actions {
+/* Only the innermost `below` block under the pointer shows its bar, so an
+   expanded chain does not light up its own and its parent's at once. */
+:is([data-terminal], [data-cards])
+  [data-placement='below']:is(:hover, :focus-within):not(:has([data-placement='below']:is(:hover, :focus-within)))
+  > .term-actions,
+:is([data-terminal], [data-cards]) [data-placement='inline']:is(:hover, :focus-within) > .term-actions {
   opacity: 1;
 }
+/* A virtualized row paints under the next one, whose top padding is the gap
+   the bar sits in; lift the hovered row so the bar stays clickable. */
+:is([data-terminal], [data-cards]) [data-slot='transcript-rows'] [data-index]:not(.absolute) {
+  position: relative;
+}
+:is([data-terminal], [data-cards]) [data-slot='transcript-rows'] [data-index]:is(:hover, :focus-within) {
+  z-index: 1;
+}
 @media (hover: none) {
-  /* No pointer to hover with: showing them always is the only way they exist at
-     all, and a phone has the room. */
-  [data-terminal] .term-actions {
+  :is([data-terminal], [data-cards]) .term-actions {
     opacity: 1;
   }
 }
+[data-cards] .term-action {
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  height: 18px;
+  min-width: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding-inline: 5px;
+  color: var(--fg-3);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+[data-cards] .term-action-icon {
+  width: 14px;
+  height: 14px;
+  stroke-width: 2.25;
+  flex: none;
+}
+[data-cards] .term-action-word {
+  padding-right: 2px;
+}
+[data-cards] .term-action:hover,
+[data-cards] .term-action:focus-visible {
+  color: var(--fg-1);
+  background: var(--row-hover);
+}
+[data-cards] .term-action[data-tone='magenta'] {
+  color: var(--wd-shell-accent);
+}
+[data-cards] .term-action[data-tone='yellow'] {
+  color: var(--warning);
+}
+[data-cards] .term-action[data-tone='danger']:hover {
+  color: var(--danger);
+}
 [data-terminal] .term-action {
   font: inherit;
-  line-height: var(--term-line);
+  font-weight: 500;
+  line-height: 1;
+  height: calc(var(--term-line) - 2px);
+  min-width: 3ch;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.6ch;
+  padding-inline: 0.6ch;
   color: var(--term-dim);
-  background: none;
-  border: 0;
-  padding: 0;
+  background: var(--term-band-bg);
+  border: 1px solid color-mix(in srgb, var(--term-faint) 55%, transparent);
+  border-radius: 3px;
+  white-space: pre;
   cursor: pointer;
 }
-/* The shell drill-in, in the same magenta as the row's `$`. */
+[data-terminal] .term-action-icon {
+  width: calc(var(--term-font-size) + 1px);
+  height: calc(var(--term-font-size) + 1px);
+  stroke-width: 2.25;
+  flex: none;
+}
+[data-terminal] .term-action-word {
+  padding-right: 0.2ch;
+}
+[data-terminal] .term-action:hover,
+[data-terminal] .term-action:focus-visible {
+  color: var(--term-bright);
+  border-color: var(--term-dim);
+  background: var(--term-row-hover);
+}
 [data-terminal] .term-action[data-tone='magenta'] {
   color: var(--term-magenta);
 }
-[data-terminal] .term-action:hover {
-  color: var(--term-fg);
+[data-terminal] .term-action[data-tone='yellow'] {
+  color: var(--term-yellow);
+}
+[data-terminal] .term-action[data-tone='danger']:hover {
+  color: var(--term-red);
 }
 
 /* What you typed, on a band of its own - the CLI's own treatment. */
@@ -714,7 +812,7 @@ button.term-link {
 [data-terminal] [data-sticky-lane] > [data-sticky-headlane] {
   position: absolute;
   inset: 0;
-  z-index: 1;
+  z-index: 2;
   pointer-events: none;
 }
 
@@ -1276,7 +1374,16 @@ button.term-link {
   display: block;
   overflow: hidden;
 }
-.term-image > img {
+.term-image > [data-slot='viewable-image'] {
+  display: block;
+  height: 100%;
+  max-width: 100%;
+  padding: 0;
+  border: 0;
+  background: none;
+}
+.term-image img {
+  display: block;
   max-width: 100%;
   height: 100%;
   object-fit: contain;

package/src/styles/theme.css

@@ -821,6 +821,10 @@
   left: 0;
   width: 12px;
 }
+/* xterm.css paints its viewport #000 whatever the theme says; the drill-in shows the panel through. */
+.wd-shell-term .xterm .xterm-viewport {
+  background-color: transparent;
+}
 .wd-scrubber .wd-scrub-mark[data-kind='user'] {
   background: var(--accent);
 }