solid_queue_monitor 1.2.2 → 2.0.0

data/app/helpers/solid_queue_monitor/jobs_helper.rb

@@ -0,0 +1,134 @@
+# frozen_string_literal: true
+
+module SolidQueueMonitor
+  module JobsHelper
+    def format_arguments(arguments)
+      return '-' if arguments.blank?
+
+      formatted = unwrap_arguments(arguments)
+      if formatted.length <= 50
+        tag.code(formatted, class: 'args-single-line')
+      else
+        tag.div(tag.code(formatted, class: 'args-content'), class: 'args-container')
+      end
+    end
+
+    def format_hash(hash)
+      return '-' if hash.blank?
+
+      parts = hash.map do |key, value|
+        safe_join([tag.strong("#{key}:"), ' ', truncate(value.to_s, length: 50)])
+      end
+      tag.code(safe_join(parts, ', '))
+    end
+
+    def job_status(job)
+      SolidQueueMonitor::StatusCalculator.new(job).calculate
+    end
+
+    def job_status_badge(job)
+      status = job_status(job)
+      tag.span(status, class: "status-badge status-#{status}")
+    end
+
+    def mini_job_status_badge(job)
+      status = mini_job_status(job)
+
+      labels = {
+        failed: 'Failed',
+        completed: 'Completed',
+        in_progress: 'In Progress',
+        scheduled: 'Scheduled',
+        ready: 'Ready',
+        pending: 'Pending'
+      }
+      css_status = status == :ready ? :pending : status
+      tag.span(labels[status], class: "mini-status-badge status-#{css_status}")
+    end
+
+    def failed_error_message(error)
+      parsed_failed_error(error)[:message].to_s
+    end
+
+    def parsed_failed_error(error)
+      return { type: 'Unknown', message: 'Unknown error', backtrace: [] } unless error
+
+      error_hash = deserialize_failed_error(error)
+      {
+        type: failed_error_type(error_hash),
+        message: failed_error_text(error_hash),
+        backtrace: failed_error_backtrace(error_hash)
+      }
+    end
+
+    private
+
+    def mini_job_status(job)
+      return :failed if job.respond_to?(:failed_execution) && job.failed_execution.present?
+      return :in_progress if job.respond_to?(:claimed_execution) && job.claimed_execution.present?
+      return :scheduled if job.respond_to?(:scheduled_execution) && job.scheduled_execution.present?
+      return :ready if job.respond_to?(:ready_execution) && job.ready_execution.present?
+      return :completed if job.finished_at
+
+      :pending
+    end
+
+    def failed_error_type(error_hash)
+      error_hash['exception_class'] || error_hash[:exception_class] ||
+        error_hash['error_class'] || error_hash[:error_class] ||
+        error_hash['class'] || error_hash[:class] || 'Error'
+    end
+
+    def failed_error_text(error_hash)
+      error_hash['message'] || error_hash[:message] ||
+        error_hash['error'] || error_hash[:error] || 'Unknown error'
+    end
+
+    def failed_error_backtrace(error_hash)
+      Array(error_hash['backtrace'] || error_hash[:backtrace] || error_hash['stack_trace'] || error_hash[:stack_trace])
+    end
+
+    def deserialize_failed_error(error)
+      return error if error.is_a?(Hash)
+      return { 'message' => error.to_s } unless error.is_a?(String)
+
+      JSON.parse(error)
+    rescue JSON::ParserError
+      { 'message' => error }
+    end
+
+    def unwrap_arguments(arguments)
+      payload = if arguments.is_a?(Hash) && arguments['arguments'].present?
+                  format_job_arguments(arguments)
+                elsif wrapped_job_arguments?(arguments)
+                  format_job_arguments(arguments.first)
+                else
+                  arguments.inspect
+                end
+      payload.to_s
+    end
+
+    def wrapped_job_arguments?(arguments)
+      arguments.is_a?(Array) &&
+        arguments.length == 1 &&
+        arguments.first.is_a?(Hash) &&
+        arguments.first['arguments'].present?
+    end
+
+    def format_job_arguments(job_data)
+      args = if ruby2_keywords_payload?(job_data)
+               job_data['arguments'].first.except('_aj_ruby2_keywords')
+             else
+               job_data['arguments']
+             end
+
+      args.inspect
+    end
+
+    def ruby2_keywords_payload?(job_data)
+      job_data['arguments'].is_a?(Array) &&
+        job_data['arguments'].first.is_a?(Hash) &&
+        job_data['arguments'].first['_aj_ruby2_keywords'].present?
+    end
+  end
+end

