ruby_llm-agents 1.0.0 → 1.1.0

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

@@ -1,366 +1,73 @@
-<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 h-full" x-data="{ activeTab: 'agents' }">
+<%
+  # Combine all stats into a single sorted leaderboard
+  all_stats = [
+    @agent_stats,
+    @embedder_stats,
+    @transcriber_stats,
+    @speaker_stats,
+    @image_generator_stats,
+    @moderator_stats,
+    @workflow_stats
+  ].flatten.compact
+   .select { |a| a[:executions].to_i > 0 }
+   .sort_by { |a| -a[:executions].to_i }
+   .first(10)
+%>
+
+<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 h-full">
   <div class="px-4 py-3 border-b border-gray-100 dark:border-gray-700">
-    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
+    <div class="flex items-center justify-between">
       <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Performance</h3>
-      <!-- Scrollable Tab Buttons -->
-      <div class="overflow-x-auto -mx-4 px-4 sm:mx-0 sm:px-0">
-        <div class="flex space-x-1 bg-gray-100 dark:bg-gray-700 rounded-lg p-0.5 min-w-max">
-          <button type="button" @click="activeTab = 'agents'"
-                  :class="activeTab === 'agents' ? 'bg-white dark:bg-gray-600 shadow-sm' : 'hover:bg-gray-50 dark:hover:bg-gray-600'"
-                  class="px-2 py-1 text-xs font-medium rounded-md transition-colors text-gray-700 dark:text-gray-200 whitespace-nowrap">
-            <span class="hidden sm:inline">Agents</span>
-            <span class="sm:hidden">🤖</span>
-          </button>
-          <button type="button" @click="activeTab = 'embedders'"
-                  :class="activeTab === 'embedders' ? 'bg-white dark:bg-gray-600 shadow-sm' : 'hover:bg-gray-50 dark:hover:bg-gray-600'"
-                  class="px-2 py-1 text-xs font-medium rounded-md transition-colors text-gray-700 dark:text-gray-200 whitespace-nowrap">
-            <span class="hidden sm:inline">Embedders</span>
-            <span class="sm:hidden">📊</span>
-          </button>
-          <button type="button" @click="activeTab = 'transcribers'"
-                  :class="activeTab === 'transcribers' ? 'bg-white dark:bg-gray-600 shadow-sm' : 'hover:bg-gray-50 dark:hover:bg-gray-600'"
-                  class="px-2 py-1 text-xs font-medium rounded-md transition-colors text-gray-700 dark:text-gray-200 whitespace-nowrap">
-            <span class="hidden sm:inline">Transcribers</span>
-            <span class="sm:hidden">🎤</span>
-          </button>
-          <button type="button" @click="activeTab = 'speakers'"
-                  :class="activeTab === 'speakers' ? 'bg-white dark:bg-gray-600 shadow-sm' : 'hover:bg-gray-50 dark:hover:bg-gray-600'"
-                  class="px-2 py-1 text-xs font-medium rounded-md transition-colors text-gray-700 dark:text-gray-200 whitespace-nowrap">
-            <span class="hidden sm:inline">Speakers</span>
-            <span class="sm:hidden">🔊</span>
-          </button>
-          <button type="button" @click="activeTab = 'image_generators'"
-                  :class="activeTab === 'image_generators' ? 'bg-white dark:bg-gray-600 shadow-sm' : 'hover:bg-gray-50 dark:hover:bg-gray-600'"
-                  class="px-2 py-1 text-xs font-medium rounded-md transition-colors text-gray-700 dark:text-gray-200 whitespace-nowrap">
-            <span class="hidden sm:inline">Image Gen</span>
-            <span class="sm:hidden">🎨</span>
-          </button>
-          <button type="button" @click="activeTab = 'moderators'"
-                  :class="activeTab === 'moderators' ? 'bg-white dark:bg-gray-600 shadow-sm' : 'hover:bg-gray-50 dark:hover:bg-gray-600'"
-                  class="px-2 py-1 text-xs font-medium rounded-md transition-colors text-gray-700 dark:text-gray-200 whitespace-nowrap">
-            <span class="hidden sm:inline">Moderators</span>
-            <span class="sm:hidden">🛡️</span>
-          </button>
-          <button type="button" @click="activeTab = 'workflows'"
-                  :class="activeTab === 'workflows' ? 'bg-white dark:bg-gray-600 shadow-sm' : 'hover:bg-gray-50 dark:hover:bg-gray-600'"
-                  class="px-2 py-1 text-xs font-medium rounded-md transition-colors text-gray-700 dark:text-gray-200 whitespace-nowrap">
-            <span class="hidden sm:inline">Workflows</span>
-            <span class="sm:hidden">⚙️</span>
-          </button>
-        </div>
-      </div>
+      <span class="text-xs text-gray-500 dark:text-gray-400">Top 10 by runs</span>
     </div>
   </div>
 
