pgbus 0.17.1 → 0.17.3

data/app/helpers/pgbus/processes_helper.rb

@@ -0,0 +1,79 @@
+# frozen_string_literal: true
+
+module Pgbus
+  # The Processes page's words (issue #493): ProcessState results as
+  # sentences. Moments go through pgbus_time, seconds through pgbus_duration,
+  # counts through number_with_delimiter.
+  module ProcessesHelper
+    PART_SEPARATOR = " · "
+
+    # Metadata keys the row always renders (status, activity, recycle limits,
+    # Process cell, uptime), left out of the expansion's raw chips. Counters
+    # and RSS stay: Recycle shows them only when a limit is configured.
+    RENDERED_METADATA_KEYS = %w[
+      rates in_flight loop_tick_at buffered capacity busy started_at supervisor_pid max_jobs max_memory_mb
+      max_lifetime queues topics tasks threads capsule process pid hostname
+    ].freeze
+
+    SECONDS_ARGS = %i[limit within interval age].freeze
+    NUMBER_ARGS = %i[number busy capacity].freeze
+
+    # "Loop last ticked 2m ago (limit 1m 30s) — the supervisor's watchdog
+    # restarts it". The _html key lets the <time> through.
+    def pgbus_process_status(result)
+      reason = translate("pgbus.processes.state.reasons.#{result.reason_key}_html", **pgbus_process_args(result.reason_args))
+      return reason unless result.next_key
+
+      safe_join([reason, " — ", t("pgbus.processes.state.next.#{result.next_key}", **pgbus_process_args(result.next_args))])
+    end
+
+    def pgbus_process_activity(result)
+      parts = result.activity.map do |key, args|
+        next t("pgbus.processes.state.activity.supervises", children: pgbus_process_children(args[:children])) if key == "supervises"
+
+        t("pgbus.processes.state.activity.#{key}", **pgbus_process_args(args))
+      end
+      pgbus_process_join(parts)
+    end
+
+    def pgbus_process_recycle(result)
+      parts = Array(result.recycle).map do |key, args|
+        values = if key == "lifetime"
+                   { uptime: pgbus_duration(args[:uptime]), limit: pgbus_duration(args[:limit]) }
+                 else
+                   args.transform_values { |v| v.nil? ? Web::TimeFormat::NONE : number_with_delimiter(v) }
+                 end
+        t("pgbus.processes.state.recycle.#{key}", **values)
+      end
+      pgbus_process_join(parts)
+    end
+
+    def pgbus_process_raw_metadata(metadata)
+      return {} unless metadata.is_a?(Hash)
+
+      metadata.reject { |k, _| RENDERED_METADATA_KEYS.include?(k.to_s) }
+    end
+
+    private
+
+    def pgbus_process_args(args)
+      args.to_h do |key, value|
+        case key
+        when :ago then [key, pgbus_time(value)]
+        when *SECONDS_ARGS then [key, pgbus_duration(value)]
+        when *NUMBER_ARGS then [key, number_with_delimiter(value)]
+        else [key, value]
+        end
+      end
+    end
+
+    def pgbus_process_children(children)
+      children.map { |kind, count| t("pgbus.processes.state.kinds.#{kind}", count: count, default: "#{count} #{kind}") }
+              .join(", ")
+    end
+
+    def pgbus_process_join(parts)
+      parts.empty? ? Web::TimeFormat::NONE : safe_join(parts, PART_SEPARATOR)
+    end
+  end
+end

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

@@ -86,7 +86,6 @@
   <%# Importmap for ES modules — keys are internal symbols, values are app-controlled paths, no user input %>
   <% importmaps = Pgbus::FrontendsController.js_modules.keys.index_with { |mod| frontend_module_path(mod, format: :js, locale: nil) } %>
   <%= tag.script({ imports: importmaps }.to_json.html_safe, type: "importmap", nonce: content_security_policy_nonce) %> <%# herb:disable erb-no-unsafe-raw %>
-  <%= tag.script("", src: frontend_static_path(:apexcharts, format: :js, locale: nil), nonce: content_security_policy_nonce) %>
 
   <script type="module" nonce="<%= content_security_policy_nonce %>">
     import "application";

data/app/views/pgbus/batches/_batches_table.html.erb

@@ -1,4 +1,5 @@
-<turbo-frame id="batches-list" data-auto-refresh data-src="<%= pgbus.batches_path(frame: 'list') %>">
+<turbo-frame id="batches-list" data-auto-refresh data-turbo-action="advance"
+             data-src="<%= pgbus.batches_path(request.query_parameters.merge(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="pgbus-table min-w-full divide-y divide-gray-200 dark:divide-gray-700">
       <thead class="bg-gray-50 dark:bg-gray-900">
