solid_queue_web 0.5.5 → 0.7.0

data/app/controllers/solid_queue_web/history_controller.rb

@@ -0,0 +1,16 @@
+module SolidQueueWeb
+  class HistoryController < ApplicationController
+    def index
+      @queue  = params[:queue].presence
+      @search = params[:q].presence
+      @period = params[:period].presence_in(PERIOD_DURATIONS.keys)
+
+      scope = SolidQueue::Job.where.not(finished_at: nil)
+      scope = scope.where(queue_name: @queue)                                    if @queue.present?
+      scope = scope.where("class_name LIKE ?", "%#{@search}%")                  if @search.present?
+      scope = scope.where("finished_at >= ?", PERIOD_DURATIONS[@period].ago)    if @period.present?
+
+      @pagy, @jobs = pagy(scope.order(finished_at: :desc))
+    end
+  end
+end

data/app/controllers/solid_queue_web/jobs/selections_controller.rb

@@ -0,0 +1,21 @@
+module SolidQueueWeb
+  module Jobs
+    class SelectionsController < ApplicationController
+      def destroy
+        status = params[:status]
+        period = params[:period].presence_in(PERIOD_DURATIONS.keys)
+        raise ArgumentError, "Cannot discard #{status} jobs." unless Job::DISCARDABLE.include?(status)
+        model = Job::EXECUTION_MODELS[status]
+        ids = Array(params[:ids]).map(&:to_i).reject(&:zero?)
+        jobs = model.where(id: ids).includes(:job).map(&:job)
+        model.discard_all_from_jobs(jobs)
+        redirect_to jobs_path(status: status, period: period),
+          notice: "#{jobs.size} #{"job".pluralize(jobs.size)} discarded."
+      rescue ArgumentError => e
+        redirect_to jobs_path(status: status), alert: e.message
+      rescue => e
+        redirect_to jobs_path(status: status), alert: "Could not discard jobs: #{e.message}"
+      end
+    end
+  end
+end

data/app/controllers/solid_queue_web/jobs_controller.rb

@@ -1,12 +1,14 @@
 module SolidQueueWeb
   class JobsController < ApplicationController
-    before_action :set_status, only: [ :destroy, :discard_all ]
+    before_action :set_status, only: [:destroy, :discard_all, :discard_selected]
 
     def index
       @status = params[:status].presence_in(Job::STATUSES) || "ready"
       @search = params[:q].presence
+      @period = params[:period].presence_in(PERIOD_DURATIONS.keys)
       @jobs   = Job::EXECUTION_MODELS[@status].includes(:job)
       @jobs   = @jobs.references(:job).where("solid_queue_jobs.class_name LIKE ?", "%#{@search}%") if @search.present?
+      @jobs   = @jobs.references(:job).where("solid_queue_jobs.created_at >= ?", PERIOD_DURATIONS[@period].ago) if @period.present?
       @pagy, @jobs = pagy(@jobs.order(created_at: :desc))
     end
 
@@ -24,24 +26,24 @@ module SolidQueueWeb
       @remaining_count = filtered_scope(model).count
       respond_to do |format|
         format.turbo_stream
-        format.html { redirect_to jobs_path(status: @status), notice: "Job discarded." }
+        format.html { redirect_to jobs_path(status: @status, period: @period), notice: "Job discarded." }
       end
     rescue ArgumentError => e
-      redirect_to jobs_path(status: @status), alert: e.message
+      redirect_to jobs_path(status: @status, period: @period), alert: e.message
     rescue => e
-      redirect_to jobs_path(status: @status), alert: "Could not discard job: #{e.message}"
+      redirect_to jobs_path(status: @status, period: @period), alert: "Could not discard job: #{e.message}"
     end
 
     def discard_all
       model = execution_model_for!(@status)
       jobs = filtered_scope(model).map(&:job)
       model.discard_all_from_jobs(jobs)
-      redirect_to jobs_path(status: @status),
+      redirect_to jobs_path(status: @status, period: @period),
         notice: "#{jobs.size} #{"job".pluralize(jobs.size)} discarded."
     rescue ArgumentError => e
