ruby_llm-agents 0.2.4 → 0.3.1

data/app/views/rubyllm/agents/executions/show.html.erb

@@ -1,3 +1,4 @@
+<div id="execution-detail" data-execution-id="<%= @execution.id %>" data-status="<%= @execution.status %>">
 <div class="mb-6">
   <%= link_to ruby_llm_agents.executions_path, class: "inline-flex items-center text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200" do %>
     <svg
@@ -27,19 +28,113 @@
         </h2>
 
         <%= render "rubyllm/agents/shared/status_badge", status: @execution.status, size: :md %>
+
+        <% if @execution.streaming? %>
+          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-cyan-100 dark:bg-cyan-900/50 text-cyan-800 dark:text-cyan-300">
+            Streaming
+          </span>
+        <% end %>
+
+        <% if @execution.cache_hit %>
+          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 dark:bg-purple-900/50 text-purple-800 dark:text-purple-300">
+            Cached
+          </span>
+        <% end %>
+
+        <% if @execution.finish_reason.present? %>
+          <% finish_colors = {
+            'stop' => 'bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-300',
+            'length' => 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/50 dark:text-yellow-300',
+            'content_filter' => 'bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-300',
+            'tool_calls' => 'bg-blue-100 text-blue-800 dark:bg-blue-900/50 dark:text-blue-300'
+          } %>
+          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium <%= finish_colors[@execution.finish_reason] || 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300' %>">
+            <%= @execution.finish_reason %>
+          </span>
+        <% end %>
       </div>
 
       <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
         Execution #<%= @execution.id %> · v<%= @execution.agent_version %>
+        <% if @execution.model_provider.present? %>
+          · <%= @execution.model_provider %>
+        <% end %>
       </p>
     </div>
 
-    <div class="text-right text-sm text-gray-500 dark:text-gray-400">
-      <p><%= @execution.created_at.strftime("%b %d, %Y at %H:%M") %></p>
+    <div class="flex items-center gap-4">
+      <!-- Rerun Buttons -->
+      <div class="flex items-center gap-2">
+        <%= button_to rerun_execution_path(@execution, dry_run: true),
+            method: :post,
+            data: { turbo: false },
+            class: "inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors",
+            title: "Preview what would be sent without making an API call" do %>
+          <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
+          </svg>
+          Dry Run
+        <% end %>
 
-      <p class="text-xs text-gray-400 dark:text-gray-500">
-        <%= time_ago_in_words(@execution.created_at) %> ago
-      </p>
+        <button
+          type="button"
+          onclick="confirmRerun()"
+          class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
+          title="Re-execute this agent with the same parameters"
+        >
+          <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>
+          Rerun
+        </button>
+      </div>
+
+      <div class="text-right text-sm text-gray-500 dark:text-gray-400">
+        <p><%= @execution.created_at.strftime("%b %d, %Y at %H:%M") %></p>
+
+        <p class="text-xs text-gray-400 dark:text-gray-500">
+          <%= time_ago_in_words(@execution.created_at) %> ago
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Rerun Confirmation Modal -->
+<div id="rerun-modal" class="hidden fixed inset-0 z-50 overflow-y-auto">
+  <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">
+    <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75" onclick="closeRerunModal()"></div>
+
+    <div class="relative inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white dark:bg-gray-800 rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
+      <div class="sm:flex sm:items-start">
+        <div class="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto bg-blue-100 dark:bg-blue-900/30 rounded-full sm:mx-0 sm:h-10 sm:w-10">
+          <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" 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>
+        </div>
+        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+          <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100">Confirm Rerun</h3>
+          <div class="mt-2">
+            <p class="text-sm text-gray-500 dark:text-gray-400">
+              This will re-execute the agent with the original parameters. A new execution record will be created and the agent will make a real API call.
+            </p>
+            <p class="mt-2 text-sm text-amber-600 dark:text-amber-400">
+              This action may incur API costs.
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse gap-3">
+        <%= button_to rerun_execution_path(@execution),
+            method: :post,
+            class: "inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto" do %>
+          Confirm Rerun
+        <% end %>
+        <button type="button" onclick="closeRerunModal()" class="inline-flex justify-center w-full px-4 py-2 mt-3 text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none sm:mt-0 sm:w-auto">
+          Cancel
+        </button>
+      </div>
     </div>
   </div>
 </div>
