From 41d3d4da803d75b265fc69bf88b752eac94bca70 Mon Sep 17 00:00:00 2001
From: Vishal Sadriya <vishalsadriya.tps@gmail.com>
Date: Tue, 12 May 2026 15:19:52 +0530
Subject: [PATCH 1/7] refactor: migrate dashboard rendering to ERB views (WIP)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces 11 *Presenter classes with app/views/**.html.erb plus
app/helpers/solid_queue_monitor/* helpers. Serves CSS/JS via a new
AssetsController with content-hashed URLs, removing the need for
inline <style nonce>/<script nonce> blocks. Public API unchanged
(config block, mount, URLs, auth, CSP nonce support).

WIP: jobs#show specs failing with MissingExactTemplate despite the
template existing — diagnosis + Phase 6 cleanup + version bump still
pending in follow-up commits.
---
 .../solid_queue_monitor/application.js        |  393 ++++
 .../solid_queue_monitor/application.css       | 2086 +++++++++++++++++
 .../application_controller.rb                 |    4 +-
 .../solid_queue_monitor/assets_controller.rb  |   52 +
 .../failed_jobs_controller.rb                 |   10 +-
 .../in_progress_jobs_controller.rb            |    9 +-
 .../solid_queue_monitor/jobs_controller.rb    |   10 +-
 .../overview_controller.rb                    |   15 +-
 .../solid_queue_monitor/queues_controller.rb  |   22 +-
 .../ready_jobs_controller.rb                  |    9 +-
 .../recurring_jobs_controller.rb              |    9 +-
 .../scheduled_jobs_controller.rb              |   10 +-
 .../solid_queue_monitor/search_controller.rb  |    7 +-
 .../solid_queue_monitor/workers_controller.rb |   32 +-
 .../solid_queue_monitor/application_helper.rb |   46 +
 .../solid_queue_monitor/chart_helper.rb       |  293 +++
 .../solid_queue_monitor/job_details_helper.rb |   66 +
 .../solid_queue_monitor/jobs_helper.rb        |  124 +
 .../solid_queue_monitor/pagination_helper.rb  |   23 +
 .../solid_queue_monitor/sort_helper.rb        |   30 +
 .../solid_queue_monitor/workers_helper.rb     |   88 +
 .../solid_queue_monitor/base_presenter.rb     |    2 +
 .../failed_jobs_presenter.rb                  |  225 --
 .../in_progress_jobs_presenter.rb             |   84 -
 .../job_details_presenter.rb                  |  707 ------
 .../solid_queue_monitor/jobs_presenter.rb     |  144 --
 .../queue_details_presenter.rb                |  195 --
 .../solid_queue_monitor/queues_presenter.rb   |   89 -
 .../ready_jobs_presenter.rb                   |   81 -
 .../recurring_jobs_presenter.rb               |   81 -
 .../scheduled_jobs_presenter.rb               |  178 --
 .../search_results_presenter.rb               |  190 --
 .../solid_queue_monitor/workers_presenter.rb  |  325 ---
 .../solid_queue_monitor/asset_cache.rb        |   56 +
 .../solid_queue_monitor/chart_presenter.rb    |  239 --
 .../solid_queue_monitor/application.html.erb  |   25 +
 .../failed_jobs/_row.html.erb                 |   26 +
 .../failed_jobs/index.html.erb                |   38 +
 .../in_progress_jobs/_row.html.erb            |   13 +
 .../in_progress_jobs/index.html.erb           |   25 +
 .../jobs/_arguments.html.erb                  |    9 +
 .../solid_queue_monitor/jobs/_error.html.erb  |   26 +
 .../jobs/_execution_history.html.erb          |   25 +
 .../solid_queue_monitor/jobs/_header.html.erb |   36 +
 .../jobs/_metadata.html.erb                   |   22 +
 .../jobs/_raw_data.html.erb                   |   11 +
 .../jobs/_timeline.html.erb                   |   28 +
 .../solid_queue_monitor/jobs/_timing.html.erb |    9 +
 .../solid_queue_monitor/jobs/_worker.html.erb |   12 +
 .../solid_queue_monitor/jobs/show.html.erb    |   22 +
 .../overview/_chart.html.erb                  |    1 +
 .../overview/_recent_job_row.html.erb         |   26 +
 .../overview/_recent_jobs.html.erb            |   31 +
 .../overview/_stat_card.html.erb              |    4 +
 .../overview/_stats.html.erb                  |   11 +
 .../overview/index.html.erb                   |    9 +
 .../queues/_job_row.html.erb                  |   26 +
 .../solid_queue_monitor/queues/_row.html.erb  |   33 +
 .../solid_queue_monitor/queues/index.html.erb |   18 +
 .../solid_queue_monitor/queues/show.html.erb  |   63 +
 .../ready_jobs/_row.html.erb                  |    7 +
 .../ready_jobs/index.html.erb                 |   25 +
 .../recurring_jobs/_row.html.erb              |    8 +
 .../recurring_jobs/index.html.erb             |   26 +
 .../scheduled_jobs/_row.html.erb              |    7 +
 .../scheduled_jobs/index.html.erb             |   36 +
 .../search/_completed_row.html.erb            |    6 +
 .../search/_failed_row.html.erb               |    6 +
 .../search/_job_row.html.erb                  |    9 +
 .../search/_recurring_row.html.erb            |    6 +
 .../search/_section.html.erb                  |   25 +
 .../solid_queue_monitor/search/index.html.erb |   23 +
 .../shared/_filters.html.erb                  |   48 +
 .../shared/_flash.html.erb                    |   17 +
 .../shared/_footer.html.erb                   |    3 +
 .../shared/_header.html.erb                   |   81 +
 .../shared/_jobs_table.html.erb               |   20 +
 .../shared/_pagination.html.erb               |   25 +
 .../solid_queue_monitor/workers/_row.html.erb |   22 +
 .../workers/index.html.erb                    |   82 +
 config/routes.rb                              |    7 +-
 lib/solid_queue_monitor/engine.rb             |    2 +
 .../application_helper_spec.rb                |   60 +
 .../solid_queue_monitor/chart_helper_spec.rb  |   57 +
 .../solid_queue_monitor/jobs_helper_spec.rb   |   49 +
 .../pagination_helper_spec.rb                 |   23 +
 .../solid_queue_monitor/sort_helper_spec.rb   |   38 +
 .../failed_jobs_presenter_spec.rb             |   25 -
 .../job_details_presenter_spec.rb             |  175 --
 .../jobs_presenter_spec.rb                    |   58 -
 .../scheduled_jobs_presenter_spec.rb          |   25 -
 .../search_results_presenter_spec.rb          |  228 --
 .../solid_queue_monitor/assets_spec.rb        |   60 +
 .../csp_compatibility_spec.rb                 |   18 +-
 .../solid_queue_monitor/asset_cache_spec.rb   |   52 +
 95 files changed, 4702 insertions(+), 3140 deletions(-)
 create mode 100644 app/assets/javascripts/solid_queue_monitor/application.js
 create mode 100644 app/assets/stylesheets/solid_queue_monitor/application.css
 create mode 100644 app/controllers/solid_queue_monitor/assets_controller.rb
 create mode 100644 app/helpers/solid_queue_monitor/application_helper.rb
 create mode 100644 app/helpers/solid_queue_monitor/chart_helper.rb
 create mode 100644 app/helpers/solid_queue_monitor/job_details_helper.rb
 create mode 100644 app/helpers/solid_queue_monitor/jobs_helper.rb
 create mode 100644 app/helpers/solid_queue_monitor/pagination_helper.rb
 create mode 100644 app/helpers/solid_queue_monitor/sort_helper.rb
 create mode 100644 app/helpers/solid_queue_monitor/workers_helper.rb
 delete mode 100644 app/presenters/solid_queue_monitor/failed_jobs_presenter.rb
 delete mode 100644 app/presenters/solid_queue_monitor/in_progress_jobs_presenter.rb
 delete mode 100644 app/presenters/solid_queue_monitor/job_details_presenter.rb
 delete mode 100644 app/presenters/solid_queue_monitor/jobs_presenter.rb
 delete mode 100644 app/presenters/solid_queue_monitor/queue_details_presenter.rb
 delete mode 100644 app/presenters/solid_queue_monitor/queues_presenter.rb
 delete mode 100644 app/presenters/solid_queue_monitor/ready_jobs_presenter.rb
 delete mode 100644 app/presenters/solid_queue_monitor/recurring_jobs_presenter.rb
 delete mode 100644 app/presenters/solid_queue_monitor/scheduled_jobs_presenter.rb
 delete mode 100644 app/presenters/solid_queue_monitor/search_results_presenter.rb
 delete mode 100644 app/presenters/solid_queue_monitor/workers_presenter.rb
 create mode 100644 app/services/solid_queue_monitor/asset_cache.rb
 delete mode 100644 app/services/solid_queue_monitor/chart_presenter.rb
 create mode 100644 app/views/layouts/solid_queue_monitor/application.html.erb
 create mode 100644 app/views/solid_queue_monitor/failed_jobs/_row.html.erb
 create mode 100644 app/views/solid_queue_monitor/failed_jobs/index.html.erb
 create mode 100644 app/views/solid_queue_monitor/in_progress_jobs/_row.html.erb
 create mode 100644 app/views/solid_queue_monitor/in_progress_jobs/index.html.erb
 create mode 100644 app/views/solid_queue_monitor/jobs/_arguments.html.erb
 create mode 100644 app/views/solid_queue_monitor/jobs/_error.html.erb
 create mode 100644 app/views/solid_queue_monitor/jobs/_execution_history.html.erb
 create mode 100644 app/views/solid_queue_monitor/jobs/_header.html.erb
 create mode 100644 app/views/solid_queue_monitor/jobs/_metadata.html.erb
 create mode 100644 app/views/solid_queue_monitor/jobs/_raw_data.html.erb
 create mode 100644 app/views/solid_queue_monitor/jobs/_timeline.html.erb
 create mode 100644 app/views/solid_queue_monitor/jobs/_timing.html.erb
 create mode 100644 app/views/solid_queue_monitor/jobs/_worker.html.erb
 create mode 100644 app/views/solid_queue_monitor/jobs/show.html.erb
 create mode 100644 app/views/solid_queue_monitor/overview/_chart.html.erb
 create mode 100644 app/views/solid_queue_monitor/overview/_recent_job_row.html.erb
 create mode 100644 app/views/solid_queue_monitor/overview/_recent_jobs.html.erb
 create mode 100644 app/views/solid_queue_monitor/overview/_stat_card.html.erb
 create mode 100644 app/views/solid_queue_monitor/overview/_stats.html.erb
 create mode 100644 app/views/solid_queue_monitor/overview/index.html.erb
 create mode 100644 app/views/solid_queue_monitor/queues/_job_row.html.erb
 create mode 100644 app/views/solid_queue_monitor/queues/_row.html.erb
 create mode 100644 app/views/solid_queue_monitor/queues/index.html.erb
 create mode 100644 app/views/solid_queue_monitor/queues/show.html.erb
 create mode 100644 app/views/solid_queue_monitor/ready_jobs/_row.html.erb
 create mode 100644 app/views/solid_queue_monitor/ready_jobs/index.html.erb
 create mode 100644 app/views/solid_queue_monitor/recurring_jobs/_row.html.erb
 create mode 100644 app/views/solid_queue_monitor/recurring_jobs/index.html.erb
 create mode 100644 app/views/solid_queue_monitor/scheduled_jobs/_row.html.erb
 create mode 100644 app/views/solid_queue_monitor/scheduled_jobs/index.html.erb
 create mode 100644 app/views/solid_queue_monitor/search/_completed_row.html.erb
 create mode 100644 app/views/solid_queue_monitor/search/_failed_row.html.erb
 create mode 100644 app/views/solid_queue_monitor/search/_job_row.html.erb
 create mode 100644 app/views/solid_queue_monitor/search/_recurring_row.html.erb
 create mode 100644 app/views/solid_queue_monitor/search/_section.html.erb
 create mode 100644 app/views/solid_queue_monitor/search/index.html.erb
 create mode 100644 app/views/solid_queue_monitor/shared/_filters.html.erb
 create mode 100644 app/views/solid_queue_monitor/shared/_flash.html.erb
 create mode 100644 app/views/solid_queue_monitor/shared/_footer.html.erb
 create mode 100644 app/views/solid_queue_monitor/shared/_header.html.erb
 create mode 100644 app/views/solid_queue_monitor/shared/_jobs_table.html.erb
 create mode 100644 app/views/solid_queue_monitor/shared/_pagination.html.erb
 create mode 100644 app/views/solid_queue_monitor/workers/_row.html.erb
 create mode 100644 app/views/solid_queue_monitor/workers/index.html.erb
 create mode 100644 spec/helpers/solid_queue_monitor/application_helper_spec.rb
 create mode 100644 spec/helpers/solid_queue_monitor/chart_helper_spec.rb
 create mode 100644 spec/helpers/solid_queue_monitor/jobs_helper_spec.rb
 create mode 100644 spec/helpers/solid_queue_monitor/pagination_helper_spec.rb
 create mode 100644 spec/helpers/solid_queue_monitor/sort_helper_spec.rb
 delete mode 100644 spec/presenters/solid_queue_monitor/failed_jobs_presenter_spec.rb
 delete mode 100644 spec/presenters/solid_queue_monitor/job_details_presenter_spec.rb
 delete mode 100644 spec/presenters/solid_queue_monitor/jobs_presenter_spec.rb
 delete mode 100644 spec/presenters/solid_queue_monitor/scheduled_jobs_presenter_spec.rb
 delete mode 100644 spec/presenters/solid_queue_monitor/search_results_presenter_spec.rb
 create mode 100644 spec/requests/solid_queue_monitor/assets_spec.rb
 create mode 100644 spec/services/solid_queue_monitor/asset_cache_spec.rb

diff --git a/app/assets/javascripts/solid_queue_monitor/application.js b/app/assets/javascripts/solid_queue_monitor/application.js
new file mode 100644
index 0000000..3f73653
--- /dev/null
+++ b/app/assets/javascripts/solid_queue_monitor/application.js
@@ -0,0 +1,393 @@
+// Solid Queue Monitor - main script
+//
+// Runtime config is read from <body data-*> attributes set by the layout.
+// CSP-safe: no eval, no inline handlers, no string-to-code.
+
+(function () {
+  'use strict';
+
+  document.addEventListener('DOMContentLoaded', function () {
+    initFlashMessage();
+    initAutoRefresh();
+    initThemeToggle();
+    initChartCollapse();
+    initChartTooltip();
+    initScheduledBulkActions();
+    initFailedJobsBulkActions();
+    initJobDetailsBehaviors();
+    initGlobalBehaviors();
+  });
+
+  function initFlashMessage() {
+    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);
+  }
+
+  function initAutoRefresh() {
+    var cfg = document.body.dataset;
+    if (cfg.autoRefreshEnabled !== 'true') return;
+
+    var refreshInterval = parseInt(cfg.autoRefreshInterval, 10) || 30;
+    var countdown = refreshInterval;
+    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.classList.toggle('countdown-paused', !isEnabled);
+      }
+    }
+
+    function tick() {
+      countdown -= 1;
+      if (countdown <= 0) {
+        window.location.reload();
+      } else {
+        updateUI();
+      }
+    }
+
+    function stopTimer() {
+      if (timerId) {
+        clearInterval(timerId);
+        timerId = null;
+      }
+    }
+
+    function startTimer() {
+      stopTimer();
+      countdown = refreshInterval;
+      updateUI();
+      timerId = setInterval(tick, 1000);
+    }
+
+    function setEnabled(enabled) {
+      isEnabled = enabled;
+      localStorage.setItem('sqm_auto_refresh', enabled ? 'true' : 'false');
+
+      if (enabled) {
+        startTimer();
+      } else {
+        stopTimer();
+        countdown = refreshInterval;
+        updateUI();
+      }
+    }
+
+    if (toggle) {
+      toggle.addEventListener('change', function () { setEnabled(this.checked); });
+    }
+    if (refreshBtn) {
+      refreshBtn.addEventListener('click', function () { window.location.reload(); });
+    }
+
+    updateUI();
+    if (isEnabled) startTimer();
+  }
+
+  function initThemeToggle() {
+    var body = document.body;
+    var themeBtn = document.getElementById('theme-toggle-btn');
+    var storageKey = 'sqm_dark_theme';
+
+    function getPreferredTheme() {
+      var saved = localStorage.getItem(storageKey);
+      if (saved !== null) return saved === 'true';
+      return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+
+    function setTheme(isDark) {
+      body.classList.toggle('dark-theme', isDark);
+      localStorage.setItem(storageKey, isDark ? 'true' : 'false');
+    }
+
+    setTheme(getPreferredTheme());
+
+    if (themeBtn) {
+      themeBtn.addEventListener('click', function () {
+        setTheme(!body.classList.contains('dark-theme'));
+      });
+    }
+
+    if (window.matchMedia) {
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function (e) {
+        if (localStorage.getItem(storageKey) === null) setTheme(e.matches);
+      });
+    }
+  }
+
+  function initChartCollapse() {
+    var chartSection = document.getElementById('chart-section');
+    var toggleBtn = document.getElementById('chart-toggle-btn');
+    if (!chartSection || !toggleBtn) return;
+
+    if (localStorage.getItem('sqm_chart_collapsed') === 'true') {
+      chartSection.classList.add('collapsed');
+    }
+
+    toggleBtn.addEventListener('click', function () {
+      chartSection.classList.toggle('collapsed');
+      var collapsed = chartSection.classList.contains('collapsed');
+      localStorage.setItem('sqm_chart_collapsed', collapsed ? 'true' : 'false');
+    });
+  }
+
+  function initChartTooltip() {
+    var tooltip = document.getElementById('chart-tooltip');
+    if (!tooltip) return;
+
+    var dataPoints = document.querySelectorAll('.data-point');
+    var seriesNames = { created: 'Created', completed: 'Completed', failed: 'Failed' };
+
+    function positionTooltip(e) {
+      var x = e.clientX + 10;
+      var y = e.clientY - 30;
+
+      if (x + tooltip.offsetWidth > window.innerWidth) {
+        x = e.clientX - tooltip.offsetWidth - 10;
+      }
+      if (y < 0) {
+        y = e.clientY + 10;
+      }
+
+      tooltip.style.left = x + 'px';
+      tooltip.style.top = y + 'px';
+    }
+
+    dataPoints.forEach(function (point) {
+      point.addEventListener('mouseenter', function (e) {
+        var series = this.getAttribute('data-series');
+        var label = this.getAttribute('data-label');
+        var value = this.getAttribute('data-value');
+
+        tooltip.querySelector('.tooltip-label').textContent = label;
+        tooltip.querySelector('.tooltip-value').textContent = seriesNames[series] + ': ' + value;
+        tooltip.classList.add('tooltip-visible');
+        positionTooltip(e);
+      });
+
+      point.addEventListener('mousemove', positionTooltip);
+      point.addEventListener('mouseleave', function () {
+        tooltip.classList.remove('tooltip-visible');
+      });
+    });
+  }
+
+  function initGlobalBehaviors() {
+    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;
+      });
+    }
+  }
+
+  function initScheduledBulkActions() {
+    var form = document.getElementById('scheduled-jobs-form');
+    if (!form) return;
+
+    var selectAllCheckbox = document.getElementById('scheduled-jobs-select-all');
+    var executeButton = document.getElementById('execute-selected-top');
+    var rejectButton = document.getElementById('reject-selected-top');
+
+    function selectedCheckboxes() {
+      return Array.prototype.slice.call(document.querySelectorAll('input[name="job_ids[]"]:checked'));
+    }
+
+    function allJobCheckboxes() {
+      return Array.prototype.slice.call(document.getElementsByName('job_ids[]'));
+    }
+
+    function updateButtonStates() {
+      var checked = selectedCheckboxes().length > 0;
+      if (executeButton) executeButton.disabled = !checked;
+      if (rejectButton) rejectButton.disabled = !checked;
+    }
+
+    function submitForm(actionUrl, selectedIds) {
+      allJobCheckboxes().forEach(function (checkbox) { checkbox.checked = false; });
+      Array.prototype.slice.call(form.querySelectorAll('input[type="hidden"][name="job_ids[]"]')).forEach(function (input) {
+        input.remove();
+      });
+
+      form.action = actionUrl;
+      selectedIds.forEach(function (id) {
+        var input = document.createElement('input');
+        input.type = 'hidden';
+        input.name = 'job_ids[]';
+        input.value = id;
+        form.appendChild(input);
+      });
+      form.submit();
+    }
+
+    if (selectAllCheckbox) {
+      selectAllCheckbox.addEventListener('change', function () {
+        allJobCheckboxes().forEach(function (checkbox) { checkbox.checked = selectAllCheckbox.checked; });
+        updateButtonStates();
+      });
+    }
+
+    allJobCheckboxes().forEach(function (checkbox) {
+      checkbox.addEventListener('change', function () {
+        if (selectAllCheckbox) {
+          selectAllCheckbox.checked = allJobCheckboxes().every(function (item) { return item.checked; });
+        }
+        updateButtonStates();
+      });
+    });
+
+    if (executeButton) {
+      executeButton.addEventListener('click', function () {
+        var selectedIds = selectedCheckboxes().map(function (checkbox) { return checkbox.value; });
+        if (selectedIds.length > 0) submitForm(executeButton.dataset.actionUrl, selectedIds);
+      });
+    }
+
+    if (rejectButton) {
+      rejectButton.addEventListener('click', function () {
+        var selectedIds = selectedCheckboxes().map(function (checkbox) { return checkbox.value; });
+        if (selectedIds.length === 0) return;
+        if (window.confirm('Are you sure you want to reject the selected jobs? This action cannot be undone.')) {
+          submitForm(rejectButton.dataset.actionUrl, selectedIds);
+        }
+      });
+    }
+
+    updateButtonStates();
+  }
+
+  function initFailedJobsBulkActions() {
+    var form = document.getElementById('failed-jobs-form');
+    if (!form) return;
+
+    var selectAll = document.getElementById('select-all');
+    var retryButton = document.getElementById('retry-selected-top');
+    var discardButton = document.getElementById('discard-selected-top');
+
+    function checkboxes() {
+      return Array.prototype.slice.call(document.querySelectorAll('.job-checkbox'));
+    }
+
+    function checkedBoxes() {
+      return checkboxes().filter(function (checkbox) { return checkbox.checked; });
+    }
+
+    function updateButtonState() {
+      var anyChecked = checkedBoxes().length > 0;
+      if (retryButton) retryButton.disabled = !anyChecked;
+      if (discardButton) discardButton.disabled = !anyChecked;
+    }
+
+    function appendHidden(name, value) {
+      var input = document.createElement('input');
+      input.type = 'hidden';
+      input.name = name;
+      input.value = value;
+      form.appendChild(input);
+    }
+
+    function bulkSubmit(action, promptMsg) {
+      var ids = checkedBoxes().map(function (checkbox) { return checkbox.value; });
+      if (ids.length === 0 || !window.confirm(promptMsg)) return;
+      Array.prototype.slice.call(form.querySelectorAll('input[type="hidden"]')).forEach(function (input) { input.remove(); });
+      form.action = action;
+      ids.forEach(function (id) { appendHidden('job_ids[]', id); });
+      form.submit();
+    }
+
+    if (selectAll) {
+      selectAll.addEventListener('change', function () {
+        checkboxes().forEach(function (checkbox) { checkbox.checked = selectAll.checked; });
+        updateButtonState();
+      });
+    }
+
+    checkboxes().forEach(function (checkbox) {
+      checkbox.addEventListener('change', function () {
+        if (selectAll) selectAll.checked = checkedBoxes().length === checkboxes().length;
+        updateButtonState();
+      });
+    });
+
+    if (retryButton) {
+      retryButton.addEventListener('click', function () {
+        bulkSubmit(retryButton.dataset.actionUrl, 'Are you sure you want to retry the selected jobs?');
+      });
+    }
+    if (discardButton) {
+      discardButton.addEventListener('click', function () {
+        bulkSubmit(discardButton.dataset.actionUrl, 'Are you sure you want to discard the selected jobs?');
+      });
+    }
+
+    updateButtonState();
+  }
+
+  function initJobDetailsBehaviors() {
+    document.addEventListener('click', function (e) {
+      var el = e.target.closest('[data-action]');
+      if (!el) return;
+
+      if (el.dataset.stopPropagation === 'true') e.stopPropagation();
+
+      if (el.dataset.action === 'copy') {
+        var target = document.getElementById(el.dataset.target);
+        if (!target || !navigator.clipboard) return;
+        var original = el.innerHTML;
+        navigator.clipboard.writeText(target.innerText || target.textContent).then(function () {
+          el.innerHTML = 'Copied!';
+          setTimeout(function () { el.innerHTML = original; }, 2000);
+        });
+      }
+
+      if (el.dataset.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 (el.dataset.action === 'toggle-section') {
+        var section = el.closest('.collapsible-section');
+        if (section) section.classList.toggle('is-expanded');
+      }
+    });
+  }
+}());
diff --git a/app/assets/stylesheets/solid_queue_monitor/application.css b/app/assets/stylesheets/solid_queue_monitor/application.css
new file mode 100644
index 0000000..fe7e580
--- /dev/null
+++ b/app/assets/stylesheets/solid_queue_monitor/application.css
@@ -0,0 +1,2086 @@
+/*
+ * Solid Queue Monitor - main stylesheet
+ *
+ * Section index:
+ *   - Resets and base typography
+ *   - Layout (container, section, header, nav)
+ *   - Stats and charts
+ *   - Tables (jobs lists, sortable headers, pagination)
+ *   - Forms (filters, search, auth-refresh toggle)
+ *   - Messages (flash, tooltips)
+ *   - Theme overrides (dark-theme)
+ *
+ * Edit this file directly. Do NOT regenerate from stylesheet_generator.rb -
+ * that class is being removed in v2.0.
+ */
+
+        .solid_queue_monitor {
+          --primary-color: #3b82f6;
+          --success-color: #10b981;
+          --error-color: #ef4444;
+          --warning-color: #f59e0b;
+          --text-color: #1f2937;
+          --text-muted: #6b7280;
+          --border-color: #e5e7eb;
+          --background-color: #f9fafb;
+          --card-background: #ffffff;
+          --card-shadow: 0 1px 3px rgba(0,0,0,0.1);
+          --input-background: #ffffff;
+          --input-border: #d1d5db;
+          --hover-background: #f3f4f6;
+          --code-background: #f5f5f5;
+        }
+
+        /* Dark theme */
+        .solid_queue_monitor.dark-theme {
+          --primary-color: #60a5fa;
+          --success-color: #34d399;
+          --error-color: #f87171;
+          --warning-color: #fbbf24;
+          --text-color: #f9fafb;
+          --text-muted: #9ca3af;
+          --border-color: #2d2d2d;
+          --background-color: #000000;
+          --card-background: #121212;
+          --card-shadow: 0 1px 3px rgba(0,0,0,0.5);
+          --input-background: #1e1e1e;
+          --input-border: #3d3d3d;
+          --hover-background: #1e1e1e;
+          --code-background: #1e1e1e;
+        }
+
+        .solid_queue_monitor * { box-sizing: border-box; margin: 0; padding: 0; }
+
+        .solid_queue_monitor {
+          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+          line-height: 1.5;
+          color: var(--text-color);
+          background: var(--background-color);
+        }
+
+        .solid_queue_monitor .container {
+          width: 95%;
+          max-width: 1800px;
+          margin: 0 auto;
+          padding: 2rem;
+        }
+
+        .solid_queue_monitor header {
+          margin-bottom: 2rem;
+          text-align: center;
+        }
+
+        .solid_queue_monitor h1 {
+          font-size: 2rem;
+          font-weight: 600;
+          margin-bottom: 0.5rem;
+        }
+
+        .solid_queue_monitor .header-title-link {
+          color: var(--text-color);
+          text-decoration: none;
+          transition: color 0.2s;
+        }
+
+        .solid_queue_monitor .header-title-link:hover {
+          color: var(--primary-color);
+        }
+
+        .solid_queue_monitor .navigation {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: center;
+          gap: 0.5rem;
+          padding: 0.5rem;
+        }
+
+        .solid_queue_monitor .nav-link {
+          text-decoration: none;
+          color: var(--text-color);
+          padding: 0.5rem 1rem;
+          border-radius: 0.375rem;
+          background: var(--card-background);
+          box-shadow: var(--card-shadow);
+          transition: all 0.2s;
+        }
+
+        .solid_queue_monitor .nav-link:hover {
+          background: var(--primary-color);
+          color: white;
+        }
+
+        .solid_queue_monitor .section-wrapper {
+          margin-top: 2rem;
+        }
+
+
+        .solid_queue_monitor .section h2 {
+          padding: 1rem;
+          border-bottom: 1px solid var(--border-color);
+          font-size: 1.25rem;
+          background: var(--background-color);
+        }
+
+        .solid_queue_monitor .section-header-row {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 1.5rem;
+          padding: 1rem;
+          background: var(--card-background);
+          border-radius: 0.5rem;
+          box-shadow: var(--card-shadow);
+        }
+
+        .solid_queue_monitor .section-header-left {
+          display: flex;
+          align-items: center;
+          gap: 1rem;
+        }
+
+        .solid_queue_monitor .section-header-right {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+
+        .solid_queue_monitor .stats-container {
+          margin-bottom: 2rem;
+        }
+
+        .solid_queue_monitor .stats {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          gap: 1rem;
+          margin: 0 -0.5rem;
+        }
+
+        .solid_queue_monitor .stat-card {
+          flex: 1 1 0;
+          min-width: 150px;
+          background: var(--card-background);
+          padding: 1.5rem 1rem;
+          border-radius: 0.5rem;
+          box-shadow: var(--card-shadow);
+          text-align: center;
+        }
+
+        .solid_queue_monitor .stat-card h3 {
+          color: var(--text-muted);
+          font-size: 0.875rem;
+          text-transform: uppercase;
+          letter-spacing: 0.05em;
+          margin-bottom: 0.5rem;
+        }
+
+        .solid_queue_monitor .stat-card p {
+          font-size: 1.5rem;
+          font-weight: 600;
+          color: var(--primary-color);
+        }
+
+        .solid_queue_monitor .section h2 {
+          padding: 1rem;
+          border-bottom: 1px solid var(--border-color);
+          font-size: 1.25rem;
+        }
+
+        .solid_queue_monitor .table-container {
+          width: 100%;
+          overflow-x: auto;
+          -webkit-overflow-scrolling: touch;
+        }
+
+        .solid_queue_monitor table {
+          width: 100%;
+          min-width: 800px; /* Ensures table doesn't get too squeezed */
+          border-collapse: collapse;
+          white-space: nowrap;
+        }
+
+        .solid_queue_monitor th, 
+        .solid_queue_monitor td {
+          padding: 0.75rem 1rem;
+          text-align: left;
+          border-bottom: 1px solid var(--border-color);
+        }
+
+        .solid_queue_monitor th {
+          background: var(--hover-background);
+          font-weight: 500;
+          font-size: 0.875rem;
+          text-transform: uppercase;
+          letter-spacing: 0.05em;
+          color: var(--text-muted);
+        }
+
+        .solid_queue_monitor .sortable-header {
+          color: var(--text-muted);
+          text-decoration: none;
+          cursor: pointer;
+          transition: color 0.2s;
+        }
+
+        .solid_queue_monitor .sortable-header:hover {
+          color: var(--primary-color);
+        }
+
+        .solid_queue_monitor .sortable-header.active {
+          color: var(--primary-color);
+          font-weight: 600;
+        }
+
+        .solid_queue_monitor .status-badge {
+          display: inline-block;
+          padding: 0.25rem 0.5rem;
+          border-radius: 9999px;
+          font-size: 0.75rem;
+          font-weight: 500;
+        }
+
+        .solid_queue_monitor .table-actions {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 1rem;
+          border-top: 1px solid var(--border-color);
+        }
+
+        .solid_queue_monitor .select-all {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          cursor: pointer;
+        }
+
+        .solid_queue_monitor .execute-btn:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+
+        .solid_queue_monitor input[type="checkbox"] {
+          width: 1rem;
+          height: 1rem;
+          cursor: pointer;
+        }
+
+        .solid_queue_monitor .status-completed { background: #d1fae5; color: #065f46; }
+        .solid_queue_monitor .status-failed { background: #fee2e2; color: #991b1b; }
+        .solid_queue_monitor .status-scheduled { background: #dbeafe; color: #1e40af; }
+        .solid_queue_monitor .status-pending { background: #f3f4f6; color: #374151; }
+        .solid_queue_monitor .status-active { background: #d1fae5; color: #065f46; }
+        .solid_queue_monitor .status-paused { background: #fef3c7; color: #92400e; }
+
+        .solid_queue_monitor .queue-paused {
+          background-color: #fffbeb;
+        }
+
+        .solid_queue_monitor .pause-button {
+          background: #f59e0b;
+          color: white;
+        }
+
+        .solid_queue_monitor .pause-button:hover {
+          background: #d97706;
+        }
+
+        .solid_queue_monitor .resume-button {
+          background: #10b981;
+          color: white;
+        }
+
+        .solid_queue_monitor .resume-button:hover {
+          background: #059669;
+        }
+
+        .solid_queue_monitor .execute-btn {
+          background: var(--primary-color);
+          color: white;
+          border: none;
+          padding: 0.5rem 1rem;
+          border-radius: 0.375rem;
+          font-size: 0.875rem;
+          cursor: pointer;
+          transition: background-color 0.2s;
+        }
+
+        .solid_queue_monitor .execute-btn:hover {
+          background: #2563eb;
+        }
+
+        .solid_queue_monitor .message {
+          padding: 1rem;
+          margin-bottom: 1rem;
+          border-radius: 0.375rem;
+          transition: opacity 0.5s ease-in-out;
+        }
+
+        .solid_queue_monitor .message-success {
+          background: #d1fae5;
+          color: #065f46;
+        }
+
+        .solid_queue_monitor .message-error {
+          background: #fee2e2;
+          color: #991b1b;
+        }
+
+        .solid_queue_monitor footer {
+          text-align: center;
+          padding: 2rem 0;
+          color: var(--text-muted);
+        }
+
+        .solid_queue_monitor .pagination {
+          display: flex;
+          justify-content: center;
+          gap: 0.5rem;
+          margin-top: 1rem;
+          padding: 1rem;
+        }
+
+        .solid_queue_monitor .pagination-nav {
+          padding: 0.5rem 1rem;
+          font-size: 0.875rem;
+        }
+        
+        .solid_queue_monitor .pagination-gap {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          min-width: 2rem;
+          height: 2rem;
+          padding: 0 0.5rem;
+          color: var(--text-color);
+        }
+
+        .solid_queue_monitor .pagination-link.disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+          pointer-events: none;
+        }
+
+        .solid_queue_monitor .pagination-link,
+        .solid_queue_monitor .pagination-current {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          min-width: 2rem;
+          height: 2rem;
+          padding: 0 0.5rem;
+          border-radius: 0.375rem;
+          font-size: 0.875rem;
+          text-decoration: none;
+          transition: all 0.2s;
+        }
+
+        .solid_queue_monitor .pagination-link {
+          background: var(--card-background);
+          color: var(--text-color);
+          border: 1px solid var(--border-color);
+        }
+
+        .solid_queue_monitor .pagination-link:hover {
+          background: var(--primary-color);
+          color: white;
+          border-color: var(--primary-color);
+        }
+
+        .solid_queue_monitor .pagination-current {
+          background: var(--primary-color);
+          color: white;
+          font-weight: 500;
+        }
+
+        /* Arguments styling */
+        .solid_queue_monitor .args-container {
+          position: relative;
+          max-height: 100px;
+          overflow: hidden;
+        }
+
+        .solid_queue_monitor .args-content {
+          display: block;
+          white-space: pre-wrap;
+          word-break: break-word;
+          max-height: 100px;
+          overflow-y: auto;
+          padding: 8px;
+          background: var(--code-background);
+          border-radius: 4px;
+          font-size: 0.9em;
+        }
+
+        .solid_queue_monitor .args-single-line {
+          display: inline-block;
+          padding: 4px 8px;
+          background: var(--code-background);
+          border-radius: 4px;
+          font-size: 0.9em;
+        }
+
+        .solid_queue_monitor .args-content::-webkit-scrollbar {
+          width: 8px;
+        }
+
+        .solid_queue_monitor .args-content::-webkit-scrollbar-track {
+          background: #f1f1f1;
+          border-radius: 4px;
+        }
+
+        .solid_queue_monitor .args-content::-webkit-scrollbar-thumb {
+          background: #888;
+          border-radius: 4px;
+        }
+
+        .solid_queue_monitor .args-content::-webkit-scrollbar-thumb:hover {
+          background: #666;
+        }
+
+      @media (max-width: 768px) {
+        .solid_queue_monitor .container {
+          padding: 0.5rem;
+        }
+
+        .solid_queue_monitor .stats {
+          margin: 0;
+        }
+
+        .solid_queue_monitor .stat-card {
+          flex: 1 1 calc(33.333% - 1rem);
+          min-width: 120px;
+        }
+
+        .solid_queue_monitor .section {
+          margin: 0.5rem 0;
+          border-radius: 0.375rem;
+        }
+
+        .solid_queue_monitor .table-container {
+          width: 100%;
+          overflow-x: auto;
+        }
+      }
+
+      @media (max-width: 480px) {
+        .solid_queue_monitor .stat-card {
+          flex: 1 1 calc(50% - 1rem);
+        }
+
+        .solid_queue_monitor .nav-link {
+          width: 100%;
+          text-align: center;
+        }
+        .solid_queue_monitor .pagination-nav {
+          display: none;
+        }
+      }
+
+      .solid_queue_monitor .filter-and-actions-container {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        gap: 1rem;
+        margin-bottom: 1rem;
+      }
+
+      .solid_queue_monitor .filter-form-container {
+        background: var(--card-background);
+        padding: 1rem;
+        border-radius: 0.5rem;
+        box-shadow: var(--card-shadow);
+        flex: 3;
+      }
+
+      .solid_queue_monitor .bulk-actions-container {
+        display: flex;
+        flex-direction: row;
+        gap: 0.75rem;
+        padding: 1rem;
+        background: var(--card-background);
+        border-radius: 0.5rem;
+        box-shadow: var(--card-shadow);
+        flex: 2;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .solid_queue_monitor .large-button {
+        padding: 0.75rem 1.25rem;
+        font-size: 0.9rem;
+        text-align: center;
+        flex: 1;
+      }
+
+      @media (max-width: 992px) {
+        .solid_queue_monitor .filter-and-actions-container {
+          flex-direction: column;
+        }
+        
+        .solid_queue_monitor .bulk-actions-container {
+          width: 100%;
+        }
+      }
+
+      .solid_queue_monitor .filter-form {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1rem;
+        align-items: flex-end;
+      }
+
+      .solid_queue_monitor .filter-group {
+        flex: 1;
+        min-width: 200px;
+      }
+
+      .solid_queue_monitor .filter-group label {
+        display: block;
+        margin-bottom: 0.5rem;
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: var(--text-muted);
+      }
+
+      .solid_queue_monitor .filter-group input,
+      .solid_queue_monitor .filter-group select {
+        width: 100%;
+        padding: 0.5rem;
+        border: 1px solid var(--input-border);
+        border-radius: 0.375rem;
+        font-size: 0.875rem;
+        background: var(--input-background);
+        color: var(--text-color);
+      }
+
+      .solid_queue_monitor .filter-actions {
+        display: flex;
+        gap: 0.5rem;
+      }
+
+      .solid_queue_monitor .filter-button {
+        background: var(--primary-color);
+        color: white;
+        border: none;
+        padding: 0.5rem 1rem;
+        border-radius: 0.375rem;
+        font-size: 0.875rem;
+        cursor: pointer;
+        transition: background-color 0.2s;
+      }
+
+      .solid_queue_monitor .filter-button:hover {
+        background: #2563eb;
+      }
+
+      .solid_queue_monitor .reset-button {
+        background: var(--hover-background);
+        color: var(--text-muted);
+        border: 1px solid var(--border-color);
+        padding: 0.5rem 1rem;
+        border-radius: 0.375rem;
+        font-size: 0.875rem;
+        text-decoration: none;
+        cursor: pointer;
+        transition: background-color 0.2s;
+      }
+
+      .solid_queue_monitor .reset-button:hover {
+        background: var(--border-color);
+      }
+
+      .solid_queue_monitor .action-button {
+        padding: 0.5rem 1rem;
+        border-radius: 0.375rem;
+        font-size: 0.75rem;
+        font-weight: 500;
+        cursor: pointer;
+        transition: background-color 0.2s;
+        border: none;
+        text-decoration: none;
+      }
+
+      .solid_queue_monitor .retry-button {
+        background: #3b82f6;
+        color: white;
+      }
+
+      .solid_queue_monitor .retry-button:hover {
+        background: #2563eb;
+      }
+
+      .solid_queue_monitor .discard-button {
+        background: #ef4444;
+        color: white;
+      }
+
+      .solid_queue_monitor .discard-button:hover {
+        background: #dc2626;
+      }
+
+      .solid_queue_monitor .action-button:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .solid_queue_monitor .inline-form {
+        display: inline-block;
+        margin-right: 0.5rem;
+      }
+
+      .solid_queue_monitor .actions-cell {
+        white-space: nowrap;
+      }
+
+      .solid_queue_monitor .bulk-actions {
+        display: flex;
+        gap: 0.5rem;
+      }
+
+      .solid_queue_monitor .error-message {
+        color: #dc2626;
+        font-weight: 500;
+        margin-bottom: 0.25rem;
+      }
+
+      .solid_queue_monitor .error-backtrace {
+        font-size: 0.75rem;
+        white-space: pre-wrap;
+        max-height: 200px;
+        overflow-y: auto;
+        background: var(--code-background);
+        padding: 0.5rem;
+        border-radius: 0.25rem;
+        margin-top: 0.5rem;
+      }
+
+      .solid_queue_monitor details {
+        margin-top: 0.25rem;
+      }
+
+      .solid_queue_monitor summary {
+        cursor: pointer;
+        color: var(--text-muted);
+        font-size: 0.75rem;
+      }
+
+      .solid_queue_monitor summary:hover {
+        color: var(--text-color);
+      }
+
+      .solid_queue_monitor .job-checkbox,
+      .solid_queue_monitor .select-all-checkbox {
+        width: 1rem;
+        height: 1rem;
+      }
+
+      .solid_queue_monitor .bulk-actions-bar {
+        display: flex;
+        gap: 0.75rem;
+        margin: 1rem 0;
+        background: var(--card-background);
+        padding: 0.75rem;
+        border-radius: 0.5rem;
+        box-shadow: var(--card-shadow);
+      }
+
+      .solid_queue_monitor .bulk-actions-bar .action-button {
+        padding: 0.6rem 1rem;
+        font-size: 0.875rem;
+      }
+
+      .solid_queue_monitor .execute-button {
+        background: var(--primary-color);
+        color: white;
+      }
+
+      .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: var(--card-background);
+        border-radius: 2rem;
+        box-shadow: var(--card-shadow);
+        font-size: 0.75rem;
+        color: var(--text-muted);
+        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: var(--border-color);
+        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: var(--border-color);
+        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: var(--card-background);
+        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: var(--text-muted);
+        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;
+        }
+      }
+
+      /* Navigation active state */
+      .solid_queue_monitor .nav-link.active {
+        background: var(--primary-color);
+        color: white;
+        border-left: 3px solid #1d4ed8;
+      }
+
+      /* Chart styles */
+      .solid_queue_monitor .chart-section {
+        background: var(--card-background);
+        border-radius: 0.5rem;
+        box-shadow: var(--card-shadow);
+        padding: 1rem 1.5rem;
+        margin-bottom: 2rem;
+      }
+
+      .solid_queue_monitor .chart-section.collapsed {
+        padding-bottom: 1rem;
+      }
+
+      .solid_queue_monitor .chart-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 0.75rem;
+      }
+
+      .solid_queue_monitor .chart-header-left {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        flex-wrap: wrap;
+      }
+
+      .solid_queue_monitor .chart-header h3 {
+        font-size: 1rem;
+        font-weight: 600;
+        color: var(--text-color);
+        margin: 0;
+      }
+
+      .solid_queue_monitor .chart-toggle-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        background: var(--hover-background);
+        border: 1px solid var(--border-color);
+        border-radius: 0.375rem;
+        cursor: pointer;
+        color: var(--text-muted);
+        transition: all 0.2s;
+      }
+
+      .solid_queue_monitor .chart-toggle-btn:hover {
+        background: var(--border-color);
+        color: var(--text-color);
+      }
+
+      .solid_queue_monitor .chart-toggle-icon {
+        transition: transform 0.2s;
+      }
+
+      .solid_queue_monitor .chart-section.collapsed .chart-toggle-icon {
+        transform: rotate(-90deg);
+      }
+
+      .solid_queue_monitor .chart-summary {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 0.8rem;
+        color: var(--text-muted);
+        margin-left: 0.5rem;
+        padding-left: 0.75rem;
+        border-left: 1px solid var(--border-color);
+      }
+
+      .solid_queue_monitor .summary-item {
+        white-space: nowrap;
+      }
+
+      .solid_queue_monitor .summary-created {
+        color: #3b82f6;
+      }
+
+      .solid_queue_monitor .summary-completed {
+        color: #10b981;
+      }
+
+      .solid_queue_monitor .summary-failed {
+        color: #ef4444;
+      }
+
+      .solid_queue_monitor .summary-separator {
+        color: var(--border-color);
+      }
+
+      .solid_queue_monitor .chart-time-select-wrapper {
+        position: relative;
+      }
+
+      .solid_queue_monitor .chart-time-select {
+        appearance: none;
+        padding: 0.5rem 2rem 0.5rem 0.75rem;
+        font-size: 0.8rem;
+        color: var(--text-color);
+        background: var(--input-background);
+        border: 1px solid var(--border-color);
+        border-radius: 0.375rem;
+        cursor: pointer;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-position: right 0.5rem center;
+        background-size: 14px;
+        min-width: 140px;
+      }
+
+      .solid_queue_monitor .chart-time-select:hover {
+        border-color: var(--text-muted);
+      }
+
+      .solid_queue_monitor .chart-time-select:focus {
+        outline: none;
+        border-color: var(--primary-color);
+        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+      }
+
+      .solid_queue_monitor .chart-collapsible {
+        overflow: hidden;
+        transition: max-height 0.3s ease-out, opacity 0.2s ease-out, margin-top 0.3s ease-out;
+        max-height: 500px;
+        opacity: 1;
+        margin-top: 1rem;
+      }
+
+      .solid_queue_monitor .chart-section.collapsed .chart-collapsible {
+        max-height: 0;
+        opacity: 0;
+        margin-top: 0;
+      }
+
+      .solid_queue_monitor .chart-container {
+        width: 100%;
+        overflow-x: auto;
+        overflow-y: hidden;
+      }
+
+      .solid_queue_monitor .chart-container svg {
+        display: block;
+        width: 100%;
+        height: auto;
+      }
+
+      .solid_queue_monitor .job-activity-chart {
+        width: 100%;
+        height: auto;
+        min-height: 250px;
+      }
+
+      .solid_queue_monitor .grid-line {
+        stroke: var(--border-color);
+        stroke-width: 1;
+        stroke-dasharray: 4 4;
+      }
+
+      .solid_queue_monitor .axis-line {
+        stroke: var(--border-color);
+        stroke-width: 1;
+      }
+
+      .solid_queue_monitor .axis-label {
+        font-size: 11px;
+        fill: var(--text-muted);
+      }
+
+      .solid_queue_monitor .x-label {
+        text-anchor: middle;
+      }
+
+      .solid_queue_monitor .y-label {
+        text-anchor: end;
+      }
+
+      .solid_queue_monitor .chart-line {
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+
+      .solid_queue_monitor .data-point {
+        cursor: pointer;
+        transition: r 0.2s;
+      }
+
+      .solid_queue_monitor .data-point:hover {
+        r: 6;
+      }
+
+      .solid_queue_monitor .chart-legend {
+        display: flex;
+        justify-content: center;
+        gap: 1.5rem;
+        margin-top: 1rem;
+        flex-wrap: wrap;
+      }
+
+      .solid_queue_monitor .legend-item {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        font-size: 0.875rem;
+        color: var(--text-muted);
+      }
+
+      .solid_queue_monitor .legend-color {
+        width: 12px;
+        height: 12px;
+        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;
+        color: white;
+        padding: 0.5rem 0.75rem;
+        border-radius: 0.375rem;
+        font-size: 0.75rem;
+        pointer-events: none;
+        z-index: 1000;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+      }
+
+      .solid_queue_monitor .tooltip-label {
+        font-weight: 500;
+        margin-bottom: 0.25rem;
+      }
+
+      .solid_queue_monitor .tooltip-value {
+        color: #d1d5db;
+      }
+
+      .solid_queue_monitor .chart-empty {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 200px;
+        color: var(--text-muted);
+        font-size: 0.875rem;
+      }
+
+      @media (max-width: 768px) {
+        .solid_queue_monitor .chart-section {
+          padding: 1rem;
+        }
+
+        .solid_queue_monitor .chart-header {
+          flex-direction: column;
+          align-items: flex-start;
+        }
+
+        .solid_queue_monitor .chart-header-left {
+          width: 100%;
+          flex-wrap: wrap;
+        }
+
+        .solid_queue_monitor .chart-summary {
+          margin-left: 0;
+          padding-left: 0;
+          border-left: none;
+          margin-top: 0.5rem;
+          width: 100%;
+        }
+
+        .solid_queue_monitor .chart-time-select {
+          width: 100%;
+        }
+
+        .solid_queue_monitor .job-activity-chart {
+          min-height: 200px;
+        }
+
+        .solid_queue_monitor .chart-legend {
+          gap: 1rem;
+        }
+      }
+
+      /* Theme toggle button */
+      .solid_queue_monitor .theme-toggle-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+        background: var(--card-background);
+        border: 1px solid var(--border-color);
+        border-radius: 50%;
+        cursor: pointer;
+        color: var(--text-muted);
+        transition: all 0.2s;
+        box-shadow: var(--card-shadow);
+      }
+
+      .solid_queue_monitor .theme-toggle-btn:hover {
+        color: var(--text-color);
+        border-color: var(--text-muted);
+      }
+
+      .solid_queue_monitor .theme-toggle-btn svg {
+        width: 18px;
+        height: 18px;
+      }
+
+      /* Hide moon icon in light mode, show sun icon */
+      .solid_queue_monitor .theme-icon-moon {
+        display: none;
+      }
+
+      .solid_queue_monitor .theme-icon-sun {
+        display: block;
+      }
+
+      /* In dark mode, show moon icon, hide sun icon */
+      .solid_queue_monitor.dark-theme .theme-icon-moon {
+        display: block;
+      }
+
+      .solid_queue_monitor.dark-theme .theme-icon-sun {
+        display: none;
+      }
+
+      .solid_queue_monitor .header-controls {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+      }
+
+      /* Header Search Box */
+      .solid_queue_monitor .header-search-form {
+        display: flex;
+        align-items: center;
+        gap: 0;
+        flex: 1;
+        max-width: 400px;
+        margin: 0 1rem;
+      }
+
+      .solid_queue_monitor .header-search-input {
+        flex: 1;
+        padding: 0.5rem 0.75rem;
+        border: 1px solid var(--input-border);
+        border-right: none;
+        border-radius: 0.375rem 0 0 0.375rem;
+        font-size: 0.875rem;
+        background: var(--input-background);
+        color: var(--text-color);
+        outline: none;
+        transition: border-color 0.2s, box-shadow 0.2s;
+      }
+
+      .solid_queue_monitor .header-search-input:focus {
+        border-color: var(--primary-color);
+        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+      }
+
+      .solid_queue_monitor .header-search-input::placeholder {
+        color: var(--text-muted);
+      }
+
+      .solid_queue_monitor .header-search-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.5rem 0.75rem;
+        background: var(--primary-color);
+        color: white;
+        border: 1px solid var(--primary-color);
+        border-radius: 0 0.375rem 0.375rem 0;
+        cursor: pointer;
+        transition: background-color 0.2s;
+      }
+
+      .solid_queue_monitor .header-search-button:hover {
+        background: #2563eb;
+        border-color: #2563eb;
+      }
+
+      .solid_queue_monitor .header-search-button svg {
+        width: 16px;
+        height: 16px;
+      }
+
+      @media (max-width: 768px) {
+        .solid_queue_monitor .header-search-form {
+          max-width: 100%;
+          margin: 0.5rem 0;
+          order: 3;
+          width: 100%;
+        }
+      }
+
+      /* Search Results Page */
+      .solid_queue_monitor .results-summary {
+        margin: 1rem 0;
+        padding: 0.75rem 1rem;
+        background: var(--card-background);
+        border-radius: 0.375rem;
+        box-shadow: var(--card-shadow);
+      }
+
+      .solid_queue_monitor .results-summary p {
+        margin: 0;
+        color: var(--text-muted);
+        font-size: 0.875rem;
+      }
+
+      .solid_queue_monitor .search-results-section {
+        margin-top: 1.5rem;
+      }
+
+      .solid_queue_monitor .search-results-section h3 {
+        font-size: 1rem;
+        font-weight: 600;
+        color: var(--text-color);
+        margin-bottom: 0.75rem;
+        padding-bottom: 0.5rem;
+        border-bottom: 1px solid var(--border-color);
+      }
+
+      /* Workers Page Styles */
+      .solid_queue_monitor .workers-summary {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 1rem;
+        margin-bottom: 1.5rem;
+      }
+
+      .solid_queue_monitor .summary-card {
+        background: var(--card-background);
+        border: 1px solid var(--border-color);
+        border-radius: 0.5rem;
+        padding: 1rem 1.25rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.25rem;
+        border-left: 4px solid var(--border-color);
+        position: relative;
+      }
+
+      .solid_queue_monitor .summary-card .summary-label {
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--text-muted);
+      }
+
+      .solid_queue_monitor .summary-card .summary-value {
+        font-size: 1.75rem;
+        font-weight: 600;
+        color: var(--text-color);
+      }
+
+      .solid_queue_monitor .summary-healthy {
+        border-left-color: #10b981;
+      }
+
+      .solid_queue_monitor .summary-healthy .summary-value {
+        color: #10b981;
+      }
+
+      .solid_queue_monitor .summary-stale {
+        border-left-color: #f59e0b;
+      }
+
+      .solid_queue_monitor .summary-stale .summary-value {
+        color: #f59e0b;
+      }
+
+      .solid_queue_monitor .summary-dead {
+        border-left-color: #ef4444;
+      }
+
+      .solid_queue_monitor .summary-dead .summary-value {
+        color: #ef4444;
+      }
+
+      .solid_queue_monitor .summary-action {
+        font-size: 0.75rem;
+        color: #f59e0b;
+        text-decoration: none;
+        border: 1px solid #f59e0b;
+        padding: 0.25rem 0.5rem;
+        border-radius: 0.25rem;
+        margin-top: 0.5rem;
+        transition: all 0.2s;
+      }
+
+      .solid_queue_monitor .summary-action:hover {
+        background: #f59e0b;
+        color: #000;
+      }
+
+      .solid_queue_monitor .kind-badge {
+        display: inline-block;
+        padding: 0.25rem 0.5rem;
+        border-radius: 0.25rem;
+        font-size: 0.75rem;
+        font-weight: 500;
+      }
+
+      .solid_queue_monitor .kind-worker {
+        background: rgba(59, 130, 246, 0.15);
+        color: #3b82f6;
+      }
+
+      .solid_queue_monitor .kind-dispatcher {
+        background: rgba(249, 115, 22, 0.15);
+        color: #f97316;
+      }
+
+      .solid_queue_monitor .kind-scheduler {
+        background: rgba(168, 85, 247, 0.15);
+        color: #a855f7;
+      }
+
+      .solid_queue_monitor .kind-other {
+        background: rgba(107, 114, 128, 0.15);
+        color: #6b7280;
+      }
+
+      .solid_queue_monitor .status-healthy {
+        background: rgba(16, 185, 129, 0.15);
+        color: #10b981;
+      }
+
+      .solid_queue_monitor .status-stale {
+        background: rgba(245, 158, 11, 0.15);
+        color: #f59e0b;
+      }
+
+      .solid_queue_monitor .status-dead {
+        background: rgba(239, 68, 68, 0.15);
+        color: #ef4444;
+      }
+
+      .solid_queue_monitor .queue-tag {
+        display: inline-block;
+        background: var(--card-background);
+        border: 1px solid var(--border-color);
+        padding: 0.125rem 0.375rem;
+        border-radius: 0.25rem;
+        font-size: 0.75rem;
+        margin-right: 0.25rem;
+      }
+
+      .solid_queue_monitor .queue-more {
+        color: var(--text-muted);
+        font-size: 0.75rem;
+      }
+
+      .solid_queue_monitor .jobs-idle {
+        color: var(--text-muted);
+        font-style: italic;
+      }
+
+      .solid_queue_monitor .jobs-processing {
+        color: #10b981;
+      }
+
+      .solid_queue_monitor .jobs-processing .job-names {
+        color: var(--text-muted);
+        font-size: 0.8em;
+      }
+
+      .solid_queue_monitor .worker-dead {
+        background: rgba(239, 68, 68, 0.05);
+      }
+
+      .solid_queue_monitor .worker-stale {
+        background: rgba(245, 158, 11, 0.05);
+      }
+
+      .solid_queue_monitor .action-placeholder {
+        color: var(--text-muted);
+      }
+
+      /* Table Link Styles */
+      .solid_queue_monitor .job-class-link {
+        color: var(--text-color);
+        text-decoration: none;
+        transition: color 0.2s;
+      }
+
+      .solid_queue_monitor .job-class-link:hover {
+        color: #3b82f6;
+        text-decoration: underline;
+      }
+
+      .solid_queue_monitor .queue-link {
+        color: var(--text-color);
+        text-decoration: none;
+        transition: color 0.2s;
+      }
+
+      .solid_queue_monitor .queue-link:hover {
+        color: #3b82f6;
+        text-decoration: underline;
+      }
+
+      .solid_queue_monitor .back-link {
+        color: var(--text-muted);
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.25rem;
+        font-size: 0.875rem;
+        transition: color 0.2s;
+      }
+
+      .solid_queue_monitor .back-link:hover {
+        color: var(--text-color);
+      }
+
+      .solid_queue_monitor .job-back-link {
+        margin-bottom: 1rem;
+      }
+
+      .solid_queue_monitor .empty-state {
+        text-align: center;
+        padding: 3rem 1rem;
+        color: var(--text-muted);
+      }
+
+      .solid_queue_monitor .empty-state p {
+        margin: 0.5rem 0;
+      }
+
+      .solid_queue_monitor .empty-state-hint {
+        font-size: 0.875rem;
+        opacity: 0.7;
+      }
+
+      /* Job Details Page Styles */
+      .solid_queue_monitor .job-details-page {
+        width: 100%;
+      }
+
+      .solid_queue_monitor .job-header {
+        background: var(--card-background);
+        border-radius: 0.5rem;
+        padding: 1.5rem;
+        margin-bottom: 1.5rem;
+        box-shadow: var(--card-shadow);
+      }
+
+      .solid_queue_monitor .job-header-main {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        margin-bottom: 0.75rem;
+        flex-wrap: wrap;
+      }
+
+      .solid_queue_monitor .job-title {
+        font-size: 1.5rem;
+        font-weight: 600;
+        color: var(--text-color);
+        margin: 0;
+      }
+
+      .solid_queue_monitor .job-status-badge {
+        padding: 0.375rem 0.75rem;
+        border-radius: 9999px;
+        font-size: 0.75rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+
+      .solid_queue_monitor .job-header-meta {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        color: var(--text-muted);
+        font-size: 0.875rem;
+        flex-wrap: wrap;
+      }
+
+      .solid_queue_monitor .job-separator {
+        color: var(--border-color);
+      }
+
+      .solid_queue_monitor .job-actions {
+        display: flex;
+        gap: 0.5rem;
+        margin-top: 1rem;
+      }
+
+      .solid_queue_monitor .job-section {
+        background: var(--card-background);
+        border-radius: 0.5rem;
+        padding: 1.25rem;
+        margin-bottom: 1rem;
+        box-shadow: var(--card-shadow);
+      }
+
+      .solid_queue_monitor .job-section .section-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 1rem;
+      }
+
+      .solid_queue_monitor .job-section .section-title {
+        font-size: 1rem;
+        font-weight: 600;
+        color: var(--text-color);
+        margin: 0;
+      }
+
+      .solid_queue_monitor .section-subtitle {
+        color: var(--text-muted);
+        font-size: 0.875rem;
+      }
+
+      /* Timing Cards */
+      .solid_queue_monitor .timing-cards {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 1rem;
+        margin-bottom: 1.5rem;
+      }
+
+      .solid_queue_monitor .timing-card {
+        background: var(--card-background);
+        border-radius: 0.5rem;
+        padding: 1.25rem;
+        text-align: center;
+        box-shadow: var(--card-shadow);
+        border: 1px solid var(--border-color);
+      }
+
+      .solid_queue_monitor .timing-value {
+        font-size: 1.5rem;
+        font-weight: 700;
+        color: var(--text-color);
+        margin-bottom: 0.25rem;
+      }
+
+      .solid_queue_monitor .timing-label {
+        font-size: 0.75rem;
+        color: var(--text-muted);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+
+      .solid_queue_monitor .timing-indicator {
+        display: inline-block;
+        padding: 0.125rem 0.5rem;
+        border-radius: 9999px;
+        font-size: 0.625rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        margin-top: 0.5rem;
+      }
+
+      .solid_queue_monitor .indicator-good {
+        background: rgba(16, 185, 129, 0.15);
+        color: #10b981;
+      }
+
+      .solid_queue_monitor .indicator-normal {
+        background: rgba(59, 130, 246, 0.15);
+        color: #3b82f6;
+      }
+
+      .solid_queue_monitor .indicator-warning {
+        background: rgba(245, 158, 11, 0.15);
+        color: #f59e0b;
+      }
+
+      /* Timeline */
+      .solid_queue_monitor .job-timeline {
+        padding: 0.5rem 0;
+      }
+
+      .solid_queue_monitor .timeline-track {
+        display: flex;
+        justify-content: space-between;
+        position: relative;
+      }
+
+      .solid_queue_monitor .timeline-event {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: relative;
+        flex: 1;
+      }
+
+      .solid_queue_monitor .timeline-dot {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background: var(--border-color);
+        border: 2px solid var(--card-background);
+        z-index: 1;
+      }
+
+      .solid_queue_monitor .timeline-line {
+        position: absolute;
+        top: 5px;
+        left: calc(50% + 6px);
+        right: calc(-50% + 6px);
+        height: 2px;
+        background: var(--border-color);
+      }
+
+      .solid_queue_monitor .timeline-content {
+        text-align: center;
+        margin-top: 0.5rem;
+      }
+
+      .solid_queue_monitor .timeline-label {
+        font-size: 0.75rem;
+        font-weight: 600;
+        color: var(--text-color);
+      }
+
+      .solid_queue_monitor .timeline-time {
+        font-size: 0.625rem;
+        color: var(--text-muted);
+        margin-top: 0.125rem;
+      }
+
+      .solid_queue_monitor .timeline-done .timeline-dot {
+        background: #10b981;
+      }
+
+      .solid_queue_monitor .timeline-done .timeline-line {
+        background: #10b981;
+      }
+
+      .solid_queue_monitor .timeline-success .timeline-dot {
+        background: #10b981;
+        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
+      }
+
+      .solid_queue_monitor .timeline-failed .timeline-dot {
+        background: #ef4444;
+        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
+      }
+
+      .solid_queue_monitor .timeline-active .timeline-dot {
+        background: #3b82f6;
+        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
+        animation: pulse 2s infinite;
+      }
+
+      @keyframes pulse {
+        0%, 100% { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2); }
+        50% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.1); }
+      }
+
+      /* Error Section */
+      .solid_queue_monitor .error-section {
+        border-left: 4px solid #ef4444;
+      }
+
+      .solid_queue_monitor .error-type {
+        font-size: 1rem;
+        font-weight: 600;
+        color: #ef4444;
+        margin-bottom: 0.5rem;
+      }
+
+      .solid_queue_monitor .error-message-box {
+        background: rgba(239, 68, 68, 0.1);
+        border-radius: 0.375rem;
+        padding: 0.75rem 1rem;
+        color: var(--text-color);
+        font-size: 0.875rem;
+        line-height: 1.5;
+      }
+
+      /* Backtrace */
+      .solid_queue_monitor .backtrace-section {
+        margin-top: 1rem;
+      }
+
+      .solid_queue_monitor .backtrace-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 0.5rem;
+      }
+
+      .solid_queue_monitor .backtrace-title {
+        font-size: 0.75rem;
+        font-weight: 600;
+        color: var(--text-muted);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+
+      .solid_queue_monitor .backtrace-toggle {
+        display: flex;
+        gap: 0.25rem;
+      }
+
+      .solid_queue_monitor .toggle-btn {
+        padding: 0.25rem 0.5rem;
+        font-size: 0.625rem;
+        border: 1px solid var(--border-color);
+        background: transparent;
+        color: var(--text-muted);
+        border-radius: 0.25rem;
+        cursor: pointer;
+        transition: all 0.2s;
+      }
+
+      .solid_queue_monitor .toggle-btn:hover {
+        border-color: var(--text-muted);
+      }
+
+      .solid_queue_monitor .toggle-btn.active {
+        background: var(--primary-color);
+        border-color: var(--primary-color);
+        color: white;
+      }
+
+      .solid_queue_monitor .backtrace-content {
+        background: var(--code-background);
+        border-radius: 0.375rem;
+        padding: 0.75rem;
+        font-size: 0.75rem;
+        line-height: 1.6;
+        overflow-x: auto;
+        margin: 0;
+        max-height: 300px;
+        overflow-y: auto;
+      }
+
+      .solid_queue_monitor .backtrace-line {
+        display: block;
+        color: var(--text-color);
+      }
+
+      .solid_queue_monitor .backtrace-line .line-number {
+        color: var(--text-muted);
+        margin-right: 0.5rem;
+        user-select: none;
+      }
+
+      /* Details Grid */
+      .solid_queue_monitor .details-grid {
+        display: grid;
+        gap: 0.75rem;
+      }
+
+      .solid_queue_monitor .detail-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.5rem 0;
+        border-bottom: 1px solid var(--border-color);
+      }
+
+      .solid_queue_monitor .detail-row:last-child {
+        border-bottom: none;
+      }
+
+      .solid_queue_monitor .detail-label {
+        font-size: 0.875rem;
+        color: var(--text-muted);
+      }
+
+      .solid_queue_monitor .detail-value {
+        font-size: 0.875rem;
+        color: var(--text-color);
+        text-align: right;
+      }
+
+      .solid_queue_monitor .detail-mono {
+        font-family: ui-monospace, monospace;
+        font-size: 0.8rem;
+      }
+
+      /* Arguments Content */
+      .solid_queue_monitor .arguments-content {
+        background: var(--code-background);
+        border-radius: 0.375rem;
+        padding: 1rem;
+        font-size: 0.8rem;
+        line-height: 1.5;
+        overflow-x: auto;
+        margin: 0;
+        font-family: ui-monospace, monospace;
+      }
+
+      /* Copy Button */
+      .solid_queue_monitor .copy-button {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.25rem;
+        padding: 0.375rem 0.625rem;
+        font-size: 0.75rem;
+        color: var(--text-muted);
+        background: transparent;
+        border: 1px solid var(--border-color);
+        border-radius: 0.25rem;
+        cursor: pointer;
+        transition: all 0.2s;
+      }
+
+      .solid_queue_monitor .copy-button:hover {
+        color: var(--text-color);
+        border-color: var(--text-muted);
+      }
+
+      /* Collapsible Section */
+      .solid_queue_monitor .collapsible-header {
+        cursor: pointer;
+        user-select: none;
+      }
+
+      .solid_queue_monitor .collapsible-title {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+
+      .solid_queue_monitor .collapse-icon {
+        transition: transform 0.2s;
+        color: var(--text-muted);
+      }
+
+      .solid_queue_monitor .collapsible-content {
+        margin-top: 1rem;
+      }
+
+      .solid_queue_monitor .raw-data-content {
+        background: var(--code-background);
+        border-radius: 0.375rem;
+        padding: 1rem;
+        font-size: 0.75rem;
+        line-height: 1.5;
+        overflow-x: auto;
+        margin: 0;
+        font-family: ui-monospace, monospace;
+        max-height: 400px;
+        overflow-y: auto;
+      }
+
+      /* Recent Executions Table */
+      .solid_queue_monitor .recent-executions-table {
+        width: 100%;
+      }
+
+      .solid_queue_monitor .mini-status-badge {
+        display: inline-block;
+        padding: 0.125rem 0.375rem;
+        border-radius: 0.25rem;
+        font-size: 0.625rem;
+        font-weight: 600;
+        text-transform: uppercase;
+      }
+
+      .solid_queue_monitor .args-preview {
+        max-width: 200px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .solid_queue_monitor .args-preview a {
+        color: var(--text-color);
+        text-decoration: none;
+      }
+
+      .solid_queue_monitor .args-preview a:hover {
+        color: #3b82f6;
+        text-decoration: underline;
+      }
+
+      /* Queue Badge in Job Details */
+      .solid_queue_monitor .queue-badge {
+        display: inline-block;
+        padding: 0.25rem 0.5rem;
+        background: var(--code-background);
+        border-radius: 0.25rem;
+        font-size: 0.875rem;
+        color: var(--text-color);
+        text-decoration: none;
+      }
+
+      .solid_queue_monitor .queue-badge:hover {
+        color: #3b82f6;
+      }
+
+      @media (max-width: 768px) {
+        .solid_queue_monitor .timing-cards {
+          grid-template-columns: 1fr;
+        }
+
+        .solid_queue_monitor .timeline-track {
+          flex-direction: column;
+          gap: 1rem;
+        }
+
+        .solid_queue_monitor .timeline-line {
+          display: none;
+        }
+
+        .solid_queue_monitor .timeline-event {
+          flex-direction: row;
+          gap: 1rem;
+        }
+
+        .solid_queue_monitor .timeline-content {
+          text-align: left;
+          margin-top: 0;
+        }
+
+        .solid_queue_monitor .detail-row {
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 0.25rem;
+        }
+
+        .solid_queue_monitor .detail-value {
+          text-align: left;
+        }
+
+        .solid_queue_monitor .job-header-main {
+          flex-direction: column;
+          align-items: flex-start;
+        }
+
+        .solid_queue_monitor .workers-summary {
+          grid-template-columns: repeat(2, 1fr);
+        }
+      }
+
+      @media (max-width: 480px) {
+        .solid_queue_monitor .workers-summary {
+          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;
+      }
diff --git a/app/controllers/solid_queue_monitor/application_controller.rb b/app/controllers/solid_queue_monitor/application_controller.rb
index df62b8a..5761622 100644
--- a/app/controllers/solid_queue_monitor/application_controller.rb
+++ b/app/controllers/solid_queue_monitor/application_controller.rb
@@ -6,7 +6,7 @@ class ApplicationController < ActionController::Base
     include ActionController::Flash
 
     before_action :authenticate, if: -> { SolidQueueMonitor::AuthenticationService.authentication_required? }
-    layout false
+    layout 'solid_queue_monitor/application'
     skip_before_action :verify_authenticity_token
 
     def set_flash_message(message, type)
@@ -17,7 +17,7 @@ def set_flash_message(message, type)
       # Try to use Rails flash if available
       begin
         flash[:notice] = message if type == :success
-        flash[:alert] = message if type == :error
+        flash[:alert]  = message if type == :error
       rescue StandardError
         # Flash not available (e.g., no session middleware)
       end
diff --git a/app/controllers/solid_queue_monitor/assets_controller.rb b/app/controllers/solid_queue_monitor/assets_controller.rb
new file mode 100644
index 0000000..9d03c83
--- /dev/null
+++ b/app/controllers/solid_queue_monitor/assets_controller.rb
@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module SolidQueueMonitor
+  class AssetsController < ApplicationController
+    skip_before_action :authenticate, raise: false
+
+    MIME_TYPES = { '.css' => 'text/css', '.js' => 'application/javascript' }.freeze
+    FINGERPRINT_PATTERN = /\A(?<base>[A-Za-z0-9_]+)-(?<hash>[a-f0-9]+)(?<ext>\.css|\.js)\z/
+
+    def show
+      asset_request = parse_asset_request
+      return head(:not_found) unless asset_request
+
+      asset = SolidQueueMonitor::AssetCache.fetch_by_name(asset_request[:file_name])
+      return head(:not_found) unless asset
+      return head(:not_found) unless fingerprint_matches?(asset[:etag], asset_request[:hash])
+
+      assign_asset_headers(asset)
+      return head(:not_modified) if etag_matches?
+
+      render plain: asset[:content], content_type: MIME_TYPES[asset_request[:ext]]
+    end
+
+    private
+
+    def parse_asset_request
+      match = FINGERPRINT_PATTERN.match(params[:file])
+      return nil unless match
+
+      {
+        ext: match[:ext],
+        file_name: "#{match[:base]}#{match[:ext]}",
+        hash: match[:hash]
+      }
+    end
+
+    def fingerprint_matches?(expected, actual)
+      expected.bytesize == actual.bytesize && Rack::Utils.secure_compare(expected, actual)
+    end
+
+    def assign_asset_headers(asset)
+      response.headers['Cache-Control'] = "public, max-age=#{1.year.to_i}, immutable"
+      response.headers['ETag'] = %("#{asset[:etag]}")
+      response.headers['Last-Modified'] = asset[:mtime].httpdate
+      response.headers['Vary'] = 'Accept-Encoding'
+    end
+
+    def etag_matches?
+      request.headers['If-None-Match'].to_s.split(',').map(&:strip).include?(response.headers['ETag'])
+    end
+  end
+end
diff --git a/app/controllers/solid_queue_monitor/failed_jobs_controller.rb b/app/controllers/solid_queue_monitor/failed_jobs_controller.rb
index 59323b1..69726a1 100644
--- a/app/controllers/solid_queue_monitor/failed_jobs_controller.rb
+++ b/app/controllers/solid_queue_monitor/failed_jobs_controller.rb
@@ -8,13 +8,9 @@ def index
       base_query = SolidQueue::FailedExecution.includes(:job)
       sorted_query = apply_execution_sorting(filter_failed_jobs(base_query), SORTABLE_COLUMNS, 'created_at', :desc)
       @failed_jobs = paginate(sorted_query)
-
-      render_page('Failed Jobs', SolidQueueMonitor::FailedJobsPresenter.new(@failed_jobs[:records],
-                                                                            current_page: @failed_jobs[:current_page],
-                                                                            total_pages: @failed_jobs[:total_pages],
-                                                                            filters: filter_params,
-                                                                            sort: sort_params,
-                                                                            nonce: content_security_policy_nonce).render)
+      @filters = filter_params
+      @sort = sort_params
+      @action_path = failed_jobs_path
     end
 
     def retry
diff --git a/app/controllers/solid_queue_monitor/in_progress_jobs_controller.rb b/app/controllers/solid_queue_monitor/in_progress_jobs_controller.rb
index b01c4c0..455b3b8 100644
--- a/app/controllers/solid_queue_monitor/in_progress_jobs_controller.rb
+++ b/app/controllers/solid_queue_monitor/in_progress_jobs_controller.rb
@@ -8,12 +8,9 @@ def index
       base_query = SolidQueue::ClaimedExecution.includes(:job)
       sorted_query = apply_execution_sorting(filter_in_progress_jobs(base_query), SORTABLE_COLUMNS, 'created_at', :desc)
       @in_progress_jobs = paginate(sorted_query)
-
-      render_page('In Progress Jobs', SolidQueueMonitor::InProgressJobsPresenter.new(@in_progress_jobs[:records],
-                                                                                     current_page: @in_progress_jobs[:current_page],
-                                                                                     total_pages: @in_progress_jobs[:total_pages],
-                                                                                     filters: filter_params,
-                                                                                     sort: sort_params).render)
+      @filters = filter_params
+      @sort = sort_params
+      @action_path = in_progress_jobs_path
     end
 
     private
diff --git a/app/controllers/solid_queue_monitor/jobs_controller.rb b/app/controllers/solid_queue_monitor/jobs_controller.rb
index 8f7d009..f3bf21d 100644
--- a/app/controllers/solid_queue_monitor/jobs_controller.rb
+++ b/app/controllers/solid_queue_monitor/jobs_controller.rb
@@ -11,13 +11,9 @@ def show
         return
       end
 
-      job_data = load_job_data(@job)
-
-      render_page("Job ##{@job.id}", SolidQueueMonitor::JobDetailsPresenter.new(
-        @job,
-        **job_data,
-        nonce: content_security_policy_nonce
-      ).render)
+      load_job_data(@job).each do |name, value|
+        instance_variable_set("@#{name}", value)
+      end
     end
 
     private
diff --git a/app/controllers/solid_queue_monitor/overview_controller.rb b/app/controllers/solid_queue_monitor/overview_controller.rb
index b892db8..0d4c916 100644
--- a/app/controllers/solid_queue_monitor/overview_controller.rb
+++ b/app/controllers/solid_queue_monitor/overview_controller.rb
@@ -7,14 +7,15 @@ class OverviewController < BaseController
     def index
       @stats = SolidQueueMonitor::StatsCalculator.calculate
       @chart_data = SolidQueueMonitor.show_chart ? SolidQueueMonitor::ChartDataService.new(time_range: time_range_param).calculate : nil
+      @time_range = time_range_param
 
       recent_jobs_query = SolidQueue::Job.limit(100)
       sorted_query = apply_sorting(filter_jobs(recent_jobs_query), SORTABLE_COLUMNS, 'created_at', :desc)
       @recent_jobs = paginate(sorted_query)
+      @filters = filter_params
+      @sort = sort_params
 
       preload_job_statuses(@recent_jobs[:records])
-
-      render_page('Overview', generate_overview_content)
     end
 
     def chart_data
@@ -27,15 +28,5 @@ def chart_data
     def time_range_param
       params[:time_range] || ChartDataService::DEFAULT_TIME_RANGE
     end
-
-    def generate_overview_content
-      html = SolidQueueMonitor::StatsPresenter.new(@stats).render
-      html += SolidQueueMonitor::ChartPresenter.new(@chart_data).render if @chart_data
-      html + SolidQueueMonitor::JobsPresenter.new(@recent_jobs[:records],
-                                                  current_page: @recent_jobs[:current_page],
-                                                  total_pages: @recent_jobs[:total_pages],
-                                                  filters: filter_params,
-                                                  sort: sort_params).render
-    end
   end
 end
diff --git a/app/controllers/solid_queue_monitor/queues_controller.rb b/app/controllers/solid_queue_monitor/queues_controller.rb
index b420537..2d26327 100644
--- a/app/controllers/solid_queue_monitor/queues_controller.rb
+++ b/app/controllers/solid_queue_monitor/queues_controller.rb
@@ -11,12 +11,7 @@ def index
       @queues = apply_queue_sorting(base_query)
       @paused_queues = QueuePauseService.paused_queues
       @queue_stats = aggregate_queue_stats
-
-      render_page('Queues', SolidQueueMonitor::QueuesPresenter.new(
-        @queues, @paused_queues,
-        queue_stats: @queue_stats,
-        sort: sort_params
-      ).render)
+      @sort = sort_params
     end
 
     def show
@@ -30,18 +25,9 @@ def show
       preload_job_statuses(@jobs[:records])
 
       @counts = calculate_queue_counts(@queue_name)
-
-      render_page("Queue: #{@queue_name}",
-                  SolidQueueMonitor::QueueDetailsPresenter.new(
-                    queue_name: @queue_name,
-                    paused: @paused,
-                    jobs: @jobs[:records],
-                    counts: @counts,
-                    current_page: @jobs[:current_page],
-                    total_pages: @jobs[:total_pages],
-                    filters: queue_filter_params,
-                    sort: sort_params
-                  ).render)
+      @filters = queue_filter_params
+      @sort = sort_params
+      @action_path = queue_details_path(queue_name: @queue_name)
     end
 
     def pause
diff --git a/app/controllers/solid_queue_monitor/ready_jobs_controller.rb b/app/controllers/solid_queue_monitor/ready_jobs_controller.rb
index 9ba4b98..10cf70e 100644
--- a/app/controllers/solid_queue_monitor/ready_jobs_controller.rb
+++ b/app/controllers/solid_queue_monitor/ready_jobs_controller.rb
@@ -8,12 +8,9 @@ def index
       base_query = SolidQueue::ReadyExecution.includes(:job)
       sorted_query = apply_execution_sorting(filter_ready_jobs(base_query), SORTABLE_COLUMNS, 'created_at', :desc)
       @ready_jobs = paginate(sorted_query)
-
-      render_page('Ready Jobs', SolidQueueMonitor::ReadyJobsPresenter.new(@ready_jobs[:records],
-                                                                          current_page: @ready_jobs[:current_page],
-                                                                          total_pages: @ready_jobs[:total_pages],
-                                                                          filters: filter_params,
-                                                                          sort: sort_params).render)
+      @filters = filter_params
+      @sort = sort_params
+      @action_path = ready_jobs_path
     end
   end
 end
diff --git a/app/controllers/solid_queue_monitor/recurring_jobs_controller.rb b/app/controllers/solid_queue_monitor/recurring_jobs_controller.rb
index 6e5121a..21aaf7c 100644
--- a/app/controllers/solid_queue_monitor/recurring_jobs_controller.rb
+++ b/app/controllers/solid_queue_monitor/recurring_jobs_controller.rb
@@ -8,12 +8,9 @@ def index
       base_query = filter_recurring_jobs(SolidQueue::RecurringTask.all)
       sorted_query = apply_sorting(base_query, SORTABLE_COLUMNS, 'key', :asc)
       @recurring_jobs = paginate(sorted_query)
-
-      render_page('Recurring Jobs', SolidQueueMonitor::RecurringJobsPresenter.new(@recurring_jobs[:records],
-                                                                                  current_page: @recurring_jobs[:current_page],
-                                                                                  total_pages: @recurring_jobs[:total_pages],
-                                                                                  filters: filter_params,
-                                                                                  sort: sort_params).render)
+      @filters = filter_params
+      @sort = sort_params
+      @action_path = recurring_jobs_path
     end
   end
 end
diff --git a/app/controllers/solid_queue_monitor/scheduled_jobs_controller.rb b/app/controllers/solid_queue_monitor/scheduled_jobs_controller.rb
index 6818d49..50cb387 100644
--- a/app/controllers/solid_queue_monitor/scheduled_jobs_controller.rb
+++ b/app/controllers/solid_queue_monitor/scheduled_jobs_controller.rb
@@ -8,13 +8,9 @@ def index
       base_query = SolidQueue::ScheduledExecution.includes(:job)
       sorted_query = apply_execution_sorting(filter_scheduled_jobs(base_query), SORTABLE_COLUMNS, 'scheduled_at', :asc)
       @scheduled_jobs = paginate(sorted_query)
-
-      render_page('Scheduled Jobs', SolidQueueMonitor::ScheduledJobsPresenter.new(@scheduled_jobs[:records],
-                                                                                  current_page: @scheduled_jobs[:current_page],
-                                                                                  total_pages: @scheduled_jobs[:total_pages],
-                                                                                  filters: filter_params,
-                                                                                  sort: sort_params,
-                                                                                  nonce: content_security_policy_nonce).render)
+      @filters = filter_params
+      @sort = sort_params
+      @action_path = scheduled_jobs_path
     end
 
     def create
diff --git a/app/controllers/solid_queue_monitor/search_controller.rb b/app/controllers/solid_queue_monitor/search_controller.rb
index ca0108e..002dbd0 100644
--- a/app/controllers/solid_queue_monitor/search_controller.rb
+++ b/app/controllers/solid_queue_monitor/search_controller.rb
@@ -3,10 +3,9 @@
 module SolidQueueMonitor
   class SearchController < BaseController
     def index
-      query = params[:q]
-      results = SearchService.new(query).search
-
-      render_page('Search', SearchResultsPresenter.new(query, results).render, search_query: query)
+      @query = params[:q]
+      @results = SearchService.new(@query).search
+      @total_count = @results.values.sum(&:size)
     end
   end
 end
diff --git a/app/controllers/solid_queue_monitor/workers_controller.rb b/app/controllers/solid_queue_monitor/workers_controller.rb
index fdfbdee..4d75f39 100644
--- a/app/controllers/solid_queue_monitor/workers_controller.rb
+++ b/app/controllers/solid_queue_monitor/workers_controller.rb
@@ -8,14 +8,11 @@ def index
       base_query = SolidQueue::Process.all
       sorted_query = apply_sorting(filter_workers(base_query), SORTABLE_COLUMNS, 'last_heartbeat_at', :desc)
       @processes = paginate(sorted_query)
-
-      render_page('Workers', SolidQueueMonitor::WorkersPresenter.new(
-        @processes[:records],
-        current_page: @processes[:current_page],
-        total_pages: @processes[:total_pages],
-        filters: worker_filter_params,
-        sort: sort_params
-      ).render)
+      @process_records = @processes[:records].to_a
+      @filters = worker_filter_params
+      @sort = sort_params
+      @summary = worker_summary
+      preload_claimed_data
     end
 
     def remove
@@ -73,5 +70,24 @@ def worker_filter_params
         status: params[:status]
       }
     end
+
+    def worker_summary
+      all_processes = SolidQueue::Process.all.to_a
+      {
+        total: all_processes.count,
+        healthy: all_processes.count { |process| view_context.worker_status(process) == :healthy },
+        stale: all_processes.count { |process| view_context.worker_status(process) == :stale },
+        dead: all_processes.count { |process| view_context.worker_status(process) == :dead }
+      }
+    end
+
+    def preload_claimed_data
+      process_ids = @process_records.map(&:id)
+      @claimed_counts = SolidQueue::ClaimedExecution.where(process_id: process_ids).group(:process_id).count
+      @claimed_jobs = SolidQueue::ClaimedExecution.includes(:job).where(process_id: process_ids).each_with_object({}) do |execution, hash|
+        hash[execution.process_id] ||= []
+        hash[execution.process_id] << execution.job
+      end
+    end
   end
 end
diff --git a/app/helpers/solid_queue_monitor/application_helper.rb b/app/helpers/solid_queue_monitor/application_helper.rb
new file mode 100644
index 0000000..7efbea1
--- /dev/null
+++ b/app/helpers/solid_queue_monitor/application_helper.rb
@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module SolidQueueMonitor
+  module ApplicationHelper
+    def asset_url_for(file_name)
+      base = File.basename(file_name, '.*')
+      ext = File.extname(file_name)
+      hash = SolidQueueMonitor::AssetCache.fingerprint_for(file_name)
+      fingerprinted_file = "#{base}-#{hash}#{ext}"
+
+      if respond_to?(:solid_queue_monitor)
+        solid_queue_monitor.asset_path(file: fingerprinted_file)
+      else
+        SolidQueueMonitor::Engine.routes.url_helpers.asset_path(file: fingerprinted_file)
+      end
+    end
+
+    def format_datetime(datetime)
+      return '-' unless datetime
+
+      datetime.strftime('%Y-%m-%d %H:%M:%S')
+    end
+
+    def message_class(type)
+      type.to_s == 'success' ? 'message-success' : 'message-error'
+    end
+
+    def queue_link(queue_name, css_class: nil)
+      return '-' if queue_name.blank?
+
+      link_to(queue_name,
+              queue_details_url_for(queue_name),
+              class: class_names('queue-link', css_class))
+    end
+
+    private
+
+    def queue_details_url_for(queue_name)
+      if respond_to?(:queue_details_path)
+        queue_details_path(queue_name: queue_name)
+      else
+        SolidQueueMonitor::Engine.routes.url_helpers.queue_details_path(queue_name: queue_name)
+      end
+    end
+  end
+end
diff --git a/app/helpers/solid_queue_monitor/chart_helper.rb b/app/helpers/solid_queue_monitor/chart_helper.rb
new file mode 100644
index 0000000..bba2c04
--- /dev/null
+++ b/app/helpers/solid_queue_monitor/chart_helper.rb
@@ -0,0 +1,293 @@
+# frozen_string_literal: true
+
+module SolidQueueMonitor
+  # rubocop:disable Metrics/ModuleLength
+  module ChartHelper
+    CHART_WIDTH = 1200
+    CHART_HEIGHT = 280
+    PADDING = { top: 40, right: 30, bottom: 60, left: 60 }.freeze
+    COLORS = {
+      created: '#3b82f6',
+      completed: '#10b981',
+      failed: '#ef4444'
+    }.freeze
+    SERIES = %i[failed completed created].freeze
+
+    def render_chart(data:, time_range: nil)
+      context = chart_context(data, time_range)
+
+      safe_join(
+        [
+          chart_section(context),
+          chart_tooltip
+        ]
+      )
+    end
+
+    def chart_time_range_options
+      SolidQueueMonitor::ChartDataService::TIME_RANGES.map do |key, config|
+        [config[:label], key]
+      end
+    end
+
+    private
+
+    def chart_context(data, time_range)
+      {
+        data: data.merge(time_range: time_range || data[:time_range]),
+        plot_width: CHART_WIDTH - PADDING[:left] - PADDING[:right],
+        plot_height: CHART_HEIGHT - PADDING[:top] - PADDING[:bottom]
+      }
+    end
+
+    def chart_section(context)
+      tag.div(id: 'chart-section', class: 'chart-section') do
+        safe_join(
+          [
+            chart_header(context),
+            tag.div(id: 'chart-collapsible', class: 'chart-collapsible') do
+              safe_join(
+                [
+                  tag.div(chart_body(context), class: 'chart-container'),
+                  chart_legend
+                ]
+              )
+            end
+          ]
+        )
+      end
+    end
+
+    def chart_header(context)
+      tag.div(class: 'chart-header') do
+        safe_join(
+          [
+            tag.div(class: 'chart-header-left') do
+              safe_join(
+                [
+                  chart_toggle_button,
+                  tag.h3('Job Activity'),
+                  chart_summary(context)
+                ]
+              )
+            end,
+            chart_time_select(context)
+          ]
+        )
+      end
+    end
+
+    def chart_toggle_button
+      tag.button(class: 'chart-toggle-btn', id: 'chart-toggle-btn', title: 'Toggle chart') do
+        tag.svg(class: 'chart-toggle-icon',
+                id: 'chart-toggle-icon',
+                width: 16,
+                height: 16,
+                viewBox: '0 0 24 24',
+                fill: 'none',
+                stroke: 'currentColor',
+                stroke_width: 2) do
+          tag.polyline(points: '6 9 12 15 18 9')
+        end
+      end
+    end
+
+    def chart_summary(context)
+      totals = context[:data][:totals] || { created: 0, completed: 0, failed: 0 }
+
+      tag.span(class: 'chart-summary') do
+        safe_join(
+          [
+            tag.span("#{totals[:created]} created", class: 'summary-item summary-created'),
+            tag.span('.', class: 'summary-separator'),
+            tag.span("#{totals[:completed]} completed", class: 'summary-item summary-completed'),
+            tag.span('.', class: 'summary-separator'),
+            tag.span("#{totals[:failed]} failed", class: 'summary-item summary-failed')
+          ],
+          ' '
+        )
+      end
+    end
+
+    def chart_time_select(context)
+      options = context[:data][:available_ranges].map do |key, label|
+        tag.option(label, value: key, selected: key == context[:data][:time_range])
+      end
+
+      tag.div(class: 'chart-time-select-wrapper') do
+        tag.select(safe_join(options), class: 'chart-time-select', id: 'chart-time-select')
+      end
+    end
+
+    def chart_body(context)
+      return chart_empty_state if all_series_empty?(context)
+
+      max_value = [calculate_max_value(context), 10].max
+
+      tag.svg(viewBox: "0 0 #{CHART_WIDTH} #{CHART_HEIGHT}",
+              class: 'job-activity-chart',
+              preserveAspectRatio: 'xMidYMid meet') do
+        safe_join(
+          [
+            chart_grid_lines(context),
+            chart_axes,
+            chart_x_labels(context),
+            chart_y_labels(context, max_value),
+            *SERIES.map { |series| series_line(context, series, max_value) },
+            *SERIES.map { |series| series_points(context, series, max_value) }
+          ].compact
+        )
+      end
+    end
+
+    def chart_empty_state
+      tag.div(class: 'chart-empty') do
+        tag.span('No job activity in this time range')
+      end
+    end
+
+    def chart_grid_lines(context)
+      safe_join(
+        5.times.map do |index|
+          y = PADDING[:top] + (context[:plot_height] * index / 4.0)
+          tag.line(x1: PADDING[:left],
+                   y1: y,
+                   x2: CHART_WIDTH - PADDING[:right],
+                   y2: y,
+                   class: 'grid-line')
+        end
+      )
+    end
+
+    def chart_axes
+      safe_join(
+        [
+          tag.line(x1: PADDING[:left],
+                   y1: PADDING[:top],
+                   x2: PADDING[:left],
+                   y2: CHART_HEIGHT - PADDING[:bottom],
+                   class: 'axis-line'),
+          tag.line(x1: PADDING[:left],
+                   y1: CHART_HEIGHT - PADDING[:bottom],
+                   x2: CHART_WIDTH - PADDING[:right],
+                   y2: CHART_HEIGHT - PADDING[:bottom],
+                   class: 'axis-line')
+        ]
+      )
+    end
+
+    def chart_x_labels(context)
+      labels = context[:data][:labels]
+      return ''.html_safe if labels.blank?
+
+      step = labels.size > 12 ? (labels.size / 6.0).ceil : 1
+      safe_join(labels.each_with_index.filter_map do |label, index|
+        next unless (index % step).zero? || index == labels.size - 1
+
+        tag.text(label,
+                 x: x_for_index(context, index, labels.size),
+                 y: CHART_HEIGHT - PADDING[:bottom] + 20,
+                 class: 'axis-label x-label')
+      end)
+    end
+
+    def chart_y_labels(context, max_value)
+      safe_join(
+        5.times.map do |index|
+          value = (max_value * (4 - index) / 4.0).round
+          y = PADDING[:top] + (context[:plot_height] * index / 4.0)
+          tag.text(value, x: PADDING[:left] - 10, y: y + 4, class: 'axis-label y-label')
+        end
+      )
+    end
+
+    def series_line(context, series, max_value)
+      return if series_empty?(context, series)
+
+      points = calculate_points(context, series, max_value)
+      return if points.empty?
+
+      tag.polyline(points: points.map { |point| "#{point[:x]},#{point[:y]}" }.join(' '),
+                   class: "chart-line chart-line-#{series}",
+                   fill: 'none',
+                   stroke: COLORS[series],
+                   stroke_width: 2)
+    end
+
+    def series_points(context, series, max_value)
+      return if series_empty?(context, series)
+
+      values = context[:data][series]
+      safe_join(calculate_points(context, series, max_value).each_with_index.map do |point, index|
+        tag.circle(cx: point[:x],
+                   cy: point[:y],
+                   r: 4,
+                   class: "data-point data-point-#{series}",
+                   fill: COLORS[series],
+                   data: { series: series, label: context[:data][:labels][index], value: values[index] })
+      end)
+    end
+
+    def chart_legend
+      tag.div(class: 'chart-legend') do
+        safe_join(%i[created completed failed].map do |series|
+          tag.span(class: 'legend-item') do
+            safe_join(
+              [
+                tag.span('', class: "legend-color legend-color-#{series}"),
+                series.to_s.capitalize
+              ],
+              "\n"
+            )
+          end
+        end)
+      end
+    end
+
+    def chart_tooltip
+      tag.div(id: 'chart-tooltip', class: 'chart-tooltip') do
+        safe_join(
+          [
+            tag.div('', class: 'tooltip-label'),
+            tag.div('', class: 'tooltip-value')
+          ]
+        )
+      end
+    end
+
+    def all_series_empty?(context)
+      %i[created completed failed].all? { |series| series_empty?(context, series) }
+    end
+
+    def series_empty?(context, series)
+      context[:data][series].nil? || context[:data][series].all?(&:zero?)
+    end
+
+    def calculate_max_value(context)
+      max = (context[:data][:created] + context[:data][:completed] + context[:data][:failed]).max || 0
+      return 10 if max <= 10
+
+      magnitude = 10**Math.log10(max).floor
+      ((max.to_f / magnitude).ceil * magnitude)
+    end
+
+    def calculate_points(context, series, max_value)
+      values = context[:data][series]
+      return [] if values.blank?
+
+      values.each_with_index.map do |value, index|
+        {
+          x: x_for_index(context, index, values.size).round(2),
+          y: (CHART_HEIGHT - PADDING[:bottom] - (context[:plot_height] * value / max_value.to_f)).round(2)
+        }
+      end
+    end
+
+    def x_for_index(context, index, count)
+      return PADDING[:left] if count <= 1
+
+      PADDING[:left] + (context[:plot_width] * index / (count - 1).to_f)
+    end
+  end
+  # rubocop:enable Metrics/ModuleLength
+end
diff --git a/app/helpers/solid_queue_monitor/job_details_helper.rb b/app/helpers/solid_queue_monitor/job_details_helper.rb
new file mode 100644
index 0000000..2f14650
--- /dev/null
+++ b/app/helpers/solid_queue_monitor/job_details_helper.rb
@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+module SolidQueueMonitor
+  module JobDetailsHelper
+    def detail_job_status
+      return :failed if @failed_execution
+      return :in_progress if @claimed_execution
+      return :scheduled if @scheduled_execution || @job.scheduled_at&.future?
+      return :completed if @job.finished_at
+
+      :pending
+    end
+
+    def detail_status_label(status = detail_job_status)
+      {
+        failed: 'Failed',
+        in_progress: 'In Progress',
+        scheduled: 'Scheduled',
+        completed: 'Completed',
+        pending: 'Pending'
+      }[status]
+    end
+
+    def detail_status_class(status = detail_job_status)
+      "status-#{status.to_s.tr('_', '-')}"
+    end
+
+    def detail_duration(seconds)
+      return '-' unless seconds
+      return "#{(seconds * 1000).round}ms" if seconds < 1
+      return "#{seconds.round(1)}s" if seconds < 60
+      return "#{(seconds / 60).floor}m #{(seconds % 60).round}s" if seconds < 3600
+
+      "#{(seconds / 3600).floor}h #{((seconds % 3600) / 60).floor}m"
+    end
+
+    def detail_timing
+      created_at = @job.created_at
+      started_at = @claimed_execution&.created_at
+      finished_at = @job.finished_at
+      failed_at = @failed_execution&.created_at
+      end_time = finished_at || failed_at
+
+      {
+        queue_wait: started_at && created_at ? started_at - created_at : nil,
+        execution: started_at && end_time ? end_time - started_at : nil,
+        total: created_at && end_time ? end_time - created_at : nil
+      }
+    end
+
+    def pretty_arguments(args)
+      return '-' if args.blank?
+
+      JSON.pretty_generate(args)
+    rescue JSON::GeneratorError
+      args.inspect
+    end
+
+    def recent_job_duration(job)
+      end_time = job.finished_at || job.failed_execution&.created_at
+      return '-' unless end_time
+
+      detail_duration(end_time - job.created_at)
+    end
+  end
+end
diff --git a/app/helpers/solid_queue_monitor/jobs_helper.rb b/app/helpers/solid_queue_monitor/jobs_helper.rb
new file mode 100644
index 0000000..ba45b54
--- /dev/null
+++ b/app/helpers/solid_queue_monitor/jobs_helper.rb
@@ -0,0 +1,124 @@
+# frozen_string_literal: true
+
+module SolidQueueMonitor
+  module JobsHelper
+    def format_arguments(arguments)
+      return '-' if arguments.blank?
+
+      formatted = unwrap_arguments(arguments)
+      if formatted.length <= 50
+        tag.code(formatted, class: 'args-single-line')
+      else
+        tag.div(tag.code(formatted, class: 'args-content'), class: 'args-container')
+      end
+    end
+
+    def format_hash(hash)
+      return '-' if hash.blank?
+
+      parts = hash.map do |key, value|
+        safe_join([tag.strong("#{key}:"), ' ', truncate(value.to_s, length: 50)])
+      end
+      tag.code(safe_join(parts, ', '))
+    end
+
+    def job_status(job)
+      SolidQueueMonitor::StatusCalculator.new(job).calculate
+    end
+
+    def job_status_badge(job)
+      status = job_status(job)
+      tag.span(status, class: "status-badge status-#{status}")
+    end
+
+    def mini_job_status_badge(job)
+      status = if job.respond_to?(:failed_execution) && job.failed_execution.present?
+                 :failed
+               elsif job.respond_to?(:claimed_execution) && job.claimed_execution.present?
+                 :in_progress
+               elsif job.respond_to?(:scheduled_execution) && job.scheduled_execution.present?
+                 :scheduled
+               elsif job.respond_to?(:ready_execution) && job.ready_execution.present?
+                 :ready
+               elsif job.finished_at
+                 :completed
+               else
+                 :pending
+               end
+
+      labels = {
+        failed: 'Failed',
+        completed: 'Completed',
+        in_progress: 'In Progress',
+        scheduled: 'Scheduled',
+        ready: 'Ready',
+        pending: 'Pending'
+      }
+      css_status = status == :ready ? :pending : status
+      tag.span(labels[status], class: "mini-status-badge status-#{css_status}")
+    end
+
+    def failed_error_message(error)
+      parsed_failed_error(error)[:message].to_s
+    end
+
+    def parsed_failed_error(error)
+      return { type: 'Unknown', message: 'Unknown error', backtrace: [] } unless error
+
+      error_hash = deserialize_failed_error(error)
+      {
+        type: error_hash['exception_class'] || error_hash[:exception_class] ||
+          error_hash['error_class'] || error_hash[:error_class] ||
+          error_hash['class'] || error_hash[:class] || 'Error',
+        message: error_hash['message'] || error_hash[:message] ||
+          error_hash['error'] || error_hash[:error] || 'Unknown error',
+        backtrace: Array(error_hash['backtrace'] || error_hash[:backtrace] || error_hash['stack_trace'] || error_hash[:stack_trace])
+      }
+    end
+
+    private
+
+    def deserialize_failed_error(error)
+      return error if error.is_a?(Hash)
+      return { 'message' => error.to_s } unless error.is_a?(String)
+
+      JSON.parse(error)
+    rescue JSON::ParserError
+      { 'message' => error }
+    end
+
+    def unwrap_arguments(arguments)
+      payload = if arguments.is_a?(Hash) && arguments['arguments'].present?
+                  format_job_arguments(arguments)
+                elsif wrapped_job_arguments?(arguments)
+                  format_job_arguments(arguments.first)
+                else
+                  arguments.inspect
+                end
+      payload.to_s
+    end
+
+    def wrapped_job_arguments?(arguments)
+      arguments.is_a?(Array) &&
+        arguments.length == 1 &&
+        arguments.first.is_a?(Hash) &&
+        arguments.first['arguments'].present?
+    end
+
+    def format_job_arguments(job_data)
+      args = if ruby2_keywords_payload?(job_data)
+               job_data['arguments'].first.except('_aj_ruby2_keywords')
+             else
+               job_data['arguments']
+             end
+
+      args.inspect
+    end
+
+    def ruby2_keywords_payload?(job_data)
+      job_data['arguments'].is_a?(Array) &&
+        job_data['arguments'].first.is_a?(Hash) &&
+        job_data['arguments'].first['_aj_ruby2_keywords'].present?
+    end
+  end
+end
diff --git a/app/helpers/solid_queue_monitor/pagination_helper.rb b/app/helpers/solid_queue_monitor/pagination_helper.rb
new file mode 100644
index 0000000..2ac2c9d
--- /dev/null
+++ b/app/helpers/solid_queue_monitor/pagination_helper.rb
@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module SolidQueueMonitor
+  module PaginationHelper
+    def visible_pages(current_page, total_pages)
+      return (1..total_pages).to_a if total_pages <= 7
+
+      case current_page
+      when 1..3
+        [1, 2, 3, 4, :gap, total_pages]
+      when (total_pages - 2)..total_pages
+        [1, :gap, total_pages - 3, total_pages - 2, total_pages - 1, total_pages]
+      else
+        [1, :gap, current_page - 1, current_page, current_page + 1, :gap, total_pages]
+      end
+    end
+
+    def pagination_href(page, extra_params = {})
+      query = request.query_parameters.merge(extra_params).merge(page: page)
+      "?#{query.to_query}"
+    end
+  end
+end
diff --git a/app/helpers/solid_queue_monitor/sort_helper.rb b/app/helpers/solid_queue_monitor/sort_helper.rb
new file mode 100644
index 0000000..a3f0357
--- /dev/null
+++ b/app/helpers/solid_queue_monitor/sort_helper.rb
@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module SolidQueueMonitor
+  module SortHelper
+    def sortable_header(column, label, sort:, filters: {})
+      return tag.th(label) unless sort
+
+      column_str = column.to_s
+      active = sort[:sort_by] == column_str
+      next_dir = active && sort[:sort_direction] == 'asc' ? 'desc' : 'asc'
+      query = filters.compact.merge(sort_by: column_str, sort_direction: next_dir)
+
+      tag.th(
+        link_to(
+          safe_join([label, sort_arrow(active, sort[:sort_direction])]),
+          "?#{query.to_query}",
+          class: class_names('sortable-header', active: active)
+        )
+      )
+    end
+
+    private
+
+    def sort_arrow(active, direction)
+      return ' &udarr;'.html_safe unless active
+
+      direction == 'asc' ? ' &uarr;'.html_safe : ' &darr;'.html_safe
+    end
+  end
+end
diff --git a/app/helpers/solid_queue_monitor/workers_helper.rb b/app/helpers/solid_queue_monitor/workers_helper.rb
new file mode 100644
index 0000000..81c6d20
--- /dev/null
+++ b/app/helpers/solid_queue_monitor/workers_helper.rb
@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+module SolidQueueMonitor
+  module WorkersHelper
+    HEARTBEAT_STALE_THRESHOLD = 5.minutes
+    HEARTBEAT_DEAD_THRESHOLD = 10.minutes
+
+    def worker_status(process)
+      return :dead unless process.last_heartbeat_at
+
+      time_since_heartbeat = Time.current - process.last_heartbeat_at
+      return :dead if time_since_heartbeat > HEARTBEAT_DEAD_THRESHOLD
+      return :stale if time_since_heartbeat > HEARTBEAT_STALE_THRESHOLD
+
+      :healthy
+    end
+
+    def worker_row_class(process)
+      case worker_status(process)
+      when :dead then 'worker-dead'
+      when :stale then 'worker-stale'
+      else ''
+      end
+    end
+
+    def worker_kind_badge(kind)
+      badge_class = case kind
+                    when 'Worker' then 'kind-worker'
+                    when 'Dispatcher' then 'kind-dispatcher'
+                    when 'Scheduler' then 'kind-scheduler'
+                    else 'kind-other'
+                    end
+      tag.span(kind, class: class_names('kind-badge', badge_class))
+    end
+
+    def worker_hostname(process)
+      process.hostname || worker_metadata(process)['hostname'] || '-'
+    end
+
+    def worker_queues(process)
+      queues = worker_metadata(process)['queues']
+      return '-' if queues.nil?
+
+      return tag.code(queues == '*' ? 'All Queues' : queues, class: 'queue-tag') if queues.is_a?(String)
+      return '-' if queues.empty?
+
+      if queues.length <= 3
+        safe_join(queues.map { |queue| tag.code(queue, class: 'queue-tag') }, ' ')
+      else
+        visible = safe_join(queues.first(2).map { |queue| tag.code(queue, class: 'queue-tag') }, ' ')
+        safe_join([visible, tag.span("+#{queues.length - 2} more", class: 'queue-more')], ' ')
+      end
+    end
+
+    def worker_heartbeat(heartbeat_at)
+      return '-' unless heartbeat_at
+
+      tag.span("#{time_ago_in_words(heartbeat_at)} ago", title: heartbeat_at.strftime('%Y-%m-%d %H:%M:%S'))
+    end
+
+    def worker_status_badge(status)
+      tag.span(status.to_s.capitalize, class: "status-badge status-#{status}")
+    end
+
+    def worker_jobs_processing(process, claimed_counts:, claimed_jobs:)
+      count = claimed_counts[process.id] || 0
+      return tag.span('Idle', class: 'jobs-idle') if count.zero?
+
+      jobs = claimed_jobs[process.id] || []
+      job_names = jobs.map(&:class_name).uniq.first(3)
+      tooltip = jobs.first(10).map { |job| "#{job.class_name} (ID: #{job.id})" }.join("\n")
+      label = "#{count} job#{'s' if count > 1}"
+      names = "(#{job_names.join(', ')}#{'...' if jobs.length > 3})"
+
+      tag.span(class: 'jobs-processing', title: tooltip) do
+        safe_join([label, tag.span(names, class: 'job-names')], ' ')
+      end
+    end
+
+    def worker_metadata(process)
+      return {} unless process.metadata
+
+      process.metadata.is_a?(String) ? JSON.parse(process.metadata) : process.metadata
+    rescue JSON::ParserError
+      {}
+    end
+  end
+end
diff --git a/app/presenters/solid_queue_monitor/base_presenter.rb b/app/presenters/solid_queue_monitor/base_presenter.rb
index 61d07df..60567ea 100644
--- a/app/presenters/solid_queue_monitor/base_presenter.rb
+++ b/app/presenters/solid_queue_monitor/base_presenter.rb
@@ -58,6 +58,8 @@ def generate_pagination(current_page, total_pages)
     end
 
     def calculate_visible_pages(current_page, total_pages)
+      # Logic moved to SolidQueueMonitor::PaginationHelper for ERB-rendered pages.
+      # Kept here while presenter-rendered pages are migrated.
       if total_pages <= 7
         (1..total_pages).to_a
       else
diff --git a/app/presenters/solid_queue_monitor/failed_jobs_presenter.rb b/app/presenters/solid_queue_monitor/failed_jobs_presenter.rb
deleted file mode 100644
index 6d4b88e..0000000
--- a/app/presenters/solid_queue_monitor/failed_jobs_presenter.rb
+++ /dev/null
@@ -1,225 +0,0 @@
-# frozen_string_literal: true
-
-module SolidQueueMonitor
-  class FailedJobsPresenter < BasePresenter
-    include Rails.application.routes.url_helpers
-    include SolidQueueMonitor::Engine.routes.url_helpers
-
-    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
-      section_wrapper('Failed Jobs',
-                      generate_filter_form + generate_table + generate_pagination(@current_page, @total_pages))
-    end
-
-    private
-
-    def script_tag_open
-      @nonce ? %(<script nonce="#{@nonce}">) : '<script>'
-    end
-
-    def generate_filter_form
-      <<-HTML
-        <div class="filter-form-container">
-          <form method="get" action="#{failed_jobs_path}" class="filter-form">
-            <div class="filter-group">
-              <label for="class_name">Job Class:</label>
-              <input type="text" name="class_name" id="class_name" value="#{@filters[:class_name]}" placeholder="Filter by class name">
-            </div>
-
-            <div class="filter-group">
-              <label for="queue_name">Queue:</label>
-              <input type="text" name="queue_name" id="queue_name" value="#{@filters[:queue_name]}" placeholder="Filter by queue">
-            </div>
-
-            <div class="filter-group">
-              <label for="arguments">Arguments:</label>
-              <input type="text" name="arguments" id="arguments" value="#{@filters[:arguments]}" placeholder="Filter by arguments">
-            </div>
-
-            <div class="filter-actions">
-              <button type="submit" class="filter-button">Apply Filters</button>
-              <a href="#{failed_jobs_path}" class="reset-button">Reset</a>
-            </div>
-          </form>
-        </div>
-
-        <div class="bulk-actions-bar">
-          <button type="button" class="action-button retry-button" id="retry-selected-top" disabled>Retry Selected</button>
-          <button type="button" class="action-button discard-button" id="discard-selected-top" disabled>Discard Selected</button>
-        </div>
-      HTML
-    end
-
-    def generate_table
-      <<-HTML
-        <form method="post" id="failed-jobs-form">
-          <div class="table-container">
-            <table>
-              <thead>
-                <tr>
-                  <th><input type="checkbox" id="select-all" class="select-all-checkbox"></th>
-                  #{sortable_header('class_name', 'Job')}
-                  #{sortable_header('queue_name', 'Queue')}
-                  <th>Error</th>
-                  <th>Arguments</th>
-                  #{sortable_header('created_at', 'Failed At')}
-                  <th>Actions</th>
-                </tr>
-              </thead>
-              <tbody>
-                #{@jobs.map { |failed_execution| generate_row(failed_execution) }.join}
-              </tbody>
-            </table>
-          </div>
-        </form>
-
-        #{script_tag_open}
-          document.addEventListener('DOMContentLoaded', function() {
-            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() {
-              var checkedBoxes = document.querySelectorAll('.job-checkbox:checked');
-              retrySelectedBtn.disabled = checkedBoxes.length === 0;
-              discardSelectedBtn.disabled = checkedBoxes.length === 0;
-            }
-
-            selectAllHeader.addEventListener('change', function() {
-              checkboxes.forEach(function(cb) { cb.checked = selectAllHeader.checked; });
-              updateButtonState();
-            });
-
-            checkboxes.forEach(function(cb) {
-              cb.addEventListener('change', function() {
-                updateButtonState();
-                var allChecked = document.querySelectorAll('.job-checkbox:checked').length === checkboxes.length;
-                selectAllHeader.checked = allChecked;
-              });
-            });
-
-            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() {
-              bulkSubmit('#{retry_failed_jobs_path}', 'Are you sure you want to retry the selected jobs?');
-            });
-            discardSelectedBtn.addEventListener('click', function() {
-              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);
-                }
-              }
-            });
-
-            updateButtonState();
-          });
-        </script>
-      HTML
-    end
-
-    def generate_row(failed_execution)
-      job = failed_execution.job
-      error = parse_error(failed_execution.error)
-
-      <<-HTML
-        <tr>
-          <td><input type="checkbox" class="job-checkbox" value="#{failed_execution.id}"></td>
-          <td>
-            <div class="job-class"><a href="#{job_path(job)}" class="job-class-link">#{job.class_name}</a></div>
-            <div class="job-meta">
-              <span class="job-timestamp">Queued at: #{format_datetime(job.created_at)}</span>
-            </div>
-          </td>
-          <td>
-            <div class="job-queue">#{queue_link(job.queue_name)}</div>
-          </td>
-          <td>
-            <div class="error-message">#{error[:message].to_s.truncate(100)}</div>
-          </td>
-          <td>#{format_arguments(job.arguments)}</td>
-          <td>#{format_datetime(failed_execution.created_at)}</td>
-          <td class="actions-cell">
-            <div class="job-actions">
-              <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>
-      HTML
-    end
-
-    def parse_error(error)
-      return { message: 'Unknown error', backtrace: '' } unless error
-
-      if error.is_a?(String)
-        { message: error, backtrace: '' }
-      elsif error.is_a?(Hash)
-        message = error['message'] || error[:message] || 'Unknown error'
-        backtrace = error['backtrace'] || error[:backtrace] || []
-        backtrace = backtrace.join("\n") if backtrace.is_a?(Array)
-        { message: message, backtrace: backtrace }
-      else
-        { message: 'Unknown error format', backtrace: error.to_s }
-      end
-    end
-
-    def get_queue_name(failed_execution, job)
-      # Try to get queue_name from failed_execution if the method exists
-      if failed_execution.respond_to?(:queue_name) && !failed_execution.queue_name.nil?
-        failed_execution.queue_name
-      else
-        # Fall back to job's queue_name
-        job.queue_name
-      end
-    rescue NoMethodError
-      # If there's an error accessing queue_name, fall back to job's queue_name
-      job.queue_name
-    end
-  end
-end
diff --git a/app/presenters/solid_queue_monitor/in_progress_jobs_presenter.rb b/app/presenters/solid_queue_monitor/in_progress_jobs_presenter.rb
deleted file mode 100644
index c07447a..0000000
--- a/app/presenters/solid_queue_monitor/in_progress_jobs_presenter.rb
+++ /dev/null
@@ -1,84 +0,0 @@
-# frozen_string_literal: true
-
-module SolidQueueMonitor
-  class InProgressJobsPresenter < BasePresenter
-    include SolidQueueMonitor::Engine.routes.url_helpers
-
-    def initialize(jobs, current_page: 1, total_pages: 1, filters: {}, sort: {})
-      @jobs = jobs
-      @current_page = current_page
-      @total_pages = total_pages
-      @filters = filters
-      @sort = sort
-    end
-
-    def render
-      section_wrapper('In Progress Jobs',
-                      generate_filter_form + generate_table + generate_pagination(@current_page, @total_pages))
-    end
-
-    private
-
-    def generate_filter_form
-      <<-HTML
-        <div class="filter-form-container">
-          <form method="get" action="#{in_progress_jobs_path}" class="filter-form">
-            <div class="filter-group">
-              <label for="class_name">Job Class:</label>
-              <input type="text" name="class_name" id="class_name" value="#{@filters[:class_name]}" placeholder="Filter by class name">
-            </div>
-
-            <div class="filter-group">
-              <label for="arguments">Arguments:</label>
-              <input type="text" name="arguments" id="arguments" value="#{@filters[:arguments]}" placeholder="Filter by arguments">
-            </div>
-
-            <div class="filter-actions">
-              <button type="submit" class="filter-button">Apply Filters</button>
-              <a href="#{in_progress_jobs_path}" class="reset-button">Reset</a>
-            </div>
-          </form>
-        </div>
-      HTML
-    end
-
-    def generate_table
-      <<-HTML
-        <div class="table-container">
-          <table>
-            <thead>
-              <tr>
-                #{sortable_header('class_name', 'Job')}
-                #{sortable_header('queue_name', 'Queue')}
-                <th>Arguments</th>
-                #{sortable_header('created_at', 'Started At')}
-                <th>Process ID</th>
-              </tr>
-            </thead>
-            <tbody>
-              #{@jobs.map { |execution| generate_row(execution) }.join}
-            </tbody>
-          </table>
-        </div>
-      HTML
-    end
-
-    def generate_row(execution)
-      job = execution.job
-      <<-HTML
-        <tr>
-          <td>
-            <div class="job-class"><a href="#{job_path(job)}" class="job-class-link">#{job.class_name}</a></div>
-            <div class="job-meta">
-              <span class="job-timestamp">Queued at: #{format_datetime(job.created_at)}</span>
-            </div>
-          </td>
-          <td>#{queue_link(job.queue_name)}</td>
-          <td>#{format_arguments(job.arguments)}</td>
-          <td>#{format_datetime(execution.created_at)}</td>
-          <td>#{execution.process_id}</td>
-        </tr>
-      HTML
-    end
-  end
-end
diff --git a/app/presenters/solid_queue_monitor/job_details_presenter.rb b/app/presenters/solid_queue_monitor/job_details_presenter.rb
deleted file mode 100644
index 18a4499..0000000
--- a/app/presenters/solid_queue_monitor/job_details_presenter.rb
+++ /dev/null
@@ -1,707 +0,0 @@
-# frozen_string_literal: true
-
-module SolidQueueMonitor
-  class JobDetailsPresenter < BasePresenter
-    def initialize(job, failed_execution: nil, claimed_execution: nil, scheduled_execution: 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
-
-    def render
-      <<-HTML
-        <div class="job-details-page">
-          #{render_back_link}
-          #{render_header}
-          #{render_timeline}
-          #{render_timing_cards}
-          #{render_error_section if @failed_execution}
-          #{render_arguments_section}
-          #{render_details_section}
-          #{render_worker_section if @claimed_execution}
-          #{render_recent_executions}
-          #{render_raw_data_section}
-        </div>
-      HTML
-    end
-
-    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
-      @started_at = @claimed_execution&.created_at
-      @finished_at = @job.finished_at
-      @failed_at = @failed_execution&.created_at
-
-      # Calculate durations
-      @queue_wait_time = calculate_queue_wait
-      @execution_time = calculate_execution_time
-      @total_time = calculate_total_time
-    end
-
-    def calculate_queue_wait
-      return nil unless @started_at && @created_at
-
-      @started_at - @created_at
-    end
-
-    def calculate_execution_time
-      end_time = @finished_at || @failed_at
-      return nil unless @started_at && end_time
-
-      end_time - @started_at
-    end
-
-    def calculate_total_time
-      end_time = @finished_at || @failed_at
-      return nil unless @created_at && end_time
-
-      end_time - @created_at
-    end
-
-    def job_status
-      return :failed if @failed_execution
-      return :in_progress if @claimed_execution
-      return :scheduled if @scheduled_execution || @job.scheduled_at&.future?
-      return :completed if @job.finished_at
-
-      :pending
-    end
-
-    def status_label
-      {
-        failed: 'Failed',
-        in_progress: 'In Progress',
-        scheduled: 'Scheduled',
-        completed: 'Completed',
-        pending: 'Pending'
-      }[job_status]
-    end
-
-    def status_class
-      {
-        failed: 'status-failed',
-        in_progress: 'status-in-progress',
-        scheduled: 'status-scheduled',
-        completed: 'status-completed',
-        pending: 'status-pending'
-      }[job_status]
-    end
-
-    def render_back_link
-      <<-HTML
-        <div class="job-back-link">
-          <a href="#{@back_path}" class="back-link">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M19 12H5M12 19l-7-7 7-7"/>
-            </svg>
-            Back
-          </a>
-        </div>
-      HTML
-    end
-
-    def render_header
-      <<-HTML
-        <div class="job-header">
-          <div class="job-header-main">
-            <h1 class="job-title">#{@job.class_name}</h1>
-            <span class="job-status-badge #{status_class}">#{status_label}</span>
-          </div>
-          <div class="job-header-meta">
-            <span class="job-queue">#{queue_link(@job.queue_name)}</span>
-            <span class="job-separator">•</span>
-            <span class="job-priority">Priority #{@job.priority}</span>
-            <span class="job-separator">•</span>
-            <span class="job-id">Job ##{@job.id}</span>
-          </div>
-          #{render_actions}
-        </div>
-      HTML
-    end
-
-    def render_actions
-      actions = []
-
-      if @failed_execution
-        actions << <<-HTML
-          <form action="#{retry_failed_job_path(id: @failed_execution.id)}" method="post" class="inline-form">
-            <input type="hidden" name="redirect_to" value="#{job_path(@job)}">
-            <button type="submit" class="action-button retry-button">Retry</button>
-          </form>
-        HTML
-
-        actions << <<-HTML
-          <form action="#{discard_failed_job_path(id: @failed_execution.id)}" method="post" class="inline-form"
-                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>
-        HTML
-      end
-
-      if @scheduled_execution
-        actions << <<-HTML
-          <form action="#{execute_scheduled_job_path(id: @scheduled_execution.id)}" method="post" class="inline-form">
-            <input type="hidden" name="redirect_to" value="#{scheduled_jobs_path}">
-            <button type="submit" class="action-button retry-button">Execute Now</button>
-          </form>
-        HTML
-      end
-
-      return '' if actions.empty?
-
-      <<-HTML
-        <div class="job-actions">
-          #{actions.join}
-        </div>
-      HTML
-    end
-
-    def render_timeline
-      events = build_timeline_events
-      return '' if events.size < 2
-
-      <<-HTML
-        <div class="job-section">
-          <h3 class="section-title">Timeline</h3>
-          <div class="job-timeline">
-            <div class="timeline-track">
-              #{render_timeline_events(events)}
-            </div>
-          </div>
-        </div>
-      HTML
-    end
-
-    def build_timeline_events
-      events = []
-      events << { label: 'Created', time: @created_at, status: :done } if @created_at
-      events << { label: 'Scheduled', time: @scheduled_at, status: :done } if @scheduled_at && @scheduled_at != @created_at
-      events << { label: 'Started', time: @started_at, status: :done } if @started_at
-
-      case job_status
-      when :completed
-        events << { label: 'Completed', time: @finished_at, status: :success }
-      when :failed
-        events << { label: 'Failed', time: @failed_at, status: :failed }
-      when :in_progress
-        events << { label: 'Running...', time: nil, status: :active }
-      end
-
-      events
-    end
-
-    def render_timeline_events(events)
-      total = events.size
-      events.map.with_index do |event, index|
-        is_last = index == total - 1
-        status_class = "timeline-#{event[:status]}"
-
-        <<-HTML
-          <div class="timeline-event #{status_class}">
-            <div class="timeline-dot"></div>
-            #{is_last ? '' : '<div class="timeline-line"></div>'}
-            <div class="timeline-content">
-              <div class="timeline-label">#{event[:label]}</div>
-              <div class="timeline-time">#{event[:time] ? format_datetime(event[:time]) : ''}</div>
-            </div>
-          </div>
-        HTML
-      end.join
-    end
-
-    def render_timing_cards
-      <<-HTML
-        <div class="timing-cards">
-          #{render_timing_card('Queue Wait', @queue_wait_time, queue_wait_indicator, timing_unavailable_reason(:queue_wait))}
-          #{render_timing_card('Execution', @execution_time, execution_indicator, timing_unavailable_reason(:execution))}
-          #{render_timing_card('Total Time', @total_time, nil, nil)}
-        </div>
-      HTML
-    end
-
-    def render_timing_card(label, duration, indicator, unavailable_reason)
-      formatted = duration ? format_duration(duration) : '-'
-      indicator_html = indicator ? "<div class=\"timing-indicator #{indicator[:class]}\">#{indicator[:label]}</div>" : ''
-      tooltip = unavailable_reason && !duration ? " title=\"#{unavailable_reason}\"" : ''
-
-      <<-HTML
-        <div class="timing-card"#{tooltip}>
-          <div class="timing-value">#{formatted}</div>
-          <div class="timing-label">#{label}</div>
-          #{indicator_html}
-        </div>
-      HTML
-    end
-
-    def timing_unavailable_reason(timing_type)
-      return nil if @claimed_execution # In-progress jobs have all timing data
-      return nil unless %i[queue_wait execution].include?(timing_type)
-
-      if @failed_execution || @job.finished_at
-        'Not available - execution record deleted after job completed'
-      else
-        'Available once job starts processing'
-      end
-    end
-
-    def queue_wait_indicator
-      return nil unless @queue_wait_time
-
-      if @queue_wait_time > 300 # > 5 minutes
-        { class: 'indicator-warning', label: 'High' }
-      elsif @queue_wait_time > 60 # > 1 minute
-        { class: 'indicator-normal', label: 'Normal' }
-      else
-        { class: 'indicator-good', label: 'Fast' }
-      end
-    end
-
-    def execution_indicator
-      return nil unless @execution_time
-
-      if @execution_time > 60 # > 1 minute
-        { class: 'indicator-warning', label: 'Slow' }
-      elsif @execution_time > 10 # > 10 seconds
-        { class: 'indicator-normal', label: 'Normal' }
-      else
-        { class: 'indicator-good', label: 'Fast' }
-      end
-    end
-
-    def format_duration(seconds)
-      return '-' unless seconds
-
-      if seconds < 1
-        "#{(seconds * 1000).round}ms"
-      elsif seconds < 60
-        "#{seconds.round(1)}s"
-      elsif seconds < 3600
-        minutes = (seconds / 60).floor
-        secs = (seconds % 60).round
-        "#{minutes}m #{secs}s"
-      else
-        hours = (seconds / 3600).floor
-        minutes = ((seconds % 3600) / 60).floor
-        "#{hours}h #{minutes}m"
-      end
-    end
-
-    def render_error_section
-      error = parse_error(@failed_execution.error)
-
-      <<-HTML
-        <div class="job-section error-section">
-          <div class="section-header">
-            <h3 class="section-title">Error</h3>
-            <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>
-              </svg>
-              Copy
-            </button>
-          </div>
-          <div id="error-content">
-            <div class="error-type">#{error[:type]}</div>
-            <div class="error-message-box">#{error[:message]}</div>
-          </div>
-          #{render_backtrace(error[:backtrace])}
-        </div>
-      HTML
-    end
-
-    def render_backtrace(backtrace)
-      return '' if backtrace.blank?
-
-      lines = backtrace.is_a?(Array) ? backtrace : backtrace.to_s.split("\n")
-      app_lines = lines.select { |line| line.include?('/app/') || line.include?('/lib/') }
-
-      <<-HTML
-        <div class="backtrace-section">
-          <div class="backtrace-header">
-            <span class="backtrace-title">Backtrace</span>
-            <div class="backtrace-toggle">
-              <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 is-hidden" id="full-backtrace">#{format_backtrace_lines(lines)}</pre>
-        </div>
-      HTML
-    end
-
-    def format_backtrace_lines(lines)
-      lines.map.with_index do |line, index|
-        "<span class=\"backtrace-line\"><span class=\"line-number\">#{index + 1}.</span> #{CGI.escapeHTML(line.to_s.strip)}</span>"
-      end.join("\n")
-    end
-
-    def parse_error(error)
-      return { type: 'Unknown', message: 'Unknown error', backtrace: [] } unless error
-
-      # Convert to hash if it's a serialized string
-      error_hash = deserialize_error(error)
-
-      {
-        type: extract_error_type(error_hash),
-        message: extract_error_message(error_hash),
-        backtrace: extract_backtrace(error_hash)
-      }
-    end
-
-    def deserialize_error(error)
-      return error if error.is_a?(Hash)
-
-      if error.is_a?(String)
-        # Try JSON first
-        if error.strip.start_with?('{')
-          begin
-            return JSON.parse(error)
-          rescue JSON::ParserError
-            # Continue to try other formats
-          end
-        end
-
-        # Try YAML (SolidQueue may use YAML serialization)
-        begin
-          parsed = YAML.safe_load(error, permitted_classes: [Symbol])
-          return parsed if parsed.is_a?(Hash)
-        rescue StandardError
-          # Continue with string
-        end
-
-        # Return as simple error hash
-        { 'message' => error }
-      else
-        { 'message' => error.to_s }
-      end
-    end
-
-    def extract_error_type(error_hash)
-      error_hash['exception_class'] || error_hash[:exception_class] ||
-        error_hash['error_class'] || error_hash[:error_class] ||
-        error_hash['class'] || error_hash[:class] || 'Error'
-    end
-
-    def extract_error_message(error_hash)
-      error_hash['message'] || error_hash[:message] ||
-        error_hash['error'] || error_hash[:error] || 'Unknown error'
-    end
-
-    def extract_backtrace(error_hash)
-      bt = error_hash['backtrace'] || error_hash[:backtrace] ||
-           error_hash['stack_trace'] || error_hash[:stack_trace] || []
-
-      # Ensure it's an array
-      return bt if bt.is_a?(Array)
-      return bt.split("\n") if bt.is_a?(String) && bt.present?
-
-      []
-    end
-
-    def render_arguments_section
-      args = @job.arguments
-      formatted_args = format_job_arguments_pretty(args)
-
-      <<-HTML
-        <div class="job-section">
-          <div class="section-header">
-            <h3 class="section-title">Arguments</h3>
-            <div class="section-actions">
-              <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>
-                </svg>
-                Copy
-              </button>
-            </div>
-          </div>
-          <pre class="arguments-content" id="arguments-content">#{CGI.escapeHTML(formatted_args)}</pre>
-        </div>
-      HTML
-    end
-
-    def format_job_arguments_pretty(args)
-      return '-' if args.blank?
-
-      JSON.pretty_generate(args)
-    rescue JSON::GeneratorError
-      args.inspect
-    end
-
-    def render_details_section
-      <<-HTML
-        <div class="job-section">
-          <h3 class="section-title">Job Details</h3>
-          <div class="details-grid">
-            <div class="detail-row">
-              <span class="detail-label">Class</span>
-              <span class="detail-value">#{@job.class_name}</span>
-            </div>
-            <div class="detail-row">
-              <span class="detail-label">Queue</span>
-              <span class="detail-value">#{queue_link(@job.queue_name, css_class: 'queue-badge')}</span>
-            </div>
-            <div class="detail-row">
-              <span class="detail-label">Priority</span>
-              <span class="detail-value">#{@job.priority}</span>
-            </div>
-            <div class="detail-row">
-              <span class="detail-label">Active Job ID</span>
-              <span class="detail-value detail-mono">#{@job.active_job_id || '-'}</span>
-            </div>
-            #{render_concurrency_key}
-            <div class="detail-row">
-              <span class="detail-label">Created At</span>
-              <span class="detail-value">#{format_datetime(@job.created_at)}</span>
-            </div>
-            #{render_scheduled_at}
-            #{render_finished_at}
-            #{render_failed_at}
-          </div>
-        </div>
-      HTML
-    end
-
-    def render_concurrency_key
-      return '' if @job.concurrency_key.blank?
-
-      <<-HTML
-        <div class="detail-row">
-          <span class="detail-label">Concurrency Key</span>
-          <span class="detail-value detail-mono">#{@job.concurrency_key}</span>
-        </div>
-      HTML
-    end
-
-    def render_scheduled_at
-      return '' unless @scheduled_at
-
-      <<-HTML
-        <div class="detail-row">
-          <span class="detail-label">Scheduled At</span>
-          <span class="detail-value">#{format_datetime(@scheduled_at)}</span>
-        </div>
-      HTML
-    end
-
-    def render_finished_at
-      return '' unless @job.finished_at
-
-      <<-HTML
-        <div class="detail-row">
-          <span class="detail-label">Finished At</span>
-          <span class="detail-value">#{format_datetime(@job.finished_at)}</span>
-        </div>
-      HTML
-    end
-
-    def render_failed_at
-      return '' unless @failed_at
-
-      <<-HTML
-        <div class="detail-row">
-          <span class="detail-label">Failed At</span>
-          <span class="detail-value">#{format_datetime(@failed_at)}</span>
-        </div>
-      HTML
-    end
-
-    def render_worker_section
-      process = @claimed_execution.instance_variable_get(:@process)
-      return '' unless process
-
-      <<-HTML
-        <div class="job-section">
-          <h3 class="section-title">Worker</h3>
-          <div class="details-grid">
-            <div class="detail-row">
-              <span class="detail-label">Hostname</span>
-              <span class="detail-value">#{process.hostname}</span>
-            </div>
-            <div class="detail-row">
-              <span class="detail-label">PID</span>
-              <span class="detail-value">#{process.pid}</span>
-            </div>
-            <div class="detail-row">
-              <span class="detail-label">Process Type</span>
-              <span class="detail-value">#{process.kind}</span>
-            </div>
-            <div class="detail-row">
-              <span class="detail-label">Started At</span>
-              <span class="detail-value">#{format_datetime(@claimed_execution.created_at)}</span>
-            </div>
-          </div>
-        </div>
-      HTML
-    end
-
-    def render_recent_executions
-      return '' if @recent_executions.empty?
-
-      <<-HTML
-        <div class="job-section">
-          <div class="section-header">
-            <h3 class="section-title">Recent Executions</h3>
-            <span class="section-subtitle">Other #{@job.class_name} jobs</span>
-          </div>
-          <div class="table-container">
-            <table class="recent-executions-table">
-              <thead>
-                <tr>
-                  <th>Status</th>
-                  <th>Arguments</th>
-                  <th>Created</th>
-                  <th>Duration</th>
-                </tr>
-              </thead>
-              <tbody>
-                #{@recent_executions.map { |job| render_execution_row(job) }.join}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      HTML
-    end
-
-    def render_execution_row(job)
-      status = determine_job_status(job)
-      status_badge = render_status_badge(status)
-      duration = calculate_job_duration(job)
-      args_preview = truncate_arguments(job.arguments)
-
-      <<-HTML
-        <tr>
-          <td>#{status_badge}</td>
-          <td class="args-preview"><a href="#{job_path(job)}">#{args_preview}</a></td>
-          <td>#{time_ago_in_words(job.created_at)} ago</td>
-          <td>#{duration}</td>
-        </tr>
-      HTML
-    end
-
-    def determine_job_status(job)
-      return :failed if job.failed_execution.present?
-      return :in_progress if job.claimed_execution.present?
-      return :scheduled if job.scheduled_execution.present?
-      return :ready if job.ready_execution.present?
-      return :completed if job.finished_at
-
-      :pending
-    end
-
-    def render_status_badge(status)
-      labels = {
-        failed: 'Failed',
-        completed: 'Completed',
-        in_progress: 'In Progress',
-        scheduled: 'Scheduled',
-        ready: 'Ready',
-        pending: 'Pending'
-      }
-      classes = {
-        failed: 'status-failed',
-        completed: 'status-completed',
-        in_progress: 'status-in-progress',
-        scheduled: 'status-scheduled',
-        ready: 'status-pending',
-        pending: 'status-pending'
-      }
-
-      "<span class=\"mini-status-badge #{classes[status]}\">#{labels[status]}</span>"
-    end
-
-    def calculate_job_duration(job)
-      return '-' unless job.finished_at || job.failed_execution&.created_at
-
-      end_time = job.finished_at || job.failed_execution&.created_at
-      format_duration(end_time - job.created_at)
-    end
-
-    def truncate_arguments(args)
-      return '-' if args.blank?
-
-      preview = args.inspect.truncate(60)
-      CGI.escapeHTML(preview)
-    end
-
-    def render_raw_data_section
-      <<-HTML
-        <div class="job-section collapsible-section">
-          <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" 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>
-              </svg>
-              Copy
-            </button>
-          </div>
-          <div class="collapsible-content">
-            <pre class="raw-data-content" id="raw-data-content">#{CGI.escapeHTML(JSON.pretty_generate(@job.attributes))}</pre>
-          </div>
-        </div>
-        #{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
-  end
-end
diff --git a/app/presenters/solid_queue_monitor/jobs_presenter.rb b/app/presenters/solid_queue_monitor/jobs_presenter.rb
deleted file mode 100644
index 7b3511d..0000000
--- a/app/presenters/solid_queue_monitor/jobs_presenter.rb
+++ /dev/null
@@ -1,144 +0,0 @@
-# frozen_string_literal: true
-
-module SolidQueueMonitor
-  class JobsPresenter < BasePresenter
-    include Rails.application.routes.url_helpers
-    include SolidQueueMonitor::Engine.routes.url_helpers
-
-    def initialize(jobs, current_page: 1, total_pages: 1, filters: {}, sort: {})
-      @jobs = jobs
-      @current_page = current_page
-      @total_pages = total_pages
-      @filters = filters
-      @sort = sort
-    end
-
-    def render
-      <<-HTML
-        <div class="section-wrapper">
-          <div class="section">
-            <h3>Recent Jobs</h3>
-            #{generate_filter_form}
-            #{generate_table}
-            #{generate_pagination(@current_page, @total_pages)}
-          </div>
-        </div>
-      HTML
-    end
-
-    private
-
-    def generate_filter_form
-      <<-HTML
-        <div class="filter-form-container">
-          <form method="get" action="" class="filter-form">
-            <div class="filter-group">
-              <label for="class_name">Job Class:</label>
-              <input type="text" name="class_name" id="class_name" value="#{@filters[:class_name]}" placeholder="Filter by class name">
-            </div>
-
-            <div class="filter-group">
-              <label for="queue_name">Queue:</label>
-              <input type="text" name="queue_name" id="queue_name" value="#{@filters[:queue_name]}" placeholder="Filter by queue">
-            </div>
-
-            <div class="filter-group">
-              <label for="arguments">Arguments:</label>
-              <input type="text" name="arguments" id="arguments" value="#{@filters[:arguments]}" placeholder="Filter by arguments">
-            </div>
-
-            <div class="filter-group">
-              <label for="status">Status:</label>
-              <select name="status" id="status">
-                <option value="">All Statuses</option>
-                <option value="completed" #{@filters[:status] == 'completed' ? 'selected' : ''}>Completed</option>
-                <option value="failed" #{@filters[:status] == 'failed' ? 'selected' : ''}>Failed</option>
-                <option value="scheduled" #{@filters[:status] == 'scheduled' ? 'selected' : ''}>Scheduled</option>
-                <option value="pending" #{@filters[:status] == 'pending' ? 'selected' : ''}>Pending</option>
-              </select>
-            </div>
-
-            <div class="filter-actions">
-              <button type="submit" class="filter-button">Apply Filters</button>
-              <a href="#{root_path}" class="reset-button">Reset</a>
-            </div>
-          </form>
-        </div>
-      HTML
-    end
-
-    def generate_table
-      <<-HTML
-        <div class="table-container">
-          <table>
-            <thead>
-              <tr>
-                <th>ID</th>
-                #{sortable_header('class_name', 'Job')}
-                #{sortable_header('queue_name', 'Queue')}
-                <th>Arguments</th>
-                <th>Status</th>
-                #{sortable_header('created_at', 'Created At')}
-                <th>Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              #{@jobs.map { |job| generate_row(job) }.join}
-            </tbody>
-          </table>
-        </div>
-      HTML
-    end
-
-    def generate_row(job)
-      status = job_status(job)
-
-      # Build the row HTML
-      row_html = <<-HTML
-        <tr>
-          <td><a href="#{job_path(job)}" class="job-class-link">#{job.id}</a></td>
-          <td><a href="#{job_path(job)}" class="job-class-link">#{job.class_name}</a></td>
-          <td>#{queue_link(job.queue_name)}</td>
-          <td>#{format_arguments(job.arguments)}</td>
-          <td><span class='status-badge status-#{status}'>#{status}</span></td>
-          <td>#{format_datetime(job.created_at)}</td>
-      HTML
-
-      # Add actions column only for failed jobs
-      if status == 'failed'
-        # Find the failed execution record for this job
-        failed_execution = SolidQueue::FailedExecution.find_by(job_id: job.id)
-
-        row_html += if failed_execution
-                      <<-HTML
-            <td class="actions-cell">
-              <div class="job-actions">
-                <form method="post" action="#{retry_failed_job_path(id: failed_execution.id)}" class="inline-form">
-                  <input type="hidden" name="redirect_to" value="#{root_path}">
-                  <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"
-                      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>
-              </div>
-            </td>
-                      HTML
-                    else
-                      '<td></td>'
-                    end
-      else
-        row_html += '<td></td>'
-      end
-
-      row_html += '</tr>'
-      row_html
-    end
-
-    def job_status(job)
-      SolidQueueMonitor::StatusCalculator.new(job).calculate
-    end
-  end
-end
diff --git a/app/presenters/solid_queue_monitor/queue_details_presenter.rb b/app/presenters/solid_queue_monitor/queue_details_presenter.rb
deleted file mode 100644
index 353d691..0000000
--- a/app/presenters/solid_queue_monitor/queue_details_presenter.rb
+++ /dev/null
@@ -1,195 +0,0 @@
-# frozen_string_literal: true
-
-module SolidQueueMonitor
-  class QueueDetailsPresenter < BasePresenter
-    def initialize(queue_name:, paused:, jobs:, counts:, current_page: 1, total_pages: 1, filters: {}, sort: {})
-      @queue_name = queue_name
-      @paused = paused
-      @jobs = jobs
-      @counts = counts
-      @current_page = current_page
-      @total_pages = total_pages
-      @filters = filters
-      @sort = sort
-    end
-
-    def render
-      section_wrapper("Queue: #{@queue_name}",
-                      render_header + render_stats_cards + generate_filter_form + generate_table + generate_pagination(@current_page, @total_pages))
-    end
-
-    private
-
-    def render_header
-      <<-HTML
-        <div class="section-header-row">
-          <div class="section-header-left">
-            #{status_badge}
-          </div>
-          <div class="section-header-right">
-            #{action_button}
-          </div>
-        </div>
-      HTML
-    end
-
-    def status_badge
-      if @paused
-        '<span class="status-badge status-paused">Paused</span>'
-      else
-        '<span class="status-badge status-active">Active</span>'
-      end
-    end
-
-    def action_button
-      if @paused
-        <<-HTML
-          <form action="#{resume_queue_path}" method="post" class="inline-form">
-            <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 resume-button">Resume Queue</button>
-          </form>
-        HTML
-      else
-        <<-HTML
-          <form action="#{pause_queue_path}" method="post" class="inline-form"
-                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>
-          </form>
-        HTML
-      end
-    end
-
-    def render_stats_cards
-      <<-HTML
-        <div class="stats-container">
-          <div class="stats">
-            #{generate_stat_card('Total Jobs', @counts[:total])}
-            #{generate_stat_card('Ready', @counts[:ready])}
-            #{generate_stat_card('Scheduled', @counts[:scheduled])}
-            #{generate_stat_card('In Progress', @counts[:in_progress])}
-            #{generate_stat_card('Completed', @counts[:completed])}
-            #{generate_stat_card('Failed', @counts[:failed])}
-          </div>
-        </div>
-      HTML
-    end
-
-    def generate_stat_card(title, value)
-      <<-HTML
-        <div class="stat-card">
-          <h3>#{title}</h3>
-          <p>#{value}</p>
-        </div>
-      HTML
-    end
-
-    def generate_filter_form
-      <<-HTML
-        <div class="filter-form-container">
-          <form method="get" action="#{queue_details_path(queue_name: @queue_name)}" class="filter-form">
-            <div class="filter-group">
-              <label for="class_name">Job Class:</label>
-              <input type="text" name="class_name" id="class_name" value="#{@filters[:class_name]}" placeholder="Filter by class name">
-            </div>
-
-            <div class="filter-group">
-              <label for="arguments">Arguments:</label>
-              <input type="text" name="arguments" id="arguments" value="#{@filters[:arguments]}" placeholder="Filter by arguments">
-            </div>
-
-            <div class="filter-group">
-              <label for="status">Status:</label>
-              <select name="status" id="status">
-                <option value="">All Statuses</option>
-                <option value="completed" #{@filters[:status] == 'completed' ? 'selected' : ''}>Completed</option>
-                <option value="failed" #{@filters[:status] == 'failed' ? 'selected' : ''}>Failed</option>
-                <option value="scheduled" #{@filters[:status] == 'scheduled' ? 'selected' : ''}>Scheduled</option>
-                <option value="pending" #{@filters[:status] == 'pending' ? 'selected' : ''}>Pending</option>
-                <option value="in_progress" #{@filters[:status] == 'in_progress' ? 'selected' : ''}>In Progress</option>
-              </select>
-            </div>
-
-            <div class="filter-actions">
-              <button type="submit" class="filter-button">Apply Filters</button>
-              <a href="#{queue_details_path(queue_name: @queue_name)}" class="reset-button">Reset</a>
-            </div>
-          </form>
-        </div>
-      HTML
-    end
-
-    def generate_table
-      return '<p class="empty-message">No jobs in this queue</p>' if @jobs.empty?
-
-      <<-HTML
-        <div class="table-container">
-          <table>
-            <thead>
-              <tr>
-                <th>ID</th>
-                #{sortable_header('class_name', 'Job')}
-                <th>Arguments</th>
-                <th>Status</th>
-                #{sortable_header('created_at', 'Created At')}
-                <th>Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              #{@jobs.map { |job| generate_row(job) }.join}
-            </tbody>
-          </table>
-        </div>
-      HTML
-    end
-
-    def generate_row(job)
-      status = job_status(job)
-
-      row_html = <<-HTML
-        <tr>
-          <td><a href="#{job_path(job)}" class="job-class-link">#{job.id}</a></td>
-          <td><a href="#{job_path(job)}" class="job-class-link">#{job.class_name}</a></td>
-          <td>#{format_arguments(job.arguments)}</td>
-          <td><span class="status-badge status-#{status}">#{status}</span></td>
-          <td>#{format_datetime(job.created_at)}</td>
-      HTML
-
-      # Add actions column for failed jobs
-      if status == 'failed'
-        failed_execution = SolidQueue::FailedExecution.find_by(job_id: job.id)
-
-        row_html += if failed_execution
-                      <<-HTML
-          <td class="actions-cell">
-            <div class="job-actions">
-              <form method="post" action="#{retry_failed_job_path(id: failed_execution.id)}" class="inline-form">
-                <input type="hidden" name="redirect_to" value="#{queue_details_path(queue_name: @queue_name)}">
-                <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"
-                    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>
-            </div>
-          </td>
-                      HTML
-                    else
-                      '<td></td>'
-                    end
-      else
-        row_html += '<td></td>'
-      end
-
-      row_html += '</tr>'
-      row_html
-    end
-
-    def job_status(job)
-      SolidQueueMonitor::StatusCalculator.new(job).calculate
-    end
-  end
-end
diff --git a/app/presenters/solid_queue_monitor/queues_presenter.rb b/app/presenters/solid_queue_monitor/queues_presenter.rb
deleted file mode 100644
index ee8ef71..0000000
--- a/app/presenters/solid_queue_monitor/queues_presenter.rb
+++ /dev/null
@@ -1,89 +0,0 @@
-# frozen_string_literal: true
-
-module SolidQueueMonitor
-  class QueuesPresenter < BasePresenter
-    def initialize(records, paused_queues = [], sort: {}, queue_stats: {})
-      @records       = records
-      @paused_queues = paused_queues
-      @sort          = sort
-      @queue_stats   = queue_stats
-    end
-
-    def render
-      section_wrapper('Queues', generate_table)
-    end
-
-    private
-
-    def generate_table
-      <<-HTML
-        <div class="table-container">
-          <table>
-            <thead>
-              <tr>
-                #{sortable_header('queue_name', 'Queue Name')}
-                <th>Status</th>
-                #{sortable_header('job_count', 'Total Jobs')}
-                <th>Ready Jobs</th>
-                <th>Scheduled Jobs</th>
-                <th>Failed Jobs</th>
-                <th>Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              #{@records.map { |queue| generate_row(queue) }.join}
-            </tbody>
-          </table>
-        </div>
-      HTML
-    end
-
-    def generate_row(queue)
-      queue_name = queue.queue_name || 'default'
-      paused     = @paused_queues.include?(queue_name)
-
-      <<-HTML
-        <tr class="#{paused ? 'queue-paused' : ''}">
-          <td>#{queue_link(queue_name)}</td>
-          <td>#{status_badge(paused)}</td>
-          <td>#{queue.job_count}</td>
-          <td>#{@queue_stats.dig(:ready, queue_name) || 0}</td>
-          <td>#{@queue_stats.dig(:scheduled, queue_name) || 0}</td>
-          <td>#{@queue_stats.dig(:failed, queue_name) || 0}</td>
-          <td class="actions-cell">#{action_button(queue_name, paused)}</td>
-        </tr>
-      HTML
-    end
-
-    def status_badge(paused)
-      if paused
-        '<span class="status-badge status-paused">Paused</span>'
-      else
-        '<span class="status-badge status-active">Active</span>'
-      end
-    end
-
-    def action_button(queue_name, paused)
-      if paused
-        <<-HTML
-          <form action="#{resume_queue_path}" method="post" class="inline-form">
-            <input type="hidden" name="queue_name" value="#{queue_name}">
-            <button type="submit" class="action-button resume-button" title="Resume queue processing">
-              Resume
-            </button>
-          </form>
-        HTML
-      else
-        <<-HTML
-          <form action="#{pause_queue_path}" method="post" class="inline-form"
-                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
-            </button>
-          </form>
-        HTML
-      end
-    end
-  end
-end
diff --git a/app/presenters/solid_queue_monitor/ready_jobs_presenter.rb b/app/presenters/solid_queue_monitor/ready_jobs_presenter.rb
deleted file mode 100644
index d3557ad..0000000
--- a/app/presenters/solid_queue_monitor/ready_jobs_presenter.rb
+++ /dev/null
@@ -1,81 +0,0 @@
-# frozen_string_literal: true
-
-module SolidQueueMonitor
-  class ReadyJobsPresenter < BasePresenter
-    def initialize(jobs, current_page: 1, total_pages: 1, filters: {}, sort: {})
-      @jobs = jobs
-      @current_page = current_page
-      @total_pages = total_pages
-      @filters = filters
-      @sort = sort
-    end
-
-    def render
-      section_wrapper('Ready Jobs',
-                      generate_filter_form + generate_table + generate_pagination(@current_page, @total_pages))
-    end
-
-    private
-
-    def generate_filter_form
-      <<-HTML
-        <div class="filter-form-container">
-          <form method="get" action="" class="filter-form">
-            <div class="filter-group">
-              <label for="class_name">Job Class:</label>
-              <input type="text" name="class_name" id="class_name" value="#{@filters[:class_name]}" placeholder="Filter by class name">
-            </div>
-
-            <div class="filter-group">
-              <label for="queue_name">Queue:</label>
-              <input type="text" name="queue_name" id="queue_name" value="#{@filters[:queue_name]}" placeholder="Filter by queue">
-            </div>
-
-            <div class="filter-group">
-              <label for="arguments">Arguments:</label>
-              <input type="text" name="arguments" id="arguments" value="#{@filters[:arguments]}" placeholder="Filter by arguments">
-            </div>
-
-            <div class="filter-actions">
-              <button type="submit" class="filter-button">Apply Filters</button>
-              <a href="#{ready_jobs_path}" class="reset-button">Reset</a>
-            </div>
-          </form>
-        </div>
-      HTML
-    end
-
-    def generate_table
-      <<-HTML
-        <div class="table-container">
-          <table>
-            <thead>
-              <tr>
-                #{sortable_header('class_name', 'Job')}
-                #{sortable_header('queue_name', 'Queue')}
-                #{sortable_header('priority', 'Priority')}
-                <th>Arguments</th>
-                #{sortable_header('created_at', 'Created At')}
-              </tr>
-            </thead>
-            <tbody>
-              #{@jobs.map { |execution| generate_row(execution) }.join}
-            </tbody>
-          </table>
-        </div>
-      HTML
-    end
-
-    def generate_row(execution)
-      <<-HTML
-        <tr>
-          <td><a href="#{job_path(execution.job)}" class="job-class-link">#{execution.job.class_name}</a></td>
-          <td>#{queue_link(execution.queue_name)}</td>
-          <td>#{execution.priority}</td>
-          <td>#{format_arguments(execution.job.arguments)}</td>
-          <td>#{format_datetime(execution.created_at)}</td>
-        </tr>
-      HTML
-    end
-  end
-end
diff --git a/app/presenters/solid_queue_monitor/recurring_jobs_presenter.rb b/app/presenters/solid_queue_monitor/recurring_jobs_presenter.rb
deleted file mode 100644
index ecbefe6..0000000
--- a/app/presenters/solid_queue_monitor/recurring_jobs_presenter.rb
+++ /dev/null
@@ -1,81 +0,0 @@
-# frozen_string_literal: true
-
-module SolidQueueMonitor
-  class RecurringJobsPresenter < BasePresenter
-    include Rails.application.routes.url_helpers
-    include SolidQueueMonitor::Engine.routes.url_helpers
-
-    def initialize(jobs, current_page: 1, total_pages: 1, filters: {}, sort: {})
-      @jobs = jobs
-      @current_page = current_page
-      @total_pages = total_pages
-      @filters = filters
-      @sort = sort
-    end
-
-    def render
-      section_wrapper('Recurring Jobs',
-                      generate_filter_form + generate_table + generate_pagination(@current_page, @total_pages))
-    end
-
-    private
-
-    def generate_filter_form
-      <<-HTML
-        <div class="filter-form-container">
-          <form method="get" action="" class="filter-form">
-            <div class="filter-group">
-              <label for="class_name">Job Class:</label>
-              <input type="text" name="class_name" id="class_name" value="#{@filters[:class_name]}" placeholder="Filter by class name">
-            </div>
-
-            <div class="filter-group">
-              <label for="queue_name">Queue:</label>
-              <input type="text" name="queue_name" id="queue_name" value="#{@filters[:queue_name]}" placeholder="Filter by queue">
-            </div>
-
-            <div class="filter-actions">
-              <button type="submit" class="filter-button">Apply Filters</button>
-              <a href="#{recurring_jobs_path}" class="reset-button">Reset</a>
-            </div>
-          </form>
-        </div>
-      HTML
-    end
-
-    def generate_table
-      <<-HTML
-        <div class="table-container">
-          <table>
-            <thead>
-              <tr>
-                #{sortable_header('key', 'Key')}
-                #{sortable_header('class_name', 'Job')}
-                <th>Schedule</th>
-                #{sortable_header('queue_name', 'Queue')}
-                #{sortable_header('priority', 'Priority')}
-                <th>Last Updated</th>
-              </tr>
-            </thead>
-            <tbody>
-              #{@jobs.map { |task| generate_row(task) }.join}
-            </tbody>
-          </table>
-        </div>
-      HTML
-    end
-
-    def generate_row(task)
-      <<-HTML
-        <tr>
-          <td>#{task.key}</td>
-          <td>#{task.class_name}</td>
-          <td>#{task.schedule}</td>
-          <td>#{queue_link(task.queue_name)}</td>
-          <td>#{task.priority || 'Default'}</td>
-          <td>#{format_datetime(task.updated_at)}</td>
-        </tr>
-      HTML
-    end
-  end
-end
diff --git a/app/presenters/solid_queue_monitor/scheduled_jobs_presenter.rb b/app/presenters/solid_queue_monitor/scheduled_jobs_presenter.rb
deleted file mode 100644
index 5318f1f..0000000
--- a/app/presenters/solid_queue_monitor/scheduled_jobs_presenter.rb
+++ /dev/null
@@ -1,178 +0,0 @@
-# frozen_string_literal: true
-
-module SolidQueueMonitor
-  class ScheduledJobsPresenter < BasePresenter
-    include Rails.application.routes.url_helpers
-    include SolidQueueMonitor::Engine.routes.url_helpers
-
-    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
-      section_wrapper('Scheduled Jobs', generate_filter_form + generate_table_with_actions)
-    end
-
-    private
-
-    def script_tag_open
-      @nonce ? %(<script nonce="#{@nonce}">) : '<script>'
-    end
-
-    def generate_filter_form
-      <<-HTML
-        <div class="filter-form-container">
-          <form method="get" action="" class="filter-form">
-            <div class="filter-group">
-              <label for="class_name">Job Class:</label>
-              <input type="text" name="class_name" id="class_name" value="#{@filters[:class_name]}" placeholder="Filter by class name">
-            </div>
-
-            <div class="filter-group">
-              <label for="queue_name">Queue:</label>
-              <input type="text" name="queue_name" id="queue_name" value="#{@filters[:queue_name]}" placeholder="Filter by queue">
-            </div>
-
-            <div class="filter-group">
-              <label for="arguments">Arguments:</label>
-              <input type="text" name="arguments" id="arguments" value="#{@filters[:arguments]}" placeholder="Filter by arguments">
-            </div>
-
-            <div class="filter-actions">
-              <button type="submit" class="filter-button">Apply Filters</button>
-              <a href="#{scheduled_jobs_path}" class="reset-button">Reset</a>
-            </div>
-          </form>
-        </div>
-
-        <div class="bulk-actions-bar">
-          <button type="button" class="action-button execute-button" id="execute-selected-top" disabled>Execute Selected</button>
-          <button type="button" class="action-button discard-button" id="reject-selected-top" disabled>Reject Selected</button>
-        </div>
-      HTML
-    end
-
-    def generate_table_with_actions
-      <<-HTML
-      <form id="scheduled-jobs-form" method="POST">
-        #{generate_table}
-      </form>
-      #{script_tag_open}
-        document.addEventListener('DOMContentLoaded', function() {
-          const selectAllCheckbox = document.querySelector('th input[type="checkbox"]');
-          const jobCheckboxes = document.getElementsByName('job_ids[]');
-          const executeButton = document.getElementById('execute-selected-top');
-          const rejectButton = document.getElementById('reject-selected-top');
-          const form = document.getElementById('scheduled-jobs-form');
-      #{'    '}
-          selectAllCheckbox.addEventListener('change', function() {
-            jobCheckboxes.forEach(checkbox => checkbox.checked = this.checked);
-            updateButtonStates();
-          });
-
-          jobCheckboxes.forEach(checkbox => {
-            checkbox.addEventListener('change', function() {
-              selectAllCheckbox.checked = Array.from(jobCheckboxes).every(cb => cb.checked);
-              updateButtonStates();
-            });
-          });
-      #{'    '}
-          // Add event listener for the execute button
-          executeButton.addEventListener('click', function() {
-            const selectedIds = Array.from(document.querySelectorAll('input[name="job_ids[]"]:checked')).map(cb => cb.value);
-            if (selectedIds.length === 0) return;
-      #{'      '}
-            submitForm('#{execute_jobs_path}', selectedIds);
-          });
-      #{'    '}
-          // Add event listener for the reject button
-          rejectButton.addEventListener('click', function() {
-            const selectedIds = Array.from(document.querySelectorAll('input[name="job_ids[]"]:checked')).map(cb => cb.value);
-            if (selectedIds.length === 0) return;
-      #{'      '}
-            if (confirm('Are you sure you want to reject the selected jobs? This action cannot be undone.')) {
-              submitForm('#{reject_jobs_path}', selectedIds);
-            }
-          });
-      #{'    '}
-          function submitForm(actionUrl, selectedIds) {
-            // Uncheck all checkboxes to prevent duplicate submission
-            document.querySelectorAll('input[name="job_ids[]"]').forEach(checkbox => {
-              checkbox.checked = false;
-            });
-
-            // Clear any existing hidden inputs
-            document.querySelectorAll('input[type="hidden"][name="job_ids[]"]').forEach(input => input.remove());
-
-            // Set form action
-            form.action = actionUrl;
-
-            // 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
-            form.submit();
-          }
-      #{'    '}
-          function updateButtonStates() {
-            const checkboxes = document.getElementsByName('job_ids[]');
-            const checked = Array.from(checkboxes).some(cb => cb.checked);
-            executeButton.disabled = !checked;
-            rejectButton.disabled = !checked;
-          }
-      #{'    '}
-          // Initialize button states
-          updateButtonStates();
-        });
-      </script>
-      HTML
-    end
-
-    def generate_table
-      <<-HTML
-        <div class="table-container">
-          <table>
-            <thead>
-              <tr>
-                <th width="50"><input type="checkbox"></th>
-                #{sortable_header('class_name', 'Job')}
-                #{sortable_header('queue_name', 'Queue')}
-                #{sortable_header('scheduled_at', 'Scheduled At')}
-                <th>Arguments</th>
-              </tr>
-            </thead>
-            <tbody>
-              #{@jobs.map { |execution| generate_row(execution) }.join}
-            </tbody>
-          </table>
-        </div>
-        #{generate_pagination(@current_page, @total_pages)}
-      HTML
-    end
-
-    def generate_row(execution)
-      <<-HTML
-        <tr>
-          <td>
-            <input type="checkbox" name="job_ids[]" value="#{execution.id}">
-          </td>
-          <td><a href="#{job_path(execution.job)}" class="job-class-link">#{execution.job.class_name}</a></td>
-          <td>#{queue_link(execution.queue_name)}</td>
-          <td>#{format_datetime(execution.scheduled_at)}</td>
-          <td>#{format_arguments(execution.job.arguments)}</td>
-        </tr>
-      HTML
-    end
-  end
-end
diff --git a/app/presenters/solid_queue_monitor/search_results_presenter.rb b/app/presenters/solid_queue_monitor/search_results_presenter.rb
deleted file mode 100644
index 83a3cab..0000000
--- a/app/presenters/solid_queue_monitor/search_results_presenter.rb
+++ /dev/null
@@ -1,190 +0,0 @@
-# frozen_string_literal: true
-
-module SolidQueueMonitor
-  class SearchResultsPresenter < BasePresenter
-    def initialize(query, results)
-      @query = query
-      @results = results
-    end
-
-    def render
-      section_wrapper('Search Results', generate_content)
-    end
-
-    private
-
-    def generate_content
-      if @query.blank?
-        generate_empty_query_message
-      elsif total_count.zero?
-        generate_no_results_message
-      else
-        generate_results_summary + generate_all_sections
-      end
-    end
-
-    def generate_empty_query_message
-      <<-HTML
-        <div class="empty-state">
-          <p>Enter a search term in the header to find jobs across all categories.</p>
-        </div>
-      HTML
-    end
-
-    def generate_no_results_message
-      <<-HTML
-        <div class="empty-state">
-          <p>No results found for "#{escape_html(@query)}"</p>
-          <p class="results-summary">0 results</p>
-        </div>
-      HTML
-    end
-
-    def generate_results_summary
-      <<-HTML
-        <div class="results-summary">
-          <p>Found #{total_count} #{total_count == 1 ? 'result' : 'results'} for "#{escape_html(@query)}"</p>
-        </div>
-      HTML
-    end
-
-    def generate_all_sections
-      sections = []
-      sections << generate_ready_section if @results[:ready].any?
-      sections << generate_scheduled_section if @results[:scheduled].any?
-      sections << generate_failed_section if @results[:failed].any?
-      sections << generate_in_progress_section if @results[:in_progress].any?
-      sections << generate_completed_section if @results[:completed].any?
-      sections << generate_recurring_section if @results[:recurring].any?
-      sections.join
-    end
-
-    def generate_ready_section
-      generate_section('Ready Jobs', @results[:ready]) do |execution|
-        generate_job_row(execution.job, execution.queue_name, execution.created_at)
-      end
-    end
-
-    def generate_scheduled_section
-      generate_section('Scheduled Jobs', @results[:scheduled]) do |execution|
-        generate_job_row(execution.job, execution.queue_name, execution.scheduled_at, 'Scheduled for')
-      end
-    end
-
-    def generate_failed_section
-      generate_section('Failed Jobs', @results[:failed]) do |execution|
-        generate_failed_row(execution)
-      end
-    end
-
-    def generate_in_progress_section
-      generate_section('In Progress Jobs', @results[:in_progress]) do |execution|
-        generate_job_row(execution.job, execution.job.queue_name, execution.created_at, 'Started at')
-      end
-    end
-
-    def generate_completed_section
-      generate_section('Completed Jobs', @results[:completed]) do |job|
-        generate_completed_row(job)
-      end
-    end
-
-    def generate_recurring_section
-      generate_section('Recurring Tasks', @results[:recurring]) do |task|
-        generate_recurring_row(task)
-      end
-    end
-
-    def generate_section(title, items, &block)
-      <<-HTML
-        <div class="search-results-section">
-          <h3>#{title} (#{items.size})</h3>
-          <div class="table-container">
-            <table>
-              <thead>
-                <tr>
-                  #{section_headers(title)}
-                </tr>
-              </thead>
-              <tbody>
-                #{items.map(&block).join}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      HTML
-    end
-
-    def section_headers(title)
-      case title
-      when 'Recurring Tasks'
-        '<th>Key</th><th>Class</th><th>Schedule</th><th>Queue</th>'
-      when 'Failed Jobs'
-        '<th>Job</th><th>Queue</th><th>Error</th><th>Failed At</th>'
-      when 'Completed Jobs'
-        '<th>Job</th><th>Queue</th><th>Arguments</th><th>Completed At</th>'
-      else
-        '<th>Job</th><th>Queue</th><th>Arguments</th><th>Time</th>'
-      end
-    end
-
-    def generate_job_row(job, queue_name, time, time_label = 'Created at')
-      <<-HTML
-        <tr>
-          <td><a href="#{job_path(job)}" class="job-class-link">#{job.class_name}</a></td>
-          <td>#{queue_link(queue_name)}</td>
-          <td>#{format_arguments(job.arguments)}</td>
-          <td>
-            <span class="job-timestamp">#{time_label}: #{format_datetime(time)}</span>
-          </td>
-        </tr>
-      HTML
-    end
-
-    def generate_failed_row(execution)
-      job = execution.job
-      <<-HTML
-        <tr>
-          <td><a href="#{job_path(job)}" class="job-class-link">#{job.class_name}</a></td>
-          <td>#{queue_link(job.queue_name)}</td>
-          <td><div class="error-message">#{escape_html(execution.error.to_s.truncate(100))}</div></td>
-          <td>
-            <span class="job-timestamp">#{format_datetime(execution.created_at)}</span>
-          </td>
-        </tr>
-      HTML
-    end
-
-    def generate_completed_row(job)
-      <<-HTML
-        <tr>
-          <td><a href="#{job_path(job)}" class="job-class-link">#{job.class_name}</a></td>
-          <td>#{queue_link(job.queue_name)}</td>
-          <td>#{format_arguments(job.arguments)}</td>
-          <td>
-            <span class="job-timestamp">#{format_datetime(job.finished_at)}</span>
-          </td>
-        </tr>
-      HTML
-    end
-
-    def generate_recurring_row(task)
-      <<-HTML
-        <tr>
-          <td><strong>#{task.key}</strong></td>
-          <td>#{task.class_name || '-'}</td>
-          <td><code>#{task.schedule}</code></td>
-          <td>#{queue_link(task.queue_name)}</td>
-        </tr>
-      HTML
-    end
-
-    def total_count
-      @total_count ||= @results.values.sum(&:size)
-    end
-
-    def escape_html(text)
-      text.to_s.gsub('&', '&amp;').gsub('<', '&lt;').gsub('>', '&gt;').gsub('"', '&quot;')
-    end
-  end
-end
diff --git a/app/presenters/solid_queue_monitor/workers_presenter.rb b/app/presenters/solid_queue_monitor/workers_presenter.rb
deleted file mode 100644
index aa67d2b..0000000
--- a/app/presenters/solid_queue_monitor/workers_presenter.rb
+++ /dev/null
@@ -1,325 +0,0 @@
-# frozen_string_literal: true
-
-module SolidQueueMonitor
-  class WorkersPresenter < BasePresenter
-    HEARTBEAT_STALE_THRESHOLD = 5.minutes
-    HEARTBEAT_DEAD_THRESHOLD = 10.minutes
-
-    def initialize(processes, current_page: 1, total_pages: 1, filters: {}, sort: {})
-      @processes = processes.to_a # Load records once to avoid multiple queries
-      @current_page = current_page
-      @total_pages = total_pages
-      @filters = filters
-      @sort = sort
-      preload_claimed_data
-      calculate_summary_stats
-    end
-
-    def render
-      section_wrapper('Workers', generate_content)
-    end
-
-    private
-
-    def generate_content
-      generate_summary + generate_filter_form + generate_table_or_empty + generate_pagination(@current_page, @total_pages)
-    end
-
-    def generate_filter_form
-      <<-HTML
-        <div class="filter-form-container">
-          <form method="get" action="#{workers_path}" class="filter-form">
-            <div class="filter-group">
-              <label for="kind">Kind:</label>
-              <select name="kind" id="kind">
-                <option value="">All</option>
-                #{kind_options}
-              </select>
-            </div>
-
-            <div class="filter-group">
-              <label for="hostname">Hostname:</label>
-              <input type="text" name="hostname" id="hostname" value="#{@filters[:hostname]}" placeholder="Filter by hostname">
-            </div>
-
-            <div class="filter-group">
-              <label for="status">Status:</label>
-              <select name="status" id="status">
-                <option value="">All</option>
-                <option value="healthy" #{@filters[:status] == 'healthy' ? 'selected' : ''}>Healthy</option>
-                <option value="stale" #{@filters[:status] == 'stale' ? 'selected' : ''}>Stale</option>
-                <option value="dead" #{@filters[:status] == 'dead' ? 'selected' : ''}>Dead</option>
-              </select>
-            </div>
-
-            <div class="filter-actions">
-              <button type="submit" class="filter-button">Apply Filters</button>
-              <a href="#{workers_path}" class="reset-button">Reset</a>
-            </div>
-          </form>
-        </div>
-      HTML
-    end
-
-    def kind_options
-      kinds = %w[Worker Dispatcher Scheduler]
-      kinds.map do |kind|
-        selected = @filters[:kind] == kind ? 'selected' : ''
-        "<option value=\"#{kind}\" #{selected}>#{kind}</option>"
-      end.join
-    end
-
-    def calculate_summary_stats
-      all_processes = all_processes_for_summary
-      @total_count = all_processes.count
-      @healthy_count = all_processes.count { |p| worker_status(p) == :healthy }
-      @stale_count = all_processes.count { |p| worker_status(p) == :stale }
-      @dead_count = all_processes.count { |p| worker_status(p) == :dead }
-    end
-
-    def generate_summary
-      <<-HTML
-        <div class="workers-summary">
-          <div class="summary-card">
-            <span class="summary-label">Total Processes</span>
-            <span class="summary-value">#{@total_count}</span>
-          </div>
-          <div class="summary-card summary-healthy">
-            <span class="summary-label">Healthy</span>
-            <span class="summary-value">#{@healthy_count}</span>
-          </div>
-          <div class="summary-card summary-stale">
-            <span class="summary-label">Stale</span>
-            <span class="summary-value">#{@stale_count}</span>
-          </div>
-          <div class="summary-card summary-dead">
-            <span class="summary-label">Dead</span>
-            <span class="summary-value">#{@dead_count}</span>
-            #{prune_all_link}
-          </div>
-        </div>
-      HTML
-    end
-
-    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"
-           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" class="is-hidden"></form>
-      HTML
-    end
-
-    def all_processes_for_summary
-      @all_processes_for_summary ||= SolidQueue::Process.all.to_a
-    end
-
-    def generate_table_or_empty
-      if @processes.empty?
-        generate_empty_state
-      else
-        generate_table
-      end
-    end
-
-    def generate_empty_state
-      <<-HTML
-        <div class="empty-state">
-          <p>No worker processes found.</p>
-          <p class="empty-state-hint">Workers will appear here when Solid Queue processes are running.</p>
-        </div>
-      HTML
-    end
-
-    def generate_table
-      <<-HTML
-        <div class="table-container">
-          <table>
-            <thead>
-              <tr>
-                <th>Kind</th>
-                #{sortable_header('hostname', 'Hostname')}
-                <th>PID</th>
-                <th>Queues</th>
-                #{sortable_header('last_heartbeat_at', 'Last Heartbeat')}
-                <th>Status</th>
-                <th>Jobs Processing</th>
-                <th>Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              #{@processes.map { |process| generate_row(process) }.join}
-            </tbody>
-          </table>
-        </div>
-      HTML
-    end
-
-    def generate_row(process)
-      status = worker_status(process)
-      row_class = case status
-                  when :dead then 'worker-dead'
-                  when :stale then 'worker-stale'
-                  else ''
-                  end
-
-      <<-HTML
-        <tr class="#{row_class}">
-          <td>#{kind_badge(process.kind)}</td>
-          <td>#{hostname(process)}</td>
-          <td><code>#{process.pid}</code></td>
-          <td>#{queues_display(process)}</td>
-          <td>#{format_heartbeat(process.last_heartbeat_at)}</td>
-          <td>#{status_badge(status)}</td>
-          <td>#{jobs_processing(process)}</td>
-          <td class="actions-cell">#{action_button(process, status)}</td>
-        </tr>
-      HTML
-    end
-
-    def action_button(process, status)
-      return '<span class="action-placeholder">-</span>' unless status == :dead
-
-      <<-HTML
-        <form action="#{remove_worker_path(id: process.id)}" method="post" class="inline-form"
-              data-confirm="Remove this dead process from the registry?">
-          <button type="submit" class="action-button discard-button" title="Remove dead process">
-            Remove
-          </button>
-        </form>
-      HTML
-    end
-
-    def kind_badge(kind)
-      badge_class = case kind
-                    when 'Worker' then 'kind-worker'
-                    when 'Dispatcher' then 'kind-dispatcher'
-                    when 'Scheduler' then 'kind-scheduler'
-                    else 'kind-other'
-                    end
-      "<span class=\"kind-badge #{badge_class}\">#{kind}</span>"
-    end
-
-    def hostname(process)
-      process.hostname || parse_metadata(process)['hostname'] || '-'
-    end
-
-    def queues_display(process)
-      metadata = parse_metadata(process)
-      queues = metadata['queues']
-
-      return '-' if queues.nil?
-
-      # Handle string queues (e.g., "*" for all queues)
-      if queues.is_a?(String)
-        return "<code class=\"queue-tag\">#{queues == '*' ? 'All Queues' : queues}</code>"
-      end
-
-      return '-' if queues.empty?
-
-      if queues.length <= 3
-        queues.map { |q| "<code class=\"queue-tag\">#{q}</code>" }.join(' ')
-      else
-        visible = queues.first(2).map { |q| "<code class=\"queue-tag\">#{q}</code>" }.join(' ')
-        "#{visible} <span class=\"queue-more\">+#{queues.length - 2} more</span>"
-      end
-    end
-
-    def format_heartbeat(heartbeat_at)
-      return '-' unless heartbeat_at
-
-      time_ago = time_ago_in_words(heartbeat_at)
-      "<span title=\"#{heartbeat_at.strftime('%Y-%m-%d %H:%M:%S')}\">#{time_ago} ago</span>"
-    end
-
-    def worker_status(process)
-      return :dead unless process.last_heartbeat_at
-
-      time_since_heartbeat = Time.current - process.last_heartbeat_at
-
-      if time_since_heartbeat > HEARTBEAT_DEAD_THRESHOLD
-        :dead
-      elsif time_since_heartbeat > HEARTBEAT_STALE_THRESHOLD
-        :stale
-      else
-        :healthy
-      end
-    end
-
-    def status_badge(status)
-      badges = {
-        healthy: '<span class="status-badge status-healthy">Healthy</span>',
-        stale: '<span class="status-badge status-stale">Stale</span>',
-        dead: '<span class="status-badge status-dead">Dead</span>'
-      }
-      badges[status]
-    end
-
-    def jobs_processing(process)
-      count = @claimed_counts[process.id] || 0
-
-      if count.zero?
-        '<span class="jobs-idle">Idle</span>'
-      else
-        jobs = @claimed_jobs[process.id] || []
-        job_names = jobs.map(&:class_name).uniq.first(3)
-
-        tooltip = jobs.first(10).map { |j| "#{j.class_name} (ID: #{j.id})" }.join('&#10;')
-
-        <<-HTML
-          <span class="jobs-processing" title="#{tooltip}">
-            #{count} job#{count > 1 ? 's' : ''}
-            <span class="job-names">(#{job_names.join(', ')}#{jobs.length > 3 ? '...' : ''})</span>
-          </span>
-        HTML
-      end
-    end
-
-    def preload_claimed_data
-      return if @processes.empty?
-
-      process_ids = @processes.map(&:id)
-
-      # Preload claimed execution counts
-      @claimed_counts = SolidQueue::ClaimedExecution
-                        .where(process_id: process_ids)
-                        .group(:process_id)
-                        .count
-
-      # Preload claimed jobs for processes that have any
-      claimed_executions = SolidQueue::ClaimedExecution
-                           .includes(:job)
-                           .where(process_id: process_ids)
-
-      @claimed_jobs = claimed_executions.each_with_object({}) do |execution, hash|
-        hash[execution.process_id] ||= []
-        hash[execution.process_id] << execution.job
-      end
-    end
-
-    def parse_metadata(process)
-      @parsed_metadata ||= {}
-      @parsed_metadata[process.id] ||= parse_process_metadata(process)
-    end
-
-    def parse_process_metadata(process)
-      return {} unless process.metadata
-
-      if process.metadata.is_a?(String)
-        JSON.parse(process.metadata)
-      else
-        process.metadata
-      end
-    rescue JSON::ParserError
-      {}
-    end
-  end
-end
diff --git a/app/services/solid_queue_monitor/asset_cache.rb b/app/services/solid_queue_monitor/asset_cache.rb
new file mode 100644
index 0000000..ad51f75
--- /dev/null
+++ b/app/services/solid_queue_monitor/asset_cache.rb
@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+require 'digest'
+
+module SolidQueueMonitor
+  class AssetCache
+    ASSET_ROOT = SolidQueueMonitor::Engine.root.join('app/assets').freeze
+    SUBDIRS_BY_EXT = { '.css' => 'stylesheets', '.js' => 'javascripts' }.freeze
+    MUTEX = Mutex.new
+
+    @entries = {}
+
+    class << self
+      def fetch_by_name(file_name)
+        path = path_for(file_name)
+        return nil unless path&.file?
+
+        cached = @entries[path.to_s]
+        return cached if cached && cached[:mtime] == path.mtime
+
+        MUTEX.synchronize do
+          cached = @entries[path.to_s]
+          return cached if cached && cached[:mtime] == path.mtime
+
+          content = path.read
+          @entries[path.to_s] = {
+            content: content,
+            mtime: path.mtime,
+            etag: Digest::SHA256.hexdigest(content)[0, 16]
+          }
+        end
+      end
+
+      def fingerprint_for(file_name)
+        fetch_by_name(file_name)&.dig(:etag)
+      end
+
+      def clear!
+        MUTEX.synchronize { @entries = {} }
+      end
+
+      private
+
+      def path_for(file_name)
+        ext = File.extname(file_name)
+        subdir = SUBDIRS_BY_EXT[ext]
+        return nil unless subdir
+
+        candidate = ASSET_ROOT.join(subdir, 'solid_queue_monitor', file_name).expand_path
+        return nil unless candidate.to_s.start_with?(ASSET_ROOT.to_s)
+
+        candidate
+      end
+    end
+  end
+end
diff --git a/app/services/solid_queue_monitor/chart_presenter.rb b/app/services/solid_queue_monitor/chart_presenter.rb
deleted file mode 100644
index f7303bf..0000000
--- a/app/services/solid_queue_monitor/chart_presenter.rb
+++ /dev/null
@@ -1,239 +0,0 @@
-# frozen_string_literal: true
-
-module SolidQueueMonitor
-  class ChartPresenter
-    CHART_WIDTH = 1200
-    CHART_HEIGHT = 280
-    PADDING = { top: 40, right: 30, bottom: 60, left: 60 }.freeze
-    COLORS = {
-      created: '#3b82f6',   # Blue
-      completed: '#10b981', # Green
-      failed: '#ef4444'     # Red
-    }.freeze
-
-    def initialize(chart_data)
-      @data = chart_data
-      @plot_width = CHART_WIDTH - PADDING[:left] - PADDING[:right]
-      @plot_height = CHART_HEIGHT - PADDING[:top] - PADDING[:bottom]
-    end
-
-    def render
-      <<-HTML
-        <div class="chart-section" id="chart-section">
-          <div class="chart-header">
-            <div class="chart-header-left">
-              <button class="chart-toggle-btn" id="chart-toggle-btn" title="Toggle chart">
-                <svg class="chart-toggle-icon" id="chart-toggle-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <polyline points="6 9 12 15 18 9"></polyline>
-                </svg>
-              </button>
-              <h3>Job Activity</h3>
-              #{render_summary}
-            </div>
-            #{render_time_select}
-          </div>
-          <div class="chart-collapsible" id="chart-collapsible">
-            <div class="chart-container">
-              #{render_svg}
-            </div>
-            #{render_legend}
-          </div>
-        </div>
-        #{render_tooltip}
-      HTML
-    end
-
-    private
-
-    def render_summary
-      totals = @data[:totals] || { created: 0, completed: 0, failed: 0 }
-      <<-HTML
-        <span class="chart-summary">
-          <span class="summary-item summary-created">#{totals[:created]} created</span>
-          <span class="summary-separator">·</span>
-          <span class="summary-item summary-completed">#{totals[:completed]} completed</span>
-          <span class="summary-separator">·</span>
-          <span class="summary-item summary-failed">#{totals[:failed]} failed</span>
-        </span>
-      HTML
-    end
-
-    def render_time_select
-      options = @data[:available_ranges].map do |key, label|
-        selected = key == @data[:time_range] ? 'selected' : ''
-        "<option value=\"#{key}\" #{selected}>#{label}</option>"
-      end.join
-
-      <<-HTML
-        <div class="chart-time-select-wrapper">
-          <select class="chart-time-select" id="chart-time-select">
-            #{options}
-          </select>
-        </div>
-      HTML
-    end
-
-    def render_svg
-      return render_empty_state if all_series_empty?
-
-      max_value = calculate_max_value
-      max_value = 10 if max_value.zero?
-
-      <<-SVG
-        <svg viewBox="0 0 #{CHART_WIDTH} #{CHART_HEIGHT}" class="job-activity-chart" preserveAspectRatio="xMidYMid meet">
-          #{render_grid_lines(max_value)}
-          #{render_axes}
-          #{render_x_labels}
-          #{render_y_labels(max_value)}
-          #{render_series_line(:failed, max_value)}
-          #{render_series_line(:completed, max_value)}
-          #{render_series_line(:created, max_value)}
-          #{render_series_points(:failed, max_value)}
-          #{render_series_points(:completed, max_value)}
-          #{render_series_points(:created, max_value)}
-        </svg>
-      SVG
-    end
-
-    def all_series_empty?
-      %i[created completed failed].all? { |series| series_empty?(series) }
-    end
-
-    def series_empty?(series)
-      @data[series].nil? || @data[series].all?(&:zero?)
-    end
-
-    def render_empty_state
-      <<-HTML
-        <div class="chart-empty">
-          <span>No job activity in this time range</span>
-        </div>
-      HTML
-    end
-
-    def render_series_line(series, max_value)
-      return '' if series_empty?(series)
-
-      render_line(series, max_value)
-    end
-
-    def render_series_points(series, max_value)
-      return '' if series_empty?(series)
-
-      render_data_points(series, max_value)
-    end
-
-    def calculate_max_value
-      all_values = @data[:created] + @data[:completed] + @data[:failed]
-      max = all_values.max || 0
-      # Round up to nice number
-      return 10 if max <= 10
-
-      magnitude = 10**Math.log10(max).floor
-      ((max.to_f / magnitude).ceil * magnitude)
-    end
-
-    def render_grid_lines(_max_value)
-      lines = []
-      5.times do |i|
-        y = PADDING[:top] + (@plot_height * i / 4.0)
-        lines << "<line x1=\"#{PADDING[:left]}\" y1=\"#{y}\" x2=\"#{CHART_WIDTH - PADDING[:right]}\" y2=\"#{y}\" class=\"grid-line\"/>"
-      end
-      lines.join("\n")
-    end
-
-    def render_axes
-      <<-SVG
-        <line x1="#{PADDING[:left]}" y1="#{PADDING[:top]}" x2="#{PADDING[:left]}" y2="#{CHART_HEIGHT - PADDING[:bottom]}" class="axis-line"/>
-        <line x1="#{PADDING[:left]}" y1="#{CHART_HEIGHT - PADDING[:bottom]}" x2="#{CHART_WIDTH - PADDING[:right]}" y2="#{CHART_HEIGHT - PADDING[:bottom]}" class="axis-line"/>
-      SVG
-    end
-
-    def render_x_labels
-      labels = @data[:labels]
-      return '' if labels.empty?
-
-      # Show fewer labels if too many
-      step = labels.size > 12 ? (labels.size / 6.0).ceil : 1
-
-      label_elements = labels.each_with_index.map do |label, i|
-        next unless (i % step).zero? || i == labels.size - 1
-
-        x = PADDING[:left] + (@plot_width * i / (labels.size - 1).to_f)
-        "<text x=\"#{x}\" y=\"#{CHART_HEIGHT - PADDING[:bottom] + 20}\" class=\"axis-label x-label\">#{label}</text>"
-      end.compact
-
-      label_elements.join("\n")
-    end
-
-    def render_y_labels(max_value)
-      labels = []
-      5.times do |i|
-        value = (max_value * (4 - i) / 4.0).round
-        y = PADDING[:top] + (@plot_height * i / 4.0)
-        labels << "<text x=\"#{PADDING[:left] - 10}\" y=\"#{y + 4}\" class=\"axis-label y-label\">#{value}</text>"
-      end
-      labels.join("\n")
-    end
-
-    def render_line(series, max_value)
-      points = calculate_points(series, max_value)
-      return '' if points.empty?
-
-      points_str = points.map { |p| "#{p[:x]},#{p[:y]}" }.join(' ')
-
-      "<polyline points=\"#{points_str}\" class=\"chart-line chart-line-#{series}\" fill=\"none\" stroke=\"#{COLORS[series]}\" stroke-width=\"2\"/>"
-    end
-
-    def render_data_points(series, max_value)
-      points = calculate_points(series, max_value)
-      values = @data[series]
-
-      points.each_with_index.map do |point, i|
-        <<-SVG
-          <circle cx="#{point[:x]}" cy="#{point[:y]}" r="4" class="data-point data-point-#{series}" fill="#{COLORS[series]}"
-            data-series="#{series}" data-label="#{@data[:labels][i]}" data-value="#{values[i]}"/>
-        SVG
-      end.join("\n")
-    end
-
-    def calculate_points(series, max_value)
-      values = @data[series]
-      return [] if values.blank?
-
-      values.each_with_index.map do |value, i|
-        x = PADDING[:left] + (@plot_width * i / (values.size - 1).to_f)
-        y = CHART_HEIGHT - PADDING[:bottom] - (@plot_height * value / max_value.to_f)
-        { x: x.round(2), y: y.round(2) }
-      end
-    end
-
-    def render_legend
-      <<-HTML
-        <div class="chart-legend">
-          <span class="legend-item">
-            <span class="legend-color legend-color-created"></span>
-            Created
-          </span>
-          <span class="legend-item">
-            <span class="legend-color legend-color-completed"></span>
-            Completed
-          </span>
-          <span class="legend-item">
-            <span class="legend-color legend-color-failed"></span>
-            Failed
-          </span>
-        </div>
-      HTML
-    end
-
-    def render_tooltip
-      <<-HTML
-        <div id="chart-tooltip" class="chart-tooltip">
-          <div class="tooltip-label"></div>
-          <div class="tooltip-value"></div>
-        </div>
-      HTML
-    end
-  end
-end
diff --git a/app/views/layouts/solid_queue_monitor/application.html.erb b/app/views/layouts/solid_queue_monitor/application.html.erb
new file mode 100644
index 0000000..cd827b7
--- /dev/null
+++ b/app/views/layouts/solid_queue_monitor/application.html.erb
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Solid Queue Monitor - <%= content_for?(:title) ? yield(:title) : 'Dashboard' %></title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <%= stylesheet_link_tag asset_url_for('application.css'), nonce: content_security_policy_nonce %>
+  </head>
+  <body class="solid_queue_monitor"
+        data-auto-refresh-enabled="<%= SolidQueueMonitor.auto_refresh_enabled %>"
+        data-auto-refresh-interval="<%= SolidQueueMonitor.auto_refresh_interval %>">
+    <%= render 'solid_queue_monitor/shared/flash' %>
+    <div class="container">
+      <%= render 'solid_queue_monitor/shared/header' %>
+      <div class="section">
+        <% if content_for?(:title) %>
+          <h2><%= yield :title %></h2>
+        <% end %>
+        <%= yield %>
+      </div>
+      <%= render 'solid_queue_monitor/shared/footer' %>
+    </div>
+    <%= javascript_include_tag asset_url_for('application.js'), nonce: content_security_policy_nonce %>
+  </body>
+</html>
diff --git a/app/views/solid_queue_monitor/failed_jobs/_row.html.erb b/app/views/solid_queue_monitor/failed_jobs/_row.html.erb
new file mode 100644
index 0000000..a5d0a57
--- /dev/null
+++ b/app/views/solid_queue_monitor/failed_jobs/_row.html.erb
@@ -0,0 +1,26 @@
+<tr>
+  <td><input type="checkbox" class="job-checkbox" value="<%= job.id %>"></td>
+  <td>
+    <div class="job-class"><%= link_to job.job.class_name, job_path(job.job), class: 'job-class-link' %></div>
+    <div class="job-meta">
+      <span class="job-timestamp">Queued at: <%= format_datetime(job.job.created_at) %></span>
+    </div>
+  </td>
+  <td><div class="job-queue"><%= queue_link(job.job.queue_name) %></div></td>
+  <td><div class="error-message"><%= truncate(failed_error_message(job.error), length: 100) %></div></td>
+  <td><%= format_arguments(job.job.arguments) %></td>
+  <td><%= format_datetime(job.created_at) %></td>
+  <td class="actions-cell">
+    <div class="job-actions">
+      <form method="post" action="<%= retry_failed_job_path(id: job.id) %>" class="inline-form">
+        <button type="submit" class="action-button retry-button">Retry</button>
+      </form>
+      <form method="post"
+            action="<%= discard_failed_job_path(id: job.id) %>"
+            class="inline-form"
+            data-confirm="Are you sure you want to discard this job?">
+        <button type="submit" class="action-button discard-button">Discard</button>
+      </form>
+    </div>
+  </td>
+</tr>
diff --git a/app/views/solid_queue_monitor/failed_jobs/index.html.erb b/app/views/solid_queue_monitor/failed_jobs/index.html.erb
new file mode 100644
index 0000000..976befe
--- /dev/null
+++ b/app/views/solid_queue_monitor/failed_jobs/index.html.erb
@@ -0,0 +1,38 @@
+<% content_for :title, 'Failed Jobs' %>
+
+<%= render 'solid_queue_monitor/shared/filters',
+           action_path: @action_path,
+           filters: @filters,
+           show_status: false %>
+
+<div class="bulk-actions-bar">
+  <button type="button" class="action-button retry-button" id="retry-selected-top" data-action-url="<%= retry_failed_jobs_path %>" disabled>
+    Retry Selected
+  </button>
+  <button type="button" class="action-button discard-button" id="discard-selected-top" data-action-url="<%= discard_failed_jobs_path %>" disabled>
+    Discard Selected
+  </button>
+</div>
+
+<form method="post" id="failed-jobs-form">
+  <% columns = [
+    { sort_key: nil, label: tag.input(type: 'checkbox', id: 'select-all', class: 'select-all-checkbox') },
+    { sort_key: :class_name, label: 'Job' },
+    { sort_key: :queue_name, label: 'Queue' },
+    { sort_key: nil, label: 'Error' },
+    { sort_key: nil, label: 'Arguments' },
+    { sort_key: :created_at, label: 'Failed At' },
+    { sort_key: nil, label: 'Actions' }
+  ] %>
+
+  <%= render 'solid_queue_monitor/shared/jobs_table',
+             jobs: @failed_jobs[:records],
+             columns: columns,
+             sort: @sort,
+             filters: @filters,
+             row_partial: 'solid_queue_monitor/failed_jobs/row' %>
+</form>
+
+<%= render 'solid_queue_monitor/shared/pagination',
+           current_page: @failed_jobs[:current_page],
+           total_pages: @failed_jobs[:total_pages] %>
diff --git a/app/views/solid_queue_monitor/in_progress_jobs/_row.html.erb b/app/views/solid_queue_monitor/in_progress_jobs/_row.html.erb
new file mode 100644
index 0000000..c0173f8
--- /dev/null
+++ b/app/views/solid_queue_monitor/in_progress_jobs/_row.html.erb
@@ -0,0 +1,13 @@
+<% solid_queue_job = job.job %>
+<tr>
+  <td>
+    <div class="job-class"><%= link_to solid_queue_job.class_name, job_path(solid_queue_job), class: 'job-class-link' %></div>
+    <div class="job-meta">
+      <span class="job-timestamp">Queued at: <%= format_datetime(solid_queue_job.created_at) %></span>
+    </div>
+  </td>
+  <td><%= queue_link(solid_queue_job.queue_name) %></td>
+  <td><%= format_arguments(solid_queue_job.arguments) %></td>
+  <td><%= format_datetime(job.created_at) %></td>
+  <td><%= job.process_id %></td>
+</tr>
diff --git a/app/views/solid_queue_monitor/in_progress_jobs/index.html.erb b/app/views/solid_queue_monitor/in_progress_jobs/index.html.erb
new file mode 100644
index 0000000..9362056
--- /dev/null
+++ b/app/views/solid_queue_monitor/in_progress_jobs/index.html.erb
@@ -0,0 +1,25 @@
+<% content_for :title, 'In Progress Jobs' %>
+
+<%= render 'solid_queue_monitor/shared/filters',
+           action_path: @action_path,
+           filters: @filters,
+           show_status: false %>
+
+<% columns = [
+  { sort_key: :class_name, label: 'Job' },
+  { sort_key: :queue_name, label: 'Queue' },
+  { sort_key: nil, label: 'Arguments' },
+  { sort_key: :created_at, label: 'Started At' },
+  { sort_key: nil, label: 'Process ID' }
+] %>
+
+<%= render 'solid_queue_monitor/shared/jobs_table',
+           jobs: @in_progress_jobs[:records],
+           columns: columns,
+           sort: @sort,
+           filters: @filters,
+           row_partial: 'solid_queue_monitor/in_progress_jobs/row' %>
+
+<%= render 'solid_queue_monitor/shared/pagination',
+           current_page: @in_progress_jobs[:current_page],
+           total_pages: @in_progress_jobs[:total_pages] %>
diff --git a/app/views/solid_queue_monitor/jobs/_arguments.html.erb b/app/views/solid_queue_monitor/jobs/_arguments.html.erb
new file mode 100644
index 0000000..999b264
--- /dev/null
+++ b/app/views/solid_queue_monitor/jobs/_arguments.html.erb
@@ -0,0 +1,9 @@
+<div class="job-section">
+  <div class="section-header">
+    <h3 class="section-title">Arguments</h3>
+    <div class="section-actions">
+      <button class="copy-button" data-action="copy" data-target="arguments-content">Copy</button>
+    </div>
+  </div>
+  <pre class="arguments-content" id="arguments-content"><%= pretty_arguments(@job.arguments) %></pre>
+</div>
diff --git a/app/views/solid_queue_monitor/jobs/_error.html.erb b/app/views/solid_queue_monitor/jobs/_error.html.erb
new file mode 100644
index 0000000..01b29b9
--- /dev/null
+++ b/app/views/solid_queue_monitor/jobs/_error.html.erb
@@ -0,0 +1,26 @@
+<% error = parsed_failed_error(@failed_execution.error) %>
+<div class="job-section error-section">
+  <div class="section-header">
+    <h3 class="section-title">Error</h3>
+    <button class="copy-button" data-action="copy" data-target="error-content">Copy</button>
+  </div>
+  <div id="error-content">
+    <div class="error-type"><%= error[:type] %></div>
+    <div class="error-message-box"><%= error[:message] %></div>
+  </div>
+  <% if error[:backtrace].present? %>
+    <% lines = error[:backtrace] %>
+    <% app_lines = lines.select { |line| line.include?('/app/') || line.include?('/lib/') } %>
+    <div class="backtrace-section">
+      <div class="backtrace-header">
+        <span class="backtrace-title">Backtrace</span>
+        <div class="backtrace-toggle">
+          <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"><%= safe_join((app_lines.presence || lines.first(5)).map.with_index { |line, index| tag.span("#{index + 1}. #{line.to_s.strip}", class: 'backtrace-line') }, "\n") %></pre>
+      <pre class="backtrace-content is-hidden" id="full-backtrace"><%= safe_join(lines.map.with_index { |line, index| tag.span("#{index + 1}. #{line.to_s.strip}", class: 'backtrace-line') }, "\n") %></pre>
+    </div>
+  <% end %>
+</div>
diff --git a/app/views/solid_queue_monitor/jobs/_execution_history.html.erb b/app/views/solid_queue_monitor/jobs/_execution_history.html.erb
new file mode 100644
index 0000000..d65c7b1
--- /dev/null
+++ b/app/views/solid_queue_monitor/jobs/_execution_history.html.erb
@@ -0,0 +1,25 @@
+<% if @recent_executions.any? %>
+  <div class="job-section">
+    <div class="section-header">
+      <h3 class="section-title">Recent Executions</h3>
+      <span class="section-subtitle">Other <%= @job.class_name %> jobs</span>
+    </div>
+    <div class="table-container">
+      <table class="recent-executions-table">
+        <thead>
+          <tr><th>Status</th><th>Arguments</th><th>Created</th><th>Duration</th></tr>
+        </thead>
+        <tbody>
+          <% @recent_executions.each do |recent_job| %>
+            <tr>
+              <td><%= mini_job_status_badge(recent_job) %></td>
+              <td class="args-preview"><%= link_to truncate(recent_job.arguments.inspect, length: 60), job_path(recent_job) %></td>
+              <td><%= time_ago_in_words(recent_job.created_at) %> ago</td>
+              <td><%= recent_job_duration(recent_job) %></td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+<% end %>
diff --git a/app/views/solid_queue_monitor/jobs/_header.html.erb b/app/views/solid_queue_monitor/jobs/_header.html.erb
new file mode 100644
index 0000000..bef2b61
--- /dev/null
+++ b/app/views/solid_queue_monitor/jobs/_header.html.erb
@@ -0,0 +1,36 @@
+<div class="job-header">
+  <div class="job-header-main">
+    <h1 class="job-title"><%= @job.class_name %></h1>
+    <span class="job-status-badge <%= detail_status_class %>"><%= detail_status_label %></span>
+  </div>
+  <div class="job-header-meta">
+    <span class="job-queue"><%= queue_link(@job.queue_name) %></span>
+    <span class="job-separator">.</span>
+    <span class="job-priority">Priority <%= @job.priority %></span>
+    <span class="job-separator">.</span>
+    <span class="job-id">Job #<%= @job.id %></span>
+  </div>
+  <% if @failed_execution || @scheduled_execution %>
+    <div class="job-actions">
+      <% if @failed_execution %>
+        <form action="<%= retry_failed_job_path(id: @failed_execution.id) %>" method="post" class="inline-form">
+          <input type="hidden" name="redirect_to" value="<%= job_path(@job) %>">
+          <button type="submit" class="action-button retry-button">Retry</button>
+        </form>
+        <form action="<%= discard_failed_job_path(id: @failed_execution.id) %>"
+              method="post"
+              class="inline-form"
+              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>
+      <% end %>
+      <% if @scheduled_execution %>
+        <form action="<%= execute_scheduled_job_path(id: @scheduled_execution.id) %>" method="post" class="inline-form">
+          <input type="hidden" name="redirect_to" value="<%= scheduled_jobs_path %>">
+          <button type="submit" class="action-button retry-button">Execute Now</button>
+        </form>
+      <% end %>
+    </div>
+  <% end %>
+</div>
diff --git a/app/views/solid_queue_monitor/jobs/_metadata.html.erb b/app/views/solid_queue_monitor/jobs/_metadata.html.erb
new file mode 100644
index 0000000..8797e30
--- /dev/null
+++ b/app/views/solid_queue_monitor/jobs/_metadata.html.erb
@@ -0,0 +1,22 @@
+<div class="job-section">
+  <h3 class="section-title">Job Details</h3>
+  <div class="details-grid">
+    <div class="detail-row"><span class="detail-label">Class</span><span class="detail-value"><%= @job.class_name %></span></div>
+    <div class="detail-row"><span class="detail-label">Queue</span><span class="detail-value"><%= queue_link(@job.queue_name, css_class: 'queue-badge') %></span></div>
+    <div class="detail-row"><span class="detail-label">Priority</span><span class="detail-value"><%= @job.priority %></span></div>
+    <div class="detail-row"><span class="detail-label">Active Job ID</span><span class="detail-value detail-mono"><%= @job.active_job_id || '-' %></span></div>
+    <% if @job.concurrency_key.present? %>
+      <div class="detail-row"><span class="detail-label">Concurrency Key</span><span class="detail-value detail-mono"><%= @job.concurrency_key %></span></div>
+    <% end %>
+    <div class="detail-row"><span class="detail-label">Created At</span><span class="detail-value"><%= format_datetime(@job.created_at) %></span></div>
+    <% if @scheduled_execution || @job.scheduled_at %>
+      <div class="detail-row"><span class="detail-label">Scheduled At</span><span class="detail-value"><%= format_datetime(@job.scheduled_at || @scheduled_execution&.scheduled_at) %></span></div>
+    <% end %>
+    <% if @job.finished_at %>
+      <div class="detail-row"><span class="detail-label">Finished At</span><span class="detail-value"><%= format_datetime(@job.finished_at) %></span></div>
+    <% end %>
+    <% if @failed_execution %>
+      <div class="detail-row"><span class="detail-label">Failed At</span><span class="detail-value"><%= format_datetime(@failed_execution.created_at) %></span></div>
+    <% end %>
+  </div>
+</div>
diff --git a/app/views/solid_queue_monitor/jobs/_raw_data.html.erb b/app/views/solid_queue_monitor/jobs/_raw_data.html.erb
new file mode 100644
index 0000000..fa0cac5
--- /dev/null
+++ b/app/views/solid_queue_monitor/jobs/_raw_data.html.erb
@@ -0,0 +1,11 @@
+<div class="job-section collapsible-section">
+  <div class="section-header collapsible-header" data-action="toggle-section">
+    <div class="collapsible-title">
+      <h3 class="section-title">Raw Data</h3>
+    </div>
+    <button class="copy-button" data-action="copy" data-target="raw-data-content" data-stop-propagation="true">Copy</button>
+  </div>
+  <div class="collapsible-content">
+    <pre class="raw-data-content" id="raw-data-content"><%= JSON.pretty_generate(@job.attributes) %></pre>
+  </div>
+</div>
diff --git a/app/views/solid_queue_monitor/jobs/_timeline.html.erb b/app/views/solid_queue_monitor/jobs/_timeline.html.erb
new file mode 100644
index 0000000..c45f314
--- /dev/null
+++ b/app/views/solid_queue_monitor/jobs/_timeline.html.erb
@@ -0,0 +1,28 @@
+<% events = [] %>
+<% events << { label: 'Created', time: @job.created_at, status: :done } if @job.created_at %>
+<% scheduled_at = @job.scheduled_at || @scheduled_execution&.scheduled_at %>
+<% events << { label: 'Scheduled', time: scheduled_at, status: :done } if scheduled_at && scheduled_at != @job.created_at %>
+<% events << { label: 'Started', time: @claimed_execution.created_at, status: :done } if @claimed_execution %>
+<% events << { label: 'Completed', time: @job.finished_at, status: :success } if detail_job_status == :completed %>
+<% events << { label: 'Failed', time: @failed_execution.created_at, status: :failed } if detail_job_status == :failed %>
+<% events << { label: 'Running...', time: nil, status: :active } if detail_job_status == :in_progress %>
+
+<% if events.size >= 2 %>
+  <div class="job-section">
+    <h3 class="section-title">Timeline</h3>
+    <div class="job-timeline">
+      <div class="timeline-track">
+        <% events.each_with_index do |event, index| %>
+          <div class="timeline-event timeline-<%= event[:status] %>">
+            <div class="timeline-dot"></div>
+            <%= tag.div(class: 'timeline-line') unless index == events.size - 1 %>
+            <div class="timeline-content">
+              <div class="timeline-label"><%= event[:label] %></div>
+              <div class="timeline-time"><%= format_datetime(event[:time]) unless event[:time].nil? %></div>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+<% end %>
diff --git a/app/views/solid_queue_monitor/jobs/_timing.html.erb b/app/views/solid_queue_monitor/jobs/_timing.html.erb
new file mode 100644
index 0000000..f295eab
--- /dev/null
+++ b/app/views/solid_queue_monitor/jobs/_timing.html.erb
@@ -0,0 +1,9 @@
+<% timing = detail_timing %>
+<div class="timing-cards">
+  <% { 'Queue Wait' => timing[:queue_wait], 'Execution' => timing[:execution], 'Total Time' => timing[:total] }.each do |label, duration| %>
+    <div class="timing-card">
+      <div class="timing-value"><%= detail_duration(duration) %></div>
+      <div class="timing-label"><%= label %></div>
+    </div>
+  <% end %>
+</div>
diff --git a/app/views/solid_queue_monitor/jobs/_worker.html.erb b/app/views/solid_queue_monitor/jobs/_worker.html.erb
new file mode 100644
index 0000000..e198960
--- /dev/null
+++ b/app/views/solid_queue_monitor/jobs/_worker.html.erb
@@ -0,0 +1,12 @@
+<% process = @claimed_execution.instance_variable_get(:@process) %>
+<% if process %>
+  <div class="job-section">
+    <h3 class="section-title">Worker</h3>
+    <div class="details-grid">
+      <div class="detail-row"><span class="detail-label">Hostname</span><span class="detail-value"><%= process.hostname %></span></div>
+      <div class="detail-row"><span class="detail-label">PID</span><span class="detail-value"><%= process.pid %></span></div>
+      <div class="detail-row"><span class="detail-label">Process Type</span><span class="detail-value"><%= process.kind %></span></div>
+      <div class="detail-row"><span class="detail-label">Started At</span><span class="detail-value"><%= format_datetime(@claimed_execution.created_at) %></span></div>
+    </div>
+  </div>
+<% end %>
diff --git a/app/views/solid_queue_monitor/jobs/show.html.erb b/app/views/solid_queue_monitor/jobs/show.html.erb
new file mode 100644
index 0000000..69f0304
--- /dev/null
+++ b/app/views/solid_queue_monitor/jobs/show.html.erb
@@ -0,0 +1,22 @@
+<% content_for :title, "Job ##{@job.id}" %>
+
+<div class="job-details-page">
+  <div class="job-back-link">
+    <%= link_to @back_path, class: 'back-link' do %>
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M19 12H5M12 19l-7-7 7-7"/>
+      </svg>
+      Back
+    <% end %>
+  </div>
+
+  <%= render 'header' %>
+  <%= render 'timeline' %>
+  <%= render 'timing' %>
+  <%= render 'error' if @failed_execution %>
+  <%= render 'arguments' %>
+  <%= render 'metadata' %>
+  <%= render 'worker' if @claimed_execution %>
+  <%= render 'execution_history' %>
+  <%= render 'raw_data' %>
+</div>
diff --git a/app/views/solid_queue_monitor/overview/_chart.html.erb b/app/views/solid_queue_monitor/overview/_chart.html.erb
new file mode 100644
index 0000000..7e309ae
--- /dev/null
+++ b/app/views/solid_queue_monitor/overview/_chart.html.erb
@@ -0,0 +1 @@
+<%= render_chart(data: @chart_data, time_range: @time_range) %>
diff --git a/app/views/solid_queue_monitor/overview/_recent_job_row.html.erb b/app/views/solid_queue_monitor/overview/_recent_job_row.html.erb
new file mode 100644
index 0000000..4db408d
--- /dev/null
+++ b/app/views/solid_queue_monitor/overview/_recent_job_row.html.erb
@@ -0,0 +1,26 @@
+<% failed_execution = SolidQueue::FailedExecution.find_by(job_id: job.id) if job_status(job) == 'failed' %>
+<tr>
+  <td><%= link_to job.id, job_path(job), class: 'job-class-link' %></td>
+  <td><%= link_to job.class_name, job_path(job), class: 'job-class-link' %></td>
+  <td><%= queue_link(job.queue_name) %></td>
+  <td><%= format_arguments(job.arguments) %></td>
+  <td><%= job_status_badge(job) %></td>
+  <td><%= format_datetime(job.created_at) %></td>
+  <td class="actions-cell">
+    <% if failed_execution %>
+      <div class="job-actions">
+        <form method="post" action="<%= retry_failed_job_path(id: failed_execution.id) %>" class="inline-form">
+          <input type="hidden" name="redirect_to" value="<%= root_path %>">
+          <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"
+              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>
+      </div>
+    <% end %>
+  </td>
+</tr>
diff --git a/app/views/solid_queue_monitor/overview/_recent_jobs.html.erb b/app/views/solid_queue_monitor/overview/_recent_jobs.html.erb
new file mode 100644
index 0000000..602899b
--- /dev/null
+++ b/app/views/solid_queue_monitor/overview/_recent_jobs.html.erb
@@ -0,0 +1,31 @@
+<div class="section-wrapper">
+  <div class="section">
+    <h3>Recent Jobs</h3>
+
+    <%= render 'solid_queue_monitor/shared/filters',
+               action_path: root_path,
+               filters: @filters,
+               show_status: true %>
+
+    <% columns = [
+      { sort_key: nil, label: 'ID' },
+      { sort_key: :class_name, label: 'Job' },
+      { sort_key: :queue_name, label: 'Queue' },
+      { sort_key: nil, label: 'Arguments' },
+      { sort_key: nil, label: 'Status' },
+      { sort_key: :created_at, label: 'Created At' },
+      { sort_key: nil, label: 'Actions' }
+    ] %>
+
+    <%= render 'solid_queue_monitor/shared/jobs_table',
+               jobs: @recent_jobs[:records],
+               columns: columns,
+               sort: @sort,
+               filters: @filters,
+               row_partial: 'solid_queue_monitor/overview/recent_job_row' %>
+
+    <%= render 'solid_queue_monitor/shared/pagination',
+               current_page: @recent_jobs[:current_page],
+               total_pages: @recent_jobs[:total_pages] %>
+  </div>
+</div>
diff --git a/app/views/solid_queue_monitor/overview/_stat_card.html.erb b/app/views/solid_queue_monitor/overview/_stat_card.html.erb
new file mode 100644
index 0000000..d3a8f89
--- /dev/null
+++ b/app/views/solid_queue_monitor/overview/_stat_card.html.erb
@@ -0,0 +1,4 @@
+<div class="stat-card">
+  <h3><%= title %></h3>
+  <p><%= value %></p>
+</div>
diff --git a/app/views/solid_queue_monitor/overview/_stats.html.erb b/app/views/solid_queue_monitor/overview/_stats.html.erb
new file mode 100644
index 0000000..9fedc33
--- /dev/null
+++ b/app/views/solid_queue_monitor/overview/_stats.html.erb
@@ -0,0 +1,11 @@
+<div class="stats-container">
+  <h3>Queue Statistics</h3>
+  <div class="stats">
+    <%= render 'stat_card', title: 'Active Jobs', value: @stats[:active_jobs] %>
+    <%= render 'stat_card', title: 'Ready', value: @stats[:ready] %>
+    <%= render 'stat_card', title: 'In Progress', value: @stats[:in_progress] %>
+    <%= render 'stat_card', title: 'Scheduled', value: @stats[:scheduled] %>
+    <%= render 'stat_card', title: 'Recurring', value: @stats[:recurring] %>
+    <%= render 'stat_card', title: 'Failed', value: @stats[:failed] %>
+  </div>
+</div>
diff --git a/app/views/solid_queue_monitor/overview/index.html.erb b/app/views/solid_queue_monitor/overview/index.html.erb
new file mode 100644
index 0000000..5599447
--- /dev/null
+++ b/app/views/solid_queue_monitor/overview/index.html.erb
@@ -0,0 +1,9 @@
+<% content_for :title, 'Overview' %>
+
+<%= render 'stats' %>
+
+<% if SolidQueueMonitor.show_chart && @chart_data.present? %>
+  <%= render 'chart' %>
+<% end %>
+
+<%= render 'recent_jobs' %>
diff --git a/app/views/solid_queue_monitor/queues/_job_row.html.erb b/app/views/solid_queue_monitor/queues/_job_row.html.erb
new file mode 100644
index 0000000..27bc4f1
--- /dev/null
+++ b/app/views/solid_queue_monitor/queues/_job_row.html.erb
@@ -0,0 +1,26 @@
+<% status = job_status(job) %>
+<% failed_execution = SolidQueue::FailedExecution.find_by(job_id: job.id) if status == 'failed' %>
+<tr>
+  <td><%= link_to job.id, job_path(job), class: 'job-class-link' %></td>
+  <td><%= link_to job.class_name, job_path(job), class: 'job-class-link' %></td>
+  <td><%= format_arguments(job.arguments) %></td>
+  <td><%= job_status_badge(job) %></td>
+  <td><%= format_datetime(job.created_at) %></td>
+  <td class="actions-cell">
+    <% if failed_execution %>
+      <div class="job-actions">
+        <form method="post" action="<%= retry_failed_job_path(id: failed_execution.id) %>" class="inline-form">
+          <input type="hidden" name="redirect_to" value="<%= queue_details_path(queue_name: @queue_name) %>">
+          <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"
+              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>
+      </div>
+    <% end %>
+  </td>
+</tr>
diff --git a/app/views/solid_queue_monitor/queues/_row.html.erb b/app/views/solid_queue_monitor/queues/_row.html.erb
new file mode 100644
index 0000000..d5a5213
--- /dev/null
+++ b/app/views/solid_queue_monitor/queues/_row.html.erb
@@ -0,0 +1,33 @@
+<% queue_name = job.queue_name || 'default' %>
+<% paused = @paused_queues.include?(queue_name) %>
+
+<tr class="<%= 'queue-paused' if paused %>">
+  <td><%= queue_link(queue_name) %></td>
+  <td>
+    <% if paused %>
+      <span class="status-badge status-paused">Paused</span>
+    <% else %>
+      <span class="status-badge status-active">Active</span>
+    <% end %>
+  </td>
+  <td><%= job.job_count %></td>
+  <td><%= @queue_stats.dig(:ready, queue_name) || 0 %></td>
+  <td><%= @queue_stats.dig(:scheduled, queue_name) || 0 %></td>
+  <td><%= @queue_stats.dig(:failed, queue_name) || 0 %></td>
+  <td class="actions-cell">
+    <% if paused %>
+      <form action="<%= resume_queue_path %>" method="post" class="inline-form">
+        <input type="hidden" name="queue_name" value="<%= queue_name %>">
+        <button type="submit" class="action-button resume-button" title="Resume queue processing">Resume</button>
+      </form>
+    <% else %>
+      <form action="<%= pause_queue_path %>"
+            method="post"
+            class="inline-form"
+            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</button>
+      </form>
+    <% end %>
+  </td>
+</tr>
diff --git a/app/views/solid_queue_monitor/queues/index.html.erb b/app/views/solid_queue_monitor/queues/index.html.erb
new file mode 100644
index 0000000..87e8f64
--- /dev/null
+++ b/app/views/solid_queue_monitor/queues/index.html.erb
@@ -0,0 +1,18 @@
+<% content_for :title, 'Queues' %>
+
+<% columns = [
+  { sort_key: :queue_name, label: 'Queue Name' },
+  { sort_key: nil, label: 'Status' },
+  { sort_key: :job_count, label: 'Total Jobs' },
+  { sort_key: nil, label: 'Ready Jobs' },
+  { sort_key: nil, label: 'Scheduled Jobs' },
+  { sort_key: nil, label: 'Failed Jobs' },
+  { sort_key: nil, label: 'Actions' }
+] %>
+
+<%= render 'solid_queue_monitor/shared/jobs_table',
+           jobs: @queues,
+           columns: columns,
+           sort: @sort,
+           filters: {},
+           row_partial: 'solid_queue_monitor/queues/row' %>
diff --git a/app/views/solid_queue_monitor/queues/show.html.erb b/app/views/solid_queue_monitor/queues/show.html.erb
new file mode 100644
index 0000000..5fab2b6
--- /dev/null
+++ b/app/views/solid_queue_monitor/queues/show.html.erb
@@ -0,0 +1,63 @@
+<% content_for :title, "Queue: #{@queue_name}" %>
+
+<div class="section-header-row">
+  <div class="section-header-left">
+    <% if @paused %>
+      <span class="status-badge status-paused">Paused</span>
+    <% else %>
+      <span class="status-badge status-active">Active</span>
+    <% end %>
+  </div>
+  <div class="section-header-right">
+    <% if @paused %>
+      <form action="<%= resume_queue_path %>" method="post" class="inline-form">
+        <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 resume-button">Resume Queue</button>
+      </form>
+    <% else %>
+      <form action="<%= pause_queue_path %>" method="post" class="inline-form" 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>
+      </form>
+    <% end %>
+  </div>
+</div>
+
+<div class="stats-container">
+  <div class="stats">
+    <% @counts.each do |label, value| %>
+      <%= render 'solid_queue_monitor/overview/stat_card', title: label.to_s.titleize, value: value %>
+    <% end %>
+  </div>
+</div>
+
+<%= render 'solid_queue_monitor/shared/filters',
+           action_path: @action_path,
+           filters: @filters.merge(queue_name: nil),
+           show_status: true %>
+
+<% if @jobs[:records].empty? %>
+  <p class="empty-message">No jobs in this queue</p>
+<% else %>
+  <% columns = [
+    { sort_key: nil, label: 'ID' },
+    { sort_key: :class_name, label: 'Job' },
+    { sort_key: nil, label: 'Arguments' },
+    { sort_key: nil, label: 'Status' },
+    { sort_key: :created_at, label: 'Created At' },
+    { sort_key: nil, label: 'Actions' }
+  ] %>
+
+  <%= render 'solid_queue_monitor/shared/jobs_table',
+             jobs: @jobs[:records],
+             columns: columns,
+             sort: @sort,
+             filters: @filters,
+             row_partial: 'solid_queue_monitor/queues/job_row' %>
+<% end %>
+
+<%= render 'solid_queue_monitor/shared/pagination',
+           current_page: @jobs[:current_page],
+           total_pages: @jobs[:total_pages] %>
diff --git a/app/views/solid_queue_monitor/ready_jobs/_row.html.erb b/app/views/solid_queue_monitor/ready_jobs/_row.html.erb
new file mode 100644
index 0000000..d5233bf
--- /dev/null
+++ b/app/views/solid_queue_monitor/ready_jobs/_row.html.erb
@@ -0,0 +1,7 @@
+<tr>
+  <td><%= link_to job.job.class_name, job_path(job.job), class: 'job-class-link' %></td>
+  <td><%= queue_link(job.queue_name) %></td>
+  <td><%= job.priority %></td>
+  <td><%= format_arguments(job.job.arguments) %></td>
+  <td><%= format_datetime(job.created_at) %></td>
+</tr>
diff --git a/app/views/solid_queue_monitor/ready_jobs/index.html.erb b/app/views/solid_queue_monitor/ready_jobs/index.html.erb
new file mode 100644
index 0000000..76dc264
--- /dev/null
+++ b/app/views/solid_queue_monitor/ready_jobs/index.html.erb
@@ -0,0 +1,25 @@
+<% content_for :title, 'Ready Jobs' %>
+
+<%= render 'solid_queue_monitor/shared/filters',
+           action_path: @action_path,
+           filters: @filters,
+           show_status: false %>
+
+<% columns = [
+  { sort_key: :class_name, label: 'Job' },
+  { sort_key: :queue_name, label: 'Queue' },
+  { sort_key: :priority, label: 'Priority' },
+  { sort_key: nil, label: 'Arguments' },
+  { sort_key: :created_at, label: 'Created At' }
+] %>
+
+<%= render 'solid_queue_monitor/shared/jobs_table',
+           jobs: @ready_jobs[:records],
+           columns: columns,
+           sort: @sort,
+           filters: @filters,
+           row_partial: 'solid_queue_monitor/ready_jobs/row' %>
+
+<%= render 'solid_queue_monitor/shared/pagination',
+           current_page: @ready_jobs[:current_page],
+           total_pages: @ready_jobs[:total_pages] %>
diff --git a/app/views/solid_queue_monitor/recurring_jobs/_row.html.erb b/app/views/solid_queue_monitor/recurring_jobs/_row.html.erb
new file mode 100644
index 0000000..b1856dc
--- /dev/null
+++ b/app/views/solid_queue_monitor/recurring_jobs/_row.html.erb
@@ -0,0 +1,8 @@
+<tr>
+  <td><%= job.key %></td>
+  <td><%= job.class_name %></td>
+  <td><%= job.schedule %></td>
+  <td><%= queue_link(job.queue_name) %></td>
+  <td><%= job.priority || 'Default' %></td>
+  <td><%= format_datetime(job.updated_at) %></td>
+</tr>
diff --git a/app/views/solid_queue_monitor/recurring_jobs/index.html.erb b/app/views/solid_queue_monitor/recurring_jobs/index.html.erb
new file mode 100644
index 0000000..21ffcdb
--- /dev/null
+++ b/app/views/solid_queue_monitor/recurring_jobs/index.html.erb
@@ -0,0 +1,26 @@
+<% content_for :title, 'Recurring Jobs' %>
+
+<%= render 'solid_queue_monitor/shared/filters',
+           action_path: @action_path,
+           filters: @filters,
+           show_status: false %>
+
+<% columns = [
+  { sort_key: :key, label: 'Key' },
+  { sort_key: :class_name, label: 'Job' },
+  { sort_key: nil, label: 'Schedule' },
+  { sort_key: :queue_name, label: 'Queue' },
+  { sort_key: :priority, label: 'Priority' },
+  { sort_key: nil, label: 'Last Updated' }
+] %>
+
+<%= render 'solid_queue_monitor/shared/jobs_table',
+           jobs: @recurring_jobs[:records],
+           columns: columns,
+           sort: @sort,
+           filters: @filters,
+           row_partial: 'solid_queue_monitor/recurring_jobs/row' %>
+
+<%= render 'solid_queue_monitor/shared/pagination',
+           current_page: @recurring_jobs[:current_page],
+           total_pages: @recurring_jobs[:total_pages] %>
diff --git a/app/views/solid_queue_monitor/scheduled_jobs/_row.html.erb b/app/views/solid_queue_monitor/scheduled_jobs/_row.html.erb
new file mode 100644
index 0000000..8bab47e
--- /dev/null
+++ b/app/views/solid_queue_monitor/scheduled_jobs/_row.html.erb
@@ -0,0 +1,7 @@
+<tr>
+  <td><input type="checkbox" name="job_ids[]" value="<%= job.id %>"></td>
+  <td><%= link_to job.job.class_name, job_path(job.job), class: 'job-class-link' %></td>
+  <td><%= queue_link(job.queue_name) %></td>
+  <td><%= format_datetime(job.scheduled_at) %></td>
+  <td><%= format_arguments(job.job.arguments) %></td>
+</tr>
diff --git a/app/views/solid_queue_monitor/scheduled_jobs/index.html.erb b/app/views/solid_queue_monitor/scheduled_jobs/index.html.erb
new file mode 100644
index 0000000..5ddd374
--- /dev/null
+++ b/app/views/solid_queue_monitor/scheduled_jobs/index.html.erb
@@ -0,0 +1,36 @@
+<% content_for :title, 'Scheduled Jobs' %>
+
+<%= render 'solid_queue_monitor/shared/filters',
+           action_path: @action_path,
+           filters: @filters,
+           show_status: false %>
+
+<div class="bulk-actions-bar">
+  <button type="button" class="action-button execute-button" id="execute-selected-top" data-action-url="<%= execute_jobs_path %>" disabled>
+    Execute Selected
+  </button>
+  <button type="button" class="action-button discard-button" id="reject-selected-top" data-action-url="<%= reject_jobs_path %>" disabled>
+    Reject Selected
+  </button>
+</div>
+
+<form id="scheduled-jobs-form" method="post">
+  <% columns = [
+    { sort_key: nil, label: tag.input(type: 'checkbox', id: 'scheduled-jobs-select-all') },
+    { sort_key: :class_name, label: 'Job' },
+    { sort_key: :queue_name, label: 'Queue' },
+    { sort_key: :scheduled_at, label: 'Scheduled At' },
+    { sort_key: nil, label: 'Arguments' }
+  ] %>
+
+  <%= render 'solid_queue_monitor/shared/jobs_table',
+             jobs: @scheduled_jobs[:records],
+             columns: columns,
+             sort: @sort,
+             filters: @filters,
+             row_partial: 'solid_queue_monitor/scheduled_jobs/row' %>
+</form>
+
+<%= render 'solid_queue_monitor/shared/pagination',
+           current_page: @scheduled_jobs[:current_page],
+           total_pages: @scheduled_jobs[:total_pages] %>
diff --git a/app/views/solid_queue_monitor/search/_completed_row.html.erb b/app/views/solid_queue_monitor/search/_completed_row.html.erb
new file mode 100644
index 0000000..24c4f7b
--- /dev/null
+++ b/app/views/solid_queue_monitor/search/_completed_row.html.erb
@@ -0,0 +1,6 @@
+<tr>
+  <td><%= link_to item.class_name, job_path(item), class: 'job-class-link' %></td>
+  <td><%= queue_link(item.queue_name) %></td>
+  <td><%= format_arguments(item.arguments) %></td>
+  <td><span class="job-timestamp"><%= format_datetime(item.finished_at) %></span></td>
+</tr>
diff --git a/app/views/solid_queue_monitor/search/_failed_row.html.erb b/app/views/solid_queue_monitor/search/_failed_row.html.erb
new file mode 100644
index 0000000..71ccf89
--- /dev/null
+++ b/app/views/solid_queue_monitor/search/_failed_row.html.erb
@@ -0,0 +1,6 @@
+<tr>
+  <td><%= link_to item.job.class_name, job_path(item.job), class: 'job-class-link' %></td>
+  <td><%= queue_link(item.job.queue_name) %></td>
+  <td><div class="error-message"><%= truncate(item.error.to_s, length: 100) %></div></td>
+  <td><span class="job-timestamp"><%= format_datetime(item.created_at) %></span></td>
+</tr>
diff --git a/app/views/solid_queue_monitor/search/_job_row.html.erb b/app/views/solid_queue_monitor/search/_job_row.html.erb
new file mode 100644
index 0000000..ec24a00
--- /dev/null
+++ b/app/views/solid_queue_monitor/search/_job_row.html.erb
@@ -0,0 +1,9 @@
+<% solid_queue_job = item.job %>
+<% queue_name = item.respond_to?(:queue_name) && item.queue_name.present? ? item.queue_name : solid_queue_job.queue_name %>
+<% time = item.respond_to?(:scheduled_at) && time_label == 'Scheduled for' ? item.scheduled_at : item.created_at %>
+<tr>
+  <td><%= link_to solid_queue_job.class_name, job_path(solid_queue_job), class: 'job-class-link' %></td>
+  <td><%= queue_link(queue_name) %></td>
+  <td><%= format_arguments(solid_queue_job.arguments) %></td>
+  <td><span class="job-timestamp"><%= time_label %>: <%= format_datetime(time) %></span></td>
+</tr>
diff --git a/app/views/solid_queue_monitor/search/_recurring_row.html.erb b/app/views/solid_queue_monitor/search/_recurring_row.html.erb
new file mode 100644
index 0000000..2390fc9
--- /dev/null
+++ b/app/views/solid_queue_monitor/search/_recurring_row.html.erb
@@ -0,0 +1,6 @@
+<tr>
+  <td><strong><%= item.key %></strong></td>
+  <td><%= item.class_name || '-' %></td>
+  <td><code><%= item.schedule %></code></td>
+  <td><%= queue_link(item.queue_name) %></td>
+</tr>
diff --git a/app/views/solid_queue_monitor/search/_section.html.erb b/app/views/solid_queue_monitor/search/_section.html.erb
new file mode 100644
index 0000000..d2335d5
--- /dev/null
+++ b/app/views/solid_queue_monitor/search/_section.html.erb
@@ -0,0 +1,25 @@
+<div class="search-results-section">
+  <h3><%= title %> (<%= items.size %>)</h3>
+  <div class="table-container">
+    <table>
+      <thead>
+        <tr>
+          <% if title == 'Recurring Tasks' %>
+            <th>Key</th><th>Class</th><th>Schedule</th><th>Queue</th>
+          <% elsif title == 'Failed Jobs' %>
+            <th>Job</th><th>Queue</th><th>Error</th><th>Failed At</th>
+          <% elsif title == 'Completed Jobs' %>
+            <th>Job</th><th>Queue</th><th>Arguments</th><th>Completed At</th>
+          <% else %>
+            <th>Job</th><th>Queue</th><th>Arguments</th><th>Time</th>
+          <% end %>
+        </tr>
+      </thead>
+      <tbody>
+        <% items.each do |item| %>
+          <%= render row_partial, item: item, time_label: local_assigns[:time_label] %>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+</div>
diff --git a/app/views/solid_queue_monitor/search/index.html.erb b/app/views/solid_queue_monitor/search/index.html.erb
new file mode 100644
index 0000000..acd482b
--- /dev/null
+++ b/app/views/solid_queue_monitor/search/index.html.erb
@@ -0,0 +1,23 @@
+<% content_for :title, 'Search' %>
+
+<% if @query.blank? %>
+  <div class="empty-state">
+    <p>Enter a search term in the header to find jobs across all categories.</p>
+  </div>
+<% elsif @total_count.zero? %>
+  <div class="empty-state">
+    <p>No results found for "<%= @query %>"</p>
+    <p class="results-summary">0 results</p>
+  </div>
+<% else %>
+  <div class="results-summary">
+    <p>Found <%= @total_count %> <%= 'result'.pluralize(@total_count) %> for "<%= @query %>"</p>
+  </div>
+
+  <%= render 'section', title: 'Ready Jobs', items: @results[:ready], row_partial: 'solid_queue_monitor/search/job_row', time_label: 'Created at' if @results[:ready].any? %>
+  <%= render 'section', title: 'Scheduled Jobs', items: @results[:scheduled], row_partial: 'solid_queue_monitor/search/job_row', time_label: 'Scheduled for' if @results[:scheduled].any? %>
+  <%= render 'section', title: 'Failed Jobs', items: @results[:failed], row_partial: 'solid_queue_monitor/search/failed_row' if @results[:failed].any? %>
+  <%= render 'section', title: 'In Progress Jobs', items: @results[:in_progress], row_partial: 'solid_queue_monitor/search/job_row', time_label: 'Started at' if @results[:in_progress].any? %>
+  <%= render 'section', title: 'Completed Jobs', items: @results[:completed], row_partial: 'solid_queue_monitor/search/completed_row' if @results[:completed].any? %>
+  <%= render 'section', title: 'Recurring Tasks', items: @results[:recurring], row_partial: 'solid_queue_monitor/search/recurring_row' if @results[:recurring].any? %>
+<% end %>
diff --git a/app/views/solid_queue_monitor/shared/_filters.html.erb b/app/views/solid_queue_monitor/shared/_filters.html.erb
new file mode 100644
index 0000000..bbe897a
--- /dev/null
+++ b/app/views/solid_queue_monitor/shared/_filters.html.erb
@@ -0,0 +1,48 @@
+<% show_status = local_assigns.fetch(:show_status, true) %>
+
+<div class="filter-form-container">
+  <%= form_with url: action_path, method: :get, local: true, html: { class: 'filter-form' } do |form| %>
+    <div class="filter-group">
+      <%= form.label :class_name, 'Job Class:' %>
+      <%= form.text_field :class_name,
+                          value: filters[:class_name],
+                          placeholder: 'Filter by class name' %>
+    </div>
+
+    <div class="filter-group">
+      <%= form.label :queue_name, 'Queue:' %>
+      <%= form.text_field :queue_name,
+                          value: filters[:queue_name],
+                          placeholder: 'Filter by queue' %>
+    </div>
+
+    <div class="filter-group">
+      <%= form.label :arguments, 'Arguments:' %>
+      <%= form.text_field :arguments,
+                          value: filters[:arguments],
+                          placeholder: 'Filter by arguments' %>
+    </div>
+
+    <% if show_status %>
+      <div class="filter-group">
+        <%= form.label :status, 'Status:' %>
+        <%= form.select :status,
+                        options_for_select(
+                          [
+                            ['All Statuses', ''],
+                            ['Completed', 'completed'],
+                            ['Failed', 'failed'],
+                            ['Scheduled', 'scheduled'],
+                            ['Pending', 'pending']
+                          ],
+                          filters[:status]
+                        ) %>
+      </div>
+    <% end %>
+
+    <div class="filter-actions">
+      <%= form.submit 'Apply Filters', class: 'filter-button' %>
+      <%= link_to 'Reset', action_path, class: 'reset-button' %>
+    </div>
+  <% end %>
+</div>
diff --git a/app/views/solid_queue_monitor/shared/_flash.html.erb b/app/views/solid_queue_monitor/shared/_flash.html.erb
new file mode 100644
index 0000000..a73fa1d
--- /dev/null
+++ b/app/views/solid_queue_monitor/shared/_flash.html.erb
@@ -0,0 +1,17 @@
+<%
+  message = @flash_message
+  message_type = @flash_type
+  begin
+    message ||= session[:flash_message]
+    message_type ||= session[:flash_type]
+    session.delete(:flash_message) if message
+    session.delete(:flash_type) if message_type
+  rescue StandardError
+    # Session not available.
+  end
+%>
+<% if message %>
+  <div id="flash-message" class="message <%= message_class(message_type) %>">
+    <%= message %>
+  </div>
+<% end %>
diff --git a/app/views/solid_queue_monitor/shared/_footer.html.erb b/app/views/solid_queue_monitor/shared/_footer.html.erb
new file mode 100644
index 0000000..9c6cf6b
--- /dev/null
+++ b/app/views/solid_queue_monitor/shared/_footer.html.erb
@@ -0,0 +1,3 @@
+<footer>
+  <p>Powered by Solid Queue Monitor</p>
+</footer>
diff --git a/app/views/solid_queue_monitor/shared/_header.html.erb b/app/views/solid_queue_monitor/shared/_header.html.erb
new file mode 100644
index 0000000..3d04b74
--- /dev/null
+++ b/app/views/solid_queue_monitor/shared/_header.html.erb
@@ -0,0 +1,81 @@
+<% nav_items = [
+  { path: root_path, label: 'Overview', match: 'Overview' },
+  { path: ready_jobs_path, label: 'Ready Jobs', match: 'Ready Jobs' },
+  { path: in_progress_jobs_path, label: 'In Progress Jobs', match: 'In Progress' },
+  { path: scheduled_jobs_path, label: 'Scheduled Jobs', match: 'Scheduled Jobs' },
+  { path: recurring_jobs_path, label: 'Recurring Jobs', match: 'Recurring Jobs' },
+  { path: failed_jobs_path, label: 'Failed Jobs', match: 'Failed Jobs' },
+  { path: queues_path, label: 'Queues', match: 'Queues' },
+  { path: workers_path, label: 'Workers', match: 'Workers' }
+] %>
+
+<header>
+  <div class="header-top">
+    <h1>
+      <%= link_to 'Solid Queue Monitor', root_path, class: 'header-title-link' %>
+    </h1>
+
+    <%= form_with url: search_path, method: :get, local: true, html: { class: 'header-search-form' } do |form| %>
+      <%= form.text_field :q,
+                          value: params[:q],
+                          placeholder: 'Search by class, queue, job ID, or error...',
+                          class: 'header-search-input' %>
+      <button type="submit" class="header-search-button" title="Search">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+             stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="11" cy="11" r="8"></circle>
+          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+        </svg>
+      </button>
+    <% end %>
+
+    <div class="header-controls">
+      <% if SolidQueueMonitor.auto_refresh_enabled %>
+        <% interval = SolidQueueMonitor.auto_refresh_interval %>
+        <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>
+      <% end %>
+
+      <button class="theme-toggle-btn" id="theme-toggle-btn" title="Toggle dark mode">
+        <svg class="theme-icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+             stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="12" cy="12" r="5"></circle>
+          <line x1="12" y1="1" x2="12" y2="3"></line>
+          <line x1="12" y1="21" x2="12" y2="23"></line>
+          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+          <line x1="1" y1="12" x2="3" y2="12"></line>
+          <line x1="21" y1="12" x2="23" y2="12"></line>
+          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+        </svg>
+        <svg class="theme-icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+             stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+        </svg>
+      </button>
+    </div>
+  </div>
+
+  <nav class="navigation">
+    <% nav_items.each do |item| %>
+      <%= link_to item[:label],
+                  item[:path],
+                  class: class_names('nav-link', active: content_for(:title).to_s.include?(item[:match])) %>
+    <% end %>
+  </nav>
+</header>
diff --git a/app/views/solid_queue_monitor/shared/_jobs_table.html.erb b/app/views/solid_queue_monitor/shared/_jobs_table.html.erb
new file mode 100644
index 0000000..d775a4a
--- /dev/null
+++ b/app/views/solid_queue_monitor/shared/_jobs_table.html.erb
@@ -0,0 +1,20 @@
+<div class="table-container">
+  <table>
+    <thead>
+      <tr>
+        <% columns.each do |column| %>
+          <% if column[:sort_key] %>
+            <%= sortable_header(column[:sort_key], column[:label], sort: sort, filters: filters) %>
+          <% else %>
+            <th><%= column[:label] %></th>
+          <% end %>
+        <% end %>
+      </tr>
+    </thead>
+    <tbody>
+      <% jobs.each do |job| %>
+        <%= render row_partial, job: job %>
+      <% end %>
+    </tbody>
+  </table>
+</div>
diff --git a/app/views/solid_queue_monitor/shared/_pagination.html.erb b/app/views/solid_queue_monitor/shared/_pagination.html.erb
new file mode 100644
index 0000000..3a10ae9
--- /dev/null
+++ b/app/views/solid_queue_monitor/shared/_pagination.html.erb
@@ -0,0 +1,25 @@
+<% if total_pages > 1 %>
+  <div class="pagination">
+    <% if current_page > 1 %>
+      <%= link_to 'Previous', pagination_href(current_page - 1), class: 'pagination-link pagination-nav' %>
+    <% else %>
+      <span class="pagination-link pagination-nav disabled">Previous</span>
+    <% end %>
+
+    <% visible_pages(current_page, total_pages).each do |page| %>
+      <% if page == :gap %>
+        <span class="pagination-gap">...</span>
+      <% elsif page == current_page %>
+        <span class="pagination-current"><%= page %></span>
+      <% else %>
+        <%= link_to page, pagination_href(page), class: 'pagination-link' %>
+      <% end %>
+    <% end %>
+
+    <% if current_page < total_pages %>
+      <%= link_to 'Next', pagination_href(current_page + 1), class: 'pagination-link pagination-nav' %>
+    <% else %>
+      <span class="pagination-link pagination-nav disabled">Next</span>
+    <% end %>
+  </div>
+<% end %>
diff --git a/app/views/solid_queue_monitor/workers/_row.html.erb b/app/views/solid_queue_monitor/workers/_row.html.erb
new file mode 100644
index 0000000..caf55d5
--- /dev/null
+++ b/app/views/solid_queue_monitor/workers/_row.html.erb
@@ -0,0 +1,22 @@
+<% status = worker_status(job) %>
+<tr class="<%= worker_row_class(job) %>">
+  <td><%= worker_kind_badge(job.kind) %></td>
+  <td><%= worker_hostname(job) %></td>
+  <td><code><%= job.pid %></code></td>
+  <td><%= worker_queues(job) %></td>
+  <td><%= worker_heartbeat(job.last_heartbeat_at) %></td>
+  <td><%= worker_status_badge(status) %></td>
+  <td><%= worker_jobs_processing(job, claimed_counts: @claimed_counts, claimed_jobs: @claimed_jobs) %></td>
+  <td class="actions-cell">
+    <% if status == :dead %>
+      <form action="<%= remove_worker_path(id: job.id) %>"
+            method="post"
+            class="inline-form"
+            data-confirm="Remove this dead process from the registry?">
+        <button type="submit" class="action-button discard-button" title="Remove dead process">Remove</button>
+      </form>
+    <% else %>
+      <span class="action-placeholder">-</span>
+    <% end %>
+  </td>
+</tr>
diff --git a/app/views/solid_queue_monitor/workers/index.html.erb b/app/views/solid_queue_monitor/workers/index.html.erb
new file mode 100644
index 0000000..1d0f924
--- /dev/null
+++ b/app/views/solid_queue_monitor/workers/index.html.erb
@@ -0,0 +1,82 @@
+<% content_for :title, 'Workers' %>
+
+<div class="workers-summary">
+  <div class="summary-card">
+    <span class="summary-label">Total Processes</span>
+    <span class="summary-value"><%= @summary[:total] %></span>
+  </div>
+  <div class="summary-card summary-healthy">
+    <span class="summary-label">Healthy</span>
+    <span class="summary-value"><%= @summary[:healthy] %></span>
+  </div>
+  <div class="summary-card summary-stale">
+    <span class="summary-label">Stale</span>
+    <span class="summary-value"><%= @summary[:stale] %></span>
+  </div>
+  <div class="summary-card summary-dead">
+    <span class="summary-label">Dead</span>
+    <span class="summary-value"><%= @summary[:dead] %></span>
+    <% if @summary[:dead].positive? %>
+      <% suffix = @summary[:dead] > 1 ? 'es' : '' %>
+      <a href="#"
+         class="summary-action"
+         data-confirm-submit="prune-all-form"
+         data-confirm="Remove all <%= @summary[:dead] %> dead process<%= suffix %>? This will clean up processes that have stopped sending heartbeats.">
+        Prune all
+      </a>
+      <form id="prune-all-form" action="<%= prune_workers_path %>" method="post" class="is-hidden"></form>
+    <% end %>
+  </div>
+</div>
+
+<div class="filter-form-container">
+  <%= form_with url: workers_path, method: :get, local: true, html: { class: 'filter-form' } do |form| %>
+    <div class="filter-group">
+      <%= form.label :kind, 'Kind:' %>
+      <%= form.select :kind,
+                      options_for_select([['All', ''], %w[Worker Worker], %w[Dispatcher Dispatcher], %w[Scheduler Scheduler]], @filters[:kind]) %>
+    </div>
+    <div class="filter-group">
+      <%= form.label :hostname, 'Hostname:' %>
+      <%= form.text_field :hostname, value: @filters[:hostname], placeholder: 'Filter by hostname' %>
+    </div>
+    <div class="filter-group">
+      <%= form.label :status, 'Status:' %>
+      <%= form.select :status,
+                      options_for_select([['All', ''], %w[Healthy healthy], %w[Stale stale], %w[Dead dead]], @filters[:status]) %>
+    </div>
+    <div class="filter-actions">
+      <%= form.submit 'Apply Filters', class: 'filter-button' %>
+      <%= link_to 'Reset', workers_path, class: 'reset-button' %>
+    </div>
+  <% end %>
+</div>
+
+<% if @process_records.empty? %>
+  <div class="empty-state">
+    <p>No worker processes found.</p>
+    <p class="empty-state-hint">Workers will appear here when Solid Queue processes are running.</p>
+  </div>
+<% else %>
+  <% columns = [
+    { sort_key: nil, label: 'Kind' },
+    { sort_key: :hostname, label: 'Hostname' },
+    { sort_key: nil, label: 'PID' },
+    { sort_key: nil, label: 'Queues' },
+    { sort_key: :last_heartbeat_at, label: 'Last Heartbeat' },
+    { sort_key: nil, label: 'Status' },
+    { sort_key: nil, label: 'Jobs Processing' },
+    { sort_key: nil, label: 'Actions' }
+  ] %>
+
+  <%= render 'solid_queue_monitor/shared/jobs_table',
+             jobs: @process_records,
+             columns: columns,
+             sort: @sort,
+             filters: @filters,
+             row_partial: 'solid_queue_monitor/workers/row' %>
+<% end %>
+
+<%= render 'solid_queue_monitor/shared/pagination',
+           current_page: @processes[:current_page],
+           total_pages: @processes[:total_pages] %>
diff --git a/config/routes.rb b/config/routes.rb
index 6078fc1..7c2866b 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -15,7 +15,7 @@
   resources :failed_jobs, only: [:index]
   resources :in_progress_jobs, only: [:index]
   resources :queues, only: [:index]
-  get 'queues/:queue_name', to: 'queues#show', as: :queue_details, constraints: { queue_name: /[^\/]+/ }
+  get 'queues/:queue_name', to: 'queues#show', as: :queue_details, constraints: { queue_name: %r{[^/]+} }
   resources :workers, only: [:index]
   resources :jobs, only: [:show]
 
@@ -33,4 +33,9 @@
 
   post 'remove_worker/:id', to: 'workers#remove', as: :remove_worker
   post 'prune_workers', to: 'workers#prune', as: :prune_workers
+
+  get 'assets/:file',
+      to: 'assets#show',
+      as: :asset,
+      constraints: { file: /[A-Za-z0-9_\-]+-[a-f0-9]+\.(css|js)/ }
 end
diff --git a/lib/solid_queue_monitor/engine.rb b/lib/solid_queue_monitor/engine.rb
index c51be26..39ce9a8 100644
--- a/lib/solid_queue_monitor/engine.rb
+++ b/lib/solid_queue_monitor/engine.rb
@@ -5,9 +5,11 @@ class Engine < ::Rails::Engine
     isolate_namespace SolidQueueMonitor
 
     config.autoload_paths << root.join('app', 'services')
+    config.autoload_paths << root.join('app', 'helpers')
 
     # Optional: Add eager loading for production
     config.eager_load_paths << root.join('app', 'services')
+    config.eager_load_paths << root.join('app', 'helpers')
 
     # Ensure session middleware is available
     initializer 'solid_queue_monitor.middleware' do |app|
diff --git a/spec/helpers/solid_queue_monitor/application_helper_spec.rb b/spec/helpers/solid_queue_monitor/application_helper_spec.rb
new file mode 100644
index 0000000..cb49269
--- /dev/null
+++ b/spec/helpers/solid_queue_monitor/application_helper_spec.rb
@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe SolidQueueMonitor::ApplicationHelper do
+  before { SolidQueueMonitor::AssetCache.clear! }
+
+  describe '#asset_url_for' do
+    it 'embeds the content fingerprint in the URL for a CSS file' do
+      url = helper.asset_url_for('application.css')
+      expect(url).to match(%r{/assets/application-[a-f0-9]{16}\.css\z})
+    end
+
+    it 'embeds the content fingerprint in the URL for a JS file' do
+      url = helper.asset_url_for('application.js')
+      expect(url).to match(%r{/assets/application-[a-f0-9]{16}\.js\z})
+    end
+  end
+
+  describe '#format_datetime' do
+    it 'formats a Time object as YYYY-MM-DD HH:MM:SS' do
+      time = Time.zone.local(2026, 5, 12, 9, 30, 15)
+      expect(helper.format_datetime(time)).to eq('2026-05-12 09:30:15')
+    end
+
+    it 'returns a dash for nil' do
+      expect(helper.format_datetime(nil)).to eq('-')
+    end
+  end
+
+  describe '#message_class' do
+    it 'returns message-success for success' do
+      expect(helper.message_class('success')).to eq('message-success')
+    end
+
+    it 'returns message-error for any other value' do
+      expect(helper.message_class('error')).to eq('message-error')
+      expect(helper.message_class(nil)).to eq('message-error')
+    end
+  end
+
+  describe '#queue_link' do
+    it 'renders a link to the queue details page' do
+      result = helper.queue_link('default')
+      expect(result).to include('href="/queues/default"')
+      expect(result).to include('class="queue-link"')
+      expect(result).to include('>default<')
+    end
+
+    it 'returns a dash for blank queue names' do
+      expect(helper.queue_link(nil)).to eq('-')
+      expect(helper.queue_link('')).to eq('-')
+    end
+
+    it 'merges in additional CSS classes' do
+      result = helper.queue_link('default', css_class: 'highlight')
+      expect(result).to include('class="queue-link highlight"')
+    end
+  end
+end
diff --git a/spec/helpers/solid_queue_monitor/chart_helper_spec.rb b/spec/helpers/solid_queue_monitor/chart_helper_spec.rb
new file mode 100644
index 0000000..1847e67
--- /dev/null
+++ b/spec/helpers/solid_queue_monitor/chart_helper_spec.rb
@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe SolidQueueMonitor::ChartHelper do
+  describe '#render_chart' do
+    let(:data) do
+      {
+        labels: ['00:00', '01:00', '02:00'],
+        created: [5, 7, 10],
+        completed: [4, 6, 9],
+        failed: [1, 1, 1],
+        totals: { created: 22, completed: 19, failed: 3 },
+        time_range: '1d',
+        available_ranges: { '1d' => 'Last 24 hours', '1w' => 'Last 7 days' }
+      }
+    end
+
+    it 'renders an SVG with three data series' do
+      result = helper.render_chart(data: data, time_range: '1d')
+
+      expect(result).to include('<svg')
+      expect(result).to include('data-series="created"')
+      expect(result).to include('data-series="completed"')
+      expect(result).to include('data-series="failed"')
+    end
+
+    it 'renders one data point per data row per series' do
+      result = helper.render_chart(data: data, time_range: '1d')
+
+      expect(result.scan('class="data-point data-point-').size).to eq(9)
+    end
+
+    it 'escapes data labels to prevent XSS' do
+      hostile = data.merge(labels: ['<script>alert(1)</script>'], created: [1], completed: [1], failed: [1])
+      result = helper.render_chart(data: hostile, time_range: '1d')
+
+      expect(result).not_to include('<script>alert(1)</script>')
+      expect(result).to include('&lt;script&gt;')
+    end
+
+    it 'renders an empty state when all series are empty' do
+      empty_data = data.merge(created: [0], completed: [0], failed: [0])
+
+      expect(helper.render_chart(data: empty_data, time_range: '1d')).to include('No job activity in this time range')
+    end
+  end
+
+  describe '#chart_time_range_options' do
+    it 'returns a list of labels and values' do
+      options = helper.chart_time_range_options
+
+      expect(options).to include(['Last 24 hours', '1d'])
+      expect(options.size).to be >= 3
+    end
+  end
+end
diff --git a/spec/helpers/solid_queue_monitor/jobs_helper_spec.rb b/spec/helpers/solid_queue_monitor/jobs_helper_spec.rb
new file mode 100644
index 0000000..a4c3cb7
--- /dev/null
+++ b/spec/helpers/solid_queue_monitor/jobs_helper_spec.rb
@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe SolidQueueMonitor::JobsHelper do
+  describe '#format_arguments' do
+    it 'returns a dash for blank input' do
+      expect(helper.format_arguments(nil)).to eq('-')
+      expect(helper.format_arguments([])).to eq('-')
+    end
+
+    it 'renders short arguments inline' do
+      result = helper.format_arguments([1, 2, 3])
+
+      expect(result).to include('args-single-line')
+      expect(result).to include('[1, 2, 3]')
+    end
+
+    it 'wraps long arguments in a scrollable container' do
+      result = helper.format_arguments(Array.new(20, 'xxxxx'))
+
+      expect(result).to include('args-container')
+      expect(result).to include('args-content')
+    end
+
+    it 'unwraps ActiveJob ruby2 keyword payloads' do
+      payload = [{ 'arguments' => [{ '_aj_ruby2_keywords' => ['foo'], 'foo' => 'bar' }] }]
+      result = helper.format_arguments(payload)
+
+      expect(result).to include('foo')
+      expect(result).not_to include('_aj_ruby2_keywords')
+    end
+  end
+
+  describe '#format_hash' do
+    it 'returns a dash for blank input' do
+      expect(helper.format_hash(nil)).to eq('-')
+      expect(helper.format_hash({})).to eq('-')
+    end
+
+    it 'renders key value pairs with truncated values' do
+      result = helper.format_hash(foo: 'bar', baz: 'x' * 100)
+
+      expect(result).to include('<strong>foo:</strong>')
+      expect(result).to include('bar')
+      expect(result).to include('...')
+    end
+  end
+end
diff --git a/spec/helpers/solid_queue_monitor/pagination_helper_spec.rb b/spec/helpers/solid_queue_monitor/pagination_helper_spec.rb
new file mode 100644
index 0000000..8c159e5
--- /dev/null
+++ b/spec/helpers/solid_queue_monitor/pagination_helper_spec.rb
@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe SolidQueueMonitor::PaginationHelper do
+  describe '#visible_pages' do
+    it 'returns all pages when total is seven or fewer' do
+      expect(helper.visible_pages(1, 5)).to eq([1, 2, 3, 4, 5])
+    end
+
+    it 'truncates the tail when current page is near the start' do
+      expect(helper.visible_pages(2, 20)).to eq([1, 2, 3, 4, :gap, 20])
+    end
+
+    it 'truncates the head when current page is near the end' do
+      expect(helper.visible_pages(19, 20)).to eq([1, :gap, 17, 18, 19, 20])
+    end
+
+    it 'truncates both sides when current page is in the middle' do
+      expect(helper.visible_pages(10, 20)).to eq([1, :gap, 9, 10, 11, :gap, 20])
+    end
+  end
+end
diff --git a/spec/helpers/solid_queue_monitor/sort_helper_spec.rb b/spec/helpers/solid_queue_monitor/sort_helper_spec.rb
new file mode 100644
index 0000000..fcf29bc
--- /dev/null
+++ b/spec/helpers/solid_queue_monitor/sort_helper_spec.rb
@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe SolidQueueMonitor::SortHelper do
+  describe '#sortable_header' do
+    it 'returns a plain table header when sort is nil' do
+      expect(helper.sortable_header(:class_name, 'Class', sort: nil)).to eq('<th>Class</th>')
+    end
+
+    it 'renders an active descending sort link when column matches' do
+      sort = { sort_by: 'class_name', sort_direction: 'asc' }
+      result = helper.sortable_header(:class_name, 'Class', sort: sort)
+
+      expect(result).to include('class="sortable-header active"')
+      expect(result).to include('sort_direction=desc')
+      expect(result).to include(' &uarr;')
+    end
+
+    it 'renders an inactive ascending sort link when column does not match' do
+      sort = { sort_by: 'queue_name', sort_direction: 'asc' }
+      result = helper.sortable_header(:class_name, 'Class', sort: sort)
+
+      expect(result).to include('class="sortable-header"')
+      expect(result).to include('sort_direction=asc')
+      expect(result).to include(' &udarr;')
+    end
+
+    it 'preserves filter params in the sort link' do
+      sort = { sort_by: nil, sort_direction: nil }
+      filters = { class_name: 'MyJob', status: 'failed' }
+      result = helper.sortable_header(:created_at, 'Created', sort: sort, filters: filters)
+
+      expect(result).to include('class_name=MyJob')
+      expect(result).to include('status=failed')
+    end
+  end
+end
diff --git a/spec/presenters/solid_queue_monitor/failed_jobs_presenter_spec.rb b/spec/presenters/solid_queue_monitor/failed_jobs_presenter_spec.rb
deleted file mode 100644
index b5db33d..0000000
--- a/spec/presenters/solid_queue_monitor/failed_jobs_presenter_spec.rb
+++ /dev/null
@@ -1,25 +0,0 @@
-# frozen_string_literal: true
-
-require 'spec_helper'
-
-RSpec.describe SolidQueueMonitor::FailedJobsPresenter do
-  let(:job) { create(:solid_queue_job) }
-  let(:failed_execution) { create(:solid_queue_failed_execution, job: job) }
-  let(:jobs) { [failed_execution] }
-
-  describe 'CSP nonce propagation' do
-    it 'stamps nonce on its inline <script>' do
-      presenter = described_class.new(jobs, nonce: 'pnonce')
-      html = presenter.render
-      script_tags = html.scan(/<script[^>]*>/)
-      expect(script_tags).not_to be_empty
-      expect(script_tags).to all(include('nonce="pnonce"'))
-    end
-
-    it 'omits nonce when not supplied' do
-      presenter = described_class.new(jobs)
-      html = presenter.render
-      expect(html.scan(/<script[^>]*>/).join).not_to include('nonce=')
-    end
-  end
-end
diff --git a/spec/presenters/solid_queue_monitor/job_details_presenter_spec.rb b/spec/presenters/solid_queue_monitor/job_details_presenter_spec.rb
deleted file mode 100644
index 9e895ae..0000000
--- a/spec/presenters/solid_queue_monitor/job_details_presenter_spec.rb
+++ /dev/null
@@ -1,175 +0,0 @@
-# frozen_string_literal: true
-
-require 'spec_helper'
-
-RSpec.describe SolidQueueMonitor::JobDetailsPresenter do
-  let(:job) { create(:solid_queue_job, class_name: 'TestJob', queue_name: 'default', priority: 5) }
-
-  describe '#render' do
-    subject(:rendered_html) { presenter.render }
-
-    let(:presenter) { described_class.new(job, back_path: '/failed_jobs') }
-
-    it 'renders the job details page container' do
-      expect(rendered_html).to include('job-details-page')
-    end
-
-    it 'renders the job class name' do
-      expect(rendered_html).to include('TestJob')
-    end
-
-    it 'renders the queue name' do
-      expect(rendered_html).to include('default')
-    end
-
-    it 'renders the priority' do
-      expect(rendered_html).to include('Priority')
-    end
-
-    it 'renders the back link' do
-      expect(rendered_html).to include('href="/failed_jobs"')
-      expect(rendered_html).to include('Back')
-    end
-
-    it 'renders the job arguments section' do
-      expect(rendered_html).to include('Arguments')
-    end
-
-    it 'renders the job details section' do
-      expect(rendered_html).to include('Job Details')
-    end
-
-    it 'renders the raw data section' do
-      expect(rendered_html).to include('Raw Data')
-    end
-
-    context 'with a failed execution' do
-      let(:failed_execution) do
-        create(:solid_queue_failed_execution, job: job, error: { 'message' => 'Test error', 'backtrace' => %w[line1 line2] })
-      end
-      let(:presenter) { described_class.new(job, failed_execution: failed_execution, back_path: '/') }
-
-      it 'renders the error section' do
-        expect(rendered_html).to include('Error')
-      end
-
-      it 'renders retry and discard buttons' do
-        expect(rendered_html).to include('Retry')
-        expect(rendered_html).to include('Discard')
-      end
-
-      it 'renders the failed status badge' do
-        expect(rendered_html).to include('Failed')
-        expect(rendered_html).to include('status-failed')
-      end
-    end
-
-    context 'with a claimed execution (in progress)' do
-      let(:process) { create(:solid_queue_process, kind: 'Worker', hostname: 'worker-1', pid: 12_345) }
-      let(:claimed_execution) do
-        execution = create(:solid_queue_claimed_execution, job: job, process_id: process.id)
-        execution.instance_variable_set(:@process, process)
-        execution
-      end
-      let(:presenter) { described_class.new(job, claimed_execution: claimed_execution, back_path: '/') }
-
-      it 'renders the worker section' do
-        expect(rendered_html).to include('Worker')
-      end
-
-      it 'renders the hostname' do
-        expect(rendered_html).to include('worker-1')
-      end
-
-      it 'renders the in progress status' do
-        expect(rendered_html).to include('In Progress')
-        expect(rendered_html).to include('status-in-progress')
-      end
-    end
-
-    context 'with a scheduled execution' do
-      let(:scheduled_at) { 1.hour.from_now }
-      let(:scheduled_execution) { create(:solid_queue_scheduled_execution, job: job, scheduled_at: scheduled_at) }
-      let(:presenter) { described_class.new(job, scheduled_execution: scheduled_execution, back_path: '/') }
-
-      it 'renders the scheduled status' do
-        expect(rendered_html).to include('Scheduled')
-        expect(rendered_html).to include('status-scheduled')
-      end
-    end
-
-    context 'with a completed job' do
-      let(:completed_job) { create(:solid_queue_job, :completed, class_name: 'CompletedJob') }
-      let(:presenter) { described_class.new(completed_job, back_path: '/') }
-
-      it 'renders the completed status' do
-        expect(rendered_html).to include('Completed')
-        expect(rendered_html).to include('status-completed')
-      end
-    end
-
-    context 'with recent executions' do
-      let(:recent_jobs) do
-        create_list(:solid_queue_job, 3, class_name: 'TestJob', finished_at: Time.current)
-      end
-      let(:presenter) { described_class.new(job, recent_executions: recent_jobs, back_path: '/') }
-
-      it 'renders the recent executions section' do
-        expect(rendered_html).to include('Recent Executions')
-      end
-
-      it 'renders the recent executions table' do
-        expect(rendered_html).to include('recent-executions-table')
-      end
-    end
-  end
-
-  describe 'timing calculations' do
-    context 'with start and end times' do
-      let(:started_at) { 5.minutes.ago }
-      let(:finished_at) { Time.current }
-      let(:completed_job) { create(:solid_queue_job, created_at: 10.minutes.ago, finished_at: finished_at) }
-      let(:claimed_execution) do
-        execution = build(:solid_queue_claimed_execution, job: completed_job, created_at: started_at)
-        execution.instance_variable_set(:@process, nil)
-        execution
-      end
-      let(:presenter) { described_class.new(completed_job, claimed_execution: claimed_execution, back_path: '/') }
-
-      it 'renders timing cards' do
-        rendered_html = presenter.render
-        expect(rendered_html).to include('timing-cards')
-        expect(rendered_html).to include('Queue Wait')
-        expect(rendered_html).to include('Execution')
-        expect(rendered_html).to include('Total Time')
-      end
-    end
-  end
-
-  describe 'timeline rendering' do
-    let(:completed_job) { create(:solid_queue_job, :completed, created_at: 10.minutes.ago) }
-    let(:presenter) { described_class.new(completed_job, back_path: '/') }
-
-    it 'renders the timeline section' do
-      rendered_html = presenter.render
-      expect(rendered_html).to include('Timeline')
-      expect(rendered_html).to include('timeline-track')
-    end
-  end
-
-  describe 'CSP nonce propagation' do
-    it 'stamps nonce on all inline <script> tags' do
-      presenter = described_class.new(job, nonce: 'jnonce')
-      html = presenter.render
-      script_tags = html.scan(/<script[^>]*>/)
-      expect(script_tags).not_to be_empty
-      expect(script_tags).to all(include('nonce="jnonce"'))
-    end
-
-    it 'omits nonce when not supplied' do
-      presenter = described_class.new(job)
-      html = presenter.render
-      expect(html.scan(/<script[^>]*>/).join).not_to include('nonce=')
-    end
-  end
-end
diff --git a/spec/presenters/solid_queue_monitor/jobs_presenter_spec.rb b/spec/presenters/solid_queue_monitor/jobs_presenter_spec.rb
deleted file mode 100644
index 8d545d8..0000000
--- a/spec/presenters/solid_queue_monitor/jobs_presenter_spec.rb
+++ /dev/null
@@ -1,58 +0,0 @@
-# frozen_string_literal: true
-
-require 'spec_helper'
-
-RSpec.describe SolidQueueMonitor::JobsPresenter do
-  describe '#render' do
-    subject { described_class.new(jobs, current_page: 1, total_pages: 1, filters: {}) }
-
-    let(:job1) { create(:solid_queue_job, class_name: 'EmailJob') }
-    let(:job2) { create(:solid_queue_job, :completed, class_name: 'ReportJob') }
-    let(:jobs) { [job1, job2] }
-
-    # NOTE: These tests require routes which cause duplicate route errors in test environment.
-    # Skip for now - the presenter functionality is tested through integration/feature tests.
-
-    it 'returns HTML string', skip: 'Route loading issues in test environment' do
-      html = subject.render
-      expect(html).to be_a(String)
-      expect(html).to include('section-wrapper')
-    end
-
-    it 'includes a title for the section', skip: 'Route loading issues in test environment' do
-      expect(subject.render).to include('<h3>Recent Jobs</h3>')
-    end
-
-    it 'includes the filter form', skip: 'Route loading issues in test environment' do
-      html = subject.render
-
-      expect(html).to include('filter-form-container')
-      expect(html).to include('Job Class:')
-      expect(html).to include('Queue:')
-      expect(html).to include('Status:')
-    end
-
-    it 'includes a table with jobs', skip: 'Route loading issues in test environment' do
-      html = subject.render
-
-      expect(html).to include('<table>')
-      expect(html).to include('EmailJob')
-      expect(html).to include('ReportJob')
-      # The completed job should show as 'completed', others as 'pending'
-      expect(html).to include('status-badge')
-    end
-
-    context 'with filters' do
-      subject do
-        described_class.new(jobs, current_page: 1, total_pages: 1, filters: { class_name: 'Email', status: 'pending' })
-      end
-
-      it 'pre-fills filter values', skip: 'Route loading issues in test environment' do
-        html = subject.render
-
-        expect(html).to include('value="Email"')
-        expect(html).to include('value="pending" selected')
-      end
-    end
-  end
-end
diff --git a/spec/presenters/solid_queue_monitor/scheduled_jobs_presenter_spec.rb b/spec/presenters/solid_queue_monitor/scheduled_jobs_presenter_spec.rb
deleted file mode 100644
index e3a8e84..0000000
--- a/spec/presenters/solid_queue_monitor/scheduled_jobs_presenter_spec.rb
+++ /dev/null
@@ -1,25 +0,0 @@
-# frozen_string_literal: true
-
-require 'spec_helper'
-
-RSpec.describe SolidQueueMonitor::ScheduledJobsPresenter do
-  let(:job) { create(:solid_queue_job) }
-  let(:scheduled_execution) { create(:solid_queue_scheduled_execution, job: job) }
-  let(:jobs) { [scheduled_execution] }
-
-  describe 'CSP nonce propagation' do
-    it 'stamps nonce on its inline <script>' do
-      presenter = described_class.new(jobs, nonce: 'snonce')
-      html = presenter.render
-      script_tags = html.scan(/<script[^>]*>/)
-      expect(script_tags).not_to be_empty
-      expect(script_tags).to all(include('nonce="snonce"'))
-    end
-
-    it 'omits nonce when not supplied' do
-      presenter = described_class.new(jobs)
-      html = presenter.render
-      expect(html.scan(/<script[^>]*>/).join).not_to include('nonce=')
-    end
-  end
-end
diff --git a/spec/presenters/solid_queue_monitor/search_results_presenter_spec.rb b/spec/presenters/solid_queue_monitor/search_results_presenter_spec.rb
deleted file mode 100644
index a33a823..0000000
--- a/spec/presenters/solid_queue_monitor/search_results_presenter_spec.rb
+++ /dev/null
@@ -1,228 +0,0 @@
-# frozen_string_literal: true
-
-require 'spec_helper'
-
-RSpec.describe SolidQueueMonitor::SearchResultsPresenter do
-  subject { described_class.new(query, results) }
-
-  let(:query) { 'TestJob' }
-  let(:results) do
-    {
-      ready: [],
-      scheduled: [],
-      failed: [],
-      in_progress: [],
-      completed: [],
-      recurring: []
-    }
-  end
-
-  describe '#render' do
-    it 'returns HTML content' do
-      expect(subject.render).to be_a(String)
-      expect(subject.render).to include('section-wrapper')
-    end
-
-    it 'includes the search query in the title' do
-      expect(subject.render).to include('TestJob')
-    end
-
-    it 'does not include a duplicate search form (uses header search)' do
-      html = subject.render
-      expect(html).not_to include('name="q"')
-    end
-
-    context 'with empty results' do
-      it 'shows no results message' do
-        html = subject.render
-        expect(html).to include('No results found')
-      end
-
-      it 'shows total count of 0' do
-        html = subject.render
-        expect(html).to include('0 results')
-      end
-    end
-
-    context 'with ready job results' do
-      let(:job) { create(:solid_queue_job, class_name: 'TestJobReady', queue_name: 'default') }
-      let!(:ready_execution) { create(:solid_queue_ready_execution, job: job) }
-      let(:results) do
-        {
-          ready: [ready_execution],
-          scheduled: [],
-          failed: [],
-          in_progress: [],
-          completed: [],
-          recurring: []
-        }
-      end
-
-      it 'shows the ready jobs section' do
-        html = subject.render
-        expect(html).to include('Ready Jobs')
-        expect(html).to include('TestJobReady')
-      end
-
-      it 'includes a link to the job details' do
-        html = subject.render
-        expect(html).to include("jobs/#{job.id}")
-      end
-
-      it 'shows count of 1 result' do
-        html = subject.render
-        expect(html).to include('1 result')
-      end
-    end
-
-    context 'with scheduled job results' do
-      let(:job) { create(:solid_queue_job, class_name: 'TestJobScheduled') }
-      let!(:scheduled_execution) { create(:solid_queue_scheduled_execution, job: job) }
-      let(:results) do
-        {
-          ready: [],
-          scheduled: [scheduled_execution],
-          failed: [],
-          in_progress: [],
-          completed: [],
-          recurring: []
-        }
-      end
-
-      it 'shows the scheduled jobs section' do
-        html = subject.render
-        expect(html).to include('Scheduled Jobs')
-        expect(html).to include('TestJobScheduled')
-      end
-    end
-
-    context 'with failed job results' do
-      let(:job) { create(:solid_queue_job, class_name: 'TestJobFailed') }
-      let!(:failed_execution) { create(:solid_queue_failed_execution, job: job, error: 'Connection refused') }
-      let(:results) do
-        {
-          ready: [],
-          scheduled: [],
-          failed: [failed_execution],
-          in_progress: [],
-          completed: [],
-          recurring: []
-        }
-      end
-
-      it 'shows the failed jobs section' do
-        html = subject.render
-        expect(html).to include('Failed Jobs')
-        expect(html).to include('TestJobFailed')
-      end
-
-      it 'shows the error message' do
-        html = subject.render
-        expect(html).to include('Connection refused')
-      end
-    end
-
-    context 'with in_progress job results' do
-      let(:job) { create(:solid_queue_job, class_name: 'TestJobInProgress') }
-      let!(:claimed_execution) { create(:solid_queue_claimed_execution, job: job) }
-      let(:results) do
-        {
-          ready: [],
-          scheduled: [],
-          failed: [],
-          in_progress: [claimed_execution],
-          completed: [],
-          recurring: []
-        }
-      end
-
-      it 'shows the in progress jobs section' do
-        html = subject.render
-        expect(html).to include('In Progress Jobs')
-        expect(html).to include('TestJobInProgress')
-      end
-    end
-
-    context 'with completed job results' do
-      let!(:completed_job) { create(:solid_queue_job, :completed, class_name: 'TestJobCompleted') }
-      let(:results) do
-        {
-          ready: [],
-          scheduled: [],
-          failed: [],
-          in_progress: [],
-          completed: [completed_job],
-          recurring: []
-        }
-      end
-
-      it 'shows the completed jobs section' do
-        html = subject.render
-        expect(html).to include('Completed Jobs')
-        expect(html).to include('TestJobCompleted')
-      end
-
-      it 'includes a link to the job details' do
-        html = subject.render
-        expect(html).to include("jobs/#{completed_job.id}")
-      end
-    end
-
-    context 'with recurring task results' do
-      let!(:recurring_task) { create(:solid_queue_recurring_task, key: 'test_cleanup', class_name: 'TestCleanupJob') }
-      let(:results) do
-        {
-          ready: [],
-          scheduled: [],
-          failed: [],
-          in_progress: [],
-          completed: [],
-          recurring: [recurring_task]
-        }
-      end
-
-      it 'shows the recurring tasks section' do
-        html = subject.render
-        expect(html).to include('Recurring Tasks')
-        expect(html).to include('test_cleanup')
-      end
-    end
-
-    context 'with results across multiple categories' do
-      let(:ready_job) { create(:solid_queue_job, class_name: 'TestReadyJob') }
-      let(:failed_job) { create(:solid_queue_job, class_name: 'TestFailedJob') }
-      let!(:ready_execution) { create(:solid_queue_ready_execution, job: ready_job) }
-      let!(:failed_execution) { create(:solid_queue_failed_execution, job: failed_job) }
-      let(:results) do
-        {
-          ready: [ready_execution],
-          scheduled: [],
-          failed: [failed_execution],
-          in_progress: [],
-          completed: [],
-          recurring: []
-        }
-      end
-
-      it 'shows total count across all categories' do
-        html = subject.render
-        expect(html).to include('2 results')
-      end
-
-      it 'shows both sections' do
-        html = subject.render
-        expect(html).to include('Ready Jobs')
-        expect(html).to include('Failed Jobs')
-      end
-    end
-
-    context 'with blank query' do
-      let(:query) { '' }
-
-      it 'shows appropriate message' do
-        html = subject.render
-        expect(html).to include('Enter a search term')
-      end
-    end
-  end
-end
diff --git a/spec/requests/solid_queue_monitor/assets_spec.rb b/spec/requests/solid_queue_monitor/assets_spec.rb
new file mode 100644
index 0000000..fafae73
--- /dev/null
+++ b/spec/requests/solid_queue_monitor/assets_spec.rb
@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'GET /solid_queue/assets/:file' do
+  before { SolidQueueMonitor::AssetCache.clear! }
+  after { SolidQueueMonitor::AssetCache.clear! }
+
+  let(:css_fingerprint) { SolidQueueMonitor::AssetCache.fingerprint_for('application.css') }
+  let(:js_fingerprint) { SolidQueueMonitor::AssetCache.fingerprint_for('application.js') }
+
+  it 'serves application.css with the correct fingerprint and content type' do
+    get "/assets/application-#{css_fingerprint}.css"
+    expect(response).to have_http_status(:ok)
+    expect(response.content_type).to start_with('text/css')
+    expect(response.headers['Cache-Control']).to include('immutable')
+    expect(response.headers['Cache-Control']).to include("max-age=#{1.year.to_i}")
+  end
+
+  it 'serves application.js with the correct fingerprint and content type' do
+    get "/assets/application-#{js_fingerprint}.js"
+    expect(response).to have_http_status(:ok)
+    expect(response.content_type).to start_with('application/javascript')
+  end
+
+  it 'returns 304 when If-None-Match matches the etag' do
+    get "/assets/application-#{css_fingerprint}.css",
+        headers: { 'If-None-Match' => %("#{css_fingerprint}") }
+    expect(response).to have_http_status(:not_modified)
+    expect(response.body).to be_empty
+  end
+
+  it 'returns 404 when the fingerprint does not match the file content' do
+    get '/assets/application-deadbeefdeadbeef.css'
+    expect(response).to have_http_status(:not_found)
+  end
+
+  it 'returns 404 (route does not match) when the file name lacks a hyphenated hash' do
+    get '/assets/application.css'
+    expect(response).to have_http_status(:not_found)
+  end
+
+  it 'returns 404 (route does not match) for disallowed extensions' do
+    get "/assets/application-#{css_fingerprint}.html"
+    expect(response).to have_http_status(:not_found)
+  end
+
+  it 'returns 404 (route does not match) for path-traversal attempts' do
+    get '/assets/..%2F..%2Fetc%2Fpasswd'
+    expect(response).to have_http_status(:not_found)
+  end
+
+  it 'serves assets without authentication even when auth is enabled' do
+    SolidQueueMonitor.authentication_enabled = true
+    get "/assets/application-#{css_fingerprint}.css"
+    expect(response).to have_http_status(:ok)
+  ensure
+    SolidQueueMonitor.authentication_enabled = false
+  end
+end
diff --git a/spec/requests/solid_queue_monitor/csp_compatibility_spec.rb b/spec/requests/solid_queue_monitor/csp_compatibility_spec.rb
index 501e412..97e4895 100644
--- a/spec/requests/solid_queue_monitor/csp_compatibility_spec.rb
+++ b/spec/requests/solid_queue_monitor/csp_compatibility_spec.rb
@@ -43,15 +43,16 @@
       include_examples 'a CSP-safe page', path
     end
 
-    it 'emits <style> without nonce attribute' do
+    it 'emits the stylesheet without a nonce attribute' do
       get '/'
-      expect(response.body).to match(/<style>/)
-      expect(response.body).not_to match(/<style\s+nonce=/)
+      expect(response.body).to match(%r{<link[^>]+rel="stylesheet"[^>]+href="/assets/application-[a-f0-9]{16}\.css"})
+      expect(response.body).not_to match(/<link[^>]+rel="stylesheet"[^>]+nonce=/)
     end
 
-    it 'emits <script> tags without nonce attribute' do
+    it 'emits external <script> tags without nonce attribute' do
       get '/'
       response.body.scan(/<script[^>]*>/).each do |tag|
+        expect(tag).to include('src=')
         expect(tag).not_to include('nonce=')
       end
     end
@@ -63,15 +64,18 @@
         .to receive(:content_security_policy_nonce).and_return('test-nonce-123')
     end
 
-    it 'stamps nonce on the <style> tag' do
+    it 'stamps nonce on the stylesheet tag' do
       get '/'
-      expect(response.body).to include('<style nonce="test-nonce-123">')
+      stylesheet_tags = response.body.scan(/<link[^>]+rel="stylesheet"[^>]*>/)
+      expect(stylesheet_tags).not_to be_empty
+      expect(stylesheet_tags).to all(include('nonce="test-nonce-123"'))
     end
 
-    it 'stamps nonce on every <script> tag' do
+    it 'stamps nonce on every external <script> tag' do
       get '/'
       scripts = response.body.scan(/<script[^>]*>/)
       expect(scripts).not_to be_empty
+      expect(scripts).to all(include('src='))
       expect(scripts).to all(include('nonce="test-nonce-123"'))
     end
   end
diff --git a/spec/services/solid_queue_monitor/asset_cache_spec.rb b/spec/services/solid_queue_monitor/asset_cache_spec.rb
new file mode 100644
index 0000000..8161709
--- /dev/null
+++ b/spec/services/solid_queue_monitor/asset_cache_spec.rb
@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe SolidQueueMonitor::AssetCache do
+  after { described_class.clear! }
+
+  describe '.fetch_by_name' do
+    it 'returns the asset content, mtime, and etag for a known CSS file' do
+      result = described_class.fetch_by_name('application.css')
+      expect(result).to include(:content, :mtime, :etag)
+      expect(result[:content]).to be_a(String)
+      expect(result[:etag]).to match(/\A[a-f0-9]{16}\z/)
+    end
+
+    it 'returns the asset content for a known JS file' do
+      result = described_class.fetch_by_name('application.js')
+      expect(result[:content]).to be_a(String)
+    end
+
+    it 'returns nil for unknown files' do
+      expect(described_class.fetch_by_name('nonexistent.css')).to be_nil
+    end
+
+    it 'returns nil for files outside the asset root' do
+      expect(described_class.fetch_by_name('../../../etc/passwd')).to be_nil
+    end
+
+    it 'reuses the cached entry when mtime is unchanged' do
+      first = described_class.fetch_by_name('application.css')
+      second = described_class.fetch_by_name('application.css')
+      expect(first.object_id).to eq(second.object_id)
+    end
+  end
+
+  describe '.fingerprint_for' do
+    it 'returns the etag for a known file' do
+      expect(described_class.fingerprint_for('application.css')).to match(/\A[a-f0-9]{16}\z/)
+    end
+
+    it 'returns nil for unknown files' do
+      expect(described_class.fingerprint_for('nope.css')).to be_nil
+    end
+
+    it 'produces a stable fingerprint for unchanged content' do
+      a = described_class.fingerprint_for('application.css')
+      described_class.clear!
+      b = described_class.fingerprint_for('application.css')
+      expect(a).to eq(b)
+    end
+  end
+end

From 291e25319924e12bde328c67805ebdc786aa9b30 Mon Sep 17 00:00:00 2001
From: Vishal Sadriya <vishalsadriya.tps@gmail.com>
Date: Tue, 12 May 2026 15:31:54 +0530
Subject: [PATCH 2/7] chore: phase 6 cleanup + bump to 2.0.0

- Delete BasePresenter, StatsPresenter, HtmlGenerator, StylesheetGenerator
  (~2,750 LOC of legacy HTML-in-Ruby removed)
- Remove BaseController#render_page (replaced by Rails implicit rendering)
- Upgrade CSP spec with no-inline-style-block / no-inline-script-block assertions
- Bump VERSION to 2.0.0
- Add CHANGELOG entry for [2.0.0] - 2026-05-12
- Refine job_details + jobs helpers and 3 job partials
---
 CHANGELOG.md                                  |   21 +
 Gemfile.lock                                  |    2 +-
 .../solid_queue_monitor/base_controller.rb    |   29 -
 .../solid_queue_monitor/job_details_helper.rb |   20 +-
 .../solid_queue_monitor/jobs_helper.rb        |   48 +-
 .../solid_queue_monitor/base_presenter.rb     |  213 --
 .../solid_queue_monitor/stats_presenter.rb    |   36 -
 .../solid_queue_monitor/html_generator.rb     |  427 ----
 .../stylesheet_generator.rb                   | 2080 -----------------
 .../solid_queue_monitor/jobs/_header.html.erb |    3 +-
 .../jobs/_timeline.html.erb                   |    7 +-
 .../solid_queue_monitor/jobs/_timing.html.erb |    2 +-
 lib/solid_queue_monitor/version.rb            |    2 +-
 .../stats_presenter_spec.rb                   |   43 -
 .../csp_compatibility_spec.rb                 |   44 +-
 .../html_generator_spec.rb                    |   56 -
 16 files changed, 110 insertions(+), 2923 deletions(-)
 delete mode 100644 app/presenters/solid_queue_monitor/base_presenter.rb
 delete mode 100644 app/presenters/solid_queue_monitor/stats_presenter.rb
 delete mode 100644 app/services/solid_queue_monitor/html_generator.rb
 delete mode 100644 app/services/solid_queue_monitor/stylesheet_generator.rb
 delete mode 100644 spec/presenters/solid_queue_monitor/stats_presenter_spec.rb
 delete mode 100644 spec/services/solid_queue_monitor/html_generator_spec.rb

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0315a3e..5e6be7e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,26 @@
 # Changelog
 
+## [2.0.0] - 2026-05-12
+
+### Changed
+
+- **Major architectural refactor**: the dashboard now renders via standard Rails ERB views, helpers, and partials instead of Ruby presenters emitting HTML strings. Configuration, mount point, URLs, HTTP Basic auth, and CSP nonce support are unchanged.
+- CSS and JavaScript are now served as external assets via a new `AssetsController` with content-hashed URLs and `Cache-Control: immutable`. No Sprockets or Propshaft dependency is required, so Rails API-only host applications keep working as in v1.x.
+- Dashboard pages now work under a strict `script-src 'self'; style-src 'self'` Content Security Policy without requiring host-app nonce configuration. Nonce-on-link-tag behavior is preserved for hosts running nonce-only CSPs.
+- Runtime configuration such as auto-refresh interval, auto-refresh enabled state, and theme preference is now passed via `<body data-*>` attributes instead of inline JavaScript interpolation.
+
+### Removed
+
+- `SolidQueueMonitor::HtmlGenerator`, `StylesheetGenerator`, `ChartPresenter`, `BasePresenter`, and all `*Presenter` classes. These were internal and not documented as public API. Users who reached into them via monkey patches will need to migrate to view/helper overrides.
+- `SolidQueueMonitor::BaseController#render_page` now that Rails implicit rendering handles all pages.
+- The brief inline `<script>` that prevented dark-mode first-paint flash has been removed in favor of zero inline scripts. Users with a dark system preference may see a short light flash on the first page load; subsequent loads use the cached localStorage value.
+
+### Migration
+
+For most users, `bundle update solid_queue_monitor` is sufficient. The dashboard looks and behaves identically. Configuration options, routes, authentication, and CSP nonce support are unchanged.
+
+If you customized the UI by monkey-patching a presenter, migrate that customization to view/helper overrides. Open an issue at https://github.com/vishaltps/solid_queue_monitor/issues if you need guidance.
+
 ## [1.3.0] - 2026-04-16
 
 ### Added
diff --git a/Gemfile.lock b/Gemfile.lock
index da57ff9..40fb3bc 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    solid_queue_monitor (1.3.0)
+    solid_queue_monitor (2.0.0)
       rails (>= 7.0)
       solid_queue (>= 0.1.0)
 
diff --git a/app/controllers/solid_queue_monitor/base_controller.rb b/app/controllers/solid_queue_monitor/base_controller.rb
index e122422..eb2f9f5 100644
--- a/app/controllers/solid_queue_monitor/base_controller.rb
+++ b/app/controllers/solid_queue_monitor/base_controller.rb
@@ -6,35 +6,6 @@ def paginate(relation)
       PaginationService.new(relation, current_page, per_page).paginate
     end
 
-    def render_page(title, content, search_query: nil)
-      # Get flash message from instance variable (set by set_flash_message) or session
-      message = @flash_message
-      message_type = @flash_type
-
-      # Try to get from session as fallback, but don't fail if session unavailable
-      begin
-        message ||= session[:flash_message]
-        message_type ||= session[:flash_type]
-
-        # Clear the flash message from session after using it
-        session.delete(:flash_message) if message
-        session.delete(:flash_type) if message_type
-      rescue StandardError
-        # Session not available (e.g., no session middleware in tests)
-      end
-
-      html = SolidQueueMonitor::HtmlGenerator.new(
-        title: title,
-        content: content,
-        message: message,
-        message_type: message_type,
-        search_query: search_query,
-        nonce: content_security_policy_nonce
-      ).generate
-
-      render html: html.html_safe
-    end
-
     def current_page
       (params[:page] || 1).to_i
     end
diff --git a/app/helpers/solid_queue_monitor/job_details_helper.rb b/app/helpers/solid_queue_monitor/job_details_helper.rb
index 2f14650..2604219 100644
--- a/app/helpers/solid_queue_monitor/job_details_helper.rb
+++ b/app/helpers/solid_queue_monitor/job_details_helper.rb
@@ -2,11 +2,11 @@
 
 module SolidQueueMonitor
   module JobDetailsHelper
-    def detail_job_status
-      return :failed if @failed_execution
-      return :in_progress if @claimed_execution
-      return :scheduled if @scheduled_execution || @job.scheduled_at&.future?
-      return :completed if @job.finished_at
+    def detail_job_status(job:, failed_execution:, claimed_execution:, scheduled_execution:)
+      return :failed if failed_execution
+      return :in_progress if claimed_execution
+      return :scheduled if scheduled_execution || job.scheduled_at&.future?
+      return :completed if job.finished_at
 
       :pending
     end
@@ -34,11 +34,11 @@ def detail_duration(seconds)
       "#{(seconds / 3600).floor}h #{((seconds % 3600) / 60).floor}m"
     end
 
-    def detail_timing
-      created_at = @job.created_at
-      started_at = @claimed_execution&.created_at
-      finished_at = @job.finished_at
-      failed_at = @failed_execution&.created_at
+    def detail_timing(job:, claimed_execution:, failed_execution:)
+      created_at = job.created_at
+      started_at = claimed_execution&.created_at
+      finished_at = job.finished_at
+      failed_at = failed_execution&.created_at
       end_time = finished_at || failed_at
 
       {
diff --git a/app/helpers/solid_queue_monitor/jobs_helper.rb b/app/helpers/solid_queue_monitor/jobs_helper.rb
index ba45b54..51ec7e3 100644
--- a/app/helpers/solid_queue_monitor/jobs_helper.rb
+++ b/app/helpers/solid_queue_monitor/jobs_helper.rb
@@ -32,19 +32,7 @@ def job_status_badge(job)
     end
 
     def mini_job_status_badge(job)
-      status = if job.respond_to?(:failed_execution) && job.failed_execution.present?
-                 :failed
-               elsif job.respond_to?(:claimed_execution) && job.claimed_execution.present?
-                 :in_progress
-               elsif job.respond_to?(:scheduled_execution) && job.scheduled_execution.present?
-                 :scheduled
-               elsif job.respond_to?(:ready_execution) && job.ready_execution.present?
-                 :ready
-               elsif job.finished_at
-                 :completed
-               else
-                 :pending
-               end
+      status = mini_job_status(job)
 
       labels = {
         failed: 'Failed',
@@ -67,17 +55,39 @@ def parsed_failed_error(error)
 
       error_hash = deserialize_failed_error(error)
       {
-        type: error_hash['exception_class'] || error_hash[:exception_class] ||
-          error_hash['error_class'] || error_hash[:error_class] ||
-          error_hash['class'] || error_hash[:class] || 'Error',
-        message: error_hash['message'] || error_hash[:message] ||
-          error_hash['error'] || error_hash[:error] || 'Unknown error',
-        backtrace: Array(error_hash['backtrace'] || error_hash[:backtrace] || error_hash['stack_trace'] || error_hash[:stack_trace])
+        type: failed_error_type(error_hash),
+        message: failed_error_text(error_hash),
+        backtrace: failed_error_backtrace(error_hash)
       }
     end
 
     private
 
+    def mini_job_status(job)
+      return :failed if job.respond_to?(:failed_execution) && job.failed_execution.present?
+      return :in_progress if job.respond_to?(:claimed_execution) && job.claimed_execution.present?
+      return :scheduled if job.respond_to?(:scheduled_execution) && job.scheduled_execution.present?
+      return :ready if job.respond_to?(:ready_execution) && job.ready_execution.present?
+      return :completed if job.finished_at
+
+      :pending
+    end
+
+    def failed_error_type(error_hash)
+      error_hash['exception_class'] || error_hash[:exception_class] ||
+        error_hash['error_class'] || error_hash[:error_class] ||
+        error_hash['class'] || error_hash[:class] || 'Error'
+    end
+
+    def failed_error_text(error_hash)
+      error_hash['message'] || error_hash[:message] ||
+        error_hash['error'] || error_hash[:error] || 'Unknown error'
+    end
+
+    def failed_error_backtrace(error_hash)
+      Array(error_hash['backtrace'] || error_hash[:backtrace] || error_hash['stack_trace'] || error_hash[:stack_trace])
+    end
+
     def deserialize_failed_error(error)
       return error if error.is_a?(Hash)
       return { 'message' => error.to_s } unless error.is_a?(String)
diff --git a/app/presenters/solid_queue_monitor/base_presenter.rb b/app/presenters/solid_queue_monitor/base_presenter.rb
deleted file mode 100644
index 60567ea..0000000
--- a/app/presenters/solid_queue_monitor/base_presenter.rb
+++ /dev/null
@@ -1,213 +0,0 @@
-# frozen_string_literal: true
-
-module SolidQueueMonitor
-  class BasePresenter
-    include ActionView::Helpers::DateHelper
-    include ActionView::Helpers::TextHelper
-    include Rails.application.routes.url_helpers
-    include SolidQueueMonitor::Engine.routes.url_helpers
-
-    def default_url_options
-      { only_path: true }
-    end
-
-    def section_wrapper(_title, content)
-      <<-HTML
-        <div class="section-wrapper">
-          <div class="section">
-            #{content}
-          </div>
-        </div>
-      HTML
-    end
-
-    def generate_pagination(current_page, total_pages)
-      return '' if total_pages <= 1
-
-      html = '<div class="pagination">'
-
-      # Previous page link
-      html += if current_page > 1
-                "<a href=\"?page=#{current_page - 1}#{query_params}\" class=\"pagination-link pagination-nav\">Previous</a>"
-              else
-                '<span class="pagination-link pagination-nav disabled">Previous</span>'
-              end
-
-      # Page links
-      visible_pages = calculate_visible_pages(current_page, total_pages)
-
-      visible_pages.each do |page|
-        html += if page == :gap
-                  '<span class="pagination-gap">...</span>'
-                elsif page == current_page
-                  "<span class=\"pagination-current\">#{page}</span>"
-                else
-                  "<a href=\"?page=#{page}#{query_params}\" class=\"pagination-link\">#{page}</a>"
-                end
-      end
-
-      # Next page link
-      html += if current_page < total_pages
-                "<a href=\"?page=#{current_page + 1}#{query_params}\" class=\"pagination-link pagination-nav\">Next</a>"
-              else
-                '<span class="pagination-link pagination-nav disabled">Next</span>'
-              end
-
-      html += '</div>'
-      html
-    end
-
-    def calculate_visible_pages(current_page, total_pages)
-      # Logic moved to SolidQueueMonitor::PaginationHelper for ERB-rendered pages.
-      # Kept here while presenter-rendered pages are migrated.
-      if total_pages <= 7
-        (1..total_pages).to_a
-      else
-        case current_page
-        when 1..3
-          [1, 2, 3, 4, :gap, total_pages]
-        when (total_pages - 2)..total_pages
-          [1, :gap, total_pages - 3, total_pages - 2, total_pages - 1, total_pages]
-        else
-          [1, :gap, current_page - 1, current_page, current_page + 1, :gap, total_pages]
-        end
-      end
-    end
-
-    def format_datetime(datetime)
-      return '-' unless datetime
-
-      datetime.strftime('%Y-%m-%d %H:%M:%S')
-    end
-
-    def format_arguments(arguments)
-      return '-' if arguments.blank?
-
-      # Extract and format the arguments more cleanly
-      formatted_args = if arguments.is_a?(Hash) && arguments['arguments'].present?
-                         format_job_arguments(arguments)
-                       elsif arguments.is_a?(Array) && arguments.length == 1 && arguments[0].is_a?(Hash) && arguments[0]['arguments'].present?
-                         format_job_arguments(arguments[0])
-                       else
-                         arguments.inspect
-                       end
-
-      if formatted_args.length <= 50
-        "<code class='args-single-line'>#{formatted_args}</code>"
-      else
-        <<-HTML
-          <div class="args-container">
-            <code class="args-content">#{formatted_args}</code>
-          </div>
-        HTML
-      end
-    end
-
-    def format_hash(hash)
-      return '-' if hash.blank?
-
-      formatted = hash.map do |key, value|
-        "<strong>#{key}:</strong> #{value.to_s.truncate(50)}"
-      end.join(', ')
-
-      "<code>#{formatted}</code>"
-    end
-
-    def queue_link(queue_name, css_class: nil)
-      return '-' if queue_name.blank?
-
-      classes = ['queue-link', css_class].compact.join(' ')
-      "<a href=\"#{queue_details_path(queue_name: queue_name)}\" class=\"#{classes}\">#{queue_name}</a>"
-    end
-
-    def sortable_header(column, label)
-      return "<th>#{label}</th>" unless @sort
-
-      column_str = column.to_s
-      is_active = @sort[:sort_by] == column_str
-      next_direction = is_active && @sort[:sort_direction] == 'asc' ? 'desc' : 'asc'
-      arrow = sort_arrow(is_active)
-      css_class = is_active ? 'sortable-header active' : 'sortable-header'
-
-      "<th><a href=\"?sort_by=#{column}&sort_direction=#{next_direction}#{filter_query_string}\" class=\"#{css_class}\">#{label}#{arrow}</a></th>"
-    end
-
-    def sort_arrow(is_active)
-      return ' &udarr;' unless is_active
-
-      @sort[:sort_direction] == 'asc' ? ' &uarr;' : ' &darr;'
-    end
-
-    def filter_query_string
-      params = []
-      params << "class_name=#{@filters[:class_name]}" if @filters && @filters[:class_name].present?
-      params << "queue_name=#{@filters[:queue_name]}" if @filters && @filters[:queue_name].present?
-      params << "arguments=#{@filters[:arguments]}" if @filters && @filters[:arguments].present?
-      params << "status=#{@filters[:status]}" if @filters && @filters[:status].present?
-
-      params.empty? ? '' : "&#{params.join('&')}"
-    end
-
-    def request_path
-      if defined?(controller) && controller.respond_to?(:request)
-        controller.request.path
-      else
-        '/solid_queue'
-      end
-    end
-
-    def engine_mount_point
-      path_parts = request_path.split('/')
-      if path_parts.length >= 3
-        "/#{path_parts[1]}/#{path_parts[2]}"
-      else
-        '/solid_queue'
-      end
-    end
-
-    private
-
-    def query_params
-      params = build_filter_params + build_sort_params
-      params.empty? ? '' : "&#{params.join('&')}"
-    end
-
-    def build_filter_params
-      return [] unless @filters
-
-      filter_keys = %i[class_name queue_name status]
-      filter_keys.filter_map do |key|
-        "#{key}=#{@filters[key]}" if @filters[key].present?
-      end
-    end
-
-    def build_sort_params
-      return [] unless @sort
-
-      sort_keys = %i[sort_by sort_direction]
-      sort_keys.filter_map do |key|
-        "#{key}=#{@sort[key]}" if @sort[key].present?
-      end
-    end
-
-    def full_path(route_name, *args)
-      SolidQueueMonitor::Engine.routes.url_helpers.send(route_name, *args)
-    rescue NoMethodError
-      Rails.application.routes.url_helpers.send("solid_queue_#{route_name}", *args)
-    end
-
-    def format_job_arguments(job_data)
-      args = if job_data['arguments'].is_a?(Array)
-               if job_data['arguments'].first.is_a?(Hash) && job_data['arguments'].first['_aj_ruby2_keywords'].present?
-                 job_data['arguments'].first.except('_aj_ruby2_keywords')
-               else
-                 job_data['arguments']
-               end
-             else
-               job_data['arguments']
-             end
-
-      args.inspect
-    end
-  end
-end
diff --git a/app/presenters/solid_queue_monitor/stats_presenter.rb b/app/presenters/solid_queue_monitor/stats_presenter.rb
deleted file mode 100644
index 9c46002..0000000
--- a/app/presenters/solid_queue_monitor/stats_presenter.rb
+++ /dev/null
@@ -1,36 +0,0 @@
-# frozen_string_literal: true
-
-module SolidQueueMonitor
-  class StatsPresenter < BasePresenter
-    def initialize(stats)
-      @stats = stats
-    end
-
-    def render
-      <<-HTML
-        <div class="stats-container">
-          <h3>Queue Statistics</h3>
-          <div class="stats">
-            #{generate_stat_card('Active Jobs', @stats[:active_jobs])}
-            #{generate_stat_card('Ready', @stats[:ready])}
-            #{generate_stat_card('In Progress', @stats[:in_progress])}
-            #{generate_stat_card('Scheduled', @stats[:scheduled])}
-            #{generate_stat_card('Recurring', @stats[:recurring])}
-            #{generate_stat_card('Failed', @stats[:failed])}
-          </div>
-        </div>
-      HTML
-    end
-
-    private
-
-    def generate_stat_card(title, value)
-      <<-HTML
-        <div class="stat-card">
-          <h3>#{title}</h3>
-          <p>#{value}</p>
-        </div>
-      HTML
-    end
-  end
-end
diff --git a/app/services/solid_queue_monitor/html_generator.rb b/app/services/solid_queue_monitor/html_generator.rb
deleted file mode 100644
index 1ff15aa..0000000
--- a/app/services/solid_queue_monitor/html_generator.rb
+++ /dev/null
@@ -1,427 +0,0 @@
-# frozen_string_literal: true
-
-module SolidQueueMonitor
-  class HtmlGenerator
-    include Rails.application.routes.url_helpers
-    include SolidQueueMonitor::Engine.routes.url_helpers
-
-    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
-      <<-HTML
-        <!DOCTYPE html>
-        <html>
-          <head>
-            <title>Solid Queue Monitor - #{@title}</title>
-            #{generate_head}
-          </head>
-          <body class="solid_queue_monitor">
-            #{generate_body}
-          </body>
-        </html>
-      HTML
-    end
-
-    private
-
-    def generate_head
-      <<-HTML
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        #{style_tag_open}
-          #{SolidQueueMonitor::StylesheetGenerator.new.generate}
-        </style>
-      HTML
-    end
-
-    def generate_body
-      <<-HTML
-        #{render_message}
-        <div class="container">
-          #{generate_header}
-          <div class="section">
-            <h2>#{@title}</h2>
-            #{@content}
-          </div>
-          #{generate_footer}
-        </div>
-        #{generate_auto_refresh_script}
-        #{generate_chart_script}
-      HTML
-    end
-
-    def render_message
-      return '' unless @message
-
-      class_name = @message_type == 'success' ? 'message-success' : 'message-error'
-      <<-HTML
-        <div id="flash-message" class="message #{class_name}">#{@message}</div>
-        #{script_tag_open}
-          document.addEventListener('DOMContentLoaded', function() {
-            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
-    end
-
-    def generate_header
-      nav_items = [
-        { path: root_path, label: 'Overview', match: 'Overview' },
-        { path: ready_jobs_path, label: 'Ready Jobs', match: 'Ready Jobs' },
-        { path: in_progress_jobs_path, label: 'In Progress Jobs', match: 'In Progress' },
-        { path: scheduled_jobs_path, label: 'Scheduled Jobs', match: 'Scheduled Jobs' },
-        { path: recurring_jobs_path, label: 'Recurring Jobs', match: 'Recurring Jobs' },
-        { path: failed_jobs_path, label: 'Failed Jobs', match: 'Failed Jobs' },
-        { path: queues_path, label: 'Queues', match: 'Queues' },
-        { path: workers_path, label: 'Workers', match: 'Workers' }
-      ]
-
-      nav_links = nav_items.map do |item|
-        active_class = @title&.include?(item[:match]) ? 'active' : ''
-        "<a href=\"#{item[:path]}\" class=\"nav-link #{active_class}\">#{item[:label]}</a>"
-      end.join("\n            ")
-
-      <<-HTML
-        <header>
-          <div class="header-top">
-            <h1><a href="#{root_path}" class="header-title-link">Solid Queue Monitor</a></h1>
-            #{generate_search_box}
-            <div class="header-controls">
-              #{generate_auto_refresh_controls}
-              #{generate_theme_toggle}
-            </div>
-          </div>
-          <nav class="navigation">
-            #{nav_links}
-          </nav>
-        </header>
-      HTML
-    end
-
-    def generate_footer
-      <<-HTML
-        <footer>
-          <p>Powered by Solid Queue Monitor</p>
-        </footer>
-      HTML
-    end
-
-    def generate_search_box
-      search_value = @search_query ? escape_html(@search_query) : ''
-      <<-HTML
-        <form method="get" action="#{search_path}" class="header-search-form">
-          <input type="text" name="q" value="#{search_value}" placeholder="Search by class, queue, job ID, or error..." class="header-search-input">
-          <button type="submit" class="header-search-button" title="Search">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <circle cx="11" cy="11" r="8"></circle>
-              <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-            </svg>
-          </button>
-        </form>
-      HTML
-    end
-
-    def escape_html(text)
-      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
-
-      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_theme_toggle
-      <<-HTML
-        <button class="theme-toggle-btn" id="theme-toggle-btn" title="Toggle dark mode">
-          <svg class="theme-icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <circle cx="12" cy="12" r="5"></circle>
-            <line x1="12" y1="1" x2="12" y2="3"></line>
-            <line x1="12" y1="21" x2="12" y2="23"></line>
-            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
-            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
-            <line x1="1" y1="12" x2="3" y2="12"></line>
-            <line x1="21" y1="12" x2="23" y2="12"></line>
-            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
-            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
-          </svg>
-          <svg class="theme-icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
-          </svg>
-        </button>
-      HTML
-    end
-
-    def generate_auto_refresh_script
-      return '' unless SolidQueueMonitor.auto_refresh_enabled
-
-      "#{script_tag_open}#{auto_refresh_javascript}</script>"
-    end
-
-    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
-
-    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
-
-    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.classList.toggle('countdown-paused', !isEnabled);
-          }
-        }
-        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
-
-    def auto_refresh_event_listeners
-      <<-JS
-        if (toggle) { toggle.addEventListener('change', function() { setEnabled(this.checked); }); }
-        if (refreshBtn) { refreshBtn.addEventListener('click', function() { refresh(); }); }
-      JS
-    end
-
-    def auto_refresh_init
-      <<-JS
-        updateUI();
-        if (isEnabled) { startTimer(); }
-      JS
-    end
-
-    def generate_chart_script
-      <<-HTML
-        #{script_tag_open}
-          #{theme_toggle_javascript}
-          #{chart_tooltip_javascript}
-          #{global_behaviors_javascript}
-        </script>
-      HTML
-    end
-
-    def theme_toggle_javascript
-      <<-JS
-        (function() {
-          var body = document.body;
-          var themeBtn = document.getElementById('theme-toggle-btn');
-          var storageKey = 'sqm_dark_theme';
-
-          // Check for saved preference or system preference
-          function getPreferredTheme() {
-            var saved = localStorage.getItem(storageKey);
-            if (saved !== null) {
-              return saved === 'true';
-            }
-            // Check system preference
-            return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-          }
-
-          function setTheme(isDark) {
-            if (isDark) {
-              body.classList.add('dark-theme');
-            } else {
-              body.classList.remove('dark-theme');
-            }
-            localStorage.setItem(storageKey, isDark ? 'true' : 'false');
-          }
-
-          // Initialize theme
-          setTheme(getPreferredTheme());
-
-          // Toggle on button click
-          if (themeBtn) {
-            themeBtn.addEventListener('click', function() {
-              var isDark = body.classList.contains('dark-theme');
-              setTheme(!isDark);
-            });
-          }
-
-          // Listen for system preference changes
-          if (window.matchMedia) {
-            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
-              // Only auto-switch if user hasn't manually set a preference
-              if (localStorage.getItem(storageKey) === null) {
-                setTheme(e.matches);
-              }
-            });
-          }
-        })();
-      JS
-    end
-
-    def chart_tooltip_javascript
-      <<-JS
-        (function() {
-          // Chart collapse/expand functionality
-          var chartSection = document.getElementById('chart-section');
-          var toggleBtn = document.getElementById('chart-toggle-btn');
-
-          if (chartSection && toggleBtn) {
-            var isCollapsed = localStorage.getItem('sqm_chart_collapsed') === 'true';
-
-            if (isCollapsed) {
-              chartSection.classList.add('collapsed');
-            }
-
-            toggleBtn.addEventListener('click', function() {
-              chartSection.classList.toggle('collapsed');
-              var collapsed = chartSection.classList.contains('collapsed');
-              localStorage.setItem('sqm_chart_collapsed', collapsed ? 'true' : 'false');
-            });
-          }
-
-          // Chart tooltip functionality
-          var tooltip = document.getElementById('chart-tooltip');
-          if (!tooltip) return;
-
-          var dataPoints = document.querySelectorAll('.data-point');
-          var seriesNames = { created: 'Created', completed: 'Completed', failed: 'Failed' };
-
-          dataPoints.forEach(function(point) {
-            point.addEventListener('mouseenter', function(e) {
-              var series = this.getAttribute('data-series');
-              var label = this.getAttribute('data-label');
-              var value = this.getAttribute('data-value');
-
-              tooltip.querySelector('.tooltip-label').textContent = label;
-              tooltip.querySelector('.tooltip-value').textContent = seriesNames[series] + ': ' + value;
-              tooltip.classList.add('tooltip-visible');
-              positionTooltip(e);
-            });
-
-            point.addEventListener('mousemove', function(e) {
-              positionTooltip(e);
-            });
-
-            point.addEventListener('mouseleave', function() {
-              tooltip.classList.remove('tooltip-visible');
-            });
-          });
-
-          function positionTooltip(e) {
-            var x = e.clientX + 10;
-            var y = e.clientY - 30;
-
-            if (x + tooltip.offsetWidth > window.innerWidth) {
-              x = e.clientX - tooltip.offsetWidth - 10;
-            }
-            if (y < 0) {
-              y = e.clientY + 10;
-            }
-
-            // Dynamic cursor-tracked position, not CSP-restricted.
-            tooltip.style.left = x + 'px';
-            tooltip.style.top = y + 'px';
-          }
-        })();
-      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
-  end
-end
diff --git a/app/services/solid_queue_monitor/stylesheet_generator.rb b/app/services/solid_queue_monitor/stylesheet_generator.rb
deleted file mode 100644
index 6de83b3..0000000
--- a/app/services/solid_queue_monitor/stylesheet_generator.rb
+++ /dev/null
@@ -1,2080 +0,0 @@
-# frozen_string_literal: true
-
-module SolidQueueMonitor
-  class StylesheetGenerator
-    def generate
-      <<-CSS
-        .solid_queue_monitor {
-          --primary-color: #3b82f6;
-          --success-color: #10b981;
-          --error-color: #ef4444;
-          --warning-color: #f59e0b;
-          --text-color: #1f2937;
-          --text-muted: #6b7280;
-          --border-color: #e5e7eb;
-          --background-color: #f9fafb;
-          --card-background: #ffffff;
-          --card-shadow: 0 1px 3px rgba(0,0,0,0.1);
-          --input-background: #ffffff;
-          --input-border: #d1d5db;
-          --hover-background: #f3f4f6;
-          --code-background: #f5f5f5;
-        }
-
-        /* Dark theme */
-        .solid_queue_monitor.dark-theme {
-          --primary-color: #60a5fa;
-          --success-color: #34d399;
-          --error-color: #f87171;
-          --warning-color: #fbbf24;
-          --text-color: #f9fafb;
-          --text-muted: #9ca3af;
-          --border-color: #2d2d2d;
-          --background-color: #000000;
-          --card-background: #121212;
-          --card-shadow: 0 1px 3px rgba(0,0,0,0.5);
-          --input-background: #1e1e1e;
-          --input-border: #3d3d3d;
-          --hover-background: #1e1e1e;
-          --code-background: #1e1e1e;
-        }
-
-        .solid_queue_monitor * { box-sizing: border-box; margin: 0; padding: 0; }
-
-        .solid_queue_monitor {
-          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-          line-height: 1.5;
-          color: var(--text-color);
-          background: var(--background-color);
-        }
-
-        .solid_queue_monitor .container {
-          width: 95%;
-          max-width: 1800px;
-          margin: 0 auto;
-          padding: 2rem;
-        }
-
-        .solid_queue_monitor header {
-          margin-bottom: 2rem;
-          text-align: center;
-        }
-
-        .solid_queue_monitor h1 {
-          font-size: 2rem;
-          font-weight: 600;
-          margin-bottom: 0.5rem;
-        }
-
-        .solid_queue_monitor .header-title-link {
-          color: var(--text-color);
-          text-decoration: none;
-          transition: color 0.2s;
-        }
-
-        .solid_queue_monitor .header-title-link:hover {
-          color: var(--primary-color);
-        }
-
-        .solid_queue_monitor .navigation {
-          display: flex;
-          flex-wrap: wrap;
-          justify-content: center;
-          gap: 0.5rem;
-          padding: 0.5rem;
-        }
-
-        .solid_queue_monitor .nav-link {
-          text-decoration: none;
-          color: var(--text-color);
-          padding: 0.5rem 1rem;
-          border-radius: 0.375rem;
-          background: var(--card-background);
-          box-shadow: var(--card-shadow);
-          transition: all 0.2s;
-        }
-
-        .solid_queue_monitor .nav-link:hover {
-          background: var(--primary-color);
-          color: white;
-        }
-
-        .solid_queue_monitor .section-wrapper {
-          margin-top: 2rem;
-        }
-
-
-        .solid_queue_monitor .section h2 {
-          padding: 1rem;
-          border-bottom: 1px solid var(--border-color);
-          font-size: 1.25rem;
-          background: var(--background-color);
-        }
-
-        .solid_queue_monitor .section-header-row {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin-bottom: 1.5rem;
-          padding: 1rem;
-          background: var(--card-background);
-          border-radius: 0.5rem;
-          box-shadow: var(--card-shadow);
-        }
-
-        .solid_queue_monitor .section-header-left {
-          display: flex;
-          align-items: center;
-          gap: 1rem;
-        }
-
-        .solid_queue_monitor .section-header-right {
-          display: flex;
-          align-items: center;
-          gap: 0.5rem;
-        }
-
-        .solid_queue_monitor .stats-container {
-          margin-bottom: 2rem;
-        }
-
-        .solid_queue_monitor .stats {
-          display: flex;
-          flex-direction: row;
-          flex-wrap: wrap;
-          gap: 1rem;
-          margin: 0 -0.5rem;
-        }
-
-        .solid_queue_monitor .stat-card {
-          flex: 1 1 0;
-          min-width: 150px;
-          background: var(--card-background);
-          padding: 1.5rem 1rem;
-          border-radius: 0.5rem;
-          box-shadow: var(--card-shadow);
-          text-align: center;
-        }
-
-        .solid_queue_monitor .stat-card h3 {
-          color: var(--text-muted);
-          font-size: 0.875rem;
-          text-transform: uppercase;
-          letter-spacing: 0.05em;
-          margin-bottom: 0.5rem;
-        }
-
-        .solid_queue_monitor .stat-card p {
-          font-size: 1.5rem;
-          font-weight: 600;
-          color: var(--primary-color);
-        }
-
-        .solid_queue_monitor .section h2 {
-          padding: 1rem;
-          border-bottom: 1px solid var(--border-color);
-          font-size: 1.25rem;
-        }
-
-        .solid_queue_monitor .table-container {
-          width: 100%;
-          overflow-x: auto;
-          -webkit-overflow-scrolling: touch;
-        }
-
-        .solid_queue_monitor table {
-          width: 100%;
-          min-width: 800px; /* Ensures table doesn't get too squeezed */
-          border-collapse: collapse;
-          white-space: nowrap;
-        }
-
-        .solid_queue_monitor th,#{' '}
-        .solid_queue_monitor td {
-          padding: 0.75rem 1rem;
-          text-align: left;
-          border-bottom: 1px solid var(--border-color);
-        }
-
-        .solid_queue_monitor th {
-          background: var(--hover-background);
-          font-weight: 500;
-          font-size: 0.875rem;
-          text-transform: uppercase;
-          letter-spacing: 0.05em;
-          color: var(--text-muted);
-        }
-
-        .solid_queue_monitor .sortable-header {
-          color: var(--text-muted);
-          text-decoration: none;
-          cursor: pointer;
-          transition: color 0.2s;
-        }
-
-        .solid_queue_monitor .sortable-header:hover {
-          color: var(--primary-color);
-        }
-
-        .solid_queue_monitor .sortable-header.active {
-          color: var(--primary-color);
-          font-weight: 600;
-        }
-
-        .solid_queue_monitor .status-badge {
-          display: inline-block;
-          padding: 0.25rem 0.5rem;
-          border-radius: 9999px;
-          font-size: 0.75rem;
-          font-weight: 500;
-        }
-
-        .solid_queue_monitor .table-actions {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          padding: 1rem;
-          border-top: 1px solid var(--border-color);
-        }
-
-        .solid_queue_monitor .select-all {
-          display: flex;
-          align-items: center;
-          gap: 0.5rem;
-          cursor: pointer;
-        }
-
-        .solid_queue_monitor .execute-btn:disabled {
-          opacity: 0.5;
-          cursor: not-allowed;
-        }
-
-        .solid_queue_monitor input[type="checkbox"] {
-          width: 1rem;
-          height: 1rem;
-          cursor: pointer;
-        }
-
-        .solid_queue_monitor .status-completed { background: #d1fae5; color: #065f46; }
-        .solid_queue_monitor .status-failed { background: #fee2e2; color: #991b1b; }
-        .solid_queue_monitor .status-scheduled { background: #dbeafe; color: #1e40af; }
-        .solid_queue_monitor .status-pending { background: #f3f4f6; color: #374151; }
-        .solid_queue_monitor .status-active { background: #d1fae5; color: #065f46; }
-        .solid_queue_monitor .status-paused { background: #fef3c7; color: #92400e; }
-
-        .solid_queue_monitor .queue-paused {
-          background-color: #fffbeb;
-        }
-
-        .solid_queue_monitor .pause-button {
-          background: #f59e0b;
-          color: white;
-        }
-
-        .solid_queue_monitor .pause-button:hover {
-          background: #d97706;
-        }
-
-        .solid_queue_monitor .resume-button {
-          background: #10b981;
-          color: white;
-        }
-
-        .solid_queue_monitor .resume-button:hover {
-          background: #059669;
-        }
-
-        .solid_queue_monitor .execute-btn {
-          background: var(--primary-color);
-          color: white;
-          border: none;
-          padding: 0.5rem 1rem;
-          border-radius: 0.375rem;
-          font-size: 0.875rem;
-          cursor: pointer;
-          transition: background-color 0.2s;
-        }
-
-        .solid_queue_monitor .execute-btn:hover {
-          background: #2563eb;
-        }
-
-        .solid_queue_monitor .message {
-          padding: 1rem;
-          margin-bottom: 1rem;
-          border-radius: 0.375rem;
-          transition: opacity 0.5s ease-in-out;
-        }
-
-        .solid_queue_monitor .message-success {
-          background: #d1fae5;
-          color: #065f46;
-        }
-
-        .solid_queue_monitor .message-error {
-          background: #fee2e2;
-          color: #991b1b;
-        }
-
-        .solid_queue_monitor footer {
-          text-align: center;
-          padding: 2rem 0;
-          color: var(--text-muted);
-        }
-
-        .solid_queue_monitor .pagination {
-          display: flex;
-          justify-content: center;
-          gap: 0.5rem;
-          margin-top: 1rem;
-          padding: 1rem;
-        }
-
-        .solid_queue_monitor .pagination-nav {
-          padding: 0.5rem 1rem;
-          font-size: 0.875rem;
-        }
-      #{'  '}
-        .solid_queue_monitor .pagination-gap {
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          min-width: 2rem;
-          height: 2rem;
-          padding: 0 0.5rem;
-          color: var(--text-color);
-        }
-
-        .solid_queue_monitor .pagination-link.disabled {
-          opacity: 0.5;
-          cursor: not-allowed;
-          pointer-events: none;
-        }
-
-        .solid_queue_monitor .pagination-link,
-        .solid_queue_monitor .pagination-current {
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          min-width: 2rem;
-          height: 2rem;
-          padding: 0 0.5rem;
-          border-radius: 0.375rem;
-          font-size: 0.875rem;
-          text-decoration: none;
-          transition: all 0.2s;
-        }
-
-        .solid_queue_monitor .pagination-link {
-          background: var(--card-background);
-          color: var(--text-color);
-          border: 1px solid var(--border-color);
-        }
-
-        .solid_queue_monitor .pagination-link:hover {
-          background: var(--primary-color);
-          color: white;
-          border-color: var(--primary-color);
-        }
-
-        .solid_queue_monitor .pagination-current {
-          background: var(--primary-color);
-          color: white;
-          font-weight: 500;
-        }
-
-        /* Arguments styling */
-        .solid_queue_monitor .args-container {
-          position: relative;
-          max-height: 100px;
-          overflow: hidden;
-        }
-
-        .solid_queue_monitor .args-content {
-          display: block;
-          white-space: pre-wrap;
-          word-break: break-word;
-          max-height: 100px;
-          overflow-y: auto;
-          padding: 8px;
-          background: var(--code-background);
-          border-radius: 4px;
-          font-size: 0.9em;
-        }
-
-        .solid_queue_monitor .args-single-line {
-          display: inline-block;
-          padding: 4px 8px;
-          background: var(--code-background);
-          border-radius: 4px;
-          font-size: 0.9em;
-        }
-
-        .solid_queue_monitor .args-content::-webkit-scrollbar {
-          width: 8px;
-        }
-
-        .solid_queue_monitor .args-content::-webkit-scrollbar-track {
-          background: #f1f1f1;
-          border-radius: 4px;
-        }
-
-        .solid_queue_monitor .args-content::-webkit-scrollbar-thumb {
-          background: #888;
-          border-radius: 4px;
-        }
-
-        .solid_queue_monitor .args-content::-webkit-scrollbar-thumb:hover {
-          background: #666;
-        }
-
-      @media (max-width: 768px) {
-        .solid_queue_monitor .container {
-          padding: 0.5rem;
-        }
-
-        .solid_queue_monitor .stats {
-          margin: 0;
-        }
-
-        .solid_queue_monitor .stat-card {
-          flex: 1 1 calc(33.333% - 1rem);
-          min-width: 120px;
-        }
-
-        .solid_queue_monitor .section {
-          margin: 0.5rem 0;
-          border-radius: 0.375rem;
-        }
-
-        .solid_queue_monitor .table-container {
-          width: 100%;
-          overflow-x: auto;
-        }
-      }
-
-      @media (max-width: 480px) {
-        .solid_queue_monitor .stat-card {
-          flex: 1 1 calc(50% - 1rem);
-        }
-
-        .solid_queue_monitor .nav-link {
-          width: 100%;
-          text-align: center;
-        }
-        .solid_queue_monitor .pagination-nav {
-          display: none;
-        }
-      }
-
-      .solid_queue_monitor .filter-and-actions-container {
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-        gap: 1rem;
-        margin-bottom: 1rem;
-      }
-
-      .solid_queue_monitor .filter-form-container {
-        background: var(--card-background);
-        padding: 1rem;
-        border-radius: 0.5rem;
-        box-shadow: var(--card-shadow);
-        flex: 3;
-      }
-
-      .solid_queue_monitor .bulk-actions-container {
-        display: flex;
-        flex-direction: row;
-        gap: 0.75rem;
-        padding: 1rem;
-        background: var(--card-background);
-        border-radius: 0.5rem;
-        box-shadow: var(--card-shadow);
-        flex: 2;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .solid_queue_monitor .large-button {
-        padding: 0.75rem 1.25rem;
-        font-size: 0.9rem;
-        text-align: center;
-        flex: 1;
-      }
-
-      @media (max-width: 992px) {
-        .solid_queue_monitor .filter-and-actions-container {
-          flex-direction: column;
-        }
-      #{'  '}
-        .solid_queue_monitor .bulk-actions-container {
-          width: 100%;
-        }
-      }
-
-      .solid_queue_monitor .filter-form {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 1rem;
-        align-items: flex-end;
-      }
-
-      .solid_queue_monitor .filter-group {
-        flex: 1;
-        min-width: 200px;
-      }
-
-      .solid_queue_monitor .filter-group label {
-        display: block;
-        margin-bottom: 0.5rem;
-        font-size: 0.875rem;
-        font-weight: 500;
-        color: var(--text-muted);
-      }
-
-      .solid_queue_monitor .filter-group input,
-      .solid_queue_monitor .filter-group select {
-        width: 100%;
-        padding: 0.5rem;
-        border: 1px solid var(--input-border);
-        border-radius: 0.375rem;
-        font-size: 0.875rem;
-        background: var(--input-background);
-        color: var(--text-color);
-      }
-
-      .solid_queue_monitor .filter-actions {
-        display: flex;
-        gap: 0.5rem;
-      }
-
-      .solid_queue_monitor .filter-button {
-        background: var(--primary-color);
-        color: white;
-        border: none;
-        padding: 0.5rem 1rem;
-        border-radius: 0.375rem;
-        font-size: 0.875rem;
-        cursor: pointer;
-        transition: background-color 0.2s;
-      }
-
-      .solid_queue_monitor .filter-button:hover {
-        background: #2563eb;
-      }
-
-      .solid_queue_monitor .reset-button {
-        background: var(--hover-background);
-        color: var(--text-muted);
-        border: 1px solid var(--border-color);
-        padding: 0.5rem 1rem;
-        border-radius: 0.375rem;
-        font-size: 0.875rem;
-        text-decoration: none;
-        cursor: pointer;
-        transition: background-color 0.2s;
-      }
-
-      .solid_queue_monitor .reset-button:hover {
-        background: var(--border-color);
-      }
-
-      .solid_queue_monitor .action-button {
-        padding: 0.5rem 1rem;
-        border-radius: 0.375rem;
-        font-size: 0.75rem;
-        font-weight: 500;
-        cursor: pointer;
-        transition: background-color 0.2s;
-        border: none;
-        text-decoration: none;
-      }
-
-      .solid_queue_monitor .retry-button {
-        background: #3b82f6;
-        color: white;
-      }
-
-      .solid_queue_monitor .retry-button:hover {
-        background: #2563eb;
-      }
-
-      .solid_queue_monitor .discard-button {
-        background: #ef4444;
-        color: white;
-      }
-
-      .solid_queue_monitor .discard-button:hover {
-        background: #dc2626;
-      }
-
-      .solid_queue_monitor .action-button:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-
-      .solid_queue_monitor .inline-form {
-        display: inline-block;
-        margin-right: 0.5rem;
-      }
-
-      .solid_queue_monitor .actions-cell {
-        white-space: nowrap;
-      }
-
-      .solid_queue_monitor .bulk-actions {
-        display: flex;
-        gap: 0.5rem;
-      }
-
-      .solid_queue_monitor .error-message {
-        color: #dc2626;
-        font-weight: 500;
-        margin-bottom: 0.25rem;
-      }
-
-      .solid_queue_monitor .error-backtrace {
-        font-size: 0.75rem;
-        white-space: pre-wrap;
-        max-height: 200px;
-        overflow-y: auto;
-        background: var(--code-background);
-        padding: 0.5rem;
-        border-radius: 0.25rem;
-        margin-top: 0.5rem;
-      }
-
-      .solid_queue_monitor details {
-        margin-top: 0.25rem;
-      }
-
-      .solid_queue_monitor summary {
-        cursor: pointer;
-        color: var(--text-muted);
-        font-size: 0.75rem;
-      }
-
-      .solid_queue_monitor summary:hover {
-        color: var(--text-color);
-      }
-
-      .solid_queue_monitor .job-checkbox,
-      .solid_queue_monitor .select-all-checkbox {
-        width: 1rem;
-        height: 1rem;
-      }
-
-      .solid_queue_monitor .bulk-actions-bar {
-        display: flex;
-        gap: 0.75rem;
-        margin: 1rem 0;
-        background: var(--card-background);
-        padding: 0.75rem;
-        border-radius: 0.5rem;
-        box-shadow: var(--card-shadow);
-      }
-
-      .solid_queue_monitor .bulk-actions-bar .action-button {
-        padding: 0.6rem 1rem;
-        font-size: 0.875rem;
-      }
-
-      .solid_queue_monitor .execute-button {
-        background: var(--primary-color);
-        color: white;
-      }
-
-      .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: var(--card-background);
-        border-radius: 2rem;
-        box-shadow: var(--card-shadow);
-        font-size: 0.75rem;
-        color: var(--text-muted);
-        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: var(--border-color);
-        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: var(--border-color);
-        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: var(--card-background);
-        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: var(--text-muted);
-        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;
-        }
-      }
-
-      /* Navigation active state */
-      .solid_queue_monitor .nav-link.active {
-        background: var(--primary-color);
-        color: white;
-        border-left: 3px solid #1d4ed8;
-      }
-
-      /* Chart styles */
-      .solid_queue_monitor .chart-section {
-        background: var(--card-background);
-        border-radius: 0.5rem;
-        box-shadow: var(--card-shadow);
-        padding: 1rem 1.5rem;
-        margin-bottom: 2rem;
-      }
-
-      .solid_queue_monitor .chart-section.collapsed {
-        padding-bottom: 1rem;
-      }
-
-      .solid_queue_monitor .chart-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        flex-wrap: wrap;
-        gap: 0.75rem;
-      }
-
-      .solid_queue_monitor .chart-header-left {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        flex-wrap: wrap;
-      }
-
-      .solid_queue_monitor .chart-header h3 {
-        font-size: 1rem;
-        font-weight: 600;
-        color: var(--text-color);
-        margin: 0;
-      }
-
-      .solid_queue_monitor .chart-toggle-btn {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 28px;
-        height: 28px;
-        background: var(--hover-background);
-        border: 1px solid var(--border-color);
-        border-radius: 0.375rem;
-        cursor: pointer;
-        color: var(--text-muted);
-        transition: all 0.2s;
-      }
-
-      .solid_queue_monitor .chart-toggle-btn:hover {
-        background: var(--border-color);
-        color: var(--text-color);
-      }
-
-      .solid_queue_monitor .chart-toggle-icon {
-        transition: transform 0.2s;
-      }
-
-      .solid_queue_monitor .chart-section.collapsed .chart-toggle-icon {
-        transform: rotate(-90deg);
-      }
-
-      .solid_queue_monitor .chart-summary {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        font-size: 0.8rem;
-        color: var(--text-muted);
-        margin-left: 0.5rem;
-        padding-left: 0.75rem;
-        border-left: 1px solid var(--border-color);
-      }
-
-      .solid_queue_monitor .summary-item {
-        white-space: nowrap;
-      }
-
-      .solid_queue_monitor .summary-created {
-        color: #3b82f6;
-      }
-
-      .solid_queue_monitor .summary-completed {
-        color: #10b981;
-      }
-
-      .solid_queue_monitor .summary-failed {
-        color: #ef4444;
-      }
-
-      .solid_queue_monitor .summary-separator {
-        color: var(--border-color);
-      }
-
-      .solid_queue_monitor .chart-time-select-wrapper {
-        position: relative;
-      }
-
-      .solid_queue_monitor .chart-time-select {
-        appearance: none;
-        padding: 0.5rem 2rem 0.5rem 0.75rem;
-        font-size: 0.8rem;
-        color: var(--text-color);
-        background: var(--input-background);
-        border: 1px solid var(--border-color);
-        border-radius: 0.375rem;
-        cursor: pointer;
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
-        background-repeat: no-repeat;
-        background-position: right 0.5rem center;
-        background-size: 14px;
-        min-width: 140px;
-      }
-
-      .solid_queue_monitor .chart-time-select:hover {
-        border-color: var(--text-muted);
-      }
-
-      .solid_queue_monitor .chart-time-select:focus {
-        outline: none;
-        border-color: var(--primary-color);
-        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
-      }
-
-      .solid_queue_monitor .chart-collapsible {
-        overflow: hidden;
-        transition: max-height 0.3s ease-out, opacity 0.2s ease-out, margin-top 0.3s ease-out;
-        max-height: 500px;
-        opacity: 1;
-        margin-top: 1rem;
-      }
-
-      .solid_queue_monitor .chart-section.collapsed .chart-collapsible {
-        max-height: 0;
-        opacity: 0;
-        margin-top: 0;
-      }
-
-      .solid_queue_monitor .chart-container {
-        width: 100%;
-        overflow-x: auto;
-        overflow-y: hidden;
-      }
-
-      .solid_queue_monitor .chart-container svg {
-        display: block;
-        width: 100%;
-        height: auto;
-      }
-
-      .solid_queue_monitor .job-activity-chart {
-        width: 100%;
-        height: auto;
-        min-height: 250px;
-      }
-
-      .solid_queue_monitor .grid-line {
-        stroke: var(--border-color);
-        stroke-width: 1;
-        stroke-dasharray: 4 4;
-      }
-
-      .solid_queue_monitor .axis-line {
-        stroke: var(--border-color);
-        stroke-width: 1;
-      }
-
-      .solid_queue_monitor .axis-label {
-        font-size: 11px;
-        fill: var(--text-muted);
-      }
-
-      .solid_queue_monitor .x-label {
-        text-anchor: middle;
-      }
-
-      .solid_queue_monitor .y-label {
-        text-anchor: end;
-      }
-
-      .solid_queue_monitor .chart-line {
-        stroke-linecap: round;
-        stroke-linejoin: round;
-      }
-
-      .solid_queue_monitor .data-point {
-        cursor: pointer;
-        transition: r 0.2s;
-      }
-
-      .solid_queue_monitor .data-point:hover {
-        r: 6;
-      }
-
-      .solid_queue_monitor .chart-legend {
-        display: flex;
-        justify-content: center;
-        gap: 1.5rem;
-        margin-top: 1rem;
-        flex-wrap: wrap;
-      }
-
-      .solid_queue_monitor .legend-item {
-        display: flex;
-        align-items: center;
-        gap: 0.375rem;
-        font-size: 0.875rem;
-        color: var(--text-muted);
-      }
-
-      .solid_queue_monitor .legend-color {
-        width: 12px;
-        height: 12px;
-        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;
-        color: white;
-        padding: 0.5rem 0.75rem;
-        border-radius: 0.375rem;
-        font-size: 0.75rem;
-        pointer-events: none;
-        z-index: 1000;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-      }
-
-      .solid_queue_monitor .tooltip-label {
-        font-weight: 500;
-        margin-bottom: 0.25rem;
-      }
-
-      .solid_queue_monitor .tooltip-value {
-        color: #d1d5db;
-      }
-
-      .solid_queue_monitor .chart-empty {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 200px;
-        color: var(--text-muted);
-        font-size: 0.875rem;
-      }
-
-      @media (max-width: 768px) {
-        .solid_queue_monitor .chart-section {
-          padding: 1rem;
-        }
-
-        .solid_queue_monitor .chart-header {
-          flex-direction: column;
-          align-items: flex-start;
-        }
-
-        .solid_queue_monitor .chart-header-left {
-          width: 100%;
-          flex-wrap: wrap;
-        }
-
-        .solid_queue_monitor .chart-summary {
-          margin-left: 0;
-          padding-left: 0;
-          border-left: none;
-          margin-top: 0.5rem;
-          width: 100%;
-        }
-
-        .solid_queue_monitor .chart-time-select {
-          width: 100%;
-        }
-
-        .solid_queue_monitor .job-activity-chart {
-          min-height: 200px;
-        }
-
-        .solid_queue_monitor .chart-legend {
-          gap: 1rem;
-        }
-      }
-
-      /* Theme toggle button */
-      .solid_queue_monitor .theme-toggle-btn {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 36px;
-        height: 36px;
-        background: var(--card-background);
-        border: 1px solid var(--border-color);
-        border-radius: 50%;
-        cursor: pointer;
-        color: var(--text-muted);
-        transition: all 0.2s;
-        box-shadow: var(--card-shadow);
-      }
-
-      .solid_queue_monitor .theme-toggle-btn:hover {
-        color: var(--text-color);
-        border-color: var(--text-muted);
-      }
-
-      .solid_queue_monitor .theme-toggle-btn svg {
-        width: 18px;
-        height: 18px;
-      }
-
-      /* Hide moon icon in light mode, show sun icon */
-      .solid_queue_monitor .theme-icon-moon {
-        display: none;
-      }
-
-      .solid_queue_monitor .theme-icon-sun {
-        display: block;
-      }
-
-      /* In dark mode, show moon icon, hide sun icon */
-      .solid_queue_monitor.dark-theme .theme-icon-moon {
-        display: block;
-      }
-
-      .solid_queue_monitor.dark-theme .theme-icon-sun {
-        display: none;
-      }
-
-      .solid_queue_monitor .header-controls {
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-      }
-
-      /* Header Search Box */
-      .solid_queue_monitor .header-search-form {
-        display: flex;
-        align-items: center;
-        gap: 0;
-        flex: 1;
-        max-width: 400px;
-        margin: 0 1rem;
-      }
-
-      .solid_queue_monitor .header-search-input {
-        flex: 1;
-        padding: 0.5rem 0.75rem;
-        border: 1px solid var(--input-border);
-        border-right: none;
-        border-radius: 0.375rem 0 0 0.375rem;
-        font-size: 0.875rem;
-        background: var(--input-background);
-        color: var(--text-color);
-        outline: none;
-        transition: border-color 0.2s, box-shadow 0.2s;
-      }
-
-      .solid_queue_monitor .header-search-input:focus {
-        border-color: var(--primary-color);
-        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
-      }
-
-      .solid_queue_monitor .header-search-input::placeholder {
-        color: var(--text-muted);
-      }
-
-      .solid_queue_monitor .header-search-button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 0.5rem 0.75rem;
-        background: var(--primary-color);
-        color: white;
-        border: 1px solid var(--primary-color);
-        border-radius: 0 0.375rem 0.375rem 0;
-        cursor: pointer;
-        transition: background-color 0.2s;
-      }
-
-      .solid_queue_monitor .header-search-button:hover {
-        background: #2563eb;
-        border-color: #2563eb;
-      }
-
-      .solid_queue_monitor .header-search-button svg {
-        width: 16px;
-        height: 16px;
-      }
-
-      @media (max-width: 768px) {
-        .solid_queue_monitor .header-search-form {
-          max-width: 100%;
-          margin: 0.5rem 0;
-          order: 3;
-          width: 100%;
-        }
-      }
-
-      /* Search Results Page */
-      .solid_queue_monitor .results-summary {
-        margin: 1rem 0;
-        padding: 0.75rem 1rem;
-        background: var(--card-background);
-        border-radius: 0.375rem;
-        box-shadow: var(--card-shadow);
-      }
-
-      .solid_queue_monitor .results-summary p {
-        margin: 0;
-        color: var(--text-muted);
-        font-size: 0.875rem;
-      }
-
-      .solid_queue_monitor .search-results-section {
-        margin-top: 1.5rem;
-      }
-
-      .solid_queue_monitor .search-results-section h3 {
-        font-size: 1rem;
-        font-weight: 600;
-        color: var(--text-color);
-        margin-bottom: 0.75rem;
-        padding-bottom: 0.5rem;
-        border-bottom: 1px solid var(--border-color);
-      }
-
-      /* Workers Page Styles */
-      .solid_queue_monitor .workers-summary {
-        display: grid;
-        grid-template-columns: repeat(4, 1fr);
-        gap: 1rem;
-        margin-bottom: 1.5rem;
-      }
-
-      .solid_queue_monitor .summary-card {
-        background: var(--card-background);
-        border: 1px solid var(--border-color);
-        border-radius: 0.5rem;
-        padding: 1rem 1.25rem;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 0.25rem;
-        border-left: 4px solid var(--border-color);
-        position: relative;
-      }
-
-      .solid_queue_monitor .summary-card .summary-label {
-        font-size: 0.75rem;
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        color: var(--text-muted);
-      }
-
-      .solid_queue_monitor .summary-card .summary-value {
-        font-size: 1.75rem;
-        font-weight: 600;
-        color: var(--text-color);
-      }
-
-      .solid_queue_monitor .summary-healthy {
-        border-left-color: #10b981;
-      }
-
-      .solid_queue_monitor .summary-healthy .summary-value {
-        color: #10b981;
-      }
-
-      .solid_queue_monitor .summary-stale {
-        border-left-color: #f59e0b;
-      }
-
-      .solid_queue_monitor .summary-stale .summary-value {
-        color: #f59e0b;
-      }
-
-      .solid_queue_monitor .summary-dead {
-        border-left-color: #ef4444;
-      }
-
-      .solid_queue_monitor .summary-dead .summary-value {
-        color: #ef4444;
-      }
-
-      .solid_queue_monitor .summary-action {
-        font-size: 0.75rem;
-        color: #f59e0b;
-        text-decoration: none;
-        border: 1px solid #f59e0b;
-        padding: 0.25rem 0.5rem;
-        border-radius: 0.25rem;
-        margin-top: 0.5rem;
-        transition: all 0.2s;
-      }
-
-      .solid_queue_monitor .summary-action:hover {
-        background: #f59e0b;
-        color: #000;
-      }
-
-      .solid_queue_monitor .kind-badge {
-        display: inline-block;
-        padding: 0.25rem 0.5rem;
-        border-radius: 0.25rem;
-        font-size: 0.75rem;
-        font-weight: 500;
-      }
-
-      .solid_queue_monitor .kind-worker {
-        background: rgba(59, 130, 246, 0.15);
-        color: #3b82f6;
-      }
-
-      .solid_queue_monitor .kind-dispatcher {
-        background: rgba(249, 115, 22, 0.15);
-        color: #f97316;
-      }
-
-      .solid_queue_monitor .kind-scheduler {
-        background: rgba(168, 85, 247, 0.15);
-        color: #a855f7;
-      }
-
-      .solid_queue_monitor .kind-other {
-        background: rgba(107, 114, 128, 0.15);
-        color: #6b7280;
-      }
-
-      .solid_queue_monitor .status-healthy {
-        background: rgba(16, 185, 129, 0.15);
-        color: #10b981;
-      }
-
-      .solid_queue_monitor .status-stale {
-        background: rgba(245, 158, 11, 0.15);
-        color: #f59e0b;
-      }
-
-      .solid_queue_monitor .status-dead {
-        background: rgba(239, 68, 68, 0.15);
-        color: #ef4444;
-      }
-
-      .solid_queue_monitor .queue-tag {
-        display: inline-block;
-        background: var(--card-background);
-        border: 1px solid var(--border-color);
-        padding: 0.125rem 0.375rem;
-        border-radius: 0.25rem;
-        font-size: 0.75rem;
-        margin-right: 0.25rem;
-      }
-
-      .solid_queue_monitor .queue-more {
-        color: var(--text-muted);
-        font-size: 0.75rem;
-      }
-
-      .solid_queue_monitor .jobs-idle {
-        color: var(--text-muted);
-        font-style: italic;
-      }
-
-      .solid_queue_monitor .jobs-processing {
-        color: #10b981;
-      }
-
-      .solid_queue_monitor .jobs-processing .job-names {
-        color: var(--text-muted);
-        font-size: 0.8em;
-      }
-
-      .solid_queue_monitor .worker-dead {
-        background: rgba(239, 68, 68, 0.05);
-      }
-
-      .solid_queue_monitor .worker-stale {
-        background: rgba(245, 158, 11, 0.05);
-      }
-
-      .solid_queue_monitor .action-placeholder {
-        color: var(--text-muted);
-      }
-
-      /* Table Link Styles */
-      .solid_queue_monitor .job-class-link {
-        color: var(--text-color);
-        text-decoration: none;
-        transition: color 0.2s;
-      }
-
-      .solid_queue_monitor .job-class-link:hover {
-        color: #3b82f6;
-        text-decoration: underline;
-      }
-
-      .solid_queue_monitor .queue-link {
-        color: var(--text-color);
-        text-decoration: none;
-        transition: color 0.2s;
-      }
-
-      .solid_queue_monitor .queue-link:hover {
-        color: #3b82f6;
-        text-decoration: underline;
-      }
-
-      .solid_queue_monitor .back-link {
-        color: var(--text-muted);
-        text-decoration: none;
-        display: inline-flex;
-        align-items: center;
-        gap: 0.25rem;
-        font-size: 0.875rem;
-        transition: color 0.2s;
-      }
-
-      .solid_queue_monitor .back-link:hover {
-        color: var(--text-color);
-      }
-
-      .solid_queue_monitor .job-back-link {
-        margin-bottom: 1rem;
-      }
-
-      .solid_queue_monitor .empty-state {
-        text-align: center;
-        padding: 3rem 1rem;
-        color: var(--text-muted);
-      }
-
-      .solid_queue_monitor .empty-state p {
-        margin: 0.5rem 0;
-      }
-
-      .solid_queue_monitor .empty-state-hint {
-        font-size: 0.875rem;
-        opacity: 0.7;
-      }
-
-      /* Job Details Page Styles */
-      .solid_queue_monitor .job-details-page {
-        width: 100%;
-      }
-
-      .solid_queue_monitor .job-header {
-        background: var(--card-background);
-        border-radius: 0.5rem;
-        padding: 1.5rem;
-        margin-bottom: 1.5rem;
-        box-shadow: var(--card-shadow);
-      }
-
-      .solid_queue_monitor .job-header-main {
-        display: flex;
-        align-items: center;
-        gap: 1rem;
-        margin-bottom: 0.75rem;
-        flex-wrap: wrap;
-      }
-
-      .solid_queue_monitor .job-title {
-        font-size: 1.5rem;
-        font-weight: 600;
-        color: var(--text-color);
-        margin: 0;
-      }
-
-      .solid_queue_monitor .job-status-badge {
-        padding: 0.375rem 0.75rem;
-        border-radius: 9999px;
-        font-size: 0.75rem;
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-      }
-
-      .solid_queue_monitor .job-header-meta {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        color: var(--text-muted);
-        font-size: 0.875rem;
-        flex-wrap: wrap;
-      }
-
-      .solid_queue_monitor .job-separator {
-        color: var(--border-color);
-      }
-
-      .solid_queue_monitor .job-actions {
-        display: flex;
-        gap: 0.5rem;
-        margin-top: 1rem;
-      }
-
-      .solid_queue_monitor .job-section {
-        background: var(--card-background);
-        border-radius: 0.5rem;
-        padding: 1.25rem;
-        margin-bottom: 1rem;
-        box-shadow: var(--card-shadow);
-      }
-
-      .solid_queue_monitor .job-section .section-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 1rem;
-      }
-
-      .solid_queue_monitor .job-section .section-title {
-        font-size: 1rem;
-        font-weight: 600;
-        color: var(--text-color);
-        margin: 0;
-      }
-
-      .solid_queue_monitor .section-subtitle {
-        color: var(--text-muted);
-        font-size: 0.875rem;
-      }
-
-      /* Timing Cards */
-      .solid_queue_monitor .timing-cards {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        gap: 1rem;
-        margin-bottom: 1.5rem;
-      }
-
-      .solid_queue_monitor .timing-card {
-        background: var(--card-background);
-        border-radius: 0.5rem;
-        padding: 1.25rem;
-        text-align: center;
-        box-shadow: var(--card-shadow);
-        border: 1px solid var(--border-color);
-      }
-
-      .solid_queue_monitor .timing-value {
-        font-size: 1.5rem;
-        font-weight: 700;
-        color: var(--text-color);
-        margin-bottom: 0.25rem;
-      }
-
-      .solid_queue_monitor .timing-label {
-        font-size: 0.75rem;
-        color: var(--text-muted);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-      }
-
-      .solid_queue_monitor .timing-indicator {
-        display: inline-block;
-        padding: 0.125rem 0.5rem;
-        border-radius: 9999px;
-        font-size: 0.625rem;
-        font-weight: 600;
-        text-transform: uppercase;
-        margin-top: 0.5rem;
-      }
-
-      .solid_queue_monitor .indicator-good {
-        background: rgba(16, 185, 129, 0.15);
-        color: #10b981;
-      }
-
-      .solid_queue_monitor .indicator-normal {
-        background: rgba(59, 130, 246, 0.15);
-        color: #3b82f6;
-      }
-
-      .solid_queue_monitor .indicator-warning {
-        background: rgba(245, 158, 11, 0.15);
-        color: #f59e0b;
-      }
-
-      /* Timeline */
-      .solid_queue_monitor .job-timeline {
-        padding: 0.5rem 0;
-      }
-
-      .solid_queue_monitor .timeline-track {
-        display: flex;
-        justify-content: space-between;
-        position: relative;
-      }
-
-      .solid_queue_monitor .timeline-event {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        position: relative;
-        flex: 1;
-      }
-
-      .solid_queue_monitor .timeline-dot {
-        width: 12px;
-        height: 12px;
-        border-radius: 50%;
-        background: var(--border-color);
-        border: 2px solid var(--card-background);
-        z-index: 1;
-      }
-
-      .solid_queue_monitor .timeline-line {
-        position: absolute;
-        top: 5px;
-        left: calc(50% + 6px);
-        right: calc(-50% + 6px);
-        height: 2px;
-        background: var(--border-color);
-      }
-
-      .solid_queue_monitor .timeline-content {
-        text-align: center;
-        margin-top: 0.5rem;
-      }
-
-      .solid_queue_monitor .timeline-label {
-        font-size: 0.75rem;
-        font-weight: 600;
-        color: var(--text-color);
-      }
-
-      .solid_queue_monitor .timeline-time {
-        font-size: 0.625rem;
-        color: var(--text-muted);
-        margin-top: 0.125rem;
-      }
-
-      .solid_queue_monitor .timeline-done .timeline-dot {
-        background: #10b981;
-      }
-
-      .solid_queue_monitor .timeline-done .timeline-line {
-        background: #10b981;
-      }
-
-      .solid_queue_monitor .timeline-success .timeline-dot {
-        background: #10b981;
-        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
-      }
-
-      .solid_queue_monitor .timeline-failed .timeline-dot {
-        background: #ef4444;
-        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
-      }
-
-      .solid_queue_monitor .timeline-active .timeline-dot {
-        background: #3b82f6;
-        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
-        animation: pulse 2s infinite;
-      }
-
-      @keyframes pulse {
-        0%, 100% { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2); }
-        50% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.1); }
-      }
-
-      /* Error Section */
-      .solid_queue_monitor .error-section {
-        border-left: 4px solid #ef4444;
-      }
-
-      .solid_queue_monitor .error-type {
-        font-size: 1rem;
-        font-weight: 600;
-        color: #ef4444;
-        margin-bottom: 0.5rem;
-      }
-
-      .solid_queue_monitor .error-message-box {
-        background: rgba(239, 68, 68, 0.1);
-        border-radius: 0.375rem;
-        padding: 0.75rem 1rem;
-        color: var(--text-color);
-        font-size: 0.875rem;
-        line-height: 1.5;
-      }
-
-      /* Backtrace */
-      .solid_queue_monitor .backtrace-section {
-        margin-top: 1rem;
-      }
-
-      .solid_queue_monitor .backtrace-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 0.5rem;
-      }
-
-      .solid_queue_monitor .backtrace-title {
-        font-size: 0.75rem;
-        font-weight: 600;
-        color: var(--text-muted);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-      }
-
-      .solid_queue_monitor .backtrace-toggle {
-        display: flex;
-        gap: 0.25rem;
-      }
-
-      .solid_queue_monitor .toggle-btn {
-        padding: 0.25rem 0.5rem;
-        font-size: 0.625rem;
-        border: 1px solid var(--border-color);
-        background: transparent;
-        color: var(--text-muted);
-        border-radius: 0.25rem;
-        cursor: pointer;
-        transition: all 0.2s;
-      }
-
-      .solid_queue_monitor .toggle-btn:hover {
-        border-color: var(--text-muted);
-      }
-
-      .solid_queue_monitor .toggle-btn.active {
-        background: var(--primary-color);
-        border-color: var(--primary-color);
-        color: white;
-      }
-
-      .solid_queue_monitor .backtrace-content {
-        background: var(--code-background);
-        border-radius: 0.375rem;
-        padding: 0.75rem;
-        font-size: 0.75rem;
-        line-height: 1.6;
-        overflow-x: auto;
-        margin: 0;
-        max-height: 300px;
-        overflow-y: auto;
-      }
-
-      .solid_queue_monitor .backtrace-line {
-        display: block;
-        color: var(--text-color);
-      }
-
-      .solid_queue_monitor .backtrace-line .line-number {
-        color: var(--text-muted);
-        margin-right: 0.5rem;
-        user-select: none;
-      }
-
-      /* Details Grid */
-      .solid_queue_monitor .details-grid {
-        display: grid;
-        gap: 0.75rem;
-      }
-
-      .solid_queue_monitor .detail-row {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 0.5rem 0;
-        border-bottom: 1px solid var(--border-color);
-      }
-
-      .solid_queue_monitor .detail-row:last-child {
-        border-bottom: none;
-      }
-
-      .solid_queue_monitor .detail-label {
-        font-size: 0.875rem;
-        color: var(--text-muted);
-      }
-
-      .solid_queue_monitor .detail-value {
-        font-size: 0.875rem;
-        color: var(--text-color);
-        text-align: right;
-      }
-
-      .solid_queue_monitor .detail-mono {
-        font-family: ui-monospace, monospace;
-        font-size: 0.8rem;
-      }
-
-      /* Arguments Content */
-      .solid_queue_monitor .arguments-content {
-        background: var(--code-background);
-        border-radius: 0.375rem;
-        padding: 1rem;
-        font-size: 0.8rem;
-        line-height: 1.5;
-        overflow-x: auto;
-        margin: 0;
-        font-family: ui-monospace, monospace;
-      }
-
-      /* Copy Button */
-      .solid_queue_monitor .copy-button {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.25rem;
-        padding: 0.375rem 0.625rem;
-        font-size: 0.75rem;
-        color: var(--text-muted);
-        background: transparent;
-        border: 1px solid var(--border-color);
-        border-radius: 0.25rem;
-        cursor: pointer;
-        transition: all 0.2s;
-      }
-
-      .solid_queue_monitor .copy-button:hover {
-        color: var(--text-color);
-        border-color: var(--text-muted);
-      }
-
-      /* Collapsible Section */
-      .solid_queue_monitor .collapsible-header {
-        cursor: pointer;
-        user-select: none;
-      }
-
-      .solid_queue_monitor .collapsible-title {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-      }
-
-      .solid_queue_monitor .collapse-icon {
-        transition: transform 0.2s;
-        color: var(--text-muted);
-      }
-
-      .solid_queue_monitor .collapsible-content {
-        margin-top: 1rem;
-      }
-
-      .solid_queue_monitor .raw-data-content {
-        background: var(--code-background);
-        border-radius: 0.375rem;
-        padding: 1rem;
-        font-size: 0.75rem;
-        line-height: 1.5;
-        overflow-x: auto;
-        margin: 0;
-        font-family: ui-monospace, monospace;
-        max-height: 400px;
-        overflow-y: auto;
-      }
-
-      /* Recent Executions Table */
-      .solid_queue_monitor .recent-executions-table {
-        width: 100%;
-      }
-
-      .solid_queue_monitor .mini-status-badge {
-        display: inline-block;
-        padding: 0.125rem 0.375rem;
-        border-radius: 0.25rem;
-        font-size: 0.625rem;
-        font-weight: 600;
-        text-transform: uppercase;
-      }
-
-      .solid_queue_monitor .args-preview {
-        max-width: 200px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .solid_queue_monitor .args-preview a {
-        color: var(--text-color);
-        text-decoration: none;
-      }
-
-      .solid_queue_monitor .args-preview a:hover {
-        color: #3b82f6;
-        text-decoration: underline;
-      }
-
-      /* Queue Badge in Job Details */
-      .solid_queue_monitor .queue-badge {
-        display: inline-block;
-        padding: 0.25rem 0.5rem;
-        background: var(--code-background);
-        border-radius: 0.25rem;
-        font-size: 0.875rem;
-        color: var(--text-color);
-        text-decoration: none;
-      }
-
-      .solid_queue_monitor .queue-badge:hover {
-        color: #3b82f6;
-      }
-
-      @media (max-width: 768px) {
-        .solid_queue_monitor .timing-cards {
-          grid-template-columns: 1fr;
-        }
-
-        .solid_queue_monitor .timeline-track {
-          flex-direction: column;
-          gap: 1rem;
-        }
-
-        .solid_queue_monitor .timeline-line {
-          display: none;
-        }
-
-        .solid_queue_monitor .timeline-event {
-          flex-direction: row;
-          gap: 1rem;
-        }
-
-        .solid_queue_monitor .timeline-content {
-          text-align: left;
-          margin-top: 0;
-        }
-
-        .solid_queue_monitor .detail-row {
-          flex-direction: column;
-          align-items: flex-start;
-          gap: 0.25rem;
-        }
-
-        .solid_queue_monitor .detail-value {
-          text-align: left;
-        }
-
-        .solid_queue_monitor .job-header-main {
-          flex-direction: column;
-          align-items: flex-start;
-        }
-
-        .solid_queue_monitor .workers-summary {
-          grid-template-columns: repeat(2, 1fr);
-        }
-      }
-
-      @media (max-width: 480px) {
-        .solid_queue_monitor .workers-summary {
-          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
-end
diff --git a/app/views/solid_queue_monitor/jobs/_header.html.erb b/app/views/solid_queue_monitor/jobs/_header.html.erb
index bef2b61..5a83cc0 100644
--- a/app/views/solid_queue_monitor/jobs/_header.html.erb
+++ b/app/views/solid_queue_monitor/jobs/_header.html.erb
@@ -1,7 +1,8 @@
+<% status = detail_job_status(job: @job, failed_execution: @failed_execution, claimed_execution: @claimed_execution, scheduled_execution: @scheduled_execution) %>
 <div class="job-header">
   <div class="job-header-main">
     <h1 class="job-title"><%= @job.class_name %></h1>
-    <span class="job-status-badge <%= detail_status_class %>"><%= detail_status_label %></span>
+    <span class="job-status-badge <%= detail_status_class(status) %>"><%= detail_status_label(status) %></span>
   </div>
   <div class="job-header-meta">
     <span class="job-queue"><%= queue_link(@job.queue_name) %></span>
diff --git a/app/views/solid_queue_monitor/jobs/_timeline.html.erb b/app/views/solid_queue_monitor/jobs/_timeline.html.erb
index c45f314..78fc14a 100644
--- a/app/views/solid_queue_monitor/jobs/_timeline.html.erb
+++ b/app/views/solid_queue_monitor/jobs/_timeline.html.erb
@@ -1,11 +1,12 @@
 <% events = [] %>
+<% status = detail_job_status(job: @job, failed_execution: @failed_execution, claimed_execution: @claimed_execution, scheduled_execution: @scheduled_execution) %>
 <% events << { label: 'Created', time: @job.created_at, status: :done } if @job.created_at %>
 <% scheduled_at = @job.scheduled_at || @scheduled_execution&.scheduled_at %>
 <% events << { label: 'Scheduled', time: scheduled_at, status: :done } if scheduled_at && scheduled_at != @job.created_at %>
 <% events << { label: 'Started', time: @claimed_execution.created_at, status: :done } if @claimed_execution %>
-<% events << { label: 'Completed', time: @job.finished_at, status: :success } if detail_job_status == :completed %>
-<% events << { label: 'Failed', time: @failed_execution.created_at, status: :failed } if detail_job_status == :failed %>
-<% events << { label: 'Running...', time: nil, status: :active } if detail_job_status == :in_progress %>
+<% events << { label: 'Completed', time: @job.finished_at, status: :success } if status == :completed %>
+<% events << { label: 'Failed', time: @failed_execution.created_at, status: :failed } if status == :failed %>
+<% events << { label: 'Running...', time: nil, status: :active } if status == :in_progress %>
 
 <% if events.size >= 2 %>
   <div class="job-section">
diff --git a/app/views/solid_queue_monitor/jobs/_timing.html.erb b/app/views/solid_queue_monitor/jobs/_timing.html.erb
index f295eab..3c3e3e0 100644
--- a/app/views/solid_queue_monitor/jobs/_timing.html.erb
+++ b/app/views/solid_queue_monitor/jobs/_timing.html.erb
@@ -1,4 +1,4 @@
-<% timing = detail_timing %>
+<% timing = detail_timing(job: @job, claimed_execution: @claimed_execution, failed_execution: @failed_execution) %>
 <div class="timing-cards">
   <% { 'Queue Wait' => timing[:queue_wait], 'Execution' => timing[:execution], 'Total Time' => timing[:total] }.each do |label, duration| %>
     <div class="timing-card">
diff --git a/lib/solid_queue_monitor/version.rb b/lib/solid_queue_monitor/version.rb
index a096ab4..d341a1c 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 = '1.3.0'
+  VERSION = '2.0.0'
 end
diff --git a/spec/presenters/solid_queue_monitor/stats_presenter_spec.rb b/spec/presenters/solid_queue_monitor/stats_presenter_spec.rb
deleted file mode 100644
index b440cb6..0000000
--- a/spec/presenters/solid_queue_monitor/stats_presenter_spec.rb
+++ /dev/null
@@ -1,43 +0,0 @@
-# frozen_string_literal: true
-
-require 'spec_helper'
-
-RSpec.describe SolidQueueMonitor::StatsPresenter do
-  describe '#render' do
-    subject { described_class.new(stats) }
-
-    let(:stats) do
-      {
-        active_jobs: 75,
-        scheduled: 20,
-        ready: 30,
-        in_progress: 15,
-        recurring: 5,
-        failed: 10
-      }
-    end
-
-    it 'returns HTML string' do
-      expect(subject.render).to be_a(String)
-      expect(subject.render).to include('stats-container')
-    end
-
-    it 'includes all stats in the output' do
-      html = subject.render
-
-      expect(html).to include('Queue Statistics')
-      expect(html).to include('Active Jobs')
-      expect(html).to include('75')
-      expect(html).to include('Scheduled')
-      expect(html).to include('20')
-      expect(html).to include('Ready')
-      expect(html).to include('30')
-      expect(html).to include('In Progress')
-      expect(html).to include('15')
-      expect(html).to include('Recurring')
-      expect(html).to include('5')
-      expect(html).to include('Failed')
-      expect(html).to include('10')
-    end
-  end
-end
diff --git a/spec/requests/solid_queue_monitor/csp_compatibility_spec.rb b/spec/requests/solid_queue_monitor/csp_compatibility_spec.rb
index 97e4895..91322bd 100644
--- a/spec/requests/solid_queue_monitor/csp_compatibility_spec.rb
+++ b/spec/requests/solid_queue_monitor/csp_compatibility_spec.rb
@@ -4,15 +4,25 @@
 
 RSpec.describe 'CSP compatibility' do
   let(:inline_handler_pattern) { /\s(onclick|onchange|onsubmit|onfocus|onblur|oninput|onkeyup|onkeydown)=/ }
+  let(:inline_style_attribute_pattern) { /\sstyle=(["'])/ }
+  let(:inline_style_block_pattern) { /<style\b/i }
+  let(:inline_script_block_pattern) { /<script(?![^>]*\bsrc=)[^>]*>/i }
+  let(:css_fingerprint) { SolidQueueMonitor::AssetCache.fingerprint_for('application.css') }
+  let(:js_fingerprint) { SolidQueueMonitor::AssetCache.fingerprint_for('application.js') }
 
   before do
     create_list(:solid_queue_job, 2)
     create(:solid_queue_failed_execution)
     create(:solid_queue_scheduled_execution)
     create(:solid_queue_ready_execution)
+    SolidQueueMonitor::AssetCache.clear!
   end
 
-  shared_examples 'a CSP-safe page' do |path|
+  after do
+    SolidQueueMonitor::AssetCache.clear!
+  end
+
+  shared_examples 'a CSP-safe response' do |path|
     it "#{path} has no inline event handlers" do
       get path
       expect(response).to have_http_status(:ok)
@@ -24,9 +34,23 @@
     it "#{path} has no inline style attributes" do
       get path
       expect(response).to have_http_status(:ok)
-      expect(response.body).not_to match(/\sstyle="/),
+      expect(response.body).not_to match(inline_style_attribute_pattern),
                                    "Inline style= attribute found at #{path} (nonces do not apply to style attributes)"
     end
+
+    it "#{path} has no inline <style> blocks" do
+      get path
+      expect(response).to have_http_status(:ok)
+      expect(response.body).not_to match(inline_style_block_pattern),
+                                   "Inline <style> block found at #{path}"
+    end
+
+    it "#{path} has no inline <script> blocks" do
+      get path
+      expect(response).to have_http_status(:ok)
+      expect(response.body).not_to match(inline_script_block_pattern),
+                                   "Inline <script> block found at #{path}"
+    end
   end
 
   describe 'without a CSP nonce configured' do
@@ -40,7 +64,7 @@
       '/queues',
       '/workers'
     ].each do |path|
-      include_examples 'a CSP-safe page', path
+      include_examples 'a CSP-safe response', path
     end
 
     it 'emits the stylesheet without a nonce attribute' do
@@ -56,6 +80,20 @@
         expect(tag).not_to include('nonce=')
       end
     end
+
+    it 'serves CSP-safe external assets' do
+      [
+        "/assets/application-#{css_fingerprint}.css",
+        "/assets/application-#{js_fingerprint}.js"
+      ].each do |path|
+        get path
+        expect(response).to have_http_status(:ok)
+        expect(response.body).not_to match(inline_handler_pattern)
+        expect(response.body).not_to match(inline_style_attribute_pattern)
+        expect(response.body).not_to match(inline_style_block_pattern)
+        expect(response.body).not_to match(inline_script_block_pattern)
+      end
+    end
   end
 
   describe 'with a CSP nonce configured' do
diff --git a/spec/services/solid_queue_monitor/html_generator_spec.rb b/spec/services/solid_queue_monitor/html_generator_spec.rb
deleted file mode 100644
index 64c479d..0000000
--- a/spec/services/solid_queue_monitor/html_generator_spec.rb
+++ /dev/null
@@ -1,56 +0,0 @@
-# frozen_string_literal: true
-
-require 'spec_helper'
-
-RSpec.describe SolidQueueMonitor::HtmlGenerator do
-  describe '#generate' do
-    context 'when a nonce is supplied' do
-      subject(:html) do
-        described_class.new(title: 'Test', content: '<p>hello</p>', nonce: 'abc123').generate
-      end
-
-      it 'stamps the nonce on the <style> tag' do
-        expect(html).to include('<style nonce="abc123">')
-      end
-
-      it 'stamps the nonce on every <script> tag' do
-        scripts = html.scan(/<script[^>]*>/)
-        expect(scripts).not_to be_empty
-        expect(scripts).to all(include('nonce="abc123"'))
-      end
-    end
-
-    context 'when no nonce is supplied' do
-      subject(:html) do
-        described_class.new(title: 'Test', content: '<p>hello</p>').generate
-      end
-
-      it 'emits <style> without a nonce attribute' do
-        expect(html).to include('<style>')
-        expect(html).not_to match(/<style\s+nonce=/)
-      end
-
-      it 'emits <script> tags without a nonce attribute' do
-        scripts = html.scan(/<script[^>]*>/)
-        expect(scripts.join).not_to include('nonce=')
-      end
-    end
-
-    context 'when a flash message is rendered' do
-      subject(:html) do
-        described_class.new(
-          title: 'Test',
-          content: '<p>hi</p>',
-          message: 'Done',
-          message_type: 'success',
-          nonce: 'xyz'
-        ).generate
-      end
-
-      it 'stamps nonce on the flash-message <script>' do
-        flash_script = html[%r{<script[^>]*>[^<]*flash-message[\s\S]*?</script>}]
-        expect(flash_script).to include('nonce="xyz"')
-      end
-    end
-  end
-end

From 0b80a8f766316639039adc8a75741fae50415196 Mon Sep 17 00:00:00 2001
From: Vishal Sadriya <vishalsadriya.tps@gmail.com>
Date: Tue, 12 May 2026 16:37:33 +0530
Subject: [PATCH 3/7] fix: readable dark-theme colors for paused queue row

The .queue-paused row only set a light cream background (#fffbeb)
without an explicit text color, so the dark theme inherited the
near-white default text and rendered as nearly invisible. Adds a
dark-theme override with dark amber background + light amber text
(~11:1 contrast). Light theme unchanged.
---
 app/assets/stylesheets/solid_queue_monitor/application.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/app/assets/stylesheets/solid_queue_monitor/application.css b/app/assets/stylesheets/solid_queue_monitor/application.css
index fe7e580..0a1320c 100644
--- a/app/assets/stylesheets/solid_queue_monitor/application.css
+++ b/app/assets/stylesheets/solid_queue_monitor/application.css
@@ -276,6 +276,11 @@
           background-color: #fffbeb;
         }
 
+        .solid_queue_monitor.dark-theme .queue-paused {
+          background-color: #3a2410;
+          color: #fde68a;
+        }
+
         .solid_queue_monitor .pause-button {
           background: #f59e0b;
           color: white;

From 174f3f79cb5872ea06f9a206ea613537a33b0113 Mon Sep 17 00:00:00 2001
From: Vishal Sadriya <vishalsadriya.tps@gmail.com>
Date: Tue, 12 May 2026 16:40:02 +0530
Subject: [PATCH 4/7] chore: gitignore Codex agent files

---
 .gitignore | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.gitignore b/.gitignore
index a310286..8bc84e9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -20,3 +20,7 @@
 # Claude Code personal workflows (local only)
 .claude/
 CLAUDE.md
+
+# Codex personal workflows (local only)
+.agents/
+AGENTS.md

From 3db2fe3f8609223950510204df321693ac8f29a3 Mon Sep 17 00:00:00 2001
From: Vishal Sadriya <vishalsadriya.tps@gmail.com>
Date: Tue, 12 May 2026 16:47:21 +0530
Subject: [PATCH 5/7] docs: update CSP section in README for v2.0

Reflects v2.0 behavior: strict `script-src 'self'; style-src 'self'`
works out of the box now that CSS/JS are served as external assets.
Removes the v1.3.0 caveat about nonces being required for strict
policies, and adds an upgrade note for v1.x users.
---
 README.md | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 70d6fa8..036ec6c 100644
--- a/README.md
+++ b/README.md
@@ -208,9 +208,23 @@ This makes it easy to find specific jobs when debugging issues in your applicati
 
 ## Content Security Policy
 
-Solid Queue Monitor is compatible with strict Content Security Policy as of v1.3.0.
+Solid Queue Monitor is fully CSP-compatible as of v2.0.0. The dashboard works out of the box under strict policies — no nonce configuration is required.
 
-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`:
+### Strict CSP (v2.0.0+)
+
+As of v2.0 the dashboard's CSS and JavaScript are served as external, content-hashed assets (e.g. `/solid_queue/assets/application-a1b2c3d4.css`) with `Cache-Control: immutable`. The dashboard emits zero inline `<style>` or `<script>` blocks. A strict policy that only allows `'self'` for both directives is sufficient:
+
+```ruby
+# config/initializers/content_security_policy.rb
+Rails.application.config.content_security_policy do |policy|
+  policy.script_src :self
+  policy.style_src  :self
+end
+```
+
+### Nonce-based CSP
+
+Nonce-based CSP is also supported. When `content_security_policy_nonce_generator` is configured, Solid Queue Monitor stamps the per-request nonce onto the `<link rel="stylesheet">` and `<script src="...">` tags it emits — so policies that exclude `'self'` and only allow nonces still work:
 
 ```ruby
 # config/initializers/content_security_policy.rb
@@ -223,7 +237,9 @@ Rails.application.config.content_security_policy_nonce_generator = ->(req) { Sec
 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.
+### Upgrading from v1.x
+
+v1.x emitted inline `<style nonce>` and `<script nonce>` blocks, so a nonce generator was effectively required for strict policies. v2.0 removes all inline blocks. If you added a nonce generator only to make the monitor work, you can keep it (no harm) or remove it.
 
 ## Contributing
 

From ad6bf7fa4962349e9521eabb1f86672d81fb12bc Mon Sep 17 00:00:00 2001
From: Vishal Sadriya <vishalsadriya.tps@gmail.com>
Date: Wed, 13 May 2026 11:09:39 +0530
Subject: [PATCH 6/7] docs: bump Gemfile example to ~> 2.0 in README
 installation section

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 036ec6c..fbeda8a 100644
--- a/README.md
+++ b/README.md
@@ -72,7 +72,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', '~> 1.2'
+gem 'solid_queue_monitor', '~> 2.0'
 ```
 
 Then execute:

From 5a84665394245bbbbfe193badb4e2e918011de5d Mon Sep 17 00:00:00 2001
From: Vishal Sadriya <vishalsadriya.tps@gmail.com>
Date: Wed, 13 May 2026 15:34:25 +0530
Subject: [PATCH 7/7] test: add request specs for
 ready/in_progress/scheduled/recurring jobs

These four index-only controllers lacked dedicated request specs in v1.x.
The refactor inherited the gap. Each new spec covers: happy path, empty
state, key DOM elements, filter by class_name (and queue_name for
ready_jobs).

Brings spec total from 294 to 315 examples.
---
 .../in_progress_jobs_spec.rb                  | 52 +++++++++++++++
 .../solid_queue_monitor/ready_jobs_spec.rb    | 64 +++++++++++++++++++
 .../recurring_jobs_spec.rb                    | 54 ++++++++++++++++
 .../scheduled_jobs_spec.rb                    | 52 +++++++++++++++
 4 files changed, 222 insertions(+)
 create mode 100644 spec/requests/solid_queue_monitor/in_progress_jobs_spec.rb
 create mode 100644 spec/requests/solid_queue_monitor/ready_jobs_spec.rb
 create mode 100644 spec/requests/solid_queue_monitor/recurring_jobs_spec.rb
 create mode 100644 spec/requests/solid_queue_monitor/scheduled_jobs_spec.rb

diff --git a/spec/requests/solid_queue_monitor/in_progress_jobs_spec.rb b/spec/requests/solid_queue_monitor/in_progress_jobs_spec.rb
new file mode 100644
index 0000000..f8d6678
--- /dev/null
+++ b/spec/requests/solid_queue_monitor/in_progress_jobs_spec.rb
@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'In Progress Jobs' do
+  describe 'GET /in_progress_jobs' do
+    let!(:claimed_job1) { create(:solid_queue_claimed_execution, created_at: 1.hour.ago) }
+    let!(:claimed_job2) { create(:solid_queue_claimed_execution, created_at: 2.hours.ago) }
+
+    it 'returns a successful response' do
+      get '/in_progress_jobs'
+
+      expect(response).to have_http_status(:ok)
+    end
+
+    it 'displays the page title' do
+      get '/in_progress_jobs'
+
+      expect(response.body).to include('In Progress')
+    end
+
+    it 'displays the claimed jobs' do
+      get '/in_progress_jobs'
+
+      expect(response.body).to include(claimed_job1.job.class_name)
+    end
+
+    context 'with no claimed jobs' do
+      before do
+        SolidQueue::ClaimedExecution.delete_all
+      end
+
+      it 'still returns a successful response' do
+        get '/in_progress_jobs'
+
+        expect(response).to have_http_status(:ok)
+      end
+    end
+
+    context 'with class_name filter' do
+      let(:special_job) { create(:solid_queue_job, class_name: 'SpecialInProgressJob') }
+      let!(:special_claimed) { create(:solid_queue_claimed_execution, job: special_job) }
+
+      it 'filters by class name' do
+        get '/in_progress_jobs', params: { class_name: 'Special' }
+
+        expect(response).to have_http_status(:ok)
+        expect(response.body).to include('SpecialInProgressJob')
+      end
+    end
+  end
+end
diff --git a/spec/requests/solid_queue_monitor/ready_jobs_spec.rb b/spec/requests/solid_queue_monitor/ready_jobs_spec.rb
new file mode 100644
index 0000000..1a51e98
--- /dev/null
+++ b/spec/requests/solid_queue_monitor/ready_jobs_spec.rb
@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'Ready Jobs' do
+  describe 'GET /ready_jobs' do
+    let!(:ready_job1) { create(:solid_queue_ready_execution, created_at: 1.hour.ago) }
+    let!(:ready_job2) { create(:solid_queue_ready_execution, created_at: 2.hours.ago) }
+
+    it 'returns a successful response' do
+      get '/ready_jobs'
+
+      expect(response).to have_http_status(:ok)
+    end
+
+    it 'displays the page title' do
+      get '/ready_jobs'
+
+      expect(response.body).to include('Ready Jobs')
+    end
+
+    it 'displays the ready jobs' do
+      get '/ready_jobs'
+
+      expect(response.body).to include(ready_job1.job.class_name)
+    end
+
+    context 'with no ready jobs' do
+      before do
+        SolidQueue::ReadyExecution.delete_all
+      end
+
+      it 'still returns a successful response' do
+        get '/ready_jobs'
+
+        expect(response).to have_http_status(:ok)
+      end
+    end
+
+    context 'with class_name filter' do
+      let(:special_job) { create(:solid_queue_job, class_name: 'SpecialReadyJob') }
+      let!(:special_ready) { create(:solid_queue_ready_execution, job: special_job) }
+
+      it 'filters by class name' do
+        get '/ready_jobs', params: { class_name: 'Special' }
+
+        expect(response).to have_http_status(:ok)
+        expect(response.body).to include('SpecialReadyJob')
+      end
+    end
+
+    context 'with queue_name filter' do
+      let(:queue_job) { create(:solid_queue_job, queue_name: 'priority_lane') }
+      let!(:queue_ready) { create(:solid_queue_ready_execution, job: queue_job, queue_name: 'priority_lane') }
+
+      it 'filters by queue name' do
+        get '/ready_jobs', params: { queue_name: 'priority_lane' }
+
+        expect(response).to have_http_status(:ok)
+        expect(response.body).to include('priority_lane')
+      end
+    end
+  end
+end
diff --git a/spec/requests/solid_queue_monitor/recurring_jobs_spec.rb b/spec/requests/solid_queue_monitor/recurring_jobs_spec.rb
new file mode 100644
index 0000000..d0a912e
--- /dev/null
+++ b/spec/requests/solid_queue_monitor/recurring_jobs_spec.rb
@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'Recurring Jobs' do
+  describe 'GET /recurring_jobs' do
+    let!(:recurring_task1) do
+      create(:solid_queue_recurring_task, key: 'daily_cleanup', class_name: 'DailyCleanupJob')
+    end
+    let!(:recurring_task2) do
+      create(:solid_queue_recurring_task, key: 'hourly_metrics', class_name: 'HourlyMetricsJob')
+    end
+
+    it 'returns a successful response' do
+      get '/recurring_jobs'
+
+      expect(response).to have_http_status(:ok)
+    end
+
+    it 'displays the page title' do
+      get '/recurring_jobs'
+
+      expect(response.body).to include('Recurring Jobs')
+    end
+
+    it 'displays the recurring tasks' do
+      get '/recurring_jobs'
+
+      expect(response.body).to include('daily_cleanup')
+      expect(response.body).to include('DailyCleanupJob')
+    end
+
+    context 'with no recurring tasks' do
+      before do
+        SolidQueue::RecurringTask.delete_all
+      end
+
+      it 'still returns a successful response' do
+        get '/recurring_jobs'
+
+        expect(response).to have_http_status(:ok)
+      end
+    end
+
+    context 'with class_name filter' do
+      it 'filters by class name' do
+        get '/recurring_jobs', params: { class_name: 'DailyCleanup' }
+
+        expect(response).to have_http_status(:ok)
+        expect(response.body).to include('DailyCleanupJob')
+      end
+    end
+  end
+end
diff --git a/spec/requests/solid_queue_monitor/scheduled_jobs_spec.rb b/spec/requests/solid_queue_monitor/scheduled_jobs_spec.rb
new file mode 100644
index 0000000..81b55cf
--- /dev/null
+++ b/spec/requests/solid_queue_monitor/scheduled_jobs_spec.rb
@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'Scheduled Jobs' do
+  describe 'GET /scheduled_jobs' do
+    let!(:scheduled_job1) { create(:solid_queue_scheduled_execution, scheduled_at: 1.hour.from_now) }
+    let!(:scheduled_job2) { create(:solid_queue_scheduled_execution, scheduled_at: 2.hours.from_now) }
+
+    it 'returns a successful response' do
+      get '/scheduled_jobs'
+
+      expect(response).to have_http_status(:ok)
+    end
+
+    it 'displays the page title' do
+      get '/scheduled_jobs'
+
+      expect(response.body).to include('Scheduled Jobs')
+    end
+
+    it 'displays the scheduled jobs' do
+      get '/scheduled_jobs'
+
+      expect(response.body).to include(scheduled_job1.job.class_name)
+    end
+
+    context 'with no scheduled jobs' do
+      before do
+        SolidQueue::ScheduledExecution.delete_all
+      end
+
+      it 'still returns a successful response' do
+        get '/scheduled_jobs'
+
+        expect(response).to have_http_status(:ok)
+      end
+    end
+
+    context 'with class_name filter' do
+      let(:special_job) { create(:solid_queue_job, class_name: 'SpecialScheduledJob') }
+      let!(:special_scheduled) { create(:solid_queue_scheduled_execution, job: special_job) }
+
+      it 'filters by class name' do
+        get '/scheduled_jobs', params: { class_name: 'Special' }
+
+        expect(response).to have_http_status(:ok)
+        expect(response.body).to include('SpecialScheduledJob')
+      end
+    end
+  end
+end