pgbus 0.17.0 → 0.17.2

data/app/views/pgbus/jobs/show.html.erb

@@ -1,5 +1,5 @@
 <div class="mb-6">
-  <%= link_to "\u2190 #{t("pgbus.jobs.show.back")}", pgbus.jobs_path, class: "text-sm text-indigo-600 hover:text-indigo-500" %>
+  <%= pgbus_link_to "\u2190 #{t("pgbus.jobs.show.back")}", pgbus.jobs_path %>
 </div>
 
 <% if @job %>
@@ -8,45 +8,45 @@
   <div class="rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700 p-6 mb-6">
     <dl class="grid grid-cols-1 gap-4 sm:grid-cols-2">
       <div>
-        <dt class="text-sm font-medium text-gray-500"><%= t("pgbus.jobs.show.labels.queue") %></dt>
+        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.jobs.show.labels.queue") %></dt>
         <dd class="text-sm text-gray-900 dark:text-white"><%= @job["queue_name"] %></dd>
       </div>
       <div>
-        <dt class="text-sm font-medium text-gray-500"><%= t("pgbus.jobs.show.labels.failed_at") %></dt>
-        <dd class="text-sm text-gray-900 dark:text-white"><%= @job["failed_at"] %></dd>
+        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.jobs.show.labels.failed_at") %></dt>
+        <dd class="text-sm text-gray-900 dark:text-white"><%= pgbus_timestamp(@job["failed_at"]) %></dd>
       </div>
       <div>
-        <dt class="text-sm font-medium text-gray-500"><%= t("pgbus.jobs.show.labels.error_class") %></dt>
-        <dd class="text-sm text-red-600 font-medium"><%= @job["error_class"] %></dd>
+        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.jobs.show.labels.error_class") %></dt>
+        <dd class="text-sm text-red-600 dark:text-red-400 font-medium"><%= @job["error_class"] %></dd>
       </div>
       <div>
-        <dt class="text-sm font-medium text-gray-500"><%= t("pgbus.jobs.show.labels.retry_count") %></dt>
+        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.jobs.show.labels.retry_count") %></dt>
         <dd class="text-sm text-gray-900 dark:text-white"><%= @job["retry_count"] %></dd>
       </div>
     </dl>
   </div>
 
   <div class="rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700 p-6 mb-6">
-    <h2 class="text-sm font-medium text-gray-500 mb-2"><%= t("pgbus.jobs.show.error_message") %></h2>
-    <p class="text-sm text-red-700"><%= @job["error_message"] %></p>
+    <h2 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2"><%= t("pgbus.jobs.show.error_message") %></h2>
+    <p class="text-sm text-red-700 dark:text-red-400"><%= @job["error_message"] %></p>
   </div>
 
   <% if @job["backtrace"].present? %>
     <div class="rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700 p-6 mb-6">
-      <h2 class="text-sm font-medium text-gray-500 mb-2"><%= t("pgbus.jobs.show.backtrace") %></h2>
-      <pre class="text-xs text-gray-600 bg-gray-50 dark:bg-gray-900 rounded p-4 overflow-x-auto max-h-96"><%= @job["backtrace"] %></pre>
+      <h2 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2"><%= t("pgbus.jobs.show.backtrace") %></h2>
+      <pre class="text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-900 rounded p-4 overflow-x-auto max-h-96"><%= @job["backtrace"] %></pre>
     </div>
   <% end %>
 
   <% if (context = pgbus_job_context(@job["payload"])) %>
     <div class="rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700 p-6 mb-6" data-testid="job-context">
-      <h2 class="text-sm font-medium text-gray-500 mb-2"><%= t("pgbus.jobs.show.context") %></h2>
+      <h2 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2"><%= t("pgbus.jobs.show.context") %></h2>
       <% context.each do |klass_name, attrs| %>
         <h3 class="text-xs font-semibold text-gray-700 dark:text-gray-300 mt-3 mb-1 font-mono"><%= klass_name %></h3>
         <dl class="grid grid-cols-1 gap-x-4 gap-y-1 sm:grid-cols-2">
           <% attrs.each do |name, value| %>
             <div class="flex gap-2 text-xs">
-              <dt class="text-gray-500 font-mono"><%= name %></dt>
+              <dt class="text-gray-500 dark:text-gray-400 font-mono"><%= name %></dt>
               <dd class="text-gray-900 dark:text-white font-mono break-all"><%= value %></dd>
             </div>
           <% end %>
@@ -56,19 +56,17 @@
   <% end %>
 
   <div class="rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700 p-6 mb-6">
-    <h2 class="text-sm font-medium text-gray-500 mb-2"><%= t("pgbus.jobs.show.payload") %></h2>
-    <pre class="text-xs text-gray-600 bg-gray-50 dark:bg-gray-900 rounded p-4 overflow-x-auto"><%= JSON.pretty_generate(pgbus_parse_message(@job["payload"])) %></pre>
+    <h2 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2"><%= t("pgbus.jobs.show.payload") %></h2>
+    <pre class="text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-900 rounded p-4 overflow-x-auto"><%= JSON.pretty_generate(pgbus_parse_message(@job["payload"])) %></pre>
   </div>
 
   <div class="flex space-x-2">
