pgbus 0.1.4 → 0.1.6

data/app/models/pgbus/job_stat.rb

@@ -0,0 +1,94 @@
+# frozen_string_literal: true
+
+module Pgbus
+  class JobStat < Pgbus::ApplicationRecord
+    self.table_name = "pgbus_job_stats"
+
+    scope :since, ->(time) { where("created_at >= ?", time) }
+    scope :successful, -> { where(status: "success") }
+    scope :failed, -> { where(status: "failed") }
+    scope :dead_lettered, -> { where(status: "dead_lettered") }
+
+    # Record a job execution stat. Called by the executor after each job.
+    def self.record!(job_class:, queue_name:, status:, duration_ms:)
+      return unless table_exists?
+
+      create!(
+        job_class: job_class,
+        queue_name: queue_name,
+        status: status,
+        duration_ms: duration_ms
+      )
+    rescue StandardError => e
+      Pgbus.logger.debug { "[Pgbus] Failed to record job stat: #{e.message}" }
+    end
+
+    # Memoized — intentionally never invalidated at runtime. If the
+    # pgbus_job_stats migration runs while the app is already running,
+    # a restart is required for stat recording to begin.
+    def self.table_exists?
+      return @table_exists if defined?(@table_exists)
+
+      @table_exists = connection.table_exists?(table_name)
+    rescue StandardError
+      @table_exists = false
+    end
+
+    # Throughput: jobs per minute bucketed by minute for the last N minutes
+    def self.throughput(minutes: 60)
+      since(minutes.minutes.ago)
+        .group("date_trunc('minute', created_at)")
+        .order(Arel.sql("date_trunc('minute', created_at)"))
+        .count
+    end
+
+    # Average duration by job class
+    def self.avg_duration_by_class(minutes: 60)
+      since(minutes.minutes.ago)
+        .group(:job_class)
+        .order(Arel.sql("AVG(duration_ms) DESC"))
+        .average(:duration_ms)
+    end
+
+    # Success/fail/DLQ counts
+    def self.status_counts(minutes: 60)
+      since(minutes.minutes.ago).group(:status).count
+    end
+
+    # Top N slowest job classes by average duration
+    def self.slowest_classes(limit: 10, minutes: 60)
+      since(minutes.minutes.ago)
+        .group(:job_class)
+        .order(Arel.sql("AVG(duration_ms) DESC"))
+        .limit(limit)
+        .pluck(:job_class, Arel.sql("COUNT(*)"), Arel.sql("ROUND(AVG(duration_ms))"), Arel.sql("MAX(duration_ms)"))
+        .map { |cls, count, avg, max| { job_class: cls, count: count.to_i, avg_ms: avg.to_i, max_ms: max.to_i } }
+    end
+
+    # Single-query aggregate summary using conditional counts.
+    def self.summary(minutes: 60)
+      row = since(minutes.minutes.ago).pick(
+        Arel.sql("COUNT(*)"),
+        Arel.sql("COUNT(*) FILTER (WHERE status = 'success')"),
+        Arel.sql("COUNT(*) FILTER (WHERE status = 'failed')"),
+        Arel.sql("COUNT(*) FILTER (WHERE status = 'dead_lettered')"),
+        Arel.sql("ROUND(AVG(duration_ms)::numeric, 1)"),
+        Arel.sql("MAX(duration_ms)")
+      )
+
+      {
+        total: row[0].to_i,
+        success: row[1].to_i,
+        failed: row[2].to_i,
+        dead_lettered: row[3].to_i,
+        avg_duration_ms: row[4]&.to_f || 0,
+        max_duration_ms: row[5].to_i
+      }
+    end
+
+    # Cleanup old stats
+    def self.cleanup!(older_than:)
+      where("created_at < ?", older_than).delete_all
+    end
+  end
+end

data/app/models/pgbus/outbox_entry.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module Pgbus
+  class OutboxEntry < Pgbus::ApplicationRecord
+    self.table_name = "pgbus_outbox_entries"
+
+    scope :unpublished, -> { where(published_at: nil) }
+    scope :published_before, ->(time) { where(published_at: ...time) }
+  end
+end

