ruby_llm-agents 0.3.3 → 0.3.5

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

@@ -0,0 +1,112 @@
+<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' }">
+  <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">Performance</h3>
+      <!-- Tab Buttons -->
+      <div class="flex space-x-1 bg-gray-100 dark:bg-gray-700 rounded-lg p-0.5">
+        <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-3 py-1 text-xs font-medium rounded-md transition-colors text-gray-700 dark:text-gray-200">
+          Agents
+        </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-3 py-1 text-xs font-medium rounded-md transition-colors text-gray-700 dark:text-gray-200">
+          Workflows
+        </button>
+      </div>
+    </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>
+
+  <!-- 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>
+            </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>
+</div>

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

@@ -0,0 +1,75 @@
+<%# Budget bars for daily and monthly spending %>
+<% if budget_status[:enabled] %>
+  <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-4 mb-6">
+    <div class="flex items-center justify-between mb-3">
+      <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-200">Budget Usage</h3>
+      <span class="text-xs text-gray-500 dark:text-gray-400">
+        <%= budget_status[:enforcement] == :hard ? "Hard Enforcement" : "Soft Enforcement" %>
+      </span>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <%# Daily Budget %>
+      <% if budget_status[:global_daily] %>
+        <% daily = budget_status[:global_daily] %>
+        <% percentage = daily[:percentage_used] %>
+        <% bar_color = percentage >= 100 ? "bg-red-500" : (percentage >= 80 ? "bg-yellow-500" : "bg-green-500") %>
+        <div>
+          <div class="flex justify-between items-center mb-1">
+            <span class="text-xs font-medium text-gray-600 dark:text-gray-300">Daily</span>
+            <span class="text-xs text-gray-500 dark:text-gray-400">
+              $<%= number_with_precision(daily[:current], precision: 2) %> / $<%= number_with_precision(daily[:limit], precision: 2) %>
+            </span>
+          </div>
+          <div class="relative w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+            <div class="absolute h-full <%= bar_color %> rounded-full transition-all duration-300" style="width: <%= [percentage, 100].min %>%"></div>
+            <%# Soft cap marker at 80% %>
+            <div class="absolute h-full w-0.5 bg-yellow-600 dark:bg-yellow-400" style="left: 80%"></div>
+          </div>
+          <div class="flex justify-between items-center mt-1">
+            <span class="text-xs <%= percentage >= 100 ? 'text-red-600 dark:text-red-400 font-medium' : 'text-gray-400 dark:text-gray-500' %>">
+              <%= percentage.round(1) %>% used
+            </span>
+            <span class="text-xs text-gray-400 dark:text-gray-500">
+              $<%= number_with_precision(daily[:remaining], precision: 2) %> remaining
+            </span>
+          </div>
+        </div>
+      <% end %>
+
+      <%# Monthly Budget %>
+      <% if budget_status[:global_monthly] %>
+        <% monthly = budget_status[:global_monthly] %>
+        <% percentage = monthly[:percentage_used] %>
+        <% bar_color = percentage >= 100 ? "bg-red-500" : (percentage >= 80 ? "bg-yellow-500" : "bg-green-500") %>
+        <div>
+          <div class="flex justify-between items-center mb-1">
+            <span class="text-xs font-medium text-gray-600 dark:text-gray-300">Monthly</span>
+            <span class="text-xs text-gray-500 dark:text-gray-400">
+              $<%= number_with_precision(monthly[:current], precision: 2) %> / $<%= number_with_precision(monthly[:limit], precision: 2) %>
+            </span>
+          </div>
+          <div class="relative w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+            <div class="absolute h-full <%= bar_color %> rounded-full transition-all duration-300" style="width: <%= [percentage, 100].min %>%"></div>
+            <%# Soft cap marker at 80% %>
+            <div class="absolute h-full w-0.5 bg-yellow-600 dark:bg-yellow-400" style="left: 80%"></div>
+          </div>
+          <div class="flex justify-between items-center mt-1">
+            <span class="text-xs <%= percentage >= 100 ? 'text-red-600 dark:text-red-400 font-medium' : 'text-gray-400 dark:text-gray-500' %>">
+              <%= percentage.round(1) %>% used
+            </span>
+            <span class="text-xs text-gray-400 dark:text-gray-500">
+              $<%= number_with_precision(monthly[:remaining], precision: 2) %> remaining
+            </span>
+          </div>
+        </div>
+      <% end %>
+    </div>
+
+    <% unless budget_status[:global_daily] || budget_status[:global_monthly] %>
+      <p class="text-sm text-gray-500 dark:text-gray-400 text-center py-2">
+        No budget limits configured
+      </p>
+    <% end %>
+  </div>
+<% end %>

