ruby_llm-agents 3.11.0 → 3.12.0

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

@@ -7,24 +7,44 @@
   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
+
+  overridable = config[:overridable_fields] || []
+  overrides = config[:active_overrides] || {}
+  has_overrides = overrides.any?
 %>
 
-<div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4 font-mono text-xs">
+<div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4 font-mono text-xs" x-data="{ editing: false }">
   <!-- Basic -->
   <div>
-    <span class="text-[10px] text-gray-400 dark:text-gray-600 uppercase tracking-wider">basic</span>
-    <div class="mt-1.5 space-y-0.5">
+    <div class="flex items-center gap-2">
+      <span class="text-[10px] text-gray-400 dark:text-gray-600 uppercase tracking-wider">basic</span>
+      <% if overridable.any? %>
+        <button @click="editing = !editing" class="text-[10px] text-gray-400 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-300 transition-colors" x-text="editing ? 'cancel' : 'edit'"></button>
+      <% end %>
+    </div>
+
+    <%# Read-only view %>
+    <div class="mt-1.5 space-y-0.5" x-show="!editing">
       <div class="flex items-center gap-3 py-1">
         <span class="w-20 text-gray-400 dark:text-gray-600">model</span>
         <span class="text-gray-900 dark:text-gray-200"><%= config[:model] %></span>
+        <% if overrides["model"] %>
+          <span class="text-[10px] text-yellow-600 dark:text-yellow-500">overridden</span>
+        <% end %>
       </div>
       <div class="flex items-center gap-3 py-1">
         <span class="w-20 text-gray-400 dark:text-gray-600">temperature</span>
         <span class="text-gray-900 dark:text-gray-200"><%= config[:temperature] %></span>
+        <% if overrides["temperature"] %>
+          <span class="text-[10px] text-yellow-600 dark:text-yellow-500">overridden</span>
+        <% end %>
       </div>
       <div class="flex items-center gap-3 py-1">
         <span class="w-20 text-gray-400 dark:text-gray-600">timeout</span>
         <span class="text-gray-900 dark:text-gray-200"><%= config[:timeout] %>s</span>
+        <% if overrides["timeout"] %>
+          <span class="text-[10px] text-yellow-600 dark:text-yellow-500">overridden</span>
+        <% end %>
       </div>
       <div class="flex items-center gap-3 py-1">
         <span class="w-20 text-gray-400 dark:text-gray-600">cache</span>
@@ -36,6 +56,71 @@
         <% end %>
       </div>
     </div>
+
+    <%# Edit form (only shown when editing) %>
+    <% if overridable.any? %>
+      <div x-show="editing" x-cloak>
+        <%= form_tag ruby_llm_agents.agent_path(@agent_type), method: :patch, class: "mt-1.5 space-y-1.5" do %>
+          <% if overridable.include?(:model) %>
+            <div class="flex items-center gap-3 py-1">
+              <label class="w-20 text-gray-400 dark:text-gray-600" for="override_model">model</label>
+              <input type="text" name="override[model]" id="override_model"
+                     value="<%= overrides["model"] || config[:model] %>"
+                     class="bg-transparent border border-gray-300 dark:border-gray-700 rounded px-2 py-0.5 text-gray-900 dark:text-gray-200 text-xs font-mono w-48 focus:outline-none focus:border-gray-500 dark:focus:border-gray-400">
+            </div>
+          <% else %>
+            <div class="flex items-center gap-3 py-1">
+              <span class="w-20 text-gray-400 dark:text-gray-600">model</span>
+              <span class="text-gray-900 dark:text-gray-200"><%= config[:model] %></span>
+              <span class="text-[10px] text-gray-400 dark:text-gray-600">locked</span>
+            </div>
+          <% end %>
+
+          <% if overridable.include?(:temperature) %>
+            <div class="flex items-center gap-3 py-1">
+              <label class="w-20 text-gray-400 dark:text-gray-600" for="override_temperature">temperature</label>
+              <input type="number" name="override[temperature]" id="override_temperature"
+                     value="<%= overrides["temperature"] || config[:temperature] %>"
+                     step="0.1" min="0" max="2"
+                     class="bg-transparent border border-gray-300 dark:border-gray-700 rounded px-2 py-0.5 text-gray-900 dark:text-gray-200 text-xs font-mono w-24 focus:outline-none focus:border-gray-500 dark:focus:border-gray-400">
+            </div>
+          <% else %>
+            <div class="flex items-center gap-3 py-1">
+              <span class="w-20 text-gray-400 dark:text-gray-600">temperature</span>
+              <span class="text-gray-900 dark:text-gray-200"><%= config[:temperature] %></span>
+              <span class="text-[10px] text-gray-400 dark:text-gray-600">locked</span>
+            </div>
+          <% end %>
+
+          <% if overridable.include?(:timeout) %>
+            <div class="flex items-center gap-3 py-1">
+              <label class="w-20 text-gray-400 dark:text-gray-600" for="override_timeout">timeout</label>
+              <input type="number" name="override[timeout]" id="override_timeout"
+                     value="<%= overrides["timeout"] || config[:timeout] %>"
+                     min="1" max="600"
+                     class="bg-transparent border border-gray-300 dark:border-gray-700 rounded px-2 py-0.5 text-gray-900 dark:text-gray-200 text-xs font-mono w-24 focus:outline-none focus:border-gray-500 dark:focus:border-gray-400">
+              <span class="text-gray-400 dark:text-gray-600">s</span>
+            </div>
+          <% else %>
+            <div class="flex items-center gap-3 py-1">
+              <span class="w-20 text-gray-400 dark:text-gray-600">timeout</span>
+              <span class="text-gray-900 dark:text-gray-200"><%= config[:timeout] %>s</span>
+              <span class="text-[10px] text-gray-400 dark:text-gray-600">locked</span>
+            </div>
+          <% end %>
+
+          <div class="flex items-center gap-2 pt-2">
+            <button type="submit" class="text-[10px] px-2 py-0.5 rounded bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 hover:bg-gray-700 dark:hover:bg-gray-300 transition-colors">save overrides</button>
+            <% if has_overrides %>
+              <%= link_to "reset all", ruby_llm_agents.reset_overrides_agent_path(@agent_type),
+                    method: :delete,
+                    class: "text-[10px] text-red-500 hover:text-red-400 transition-colors",
+                    data: { confirm: "Remove all dashboard overrides for this agent?" } %>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
   </div>
 
   <!-- Reliability -->
