ruby_llm-agents 3.11.0 → 3.13.0

data/app/views/ruby_llm/agents/analytics/index.html.erb

@@ -0,0 +1,398 @@
+<%
+  s = @summary || {}
+  total_cost = s[:total_cost] || 0
+  analytics_range_presets = [
+    {value: "7d", label: "7 Days"},
+    {value: "30d", label: "30 Days"},
+    {value: "90d", label: "90 Days"}
+  ]
+  # Preserve filters across range/form changes
+  filter_params = {}
+  filter_params[:agent] = @filter_agent if @filter_agent
+  filter_params[:model] = @filter_model if @filter_model
+  filter_params[:filter_tenant] = @filter_tenant if @filter_tenant
+%>
+
+<!-- ── header ──────────────── -->
+<div class="flex items-center gap-4 min-w-0 mb-3">
+  <h1 class="text-[10px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-widest font-mono shrink-0">analytics</h1>
+  <%= render "ruby_llm/agents/shared/doc_link" %>
+</div>
+
+<!-- ── filter bar ──────────────── -->
+<!-- Filter data (consumed by Alpine below) -->
+<script>
+  window.__analyticsFilters = {
+    agents: <%= @available_agents.map { |a| { value: a, label: a.to_s.split("::").last } }.to_json.html_safe %>,
+    models: <%= @available_models.map { |m| { value: m, label: m.to_s.split("/").last } }.to_json.html_safe %>,
+    tenants: <%= @available_tenants.map { |tid, label| { value: tid, label: label } }.to_json.html_safe %>,
+    selected: {
+      agent: <%= @filter_agent.to_s.to_json.html_safe %>,
+      model: <%= @filter_model.to_s.to_json.html_safe %>,
+      tenant: <%= @filter_tenant.to_s.to_json.html_safe %>
+    }
+  };
+  window.__searchSelect = function(dataKey, paramName, placeholder) {
+    var cfg = window.__analyticsFilters;
+    return {
+      items: cfg[dataKey],
+      selected: cfg.selected[paramName] || '',
+      paramName: paramName,
+      placeholder: placeholder,
+      search: '',
+      open: false,
+      toggle: function() {
+        this.open = !this.open;
+        if (this.open) {
+          this.search = '';
+          var self = this;
+          this.$nextTick(function() { self.$refs.searchInput && self.$refs.searchInput.focus(); });
+        }
+      },
+      pick: function(value) {
+        this.selected = value;
+        this.open = false;
+        var self = this;
+        this.$nextTick(function() { document.getElementById('analytics-filters').submit(); });
+      },
+      label: function() {
+        if (!this.selected) return this.placeholder;
+        var s = this.selected;
+        var match = this.items.find(function(i) { return i.value === s; });
+        return match ? match.label : s;
+      },
+      filtered: function() {
+        var q = this.search.toLowerCase();
+        if (!q) return this.items;
+        return this.items.filter(function(i) { return i.label.toLowerCase().indexOf(q) >= 0 || i.value.toLowerCase().indexOf(q) >= 0; });
+      }
+    };
+  };
+</script>
+
+<%= form_with url: ruby_llm_agents.analytics_path, method: :get, id: "analytics-filters",
+    class: "flex flex-wrap items-center gap-2 mb-4 font-mono text-xs", data: { turbo: false } do %>
+  <input type="hidden" name="range" value="<%= @selected_range %>">
+  <% if @selected_range == "custom" %>
+    <input type="hidden" name="from" value="<%= @custom_from %>">
+    <input type="hidden" name="to" value="<%= @custom_to %>">
+  <% end %>
+
+  <%# Range selector (inline with filters) %>
+  <div class="relative" x-data="{ open: false, showCustom: false }" @click.outside="open = false; showCustom = false">
+    <button type="button" @click.stop="open = !open" class="flex items-center gap-1 w-32 px-2 py-1 bg-transparent border border-gray-200 dark:border-gray-800 rounded text-gray-900 dark:text-gray-100 focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-600">
+      <% if @selected_range == "custom" && @custom_from && @custom_to %>
+        <span class="flex-1 truncate"><%= @custom_from.strftime("%b %-d") %> – <%= @custom_to.strftime("%b %-d") %></span>
+      <% else %>
+        <span class="flex-1"><%= range_display_name(@selected_range) %></span>
+      <% end %>
+      <svg class="w-3 h-3 text-gray-400 flex-shrink-0" 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 x-show="open" x-cloak x-transition class="absolute left-0 mt-1 w-48 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded shadow-lg z-50 py-1">
+      <% analytics_range_presets.each do |preset| %>
+        <%= link_to preset[:label], ruby_llm_agents.analytics_path(filter_params.merge(range: preset[:value])),
+            class: "block px-3 py-1.5 #{@selected_range == preset[:value] ? 'text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-800' : 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800/50'}" %>
+      <% end %>
+      <div class="border-t border-gray-200 dark:border-gray-700 my-1"></div>
+      <button type="button" @click.stop="showCustom = !showCustom" class="w-full text-left px-3 py-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800/50">Custom range&hellip;</button>
+      <div x-show="showCustom" x-cloak class="px-3 py-2 border-t border-gray-200 dark:border-gray-700" x-data="{ cfrom: '<%= @custom_from %>', cto: '<%= @custom_to %>' }">
+          <label class="block text-[10px] text-gray-400 dark:text-gray-500 uppercase">From</label>
+          <input type="date" x-model="cfrom" max="<%= Date.current %>" class="w-full px-2 py-1 text-xs bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded text-gray-900 dark:text-gray-100 font-mono">
+          <label class="block text-[10px] text-gray-400 dark:text-gray-500 uppercase mt-2">To</label>
+          <input type="date" x-model="cto" max="<%= Date.current %>" class="w-full px-2 py-1 text-xs bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded text-gray-900 dark:text-gray-100 font-mono">
+          <button type="button" @click="window.location = '<%= ruby_llm_agents.analytics_path %>' + '?range=custom&from=' + cfrom + '&to=' + cto + '<%= filter_params.map { |k, v| "&#{k}=#{ERB::Util.url_encode(v)}" }.join %>'"
+                  class="w-full mt-2 px-2 py-1 text-xs bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded hover:bg-gray-700 dark:hover:bg-gray-300">Apply</button>
+      </div>
+    </div>
+  </div>
+
+  <%
+    dropdowns = [
+      { key: "agents", param: "agent", placeholder: "All agents" },
+      { key: "models", param: "model", placeholder: "All models" }
+    ]
+    dropdowns << { key: "tenants", param: "tenant", placeholder: "All tenants", name: "filter_tenant" } if @available_tenants.any?
+  %>
+
+  <% dropdowns.each do |dd| %>
+    <div class="relative w-44" x-data="__searchSelect('<%= dd[:key] %>', '<%= dd[:param] %>', '<%= dd[:placeholder] %>')" @click.outside="open = false">
+      <input type="hidden" name="<%= dd[:name] || dd[:param] %>" :value="selected">
+      <button type="button" @click.stop="toggle()" class="flex items-center gap-1 w-44 px-2 py-1 bg-transparent border border-gray-200 dark:border-gray-800 rounded text-left text-gray-900 dark:text-gray-100 focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-600 truncate">
+        <span x-text="label()" class="flex-1 truncate"></span>
+        <svg class="w-3 h-3 text-gray-400 flex-shrink-0" 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 x-show="open" class="absolute left-0 mt-1 w-56 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded shadow-lg z-50">
+        <div class="p-1.5">
+          <input type="text" x-model="search" x-ref="searchInput" placeholder="Search..." autocomplete="off"
+                 class="w-full px-2 py-1 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded text-xs text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-600 focus:outline-none focus:ring-1 focus:ring-gray-400">
+        </div>
+        <div class="max-h-48 overflow-y-auto py-1">
+          <button type="button" @click="pick('')"
+                  class="block w-full text-left px-3 py-1.5 text-xs hover:bg-gray-100 dark:hover:bg-gray-800"
+                  :class="selected === '' ? 'text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-800' : 'text-gray-500 dark:text-gray-400'">
+            <%= dd[:placeholder] %>
+          </button>
+          <template x-for="item in filtered()" :key="item.value">
+            <button type="button" @click="pick(item.value)"
+                    class="block w-full text-left px-3 py-1.5 text-xs truncate hover:bg-gray-100 dark:hover:bg-gray-800"
+                    :class="selected === item.value ? 'text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-800' : 'text-gray-500 dark:text-gray-400'"
+                    x-text="item.label"></button>
+          </template>
+          <div x-show="filtered().length === 0" class="px-3 py-1.5 text-xs text-gray-400 dark:text-gray-600">no matches</div>
+        </div>
+      </div>
+    </div>
+  <% end %>
+
+  <% if @any_filter %>
+    <%= link_to "clear", ruby_llm_agents.analytics_path(range: @selected_range,
+        from: @custom_from, to: @custom_to),
+        class: "text-gray-400 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-300" %>
+  <% end %>
+<% end %>
+
+<!-- ── summary strip ──────────────── -->
+<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 font-mono text-xs mb-2">
+  <div class="space-y-0.5">
+    <div class="text-[10px] text-gray-400 dark:text-gray-600 uppercase tracking-wider">total cost</div>
+    <div class="text-gray-900 dark:text-gray-200">$<%= number_with_precision(s[:total_cost] || 0, precision: 4) %></div>
+    <% if s[:cost_change] && s[:cost_change] != 0 %>
+      <div class="<%= s[:cost_change] > 0 ? 'text-red-500' : 'text-green-500' %> text-[10px]">
+        <%= s[:cost_change] > 0 ? "+" : "" %><%= s[:cost_change] %>% vs prior
+      </div>
+    <% elsif s[:prior_cost] %>
+      <div class="text-gray-400 dark:text-gray-600 text-[10px]">— vs prior</div>
+    <% end %>
+  </div>
+  <div class="space-y-0.5">
+    <div class="text-[10px] text-gray-400 dark:text-gray-600 uppercase tracking-wider">avg cost/run</div>
+    <div class="text-gray-900 dark:text-gray-200">$<%= number_with_precision(s[:avg_cost] || 0, precision: 4) %></div>
+    <div class="text-gray-400 dark:text-gray-600 text-[10px]"><%= number_with_delimiter(s[:avg_tokens] || 0) %> tok/run</div>
+  </div>
+  <div class="space-y-0.5">
+    <div class="text-[10px] text-gray-400 dark:text-gray-600 uppercase tracking-wider">runs</div>
+    <div class="text-gray-900 dark:text-gray-200"><%= number_with_delimiter(s[:total_runs] || 0) %></div>
+    <% if s[:runs_change] && s[:runs_change] != 0 %>
+      <div class="<%= s[:runs_change] > 0 ? 'text-gray-500' : 'text-gray-500' %> text-[10px]">
+        <%= s[:runs_change] > 0 ? "+" : "" %><%= s[:runs_change] %>% vs prior
+      </div>
+    <% end %>
+  </div>
+  <div class="space-y-0.5">
+    <div class="text-[10px] text-gray-400 dark:text-gray-600 uppercase tracking-wider">tokens</div>
+    <div class="text-gray-900 dark:text-gray-200"><%= number_with_delimiter(s[:total_tokens] || 0) %></div>
+  </div>
+</div>
+
+<!-- ── projection + savings ──────────────── -->
+<div class="font-mono text-xs space-y-1 mb-2">
+  <% if @projection %>
+    <div class="text-gray-500 dark:text-gray-400">
+      Burning <span class="text-gray-800 dark:text-gray-200">$<%= number_with_precision(@projection[:daily_rate], precision: 4) %>/day</span>
+      <% if @projection[:days_left] > 0 %>
+        &middot; projected <span class="text-gray-800 dark:text-gray-200">$<%= number_with_precision(@projection[:projected_month], precision: 2) %></span> by end of month
+        (<%= @projection[:days_left] %> days left)
+      <% end %>
+    </div>
+  <% end %>
+
+  <% if @savings %>
+    <div class="text-gray-500 dark:text-gray-400">
+      <span class="text-green-500">Save ~$<%= number_with_precision(@savings[:potential_savings], precision: 2) %></span>
+      by moving <span class="text-gray-800 dark:text-gray-200"><%= @savings[:expensive_runs] %></span> runs
+      from <span class="text-gray-800 dark:text-gray-200"><%= @savings[:expensive_model].to_s.split("/").last %></span>
+      ($<%= number_with_precision(@savings[:expensive_cost_per_run], precision: 4) %>/run)
+      to <span class="text-gray-800 dark:text-gray-200"><%= @savings[:cheap_model].to_s.split("/").last %></span>
+      ($<%= number_with_precision(@savings[:cheap_cost_per_run], precision: 4) %>/run)
+    </div>
+  <% end %>
+
+  <% if @error_total_count > 0 && total_cost > 0 %>
+    <div class="text-gray-500 dark:text-gray-400">
+      <span class="text-red-500">$<%= number_with_precision(@error_total_cost, precision: 4) %></span>
+      wasted on <span class="text-red-500"><%= number_with_delimiter(@error_total_count) %></span> failed runs
+      (<%= (@error_total_cost.to_f / total_cost * 100).round(1) %>% of spend)
+    </div>
+  <% end %>
+</div>
+
+<div class="border-t border-gray-200 dark:border-gray-800 mb-2"></div>
+
+<!-- ── cost over time (current + prior overlay) ──────────────── -->
+<div class="flex items-center gap-3 mt-4 mb-2">
+  <span class="text-[10px] font-medium text-gray-400 dark:text-gray-600 uppercase tracking-widest font-mono">cost over time</span>
+  <span class="text-[10px] font-mono text-gray-400 dark:text-gray-600">solid = current &middot; dashed = prior period</span>
+  <div class="flex-1 border-t border-gray-200 dark:border-gray-800"></div>
+</div>
+<div id="analytics-cost-chart" style="width: 100%; height: 200px;"></div>
+
+<!-- ── model efficiency ──────────────── -->
+<% if @efficiency.present? %>
+  <div class="flex items-center gap-3 mt-6 mb-3">
+    <span class="text-[10px] font-medium text-gray-400 dark:text-gray-600 uppercase tracking-widest font-mono">model efficiency</span>
+    <div class="flex-1 border-t border-gray-200 dark:border-gray-800"></div>
+  </div>
+
+  <div class="flex items-center gap-3 px-2 -mx-2 font-mono text-[10px] text-gray-400 dark:text-gray-600 uppercase tracking-wider mb-1">
+    <span class="flex-[2] min-w-0">model</span>
+    <span class="w-12 flex-shrink-0 text-right">runs</span>
+    <span class="w-20 flex-shrink-0 text-right">cost</span>
+    <span class="w-20 flex-shrink-0 text-right">$/1k tok</span>
+    <span class="w-20 flex-shrink-0 text-right hidden sm:block">avg dur</span>
+    <span class="w-12 flex-shrink-0 text-right">ok%</span>
+    <span class="w-10 flex-shrink-0 text-right">%</span>
+  </div>
+  <div class="font-mono text-xs space-y-px">
+    <% @efficiency.each do |model| %>
+      <div class="flex items-center gap-3 py-1 px-2 -mx-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800/50">
+        <span class="flex-[2] min-w-0 truncate text-gray-900 dark:text-gray-200"><%= model[:model_id].to_s.split("/").last.truncate(28) %></span>
+        <span class="w-12 flex-shrink-0 text-right text-gray-500 dark:text-gray-400"><%= number_with_delimiter(model[:executions]) %></span>
+        <span class="w-20 flex-shrink-0 text-right text-gray-800 dark:text-gray-200">$<%= number_with_precision(model[:total_cost], precision: 4) %></span>
+        <span class="w-20 flex-shrink-0 text-right text-gray-500 dark:text-gray-400">$<%= number_with_precision(model[:cost_per_1k_tokens], precision: 4) %></span>
+        <span class="w-20 flex-shrink-0 text-right text-gray-500 dark:text-gray-400 hidden sm:block"><%= format_duration_ms(model[:avg_duration_ms]) %></span>
+        <span class="w-12 flex-shrink-0 text-right <%= model[:success_rate] >= 95 ? 'text-green-500' : model[:success_rate] >= 80 ? 'text-yellow-500' : 'text-red-500' %>"><%= model[:success_rate] %>%</span>
+        <span class="w-10 flex-shrink-0 text-right text-gray-400 dark:text-gray-600"><%= model[:cost_percentage] %>%</span>
+      </div>
+    <% end %>
+  </div>
+<% end %>
+
+<!-- ── error cost breakdown ──────────────── -->
+<% if @error_breakdown.present? %>
+  <div class="flex items-center gap-3 mt-6 mb-3">
+    <span class="text-[10px] font-medium text-gray-400 dark:text-gray-600 uppercase tracking-widest font-mono">error cost breakdown</span>
+    <span class="text-[10px] font-mono text-red-400 dark:text-red-500/70">($<%= number_with_precision(@error_total_cost, precision: 4) %>)</span>
+    <div class="flex-1 border-t border-gray-200 dark:border-gray-800"></div>
+  </div>
+
+  <div class="flex items-center gap-3 px-2 -mx-2 font-mono text-[10px] text-gray-400 dark:text-gray-600 uppercase tracking-wider mb-1">
+    <span class="flex-[2] min-w-0">error</span>
+    <span class="w-28 flex-shrink-0 hidden sm:block">agent</span>
+    <span class="w-10 flex-shrink-0 text-right">count</span>
+    <span class="w-20 flex-shrink-0 text-right">cost</span>
+    <span class="w-24 flex-shrink-0 text-right">last seen</span>
+  </div>
+  <div class="font-mono text-xs space-y-px">
+    <% @error_breakdown.each do |err| %>
+      <div class="flex items-center gap-3 py-1 px-2 -mx-2">
+        <span class="w-1.5 h-1.5 rounded-full bg-red-500 flex-shrink-0"></span>
+        <span class="flex-[2] min-w-0 truncate text-gray-900 dark:text-gray-200"><%= err[:error_class].to_s.split("::").last %></span>
+        <span class="w-28 flex-shrink-0 truncate text-gray-500 dark:text-gray-400 hidden sm:block"><%= err[:agent_type].to_s.split("::").last %></span>
+        <span class="w-10 flex-shrink-0 text-right text-red-500"><%= err[:count] %></span>
+        <span class="w-20 flex-shrink-0 text-right text-gray-800 dark:text-gray-200">$<%= number_with_precision(err[:cost], precision: 4) %></span>
+        <span class="w-24 flex-shrink-0 text-right text-gray-400 dark:text-gray-600 whitespace-nowrap"><%= err[:last_seen] ? time_ago_in_words(err[:last_seen]) : "—" %></span>
+      </div>
+    <% end %>
+  </div>
+<% end %>
+
+<!-- ── charts ──────────────── -->
+<script>
+(function() {
+  var chartUrl = '<%= ruby_llm_agents.analytics_chart_data_path %>';
+  var params = new URLSearchParams({
+    range: '<%= @selected_range %>'
+  });
+  <% if @selected_range == "custom" && @custom_from && @custom_to %>
+    params.set('from', '<%= @custom_from %>');
+    params.set('to', '<%= @custom_to %>');
+  <% end %>
+  <% if @filter_agent %>params.set('agent', '<%= j @filter_agent %>');<% end %>
+  <% if @filter_model %>params.set('model', '<%= j @filter_model %>');<% end %>
+  <% if @filter_tenant %>params.set('filter_tenant', '<%= j @filter_tenant %>');<% end %>
+  chartUrl += '?' + params.toString();
+
+  function renderCostChart(data) {
+    if (!data.series || data.series.length === 0 || (data.series[0].data.length === 0 && data.series[1].data.length === 0)) {
+      document.getElementById('analytics-cost-chart').innerHTML = '<div style="display:flex;align-items:center;justify-content:center;height:100%;font-family:ui-monospace,monospace;font-size:11px;color:' + chartColor('#9CA3AF', '#928374') + '">no data for this period</div>';
+      return;
+    }
+
+    var series = [];
+    var s0 = data.series[0]; // current
+    var s1 = data.series[1]; // prior
+
+    series.push({
+      name: s0.name,
+      type: s0.type || 'areaspline',
+      data: s0.data,
+      color: chartColor('#8B5CF6', '#d3869b'),
+      lineWidth: 2,
+      marker: { enabled: false, states: { hover: { enabled: true, radius: 3 } } },
+      fillColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+        stops: [[0, chartColorAlpha('rgba(139, 92, 246, 0.15)', 211, 134, 155, 0.15)], [1, chartColorAlpha('rgba(139, 92, 246, 0)', 211, 134, 155, 0)]] }
+    });
+
+    if (s1 && s1.data && s1.data.length > 0) {
+      series.push({
+        name: s1.name,
+        type: s1.type || 'spline',
+        data: s1.data,
+        dashStyle: s1.dashStyle || 'Dash',
+        color: chartColorAlpha('rgba(107, 114, 128, 0.5)', 146, 131, 116, 0.5),
+        lineWidth: 1.5,
+        marker: { enabled: false, states: { hover: { enabled: true, radius: 2 } } }
+      });
+    }
+
+    Highcharts.chart('analytics-cost-chart', {
+      chart: { backgroundColor: 'transparent', spacing: [5, 0, 0, 0] },
+      title: { text: null },
+      xAxis: {
+        type: 'datetime',
+        labels: { style: { color: chartColor('#6B7280', '#928374'), fontSize: '9px', fontFamily: 'ui-monospace, monospace' }, format: '{value:%b %d}' },
+        lineColor: 'transparent', tickLength: 0, gridLineWidth: 0
+      },
+      yAxis: {
+        title: { text: null }, min: 0,
+        labels: { style: { color: chartColor('#6B7280', '#928374'), fontSize: '9px', fontFamily: 'ui-monospace, monospace' }, format: '${value}' },
+        gridLineColor: chartColorAlpha('rgba(107, 114, 128, 0.08)', 146, 131, 116, 0.08)
+      },
+      legend: {
+        enabled: true, align: 'left', verticalAlign: 'top', floating: true, x: 0, y: -5,
+        itemStyle: { color: chartColor('#6B7280', '#928374'), fontSize: '9px', fontFamily: 'ui-monospace, monospace', fontWeight: 'normal' },
+        symbolHeight: 8, symbolWidth: 12, symbolRadius: 2
+      },
+      credits: { enabled: false },
+      tooltip: {
+        backgroundColor: chartColorAlpha('rgba(0, 0, 0, 0.85)', 40, 40, 40, 0.95),
+        borderColor: 'transparent', borderRadius: 3,
+        style: { color: chartColor('#E5E7EB', '#ebdbb2'), fontSize: '10px', fontFamily: 'ui-monospace, monospace' },
+        shared: true,
+        formatter: function() {
+          var html = '<span style="color:' + chartColor('#9CA3AF', '#bdae93') + '">' + Highcharts.dateFormat('%b %d', this.x) + '</span>';
+          this.points.forEach(function(p) {
+            var style = p.series.options.dashStyle === 'Dash' ? ' (prior)' : '';
+            html += '<br/><span style="color:' + p.color + '">' + p.series.name + '</span>: <b>$' + p.y.toFixed(4) + '</b>';
+          });
+          return html;
+        }
+      },
+      plotOptions: {
+        areaspline: { marker: { enabled: false } },
+        spline: { marker: { enabled: false } }
+      },
+      series: series
+    });
+  }
+
+  function renderAll() {
+    window.__initHighchartsDefaults && window.__initHighchartsDefaults();
+    fetch(chartUrl)
+      .then(function(r) { return r.json(); })
+      .then(renderCostChart)
+      .catch(function() {
+        document.getElementById('analytics-cost-chart').innerHTML = '<div style="display:flex;align-items:center;justify-content:center;height:100%;font-family:ui-monospace,monospace;font-size:11px;color:' + chartColor('#9CA3AF', '#928374') + '">failed to load chart</div>';
+      });
+  }
+
+  function waitForHighcharts(attempts) {
+    if (typeof Highcharts !== 'undefined') { renderAll(); }
+    else if (attempts > 0) { setTimeout(function() { waitForHighcharts(attempts - 1); }, 100); }
+  }
+
+  document.readyState === 'loading'
+    ? document.addEventListener('DOMContentLoaded', function() { waitForHighcharts(50); })
+    : waitForHighcharts(50);
+})();
+</script>

