ruby_llm-agents 0.3.4 → 0.3.5

data/app/views/ruby_llm/agents/executions/index.html.erb

@@ -0,0 +1,88 @@
+<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6">Executions</h2>
+
+<div id="executions_content" x-data="{ activeTab: '<%= params[:execution_type] || 'all' %>', activeWorkflowType: '<%= params[:workflow_type_tab] %>' }">
+  <!-- Top-Level Execution Type Tabs -->
+  <div class="border-b border-gray-200 dark:border-gray-700 mb-4">
+    <nav class="-mb-px flex space-x-6" aria-label="Execution Types">
+      <button type="button" @click="activeTab = 'all'; activeWorkflowType = ''; submitFilters()"
+              :class="activeTab === 'all' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'"
+              class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm transition-colors">
+        All
+      </button>
+      <button type="button" @click="activeTab = 'agents'; activeWorkflowType = ''; submitFilters()"
+              :class="activeTab === 'agents' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'"
+              class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm transition-colors">
+        Agents Only
+      </button>
+      <button type="button" @click="activeTab = 'workflows'; activeWorkflowType = ''; submitFilters()"
+              :class="activeTab === 'workflows' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'"
+              class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm transition-colors">
+        Workflows
+      </button>
+    </nav>
+  </div>
+
+  <!-- Workflow Sub-tabs -->
+  <div x-show="activeTab === 'workflows'" x-cloak class="mb-4">
+    <div class="flex flex-wrap gap-2">
+      <button type="button" @click="activeWorkflowType = ''; submitFilters()"
+              :class="activeWorkflowType === '' ? 'bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'"
+              class="px-3 py-1.5 rounded-md text-sm font-medium transition-colors">
+        All Workflows
+      </button>
+      <button type="button" @click="activeWorkflowType = 'pipeline'; submitFilters()"
+              :class="activeWorkflowType === 'pipeline' ? 'bg-indigo-600 text-white' : 'bg-indigo-100 dark:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300 hover:bg-indigo-200 dark:hover:bg-indigo-800'"
+              class="px-3 py-1.5 rounded-md text-sm font-medium transition-colors inline-flex items-center gap-1.5">
+        <span aria-hidden="true">-></span> Pipeline
+      </button>
+      <button type="button" @click="activeWorkflowType = 'parallel'; submitFilters()"
+              :class="activeWorkflowType === 'parallel' ? 'bg-cyan-600 text-white' : 'bg-cyan-100 dark:bg-cyan-900/50 text-cyan-700 dark:text-cyan-300 hover:bg-cyan-200 dark:hover:bg-cyan-800'"
+              class="px-3 py-1.5 rounded-md text-sm font-medium transition-colors inline-flex items-center gap-1.5">
+        <span aria-hidden="true">//</span> Parallel
+      </button>
+      <button type="button" @click="activeWorkflowType = 'router'; submitFilters()"
+              :class="activeWorkflowType === 'router' ? 'bg-amber-600 text-white' : 'bg-amber-100 dark:bg-amber-900/50 text-amber-700 dark:text-amber-300 hover:bg-amber-200 dark:hover:bg-amber-800'"
+              class="px-3 py-1.5 rounded-md text-sm font-medium transition-colors inline-flex items-center gap-1.5">
+        <span aria-hidden="true">&lt;&gt;</span> Router
+      </button>
+    </div>
+  </div>
+
+  <!-- Hidden inputs for tab state -->
+  <input type="hidden" id="execution-type-filter" name="execution_type" x-model="activeTab" form="filters-form">
+  <input type="hidden" id="workflow-type-tab-filter" name="workflow_type_tab" x-model="activeWorkflowType" form="filters-form">
+
+  <%= render partial: "ruby_llm/agents/executions/filters", locals: { agent_types: @agent_types, model_ids: @model_ids, workflow_types: @workflow_types, filter_stats: @filter_stats } %>
+  <%= render partial: "ruby_llm/agents/executions/list", locals: { executions: @executions, pagination: @pagination, filter_stats: @filter_stats } %>
+</div>
+
+<script>
+  // Toggle attempts expansion (used by executions list)
+  function toggleAttempts(executionId) {
+    const attemptsRow = document.getElementById('attempts-row-' + executionId);
+    const expandBtn = document.querySelector(`button[data-execution-id="${executionId}"]`);
+
+    if (attemptsRow) {
+      const isHidden = attemptsRow.classList.contains('hidden');
+      attemptsRow.classList.toggle('hidden');
+
+      // Rotate the chevron
+      if (expandBtn) {
+        const svg = expandBtn.querySelector('svg');
+        if (svg) {
+          svg.classList.toggle('rotate-90', isHidden);
+        }
+        expandBtn.setAttribute('aria-expanded', isHidden ? 'true' : 'false');
+      }
+    }
+  }
+
+  // Submit filters when tabs change
+  function submitFilters() {
+    // Delay to allow Alpine to update x-model values
+    setTimeout(function() {
+      const form = document.getElementById('filters-form');
+      if (form) form.requestSubmit();
+    }, 50);
+  }
+</script>

