pgbus 0.2.4 → 0.2.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: daac3606ba66624f54b5b6cf8db0830827c2ce0492b7d6d38ce347d1e0f3aeb2
-  data.tar.gz: ad7eb6ea7beae1e07a813cac5cac37980671f8106f2ac7444a127a81d6f7a2e3
+  metadata.gz: 0d12150a0ea8aea034f08e626bfa2c553cf75349eb502d7a0fe0a50a867aa11b
+  data.tar.gz: 990216a4e6b7db7be81e888d90fe2d56ea536fa1e64a2507206dcd5524a255c5
 SHA512:
-  metadata.gz: f7a513fd3e2f7aac5a3c0db040a3e7b6b11b6c4c0f619f6f0d37ebbf3e2cd6336737af20e4a7a00da19a1937d5be2b8e24d666483bf661005422c04bbac1805c
-  data.tar.gz: 255c0382fbc4f4b797577757ebe5bfa9611f350456292d78e41678d6ebe834c52a5588e2f902159b0c5467becb076f0b724b8dc782b21dfb0d423404dc31d178
+  metadata.gz: f7e706c2824a4f00401027bd08df2c663502586a0a48fdd2e4150341a1e50fac520c50a503b2a6cff2d48d482d069ac66a605b9ce73a14513d9e65537da45f88
+  data.tar.gz: 64ad1a0978e42ddd271d50c224540bb3200e291912e3fde1bee72fe30eb74470b60833580a0a211785aa0830eb640dde463546c3bd748a33e9de0f903e79abad

data/README.md

@@ -211,7 +211,7 @@ mount Pgbus::Engine => "/pgbus"
 
 The dashboard shows queues, jobs, processes, failures, dead letter messages, and event subscribers. It auto-refreshes via Turbo Frames with no WebSocket dependency.
 
-Protect it in production:
+Protect it in production with a simple auth lambda:
 
 ```ruby
 Pgbus.configure do |config|
@@ -221,6 +221,24 @@ Pgbus.configure do |config|
 end
 ```
 
+Or inherit from your own authenticated controller (like mission_control-jobs):
+
+```ruby
+Pgbus.configure do |config|
+  config.base_controller_class = "Admin::BaseController"
+end
+```
+
+When `base_controller_class` is set, all dashboard controllers inherit from that class instead of `ActionController::Base`. This is the recommended approach when mounting the dashboard inside an authenticated namespace -- your base controller's `before_action` filters, helper methods, and authentication logic apply automatically without monkey-patching.
+
+Add a "back to app" button in the dashboard nav to return to your main application:
+
+```ruby
+Pgbus.configure do |config|
+  config.return_to_app_url = "/admin"
+end
+```
+
 ## Concurrency controls
 
 Limit how many jobs with the same key can run concurrently:
@@ -624,6 +642,8 @@ The dispatcher runs archive compaction as part of its maintenance loop, deleting
 | `outbox_batch_size` | `100` | Max entries per outbox poll cycle |
 | `outbox_retention` | `86400` | Seconds to keep published outbox entries (1 day) |
 | `idempotency_ttl` | `604800` | Seconds to keep processed event records (7 days, cleaned hourly) |
+| `base_controller_class` | `"::ActionController::Base"` | Base class for dashboard controllers (string, constantized at load time) |
+| `return_to_app_url` | `nil` | URL for "back to app" button in dashboard nav (nil hides the button) |
 | `web_auth` | `nil` | Lambda for dashboard authentication |
 | `web_refresh_interval` | `5000` | Dashboard auto-refresh interval in milliseconds |
 | `web_live_updates` | `true` | Enable Turbo Frames auto-refresh on dashboard |

data/app/controllers/pgbus/application_controller.rb

@@ -1,7 +1,13 @@
 # frozen_string_literal: true
 
 module Pgbus
-  class ApplicationController < ActionController::Base
+  class ApplicationController < Pgbus.configuration.base_controller_class.constantize
+    # Ensure core ActionController modules are available even when the
+    # base controller is a slim subclass that may not include them all.
+    ActionController::Base::MODULES.each do |mod|
+      include mod unless self < mod
+    end
+
     include Web::Authentication
 
     protect_from_forgery with: :exception
@@ -10,7 +16,7 @@ module Pgbus
 
     layout "pgbus/application"
 
