ruby_llm-agents 0.3.1 → 0.3.4

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

@@ -4,224 +4,149 @@
 <!-- Now Strip -->
 <%= render partial: "rubyllm/agents/dashboard/now_strip", locals: { now_strip: @now_strip } %>
 
-<!-- Today's Activity Chart -->
-<div
-  class="
-    bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100
-    dark:border-gray-700 mb-6
-  "
->
-  <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700">
-    <div class="flex justify-between items-center">
-      <div class="flex items-center space-x-2">
-        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
-          Activity
-        </h3>
-
-        <span class="flex items-center text-xs text-green-600 dark:text-green-400">
-          <span class="w-1.5 h-1.5 bg-green-500 rounded-full mr-1 animate-pulse"></span>
-          Live
-        </span>
-      </div>
-
-      <span class="text-xs text-gray-400 dark:text-gray-500">
-        Updates every 5s
-      </span>
+<!-- Activity Chart -->
+<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 mb-6">
+  <div class="px-6 py-3 border-b border-gray-100 dark:border-gray-700">
+    <div class="flex items-center justify-between">
+      <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Activity</h3>
+      <span id="chart-totals" class="text-sm text-gray-500 dark:text-gray-400"></span>
     </div>
   </div>
 
-  <div
-    id="hourly-chart"
-    class="p-6 pb-3 pt-8"
-    style="height: 400px;"
-    data-chart-url="<%= ruby_llm_agents.chart_data_path %>"
-  >
+  <div id="activity-chart-container" class="p-4 h-[320px] sm:h-[380px]">
     <div id="activity-chart" style="width: 100%; height: 100%;"></div>
   </div>
 
   <script>
     (function() {
-      const chartUrl = '<%= ruby_llm_agents.chart_data_path %>';
-      let activityChart = null;
+      const range = '<%= @selected_range %>';
+      const chartUrl = '<%= ruby_llm_agents.chart_data_path %>?range=' + range;
       const hourMs = 3600000;
       const dayMs = 24 * hourMs;
 
-      // Convert server data to datetime points
-      function convertToDatetimePoints(data) {
+      function convertToDatetimePoints(data, range) {
         const now = Date.now();
         const numPoints = data.length;
-        return data.map((val, i) => {
-          // Each point is 1 hour apart, last point at current hour
-          return [now - (numPoints - 1 - i) * hourMs, val];
-        });
+        if (range === 'today') {
+          return data.map((val, i) => [now - (numPoints - 1 - i) * hourMs, val]);
+        } else {
+          return data.map((val, i) => [now - (numPoints - 1 - i) * dayMs, val]);
+        }
       }
 
-      function initLiveChart() {
+      function formatNumber(num) {
+        return num.toLocaleString();
+      }
+
+      function initChart() {
         fetch(chartUrl)
           .then(res => res.json())
           .then(data => {
             const now = Date.now();
-            const successData = convertToDatetimePoints(data.series[0].data);
-            const failedData = convertToDatetimePoints(data.series[1].data);
+            const successData = convertToDatetimePoints(data.series[0].data, range);
+            const failedData = convertToDatetimePoints(data.series[1].data, range);
+            const costData = convertToDatetimePoints(data.series[2].data, range);
 
-            activityChart = Highcharts.chart('activity-chart', {
-              chart: {
-                type: 'spline',
-                backgroundColor: 'transparent',
-                animation: { duration: 300 }
-              },
+            // Update totals in header
+            const totals = data.totals;
+            const totalExecs = totals.success + totals.failed;
+            document.getElementById('chart-totals').textContent =
+              formatNumber(totalExecs) + ' executions • $' + totals.cost.toFixed(2);
+
+            const timeRange = range === 'today' ? dayMs : (range === '7d' ? 7 * dayMs : 30 * dayMs);
+            const dateFormat = range === 'today' ? '%H:%M' : '%b %d';
+
+            Highcharts.chart('activity-chart', {
+              chart: { type: 'areaspline', backgroundColor: 'transparent' },
               title: { text: null },
               xAxis: {
                 type: 'datetime',
-                tickPixelInterval: 150,
-                min: now - dayMs,
+                min: now - timeRange,
                 max: now,
-                labels: { style: { color: '#9CA3AF' } },
+                labels: { style: { color: '#9CA3AF' }, format: '{value:' + dateFormat + '}' },
                 lineColor: 'rgba(156, 163, 175, 0.2)'
               },
-              yAxis: {
+              yAxis: [{
                 title: { text: null },
                 min: 0,
                 allowDecimals: false,
                 labels: { style: { color: '#9CA3AF' } },
                 gridLineColor: 'rgba(156, 163, 175, 0.2)'
-              },
+              }, {
+                title: { text: null },
+                min: 0,
+                labels: { style: { color: '#F59E0B' }, format: '${value}' },
+                opposite: true,
+                gridLineWidth: 0
+              }],
               legend: {
+                enabled: true,
                 align: 'center',
                 verticalAlign: 'bottom',
-                itemStyle: { color: '#9CA3AF' }
+                itemStyle: { color: '#9CA3AF', fontWeight: 'normal' },
+                itemHoverStyle: { color: '#D1D5DB' }
               },
               credits: { enabled: false },
               tooltip: {
-                backgroundColor: 'rgba(17, 24, 39, 0.9)',
+                shared: true,
+                backgroundColor: 'rgba(17, 24, 39, 0.95)',
                 borderColor: 'rgba(75, 85, 99, 0.5)',
                 style: { color: '#F3F4F6' },
-                headerFormat: '<b>{series.name}</b><br/>',
-                pointFormat: '{point.x:%H:%M} - {point.y}'
+                xDateFormat: range === 'today' ? '%H:%M' : '%b %d'
               },
               plotOptions: {
+                areaspline: {
+                  fillOpacity: 0.15,
+                  lineWidth: 2,
+                  marker: { enabled: false, states: { hover: { enabled: true, radius: 4 } } }
+                },
                 spline: {
                   lineWidth: 2,
-                  marker: {
-                    enabled: true,
-                    radius: 4,
-                    symbol: 'circle'
-                  }
+                  marker: { enabled: false, states: { hover: { enabled: true, radius: 4 } } }
                 }
               },
-              series: [{
-                name: 'Success',
-                color: '#10B981',
-                data: successData
-              }, {
-                name: 'Failed',
-                color: '#EF4444',
-                data: failedData
-              }]
+              series: [
+                { name: 'Success', type: 'areaspline', color: '#10B981', data: successData, yAxis: 0 },
+                { name: 'Failed', type: 'areaspline', color: '#EF4444', data: failedData, yAxis: 0 },
+                { name: 'Cost', type: 'spline', color: '#F59E0B', data: costData, yAxis: 1, tooltip: { valuePrefix: '$' } }
+              ]
             });
-
-            // Update chart every 5 seconds with fresh data
-            setInterval(function() {
-              fetch(chartUrl)
-                .then(res => res.json())
-                .then(newData => {
-                  const now = Date.now();
-                  const newSuccessData = convertToDatetimePoints(newData.series[0].data);
-                  const newFailedData = convertToDatetimePoints(newData.series[1].data);
-
-                  // Update x-axis range
-                  activityChart.xAxis[0].setExtremes(now - dayMs, now, false);
-
-                  // Replace series data
-                  activityChart.series[0].setData(newSuccessData, false);
-                  activityChart.series[1].setData(newFailedData, true);
-                });
-            }, 5000);
           })
-          .catch(err => console.log('[RubyLLM::Agents] Chart init error:', err));
+          .catch(err => console.log('[RubyLLM::Agents] Chart error:', err));
       }
 
       if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', initLiveChart);
+        document.addEventListener('DOMContentLoaded', initChart);
       } else {
-        initLiveChart();
+        initChart();
       }
     })();
   </script>
 </div>
 
 <!-- Live Activity Feed -->
-<div
-  class="
-    bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100
-    dark:border-gray-700
-  "
->
-  <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700">
+<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 mb-6">
+  <div class="px-6 py-3 border-b border-gray-100 dark:border-gray-700">
     <div class="flex justify-between items-center">
-      <div class="flex items-center space-x-3">
-        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
-          Live Activity
-        </h3>
-
-        <div
-          class="
-            flex items-center space-x-3 text-xs text-gray-400
-            dark:text-gray-500
-          "
-        >
-          <span class="flex items-center">
-            <span class="w-2 h-2 bg-blue-500 rounded-full mr-1 animate-pulse"></span>
-            running
-          </span>
-
-          <span class="flex items-center">
-            <span class="w-2 h-2 bg-green-500 rounded-full mr-1"></span>
-            success
-          </span>
-
-          <span class="flex items-center">
-            <span class="w-2 h-2 bg-red-500 rounded-full mr-1"></span>
-            error
-          </span>
-
-          <span class="flex items-center">
-            <span class="w-2 h-2 bg-yellow-500 rounded-full mr-1"></span>
-            timeout
-          </span>
-        </div>
-      </div>
-
+      <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Recent Activity</h3>
       <%= link_to "View All", ruby_llm_agents.executions_path, data: { turbo: false }, class: "text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 text-sm font-medium" %>
     </div>
   </div>
-
   <div id="activity-feed" class="px-6 py-2">
     <% if @recent_executions.any? %>
-      <% @recent_executions.each do |execution| %>
+      <% @recent_executions.first(5).each do |execution| %>
         <%= render partial: "rubyllm/agents/dashboard/execution_item", locals: { execution: execution } %>
       <% end %>
     <% else %>
-      <div
-        id="empty-state"
-        class="py-10 text-center text-gray-500 dark:text-gray-400"
-      >
-        <svg
-          class="w-12 h-12 mx-auto mb-3 text-gray-300 dark:text-gray-600"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
-            d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
-          />
-        </svg>
-
-        <p>No executions yet. Create an agent and make a call!</p>
+      <div class="py-8 text-center text-gray-500 dark:text-gray-400">
+        <p class="text-sm">No executions yet</p>
       </div>
     <% end %>
   </div>
 </div>
+
+<!-- Agent Comparison + Top Errors -->
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+  <%= render partial: "rubyllm/agents/dashboard/agent_comparison", locals: { agent_stats: @agent_stats } %>
+  <%= render partial: "rubyllm/agents/dashboard/top_errors", locals: { top_errors: @top_errors } %>
+</div>