ruby_llm-agents 0.1.0

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

@@ -0,0 +1,83 @@
+<h2 class="text-2xl font-bold text-gray-900 mb-6">Executions</h2>
+
+<%= turbo_frame_tag "executions_content" do %>
+  <%= render partial: "rubyllm/agents/executions/filters", locals: { agent_types: @agent_types, filter_stats: @filter_stats } %>
+  <%= render partial: "rubyllm/agents/executions/list", locals: { executions: @executions, pagination: @pagination, filter_stats: @filter_stats } %>
+<% end %>
+
+<script>
+  function toggleDropdown(button) {
+    document.querySelectorAll('.filter-dropdown .dropdown-menu').forEach(menu => {
+      if (menu !== button.nextElementSibling) {
+        menu.classList.add('hidden');
+      }
+    });
+    button.nextElementSibling.classList.toggle('hidden');
+  }
+
+  function selectSingleFilter(name, value, label) {
+    document.getElementById('filter_' + name).value = value;
+    // Update button label
+    const dropdown = document.querySelector(`[data-filter="${name}"]`);
+    dropdown.querySelector('.dropdown-label').textContent = label;
+    // Update ring
+    const button = dropdown.querySelector('button');
+    if (value) {
+      button.classList.add('ring-2', 'ring-blue-500', 'ring-offset-1');
+    } else {
+      button.classList.remove('ring-2', 'ring-blue-500', 'ring-offset-1');
+    }
+    // Close dropdown and submit
+    dropdown.querySelector('.dropdown-menu').classList.add('hidden');
+    document.getElementById('filters-form').requestSubmit();
+  }
+
+  function toggleAllOptions(checkbox, filterName) {
+    const dropdown = document.querySelector(`[data-filter="${filterName}"]`);
+    const checkboxes = dropdown.querySelectorAll('.filter-checkbox');
+
+    if (checkbox.checked) {
+      // Uncheck all specific options
+      checkboxes.forEach(cb => cb.checked = false);
+      updateMultiSelect(filterName);
+    }
+  }
+
+  function updateMultiSelect(filterName) {
+    const dropdown = document.querySelector(`[data-filter="${filterName}"]`);
+    const checkboxes = dropdown.querySelectorAll('.filter-checkbox:checked');
+    const selectAllCheckbox = dropdown.querySelector('.select-all-checkbox');
+    const button = dropdown.querySelector('button');
+    const label = dropdown.querySelector('.dropdown-label');
+
+    const count = checkboxes.length;
+
+    // Update "All" checkbox
+    selectAllCheckbox.checked = (count === 0);
+
+    // Update label
+    if (count === 0) {
+      label.textContent = filterName === 'agent_types' ? 'All Agents' : 'All Statuses';
+      button.classList.remove('ring-2', 'ring-blue-500', 'ring-offset-1');
+    } else if (count === 1) {
+      const value = checkboxes[0].value;
+      label.textContent = filterName === 'agent_types' ? value.replace(/Agent$/, '') : value.charAt(0).toUpperCase() + value.slice(1);
+      button.classList.add('ring-2', 'ring-blue-500', 'ring-offset-1');
+    } else {
+      label.textContent = `${count} ${filterName === 'agent_types' ? 'Agents' : 'Statuses'}`;
+      button.classList.add('ring-2', 'ring-blue-500', 'ring-offset-1');
+    }
+
+    // Submit form
+    document.getElementById('filters-form').requestSubmit();
+  }
+
+  // Close dropdowns when clicking outside
+  document.addEventListener('click', function(e) {
+    if (!e.target.closest('.filter-dropdown')) {
+      document.querySelectorAll('.filter-dropdown .dropdown-menu').forEach(menu => {
+        menu.classList.add('hidden');
+      });
+    }
+  });
+</script>

data/app/views/rubyllm/agents/executions/index.turbo_stream.erb

