ruby_llm-agents 3.5.4 → 3.6.0

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

@@ -12,111 +12,55 @@
       <span class="<%= @now_strip[:errors_today] > 0 ? 'text-red-500' : 'text-gray-800 dark:text-gray-200' %>"><%= @now_strip[:errors_today] %></span> errors<% if total > 0 && @now_strip[:errors_today] > 0 %> <span class="text-gray-300 dark:text-gray-600">(<%= (@now_strip[:errors_today].to_f / total * 100).round(1) %>%)</span><% end %>
       <span class="text-gray-300 dark:text-gray-700">&middot;</span>
       <span class="text-gray-800 dark:text-gray-200">$<%= number_with_precision(@now_strip[:cost_today], precision: 2) %></span>
+      <% if @cache_savings[:count] > 0 %>
+        <span class="text-gray-300 dark:text-gray-700">&middot;</span>
+        <span class="text-green-500"><%= number_with_delimiter(@cache_savings[:count]) %></span> cache hits
+        <span class="text-gray-300 dark:text-gray-700">&middot;</span>
+        <span class="text-green-500">$<%= number_with_precision(@cache_savings[:estimated_savings], precision: 2) %></span> saved
+        <span class="text-gray-300 dark:text-gray-700">&middot;</span>
+        <span class="text-gray-800 dark:text-gray-200"><%= @cache_savings[:hit_rate] %>%</span> hit rate
+      <% end %>
     </div>
   </div>