data/app/views/ruby_llm/agents/executions/_audio_player.html.erb

@@ -1,5 +1,5 @@
 <%
-  response = @execution.response || {}
+  response = @execution.response_hash
   audio_src = response["audio_url"] || response[:audio_url] ||
               response["audio_data_uri"] || response[:audio_data_uri]
   audio_format = response["format"] || response[:format] ||

data/app/views/ruby_llm/agents/executions/_filters.html.erb

@@ -3,14 +3,15 @@
   selected_agents = params[:agent_types].present? ? (params[:agent_types].is_a?(Array) ? params[:agent_types] : params[:agent_types].split(",")) : []
   selected_statuses = params[:statuses].present? ? (params[:statuses].is_a?(Array) ? params[:statuses] : params[:statuses].split(",")) : []
   selected_models = params[:model_ids].present? ? (params[:model_ids].is_a?(Array) ? params[:model_ids] : params[:model_ids].split(",")) : []
+  selected_tenants = params[:tenant_ids].present? ? (params[:tenant_ids].is_a?(Array) ? params[:tenant_ids] : params[:tenant_ids].split(",")) : []
 
-  has_filters = selected_agents.any? || selected_statuses.any? || params[:days].present? || selected_models.any? || params[:tenant_id].present?
+  has_filters = selected_agents.any? || selected_statuses.any? || params[:days].present? || selected_models.any? || selected_tenants.any?
   active_filter_count = [
     selected_agents.any? ? 1 : 0,
     selected_statuses.any? ? 1 : 0,
     params[:days].present? ? 1 : 0,
     selected_models.any? ? 1 : 0,
-    params[:tenant_id].present? ? 1 : 0
+    selected_tenants.any? ? 1 : 0
   ].sum
 
   status_options = [
@@ -89,11 +90,14 @@
         <%# Tenant Filter %>
         <% if tenant_filter_enabled? && available_tenants.any? %>
           <div class="md:w-auto">
-            <%= render "ruby_llm/agents/shared/select_dropdown",
-                name: "tenant_id",
-                filter_id: "tenant_id",
-                options: [{ value: "", label: "All Tenants" }] + available_tenants.map { |t| { value: t, label: t.truncate(15) } },
-                selected: params[:tenant_id],
+            <%= render "ruby_llm/agents/shared/filter_dropdown",
+                name: "tenant_ids[]",
+                filter_id: "tenant_ids",
+                label: "Tenants",
+                all_label: "All Tenants",
+                options: available_tenants,
+                selected: selected_tenants,
+                searchable: true,
                 icon: "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4",
                 width: "w-40",
                 full_width: true %>
@@ -173,7 +177,7 @@
               <span class="md:hidden">Clear</span>
             <% end %>
           <% end %>
-          <%= link_to ruby_llm_agents.export_executions_path(agent_types: selected_agents.presence, statuses: selected_statuses.presence, days: params[:days].presence, model_ids: selected_models.presence, tenant_id: params[:tenant_id].presence),
+          <%= link_to ruby_llm_agents.export_executions_path(agent_types: selected_agents.presence, statuses: selected_statuses.presence, days: params[:days].presence, model_ids: selected_models.presence, tenant_ids: selected_tenants.presence),
               class: "flex-1 md:flex-initial flex items-center justify-center gap-2 px-3 py-2 md:p-2 text-sm md:text-base text-gray-600 md:text-gray-400 dark:text-gray-300 md:dark:text-gray-400 bg-gray-50 md:bg-transparent dark:bg-gray-700 md:dark:bg-transparent hover:text-gray-600 md:hover:text-gray-600 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600 md:dark:hover:bg-gray-700 rounded-lg transition-colors",
               title: "Export CSV" do %>
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">

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

@@ -57,6 +57,16 @@
   </div>
 <% end %>
 
+<!-- Soft-purge banner -->
+<% if @execution.soft_purged? %>
+  <div class="flex items-start gap-2 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded px-3 py-2 mb-2">
+    <span class="text-amber-600 dark:text-amber-400 text-xs font-mono leading-5">
+      &#9888; Execution details were purged<% if @execution.soft_purged_at %> on <%= @execution.soft_purged_at.strftime("%b %d, %Y") %><% end %>.
+      Cost, token, and timing analytics are preserved.
+    </span>
+  </div>
+<% end %>
+
 <!-- Stats inline row -->
 <div class="flex flex-wrap items-center gap-x-4 gap-y-1 font-mono text-xs text-gray-400 dark:text-gray-500 mb-2">
   <span><span class="text-gray-800 dark:text-gray-200"><%= number_to_human_short(@execution.duration_ms || 0) %>ms</span> duration</span>
@@ -70,8 +80,8 @@
 <!-- ── audio player ──────────────────── -->
 <% if @execution.agent_type.to_s.match?(/Speaker|Narrator|Transcriber/i) ||
       @execution.metadata&.dig("audio_duration_seconds").present? ||
-      @execution.response&.dig("audio_data_uri").present? ||
-      @execution.response&.dig("audio_url").present? %>
+      @execution.response_hash["audio_data_uri"].present? ||
+      @execution.response_hash["audio_url"].present? %>
   <%= render "ruby_llm/agents/executions/audio_player" %>
 <% end %>
 
@@ -254,16 +264,18 @@
 <% end %>
 
 <!-- ── parameters ──────────────────── -->
-<div class="flex items-center gap-3 mt-6 mb-3">
-  <span class="text-[10px] font-medium text-gray-400 dark:text-gray-600 uppercase tracking-widest font-mono">parameters</span>
-  <div class="flex-1 border-t border-gray-200 dark:border-gray-800"></div>
-  <button
-    type="button"
-    data-copy-json="<%= Base64.strict_encode64(JSON.pretty_generate(@execution.parameters || {})) %>"
-    class="copy-json-btn font-mono text-xs text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
-  >copy</button>
-</div>
-<pre class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded p-4 text-xs overflow-x-auto font-mono"><%= highlight_json(@execution.parameters || {}) %></pre>
+<% if @execution.detail && @execution.parameters.present? %>
+  <div class="flex items-center gap-3 mt-6 mb-3">
+    <span class="text-[10px] font-medium text-gray-400 dark:text-gray-600 uppercase tracking-widest font-mono">parameters</span>
+    <div class="flex-1 border-t border-gray-200 dark:border-gray-800"></div>
+    <button
+      type="button"
+      data-copy-json="<%= Base64.strict_encode64(JSON.pretty_generate(@execution.parameters)) %>"
+      class="copy-json-btn font-mono text-xs text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
+    >copy</button>
+  </div>
+  <pre class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded p-4 text-xs overflow-x-auto font-mono"><%= highlight_json(@execution.parameters) %></pre>
+<% end %>
 
 <!-- ── response ──────────────────────── -->
 <% if @execution.response.present? %>
@@ -280,6 +292,7 @@
 <% end %>
 
 <!-- ── tool calls ──────────────────── -->
+<% if @execution.detail %>
 <% tool_calls = @execution.tool_calls || [] %>
 <% tool_call_count = tool_calls.size %>
 <div x-data="{ expanded: <%= tool_call_count <= 3 && tool_call_count > 0 %> }">
@@ -374,6 +387,7 @@
     <p class="text-xs text-gray-400 dark:text-gray-600 font-mono italic">no tool calls</p>
   <% end %>
 </div>
+<% end %>
 
 <!-- ── metadata ──────────────────────── -->
 <% if @execution.metadata.present? && @execution.metadata.any? %>

data/app/views/ruby_llm/agents/shared/_filter_dropdown.html.erb

@@ -10,11 +10,13 @@
   #       { value: "success", label: "Success", color: "bg-green-500" },
   #       { value: "error", label: "Error", color: "bg-red-500" }
   #     ],
-  #     selected: ["success"]
+  #     selected: ["success"],
+  #     searchable: true # renders a client-side search input above the options
 
   selected = local_assigns[:selected] || []
   show_all = local_assigns.fetch(:show_all_option, true)
   all_label = local_assigns[:all_label] || "All"
+  searchable = local_assigns.fetch(:searchable, false)
 
   current_label = if selected.empty?
     label
@@ -32,8 +34,31 @@
 
   has_selection = selected.any?
 %>
-<div class="relative" x-data="{ open: false }" @click.outside="open = false" data-filter="<%= filter_id %>">
-  <button type="button" @click="open = !open"
+<%#
+  Multi-select behavior:
+  - Checkbox click: toggle that option, mark dirty, keep dropdown open.
+  - Label click: clear other selections, check only this one, close, submit.
+  - Close dropdown (outside click, button toggle, Escape): if dirty, submit.
+  This batches checkbox picks into a single request when the user closes
+  the dropdown — no reliance on persisting open state across reload.
+%>
+<div class="relative"
+     x-data="{
+       open: false,
+       query: '',
+       dirty: false,
+       closeAndApply() {
+         this.open = false;
+         if (this.dirty) {
+           this.dirty = false;
+           this.$el.closest('form').requestSubmit();
+         }
+       }
+     }"
+     @click.outside="closeAndApply()"
+     @keydown.escape.window="if (open) closeAndApply()"
+     data-filter="<%= filter_id %>">
+  <button type="button" @click="open ? closeAndApply() : open = true"
     class="flex items-center gap-1.5 px-2 py-1 font-mono text-xs rounded
            hover:bg-gray-100 dark:hover:bg-gray-800/50 transition-colors
            <%= has_selection ? 'text-gray-900 dark:text-gray-100' : 'text-gray-400 dark:text-gray-500' %>">
