ruby_llm-agents 0.2.3 → 0.3.0

data/app/views/rubyllm/agents/agents/_version_comparison.html.erb

@@ -0,0 +1,186 @@
+<%# Collapsible version comparison UI - simplified for quick scanning %>
+<% if versions.size >= 2 %>
+  <%
+    v1 = version_comparison&.dig(:v1)
+    v2 = version_comparison&.dig(:v2)
+    data = version_comparison&.dig(:data) || {}
+    v1_stats = data[:v1] || {}
+    v2_stats = data[:v2] || {}
+
+    # Calculate metrics with changes
+    metrics = [
+      { name: "Success Rate", v1: v1_stats[:success_rate] || 0, v2: v2_stats[:success_rate] || 0, format: :pct, better: :higher },
+      { name: "Avg Cost", v1: v1_stats[:avg_cost] || 0, v2: v2_stats[:avg_cost] || 0, format: :cost, better: :lower },
+      { name: "Avg Tokens", v1: v1_stats[:avg_tokens] || 0, v2: v2_stats[:avg_tokens] || 0, format: :num, better: :lower },
+      { name: "Avg Duration", v1: v1_stats[:avg_duration_ms] || 0, v2: v2_stats[:avg_duration_ms] || 0, format: :ms, better: :lower },
+      { name: "Executions", v1: v1_stats[:count] || 0, v2: v2_stats[:count] || 0, format: :num, better: :higher }
+    ]
+
+    # Count improvements/regressions for summary
+    improvements = 0
+    regressions = 0
+    metrics.each do |m|
+      next if m[:v1].zero? && m[:v2].zero?
+      if m[:better] == :higher
+        improvements += 1 if m[:v2] > m[:v1]
+        regressions += 1 if m[:v2] < m[:v1]
+      else
+        improvements += 1 if m[:v2] < m[:v1]
+        regressions += 1 if m[:v2] > m[:v1]
+      end
+    end
+  %>
+
+  <div class="bg-white dark:bg-gray-800 rounded-lg shadow mb-6">
+    <!-- Collapsible Header -->
+    <button
+      type="button"
+      onclick="toggleVersionComparison()"
+      class="w-full px-6 py-4 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors rounded-lg"
+    >
+      <div class="flex items-center gap-3">
+        <svg id="version-chevron" class="w-5 h-5 text-gray-400 transition-transform duration-200" 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>
+        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Version Comparison</h3>
+        <span class="text-sm text-gray-500 dark:text-gray-400">v<%= v1 %> → v<%= v2 %></span>
+      </div>
+
+      <!-- Quick Summary Pills -->
+      <div class="flex items-center gap-2">
+        <% if improvements > 0 %>
+          <span class="px-2 py-0.5 text-xs font-medium text-green-700 dark:text-green-300 bg-green-100 dark:bg-green-900/50 rounded-full">
+            <%= improvements %> improved
+          </span>
+        <% end %>
+        <% if regressions > 0 %>
+          <span class="px-2 py-0.5 text-xs font-medium text-red-700 dark:text-red-300 bg-red-100 dark:bg-red-900/50 rounded-full">
+            <%= regressions %> regressed
+          </span>
+        <% end %>
+        <% if improvements == 0 && regressions == 0 %>
+          <span class="px-2 py-0.5 text-xs font-medium text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 rounded-full">
+            No changes
+          </span>
+        <% end %>
+      </div>
+    </button>
+
+    <!-- Collapsible Content -->
+    <div id="version-comparison-content" class="hidden border-t border-gray-100 dark:border-gray-700">
+      <div class="p-6">
+        <!-- Version Selectors -->
+        <div class="flex items-center gap-4 mb-4">
+          <select id="compare-v1" onchange="updateVersionComparison()" class="flex-1 px-3 py-2 text-sm bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg dark:text-gray-200">
+            <% versions.each do |ver| %>
+              <option value="<%= ver %>" <%= ver == v1 ? 'selected' : '' %>>v<%= ver %></option>
+            <% end %>
+          </select>
+          <span class="text-gray-400">→</span>
+          <select id="compare-v2" onchange="updateVersionComparison()" class="flex-1 px-3 py-2 text-sm bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg dark:text-gray-200">
+            <% versions.each do |ver| %>
+              <option value="<%= ver %>" <%= ver == v2 ? 'selected' : '' %>>v<%= ver %></option>
+            <% end %>
+          </select>
+        </div>
+
+        <% if version_comparison && version_comparison[:data] %>
+          <!-- Simple Comparison Table -->
+          <table class="w-full text-sm">
+            <thead>
+              <tr class="text-xs text-gray-500 dark:text-gray-400 uppercase">
+                <th class="text-left py-2">Metric</th>
+                <th class="text-right py-2">v<%= v1 %></th>
+                <th class="text-right py-2">v<%= v2 %></th>
+                <th class="text-right py-2">Change</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+              <% metrics.each do |m| %>
+                <%
+                  # Format values
+                  case m[:format]
+                  when :pct
+                    f_v1 = "#{m[:v1].round(1)}%"
+                    f_v2 = "#{m[:v2].round(1)}%"
+                    diff = m[:v2] - m[:v1]
+                    change = "#{diff >= 0 ? '+' : ''}#{diff.round(1)}pp"
+                  when :cost
+                    f_v1 = "$#{number_with_precision(m[:v1], precision: 4)}"
+                    f_v2 = "$#{number_with_precision(m[:v2], precision: 4)}"
+                    pct = m[:v1] > 0 ? ((m[:v2] - m[:v1]) / m[:v1] * 100) : 0
+                    change = "#{pct >= 0 ? '+' : ''}#{pct.round(1)}%"
+                  when :ms
+                    f_v1 = "#{number_with_delimiter(m[:v1].round)}ms"
+                    f_v2 = "#{number_with_delimiter(m[:v2].round)}ms"
+                    pct = m[:v1] > 0 ? ((m[:v2] - m[:v1]) / m[:v1] * 100) : 0
+                    change = "#{pct >= 0 ? '+' : ''}#{pct.round(1)}%"
+                  else
+                    f_v1 = number_with_delimiter(m[:v1].round)
+                    f_v2 = number_with_delimiter(m[:v2].round)
+                    pct = m[:v1] > 0 ? ((m[:v2] - m[:v1]) / m[:v1] * 100) : 0
+                    change = "#{pct >= 0 ? '+' : ''}#{pct.round(1)}%"
+                  end
+
+                  # Determine if change is good/bad
+                  is_better = m[:better] == :higher ? m[:v2] > m[:v1] : m[:v2] < m[:v1]
+                  is_worse = m[:better] == :higher ? m[:v2] < m[:v1] : m[:v2] > m[:v1]
+                  change_class = is_better ? "text-green-600 dark:text-green-400" : is_worse ? "text-red-600 dark:text-red-400" : "text-gray-500"
+                %>
+                <tr>
+                  <td class="py-2 text-gray-700 dark:text-gray-300"><%= m[:name] %></td>
+                  <td class="py-2 text-right text-gray-900 dark:text-gray-100 font-medium"><%= f_v1 %></td>
+                  <td class="py-2 text-right text-gray-900 dark:text-gray-100 font-medium"><%= f_v2 %></td>
+                  <td class="py-2 text-right font-medium <%= change_class %>"><%= change %></td>
+                </tr>
+              <% end %>
+            </tbody>
+          </table>
+
+          <p class="mt-4 text-xs text-gray-400 dark:text-gray-500 text-center">
+            Based on this month's data
+          </p>
+        <% else %>
+          <p class="text-sm text-gray-500 dark:text-gray-400 text-center py-4">
+            No data available for selected versions
+          </p>
+        <% end %>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    function toggleVersionComparison() {
+      const content = document.getElementById('version-comparison-content');
+      const chevron = document.getElementById('version-chevron');
+      content.classList.toggle('hidden');
+      chevron.classList.toggle('-rotate-180');
+    }
+
+    function updateVersionComparison() {
+      const v1 = document.getElementById('compare-v1').value;
+      const v2 = document.getElementById('compare-v2').value;
+      const url = new URL(window.location.href);
+      url.searchParams.set('compare_v1', v1);
+      url.searchParams.set('compare_v2', v2);
+      window.location.href = url.toString();
+    }
+
+    // Restore collapsed state from localStorage
+    document.addEventListener('DOMContentLoaded', function() {
+      const expanded = localStorage.getItem('version_comparison_expanded');
+      if (expanded === 'true') {
+        document.getElementById('version-comparison-content').classList.remove('hidden');
+        document.getElementById('version-chevron').classList.add('-rotate-180');
+      }
+    });
+
+    // Save state when toggling
+    const originalToggle = toggleVersionComparison;
+    toggleVersionComparison = function() {
+      originalToggle();
+      const isExpanded = !document.getElementById('version-comparison-content').classList.contains('hidden');
+      localStorage.setItem('version_comparison_expanded', isExpanded);
+    };
+  </script>
+<% end %>

