ruby_llm-agents 0.3.3 → 0.3.5

data/app/services/ruby_llm/agents/agent_registry.rb

@@ -95,6 +95,28 @@ module RubyLLM
           end
         end
 
+        # Returns only regular agents (non-workflows)
+        #
+        # @return [Array<Hash>] Agent info hashes for non-workflow agents
+        def agents_only
+          all_with_details.reject { |a| a[:is_workflow] }
+        end
+
+        # Returns only workflows
+        #
+        # @return [Array<Hash>] Agent info hashes for workflows only
+        def workflows_only
+          all_with_details.select { |a| a[:is_workflow] }
+        end
+
+        # Returns workflows filtered by type
+        #
+        # @param type [String, Symbol] The workflow type (pipeline, parallel, router)
+        # @return [Array<Hash>] Filtered workflow info hashes
+        def workflows_by_type(type)
+          workflows_only.select { |w| w[:workflow_type] == type.to_s }
+        end
+
         # Builds detailed info hash for an agent
         #
         # @param agent_type [String] The agent class name
@@ -103,17 +125,27 @@ module RubyLLM
           agent_class = find(agent_type)
           stats = fetch_stats(agent_type)
 
+          # Check if this is a workflow class vs a regular agent
+          is_workflow = agent_class&.ancestors&.any? { |a| a.name&.include?("Workflow") }
+
+          # Determine specific workflow type and children
+          workflow_type = is_workflow ? detect_workflow_type(agent_class) : nil
+          workflow_children = is_workflow ? extract_workflow_children(agent_class) : []
+
           {
             name: agent_type,
             class: agent_class,
             active: agent_class.present?,
-            version: agent_class&.version || "N/A",
-            model: agent_class&.model || "N/A",
-            temperature: agent_class&.temperature,
-            timeout: agent_class&.timeout,
-            cache_enabled: agent_class&.cache_enabled? || false,
-            cache_ttl: agent_class&.cache_ttl,
-            params: agent_class&.params || {},
+            is_workflow: is_workflow,
+            workflow_type: workflow_type,
+            workflow_children: workflow_children,
+            version: safe_call(agent_class, :version) || "N/A",
+            model: safe_call(agent_class, :model) || (is_workflow ? "workflow" : "N/A"),
+            temperature: safe_call(agent_class, :temperature),
+            timeout: safe_call(agent_class, :timeout),
+            cache_enabled: safe_call(agent_class, :cache_enabled?) || false,
+            cache_ttl: safe_call(agent_class, :cache_ttl),
+            params: safe_call(agent_class, :params) || {},
             execution_count: stats[:count],
             total_cost: stats[:total_cost],
             total_tokens: stats[:total_tokens],
@@ -124,6 +156,20 @@ module RubyLLM
           }
         end
 
+        # Safely calls a method on a class, returning nil if method doesn't exist
+        #
+        # @param klass [Class, nil] The class to call the method on
+        # @param method_name [Symbol] The method to call
+        # @return [Object, nil] The result or nil
+        def safe_call(klass, method_name)
+          return nil unless klass
+          return nil unless klass.respond_to?(method_name)
+
+          klass.public_send(method_name)
+        rescue StandardError
+          nil
+        end
+
         # Fetches statistics for an agent
         #
         # @param agent_type [String] The agent class name
@@ -143,6 +189,71 @@ module RubyLLM
         rescue StandardError
           nil
         end
+
+        # Detects the specific workflow type from class hierarchy
+        #
+        # @param agent_class [Class, nil] The agent class
+        # @return [String, nil] "pipeline", "parallel", "router", or nil
+        def detect_workflow_type(agent_class)
+          return nil unless agent_class
+
+          ancestors = agent_class.ancestors.map { |a| a.name.to_s }
+
+          if ancestors.include?("RubyLLM::Agents::Workflow::Pipeline")
+            "pipeline"
+          elsif ancestors.include?("RubyLLM::Agents::Workflow::Parallel")
+            "parallel"
+          elsif ancestors.include?("RubyLLM::Agents::Workflow::Router")
+            "router"
+          end
+        end
+
+        # Extracts child agents from workflow DSL configuration
+        #
+        # @param agent_class [Class, nil] The workflow class
+        # @return [Array<Hash>] Array of child info hashes with :name, :agent, :type, :optional keys
+        def extract_workflow_children(agent_class)
+          return [] unless agent_class
+
+          children = []
+
+          if agent_class.respond_to?(:steps) && agent_class.steps.any?
+            # Pipeline workflow - extract steps
+            agent_class.steps.each do |name, config|
+              children << {
+                name: name,
+                agent: config[:agent]&.name,
+                type: "step",
+                optional: config[:continue_on_error] || false
+              }
+            end
+          elsif agent_class.respond_to?(:branches) && agent_class.branches.any?
+            # Parallel workflow - extract branches
+            agent_class.branches.each do |name, config|
+              children << {
+                name: name,
+                agent: config[:agent]&.name,
+                type: "branch",
+                optional: config[:optional] || false
+              }
+            end
+          elsif agent_class.respond_to?(:routes) && agent_class.routes.any?
+            # Router workflow - extract routes
+            agent_class.routes.each do |name, config|
+              children << {
+                name: name,
+                agent: config[:agent]&.name,
+                type: "route",
+                description: config[:description]
+              }
+            end
+          end
+
+          children
+        rescue StandardError => e
+          Rails.logger.error("[RubyLLM::Agents] Error extracting workflow children: #{e.message}")
+          []
+        end
       end
     end
   end