@@ -125,10 +220,135 @@
   </div>
 </div>
 
+<!-- Attempts Table (for reliability-enabled executions) -->
+<% if @execution.respond_to?(:attempts) && @execution.attempts.present? %>
+  <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-6 mb-6">
+    <div class="flex items-center justify-between mb-4">
+      <div>
+        <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Attempts</h3>
+        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">
+          <%= @execution.attempts_count || @execution.attempts.size %> attempt(s)
+          <% if @execution.used_fallback? %>
+            · <span class="text-amber-500">Used fallback model</span>
+          <% end %>
+          <% if @execution.has_retries? %>
+            · <span class="text-blue-500">Retried</span>
+          <% end %>
+        </p>
+      </div>
+      <% if @execution.chosen_model_id.present? && @execution.chosen_model_id != @execution.model_id %>
+        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-300">
+          Fallback: <%= @execution.chosen_model_id %>
+        </span>
+      <% end %>
+    </div>
+
+    <div class="overflow-x-auto">
+      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+        <thead>
+          <tr>
+            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">#</th>
+            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Model</th>
+            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Status</th>
+            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Duration</th>
+            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Tokens</th>
+            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Error</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+          <% @execution.attempts.each_with_index do |attempt, index| %>
+            <tr class="<%= attempt['short_circuited'] ? 'bg-gray-50 dark:bg-gray-900/50' : '' %>">
+              <td class="px-3 py-2 text-sm text-gray-500 dark:text-gray-400">
+                <%= index + 1 %>
+              </td>
+              <td class="px-3 py-2 text-sm font-mono text-gray-900 dark:text-gray-100">
+                <%= attempt['model_id'] %>
+              </td>
+              <td class="px-3 py-2">
+                <% if attempt['short_circuited'] %>
+                  <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">
+                    <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
+                      <path fill-rule="evenodd" d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z" clip-rule="evenodd"/>
+                    </svg>
+                    Blocked
+                  </span>
+                <% elsif attempt['error_class'].present? %>
+                  <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300">
+                    <svg class="w-3 h-3 mr-1" 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>
+                    Failed
+                  </span>
+                <% else %>
+                  <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300">
+                    <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
+                      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
+                    </svg>
+                    Success
+                  </span>
+                <% end %>
+              </td>
+              <td class="px-3 py-2 text-sm text-gray-500 dark:text-gray-400">
+                <%= attempt['duration_ms'] ? "#{attempt['duration_ms']}ms" : '-' %>
+              </td>
+              <td class="px-3 py-2 text-sm text-gray-500 dark:text-gray-400">
+                <% if attempt['input_tokens'] || attempt['output_tokens'] %>
+                  <span class="text-blue-600 dark:text-blue-400"><%= attempt['input_tokens'] || 0 %></span>
+                  /
+                  <span class="text-green-600 dark:text-green-400"><%= attempt['output_tokens'] || 0 %></span>
+                <% else %>
+                  -
+                <% end %>
+              </td>
+              <td class="px-3 py-2 text-sm">
+                <% if attempt['error_class'].present? %>
+                  <span class="text-red-600 dark:text-red-400 font-mono text-xs" title="<%= attempt['error_message'] %>">
+                    <%= attempt['error_class'].split('::').last.truncate(30) %>
+                  </span>
+                <% else %>
+                  <span class="text-gray-400">-</span>
+                <% end %>
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+
+    <% if @execution.fallback_chain.present? && @execution.fallback_chain.any? %>
+      <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
+        <p class="text-xs text-gray-500 dark:text-gray-400">
+          <span class="font-medium">Fallback chain:</span>
+          <%= @execution.fallback_chain.join(' → ') %>
+        </p>
+        <% if @execution.fallback_reason.present? %>
+          <p class="text-xs text-amber-600 dark:text-amber-400 mt-1">
+            Fallback reason: <%= @execution.fallback_reason %>
+          </p>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+<% end %>
+
 <% if @execution.status_error? %>
   <!-- Error Details -->
   <div class="bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg p-6 mb-6">
