ruby_llm-agents 1.0.0 → 1.1.0

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

@@ -1,14 +1,34 @@
 <div class="mb-6">
-  <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Agents & Workflows</h1>
-  <p class="text-gray-500 dark:text-gray-400 mt-1">All available agents and workflows with execution statistics</p>
+  <div class="flex items-center gap-2">
+    <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Agents</h1>
+    <%= render "ruby_llm/agents/shared/doc_link" %>
+  </div>
+  <p class="text-gray-500 dark:text-gray-400 mt-1">All available agents with execution statistics</p>
 </div>
 
+<%
+  audio_count = @agents_by_type[:speaker].size + @agents_by_type[:transcriber].size
+%>
 <div x-data="{
-  activeTab: '<%= params[:tab].presence || 'agents' %>',
   activeSubTab: <%= params[:subtab].present? ? "'#{params[:subtab]}'" : 'null' %>,
+  counts: {
+    all: <%= @agent_count %>,
+    agent: <%= @agents_by_type[:agent].size %>,
+    embedder: <%= @agents_by_type[:embedder].size %>,
+    moderator: <%= @agents_by_type[:moderator].size %>,
+    speaker: <%= @agents_by_type[:speaker].size %>,
+    transcriber: <%= @agents_by_type[:transcriber].size %>,
+    audio: <%= audio_count %>,
+    image_generator: <%= @agents_by_type[:image_generator].size %>,
+    deleted: <%= @deleted_count %>
+  },
+  get currentCount() {
+    if (this.activeSubTab === null) return this.counts.all;
+    if (this.activeSubTab === 'audio') return this.counts.audio;
+    return this.counts[this.activeSubTab] || 0;
+  },
   updateUrl() {
     const url = new URL(window.location);
-    url.searchParams.set('tab', this.activeTab);
     if (this.activeSubTab) {
       url.searchParams.set('subtab', this.activeSubTab);
     } else {
@@ -17,41 +37,8 @@
     history.replaceState({}, '', url);
   }
 }">
-  <!-- Tab Navigation -->
-  <div class="border-b border-gray-200 dark:border-gray-700 mb-6">
-    <nav class="-mb-px flex space-x-6" aria-label="Tabs">
-      <!-- Agents Tab -->
-      <button type="button" @click="activeTab = 'agents'; activeSubTab = null; updateUrl()"
-              :class="activeTab === 'agents' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300'"
-              class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm flex items-center gap-2 transition-colors">
-        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-        </svg>
-        Agents
-        <span class="inline-flex items-center justify-center px-2 py-0.5 rounded-full text-xs font-medium"
-              :class="activeTab === 'agents' ? 'bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-300' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'">
-          <%= @agent_count %>
-        </span>
-      </button>
-
-      <!-- Workflows Tab -->
-      <button type="button" @click="activeTab = 'workflows'; activeSubTab = null; updateUrl()"
-              :class="activeTab === 'workflows' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300'"
-              class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm flex items-center gap-2 transition-colors">
-        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 8a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zm12 0a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>
-        </svg>
-        Workflows
-        <span class="inline-flex items-center justify-center px-2 py-0.5 rounded-full text-xs font-medium"
-              :class="activeTab === 'workflows' ? 'bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-300' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'">
-          <%= @workflow_count %>
-        </span>
-      </button>
-    </nav>
-  </div>
-
   <!-- Agent Sub-tabs -->
-  <div x-show="activeTab === 'agents'" x-cloak class="mb-4">
+  <div class="mb-4">
     <div class="flex flex-wrap gap-2">
       <button type="button" @click="activeSubTab = null; updateUrl()"
               :class="activeSubTab === null ? 'bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'"
@@ -73,7 +60,6 @@
               class="px-3 py-1.5 rounded-md text-sm font-medium transition-colors">
         Moderators (<%= @agents_by_type[:moderator].size %>)
       </button>
