improvement(logs): trace span, details

[emir-karabeg]

Summary

Improved logs trace span and details. Also improved action bar duplicate code and ordering.

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation
• Other: ___________

Testing

Solo.

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
docs	Skipped		Jan 23, 2026 3:43am

[greptile-apps]

Greptile Summary

Refactored trace span rendering and log details UI with improved visualization and interaction patterns. Major changes include:

• Simplified trace span tree structure by removing nested component complexity and consolidating into a single recursive TraceSpanNode component
• Added hasErrorInTree() helper to detect errors in span hierarchies and show error styling on parent spans
• Enhanced code viewer sections with inline copy/search buttons using tooltip overlays and context menus
• Added dedicated workflow output section with full JSON viewer, search, and copy functionality
• Removed duplicate enable/disable button logic from action bar for subflow blocks
• Replaced clsx with cn utility for consistency across the codebase
• Fixed prop interface by removing unused totalDuration parameter
• Improved spacing and visual consistency across log details UI

Confidence Score: 4/5

• Safe to merge with minor considerations for testing the refactored trace span rendering
• The refactoring is well-structured and follows React best practices. The main change is a significant simplification of the trace span rendering logic, removing complex nested components in favor of a cleaner recursive approach. Code duplication was removed from action bar. The changes maintain existing functionality while improving UX with better error detection and interactive features.
• Check trace-spans.tsx - significant refactoring of rendering logic should be tested with various trace span structures

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-spans/trace-spans.tsx	Refactored trace span rendering with simplified tree structure, added error detection, improved copy/search UX
apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx	Added workflow output section with code viewer and search functionality, improved UI consistency
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx	Removed duplicate enable/disable button code for subflow blocks, improved code organization

Sequence Diagram

sequenceDiagram
    participant User
    participant LogDetails
    participant TraceSpans
    participant InputOutputSection
    participant WorkflowOutputSection
    participant CodeViewer

    User->>LogDetails: View log details
    LogDetails->>WorkflowOutputSection: Render workflow output
    WorkflowOutputSection->>CodeViewer: Display JSON with wrapText
    WorkflowOutputSection->>WorkflowOutputSection: Add copy/search buttons overlay
    
    LogDetails->>TraceSpans: Render trace spans
    TraceSpans->>TraceSpans: normalizeAndSortSpans()
    TraceSpans->>TraceSpans: Calculate workflowStartTime & totalDuration
    TraceSpans->>TraceSpans: Render TraceSpanNode (depth=0, always expanded)
    
    loop For each child span
        TraceSpans->>TraceSpans: hasErrorInTree() - check for errors
        TraceSpans->>TraceSpans: Build allChildren (toolCalls + children)
        TraceSpans->>InputOutputSection: Render input/output sections
        InputOutputSection->>CodeViewer: Display JSON with wrapText
        InputOutputSection->>InputOutputSection: Add copy/search buttons overlay
        
        alt User clicks context menu
            InputOutputSection->>InputOutputSection: Show copy/search options
        end
        
        alt User expands nested span
            TraceSpans->>TraceSpans: Recursive TraceSpanNode (depth+1)
        end
    end
    
    alt User copies content
        InputOutputSection->>InputOutputSection: Copy to clipboard
        InputOutputSection->>InputOutputSection: Show success feedback (1.5s)
    end
    
    alt User activates search
        InputOutputSection->>CodeViewer: Enable search highlighting
        InputOutputSection->>InputOutputSection: Show search overlay
    end

Loading