data/app/helpers/solid_queue_monitor/pagination_helper.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module SolidQueueMonitor
+  module PaginationHelper
+    def visible_pages(current_page, total_pages)
+      return (1..total_pages).to_a if total_pages <= 7
+
+      case current_page
+      when 1..3
+        [1, 2, 3, 4, :gap, total_pages]
+      when (total_pages - 2)..total_pages
+        [1, :gap, total_pages - 3, total_pages - 2, total_pages - 1, total_pages]
+      else
+        [1, :gap, current_page - 1, current_page, current_page + 1, :gap, total_pages]
+      end
+    end
+
+    def pagination_href(page, extra_params = {})
+      query = request.query_parameters.merge(extra_params).merge(page: page)
+      "?#{query.to_query}"
+    end
+  end
+end

data/app/helpers/solid_queue_monitor/sort_helper.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module SolidQueueMonitor
+  module SortHelper
+    def sortable_header(column, label, sort:, filters: {})
+      return tag.th(label) unless sort
+
+      column_str = column.to_s
+      active = sort[:sort_by] == column_str
+      next_dir = active && sort[:sort_direction] == 'asc' ? 'desc' : 'asc'
+      query = filters.compact.merge(sort_by: column_str, sort_direction: next_dir)
+
+      tag.th(
+        link_to(
+          safe_join([label, sort_arrow(active, sort[:sort_direction])]),
+          "?#{query.to_query}",
+          class: class_names('sortable-header', active: active)
+        )
+      )
+    end
+
+    private
+
+    def sort_arrow(active, direction)
+      return ' ⇅'.html_safe unless active
+
+      direction == 'asc' ? ' ↑'.html_safe : ' ↓'.html_safe
+    end
+  end
+end

data/app/helpers/solid_queue_monitor/workers_helper.rb

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+module SolidQueueMonitor
+  module WorkersHelper
+    HEARTBEAT_STALE_THRESHOLD = 5.minutes
+    HEARTBEAT_DEAD_THRESHOLD = 10.minutes
+
+    def worker_status(process)
+      return :dead unless process.last_heartbeat_at
+
+      time_since_heartbeat = Time.current - process.last_heartbeat_at
+      return :dead if time_since_heartbeat > HEARTBEAT_DEAD_THRESHOLD
+      return :stale if time_since_heartbeat > HEARTBEAT_STALE_THRESHOLD
+
+      :healthy
+    end
+
+    def worker_row_class(process)
+      case worker_status(process)
+      when :dead then 'worker-dead'
+      when :stale then 'worker-stale'
+      else ''
+      end
+    end
+
+    def worker_kind_badge(kind)
+      badge_class = case kind
+                    when 'Worker' then 'kind-worker'
+                    when 'Dispatcher' then 'kind-dispatcher'
+                    when 'Scheduler' then 'kind-scheduler'
+                    else 'kind-other'
+                    end
+      tag.span(kind, class: class_names('kind-badge', badge_class))
+    end
+
+    def worker_hostname(process)
+      process.hostname || worker_metadata(process)['hostname'] || '-'
+    end
+
+    def worker_queues(process)
+      queues = worker_metadata(process)['queues']
+      return '-' if queues.nil?
+
+      return tag.code(queues == '*' ? 'All Queues' : queues, class: 'queue-tag') if queues.is_a?(String)
+      return '-' if queues.empty?
+
+      if queues.length <= 3
+        safe_join(queues.map { |queue| tag.code(queue, class: 'queue-tag') }, ' ')
+      else
+        visible = safe_join(queues.first(2).map { |queue| tag.code(queue, class: 'queue-tag') }, ' ')
+        safe_join([visible, tag.span("+#{queues.length - 2} more", class: 'queue-more')], ' ')
+      end
+    end
+
+    def worker_heartbeat(heartbeat_at)
+      return '-' unless heartbeat_at
+
+      tag.span("#{time_ago_in_words(heartbeat_at)} ago", title: heartbeat_at.strftime('%Y-%m-%d %H:%M:%S'))
+    end
+
+    def worker_status_badge(status)
+      tag.span(status.to_s.capitalize, class: "status-badge status-#{status}")
+    end
+
+    def worker_jobs_processing(process, claimed_counts:, claimed_jobs:)
+      count = claimed_counts[process.id] || 0
+      return tag.span('Idle', class: 'jobs-idle') if count.zero?
+
+      jobs = claimed_jobs[process.id] || []
+      job_names = jobs.map(&:class_name).uniq.first(3)
+      tooltip = jobs.first(10).map { |job| "#{job.class_name} (ID: #{job.id})" }.join("\n")
+      label = "#{count} job#{'s' if count > 1}"
+      names = "(#{job_names.join(', ')}#{'...' if jobs.length > 3})"
+
+      tag.span(class: 'jobs-processing', title: tooltip) do
+        safe_join([label, tag.span(names, class: 'job-names')], ' ')
+      end
+    end
+
+    def worker_metadata(process)
+      return {} unless process.metadata
+
+      process.metadata.is_a?(String) ? JSON.parse(process.metadata) : process.metadata
+    rescue JSON::ParserError
+      {}
+    end
+  end
+end

