ruby_llm-agents 0.4.0 → 1.0.0.beta.1

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

@@ -1,26 +1,60 @@
 <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">
+    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
       <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>
+      <!-- Scrollable Tab Buttons -->
+      <div class="overflow-x-auto -mx-4 px-4 sm:mx-0 sm:px-0">
+        <div class="flex space-x-1 bg-gray-100 dark:bg-gray-700 rounded-lg p-0.5 min-w-max">
+          <button type="button" @click="activeTab = 'agents'"
+                  :class="activeTab === 'agents' ? 'bg-white dark:bg-gray-600 shadow-sm' : 'hover:bg-gray-50 dark:hover:bg-gray-600'"
+                  class="px-2 py-1 text-xs font-medium rounded-md transition-colors text-gray-700 dark:text-gray-200 whitespace-nowrap">
+            <span class="hidden sm:inline">Agents</span>
+            <span class="sm:hidden">🤖</span>
+          </button>
+          <button type="button" @click="activeTab = 'embedders'"
+                  :class="activeTab === 'embedders' ? 'bg-white dark:bg-gray-600 shadow-sm' : 'hover:bg-gray-50 dark:hover:bg-gray-600'"
+                  class="px-2 py-1 text-xs font-medium rounded-md transition-colors text-gray-700 dark:text-gray-200 whitespace-nowrap">
+            <span class="hidden sm:inline">Embedders</span>
+            <span class="sm:hidden">📊</span>
+          </button>
+          <button type="button" @click="activeTab = 'transcribers'"
+                  :class="activeTab === 'transcribers' ? 'bg-white dark:bg-gray-600 shadow-sm' : 'hover:bg-gray-50 dark:hover:bg-gray-600'"
+                  class="px-2 py-1 text-xs font-medium rounded-md transition-colors text-gray-700 dark:text-gray-200 whitespace-nowrap">
+            <span class="hidden sm:inline">Transcribers</span>
+            <span class="sm:hidden">🎤</span>
+          </button>
+          <button type="button" @click="activeTab = 'speakers'"
+                  :class="activeTab === 'speakers' ? 'bg-white dark:bg-gray-600 shadow-sm' : 'hover:bg-gray-50 dark:hover:bg-gray-600'"
+                  class="px-2 py-1 text-xs font-medium rounded-md transition-colors text-gray-700 dark:text-gray-200 whitespace-nowrap">
+            <span class="hidden sm:inline">Speakers</span>
+            <span class="sm:hidden">🔊</span>
+          </button>
+          <button type="button" @click="activeTab = 'image_generators'"
+                  :class="activeTab === 'image_generators' ? 'bg-white dark:bg-gray-600 shadow-sm' : 'hover:bg-gray-50 dark:hover:bg-gray-600'"
+                  class="px-2 py-1 text-xs font-medium rounded-md transition-colors text-gray-700 dark:text-gray-200 whitespace-nowrap">
+            <span class="hidden sm:inline">Image Gen</span>
+            <span class="sm:hidden">🎨</span>
+          </button>
+          <button type="button" @click="activeTab = 'moderators'"
+                  :class="activeTab === 'moderators' ? 'bg-white dark:bg-gray-600 shadow-sm' : 'hover:bg-gray-50 dark:hover:bg-gray-600'"
+                  class="px-2 py-1 text-xs font-medium rounded-md transition-colors text-gray-700 dark:text-gray-200 whitespace-nowrap">
+            <span class="hidden sm:inline">Moderators</span>
+            <span class="sm:hidden">🛡️</span>
+          </button>
+          <button type="button" @click="activeTab = 'workflows'"
+                  :class="activeTab === 'workflows' ? 'bg-white dark:bg-gray-600 shadow-sm' : 'hover:bg-gray-50 dark:hover:bg-gray-600'"
+                  class="px-2 py-1 text-xs font-medium rounded-md transition-colors text-gray-700 dark:text-gray-200 whitespace-nowrap">
+            <span class="hidden sm:inline">Workflows</span>
+            <span class="sm:hidden">⚙️</span>
+          </button>
+        </div>
       </div>
     </div>
   </div>
 
   <!-- Agents Tab -->
   <div x-show="activeTab === 'agents'">
