pgbus 0.17.1 → 0.17.3

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

@@ -1,77 +1,90 @@
 <div class="mb-3">
-  <%= link_to "← #{t("pgbus.queues.show.back")}", pgbus.queues_path, class: "text-sm text-indigo-600 hover:text-indigo-500 dark:text-indigo-400" %>
+  <%= pgbus_link_to "← #{t("pgbus.queues.show.back")}", pgbus.queues_path %>
 </div>
-<div class="flex items-center justify-between mb-6">
+<div class="flex flex-wrap items-center justify-between gap-4 mb-6">
   <div>
     <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
       <%= @queue&.dig(:name) || params[:name] %>
-      <% if @paused %>
-        <span class="inline-flex items-center rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800"><%= t("pgbus.queues.queues_list.paused") %></span>
-      <% end %>
+      <%= pgbus_paused_badge(@paused) %>
     </h1>
-    <% if @queue %>
-      <p class="text-sm text-gray-500 mt-1">
-        <%= t("pgbus.queues.show.depth") %> <span class="font-mono"><%= @queue[:queue_length] %></span> |
-        <%= t("pgbus.queues.show.visible") %> <span class="font-mono"><%= @queue[:queue_visible_length] %></span> |
-        <%= t("pgbus.queues.show.parked") %> <span class="font-mono"><%= @queue[:parked_length] %></span> |
-        <%= t("pgbus.queues.show.oldest") %> <span class="font-mono"><%= @queue[:oldest_msg_age_sec] || "—" %></span> |
-        <%= t("pgbus.queues.show.oldest_claimable") %> <span class="font-mono"><%= @queue[:oldest_claimable_age_sec] || "—" %></span> |
-        <%= t("pgbus.queues.show.total") %> <span class="font-mono"><%= pgbus_number(@queue[:total_messages]) %></span>
-      </p>
-    <% end %>
   </div>
   <div class="flex space-x-2">
     <% if @paused %>
-      <%= button_to t("pgbus.queues.show.resume"), pgbus.resume_queue_path(name: params[:name]),
-            method: :post,
-            class: "rounded-md bg-green-600 px-3 py-2 text-sm font-medium text-white hover:bg-green-500" %>
+      <%= pgbus_button_to t("pgbus.queues.show.resume"), pgbus.resume_queue_path(name: params[:name]),
+            method: :post, variant: :success %>
     <% else %>
-      <%= button_to t("pgbus.queues.show.pause"), pgbus.pause_queue_path(name: params[:name]),
-            method: :post,
-            class: "rounded-md bg-yellow-500 px-3 py-2 text-sm font-medium text-white hover:bg-yellow-400",
+      <%= pgbus_button_to t("pgbus.queues.show.pause"), pgbus.pause_queue_path(name: params[:name]),
+            method: :post, variant: :warning,
             data: { turbo_confirm: t("pgbus.queues.show.pause_confirm") } %>
     <% end %>
-    <%= button_to t("pgbus.queues.show.purge_queue"), pgbus.purge_queue_path(name: params[:name]),
-          method: :post,
-          class: "rounded-md bg-red-600 px-3 py-2 text-sm font-medium text-white hover:bg-red-500",
+    <%= pgbus_button_to t("pgbus.queues.show.purge_queue"), pgbus.purge_queue_path(name: params[:name]),
+          method: :post, variant: :danger,
           data: { turbo_confirm: t("pgbus.queues.show.purge_confirm") } %>
-    <%= button_to t("pgbus.queues.show.delete_queue"), pgbus.queue_path(name: params[:name]),
-          method: :delete,
-          class: "rounded-md bg-red-800 px-3 py-2 text-sm font-medium text-white hover:bg-red-700",
+    <%= pgbus_button_to t("pgbus.queues.show.delete_queue"), pgbus.queue_path(name: params[:name]),
+          method: :delete, variant: :destructive,
           data: { turbo_confirm: t("pgbus.queues.show.delete_confirm") } %>
   </div>
 </div>
 
