@brainfish-ai/devdoc 0.1.21

package/renderer/components/docs-viewer/agent/agent-chat.tsx

@@ -0,0 +1,2076 @@
+'use client'
+
+import { useEffect, useRef, useCallback, useState, FormEvent, useMemo } from 'react'
+import { useChat } from '@ai-sdk/react'
+import { 
+  DefaultChatTransport, 
+  lastAssistantMessageIsCompleteWithToolCalls,
+  UIMessage,
+} from 'ai'
+import { 
+  ArrowUp,
+  Square,
+  Image as ImageIcon,
+  X
+} from '@phosphor-icons/react'
+import { Button } from '@/components/ui/button'
+import type { BrainfishCollection, BrainfishRESTRequest } from '@/lib/api-docs/types'
+import type { PrefillData, RequestValidationResult } from '@/lib/api-docs/agent/types'
+import type { DebugContext } from '../playground/response-viewer'
+import { encodeCardMessage, detectErrorType } from './cards'
+import { buildEndpointIndex, searchEndpoints, findRequestById, formatRequestForAI } from '@/lib/api-docs/agent/indexer'
+import { ChatMessage, TypingIndicator } from './chat-message'
+import { cn } from '@/lib/utils'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+import { useModeContext, useNotes, useWorkspace } from '@/lib/api-docs/code-editor'
+import { useCurrentRequestPayload, useSendTrigger } from '@/lib/api-docs/playground/context'
+
+/**
+ * Custom transport that intercepts streaming events for write_file tool
+ * Wraps DefaultChatTransport and intercepts the stream to extract write_file content
+ */
+function createStreamingTransport(
+  config: ConstructorParameters<typeof DefaultChatTransport>[0],
+  callbacks: {
+    onWriteFileDelta: (toolCallId: string, path: string, content: string) => void
+    onWriteFileStart: (toolCallId: string, path: string) => void
+    onWriteFileEnd: (toolCallId: string) => void
+  }
+): DefaultChatTransport<UIMessage> {
+  const transport = new DefaultChatTransport<UIMessage>(config)
+  
+  // Track active write_file tool calls
+  const activeWriteFiles = new Map<string, { path: string; lastContent: string }>()
+  const toolInputBuffers = new Map<string, string>()
+  
+  // Override the fetch to intercept the stream
+  const originalFetch = transport['fetch'] || globalThis.fetch
+  
+  transport['fetch'] = async (input: RequestInfo | URL, init?: RequestInit) => {
+    const response = await originalFetch(input, init)
+    
+    if (!response.body) return response
+    
+    // Create a transform stream to intercept and process the SSE events
+    const reader = response.body.getReader()
+    const decoder = new TextDecoder()
+    let buffer = ''
+    
+    const processedStream = new ReadableStream({
+      async start(controller) {
+        try {
+          while (true) {
+            const { done, value } = await reader.read()
+            
+            if (done) {
+              // Stream ended - close all active write_files
+              for (const [toolCallId] of activeWriteFiles) {
+                callbacks.onWriteFileEnd(toolCallId)
+              }
+              activeWriteFiles.clear()
+              toolInputBuffers.clear()
+              controller.close()
+              break
+            }
+            
+            // Pass through the original data
+            controller.enqueue(value)
+            
+            // Parse the SSE events for write_file content
+            buffer += decoder.decode(value, { stream: true })
+            const lines = buffer.split('\n')
+            buffer = lines.pop() || '' // Keep incomplete line in buffer
+            
+            for (const line of lines) {
+              if (line.startsWith('data: ')) {
+                const data = line.slice(6)
+                if (data === '[DONE]') continue
+                
+                try {
+                  const event = JSON.parse(data)
+                  
+                  // Handle tool-input-start for write_file
+                  if (event.type === 'tool-input-start' && event.toolName === 'write_file') {
+                    toolInputBuffers.set(event.toolCallId, '')
+                  }
+                  
+                  // Handle tool-input-delta for write_file
+                  if (event.type === 'tool-input-delta' && toolInputBuffers.has(event.toolCallId)) {
+                    const currentBuffer = toolInputBuffers.get(event.toolCallId) || ''
+                    const newBuffer = currentBuffer + (event.inputTextDelta || '')
+                    toolInputBuffers.set(event.toolCallId, newBuffer)
+                    
+                    // Try to parse partial JSON to extract content
+                    try {
+                      // Look for "content": " and extract what comes after
+                      const contentMatch = newBuffer.match(/"content":\s*"((?:[^"\\]|\\.)*)/)
+                      if (contentMatch) {
+                        const escapedContent = contentMatch[1]
+                        // Unescape the content
+                        const content = escapedContent
+                          .replace(/\\n/g, '\n')
+                          .replace(/\\t/g, '\t')
+                          .replace(/\\r/g, '\r')
+                          .replace(/\\"/g, '"')
+                          .replace(/\\\\/g, '\\')
+                        
+                        const activeWrite = activeWriteFiles.get(event.toolCallId)
+                        
+                        // Also try to extract path
+                        const pathMatch = newBuffer.match(/"path":\s*"([^"]+)"/)
+                        const path = pathMatch?.[1] || ''
+                        
+                        if (!activeWrite && path) {
+                          // First time seeing content with path - start streaming
+                          activeWriteFiles.set(event.toolCallId, { path, lastContent: content })
+                          callbacks.onWriteFileStart(event.toolCallId, path)
+                          callbacks.onWriteFileDelta(event.toolCallId, path, content)
+                        } else if (activeWrite && content.length > activeWrite.lastContent.length) {
+                          // Content grew - send new content
+                          activeWrite.lastContent = content
+                          callbacks.onWriteFileDelta(event.toolCallId, activeWrite.path, content)
+                        }
+                      }
+                    } catch {
+                      // JSON not complete yet, continue buffering
+                    }
+                  }
+                  
+                  // Handle tool-input-available (complete)
+                  if (event.type === 'tool-input-available' && event.toolName === 'write_file') {
+                    const activeWrite = activeWriteFiles.get(event.toolCallId)
+                    if (activeWrite) {
+                      callbacks.onWriteFileEnd(event.toolCallId)
+                      activeWriteFiles.delete(event.toolCallId)
+                    }
+                    toolInputBuffers.delete(event.toolCallId)
+                  }
+                } catch {
+                  // Invalid JSON, skip
+                }
+              }
+            }
+          }
+        } catch (err) {
+          controller.error(err)
+        }
+      },
+    })
+    
+    // Return new response with the processed stream
+    return new Response(processedStream, {
+      headers: response.headers,
+      status: response.status,
+      statusText: response.statusText,
+    })
+  }
+  
+  return transport
+}
+
+interface Suggestion {
+  title: string
+  label: string
+  prompt: string
+}
+
+// Client-side cache for suggestions
+const SUGGESTIONS_CACHE_KEY = 'brainfish-suggestions-cache'
+
+function getSuggestionsFromCache(key: string): Suggestion[] | null {
+  try {
+    const cached = localStorage.getItem(SUGGESTIONS_CACHE_KEY)
+    if (cached) {
+      const data = JSON.parse(cached)
+      if (data[key] && Date.now() - data[key].timestamp < 1000 * 60 * 60) { // 1 hour TTL
+        return data[key].suggestions
+      }
+    }
+  } catch {
+    // Ignore cache errors
+  }
+  return null
+}
+
+function saveSuggestionsToCache(key: string, suggestions: Suggestion[]) {
+  try {
+    const cached = localStorage.getItem(SUGGESTIONS_CACHE_KEY)
+    const data = cached ? JSON.parse(cached) : {}
+    data[key] = { suggestions, timestamp: Date.now() }
+    localStorage.setItem(SUGGESTIONS_CACHE_KEY, JSON.stringify(data))
+  } catch {
+    // Ignore cache errors
+  }
+}
+
+// Changelog release type for agent search
+interface ChangelogRelease {
+  version: string
+  date: string
+  title: string
+  slug: string
+}
+
+// Extended collection type with optional changelog
+interface ExtendedCollection extends BrainfishCollection {
+  changelogReleases?: ChangelogRelease[]
+}
+
+interface AgentChatProps {
+  collection: ExtendedCollection
+  currentEndpoint: BrainfishRESTRequest | null
+  onNavigate: (endpointId: string) => void
+  onPrefill: (data: PrefillData) => void
+  apiSummary?: string | null
+  debugContext?: DebugContext | null
+  onDebugContextConsumed?: () => void
+  /** Explain context from playground response - triggers agent explanation */
+  explainContext?: DebugContext | null
+  /** Callback to clear explain context after processing */
+  onExplainContextConsumed?: () => void
+  onOpenGlobalAuth?: () => void
+  onNavigateToAuthTab?: () => void
+  onNavigateToParamsTab?: () => void
+  onNavigateToBodyTab?: () => void
+  onNavigateToHeadersTab?: () => void
+  /** Callback to navigate to a documentation section */
+  onNavigateToDocSection?: (sectionId: string) => void
+  /** Callback to navigate to a documentation page */
+  onNavigateToDocPage?: (slug: string) => void
+  /** Callback when message count changes */
+  onHasMessagesChange?: (hasMessages: boolean) => void
+}
+
+// Storage key for chat history
+const CHAT_STORAGE_KEY = 'brainfish-agent-chat'
+
+export function AgentChat({ 
+  collection, 
+  currentEndpoint, 
+  onNavigate, 
+  onPrefill,
+  apiSummary,
+  debugContext,
+  onDebugContextConsumed,
+  explainContext,
+  onExplainContextConsumed,
+  onOpenGlobalAuth,
+  onNavigateToAuthTab,
+  onNavigateToParamsTab,
+  onNavigateToBodyTab,
+  onNavigateToHeadersTab,
+  onNavigateToDocSection,
+  onNavigateToDocPage,
+  onHasMessagesChange,
+}: AgentChatProps) {
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const processedDebugRef = useRef<string | null>(null)
+  
+  // Local input state (controlled by us, not useChat)
+  const [inputValue, setInputValue] = useState('')
+  
+  // Image upload state
+  const [selectedImages, setSelectedImages] = useState<Array<{ file: File; preview: string; base64: string }>>([])
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  
+  // Mode context for notes, API client, and docs
+  const { switchToNotes, switchToApiClient, switchToDocs, setActiveFilePath, setStreamingContent, triggerNotesRefresh } = useModeContext()
+  
+  // Get workspace for notes
+  const apiSpecUrl = process.env.NEXT_PUBLIC_OPENAPI_URL || collection.name || 'default'
+  const { workspace } = useWorkspace(apiSpecUrl, collection.name)
+  const { notes, createNote, updateNote, deleteNote, deleteAllNotes, refresh: refreshNotes } = useNotes(workspace?.id || null)
+  
+  // Suggestions state
+  const [suggestions, setSuggestions] = useState<Suggestion[]>([])
+  const [loadingSuggestions, setLoadingSuggestions] = useState(false)
+  const [showSuggestions, setShowSuggestions] = useState(true)
+  
+  // Current request payload from playground
+  const { currentRequestPayload } = useCurrentRequestPayload()
+  
+  // Send trigger - to invoke playground's send button
+  const { requestSend } = useSendTrigger()
+  
+  // Build endpoint index for search
+  const endpointIndex = useMemo(() => buildEndpointIndex(collection), [collection])
+
+  // Handler to open a file from chat (when user clicks on file name in tool display)
+  const handleOpenFile = useCallback((path: string) => {
+    switchToNotes(path) // Pass path directly to avoid URL reset
+  }, [switchToNotes])
+
+  // Track last streamed content to compute deltas
+  const lastStreamedContent = useRef<Map<string, string>>(new Map())
+
+  // Build documentation index for search (including nested pages)
+  const docIndex = useMemo(() => {
+    if (!collection.docGroups) return []
+    
+    const pages: Array<{
+      id: string
+      slug: string
+      title: string
+      description: string
+      group: string
+      groupId: string
+    }> = []
+    
+    // Helper to recursively add pages
+    const addPages = (pageList: typeof collection.docGroups[0]['pages'], groupTitle: string, groupId: string) => {
+      for (const page of pageList) {
+        pages.push({
+          id: page.id,
+          slug: page.slug,
+          title: page.title,
+          description: page.description || '',
+          group: groupTitle,
+          groupId: groupId,
+        })
+        // Also add children if present
+        if (page.children && page.children.length > 0) {
+          addPages(page.children, page.title || groupTitle, groupId)
+        }
+      }
+    }
+    
+    for (const group of collection.docGroups) {
+      addPages(group.pages, group.title, group.id)
+    }
+    
+    return pages
+  }, [collection])
+
+  // Build changelog index for search
+  const changelogIndex = useMemo(() => {
+    if (!collection.changelogReleases) return []
+    return collection.changelogReleases.map(release => ({
+      version: release.version,
+      date: release.date,
+      title: release.title,
+      slug: release.slug,
+    }))
+  }, [collection])
+
+  // Create streaming transport with callbacks
+  const transport = useMemo(() => {
+    return createStreamingTransport(
+      {
+        api: '/api/chat',
+        body: {
+          endpointIndex,
+          docIndex,
+          changelogIndex,
+          currentEndpointId: currentEndpoint?.id,
+          apiSummary: apiSummary || undefined,
+        },
+      },
+      {
+        onWriteFileStart: (toolCallId, path) => {
+          lastStreamedContent.current.set(toolCallId, '')
+          setStreamingContent({ path, content: '', isStreaming: true })
+          // Navigate to the file being written
+          setActiveFilePath(path)
+        },
+        onWriteFileDelta: (toolCallId, path, fullContent) => {
+          // Update streaming content with full content (already includes all previous)
+          setStreamingContent({ path, content: fullContent, isStreaming: true })
+        },
+        onWriteFileEnd: (toolCallId) => {
+          lastStreamedContent.current.delete(toolCallId)
+          // Don't clear streaming content immediately - let the final save do it
+        },
+      }
+    )
+  }, [endpointIndex, docIndex, changelogIndex, currentEndpoint?.id, apiSummary, setStreamingContent, setActiveFilePath])
+
+  // Chat hook with custom streaming transport
+  const { 
+    messages, 
+    status,
+    sendMessage,
+    addToolOutput,
+    setMessages,
+    stop,
+  } = useChat({
+    id: 'agent-chat',
+    transport,
+    
+    // Automatically submit when all tool calls are complete
+    sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
+    
+    // Handle client-side tool execution
+    async onToolCall({ toolCall }) {
+      
+      if ('dynamic' in toolCall && toolCall.dynamic) {
+        return
+      }
+      
+      const { toolName, toolCallId, input: toolInput } = toolCall as {
+        toolName: string
+        toolCallId: string
+        input: Record<string, unknown>
+      }
+      
+      
+      try {
+        // === UNIFIED SEARCH TOOL ===
+        // Searches across docs, endpoints, changelog, and future content types
+        if (toolName === 'search') {
+          const { query, type = 'all' } = toolInput as { query: string; type?: 'all' | 'docs' | 'endpoints' | 'changelog' }
+          
+          const results: Array<{
+            type: 'doc' | 'endpoint' | 'changelog'
+            id: string
+            title: string
+            description?: string
+            method?: string
+            path?: string
+            group?: string
+            date?: string
+            score: number
+          }> = []
+          
+          // Tokenize query
+          const queryTokens = query.toLowerCase().split(/\s+/).filter(t => t.length > 1)
+          const queryLower = query.toLowerCase()
+          
+          // Search changelog if type is 'all' or 'changelog'
+          const changelogReleases = collection.changelogReleases || []
+          if ((type === 'all' || type === 'changelog') && changelogReleases.length > 0) {
+            // Check for keywords that indicate changelog intent
+            const changelogKeywords = ['release', 'changelog', 'version', 'update', 'latest', 'new', 'what\'s new', 'history']
+            const isChangelogQuery = changelogKeywords.some(kw => queryLower.includes(kw))
+            
+            for (const release of changelogReleases) {
+              let score = 0
+              const versionLower = release.version.toLowerCase()
+              const titleLower = release.title.toLowerCase()
+              const dateLower = release.date.toLowerCase()
+              
+              // Boost score for changelog-related queries
+              if (isChangelogQuery) score += 50
+              
+              if (versionLower.includes(queryLower)) score += 100
+              if (titleLower.includes(queryLower)) score += 80
+              if (queryLower.includes('latest') && release === changelogReleases[0]) score += 150
+              
+              for (const token of queryTokens) {
+                if (versionLower.includes(token)) score += 30
+                if (titleLower.includes(token)) score += 25
+                if (dateLower.includes(token)) score += 20
+              }
+              
+              if (score > 0) {
+                // Extract just the version from the slug (e.g., "changelog/v1.2.0" -> "v1.2.0")
+                const versionId = release.slug.replace(/^changelog\//, '')
+                results.push({
+                  type: 'changelog',
+                  id: versionId,
+                  title: `${release.version} - ${release.title}`,
+                  description: `Released ${release.date}`,
+                  date: release.date,
+                  group: 'Changelog',
+                  score,
+                })
+              }
+            }
+          }
+          
+          // Search docs if type is 'all' or 'docs'
+          if ((type === 'all' || type === 'docs') && docIndex && docIndex.length > 0) {
+            for (const doc of docIndex) {
+              let score = 0
+              const titleLower = doc.title.toLowerCase()
+              const descLower = doc.description.toLowerCase()
+              const slugLower = doc.slug.toLowerCase()
+              
+              if (titleLower.includes(queryLower)) score += 100
+              if (slugLower.includes(queryLower)) score += 80
+              if (descLower.includes(queryLower)) score += 60
+              
+              for (const token of queryTokens) {
+                if (titleLower.includes(token)) score += 20
+                if (slugLower.includes(token)) score += 25
+                if (descLower.includes(token)) score += 15
+              }
+              
+              if (score > 0) {
+                results.push({
+                  type: 'doc',
+                  id: doc.slug,
+                  title: doc.title,
+                  description: doc.description,
+                  group: doc.group,
+                  score,
+                })
+              }
+            }
+          }
+          
+          // Search endpoints if type is 'all' or 'endpoints'
+          if ((type === 'all' || type === 'endpoints') && endpointIndex && endpointIndex.length > 0) {
+            for (const ep of endpointIndex) {
+              let score = 0
+              const nameLower = ep.name.toLowerCase()
+              const pathLower = ep.path.toLowerCase()
+              const descLower = (ep.description || '').toLowerCase()
+              
+              if (nameLower.includes(queryLower)) score += 100
+              if (pathLower.includes(queryLower)) score += 80
+              if (descLower.includes(queryLower)) score += 60
+              
+              for (const token of queryTokens) {
+                if (nameLower.includes(token)) score += 20
+                if (pathLower.includes(token)) score += 25
+                if (descLower.includes(token)) score += 15
+                if (ep.method.toLowerCase() === token) score += 30
+              }
+              
+              if (score > 0) {
+                results.push({
+                  type: 'endpoint',
+                  id: ep.id,
+                  title: ep.name,
+                  description: ep.description || undefined,
+                  method: ep.method,
+                  path: ep.path,
+                  score,
+                })
+              }
+            }
+          }
+          
+          // Sort by score and limit
+          const sortedResults = results
+            .sort((a, b) => b.score - a.score)
+            .slice(0, 10)
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            .map(({ score, ...rest }) => rest)
+          
+          addToolOutput({
+            tool: 'search',
+            toolCallId,
+            output: {
+              results: sortedResults,
+              message: sortedResults.length > 0 
+                ? `Found ${sortedResults.length} result(s)` 
+                : 'No results found. Try different keywords.',
+            },
+          })
+        }
+        
+        // === UNIFIED NAVIGATE TOOL ===
+        // Navigates to docs, endpoints, changelog, sections, and future content types
+        if (toolName === 'navigate') {
+          const { type, id, title } = toolInput as { type: 'doc' | 'endpoint' | 'changelog' | 'section'; id: string; title?: string }
+          
+          if (type === 'doc') {
+            switchToDocs()
+            if (onNavigateToDocPage) {
+              onNavigateToDocPage(id)
+            }
+            addToolOutput({
+              tool: 'navigate',
+              toolCallId,
+              output: { success: true, type: 'doc', id, title, message: `Opened ${title || id}` },
+            })
+          } else if (type === 'changelog') {
+            // Navigate to changelog tab and scroll to specific release
+            // handleSelectDocPage handles the scrolling automatically
+            switchToDocs()
+            if (onNavigateToDocPage) {
+              onNavigateToDocPage(`changelog/${id}`)
+            }
+            addToolOutput({
+              tool: 'navigate',
+              toolCallId,
+              output: { success: true, type: 'changelog', id, title, message: `Opened changelog ${title || id}` },
+            })
+          } else if (type === 'endpoint') {
+            switchToDocs()
+            onNavigate(id)
+            const endpoint = endpointIndex.find(e => e.id === id)
+            addToolOutput({
+              tool: 'navigate',
+              toolCallId,
+              output: { 
+                success: true, 
+                type: 'endpoint', 
+                id, 
+                title: endpoint?.name || title,
+                method: endpoint?.method,
+                message: `Opened ${endpoint?.name || title || id}` 
+              },
+            })
+          } else if (type === 'section') {
+            // Scroll to section on current page with retry for newly rendered content
+            const scrollToSection = (): boolean => {
+              const headings = document.querySelectorAll('.docs-content h1[id], .docs-content h2[id], .docs-content h3[id], .docs-content h4[id], .docs-prose h1[id], .docs-prose h2[id], .docs-prose h3[id], .docs-prose h4[id], .docs-page h1[id], .docs-page h2[id], .docs-page h3[id], .docs-page h4[id]')
+              for (const heading of headings) {
+                const text = heading.textContent?.toLowerCase() || ''
+                const headingId = heading.getAttribute('id') || ''
+                if (text.includes(id.toLowerCase()) || headingId.includes(id.toLowerCase())) {
+                  (heading as HTMLElement).scrollIntoView({ behavior: 'smooth', block: 'start' })
+                  return true
+                }
+              }
+              return false
+            }
+            
+            // Try immediately, then retry with delays if not found
+            let found = scrollToSection()
+            if (!found) {
+              // Retry after a short delay (page might still be rendering)
+              setTimeout(() => {
+                found = scrollToSection()
+                if (!found) {
+                  // Final retry after longer delay
+                  setTimeout(() => {
+                    scrollToSection()
+                  }, 300)
+                }
+              }, 100)
+            }
+            
+            addToolOutput({
+              tool: 'navigate',
+              toolCallId,
+              output: { 
+                success: true, // Optimistically report success as we're retrying
+                type: 'section', 
+                id, 
+                message: `Scrolled to ${id}` 
+              },
+            })
+          }
+        }
+        
+        // === LEGACY TOOL HANDLERS (for backwards compatibility) ===
+        // These can be removed once the unified tools are fully adopted
+        
+        if (toolName === 'search_docs') {
+          // Redirect to unified search
+          const { query } = toolInput as { query: string }
+          const results = docIndex
+            .filter(doc => 
+              doc.title.toLowerCase().includes(query.toLowerCase()) ||
+              doc.slug.toLowerCase().includes(query.toLowerCase())
+            )
+            .slice(0, 10)
+          addToolOutput({
+            tool: 'search_docs',
+            toolCallId,
+            output: { results, message: `Found ${results.length} result(s)` },
+          })
+        }
+        
+        if (toolName === 'search_endpoints') {
+          const { query, method } = toolInput as { query: string; method?: string }
+          const results = searchEndpoints(endpointIndex, query, method)
+          addToolOutput({
+            tool: 'search_endpoints',
+            toolCallId,
+            output: results,
+          })
+        }
+        
+        if (toolName === 'navigate_to_doc_page') {
+          const { slug, title } = toolInput as { slug: string; title: string }
+          switchToDocs()
+          if (onNavigateToDocPage) {
+            onNavigateToDocPage(slug)
+          }
+          addToolOutput({
+            tool: 'navigate_to_doc_page',
+            toolCallId,
+            output: { success: true, slug, title, message: `Navigated to "${title}"` },
+          })
+        }
+        
+        if (toolName === 'navigate_to_endpoint') {
+          const { endpointId } = toolInput as { endpointId: string; reason?: string }
+          switchToDocs()
+          onNavigate(endpointId)
+          const endpoint = endpointIndex.find(e => e.id === endpointId)
+          addToolOutput({
+            tool: 'navigate_to_endpoint',
+            toolCallId,
+            output: { success: true, endpoint },
+          })
+        }
+        
+        if (toolName === 'navigate_to_doc_section') {
+          const { sectionId, sectionName } = toolInput as { sectionId: string; sectionName: string }
+          switchToDocs()
+          if (onNavigateToDocSection) {
+            onNavigateToDocSection(sectionId)
+          }
+          
+          addToolOutput({
+            tool: 'navigate_to_doc_section',
+            toolCallId,
+            output: { success: true, sectionId, sectionName },
+          })
+        }
+        
+        // Handle scroll_to_section tool - scroll within current page
+        if (toolName === 'scroll_to_section') {
+          const { query } = toolInput as { query: string }
+          
+          // Find matching heading in the current page
+          const findAndScrollToSection = (): { found: boolean; heading?: string; id?: string } => {
+            const queryLower = query.toLowerCase()
+            const headings = document.querySelectorAll('.docs-content h1[id], .docs-content h2[id], .docs-content h3[id], .docs-content h4[id], .docs-content h5[id], .docs-content h6[id], .docs-prose h1[id], .docs-prose h2[id], .docs-prose h3[id], .docs-prose h4[id], .docs-prose h5[id], .docs-prose h6[id], .docs-page h1[id], .docs-page h2[id], .docs-page h3[id], .docs-page h4[id], .docs-page h5[id], .docs-page h6[id]')
+            
+            let bestMatch: { element: HTMLElement; score: number; text: string; id: string } | null = null
+            
+            for (const heading of headings) {
+              const text = heading.textContent?.toLowerCase() || ''
+              const id = heading.getAttribute('id') || ''
+              let score = 0
+              
+              // Exact match
+              if (text === queryLower || id === queryLower) {
+                score = 100
+              }
+              // Starts with query
+              else if (text.startsWith(queryLower) || id.startsWith(queryLower)) {
+                score = 80
+              }
+              // Contains query
+              else if (text.includes(queryLower) || id.includes(queryLower)) {
+                score = 60
+              }
+              // Word match
+              else {
+                const queryWords = queryLower.split(/\s+/)
+                const textWords = text.split(/\s+/)
+                const matchingWords = queryWords.filter(qw => 
+                  textWords.some(tw => tw.includes(qw) || qw.includes(tw))
+                )
+                if (matchingWords.length > 0) {
+                  score = 30 + (matchingWords.length / queryWords.length) * 30
+                }
+              }
+              
+              if (score > 0 && (!bestMatch || score > bestMatch.score)) {
+                bestMatch = { 
+                  element: heading as HTMLElement, 
+                  score, 
+                  text: heading.textContent || '',
+                  id 
+                }
+              }
+            }
+            
+            if (bestMatch) {
+              // Scroll to the section
+              bestMatch.element.scrollIntoView({ behavior: 'smooth', block: 'start' })
+              return { found: true, heading: bestMatch.text, id: bestMatch.id }
+            }
+            
+            return { found: false }
+          }
+          
+          // Try immediately
+          let result = findAndScrollToSection()
+          
+          // If not found, retry with delays (page might still be rendering)
+          if (!result.found) {
+            setTimeout(() => {
+              result = findAndScrollToSection()
+              if (!result.found) {
+                setTimeout(() => {
+                  findAndScrollToSection()
+                }, 300)
+              }
+            }, 100)
+          }
+          
+          addToolOutput({
+            tool: 'scroll_to_section',
+            toolCallId,
+            output: result.found 
+              ? { success: true, heading: result.heading, id: result.id, message: `Scrolled to "${result.heading}"` }
+              : { success: true, heading: query, id: query.toLowerCase().replace(/\s+/g, '-'), message: `Scrolling to "${query}"` }, // Optimistically report success
+          })
+        }
+        
+        if (toolName === 'prefill_parameters') {
+          const prefillData = toolInput as PrefillData
+          
+          onPrefill(prefillData)
+          
+          addToolOutput({
+            tool: 'prefill_parameters',
+            toolCallId,
+            output: { success: true, ...prefillData },
+          })
+        }
+        
+        if (toolName === 'get_endpoint_details') {
+          const { endpointId } = toolInput as { endpointId: string }
+          const fullRequest = findRequestById(collection, endpointId)
+          
+          if (fullRequest) {
+            const formattedDetails = formatRequestForAI(fullRequest)
+            addToolOutput({
+              tool: 'get_endpoint_details',
+              toolCallId,
+              output: formattedDetails,
+            })
+          } else {
+            addToolOutput({
+              tool: 'get_endpoint_details',
+              toolCallId,
+              output: { error: 'Endpoint not found' },
+            })
+          }
+        }
+        
+        // Handle get_current_request tool - returns current playground request payload
+        if (toolName === 'get_current_request') {
+          
+          if (currentRequestPayload) {
+            addToolOutput({
+              tool: 'get_current_request',
+              toolCallId,
+              output: {
+                success: true,
+                request: {
+                  method: currentRequestPayload.method,
+                  url: currentRequestPayload.endpoint,
+                  queryParams: currentRequestPayload.params.filter(p => p.active),
+                  headers: currentRequestPayload.headers.filter(h => h.active),
+                  body: currentRequestPayload.body,
+                  contentType: currentRequestPayload.bodyContentType,
+                },
+              },
+            })
+          } else {
+            addToolOutput({
+              tool: 'get_current_request',
+              toolCallId,
+              output: { 
+                success: false, 
+                error: 'No request payload available. Please select an endpoint first.' 
+              },
+            })
+          }
+        }
+        
+        // Handle switch_to_notes tool
+        if (toolName === 'switch_to_notes') {
+          
+          switchToNotes()
+          
+          addToolOutput({
+            tool: 'switch_to_notes',
+            toolCallId,
+            output: { success: true, message: 'Switched to Notes workspace' },
+          })
+        }
+        
+        // Handle switch_to_docs tool
+        if (toolName === 'switch_to_docs') {
+          
+          switchToDocs()
+          
+          addToolOutput({
+            tool: 'switch_to_docs',
+            toolCallId,
+            output: { success: true, message: 'Switched to Docs' },
+          })
+        }
+        
+        // Handle switch_to_api_client tool
+        if (toolName === 'switch_to_api_client') {
+          
+          switchToApiClient()
+          
+          addToolOutput({
+            tool: 'switch_to_api_client',
+            toolCallId,
+            output: { success: true, message: 'Switched to API Client' },
+          })
+        }
+        
+        // Handle list_notes tool (lists existing files to check for duplicates)
+        if (toolName === 'list_notes') {
+          const { filter } = toolInput as { filter?: string }
+          
+          // Switch to notes workspace
+          switchToNotes()
+          
+          
+          // Filter notes if a filter is provided
+          let filteredNotes = notes.filter(n => !n.path.endsWith('.folder')) // Exclude folder placeholders
+          
+          if (filter) {
+            const lowerFilter = filter.toLowerCase()
+            filteredNotes = filteredNotes.filter(n => 
+              n.path.toLowerCase().includes(lowerFilter)
+            )
+          }
+          
+          // Return list of file paths with basic info
+          const notesList = filteredNotes.map(n => ({
+            path: n.path,
+            updatedAt: n.updatedAt,
+          }))
+          
+          addToolOutput({
+            tool: 'list_notes',
+            toolCallId,
+            output: { 
+              success: true, 
+              count: notesList.length,
+              files: notesList,
+              message: notesList.length > 0 
+                ? `Found ${notesList.length} file(s)${filter ? ` matching "${filter}"` : ''}`
+                : `No files found${filter ? ` matching "${filter}"` : ' in workspace'}`
+            },
+          })
+        }
+        
+        // Handle open_file tool (opens existing file)
+        if (toolName === 'open_file') {
+          const { path } = toolInput as { path: string }
+          
+          
+          // Switch to notes mode with the file path
+          switchToNotes(path)
+          
+          addToolOutput({
+            tool: 'open_file',
+            toolCallId,
+            output: { success: true, path, message: `Opened ${path}` },
+          })
+        }
+        
+        // Handle create_folder tool (creates a folder for organizing files)
+        if (toolName === 'create_folder') {
+          const { path, description } = toolInput as { path: string; description: string }
+          
+          // Switch to notes workspace
+          switchToNotes()
+          
+          
+          // Folders are virtual in our system - files with paths like "folder/file.ext" 
+          // automatically create the folder structure when files are added.
+          // We just acknowledge the intent - the folder will appear when files are created inside it.
+          
+          addToolOutput({
+            tool: 'create_folder',
+            toolCallId,
+            output: { success: true, path, description, message: `Folder "${path}" will be created when files are added` },
+          })
+        }
+        
+        // Handle create_file tool (creates empty file)
+        if (toolName === 'create_file') {
+          const { path, description } = toolInput as { path: string; description: string }
+          
+          // Switch to notes workspace
+          switchToNotes()
+          
+          
+          if (workspace) {
+            try {
+              // Create truly empty file - content will be written by write_file
+              await createNote(path, '')
+              await refreshNotes()
+              
+              // Trigger refresh in notes-mode UI
+              triggerNotesRefresh()
+              
+              setActiveFilePath(path)
+              
+              
+              addToolOutput({
+                tool: 'create_file',
+                toolCallId,
+                output: { success: true, path, description },
+              })
+            } catch (err) {
+              console.error('[AgentChat] Failed to create file:', err)
+              addToolOutput({
+                tool: 'create_file',
+                toolCallId,
+                output: { success: false, error: err instanceof Error ? err.message : 'Failed to create file' },
+              })
+            }
+          } else {
+            addToolOutput({
+              tool: 'create_file',
+              toolCallId,
+              output: { success: false, error: 'Workspace not available' },
+            })
+          }
+        }
+        
+        // Handle write_file tool (writes content to file)
+        // Note: Streaming already shows content in real-time via onWriteFileDelta
+        // This handler saves the final content to IndexedDB for persistence
+        if (toolName === 'write_file') {
+          const { path, content } = toolInput as { path: string; content: string }
+          
+          // Switch to notes workspace
+          switchToNotes()
+          
+          
+          if (workspace) {
+            try {
+              // Don't clear streaming content here - notes-mode will clear it after loading
+              // This prevents flash of empty content for mermaid previews
+              
+              // Save the final content to IndexedDB for persistence
+              await updateNote(path, content)
+              await refreshNotes()
+              
+              // Trigger refresh in notes-mode UI
+              triggerNotesRefresh()
+              
+              // Force reload the file content from DB
+              setActiveFilePath(`${path}?t=${Date.now()}`)
+              
+              
+              addToolOutput({
+                tool: 'write_file',
+                toolCallId,
+                output: { success: true, path },
+              })
+            } catch (err) {
+              console.error('[AgentChat] Failed to save file:', err)
+              setStreamingContent(null) // Clear on error too
+              addToolOutput({
+                tool: 'write_file',
+                toolCallId,
+                output: { success: false, error: err instanceof Error ? err.message : 'Failed to save file' },
+              })
+            }
+          } else {
+            setStreamingContent(null)
+            addToolOutput({
+              tool: 'write_file',
+              toolCallId,
+              output: { success: false, error: 'Workspace not available' },
+            })
+          }
+        }
+        
+        // Handle delete_file tool (deletes a file from workspace)
+        if (toolName === 'delete_file') {
+          const { path, reason } = toolInput as { path: string; reason?: string }
+          
+          // Switch to notes workspace
+          switchToNotes()
+          
+          
+          if (workspace) {
+            try {
+              // Check if file exists
+              const fileExists = notes.some(n => n.path === path)
+              
+              if (!fileExists) {
+                addToolOutput({
+                  tool: 'delete_file',
+                  toolCallId,
+                  output: { success: false, error: `File not found: ${path}` },
+                })
+                return
+              }
+              
+              // Delete the file
+              await deleteNote(path)
+              await refreshNotes()
+              
+              // Trigger refresh in notes-mode UI
+              triggerNotesRefresh()
+              
+              // Clear active file if it was the deleted one
+              setActiveFilePath(null)
+              
+              
+              addToolOutput({
+                tool: 'delete_file',
+                toolCallId,
+                output: { success: true, path, reason, message: `Deleted ${path}` },
+              })
+            } catch (err) {
+              console.error('[AgentChat] Failed to delete file:', err)
+              addToolOutput({
+                tool: 'delete_file',
+                toolCallId,
+                output: { success: false, error: err instanceof Error ? err.message : 'Failed to delete file' },
+              })
+            }
+          } else {
+            addToolOutput({
+              tool: 'delete_file',
+              toolCallId,
+              output: { success: false, error: 'Workspace not available' },
+            })
+          }
+        }
+        
+        // Handle delete_all_notes tool (deletes all files from workspace)
+        if (toolName === 'delete_all_notes') {
+          const { confirmed } = toolInput as { confirmed: boolean }
+          
+          // Switch to notes workspace
+          switchToNotes()
+          
+          
+          if (!confirmed) {
+            addToolOutput({
+              tool: 'delete_all_notes',
+              toolCallId,
+              output: { success: false, error: 'Deletion not confirmed. Please confirm with the user first.' },
+            })
+            return
+          }
+          
+          if (workspace) {
+            try {
+              // Refresh notes first to get accurate count (notes state might be stale)
+              await refreshNotes()
+              
+              // Get fresh count from database directly
+              const { dbOperations } = await import('@/lib/api-docs/code-editor/db')
+              const currentNotes = await dbOperations.listNotes(workspace.id)
+              const visibleNotes = currentNotes.filter(n => !n.path.endsWith('.folder'))
+              const noteCount = visibleNotes.length
+              
+              // Get list of files for display
+              const fileList = visibleNotes.map(n => n.path)
+              
+              
+              if (noteCount === 0) {
+                addToolOutput({
+                  tool: 'delete_all_notes',
+                  toolCallId,
+                  output: { success: true, deletedCount: 0, files: [], message: 'No notes to delete' },
+                })
+                return
+              }
+              
+              // Delete all notes
+              await deleteAllNotes()
+              await refreshNotes()
+              
+              // Trigger refresh in notes-mode UI
+              triggerNotesRefresh()
+              
+              // Clear active file
+              setActiveFilePath(null)
+              
+              
+              addToolOutput({
+                tool: 'delete_all_notes',
+                toolCallId,
+                output: { 
+                  success: true, 
+                  deletedCount: noteCount, 
+                  files: fileList,
+                  message: `Deleted ${noteCount} note${noteCount !== 1 ? 's' : ''}` 
+                },
+              })
+            } catch (err) {
+              console.error('[AgentChat] Failed to delete all notes:', err)
+              addToolOutput({
+                tool: 'delete_all_notes',
+                toolCallId,
+                output: { success: false, error: err instanceof Error ? err.message : 'Failed to delete notes' },
+              })
+            }
+          } else {
+            addToolOutput({
+              tool: 'delete_all_notes',
+              toolCallId,
+              output: { success: false, error: 'Workspace not available' },
+            })
+          }
+        }
+        
+        // Handle check_request_validity tool - validates if request is ready to send
+        if (toolName === 'check_request_validity') {
+          const { endpointId } = toolInput as { endpointId: string }
+          
+          const endpoint = findRequestById(collection, endpointId)
+          
+          if (!endpoint) {
+            addToolOutput({
+              tool: 'check_request_validity',
+              toolCallId,
+              output: { success: false, error: 'Endpoint not found' },
+            })
+            return
+          }
+          
+          // Get current request payload from context
+          const payload = currentRequestPayload
+          
+          // Analyze path parameters from the endpoint URL
+          const pathParamMatches = endpoint.endpoint.match(/\{([^}]+)\}/g) || []
+          const requiredPathParams = pathParamMatches.map(p => p.slice(1, -1))
+          
+          // Check which path params have values
+          const filledPathParams = requiredPathParams.filter(param => {
+            // Check if the URL has been filled with actual values (not still containing {param})
+            return payload?.endpoint && !payload.endpoint.includes(`{${param}}`)
+          })
+          const missingPathParams = requiredPathParams.filter(p => !filledPathParams.includes(p))
+          
+          // Analyze query parameters
+          const requiredQueryParams = endpoint.params
+            .filter(p => p.description?.toLowerCase().includes('required'))
+            .map(p => p.key)
+          const filledQueryParams = (payload?.params || [])
+            .filter(p => p.active && p.value)
+            .map(p => p.key)
+          const missingQueryParams = requiredQueryParams.filter(p => !filledQueryParams.includes(p))
+          
+          // Analyze body (for POST/PUT/PATCH)
+          const needsBody = ['POST', 'PUT', 'PATCH'].includes(endpoint.method)
+          const hasBody = !!(payload?.body && typeof payload.body === 'string' && payload.body.trim().length > 0)
+          
+          // Try to extract required fields from the body schema
+          const bodyRequiredFields: string[] = []
+          if (endpoint.body.body && typeof endpoint.body.body === 'string') {
+            try {
+              const bodySchema = JSON.parse(endpoint.body.body)
+              if (bodySchema.required && Array.isArray(bodySchema.required)) {
+                bodyRequiredFields.push(...bodySchema.required)
+              }
+            } catch {
+              // Not a schema, might be example body
+            }
+          }
+          
+          // Check missing body fields
+          let missingBodyFields: string[] = []
+          if (hasBody && bodyRequiredFields.length > 0) {
+            try {
+              const currentBody = JSON.parse(payload?.body || '{}')
+              missingBodyFields = bodyRequiredFields.filter(field => 
+                currentBody[field] === undefined || currentBody[field] === ''
+              )
+            } catch {
+              // Invalid JSON in body
+            }
+          }
+          
+          // Check authentication
+          const needsAuth = endpoint.auth.authType !== 'none'
+          const hasAuth = payload?.headers?.some(h => 
+            h.active && (
+              h.key.toLowerCase() === 'authorization' ||
+              h.key.toLowerCase() === 'x-api-key'
+            )
+          ) || false
+          
+          // Build validation result
+          const isValid: boolean = 
+            missingPathParams.length === 0 &&
+            missingQueryParams.length === 0 &&
+            (!needsBody || hasBody) &&
+            (!needsAuth || hasAuth)
+          
+          // Build summary message
+          const issues: string[] = []
+          if (missingPathParams.length > 0) {
+            issues.push(`Missing path params: ${missingPathParams.join(', ')}`)
+          }
+          if (missingQueryParams.length > 0) {
+            issues.push(`Missing required params: ${missingQueryParams.join(', ')}`)
+          }
+          if (needsBody && !hasBody) {
+            issues.push('Request body is empty')
+          }
+          if (missingBodyFields.length > 0) {
+            issues.push(`Missing body fields: ${missingBodyFields.join(', ')}`)
+          }
+          if (needsAuth && !hasAuth) {
+            issues.push('Authentication not configured')
+          }
+          
+          const summary = isValid 
+            ? 'Request is ready to send!'
+            : `Issues found: ${issues.join('; ')}`
+          
+          const result: RequestValidationResult = {
+            isValid,
+            endpoint: {
+              id: endpoint.id || endpointId,
+              name: endpoint.name,
+              method: endpoint.method,
+              path: endpoint.endpoint,
+            },
+            validation: {
+              pathParams: {
+                required: requiredPathParams,
+                filled: filledPathParams,
+                missing: missingPathParams,
+              },
+              queryParams: {
+                required: requiredQueryParams,
+                filled: filledQueryParams,
+                missing: missingQueryParams,
+              },
+              body: {
+                required: needsBody,
+                hasContent: hasBody,
+                requiredFields: bodyRequiredFields,
+                missingFields: missingBodyFields,
+              },
+              auth: {
+                required: needsAuth,
+                configured: hasAuth,
+                type: needsAuth ? endpoint.auth.authType : null,
+              },
+            },
+            summary,
+          }
+          
+          addToolOutput({
+            tool: 'check_request_validity',
+            toolCallId,
+            output: result,
+          })
+        }
+        
+        // Handle send_request tool - triggers the playground's send button
+        if (toolName === 'send_request') {
+          const { confirmSend } = toolInput as { confirmSend: boolean }
+          
+          if (!confirmSend) {
+            addToolOutput({
+              tool: 'send_request',
+              toolCallId,
+              output: { success: false, error: 'Request not confirmed' },
+            })
+            return
+          }
+          
+          if (!currentEndpoint) {
+            addToolOutput({
+              tool: 'send_request',
+              toolCallId,
+              output: { success: false, error: 'No endpoint selected' },
+            })
+            return
+          }
+          
+          // Trigger the playground's send button
+          requestSend()
+          
+          addToolOutput({
+            tool: 'send_request',
+            toolCallId,
+            output: {
+              success: true,
+              message: 'Request sent! Check the response viewer in the playground.',
+            },
+          })
+        }
+      } catch (err) {
+        addToolOutput({
+          tool: toolName,
+          toolCallId,
+          state: 'output-error',
+          errorText: err instanceof Error ? err.message : 'Tool execution failed',
+        })
+      }
+    },
+  })
+  
+  // Derived loading state
+  const isLoading = status === 'streaming' || status === 'submitted'
+
+  // Load saved messages on mount
+  useEffect(() => {
+    try {
+      const saved = localStorage.getItem(CHAT_STORAGE_KEY)
+      if (saved) {
+        const parsed = JSON.parse(saved)
+        if (Array.isArray(parsed) && parsed.length > 0) {
+          setMessages(parsed)
+          setShowSuggestions(false)
+        }
+      }
+    } catch {
+      // Ignore parse errors
+    }
+  }, [setMessages])
+
+  // Save messages when they change
+  useEffect(() => {
+    if (messages.length > 0) {
+      try {
+        localStorage.setItem(CHAT_STORAGE_KEY, JSON.stringify(messages))
+      } catch {
+        // Ignore storage errors
+      }
+    }
+  }, [messages])
+
+  // Notify parent about message count changes
+  useEffect(() => {
+    onHasMessagesChange?.(messages.length > 0)
+  }, [messages.length, onHasMessagesChange])
+
+  // Auto-scroll to bottom
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [messages])
+
+  // Cache key for suggestions
+  const suggestionsCacheKey = currentEndpoint?.id 
+    ? `endpoint:${currentEndpoint.id}` 
+    : `general:${endpointIndex.length}`
+
+  // Load dynamic suggestions from API
+  useEffect(() => {
+    // Check cache first
+    const cached = getSuggestionsFromCache(suggestionsCacheKey)
+    if (cached) {
+      setSuggestions(cached)
+      return
+    }
+
+    // Fetch from API
+    let cancelled = false
+    setLoadingSuggestions(true)
+    
+    fetch('/api/suggestions', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        endpointIndex,
+        currentEndpointId: currentEndpoint?.id,
+      }),
+    })
+      .then(res => res.json())
+      .then(data => {
+        if (cancelled) return
+        if (data.suggestions) {
+          setSuggestions(data.suggestions)
+          saveSuggestionsToCache(suggestionsCacheKey, data.suggestions)
+        }
+      })
+      .catch(err => {
+        if (cancelled) return
+        console.warn('[AgentChat] Failed to fetch suggestions:', err)
+        // Fallback suggestions
+        const fallback: Suggestion[] = currentEndpoint
+          ? [
+              { title: 'What does this', label: 'endpoint do?', prompt: `What does ${currentEndpoint.name} do?` },
+              { title: 'What parameters', label: 'are required?', prompt: 'What parameters are required?' },
+              { title: 'Python example', label: 'Show code', prompt: 'Show me a Python example' },
+            ]
+          : [
+              { title: 'Find an endpoint', label: 'to create resources', prompt: 'Find endpoints for creating resources' },
+              { title: 'How do I', label: 'authenticate?', prompt: 'How do I authenticate?' },
+              { title: 'Overview', label: 'What can I do?', prompt: 'What can I do with this API?' },
+            ]
+        setSuggestions(fallback)
+      })
+      .finally(() => {
+        if (!cancelled) setLoadingSuggestions(false)
+      })
+    
+    return () => { cancelled = true }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [suggestionsCacheKey])
+
+  // Track pending debug error type for showing options after AI response
+  const [pendingErrorType, setPendingErrorType] = useState<ReturnType<typeof detectErrorType> | null>(null)
+  const prevStatus = useRef(status)
+  
+  // Handle debug context from response viewer - show context card and send prompt
+  useEffect(() => {
+    if (!debugContext || status === 'streaming' || status === 'submitted') {
+      if (!debugContext) processedDebugRef.current = null
+      return
+    }
+    
+    const contextKey = JSON.stringify(debugContext)
+    if (processedDebugRef.current === contextKey) return
+    processedDebugRef.current = contextKey
+    
+    // Detect and store error type for later (to show options after AI responds)
+    const errorType = detectErrorType(debugContext.status, debugContext.responseBody)
+    setPendingErrorType(errorType)
+    
+    // Create a concise debug prompt
+    const prompt = `Debug this ${debugContext.status} error and suggest a fix.`
+    
+    // Encode the debug context as a card message
+    const contextCardMessage = encodeCardMessage({
+      type: 'debug_context',
+      context: debugContext,
+    })
+    
+    // Add the debug context card as a user message
+    const debugContextMessage = {
+      id: `debug-${Date.now()}`,
+      role: 'user' as const,
+      parts: [{ 
+        type: 'text' as const, 
+        text: contextCardMessage,
+      }],
+    }
+    
+    // Add context card, then send the actual prompt
+    setMessages(prev => [...prev, debugContextMessage])
+    setShowSuggestions(false)
+    
+    // Small delay to let the card render, then send prompt
+    setTimeout(() => {
+      sendMessage({
+        role: 'user',
+        parts: [{ type: 'text', text: prompt }],
+      })
+    }, 100)
+    
+    onDebugContextConsumed?.()
+  }, [debugContext, status, sendMessage, setMessages, onDebugContextConsumed])
+  
+  // Track processed explain context to avoid duplicates
+  const processedExplainRef = useRef<string | null>(null)
+  
+  // Handle explain context from response viewer - send explain prompt
+  useEffect(() => {
+    if (!explainContext || status === 'streaming' || status === 'submitted') {
+      if (!explainContext) processedExplainRef.current = null
+      return
+    }
+    
+    const contextKey = JSON.stringify(explainContext)
+    if (processedExplainRef.current === contextKey) return
+    processedExplainRef.current = contextKey
+    
+    // Create a concise explain prompt
+    const prompt = `Explain this ${explainContext.status} response. What does it mean and what are the key fields?`
+    
+    // Encode the context as a card message (reuse debug_context type)
+    const contextCardMessage = encodeCardMessage({
+      type: 'debug_context',
+      context: {
+        ...explainContext,
+        errorMessage: undefined, // Clear error message since this is a success
+      },
+    })
+    
+    // Add the context card as a user message
+    const explainContextMessage = {
+      id: `explain-${Date.now()}`,
+      role: 'user' as const,
+      parts: [{ 
+        type: 'text' as const, 
+        text: contextCardMessage,
+      }],
+    }
+    
+    // Add context card, then send the actual prompt
+    setMessages(prev => [...prev, explainContextMessage])
+    setShowSuggestions(false)
+    
+    // Small delay to let the card render, then send prompt
+    setTimeout(() => {
+      sendMessage({
+        role: 'user',
+        parts: [{ type: 'text', text: prompt }],
+      })
+    }, 100)
+    
+    onExplainContextConsumed?.()
+  }, [explainContext, status, sendMessage, setMessages, onExplainContextConsumed])
+  
+  // Add response options card after AI finishes responding to debug request
+  useEffect(() => {
+    // Check if status changed from streaming/submitted to ready
+    const wasProcessing = prevStatus.current === 'streaming' || prevStatus.current === 'submitted'
+    const isNowReady = status === 'ready'
+    
+    if (wasProcessing && isNowReady && pendingErrorType) {
+      // Encode the response options as a card message
+      const optionsCardMessage = encodeCardMessage({
+        type: 'response_options',
+        errorType: pendingErrorType,
+      })
+      
+      // Add the response options card after AI response
+      const responseOptionsMessage = {
+        id: `options-${Date.now()}`,
+        role: 'assistant' as const,
+        parts: [{ 
+          type: 'text' as const, 
+          text: optionsCardMessage,
+        }],
+      }
+      
+      setMessages(prev => [...prev, responseOptionsMessage])
+      
+      // Clear pending error type
+      setPendingErrorType(null)
+    }
+    
+    // Update previous status
+    prevStatus.current = status
+  }, [status, pendingErrorType, setMessages])
+
+  // Handle image selection
+  const handleImageSelect = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || [])
+    if (files.length === 0) return
+    
+    // Limit to 4 images total
+    const availableSlots = 4 - selectedImages.length
+    const filesToProcess = files.slice(0, availableSlots)
+    
+    const newImages = await Promise.all(
+      filesToProcess.map(async (file) => {
+        // Create preview URL
+        const preview = URL.createObjectURL(file)
+        
+        // Convert to base64
+        const base64 = await new Promise<string>((resolve) => {
+          const reader = new FileReader()
+          reader.onloadend = () => {
+            const result = reader.result as string
+            // Extract base64 data without the data URL prefix
+            resolve(result)
+          }
+          reader.readAsDataURL(file)
+        })
+        
+        return { file, preview, base64 }
+      })
+    )
+    
+    setSelectedImages(prev => [...prev, ...newImages])
+    
+    // Reset file input
+    if (fileInputRef.current) {
+      fileInputRef.current.value = ''
+    }
+  }, [selectedImages.length])
+  
+  // Remove selected image
+  const handleRemoveImage = useCallback((index: number) => {
+    setSelectedImages(prev => {
+      const newImages = [...prev]
+      // Revoke the preview URL to free memory
+      URL.revokeObjectURL(newImages[index].preview)
+      newImages.splice(index, 1)
+      return newImages
+    })
+  }, [])
+
+  // Auto-resize textarea
+  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setInputValue(e.target.value)
+    const textarea = e.target
+    textarea.style.height = 'auto'
+    textarea.style.height = `${Math.min(textarea.scrollHeight, 128)}px`
+  }, [])
+
+  // Handle form submit
+  const handleSubmit = useCallback((e: FormEvent) => {
+    e.preventDefault()
+    if ((!inputValue.trim() && selectedImages.length === 0) || isLoading) return
+    
+    const trimmedInput = inputValue.trim()
+    setInputValue('')
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto'
+    }
+    
+    // Build message parts with images and text
+    const parts: Array<{ type: 'text'; text: string } | { type: 'image'; image: string }> = []
+    
+    // Add images first
+    selectedImages.forEach(img => {
+      parts.push({ type: 'image', image: img.base64 })
+    })
+    
+    // Add text if present
+    if (trimmedInput) {
+      parts.push({ type: 'text', text: trimmedInput })
+    } else if (selectedImages.length > 0) {
+      // If only images, add a default prompt
+      parts.push({ type: 'text', text: 'What can you tell me about this image?' })
+    }
+    
+    // Clear selected images
+    selectedImages.forEach(img => URL.revokeObjectURL(img.preview))
+    setSelectedImages([])
+    
+    setShowSuggestions(false)
+    sendMessage({
+      role: 'user',
+      // Cast to allow image parts which our API handles correctly
+      parts: parts as Array<{ type: 'text'; text: string }>,
+    })
+  }, [inputValue, isLoading, sendMessage, selectedImages])
+
+  // Handle suggestion click
+  const handleSuggestionClick = useCallback((prompt: string) => {
+    setShowSuggestions(false)
+    sendMessage({
+      role: 'user',
+      parts: [{ type: 'text', text: prompt }],
+    })
+  }, [sendMessage])
+
+  // Handle delete single message
+  const handleDeleteMessage = useCallback((messageId: string) => {
+    setMessages(prevMessages => {
+      const newMessages = prevMessages.filter(msg => msg.id !== messageId)
+      // Update localStorage with the new messages
+      if (newMessages.length === 0) {
+        localStorage.removeItem(CHAT_STORAGE_KEY)
+        setShowSuggestions(true)
+      } else {
+        localStorage.setItem(CHAT_STORAGE_KEY, JSON.stringify(newMessages))
+      }
+      return newMessages
+    })
+  }, [setMessages])
+
+  // Handle keyboard shortcuts
+  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      handleSubmit(e as unknown as FormEvent)
+    }
+  }, [handleSubmit])
+
+  // Card actions for error handling
+  const cardActions = useMemo(() => ({
+    onOpenGlobalAuth,
+    onNavigateToAuthTab,
+    onNavigateToParamsTab,
+    onNavigateToBodyTab,
+    onNavigateToHeadersTab,
+  }), [onOpenGlobalAuth, onNavigateToAuthTab, onNavigateToParamsTab, onNavigateToBodyTab, onNavigateToHeadersTab])
+  
+  // Convert AI SDK messages to our format for rendering
+  const renderableMessages = messages.map(msg => ({
+    id: msg.id,
+    role: msg.role as 'user' | 'assistant' | 'system',
+    content: getMessageContent(msg),
+    images: getMessageImages(msg),
+    toolInvocations: getToolInvocations(msg),
+  }))
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Messages */}
+      <div className="flex-1 overflow-y-auto flex flex-col">
+        <div className={cn(
+          "max-w-2xl mx-auto px-4 py-4 w-full",
+          messages.length === 0 && showSuggestions ? "flex-1 flex flex-col" : ""
+        )}>
+          {messages.length === 0 && showSuggestions && (
+            <div className="flex w-full grow flex-col">
+              {/* Center - Title and subtitle */}
+              <div className="flex w-full grow flex-col items-center justify-center">
+                <div className="flex flex-col items-center text-center px-4">
+                  <h1 className="font-semibold text-2xl animate-in fade-in slide-in-from-bottom-1 duration-200">
+                    {currentEndpoint ? currentEndpoint.name : 'Hello there!'}
+                  </h1>
+                  <p className="text-muted-foreground text-lg animate-in fade-in slide-in-from-bottom-1 duration-200 delay-75">
+                    {currentEndpoint 
+                      ? 'Ask me anything about this endpoint'
+                      : 'How can I help you today?'
+                    }
+                  </p>
+                </div>
+              </div>
+              
+              {/* Suggestions - at the bottom */}
+              <div className="grid w-full grid-cols-1 gap-2 pb-4 mt-8">
+                {loadingSuggestions ? (
+                  // Loading skeletons
+                  <>
+                    {[1, 2, 3, 4].map((i) => (
+                      <div
+                        key={i}
+                        className="h-[52px] w-full rounded-2xl border bg-muted/30 animate-pulse"
+                        style={{ animationDelay: `${i * 100}ms` }}
+                      />
+                    ))}
+                  </>
+                ) : (
+                  suggestions.map((suggestion, index) => (
+                    <div
+                      key={suggestion.prompt}
+                      className="animate-in fade-in slide-in-from-bottom-2 duration-200 fill-mode-both"
+                      style={{ animationDelay: `${100 + index * 50}ms` }}
+                    >
+                      <button
+                        onClick={() => handleSuggestionClick(suggestion.prompt)}
+                        className="h-auto w-full flex flex-wrap items-start justify-start gap-1 rounded-2xl border px-4 py-3 text-left text-sm transition-colors hover:bg-muted"
+                      >
+                        <span className="font-medium">{suggestion.title}</span>
+                        <span className="text-muted-foreground">{suggestion.label}</span>
+                      </button>
+                    </div>
+                  ))
+                )}
+              </div>
+            </div>
+          )}
+          
+          {renderableMessages.map((message, i) => (
+            <ChatMessage
+              key={message.id}
+              role={message.role}
+              content={message.content}
+              messageId={message.id}
+              images={message.images}
+              toolInvocations={message.toolInvocations}
+              isStreaming={isLoading && i === renderableMessages.length - 1}
+              onDeleteMessage={handleDeleteMessage}
+              onNavigate={onNavigate}
+              onNavigateToDocPage={onNavigateToDocPage}
+              onOpenFile={handleOpenFile}
+              cardActions={cardActions}
+            />
+          ))}
+          
+          {/* Show typing indicator when waiting for stream to start */}
+          {status === 'submitted' && <TypingIndicator />}
+          
+          <div ref={messagesEndRef} />
+        </div>
+      </div>
+      
+      {/* Input */}
+      <div className="border-t border-border p-4">
+        <form onSubmit={handleSubmit} className="max-w-2xl mx-auto">
+          {/* Hidden file input */}
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="image/*"
+            multiple
+            onChange={handleImageSelect}
+            className="hidden"
+            aria-hidden="true"
+          />
+          
+          <div className="relative rounded-2xl border border-border bg-background shadow-sm focus-within:ring-2 focus-within:ring-ring">
+            {/* Image previews */}
+            {selectedImages.length > 0 && (
+              <div className="flex flex-wrap gap-2 p-3 pb-0">
+                {selectedImages.map((img, index) => (
+                  <div key={index} className="relative group">
+                    <img
+                      src={img.preview}
+                      alt={`Selected image ${index + 1}`}
+                      className="h-16 w-16 object-cover rounded-lg border border-border"
+                    />
+                    <Button
+                      type="button"
+                      size="icon"
+                      variant="secondary"
+                      onClick={() => handleRemoveImage(index)}
+                      className="absolute -top-1.5 -right-1.5 h-4 w-4 min-w-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity shadow-sm p-2"
+                      aria-label={`Remove image ${index + 1}`}
+                    >
+                      <X className="h-2.5 w-2.5 p-1" weight="bold" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            )}
+            
+            <textarea
+              ref={textareaRef}
+              value={inputValue}
+              onChange={handleInputChange}
+              onKeyDown={handleKeyDown}
+              placeholder="Send a message..."
+              className={cn(
+                "w-full resize-none bg-transparent px-4 pt-3 pb-12 text-sm",
+                "placeholder:text-muted-foreground/70 outline-none",
+                "min-h-[56px] max-h-32"
+              )}
+              rows={1}
+              disabled={isLoading}
+              aria-label="Message input"
+            />
+            
+            <div className="absolute bottom-2 left-2 right-2 flex items-center justify-between">
+              {/* Image upload button */}
+              <div>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      type="button"
+                      size="icon"
+                      variant="ghost"
+                      className={cn(
+                        "h-8 w-8 rounded-full text-muted-foreground hover:text-foreground",
+                        selectedImages.length >= 4 && "opacity-50 cursor-not-allowed"
+                      )}
+                      onClick={() => fileInputRef.current?.click()}
+                      disabled={isLoading || selectedImages.length >= 4}
+                      aria-label="Upload image"
+                    >
+                      <ImageIcon className="h-4 w-4" weight="bold" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="top">
+                    {selectedImages.length >= 4 ? 'Maximum 4 images' : 'Upload image'}
+                  </TooltipContent>
+                </Tooltip>
+              </div>
+              
+              {isLoading ? (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      type="button"
+                      onClick={() => stop()}
+                      size="icon"
+                      variant="default"
+                      className="h-8 w-8 rounded-full"
+                      aria-label="Stop generating"
+                    >
+                      <Square className="h-3 w-3" weight="fill" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="top">Stop generating</TooltipContent>
+                </Tooltip>
+              ) : (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      type="submit"
+                      disabled={!inputValue.trim()}
+                      size="icon"
+                      variant="default"
+                      className="h-8 w-8 rounded-full"
+                      aria-label="Send message"
+                    >
+                      <ArrowUp className="h-4 w-4" weight="bold" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="top">Send message</TooltipContent>
+                </Tooltip>
+              )}
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+// Helper to extract text content from a message
+function getMessageContent(msg: { parts?: Array<{ type: string; text?: string }> }): string {
+  if (!msg.parts) return ''
+  
+  const textParts = msg.parts.filter(
+    (part): part is { type: 'text'; text: string } => 
+      part.type === 'text' && typeof part.text === 'string'
+  )
+  
+  let content = textParts.map(p => p.text).join('')
+  
+  // Remove any trailing JSON blocks that the model might have included
+  content = content.replace(/\n*```json[\s\S]*?```\n*/g, '')
+  content = content.replace(/\n*\{[\s\S]*?"id":\s*"[^"]+",[\s\S]*?"name":\s*"[^"]+"[\s\S]*?\}\s*$/g, '')
+  
+  return content.trim()
+}
+
+// Helper to extract images from a message
+function getMessageImages(msg: { parts?: Array<{ type: string; image?: string }> }): Array<{ image: string }> {
+  if (!msg.parts) return []
+  
+  return msg.parts
+    .filter((part): part is { type: 'image'; image: string } => 
+      part.type === 'image' && typeof part.image === 'string'
+    )
+    .map(part => ({ image: part.image }))
+}
+
+// Helper to extract tool invocations from a message
+function getToolInvocations(msg: { parts?: Array<Record<string, unknown>> }): Array<{
+  toolCallId: string
+  toolName: string
+  args: Record<string, unknown>
+  result?: unknown
+  state: 'pending' | 'result' | 'error'
+}> {
+  if (!msg.parts) return []
+  
+  // Use a Map to deduplicate by toolCallId (keep latest version)
+  const toolCallMap = new Map<string, {
+    toolCallId: string
+    toolName: string
+    args: Record<string, unknown>
+    result?: unknown
+    state: 'pending' | 'result' | 'error'
+  }>()
+  
+  msg.parts
+    .filter((part): part is { 
+      type: string
+      toolCallId: string
+      toolName?: string
+      input?: Record<string, unknown>
+      args?: Record<string, unknown>
+      output?: unknown
+      result?: unknown
+      state?: string
+    } => {
+      return typeof part === 'object' && 
+             part !== null && 
+             'type' in part && 
+             typeof part.type === 'string' && 
+             part.type.startsWith('tool-') &&
+             part.type !== 'tool-call' &&
+             'toolCallId' in part
+    })
+    .forEach(part => {
+      const toolName = part.toolName || part.type.replace('tool-', '')
+      
+      // Only update if we don't have this tool call yet, or if the new one has more info
+      const existing = toolCallMap.get(part.toolCallId)
+      const newState = getToolState(part)
+      
+      // Prefer 'result' state over 'pending'
+      if (!existing || newState === 'result' || (newState === 'error' && existing.state === 'pending')) {
+        toolCallMap.set(part.toolCallId, {
+          toolCallId: part.toolCallId,
+          toolName,
+          args: (part.input as Record<string, unknown>) || (part.args as Record<string, unknown>) || {},
+          result: part.output ?? part.result,
+          state: newState,
+        })
+      }
+    })
+  
+  return Array.from(toolCallMap.values())
+}
+
+// Helper to determine tool state from part
+function getToolState(part: { state?: string }): 'pending' | 'result' | 'error' {
+  if (part.state === 'output-error') return 'error'
+  if (part.state === 'output-available') return 'result'
+  if (part.state === 'input-streaming' || part.state === 'input-available') return 'pending'
+  return 'result'
+}