data/app/views/{rubyllm → ruby_llm}/agents/dashboard/_execution_item.html.erb

@@ -1,11 +1,14 @@
 <div id="execution-<%= execution.id %>" class="py-2.5 hover:bg-gray-50 dark:hover:bg-gray-700/50 -mx-2 px-2 rounded-lg transition-colors">
-  <%= link_to ruby_llm_agents.execution_path(execution), data: { turbo: false }, class: "block" do %>
+  <%= link_to ruby_llm_agents.execution_path(execution), class: "block" do %>
     <!-- Row 1: Status dot + Agent + Badges + Timestamp -->
     <div class="flex items-center justify-between gap-2">
       <div class="flex items-center gap-2 min-w-0">
-        <%= render "rubyllm/agents/shared/status_dot", status: execution.status %>
+        <%= render "ruby_llm/agents/shared/status_dot", status: execution.status %>
+        <% 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-sm text-gray-900 dark:text-gray-100 truncate">
-          <%= execution.agent_type.gsub(/Agent$/, '') %>
+          <%= execution.agent_type.gsub(/Agent$|Workflow$|Pipeline$|Parallel$|Router$/, '') %>
         </span>
         <span class="hidden sm:inline text-xs text-gray-400 dark:text-gray-500">v<%= execution.agent_version %></span>
         <% unless execution.status_running? %>
@@ -45,7 +48,7 @@
           $<%= number_with_precision(execution.total_cost || 0, precision: 4) %>
           <span class="mx-1.5 text-gray-300 dark:text-gray-600">·</span>
           <%= number_to_human_short(execution.duration_ms || 0) %>ms
-          <% if execution.attempts_count && execution.attempts_count > 1 %>
+          <% if execution.respond_to?(:attempts_count) && execution.attempts_count && execution.attempts_count > 1 %>
             <span class="mx-1.5 text-gray-300 dark:text-gray-600">·</span>
             <span class="text-amber-600 dark:text-amber-400"><%= execution.attempts_count %> retries</span>
           <% end %>

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

