modern_queue_dashboard 0.3.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 8f3b6ba3fdf6b602a2b5b6701717d6768a56ced216ec87b5f8aa36ac94a171c8
+  data.tar.gz: 7b96e4fd86584d611e1c1ac0b68eccc3239aecdcc1261e8bed105afd682bb17a
+SHA512:
+  metadata.gz: 7280186443a102521984f7987e2a5664c63567cc646f7f5b1867893cdf518ac71643a5051fa40bae050be5bd752fb958ca1b01f14f305d01c643310a44b189b2
+  data.tar.gz: 710daee003dd37bbc49eb854d3ce106b4100660ab105038711304846271238e2058101590a9f32a4215990322dd3c40adb6b76a3056f1cc9e90ed4054e02c806

data/.npmignore

@@ -0,0 +1,25 @@
+# Ruby gem files
+*.gem
+*.gemspec
+Gemfile
+Gemfile.lock
+Rakefile
+bin/
+lib/
+test/
+app/
+config/
+docs/
+.ruby-version
+.yardoc
+.rubocop.yml
+
+# Other files
+.git/
+.github/
+.gitignore
+.DS_Store
+.rspec_status
+pkg/
+tmp/
+coverage/ 

data/.npmrc

@@ -0,0 +1,2 @@
+bin-links=false
+save-exact=true 

data/.rubocop.yml

@@ -0,0 +1,18 @@
+inherit_gem:
+  rubocop-rails-omakase: rubocop.yml
+
+AllCops:
+  TargetRubyVersion: 3.3.8
+  NewCops: enable
+  Exclude:
+    - 'test/dummy/**/*'
+    - 'bin/**/*'
+    - 'tmp/**/*'
+    - 'vendor/**/*'
+    - 'node_modules/**/*'
+
+Style/StringLiterals:
+  EnforcedStyle: double_quotes
+
+Style/StringLiteralsInInterpolation:
+  EnforcedStyle: double_quotes

data/CHANGELOG.md

