ruby_llm-agents 0.3.4 → 0.3.5

data/app/views/layouts/{rubyllm → ruby_llm}/agents/application.html.erb

@@ -84,7 +84,7 @@
       }
 
       // Initialize on page load
-      document.addEventListener('turbo:load', function() {
+      document.addEventListener('DOMContentLoaded', function() {
         updateClock();
 
         // Handle data-href clickable rows (semantic alternative to onclick)
@@ -96,9 +96,6 @@
           });
         });
       });
-
-      // Also run on DOMContentLoaded for non-Turbo loads
-      document.addEventListener('DOMContentLoaded', updateClock);
     </script>
 
     <!-- Theme Switcher (Alpine.js) -->
@@ -188,34 +185,22 @@
       @apply bg-orange-100 dark:bg-orange-900/50 text-orange-700 dark:text-orange-300;
     }
 
-    /* Turbo loading states */
-    turbo-frame[busy] {
-      position: relative;
-      opacity: 0.6;
-      pointer-events: none;
+    /* Workflow type badges */
+    .badge-pipeline {
+      @apply bg-indigo-100 dark:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300;
     }
-    turbo-frame[busy]::after {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: 24px;
-      height: 24px;
-      margin: -12px 0 0 -12px;
-      border: 2px solid #e5e7eb;
-      border-top-color: #3b82f6;
-      border-radius: 50%;
-      animation: spin 0.8s linear infinite;
+    .badge-parallel {
+      @apply bg-cyan-100 dark:bg-cyan-900/50 text-cyan-700 dark:text-cyan-300;
     }
-    @keyframes spin {
-      to { transform: rotate(360deg); }
+    .badge-router {
+      @apply bg-amber-100 dark:bg-amber-900/50 text-amber-700 dark:text-amber-300;
     }
 
-    /* Form submitting state */
-    form[data-turbo-submitting] {
-      opacity: 0.6;
-      pointer-events: none;
+    /* Alpine.js utilities */
+    [x-cloak] {
+      display: none !important;
     }
+
   </style>
   </head>
 
@@ -250,7 +235,7 @@
             %>
             <nav class="hidden md:flex items-center space-x-1">
               <% nav_items.each do |item| %>
-                <%= render "rubyllm/agents/shared/nav_link", path: item[:path], label: item[:label], icon: item[:icon], mobile: false %>
+                <%= render "ruby_llm/agents/shared/nav_link", path: item[:path], label: item[:label], icon: item[:icon], mobile: false %>
               <% end %>
             </nav>
           </div>
@@ -261,6 +246,57 @@
               dark:text-gray-400
             "
           >
+            <%# Tenant Selector Dropdown %>
+            <% if tenant_filter_enabled? && available_tenants.any? %>
+              <div x-data="{ open: false }" class="relative">
+                <button
+                  @click="open = !open"
+                  @click.outside="open = false"
+                  type="button"
+                  class="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-md border transition-colors
+                         <%= current_tenant_id.present? ?
+                           'bg-blue-50 dark:bg-blue-900/30 border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-300' :
+                           'bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600' %>"
+                >
+                  <svg class="w-3.5 h-3.5" 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>
+                  <span class="hidden sm:inline"><%= current_tenant_id.present? ? current_tenant_id : 'All Tenants' %></span>
+                  <svg class="w-3 h-3" 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>
+                </button>
+
+                <div
+                  x-show="open"
+                  x-cloak
+                  x-transition:enter="transition ease-out duration-100"
+                  x-transition:enter-start="opacity-0 scale-95"
+                  x-transition:enter-end="opacity-100 scale-100"
+                  x-transition:leave="transition ease-in duration-75"
+                  x-transition:leave-start="opacity-100 scale-100"
+                  x-transition:leave-end="opacity-0 scale-95"
+                  class="absolute right-0 mt-1 w-48 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-50 py-1"
+                >
+                  <a
+                    href="<%= url_for(request.query_parameters.except('tenant_id').merge(tenant_id: nil)) %>"
+                    class="block px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 <%= 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300' if current_tenant_id.blank? %>"
+                  >
+                    All Tenants
+                  </a>
+                  <div class="border-t border-gray-100 dark:border-gray-700 my-1"></div>
+                  <% available_tenants.each do |tenant| %>
+                    <a
+                      href="<%= url_for(request.query_parameters.merge(tenant_id: tenant)) %>"
+                      class="block px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 <%= 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300' if tenant == current_tenant_id %>"
+                    >
+                      <%= tenant %>
+                    </a>
+                  <% end %>
+                </div>
+              </div>
+            <% end %>
+
             <span id="live-clock" class="tabular-nums"></span>
 
             <button
@@ -327,12 +363,38 @@
       >
         <nav class="max-w-7xl mx-auto px-4 py-3 space-y-1">
           <% nav_items.each do |item| %>
-            <%= render "rubyllm/agents/shared/nav_link", path: item[:path], label: item[:label], icon: item[:icon], mobile: true %>
+            <%= render "ruby_llm/agents/shared/nav_link", path: item[:path], label: item[:label], icon: item[:icon], mobile: true %>
           <% end %>
         </nav>
       </div>
     </header>
 
+    <%# Tenant Context Badge - shows when viewing specific tenant %>
+    <% if tenant_filter_enabled? && current_tenant_id.present? %>
+      <div class="bg-blue-50 dark:bg-blue-900/20 border-b border-blue-100 dark:border-blue-900/50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2 text-sm text-blue-700 dark:text-blue-300">
+              <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="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>
+              <span>Viewing tenant:</span>
+              <span class="font-semibold"><%= current_tenant_id %></span>
+            </div>
+            <a
+              href="<%= url_for(request.query_parameters.except('tenant_id')) %>"
+              class="flex items-center gap-1 text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200"
+            >
+              <span>Clear filter</span>
+              <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="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </a>
+          </div>
+        </div>
+      </div>
+    <% end %>
+
     <!-- Main content -->
     <main class="max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8 h-full">
       <%= yield %>

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

@@ -0,0 +1,23 @@
+<%
+  type = local_assigns[:type] || "agents"
+  is_workflow = type == "workflows"
+%>
+<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-8 text-center">
+  <svg class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <% if is_workflow %>
+      <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"/>
+    <% else %>
+      <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" />
+    <% end %>
+  </svg>
+  <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-gray-100">
+    No <%= type %> found
+  </h3>
+  <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+    <% if is_workflow %>
+      Create a workflow by subclassing <code class="bg-gray-100 dark:bg-gray-700 dark:text-gray-200 px-1 rounded">Pipeline</code>, <code class="bg-gray-100 dark:bg-gray-700 dark:text-gray-200 px-1 rounded">Parallel</code>, or <code class="bg-gray-100 dark:bg-gray-700 dark:text-gray-200 px-1 rounded">Router</code>
+    <% else %>
+      Create an agent by running <code class="bg-gray-100 dark:bg-gray-700 dark:text-gray-200 px-1 rounded">rails g ruby_llm_agents:agent YourAgentName</code>
+    <% end %>
+  </p>
+</div>

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

@@ -0,0 +1,125 @@
+<%
+  workflow_colors = {
+    "pipeline" => { border: "border-l-indigo-500", icon_bg: "bg-indigo-100 dark:bg-indigo-900/50", icon_text: "text-indigo-600 dark:text-indigo-300" },
+    "parallel" => { border: "border-l-cyan-500", icon_bg: "bg-cyan-100 dark:bg-cyan-900/50", icon_text: "text-cyan-600 dark:text-cyan-300" },
+    "router" => { border: "border-l-amber-500", icon_bg: "bg-amber-100 dark:bg-amber-900/50", icon_text: "text-amber-600 dark:text-amber-300" }
+  }
+  colors = workflow_colors[workflow[:workflow_type]] || { border: "border-l-gray-400", icon_bg: "bg-gray-100", icon_text: "text-gray-600" }
+
+  child_label = case workflow[:workflow_type]
+    when "pipeline" then "steps"
+    when "parallel" then "branches"
+    when "router" then "routes"
+    else "children"
+  end
+%>
+
+<div x-data="{ expanded: false }" class="block bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-md transition-shadow border-l-4 <%= colors[:border] %>">
+  <%= link_to ruby_llm_agents.agent_path(workflow[:name]), class: "block p-4 sm:p-5" do %>
+    <!-- Header Row -->
+    <div class="flex items-center justify-between gap-2">
+      <div class="flex items-center gap-2 min-w-0">
+        <%= render "ruby_llm/agents/shared/workflow_type_badge", workflow_type: workflow[:workflow_type], size: :sm %>
+        <h3 class="font-semibold text-gray-900 dark:text-gray-100 truncate">
+          <%= workflow[:name].gsub(/Workflow$/, '').gsub(/Pipeline$|Parallel$|Router$/, '') %>
+        </h3>
+        <span class="hidden sm:inline text-sm text-gray-500 dark:text-gray-400">v<%= workflow[:version] %></span>
+        <% if workflow[:active] %>
+          <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] 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-1.5 py-0.5 rounded text-[10px] font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">Deleted</span>
+        <% end %>
+      </div>
+      <span class="hidden sm:block text-sm text-gray-500 dark:text-gray-400">
+        <%= workflow[:workflow_children]&.size || 0 %> <%= child_label %>
+      </span>
+    </div>
+
+    <!-- Stats Row -->
+    <div class="mt-2 sm:mt-3 sm:border-t sm:border-gray-100 sm:dark:border-gray-700 sm:pt-3">
+      <% success_rate = workflow[:success_rate] || 0 %>
+      <!-- Mobile: compact inline -->
+      <div class="sm:hidden text-xs text-gray-500 dark:text-gray-400">
+        <%= number_with_delimiter(workflow[:execution_count]) %> runs
+        <span class="mx-1 text-gray-300 dark:text-gray-600">-</span>
+        $<%= number_with_precision(workflow[:total_cost] || 0, precision: 2) %>
+        <span class="mx-1 text-gray-300 dark:text-gray-600">-</span>
+        <span class="<%= success_rate >= 95 ? 'text-green-600 dark:text-green-400' : success_rate >= 80 ? 'text-yellow-600 dark:text-yellow-400' : 'text-red-600 dark:text-red-400' %>">
+          <%= success_rate %>%
+        </span>
+      </div>
+
+      <!-- Desktop: full stats with icons -->
+      <div class="hidden sm:flex items-center justify-between text-sm">
+        <div class="flex items-center space-x-6">
+          <div class="flex items-center text-gray-600 dark:text-gray-300">
+            <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+            </svg>
+            <span><%= number_with_delimiter(workflow[:execution_count]) %> executions</span>
+          </div>
+          <div class="flex items-center text-gray-600 dark:text-gray-300">
+            <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <span>$<%= number_with_precision(workflow[:total_cost] || 0, precision: 4) %></span>
+          </div>
+          <div class="flex items-center">
+            <% if success_rate >= 95 %>
+              <span class="w-2 h-2 rounded-full bg-green-500 mr-1.5"></span>
+              <span class="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 mr-1.5"></span>
+              <span class="text-yellow-600 dark:text-yellow-400"><%= success_rate %>%</span>
+            <% else %>
+              <span class="w-2 h-2 rounded-full bg-red-500 mr-1.5"></span>
+              <span class="text-red-600 dark:text-red-400"><%= success_rate %>%</span>
+            <% end %>
+          </div>
+        </div>
+        <div class="text-gray-400 dark:text-gray-500">
+          <% if workflow[:last_executed] %>
+            <%= time_ago_in_words(workflow[:last_executed]) %> ago
+          <% else %>
+            Never executed
+          <% end %>
+        </div>
+      </div>
+    </div>
+  <% end %>
+
+  <!-- Expandable Child Agents Section -->
+  <% if workflow[:workflow_children].present? && workflow[:workflow_children].any? %>
+    <div class="border-t border-gray-100 dark:border-gray-700 px-4 sm:px-5 py-2">
+      <button type="button" @click.prevent="expanded = !expanded" class="w-full flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
+        <span class="font-medium">
+          <%= child_label.capitalize %> (<%= workflow[:workflow_children].size %>)
+        </span>
+        <svg class="w-4 h-4 transition-transform duration-200" :class="{ 'rotate-180': expanded }" 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>
+      </button>
+
+      <div x-show="expanded" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" class="mt-2 space-y-1">
+        <% workflow[:workflow_children].each_with_index do |child, index| %>
+          <div class="flex items-center gap-2 text-sm py-1.5 px-2 rounded bg-gray-50 dark:bg-gray-900/50">
+            <span class="w-5 h-5 flex items-center justify-center rounded-full <%= colors[:icon_bg] %> text-xs <%= colors[:icon_text] %>">
+              <%= index + 1 %>
+            </span>
+            <span class="font-medium text-gray-700 dark:text-gray-300"><%= child[:name] %></span>
+            <span class="text-gray-400 dark:text-gray-500">-></span>
+            <span class="text-gray-600 dark:text-gray-400 font-mono text-xs"><%= child[:agent] %></span>
+            <% if child[:optional] %>
+              <span class="text-xs text-gray-400 dark:text-gray-500 italic">(optional)</span>
+            <% end %>
+            <% if child[:description].present? %>
+              <span class="text-xs text-gray-400 dark:text-gray-500 truncate max-w-xs" title="<%= child[:description] %>">
+                - <%= child[:description].truncate(30) %>
+              </span>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,93 @@
+<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>
+
+<div x-data="{ activeTab: 'agents', activeSubTab: null }">
+  <!-- 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"
+              :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"
+              :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>
+
+  <!-- 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"
+              :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'"
+              :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'"
+              :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'"
+              :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 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| %>
+          <%= render partial: "ruby_llm/agents/agents/agent", locals: { agent: agent } %>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+
+  <!-- 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 } %>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</div>

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

@@ -1,4 +1,4 @@
-<%= render "rubyllm/agents/shared/breadcrumbs", items: [
+<%= render "ruby_llm/agents/shared/breadcrumbs", items: [
   { label: "Dashboard", path: ruby_llm_agents.root_path },
   { label: "Agents", path: ruby_llm_agents.agents_path },
   { label: @agent_type.gsub(/Agent$/, '') }
@@ -153,14 +153,14 @@
 <% 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-3 lg:grid-cols-6 gap-4 mb-6">
-  <%= render "rubyllm/agents/shared/stat_card",
+  <%= render "ruby_llm/agents/shared/stat_card",
       title: "Executions",
       value: number_with_delimiter(@stats[:count]),
       subtitle: "Today: #{@stats_today[:count]}",
       icon: "M13 10V3L4 14h7v7l9-11h-7z",
       icon_color: "text-blue-500" %>
 
-  <%= render "rubyllm/agents/shared/stat_card",
+  <%= render "ruby_llm/agents/shared/stat_card",
       title: "Success Rate",
       value: "#{success_rate}%",
       subtitle: "Error rate: #{@stats[:error_rate] || 0}%",
@@ -168,27 +168,27 @@
       icon_color: "text-green-500",
       value_color: success_rate_color %>
 
-  <%= render "rubyllm/agents/shared/stat_card",
+  <%= render "ruby_llm/agents/shared/stat_card",
       title: "Total Cost",
       value: "$#{number_with_precision(@stats[:total_cost] || 0, precision: 4)}",
       subtitle: "Avg: $#{number_with_precision(@stats[:avg_cost] || 0, precision: 6)}",
       icon: "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",
       icon_color: "text-amber-500" %>
 
-  <%= render "rubyllm/agents/shared/stat_card",
+  <%= render "ruby_llm/agents/shared/stat_card",
       title: "Total Tokens",
       value: number_with_delimiter(@stats[:total_tokens] || 0),
       subtitle: "Avg: #{number_with_delimiter(@stats[:avg_tokens] || 0)}",
       icon: "M7 20l4-16m2 16l4-16M6 9h14M4 15h14",
       icon_color: "text-indigo-500" %>
 
-  <%= render "rubyllm/agents/shared/stat_card",
+  <%= render "ruby_llm/agents/shared/stat_card",
       title: "Avg Duration",
       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",
+  <%= render "ruby_llm/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",
@@ -284,7 +284,7 @@
 <% end %>
 
 <!-- Version Comparison -->
-<%= render partial: "rubyllm/agents/agents/version_comparison",
+<%= render partial: "ruby_llm/agents/agents/version_comparison",
     locals: { versions: @versions, version_comparison: @version_comparison } %>
 
 <% if @config %>
@@ -341,8 +341,9 @@
 
     <!-- Reliability Configuration -->
     <% retries_config = @config[:retries] || {}
+      fallback_models = Array(@config[:fallback_models]).compact
       has_retries = (retries_config[:max] || 0) > 0
-      has_fallbacks = @config[:fallback_models].present? && @config[:fallback_models].any?
+      has_fallbacks = 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 %>
@@ -446,7 +447,7 @@
 
               <% if has_fallbacks %>
                 <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">
-                  <%= @config[:fallback_models].join(" → ") %>
+                  <%= fallback_models.join(" → ") %>
                 </p>
               <% else %>
                 <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">
@@ -601,6 +602,63 @@
         </div>
       </div>
     <% end %>
+
+    <!-- Available Tools -->
+    <%
+      class_tools = @agent_class.respond_to?(:tools) ? (@agent_class.tools || []) : []
+      has_dynamic_tools = @agent_class.instance_methods(false).include?(:tools)
+    %>
+    <div class="border-t border-gray-100 dark:border-gray-700 pt-4">
+      <p
+        class="
+          text-xs text-gray-500 dark:text-gray-400 uppercase
+          tracking-wider mb-3
+        "
+      >
+        Available Tools
+        <% if class_tools.any? %>
+          <span class="inline-flex items-center ml-2 px-1.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-300">
+            <%= class_tools.size %>
+          </span>
+        <% elsif has_dynamic_tools %>
+          <span class="inline-flex items-center ml-2 px-1.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 dark:bg-purple-900/50 text-purple-800 dark:text-purple-300">
+            Dynamic
+          </span>
+        <% else %>
+          <span class="inline-flex items-center ml-2 px-1.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
+            0
+          </span>
+        <% end %>
+      </p>
+
+      <% if class_tools.any? %>
+        <div class="space-y-2">
+          <% class_tools.each do |tool_class| %>
+            <div class="flex items-center text-sm">
+              <code
+                class="
+                  bg-gray-100 dark:bg-gray-700 dark:text-gray-200 px-2
+                  py-0.5 rounded font-mono
+                "
+              >
+                <%= tool_class.respond_to?(:tool_name) ? tool_class.tool_name : tool_class.name.demodulize %>
+              </code>
+            </div>
+          <% end %>
+        </div>
+      <% elsif has_dynamic_tools %>
+        <p class="text-sm text-purple-600 dark:text-purple-400">
+          This agent configures tools dynamically at runtime based on context.
+        </p>
+        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">
+          Tools vary per execution based on feature flags and configuration.
+        </p>
+      <% else %>
+        <p class="text-sm text-gray-400 dark:text-gray-500 italic">
+          No tools configured for this agent.
+        </p>
+      <% end %>
+    </div>
   </div>
 <% end %>
 
@@ -610,7 +668,7 @@
     Executions
   </h3>
 
-  <%= turbo_frame_tag "executions_table" do %>
+  <div id="executions_table">
     <%
       has_filters = params[:statuses].present? || params[:versions].present? || params[:models].present? || params[:temperatures].present? || params[:days].present?
       selected_statuses = params[:statuses].present? ? (params[:statuses].is_a?(Array) ? params[:statuses] : params[:statuses].split(",")) : []
@@ -635,10 +693,10 @@
       ]
     %>
 
-    <%= form_with url: ruby_llm_agents.agent_path(@agent_type), method: :get, data: { turbo_frame: "executions_table" } do |f| %>
+    <%= form_with url: ruby_llm_agents.agent_path(@agent_type), method: :get, local: true do |f| %>
       <div class="flex flex-wrap items-center gap-3 mb-4 pb-4 border-b border-gray-100 dark:border-gray-700">
         <%# Status Filter (Multi-select) %>
-        <%= render "rubyllm/agents/shared/filter_dropdown",
+        <%= render "ruby_llm/agents/shared/filter_dropdown",
             name: "statuses[]",
             filter_id: "statuses",
             label: "Status",
@@ -648,7 +706,7 @@
 
         <%# Version Filter (Multi-select) %>
         <% if @versions.any? %>
-          <%= render "rubyllm/agents/shared/filter_dropdown",
+          <%= render "ruby_llm/agents/shared/filter_dropdown",
               name: "versions[]",
               filter_id: "versions",
               label: "Version",
@@ -660,7 +718,7 @@
 
         <%# Model Filter (Multi-select) %>
         <% if @models.length > 1 %>
-          <%= render "rubyllm/agents/shared/filter_dropdown",
+          <%= render "ruby_llm/agents/shared/filter_dropdown",
               name: "models[]",
               filter_id: "models",
               label: "Model",
@@ -672,7 +730,7 @@
 
         <%# Temperature Filter (Multi-select) %>
         <% if @temperatures.length > 1 %>
-          <%= render "rubyllm/agents/shared/filter_dropdown",
+          <%= render "ruby_llm/agents/shared/filter_dropdown",
               name: "temperatures[]",
               filter_id: "temperatures",
               label: "Temp",
@@ -683,7 +741,7 @@
         <% end %>
 
         <%# Time Range Filter (Single-select) %>
-        <%= render "rubyllm/agents/shared/select_dropdown",
+        <%= render "ruby_llm/agents/shared/select_dropdown",
             name: "days",
             filter_id: "days",
             options: days_options,
@@ -693,7 +751,6 @@
         <%# Clear Filters %>
         <% if has_filters %>
           <%= link_to ruby_llm_agents.agent_path(@agent_type),
-              data: { turbo_frame: "executions_table" },
               class: "flex items-center gap-1 px-3 py-2 text-sm text-red-500 dark:text-red-400 hover:text-red-600 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-lg transition-colors" do %>
             <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="M6 18L18 6M6 6l12 12"/>
@@ -713,6 +770,6 @@
       </div>
     <% end %>
 
-    <%= render "rubyllm/agents/shared/executions_table", executions: @executions, pagination: @pagination %>
-  <% end %>
+    <%= render "ruby_llm/agents/shared/executions_table", executions: @executions, pagination: @pagination %>
+  </div>
 </div>