-    helper Pgbus::ApplicationHelper
+    helper Pgbus::ApplicationHelper unless self < Pgbus::ApplicationHelper
 
     # Make `pgbus` route proxy available in views (e.g. pgbus.root_path).
     # With isolate_namespace, the non-prefixed helpers (root_path) work inside
@@ -57,8 +63,11 @@ module Pgbus
     end
 
     def available_locales
-      @available_locales ||= Dir[Pgbus::Engine.root.join("config", "locales", "*.yml")]
-                             .map { |f| File.basename(f, ".yml").to_sym }
+      @available_locales ||= begin
+        pgbus_locales = Dir[Pgbus::Engine.root.join("config", "locales", "*.yml")]
+                        .map { |f| File.basename(f, ".yml").to_sym }
+        pgbus_locales & I18n.available_locales
+      end
     end
     helper_method :available_locales
 

data/app/helpers/pgbus/application_helper.rb

@@ -158,6 +158,16 @@ module Pgbus
       link_to label, path, class: css
     end
 
+    def pgbus_mobile_nav_link(label, path)
+      active = request.path == path || (path != pgbus.root_path && request.path.start_with?(path))
+      css = if active
+              "block rounded-md px-3 py-2 text-base font-medium text-white bg-gray-800"
+            else
+              "block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700"
+            end
+      link_to label, path, class: css
+    end
+
     LOCALE_NAMES = {
       da: "Dansk",
       de: "Deutsch",

data/app/models/pgbus/application_record.rb

@@ -1,7 +1,10 @@
 # frozen_string_literal: true
 
 module Pgbus
-  class ApplicationRecord < ActiveRecord::Base
+  # Backward-compatible alias — host apps that subclassed
+  # Pgbus::ApplicationRecord will continue to work.
+  # New code should inherit from Pgbus::BusRecord directly.
+  class ApplicationRecord < BusRecord
     self.abstract_class = true
   end
 end

data/app/models/pgbus/batch_entry.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Pgbus
-  class BatchEntry < ApplicationRecord
+  class BatchEntry < BusRecord
     self.table_name = "pgbus_batches"
 
     COUNTER_COLUMNS = %w[completed_jobs discarded_jobs].freeze

data/app/models/pgbus/blocked_execution.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Pgbus
-  class BlockedExecution < ApplicationRecord
+  class BlockedExecution < BusRecord
     self.table_name = "pgbus_blocked_executions"
 
     scope :for_key, ->(key) { where(concurrency_key: key) }

data/app/models/pgbus/job_lock.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Pgbus
-  class JobLock < Pgbus::ApplicationRecord
+  class JobLock < BusRecord
     self.table_name = "pgbus_job_locks"
 
     # States:

data/app/models/pgbus/job_stat.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Pgbus
-  class JobStat < Pgbus::ApplicationRecord
+  class JobStat < BusRecord
     self.table_name = "pgbus_job_stats"
 
     scope :since, ->(time) { where("created_at >= ?", time) }

data/app/models/pgbus/outbox_entry.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Pgbus
-  class OutboxEntry < Pgbus::ApplicationRecord
+  class OutboxEntry < BusRecord
     self.table_name = "pgbus_outbox_entries"
 
     scope :unpublished, -> { where(published_at: nil) }

data/app/models/pgbus/process_entry.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Pgbus
-  class ProcessEntry < ApplicationRecord
+  class ProcessEntry < BusRecord
     self.table_name = "pgbus_processes"
 
     scope :stale, ->(threshold) { where("last_heartbeat_at < ?", threshold) }

data/app/models/pgbus/processed_event.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Pgbus
-  class ProcessedEvent < ApplicationRecord
+  class ProcessedEvent < BusRecord
     self.table_name = "pgbus_processed_events"
 
     scope :expired, ->(before) { where("processed_at < ?", before) }

data/app/models/pgbus/queue_state.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Pgbus
-  class QueueState < Pgbus::ApplicationRecord
+  class QueueState < BusRecord
     self.table_name = "pgbus_queue_states"
 
     scope :paused, -> { where(paused: true) }

data/app/models/pgbus/recurring_execution.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Pgbus
-  class RecurringExecution < ApplicationRecord
+  class RecurringExecution < BusRecord
     self.table_name = "pgbus_recurring_executions"
 
     validates :task_key, presence: true

data/app/models/pgbus/recurring_task.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Pgbus
-  class RecurringTask < ApplicationRecord
+  class RecurringTask < BusRecord
     self.table_name = "pgbus_recurring_tasks"
 
     validates :key, presence: true, uniqueness: true

data/app/models/pgbus/semaphore.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Pgbus
-  class Semaphore < ApplicationRecord
+  class Semaphore < BusRecord
     self.table_name = "pgbus_semaphores"
 
     scope :expired, ->(now = Time.current) { where("expires_at < ? OR value <= 0", now) }

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

@@ -9,6 +9,43 @@
        Applied before Tailwind CDN loads so the background is correct immediately. */
     html.dark { background-color: #030712; } /* gray-950 */
     html.dark body { background-color: #030712; }
+
+    /* Responsive tables: stack rows as cards on small screens */
+    @media (max-width: 1023px) {
+      .pgbus-table thead { display: none; }
+      .pgbus-table tbody tr {
+        display: block;
+        margin-bottom: 0.75rem;
+        border-radius: 0.5rem;
+        padding: 0.75rem;
+        border: 1px solid #e5e7eb;
+      }
+      html.dark .pgbus-table tbody tr { border-color: #374151; }
+      .pgbus-table tbody td {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        padding: 0.25rem 0;
+        border: none;
+        text-align: right;
+      }
+      .pgbus-table tbody td::before {
+        content: attr(data-label);
+        font-weight: 600;
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        color: #6b7280;
+        text-align: left;
+        margin-right: 1rem;
+        flex-shrink: 0;
+      }
+      html.dark .pgbus-table tbody td::before { color: #9ca3af; }
+      .pgbus-table tbody td[colspan] {
+        display: block;
+        text-align: center;
+      }
+      .pgbus-table tbody td[colspan]::before { display: none; }
+    }
   </style>
   <script src="https://cdn.tailwindcss.com"></script>
   <script>
@@ -23,6 +60,15 @@
       var isDark = document.documentElement.classList.toggle('dark');
       localStorage.setItem('pgbus-dark', isDark);
     }
+    // Mobile menu toggle
+    function toggleMobileMenu() {
+      var menu = document.getElementById('pgbus-mobile-menu');
+      var openIcon = document.getElementById('pgbus-menu-open');
+      var closeIcon = document.getElementById('pgbus-menu-close');
+      menu.classList.toggle('hidden');
+      openIcon.classList.toggle('hidden');
+      closeIcon.classList.toggle('hidden');
+    }
     // Close locale dropdown when clicking outside
     document.addEventListener('click', function(e) {
       var switcher = document.getElementById('pgbus-locale-switcher');
@@ -43,8 +89,10 @@
         if (document.hidden) return;
         document.querySelectorAll("turbo-frame[data-auto-refresh]")
           .forEach(frame => {
-            if (!frame.src && frame.dataset.src) frame.src = frame.dataset.src;
-            if (frame.src) frame.reload();
+            try {
+              if (!frame.src && frame.dataset.src) frame.src = frame.dataset.src;
+              if (frame.src) frame.reload();
+            } catch (_) { /* Turbo may abort in-flight fetches during navigation */ }
           });
       }
       function start() { timer = setInterval(refreshFrames, interval); }
@@ -61,13 +109,24 @@
     <nav class="bg-gray-900 dark:bg-gray-950 border-b border-gray-800">
       <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <div class="flex h-14 items-center justify-between">
+          <!-- Left: brand + desktop nav -->
           <div class="flex items-center space-x-8">
-            <%= link_to pgbus.root_path, class: "flex items-center space-x-2" do %>
-              <span class="text-lg font-bold text-white"><%= t("pgbus.layout.brand") %></span>
-              <span class="rounded bg-gray-700 px-1.5 py-0.5 text-xs text-gray-300"><%= Pgbus::VERSION %></span>
-            <% end %>
+            <div class="flex items-center space-x-3">
+              <% if Pgbus.configuration.return_to_app_url %>
+                <a href="<%= Pgbus.configuration.return_to_app_url %>" class="rounded-md p-1.5 text-gray-400 hover:text-white hover:bg-gray-700" title="<%= t("pgbus.layout.return_to_app") %>">
+                  <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"/>
+                  </svg>
+                </a>
+              <% end %>
+              <%= link_to pgbus.root_path, class: "flex items-center space-x-2" do %>
+                <span class="text-lg font-bold text-white"><%= t("pgbus.layout.brand") %></span>
+                <span class="rounded bg-gray-700 px-1.5 py-0.5 text-xs text-gray-300"><%= Pgbus::VERSION %></span>
+              <% end %>
+            </div>
 
-            <div class="flex space-x-1">
+            <!-- Desktop nav links (hidden on small screens) -->
+            <div class="hidden lg:flex space-x-1">
               <%= pgbus_nav_link t("pgbus.layout.nav.dashboard"), pgbus.root_path %>
               <%= pgbus_nav_link t("pgbus.layout.nav.queues"), pgbus.queues_path %>
               <%= pgbus_nav_link t("pgbus.layout.nav.jobs"), pgbus.jobs_path %>
@@ -81,6 +140,7 @@
             </div>
           </div>
 
+          <!-- Right: locale, dark mode, hamburger -->
           <div class="flex items-center space-x-2">
             <!-- Locale switcher -->
             <div class="relative" id="pgbus-locale-switcher">
@@ -98,17 +158,46 @@
               </div>
             </div>
 
-          <button onclick="toggleDarkMode()" class="rounded-md p-2 text-gray-400 hover:text-white focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-900" aria-label="<%= t("pgbus.layout.toggle_dark_mode") %>">
-            <svg class="h-5 w-5 hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
-              <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/>
-            </svg>
-            <svg class="h-5 w-5 block dark:hidden" fill="currentColor" viewBox="0 0 20 20">
-              <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/>
-            </svg>
-          </button>
+            <!-- Dark mode toggle -->
+            <button onclick="toggleDarkMode()" class="rounded-md p-2 text-gray-400 hover:text-white focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-900" aria-label="<%= t("pgbus.layout.toggle_dark_mode") %>">
+              <svg class="h-5 w-5 hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
+                <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/>
+              </svg>
+              <svg class="h-5 w-5 block dark:hidden" fill="currentColor" viewBox="0 0 20 20">
+                <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/>
+              </svg>
+            </button>
+
+            <!-- Mobile menu button (hidden on large screens) -->
+            <button onclick="toggleMobileMenu()" class="lg:hidden rounded-md p-2 text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500" aria-label="<%= t("pgbus.layout.toggle_menu") %>">
+              <!-- Hamburger icon -->
+              <svg id="pgbus-menu-open" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/>
+              </svg>
+              <!-- Close icon (hidden by default) -->
+              <svg id="pgbus-menu-close" class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
+              </svg>
+            </button>
           </div>
         </div>
       </div>
+
+      <!-- Mobile menu (hidden by default, shown on small screens when toggled) -->
+      <div id="pgbus-mobile-menu" class="hidden lg:hidden border-t border-gray-800">
+        <div class="space-y-1 px-3 py-3">
+          <%= pgbus_mobile_nav_link t("pgbus.layout.nav.dashboard"), pgbus.root_path %>
+          <%= pgbus_mobile_nav_link t("pgbus.layout.nav.queues"), pgbus.queues_path %>
+          <%= pgbus_mobile_nav_link t("pgbus.layout.nav.jobs"), pgbus.jobs_path %>
+          <%= pgbus_mobile_nav_link t("pgbus.layout.nav.recurring"), pgbus.recurring_tasks_path %>
+          <%= pgbus_mobile_nav_link t("pgbus.layout.nav.processes"), pgbus.processes_path %>
+          <%= pgbus_mobile_nav_link t("pgbus.layout.nav.events"), pgbus.events_path %>
+          <%= pgbus_mobile_nav_link t("pgbus.layout.nav.dlq"), pgbus.dead_letter_index_path %>
+          <%= pgbus_mobile_nav_link t("pgbus.layout.nav.outbox"), pgbus.outbox_index_path %>
+          <%= pgbus_mobile_nav_link t("pgbus.layout.nav.locks"), pgbus.locks_path %>
+          <%= pgbus_mobile_nav_link t("pgbus.layout.nav.insights"), pgbus.insights_path %>
+        </div>
+      </div>
     </nav>
 
     <!-- Flash messages -->

data/app/views/pgbus/dashboard/_processes_table.html.erb

@@ -2,7 +2,7 @@
   <div>
     <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-3"><%= t("pgbus.dashboard.processes_table.title") %></h2>
     <div class="overflow-hidden rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700">
-      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+      <table class="pgbus-table min-w-full divide-y divide-gray-200 dark:divide-gray-700">
         <thead class="bg-gray-50 dark:bg-gray-900">
           <tr>
             <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500"><%= t("pgbus.dashboard.processes_table.headers.kind") %></th>
@@ -14,10 +14,10 @@
         <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
           <% @processes.each do |p| %>
             <tr>
-              <td class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white"><%= p[:kind] %></td>
-              <td class="px-4 py-3 text-sm text-gray-500"><%= p[:hostname] %></td>
-              <td class="px-4 py-3 text-sm text-gray-500"><%= p[:pid] %></td>
-              <td class="px-4 py-3 text-sm"><%= pgbus_status_badge(p[:healthy]) %></td>
+              <td data-label="Kind" class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white"><%= p[:kind] %></td>
+              <td data-label="Host" class="px-4 py-3 text-sm text-gray-500"><%= p[:hostname] %></td>
+              <td data-label="PID" class="px-4 py-3 text-sm text-gray-500"><%= p[:pid] %></td>
+              <td data-label="Status" class="px-4 py-3 text-sm"><%= pgbus_status_badge(p[:healthy]) %></td>
             </tr>
           <% end %>
           <% if @processes.empty? %>

data/app/views/pgbus/dashboard/_queues_table.html.erb

@@ -6,7 +6,7 @@
     </div>
 
     <div class="overflow-hidden rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700">
-      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+      <table class="pgbus-table min-w-full divide-y divide-gray-200 dark:divide-gray-700">
         <thead class="bg-gray-50 dark:bg-gray-900">
           <tr>
             <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500"><%= t("pgbus.dashboard.queues_table.headers.queue") %></th>
@@ -19,14 +19,14 @@
         <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
           <% @queues.each do |q| %>
             <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 dark:bg-gray-900">
-              <td class="px-4 py-3 text-sm">
+              <td data-label="Queue" class="px-4 py-3 text-sm">
                 <%= link_to q[:name], pgbus.queue_path(name: q[:name]), class: "font-medium text-indigo-600 hover:text-indigo-500", data: { turbo_frame: "_top" } %>
                 <%= pgbus_queue_badge(q[:name]) %>
               </td>
-              <td class="px-4 py-3 text-sm text-right text-gray-700"><%= pgbus_number(q[:queue_length]) %></td>
-              <td class="px-4 py-3 text-sm text-right text-gray-700"><%= pgbus_number(q[:queue_visible_length]) %></td>
-              <td class="px-4 py-3 text-sm text-right text-gray-500"><%= q[:oldest_msg_age_sec] || "—" %></td>
-              <td class="px-4 py-3 text-sm text-right text-gray-500"><%= pgbus_number(q[:total_messages]) %></td>
+              <td data-label="Depth" class="px-4 py-3 text-sm text-right text-gray-700"><%= pgbus_number(q[:queue_length]) %></td>
+              <td data-label="Visible" class="px-4 py-3 text-sm text-right text-gray-700"><%= pgbus_number(q[:queue_visible_length]) %></td>
+              <td data-label="Oldest" class="px-4 py-3 text-sm text-right text-gray-500"><%= q[:oldest_msg_age_sec] || "—" %></td>
+              <td data-label="Total" class="px-4 py-3 text-sm text-right text-gray-500"><%= pgbus_number(q[:total_messages]) %></td>
             </tr>
           <% end %>
           <% if @queues.empty? %>

data/app/views/pgbus/dashboard/_recent_failures.html.erb

@@ -7,7 +7,7 @@
       <% end %>
     </div>
     <div class="overflow-hidden rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700">
-      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+      <table class="pgbus-table min-w-full divide-y divide-gray-200 dark:divide-gray-700">
         <thead class="bg-gray-50 dark:bg-gray-900">
           <tr>
             <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500"><%= t("pgbus.dashboard.recent_failures.headers.queue") %></th>
@@ -18,9 +18,9 @@
         <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
           <% @recent_failures.each do |f| %>
             <tr>
-              <td class="px-4 py-3 text-sm text-gray-700"><%= f["queue_name"] %></td>
-              <td class="px-4 py-3 text-sm text-red-600 truncate max-w-xs"><%= f["error_class"] %>: <%= truncate(f["error_message"].to_s, length: 60) %></td>
-              <td class="px-4 py-3 text-sm text-gray-500"><%= pgbus_time_ago(f["failed_at"]) %></td>
+              <td data-label="Queue" class="px-4 py-3 text-sm text-gray-700"><%= f["queue_name"] %></td>
+              <td data-label="Error" class="px-4 py-3 text-sm text-red-600 truncate max-w-xs"><%= f["error_class"] %>: <%= truncate(f["error_message"].to_s, length: 60) %></td>
+              <td data-label="Time" class="px-4 py-3 text-sm text-gray-500"><%= pgbus_time_ago(f["failed_at"]) %></td>
             </tr>
           <% end %>
           <% if @recent_failures.empty? %>

data/app/views/pgbus/dead_letter/_messages_table.html.erb

@@ -1,6 +1,6 @@
 <turbo-frame id="dlq-messages" data-auto-refresh data-src="<%= pgbus.dead_letter_index_path(frame: 'list') %>">
   <div class="overflow-hidden rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700">
-    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+    <table class="pgbus-table min-w-full divide-y divide-gray-200 dark:divide-gray-700">
       <thead class="bg-gray-50 dark:bg-gray-900">
         <tr>
           <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500"><%= t("pgbus.dead_letter.messages_table.headers.id") %></th>

data/app/views/pgbus/events/index.html.erb

@@ -4,7 +4,7 @@
 <div class="mb-8">
   <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-3"><%= t("pgbus.events.index.subscribers_title") %></h2>
   <div class="overflow-hidden rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700">
-    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+    <table class="pgbus-table min-w-full divide-y divide-gray-200 dark:divide-gray-700">
       <thead class="bg-gray-50 dark:bg-gray-900">
         <tr>
           <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500"><%= t("pgbus.events.index.subscribers_headers.pattern") %></th>
@@ -15,9 +15,9 @@
       <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
         <% @subscribers.each do |s| %>
           <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 dark:bg-gray-900">
-            <td class="px-4 py-3 text-sm font-mono text-indigo-600"><%= s[:pattern] %></td>
-            <td class="px-4 py-3 text-sm text-gray-900 dark:text-white"><%= s[:handler_class] %></td>
-            <td class="px-4 py-3 text-sm text-gray-500"><%= s[:queue_name] %></td>
+            <td data-label="Pattern" class="px-4 py-3 text-sm font-mono text-indigo-600"><%= s[:pattern] %></td>
+            <td data-label="Handler" class="px-4 py-3 text-sm text-gray-900 dark:text-white"><%= s[:handler_class] %></td>
+            <td data-label="Queue" class="px-4 py-3 text-sm text-gray-500"><%= s[:queue_name] %></td>
           </tr>
         <% end %>
         <% if @subscribers.empty? %>
@@ -32,7 +32,7 @@
 <div>
   <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-3"><%= t("pgbus.events.index.processed_title") %></h2>
   <div class="overflow-hidden rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700">
-    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+    <table class="pgbus-table min-w-full divide-y divide-gray-200 dark:divide-gray-700">
       <thead class="bg-gray-50 dark:bg-gray-900">
         <tr>
           <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500"><%= t("pgbus.events.index.processed_headers.event_id") %></th>
@@ -43,9 +43,9 @@
       <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
         <% @events.each do |e| %>
           <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 dark:bg-gray-900">
-            <td class="px-4 py-3 text-sm font-mono text-gray-900 dark:text-white"><%= e["event_id"] %></td>
-            <td class="px-4 py-3 text-sm text-gray-700"><%= e["handler_class"] %></td>
-            <td class="px-4 py-3 text-sm text-gray-500"><%= pgbus_time_ago(e["processed_at"]) %></td>
+            <td data-label="Event ID" class="px-4 py-3 text-sm font-mono text-gray-900 dark:text-white"><%= e["event_id"] %></td>
+            <td data-label="Handler" class="px-4 py-3 text-sm text-gray-700"><%= e["handler_class"] %></td>
+            <td data-label="Processed At" class="px-4 py-3 text-sm text-gray-500"><%= pgbus_time_ago(e["processed_at"]) %></td>
           </tr>
         <% end %>
         <% if @events.empty? %>