ruby_llm-agents 0.2.4 → 0.3.1

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

@@ -4,32 +4,50 @@ module RubyLLM
   module Agents
     # Service for discovering and listing available agents
     #
-    # Combines two sources:
+    # Combines two sources to ensure complete agent discovery:
     # 1. File system - Classes inheriting from ApplicationAgent in app/agents/
     # 2. Execution history - Agent types that have execution records
     #
-    # This ensures all agents are visible, including:
-    # - Agents that have never been executed
-    # - Deleted agents that still have execution history
+    # This ensures visibility of both current agents and deleted agents
+    # that still have execution history.
     #
+    # @example Getting all agent names
+    #   AgentRegistry.all #=> ["SearchAgent", "SummaryAgent"]
+    #
+    # @example Getting detailed info
+    #   AgentRegistry.all_with_details.each do |agent|
+    #     puts "#{agent[:name]}: #{agent[:execution_count]} executions"
+    #   end
+    #
+    # @api public
     class AgentRegistry
       class << self
-        # Returns all unique agent type names (sorted)
+        # Returns all unique agent type names
+        #
+        # @return [Array<String>] Sorted list of agent class names
         def all
           (file_system_agents + execution_agents).uniq.sort
         end
 
-        # Returns agent class if it exists, nil if only in execution history
+        # Finds an agent class by type name
+        #
+        # @param agent_type [String] The agent class name
+        # @return [Class, nil] The agent class, or nil if not found
         def find(agent_type)
           agent_type.safe_constantize
         end
 
-        # Check if an agent class is currently defined
+        # Checks if an agent class is currently defined
+        #
+        # @param agent_type [String] The agent class name
+        # @return [Boolean] true if the class exists
         def exists?(agent_type)
           find(agent_type).present?
         end
 
-        # Get detailed info about all agents
+        # Returns detailed info about all agents
+        #
+        # @return [Array<Hash>] Agent info hashes with configuration and stats
         def all_with_details
           all.map do |agent_type|
             build_agent_info(agent_type)
@@ -38,7 +56,9 @@ module RubyLLM
 
         private
 
-        # Find agent classes defined in the file system
+        # Finds agent classes from the file system
+        #
+        # @return [Array<String>] Agent class names
         def file_system_agents
           # Ensure all agent classes are loaded
           eager_load_agents!
@@ -51,7 +71,9 @@ module RubyLLM
           []
         end
 
-        # Find agent types from execution history
+        # Finds agent types from execution history
+        #
+        # @return [Array<String>] Agent class names with execution records
         def execution_agents
           Execution.distinct.pluck(:agent_type).compact
         rescue StandardError => e
@@ -59,17 +81,24 @@ module RubyLLM
           []
         end
 
-        # Eager load all agent files to ensure descendants are registered
+        # Eager loads all agent files to register descendants
+        #
+        # @return [void]
         def eager_load_agents!
           agents_path = Rails.root.join("app", "agents")
           return unless agents_path.exist?
 
           Dir.glob(agents_path.join("**", "*.rb")).each do |file|
             require_dependency file
+          rescue LoadError, StandardError => e
+            Rails.logger.error("[RubyLLM::Agents] Failed to load agent file #{file}: #{e.message}")
           end
         end
 
-        # Build detailed info hash for an agent
+        # Builds detailed info hash for an agent
+        #
+        # @param agent_type [String] The agent class name
+        # @return [Hash] Agent info including config and stats
         def build_agent_info(agent_type)
           agent_class = find(agent_type)
           stats = fetch_stats(agent_type)
@@ -95,12 +124,20 @@ module RubyLLM
           }
         end
 
+        # Fetches statistics for an agent
+        #
+        # @param agent_type [String] The agent class name
+        # @return [Hash] Statistics hash
         def fetch_stats(agent_type)
           Execution.stats_for(agent_type, period: :all_time)
         rescue StandardError
           { count: 0, total_cost: 0, total_tokens: 0, avg_duration_ms: 0, success_rate: 0, error_rate: 0 }
         end
 
