ruby_llm-agents 1.0.0 → 1.2.0

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

@@ -1,23 +1,101 @@
+<!-- Page Header -->
+<div class="mb-6">
+  <div class="flex items-center gap-2">
+    <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Dashboard</h1>
+    <%= render "ruby_llm/agents/shared/doc_link" %>
+  </div>
+  <p class="text-gray-500 dark:text-gray-400 mt-1">Overview of agent executions and performance metrics</p>
+</div>
+
 <!-- Action Center (only when critical alerts exist) -->
 <%= render partial: "ruby_llm/agents/dashboard/action_center", locals: { critical_alerts: @critical_alerts } %>
 
-<!-- Now Strip -->
-<%= render partial: "ruby_llm/agents/dashboard/now_strip", locals: { now_strip: @now_strip } %>
-
-<!-- Tenant Budget (when viewing specific tenant) -->
-<%= render partial: "ruby_llm/agents/dashboard/tenant_budget", locals: { tenant_budget: @tenant_budget } %>
-
-<!-- Activity Chart -->
+<!-- Unified Metrics + Chart Component (Plausible-style) -->
 <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">
+  <!-- Header with range picker -->
+  <div class="px-6 py-4 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>
+      <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Activity</h3>
+      <div class="relative range-dropdown-container">
+        <button type="button"
+                data-range-dropdown
+                class="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
+          <span><%= range_display_name(@selected_range) %></span>
+          <svg class="w-4 h-4" 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 class="range-dropdown-menu hidden absolute right-0 mt-2 w-56 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-10">
+          <div class="py-1">
+            <%= link_to "Today", ruby_llm_agents.root_path(range: "today"), class: "block px-4 py-2 text-sm #{@selected_range == 'today' ? 'bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'}" %>
+            <%= link_to "Last 7 Days", ruby_llm_agents.root_path(range: "7d"), class: "block px-4 py-2 text-sm #{@selected_range == '7d' ? 'bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'}" %>
+            <%= link_to "Last 30 Days", ruby_llm_agents.root_path(range: "30d"), class: "block px-4 py-2 text-sm #{@selected_range == '30d' ? 'bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'}" %>
+            <%= link_to "Last 60 Days", ruby_llm_agents.root_path(range: "60d"), class: "block px-4 py-2 text-sm #{@selected_range == '60d' ? 'bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'}" %>
+            <%= link_to "Last 90 Days", ruby_llm_agents.root_path(range: "90d"), class: "block px-4 py-2 text-sm #{@selected_range == '90d' ? 'bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'}" %>
+            <hr class="border-gray-200 dark:border-gray-700 my-1">
+            <button type="button" data-custom-range-toggle class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
+              Custom Range...
+            </button>
+          </div>
+          <div data-custom-range-form class="hidden border-t border-gray-200 dark:border-gray-700 p-3">
+            <div class="space-y-3">
+              <div>
+                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">From</label>
+                <input type="date"
+                       name="range_from"
+                       class="w-full px-2 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
+              </div>
+              <div>
+                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">To</label>
+                <input type="date"
+                       name="range_to"
+                       class="w-full px-2 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
+              </div>
+              <button type="button"
+                      data-apply-custom-range
+                      class="w-full px-3 py-1.5 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 rounded-md transition-colors">
+                Apply
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Metric Row (Plausible-style: simple text, no cards) -->
+  <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700">
+    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
+      <% metrics = [
+        { key: "success", label: "SUCCESS", value: @now_strip[:success_today], change: @now_strip.dig(:comparisons, :success_change) },
+        { key: "errors", label: "ERRORS", value: @now_strip[:errors_today], change: @now_strip.dig(:comparisons, :errors_change), is_error: @now_strip[:errors_today] > 0 },
+        { key: "cost", label: "COST", value: "$#{number_with_precision(@now_strip[:cost_today], precision: 2)}", change: @now_strip.dig(:comparisons, :cost_change) },
+        { key: "duration", label: "AVG TIME", value: format_duration_ms(@now_strip[:avg_duration_ms]), change: @now_strip.dig(:comparisons, :duration_change) },
+        { key: "tokens", label: "TOKENS", value: number_to_human_short(@now_strip[:total_tokens]), change: @now_strip.dig(:comparisons, :tokens_change) }
+      ] %>
+
+      <% metrics.each_with_index do |metric, i| %>
+        <button type="button"
+                data-metric="<%= metric[:key] %>"
+                data-index="<%= i %>"
+                class="metric-btn group text-left transition-all pb-2 <%= i == 0 ? 'border-b-2 border-indigo-500' : 'border-b-2 border-transparent hover:border-gray-300 dark:hover:border-gray-600' %>">
+          <span class="text-xs font-medium tracking-wide text-gray-500 dark:text-gray-400 uppercase"><%= metric[:label] %></span>
+          <div class="flex items-baseline gap-1">
+            <span class="text-2xl font-bold <%= metric[:is_error] ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-gray-100' %>"><%= metric[:value] %></span>
+            <% if metric[:change] %>
+              <span class="text-xs font-medium <%= metric[:change] > 0 ? (metric[:key].in?(%w[success tokens]) ? 'text-green-600' : 'text-red-600') : (metric[:key].in?(%w[success tokens]) ? 'text-red-600' : 'text-green-600') %>">
+                <%= metric[:change] > 0 ? '+' : '' %><%= metric[:change] %>%
+              </span>
+            <% end %>
+          </div>
+        </button>
+      <% end %>
     </div>
   </div>
 