+<%# The queue in words (Pgbus::Web::QueueSummary), then its numbers. %>
+<section aria-label="<%= t("pgbus.queues.show.summary_label") %>" data-testid="queue-summary" class="mb-6 space-y-2">
+  <% @summary.each do |line| %>
+    <p data-summary-line="<%= line.key %>" class="rounded-md px-3 py-2 text-sm ring-1 <%= pgbus_queue_summary_classes(line.tone) %>"><%= pgbus_queue_summary_line(line) %></p>
+  <% end %>
+  <% if @drainers[:siblings].any? %>
+    <p class="text-sm text-gray-700 dark:text-gray-200">
+      <%= t("pgbus.queues.show.other_levels") %>
+      <% @drainers[:siblings].each do |sibling| %>
+        <%= pgbus_link_to sibling, pgbus.queue_path(name: sibling), size: :sm, class: "font-mono" %>
+      <% end %>
+    </p>
+  <% end %>
+</section>
+
+<dl data-testid="queue-metrics" class="mb-6 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
+  <% [[:depth, pgbus_number(@queue[:queue_length])],
+      [:claimable, pgbus_number(@queue[:queue_visible_length])],
+      [:parked, pgbus_number(@queue[:parked_length])],
+      [:oldest_claimable, pgbus_duration(@queue[:oldest_claimable_age_sec])],
+      [:oldest, pgbus_duration(@queue[:oldest_msg_age_sec])],
+      [:total, pgbus_number(@queue[:total_messages])]].each do |key, value| %>
+    <div class="rounded-lg bg-white dark:bg-gray-800 px-4 py-3 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+      <dt class="text-xs font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.queues.show.metrics.#{key}") %></dt>
+      <dd class="mt-1 text-lg font-semibold font-mono text-gray-900 dark:text-white"><%= value %></dd>
+    </div>
+  <% end %>
+</dl>
+
 <!-- Table Health -->
 <% if @health && @health[:tables].any? %>
   <div class="mb-6 overflow-hidden rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700">
     <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
       <h2 class="text-sm font-semibold text-gray-900 dark:text-white"><%= t("pgbus.queues.show.table_health.title") %></h2>
       <% if @health[:oldest_transaction_age_sec] %>
-        <p class="text-xs text-gray-500 mt-1">
+        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
           <%= t("pgbus.queues.show.table_health.oldest_txn") %>
-          <span class="font-mono <%= @health[:oldest_transaction_age_sec] > 60 ? 'text-red-600 dark:text-red-400' : @health[:oldest_transaction_age_sec] > 30 ? 'text-amber-600 dark:text-amber-400' : 'text-green-600 dark:text-green-400' %>"><%= pgbus_duration(@health[:oldest_transaction_age_sec]) %></span>
+          <span class="font-mono <%= @health[:oldest_transaction_age_sec] > 60 ? 'text-red-600 dark:text-red-400' : @health[:oldest_transaction_age_sec] > 30 ? 'text-amber-700 dark:text-amber-400' : 'text-green-700 dark:text-green-400' %>"><%= pgbus_duration(@health[:oldest_transaction_age_sec]) %></span>
         </p>
       <% end %>
     </div>
     <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-2 text-left text-xs font-medium uppercase text-gray-500"><%= t("pgbus.queues.show.table_health.headers.table") %></th>
-          <th class="px-4 py-2 text-right text-xs font-medium uppercase text-gray-500"><%= t("pgbus.queues.show.table_health.headers.live") %></th>
-          <th class="px-4 py-2 text-right text-xs font-medium uppercase text-gray-500"><%= t("pgbus.queues.show.table_health.headers.dead") %></th>
-          <th class="px-4 py-2 text-right text-xs font-medium uppercase text-gray-500"><%= t("pgbus.queues.show.table_health.headers.bloat") %></th>
-          <th class="px-4 py-2 text-right text-xs font-medium uppercase text-gray-500"><%= t("pgbus.queues.show.table_health.headers.last_vacuum") %></th>
+          <th class="px-4 py-2 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.queues.show.table_health.headers.table") %></th>
+          <th class="px-4 py-2 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.queues.show.table_health.headers.live") %></th>
+          <th class="px-4 py-2 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.queues.show.table_health.headers.dead") %></th>
+          <th class="px-4 py-2 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.queues.show.table_health.headers.bloat") %></th>
+          <th class="px-4 py-2 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.queues.show.table_health.headers.last_vacuum") %></th>
         </tr>
       </thead>
       <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
         <% @health[:tables].each do |t| %>