-      <% audio_count = @agents_by_type[:speaker].size + @agents_by_type[:transcriber].size %>
       <% if audio_count > 0 %>
         <button type="button" @click="activeSubTab = 'audio'; updateUrl()"
                 :class="activeSubTab === 'audio' ? 'bg-pink-600 text-white' : 'bg-pink-100 dark:bg-pink-900/50 text-pink-700 dark:text-pink-300 hover:bg-pink-200 dark:hover:bg-pink-800'"
@@ -88,71 +74,256 @@
           Image Generators (<%= @agents_by_type[:image_generator].size %>)
         </button>
       <% end %>
+      <% if @deleted_count > 0 %>
+        <button type="button" @click="activeSubTab = 'deleted'; updateUrl()"
+                :class="activeSubTab === 'deleted' ? 'bg-gray-600 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'"
+                class="px-3 py-1.5 rounded-md text-sm font-medium transition-colors">
+          Deleted (<%= @deleted_count %>)
+        </button>
+      <% end %>
     </div>
   </div>
 
-  <!-- Workflow Sub-tabs -->
-  <div x-show="activeTab === 'workflows'" x-cloak class="mb-4">
-    <div class="flex flex-wrap gap-2">
-      <button type="button" @click="activeSubTab = null; updateUrl()"
-              :class="activeSubTab === null ? 'bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'"
-              class="px-3 py-1.5 rounded-md text-sm font-medium transition-colors">
-        All (<%= @workflow_count %>)
-      </button>
-      <button type="button" @click="activeSubTab = 'pipeline'; updateUrl()"
-              :class="activeSubTab === 'pipeline' ? 'bg-indigo-600 text-white' : 'bg-indigo-100 dark:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300 hover:bg-indigo-200 dark:hover:bg-indigo-800'"
-              class="px-3 py-1.5 rounded-md text-sm font-medium transition-colors inline-flex items-center gap-1.5">
-        <span aria-hidden="true">-></span> Pipeline (<%= @workflows_by_type[:pipeline].size %>)
-      </button>
-      <button type="button" @click="activeSubTab = 'parallel'; updateUrl()"
-              :class="activeSubTab === 'parallel' ? 'bg-cyan-600 text-white' : 'bg-cyan-100 dark:bg-cyan-900/50 text-cyan-700 dark:text-cyan-300 hover:bg-cyan-200 dark:hover:bg-cyan-800'"
-              class="px-3 py-1.5 rounded-md text-sm font-medium transition-colors inline-flex items-center gap-1.5">
-        <span aria-hidden="true">//</span> Parallel (<%= @workflows_by_type[:parallel].size %>)
-      </button>
-      <button type="button" @click="activeSubTab = 'router'; updateUrl()"
-              :class="activeSubTab === 'router' ? 'bg-amber-600 text-white' : 'bg-amber-100 dark:bg-amber-900/50 text-amber-700 dark:text-amber-300 hover:bg-amber-200 dark:hover:bg-amber-800'"
-              class="px-3 py-1.5 rounded-md text-sm font-medium transition-colors inline-flex items-center gap-1.5">
-        <span aria-hidden="true">&lt;&gt;</span> Router (<%= @workflows_by_type[:router].size %>)
-      </button>
-    </div>
-  </div>
+  <!-- Agents Table -->
+  <% if @agents.empty? && @deleted_agents.empty? %>
+    <%= render "ruby_llm/agents/agents/empty_state", type: "agents" %>
+  <% else %>
+    <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
+      <div class="overflow-x-auto">
+        <table class="w-full divide-y divide-gray-200 dark:divide-gray-700">
+          <thead class="bg-gray-50 dark:bg-gray-900">
+            <tr>
+              <%= render "ruby_llm/agents/agents/sortable_header",
+                  column: "name", label: "Name",
+                  current_sort: @sort_params[:column], current_direction: @sort_params[:direction] %>
 