-  <!-- Agents Tab -->
-  <div x-show="activeTab === 'agents'">
-    <% if @agent_stats&.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">
-              <th class="px-4 py-2">Agent</th>
-              <th class="px-4 py-2 text-right">Runs</th>
-              <th class="px-4 py-2 text-right">Cost</th>
-              <th class="px-4 py-2 text-right">Success</th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
-            <% @agent_stats.first(5).each do |agent| %>
-              <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
-                <td class="px-4 py-2">
-                  <span class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate block max-w-[120px]" title="<%= agent[:agent_type] %>">
-                    <%= agent[:agent_type].to_s.demodulize %>
-                  </span>
-                </td>
-                <td class="px-4 py-2 text-right text-gray-600 dark:text-gray-300">
-                  <%= number_with_delimiter(agent[:executions]) %>
-                </td>
-                <td class="px-4 py-2 text-right text-gray-600 dark:text-gray-300">
-                  $<%= number_with_precision(agent[:total_cost], precision: 2) %>
-                </td>
-                <td class="px-4 py-2 text-right">
-                  <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium <%= agent[:success_rate] >= 95 ? 'bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300' : agent[:success_rate] >= 80 ? 'bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300' : 'bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300' %>">
-                    <%= agent[:success_rate].round %>%
-                  </span>
-                </td>
-              </tr>
-            <% end %>
-          </tbody>
-        </table>
-      </div>
-    <% else %>
-      <div class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
-        <p class="text-sm">No agent data yet</p>
-      </div>
-    <% end %>
-  </div>
-
-  <!-- Embedders Tab -->
-  <div x-show="activeTab === 'embedders'" x-cloak>
-    <% if @embedder_stats&.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">
-              <th class="px-4 py-2">Embedder</th>
-              <th class="px-4 py-2 text-right">Runs</th>
-              <th class="px-4 py-2 text-right">Cost</th>
-              <th class="px-4 py-2 text-right">Success</th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
-            <% @embedder_stats.first(5).each do |embedder| %>
-              <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
-                <td class="px-4 py-2">
-                  <span class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate block max-w-[120px]" title="<%= embedder[:agent_type] %>">
-                    <%= embedder[:agent_type].to_s.demodulize %>
-                  </span>
-                </td>
-                <td class="px-4 py-2 text-right text-gray-600 dark:text-gray-300">
-                  <%= number_with_delimiter(embedder[:executions]) %>
-                </td>
-                <td class="px-4 py-2 text-right text-gray-600 dark:text-gray-300">
-                  $<%= number_with_precision(embedder[:total_cost], precision: 2) %>
-                </td>
-                <td class="px-4 py-2 text-right">
-                  <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium <%= embedder[:success_rate] >= 95 ? 'bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300' : embedder[:success_rate] >= 80 ? 'bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300' : 'bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300' %>">
-                    <%= embedder[:success_rate].round %>%
-                  </span>
-                </td>
-              </tr>
-            <% end %>
-          </tbody>
-        </table>
-      </div>
-    <% else %>
-      <div class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
-        <p class="text-sm">No embedder data yet</p>
-      </div>
-    <% end %>
-  </div>
-
-  <!-- Transcribers Tab -->
-  <div x-show="activeTab === 'transcribers'" x-cloak>
-    <% if @transcriber_stats&.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">
-              <th class="px-4 py-2">Transcriber</th>
-              <th class="px-4 py-2 text-right">Runs</th>
-              <th class="px-4 py-2 text-right">Cost</th>
-              <th class="px-4 py-2 text-right">Success</th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
-            <% @transcriber_stats.first(5).each do |transcriber| %>
-              <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
-                <td class="px-4 py-2">
-                  <span class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate block max-w-[120px]" title="<%= transcriber[:agent_type] %>">
-                    <%= transcriber[:agent_type].to_s.demodulize %>
-                  </span>
-                </td>
-                <td class="px-4 py-2 text-right text-gray-600 dark:text-gray-300">
-                  <%= number_with_delimiter(transcriber[:executions]) %>
-                </td>
-                <td class="px-4 py-2 text-right text-gray-600 dark:text-gray-300">
-                  $<%= number_with_precision(transcriber[:total_cost], precision: 2) %>
-                </td>
-                <td class="px-4 py-2 text-right">
-                  <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium <%= transcriber[:success_rate] >= 95 ? 'bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300' : transcriber[:success_rate] >= 80 ? 'bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300' : 'bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300' %>">
-                    <%= transcriber[:success_rate].round %>%
-                  </span>
-                </td>
-              </tr>
-            <% end %>
-          </tbody>
-        </table>
-      </div>
-    <% else %>
-      <div class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
-        <p class="text-sm">No transcriber data yet</p>
-      </div>
-    <% end %>
-  </div>
-
-  <!-- Speakers Tab -->
-  <div x-show="activeTab === 'speakers'" x-cloak>
-    <% if @speaker_stats&.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">
-              <th class="px-4 py-2">Speaker</th>
-              <th class="px-4 py-2 text-right">Runs</th>
-              <th class="px-4 py-2 text-right">Cost</th>
-              <th class="px-4 py-2 text-right">Success</th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
-            <% @speaker_stats.first(5).each do |speaker| %>
-              <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
-                <td class="px-4 py-2">
-                  <span class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate block max-w-[120px]" title="<%= speaker[:agent_type] %>">
-                    <%= speaker[:agent_type].to_s.demodulize %>
-                  </span>
-                </td>
-                <td class="px-4 py-2 text-right text-gray-600 dark:text-gray-300">
-                  <%= number_with_delimiter(speaker[:executions]) %>
-                </td>
-                <td class="px-4 py-2 text-right text-gray-600 dark:text-gray-300">
-                  $<%= number_with_precision(speaker[:total_cost], precision: 2) %>
-                </td>
-                <td class="px-4 py-2 text-right">
-                  <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium <%= speaker[:success_rate] >= 95 ? 'bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300' : speaker[:success_rate] >= 80 ? 'bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300' : 'bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300' %>">
-                    <%= speaker[:success_rate].round %>%
-                  </span>
-                </td>
-              </tr>
-            <% end %>
-          </tbody>
-        </table>
-      </div>
-    <% else %>
-      <div class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
-        <p class="text-sm">No speaker data yet</p>
-      </div>
-    <% end %>
-  </div>
-
-  <!-- Image Generators Tab -->
-  <div x-show="activeTab === 'image_generators'" x-cloak>
-    <% if @image_generator_stats&.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">
-              <th class="px-4 py-2">Image Generator</th>
-              <th class="px-4 py-2 text-right">Runs</th>
-              <th class="px-4 py-2 text-right">Cost</th>
-              <th class="px-4 py-2 text-right">Success</th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
-            <% @image_generator_stats.first(5).each do |generator| %>
-              <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
-                <td class="px-4 py-2">
-                  <span class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate block max-w-[120px]" title="<%= generator[:agent_type] %>">
-                    <%= generator[:agent_type].to_s.demodulize %>
-                  </span>
-                </td>
-                <td class="px-4 py-2 text-right text-gray-600 dark:text-gray-300">
-                  <%= number_with_delimiter(generator[:executions]) %>
-                </td>
-                <td class="px-4 py-2 text-right text-gray-600 dark:text-gray-300">
-                  $<%= number_with_precision(generator[:total_cost], precision: 2) %>
-                </td>
-                <td class="px-4 py-2 text-right">
-                  <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium <%= generator[:success_rate] >= 95 ? 'bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300' : generator[:success_rate] >= 80 ? 'bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300' : 'bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300' %>">
-                    <%= generator[:success_rate].round %>%
-                  </span>
-                </td>
-              </tr>
-            <% end %>
-          </tbody>
-        </table>
-      </div>
-    <% else %>
-      <div class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
-        <p class="text-sm">No image generator data yet</p>
-      </div>
-    <% end %>
-  </div>
-
-  <!-- Moderators Tab -->
-  <div x-show="activeTab === 'moderators'" x-cloak>
-    <% if @moderator_stats&.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">
-              <th class="px-4 py-2">Moderator</th>
-              <th class="px-4 py-2 text-right">Runs</th>
-              <th class="px-4 py-2 text-right">Cost</th>
-              <th class="px-4 py-2 text-right">Success</th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
-            <% @moderator_stats.first(5).each do |moderator| %>
-              <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
-                <td class="px-4 py-2">
-                  <span class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate block max-w-[120px]" title="<%= moderator[:agent_type] %>">
-                    <%= moderator[:agent_type].to_s.demodulize %>
-                  </span>
-                </td>
-                <td class="px-4 py-2 text-right text-gray-600 dark:text-gray-300">
-                  <%= number_with_delimiter(moderator[:executions]) %>
-                </td>
-                <td class="px-4 py-2 text-right text-gray-600 dark:text-gray-300">
-                  $<%= number_with_precision(moderator[:total_cost], precision: 2) %>
-                </td>
-                <td class="px-4 py-2 text-right">
-                  <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium <%= moderator[:success_rate] >= 95 ? 'bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300' : moderator[:success_rate] >= 80 ? 'bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300' : 'bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300' %>">
-                    <%= moderator[:success_rate].round %>%
-                  </span>
-                </td>
-              </tr>
-            <% end %>
-          </tbody>
-        </table>
-      </div>
-    <% else %>
-      <div class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
-        <p class="text-sm">No moderator data yet</p>
-      </div>
-    <% end %>
-  </div>
-
-  <!-- Workflows Tab -->
-  <div x-show="activeTab === 'workflows'" x-cloak>
-    <% if @workflow_stats&.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">
-              <th class="px-4 py-2">Workflow</th>
-              <th class="px-4 py-2">Type</th>
-              <th class="px-4 py-2 text-right">Runs</th>
-              <th class="px-4 py-2 text-right">Cost</th>
-              <th class="px-4 py-2 text-right">Success</th>
+  <% if all_stats.empty? %>
+    <div class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
+      <p class="text-sm">No performance data yet</p>
+    </div>
+  <% else %>
+    <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">
+            <th class="px-4 py-2 w-8">#</th>
+            <th class="px-4 py-2">Agent</th>
+            <th class="px-4 py-2 text-right">Runs</th>
+            <th class="px-4 py-2 text-right">Cost</th>
+            <th class="px-4 py-2 text-right">Success</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+          <% all_stats.each_with_index do |item, index| %>
+            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
+              <td class="px-4 py-2">
+                <span class="text-xs font-medium text-gray-400 dark:text-gray-500"><%= index + 1 %></span>
+              </td>
+              <td class="px-4 py-2">
+                <span class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate max-w-[140px] block" title="<%= item[:agent_type] %>">
+                  <% if item[:is_workflow] %>
+                    <%= item[:agent_type].to_s.demodulize.gsub(/Workflow$|Pipeline$|Parallel$|Router$/, '') %>
+                  <% else %>
+                    <%= item[:agent_type].to_s.demodulize %>
+                  <% end %>
+                </span>
+              </td>
+              <td class="px-4 py-2 text-right text-gray-600 dark:text-gray-300">
+                <%= number_with_delimiter(item[:executions]) %>
+              </td>
+              <td class="px-4 py-2 text-right text-gray-600 dark:text-gray-300">
+                $<%= number_with_precision(item[:total_cost], precision: 2) %>
+              </td>
+              <td class="px-4 py-2 text-right">
+                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium <%= item[:success_rate] >= 95 ? 'bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300' : item[:success_rate] >= 80 ? 'bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300' : 'bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300' %>">
+                  <%= item[:success_rate].round %>%
+                </span>
+              </td>
             </tr>