-          <tr class="dark:bg-gray-900">
-            <td class="px-4 py-2 text-sm font-mono text-gray-900 dark:text-white"><%= t[:table] %></td>
-            <td class="px-4 py-2 text-sm text-right text-gray-700 dark:text-gray-300"><%= pgbus_number(t[:live_tuples]) %></td>
-            <td class="px-4 py-2 text-sm text-right <%= t[:dead_tuples] > 1000 ? 'text-amber-600 dark:text-amber-400 font-semibold' : 'text-gray-700 dark:text-gray-300' %>"><%= pgbus_number(t[:dead_tuples]) %></td>
-            <td class="px-4 py-2 text-sm text-right <%= t[:bloat_ratio] > 0.2 ? 'text-red-600 dark:text-red-400 font-semibold' : t[:bloat_ratio] > 0.1 ? 'text-amber-600 dark:text-amber-400' : 'text-gray-500 dark:text-gray-400' %>"><%= (t[:bloat_ratio] * 100).round(1) %>%</td>
-            <td class="px-4 py-2 text-sm text-right text-gray-500 dark:text-gray-400"><%= t[:last_vacuum_ago_sec] ? pgbus_duration(t[:last_vacuum_ago_sec]) : "—" %></td>
+          <tr>
+            <td data-label="<%= t("pgbus.queues.show.table_health.headers.table") %>" class="px-4 py-2 text-sm font-mono text-gray-900 dark:text-white"><%= t[:table] %></td>
+            <td data-label="<%= t("pgbus.queues.show.table_health.headers.live") %>" class="px-4 py-2 text-sm text-right text-gray-700 dark:text-gray-300"><%= pgbus_number(t[:live_tuples]) %></td>
+            <td data-label="<%= t("pgbus.queues.show.table_health.headers.dead") %>" class="px-4 py-2 text-sm text-right <%= t[:dead_tuples] > 1000 ? 'text-amber-700 dark:text-amber-400 font-semibold' : 'text-gray-700 dark:text-gray-300' %>"><%= pgbus_number(t[:dead_tuples]) %></td>
+            <td data-label="<%= t("pgbus.queues.show.table_health.headers.bloat") %>" class="px-4 py-2 text-sm text-right <%= t[:bloat_ratio] > 0.2 ? 'text-red-600 dark:text-red-400 font-semibold' : t[:bloat_ratio] > 0.1 ? 'text-amber-700 dark:text-amber-400' : 'text-gray-500 dark:text-gray-400' %>"><%= (t[:bloat_ratio] * 100).round(1) %>%</td>
+            <td data-label="<%= t("pgbus.queues.show.table_health.headers.last_vacuum") %>" class="px-4 py-2 text-sm text-right text-gray-500 dark:text-gray-400"><%= t[:last_vacuum_ago_sec] ? pgbus_duration(t[:last_vacuum_ago_sec]) : "—" %></td>
           </tr>
         <% end %>
       </tbody>
@@ -79,81 +92,19 @@
   </div>
 <% end %>
 