-  <!-- Agents Content -->
-  <div x-show="activeTab === 'agents'">
-    <% if @agents.empty? %>
-      <%= render "ruby_llm/agents/agents/empty_state", type: "agents" %>
-    <% else %>
-      <div class="space-y-3 sm:space-y-4">
-        <% @agents.each do |agent| %>
-          <%
-            # Determine if this agent should be shown based on sub-tab
-            # 'audio' sub-tab shows both speakers and transcribers
-            show_condition = if agent[:agent_type] == 'speaker' || agent[:agent_type] == 'transcriber'
-              "activeSubTab === null || activeSubTab === 'audio' || activeSubTab === '#{agent[:agent_type]}'"
-            else
-              "activeSubTab === null || activeSubTab === '#{agent[:agent_type]}'"
-            end
-          %>
-          <div x-show="<%= show_condition %>">
-            <%= render partial: "ruby_llm/agents/agents/agent", locals: { agent: agent, current_tab: params[:tab] || 'agents', current_subtab: params[:subtab] } %>
-          </div>
-        <% end %>
-      </div>
-    <% end %>
-  </div>
+              <%= render "ruby_llm/agents/agents/sortable_header",
+                  column: "agent_type", label: "Type",
+                  current_sort: @sort_params[:column], current_direction: @sort_params[:direction] %>
+
+              <th scope="col" class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                Status
+              </th>
+
+              <%= render "ruby_llm/agents/agents/sortable_header",
+                  column: "model", label: "Model",
+                  current_sort: @sort_params[:column], current_direction: @sort_params[:direction],
+                  th_class: "hidden lg:table-cell" %>
 