@@ -56,7 +141,7 @@
           <span class="w-1.5 h-1.5 rounded-full flex-shrink-0 <%= has_fallbacks ? 'bg-green-500' : 'bg-gray-400' %>"></span>
           <span class="w-16 text-gray-400 dark:text-gray-600">fallbacks</span>
           <% if has_fallbacks %>
-            <span class="text-gray-900 dark:text-gray-200 truncate"><%= fallback_models.join(" → ") %></span>
+            <span class="text-gray-900 dark:text-gray-200 truncate"><%= fallback_models.join(" &rarr; ") %></span>
           <% else %>
             <span class="text-gray-400 dark:text-gray-600">&mdash;</span>
           <% end %>

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

@@ -3,6 +3,18 @@
   <%= link_to "← agents", ruby_llm_agents.agents_path(subtab: params[:subtab]), class: "text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300" %>
 </nav>
 
+<%# Override banner %>
+<% if @config && @config[:has_overrides] %>
+  <div class="flex items-center gap-2 px-3 py-1.5 mb-4 rounded border border-yellow-300 dark:border-yellow-700 bg-yellow-50 dark:bg-yellow-900/20 font-mono text-xs text-yellow-700 dark:text-yellow-400">
+    <svg class="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"></path></svg>
+    <span>dashboard overrides active: <strong><%= @config[:active_overrides].keys.join(", ") %></strong></span>
+    <%= link_to "reset", ruby_llm_agents.reset_overrides_agent_path(@agent_type),
+          method: :delete,
+          class: "ml-auto text-yellow-600 dark:text-yellow-500 hover:text-yellow-800 dark:hover:text-yellow-300",
+          data: { confirm: "Remove all dashboard overrides?" } %>
+  </div>
+<% end %>
+
 <!-- ── agent header ──────────────── -->
 <div class="flex items-start justify-between gap-8 mb-2">
   <!-- Left: identity -->
@@ -67,6 +79,8 @@
       <span><span class="text-gray-800 dark:text-gray-200">$<%= number_with_precision(@stats[:total_cost] || 0, precision: 4) %></span> cost</span>
     </div>
     <div class="flex items-center justify-end gap-x-4 text-gray-500 dark:text-gray-600">
+      <span><span class="text-gray-600 dark:text-gray-400">$<%= number_with_precision(@stats[:avg_cost] || 0, precision: 4) %></span> avg cost</span>
+      <span><span class="text-gray-600 dark:text-gray-400"><%= number_with_delimiter(@stats[:avg_tokens] || 0) %></span> avg tokens</span>
       <span><span class="text-gray-600 dark:text-gray-400"><%= number_with_delimiter(@stats[:total_tokens] || 0) %></span> tokens</span>
       <span><span class="text-gray-600 dark:text-gray-400"><%= number_with_delimiter(@stats[:avg_duration_ms] || 0) %></span>ms avg</span>
       <% if (@config && @config[:cache_enabled]) || @cache_hit_rate > 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/tenants/index.html.erb

@@ -65,7 +65,8 @@
                             when "soft" then "badge-timeout"
                             else ""
                             end
-        last_execution = tenant.executions.order(created_at: :desc).pick(:created_at)
+        last_execution = @tenant_last_executions[tenant.tenant_id]
+        tenant_cost = @tenant_costs[tenant.tenant_id] || 0
       %>
       <div class="group flex items-center gap-3 py-1.5 px-2 -mx-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800/50 cursor-pointer"
            onclick="window.location='<%= tenant_path(tenant) %>'">
@@ -96,7 +97,7 @@
             <span class="text-gray-300 dark:text-gray-700">none</span>
           <% end %>
         </span>
-        <span class="w-16 flex-shrink-0 text-right text-gray-500 dark:text-gray-400 hidden md:inline">$<%= number_with_precision(tenant.cost, precision: 2) %></span>
+        <span class="w-16 flex-shrink-0 text-right text-gray-500 dark:text-gray-400 hidden md:inline">$<%= number_with_precision(tenant_cost, precision: 2) %></span>
         <span class="w-24 flex-shrink-0 text-gray-400 dark:text-gray-600 text-right whitespace-nowrap">
           <% if last_execution %>
             <%= time_ago_in_words(last_execution) %>