-  <div id="activity-chart-container" class="p-4 h-[320px] sm:h-[380px]">
-    <div id="activity-chart" style="width: 100%; height: 100%;"></div>
+  <!-- Chart -->
+  <div id="activity-chart-container" class="px-4 pt-4 pb-6">
+    <div id="activity-chart" style="width: 100%; height: 280px;"></div>
   </div>
 
   <script>
@@ -27,6 +105,35 @@
       const hourMs = 3600000;
       const dayMs = 24 * hourMs;
 
+      let chartData = null;
+      let chart = null;
+      let selectedMetric = 0;
+
+      const metricConfig = [
+        { name: 'Success', color: '#6366F1' },
+        { name: 'Errors', color: '#6366F1' },
+        { name: 'Cost', color: '#6366F1', isCurrency: true },
+        { name: 'Duration', color: '#6366F1', isDuration: true },
+        { name: 'Tokens', color: '#6366F1' }
+      ];
+
+      // Calculate time range in milliseconds based on range string
+      function getTimeRangeMs(range) {
+        if (range === 'today') return dayMs;
+        if (range === '7d') return 7 * dayMs;
+        if (range === '30d') return 30 * dayMs;
+        if (range === '60d') return 60 * dayMs;
+        if (range === '90d') return 90 * dayMs;
+        // Custom range: calculate from dates
+        if (range.includes('_')) {
+          const [from, to] = range.split('_');
+          const fromDate = new Date(from);
+          const toDate = new Date(to);
+          return toDate - fromDate + dayMs;
+        }
+        return dayMs;
+      }
+
       function convertToDatetimePoints(data, range) {
         const now = Date.now();
         const numPoints = data.length;
@@ -41,93 +148,189 @@
         return num.toLocaleString();
       }
 