-  <!-- Workflows Content -->
-  <div x-show="activeTab === 'workflows'" x-cloak>
-    <% if @workflows.empty? %>
-      <%= render "ruby_llm/agents/agents/empty_state", type: "workflows" %>
-    <% else %>
-      <div class="space-y-3 sm:space-y-4">
-        <% @workflows.each do |workflow| %>
-          <div x-show="activeSubTab === null || activeSubTab === '<%= workflow[:workflow_type] %>'">
-            <%= render partial: "ruby_llm/agents/agents/workflow", locals: { workflow: workflow, current_tab: params[:tab] || 'workflows', current_subtab: params[:subtab] } %>
-          </div>
-        <% end %>
+              <%= render "ruby_llm/agents/agents/sortable_header",
+                  column: "execution_count", label: "Executions",
+                  current_sort: @sort_params[:column], current_direction: @sort_params[:direction] %>
+
+              <%= render "ruby_llm/agents/agents/sortable_header",
+                  column: "total_cost", label: "Cost",
+                  current_sort: @sort_params[:column], current_direction: @sort_params[:direction],
+                  th_class: "hidden md:table-cell" %>
+
+              <%= render "ruby_llm/agents/agents/sortable_header",
+                  column: "success_rate", label: "Success",
+                  current_sort: @sort_params[:column], current_direction: @sort_params[:direction] %>
+
+              <%= render "ruby_llm/agents/agents/sortable_header",
+                  column: "last_executed", label: "Last Run",
+                  current_sort: @sort_params[:column], current_direction: @sort_params[:direction] %>
+            </tr>
+          </thead>
+
+          <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-100/50 dark:divide-gray-700/50">
+            <% @agents.each_with_index do |agent, index| %>
+              <%
+                # Determine if this agent should be shown based on sub-tab (exclude deleted tab)
+                show_condition = if agent[:agent_type] == 'speaker' || agent[:agent_type] == 'transcriber'
+                  "activeSubTab !== 'deleted' && (activeSubTab === null || activeSubTab === 'audio' || activeSubTab === '#{agent[:agent_type]}')"
+                else
+                  "activeSubTab !== 'deleted' && (activeSubTab === null || activeSubTab === '#{agent[:agent_type]}')"
+                end
+                row_bg = index.even? ? '' : 'bg-gray-50/50 dark:bg-gray-900/30'
+                success_rate = agent[:success_rate] || 0
+              %>
+              <tr
+                x-show="<%= show_condition %>"
+                class="<%= row_bg %> hover:bg-blue-50/50 dark:hover:bg-blue-900/20 transition-colors cursor-pointer"
+                onclick="window.location='<%= ruby_llm_agents.agent_path(ERB::Util.url_encode(agent[:name]), subtab: params[:subtab]) %>'"
+              >
+                <!-- Name -->
+                <td class="px-4 py-3">
+                  <div class="flex items-center gap-2">
+                    <span class="text-sm font-medium text-gray-900 dark:text-gray-100">
+                      <%= agent[:name].split('::').last.gsub(/Agent$/, '') %>
+                    </span>
+                    <span class="hidden lg:inline text-xs text-gray-400 dark:text-gray-500">v<%= agent[:version] %></span>
+                  </div>
+                  <% if agent[:description].present? %>
+                    <p class="text-xs text-gray-500 dark:text-gray-400 truncate max-w-64 mt-0.5" title="<%= agent[:description] %>">
+                      <%= agent[:description] %>
+                    </p>
+                  <% end %>
+                </td>
+
+                <!-- Type -->
+                <td class="px-4 py-3 whitespace-nowrap">
+                  <span class="text-sm text-gray-600 dark:text-gray-400">
+                    <%= agent[:agent_type]&.titleize || 'Agent' %>
+                  </span>
+                </td>
+
+                <!-- Status -->
+                <td class="px-4 py-3 whitespace-nowrap">
+                  <% if agent[:active] %>
+                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-300">
+                      Active
+                    </span>
+                  <% else %>
+                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
+                      Deleted
+                    </span>
+                  <% end %>
+                </td>
+
+                <!-- Model -->
+                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 hidden lg:table-cell">
+                  <span title="<%= agent[:model] %>">
+                    <%= agent[:model]&.split("/")&.last || agent[:model] || "-" %>
+                  </span>
+                </td>
+
+                <!-- Executions -->
+                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 font-mono">
+                  <%= number_with_delimiter(agent[:execution_count] || 0) %>
+                </td>
+
+                <!-- Cost -->
+                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 font-mono hidden md:table-cell">
+                  $<%= number_with_precision(agent[:total_cost] || 0, precision: 4) %>
+                </td>
+
+                <!-- Success Rate -->
+                <td class="px-4 py-3 whitespace-nowrap">
+                  <div class="flex items-center gap-1.5">
+                    <% if success_rate >= 95 %>
+                      <span class="w-2 h-2 rounded-full bg-green-500"></span>
+                      <span class="text-sm text-green-600 dark:text-green-400"><%= success_rate %>%</span>
+                    <% elsif success_rate >= 80 %>
+                      <span class="w-2 h-2 rounded-full bg-yellow-500"></span>
+                      <span class="text-sm text-yellow-600 dark:text-yellow-400"><%= success_rate %>%</span>
+                    <% else %>
+                      <span class="w-2 h-2 rounded-full bg-red-500"></span>
+                      <span class="text-sm text-red-600 dark:text-red-400"><%= success_rate %>%</span>
+                    <% end %>
+                  </div>
+                </td>
+
+                <!-- Last Executed -->
+                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
+                  <% if agent[:last_executed] %>
+                    <%= time_ago_in_words(agent[:last_executed]) %> ago
+                  <% else %>
+                    <span class="text-gray-400 dark:text-gray-500">Never</span>
+                  <% end %>
+                </td>
+              </tr>
+            <% end %>
+
+            <!-- Deleted Agents -->
+            <% @deleted_agents.each_with_index do |agent, index| %>
+              <%
+                row_bg = index.even? ? '' : 'bg-gray-50/50 dark:bg-gray-900/30'
+                success_rate = agent[:success_rate] || 0
+              %>
+              <tr
+                x-show="activeSubTab === 'deleted'"
+                class="<%= row_bg %> hover:bg-blue-50/50 dark:hover:bg-blue-900/20 transition-colors cursor-pointer"
+                onclick="window.location='<%= ruby_llm_agents.agent_path(ERB::Util.url_encode(agent[:name]), subtab: params[:subtab]) %>'"
+              >
+                <!-- Name -->
+                <td class="px-4 py-3">
+                  <div class="flex items-center gap-2">
+                    <span class="text-sm font-medium text-gray-900 dark:text-gray-100">
+                      <%= agent[:name].split('::').last.gsub(/Agent$/, '') %>
+                    </span>
+                    <span class="hidden lg:inline text-xs text-gray-400 dark:text-gray-500">v<%= agent[:version] %></span>
+                  </div>
+                  <% if agent[:description].present? %>
+                    <p class="text-xs text-gray-500 dark:text-gray-400 truncate max-w-48 mt-0.5" title="<%= agent[:description] %>">
+                      <%= agent[:description] %>
+                    </p>
+                  <% end %>
+                </td>
+
+                <!-- Type -->
+                <td class="px-4 py-3 whitespace-nowrap">
+                  <span class="text-sm text-gray-600 dark:text-gray-400">
+                    <%= agent[:agent_type]&.titleize || 'Agent' %>
+                  </span>
+                </td>
+
+                <!-- Status -->
+                <td class="px-4 py-3 whitespace-nowrap">
+                  <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
+                    Deleted
+                  </span>
+                </td>
+
+                <!-- Model -->
+                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 hidden lg:table-cell">
+                  <span title="<%= agent[:model] %>">
+                    <%= agent[:model]&.split("/")&.last || agent[:model] || "-" %>
+                  </span>
+                </td>
+
+                <!-- Executions -->
+                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 font-mono">
+                  <%= number_with_delimiter(agent[:execution_count] || 0) %>
+                </td>
+
+                <!-- Cost -->
+                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 font-mono hidden md:table-cell">
+                  $<%= number_with_precision(agent[:total_cost] || 0, precision: 4) %>
+                </td>
+
+                <!-- Success Rate -->
+                <td class="px-4 py-3 whitespace-nowrap">
+                  <div class="flex items-center gap-1.5">
+                    <% if success_rate >= 95 %>
+                      <span class="w-2 h-2 rounded-full bg-green-500"></span>
+                      <span class="text-sm text-green-600 dark:text-green-400"><%= success_rate %>%</span>
+                    <% elsif success_rate >= 80 %>
+                      <span class="w-2 h-2 rounded-full bg-yellow-500"></span>
+                      <span class="text-sm text-yellow-600 dark:text-yellow-400"><%= success_rate %>%</span>
+                    <% else %>
+                      <span class="w-2 h-2 rounded-full bg-red-500"></span>
+                      <span class="text-sm text-red-600 dark:text-red-400"><%= success_rate %>%</span>
+                    <% end %>
+                  </div>
+                </td>
+
+                <!-- Last Executed -->
+                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
+                  <% if agent[:last_executed] %>
+                    <%= time_ago_in_words(agent[:last_executed]) %> ago
+                  <% else %>
+                    <span class="text-gray-400 dark:text-gray-500">Never</span>
+                  <% end %>
+                </td>
+              </tr>
+            <% end %>
+
+            <!-- Empty State -->
+            <tr x-show="currentCount === 0" x-cloak>
+              <td colspan="8" class="px-6 py-12 text-center">
+                <div class="text-gray-400 dark:text-gray-500">
+                  <svg class="mx-auto h-12 w-12 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                  </svg>
+                  <p class="text-lg font-medium text-gray-500 dark:text-gray-400">No agents in this category</p>
+                  <p class="text-sm mt-1">Try selecting a different filter</p>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
-    <% end %>
-  </div>
+    </div>
+  <% end %>
 </div>

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

