pgbus 0.8.4 → 0.9.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2fb58fdb0a36d1e0b4f4834cca266aa8771a2fa8c9419bb5aaa7e2a2e83c4725
-  data.tar.gz: 4b9fe002b753689046de0833c8d1112da0cf03c43a6bf2a050df989a76653bb3
+  metadata.gz: 5027c420c26dac65291e11e07ca0291da540b7d2aef9d963e9fdebc2217e7943
+  data.tar.gz: 9e66b85229c55528b3b5b2093883935c1333733018508bb6d9f7f7836666363d
 SHA512:
-  metadata.gz: 397c99fe5da35f6e75720c27c9b1e002ce744720cadba773166674a8bf86eb88ca2151c63bfa0c042eff7ff9f2f5d7026c9d344e655f63f9a93f268f47f1225a
-  data.tar.gz: 33f98b8663e708d44ae5936a37fbeb3ca7966b80f358f9713d86b71ac95390a4eca0ab88c5faf2c008a203d8a88a43cdc0f73809bf2b95baadacfdc36e0a11a3
+  metadata.gz: 9c476c7de9c0db40e0d2183a11f7d502704a468e68f49b28934619cfab07f1130f3988d6f0fbfa6e77a57d6450aa183746b301367e0d4af7dcd2779319f96ff7
+  data.tar.gz: ed62152e6c2c361c5b8f38c61e31ea4e3af5d031cf68f71d0ea95177ab04f538bfbb4fefc84f5d08a2acd8efb23b0024d6433d4a6db2272e7c05521a59e83a3b

data/CHANGELOG.md

@@ -1,5 +1,21 @@
 ## [Unreleased]
 
