pgbus 0.17.1 → 0.17.2

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

@@ -0,0 +1,162 @@
+<%# One pending event plus its expansion row (issue #494). Locals: row (a
+    DataSource#event_rows hash), event (its EventState::Result), selectable,
+    columns.
+    The raw message is kept so a corrupt payload stays visible in the edit
+    textarea and the full-JSON panel: pgbus_parse_message returns {} for
+    unparseable JSON, which would hide exactly what the operator is repairing.
+    Scalar JSON (numbers, arrays) is coerced to {} for hash access. %>
+<% payload_raw = pgbus_parse_message(row[:payload]) %>
+<% payload = payload_raw.is_a?(Hash) ? payload_raw : {} %>
+<% parse_ok = row[:payload].blank? || payload_raw != {} || row[:payload].to_s.strip == "{}" %>
+<% queue_row = row[:source] == "queue" %>
+<% failed_id = row[:failed_event_id] %>
+<tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50" data-event-row data-state="<%= event.state %>" data-msg-id="<%= row[:msg_id] %>">
+  <% if selectable %>
+    <td class="w-10 px-4 py-3 align-top">
+      <% if 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-events-form" disabled>
+        <input type="hidden" name="messages[][msg_id]" value="<%= row[:msg_id] %>" form="bulk-discard-events-form" disabled>
+      <% end %>
+    </td>
+  <% end %>
+  <td data-label="<%= t("pgbus.events.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.events.list.headers.event") %>" class="px-4 py-3 text-sm align-top">
+    <span class="block font-mono text-gray-900 dark:text-white"><%= pgbus_event_routing_key(row[:payload]) %></span>
+    <span class="block text-xs font-mono text-gray-500 dark:text-gray-400"><%= payload["event_id"] || "—" %></span>
+  </td>
+  <td data-label="<%= t("pgbus.events.list.headers.handler") %>" class="px-4 py-3 text-sm align-top">
+    <span class="block font-medium text-gray-900 dark:text-white"><%= row[:handler_class] || "—" %></span>
+    <span class="block text-xs text-gray-500 dark:text-gray-400"><%= row[:queue_name] %></span>
+  </td>
+  <td data-label="<%= t("pgbus.events.list.headers.state") %>" class="px-4 py-3 text-sm align-top"><%= pgbus_event_state_badge(event.state) %></td>
+  <td data-label="<%= t("pgbus.events.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.jobs.max_retries) %></td>
+  <td data-label="<%= t("pgbus.events.list.headers.reason") %>" class="px-4 py-3 text-sm text-gray-700 dark:text-gray-200 align-top" data-testid="event-reason">
+    <%= pgbus_event_reason(event) %>
+  </td>
+  <td data-label="<%= t("pgbus.events.list.headers.actions") %>" class="px-4 py-3 text-sm text-right align-top">
+    <div class="flex justify-end space-x-2">
+      <% if queue_row %>
+        <%# Marking a running event handled would race the handler still running it. %>
+        <% unless event.state == "running" %>
+          <%# handler_class is resolved server-side from the subscriber registry. %>
+          <%= pgbus_button_to t("pgbus.events.list.mark_handled"),
+                pgbus.mark_handled_event_path(row[:msg_id], queue_name: row[:queue_name]),
+                method: :post, variant: :link, size: :sm, tone: :green,
+                data: { turbo_confirm: t("pgbus.events.list.mark_handled_confirm"), turbo_frame: "_top" } %>
+        <% end %>
+        <%= pgbus_button_to t("pgbus.events.list.discard"),
+              pgbus.discard_event_path(row[:msg_id], queue_name: row[:queue_name]),
+              method: :post, variant: :link, size: :sm, tone: :red,
+              data: { turbo_confirm: t("pgbus.events.list.discard_confirm"), turbo_frame: "_top" } %>
+      <% elsif failed_id %>
+        <%= pgbus_button_to t("pgbus.events.list.discard"), pgbus.discard_job_path(failed_id),
+              method: :post, variant: :link, size: :sm, tone: :red,
+              data: { turbo_confirm: t("pgbus.events.list.discard_failure_confirm"), turbo_frame: "_top" } %>
+      <% end %>
+    </div>
+  </td>
+</tr>
+<tr class="pgbus-job-detail" data-event-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.events.list.event_id") %> <%= payload["event_id"] || "—" %></span>
+      <div class="flex items-center space-x-2">
+        <% if failed_id %>
+          <%= pgbus_link_to t("pgbus.events.list.view_failure"), pgbus.job_path(failed_id),
+                variant: :link, size: :sm, data: { turbo_frame: "_top" } %>
+        <% end %>
+        <% if queue_row %>
+          <details class="relative inline-block">
+            <summary class="<%= pgbus_button_classes(:warning, :sm, extra: "cursor-pointer list-none") %>">
+              <%= t("pgbus.events.list.reroute") %>
+            </summary>
+            <div class="absolute right-0 z-10 mt-1 w-64 rounded-md bg-white dark:bg-gray-800 shadow-lg ring-1 ring-gray-200 dark:ring-gray-700 p-2">
+              <p class="text-xs text-gray-500 dark:text-gray-400 mb-2"><%= t("pgbus.events.list.reroute_label") %></p>
+              <% @subscribers.each do |s| %>
+                <% next if s[:physical_queue_name] == row[:queue_name] %>
+                <%= pgbus_button_to s[:handler_class],
+                      pgbus.reroute_event_path(row[:msg_id], queue_name: row[:queue_name], target_queue: s[:physical_queue_name]),
+                      method: :post, variant: :menu, size: :sm,
+                      data: { turbo_confirm: t("pgbus.events.list.reroute_confirm"), turbo_frame: "_top" } %>
+              <% end %>
+            </div>
+          </details>
+        <% end %>
+      </div>
+    </div>
+    <% if row[:error_class] %>
+      <p class="mb-3 text-xs text-red-700 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.events.list.payload") %></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"><%= parse_ok ? (JSON.pretty_generate(payload["payload"] || payload_raw) rescue "—") : row[:payload] %></pre>
+      </div>
+      <div>
+        <span class="text-xs font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.events.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">
+          <% unless row[:read_ct].nil? %><p><strong><%= t("pgbus.events.list.metadata_labels.read_count") %></strong> <%= row[:read_ct] %></p><% end %>
+          <% if payload["published_at"] %><p><strong><%= t("pgbus.events.list.metadata_labels.published") %></strong> <%= pgbus_timestamp(payload["published_at"]) %></p><% end %>
+          <% if row[:enqueued_at] %><p><strong><%= t("pgbus.events.list.metadata_labels.enqueued") %></strong> <%= pgbus_timestamp(row[:enqueued_at]) %></p><% end %>
+          <% if row[:vt] %><p><strong><%= t("pgbus.events.list.metadata_labels.visible_at") %></strong> <%= pgbus_timestamp(row[:vt]) %></p><% end %>
+          <% if row[:last_read_at] %><p><strong><%= t("pgbus.events.list.metadata_labels.last_read") %></strong> <%= pgbus_timestamp(row[:last_read_at]) %></p><% end %>
+        </div>
+      </div>
+    </div>
+    <%# Persisted Current attributes (issue #431) %>
+    <% if (event_context = pgbus_job_context(row[:payload])) %>
+      <div class="mb-3" data-testid="job-context">
+        <span class="text-xs font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.events.list.context") %></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-2">
+          <% event_context.each do |klass_name, attrs| %>
+            <div>
+              <p class="font-semibold text-gray-700 dark:text-gray-300 font-mono"><%= klass_name %></p>
+              <dl class="grid grid-cols-1 gap-x-4 gap-y-0.5 sm:grid-cols-2">
+                <% attrs.each do |name, value| %>
+                  <div class="flex gap-2">
+                    <dt class="text-gray-500 dark:text-gray-400 font-mono"><%= name %></dt>
+                    <dd class="text-gray-900 dark:text-white font-mono break-all"><%= value %></dd>
+                  </div>
+                <% end %>
+              </dl>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+    <% if queue_row %>
+      <details class="mt-2">
+        <summary class="text-xs font-medium text-indigo-600 dark:text-indigo-400 cursor-pointer hover:text-indigo-800 dark:hover:text-indigo-300"><%= t("pgbus.events.list.edit_payload") %></summary>
+        <div class="mt-2 p-3 bg-white dark:bg-gray-800 rounded ring-1 ring-gray-200 dark:ring-gray-700">
+          <%= form_with url: pgbus.edit_payload_event_path(row[:msg_id]), method: :post, local: true, data: { turbo_frame: "_top" } do |f| %>
+            <%= hidden_field_tag :queue_name, row[:queue_name], id: nil %>
+            <label for="event-payload-<%= row[:msg_id] %>" class="text-xs font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.events.list.edit_payload_label") %></label>
+            <textarea id="event-payload-<%= row[:msg_id] %>" name="payload" rows="6"
+                      class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-white text-xs font-mono shadow-sm focus:border-indigo-500 focus:ring-indigo-500"><%= parse_ok ? (JSON.pretty_generate(payload_raw) rescue row[:payload]) : row[:payload] %></textarea>
+            <div class="mt-2 flex justify-end">
+              <%= pgbus_button_tag t("pgbus.events.list.edit_payload"), variant: :primary, size: :sm,
+                    confirm: t("pgbus.events.list.edit_payload_confirm") %>
+            </div>
+          <% end %>
+        </div>
+      </details>
+    <% end %>
+    <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.events.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"><%= parse_ok ? (JSON.pretty_generate(payload_raw) rescue row[:payload]) : 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.events.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/events/_tabs.html.erb