+      function formatDuration(ms) {
+        if (!ms || ms === 0) return '0ms';
+        if (ms < 1000) return ms.toFixed(0) + 'ms';
+        if (ms < 60000) return (ms / 1000).toFixed(1) + 's';
+        return (ms / 60000).toFixed(1) + 'm';
+      }
+
+      function updateChart(metricIndex) {
+        if (!chartData || !chart) return;
+
+        const config = metricConfig[metricIndex];
+        const series = chartData.series[metricIndex];
+
+        chart.series[0].update({
+          name: config.name,
+          data: convertToDatetimePoints(series.data, range),
+          color: config.color
+        }, false);
+
+        chart.yAxis[0].update({
+          labels: {
+            style: { color: '#9CA3AF' },
+            formatter: function() {
+              if (config.isCurrency) return '$' + this.value;
+              if (config.isDuration) return formatDuration(this.value);
+              return this.value;
+            }
+          }
+        }, false);
+
+        chart.tooltip.update({
+          formatter: function() {
+            const dateFormat = range === 'today' ? '%H:%M' : '%b %d';
+            const dateStr = Highcharts.dateFormat(dateFormat, this.x);
+            let valueStr;
+            if (config.isCurrency) valueStr = '$' + this.y.toFixed(4);
+            else if (config.isDuration) valueStr = formatDuration(this.y);
+            else valueStr = formatNumber(this.y);
+            return '<b>' + dateStr + '</b><br/>' + config.name + ': ' + valueStr;
+          }
+        });
+
+        chart.redraw();
+
+        // Update selection styles
+        document.querySelectorAll('.metric-btn').forEach((btn, i) => {
+          btn.classList.remove('border-indigo-500', 'border-transparent');
+          btn.classList.add(i === metricIndex ? 'border-indigo-500' : 'border-transparent');
+        });
+      }
+
       function initChart() {
         fetch(chartUrl)
           .then(res => res.json())
           .then(data => {
-            const now = Date.now();
-            const successData = convertToDatetimePoints(data.series[0].data, range);
-            const failedData = convertToDatetimePoints(data.series[1].data, range);
-            const costData = convertToDatetimePoints(data.series[2].data, range);
-
-            // 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);
+            chartData = data;
+            const config = metricConfig[0];
+            const timeRange = getTimeRangeMs(range);
             const dateFormat = range === 'today' ? '%H:%M' : '%b %d';
+            const now = Date.now();
 
-            Highcharts.chart('activity-chart', {
-              chart: { type: 'areaspline', backgroundColor: 'transparent' },
+            chart = Highcharts.chart('activity-chart', {
+              chart: { type: 'areaspline', backgroundColor: 'transparent', spacing: [10, 0, 10, 0] },
               title: { text: null },
               xAxis: {
                 type: 'datetime',
                 min: now - timeRange,
                 max: now,
-                labels: { style: { color: '#9CA3AF' }, format: '{value:' + dateFormat + '}' },
-                lineColor: 'rgba(156, 163, 175, 0.2)'
+                labels: { style: { color: '#9CA3AF', fontSize: '11px' }, format: '{value:' + dateFormat + '}' },
+                lineColor: 'transparent',
+                tickLength: 0
               },
-              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', fontWeight: 'normal' },
-                itemHoverStyle: { color: '#D1D5DB' }
+                labels: { style: { color: '#9CA3AF', fontSize: '11px' } },
+                gridLineColor: 'rgba(156, 163, 175, 0.15)'
               },
+              legend: { enabled: false },
               credits: { enabled: false },
               tooltip: {
-                shared: true,
                 backgroundColor: 'rgba(17, 24, 39, 0.95)',
-                borderColor: 'rgba(75, 85, 99, 0.5)',
-                style: { color: '#F3F4F6' },
-                xDateFormat: range === 'today' ? '%H:%M' : '%b %d'
+                borderColor: 'transparent',
+                borderRadius: 8,
+                style: { color: '#F3F4F6', fontSize: '12px' },
+                formatter: function() {
+                  return '<b>' + Highcharts.dateFormat(dateFormat, this.x) + '</b><br/>' +
+                    config.name + ': ' + formatNumber(this.y);
+                }
               },
               plotOptions: {
                 areaspline: {
-                  fillOpacity: 0.15,
-                  lineWidth: 2,
-                  marker: { enabled: false, states: { hover: { enabled: true, radius: 4 } } }
-                },
-                spline: {
+                  fillColor: {
+                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+                    stops: [[0, 'rgba(99, 102, 241, 0.3)'], [1, 'rgba(99, 102, 241, 0)']]
+                  },
                   lineWidth: 2,
                   marker: { enabled: false, states: { hover: { enabled: true, radius: 4 } } }
                 }
               },
-              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: '$' } }
-              ]
+              series: [{
+                name: config.name,
+                data: convertToDatetimePoints(data.series[0].data, range),
+                color: config.color
+              }]
             });
           })
           .catch(err => console.log('[RubyLLM::Agents] Chart error:', err));