-    <%= button_to t("pgbus.jobs.show.retry"), pgbus.retry_job_path(@job["id"]), method: :post,
-          class: "rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500" %>
-    <%= button_to t("pgbus.jobs.show.discard"), pgbus.discard_job_path(@job["id"]), method: :post,
-          class: "rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-500",
+    <%= pgbus_button_to t("pgbus.jobs.show.retry"), pgbus.retry_job_path(@job["id"]), method: :post, variant: :primary %>
+    <%= pgbus_button_to t("pgbus.jobs.show.discard"), pgbus.discard_job_path(@job["id"]), method: :post, variant: :danger,
           data: { turbo_confirm: t("pgbus.jobs.show.discard_confirm") } %>
   </div>
 <% else %>
   <div class="text-center py-12">
-    <p class="text-gray-400"><%= t("pgbus.jobs.show.not_found") %></p>
+    <p class="text-gray-500 dark:text-gray-400"><%= t("pgbus.jobs.show.not_found") %></p>
   </div>
 <% end %>

data/app/views/pgbus/locks/_concurrency.html.erb

@@ -1,4 +1,5 @@
-<turbo-frame id="locks-concurrency" data-auto-refresh data-src="<%= pgbus.locks_path(frame: 'concurrency') %>">
+<turbo-frame id="locks-concurrency" data-auto-refresh data-turbo-action="advance"
+             data-src="<%= pgbus.locks_path(request.query_parameters.merge(frame: "concurrency")) %>">
   <div class="mb-8">
     <h2 class="text-lg font-semibold text-gray-900 dark:text-white"><%= t("pgbus.locks.concurrency.title") %></h2>
     <p class="mt-1 mb-3 text-sm text-gray-500 dark:text-gray-400"><%= t("pgbus.locks.concurrency.description") %></p>
@@ -9,25 +10,25 @@
         <p class="mt-1 text-3xl font-semibold <%= @concurrency[:parked_total] > 0 ? 'text-amber-600 dark:text-amber-400' : 'text-gray-900 dark:text-white' %>">
           <%= pgbus_number(@concurrency[:parked_total]) %>
         </p>
-        <p class="text-xs text-gray-400 dark:text-gray-500"><%= t("pgbus.locks.concurrency.cards.parked_jobs_hint") %></p>
+        <p class="text-xs text-gray-500 dark:text-gray-400"><%= t("pgbus.locks.concurrency.cards.parked_jobs_hint") %></p>
       </div>
 
       <div class="rounded-lg bg-white dark:bg-gray-800 p-5 shadow ring-1 ring-gray-200 dark:ring-gray-700">
         <p class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.locks.concurrency.cards.oldest_wait") %></p>
         <p class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white"><%= pgbus_duration(@concurrency[:oldest_parked_age_sec]) %></p>
-        <p class="text-xs text-gray-400 dark:text-gray-500"><%= t("pgbus.locks.concurrency.cards.oldest_wait_hint") %></p>
+        <p class="text-xs text-gray-500 dark:text-gray-400"><%= t("pgbus.locks.concurrency.cards.oldest_wait_hint") %></p>
       </div>
 
       <div class="rounded-lg bg-white dark:bg-gray-800 p-5 shadow ring-1 ring-gray-200 dark:ring-gray-700">
         <p class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.locks.concurrency.cards.slots_held") %></p>
         <p class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white"><%= pgbus_number(@concurrency[:slots_held]) %></p>
-        <p class="text-xs text-gray-400 dark:text-gray-500"><%= t("pgbus.locks.concurrency.cards.slots_held_hint") %></p>
+        <p class="text-xs text-gray-500 dark:text-gray-400"><%= t("pgbus.locks.concurrency.cards.slots_held_hint") %></p>
       </div>
 
       <div class="rounded-lg bg-white dark:bg-gray-800 p-5 shadow ring-1 ring-gray-200 dark:ring-gray-700">
         <p class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.locks.concurrency.cards.keys_at_limit") %></p>
         <p class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white"><%= pgbus_number(@concurrency[:keys_at_limit]) %></p>
-        <p class="text-xs text-gray-400 dark:text-gray-500"><%= t("pgbus.locks.concurrency.cards.keys_at_limit_hint") %></p>
+        <p class="text-xs text-gray-500 dark:text-gray-400"><%= t("pgbus.locks.concurrency.cards.keys_at_limit_hint") %></p>
       </div>
     </div>
 
@@ -40,43 +41,41 @@
             <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.locks.concurrency.headers.lease") %></th>
             <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.locks.concurrency.headers.parked") %></th>
             <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.locks.concurrency.headers.oldest_wait") %></th>
-            <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"></th>
+            <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><span class="sr-only"><%= t("pgbus.locks.concurrency.headers.actions") %></span></th>
           </tr>
         </thead>
         <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
           <% @concurrency[:keys].each do |row| %>
             <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
-              <td data-label="Key" class="px-4 py-3 text-sm font-mono text-gray-700 dark:text-gray-300 max-w-xs truncate"><%= row[:key] %></td>
-              <td data-label="In use" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-300">
+              <td data-label="<%= t("pgbus.locks.concurrency.headers.key") %>" class="px-4 py-3 text-sm font-mono text-gray-700 dark:text-gray-300 max-w-xs truncate"><%= row[:key] %></td>
+              <td data-label="<%= t("pgbus.locks.concurrency.headers.in_use") %>" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-300">
                 <% if row[:value] %>
                   <%= row[:value] %> / <%= row[:max_value] %>
                 <% else %>
                   —
                 <% end %>
               </td>