@@ -14,18 +15,17 @@
       <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
         <% @batches.each do |batch| %>
           <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
-            <td data-label="Batch ID" class="px-4 py-3 text-sm">
-              <%= link_to batch[:batch_id][0..7], pgbus.batch_path(batch[:batch_id]),
-                    class: "font-mono text-indigo-600 dark:text-indigo-400 hover:underline",
-                    data: { turbo_frame: "_top" } %>
+            <td data-label="<%= t("pgbus.batches.index.headers.batch_id") %>" class="px-4 py-3 text-sm">
+              <%= pgbus_link_to batch[:batch_id][0..7], pgbus.batch_path(batch[:batch_id]),
+                    class: "font-mono", data: { turbo_frame: "_top" } %>
             </td>
-            <td data-label="Description" class="px-4 py-3 text-sm text-gray-700 dark:text-gray-300 max-w-xs truncate">
+            <td data-label="<%= t("pgbus.batches.index.headers.description") %>" class="px-4 py-3 text-sm text-gray-700 dark:text-gray-300 max-w-xs truncate">
               <%= batch[:description] || "—" %>
             </td>
-            <td data-label="Status" class="px-4 py-3 text-sm">
+            <td data-label="<%= t("pgbus.batches.index.headers.status") %>" class="px-4 py-3 text-sm">
               <%= pgbus_batch_status_badge(batch[:status]) %>
             </td>
-            <td data-label="Progress" class="px-4 py-3 text-sm">
+            <td data-label="<%= t("pgbus.batches.index.headers.progress") %>" class="px-4 py-3 text-sm">
               <div class="flex items-center space-x-2">
                 <div class="w-24 bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                   <div class="h-2 rounded-full <%= batch[:failed_jobs].to_i > 0 ? 'bg-amber-500' : 'bg-green-500' %>"
@@ -34,21 +34,24 @@
                 <span class="text-xs text-gray-500 dark:text-gray-400 font-mono"><%= batch[:progress_pct] %>%</span>
               </div>
             </td>
-            <td data-label="Jobs" class="px-4 py-3 text-sm text-right font-mono text-gray-500 dark:text-gray-400">
+            <td data-label="<%= t("pgbus.batches.index.headers.jobs") %>" class="px-4 py-3 text-sm text-right font-mono text-gray-500 dark:text-gray-400">
               <%= batch[:completed_jobs] %>/<%= batch[:total_jobs] %>
               <% if batch[:failed_jobs].to_i > 0 %>
-                <span class="text-red-500">(<%= batch[:failed_jobs] %> failed)</span>
+                <span class="text-red-700 dark:text-red-400">(<%= batch[:failed_jobs] %> failed)</span>
               <% end %>
             </td>
-            <td data-label="Created" class="px-4 py-3 text-sm text-right text-gray-500 dark:text-gray-400">
-              <%= pgbus_time_ago(batch[:created_at]) %>
+            <td data-label="<%= t("pgbus.batches.index.headers.created") %>" class="px-4 py-3 text-sm text-right text-gray-500 dark:text-gray-400">
+              <%= pgbus_time(batch[:created_at]) %>
             </td>
           </tr>
         <% end %>
         <% if @batches.empty? %>
-          <tr><td colspan="6" class="px-4 py-8 text-center text-sm text-gray-400 dark:text-gray-500"><%= t("pgbus.batches.index.empty") %></td></tr>
+          <%= render "pgbus/shared/empty_row", colspan: 6, message: t("pgbus.batches.index.empty") %>
         <% end %>
       </tbody>
     </table>
+    <%= render "pgbus/shared/pager", page: @page, per_page: @per_page, shown: @batches.size,
+          total_count: @batches_count.total, has_more: @batches_count.capped? && @batches.size == @per_page,
+          page_path: ->(n) { pgbus.batches_path(page: n) } %>
   </div>
 </turbo-frame>

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

@@ -1,7 +1,6 @@
 <div class="mb-6">
   <div class="flex items-center space-x-2 mb-2">
-    <%= link_to t("pgbus.batches.show.back"), pgbus.batches_path,
-          class: "text-sm text-indigo-600 dark:text-indigo-400 hover:underline" %>
+    <%= pgbus_link_to t("pgbus.batches.show.back"), pgbus.batches_path %>
   </div>
   <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
     <%= t("pgbus.batches.show.title") %>
@@ -27,12 +26,12 @@
     </div>
     <div class="px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4">
       <dt class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.batches.show.created_at") %></dt>