@@ -0,0 +1,4 @@
+<%= turbo_stream.replace "executions_content" do %>
+  <%= render partial: "rubyllm/agents/executions/filters", locals: { agent_types: @agent_types, filter_stats: @filter_stats } %>
+  <%= render partial: "rubyllm/agents/executions/list", locals: { executions: @executions, pagination: @pagination, filter_stats: @filter_stats } %>
+<% end %>

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

@@ -0,0 +1,240 @@
+<div class="mb-6">
+  <%= link_to ruby_llm_agents.executions_path, class: "inline-flex items-center text-sm text-gray-500 hover:text-gray-700" 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>
+
+<!-- Header -->
+<div class="bg-white border border-gray-200 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">
+          <%= @execution.agent_type.gsub(/Agent$/, '') %>
+        </h2>
+
+        <%= render "rubyllm/agents/shared/status_badge", status: @execution.status, size: :md %>
+      </div>
+
+      <p class="text-sm text-gray-500 mt-1">
+        Execution #<%= @execution.id %> · v<%= @execution.agent_version %>
+      </p>
+    </div>
+
+    <div class="text-right text-sm text-gray-500">
+      <p><%= @execution.created_at.strftime("%b %d, %Y at %H:%M") %></p>
+
+      <p class="text-xs text-gray-400">
+        <%= time_ago_in_words(@execution.created_at) %> ago
+      </p>
+    </div>
+  </div>
+</div>
+
+<!-- Stats Grid -->
+<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+  <%= render "rubyllm/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",
+      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",
+      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",
+      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",
+      icon_color: "text-amber-500" %>
+</div>
+
+<!-- Token Breakdown -->
+<div class="bg-white border border-gray-200 rounded-xl p-6 mb-6">
+  <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wide mb-4">Token Usage</h3>
+
+  <!-- Token Distribution Bar -->
+  <%
+    input_tokens = @execution.input_tokens || 0
+    output_tokens = @execution.output_tokens || 0
+    total = input_tokens + output_tokens
+    input_pct = total > 0 ? (input_tokens.to_f / total * 100).round(1) : 0
+    output_pct = total > 0 ? (output_tokens.to_f / total * 100).round(1) : 0
+  %>
+  <div class="mb-6">
+    <div class="flex justify-between text-xs mb-1.5">
+      <span class="text-blue-600 font-medium">Input: <%= number_to_human_short(input_tokens) %> (<%= input_pct %>%)</span>
+      <span class="text-green-600 font-medium">Output: <%= number_to_human_short(output_tokens) %> (<%= output_pct %>%)</span>
+    </div>
+    <div class="h-2.5 bg-gray-100 rounded-full overflow-hidden flex">
+      <div class="bg-blue-500 transition-all" style="width: <%= input_pct %>%"></div>
+      <div class="bg-green-500 transition-all" style="width: <%= output_pct %>%"></div>
+    </div>
+  </div>
+
+  <!-- Detailed Metrics -->
+  <div class="grid grid-cols-2 md:grid-cols-5 gap-6 pt-4 border-t border-gray-100">
+    <div>
+      <p class="text-xs text-gray-500 uppercase tracking-wide">Input</p>
+      <p class="text-lg font-semibold text-gray-900"><%= number_to_human_short(@execution.input_tokens || 0) %></p>
+      <p class="text-xs text-gray-400"><%= number_to_human_short(@execution.input_cost || 0, prefix: "$", precision: 4) %></p>
+    </div>
+
+    <div>
+      <p class="text-xs text-gray-500 uppercase tracking-wide">Output</p>
+      <p class="text-lg font-semibold text-gray-900"><%= number_to_human_short(@execution.output_tokens || 0) %></p>
+      <p class="text-xs text-gray-400"><%= number_to_human_short(@execution.output_cost || 0, prefix: "$", precision: 4) %></p>
+    </div>
+
+    <div>
+      <p class="text-xs text-gray-500 uppercase tracking-wide">Cached</p>
+      <p class="text-lg font-semibold text-gray-900"><%= number_to_human_short(@execution.cached_tokens || 0) %></p>
+    </div>
+
+    <div>
+      <p class="text-xs text-gray-500 uppercase tracking-wide">Cache Creation</p>
+      <p class="text-lg font-semibold text-gray-900"><%= number_to_human_short(@execution.cache_creation_tokens || 0) %></p>
+    </div>
+
+    <div>
+      <p class="text-xs text-gray-500 uppercase tracking-wide">Tokens/Sec</p>
+      <p class="text-lg font-semibold text-gray-900"><%= @execution.tokens_per_second || 'N/A' %></p>
+    </div>
+  </div>
+</div>
+
+<% if @execution.status_error? %>
+  <!-- Error Details -->
+  <div class="bg-red-50 border border-red-200 rounded-lg p-6 mb-6">
+    <h3 class="text-lg font-semibold text-red-800 mb-2">Error Details</h3>
+
+    <p class="font-mono text-sm text-red-700 mb-2">
+      <%= @execution.error_class %>
+    </p>
+
+    <pre class="bg-red-100 rounded p-4 text-sm text-red-900 overflow-x-auto"><%= @execution.error_message %></pre>
+  </div>
+<% end %>
+
+<!-- Parameters -->
+<div class="bg-white border border-gray-200 rounded-xl p-6 mb-6">
+  <div class="flex items-center justify-between mb-4">
+    <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wide">Parameters</h3>
+    <button
+      type="button"
+      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 hover:text-gray-700 hover:bg-gray-100 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>
+  <pre class="bg-gray-50 rounded-lg p-4 text-sm overflow-x-auto font-mono"><%= highlight_json(@execution.parameters || {}) %></pre>
+</div>
+
+<!-- Response -->
+<% if @execution.response.present? %>
+  <div class="bg-white border border-gray-200 rounded-xl p-6 mb-6">
+    <div class="flex items-center justify-between mb-4">
+      <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wide">Response</h3>
+      <button
+        type="button"
+        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 hover:text-gray-700 hover:bg-gray-100 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>
+    <pre class="bg-gray-50 rounded-lg p-4 text-sm overflow-x-auto max-h-96 font-mono"><%= highlight_json(@execution.response) %></pre>
+  </div>
+<% end %>
+
+<!-- Metadata -->
+<% if @execution.metadata.present? && @execution.metadata.any? %>
+  <div class="bg-white border border-gray-200 rounded-xl p-6 mb-6">
+    <div class="flex items-center justify-between mb-4">
+      <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wide">Metadata</h3>
+      <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 hover:text-gray-700 hover:bg-gray-100 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>
+    <pre class="bg-gray-50 rounded-lg p-4 text-sm overflow-x-auto font-mono"><%= highlight_json(@execution.metadata) %></pre>
+  </div>
+<% end %>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    document.querySelectorAll('.copy-json-btn').forEach(function(button) {
+      button.addEventListener('click', function() {
+        const base64Data = this.getAttribute('data-copy-json');
+        const jsonText = atob(base64Data);
+        const span = this.querySelector('span');
+        const copyIcon = this.querySelector('.copy-icon');
+        const checkIcon = this.querySelector('.check-icon');
+
+        navigator.clipboard.writeText(jsonText).then(function() {
+          span.textContent = 'Copied!';
+          copyIcon.classList.add('hidden');
+          checkIcon.classList.remove('hidden');
+          button.classList.add('text-green-600');
+
+          setTimeout(function() {
+            span.textContent = 'Copy';
+            copyIcon.classList.remove('hidden');
+            checkIcon.classList.add('hidden');
+            button.classList.remove('text-green-600');
+          }, 2000);
+        }).catch(function(err) {
+          console.error('Failed to copy:', err);
+          span.textContent = 'Failed';
+          setTimeout(function() {
+            span.textContent = 'Copy';
+          }, 2000);
+        });
+      });
+    });
+  });
+</script>

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