-              <td data-label="Lease" class="px-4 py-3 text-sm">
+              <td data-label="<%= t("pgbus.locks.concurrency.headers.lease") %>" class="px-4 py-3 text-sm">
                 <% if row[:value].nil? %>
-                  <span class="text-gray-400 dark:text-gray-500"><%= t("pgbus.locks.concurrency.lease.none") %></span>
+                  <span class="text-gray-500 dark:text-gray-400"><%= t("pgbus.locks.concurrency.lease.none") %></span>
                 <% elsif row[:lease_fresh] %>
-                  <span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800"><%= t("pgbus.locks.concurrency.lease.live") %></span>
-                  <span class="ml-1 text-xs text-gray-400 dark:text-gray-500"><%= pgbus_time_ago_future(row[:expires_at]) %></span>
+                  <span class="inline-flex items-center rounded-full bg-green-100 dark:bg-green-900/30 px-2.5 py-0.5 text-xs font-medium text-green-800 dark:text-green-400"><%= t("pgbus.locks.concurrency.lease.live") %></span>
+                  <span class="ml-1 text-xs text-gray-500 dark:text-gray-400"><%= pgbus_time(row[:expires_at]) %></span>
                 <% else %>
-                  <span class="inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800"><%= t("pgbus.locks.concurrency.lease.expired") %></span>
+                  <span class="inline-flex items-center rounded-full bg-red-100 dark:bg-red-900/30 px-2.5 py-0.5 text-xs font-medium text-red-800 dark:text-red-400"><%= t("pgbus.locks.concurrency.lease.expired") %></span>
                 <% end %>
               </td>
-              <td data-label="Parked" class="px-4 py-3 text-sm text-right <%= row[:parked_count] > 0 ? 'text-amber-600 dark:text-amber-400 font-semibold' : 'text-gray-500 dark:text-gray-400' %>"><%= pgbus_number(row[:parked_count]) %></td>
-              <td data-label="Oldest wait" class="px-4 py-3 text-sm text-right text-gray-500 dark:text-gray-400"><%= pgbus_duration(row[:oldest_parked_age_sec]) %></td>
-              <td class="px-4 py-3 text-sm text-right">
+              <td data-label="<%= t("pgbus.locks.concurrency.headers.parked") %>" class="px-4 py-3 text-sm text-right <%= row[:parked_count] > 0 ? 'text-amber-700 dark:text-amber-400 font-semibold' : 'text-gray-500 dark:text-gray-400' %>"><%= pgbus_number(row[:parked_count]) %></td>
+              <td data-label="<%= t("pgbus.locks.concurrency.headers.oldest_wait") %>" class="px-4 py-3 text-sm text-right text-gray-500 dark:text-gray-400"><%= pgbus_duration(row[:oldest_parked_age_sec]) %></td>
+              <td data-label="<%= t("pgbus.locks.concurrency.headers.actions") %>" class="px-4 py-3 text-sm text-right">
                 <div class="flex items-center justify-end space-x-3">
-                  <%= button_to t("pgbus.locks.concurrency.release"), pgbus.release_key_locks_path,
-                        method: :post, params: { key: row[:key] },
-                        class: "text-xs text-indigo-600 hover:text-indigo-800 font-medium",
+                  <%= pgbus_button_to t("pgbus.locks.concurrency.release"), pgbus.release_key_locks_path,
+                        method: :post, params: { key: row[:key] }, variant: :link, size: :sm,
                         data: { turbo_frame: "_top",
                                 turbo_confirm: row[:lease_fresh] ? t("pgbus.locks.concurrency.release_confirm_live", key: row[:key]) : t("pgbus.locks.concurrency.release_confirm", key: row[:key]) } %>
                   <% if row[:parked_count] > 0 %>
-                    <%= button_to t("pgbus.locks.concurrency.discard_parked"), pgbus.discard_parked_locks_path,
-                          method: :post, params: { key: row[:key] },
-                          class: "text-xs text-red-600 hover:text-red-800 font-medium",
+                    <%= pgbus_button_to t("pgbus.locks.concurrency.discard_parked"), pgbus.discard_parked_locks_path,
+                          method: :post, params: { key: row[:key] }, variant: :link, size: :sm, tone: :red,
                           data: { turbo_frame: "_top",
                                   turbo_confirm: t("pgbus.locks.concurrency.discard_parked_confirm", count: row[:parked_count]) } %>
                   <% end %>
@@ -85,10 +84,13 @@
             </tr>
           <% end %>
           <% if @concurrency[:keys].empty? %>
-            <tr><td colspan="6" class="px-4 py-8 text-center text-sm text-gray-400 dark:text-gray-500"><%= t("pgbus.locks.concurrency.empty") %></td></tr>
+            <%= render "pgbus/shared/empty_row", colspan: 6, message: t("pgbus.locks.concurrency.empty") %>
           <% end %>
         </tbody>
       </table>
+      <%= render "pgbus/shared/pager", page: @keys_page, per_page: @per_page, shown: @concurrency[:keys].size,
+            total_count: @keys_count.total, has_more: @keys_count.capped? && @concurrency[:keys].size == @per_page,
+            page_path: ->(n) { pgbus.locks_path(keys_page: n, page: @page) } %>
     </div>
   </div>
 </turbo-frame>

data/app/views/pgbus/locks/_uniqueness.html.erb