-      <dd class="mt-1 text-sm text-gray-900 dark:text-white sm:col-span-2 sm:mt-0"><%= @batch[:created_at] %></dd>
+      <dd class="mt-1 text-sm text-gray-900 dark:text-white sm:col-span-2 sm:mt-0"><%= pgbus_timestamp(@batch[:created_at]) %></dd>
     </div>
     <% if @batch[:finished_at] %>
       <div class="px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4">
         <dt class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.batches.show.finished_at") %></dt>
-        <dd class="mt-1 text-sm text-gray-900 dark:text-white sm:col-span-2 sm:mt-0"><%= @batch[:finished_at] %></dd>
+        <dd class="mt-1 text-sm text-gray-900 dark:text-white sm:col-span-2 sm:mt-0"><%= pgbus_timestamp(@batch[:finished_at]) %></dd>
       </div>
     <% end %>
     <% if @batch[:on_finish_class] %>

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

@@ -5,23 +5,23 @@
       <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>
-            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500"><%= t("pgbus.dashboard.processes_table.headers.host") %></th>
-            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500"><%= t("pgbus.dashboard.processes_table.headers.pid") %></th>
-            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500"><%= t("pgbus.dashboard.processes_table.headers.status") %></th>
+            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.dashboard.processes_table.headers.kind") %></th>
+            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.dashboard.processes_table.headers.host") %></th>
+            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.dashboard.processes_table.headers.pid") %></th>
+            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.dashboard.processes_table.headers.status") %></th>
           </tr>
         </thead>
         <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
-          <% @processes.each do |p| %>
-            <tr>
-              <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[:status] || p[:healthy]) %></td>
+          <% @processes.each do |process| %>
+            <tr id="dashboard-process-<%= process[:id] %>">
+              <td data-label="<%= t("pgbus.dashboard.processes_table.headers.kind") %>" class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white"><%= process[:kind] %></td>
+              <td data-label="<%= t("pgbus.dashboard.processes_table.headers.host") %>" class="px-4 py-3 text-sm lg:whitespace-nowrap text-gray-500 dark:text-gray-400"><%= process[:hostname] %></td>
+              <td data-label="<%= t("pgbus.dashboard.processes_table.headers.pid") %>" class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400"><%= process[:pid] %></td>
+              <td data-label="<%= t("pgbus.dashboard.processes_table.headers.status") %>" class="px-4 py-3 text-sm"><%= render "pgbus/processes/status", state: @process_states.fetch(process[:id]) %></td>
             </tr>
           <% end %>
           <% if @processes.empty? %>
-            <tr><td colspan="4" class="px-4 py-8 text-center text-sm text-gray-400"><%= t("pgbus.dashboard.processes_table.empty") %></td></tr>
+            <%= render "pgbus/shared/empty_row", colspan: 4, message: t("pgbus.dashboard.processes_table.empty") %>
           <% end %>
         </tbody>
       </table>

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

@@ -1,78 +1,69 @@
 <turbo-frame id="dashboard-health" data-auto-refresh data-src="<%= pgbus.root_path(frame: 'health') %>">
+  <% verdict = Pgbus::Web::HealthVerdict.present(@health) %>
   <div class="mb-8">
     <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-3"><%= t("pgbus.dashboard.queue_health.title") %></h2>
 
     <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 mb-4">
       <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.dashboard.queue_health.dead_tuples") %></p>
-        <p class="mt-1 text-3xl font-semibold <%= @health[:total_dead_tuples] > 10_000 ? 'text-amber-600 dark:text-amber-400' : 'text-gray-900 dark:text-white' %>">
-          <%= pgbus_number(@health[:total_dead_tuples]) %>
-        </p>
-        <p class="text-xs text-gray-400 dark:text-gray-500"><%= pgbus_number(@health[:total_live_tuples]) %> <%= t("pgbus.dashboard.queue_health.live") %></p>
+        <p class="<%= pgbus_health_number_css(verdict.dead_tuples) %>"><%= pgbus_number(@health[:total_dead_tuples]) %></p>
+        <p class="text-xs text-gray-500 dark:text-gray-400"><%= pgbus_number(@health[:total_live_tuples]) %> <%= t("pgbus.dashboard.queue_health.live") %></p>
+        <%= pgbus_health_words(verdict.dead_tuples) %>
       </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.dashboard.queue_health.worst_bloat") %></p>