data/app/services/solid_queue_monitor/asset_cache.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+require 'digest'
+
+module SolidQueueMonitor
+  class AssetCache
+    ASSET_ROOT = SolidQueueMonitor::Engine.root.join('app/assets').freeze
+    SUBDIRS_BY_EXT = { '.css' => 'stylesheets', '.js' => 'javascripts' }.freeze
+    MUTEX = Mutex.new
+
+    @entries = {}
+
+    class << self
+      def fetch_by_name(file_name)
+        path = path_for(file_name)
+        return nil unless path&.file?
+
+        cached = @entries[path.to_s]
+        return cached if cached && cached[:mtime] == path.mtime
+
+        MUTEX.synchronize do
+          cached = @entries[path.to_s]
+          return cached if cached && cached[:mtime] == path.mtime
+
+          content = path.read
+          @entries[path.to_s] = {
+            content: content,
+            mtime: path.mtime,
+            etag: Digest::SHA256.hexdigest(content)[0, 16]
+          }
+        end
+      end
+
+      def fingerprint_for(file_name)
+        fetch_by_name(file_name)&.dig(:etag)
+      end
+
+      def clear!
+        MUTEX.synchronize { @entries = {} }
+      end
+
+      private
+
+      def path_for(file_name)
+        ext = File.extname(file_name)
+        subdir = SUBDIRS_BY_EXT[ext]
+        return nil unless subdir
+
+        candidate = ASSET_ROOT.join(subdir, 'solid_queue_monitor', file_name).expand_path
+        return nil unless candidate.to_s.start_with?(ASSET_ROOT.to_s)
+
+        candidate
+      end
+    end
+  end
+end

data/app/services/solid_queue_monitor/chart_data_service.rb

@@ -86,9 +86,9 @@ module SolidQueueMonitor
       if adapter?('sqlite')
         "CAST((CAST(strftime('%s', #{column}) AS INTEGER) - #{start_epoch}) / #{interval_seconds} AS INTEGER)"
       elsif adapter?('mysql') || adapter?('trilogy')
-        "CAST((UNIX_TIMESTAMP(#{column}) - #{start_epoch}) / #{interval_seconds} AS SIGNED)"
+        "FLOOR((UNIX_TIMESTAMP(#{column}) - #{start_epoch}) / #{interval_seconds})"
       else