data/app/views/rubyllm/agents/agents/show.html.erb

@@ -67,10 +67,58 @@
   </div>
 </div>
 
+<!-- Circuit Breaker Status (if reliability enabled) -->
+<% if @config && @circuit_breaker_status.present? %>
+  <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 mb-6">
+    <div class="flex items-center justify-between mb-3">
+      <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Circuit Breaker Status</h3>
+      <span class="text-xs text-gray-400 dark:text-gray-500">Auto-refreshes every 30s</span>
+    </div>
+
+    <div class="flex flex-wrap gap-3">
+      <% @circuit_breaker_status.each do |model_id, status| %>
+        <div class="flex items-center gap-2 px-3 py-2 rounded-lg border <%= status[:open] ? 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800' : 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800' %>">
+          <% if status[:open] %>
+            <!-- Open/Tripped indicator -->
+            <span class="relative flex h-3 w-3">
+              <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
+              <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
+            </span>
+            <span class="text-sm font-medium text-red-700 dark:text-red-300"><%= model_id %></span>
+            <span class="text-xs text-red-500 dark:text-red-400 ml-1">OPEN</span>
+            <% if status[:cooldown_remaining] %>
+              <span class="text-xs text-red-400 dark:text-red-500 ml-1">
+                (resets in <%= status[:cooldown_remaining] %>s)
+              </span>
+            <% end %>
+          <% else %>
+            <!-- Closed/Healthy indicator -->
+            <span class="inline-flex rounded-full h-3 w-3 bg-green-500"></span>
+            <span class="text-sm font-medium text-green-700 dark:text-green-300"><%= model_id %></span>
+            <span class="text-xs text-green-500 dark:text-green-400 ml-1">OK</span>
+            <% if status[:failure_count] && status[:failure_count] > 0 %>
+              <span class="text-xs text-yellow-500 dark:text-yellow-400 ml-1">
+                (<%= status[:failure_count] %>/<%= status[:threshold] %> failures)
+              </span>
+            <% end %>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+
+    <% if @circuit_breaker_status.values.any? { |s| s[:open] } %>
+      <p class="mt-3 text-xs text-gray-500 dark:text-gray-400">
+        Open circuit breakers will skip the model and try fallbacks (if configured).
+        They automatically reset after the cooldown period.
+      </p>
+    <% end %>
+  </div>
+<% end %>
+
 <!-- Stats Grid -->
 <% success_rate = @stats[:success_rate] || 0 %>
 <% success_rate_color = success_rate >= 95 ? 'text-green-600' : success_rate >= 80 ? 'text-yellow-600' : 'text-red-600' %>