-      redirect_to jobs_path(status: @status), alert: e.message
+      redirect_to jobs_path(status: @status, period: @period), alert: e.message
     rescue => e
-      redirect_to jobs_path(status: @status), alert: "Could not discard jobs: #{e.message}"
+      redirect_to jobs_path(status: @status, period: @period), alert: "Could not discard jobs: #{e.message}"
     end
 
     private
@@ -57,10 +59,13 @@ module SolidQueueWeb
 
     def set_status
       @status = params[:status]
+      @period = params[:period].presence_in(PERIOD_DURATIONS.keys)
     end
 
     def filtered_scope(model)
-      model.includes(:job)
+      scope = model.includes(:job)
+      scope = scope.references(:job).where("solid_queue_jobs.created_at >= ?", PERIOD_DURATIONS[@period].ago) if @period.present?
+      scope
     end
 
     def execution_model_for!(status)

data/app/controllers/solid_queue_web/queues/jobs_controller.rb

@@ -2,7 +2,7 @@ module SolidQueueWeb
   module Queues
     class JobsController < ApplicationController
       before_action :set_queue
-      before_action :set_status, only: [ :destroy, :discard_all ]
+      before_action :set_status, only: [:destroy, :discard_all]
 
       def index
         @status = params[:status].presence_in(Job::STATUSES) || "ready"

data/app/controllers/solid_queue_web/queues_controller.rb

@@ -2,6 +2,21 @@ module SolidQueueWeb
   class QueuesController < ApplicationController
     def index
       @queues = SolidQueue::Queue.all.sort_by(&:name)
+
+      now = Time.current
+      @completed_24h = SolidQueue::Job
+        .where(finished_at: 24.hours.ago..now)
+        .group(:queue_name)
+        .count
+      @failed_24h = SolidQueue::FailedExecution
+        .joins(:job)
+        .where(created_at: 24.hours.ago..now)
+        .group("solid_queue_jobs.queue_name")
+        .count
+      @oldest_ready = SolidQueue::ReadyExecution
+        .joins(:job)
+        .group("solid_queue_jobs.queue_name")
+        .minimum("solid_queue_jobs.created_at")
     end
 
     def pause

data/app/controllers/solid_queue_web/search_controller.rb

@@ -0,0 +1,23 @@
+module SolidQueueWeb
+  class SearchController < ApplicationController
+    LIMIT = 25
+
+    def index
+      @query      = params[:q].presence
+      @job_classes = SolidQueue::Job.distinct.order(:class_name).pluck(:class_name)
+      @results    = {}
+
+      return unless @query
+
+      Job::EXECUTION_MODELS.each do |status, model|
+        scope = model.includes(:job)
+                     .references(:job)
+                     .where("solid_queue_jobs.class_name LIKE ?", "%#{@query}%")
+                     .order(created_at: :desc)
+        total      = scope.count
+        executions = scope.limit(LIMIT).to_a
+        @results[status] = { executions: executions, total: total } unless executions.empty?
+      end
+    end
+  end
+end

data/app/helpers/solid_queue_web/application_helper.rb

@@ -1,8 +1,22 @@
 module SolidQueueWeb
   module ApplicationHelper
     def inline_styles
-      css = SolidQueueWeb::Engine.root.join("app/assets/stylesheets/solid_queue_web/application.css").read
+      dir = SolidQueueWeb::Engine.root.join("app/assets/stylesheets/solid_queue_web")
+      css = dir.glob("_*.css").sort.map(&:read).join("\n")
       content_tag(:style, css.html_safe)
     end
+
+    def format_duration(seconds)
+      s = seconds.to_i
+      return "< 1s" if s < 1
+
+      if s < 60
+        "#{s}s"
+      elsif s < 3600
+        "#{s / 60}m #{s % 60}s"
+      else
+        "#{s / 3600}h #{(s % 3600) / 60}m"
+      end
+    end
   end
 end

data/app/javascript/solid_queue_web/application.js