@@ -0,0 +1,13 @@
+<%# State tabs of the pending-events list (issue #494), the jobs list's tabs
+    in event words. A tab keeps the queue filter and the processed page. %>
+<nav class="mb-4 flex flex-wrap gap-2" aria-label="<%= t("pgbus.events.list.tabs_label") %>" data-testid="event-state-tabs">
+  <% Pgbus::EventsController::STATES.each do |tab| %>
+    <% active = tab == @state %>
+    <a href="<%= events_list_path(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.events.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/events/index.html.erb

@@ -1,77 +1,56 @@
 <div class="flex items-center justify-between mb-6">
   <h1 class="text-2xl font-bold text-gray-900 dark:text-white"><%= t("pgbus.events.index.title") %></h1>
-  <% if @pending.any? %>
-    <div class="flex items-center space-x-2">
-      <div data-bulk-actions class="hidden flex items-center space-x-2">
-        <span class="text-sm text-gray-500 dark:text-gray-400"><span data-bulk-count>0</span> <%= t("pgbus.helpers.bulk_selected") %></span>
-        <button type="submit" form="bulk-discard-events-form"
-                class="rounded-md bg-red-600 px-3 py-2 text-sm font-medium text-white hover:bg-red-500"
-                data-turbo-confirm="<%= t("pgbus.events.index.discard_selected_confirm") %>">
-          <%= t("pgbus.events.index.discard_selected") %>
-        </button>
-      </div>
-    </div>
-  <% end %>
 </div>
 