-    <h3 class="text-lg font-semibold text-red-800 dark:text-red-300 mb-2">Error Details</h3>
+    <div class="flex items-center justify-between mb-2">
+      <h3 class="text-lg font-semibold text-red-800 dark:text-red-300">Error Details</h3>
+      <div class="flex items-center gap-2">
+        <% if @execution.rate_limited? %>
+          <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300">
+            Rate Limited
+          </span>
+        <% end %>
+        <% if @execution.retryable %>
+          <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
+            Retryable
+          </span>
+        <% end %>
+      </div>
+    </div>
 
     <p class="font-mono text-sm text-red-700 dark:text-red-400 mb-2">
       <%= @execution.error_class %>
@@ -138,13 +358,46 @@
   </div>
 <% end %>
 
+<!-- Masking Toggle -->
+<div class="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-xl p-4 mb-6">
+  <div class="flex items-center justify-between">
+    <div class="flex items-center gap-2">
+      <svg class="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
+      </svg>
+      <span class="text-sm font-medium text-amber-800 dark:text-amber-200">Data Masking</span>
+    </div>
+    <div class="flex items-center gap-3">
+      <span id="masking-status" class="text-xs text-amber-600 dark:text-amber-400">
+        Sensitive data is hidden
+      </span>
+      <button
+        type="button"
+        id="toggle-masking-btn"
+        onclick="toggleMasking()"
+        class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md transition-colors bg-amber-100 dark:bg-amber-900/50 text-amber-700 dark:text-amber-300 hover:bg-amber-200 dark:hover:bg-amber-800/50"
+      >
+        <svg id="eye-icon" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
+        </svg>
+        <svg id="eye-off-icon" class="w-4 h-4 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>
+        </svg>
+        <span id="toggle-btn-text">Show Original</span>
+      </button>
+    </div>
+  </div>
+</div>
+
 <!-- Parameters -->
 <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-6 mb-6">
   <div class="flex items-center justify-between mb-4">
     <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Parameters</h3>
     <button
       type="button"
-      data-copy-json="<%= Base64.strict_encode64(JSON.pretty_generate(@execution.parameters || {})) %>"
+      data-copy-json="<%= Base64.strict_encode64(JSON.pretty_generate(redact_for_display(@execution.parameters || {}))) %>"
+      data-copy-json-original="<%= Base64.strict_encode64(JSON.pretty_generate(@execution.parameters || {})) %>"
       class="copy-json-btn inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors"
     >
       <svg class="w-4 h-4 copy-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -156,7 +409,8 @@
       <span>Copy</span>
     </button>
   </div>
-  <pre class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-lg p-4 text-sm overflow-x-auto font-mono"><%= highlight_json(@execution.parameters || {}) %></pre>
+  <pre id="parameters-masked" class="maskable-content bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-lg p-4 text-sm overflow-x-auto font-mono"><%= highlight_json_redacted(@execution.parameters || {}) %></pre>
+  <pre id="parameters-original" class="maskable-content hidden bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-lg p-4 text-sm overflow-x-auto font-mono"><%= highlight_json(@execution.parameters || {}) %></pre>
 </div>
 
 <!-- Response -->
@@ -166,7 +420,8 @@
       <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Response</h3>
       <button
         type="button"
-        data-copy-json="<%= Base64.strict_encode64(JSON.pretty_generate(@execution.response)) %>"
+        data-copy-json="<%= Base64.strict_encode64(JSON.pretty_generate(redact_for_display(@execution.response))) %>"
+        data-copy-json-original="<%= Base64.strict_encode64(JSON.pretty_generate(@execution.response)) %>"
         class="copy-json-btn inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors"
       >
         <svg class="w-4 h-4 copy-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -178,7 +433,8 @@
         <span>Copy</span>
       </button>
     </div>
-    <pre class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-lg p-4 text-sm overflow-x-auto max-h-96 font-mono"><%= highlight_json(@execution.response) %></pre>
+    <pre id="response-masked" class="maskable-content bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-lg p-4 text-sm overflow-x-auto max-h-96 font-mono"><%= highlight_json_redacted(@execution.response) %></pre>
+    <pre id="response-original" class="maskable-content hidden bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-lg p-4 text-sm overflow-x-auto max-h-96 font-mono"><%= highlight_json(@execution.response) %></pre>
   </div>
 <% end %>
 