data/app/views/{rubyllm → ruby_llm}/agents/executions/show.html.erb

@@ -1,5 +1,5 @@
 <div id="execution-detail" data-execution-id="<%= @execution.id %>" data-status="<%= @execution.status %>">
-<%= render "rubyllm/agents/shared/breadcrumbs", items: [
+<%= render "ruby_llm/agents/shared/breadcrumbs", items: [
   { label: "Dashboard", path: ruby_llm_agents.root_path },
   { label: "Executions", path: ruby_llm_agents.executions_path },
   { label: "##{@execution.id}" }
@@ -30,7 +30,7 @@
       <h2 class="text-lg font-bold text-gray-900 dark:text-gray-100 truncate">
         <%= @execution.agent_type.gsub(/Agent$/, '') %>
       </h2>
-      <%= render "rubyllm/agents/shared/status_badge", status: @execution.status, size: :md %>
+      <%= render "ruby_llm/agents/shared/status_badge", status: @execution.status, size: :md %>
       <% if secondary_badges.any? %>
         <div class="relative" x-data="{ showDetails: false }">
           <button
@@ -74,7 +74,6 @@
     <div class="flex items-center gap-3 flex-shrink-0">
       <%= button_to rerun_execution_path(@execution, dry_run: true),
           method: :post,
-          data: { turbo: false },
           class: "inline-flex items-center gap-1.5 px-2.5 py-1 text-xs 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 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-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -115,7 +114,7 @@
       <%= @execution.agent_type.gsub(/Agent$/, '') %>
     </h2>
     <div class="flex flex-wrap items-center gap-2 mt-2">
-      <%= render "rubyllm/agents/shared/status_badge", status: @execution.status, size: :md %>
+      <%= render "ruby_llm/agents/shared/status_badge", status: @execution.status, size: :md %>
       <% secondary_badges.each do |badge| %>
         <% badge_classes = case badge[:color]
           when 'cyan' then 'bg-cyan-100 dark:bg-cyan-900/50 text-cyan-800 dark:text-cyan-300'
@@ -146,7 +145,6 @@
       <div class="flex items-center gap-2">
         <%= button_to rerun_execution_path(@execution, dry_run: true),
             method: :post,
-            data: { turbo: false },
             class: "flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-2 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">
@@ -209,27 +207,124 @@
   </div>
 </div>
 
+<!-- Workflow Summary Panel (for root workflow executions) -->
+<% if @execution.respond_to?(:root_workflow?) && @execution.root_workflow? %>
+  <%= render "ruby_llm/agents/executions/workflow_summary", execution: @execution %>
+<% end %>
+
+<!-- Workflow Info (if applicable - for child workflow steps) -->
+<% if (@execution.workflow_type.present? || @execution.workflow_step.present? || @execution.routed_to.present?) && !(@execution.respond_to?(:root_workflow?) && @execution.root_workflow?) %>
+  <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-4 sm:p-5 mb-6">
+    <div class="flex items-center gap-2 mb-4">
+      <% case @execution.workflow_type
+         when "pipeline" %>
+        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-sm font-medium bg-indigo-100 dark:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300">
+          <span class="text-base">→</span> Pipeline Workflow
+        </span>
+      <% when "parallel" %>
+        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-sm font-medium bg-cyan-100 dark:bg-cyan-900/50 text-cyan-700 dark:text-cyan-300">
+          <span class="text-base">⫴</span> Parallel Workflow
+        </span>
+      <% when "router" %>
+        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-sm font-medium bg-amber-100 dark:bg-amber-900/50 text-amber-700 dark:text-amber-300">
+          <span class="text-base">⑂</span> Router Workflow
+        </span>
+      <% else %>
+        <% if @execution.workflow_step.present? %>
+          <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-sm font-medium bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
+            <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="M13 5l7 7-7 7M5 5l7 7-7 7"/>
+            </svg>
+            Workflow Step
+          </span>
+        <% end %>
+      <% end %>
+      <% if @execution.workflow_id.present? %>
+        <span class="text-xs text-gray-400 dark:text-gray-500 font-mono" title="Workflow ID: <%= @execution.workflow_id %>">
+          <%= @execution.workflow_id.to_s.truncate(12) %>
+        </span>
+      <% end %>
+    </div>
+
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+      <% if @execution.workflow_step.present? %>
+        <div>
+          <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">Step Name</p>
+          <p class="text-sm font-medium text-gray-900 dark:text-gray-100"><%= @execution.workflow_step %></p>
+        </div>
+      <% end %>
+
+      <% if @execution.routed_to.present? %>
+        <div>
+          <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">Routed To</p>
+          <p class="text-sm font-medium text-amber-600 dark:text-amber-400"><%= @execution.routed_to %></p>
+        </div>
+      <% end %>
+
+      <% if @execution.classification_result.present? %>
+        <%
+          classification = if @execution.classification_result.is_a?(String)
+            begin
+              JSON.parse(@execution.classification_result)
+            rescue
+              {}
+            end
+          else
+            @execution.classification_result || {}
+          end
+        %>
+        <% if classification["method"].present? %>
+          <div>
+            <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">Classification</p>
+            <p class="text-sm font-medium text-gray-900 dark:text-gray-100">
+              <%= classification["method"] == "llm" ? "LLM" : "Rule-based" %>
+              <% if classification["classification_time_ms"].present? %>
+                <span class="text-xs text-gray-400 dark:text-gray-500">(<%= classification["classification_time_ms"] %>ms)</span>
+              <% end %>
+            </p>
+          </div>
+        <% end %>
+        <% if classification["classifier_model"].present? %>
+          <div>
+            <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">Classifier Model</p>
+            <p class="text-sm font-medium text-gray-900 dark:text-gray-100 font-mono"><%= classification["classifier_model"] %></p>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
+
+    <% if @execution.parent_execution_id.present? %>
+      <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
+        <span class="text-xs text-gray-500 dark:text-gray-400">Part of workflow:</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 %>
+  </div>
+<% end %>
+
 <!-- Stats Grid -->
 <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
-  <%= render "rubyllm/agents/shared/stat_card",
+  <%= render "ruby_llm/agents/shared/stat_card",
       title: "Model",
       value: @execution.model_id,
       icon: "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",
       icon_color: "text-blue-500" %>
 
-  <%= render "rubyllm/agents/shared/stat_card",
+  <%= render "ruby_llm/agents/shared/stat_card",
       title: "Duration",
       value: "#{number_to_human_short(@execution.duration_ms || 0)} ms",
       icon: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z",
       icon_color: "text-purple-500" %>
 
-  <%= render "rubyllm/agents/shared/stat_card",
+  <%= render "ruby_llm/agents/shared/stat_card",
       title: "Total Tokens",
       value: number_to_human_short(@execution.total_tokens || 0),
       icon: "M7 20l4-16m2 16l4-16M6 9h14M4 15h14",
       icon_color: "text-indigo-500" %>
 
-  <%= render "rubyllm/agents/shared/stat_card",
+  <%= render "ruby_llm/agents/shared/stat_card",
       title: "Total Cost",
       value: number_to_human_short(@execution.total_cost || 0, prefix: "$", precision: 2),
       icon: "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-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
@@ -297,7 +392,7 @@
       <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)
+          <%= @execution.respond_to?(:attempts_count) && @execution.attempts_count ? @execution.attempts_count : @execution.attempts.size %> attempt(s)
           <% if @execution.used_fallback? %>
             · <span class="text-amber-500">Used fallback model</span>
           <% end %>
@@ -306,7 +401,7 @@
           <% end %>
         </p>
       </div>
-      <% if @execution.chosen_model_id.present? && @execution.chosen_model_id != @execution.model_id %>
+      <% if @execution.used_fallback? %>
         <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>
@@ -428,46 +523,13 @@
   </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(redact_for_display(@execution.parameters || {}))) %>"