-<!-- Registered Subscribers -->
+<%# Registered subscribers, each with whether a running consumer drains it. %>
 <div class="mb-8">
   <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-3"><%= t("pgbus.events.index.subscribers_title") %></h2>
-  <div class="overflow-hidden rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+  <div class="overflow-hidden rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700" data-testid="subscribers">
     <table class="pgbus-table min-w-full divide-y divide-gray-200 dark:divide-gray-700">
       <thead class="bg-gray-50 dark:bg-gray-900">
         <tr>
-          <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500"><%= t("pgbus.events.index.subscribers_headers.pattern") %></th>
-          <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500"><%= t("pgbus.events.index.subscribers_headers.handler") %></th>
-          <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500"><%= t("pgbus.events.index.subscribers_headers.queue") %></th>
+          <% %w[pattern handler queue consumer pending].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.events.index.subscribers_headers.#{header}") %></th>
+          <% end %>
         </tr>
       </thead>
       <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+        <% covered = @state_context.covered_queues %>
         <% @subscribers.each do |s| %>
-          <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 dark:bg-gray-900">
-            <td data-label="Pattern" class="px-4 py-3 text-sm font-mono text-indigo-600"><%= s[:pattern] %></td>
-            <td data-label="Handler" class="px-4 py-3 text-sm text-gray-900 dark:text-white"><%= s[:handler_class] %></td>
-            <td data-label="Queue" class="px-4 py-3 text-sm text-gray-500"><%= s[:queue_name] %></td>
+          <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
+            <td data-label="<%= t("pgbus.events.index.subscribers_headers.pattern") %>" class="px-4 py-3 text-sm font-mono text-indigo-700 dark:text-indigo-300"><%= s[:pattern] %></td>
+            <td data-label="<%= t("pgbus.events.index.subscribers_headers.handler") %>" class="px-4 py-3 text-sm text-gray-900 dark:text-white"><%= s[:handler_class] %></td>
+            <td data-label="<%= t("pgbus.events.index.subscribers_headers.queue") %>" class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400"><%= s[:queue_name] %></td>
+            <td data-label="<%= t("pgbus.events.index.subscribers_headers.consumer") %>" class="px-4 py-3 text-sm">
+              <% if covered.nil? %>
+                <span class="text-gray-600 dark:text-gray-300"><%= t("pgbus.events.index.subscribers.unknown") %></span>
+              <% elsif covered.include?(s[:physical_queue_name]) %>
+                <span class="text-green-700 dark:text-green-400"><%= t("pgbus.events.index.subscribers.covered") %></span>
+              <% else %>
+                <span class="text-yellow-800 dark:text-yellow-300"><%= t("pgbus.events.index.subscribers.uncovered") %></span>
+              <% end %>
+            </td>
+            <td data-label="<%= t("pgbus.events.index.subscribers_headers.pending") %>" class="px-4 py-3 text-sm">
+              <%= pgbus_link_to t("pgbus.events.index.subscribers.view_pending"), pgbus.events_path(queue: s[:physical_queue_name]),
+                    variant: :link, size: :sm %>
+            </td>
           </tr>
         <% end %>
         <% if @subscribers.empty? %>