-        "CAST((EXTRACT(EPOCH FROM #{column}) - #{start_epoch}) / #{interval_seconds} AS INTEGER)"
+        "FLOOR((EXTRACT(EPOCH FROM #{column}) - #{start_epoch}) / #{interval_seconds})::integer"
       end
     end
 

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

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Solid Queue Monitor - <%= content_for?(:title) ? yield(:title) : 'Dashboard' %></title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <%= stylesheet_link_tag asset_url_for('application.css'), nonce: content_security_policy_nonce %>
+  </head>
+  <body class="solid_queue_monitor"
+        data-auto-refresh-enabled="<%= SolidQueueMonitor.auto_refresh_enabled %>"
+        data-auto-refresh-interval="<%= SolidQueueMonitor.auto_refresh_interval %>">
+    <%= render 'solid_queue_monitor/shared/flash' %>
+    <div class="container">
+      <%= render 'solid_queue_monitor/shared/header' %>
+      <div class="section">
+        <% if content_for?(:title) %>
+          <h2><%= yield :title %></h2>
+        <% end %>
+        <%= yield %>
+      </div>
+      <%= render 'solid_queue_monitor/shared/footer' %>
+    </div>
+    <%= javascript_include_tag asset_url_for('application.js'), nonce: content_security_policy_nonce %>
+  </body>
+</html>

data/app/views/solid_queue_monitor/failed_jobs/_row.html.erb

@@ -0,0 +1,26 @@
+<tr>
+  <td><input type="checkbox" class="job-checkbox" value="<%= job.id %>"></td>
+  <td>
+    <div class="job-class"><%= link_to job.job.class_name, job_path(job.job), class: 'job-class-link' %></div>
+    <div class="job-meta">
+      <span class="job-timestamp">Queued at: <%= format_datetime(job.job.created_at) %></span>
+    </div>
+  </td>
+  <td><div class="job-queue"><%= queue_link(job.job.queue_name) %></div></td>
+  <td><div class="error-message"><%= truncate(failed_error_message(job.error), length: 100) %></div></td>
+  <td><%= format_arguments(job.job.arguments) %></td>
+  <td><%= format_datetime(job.created_at) %></td>
+  <td class="actions-cell">
+    <div class="job-actions">
+      <form method="post" action="<%= retry_failed_job_path(id: job.id) %>" class="inline-form">
+        <button type="submit" class="action-button retry-button">Retry</button>
+      </form>
+      <form method="post"
+            action="<%= discard_failed_job_path(id: job.id) %>"
+            class="inline-form"
+            data-confirm="Are you sure you want to discard this job?">
+        <button type="submit" class="action-button discard-button">Discard</button>
+      </form>
+    </div>
+  </td>
+</tr>

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

@@ -0,0 +1,38 @@
+<% content_for :title, 'Failed Jobs' %>
+
+<%= render 'solid_queue_monitor/shared/filters',
+           action_path: @action_path,
+           filters: @filters,
+           show_status: false %>
+
+<div class="bulk-actions-bar">
+  <button type="button" class="action-button retry-button" id="retry-selected-top" data-action-url="<%= retry_failed_jobs_path %>" disabled>
+    Retry Selected
+  </button>
+  <button type="button" class="action-button discard-button" id="discard-selected-top" data-action-url="<%= discard_failed_jobs_path %>" disabled>
+    Discard Selected
+  </button>
+</div>
+
+<form method="post" id="failed-jobs-form">
+  <% columns = [
+    { sort_key: nil, label: tag.input(type: 'checkbox', id: 'select-all', class: 'select-all-checkbox') },
+    { sort_key: :class_name, label: 'Job' },
+    { sort_key: :queue_name, label: 'Queue' },
+    { sort_key: nil, label: 'Error' },
+    { sort_key: nil, label: 'Arguments' },
+    { sort_key: :created_at, label: 'Failed At' },
+    { sort_key: nil, label: 'Actions' }
+  ] %>
+
+  <%= render 'solid_queue_monitor/shared/jobs_table',
+             jobs: @failed_jobs[:records],
+             columns: columns,
+             sort: @sort,
+             filters: @filters,
+             row_partial: 'solid_queue_monitor/failed_jobs/row' %>
+</form>
+
+<%= render 'solid_queue_monitor/shared/pagination',
+           current_page: @failed_jobs[:current_page],
+           total_pages: @failed_jobs[:total_pages] %>

