ruby_llm-agents 0.3.1 → 0.3.4

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

@@ -1,74 +1,153 @@
 <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 "rubyllm/agents/shared/breadcrumbs", items: [
+  { label: "Dashboard", path: ruby_llm_agents.root_path },
+  { label: "Executions", path: ruby_llm_agents.executions_path },
+  { label: "##{@execution.id}" }
+] %>
 
 <!-- Header -->
-<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">
-    <div>
-      <div class="flex items-center gap-3">
-        <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100">
-          <%= @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.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 %>
+<%
+  # 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">
+    <div class="flex items-center gap-3 min-w-0">
+      <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 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">
+          <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 %>
+      <button
+        type="button"
+        onclick="confirmRerun()"
+        class="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors"
+        title="Re-execute this agent with the same parameters"
+      >
+        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+        </svg>
+        Rerun
+      </button>
+      <span class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap"><%= @execution.created_at.strftime("%b %d, %H:%M") %></span>
+    </div>
+  </div>
 
-        <% 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>
+  <!-- Desktop: Row 2 - Info line + relative time -->
+  <div class="hidden sm:flex sm:items-center sm:justify-between mt-1.5">
+    <p class="text-xs text-gray-500 dark:text-gray-400">
+      #<%= @execution.id %> · v<%= @execution.agent_version %>
+      <% if @execution.model_provider.present? %>
+        · <%= @execution.model_provider %>
+      <% end %>
+    </p>
+    <span class="text-xs text-gray-400 dark:text-gray-500"><%= time_ago_in_words(@execution.created_at) %> ago</span>
+  </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>
+  <!-- Mobile: Stacked layout -->
+  <div class="sm:hidden">
+    <h2 class="text-lg font-bold text-gray-900 dark:text-gray-100 truncate">
+      <%= @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 %>
+      <% 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">
+      #<%= @execution.id %> · v<%= @execution.agent_version %>
+      <% if @execution.model_provider.present? %>
+        · <%= @execution.model_provider %>
+      <% end %>
+    </p>
 
-    <div class="flex items-center gap-4">
-      <!-- Rerun Buttons -->
+    <!-- Mobile: Date + Buttons -->
+    <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 mb-3">
+        <%= @execution.created_at.strftime("%b %d, %Y at %H:%M") %>
+        <span class="text-gray-400 dark:text-gray-500">· <%= time_ago_in_words(@execution.created_at) %> ago</span>
+      </p>
       <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",
+            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">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
@@ -76,11 +155,10 @@
           </svg>
           Dry Run
         <% end %>
-
         <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"
+          class="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-2 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">
@@ -89,14 +167,6 @@
           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>
@@ -438,28 +508,116 @@
   </div>
 <% end %>
 
-<!-- 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">
+<!-- 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">
-      <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"/>
+      <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>
-        <span>Copy</span>
-      </button>
+        <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>
+      <div class="flex items-center gap-2">
+        <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>
+        <% 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>
+    </div>
+
+    <div class="space-y-4" x-show="expanded" <%= tool_call_count > 3 ? 'x-cloak' : '' %>>
+      <% @execution.tool_calls.each_with_index do |tool_call, index| %>
+        <%
+          # Handle both symbol and string keys
+          tool_id = tool_call['id'] || tool_call[:id]
+          tool_name = tool_call['name'] || tool_call[:name]
+          tool_args = tool_call['arguments'] || tool_call[:arguments] || {}
+        %>
+        <div class="border border-gray-100 dark:border-gray-700 rounded-lg overflow-hidden">
+          <!-- Tool Call Header -->
+          <div class="bg-gray-50 dark:bg-gray-900/50 px-4 py-3 flex items-center justify-between">
+            <div class="flex items-center gap-3">
+              <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 text-xs font-medium">
+                <%= index + 1 %>
+              </span>
+              <code class="text-sm font-semibold text-gray-900 dark:text-gray-100"><%= tool_name %></code>
+            </div>
+            <% if tool_id.present? %>
+              <span class="text-xs text-gray-400 dark:text-gray-500 font-mono truncate max-w-xs" title="<%= tool_id %>">
+                <%= tool_id.to_s.truncate(24) %>
+              </span>
+            <% end %>
+          </div>
+
+          <!-- Tool Call Arguments -->
+          <% if tool_args.present? && tool_args.any? %>
+            <div class="px-4 py-3">
+              <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">Arguments</p>
+              <pre class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-lg p-3 text-sm overflow-x-auto font-mono"><%= highlight_json(tool_args) %></pre>
+            </div>
+          <% else %>
+            <div class="px-4 py-3">
+              <p class="text-xs text-gray-400 dark:text-gray-500 italic">No arguments</p>
+            </div>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+<% end %>
+
+<!-- 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" 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(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>
+        <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 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>
-    <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 %>
 