@@ -1,6 +1,10 @@
 import "@hotwired/turbo"
 import { Application } from "@hotwired/stimulus"
 import SearchController from "solid_queue_web/search_controller"
+import RefreshController from "solid_queue_web/refresh_controller"
+import SelectionController from "solid_queue_web/selection_controller"
 
 const application = Application.start()
 application.register("search", SearchController)
+application.register("refresh", RefreshController)
+application.register("selection", SelectionController)

data/app/javascript/solid_queue_web/refresh_controller.js

@@ -0,0 +1,52 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { interval: { type: Number, default: 5000 } }
+
+  initialize() {
+    this._onVisibilityChange = this._onVisibilityChange.bind(this)
+  }
+
+  connect() {
+    document.addEventListener("visibilitychange", this._onVisibilityChange)
+    this._schedule()
+  }
+
+  disconnect() {
+    clearTimeout(this._timer)
+    document.removeEventListener("visibilitychange", this._onVisibilityChange)
+  }
+
+  _schedule() {
+    this._timer = setTimeout(() => this._reload(), this.intervalValue)
+  }
+
+  async _reload() {
+    clearTimeout(this._timer)
+    const hasSelection = this.element.querySelector("input[type='checkbox']:checked")
+    if (!document.hidden && !hasSelection) {
+      try {
+        const response = await fetch(window.location.href, {
+          headers: { "Turbo-Frame": this.element.id, Accept: "text/html" }
+        })
+        if (response.ok) {
+          const html = await response.text()
+          const doc = new DOMParser().parseFromString(html, "text/html")
+          const frame = doc.querySelector(`turbo-frame#${this.element.id}`)
+          if (frame && this.element.isConnected) this.element.innerHTML = frame.innerHTML
+        }
+      } catch {
+        // network error — skip this tick
+      }
+    }
+    if (this.element.isConnected) this._schedule()
+  }
+
+  _onVisibilityChange() {
+    if (document.hidden) {
+      clearTimeout(this._timer)
+    } else if (!this.element.querySelector("input[type='checkbox']:checked")) {
+      this._reload()
+    }
+  }
+}

data/app/javascript/solid_queue_web/search_controller.js

@@ -8,4 +8,9 @@ export default class extends Controller {
       this._timer = setTimeout(() => target.form.requestSubmit(), 300)
     }
   }
+
+  select({ target }) {
+    clearTimeout(this._timer)
+    target.form.requestSubmit()
+  }
 }

data/app/javascript/solid_queue_web/selection_controller.js

@@ -0,0 +1,42 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["checkbox", "selectAll", "bar", "count"]
+
+  toggle() {
+    this._update()
+  }
+
+  selectAll({ target }) {
+    this.checkboxTargets.forEach(cb => cb.checked = target.checked)
+    this._update()
+  }
+
+  submit({ params: { formId } }) {
+    const form = document.getElementById(formId)
+    if (!form) return
+    form.querySelectorAll("[data-injected-id]").forEach(el => el.remove())
+    this.checkboxTargets
+      .filter(cb => cb.checked)
+      .forEach(cb => {
+        const input = document.createElement("input")
+        input.type = "hidden"
+        input.name = "ids[]"
+        input.value = cb.value
+        input.dataset.injectedId = true
+        form.appendChild(input)
+      })
+    form.requestSubmit()
+  }
+
+  _update() {
+    const checked = this.checkboxTargets.filter(cb => cb.checked).length
+    const total = this.checkboxTargets.length
+    if (this.hasBarTarget) this.barTarget.style.display = checked > 0 ? "" : "none"
+    if (this.hasCountTarget) this.countTarget.textContent = checked
+    if (this.hasSelectAllTarget) {
+      this.selectAllTarget.indeterminate = checked > 0 && checked < total
+      this.selectAllTarget.checked = total > 0 && checked === total
+    }
+  }
+}

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