+        # Gets the timestamp of the last execution for an agent
+        #
+        # @param agent_type [String] The agent class name
+        # @return [Time, nil] Last execution time or nil
         def last_execution_time(agent_type)
           Execution.by_agent(agent_type).order(created_at: :desc).first&.created_at
         rescue StandardError

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

@@ -21,29 +21,169 @@
 
     <!-- Tailwind CSS via CDN -->
     <script src="https://cdn.tailwindcss.com"></script>
+
     <script>
       tailwind.config = {
         darkMode: 'class'
       }
     </script>
 
-    <!-- Chartkick for charts -->
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0"></script>
-
-    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0"></script>
-
+    <!-- Highcharts for charts -->
+    <script src="https://code.highcharts.com/highcharts.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/chartkick@5.0.1"></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>
+
     <!-- Stimulus -->
     <script
       src="https://unpkg.com/@hotwired/stimulus@3.2.2/dist/stimulus.umd.js"
     ></script>
 
-    <!-- Turbo -->
-    <%= javascript_include_tag "turbo", type: "module" rescue nil %>
+    <!-- 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>
 
-    <!-- ActionCable (if available) -->
-    <%= action_cable_meta_tag rescue nil %>
+    <!-- Auto-refresh for dashboard updates -->
+    <script>
+      (function() {
+        // Simple polling for real-time updates (5 second interval)
+        const POLL_INTERVAL = 5000
+        let pollTimer = null
+
+        function startPolling() {
+          if (pollTimer) return
+
+          // Update indicator to show polling is active
+          const indicator = document.getElementById("live-indicator")
+          if (indicator) {
+            indicator.className = "hidden sm:flex items-center text-blue-600 dark:text-blue-400"
+            indicator.innerHTML = '<span class="w-1.5 h-1.5 bg-blue-500 rounded-full mr-1 animate-pulse"></span><span class="hidden sm:inline">Auto</span>'
+          }
+
+          pollTimer = setInterval(() => {
+            // Dashboard page - detected by presence of activity feed
+            if (document.getElementById("activity-feed")) {
+              fetch(window.location.href, {
+                headers: { "Accept": "text/html" }
+              })
+              .then(response => response.text())
+              .then(html => {
+                const parser = new DOMParser()
+                const doc = parser.parseFromString(html, "text/html")
+
+                // Update activity feed
+                const newFeed = doc.getElementById("activity-feed")
+                const currentFeed = document.getElementById("activity-feed")
+                if (newFeed && currentFeed) {
+                  currentFeed.innerHTML = newFeed.innerHTML
+                }
+
+                // Update now strip
+                const newStrip = doc.getElementById("now-strip-values")
+                const currentStrip = document.getElementById("now-strip-values")
+                if (newStrip && currentStrip) {
+                  currentStrip.innerHTML = newStrip.innerHTML
+                }
+
+                // Note: Chart has its own 1-second live update built-in
+
+                // Update action center
+                const newActionCenter = doc.getElementById("action-center")
+                const currentActionCenter = document.getElementById("action-center")
+                if (newActionCenter && currentActionCenter) {
+                  currentActionCenter.outerHTML = newActionCenter.outerHTML
+                } else if (newActionCenter && !currentActionCenter) {
+                  // Insert action center if it appeared
+                  const main = document.querySelector("main")
+                  if (main) main.insertAdjacentHTML("afterbegin", newActionCenter.outerHTML)
+                } else if (!newActionCenter && currentActionCenter) {
+                  // Remove action center if it disappeared
+                  currentActionCenter.remove()
+                }
+              })
+              .catch(err => console.log("[RubyLLM::Agents] Poll error:", err))
+            }
+
+            // Execution show page - detected by presence of execution-detail element
+            const executionDetail = document.getElementById("execution-detail")
+            if (executionDetail) {
+              const currentStatus = executionDetail.dataset.status
+
+              // Only poll if execution is still running
+              if (currentStatus === "running") {
+                fetch(window.location.href, {
+                  headers: { "Accept": "text/html" }
+                })
+                .then(response => response.text())
+                .then(html => {
+                  const parser = new DOMParser()
+                  const doc = parser.parseFromString(html, "text/html")
+
+                  // Update the main content area when status changes
+                  const newContent = doc.getElementById("execution-detail")
+                  if (newContent && newContent.dataset.status !== "running") {
+                    // Execution completed - do a full content update
+                    executionDetail.outerHTML = newContent.outerHTML
+                  }
+                })
+                .catch(err => console.log("[RubyLLM::Agents] Poll error:", err))
+              }
+            }
+          }, POLL_INTERVAL)
+        }
+
+        function stopPolling() {
+          if (pollTimer) {
+            clearInterval(pollTimer)
+            pollTimer = null
+          }
+        }
+
+        // Start polling on page load
+        document.addEventListener("DOMContentLoaded", startPolling)
+
+        // Handle visibility changes - pause when tab is hidden
+        document.addEventListener("visibilitychange", () => {
+          if (document.hidden) {
+            stopPolling()
+          } else {
+            startPolling()
+          }
+        })
+      })()
+    </script>
 
     <!-- Live Clock Script -->
     <script type="module">
