ruby_llm-agents 0.1.0

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

@@ -0,0 +1,562 @@
+<div class="mb-6">
+  <%= link_to ruby_llm_agents.agents_path, class: "text-blue-600 hover:underline" do %>
+    <span class="inline-flex items-center">
+      <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 Agents
+    </span>
+  <% end %>
+</div>
+
+<!-- Header -->
+<div class="bg-white rounded-lg shadow p-6 mb-6">
+  <div class="flex items-start justify-between">
+    <div>
+      <div class="flex items-center space-x-3">
+        <h1 class="text-2xl font-bold text-gray-900">
+          <%= @agent_type.gsub(/Agent$/, '') %>
+        </h1>
+
+        <% if @agent_active %>
+          <span
+            class="
+              inline-flex items-center px-2.5 py-0.5 rounded-full text-xs
+              font-medium bg-green-100 text-green-800
+            "
+          >
+            Active
+          </span>
+        <% else %>
+          <span
+            class="
+              inline-flex items-center px-2.5 py-0.5 rounded-full text-xs
+              font-medium bg-gray-100 text-gray-600
+            "
+          >
+            Deleted
+          </span>
+        <% end %>
+
+        <% if @config %>
+          <span class="text-sm text-gray-500">v<%= @config[:version] %></span>
+        <% end %>
+      </div>
+
+      <% if @config %>
+        <p class="text-gray-500 mt-1">
+          <%= @config[:model] %> &middot; temp <%= @config[:temperature] %>
+          &middot; timeout <%= @config[:timeout] %>s
+        </p>
+      <% end %>
+    </div>
+
+    <div class="text-right text-sm text-gray-500">
+      <p><%= @stats[:count] %> total executions</p>
+    </div>
+  </div>
+</div>
+
+<!-- Stats Grid -->
+<% success_rate = @stats[:success_rate] || 0 %>
+<% success_rate_color = success_rate >= 95 ? 'text-green-600' : success_rate >= 80 ? 'text-yellow-600' : 'text-red-600' %>
+<div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
+  <%= render "rubyllm/agents/shared/stat_card",
+      title: "Executions",
+      value: number_with_delimiter(@stats[:count]),
+      subtitle: "Today: #{@stats_today[:count]}",
+      icon: "M13 10V3L4 14h7v7l9-11h-7z",
+      icon_color: "text-blue-500" %>
+
+  <%= render "rubyllm/agents/shared/stat_card",
+      title: "Success Rate",
+      value: "#{success_rate}%",
+      subtitle: "Error rate: #{@stats[:error_rate] || 0}%",
+      icon: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z",
+      icon_color: "text-green-500",
+      value_color: success_rate_color %>
+
+  <%= render "rubyllm/agents/shared/stat_card",
+      title: "Total Cost",
+      value: "$#{number_with_precision(@stats[:total_cost] || 0, precision: 4)}",
+      subtitle: "Avg: $#{number_with_precision(@stats[:avg_cost] || 0, precision: 6)}",
+      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" %>
+
+  <%= render "rubyllm/agents/shared/stat_card",
+      title: "Total Tokens",
+      value: number_with_delimiter(@stats[:total_tokens] || 0),
+      subtitle: "Avg: #{number_with_delimiter(@stats[:avg_tokens] || 0)}",
+      icon: "M7 20l4-16m2 16l4-16M6 9h14M4 15h14",
+      icon_color: "text-indigo-500" %>
+
+  <%= render "rubyllm/agents/shared/stat_card",
+      title: "Avg Duration",
+      value: "#{number_with_delimiter(@stats[:avg_duration_ms] || 0)} ms",
+      icon: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z",
+      icon_color: "text-purple-500" %>
+</div>
+
+<!-- Charts Section -->
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+  <!-- Executions Over Time -->
+  <div class="bg-white rounded-lg shadow p-6 pb-20 overflow-hidden">
+    <h3 class="text-lg font-semibold text-gray-900 mb-4">
+      Executions (30 days)
+    </h3>
+
+    <div id="executions-chart" style="height: 250px;">
+      <% success_data = @trend_data.map { |d| [d[:date].strftime("%b %d"), d[:count] - (d[:error_count] || 0)] }.to_h
+        failed_data = @trend_data.map { |d| [d[:date].strftime("%b %d"), d[:error_count] || 0] }.to_h %>
+
+      <%= area_chart [
+        { name: "Success", data: success_data },
+        { name: "Failed", data: failed_data }
+      ], colors: ["#10B981", "#EF4444"], stacked: true, library: { maintainAspectRatio: false } %>
+    </div>
+  </div>
+
+  <!-- Cost Over Time -->
+  <div class="bg-white rounded-lg shadow p-6 pb-8 overflow-hidden">
+    <h3 class="text-lg font-semibold text-gray-900 mb-4">Cost (30 days)</h3>
+
+    <div id="cost-chart" style="height: 250px;">
+      <% cost_data = @trend_data.map { |d| [d[:date].strftime("%b %d"), d[:total_cost].to_f.round(4)] }.to_h %>
+
+      <%= line_chart cost_data, colors: ["#10B981"], prefix: "$", library: { maintainAspectRatio: false, plugins: { legend: { display: false } } } %>
+    </div>
+  </div>
+</div>
+
+<!-- Status Distribution (compact) -->
+<div class="bg-white rounded-lg shadow p-4 mb-6">
+  <div class="flex items-center justify-between">
+    <p class="text-sm text-gray-500 uppercase">Status Distribution</p>
+
+    <div class="flex flex-wrap gap-4">
+      <% status_colors = {
+          "success" => "#10B981",
+          "error" => "#EF4444",
+          "timeout" => "#F59E0B",
+          "running" => "#3B82F6"
+        } %>
+
+      <% @status_distribution.each do |status, count| %>
+        <div class="flex items-center">
+          <span
+            class="w-2 h-2 rounded-full mr-1.5"
+            style="background-color: <%= status_colors[status] || '#6B7280' %>"
+          ></span>
+
+          <span class="text-sm text-gray-700 capitalize"><%= status %></span>
+
+          <span class="text-sm font-medium text-gray-900 ml-1">
+            (<%= number_with_delimiter(count) %>)
+          </span>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>
+
+<% if @config %>
+  <!-- Configuration -->
+  <div class="bg-white rounded-lg shadow p-6 mb-6">
+    <h3 class="text-lg font-semibold text-gray-900 mb-4">Configuration</h3>
+
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
+      <div>
+        <p class="text-sm text-gray-500">Model</p>
+        <p class="font-medium"><%= @config[:model] %></p>
+      </div>
+
+      <div>
+        <p class="text-sm text-gray-500">Temperature</p>
+        <p class="font-medium"><%= @config[:temperature] %></p>
+      </div>
+
+      <div>
+        <p class="text-sm text-gray-500">Timeout</p>
+        <p class="font-medium"><%= @config[:timeout] %> seconds</p>
+      </div>
+
+      <div>
+        <p class="text-sm text-gray-500">Cache</p>
+
+        <p class="font-medium">
+          <% if @config[:cache_enabled] %>
+            Enabled (
+            <%= @config[:cache_ttl].inspect %>
+            )
+          <% else %>
+            Disabled
+          <% end %>
+        </p>
+      </div>
+    </div>
+
+    <% if @config[:params].present? && @config[:params].any? %>
+      <div class="border-t border-gray-100 pt-4">
+        <p class="text-sm text-gray-500 mb-2">Parameters</p>
+
+        <div class="space-y-2">
+          <% @config[:params].each do |name, opts| %>
+            <div class="flex items-center text-sm">
+              <code class="bg-gray-100 px-2 py-0.5 rounded font-mono">
+                <%= name %>
+              </code>
+
+              <% if opts[:required] %>
+                <span class="ml-2 text-xs text-red-500 font-medium">
+                  required
+                </span>
+              <% elsif opts[:default].present? %>
+                <span class="ml-2 text-xs text-gray-400">
+                  default: <%= opts[:default].inspect %>
+                </span>
+              <% else %>
+                <span class="ml-2 text-xs text-gray-400">optional</span>
+              <% end %>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+<% end %>
+
+<!-- Executions -->
+<div class="bg-white rounded-lg shadow p-6">
+  <h3 class="text-lg font-semibold text-gray-900 mb-4">Executions</h3>
+
+  <%= turbo_frame_tag "executions_table" do %>
+    <%
+      has_filters = params[:statuses].present? || params[:versions].present? || params[:models].present? || params[:temperatures].present? || params[:days].present?
+      selected_statuses = params[:statuses].present? ? (params[:statuses].is_a?(Array) ? params[:statuses] : params[:statuses].split(",")) : []
+      selected_versions = params[:versions].present? ? (params[:versions].is_a?(Array) ? params[:versions] : params[:versions].split(",")) : []
+      selected_models = params[:models].present? ? (params[:models].is_a?(Array) ? params[:models] : params[:models].split(",")) : []
+      selected_temperatures = params[:temperatures].present? ? (params[:temperatures].is_a?(Array) ? params[:temperatures] : params[:temperatures].split(",")).map(&:to_s) : []
+    %>
+
+    <%= form_with url: ruby_llm_agents.agent_path(@agent_type), method: :get, data: { turbo_frame: "executions_table" }, id: "agent-filters-form" do |f| %>
+      <div class="flex flex-wrap items-center gap-3 mb-4 pb-4 border-b border-gray-100">
+        <!-- Status Filter (Multi-select) -->
+        <div class="relative filter-dropdown" data-filter="statuses">
+          <button type="button" onclick="toggleDropdown(this)" class="flex items-center gap-2 px-3 py-2 text-sm bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition-colors <%= selected_statuses.any? ? 'ring-2 ring-blue-500 ring-offset-1' : '' %>">
+            <% if selected_statuses.length == 1
+                 status_color = case selected_statuses.first
+                   when 'success' then 'bg-green-500'
+                   when 'error' then 'bg-red-500'
+                   when 'running' then 'bg-blue-500'
+                   when 'timeout' then 'bg-yellow-500'
+                   else 'bg-gray-400'
+                 end
+               else
+                 status_color = 'bg-gray-400'
+               end %>
+            <span class="w-2 h-2 rounded-full <%= status_color %>"></span>
+            <span class="dropdown-label text-gray-700">
+              <% if selected_statuses.empty? %>
+                All Statuses
+              <% elsif selected_statuses.length == 1 %>
+                <%= selected_statuses.first.capitalize %>
+              <% else %>
+                <%= selected_statuses.length %> Statuses
+              <% end %>
+            </span>
+            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+            </svg>
+          </button>
+          <div class="dropdown-menu hidden absolute z-10 mt-1 w-44 bg-white rounded-lg shadow-lg border border-gray-200 py-1">
+            <div class="px-3 py-2 border-b border-gray-100">
+              <label class="flex items-center gap-2 cursor-pointer">
+                <input type="checkbox" class="select-all-checkbox rounded border-gray-300 text-blue-600 focus:ring-blue-500" onchange="toggleAllOptions(this, 'statuses')" <%= selected_statuses.empty? ? 'checked' : '' %>>
+                <span class="text-sm font-medium text-gray-700">All Statuses</span>
+              </label>
+            </div>
+            <label class="flex items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer">
+              <input type="checkbox" name="statuses[]" value="success" class="filter-checkbox rounded border-gray-300 text-blue-600 focus:ring-blue-500" onchange="updateMultiSelect('statuses')" <%= selected_statuses.include?('success') ? 'checked' : '' %>>
+              <span class="w-2 h-2 rounded-full bg-green-500"></span>
+              Success
+            </label>
+            <label class="flex items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer">
+              <input type="checkbox" name="statuses[]" value="error" class="filter-checkbox rounded border-gray-300 text-blue-600 focus:ring-blue-500" onchange="updateMultiSelect('statuses')" <%= selected_statuses.include?('error') ? 'checked' : '' %>>
+              <span class="w-2 h-2 rounded-full bg-red-500"></span>
+              Error
+            </label>
+            <label class="flex items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer">
+              <input type="checkbox" name="statuses[]" value="running" class="filter-checkbox rounded border-gray-300 text-blue-600 focus:ring-blue-500" onchange="updateMultiSelect('statuses')" <%= selected_statuses.include?('running') ? 'checked' : '' %>>
+              <span class="w-2 h-2 rounded-full bg-blue-500 animate-pulse"></span>
+              Running
+            </label>
+            <label class="flex items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer">
+              <input type="checkbox" name="statuses[]" value="timeout" class="filter-checkbox rounded border-gray-300 text-blue-600 focus:ring-blue-500" onchange="updateMultiSelect('statuses')" <%= selected_statuses.include?('timeout') ? 'checked' : '' %>>
+              <span class="w-2 h-2 rounded-full bg-yellow-500"></span>
+              Timeout
+            </label>
+          </div>
+        </div>
+
+        <!-- Version Filter (Multi-select) -->
+        <% if @versions.any? %>
+          <div class="relative filter-dropdown" data-filter="versions">
+            <button type="button" onclick="toggleDropdown(this)" class="flex items-center gap-2 px-3 py-2 text-sm bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition-colors <%= selected_versions.any? ? 'ring-2 ring-blue-500 ring-offset-1' : '' %>">
+              <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
+              </svg>
+              <span class="dropdown-label text-gray-700">
+                <% if selected_versions.empty? %>
+                  All Versions
+                <% elsif selected_versions.length == 1 %>
+                  v<%= selected_versions.first %>
+                <% else %>
+                  <%= selected_versions.length %> Versions
+                <% end %>
+              </span>
+              <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+              </svg>
+            </button>
+            <div class="dropdown-menu hidden absolute z-10 mt-1 w-44 bg-white rounded-lg shadow-lg border border-gray-200 py-1 max-h-64 overflow-y-auto">
+              <div class="px-3 py-2 border-b border-gray-100">
+                <label class="flex items-center gap-2 cursor-pointer">
+                  <input type="checkbox" class="select-all-checkbox rounded border-gray-300 text-blue-600 focus:ring-blue-500" onchange="toggleAllOptions(this, 'versions')" <%= selected_versions.empty? ? 'checked' : '' %>>
+                  <span class="text-sm font-medium text-gray-700">All Versions</span>
+                </label>
+              </div>
+              <% @versions.each do |version| %>
+                <label class="flex items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer">
+                  <input type="checkbox" name="versions[]" value="<%= version %>" class="filter-checkbox rounded border-gray-300 text-blue-600 focus:ring-blue-500" onchange="updateMultiSelect('versions')" <%= selected_versions.include?(version.to_s) ? 'checked' : '' %>>
+                  v<%= version %>
+                </label>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+
+        <!-- Model Filter (Multi-select) -->
+        <% if @models.length > 1 %>
+          <div class="relative filter-dropdown" data-filter="models">
+            <button type="button" onclick="toggleDropdown(this)" class="flex items-center gap-2 px-3 py-2 text-sm bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition-colors <%= selected_models.any? ? 'ring-2 ring-blue-500 ring-offset-1' : '' %>">
+              <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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"/>
+              </svg>
+              <span class="dropdown-label text-gray-700">
+                <% if selected_models.empty? %>
+                  All Models
+                <% elsif selected_models.length == 1 %>
+                  <%= selected_models.first %>
+                <% else %>
+                  <%= selected_models.length %> Models
+                <% end %>
+              </span>
+              <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+              </svg>
+            </button>
+            <div class="dropdown-menu hidden absolute z-10 mt-1 w-56 bg-white rounded-lg shadow-lg border border-gray-200 py-1 max-h-64 overflow-y-auto">
+              <div class="px-3 py-2 border-b border-gray-100">
+                <label class="flex items-center gap-2 cursor-pointer">
+                  <input type="checkbox" class="select-all-checkbox rounded border-gray-300 text-blue-600 focus:ring-blue-500" onchange="toggleAllOptions(this, 'models')" <%= selected_models.empty? ? 'checked' : '' %>>
+                  <span class="text-sm font-medium text-gray-700">All Models</span>
+                </label>
+              </div>
+              <% @models.each do |model| %>
+                <label class="flex items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer">
+                  <input type="checkbox" name="models[]" value="<%= model %>" class="filter-checkbox rounded border-gray-300 text-blue-600 focus:ring-blue-500" onchange="updateMultiSelect('models')" <%= selected_models.include?(model) ? 'checked' : '' %>>
+                  <%= model %>
+                </label>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+
+        <!-- Temperature Filter (Multi-select) -->
+        <% if @temperatures.length > 1 %>
+          <div class="relative filter-dropdown" data-filter="temperatures">
+            <button type="button" onclick="toggleDropdown(this)" class="flex items-center gap-2 px-3 py-2 text-sm bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition-colors <%= selected_temperatures.any? ? 'ring-2 ring-blue-500 ring-offset-1' : '' %>">
+              <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
+              </svg>
+              <span class="dropdown-label text-gray-700">
+                <% if selected_temperatures.empty? %>
+                  All Temps
+                <% elsif selected_temperatures.length == 1 %>
+                  <%= selected_temperatures.first %>
+                <% else %>
+                  <%= selected_temperatures.length %> Temps
+                <% end %>
+              </span>
+              <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+              </svg>
+            </button>
+            <div class="dropdown-menu hidden absolute z-10 mt-1 w-36 bg-white rounded-lg shadow-lg border border-gray-200 py-1 max-h-64 overflow-y-auto">
+              <div class="px-3 py-2 border-b border-gray-100">
+                <label class="flex items-center gap-2 cursor-pointer">
+                  <input type="checkbox" class="select-all-checkbox rounded border-gray-300 text-blue-600 focus:ring-blue-500" onchange="toggleAllOptions(this, 'temperatures')" <%= selected_temperatures.empty? ? 'checked' : '' %>>
+                  <span class="text-sm font-medium text-gray-700">All Temps</span>
+                </label>
+              </div>
+              <% @temperatures.each do |temp| %>
+                <label class="flex items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer">
+                  <input type="checkbox" name="temperatures[]" value="<%= temp %>" class="filter-checkbox rounded border-gray-300 text-blue-600 focus:ring-blue-500" onchange="updateMultiSelect('temperatures')" <%= selected_temperatures.include?(temp.to_s) ? 'checked' : '' %>>
+                  <%= temp %>
+                </label>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+
+        <!-- Time Range Filter -->
+        <div class="relative filter-dropdown" data-filter="days">
+          <button type="button" onclick="toggleDropdown(this)" class="flex items-center gap-2 px-3 py-2 text-sm bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition-colors <%= params[:days].present? ? 'ring-2 ring-blue-500 ring-offset-1' : '' %>">
+            <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+            </svg>
+            <span class="dropdown-label text-gray-700">
+              <% case params[:days]
+                 when '1' then %>Today<%
+                 when '7' then %>Last 7 Days<%
+                 when '30' then %>Last 30 Days<%
+                 else %>All Time<%
+                 end %>
+            </span>
+            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+            </svg>
+          </button>
+          <div class="dropdown-menu hidden absolute z-10 mt-1 w-40 bg-white rounded-lg shadow-lg border border-gray-200 py-1">
+            <a href="#" onclick="selectSingleFilter('days', '', 'All Time'); return false;" class="flex items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 <%= params[:days].blank? ? 'bg-blue-50 text-blue-700' : '' %>">
+              All Time
+            </a>
+            <a href="#" onclick="selectSingleFilter('days', '1', 'Today'); return false;" class="flex items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 <%= params[:days] == '1' ? 'bg-blue-50 text-blue-700' : '' %>">
+              Today
+            </a>
+            <a href="#" onclick="selectSingleFilter('days', '7', 'Last 7 Days'); return false;" class="flex items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 <%= params[:days] == '7' ? 'bg-blue-50 text-blue-700' : '' %>">
+              Last 7 Days
+            </a>
+            <a href="#" onclick="selectSingleFilter('days', '30', 'Last 30 Days'); return false;" class="flex items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 <%= params[:days] == '30' ? 'bg-blue-50 text-blue-700' : '' %>">
+              Last 30 Days
+            </a>
+          </div>
+          <%= f.hidden_field :days, value: params[:days], id: "filter_days" %>
+        </div>
+
+        <!-- Clear Filters -->
+        <% if has_filters %>
+          <%= link_to ruby_llm_agents.agent_path(@agent_type), data: { turbo_frame: "executions_table" }, class: "flex items-center gap-1 px-3 py-2 text-sm text-red-500 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" 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="M6 18L18 6M6 6l12 12"/>
+            </svg>
+            Clear
+          <% end %>
+        <% end %>
+
+        <!-- Stats Summary (right aligned) -->
+        <div class="ml-auto flex items-center gap-4 text-sm text-gray-500">
+          <span><%= number_with_delimiter(@filter_stats[:total_count]) %> executions</span>
+          <span class="text-gray-300">|</span>
+          <span>$<%= number_with_precision(@filter_stats[:total_cost] || 0, precision: 4) %></span>
+          <span class="text-gray-300">|</span>
+          <span><%= number_with_delimiter(@filter_stats[:total_tokens] || 0) %> tokens</span>
+        </div>
+      </div>
+    <% end %>
+
+    <%= render "rubyllm/agents/shared/executions_table", executions: @executions, pagination: @pagination %>
+  <% end %>
+</div>
+
+<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;
+    const dropdown = document.querySelector(`[data-filter="${name}"]`);
+    dropdown.querySelector('.dropdown-label').textContent = label;
+    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');
+    }
+    dropdown.querySelector('.dropdown-menu').classList.add('hidden');
+    document.getElementById('agent-filters-form').requestSubmit();
+  }
+
+  function toggleAllOptions(checkbox, filterName) {
+    const dropdown = document.querySelector(`[data-filter="${filterName}"]`);
+    const checkboxes = dropdown.querySelectorAll('.filter-checkbox');
+
+    if (checkbox.checked) {
+      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;
+
+    selectAllCheckbox.checked = (count === 0);
+
+    const labelMap = {
+      'statuses': { all: 'All Statuses', plural: 'Statuses' },
+      'versions': { all: 'All Versions', plural: 'Versions' },
+      'models': { all: 'All Models', plural: 'Models' },
+      'temperatures': { all: 'All Temps', plural: 'Temps' }
+    };
+
+    if (count === 0) {
+      label.textContent = labelMap[filterName]?.all || 'All';
+      button.classList.remove('ring-2', 'ring-blue-500', 'ring-offset-1');
+    } else if (count === 1) {
+      const value = checkboxes[0].value;
+      if (filterName === 'statuses') {
+        label.textContent = value.charAt(0).toUpperCase() + value.slice(1);
+      } else if (filterName === 'versions') {
+        label.textContent = 'v' + value;
+      } else {
+        label.textContent = value;
+      }
+      button.classList.add('ring-2', 'ring-blue-500', 'ring-offset-1');
+    } else {
+      label.textContent = `${count} ${labelMap[filterName]?.plural || 'Items'}`;
+      button.classList.add('ring-2', 'ring-blue-500', 'ring-offset-1');
+    }
+
+    document.getElementById('agent-filters-form').requestSubmit();
+  }
+
+  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/dashboard/_execution_item.html.erb

@@ -0,0 +1,48 @@
+<div id="execution-<%= execution.id %>" class="py-3 hover:bg-gray-50 -mx-2 px-2 rounded-lg transition-colors">
+  <%= link_to ruby_llm_agents.execution_path(execution), data: { turbo: false }, class: "block" do %>
+    <div class="flex items-start space-x-3">
+      <!-- Timeline indicator -->
+      <div class="flex flex-col items-center pt-1">
+        <%= render "rubyllm/agents/shared/status_dot", status: execution.status %>
+      </div>
+
+      <!-- Content -->
+      <div class="flex-1 min-w-0">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center space-x-2">
+            <p class="font-medium text-gray-900 text-sm">
+              <%= execution.agent_type.gsub(/Agent$/, '') %>
+            </p>
+            <span class="text-xs text-gray-400">v<%= execution.agent_version %></span>
+            <% if execution.status_running? %>
+              <span class="text-xs text-blue-600 font-medium">Running...</span>
+            <% end %>
+          </div>
+          <p class="text-xs text-gray-400">
+            <%= time_ago_in_words(execution.created_at) %> ago
+          </p>
+        </div>
+
+        <% if execution.status_running? %>
+          <p class="text-xs text-blue-500 mt-1">
+            In progress...
+          </p>
+        <% else %>
+          <p class="text-xs text-gray-500 mt-1">
+            <%= number_to_human_short(execution.total_tokens || 0) %> tokens
+            <span class="text-gray-300 mx-1">&middot;</span>
+            <%= number_to_human_short(execution.total_cost || 0, prefix: "$", precision: 2) %>
+            <span class="text-gray-300 mx-1">&middot;</span>
+            <%= number_to_human_short(execution.duration_ms || 0) %>ms
+          </p>
+        <% end %>
+
+        <% if execution.status_error? && execution.error_message.present? %>
+          <p class="text-xs text-red-600 mt-1.5 bg-red-50 rounded px-2 py-1">
+            <%= execution.error_class %>: <%= truncate(execution.error_message, length: 80) %>
+          </p>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+</div>