data/app/views/layouts/ruby_llm/agents/application.html.erb

@@ -0,0 +1,430 @@
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>RubyLLM Agents Dashboard</title>
+
+    <!-- Prevent flash of wrong theme - must run before any rendering -->
+    <script>
+      (function() {
+        const preference = localStorage.getItem('ruby_llm_agents_theme') || 'auto';
+        const isDark = preference === 'dark' ||
+          (preference === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+        if (isDark) {
+          document.documentElement.classList.add('dark');
+        }
+      })();
+    </script>
+
+    <!-- Tailwind CSS via CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <script>
+      tailwind.config = {
+        darkMode: 'class'
+      }
+    </script>
+
+    <!-- Highcharts for charts -->
+    <script src="https://code.highcharts.com/highcharts.js"></script>
+
+    <!-- Configure Highcharts defaults -->
+    <script>
+      Highcharts.setOptions({
+        credits: { enabled: false },
+        chart: {
+          backgroundColor: 'transparent',
+          style: { fontFamily: 'inherit' }
+        },
+        title: { text: null },
+        xAxis: {
+          labels: { style: { color: '#9CA3AF' } },
+          lineColor: 'rgba(156, 163, 175, 0.2)',
+          tickColor: 'rgba(156, 163, 175, 0.2)'
+        },
+        yAxis: {
+          labels: { style: { color: '#9CA3AF' } },
+          gridLineColor: 'rgba(156, 163, 175, 0.2)'
+        },
+        legend: {
+          itemStyle: { color: '#9CA3AF' },
+          itemHoverStyle: { color: '#D1D5DB' }
+        },
+        tooltip: {
+          backgroundColor: 'rgba(17, 24, 39, 0.9)',
+          borderColor: 'rgba(75, 85, 99, 0.5)',
+          style: { color: '#F3F4F6' }
+        }
+      });
+    </script>
+
+    <!-- Alpine.js -->
+    <script
+      defer
+      src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.3/dist/cdn.min.js"
+    ></script>
+
+    <style>[x-cloak] { display: none !important; }</style>
+
+    <!-- Clock and clickable rows -->
+    <script type="module">
+      function updateClock() {
+        const clock = document.getElementById('live-clock');
+        if (clock) {
+          const now = new Date();
+          clock.textContent = now.toLocaleTimeString('en-US', {
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: false
+          });
+        }
+      }
+
+      // Initialize on page load
+      document.addEventListener('DOMContentLoaded', function() {
+        updateClock();
+
+        // Handle data-href clickable rows (semantic alternative to onclick)
+        document.querySelectorAll('[data-href]').forEach(function(element) {
+          element.addEventListener('click', function(e) {
+            // Don't navigate if clicking on a link or button inside the row
+            if (e.target.closest('a, button')) return;
+            window.location = element.dataset.href;
+          });
+        });
+      });
+    </script>
+
+    <!-- Theme Switcher (Alpine.js) -->
+    <script>
+      function themeManager() {
+        return {
+          preference: localStorage.getItem('ruby_llm_agents_theme') || 'auto',
+          init() {
+            this.applyTheme();
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+              if (this.preference === 'auto') this.applyTheme();
+            });
+          },
+          setTheme(value) {
+            this.preference = value;
+            localStorage.setItem('ruby_llm_agents_theme', value);
+            this.applyTheme();
+          },
+          applyTheme() {
+            const isDark = this.preference === 'dark' ||
+              (this.preference === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+            document.documentElement.classList.toggle('dark', isDark);
+          }
+        };
+      }
+    </script>
+
+    <style>
+    /* Custom styles for the dashboard */
+
+    /* Standard card components */
+    .card {
+      @apply bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-6 mb-6;
+    }
+    .card-compact {
+      @apply bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-4 mb-4;
+    }
+
+    .stat-card {
+      @apply bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-4 transition-shadow;
+    }
+    .stat-card:hover {
+      @apply shadow-md;
+    }
+    .stat-value {
+      @apply text-2xl font-bold text-gray-900 dark:text-gray-100 mt-2;
+    }
+    @media (min-width: 1024px) {
+      .stat-value {
+        font-size: 1.5rem;
+      }
+    }
+    .stat-label {
+      @apply text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide font-medium;
+    }
+    .chart-card {
+      @apply bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6;
+    }
+    .nav-link {
+      @apply px-4 py-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors;
+    }
+    .nav-link.active {
+      @apply bg-blue-50 dark:bg-blue-900 text-blue-700 dark:text-blue-300;
+    }
+    .badge {
+      @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+    }
+    .badge-running {
+      @apply bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200;
+    }
+    .badge-success {
+      @apply bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200;
+    }
+    .badge-error {
+      @apply bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200;
+    }
+    .badge-timeout {
+      @apply bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200;
+    }
+    .badge-cyan {
+      @apply bg-cyan-100 dark:bg-cyan-900/50 text-cyan-700 dark:text-cyan-300;
+    }
+    .badge-purple {
+      @apply bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300;
+    }
+    .badge-orange {
+      @apply bg-orange-100 dark:bg-orange-900/50 text-orange-700 dark:text-orange-300;
+    }
+
+    /* Workflow type badges */
+    .badge-pipeline {
+      @apply bg-indigo-100 dark:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300;
+    }
+    .badge-parallel {
+      @apply bg-cyan-100 dark:bg-cyan-900/50 text-cyan-700 dark:text-cyan-300;
+    }
+    .badge-router {
+      @apply bg-amber-100 dark:bg-amber-900/50 text-amber-700 dark:text-amber-300;
+    }
+
+    /* Alpine.js utilities */
+    [x-cloak] {
+      display: none !important;
+    }
+
+  </style>
+  </head>
+
+  <body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex flex-col">
+    <!-- Header -->
+    <header
+      class="
+        bg-white dark:bg-gray-800 border-b border-gray-200
+        dark:border-gray-700
+      "
+      x-data="{ mobileMenuOpen: false }"
+    >
+      <div class="max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center">
+        <div class="flex justify-between items-center w-full">
+          <div class="flex items-center space-x-8">
+            <%= link_to ruby_llm_agents.root_path, class: "flex items-center space-x-2" do %>
+              <span class="text-lg">🤖</span>
+
+              <span class="font-semibold text-gray-900 dark:text-gray-100">
+                RubyLLM Agents
+              </span>
+            <% end %>
+
+            <!-- Desktop Navigation -->
+            <%
+              nav_items = [
+                { path: ruby_llm_agents.root_path, label: "Dashboard", icon: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />' },
+                { path: ruby_llm_agents.agents_path, label: "Agents", icon: '<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" />' },
+                { path: ruby_llm_agents.executions_path, label: "Executions", icon: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />' },
+                { path: ruby_llm_agents.settings_path, label: "Settings", icon: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />' }
+              ]
+            %>
+            <nav class="hidden md:flex items-center space-x-1">
+              <% nav_items.each do |item| %>
+                <%= render "ruby_llm/agents/shared/nav_link", path: item[:path], label: item[:label], icon: item[:icon], mobile: false %>
+              <% end %>
+            </nav>
+          </div>
+
+          <div
+            class="
+              flex items-center space-x-2 text-xs text-gray-500
+              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
+              id="refresh-button"
+              onclick="window.location.reload()"
+              title="Refresh page"
+              class="p-1.5 rounded-md 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 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 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+              </svg>
+            </button>
+
+            <!-- Mobile menu button -->
+            <button
+              type="button"
+              @click="mobileMenuOpen = !mobileMenuOpen"
+              :aria-expanded="mobileMenuOpen"
+              aria-controls="mobile-menu"
+              class="
+                md:hidden inline-flex items-center justify-center p-2
+                rounded-md text-gray-500 dark:text-gray-400
+                hover:text-gray-900 dark:hover:text-gray-100
+                hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none
+                focus:ring-2 focus:ring-inset focus:ring-blue-500
+              "
+            >
+              <span class="sr-only">Open main menu</span>
+
+              <svg
+                class="w-5 h-5"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M4 6h16M4 12h16M4 18h16"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Mobile Navigation Menu -->
+      <div
+        id="mobile-menu"
+        x-show="mobileMenuOpen"
+        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"
+        x-transition:leave="transition ease-in duration-150"
+        x-transition:leave-start="opacity-100 translate-y-0"
+        x-transition:leave-end="opacity-0 -translate-y-1"
+        @click.outside="mobileMenuOpen = false"
+        class="
+          md:hidden border-t border-gray-200 dark:border-gray-700 bg-white
+          dark:bg-gray-800
+        "
+      >
+        <nav class="max-w-7xl mx-auto px-4 py-3 space-y-1">
+          <% nav_items.each do |item| %>
+            <%= 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 %>
+    </main>
+
+    <!-- Footer -->
+    <footer
+      class="border-t bg-white dark:bg-gray-800 dark:border-gray-700 mt-auto"
+      x-data="themeManager()"
+    >
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+        <div class="flex flex-col sm:flex-row items-center sm:justify-between gap-3 sm:gap-0">
+          <div class="flex items-center space-x-2">
+            <label for="theme-select" class="text-sm text-gray-500 dark:text-gray-400">Theme:</label>
+            <select
+              id="theme-select"
+              x-model="preference"
+              @change="setTheme($event.target.value)"
+              class="text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 py-1 px-2"
+            >
+              <option value="light">Light</option>
+              <option value="dark">Dark</option>
+              <option value="auto">Auto</option>
+            </select>
+          </div>
+          <p class="text-sm text-gray-500 dark:text-gray-400 text-center">
+            Powered by <a href="https://github.com/adham90/ruby_llm-agents" class="text-blue-600 dark:text-blue-400 hover:underline">ruby_llm-agents</a>
+          </p>
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>

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>