-    <% if agent_stats&.any? %>
+    <% if @agent_stats&.any? %>
       <div class="overflow-x-auto">
         <table class="w-full text-sm">
           <thead>
@@ -32,7 +66,7 @@
             </tr>
           </thead>
           <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
-            <% agent_stats.first(5).each do |agent| %>
+            <% @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] %>">
@@ -62,6 +96,226 @@
     <% end %>
   </div>
 
+  <!-- Embedders Tab -->
+  <div x-show="activeTab === 'embedders'" x-cloak>
+    <% if @embedder_stats&.any? %>
+      <div class="overflow-x-auto">
+        <table class="w-full text-sm">
+          <thead>
+            <tr class="text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+              <th class="px-4 py-2">Embedder</th>
+              <th class="px-4 py-2 text-right">Runs</th>
+              <th class="px-4 py-2 text-right">Cost</th>
+              <th class="px-4 py-2 text-right">Success</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+            <% @embedder_stats.first(5).each do |embedder| %>
+              <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
+                <td class="px-4 py-2">
+                  <span class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate block max-w-[120px]" title="<%= embedder[:agent_type] %>">
+                    <%= embedder[:agent_type].to_s.demodulize %>
+                  </span>
+                </td>
+                <td class="px-4 py-2 text-right text-gray-600 dark:text-gray-300">
+                  <%= number_with_delimiter(embedder[:executions]) %>
+                </td>
+                <td class="px-4 py-2 text-right text-gray-600 dark:text-gray-300">
+                  $<%= number_with_precision(embedder[:total_cost], precision: 2) %>
+                </td>
+                <td class="px-4 py-2 text-right">
+                  <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium <%= embedder[:success_rate] >= 95 ? 'bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300' : embedder[:success_rate] >= 80 ? 'bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300' : 'bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300' %>">
+                    <%= embedder[:success_rate].round %>%
+                  </span>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+    <% else %>
+      <div class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
+        <p class="text-sm">No embedder data yet</p>
+      </div>
+    <% end %>
+  </div>
+
+  <!-- Transcribers Tab -->
+  <div x-show="activeTab === 'transcribers'" x-cloak>
+    <% if @transcriber_stats&.any? %>
+      <div class="overflow-x-auto">
+        <table class="w-full text-sm">
+          <thead>
+            <tr class="text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+              <th class="px-4 py-2">Transcriber</th>
+              <th class="px-4 py-2 text-right">Runs</th>
+              <th class="px-4 py-2 text-right">Cost</th>
+              <th class="px-4 py-2 text-right">Success</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+            <% @transcriber_stats.first(5).each do |transcriber| %>
+              <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
+                <td class="px-4 py-2">
+                  <span class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate block max-w-[120px]" title="<%= transcriber[:agent_type] %>">
+                    <%= transcriber[:agent_type].to_s.demodulize %>
+                  </span>
+                </td>
+                <td class="px-4 py-2 text-right text-gray-600 dark:text-gray-300">
+                  <%= number_with_delimiter(transcriber[:executions]) %>
+                </td>
+                <td class="px-4 py-2 text-right text-gray-600 dark:text-gray-300">
+                  $<%= number_with_precision(transcriber[:total_cost], precision: 2) %>
+                </td>
+                <td class="px-4 py-2 text-right">
+                  <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium <%= transcriber[:success_rate] >= 95 ? 'bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300' : transcriber[:success_rate] >= 80 ? 'bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300' : 'bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300' %>">
+                    <%= transcriber[:success_rate].round %>%
+                  </span>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+    <% else %>
+      <div class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
+        <p class="text-sm">No transcriber data yet</p>
+      </div>
+    <% end %>
+  </div>
+
+  <!-- Speakers Tab -->
+  <div x-show="activeTab === 'speakers'" x-cloak>
+    <% if @speaker_stats&.any? %>
+      <div class="overflow-x-auto">
+        <table class="w-full text-sm">
+          <thead>
+            <tr class="text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+              <th class="px-4 py-2">Speaker</th>
+              <th class="px-4 py-2 text-right">Runs</th>
+              <th class="px-4 py-2 text-right">Cost</th>
+              <th class="px-4 py-2 text-right">Success</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+            <% @speaker_stats.first(5).each do |speaker| %>
+              <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
+                <td class="px-4 py-2">
+                  <span class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate block max-w-[120px]" title="<%= speaker[:agent_type] %>">
+                    <%= speaker[:agent_type].to_s.demodulize %>
+                  </span>
+                </td>
+                <td class="px-4 py-2 text-right text-gray-600 dark:text-gray-300">
+                  <%= number_with_delimiter(speaker[:executions]) %>
+                </td>
+                <td class="px-4 py-2 text-right text-gray-600 dark:text-gray-300">
+                  $<%= number_with_precision(speaker[:total_cost], precision: 2) %>
+                </td>
+                <td class="px-4 py-2 text-right">
+                  <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium <%= speaker[:success_rate] >= 95 ? 'bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300' : speaker[:success_rate] >= 80 ? 'bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300' : 'bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300' %>">
+                    <%= speaker[:success_rate].round %>%
+                  </span>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+    <% else %>
+      <div class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
+        <p class="text-sm">No speaker data yet</p>
+      </div>
+    <% end %>
+  </div>
+
+  <!-- Image Generators Tab -->
+  <div x-show="activeTab === 'image_generators'" x-cloak>
+    <% if @image_generator_stats&.any? %>
+      <div class="overflow-x-auto">
+        <table class="w-full text-sm">
+          <thead>
+            <tr class="text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+              <th class="px-4 py-2">Image Generator</th>
+              <th class="px-4 py-2 text-right">Runs</th>
+              <th class="px-4 py-2 text-right">Cost</th>
+              <th class="px-4 py-2 text-right">Success</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+            <% @image_generator_stats.first(5).each do |generator| %>
+              <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
+                <td class="px-4 py-2">
+                  <span class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate block max-w-[120px]" title="<%= generator[:agent_type] %>">
+                    <%= generator[:agent_type].to_s.demodulize %>
+                  </span>
+                </td>
+                <td class="px-4 py-2 text-right text-gray-600 dark:text-gray-300">
+                  <%= number_with_delimiter(generator[:executions]) %>
+                </td>
+                <td class="px-4 py-2 text-right text-gray-600 dark:text-gray-300">
+                  $<%= number_with_precision(generator[:total_cost], precision: 2) %>
+                </td>
+                <td class="px-4 py-2 text-right">
+                  <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium <%= generator[:success_rate] >= 95 ? 'bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300' : generator[:success_rate] >= 80 ? 'bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300' : 'bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300' %>">
+                    <%= generator[:success_rate].round %>%
+                  </span>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+    <% else %>
+      <div class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
+        <p class="text-sm">No image generator data yet</p>
+      </div>
+    <% end %>
+  </div>
+
+  <!-- Moderators Tab -->
+  <div x-show="activeTab === 'moderators'" x-cloak>
+    <% if @moderator_stats&.any? %>
+      <div class="overflow-x-auto">
+        <table class="w-full text-sm">
+          <thead>
+            <tr class="text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+              <th class="px-4 py-2">Moderator</th>
+              <th class="px-4 py-2 text-right">Runs</th>
+              <th class="px-4 py-2 text-right">Cost</th>
+              <th class="px-4 py-2 text-right">Success</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+            <% @moderator_stats.first(5).each do |moderator| %>
+              <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
+                <td class="px-4 py-2">
+                  <span class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate block max-w-[120px]" title="<%= moderator[:agent_type] %>">
+                    <%= moderator[:agent_type].to_s.demodulize %>
+                  </span>
+                </td>
+                <td class="px-4 py-2 text-right text-gray-600 dark:text-gray-300">
+                  <%= number_with_delimiter(moderator[:executions]) %>
+                </td>
+                <td class="px-4 py-2 text-right text-gray-600 dark:text-gray-300">
+                  $<%= number_with_precision(moderator[:total_cost], precision: 2) %>
+                </td>
+                <td class="px-4 py-2 text-right">
+                  <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium <%= moderator[:success_rate] >= 95 ? 'bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300' : moderator[:success_rate] >= 80 ? 'bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300' : 'bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300' %>">
+                    <%= moderator[:success_rate].round %>%
+                  </span>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+    <% else %>
+      <div class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
+        <p class="text-sm">No moderator data yet</p>
+      </div>
+    <% end %>
+  </div>
+
   <!-- Workflows Tab -->
   <div x-show="activeTab === 'workflows'" x-cloak>
     <% if @workflow_stats&.any? %>

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

