From 894f575b9dbff29d7fe6c985b4c04b060e41d172 Mon Sep 17 00:00:00 2001
From: Vishal Sadriya <vishalsadriya.tps@gmail.com>
Date: Fri, 9 Jan 2026 16:49:56 +0530
Subject: [PATCH 1/2] feat: add auto-refresh feature for real-time dashboard
 monitoring

- Add configurable auto-refresh with toggle (default: 30 seconds)
- Integrate compact controls into header with iOS-style toggle switch
- Add live countdown timer and pulsing indicator when active
- Add icon-based refresh button for immediate page reload
- Add informative tooltip on hover explaining the feature
- Persist user preference in localStorage across sessions
- Support responsive design for mobile devices
- Add configuration options: auto_refresh_enabled, auto_refresh_interval
---
 CHANGELOG.md                                  |  16 ++
 README.md                                     |  10 +-
 .../solid_queue_monitor/html_generator.rb     | 115 +++++++++++-
 .../stylesheet_generator.rb                   | 177 ++++++++++++++++++
 config/initializers/solid_queue_monitor.rb    |   2 +
 .../templates/initializer.rb                  |   7 +
 lib/solid_queue_monitor.rb                    |   5 +-
 lib/solid_queue_monitor/version.rb            |   2 +-
 8 files changed, 330 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9cc916e..3fe0444 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,21 @@
 # Changelog
 
+## [0.4.0] - 2026-01-09
+
+### Added
+
+- Auto-refresh feature for real-time dashboard monitoring
+- Configurable auto-refresh interval via `config.auto_refresh_interval` (default: 30 seconds)
+- Toggle to enable/disable auto-refresh globally via `config.auto_refresh_enabled`
+- Compact auto-refresh controls integrated into header with:
+  - iOS-style toggle switch to enable/disable auto-refresh
+  - Live countdown timer showing seconds until next refresh
+  - Pulsing green indicator when auto-refresh is active
+  - Icon-based refresh button for immediate page reload
+  - Informative tooltip on hover explaining the feature
+- User preference persistence via localStorage (survives page reloads)
+- Responsive design for auto-refresh controls on mobile devices
+
 ## [0.3.2] - 2025-06-12
 
 ### Added
diff --git a/README.md b/README.md
index 200d62f..d9b01d3 100644
--- a/README.md
+++ b/README.md
@@ -25,6 +25,7 @@ A lightweight, zero-dependency web interface for monitoring Solid Queue backgrou
 - **Advanced Job Filtering**: Filter jobs by class name, queue, status, and job arguments
 - **Quick Actions**: Retry or discard failed jobs, execute or reject scheduled jobs directly from any view
 - **Performance Optimized**: Designed for high-volume applications with smart pagination
+- **Auto-refresh**: Real-time monitoring with configurable auto-refresh interval and toggle
 - **Optional Authentication**: Secure your dashboard with HTTP Basic Authentication
 - **Responsive Design**: Works on desktop and mobile devices
 - **Zero Dependencies**: No additional JavaScript libraries or frameworks required
@@ -44,7 +45,7 @@ A lightweight, zero-dependency web interface for monitoring Solid Queue backgrou
 Add this line to your application's Gemfile:
 
 ```ruby
-gem 'solid_queue_monitor', '~> 0.3.2'
+gem 'solid_queue_monitor', '~> 0.4.0'
 ```
 
 Then execute:
@@ -83,6 +84,13 @@ SolidQueueMonitor.setup do |config|
 
   # Number of jobs to display per page
   config.jobs_per_page = 25
