ruby_llm-agents 1.3.4 → 2.1.0

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

@@ -1,61 +1,38 @@
 <% if critical_alerts.any? %>
-  <div id="action-center" class="mb-6 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-4">
-    <div class="flex items-center mb-3">
-      <svg class="w-5 h-5 text-red-600 dark:text-red-400 mr-2" 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>
-      <h3 class="font-semibold text-red-800 dark:text-red-200">Action Required</h3>
+  <div id="action-center" class="mb-6">
+    <div class="flex items-center gap-3 mb-3">
+      <span class="text-[10px] font-medium text-red-500 dark:text-red-400 uppercase tracking-widest font-mono">action required</span>
+      <span class="font-mono text-xs text-red-400 dark:text-red-500"><%= critical_alerts.size %></span>
+      <div class="flex-1 border-t border-gray-200 dark:border-gray-800"></div>
     </div>
 
-    <div class="space-y-2">
+    <div class="font-mono text-xs space-y-1">
       <% critical_alerts.each do |alert| %>
-        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-0 bg-white dark:bg-gray-800 rounded-lg px-4 py-3 shadow-sm">
-          <% case alert[:type] %>
-          <% when :breaker %>
-            <div class="flex items-center">
-              <span class="w-2 h-2 bg-orange-500 rounded-full mr-3 flex-shrink-0"></span>
-              <div>
-                <p class="text-sm font-medium text-gray-900 dark:text-gray-100">
-                  Circuit breaker open: <%= alert[:data][:agent_type].gsub(/Agent$/, '') %>
-                </p>
-                <p class="text-xs text-gray-500 dark:text-gray-400">
-                  <%= alert[:data][:model_id] %> &middot; <%= alert[:data][:failure_count] %>/<%= alert[:data][:threshold] %> failures
-                </p>
-              </div>
-            </div>
-            <span class="text-xs text-orange-600 dark:text-orange-400 font-medium ml-5 sm:ml-0">
-              <%= alert[:data][:cooldown_remaining] %>s remaining
-            </span>
+        <% case alert[:type] %>
+        <% when :breaker %>
+          <div class="flex items-center gap-3 py-1.5 px-2 -mx-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800/50">
+            <span class="w-1.5 h-1.5 bg-orange-500 rounded-full flex-shrink-0"></span>
+            <span class="text-gray-900 dark:text-gray-100">circuit breaker open: <span class="text-gray-500 dark:text-gray-400"><%= alert[:data][:agent_type].gsub(/Agent$/, '') %></span></span>
+            <span class="text-gray-400 dark:text-gray-600"><%= alert[:data][:model_id] %> &middot; <%= alert[:data][:failure_count] %>/<%= alert[:data][:threshold] %> failures</span>
+            <span class="ml-auto text-orange-600 dark:text-orange-400"><%= alert[:data][:cooldown_remaining] %>s remaining</span>
+          </div>
 
-          <% when :budget_breach %>
-            <div class="flex items-center">
-              <span class="w-2 h-2 bg-red-500 rounded-full mr-3 flex-shrink-0"></span>
-              <div>
-                <p class="text-sm font-medium text-gray-900 dark:text-gray-100">
-                  <%= alert[:data][:period].to_s.capitalize %> budget exceeded
-                </p>
-                <p class="text-xs text-gray-500 dark:text-gray-400">
-                  $<%= number_with_precision(alert[:data][:current], precision: 2) %> / $<%= number_with_precision(alert[:data][:limit], precision: 2) %>
-                </p>
-              </div>
-            </div>
-            <%= link_to "Adjust", ruby_llm_agents.system_config_path, class: "text-xs text-red-600 dark:text-red-400 hover:underline font-medium ml-5 sm:ml-0" %>
+        <% when :budget_breach %>
+          <div class="flex items-center gap-3 py-1.5 px-2 -mx-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800/50">
+            <span class="w-1.5 h-1.5 bg-red-500 rounded-full flex-shrink-0"></span>
+            <span class="text-gray-900 dark:text-gray-100"><%= alert[:data][:period].to_s.capitalize %> budget exceeded</span>
+            <span class="text-gray-400 dark:text-gray-600">$<%= number_with_precision(alert[:data][:current], precision: 2) %> / $<%= number_with_precision(alert[:data][:limit], precision: 2) %></span>
+            <%= link_to "adjust", ruby_llm_agents.system_config_path, class: "ml-auto text-red-600 dark:text-red-400 hover:underline" %>
+          </div>
 
-          <% when :error_spike %>
-            <div class="flex items-center">
-              <span class="w-2 h-2 bg-red-500 rounded-full mr-3 flex-shrink-0 animate-pulse"></span>
-              <div>
-                <p class="text-sm font-medium text-gray-900 dark:text-gray-100">
-                  Error spike detected
-                </p>
-                <p class="text-xs text-gray-500 dark:text-gray-400">
-                  <%= alert[:data][:count] %> errors in last 15 minutes
-                </p>
-              </div>
-            </div>
-            <%= link_to "View failures", ruby_llm_agents.executions_path(status: "error"), class: "text-xs text-red-600 dark:text-red-400 hover:underline font-medium ml-5 sm:ml-0" %>
-          <% end %>
-        </div>
+        <% when :error_spike %>
+          <div class="flex items-center gap-3 py-1.5 px-2 -mx-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800/50">
+            <span class="w-1.5 h-1.5 bg-red-500 rounded-full flex-shrink-0 animate-pulse"></span>
+            <span class="text-gray-900 dark:text-gray-100">error spike detected</span>
+            <span class="text-gray-400 dark:text-gray-600"><%= alert[:data][:count] %> errors in last 15 minutes</span>
+            <%= link_to "view failures", ruby_llm_agents.executions_path(status: "error"), class: "ml-auto text-red-600 dark:text-red-400 hover:underline" %>
+          </div>
+        <% end %>
       <% end %>
     </div>
   </div>

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