-          <tr><td colspan="3" class="px-4 py-8 text-center text-sm text-gray-400"><%= t("pgbus.events.index.subscribers_empty") %></td></tr>
+          <%= render "pgbus/shared/empty_row", colspan: 5, message: t("pgbus.events.index.subscribers_empty") %>
         <% end %>
       </tbody>
     </table>
   </div>
 </div>
 
-<!-- Pending Events (Unprocessed messages in handler queues) -->
 <div class="mb-8">
   <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-3"><%= t("pgbus.events.index.pending_title") %></h2>
-  <%= render "pgbus/events/pending_table" %>
+  <%= render "pgbus/events/tabs" %>
+  <%= render "pgbus/events/list" %>
 </div>
 
-<!-- Processed Events (Audit Trail) -->
 <div>
   <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-3"><%= t("pgbus.events.index.processed_title") %></h2>
-  <div class="overflow-hidden rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700">
-    <table class="pgbus-table min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-      <thead class="bg-gray-50 dark:bg-gray-900">
-        <tr>
-          <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500"><%= t("pgbus.events.index.processed_headers.event_id") %></th>
-          <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500"><%= t("pgbus.events.index.processed_headers.handler") %></th>
-          <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500"><%= t("pgbus.events.index.processed_headers.processed_at") %></th>
-        </tr>
-      </thead>
-      <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
-        <% @events.each do |e| %>
-          <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 dark:bg-gray-900">
-            <td data-label="Event ID" class="px-4 py-3 text-sm font-mono text-gray-900 dark:text-white"><%= e["event_id"] %></td>
-            <td data-label="Handler" class="px-4 py-3 text-sm text-gray-700"><%= e["handler_class"] %></td>
-            <td data-label="Processed At" class="px-4 py-3 text-sm text-gray-500"><%= pgbus_time_ago(e["processed_at"]) %></td>
-          </tr>
-        <% end %>
-        <% if @events.empty? %>
-          <tr><td colspan="3" class="px-4 py-8 text-center text-sm text-gray-400"><%= t("pgbus.events.index.processed_empty") %></td></tr>
-        <% end %>
-      </tbody>
-    </table>
-  </div>
+  <%= render "pgbus/events/processed_table" %>
 </div>

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

