ruby_llm-agents 0.3.3 → 0.3.5

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

@@ -1,24 +1,28 @@
 <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
-      class="w-4 h-4 mr-1"
-      fill="none"
-      stroke="currentColor"
-      viewBox="0 0 24 24"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M10 19l-7-7m0 0l7-7m-7 7h18"
-      />
-    </svg>
-    Back to Executions
-  <% end %>
-</div>
+<%= 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}" }
+] %>
 
 <!-- Header -->
+<%
+  # Collect secondary badges
+  secondary_badges = []
+  secondary_badges << { label: "Stream", color: "cyan" } if @execution.streaming?
+  secondary_badges << { label: "Cached", color: "purple" } if @execution.cache_hit
+  if @execution.finish_reason.present?
+    finish_color = case @execution.finish_reason
+      when 'stop' then 'green'
+      when 'length' then 'yellow'
+      when 'content_filter' then 'red'
+      when 'tool_calls' then 'blue'
+      else 'gray'
+    end
+    secondary_badges << { label: @execution.finish_reason, color: finish_color }
+  end
+  secondary_badges << { label: "Rate Limited", color: "orange" } if @execution.respond_to?(:rate_limited?) && @execution.rate_limited?
+%>
 <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">
   <!-- Desktop: Row 1 - Agent name + badges + buttons + date -->
   <div class="hidden sm:flex sm:items-center sm:justify-between gap-4">
@@ -26,27 +30,50 @@
       <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 %>
-      <% if @execution.streaming? %>
-        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-cyan-100 dark:bg-cyan-900/50 text-cyan-800 dark:text-cyan-300">Stream</span>
-      <% end %>
-      <% if @execution.cache_hit %>
-        <span class="inline-flex items-center px-2 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 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>
+      <%= render "ruby_llm/agents/shared/status_badge", status: @execution.status, size: :md %>
+      <% if secondary_badges.any? %>
+        <div class="relative" x-data="{ showDetails: false }">
+          <button
+            type="button"
+            @mouseenter="showDetails = true"
+            @mouseleave="showDetails = false"
+            class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
+          >
+            +<%= secondary_badges.size %>
+            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+          </button>
+          <div
+            x-show="showDetails"
+            x-cloak
+            x-transition:enter="transition ease-out duration-100"
+            x-transition:enter-start="opacity-0 scale-95"
+            x-transition:enter-end="opacity-100 scale-100"
+            class="absolute left-0 mt-1 z-10 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 p-2 min-w-max"
+          >
+            <div class="flex flex-wrap gap-1.5">
+              <% 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'
+                  when 'purple' then 'bg-purple-100 dark:bg-purple-900/50 text-purple-800 dark:text-purple-300'
+                  when 'green' then 'bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-300'
+                  when 'yellow' then 'bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-300'
+                  when 'red' then 'bg-red-100 dark:bg-red-900/50 text-red-800 dark:text-red-300'
+                  when 'blue' then 'bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-300'
+                  when 'orange' then 'bg-orange-100 dark:bg-orange-900/50 text-orange-800 dark:text-orange-300'
+                  else 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300'
+                end %>
+                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium <%= badge_classes %>"><%= badge[:label] %></span>
+              <% end %>
+            </div>
+          </div>
+        </div>
       <% end %>
     </div>
     <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">
@@ -87,21 +114,19 @@
       <%= @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 %>
-      <% if @execution.streaming? %>
-        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium bg-cyan-100 dark:bg-cyan-900/50 text-cyan-800 dark:text-cyan-300">Stream</span>
-      <% end %>
-      <% if @execution.cache_hit %>
-        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] 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 py-0.5 rounded-full text-[10px] 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>
+      <%= 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'
+          when 'purple' then 'bg-purple-100 dark:bg-purple-900/50 text-purple-800 dark:text-purple-300'
+          when 'green' then 'bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-300'
+          when 'yellow' then 'bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-300'
+          when 'red' then 'bg-red-100 dark:bg-red-900/50 text-red-800 dark:text-red-300'
+          when 'blue' then 'bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-300'
+          when 'orange' then 'bg-orange-100 dark:bg-orange-900/50 text-orange-800 dark:text-orange-300'
+          else 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300'
+        end %>
+        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium <%= badge_classes %>"><%= badge[:label] %></span>
       <% end %>
     </div>
     <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
@@ -120,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">
@@ -183,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",
@@ -271,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 %>
@@ -280,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>
@@ -402,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">
@@ -453,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 -->
@@ -464,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">
@@ -477,42 +563,52 @@
         <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? %>