@@ -8,15 +8,11 @@
       <div class="flex items-center space-x-2">
         <div data-bulk-actions class="hidden flex items-center space-x-2">
           <span class="text-sm text-gray-500 dark:text-gray-400"><span data-bulk-count>0</span> <%= t("pgbus.helpers.bulk_selected") %></span>
-          <button type="submit" form="bulk-discard-locks-form"
-                  class="rounded-md bg-red-600 px-3 py-2 text-sm font-medium text-white hover:bg-red-500"
-                  data-turbo-confirm="<%= t("pgbus.locks.index.discard_selected_confirm") %>">
-            <%= t("pgbus.locks.index.discard_selected") %>
-          </button>
+          <%= pgbus_button_tag t("pgbus.locks.index.discard_selected"), variant: :danger, form: "bulk-discard-locks-form",
+                confirm: t("pgbus.locks.index.discard_selected_confirm") %>
         </div>
-        <%= button_to t("pgbus.locks.index.discard_all"), pgbus.discard_all_locks_path, method: :post,
-              class: "rounded-md bg-red-600 px-3 py-2 text-sm font-medium text-white hover:bg-red-500",
-              data: { turbo_confirm: t("pgbus.locks.index.discard_all_confirm") } %>
+        <%= pgbus_button_to t("pgbus.locks.index.discard_all"), pgbus.discard_all_locks_path, method: :post,
+              variant: :danger, data: { turbo_confirm: t("pgbus.locks.index.discard_all_confirm") } %>
       </div>
     <% end %>
   </div>
@@ -34,15 +30,15 @@
             <th class="w-10 px-4 py-3">
               <input type="checkbox" data-bulk-select-all
                      aria-label="<%= t("pgbus.helpers.bulk_select_all") %>"
-                     class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600">
+                     class="h-4 w-4 rounded border-gray-300 text-indigo-600 dark:text-indigo-400 focus:ring-indigo-600">
             </th>
           <% end %>
           <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.locks.index.headers.lock_key") %></th>
-          <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.locks.index.headers.queue_name", default: "Queue") %></th>
-          <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.locks.index.headers.msg_id", default: "Message ID") %></th>
+          <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.locks.index.headers.queue_name") %></th>
+          <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.locks.index.headers.msg_id") %></th>
           <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.locks.index.headers.age") %></th>
           <% if @locks.any? %>
-            <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"></th>
+            <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><span class="sr-only"><%= t("pgbus.locks.index.headers.actions") %></span></th>
           <% end %>
         </tr>
       </thead>
@@ -53,28 +49,30 @@
               <input type="checkbox" name="lock_keys[]" value="<%= lock[:lock_key] %>"
                      aria-label="<%= t("pgbus.helpers.bulk_select_row", id: lock[:lock_key]) %>"
                      form="bulk-discard-locks-form" data-bulk-item
-                     class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600">
+                     class="h-4 w-4 rounded border-gray-300 text-indigo-600 dark:text-indigo-400 focus:ring-indigo-600">
             </td>
-            <td data-label="Lock Key" class="px-4 py-3 text-sm font-mono text-gray-700 dark:text-gray-300 max-w-xs truncate"><%= lock[:lock_key] %></td>
-            <td data-label="Queue" class="px-4 py-3 text-sm text-gray-700 dark:text-gray-300"><%= lock[:queue_name] %></td>
-            <td data-label="Message ID" class="px-4 py-3 text-sm text-right font-mono text-gray-500 dark:text-gray-400"><%= lock[:msg_id] %></td>
-            <td data-label="Age" class="px-4 py-3 text-sm text-right text-gray-500 dark:text-gray-400">
+            <td data-label="<%= t("pgbus.locks.index.headers.lock_key") %>" class="px-4 py-3 text-sm font-mono text-gray-700 dark:text-gray-300 max-w-xs truncate"><%= lock[:lock_key] %></td>
+            <td data-label="<%= t("pgbus.locks.index.headers.queue_name") %>" class="px-4 py-3 text-sm text-gray-700 dark:text-gray-300"><%= lock[:queue_name] %></td>
+            <td data-label="<%= t("pgbus.locks.index.headers.msg_id") %>" class="px-4 py-3 text-sm text-right font-mono text-gray-500 dark:text-gray-400"><%= lock[:msg_id] %></td>
+            <td data-label="<%= t("pgbus.locks.index.headers.age") %>" class="px-4 py-3 text-sm text-right text-gray-500 dark:text-gray-400">
               <% if lock[:age_seconds] %>
                 <%= pgbus_duration(lock[:age_seconds]) %>
               <% end %>
             </td>
-            <td class="px-4 py-3 text-sm text-right">
-              <%= button_to t("pgbus.locks.index.discard"), pgbus.discard_lock_path(lock[:lock_key]),
-                    method: :post,
-                    class: "text-xs text-red-600 hover:text-red-800 font-medium",
+            <td data-label="<%= t("pgbus.locks.index.headers.actions") %>" class="px-4 py-3 text-sm text-right">
+              <%= pgbus_button_to t("pgbus.locks.index.discard"), pgbus.discard_lock_path(lock[:lock_key]),
+                    method: :post, variant: :link, size: :sm, tone: :red,
                     data: { turbo_confirm: t("pgbus.locks.index.discard_confirm"), turbo_frame: "_top" } %>
             </td>
           </tr>
         <% end %>
         <% if @locks.empty? %>
