solid_queue_monitor 1.2.1 → 1.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6de5c6ef734c44e24c72e13d194fa9e6243fa5cefce591f430daa6f6dc1f175d
-  data.tar.gz: 7065afd18960ef8f61b7131fa96fd7c46120b75c52c2b633a34f63b686b8ca2c
+  metadata.gz: 03dcf6baf00328ad18dadaaf499e82d178d7e62c7cc01433f48a1e222c245742
+  data.tar.gz: 15172ad03509c92f8d86b1c06cc78695203f125576838796d15c644c3b4a7eb0
 SHA512:
-  metadata.gz: 6e899fddd4e1b08cf84beeff8b93f8ca67c199ce98d795983335300bf15fc087fe8ab0009d2a75746ae4d90b68f0b609f03c7ca44fb50ac0784551fc1e111a6b
-  data.tar.gz: eecbd91a4eee221f13431810542e92c3fa06403d2279a00e447e186c00a4d34479c134461864c80274171493c985d83d4ea7ac351e93dc09d13238d00ee825d6
+  metadata.gz: 9b973471c7ac561b9b527dbb710610b41d452325fa7edfbd58f57f0454cd1d78a932e645854b12cbfc37b02b56f36006a1fe4fc243e23b03635bd6fef2e0baff
+  data.tar.gz: 56b6b3f15cbccedbee9782cd70efe8c1c2b75b47fba7d5b4e38535a3c17386a7f355a295a44de7305efd84c2aeefc39516535d885e3f9361960564202cd2dfba

data/README.md

@@ -206,6 +206,25 @@ This makes it easy to find specific jobs when debugging issues in your applicati
 - **Rails**: 7.1 or higher
 - **Solid Queue**: 0.1.0 or higher
 
+## Content Security Policy
+
+Solid Queue Monitor is compatible with strict Content Security Policy as of v1.3.0.
+
+If your application uses nonce-based CSP (the Rails default when `content_security_policy_nonce_generator` is set), Solid Queue Monitor will automatically stamp the per-request nonce onto every inline `<style>` and `<script>` tag it emits. Ensure your nonce directives include both `script-src` and `style-src`:
+
+```ruby
+# config/initializers/content_security_policy.rb
+Rails.application.config.content_security_policy do |policy|
+  policy.script_src :self
+  policy.style_src  :self
+end
+
+Rails.application.config.content_security_policy_nonce_generator = ->(req) { SecureRandom.base64(16) }
+Rails.application.config.content_security_policy_nonce_directives = %w[script-src style-src]
+```
+
+No other configuration is required. If your application runs CSP without nonces (e.g., strict `script-src 'self'` only), the monitor UI will not function — asset-extraction support is tracked for a future release.
+
 ## Contributing
 
 Contributions are welcome! Here's how you can contribute:

data/app/controllers/solid_queue_monitor/base_controller.rb

@@ -28,7 +28,8 @@ module SolidQueueMonitor
         content: content,
         message: message,
         message_type: message_type,
-        search_query: search_query
+        search_query: search_query,
+        nonce: content_security_policy_nonce
       ).generate
 
       render html: html.html_safe

data/app/controllers/solid_queue_monitor/failed_jobs_controller.rb

@@ -13,7 +13,8 @@ module SolidQueueMonitor
                                                                             current_page: @failed_jobs[:current_page],
                                                                             total_pages: @failed_jobs[:total_pages],
                                                                             filters: filter_params,
-                                                                            sort: sort_params).render)
+                                                                            sort: sort_params,
+                                                                            nonce: content_security_policy_nonce).render)
     end
 
     def retry

data/app/controllers/solid_queue_monitor/jobs_controller.rb

@@ -15,7 +15,8 @@ module SolidQueueMonitor
 
       render_page("Job ##{@job.id}", SolidQueueMonitor::JobDetailsPresenter.new(
         @job,
-        **job_data
+        **job_data,
+        nonce: content_security_policy_nonce
       ).render)
     end
 

data/app/controllers/solid_queue_monitor/scheduled_jobs_controller.rb

@@ -13,7 +13,8 @@ module SolidQueueMonitor
                                                                                   current_page: @scheduled_jobs[:current_page],
                                                                                   total_pages: @scheduled_jobs[:total_pages],
                                                                                   filters: filter_params,
-                                                                                  sort: sort_params).render)
+                                                                                  sort: sort_params,
+                                                                                  nonce: content_security_policy_nonce).render)
     end
 
     def create

data/app/presenters/solid_queue_monitor/failed_jobs_presenter.rb

@@ -5,12 +5,13 @@ module SolidQueueMonitor
     include Rails.application.routes.url_helpers
     include SolidQueueMonitor::Engine.routes.url_helpers
 