-          </thead>
-          <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
-            <% @workflow_stats.first(5).each do |workflow| %>
-              <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
-                <td class="px-4 py-2">
-                  <span class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate block max-w-[100px]" title="<%= workflow[:agent_type] %>">
-                    <%= workflow[:agent_type].to_s.demodulize.gsub(/Workflow$|Pipeline$|Parallel$|Router$/, '') %>
-                  </span>
-                </td>
-                <td class="px-4 py-2">
-                  <%= render "ruby_llm/agents/shared/workflow_type_badge", workflow_type: workflow[:workflow_type], size: :xs, show_label: false %>
-                </td>
-                <td class="px-4 py-2 text-right text-gray-600 dark:text-gray-300">
-                  <%= number_with_delimiter(workflow[:executions]) %>
-                </td>
-                <td class="px-4 py-2 text-right text-gray-600 dark:text-gray-300">
-                  $<%= number_with_precision(workflow[:total_cost], precision: 2) %>
-                </td>
-                <td class="px-4 py-2 text-right">
-                  <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium <%= workflow[:success_rate] >= 95 ? 'bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300' : workflow[:success_rate] >= 80 ? 'bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300' : 'bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300' %>">
-                    <%= workflow[:success_rate].round %>%
-                  </span>
-                </td>
-              </tr>
-            <% end %>
-          </tbody>
-        </table>
-      </div>
-    <% else %>
-      <div class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
-        <p class="text-sm">No workflow data yet</p>
-      </div>
-    <% end %>
-  </div>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  <% end %>
 </div>

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