-          <tr><td colspan="4" class="px-4 py-8 text-center text-sm text-gray-400 dark:text-gray-500"><%= t("pgbus.locks.index.empty") %></td></tr>
+          <%= render "pgbus/shared/empty_row", colspan: 4, message: t("pgbus.locks.index.empty") %>
         <% end %>
       </tbody>
     </table>
+    <%= render "pgbus/shared/pager", page: @page, per_page: @per_page, shown: @locks.size,
+          total_count: @locks_count.total, has_more: @locks_count.capped? && @locks.size == @per_page,
+          page_path: ->(n) { pgbus.locks_path(page: n, keys_page: @keys_page) } %>
   </div>
 </div>

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

@@ -1,55 +1,58 @@
 <div class="mb-6">
   <h1 class="text-2xl font-bold text-gray-900 dark:text-white"><%= t("pgbus.outbox.index.title") %></h1>
-  <p class="mt-1 text-sm text-gray-500"><%= t("pgbus.outbox.index.description") %></p>
+  <p class="mt-1 text-sm text-gray-500 dark:text-gray-400"><%= t("pgbus.outbox.index.description") %></p>
 </div>
 
 <div class="mb-6 grid grid-cols-3 gap-4">
-  <div class="rounded-lg bg-white dark:bg-gray-800 p-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
-    <dt class="text-xs font-medium uppercase text-gray-500"><%= t("pgbus.outbox.index.stats.unpublished") %></dt>
+  <dl class="rounded-lg bg-white dark:bg-gray-800 p-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+    <dt class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.outbox.index.stats.unpublished") %></dt>
     <dd class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white"><%= pgbus_number(@stats[:unpublished]) %></dd>
-  </div>
-  <div class="rounded-lg bg-white dark:bg-gray-800 p-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
-    <dt class="text-xs font-medium uppercase text-gray-500"><%= t("pgbus.outbox.index.stats.total") %></dt>
+  </dl>
+  <dl class="rounded-lg bg-white dark:bg-gray-800 p-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+    <dt class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.outbox.index.stats.total") %></dt>
     <dd class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white"><%= pgbus_number(@stats[:total]) %></dd>
-  </div>
-  <div class="rounded-lg bg-white dark:bg-gray-800 p-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
-    <dt class="text-xs font-medium uppercase text-gray-500"><%= t("pgbus.outbox.index.stats.oldest_unpublished") %></dt>
-    <dd class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white"><%= @stats[:oldest_unpublished_age] ? t("pgbus.outbox.index.stats.oldest_age", seconds: @stats[:oldest_unpublished_age]) : t("pgbus.outbox.index.stats.no_age") %></dd>
-  </div>
+  </dl>
+  <dl class="rounded-lg bg-white dark:bg-gray-800 p-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+    <dt class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.outbox.index.stats.oldest_unpublished") %></dt>
+    <dd class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white"><%= pgbus_duration(@stats[:oldest_unpublished_age]) %></dd>
+  </dl>
 </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="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.outbox.index.headers.id") %></th>
-        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500"><%= t("pgbus.outbox.index.headers.queue_topic") %></th>
-        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500"><%= t("pgbus.outbox.index.headers.payload") %></th>
-        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500"><%= t("pgbus.outbox.index.headers.priority") %></th>
-        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500"><%= t("pgbus.outbox.index.headers.status") %></th>
-        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500"><%= t("pgbus.outbox.index.headers.created") %></th>
+        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.outbox.index.headers.id") %></th>
+        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.outbox.index.headers.queue_topic") %></th>
+        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.outbox.index.headers.payload") %></th>
+        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.outbox.index.headers.priority") %></th>
+        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.outbox.index.headers.status") %></th>
+        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.outbox.index.headers.created") %></th>
       </tr>
     </thead>
     <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
       <% @entries.each do |entry| %>
-        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 dark:bg-gray-900">
-          <td data-label="ID" class="px-4 py-3 text-sm font-mono text-gray-700"><%= entry.id %></td>
-          <td data-label="Routing Key" class="px-4 py-3 text-sm text-gray-700"><%= entry.routing_key || entry.queue_name %></td>
-          <td data-label="Payload" class="px-4 py-3 text-sm text-gray-500 max-w-xs truncate"><%= pgbus_json_preview(entry.payload) %></td>
-          <td data-label="Priority" class="px-4 py-3 text-sm text-right text-gray-500"><%= entry.priority %></td>
-          <td data-label="Status" class="px-4 py-3 text-sm text-right">
+        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
+          <td data-label="<%= t("pgbus.outbox.index.headers.id") %>" class="px-4 py-3 text-sm font-mono text-gray-700 dark:text-gray-200"><%= entry.id %></td>
+          <td data-label="<%= t("pgbus.outbox.index.headers.queue_topic") %>" class="px-4 py-3 text-sm text-gray-700 dark:text-gray-200"><%= entry.routing_key || entry.queue_name %></td>
+          <td data-label="<%= t("pgbus.outbox.index.headers.payload") %>" class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400 max-w-xs truncate"><%= pgbus_json_preview(entry.payload) %></td>
+          <td data-label="<%= t("pgbus.outbox.index.headers.priority") %>" class="px-4 py-3 text-sm text-right text-gray-500 dark:text-gray-400"><%= entry.priority %></td>
+          <td data-label="<%= t("pgbus.outbox.index.headers.status") %>" class="px-4 py-3 text-sm text-right">
             <% if entry.published_at %>