-      data-copy-json-original="<%= Base64.strict_encode64(JSON.pretty_generate(@execution.parameters || {})) %>"
+      data-copy-json="<%= 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">
@@ -479,8 +541,7 @@
       <span>Copy</span>
     </button>
   </div>
-  <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>
+  <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>
 </div>
 
 <!-- Response -->
@@ -490,8 +551,7 @@
       <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(redact_for_display(@execution.response))) %>"
-        data-copy-json-original="<%= Base64.strict_encode64(JSON.pretty_generate(@execution.response)) %>"
+        data-copy-json="<%= 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">
@@ -503,30 +563,30 @@
         <span>Copy</span>
       </button>
     </div>
-    <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>
+    <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>
   </div>
 <% end %>
 
 <!-- Tool Calls -->
-<% if @execution.tool_calls.present? && @execution.tool_calls.any? %>
-  <% tool_call_count = @execution.tool_calls.size %>
-  <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-6 mb-6" x-data="{ expanded: <%= tool_call_count <= 3 %> }">
-    <div class="flex items-center justify-between mb-4">
-      <div class="flex items-center gap-2">
-        <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
-        </svg>
-        <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Tool Calls</h3>
-        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-300">
-          <%= tool_call_count %>
-        </span>
-      </div>
+<% tool_calls = @execution.tool_calls || [] %>
+<% tool_call_count = tool_calls.size %>
+<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-6 mb-6" x-data="{ expanded: <%= tool_call_count <= 3 && tool_call_count > 0 %> }">
+  <div class="flex items-center justify-between mb-4">
+    <div class="flex items-center gap-2">
+      <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+      </svg>
+      <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Tool Calls</h3>
+      <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-300">
+        <%= tool_call_count %>
+      </span>
+    </div>
+    <% if tool_call_count > 0 %>
       <div class="flex items-center gap-2">
         <button
           type="button"
