pgbus 0.17.1 → 0.17.3

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

@@ -3,7 +3,7 @@
     <h1 class="text-2xl font-bold text-gray-900 dark:text-white"><%= t("pgbus.insights.show.title") %></h1>
     <p class="mt-1 text-sm text-gray-500 dark:text-gray-400"><%= t("pgbus.insights.show.description_html", range: pgbus_time_range_label(@minutes)) %></p>
   </div>
-  <nav class="inline-flex rounded-lg shadow-sm" role="group" aria-label="Time range">
+  <div class="inline-flex rounded-lg shadow-sm" role="group" aria-label="Time range">
     <% ranges = [["1h", 60], ["4h", 240], ["24h", 1440], ["7d", 10_080], ["30d", 43_200]] %>
     <% ranges.each_with_index do |(label, mins), i| %>
       <%
@@ -20,88 +20,85 @@
       %>
       <%= link_to label, pgbus.insights_path(minutes: mins), class: "#{base} #{colors} #{rounded}" %>
     <% end %>
-  </nav>
+  </div>
 </div>
 
 <!-- Summary cards -->
 <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6 mb-8">
-  <div class="rounded-lg bg-white dark:bg-gray-800 p-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+  <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.insights.show.summary.total_jobs") %></dt>
     <dd class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white"><%= pgbus_number(@summary[: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">
+  </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.insights.show.summary.succeeded") %></dt>
     <dd class="mt-1 text-2xl font-semibold text-green-600 dark:text-green-400"><%= pgbus_number(@summary[:success]) %></dd>
-  </div>
-  <div class="rounded-lg bg-white dark:bg-gray-800 p-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+  </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.insights.show.summary.failed") %></dt>
     <dd class="mt-1 text-2xl font-semibold text-red-600 dark:text-red-400"><%= pgbus_number(@summary[:failed]) %></dd>
-  </div>
-  <div class="rounded-lg bg-white dark:bg-gray-800 p-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+  </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.insights.show.summary.dead_lettered") %></dt>
     <dd class="mt-1 text-2xl font-semibold text-orange-600 dark:text-orange-400"><%= pgbus_number(@summary[:dead_lettered]) %></dd>
-  </div>
-  <div class="rounded-lg bg-white dark:bg-gray-800 p-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+  </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.insights.show.summary.avg_duration") %></dt>
     <dd class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white"><%= pgbus_ms_duration(@summary[:avg_duration_ms]) %></dd>
-  </div>
-  <div class="rounded-lg bg-white dark:bg-gray-800 p-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+  </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.insights.show.summary.max_duration") %></dt>
     <dd class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white"><%= pgbus_ms_duration(@summary[:max_duration_ms]) %></dd>
-  </div>
+  </dl>
 </div>
 
 <% if @latency_available %>
 <!-- Latency summary cards -->
 <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5 mb-8">
-  <div class="rounded-lg bg-white dark:bg-gray-800 p-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+  <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.insights.show.summary.avg_latency") %></dt>
     <dd class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white"><%= pgbus_ms_duration(@summary[:avg_latency_ms]) %></dd>
-  </div>
-  <div class="rounded-lg bg-white dark:bg-gray-800 p-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+  </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.insights.show.summary.p50_latency") %></dt>
     <dd class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white"><%= pgbus_ms_duration(@summary[:p50_latency_ms]) %></dd>
-  </div>
-  <div class="rounded-lg bg-white dark:bg-gray-800 p-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+  </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.insights.show.summary.p95_latency") %></dt>
-    <dd class="mt-1 text-2xl font-semibold text-yellow-600 dark:text-yellow-400"><%= pgbus_ms_duration(@summary[:p95_latency_ms]) %></dd>
-  </div>
-  <div class="rounded-lg bg-white dark:bg-gray-800 p-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+    <dd class="mt-1 text-2xl font-semibold text-yellow-700 dark:text-yellow-400"><%= pgbus_ms_duration(@summary[:p95_latency_ms]) %></dd>
+  </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.insights.show.summary.p99_latency") %></dt>
     <dd class="mt-1 text-2xl font-semibold text-orange-600 dark:text-orange-400"><%= pgbus_ms_duration(@summary[:p99_latency_ms]) %></dd>
