improvement: runpath edges, blocks, active

[emir-karabeg]

Summary

Run path workflow block and edges.

Type of Change

• New feature

Testing

Solo testing.

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• 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 15, 2025 7:26am

[greptile-apps]

Greptile Overview

Greptile Summary

This PR implements visual run-path tracking for workflow execution by highlighting blocks and edges that were traversed during the last run.

Key Changes

• Extracted block ring styling logic into dedicated utility file (block-ring-utils.ts) following separation of concerns
• Added edge run status tracking to execution store with new lastRunEdges map
• Edges are marked as traversed when blocks start executing, showing visual feedback for the execution path
• Updated ring animation from opacity-based to box-shadow expansion (1.5px → 4px) for better visibility
• Active blocks now show thicker (3.5px) pulsing ring using new --border-success CSS variable
• Disabled blocks preserve their text color when runPathStatus === 'success'

Style Guide Consideration

• The globals.css changes (adding --border-success variables) should be reconsidered per the style guide preference for local component styles

Confidence Score: 4/5

• This PR is safe to merge with one minor style guide consideration
• The implementation is solid with proper TypeScript, good separation of concerns, and comprehensive state management. The code correctly tracks edges and blocks during execution. The only concern is the globals.css modification which violates the style guide's preference for local component styles, though this is a non-critical style consideration.
• Pay attention to apps/sim/app/globals.css - consider moving CSS variables to Tailwind config or local styles

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/app/globals.css	3/5	Removed animation keyframes and added new CSS variables (--border-success) for light/dark themes. Violates style guide requiring minimal global CSS changes.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-ring-utils.ts	5/5	New utility file extracting ring styling logic from component. Follows architecture patterns with proper TypeScript interfaces and TSDoc.
apps/sim/stores/execution/store.ts	5/5	Implemented setEdgeRunStatus action and updated clearRunPath to reset both blocks and edges. Properly clears on execution start.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution.ts	5/5	Tracks incoming edges when blocks start executing. Marks edges as successful immediately on block start.
apps/sim/tailwind.config.ts	5/5	Updated ring-pulse animation to use box-shadow with variable ring thickness (1.5px to 4px) instead of opacity changes.

Sequence Diagram

sequenceDiagram
    participant User
    participant ExecutionHook as useWorkflowExecution
    participant ExecutionStore as Execution Store
    participant BlockCore as useBlockCore
    participant WorkflowBlock as WorkflowBlock Component
    participant WorkflowEdge as WorkflowEdge Component

    User->>ExecutionHook: Start workflow execution
    ExecutionHook->>ExecutionStore: setIsExecuting(true)
    ExecutionStore->>ExecutionStore: Clear lastRunPath & lastRunEdges

    ExecutionHook->>ExecutionHook: onBlockStarted callback
    ExecutionHook->>ExecutionStore: setActiveBlocks(blockId)
    ExecutionHook->>ExecutionHook: Filter incoming edges to block
    loop For each incoming edge
        ExecutionHook->>ExecutionStore: setEdgeRunStatus(edgeId, 'success')
    end

    ExecutionStore->>WorkflowEdge: Provide lastRunEdges map
    WorkflowEdge->>WorkflowEdge: Check edgeRunStatus from map
    WorkflowEdge->>WorkflowEdge: Apply success/error color

    ExecutionStore->>BlockCore: Provide runPathStatus
    BlockCore->>BlockCore: Call getBlockRingStyles()
    BlockCore->>WorkflowBlock: Return ring styles & runPathStatus
    WorkflowBlock->>WorkflowBlock: Apply ring animation (3.5px pulsing)
    WorkflowBlock->>WorkflowBlock: Preserve text color if runPathStatus === 'success'

    ExecutionHook->>ExecutionHook: onBlockCompleted callback
    ExecutionHook->>ExecutionStore: setActiveBlocks(remove blockId)
    ExecutionHook->>ExecutionStore: setBlockRunStatus(blockId, 'success')

    Note over WorkflowBlock,WorkflowEdge: Visual indicators persist after execution<br/>showing the path taken through workflow

Loading

[greptile-apps]

_{10 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

style: Adding CSS variables to globals.css violates the style guide which states "You should not update the global styles unless it is absolutely necessary." Consider defining --border-success in the Tailwind config or in local component styles instead.

Context Used: Context from dashboard - Avoid editing the globals.css file unless absolutely necessary. Move style changes to local componen... (source)

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/sim/app/globals.css
Line: 111:114

Comment:
**style:** Adding CSS variables to `globals.css` violates the style guide which states "You should not update the global styles unless it is absolutely necessary." Consider defining `--border-success` in the Tailwind config or in local component styles instead.

**Context Used:** Context from `dashboard` - Avoid editing the globals.css file unless absolutely necessary. Move style changes to local componen... ([source](https://app.greptile.com/review/custom-context?memory=c3b5e4b0-6580-4307-83aa-ba28f105b3c4))

How can I resolve this? If you propose a fix, please make it concise.