@@ -0,0 +1,193 @@
+<% if executions.empty? %>
+  <p class="text-gray-500 text-center py-8">No executions found.</p>
+<% else %>
+  <div class="overflow-x-auto">
+    <table class="min-w-full divide-y divide-gray-200">
+      <thead>
+        <tr>
+          <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+          <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Version</th>
+          <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Model</th>
+          <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Temp</th>
+          <th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Tokens</th>
+          <th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Cost</th>
+          <th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th>
+          <th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
+        </tr>
+      </thead>
+      <tbody class="bg-white divide-y divide-gray-100">
+        <% executions.each do |execution| %>
+          <!-- Main Row (clickable to expand) -->
+          <tr class="hover:bg-gray-50 transition-colors cursor-pointer group"
+              onclick="toggleExecutionDetails('<%= execution.id %>')"
+              id="execution-row-<%= execution.id %>">
+            <td class="px-4 py-3 whitespace-nowrap">
+              <div class="flex items-center">
+                <svg class="w-4 h-4 mr-2 text-gray-400 transform transition-transform duration-200"
+                     id="chevron-<%= execution.id %>" 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>
+                <%= render "rubyllm/agents/shared/status_badge", status: execution.status %>
+              </div>
+            </td>
+            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
+              v<%= execution.agent_version %>
+            </td>
+            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
+              <%= execution.model_id %>
+            </td>
+            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
+              <%= execution.temperature %>
+            </td>
+            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 text-right font-medium">
+              <%= number_to_human_short(execution.total_tokens || 0) %>
+            </td>
+            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 text-right font-medium">
+              <%= number_to_human_short(execution.total_cost || 0, prefix: "$", precision: 2) %>
+            </td>
+            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 text-right font-medium">
+              <%= number_with_delimiter(execution.duration_ms || 0) %>ms
+            </td>
+            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-right">
+              <%= time_ago_in_words(execution.created_at) %> ago
+            </td>
+          </tr>
+
+          <!-- Error Row (if applicable) -->
+          <% if execution.status_error? && execution.error_message.present? %>
+            <tr class="bg-red-50">
+              <td colspan="8" class="px-4 py-2">
+                <p class="text-xs text-red-600">
+                  <span class="font-medium"><%= execution.error_class %>:</span>
+                  <%= truncate(execution.error_message, length: 150) %>
+                </p>
+              </td>
+            </tr>
+          <% end %>
+
+          <!-- Expandable Details Row (hidden by default) -->
+          <tr id="execution-details-<%= execution.id %>" class="hidden bg-gray-50">
+            <td colspan="8" class="px-4 py-4">
+              <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <% if execution.respond_to?(:system_prompt) && execution.system_prompt.present? %>
+                  <div>
+                    <h4 class="text-xs font-medium text-gray-500 uppercase mb-2">System Prompt</h4>
+                    <pre class="bg-white border border-gray-200 rounded-lg p-3 text-xs overflow-x-auto max-h-48 overflow-y-auto font-mono whitespace-pre-wrap"><%= execution.system_prompt %></pre>
+                  </div>
+                <% end %>
+
+                <% if execution.respond_to?(:user_prompt) && execution.user_prompt.present? %>
+                  <div>
+                    <h4 class="text-xs font-medium text-gray-500 uppercase mb-2">User Prompt</h4>
+                    <pre class="bg-white border border-gray-200 rounded-lg p-3 text-xs overflow-x-auto max-h-48 overflow-y-auto font-mono whitespace-pre-wrap"><%= execution.user_prompt %></pre>
+                  </div>
+                <% end %>
+
+                <% if execution.parameters.present? && execution.parameters.any? %>
+                  <div>
+                    <h4 class="text-xs font-medium text-gray-500 uppercase mb-2">Parameters</h4>
+                    <pre class="bg-white border border-gray-200 rounded-lg p-3 text-xs overflow-x-auto max-h-48 overflow-y-auto font-mono"><%= JSON.pretty_generate(execution.parameters) %></pre>
+                  </div>
+                <% end %>
+
+                <% if execution.response.present? && execution.response.any? %>
+                  <div>
+                    <h4 class="text-xs font-medium text-gray-500 uppercase mb-2">Response</h4>
+                    <pre class="bg-white border border-gray-200 rounded-lg p-3 text-xs overflow-x-auto max-h-48 overflow-y-auto font-mono"><%= JSON.pretty_generate(execution.response) %></pre>
+                  </div>
+                <% end %>
+
+                <% if execution.metadata.present? && execution.metadata.any? %>
+                  <div>
+                    <h4 class="text-xs font-medium text-gray-500 uppercase mb-2">Metadata</h4>
+                    <pre class="bg-white border border-gray-200 rounded-lg p-3 text-xs overflow-x-auto max-h-48 overflow-y-auto font-mono"><%= JSON.pretty_generate(execution.metadata) %></pre>
+                  </div>
+                <% end %>
+              </div>
+
+              <!-- View Full Details Link -->
+              <div class="mt-3 pt-3 border-t border-gray-200">
+                <%= link_to ruby_llm_agents.execution_path(execution), class: "text-sm text-blue-600 hover:underline", onclick: "event.stopPropagation();" do %>
+                  View Full Details &rarr;
+                <% end %>
+              </div>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+
+  <% if pagination[:total_pages] > 1 %>
+    <%
+      current_page = pagination[:current_page]
+      total_pages = pagination[:total_pages]
+      total_count = pagination[:total_count]
+      per_page = pagination[:per_page]
+
+      from_record = ((current_page - 1) * per_page) + 1
+      to_record = [current_page * per_page, total_count].min
+    %>
+    <div class="mt-4 flex items-center justify-between border-t border-gray-100 pt-4">
+      <p class="text-sm text-gray-500">
+        Showing <%= from_record %>-<%= to_record %> of <%= number_with_delimiter(total_count) %> executions
+      </p>
+      <nav class="flex items-center space-x-1">
+        <% if current_page > 1 %>
+          <%= link_to "Previous", url_for(request.query_parameters.merge(page: current_page - 1)), data: { turbo_frame: "executions_table" }, class: "px-3 py-1.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50" %>
+        <% else %>
+          <span class="px-3 py-1.5 text-sm font-medium text-gray-400 bg-gray-100 border border-gray-200 rounded-md cursor-not-allowed">Previous</span>
+        <% end %>
+
+        <%
+          # Calculate which page numbers to show
+          window = 2
+          left_edge = 1
+          right_edge = 1
+
+          pages_to_show = []
+          (1..total_pages).each do |page|
+            if page <= left_edge ||
+               page > total_pages - right_edge ||
+               (page >= current_page - window && page <= current_page + window)
+              pages_to_show << page
+            elsif pages_to_show.last != :gap
+              pages_to_show << :gap
+            end
+          end
+        %>
+
+        <% pages_to_show.each do |page| %>
+          <% if page == :gap %>
+            <span class="px-2 py-1.5 text-sm text-gray-500">...</span>
+          <% elsif page == current_page %>
+            <span class="px-3 py-1.5 text-sm font-medium text-white bg-blue-600 border border-blue-600 rounded-md"><%= page %></span>
+          <% else %>
+            <%= link_to page, url_for(request.query_parameters.merge(page: page)), data: { turbo_frame: "executions_table" }, class: "px-3 py-1.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50" %>
+          <% end %>
+        <% end %>
+
+        <% if current_page < total_pages %>
+          <%= link_to "Next", url_for(request.query_parameters.merge(page: current_page + 1)), data: { turbo_frame: "executions_table" }, class: "px-3 py-1.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50" %>
+        <% else %>
+          <span class="px-3 py-1.5 text-sm font-medium text-gray-400 bg-gray-100 border border-gray-200 rounded-md cursor-not-allowed">Next</span>
+        <% end %>
+      </nav>
+    </div>
+  <% end %>
+<% end %>
+
+<script>
+  function toggleExecutionDetails(id) {
+    const detailsRow = document.getElementById(`execution-details-${id}`);
+    const chevron = document.getElementById(`chevron-${id}`);
+
+    if (detailsRow.classList.contains('hidden')) {
+      detailsRow.classList.remove('hidden');
+      chevron.classList.add('rotate-90');
+    } else {
+      detailsRow.classList.add('hidden');
+      chevron.classList.remove('rotate-90');
+    }
+  }
+</script>

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