-  </div>
-  <div class="rounded-lg bg-white dark:bg-gray-800 p-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+  </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.insights.show.summary.avg_retries") %></dt>
     <dd class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white"><%= @summary[:avg_retries]&.round(2) || 0 %></dd>
-  </div>
+  </dl>
 </div>
 <% end %>
 
 <!-- Charts -->
 <div class="grid grid-cols-1 lg:grid-cols-2 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">
-    <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-4"><%= t("pgbus.insights.show.charts.throughput") %></h3>
-    <div id="throughput-chart" style="height: 280px;"></div>
-  </div>
-  <div class="rounded-lg bg-white dark:bg-gray-800 p-5 shadow ring-1 ring-gray-200 dark:ring-gray-700">
-    <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-4"><%= t("pgbus.insights.show.charts.status_distribution") %></h3>
-    <div id="status-chart" style="height: 280px;"></div>
-  </div>
+  <%= render layout: "pgbus/insights/chart_card", locals: { id: "throughput-chart", title: t("pgbus.insights.show.charts.throughput"), empty: @charts[:throughput].empty?, caption: (pgbus_throughput_caption(@charts[:throughput], @minutes) unless @charts[:throughput].empty?) } do %>
+    <%= render "pgbus/insights/throughput_table" %>
+  <% end %>
+  <%= render layout: "pgbus/insights/chart_card", locals: { id: "status-chart", title: t("pgbus.insights.show.charts.status_distribution"), empty: @charts[:status].empty?, caption: (pgbus_status_caption(@charts[:status]) unless @charts[:status].empty?) } do %>
+    <%= render "pgbus/insights/status_table" %>
+  <% end %>
 </div>
 
 <% if @latency_available %>
 <!-- Latency chart -->
 <div class="grid grid-cols-1 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">
-    <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-4"><%= t("pgbus.insights.show.charts.latency") %></h3>
-    <div id="latency-chart" style="height: 280px;"></div>
-  </div>
+  <%= render layout: "pgbus/insights/chart_card", locals: { id: "latency-chart", title: t("pgbus.insights.show.charts.latency"), empty: @charts[:latency].empty?, caption: (pgbus_latency_caption(@summary) unless @charts[:latency].empty?) } do %>
+    <%= render "pgbus/insights/latency_table" %>
+  <% end %>
 </div>
 
 <!-- Latency by queue -->
 <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-5 py-4 border-b border-gray-200 dark:border-gray-700">
-    <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300"><%= t("pgbus.insights.show.latency_by_queue.title") %></h3>
+    <h2 class="text-sm font-medium text-gray-700 dark:text-gray-300"><%= t("pgbus.insights.show.latency_by_queue.title") %></h2>
   </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">
@@ -115,14 +112,14 @@
     <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
       <% @latency_by_queue.each do |row| %>
         <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
-          <td data-label="Queue" class="px-4 py-3 text-sm font-medium text-gray-700 dark:text-gray-300"><%= row[:queue_name] %></td>
-          <td data-label="Count" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= pgbus_number(row[:count]) %></td>
-          <td data-label="Avg" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= pgbus_ms_duration(row[:avg_ms]) %></td>
-          <td data-label="P95" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= pgbus_ms_duration(row[:p95_ms]) %></td>
+          <td data-label="<%= t("pgbus.insights.show.latency_by_queue.headers.queue") %>" class="px-4 py-3 text-sm font-medium text-gray-700 dark:text-gray-300"><%= row[:queue_name] %></td>
+          <td data-label="<%= t("pgbus.insights.show.latency_by_queue.headers.count") %>" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= pgbus_number(row[:count]) %></td>
+          <td data-label="<%= t("pgbus.insights.show.latency_by_queue.headers.avg") %>" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= pgbus_ms_duration(row[:avg_ms]) %></td>
+          <td data-label="<%= t("pgbus.insights.show.latency_by_queue.headers.p95") %>" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= pgbus_ms_duration(row[:p95_ms]) %></td>
         </tr>
       <% end %>
       <% if @latency_by_queue.empty? %>
-        <tr><td colspan="4" class="px-4 py-8 text-center text-sm text-gray-400 dark:text-gray-500"><%= t("pgbus.insights.show.latency_by_queue.empty") %></td></tr>
+        <%= render "pgbus/shared/empty_row", colspan: 4, message: t("pgbus.insights.show.latency_by_queue.empty") %>
       <% end %>
     </tbody>
   </table>