-        <p class="mt-1 text-3xl font-semibold <%= @health[:worst_bloat_ratio] > 0.2 ? 'text-red-600 dark:text-red-400' : @health[:worst_bloat_ratio] > 0.1 ? 'text-amber-600 dark:text-amber-400' : 'text-green-600 dark:text-green-400' %>">
-          <%= (@health[:worst_bloat_ratio] * 100).round(1) %>%
-        </p>
+        <p class="<%= pgbus_health_number_css(verdict.bloat) %>"><%= pgbus_percent(@health[:worst_bloat_ratio]) %></p>
         <% if @health[:tables_needing_vacuum] > 0 %>
-          <p class="text-xs text-amber-500"><%= t("pgbus.dashboard.queue_health.tables_need_vacuum", count: @health[:tables_needing_vacuum]) %></p>
+          <p class="text-xs text-gray-500 dark:text-gray-400"><%= t("pgbus.dashboard.queue_health.tables_need_vacuum", count: @health[:tables_needing_vacuum]) %></p>
         <% end %>
+        <%= pgbus_health_words(verdict.bloat) %>
       </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.dashboard.queue_health.last_vacuum") %></p>
-        <p class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">
-          <% if @health[:oldest_vacuum_ago_sec] %>
-            <%= pgbus_duration(@health[:oldest_vacuum_ago_sec]) %>
-          <% else %>
-            —
-          <% end %>
-        </p>
-        <p class="text-xs text-gray-400 dark:text-gray-500"><%= t("pgbus.dashboard.queue_health.oldest_vacuum_ago") %></p>
+        <p class="<%= pgbus_health_number_css(verdict.vacuum) %>"><%= pgbus_duration(@health[:oldest_vacuum_ago_sec]) %></p>
+        <p class="text-xs text-gray-500 dark:text-gray-400"><%= t("pgbus.dashboard.queue_health.oldest_vacuum_ago") %></p>
+        <%= pgbus_health_words(verdict.vacuum) %>
       </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.dashboard.queue_health.mvcc_horizon") %></p>
-        <p class="mt-1 text-3xl font-semibold <%= (@health[:oldest_transaction_age_sec] || 0) > 60 ? 'text-red-600 dark:text-red-400' : (@health[:oldest_transaction_age_sec] || 0) > 30 ? 'text-amber-600 dark:text-amber-400' : 'text-green-600 dark:text-green-400' %>">
-          <% if @health[:oldest_transaction_age_sec] %>
-            <%= pgbus_duration(@health[:oldest_transaction_age_sec]) %>
-          <% else %>
-            —
-          <% end %>
-        </p>
-        <p class="text-xs text-gray-400 dark:text-gray-500"><%= t("pgbus.dashboard.queue_health.oldest_open_txn") %></p>
+        <p class="<%= pgbus_health_number_css(verdict.transaction) %>"><%= pgbus_duration(@health[:oldest_transaction_age_sec]) %></p>
+        <p class="text-xs text-gray-500 dark:text-gray-400"><%= t("pgbus.dashboard.queue_health.oldest_open_txn") %></p>
+        <%= pgbus_health_words(verdict.transaction) %>
       </div>
     </div>
 
-    <% if @health[:tables].any? %>
-      <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.dashboard.queue_health.headers.table") %></th>
-              <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500"><%= t("pgbus.dashboard.queue_health.headers.kind") %></th>
-              <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500"><%= t("pgbus.dashboard.queue_health.headers.live") %></th>
-              <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500"><%= t("pgbus.dashboard.queue_health.headers.dead") %></th>
-              <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500"><%= t("pgbus.dashboard.queue_health.headers.bloat") %></th>
-              <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500"><%= t("pgbus.dashboard.queue_health.headers.last_vacuum") %></th>
+    <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 dark:text-gray-400"><%= t("pgbus.dashboard.queue_health.headers.table") %></th>
+            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.dashboard.queue_health.headers.kind") %></th>
+            <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.dashboard.queue_health.headers.live") %></th>
+            <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.dashboard.queue_health.headers.dead") %></th>
+            <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.dashboard.queue_health.headers.bloat") %></th>
+            <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.dashboard.queue_health.headers.last_vacuum") %></th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+          <% @health[:tables].each do |table| %>
+            <% bloat = Pgbus::Web::HealthVerdict.level(table[:bloat_ratio].to_f, Pgbus::Web::HealthVerdict::BLOAT_WARN, Pgbus::Web::HealthVerdict::BLOAT_CRITICAL) %>
+            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
+              <td data-label="<%= t("pgbus.dashboard.queue_health.headers.table") %>" class="px-4 py-3 text-sm font-mono text-gray-900 dark:text-white"><%= table[:table] %></td>
+              <td data-label="<%= t("pgbus.dashboard.queue_health.headers.kind") %>" class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400"><%= t("pgbus.dashboard.queue_health.kinds.#{table[:kind]}") %></td>
+              <td data-label="<%= t("pgbus.dashboard.queue_health.headers.live") %>" class="px-4 py-3 text-sm text-right text-gray-700 dark:text-gray-300"><%= pgbus_number(table[:live_tuples]) %></td>
+              <td data-label="<%= t("pgbus.dashboard.queue_health.headers.dead") %>" class="px-4 py-3 text-sm text-right text-gray-700 dark:text-gray-300"><%= pgbus_number(table[:dead_tuples]) %></td>
+              <td data-label="<%= t("pgbus.dashboard.queue_health.headers.bloat") %>" class="px-4 py-3 text-sm text-right <%= bloat == :ok ? 'text-gray-700 dark:text-gray-300' : bloat == :warn ? 'text-amber-700 dark:text-amber-300 font-semibold' : 'text-red-700 dark:text-red-300 font-semibold' %>"><%= pgbus_percent(table[:bloat_ratio]) %></td>
+              <td data-label="<%= t("pgbus.dashboard.queue_health.headers.last_vacuum") %>" class="px-4 py-3 text-sm text-right text-gray-500 dark:text-gray-400"><%= pgbus_duration(table[:last_vacuum_ago_sec]) %></td>
             </tr>
