meta_workflows 0.7.0

data/app/views/meta_workflows/_response_form.html.erb

@@ -0,0 +1,36 @@
+<%= turbo_frame_tag target_frame_id(record, form: true) do %>
+  <% if local_assigns[:response_enabled] %>
+    <div>
+      <%= form_with url: meta_workflows.human_path(workflow_execution_id), method: :patch do |form| %>
+        <%= form.hidden_field :chat_id, value: chat_id %>
+        <fieldset>
+          <div class="flex flex-col gap-5">
+            <div class="flex gap-2">
+              <%= form.text_area :message, rows: 3, placeholder: random_chat_placeholder, disabled: local_assigns[:responding], class: "flex-1" %>
+
+              <% if local_assigns[:responding] %>
+                <button type="button" class="sm-btn sm-btn-primary self-start" disabled>
+                  <i class="fa-light fa-spinner fa-spin mr-1"></i> Generating...
+                </button>
+              <% else %>
+                <%= form.button type: "submit", class: "sm-btn sm-btn-outline" do %>
+                  <i class="fa-light fa-paper-plane"></i>
+                <% end %>
+              <% end %>
+            </div>
+
+            <hr/>
+
+            <% unless local_assigns[:responding] %>
+              <div class="flex justify-end">
+                <%= form.button type: "submit", name: "advance", value: "true", class: "sm-btn sm-btn-primary sm-btn-large" do %>
+                  <i class="fa-light fa-arrow-right"></i> Next
+                <% end %>
+              </div>
+            <% end %>
+          </div>
+        </fieldset>
+      <% end %>
+    </div>
+  <% end %>
+<% end %> 

data/app/views/meta_workflows/debug/executions.html.erb

