@workerdeck/ui 2.7.2 → 2.9.0

package/src/components/agent/SessionPanel.tsx

@@ -40,7 +40,15 @@ import { ChartPie, FolderTree, Gauge, Info, MoreHorizontal, Plug, Sparkles, Tria
 import { cn } from '../../lib/utils.ts'
 import { Button } from '../ui/Button.tsx'
 import { Menu, MenuContent, MenuItem, MenuTrigger } from '../ui/Menu.tsx'
-import { Composer, skillPrompt, type ComposerHandle } from './Composer.tsx'
+import { Composer, type ComposerHandle } from './Composer.tsx'
+import {
+  composerCommandRows,
+  matchClientCommand,
+  mergeComposerRows,
+  skillPrompt,
+  type ClientCommand,
+  type ComposerCommandRow,
+} from './composer-commands.ts'
 import { ContextDialog } from './ContextDialog.tsx'
 import { TasksDialog } from './TasksDialog.tsx'
 import { HostFilesDialog } from './HostFilesDialog.tsx'
@@ -56,6 +64,7 @@ import { TerminalPermissionPrompt } from '../terminal/PermissionPrompt.tsx'
 import { TerminalQuestionPrompt } from '../terminal/QuestionPrompt.tsx'
 import { TerminalSurface } from '../terminal/surface.tsx'
 import { BookmarkProvider, type BookmarkHandle, type TerminalAffordances } from '../terminal/affordances.tsx'
+import { FileLinkProvider, type FileLinkOpener } from '../terminal/file-link.tsx'
 
 import { SessionInfoDialog } from './SessionInfoDialog.tsx'
 import { StatusBar } from './StatusBar.tsx'
@@ -122,9 +131,11 @@ export interface SessionPanelProps {
   affordances?: TerminalAffordances | boolean
   terminalMetrics?: TerminalMetrics
   scrubber?: boolean
-  // Bookmarked transcript item ids — the host owns membership and persistence.
+  // Bookmarked transcript item ids - the host owns membership and persistence.
   bookmarks?: readonly string[]
   onToggleBookmark?: (itemId: string) => void
+  // Where a file link in the transcript goes. Without it, such a link stays an ordinary anchor.
+  onOpenFile?: FileLinkOpener
   reveal?: { toolUseId: string; nonce: number }
   openSubagent?: { toolUseId: string; nonce: number }
   onSubagentChange?: (toolUseId: string | undefined) => void
@@ -185,11 +196,13 @@ export type SessionVitals = {
   permissionMode: TranscriptState['permissionMode']
   permissionModes: PermissionModeChoice[]
   skills: SkillInfo[] | undefined
+  // Everything `/` offers this session, flattened for a native host that cannot run the composer's own merge.
+  composerCommands: ComposerCommandRow[]
   cwd: TranscriptState['cwd']
   contextUsage: TranscriptState['contextUsage']
   tasks: SessionTask[]
   rateLimits: TranscriptState['rateLimits']
-  // When the newest window in `rateLimits` was reported, as event time — not receive time. External chrome (the
+  // When the newest window in `rateLimits` was reported, as event time - not receive time. External chrome (the
   // VS Code status bar, iOS) cannot otherwise tell a live reading from one a days-old session just replayed.
   // Absent means unknown, which is not the same as fresh.
   rateLimitsUpdatedAt: number | undefined
@@ -230,6 +243,7 @@ export function SessionPanel({
   cacheTranscript,
   emptyState,
   onLinkClick,
+  onOpenFile,
   fontSize,
   className,
 }: SessionPanelProps) {
@@ -258,6 +272,7 @@ export function SessionPanel({
     approve,
     deny,
     interrupt,
+    clearContext,
     setModel,
     setPermissionMode,
     reconnectNow,
@@ -334,6 +349,79 @@ export function SessionPanel({
     [state.checklist, subagents, state.session?.subagents],
   )
 
+  const clientCommands = useMemo((): ClientCommand[] => {
+    const modes = capabilities.permissionModes
+    const built: ClientCommand[] = []
+    if (models.length > 0) {
+      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
+  }, [capabilities, models.length, openPanel, clearContext, setModel, setPermissionMode])
+
+  const composerCommands = useMemo(
+    () =>
+      composerCommandRows(
+        mergeComposerRows({
+          commands: capabilities.slashCommands ? state.commands : undefined,
+          clientCommands,
+          skills: capabilities.skillsList ? state.skills : undefined,
+        }),
+      ),
+    [capabilities.slashCommands, capabilities.skillsList, state.commands, state.skills, clientCommands],
+  )
+
   const onVitalsRef = useRef(onVitals)
   onVitalsRef.current = onVitals
   const vitalsModel = effectiveModel ?? state.model
@@ -352,6 +440,7 @@ export function SessionPanel({
       permissionMode: state.permissionMode,
       permissionModes,
       skills: state.skills,
+      composerCommands,
       cwd: state.cwd,
       contextUsage: state.contextUsage,
       tasks,
@@ -370,6 +459,7 @@ export function SessionPanel({
     state.permissionMode,
     permissionModes,
     state.skills,
+    composerCommands,
     state.cwd,
     state.contextUsage,
     tasks,
@@ -423,25 +513,10 @@ export function SessionPanel({
   const jumpToRecap = useRef<(() => void) | null>(null)
   const repinTranscript = useRef<(() => void) | null>(null)
 
-  const commands = useMemo(() => {
-    if (!state.commands) {
-      return undefined
-    }
-    if (state.commands.some((c) => c.name === 'model')) {
-      return state.commands
-    }
-    return [{ name: 'model', description: 'Switch the model for this session', argumentHint: '<model>' }, ...state.commands]
-  }, [state.commands])
-
   const handleSend = (text: string, attachmentIds: string[]) => {
     if (attachmentIds.length === 0) {
-      const modelCommand = /^\/model\s+(\S+)$/.exec(text)
-      if (modelCommand) {
-        setModel(modelCommand[1])
-        return
-      }
-      if (capabilities.mcpStatus && text.trim() === '/mcp') {
-        openPanel('mcp')
+      const local = matchClientCommand(text, clientCommands)
+      if (local && local.command.run(local.args)) {
         return
       }
     }
@@ -535,6 +610,8 @@ export function SessionPanel({
     />
   )
 
+  const fileLinks = useMemo(() => (onOpenFile ? { cwd: state.cwd, open: onOpenFile } : undefined), [onOpenFile, state.cwd])
+
   const panelRef = useRef<HTMLDivElement>(null)
   useEffect(() => {
     if (!onLinkClick) {
@@ -579,222 +656,225 @@ export function SessionPanel({
   return (
     <TranscriptVariantProvider value={transcriptVariant}>
       <TranscriptDensityProvider value={transcriptDensity}>
-        <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}
-                    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"
-                      >
-                        dismiss
-                      </button>
-                    </div>
-                  </div>
-                ) : null}
-                {!readOnly && capabilities.interactiveApprovals && state.pendingApprovals.length > 0 ? (
-                  <div className={cn(terminal ? 'pb-2' : 'px-3 pb-2')}>
-                    <PromptSurface
+        <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}
-                      metrics={{ fontSize: effectiveTermFontSize, lineHeight: effectiveTermLineHeight }}
+                      fontSize={effectiveTermFontSize}
+                      lineHeight={effectiveTermLineHeight}
+                    />
+                  ) : null}
+                  <BookmarkProvider value={bookmarkHandle}>
+                    <Transcript
+                      key={subagentId ?? 'session'}
+                      state={state}
+                      fileUrl={sessionId ? (path) => client.sessionFileUrl(sessionId, path) : undefined}
+                      attachmentUrl={sessionId ? (id) => client.attachmentUrl(sessionId, id) : undefined}
+                      canBrowseFiles={hostFiles.available}
+                      hostImage={hostImage}
+                      variant={transcriptVariant}
+                      density={transcriptDensity}
+                      fontSize={effectiveTermFontSize}
+                      lineHeight={effectiveTermLineHeight}
                       affordances={affordances}
-                    >
-                      {state.pendingApprovals.map((request) => {
-                        // 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) {
+                      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"
+                        >
+                          dismiss
+                        </button>
+                      </div>
+                    </div>
+                  ) : null}
+                  {!readOnly && capabilities.interactiveApprovals && state.pendingApprovals.length > 0 ? (
+                    <div className={cn(terminal ? 'pb-2' : 'px-3 pb-2')}>
+                      <PromptSurface
+                        terminal={terminal}
+                        metrics={{ fontSize: effectiveTermFontSize, lineHeight: effectiveTermLineHeight }}
+                        affordances={affordances}
+                      >
+                        {state.pendingApprovals.map((request) => {
+                          // 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 ? commands : undefined}
-                      skills={capabilities.skillsList ? state.skills : undefined}
-                      attachments={attachments}
-                      draft={draft}
-                      onSearchFiles={hostFiles.available ? searchComposerFiles : undefined}
-                      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}
-                      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>
-        </ToolResultFetchProvider>
+                        })}
+                      </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}
+                        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}
+                        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>
+          </ToolResultFetchProvider>
+        </FileLinkProvider>
       </TranscriptDensityProvider>
     </TranscriptVariantProvider>
   )

package/src/components/agent/SessionWorkspace.tsx

@@ -31,6 +31,7 @@ export interface SessionWorkspaceProps {
   controlsSurface?: SessionPanelProps['controlsSurface']
   fontSize?: SessionPanelProps['fontSize']
   onLinkClick?: SessionPanelProps['onLinkClick']
+  onOpenFile?: SessionPanelProps['onOpenFile']
   unseen?: SessionPanelProps['unseen']
   readOnly?: SessionPanelProps['readOnly']
   onVitals?: SessionPanelProps['onVitals']
@@ -64,6 +65,7 @@ export function SessionWorkspace({
   controlsSurface,
   fontSize,
   onLinkClick,
+  onOpenFile,
   unseen,
   readOnly,
   onVitals,
@@ -222,6 +224,7 @@ export function SessionWorkspace({
             controlsSurface={controlsSurface}
             fontSize={fontSize}
             onLinkClick={onLinkClick}
+            onOpenFile={onOpenFile ?? files.open}
             statusPlacement={statusPlacement}
             unseen={unseen}
             readOnly={readOnly}