-<!-- Messages in Queue -->
-<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.queues.show.headers.id") %></th>
-        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500"><%= t("pgbus.queues.show.headers.job_class") %></th>
-        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500"><%= t("pgbus.queues.show.headers.enqueued") %></th>
-        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500"><%= t("pgbus.queues.show.headers.reads") %></th>
-        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500"><%= t("pgbus.queues.show.headers.vt") %></th>
-      </tr>
-    </thead>
-    <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
-      <% @messages.each do |m| %>
-        <% payload = pgbus_parse_message(m[:message]) %>
-        <tr>
-          <td colspan="5" class="p-0">
-            <details class="group">
-              <summary class="flex cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50 dark:bg-gray-900 list-none">
-                <span class="w-16 shrink-0 px-4 py-3 text-sm font-mono text-gray-900 dark:text-white"><%= m[:msg_id] %></span>
-                <span class="flex-1 px-4 py-3 text-sm font-medium text-gray-900 dark:text-white"><%= payload["job_class"] || "—" %></span>
-                <span class="w-28 shrink-0 px-4 py-3 text-sm text-gray-500"><%= pgbus_time_ago(m[:enqueued_at]) %></span>
-                <span class="w-16 shrink-0 px-4 py-3 text-sm text-gray-500"><%= m[:read_ct] %></span>
-                <span class="w-28 shrink-0 px-4 py-3 text-sm text-gray-500"><%= pgbus_time_ago(m[:vt]) %></span>
-              </summary>
-              <div class="px-4 pb-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-100">
-                <div class="flex items-center mt-3 mb-3">
-                  <span class="text-xs font-mono text-gray-400"><%= t("pgbus.queues.show.job_id") %> <%= payload["job_id"] %></span>
-                </div>
-                <div class="grid grid-cols-2 gap-4 mb-3">
-                  <div>
-                    <span class="text-xs font-medium text-gray-500"><%= t("pgbus.queues.show.arguments") %></span>
-                    <pre class="text-xs text-gray-700 bg-white dark:bg-gray-800 rounded p-2 mt-1 overflow-x-auto max-h-40"><%= JSON.pretty_generate(payload["arguments"] || []) rescue "—" %></pre>
-                  </div>
-                  <div>
-                    <span class="text-xs font-medium text-gray-500"><%= t("pgbus.queues.show.metadata") %></span>
-                    <div class="text-xs text-gray-600 bg-white dark:bg-gray-800 rounded p-2 mt-1 space-y-1">
-                      <% if payload["queue_name"] %><p><strong><%= t("pgbus.queues.show.metadata_labels.queue") %></strong> <%= payload["queue_name"] %></p><% end %>
-                      <% if payload["priority"] %><p><strong><%= t("pgbus.queues.show.metadata_labels.priority") %></strong> <%= payload["priority"] %></p><% end %>
-                      <% if payload["locale"] %><p><strong><%= t("pgbus.queues.show.metadata_labels.locale") %></strong> <%= payload["locale"] %></p><% end %>
-                      <% if payload["timezone"] %><p><strong><%= t("pgbus.queues.show.metadata_labels.timezone") %></strong> <%= payload["timezone"] %></p><% end %>
-                      <% if payload["scheduled_at"] %><p><strong><%= t("pgbus.queues.show.metadata_labels.scheduled") %></strong> <%= payload["scheduled_at"] %></p><% end %>
-                      <% if m[:vt] %><p><strong><%= t("pgbus.queues.show.metadata_labels.visible_at") %></strong> <%= m[:vt] %></p><% end %>
-                      <% if m[:last_read_at] %><p><strong><%= t("pgbus.queues.show.metadata_labels.last_read") %></strong> <%= m[:last_read_at] %></p><% end %>
-                    </div>
-                  </div>
-                </div>
-                <details class="mt-2">
-                  <summary class="text-xs font-medium text-gray-500 cursor-pointer hover:text-gray-700"><%= t("pgbus.queues.show.full_json_payload") %></summary>
-                  <pre class="text-xs text-gray-600 bg-white dark:bg-gray-800 rounded p-2 mt-1 overflow-x-auto max-h-96"><%= JSON.pretty_generate(payload) rescue m[:message] %></pre>
-                </details>
-                <% if m[:headers] %>
-                  <details class="mt-2">
-                    <summary class="text-xs font-medium text-gray-500 cursor-pointer hover:text-gray-700"><%= t("pgbus.queues.show.headers_section") %></summary>
-                    <pre class="text-xs text-gray-600 bg-white dark:bg-gray-800 rounded p-2 mt-1 overflow-x-auto"><%= JSON.pretty_generate(JSON.parse(m[:headers])) rescue m[:headers] %></pre>
-                  </details>
-                <% end %>
-                <div class="flex space-x-2 mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
-                  <%= button_to t("pgbus.queues.show.retry"), pgbus.retry_message_queue_path(name: params[:name], msg_id: m[:msg_id]),
-                        method: :post,
-                        class: "rounded-md bg-indigo-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-indigo-500",
-                        data: { turbo_confirm: t("pgbus.queues.show.retry_confirm") } %>
-                  <%= button_to t("pgbus.queues.show.discard"), pgbus.discard_message_queue_path(name: params[:name], msg_id: m[:msg_id]),
-                        method: :post,
-                        class: "rounded-md bg-red-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-red-500",
-                        data: { turbo_confirm: t("pgbus.queues.show.discard_confirm") } %>
-                </div>
-              </div>
-            </details>
-          </td>
-        </tr>
-      <% end %>
-      <% if @messages.empty? %>
-        <tr><td colspan="5" class="px-4 py-8 text-center text-sm text-gray-400"><%= t("pgbus.queues.show.empty") %></td></tr>
-      <% end %>
-    </tbody>
-  </table>
-</div>
+<% if @dlq %>
+  <%# DLQ tables are not part of the unified list; their messages live on the Dead Letter page. %>
+  <div data-testid="dlq-pointer" class="rounded-lg bg-white dark:bg-gray-800 px-4 py-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+    <p class="text-sm text-gray-700 dark:text-gray-200">
+      <%= t("pgbus.queues.show.dlq_pointer", logical: @drainers[:logical], count: @queue[:queue_length].to_i) %>
+      <%= pgbus_link_to t("pgbus.queues.show.dlq_link"), pgbus.dead_letter_index_path(dlq: params[:name]), size: :sm %>
+    </p>
+  </div>
+<% else %>
+  <%# Scoped to this physical table. Known warts of job_rows on a _pN table:
+      blocked rows match the logical name, so a queue's blocked jobs show on
+      every level's page (they are parked before a level is chosen), and a
+      failed event whose message sits in a sibling level reads as an orphan. %>
+  <%= render "pgbus/jobs/tabs", state: @state, counts: @counts, list_path: @list_path %>
+  <%= render "pgbus/jobs/list" %>
+<% end %>

data/app/views/pgbus/recurring_tasks/_tasks_table.html.erb

@@ -1,80 +1,79 @@
-<turbo-frame id="recurring-tasks" data-auto-refresh data-src="<%= pgbus.recurring_tasks_path(frame: 'recurring_tasks') %>">
+<turbo-frame id="recurring-tasks" data-auto-refresh data-turbo-action="advance"
+             data-src="<%= pgbus.recurring_tasks_path(request.query_parameters.merge(frame: "recurring_tasks")) %>">
   <div class="rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700">
