ruby_llm-agents 3.5.4 → 3.6.0

data/app/views/layouts/ruby_llm/agents/application.html.erb

@@ -7,6 +7,13 @@
 
     <title>RubyLLM Agents Dashboard</title>
 
+    <!-- Favicons -->
+    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <link rel="shortcut icon" href="/favicon.ico">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="manifest" href="/site.webmanifest">
+
     <!-- Prevent flash of wrong theme - must run before any rendering -->
     <script>
       (function() {
@@ -152,8 +159,9 @@
       }
     </script>
 
-    <!-- Highcharts for charts -->
-    <script src="https://code.highcharts.com/highcharts.js"></script>
+    <!-- Highcharts for charts (primary CDN, fallback to jsDelivr) -->
+    <script src="https://code.highcharts.com/highcharts.js"
+            onerror="var s=document.createElement('script');s.src='https://cdn.jsdelivr.net/npm/highcharts@11.4.0/highcharts.min.js';s.onload=window.__initHighchartsDefaults;document.head.appendChild(s);"></script>
 
     <!-- Chart color helpers + Highcharts defaults -->
     <script>
@@ -164,32 +172,37 @@
         return document.documentElement.classList.contains('dark')
           ? 'rgba(' + darkR + ',' + darkG + ',' + darkB + ',' + alpha + ')' : lightRgba;
       }
-      Highcharts.setOptions({
-        credits: { enabled: false },
-        chart: {
-          backgroundColor: 'transparent',
-          style: { fontFamily: 'ui-monospace, monospace' }
-        },
-        title: { text: null },
-        xAxis: {
-          labels: { style: { color: chartColor('#6B7280', '#928374') } },
-          lineColor: chartColorAlpha('rgba(107, 114, 128, 0.1)', 146, 131, 116, 0.1),
-          tickColor: chartColorAlpha('rgba(107, 114, 128, 0.1)', 146, 131, 116, 0.1)
-        },
-        yAxis: {
-          labels: { style: { color: chartColor('#6B7280', '#928374') } },
-          gridLineColor: chartColorAlpha('rgba(107, 114, 128, 0.1)', 146, 131, 116, 0.1)
-        },
-        legend: {
-          itemStyle: { color: chartColor('#6B7280', '#928374') },
-          itemHoverStyle: { color: chartColor('#9CA3AF', '#bdae93') }
-        },
-        tooltip: {
-          backgroundColor: chartColorAlpha('rgba(0, 0, 0, 0.85)', 40, 40, 40, 0.95),
-          borderColor: 'transparent',
-          style: { color: chartColor('#E5E7EB', '#ebdbb2'), fontFamily: 'ui-monospace, monospace' }
-        }
-      });
+      window.__initHighchartsDefaults = function() {
+        if (typeof Highcharts === 'undefined') return;
+        Highcharts.setOptions({
+          accessibility: { enabled: false },
+          credits: { enabled: false },
+          chart: {
+            backgroundColor: 'transparent',
+            style: { fontFamily: 'ui-monospace, monospace' }
+          },
+          title: { text: null },
+          xAxis: {
+            labels: { style: { color: chartColor('#6B7280', '#928374') } },
+            lineColor: chartColorAlpha('rgba(107, 114, 128, 0.1)', 146, 131, 116, 0.1),
+            tickColor: chartColorAlpha('rgba(107, 114, 128, 0.1)', 146, 131, 116, 0.1)
+          },
+          yAxis: {
+            labels: { style: { color: chartColor('#6B7280', '#928374') } },
+            gridLineColor: chartColorAlpha('rgba(107, 114, 128, 0.1)', 146, 131, 116, 0.1)
+          },
+          legend: {
+            itemStyle: { color: chartColor('#6B7280', '#928374') },
+            itemHoverStyle: { color: chartColor('#9CA3AF', '#bdae93') }
+          },
+          tooltip: {
+            backgroundColor: chartColorAlpha('rgba(0, 0, 0, 0.85)', 40, 40, 40, 0.95),
+            borderColor: 'transparent',
+            style: { color: chartColor('#E5E7EB', '#ebdbb2'), fontFamily: 'ui-monospace, monospace' }
+          }
+        });
+      };
+      window.__initHighchartsDefaults();
     </script>
 
     <!-- Alpine.js -->

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