@@ -512,6 +512,22 @@
             Retryable
           </span>
         <% end %>
+        <button
+          type="button"
+          data-copy-json="<%= Base64.strict_encode64({
+            error_class: @execution.error_class,
+            error_message: @execution.error_message
+          }.to_json) %>"
+          class="copy-json-btn inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors"
+        >
+          <svg class="w-4 h-4 copy-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
+          </svg>
+          <svg class="w-4 h-4 check-icon hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+          </svg>
+          <span>Copy</span>
+        </button>
       </div>
     </div>
 
@@ -743,6 +759,88 @@
   </div>
 <% end %>
 
+<!-- Conversation Context -->
+<% if @execution.respond_to?(:messages_count) && @execution.messages_count.to_i > 0 %>
+  <%
+    messages_summary = @execution.messages_summary || {}
+    # Handle both string and symbol keys
+    first_message = messages_summary["first"] || messages_summary[:first]
+    last_message = messages_summary["last"] || messages_summary[:last]
+    max_len = RubyLLM::Agents.configuration.messages_summary_max_length || 500
+  %>
+  <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-6 mb-6">
+    <div class="flex items-center gap-2 mb-4">
+      <svg class="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
+      </svg>
+      <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Conversation Context</h3>
+      <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-indigo-100 dark:bg-indigo-900/50 text-indigo-800 dark:text-indigo-300">
+        <%= @execution.messages_count %> message<%= @execution.messages_count == 1 ? '' : 's' %>
+      </span>
+    </div>
+
+    <div class="space-y-4">
+      <% if first_message %>
+        <%
+          first_role = first_message["role"] || first_message[:role] || "unknown"
+          first_content = first_message["content"] || first_message[:content] || ""
+          first_truncated = first_content.length >= max_len
+          role_badge_class = case first_role.to_s
+            when "user" then "bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-300"
+            when "assistant" then "bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-300"
+            when "system" then "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300"
+            else "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300"
+          end
+        %>
+        <div class="border border-gray-100 dark:border-gray-700 rounded-lg p-4">
+          <div class="flex items-center gap-2 mb-2">
+            <span class="text-xs text-gray-500 dark:text-gray-400 font-medium">First Message</span>
+            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium <%= role_badge_class %>">
+              <%= first_role %>
+            </span>
+            <% if first_truncated %>
+              <span class="text-xs text-gray-400 dark:text-gray-500 italic">(truncated)</span>
+            <% end %>
+          </div>
+          <p class="text-sm text-gray-700 dark:text-gray-300 font-mono bg-gray-50 dark:bg-gray-900 rounded-lg p-3 whitespace-pre-wrap break-words"><%= first_content %></p>
+        </div>
+      <% end %>
+
+      <% if last_message %>
+        <%
+          last_role = last_message["role"] || last_message[:role] || "unknown"
+          last_content = last_message["content"] || last_message[:content] || ""
+          last_truncated = last_content.length >= max_len
+          role_badge_class = case last_role.to_s
+            when "user" then "bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-300"
+            when "assistant" then "bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-300"
+            when "system" then "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300"
+            else "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300"
+          end
+        %>
+        <div class="border border-gray-100 dark:border-gray-700 rounded-lg p-4">
+          <div class="flex items-center gap-2 mb-2">
+            <span class="text-xs text-gray-500 dark:text-gray-400 font-medium">Last Message</span>
+            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium <%= role_badge_class %>">
+              <%= last_role %>
+            </span>
+            <% if last_truncated %>
+              <span class="text-xs text-gray-400 dark:text-gray-500 italic">(truncated)</span>
+            <% end %>
+          </div>
+          <p class="text-sm text-gray-700 dark:text-gray-300 font-mono bg-gray-50 dark:bg-gray-900 rounded-lg p-3 whitespace-pre-wrap break-words"><%= last_content %></p>
+        </div>
+      <% end %>
+
+      <% if @execution.messages_count > 2 %>
+        <p class="text-xs text-gray-400 dark:text-gray-500 text-center">
+          + <%= @execution.messages_count - 2 %> more message<%= @execution.messages_count - 2 == 1 ? '' : 's' %> in between
+        </p>
+      <% end %>
+    </div>
+  </div>
+<% end %>
+
 <!-- Diagnostics Panel -->
 <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-6 mb-6">
   <div class="flex items-center justify-between mb-4">