-              <span class="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800"><%= t("pgbus.outbox.index.published") %></span>
+              <span class="inline-flex items-center rounded-full bg-green-100 dark:bg-green-900/30 px-2 py-0.5 text-xs font-medium text-green-800 dark:text-green-400"><%= t("pgbus.outbox.index.published") %></span>
             <% else %>
-              <span class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-800"><%= t("pgbus.outbox.index.pending") %></span>
+              <span class="inline-flex items-center rounded-full bg-yellow-100 dark:bg-yellow-900/30 px-2 py-0.5 text-xs font-medium text-yellow-800 dark:text-yellow-400"><%= t("pgbus.outbox.index.pending") %></span>
             <% end %>
           </td>
-          <td data-label="Created" class="px-4 py-3 text-sm text-right text-gray-500"><%= pgbus_time_ago(entry.created_at) %></td>
+          <td data-label="<%= t("pgbus.outbox.index.headers.created") %>" class="px-4 py-3 text-sm text-right text-gray-500 dark:text-gray-400"><%= pgbus_time(entry.created_at) %></td>
         </tr>
       <% end %>
       <% if @entries.empty? %>
-        <tr><td colspan="6" class="px-4 py-8 text-center text-sm text-gray-400"><%= t("pgbus.outbox.index.empty") %></td></tr>
+        <%= render "pgbus/shared/empty_row", colspan: 6, message: t("pgbus.outbox.index.empty") %>
       <% end %>
     </tbody>
   </table>
+  <%= render "pgbus/shared/pager", page: @page, per_page: @per_page, shown: @entries.size,
+        total_count: @entries_count.total, has_more: @entries_count.capped? && @entries.size == @per_page,
+        page_path: ->(n) { pgbus.outbox_index_path(page: n) } %>
 </div>

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

@@ -3,36 +3,17 @@
     <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.processes.processes_table.headers.kind") %></th>
-          <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500"><%= t("pgbus.processes.processes_table.headers.hostname") %></th>
-          <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500"><%= t("pgbus.processes.processes_table.headers.pid") %></th>
-          <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500"><%= t("pgbus.processes.processes_table.headers.status") %></th>
-          <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500"><%= t("pgbus.processes.processes_table.headers.last_heartbeat") %></th>
-          <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500"><%= t("pgbus.processes.processes_table.headers.metadata") %></th>
+          <% %w[process status activity recycle heartbeat].each do |column| %>
+            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.processes.processes_table.headers.#{column}") %></th>
+          <% end %>
         </tr>
       </thead>
       <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
-        <% @processes.each do |p| %>
-          <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 dark:bg-gray-900">
-            <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-700"><%= p[:hostname] %></td>
-            <td data-label="PID" class="px-4 py-3 text-sm font-mono text-gray-700"><%= p[:pid] %></td>
-            <td data-label="Status" class="px-4 py-3 text-sm"><%= pgbus_status_badge(p[:status] || p[:healthy]) %></td>
-            <td data-label="Last Heartbeat" class="px-4 py-3 text-sm text-gray-500"><%= pgbus_time_ago(p[:last_heartbeat_at]) %></td>
-            <td data-label="Metadata" class="px-4 py-3 text-sm text-gray-500 font-mono text-xs max-w-xs truncate">
-              <% if p[:metadata].is_a?(Hash) %>
-                <% if (rates = pgbus_worker_rates(p[:metadata])) %>
-                  <span class="inline-flex items-center rounded bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 px-1.5 py-0.5 text-xs mr-1 font-medium"><%= rates %></span>
-                <% end %>
-                <% pgbus_display_metadata(p[:metadata]).each do |k, v| %>
-                  <span class="inline-flex items-center rounded bg-gray-100 px-1.5 py-0.5 text-xs mr-1"><%= k %>: <%= v %></span>
-                <% end %>
-              <% end %>
-            </td>
-          </tr>
+        <% @processes.each do |process| %>
+          <%= render "pgbus/processes/row", process: process, state: @process_states.fetch(process[:id]) %>
         <% end %>
         <% if @processes.empty? %>
-          <tr><td colspan="6" class="px-4 py-8 text-center text-sm text-gray-400"><%= t("pgbus.processes.processes_table.empty") %></td></tr>
+          <%= render "pgbus/shared/empty_row", colspan: 5, message: t("pgbus.processes.processes_table.empty") %>
         <% end %>
       </tbody>
     </table>

data/app/views/pgbus/processes/_row.html.erb