@@ -0,0 +1,56 @@
+<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 h-full">
+  <div class="px-4 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">Model Performance</h3>
+      <span class="text-xs text-gray-500 dark:text-gray-400">By cost</span>
+    </div>
+  </div>
+
+  <% if model_stats.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">
+            <th class="px-4 py-2">Model</th>
+            <th class="px-4 py-2 text-right">Runs</th>
+            <th class="px-4 py-2 text-right">$/1K tok</th>
+            <th class="px-4 py-2 text-right">Avg Time</th>
+            <th class="px-4 py-2 text-right">Success</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+          <% model_stats.first(8).each do |model| %>
+            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
+              <td class="px-4 py-2">
+                <span class="font-mono text-xs font-medium text-gray-900 dark:text-gray-100 truncate max-w-[120px] block" title="<%= model[:model_id] %>">
+                  <%= model[:model_id].to_s.split('/').last.truncate(20) %>
+                </span>
+              </td>
+              <td class="px-4 py-2 text-right text-gray-600 dark:text-gray-300">
+                <%= number_with_delimiter(model[:executions]) %>
+              </td>
+              <td class="px-4 py-2 text-right text-gray-600 dark:text-gray-300">
+                $<%= number_with_precision(model[:cost_per_1k_tokens], precision: 4) %>
+              </td>
+              <td class="px-4 py-2 text-right text-gray-600 dark:text-gray-300">
+                <%= format_duration_ms(model[:avg_duration_ms]) %>
+              </td>
+              <td class="px-4 py-2 text-right">
+                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium <%= model[:success_rate] >= 95 ? 'bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300' : model[:success_rate] >= 80 ? 'bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300' : 'bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300' %>">
+                  <%= model[:success_rate].round %>%
+                </span>
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  <% else %>
+    <div class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
+      <svg class="w-8 h-8 mx-auto mb-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/>
+      </svg>
+      <p class="text-sm">No model data yet</p>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,115 @@
+<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 h-full">
+  <div class="px-4 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">Cost by Model</h3>
+      <span class="text-xs text-gray-500 dark:text-gray-400">
+        $<%= number_with_precision(model_stats.sum { |m| m[:total_cost] }, precision: 2) %> total
+      </span>
+    </div>
+  </div>
+
+  <% if model_stats.any? && model_stats.sum { |m| m[:total_cost] } > 0 %>
+    <div class="p-4">
+      <div id="model-cost-chart" style="width: 100%; height: 200px;"></div>
+
+      <!-- Legend -->
+      <div class="mt-4 space-y-2">
+        <% colors = ['#6366F1', '#8B5CF6', '#EC4899', '#F59E0B', '#10B981', '#3B82F6', '#EF4444', '#6B7280'] %>
+        <% model_stats.first(5).each_with_index do |model, i| %>
+          <div class="flex items-center justify-between text-sm">
+            <div class="flex items-center gap-2">
+              <span class="w-3 h-3 rounded-full flex-shrink-0" style="background-color: <%= colors[i % colors.length] %>"></span>
+              <span class="text-gray-700 dark:text-gray-300 truncate max-w-[140px]" title="<%= model[:model_id] %>">
+                <%= model[:model_id].to_s.split('/').last.truncate(18) %>
+              </span>
+            </div>
+            <div class="flex items-center gap-2">
+              <span class="text-gray-900 dark:text-gray-100 font-medium">$<%= number_with_precision(model[:total_cost], precision: 2) %></span>
+              <span class="text-gray-500 dark:text-gray-400 text-xs w-12 text-right"><%= model[:cost_percentage] %>%</span>
+            </div>
+          </div>
+        <% end %>
+        <% if model_stats.length > 5 %>
+          <% other_cost = model_stats[5..].sum { |m| m[:total_cost] } %>
+          <% other_percentage = model_stats[5..].sum { |m| m[:cost_percentage] } %>
+          <div class="flex items-center justify-between text-sm">
+            <div class="flex items-center gap-2">
+              <span class="w-3 h-3 rounded-full flex-shrink-0 bg-gray-400"></span>
+              <span class="text-gray-700 dark:text-gray-300">Other (<%= model_stats.length - 5 %> models)</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <span class="text-gray-900 dark:text-gray-100 font-medium">$<%= number_with_precision(other_cost, precision: 2) %></span>
+              <span class="text-gray-500 dark:text-gray-400 text-xs w-12 text-right"><%= other_percentage.round(1) %>%</span>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </div>
+
+    <script>
+      (function() {
+        const colors = ['#6366F1', '#8B5CF6', '#EC4899', '#F59E0B', '#10B981', '#3B82F6', '#EF4444', '#6B7280'];
+        const data = [
+          <% model_stats.first(5).each_with_index do |model, i| %>
+            { name: '<%= model[:model_id].to_s.split('/').last.truncate(15).gsub("'", "\\'") %>', y: <%= model[:total_cost] %>, color: colors[<%= i %>] },
+          <% end %>
+          <% if model_stats.length > 5 %>
+            { name: 'Other', y: <%= model_stats[5..].sum { |m| m[:total_cost] } %>, color: '#9CA3AF' },
+          <% end %>
+        ];
+
+        function initChart() {
+          if (typeof Highcharts === 'undefined') {
+            setTimeout(initChart, 100);
+            return;
+          }
+
+          Highcharts.chart('model-cost-chart', {
+            chart: {
+              type: 'pie',
+              backgroundColor: 'transparent',
+              spacing: [0, 0, 0, 0]
+            },
+            title: { text: null },
+            credits: { enabled: false },
+            tooltip: {
+              backgroundColor: 'rgba(17, 24, 39, 0.95)',
+              borderColor: 'transparent',
+              borderRadius: 8,
+              style: { color: '#F3F4F6', fontSize: '12px' },
+              pointFormat: '<b>${point.y:.2f}</b> ({point.percentage:.1f}%)'
+            },
+            plotOptions: {
+              pie: {
+                innerSize: '60%',
+                dataLabels: { enabled: false },
+                borderWidth: 0,
+                states: {
+                  hover: { brightness: 0.1 }
+                }
+              }
+            },
+            series: [{
+              name: 'Cost',
+              data: data
+            }]
+          });
+        }
+
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', initChart);
+        } else {
+          initChart();
+        }
+      })();
+    </script>
+  <% else %>
+    <div class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
+      <svg class="w-8 h-8 mx-auto mb-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/>
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"/>
+      </svg>
+      <p class="text-sm">No cost data yet</p>
+    </div>
+  <% end %>
+</div>