data/app/models/pgbus/queue_state.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Pgbus
+  class QueueState < Pgbus::ApplicationRecord
+    self.table_name = "pgbus_queue_states"
+
+    scope :paused, -> { where(paused: true) }
+
+    def self.paused?(queue_name)
+      where(queue_name: queue_name, paused: true).exists?
+    end
+
+    def self.pause!(queue_name, reason: nil)
+      record = find_or_initialize_by(queue_name: queue_name)
+      record.update!(paused: true, paused_reason: reason, paused_at: Time.current, circuit_breaker_resume_at: nil)
+      record
+    end
+
+    def self.resume!(queue_name)
+      record = find_by(queue_name: queue_name)
+      return unless record
+
+      record.update!(
+        paused: false,
+        paused_reason: nil,
+        paused_at: nil,
+        circuit_breaker_trip_count: 0,
+        circuit_breaker_resume_at: nil
+      )
+      record
+    end
+  end
+end

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

@@ -1,15 +1,22 @@
 <!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');
+    }
+  </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;
@@ -24,12 +31,18 @@
       start();
     }
     <% end %>
+
+    // Dark mode toggle
+    window.toggleDarkMode = function() {
+      const isDark = document.documentElement.classList.toggle('dark');
+      localStorage.setItem('pgbus-dark', isDark);
+    };
   </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">
@@ -46,8 +59,20 @@
               <%= pgbus_nav_link "Processes", pgbus.processes_path %>
               <%= 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>
@@ -55,15 +80,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/_stats_cards.html.erb

@@ -1,36 +1,42 @@
 <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-5 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="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-6 mb-8">
+    <div class="rounded-lg bg-white dark:bg-gray-800 p-5 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+      <p class="text-sm font-medium text-gray-500 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 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>
 </turbo-frame>

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

@@ -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
+  const origToggle = window.toggleDarkMode;
+  window.toggleDarkMode = function() {
+    origToggle();
+    if (chartData) renderCharts(chartData);
+  };
+</script>

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

@@ -0,0 +1,53 @@
+<div class="mb-6">
+  <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Job Locks</h1>
+  <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Active uniqueness locks preventing duplicate job execution</p>
+</div>
+
+<div class="overflow-hidden rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+  <table class="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">Lock Key</th>
+        <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-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400">State</th>
+        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400">Owner</th>
+        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400">Age</th>
+        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400">Expires</th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+      <% @locks.each do |lock| %>
+        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
+          <td class="px-4 py-3 text-sm font-mono text-gray-700 dark:text-gray-300 max-w-xs truncate"><%= lock[:lock_key] %></td>
+          <td class="px-4 py-3 text-sm text-gray-700 dark:text-gray-300"><%= lock[:job_class] %></td>
+          <td class="px-4 py-3 text-sm">
+            <% if lock[:state] == "executing" %>
+              <span class="inline-flex items-center rounded-full bg-blue-100 dark:bg-blue-900/50 px-2.5 py-0.5 text-xs font-medium text-blue-800 dark:text-blue-300">Executing</span>
+            <% else %>
+              <span class="inline-flex items-center rounded-full bg-yellow-100 dark:bg-yellow-900/50 px-2.5 py-0.5 text-xs font-medium text-yellow-800 dark:text-yellow-300">Queued</span>
+            <% end %>
+          </td>
+          <td class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
+            <% if lock[:owner_pid] %>
+              <span class="font-mono"><%= lock[:owner_pid] %></span>
+              <% if lock[:owner_hostname] %>
+                <span class="text-xs text-gray-400 dark:text-gray-500">@<%= lock[:owner_hostname] %></span>
+              <% end %>
+            <% else %>
+              <span class="text-gray-400 dark:text-gray-500">—</span>
+            <% end %>
+          </td>
+          <td class="px-4 py-3 text-sm text-right text-gray-500 dark:text-gray-400">
+            <% if lock[:age_seconds] %>
+              <%= pgbus_duration(lock[:age_seconds]) %>
+            <% end %>
+          </td>
+          <td class="px-4 py-3 text-sm text-right text-gray-500 dark:text-gray-400"><%= pgbus_time_ago_future(lock[:expires_at]) %></td>
+        </tr>
+      <% end %>
+      <% if @locks.empty? %>
+        <tr><td colspan="6" class="px-4 py-8 text-center text-sm text-gray-400 dark:text-gray-500">No active locks</td></tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>

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