@@ -132,7 +129,7 @@
 <!-- Slowest job classes -->
 <div class="rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700">
   <div class="px-5 py-4 border-b border-gray-200 dark:border-gray-700">
-    <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300"><%= t("pgbus.insights.show.slowest.title") %></h3>
+    <h2 class="text-sm font-medium text-gray-700 dark:text-gray-300"><%= t("pgbus.insights.show.slowest.title") %></h2>
   </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">
@@ -146,14 +143,14 @@
     <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
       <% @slowest.each do |row| %>
         <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
-          <td data-label="Job Class" class="px-4 py-3 text-sm font-medium text-gray-700 dark:text-gray-300"><%= row[:job_class] %></td>
-          <td data-label="Count" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= pgbus_number(row[:count]) %></td>
-          <td data-label="Avg" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= pgbus_ms_duration(row[:avg_ms]) %></td>
-          <td data-label="Max" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= pgbus_ms_duration(row[:max_ms]) %></td>
+          <td data-label="<%= t("pgbus.insights.show.slowest.headers.job_class") %>" class="px-4 py-3 text-sm font-medium text-gray-700 dark:text-gray-300"><%= row[:job_class] %></td>
+          <td data-label="<%= t("pgbus.insights.show.slowest.headers.count") %>" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= pgbus_number(row[:count]) %></td>
+          <td data-label="<%= t("pgbus.insights.show.slowest.headers.avg") %>" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= pgbus_ms_duration(row[:avg_ms]) %></td>
+          <td data-label="<%= t("pgbus.insights.show.slowest.headers.max") %>" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= pgbus_ms_duration(row[:max_ms]) %></td>
         </tr>
       <% end %>
       <% if @slowest.empty? %>
-        <tr><td colspan="4" class="px-4 py-8 text-center text-sm text-gray-400 dark:text-gray-500"><%= t("pgbus.insights.show.slowest.empty") %></td></tr>
+        <%= render "pgbus/shared/empty_row", colspan: 4, message: t("pgbus.insights.show.slowest.empty") %>
       <% end %>
     </tbody>
   </table>
@@ -165,22 +162,22 @@
   <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4"><%= t("pgbus.insights.show.live_streams.title") %></h2>
 
   <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 mb-6">
-    <div class="rounded-lg bg-white dark:bg-gray-800 p-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+    <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.insights.show.live_streams.broadcasts") %></dt>
       <dd class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white"><%= pgbus_number(@live_stream_metrics[:totals][:broadcasts]) %></dd>
-    </div>
-    <div class="rounded-lg bg-white dark:bg-gray-800 p-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+    </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.insights.show.live_streams.active_connections") %></dt>
       <dd class="mt-1 text-2xl font-semibold text-green-600 dark:text-green-400"><%= pgbus_number(@live_stream_metrics[:totals][:active_connections]) %></dd>
-    </div>
-    <div class="rounded-lg bg-white dark:bg-gray-800 p-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+    </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.insights.show.live_streams.total_connections") %></dt>
       <dd class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white"><%= pgbus_number(@live_stream_metrics[:totals][:total_connections]) %></dd>
-    </div>
-    <div class="rounded-lg bg-white dark:bg-gray-800 p-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+    </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.insights.show.live_streams.streams") %></dt>
       <dd class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white"><%= pgbus_number(@live_stream_metrics[:totals][:streams]) %></dd>
-    </div>
+    </dl>
   </div>
 
   <div class="rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700">
@@ -199,14 +196,14 @@
       <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
         <% @live_stream_metrics[:streams].sort_by { |_name, data| -data[:broadcasts] }.each do |name, data| %>
           <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
-            <td data-label="Stream" class="px-4 py-3 text-sm font-medium text-gray-700 dark:text-gray-300"><%= name %></td>
-            <td data-label="Broadcasts" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= pgbus_number(data[:broadcasts]) %></td>
-            <td data-label="Active" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= pgbus_number(data[:active_connections]) %></td>
-            <td data-label="Total" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= pgbus_number(data[:total_connections]) %></td>
+            <td data-label="<%= t("pgbus.insights.show.live_streams.stream") %>" class="px-4 py-3 text-sm font-medium text-gray-700 dark:text-gray-300"><%= name %></td>
+            <td data-label="<%= t("pgbus.insights.show.live_streams.broadcasts") %>" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= pgbus_number(data[:broadcasts]) %></td>
+            <td data-label="<%= t("pgbus.insights.show.live_streams.active_connections") %>" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= pgbus_number(data[:active_connections]) %></td>
+            <td data-label="<%= t("pgbus.insights.show.live_streams.total_connections") %>" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= pgbus_number(data[:total_connections]) %></td>
           </tr>
         <% end %>
         <% if @live_stream_metrics[:streams].empty? %>
