pgbus 0.2.5 → 0.2.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cfd2ea5ccec3e3715dbcf2dd409a652527cf1d9e18c60fe4d5797fd5cf5be6ec
-  data.tar.gz: 6983d4977aeb792ba0857884752a8b662a15164cde8cd6ee3bb5406d95d7f225
+  metadata.gz: 3e16e68e83d8c1963b60a9c2137d3fbd737512b7e0fed1566b5f1320ef33c470
+  data.tar.gz: 03d54ebcc0357a61b71bbb3f11fcafa662114245c3fedc33b58a83d40718ffc6
 SHA512:
-  metadata.gz: c6f3e19f1e3fe2d5eae02fe52dcd2878f5bbcb13cd7387a41b3902ad91cb8c20ce2d1e3c606488bdce1c901126d1192f7a34747e8746c397d016d0c2541a8828
-  data.tar.gz: da5ed5a1a2012d757547e3e2f1f48586a84e7d096df91a793d9ba18f76da881e52dab650d4fb3c605c4da6de06b1e8b58b0d11c99bd90e30ef64b3c368c44093
+  metadata.gz: 5579b34e30ee64cfff273975174d4023b921f8f64a98c1baa09df0673ccb5ba6a5db73566452a35feead0bb4584d8a969b5513efb34ada4614e2945fbc85790d
+  data.tar.gz: ea716b54c14023d91d440fb37db87358330ced5671365fd808e0e092a86963d5c2587519d7493e185c51c106a070eb5e49e36d79d441af37c5f2098528aea26e

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 |
@@ -687,7 +707,7 @@ pgbus help      # Show help
 The dashboard is a mountable Rails engine at `/pgbus` with:
 
 - **Overview** -- queue depths, enqueued count, active processes, failure count, throughput rate
-- **Queues** -- per-queue metrics, purge/pause/resume actions
+- **Queues** -- per-queue metrics, purge/pause/resume/delete actions
 - **Jobs** -- enqueued and failed jobs, retry/discard actions
 - **Dead letter** -- DLQ messages with retry/discard, bulk actions
 - **Processes** -- active workers/dispatcher/consumers with heartbeat status
@@ -696,7 +716,17 @@ The dashboard is a mountable Rails engine at `/pgbus` with:
 - **Locks** -- active job uniqueness locks with state (queued/executing), owner PID@hostname, age
 - **Insights** -- throughput chart (jobs/min), status distribution donut, slowest job classes table
 
-All tables use Turbo Frames for periodic auto-refresh without page reloads.
+All tables use Turbo Frames for periodic auto-refresh without page reloads. Destructive actions use styled confirmation dialogs (not browser `confirm()`), and flash messages appear as auto-dismissing toast notifications.
+
+### Queue management
+
+The queues page lets you manage PGMQ queues directly:
+
+- **Purge** -- removes all messages from the queue (the queue itself remains)
+- **Delete** -- permanently drops the queue from PGMQ (removes the queue table and metadata)
+- **Pause / Resume** -- pauses or resumes job processing for a queue
+
+All destructive actions require confirmation. Pause/resume and delete are available on both the queue index and detail pages.
 
 ### Dark mode
 

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

data/app/controllers/pgbus/queues_controller.rb

@@ -10,6 +10,7 @@ module Pgbus
       @queue = data_source.queue_detail(params[:name])
       redirect_to queues_path, alert: "Queue not found." and return unless @queue
 
+      @paused = data_source.queue_paused?(params[:name])
       @messages = data_source.jobs(queue_name: params[:name], page: page_param, per_page: per_page)
     end
 
@@ -18,6 +19,11 @@ module Pgbus
       redirect_to queue_path(name: params[:name]), notice: "Queue purged."
     end
 
+    def destroy
+      data_source.drop_queue(params[:name])
+      redirect_to queues_path, notice: t("pgbus.queues.destroy.success", name: params[:name])
+    end
+
     def pause
       data_source.pause_queue(params[:name], reason: params[:reason])
       redirect_to queue_path(name: params[:name]), notice: "Queue paused."

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/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');
@@ -35,6 +81,71 @@
   <script type="module">
     import * as Turbo from "https://esm.sh/@hotwired/turbo@8";
 