-          data-copy-json="<%= Base64.strict_encode64(JSON.pretty_generate(@execution.tool_calls)) %>"
+          data-copy-json="<%= Base64.strict_encode64(JSON.pretty_generate(tool_calls)) %>"
           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">
@@ -543,10 +603,12 @@
           </button>
         <% end %>
       </div>
-    </div>
+    <% end %>
+  </div>
 
+  <% if tool_call_count > 0 %>
     <div class="space-y-4" x-show="expanded" <%= tool_call_count > 3 ? 'x-cloak' : '' %>>
-      <% @execution.tool_calls.each_with_index do |tool_call, index| %>
+      <% tool_calls.each_with_index do |tool_call, index| %>
         <%
           # Handle both symbol and string keys
           tool_id = tool_call['id'] || tool_call[:id]
@@ -583,8 +645,10 @@
         </div>
       <% end %>
     </div>
-  </div>
-<% end %>
+  <% else %>
+    <p class="text-sm text-gray-400 dark:text-gray-500 italic">No tool calls were made during this execution.</p>
+  <% end %>
+</div>
 
 <!-- Metadata -->
 <% if @execution.metadata.present? && @execution.metadata.any? %>
@@ -597,8 +661,7 @@
       <div class="flex items-center gap-2">
         <button
           type="button"
-          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)) %>"
+          data-copy-json="<%= 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">
@@ -615,8 +678,7 @@
       </div>
     </div>
     <div x-show="expanded" x-cloak class="mt-4">
-      <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>
+      <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>
     </div>
   </div>
 <% end %>
@@ -921,61 +983,10 @@
     toggle.textContent = isHidden ? 'Collapse' : 'Expand';
   }
 
-  // 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() {
-        // 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 jsonText = atob(this.getAttribute('data-copy-json'));
         const span = this.querySelector('span');
         const copyIcon = this.querySelector('.copy-icon');
         const checkIcon = this.querySelector('.check-icon');

data/app/views/{rubyllm → ruby_llm}/agents/shared/_breadcrumbs.html.erb

@@ -1,14 +1,14 @@
 <%
   # Breadcrumb navigation partial
   # Usage:
-  #   render "rubyllm/agents/shared/breadcrumbs", items: [
+  #   render "ruby_llm/agents/shared/breadcrumbs", items: [
   #     { label: "Dashboard", path: ruby_llm_agents.root_path },
   #     { label: "Executions", path: ruby_llm_agents.executions_path },
   #     { label: "#123" }  # Current page (no path)
   #   ]
   #
   # Or with simple array:
-  #   render "rubyllm/agents/shared/breadcrumbs", items: [
+  #   render "ruby_llm/agents/shared/breadcrumbs", items: [
   #     ["Dashboard", ruby_llm_agents.root_path],
   #     ["Executions", ruby_llm_agents.executions_path],
   #     ["#123"]