-<div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
+<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-6">
   <%= render "rubyllm/agents/shared/stat_card",
       title: "Executions",
       value: number_with_delimiter(@stats[:count]),
@@ -105,6 +153,12 @@
       value: "#{number_with_delimiter(@stats[:avg_duration_ms] || 0)} ms",
       icon: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z",
       icon_color: "text-purple-500" %>
+
+  <%= render "rubyllm/agents/shared/stat_card",
+      title: "Cache Hit Rate",
+      value: "#{@cache_hit_rate}%",
+      icon: "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",
+      icon_color: "text-purple-500" %>
 </div>
 
 <!-- Charts Section -->
@@ -122,7 +176,11 @@
       <%= area_chart [
         { name: "Success", data: success_data },
         { name: "Failed", data: failed_data }
-      ], colors: ["#10B981", "#EF4444"], stacked: true, library: { maintainAspectRatio: false } %>
+      ], colors: ["#10B981", "#EF4444"], stacked: true, library: {
+        yAxis: { min: 0 },
+        legend: { align: "center", verticalAlign: "bottom" },
+        plotOptions: { area: { stacking: "normal" } }
+      } %>
     </div>
   </div>
 
@@ -133,7 +191,10 @@
     <div id="cost-chart" style="height: 250px;">
       <% cost_data = @trend_data.map { |d| [d[:date].strftime("%b %d"), d[:total_cost].to_f.round(4)] }.to_h %>
 