-          <tr><td colspan="4" class="px-4 py-8 text-center text-sm text-gray-400 dark:text-gray-500"><%= t("pgbus.insights.show.live_streams.empty") %></td></tr>
+          <%= render "pgbus/shared/empty_row", colspan: 4, message: t("pgbus.insights.show.live_streams.empty") %>
         <% end %>
       </tbody>
     </table>
@@ -220,26 +217,26 @@
   <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4"><%= t("pgbus.insights.show.streams.title") %></h2>
 
   <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5 mb-6">
-    <div class="rounded-lg bg-white dark:bg-gray-800 p-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+    <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.insights.show.streams.summary.broadcasts") %></dt>
       <dd class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white"><%= pgbus_number(@stream_summary[:broadcasts]) %></dd>
-    </div>
-    <div class="rounded-lg bg-white dark:bg-gray-800 p-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+    </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.insights.show.streams.summary.connects") %></dt>
       <dd class="mt-1 text-2xl font-semibold text-green-600 dark:text-green-400"><%= pgbus_number(@stream_summary[:connects]) %></dd>
-    </div>
-    <div class="rounded-lg bg-white dark:bg-gray-800 p-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+    </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.insights.show.streams.summary.disconnects") %></dt>
       <dd class="mt-1 text-2xl font-semibold text-orange-600 dark:text-orange-400"><%= pgbus_number(@stream_summary[:disconnects]) %></dd>
-    </div>
-    <div class="rounded-lg bg-white dark:bg-gray-800 p-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+    </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.insights.show.streams.summary.active") %></dt>
       <dd class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white"><%= pgbus_number(@stream_summary[:active_estimate]) %></dd>
-    </div>
-    <div class="rounded-lg bg-white dark:bg-gray-800 p-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+    </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.insights.show.streams.summary.avg_fanout") %></dt>
       <dd class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white"><%= @stream_summary[:avg_fanout]&.round(1) || 0 %></dd>
-    </div>
+    </dl>
   </div>
 
   <div class="rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700">
@@ -258,14 +255,14 @@
       <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
         <% @top_streams.each do |row| %>
           <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
-            <td data-label="Stream" class="px-4 py-3 text-sm font-medium text-gray-700 dark:text-gray-300"><%= row[:stream_name] %></td>
-            <td data-label="Broadcasts" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= pgbus_number(row[:count]) %></td>
-            <td data-label="Avg Fanout" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= row[:avg_fanout]&.round(1) || 0 %></td>
-            <td data-label="Avg Duration" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= pgbus_ms_duration(row[:avg_ms]) %></td>
+            <td data-label="<%= t("pgbus.insights.show.streams.top.headers.stream") %>" class="px-4 py-3 text-sm font-medium text-gray-700 dark:text-gray-300"><%= row[:stream_name] %></td>
+            <td data-label="<%= t("pgbus.insights.show.streams.top.headers.broadcasts") %>" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= pgbus_number(row[:count]) %></td>
+            <td data-label="<%= t("pgbus.insights.show.streams.top.headers.avg_fanout") %>" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= row[:avg_fanout]&.round(1) || 0 %></td>
+            <td data-label="<%= t("pgbus.insights.show.streams.top.headers.avg_ms") %>" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= pgbus_ms_duration(row[:avg_ms]) %></td>
           </tr>
         <% end %>
         <% if @top_streams.empty? %>
-          <tr><td colspan="4" class="px-4 py-8 text-center text-sm text-gray-400 dark:text-gray-500"><%= t("pgbus.insights.show.streams.top.empty") %></td></tr>
+          <%= render "pgbus/shared/empty_row", colspan: 4, message: t("pgbus.insights.show.streams.top.empty") %>
         <% end %>
       </tbody>
     </table>
@@ -273,31 +270,17 @@
 </div>
 <% end %>
 
