RubyGems - pgbus - Versions diffs - 0.1.5 → 0.1.7 - Mend

pgbus 0.1.5 → 0.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (61) hide show

checksums.yaml +4 -4
data/README.md +326 -11
data/app/controllers/pgbus/api/insights_controller.rb +16 -0
data/app/controllers/pgbus/insights_controller.rb +10 -0
data/app/controllers/pgbus/locks_controller.rb +9 -0
data/app/helpers/pgbus/application_helper.rb +28 -0
data/app/models/pgbus/job_lock.rb +82 -0
data/app/models/pgbus/job_stat.rb +94 -0
data/app/views/layouts/pgbus/application.html.erb +31 -8
data/app/views/pgbus/dashboard/_processes_table.html.erb +6 -6
data/app/views/pgbus/dashboard/_queues_table.html.erb +6 -6
data/app/views/pgbus/dashboard/_recent_failures.html.erb +5 -5
data/app/views/pgbus/dashboard/_stats_cards.html.erb +20 -20
data/app/views/pgbus/dashboard/show.html.erb +1 -1
data/app/views/pgbus/dead_letter/_messages_table.html.erb +12 -12
data/app/views/pgbus/dead_letter/index.html.erb +1 -1
data/app/views/pgbus/dead_letter/show.html.erb +10 -10
data/app/views/pgbus/events/index.html.erb +15 -15
data/app/views/pgbus/events/show.html.erb +5 -5
data/app/views/pgbus/insights/show.html.erb +161 -0
data/app/views/pgbus/jobs/_enqueued_table.html.erb +13 -13
data/app/views/pgbus/jobs/_failed_table.html.erb +7 -7
data/app/views/pgbus/jobs/index.html.erb +1 -1
data/app/views/pgbus/jobs/show.html.erb +10 -10
data/app/views/pgbus/locks/index.html.erb +53 -0
data/app/views/pgbus/outbox/index.html.erb +12 -12
data/app/views/pgbus/processes/_processes_table.html.erb +6 -6
data/app/views/pgbus/processes/index.html.erb +1 -1
data/app/views/pgbus/queues/_queues_list.html.erb +5 -5
data/app/views/pgbus/queues/index.html.erb +1 -1
data/app/views/pgbus/queues/show.html.erb +7 -7
data/app/views/pgbus/recurring_tasks/_tasks_table.html.erb +6 -6
data/app/views/pgbus/recurring_tasks/index.html.erb +1 -1
data/app/views/pgbus/recurring_tasks/show.html.erb +22 -22
data/config/routes.rb +3 -0
data/lib/generators/pgbus/add_job_locks_generator.rb +52 -0
data/lib/generators/pgbus/add_job_stats_generator.rb +52 -0
data/lib/generators/pgbus/add_outbox_generator.rb +1 -1
data/lib/generators/pgbus/add_queue_states_generator.rb +1 -1
data/lib/generators/pgbus/add_recurring_generator.rb +1 -1
data/lib/generators/pgbus/install_generator.rb +1 -1
data/lib/generators/pgbus/templates/add_job_locks.rb.erb +21 -0
data/lib/generators/pgbus/templates/add_job_stats.rb.erb +18 -0
data/lib/generators/pgbus/upgrade_pgmq_generator.rb +1 -1
data/lib/pgbus/active_job/adapter.rb +58 -4
data/lib/pgbus/active_job/executor.rb +45 -0
data/lib/pgbus/client.rb +8 -22
data/lib/pgbus/configuration.rb +6 -0
data/lib/pgbus/engine.rb +1 -0
data/lib/pgbus/process/consumer_priority.rb +64 -0
data/lib/pgbus/process/dispatcher.rb +29 -0
data/lib/pgbus/process/queue_lock.rb +87 -0
data/lib/pgbus/process/supervisor.rb +6 -1
data/lib/pgbus/process/wake_signal.rb +53 -0
data/lib/pgbus/process/worker.rb +36 -6
data/lib/pgbus/queue_factory.rb +62 -0
data/lib/pgbus/uniqueness.rb +169 -0
data/lib/pgbus/version.rb +1 -1
data/lib/pgbus/web/data_source.rb +49 -0
data/lib/pgbus.rb +1 -0
metadata +17 -1

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