data/app/views/solid_queue_monitor/in_progress_jobs/_row.html.erb

@@ -0,0 +1,13 @@
+<% solid_queue_job = job.job %>
+<tr>
+  <td>
+    <div class="job-class"><%= link_to solid_queue_job.class_name, job_path(solid_queue_job), class: 'job-class-link' %></div>
+    <div class="job-meta">
+      <span class="job-timestamp">Queued at: <%= format_datetime(solid_queue_job.created_at) %></span>
+    </div>
+  </td>
+  <td><%= queue_link(solid_queue_job.queue_name) %></td>
+  <td><%= format_arguments(solid_queue_job.arguments) %></td>
+  <td><%= format_datetime(job.created_at) %></td>
+  <td><%= job.process_id %></td>
+</tr>

data/app/views/solid_queue_monitor/in_progress_jobs/index.html.erb

@@ -0,0 +1,25 @@
+<% content_for :title, 'In Progress Jobs' %>
+
+<%= render 'solid_queue_monitor/shared/filters',
+           action_path: @action_path,
+           filters: @filters,
+           show_status: false %>
+
+<% columns = [
+  { sort_key: :class_name, label: 'Job' },
+  { sort_key: :queue_name, label: 'Queue' },
+  { sort_key: nil, label: 'Arguments' },
+  { sort_key: :created_at, label: 'Started At' },
+  { sort_key: nil, label: 'Process ID' }
+] %>
+
+<%= render 'solid_queue_monitor/shared/jobs_table',
+           jobs: @in_progress_jobs[:records],
+           columns: columns,
+           sort: @sort,
+           filters: @filters,
+           row_partial: 'solid_queue_monitor/in_progress_jobs/row' %>
+
+<%= render 'solid_queue_monitor/shared/pagination',
+           current_page: @in_progress_jobs[:current_page],
+           total_pages: @in_progress_jobs[:total_pages] %>

data/app/views/solid_queue_monitor/jobs/_arguments.html.erb

@@ -0,0 +1,9 @@
+<div class="job-section">
+  <div class="section-header">
+    <h3 class="section-title">Arguments</h3>
+    <div class="section-actions">
+      <button class="copy-button" data-action="copy" data-target="arguments-content">Copy</button>
+    </div>
+  </div>
+  <pre class="arguments-content" id="arguments-content"><%= pretty_arguments(@job.arguments) %></pre>
+</div>

data/app/views/solid_queue_monitor/jobs/_error.html.erb

@@ -0,0 +1,26 @@
+<% error = parsed_failed_error(@failed_execution.error) %>
+<div class="job-section error-section">
+  <div class="section-header">
+    <h3 class="section-title">Error</h3>
+    <button class="copy-button" data-action="copy" data-target="error-content">Copy</button>
+  </div>
+  <div id="error-content">
+    <div class="error-type"><%= error[:type] %></div>
+    <div class="error-message-box"><%= error[:message] %></div>
+  </div>
+  <% if error[:backtrace].present? %>
+    <% lines = error[:backtrace] %>
+    <% app_lines = lines.select { |line| line.include?('/app/') || line.include?('/lib/') } %>
+    <div class="backtrace-section">
+      <div class="backtrace-header">
+        <span class="backtrace-title">Backtrace</span>
+        <div class="backtrace-toggle">
+          <button class="toggle-btn active" data-action="show-backtrace" data-backtrace="app">App Only</button>
+          <button class="toggle-btn" data-action="show-backtrace" data-backtrace="full">Full</button>
+        </div>
+      </div>
+      <pre class="backtrace-content" id="app-backtrace"><%= safe_join((app_lines.presence || lines.first(5)).map.with_index { |line, index| tag.span("#{index + 1}. #{line.to_s.strip}", class: 'backtrace-line') }, "\n") %></pre>
+      <pre class="backtrace-content is-hidden" id="full-backtrace"><%= safe_join(lines.map.with_index { |line, index| tag.span("#{index + 1}. #{line.to_s.strip}", class: 'backtrace-line') }, "\n") %></pre>
+    </div>
+  <% end %>
+</div>