-      <%= line_chart cost_data, colors: ["#10B981"], prefix: "$", library: { maintainAspectRatio: false, plugins: { legend: { display: false } } } %>
+      <%= line_chart cost_data, colors: ["#10B981"], prefix: "$", library: {
+        yAxis: { min: 0 },
+        legend: { enabled: false }
+      } %>
     </div>
   </div>
 </div>
@@ -169,12 +230,52 @@
   </div>
 </div>
 
+<!-- Finish Reason Distribution -->
+<% if @finish_reason_distribution.present? && @finish_reason_distribution.any? %>
+  <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 mb-6">
+    <div class="flex items-center justify-between">
+      <p class="text-sm text-gray-500 dark:text-gray-400 uppercase">Finish Reasons</p>
+
+      <div class="flex flex-wrap gap-4">
+        <% finish_colors = {
+            'stop' => '#10B981',
+            'length' => '#F59E0B',
+            'content_filter' => '#EF4444',
+            'tool_calls' => '#3B82F6',
+            nil => '#6B7280'
+          } %>
+
+        <% @finish_reason_distribution.each do |reason, count| %>
+          <div class="flex items-center">
+            <span
+              class="w-2 h-2 rounded-full mr-1.5"
+              style="background-color: <%= finish_colors[reason] || '#6B7280' %>"
+            ></span>
+
+            <span class="text-sm text-gray-700 dark:text-gray-300"><%= reason || 'unknown' %></span>
+
+            <span class="text-sm font-medium text-gray-900 dark:text-gray-100 ml-1">
+              (<%= number_with_delimiter(count) %>)
+            </span>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+<% end %>
+
+<!-- Version Comparison -->
+<%= render partial: "rubyllm/agents/agents/version_comparison",
+    locals: { versions: @versions, version_comparison: @version_comparison } %>
+
 <% if @config %>
   <!-- Configuration -->
   <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
     <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Configuration</h3>
 
-    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
+    <!-- Basic Configuration -->
+    <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">Basic</p>
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
       <div>
         <p class="text-sm text-gray-500 dark:text-gray-400">Model</p>
         <p class="font-medium text-gray-900 dark:text-gray-100"><%= @config[:model] %></p>
@@ -192,22 +293,144 @@
 
       <div>
         <p class="text-sm text-gray-500 dark:text-gray-400">Cache</p>
-
         <p class="font-medium text-gray-900 dark:text-gray-100">
           <% if @config[:cache_enabled] %>
-            Enabled (
-            <%= @config[:cache_ttl].inspect %>
-            )
+            Enabled (<%= @config[:cache_ttl].inspect %>)
           <% else %>
-            Disabled
+            <span class="text-gray-400 dark:text-gray-500">Disabled</span>
           <% end %>
         </p>
       </div>
     </div>
 