@@ -0,0 +1,14 @@
+<div class="bg-white border border-gray-200 rounded-xl p-4">
+  <div class="flex items-center justify-between">
+    <p class="text-xs text-gray-500 uppercase tracking-wide font-medium"><%= title %></p>
+    <span class="<%= local_assigns[:icon_color] || 'text-gray-400' %>">
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="<%= icon %>"/>
+      </svg>
+    </span>
+  </div>
+  <p class="text-xl font-semibold <%= local_assigns[:value_color] || 'text-gray-900' %> mt-2"><%= value %></p>
+  <% if local_assigns[:subtitle].present? %>
+    <p class="text-xs text-gray-400"><%= subtitle %></p>
+  <% end %>
+</div>

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

@@ -0,0 +1,65 @@
+<%
+  # Status badge with icon and color coding
+  # Usage: render "rubyllm/agents/shared/status_badge", status: execution.status
+  # Options: size: :sm (default), :md, :lg
+
+  size = local_assigns[:size] || :sm
+
+  config = case status.to_s
+    when "running"
+      {
+        bg: "bg-blue-50",
+        text: "text-blue-700",
+        dot: "bg-blue-500",
+        icon: "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",
+        animate: true
+      }
+    when "success"
+      {
+        bg: "bg-green-50",
+        text: "text-green-700",
+        dot: "bg-green-500",
+        icon: "M5 13l4 4L19 7",
+        animate: false
+      }
+    when "error"
+      {
+        bg: "bg-red-50",
+        text: "text-red-700",
+        dot: "bg-red-500",
+        icon: "M6 18L18 6M6 6l12 12",
+        animate: false
+      }
+    when "timeout"
+      {
+        bg: "bg-yellow-50",
+        text: "text-yellow-700",
+        dot: "bg-yellow-500",
+        icon: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z",
+        animate: false
+      }
+    else
+      {
+        bg: "bg-gray-50",
+        text: "text-gray-700",
+        dot: "bg-gray-500",
+        icon: "M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
+        animate: false
+      }
+    end
+
+  size_classes = case size
+    when :lg
+      { badge: "px-3 py-1.5", icon: "w-4 h-4", text: "text-sm" }
+    when :md
+      { badge: "px-2.5 py-1", icon: "w-3.5 h-3.5", text: "text-sm" }
+    else # :sm
+      { badge: "px-2 py-0.5", icon: "w-3 h-3", text: "text-xs" }
+    end
+%>
+<span class="inline-flex items-center gap-1.5 <%= size_classes[:badge] %> rounded-full <%= config[:bg] %> <%= config[:text] %> font-medium">
+  <svg class="<%= size_classes[:icon] %> <%= config[:animate] ? 'animate-spin' : '' %>" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="<%= config[:icon] %>"/>
+  </svg>
+  <span class="<%= size_classes[:text] %>"><%= status.to_s.capitalize %></span>
+</span>

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

@@ -0,0 +1,18 @@
+<%
+  # Simple status dot indicator
+  # Usage: render "rubyllm/agents/shared/status_dot", status: execution.status
+
+  config = case status.to_s
+    when "running"
+      { color: "bg-blue-500", animate: true }
+    when "success"
+      { color: "bg-green-500", animate: false }
+    when "error"
+      { color: "bg-red-500", animate: false }
+    when "timeout"
+      { color: "bg-yellow-500", animate: false }
+    else
+      { color: "bg-gray-500", animate: false }
+    end
+%>
+<span class="w-2.5 h-2.5 rounded-full <%= config[:color] %> <%= config[:animate] ? 'animate-pulse' : '' %> flex-shrink-0"></span>

data/config/routes.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+RubyLLM::Agents::Engine.routes.draw do
+  root to: "dashboard#index"
+
+  resources :agents, only: [:index, :show]
+
+  resources :executions, only: [:index, :show] do
+    collection do
+      get :search
+    end
+  end
+end