-          </thead>
-          <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
-            <% @health[:tables].each do |t| %>
-              <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"><%= t[:table] %></td>
-                <td class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400"><%= t("pgbus.dashboard.queue_health.kinds.#{t[:kind]}") %></td>
-                <td class="px-4 py-3 text-sm text-right text-gray-700 dark:text-gray-300"><%= pgbus_number(t[:live_tuples]) %></td>
-                <td class="px-4 py-3 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-3 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-3 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>
-        </table>
-      </div>
-    <% end %>
+          <% end %>
+          <% if @health[:tables].empty? %>
+            <%= render "pgbus/shared/empty_row", colspan: 6, message: t("pgbus.dashboard.queue_health.empty") %>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
   </div>
 </turbo-frame>

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

@@ -2,37 +2,39 @@
   <div class="mb-8">
     <div class="flex items-center justify-between mb-3">
       <h2 class="text-lg font-semibold text-gray-900 dark:text-white"><%= t("pgbus.dashboard.queues_table.title") %></h2>
-      <%= link_to t("pgbus.dashboard.queues_table.view_all"), pgbus.queues_path, class: "text-sm text-indigo-600 hover:text-indigo-500", data: { turbo_frame: "_top" } %>
+      <%= pgbus_link_to t("pgbus.dashboard.queues_table.view_all"), pgbus.queues_path, data: { turbo_frame: "_top" } %>
     </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.dashboard.queues_table.headers.queue") %></th>
-            <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500"><%= t("pgbus.dashboard.queues_table.headers.depth") %></th>
-            <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500"><%= t("pgbus.dashboard.queues_table.headers.visible") %></th>
-            <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500"><%= t("pgbus.dashboard.queues_table.headers.parked") %></th>
-            <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500"><%= t("pgbus.dashboard.queues_table.headers.oldest_claimable") %></th>
-            <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500"><%= t("pgbus.dashboard.queues_table.headers.total") %></th>
+            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.dashboard.queues_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.dashboard.queues_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.dashboard.queues_table.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.dashboard.queues_table.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.dashboard.queues_table.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.dashboard.queues_table.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.dashboard.queues_table.headers.total") %></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.dashboard.queues_table.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]) %>
               </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="Parked" class="px-4 py-3 text-sm text-right 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="Total" class="px-4 py-3 text-sm text-right text-gray-500"><%= pgbus_number(q[:total_messages]) %></td>
+              <td data-label="<%= t("pgbus.dashboard.queues_table.headers.status") %>" class="px-4 py-3 text-sm"><%= pgbus_queue_status(@queue_lines[q[:name]]) %></td>
+              <td data-label="<%= t("pgbus.dashboard.queues_table.headers.depth") %>" class="px-4 py-3 text-sm text-right text-gray-700 dark:text-gray-200"><%= pgbus_number(q[:queue_length]) %></td>
+              <td data-label="<%= t("pgbus.dashboard.queues_table.headers.visible") %>" class="px-4 py-3 text-sm text-right text-gray-700 dark:text-gray-200"><%= pgbus_number(q[:queue_visible_length]) %></td>
+              <td data-label="<%= t("pgbus.dashboard.queues_table.headers.parked") %>" class="px-4 py-3 text-sm text-right text-gray-500 dark:text-gray-400"><%= pgbus_number(q[:parked_length]) %></td>
+              <td data-label="<%= t("pgbus.dashboard.queues_table.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.dashboard.queues_table.headers.total") %>" class="px-4 py-3 text-sm text-right text-gray-500 dark:text-gray-400"><%= pgbus_number(q[:total_messages]) %></td>
             </tr>
           <% end %>
           <% if @queues.empty? %>