+    <!-- Reliability Configuration -->
+    <%
+      retries_config = @config[:retries] || {}
+      has_retries = (retries_config[:max] || 0) > 0
+      has_fallbacks = @config[:fallback_models].present? && @config[:fallback_models].any?
+      has_total_timeout = @config[:total_timeout].present?
+      has_circuit_breaker = @config[:circuit_breaker].present?
+      has_any_reliability = has_retries || has_fallbacks || has_total_timeout || has_circuit_breaker
+    %>
+    <div class="border-t border-gray-100 dark:border-gray-700 pt-4 mb-6">
+      <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">Reliability</p>
+
+      <% if has_any_reliability %>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <!-- Retries -->
+          <div class="flex items-start gap-3 p-3 rounded-lg <%= has_retries ? 'bg-green-50 dark:bg-green-900/20' : 'bg-gray-50 dark:bg-gray-700/50' %>">
+            <div class="flex-shrink-0 mt-0.5">
+              <% if has_retries %>
+                <svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
+                </svg>
+              <% else %>
+                <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
+                </svg>
+              <% end %>
+            </div>
+            <div>
+              <p class="text-sm font-medium text-gray-900 dark:text-gray-100">Retries</p>
+              <% if has_retries %>
+                <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                  Max: <%= retries_config[:max] %> &middot;
+                  Backoff: <%= retries_config[:backoff] %> &middot;
+                  Base: <%= retries_config[:base] %>s &middot;
+                  Max delay: <%= retries_config[:max_delay] %>s
+                </p>
+              <% else %>
+                <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Not configured</p>
+              <% end %>
+            </div>
+          </div>
+
+          <!-- Fallback Models -->
+          <div class="flex items-start gap-3 p-3 rounded-lg <%= has_fallbacks ? 'bg-green-50 dark:bg-green-900/20' : 'bg-gray-50 dark:bg-gray-700/50' %>">
+            <div class="flex-shrink-0 mt-0.5">
+              <% if has_fallbacks %>
+                <svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
+                </svg>
+              <% else %>
+                <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
+                </svg>
+              <% end %>
+            </div>
+            <div>
+              <p class="text-sm font-medium text-gray-900 dark:text-gray-100">Fallback Models</p>
+              <% if has_fallbacks %>
+                <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                  <%= @config[:fallback_models].join(" → ") %>
+                </p>
+              <% else %>
+                <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Not configured</p>
+              <% end %>
+            </div>
+          </div>
+
+          <!-- Total Timeout -->
+          <div class="flex items-start gap-3 p-3 rounded-lg <%= has_total_timeout ? 'bg-green-50 dark:bg-green-900/20' : 'bg-gray-50 dark:bg-gray-700/50' %>">
+            <div class="flex-shrink-0 mt-0.5">
+              <% if has_total_timeout %>
+                <svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
+                </svg>
+              <% else %>
+                <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
+                </svg>
+              <% end %>
+            </div>
+            <div>
+              <p class="text-sm font-medium text-gray-900 dark:text-gray-100">Total Timeout</p>
+              <% if has_total_timeout %>
+                <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                  <%= @config[:total_timeout] %> seconds across all attempts
+                </p>
+              <% else %>
+                <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Not configured</p>
+              <% end %>
+            </div>
+          </div>
+
+          <!-- Circuit Breaker -->
+          <div class="flex items-start gap-3 p-3 rounded-lg <%= has_circuit_breaker ? 'bg-green-50 dark:bg-green-900/20' : 'bg-gray-50 dark:bg-gray-700/50' %>">
+            <div class="flex-shrink-0 mt-0.5">
+              <% if has_circuit_breaker %>
+                <svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
+                </svg>
+              <% else %>
+                <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
+                </svg>
+              <% end %>
+            </div>
+            <div>
+              <p class="text-sm font-medium text-gray-900 dark:text-gray-100">Circuit Breaker</p>
+              <% if has_circuit_breaker %>
+                <% cb = @config[:circuit_breaker] %>
+                <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                  Opens after <%= cb[:errors] %> errors within <%= cb[:within] %>s &middot;
+                  Cooldown: <%= cb[:cooldown] %>s
+                </p>
+              <% else %>
+                <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Not configured</p>
+              <% end %>
+            </div>
+          </div>
+        </div>
+      <% else %>
+        <p class="text-sm text-gray-400 dark:text-gray-500">No reliability features configured</p>
+      <% end %>
+    </div>
+
+    <!-- Parameters -->
     <% if @config[:params].present? && @config[:params].any? %>
       <div class="border-t border-gray-100 dark:border-gray-700 pt-4">
-        <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Parameters</p>
+        <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">Parameters</p>
 
         <div class="space-y-2">
           <% @config[:params].each do |name, opts| %>

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

