@workerdeck/ui 2.13.0 → 2.15.0

package/src/components/agent/SessionPanel.tsx

@@ -20,6 +20,7 @@ import {
   type PermissionRequest,
   type RateLimitInfo,
   type SessionTask,
+  type ShellInfo,
   type SkillInfo,
   type SubagentInfo,
 } from '@workerdeck/protocol'
@@ -60,6 +61,9 @@ import { PermissionModeSelect, permissionModeChoices, type PermissionModeChoice
 import { PermissionPrompt } from './PermissionPrompt.tsx'
 import { SubagentStrip } from './SubagentStrip.tsx'
 import { useSubagentFrame } from './use-subagent-frame.ts'
+import { ShellStrip } from './ShellStrip.tsx'
+import { ShellTerminal } from './ShellTerminal.tsx'
+import { useShellFrame } from './use-shell-frame.ts'
 import { QuestionPrompt, parseUserQuestions } from './QuestionPrompt.tsx'
 import { TerminalPermissionPrompt } from '../terminal/PermissionPrompt.tsx'
 import { TerminalQuestionPrompt } from '../terminal/QuestionPrompt.tsx'
@@ -71,6 +75,7 @@ import { SessionInfoDialog } from './SessionInfoDialog.tsx'
 import { StatusBar } from './StatusBar.tsx'
 import { Transcript } from './Transcript.tsx'
 import { ToolResultFetchProvider } from './tool-result-fetch.tsx'
+import { ShellActionsProvider } from './shell-actions.tsx'
 import { ToolTitleProvider } from './tool-titles.tsx'
 import { ToolResultImageProvider, useToolResultImages } from './tool-result-image.tsx'
 import {
@@ -143,8 +148,12 @@ export interface SessionPanelProps {
   reveal?: { toolUseId: string; nonce: number }
   openSubagent?: { toolUseId: string; nonce: number }
   onSubagentChange?: (toolUseId: string | undefined) => void
+  // Host request to drill in to a shell's terminal; `shellId: undefined` withdraws it (Back/Forward).
+  openShell?: { shellId: string; nonce: number }
+  onShellChange?: (shellId: string | undefined) => void
   // The attach frame's `state.session` never refreshes, so a host that polls the sessions list passes the live records here.
   subagents?: SubagentInfo[]
+  shells?: ShellInfo[]
   stickyPrompt?: boolean
   transcriptDensity?: TranscriptDensity
   transcriptFont?: TranscriptFont
@@ -234,8 +243,11 @@ export function SessionPanel({
   onToggleBookmark,
   reveal,
   subagents,
+  shells,
   openSubagent,
   onSubagentChange,
+  openShell,
+  onShellChange,
   stickyPrompt = false,
   controlsSurface = 'internal',
   onControls,
@@ -283,7 +295,22 @@ export function SessionPanel({
     setPermissionMode,
     reconnectNow,
     loadFullResult,
+    loadShellOutput,
+    verifyShell,
+    killShell,
   } = useClaudeSession(client, sessionId, { onProtocolError: setProtocolError, cacheTranscript })
+  const {
+    shellId: framedShellId,
+    enterShell,
+    leaveShell,
+    returnReveal: shellReturnReveal,
+    shell: framedShell,
+    label: framedShellLabel,
+  } = useShellFrame({ sessionId, items: state.items, session: state.session, shells, reveal, openShell, onShellChange })
+  const shellActions = useMemo(
+    () => ({ loadOutput: loadShellOutput, verify: verifyShell, kill: killShell, open: enterShell }),
+    [loadShellOutput, verifyShell, killShell, enterShell],
+  )
   useEffect(() => setProtocolError(undefined), [sessionId])
   const {
     subagentId,
@@ -295,6 +322,15 @@ export function SessionPanel({
     fallbackLabel: subagentFallbackLabel,
   } = useSubagentFrame({ sessionId, items: state.items, session: state.session, reveal, openSubagent, onSubagentChange })
 
+  // Two frames, one reveal slot: the more recent exit wins, so leaving a shell never lands on the
+  // row a sub-agent frame left behind.
+  const frameReturnReveal = useMemo(() => {
+    if (returnReveal && shellReturnReveal) {
+      return returnReveal.nonce >= shellReturnReveal.nonce ? returnReveal : shellReturnReveal
+    }
+    return returnReveal ?? shellReturnReveal
+  }, [returnReveal, shellReturnReveal])
+
   const [caughtUp, setCaughtUp] = useState(false)
   useEffect(() => {
     setCaughtUp(false)
@@ -667,227 +703,244 @@ export function SessionPanel({
       <TranscriptDensityProvider value={transcriptDensity}>
         <FileLinkProvider value={fileLinks}>
           <ToolResultFetchProvider value={loadFullResult}>
-            <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}
-                      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}
-                      sessionNames={peers.names}
-                      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={taskReveal ?? 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"
+            <ShellActionsProvider value={shellActions}>
+              <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}
+                    {framedShellId !== undefined ? (
+                      <ShellStrip
+                        shell={framedShell}
+                        label={framedShellLabel}
+                        onBack={leaveShell}
+                        onKill={() => void killShell(framedShellId)}
+                        terminal={terminal}
+                        fontSize={effectiveTermFontSize}
+                        lineHeight={effectiveTermLineHeight}
+                      />
+                    ) : null}
+                    {framedShellId === undefined && subagentId !== undefined ? (
+                      <SubagentStrip
+                        task={subagentTask}
+                        items={subagentFrameItems}
+                        label={subagentFallbackLabel}
+                        onBack={leaveSubagent}
+                        terminal={terminal}
+                        fontSize={effectiveTermFontSize}
+                        lineHeight={effectiveTermLineHeight}
+                      />
+                    ) : null}
+                    {framedShellId !== undefined ? (
+                      <ShellTerminal key={framedShellId} handle={handle} shellId={framedShellId} fontSize={effectiveTermFontSize} />
+                    ) : (
+                      <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}
+                          sessionNames={peers.names}
+                          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={taskReveal ?? frameReturnReveal ?? reveal}
+                          frame={subagentId === undefined ? undefined : { parentToolUseId: subagentId }}
+                          onOpenSubagent={enterSubagent}
+                          emptyState={emptyState}
+                          jumpToRecapRef={jumpToRecap}
+                          repinRef={repinTranscript}
+                        />
+                      </BookmarkProvider>
+                    )}
+                    {catchUp && newCount > 0 && !replaying && subagentId === undefined && framedShellId === 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"
                         >
-                          dismiss
-                        </button>
+                          <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>
-                    </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) => {
-                          // Before the variant split: a host's entry is the renderer for its tool in
-                          // both themes, and it overrides the built-in entries rather than racing them.
-                          const HostPrompt = approvalPrompts?.[request.toolName]
-                          if (HostPrompt) {
-                            return <HostPrompt key={request.id} request={request} onApprove={approve} onDeny={deny} />
-                          }
-                          const isQuestion = request.toolName === 'AskUserQuestion' && parseUserQuestions(request.input).length > 0
-                          if (terminal) {
+                    ) : 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) => {
+                            // Before the variant split: a host's entry is the renderer for its tool in
+                            // both themes, and it overrides the built-in entries rather than racing them.
+                            const HostPrompt = approvalPrompts?.[request.toolName]
+                            if (HostPrompt) {
+                              return <HostPrompt key={request.id} request={request} onApprove={approve} onDeny={deny} />
+                            }
+                            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 ? state.commands : undefined}
-                        skills={capabilities.skillsList ? state.skills : undefined}
-                        clientCommands={clientCommands}
-                        attachments={attachments}
-                        draft={draft}
-                        onSearchFiles={hostFiles.available ? searchComposerFiles : undefined}
-                        peers={peers.peers}
-                        onShellCommand={shell ? runShell : 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}
-                        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}
-                        costUsd={state.costUsd}
-                        usageByModel={state.usageByModel}
-                        pricing={pricing}
-                        spend={profileSpend}
-                        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)}
-                      />
-                      <TasksDialog
-                        tasks={tasks}
-                        showCompleted={showCompletedTasks}
-                        onShowCompletedChange={setShowCompletedTasks}
-                        onSelectTask={(task) => {
-                          if (task.toolUseId) {
-                            setTaskReveal({ toolUseId: task.toolUseId, nonce: Date.now() })
-                          }
-                        }}
-                        open={panel === 'tasks'}
-                        onOpenChange={(next) => setPanel(next ? 'tasks' : 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>
+                          })}
+                        </PromptSurface>
+                      </div>
+                    ) : null}
+                    {readOnly || subagentId !== undefined || framedShellId !== undefined ? null : (
+                      <>
+                        <Composer
+                          ref={composerRef}
+                          onSend={handleSend}
+                          onInterrupt={interrupt}
+                          busy={busy}
+                          disabled={ended || !sessionId}
+                          commands={capabilities.slashCommands ? state.commands : undefined}
+                          skills={capabilities.skillsList ? state.skills : undefined}
+                          clientCommands={clientCommands}
+                          attachments={attachments}
+                          draft={draft}
+                          onSearchFiles={hostFiles.available ? searchComposerFiles : undefined}
+                          peers={peers.peers}
+                          onShellCommand={shell ? runShell : 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}
+                          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}
+                          costUsd={state.costUsd}
+                          usageByModel={state.usageByModel}
+                          pricing={pricing}
+                          spend={profileSpend}
+                          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)}
+                        />
+                        <TasksDialog
+                          tasks={tasks}
+                          showCompleted={showCompletedTasks}
+                          onShowCompletedChange={setShowCompletedTasks}
+                          onSelectTask={(task) => {
+                            if (task.toolUseId) {
+                              setTaskReveal({ toolUseId: task.toolUseId, nonce: Date.now() })
+                            }
+                          }}
+                          open={panel === 'tasks'}
+                          onOpenChange={(next) => setPanel(next ? 'tasks' : 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>
+            </ShellActionsProvider>
           </ToolResultFetchProvider>
         </FileLinkProvider>
       </TranscriptDensityProvider>