-            <tr><td colspan="6" class="px-4 py-8 text-center text-sm text-gray-400"><%= t("pgbus.dashboard.queues_table.empty") %></td></tr>
+            <%= render "pgbus/shared/empty_row", colspan: 7, message: t("pgbus.dashboard.queues_table.empty") %>
           <% end %>
         </tbody>
       </table>

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

@@ -2,29 +2,33 @@
   <div>
     <div class="flex items-center justify-between mb-3">
       <h2 class="text-lg font-semibold text-gray-900 dark:text-white"><%= t("pgbus.dashboard.recent_failures.title") %></h2>
-      <% if @recent_failures.any? %>
-        <%= link_to t("pgbus.dashboard.recent_failures.view_all"), pgbus.jobs_path(status: "failed"), class: "text-sm text-indigo-600 hover:text-indigo-500", data: { turbo_frame: "_top" } %>
-      <% end %>
+      <%= pgbus_link_to t("pgbus.dashboard.recent_failures.view_all"), pgbus.jobs_path(state: "retrying"), data: { turbo_frame: "_top" } %>
     </div>
-    <div class="overflow-hidden rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+    <div class="overflow-x-auto 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.dashboard.recent_failures.headers.queue") %></th>
-            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500"><%= t("pgbus.dashboard.recent_failures.headers.error") %></th>
-            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500"><%= t("pgbus.dashboard.recent_failures.headers.when") %></th>
+            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.dashboard.recent_failures.headers.job") %></th>
+            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.dashboard.recent_failures.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.dashboard.recent_failures.headers.error") %></th>
+            <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.dashboard.recent_failures.headers.attempt") %></th>
+            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.dashboard.recent_failures.headers.when") %></th>
           </tr>
         </thead>
         <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
           <% @recent_failures.each do |f| %>
-            <tr>
-              <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" title="<%= f["error_class"] %>: <%= f["error_message"] %>"><%= 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 class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
+              <td data-label="<%= t("pgbus.dashboard.recent_failures.headers.job") %>" class="px-4 py-3 text-sm">
+                <%= pgbus_link_to pgbus_failure_job(f), pgbus.job_path(f["id"]), data: { turbo_frame: "_top" } %>
+              </td>
+              <td data-label="<%= t("pgbus.dashboard.recent_failures.headers.queue") %>" class="px-4 py-3 text-sm text-gray-700 dark:text-gray-200"><%= f["queue_name"] %></td>
+              <td data-label="<%= t("pgbus.dashboard.recent_failures.headers.error") %>" class="px-4 py-3 text-sm text-red-700 dark:text-red-300" title="<%= f["error_class"] %>: <%= f["error_message"] %>"><span class="block max-w-md truncate"><%= f["error_class"] %>: <%= truncate(f["error_message"].to_s, length: 60) %></span></td>
+              <td data-label="<%= t("pgbus.dashboard.recent_failures.headers.attempt") %>" class="px-4 py-3 text-sm text-right text-gray-700 dark:text-gray-200"><%= pgbus_failure_attempt(f) %></td>
+              <td data-label="<%= t("pgbus.dashboard.recent_failures.headers.when") %>" class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400"><%= pgbus_time(f["failed_at"]) %></td>
             </tr>
           <% end %>
           <% if @recent_failures.empty? %>
-            <tr><td colspan="3" class="px-4 py-8 text-center text-sm text-gray-400"><%= t("pgbus.dashboard.recent_failures.empty") %></td></tr>
+            <%= render "pgbus/shared/empty_row", colspan: 5, message: t("pgbus.dashboard.recent_failures.empty") %>
           <% end %>
         </tbody>
       </table>

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

@@ -1,54 +1,88 @@
 <turbo-frame id="dashboard-stats" data-auto-refresh data-src="<%= pgbus.root_path(frame: 'stats') %>">