@@ -65,10 +205,19 @@
         if (window.rubyLLMAgentsClock) clearInterval(window.rubyLLMAgentsClock);
         updateClock();
         window.rubyLLMAgentsClock = setInterval(updateClock, 1000);
+
+        // 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>
 
-    <!-- Stimulus Connection Controller -->
+    <!-- Stimulus Controllers -->
     <script>
       (function() {
         // Initialize Stimulus immediately (works with Turbo)
@@ -82,63 +231,6 @@
         if (!Stimulus.application) {
           Stimulus.application = Stimulus.Application.start();
 
-          // Polling Controller - simple auto-refresh
-          Stimulus.application.register("connection", class extends Stimulus.Controller {
-            static targets = ["indicator", "dashboardFrame"]
-
-            static values = {
-              pollInterval: { type: Number, default: 4000 }
-            }
-
-            connect() {
-              this.pollTimer = null;
-              this.startPolling();
-            }
-
-            disconnect() {
-              this.stopPolling();
-            }
-
-            startPolling() {
-              if (this.pollTimer) return;
-
-              this.updateIndicator('polling');
-
-              this.pollTimer = setInterval(() => {
-                this.poll();
-              }, this.pollIntervalValue);
-            }
-
-            stopPolling() {
-              if (this.pollTimer) {
-                clearInterval(this.pollTimer);
-                this.pollTimer = null;
-              }
-            }
-
-            poll() {
-              if (this.hasDashboardFrameTarget) {
-                const frame = this.dashboardFrameTarget;
-                if (frame.src) {
-                  frame.reload();
-                } else {
-                  frame.src = window.location.href;
-                }
-              }
-            }
-
-            updateIndicator(status) {
-              if (!this.hasIndicatorTarget) return;
-
-              const indicator = this.indicatorTarget;
-              indicator.innerHTML = `
-                <span class="w-1.5 h-1.5 bg-blue-500 rounded-full mr-1"></span>
-                <span class="hidden sm:inline">Polling</span>
-              `;
-              indicator.className = 'flex items-center text-blue-600';
-            }
-          });
-
           // Theme Controller - handles dark mode switching
           Stimulus.application.register("theme", class extends Stimulus.Controller {
             static targets = ["select"]
@@ -233,21 +325,28 @@
   </style>
   </head>
 
-  <body
-    class="bg-gray-50 dark:bg-gray-900 min-h-screen flex flex-col"
-    data-controller="connection"
-  >
+  <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 h-16 flex items-center">
-      <div class="max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="flex justify-between items-center">
+    <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>
+
+              <span class="font-semibold text-gray-900 dark:text-gray-100">
+                RubyLLM Agents
+              </span>
             <% end %>
 
-            <nav class="flex items-center space-x-1">
+            <!-- Desktop Navigation -->
+            <nav class="hidden md:flex items-center space-x-1">
               <%= link_to ruby_llm_agents.root_path, class: "inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md #{current_page?(ruby_llm_agents.root_path) ? 'bg-gray-200 dark:bg-gray-700 dark:text-gray-100' : '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'}" do %>
                 <svg
                   class="w-4 h-4 mr-1.5"
@@ -298,24 +397,177 @@
                 </svg>
                 Executions
               <% end %>
+
+              <%= link_to ruby_llm_agents.settings_path, class: "inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md #{current_page?(ruby_llm_agents.settings_path) ? 'bg-gray-200 dark:bg-gray-700 dark:text-gray-100' : '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'}" do %>
+                <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="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"
+                  />
+                </svg>
+                Settings
+              <% end %>
             </nav>
           </div>
 
-          <div class="flex items-center space-x-2 text-xs text-gray-500 dark:text-gray-400">
+          <div
+            class="
+              flex items-center space-x-2 text-xs text-gray-500
+              dark:text-gray-400
+            "
+          >
             <span id="live-clock" class="tabular-nums"></span>
-            <span class="text-gray-300 dark:text-gray-600">•</span>
 
             <span
               id="live-indicator"
-              data-connection-target="indicator"
-              class="flex items-center text-gray-400 dark:text-gray-500"
+              class="hidden sm:flex items-center text-blue-600 dark:text-blue-400"
             >
-              <span class="w-1.5 h-1.5 bg-gray-300 dark:bg-gray-600 rounded-full mr-1"></span>
-              <span class="hidden sm:inline">Connecting</span>
+              <span class="w-1.5 h-1.5 bg-blue-500 rounded-full mr-1 animate-pulse"></span>
+              <span class="hidden sm:inline">Auto</span>
             </span>
+
+            <!-- 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">
+          <%= link_to ruby_llm_agents.root_path, "x-on:click": "mobileMenuOpen = false", class: "flex items-center px-3 py-2 text-base font-medium rounded-md #{current_page?(ruby_llm_agents.root_path) ? 'bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100' : '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'}" do %>
+            <svg
+              class="w-5 h-5 mr-3"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <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"
+              />
+            </svg>
+            Dashboard
+          <% end %>
+
+          <%= link_to ruby_llm_agents.agents_path, "x-on:click": "mobileMenuOpen = false", class: "flex items-center px-3 py-2 text-base font-medium rounded-md #{request.path.start_with?(ruby_llm_agents.agents_path) ? 'bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100' : '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'}" do %>
+            <svg
+              class="w-5 h-5 mr-3"
+              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
+          <% end %>
+
+          <%= link_to ruby_llm_agents.executions_path, "x-on:click": "mobileMenuOpen = false", class: "flex items-center px-3 py-2 text-base font-medium rounded-md #{current_page?(ruby_llm_agents.executions_path) ? 'bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100' : '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'}" do %>
+            <svg
+              class="w-5 h-5 mr-3"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <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"
+              />
+            </svg>
+            Executions
+          <% end %>
+
+          <%= link_to ruby_llm_agents.settings_path, "x-on:click": "mobileMenuOpen = false", class: "flex items-center px-3 py-2 text-base font-medium rounded-md #{current_page?(ruby_llm_agents.settings_path) ? 'bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100' : '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'}" do %>
+            <svg
+              class="w-5 h-5 mr-3"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <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"
+              />
+            </svg>
+            Settings
+          <% end %>
+        </nav>
+      </div>
     </header>
 
     <!-- Main content -->
@@ -324,22 +576,36 @@
     </main>
 
     <!-- Footer -->
-    <footer class="border-t bg-white dark:bg-gray-800 dark:border-gray-700 mt-auto" data-controller="theme">
+    <footer
+      class="border-t bg-white dark:bg-gray-800 dark:border-gray-700 mt-auto"
+      data-controller="theme"
+    >
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
         <div class="flex items-center justify-between">
           <div class="flex items-center space-x-2">
-            <label for="theme-select" class="text-sm text-gray-500 dark:text-gray-400">Theme:</label>
+            <label
+              for="theme-select"
+              class="text-sm text-gray-500 dark:text-gray-400"
+            >
+              Theme:
+            </label>
+
             <select
               id="theme-select"
               data-theme-target="select"
               data-action="change->theme#change"
-              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"
+              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">
             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>