ruby_llm-agents 0.3.3 → 0.3.5

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

@@ -0,0 +1,775 @@
+<%= render "ruby_llm/agents/shared/breadcrumbs", items: [
+  { label: "Dashboard", path: ruby_llm_agents.root_path },
+  { label: "Agents", path: ruby_llm_agents.agents_path },
+  { label: @agent_type.gsub(/Agent$/, '') }
+] %>
+
+<!-- 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 "ruby_llm/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 "ruby_llm/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 "ruby_llm/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 "ruby_llm/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 "ruby_llm/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 "ruby_llm/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 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: 220px;"></div>
+  </div>
+
+  <!-- Cost Over Time -->
+  <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 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: 220px;"></div>
+  </div>
+</div>
+
+<script>
+(function() {
+  const trendData = <%= raw @trend_data.to_json %>;
+  const categories = trendData.map(d => d.date.split('-').slice(1).join('/'));
+
+  // Executions chart
+  Highcharts.chart('executions-chart', {
+    chart: { type: 'areaspline', backgroundColor: 'transparent' },
+    xAxis: { categories: categories, labels: { style: { color: '#9CA3AF' } } },
+    yAxis: { min: 0, title: { text: null }, labels: { style: { color: '#9CA3AF' } } },
+    legend: { enabled: false },
+    plotOptions: { areaspline: { fillOpacity: 0.2, marker: { enabled: false } } },
+    series: [
+      { name: 'Success', color: '#10B981', data: trendData.map(d => d.count - (d.error_count || 0)) },
+      { name: 'Failed', color: '#EF4444', data: trendData.map(d => d.error_count || 0) }
+    ]
+  });
+
+  // Cost chart
+  Highcharts.chart('cost-chart', {
+    chart: { type: 'spline', backgroundColor: 'transparent' },
+    xAxis: { categories: categories, labels: { style: { color: '#9CA3AF' } } },
+    yAxis: { min: 0, title: { text: null }, labels: { style: { color: '#9CA3AF' }, format: '${value}' } },
+    legend: { enabled: false },
+    plotOptions: { spline: { marker: { enabled: false } } },
+    tooltip: { valuePrefix: '$' },
+    series: [{ name: 'Cost', color: '#10B981', data: trendData.map(d => parseFloat(d.total_cost) || 0) }]
+  });
+})();
+</script>
+
+<!-- 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: "ruby_llm/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] || {}
+      fallback_models = Array(@config[:fallback_models]).compact
+      has_retries = (retries_config[:max] || 0) > 0
+      has_fallbacks = 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">
+                  <%= 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 %>
+
+    <!-- Available Tools -->
+    <%
+      class_tools = @agent_class.respond_to?(:tools) ? (@agent_class.tools || []) : []
+      has_dynamic_tools = @agent_class.instance_methods(false).include?(:tools)
+    %>
+    <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
+        "
+      >
+        Available Tools
+        <% if class_tools.any? %>
+          <span class="inline-flex items-center ml-2 px-1.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-300">
+            <%= class_tools.size %>
+          </span>
+        <% elsif has_dynamic_tools %>
+          <span class="inline-flex items-center ml-2 px-1.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 dark:bg-purple-900/50 text-purple-800 dark:text-purple-300">
+            Dynamic
+          </span>
+        <% else %>
+          <span class="inline-flex items-center ml-2 px-1.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
+            0
+          </span>
+        <% end %>
+      </p>
+
+      <% if class_tools.any? %>
+        <div class="space-y-2">
+          <% class_tools.each do |tool_class| %>
+            <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
+                "
+              >
+                <%= tool_class.respond_to?(:tool_name) ? tool_class.tool_name : tool_class.name.demodulize %>
+              </code>
+            </div>
+          <% end %>
+        </div>
+      <% elsif has_dynamic_tools %>
+        <p class="text-sm text-purple-600 dark:text-purple-400">
+          This agent configures tools dynamically at runtime based on context.
+        </p>
+        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">
+          Tools vary per execution based on feature flags and configuration.
+        </p>
+      <% else %>
+        <p class="text-sm text-gray-400 dark:text-gray-500 italic">
+          No tools configured for this agent.
+        </p>
+      <% end %>
+    </div>
+  </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>
+
+  <div id="executions_table">
+    <%
+      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) : []
+
+      status_options = [
+        { value: "success", label: "Success", color: "bg-green-500" },
+        { value: "error", label: "Error", color: "bg-red-500" },
+        { value: "running", label: "Running", color: "bg-blue-500" },
+        { value: "timeout", label: "Timeout", color: "bg-yellow-500" }
+      ]
+      version_options = @versions.map { |v| { value: v.to_s, label: "v#{v}" } }
+      model_options = @models.map { |m| { value: m, label: m } }
+      temperature_options = @temperatures.map { |t| { value: t.to_s, label: t.to_s } }
+      days_options = [
+        { value: "", label: "All Time" },
+        { value: "1", label: "Today" },
+        { value: "7", label: "Last 7 Days" },
+        { value: "30", label: "Last 30 Days" }
+      ]
+    %>
+
+    <%= form_with url: ruby_llm_agents.agent_path(@agent_type), method: :get, local: true 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) %>
+        <%= render "ruby_llm/agents/shared/filter_dropdown",
+            name: "statuses[]",
+            filter_id: "statuses",
+            label: "Status",
+            all_label: "All Statuses",
+            options: status_options,
+            selected: selected_statuses %>
+
+        <%# Version Filter (Multi-select) %>
+        <% if @versions.any? %>
+          <%= render "ruby_llm/agents/shared/filter_dropdown",
+              name: "versions[]",
+              filter_id: "versions",
+              label: "Version",
+              all_label: "All Versions",
+              options: version_options,
+              selected: selected_versions,
+              icon: "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" %>
+        <% end %>
+
+        <%# Model Filter (Multi-select) %>
+        <% if @models.length > 1 %>
+          <%= render "ruby_llm/agents/shared/filter_dropdown",
+              name: "models[]",
+              filter_id: "models",
+              label: "Model",
+              all_label: "All Models",
+              options: model_options,
+              selected: selected_models,
+              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" %>
+        <% end %>
+
+        <%# Temperature Filter (Multi-select) %>
+        <% if @temperatures.length > 1 %>
+          <%= render "ruby_llm/agents/shared/filter_dropdown",
+              name: "temperatures[]",
+              filter_id: "temperatures",
+              label: "Temp",
+              all_label: "All Temps",
+              options: temperature_options,
+              selected: selected_temperatures,
+              icon: "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" %>
+        <% end %>
+
+        <%# Time Range Filter (Single-select) %>
+        <%= render "ruby_llm/agents/shared/select_dropdown",
+            name: "days",
+            filter_id: "days",
+            options: days_options,
+            selected: params[:days].to_s,
+            icon: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" %>
+
+        <%# Clear Filters %>
+        <% if has_filters %>
+          <%= link_to ruby_llm_agents.agent_path(@agent_type),
+              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 "ruby_llm/agents/shared/executions_table", executions: @executions, pagination: @pagination %>
+  </div>
+</div>