@@ -26,9 +26,11 @@
           <li><%= link_to "Dashboard", root_path, class: current_page?(root_path) ? "active" : "", aria: { current: current_page?(root_path) ? "page" : nil } %></li>
           <li><%= link_to "Queues", queues_path, class: current_page?(queues_path) ? "active" : "", aria: { current: current_page?(queues_path) ? "page" : nil } %></li>
           <li><%= link_to "Jobs", jobs_path, class: current_page?(jobs_path) ? "active" : "", aria: { current: current_page?(jobs_path) ? "page" : nil } %></li>
+          <li><%= link_to "History", history_path, class: current_page?(history_path) ? "active" : "", aria: { current: current_page?(history_path) ? "page" : nil } %></li>
           <li><%= link_to "Failed", failed_jobs_path, class: current_page?(failed_jobs_path) ? "active" : "", aria: { current: current_page?(failed_jobs_path) ? "page" : nil } %></li>
           <li><%= link_to "Recurring", recurring_tasks_path, class: current_page?(recurring_tasks_path) ? "active" : "", aria: { current: current_page?(recurring_tasks_path) ? "page" : nil } %></li>
           <li><%= link_to "Processes", processes_path, class: current_page?(processes_path) ? "active" : "", aria: { current: current_page?(processes_path) ? "page" : nil } %></li>
+          <li><%= link_to "Search", search_path, class: current_page?(search_path) ? "active" : "", aria: { current: current_page?(search_path) ? "page" : nil } %></li>
         </ul>
       </nav>
     </div>

data/app/views/solid_queue_web/dashboard/index.html.erb

@@ -1,3 +1,4 @@
+<%= turbo_frame_tag "dashboard", target: "_top", data: { controller: "refresh", refresh_interval_value: 5000 } do %>
 <h1 class="sqd-page-title">Dashboard</h1>
 
 <div class="sqd-stats">
@@ -33,6 +34,44 @@
     <div class="sqd-stat__value"><%= @stats[:processes] %></div>
     <div class="sqd-stat__label">Processes</div>
   <% end %>
+  <%= link_to history_path(period: "1h"), class: "sqd-stat sqd-stat--done sqd-stat--link" do %>
+    <div class="sqd-stat__value"><%= @throughput[:completed_1h] %></div>
+    <div class="sqd-stat__label">Done (1h)</div>
+  <% end %>
+  <%= link_to history_path(period: "24h"), class: "sqd-stat sqd-stat--done sqd-stat--link" do %>
+    <div class="sqd-stat__value"><%= @throughput[:completed_24h] %></div>
+    <div class="sqd-stat__label">Done (24h)</div>
+  <% end %>
+</div>
+
+<% max_val = [@sparkline.max, 1].max %>
+<div class="sqd-card" style="margin-bottom: 1rem;">
+  <div class="sqd-card__header">
+    <span class="sqd-card__title">Throughput &mdash; Last 12 Hours</span>
+    <div class="sqd-throughput__summary">
+      <span>1h: <strong><%= @throughput[:completed_1h] %></strong></span>
+      <span>24h: <strong><%= @throughput[:completed_24h] %></strong></span>
+    </div>
+  </div>
+  <% if @throughput[:completed_24h] == 0 %>
+    <div class="sqd-sparkline__empty">No completed jobs in the last 24 hours</div>
+  <% else %>
+    <div class="sqd-sparkline" aria-label="Jobs completed per hour over the last 12 hours">
+      <% @sparkline.each_with_index do |count, i| %>
+        <% pct = (count.to_f / max_val * 100).round %>
+        <% hour_start = (12 - i).hours.ago %>
+        <% show_tick = [0, 3, 6, 9, 11].include?(i) %>
+        <div class="sqd-sparkline__col">
+          <div class="sqd-sparkline__bar-wrap">
+            <div class="sqd-sparkline__bar"
+                 style="height: <%= [pct, 3].max %>%"
+                 title="<%= hour_start.strftime('%-I%p').downcase %>: <%= count %> <%= "job".pluralize(count) %>"></div>
+          </div>
+          <div class="sqd-sparkline__tick"><%= show_tick ? (i == 11 ? "now" : hour_start.strftime("%-I%p").downcase) : "" %></div>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
 </div>
 
 <div style="display:grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
