Summary

Enhance the display and formatting of tool execution results to provide better structure, readability, and visual presentation in the chat interface.

Background

Tool result messages currently use the CollapsibleDetails component but could benefit from:

• Better formatting for different types of tool outputs (file contents, command results, search results, etc.)
• Improved visual hierarchy and structure
• Enhanced readability for long outputs
• Status indicators for success/failure states
• Tool-specific formatting optimizations

Implementation Plan

1. Enhanced Tool Result Component

• Improve existing ToolResultMessage component
• Add tool-specific formatting for common tools:
  • File operations (Read, Write, Edit): Code highlighting and diff display
  • Command execution (Bash): Terminal-style formatting
  • Search operations (Grep, Glob): Structured result display
  • Web requests (WebFetch): Clean content presentation

2. Result Status Indicators

• Success: ✅ Green indicator with completion message
• Partial/Warning: ⚠️ Yellow indicator for partial results or warnings
• Error: ❌ Red indicator with clear error messaging
• Info: ℹ️ Blue indicator for informational results

3. Smart Formatting

interface EnhancedToolResult {
  toolName: string;
  status: 'success' | 'partial' | 'error' | 'info';
  content: string;
  summary: string;
  metadata?: {
    duration?: number;
    fileCount?: number;
    lineCount?: number;
  };
}

4. Content-Specific Enhancements

• Code files: Syntax highlighting using existing highlight.js
• Command output: Monospace font with terminal-style colors
• File diffs: Side-by-side or unified diff display
• JSON/structured data: Pretty-printed with collapsible sections
• Large outputs: Pagination or virtual scrolling for performance

Technical Details

Files to modify:

• frontend/src/components/MessageComponents.tsx - Enhance ToolResultMessage
• frontend/src/components/messages/CollapsibleDetails.tsx - Add formatting options
• frontend/src/utils/toolUtils.ts - Tool-specific formatting utilities
• frontend/src/hooks/streaming/useToolHandling.ts - Enhanced tool result processing

Integration points:

• Leverage existing highlight.js for syntax highlighting
• Use existing CollapsibleDetails as base with enhancements
• Maintain consistency with theme system
• Integrate with existing tool result processing pipeline

Acceptance Criteria

• Tool results display with appropriate status indicators (success/error/warning)
• Content-specific formatting for different tool types (files, commands, searches)
• Syntax highlighting for code content using existing highlight.js
• Improved readability for long outputs with smart truncation/pagination
• Enhanced CollapsibleDetails with tool-specific formatting options
• Consistent visual hierarchy and spacing
• Responsive design for mobile devices
• Performance optimization for large tool outputs
• Accessibility compliance (screen reader friendly)
• Works seamlessly with light/dark theme system

Examples

File Read Result

📄 Read: src/components/App.tsx ✅ Success
├─ Lines: 245 | Size: 8.2KB | Modified: 2 hours ago
└─ [Collapsible with syntax-highlighted content]

Command Execution

⚡ Bash: npm run build ✅ Success (2.3s)
├─ Exit code: 0 | Output: 156 lines
└─ [Terminal-style output with monospace font]

Search Results

🔍 Grep: "useState" in *.tsx ✅ Found 12 matches
├─ Files: 8 | Matches: 12 | Duration: 23ms
└─ [Structured list of matches with file paths and line numbers]

Parent Issue

This is a sub-issue of #10 - Enhance frontend UI with Slack-like chat experience

Labels

feature, ui/ux, frontend, enhancement, sub-issue