+
+        document.querySelectorAll('.metric-btn').forEach(btn => {
+          btn.addEventListener('click', function() {
+            const index = parseInt(this.dataset.index);
+            selectedMetric = index;
+            updateChart(index);
+          });
+        });
+      }
+
+      // Dropdown toggle functionality
+      function initDropdown() {
+        const dropdownBtn = document.querySelector('[data-range-dropdown]');
+        const dropdownMenu = document.querySelector('.range-dropdown-menu');
+        const customRangeToggle = document.querySelector('[data-custom-range-toggle]');
+        const customRangeForm = document.querySelector('[data-custom-range-form]');
+        const applyBtn = document.querySelector('[data-apply-custom-range]');
+
+        if (dropdownBtn && dropdownMenu) {
+          // Toggle dropdown on button click
+          dropdownBtn.addEventListener('click', function(e) {
+            e.stopPropagation();
+            dropdownMenu.classList.toggle('hidden');
+          });
+
+          // Close dropdown when clicking outside
+          document.addEventListener('click', function(e) {
+            if (!e.target.closest('.range-dropdown-container')) {
+              dropdownMenu.classList.add('hidden');
+              if (customRangeForm) customRangeForm.classList.add('hidden');
+            }
+          });
+        }
+
+        // Toggle custom range form
+        if (customRangeToggle && customRangeForm) {
+          customRangeToggle.addEventListener('click', function(e) {
+            e.stopPropagation();
+            customRangeForm.classList.toggle('hidden');
+          });
+        }
+
+        // Apply custom range
+        if (applyBtn) {
+          applyBtn.addEventListener('click', function() {
+            const fromInput = document.querySelector('[name="range_from"]');
+            const toInput = document.querySelector('[name="range_to"]');
+            const from = fromInput ? fromInput.value : '';
+            const to = toInput ? toInput.value : '';
+
+            if (from && to) {
+              window.location.href = '?range=' + from + '_' + to;
+            }
+          });
+        }
       }
 
       if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', initChart);
+        document.addEventListener('DOMContentLoaded', function() {
+          initChart();
+          initDropdown();
+        });
       } else {
         initChart();
+        initDropdown();
       }
     })();
   </script>
 </div>
 
-<!-- Live Activity Feed -->
+<!-- Tenant Budget (when viewing specific tenant) -->
+<%= render partial: "ruby_llm/agents/dashboard/tenant_budget", locals: { tenant_budget: @tenant_budget } %>
+
+<!-- Recent Activity Table -->
 <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">
@@ -135,21 +338,119 @@
       <%= link_to "View All", ruby_llm_agents.executions_path, 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.first(5).each do |execution| %>