@@ -62,4 +101,5 @@
       </div>
     </div>
   <% end %>
-</div>
+</div>
+<% end %>

data/app/views/solid_queue_web/failed_jobs/index.html.erb

@@ -4,12 +4,12 @@
     <div class="sqd-actions">
       <%= button_to "Retry All", retry_all_failed_jobs_path,
             method: :post,
-            params: { queue: @queue, q: @search },
+            params: { queue: @queue, q: @search, period: @period },
             class: "sqd-btn sqd-btn--primary",
             data: { confirm: "Retry all #{@failed_jobs.size} failed jobs?" } %>
       <%= button_to "Discard All", discard_all_failed_jobs_path,
             method: :post,
-            params: { queue: @queue, q: @search },
+            params: { queue: @queue, q: @search, period: @period },
             class: "sqd-btn sqd-btn--danger",
             data: { confirm: "Discard all #{@failed_jobs.size} failed jobs? This cannot be undone." } %>
     </div>
@@ -20,69 +20,113 @@
   <% if @queue.present? %>
     <input type="hidden" name="queue" value="<%= @queue %>">
   <% end %>
+  <input type="hidden" name="period" value="<%= @period %>">
   <input class="sqd-search__input" type="search" name="q" value="<%= @search %>"
          placeholder="Filter by job class…" autocomplete="off" aria-label="Filter by job class"
          data-action="input->search#filter">
-  <button type="submit" class="sqd-btn sqd-btn--muted">Search</button>
   <% if @search.present? %>
-    <%= link_to "Clear", failed_jobs_path(queue: @queue), class: "sqd-btn sqd-btn--muted" %>
+    <%= link_to "Clear", failed_jobs_path(queue: @queue, period: @period), class: "sqd-btn sqd-btn--muted" %>
   <% end %>
+  <div class="sqd-period-filter" role="group" aria-label="Time period">
+    <%= link_to "All", failed_jobs_path(queue: @queue, q: @search),                       class: @period.nil?       ? "active" : "", aria: { current: @period.nil?       ? "true" : nil }, aria_label: "All time" %>
+    <%= link_to "1h",  failed_jobs_path(queue: @queue, q: @search, period: "1h"),  class: @period == "1h"  ? "active" : "", aria: { current: @period == "1h"  ? "true" : nil }, aria_label: "Last 1 hour" %>
+    <%= link_to "24h", failed_jobs_path(queue: @queue, q: @search, period: "24h"), class: @period == "24h" ? "active" : "", aria: { current: @period == "24h" ? "true" : nil }, aria_label: "Last 24 hours" %>
+    <%= link_to "7d",  failed_jobs_path(queue: @queue, q: @search, period: "7d"),  class: @period == "7d"  ? "active" : "", aria: { current: @period == "7d"  ? "true" : nil }, aria_label: "Last 7 days" %>
+  </div>
 </form>
 
 <% if @pagy.last > 1 %>
   <%= @pagy.series_nav.html_safe %>
 <% end %>
 
-<div class="sqd-card">
-  <% if @failed_jobs.empty? %>
-    <div class="sqd-empty">No failed jobs. All clear!</div>
-  <% else %>
-    <table>
-      <thead>
-        <tr>
-          <th scope="col">Job Class</th>
-          <th scope="col">Queue</th>
-          <th scope="col">Error</th>
-          <th scope="col">Failed At</th>
-          <th scope="col"><span class="sqd-sr-only">Actions</span></th>
-        </tr>
-      </thead>
-      <tbody>
-        <% @failed_jobs.each do |execution| %>
-          <% job = execution.job %>
+<% if @failed_jobs.any? %>
+  <div data-controller="selection">
+    <%= form_tag failed_job_selection_path, method: :post, id: "retry-selection-form" do %>
+      <%= hidden_field_tag :queue, @queue %>
+      <%= hidden_field_tag :q, @search %>
+      <%= hidden_field_tag :period, @period %>
+    <% end %>
+
+    <%= form_tag failed_job_selection_path, method: :delete, id: "discard-selection-form",
+          data: { turbo_confirm: "Discard selected jobs? This cannot be undone." } do %>
+      <%= hidden_field_tag :queue, @queue %>
+      <%= hidden_field_tag :q, @search %>
+      <%= hidden_field_tag :period, @period %>
+    <% end %>
+
+    <div class="sqd-selection-bar" data-selection-target="bar" style="display: none;">
+      <span class="sqd-muted-text"><span data-selection-target="count">0</span> selected</span>
+      <button type="button" class="sqd-btn sqd-btn--primary sqd-btn--sm"
+              data-action="click->selection#submit"
+              data-selection-form-id-param="retry-selection-form">Retry Selected</button>
+      <button type="button" class="sqd-btn sqd-btn--danger sqd-btn--sm"
+              data-action="click->selection#submit"
+              data-selection-form-id-param="discard-selection-form">Discard Selected</button>
+    </div>
+
+    <div class="sqd-card">
+      <table>
+        <thead>
           <tr>
