Description

Add a modal/dialog popup system to display tool call inputs, outputs, errors, and test results in a feature-rich viewer with JSON tree navigation, syntax highlighting, line numbers, and search functionality.

Context

Original request: "When selecting a tool call in the monitoring tab, I'd like to be able to expand the detail of an input or an output to be more readable and user friendly. Same for the result of a test in the Tools menu."

Currently, inputs/outputs in the Monitoring tab and test results in the Tools menu are shown in small <pre> blocks with limited height (max-h-40), making it difficult to read large JSON payloads or lengthy text outputs.

Acceptance Criteria

• Clicking an expand button on Input/Output/Error sections in Monitoring tab opens a modal viewer
• Clicking an expand button on test results in Tools menu opens the same modal viewer
• Modal displays content with syntax highlighting for JSON
• Modal includes line numbers for navigation
• Modal provides search functionality to find text within content
• JSON content is displayed as a sophisticated tree with collapsible nested objects/arrays
• Modal has maximum height with scrolling (not unlimited expansion)
• Modal supports both light and dark mode themes
• Modal can be closed via close button or ESC key
• All sections remain collapsed by default in the main view

Technical Implementation Notes

Files to Modify:

• packages/frontend/src/components/monitoring/ToolCallDetail.tsx

  • Add expand button/icon to Input section (around line 154)
  • Add expand button/icon to Output section (around line 176)
  • Add expand button/icon to Error section (around line 169)
  • Wire up buttons to open CodeViewerDialog with appropriate content

• packages/frontend/src/components/tools/tool-tester.tsx

  • Add expand button/icon to execution result section (around line 211)
  • Wire up button to open CodeViewerDialog with result content

New Component to Create:

• packages/frontend/src/components/ui/code-viewer-dialog.tsx
  • Use Radix UI Dialog component for modal (already available in project)
  • Implement JSON tree viewer with collapsible nodes
  • Add syntax highlighting (consider Monaco Editor, Prism, or similar)
  • Add line numbers display
  • Implement search functionality with match highlighting
  • Support both raw text and JSON content
  • Maximum height with scrolling container
  • Dark mode compatible styling
  • Keyboard navigation support (ESC to close, Ctrl+F for search)

Approach:

1. Create reusable CodeViewerDialog component with these props:

   • open: boolean - Controls dialog visibility
   • onOpenChange: (open: boolean) => void - Callback for closing
   • content: string - The content to display
   • title: string - Dialog title (e.g., "Tool Input", "Test Result")
   • language?: string - Content type for syntax highlighting (default: 'json')

2. For JSON tree viewer, consider these options:

   • Use react-json-view or @uiw/react-json-view library
   • Use Monaco Editor (same as VS Code) for full-featured code viewing
   • Build custom tree component with recursive rendering

3. For syntax highlighting and line numbers:

   • Monaco Editor provides both out of the box
   • Alternative: Prism.js + custom line numbers implementation
   • Alternative: Highlight.js + react-syntax-highlighter

4. For search functionality:

   • Monaco Editor has built-in search (Ctrl+F)
   • Custom implementation: Use browser's native find or implement highlight matches

Considerations:

• Monaco Editor adds ~5MB to bundle but provides professional code editing experience
• Lighter alternatives like Prism.js are ~20KB but require more custom implementation
• JSON tree libraries are typically 50-200KB and provide good balance
• Consider lazy loading the dialog component to reduce initial bundle size
• Ensure search works across collapsed JSON nodes (expand relevant nodes when match found)
• Handle very large payloads gracefully (consider virtualization for 10k+ lines)

Testing Requirements

• Unit tests for CodeViewerDialog component
  • Renders correctly with different content types (JSON, text, error messages)
  • Dialog opens and closes properly
  • Search functionality finds and highlights matches
  • JSON tree expands/collapses nodes correctly
  • Handles malformed JSON gracefully (fallback to plain text)
• Unit tests updated for ToolCallDetail component
  • Expand buttons render correctly
  • Clicking expand button opens dialog with correct content
• Unit tests updated for ToolTester component
  • Expand button renders on test results
  • Dialog opens with test result content
• Manual testing checklist
  • Test with small JSON payloads (< 100 lines)
  • Test with large JSON payloads (> 1000 lines)
  • Test with deeply nested JSON (5+ levels)
  • Test with plain text content
  • Test with error messages
  • Test search with various queries
  • Test in light and dark mode
  • Test keyboard shortcuts (ESC, Ctrl+F if implemented)
  • Test on different screen sizes (mobile, tablet, desktop)

Documentation Updates

• Add JSDoc comments to CodeViewerDialog component explaining usage
• Update component documentation if pattern library exists

Dependencies

• Evaluate and choose one of:
  • Monaco Editor: @monaco-editor/react (full-featured, larger bundle)
  • JSON Viewer: react-json-view or @uiw/react-json-view (specialized, smaller)
  • Syntax Highlighter: react-syntax-highlighter (lightweight, flexible)
• Already available: Radix UI Dialog component for modal