-  <div class="flex font-mono text-xs gap-0.5">
-    <%= link_to "today", ruby_llm_agents.root_path(range: "today"),
-        class: "px-2 py-0.5 #{@selected_range == 'today' ? 'text-gray-900 dark:text-gray-100' : 'text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'}" %>
-    <%= link_to "7d", ruby_llm_agents.root_path(range: "7d"),
-        class: "px-2 py-0.5 #{@selected_range == '7d' ? 'text-gray-900 dark:text-gray-100' : 'text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'}" %>
-    <%= link_to "30d", ruby_llm_agents.root_path(range: "30d"),
-        class: "px-2 py-0.5 #{@selected_range == '30d' ? 'text-gray-900 dark:text-gray-100' : 'text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'}" %>
+  <div class="relative font-mono text-xs" x-data="{ open: false, showCustom: false }" @click.outside="open = false; showCustom = false">
+    <button @click="open = !open" class="flex items-center gap-1 px-2 py-0.5 text-gray-900 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300">
+      <% if @selected_range == "custom" && @custom_from && @custom_to %>
+        <%= @custom_from.strftime("%b %-d") %> – <%= @custom_to.strftime("%b %-d") %>
+      <% else %>
+        <%= range_display_name(@selected_range) %>
+      <% end %>
+      <svg class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+    </button>
+    <div x-show="open" x-cloak x-transition:enter="transition ease-out duration-100" 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 right-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">
+      <% range_presets.each do |preset| %>
+        <%= link_to preset[:label], ruby_llm_agents.root_path(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 @click.stop="showCustom = !showCustom" class="w-full text-left px-3 py-1.5 <%= @selected_range == 'custom' ? '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' %>">
+        Custom range&hellip;
+      </button>
+      <div x-show="showCustom" x-cloak class="px-3 py-2 border-t border-gray-200 dark:border-gray-700">
+        <form action="<%= ruby_llm_agents.root_path %>" method="get" class="space-y-2">
+          <input type="hidden" name="range" value="custom">
+          <label class="block text-[10px] text-gray-400 dark:text-gray-500 uppercase">From</label>
+          <input type="date" name="from" value="<%= @custom_from %>" 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">To</label>
+          <input type="date" name="to" value="<%= @custom_to %>" 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="submit" class="w-full 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>
+        </form>
+      </div>
+    </div>
   </div>
 </div>
 
 <!-- Activity Chart -->
-<div id="activity-chart" style="width: 100%; height: 180px;"></div>
-
-<script>
-  (function() {
-    const range = '<%= @selected_range %>';
-    const chartUrl = '<%= ruby_llm_agents.chart_data_path %>?range=' + range;
-    const hourMs = 3600000;
-    const dayMs = 24 * hourMs;
-
-    function getTimeRangeMs(r) {
-      if (r === 'today') return dayMs;
-      if (r === '7d') return 7 * dayMs;
-      return 30 * dayMs;
-    }
-
-    function toDatetimePoints(data, r) {
-      const now = Date.now();
-      const step = r === 'today' ? hourMs : dayMs;
-      return data.map((val, i) => [now - (data.length - 1 - i) * step, val]);
-    }
-
-    function initChart() {
-      fetch(chartUrl)
-        .then(res => res.json())
-        .then(data => {
-          const now = Date.now();
-          const fmt = range === 'today' ? '%H:%M' : '%b %d';
-
-          Highcharts.chart('activity-chart', {
-            chart: { type: 'areaspline', backgroundColor: 'transparent', spacing: [5, 0, 0, 0] },
-            title: { text: null },
-            xAxis: {
-              type: 'datetime',
-              min: now - getTimeRangeMs(range),
-              max: now,
-              labels: { style: { color: chartColor('#6B7280', '#928374'), fontSize: '9px', fontFamily: 'ui-monospace, monospace' }, format: '{value:' + fmt + '}' },
-              lineColor: 'transparent',
-              tickLength: 0,
-              gridLineWidth: 0
-            },
-            yAxis: {
-              title: { text: null },
-              min: 0,
-              allowDecimals: false,
-              labels: { style: { color: chartColor('#6B7280', '#928374'), fontSize: '9px', fontFamily: 'ui-monospace, monospace' } },
-              gridLineColor: chartColorAlpha('rgba(107, 114, 128, 0.08)', 146, 131, 116, 0.08)
-            },
-            legend: { enabled: false },
-            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() {
-                let html = '<span style="color:' + chartColor('#9CA3AF', '#bdae93') + '">' + Highcharts.dateFormat(fmt, this.x) + '</span>';
-                this.points.forEach(p => html += '<br/>' + p.series.name + ': <b>' + p.y + '</b>');
-                return html;
-              }
-            },
-            plotOptions: {
-              areaspline: {
-                stacking: 'normal',
-                lineWidth: 1.5,
-                marker: { enabled: false, states: { hover: { enabled: true, radius: 2 } } }
-              }
-            },
-            series: [
-              {
-                name: 'errors',
-                data: toDatetimePoints(data.series[1].data, range),
-                color: chartColor('#EF4444', '#fb4934'),
-                fillColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [[0, chartColorAlpha('rgba(239, 68, 68, 0.08)', 251, 73, 52, 0.08)], [1, chartColorAlpha('rgba(239, 68, 68, 0)', 251, 73, 52, 0)]] }
-              },
-              {
-                name: 'success',
-                data: toDatetimePoints(data.series[0].data, range),
-                color: chartColor('#10B981', '#b8bb26'),
-                fillColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [[0, chartColorAlpha('rgba(16, 185, 129, 0.08)', 184, 187, 38, 0.08)], [1, chartColorAlpha('rgba(16, 185, 129, 0)', 184, 187, 38, 0)]] }
-              }
-            ]
-          });
-        })
-        .catch(err => console.log('[RubyLLM::Agents] Chart error:', err));
-    }
-
-    document.readyState === 'loading'
-      ? document.addEventListener('DOMContentLoaded', initChart)
-      : initChart();
-  })();
-</script>
+<div id="activity-chart" style="width: 100%; height: 160px;"></div>
 
 <!-- Tenant Budget (when viewing specific tenant) -->
 <%= render partial: "ruby_llm/agents/dashboard/tenant_budget", locals: { tenant_budget: @tenant_budget } %>
@@ -133,7 +77,6 @@
     <% @recent_executions.first(5).each do |execution| %>
       <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='<%= ruby_llm_agents.execution_path(execution) %>'">
-        <span class="text-gray-300 dark:text-gray-700">▸</span>
         <span class="w-28 truncate text-gray-900 dark:text-gray-200"><%= execution.agent_type.gsub(/Agent$/, '') %></span>
         <%# Status dot %>
         <% dot_color = if execution.status_running?
@@ -249,3 +192,357 @@
     <div class="font-mono text-xs text-gray-400 dark:text-gray-600 py-2 px-2">&mdash;</div>
   <% end %>
 </div>