-  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-7 mb-8">
-    <div class="rounded-lg bg-white dark:bg-gray-800 p-5 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+  <%# The verdict /readyz serves (HealthAnalyzer). Its reasons are operator
+      diagnostics in English and show verbatim, like an error message. %>
+  <% verdict = @signals[:verdict] %>
+  <section data-testid="health-verdict" aria-labelledby="health-verdict-title" class="mb-6 rounded-lg p-4 ring-1 <%= pgbus_verdict_css(verdict) %>">
+    <h2 id="health-verdict-title" class="text-sm font-semibold">
+      <% if verdict %>
+        <%= t("pgbus.dashboard.verdict.title", status: t("pgbus.dashboard.verdict.statuses.#{verdict[:status].to_s.downcase}")) %>
+      <% else %>
+        <%= t("pgbus.dashboard.verdict.unavailable") %>
+      <% end %>
+    </h2>
+    <% if verdict %>
+      <p class="mt-1 text-sm"><%= t("pgbus.dashboard.verdict.meaning.#{verdict[:status].to_s.downcase}") %></p>
+      <% if verdict[:reasons].any? %>
+        <ul class="mt-2 list-disc pl-5 text-sm space-y-1">
+          <% verdict[:reasons].each do |reason| %>
+            <li><%= reason %></li>
+          <% end %>
+        </ul>
+      <% end %>
+      <% links = pgbus_verdict_links(@signals) %>
+      <% if links.any? && verdict[:status] != "OK" %>
+        <p class="mt-2 text-sm"><%= t("pgbus.dashboard.verdict.look_at") %> <%= safe_join(links, " · ") %></p>
+      <% end %>
+    <% end %>
+  </section>
+
+  <%# Every card links to the page that explains its number. turbo_frame:
+      "_top" because the cards sit inside the dashboard-stats frame, and the
+      target pages have no frame of that id to render into. %>
+  <% card = Pgbus::DashboardHelper::CARD_CSS %>
+  <% number = Pgbus::DashboardHelper::CARD_NUMBER_CSS %>
+  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 mb-8">
+    <%= link_to pgbus.queues_path, data: { turbo_frame: "_top" }, class: card do %>
       <p class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.dashboard.stats_cards.queues") %></p>
-      <p class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white"><%= @stats[:total_queues] %></p>
-    </div>
+      <p class="<%= number %>"><%= number_with_delimiter(@signals[:queues][:total]) %></p>
+      <p class="text-xs text-gray-600 dark:text-gray-300"><%= pgbus_queue_card_words(@signals[:queues]) %></p>
+    <% end %>
 
-    <div class="rounded-lg bg-white dark:bg-gray-800 p-5 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+    <%= link_to pgbus.jobs_path(state: "ready"), data: { turbo_frame: "_top" }, class: card do %>
       <p class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.dashboard.stats_cards.enqueued") %></p>
-      <p class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white"><%= pgbus_number(@stats[:total_depth]) %></p>
-      <p class="text-xs text-gray-400 dark:text-gray-500"><%= pgbus_number(@stats[:total_visible]) %> <%= t("pgbus.dashboard.stats_cards.visible") %></p>
-    </div>
+      <p class="<%= number %>"><%= pgbus_number(@signals[:queues][:depth]) %></p>
+      <p class="text-xs text-gray-600 dark:text-gray-300"><%= pgbus_enqueued_card_words(@signals[:queues]) %></p>
+    <% end %>
 
-    <div class="rounded-lg bg-white dark:bg-gray-800 p-5 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+    <%= link_to pgbus.processes_path, data: { turbo_frame: "_top" }, class: card do %>
+      <% processes = @signals[:processes] %>
       <p class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.dashboard.stats_cards.processes") %></p>
-      <p class="mt-1 text-3xl font-semibold <%= @stats[:active_processes] > 0 ? 'text-green-600 dark:text-green-400' : 'text-gray-400' %>">
-        <%= @stats[:active_processes] %>
-      </p>
-    </div>
+      <p class="mt-1 text-3xl font-semibold <%= (processes[:stalled] + processes[:stale]).positive? ? 'text-amber-600 dark:text-amber-400' : processes[:healthy].positive? ? 'text-green-600 dark:text-green-400' : 'text-gray-900 dark:text-white' %>"><%= number_with_delimiter(processes[:total]) %></p>
+      <p class="text-xs text-gray-600 dark:text-gray-300"><%= pgbus_process_card_words(processes) %></p>
+    <% end %>
 
-    <div class="rounded-lg bg-white dark:bg-gray-800 p-5 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+    <%= link_to pgbus.recurring_tasks_path, data: { turbo_frame: "_top" }, class: card do %>
       <p class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.dashboard.stats_cards.recurring") %></p>
-      <p class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white"><%= @stats[:recurring_count] %></p>
-      <p class="text-xs text-gray-400">
-        <%= link_to t("pgbus.dashboard.stats_cards.view_tasks"), pgbus.recurring_tasks_path, class: "text-blue-500 hover:text-blue-700 dark:text-blue-400" %>
-      </p>
-    </div>
+      <p class="<%= number %>"><%= number_with_delimiter(@stats[:recurring_count]) %></p>
+      <p class="text-xs text-gray-600 dark:text-gray-300"><%= t("pgbus.dashboard.stats_cards.recurring_detail") %></p>
+    <% end %>
 
