Add /details and /export slash commands

Author: Chris Scott

frontend/src/components/message/PromptInput.tsx

@@ -34,6 +34,8 @@ interface PromptInputProps {
   onShowSessionsDialog?: () => void
   onShowModelsDialog?: () => void
   onShowHelpDialog?: () => void
+  onToggleDetails?: () => boolean
+  onExportSession?: () => void
 }
 
 export function PromptInput({ 
@@ -45,7 +47,9 @@ export function PromptInput({
   onScrollToBottom,
   onShowSessionsDialog,
   onShowModelsDialog,
-  onShowHelpDialog
+  onShowHelpDialog,
+  onToggleDetails,
+  onExportSession
 }: PromptInputProps) {
   const [prompt, setPrompt] = useState('')
   const [modelName, setModelName] = useState<string>('')
@@ -73,7 +77,9 @@ export function PromptInput({
     directory,
     onShowSessionsDialog,
     onShowModelsDialog,
-    onShowHelpDialog
+    onShowHelpDialog,
+    onToggleDetails,
+    onExportSession
   })
 
   const { files: searchResults } = useFileSearch(

frontend/src/hooks/useCommandHandler.ts

@@ -2,6 +2,7 @@ import { useState, useCallback } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { createOpenCodeClient } from '@/api/opencode'
 import { useCreateSession } from '@/hooks/useOpenCode'
+import { showToast } from '@/lib/toast'
 import type { components } from '@/api/opencode-types'
 
 type CommandType = components['schemas']['Command']
@@ -13,6 +14,8 @@ interface CommandHandlerProps {
   onShowSessionsDialog?: () => void
   onShowModelsDialog?: () => void
   onShowHelpDialog?: () => void
+  onToggleDetails?: () => boolean
+  onExportSession?: () => void
 }
 
 export function useCommandHandler({
@@ -21,7 +24,9 @@ export function useCommandHandler({
   directory,
   onShowSessionsDialog,
   onShowModelsDialog,
-  onShowHelpDialog
+  onShowHelpDialog,
+  onToggleDetails,
+  onExportSession
 }: CommandHandlerProps) {
   const navigate = useNavigate()
   const createSession = useCreateSession(opcodeUrl, directory)
@@ -79,14 +84,25 @@ export function useCommandHandler({
           }
           break
 
+        case 'details':
+          if (onToggleDetails) {
+            const expanded = onToggleDetails()
+            showToast.success(expanded ? 'Tool details expanded' : 'Tool details collapsed')
+          }
+          break
+          
+        case 'export':
+          if (onExportSession) {
+            onExportSession()
+          }
+          break
+          
         case 'share':
         case 'unshare':
-        case 'export':
         case 'compact':
         case 'summarize':
         case 'undo':
         case 'redo':
-        case 'details':
         case 'editor':
         case 'init':
           await client.sendCommand(sessionID, {
@@ -106,7 +122,7 @@ export function useCommandHandler({
     } finally {
       setLoading(false)
     }
-  }, [sessionID, opcodeUrl, onShowSessionsDialog, onShowModelsDialog, onShowHelpDialog, createSession, navigate])
+  }, [sessionID, opcodeUrl, directory, onShowSessionsDialog, onShowModelsDialog, onShowHelpDialog, onToggleDetails, onExportSession, createSession, navigate])
 
   return {
     executeCommand,

frontend/src/lib/exportSession.ts

@@ -0,0 +1,139 @@
+import type { MessageWithParts, Session, Part } from '@/api/types'
+
+function formatDate(timestamp: number): string {
+  return new Date(timestamp).toLocaleString()
+}
+
+function sanitizeFilename(name: string): string {
+  return name
+    .replace(/[^a-zA-Z0-9-_\s]/g, '')
+    .replace(/\s+/g, '-')
+    .toLowerCase()
+    .slice(0, 50)
+}
+
+function formatPartContent(part: Part): string {
+  switch (part.type) {
+    case 'text':
+      return part.text || ''
+    case 'tool':
+      return formatToolPart(part)
+    case 'reasoning':
+      return `<details>\n<summary>Reasoning</summary>\n\n${part.text || ''}\n\n</details>\n`
+    case 'patch':
+      return formatPatchPart(part)
+    case 'file':
+      return `*Attached file: ${part.filename || 'unknown'}*`
+    case 'step-finish':
+      return `*Cost: $${part.cost?.toFixed(4) || '0'} | Tokens: ${(part.tokens?.input || 0) + (part.tokens?.output || 0)}*`
+    case 'snapshot':
+      return `*Snapshot: ${part.snapshot || 'unknown'}*`
+    case 'agent':
+      return `**Agent: ${part.name || 'unknown'}**`
+    default:
+      return ''
+  }
+}
+
+function formatToolPart(part: Part): string {
+  if (part.type !== 'tool') return ''
+  
+  const toolName = part.tool || 'Unknown Tool'
+  const state = part.state
+  const status = state?.status || 'unknown'
+  
+  let content = `### Tool: ${toolName}\n`
+  content += `*Status: ${status}*\n\n`
+  
+  if (state && 'input' in state && state.input) {
+    content += '**Input:**\n```json\n'
+    content += JSON.stringify(state.input, null, 2)
+    content += '\n```\n\n'
+  }
+  
+  if (state && 'output' in state && state.output) {
+    content += '**Output:**\n```\n'
+    content += state.output
+    content += '\n```\n'
+  }
+  
+  if (state && 'error' in state && state.error) {
+    content += '**Error:**\n```\n'
+    content += state.error
+    content += '\n```\n'
+  }
+  
+  return content
+}
+
+function formatPatchPart(part: Part): string {
+  if (part.type !== 'patch') return ''
+  
+  let content = `### File Changes\n`
+  
+  if (part.files && part.files.length > 0) {
+    content += `*Files: ${part.files.join(', ')}*\n\n`
+  }
+  
+  return content
+}
+
+export function generateSessionMarkdown(
+  messages: MessageWithParts[],
+  session: Session
+): string {
+  const lines: string[] = []
+  
+  lines.push(`# ${session.title || 'Untitled Session'}`)
+  lines.push('')
+  lines.push(`**Session ID:** ${session.id}`)
+  lines.push(`**Created:** ${formatDate(session.time.created)}`)
+  if (session.share?.url) {
+    lines.push(`**Shared:** [View](${session.share.url})`)
+  }
+  lines.push('')
+  lines.push('---')
+  lines.push('')
+  
+  for (const message of messages) {
+    const role = message.info.role === 'user' ? 'User' : 'Assistant'
+    lines.push(`## ${role}`)
+    lines.push('')
+    
+    for (const part of message.parts) {
+      const content = formatPartContent(part)
+      if (content) {
+        lines.push(content)
+        lines.push('')
+      }
+    }
+    
+    lines.push('---')
+    lines.push('')
+  }
+  
+  return lines.join('\n')
+}
+
+export function downloadMarkdown(content: string, filename: string): void {
+  const blob = new Blob([content], { type: 'text/markdown' })
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = filename
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  URL.revokeObjectURL(url)
+}
+
+export function exportSession(
+  messages: MessageWithParts[],
+  session: Session
+): { filename: string; content: string } {
+  const markdown = generateSessionMarkdown(messages, session)
+  const titlePart = session.title ? sanitizeFilename(session.title) : 'session'
+  const filename = `${titlePart}-${session.id}.md`
+  
+  return { filename, content: markdown }
+}

frontend/src/pages/SessionDetail.tsx

@@ -21,6 +21,8 @@ import { usePermissionRequests } from "@/hooks/usePermissionRequests";
 import { useAutoScroll } from "@/hooks/useAutoScroll";
 import { useEffect, useRef, useCallback } from "react";
 import { MessageSkeleton } from "@/components/message/MessageSkeleton";
+import { exportSession, downloadMarkdown } from "@/lib/exportSession";
+import { showToast } from "@/lib/toast";
 import type { PermissionResponse } from "@/api/types";
 
 export function SessionDetail() {
@@ -135,6 +137,23 @@ export function SessionDetail() {
     await openCodeClient.respondToPermission(permissionSessionID, permissionID, response)
   }, [openCodeClient]);
 
+  const handleToggleDetails = useCallback(() => {
+    const newValue = !preferences?.expandToolCalls
+    updateSettings({ expandToolCalls: newValue })
+    return newValue
+  }, [preferences?.expandToolCalls, updateSettings]);
+
+  const handleExportSession = useCallback(() => {
+    if (!messages || !session) {
+      showToast.error('No session data to export')
+      return
+    }
+    
+    const { filename, content } = exportSession(messages, session)
+    downloadMarkdown(content, filename)
+    showToast.success(`Exported to ${filename}`)
+  }, [messages, session]);
+
 
 
   if (!sessionId) {
@@ -200,6 +219,8 @@ export function SessionDetail() {
               onShowHelpDialog={() => {
                 openSettings()
               }}
+              onToggleDetails={handleToggleDetails}
+              onExportSession={handleExportSession}
             />
           </div>
         )}