@@ -504,6 +662,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 %>
@@ -517,6 +676,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 %>
@@ -753,9 +913,12 @@
   // 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';
+    const isHidden = content.classList.contains('hidden');
+    content.classList.toggle('hidden', !isHidden);
+    if (preview) preview.classList.toggle('hidden', isHidden);
+    toggle.textContent = isHidden ? 'Collapse' : 'Expand';
   }
 
   // Masking state (persisted in localStorage)
@@ -858,8 +1021,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/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>

data/app/views/rubyllm/agents/shared/_breadcrumbs.html.erb

@@ -0,0 +1,48 @@
+<%
+  # Breadcrumb navigation partial
+  # Usage:
+  #   render "rubyllm/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: [
+  #     ["Dashboard", ruby_llm_agents.root_path],
+  #     ["Executions", ruby_llm_agents.executions_path],
+  #     ["#123"]
+  #   ]
+
+  items = local_assigns[:items] || []
+%>
+<nav class="flex items-center text-sm mb-4" aria-label="Breadcrumb">
+  <ol class="flex items-center space-x-1">
+    <% items.each_with_index do |item, index| %>
+      <%
+        # Normalize item format
+        if item.is_a?(Array)
+          label = item[0]
+          path = item[1]
+        else
+          label = item[:label]
+          path = item[:path]
+        end
+        is_last = index == items.length - 1
+      %>
+      <li class="flex items-center">
+        <% if index > 0 %>
+          <svg class="w-4 h-4 text-gray-400 dark:text-gray-500 mx-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+          </svg>
+        <% end %>
+
+        <% if path.present? && !is_last %>
+          <%= link_to label, path, class: "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors" %>
+        <% else %>
+          <span class="text-gray-900 dark:text-gray-100 font-medium"><%= label %></span>
+        <% end %>
+      </li>
+    <% end %>
+  </ol>
+</nav>

data/app/views/rubyllm/agents/shared/_nav_link.html.erb

@@ -0,0 +1,27 @@
+<%# Reusable navigation link for desktop and mobile %>
+<%
+  # Determine if link is active
+  is_active = if path == ruby_llm_agents.root_path
+    current_page?(path)
+  elsif path == ruby_llm_agents.agents_path
+    request.path.start_with?(path)
+  else
+    current_page?(path)
+  end
+
+  # Style classes
+  base_classes = mobile ? "flex items-center px-3 py-2 text-base font-medium rounded-md" : "inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md"
+  active_classes = "bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+  inactive_classes = "text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700"
+  icon_classes = mobile ? "w-5 h-5 mr-3" : "w-4 h-4 mr-1.5"
+
+  link_options = { class: "#{base_classes} #{is_active ? active_classes : inactive_classes}" }
+  link_options["x-on:click"] = "mobileMenuOpen = false" if mobile
+%>
+
+<%= link_to path, **link_options do %>
+  <svg class="<%= icon_classes %>" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <%= icon.html_safe %>
+  </svg>
+  <%= label %>
+<% end %>

data/config/routes.rb

@@ -16,5 +16,7 @@ RubyLLM::Agents::Engine.routes.draw do
     end
   end
 
+  # Redirect old analytics route to dashboard
+  get "analytics", to: redirect("/")
   resource :settings, only: [:show]
 end