@@ -12,6 +12,7 @@
         <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">
           <%= @agent_type.gsub(/Agent$/, '') %>
         </h1>
+        <%= render "ruby_llm/agents/shared/doc_link" %>
 
         <% if @agent_active %>
           <span

data/app/views/ruby_llm/agents/alert_mailer/alert_notification.html.erb

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title><%= @title %></title>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+      line-height: 1.6;
+      color: #333;
+      max-width: 600px;
+      margin: 0 auto;
+      padding: 20px;
+    }
+    .header {
+      border-left: 4px solid <%= @color %>;
+      padding-left: 16px;
+      margin-bottom: 24px;
+    }
+    .title {
+      font-size: 24px;
+      font-weight: 600;
+      margin: 0 0 8px 0;
+    }
+    .severity {
+      display: inline-block;
+      padding: 4px 12px;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 600;
+      text-transform: uppercase;
+      color: white;
+      background-color: <%= @color %>;
+    }
+    .timestamp {
+      color: #666;
+      font-size: 14px;
+      margin-top: 8px;
+    }
+    .details {
+      background-color: #f8f9fa;
+      border-radius: 8px;
+      padding: 16px;
+      margin-top: 24px;
+    }
+    .details-title {
+      font-size: 14px;
+      font-weight: 600;
+      text-transform: uppercase;
+      color: #666;
+      margin: 0 0 12px 0;
+    }
+    .detail-row {
+      display: flex;
+      padding: 8px 0;
+      border-bottom: 1px solid #e9ecef;
+    }
+    .detail-row:last-child {
+      border-bottom: none;
+    }
+    .detail-key {
+      font-weight: 500;
+      color: #495057;
+      min-width: 140px;
+    }
+    .detail-value {
+      color: #212529;
+      word-break: break-word;
+    }
+    .footer {
+      margin-top: 32px;
+      padding-top: 16px;
+      border-top: 1px solid #e9ecef;
+      font-size: 12px;
+      color: #666;
+    }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <h1 class="title"><%= @title %></h1>
+    <span class="severity"><%= @severity %></span>
+    <div class="timestamp">
+      <%= @timestamp.strftime("%B %d, %Y at %I:%M %p %Z") %>
+    </div>
+  </div>
+
+  <% if @payload.present? %>
+    <div class="details">
+      <h2 class="details-title">Event Details</h2>
+      <% @payload.except(:event).each do |key, value| %>
+        <div class="detail-row">
+          <div class="detail-key"><%= key.to_s.titleize %></div>
+          <div class="detail-value"><%= value.is_a?(Hash) ? value.to_json : value %></div>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+
+  <div class="footer">
+    This alert was sent by RubyLLM::Agents.
+    <br>
+    Event type: <code><%= @event %></code>
+  </div>
+</body>
+</html>

data/app/views/ruby_llm/agents/alert_mailer/alert_notification.text.erb

@@ -0,0 +1,18 @@
+RubyLLM::Agents Alert
+=====================
+
+<%= @title %>
+Severity: <%= @severity %>
+Time: <%= @timestamp.strftime("%B %d, %Y at %I:%M %p %Z") %>
+
+<% if @payload.present? %>
+Event Details
+-------------
+<% @payload.except(:event).each do |key, value| %>
+<%= key.to_s.titleize %>: <%= value.is_a?(Hash) ? value.to_json : value %>
+<% end %>
+<% end %>
+
+---
+This alert was sent by RubyLLM::Agents.
+Event type: <%= @event %>

data/app/views/ruby_llm/agents/api_configurations/show.html.erb

@@ -13,7 +13,10 @@
         </svg>
       </div>
       <div>
-        <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">API Configuration</h1>
+        <div class="flex items-center gap-2">
+          <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">API Configuration</h1>
+          <%= render "ruby_llm/agents/shared/doc_link" %>
+        </div>
         <p class="text-sm text-gray-500 dark:text-gray-400">
           Manage API keys and connection settings for LLM providers
         </p>