@@ -50,7 +75,19 @@
        x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-75"
        x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
-       class="absolute z-20 mt-1 min-w-max bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-1 max-h-64 overflow-y-auto">
+       class="absolute z-20 mt-1 min-w-max w-56 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-1">
+
+    <% if searchable %>
+      <div class="px-2 py-1.5 border-b border-gray-100 dark:border-gray-700 sticky top-0 bg-white dark:bg-gray-800">
+        <input type="text" x-model="query" @click.stop
+               placeholder="Search…"
+               x-ref="<%= filter_id %>_search"
+               x-effect="if (open) $nextTick(() => $refs['<%= filter_id %>_search']?.focus())"
+               class="w-full px-2 py-1 text-xs font-mono rounded border border-gray-200 dark:border-gray-700 bg-transparent text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
+      </div>
+    <% end %>
+
+    <div class="max-h-56 overflow-y-auto">
 
     <% if show_all %>
       <div class="px-3 py-1.5 border-b border-gray-100 dark:border-gray-700">
@@ -60,7 +97,7 @@
                  <%= selected.empty? ? 'checked' : '' %>
                  @change="
                    $el.closest('[data-filter]').querySelectorAll('.filter-cb').forEach(c => c.checked = false);
-                   $el.closest('form').requestSubmit();
+                   dirty = true;
                  ">
           <span class="text-gray-700 dark:text-gray-200"><%= all_label %></span>
         </label>