data/app/views/solid_queue_monitor/jobs/_execution_history.html.erb

@@ -0,0 +1,25 @@
+<% if @recent_executions.any? %>
+  <div class="job-section">
+    <div class="section-header">
+      <h3 class="section-title">Recent Executions</h3>
+      <span class="section-subtitle">Other <%= @job.class_name %> jobs</span>
+    </div>
+    <div class="table-container">
+      <table class="recent-executions-table">
+        <thead>
+          <tr><th>Status</th><th>Arguments</th><th>Created</th><th>Duration</th></tr>
+        </thead>
+        <tbody>
+          <% @recent_executions.each do |recent_job| %>
+            <tr>
+              <td><%= mini_job_status_badge(recent_job) %></td>
+              <td class="args-preview"><%= link_to truncate(recent_job.arguments.inspect, length: 60), job_path(recent_job) %></td>
+              <td><%= time_ago_in_words(recent_job.created_at) %> ago</td>
+              <td><%= recent_job_duration(recent_job) %></td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+<% end %>

data/app/views/solid_queue_monitor/jobs/_header.html.erb

@@ -0,0 +1,37 @@
+<% status = detail_job_status(job: @job, failed_execution: @failed_execution, claimed_execution: @claimed_execution, scheduled_execution: @scheduled_execution) %>
+<div class="job-header">
+  <div class="job-header-main">
+    <h1 class="job-title"><%= @job.class_name %></h1>
+    <span class="job-status-badge <%= detail_status_class(status) %>"><%= detail_status_label(status) %></span>
+  </div>
+  <div class="job-header-meta">
+    <span class="job-queue"><%= queue_link(@job.queue_name) %></span>
+    <span class="job-separator">.</span>
+    <span class="job-priority">Priority <%= @job.priority %></span>
+    <span class="job-separator">.</span>
+    <span class="job-id">Job #<%= @job.id %></span>
+  </div>
+  <% if @failed_execution || @scheduled_execution %>
+    <div class="job-actions">
+      <% if @failed_execution %>
+        <form action="<%= retry_failed_job_path(id: @failed_execution.id) %>" method="post" class="inline-form">
+          <input type="hidden" name="redirect_to" value="<%= job_path(@job) %>">
+          <button type="submit" class="action-button retry-button">Retry</button>
+        </form>
+        <form action="<%= discard_failed_job_path(id: @failed_execution.id) %>"
+              method="post"
+              class="inline-form"
+              data-confirm="Are you sure you want to discard this job?">
+          <input type="hidden" name="redirect_to" value="<%= failed_jobs_path %>">
+          <button type="submit" class="action-button discard-button">Discard</button>
+        </form>
+      <% end %>
+      <% if @scheduled_execution %>
+        <form action="<%= execute_scheduled_job_path(id: @scheduled_execution.id) %>" method="post" class="inline-form">
+          <input type="hidden" name="redirect_to" value="<%= scheduled_jobs_path %>">
+          <button type="submit" class="action-button retry-button">Execute Now</button>
+        </form>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/app/views/solid_queue_monitor/jobs/_metadata.html.erb