@@ -189,7 +445,8 @@
       <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Metadata</h3>
       <button
         type="button"
-        data-copy-json="<%= Base64.strict_encode64(JSON.pretty_generate(@execution.metadata)) %>"
+        data-copy-json="<%= Base64.strict_encode64(JSON.pretty_generate(redact_for_display(@execution.metadata))) %>"
+        data-copy-json-original="<%= Base64.strict_encode64(JSON.pretty_generate(@execution.metadata)) %>"
         class="copy-json-btn inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors"
       >
         <svg class="w-4 h-4 copy-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -201,16 +458,361 @@
         <span>Copy</span>
       </button>
     </div>
-    <pre class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-lg p-4 text-sm overflow-x-auto font-mono"><%= highlight_json(@execution.metadata) %></pre>
+    <pre id="metadata-masked" class="maskable-content bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-lg p-4 text-sm overflow-x-auto font-mono"><%= highlight_json_redacted(@execution.metadata) %></pre>
+    <pre id="metadata-original" class="maskable-content hidden bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-lg p-4 text-sm overflow-x-auto font-mono"><%= highlight_json(@execution.metadata) %></pre>
+  </div>
+<% end %>
+
+<!-- Execution Hierarchy -->
+<% if @execution.parent_execution_id.present? || (@execution.respond_to?(:child_executions) && @execution.child_executions.any?) %>
+  <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-6 mb-6">
+    <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-4">Execution Hierarchy</h3>
+
+    <% if @execution.parent_execution_id.present? %>
+      <div class="mb-4">
+        <span class="text-xs text-gray-500 dark:text-gray-400">Parent Execution:</span>
+        <%= link_to "##{@execution.parent_execution_id}",
+            ruby_llm_agents.execution_path(@execution.parent_execution_id),
+            class: "ml-2 text-blue-600 dark:text-blue-400 hover:underline font-mono text-sm" %>
+      </div>
+    <% end %>
+
+    <% if @execution.respond_to?(:child_executions) && @execution.child_executions.any? %>
+      <div>
+        <span class="text-xs text-gray-500 dark:text-gray-400">Child Executions (<%= @execution.child_executions.count %>):</span>
+        <div class="mt-2 flex flex-wrap gap-2">
+          <% @execution.child_executions.limit(10).each do |child| %>
+            <%= link_to "##{child.id}",
+                ruby_llm_agents.execution_path(child),
+                class: "inline-flex items-center px-2 py-1 rounded text-xs font-mono bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600" %>
+          <% end %>
+          <% if @execution.child_executions.count > 10 %>
+            <span class="text-xs text-gray-400">+<%= @execution.child_executions.count - 10 %> more</span>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+<% end %>
+
+<!-- System Prompt -->
+<% if @execution.system_prompt.present? %>
+  <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-6 mb-6">
+    <div class="flex items-center justify-between mb-4">
+      <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">System Prompt</h3>
+      <button type="button" onclick="togglePrompt('system')" class="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+        <span id="system-prompt-toggle">Expand</span>
+      </button>
+    </div>
+    <pre id="system-prompt-content" class="hidden bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-lg p-4 text-sm overflow-x-auto max-h-96 font-mono whitespace-pre-wrap"><%= @execution.system_prompt %></pre>
   </div>
 <% end %>
 