-            <td><%= link_to job.class_name, job_path(job) %></td>
-            <td>
-              <%= link_to job.queue_name, failed_jobs_path(queue: job.queue_name, q: @search),
-                    class: "sqd-mono", style: "color: inherit;" %>
-            </td>
-            <td>
-              <% if execution.exception_class.present? %>
-                <div class="sqd-error-msg sqd-truncate" title="<%= execution.exception_class %>: <%= execution.message %>">
-                  <strong><%= execution.exception_class %></strong>: <%= execution.message %>
-                </div>
-              <% else %>
-                <span style="color:var(--muted)">—</span>
-              <% end %>
-            </td>
-            <td class="sqd-mono"><%= execution.created_at.strftime("%Y-%m-%d %H:%M:%S") %></td>
-            <td class="sqd-row-actions">
-              <%= button_to "Retry", retry_failed_job_path(execution), method: :post,
-                    class: "sqd-btn sqd-btn--primary sqd-btn--sm" %>
-              <%= button_to "Discard", failed_job_path(execution), method: :delete,
-                    class: "sqd-btn sqd-btn--danger sqd-btn--sm",
-                    data: { confirm: "Discard this job?" } %>
-            </td>
+            <th scope="col">
+              <input type="checkbox" data-selection-target="selectAll"
+                     data-action="change->selection#selectAll"
+                     aria-label="Select all failed jobs">
+            </th>
+            <th scope="col">Job Class</th>
+            <th scope="col">Queue</th>
+            <th scope="col">Error</th>
+            <th scope="col">Failed At</th>
+            <th scope="col"><span class="sqd-sr-only">Actions</span></th>
           </tr>
-        <% end %>
-      </tbody>
-    </table>
-  <% end %>
-</div>
+        </thead>
+        <tbody>
+          <% @failed_jobs.each do |execution| %>
+            <% job = execution.job %>
+            <tr>
+              <td>
+                <input type="checkbox" value="<%= execution.id %>"
+                       data-selection-target="checkbox"
+                       data-action="change->selection#toggle"
+                       aria-label="Select job <%= job.class_name %>">
+              </td>
+              <td><%= link_to job.class_name, job_path(job) %></td>
+              <td>
+                <%= link_to job.queue_name, failed_jobs_path(queue: job.queue_name, q: @search, period: @period),
+                      class: "sqd-mono", style: "color: inherit;" %>
+              </td>
+              <td>
+                <% if execution.exception_class.present? %>
+                  <div class="sqd-error-msg sqd-truncate" title="<%= execution.exception_class %>: <%= execution.message %>">
+                    <strong><%= execution.exception_class %></strong>: <%= execution.message %>
+                  </div>
+                <% else %>
+                  <span style="color:var(--muted)">—</span>
+                <% end %>
+              </td>
+              <td class="sqd-mono"><%= execution.created_at.strftime("%Y-%m-%d %H:%M:%S") %></td>
+              <td class="sqd-row-actions">
+                <%= button_to "Retry", retry_failed_job_path(execution), method: :post,
+                      class: "sqd-btn sqd-btn--primary sqd-btn--sm" %>
+                <%= button_to "Discard", failed_job_path(execution), method: :delete,
+                      class: "sqd-btn sqd-btn--danger sqd-btn--sm",
+                      data: { confirm: "Discard this job?" } %>
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+<% else %>
+  <div class="sqd-card">
+    <div class="sqd-empty">No failed jobs. All clear!</div>
+  </div>
+<% end %>
 
 <% if @queue.present? %>
   <p style="margin-top: 0.75rem; font-size: 13px; color: var(--muted);">
     Filtering by queue: <strong><%= @queue %></strong> &mdash;