-    <% if @recurring_tasks.empty? %>
-      <div class="p-8 text-center text-gray-500">
-        <p class="text-lg font-medium"><%= t("pgbus.recurring_tasks.tasks_table.empty_title") %></p>
-        <p class="mt-1 text-sm"><%= t("pgbus.recurring_tasks.tasks_table.empty_hint") %></p>
-      </div>
-    <% else %>
-      <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 text-gray-500 uppercase"><%= t("pgbus.recurring_tasks.tasks_table.headers.task") %></th>
-            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase"><%= t("pgbus.recurring_tasks.tasks_table.headers.schedule") %></th>
-            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase"><%= t("pgbus.recurring_tasks.tasks_table.headers.queue") %></th>
-            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase"><%= t("pgbus.recurring_tasks.tasks_table.headers.last_run") %></th>
-            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase"><%= t("pgbus.recurring_tasks.tasks_table.headers.next_run") %></th>
-            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase"><%= t("pgbus.recurring_tasks.tasks_table.headers.status") %></th>
-            <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase"><%= t("pgbus.recurring_tasks.tasks_table.headers.actions") %></th>
+    <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 dark:text-gray-400"><%= t("pgbus.recurring_tasks.tasks_table.headers.task") %></th>
+          <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.recurring_tasks.tasks_table.headers.schedule") %></th>
+          <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.recurring_tasks.tasks_table.headers.queue") %></th>
+          <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.recurring_tasks.tasks_table.headers.last_run") %></th>
+          <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.recurring_tasks.tasks_table.headers.next_run") %></th>
+          <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.recurring_tasks.tasks_table.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.recurring_tasks.tasks_table.headers.actions") %></th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+        <% @recurring_tasks.each do |task| %>
+          <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
+            <td data-label="<%= t("pgbus.recurring_tasks.tasks_table.headers.task") %>" class="px-4 py-3">
+              <div>
+                <%= pgbus_link_to task[:key], pgbus.recurring_task_path(task[:id]), data: { turbo_frame: "_top" } %>
+              </div>
+              <div class="text-xs text-gray-500 dark:text-gray-400"><%= task[:class_name] || task[:command]&.truncate(40) %></div>
+              <% if task[:description] %>
+                <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5"><%= task[:description] %></div>
+              <% end %>
+            </td>
+            <td data-label="<%= t("pgbus.recurring_tasks.tasks_table.headers.schedule") %>" class="px-4 py-3">
+              <div class="text-sm text-gray-900 dark:text-white"><%= task[:schedule] %></div>
+              <% if task[:human_schedule] && task[:human_schedule] != task[:schedule] %>
+                <div class="text-xs text-gray-500 dark:text-gray-400"><%= task[:human_schedule] %></div>
+              <% end %>
+            </td>
+            <td data-label="<%= t("pgbus.recurring_tasks.tasks_table.headers.queue") %>" class="px-4 py-3 text-sm text-gray-600 dark:text-gray-300">
+              <%= task[:queue_name] || t("pgbus.recurring_tasks.tasks_table.default_queue") %>
+            </td>
+            <td data-label="<%= t("pgbus.recurring_tasks.tasks_table.headers.last_run") %>" class="px-4 py-3 text-sm text-gray-600 dark:text-gray-300">
+              <%= task[:last_run_at] ? pgbus_time(task[:last_run_at]) : t("pgbus.recurring_tasks.tasks_table.never") %>
+            </td>
+            <td data-label="<%= t("pgbus.recurring_tasks.tasks_table.headers.next_run") %>" class="px-4 py-3 text-sm text-gray-600 dark:text-gray-300">
+              <% if task[:enabled] && task[:next_run_at] %>
+                <%= pgbus_time(task[:next_run_at]) %>
+              <% else %>
+                <span class="text-gray-500 dark:text-gray-400">—</span>
+              <% end %>
+            </td>
+            <td data-label="<%= t("pgbus.recurring_tasks.tasks_table.headers.status") %>" class="px-4 py-3">
+              <% if task[:enabled] %>
+                <%= pgbus_recurring_health_badge(task) %>
+              <% else %>
+                <span class="inline-flex items-center rounded-full bg-gray-100 dark:bg-gray-700 px-2.5 py-0.5 text-xs font-medium text-gray-600 dark:text-gray-300">
+                  <%= t("pgbus.recurring_tasks.tasks_table.disabled") %>
+                </span>
+              <% end %>
+            </td>
+            <td data-label="<%= t("pgbus.recurring_tasks.tasks_table.headers.actions") %>" class="px-4 py-3 text-right space-x-1">
+              <%= pgbus_button_to task[:enabled] ? t("pgbus.recurring_tasks.tasks_table.disable") : t("pgbus.recurring_tasks.tasks_table.enable"),
+                  pgbus.toggle_recurring_task_path(task[:id]),
+                  variant: task[:enabled] ? :warning : :success, size: :sm %>
+              <% if task[:enabled] %>
+                <%= pgbus_button_to t("pgbus.recurring_tasks.tasks_table.run_now"),
+                    pgbus.enqueue_recurring_task_path(task[:id]), variant: :primary, size: :sm %>
+              <% end %>
+            </td>
           </tr>