@@ -68,13 +105,14 @@
     <% end %>
 
     <% options.each do |option| %>
-      <div class="flex items-center gap-2 px-3 py-1.5 font-mono text-xs text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700">
+      <div class="flex items-center gap-2 px-3 py-1.5 font-mono text-xs text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700"
+           <% if searchable %>x-show="query === '' || '<%= j(option[:label].to_s.downcase) %>'.includes(query.toLowerCase())"<% end %>>
         <input type="checkbox"
                name="<%= name %>"
                value="<%= option[:value] %>"
                class="filter-cb rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500 dark:bg-gray-700"
                <%= selected.include?(option[:value].to_s) ? 'checked' : '' %>
-               @change="$el.closest('form').requestSubmit()">
+               @change="dirty = true">
         <span class="flex-1 flex items-center gap-1.5 cursor-pointer"
               @click.prevent="
                 $el.closest('[data-filter]').querySelectorAll('.filter-cb').forEach(c => c.checked = false);
@@ -89,5 +127,6 @@
         </span>
       </div>
     <% end %>
+    </div>
   </div>
 </div>

data/app/views/ruby_llm/agents/shared/_tenant_filter.html.erb

@@ -6,8 +6,8 @@
               class="bg-transparent border border-gray-200 dark:border-gray-800 rounded px-2 py-0.5 text-xs font-mono text-gray-900 dark:text-gray-100 focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-600 focus:border-gray-400 dark:focus:border-gray-600">
         <option value="">all tenants</option>
         <% available_tenants.each do |tenant| %>
-          <option value="<%= tenant %>" <%= 'selected' if tenant == current_tenant_id %>>
-            <%= tenant %>
+          <option value="<%= tenant[:value] %>" <%= 'selected' if tenant[:value] == current_tenant_id %>>
+            <%= tenant[:label] %>
           </option>
         <% end %>
       </select>