@@ -0,0 +1,84 @@
+<div class="mb-6">
+  <div class="flex items-center justify-end mb-3">
+    <div class="flex space-x-1 bg-gray-100 dark:bg-gray-700 rounded-lg p-1">
+      <%= link_to "Today", ruby_llm_agents.root_path(range: "today"),
+          class: "px-3 py-1 text-xs font-medium rounded-md transition-colors #{@selected_range == 'today' ? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'}" %>
+      <%= link_to "7 Days", ruby_llm_agents.root_path(range: "7d"),
+          class: "px-3 py-1 text-xs font-medium rounded-md transition-colors #{@selected_range == '7d' ? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'}" %>
+      <%= link_to "30 Days", ruby_llm_agents.root_path(range: "30d"),
+          class: "px-3 py-1 text-xs font-medium rounded-md transition-colors #{@selected_range == '30d' ? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'}" %>
+    </div>
+  </div>
+
+  <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
+    <!-- Running -->
+    <div class="flex items-center bg-white dark:bg-gray-800 rounded-lg px-4 py-3 shadow-sm border border-gray-100 dark:border-gray-700">
+      <div class="flex-shrink-0 w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mr-3">
+        <span class="w-2.5 h-2.5 bg-blue-500 rounded-full animate-pulse"></span>
+      </div>
+      <div>
+        <p class="text-lg font-bold text-gray-900 dark:text-gray-100"><%= now_strip[:running] %></p>
+        <p class="text-xs text-gray-500 dark:text-gray-400">Running</p>
+      </div>
+    </div>
+
+    <!-- Success -->
+    <div class="flex items-center bg-white dark:bg-gray-800 rounded-lg px-4 py-3 shadow-sm border border-gray-100 dark:border-gray-700">
+      <div class="flex-shrink-0 w-8 h-8 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mr-3">
+        <span class="w-2.5 h-2.5 bg-green-500 rounded-full"></span>
+      </div>
+      <div>
+        <p class="text-lg font-bold text-green-600 dark:text-green-400"><%= now_strip[:success_today] %></p>
+        <p class="text-xs text-gray-500 dark:text-gray-400">Success</p>
+      </div>
+    </div>
+
+    <!-- Errors -->
+    <div class="flex items-center bg-white dark:bg-gray-800 rounded-lg px-4 py-3 shadow-sm border border-gray-100 dark:border-gray-700">
+      <div class="flex-shrink-0 w-8 h-8 <%= now_strip[:errors_today] > 0 ? 'bg-red-100 dark:bg-red-900' : 'bg-gray-100 dark:bg-gray-700' %> rounded-full flex items-center justify-center mr-3">
+        <span class="w-2.5 h-2.5 <%= now_strip[:errors_today] > 0 ? 'bg-red-500' : 'bg-gray-400' %> rounded-full"></span>
+      </div>
+      <div>
+        <p class="text-lg font-bold <%= now_strip[:errors_today] > 0 ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-gray-100' %>"><%= now_strip[:errors_today] %></p>
+        <p class="text-xs text-gray-500 dark:text-gray-400">Errors</p>
+      </div>
+    </div>
+
+    <!-- Timeouts -->
+    <div class="flex items-center bg-white dark:bg-gray-800 rounded-lg px-4 py-3 shadow-sm border border-gray-100 dark:border-gray-700">
+      <div class="flex-shrink-0 w-8 h-8 <%= now_strip[:timeouts_today] > 0 ? 'bg-yellow-100 dark:bg-yellow-900' : 'bg-gray-100 dark:bg-gray-700' %> rounded-full flex items-center justify-center mr-3">
+        <span class="w-2.5 h-2.5 <%= now_strip[:timeouts_today] > 0 ? 'bg-yellow-500' : 'bg-gray-400' %> rounded-full"></span>
+      </div>
+      <div>
+        <p class="text-lg font-bold <%= now_strip[:timeouts_today] > 0 ? 'text-yellow-600 dark:text-yellow-400' : 'text-gray-900 dark:text-gray-100' %>"><%= now_strip[:timeouts_today] %></p>
+        <p class="text-xs text-gray-500 dark:text-gray-400">Timeouts</p>
+      </div>
+    </div>
+
+    <!-- Cost -->
+    <div class="flex items-center bg-white dark:bg-gray-800 rounded-lg px-4 py-3 shadow-sm border border-gray-100 dark:border-gray-700">
+      <div class="flex-shrink-0 w-8 h-8 bg-amber-100 dark:bg-amber-900 rounded-full flex items-center justify-center mr-3">
+        <svg class="w-4 h-4 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+        </svg>
+      </div>
+      <div>
+        <p class="text-lg font-bold text-gray-900 dark:text-gray-100">$<%= number_with_precision(now_strip[:cost_today], precision: 4) %></p>
+        <p class="text-xs text-gray-500 dark:text-gray-400">Cost</p>
+      </div>
+    </div>
+
+    <!-- Success Rate -->
+    <div class="flex items-center bg-white dark:bg-gray-800 rounded-lg px-4 py-3 shadow-sm border border-gray-100 dark:border-gray-700">
+      <div class="flex-shrink-0 w-8 h-8 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mr-3">
+        <svg class="w-4 h-4 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+        </svg>
+      </div>
+      <div>
+        <p class="text-lg font-bold text-gray-900 dark:text-gray-100"><%= now_strip[:success_rate] %>%</p>
+        <p class="text-xs text-gray-500 dark:text-gray-400">Success Rate</p>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,115 @@
+<%# Tenant Budget Widget - shows budget limits and usage for current tenant %>
+<%# @param tenant_budget [Hash] Budget data from controller %>
+
+<% if tenant_budget.present? %>
+  <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">
+        <div class="flex items-center gap-2">
+          <svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+          </svg>
+          <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">
+            Tenant Budget: <%= tenant_budget[:tenant_id] %>
+          </h3>
+        </div>
+        <%# Enforcement badge %>
+        <% enforcement = tenant_budget[:enforcement].to_s %>
+        <% badge_class = case enforcement
+             when "hard" then "bg-red-100 dark:bg-red-900/50 text-red-700 dark:text-red-300"
+             when "soft" then "bg-yellow-100 dark:bg-yellow-900/50 text-yellow-700 dark:text-yellow-300"
+             else "bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400"
+           end %>
+        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium <%= badge_class %>">
+          <%= enforcement.capitalize %> Enforcement
+        </span>
+      </div>
+    </div>
+
+    <div class="p-6">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <%# Daily Budget %>
+        <div>
+          <div class="flex items-center justify-between mb-2">
+            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Daily Budget</span>
+            <span class="text-sm text-gray-500 dark:text-gray-400">
+              $<%= number_with_precision(tenant_budget[:daily_spend], precision: 2) %>
+              <% if tenant_budget[:daily_limit] %>
+                / $<%= number_with_precision(tenant_budget[:daily_limit], precision: 2) %>
+              <% else %>
+                (no limit)
+              <% end %>
+            </span>
+          </div>
+          <% if tenant_budget[:daily_limit] %>
+            <% daily_pct = [tenant_budget[:daily_percentage], 100].min %>
+            <% bar_color = if daily_pct >= 100
+                             "bg-red-500"
+                           elsif daily_pct >= 80
+                             "bg-yellow-500"
+                           else
+                             "bg-green-500"
+                           end %>
+            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
+              <div class="<%= bar_color %> h-2.5 rounded-full transition-all duration-300" style="width: <%= daily_pct %>%"></div>
+            </div>
+            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1"><%= tenant_budget[:daily_percentage] %>% used</p>
+          <% else %>
+            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
+              <div class="bg-gray-400 h-2.5 rounded-full" style="width: 0%"></div>
+            </div>
+            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">No daily limit configured</p>
+          <% end %>
+        </div>
+
+        <%# Monthly Budget %>
+        <div>
+          <div class="flex items-center justify-between mb-2">
+            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Monthly Budget</span>
+            <span class="text-sm text-gray-500 dark:text-gray-400">
+              $<%= number_with_precision(tenant_budget[:monthly_spend], precision: 2) %>
+              <% if tenant_budget[:monthly_limit] %>
+                / $<%= number_with_precision(tenant_budget[:monthly_limit], precision: 2) %>
+              <% else %>
+                (no limit)
+              <% end %>
+            </span>
+          </div>
+          <% if tenant_budget[:monthly_limit] %>
+            <% monthly_pct = [tenant_budget[:monthly_percentage], 100].min %>
+            <% bar_color = if monthly_pct >= 100
+                             "bg-red-500"
+                           elsif monthly_pct >= 80
+                             "bg-yellow-500"
+                           else
+                             "bg-blue-500"
+                           end %>
+            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
+              <div class="<%= bar_color %> h-2.5 rounded-full transition-all duration-300" style="width: <%= monthly_pct %>%"></div>
+            </div>
+            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1"><%= tenant_budget[:monthly_percentage] %>% used</p>
+          <% else %>
+            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
+              <div class="bg-gray-400 h-2.5 rounded-full" style="width: 0%"></div>
+            </div>
+            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">No monthly limit configured</p>
+          <% end %>
+        </div>
+      </div>
+
+      <%# Per-agent limits if configured %>
+      <% if tenant_budget[:per_agent_daily].present? %>
+        <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
+          <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">Per-Agent Daily Limits</p>
+          <div class="flex flex-wrap gap-2">
+            <% tenant_budget[:per_agent_daily].each do |agent, limit| %>
+              <span class="inline-flex items-center px-2 py-1 rounded text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
+                <%= agent.to_s.gsub(/Agent$/, "") %>: $<%= number_with_precision(limit, precision: 2) %>
+              </span>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,49 @@
+<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">
+    <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Top Errors</h3>
+  </div>
+
+  <% if top_errors.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">Error</th>
+            <th class="px-4 py-2 text-right">Count</th>
+            <th class="px-4 py-2 text-right">Last Seen</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+          <% top_errors.first(5).each do |error| %>
+            <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-[180px]" title="<%= error[:error_class] %>">
+                  <%= error[:error_class].to_s.split("::").last %>
+                </span>
+              </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 bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300">
+                  <%= number_with_delimiter(error[:count]) %>
+                </span>
+              </td>
+              <td class="px-4 py-2 text-right text-xs text-gray-500 dark:text-gray-400">
+                <% if error[:last_seen] %>
+                  <%= time_ago_in_words(error[:last_seen]) %>
+                <% else %>
+                  -
+                <% end %>
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  <% else %>
+    <div class="px-4 py-8 text-center text-green-500 dark:text-green-400">
+      <svg class="w-8 h-8 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+      <p class="text-sm">No errors</p>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,155 @@
+<!-- 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 -->
+<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="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 range = '<%= @selected_range %>';
+      const chartUrl = '<%= ruby_llm_agents.chart_data_path %>?range=' + range;
+      const hourMs = 3600000;
+      const dayMs = 24 * hourMs;
+
+      function convertToDatetimePoints(data, range) {
+        const now = Date.now();
+        const numPoints = data.length;
+        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 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, 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);
+            const dateFormat = range === 'today' ? '%H:%M' : '%b %d';
+
+            Highcharts.chart('activity-chart', {
+              chart: { type: 'areaspline', backgroundColor: 'transparent' },
+              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)'
+              },
+              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' }
+              },
+              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'
+              },
+              plotOptions: {
+                areaspline: {
+                  fillOpacity: 0.15,
+                  lineWidth: 2,
+                  marker: { enabled: false, states: { hover: { enabled: true, radius: 4 } } }
+                },
+                spline: {
+                  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: '$' } }
+              ]
+            });
+          })
+          .catch(err => console.log('[RubyLLM::Agents] Chart error:', err));
+      }
+
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initChart);
+      } else {
+        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 mb-6">
+  <div class="px-6 py-3 border-b border-gray-100 dark:border-gray-700">
+    <div class="flex justify-between items-center">
+      <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, 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>
+</div>
+
+<!-- Agent Comparison + Top Errors -->
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-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>

data/app/views/{rubyllm → ruby_llm}/agents/executions/_execution.html.erb

@@ -1,4 +1,4 @@
-<%= link_to ruby_llm_agents.execution_path(execution), data: { turbo: false }, class: "block px-6 py-4 hover:bg-gray-50 transition-colors" do %>
+<%= link_to ruby_llm_agents.execution_path(execution), class: "block px-6 py-4 hover:bg-gray-50 transition-colors" do %>
   <div class="flex items-center justify-between">
     <div class="flex items-center space-x-4">
       <!-- Status Badge -->