@@ -0,0 +1,48 @@
+<%# One process plus its expansion row (issue #493). Locals: process (a
+    DataSource#processes hash), state (its ProcessState::Result). A child of
+    a supervisor row is indented under it. %>
+<% metadata = process[:metadata].is_a?(Hash) ? process[:metadata] : {} %>
+<% raw = pgbus_process_raw_metadata(metadata) %>
+<tr id="process-<%= process[:id] %>" class="hover:bg-gray-50 dark:hover:bg-gray-700/50" data-process-row data-status="<%= state.status %>">
+  <td data-label="<%= t("pgbus.processes.processes_table.headers.process") %>" class="px-4 py-3 text-sm align-top <%= "lg:pl-10" if state.supervisor_pid %>">
+    <details data-job-toggle class="group">
+      <summary class="cursor-pointer list-none font-medium text-indigo-600 hover:text-indigo-800 dark:hover:text-indigo-300 dark:text-indigo-400"><%= process[:kind] %></summary>
+    </details>
+    <span class="block lg:whitespace-nowrap text-xs font-mono text-gray-700 dark:text-gray-300"><%= process[:hostname] %> · <%= process[:pid] %></span>
+    <% if metadata["capsule"] %>
+      <span class="block text-xs text-gray-600 dark:text-gray-300"><%= t("pgbus.processes.processes_table.capsule", capsule: metadata["capsule"], process: metadata["process"] || "—") %></span>
+    <% end %>
+    <% if state.supervisor_pid %>
+      <span class="block lg:whitespace-nowrap text-xs text-gray-600 dark:text-gray-300"><%= t("pgbus.processes.processes_table.under_supervisor", pid: state.supervisor_pid) %></span>
+    <% end %>
+  </td>
+  <td data-label="<%= t("pgbus.processes.processes_table.headers.status") %>" class="px-4 py-3 text-sm align-top">
+    <%= render "pgbus/processes/status", state: state %>
+  </td>
+  <td data-label="<%= t("pgbus.processes.processes_table.headers.activity") %>" class="px-4 py-3 text-sm text-gray-700 dark:text-gray-200 align-top" data-testid="process-activity"><%= pgbus_process_activity(state) %></td>
+  <td data-label="<%= t("pgbus.processes.processes_table.headers.recycle") %>" class="px-4 py-3 text-sm text-gray-700 dark:text-gray-200 align-top" data-testid="process-recycle"><%= pgbus_process_recycle(state) %></td>
+  <td data-label="<%= t("pgbus.processes.processes_table.headers.heartbeat") %>" class="px-4 py-3 text-sm text-gray-700 dark:text-gray-200 align-top">
+    <span class="block"><%= pgbus_time(process[:last_heartbeat_at]) %></span>
+    <% if state.uptime_seconds %>
+      <span class="block text-xs text-gray-600 dark:text-gray-300"><%= t("pgbus.processes.processes_table.uptime", duration: pgbus_duration(state.uptime_seconds)) %></span>
+    <% end %>
+  </td>
+</tr>
+<tr class="pgbus-job-detail" data-process-detail="<%= process[:id] %>">
+  <td colspan="5" class="px-4 pb-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-100 dark:border-gray-700">
+    <dl class="mt-3 grid grid-cols-1 gap-2 text-sm sm:grid-cols-[auto_1fr] sm:gap-x-6">
+      <dt class="font-medium text-gray-700 dark:text-gray-200"><%= t("pgbus.processes.processes_table.started") %></dt>
+      <dd class="text-gray-700 dark:text-gray-200"><%= pgbus_timestamp(state.started_at) %></dd>
+      <dt class="font-medium text-gray-700 dark:text-gray-200"><%= t("pgbus.processes.processes_table.raw_metadata") %></dt>
+      <dd class="font-mono text-xs">
+        <% if raw.empty? %>
+          <span class="text-gray-700 dark:text-gray-200"><%= t("pgbus.processes.processes_table.no_raw_metadata") %></span>
+        <% else %>
+          <% raw.each do |k, v| %>
+            <span class="inline-flex items-center rounded bg-gray-100 dark:bg-gray-700 px-1.5 py-0.5 text-xs text-gray-700 dark:text-gray-200 mr-1 mb-1"><%= k %>: <%= v %></span>
+          <% end %>
+        <% end %>
+      </dd>
+    </dl>
+  </td>
+</tr>

data/app/views/pgbus/processes/_status.html.erb

@@ -0,0 +1,4 @@
+<%# A process's status in words (issue #493): the badge, then why, then what
+    happens next. Locals: state (a ProcessState::Result). %>
+<%= pgbus_status_badge(state.status) %>
+<p class="mt-1 text-xs text-gray-700 dark:text-gray-200" data-testid="process-reason"><%= pgbus_process_status(state) %></p>

data/app/views/pgbus/queues/_queues_list.html.erb

@@ -3,57 +3,53 @@
     <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.queues.queues_list.headers.queue") %></th>
-          <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500"><%= t("pgbus.queues.queues_list.headers.depth") %></th>
-          <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500"><%= t("pgbus.queues.queues_list.headers.visible") %></th>
-          <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500"><%= t("pgbus.queues.queues_list.headers.parked") %></th>
-          <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500"><%= t("pgbus.queues.queues_list.headers.oldest_claimable") %></th>
-          <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500"><%= t("pgbus.queues.queues_list.headers.newest") %></th>
-          <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500"><%= t("pgbus.queues.queues_list.headers.total_ever") %></th>
-          <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500"><%= t("pgbus.queues.queues_list.headers.actions") %></th>
+          <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.queues.queues_list.headers.queue") %></th>
+          <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.queues.queues_list.headers.depth") %></th>
+          <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.queues.queues_list.headers.visible") %></th>
+          <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.queues.queues_list.headers.parked") %></th>
+          <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.queues.queues_list.headers.oldest_claimable") %></th>
+          <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.queues.queues_list.headers.newest") %></th>
+          <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.queues.queues_list.headers.total_ever") %></th>
+          <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.queues.queues_list.headers.actions") %></th>
         </tr>
       </thead>
       <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 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" } %>
+          <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
+            <td data-label="<%= t("pgbus.queues.queues_list.headers.queue") %>" class="px-4 py-3 text-sm">
+              <%= pgbus_link_to q[:name], pgbus.queue_path(name: q[:name]), data: { turbo_frame: "_top" } %>
               <%= pgbus_queue_badge(q[:name]) %>
               <% if q[:paused] %>