+<!-- User Prompt -->
+<% if @execution.user_prompt.present? %>
+  <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-6 mb-6">
+    <div class="flex items-center justify-between mb-4">
+      <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">User Prompt</h3>
+      <button type="button" onclick="togglePrompt('user')" class="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+        <span id="user-prompt-toggle">Expand</span>
+      </button>
+    </div>
+    <pre id="user-prompt-content" class="hidden bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-lg p-4 text-sm overflow-x-auto max-h-96 font-mono whitespace-pre-wrap"><%= @execution.user_prompt %></pre>
+  </div>
+<% end %>
+
+<!-- Diagnostics Panel -->
+<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-6 mb-6">
+  <div class="flex items-center justify-between mb-4">
+    <div class="flex items-center gap-2">
+      <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/>
+      </svg>
+      <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Diagnostics</h3>
+    </div>
+    <button
+      type="button"
+      id="toggle-diagnostics-btn"
+      onclick="toggleDiagnostics()"
+      class="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
+    >
+      <svg id="diagnostics-expand-icon" 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="M19 9l-7 7-7-7"/>
+      </svg>
+      <span id="diagnostics-toggle-text">Expand</span>
+    </button>
+  </div>
+
+  <!-- Quick Info (always visible) -->
+  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+    <div>
+      <span class="text-gray-500 dark:text-gray-400 text-xs uppercase tracking-wide">Model</span>
+      <p class="font-mono text-gray-900 dark:text-gray-100"><%= @execution.model_id %></p>
+    </div>
+    <div>
+      <span class="text-gray-500 dark:text-gray-400 text-xs uppercase tracking-wide">Temperature</span>
+      <p class="font-mono text-gray-900 dark:text-gray-100"><%= @execution.temperature || 'N/A' %></p>
+    </div>
+    <div>
+      <span class="text-gray-500 dark:text-gray-400 text-xs uppercase tracking-wide">Version</span>
+      <p class="font-mono text-gray-900 dark:text-gray-100"><%= @execution.agent_version || '1.0' %></p>
+    </div>
+    <div>
+      <span class="text-gray-500 dark:text-gray-400 text-xs uppercase tracking-wide">Status</span>
+      <p class="font-mono text-gray-900 dark:text-gray-100"><%= @execution.status %></p>
+    </div>
+  </div>
+
+  <!-- Expanded Details (hidden by default) -->
+  <div id="diagnostics-details" class="hidden mt-6 pt-6 border-t border-gray-100 dark:border-gray-700">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <!-- Timing Information -->
+      <div class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4">
+        <h4 class="text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide mb-3">Timing</h4>
+        <dl class="space-y-2 text-sm">
+          <div class="flex justify-between">
+            <dt class="text-gray-500 dark:text-gray-400">Started</dt>
+            <dd class="font-mono text-gray-900 dark:text-gray-100"><%= @execution.started_at&.strftime("%Y-%m-%d %H:%M:%S.%L") || 'N/A' %></dd>
+          </div>
+          <div class="flex justify-between">
+            <dt class="text-gray-500 dark:text-gray-400">Completed</dt>
+            <dd class="font-mono text-gray-900 dark:text-gray-100"><%= @execution.completed_at&.strftime("%Y-%m-%d %H:%M:%S.%L") || 'N/A' %></dd>
+          </div>
+          <div class="flex justify-between">
+            <dt class="text-gray-500 dark:text-gray-400">Duration</dt>
+            <dd class="font-mono text-gray-900 dark:text-gray-100"><%= @execution.duration_ms ? "#{@execution.duration_ms}ms" : 'N/A' %></dd>
+          </div>
+          <% if @execution.streaming? && @execution.time_to_first_token_ms %>
+            <div class="flex justify-between">
+              <dt class="text-gray-500 dark:text-gray-400">Time to First Token</dt>
+              <dd class="font-mono text-gray-900 dark:text-gray-100"><%= @execution.time_to_first_token_ms %>ms</dd>
+            </div>
+          <% end %>
+          <div class="flex justify-between">
+            <dt class="text-gray-500 dark:text-gray-400">Created At</dt>
+            <dd class="font-mono text-gray-900 dark:text-gray-100"><%= @execution.created_at.strftime("%Y-%m-%d %H:%M:%S") %></dd>
+          </div>
+        </dl>
+      </div>
+
+      <!-- Performance Metrics -->
+      <div class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4">
+        <h4 class="text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide mb-3">Performance</h4>
+        <dl class="space-y-2 text-sm">
+          <div class="flex justify-between">
+            <dt class="text-gray-500 dark:text-gray-400">Tokens/Second</dt>
+            <dd class="font-mono text-gray-900 dark:text-gray-100"><%= @execution.tokens_per_second&.round(1) || 'N/A' %></dd>
+          </div>
+          <div class="flex justify-between">
+            <dt class="text-gray-500 dark:text-gray-400">Input Tokens</dt>
+            <dd class="font-mono text-gray-900 dark:text-gray-100"><%= @execution.input_tokens || 0 %></dd>
+          </div>
+          <div class="flex justify-between">
+            <dt class="text-gray-500 dark:text-gray-400">Output Tokens</dt>
+            <dd class="font-mono text-gray-900 dark:text-gray-100"><%= @execution.output_tokens || 0 %></dd>
+          </div>
+          <div class="flex justify-between">
+            <dt class="text-gray-500 dark:text-gray-400">Cached Tokens</dt>
+            <dd class="font-mono text-gray-900 dark:text-gray-100"><%= @execution.cached_tokens || 0 %></dd>
+          </div>
+        </dl>
+      </div>
+
+      <!-- Cost Breakdown -->
+      <div class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4">
+        <h4 class="text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide mb-3">Cost</h4>
+        <dl class="space-y-2 text-sm">
+          <div class="flex justify-between">
+            <dt class="text-gray-500 dark:text-gray-400">Input Cost</dt>
+            <dd class="font-mono text-gray-900 dark:text-gray-100">$<%= number_with_precision(@execution.input_cost || 0, precision: 6) %></dd>
+          </div>
+          <div class="flex justify-between">
+            <dt class="text-gray-500 dark:text-gray-400">Output Cost</dt>
+            <dd class="font-mono text-gray-900 dark:text-gray-100">$<%= number_with_precision(@execution.output_cost || 0, precision: 6) %></dd>
+          </div>
+          <div class="flex justify-between font-semibold">
+            <dt class="text-gray-600 dark:text-gray-300">Total Cost</dt>
+            <dd class="font-mono text-gray-900 dark:text-gray-100">$<%= number_with_precision(@execution.total_cost || 0, precision: 6) %></dd>
+          </div>
+        </dl>
+      </div>
+
+      <!-- Configuration -->
+      <div class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4">
+        <h4 class="text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide mb-3">Configuration</h4>
+        <dl class="space-y-2 text-sm">
+          <div class="flex justify-between">
+            <dt class="text-gray-500 dark:text-gray-400">Agent Type</dt>
+            <dd class="font-mono text-gray-900 dark:text-gray-100"><%= @execution.agent_type %></dd>
+          </div>
+          <div class="flex justify-between">
+            <dt class="text-gray-500 dark:text-gray-400">Temperature</dt>
+            <dd class="font-mono text-gray-900 dark:text-gray-100"><%= @execution.temperature || 'default' %></dd>
+          </div>
+          <% if @execution.respond_to?(:chosen_model_id) && @execution.chosen_model_id.present? && @execution.chosen_model_id != @execution.model_id %>
+            <div class="flex justify-between">
+              <dt class="text-gray-500 dark:text-gray-400">Chosen Model</dt>
+              <dd class="font-mono text-amber-600 dark:text-amber-400"><%= @execution.chosen_model_id %></dd>
+            </div>
+          <% end %>
+          <% if @execution.respond_to?(:attempts_count) && @execution.attempts_count && @execution.attempts_count > 1 %>
+            <div class="flex justify-between">
+              <dt class="text-gray-500 dark:text-gray-400">Retry Count</dt>
+              <dd class="font-mono text-blue-600 dark:text-blue-400"><%= @execution.attempts_count - 1 %></dd>
+            </div>
+          <% end %>
+        </dl>
+      </div>
+    </div>
+
+    <!-- Second Row: Tracing and Caching -->
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
+      <!-- Tracing Information -->
+      <% if @execution.trace_id.present? || @execution.request_id.present? %>
+        <div class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4">
+          <h4 class="text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide mb-3">Tracing</h4>
+          <dl class="space-y-2 text-sm">
+            <% if @execution.request_id.present? %>
+              <div class="flex justify-between">
+                <dt class="text-gray-500 dark:text-gray-400">Request ID</dt>
+                <dd class="font-mono text-gray-900 dark:text-gray-100 text-xs"><%= @execution.request_id %></dd>
+              </div>
+            <% end %>
+            <% if @execution.trace_id.present? %>
+              <div class="flex justify-between">
+                <dt class="text-gray-500 dark:text-gray-400">Trace ID</dt>
+                <dd class="font-mono text-gray-900 dark:text-gray-100 text-xs"><%= @execution.trace_id %></dd>
+              </div>
+            <% end %>
+            <% if @execution.span_id.present? %>
+              <div class="flex justify-between">
+                <dt class="text-gray-500 dark:text-gray-400">Span ID</dt>
+                <dd class="font-mono text-gray-900 dark:text-gray-100 text-xs"><%= @execution.span_id %></dd>
+              </div>
+            <% end %>
+          </dl>
+        </div>
+      <% end %>
+
+      <!-- Caching Information -->
+      <% if @execution.cache_hit || @execution.response_cache_key.present? %>
+        <div class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4">
+          <h4 class="text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide mb-3">Caching</h4>
+          <dl class="space-y-2 text-sm">
+            <div class="flex justify-between">
+              <dt class="text-gray-500 dark:text-gray-400">Cache Hit</dt>
+              <dd class="font-mono text-gray-900 dark:text-gray-100">
+                <% if @execution.cache_hit %>
+                  <span class="text-green-600 dark:text-green-400">Yes</span>
+                <% else %>
+                  <span class="text-gray-400">No</span>
+                <% end %>
+              </dd>
+            </div>
+            <% if @execution.response_cache_key.present? %>
+              <div class="flex justify-between">
+                <dt class="text-gray-500 dark:text-gray-400">Cache Key</dt>
+                <dd class="font-mono text-gray-900 dark:text-gray-100 text-xs truncate max-w-xs" title="<%= @execution.response_cache_key %>">
+                  <%= @execution.response_cache_key.truncate(30) %>
+                </dd>
+              </div>
+            <% end %>
+            <% if @execution.cached_at.present? %>
+              <div class="flex justify-between">
+                <dt class="text-gray-500 dark:text-gray-400">Cached At</dt>
+                <dd class="font-mono text-gray-900 dark:text-gray-100"><%= @execution.cached_at.strftime("%Y-%m-%d %H:%M:%S") %></dd>
+              </div>
+            <% end %>
+          </dl>
+        </div>
+      <% end %>
+    </div>
+
+    <!-- Execution ID -->
+    <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
+      <div class="flex items-center justify-between">
+        <span class="text-xs text-gray-500 dark:text-gray-400">
+          Execution ID: <code class="bg-gray-100 dark:bg-gray-700 px-1.5 py-0.5 rounded font-mono"><%= @execution.id %></code>
+        </span>
+        <button
+          type="button"
+          onclick="copyDiagnostics()"
+          class="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
+        >
+          <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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
+          </svg>
+          Copy All
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
 <script>
