@brainfish-ai/devdoc 0.1.21

package/renderer/components/docs-viewer/agent/messages/tool-call-display.tsx

@@ -0,0 +1,721 @@
+'use client'
+
+import { 
+  MagnifyingGlass, 
+  CheckCircle, 
+  XCircle, 
+  FilePlus,
+  FolderPlus,
+  Note,
+  File,
+  PaperPlaneTilt,
+  CheckSquare,
+  Warning,
+  Trash,
+  TestTube,
+  ArrowSquareOut,
+  Clock,
+} from '@phosphor-icons/react'
+import { MethodBadge } from '../../shared/method-badge'
+import type { HTTPMethod } from '@/lib/api-docs/types'
+import type { ToolCallDisplayProps, EndpointIndex, PrefillData } from './types'
+import type { RequestValidationResult } from '@/lib/api-docs/agent/types'
+import { getFileType } from '@/lib/api-docs/code-editor'
+
+export function ToolCallDisplay({ tool, onNavigate, onNavigateToDocPage, onOpenFile }: ToolCallDisplayProps) {
+  const { toolName, args, result, state } = tool
+  
+  // Helper to render clickable file name
+  const ClickableFileName = ({ path, className = '' }: { path?: string; className?: string }) => {
+    if (!path) return <span className="font-mono text-muted-foreground">unknown</span>
+    const fileName = path.split('/').pop() || path
+    return (
+      <button
+        onClick={() => onOpenFile?.(path)}
+        className={`font-mono font-medium text-foreground hover:text-primary hover:underline cursor-pointer transition-colors ${className}`}
+      >
+        {fileName}
+      </button>
+    )
+  }
+  
+  // Helper to handle search result click
+  const handleResultClick = (item: { type: string; id: string }) => {
+    if (item.type === 'endpoint') {
+      onNavigate?.(item.id)
+    } else if (item.type === 'doc') {
+      onNavigateToDocPage?.(item.id)
+    } else if (item.type === 'changelog') {
+      onNavigateToDocPage?.(`changelog/${item.id}`)
+    }
+  }
+
+  // Loading state - with subtle background
+  if (state === 'pending') {
+    return (
+      <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
+        <div className="size-3.5 rounded-full border-2 border-primary/30 border-t-primary animate-spin" />
+        <span className="text-muted-foreground">
+          {toolName === 'search' && 'Searching...'}
+          {toolName === 'navigate' && 'Navigating...'}
+          {toolName === 'search_endpoints' && 'Searching...'}
+          {toolName === 'navigate_to_endpoint' && 'Navigating...'}
+          {toolName === 'prefill_parameters' && 'Setting params...'}
+          {toolName === 'get_endpoint_details' && 'Loading details...'}
+          {toolName === 'check_request_validity' && 'Validating request...'}
+          {toolName === 'send_request' && (
+            <span className="flex items-center gap-1.5">
+              <PaperPlaneTilt className="size-3.5 text-blue-500 animate-pulse" weight="fill" />
+              Sending request...
+            </span>
+          )}
+          {toolName === 'switch_to_notes' && 'Opening Notes...'}
+          {toolName === 'switch_to_docs' && 'Opening Docs...'}
+          {toolName === 'switch_to_api_client' && 'Opening API Client...'}
+          {toolName === 'navigate_to_doc_section' && 'Navigating to section...'}
+          {toolName === 'navigate_to_doc_page' && 'Navigating to page...'}
+          {toolName === 'search_docs' && 'Searching documentation...'}
+          {toolName === 'scroll_to_section' && 'Scrolling to section...'}
+          {toolName === 'list_notes' && 'Checking existing files...'}
+          {toolName === 'open_file' && `Opening ${(args.path as string)?.split('/').pop() || 'file'}...`}
+          {toolName === 'create_folder' && `Creating folder ${args.path as string || ''}...`}
+          {toolName === 'create_file' && `Creating ${(args.path as string)?.split('/').pop() || 'file'}...`}
+          {toolName === 'write_file' && `Writing ${(args.path as string)?.split('/').pop() || 'file'}...`}
+          {toolName === 'delete_file' && `Deleting ${(args.path as string)?.split('/').pop() || 'file'}...`}
+          {toolName === 'delete_all_notes' && 'Deleting all notes...'}
+        </span>
+      </div>
+    )
+  }
+
+  // Error state
+  if (state === 'error') {
+    return (
+      <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-destructive/10 border border-destructive/20">
+        <XCircle className="size-3.5 text-destructive" weight="fill" />
+        <span className="text-destructive">Failed</span>
+      </div>
+    )
+  }
+
+  // === UNIFIED TOOLS ===
+  
+  // Unified search
+  if (toolName === 'search') {
+    const resultData = result as { results?: Array<{ type: string; id: string; title: string; method?: string; group?: string }>; message?: string } | undefined
+    const results = resultData?.results || []
+    
+    if (results.length === 0) {
+      return (
+        <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
+          <MagnifyingGlass className="size-3.5 text-muted-foreground" weight="bold" />
+          <span className="text-muted-foreground">No results found</span>
+        </div>
+      )
+    }
+    
+    if (results.length === 1) {
+      const item = results[0]
+      return (
+        <button
+          onClick={() => handleResultClick(item)}
+          className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50 hover:bg-muted/80 hover:border-border transition-colors cursor-pointer w-full text-left"
+        >
+          <CheckCircle className="size-3.5 text-green-600 dark:text-green-500" weight="fill" />
+          <span className="text-muted-foreground">Found</span>
+          {item.method && <MethodBadge method={item.method as HTTPMethod} size="sm" />}
+          <span className="font-medium truncate">{item.title}</span>
+        </button>
+      )
+    }
+    
+    return (
+      <div className="py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
+        <div className="flex items-center gap-2 text-xs text-muted-foreground mb-1.5">
+          <MagnifyingGlass className="size-3.5" weight="bold" />
+          <span>Found {results.length} results</span>
+        </div>
+        <div className="space-y-0.5 ml-5">
+          {results.slice(0, 4).map((item, i) => (
+            <button
+              key={i}
+              onClick={() => handleResultClick(item)}
+              className="flex items-center gap-1.5 text-xs py-1 px-1.5 -ml-1.5 rounded text-muted-foreground hover:bg-muted/80 transition-colors cursor-pointer w-full text-left"
+            >
+              {item.type === 'endpoint' && item.method && (
+                <MethodBadge method={item.method as HTTPMethod} size="sm" />
+              )}
+              {item.type === 'doc' && (
+                <File className="size-3 text-purple-500" weight="fill" />
+              )}
+              {item.type === 'changelog' && (
+                <Clock className="size-3 text-orange-500" weight="fill" />
+              )}
+              <span className="truncate font-medium text-foreground">{item.title}</span>
+              {item.group && <span className="text-muted-foreground/60 text-[10px]">({item.group})</span>}
+            </button>
+          ))}
+          {results.length > 4 && (
+            <span className="text-[11px] text-muted-foreground">+{results.length - 4} more</span>
+          )}
+        </div>
+      </div>
+    )
+  }
+  
+  // Unified navigate
+  if (toolName === 'navigate') {
+    const resultData = result as { success?: boolean; type?: string; title?: string; method?: string; message?: string } | undefined
+    
+    if (!resultData?.success) {
+      return (
+        <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
+          <XCircle className="size-3.5 text-muted-foreground" />
+          <span className="text-muted-foreground">{resultData?.message || 'Navigation failed'}</span>
+        </div>
+      )
+    }
+    
+    return (
+      <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
+        <CheckCircle className="size-3.5 text-green-600 dark:text-green-500" weight="fill" />
+        <span className="text-muted-foreground">Opened</span>
+        {resultData.method && <MethodBadge method={resultData.method as HTTPMethod} size="sm" />}
+        {resultData.type === 'changelog' && <Clock className="size-3 text-orange-500" weight="fill" />}
+        {resultData.type === 'doc' && <File className="size-3 text-purple-500" weight="fill" />}
+        <span className="font-medium truncate">{resultData.title}</span>
+      </div>
+    )
+  }
+
+  // Navigate to endpoint
+  if (toolName === 'navigate_to_endpoint') {
+    const resultData = result as { success?: boolean; endpoint?: EndpointIndex; reason?: string } | undefined
+    const endpoint = resultData?.endpoint
+    
+    if (!endpoint) return null
+    
+    return (
+      <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
+        <CheckCircle className="size-3.5 text-green-600 dark:text-green-500" weight="fill" />
+        <span className="text-muted-foreground">Opened</span>
+        <MethodBadge method={endpoint.method as HTTPMethod} size="sm" />
+        <span className="font-medium truncate">{endpoint.name}</span>
+      </div>
+    )
+  }
+
+  // Prefill parameters
+  if (toolName === 'prefill_parameters') {
+    const prefillData = (result as { params?: Array<{key: string; value: string}>; headers?: Array<{key: string; value: string}>; body?: string; pathVariables?: Array<{key: string; value: string}> }) || args as PrefillData
+    const items: string[] = []
+    if (prefillData.pathVariables?.length) items.push(`${prefillData.pathVariables.length} path vars`)
+    if (prefillData.params?.length) items.push(`${prefillData.params.length} params`)
+    if (prefillData.headers?.length) items.push(`${prefillData.headers.length} headers`)
+    if (prefillData.body) items.push('body')
+    
+    return (
+      <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
+        <CheckCircle className="size-3.5 text-green-600 dark:text-green-500" weight="fill" />
+        <span className="text-muted-foreground">Set {items.join(', ')}</span>
+      </div>
+    )
+  }
+
+  // Search endpoints
+  if (toolName === 'search_endpoints') {
+    const results = result as EndpointIndex[] | undefined
+    
+    if (!results || results.length === 0) return null
+    if (results.length === 1) {
+      return (
+        <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
+          <CheckCircle className="size-3.5 text-green-600 dark:text-green-500" weight="fill" />
+          <span className="text-muted-foreground">Found</span>
+          <MethodBadge method={results[0].method as HTTPMethod} size="sm" />
+          <button 
+            onClick={() => onNavigate?.(results[0].id)}
+            className="font-medium truncate hover:underline"
+          >
+            {results[0].name}
+          </button>
+        </div>
+      )
+    }
+    
+    return (
+      <div className="py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
+        <div className="flex items-center gap-2 text-xs text-muted-foreground mb-1.5">
+          <MagnifyingGlass className="size-3.5" weight="bold" />
+          <span>Found {results.length} endpoints</span>
+        </div>
+        <div className="space-y-0.5 ml-5">
+          {results.slice(0, 4).map((ep) => (
+            <button
+              key={ep.id}
+              onClick={() => onNavigate?.(ep.id)}
+              className="flex items-center gap-1.5 text-xs py-0.5 hover:text-foreground transition-colors text-muted-foreground"
+            >
+              <MethodBadge method={ep.method as HTTPMethod} size="sm" />
+              <span className="truncate">{ep.name}</span>
+            </button>
+          ))}
+          {results.length > 4 && (
+            <span className="text-[11px] text-muted-foreground">+{results.length - 4} more</span>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  // Get endpoint details
+  if (toolName === 'get_endpoint_details') {
+    const endpoint = result as {
+      id?: string
+      name?: string
+      method?: string
+      path?: string
+      description?: string | null
+    } | undefined
+    
+    if (!endpoint) return null
+    
+    return (
+      <div className="py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
+        <div className="flex items-center gap-2 text-xs">
+          <MethodBadge method={(endpoint.method || 'GET') as HTTPMethod} size="sm" />
+          <span className="font-medium">{endpoint.name}</span>
+        </div>
+        <code className="text-[11px] text-muted-foreground block truncate mt-0.5">{endpoint.path}</code>
+      </div>
+    )
+  }
+
+  // Switch to notes
+  if (toolName === 'switch_to_notes') {
+    return (
+      <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
+        <Note className="size-3.5 text-green-600 dark:text-green-500" weight="fill" />
+        <span className="text-muted-foreground">Opened Notes workspace</span>
+      </div>
+    )
+  }
+
+  // Switch to docs
+  if (toolName === 'switch_to_docs') {
+    return (
+      <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
+        <File className="size-3.5 text-purple-600 dark:text-purple-500" weight="fill" />
+        <span className="text-muted-foreground">Opened Docs</span>
+      </div>
+    )
+  }
+
+  // Switch to API client
+  if (toolName === 'switch_to_api_client') {
+    return (
+      <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
+        <TestTube className="size-3.5 text-blue-600 dark:text-blue-500" weight="fill" />
+        <span className="text-muted-foreground">Opened API Client</span>
+      </div>
+    )
+  }
+
+  // Navigate to documentation section
+  if (toolName === 'navigate_to_doc_section') {
+    const sectionName = args.sectionName as string || 'section'
+    return (
+      <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
+        <ArrowSquareOut className="size-3.5 text-purple-600 dark:text-purple-500" weight="fill" />
+        <span className="text-muted-foreground">Navigated to <span className="font-medium text-foreground">{sectionName}</span></span>
+      </div>
+    )
+  }
+
+  // Navigate to documentation page
+  if (toolName === 'navigate_to_doc_page') {
+    const resultData = result as { success?: boolean; title?: string; slug?: string } | undefined
+    const title = args.title as string || resultData?.title || 'page'
+    return (
+      <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
+        <File className="size-3.5 text-purple-600 dark:text-purple-500" weight="fill" />
+        <span className="text-muted-foreground">
+          Opened <span className="font-medium text-foreground">{title}</span>
+        </span>
+      </div>
+    )
+  }
+
+  // Search documentation pages
+  if (toolName === 'search_docs') {
+    const resultData = result as { results?: Array<{ title: string; slug: string; group: string }>; message?: string } | undefined
+    const results = resultData?.results || []
+    
+    if (results.length === 0) {
+      return (
+        <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
+          <MagnifyingGlass className="size-3.5 text-muted-foreground" weight="bold" />
+          <span className="text-muted-foreground">No documentation pages found</span>
+        </div>
+      )
+    }
+    
+    if (results.length === 1) {
+      return (
+        <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
+          <CheckCircle className="size-3.5 text-green-600 dark:text-green-500" weight="fill" />
+          <span className="text-muted-foreground">Found</span>
+          <span className="font-medium truncate">{results[0].title}</span>
+          <span className="text-muted-foreground/60">in {results[0].group}</span>
+        </div>
+      )
+    }
+    
+    return (
+      <div className="py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
+        <div className="flex items-center gap-2 text-xs text-muted-foreground mb-1.5">
+          <MagnifyingGlass className="size-3.5" weight="bold" />
+          <span>Found {results.length} documentation pages</span>
+        </div>
+        <div className="space-y-0.5 ml-5">
+          {results.slice(0, 4).map((doc, i) => (
+            <div
+              key={i}
+              className="flex items-center gap-1.5 text-xs py-0.5 text-muted-foreground"
+            >
+              <File className="size-3 text-purple-500" weight="fill" />
+              <span className="truncate font-medium text-foreground">{doc.title}</span>
+              <span className="text-muted-foreground/60 text-[10px]">({doc.group})</span>
+            </div>
+          ))}
+          {results.length > 4 && (
+            <span className="text-[11px] text-muted-foreground">+{results.length - 4} more</span>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  // Scroll to section within page
+  if (toolName === 'scroll_to_section') {
+    const resultData = result as { success?: boolean; heading?: string; id?: string; message?: string } | undefined
+    
+    if (!resultData?.success) {
+      return (
+        <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
+          <MagnifyingGlass className="size-3.5 text-muted-foreground" weight="bold" />
+          <span className="text-muted-foreground">{resultData?.message || 'Section not found'}</span>
+        </div>
+      )
+    }
+    
+    return (
+      <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
+        <ArrowSquareOut className="size-3.5 text-yellow-600 dark:text-yellow-500" weight="fill" />
+        <span className="text-muted-foreground">
+          Scrolled to <span className="font-medium text-foreground">{resultData.heading}</span>
+        </span>
+      </div>
+    )
+  }
+
+  // List notes (check for existing files)
+  if (toolName === 'list_notes') {
+    const resultData = result as { success?: boolean; count?: number; files?: Array<{ path: string }>; message?: string } | undefined
+    const count = resultData?.count ?? 0
+    const files = resultData?.files ?? []
+    
+    // File type color mapping - matches notes-mode.tsx colors exactly
+    const getFileColor = (path: string) => {
+      const type = getFileType(path)
+      const colorMap: Record<string, string> = {
+        'javascript': 'text-yellow-400',
+        'typescript': 'text-blue-400',
+        'python': 'text-green-500',
+        'go': 'text-cyan-400',
+        'ruby': 'text-red-400',
+        'php': 'text-purple-400',
+        'shell': 'text-green-400',
+        'markdown': 'text-blue-300',
+        'mermaid': 'text-pink-400',
+        'json': 'text-yellow-500',
+        'yaml': 'text-red-300',
+        'text': 'text-zinc-400',
+      }
+      return colorMap[type] || 'text-zinc-400'
+    }
+    
+    return (
+      <div className="text-xs py-2 px-2.5 rounded-md bg-muted/50 border border-border/50">
+        <div className="flex items-center gap-2 mb-1.5">
+          <MagnifyingGlass className="size-3.5 text-violet-600 dark:text-violet-500 flex-shrink-0" weight="fill" />
+          <span className="text-muted-foreground">
+            {count > 0 ? `Found ${count} existing file${count !== 1 ? 's' : ''}` : 'No existing files found'}
+          </span>
+        </div>
+        {count > 0 && files.length > 0 && (
+          <div className="ml-5 space-y-1">
+            {files.slice(0, 5).map((f, i) => {
+              const fileName = f.path.split('/').pop() || f.path
+              const folder = f.path.includes('/') ? f.path.split('/').slice(0, -1).join('/') + '/' : ''
+              return (
+                <button
+                  key={i}
+                  onClick={() => onOpenFile?.(f.path)}
+                  className="flex items-center gap-1.5 hover:bg-muted/50 rounded px-1 -mx-1 py-0.5 transition-colors text-left w-full"
+                >
+                  <File className={`size-3.5 ${getFileColor(f.path)} flex-shrink-0`} weight="fill" />
+                  {folder && <span className="text-muted-foreground/60">{folder}</span>}
+                  <span className="font-mono text-foreground/80 hover:text-primary transition-colors">{fileName}</span>
+                </button>
+              )
+            })}
+            {files.length > 5 && (
+              <div className="text-muted-foreground/60 italic pl-5">...and {files.length - 5} more</div>
+            )}
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  // Open existing file
+  if (toolName === 'open_file') {
+    const path = args.path as string
+    
+    return (
+      <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
+        <File className="size-3.5 text-blue-600 dark:text-blue-500" weight="fill" />
+        <span className="text-muted-foreground">Opened </span>
+        <ClickableFileName path={path} />
+      </div>
+    )
+  }
+
+  // Create folder
+  if (toolName === 'create_folder') {
+    const resultData = result as { success?: boolean; path?: string; description?: string } | undefined
+    const path = args.path as string || resultData?.path
+    const description = args.description as string || resultData?.description
+    
+    return (
+      <div className="flex items-start gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
+        <FolderPlus className="size-3.5 text-amber-600 dark:text-amber-500 mt-0.5 flex-shrink-0" weight="fill" />
+        <div>
+          <span className="text-muted-foreground">Created folder </span>
+          <span className="font-mono font-medium text-foreground">{path}</span>
+          {description && (
+            <p className="text-muted-foreground mt-0.5">{description}</p>
+          )}
+        </div>
+      </div>
+    )
+  }
+  
+  // Create file (empty)
+  if (toolName === 'create_file') {
+    const resultData = result as { success?: boolean; path?: string; description?: string } | undefined
+    const path = args.path as string || resultData?.path
+    const description = args.description as string || resultData?.description
+    
+    return (
+      <div className="flex items-start gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
+        <FilePlus className="size-3.5 text-blue-600 dark:text-blue-500 mt-0.5 flex-shrink-0" weight="fill" />
+        <div>
+          <span className="text-muted-foreground">Created </span>
+          <ClickableFileName path={path} />
+          {description && (
+            <p className="text-muted-foreground mt-0.5">{description}</p>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  // Write file (content)
+  if (toolName === 'write_file') {
+    const resultData = result as { success?: boolean; path?: string } | undefined
+    const path = args.path as string || resultData?.path
+    
+    return (
+      <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
+        <CheckCircle className="size-3.5 text-green-600 dark:text-green-500" weight="fill" />
+        <span className="text-muted-foreground">Wrote </span>
+        <ClickableFileName path={path} />
+      </div>
+    )
+  }
+
+  // Delete file
+  if (toolName === 'delete_file') {
+    const resultData = result as { success?: boolean; path?: string; reason?: string; error?: string } | undefined
+    const path = args.path as string || resultData?.path
+    const reason = args.reason as string || resultData?.reason
+    const fileName = path?.split('/').pop() || path
+    
+    if (resultData?.error) {
+      return (
+        <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-destructive/10 border border-destructive/20">
+          <XCircle className="size-3.5 text-destructive" weight="fill" />
+          <span className="text-destructive">Failed to delete: {resultData.error}</span>
+        </div>
+      )
+    }
+    
+    return (
+      <div className="flex items-start gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
+        <Trash className="size-3.5 text-red-600 dark:text-red-500 mt-0.5 flex-shrink-0" weight="fill" />
+        <div>
+          <span className="text-muted-foreground">Deleted </span>
+          <span className="font-mono font-medium text-foreground">{fileName}</span>
+          {reason && (
+            <p className="text-muted-foreground mt-0.5">{reason}</p>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  // Delete all notes
+  if (toolName === 'delete_all_notes') {
+    const resultData = result as { success?: boolean; deletedCount?: number; files?: string[]; message?: string; error?: string } | undefined
+    
+    if (resultData?.error) {
+      return (
+        <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-destructive/10 border border-destructive/20">
+          <XCircle className="size-3.5 text-destructive" weight="fill" />
+          <span className="text-destructive">{resultData.error}</span>
+        </div>
+      )
+    }
+    
+    const count = resultData?.deletedCount ?? 0
+    const files = resultData?.files ?? []
+    
+    // File type color mapping - matches notes-mode.tsx colors exactly
+    const getFileColor = (path: string) => {
+      const type = getFileType(path)
+      const colorMap: Record<string, string> = {
+        'javascript': 'text-yellow-400',
+        'typescript': 'text-blue-400',
+        'python': 'text-green-500',
+        'go': 'text-cyan-400',
+        'ruby': 'text-red-400',
+        'php': 'text-purple-400',
+        'shell': 'text-green-400',
+        'markdown': 'text-blue-300',
+        'mermaid': 'text-pink-400',
+        'json': 'text-yellow-500',
+        'yaml': 'text-red-300',
+        'text': 'text-zinc-400',
+      }
+      return colorMap[type] || 'text-zinc-400'
+    }
+    
+    if (count === 0) {
+      return (
+        <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
+          <Trash className="size-3.5 text-muted-foreground" />
+          <span className="text-muted-foreground">No notes to delete</span>
+        </div>
+      )
+    }
+    
+    const displayFiles = files.slice(0, 5)
+    const remainingCount = files.length - displayFiles.length
+    
+    return (
+      <div className="text-xs py-2 px-2.5 rounded-md bg-red-500/5 border border-red-500/20">
+        <div className="flex items-center gap-2 mb-2">
+          <Trash className="size-3.5 text-red-600 dark:text-red-500" weight="fill" />
+          <span className="font-medium text-red-700 dark:text-red-400">
+            Deleted {count} file{count !== 1 ? 's' : ''}
+          </span>
+        </div>
+        <div className="space-y-1 ml-5">
+          {displayFiles.map((filePath, i) => {
+            const fileName = filePath.split('/').pop() || filePath
+            const folder = filePath.includes('/') ? filePath.split('/').slice(0, -1).join('/') + '/' : ''
+            return (
+              <div key={i} className="flex items-center gap-1.5">
+                <File className={`size-3.5 ${getFileColor(filePath)}`} weight="fill" />
+                <span className="text-muted-foreground/70">{folder}</span>
+                <span className="font-mono text-foreground/80">{fileName}</span>
+              </div>
+            )
+          })}
+          {remainingCount > 0 && (
+            <div className="text-muted-foreground/60 italic">
+              ...and {remainingCount} more
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  // Check request validity
+  if (toolName === 'check_request_validity') {
+    const validation = result as RequestValidationResult | undefined
+    
+    if (!validation) return null
+    
+    const { isValid, validation: v } = validation
+    const issues: string[] = []
+    
+    if (v?.pathParams?.missing?.length) issues.push(`path: ${v.pathParams.missing.join(', ')}`)
+    if (v?.queryParams?.missing?.length) issues.push(`params: ${v.queryParams.missing.join(', ')}`)
+    if (v?.body?.required && !v?.body?.hasContent) issues.push('body empty')
+    if (v?.auth?.required && !v?.auth?.configured) issues.push('auth missing')
+    
+    if (isValid) {
+      return (
+        <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-green-500/10 border border-green-500/20">
+          <CheckSquare className="size-3.5 text-green-600 dark:text-green-500" weight="fill" />
+          <span className="text-green-700 dark:text-green-400">Ready to send</span>
+        </div>
+      )
+    }
+    
+    return (
+      <div className="py-1.5 px-2.5 rounded-md bg-amber-500/10 border border-amber-500/20">
+        <div className="flex items-center gap-2 text-xs">
+          <Warning className="size-3.5 text-amber-600 dark:text-amber-500" weight="fill" />
+          <span className="text-amber-700 dark:text-amber-400">Missing: {issues.join(', ')}</span>
+        </div>
+      </div>
+    )
+  }
+
+  // Send request
+  if (toolName === 'send_request') {
+    const response = result as { 
+      success?: boolean
+      message?: string
+      error?: string
+    } | undefined
+    
+    if (!response) return null
+    
+    const { success, error } = response
+    
+    if (error || !success) {
+      return (
+        <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-destructive/10 border border-destructive/20">
+          <XCircle className="size-3.5 text-destructive" weight="fill" />
+          <span className="text-destructive">{error || 'Request failed'}</span>
+        </div>
+      )
+    }
+    
+    return (
+      <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-blue-500/10 border border-blue-500/20">
+        <PaperPlaneTilt className="size-3.5 text-blue-600 dark:text-blue-500" weight="fill" />
+        <span className="text-blue-700 dark:text-blue-400">Request sent → check response viewer</span>
+      </div>
+    )
+  }
+
+  // Hide unknown tools
+  return null
+}