Improvement(ui/ux): signup, command-list, cursors, search modal, workflow runs, usage indicator

[emir-karabeg]

Summary

Signup, command-list, cursors, search modal, workflow runs, usage indicator

Type of Change

• New feature

Testing

This one vibes brah.

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 0:07am

[greptile-apps]

Greptile Overview

Greptile Summary

This PR enhances multiple UI/UX areas: interactive command list with drag/drop, refined cursor appearance, animated block execution indicators, centralized search modal state, and improved usage indicator animations.

Key Changes

• Command List: Added click handlers for navigation and block creation, plus drag/drop support for placing blocks on empty canvas
• Execution Tracking: New run path visualization shows success/error rings on blocks after execution completes
• Search Modal: Migrated to centralized Zustand store for better state management across components
• Cursors: Improved SVG pointer design and tighter name tag positioning
• Usage Indicator: Refined animation logic for smoother pill transitions
• Button Component: Fixed 3d variant shadow to use explicit color

Notes

• The globals.css change violates the custom instruction to avoid global style edits unless absolutely necessary

Confidence Score: 4/5

• Safe to merge with one minor style guideline deviation
• The PR contains well-structured UI/UX improvements with proper state management patterns and type safety. The refactored drop handling logic is cleaner and more maintainable. One point deducted for the globals.css edit which violates the custom instruction to keep styles local to components, though the animation could be moved to Tailwind config or a component-specific CSS module.
• Pay attention to apps/sim/app/globals.css - consider moving the ring-pulse animation to a more localized location per coding guidelines

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/app/globals.css	4/5	Added ring pulse animation for active blocks - violates custom instruction to avoid global CSS edits
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx	5/5	Made command list interactive with click handlers, drag/drop support, and routing logic
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx	5/5	Refactored drop handling into shared handler for reusability between canvas and command list
apps/sim/stores/execution/store.ts	5/5	Added run path tracking with setBlockRunStatus and clearRunPath actions
apps/sim/stores/search-modal/store.ts	5/5	New Zustand store for centralized search modal state management

Sequence Diagram

sequenceDiagram
    participant User
    participant CommandList
    participant SearchModalStore
    participant ExecutionStore
    participant Workflow
    participant Block

    User->>CommandList: Click "Search Blocks"
    CommandList->>SearchModalStore: openSearchModal()
    SearchModalStore-->>User: Modal opens

    User->>Workflow: Drag block from toolbar
    Workflow->>Workflow: handleToolbarDrop()
    Workflow->>Workflow: Check container collision
    Workflow->>Workflow: Validate trigger constraints
    Workflow->>Workflow: addBlock()
    
    User->>Workflow: Execute workflow
    Workflow->>ExecutionStore: setIsExecuting(true)
    ExecutionStore->>ExecutionStore: Clear lastRunPath
    
    loop For each block execution
        Workflow->>ExecutionStore: setActiveBlocks(blockId)
        ExecutionStore->>Block: Animate ring pulse
        alt Block succeeds
            Workflow->>ExecutionStore: setBlockRunStatus(blockId, 'success')
            ExecutionStore->>Block: Show success ring
        else Block fails
            Workflow->>ExecutionStore: setBlockRunStatus(blockId, 'error')
            ExecutionStore->>Block: Show error ring
        end
    end
    
    Workflow->>ExecutionStore: setIsExecuting(false)

Loading

[greptile-apps]

_{16 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

style: violates custom instruction "avoid editing the globals.css file unless absolutely necessary. move style changes to local component files 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: 77:99

Comment:
**style:** violates custom instruction "avoid editing the `globals.css` file unless absolutely necessary. move style changes to local component files 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.

[icecrasher321]

lgtm