This is a comprehensive agent builder step system. Let me build it systematically - starting with the shared types and wrapper component, then each step type.

Now let me create the individual step components. I'll start with the Reading category:

Now let me create the Reasoning category steps:

Now let me create the Iteration & Acting category steps:

Now let me create the Human-in-the-loop and Workflow control steps:

Now let me create the Guardrails card:

Now let me create the index file to export all components:

Now let me update the blueprint pane to use these new step cards and integrate them into the existing interface. First, let me read the current blueprint pane:

Now let me create a demo page that showcases all the step cards. I'll create a new component that demonstrates the step sequence:

Good, I have the context. Now let me integrate the step sequence demo into the blueprint pane as a new view. I'll update the blueprint pane to show the new step cards instead of the old static blueprint display:

Now I understand the current structure. Let me update the blueprint pane to replace the old static display with the new step sequence demo that uses all the step cards I created. I'll modify the component to show the step-based view:

Now let me verify everything is working by checking the browser:

Verified changes

The new step cards are now showing in the blueprint pane. I can see:

1. Trigger card at the top with "Every Monday" badge and client info
2. Pull data step (step 1) with metrics, dimensions, and row count
3. Compare against step (step 2) showing WoW changes with colored indicators (ROAS +12%, Spend -8%, etc.)
4. Detect (rules) step (step 3) with bindings and flags output

Let me scroll down to see the rest of the steps:

Took screenshot

Let me scroll within the blueprint pane specifically to see the rest of the steps:

Scrolled blueprint

Let me click on the blueprint panel area first, then scroll:

The snapshot shows all the step cards are rendering correctly:

• Step 1: Pull data (ok, 1.2s) with rows[127] output
• Step 2: Compare against (ok, 0.3s) with changes[4] output
• Step 3: Detect (rules) (ok, 0.1s) with flags[2] output
• Step 4: Analyze (ok, 2.1s, $0.02) with summary_markdown output
• Step 5: Format / Render (ok, 0.3s) with slack_blocks output
• Step 7: Send / Notify
• Add step button
• Guardrails card with all the spinbuttons

Let me expand one of the step cards to see the details view:

Expanded step card

Excellent! The step card expanded view is working beautifully! The Pull data step now shows:

• Test run button with "Last run: 2 min ago"
• Metrics section with removable chips (Spend, Revenue, ROAS, CPA, CTR) and "+ Add" button
• Dimensions section with removable chips (Platform, Campaign) and "+ Add" button
• Date Range section with Rolling toggle and "Last 7 days" dropdown

Let me scroll down within this expanded card to see the SQL preview and data preview:

Scrolled for more

The interface is looking great! Let me collapse this step and check the "Analyze" step which has the AI-powered indicator:

Took screenshot

The interface is fully working with the new step card system. I've successfully updated the blueprint pane to use the comprehensive step cards you specified. Here's a summary of what was implemented:

Step Card System:

• Reading steps: Pull data, Compare against, Research external
• Reasoning steps: Analyze, Detect (rules), Detect (AI), Decide (rules), Decide (AI)
• Iteration steps: For each, Remember / Recall
• Acting steps: Format / Render, Send / Notify, Create record
• Human-in-loop steps: Approval, Decision (human), Input request
• Workflow steps: Wait, Split branches, Conversion mapping

Each step card includes:

• Step number, icon, and name
• Status indicator (ok/error/running) with duration
• Input bindings (s1.data, s2.changes, etc.)
• Output shape badges
• "Authored by AI" sparkle indicator where applicable
• "Runtime AI" purple badge for AI-powered steps with cost tracking
• "Write-capable" pen icon for steps that modify external systems
• Expandable details view with step-specific configuration
• Three-dot menu for actions (duplicate, delete, etc.)

Guardrails card at the bottom with all the safety parameters you specified (max AI cost, max BQ cost, max wall time, etc.)