-        </thead>
-        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
-          <% @recurring_tasks.each do |task| %>
-            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 dark:bg-gray-900">
-              <td data-label="Task" class="px-4 py-3">
-                <div>
-                  <%= link_to task[:key], pgbus.recurring_task_path(task[:id]),
-                      class: "text-sm font-medium text-blue-600 hover:text-blue-800",
-                      data: { turbo_frame: "_top" } %>
-                </div>
-                <div class="text-xs text-gray-500"><%= task[:class_name] || task[:command]&.truncate(40) %></div>
-                <% if task[:description] %>
-                  <div class="text-xs text-gray-400 mt-0.5"><%= task[:description] %></div>
-                <% end %>
-              </td>
-              <td data-label="Schedule" class="px-4 py-3">
-                <div class="text-sm text-gray-900 dark:text-white"><%= task[:schedule] %></div>
-                <% if task[:human_schedule] && task[:human_schedule] != task[:schedule] %>
-                  <div class="text-xs text-gray-400"><%= task[:human_schedule] %></div>
-                <% end %>
-              </td>
-              <td data-label="Queue" class="px-4 py-3 text-sm text-gray-600">
-                <%= task[:queue_name] || t("pgbus.recurring_tasks.tasks_table.default_queue") %>
-              </td>
-              <td data-label="Last Run" class="px-4 py-3 text-sm text-gray-600">
-                <%= task[:last_run_at] ? pgbus_time_ago(task[:last_run_at]) : t("pgbus.recurring_tasks.tasks_table.never") %>
-              </td>
-              <td data-label="Next Run" class="px-4 py-3 text-sm text-gray-600">
-                <% if task[:enabled] && task[:next_run_at] %>
-                  <%= pgbus_time_ago_future(task[:next_run_at]) %>
-                <% else %>
-                  <span class="text-gray-400">—</span>
-                <% end %>
-              </td>
-              <td data-label="Status" class="px-4 py-3">
-                <% if task[:enabled] %>
-                  <%= pgbus_recurring_health_badge(task) %>
-                <% else %>
-                  <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">
-                    <%= t("pgbus.recurring_tasks.tasks_table.disabled") %>
-                  </span>
-                <% end %>
-              </td>
-              <td data-label="Actions" class="px-4 py-3 text-right space-x-1">
-                <%= button_to task[:enabled] ? t("pgbus.recurring_tasks.tasks_table.disable") : t("pgbus.recurring_tasks.tasks_table.enable"),
-                    pgbus.toggle_recurring_task_path(task[:id]),
-                    class: "inline-flex items-center rounded px-2 py-1 text-xs font-medium " \
-                           "#{task[:enabled] ? 'bg-yellow-100 text-yellow-700 hover:bg-yellow-200' : 'bg-green-100 text-green-700 hover:bg-green-200'}" %>
-                <% if task[:enabled] %>
-                  <%= button_to t("pgbus.recurring_tasks.tasks_table.run_now"),
-                      pgbus.enqueue_recurring_task_path(task[:id]),
-                      class: "inline-flex items-center rounded bg-blue-100 px-2 py-1 text-xs font-medium text-blue-700 hover:bg-blue-200" %>
-                <% end %>
-              </td>
-            </tr>
-          <% end %>
-        </tbody>
-      </table>
-    <% end %>
+        <% end %>
+        <% if @recurring_tasks.empty? %>
+          <%= render "pgbus/shared/empty_row", colspan: 7,
+                message: safe_join([content_tag(:p, t("pgbus.recurring_tasks.tasks_table.empty_title"), class: "text-lg font-medium"),
+                                    content_tag(:p, t("pgbus.recurring_tasks.tasks_table.empty_hint"), class: "mt-1")]) %>
+        <% end %>
+      </tbody>
+    </table>
+    <%= render "pgbus/shared/pager", page: @page, per_page: @per_page, shown: @recurring_tasks.size,
+          total_count: @recurring_tasks_count.total,
+          has_more: @recurring_tasks_count.capped? && @recurring_tasks.size == @per_page,
+          page_path: ->(n) { pgbus.recurring_tasks_path(page: n) } %>
   </div>
 </turbo-frame>

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

@@ -1,6 +1,6 @@
 <div class="flex items-center justify-between mb-6">
   <h1 class="text-2xl font-bold text-gray-900 dark:text-white"><%= t("pgbus.recurring_tasks.index.title") %></h1>
-  <span class="text-sm text-gray-500"><%= t("pgbus.recurring_tasks.index.task_count", count: @recurring_tasks.size) %></span>
+  <span class="text-sm text-gray-500 dark:text-gray-400"><%= t("pgbus.recurring_tasks.index.task_count", count: @recurring_tasks_count.total) %></span>
 </div>
 
 <%= render "pgbus/recurring_tasks/tasks_table" %>

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

@@ -2,87 +2,84 @@
   <div class="flex items-center justify-between">
     <div>
       <h1 class="text-2xl font-bold text-gray-900 dark:text-white"><%= @task[:key] %></h1>
-      <p class="mt-1 text-sm text-gray-500"><%= @task[:class_name] || @task[:command] %></p>
+      <p class="mt-1 text-sm text-gray-500 dark:text-gray-400"><%= @task[:class_name] || @task[:command] %></p>
     </div>
     <div class="flex space-x-2">
-      <%= button_to @task[:enabled] ? t("pgbus.recurring_tasks.show.disable") : t("pgbus.recurring_tasks.show.enable"),
+      <%= pgbus_button_to @task[:enabled] ? t("pgbus.recurring_tasks.show.disable") : t("pgbus.recurring_tasks.show.enable"),
           pgbus.toggle_recurring_task_path(@task[:id]),