@@ -1,28 +1,46 @@
 <div class="mb-6">
-  <%= link_to "\u2190 #{t("pgbus.events.show.back")}", pgbus.events_path, class: "text-sm text-indigo-600 hover:text-indigo-500" %>
+  <%= pgbus_link_to "← #{t("pgbus.events.show.back")}", pgbus.events_path %>
 </div>
 
 <% if @event %>
-  <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-6"><%= t("pgbus.events.show.title", event_id: @event["event_id"]) %></h1>
+  <div class="flex items-center justify-between mb-6">
+    <h1 class="text-2xl font-bold text-gray-900 dark:text-white"><%= t("pgbus.events.show.title", event_id: @event["event_id"]) %></h1>
+    <% if @claim.state == "completed" %>
+      <%= render "pgbus/events/replay", event: @event, replay_state: @replay_state %>
+    <% end %>
+  </div>
 
   <div class="rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700 p-6">
     <dl class="grid grid-cols-1 gap-4 sm:grid-cols-2">
       <div>
-        <dt class="text-sm font-medium text-gray-500"><%= t("pgbus.events.show.labels.event_id") %></dt>
+        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.events.show.labels.event_id") %></dt>
         <dd class="text-sm font-mono text-gray-900 dark:text-white"><%= @event["event_id"] %></dd>
       </div>
       <div>
-        <dt class="text-sm font-medium text-gray-500"><%= t("pgbus.events.show.labels.handler") %></dt>
+        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.events.show.labels.handler") %></dt>
         <dd class="text-sm text-gray-900 dark:text-white"><%= @event["handler_class"] %></dd>
       </div>
       <div>
-        <dt class="text-sm font-medium text-gray-500"><%= t("pgbus.events.show.labels.processed_at") %></dt>
-        <dd class="text-sm text-gray-900 dark:text-white"><%= @event["processed_at"] %></dd>
+        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.events.show.labels.state") %></dt>
+        <dd class="text-sm text-gray-900 dark:text-white">
+          <%= pgbus_processed_event_badge(@claim) %>
+          <span class="ml-2"><%= pgbus_processed_event_reason(@claim) %></span>
+        </dd>
+      </div>
+      <div>
+        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.events.show.labels.processed_at") %></dt>
+        <dd class="text-sm text-gray-900 dark:text-white"><%= pgbus_timestamp(@event["processed_at"]) %></dd>
       </div>
+      <% if @event["completed_at"] %>
+        <div>
+          <dt class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.events.show.labels.completed_at") %></dt>
+          <dd class="text-sm text-gray-900 dark:text-white"><%= pgbus_timestamp(@event["completed_at"]) %></dd>
+        </div>
+      <% end %>
     </dl>
   </div>
 <% else %>
   <div class="text-center py-12">
-    <p class="text-gray-400"><%= t("pgbus.events.show.not_found") %></p>
+    <p class="text-gray-500 dark:text-gray-400"><%= t("pgbus.events.show.not_found") %></p>
   </div>
 <% end %>

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