+### Added
+
+- **Streams: optional publish-side coalescing for high-frequency broadcasts.** A chatty reactive component (live cursor, typing indicator, progress bar) can fan out many small broadcasts per second. Pass `coalesce:` (a window in milliseconds, or `true` for the 50ms default) with `target:` to `broadcast`/`broadcast_render` to batch per `(stream, target)` and publish only the *latest* frame within the window — superseded frames never hit the bus (no PGMQ insert, no NOTIFY, no fan-out). Last-write-wins, so it is opt-in and only safe for idempotent `replace`/`update` of a stable target (exactly the high-frequency case). The new `Pgbus::Streams::Coalescer` is a process-wide, thread-safe, trailing-edge-with-max-wait debounce: the first submit per window schedules the flush (bounding latency to one window) and later submits only overwrite the buffered payload; the flush re-enters the normal broadcast path, so a coalesced frame is just a deferred ordinary broadcast that still composes with `visible_to`/`exclude`/`event`/`durable`. Refs #171.
+
+- **Streams: typed SSE event names on broadcasts.** A broadcast can set the SSE `event:` field — `Pgbus.stream(name).broadcast(html, event: "presence")` (and `broadcast_render(..., event:)`) — while keeping the payload a Turbo Stream, so clients route on the typed name instead of sniffing the HTML. The default (`nil` or `"turbo-stream"`) is omitted from the JSONB payload to avoid redundancy, but is still set on the SSE frame's `event:` line (the connection adapter falls back to `turbo-stream`), so default consumers still get the standard `message`/turbo-stream path. The event flows through the JSONB payload → `StreamEnvelope.event` → the SSE frame's `event:` line (both the Puma and Falcon connection adapters). On the client, `<pgbus-stream-source>` dispatches a typed broadcast as a generic `pgbus:event` (`{ event, data, msgId }`) and a named `pgbus:<event>` (`{ data, msgId }`) for `addEventListener` ergonomics; declare typed event names via the element's `listen-events` attribute so they survive the EventSource reconnect path. Refs #170.
+
+- **Streams: optional connection-driven presence.** Streams matching `config.streams_presence_patterns` (exact string or Regexp, mirroring `streams_durable_patterns`) now auto-join a member on SSE connect, auto-leave on disconnect, and refresh `last_seen_at` on the keepalive heartbeat — no explicit `join`/`leave`/sweeper wiring. Identity comes from the connection's authorize-hook context: the built-in extractor handles a Hash with `:member_id`/`:id` (plus optional `:metadata`) or any object responding to `#id`, and `config.streams_presence_member` accepts a custom `->(context) { { id:, metadata: } }`. Membership work runs on the dispatcher thread (which already releases AR connections each pass); the heartbeat posts a batched `PresenceTouchMessage` per tick. Presence failures are logged and swallowed so a presence-DB hiccup can't knock a live SSE connection out of the registry. Anonymous connections (no derivable member) are simply skipped. Refs #169.
+
+- **Streams: msg_id (revision) exposed to the client for optimistic-UI reconciliation.** Each delivered turbo-stream frame already carries its monotonic `msg_id` as the SSE `id:`; `<pgbus-stream-source>` now surfaces it two ways: the standard `message` MessageEvent sets `lastEventId` to the msg_id (Turbo ignores it; a reactive runtime listening for `message` reads the revision with no pgbus-specific API), and a new `pgbus:message` CustomEvent carries `{ msgId, data }` (msgId is a Number when numeric; a negative value marks an ephemeral frame). Documents the reconciliation pattern: track the highest applied msgId per target and skip the morph if a newer revision was already applied, so a late echo can't clobber a newer optimistic edit. Complements #165 (exclude handles the actor; the revision handles out-of-order delivery for everyone else). Refs #168.
+
+- **Streams: `Stream#broadcast_render` — render a renderable and broadcast it in one call.** `Pgbus.stream(name).broadcast_render(renderable:, target:, action: :replace, exclude:, visible_to:, durable:)` renders a Phlex component, a ViewComponent, or a pre-rendered HTML string into a complete `<turbo-stream action target><template>…</template></turbo-stream>` tag and broadcasts it atomically — removing the off-request render + tag-building boilerplate (and the easy-to-get-wrong view context) from every call site. `action` defaults to `:replace`; content-less actions (`remove`) emit no `<template>`. `exclude:`/`visible_to:`/`durable:` forward to `#broadcast`, so actor-echo suppression and audience filtering compose. Self-contained (no turbo-rails/ActionView/Phlex dependency); the renderable is resolved via `String` → `#call` (Phlex) → `#render_in` (ViewComponent) → `#to_s`. Refs #166.
+
+- **Streams: actor-echo suppression via `exclude:` on broadcasts.** A broadcast can now name a connection id to skip: `Pgbus.stream(name).broadcast(html, exclude: connection_id)` (and `visible_to:` composes with it). The dispatcher skips delivery to that one SSE connection, so an actor who triggered a change does not receive the echo of its own broadcast — it already applied the change via its action's HTTP response, and re-applying the SSE echo would double-apply (re-run animations, clobber optimistic edits). Every server-minted SSE connection now exposes its id to the page: the server sends a `pgbus:connected` frame right after the open handshake, and `<pgbus-stream-source>` captures it onto the element's `connection-id` attribute and re-dispatches it as a `pgbus:connected` event (also surfaced in `pgbus:open`'s detail). A page reads its connection id and sends it back as the `X-Pgbus-Connection` header on action requests; the broadcaster passes `exclude: request.headers["X-Pgbus-Connection"]`. Reuses the existing per-connection delivery (Filters) path. Refs #165.
+
+- **Streams: `Pgbus.stream_key` is idempotent for an already-built key, plus `Pgbus.stream_key!`.** A single `String` argument is now treated as a pre-built pgbus stream key and returned unchanged (after the queue-name budget check) instead of tripping the colon-separator guard. This lets a consumer hold one `stream_key` value and pass it to both `turbo_stream_from` and the broadcaster without `stream_key("chat:lobby")` raising `ArgumentError`. The guard still fires for the genuinely ambiguous multi-fragment join (`stream_key("a:b", :c)`), and `Symbol`/record fragments with colons are still rejected (a colon there never came from `stream_key`). `Pgbus.stream_key!(key)` accepts a pre-built key explicitly (String required, budget enforced). Refs #167.
+
 ### Breaking Changes
 
 - **Queue names must be alphanumeric and underscores only.** Queue names containing dashes (e.g., `my-app-queue`) will now raise `ArgumentError`. Rename to underscored form (e.g., `my_app_queue`) before upgrading. This restriction prevents SQL injection via PGMQ queue identifiers, which are interpolated into table names and cannot be parameterized.

data/app/assets/javascripts/pgbus/stream_source_element.js

@@ -17,12 +17,32 @@
 //   channel             — compatibility shim; ignored
 //
 // Events (dispatched on the element):
-//   pgbus:open         { lastEventId }
+//   message            (MessageEvent) data = turbo-stream HTML;
+//                      lastEventId = the frame's msg_id (revision)
+//   pgbus:message      { msgId, data } — same frame, for optimistic-UI
+//                      reconciliation (skip morph if a newer rev for the
+//                      target was already applied). See #168.
+//   pgbus:event        { event, data, msgId } — a typed broadcast (any SSE
+//                      event name other than turbo-stream). See #170.
+//   pgbus:<event>      { data, msgId } — the same typed broadcast, named
+//                      for ergonomic addEventListener("pgbus:presence").
+//   pgbus:open         { lastEventId, connectionId }
+//   pgbus:connected    { connectionId }
 //   pgbus:replay-start { fromId, toId }
 //   pgbus:replay-end   {}
 //   pgbus:gap-detected { lastSeenId, archiveOldestId }
 //   pgbus:close        { code, reason }
 //
+// Connection id (issue #165 — actor-echo suppression): the server sends a
+// `pgbus:connected` frame right after the open handshake carrying the
+// server-minted connection id. This element captures it, reflects it onto
+// the `connection-id` attribute, and re-dispatches it as `pgbus:connected`.
+// A page reads it (from the element or a `<meta name="pgbus-connection-id">`
+// the app mirrors it to) and sends it back as the `X-Pgbus-Connection`
+// header on action requests. The broadcaster then passes
+// `exclude: request.headers["X-Pgbus-Connection"]` so the actor does not
+// receive the echo of its own broadcast.
+//
 // The element integrates with Turbo via connectStreamSource /
 // disconnectStreamSource + dispatching MessageEvent("message") so Turbo
 // Stream HTML is automatically consumed by the existing StreamObserver.
@@ -48,9 +68,17 @@ class PgbusStreamSourceElement extends HTMLElement {
     this.abortController = null
     this.eventSource = null
     this.lastEventId = null
+    this.connectionId = null
     this.closed = false
   }
 
+  // The server-minted connection id for this SSE connection, or null
+  // until the `pgbus:connected` frame arrives. Public read accessor so
+  // a reactive runtime can grab it without poking at attributes.
+  get pgbusConnectionId() {
+    return this.connectionId
+  }
+
   connectedCallback() {
     this.closed = false
     connectStreamSource(this)
@@ -80,6 +108,12 @@ class PgbusStreamSourceElement extends HTMLElement {
   // the URL. Parses the SSE event stream by hand because EventSource
   // doesn't expose custom query strings uniformly across browsers.
   async openFetchStream() {
+    // Each transport open is a fresh connection: the server mints a new id
+    // and sends a new pgbus:connected frame. Clear the previous id so
+    // pgbus:open (which fires before that frame arrives) can't surface a
+    // stale connection id — a stale id would produce a wrong X-Pgbus-Connection
+    // exclude header during reconnect windows.
+    this.resetConnectionId()
     const url = this.buildUrl({ includeSince: true })
     this.abortController = new AbortController()
 
@@ -99,7 +133,7 @@ class PgbusStreamSourceElement extends HTMLElement {
 
       this.setAttribute("connected", "")
       this.dispatchEvent(new CustomEvent("pgbus:open", {
-        detail: { lastEventId: this.lastEventId }
+        detail: { lastEventId: this.lastEventId, connectionId: this.connectionId }
       }))
 
       const reader = response.body.getReader()
@@ -137,13 +171,17 @@ class PgbusStreamSourceElement extends HTMLElement {
   switchToEventSource() {
     if (this.closed) return
 
+    // Fresh connection on reconnect — drop the previous connection id so
+    // pgbus:open can't emit a stale one before the new pgbus:connected
+    // frame lands. See openFetchStream.
+    this.resetConnectionId()
     const url = this.buildUrl({ includeSince: true })
     this.eventSource = new EventSource(url, { withCredentials: true })
 
     this.eventSource.addEventListener("open", () => {
       this.setAttribute("connected", "")
       this.dispatchEvent(new CustomEvent("pgbus:open", {
-        detail: { lastEventId: this.lastEventId }
+        detail: { lastEventId: this.lastEventId, connectionId: this.connectionId }
       }))
     })
 
@@ -153,7 +191,11 @@ class PgbusStreamSourceElement extends HTMLElement {
 
     this.eventSource.addEventListener("turbo-stream", (event) => {
       this.lastEventId = event.lastEventId
-      this.dispatchEvent(new MessageEvent("message", { data: event.data }))
+      this.emitTurboStream(event.data, event.lastEventId)
+    })
+
+    this.eventSource.addEventListener("pgbus:connected", (event) => {
+      this.handleConnected(event.data)
     })
 
     this.eventSource.addEventListener("pgbus:gap-detected", (event) => {
@@ -166,6 +208,15 @@ class PgbusStreamSourceElement extends HTMLElement {
         detail: { code: "shutdown", reason: "worker restart" }
       }))
     })
+
+    // Typed broadcasts (issue #170): EventSource only fires listeners
+    // registered by name, so we register one per declared typed event.
+    for (const name of this.declaredTypedEvents()) {
+      this.eventSource.addEventListener(name, (event) => {
+        if (event.lastEventId) this.lastEventId = event.lastEventId
+        this.emitTypedEvent(name, event.data, event.lastEventId)
+      })
+    }
   }
 
   // Parses a single SSE event block (: comment | id: ... | event: ... | data: ...)
@@ -185,7 +236,9 @@ class PgbusStreamSourceElement extends HTMLElement {
     if (id !== null) this.lastEventId = id
 
     if (event === "turbo-stream") {
-      this.dispatchEvent(new MessageEvent("message", { data }))
+      this.emitTurboStream(data, id)
+    } else if (event === "pgbus:connected") {
+      this.handleConnected(data)
     } else if (event === "pgbus:gap-detected") {
       this.dispatchEvent(new CustomEvent("pgbus:gap-detected", {
         detail: this.safeJsonParse(data)
@@ -194,9 +247,101 @@ class PgbusStreamSourceElement extends HTMLElement {
       this.dispatchEvent(new CustomEvent("pgbus:close", {
         detail: { code: "shutdown", reason: "worker restart" }
       }))
+    } else {
+      // A typed broadcast (issue #170): event: presence | reactive | ...
+      this.emitTypedEvent(event, data, id)
     }
   }
 
+  // Captures the server-minted connection id from a `pgbus:connected`
+  // frame: stores it, reflects it onto the `connection-id` attribute (so
+  // it's visible in the DOM / to MutationObservers), and re-dispatches it
+  // as a `pgbus:connected` CustomEvent. Idempotent across reconnects — the
+  // server mints a fresh id per connection, so a reconnect updates it.
+  handleConnected(data) {
+    const detail = this.safeJsonParse(data)
+    const connectionId = detail && detail.connectionId
+    if (!connectionId) return
+
+    this.connectionId = connectionId
+    this.setAttribute("connection-id", connectionId)
+    this.dispatchEvent(new CustomEvent("pgbus:connected", {
+      detail: { connectionId }
+    }))
+  }
+
+  // Clears the cached connection id and its reflected attribute. Called at
+  // the start of every transport open so a reconnect doesn't carry the
+  // previous connection's id into pgbus:open before the new pgbus:connected
+  // frame arrives.
+  resetConnectionId() {
+    this.connectionId = null
+    this.removeAttribute("connection-id")
+  }
+
+  // Delivers a turbo-stream frame to two audiences (issue #168):
+  //
+  //   1. Turbo's StreamObserver, via a `message` MessageEvent whose `data`
+  //      is the turbo-stream HTML. The MessageEvent's standard
+  //      `lastEventId` field carries the frame's msg_id, so a reactive
+  //      runtime that listens for `message` can read the revision without
+  //      any pgbus-specific API. (Turbo ignores lastEventId.)
+  //
+  //   2. A reactive runtime doing optimistic-UI reconciliation, via a
+  //      `pgbus:message` CustomEvent carrying { msgId, data }. msgId is the
+  //      monotonic per-stream revision (a negative value marks an ephemeral
+  //      frame that was never persisted). Pattern: track the highest msgId
+  //      you have applied per target; when a frame arrives, skip the morph
+  //      if you have already applied a newer revision for that target —
+  //      this stops a late echo from clobbering a newer optimistic edit.
+  //      Complements #165: exclude handles the actor; this handles
+  //      out-of-order delivery for everyone else.
+  //
+  // msgId is parsed to a Number when numeric so consumers can compare
+  // revisions with `>` directly; left as-is otherwise.
+  emitTurboStream(data, id) {
+    const msgId = id === null || id === undefined || id === "" ? null
+      : (Number.isNaN(Number(id)) ? id : Number(id))
+
+    const message = new MessageEvent("message", { data, lastEventId: id == null ? "" : String(id) })
+    this.dispatchEvent(message)
+
+    this.dispatchEvent(new CustomEvent("pgbus:message", {
+      detail: { msgId, data }
+    }))
+  }
+
+  // Delivers a typed broadcast (issue #170) — a frame whose SSE event name
+  // is something other than turbo-stream (e.g. "presence", "reactive").
+  // The payload is still whatever the broadcaster sent (usually a Turbo
+  // Stream); the typed name lets a client route without sniffing the HTML.
+  // Dispatched two ways for ergonomics:
+  //   - a generic `pgbus:event` { event, data, msgId } (one listener for all)
+  //   - a named `pgbus:<event>`  { data, msgId }      (addEventListener by name)
+  emitTypedEvent(event, data, id) {
+    const msgId = id === null || id === undefined || id === "" ? null
+      : (Number.isNaN(Number(id)) ? id : Number(id))
+
+    this.dispatchEvent(new CustomEvent("pgbus:event", {
+      detail: { event, data, msgId }
+    }))
+    this.dispatchEvent(new CustomEvent(`pgbus:${event}`, {
+      detail: { data, msgId }
+    }))
+  }
+
+  // Typed event names the EventSource (reconnect) path should listen for,
+  // declared by the app via the `listen-events` attribute (comma- or
+  // space-separated). EventSource only invokes listeners registered by
+  // name, so unlike the fetch path it cannot route unknown typed events
+  // generically; declaring them here keeps typed delivery working across
+  // reconnects. The fetch (initial) path always routes typed events.
+  declaredTypedEvents() {
+    const raw = this.getAttribute("listen-events")
+    if (!raw) return []
+    return raw.split(/[\s,]+/).filter((name) => name && name !== "turbo-stream")
+  }
+
   buildUrl({ includeSince }) {
     const src = this.getAttribute("src")
     if (!includeSince || !this.lastEventId) return src

data/app/controllers/pgbus/batches_controller.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Pgbus
+  class BatchesController < ApplicationController
+    def index
+      @batches = data_source.batches
+      render_frame("pgbus/batches/batches_table") if params[:frame] == "list"
+    end
+
+    def show
+      @batch = data_source.batch_detail(params[:id])
+      redirect_to batches_path, alert: t("pgbus.batches.show.not_found") unless @batch
+    end
+  end
+end

data/app/helpers/pgbus/application_helper.rb

@@ -84,6 +84,18 @@ module Pgbus
                class: "inline-flex items-center rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-800")
     end
 
+    BATCH_BADGE_BASE = "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium"
+    BATCH_BADGE_CSS = {
+      "finished" => "#{BATCH_BADGE_BASE} bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400",
+      "processing" => "#{BATCH_BADGE_BASE} bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
+      "pending" => "#{BATCH_BADGE_BASE} bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400"
+    }.freeze
+
+    def pgbus_batch_status_badge(status)
+      css = BATCH_BADGE_CSS[status] || BATCH_BADGE_CSS["pending"]
+      tag.span(I18n.t("pgbus.helpers.batch_status.#{status}", default: status), class: css)
+    end
+
     def pgbus_parse_message(message)
       return {} unless message
 

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

@@ -129,6 +129,7 @@
               <%= pgbus_nav_link t("pgbus.layout.nav.recurring"), pgbus.recurring_tasks_path %>
               <%= pgbus_nav_link t("pgbus.layout.nav.processes"), pgbus.processes_path %>
               <%= pgbus_nav_link t("pgbus.layout.nav.events"), pgbus.events_path %>
+              <%= pgbus_nav_link t("pgbus.layout.nav.batches"), pgbus.batches_path %>
               <%= pgbus_nav_link t("pgbus.layout.nav.dlq"), pgbus.dead_letter_index_path %>
               <%= pgbus_nav_link t("pgbus.layout.nav.outbox"), pgbus.outbox_index_path %>
               <%= pgbus_nav_link t("pgbus.layout.nav.locks"), pgbus.locks_path %>
@@ -188,6 +189,7 @@
           <%= pgbus_mobile_nav_link t("pgbus.layout.nav.recurring"), pgbus.recurring_tasks_path %>
           <%= pgbus_mobile_nav_link t("pgbus.layout.nav.processes"), pgbus.processes_path %>
           <%= pgbus_mobile_nav_link t("pgbus.layout.nav.events"), pgbus.events_path %>
+          <%= pgbus_mobile_nav_link t("pgbus.layout.nav.batches"), pgbus.batches_path %>
           <%= pgbus_mobile_nav_link t("pgbus.layout.nav.dlq"), pgbus.dead_letter_index_path %>
           <%= pgbus_mobile_nav_link t("pgbus.layout.nav.outbox"), pgbus.outbox_index_path %>
           <%= pgbus_mobile_nav_link t("pgbus.layout.nav.locks"), pgbus.locks_path %>

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

@@ -0,0 +1,54 @@
+<turbo-frame id="batches-list">
+  <div class="overflow-hidden rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+    <table class="pgbus-table min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+      <thead class="bg-gray-50 dark:bg-gray-900">
+        <tr>
+          <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.batches.index.headers.batch_id") %></th>
+          <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.batches.index.headers.description") %></th>
+          <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.batches.index.headers.status") %></th>
+          <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.batches.index.headers.progress") %></th>
+          <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.batches.index.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.batches.index.headers.created") %></th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+        <% @batches.each do |batch| %>
+          <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
+            <td data-label="Batch ID" class="px-4 py-3 text-sm">
+              <%= link_to batch[:batch_id][0..7], pgbus.batch_path(batch[:batch_id]),
+                    class: "font-mono text-indigo-600 dark:text-indigo-400 hover:underline",
+                    data: { turbo_frame: "_top" } %>
+            </td>
+            <td data-label="Description" class="px-4 py-3 text-sm text-gray-700 dark:text-gray-300 max-w-xs truncate">
+              <%= batch[:description] || "—" %>
+            </td>
+            <td data-label="Status" class="px-4 py-3 text-sm">
+              <%= pgbus_batch_status_badge(batch[:status]) %>
+            </td>
+            <td data-label="Progress" class="px-4 py-3 text-sm">
+              <div class="flex items-center space-x-2">
+                <div class="w-24 bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+                  <div class="h-2 rounded-full <%= batch[:discarded_jobs].to_i > 0 ? 'bg-amber-500' : 'bg-green-500' %>"
+                       style="width: <%= batch[:progress_pct] %>%"></div>
+                </div>
+                <span class="text-xs text-gray-500 dark:text-gray-400 font-mono"><%= batch[:progress_pct] %>%</span>
+              </div>
+            </td>
+            <td data-label="Jobs" class="px-4 py-3 text-sm text-right font-mono text-gray-500 dark:text-gray-400">
+              <%= batch[:completed_jobs] %>/<%= batch[:total_jobs] %>
+              <% if batch[:discarded_jobs].to_i > 0 %>
+                <span class="text-red-500">(<%= batch[:discarded_jobs] %> dlq)</span>
+              <% end %>
+            </td>
+            <td data-label="Created" class="px-4 py-3 text-sm text-right text-gray-500 dark:text-gray-400">
+              <%= pgbus_time_ago(batch[:created_at]) %>
+            </td>
+          </tr>
+        <% end %>
+        <% if @batches.empty? %>
+          <tr><td colspan="6" class="px-4 py-8 text-center text-sm text-gray-400 dark:text-gray-500"><%= t("pgbus.batches.index.empty") %></td></tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+</turbo-frame>

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

@@ -0,0 +1,8 @@
+<div class="flex items-center justify-between mb-6">
+  <div>
+    <h1 class="text-2xl font-bold text-gray-900 dark:text-white"><%= t("pgbus.batches.index.title") %></h1>
+    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400"><%= t("pgbus.batches.index.description") %></p>
+  </div>
+</div>
+
+<%= render "pgbus/batches/batches_table" %>

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

@@ -0,0 +1,90 @@
+<div class="mb-6">
+  <div class="flex items-center space-x-2 mb-2">
+    <%= link_to t("pgbus.batches.show.back"), pgbus.batches_path,
+          class: "text-sm text-indigo-600 dark:text-indigo-400 hover:underline" %>
+  </div>
+  <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
+    <%= t("pgbus.batches.show.title") %>
+    <span class="font-mono text-lg"><%= @batch[:batch_id][0..7] %></span>
+    <%= pgbus_batch_status_badge(@batch[:status]) %>
+  </h1>
+  <% if @batch[:description] %>
+    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400"><%= @batch[:description] %></p>
+  <% end %>
+</div>
+
+<!-- Progress -->
+<div class="mb-6 overflow-hidden rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700 p-6">
+  <h2 class="text-sm font-semibold text-gray-900 dark:text-white mb-4"><%= t("pgbus.batches.show.progress") %></h2>
+
+  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 mb-3">
+    <div class="h-4 rounded-full transition-all duration-300 <%= @batch[:discarded_jobs].to_i > 0 ? 'bg-amber-500' : 'bg-green-500' %>"
+         style="width: <%= @batch[:progress_pct] %>%"></div>
+  </div>
+
+  <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
+    <div>
+      <dt class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase"><%= t("pgbus.batches.show.total_jobs") %></dt>
+      <dd class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white font-mono"><%= @batch[:total_jobs] %></dd>
+    </div>
+    <div>
+      <dt class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase"><%= t("pgbus.batches.show.completed") %></dt>
+      <dd class="mt-1 text-2xl font-semibold text-green-600 dark:text-green-400 font-mono"><%= @batch[:completed_jobs] %></dd>
+    </div>
+    <div>
+      <dt class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase"><%= t("pgbus.batches.show.discarded") %></dt>
+      <dd class="mt-1 text-2xl font-semibold <%= @batch[:discarded_jobs].to_i > 0 ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-white' %> font-mono"><%= @batch[:discarded_jobs] %></dd>
+    </div>
+    <div>
+      <dt class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase"><%= t("pgbus.batches.show.remaining") %></dt>
+      <dd class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white font-mono"><%= @batch[:total_jobs] - @batch[:completed_jobs] - @batch[:discarded_jobs] %></dd>
+    </div>
+  </div>
+</div>
+
+<!-- Details -->
+<div class="overflow-hidden rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+  <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
+    <h2 class="text-sm font-semibold text-gray-900 dark:text-white"><%= t("pgbus.batches.show.details") %></h2>
+  </div>
+  <dl class="divide-y divide-gray-100 dark:divide-gray-700">
+    <div class="px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4">
+      <dt class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.batches.show.batch_id") %></dt>
+      <dd class="mt-1 text-sm font-mono text-gray-900 dark:text-white sm:col-span-2 sm:mt-0"><%= @batch[:batch_id] %></dd>
+    </div>
+    <div class="px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4">
+      <dt class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.batches.show.created_at") %></dt>
+      <dd class="mt-1 text-sm text-gray-900 dark:text-white sm:col-span-2 sm:mt-0"><%= @batch[:created_at] %></dd>
+    </div>
+    <% if @batch[:finished_at] %>
+      <div class="px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4">
+        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.batches.show.finished_at") %></dt>
+        <dd class="mt-1 text-sm text-gray-900 dark:text-white sm:col-span-2 sm:mt-0"><%= @batch[:finished_at] %></dd>
+      </div>
+    <% end %>
+    <% if @batch[:on_finish_class] %>
+      <div class="px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4">
+        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.batches.show.on_finish") %></dt>
+        <dd class="mt-1 text-sm font-mono text-gray-900 dark:text-white sm:col-span-2 sm:mt-0"><%= @batch[:on_finish_class] %></dd>
+      </div>
+    <% end %>
+    <% if @batch[:on_success_class] %>
+      <div class="px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4">
+        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.batches.show.on_success") %></dt>
+        <dd class="mt-1 text-sm font-mono text-gray-900 dark:text-white sm:col-span-2 sm:mt-0"><%= @batch[:on_success_class] %></dd>
+      </div>
+    <% end %>
+    <% if @batch[:on_discard_class] %>
+      <div class="px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4">
+        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.batches.show.on_discard") %></dt>
+        <dd class="mt-1 text-sm font-mono text-gray-900 dark:text-white sm:col-span-2 sm:mt-0"><%= @batch[:on_discard_class] %></dd>
+      </div>
+    <% end %>
+    <% if @batch[:properties].present? %>
+      <div class="px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4">
+        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= t("pgbus.batches.show.properties") %></dt>
+        <dd class="mt-1 text-sm font-mono text-gray-900 dark:text-white sm:col-span-2 sm:mt-0 break-all"><%= @batch[:properties] %></dd>
+      </div>
+    <% end %>
+  </dl>
+</div>

data/config/locales/da.yml

@@ -1,6 +1,35 @@
 ---
 da:
   pgbus:
+    batches:
+      index:
+        description: Jobbatches med fremdriftssporing og callbacks
+        empty: Ingen batches fundet
+        headers:
+          batch_id: Batch-ID
+          created: Oprettet
+          description: Beskrivelse
+          jobs: Jobs
+          progress: Fremgang
+          status: Status
+        title: Batches
+      show:
+        back: Tilbage til batches
+        batch_id: Batch-ID
+        completed: Fuldført
+        created_at: Oprettet den
+        details: Detaljer
+        discarded: Kasseret
+        finished_at: Afsluttet den
+        not_found: Batch ikke fundet
+        on_discard: Ved kassering
+        on_finish: Ved afslutning
+        on_success: Ved succes
+        progress: Fremgang
+        properties: Egenskaber
+        remaining: Resterende
+        title: Batch
+        total_jobs: Samlet antal jobs
     dashboard:
       processes_table:
         empty: Ingen processer kører
@@ -189,6 +218,10 @@ da:
         not_found: Begivenhed ikke fundet
         title: Begivenhed %{event_id}
     helpers:
+      batch_status:
+        finished: Afsluttet
+        pending: Afventer
+        processing: Behandler
       bulk_select_all: Vælg alle
       bulk_select_row: Vælg %{id}
       bulk_selected: valgt
@@ -346,6 +379,7 @@ da:
     layout:
       brand: Pgbus
       nav:
+        batches: Batches
         dashboard: Dashboard
         dlq: DLQ
         events: Begivenheder

data/config/locales/de.yml

@@ -1,6 +1,35 @@
 ---
 de:
   pgbus:
+    batches:
+      index:
+        description: Job-Stapel mit Fortschrittsverfolgung und Callbacks
+        empty: Keine Stapel gefunden
+        headers:
+          batch_id: Stapel-ID
+          created: Erstellt
+          description: Beschreibung
+          jobs: Jobs
+          progress: Fortschritt
+          status: Status
+        title: Stapel
+      show:
+        back: Zurück zu Stapeln
+        batch_id: Stapel-ID
+        completed: Abgeschlossen
+        created_at: Erstellt am
+        details: Details
+        discarded: Verworfen
+        finished_at: Beendet am
+        not_found: Stapel nicht gefunden
+        on_discard: Bei Verwerfung
+        on_finish: Bei Beendigung
+        on_success: Bei Erfolg
+        progress: Fortschritt
+        properties: Eigenschaften
+        remaining: Verbleibend
+        title: Stapel
+        total_jobs: Gesamtanzahl Jobs
     dashboard:
       processes_table:
         empty: Keine Prozesse laufen
@@ -189,6 +218,10 @@ de:
         not_found: Ereignis nicht gefunden
         title: Ereignis %{event_id}
     helpers:
+      batch_status:
+        finished: Abgeschlossen
+        pending: Ausstehend
+        processing: In Bearbeitung
       bulk_select_all: Alle auswählen
       bulk_select_row: "%{id} auswählen"
       bulk_selected: ausgewählt
@@ -346,6 +379,7 @@ de:
     layout:
       brand: Pgbus
       nav:
+        batches: Stapel
         dashboard: Dashboard
         dlq: DLQ
         events: Ereignisse

data/config/locales/en.yml

@@ -1,6 +1,35 @@
 ---
 en:
   pgbus:
+    batches:
+      index:
+        description: Job batches with progress tracking and callbacks
+        empty: No batches found
+        headers:
+          batch_id: Batch ID
+          created: Created
+          description: Description
+          jobs: Jobs
+          progress: Progress
+          status: Status
+        title: Batches
+      show:
+        back: Back to batches
+        batch_id: Batch ID
+        completed: Completed
+        created_at: Created At
+        details: Details
+        discarded: Discarded
+        finished_at: Finished At
+        not_found: Batch not found
+        on_discard: On Discard
+        on_finish: On Finish
+        on_success: On Success
+        progress: Progress
+        properties: Properties
+        remaining: Remaining
+        title: Batch
+        total_jobs: Total Jobs
     dashboard:
       processes_table:
         empty: No processes running
@@ -189,6 +218,10 @@ en:
         not_found: Event not found
         title: Event %{event_id}
     helpers:
+      batch_status:
+        finished: Finished
+        pending: Pending
+        processing: Processing
       bulk_select_all: Select all
       bulk_select_row: Select %{id}
       bulk_selected: selected
@@ -346,6 +379,7 @@ en:
     layout:
       brand: Pgbus
       nav:
+        batches: Batches
         dashboard: Dashboard
         dlq: DLQ
         events: Events