-  <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">
+<% 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">
-        <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">
-          <%= @execution.tool_calls.size %>
-        </span>
+        <button
+          type="button"
+          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">
+            <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>
+          <svg class="w-4 h-4 check-icon hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+          </svg>
+          <span>Copy</span>
+        </button>
+        <% if tool_call_count > 3 %>
+          <button type="button" @click="expanded = !expanded" class="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+            <span x-text="expanded ? 'Collapse' : 'Expand'">Expand</span>
+          </button>
+        <% end %>
       </div>
-      <button
-        type="button"
-        data-copy-json="<%= Base64.strict_encode64(JSON.pretty_generate(@execution.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">
-          <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>
-        <svg class="w-4 h-4 check-icon hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
-        </svg>
-        <span>Copy</span>
-      </button>
-    </div>
+    <% end %>
+  </div>
 
-    <div class="space-y-4">
-      <% @execution.tool_calls.each_with_index do |tool_call, index| %>
+  <% if tool_call_count > 0 %>
+    <div class="space-y-4" x-show="expanded" <%= tool_call_count > 3 ? 'x-cloak' : '' %>>
+      <% tool_calls.each_with_index do |tool_call, index| %>
         <%
           # Handle both symbol and string keys
           tool_id = tool_call['id'] || tool_call[:id]
@@ -549,31 +645,41 @@
         </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? %>
-  <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">Metadata</h3>
-      <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)) %>"
-        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">
-          <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>
-        <svg class="w-4 h-4 check-icon hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
-        </svg>
-        <span>Copy</span>
-      </button>
+  <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: false }">
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-2">
+        <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Metadata</h3>
+        <span class="text-xs text-gray-400 dark:text-gray-500">(<%= @execution.metadata.keys.count %> keys)</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <button
+          type="button"
+          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">
+            <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>
+          <svg class="w-4 h-4 check-icon hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+          </svg>
+          <span>Copy</span>
+        </button>
+        <button type="button" @click="expanded = !expanded" class="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+          <span x-text="expanded ? 'Collapse' : 'Expand'">Expand</span>
+        </button>
+      </div>
+    </div>
+    <div x-show="expanded" x-cloak class="mt-4">
+      <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>
-    <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 %>
 
@@ -618,6 +724,7 @@
         <span id="system-prompt-toggle">Expand</span>
       </button>
     </div>
+    <p id="system-prompt-preview" class="text-sm text-gray-600 dark:text-gray-300 font-mono bg-gray-50 dark:bg-gray-900 rounded-lg p-3 truncate"><%= @execution.system_prompt.truncate(150) %></p>
     <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 %>
@@ -631,6 +738,7 @@
         <span id="user-prompt-toggle">Expand</span>
       </button>
     </div>
+    <p id="user-prompt-preview" class="text-sm text-gray-600 dark:text-gray-300 font-mono bg-gray-50 dark:bg-gray-900 rounded-lg p-3 truncate"><%= @execution.user_prompt.truncate(150) %></p>
     <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 %>
@@ -867,66 +975,18 @@
   // Prompt toggle function
   function togglePrompt(type) {
     const content = document.getElementById(type + '-prompt-content');
+    const preview = document.getElementById(type + '-prompt-preview');
     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);
-      }
-    });
+    const isHidden = content.classList.contains('hidden');
+    content.classList.toggle('hidden', !isHidden);
+    if (preview) preview.classList.toggle('hidden', isHidden);
+    toggle.textContent = isHidden ? 'Collapse' : 'Expand';
   }
 
   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');
@@ -972,8 +1032,8 @@
     }
   });
 
-  // Diagnostics panel toggle
-  let diagnosticsExpanded = localStorage.getItem('ruby_llm_agents_diagnostics_expanded') === 'true';
+  // Diagnostics panel toggle (default to expanded)
+  let diagnosticsExpanded = localStorage.getItem('ruby_llm_agents_diagnostics_expanded') !== 'false';
 
   function toggleDiagnostics() {
     diagnosticsExpanded = !diagnosticsExpanded;

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

@@ -128,7 +128,7 @@
             <p class="text-sm font-medium text-gray-900 dark:text-gray-100">Parent Controller</p>
             <p class="text-xs text-gray-500 dark:text-gray-400">Dashboard inherits from this</p>
           </div>
-          <code class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 px-2 py-1 rounded text-sm text-xs"><%= @config.dashboard_parent_controller %></code>
+          <code class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 px-2 py-1 rounded text-xs"><%= @config.dashboard_parent_controller %></code>
         </div>
         <div class="flex justify-between items-center">
           <div>