+<%# The chart series, embedded once (issue #492): charts.js reads them here
+    instead of fetching /pgbus/api/insights. json_escape keeps a value from
+    closing the tag; a data block needs no nonce. %>
+<%= tag.script(json_escape(@chart_payload.to_json).html_safe, type: "application/json", id: "pgbus-insights-data") %> <%# herb:disable erb-no-unsafe-raw %>
+
 <script type="module" nonce="<%= content_security_policy_nonce %>">
   import { renderCharts, observeThemeChanges } from "charts";
 
-  const i18n = {
-    seriesName: <%= t("pgbus.insights.show.charts.series_name").to_json.html_safe %>,
-    noData: <%= t("pgbus.insights.show.charts.no_data").to_json.html_safe %>,
-    failedToLoad: <%= t("pgbus.insights.show.charts.failed_to_load").to_json.html_safe %>,
-    latencyAvg: <%= t("pgbus.insights.show.charts.latency_avg").to_json.html_safe %>,
-    latencyP95: <%= t("pgbus.insights.show.charts.latency_p95").to_json.html_safe %>,
-  };
-
-  let chartData = null;
-
-  observeThemeChanges(() => chartData, i18n);
+  const i18n = <%= json_escape(pgbus_chart_i18n.to_json).html_safe %>;
+  const data = JSON.parse(document.getElementById("pgbus-insights-data").textContent);
 
-  fetch(<%= pgbus.api_insights_path(minutes: @minutes).to_json.html_safe %>)
-    .then(r => {
-      if (!r.ok) throw new Error("HTTP " + r.status);
-      return r.json();
-    })
-    .then(data => { chartData = data; renderCharts(data, i18n); })
-    .catch(err => {
-      const msg = '<p class="text-center text-sm text-gray-400 dark:text-gray-500 pt-24">' + i18n.failedToLoad + "</p>";
-      document.querySelectorAll("#throughput-chart, #status-chart, #latency-chart").forEach(el => {
-        el.innerHTML = msg;
-      });
-    });
+  renderCharts(data, i18n);
+  observeThemeChanges(() => data, i18n);
 </script>

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

@@ -0,0 +1,64 @@
+<%# Unified job list (issue #489). Each row's state comes from SQL; JobState
+    adds the reason. A row's expansion is the <tr> after it, shown by CSS
+    (.pgbus-job-detail in tailwind.css) while the ID cell's <details> is open,
+    so the auto-refresh pause on `details[open]` keeps working.
+    Reads @list_path (->(extra) { url }) for the frame source and the pager,
+    so the queue page refreshes and pages on its own URL, and @list_scoped:
+    a list cut to one queue offers no "Discard all enqueued", which acts on
+    every queue. %>
+<% selectable = @rows.any? { |r| r[:source] != "blocked" } %>
+<% columns = selectable ? 8 : 7 %>
+<turbo-frame id="jobs-list" data-auto-refresh data-turbo-action="advance"
+             data-src="<%= @list_path.call(page: (@page if @page > 1), frame: "list") %>">
+  <div data-bulk-page>
+    <div class="flex items-center justify-end mb-3 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>
+        <%= pgbus_button_tag t("pgbus.jobs.index.discard_selected"), variant: :danger, form: "bulk-discard-jobs-form",
+              confirm: t("pgbus.jobs.index.discard_selected_confirm") %>
+      </div>
+      <%# Blocked and orphaned rows are not queue messages: the action archives none of them. %>
+      <% if !@list_scoped && %w[ready scheduled running retrying].sum { |s| @counts[s] }.positive? %>
+        <%= pgbus_button_to t("pgbus.jobs.list.discard_all_enqueued"), pgbus.discard_all_enqueued_jobs_path, method: :post,
+              variant: :danger,
+              data: { turbo_confirm: t("pgbus.jobs.list.discard_all_enqueued_confirm"), turbo_frame: "_top" } %>
+      <% end %>
+    </div>
+    <%# Bulk form outside the table to avoid nested forms. Queue rows post
+        messages[]; rows backed by a failed event post ids[]. %>
+    <form id="bulk-discard-jobs-form" action="<%= pgbus.discard_selected_enqueued_jobs_path %>" method="post" data-turbo-frame="_top" class="hidden">
+      <%= hidden_field_tag :authenticity_token, form_authenticity_token %>
+    </form>
+    <div class="overflow-hidden rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700" data-bulk-scope="jobs">
+      <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>
+            <% if selectable %>
+              <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 dark:text-indigo-400 focus:ring-indigo-600">
+              </th>
+            <% end %>
+            <% %w[id job queue state attempts reason].each do |header| %>
+              <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.jobs.list.headers.#{header}") %></th>
+            <% end %>
+            <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.jobs.list.headers.actions") %></th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+          <% @rows.each do |row| %>
+            <% job = Pgbus::Web::JobState.present(row, @state_context, ahead: @ahead[[row[:queue_name], row[:msg_id]]]) %>
+            <%= render "pgbus/jobs/row", row: row, job: job, selectable: selectable, columns: columns %>
+          <% end %>
+          <% if @rows.empty? %>
+            <%= render "pgbus/shared/empty_row", colspan: columns, message: t("pgbus.jobs.list.empty.#{@state}") %>
+          <% end %>
+        </tbody>
+      </table>
+      <%= render "pgbus/shared/pager", page: @page, per_page: @per_page, shown: @rows.size,
+            total_count: @counts[@state], has_more: @counts.capped?(@state) && @rows.size == @per_page,
+            page_path: ->(n) { @list_path.call(page: n) } %>
+    </div>
+  </div>
+</turbo-frame>

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