-    def initialize(jobs, current_page: 1, total_pages: 1, filters: {}, sort: {})
+    def initialize(jobs, current_page: 1, total_pages: 1, filters: {}, sort: {}, nonce: nil)
       @jobs = jobs
       @current_page = current_page
       @total_pages = total_pages
       @filters = filters
       @sort = sort
+      @nonce = nonce
     end
 
     def render
@@ -20,6 +21,10 @@ module SolidQueueMonitor
 
     private
 
+    def script_tag_open
+      @nonce ? %(<script nonce="#{@nonce}">) : '<script>'
+    end
+
     def generate_filter_form
       <<-HTML
         <div class="filter-form-container">
@@ -76,170 +81,83 @@ module SolidQueueMonitor
           </div>
         </form>
 
-        <script>
+        #{script_tag_open}
           document.addEventListener('DOMContentLoaded', function() {
-            // Handle select all checkboxes
-            const selectAllHeader = document.getElementById('select-all');
-            const checkboxes = document.querySelectorAll('.job-checkbox');
-            const retrySelectedBtn = document.getElementById('retry-selected-top');
-            const discardSelectedBtn = document.getElementById('discard-selected-top');
-            const form = document.getElementById('failed-jobs-form');
-        #{'    '}
+            var selectAllHeader = document.getElementById('select-all');
+            var checkboxes = document.querySelectorAll('.job-checkbox');
+            var retrySelectedBtn = document.getElementById('retry-selected-top');
+            var discardSelectedBtn = document.getElementById('discard-selected-top');
+            var form = document.getElementById('failed-jobs-form');
+
             function updateButtonState() {
-              const checkedBoxes = document.querySelectorAll('.job-checkbox:checked');
+              var checkedBoxes = document.querySelectorAll('.job-checkbox:checked');
               retrySelectedBtn.disabled = checkedBoxes.length === 0;
               discardSelectedBtn.disabled = checkedBoxes.length === 0;
             }
-        #{'    '}
-            function toggleAll(checked) {
-              checkboxes.forEach(checkbox => {
-                checkbox.checked = checked;
-              });
-              selectAllHeader.checked = checked;
-              updateButtonState();
-            }
-        #{'    '}
+
             selectAllHeader.addEventListener('change', function() {
-              toggleAll(this.checked);
+              checkboxes.forEach(function(cb) { cb.checked = selectAllHeader.checked; });
+              updateButtonState();
             });
-        #{'    '}
-            checkboxes.forEach(checkbox => {
-              checkbox.addEventListener('change', function() {
+
+            checkboxes.forEach(function(cb) {
+              cb.addEventListener('change', function() {
                 updateButtonState();
-        #{'        '}
-                // Update select all checkboxes if needed
-                const allChecked = document.querySelectorAll('.job-checkbox:checked').length === checkboxes.length;
+                var allChecked = document.querySelectorAll('.job-checkbox:checked').length === checkboxes.length;
                 selectAllHeader.checked = allChecked;
               });
             });
-        #{'    '}
-            // Handle bulk actions
+
+            function bulkSubmit(action, promptMsg) {
+              var ids = Array.from(document.querySelectorAll('.job-checkbox:checked')).map(function(cb) { return cb.value; });
+              if (ids.length === 0) return;
+              if (!confirm(promptMsg)) return;
+              form.action = action;
+              appendHidden(form, 'redirect_cleanly', 'true');
+              ids.forEach(function(id) { appendHidden(form, 'job_ids[]', id); });
+              form.submit();
+              setTimeout(function() { window.history.replaceState({}, '', window.location.pathname); }, 100);
+            }
+
+            function appendHidden(f, name, value) {
+              var input = document.createElement('input');
+              input.type = 'hidden';
+              input.name = name;
+              input.value = value;
+              f.appendChild(input);
+            }
+
             retrySelectedBtn.addEventListener('click', function() {
-              const selectedIds = Array.from(document.querySelectorAll('.job-checkbox:checked')).map(cb => cb.value);
-              if (selectedIds.length === 0) return;
-        #{'      '}
-              if (confirm('Are you sure you want to retry the selected jobs?')) {
-                form.action = '#{retry_failed_jobs_path}';
-        #{'        '}
-                // Add a special flag to indicate this should redirect properly
-                const redirectInput = document.createElement('input');
-                redirectInput.type = 'hidden';
-                redirectInput.name = 'redirect_cleanly';
-                redirectInput.value = 'true';
-                form.appendChild(redirectInput);
-        #{'        '}
-                // Add selected IDs as hidden inputs
-                selectedIds.forEach(id => {
-                  const input = document.createElement('input');
-                  input.type = 'hidden';
-                  input.name = 'job_ids[]';
-                  input.value = id;
-                  form.appendChild(input);
-                });
-        #{'        '}
-                // Submit the form and then replace the URL location immediately after
-                form.submit();
-        #{'        '}
-                // Delay the redirect to give the form time to submit
-                setTimeout(function() {
-                  // Reset to the clean URL without query parameters
-                  window.history.replaceState({}, '', window.location.pathname);
-                }, 100);
-              }
+              bulkSubmit('#{retry_failed_jobs_path}', 'Are you sure you want to retry the selected jobs?');
             });
-        #{'    '}
             discardSelectedBtn.addEventListener('click', function() {
-              const selectedIds = Array.from(document.querySelectorAll('.job-checkbox:checked')).map(cb => cb.value);
-              if (selectedIds.length === 0) return;
-        #{'      '}
-              if (confirm('Are you sure you want to discard the selected jobs?')) {
-                form.action = '#{discard_failed_jobs_path}';
-        #{'        '}
-                // Add a special flag to indicate this should redirect properly
-                const redirectInput = document.createElement('input');
-                redirectInput.type = 'hidden';
-                redirectInput.name = 'redirect_cleanly';
-                redirectInput.value = 'true';
-                form.appendChild(redirectInput);
-        #{'        '}
-                // Add selected IDs as hidden inputs
-                selectedIds.forEach(id => {
-                  const input = document.createElement('input');
-                  input.type = 'hidden';
-                  input.name = 'job_ids[]';
-                  input.value = id;
-                  form.appendChild(input);
-                });
-        #{'        '}
-                // Submit the form and then replace the URL location immediately after
-                form.submit();
-        #{'        '}
-                // Delay the redirect to give the form time to submit
-                setTimeout(function() {
-                  // Reset to the clean URL without query parameters
-                  window.history.replaceState({}, '', window.location.pathname);
-                }, 100);
+              bulkSubmit('#{discard_failed_jobs_path}', 'Are you sure you want to discard the selected jobs?');
+            });
+
+            function submitRowAction(action, id) {
+              var f = document.createElement('form');
+              f.method = 'post';
+              f.action = action.replace('PLACEHOLDER', id);
+              appendHidden(f, 'redirect_cleanly', 'true');
+              document.body.appendChild(f);
+              f.submit();
+              setTimeout(function() { window.history.replaceState({}, '', window.location.pathname); }, 100);
+            }
+
+            document.addEventListener('click', function(e) {
+              var btn = e.target.closest('[data-action]');
+              if (!btn) return;
+              var id = btn.dataset.jobId;
+              if (btn.dataset.action === 'retry-failed-job') {
+                submitRowAction('#{retry_failed_job_path(id: 'PLACEHOLDER')}', id);
+              } else if (btn.dataset.action === 'discard-failed-job') {
+                if (confirm('Are you sure you want to discard this job?')) {
+                  submitRowAction('#{discard_failed_job_path(id: 'PLACEHOLDER')}', id);
+                }
               }
             });
-        #{'    '}
-            // Initialize button state
+
             updateButtonState();
-        #{'    '}
-            // Global function for retry action
-            window.submitRetryForm = function(id) {
-              const form = document.createElement('form');
-              form.method = 'post';
-              form.action = '#{retry_failed_job_path(id: 'PLACEHOLDER')}';
-              form.action = form.action.replace('PLACEHOLDER', id);
-              form.style.display = 'none';
-        #{'      '}
-              // Add a special flag to indicate this should redirect properly
-              const redirectInput = document.createElement('input');
-              redirectInput.type = 'hidden';
-              redirectInput.name = 'redirect_cleanly';
-              redirectInput.value = 'true';
-              form.appendChild(redirectInput);
-        #{'      '}
-              document.body.appendChild(form);
-        #{'      '}
-              // Submit the form and then replace the URL location immediately after
-              form.submit();
-        #{'      '}
-              // Delay the redirect to give the form time to submit
-              setTimeout(function() {
-                // Reset to the clean URL without query parameters
-                window.history.replaceState({}, '', window.location.pathname);
-              }, 100);
-            };
-        #{'    '}
-            // Global function for discard action
-            window.submitDiscardForm = function(id) {
-              if (confirm('Are you sure you want to discard this job?')) {
-                const form = document.createElement('form');
-                form.method = 'post';
-                form.action = '#{discard_failed_job_path(id: 'PLACEHOLDER')}';
-                form.action = form.action.replace('PLACEHOLDER', id);
-                form.style.display = 'none';
-        #{'        '}
-                // Add a special flag to indicate this should redirect properly
-                const redirectInput = document.createElement('input');
-                redirectInput.type = 'hidden';
-                redirectInput.name = 'redirect_cleanly';
-                redirectInput.value = 'true';
-                form.appendChild(redirectInput);
-        #{'        '}
-                document.body.appendChild(form);
-        #{'        '}
-                // Submit the form and then replace the URL location immediately after
-                form.submit();
-        #{'        '}
-                // Delay the redirect to give the form time to submit
-                setTimeout(function() {
-                  // Reset to the clean URL without query parameters
-                  window.history.replaceState({}, '', window.location.pathname);
-                }, 100);
-              }
-            };
           });
         </script>
       HTML
@@ -268,13 +186,8 @@ module SolidQueueMonitor
           <td>#{format_datetime(failed_execution.created_at)}</td>
           <td class="actions-cell">
             <div class="job-actions">
-              <a href="javascript:void(0)"#{' '}
-                 onclick="submitRetryForm(#{failed_execution.id})"#{' '}
-                 class="action-button retry-button">Retry</a>
-        #{'      '}
-              <a href="javascript:void(0)"#{' '}
-                 onclick="submitDiscardForm(#{failed_execution.id})"#{' '}
-                 class="action-button discard-button">Discard</a>
+              <button type="button" data-action="retry-failed-job" data-job-id="#{failed_execution.id}" class="action-button retry-button">Retry</button>
+              <button type="button" data-action="discard-failed-job" data-job-id="#{failed_execution.id}" class="action-button discard-button">Discard</button>
             </div>
           </td>
         </tr>

data/app/presenters/solid_queue_monitor/job_details_presenter.rb

@@ -3,13 +3,14 @@
 module SolidQueueMonitor
   class JobDetailsPresenter < BasePresenter
     def initialize(job, failed_execution: nil, claimed_execution: nil, scheduled_execution: nil,
-                   recent_executions: [], back_path: nil)
+                   recent_executions: [], back_path: nil, nonce: nil)
       @job = job
       @failed_execution = failed_execution
       @claimed_execution = claimed_execution
       @scheduled_execution = scheduled_execution
       @recent_executions = recent_executions
       @back_path = back_path
+      @nonce = nonce
       calculate_timing
     end
 
@@ -32,6 +33,10 @@ module SolidQueueMonitor
 
     private
 
+    def script_tag_open
+      @nonce ? %(<script nonce="#{@nonce}">) : '<script>'
+    end
+
     def calculate_timing
       @created_at = @job.created_at
       @scheduled_at = @job.scheduled_at || @scheduled_execution&.scheduled_at
@@ -139,7 +144,7 @@ module SolidQueueMonitor
 
         actions << <<-HTML
           <form action="#{discard_failed_job_path(id: @failed_execution.id)}" method="post" class="inline-form"
-                onsubmit="return confirm('Are you sure you want to discard this job?');">
+                data-confirm="Are you sure you want to discard this job?">
             <input type="hidden" name="redirect_to" value="#{failed_jobs_path}">
             <button type="submit" class="action-button discard-button">Discard</button>
           </form>
@@ -301,7 +306,7 @@ module SolidQueueMonitor
         <div class="job-section error-section">
           <div class="section-header">
             <h3 class="section-title">Error</h3>
-            <button class="copy-button" onclick="copyToClipboard('error-content')">
+            <button class="copy-button" data-action="copy" data-target="error-content">
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                 <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
@@ -329,22 +334,13 @@ module SolidQueueMonitor
           <div class="backtrace-header">
             <span class="backtrace-title">Backtrace</span>
             <div class="backtrace-toggle">
-              <button class="toggle-btn active" data-target="app-backtrace" onclick="showBacktrace('app')">App Only</button>
-              <button class="toggle-btn" data-target="full-backtrace" onclick="showBacktrace('full')">Full</button>
+              <button class="toggle-btn active" data-action="show-backtrace" data-backtrace="app">App Only</button>
+              <button class="toggle-btn" data-action="show-backtrace" data-backtrace="full">Full</button>
             </div>
           </div>
           <pre class="backtrace-content" id="app-backtrace">#{format_backtrace_lines(app_lines.presence || lines.first(5))}</pre>
-          <pre class="backtrace-content" id="full-backtrace" style="display: none;">#{format_backtrace_lines(lines)}</pre>
+          <pre class="backtrace-content is-hidden" id="full-backtrace">#{format_backtrace_lines(lines)}</pre>
         </div>
-        <script>
-          function showBacktrace(type) {
-            document.getElementById('app-backtrace').style.display = type === 'app' ? 'block' : 'none';
-            document.getElementById('full-backtrace').style.display = type === 'full' ? 'block' : 'none';
-            document.querySelectorAll('.backtrace-toggle .toggle-btn').forEach(btn => {
-              btn.classList.toggle('active', btn.dataset.target === type + '-backtrace');
-            });
-          }
-        </script>
       HTML
     end
 
@@ -426,7 +422,7 @@ module SolidQueueMonitor
           <div class="section-header">
             <h3 class="section-title">Arguments</h3>
             <div class="section-actions">
-              <button class="copy-button" onclick="copyToClipboard('arguments-content')">
+              <button class="copy-button" data-action="copy" data-target="arguments-content">
                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                   <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                   <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
@@ -647,14 +643,14 @@ module SolidQueueMonitor
     def render_raw_data_section
       <<-HTML
         <div class="job-section collapsible-section">
-          <div class="section-header collapsible-header" onclick="toggleSection(this)">
+          <div class="section-header collapsible-header" data-action="toggle-section">
             <div class="collapsible-title">
               <svg class="collapse-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <polyline points="9 18 15 12 9 6"></polyline>
               </svg>
               <h3 class="section-title">Raw Data</h3>
             </div>
-            <button class="copy-button" onclick="event.stopPropagation(); copyToClipboard('raw-data-content')">
+            <button class="copy-button" data-action="copy" data-target="raw-data-content" data-stop-propagation="true">
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                 <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
@@ -662,33 +658,48 @@ module SolidQueueMonitor
               Copy
             </button>
           </div>
-          <div class="collapsible-content" style="display: none;">
+          <div class="collapsible-content">
             <pre class="raw-data-content" id="raw-data-content">#{CGI.escapeHTML(JSON.pretty_generate(@job.attributes))}</pre>
           </div>
         </div>
-        <script>
-          function toggleSection(header) {
-            const content = header.nextElementSibling;
-            const icon = header.querySelector('.collapse-icon');
-            if (content.style.display === 'none') {
-              content.style.display = 'block';
-              icon.style.transform = 'rotate(90deg)';
-            } else {
-              content.style.display = 'none';
-              icon.style.transform = 'rotate(0deg)';
-            }
-          }
-
-          function copyToClipboard(elementId) {
-            const element = document.getElementById(elementId);
-            const text = element.innerText || element.textContent;
-            navigator.clipboard.writeText(text).then(() => {
-              const btn = event.target.closest('.copy-button');
-              const originalText = btn.innerHTML;
-              btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg> Copied!';
-              setTimeout(() => { btn.innerHTML = originalText; }, 2000);
+        #{script_tag_open}
+          (function() {
+            document.addEventListener('click', function(e) {
+              var el = e.target.closest('[data-action]');
+              if (!el) return;
+
+              if (el.dataset.stopPropagation === 'true') e.stopPropagation();
+
+              var action = el.dataset.action;
+
+              if (action === 'copy') {
+                var target = document.getElementById(el.dataset.target);
+                if (!target) return;
+                var text = target.innerText || target.textContent;
+                navigator.clipboard.writeText(text).then(function() {
+                  var original = el.innerHTML;
+                  el.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg> Copied!';
+                  setTimeout(function() { el.innerHTML = original; }, 2000);
+                });
+              }
+
+              if (action === 'show-backtrace') {
+                var which = el.dataset.backtrace;
+                var appEl = document.getElementById('app-backtrace');
+                var fullEl = document.getElementById('full-backtrace');
+                if (appEl) appEl.classList.toggle('is-hidden', which !== 'app');
+                if (fullEl) fullEl.classList.toggle('is-hidden', which !== 'full');
+                document.querySelectorAll('[data-action="show-backtrace"]').forEach(function(btn) {
+                  btn.classList.toggle('active', btn.dataset.backtrace === which);
+                });
+              }
+
+              if (action === 'toggle-section') {
+                var section = el.closest('.collapsible-section');
+                if (section) section.classList.toggle('is-expanded');
+              }
             });
-          }
+          })();
         </script>
       HTML
     end

data/app/presenters/solid_queue_monitor/jobs_presenter.rb

@@ -119,7 +119,7 @@ module SolidQueueMonitor
                 </form>
 
                 <form method="post" action="#{discard_failed_job_path(id: failed_execution.id)}" class="inline-form"
-                      onsubmit="return confirm('Are you sure you want to discard this job?');">
+                      data-confirm="Are you sure you want to discard this job?">
                   <input type="hidden" name="redirect_to" value="#{root_path}">
                   <button type="submit" class="action-button discard-button">Discard</button>
                 </form>

data/app/presenters/solid_queue_monitor/queue_details_presenter.rb

@@ -53,7 +53,7 @@ module SolidQueueMonitor
       else
         <<-HTML
           <form action="#{pause_queue_path}" method="post" class="inline-form"
-                onsubmit="return confirm('Are you sure you want to pause this queue?');">
+                data-confirm="Are you sure you want to pause this queue?">
             <input type="hidden" name="queue_name" value="#{@queue_name}">
             <input type="hidden" name="redirect_to" value="#{queue_details_path(queue_name: @queue_name)}">
             <button type="submit" class="action-button pause-button">Pause Queue</button>
@@ -170,7 +170,7 @@ module SolidQueueMonitor
                 <button type="submit" class="action-button retry-button">Retry</button>
               </form>
               <form method="post" action="#{discard_failed_job_path(id: failed_execution.id)}" class="inline-form"
-                    onsubmit="return confirm('Are you sure you want to discard this job?');">
+                    data-confirm="Are you sure you want to discard this job?">
                 <input type="hidden" name="redirect_to" value="#{queue_details_path(queue_name: @queue_name)}">
                 <button type="submit" class="action-button discard-button">Discard</button>
               </form>

data/app/presenters/solid_queue_monitor/queues_presenter.rb

@@ -76,7 +76,7 @@ module SolidQueueMonitor
       else
         <<-HTML
           <form action="#{pause_queue_path}" method="post" class="inline-form"
-                onsubmit="return confirm('Are you sure you want to pause the #{queue_name} queue? Workers will stop processing jobs from this queue.');">
+                data-confirm="Are you sure you want to pause the #{queue_name} queue? Workers will stop processing jobs from this queue.">
             <input type="hidden" name="queue_name" value="#{queue_name}">
             <button type="submit" class="action-button pause-button" title="Pause queue processing">
               Pause

data/app/presenters/solid_queue_monitor/scheduled_jobs_presenter.rb

@@ -5,12 +5,13 @@ module SolidQueueMonitor
     include Rails.application.routes.url_helpers
     include SolidQueueMonitor::Engine.routes.url_helpers
 
-    def initialize(jobs, current_page: 1, total_pages: 1, filters: {}, sort: {})
+    def initialize(jobs, current_page: 1, total_pages: 1, filters: {}, sort: {}, nonce: nil)
       @jobs = jobs
       @current_page = current_page
       @total_pages = total_pages
       @filters = filters
       @sort = sort
+      @nonce = nonce
     end
 
     def render
@@ -19,6 +20,10 @@ module SolidQueueMonitor
 
     private
 
+    def script_tag_open
+      @nonce ? %(<script nonce="#{@nonce}">) : '<script>'
+    end
+
     def generate_filter_form
       <<-HTML
         <div class="filter-form-container">
@@ -57,7 +62,7 @@ module SolidQueueMonitor
       <form id="scheduled-jobs-form" method="POST">
         #{generate_table}
       </form>
-      <script>
+      #{script_tag_open}
         document.addEventListener('DOMContentLoaded', function() {
           const selectAllCheckbox = document.querySelector('th input[type="checkbox"]');
           const jobCheckboxes = document.getElementsByName('job_ids[]');

data/app/presenters/solid_queue_monitor/workers_presenter.rb

@@ -104,12 +104,17 @@ module SolidQueueMonitor
     def prune_all_link
       return '' if @dead_count.zero?
 
+      suffix = @dead_count > 1 ? 'es' : ''
+      message = "Remove all #{@dead_count} dead process#{suffix}? " \
+                'This will clean up processes that have stopped sending heartbeats.'
+
       <<-HTML
         <a href="#" class="summary-action"
-           onclick="if(confirm('Remove all #{@dead_count} dead process#{@dead_count > 1 ? 'es' : ''}? This will clean up processes that have stopped sending heartbeats.')) { document.getElementById('prune-all-form').submit(); } return false;">
+           data-confirm-submit="prune-all-form"
+           data-confirm="#{CGI.escapeHTML(message)}">
           Prune all
         </a>
-        <form id="prune-all-form" action="#{prune_workers_path}" method="post" style="display: none;"></form>
+        <form id="prune-all-form" action="#{prune_workers_path}" method="post" class="is-hidden"></form>
       HTML
     end
 
@@ -185,7 +190,7 @@ module SolidQueueMonitor
 
       <<-HTML
         <form action="#{remove_worker_path(id: process.id)}" method="post" class="inline-form"
-              onsubmit="return confirm('Remove this dead process from the registry?');">
+              data-confirm="Remove this dead process from the registry?">
           <button type="submit" class="action-button discard-button" title="Remove dead process">
             Remove
           </button>

data/app/services/solid_queue_monitor/chart_data_service.rb

@@ -85,10 +85,10 @@ module SolidQueueMonitor
     def bucket_index_expr(column, start_epoch, interval_seconds)
       if adapter?('sqlite')
         "CAST((CAST(strftime('%s', #{column}) AS INTEGER) - #{start_epoch}) / #{interval_seconds} AS INTEGER)"
-      elsif adapter?('mysql')
-        "CAST((UNIX_TIMESTAMP(#{column}) - #{start_epoch}) / #{interval_seconds} AS SIGNED)"
+      elsif adapter?('mysql') || adapter?('trilogy')
+        "FLOOR((UNIX_TIMESTAMP(#{column}) - #{start_epoch}) / #{interval_seconds})"
       else
-        "CAST((EXTRACT(EPOCH FROM #{column}) - #{start_epoch}) / #{interval_seconds} AS INTEGER)"
+        "FLOOR((EXTRACT(EPOCH FROM #{column}) - #{start_epoch}) / #{interval_seconds})::integer"
       end
     end
 

data/app/services/solid_queue_monitor/chart_presenter.rb

@@ -66,7 +66,7 @@ module SolidQueueMonitor
 
       <<-HTML
         <div class="chart-time-select-wrapper">
-          <select class="chart-time-select" id="chart-time-select" onchange="window.location.href='?time_range=' + this.value">
+          <select class="chart-time-select" id="chart-time-select">
             #{options}
           </select>
         </div>
@@ -212,15 +212,15 @@ module SolidQueueMonitor
       <<-HTML
         <div class="chart-legend">
           <span class="legend-item">
-            <span class="legend-color" style="background-color: #{COLORS[:created]}"></span>
+            <span class="legend-color legend-color-created"></span>
             Created
           </span>
           <span class="legend-item">
-            <span class="legend-color" style="background-color: #{COLORS[:completed]}"></span>
+            <span class="legend-color legend-color-completed"></span>
             Completed
           </span>
           <span class="legend-item">
-            <span class="legend-color" style="background-color: #{COLORS[:failed]}"></span>
+            <span class="legend-color legend-color-failed"></span>
             Failed
           </span>
         </div>
@@ -229,7 +229,7 @@ module SolidQueueMonitor
 
     def render_tooltip
       <<-HTML
-        <div id="chart-tooltip" class="chart-tooltip" style="display: none;">
+        <div id="chart-tooltip" class="chart-tooltip">
           <div class="tooltip-label"></div>
           <div class="tooltip-value"></div>
         </div>

data/app/services/solid_queue_monitor/html_generator.rb

@@ -5,12 +5,13 @@ module SolidQueueMonitor
     include Rails.application.routes.url_helpers
     include SolidQueueMonitor::Engine.routes.url_helpers
 
-    def initialize(title:, content:, message: nil, message_type: nil, search_query: nil)
+    def initialize(title:, content:, message: nil, message_type: nil, search_query: nil, nonce: nil)
       @title = title
       @content = content
       @message = message
       @message_type = message_type
       @search_query = search_query
+      @nonce = nonce
     end
 
     def generate
@@ -34,7 +35,7 @@ module SolidQueueMonitor
       <<-HTML
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <style>
+        #{style_tag_open}
           #{SolidQueueMonitor::StylesheetGenerator.new.generate}
         </style>
       HTML
@@ -62,27 +63,14 @@ module SolidQueueMonitor
       class_name = @message_type == 'success' ? 'message-success' : 'message-error'
       <<-HTML
         <div id="flash-message" class="message #{class_name}">#{@message}</div>
-        <script>
-          // Automatically hide the flash message after 5 seconds
+        #{script_tag_open}
           document.addEventListener('DOMContentLoaded', function() {
-            var flashMessage = document.getElementById('flash-message');
-            if (flashMessage) {
-              setTimeout(function() {
-                flashMessage.style.opacity = '1';
-                // Fade out animation
-                var fadeEffect = setInterval(function() {
-                  if (!flashMessage.style.opacity) {
-                    flashMessage.style.opacity = 1;
-                  }
-                  if (flashMessage.style.opacity > 0) {
-                    flashMessage.style.opacity -= 0.1;
-                  } else {
-                    clearInterval(fadeEffect);
-                    flashMessage.style.display = 'none';
-                  }
-                }, 50);
-              }, 5000); // 5 seconds
-            }
+            var el = document.getElementById('flash-message');
+            if (!el) return;
+            setTimeout(function() {
+              el.classList.add('is-fading');
+              setTimeout(function() { el.classList.add('is-hidden'); }, 500);
+            }, 5000);
           });
         </script>
       HTML
@@ -149,6 +137,14 @@ module SolidQueueMonitor
       text.to_s.gsub('&', '&amp;').gsub('<', '&lt;').gsub('>', '&gt;').gsub('"', '&quot;')
     end
 
+    def style_tag_open
+      @nonce ? %(<style nonce="#{@nonce}">) : '<style>'
+    end
+
+    def script_tag_open
+      @nonce ? %(<script nonce="#{@nonce}">) : '<script>'
+    end
+
     def generate_auto_refresh_controls
       return '' unless SolidQueueMonitor.auto_refresh_enabled
 
@@ -194,7 +190,7 @@ module SolidQueueMonitor
     def generate_auto_refresh_script
       return '' unless SolidQueueMonitor.auto_refresh_enabled
 
-      "<script>#{auto_refresh_javascript}</script>"
+      "#{script_tag_open}#{auto_refresh_javascript}</script>"
     end
 
     def auto_refresh_javascript
@@ -229,7 +225,7 @@ module SolidQueueMonitor
           if (indicator) indicator.classList.toggle('active', isEnabled);
           if (countdownEl) {
             countdownEl.textContent = countdown + 's';
-            countdownEl.style.opacity = isEnabled ? '1' : '0.4';
+            countdownEl.classList.toggle('countdown-paused', !isEnabled);
           }
         }
         function tick() {
@@ -270,9 +266,10 @@ module SolidQueueMonitor
 
     def generate_chart_script
       <<-HTML
-        <script>
+        #{script_tag_open}
           #{theme_toggle_javascript}
           #{chart_tooltip_javascript}
+          #{global_behaviors_javascript}
         </script>
       HTML
     end
@@ -363,7 +360,7 @@ module SolidQueueMonitor
 
               tooltip.querySelector('.tooltip-label').textContent = label;
               tooltip.querySelector('.tooltip-value').textContent = seriesNames[series] + ': ' + value;
-              tooltip.style.display = 'block';
+              tooltip.classList.add('tooltip-visible');
               positionTooltip(e);
             });
 
@@ -372,7 +369,7 @@ module SolidQueueMonitor
             });
 
             point.addEventListener('mouseleave', function() {
-              tooltip.style.display = 'none';
+              tooltip.classList.remove('tooltip-visible');
             });
           });
 
@@ -387,6 +384,7 @@ module SolidQueueMonitor
               y = e.clientY + 10;
             }
 
+            // Dynamic cursor-tracked position, not CSP-restricted.
             tooltip.style.left = x + 'px';
             tooltip.style.top = y + 'px';
           }