@@ -0,0 +1,62 @@
+<% 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>
+
+    <div class="space-y-2">
+      <% critical_alerts.each do |alert| %>
+        <div class="flex items-center justify-between 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"></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">
+              <%= alert[:data][:cooldown_remaining] %>s remaining
+            </span>
+
+          <% when :budget_breach %>
+            <div class="flex items-center">
+              <span class="w-2 h-2 bg-red-500 rounded-full mr-3"></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.settings_path, class: "text-xs text-red-600 dark:text-red-400 hover:underline font-medium" %>
+
+          <% when :error_spike %>
+            <div class="flex items-center">
+              <span class="w-2 h-2 bg-red-500 rounded-full mr-3 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" %>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,62 @@
+<%# Alerts feed for budget and breaker events %>
+<% if recent_alerts.any? %>
+  <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">Recent Alerts</h3>
+      <span class="text-xs text-gray-500 dark:text-gray-400">
+        Last <%= recent_alerts.size %> events
+      </span>
+    </div>
+
+    <div class="space-y-2 max-h-48 overflow-y-auto">
+      <% recent_alerts.each do |alert| %>
+        <%
+          icon_color = case alert[:type].to_s
+          when /budget/ then "text-amber-500"
+          when /breaker_open/ then "text-red-500"
+          when /breaker_closed/ then "text-green-500"
+          else "text-blue-500"
+          end
+
+          bg_color = case alert[:type].to_s
+          when /budget/ then "bg-amber-50 dark:bg-amber-900/20"
+          when /breaker_open/ then "bg-red-50 dark:bg-red-900/20"
+          when /breaker_closed/ then "bg-green-50 dark:bg-green-900/20"
+          else "bg-blue-50 dark:bg-blue-900/20"
+          end
+
+          icon_path = case alert[:type].to_s
+          when /budget/
+            "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"
+          when /breaker/
+            "M13 10V3L4 14h7v7l9-11h-7z"
+          else
+            "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+          end
+        %>
+        <div class="flex items-start gap-3 p-2 rounded-lg <%= bg_color %>">
+          <svg class="w-4 h-4 mt-0.5 <%= icon_color %> flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="<%= icon_path %>"/>
+          </svg>
+          <div class="flex-1 min-w-0">
+            <p class="text-sm text-gray-700 dark:text-gray-300">
+              <%= alert[:message] || alert[:type].to_s.humanize %>
+            </p>
+            <div class="flex items-center gap-2 mt-0.5">
+              <% if alert[:agent_type] %>
+                <span class="text-xs text-gray-500 dark:text-gray-400">
+                  <%= alert[:agent_type].gsub(/Agent$/, '') %>
+                </span>
+              <% end %>
+              <% if alert[:timestamp] %>
+                <span class="text-xs text-gray-400 dark:text-gray-500">
+                  <%= alert[:timestamp].is_a?(Time) ? time_ago_in_words(alert[:timestamp]) + " ago" : alert[:timestamp] %>
+                </span>
+              <% end %>
+            </div>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,47 @@
+<%# Circuit breaker status strip %>
+<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">Circuit Breakers</h3>
+    <% if open_breakers.any? %>
+      <span class="flex items-center text-xs text-red-600 dark:text-red-400">
+        <span class="w-2 h-2 bg-red-500 rounded-full mr-1 animate-pulse"></span>
+        <%= open_breakers.size %> open
+      </span>
+    <% else %>
+      <span class="flex items-center text-xs text-green-600 dark:text-green-400">
+        <span class="w-2 h-2 bg-green-500 rounded-full mr-1"></span>
+        All healthy
+      </span>
+    <% end %>
+  </div>
+
+  <% if open_breakers.any? %>
+    <div class="flex flex-wrap gap-2">
+      <% open_breakers.each do |breaker| %>
+        <%= link_to ruby_llm_agents.agent_path(breaker[:agent_type]),
+            class: "inline-flex items-center px-3 py-1.5 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-full text-sm hover:bg-red-100 dark:hover:bg-red-900/50 transition-colors" do %>
+          <span class="w-2 h-2 bg-red-500 rounded-full mr-2 animate-pulse"></span>
+          <span class="text-red-700 dark:text-red-300 font-medium">
+            <%= breaker[:agent_type].gsub(/Agent$/, '') %>
+          </span>
+          <span class="text-red-500 dark:text-red-400 mx-1">/</span>
+          <span class="text-red-600 dark:text-red-300 text-xs">
+            <%= breaker[:model_id].split('/').last %>
+          </span>
+          <% if breaker[:cooldown_remaining] && breaker[:cooldown_remaining] > 0 %>
+            <span class="ml-2 text-xs text-red-500 dark:text-red-400 tabular-nums" data-cooldown="<%= breaker[:cooldown_remaining] %>">
+              <%= breaker[:cooldown_remaining] %>s
+            </span>
+          <% end %>
+        <% end %>
+      <% end %>
+    </div>
+  <% else %>
+    <div class="flex items-center justify-center py-2 text-gray-500 dark:text-gray-400">
+      <svg class="w-4 h-4 mr-2 text-green-500" 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>
+      <span class="text-sm">All circuit breakers are closed</span>
+    </div>
+  <% end %>
+</div>