+
+<!-- ── spending ──────────────────────────────── -->
+<%
+  # Prepare cost-by-agent data (top 8 by cost, all agent types merged)
+  cost_by_agent_data = [@agent_stats, @embedder_stats, @transcriber_stats, @speaker_stats, @image_generator_stats]
+    .flatten.compact
+    .select { |a| a[:total_cost].to_f > 0 }
+    .sort_by { |a| -a[:total_cost].to_f }
+    .first(8)
+
+  # Prepare cost-by-model data (top 6)
+  cost_by_model_data = @model_stats
+    .select { |m| m[:total_cost].to_f > 0 }
+    .first(6)
+%>
+<div class="mt-8">
+  <div class="flex items-center gap-3 mb-3">
+    <span class="text-[10px] font-medium text-gray-400 dark:text-gray-600 uppercase tracking-widest font-mono">spending</span>
+    <div class="flex-1 border-t border-gray-200 dark:border-gray-800"></div>
+  </div>
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+    <div id="cost-over-time-chart" style="width: 100%; height: 160px;"></div>
+    <div id="tokens-over-time-chart" style="width: 100%; height: 160px;"></div>
+  </div>
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4">
+    <div id="cost-by-agent-chart" style="width: 100%; height: 200px;"></div>
+    <div id="cost-by-model-chart" style="width: 100%; height: 200px;"></div>
+  </div>
+</div>
+
+<%# Top tenants overview %>
+<%= render partial: "ruby_llm/agents/dashboard/top_tenants", locals: { top_tenants: @top_tenants } %>
+
+<script>
+  (function() {
+    const range = '<%= @selected_range %>';
+    const customFrom = '<%= @custom_from %>';
+    const customTo = '<%= @custom_to %>';
+    var chartUrl = '<%= ruby_llm_agents.chart_data_path %>?range=' + range;
+    if (range === 'custom' && customFrom && customTo) {
+      chartUrl += '&from=' + customFrom + '&to=' + customTo;
+    }
+    const hourMs = 3600000;
+    const dayMs = 24 * hourMs;
+
+    function getTimeRangeMs(r) {
+      if (r === 'today') return dayMs;
+      if (r === '7d') return 7 * dayMs;
+      if (r === '90d') return 90 * dayMs;
+      if (r === 'custom' && customFrom && customTo) {
+        return (new Date(customTo).getTime() - new Date(customFrom).getTime()) + dayMs;
+      }
+      return 30 * dayMs;
+    }
+
+    function toDatetimePoints(data, r) {
+      var baseTime, step;
+      if (r === 'today') {
+        step = hourMs;
+        baseTime = Date.now();
+      } else if (r === 'custom' && customFrom) {
+        step = dayMs;
+        baseTime = new Date(customTo || customFrom).getTime() + dayMs;
+      } else {
+        step = dayMs;
+        baseTime = Date.now();
+      }
+      return data.map((val, i) => [baseTime - (data.length - 1 - i) * step, val]);
+    }
+
+    // Shared chart options
+    function baseXAxis(now, fmt) {
+      var xMin, xMax;
+      if (range === 'custom' && customFrom && customTo) {
+        xMin = new Date(customFrom).getTime();
+        xMax = new Date(customTo).getTime() + dayMs;
+      } else {
+        xMin = now - getTimeRangeMs(range);
+        xMax = now;
+      }
+      return {
+        type: 'datetime',
+        min: xMin,
+        max: xMax,
+        labels: { style: { color: chartColor('#6B7280', '#928374'), fontSize: '9px', fontFamily: 'ui-monospace, monospace' }, format: '{value:' + fmt + '}' },
+        lineColor: 'transparent',
+        tickLength: 0,
+        gridLineWidth: 0
+      };
+    }
+
+    function baseTooltip(fmt, valueFormatter) {
+      return {
+        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(fmt, this.x) + '</span>';
+          this.points.forEach(function(p) { html += '<br/>' + p.series.name + ': <b>' + valueFormatter(p.y) + '</b>'; });
+          return html;
+        }
+      };
+    }
+
+    function humanTokens(n) {
+      if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
+      if (n >= 1000) return (n / 1000).toFixed(1) + 'K';
+      return n.toString();
+    }
+
+    // Activity chart
+    function renderActivityChart(data) {
+      var now = Date.now();
+      var fmt = range === 'today' ? '%H:%M' : '%b %d';
+
+      Highcharts.chart('activity-chart', {
+        chart: { type: 'areaspline', backgroundColor: 'transparent', spacing: [5, 0, 0, 0] },
+        title: { text: null },
+        xAxis: baseXAxis(now, fmt),
+        yAxis: {
+          title: { text: null },
+          min: 0,
+          allowDecimals: false,
+          labels: { style: { color: chartColor('#6B7280', '#928374'), fontSize: '9px', fontFamily: 'ui-monospace, monospace' } },
+          gridLineColor: chartColorAlpha('rgba(107, 114, 128, 0.08)', 146, 131, 116, 0.08)
+        },
+        legend: { enabled: false },
+        credits: { enabled: false },
+        tooltip: baseTooltip(fmt, function(v) { return v; }),
+        plotOptions: {
+          areaspline: {
+            stacking: 'normal',
+            lineWidth: 1.5,
+            marker: { enabled: false, states: { hover: { enabled: true, radius: 2 } } }
+          }
+        },
+        series: [
+          {
+            name: 'errors',
+            data: toDatetimePoints(data.series[1].data, range),
+            color: chartColor('#EF4444', '#fb4934'),
+            fillColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [[0, chartColorAlpha('rgba(239, 68, 68, 0.08)', 251, 73, 52, 0.08)], [1, chartColorAlpha('rgba(239, 68, 68, 0)', 251, 73, 52, 0)]] }
+          },
+          {
+            name: 'success',
+            data: toDatetimePoints(data.series[0].data, range),
+            color: chartColor('#10B981', '#b8bb26'),
+            fillColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [[0, chartColorAlpha('rgba(16, 185, 129, 0.08)', 184, 187, 38, 0.08)], [1, chartColorAlpha('rgba(16, 185, 129, 0)', 184, 187, 38, 0)]] }
+          }
+        ]
+      });
+    }
+
+    // Cost over time chart
+    function renderCostChart(data) {
+      if (!data.series[2]) return;
+      var now = Date.now();
+      var fmt = range === 'today' ? '%H:%M' : '%b %d';
+
+      Highcharts.chart('cost-over-time-chart', {
+        chart: { type: 'areaspline', backgroundColor: 'transparent', spacing: [5, 0, 0, 0] },
+        title: { text: 'cost', align: 'left', style: { color: chartColor('#9CA3AF', '#928374'), fontSize: '9px', fontFamily: 'ui-monospace, monospace', fontWeight: 'normal', textTransform: 'uppercase', letterSpacing: '0.05em' } },
+        xAxis: baseXAxis(now, fmt),
+        yAxis: {
+          title: { text: null },
+          min: 0,
+          labels: {
+            style: { color: chartColor('#6B7280', '#928374'), fontSize: '9px', fontFamily: 'ui-monospace, monospace' },
+            formatter: function() { return '$' + this.value.toFixed(2); }
+          },
+          gridLineColor: chartColorAlpha('rgba(107, 114, 128, 0.08)', 146, 131, 116, 0.08)
+        },
+        legend: { enabled: false },
+        credits: { enabled: false },
+        tooltip: baseTooltip(fmt, function(v) { return '$' + v.toFixed(4); }),
+        plotOptions: {
+          areaspline: {
+            lineWidth: 1.5,
+            marker: { enabled: false, states: { hover: { enabled: true, radius: 2 } } }
+          }
+        },
+        series: [{
+          name: 'cost',
+          data: toDatetimePoints(data.series[2].data, range),
+          color: chartColor('#F59E0B', '#fabd2f'),
+          fillColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [[0, chartColorAlpha('rgba(245, 158, 11, 0.12)', 250, 189, 47, 0.12)], [1, chartColorAlpha('rgba(245, 158, 11, 0)', 250, 189, 47, 0)]] }
+        }]
+      });
+    }
+
+    // Tokens over time chart
+    function renderTokensChart(data) {
+      if (!data.series[4]) return;
+      var now = Date.now();
+      var fmt = range === 'today' ? '%H:%M' : '%b %d';
+
+      Highcharts.chart('tokens-over-time-chart', {
+        chart: { type: 'areaspline', backgroundColor: 'transparent', spacing: [5, 0, 0, 0] },
+        title: { text: 'tokens', align: 'left', style: { color: chartColor('#9CA3AF', '#928374'), fontSize: '9px', fontFamily: 'ui-monospace, monospace', fontWeight: 'normal', textTransform: 'uppercase', letterSpacing: '0.05em' } },
+        xAxis: baseXAxis(now, fmt),
+        yAxis: {
+          title: { text: null },
+          min: 0,
+          labels: {
+            style: { color: chartColor('#6B7280', '#928374'), fontSize: '9px', fontFamily: 'ui-monospace, monospace' },
+            formatter: function() { return humanTokens(this.value); }
+          },
+          gridLineColor: chartColorAlpha('rgba(107, 114, 128, 0.08)', 146, 131, 116, 0.08)
+        },
+        legend: { enabled: false },
+        credits: { enabled: false },
+        tooltip: baseTooltip(fmt, function(v) { return humanTokens(v); }),
+        plotOptions: {
+          areaspline: {
+            lineWidth: 1.5,
+            marker: { enabled: false, states: { hover: { enabled: true, radius: 2 } } }
+          }
+        },
+        series: [{
+          name: 'tokens',
+          data: toDatetimePoints(data.series[4].data, range),
+          color: chartColor('#3B82F6', '#83a598'),
+          fillColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [[0, chartColorAlpha('rgba(59, 130, 246, 0.12)', 131, 165, 152, 0.12)], [1, chartColorAlpha('rgba(59, 130, 246, 0)', 131, 165, 152, 0)]] }
+        }]
+      });
+    }
+
+    // Cost by Agent chart (horizontal bar, data embedded via ERB)
+    function renderCostByAgentChart() {
+      var agentData = <%= raw cost_by_agent_data.map { |a| { name: a[:agent_type].to_s.demodulize, y: a[:total_cost].to_f.round(4) } }.to_json %>;
+      if (agentData.length === 0) {
+        document.getElementById('cost-by-agent-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') + '">&mdash;</div>';
+        return;
+      }
+      var categories = agentData.map(function(d) { return d.name; });
+      var values = agentData.map(function(d) { return d.y; });
+
+      Highcharts.chart('cost-by-agent-chart', {
+        chart: { type: 'bar', backgroundColor: 'transparent', spacing: [5, 10, 5, 0] },
+        title: { text: 'cost by agent', align: 'left', style: { color: chartColor('#9CA3AF', '#928374'), fontSize: '9px', fontFamily: 'ui-monospace, monospace', fontWeight: 'normal', textTransform: 'uppercase', letterSpacing: '0.05em' } },
+        xAxis: {
+          categories: categories,
+          labels: { style: { color: chartColor('#6B7280', '#928374'), fontSize: '9px', fontFamily: 'ui-monospace, monospace' } },
+          lineColor: 'transparent',
+          tickLength: 0
+        },
+        yAxis: {
+          title: { text: null },
+          min: 0,
+          labels: {
+            style: { color: chartColor('#6B7280', '#928374'), fontSize: '9px', fontFamily: 'ui-monospace, monospace' },
+            formatter: function() { return '$' + this.value.toFixed(2); }
+          },
+          gridLineColor: chartColorAlpha('rgba(107, 114, 128, 0.08)', 146, 131, 116, 0.08)
+        },
+        legend: { enabled: false },
+        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' },
+          pointFormat: '<b>${point.y:.4f}</b>'
+        },
+        plotOptions: {
+          bar: {
+            borderWidth: 0,
+            borderRadius: 2,
+            color: chartColor('#F59E0B', '#fabd2f')
+          }
+        },
+        series: [{ name: 'cost', data: values }]
+      });
+    }
+
+    // Cost by Model chart (donut/pie, data embedded via ERB)
+    function renderCostByModelChart() {
+      var modelData = <%= raw cost_by_model_data.map { |m| { name: m[:model_id].to_s.split("/").last.truncate(28), y: m[:total_cost].to_f.round(4), pct: m[:cost_percentage] } }.to_json %>;
+      if (modelData.length === 0) {
+        document.getElementById('cost-by-model-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') + '">&mdash;</div>';
+        return;
+      }
+      var colors = [
+        chartColor('#F59E0B', '#fabd2f'),
+        chartColor('#3B82F6', '#83a598'),
+        chartColor('#10B981', '#b8bb26'),
+        chartColor('#EF4444', '#fb4934'),
+        chartColor('#8B5CF6', '#d3869b'),
+        chartColor('#F97316', '#fe8019')
+      ];
+
+      Highcharts.chart('cost-by-model-chart', {
+        chart: { type: 'pie', backgroundColor: 'transparent', spacing: [5, 0, 5, 0] },
+        title: { text: 'cost by model', align: 'left', style: { color: chartColor('#9CA3AF', '#928374'), fontSize: '9px', fontFamily: 'ui-monospace, monospace', fontWeight: 'normal', textTransform: 'uppercase', letterSpacing: '0.05em' } },
+        legend: { enabled: false },
+        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' },
+          pointFormat: '<b>${point.y:.4f}</b> ({point.pct}%)'
+        },
+        plotOptions: {
+          pie: {
+            innerSize: '50%',
+            borderWidth: 0,
+            colors: colors,
+            dataLabels: {
+              enabled: true,
+              format: '{point.name}',
+              style: { color: chartColor('#6B7280', '#928374'), fontSize: '9px', fontFamily: 'ui-monospace, monospace', fontWeight: 'normal', textOutline: 'none' },
+              distance: 10
+            }
+          }
+        },
+        series: [{ name: 'cost', data: modelData }]
+      });
+    }
+
+    function initCharts() {
+      window.__initHighchartsDefaults && window.__initHighchartsDefaults();
+
+      fetch(chartUrl)
+        .then(function(res) { return res.json(); })
+        .then(function(data) {
+          renderActivityChart(data);
+          renderCostChart(data);
+          renderTokensChart(data);
+        })
+        .catch(function(err) { console.log('[RubyLLM::Agents] Chart error:', err); });
+
+      renderCostByAgentChart();
+      renderCostByModelChart();
+    }
+
+    // Wait for Highcharts to load (handles async fallback CDN)
+    function waitForHighcharts(attempts) {
+      if (typeof Highcharts !== 'undefined') {
+        initCharts();
+      } else if (attempts > 0) {
+        setTimeout(function() { waitForHighcharts(attempts - 1); }, 100);
+      } else {
+        console.log('[RubyLLM::Agents] Highcharts not loaded after 5s — charts disabled');
+      }
+    }
+
+    document.readyState === 'loading'
+      ? document.addEventListener('DOMContentLoaded', function() { waitForHighcharts(50); })
+      : waitForHighcharts(50);
+  })();
+</script>