-                <span class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-800"><%= t("pgbus.queues.queues_list.paused") %></span>
+                <%= pgbus_paused_badge(q[:paused]) %>
               <% end %>
             </td>
-            <td data-label="Depth" class="px-4 py-3 text-sm text-right font-mono text-gray-700"><%= pgbus_number(q[:queue_length]) %></td>
-            <td data-label="Visible" class="px-4 py-3 text-sm text-right font-mono text-gray-700"><%= pgbus_number(q[:queue_visible_length]) %></td>
-            <td data-label="Parked" class="px-4 py-3 text-sm text-right font-mono text-gray-500"><%= pgbus_number(q[:parked_length]) %></td>
-            <td data-label="Oldest claimable" class="px-4 py-3 text-sm text-right text-gray-500"><%= q[:oldest_claimable_age_sec] || "—" %></td>
-            <td data-label="Newest" class="px-4 py-3 text-sm text-right text-gray-500"><%= q[:newest_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>
-            <td data-label="Actions" class="px-4 py-3 text-sm text-right space-x-2">
+            <td data-label="<%= t("pgbus.queues.queues_list.headers.depth") %>" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-200"><%= pgbus_number(q[:queue_length]) %></td>
+            <td data-label="<%= t("pgbus.queues.queues_list.headers.visible") %>" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-200"><%= pgbus_number(q[:queue_visible_length]) %></td>
+            <td data-label="<%= t("pgbus.queues.queues_list.headers.parked") %>" class="px-4 py-3 text-sm text-right font-mono text-gray-500 dark:text-gray-400"><%= pgbus_number(q[:parked_length]) %></td>
+            <td data-label="<%= t("pgbus.queues.queues_list.headers.oldest_claimable") %>" class="px-4 py-3 text-sm text-right text-gray-500 dark:text-gray-400"><%= pgbus_duration(q[:oldest_claimable_age_sec]) %></td>
+            <td data-label="<%= t("pgbus.queues.queues_list.headers.newest") %>" class="px-4 py-3 text-sm text-right text-gray-500 dark:text-gray-400"><%= pgbus_duration(q[:newest_msg_age_sec]) %></td>
+            <td data-label="<%= t("pgbus.queues.queues_list.headers.total_ever") %>" class="px-4 py-3 text-sm text-right text-gray-500 dark:text-gray-400"><%= pgbus_number(q[:total_messages]) %></td>
+            <td data-label="<%= t("pgbus.queues.queues_list.headers.actions") %>" class="px-4 py-3 text-sm text-right space-x-2">
               <% if q[:paused] %>
-                <%= button_to t("pgbus.queues.queues_list.resume"), pgbus.resume_queue_path(name: q[:name]),
-                      method: :post,
-                      class: "text-xs text-green-600 hover:text-green-800 font-medium",
+                <%= pgbus_button_to t("pgbus.queues.queues_list.resume"), pgbus.resume_queue_path(name: q[:name]),
+                      method: :post, variant: :link, size: :sm, tone: :green,
                       data: { turbo_frame: "_top" } %>
               <% else %>
-                <%= button_to t("pgbus.queues.queues_list.pause"), pgbus.pause_queue_path(name: q[:name]),
-                      method: :post,
-                      class: "text-xs text-yellow-600 hover:text-yellow-800 font-medium",
+                <%= pgbus_button_to t("pgbus.queues.queues_list.pause"), pgbus.pause_queue_path(name: q[:name]),
+                      method: :post, variant: :link, size: :sm, tone: :yellow,
                       data: { turbo_confirm: t("pgbus.queues.queues_list.pause_confirm", name: q[:name]), turbo_frame: "_top" } %>
               <% end %>
-              <%= button_to t("pgbus.queues.queues_list.purge"), pgbus.purge_queue_path(name: q[:name]),
-                    method: :post,
-                    class: "text-xs text-red-600 hover:text-red-800 font-medium",
+              <%= pgbus_button_to t("pgbus.queues.queues_list.purge"), pgbus.purge_queue_path(name: q[:name]),
+                    method: :post, variant: :link, size: :sm, tone: :red,
                     data: { turbo_confirm: t("pgbus.queues.queues_list.purge_confirm", name: q[:name]), turbo_frame: "_top" } %>
-              <%= button_to t("pgbus.queues.queues_list.delete"), pgbus.queue_path(name: q[:name]),
-                    method: :delete,
-                    class: "text-xs text-red-600 hover:text-red-800 font-medium",
+              <%= pgbus_button_to t("pgbus.queues.queues_list.delete"), pgbus.queue_path(name: q[:name]),
+                    method: :delete, variant: :link, size: :sm, tone: :red,
                     data: { turbo_confirm: t("pgbus.queues.queues_list.delete_confirm", name: q[:name]), turbo_frame: "_top" } %>
             </td>
           </tr>
         <% end %>
         <% if @queues.empty? %>
-          <tr><td colspan="8" class="px-4 py-8 text-center text-sm text-gray-400"><%= t("pgbus.queues.queues_list.empty") %></td></tr>
+          <%= render "pgbus/shared/empty_row", colspan: 8, message: t("pgbus.queues.queues_list.empty") %>
         <% end %>
       </tbody>
     </table>