ruby_llm-agents 0.3.3 → 0.3.5

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

@@ -1,772 +0,0 @@
-<div class="mb-6">
-  <%= link_to ruby_llm_agents.agents_path, class: "text-blue-600 dark:text-blue-400 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 dark:bg-gray-800 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 dark:text-gray-100">
-          <%= @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 dark:bg-green-900/50 text-green-800 dark:text-green-300
-            "
-          >
-            Active
-          </span>
-        <% else %>
-          <span
-            class="
-              inline-flex items-center px-2.5 py-0.5 rounded-full text-xs
-              font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400
-            "
-          >
-            Deleted
-          </span>
-        <% end %>
-
-        <% if @config %>
-          <span class="text-sm text-gray-500 dark:text-gray-400">v<%= @config[:version] %></span>
-        <% end %>
-      </div>
-
-      <% if @config %>
-        <p class="text-gray-500 dark:text-gray-400 mt-1">
-          <%= @config[:model] %> &middot; temp <%= @config[:temperature] %>
-          &middot; timeout <%= @config[:timeout] %>s
-        </p>
-      <% end %>
-    </div>
-
-    <div class="text-right">
-      <p class="text-sm text-gray-500 dark:text-gray-400">
-        <%= number_with_delimiter(@stats[:count]) %> total executions
-      </p>
-      <div class="flex items-center justify-end gap-3 mt-1">
-        <% status_colors = {
-            "success" => "bg-green-500",
-            "error" => "bg-red-500",
-            "timeout" => "bg-yellow-500",
-            "running" => "bg-blue-500"
-          } %>
-        <% @status_distribution.each do |status, count| %>
-          <div class="flex items-center gap-1">
-            <span class="w-2 h-2 rounded-full <%= status_colors[status] || 'bg-gray-400' %> <%= status == 'running' ? 'animate-pulse' : '' %>"></span>
-            <span class="text-xs text-gray-600 dark:text-gray-400">
-              <%= number_with_delimiter(count) %>
-            </span>
-          </div>
-        <% end %>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Circuit Breaker Status (if reliability enabled) -->
-<% if @config && @circuit_breaker_status.present? %>
-  <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 mb-6">
-    <div class="flex items-center justify-between mb-3">
-      <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Circuit Breaker Status</h3>
-      <span class="text-xs text-gray-400 dark:text-gray-500">Auto-refreshes every 30s</span>
-    </div>
-
-    <div class="flex flex-wrap gap-3">
-      <% @circuit_breaker_status.each do |model_id, status| %>
-        <div class="flex items-center gap-2 px-3 py-2 rounded-lg border <%= status[:open] ? 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800' : 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800' %>">
-          <% if status[:open] %>
-            <!-- Open/Tripped indicator -->
-            <span class="relative flex h-3 w-3">
-              <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
-              <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
-            </span>
-            <span class="text-sm font-medium text-red-700 dark:text-red-300"><%= model_id %></span>
-            <span class="text-xs text-red-500 dark:text-red-400 ml-1">OPEN</span>
-            <% if status[:cooldown_remaining] %>
-              <span class="text-xs text-red-400 dark:text-red-500 ml-1">
-                (resets in <%= status[:cooldown_remaining] %>s)
-              </span>
-            <% end %>
-          <% else %>
-            <!-- Closed/Healthy indicator -->
-            <span class="inline-flex rounded-full h-3 w-3 bg-green-500"></span>
-            <span class="text-sm font-medium text-green-700 dark:text-green-300"><%= model_id %></span>
-            <span class="text-xs text-green-500 dark:text-green-400 ml-1">OK</span>
-            <% if status[:failure_count] && status[:failure_count] > 0 %>
-              <span class="text-xs text-yellow-500 dark:text-yellow-400 ml-1">
-                (<%= status[:failure_count] %>/<%= status[:threshold] %> failures)
-              </span>
-            <% end %>
-          <% end %>
-        </div>
-      <% end %>
-    </div>
-
-    <% if @circuit_breaker_status.values.any? { |s| s[:open] } %>
-      <p class="mt-3 text-xs text-gray-500 dark:text-gray-400">
-        Open circuit breakers will skip the model and try fallbacks (if configured).
-        They automatically reset after the cooldown period.
-      </p>
-    <% end %>
-  </div>
-<% end %>
-
-<!-- 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-3 lg:grid-cols-6 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" %>
-
-  <%= render "rubyllm/agents/shared/stat_card",
-      title: "Cache Hit Rate",
-      value: "#{@cache_hit_rate}%",
-      icon: "M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4",
-      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 dark:bg-gray-800 rounded-lg shadow p-6 pb-20 overflow-hidden">
-    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 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: {
-        yAxis: { min: 0 },
-        legend: { align: "center", verticalAlign: "bottom" },
-        plotOptions: { area: { stacking: "normal" } }
-      } %>
-    </div>
-  </div>
-
-  <!-- Cost Over Time -->
-  <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 pb-8 overflow-hidden">
-    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 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: {
-        yAxis: { min: 0 },
-        legend: { enabled: false }
-      } %>
-    </div>
-  </div>
-</div>
-
-<!-- Finish Reason Distribution -->
-<% if @finish_reason_distribution.present? && @finish_reason_distribution.any? %>
-  <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 mb-6">
-    <div class="flex items-center justify-between">
-      <p class="text-sm text-gray-500 dark:text-gray-400 uppercase">Finish Reasons</p>
-
-      <div class="flex flex-wrap gap-4">
-        <% finish_colors = {
-            'stop' => '#10B981',
-            'length' => '#F59E0B',
-            'content_filter' => '#EF4444',
-            'tool_calls' => '#3B82F6',
-            nil => '#6B7280'
-          } %>
-
-        <% @finish_reason_distribution.each do |reason, count| %>
-          <div class="flex items-center">
-            <span
-              class="w-2 h-2 rounded-full mr-1.5"
-              style="background-color: <%= finish_colors[reason] || '#6B7280' %>"
-            ></span>
-
-            <span class="text-sm text-gray-700 dark:text-gray-300"><%= reason || 'unknown' %></span>
-
-            <span class="text-sm font-medium text-gray-900 dark:text-gray-100 ml-1">
-              (<%= number_with_delimiter(count) %>)
-            </span>
-          </div>
-        <% end %>
-      </div>
-    </div>
-  </div>
-<% end %>
-
-<!-- Version Comparison -->
-<%= render partial: "rubyllm/agents/agents/version_comparison",
-    locals: { versions: @versions, version_comparison: @version_comparison } %>
-
-<% if @config %>
-  <!-- Configuration -->
-  <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
-    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Configuration</h3>
-
-    <!-- Basic Configuration -->
-    <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">Basic</p>
-    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
-      <div>
-        <p class="text-sm text-gray-500 dark:text-gray-400">Model</p>
-        <p class="font-medium text-gray-900 dark:text-gray-100"><%= @config[:model] %></p>
-      </div>
-
-      <div>
-        <p class="text-sm text-gray-500 dark:text-gray-400">Temperature</p>
-        <p class="font-medium text-gray-900 dark:text-gray-100"><%= @config[:temperature] %></p>
-      </div>
-
-      <div>
-        <p class="text-sm text-gray-500 dark:text-gray-400">Timeout</p>
-        <p class="font-medium text-gray-900 dark:text-gray-100"><%= @config[:timeout] %> seconds</p>
-      </div>
-
-      <div>
-        <p class="text-sm text-gray-500 dark:text-gray-400">Cache</p>
-        <p class="font-medium text-gray-900 dark:text-gray-100">
-          <% if @config[:cache_enabled] %>
-            Enabled (<%= @config[:cache_ttl].inspect %>)
-          <% else %>
-            <span class="text-gray-400 dark:text-gray-500">Disabled</span>
-          <% end %>
-        </p>
-      </div>
-    </div>
-
-    <!-- Reliability Configuration -->
-    <%
-      retries_config = @config[:retries] || {}
-      has_retries = (retries_config[:max] || 0) > 0
-      has_fallbacks = @config[:fallback_models].present? && @config[:fallback_models].any?
-      has_total_timeout = @config[:total_timeout].present?
-      has_circuit_breaker = @config[:circuit_breaker].present?
-      has_any_reliability = has_retries || has_fallbacks || has_total_timeout || has_circuit_breaker
-    %>
-    <div class="border-t border-gray-100 dark:border-gray-700 pt-4 mb-6">
-      <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">Reliability</p>
-
-      <% if has_any_reliability %>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <!-- Retries -->
-          <div class="flex items-start gap-3 p-3 rounded-lg <%= has_retries ? 'bg-green-50 dark:bg-green-900/20' : 'bg-gray-50 dark:bg-gray-700/50' %>">
-            <div class="flex-shrink-0 mt-0.5">
-              <% if has_retries %>
-                <svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
-                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
-                </svg>
-              <% else %>
-                <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
-                </svg>
-              <% end %>
-            </div>
-            <div>
-              <p class="text-sm font-medium text-gray-900 dark:text-gray-100">Retries</p>
-              <% if has_retries %>
-                <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">
-                  Max: <%= retries_config[:max] %> &middot;
-                  Backoff: <%= retries_config[:backoff] %> &middot;
-                  Base: <%= retries_config[:base] %>s &middot;
-                  Max delay: <%= retries_config[:max_delay] %>s
-                </p>
-              <% else %>
-                <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Not configured</p>
-              <% end %>
-            </div>
-          </div>
-
-          <!-- Fallback Models -->
-          <div class="flex items-start gap-3 p-3 rounded-lg <%= has_fallbacks ? 'bg-green-50 dark:bg-green-900/20' : 'bg-gray-50 dark:bg-gray-700/50' %>">
-            <div class="flex-shrink-0 mt-0.5">
-              <% if has_fallbacks %>
-                <svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
-                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
-                </svg>
-              <% else %>
-                <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
-                </svg>
-              <% end %>
-            </div>
-            <div>
-              <p class="text-sm font-medium text-gray-900 dark:text-gray-100">Fallback Models</p>
-              <% if has_fallbacks %>
-                <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">
-                  <%= @config[:fallback_models].join(" → ") %>
-                </p>
-              <% else %>
-                <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Not configured</p>
-              <% end %>
-            </div>
-          </div>
-
-          <!-- Total Timeout -->
-          <div class="flex items-start gap-3 p-3 rounded-lg <%= has_total_timeout ? 'bg-green-50 dark:bg-green-900/20' : 'bg-gray-50 dark:bg-gray-700/50' %>">
-            <div class="flex-shrink-0 mt-0.5">
-              <% if has_total_timeout %>
-                <svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
-                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
-                </svg>
-              <% else %>
-                <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
-                </svg>
-              <% end %>
-            </div>
-            <div>
-              <p class="text-sm font-medium text-gray-900 dark:text-gray-100">Total Timeout</p>
-              <% if has_total_timeout %>
-                <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">
-                  <%= @config[:total_timeout] %> seconds across all attempts
-                </p>
-              <% else %>
-                <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Not configured</p>
-              <% end %>
-            </div>
-          </div>
-
-          <!-- Circuit Breaker -->
-          <div class="flex items-start gap-3 p-3 rounded-lg <%= has_circuit_breaker ? 'bg-green-50 dark:bg-green-900/20' : 'bg-gray-50 dark:bg-gray-700/50' %>">
-            <div class="flex-shrink-0 mt-0.5">
-              <% if has_circuit_breaker %>
-                <svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
-                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
-                </svg>
-              <% else %>
-                <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
-                </svg>
-              <% end %>
-            </div>
-            <div>
-              <p class="text-sm font-medium text-gray-900 dark:text-gray-100">Circuit Breaker</p>
-              <% if has_circuit_breaker %>
-                <% cb = @config[:circuit_breaker] %>
-                <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">
-                  Opens after <%= cb[:errors] %> errors within <%= cb[:within] %>s &middot;
-                  Cooldown: <%= cb[:cooldown] %>s
-                </p>
-              <% else %>
-                <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Not configured</p>
-              <% end %>
-            </div>
-          </div>
-        </div>
-      <% else %>
-        <p class="text-sm text-gray-400 dark:text-gray-500">No reliability features configured</p>
-      <% end %>
-    </div>
-
-    <!-- Parameters -->
-    <% if @config[:params].present? && @config[:params].any? %>
-      <div class="border-t border-gray-100 dark:border-gray-700 pt-4">
-        <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">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 dark:bg-gray-700 dark:text-gray-200 px-2 py-0.5 rounded font-mono">
-                <%= name %>
-              </code>
-
-              <% if opts[:required] %>
-                <span class="ml-2 text-xs text-red-500 dark:text-red-400 font-medium">
-                  required
-                </span>
-              <% elsif opts[:default].present? %>
-                <span class="ml-2 text-xs text-gray-400 dark:text-gray-500">
-                  default: <%= opts[:default].inspect %>
-                </span>
-              <% else %>
-                <span class="ml-2 text-xs text-gray-400 dark:text-gray-500">optional</span>
-              <% end %>
-            </div>
-          <% end %>
-        </div>
-      </div>
-    <% end %>
-  </div>
-<% end %>
-
-<!-- Executions -->
-<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-  <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 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 dark:border-gray-700">
-        <!-- 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 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors <%= selected_statuses.any? ? 'ring-2 ring-blue-500 ring-offset-1 dark:ring-offset-gray-800' : '' %>">
-            <% 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 dark:text-gray-200">
-              <% 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 dark:text-gray-500" 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 dark:bg-gray-700 rounded-lg shadow-lg border border-gray-200 dark:border-gray-600 py-1">
-            <div class="px-3 py-2 border-b border-gray-100 dark:border-gray-600">
-              <label class="flex items-center gap-2 cursor-pointer">
-                <input type="checkbox" class="select-all-checkbox rounded border-gray-300 dark:border-gray-500 text-blue-600 focus:ring-blue-500 dark:bg-gray-600" onchange="toggleAllOptions(this, 'statuses')" <%= selected_statuses.empty? ? 'checked' : '' %>>
-                <span class="text-sm font-medium text-gray-700 dark:text-gray-200">All Statuses</span>
-              </label>
-            </div>
-            <label class="flex items-center gap-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 cursor-pointer">
-              <input type="checkbox" name="statuses[]" value="success" class="filter-checkbox rounded border-gray-300 dark:border-gray-500 text-blue-600 focus:ring-blue-500 dark:bg-gray-600" 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 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 cursor-pointer">
-              <input type="checkbox" name="statuses[]" value="error" class="filter-checkbox rounded border-gray-300 dark:border-gray-500 text-blue-600 focus:ring-blue-500 dark:bg-gray-600" 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 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 cursor-pointer">
-              <input type="checkbox" name="statuses[]" value="running" class="filter-checkbox rounded border-gray-300 dark:border-gray-500 text-blue-600 focus:ring-blue-500 dark:bg-gray-600" 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 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 cursor-pointer">
-              <input type="checkbox" name="statuses[]" value="timeout" class="filter-checkbox rounded border-gray-300 dark:border-gray-500 text-blue-600 focus:ring-blue-500 dark:bg-gray-600" 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 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors <%= selected_versions.any? ? 'ring-2 ring-blue-500 ring-offset-1 dark:ring-offset-gray-800' : '' %>">
-              <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 dark:text-gray-200">
-                <% 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 dark:text-gray-500" 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 dark:bg-gray-700 rounded-lg shadow-lg border border-gray-200 dark:border-gray-600 py-1 max-h-64 overflow-y-auto">
-              <div class="px-3 py-2 border-b border-gray-100 dark:border-gray-600">
-                <label class="flex items-center gap-2 cursor-pointer">
-                  <input type="checkbox" class="select-all-checkbox rounded border-gray-300 dark:border-gray-500 text-blue-600 focus:ring-blue-500 dark:bg-gray-600" onchange="toggleAllOptions(this, 'versions')" <%= selected_versions.empty? ? 'checked' : '' %>>
-                  <span class="text-sm font-medium text-gray-700 dark:text-gray-200">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 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 cursor-pointer">
-                  <input type="checkbox" name="versions[]" value="<%= version %>" class="filter-checkbox rounded border-gray-300 dark:border-gray-500 text-blue-600 focus:ring-blue-500 dark:bg-gray-600" 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 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors <%= selected_models.any? ? 'ring-2 ring-blue-500 ring-offset-1 dark:ring-offset-gray-800' : '' %>">
-              <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 dark:text-gray-200">
-                <% 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 dark:text-gray-500" 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 dark:bg-gray-700 rounded-lg shadow-lg border border-gray-200 dark:border-gray-600 py-1 max-h-64 overflow-y-auto">
-              <div class="px-3 py-2 border-b border-gray-100 dark:border-gray-600">
-                <label class="flex items-center gap-2 cursor-pointer">
-                  <input type="checkbox" class="select-all-checkbox rounded border-gray-300 dark:border-gray-500 text-blue-600 focus:ring-blue-500 dark:bg-gray-600" onchange="toggleAllOptions(this, 'models')" <%= selected_models.empty? ? 'checked' : '' %>>
-                  <span class="text-sm font-medium text-gray-700 dark:text-gray-200">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 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 cursor-pointer">
-                  <input type="checkbox" name="models[]" value="<%= model %>" class="filter-checkbox rounded border-gray-300 dark:border-gray-500 text-blue-600 focus:ring-blue-500 dark:bg-gray-600" 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 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors <%= selected_temperatures.any? ? 'ring-2 ring-blue-500 ring-offset-1 dark:ring-offset-gray-800' : '' %>">
-              <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 dark:text-gray-200">
-                <% 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 dark:text-gray-500" 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 dark:bg-gray-700 rounded-lg shadow-lg border border-gray-200 dark:border-gray-600 py-1 max-h-64 overflow-y-auto">
-              <div class="px-3 py-2 border-b border-gray-100 dark:border-gray-600">
-                <label class="flex items-center gap-2 cursor-pointer">
-                  <input type="checkbox" class="select-all-checkbox rounded border-gray-300 dark:border-gray-500 text-blue-600 focus:ring-blue-500 dark:bg-gray-600" onchange="toggleAllOptions(this, 'temperatures')" <%= selected_temperatures.empty? ? 'checked' : '' %>>
-                  <span class="text-sm font-medium text-gray-700 dark:text-gray-200">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 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 cursor-pointer">
-                  <input type="checkbox" name="temperatures[]" value="<%= temp %>" class="filter-checkbox rounded border-gray-300 dark:border-gray-500 text-blue-600 focus:ring-blue-500 dark:bg-gray-600" 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 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors <%= params[:days].present? ? 'ring-2 ring-blue-500 ring-offset-1 dark:ring-offset-gray-800' : '' %>">
-            <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 dark:text-gray-200">
-              <% 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 dark:text-gray-500" 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 dark:bg-gray-700 rounded-lg shadow-lg border border-gray-200 dark:border-gray-600 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 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 <%= params[:days].blank? ? 'bg-blue-50 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300' : '' %>">
-              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 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 <%= params[:days] == '1' ? 'bg-blue-50 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300' : '' %>">
-              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 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 <%= params[:days] == '7' ? 'bg-blue-50 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300' : '' %>">
-              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 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 <%= params[:days] == '30' ? 'bg-blue-50 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300' : '' %>">
-              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 dark:text-red-400 hover:text-red-600 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-900/30 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 dark:text-gray-400">
-          <span><%= number_with_delimiter(@filter_stats[:total_count]) %> executions</span>
-          <span class="text-gray-300 dark:text-gray-600">|</span>
-          <span>$<%= number_with_precision(@filter_stats[:total_cost] || 0, precision: 4) %></span>
-          <span class="text-gray-300 dark:text-gray-600">|</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>