+    // -- Custom confirm dialog (replaces browser confirm) --
+    Turbo.config.forms.confirm = (message, element) => {
+      const dialog = document.getElementById("pgbus-confirm-dialog");
+      const messageEl = document.getElementById("pgbus-confirm-message");
+      const titleEl = document.getElementById("pgbus-confirm-title");
+      const confirmBtn = document.getElementById("pgbus-confirm-btn");
+      const iconEl = document.getElementById("pgbus-confirm-icon");
+
+      // Detect action type from the element
+      const turboMethod = element.getAttribute("data-turbo-method");
+      const isDelete = turboMethod === "delete";
+
+      // Set title based on action
+      titleEl.textContent = isDelete ? "<%= t("pgbus.dialogs.delete_title", default: "Delete") %>" : "<%= t("pgbus.dialogs.confirm_title", default: "Are you sure?") %>";
+      messageEl.textContent = message;
+
+      // Style confirm button based on action severity
+      confirmBtn.className = "rounded-md px-4 py-2 text-sm font-medium text-white focus:outline-none focus:ring-2";
+      if (isDelete) {
+        confirmBtn.classList.add("bg-red-600", "hover:bg-red-500", "focus:ring-red-500");
+        confirmBtn.textContent = "<%= t("pgbus.dialogs.delete", default: "Delete") %>";
+        iconEl.className = "flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-full bg-red-100 dark:bg-red-900/30";
+      } else {
+        confirmBtn.classList.add("bg-yellow-500", "hover:bg-yellow-400", "focus:ring-yellow-500");
+        confirmBtn.textContent = "<%= t("pgbus.dialogs.confirm", default: "Confirm") %>";
+        iconEl.className = "flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-full bg-yellow-100 dark:bg-yellow-900/30";
+      }
+
+      dialog.showModal();
+
+      return new Promise((resolve) => {
+        dialog.addEventListener("close", () => {
+          resolve(dialog.returnValue === "confirm");
+        }, { once: true });
+      });
+    };
+
+    // -- Toast notifications --
+    function showToast(message, type = "success") {
+      const container = document.getElementById("pgbus-toast-container");
+      const toast = document.createElement("div");
+
+      const colors = {
+        success: "bg-green-50 dark:bg-green-900/30 text-green-800 dark:text-green-300 border-green-200 dark:border-green-800",
+        error: "bg-red-50 dark:bg-red-900/30 text-red-800 dark:text-red-300 border-red-200 dark:border-red-800",
+        info: "bg-blue-50 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 border-blue-200 dark:border-blue-800",
+      };
+
+      toast.className = `rounded-md border p-3 text-sm shadow-lg transition-all duration-300 ${colors[type] || colors.info}`;
+      toast.textContent = message;
+      container.appendChild(toast);
+
+      setTimeout(() => {
+        toast.style.opacity = "0";
+        toast.style.transform = "translateX(100%)";
+        setTimeout(() => toast.remove(), 300);
+      }, 5000);
+    }
+
+    // Render flash toasts from <template> tags
+    document.querySelectorAll("template[data-pgbus-toast]").forEach(tpl => {
+      showToast(tpl.content.textContent.trim(), tpl.dataset.pgbusToast);
+      tpl.remove();
+    });
+
     <% if Pgbus.configuration.web_live_updates %>
     const interval = <%= Pgbus.configuration.web_refresh_interval %>;
     if (interval > 0) {
@@ -43,8 +154,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 +174,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 +205,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,34 +223,96 @@
               </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>
-    </nav>
 
-    <!-- Flash messages -->
-    <% if notice %>
-      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-4">
-        <div class="rounded-md bg-green-50 dark:bg-green-900/30 p-3">
-          <p class="text-sm text-green-800 dark:text-green-300"><%= notice %></p>
+      <!-- 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>
+
+    <!-- Toast container (fixed top-right) -->
+    <div id="pgbus-toast-container" class="fixed top-4 right-4 z-[100] flex flex-col space-y-2 max-w-sm"></div>
+
+    <!-- Flash messages rendered as toasts -->
+    <% if notice %>
+      <template data-pgbus-toast="success"><%= notice %></template>
     <% end %>
     <% if alert %>
-      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-4">
-        <div class="rounded-md bg-red-50 dark:bg-red-900/30 p-3">
-          <p class="text-sm text-red-800 dark:text-red-300"><%= alert %></p>
+      <template data-pgbus-toast="error"><%= alert %></template>
+    <% end %>
+
+    <!-- Confirm dialog -->
+    <dialog id="pgbus-confirm-dialog" class="rounded-lg shadow-xl bg-white dark:bg-gray-800 p-0 backdrop:bg-gray-900/50 max-w-md w-full">
+      <div class="p-6">
+        <div class="flex items-start space-x-4">
+          <div id="pgbus-confirm-icon" class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-full bg-red-100 dark:bg-red-900/30">
+            <svg class="h-6 w-6 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/>
+            </svg>
+          </div>
+          <div class="flex-1">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white" id="pgbus-confirm-title"></h3>
+            <p class="mt-2 text-sm text-gray-600 dark:text-gray-300" id="pgbus-confirm-message"></p>
+          </div>
         </div>
       </div>
-    <% end %>
+      <div class="flex justify-end space-x-3 px-6 py-4 bg-gray-50 dark:bg-gray-900/50 rounded-b-lg">
+        <button value="cancel" class="rounded-md px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500"><%= t("pgbus.dialogs.cancel", default: "Cancel") %></button>
+        <button value="confirm" id="pgbus-confirm-btn" class="rounded-md px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-red-500"><%= t("pgbus.dialogs.confirm", default: "Confirm") %></button>
+      </div>
+    </dialog>
+
+    <!-- Alert dialog -->
+    <dialog id="pgbus-alert-dialog" class="rounded-lg shadow-xl bg-white dark:bg-gray-800 p-0 backdrop:bg-gray-900/50 max-w-md w-full">
+      <div class="p-6">
+        <div class="flex items-start space-x-4">
+          <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900/30">
+            <svg class="h-6 w-6 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"/>
+            </svg>
+          </div>
+          <p class="text-sm text-gray-700 dark:text-gray-300" id="pgbus-alert-message"></p>
+        </div>
+      </div>
+      <div class="flex justify-end px-6 py-4 bg-gray-50 dark:bg-gray-900/50 rounded-b-lg">
+        <button value="ok" class="rounded-md px-4 py-2 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"><%= t("pgbus.dialogs.ok", default: "OK") %></button>
+      </div>
+    </dialog>
 
     <!-- Content -->
     <main class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-6">

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? %>