@@ -0,0 +1,107 @@
+<%# One job of the unified list plus its expansion row. Locals: row (a
+    DataSource#job_rows hash), job (its JobState::Result), selectable, columns. %>
+<% payload = pgbus_parse_message(row[:payload]) %>
+<% queue_row = row[:source] == "queue" %>
+<% failed_id = row[:failed_event_id] %>
+<tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50" data-job-row data-state="<%= job.state %>">
+  <% if selectable %>
+    <td class="w-10 px-4 py-3 align-top">
+      <% if failed_id %>
+        <input type="checkbox" name="ids[]" value="<%= failed_id %>" form="bulk-discard-jobs-form" data-bulk-item
+               aria-label="<%= t("pgbus.helpers.bulk_select_row", id: row[:msg_id] || failed_id) %>"
+               class="h-4 w-4 rounded border-gray-300 text-indigo-600 dark:text-indigo-400 focus:ring-indigo-600 mt-1">
+      <% elsif queue_row %>
+        <input type="checkbox" data-bulk-item data-pgbus-action="bulk-row-toggle"
+               aria-label="<%= t("pgbus.helpers.bulk_select_row", id: row[:msg_id]) %>"
+               class="h-4 w-4 rounded border-gray-300 text-indigo-600 dark:text-indigo-400 focus:ring-indigo-600 mt-1">
+        <input type="hidden" name="messages[][queue_name]" value="<%= row[:queue_name] %>" form="bulk-discard-jobs-form" disabled>
+        <input type="hidden" name="messages[][msg_id]" value="<%= row[:msg_id] %>" form="bulk-discard-jobs-form" disabled>
+      <% end %>
+    </td>
+  <% end %>
+  <td data-label="<%= t("pgbus.jobs.list.headers.id") %>" class="px-4 py-3 text-sm font-mono text-gray-900 dark:text-white align-top">
+    <details data-job-toggle class="group">
+      <summary class="cursor-pointer list-none text-indigo-600 hover:text-indigo-800 dark:hover:text-indigo-300 dark:text-indigo-400"><%= row[:msg_id] || row[:id] %></summary>
+    </details>
+  </td>
+  <td data-label="<%= t("pgbus.jobs.list.headers.job") %>" class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white align-top"><%= row[:job_class].presence || "—" %></td>
+  <td data-label="<%= t("pgbus.jobs.list.headers.queue") %>" class="px-4 py-3 text-sm text-gray-700 dark:text-gray-200 align-top"><%= row[:queue_name] %></td>
+  <td data-label="<%= t("pgbus.jobs.list.headers.state") %>" class="px-4 py-3 text-sm align-top"><%= pgbus_job_state_badge(job.state) %></td>
+  <td data-label="<%= t("pgbus.jobs.list.headers.attempts") %>" class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400 align-top"><%= pgbus_job_attempts(row, @state_context.max_retries) %></td>
+  <td data-label="<%= t("pgbus.jobs.list.headers.reason") %>" class="px-4 py-3 text-sm text-gray-700 dark:text-gray-200 align-top" data-testid="job-reason">
+    <%= pgbus_job_reason(job) %>
+  </td>
+  <td data-label="<%= t("pgbus.jobs.list.headers.actions") %>" class="px-4 py-3 text-sm text-right align-top">
+    <div class="flex justify-end space-x-2">
+      <% if row[:source] == "blocked" %>
+        <%= pgbus_link_to t("pgbus.jobs.list.view_locks"), pgbus.locks_path,
+              variant: :link, size: :sm, data: { turbo_frame: "_top" } %>
+      <% elsif failed_id %>
+        <%# A retry attempt in progress (running) must not have its lease reset. %>
+        <% unless job.state == "running" %>
+          <%= pgbus_button_to t("pgbus.jobs.list.retry"), pgbus.retry_job_path(failed_id), method: :post,
+                variant: :link, size: :sm,
+                data: { turbo_frame: "_top" } %>
+        <% end %>
+        <%= pgbus_button_to t("pgbus.jobs.list.discard"), pgbus.discard_job_path(failed_id), method: :post,
+              variant: :link, size: :sm, tone: :red,
+              data: { turbo_confirm: t("pgbus.jobs.list.discard_confirm"), turbo_frame: "_top" } %>
+      <% else %>
+        <%# Resetting a running job's lease would run it twice: no Retry for it. %>
+        <% unless job.state == "running" %>
+          <%= pgbus_button_to t("pgbus.jobs.list.retry"), pgbus.retry_message_queue_path(name: row[:queue_name], msg_id: row[:msg_id]),
+                method: :post,
+                variant: :link, size: :sm,
+                data: { turbo_confirm: t("pgbus.jobs.list.retry_confirm"), turbo_frame: "_top" } %>
+        <% end %>
+        <%= pgbus_button_to t("pgbus.jobs.list.discard"), pgbus.discard_message_queue_path(name: row[:queue_name], msg_id: row[:msg_id]),
+              method: :post,
+              variant: :link, size: :sm, tone: :red,
+              data: { turbo_confirm: t("pgbus.jobs.list.discard_confirm"), turbo_frame: "_top" } %>
+      <% end %>
+    </div>
+  </td>
+</tr>
+<tr class="pgbus-job-detail" data-job-detail>
+  <td colspan="<%= columns %>" class="px-4 pb-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-100 dark:border-gray-700">
+    <div class="flex items-center justify-between mt-3 mb-3">
+      <span class="text-xs font-mono text-gray-500 dark:text-gray-400"><%= t("pgbus.jobs.list.job_id") %> <%= payload["job_id"] || "—" %></span>
+      <% if failed_id %>
+        <%= pgbus_link_to t("pgbus.jobs.list.view_failure"), pgbus.job_path(failed_id),
+              variant: :link, size: :sm, data: { turbo_frame: "_top" } %>
+      <% end %>
+    </div>
+    <% if row[:error_class] %>
+      <p class="mb-3 text-xs text-red-600 dark:text-red-400"><span class="font-medium"><%= row[:error_class] %></span>: <%= truncate(row[:error_message].to_s, length: 300) %></p>
+    <% end %>
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-3">
+      <div>
+        <span class="text-xs font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.jobs.list.arguments") %></span>
+        <pre class="text-xs text-gray-700 dark:text-gray-200 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 dark:text-gray-400"><%= t("pgbus.jobs.list.metadata") %></span>
+        <div class="text-xs text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800 rounded p-2 mt-1 space-y-1">
+          <% if payload["priority"] %><p><strong><%= t("pgbus.jobs.list.metadata_labels.priority") %></strong> <%= payload["priority"] %></p><% end %>
+          <% if payload["locale"] %><p><strong><%= t("pgbus.jobs.list.metadata_labels.locale") %></strong> <%= payload["locale"] %></p><% end %>
+          <% if payload["timezone"] %><p><strong><%= t("pgbus.jobs.list.metadata_labels.timezone") %></strong> <%= payload["timezone"] %></p><% end %>
+          <% if payload["scheduled_at"] %><p><strong><%= t("pgbus.jobs.list.metadata_labels.scheduled") %></strong> <%= pgbus_timestamp(payload["scheduled_at"]) %></p><% end %>
+          <% if row[:enqueued_at] %><p><strong><%= t("pgbus.jobs.list.metadata_labels.enqueued") %></strong> <%= pgbus_timestamp(row[:enqueued_at]) %></p><% end %>
+          <% if row[:vt] %><p><strong><%= t("pgbus.jobs.list.metadata_labels.visible_at") %></strong> <%= pgbus_timestamp(row[:vt]) %></p><% end %>
+          <% if row[:last_read_at] %><p><strong><%= t("pgbus.jobs.list.metadata_labels.last_read") %></strong> <%= pgbus_timestamp(row[:last_read_at]) %></p><% end %>
+          <% if row[:concurrency_key] %><p><strong><%= t("pgbus.jobs.list.metadata_labels.concurrency_key") %></strong> <%= row[:concurrency_key] %></p><% end %>
+        </div>
+      </div>
+    </div>
+    <details class="mt-2">
+      <summary class="text-xs font-medium text-gray-500 dark:text-gray-400 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200"><%= t("pgbus.jobs.list.full_json_payload") %></summary>
+      <pre class="text-xs text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800 rounded p-2 mt-1 overflow-x-auto max-h-96"><%= JSON.pretty_generate(payload) rescue row[:payload] %></pre>
+    </details>
+    <% if row[:headers] %>
+      <details class="mt-2">
+        <summary class="text-xs font-medium text-gray-500 dark:text-gray-400 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200"><%= t("pgbus.jobs.list.headers_section") %></summary>
+        <pre class="text-xs text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800 rounded p-2 mt-1 overflow-x-auto"><%= JSON.pretty_generate(JSON.parse(row[:headers])) rescue row[:headers] %></pre>
+      </details>
+    <% end %>
+  </td>
+</tr>

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