-          class: "inline-flex items-center rounded-md px-3 py-2 text-sm font-medium " \
-                 "#{@task[:enabled] ? 'bg-yellow-100 text-yellow-700 hover:bg-yellow-200' : 'bg-green-100 text-green-700 hover:bg-green-200'}" %>
+          variant: @task[:enabled] ? :warning : :success %>
       <% if @task[:enabled] %>
-        <%= button_to t("pgbus.recurring_tasks.show.run_now"),
-            pgbus.enqueue_recurring_task_path(@task[:id]),
-            class: "inline-flex items-center rounded-md bg-blue-600 px-3 py-2 text-sm font-medium text-white hover:bg-blue-700" %>
+        <%= pgbus_button_to t("pgbus.recurring_tasks.show.run_now"),
+            pgbus.enqueue_recurring_task_path(@task[:id]), variant: :primary %>
       <% end %>
-      <%= link_to t("pgbus.recurring_tasks.show.back"), pgbus.recurring_tasks_path,
-          class: "inline-flex items-center rounded-md bg-gray-100 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200" %>
+      <%= pgbus_link_to t("pgbus.recurring_tasks.show.back"), pgbus.recurring_tasks_path, variant: :secondary %>
     </div>
   </div>
 </div>
 
 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
   <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"><%= t("pgbus.recurring_tasks.show.schedule") %></p>
+    <p class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.recurring_tasks.show.schedule") %></p>
     <p class="mt-1 text-lg font-semibold text-gray-900 dark:text-white"><%= @task[:schedule] %></p>
     <% if @task[:human_schedule] && @task[:human_schedule] != @task[:schedule] %>
-      <p class="text-xs text-gray-400"><%= @task[:human_schedule] %></p>
+      <p class="text-xs text-gray-500 dark:text-gray-400"><%= @task[:human_schedule] %></p>
     <% end %>
   </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"><%= t("pgbus.recurring_tasks.show.next_run") %></p>
+    <p class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.recurring_tasks.show.next_run") %></p>
     <% if @task[:enabled] && @task[:next_run_at] %>
-      <p class="mt-1 text-lg font-semibold text-gray-900 dark:text-white"><%= pgbus_time_ago_future(@task[:next_run_at]) %></p>
-      <p class="text-xs text-gray-400"><%= @task[:next_run_at]&.strftime("%Y-%m-%d %H:%M:%S %Z") %></p>
+      <p class="mt-1 text-lg font-semibold text-gray-900 dark:text-white"><%= pgbus_time(@task[:next_run_at], clock: true) %></p>
+      <p class="text-xs text-gray-500 dark:text-gray-400"><%= pgbus_absolute_time(@task[:next_run_at]) %></p>
     <% else %>
-      <p class="mt-1 text-lg font-semibold text-gray-400">—</p>
+      <p class="mt-1 text-lg font-semibold text-gray-500 dark:text-gray-400">—</p>
     <% end %>
   </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"><%= t("pgbus.recurring_tasks.show.status") %></p>
-    <p class="mt-1"><%= @task[:enabled] ? pgbus_recurring_health_badge(@task) : content_tag(:span, t("pgbus.recurring_tasks.show.disabled"), class: "inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600") %></p>
+    <p class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.recurring_tasks.show.status") %></p>
+    <p class="mt-1"><%= @task[:enabled] ? pgbus_recurring_health_badge(@task) : content_tag(:span, t("pgbus.recurring_tasks.show.disabled"), class: "inline-flex items-center rounded-full bg-gray-100 dark:bg-gray-700 px-2.5 py-0.5 text-xs font-medium text-gray-600 dark:text-gray-300") %></p>
   </div>
 </div>
 
 <div class="rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700 mb-8">
-  <div class="px-4 py-3 border-b border-gray-200">
+  <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
     <h2 class="text-lg font-medium text-gray-900 dark:text-white"><%= t("pgbus.recurring_tasks.show.configuration") %></h2>
   </div>
   <div class="p-4">
     <dl class="grid grid-cols-1 sm:grid-cols-2 gap-4">
       <div>
-        <dt class="text-sm font-medium text-gray-500"><%= t("pgbus.recurring_tasks.show.labels.job_class") %></dt>
+        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.recurring_tasks.show.labels.job_class") %></dt>
         <dd class="mt-1 text-sm text-gray-900 dark:text-white"><%= @task[:class_name] || "—" %></dd>
       </div>
       <% if @task[:command] %>
         <div>
-          <dt class="text-sm font-medium text-gray-500"><%= t("pgbus.recurring_tasks.show.labels.command") %></dt>
+          <dt class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.recurring_tasks.show.labels.command") %></dt>
           <dd class="mt-1 text-sm text-gray-900 dark:text-white font-mono text-xs"><%= @task[:command] %></dd>
         </div>
       <% end %>
       <div>
