ruby_llm-agents 1.0.0 → 1.2.0

data/app/views/ruby_llm/agents/workflows/_workflow_diagram.html.erb

@@ -0,0 +1,920 @@
+<%
+  # Vertical workflow diagram visualization
+  # Redesigned for clarity: vertical flow, spelled-out indicators, visual hierarchy
+  #
+  # Required locals:
+  #   steps: Array of step hashes with full DSL metadata
+  #
+  # Optional locals:
+  #   parallel_groups: Array of parallel group hashes
+  #   input_schema_fields: Hash of input schema field definitions
+  #   lifecycle_hooks: Hash of lifecycle hook counts
+
+  steps = local_assigns[:steps] || []
+  parallel_groups = local_assigns[:parallel_groups] || []
+  input_schema_fields = local_assigns[:input_schema_fields] || {}
+  lifecycle_hooks = local_assigns[:lifecycle_hooks] || {}
+
+  # Group steps into sequential items, parallel groups, and wait steps
+  def group_steps(steps, parallel_groups)
+    current_parallel_group = nil
+    grouped_items = []
+
+    steps.each do |step|
+      # Check if this is a wait step
+      if step[:type] == :wait
+        current_parallel_group = nil
+        grouped_items << { type: :wait, step: step }
+      elsif step[:parallel_group].present?
+        pg = parallel_groups.find { |g| g[:name].to_s == step[:parallel_group].to_s }
+        if current_parallel_group != step[:parallel_group]
+          current_parallel_group = step[:parallel_group]
+          grouped_items << { type: :parallel_group, group: pg, steps: [step] }
+        else
+          grouped_items.last[:steps] << step
+        end
+      else
+        current_parallel_group = nil
+        grouped_items << { type: :step, step: step }
+      end
+    end
+
+    grouped_items
+  end
+
+  grouped_items = group_steps(steps, parallel_groups)
+%>
+
+<% if steps.any? %>
+  <!-- Lifecycle Hooks Banner -->
+  <% if lifecycle_hooks[:before_workflow].to_i > 0 || lifecycle_hooks[:after_workflow].to_i > 0 || lifecycle_hooks[:on_step_error].to_i > 0 %>
+    <div class="flex items-center justify-center gap-4 mb-6 pb-4 border-b border-gray-200 dark:border-gray-700">
+      <% if lifecycle_hooks[:before_workflow].to_i > 0 %>
+        <div class="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-emerald-50 dark:bg-emerald-900/30 border border-emerald-200 dark:border-emerald-800">
+          <svg class="w-3.5 h-3.5 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"/></svg>
+          <span class="text-xs font-medium text-emerald-700 dark:text-emerald-300">before_workflow hook</span>
+        </div>
+      <% end %>
+      <% if lifecycle_hooks[:after_workflow].to_i > 0 %>
+        <div class="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-sky-50 dark:bg-sky-900/30 border border-sky-200 dark:border-sky-800">
+          <svg class="w-3.5 h-3.5 text-sky-600 dark:text-sky-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z" clip-rule="evenodd"/></svg>
+          <span class="text-xs font-medium text-sky-700 dark:text-sky-300">after_workflow hook</span>
+        </div>
+      <% end %>
+      <% if lifecycle_hooks[:on_step_error].to_i > 0 %>
+        <div class="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-rose-50 dark:bg-rose-900/30 border border-rose-200 dark:border-rose-800">
+          <svg class="w-3.5 h-3.5 text-rose-600 dark:text-rose-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
+          <span class="text-xs font-medium text-rose-700 dark:text-rose-300">on_step_error hook</span>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+
+  <!-- Vertical Flow Diagram -->
+  <div class="flex flex-col items-center py-6">
+    <!-- Start Node -->
+    <div class="flex flex-col items-center mb-2">
+      <div class="relative">
+        <div class="absolute inset-0 rounded-full bg-green-400/20 dark:bg-green-500/20 animate-pulse"></div>
+        <div class="relative w-16 h-10 flex items-center justify-center rounded-full bg-gradient-to-br from-green-100 to-green-200 dark:from-green-900/50 dark:to-green-800/50 border-2 border-green-500 dark:border-green-600 shadow-md">
+          <span class="text-sm font-bold text-green-700 dark:text-green-300 uppercase tracking-wide">Start</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Connecting Line from Start -->
+    <div class="w-0.5 h-6 bg-gradient-to-b from-green-400 to-gray-300 dark:from-green-600 dark:to-gray-600"></div>
+
+    <!-- Steps Flow -->
+    <% grouped_items.each_with_index do |item, index| %>
+      <% if item[:type] == :wait %>
+        <!-- Wait Step -->
+        <% step = item[:step] %>
+        <%
+          wait_type = step[:wait_type]
+          case wait_type
+          when :delay
+            border_class = "border-teal-400 dark:border-teal-500"
+            bg_class = "bg-teal-50 dark:bg-teal-900/30"
+            text_class = "text-teal-800 dark:text-teal-200"
+            type_label = "Delay"
+            type_icon = '<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>'
+          when :until
+            border_class = "border-cyan-400 dark:border-cyan-500"
+            bg_class = "bg-cyan-50 dark:bg-cyan-900/30"
+            text_class = "text-cyan-800 dark:text-cyan-200"
+            type_label = "Poll Until"
+            type_icon = '<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>'
+          when :schedule
+            border_class = "border-indigo-400 dark:border-indigo-500"
+            bg_class = "bg-indigo-50 dark:bg-indigo-900/30"
+            text_class = "text-indigo-800 dark:text-indigo-200"
+            type_label = "Scheduled"
+            type_icon = '<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>'
+          when :approval
+            border_class = "border-orange-400 dark:border-orange-500"
+            bg_class = "bg-orange-50 dark:bg-orange-900/30"
+            text_class = "text-orange-800 dark:text-orange-200"
+            type_label = "Approval"
+            type_icon = '<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>'
+          else
+            border_class = "border-gray-400 dark:border-gray-500"
+            bg_class = "bg-gray-50 dark:bg-gray-900/30"
+            text_class = "text-gray-800 dark:text-gray-200"
+            type_label = "Wait"
+            type_icon = '<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>'
+          end
+        %>
+
+        <!-- Wait Step Card -->
+        <div class="w-full max-w-lg group/step">
+          <div class="relative rounded-xl border-2 border-dashed <%= border_class %> <%= bg_class %> shadow-sm hover:shadow-lg hover:scale-[1.01] transition-all duration-200 p-4">
+            <!-- Wait Type Badge -->
+            <div class="flex items-center justify-between mb-3">
+              <div class="flex items-center gap-2">
+                <span class="w-7 h-7 flex items-center justify-center rounded-full <%= bg_class %> border <%= border_class %>">
+                  <%= raw type_icon %>
+                </span>
+                <span class="font-bold <%= text_class %> text-lg uppercase tracking-tight">
+                  <%= step[:ui_label] || step[:name].to_s.titleize %>
+                </span>
+              </div>
+
+              <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium <%= bg_class %> border <%= border_class %> <%= text_class %>">
+                <%= raw type_icon %>
+                <%= type_label %>
+              </span>
+            </div>
+
+            <!-- Wait Details -->
+            <div class="space-y-2 text-sm">
+              <% if step[:duration] %>
+                <div class="flex items-center gap-2 <%= text_class %>">
+                  <svg class="w-4 h-4 opacity-70" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                  <span>Duration: <strong><%= step[:duration].is_a?(Numeric) ? "#{step[:duration]}s" : step[:duration] %></strong></span>
+                </div>
+              <% end %>
+
+              <% if step[:poll_interval] %>
+                <div class="flex items-center gap-2 <%= text_class %>">
+                  <svg class="w-4 h-4 opacity-70" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+                  <span>Poll every: <strong><%= step[:poll_interval].is_a?(Numeric) ? "#{step[:poll_interval]}s" : step[:poll_interval] %></strong></span>
+                </div>
+              <% end %>
+
+              <% if step[:timeout] %>
+                <div class="flex items-center gap-2 <%= text_class %>">
+                  <svg class="w-4 h-4 opacity-70" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
+                  <span>Timeout: <strong><%= step[:timeout].is_a?(Numeric) ? "#{step[:timeout]}s" : step[:timeout] %></strong></span>
+                </div>
+              <% end %>
+            </div>
+
+            <!-- Status Indicators -->
+            <div class="flex flex-wrap gap-2 text-xs mt-3">
+              <% if step[:on_timeout] %>
+                <%
+                  timeout_colors = case step[:on_timeout].to_s
+                  when "continue" then "bg-green-100 dark:bg-green-900/50 text-green-700 dark:text-green-300 border-green-200 dark:border-green-800"
+                  when "fail" then "bg-red-100 dark:bg-red-900/50 text-red-700 dark:text-red-300 border-red-200 dark:border-red-800"
+                  when "skip_next" then "bg-yellow-100 dark:bg-yellow-900/50 text-yellow-700 dark:text-yellow-300 border-yellow-200 dark:border-yellow-800"
+                  when "escalate" then "bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300 border-purple-200 dark:border-purple-800"
+                  else "bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-600"
+                  end
+                %>
+                <span class="inline-flex items-center gap-1 px-2 py-1 rounded-md <%= timeout_colors %> border">
+                  On timeout: <%= step[:on_timeout] %>
+                </span>
+              <% end %>
+
+              <% if step[:notify].present? %>
+                <span class="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 border border-blue-200 dark:border-blue-800">
+                  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
+                  Notify: <%= Array(step[:notify]).join(", ") %>
+                </span>
+              <% end %>
+
+              <% if step[:approvers].present? %>
+                <span class="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-orange-100 dark:bg-orange-900/50 text-orange-700 dark:text-orange-300 border border-orange-200 dark:border-orange-800">
+                  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
+                  <%= Array(step[:approvers]).size %> approver(s)
+                </span>
+              <% end %>
+            </div>
+          </div>
+        </div>
+
+      <% elsif item[:type] == :step %>
+        <% step = item[:step] %>
+        <%
+          # Determine step type and styling
+          if step[:workflow]
+            step_type = :workflow
+            border_class = "border-emerald-400 dark:border-emerald-500"
+            bg_class = "bg-emerald-50 dark:bg-emerald-900/30"
+            text_class = "text-emerald-800 dark:text-emerald-200"
+            type_label = "Sub-workflow"
+            type_icon = '<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path d="M10 3.5a1.5 1.5 0 013 0V4a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-.5a1.5 1.5 0 000 3h.5a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-.5a1.5 1.5 0 00-3 0v.5a1 1 0 01-1 1H6a1 1 0 01-1-1v-3a1 1 0 00-1-1h-.5a1.5 1.5 0 010-3H4a1 1 0 001-1V6a1 1 0 011-1h3a1 1 0 001-1v-.5z"/></svg>'
+          elsif step[:iteration]
+            step_type = :iteration
+            border_class = "border-blue-400 dark:border-blue-500"
+            bg_class = "bg-blue-50 dark:bg-blue-900/30"
+            text_class = "text-blue-800 dark:text-blue-200"
+            type_label = "Iteration"
+            type_icon = '<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>'
+          elsif step[:routing]
+            step_type = :routing
+            border_class = "border-amber-400 dark:border-amber-500"
+            bg_class = "bg-amber-50 dark:bg-amber-900/30"
+            text_class = "text-amber-800 dark:text-amber-200"
+            type_label = "Routing"
+            type_icon = '<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>'
+          elsif step[:custom_block]
+            step_type = :block
+            border_class = "border-violet-400 dark:border-violet-500"
+            bg_class = "bg-violet-50 dark:bg-violet-900/30"
+            text_class = "text-violet-800 dark:text-violet-200"
+            type_label = "Block"
+            type_icon = '<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>'
+          else
+            step_type = :sequential
+            border_class = "border-slate-300 dark:border-slate-600"
+            bg_class = "bg-white dark:bg-gray-800"
+            text_class = "text-slate-800 dark:text-slate-200"
+            type_label = nil
+            type_icon = nil
+          end
+        %>
+
+        <!-- Step Card -->
+        <div class="w-full max-w-lg group/step">
+          <div class="relative rounded-xl border-2 <%= border_class %> <%= bg_class %> <%= step[:optional] ? 'border-dashed' : '' %> shadow-sm hover:shadow-lg hover:scale-[1.01] transition-all duration-200 p-4">
+            <!-- Step Number & Type Badge -->
+            <div class="flex items-center justify-between mb-3">
+              <div class="flex items-center gap-2">
+                <span class="w-7 h-7 flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-700 text-sm font-bold text-gray-600 dark:text-gray-300">
+                  <%= index + 1 %>
+                </span>
+                <span class="font-bold <%= text_class %> text-lg uppercase tracking-tight">
+                  <%= step[:name].to_s.titleize %>
+                </span>
+              </div>
+
+              <% if type_label %>
+                <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium <%= bg_class %> border <%= border_class %> <%= text_class %>">
+                  <%= raw type_icon %>
+                  <%= type_label %>
+                </span>
+              <% end %>
+            </div>
+
+            <!-- Agent/Workflow Name -->
+            <% if step[:agent].present? %>
+              <div class="flex items-center gap-2 mb-3 text-sm text-gray-600 dark:text-gray-400">
+                <% if step[:workflow] %>
+                  <svg class="w-4 h-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 3.5a1.5 1.5 0 013 0V4a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-.5a1.5 1.5 0 000 3h.5a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-.5a1.5 1.5 0 00-3 0v.5a1 1 0 01-1 1H6a1 1 0 01-1-1v-3a1 1 0 00-1-1h-.5a1.5 1.5 0 010-3H4a1 1 0 001-1V6a1 1 0 011-1h3a1 1 0 001-1v-.5z"/></svg>
+                <% else %>
+                  <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
+                <% end %>
+                <code class="font-mono bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded"><%= step[:agent] %></code>
+              </div>
+            <% elsif step[:custom_block] %>
+              <div class="flex items-center gap-2 mb-3 text-sm text-violet-600 dark:text-violet-400">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
+                <span class="italic">Custom Ruby block</span>
+              </div>
+            <% end %>
+
+            <!-- Input/Output Data Flow -->
+            <% if step[:pick_fields] || step[:has_input_mapper] %>
+              <div class="mb-3 p-2 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 text-xs">
+                <div class="flex items-center gap-2">
+                  <svg class="w-4 h-4 text-green-500 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
+                  <span class="font-medium text-gray-600 dark:text-gray-400">Input:</span>
+                  <% if step[:pick_fields] %>
+                    <code class="font-mono text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 px-1.5 py-0.5 rounded">
+                      <%= step[:pick_fields].join(', ') %>
+                    </code>
+                    <% if step[:pick_from] %>
+                      <span class="text-gray-400 dark:text-gray-500">from</span>
+                      <span class="font-medium text-indigo-600 dark:text-indigo-400">:<%= step[:pick_from] %></span>
+                    <% end %>
+                  <% else %>
+                    <span class="text-gray-500 dark:text-gray-400 italic">custom mapping (lambda)</span>
+                  <% end %>
+                </div>
+              </div>
+            <% end %>
+
+            <!-- Description -->
+            <% if step[:description].present? %>
+              <p class="text-sm text-gray-600 dark:text-gray-400 mb-3 leading-relaxed">
+                <%= step[:description] %>
+              </p>
+            <% end %>
+
+            <!-- Sub-workflow Preview (expandable) -->
+            <% if step[:workflow] && step[:sub_workflow] %>
+              <div class="mb-3" x-data="{ expanded: false }">
+                <div class="p-3 rounded-lg bg-emerald-100/50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-800 border-dashed">
+                  <!-- Header with expand button -->
+                  <div class="flex items-center justify-between mb-2">
+                    <div class="flex items-center gap-1.5 text-sm font-medium text-emerald-700 dark:text-emerald-300">
+                      <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M10 3.5a1.5 1.5 0 013 0V4a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-.5a1.5 1.5 0 000 3h.5a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-.5a1.5 1.5 0 00-3 0v.5a1 1 0 01-1 1H6a1 1 0 01-1-1v-3a1 1 0 00-1-1h-.5a1.5 1.5 0 010-3H4a1 1 0 001-1V6a1 1 0 011-1h3a1 1 0 001-1v-.5z"/></svg>
+                      Nested Workflow (<%= step[:sub_workflow][:steps_count] %> steps)
+                    </div>
+                    <button @click="expanded = !expanded" class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-300 hover:bg-emerald-300 dark:hover:bg-emerald-700 transition-colors cursor-pointer">
+                      <span x-text="expanded ? 'Collapse' : 'Expand'">Expand</span>
+                      <svg class="w-3 h-3 transition-transform" :class="expanded ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+                    </button>
+                  </div>
+
+                  <!-- Budget inheritance indicators -->
+                  <div class="flex flex-wrap gap-2 text-xs mb-2">
+                    <% if step[:sub_workflow][:timeout] %>
+                      <span class="inline-flex items-center gap-1 px-2 py-1 rounded bg-emerald-200/70 dark:bg-emerald-800/50 text-emerald-700 dark:text-emerald-300">
+                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                        Inherits remaining timeout
+                      </span>
+                    <% end %>
+                    <% if step[:sub_workflow][:max_cost] %>
+                      <span class="inline-flex items-center gap-1 px-2 py-1 rounded bg-emerald-200/70 dark:bg-emerald-800/50 text-emerald-700 dark:text-emerald-300">
+                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"/></svg>
+                        Inherits remaining budget
+                      </span>
+                    <% end %>
+                    <% if step[:sub_workflow][:max_recursion_depth] %>
+                      <span class="inline-flex items-center gap-1 px-2 py-1 rounded bg-emerald-200/70 dark:bg-emerald-800/50 text-emerald-700 dark:text-emerald-300">
+                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+                        Max depth: <%= step[:sub_workflow][:max_recursion_depth] %>
+                      </span>
+                    <% end %>
+                  </div>
+
+                  <!-- Collapsed: Mini horizontal flow preview -->
+                  <div x-show="!expanded" class="flex items-center gap-1 overflow-x-auto py-2">
+                    <% step[:sub_workflow][:steps_preview]&.each_with_index do |sub_step, sub_idx| %>
+                      <%
+                        sub_border = if sub_step[:routing]
+                          "border-amber-300 dark:border-amber-600"
+                        elsif sub_step[:workflow]
+                          "border-emerald-300 dark:border-emerald-600"
+                        elsif sub_step[:iteration]
+                          "border-blue-300 dark:border-blue-600"
+                        else
+                          "border-gray-300 dark:border-gray-600"
+                        end
+                      %>
+                      <% unless sub_idx == 0 %>
+                        <svg class="w-3 h-3 text-gray-400 dark:text-gray-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
+                      <% end %>
+                      <div class="flex-shrink-0 px-2 py-1 text-[10px] rounded border <%= sub_border %> bg-white dark:bg-gray-800">
+                        <%= sub_step[:name].to_s.titleize.truncate(12) %>
+                      </div>
+                    <% end %>
+                  </div>
+
+                  <!-- Expanded: Full step list -->
+                  <div x-show="expanded" x-collapse class="space-y-1.5 pt-2">
+                    <% step[:sub_workflow][:steps_preview]&.each_with_index do |sub_step, sub_idx| %>
+                      <%
+                        sub_bg = if sub_step[:routing]
+                          "bg-amber-50 dark:bg-amber-900/30 border-amber-200 dark:border-amber-700"
+                        elsif sub_step[:workflow]
+                          "bg-emerald-50 dark:bg-emerald-900/30 border-emerald-200 dark:border-emerald-700"
+                        elsif sub_step[:iteration]
+                          "bg-blue-50 dark:bg-blue-900/30 border-blue-200 dark:border-blue-700"
+                        elsif sub_step[:parallel]
+                          "bg-purple-50 dark:bg-purple-900/30 border-purple-200 dark:border-purple-700"
+                        else
+                          "bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700"
+                        end
+                      %>
+                      <div class="flex items-center gap-2 p-2 rounded-lg border <%= sub_bg %>">
+                        <span class="w-5 h-5 flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700 text-[10px] font-bold text-gray-600 dark:text-gray-400">
+                          <%= sub_idx + 1 %>
+                        </span>
+                        <span class="text-xs font-medium text-gray-700 dark:text-gray-300">
+                          <%= sub_step[:name].to_s.titleize %>
+                        </span>
+                        <% if sub_step[:agent] %>
+                          <span class="inline-flex items-center gap-1 text-[10px] text-gray-500 dark:text-gray-400">
+                            <svg class="w-2.5 h-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
+                            <%= sub_step[:agent] %>
+                          </span>
+                        <% end %>
+                        <% if sub_step[:routing] %>
+                          <span class="text-[10px] px-1.5 py-0.5 rounded bg-amber-100 dark:bg-amber-800 text-amber-600 dark:text-amber-300">routing</span>
+                        <% end %>
+                        <% if sub_step[:iteration] %>
+                          <span class="text-[10px] px-1.5 py-0.5 rounded bg-blue-100 dark:bg-blue-800 text-blue-600 dark:text-blue-300">iteration</span>
+                        <% end %>
+                        <% if sub_step[:workflow] %>
+                          <span class="text-[10px] px-1.5 py-0.5 rounded bg-emerald-100 dark:bg-emerald-800 text-emerald-600 dark:text-emerald-300">workflow</span>
+                        <% end %>
+                        <% if sub_step[:parallel] %>
+                          <span class="text-[10px] px-1.5 py-0.5 rounded bg-purple-100 dark:bg-purple-800 text-purple-600 dark:text-purple-300">parallel</span>
+                        <% end %>
+                      </div>
+                    <% end %>
+                  </div>
+                </div>
+              </div>
+            <% end %>
+
+            <!-- Iteration Details -->
+            <% if step[:iteration] %>
+              <div class="mb-3 p-3 rounded-lg bg-blue-100/50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800">
+                <div class="flex items-center gap-2 text-sm font-medium text-blue-700 dark:text-blue-300 mb-2">
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+                  FOR EACH item in collection
+                </div>
+
+                <!-- Fan-out visualization -->
+                <div class="flex items-center justify-center py-3 mb-3 border-b border-blue-200 dark:border-blue-700">
+                  <div class="flex flex-col items-center">
+                    <div class="text-xs text-blue-500 dark:text-blue-400 mb-1">Collection</div>
+                    <div class="w-12 h-6 rounded bg-blue-200 dark:bg-blue-800 flex items-center justify-center text-xs text-blue-700 dark:text-blue-300">[...]</div>
+                  </div>
+                  <svg class="w-4 h-4 mx-3 text-blue-400 dark:text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
+                  <div class="flex flex-col items-center">
+                    <!-- Show concurrent or sequential processing -->
+                    <% if step[:iteration_concurrency] && step[:iteration_concurrency] > 1 %>
+                      <div class="text-xs text-blue-500 dark:text-blue-400 mb-1">Process <%= step[:iteration_concurrency] %> at a time</div>
+                      <div class="flex gap-1">
+                        <% step[:iteration_concurrency].times do |i| %>
+                          <div class="w-6 h-6 rounded bg-blue-300 dark:bg-blue-700 flex items-center justify-center text-[10px] text-blue-800 dark:text-blue-200"><%= i + 1 %></div>
+                        <% end %>
+                        <div class="w-6 h-6 rounded border-2 border-dashed border-blue-300 dark:border-blue-600 flex items-center justify-center text-[10px] text-blue-400 dark:text-blue-500">...</div>
+                      </div>
+                    <% else %>
+                      <div class="text-xs text-blue-500 dark:text-blue-400 mb-1">Process one at a time</div>
+                      <div class="flex items-center gap-1">
+                        <div class="w-6 h-6 rounded bg-blue-300 dark:bg-blue-700 flex items-center justify-center text-[10px] text-blue-800 dark:text-blue-200">1</div>
+                        <svg class="w-3 h-3 text-blue-400 dark:text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
+                        <div class="w-6 h-6 rounded bg-blue-200 dark:bg-blue-800 flex items-center justify-center text-[10px] text-blue-600 dark:text-blue-400">2</div>
+                        <svg class="w-3 h-3 text-blue-400 dark:text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
+                        <div class="w-6 h-6 rounded border-2 border-dashed border-blue-300 dark:border-blue-600 flex items-center justify-center text-[10px] text-blue-400 dark:text-blue-500">N</div>
+                      </div>
+                    <% end %>
+                  </div>
+                  <svg class="w-4 h-4 mx-3 text-blue-400 dark:text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
+                  <div class="flex flex-col items-center">
+                    <div class="text-xs text-blue-500 dark:text-blue-400 mb-1">Results</div>
+                    <div class="w-12 h-6 rounded bg-blue-200 dark:bg-blue-800 flex items-center justify-center text-xs text-blue-700 dark:text-blue-300">[...]</div>
+                  </div>
+                </div>
+
+                <!-- Iteration settings -->
+                <div class="flex flex-wrap gap-2 text-xs">
+                  <% if step[:iteration_concurrency] %>
+                    <span class="inline-flex items-center gap-1 px-2 py-1 rounded bg-blue-200 dark:bg-blue-800 text-blue-700 dark:text-blue-300">
+                      <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"/></svg>
+                      <%= step[:iteration_concurrency] %> concurrent
+                    </span>
+                  <% else %>
+                    <span class="px-2 py-1 rounded bg-blue-200/50 dark:bg-blue-800/50 text-blue-600 dark:text-blue-400">
+                      Sequential (1 at a time)
+                    </span>
+                  <% end %>
+                  <% if step[:continue_on_error] %>
+                    <span class="inline-flex items-center gap-1 px-2 py-1 rounded bg-green-100 dark:bg-green-900/50 text-green-700 dark:text-green-300">
+                      <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
+                      continue_on_error (collects all results)
+                    </span>
+                  <% elsif step[:iteration_fail_fast] %>
+                    <span class="inline-flex items-center gap-1 px-2 py-1 rounded bg-red-100 dark:bg-red-900/50 text-red-700 dark:text-red-300">
+                      <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
+                      fail_fast (stops on first error)
+                    </span>
+                  <% else %>
+                    <span class="px-2 py-1 rounded bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
+                      Default error handling
+                    </span>
+                  <% end %>
+                </div>
+              </div>
+            <% end %>
+
+            <!-- Routing Details (Decision Tree) -->
+            <% if step[:routing] && step[:routes].present? %>
+              <div class="mb-3 p-3 rounded-lg bg-amber-100/50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800">
+                <!-- Decision diamond header -->
+                <div class="flex items-center justify-center mb-3">
+                  <div class="flex items-center gap-2">
+                    <div class="w-8 h-8 bg-amber-400 dark:bg-amber-500 rotate-45 flex items-center justify-center shadow-sm">
+                      <span class="text-white text-sm font-bold -rotate-45">?</span>
+                    </div>
+                    <span class="text-sm font-medium text-amber-700 dark:text-amber-300">
+                      DECIDE: route based on value
+                    </span>
+                  </div>
+                </div>
+
+                <!-- Branching visualization -->
+                <div class="relative">
+                  <!-- Branch lines container -->
+                  <div class="flex flex-wrap justify-center gap-3">
+                    <% step[:routes].each_with_index do |route, route_idx| %>
+                      <%
+                        is_default = route[:default]
+                        card_bg = is_default ? "bg-gray-100 dark:bg-gray-800 border-gray-300 dark:border-gray-600" : "bg-white dark:bg-gray-800 border-amber-300 dark:border-amber-600"
+                        label_color = is_default ? "text-gray-600 dark:text-gray-400" : "text-amber-700 dark:text-amber-300"
+                      %>
+                      <div class="flex flex-col items-center">
+                        <!-- Branch line -->
+                        <div class="w-0.5 h-4 bg-amber-300 dark:bg-amber-600"></div>
+                        <!-- Route value pill -->
+                        <div class="px-2 py-0.5 rounded-full text-xs font-medium <%= is_default ? 'bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400' : 'bg-amber-200 dark:bg-amber-800 text-amber-700 dark:text-amber-300' %> mb-1">
+                          <% if is_default %>
+                            else
+                          <% else %>
+                            :<%= route[:name] %>
+                          <% end %>
+                        </div>
+                        <!-- Arrow -->
+                        <svg class="w-3 h-3 text-amber-400 dark:text-amber-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
+                        <!-- Route card -->
+                        <div class="p-2 rounded-lg border-2 <%= card_bg %> text-center min-w-[100px]">
+                          <div class="text-xs font-semibold <%= label_color %>">
+                            <%= route[:agent]&.gsub(/Agent$/, '')&.gsub(/Workflow$/, '') || '?' %>
+                          </div>
+                          <% if route[:timeout] %>
+                            <div class="inline-flex items-center gap-1 text-[10px] text-blue-500 dark:text-blue-400 mt-1">
+                              <svg class="w-2.5 h-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                              <%= route[:timeout] %>s
+                            </div>
+                          <% end %>
+                          <% if route[:fallback] %>
+                            <div class="inline-flex items-center gap-1 text-[10px] text-yellow-600 dark:text-yellow-400 mt-1">
+                              <svg class="w-2.5 h-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/></svg>
+                              <%= route[:fallback].gsub(/Agent$/, '') %>
+                            </div>
+                          <% end %>
+                          <% if route[:if_condition] %>
+                            <div class="inline-flex items-center gap-1 text-[10px] text-cyan-600 dark:text-cyan-400 mt-1">
+                              <svg class="w-2.5 h-2.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"/></svg>
+                              conditional
+                            </div>
+                          <% end %>
+                        </div>
+                      </div>
+                    <% end %>
+                  </div>
+                </div>
+
+                <!-- Routes summary count -->
+                <div class="text-center mt-3 pt-2 border-t border-amber-200 dark:border-amber-700">
+                  <span class="text-xs text-amber-600 dark:text-amber-400">
+                    <%= step[:routes].size %> possible routes
+                    <% default_route = step[:routes].find { |r| r[:default] } %>
+                    <% if default_route %>
+                      (with default fallback)
+                    <% end %>
+                  </span>
+                </div>
+              </div>
+            <% end %>
+
+            <!-- Status Indicators (spelled out) -->
+            <div class="flex flex-wrap gap-2 text-xs">
+              <% if step[:retry_config] && step[:retry_config][:max].to_i > 0 %>
+                <span class="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-orange-100 dark:bg-orange-900/50 text-orange-700 dark:text-orange-300 border border-orange-200 dark:border-orange-800">
+                  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+                  Retry <%= step[:retry_config][:max] %>&times; on failure
+                  <% if step[:retry_config][:backoff] && step[:retry_config][:backoff] != :none %>
+                    (<%= step[:retry_config][:backoff] %>)
+                  <% end %>
+                </span>
+              <% end %>
+
+              <% if step[:timeout] %>
+                <span class="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 border border-blue-200 dark:border-blue-800">
+                  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                  Timeout: <%= step[:timeout] %>s
+                </span>
+              <% end %>
+
+              <% if step[:if_condition] %>
+                <span class="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-cyan-100 dark:bg-cyan-900/50 text-cyan-700 dark:text-cyan-300 border border-cyan-200 dark:border-cyan-800">
+                  <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"/></svg>
+                  if: <%= step[:if_condition] %>
+                </span>
+              <% end %>
+
+              <% if step[:unless_condition] %>
+                <span class="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-pink-100 dark:bg-pink-900/50 text-pink-700 dark:text-pink-300 border border-pink-200 dark:border-pink-800">
+                  <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"/></svg>
+                  unless: <%= step[:unless_condition] %>
+                </span>
+              <% end %>
+
+              <% if step[:optional] %>
+                <span class="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 border border-gray-200 dark:border-gray-600">
+                  (optional)
+                </span>
+              <% end %>
+
+              <% if step[:fallbacks]&.any? %>
+                <span class="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-yellow-100 dark:bg-yellow-900/50 text-yellow-700 dark:text-yellow-300 border border-yellow-200 dark:border-yellow-800">
+                  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/></svg>
+                  Fallback: <%= step[:fallbacks].map { |f| f.gsub(/Agent$/, '') }.join(' → ') %>
+                </span>
+              <% end %>
+
+              <% if step[:default_value] %>
+                <span class="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 border border-gray-200 dark:border-gray-600">
+                  default: <%= step[:default_value].inspect.truncate(20) %>
+                </span>
+              <% end %>
+            </div>
+          </div>
+        </div>
+
+      <% else %>
+        <!-- Parallel Group -->
+        <div class="w-full max-w-2xl" x-data="{ expanded: true }">
+          <!-- Fork visualization -->
+          <div class="flex justify-center mb-2">
+            <div class="flex items-end gap-1">
+              <div class="w-8 h-4 border-l-2 border-b-2 border-purple-400 dark:border-purple-500 rounded-bl"></div>
+              <div class="w-0.5 h-6 bg-purple-400 dark:bg-purple-500"></div>
+              <div class="w-8 h-4 border-r-2 border-b-2 border-purple-400 dark:border-purple-500 rounded-br"></div>
+            </div>
+          </div>
+
+          <div class="relative rounded-2xl border-2 border-purple-400 dark:border-purple-500 bg-purple-50/80 dark:bg-purple-900/20 shadow-md p-4">
+            <!-- Parallel Group Header -->
+            <div class="flex items-center justify-between mb-4">
+              <div class="flex items-center gap-2">
+                <span class="w-7 h-7 flex items-center justify-center rounded-full bg-purple-500 dark:bg-purple-600 text-sm font-bold text-white">
+                  <%= index + 1 %>
+                </span>
+                <span class="font-bold text-purple-800 dark:text-purple-200 text-lg uppercase tracking-tight">
+                  <%= item[:group]&.dig(:name) || 'Parallel Group' %>
+                </span>
+                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-purple-200 dark:bg-purple-800 text-purple-700 dark:text-purple-300">
+                  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
+                  <%= item[:steps].size %> concurrent
+                </span>
+              </div>
+
+              <button @click="expanded = !expanded" class="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg text-xs font-medium bg-purple-100 dark:bg-purple-800 text-purple-700 dark:text-purple-300 hover:bg-purple-200 dark:hover:bg-purple-700 transition-colors cursor-pointer border border-purple-300 dark:border-purple-600">
+                <span x-text="expanded ? 'Collapse' : 'Expand'">Collapse</span>
+                <svg class="w-3 h-3 transition-transform" :class="expanded ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+                </svg>
+              </button>
+            </div>
+
+            <!-- Expanded: Show all parallel steps with visual fork -->
+            <div x-show="expanded" x-collapse>
+              <!-- Steps grid -->
+              <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-<%= [item[:steps].size, 3].min %> gap-4 mb-4">
+                <% item[:steps].each_with_index do |step, step_idx| %>
+                  <div class="relative">
+                    <!-- Connecting line from fork -->
+                    <div class="absolute -top-4 left-1/2 w-0.5 h-4 bg-purple-300 dark:bg-purple-600 -translate-x-1/2"></div>
+
+                    <div class="rounded-lg border-2 border-purple-300 dark:border-purple-600 bg-white dark:bg-gray-800 p-3 <%= step[:optional] ? 'border-dashed' : '' %> h-full">
+                      <div class="font-semibold text-purple-700 dark:text-purple-300 text-sm mb-1">
+                        <%= step[:name].to_s.titleize %>
+                      </div>
+                      <% if step[:agent].present? %>
+                        <code class="text-xs font-mono text-gray-500 dark:text-gray-400">
+                          <%= step[:agent].to_s.gsub(/Agent$/, '') %>
+                        </code>
+                      <% elsif step[:custom_block] %>
+                        <span class="text-xs text-violet-500 dark:text-violet-400 italic">(block)</span>
+                      <% end %>
+
+                      <!-- Mini indicators -->
+                      <div class="flex flex-wrap gap-1 mt-2">
+                        <% if step[:retry_config] && step[:retry_config][:max].to_i > 0 %>
+                          <span class="inline-flex items-center gap-0.5 text-[10px] px-1.5 py-0.5 rounded bg-orange-100 dark:bg-orange-900/50 text-orange-600 dark:text-orange-300">
+                            <svg class="w-2.5 h-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+                            <%= step[:retry_config][:max] %>&times;
+                          </span>
+                        <% end %>
+                        <% if step[:timeout] %>
+                          <span class="inline-flex items-center gap-0.5 text-[10px] px-1.5 py-0.5 rounded bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-300">
+                            <svg class="w-2.5 h-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                            <%= step[:timeout] %>s
+                          </span>
+                        <% end %>
+                        <% if step[:if_condition] || step[:unless_condition] %>
+                          <span class="inline-flex items-center gap-0.5 text-[10px] px-1.5 py-0.5 rounded bg-cyan-100 dark:bg-cyan-900/50 text-cyan-600 dark:text-cyan-300">
+                            <svg class="w-2.5 h-2.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"/></svg>
+                            conditional
+                          </span>
+                        <% end %>
+                        <% if step[:optional] %>
+                          <span class="text-[10px] px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400">
+                            optional
+                          </span>
+                        <% end %>
+                      </div>
+                    </div>
+
+                    <!-- Connecting line to join -->
+                    <div class="absolute -bottom-4 left-1/2 w-0.5 h-4 bg-purple-300 dark:bg-purple-600 -translate-x-1/2"></div>
+                  </div>
+                <% end %>
+              </div>
+
+              <!-- WAIT FOR ALL indicator -->
+              <div class="flex items-center justify-center py-2 border-t border-purple-200 dark:border-purple-700">
+                <span class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-purple-200 dark:bg-purple-800 text-sm font-semibold text-purple-700 dark:text-purple-300 uppercase tracking-wide">
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                  Wait for all
+                </span>
+              </div>
+            </div>
+
+            <!-- Collapsed: Just show count -->
+            <div x-show="!expanded" class="text-center py-4">
+              <div class="flex items-center justify-center gap-2 text-purple-600 dark:text-purple-400">
+                <% item[:steps].each_with_index do |step, step_idx| %>
+                  <div class="w-8 h-8 rounded-lg bg-purple-100 dark:bg-purple-800 flex items-center justify-center text-xs font-medium text-purple-600 dark:text-purple-300">
+                    <%= step_idx + 1 %>
+                  </div>
+                  <% unless step_idx == item[:steps].size - 1 %>
+                    <span class="text-purple-300 dark:text-purple-600">|</span>
+                  <% end %>
+                <% end %>
+              </div>
+              <p class="text-xs text-purple-500 dark:text-purple-400 mt-2">Click to expand <%= item[:steps].size %> parallel steps</p>
+            </div>
+
+            <!-- Group options -->
+            <% if item[:group] && (item[:group][:fail_fast] || item[:group][:concurrency] || item[:group][:timeout]) %>
+              <div class="flex items-center justify-center gap-3 mt-3 pt-3 border-t border-purple-200 dark:border-purple-700">
+                <% if item[:group][:fail_fast] %>
+                  <span class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded bg-red-100 dark:bg-red-900/50 text-red-700 dark:text-red-300">
+                    <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
+                    fail_fast (stop on first error)
+                  </span>
+                <% end %>
+                <% if item[:group][:timeout] %>
+                  <span class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded bg-purple-200 dark:bg-purple-800 text-purple-700 dark:text-purple-300">
+                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                    Timeout: <%= item[:group][:timeout] %>s
+                  </span>
+                <% end %>
+                <% if item[:group][:concurrency] %>
+                  <span class="text-xs px-2 py-1 rounded bg-purple-200 dark:bg-purple-800 text-purple-700 dark:text-purple-300">
+                    Max concurrency: <%= item[:group][:concurrency] %>
+                  </span>
+                <% end %>
+              </div>
+            <% end %>
+          </div>
+
+          <!-- Join visualization -->
+          <div class="flex justify-center mt-2">
+            <div class="flex items-start gap-1">
+              <div class="w-8 h-4 border-l-2 border-t-2 border-purple-400 dark:border-purple-500 rounded-tl"></div>
+              <div class="w-0.5 h-6 bg-purple-400 dark:bg-purple-500"></div>
+              <div class="w-8 h-4 border-r-2 border-t-2 border-purple-400 dark:border-purple-500 rounded-tr"></div>
+            </div>
+          </div>
+        </div>
+      <% end %>
+
+      <!-- Connecting Line to Next Step -->
+      <% unless index == grouped_items.length - 1 %>
+        <div class="flex flex-col items-center">
+          <div class="w-0.5 h-4 bg-gray-300 dark:bg-gray-600"></div>
+          <svg class="w-4 h-4 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
+          <div class="w-0.5 h-4 bg-gray-300 dark:bg-gray-600"></div>
+        </div>
+      <% end %>
+    <% end %>
+
+    <!-- Connecting Line to End -->
+    <div class="w-0.5 h-6 bg-gradient-to-b from-gray-300 to-red-400 dark:from-gray-600 dark:to-red-600"></div>
+
+    <!-- End Node -->
+    <div class="flex flex-col items-center mt-2">
+      <div class="relative">
+        <div class="relative w-16 h-10 flex items-center justify-center rounded-full bg-gradient-to-br from-red-100 to-red-200 dark:from-red-900/50 dark:to-red-800/50 border-2 border-red-500 dark:border-red-600 shadow-md">
+          <span class="text-sm font-bold text-red-700 dark:text-red-300 uppercase tracking-wide">End</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Legend -->
+  <div class="border-t border-gray-200 dark:border-gray-700 pt-4 mt-4">
+    <div class="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-xs text-gray-500 dark:text-gray-400">
+      <!-- Step Types -->
+      <div class="flex items-center gap-1.5">
+        <div class="w-4 h-4 rounded border-2 border-slate-300 dark:border-slate-600 bg-white dark:bg-gray-800"></div>
+        <span>Sequential</span>
+      </div>
+      <% if steps.any? { |s| s[:workflow] } %>
+        <div class="flex items-center gap-1.5">
+          <div class="w-4 h-4 rounded border-2 border-emerald-400 dark:border-emerald-500 bg-emerald-50 dark:bg-emerald-900/30"></div>
+          <span>Sub-workflow</span>
+        </div>
+      <% end %>
+      <% if steps.any? { |s| s[:iteration] } %>
+        <div class="flex items-center gap-1.5">
+          <div class="w-4 h-4 rounded border-2 border-blue-400 dark:border-blue-500 bg-blue-50 dark:bg-blue-900/30"></div>
+          <span>Iteration</span>
+        </div>
+      <% end %>
+      <% if parallel_groups.any? %>
+        <div class="flex items-center gap-1.5">
+          <div class="w-4 h-4 rounded border-2 border-dashed border-purple-400 dark:border-purple-500 bg-purple-50 dark:bg-purple-900/30"></div>
+          <span>Parallel</span>
+        </div>
+      <% end %>
+      <% if steps.any? { |s| s[:routing] } %>
+        <div class="flex items-center gap-1.5">
+          <div class="w-4 h-4 rounded border-2 border-amber-400 dark:border-amber-500 bg-amber-50 dark:bg-amber-900/30"></div>
+          <span>Routing</span>
+        </div>
+      <% end %>
+      <% if steps.any? { |s| s[:custom_block] } %>
+        <div class="flex items-center gap-1.5">
+          <div class="w-4 h-4 rounded border-2 border-violet-400 dark:border-violet-500 bg-violet-50 dark:bg-violet-900/30"></div>
+          <span>Block</span>
+        </div>
+      <% end %>
+      <% if steps.any? { |s| s[:type] == :wait && s[:wait_type] == :delay } %>
+        <div class="flex items-center gap-1.5">
+          <div class="w-4 h-4 rounded border-2 border-dashed border-teal-400 dark:border-teal-500 bg-teal-50 dark:bg-teal-900/30"></div>
+          <span>Delay</span>
+        </div>
+      <% end %>
+      <% if steps.any? { |s| s[:type] == :wait && s[:wait_type] == :until } %>
+        <div class="flex items-center gap-1.5">
+          <div class="w-4 h-4 rounded border-2 border-dashed border-cyan-400 dark:border-cyan-500 bg-cyan-50 dark:bg-cyan-900/30"></div>
+          <span>Poll Until</span>
+        </div>
+      <% end %>
+      <% if steps.any? { |s| s[:type] == :wait && s[:wait_type] == :schedule } %>
+        <div class="flex items-center gap-1.5">
+          <div class="w-4 h-4 rounded border-2 border-dashed border-indigo-400 dark:border-indigo-500 bg-indigo-50 dark:bg-indigo-900/30"></div>
+          <span>Scheduled</span>
+        </div>
+      <% end %>
+      <% if steps.any? { |s| s[:type] == :wait && s[:wait_type] == :approval } %>
+        <div class="flex items-center gap-1.5">
+          <div class="w-4 h-4 rounded border-2 border-dashed border-orange-400 dark:border-orange-500 bg-orange-50 dark:bg-orange-900/30"></div>
+          <span>Approval</span>
+        </div>
+      <% end %>
+      <% if steps.any? { |s| s[:optional] } %>
+        <div class="flex items-center gap-1.5">
+          <div class="w-4 h-4 rounded border-2 border-dashed border-gray-400 dark:border-gray-500 bg-gray-50 dark:bg-gray-800"></div>
+          <span>Optional</span>
+        </div>
+      <% end %>
+    </div>
+  </div>
+
+  <!-- Input Schema (if defined) -->
+  <% if input_schema_fields.present? %>
+    <div class="border-t border-gray-200 dark:border-gray-700 pt-4 mt-4">
+      <h4 class="flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider mb-3">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
+        Input Schema
+      </h4>
+
+      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
+        <% input_schema_fields.each do |name, field| %>
+          <div class="flex items-start gap-2 py-2 px-3 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700">
+            <span class="w-2 h-2 rounded-full mt-1.5 flex-shrink-0 <%= field[:required] ? 'bg-red-400' : 'bg-gray-300 dark:bg-gray-600' %>"></span>
+            <div class="flex-1 min-w-0">
+              <div class="flex items-center gap-1.5">
+                <span class="font-medium text-gray-700 dark:text-gray-300 text-sm">
+                  <%= name %>
+                </span>
+                <span class="text-[10px] text-gray-400 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded">
+                  <%= field[:type] %>
+                </span>
+              </div>
+              <% if field[:default].present? || field[:default] == false %>
+                <span class="text-[10px] text-gray-500 dark:text-gray-400 block mt-0.5">
+                  default: <code class="bg-gray-100 dark:bg-gray-800 px-1 rounded"><%= field[:default].inspect %></code>
+                </span>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+<% else %>
+  <div class="py-12 text-center">
+    <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
+      <svg class="w-8 h-8 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"/>
+      </svg>
+    </div>
+    <p class="text-gray-500 dark:text-gray-400 text-lg">No workflow structure available</p>
+    <p class="text-gray-400 dark:text-gray-500 text-sm mt-1">This workflow has no steps defined</p>
+  </div>
+<% end %>