@@ -0,0 +1,14 @@
+<%# State tabs of the unified job list. Locals: state (the active tab),
+    counts (DataSource#job_state_counts), list_path (->(extra) { url }, so
+    the queue page keeps its tabs on its own URL). %>
+<nav class="mb-4 flex flex-wrap gap-2" aria-label="<%= t("pgbus.jobs.list.tabs_label") %>" data-testid="job-state-tabs">
+  <% Pgbus::JobListing::STATES.each do |tab| %>
+    <% active = tab == state %>
+    <a href="<%= list_path.call(state: (tab unless tab == "all"), page: nil) %>"
+       data-state="<%= tab %>" aria-current="<%= active ? "page" : "false" %>"
+       class="inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium <%= active ? 'bg-gray-800 text-white dark:bg-gray-700' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white' %>">
+      <span><%= t("pgbus.jobs.list.tabs.#{tab}") %></span>
+      <span class="rounded-full px-2 py-0.5 text-xs <%= active ? 'bg-gray-600 text-white' : 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-200' %>"><%= pgbus_job_count(counts, tab) %></span>
+    </a>
+  <% end %>
+</nav>

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

@@ -1,16 +1,16 @@
 <div class="flex items-center justify-between mb-6">
   <h1 class="text-2xl font-bold text-gray-900 dark:text-white"><%= t("pgbus.jobs.index.title") %></h1>