-    <%= link_to "Clear filter", failed_jobs_path(q: @search) %>
+    <%= link_to "Clear filter", failed_jobs_path(q: @search, period: @period) %>
   </p>
 <% end %>

data/app/views/solid_queue_web/history/index.html.erb

@@ -0,0 +1,67 @@
+<%= turbo_frame_tag "history-table", data: { controller: "refresh", refresh_interval_value: 10000 } do %>
+<div class="sqd-page-header">
+  <h1 class="sqd-page-title">Job History</h1>
+</div>
+
+<form class="sqd-search" action="<%= history_path %>" method="get" data-controller="search">
+  <% if @queue.present? %>
+    <input type="hidden" name="queue" value="<%= @queue %>">
+  <% end %>
+  <input type="hidden" name="period" value="<%= @period %>">
+  <input class="sqd-search__input" type="search" name="q" value="<%= @search %>"
+         placeholder="Filter by job class…" autocomplete="off" aria-label="Filter by job class"
+         data-action="input->search#filter">
+  <% if @search.present? %>
+    <%= link_to "Clear", history_path(queue: @queue, period: @period), class: "sqd-btn sqd-btn--muted" %>
+  <% end %>
+  <div class="sqd-period-filter" role="group" aria-label="Time period">
+    <%= link_to "All",  history_path(queue: @queue, q: @search),                      class: @period.nil?       ? "active" : "", aria: { current: @period.nil?       ? "true" : nil } %>
+    <%= link_to "1h",   history_path(queue: @queue, q: @search, period: "1h"),  class: @period == "1h"  ? "active" : "", aria: { current: @period == "1h"  ? "true" : nil } %>
+    <%= link_to "24h",  history_path(queue: @queue, q: @search, period: "24h"), class: @period == "24h" ? "active" : "", aria: { current: @period == "24h" ? "true" : nil } %>
+    <%= link_to "7d",   history_path(queue: @queue, q: @search, period: "7d"),  class: @period == "7d"  ? "active" : "", aria: { current: @period == "7d"  ? "true" : nil } %>
+  </div>
+</form>
+
+<% if @queue.present? %>
+  <p style="margin-top: 0.5rem; font-size: 13px; color: var(--muted);">
+    Filtering by queue: <strong><%= @queue %></strong> &mdash;
+    <%= link_to "Clear filter", history_path(q: @search, period: @period) %>
+  </p>
+<% end %>
+
+<% if @jobs.any? %>
+  <div class="sqd-card">
+    <table>
+      <thead>
+        <tr>
+          <th scope="col">Job Class</th>
+          <th scope="col">Queue</th>
+          <th scope="col">Duration</th>
+          <th scope="col">Finished At</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @jobs.each do |job| %>
+          <tr>
+            <td><%= link_to job.class_name, job_path(job) %></td>
+            <td>
+              <%= link_to job.queue_name, history_path(queue: job.queue_name, q: @search, period: @period),
+                    class: "sqd-mono", style: "color: inherit;" %>
+            </td>
+            <td class="sqd-mono"><%= format_duration(job.finished_at - job.created_at) %></td>
+            <td class="sqd-mono"><%= job.finished_at.strftime("%Y-%m-%d %H:%M:%S") %></td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+<% else %>
+  <div class="sqd-card">
+    <div class="sqd-empty">No finished jobs found.</div>
+  </div>
+<% end %>
+
+<% if @pagy.last > 1 %>
+  <%= @pagy.series_nav.html_safe %>
+<% end %>
+<% end %>