-        <dt class="text-sm font-medium text-gray-500"><%= t("pgbus.recurring_tasks.show.labels.queue") %></dt>
+        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.recurring_tasks.show.labels.queue") %></dt>
         <dd class="mt-1 text-sm text-gray-900 dark:text-white"><%= @task[:queue_name] || t("pgbus.recurring_tasks.show.default_queue") %></dd>
       </div>
       <div>
-        <dt class="text-sm font-medium text-gray-500"><%= t("pgbus.recurring_tasks.show.labels.priority") %></dt>
+        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.recurring_tasks.show.labels.priority") %></dt>
         <dd class="mt-1 text-sm text-gray-900 dark:text-white"><%= @task[:priority] %></dd>
       </div>
       <% if @task[:arguments]&.any? %>
         <div class="sm:col-span-2">
-          <dt class="text-sm font-medium text-gray-500"><%= t("pgbus.recurring_tasks.show.labels.arguments") %></dt>
+          <dt class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.recurring_tasks.show.labels.arguments") %></dt>
           <dd class="mt-1 text-sm text-gray-900 dark:text-white font-mono text-xs"><%= @task[:arguments].inspect %></dd>
         </div>
       <% end %>
       <% if @task[:description] %>
         <div class="sm:col-span-2">
-          <dt class="text-sm font-medium text-gray-500"><%= t("pgbus.recurring_tasks.show.labels.description") %></dt>
+          <dt class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.recurring_tasks.show.labels.description") %></dt>
           <dd class="mt-1 text-sm text-gray-900 dark:text-white"><%= @task[:description] %></dd>
         </div>
       <% end %>
       <div>
-        <dt class="text-sm font-medium text-gray-500"><%= t("pgbus.recurring_tasks.show.labels.source") %></dt>
+        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.recurring_tasks.show.labels.source") %></dt>
         <dd class="mt-1 text-sm text-gray-900 dark:text-white"><%= @task[:static] ? t("pgbus.recurring_tasks.show.source_config") : t("pgbus.recurring_tasks.show.source_dynamic") %></dd>
       </div>
     </dl>
@@ -90,33 +87,30 @@
 </div>
 
 <div class="rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700">
-  <div class="px-4 py-3 border-b border-gray-200">
+  <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
     <h2 class="text-lg font-medium text-gray-900 dark:text-white"><%= t("pgbus.recurring_tasks.show.recent_executions") %></h2>
   </div>
-  <% if @task[:executions]&.any? %>
-    <table class="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 text-gray-500 uppercase"><%= t("pgbus.recurring_tasks.show.execution_headers.scheduled_for") %></th>
-          <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase"><%= t("pgbus.recurring_tasks.show.execution_headers.enqueued_at") %></th>
+  <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 dark:text-gray-400"><%= t("pgbus.recurring_tasks.show.execution_headers.scheduled_for") %></th>
+        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.recurring_tasks.show.execution_headers.enqueued_at") %></th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+      <% Array(@task[:executions]).each do |exec| %>
+        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
+          <td data-label="<%= t("pgbus.recurring_tasks.show.execution_headers.scheduled_for") %>" class="px-4 py-3 text-sm text-gray-900 dark:text-white">
+            <%= pgbus_timestamp(exec[:run_at]) %>
+          </td>
+          <td data-label="<%= t("pgbus.recurring_tasks.show.execution_headers.enqueued_at") %>" class="px-4 py-3 text-sm text-gray-600 dark:text-gray-300">
+            <%= pgbus_time(exec[:created_at]) %>
+          </td>
         </tr>
-      </thead>
-      <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
-        <% @task[:executions].each do |exec| %>
-          <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 dark:bg-gray-900">
-            <td class="px-4 py-3 text-sm text-gray-900 dark:text-white">
-              <%= exec[:run_at]&.strftime("%Y-%m-%d %H:%M:%S %Z") %>
-            </td>
-            <td class="px-4 py-3 text-sm text-gray-600">
-              <%= exec[:created_at] ? pgbus_time_ago(exec[:created_at]) : "—" %>
-            </td>
-          </tr>
-        <% end %>
-      </tbody>
-    </table>
-  <% else %>
-    <div class="p-8 text-center text-gray-500">
-      <p><%= t("pgbus.recurring_tasks.show.no_executions") %></p>
-    </div>
-  <% end %>
+      <% end %>
+      <% if Array(@task[:executions]).empty? %>
+        <%= render "pgbus/shared/empty_row", colspan: 2, message: t("pgbus.recurring_tasks.show.no_executions") %>
+      <% end %>
+    </tbody>
+  </table>
 </div>

data/app/views/pgbus/shared/_empty_row.html.erb

@@ -0,0 +1,2 @@
+<%# Empty-state row. Locals: colspan (the table's rendered column count), message. %>
+<tr><td colspan="<%= colspan %>" class="px-4 py-8 text-center text-sm text-gray-500 dark:text-gray-400"><%= message %></td></tr>