+
+  # Auto-refresh settings
+  # Enable or disable auto-refresh globally (users can still toggle it in the UI)
+  config.auto_refresh_enabled = true
+
+  # Auto-refresh interval in seconds (default: 30)
+  config.auto_refresh_interval = 30
 end
 ```
 
diff --git a/app/services/solid_queue_monitor/html_generator.rb b/app/services/solid_queue_monitor/html_generator.rb
index 5e8b1d8..ee99805 100644
--- a/app/services/solid_queue_monitor/html_generator.rb
+++ b/app/services/solid_queue_monitor/html_generator.rb
@@ -50,6 +50,7 @@ def generate_body
           </div>
           #{generate_footer}
         </div>
+        #{generate_auto_refresh_script}
       HTML
     end
 
@@ -88,7 +89,10 @@ def render_message
     def generate_header
       <<-HTML
         <header>
-          <h1>Solid Queue Monitor</h1>
+          <div class="header-top">
+            <h1>Solid Queue Monitor</h1>
+            #{generate_auto_refresh_controls}
+          </div>
           <nav class="navigation">
             <a href="#{root_path}" class="nav-link">Overview</a>
             <a href="#{ready_jobs_path}" class="nav-link">Ready Jobs</a>
@@ -110,6 +114,115 @@ def generate_footer
       HTML
     end
 
+    def generate_auto_refresh_controls
+      return '' unless SolidQueueMonitor.auto_refresh_enabled
+
+      interval = SolidQueueMonitor.auto_refresh_interval
+      <<-HTML
+        <div class="auto-refresh-container" title="Auto-refresh every #{interval}s" data-tooltip="Auto-refresh: Dashboard updates automatically every #{interval} seconds. Toggle to enable/disable.">
+          <span class="auto-refresh-indicator" id="auto-refresh-indicator"></span>
+          <span class="auto-refresh-countdown" id="auto-refresh-countdown">#{interval}s</span>
+          <label class="auto-refresh-switch" title="Toggle auto-refresh">
+            <input type="checkbox" id="auto-refresh-toggle" checked>
+            <span class="switch-slider"></span>
+          </label>
+          <button class="refresh-now-btn" id="refresh-now-btn" title="Refresh now">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 2v6h-6M3 12a9 9 0 0 1 15-6.7L21 8M3 22v-6h6M21 12a9 9 0 0 1-15 6.7L3 16"/>
+            </svg>
+          </button>
+        </div>
+      HTML
+    end
+
+    def generate_auto_refresh_script
+      return '' unless SolidQueueMonitor.auto_refresh_enabled
+
+      interval = SolidQueueMonitor.auto_refresh_interval
+      <<-HTML
+        <script>
+          (function() {
+            var REFRESH_INTERVAL = #{interval};
+            var countdown = REFRESH_INTERVAL;
+            var timerId = null;
+            var isEnabled = localStorage.getItem('sqm_auto_refresh') !== 'false';
+
+            var toggle = document.getElementById('auto-refresh-toggle');
+            var indicator = document.getElementById('auto-refresh-indicator');
+            var countdownEl = document.getElementById('auto-refresh-countdown');
+            var refreshBtn = document.getElementById('refresh-now-btn');
+
+            function updateUI() {
+              if (toggle) toggle.checked = isEnabled;
+              if (indicator) indicator.classList.toggle('active', isEnabled);
+              if (countdownEl) {
+                countdownEl.textContent = countdown + 's';
+                countdownEl.style.opacity = isEnabled ? '1' : '0.4';
+              }
+            }
+
+            function tick() {
+              countdown--;
+              if (countdown <= 0) {
+                refresh();
+              } else {
+                updateUI();
+              }
+            }
+
+            function startTimer() {
+              stopTimer();
+              countdown = REFRESH_INTERVAL;
+              updateUI();
+              timerId = setInterval(tick, 1000);
+            }
+
+            function stopTimer() {
+              if (timerId) {
+                clearInterval(timerId);
+                timerId = null;
+              }
+            }
+
+            function refresh() {
+              window.location.reload();
+            }
+
+            function setEnabled(enabled) {
+              isEnabled = enabled;
+              localStorage.setItem('sqm_auto_refresh', enabled ? 'true' : 'false');
+              if (enabled) {
+                startTimer();
+              } else {
+                stopTimer();
+                countdown = REFRESH_INTERVAL;
+                updateUI();
+              }
+            }
+
+            // Event listeners
+            if (toggle) {
+              toggle.addEventListener('change', function() {
+                setEnabled(this.checked);
+              });
+            }
+
+            if (refreshBtn) {
+              refreshBtn.addEventListener('click', function() {
+                refresh();
+              });
+            }
+
+            // Initialize
+            updateUI();
+            if (isEnabled) {
+              startTimer();
+            }
+          })();
+        </script>
+      HTML
+    end
+
     def default_url_options
       { only_path: true }
     end
diff --git a/app/services/solid_queue_monitor/stylesheet_generator.rb b/app/services/solid_queue_monitor/stylesheet_generator.rb
index 016ef43..186445d 100644
--- a/app/services/solid_queue_monitor/stylesheet_generator.rb
+++ b/app/services/solid_queue_monitor/stylesheet_generator.rb
@@ -585,6 +585,183 @@ def generate
       .solid_queue_monitor .execute-button:hover {
         background: #2563eb;
       }
+
+      /* Header top row with title and auto-refresh */
+      .solid_queue_monitor .header-top {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 0.5rem;
+      }
+
+      /* Auto-refresh styles - compact design */
+      .solid_queue_monitor .auto-refresh-container {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.375rem 0.625rem;
+        background: white;
+        border-radius: 2rem;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        font-size: 0.75rem;
+        color: #6b7280;
+        cursor: default;
+      }
+
+      /* Tooltip styles */
+      .solid_queue_monitor .auto-refresh-container::after {
+        content: attr(data-tooltip);
+        position: absolute;
+        top: calc(100% + 8px);
+        right: 0;
+        background: #1f2937;
+        color: white;
+        padding: 0.5rem 0.75rem;
+        border-radius: 0.375rem;
+        font-size: 0.75rem;
+        line-height: 1.4;
+        white-space: nowrap;
+        max-width: 280px;
+        white-space: normal;
+        text-align: left;
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity 0.2s, visibility 0.2s;
+        z-index: 1000;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        pointer-events: none;
+      }
+
+      /* Tooltip arrow */
+      .solid_queue_monitor .auto-refresh-container::before {
+        content: "";
+        position: absolute;
+        top: calc(100% + 2px);
+        right: 16px;
+        border: 6px solid transparent;
+        border-bottom-color: #1f2937;
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity 0.2s, visibility 0.2s;
+        z-index: 1001;
+        pointer-events: none;
+      }
+
+      .solid_queue_monitor .auto-refresh-container:hover::after,
+      .solid_queue_monitor .auto-refresh-container:hover::before {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      .solid_queue_monitor .auto-refresh-indicator {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: #d1d5db;
+        flex-shrink: 0;
+      }
+
+      .solid_queue_monitor .auto-refresh-indicator.active {
+        background: var(--success-color);
+        animation: pulse 2s infinite;
+      }
+
+      @keyframes pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+      }
+
+      .solid_queue_monitor .auto-refresh-countdown {
+        font-variant-numeric: tabular-nums;
+        font-weight: 500;
+        min-width: 1.75rem;
+        color: var(--text-color);
+        transition: opacity 0.2s;
+      }
+
+      /* Toggle switch */
+      .solid_queue_monitor .auto-refresh-switch {
+        position: relative;
+        display: inline-block;
+        width: 32px;
+        height: 18px;
+        flex-shrink: 0;
+      }
+
+      .solid_queue_monitor .auto-refresh-switch input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+      }
+
+      .solid_queue_monitor .switch-slider {
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #d1d5db;
+        transition: 0.2s;
+        border-radius: 18px;
+      }
+
+      .solid_queue_monitor .switch-slider:before {
+        position: absolute;
+        content: "";
+        height: 14px;
+        width: 14px;
+        left: 2px;
+        bottom: 2px;
+        background-color: white;
+        transition: 0.2s;
+        border-radius: 50%;
+        box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+      }
+
+      .solid_queue_monitor .auto-refresh-switch input:checked + .switch-slider {
+        background-color: var(--success-color);
+      }
+
+      .solid_queue_monitor .auto-refresh-switch input:checked + .switch-slider:before {
+        transform: translateX(14px);
+      }
+
+      .solid_queue_monitor .refresh-now-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: transparent;
+        border: none;
+        padding: 0.25rem;
+        border-radius: 0.25rem;
+        cursor: pointer;
+        color: #9ca3af;
+        transition: all 0.2s;
+      }
+
+      .solid_queue_monitor .refresh-now-btn:hover {
+        color: var(--primary-color);
+        background: rgba(59, 130, 246, 0.1);
+      }
+
+      @media (max-width: 768px) {
+        .solid_queue_monitor .header-top {
+          flex-direction: column;
+          gap: 0.75rem;
+        }
+
+        .solid_queue_monitor .auto-refresh-container {
+          align-self: center;
+        }
+
+        /* Hide tooltip on mobile - use native title instead */
+        .solid_queue_monitor .auto-refresh-container::after,
+        .solid_queue_monitor .auto-refresh-container::before {
+          display: none;
+        }
+      }
       CSS
     end
   end
diff --git a/config/initializers/solid_queue_monitor.rb b/config/initializers/solid_queue_monitor.rb
index c150a43..b598da6 100644
--- a/config/initializers/solid_queue_monitor.rb
+++ b/config/initializers/solid_queue_monitor.rb
@@ -4,4 +4,6 @@
   config.username = 'admin'     # Change this in your application
   config.password = 'password'  # Change this in your application
   config.jobs_per_page = 25
+  config.auto_refresh_enabled = true  # Enable/disable auto-refresh globally
+  config.auto_refresh_interval = 30   # Auto-refresh interval in seconds
 end
diff --git a/lib/generators/solid_queue_monitor/templates/initializer.rb b/lib/generators/solid_queue_monitor/templates/initializer.rb
index b722362..a3af664 100644
--- a/lib/generators/solid_queue_monitor/templates/initializer.rb
+++ b/lib/generators/solid_queue_monitor/templates/initializer.rb
@@ -13,4 +13,11 @@
 
   # Number of jobs to display per page
   # config.jobs_per_page = 25
+
+  # Auto-refresh settings
+  # Enable or disable auto-refresh globally (users can still toggle it in the UI)
+  # config.auto_refresh_enabled = true
+
+  # Auto-refresh interval in seconds (default: 30)
+  # config.auto_refresh_interval = 30
 end
diff --git a/lib/solid_queue_monitor.rb b/lib/solid_queue_monitor.rb
index 43d1b94..2ee8df9 100644
--- a/lib/solid_queue_monitor.rb
+++ b/lib/solid_queue_monitor.rb
@@ -6,13 +6,16 @@
 module SolidQueueMonitor
   class Error < StandardError; end
   class << self
-    attr_accessor :username, :password, :jobs_per_page, :authentication_enabled
+    attr_accessor :username, :password, :jobs_per_page, :authentication_enabled,
+                  :auto_refresh_enabled, :auto_refresh_interval
   end
 
   @username = 'admin'
   @password = 'password'
   @jobs_per_page = 25
   @authentication_enabled = false
+  @auto_refresh_enabled = true
+  @auto_refresh_interval = 30 # seconds
 
   def self.setup
     yield self
diff --git a/lib/solid_queue_monitor/version.rb b/lib/solid_queue_monitor/version.rb
index aba599d..d172121 100644
--- a/lib/solid_queue_monitor/version.rb
+++ b/lib/solid_queue_monitor/version.rb
@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module SolidQueueMonitor
-  VERSION = '0.3.2'
+  VERSION = '0.4.0'
 end

From 6e23b41301757187e241f5011f6e1ea65c8ada41 Mon Sep 17 00:00:00 2001
From: Vishal Sadriya <vishalsadriya.tps@gmail.com>
Date: Fri, 9 Jan 2026 16:57:53 +0530
Subject: [PATCH 2/2] fix: resolve rubocop offenses for auto-refresh feature

- Split generate_auto_refresh_script into smaller methods
- Exclude stylesheet_generator.rb from ClassLength check (CSS template)
---
 .rubocop.yml                                  |   2 +
 Gemfile.lock                                  |   2 +-
 .../solid_queue_monitor/html_generator.rb     | 145 ++++++++----------
 3 files changed, 70 insertions(+), 79 deletions(-)

diff --git a/.rubocop.yml b/.rubocop.yml
index 01ac431..dd24941 100644
--- a/.rubocop.yml
+++ b/.rubocop.yml
@@ -22,6 +22,8 @@ Style/Documentation:
 
 Metrics/ClassLength:
   Max: 500
+  Exclude:
+    - 'app/services/solid_queue_monitor/stylesheet_generator.rb'
 
 Metrics/ModuleLength:
   Max: 200
diff --git a/Gemfile.lock b/Gemfile.lock
index 9baf274..4387a36 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    solid_queue_monitor (0.3.2)
+    solid_queue_monitor (0.4.0)
       rails (>= 7.0)
       solid_queue (>= 0.1.0)
 
diff --git a/app/services/solid_queue_monitor/html_generator.rb b/app/services/solid_queue_monitor/html_generator.rb
index ee99805..a6b5218 100644
--- a/app/services/solid_queue_monitor/html_generator.rb
+++ b/app/services/solid_queue_monitor/html_generator.rb
@@ -138,89 +138,78 @@ def generate_auto_refresh_controls
     def generate_auto_refresh_script
       return '' unless SolidQueueMonitor.auto_refresh_enabled
 
-      interval = SolidQueueMonitor.auto_refresh_interval
-      <<-HTML
-        <script>
-          (function() {
-            var REFRESH_INTERVAL = #{interval};
-            var countdown = REFRESH_INTERVAL;
-            var timerId = null;
-            var isEnabled = localStorage.getItem('sqm_auto_refresh') !== 'false';
-
-            var toggle = document.getElementById('auto-refresh-toggle');
-            var indicator = document.getElementById('auto-refresh-indicator');
-            var countdownEl = document.getElementById('auto-refresh-countdown');
-            var refreshBtn = document.getElementById('refresh-now-btn');
-
-            function updateUI() {
-              if (toggle) toggle.checked = isEnabled;
-              if (indicator) indicator.classList.toggle('active', isEnabled);
-              if (countdownEl) {
-                countdownEl.textContent = countdown + 's';
-                countdownEl.style.opacity = isEnabled ? '1' : '0.4';
-              }
-            }
-
-            function tick() {
-              countdown--;
-              if (countdown <= 0) {
-                refresh();
-              } else {
-                updateUI();
-              }
-            }
-
-            function startTimer() {
-              stopTimer();
-              countdown = REFRESH_INTERVAL;
-              updateUI();
-              timerId = setInterval(tick, 1000);
-            }
-
-            function stopTimer() {
-              if (timerId) {
-                clearInterval(timerId);
-                timerId = null;
-              }
-            }
+      "<script>#{auto_refresh_javascript}</script>"
+    end
 
-            function refresh() {
-              window.location.reload();
-            }
+    def auto_refresh_javascript
+      interval = SolidQueueMonitor.auto_refresh_interval
+      <<-JS
+        (function() {
+          var REFRESH_INTERVAL = #{interval};
+          var countdown = REFRESH_INTERVAL;
+          var timerId = null;
+          var isEnabled = localStorage.getItem('sqm_auto_refresh') !== 'false';
+          #{auto_refresh_dom_elements}
+          #{auto_refresh_functions}
+          #{auto_refresh_event_listeners}
+          #{auto_refresh_init}
+        })();
+      JS
+    end
 
-            function setEnabled(enabled) {
-              isEnabled = enabled;
-              localStorage.setItem('sqm_auto_refresh', enabled ? 'true' : 'false');
-              if (enabled) {
-                startTimer();
-              } else {
-                stopTimer();
-                countdown = REFRESH_INTERVAL;
-                updateUI();
-              }
-            }
+    def auto_refresh_dom_elements
+      <<-JS
+        var toggle = document.getElementById('auto-refresh-toggle');
+        var indicator = document.getElementById('auto-refresh-indicator');
+        var countdownEl = document.getElementById('auto-refresh-countdown');
+        var refreshBtn = document.getElementById('refresh-now-btn');
+      JS
+    end
 
-            // Event listeners
-            if (toggle) {
-              toggle.addEventListener('change', function() {
-                setEnabled(this.checked);
-              });
-            }
+    def auto_refresh_functions
+      <<-JS
+        function updateUI() {
+          if (toggle) toggle.checked = isEnabled;
+          if (indicator) indicator.classList.toggle('active', isEnabled);
+          if (countdownEl) {
+            countdownEl.textContent = countdown + 's';
+            countdownEl.style.opacity = isEnabled ? '1' : '0.4';
+          }
+        }
+        function tick() {
+          countdown--;
+          if (countdown <= 0) { refresh(); } else { updateUI(); }
+        }
+        function startTimer() {
+          stopTimer();
+          countdown = REFRESH_INTERVAL;
+          updateUI();
+          timerId = setInterval(tick, 1000);
+        }
+        function stopTimer() {
+          if (timerId) { clearInterval(timerId); timerId = null; }
+        }
+        function refresh() { window.location.reload(); }
+        function setEnabled(enabled) {
+          isEnabled = enabled;
+          localStorage.setItem('sqm_auto_refresh', enabled ? 'true' : 'false');
+          if (enabled) { startTimer(); } else { stopTimer(); countdown = REFRESH_INTERVAL; updateUI(); }
+        }
+      JS
+    end
 
-            if (refreshBtn) {
-              refreshBtn.addEventListener('click', function() {
-                refresh();
-              });
-            }
+    def auto_refresh_event_listeners
+      <<-JS
+        if (toggle) { toggle.addEventListener('change', function() { setEnabled(this.checked); }); }
+        if (refreshBtn) { refreshBtn.addEventListener('click', function() { refresh(); }); }
+      JS
+    end
 
-            // Initialize
-            updateUI();
-            if (isEnabled) {
-              startTimer();
-            }
-          })();
-        </script>
-      HTML
+    def auto_refresh_init
+      <<-JS
+        updateUI();
+        if (isEnabled) { startTimer(); }
+      JS
     end
 
     def default_url_options