fix(ui): live usage indicator, child trace spans, cancel subscription modal z-index

[icecrasher321]

Summary

Multiple UI fixes.

Type of Change

• Bug fix

Testing

Tested manually

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	Preview	Comments	Updated (UTC)
docs	Skipped			Nov 19, 2025 4:17am

[greptile-apps]

Greptile Summary

• Implements live usage indicator with real-time socket updates and animated rotating digits for immediate feedback when workflow usage changes
• Fixes cancel subscription modal z-index layering issues by increasing alert dialog component z-index values to ensure proper modal visibility
• Preserves child trace spans in error handling to improve debugging visibility when nested workflow operations fail

Important Files Changed

Filename	Overview
apps/sim/components/ui/alert-dialog.tsx	Increased z-index values from10000030/10000031 to10000150/10000151 to fix modal layering issues
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/usage-indicator/usage-indicator.tsx	Added real-time socket listener for usage updates and RotatingDigit animation component
apps/sim/executor/execution/block-executor.ts	Enhanced error handling to preserve childTraceSpans property from error objects for better debugging
apps/sim/executor/handlers/workflow/workflow-handler.ts	Simplified error handling and improved child trace span capture for failed workflow executions

Confidence score: 4/5

• This PR addresses legitimate UI issues but includes extensive code cleanup that removes valuable documentation comments
• Score reflects the substantial comment removal across 20+ files which reduces code maintainability, though functional changes appear sound
• Pay special attention to apps/sim/hooks/queries/organization.ts which uses console.error instead of the required logger, and verify that optimistic update logic works correctly across usage limit components

Sequence Diagram

sequenceDiagram
    participant User
    participant useWorkflowExecution
    participant ExecutionStream
    participant WorkflowStore
    participant ExecutionStore
    participant Console
    participant Server
    participant QueryClient

    User->>useWorkflowExecution: "handleRunWorkflow(workflowInput)"
    
    useWorkflowExecution->>WorkflowStore: "Get workflow state"
    WorkflowStore-->>useWorkflowExecution: "blocks, edges"
    
    useWorkflowExecution->>ExecutionStore: "setIsExecuting(true)"
    
    useWorkflowExecution->>useWorkflowExecution: "executeWorkflow()"
    
    useWorkflowExecution->>useWorkflowExecution: "Resolve triggers and validate"
    
    useWorkflowExecution->>ExecutionStream: "execute({workflowId, input, startBlockId})"
    
    ExecutionStream->>Server: "POST /api/workflows/execute"
    Server-->>ExecutionStream: "Stream response"
    
    loop For each streaming event
        ExecutionStream->>useWorkflowExecution: "onBlockStarted(blockData)"
        useWorkflowExecution->>ExecutionStore: "setActiveBlocks(blockId)"
        useWorkflowExecution->>ExecutionStore: "setEdgeRunStatus(edgeId, 'success')"
        
        ExecutionStream->>useWorkflowExecution: "onBlockCompleted(blockData)"
        useWorkflowExecution->>ExecutionStore: "setBlockRunStatus(blockId, 'success')"
        useWorkflowExecution->>Console: "addConsole(blockResult)"
        
        alt If streaming block
            ExecutionStream->>useWorkflowExecution: "onStreamChunk(data)"
        end
    end
    
    ExecutionStream->>useWorkflowExecution: "onExecutionCompleted(result)"
    useWorkflowExecution->>useWorkflowExecution: "setExecutionResult(result)"
    
    useWorkflowExecution->>QueryClient: "invalidateQueries(subscriptionKeys)"
    
    useWorkflowExecution->>ExecutionStore: "setIsExecuting(false)"
    useWorkflowExecution->>ExecutionStore: "setActiveBlocks(new Set())"
    
    useWorkflowExecution-->>User: "Return execution result"

Loading

[greptile-apps]

Additional Comments (1)

1. apps/sim/hooks/queries/organization.ts, line 82 (link)

   syntax: Use logger.error instead of console.error as per project guidelines

_{24 files reviewed, 5 comments}

_{Edit Code Review Agent Settings | Greptile
React with 👍 or 👎 to share your feedback on this new summary format}