-        <%= render partial: "ruby_llm/agents/dashboard/execution_item", locals: { execution: execution } %>
-      <% end %>
-    <% else %>
-      <div class="py-8 text-center text-gray-500 dark:text-gray-400">
-        <p class="text-sm">No executions yet</p>
-      </div>
-    <% end %>
-  </div>
+
+  <% if @recent_executions.any? %>
+    <div class="overflow-x-auto">
+      <table class="w-full text-sm">
+        <thead>
+          <tr class="text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider border-b border-gray-100 dark:border-gray-700">
+            <th class="px-4 py-3 w-8"></th>
+            <th class="px-4 py-3">Agent</th>
+            <th class="px-4 py-3 hidden sm:table-cell">Model</th>
+            <th class="px-4 py-3 text-right">Tokens</th>
+            <th class="px-4 py-3 text-right hidden sm:table-cell">Cost</th>
+            <th class="px-4 py-3 text-right hidden md:table-cell">Time</th>
+            <th class="px-4 py-3 text-right">When</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+          <% @recent_executions.first(5).each do |execution| %>
+            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors cursor-pointer <%= execution.status_error? ? 'bg-red-50/50 dark:bg-red-900/10' : '' %>"
+                onclick="window.location='<%= ruby_llm_agents.execution_path(execution) %>'"
+                <% if execution.status_error? && execution.error_message.present? %>
+                  title="<%= execution.error_class %>: <%= execution.error_message.truncate(100) %>"
+                <% end %>>
+              <!-- Status -->
+              <td class="px-4 py-3">
+                <%= render "ruby_llm/agents/shared/status_dot", status: execution.status %>
+              </td>
+              <!-- Agent + Badges -->
+              <td class="px-4 py-3">
+                <div class="flex items-center gap-1.5 min-w-0">
+                  <% if execution.respond_to?(:workflow_type) && execution.workflow_type.present? %>
+                    <%= render "ruby_llm/agents/shared/workflow_type_badge", workflow_type: execution.workflow_type, size: :xs, show_label: false %>
+                  <% end %>
+                  <span class="font-medium text-gray-900 dark:text-gray-100 truncate">
+                    <%= execution.agent_type.gsub(/Agent$|Workflow$|Pipeline$|Parallel$|Router$/, '') %>
+                  </span>
+                  <% unless execution.status_running? %>
+                    <% if execution.streaming? %>
+                      <svg class="w-3.5 h-3.5 text-cyan-500 flex-shrink-0" title="Streaming" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
+                      </svg>
+                    <% end %>
+                    <% if execution.cache_hit? %>
+                      <svg class="w-3.5 h-3.5 text-purple-500 flex-shrink-0" title="Cached" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/>
+                      </svg>
+                    <% end %>
+                    <% if execution.rate_limited? %>
+                      <svg class="w-3.5 h-3.5 text-orange-500 flex-shrink-0" title="Rate Limited" 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-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+                      </svg>
+                    <% end %>
+                  <% end %>
+                  <% if execution.status_error? %>
+                    <svg class="w-3.5 h-3.5 text-red-500 flex-shrink-0" title="Error" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                    </svg>
+                  <% end %>
+                </div>
+              </td>
+              <!-- Model -->
+              <td class="px-4 py-3 hidden sm:table-cell">
+                <span class="font-mono text-xs text-gray-500 dark:text-gray-400 truncate max-w-[120px] block">
+                  <%= execution.model_id || '-' %>
+                </span>
+              </td>
+              <!-- Tokens -->
+              <td class="px-4 py-3 text-right text-gray-600 dark:text-gray-300">
+                <% if execution.status_running? %>
+                  <span class="text-blue-500 dark:text-blue-400 animate-pulse">...</span>
+                <% else %>
+                  <%= execution.total_tokens ? number_to_human_short(execution.total_tokens) : '-' %>
+                <% end %>
+              </td>
+              <!-- Cost -->
+              <td class="px-4 py-3 text-right text-gray-600 dark:text-gray-300 hidden sm:table-cell">
+                <% if execution.status_running? %>
+                  <span class="text-blue-500 dark:text-blue-400 animate-pulse">...</span>
+                <% else %>
+                  <%= execution.total_cost ? "$#{number_with_precision(execution.total_cost, precision: 2)}" : '-' %>
+                <% end %>
+              </td>
+              <!-- Duration -->
+              <td class="px-4 py-3 text-right text-gray-600 dark:text-gray-300 hidden md:table-cell">
+                <% if execution.status_running? %>
+                  <span class="text-blue-500 dark:text-blue-400 animate-pulse">...</span>
+                <% else %>
+                  <%= execution.duration_ms ? format_duration_ms(execution.duration_ms) : '-' %>
+                <% end %>
+              </td>
+              <!-- When -->
+              <td class="px-4 py-3 text-right text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                <%= time_ago_in_words(execution.created_at) %> ago
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  <% else %>
+    <div class="py-8 text-center text-gray-500 dark:text-gray-400">
+      <p class="text-sm">No executions yet</p>
+    </div>
+  <% end %>
 </div>
 
 <!-- Agent Comparison + Top Errors -->
-<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
   <%= render partial: "ruby_llm/agents/dashboard/agent_comparison", locals: { agent_stats: @agent_stats } %>
   <%= render partial: "ruby_llm/agents/dashboard/top_errors", locals: { top_errors: @top_errors } %>
 </div>
+
+<!-- Model Performance + Cost Breakdown -->
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+  <%= render partial: "ruby_llm/agents/dashboard/model_comparison", locals: { model_stats: @model_stats } %>
+  <%= render partial: "ruby_llm/agents/dashboard/model_cost_breakdown", locals: { model_stats: @model_stats } %>
+</div>

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

@@ -11,7 +11,6 @@
         <p class="font-medium text-gray-900">
           <%= execution.agent_type.gsub(/Agent$/, '') %>
         </p>
-
         <p class="text-sm text-gray-500">
           v<%= execution.agent_version %> · <%= execution.model_id %>
         </p>