@@ -1,15 +1,27 @@
 <!DOCTYPE html>
-<html lang="en" class="h-full bg-gray-50">
+<html lang="en" class="h-full">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Pgbus Dashboard</title>
   <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = { darkMode: 'class' };
+    // Restore dark mode preference
+    if (localStorage.getItem('pgbus-dark') === 'true' ||
+        (!localStorage.getItem('pgbus-dark') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+      document.documentElement.classList.add('dark');
+    }
+    // Dark mode toggle — must be in non-module script for onclick access
+    function toggleDarkMode() {
+      var isDark = document.documentElement.classList.toggle('dark');
+      localStorage.setItem('pgbus-dark', isDark);
+    }
+  </script>
   <script type="module">
     import * as Turbo from "https://cdn.jsdelivr.net/npm/@hotwired/turbo@8/dist/turbo.es2017.esm.js";
     <% if Pgbus.configuration.web_live_updates %>
-    // Auto-refresh turbo frames, pausing when tab is hidden
     const interval = <%= Pgbus.configuration.web_refresh_interval %>;
     if (interval > 0) {
       let timer;
@@ -26,10 +38,10 @@
     <% end %>
   </script>
 </head>
-<body class="h-full">
+<body class="h-full bg-gray-50 dark:bg-gray-950 transition-colors">
   <div class="min-h-full">
     <!-- Top nav -->
-    <nav class="bg-gray-900">
+    <nav class="bg-gray-900 dark:bg-gray-950 border-b border-gray-800">
       <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <div class="flex h-14 items-center justify-between">
           <div class="flex items-center space-x-8">
@@ -47,8 +59,19 @@
               <%= pgbus_nav_link "Events", pgbus.events_path %>
               <%= pgbus_nav_link "DLQ", pgbus.dead_letter_index_path %>
               <%= pgbus_nav_link "Outbox", pgbus.outbox_index_path %>
+              <%= pgbus_nav_link "Locks", pgbus.locks_path %>
+              <%= pgbus_nav_link "Insights", pgbus.insights_path %>
             </div>
           </div>
+          <button onclick="toggleDarkMode()" class="rounded-md p-2 text-gray-400 hover:text-white focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-900" aria-label="Toggle dark mode">
+            <svg class="h-5 w-5 hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
+              <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/>
+            </svg>
+            <svg class="h-5 w-5 block dark:hidden" fill="currentColor" viewBox="0 0 20 20">
+              <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/>
+            </svg>
+          </button>
         </div>
       </div>
     </nav>
@@ -56,15 +79,15 @@
     <!-- Flash messages -->
     <% if notice %>
       <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-4">
-        <div class="rounded-md bg-green-50 p-3">
-          <p class="text-sm text-green-800"><%= notice %></p>
+        <div class="rounded-md bg-green-50 dark:bg-green-900/30 p-3">
+          <p class="text-sm text-green-800 dark:text-green-300"><%= notice %></p>
         </div>
       </div>
     <% end %>
     <% if alert %>
       <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-4">
-        <div class="rounded-md bg-red-50 p-3">
-          <p class="text-sm text-red-800"><%= alert %></p>
+        <div class="rounded-md bg-red-50 dark:bg-red-900/30 p-3">
+          <p class="text-sm text-red-800 dark:text-red-300"><%= alert %></p>
         </div>
       </div>
     <% end %>

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

@@ -1,9 +1,9 @@
 <turbo-frame id="dashboard-processes" data-auto-refresh src="<%= pgbus.root_path(frame: 'processes') %>">
   <div>
-    <h2 class="text-lg font-semibold text-gray-900 mb-3">Active Processes</h2>
-    <div class="overflow-hidden rounded-lg bg-white shadow ring-1 ring-gray-200">
-      <table class="min-w-full divide-y divide-gray-200">
-        <thead class="bg-gray-50">
+    <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Active Processes</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="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">Kind</th>
             <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Host</th>
@@ -11,10 +11,10 @@
             <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Status</th>
           </tr>
         </thead>
-        <tbody class="divide-y divide-gray-100">
+        <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
           <% @processes.each do |p| %>
             <tr>
-              <td class="px-4 py-3 text-sm font-medium text-gray-900"><%= p[:kind] %></td>
+              <td class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white"><%= p[:kind] %></td>
               <td class="px-4 py-3 text-sm text-gray-500"><%= p[:hostname] %></td>
               <td class="px-4 py-3 text-sm text-gray-500"><%= p[:pid] %></td>
               <td class="px-4 py-3 text-sm"><%= pgbus_status_badge(p[:healthy]) %></td>

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

@@ -1,13 +1,13 @@
 <turbo-frame id="dashboard-queues" data-auto-refresh src="<%= pgbus.root_path(frame: 'queues') %>">
   <div class="mb-8">
     <div class="flex items-center justify-between mb-3">
-      <h2 class="text-lg font-semibold text-gray-900">Queues</h2>
+      <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Queues</h2>
       <%= link_to "View all", pgbus.queues_path, class: "text-sm text-indigo-600 hover:text-indigo-500", data: { turbo_frame: "_top" } %>
     </div>
-    <div class="overflow-hidden rounded-lg bg-white shadow ring-1 ring-gray-200">
-      <table class="min-w-full divide-y divide-gray-200">
-        <thead class="bg-gray-50">
+    <div class="overflow-hidden rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+        <thead class="bg-gray-50 dark:bg-gray-900">
           <tr>
             <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Queue</th>
             <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500">Depth</th>
@@ -16,9 +16,9 @@
             <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500">Total</th>
           </tr>
         </thead>
-        <tbody class="divide-y divide-gray-100">
+        <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
           <% @queues.each do |q| %>
-            <tr class="hover:bg-gray-50">
+            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 dark:bg-gray-900">
               <td 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" } %>
                 <%= pgbus_queue_badge(q[:name]) %>

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

@@ -1,21 +1,21 @@
 <turbo-frame id="dashboard-failures" data-auto-refresh src="<%= pgbus.root_path(frame: 'failures') %>">
   <div>
     <div class="flex items-center justify-between mb-3">
-      <h2 class="text-lg font-semibold text-gray-900">Recent Failures</h2>
+      <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Failures</h2>
       <% if @recent_failures.any? %>
         <%= link_to "View all", pgbus.jobs_path(status: "failed"), class: "text-sm text-indigo-600 hover:text-indigo-500", data: { turbo_frame: "_top" } %>
       <% end %>
     </div>
-    <div class="overflow-hidden rounded-lg bg-white shadow ring-1 ring-gray-200">
-      <table class="min-w-full divide-y divide-gray-200">
-        <thead class="bg-gray-50">
+    <div class="overflow-hidden rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+        <thead class="bg-gray-50 dark:bg-gray-900">
           <tr>
             <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Queue</th>
             <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Error</th>
             <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">When</th>
           </tr>
         </thead>
-        <tbody class="divide-y divide-gray-100">
+        <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
           <% @recent_failures.each do |f| %>
             <tr>
               <td class="px-4 py-3 text-sm text-gray-700"><%= f["queue_name"] %></td>

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

@@ -1,41 +1,41 @@
 <turbo-frame id="dashboard-stats" data-auto-refresh src="<%= pgbus.root_path(frame: 'stats') %>">
   <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-6 mb-8">
-    <div class="rounded-lg bg-white p-5 shadow ring-1 ring-gray-200">
-      <p class="text-sm font-medium text-gray-500">Queues</p>
-      <p class="mt-1 text-3xl font-semibold text-gray-900"><%= @stats[:total_queues] %></p>
+    <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">Queues</p>
+      <p class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white"><%= @stats[:total_queues] %></p>
     </div>
-    <div class="rounded-lg bg-white p-5 shadow ring-1 ring-gray-200">
-      <p class="text-sm font-medium text-gray-500">Enqueued</p>
-      <p class="mt-1 text-3xl font-semibold text-gray-900"><%= pgbus_number(@stats[:total_depth]) %></p>
-      <p class="text-xs text-gray-400"><%= pgbus_number(@stats[:total_visible]) %> visible</p>
+    <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">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]) %> visible</p>
     </div>
-    <div class="rounded-lg bg-white p-5 shadow ring-1 ring-gray-200">
-      <p class="text-sm font-medium text-gray-500">Processes</p>
-      <p class="mt-1 text-3xl font-semibold <%= @stats[:active_processes] > 0 ? 'text-green-600' : 'text-gray-400' %>">
+    <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">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>
-    <div class="rounded-lg bg-white p-5 shadow ring-1 ring-gray-200">
-      <p class="text-sm font-medium text-gray-500">Recurring</p>
-      <p class="mt-1 text-3xl font-semibold text-gray-900"><%= @stats[:recurring_count] %></p>
+    <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">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 "View tasks", pgbus.recurring_tasks_path, class: "text-blue-500 hover:text-blue-700" %>
+        <%= link_to "View tasks", pgbus.recurring_tasks_path, class: "text-blue-500 hover:text-blue-700 dark:text-blue-400" %>
       </p>
     </div>
-    <div class="rounded-lg bg-white p-5 shadow ring-1 ring-gray-200">
-      <p class="text-sm font-medium text-gray-500">Failed / DLQ</p>
-      <p class="mt-1 text-3xl font-semibold <%= (@stats[:failed_count] + @stats[:dlq_depth]) > 0 ? 'text-red-600' : 'text-gray-900' %>">
+    <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">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>
     </div>
-    <div class="rounded-lg bg-white p-5 shadow ring-1 ring-gray-200">
-      <p class="text-sm font-medium text-gray-500">Throughput</p>
-      <p class="mt-1 text-3xl font-semibold text-gray-900"><%= @stats[:throughput_rate] %></p>
+    <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">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">msgs/s</p>
     </div>
   </div>

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

@@ -1,4 +1,4 @@
-<h1 class="text-2xl font-bold text-gray-900 mb-6">Dashboard</h1>
+<h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Dashboard</h1>
 <%= render "pgbus/dashboard/stats_cards" %>

data/app/views/pgbus/dead_letter/_messages_table.html.erb CHANGED Viewed

@@ -1,7 +1,7 @@
 <turbo-frame id="dlq-messages" data-auto-refresh src="<%= pgbus.dead_letter_index_path(frame: 'list') %>">
-  <div class="overflow-hidden rounded-lg bg-white shadow ring-1 ring-gray-200">
-    <table class="min-w-full divide-y divide-gray-200">
-      <thead class="bg-gray-50">
+  <div class="overflow-hidden rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+      <thead class="bg-gray-50 dark:bg-gray-900">
         <tr>
           <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">ID</th>
           <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Job Class</th>
@@ -10,7 +10,7 @@
           <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Reads</th>
         </tr>
       </thead>
-      <tbody class="divide-y divide-gray-100">
+      <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
         <% @messages.each do |m| %>
           <% payload = pgbus_parse_message(m[:message]) %>
           <% dlq_suffix = Pgbus.configuration.dead_letter_queue_suffix %>
@@ -18,14 +18,14 @@
           <tr>
             <td colspan="5" class="p-0">
               <details class="group">
-                <summary class="flex cursor-pointer hover:bg-gray-50 list-none">
-                  <span class="w-16 shrink-0 px-4 py-3 text-sm font-mono text-gray-900"><%= m[:msg_id] %></span>
-                  <span class="flex-1 px-4 py-3 text-sm font-medium text-gray-900"><%= payload["job_class"] || "—" %></span>
+                <summary class="flex cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50 dark:bg-gray-900 list-none">
+                  <span class="w-16 shrink-0 px-4 py-3 text-sm font-mono text-gray-900 dark:text-white"><%= m[:msg_id] %></span>
+                  <span class="flex-1 px-4 py-3 text-sm font-medium text-gray-900 dark:text-white"><%= payload["job_class"] || "—" %></span>
                   <span class="w-40 shrink-0 px-4 py-3 text-sm text-gray-700"><%= source_queue %></span>
                   <span class="w-28 shrink-0 px-4 py-3 text-sm text-gray-500"><%= pgbus_time_ago(m[:enqueued_at]) %></span>
                   <span class="w-16 shrink-0 px-4 py-3 text-sm text-gray-500"><%= m[:read_ct] %></span>
                 </summary>
-                <div class="px-4 pb-4 bg-gray-50 border-t border-gray-100">
+                <div class="px-4 pb-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-100">
                   <div class="flex items-center justify-between mt-3 mb-3">
                     <span class="text-xs font-mono text-gray-400">Job ID: <%= payload["job_id"] %></span>
                     <div class="flex space-x-2">
@@ -40,11 +40,11 @@
                   <div class="grid grid-cols-2 gap-4 mb-3">
                     <div>
                       <span class="text-xs font-medium text-gray-500">Arguments</span>
-                      <pre class="text-xs text-gray-700 bg-white rounded p-2 mt-1 overflow-x-auto max-h-40"><%= JSON.pretty_generate(payload["arguments"] || []) rescue "—" %></pre>
+                      <pre class="text-xs text-gray-700 bg-white dark:bg-gray-800 rounded p-2 mt-1 overflow-x-auto max-h-40"><%= JSON.pretty_generate(payload["arguments"] || []) rescue "—" %></pre>
                     </div>
                     <div>
                       <span class="text-xs font-medium text-gray-500">Metadata</span>
-                      <div class="text-xs text-gray-600 bg-white rounded p-2 mt-1 space-y-1">
+                      <div class="text-xs text-gray-600 bg-white dark:bg-gray-800 rounded p-2 mt-1 space-y-1">
                         <% if payload["queue_name"] %><p><strong>Queue:</strong> <%= payload["queue_name"] %></p><% end %>
                         <% if payload["priority"] %><p><strong>Priority:</strong> <%= payload["priority"] %></p><% end %>
                         <% if payload["executions"] %><p><strong>Executions:</strong> <%= payload["executions"] %></p><% end %>
@@ -55,12 +55,12 @@
                   </div>
                   <details class="mt-2">
                     <summary class="text-xs font-medium text-gray-500 cursor-pointer hover:text-gray-700">Full JSON payload</summary>
-                    <pre class="text-xs text-gray-600 bg-white rounded p-2 mt-1 overflow-x-auto max-h-96"><%= JSON.pretty_generate(payload) rescue m[:message] %></pre>
+                    <pre class="text-xs text-gray-600 bg-white dark:bg-gray-800 rounded p-2 mt-1 overflow-x-auto max-h-96"><%= JSON.pretty_generate(payload) rescue m[:message] %></pre>
                   </details>
                   <% if m[:headers] %>
                     <details class="mt-2">
                       <summary class="text-xs font-medium text-gray-500 cursor-pointer hover:text-gray-700">Headers</summary>
-                      <pre class="text-xs text-gray-600 bg-white rounded p-2 mt-1 overflow-x-auto"><%= JSON.pretty_generate(JSON.parse(m[:headers])) rescue m[:headers] %></pre>
+                      <pre class="text-xs text-gray-600 bg-white dark:bg-gray-800 rounded p-2 mt-1 overflow-x-auto"><%= JSON.pretty_generate(JSON.parse(m[:headers])) rescue m[:headers] %></pre>
                     </details>
                   <% end %>
                 </div>

data/app/views/pgbus/dead_letter/index.html.erb CHANGED Viewed

@@ -1,5 +1,5 @@
 <div class="flex items-center justify-between mb-6">
-  <h1 class="text-2xl font-bold text-gray-900">Dead Letter Queue</h1>
+  <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Dead Letter Queue</h1>
   <% if @messages.any? %>
     <div class="flex space-x-2">
       <%= button_to "Retry All", pgbus.retry_all_dead_letter_index_path, method: :post,

data/app/views/pgbus/dead_letter/show.html.erb CHANGED Viewed

@@ -3,38 +3,38 @@
 </div>
 <% if @message %>
-  <h1 class="text-2xl font-bold text-gray-900 mb-6">DLQ Message #<%= @message[:msg_id] %></h1>
+  <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">DLQ Message #<%= @message[:msg_id] %></h1>
-  <div class="rounded-lg bg-white shadow ring-1 ring-gray-200 p-6 mb-6">
+  <div class="rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700 p-6 mb-6">
     <dl class="grid grid-cols-1 gap-4 sm:grid-cols-2">
       <div>
         <dt class="text-sm font-medium text-gray-500">Source Queue</dt>
-        <dd class="text-sm text-gray-900"><%= @message[:queue_name] %></dd>
+        <dd class="text-sm text-gray-900 dark:text-white"><%= @message[:queue_name] %></dd>
       </div>
       <div>
         <dt class="text-sm font-medium text-gray-500">Enqueued At</dt>
-        <dd class="text-sm text-gray-900"><%= @message[:enqueued_at] %></dd>
+        <dd class="text-sm text-gray-900 dark:text-white"><%= @message[:enqueued_at] %></dd>
       </div>
       <div>
         <dt class="text-sm font-medium text-gray-500">Read Count</dt>
-        <dd class="text-sm text-gray-900"><%= @message[:read_ct] %></dd>
+        <dd class="text-sm text-gray-900 dark:text-white"><%= @message[:read_ct] %></dd>
       </div>
       <div>
         <dt class="text-sm font-medium text-gray-500">Visibility Timeout</dt>
-        <dd class="text-sm text-gray-900"><%= @message[:vt] %></dd>
+        <dd class="text-sm text-gray-900 dark:text-white"><%= @message[:vt] %></dd>
       </div>
     </dl>
   </div>
-  <div class="rounded-lg bg-white shadow ring-1 ring-gray-200 p-6 mb-6">
+  <div class="rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700 p-6 mb-6">
     <h2 class="text-sm font-medium text-gray-500 mb-2">Payload</h2>
-    <pre class="text-xs text-gray-600 bg-gray-50 rounded p-4 overflow-x-auto"><%= JSON.pretty_generate(JSON.parse(@message[:message])) rescue @message[:message] %></pre>
+    <pre class="text-xs text-gray-600 bg-gray-50 dark:bg-gray-900 rounded p-4 overflow-x-auto"><%= JSON.pretty_generate(JSON.parse(@message[:message])) rescue @message[:message] %></pre>
   </div>
   <% if @message[:headers] %>
-    <div class="rounded-lg bg-white shadow ring-1 ring-gray-200 p-6 mb-6">
+    <div class="rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700 p-6 mb-6">
       <h2 class="text-sm font-medium text-gray-500 mb-2">Headers</h2>
-      <pre class="text-xs text-gray-600 bg-gray-50 rounded p-4 overflow-x-auto"><%= JSON.pretty_generate(JSON.parse(@message[:headers])) rescue @message[:headers] %></pre>
+      <pre class="text-xs text-gray-600 bg-gray-50 dark:bg-gray-900 rounded p-4 overflow-x-auto"><%= JSON.pretty_generate(JSON.parse(@message[:headers])) rescue @message[:headers] %></pre>
     </div>
   <% end %>

data/app/views/pgbus/events/index.html.erb CHANGED Viewed

@@ -1,22 +1,22 @@
-<h1 class="text-2xl font-bold text-gray-900 mb-6">Events</h1>
+<h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Events</h1>
 <!-- Registered Subscribers -->
 <div class="mb-8">
-  <h2 class="text-lg font-semibold text-gray-900 mb-3">Registered Subscribers</h2>
-  <div class="overflow-hidden rounded-lg bg-white shadow ring-1 ring-gray-200">
-    <table class="min-w-full divide-y divide-gray-200">
-      <thead class="bg-gray-50">
+  <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Registered Subscribers</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="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">Pattern</th>
           <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Handler</th>
           <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Queue</th>
         </tr>
       </thead>
-      <tbody class="divide-y divide-gray-100">
+      <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
         <% @subscribers.each do |s| %>
-          <tr class="hover:bg-gray-50">
+          <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-indigo-600"><%= s[:pattern] %></td>
-            <td class="px-4 py-3 text-sm text-gray-900"><%= s[:handler_class] %></td>
+            <td class="px-4 py-3 text-sm text-gray-900 dark:text-white"><%= s[:handler_class] %></td>
             <td class="px-4 py-3 text-sm text-gray-500"><%= s[:queue_name] %></td>
           </tr>
         <% end %>
@@ -30,20 +30,20 @@
 <!-- Processed Events (Audit Trail) -->
 <div>
-  <h2 class="text-lg font-semibold text-gray-900 mb-3">Processed Events</h2>
-  <div class="overflow-hidden rounded-lg bg-white shadow ring-1 ring-gray-200">
-    <table class="min-w-full divide-y divide-gray-200">
-      <thead class="bg-gray-50">
+  <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Processed Events</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="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">Event ID</th>
           <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Handler</th>
           <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Processed At</th>
         </tr>
       </thead>
-      <tbody class="divide-y divide-gray-100">
+      <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
         <% @events.each do |e| %>
-          <tr class="hover:bg-gray-50">
-            <td class="px-4 py-3 text-sm font-mono text-gray-900"><%= e["event_id"] %></td>
+          <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"><%= e["event_id"] %></td>
             <td class="px-4 py-3 text-sm text-gray-700"><%= e["handler_class"] %></td>
             <td class="px-4 py-3 text-sm text-gray-500"><%= pgbus_time_ago(e["processed_at"]) %></td>
           </tr>

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

@@ -3,21 +3,21 @@
 </div>
 <% if @event %>
-  <h1 class="text-2xl font-bold text-gray-900 mb-6">Event <%= @event["event_id"] %></h1>
+  <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Event <%= @event["event_id"] %></h1>
-  <div class="rounded-lg bg-white shadow ring-1 ring-gray-200 p-6">
+  <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">Event ID</dt>
-        <dd class="text-sm font-mono text-gray-900"><%= @event["event_id"] %></dd>
+        <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">Handler</dt>
-        <dd class="text-sm text-gray-900"><%= @event["handler_class"] %></dd>
+        <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">Processed At</dt>
-        <dd class="text-sm text-gray-900"><%= @event["processed_at"] %></dd>
+        <dd class="text-sm text-gray-900 dark:text-white"><%= @event["processed_at"] %></dd>
       </div>
     </dl>
   </div>

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

@@ -0,0 +1,161 @@
+<div class="mb-6">
+  <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Insights</h1>
+  <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Job performance metrics for the last hour</p>
+</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">
+    <dt class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400">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">
+    <dt class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400">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">
+    <dt class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400">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">
+    <dt class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400">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">
+    <dt class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400">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">
+    <dt class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400">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>
+</div>
+<!-- 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">Throughput (jobs/min)</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">Status Distribution</h3>
+    <div id="status-chart" style="height: 280px;"></div>
+  </div>
+</div>
+<!-- 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">Slowest Job Classes (avg duration)</h3>
+  </div>
+  <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+    <thead class="bg-gray-50 dark:bg-gray-900">
+      <tr>
+        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400">Job Class</th>
+        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400">Count</th>
+        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400">Avg</th>
+        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400">Max</th>
+      </tr>
+    </thead>
+    <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 class="px-4 py-3 text-sm font-medium text-gray-700 dark:text-gray-300"><%= row[:job_class] %></td>
+          <td class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= pgbus_number(row[:count]) %></td>
+          <td 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 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">No job stats yet</td></tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/apexcharts@4"></script>
+<script>
+  let throughputChart, statusChart;
+  function getThemeColors() {
+    const isDark = document.documentElement.classList.contains('dark');
+    return {
+      isDark,
+      text: isDark ? '#9ca3af' : '#6b7280',
+      grid: isDark ? '#374151' : '#e5e7eb',
+      tooltip: isDark ? 'dark' : 'light',
+      dataLabel: isDark ? '#fff' : '#000'
+    };
+  }
+  function renderCharts(data) {
+    const t = getThemeColors();
+    // Destroy existing charts before re-rendering
+    if (throughputChart) throughputChart.destroy();
+    if (statusChart) statusChart.destroy();
+    // Throughput chart
+    const throughputData = data.throughput.map(p => ({
+      x: new Date(p.time).getTime(), y: p.count
+    }));
+    throughputChart = new ApexCharts(document.querySelector('#throughput-chart'), {
+      series: [{ name: 'Jobs/min', data: throughputData }],
+      chart: { type: 'area', height: 280, toolbar: { show: false }, background: 'transparent', foreColor: t.text },
+      stroke: { curve: 'smooth', width: 2 },
+      fill: { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: 0.4, opacityTo: 0.05, stops: [0, 100] } },
+      colors: ['#6366f1'],
+      xaxis: { type: 'datetime', labels: { style: { colors: t.text } } },
+      yaxis: { labels: { style: { colors: t.text } } },
+      grid: { borderColor: t.grid },
+      tooltip: { theme: t.tooltip },
+      dataLabels: { enabled: false }
+    });
+    throughputChart.render();
+    // Status distribution chart
+    const statusLabels = Object.keys(data.status_counts);
+    const statusValues = Object.values(data.status_counts);
+    const statusColors = statusLabels.map(s => {
+      if (s === 'success') return '#10b981';
+      if (s === 'failed') return '#ef4444';
+      if (s === 'dead_lettered') return '#f97316';
+      return '#6b7280';
+    });
+    if (statusLabels.length > 0) {
+      statusChart = new ApexCharts(document.querySelector('#status-chart'), {
+        series: statusValues, labels: statusLabels,
+        chart: { type: 'donut', height: 280, background: 'transparent', foreColor: t.text },
+        colors: statusColors,
+        legend: { position: 'bottom', labels: { colors: t.text } },
+        plotOptions: { pie: { donut: { size: '60%' } } },
+        dataLabels: { style: { colors: [t.dataLabel] } },
+        tooltip: { theme: t.tooltip }
+      });
+      statusChart.render();
+    } else {
+      document.querySelector('#status-chart').innerHTML =
+        '<p class="text-center text-sm text-gray-400 dark:text-gray-500 pt-24">No data yet</p>';
+    }
+  }
+  // Fetch data and render
+  let chartData = null;
+  fetch('<%= pgbus.api_insights_path %>')
+    .then(r => r.json())
+    .then(data => { chartData = data; renderCharts(data); })
+    .catch(() => {
+      const msg = '<p class="text-center text-sm text-gray-400 dark:text-gray-500 pt-24">Failed to load chart data</p>';
+      document.querySelector('#throughput-chart').innerHTML = msg;
+      document.querySelector('#status-chart').innerHTML = msg;
+    });
+  // Re-render charts when dark mode toggles.
+  // Listen for class changes on <html> instead of wrapping the toggle function,
+  // so it works regardless of script loading order.
+  new MutationObserver(function() {
+    if (chartData) renderCharts(chartData);
+  }).observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+</script>