-    <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.dashboard.stats_cards.failed_dlq") %></p>
-      <p class="mt-1 text-3xl font-semibold <%= (@stats[:failed_count] + @stats[:dlq_depth]) > 0 ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-white' %>">
-        <%= @stats[:failed_count] %> / <%= @stats[:dlq_depth] %>
-      </p>
-      <p class="text-xs text-gray-400 dark:text-gray-500"><%= t("pgbus.dashboard.stats_cards.failed_dlq_labels") %></p>
-    </div>
+    <%= link_to pgbus.jobs_path(state: "retrying"), data: { turbo_frame: "_top" }, class: card do %>
+      <% retrying = @signals[:retrying] %>
+      <p class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.dashboard.stats_cards.retrying") %></p>
+      <p class="mt-1 text-3xl font-semibold <%= retrying[:count].positive? ? 'text-amber-600 dark:text-amber-400' : 'text-gray-900 dark:text-white' %>"><%= pgbus_retrying_count(retrying) %></p>
+      <p class="text-xs text-gray-600 dark:text-gray-300"><%= pgbus_retrying_card_words(retrying) %></p>
+    <% end %>
 
-    <div class="rounded-lg bg-white dark:bg-gray-800 p-5 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+    <%= link_to pgbus.dead_letter_index_path, data: { turbo_frame: "_top" }, class: card do %>
+      <p class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.dashboard.stats_cards.dead_lettered") %></p>
+      <p class="mt-1 text-3xl font-semibold <%= @signals[:dlq][:depth].positive? ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-white' %>"><%= number_with_delimiter(@signals[:dlq][:depth]) %></p>
+      <p class="text-xs text-gray-600 dark:text-gray-300"><%= pgbus_dlq_card_words(@signals[:dlq]) %></p>
+    <% end %>
+
+    <%= link_to pgbus.insights_path, data: { turbo_frame: "_top" }, class: card do %>
+      <% throughput = @signals[:throughput] %>
       <p class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.dashboard.stats_cards.throughput") %></p>
-      <p class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white"><%= @stats[:throughput_rate] %></p>
-      <p class="text-xs text-gray-400"><%= t("pgbus.dashboard.stats_cards.throughput_unit") %></p>
-    </div>
-
-    <%# The whole card links to the Locks page: parked jobs are only actionable
-        there. turbo_frame: "_top" because this card sits inside the
-        dashboard-stats frame, and /locks has no frame of that id to render into. %>
-    <%= link_to pgbus.locks_path, data: { turbo_frame: "_top" }, class: "rounded-lg bg-white dark:bg-gray-800 p-5 shadow ring-1 ring-gray-200 dark:ring-gray-700 block hover:ring-gray-300 dark:hover:ring-gray-600" do %>
+      <p class="<%= number %>"><%= throughput[:available] ? number_with_precision(throughput[:jobs_per_minute], precision: 1) : Pgbus::Web::TimeFormat::NONE %></p>
+      <p class="text-xs text-gray-600 dark:text-gray-300"><%= throughput[:available] ? t("pgbus.dashboard.stats_cards.throughput_detail", minutes: throughput[:window_minutes]) : t("pgbus.dashboard.stats_cards.throughput_unavailable") %></p>
+    <% end %>
+
+    <%= link_to pgbus.locks_path, data: { turbo_frame: "_top" }, class: card do %>
       <p class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.dashboard.stats_cards.parked_jobs") %></p>
       <p class="mt-1 text-3xl font-semibold <%= @stats[:parked_total].to_i > 0 ? 'text-amber-600 dark:text-amber-400' : 'text-gray-900 dark:text-white' %>">
         <%= pgbus_number(@stats[:parked_total]) %>
       </p>
-      <p class="text-xs text-gray-400 dark:text-gray-500">
+      <p class="text-xs text-gray-600 dark:text-gray-300">
         <%= t("pgbus.dashboard.stats_cards.parked_jobs_oldest", age: pgbus_duration(@stats[:oldest_parked_age_sec])) %>
       </p>
     <% end %>

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

@@ -6,7 +6,7 @@
 
 <%= render "pgbus/dashboard/queue_health" %>
 
-<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+<div class="grid grid-cols-1 2xl:grid-cols-2 gap-6">
   <%= render "pgbus/dashboard/processes_table" %>
   <%= render "pgbus/dashboard/recent_failures" %>
 </div>