@@ -0,0 +1,55 @@
+<div class="mb-6">
+  <h1 class="text-2xl font-bold text-gray-900">Outbox</h1>
+  <p class="mt-1 text-sm text-gray-500">Transactional outbox entries pending publication to PGMQ</p>
+</div>
+
+<div class="mb-6 grid grid-cols-3 gap-4">
+  <div class="rounded-lg bg-white p-4 shadow ring-1 ring-gray-200">
+    <dt class="text-xs font-medium uppercase text-gray-500">Unpublished</dt>
+    <dd class="mt-1 text-2xl font-semibold text-gray-900"><%= pgbus_number(@stats[:unpublished]) %></dd>
+  </div>
+  <div class="rounded-lg bg-white p-4 shadow ring-1 ring-gray-200">
+    <dt class="text-xs font-medium uppercase text-gray-500">Total</dt>
+    <dd class="mt-1 text-2xl font-semibold text-gray-900"><%= pgbus_number(@stats[:total]) %></dd>
+  </div>
+  <div class="rounded-lg bg-white p-4 shadow ring-1 ring-gray-200">
+    <dt class="text-xs font-medium uppercase text-gray-500">Oldest Unpublished</dt>
+    <dd class="mt-1 text-2xl font-semibold text-gray-900"><%= @stats[:oldest_unpublished_age] ? "#{@stats[:oldest_unpublished_age]}s" : "—" %></dd>
+  </div>
+</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">
+      <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">Queue / Topic</th>
+        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Payload</th>
+        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500">Priority</th>
+        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500">Status</th>
+        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500">Created</th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-gray-100">
+      <% @entries.each do |entry| %>
+        <tr class="hover:bg-gray-50">
+          <td class="px-4 py-3 text-sm font-mono text-gray-700"><%= entry.id %></td>
+          <td class="px-4 py-3 text-sm text-gray-700"><%= entry.routing_key || entry.queue_name %></td>
+          <td class="px-4 py-3 text-sm text-gray-500 max-w-xs truncate"><%= pgbus_json_preview(entry.payload) %></td>
+          <td class="px-4 py-3 text-sm text-right text-gray-500"><%= entry.priority %></td>
+          <td class="px-4 py-3 text-sm text-right">
+            <% if entry.published_at %>
+              <span class="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">Published</span>
+            <% else %>
+              <span class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-800">Pending</span>
+            <% end %>
+          </td>
+          <td class="px-4 py-3 text-sm text-right text-gray-500"><%= pgbus_time_ago(entry.created_at) %></td>
+        </tr>
+      <% end %>
+      <% if @entries.empty? %>
+        <tr><td colspan="6" class="px-4 py-8 text-center text-sm text-gray-400">No outbox entries</td></tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>

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

@@ -18,13 +18,27 @@
             <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]) %>
+              <% if q[:paused] %>
+                <span class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-800">Paused</span>
+              <% end %>
             </td>
             <td class="px-4 py-3 text-sm text-right font-mono text-gray-700"><%= pgbus_number(q[:queue_length]) %></td>
             <td class="px-4 py-3 text-sm text-right font-mono text-gray-700"><%= pgbus_number(q[:queue_visible_length]) %></td>
             <td class="px-4 py-3 text-sm text-right text-gray-500"><%= q[:oldest_msg_age_sec] || "—" %></td>
             <td class="px-4 py-3 text-sm text-right text-gray-500"><%= q[:newest_msg_age_sec] || "—" %></td>
             <td class="px-4 py-3 text-sm text-right text-gray-500"><%= pgbus_number(q[:total_messages]) %></td>
-            <td class="px-4 py-3 text-sm text-right">
+            <td class="px-4 py-3 text-sm text-right space-x-2">
+              <% if q[:paused] %>
+                <%= button_to "Resume", pgbus.resume_queue_path(name: q[:name]),
+                      method: :post,
+                      class: "text-xs text-green-600 hover:text-green-800 font-medium",
+                      data: { turbo_frame: "_top" } %>
+              <% else %>
+                <%= button_to "Pause", pgbus.pause_queue_path(name: q[:name]),
+                      method: :post,
+                      class: "text-xs text-yellow-600 hover:text-yellow-800 font-medium",
+                      data: { turbo_confirm: "Pause processing for #{q[:name]}?", turbo_frame: "_top" } %>
+              <% end %>
               <%= button_to "Purge", pgbus.purge_queue_path(name: q[:name]),
                     method: :post,
                     class: "text-xs text-red-600 hover:text-red-800 font-medium",

data/config/routes.rb

@@ -6,6 +6,8 @@ Pgbus::Engine.routes.draw do
   resources :queues, only: %i[index show], param: :name do
     member do
       post :purge
+      post :pause
+      post :resume
     end
   end
 
@@ -46,7 +48,12 @@ Pgbus::Engine.routes.draw do
     end
   end
 
+  resources :outbox, only: [:index], controller: "outbox"
+  resources :locks, only: [:index]
+  resource :insights, only: [:show], controller: "insights"
+
   namespace :api do
     get :stats, to: "stats#show"
+    get :insights, to: "insights#show"
   end
 end