@@ -394,6 +392,34 @@ module SolidQueueMonitor
       JS
     end
 
+    def global_behaviors_javascript
+      <<-JS
+        document.addEventListener('submit', function(e) {
+          var form = e.target;
+          var msg = form.dataset && form.dataset.confirm;
+          if (msg && !window.confirm(msg)) { e.preventDefault(); }
+        }, true);
+
+        document.addEventListener('click', function(e) {
+          var el = e.target.closest('[data-confirm-submit]');
+          if (!el) return;
+          e.preventDefault();
+          var msg = el.dataset.confirm || 'Are you sure?';
+          if (!window.confirm(msg)) return;
+          var formId = el.dataset.confirmSubmit;
+          var form = document.getElementById(formId);
+          if (form) form.submit();
+        });
+
+        var timeRangeSelect = document.getElementById('chart-time-select');
+        if (timeRangeSelect) {
+          timeRangeSelect.addEventListener('change', function() {
+            window.location.href = '?time_range=' + this.value;
+          });
+        }
+      JS
+    end
+
     def default_url_options
       { only_path: true }
     end

data/app/services/solid_queue_monitor/stylesheet_generator.rb

@@ -1088,6 +1088,18 @@ module SolidQueueMonitor
         border-radius: 2px;
       }
 
+      .solid_queue_monitor .legend-color-created {
+        background-color: #3b82f6;
+      }
+
+      .solid_queue_monitor .legend-color-completed {
+        background-color: #10b981;
+      }
+
+      .solid_queue_monitor .legend-color-failed {
+        background-color: #ef4444;
+      }
+
       .solid_queue_monitor .chart-tooltip {
         position: fixed;
         background: #1f2937;
@@ -2017,6 +2029,51 @@ module SolidQueueMonitor
           grid-template-columns: 1fr;
         }
       }
+
+      /* ===== CSP Phase 1 utility classes (replace runtime style mutations) ===== */
+
+      .is-hidden {
+        display: none !important;
+      }
+
+      .countdown-paused {
+        opacity: 0.4;
+      }
+
+      .is-expanded .collapse-icon {
+        transform: rotate(90deg);
+      }
+
+      .collapse-icon {
+        transition: transform 150ms ease;
+      }
+
+      .collapsible-content {
+        display: none;
+      }
+
+      .is-expanded .collapsible-content {
+        display: block;
+      }
+
+      .chart-tooltip {
+        display: none;
+        position: fixed;
+        pointer-events: none;
+      }
+
+      .chart-tooltip.tooltip-visible {
+        display: block;
+      }
+
+      #flash-message {
+        opacity: 1;
+        transition: opacity 500ms ease;
+      }
+
+      #flash-message.is-fading {
+        opacity: 0;
+      }
       CSS
     end
   end

data/lib/solid_queue_monitor/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module SolidQueueMonitor
-  VERSION = '1.2.1'
+  VERSION = '1.3.0'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: solid_queue_monitor
 version: !ruby/object:Gem::Version
-  version: 1.2.1
+  version: 1.3.0
 platform: ruby
 authors:
 - Vishal Sadriya