-  <% if @failed.any? %>
-    <div class="flex space-x-2">
-      <%= button_to t("pgbus.jobs.index.retry_all"), pgbus.retry_all_jobs_path, method: :post,
-            class: "rounded-md bg-indigo-600 px-3 py-2 text-sm font-medium text-white hover:bg-indigo-500",
+  <div class="flex space-x-2">
+    <%# Retry All / Discard All act on failed events in every queue, not just a filtered one. %>
+    <% if @failed_total.positive? %>
+      <%= pgbus_button_to t("pgbus.jobs.index.retry_all"), pgbus.retry_all_jobs_path, method: :post, variant: :primary,
             data: { turbo_confirm: t("pgbus.jobs.index.retry_all_confirm") } %>
-      <%= button_to t("pgbus.jobs.index.discard_all"), pgbus.discard_all_jobs_path, 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.jobs.index.discard_all"), pgbus.discard_all_jobs_path, method: :post, variant: :danger,
             data: { turbo_confirm: t("pgbus.jobs.index.discard_all_confirm") } %>
-    </div>
-  <% end %>
+    <% end %>
+  </div>
 </div>
 
-<%= render "pgbus/jobs/failed_table" %>
-<%= render "pgbus/jobs/enqueued_table" %>
+<%= render "pgbus/jobs/tabs", state: @state, counts: @counts, list_path: @list_path %>
+
+<%= render "pgbus/jobs/list" %>