@@ -0,0 +1,22 @@
+<div class="job-section">
+  <h3 class="section-title">Job Details</h3>
+  <div class="details-grid">
+    <div class="detail-row"><span class="detail-label">Class</span><span class="detail-value"><%= @job.class_name %></span></div>
+    <div class="detail-row"><span class="detail-label">Queue</span><span class="detail-value"><%= queue_link(@job.queue_name, css_class: 'queue-badge') %></span></div>
+    <div class="detail-row"><span class="detail-label">Priority</span><span class="detail-value"><%= @job.priority %></span></div>
+    <div class="detail-row"><span class="detail-label">Active Job ID</span><span class="detail-value detail-mono"><%= @job.active_job_id || '-' %></span></div>
+    <% if @job.concurrency_key.present? %>
+      <div class="detail-row"><span class="detail-label">Concurrency Key</span><span class="detail-value detail-mono"><%= @job.concurrency_key %></span></div>
+    <% end %>
+    <div class="detail-row"><span class="detail-label">Created At</span><span class="detail-value"><%= format_datetime(@job.created_at) %></span></div>
+    <% if @scheduled_execution || @job.scheduled_at %>
+      <div class="detail-row"><span class="detail-label">Scheduled At</span><span class="detail-value"><%= format_datetime(@job.scheduled_at || @scheduled_execution&.scheduled_at) %></span></div>
+    <% end %>
+    <% if @job.finished_at %>
+      <div class="detail-row"><span class="detail-label">Finished At</span><span class="detail-value"><%= format_datetime(@job.finished_at) %></span></div>
+    <% end %>
+    <% if @failed_execution %>
+      <div class="detail-row"><span class="detail-label">Failed At</span><span class="detail-value"><%= format_datetime(@failed_execution.created_at) %></span></div>
+    <% end %>
+  </div>
+</div>

data/app/views/solid_queue_monitor/jobs/_raw_data.html.erb

@@ -0,0 +1,11 @@
+<div class="job-section collapsible-section">
+  <div class="section-header collapsible-header" data-action="toggle-section">
+    <div class="collapsible-title">
+      <h3 class="section-title">Raw Data</h3>
+    </div>
+    <button class="copy-button" data-action="copy" data-target="raw-data-content" data-stop-propagation="true">Copy</button>
+  </div>
+  <div class="collapsible-content">
+    <pre class="raw-data-content" id="raw-data-content"><%= JSON.pretty_generate(@job.attributes) %></pre>
+  </div>
+</div>

data/app/views/solid_queue_monitor/jobs/_timeline.html.erb

@@ -0,0 +1,29 @@
+<% events = [] %>
+<% status = detail_job_status(job: @job, failed_execution: @failed_execution, claimed_execution: @claimed_execution, scheduled_execution: @scheduled_execution) %>
+<% events << { label: 'Created', time: @job.created_at, status: :done } if @job.created_at %>
+<% scheduled_at = @job.scheduled_at || @scheduled_execution&.scheduled_at %>
+<% events << { label: 'Scheduled', time: scheduled_at, status: :done } if scheduled_at && scheduled_at != @job.created_at %>
+<% events << { label: 'Started', time: @claimed_execution.created_at, status: :done } if @claimed_execution %>
+<% events << { label: 'Completed', time: @job.finished_at, status: :success } if status == :completed %>
+<% events << { label: 'Failed', time: @failed_execution.created_at, status: :failed } if status == :failed %>
+<% events << { label: 'Running...', time: nil, status: :active } if status == :in_progress %>
+
+<% if events.size >= 2 %>
+  <div class="job-section">
+    <h3 class="section-title">Timeline</h3>
+    <div class="job-timeline">
+      <div class="timeline-track">
+        <% events.each_with_index do |event, index| %>
+          <div class="timeline-event timeline-<%= event[:status] %>">
+            <div class="timeline-dot"></div>
+            <%= tag.div(class: 'timeline-line') unless index == events.size - 1 %>
+            <div class="timeline-content">
+              <div class="timeline-label"><%= event[:label] %></div>
+              <div class="timeline-time"><%= format_datetime(event[:time]) unless event[:time].nil? %></div>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/views/solid_queue_monitor/jobs/_timing.html.erb

@@ -0,0 +1,9 @@
+<% timing = detail_timing(job: @job, claimed_execution: @claimed_execution, failed_execution: @failed_execution) %>
+<div class="timing-cards">
+  <% { 'Queue Wait' => timing[:queue_wait], 'Execution' => timing[:execution], 'Total Time' => timing[:total] }.each do |label, duration| %>
+    <div class="timing-card">
+      <div class="timing-value"><%= detail_duration(duration) %></div>
+      <div class="timing-label"><%= label %></div>
+    </div>
+  <% end %>
+</div>