data/lib/generators/ruby_llm_agents/templates/add_tool_calls_migration.rb.tt

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+# Migration to add dedicated tool_calls column to executions
+#
+# This migration adds a dedicated column for storing tool call data,
+# enabling easier querying and display of tool/function calls made
+# during agent execution.
+#
+# Tool call structure:
+# [
+#   { "id": "call_abc123", "name": "search", "arguments": { "query": "..." } },
+#   { "id": "call_def456", "name": "calculate", "arguments": { ... } }
+# ]
+#
+# Run with: rails db:migrate
+class AddToolCallsToRubyLLMAgentsExecutions < ActiveRecord::Migration<%= migration_version %>
+  def change
+    # Add tool_calls JSONB array for storing tool call details
+    # Each tool call contains: id, name, arguments
+    add_column :ruby_llm_agents_executions, :tool_calls, :jsonb, null: false, default: []
+
+    # Add counter for quick access to tool call count
+    add_column :ruby_llm_agents_executions, :tool_calls_count, :integer, null: false, default: 0
+
+    # Add index for querying executions that have tool calls
+    add_index :ruby_llm_agents_executions, :tool_calls_count
+  end
+end

data/lib/generators/ruby_llm_agents/templates/migration.rb.tt

@@ -67,6 +67,10 @@ class CreateRubyLLMAgentsExecutions < ActiveRecord::Migration<%= migration_versi
       t.text :system_prompt
       t.text :user_prompt
 
+      # Tool calls tracking
+      t.jsonb :tool_calls, null: false, default: []
+      t.integer :tool_calls_count, null: false, default: 0
+
       t.timestamps
     end
 
@@ -89,6 +93,9 @@ class CreateRubyLLMAgentsExecutions < ActiveRecord::Migration<%= migration_versi
     # Caching index
     add_index :ruby_llm_agents_executions, :response_cache_key
 
+    # Tool calls index
+    add_index :ruby_llm_agents_executions, :tool_calls_count
+
     # Foreign keys for execution hierarchy
     add_foreign_key :ruby_llm_agents_executions, :ruby_llm_agents_executions,
                     column: :parent_execution_id, on_delete: :nullify

data/lib/generators/ruby_llm_agents/upgrade_generator.rb

@@ -107,6 +107,19 @@ module RubyLlmAgents
       )
     end
 
+    def create_add_tool_calls_migration
+      # Check if columns already exist
+      if column_exists?(:ruby_llm_agents_executions, :tool_calls)
+        say_status :skip, "tool_calls column already exists", :yellow
+        return
+      end
+
+      migration_template(
+        "add_tool_calls_migration.rb.tt",
+        File.join(db_migrate_path, "add_tool_calls_to_ruby_llm_agents_executions.rb")
+      )
+    end
+
     def show_post_upgrade_message
       say ""
       say "RubyLLM::Agents upgrade migration created!", :green

data/lib/ruby_llm/agents/base/caching.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module RubyLLM
+  module Agents
+    class Base
+      # Cache management for agent responses
+      #
+      # Handles cache key generation and store access for
+      # caching agent execution results.
+      module Caching
+        # Returns the configured cache store
+        #
+        # @return [ActiveSupport::Cache::Store] The cache store
+        def cache_store
+          RubyLLM::Agents.configuration.cache_store
+        end
+
+        # Generates the full cache key for this agent invocation
+        #
+        # @return [String] Cache key in format "ruby_llm_agent/ClassName/version/hash"
+        def cache_key
+          ["ruby_llm_agent", self.class.name, self.class.version, cache_key_hash].join("/")
+        end
+
+        # Generates a hash of the cache key data
+        #
+        # @return [String] SHA256 hex digest of the cache key data
+        def cache_key_hash
+          Digest::SHA256.hexdigest(cache_key_data.to_json)
+        end
+
+        # Returns data to include in cache key generation
+        #
+        # Override to customize what parameters affect cache invalidation.
+        #
+        # @return [Hash] Data to hash for cache key
+        def cache_key_data
+          @options.except(:skip_cache, :dry_run, :with)
+        end
+      end
+    end
+  end
+end