data/app/views/ruby_llm/agents/shared/_agent_type_badge.html.erb

@@ -0,0 +1,93 @@
+<%
+  # Agent type badge with icon and color coding
+  # Usage: render "ruby_llm/agents/shared/agent_type_badge", agent_type: "agent"
+  # Options:
+  #   size: :xs, :sm (default), :md
+  #   show_label: true (default) or false for icon-only mode
+
+  agent_type = local_assigns[:agent_type]
+  size = local_assigns[:size] || :sm
+  show_label = local_assigns.fetch(:show_label, true)
+
+  config = case agent_type.to_s
+    when "agent"
+      {
+        icon: "robot",
+        label: "Agent",
+        bg: "bg-blue-100 dark:bg-blue-900/50",
+        text: "text-blue-700 dark:text-blue-300",
+        icon_char: "🤖"
+      }
+    when "embedder"
+      {
+        icon: "chart",
+        label: "Embedder",
+        bg: "bg-purple-100 dark:bg-purple-900/50",
+        text: "text-purple-700 dark:text-purple-300",
+        icon_char: "📊"
+      }
+    when "transcriber"
+      {
+        icon: "mic",
+        label: "Transcriber",
+        bg: "bg-green-100 dark:bg-green-900/50",
+        text: "text-green-700 dark:text-green-300",
+        icon_char: "🎤"
+      }
+    when "speaker"
+      {
+        icon: "speaker",
+        label: "Speaker",
+        bg: "bg-orange-100 dark:bg-orange-900/50",
+        text: "text-orange-700 dark:text-orange-300",
+        icon_char: "🔊"
+      }
+    when "image_generator"
+      {
+        icon: "palette",
+        label: "Image Gen",
+        bg: "bg-pink-100 dark:bg-pink-900/50",
+        text: "text-pink-700 dark:text-pink-300",
+        icon_char: "🎨"
+      }
+    when "moderator"
+      {
+        icon: "shield",
+        label: "Moderator",
+        bg: "bg-red-100 dark:bg-red-900/50",
+        text: "text-red-700 dark:text-red-300",
+        icon_char: "🛡️"
+      }
+    when "workflow"
+      {
+        icon: "gear",
+        label: "Workflow",
+        bg: "bg-indigo-100 dark:bg-indigo-900/50",
+        text: "text-indigo-700 dark:text-indigo-300",
+        icon_char: "⚙️"
+      }
+    else
+      {
+        icon: "question",
+        label: "Unknown",
+        bg: "bg-gray-100 dark:bg-gray-700",
+        text: "text-gray-700 dark:text-gray-300",
+        icon_char: "?"
+      }
+    end
+
+  size_classes = case size
+    when :xs
+      { badge: "px-1.5 py-0.5", icon: "text-[10px]", text: "text-[10px]" }
+    when :md
+      { badge: "px-2.5 py-1", icon: "text-sm", text: "text-sm" }
+    else # :sm
+      { badge: "px-2 py-0.5", icon: "text-xs", text: "text-xs" }
+    end
+%>
+<span class="inline-flex items-center gap-1 rounded-md font-medium <%= config[:bg] %> <%= config[:text] %> <%= size_classes[:badge] %>">
+  <span class="<%= size_classes[:icon] %>" aria-hidden="true"><%= config[:icon_char] %></span>
+  <% if show_label %>
+    <span class="<%= size_classes[:text] %>"><%= config[:label] %></span>
+  <% end %>
+</span>

data/app/views/ruby_llm/agents/{settings → system_config}/show.html.erb

@@ -7,7 +7,7 @@
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
       </svg>
       <div>
-        <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Global Configuration</h1>
+        <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">System Configuration</h1>
         <p class="text-sm text-gray-500 dark:text-gray-400">Settings configured in <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">config/initializers/ruby_llm_agents.rb</code></p>
       </div>
     </div>