@workerdeck/ui 2.15.0 → 3.0.1

package/src/components/agent/SessionSteps.tsx

@@ -3,7 +3,18 @@ import { isAgentRecord, promotedShells, subagentLabel, visibleSubagents } from '
 import type { SessionInfo, ShellInfo, SubagentDisplay, SubagentInfo } from '@workerdeck/protocol'
 import { Spinner } from '../ui/Spinner.tsx'
 import { cn } from '../../lib/utils.ts'
-import { SHELL_GLYPH, SHELL_KILL_GLYPH, shellInfoFailed, shellInfoLabel, shellInfoStatusText, shellTitle } from '../terminal/shell-row.ts'
+import { AgentWriteIcon } from '../terminal/affordances.tsx'
+import {
+  SHELL_AGENT_WRITE_NOTE,
+  SHELL_GLYPH,
+  SHELL_KILL_GLYPH,
+  shellAgentWriteLabel,
+  shellGrantable,
+  shellInfoFailed,
+  shellInfoLabel,
+  shellInfoStatusText,
+  shellTitle,
+} from '../terminal/shell-row.ts'
 
 export type StepKind = 'agent' | 'shell'
 
@@ -17,12 +28,15 @@ export type Step = {
   title: string
   onSelect: () => void
   onKill?: () => void
+  agentWrite?: { granted: boolean; label: string; toggle: () => void }
 }
 
 export type ShellStepOptions = {
   now: number
   onSelect: (shellId: string) => void
   onKill?: (shellId: string) => void
+  // Offered only where the session's agent holds the shell write tools.
+  onAgentWrite?: (shellId: string, enabled: boolean) => void
 }
 
 export function sessionSteps(
@@ -46,10 +60,11 @@ export function sessionSteps(
   if (shells === undefined) {
     return agents
   }
-  return [...agents, ...promotedShells(info, shells.now).map((shell) => shellStep(shell, shells))]
+  const grants = info.shellAgentWrite !== undefined
+  return [...agents, ...promotedShells(info, shells.now).map((shell) => shellStep(shell, shells, grants))]
 }
 
-function shellStep(shell: ShellInfo, options: ShellStepOptions): Step {
+function shellStep(shell: ShellInfo, options: ShellStepOptions, grants: boolean): Step {
   const status = shellInfoStatusText(shell)
   const running = shell.status === 'running'
   return {
@@ -58,10 +73,18 @@ function shellStep(shell: ShellInfo, options: ShellStepOptions): Step {
     label: shellInfoLabel(shell),
     noun: 'shell',
     state: shellInfoFailed(shell) ? 'failed' : running ? 'running' : 'done',
-    detail: running ? undefined : status,
+    detail: running ? (shell.agentWrite === true ? SHELL_AGENT_WRITE_NOTE : undefined) : status,
     title: `${shellTitle(shell)} · ${status}`,
     onSelect: () => options.onSelect(shell.id),
     onKill: running && options.onKill ? () => options.onKill?.(shell.id) : undefined,
+    agentWrite:
+      grants && options.onAgentWrite && shellGrantable(shell)
+        ? {
+            granted: shell.agentWrite === true,
+            label: shellAgentWriteLabel(shell),
+            toggle: () => options.onAgentWrite?.(shell.id, shell.agentWrite !== true),
+          }
+        : undefined,
   }
 }
 
@@ -96,8 +119,26 @@ export function StepRow({ step, active = false, onSelect }: { step: Step; active
         <StepIcon step={step} />
         <span className="min-w-0 flex-1 truncate">{step.label}</span>
         {step.detail ? <span className="shrink-0 tabular-nums text-fg-4">{step.detail}</span> : null}
-        <ArrowRight className="size-3.5 shrink-0 text-fg-4" />
+        {step.kind === 'shell' ? null : <ArrowRight className="size-3.5 shrink-0 text-fg-4" />}
       </button>
+      {step.agentWrite ? (
+        <button
+          type="button"
+          aria-label={step.agentWrite.label}
+          aria-pressed={step.agentWrite.granted}
+          title={step.agentWrite.label}
+          onClick={(e) => {
+            e.stopPropagation()
+            step.agentWrite?.toggle()
+          }}
+          className={cn(
+            'shrink-0 px-1 text-micro leading-none outline-none',
+            step.agentWrite.granted ? 'text-warning' : 'text-fg-4 hover:text-fg-1',
+          )}
+        >
+          <AgentWriteIcon granted={step.agentWrite.granted} className="size-3.5" />
+        </button>
+      ) : null}
       {step.onKill ? (
         <button
           type="button"

package/src/components/agent/SessionWorkspace.tsx

@@ -17,8 +17,8 @@ export interface SessionWorkspaceProps {
   sessionId: string | undefined
   header?: SessionPanelProps['header']
   transcriptVariant?: SessionPanelProps['transcriptVariant']
-  transcriptDensity?: SessionPanelProps['transcriptDensity']
   transcriptFont?: SessionPanelProps['transcriptFont']
+  affordances?: SessionPanelProps['affordances']
   scrubber?: SessionPanelProps['scrubber']
   bookmarks?: SessionPanelProps['bookmarks']
   onToggleBookmark?: SessionPanelProps['onToggleBookmark']
@@ -54,8 +54,8 @@ export function SessionWorkspace({
   sessionId,
   header,
   transcriptVariant,
-  transcriptDensity,
   transcriptFont,
+  affordances,
   scrubber,
   bookmarks,
   onToggleBookmark,
@@ -217,8 +217,8 @@ export function SessionWorkspace({
             sessionId={sessionId}
             header={hoisted}
             transcriptVariant={transcriptVariant}
-            transcriptDensity={transcriptDensity}
             transcriptFont={transcriptFont}
+            affordances={affordances}
             scrubber={scrubber}
             bookmarks={bookmarks}
             onToggleBookmark={onToggleBookmark}

package/src/components/agent/ShellStrip.tsx

@@ -4,8 +4,8 @@ import { cn } from '../../lib/utils.ts'
 import { Button } from '../ui/Button.tsx'
 import { Ink, Row } from '../terminal/row.tsx'
 import { TerminalSurface } from '../terminal/surface.tsx'
-import { shellInfoFailed, shellInfoStatusText, shellTitle } from '../terminal/shell-row.ts'
-import { KillShellAction, WithActions } from '../terminal/affordances.tsx'
+import { shellAgentWriteLabel, shellGrantable, shellInfoFailed, shellInfoStatusText, shellTitle } from '../terminal/shell-row.ts'
+import { AgentWriteAction, AgentWriteIcon, KillShellAction, WithActions } from '../terminal/affordances.tsx'
 
 export interface ShellStripProps {
   shell: ShellInfo | undefined
@@ -13,23 +13,34 @@ export interface ShellStripProps {
   cols?: number
   onBack: () => void
   onKill?: () => void
+  onAgentWrite?: (enabled: boolean) => void
   terminal: boolean
   fontSize?: number
   lineHeight?: number
 }
 
-export function ShellStrip({ shell, label, cols, onBack, onKill, terminal, fontSize, lineHeight }: ShellStripProps) {
+export function ShellStrip({ shell, label, cols, onBack, onKill, onAgentWrite, terminal, fontSize, lineHeight }: ShellStripProps) {
   const running = shell?.status === 'running'
   const failed = shell ? shellInfoFailed(shell) : false
   const name = shell ? shellTitle(shell) : label
   const status = shell ? shellInfoStatusText(shell) : undefined
   const width = cols ?? shell?.cols
   const detail = width === undefined ? undefined : `${width} cols`
+  const granted = shell?.agentWrite === true
+  const grant = shell && onAgentWrite && shellGrantable(shell) ? () => onAgentWrite(!granted) : undefined
 
   if (terminal) {
     return (
       <TerminalSurface fontSize={fontSize} lineHeight={lineHeight} className="shrink-0">
-        <WithActions actions={running && onKill ? <KillShellAction onKill={onKill} /> : null}>
+        <WithActions
+          placement="inline"
+          actions={
+            <>
+              {grant && shell ? <AgentWriteAction granted={granted} label={shellAgentWriteLabel(shell)} onToggle={grant} /> : null}
+              {running && onKill ? <KillShellAction onKill={onKill} /> : null}
+            </>
+          }
+        >
           <Row glyph="←" glyphTone="dim" indent={1} tone={failed ? 'red' : 'magenta'}>
             <button type="button" onClick={onBack} aria-label="Back to the session" className="cursor-pointer text-left">
               {name}
@@ -55,6 +66,18 @@ export function ShellStrip({ shell, label, cols, onBack, onKill, terminal, fontS
         </span>
       ) : null}
       {detail ? <span className="shrink-0 text-label text-fg-4">{detail}</span> : null}
+      {grant && shell ? (
+        <button
+          type="button"
+          aria-label={shellAgentWriteLabel(shell)}
+          aria-pressed={granted}
+          title={shellAgentWriteLabel(shell)}
+          className={cn('shrink-0 text-label', granted ? 'text-warning' : 'text-fg-3 hover:text-fg-1')}
+          onClick={grant}
+        >
+          <AgentWriteIcon granted={granted} className="size-3.5" />
+        </button>
+      ) : null}
       {running && onKill ? (
         <button
           type="button"

package/src/components/agent/ShellTerminal.tsx

@@ -126,7 +126,7 @@ export function ShellTerminal({ handle, shellId, onEnded, onShell, fontSize, cla
   }, [ready])
 
   return (
-    <div className={cn('relative min-h-0 flex-1 overflow-hidden px-2 py-1', className)}>
+    <div className={cn('wd-shell-term relative min-h-0 flex-1 overflow-hidden px-2 py-1', className)}>
       <div ref={host} className="h-full w-full" onClick={() => term.current?.focus()} />
       {ready && shell.status !== 'idle' ? null : (
         <div className="absolute inset-0 grid place-items-center">

package/src/components/agent/ToolCallCard.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import type { TranscriptItem } from '@workerdeck/react'
 import { ChevronDown, Clock } from 'lucide-react'
 import { Badge } from '../ui/Badge.tsx'
@@ -9,27 +9,17 @@ 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'
+import { useHostImageSrc, useToolResultImageSrc, type HostImageLoader } from './tool-result-image.tsx'
+import { ViewableImage } from './image-viewer.tsx'
+import { IMAGE_UNAVAILABLE, baseName, hostImagePathOf, imagePlaceholder, resultImageName } from '../terminal/image-box.ts'
 
 export type ToolCallItem = Extract<TranscriptItem, { kind: 'tool_call' }>
 
 const RESULT_PREVIEW_CHARS = 2000
 
-const IMAGE_TOOLS = new Set(['CodexImageGeneration', 'CodexImageView'])
-
-function imagePathOf(item: ToolCallItem): string | undefined {
-  if (!IMAGE_TOOLS.has(item.name)) {
-    return undefined
-  }
-  const input = item.input as { savedPath?: unknown; path?: unknown } | null
-  const path = input?.savedPath ?? input?.path
-  return typeof path === 'string' ? path : undefined
-}
-
 export interface ToolCallCardProps {
   item: ToolCallItem
-  hostImage?: (path: string) => Promise<string | undefined>
+  hostImage?: HostImageLoader
   className?: string
 }
 
@@ -106,7 +96,7 @@ export function ToolCallCard({ item, hostImage, className }: ToolCallCardProps)
   const [fullResult, setFullResult] = useState(false)
   const [fetching, setFetching] = useState(false)
   const fetchResult = useToolResultFetcher()
-  const imagePath = imagePathOf(item)
+  const imagePath = hostImagePathOf(item)
   const status: Status = item.status ?? (item.result === undefined ? 'running' : 'settled')
   const badge = STATE_BADGE[status]
   const isError = status === 'failed' || item.result?.isError === true
@@ -155,12 +145,12 @@ export function ToolCallCard({ item, hostImage, className }: ToolCallCardProps)
     </div>
   ) : null
 
-  const image = imagePath && hostImage ? <HostImage path={imagePath} load={hostImage} /> : null
+  const image = imagePath ? <HostImage path={imagePath} load={hostImage} /> : null
 
   const resultImages = item.result?.images?.length ? (
     <div className="flex flex-col gap-2 border-t border-border p-2.5">
       {item.result.images.map((ref) => (
-        <ResultImage key={ref.partIndex} toolUseId={item.id} image={ref} />
+        <ResultImage key={ref.partIndex} toolUseId={item.id} name={resultImageName(item.name, ref)} image={ref} />
       ))}
     </div>
   ) : null
@@ -209,12 +199,14 @@ function PlainPayload({ code, label, className }: { code: string; label: string;
 
 type ToolResultImage = NonNullable<NonNullable<ToolCallItem['result']>['images']>[number]
 
-function ResultImage({ toolUseId, image }: { toolUseId: string; image: ToolResultImage }) {
+function ResultImage({ toolUseId, name, image }: { toolUseId: string; name: string; image: ToolResultImage }) {
   const { src, failed } = useToolResultImageSrc({ toolUseId, ...image })
   return (
     <div className="flex h-60 items-start overflow-hidden rounded-md border border-border bg-surface-hover">
       {src ? (
-        <img src={src} alt={imagePlaceholder(image)} className="h-full max-w-full object-contain" />
+        <ViewableImage image={{ src, name }} className="h-full max-w-full">
+          <img src={src} alt={name} className="h-full max-w-full object-contain" />
+        </ViewableImage>
       ) : (
         <span className="p-2 text-label text-fg-4">{failed ? IMAGE_UNAVAILABLE : imagePlaceholder(image)}</span>
       )}
@@ -222,32 +214,17 @@ function ResultImage({ toolUseId, image }: { toolUseId: string; image: ToolResul
   )
 }
 
-function HostImage({ path, load }: { path: string; load: (path: string) => Promise<string | undefined> }) {
-  const [src, setSrc] = useState<string | undefined>()
-  useEffect(() => {
-    let cancelled = false
-    setSrc(undefined)
-    load(path)
-      .then((url) => {
-        if (!cancelled) {
-          setSrc(url)
-        }
-      })
-      .catch(() => {})
-    return () => {
-      cancelled = true
-    }
-  }, [path, load])
+function HostImage({ path, load }: { path: string; load?: HostImageLoader }) {
+  const { src } = useHostImageSrc(path, load)
   if (!src) {
     return null
   }
+  const name = baseName(path)
   return (
     <div className="border-t border-border p-2.5">
-      <img
-        src={src}
-        alt={path.split('/').pop() ?? 'Generated image'}
-        className="max-h-96 w-auto max-w-full rounded-md border border-border"
-      />
+      <ViewableImage image={{ src, name }} className="block max-w-full">
+        <img src={src} alt={name} className="max-h-96 w-auto max-w-full rounded-md border border-border" />
+      </ViewableImage>
     </div>
   )
 }

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,100 @@ 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>
   )
 }