+  // Prompt toggle function
+  function togglePrompt(type) {
+    const content = document.getElementById(type + '-prompt-content');
+    const toggle = document.getElementById(type + '-prompt-toggle');
+    content.classList.toggle('hidden');
+    toggle.textContent = content.classList.contains('hidden') ? 'Expand' : 'Collapse';
+  }
+
+  // Masking state (persisted in localStorage)
+  let isMasked = localStorage.getItem('ruby_llm_agents_masking') !== 'false';
+
+  function toggleMasking() {
+    isMasked = !isMasked;
+    localStorage.setItem('ruby_llm_agents_masking', isMasked);
+    updateMaskingUI();
+  }
+
+  function updateMaskingUI() {
+    const status = document.getElementById('masking-status');
+    const btnText = document.getElementById('toggle-btn-text');
+    const eyeIcon = document.getElementById('eye-icon');
+    const eyeOffIcon = document.getElementById('eye-off-icon');
+
+    // Update all maskable content sections
+    document.querySelectorAll('[id$="-masked"]').forEach(function(el) {
+      el.classList.toggle('hidden', !isMasked);
+    });
+    document.querySelectorAll('[id$="-original"]').forEach(function(el) {
+      el.classList.toggle('hidden', isMasked);
+    });
+
+    // Update status and button
+    if (isMasked) {
+      status.textContent = 'Sensitive data is hidden';
+      btnText.textContent = 'Show Original';
+      eyeIcon.classList.remove('hidden');
+      eyeOffIcon.classList.add('hidden');
+    } else {
+      status.textContent = 'Showing original data';
+      btnText.textContent = 'Hide Sensitive';
+      eyeIcon.classList.add('hidden');
+      eyeOffIcon.classList.remove('hidden');
+    }
+
+    // Update copy buttons to use appropriate data
+    document.querySelectorAll('.copy-json-btn').forEach(function(button) {
+      const maskedData = button.getAttribute('data-copy-json');
+      const originalData = button.getAttribute('data-copy-json-original');
+      if (originalData) {
+        button.setAttribute('data-active-json', isMasked ? maskedData : originalData);
+      }
+    });
+  }
+
   document.addEventListener('DOMContentLoaded', function() {
+    // Initialize masking UI on page load
+    updateMaskingUI();
+
     document.querySelectorAll('.copy-json-btn').forEach(function(button) {
       button.addEventListener('click', function() {
-        const base64Data = this.getAttribute('data-copy-json');
-        const jsonText = atob(base64Data);
+        // Use active JSON (considers masking state) or fall back to default
+        const activeData = this.getAttribute('data-active-json') || this.getAttribute('data-copy-json');
+        const jsonText = atob(activeData);
         const span = this.querySelector('span');
         const copyIcon = this.querySelector('.copy-icon');
         const checkIcon = this.querySelector('.check-icon');
@@ -237,4 +839,81 @@
       });
     });
   });