@@ -0,0 +1,187 @@
+<div class="bg-white shadow rounded-lg">
+  <!-- Header -->
+  <div class="px-6 py-4 border-b border-gray-200">
+    <div class="flex items-center justify-between">
+      <div>
+        <h2 class="text-lg font-medium text-gray-900">Executions</h2>
+        <p class="mt-1 text-sm text-gray-500">
+          Browse workflow execution history and details
+        </p>
+      </div>
+      
+      <!-- Search and Filter -->
+      <div class="flex space-x-4">
+        <%= form_with url: executions_path, method: :get, local: true, class: "flex items-center space-x-2" do |form| %>
+          <%= form.text_field :search, 
+              placeholder: "Search executions...", 
+              value: params[:search],
+              class: "block w-48 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
+          <%= form.hidden_field :workflow_id, value: params[:workflow_id] %>
+          <%= form.submit "Search", 
+              class: "inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
+        <% end %>
+        
+        <% if params.slice(:workflow_id, :status, :date_from, :date_to).values.any?(&:present?) %>
+          <%= link_to "Clear Filters", executions_path, 
+              class: "inline-flex items-center px-3 py-2 border border-gray-300 text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
+        <% end %>
+      </div>
+    </div>
+    
+    <!-- Advanced Filters -->
+    <div class="mt-4 border-t border-gray-200 pt-4">
+      <%= form_with url: executions_path, method: :get, local: true, class: "space-y-4" do |form| %>
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <!-- Status Filter -->
+          <div>
+            <%= form.label :status, "Status", class: "block text-sm font-medium text-gray-700" %>
+            <%= form.select :status, 
+                options_for_select([
+                  ['All Statuses', ''],
+                  ['Running', 'running'],
+                  ['Completed', 'completed'],
+                  ['Failed', 'failed']
+                ], params[:status]),
+                { prompt: false },
+                { class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" } %>
+          </div>
+          
+          <!-- Date From -->
+          <div>
+            <%= form.label :date_from, "From Date", class: "block text-sm font-medium text-gray-700" %>
+            <%= form.date_field :date_from, 
+                value: params[:date_from],
+                class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
+          </div>
+          
+          <!-- Date To -->
+          <div>
+            <%= form.label :date_to, "To Date", class: "block text-sm font-medium text-gray-700" %>
+            <%= form.date_field :date_to, 
+                value: params[:date_to],
+                class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
+          </div>
+          
+          <!-- Apply Filters Button -->
+          <div class="flex items-end">
+            <%= form.hidden_field :search, value: params[:search] %>
+            <%= form.hidden_field :workflow_id, value: params[:workflow_id] %>
+            <%= form.submit "Apply Filters", 
+                class: "w-full inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+    
+    <!-- Active Filters Display -->
+    <% active_filters = [] %>
+    <% active_filters << "Workflow: #{safe_workflow_name(params[:workflow_id])}" if params[:workflow_id].present? %>
+    <% active_filters << "Status: #{params[:status].humanize}" if params[:status].present? %>
+    <% active_filters << "From: #{params[:date_from]}" if params[:date_from].present? %>
+    <% active_filters << "To: #{params[:date_to]}" if params[:date_to].present? %>
+    
+    <% if active_filters.any? %>
+      <div class="mt-3 flex flex-wrap gap-2">
+        <span class="text-sm font-medium text-gray-700">Active Filters:</span>
+        <% active_filters.each do |filter| %>
+          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+            <%= filter %>
+          </span>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+
+  <!-- Executions Table -->
+  <div class="overflow-hidden">
+    <table class="min-w-full divide-y divide-gray-200">
+      <thead class="bg-gray-50">
+        <tr>
+          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            ID
+          </th>
+          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            Workflow
+          </th>
+          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            Status
+          </th>
+          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            Current Step
+          </th>
+          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            Steps
+          </th>
+          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            Started
+          </th>
+          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            Updated
+          </th>
+          <th class="relative px-6 py-3">
+            <span class="sr-only">Actions</span>
+          </th>
+        </tr>
+      </thead>
+      <tbody class="bg-white divide-y divide-gray-200">
+        <% @executions.each do |execution| %>
+          <tr class="hover:bg-gray-50">
+            <td class="px-6 py-4 whitespace-nowrap">
+              <div class="text-sm font-medium text-gray-900">
+                #<%= execution.id %>
+              </div>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap">
+              <div class="text-sm text-gray-900">
+                <%= link_to execution.workflow.name, workflow_path(execution.workflow), 
+                    class: "text-blue-600 hover:text-blue-900" %>
+              </div>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap">
+              <%= execution_status_display(execution) %>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+              Step <%= execution.current_step + 1 %>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+              <%= execution.workflow_steps.count %> steps
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+              <%= time_with_tooltip(execution.created_at) %>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+              <%= time_with_tooltip(execution.updated_at) %>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+              <%= link_to "View Details", execution_path(execution), 
+                  class: "text-blue-600 hover:text-blue-900" %>
+            </td>
+          </tr>
+        <% end %>
+        
+        <% if @executions.empty? %>
+          <tr>
+            <td colspan="8" class="px-6 py-12 text-center">
+              <div class="text-gray-500">
+                <% if params[:search].present? %>
+                  No executions found matching "<%= params[:search] %>"
+                <% elsif params[:workflow_id].present? %>
+                  No executions found for this workflow
+                <% else %>
+                  No executions found
+                <% end %>
+              </div>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+
+  <!-- Pagination -->
+  <% if respond_to?(:paginate) && @executions.respond_to?(:current_page) %>
+    <div class="px-6 py-3 border-t border-gray-200">
+      <%= paginate @executions, theme: 'twitter_bootstrap_4' %>
+    </div>
+  <% end %>
+</div> 

data/app/views/meta_workflows/debug/show_execution.html.erb

@@ -0,0 +1,283 @@
+<!-- Execution Detail Header -->
+<div class="bg-white shadow rounded-lg mb-6">
+  <div class="px-6 py-4 border-b border-gray-200">
+    <div class="flex items-center justify-between">
+      <div>
+        <h1 class="text-2xl font-bold text-gray-900">Execution #<%= @execution.id %></h1>
+        <p class="mt-1 text-sm text-gray-500">
+          Workflow: <%= link_to @execution.workflow.name, workflow_path(@execution.workflow), class: "text-blue-600 hover:text-blue-900" %>
+        </p>
+      </div>
+      
+      <div class="flex space-x-3">
+        <%= link_to "← Back to Executions", executions_path, 
+            class: "inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
+        <%= link_to "Export JSON", export_execution_path(@execution, format: :json), 
+            class: "inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
+        <%= link_to "View Workflow", workflow_path(@execution.workflow), 
+            class: "inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
+      </div>
+    </div>
+  </div>
+
+  <!-- Execution Metadata -->
+  <div class="px-6 py-4">
+    <dl class="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-4">
+      <div>
+        <dt class="text-sm font-medium text-gray-500">Status</dt>
+        <dd class="mt-1">
+          <%= execution_status_display(@execution) %>
+        </dd>
+      </div>
+      <div>
+        <dt class="text-sm font-medium text-gray-500">Progress</dt>
+        <dd class="mt-1">
+          <%= execution_progress_display(@execution) %>
+        </dd>
+      </div>
+      <div>
+        <dt class="text-sm font-medium text-gray-500">Record</dt>
+        <dd class="mt-1 text-sm text-gray-900">
+          <%= record_info_display(@execution) %>
+        </dd>
+      </div>
+      <div>
+        <dt class="text-sm font-medium text-gray-500">Created</dt>
+        <dd class="mt-1 text-sm text-gray-900">
+          <%= time_with_tooltip(@execution.created_at) %>
+        </dd>
+      </div>
+    </dl>
+  </div>
+</div>
+
+<!-- Workflow Parameters -->
+<% if @execution.workflow_params.present? %>
+  <div class="bg-white shadow rounded-lg mb-6">
+    <div class="px-6 py-4 border-b border-gray-200">
+      <h2 class="text-lg font-medium text-gray-900">Workflow Parameters</h2>
+      <p class="mt-1 text-sm text-gray-500">
+        Parameters passed to this workflow execution
+      </p>
+    </div>
+    
+    <div class="px-6 py-4">
+      <%= json_display(@execution.workflow_params) %>
+    </div>
+  </div>
+<% end %>
+
+<!-- Workflow Steps -->
+<div class="bg-white shadow rounded-lg mb-6">
+  <div class="px-6 py-4 border-b border-gray-200">
+    <h2 class="text-lg font-medium text-gray-900">Workflow Steps</h2>
+    <p class="mt-1 text-sm text-gray-500">
+      Detailed view of each step in this execution
+    </p>
+  </div>
+
+  <div class="divide-y divide-gray-200">
+    <% @execution.workflow_steps.includes(:chat).order(:step).each do |workflow_step| %>
+      <div class="px-6 py-4">
+        <div class="flex items-start justify-between">
+          <div class="flex-1">
+            <div class="flex items-center">
+              <h3 class="text-sm font-medium text-gray-900">
+                Step <%= workflow_step.step %>
+              </h3>
+              <%= workflow_step_status(workflow_step, @execution.current_step) %>
+              <% if workflow_step.error? %>
+                <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
+                  <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
+                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
+                  </svg>
+                  Error
+                </span>
+              <% end %>
+            </div>
+            
+            <% step_data = safe_step_data(@execution.workflow, workflow_step.step) %>
+            <% if step_data %>
+              <div class="mt-2 text-sm text-gray-600">
+                <% if step_data['error'] %>
+                  <span class="text-red-600">Error: <%= step_data['error'] %></span>
+                <% else %>
+                  <strong>Action:</strong> <%= step_data['action'] %>
+                  <% if step_data['prompt_id'] %>
+                    <br><strong>Prompt ID:</strong> <%= step_data['prompt_id'] %>
+                  <% end %>
+                  <% if step_data['name'] %>
+                    <br><strong>Name:</strong> <%= step_data['name'] %>
+                  <% end %>
+                <% end %>
+              </div>
+            <% end %>
+            
+            <!-- Error Information Display -->
+            <% if workflow_step.error? %>
+              <div class="mt-3 p-3 bg-red-50 border border-red-200 rounded-md">
+                <div class="flex items-start">
+                  <div class="flex-shrink-0">
+                    <svg class="h-5 w-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
+                      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
+                    </svg>
+                  </div>
+                  <div class="ml-3 flex-1">
+                    <h4 class="text-sm font-medium text-red-800">
+                      LLM Processing Error
+                    </h4>
+                    <div class="mt-2 text-sm text-red-700">
+                      <p><strong>Type:</strong> <%= workflow_step.error_type %></p>
+                      <p><strong>Message:</strong> <%= workflow_step.error_message %></p>
+                      <% if workflow_step.error_occurred_at %>
+                        <p><strong>Occurred:</strong> <%= time_with_tooltip(workflow_step.error_occurred_at) %></p>
+                      <% end %>
+                    </div>
+                    
+                    <% if workflow_step.error_details.present? %>
+                      <div class="mt-3">
+                        <button class="text-sm text-red-600 hover:text-red-800 font-medium" 
+                                onclick="toggleErrorDetails('error-details-<%= workflow_step.id %>')">
+                          Show Error Details ▼
+                        </button>
+                        <div id="error-details-<%= workflow_step.id %>" class="hidden mt-2">
+                          <%= json_display(workflow_step.error_details, classes: 'bg-red-100 p-2 rounded text-xs overflow-x-auto') %>
+                        </div>
+                      </div>
+                    <% end %>
+                  </div>
+                </div>
+              </div>
+            <% end %>
+            
+            <% if workflow_step.chat.present? %>
+              <div class="mt-2">
+                <span class="text-xs text-gray-500">
+                  Chat ID: <%= workflow_step.chat.id %> | 
+                  Messages: <%= workflow_step.chat.messages.count %> | 
+                  Created: <%= time_with_tooltip(workflow_step.chat.created_at) %>
+                </span>
+              </div>
+            <% end %>
+          </div>
+          
+          <div class="text-xs text-gray-500">
+            <%= time_with_tooltip(workflow_step.created_at) %>
+          </div>
+        </div>
+      </div>
+    <% end %>
+    
+    <% if @execution.workflow_steps.empty? %>
+      <div class="px-6 py-12 text-center text-gray-500">
+        No workflow steps found
+      </div>
+    <% end %>
+  </div>
+</div>
+
+<!-- Chat History -->
+<% chats_with_messages = @execution.workflow_steps.includes(chat: { messages: :tool_calls }).map(&:chat).compact.select { |c| c.messages.any? } %>
+<% if chats_with_messages.any? %>
+  <div class="bg-white shadow rounded-lg">
+    <div class="px-6 py-4 border-b border-gray-200">
+      <h2 class="text-lg font-medium text-gray-900">Chat History</h2>
+      <p class="mt-1 text-sm text-gray-500">
+        Chronological view of all conversations in this execution
+      </p>
+    </div>
+
+    <div class="divide-y divide-gray-200">
+      <% chats_with_messages.each do |chat| %>
+        <div class="px-6 py-4">
+          <div class="mb-4">
+            <h3 class="text-sm font-medium text-gray-900">
+              Chat #<%= chat.id %>
+              <span class="ml-2 text-xs text-gray-500">
+                (<%= chat.provider %> - <%= chat.model_id %>)
+              </span>
+            </h3>
+            <% if chat.user.present? %>
+              <p class="text-xs text-gray-500">User: <%= user_display_name(chat.user) %></p>
+            <% end %>
+          </div>
+
+          <!-- Messages -->
+          <div class="space-y-3">
+            <% chat.messages.order(:created_at).each do |message| %>
+              <div class="border rounded-lg p-3 <%= message_role_badge(message.role) %>">
+                <div class="flex items-center justify-between mb-2">
+                  <div class="flex items-center space-x-2">
+                    <span class="text-xs font-medium text-gray-900 uppercase"><%= message.role %></span>
+                    <% if message.model_id.present? %>
+                      <span class="text-xs text-gray-500">(<%= message.model_id %>)</span>
+                    <% end %>
+                  </div>
+                  <div class="text-xs text-gray-500">
+                    <%= time_with_tooltip(message.created_at) %>
+                    <% token_info = format_token_usage(message.input_tokens, message.output_tokens) %>
+                    <% if token_info.present? %>
+                      | <%= token_info %>
+                    <% end %>
+                  </div>
+                </div>
+                
+                <% if message.content.present? %>
+                  <div class="text-sm text-gray-800 whitespace-pre-wrap"><%= message.content %></div>
+                <% end %>
+                
+                <!-- Tool Calls -->
+                <% if message.tool_calls.any? %>
+                  <div class="mt-3 space-y-2">
+                    <h4 class="text-xs font-medium text-gray-700">Tool Calls:</h4>
+                    <% message.tool_calls.each do |tool_call| %>
+                      <div class="bg-white border rounded p-2">
+                        <div class="flex items-center justify-between mb-1">
+                          <span class="text-xs font-medium text-gray-800"><%= tool_call.name %></span>
+                          <span class="text-xs text-gray-500">ID: <%= tool_call.tool_call_id %></span>
+                        </div>
+                        <% if tool_call.arguments.present? %>
+                          <div class="text-xs">
+                            <strong>Arguments:</strong>
+                            <%= json_display(tool_call.arguments, classes: 'bg-gray-50 p-2 rounded text-xs overflow-x-auto mt-1') %>
+                          </div>
+                        <% end %>
+                      </div>
+                    <% end %>
+                  </div>
+                <% end %>
+              </div>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+<% else %>
+  <div class="bg-white shadow rounded-lg">
+    <div class="px-6 py-4 border-b border-gray-200">
+      <h2 class="text-lg font-medium text-gray-900">Chat History</h2>
+      <p class="mt-1 text-sm text-gray-500">
+        No chat conversations found for this execution
+      </p>
+    </div>
+    <div class="px-6 py-12 text-center text-gray-500">
+      This execution has no associated chat conversations
+    </div>
+  </div>
+<% end %> 
+
+<script>
+function toggleErrorDetails(elementId) {
+  const element = document.getElementById(elementId);
+  const button = element.previousElementSibling;
+  
+  if (element.classList.contains('hidden')) {
+    element.classList.remove('hidden');
+    button.innerHTML = 'Hide Error Details ▲';
+  } else {
+    element.classList.add('hidden');
+    button.innerHTML = 'Show Error Details ▼';
+  }
+}
+</script> 

data/app/views/meta_workflows/debug/show_workflow.html.erb

@@ -0,0 +1,148 @@
+<!-- Workflow Detail Header -->
+<div class="bg-white shadow rounded-lg mb-6">
+  <div class="px-6 py-4 border-b border-gray-200">
+    <div class="flex items-center justify-between">
+      <div>
+        <h1 class="text-2xl font-bold text-gray-900"><%= @workflow.name %></h1>
+        <p class="mt-1 text-sm text-gray-500">
+          Workflow Details
+        </p>
+      </div>
+      
+      <div class="flex space-x-3">
+        <%= link_to "← Back to Workflows", workflows_path, 
+            class: "inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
+        <%= link_to "View Executions", executions_path(workflow_id: @workflow.id), 
+            class: "inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
+      </div>
+    </div>
+  </div>
+
+  <!-- Workflow Metadata -->
+  <div class="px-6 py-4">
+    <dl class="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-3">
+      <div>
+        <dt class="text-sm font-medium text-gray-500">Total Steps</dt>
+        <dd class="mt-1 text-sm text-gray-900">
+          <% begin %>
+            <%= @workflow.total_steps %> steps
+          <% rescue => e %>
+            <span class="text-red-600">Error: <%= e.message %></span>
+          <% end %>
+        </dd>
+      </div>
+      <div>
+        <dt class="text-sm font-medium text-gray-500">Total Executions</dt>
+        <dd class="mt-1 text-sm text-gray-900">
+          <%= @workflow.workflow_executions.count %> executions
+        </dd>
+      </div>
+      <div>
+        <dt class="text-sm font-medium text-gray-500">Created</dt>
+        <dd class="mt-1 text-sm text-gray-900">
+          <%= time_with_tooltip(@workflow.created_at) %>
+        </dd>
+      </div>
+    </dl>
+  </div>
+</div>
+
+<!-- Workflow Recipe -->
+<div class="bg-white shadow rounded-lg mb-6">
+  <div class="px-6 py-4 border-b border-gray-200">
+    <h2 class="text-lg font-medium text-gray-900">Workflow Recipe</h2>
+    <p class="mt-1 text-sm text-gray-500">
+      The JSON configuration that defines this workflow's behavior
+    </p>
+  </div>
+  
+  <div class="px-6 py-4">
+    <% if @workflow.recipe.present? %>
+      <%= json_display(@workflow.recipe) %>
+    <% else %>
+      <div class="text-gray-500 italic">No recipe data available</div>
+    <% end %>
+  </div>
+</div>
+
+<!-- Recent Executions -->
+<div class="bg-white shadow rounded-lg">
+  <div class="px-6 py-4 border-b border-gray-200">
+    <div class="flex items-center justify-between">
+      <div>
+        <h2 class="text-lg font-medium text-gray-900">Recent Executions</h2>
+        <p class="mt-1 text-sm text-gray-500">
+          Latest workflow executions for this workflow
+        </p>
+      </div>
+      <% if @executions.any? %>
+        <%= link_to "View All Executions", executions_path(workflow_id: @workflow.id), 
+            class: "text-sm text-blue-600 hover:text-blue-900" %>
+      <% end %>
+    </div>
+  </div>
+
+  <!-- Executions Table -->
+  <div class="overflow-hidden">
+    <table class="min-w-full divide-y divide-gray-200">
+      <thead class="bg-gray-50">
+        <tr>
+          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            Status
+          </th>
+          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            Current Step
+          </th>
+          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            Record
+          </th>
+          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            Created
+          </th>
+          <th class="relative px-6 py-3">
+            <span class="sr-only">Actions</span>
+          </th>
+        </tr>
+      </thead>
+      <tbody class="bg-white divide-y divide-gray-200">
+        <% @executions.each do |execution| %>
+          <tr class="hover:bg-gray-50">
+            <td class="px-6 py-4 whitespace-nowrap">
+              <%= execution_status_display(execution) %>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap">
+              <%= execution_progress_display(execution) %>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+              <%= record_info_display(execution) %>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+              <%= time_with_tooltip(execution.created_at) %>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+              <%= link_to "View Details", execution_path(execution), 
+                  class: "text-blue-600 hover:text-blue-900" %>
+            </td>
+          </tr>
+        <% end %>
+        
+        <% if @executions.empty? %>
+          <tr>
+            <td colspan="5" class="px-6 py-12 text-center">
+              <div class="text-gray-500">
+                No executions found for this workflow
+              </div>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+
+  <!-- Pagination -->
+  <% if respond_to?(:paginate) && @executions.respond_to?(:current_page) %>
+    <div class="px-6 py-3 border-t border-gray-200">
+      <%= paginate @executions, theme: 'twitter_bootstrap_4' %>
+    </div>
+  <% end %>
+</div>