@@ -0,0 +1,21 @@
+<%# One Insights chart (issue #492): the caption says what it shows, the
+    chart div is one img for assistive tech (role + the caption as its name)
+    and the yielded data table is the full alternative. Locals: id, title,
+    caption, empty. Without data the card says so instead of drawing. %>
+<div class="rounded-lg bg-white dark:bg-gray-800 p-5 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+  <h2 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-4"><%= title %></h2>
+  <% if empty %>
+    <p data-testid="chart-empty" class="py-24 text-center text-sm text-gray-500 dark:text-gray-400"><%= t("pgbus.insights.show.charts.no_data") %></p>
+  <% else %>
+    <figure>
+      <div id="<%= id %>" role="img" aria-label="<%= strip_tags(caption).to_str %>" style="height: 280px;"></div>
+      <figcaption class="mt-3 text-sm text-gray-700 dark:text-gray-300"><%= caption %></figcaption>
+      <details class="mt-3">
+        <summary class="inline-flex min-h-6 cursor-pointer items-center text-sm font-medium text-indigo-700 hover:text-indigo-900 dark:text-indigo-300 dark:hover:text-indigo-200"><%= t("pgbus.insights.show.charts.data_table") %></summary>
+        <div class="mt-2 overflow-hidden rounded-lg ring-1 ring-gray-200 dark:ring-gray-700">
+          <%= yield %>
+        </div>
+      </details>
+    </figure>
+  <% end %>
+</div>

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

@@ -0,0 +1,20 @@
+<% chart = @charts[:latency] %>
+<table class="pgbus-table min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+  <caption class="sr-only"><%= chart.step_minutes == 1 ? t("pgbus.insights.show.tables.captions.latency_minute") : t("pgbus.insights.show.tables.captions.latency_step", step: pgbus_duration(chart.step_minutes * 60)) %></caption>
+  <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.insights.show.tables.headers.from") %></th>
+      <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.insights.show.tables.headers.avg") %></th>
+      <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.insights.show.tables.headers.highest_p95") %></th>
+    </tr>
+  </thead>
+  <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+    <% chart.rows.each do |row| %>
+      <tr>
+        <td data-label="<%= t("pgbus.insights.show.tables.headers.from") %>" class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300"><%= pgbus_absolute_time(row[:from]) %></td>
+        <td data-label="<%= t("pgbus.insights.show.tables.headers.avg") %>" class="px-4 py-2 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.tables.headers.highest_p95") %>" class="px-4 py-2 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= pgbus_ms_duration(row[:p95_ms]) %></td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

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

@@ -0,0 +1,19 @@
+<table class="pgbus-table min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+  <caption class="sr-only"><%= t("pgbus.insights.show.tables.captions.status") %></caption>
+  <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.insights.show.tables.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.insights.show.tables.headers.jobs") %></th>
+      <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.insights.show.tables.headers.share") %></th>
+    </tr>
+  </thead>
+  <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+    <% @charts[:status].rows.each do |row| %>
+      <tr>
+        <td data-label="<%= t("pgbus.insights.show.tables.headers.status") %>" class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300"><%= pgbus_job_stat_status(row[:status]) %></td>
+        <td data-label="<%= t("pgbus.insights.show.tables.headers.jobs") %>" class="px-4 py-2 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= number_with_delimiter(row[:count]) %></td>
+        <td data-label="<%= t("pgbus.insights.show.tables.headers.share") %>" class="px-4 py-2 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= pgbus_percent(row[:share]) %></td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

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

@@ -0,0 +1,18 @@
+<% chart = @charts[:throughput] %>
+<table class="pgbus-table min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+  <caption class="sr-only"><%= chart.step_minutes == 1 ? t("pgbus.insights.show.tables.captions.throughput_minute") : t("pgbus.insights.show.tables.captions.throughput_step", step: pgbus_duration(chart.step_minutes * 60)) %></caption>
+  <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.insights.show.tables.headers.from") %></th>
+      <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.insights.show.tables.headers.jobs") %></th>
+    </tr>
+  </thead>
+  <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+    <% chart.rows.each do |row| %>
+      <tr>
+        <td data-label="<%= t("pgbus.insights.show.tables.headers.from") %>" class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300"><%= pgbus_absolute_time(row[:from]) %></td>
+        <td data-label="<%= t("pgbus.insights.show.tables.headers.jobs") %>" class="px-4 py-2 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= number_with_delimiter(row[:count]) %></td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>