+
+  // Rerun modal functions
+  function confirmRerun() {
+    document.getElementById('rerun-modal').classList.remove('hidden');
+    document.body.classList.add('overflow-hidden');
+  }
+
+  function closeRerunModal() {
+    document.getElementById('rerun-modal').classList.add('hidden');
+    document.body.classList.remove('overflow-hidden');
+  }
+
+  // Close modal on Escape key
+  document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') {
+      closeRerunModal();
+    }
+  });
+
+  // Diagnostics panel toggle
+  let diagnosticsExpanded = localStorage.getItem('ruby_llm_agents_diagnostics_expanded') === 'true';
+
+  function toggleDiagnostics() {
+    diagnosticsExpanded = !diagnosticsExpanded;
+    localStorage.setItem('ruby_llm_agents_diagnostics_expanded', diagnosticsExpanded);
+    updateDiagnosticsUI();
+  }
+
+  function updateDiagnosticsUI() {
+    const details = document.getElementById('diagnostics-details');
+    const toggleText = document.getElementById('diagnostics-toggle-text');
+    const expandIcon = document.getElementById('diagnostics-expand-icon');
+
+    if (diagnosticsExpanded) {
+      details.classList.remove('hidden');
+      toggleText.textContent = 'Collapse';
+      expandIcon.style.transform = 'rotate(180deg)';
+    } else {
+      details.classList.add('hidden');
+      toggleText.textContent = 'Expand';
+      expandIcon.style.transform = 'rotate(0deg)';
+    }
+  }
+
+  function copyDiagnostics() {
+    const diagnostics = {
+      execution_id: <%= @execution.id %>,
+      agent_type: "<%= @execution.agent_type %>",
+      agent_version: "<%= @execution.agent_version || '1.0' %>",
+      model_id: "<%= @execution.model_id %>",
+      status: "<%= @execution.status %>",
+      temperature: <%= @execution.temperature || 'null' %>,
+      duration_ms: <%= @execution.duration_ms || 'null' %>,
+      input_tokens: <%= @execution.input_tokens || 0 %>,
+      output_tokens: <%= @execution.output_tokens || 0 %>,
+      cached_tokens: <%= @execution.cached_tokens || 0 %>,
+      total_tokens: <%= @execution.total_tokens || 0 %>,
+      input_cost: <%= @execution.input_cost || 0 %>,
+      output_cost: <%= @execution.output_cost || 0 %>,
+      total_cost: <%= @execution.total_cost || 0 %>,
+      started_at: "<%= @execution.started_at&.iso8601 || '' %>",
+      completed_at: "<%= @execution.completed_at&.iso8601 || '' %>",
+      created_at: "<%= @execution.created_at.iso8601 %>"
+    };
+
+    navigator.clipboard.writeText(JSON.stringify(diagnostics, null, 2)).then(function() {
+      alert('Diagnostics copied to clipboard!');
+    }).catch(function(err) {
+      console.error('Failed to copy diagnostics:', err);
+    });
+  }
+
+  // Initialize diagnostics panel on page load
+  document.addEventListener('DOMContentLoaded', function() {
+    updateDiagnosticsUI();
+  });
 </script>
+</div>