@@ -2,114 +2,88 @@
 <%# @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>
+  <%
+    enforcement = tenant_budget[:enforcement].to_s
+    enforcement_badge = case enforcement
+      when "hard" then "badge-error"
+      when "soft" then "badge-timeout"
+      else ""
+    end
+  %>
+  <div class="mb-6">
+    <div class="flex items-center gap-3 mb-3">
+      <span class="text-[10px] font-medium text-gray-400 dark:text-gray-600 uppercase tracking-widest font-mono">tenant budget: <%= tenant_budget[:tenant_id] %></span>
+      <% if enforcement_badge.present? %>
+        <span class="badge <%= enforcement_badge %> badge-sm"><%= enforcement %></span>
+      <% end %>
+      <div class="flex-1 border-t border-gray-200 dark:border-gray-800"></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 class="font-mono text-xs space-y-2">
+      <%# Daily Budget %>
+      <% if tenant_budget[:daily_limit] %>
+        <%
+          daily_pct = [tenant_budget[:daily_percentage], 100].min
+          bar_color = if daily_pct >= 100 then "bg-red-500"
+                      elsif daily_pct >= 80 then "bg-yellow-500"
+                      else "bg-green-500"
+                      end
+        %>
+        <div class="flex items-center gap-3">
+          <span class="w-28 flex-shrink-0 text-gray-500 dark:text-gray-400">daily</span>
+          <span class="w-44 flex-shrink-0 text-gray-800 dark:text-gray-200">$<%= number_with_precision(tenant_budget[:daily_spend], precision: 2) %> <span class="text-gray-400 dark:text-gray-600">/ $<%= number_with_precision(tenant_budget[:daily_limit], precision: 2) %></span></span>
+          <span class="w-12 flex-shrink-0 text-right text-gray-400 dark:text-gray-600"><%= tenant_budget[:daily_percentage] %>%</span>
+          <div class="flex-1 bg-gray-200 dark:bg-gray-800 rounded-full h-1">
+            <div class="<%= bar_color %> h-1 rounded-full transition-all" style="width: <%= daily_pct %>%"></div>
           </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 %>
+      <% else %>
+        <div class="flex items-center gap-3">
+          <span class="w-28 flex-shrink-0 text-gray-500 dark:text-gray-400">daily</span>
+          <span class="text-gray-800 dark:text-gray-200">$<%= number_with_precision(tenant_budget[:daily_spend], precision: 2) %></span>
+          <span class="text-gray-400 dark:text-gray-600">(no limit)</span>
         </div>
-      </div>
+      <% end %>
 
-      <%# 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 %>
+      <%# Monthly Budget %>
+      <% if tenant_budget[:monthly_limit] %>
+        <%
+          monthly_pct = [tenant_budget[:monthly_percentage], 100].min
+          bar_color = if monthly_pct >= 100 then "bg-red-500"
+                      elsif monthly_pct >= 80 then "bg-yellow-500"
+                      else "bg-blue-500"
+                      end
+        %>
+        <div class="flex items-center gap-3">
+          <span class="w-28 flex-shrink-0 text-gray-500 dark:text-gray-400">monthly</span>
+          <span class="w-44 flex-shrink-0 text-gray-800 dark:text-gray-200">$<%= number_with_precision(tenant_budget[:monthly_spend], precision: 2) %> <span class="text-gray-400 dark:text-gray-600">/ $<%= number_with_precision(tenant_budget[:monthly_limit], precision: 2) %></span></span>
+          <span class="w-12 flex-shrink-0 text-right text-gray-400 dark:text-gray-600"><%= tenant_budget[:monthly_percentage] %>%</span>
+          <div class="flex-1 bg-gray-200 dark:bg-gray-800 rounded-full h-1">
+            <div class="<%= bar_color %> h-1 rounded-full transition-all" style="width: <%= monthly_pct %>%"></div>
           </div>
         </div>
+      <% else %>
+        <div class="flex items-center gap-3">
+          <span class="w-28 flex-shrink-0 text-gray-500 dark:text-gray-400">monthly</span>
+          <span class="text-gray-800 dark:text-gray-200">$<%= number_with_precision(tenant_budget[:monthly_spend], precision: 2) %></span>
+          <span class="text-gray-400 dark:text-gray-600">(no limit)</span>
+        </div>
       <% end %>
     </div>
+
+    <%# Per-agent limits if configured %>
+    <% if tenant_budget[:per_agent_daily].present? %>
+      <div class="mt-3 font-mono text-xs">
+        <span class="text-gray-400 dark:text-gray-600">per-agent daily:</span>
+        <div class="mt-1 space-y-0.5 pl-2">
+          <% tenant_budget[:per_agent_daily].each do |agent, limit| %>
+            <div class="flex items-center gap-2">
+              <span class="text-gray-900 dark:text-gray-200"><%= agent.to_s.gsub(/Agent$/, "") %></span>
+              <span class="text-gray-400 dark:text-gray-600">$<%= number_with_precision(limit, precision: 2) %></span>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
   </div>
 <% end %>