ruby_llm-agents 0.3.3 → 0.3.4

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

@@ -30,7 +30,6 @@
 
     <!-- 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>
@@ -62,11 +61,6 @@
       });
     </script>
 
-    <!-- Stimulus -->
-    <script
-      src="https://unpkg.com/@hotwired/stimulus@3.2.2/dist/stimulus.umd.js"
-    ></script>
-
     <!-- Alpine.js -->
     <script
       defer
@@ -75,117 +69,7 @@
 
     <style>[x-cloak] { display: none !important; }</style>
 
-    <!-- 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 -->
+    <!-- Clock and clickable rows -->
     <script type="module">
       function updateClock() {
         const clock = document.getElementById('live-clock');
@@ -194,17 +78,14 @@
           clock.textContent = now.toLocaleTimeString('en-US', {
             hour: '2-digit',
             minute: '2-digit',
-            second: '2-digit',
             hour12: false
           });
         }
       }
 
-      // Start clock on page load
+      // Initialize on page load
       document.addEventListener('turbo:load', function() {
-        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) {
@@ -215,72 +96,47 @@
           });
         });
       });
+
+      // Also run on DOMContentLoaded for non-Turbo loads
+      document.addEventListener('DOMContentLoaded', updateClock);
     </script>
 
-    <!-- Stimulus Controllers -->
+    <!-- Theme Switcher (Alpine.js) -->
     <script>
-      (function() {
-        // Initialize Stimulus immediately (works with Turbo)
-        if (!window.Stimulus) {
-          window.Stimulus = {};
-        }
-
-        const Stimulus = window.Stimulus;
-
-        // Only initialize once
-        if (!Stimulus.application) {
-          Stimulus.application = Stimulus.Application.start();
-
-          // Theme Controller - handles dark mode switching
-          Stimulus.application.register("theme", class extends Stimulus.Controller {
-            static targets = ["select"]
-
-            connect() {
-              this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
-              this.applyTheme(this.getPreference())
-              this.boundHandleSystemChange = this.handleSystemChange.bind(this)
-              this.mediaQuery.addEventListener('change', this.boundHandleSystemChange)
-
-              // Set the select value to match stored preference
-              if (this.hasSelectTarget) {
-                this.selectTarget.value = this.getPreference()
-              }
-            }
-
-            disconnect() {
-              this.mediaQuery.removeEventListener('change', this.boundHandleSystemChange)
-            }
-
-            change(event) {
-              const preference = event.target.value
-              localStorage.setItem('ruby_llm_agents_theme', preference)
-              this.applyTheme(preference)
-            }
-
-            getPreference() {
-              return localStorage.getItem('ruby_llm_agents_theme') || 'auto'
-            }
-
-            applyTheme(preference) {
-              const isDark = preference === 'dark' ||
-                (preference === 'auto' && this.mediaQuery.matches)
-              document.documentElement.classList.toggle('dark', isDark)
-            }
-
-            handleSystemChange() {
-              if (this.getPreference() === 'auto') {
-                this.applyTheme('auto')
-              }
-            }
-          });
-
-          console.log('[RubyLLM::Agents] Stimulus initialized');
-        }
-      })();
+      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;
     }
@@ -331,6 +187,35 @@
     .badge-orange {
       @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;
+    }
+    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;
+    }
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+
+    /* Form submitting state */
+    form[data-turbo-submitting] {
+      opacity: 0.6;
+      pointer-events: none;
+    }
   </style>
   </head>
 
@@ -355,80 +240,17 @@
             <% 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">
-              <%= 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"
-                  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, class: "inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md #{request.path.start_with?(ruby_llm_agents.agents_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="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, class: "inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md #{current_page?(ruby_llm_agents.executions_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="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, 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
+              <% nav_items.each do |item| %>
+                <%= render "rubyllm/agents/shared/nav_link", path: item[:path], label: item[:label], icon: item[:icon], mobile: false %>
               <% end %>
             </nav>
           </div>
@@ -441,13 +263,16 @@
           >
             <span id="live-clock" class="tabular-nums"></span>
 
-            <span
-              id="live-indicator"
-              class="hidden sm:flex items-center text-blue-600 dark:text-blue-400"
+            <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"
             >
-              <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>
+              <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
@@ -501,79 +326,8 @@
         "
       >
         <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
+          <% nav_items.each do |item| %>
+            <%= render "rubyllm/agents/shared/nav_link", path: item[:path], label: item[:label], icon: item[:icon], mobile: true %>
           <% end %>
         </nav>
       </div>
@@ -587,37 +341,25 @@
     <!-- Footer -->
     <footer
       class="border-t bg-white dark:bg-gray-800 dark:border-gray-700 mt-auto"
-      data-controller="theme"
+      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>
-
+            <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
-              "
+              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>
+            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>