@@ -0,0 +1,37 @@
+## [Unreleased]
+
+## [0.3.1] - 2025-05-20
+
+- Fixed compatibility with Solid Queue standard schema structure
+- Updated queries to use `scheduled_at` instead of `run_at`
+- Improved job status tracking via the appropriate Solid Queue tables
+- Updated README to clarify that this dashboard is exclusively for Solid Queue
+
+## [0.3.0] - 2025-05-19
+
+- Updated tailwindcss-rails dependency to ~> 4.0
+- Updated turbo-rails dependency to ~> 2.0
+- Improved compatibility with Rails 8.0.2
+
+## [0.2.2] - 2025-05-18
+
+- Fixed CI workflow to run RuboCop and fail the build if there are issues
+- Added a CHANGELOG.md file
+- Added a Gemfile.lock file
+
+## [0.2.1] - 2023-07-30
+
+- Updated UI color scheme from indigo to sky blue
+- Fixed Tailwind CSS configuration and build process
+
+## [0.2.0] - 2023-07-28
+
+- Added CI workflow with GitHub Actions
+- Integrated RuboCop with Rails Omakase style
+- Added proper test setup including unit and integration tests
+- Improved engine compatibility with Rails 8 asset systems
+- Added developer documentation and test helpers
+
+## [0.1.0] - 2023-07-25
+
+- Initial release

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,16 @@
+# Community Guidelines for Conduct
+
+Modern Queue Dashboard follows the Ruby on Rails guidelines for conduct in all collaborative spaces, including mailing lists, submitted patches, commit comments, and discussions:
+
+* Participants are expected to be tolerant of opposing views.
+* Participants must ensure that their language and actions are free from personal attacks and disparaging remarks.
+* When interpreting the words and actions of others, participants should always assume good intentions.
+* Behavior that could reasonably be considered harassment will not be tolerated.
+
+## Reporting
+
+If you believe these guidelines have been violated, please contact the project maintainers.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Ruby on Rails Community Guidelines for Conduct](https://rubyonrails.org/conduct).

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2025 Clayton Lengel-Zigich
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,168 @@
+# Modern Queue Dashboard
+
+A mountable Rails engine that provides a clean, Hotwire-powered dashboard **specifically designed for monitoring [Solid Queue](https://github.com/basecamp/solid_queue)** jobs. Built with Tailwind CSS, Turbo frames, and Stimulus controllers.
+
+![Dashboard Screenshot](screenshots/dashboard.png)
+
+## Features
+
+* High-level metrics - counts for pending, scheduled, running, completed and failed jobs
+* Per-queue statistics - job counts and latency metrics
+* Job details - arguments, timestamps, state transitions, and error information
+* Real-time updates - auto-refreshing metrics via Turbo Stream polling
+* Clean UI - responsive interface using Tailwind CSS
+* Zero setup - install, mount, and go
+
+## Requirements
+
+* Rails 8.0+
+* Ruby 3.3.8+
+* **Solid Queue 1.1+** (this dashboard is exclusively for Solid Queue and does not support other job backends)
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem "modern_queue_dashboard"
+```
+
+And then execute:
+
+```bash
+bundle install
+```
+
+## Mounting the Dashboard
+
+Add the following to your `config/routes.rb`:
+
+```ruby
+Rails.application.routes.draw do
+  # ... your other routes
+
+  # Mount the dashboard at /queue-dashboard
+  mount ModernQueueDashboard::Engine, at: "/queue-dashboard"
+end
+```
+
+## Security
+
+The dashboard doesn't include authentication by itself. You should restrict access using your application's authentication system.
+
+### With Devise
+
+```ruby
+# In config/routes.rb
+authenticate :user, -> { current_user.admin? } do
+  mount ModernQueueDashboard::Engine, at: "/queue-dashboard"
+end
+```
+
+### With Basic Auth
+
+```ruby
+# In config/routes.rb
+require "authenticated_constraint"
+
+constraints AuthenticatedConstraint.new do
+  mount ModernQueueDashboard::Engine, at: "/queue-dashboard"
+end
+
+# In lib/authenticated_constraint.rb
+class AuthenticatedConstraint
+  def matches?(request)
+    return false unless request.session[:user_id]
+    user = User.find_by(id: request.session[:user_id])
+    user && user.admin?
+  end
+end
+```
+
+### With HTTP Basic Auth
+
+```ruby
+# In config/routes.rb
+mount ModernQueueDashboard::Engine, at: "/queue-dashboard", constraints: lambda { |request|
+  ActiveSupport::SecurityUtils.secure_compare(
+    ::Digest::SHA256.hexdigest(request.headers["Authorization"].to_s),
+    ::Digest::SHA256.hexdigest("Basic #{Base64.encode64("username:password")}")
+  )
+}
+```
+
+## Configuration
+
+You can configure the dashboard by creating an initializer:
+
+```ruby
+# config/initializers/modern_queue_dashboard.rb
+ModernQueueDashboard.configure do |config|
+  config.refresh_interval = 5 # seconds
+  config.time_zone = "UTC"
+end
+```
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. Then, run the following:
+
+```bash
+# Run unit tests
+bundle exec rake unit_tests
+
+# Run unit tests + RuboCop style checks
+bundle exec rake ci
+
+# Run just RuboCop
+bundle exec rubocop
+```
+
+### Building Tailwind CSS
+
+The dashboard uses Tailwind CSS for styling. When making changes to the styles, you need to rebuild the CSS file:
+
+```bash
+# Install Node.js dependencies (only needed once)
+npm install -D tailwindcss
+
+# Build the CSS file
+bin/build
+```
+
+This will process the Tailwind directives in `app/assets/stylesheets/modern_queue_dashboard.css` and output the compiled CSS to `app/assets/builds/modern_queue_dashboard.css`.
+
+### Dummy Application
+
+The gem includes a dummy Rails application in `test/dummy` for integration testing and development:
+
+```bash
+# Start the dummy app server
+cd test/dummy
+bin/rails server
+
+# Start the solid_queue worker
+cd test/dummy
+bin/rails solid_queue:process
+```
+
+Then visit http://localhost:3000 and navigate to http://localhost:3000/queue-dashboard to see the dashboard.
+
+### CI Process
+
+The CI pipeline runs on GitHub Actions and includes:
+- Unit tests for the gem
+- RuboCop style checks using the Rails Omakase style guide
+- (Optional) Integration tests with the dummy application
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/clayton/modern_queue_dashboard. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [code of conduct](https://github.com/clayton/modern_queue_dashboard/blob/main/CODE_OF_CONDUCT.md).
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+
+## Code of Conduct
+
+Everyone interacting in the Modern Queue Dashboard project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/clayton/modern_queue_dashboard/blob/main/CODE_OF_CONDUCT.md).

data/Rakefile

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+require "bundler/gem_tasks"
+require "rake/testtask"
+
+# Main test task for gem's unit tests
+Rake::TestTask.new(:unit_tests) do |t|
+  t.libs << "test"
+  t.test_files = FileList["test/**/*_test.rb"].exclude("test/dummy/**/*_test.rb")
+end
+
+# Simple task that runs everything in sequence
+desc "Run all tests and quality checks"
+task :ci do
+  failed = false
+
+  # Run unit tests
+  puts "\n== Running unit tests =="
+  Rake::Task["unit_tests"].invoke
+
+  # Run dummy app tests if they exist, but don't fail the build if they fail
+  if File.directory?("test/dummy/test/integration")
+    puts "\n== Running integration tests (optional) =="
+    unless system("cd test/dummy && bin/rails test test/integration 2>/dev/null")
+      puts "Integration tests failed or could not run. This is allowed in CI."
+    end
+  end
+
+  # Always run Rubocop and fail the build if there are issues
+  puts "\n== Running RuboCop (Rails Omakase style) =="
+  unless system("bundle exec rubocop")
+    puts "\nRuboCop found issues - failing the build"
+    failed = true
+  end
+
+  # Fail the build if any step failed
+  fail "CI task failed" if failed
+end
+
+# More strict version for CI environments
+desc "Run all tests and quality checks strictly (for CI)"
+task :ci_strict do
+  failed = false
+
+  # Run unit tests
+  puts "\n== Running unit tests =="
+  Rake::Task["unit_tests"].invoke
+
+  # Run dummy app tests if they exist
+  if File.directory?("test/dummy/test/integration")
+    puts "\n== Running integration tests =="
+    unless system("cd test/dummy && bin/rails test test/integration")
+      puts "Warning: Integration tests failed or could not run"
+      failed = true
+    end
+  end
+
+  # Run Rubocop if available
+  if system("which rubocop > /dev/null 2>&1")
+    puts "\n== Running RuboCop =="
+    system("rubocop --format simple")
+    failed = true unless $?.success?
+  end
+
+  # Fail the build if any step failed
+  raise "CI task failed" if failed
+end
+
+# Set default task to run everything
+task default: :ci

data/app/assets/builds/modern_queue_dashboard.css

@@ -0,0 +1 @@
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.mx-auto{margin-left:auto;margin-right:auto}.mb-4{margin-bottom:1rem}.flex{display:flex}.table{display:table}.grid{display:grid}.min-h-screen{min-height:100vh}.min-w-full{min-width:100%}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.items-center{align-items:center}.gap-4{gap:1rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-gray-200>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(229 231 235/var(--tw-divide-opacity,1))}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.border{border-width:1px}.border-red-400{--tw-border-opacity:1;border-color:rgb(248 113 113/var(--tw-border-opacity,1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.tracking-wider{letter-spacing:.05em}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity,1))}.text-sky-500{--tw-text-opacity:1;color:rgb(14 165 233/var(--tw-text-opacity,1))}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.jobs-container{border-radius:.25rem;--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));padding:1rem;--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@media (min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width:1024px){.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}

data/app/assets/builds/modern_queue_dashboard.js

@@ -0,0 +1,19 @@
+// Modern Queue Dashboard JavaScript - This is a placeholder
+// In a real application, this would be compiled
+console.log('Modern Queue Dashboard loaded'); 
+
+// Add auto-refresh functionality
+document.addEventListener('turbo:load', () => {
+  const dashboardElement = document.querySelector('.modern-queue-dashboard');
+  
+  if (dashboardElement) {
+    // Get refresh interval from data attribute (or default to 5000ms)
+    const refreshInterval = (parseInt(dashboardElement.dataset.refreshInterval) || 5) * 1000;
+    
+    console.log(`Setting dashboard refresh interval: ${refreshInterval}ms`);
+    
+    setInterval(() => {
+      Turbo.visit(window.location.href, { action: 'replace' });
+    }, refreshInterval);
+  }
+}); 

data/app/assets/javascripts/modern_queue_dashboard.js

@@ -0,0 +1,18 @@
+// Modern Queue Dashboard JavaScript
+console.log('Modern Queue Dashboard loaded');
+
+// Add auto-refresh functionality
+document.addEventListener('turbo:load', () => {
+  const dashboardElement = document.querySelector('.modern-queue-dashboard');
+  
+  if (dashboardElement) {
+    // Get refresh interval from data attribute (or default to 5000ms)
+    const refreshInterval = (parseInt(dashboardElement.dataset.refreshInterval) || 5) * 1000;
+    
+    console.log(`Setting dashboard refresh interval: ${refreshInterval}ms`);
+    
+    setInterval(() => {
+      Turbo.visit(window.location.href, { action: 'replace' });
+    }, refreshInterval);
+  }
+}); 

data/app/assets/stylesheets/modern_queue_dashboard.css

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom styles for Modern Queue Dashboard */
+.jobs-container {
+  @apply bg-white shadow rounded p-4;
+} 

data/app/controllers/modern_queue_dashboard/application_controller.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module ModernQueueDashboard
+  class ApplicationController < ::ApplicationController
+    layout "modern_queue_dashboard/application"
+  end
+end

data/app/controllers/modern_queue_dashboard/dashboard_controller.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module ModernQueueDashboard
+  class DashboardController < ApplicationController
+    def index
+      @metrics = Metrics.summary
+      @queues  = QueueSummary.with_stats.limit(10)
+    end
+  end
+end

data/app/controllers/modern_queue_dashboard/queues_controller.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module ModernQueueDashboard
+  class QueuesController < ApplicationController
+    def index
+      @queues = QueueSummary.with_stats
+    end
+
+    def show
+      @queue_name = params[:id]
+      @queue = QueueSummary.with_stats.detect { |q| q.name == @queue_name }
+
+      return if @queue
+
+      flash[:error] = "Queue not found"
+      redirect_to queues_path
+    end
+  end
+end

data/app/models/modern_queue_dashboard/metrics.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module ModernQueueDashboard
+  Metric = Struct.new(:key, :label, :value, keyword_init: true)
+
+  class Metrics
+    class << self
+      def summary
+        [
+          Metric.new(key: :pending,   label: "Pending",   value: pending_count),
+          Metric.new(key: :scheduled, label: "Scheduled", value: scheduled_count),
+          Metric.new(key: :running,   label: "Running",   value: running_count),
+          Metric.new(key: :failed,    label: "Failed",    value: failed_count),
+          Metric.new(key: :completed, label: "Completed", value: completed_count),
+          Metric.new(key: :latency,   label: "Latency",   value: latency_seconds)
+        ]
+      end
+
+      private
+
+      def pending_count
+        SolidQueue::Job.where("run_at <= ?", Time.current).count
+      end
+
+      def scheduled_count
+        SolidQueue::Job.where("run_at > ?", Time.current).count
+      end
+
+      def running_count
+        SolidQueue::Execution.where(finished_at: nil).count
+      end
+
+      def failed_count
+        SolidQueue::FailedExecution.count
+      end
+
+      def completed_count
+        SolidQueue::Execution.where.not(finished_at: nil).count
+      end
+
+      def latency_seconds
+        oldest = SolidQueue::Job.order(:created_at).limit(1).pick(:created_at)
+        return 0 unless oldest
+
+        (Time.current - oldest).to_i
+      end
+    end
+  end
+end

data/app/models/modern_queue_dashboard/queue_summary.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module ModernQueueDashboard
+  QueueStat = Struct.new(:name, :pending, :scheduled, :running, :failed, :latency, keyword_init: true)
+
+  class QueueSummary
+    class << self
+      def with_stats
+        queue_names.map { |q| stats_for(q) }.sort_by(&:name)
+      end
+
+      private
+
+      def queue_names
+        SolidQueue::Job.distinct.pluck(:queue_name)
+      end
+
+      def stats_for(name)
+        # Pending: Jobs scheduled for now or in the past but not finished
+        pending = SolidQueue::Job.where(queue_name: name)
+                                .where("scheduled_at <= ? AND finished_at IS NULL", Time.current)
+                                .count
+
+        # Scheduled: Jobs scheduled for the future
+        scheduled = SolidQueue::Job.where(queue_name: name)
+                                  .where("scheduled_at > ? AND finished_at IS NULL", Time.current)
+                                  .count
+
+        # Running: Jobs that are currently claimed but not finished
+        running = SolidQueue::ClaimedExecution.joins("INNER JOIN solid_queue_jobs ON solid_queue_jobs.id = solid_queue_claimed_executions.job_id")
+                                            .where("solid_queue_jobs.queue_name = ?", name)
+                                            .count
+
+        # Failed: Jobs that have failed executions
+        failed = SolidQueue::FailedExecution.joins("INNER JOIN solid_queue_jobs ON solid_queue_jobs.id = solid_queue_failed_executions.job_id")
+                                          .where("solid_queue_jobs.queue_name = ?", name)
+                                          .count
+
+        # Latency: Time since oldest unfinished job was scheduled
+        oldest_scheduled_at = SolidQueue::Job.where(queue_name: name)
+                                           .where(finished_at: nil)
+                                           .order(:scheduled_at)
+                                           .limit(1)
+                                           .pick(:scheduled_at)
+
+        latency = oldest_scheduled_at ? (Time.current - oldest_scheduled_at).to_i : 0
+
+        QueueStat.new(name:, pending:, scheduled:, running:, failed:, latency:)
+      end
+    end
+  end
+end

data/app/views/layouts/modern_queue_dashboard/application.html.erb

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>ModernQueueDashboard</title>
+    <%= csp_meta_tag %>
+    <%= csrf_meta_tags %>
+
+    <%= stylesheet_link_tag "modern_queue_dashboard", media: "all", "data-turbo-track": "reload" %>
+    <%= javascript_include_tag "modern_queue_dashboard", "data-turbo-track": "reload", defer: true %>
+  </head>
+
+  <body class="bg-gray-100 min-h-screen">
+    <%= yield %>
+  </body>
+</html> 

data/app/views/modern_queue_dashboard/dashboard/index.html.erb

@@ -0,0 +1,51 @@
+<div class="container mx-auto p-6 space-y-6 modern-queue-dashboard" 
+     data-refresh-interval="<%= ModernQueueDashboard.configuration.refresh_interval %>">
+  <h1 class="text-3xl font-semibold">Modern Queue Dashboard</h1>
+  
+  <div class="text-sm text-gray-500 mb-4">
+    Refresh interval: <%= ModernQueueDashboard.configuration.refresh_interval %> seconds | 
+    Timezone: <%= ModernQueueDashboard.configuration.time_zone %>
+  </div>
+
+  <!-- Metric Cards -->
+  <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+    <% @metrics.each do |metric| %>
+      <turbo-frame id="metric_<%= metric.key %>">
+        <div class="bg-white shadow-sm rounded p-4 text-center">
+          <p class="text-sm text-gray-500"><%= metric.label %></p>
+          <p class="text-2xl font-bold text-sky-500"><%= metric.value %></p>
+        </div>
+      </turbo-frame>
+    <% end %>
+  </div>
+
+  <!-- Queue Table -->
+  <div class="bg-white shadow rounded">
+    <table class="min-w-full divide-y divide-gray-200">
+      <thead class="bg-gray-50">
+        <tr>
+          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Queue</th>
+          <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Pending</th>
+          <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Scheduled</th>
+          <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Running</th>
+          <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Failed</th>
+          <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Latency</th>
+        </tr>
+      </thead>
+      <tbody class="bg-white divide-y divide-gray-200">
+        <% @queues.each do |queue| %>
+          <tr>
+            <td class="px-6 py-4 whitespace-nowrap font-medium text-sky-500">
+              <%= link_to queue.name, queue_path(queue.name), data: { turbo_frame: "_top" } %>
+            </td>
+            <td class="px-6 py-4 text-right"><%= queue.pending %></td>
+            <td class="px-6 py-4 text-right"><%= queue.scheduled %></td>
+            <td class="px-6 py-4 text-right"><%= queue.running %></td>
+            <td class="px-6 py-4 text-right"><%= queue.failed %></td>
+            <td class="px-6 py-4 text-right"><%= queue.latency %> ms</td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+</div>