@brainfish-ai/devdoc 0.1.42 → 0.1.43

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

@@ -1,721 +0,0 @@
-'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
-}