data/lib/generators/ruby_llm_agents/rename_agent_generator.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+require "rails/generators"
+require "rails/generators/active_record"
+
+module RubyLlmAgents
+  # Generator for creating a migration to rename an agent in execution records
+  #
+  # Usage:
+  #   rails generate ruby_llm_agents:rename_agent OldAgentName NewAgentName
+  #
+  # This creates a reversible migration that updates the agent_type column
+  # in the ruby_llm_agents_executions table.
+  #
+  class RenameAgentGenerator < ::Rails::Generators::Base
+    include ::ActiveRecord::Generators::Migration
+
+    source_root File.expand_path("templates", __dir__)
+
+    argument :old_name, type: :string, desc: "The current (old) agent class name"
+    argument :new_name, type: :string, desc: "The new agent class name"
+
+    def validate_names
+      if old_name == new_name
+        raise Thor::Error, "Old and new agent names must be different"
+      end
+    end
+
+    def create_migration_file
+      migration_template(
+        "rename_agent_migration.rb.tt",
+        File.join(db_migrate_path, "rename_#{old_name.underscore}_to_#{new_name.underscore}.rb")
+      )
+    end
+
+    def show_message
+      say ""
+      say "Created migration to rename #{old_name} -> #{new_name}", :green
+      say "Run `rails db:migrate` to apply."
+      say ""
+    end
+
+    private
+
+    def migration_version
+      "[#{::ActiveRecord::VERSION::STRING.to_f}]"
+    end
+
+    def db_migrate_path
+      "db/migrate"
+    end
+  end
+end

data/lib/generators/ruby_llm_agents/templates/rename_agent_migration.rb.tt

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class Rename<%= old_name.gsub("::", "") %>To<%= new_name.gsub("::", "") %> < ActiveRecord::Migration<%= migration_version %>
+  def up
+    execute <<~SQL.squish
+      UPDATE ruby_llm_agents_executions
+      SET agent_type = '<%= new_name %>'
+      WHERE agent_type = '<%= old_name %>'
+    SQL
+  end
+
+  def down
+    execute <<~SQL.squish
+      UPDATE ruby_llm_agents_executions
+      SET agent_type = '<%= old_name %>'
+      WHERE agent_type = '<%= new_name %>'
+    SQL
+  end
+end