@@ -104,7 +104,9 @@
   const successData = trendData.map(d => [new Date(d.date).getTime(), d.count - d.errors]);
   const errorData = trendData.map(d => [new Date(d.date).getTime(), d.errors]);
 
-  Highcharts.chart('agent-trend-chart', {
+  function renderChart() {
+    window.__initHighchartsDefaults && window.__initHighchartsDefaults();
+    Highcharts.chart('agent-trend-chart', {
     chart: { type: 'areaspline', backgroundColor: 'transparent', spacing: [5, 0, 0, 0] },
     title: { text: null },
     xAxis: {
@@ -159,6 +161,19 @@
       }
     ]
   });
+  }
+
+  function waitForHighcharts(attempts) {
+    if (typeof Highcharts !== 'undefined') {
+      renderChart();
+    } 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/dashboard/_top_tenants.html.erb

@@ -0,0 +1,47 @@
+<%# Top Tenants Widget - shows top tenants by monthly spend %>
+<%# @param top_tenants [Array<Hash>, nil] Tenant data from controller %>
+
+<% if top_tenants.present? %>
+  <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">tenants</span>
+      <div class="flex-1 border-t border-gray-200 dark:border-gray-800"></div>
+      <%= link_to "all →", ruby_llm_agents.tenants_path, class: "text-[10px] font-mono text-gray-400 dark:text-gray-600 hover:text-gray-600 dark:hover:text-gray-400" %>
+    </div>
+
+    <div class="font-mono text-xs space-y-px">
+      <% top_tenants.each do |tenant| %>
+        <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.tenant_path(tenant[:id]) %>'">
+          <span class="w-32 truncate text-gray-900 dark:text-gray-200"><%= tenant[:name] %></span>
+          <span class="text-gray-500 dark:text-gray-400">$<%= number_with_precision(tenant[:monthly_spend], precision: 2) %></span>
+          <% if tenant[:monthly_limit] && tenant[:monthly_limit] > 0 %>
+            <%
+              pct = [tenant[:monthly_percentage], 100].min
+              bar_color = if pct >= 100 then "bg-red-500"
+                          elsif pct >= 80 then "bg-yellow-500"
+                          else "bg-blue-500"
+                          end
+            %>
+            <div class="w-20 bg-gray-200 dark:bg-gray-800 rounded-full h-1 hidden sm:block">
+              <div class="<%= bar_color %> h-1 rounded-full transition-all" style="width: <%= pct %>%"></div>
+            </div>
+            <span class="w-10 text-right text-gray-400 dark:text-gray-600 hidden sm:inline"><%= tenant[:monthly_percentage] %>%</span>
+          <% else %>
+            <span class="text-gray-400 dark:text-gray-600 hidden sm:inline">(no limit)</span>
+          <% end %>
+          <%
+            enforcement = tenant[:enforcement].to_s
+            badge_class = case enforcement
+              when "hard" then "text-red-400 dark:text-red-500/70"
+              when "soft" then "text-yellow-400 dark:text-yellow-500/70"
+              else "text-gray-400 dark:text-gray-600"
+            end
+          %>
+          <span class="<%= badge_class %> hidden md:inline"><%= enforcement %></span>
+          <span class="ml-auto text-gray-400 dark:text-gray-600"><%= number_with_delimiter(tenant[:monthly_executions]) %><span class="text-gray-400 dark:text-gray-600">r</span></span>
+        </div>
+      <% end %>
+    </div>
+  </div>
+<% end %>